ccsens_zhengzhichuan
/
acupuncture
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

首页样式完善

newMaster
1747191978@qq.com 4 months ago
parent
b72f8be024
commit
8b21672990
2 changed files with 384 additions and 370 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 737
      acupuncture-前台/src/views/indexCom/JM.vue
  2. 15
      acupuncture-前台/src/views/indexCom/index.js

737
acupuncture-前台/src/views/indexCom/JM.vue
View File

@ -1,54 +1,76 @@
<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>
<div style="flex: 1"> <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">体态评估（TAPS）</span> <span class="header-title">体态评估（TAPS）</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="posture" style="width: 100%"></div> <div id="posture" style="width: 100%"></div>
</div> </div>
</el-card> </el-card>
</div> </div>
</div> <div style="flex: 1; margin-right: 20px">
</div> <el-card shadow="always">
<div class="app-container"> <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 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">
@ -73,335 +95,326 @@
</el-card> </el-card>
</div> </div>
</div> </div>
</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 { import { zlInfo } from "@/api/indexCom.js";
zlInfo import {
} from "@/api/indexCom.js"; diagnoseEcharts,
import { systemEcharts,
diagnoseEcharts, physiqueEcharts,
systemEcharts, postureEcharts,
physiqueEcharts, agrypniaEcharts,
postureEcharts, anxietyEcharts,
agrypniaEcharts, } from "./index";
anxietyEcharts, export default {
} from "./index"; name: "Post",
export default { props: ["title"],
name: "Post", mixins: [resize],
props: ["title"], data() {
mixins: [resize], return {
data() { queryParams: {
return { param: {
queryParams: { startTime: "",
param: { endTime: "",
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) { loading: false,
console.log('诊疗信息', e) diagnoseValue: null, // 病种
} systemValue: null, // 体系
}, physiqueValue: null, // 体质
// 病种（主要诊断） postureValue: null, // 体态
handleDiagnose() { agrypniaValue: null, // 失眠
diagnoseEcharts.series[0].data = this.diagnoseValue?.map((item) => { anxietyValue: null, // 焦虑
return item.total; // 体系中文
}); systemObj: {
diagnoseEcharts.yAxis.data = this.diagnoseValue?.map((item) => { yxfpz: "隐形肥胖型", //隐形肥胖型
return item.type; zfgdx: "脂肪过多型", //脂肪过多型
}); fpx: "肥胖型", //肥胖型
this.$nextTick(() => { jrbzx: "肌肉不足型", //肌肉不足型
var myChart = echarts.init(document.getElementById("diagnose"), null, { jkjcx: "健康匀称型", //健康匀称型
height: 300, czjrx: "超重肌肉型", //超重肌肉型
}); xsx: "消瘦型", //消瘦型
myChart.setOption(diagnoseEcharts, true); dzfx: "低脂肪型", //低脂肪型
myChart.resize(); ydyx: "运动员型", //运动员型
window.onresize = myChart.resize; },
}); // 体质
}, physiqueObj: {
// 体系 phz: "平和质", //平和质
handleSystem() { qxz: "气虚质", //气虚质
systemEcharts.series[0].data = this.systemValue?.map((item) => { yangxz: "阳虚质", //阳虚质
return item.value; yinxz: "阴虚质", //阴虚质
}); tsz: "痰湿质", //痰湿质
systemEcharts.xAxis.data = this.systemValue?.map((item) => { srz: "湿热质", //湿热质
return item.name; xyz: "血瘀质", //血瘀质
}); qyz: "气郁质", //气郁质
this.$nextTick(() => { tlz: "特禀质", //特禀质
var myChart = echarts.init(document.getElementById("system"), null, { },
height: 300, };
}); },
myChart.setOption(systemEcharts, true); created() {
myChart.resize(); // this.Linepatient();
window.onresize = myChart.resize; this.getData();
}); },
}, methods: {
// 体质 statistics(_data, _type) {
handlePhysique() { this.initial(_data, _type); // 处理数据
physiqueEcharts.series[0].data = this.physiqueValue?.map((item) => { this.loading = true;
return item.value; this.getData(); // 获取数据
}); },
physiqueEcharts.xAxis.data = this.physiqueValue?.map((item) => { //患者信息
return item.name; async getData() {
}); try {
this.$nextTick(() => { await zlInfo(this.queryParams).then((res) => {
var myChart = echarts.init(document.getElementById("physique"), null, { const { jlfb, smfb, sort, ttfb, txfb, zytz } = res.data;
height: 300, // 病种（主要诊断）
}); this.diagnoseValue = sort.sort((a, b) => a.total - b.total);
myChart.setOption(physiqueEcharts, true); this.handleDiagnose();
myChart.resize(); // 体系
window.onresize = myChart.resize; this.systemValue = [];
}); delete txfb.total;
}, for (let key in txfb) {
// 体态评估 let data = {
handlePosture() { name: this.systemObj[key],
postureEcharts.series[0].data = this.postureValue; value: txfb[key] || 0,
this.$nextTick(() => { };
var myChart = echarts.init(document.getElementById("posture"), null, { this.systemValue.push(data);
height: 300, }
}); this.handleSystem();
myChart.setOption(postureEcharts, true); // 体质
myChart.resize(); this.physiqueValue = [];
window.onresize = myChart.resize; delete zytz.total;
}); for (let key in zytz) {
}, let data = {
// 数据处理 查询类型判断参数 name: this.physiqueObj[key],
initial(_data, _type) { value: zytz[key] || 0,
_data[0] = this.$moment(_data[0]).format("YYYY-MM-DD"); };
_data[1] = this.$moment(_data[1]).format("YYYY-MM-DD"); this.physiqueValue.push(data);
this.queryParams.param = { }
startTime: _data[0] + " " + "00:00:00", this.handlePhysique();
endTime: _data[1] + " " + "23:59:59", // 体态
}; this.postureValue = [
}, {
// 失眠评估 value: ttfb?.score1 || 0,
handleAgrypnia() { name: "1分",
agrypniaEcharts.series[0].data = this.agrypniaValue; },
this.$nextTick(() => { {
var myChart = echarts.init(document.getElementById("agrypnia"), null, { value: ttfb?.score2 || 0,
height: 300, name: "2分",
}); },
myChart.setOption(agrypniaEcharts, true); {
myChart.resize(); value: ttfb?.score3 || 0,
window.onresize = myChart.resize; name: "3分",
}); },
}, {
// 焦虑评估 value: ttfb?.score4 || 0,
handleAnxiety() { name: "4分",
anxietyEcharts.series[0].data = this.anxietyValue; },
this.$nextTick(() => { {
var myChart = echarts.init(document.getElementById("anxiety"), null, { value: ttfb?.score5 || 0,
height: 300, name: "5分",
}); },
myChart.setOption(anxietyEcharts, true); ];
myChart.resize(); this.handlePosture();
window.onresize = myChart.resize; // 失眠评估（PHQ-9）
}); this.agrypniaValue = [];
}, for (let key in smfb) {
// 重新渲染图标 this.agrypniaValue.push(smfb[key]);
getRenew() { }
this.handleDiagnose(); this.handleAgrypnia();
this.handleSystem(); // 焦虑度
this.handlePhysique(); this.anxietyValue = [];
this.handlePosture(); for (let key in jlfb) {
this.handleAgrypnia(); this.anxietyValue.push(jlfb[key]);
this.handleAnxiety(); }
}, 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.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> </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>

15
acupuncture-前台/src/views/indexCom/index.js
View File

@ -749,7 +749,7 @@ export const effectEcharts = {
}, },
], ],
}; };
// 诊疗费 // 诊疗费用
export const costEcharts = { export const costEcharts = {
tooltip: { tooltip: {
trigger: "axis", trigger: "axis",
@ -801,12 +801,13 @@ export const costEcharts = {
data: [], data: [],
type: "bar", type: "bar",
barMaxWidth: 24, //柱图宽度 barMaxWidth: 24, //柱图宽度
itemStyle: { color: "#C6A268",
normal: { // itemStyle: {
//这里设置柱形图圆角 [左上角，右上角，右下角，左下角] // normal: {
barBorderRadius: [50, 50, 0, 0], // //这里设置柱形图圆角 [左上角，右上角，右下角，左下角]
}, // barBorderRadius: [50, 50, 0, 0],
}, // },
// },
}, },
], ],
}; };

Write Preview
Loading…
Cancel
Save