5 changed files with 454 additions and 396 deletions
@ -1,392 +1,404 @@ |
|||||
<template> |
<template> |
||||
<div> |
<div> |
||||
<div class="app-container"> |
<div class="app-container"> |
||||
<div class="dis" style="width: 100%"> |
<div class="dis" style="width: 100%"> |
||||
<div style="flex: 1; margin-right: 20px"> |
<div style="flex: 1; margin-right: 20px"> |
||||
<el-card shadow="always"> |
<el-card shadow="always"> |
||||
<div class="dis title-box"> |
<div class="dis title-box"> |
||||
<span class="header-title">病种排名</span> |
<span class="header-title">病种排名</span> |
||||
<div class="dis"></div> |
<div class="dis"></div> |
||||
</div> |
</div> |
||||
<div style="height: 300px" v-loading="loading"> |
<div style="height: 300px" v-loading="loading"> |
||||
<div id="diagnose" style="width: 100%"></div> |
<div id="diagnose" style="width: 100%"></div> |
||||
</div> |
</div> |
||||
</el-card> |
</el-card> |
||||
</div> |
</div> |
||||
<div style="flex: 1; margin-right: 20px"> |
<div style="flex: 1; margin-right: 20px"> |
||||
<el-card shadow="always"> |
<el-card shadow="always"> |
||||
<div class="dis title-box"> |
<div class="dis title-box"> |
||||
<span class="header-title">体系分布</span> |
<span class="header-title">体系分布</span> |
||||
<div class="dis"></div> |
<div class="dis"></div> |
||||
</div> |
</div> |
||||
<div style="height: 300px" v-loading="loading"> |
<div style="height: 300px" v-loading="loading"> |
||||
<div id="system" style="width: 100%"></div> |
<div id="system" style="width: 100%"></div> |
||||
</div> |
</div> |
||||
</el-card> |
</el-card> |
||||
</div> |
</div> |
||||
<div style="flex: 1; margin-right: 20px"> |
<div style="flex: 1; margin-right: 20px"> |
||||
<el-card shadow="always"> |
<el-card shadow="always"> |
||||
<div class="dis title-box"> |
<div class="dis title-box"> |
||||
<span class="header-title">体质分布</span> |
<span class="header-title">体质分布</span> |
||||
<div class="dis"></div> |
<div class="dis"></div> |
||||
</div> |
</div> |
||||
<div style="height: 300px" v-loading="loading"> |
<div style="height: 300px" v-loading="loading"> |
||||
<div id="physique" style="width: 100%"></div> |
<div id="physique" style="width: 100%"></div> |
||||
</div> |
</div> |
||||
</el-card> |
</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> |
||||
<div style="flex: 1"> |
<div class="app-container"> |
||||
<el-card shadow="always"> |
<div class="dis" style="width: 100%"> |
||||
<div class="dis title-box"> |
<div style="flex: 1; margin-right: 20px"> |
||||
<span class="header-title">体态评估(TAPS)</span> |
<el-card shadow="always"> |
||||
<div class="dis"></div> |
<div class="dis title-box"> |
||||
</div> |
<span class="header-title">失眠评估(PHQ-9)</span> |
||||
<div style="height: 300px" v-loading="loading"> |
<div class="dis"></div> |
||||
<div id="posture" style="width: 100%"></div> |
</div> |
||||
</div> |
<div style="height: 300px" v-loading="loading"> |
||||
</el-card> |
<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> |
||||
</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> |
</template> |
||||
|
|
||||
<script> |
<script> |
||||
import * as echarts from "echarts"; |
import * as echarts from "echarts"; |
||||
require("echarts/theme/macarons"); // echarts theme |
require("echarts/theme/macarons"); // echarts theme |
||||
import resize from "@/views/dashboard/mixins/resize"; |
import resize from "@/views/dashboard/mixins/resize"; |
||||
import { zlInfo } from "@/api/indexCom.js"; |
import { |
||||
import { |
zlInfo |
||||
diagnoseEcharts, |
} from "@/api/indexCom.js"; |
||||
systemEcharts, |
import { |
||||
physiqueEcharts, |
diagnoseEcharts, |
||||
postureEcharts, |
systemEcharts, |
||||
agrypniaEcharts, |
physiqueEcharts, |
||||
anxietyEcharts, |
postureEcharts, |
||||
} from "./index"; |
agrypniaEcharts, |
||||
export default { |
anxietyEcharts, |
||||
name: "Post", |
} from "./index"; |
||||
props: ["title"], |
export default { |
||||
mixins: [resize], |
name: "Post", |
||||
data() { |
props: ["title"], |
||||
return { |
mixins: [resize], |
||||
queryParams: { |
data() { |
||||
param: { |
return { |
||||
startTime: "", |
queryParams: { |
||||
endTime: "", |
param: { |
||||
}, |
startTime: "", |
||||
}, |
endTime: "", |
||||
|
}, |
||||
|
}, |
||||
|
|
||||
loading: false, |
loading: false, |
||||
diagnoseValue: null, // 病种 |
diagnoseValue: null, // 病种 |
||||
systemValue: null, // 体系 |
systemValue: null, // 体系 |
||||
physiqueValue: null, // 体质 |
physiqueValue: null, // 体质 |
||||
postureValue: null, // 体态 |
postureValue: null, // 体态 |
||||
agrypniaValue: null, // 失眠 |
agrypniaValue: null, // 失眠 |
||||
anxietyValue: null, // 焦虑 |
anxietyValue: null, // 焦虑 |
||||
// 体系中文 |
// 体系中文 |
||||
systemObj: { |
systemObj: { |
||||
yxfpz: "隐形肥胖型", //隐形肥胖型 |
yxfpz: "隐形肥胖型", //隐形肥胖型 |
||||
zfgdx: "脂肪过多型", //脂肪过多型 |
zfgdx: "脂肪过多型", //脂肪过多型 |
||||
fpx: "肥胖型", //肥胖型 |
fpx: "肥胖型", //肥胖型 |
||||
jrbzx: "肌肉不足型", //肌肉不足型 |
jrbzx: "肌肉不足型", //肌肉不足型 |
||||
jkjcx: "健康匀称型", //健康匀称型 |
jkjcx: "健康匀称型", //健康匀称型 |
||||
czjrx: "超重肌肉型", //超重肌肉型 |
czjrx: "超重肌肉型", //超重肌肉型 |
||||
xsx: "消瘦型", //消瘦型 |
xsx: "消瘦型", //消瘦型 |
||||
dzfx: "低脂肪型", //低脂肪型 |
dzfx: "低脂肪型", //低脂肪型 |
||||
ydyx: "运动员型", //运动员型 |
ydyx: "运动员型", //运动员型 |
||||
}, |
}, |
||||
// 体质 |
// 体质 |
||||
physiqueObj: { |
physiqueObj: { |
||||
phz: "平和质", //平和质 |
phz: "平和质", //平和质 |
||||
qxz: "气虚质", //气虚质 |
qxz: "气虚质", //气虚质 |
||||
yangxz: "阳虚质", //阳虚质 |
yangxz: "阳虚质", //阳虚质 |
||||
yinxz: "阴虚质", //阴虚质 |
yinxz: "阴虚质", //阴虚质 |
||||
tsz: "痰湿质", //痰湿质 |
tsz: "痰湿质", //痰湿质 |
||||
srz: "湿热质", //湿热质 |
srz: "湿热质", //湿热质 |
||||
xyz: "血瘀质", //血瘀质 |
xyz: "血瘀质", //血瘀质 |
||||
qyz: "气郁质", //气郁质 |
qyz: "气郁质", //气郁质 |
||||
tlz: "特禀质", //特禀质 |
tlz: "特禀质", //特禀质 |
||||
}, |
}, |
||||
}; |
}; |
||||
}, |
}, |
||||
created() { |
created() { |
||||
// this.Linepatient(); |
// this.Linepatient(); |
||||
this.getData(); |
this.getData(); |
||||
}, |
}, |
||||
methods: { |
methods: { |
||||
statistics(_data, _type) { |
statistics(_data, _type) { |
||||
this.initial(_data, _type); // 处理数据 |
this.initial(_data, _type); // 处理数据 |
||||
this.loading = true; |
this.loading = true; |
||||
this.getData(); // 获取数据 |
this.getData(); // 获取数据 |
||||
}, |
}, |
||||
//患者信息 |
//患者信息 |
||||
async getData() { |
async getData() { |
||||
try { |
try { |
||||
await zlInfo(this.queryParams).then((res) => { |
await zlInfo(this.queryParams).then((res) => { |
||||
const { jlfb, smfb, sort, ttfb, txfb, zytz } = res.data; |
const { |
||||
// 病种(主要诊断) |
jlfb, |
||||
this.diagnoseValue = sort.sort((a, b) => a.total - b.total); |
smfb, |
||||
this.handleDiagnose(); |
sort, |
||||
// 体系 |
ttfb, |
||||
this.systemValue = []; |
txfb, |
||||
delete txfb.total; |
zytz |
||||
for (let key in txfb) { |
} = res.data; |
||||
let data = { |
// 病种(主要诊断) |
||||
name: this.systemObj[key], |
this.diagnoseValue = sort.sort((a, b) => a.total - b.total); |
||||
value: txfb[key], |
this.handleDiagnose(); |
||||
}; |
// 体系 |
||||
this.systemValue.push(data); |
this.systemValue = []; |
||||
} |
delete txfb.total; |
||||
this.handleSystem(); |
for (let key in txfb) { |
||||
// 体质 |
let data = { |
||||
this.physiqueValue = []; |
name: this.systemObj[key], |
||||
delete zytz.total; |
value: txfb[key], |
||||
for (let key in zytz) { |
}; |
||||
let data = { |
this.systemValue.push(data); |
||||
name: this.physiqueObj[key], |
} |
||||
value: zytz[key], |
this.handleSystem(); |
||||
}; |
// 体质 |
||||
this.physiqueValue.push(data); |
this.physiqueValue = []; |
||||
} |
delete zytz.total; |
||||
this.handlePhysique(); |
for (let key in zytz) { |
||||
// 体态 |
let data = { |
||||
this.postureValue = [ |
name: this.physiqueObj[key], |
||||
{ |
value: zytz[key], |
||||
value: ttfb.score1, |
}; |
||||
name: "1分", |
this.physiqueValue.push(data); |
||||
}, |
} |
||||
{ |
this.handlePhysique(); |
||||
value: ttfb.score2, |
// 体态 |
||||
name: "2分", |
this.postureValue = [{ |
||||
}, |
value: ttfb.score1, |
||||
{ |
name: "1分", |
||||
value: ttfb.score3, |
}, |
||||
name: "3分", |
{ |
||||
}, |
value: ttfb.score2, |
||||
{ |
name: "2分", |
||||
value: ttfb.score4, |
}, |
||||
name: "4分", |
{ |
||||
}, |
value: ttfb.score3, |
||||
{ |
name: "3分", |
||||
value: ttfb.score5, |
}, |
||||
name: "5分", |
{ |
||||
}, |
value: ttfb.score4, |
||||
]; |
name: "4分", |
||||
this.handlePosture(); |
}, |
||||
// 失眠评估(PHQ-9) |
{ |
||||
this.agrypniaValue = []; |
value: ttfb.score5, |
||||
for (let key in smfb) { |
name: "5分", |
||||
this.agrypniaValue.push(smfb[key]); |
}, |
||||
} |
]; |
||||
this.handleAgrypnia(); |
this.handlePosture(); |
||||
// 焦虑度 |
// 失眠评估(PHQ-9) |
||||
this.anxietyValue = []; |
this.agrypniaValue = []; |
||||
for (let key in jlfb) { |
for (let key in smfb) { |
||||
this.anxietyValue.push(jlfb[key]); |
this.agrypniaValue.push(smfb[key]); |
||||
} |
} |
||||
this.handleAnxiety(); |
this.handleAgrypnia(); |
||||
}); |
// 焦虑度 |
||||
this.loading = false; |
this.anxietyValue = []; |
||||
} catch (e) {} |
for (let key in jlfb) { |
||||
}, |
this.anxietyValue.push(jlfb[key]); |
||||
// 病种(主要诊断) |
} |
||||
handleDiagnose() { |
this.handleAnxiety(); |
||||
diagnoseEcharts.series[0].data = this.diagnoseValue?.map((item) => { |
}); |
||||
return item.total; |
this.loading = false; |
||||
}); |
} catch (e) {} |
||||
diagnoseEcharts.yAxis.data = this.diagnoseValue?.map((item) => { |
}, |
||||
return item.type; |
// 病种(主要诊断) |
||||
}); |
handleDiagnose() { |
||||
this.$nextTick(() => { |
diagnoseEcharts.series[0].data = this.diagnoseValue?.map((item) => { |
||||
var myChart = echarts.init(document.getElementById("diagnose"), null, { |
return item.total; |
||||
height: 300, |
}); |
||||
}); |
diagnoseEcharts.yAxis.data = this.diagnoseValue?.map((item) => { |
||||
myChart.setOption(diagnoseEcharts, true); |
return item.type; |
||||
myChart.resize(); |
}); |
||||
window.onresize = myChart.resize; |
this.$nextTick(() => { |
||||
}); |
var myChart = echarts.init(document.getElementById("diagnose"), null, { |
||||
}, |
height: 300, |
||||
// 体系 |
}); |
||||
handleSystem() { |
myChart.setOption(diagnoseEcharts, true); |
||||
systemEcharts.series[0].data = this.systemValue?.map((item) => { |
myChart.resize(); |
||||
return item.value; |
window.onresize = myChart.resize; |
||||
}); |
}); |
||||
systemEcharts.xAxis.data = this.systemValue?.map((item) => { |
}, |
||||
return item.name; |
// 体系 |
||||
}); |
handleSystem() { |
||||
this.$nextTick(() => { |
systemEcharts.series[0].data = this.systemValue?.map((item) => { |
||||
var myChart = echarts.init(document.getElementById("system"), null, { |
return item.value; |
||||
height: 300, |
}); |
||||
}); |
systemEcharts.xAxis.data = this.systemValue?.map((item) => { |
||||
myChart.setOption(systemEcharts, true); |
return item.name; |
||||
myChart.resize(); |
}); |
||||
window.onresize = myChart.resize; |
this.$nextTick(() => { |
||||
}); |
var myChart = echarts.init(document.getElementById("system"), null, { |
||||
}, |
height: 300, |
||||
// 体质 |
}); |
||||
handlePhysique() { |
myChart.setOption(systemEcharts, true); |
||||
physiqueEcharts.series[0].data = this.physiqueValue?.map((item) => { |
myChart.resize(); |
||||
return item.value; |
window.onresize = myChart.resize; |
||||
}); |
}); |
||||
physiqueEcharts.xAxis.data = this.physiqueValue?.map((item) => { |
}, |
||||
return item.name; |
// 体质 |
||||
}); |
handlePhysique() { |
||||
this.$nextTick(() => { |
physiqueEcharts.series[0].data = this.physiqueValue?.map((item) => { |
||||
var myChart = echarts.init(document.getElementById("physique"), null, { |
return item.value; |
||||
height: 300, |
}); |
||||
}); |
physiqueEcharts.xAxis.data = this.physiqueValue?.map((item) => { |
||||
myChart.setOption(physiqueEcharts, true); |
return item.name; |
||||
myChart.resize(); |
}); |
||||
window.onresize = myChart.resize; |
this.$nextTick(() => { |
||||
}); |
var myChart = echarts.init(document.getElementById("physique"), null, { |
||||
}, |
height: 300, |
||||
// 体态评估 |
}); |
||||
handlePosture() { |
myChart.setOption(physiqueEcharts, true); |
||||
postureEcharts.series[0].data = this.postureValue; |
myChart.resize(); |
||||
this.$nextTick(() => { |
window.onresize = myChart.resize; |
||||
var myChart = echarts.init(document.getElementById("posture"), null, { |
}); |
||||
height: 300, |
}, |
||||
}); |
// 体态评估 |
||||
myChart.setOption(postureEcharts, true); |
handlePosture() { |
||||
myChart.resize(); |
postureEcharts.series[0].data = this.postureValue; |
||||
window.onresize = myChart.resize; |
this.$nextTick(() => { |
||||
}); |
var myChart = echarts.init(document.getElementById("posture"), null, { |
||||
}, |
height: 300, |
||||
// 数据处理 查询类型判断参数 |
}); |
||||
initial(_data, _type) { |
myChart.setOption(postureEcharts, true); |
||||
_data[0] = this.$moment(_data[0]).format("YYYY-MM-DD"); |
myChart.resize(); |
||||
_data[1] = this.$moment(_data[1]).format("YYYY-MM-DD"); |
window.onresize = myChart.resize; |
||||
this.queryParams.param = { |
}); |
||||
startTime: _data[0] + " " + "00:00:00", |
}, |
||||
endTime: _data[1] + " " + "23:59:59", |
// 数据处理 查询类型判断参数 |
||||
}; |
initial(_data, _type) { |
||||
}, |
_data[0] = this.$moment(_data[0]).format("YYYY-MM-DD"); |
||||
// 失眠评估 |
_data[1] = this.$moment(_data[1]).format("YYYY-MM-DD"); |
||||
handleAgrypnia() { |
this.queryParams.param = { |
||||
agrypniaEcharts.series[0].data = this.agrypniaValue; |
startTime: _data[0] + " " + "00:00:00", |
||||
this.$nextTick(() => { |
endTime: _data[1] + " " + "23:59:59", |
||||
var myChart = echarts.init(document.getElementById("agrypnia"), null, { |
}; |
||||
height: 300, |
}, |
||||
}); |
// 失眠评估 |
||||
myChart.setOption(agrypniaEcharts, true); |
handleAgrypnia() { |
||||
myChart.resize(); |
agrypniaEcharts.series[0].data = this.agrypniaValue; |
||||
window.onresize = myChart.resize; |
this.$nextTick(() => { |
||||
}); |
var myChart = echarts.init(document.getElementById("agrypnia"), null, { |
||||
}, |
height: 300, |
||||
// 焦虑评估 |
}); |
||||
handleAnxiety() { |
myChart.setOption(agrypniaEcharts, true); |
||||
anxietyEcharts.series[0].data = this.anxietyValue; |
myChart.resize(); |
||||
this.$nextTick(() => { |
window.onresize = myChart.resize; |
||||
var myChart = echarts.init(document.getElementById("anxiety"), null, { |
}); |
||||
height: 300, |
}, |
||||
}); |
// 焦虑评估 |
||||
myChart.setOption(anxietyEcharts, true); |
handleAnxiety() { |
||||
myChart.resize(); |
anxietyEcharts.series[0].data = this.anxietyValue; |
||||
window.onresize = myChart.resize; |
this.$nextTick(() => { |
||||
}); |
var myChart = echarts.init(document.getElementById("anxiety"), null, { |
||||
}, |
height: 300, |
||||
// 重新渲染图标 |
}); |
||||
getRenew() { |
myChart.setOption(anxietyEcharts, true); |
||||
this.Linepatient(); |
myChart.resize(); |
||||
this.columnar(); |
window.onresize = myChart.resize; |
||||
}, |
}); |
||||
}, |
}, |
||||
}; |
// 重新渲染图标 |
||||
|
getRenew() { |
||||
|
this.handleDiagnose(); |
||||
|
this.handleSystem(); |
||||
|
this.handlePhysique(); |
||||
|
this.handlePosture(); |
||||
|
this.handleAgrypnia(); |
||||
|
this.handleAnxiety(); |
||||
|
}, |
||||
|
}, |
||||
|
}; |
||||
</script> |
</script> |
||||
<style scoped src="@/assets/styles/common.css"></style> |
<style scoped src="@/assets/styles/common.css"></style> |
||||
<style scoped> |
<style scoped> |
||||
>>> .el-card__body { |
>>>.el-card__body { |
||||
padding: 10px 0 !important; |
padding: 10px 0 !important; |
||||
} |
} |
||||
|
|
||||
.dis { |
.dis { |
||||
display: flex; |
display: flex; |
||||
} |
} |
||||
|
|
||||
.header-title { |
.header-title { |
||||
font-size: 18px; |
font-size: 18px; |
||||
} |
} |
||||
|
|
||||
.title-box { |
.title-box { |
||||
padding: 10px 20px; |
padding: 10px 20px; |
||||
border-bottom: 1px solid #dfe6ec; |
border-bottom: 1px solid #dfe6ec; |
||||
} |
} |
||||
|
|
||||
.dian-box { |
.dian-box { |
||||
align-items: center; |
align-items: center; |
||||
} |
} |
||||
|
|
||||
.dian { |
.dian { |
||||
display: inline-block; |
display: inline-block; |
||||
width: 16px; |
width: 16px; |
||||
height: 16px; |
height: 16px; |
||||
border-radius: 50%; |
border-radius: 50%; |
||||
margin: 0 10px; |
margin: 0 10px; |
||||
} |
} |
||||
|
|
||||
.title-box { |
.title-box { |
||||
justify-content: space-between; |
justify-content: space-between; |
||||
} |
} |
||||
|
|
||||
. >>> .el-radio--small.is-bordered { |
.>>>.el-radio--small.is-bordered { |
||||
margin-right: 20px !important; |
margin-right: 20px !important; |
||||
margin-left: 0 !important; |
margin-left: 0 !important; |
||||
} |
} |
||||
|
|
||||
>>> .el-radio__input { |
>>>.el-radio__input { |
||||
display: none; |
display: none; |
||||
} |
} |
||||
|
|
||||
>>> .el-radio__label { |
>>>.el-radio__label { |
||||
padding-left: 5px; |
padding-left: 5px; |
||||
} |
} |
||||
|
|
||||
.app-container { |
.app-container { |
||||
padding: 0; |
padding: 0; |
||||
display: flex; |
display: flex; |
||||
justify-content: space-between; |
justify-content: space-between; |
||||
} |
} |
||||
|
|
||||
.title { |
.title { |
||||
display: flex; |
display: flex; |
||||
align-items: center; |
align-items: center; |
||||
font-size: 20px; |
font-size: 20px; |
||||
font-weight: 600; |
font-weight: 600; |
||||
} |
} |
||||
|
|
||||
.title-bor { |
.title-bor { |
||||
display: inline-block; |
display: inline-block; |
||||
height: 20px; |
height: 20px; |
||||
width: 6px; |
width: 6px; |
||||
background: #4f8bff; |
background: #4f8bff; |
||||
margin-right: 10px; |
margin-right: 10px; |
||||
border-radius: 8px; |
border-radius: 8px; |
||||
} |
} |
||||
</style> |
</style> |
Loading…
Reference in new issue