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.
325 lines
9.0 KiB
325 lines
9.0 KiB
10 months ago
|
<template>
|
||
|
|
<div class="app-container">
|
||
|
|
<!-- 静脉溶栓 数据对比 -->
|
||
|
|
<div class="dis" style="width: 100%">
|
||
|
|
<div style="flex: 1">
|
||
|
|
<el-card shadow="always">
|
||
|
|
<div class="dis title-box">
|
||
|
|
<span class="header-title">血管内治疗率 </span>
|
||
|
|
</div>
|
||
|
|
<!-- 统计图 -->
|
||
|
|
<div style="height: 300px" v-loading="loading">
|
||
|
|
<div id="XGZL" style="width: 100%"></div>
|
||
|
|
</div>
|
||
|
|
</el-card>
|
||
|
|
</div>
|
||
|
|
<div style="flex: 1; margin-left: 20px">
|
||
|
|
<el-card shadow="always">
|
||
|
|
<div class="dis title-box">
|
||
|
|
<span class="header-title">数据对比</span>
|
||
|
|
<div class="dis">
|
||
|
|
<div class="dian-box dis">
|
||
|
|
<span class="dian" style="background: #00d1a1"></span>
|
||
|
|
桥接治疗人数
|
||
|
|
</div>
|
||
|
|
<div class="dian-box dis">
|
||
|
|
<span class="dian" style="background: #4f8bff"></span>
|
||
|
|
非桥接治疗人数
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- 统计图 -->
|
||
|
|
<div style="height: 300px" v-loading="loading">
|
||
|
|
<div id="SJDB" style="width: 100%"></div>
|
||
|
|
</div>
|
||
|
|
</el-card>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- DNT分布 sICH发生率 -->
|
||
|
|
<div class="dis" style="width: 100%">
|
||
|
|
<div style="flex: 1">
|
||
|
|
<el-card shadow="always">
|
||
|
|
<div class="dis title-box">
|
||
|
|
<span class="header-title">DPT</span>
|
||
|
|
<div class="dis">
|
||
|
|
<div class="dian-box dis">
|
||
|
|
<span class="dian" style="background: #00d1a1"></span> ≤60 min
|
||
|
|
</div>
|
||
|
|
<div class="dian-box dis">
|
||
|
|
<span class="dian" style="background: #ffcd6c"></span> ≤90 min
|
||
|
|
</div>
|
||
|
|
<div class="dian-box dis">
|
||
|
|
<span class="dian" style="background: #a794fe"></span> >90 min
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- 统计图 -->
|
||
|
|
<div style="height: 300px" v-loading="loading">
|
||
|
|
<div id="DPT" style="width: 100%"></div>
|
||
|
|
</div>
|
||
|
|
</el-card>
|
||
|
|
</div>
|
||
|
|
<div style="flex: 1; margin-left: 20px">
|
||
|
|
<el-card shadow="always">
|
||
|
|
<div class="dis title-box">
|
||
|
|
<span class="header-title">PRT</span>
|
||
|
|
<div class="dis">
|
||
|
|
<div class="dian-box dis">
|
||
|
|
<span class="dian" style="background: #a794fe"></span> ≤60 min
|
||
|
|
</div>
|
||
|
|
<div class="dian-box dis">
|
||
|
|
<span class="dian" style="background: #4f8bff"></span> ≤90 min
|
||
|
|
</div>
|
||
|
|
<div class="dian-box dis">
|
||
|
|
<span class="dian" style="background: #ffcd6c"></span> >90 min
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- 统计图 -->
|
||
|
|
<div style="height: 300px" v-loading="loading">
|
||
|
|
<div id="RPT" style="width: 100%"></div>
|
||
|
|
</div>
|
||
|
|
</el-card>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import * as echarts from "echarts";
|
||
|
|
require("echarts/theme/macarons"); // echarts theme
|
||
|
|
import resize from "@/views/dashboard/mixins/resize";
|
||
|
|
import {
|
||
|
|
queryDptResult,
|
||
|
|
queryRptResult,
|
||
|
|
dataComparison,
|
||
|
|
queryXgzlLv,
|
||
|
|
} from "@/api/indexCom.js";
|
||
|
|
import { XGZL, XGSJDB, DPT, RPT } from "./index";
|
||
|
|
export default {
|
||
|
|
name: "Post",
|
||
|
|
props: ["title"],
|
||
|
|
mixins: [resize],
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
loading: false,
|
||
|
|
DPTvalue: null,
|
||
|
|
RPTvalue: null,
|
||
|
|
SJDBvalue: null,
|
||
|
|
XGZLvalue: null,
|
||
|
|
queryParams: {
|
||
|
|
param: {
|
||
|
|
timeType: 4,
|
||
|
|
startTime: "",
|
||
|
|
endTime: "",
|
||
|
|
},
|
||
|
|
},
|
||
|
|
};
|
||
|
|
},
|
||
|
|
created() {
|
||
|
|
// this.getData();
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
statistics(_data, _type) {
|
||
|
|
this.initial(_data, _type); // 处理数据
|
||
|
|
this.loading = true;
|
||
|
|
this.getData(); // 获取数据
|
||
|
|
},
|
||
|
|
// 查询
|
||
|
|
async getData() {
|
||
|
|
try {
|
||
|
|
// /DNT
|
||
|
|
await queryDptResult(this.queryParams).then((res) => {
|
||
|
|
this.DPTvalue = res.data;
|
||
|
|
console.log("this.DPTvalue: ", this.DPTvalue);
|
||
|
|
this.DPT();
|
||
|
|
});
|
||
|
|
//RPT
|
||
|
|
await queryRptResult(this.queryParams).then((res) => {
|
||
|
|
this.RPTvalue = res.data;
|
||
|
|
this.RPT();
|
||
|
|
});
|
||
|
|
// 数据对比
|
||
|
|
// await dataComparison(this.queryParams).then((res) => {
|
||
|
|
// console.log("dataComparison: ", dataComparison);
|
||
|
|
// this.SJDBvalue = res.date;
|
||
|
|
// this.SJDB();
|
||
|
|
// });
|
||
|
|
await dataComparison(this.queryParams).then((res) => {
|
||
|
|
console.log("res1111: ", res);
|
||
|
|
this.SJDBvalue = res.data;
|
||
|
|
this.SJDB();
|
||
|
|
});
|
||
|
|
await queryXgzlLv(this.queryParams).then((res) => {
|
||
|
|
this.XGZLvalue = res.data;
|
||
|
|
this.XGZL();
|
||
|
|
});
|
||
|
|
this.loading = false;
|
||
|
|
} catch (e) {
|
||
|
|
console.log(e, "e");
|
||
|
|
}
|
||
|
|
},
|
||
|
|
// 数据对比
|
||
|
|
SJDB(_statData) {
|
||
|
|
XGSJDB.series[0].data = this.SJDBvalue?.map((item) => {
|
||
|
|
return item.qiaojie; //静脉溶栓人数
|
||
|
|
});
|
||
|
|
XGSJDB.series[1].data = this.SJDBvalue?.map((item) => {
|
||
|
|
return item.falseQiaojie; //静脉溶栓人数
|
||
|
|
});
|
||
|
|
XGSJDB.xAxis[0].data = this.SJDBvalue?.map((item) => {
|
||
|
|
return item.date; //X轴
|
||
|
|
});
|
||
|
|
this.$nextTick(() => {
|
||
|
|
// 基于准备好的dom，初始化echarts实例
|
||
|
|
var myChart = echarts.init(document.getElementById("SJDB"), null, {
|
||
|
|
height: 300,
|
||
|
|
});
|
||
|
|
myChart.setOption(XGSJDB, true);
|
||
|
|
myChart.resize();
|
||
|
|
window.onresize = myChart.resize;
|
||
|
|
});
|
||
|
|
},
|
||
|
|
// 血管治疗
|
||
|
|
XGZL() {
|
||
|
|
XGZL.series[0].data = this.XGZLvalue?.map((item) => {
|
||
|
|
return item.decimal; //静脉溶栓人数
|
||
|
|
});
|
||
|
|
XGZL.xAxis.data = this.XGZLvalue?.map((item) => {
|
||
|
|
return item.date; //X轴
|
||
|
|
});
|
||
|
|
this.$nextTick(() => {
|
||
|
|
// 基于准备好的dom，初始化echarts实例
|
||
|
|
var myChart = echarts.init(document.getElementById("XGZL"), null, {
|
||
|
|
height: 300,
|
||
|
|
});
|
||
|
|
myChart.setOption(XGZL, true);
|
||
|
|
myChart.resize();
|
||
|
|
window.onresize = myChart.resize;
|
||
|
|
});
|
||
|
|
},
|
||
|
|
// DPT
|
||
|
|
DPT() {
|
||
|
|
DPT.series[0].data = this.DPTvalue?.map((item) => {
|
||
|
|
return item.dy60; //<= 60
|
||
|
|
});
|
||
|
|
DPT.series[1].data = this.DPTvalue?.map((item) => {
|
||
|
|
return item.dy90; //<= 90
|
||
|
|
});
|
||
|
|
DPT.series[2].data = this.DPTvalue?.map((item) => {
|
||
|
|
return item.other; //<= 90
|
||
|
|
});
|
||
|
|
DPT.xAxis[0].data = this.DPTvalue?.map((item) => {
|
||
|
|
return item.date; //X轴
|
||
|
|
});
|
||
|
|
this.$nextTick(() => {
|
||
|
|
// 基于准备好的dom，初始化echarts实例
|
||
|
|
var myChart = echarts.init(document.getElementById("DPT"), null, {
|
||
|
|
height: 300,
|
||
|
|
});
|
||
|
|
myChart.setOption(DPT, true);
|
||
|
|
myChart.resize();
|
||
|
|
window.onresize = myChart.resize;
|
||
|
|
});
|
||
|
|
},
|
||
|
|
// RPT
|
||
|
|
RPT(_statData) {
|
||
|
|
RPT.series[0].data = this.RPTvalue?.map((item) => {
|
||
|
|
return item.dy60; //<= 60
|
||
|
|
});
|
||
|
|
RPT.series[1].data = this.RPTvalue?.map((item) => {
|
||
|
|
return item.dy90; //<= 90
|
||
|
|
});
|
||
|
|
RPT.series[2].data = this.RPTvalue?.map((item) => {
|
||
|
|
return item.other; //> 90
|
||
|
|
});
|
||
|
|
RPT.xAxis[0].data = this.RPTvalue?.map((item) => {
|
||
|
|
return item.date; //X轴
|
||
|
|
});
|
||
|
|
this.$nextTick(() => {
|
||
|
|
// 基于准备好的dom，初始化echarts实例
|
||
|
|
var myChart = echarts.init(document.getElementById("RPT"), null, {
|
||
|
|
height: 300,
|
||
|
|
});
|
||
|
|
myChart.setOption(RPT, 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 = {
|
||
|
|
timeType: _type,
|
||
|
|
startTime: _data[0] + " " + "00:00:00",
|
||
|
|
endTime: _data[1] + " " + "23:59:59",
|
||
|
|
};
|
||
|
|
},
|
||
|
|
// 重新渲染图标
|
||
|
|
getRenew() {
|
||
|
|
this.SJDB(); // 数据对比
|
||
|
|
this.XGZL(); // 血管治疗
|
||
|
|
this.DPT();
|
||
|
|
this.RPT();
|
||
|
|
},
|
||
|
|
},
|
||
|
|
};
|
||
|
|
</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;
|
||
|
|
}
|
||
|
|
.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>
|