You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
420 lines
11 KiB
420 lines
11 KiB
<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; margin-right: 20px">
|
|
<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 style="flex: 1">
|
|
<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 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] || 0,
|
|
};
|
|
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] || 0,
|
|
};
|
|
this.physiqueValue.push(data);
|
|
}
|
|
this.handlePhysique();
|
|
// 体态
|
|
this.postureValue = [
|
|
{
|
|
value: ttfb?.score1 || 0,
|
|
name: "1分",
|
|
},
|
|
{
|
|
value: ttfb?.score2 || 0,
|
|
name: "2分",
|
|
},
|
|
{
|
|
value: ttfb?.score3 || 0,
|
|
name: "3分",
|
|
},
|
|
{
|
|
value: ttfb?.score4 || 0,
|
|
name: "4分",
|
|
},
|
|
{
|
|
value: ttfb?.score5 || 0,
|
|
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) {
|
|
console.log("诊疗信息", e);
|
|
}
|
|
},
|
|
// 病种（主要诊断）
|
|
handleDiagnose() {
|
|
diagnoseEcharts.series[0].data = this.diagnoseValue?.map((item) => {
|
|
return item.total;
|
|
});
|
|
diagnoseEcharts.yAxis.data = this.diagnoseValue?.map((item) => {
|
|
return item.diseaseName;
|
|
});
|
|
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: #70483e;
|
|
margin-right: 10px;
|
|
border-radius: 8px;
|
|
}
|
|
</style>
|
|
|