Browse Source

页面尺寸变化重新渲染图表

newMaster
1747191978@qq.com 4 months ago
parent
commit
7bb4eb30e3
  1. 8
      acupuncture-前台/src/views/index.vue
  2. 752
      acupuncture-前台/src/views/indexCom/JM.vue
  3. 80
      acupuncture-前台/src/views/indexCom/XGZL.vue
  4. 4
      acupuncture-前台/src/views/indexCom/follow.vue
  5. 6
      acupuncture-前台/src/views/indexCom/patient.vue

8
acupuncture-前台/src/views/index.vue

@ -65,9 +65,11 @@
}, },
methods: { methods: {
resize() { resize() {
// this.$refs.patient.getRenew(); console.log(111)
// this.$refs.JM.getRenew(); this.$refs.patient.getRenew();
// this.$refs.XGZL.getRenew(); this.$refs.JM.getRenew();
this.$refs.XGZL.getRenew();
this.$refs.follow.getRenew();
}, },
// //
radioChange(_data, _type, _timeType) { radioChange(_data, _type, _timeType) {

752
acupuncture-前台/src/views/indexCom/JM.vue

@ -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>

80
acupuncture-前台/src/views/indexCom/XGZL.vue

@ -22,33 +22,74 @@
</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="diseaseMethod" style="width: 100%"></div> --> <div id="diseaseMethod" style="width: 100%"></div>
</div> </div>
</el-card> </el-card>
</div> </div>
<div style="flex: 1;"> <div style="flex: 1;">
<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 class="dis">
</div>
</div> </div>
</div> <div style="height: 300px" v-loading="loading">
<div style="height: 300px" v-loading="loading"> <div id="acupoint" style="width: 100%"></div>
<!-- <div id="acupoint" style="width: 100%"></div> --> </div>
</div> </el-card>
</el-card> </div> -->
</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> </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">
@ -93,7 +134,7 @@
</el-card> </el-card>
</div> </div>
</div> </div>
</div> </div> -->
</div> </div>
</template> </template>
@ -198,7 +239,7 @@
] ]
this.handleEffect() this.handleEffect()
// //
this.costValue =[zlfy.score1,zlfy.score2,zlfy.score3,zlfy.score4,zlfy.score5] this.costValue = [zlfy.score1, zlfy.score2, zlfy.score3, zlfy.score4, zlfy.score5]
this.handleCost() this.handleCost()
}); });
this.loading = false; this.loading = false;
@ -263,8 +304,9 @@
}, },
// //
getRenew() { getRenew() {
this.Linepatient(); this.handleHealType();
this.columnar(); this.handleEffect();
this.handleCost()
}, },
}, },
}; };

4
acupuncture-前台/src/views/indexCom/follow.vue

@ -146,8 +146,8 @@
}, },
// //
getRenew() { getRenew() {
// this.Linepatient(); this.handleFollow();
// this.columnar(); this.handleLossFollow()
}, },
}, },
}; };

6
acupuncture-前台/src/views/indexCom/patient.vue

@ -245,8 +245,10 @@
}, },
// //
getRenew() { getRenew() {
// this.Linepatient(); this.Linepatient(); //
// this.columnar(); this.handleAge(); //
this.columnar(); //
this.handleDisease(); //
}, },
}, },
}; };

Loading…
Cancel
Save