|
|
|
|
@ -1,20 +1,38 @@
|
|
|
|
|
<template>
|
|
|
|
|
<div class="Dashboard" style="display: none;">
|
|
|
|
|
<el-alert show-icon title="因未对接体检数据接口,以下数据均为演示.报表内容和类型可根据需求调整" type="warning" :closable="false" style="margin-bottom: 20px;"/>
|
|
|
|
|
<div class="Dashboard" v-loading="loading">
|
|
|
|
|
<div class="head">
|
|
|
|
|
<el-row>
|
|
|
|
|
|
|
|
|
|
<el-form-item style="margin-left: 8px;">
|
|
|
|
|
|
|
|
|
|
<el-date-picker v-model="searchInfo.dateRange" value-format="YYYY-MM-DD" type="daterange"
|
|
|
|
|
range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" />
|
|
|
|
|
|
|
|
|
|
</el-form-item>
|
|
|
|
|
|
|
|
|
|
<el-form-item>
|
|
|
|
|
<el-button type="primary" style="margin-left: 20px;" @click="GetInfo">搜索</el-button>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
|
|
|
|
|
</el-row>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
<!-- <el-alert show-icon title="因未对接体检数据接口,以下数据均为演示.报表内容和类型可根据需求调整" type="warning" :closable="false" style="margin-bottom: 20px;"/> -->
|
|
|
|
|
<el-row class="row1" :gutter="20">
|
|
|
|
|
<el-col :span="12">
|
|
|
|
|
<div id="MonthCount" class="MonthCount"></div>
|
|
|
|
|
<div id="JiGouCount" class="MonthCount"></div>
|
|
|
|
|
</el-col>
|
|
|
|
|
<el-col :span="12">
|
|
|
|
|
<div id="TypeCount" class="TypeCount"></div>
|
|
|
|
|
<!-- <div id="TypeCount" class="TypeCount"></div> -->
|
|
|
|
|
<div id="JiGouCountByMonth" class="TypeCount"></div>
|
|
|
|
|
</el-col>
|
|
|
|
|
</el-row>
|
|
|
|
|
<el-row class="row2">
|
|
|
|
|
<el-col :span="24">
|
|
|
|
|
<div class="title">各体检机构体检量统计</div>
|
|
|
|
|
<el-table :data="tableData" style="width: 100%;" row-key="id">
|
|
|
|
|
<el-table :data="tableData" style="width: 100%;" show-summary row-key="id">
|
|
|
|
|
<!-- <el-table-column prop="id" label="Id" width="100" /> -->
|
|
|
|
|
<el-table-column prop="name" label="机构名称" />
|
|
|
|
|
<el-table-column prop="org_name" label="机构名称" />
|
|
|
|
|
<el-table-column prop="count" label="数量" />
|
|
|
|
|
</el-table>
|
|
|
|
|
<!-- <div class="page">
|
|
|
|
|
@ -32,21 +50,12 @@
|
|
|
|
|
ref,
|
|
|
|
|
onMounted
|
|
|
|
|
} from 'vue'
|
|
|
|
|
import {
|
|
|
|
|
AppointmentCount,AppointmentCountByMonth,GetHealthOrganizationEnableList
|
|
|
|
|
} from '@/api/api.js'
|
|
|
|
|
import * as echarts from 'echarts';
|
|
|
|
|
let loading = ref(false)
|
|
|
|
|
let tableData = ref([{
|
|
|
|
|
name:'医管中心',
|
|
|
|
|
count:'500'
|
|
|
|
|
},{
|
|
|
|
|
name:'亦庄医院',
|
|
|
|
|
count:'636'
|
|
|
|
|
},{
|
|
|
|
|
name:'采育卫生院',
|
|
|
|
|
count:'425'
|
|
|
|
|
},{
|
|
|
|
|
name:'西红门医院',
|
|
|
|
|
count:'266'
|
|
|
|
|
}])
|
|
|
|
|
let tableData = ref([])
|
|
|
|
|
let currentPage = ref(1) //当前页码
|
|
|
|
|
let pageSize = ref(15) //每页数量
|
|
|
|
|
let total = 0 //总数量
|
|
|
|
|
@ -61,71 +70,141 @@
|
|
|
|
|
const GetList=()=>{
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
onMounted(()=>{
|
|
|
|
|
var ChartMonthCount = echarts.init(document.getElementById('MonthCount'));
|
|
|
|
|
let searchInfo=ref({});
|
|
|
|
|
//获取体检机构预约登记数量
|
|
|
|
|
const GetJiGouAppointmentCount=()=>{
|
|
|
|
|
loading.value=true
|
|
|
|
|
AppointmentCount({searchInfo:searchInfo.value}).then(res => {
|
|
|
|
|
loading.value=false
|
|
|
|
|
if (res.status) {
|
|
|
|
|
AppointmentZhuZhuangTu(res.data)
|
|
|
|
|
tableData.value=res.data.list
|
|
|
|
|
searchInfo.value.dateRange=[res.data.dateRange[0],res.data.dateRange[1]]
|
|
|
|
|
} else {
|
|
|
|
|
ElMessage.error(res.msg)
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
//获取体检机构预约登记数量（按月）
|
|
|
|
|
const GetJiGouAppointmentCountByMonth=()=>{
|
|
|
|
|
AppointmentCountByMonth({searchInfo:searchInfo.value}).then(res => {
|
|
|
|
|
if (res.status) {
|
|
|
|
|
AppointmentZheXianTu(res.data)
|
|
|
|
|
} else {
|
|
|
|
|
ElMessage.error(res.msg)
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
//绘制预约柱状图
|
|
|
|
|
const AppointmentZhuZhuangTu=(resdata)=>{
|
|
|
|
|
let jigou_list=[];
|
|
|
|
|
let count_list=[];
|
|
|
|
|
resdata.list.forEach((v,i)=>{
|
|
|
|
|
jigou_list.push(v.org_name)
|
|
|
|
|
count_list.push(v.count)
|
|
|
|
|
})
|
|
|
|
|
var ChartJiGouCount = echarts.init(document.getElementById('JiGouCount'));
|
|
|
|
|
// 绘制图表
|
|
|
|
|
ChartMonthCount.setOption({
|
|
|
|
|
ChartJiGouCount.setOption({
|
|
|
|
|
title: {
|
|
|
|
|
text: '2023-01-01~2023-06-30体检数量统计（月）'
|
|
|
|
|
text: resdata.dateRange[0].substr(0,10)+'~'+resdata.dateRange[1].substr(0,10)+'体检数量统计'
|
|
|
|
|
},
|
|
|
|
|
tooltip: {},
|
|
|
|
|
xAxis: {
|
|
|
|
|
data: ['1月', '2月', '3月', '4月', '5月', '6月']
|
|
|
|
|
data: jigou_list
|
|
|
|
|
},
|
|
|
|
|
yAxis: {},
|
|
|
|
|
series: [
|
|
|
|
|
{
|
|
|
|
|
name: '数量',
|
|
|
|
|
type: 'bar',
|
|
|
|
|
data: [5, 20, 36, 10, 10, 20]
|
|
|
|
|
data: count_list
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
});
|
|
|
|
|
var ChartTypeCount = echarts.init(document.getElementById('TypeCount'));
|
|
|
|
|
ChartTypeCount.setOption(
|
|
|
|
|
{
|
|
|
|
|
title: {
|
|
|
|
|
text: '2023-01-01~2023-06-30体检行业分类统计'
|
|
|
|
|
},
|
|
|
|
|
tooltip: {
|
|
|
|
|
trigger: 'item'
|
|
|
|
|
},
|
|
|
|
|
legend: {
|
|
|
|
|
top: '5%',
|
|
|
|
|
left: 'center'
|
|
|
|
|
},
|
|
|
|
|
series: [
|
|
|
|
|
{
|
|
|
|
|
name: '数量',
|
|
|
|
|
type: 'pie',
|
|
|
|
|
radius: ['40%', '70%'],
|
|
|
|
|
avoidLabelOverlap: false,
|
|
|
|
|
label: {
|
|
|
|
|
show: false,
|
|
|
|
|
position: 'center'
|
|
|
|
|
},
|
|
|
|
|
emphasis: {
|
|
|
|
|
label: {
|
|
|
|
|
show: true,
|
|
|
|
|
fontSize: 40,
|
|
|
|
|
fontWeight: 'bold'
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
labelLine: {
|
|
|
|
|
show: false
|
|
|
|
|
},
|
|
|
|
|
data: [
|
|
|
|
|
{ value: 1048, name: '食品类' },
|
|
|
|
|
{ value: 735, name: '化妆品类' },
|
|
|
|
|
{ value: 580, name: '公共场所类' },
|
|
|
|
|
{ value: 484, name: '生活饮用水类' },
|
|
|
|
|
{ value: 300, name: '消毒产品生产类' }
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
//绘制预约折线图
|
|
|
|
|
const AppointmentZheXianTu=(resdata)=>{
|
|
|
|
|
let month_list=[];
|
|
|
|
|
let count_list=[];
|
|
|
|
|
resdata.list.forEach((v,i)=>{
|
|
|
|
|
month_list.push(v.month.substr(6,8)+'月')
|
|
|
|
|
count_list.push(v.count)
|
|
|
|
|
})
|
|
|
|
|
var JiGouCountByMonth = echarts.init(document.getElementById('JiGouCountByMonth'));
|
|
|
|
|
// 绘制图表
|
|
|
|
|
JiGouCountByMonth.setOption({
|
|
|
|
|
title: {
|
|
|
|
|
text: resdata.dateRange[0].substr(0,7)+'~'+resdata.dateRange[1].substr(0,7)+'体检数量走势'
|
|
|
|
|
},
|
|
|
|
|
tooltip: {},
|
|
|
|
|
xAxis: {
|
|
|
|
|
data: month_list
|
|
|
|
|
},
|
|
|
|
|
yAxis: {},
|
|
|
|
|
series: [
|
|
|
|
|
{
|
|
|
|
|
name: '数量',
|
|
|
|
|
type: 'line',
|
|
|
|
|
data: count_list
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
const GetInfo=()=>{
|
|
|
|
|
GetJiGouAppointmentCount()
|
|
|
|
|
GetJiGouAppointmentCountByMonth()
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
onMounted(()=>{
|
|
|
|
|
GetJiGouAppointmentCount()
|
|
|
|
|
GetJiGouAppointmentCountByMonth()
|
|
|
|
|
// var ChartTypeCount = echarts.init(document.getElementById('TypeCount'));
|
|
|
|
|
// ChartTypeCount.setOption(
|
|
|
|
|
// {
|
|
|
|
|
// title: {
|
|
|
|
|
// text: '2023-01-01~2023-06-30体检行业分类统计'
|
|
|
|
|
// },
|
|
|
|
|
// tooltip: {
|
|
|
|
|
// trigger: 'item'
|
|
|
|
|
// },
|
|
|
|
|
// legend: {
|
|
|
|
|
// top: '5%',
|
|
|
|
|
// left: 'center'
|
|
|
|
|
// },
|
|
|
|
|
// series: [
|
|
|
|
|
// {
|
|
|
|
|
// name: '数量',
|
|
|
|
|
// type: 'pie',
|
|
|
|
|
// radius: ['40%', '70%'],
|
|
|
|
|
// avoidLabelOverlap: false,
|
|
|
|
|
// label: {
|
|
|
|
|
// show: false,
|
|
|
|
|
// position: 'center'
|
|
|
|
|
// },
|
|
|
|
|
// emphasis: {
|
|
|
|
|
// label: {
|
|
|
|
|
// show: true,
|
|
|
|
|
// fontSize: 40,
|
|
|
|
|
// fontWeight: 'bold'
|
|
|
|
|
// }
|
|
|
|
|
// },
|
|
|
|
|
// labelLine: {
|
|
|
|
|
// show: false
|
|
|
|
|
// },
|
|
|
|
|
// data: [
|
|
|
|
|
// { value: 1048, name: '食品类' },
|
|
|
|
|
// { value: 735, name: '化妆品类' },
|
|
|
|
|
// { value: 580, name: '公共场所类' },
|
|
|
|
|
// { value: 484, name: '生活饮用水类' },
|
|
|
|
|
// { value: 300, name: '消毒产品生产类' }
|
|
|
|
|
// ]
|
|
|
|
|
// }
|
|
|
|
|
// ]
|
|
|
|
|
|
|
|
|
|
// })
|
|
|
|
|
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
|
yanzai
1 year ago