1747191978@qq.com
4 months ago
21 changed files with 5665 additions and 4463 deletions
@ -0,0 +1,146 @@ |
|||||
|
import request from "@/utils/request"; |
||||
|
|
||||
|
// 患者统计 - 饼状
|
||||
|
export function queryPatient(data) { |
||||
|
return request({ |
||||
|
url: "/qualityControl/home/queryPatient", |
||||
|
method: "post", |
||||
|
data: data, |
||||
|
}); |
||||
|
} |
||||
|
// 患者统计 - 柱状图
|
||||
|
export function queryByDatePatient(data) { |
||||
|
return request({ |
||||
|
url: "/qualityControl/home/queryByDatePatient", |
||||
|
method: "post", |
||||
|
data: data, |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
// 静脉溶栓率 - 统计
|
||||
|
export function queryJmrs(data) { |
||||
|
return request({ |
||||
|
url: "/qualityControl/home/queryJmrs", |
||||
|
method: "post", |
||||
|
data: data, |
||||
|
}); |
||||
|
} |
||||
|
// 静脉溶栓率 - 数据对比
|
||||
|
// 静脉溶栓率 - DNT
|
||||
|
export function queryDntResult(data) { |
||||
|
return request({ |
||||
|
url: "/qualityControl/home/queryDntResult", |
||||
|
method: "post", |
||||
|
data: data, |
||||
|
}); |
||||
|
} |
||||
|
// 静脉溶栓率 - Sich
|
||||
|
export function querySichResult(data) { |
||||
|
return request({ |
||||
|
url: "/qualityControl/home/querySichResult", |
||||
|
method: "post", |
||||
|
data: data, |
||||
|
}); |
||||
|
} |
||||
|
// 血管治疗 - DPT
|
||||
|
export function queryDptResult(data) { |
||||
|
return request({ |
||||
|
url: "/qualityControl/home/queryDptResult", |
||||
|
method: "post", |
||||
|
data: data, |
||||
|
}); |
||||
|
} |
||||
|
// 血管治疗 - Rpt
|
||||
|
export function queryRptResult(data) { |
||||
|
return request({ |
||||
|
url: "/qualityControl/home/queryRptResult", |
||||
|
method: "post", |
||||
|
data: data, |
||||
|
}); |
||||
|
} |
||||
|
// 血管治疗 - SJDB
|
||||
|
// export function selectXgzl(data) {
|
||||
|
// return request({
|
||||
|
// url: "/qualityControl/home/selectXgzl",
|
||||
|
// method: "post",
|
||||
|
// data: data,
|
||||
|
// });
|
||||
|
// }
|
||||
|
export function dataComparison(data) { |
||||
|
return request({ |
||||
|
url: "/qualityControl/home/selectXgzl", |
||||
|
method: "post", |
||||
|
data: data, |
||||
|
}); |
||||
|
} |
||||
|
// 血管治疗统计
|
||||
|
export function queryXgzlLv(data) { |
||||
|
return request({ |
||||
|
url: "/qualityControl/home/queryXgzlLv", |
||||
|
method: "post", |
||||
|
data: data, |
||||
|
}); |
||||
|
} |
||||
|
// 大屏急救数量统计
|
||||
|
export function queryPatientList(data) { |
||||
|
return request({ |
||||
|
url: "/qualityControl/home/queryPatientList", |
||||
|
method: "post", |
||||
|
data: data, |
||||
|
}); |
||||
|
} |
||||
|
// 大屏急救时长分析
|
||||
|
export function queryFirstAidTime(data) { |
||||
|
return request({ |
||||
|
url: "/qualityControl/home/queryFirstAidTime", |
||||
|
method: "post", |
||||
|
data: data, |
||||
|
}); |
||||
|
} |
||||
|
// 大屏智慧平车面板数据
|
||||
|
export function queryData(data) { |
||||
|
return request({ |
||||
|
url: "/qualityControl/home/queryData", |
||||
|
method: "post", |
||||
|
data: data, |
||||
|
}); |
||||
|
} |
||||
|
// 患者信息
|
||||
|
export function patientTotal(data) { |
||||
|
return request({ |
||||
|
url: "/statistics/patientTotal", |
||||
|
method: "post", |
||||
|
data: data, |
||||
|
}); |
||||
|
} |
||||
|
// 诊疗信息
|
||||
|
export function zlInfo(data) { |
||||
|
return request({ |
||||
|
url: "/statistics/zlInfo", |
||||
|
method: "post", |
||||
|
data: data, |
||||
|
}); |
||||
|
} |
||||
|
// 治疗类型
|
||||
|
export function zlType(data) { |
||||
|
return request({ |
||||
|
url: "/statistics/zlType", |
||||
|
method: "post", |
||||
|
data: data, |
||||
|
}); |
||||
|
} |
||||
|
// 随访分布
|
||||
|
export function sffb(data) { |
||||
|
return request({ |
||||
|
url: "/statistics/sffb", |
||||
|
method: "post", |
||||
|
data: data, |
||||
|
}); |
||||
|
} |
||||
|
export function sftj(data) { |
||||
|
return request({ |
||||
|
url: "/statistics/sftj", |
||||
|
method: "post", |
||||
|
data: data, |
||||
|
}); |
||||
|
} |
||||
File diff suppressed because it is too large
@ -0,0 +1,404 @@ |
|||||
|
<template> |
||||
|
<div> |
||||
|
<div class="app-container"> |
||||
|
<div class="dis" style="width: 100%"> |
||||
|
<div style="flex: 1; margin-right: 20px"> |
||||
|
<el-card shadow="always"> |
||||
|
<div class="dis title-box"> |
||||
|
<span class="header-title">病种排名</span> |
||||
|
<div class="dis"></div> |
||||
|
</div> |
||||
|
<div style="height: 300px" v-loading="loading"> |
||||
|
<div id="diagnose" style="width: 100%"></div> |
||||
|
</div> |
||||
|
</el-card> |
||||
|
</div> |
||||
|
<div style="flex: 1; margin-right: 20px"> |
||||
|
<el-card shadow="always"> |
||||
|
<div class="dis title-box"> |
||||
|
<span class="header-title">体系分布</span> |
||||
|
<div class="dis"></div> |
||||
|
</div> |
||||
|
<div style="height: 300px" v-loading="loading"> |
||||
|
<div id="system" style="width: 100%"></div> |
||||
|
</div> |
||||
|
</el-card> |
||||
|
</div> |
||||
|
<div style="flex: 1; margin-right: 20px"> |
||||
|
<el-card shadow="always"> |
||||
|
<div class="dis title-box"> |
||||
|
<span class="header-title">体质分布</span> |
||||
|
<div class="dis"></div> |
||||
|
</div> |
||||
|
<div style="height: 300px" v-loading="loading"> |
||||
|
<div id="physique" style="width: 100%"></div> |
||||
|
</div> |
||||
|
</el-card> |
||||
|
</div> |
||||
|
<div style="flex: 1"> |
||||
|
<el-card shadow="always"> |
||||
|
<div class="dis title-box"> |
||||
|
<span class="header-title">体态评估（TAPS）</span> |
||||
|
<div class="dis"></div> |
||||
|
</div> |
||||
|
<div style="height: 300px" v-loading="loading"> |
||||
|
<div id="posture" style="width: 100%"></div> |
||||
|
</div> |
||||
|
</el-card> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="app-container"> |
||||
|
<div class="dis" style="width: 100%"> |
||||
|
<div style="flex: 1; margin-right: 20px"> |
||||
|
<el-card shadow="always"> |
||||
|
<div class="dis title-box"> |
||||
|
<span class="header-title">失眠评估（PHQ-9）</span> |
||||
|
<div class="dis"></div> |
||||
|
</div> |
||||
|
<div style="height: 300px" v-loading="loading"> |
||||
|
<div id="agrypnia" style="width: 100%"></div> |
||||
|
</div> |
||||
|
</el-card> |
||||
|
</div> |
||||
|
<div style="flex: 1"> |
||||
|
<el-card shadow="always"> |
||||
|
<div class="dis title-box"> |
||||
|
<span class="header-title">焦虑（HAMD-24）</span> |
||||
|
<div class="dis"></div> |
||||
|
</div> |
||||
|
<div style="height: 300px" v-loading="loading"> |
||||
|
<div id="anxiety" style="width: 100%"></div> |
||||
|
</div> |
||||
|
</el-card> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import * as echarts from "echarts"; |
||||
|
require("echarts/theme/macarons"); // echarts theme |
||||
|
import resize from "@/views/dashboard/mixins/resize"; |
||||
|
import { |
||||
|
zlInfo |
||||
|
} from "@/api/indexCom.js"; |
||||
|
import { |
||||
|
diagnoseEcharts, |
||||
|
systemEcharts, |
||||
|
physiqueEcharts, |
||||
|
postureEcharts, |
||||
|
agrypniaEcharts, |
||||
|
anxietyEcharts, |
||||
|
} from "./index"; |
||||
|
export default { |
||||
|
name: "Post", |
||||
|
props: ["title"], |
||||
|
mixins: [resize], |
||||
|
data() { |
||||
|
return { |
||||
|
queryParams: { |
||||
|
param: { |
||||
|
startTime: "", |
||||
|
endTime: "", |
||||
|
}, |
||||
|
}, |
||||
|
|
||||
|
loading: false, |
||||
|
diagnoseValue: null, // 病种 |
||||
|
systemValue: null, // 体系 |
||||
|
physiqueValue: null, // 体质 |
||||
|
postureValue: null, // 体态 |
||||
|
agrypniaValue: null, // 失眠 |
||||
|
anxietyValue: null, // 焦虑 |
||||
|
// 体系中文 |
||||
|
systemObj: { |
||||
|
yxfpz: "隐形肥胖型", //隐形肥胖型 |
||||
|
zfgdx: "脂肪过多型", //脂肪过多型 |
||||
|
fpx: "肥胖型", //肥胖型 |
||||
|
jrbzx: "肌肉不足型", //肌肉不足型 |
||||
|
jkjcx: "健康匀称型", //健康匀称型 |
||||
|
czjrx: "超重肌肉型", //超重肌肉型 |
||||
|
xsx: "消瘦型", //消瘦型 |
||||
|
dzfx: "低脂肪型", //低脂肪型 |
||||
|
ydyx: "运动员型", //运动员型 |
||||
|
}, |
||||
|
// 体质 |
||||
|
physiqueObj: { |
||||
|
phz: "平和质", //平和质 |
||||
|
qxz: "气虚质", //气虚质 |
||||
|
yangxz: "阳虚质", //阳虚质 |
||||
|
yinxz: "阴虚质", //阴虚质 |
||||
|
tsz: "痰湿质", //痰湿质 |
||||
|
srz: "湿热质", //湿热质 |
||||
|
xyz: "血瘀质", //血瘀质 |
||||
|
qyz: "气郁质", //气郁质 |
||||
|
tlz: "特禀质", //特禀质 |
||||
|
}, |
||||
|
}; |
||||
|
}, |
||||
|
created() { |
||||
|
// this.Linepatient(); |
||||
|
this.getData(); |
||||
|
}, |
||||
|
methods: { |
||||
|
statistics(_data, _type) { |
||||
|
this.initial(_data, _type); // 处理数据 |
||||
|
this.loading = true; |
||||
|
this.getData(); // 获取数据 |
||||
|
}, |
||||
|
//患者信息 |
||||
|
async getData() { |
||||
|
try { |
||||
|
await zlInfo(this.queryParams).then((res) => { |
||||
|
const { |
||||
|
jlfb, |
||||
|
smfb, |
||||
|
sort, |
||||
|
ttfb, |
||||
|
txfb, |
||||
|
zytz |
||||
|
} = res.data; |
||||
|
// 病种（主要诊断） |
||||
|
this.diagnoseValue = sort.sort((a, b) => a.total - b.total); |
||||
|
this.handleDiagnose(); |
||||
|
// 体系 |
||||
|
this.systemValue = []; |
||||
|
delete txfb.total; |
||||
|
for (let key in txfb) { |
||||
|
let data = { |
||||
|
name: this.systemObj[key], |
||||
|
value: txfb[key], |
||||
|
}; |
||||
|
this.systemValue.push(data); |
||||
|
} |
||||
|
this.handleSystem(); |
||||
|
// 体质 |
||||
|
this.physiqueValue = []; |
||||
|
delete zytz.total; |
||||
|
for (let key in zytz) { |
||||
|
let data = { |
||||
|
name: this.physiqueObj[key], |
||||
|
value: zytz[key], |
||||
|
}; |
||||
|
this.physiqueValue.push(data); |
||||
|
} |
||||
|
this.handlePhysique(); |
||||
|
// 体态 |
||||
|
this.postureValue = [{ |
||||
|
value: ttfb.score1, |
||||
|
name: "1分", |
||||
|
}, |
||||
|
{ |
||||
|
value: ttfb.score2, |
||||
|
name: "2分", |
||||
|
}, |
||||
|
{ |
||||
|
value: ttfb.score3, |
||||
|
name: "3分", |
||||
|
}, |
||||
|
{ |
||||
|
value: ttfb.score4, |
||||
|
name: "4分", |
||||
|
}, |
||||
|
{ |
||||
|
value: ttfb.score5, |
||||
|
name: "5分", |
||||
|
}, |
||||
|
]; |
||||
|
this.handlePosture(); |
||||
|
// 失眠评估（PHQ-9） |
||||
|
this.agrypniaValue = []; |
||||
|
for (let key in smfb) { |
||||
|
this.agrypniaValue.push(smfb[key]); |
||||
|
} |
||||
|
this.handleAgrypnia(); |
||||
|
// 焦虑度 |
||||
|
this.anxietyValue = []; |
||||
|
for (let key in jlfb) { |
||||
|
this.anxietyValue.push(jlfb[key]); |
||||
|
} |
||||
|
this.handleAnxiety(); |
||||
|
}); |
||||
|
this.loading = false; |
||||
|
} catch (e) {} |
||||
|
}, |
||||
|
// 病种（主要诊断） |
||||
|
handleDiagnose() { |
||||
|
diagnoseEcharts.series[0].data = this.diagnoseValue?.map((item) => { |
||||
|
return item.total; |
||||
|
}); |
||||
|
diagnoseEcharts.yAxis.data = this.diagnoseValue?.map((item) => { |
||||
|
return item.type; |
||||
|
}); |
||||
|
this.$nextTick(() => { |
||||
|
var myChart = echarts.init(document.getElementById("diagnose"), null, { |
||||
|
height: 300, |
||||
|
}); |
||||
|
myChart.setOption(diagnoseEcharts, true); |
||||
|
myChart.resize(); |
||||
|
window.onresize = myChart.resize; |
||||
|
}); |
||||
|
}, |
||||
|
// 体系 |
||||
|
handleSystem() { |
||||
|
systemEcharts.series[0].data = this.systemValue?.map((item) => { |
||||
|
return item.value; |
||||
|
}); |
||||
|
systemEcharts.xAxis.data = this.systemValue?.map((item) => { |
||||
|
return item.name; |
||||
|
}); |
||||
|
this.$nextTick(() => { |
||||
|
var myChart = echarts.init(document.getElementById("system"), null, { |
||||
|
height: 300, |
||||
|
}); |
||||
|
myChart.setOption(systemEcharts, true); |
||||
|
myChart.resize(); |
||||
|
window.onresize = myChart.resize; |
||||
|
}); |
||||
|
}, |
||||
|
// 体质 |
||||
|
handlePhysique() { |
||||
|
physiqueEcharts.series[0].data = this.physiqueValue?.map((item) => { |
||||
|
return item.value; |
||||
|
}); |
||||
|
physiqueEcharts.xAxis.data = this.physiqueValue?.map((item) => { |
||||
|
return item.name; |
||||
|
}); |
||||
|
this.$nextTick(() => { |
||||
|
var myChart = echarts.init(document.getElementById("physique"), null, { |
||||
|
height: 300, |
||||
|
}); |
||||
|
myChart.setOption(physiqueEcharts, true); |
||||
|
myChart.resize(); |
||||
|
window.onresize = myChart.resize; |
||||
|
}); |
||||
|
}, |
||||
|
// 体态评估 |
||||
|
handlePosture() { |
||||
|
postureEcharts.series[0].data = this.postureValue; |
||||
|
this.$nextTick(() => { |
||||
|
var myChart = echarts.init(document.getElementById("posture"), null, { |
||||
|
height: 300, |
||||
|
}); |
||||
|
myChart.setOption(postureEcharts, true); |
||||
|
myChart.resize(); |
||||
|
window.onresize = myChart.resize; |
||||
|
}); |
||||
|
}, |
||||
|
// 数据处理 查询类型判断参数 |
||||
|
initial(_data, _type) { |
||||
|
_data[0] = this.$moment(_data[0]).format("YYYY-MM-DD"); |
||||
|
_data[1] = this.$moment(_data[1]).format("YYYY-MM-DD"); |
||||
|
this.queryParams.param = { |
||||
|
startTime: _data[0] + " " + "00:00:00", |
||||
|
endTime: _data[1] + " " + "23:59:59", |
||||
|
}; |
||||
|
}, |
||||
|
// 失眠评估 |
||||
|
handleAgrypnia() { |
||||
|
agrypniaEcharts.series[0].data = this.agrypniaValue; |
||||
|
this.$nextTick(() => { |
||||
|
var myChart = echarts.init(document.getElementById("agrypnia"), null, { |
||||
|
height: 300, |
||||
|
}); |
||||
|
myChart.setOption(agrypniaEcharts, true); |
||||
|
myChart.resize(); |
||||
|
window.onresize = myChart.resize; |
||||
|
}); |
||||
|
}, |
||||
|
// 焦虑评估 |
||||
|
handleAnxiety() { |
||||
|
anxietyEcharts.series[0].data = this.anxietyValue; |
||||
|
this.$nextTick(() => { |
||||
|
var myChart = echarts.init(document.getElementById("anxiety"), null, { |
||||
|
height: 300, |
||||
|
}); |
||||
|
myChart.setOption(anxietyEcharts, true); |
||||
|
myChart.resize(); |
||||
|
window.onresize = myChart.resize; |
||||
|
}); |
||||
|
}, |
||||
|
// 重新渲染图标 |
||||
|
getRenew() { |
||||
|
this.handleDiagnose(); |
||||
|
this.handleSystem(); |
||||
|
this.handlePhysique(); |
||||
|
this.handlePosture(); |
||||
|
this.handleAgrypnia(); |
||||
|
this.handleAnxiety(); |
||||
|
}, |
||||
|
}, |
||||
|
}; |
||||
|
</script> |
||||
|
<style scoped src="@/assets/styles/common.css"></style> |
||||
|
<style scoped> |
||||
|
>>>.el-card__body { |
||||
|
padding: 10px 0 !important; |
||||
|
} |
||||
|
|
||||
|
.dis { |
||||
|
display: flex; |
||||
|
} |
||||
|
|
||||
|
.header-title { |
||||
|
font-size: 18px; |
||||
|
} |
||||
|
|
||||
|
.title-box { |
||||
|
padding: 10px 20px; |
||||
|
border-bottom: 1px solid #dfe6ec; |
||||
|
} |
||||
|
|
||||
|
.dian-box { |
||||
|
align-items: center; |
||||
|
} |
||||
|
|
||||
|
.dian { |
||||
|
display: inline-block; |
||||
|
width: 16px; |
||||
|
height: 16px; |
||||
|
border-radius: 50%; |
||||
|
margin: 0 10px; |
||||
|
} |
||||
|
|
||||
|
.title-box { |
||||
|
justify-content: space-between; |
||||
|
} |
||||
|
|
||||
|
.>>>.el-radio--small.is-bordered { |
||||
|
margin-right: 20px !important; |
||||
|
margin-left: 0 !important; |
||||
|
} |
||||
|
|
||||
|
>>>.el-radio__input { |
||||
|
display: none; |
||||
|
} |
||||
|
|
||||
|
>>>.el-radio__label { |
||||
|
padding-left: 5px; |
||||
|
} |
||||
|
|
||||
|
.app-container { |
||||
|
padding: 0; |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
} |
||||
|
|
||||
|
.title { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
font-size: 20px; |
||||
|
font-weight: 600; |
||||
|
} |
||||
|
|
||||
|
.title-bor { |
||||
|
display: inline-block; |
||||
|
height: 20px; |
||||
|
width: 6px; |
||||
|
background: #4f8bff; |
||||
|
margin-right: 10px; |
||||
|
border-radius: 8px; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,383 @@ |
|||||
|
<template> |
||||
|
<div> |
||||
|
<div class="app-container"> |
||||
|
<div class="dis" style="width: 100%"> |
||||
|
<div style="flex: 1; margin-right: 20px"> |
||||
|
<el-card shadow="always"> |
||||
|
<div class="dis title-box"> |
||||
|
<span class="header-title">治疗类型分布</span> |
||||
|
<div class="dis"> |
||||
|
<div class="dian-box dis"> |
||||
|
<div class="dian-box dis"> |
||||
|
<span class="dian" style="background: #91CC75"></span> |
||||
|
中西医结合 |
||||
|
</div> |
||||
|
<span class="dian" style="background: #5470C6"></span> |
||||
|
纯中医 |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div style="height: 300px" v-loading="loading"> |
||||
|
<div id="healType" style="width: 100%"></div> |
||||
|
</div> |
||||
|
</el-card> |
||||
|
</div> |
||||
|
<!-- <div style="flex: 1; margin-right: 20px"> |
||||
|
<el-card shadow="always"> |
||||
|
<div class="dis title-box"> |
||||
|
<span class="header-title">病种方法分布</span> |
||||
|
<div class="dis"></div> |
||||
|
</div> |
||||
|
<div style="height: 300px" v-loading="loading"> |
||||
|
<div id="diseaseMethod" style="width: 100%"></div> |
||||
|
</div> |
||||
|
</el-card> |
||||
|
</div> |
||||
|
<div style="flex: 1;"> |
||||
|
<el-card shadow="always"> |
||||
|
<div class="dis title-box"> |
||||
|
<span class="header-title">病种穴位分布</span> |
||||
|
<div class="dis"> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div style="height: 300px" v-loading="loading"> |
||||
|
<div id="acupoint" style="width: 100%"></div> |
||||
|
</div> |
||||
|
</el-card> |
||||
|
</div> --> |
||||
|
<div style="flex: 1; margin-right: 20px"> |
||||
|
<el-card shadow="always"> |
||||
|
<div class="dis title-box"> |
||||
|
<span class="header-title">治疗效果</span> |
||||
|
<div class="dis"> |
||||
|
<div class="dian-box dis"> |
||||
|
<div class="dian-box dis"> |
||||
|
<span class="dian" style="background: #5C7BD9"></span> |
||||
|
治愈 |
||||
|
</div> |
||||
|
<div class="dian-box dis"> |
||||
|
<span class="dian" style="background: #91CC75"></span> |
||||
|
显效 |
||||
|
</div> |
||||
|
<div class="dian-box dis"> |
||||
|
<span class="dian" style="background: #FAC858"></span> |
||||
|
好转 |
||||
|
</div> |
||||
|
<div class="dian-box dis"> |
||||
|
<span class="dian" style="background: #EE6666"></span> |
||||
|
无效 |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div style="height: 300px" v-loading="loading"> |
||||
|
<div id="effect" style="width: 100%"></div> |
||||
|
</div> |
||||
|
</el-card> |
||||
|
</div> |
||||
|
<div style="flex: 1"> |
||||
|
<el-card shadow="always"> |
||||
|
<div class="dis title-box"> |
||||
|
<span class="header-title">诊疗费用分布</span> |
||||
|
<div class="dis"> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div style="height: 300px" v-loading="loading"> |
||||
|
<div id="cost" style="width: 100%"></div> |
||||
|
</div> |
||||
|
</el-card> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<!-- <div class="app-container"> |
||||
|
<div class="dis" style="width: 100%"> |
||||
|
<div style="flex: 1; margin-right: 20px"> |
||||
|
<el-card shadow="always"> |
||||
|
<div class="dis title-box"> |
||||
|
<span class="header-title">治疗效果</span> |
||||
|
<div class="dis"> |
||||
|
<div class="dian-box dis"> |
||||
|
<div class="dian-box dis"> |
||||
|
<span class="dian" style="background: #5C7BD9"></span> |
||||
|
治愈 |
||||
|
</div> |
||||
|
<div class="dian-box dis"> |
||||
|
<span class="dian" style="background: #91CC75"></span> |
||||
|
显效 |
||||
|
</div> |
||||
|
<div class="dian-box dis"> |
||||
|
<span class="dian" style="background: #FAC858"></span> |
||||
|
好转 |
||||
|
</div> |
||||
|
<div class="dian-box dis"> |
||||
|
<span class="dian" style="background: #EE6666"></span> |
||||
|
无效 |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div style="height: 300px" v-loading="loading"> |
||||
|
<div id="effect" style="width: 100%"></div> |
||||
|
</div> |
||||
|
</el-card> |
||||
|
</div> |
||||
|
<div style="flex: 1"> |
||||
|
<el-card shadow="always"> |
||||
|
<div class="dis title-box"> |
||||
|
<span class="header-title">诊疗费用分布</span> |
||||
|
<div class="dis"> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div style="height: 300px" v-loading="loading"> |
||||
|
<div id="cost" style="width: 100%"></div> |
||||
|
</div> |
||||
|
</el-card> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> --> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import * as echarts from "echarts"; |
||||
|
require("echarts/theme/macarons"); // echarts theme |
||||
|
import resize from "@/views/dashboard/mixins/resize"; |
||||
|
import { |
||||
|
zlType |
||||
|
} from "@/api/indexCom.js"; |
||||
|
import { |
||||
|
healTypeEcharts, |
||||
|
diseaseMethodEcharts, |
||||
|
effectEcharts, |
||||
|
costEcharts |
||||
|
} from "./index"; |
||||
|
export default { |
||||
|
name: "Post", |
||||
|
props: ["title"], |
||||
|
mixins: [resize], |
||||
|
data() { |
||||
|
return { |
||||
|
queryParams: { |
||||
|
param: { |
||||
|
startTime: "", |
||||
|
endTime: "", |
||||
|
}, |
||||
|
}, |
||||
|
loading: false, |
||||
|
healTypeValue: null, // 治疗类型 |
||||
|
diseaseMethod: null, // 病种方法 |
||||
|
effectValue: null, // 治疗效果 |
||||
|
costValue: null, //治疗效果 |
||||
|
effectObj: { |
||||
|
"zy": "治愈", //治愈 |
||||
|
"xx": "显效", //显效 |
||||
|
"hz": "好转", //好转 |
||||
|
"wx": "无效" //无效 |
||||
|
} |
||||
|
}; |
||||
|
}, |
||||
|
created() { |
||||
|
// this.Linepatient(); |
||||
|
this.getData(); |
||||
|
}, |
||||
|
methods: { |
||||
|
statistics(_data, _type) { |
||||
|
this.initial(_data, _type); // 处理数据 |
||||
|
this.loading = true; |
||||
|
this.getData(); // 获取数据 |
||||
|
}, |
||||
|
//患者信息 |
||||
|
async getData() { |
||||
|
try { |
||||
|
await zlType(this.queryParams).then((res) => { |
||||
|
const { |
||||
|
bzfffb, |
||||
|
bzxwfb, |
||||
|
zlfy, |
||||
|
zllxtj, |
||||
|
zlxwfb |
||||
|
} = res.data; |
||||
|
//治疗 |
||||
|
this.healTypeValue = [{ |
||||
|
value: zllxtj.zxyjh, |
||||
|
name: "中西医结合", |
||||
|
}, |
||||
|
{ |
||||
|
value: zllxtj.czy, |
||||
|
name: "纯中医", |
||||
|
}, |
||||
|
] |
||||
|
this.handleHealType(); |
||||
|
// 病种方法 |
||||
|
// let diseaseMethod = [] |
||||
|
// let index = 0 |
||||
|
// for(let i in bzfffb){ |
||||
|
// for(let k in bzfffb[i]){ |
||||
|
// console.log(bzfffb[i][k]) |
||||
|
// } |
||||
|
// index ++ |
||||
|
// } |
||||
|
// this.handleDiseaseMethod() |
||||
|
|
||||
|
// 治疗效果 |
||||
|
this.effectValue = [{ |
||||
|
name: '治愈', |
||||
|
value: zlxwfb.zy |
||||
|
}, |
||||
|
{ |
||||
|
name: '显效', |
||||
|
value: zlxwfb.xx |
||||
|
}, |
||||
|
{ |
||||
|
name: '好转', |
||||
|
value: zlxwfb.hz |
||||
|
}, |
||||
|
{ |
||||
|
name: '无效', |
||||
|
value: zlxwfb.wx |
||||
|
} |
||||
|
] |
||||
|
this.handleEffect() |
||||
|
// 治疗费用 |
||||
|
this.costValue = [zlfy.score1, zlfy.score2, zlfy.score3, zlfy.score4, zlfy.score5] |
||||
|
this.handleCost() |
||||
|
}); |
||||
|
this.loading = false; |
||||
|
} catch (e) {} |
||||
|
}, |
||||
|
// 治疗类型 |
||||
|
handleHealType() { |
||||
|
healTypeEcharts.series[0].data = this.healTypeValue |
||||
|
this.$nextTick(() => { |
||||
|
var myChart = echarts.init(document.getElementById("healType"), null, { |
||||
|
height: 300, |
||||
|
}); |
||||
|
myChart.setOption(healTypeEcharts, true); |
||||
|
myChart.resize(); |
||||
|
window.onresize = myChart.resize; |
||||
|
}); |
||||
|
}, |
||||
|
// 病种方法 |
||||
|
handleDiseaseMethod() { |
||||
|
// diseaseMethodEcharts.series[0].data = this.diseaseMethod |
||||
|
this.$nextTick(() => { |
||||
|
var myChart = echarts.init(document.getElementById("diseaseMethod"), null, { |
||||
|
height: 300, |
||||
|
}); |
||||
|
myChart.setOption(diseaseMethodEcharts, true); |
||||
|
myChart.resize(); |
||||
|
window.onresize = myChart.resize; |
||||
|
}); |
||||
|
}, |
||||
|
// 治疗效果 |
||||
|
handleEffect() { |
||||
|
effectEcharts.series[0].data = this.effectValue |
||||
|
this.$nextTick(() => { |
||||
|
var myChart = echarts.init(document.getElementById("effect"), null, { |
||||
|
height: 300, |
||||
|
}); |
||||
|
myChart.setOption(effectEcharts, true); |
||||
|
myChart.resize(); |
||||
|
window.onresize = myChart.resize; |
||||
|
}); |
||||
|
}, |
||||
|
// 治疗费用 |
||||
|
handleCost() { |
||||
|
costEcharts.series[0].data = this.costValue |
||||
|
this.$nextTick(() => { |
||||
|
var myChart = echarts.init(document.getElementById("cost"), null, { |
||||
|
height: 300, |
||||
|
}); |
||||
|
myChart.setOption(costEcharts, true); |
||||
|
myChart.resize(); |
||||
|
window.onresize = myChart.resize; |
||||
|
}); |
||||
|
}, |
||||
|
// 数据处理 查询类型判断参数 |
||||
|
initial(_data, _type) { |
||||
|
_data[0] = this.$moment(_data[0]).format("YYYY-MM-DD"); |
||||
|
_data[1] = this.$moment(_data[1]).format("YYYY-MM-DD"); |
||||
|
this.queryParams.param = { |
||||
|
startTime: _data[0] + " " + "00:00:00", |
||||
|
endTime: _data[1] + " " + "23:59:59", |
||||
|
}; |
||||
|
}, |
||||
|
// 重新渲染图标 |
||||
|
getRenew() { |
||||
|
this.handleHealType(); |
||||
|
this.handleEffect(); |
||||
|
this.handleCost() |
||||
|
}, |
||||
|
}, |
||||
|
}; |
||||
|
</script> |
||||
|
<style scoped src="@/assets/styles/common.css"></style> |
||||
|
<style scoped> |
||||
|
>>>.el-card__body { |
||||
|
padding: 10px 0 !important; |
||||
|
} |
||||
|
|
||||
|
.dis { |
||||
|
display: flex; |
||||
|
} |
||||
|
|
||||
|
.header-title { |
||||
|
font-size: 18px; |
||||
|
} |
||||
|
|
||||
|
.title-box { |
||||
|
padding: 10px 20px; |
||||
|
border-bottom: 1px solid #dfe6ec; |
||||
|
} |
||||
|
|
||||
|
.dian-box { |
||||
|
align-items: center; |
||||
|
} |
||||
|
|
||||
|
.dian { |
||||
|
display: inline-block; |
||||
|
width: 16px; |
||||
|
height: 16px; |
||||
|
border-radius: 50%; |
||||
|
margin: 0 10px; |
||||
|
} |
||||
|
|
||||
|
.title-box { |
||||
|
justify-content: space-between; |
||||
|
} |
||||
|
|
||||
|
.>>>.el-radio--small.is-bordered { |
||||
|
margin-right: 20px !important; |
||||
|
margin-left: 0 !important; |
||||
|
} |
||||
|
|
||||
|
>>>.el-radio__input { |
||||
|
display: none; |
||||
|
} |
||||
|
|
||||
|
>>>.el-radio__label { |
||||
|
padding-left: 5px; |
||||
|
} |
||||
|
|
||||
|
.app-container { |
||||
|
padding: 0; |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
} |
||||
|
|
||||
|
.title { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
font-size: 20px; |
||||
|
font-weight: 600; |
||||
|
} |
||||
|
|
||||
|
.title-bor { |
||||
|
display: inline-block; |
||||
|
height: 20px; |
||||
|
width: 6px; |
||||
|
background: #4f8bff; |
||||
|
margin-right: 10px; |
||||
|
border-radius: 8px; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,224 @@ |
|||||
|
<template> |
||||
|
<div> |
||||
|
<div class="app-container"> |
||||
|
<div class="dis" style="width: 100%"> |
||||
|
<div style="flex: 1;margin-right: 20px;"> |
||||
|
<el-card shadow="always"> |
||||
|
<div class="dis title-box"> |
||||
|
<span class="header-title">随访队列分布</span> |
||||
|
<div class="dis"></div> |
||||
|
</div> |
||||
|
<!-- 患者总数统计图 --> |
||||
|
<div style="height: 300px" v-loading="loading"> |
||||
|
<div id="follow" style="width: 100%"></div> |
||||
|
</div> |
||||
|
</el-card> |
||||
|
</div> |
||||
|
<div style="flex: 1;"> |
||||
|
<el-card shadow="always"> |
||||
|
<div class="dis title-box"> |
||||
|
<span class="header-title">失访原因分布</span> |
||||
|
<div class="dis"></div> |
||||
|
</div> |
||||
|
<!-- 患者总数统计图 --> |
||||
|
<div style="height: 300px" v-loading="loading"> |
||||
|
<div id="lossFollow" style="width: 100%"></div> |
||||
|
</div> |
||||
|
</el-card> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import * as echarts from "echarts"; |
||||
|
require("echarts/theme/macarons"); // echarts theme |
||||
|
import resize from "@/views/dashboard/mixins/resize"; |
||||
|
import { |
||||
|
sffb, |
||||
|
sftj |
||||
|
} from "@/api/indexCom.js"; |
||||
|
import { |
||||
|
followEcharts, |
||||
|
lossFollowEcharts |
||||
|
} from "./index"; |
||||
|
export default { |
||||
|
name: "Post", |
||||
|
props: ["title"], |
||||
|
mixins: [resize], |
||||
|
data() { |
||||
|
return { |
||||
|
loading: false, |
||||
|
followValue: [], // |
||||
|
lossFollowValue: [], // |
||||
|
queryParams: { |
||||
|
param: { |
||||
|
startTime: "", |
||||
|
endTime: "", |
||||
|
}, |
||||
|
}, |
||||
|
}; |
||||
|
}, |
||||
|
created() { |
||||
|
// this.Linepatient() |
||||
|
this.getData(); |
||||
|
}, |
||||
|
methods: { |
||||
|
statistics(_data, _type) { |
||||
|
this.initial(_data, _type); // 处理数据 |
||||
|
this.loading = true; |
||||
|
this.getData(); // 获取数据 |
||||
|
}, |
||||
|
//患者信息 |
||||
|
async getData() { |
||||
|
try { |
||||
|
this.followValue = {} |
||||
|
await sffb(this.queryParams).then((res) => { |
||||
|
res.data.forEach(i => { |
||||
|
let data = [i.dsf, i.ljsf, i.cqsf, i.zc] |
||||
|
this.followValue[i.queueName] = data |
||||
|
}) |
||||
|
this.handleFollow() |
||||
|
}); |
||||
|
await sftj(this.queryParams).then((res) => { |
||||
|
this.lossFollowValue = res.data |
||||
|
this.handleLossFollow() |
||||
|
}); |
||||
|
this.loading = false; |
||||
|
} catch (e) { |
||||
|
|
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
// 队列 |
||||
|
handleFollow() { |
||||
|
followEcharts.series = [] |
||||
|
for (let key in this.followValue) { |
||||
|
let series = { |
||||
|
name: key, |
||||
|
data: this.followValue[key], |
||||
|
type: "bar", |
||||
|
barMaxWidth: 24, //柱图宽度 |
||||
|
itemStyle: { |
||||
|
normal: { |
||||
|
//这里设置柱形图圆角 [左上角，右上角，右下角，左下角] |
||||
|
barBorderRadius: [50, 50, 0, 0], |
||||
|
}, |
||||
|
}, |
||||
|
} |
||||
|
followEcharts.series.push(series) |
||||
|
} |
||||
|
this.$nextTick(() => { |
||||
|
var myChart = echarts.init(document.getElementById("follow"), null, { |
||||
|
height: 300, |
||||
|
}); |
||||
|
myChart.setOption(followEcharts, true); |
||||
|
myChart.resize(); |
||||
|
window.onresize = myChart.resize; |
||||
|
}); |
||||
|
}, |
||||
|
// 失访 |
||||
|
handleLossFollow() { |
||||
|
lossFollowEcharts.series[0].data = this.lossFollowValue?.map((item) => { |
||||
|
return item.num; |
||||
|
}); |
||||
|
lossFollowEcharts.xAxis.data = this.lossFollowValue?.map((item) => { |
||||
|
return item.reason; |
||||
|
}); |
||||
|
this.$nextTick(() => { |
||||
|
var myChart = echarts.init(document.getElementById("lossFollow"), null, { |
||||
|
height: 300, |
||||
|
}); |
||||
|
myChart.setOption(lossFollowEcharts, true); |
||||
|
myChart.resize(); |
||||
|
window.onresize = myChart.resize; |
||||
|
}); |
||||
|
}, |
||||
|
// 数据处理 查询类型判断参数 |
||||
|
initial(_data, _type) { |
||||
|
_data[0] = this.$moment(_data[0]).format("YYYY-MM-DD"); |
||||
|
_data[1] = this.$moment(_data[1]).format("YYYY-MM-DD"); |
||||
|
this.queryParams.param = { |
||||
|
startTime: _data[0] + " " + "00:00:00", |
||||
|
endTime: _data[1] + " " + "23:59:59", |
||||
|
}; |
||||
|
}, |
||||
|
// 重新渲染图标 |
||||
|
getRenew() { |
||||
|
this.handleFollow(); |
||||
|
this.handleLossFollow() |
||||
|
}, |
||||
|
}, |
||||
|
}; |
||||
|
</script> |
||||
|
<style scoped src="@/assets/styles/common.css"></style> |
||||
|
<style scoped> |
||||
|
>>>.el-card__body { |
||||
|
padding: 10px 0 !important; |
||||
|
} |
||||
|
|
||||
|
.dis { |
||||
|
display: flex; |
||||
|
} |
||||
|
|
||||
|
.header-title { |
||||
|
font-size: 18px; |
||||
|
} |
||||
|
|
||||
|
.title-box { |
||||
|
padding: 10px 20px; |
||||
|
border-bottom: 1px solid #dfe6ec; |
||||
|
} |
||||
|
|
||||
|
.dian-box { |
||||
|
align-items: center; |
||||
|
} |
||||
|
|
||||
|
.dian { |
||||
|
display: inline-block; |
||||
|
width: 16px; |
||||
|
height: 16px; |
||||
|
border-radius: 50%; |
||||
|
margin: 0 10px; |
||||
|
} |
||||
|
|
||||
|
.title-box { |
||||
|
justify-content: space-between; |
||||
|
} |
||||
|
|
||||
|
.>>>.el-radio--small.is-bordered { |
||||
|
margin-right: 20px !important; |
||||
|
margin-left: 0 !important; |
||||
|
} |
||||
|
|
||||
|
>>>.el-radio__input { |
||||
|
display: none; |
||||
|
} |
||||
|
|
||||
|
>>>.el-radio__label { |
||||
|
padding-left: 5px; |
||||
|
} |
||||
|
|
||||
|
.app-container { |
||||
|
padding: 0; |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
} |
||||
|
|
||||
|
.title { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
font-size: 20px; |
||||
|
font-weight: 600; |
||||
|
} |
||||
|
|
||||
|
.title-bor { |
||||
|
display: inline-block; |
||||
|
height: 20px; |
||||
|
width: 6px; |
||||
|
background: #4f8bff; |
||||
|
margin-right: 10px; |
||||
|
border-radius: 8px; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,939 @@ |
|||||
|
import * as echarts from "echarts"; |
||||
|
// -------- 患者信息统计 --------
|
||||
|
// 患者总数
|
||||
|
export const HZXX = { |
||||
|
tooltip: { |
||||
|
trigger: "item", |
||||
|
}, |
||||
|
title: { |
||||
|
text: "100", |
||||
|
left: "center", |
||||
|
top: "40%", |
||||
|
textStyle: { |
||||
|
textAlign: "center", |
||||
|
color: "#393D4E", |
||||
|
fontSize: 40, |
||||
|
fontWeight: 600, |
||||
|
}, |
||||
|
}, |
||||
|
grid: { |
||||
|
top: "0%", |
||||
|
left: "0", |
||||
|
right: "0%", |
||||
|
bottom: "0%", |
||||
|
containLabel: true, |
||||
|
}, |
||||
|
color: ["#4f8bff", "#ffcd6c", "#00d1a1", "#a794fe"], |
||||
|
graphic: { |
||||
|
type: "text", |
||||
|
left: "center", |
||||
|
top: "56%", |
||||
|
style: { |
||||
|
text: "患者总数", |
||||
|
color: "#70798C", |
||||
|
textAlign: "center", |
||||
|
fill: "#999999", |
||||
|
fontSize: 18, |
||||
|
width: "50px", |
||||
|
}, |
||||
|
}, |
||||
|
series: [ |
||||
|
{ |
||||
|
type: "pie", |
||||
|
radius: ["60%", "80%"], |
||||
|
avoidLabelOverlap: false, |
||||
|
label: { |
||||
|
show: false, |
||||
|
position: "center", |
||||
|
}, |
||||
|
labelLine: { |
||||
|
show: false, |
||||
|
}, |
||||
|
data: [], |
||||
|
}, |
||||
|
], |
||||
|
}; |
||||
|
// 患者性别
|
||||
|
export const gende = { |
||||
|
tooltip: { |
||||
|
trigger: "item", |
||||
|
}, |
||||
|
title: { |
||||
|
text: "", |
||||
|
left: "center", |
||||
|
top: "40%", |
||||
|
textStyle: { |
||||
|
textAlign: "center", |
||||
|
color: "#393D4E", |
||||
|
fontSize: 40, |
||||
|
fontWeight: 600, |
||||
|
}, |
||||
|
}, |
||||
|
grid: { |
||||
|
top: "0%", |
||||
|
left: "0", |
||||
|
right: "0%", |
||||
|
bottom: "0%", |
||||
|
containLabel: true, |
||||
|
}, |
||||
|
color: ["#4F8BFF", "#FE4943"], |
||||
|
series: [ |
||||
|
{ |
||||
|
type: "pie", |
||||
|
radius: "80%", |
||||
|
avoidLabelOverlap: false, |
||||
|
label: { |
||||
|
show: false, |
||||
|
position: "center", |
||||
|
normal:{ |
||||
|
show:true, |
||||
|
position:'inner', |
||||
|
formatter: '{b}：{c}个', |
||||
|
textStyle:{ |
||||
|
color:'#fff' |
||||
|
} |
||||
|
}, |
||||
|
}, |
||||
|
labelLine: { |
||||
|
show: false, |
||||
|
}, |
||||
|
data: [], |
||||
|
}, |
||||
|
], |
||||
|
}; |
||||
|
// 年龄分布
|
||||
|
export const ageEcharts = { |
||||
|
tooltip: { |
||||
|
trigger: "axis", |
||||
|
axisPointer: { |
||||
|
type: "cross", |
||||
|
label: { |
||||
|
backgroundColor: "#6a7985", |
||||
|
}, |
||||
|
}, |
||||
|
formatter: function (params) { |
||||
|
let res1 = params[0].name; |
||||
|
for (var i = 0, l = params.length; i < l; i++) { |
||||
|
res1 += |
||||
|
"<br/>" + |
||||
|
`<span style="background:${params[i].color};width:12px;display:inline-block;height:12px;border-radius:50%;margin-right:5px;"></span>` + |
||||
|
params[i].seriesName + |
||||
|
" : " + |
||||
|
params[i].value + |
||||
|
"个"; |
||||
|
} |
||||
|
return res1; |
||||
|
}, |
||||
|
}, |
||||
|
xAxis: { |
||||
|
type: "category", |
||||
|
data: ["<40岁","41-50岁","51-60岁","61-70岁","71-80岁",">80岁",], |
||||
|
}, |
||||
|
grid: { |
||||
|
top: "12%", |
||||
|
left: "5%", |
||||
|
right: "2%", |
||||
|
bottom: "0%", |
||||
|
containLabel: true, |
||||
|
}, |
||||
|
yAxis: { |
||||
|
name: "数量( 个 )", |
||||
|
type: "value", |
||||
|
minInterval: 1, |
||||
|
splitLine: { |
||||
|
show: true, |
||||
|
lineStyle: { |
||||
|
type: "dashed", |
||||
|
}, |
||||
|
}, |
||||
|
}, |
||||
|
series: [ |
||||
|
{ |
||||
|
name: "数量：", |
||||
|
data: [], |
||||
|
type: "bar", |
||||
|
barMaxWidth: 24, //柱图宽度
|
||||
|
|
||||
|
itemStyle: { |
||||
|
normal: { |
||||
|
//这里设置柱形图圆角 [左上角，右上角，右下角，左下角]
|
||||
|
barBorderRadius: [50, 50, 0, 0], |
||||
|
color: function (params) |
||||
|
{ |
||||
|
var colorList = ['#FF9966', '#66B3FF', '#99FF99','#FFCC66','#FF6699','#CCCCCC']; |
||||
|
return colorList[params.dataIndex] |
||||
|
}, |
||||
|
}, |
||||
|
}, |
||||
|
}, |
||||
|
|
||||
|
], |
||||
|
}; |
||||
|
// 病种分布
|
||||
|
export const diseaseEcharts = { |
||||
|
tooltip: { |
||||
|
trigger: "axis", |
||||
|
axisPointer: { |
||||
|
type: "cross", |
||||
|
label: { |
||||
|
backgroundColor: "#6a7985", |
||||
|
}, |
||||
|
}, |
||||
|
formatter: function (params) { |
||||
|
let res1 = params[0].name; |
||||
|
for (var i = 0, l = params.length; i < l; i++) { |
||||
|
res1 += |
||||
|
"<br/>" + |
||||
|
`<span style="background:${params[i].color};width:12px;display:inline-block;height:12px;border-radius:50%;margin-right:5px;"></span>` + |
||||
|
params[i].seriesName + |
||||
|
" : " + |
||||
|
params[i].value + |
||||
|
"个"; |
||||
|
} |
||||
|
return res1; |
||||
|
}, |
||||
|
}, |
||||
|
xAxis: { |
||||
|
type: "category", |
||||
|
data: ["<40岁","41-50岁","51-60岁","61-70岁","71-80岁",">80岁",], |
||||
|
}, |
||||
|
grid: { |
||||
|
top: "12%", |
||||
|
left: "5%", |
||||
|
right: "2%", |
||||
|
bottom: "0%", |
||||
|
containLabel: true, |
||||
|
}, |
||||
|
yAxis: { |
||||
|
name: "数量( 个 )", |
||||
|
type: "value", |
||||
|
minInterval: 1, |
||||
|
splitLine: { |
||||
|
show: true, |
||||
|
lineStyle: { |
||||
|
type: "dashed", |
||||
|
}, |
||||
|
}, |
||||
|
}, |
||||
|
series: [ |
||||
|
{ |
||||
|
name: "数量：", |
||||
|
data: [], |
||||
|
type: "bar", |
||||
|
barMaxWidth: 24, //柱图宽度
|
||||
|
color: "#4f8bff", |
||||
|
itemStyle: { |
||||
|
normal: { |
||||
|
//这里设置柱形图圆角 [左上角，右上角，右下角，左下角]
|
||||
|
barBorderRadius: [50, 50, 0, 0], |
||||
|
}, |
||||
|
}, |
||||
|
}, |
||||
|
|
||||
|
], |
||||
|
}; |
||||
|
|
||||
|
// -------- 诊疗信息统计 --------
|
||||
|
// 病种
|
||||
|
export const diagnoseEcharts = { |
||||
|
tooltip: { |
||||
|
trigger: "axis", |
||||
|
axisPointer: { |
||||
|
type: "cross", |
||||
|
label: { |
||||
|
backgroundColor: "#6a7985", |
||||
|
}, |
||||
|
}, |
||||
|
formatter: function (params) { |
||||
|
let res1 = params[0].name; |
||||
|
for (var i = 0, l = params.length; i < l; i++) { |
||||
|
res1 += |
||||
|
"<br/>" + |
||||
|
`<span style="background:${params[i].color};width:12px;display:inline-block;height:12px;border-radius:50%;margin-right:5px;"></span>` + |
||||
|
params[i].seriesName + |
||||
|
" : " + |
||||
|
params[i].value + |
||||
|
"个"; |
||||
|
} |
||||
|
return res1; |
||||
|
}, |
||||
|
}, |
||||
|
xAxis: { |
||||
|
name: "数量( 个 )", |
||||
|
type: "value", |
||||
|
minInterval: 1, |
||||
|
splitLine: { |
||||
|
show: true, |
||||
|
lineStyle: { |
||||
|
type: "dashed", |
||||
|
}, |
||||
|
}, |
||||
|
|
||||
|
}, |
||||
|
grid: { |
||||
|
top: "12%", |
||||
|
left: "1%", |
||||
|
right: "14%", |
||||
|
bottom: "0%", |
||||
|
containLabel: true, |
||||
|
}, |
||||
|
yAxis: { |
||||
|
type: "category", |
||||
|
data: [], |
||||
|
}, |
||||
|
series: [ |
||||
|
{ |
||||
|
name: "数量：", |
||||
|
data: [], |
||||
|
type: "bar", |
||||
|
barMaxWidth: 24, //柱图宽度
|
||||
|
color: "#4f8bff", |
||||
|
}, |
||||
|
|
||||
|
], |
||||
|
}; |
||||
|
// 体系
|
||||
|
export const systemEcharts = { |
||||
|
tooltip: { |
||||
|
trigger: "axis", |
||||
|
axisPointer: { |
||||
|
type: "cross", |
||||
|
label: { |
||||
|
backgroundColor: "#6a7985", |
||||
|
}, |
||||
|
}, |
||||
|
formatter: function (params) { |
||||
|
let res1 = params[0].name; |
||||
|
for (var i = 0, l = params.length; i < l; i++) { |
||||
|
res1 += |
||||
|
"<br/>" + |
||||
|
`<span style="background:${params[i].color};width:12px;display:inline-block;height:12px;border-radius:50%;margin-right:5px;"></span>` + |
||||
|
params[i].seriesName + |
||||
|
" : " + |
||||
|
params[i].value + |
||||
|
"个"; |
||||
|
} |
||||
|
return res1; |
||||
|
}, |
||||
|
}, |
||||
|
xAxis: { |
||||
|
type: "category", |
||||
|
data: [], |
||||
|
}, |
||||
|
grid: { |
||||
|
top: "12%", |
||||
|
left: "5%", |
||||
|
right: "2%", |
||||
|
bottom: "0%", |
||||
|
containLabel: true, |
||||
|
}, |
||||
|
yAxis: { |
||||
|
name: "数量( 个 )", |
||||
|
type: "value", |
||||
|
minInterval: 1, |
||||
|
splitLine: { |
||||
|
show: true, |
||||
|
lineStyle: { |
||||
|
type: "dashed", |
||||
|
}, |
||||
|
}, |
||||
|
}, |
||||
|
series: [ |
||||
|
{ |
||||
|
name: "数量：", |
||||
|
data: [], |
||||
|
type: "bar", |
||||
|
barMaxWidth: 24, //柱图宽度
|
||||
|
color: "#4f8bff", |
||||
|
itemStyle: { |
||||
|
normal: { |
||||
|
//这里设置柱形图圆角 [左上角，右上角，右下角，左下角]
|
||||
|
barBorderRadius: [50, 50, 0, 0], |
||||
|
}, |
||||
|
}, |
||||
|
}, |
||||
|
|
||||
|
], |
||||
|
}; |
||||
|
// 体质
|
||||
|
export const physiqueEcharts = { |
||||
|
tooltip: { |
||||
|
trigger: "axis", |
||||
|
axisPointer: { |
||||
|
type: "cross", |
||||
|
label: { |
||||
|
backgroundColor: "#6a7985", |
||||
|
}, |
||||
|
}, |
||||
|
formatter: function (params) { |
||||
|
let res1 = params[0].name; |
||||
|
for (var i = 0, l = params.length; i < l; i++) { |
||||
|
res1 += |
||||
|
"<br/>" + |
||||
|
`<span style="background:${params[i].color};width:12px;display:inline-block;height:12px;border-radius:50%;margin-right:5px;"></span>` + |
||||
|
params[i].seriesName + |
||||
|
" : " + |
||||
|
params[i].value + |
||||
|
"个"; |
||||
|
} |
||||
|
return res1; |
||||
|
}, |
||||
|
}, |
||||
|
xAxis: { |
||||
|
type: "category", |
||||
|
data: [], |
||||
|
}, |
||||
|
grid: { |
||||
|
top: "12%", |
||||
|
left: "5%", |
||||
|
right: "2%", |
||||
|
bottom: "0%", |
||||
|
containLabel: true, |
||||
|
}, |
||||
|
yAxis: { |
||||
|
name: "数量( 个 )", |
||||
|
type: "value", |
||||
|
minInterval: 1, |
||||
|
splitLine: { |
||||
|
show: true, |
||||
|
lineStyle: { |
||||
|
type: "dashed", |
||||
|
}, |
||||
|
}, |
||||
|
}, |
||||
|
series: [ |
||||
|
{ |
||||
|
name: "数量：", |
||||
|
data: [], |
||||
|
type: "bar", |
||||
|
barMaxWidth: 24, //柱图宽度
|
||||
|
color: "#4f8bff", |
||||
|
itemStyle: { |
||||
|
normal: { |
||||
|
//这里设置柱形图圆角 [左上角，右上角，右下角，左下角]
|
||||
|
barBorderRadius: [50, 50, 0, 0], |
||||
|
}, |
||||
|
}, |
||||
|
}, |
||||
|
|
||||
|
], |
||||
|
}; |
||||
|
// 体态
|
||||
|
export const postureEcharts = { |
||||
|
tooltip: { |
||||
|
trigger: "item", |
||||
|
}, |
||||
|
title: { |
||||
|
text: "", |
||||
|
left: "center", |
||||
|
top: "40%", |
||||
|
textStyle: { |
||||
|
textAlign: "center", |
||||
|
color: "#393D4E", |
||||
|
fontSize: 40, |
||||
|
fontWeight: 600, |
||||
|
}, |
||||
|
}, |
||||
|
grid: { |
||||
|
top: "0%", |
||||
|
left: "0", |
||||
|
right: "0%", |
||||
|
bottom: "0%", |
||||
|
containLabel: true, |
||||
|
}, |
||||
|
color: ["#4f8bff", "#ffcd6c", "#00d1a1", "#a794fe","#EE6666"], |
||||
|
series: [ |
||||
|
{ |
||||
|
type: "pie", |
||||
|
radius: "80%", |
||||
|
avoidLabelOverlap: false, |
||||
|
label: { |
||||
|
show: false, |
||||
|
position: "center", |
||||
|
normal:{ |
||||
|
show:true, |
||||
|
position:'inner', |
||||
|
formatter: '{b}：{c}个', |
||||
|
textStyle:{ |
||||
|
color:'#fff' |
||||
|
} |
||||
|
}, |
||||
|
}, |
||||
|
labelLine: { |
||||
|
show: false, |
||||
|
}, |
||||
|
data: [], |
||||
|
}, |
||||
|
], |
||||
|
}; |
||||
|
// 失眠
|
||||
|
export const agrypniaEcharts = { |
||||
|
tooltip: { |
||||
|
trigger: "axis", |
||||
|
axisPointer: { |
||||
|
type: "cross", |
||||
|
label: { |
||||
|
backgroundColor: "#6a7985", |
||||
|
}, |
||||
|
}, |
||||
|
formatter: function (params) { |
||||
|
let res1 = params[0].name; |
||||
|
for (var i = 0, l = params.length; i < l; i++) { |
||||
|
res1 += |
||||
|
"<br/>" + |
||||
|
`<span style="background:${params[i].color};width:12px;display:inline-block;height:12px;border-radius:50%;margin-right:5px;"></span>` + |
||||
|
params[i].seriesName + |
||||
|
" : " + |
||||
|
params[i].value + |
||||
|
"个"; |
||||
|
} |
||||
|
return res1; |
||||
|
}, |
||||
|
}, |
||||
|
xAxis: { |
||||
|
type: "category", |
||||
|
data: ['0~4分', '5~9分', '10~14分','15~19分','20~27分'], |
||||
|
|
||||
|
}, |
||||
|
grid: { |
||||
|
top: "12%", |
||||
|
left: "5%", |
||||
|
right: "2%", |
||||
|
bottom: "0%", |
||||
|
containLabel: true, |
||||
|
}, |
||||
|
yAxis: { |
||||
|
name: "数量( 个 )", |
||||
|
type: "value", |
||||
|
minInterval: 1, |
||||
|
splitLine: { |
||||
|
show: true, |
||||
|
lineStyle: { |
||||
|
type: "dashed", |
||||
|
}, |
||||
|
}, |
||||
|
}, |
||||
|
series: [ |
||||
|
{ |
||||
|
name: "数量：", |
||||
|
data: [], |
||||
|
type: "bar", |
||||
|
barMaxWidth: 24, //柱图宽度
|
||||
|
color: "#4f8bff", |
||||
|
itemStyle: { |
||||
|
normal: { |
||||
|
//这里设置柱形图圆角 [左上角，右上角，右下角，左下角]
|
||||
|
barBorderRadius: [50, 50, 0, 0], |
||||
|
}, |
||||
|
}, |
||||
|
}, |
||||
|
|
||||
|
], |
||||
|
}; |
||||
|
// 焦虑度
|
||||
|
export const anxietyEcharts = { |
||||
|
tooltip: { |
||||
|
trigger: "axis", |
||||
|
axisPointer: { |
||||
|
type: "cross", |
||||
|
label: { |
||||
|
backgroundColor: "#6a7985", |
||||
|
}, |
||||
|
}, |
||||
|
formatter: function (params) { |
||||
|
let res1 = params[0].name; |
||||
|
for (var i = 0, l = params.length; i < l; i++) { |
||||
|
res1 += |
||||
|
"<br/>" + |
||||
|
`<span style="background:${params[i].color};width:12px;display:inline-block;height:12px;border-radius:50%;margin-right:5px;"></span>` + |
||||
|
params[i].seriesName + |
||||
|
" : " + |
||||
|
params[i].value + |
||||
|
"个"; |
||||
|
} |
||||
|
return res1; |
||||
|
}, |
||||
|
}, |
||||
|
xAxis: { |
||||
|
type: "category", |
||||
|
data: ['<8分', '8~20分','21~35分','>35分'], |
||||
|
|
||||
|
}, |
||||
|
grid: { |
||||
|
top: "12%", |
||||
|
left: "5%", |
||||
|
right: "2%", |
||||
|
bottom: "0%", |
||||
|
containLabel: true, |
||||
|
}, |
||||
|
yAxis: { |
||||
|
name: "数量( 个 )", |
||||
|
type: "value", |
||||
|
minInterval: 1, |
||||
|
splitLine: { |
||||
|
show: true, |
||||
|
lineStyle: { |
||||
|
type: "dashed", |
||||
|
}, |
||||
|
}, |
||||
|
}, |
||||
|
series: [ |
||||
|
{ |
||||
|
name: "数量：", |
||||
|
data: [], |
||||
|
type: "bar", |
||||
|
barMaxWidth: 24, //柱图宽度
|
||||
|
color: "#4f8bff", |
||||
|
itemStyle: { |
||||
|
normal: { |
||||
|
//这里设置柱形图圆角 [左上角，右上角，右下角，左下角]
|
||||
|
barBorderRadius: [50, 50, 0, 0], |
||||
|
}, |
||||
|
}, |
||||
|
}, |
||||
|
|
||||
|
], |
||||
|
}; |
||||
|
// -------- 治疗类型 --------
|
||||
|
// 治疗类型
|
||||
|
export const healTypeEcharts = { |
||||
|
tooltip: { |
||||
|
trigger: "item", |
||||
|
}, |
||||
|
title: { |
||||
|
text: "", |
||||
|
left: "center", |
||||
|
top: "40%", |
||||
|
textStyle: { |
||||
|
textAlign: "center", |
||||
|
color: "#393D4E", |
||||
|
fontSize: 40, |
||||
|
fontWeight: 600, |
||||
|
}, |
||||
|
}, |
||||
|
grid: { |
||||
|
top: "0%", |
||||
|
left: "0", |
||||
|
right: "0%", |
||||
|
bottom: "0%", |
||||
|
containLabel: true, |
||||
|
}, |
||||
|
color: ["#91CC75", "#5470C6"], |
||||
|
series: [ |
||||
|
{ |
||||
|
type: "pie", |
||||
|
radius: "80%", |
||||
|
avoidLabelOverlap: false, |
||||
|
label: { |
||||
|
show: false, |
||||
|
position: "center", |
||||
|
normal:{ |
||||
|
show:true, |
||||
|
position:'inner', |
||||
|
formatter: '{b}：{c}个', |
||||
|
textStyle:{ |
||||
|
color:'#fff' |
||||
|
} |
||||
|
}, |
||||
|
}, |
||||
|
labelLine: { |
||||
|
show: false, |
||||
|
}, |
||||
|
data: [], |
||||
|
}, |
||||
|
], |
||||
|
}; |
||||
|
// 病种方法
|
||||
|
export const diseaseMethodEcharts = { |
||||
|
tooltip: { |
||||
|
trigger: "axis", |
||||
|
axisPointer: { |
||||
|
type: "cross", |
||||
|
label: { |
||||
|
backgroundColor: "#6a7985", |
||||
|
}, |
||||
|
}, |
||||
|
formatter: function (params) { |
||||
|
let res1 = params[0].name; |
||||
|
for (var i = 0, l = params.length; i < l; i++) { |
||||
|
res1 += |
||||
|
"<br/>" + |
||||
|
`<span style="background:${params[i].color};width:12px;display:inline-block;height:12px;border-radius:50%;margin-right:5px;"></span>` + |
||||
|
params[i].seriesName + |
||||
|
" : " + |
||||
|
params[i].value + |
||||
|
"个"; |
||||
|
} |
||||
|
return res1; |
||||
|
}, |
||||
|
}, |
||||
|
xAxis: { |
||||
|
type: "category", |
||||
|
data: ['肥胖症', '失眠症','其他'], |
||||
|
|
||||
|
}, |
||||
|
grid: { |
||||
|
top: "12%", |
||||
|
left: "5%", |
||||
|
right: "2%", |
||||
|
bottom: "0%", |
||||
|
containLabel: true, |
||||
|
}, |
||||
|
yAxis: { |
||||
|
name: "数量( 个 )", |
||||
|
type: "value", |
||||
|
minInterval: 1, |
||||
|
splitLine: { |
||||
|
show: true, |
||||
|
lineStyle: { |
||||
|
type: "dashed", |
||||
|
}, |
||||
|
}, |
||||
|
}, |
||||
|
series: [ |
||||
|
{ |
||||
|
name: "数量1：", |
||||
|
data: [1,2], |
||||
|
type: "bar", |
||||
|
barMaxWidth: 24, //柱图宽度
|
||||
|
itemStyle: { |
||||
|
normal: { |
||||
|
//这里设置柱形图圆角 [左上角，右上角，右下角，左下角]
|
||||
|
barBorderRadius: [50, 50, 0, 0], |
||||
|
}, |
||||
|
}, |
||||
|
}, |
||||
|
{ |
||||
|
name: "数量2：", |
||||
|
data: [1,3], |
||||
|
type: "bar", |
||||
|
barMaxWidth: 24, //柱图宽度
|
||||
|
itemStyle: { |
||||
|
normal: { |
||||
|
//这里设置柱形图圆角 [左上角，右上角，右下角，左下角]
|
||||
|
barBorderRadius: [50, 50, 0, 0], |
||||
|
}, |
||||
|
}, |
||||
|
}, |
||||
|
], |
||||
|
}; |
||||
|
// 治疗效果
|
||||
|
export const effectEcharts = { |
||||
|
tooltip: { |
||||
|
trigger: "item", |
||||
|
}, |
||||
|
title: { |
||||
|
text: "", |
||||
|
left: "center", |
||||
|
top: "40%", |
||||
|
textStyle: { |
||||
|
textAlign: "center", |
||||
|
color: "#393D4E", |
||||
|
fontSize: 40, |
||||
|
fontWeight: 600, |
||||
|
}, |
||||
|
}, |
||||
|
grid: { |
||||
|
top: "0%", |
||||
|
left: "0", |
||||
|
right: "0%", |
||||
|
bottom: "0%", |
||||
|
containLabel: true, |
||||
|
}, |
||||
|
color: ["#5C7BD9", "#91CC75",'#FAC858','#EE6666'], |
||||
|
series: [ |
||||
|
{ |
||||
|
type: "pie", |
||||
|
radius: "80%", |
||||
|
avoidLabelOverlap: false, |
||||
|
label: { |
||||
|
show: false, |
||||
|
position: "center", |
||||
|
normal:{ |
||||
|
show:true, |
||||
|
position:'inner', |
||||
|
formatter: '{b}：{c}个', |
||||
|
textStyle:{ |
||||
|
color:'#fff' |
||||
|
} |
||||
|
}, |
||||
|
}, |
||||
|
labelLine: { |
||||
|
show: false, |
||||
|
}, |
||||
|
data: [], |
||||
|
}, |
||||
|
], |
||||
|
}; |
||||
|
// 诊疗费
|
||||
|
export const costEcharts = { |
||||
|
tooltip: { |
||||
|
trigger: "axis", |
||||
|
axisPointer: { |
||||
|
type: "cross", |
||||
|
label: { |
||||
|
backgroundColor: "#6a7985", |
||||
|
}, |
||||
|
}, |
||||
|
formatter: function (params) { |
||||
|
let res1 = params[0].name; |
||||
|
for (var i = 0, l = params.length; i < l; i++) { |
||||
|
res1 += |
||||
|
"<br/>" + |
||||
|
`<span style="background:${params[i].color};width:12px;display:inline-block;height:12px;border-radius:50%;margin-right:5px;"></span>` + |
||||
|
params[i].seriesName + |
||||
|
" : " + |
||||
|
params[i].value + |
||||
|
"个"; |
||||
|
} |
||||
|
return res1; |
||||
|
}, |
||||
|
}, |
||||
|
xAxis: { |
||||
|
type: "category", |
||||
|
data: ['<300元','300 ~ 900元','900 ~ 2000元','2000 ~ 5000元','>5000元'], |
||||
|
}, |
||||
|
grid: { |
||||
|
top: "12%", |
||||
|
left: "5%", |
||||
|
right: "2%", |
||||
|
bottom: "0%", |
||||
|
containLabel: true, |
||||
|
}, |
||||
|
yAxis: { |
||||
|
name: "数量( 个 )", |
||||
|
type: "value", |
||||
|
minInterval: 1, |
||||
|
splitLine: { |
||||
|
show: true, |
||||
|
lineStyle: { |
||||
|
type: "dashed", |
||||
|
}, |
||||
|
}, |
||||
|
}, |
||||
|
series: [ |
||||
|
{ |
||||
|
name: "数量：", |
||||
|
data: [], |
||||
|
type: "bar", |
||||
|
barMaxWidth: 24, //柱图宽度
|
||||
|
itemStyle: { |
||||
|
normal: { |
||||
|
//这里设置柱形图圆角 [左上角，右上角，右下角，左下角]
|
||||
|
barBorderRadius: [50, 50, 0, 0], |
||||
|
}, |
||||
|
}, |
||||
|
}, |
||||
|
|
||||
|
], |
||||
|
}; |
||||
|
// -------- 随访 --------
|
||||
|
export const followEcharts = { |
||||
|
tooltip: { |
||||
|
trigger: "axis", |
||||
|
axisPointer: { |
||||
|
type: "cross", |
||||
|
label: { |
||||
|
backgroundColor: "#6a7985", |
||||
|
}, |
||||
|
}, |
||||
|
formatter: function (params) { |
||||
|
let res1 = params[0].name; |
||||
|
for (var i = 0, l = params.length; i < l; i++) { |
||||
|
res1 += |
||||
|
"<br/>" + |
||||
|
`<span style="background:${params[i].color};width:12px;display:inline-block;height:12px;border-radius:50%;margin-right:5px;"></span>` + |
||||
|
params[i].seriesName + |
||||
|
" : " + |
||||
|
params[i].value + |
||||
|
"个"; |
||||
|
} |
||||
|
return res1; |
||||
|
}, |
||||
|
}, |
||||
|
xAxis: { |
||||
|
type: "category", |
||||
|
data: ['待随访','临近随访','超期随访','正常随访'], |
||||
|
}, |
||||
|
grid: { |
||||
|
top: "12%", |
||||
|
left: "5%", |
||||
|
right: "2%", |
||||
|
bottom: "0%", |
||||
|
containLabel: true, |
||||
|
}, |
||||
|
yAxis: { |
||||
|
name: "数量( 个 )", |
||||
|
type: "value", |
||||
|
minInterval: 1, |
||||
|
splitLine: { |
||||
|
show: true, |
||||
|
lineStyle: { |
||||
|
type: "dashed", |
||||
|
}, |
||||
|
}, |
||||
|
}, |
||||
|
series: [ |
||||
|
], |
||||
|
}; |
||||
|
export const lossFollowEcharts = { |
||||
|
tooltip: { |
||||
|
trigger: "axis", |
||||
|
axisPointer: { |
||||
|
type: "cross", |
||||
|
label: { |
||||
|
backgroundColor: "#6a7985", |
||||
|
}, |
||||
|
}, |
||||
|
formatter: function (params) { |
||||
|
let res1 = params[0].name; |
||||
|
for (var i = 0, l = params.length; i < l; i++) { |
||||
|
res1 += |
||||
|
"<br/>" + |
||||
|
`<span style="background:${params[i].color};width:12px;display:inline-block;height:12px;border-radius:50%;margin-right:5px;"></span>` + |
||||
|
params[i].seriesName + |
||||
|
" : " + |
||||
|
params[i].value + |
||||
|
"个"; |
||||
|
} |
||||
|
return res1; |
||||
|
}, |
||||
|
}, |
||||
|
xAxis: { |
||||
|
type: "category", |
||||
|
data: ['<300元','300 ~ 900元','900 ~ 2000元','2000 ~ 5000元','>5000元'], |
||||
|
}, |
||||
|
grid: { |
||||
|
top: "12%", |
||||
|
left: "5%", |
||||
|
right: "2%", |
||||
|
bottom: "0%", |
||||
|
containLabel: true, |
||||
|
}, |
||||
|
yAxis: { |
||||
|
name: "数量( 个 )", |
||||
|
type: "value", |
||||
|
minInterval: 1, |
||||
|
splitLine: { |
||||
|
show: true, |
||||
|
lineStyle: { |
||||
|
type: "dashed", |
||||
|
}, |
||||
|
}, |
||||
|
}, |
||||
|
series: [ |
||||
|
{ |
||||
|
name: "数量：", |
||||
|
data: [], |
||||
|
type: "bar", |
||||
|
barMaxWidth: 24, //柱图宽度
|
||||
|
itemStyle: { |
||||
|
normal: { |
||||
|
//这里设置柱形图圆角 [左上角，右上角，右下角，左下角]
|
||||
|
barBorderRadius: [50, 50, 0, 0], |
||||
|
}, |
||||
|
}, |
||||
|
} |
||||
|
|
||||
|
], |
||||
|
}; |
||||
@ -0,0 +1,325 @@ |
|||||
|
<template> |
||||
|
<div> |
||||
|
<div class="app-container"> |
||||
|
<div class="dis" style="width: 100%"> |
||||
|
<div style="flex: 1; margin-right: 20px"> |
||||
|
<el-card shadow="always"> |
||||
|
<div class="dis title-box"> |
||||
|
<span class="header-title">患者总数</span> |
||||
|
<div class="dis"></div> |
||||
|
</div> |
||||
|
<!-- 患者总数统计图 --> |
||||
|
<div style="height: 300px" v-loading="loading"> |
||||
|
<div id="patienty" style="width: 100%"></div> |
||||
|
</div> |
||||
|
</el-card> |
||||
|
</div> |
||||
|
<div style="flex: 1;margin-right: 20px"> |
||||
|
<el-card shadow="always"> |
||||
|
<div class="dis title-box"> |
||||
|
<span class="header-title">性别数量</span> |
||||
|
<div class="dis"> |
||||
|
<div class="dian-box dis"> |
||||
|
<div class="dian-box dis"> |
||||
|
<span class="dian" style="background: #4f8bff"></span> |
||||
|
男 |
||||
|
</div> |
||||
|
<span class="dian" style="background: #fe4943"></span> |
||||
|
女 |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<!-- 性别统计图 --> |
||||
|
<div style="height: 300px" v-loading="loading"> |
||||
|
<div id="gender" style="width: 100%"></div> |
||||
|
</div> |
||||
|
</el-card> |
||||
|
</div> |
||||
|
<div style="flex: 1; margin-right: 20px"> |
||||
|
<el-card shadow="always"> |
||||
|
<div class="dis title-box"> |
||||
|
<span class="header-title">年龄分布</span> |
||||
|
<div class="dis"></div> |
||||
|
</div> |
||||
|
<!-- 患者总数统计图 --> |
||||
|
<div style="height: 300px" v-loading="loading"> |
||||
|
<div id="age" style="width: 100%"></div> |
||||
|
</div> |
||||
|
</el-card> |
||||
|
</div> |
||||
|
<div style="flex: 1;"> |
||||
|
<el-card shadow="always"> |
||||
|
<div class="dis title-box"> |
||||
|
<span class="header-title">既往病种分布</span> |
||||
|
<div class="dis"> |
||||
|
<!-- <div class="dian-box dis"> |
||||
|
<div class="dian-box dis"> |
||||
|
<span class="dian" style="background: #4f8bff"></span> |
||||
|
男 |
||||
|
</div> |
||||
|
<span class="dian" style="background: #ffcd6c"></span> |
||||
|
女 |
||||
|
</div> --> |
||||
|
</div> |
||||
|
</div> |
||||
|
<!-- 既往病种分布 --> |
||||
|
<div style="height: 300px" v-loading="loading"> |
||||
|
<div id="disease" style="width: 100%"></div> |
||||
|
</div> |
||||
|
</el-card> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import * as echarts from "echarts"; |
||||
|
require("echarts/theme/macarons"); // echarts theme |
||||
|
import resize from "@/views/dashboard/mixins/resize"; |
||||
|
import { |
||||
|
patientTotal, |
||||
|
queryByDatePatient |
||||
|
} from "@/api/indexCom.js"; |
||||
|
import { |
||||
|
HZXX, |
||||
|
HZXXSJFX, |
||||
|
gende, |
||||
|
ageEcharts, |
||||
|
diseaseEcharts |
||||
|
} from "./index"; |
||||
|
export default { |
||||
|
name: "Post", |
||||
|
props: ["title"], |
||||
|
mixins: [resize], |
||||
|
data() { |
||||
|
return { |
||||
|
loading: false, |
||||
|
HZXXvalue: null, // 患者总数统计值 |
||||
|
gendeValue: null, // 性别统计值 |
||||
|
ageValue: null, // 年龄统计值 |
||||
|
diseaseValue: null, // 年龄统计值 |
||||
|
queryParams: { |
||||
|
param: { |
||||
|
startTime: "", |
||||
|
endTime: "", |
||||
|
}, |
||||
|
}, |
||||
|
jwbzObj: { |
||||
|
"gxy": "高血压", //高血压 |
||||
|
"nxgb": "脑血管病", //脑血管病 |
||||
|
"exzl": "恶性肿瘤", //恶性肿瘤 |
||||
|
"gxb": "冠心病", //冠心病 |
||||
|
"jsjb": "精神疾病", //精神疾病 |
||||
|
"whsezcky": "胃和十二指肠溃疡", //胃和十二指肠溃疡 |
||||
|
"fpz": "肥胖症", //肥胖症 |
||||
|
"gzssz": "骨质疏松症", //骨质疏松症 |
||||
|
"ycxXtxjb": "遗传性、先天性疾病", //遗传性、先天性疾病 |
||||
|
"tnb": "糖尿病", //糖尿病 |
||||
|
"mxfxjb": "慢性肺系疾病", //慢性肺系疾病 |
||||
|
"gzxz": "高脂血症", //高脂血症 |
||||
|
"gzjb": "肝脏疾病", //肝脏疾病 |
||||
|
"gmxjb": "过敏性疾病", //过敏性疾病 |
||||
|
"gjy": "关节炎", //关节炎 |
||||
|
"tf": "痛风", //痛风 |
||||
|
"sySb": "肾炎、肾病", //肾炎、肾病 |
||||
|
"other": "其他" //其他 |
||||
|
} |
||||
|
}; |
||||
|
}, |
||||
|
created() { |
||||
|
// this.Linepatient() |
||||
|
this.getData(); |
||||
|
}, |
||||
|
methods: { |
||||
|
statistics(_data, _type) { |
||||
|
this.initial(_data, _type); // 处理数据 |
||||
|
this.loading = true; |
||||
|
this.getData(); // 获取数据 |
||||
|
}, |
||||
|
//患者信息 |
||||
|
async getData() { |
||||
|
try { |
||||
|
await patientTotal(this.queryParams).then((res) => { |
||||
|
// 患者总数统计图 |
||||
|
this.HZXXvalue = [{ |
||||
|
value: res.data.totalPatients, |
||||
|
name: "患者总数" |
||||
|
}, ]; |
||||
|
// 性别分析图 |
||||
|
this.gendeValue = [{ |
||||
|
value: res.data.gender.male, |
||||
|
name: "男" |
||||
|
}, |
||||
|
{ |
||||
|
value: res.data.gender.female, |
||||
|
name: "女" |
||||
|
} |
||||
|
]; |
||||
|
// 年龄分布 |
||||
|
let ageValue = res.data.age |
||||
|
this.ageValue = [ageValue.num1, ageValue.num2, ageValue.num2, ageValue.num4, ageValue |
||||
|
.num5, ageValue.num6 |
||||
|
] |
||||
|
// 病种分布 |
||||
|
let diseaseValue = res.data.jwbz |
||||
|
this.diseaseValue = [] |
||||
|
for (let key in diseaseValue) { |
||||
|
let data = { |
||||
|
name: this.jwbzObj[key], |
||||
|
value: diseaseValue[key] |
||||
|
} |
||||
|
this.diseaseValue.push(data) |
||||
|
} |
||||
|
this.Linepatient(); // 患者总数 |
||||
|
this.handleAge(); // 年龄 |
||||
|
this.columnar(); //性别分析图 |
||||
|
this.handleDisease(); //病种分布 |
||||
|
}); |
||||
|
this.loading = false; |
||||
|
} catch (e) {} |
||||
|
}, |
||||
|
|
||||
|
// 患者信息 |
||||
|
Linepatient() { |
||||
|
HZXX.title.text = this.HZXXvalue[0].value; |
||||
|
HZXX.series[0].data = this.HZXXvalue; |
||||
|
this.$nextTick(() => { |
||||
|
var myChart = echarts.init(document.getElementById("patienty"), null, { |
||||
|
height: 300, |
||||
|
}); |
||||
|
myChart.setOption(HZXX, true); |
||||
|
myChart.resize(); |
||||
|
window.onresize = myChart.resize; |
||||
|
}); |
||||
|
}, |
||||
|
// 性别分析图 |
||||
|
columnar() { |
||||
|
gende.series[0].data = this.gendeValue; |
||||
|
this.$nextTick(() => { |
||||
|
var myChart = echarts.init(document.getElementById("gender"), null, { |
||||
|
height: 300, |
||||
|
}); |
||||
|
myChart.setOption(gende, true); |
||||
|
myChart.resize(); |
||||
|
window.onresize = myChart.resize; |
||||
|
}); |
||||
|
}, |
||||
|
// 年龄分布图 |
||||
|
handleAge() { |
||||
|
ageEcharts.series[0].data = this.ageValue |
||||
|
this.$nextTick(() => { |
||||
|
var myChart = echarts.init(document.getElementById("age"), null, { |
||||
|
height: 300, |
||||
|
}); |
||||
|
myChart.setOption(ageEcharts, true); |
||||
|
myChart.resize(); |
||||
|
window.onresize = myChart.resize; |
||||
|
}); |
||||
|
}, |
||||
|
// 病种分布图 |
||||
|
handleDisease() { |
||||
|
diseaseEcharts.series[0].data = this.diseaseValue?.map((item) => { |
||||
|
return item.value; |
||||
|
}); |
||||
|
diseaseEcharts.xAxis.data = this.diseaseValue?.map((item) => { |
||||
|
return item.name; |
||||
|
}); |
||||
|
this.$nextTick(() => { |
||||
|
var myChart = echarts.init(document.getElementById("disease"), null, { |
||||
|
height: 300, |
||||
|
}); |
||||
|
myChart.setOption(diseaseEcharts, true); |
||||
|
myChart.resize(); |
||||
|
window.onresize = myChart.resize; |
||||
|
}); |
||||
|
}, |
||||
|
// 数据处理 查询类型判断参数 |
||||
|
initial(_data, _type) { |
||||
|
_data[0] = this.$moment(_data[0]).format("YYYY-MM-DD"); |
||||
|
_data[1] = this.$moment(_data[1]).format("YYYY-MM-DD"); |
||||
|
this.queryParams.param = { |
||||
|
startTime: _data[0] + " " + "00:00:00", |
||||
|
endTime: _data[1] + " " + "23:59:59", |
||||
|
}; |
||||
|
}, |
||||
|
// 重新渲染图标 |
||||
|
getRenew() { |
||||
|
this.Linepatient(); // 患者总数 |
||||
|
this.handleAge(); // 年龄 |
||||
|
this.columnar(); //性别分析图 |
||||
|
this.handleDisease(); //病种分布 |
||||
|
}, |
||||
|
}, |
||||
|
}; |
||||
|
</script> |
||||
|
<style scoped src="@/assets/styles/common.css"></style> |
||||
|
<style scoped> |
||||
|
>>>.el-card__body { |
||||
|
padding: 10px 0 !important; |
||||
|
} |
||||
|
|
||||
|
.dis { |
||||
|
display: flex; |
||||
|
} |
||||
|
|
||||
|
.header-title { |
||||
|
font-size: 18px; |
||||
|
} |
||||
|
|
||||
|
.title-box { |
||||
|
padding: 10px 20px; |
||||
|
border-bottom: 1px solid #dfe6ec; |
||||
|
} |
||||
|
|
||||
|
.dian-box { |
||||
|
align-items: center; |
||||
|
} |
||||
|
|
||||
|
.dian { |
||||
|
display: inline-block; |
||||
|
width: 16px; |
||||
|
height: 16px; |
||||
|
border-radius: 50%; |
||||
|
margin: 0 10px; |
||||
|
} |
||||
|
|
||||
|
.title-box { |
||||
|
justify-content: space-between; |
||||
|
} |
||||
|
|
||||
|
.>>>.el-radio--small.is-bordered { |
||||
|
margin-right: 20px !important; |
||||
|
margin-left: 0 !important; |
||||
|
} |
||||
|
|
||||
|
>>>.el-radio__input { |
||||
|
display: none; |
||||
|
} |
||||
|
|
||||
|
>>>.el-radio__label { |
||||
|
padding-left: 5px; |
||||
|
} |
||||
|
|
||||
|
.app-container { |
||||
|
padding: 0; |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
} |
||||
|
|
||||
|
.title { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
font-size: 20px; |
||||
|
font-weight: 600; |
||||
|
} |
||||
|
|
||||
|
.title-bor { |
||||
|
display: inline-block; |
||||
|
height: 20px; |
||||
|
width: 6px; |
||||
|
background: #4f8bff; |
||||
|
margin-right: 10px; |
||||
|
border-radius: 8px; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,179 @@ |
|||||
|
<template> |
||||
|
<div class="app-container"> |
||||
|
<div class="title1"> |
||||
|
<span class="title-bor"></span> |
||||
|
{{ title }} |
||||
|
</div> |
||||
|
<div> |
||||
|
<div> |
||||
|
<!-- <el-radio-group |
||||
|
v-model="radioValue" |
||||
|
size="small" |
||||
|
style="height: 36px" |
||||
|
@change="radioChange" |
||||
|
> |
||||
|
<el-radio label="0" border style="margin: 0 20px 0 0">周</el-radio> |
||||
|
<el-radio label="1" border style="margin: 0 20px 0 0">月</el-radio> |
||||
|
<el-radio label="2" border style="margin: 0 20px 0 0">季</el-radio> |
||||
|
<el-radio label="3" border style="margin: 0 20px 0 0">年</el-radio> |
||||
|
</el-radio-group> --> |
||||
|
<el-date-picker |
||||
|
v-model="pickerValue" |
||||
|
type="daterange" |
||||
|
align="right" |
||||
|
unlink-panels |
||||
|
range-separator="至" |
||||
|
start-placeholder="开始日期" |
||||
|
end-placeholder="结束日期" |
||||
|
value-format="yyyy-MM-dd" |
||||
|
@change="pickerChage" |
||||
|
> |
||||
|
</el-date-picker> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
// import { deviceType } from "./index.js"; |
||||
|
// this.$store.commit('headerFun', data) |
||||
|
export default { |
||||
|
name: "Post", |
||||
|
props: ["title", "type"], |
||||
|
data() { |
||||
|
return { |
||||
|
radioValue: "1", |
||||
|
radioTime: [], |
||||
|
pickerValue: null, |
||||
|
pickerOptions: { |
||||
|
shortcuts: [ |
||||
|
{ |
||||
|
text: "最近一周", |
||||
|
onClick(picker) { |
||||
|
const end = new Date(); |
||||
|
const start = new Date(); |
||||
|
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7); |
||||
|
picker.$emit("pick", [start, end]); |
||||
|
}, |
||||
|
}, |
||||
|
{ |
||||
|
text: "最近一个月", |
||||
|
onClick(picker) { |
||||
|
const end = new Date(); |
||||
|
const start = new Date(); |
||||
|
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30); |
||||
|
picker.$emit("pick", [start, end]); |
||||
|
}, |
||||
|
}, |
||||
|
{ |
||||
|
text: "最近三个月", |
||||
|
onClick(picker) { |
||||
|
const end = new Date(); |
||||
|
const start = new Date(); |
||||
|
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90); |
||||
|
picker.$emit("pick", [start, end]); |
||||
|
}, |
||||
|
}, |
||||
|
], |
||||
|
}, |
||||
|
}; |
||||
|
}, |
||||
|
created() { |
||||
|
console.log(this.pickerValue, 222); |
||||
|
}, |
||||
|
methods: { |
||||
|
radioChange() { |
||||
|
const start = new Date(); |
||||
|
const end = new Date(); |
||||
|
this.timeType = 4; |
||||
|
if (this.radioValue == 0) { |
||||
|
this.timeType = 4; |
||||
|
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7); |
||||
|
this.radioTime = [start, end]; |
||||
|
} |
||||
|
if (this.radioValue == 1) { |
||||
|
this.timeType = 4; |
||||
|
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30); |
||||
|
this.radioTime = [start, end]; |
||||
|
} |
||||
|
if (this.radioValue == 2) { |
||||
|
this.timeType = 1; |
||||
|
const now = new Date(); // 当前日期 |
||||
|
const nowYear = now.getFullYear(); //当前年 |
||||
|
const nowMonth = now.getMonth(); //当前月 |
||||
|
const nowDay = now.getDate(); // 当前日 |
||||
|
const nowDayOfWeek = now.getDay(); // 周几 |
||||
|
const jd = Math.ceil((nowMonth + 1) / 3); // 当前季度 |
||||
|
const startDate = new Date(nowYear, (jd - 1) * 3, 1); |
||||
|
const endDate = new Date(nowYear, jd * 3, 0); |
||||
|
this.radioTime = [startDate, endDate]; |
||||
|
} |
||||
|
if (this.radioValue == 3) { |
||||
|
this.timeType = 1; |
||||
|
end.setTime(start.getTime()); |
||||
|
start.setTime(start.getTime() - 3600 * 1000 * 24 * 365); |
||||
|
this.radioTime = [start, end]; |
||||
|
} |
||||
|
this.$emit( |
||||
|
"radio-change", |
||||
|
this.pickerValue || this.radioTime, |
||||
|
this.type, |
||||
|
this.timeType |
||||
|
); |
||||
|
}, |
||||
|
pickerChage() { |
||||
|
if (!this.pickerValue) { |
||||
|
this.radioChange(); |
||||
|
} |
||||
|
console.log(this.pickerValue, 111); |
||||
|
this.radioTime = []; |
||||
|
this.timeType = 4; |
||||
|
if (this.radioValue == 0) { |
||||
|
this.timeType = 4; |
||||
|
} |
||||
|
if (this.radioValue == 1) { |
||||
|
this.timeType = 4; |
||||
|
} |
||||
|
if (this.radioValue == 2) { |
||||
|
this.timeType = 1; |
||||
|
} |
||||
|
if (this.radioValue == 3) { |
||||
|
this.timeType = 1; |
||||
|
} |
||||
|
this.$emit("picker-change", this.pickerValue, this.type, this.timeType); |
||||
|
}, |
||||
|
}, |
||||
|
}; |
||||
|
</script> |
||||
|
<style scoped src="@/assets/styles/common.css"></style> |
||||
|
<style scoped> |
||||
|
. >>> .el-radio--small.is-bordered { |
||||
|
margin-right: 20px !important; |
||||
|
margin-left: 0 !important; |
||||
|
} |
||||
|
>>> .el-radio__input { |
||||
|
display: none; |
||||
|
} |
||||
|
>>> .el-radio__label { |
||||
|
padding-left: 5px; |
||||
|
} |
||||
|
.app-container { |
||||
|
padding: 0; |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
} |
||||
|
.title1 { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
font-size: 20px; |
||||
|
font-weight: 600; |
||||
|
} |
||||
|
.title-bor { |
||||
|
display: inline-block; |
||||
|
height: 20px; |
||||
|
width: 6px; |
||||
|
background: #4f8bff; |
||||
|
margin-right: 10px; |
||||
|
border-radius: 8px; |
||||
|
} |
||||
|
</style> |
||||
File diff suppressed because it is too large
Loading…
Reference in new issue