健康监测统计
<el-radio-group v-model=“drgName” style=‘margin-left:10px’ @click=“query()”>
<el-radio-button label=“hypertension”>高血压</el-radio-button>
<el-radio-button label=“diabetes”>糖尿病</el-radio-button>
</el-radio-group>
<search-tree
style='width: 200px'
type="org"
v-model="orgId"
:cache="false"
clearable
placeholder="所属机构"
class="filter-item"
/>
<date-range
v-model="dateRange"
type="daterange"
range-separator="至"
start-placeholder="预约日期起"
end-placeholder="预约日期止"
class="filter-item"
></date-range>
<el-button
class="filter-item"
size="mini"
type="success"
icon="el-icon-search"
@click="query()"
>
搜索
</el-button>
<el-row :gutter="20" class="combined-row">
<el-col :span="5">
慢病管理人数
{{ monitorData.diseaseManageTotalNum }}
慢病一体化人数
{{ monitorData.monitorTotalNum }}
</el-col>
<el-col :span="18">
<ve-histogram
:data="monitorStatisticDate"
:settings="monitorStatisticSettings"
:extend="chartExtend"
></ve-histogram>
</el-col>
</el-row>
<el-table
border
ref="dataTable"
v-loading="loading"
:data="formData"
size="small"
style="width: 100%"
>
<el-table-column
prop="orgName"
label="机构"
show-overflow-tooltip
align="center"
></el-table-column>
<el-table-column
prop="diseaseManageNum"
label="管理人数"
show-overflow-tooltip
align="center"
></el-table-column>
<el-table-column
label="已监测人数"
show-overflow-tooltip
align="center"
>
<el-table-column
prop="monitorNormalNum"
label="正常"
show-overflow-tooltip
align="center"
></el-table-column>
<el-table-column
prop="monitorMildNum"
label="轻度"
show-overflow-tooltip
align="center"
></el-table-column>
<el-table-column
prop="monitorModerateNum"
label="中度"
show-overflow-tooltip
align="center"
></el-table-column>
<el-table-column
prop="monitorSeriousNum"
label="重度"
show-overflow-tooltip
align="center"
></el-table-column>
<el-table-column
prop="monitorExceptionNum"
label="异常"
show-overflow-tooltip
align="center"
></el-table-column>
<el-table-column
prop="monitorTotalNum"
label="合计"
show-overflow-tooltip
align="center"
></el-table-column>
</el-table-column>
<el-table-column
prop="notMonitorNum"
label="未监测人数"
show-overflow-tooltip
align="center"
></el-table-column>
</el-table>
</template>
<script>
import DateUtil from ‘…/…/…/…/utils/date’
import { statisticsMonitorTotal,statisticsMonitorFormTotal } from ‘…/…/…/…/api/fu/statistic’
export default {
name: ‘StatisticsMonitorIndex’,
components: { DateUtil },
data() {
return {
drgName:‘hypertension’,
orgId: null,
diseaseManageNum: null,
rateCount: null,
loading: false,
monitorData: {
diseaseManageTotalNum: 0,
monitorTotalNum: 0
},
monitorStatisticItemDTOList: [],
formData: [],
// 分页查询参数
params: { },
// 时间区间,默认为上周到今天7天内日期
dateRange: [DateUtil.addDate(new Date(), -31), DateUtil.getNowDate()],
monitorStatisticDate: {
columns: ['orgName', '管理人数', '监测完成率'],
rows: []
},
monitorStatisticSettings: {
showLine: ['监测完成率'],
axisSite: { right: ['监测完成率'] },
yAxisName: ['管理人数', '监测完成率(%)']
},
chartExtend: {
color: ['#45C2E0', '#FF9393'],
legend: {
data: ['管理人数', '监测完成率']
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross'
}
},
series: {
smooth: false
},
alignTicks: true,
xAxis: {
axisLabel: {
interval: 0
}
},
yAxis: [
{
name: '管理人数',
type: 'value',
splitNumber: 5,
axisLabel: {
formatter: '{value}'
},
splitLine: {
show: true,
lineStyle: {
type: 'dashed'
}
}
},
{
name: '监测完成率(%)',
type: 'value',
min: 0,
max: 100,
interval: 20,
splitNumber: 5,
axisLabel: {
formatter: '{value}%'
},
splitLine: {
show: true,
lineStyle: {
type: 'dashed'
}
}
}
]
},
}
},
created() {
this.$nextTick(() => {
// 路由自带的查询参数
this.params = Object.assign({}, this.params, this.$route.query)
this.query()
})
},
watch: {
// 监听drgName的变化
drgName(newValue, oldValue) {
if (newValue !== oldValue) {
this.query();
}
},
dateRange(val) {
// 安全判断
if (val && Array.isArray(val) && val.length >= 2) {
this.params.startDate = DateUtil.format(val[0], ‘yyyy-MM-dd’);
this.params.endDate = DateUtil.format(val[1], ‘yyyy-MM-dd’);
} else {
this.params.startDate = null;
this.params.endDate = null;
}
},
},
methods: {
/**
* 查询
* @param
*/
query() {
this.loading = true;
let startDate = null;
let endDate = null;
if (this.dateRange && Array.isArray(this.dateRange) && this.dateRange.length >= 2) {
startDate = DateUtil.format(this.dateRange[0], 'yyyy-MM-dd');
endDate = DateUtil.format(this.dateRange[1], 'yyyy-MM-dd');
}
const params = {
drgName: this.drgName,
orgId: this.orgId,
startDate: startDate,
endDate: endDate
};
// 并发请求两个接口
Promise.all([
statisticsMonitorTotal(params), // 图表数据
statisticsMonitorFormTotal(params) // 表单数据
])
.then(([response1, response2]) => {
// 处理第一个接口:统计图数据
if (response1.code === 'success') {
const data = response1.data || {};
this.monitorData = {
diseaseManageTotalNum: data.diseaseManageTotalNum || 0,
monitorTotalNum: data.monitorTotalNum || 0
};
this.monitorStatisticDate.rows = (data.monitorStatisticItemDTOList || []).map(item => ({
orgName: item.orgName,
'管理人数': item.diseaseManageNum,
'监测完成率': item.rateCount
}));
} else {
this.$message.error(response1.message || '获取统计图表数据失败');
}
// 处理第二个接口:表单数据
if (response2.code === 'success') {
const formDataList = response2.data;
this.formData = formDataList.map(formData => ({
orgName: formData.orgName,
diseaseManageNum: formData.diseaseManageNum,
monitorNormalNum: formData.monitorNormalNum,
monitorMildNum: formData.monitorMildNum,
monitorModerateNum: formData.monitorModerateNum,
monitorSeriousNum: formData.monitorSeriousNum,
monitorExceptionNum: formData.monitorExceptionNum,
monitorTotalNum: formData.monitorTotalNum,
notMonitorNum: formData.notMonitorNum
}));
} else {
this.$message.error(response2.message || '获取表单统计数据失败');
}
})
.catch(error => {
console.error('API调用错误:', error);
this.$message.error('数据加载失败');
})
.finally(() => {
this.loading = false;
});
},
},
computed: {}
}
</script>
这是全部代码,要实现双Y轴左右刻度线一致,并且左侧管理人数固定6条,刻度根据实际数值自动变换;右侧监测完成率(%)固定6条,取消自动计算,刻度分别是0 20 40 60 80 100