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.
388 lines
10 KiB
388 lines
10 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 class="dian-box dis">
|
|
<div class="dian-box dis">
|
|
<span class="dian" style="background: #c6a268"></span>
|
|
中西医结合
|
|
</div>
|
|
<span class="dian" style="background: #d8d8d8"></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: #c6a268"></span>
|
|
治愈
|
|
</div>
|
|
<div class="dian-box dis">
|
|
<span class="dian" style="background: #906c4a"></span>
|
|
显效
|
|
</div>
|
|
<div class="dian-box dis">
|
|
<span class="dian" style="background: #70483e"></span>
|
|
好转
|
|
</div>
|
|
<div class="dian-box dis">
|
|
<span class="dian" style="background: #c7bdb1"></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 || 0,
|
|
name: "中西医结合",
|
|
},
|
|
{
|
|
value: zllxtj?.czy || 0,
|
|
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 || 0,
|
|
},
|
|
{
|
|
name: "显效",
|
|
value: zlxwfb?.xx || 0,
|
|
},
|
|
{
|
|
name: "好转",
|
|
value: zlxwfb?.hz || 0,
|
|
},
|
|
{
|
|
name: "无效",
|
|
value: zlxwfb?.wx || 0,
|
|
},
|
|
];
|
|
this.handleEffect();
|
|
// 治疗费用
|
|
this.costValue = [
|
|
zlfy?.score1 || 0,
|
|
zlfy?.score2 || 0,
|
|
zlfy?.score3 || 0,
|
|
zlfy?.score4 || 0,
|
|
zlfy?.score5 || 0,
|
|
];
|
|
this.handleCost();
|
|
this.loading = false;
|
|
});
|
|
} catch (e) {
|
|
console.log("治疗类型", 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>
|
|
|