zzc
4 months ago
5 changed files with 599 additions and 299 deletions
@ -1,296 +1,362 @@ |
|||||
<template> |
<template> |
||||
<div class="app-container"> |
<div> |
||||
<!-- 静脉溶栓 数据对比 --> |
<div class="app-container"> |
||||
<div class="dis" style="width: 100%"> |
<div class="dis" style="width: 100%"> |
||||
<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">静脉溶栓率 </span> |
<span class="header-title">病种排名</span> |
||||
</div> |
<div class="dis"></div> |
||||
<!-- 统计图 --> |
</div> |
||||
<div style="height: 300px" v-loading="loading"> |
<div style="height: 300px" v-loading="loading"> |
||||
<div id="JMz" style="width: 100%"></div> |
<div id="diagnose" style="width: 100%"></div> |
||||
</div> |
</div> |
||||
</el-card> |
</el-card> |
||||
</div> |
</div> |
||||
<div style="flex: 1; margin-left: 20px"> |
<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 class="dian-box dis"> |
</div> |
||||
<span class="dian" style="background: #00d1a1"></span> |
</div> |
||||
静脉溶栓人数 |
<div style="height: 300px" v-loading="loading"> |
||||
</div> |
<div id="system" style="width: 100%"></div> |
||||
<div class="dian-box dis"> |
</div> |
||||
<span class="dian" style="background: #4f8bff"></span> |
</el-card> |
||||
急救特征人数 |
</div> |
||||
</div> |
</div> |
||||
</div> |
</div> |
||||
</div> |
<div class="app-container"> |
||||
<!-- 统计图 --> |
<div class="dis" style="width: 100%"> |
||||
<div style="height: 300px" v-loading="loading"> |
<div style="flex: 1; margin-right: 20px"> |
||||
<div id="JMy" style="width: 100%"></div> |
<el-card shadow="always"> |
||||
</div> |
<div class="dis title-box"> |
||||
</el-card> |
<span class="header-title">体质分布</span> |
||||
</div> |
<div class="dis"></div> |
||||
</div> |
</div> |
||||
<!-- DNT分布 sICH发生率 --> |
<div style="height: 300px" v-loading="loading"> |
||||
<div class="dis" style="width: 100%"> |
<div id="physique" style="width: 100%"></div> |
||||
<div style="flex: 1"> |
</div> |
||||
<el-card shadow="always"> |
</el-card> |
||||
<div class="dis title-box"> |
</div> |
||||
<span class="header-title">DNT分布 </span> |
<div style="flex: 1"> |
||||
<div class="dis"> |
<el-card shadow="always"> |
||||
<div class="dian-box dis"> |
<div class="dis title-box"> |
||||
<span class="dian" style="background: #ffcd6c"></span> ≤45 min |
<span class="header-title">体态评估（TAPS）</span> |
||||
</div> |
<div class="dis"> |
||||
<div class="dian-box dis"> |
</div> |
||||
<span class="dian" style="background: #f97186"></span> ≤60 min |
</div> |
||||
</div> |
<div style="height: 300px" v-loading="loading"> |
||||
<div class="dian-box dis"> |
<div id="posture" style="width: 100%"></div> |
||||
<span class="dian" style="background: #4f8bff"></span> >60 min |
</div> |
||||
</div> |
</el-card> |
||||
</div> |
</div> |
||||
</div> |
</div> |
||||
<!-- 统计图 --> |
</div> |
||||
<div style="height: 300px" v-loading="loading"> |
<div class="app-container"> |
||||
<div id="DNT" style="width: 100%"></div> |
<div class="dis" style="width: 100%"> |
||||
</div> |
<div style="flex: 1; margin-right: 20px"> |
||||
</el-card> |
<el-card shadow="always"> |
||||
</div> |
<div class="dis title-box"> |
||||
<div style="flex: 1; margin-left: 20px"> |
<span class="header-title">失眠评估（PHQ-9）</span> |
||||
<el-card shadow="always"> |
<div class="dis"></div> |
||||
<div class="dis title-box"> |
</div> |
||||
<span class="header-title">sICH发生率</span> |
<div style="height: 300px" v-loading="loading"> |
||||
</div> |
<div id="agrypnia" style="width: 100%"></div> |
||||
<!-- 统计图 --> |
</div> |
||||
<div style="height: 300px" v-loading="loading"> |
</el-card> |
||||
<div id="sICH" style="width: 100%"></div> |
</div> |
||||
</div> |
<div style="flex: 1"> |
||||
</el-card> |
<el-card shadow="always"> |
||||
</div> |
<div class="dis title-box"> |
||||
</div> |
<span class="header-title">焦虑（HAMD-24）</span> |
||||
</div> |
<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> |
|
||||
import * as echarts from "echarts"; |
|
||||
require("echarts/theme/macarons"); // echarts theme |
|
||||
import resize from "@/views/dashboard/mixins/resize"; |
|
||||
import { queryDntResult, querySichResult, queryJmrs } from "@/api/indexCom.js"; |
|
||||
import { JMRSL, JMSJDB, DNT, SICH } from "./index"; |
|
||||
export default { |
|
||||
name: "Post", |
|
||||
props: ["title"], |
|
||||
mixins: [resize], |
|
||||
data() { |
|
||||
return { |
|
||||
loading: false, |
|
||||
JMRSLvalue: null, |
|
||||
DNTvalue: null, |
|
||||
SICHvalue: 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 { |
|
||||
//RSL 静脉溶栓率 |
|
||||
await queryJmrs(this.queryParams).then((res) => { |
|
||||
this.JMRSLvalue = res.data; |
|
||||
console.log("this.JMRSLvalue: ", this.JMRSLvalue); |
|
||||
this.columnar(); |
|
||||
}); |
|
||||
//DNT |
|
||||
await queryDntResult(this.queryParams).then((res) => { |
|
||||
this.DNTvalue = res.data; |
|
||||
console.log("this.DNTvalue: ", this.DNTvalue); |
|
||||
this.lineDNT(); |
|
||||
}); |
|
||||
// //数据对比 |
|
||||
await querySichResult(this.queryParams).then((res) => { |
|
||||
this.SICHvalue = res.data; |
|
||||
this.LineSICH(); |
|
||||
}); |
|
||||
|
|
||||
this.LineJM(); |
<script> |
||||
this.columnar(); |
import * as echarts from "echarts"; |
||||
this.lineDNT(); |
require("echarts/theme/macarons"); // echarts theme |
||||
this.LineSICH(); |
import resize from "@/views/dashboard/mixins/resize"; |
||||
this.loading = false; |
import { |
||||
} catch (e) {} |
zlInfo |
||||
}, |
} from "@/api/indexCom.js"; |
||||
// 静脉溶栓率` 数据对比 |
import { |
||||
LineJM() { |
diagnoseEcharts, |
||||
JMSJDB.series[0].data = this.JMRSLvalue?.map((item) => { |
systemEcharts, |
||||
return item.gailv; |
physiqueEcharts, |
||||
}); |
postureEcharts |
||||
JMSJDB.series[1].data = this.JMRSLvalue?.map((item) => { |
} from "./index"; |
||||
return item.total; |
export default { |
||||
}); |
name: "Post", |
||||
JMSJDB.xAxis[0].data = this.JMRSLvalue?.map((item) => { |
props: ["title"], |
||||
return item.date; //X轴 |
mixins: [resize], |
||||
}); |
data() { |
||||
this.$nextTick(() => { |
return { |
||||
// 基于准备好的dom，初始化echarts实例 |
queryParams: { |
||||
var myChart = echarts.init(document.getElementById("JMy"), null, { |
param: { |
||||
height: 300, |
startTime: "", |
||||
}); |
endTime: "", |
||||
myChart.setOption(JMSJDB, true); |
}, |
||||
myChart.resize(); |
}, |
||||
window.onresize = myChart.resize; |
loading: false, |
||||
}); |
diagnoseValue: null, // 病种 |
||||
}, |
systemValue: null, // 体系 |
||||
// 静脉溶栓率 |
physiqueValue: null, // 体质 |
||||
columnar() { |
postureValue:null, // 体态 |
||||
JMRSL.series[0].data = this.JMRSLvalue?.map((item) => { |
|
||||
return item.decimal; |
// 体系中文 |
||||
}); |
systemObj: { |
||||
JMRSL.xAxis.data = this.JMRSLvalue?.map((item) => { |
"yxfpz": "隐形肥胖型", //隐形肥胖型 |
||||
return item.date; |
"zfgdx": "脂肪过多型", //脂肪过多型 |
||||
}); |
"fpx": "肥胖型", //肥胖型 |
||||
JMRSL.series[0].data = this.JMRSLvalue?.map((item) => { |
"jrbzx": "肌肉不足型", //肌肉不足型 |
||||
return item.decimal; |
"jkjcx": "健康匀称型", //健康匀称型 |
||||
}); |
"czjrx": "超重肌肉型", //超重肌肉型 |
||||
this.$nextTick(() => { |
"xsx": "消瘦型", //消瘦型 |
||||
// 基于准备好的dom，初始化echarts实例 |
"dzfx": "低脂肪型", //低脂肪型 |
||||
var myChart = echarts.init(document.getElementById("JMz"), null, { |
"ydyx": "运动员型", //运动员型 |
||||
height: 300, |
}, |
||||
}); |
// 体质 |
||||
myChart.setOption(JMRSL, true); |
physiqueObj: { |
||||
myChart.resize(); |
"phz": "平和质", //平和质 |
||||
window.onresize = myChart.resize; |
"qxz": "气虚质", //气虚质 |
||||
}); |
"yangxz": "阳虚质", //阳虚质 |
||||
}, |
"yinxz": "阴虚质", //阴虚质 |
||||
lineDNT() { |
"tsz": "痰湿质", //痰湿质 |
||||
DNT.series[0].data = this.DNTvalue?.map((item) => { |
"srz": "湿热质", //湿热质 |
||||
return item.dy45; //≤45 |
"xyz": "血瘀质", //血瘀质 |
||||
}); |
"qyz": "气郁质", //气郁质 |
||||
DNT.series[1].data = this.DNTvalue?.map((item) => { |
"tlz": "特禀质", //特禀质 |
||||
return item.dy60; //≤60 |
}, |
||||
}); |
}; |
||||
DNT.series[2].data = this.DNTvalue?.map((item) => { |
}, |
||||
return item.other; //>60 |
created() { |
||||
}); |
// this.Linepatient(); |
||||
DNT.xAxis.data = this.DNTvalue?.map((item) => { |
this.getData(); |
||||
return item.date; //X轴 |
}, |
||||
}); |
methods: { |
||||
this.$nextTick(() => { |
statistics(_data, _type) { |
||||
// 基于准备好的dom，初始化echarts实例 |
this.initial(_data, _type); // 处理数据 |
||||
var myChart = echarts.init(document.getElementById("DNT"), null, { |
this.loading = true; |
||||
height: 300, |
this.getData(); // 获取数据 |
||||
}); |
}, |
||||
myChart.setOption(DNT, true); |
//患者信息 |
||||
myChart.resize(); |
async getData() { |
||||
window.onresize = myChart.resize; |
try { |
||||
}); |
await zlInfo(this.queryParams).then((res) => { |
||||
}, |
const { |
||||
LineSICH() { |
jlfb, |
||||
SICH.series[0].data = this.SICHvalue?.map((item) => { |
smfb, |
||||
return item.decimal; //≤45 |
sort, |
||||
}); |
ttfb, |
||||
SICH.xAxis[0].data = this.SICHvalue?.map((item) => { |
txfb, |
||||
return item.time; //X轴 |
zytz |
||||
}); |
} = res.data |
||||
this.$nextTick(() => { |
// 病种（主要诊断） |
||||
// 基于准备好的dom，初始化echarts实例 |
this.diagnoseValue = sort.sort((a, b) => a.total - b.total) |
||||
var myChart = echarts.init(document.getElementById("sICH"), null, { |
this.handleDiagnose() |
||||
height: 300, |
// 体系 |
||||
}); |
this.systemValue = [] |
||||
myChart.setOption(SICH, true); |
delete txfb.total |
||||
myChart.resize(); |
for (let key in txfb) { |
||||
window.onresize = myChart.resize; |
let data = { |
||||
}); |
name: this.systemObj[key], |
||||
}, |
value: txfb[key] |
||||
// 数据处理 查询类型判断参数 |
} |
||||
initial(_data, _type) { |
this.systemValue.push(data) |
||||
_data[0] = this.$moment(_data[0]).format("YYYY-MM-DD"); |
} |
||||
_data[1] = this.$moment(_data[1]).format("YYYY-MM-DD"); |
this.handleSystem() |
||||
this.queryParams.param = { |
// 体质 |
||||
timeType: _type, |
this.physiqueValue = [] |
||||
startTime: _data[0] + " " + "00:00:00", |
delete zytz.total |
||||
endTime: _data[1] + " " + "23:59:59", |
for (let key in zytz) { |
||||
}; |
let data = { |
||||
}, |
name: this.physiqueObj[key], |
||||
// 重新渲染图标 |
value: zytz[key], |
||||
getRenew() { |
} |
||||
this.LineJM(); |
this.physiqueValue.push(data) |
||||
this.columnar(); |
} |
||||
this.lineDNT(); |
this.handlePhysique() |
||||
this.LineSICH(); |
// 体态 |
||||
}, |
this.postureValue = [{ |
||||
}, |
value: ttfb.score1, |
||||
}; |
name: "1分" |
||||
|
},{ |
||||
|
value: ttfb.score2, |
||||
|
name: "2分" |
||||
|
},{ |
||||
|
value: ttfb.score3, |
||||
|
name: "3分" |
||||
|
},{ |
||||
|
value: ttfb.score4, |
||||
|
name: "4分" |
||||
|
},{ |
||||
|
value: ttfb.score5, |
||||
|
name: "5分" |
||||
|
}] |
||||
|
this.handlePosture() |
||||
|
}); |
||||
|
this.loading = false; |
||||
|
} catch (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", |
||||
|
}; |
||||
|
}, |
||||
|
// 重新渲染图标 |
||||
|
getRenew() { |
||||
|
this.Linepatient(); |
||||
|
this.columnar(); |
||||
|
}, |
||||
|
}, |
||||
|
}; |
||||
</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 { |
|
||||
display: flex; |
.dis { |
||||
} |
display: flex; |
||||
.header-title { |
} |
||||
font-size: 18px; |
|
||||
} |
.header-title { |
||||
.title-box { |
font-size: 18px; |
||||
padding: 10px 20px; |
} |
||||
border-bottom: 1px solid #dfe6ec; |
|
||||
} |
.title-box { |
||||
.dian-box { |
padding: 10px 20px; |
||||
align-items: center; |
border-bottom: 1px solid #dfe6ec; |
||||
} |
} |
||||
.dian { |
|
||||
display: inline-block; |
.dian-box { |
||||
width: 16px; |
align-items: center; |
||||
height: 16px; |
} |
||||
border-radius: 50%; |
|
||||
margin: 0 10px; |
.dian { |
||||
} |
display: inline-block; |
||||
.title-box { |
width: 16px; |
||||
justify-content: space-between; |
height: 16px; |
||||
} |
border-radius: 50%; |
||||
. >>> .el-radio--small.is-bordered { |
margin: 0 10px; |
||||
margin-right: 20px !important; |
} |
||||
margin-left: 0 !important; |
|
||||
} |
.title-box { |
||||
>>> .el-radio__input { |
justify-content: space-between; |
||||
display: none; |
} |
||||
} |
|
||||
>>> .el-radio__label { |
.>>>.el-radio--small.is-bordered { |
||||
padding-left: 5px; |
margin-right: 20px !important; |
||||
} |
margin-left: 0 !important; |
||||
.app-container { |
} |
||||
padding: 0; |
|
||||
} |
>>>.el-radio__input { |
||||
.title1 { |
display: none; |
||||
display: flex; |
} |
||||
align-items: center; |
|
||||
font-size: 20px; |
>>>.el-radio__label { |
||||
font-weight: 600; |
padding-left: 5px; |
||||
} |
} |
||||
.title-bor { |
|
||||
display: inline-block; |
.app-container { |
||||
height: 20px; |
padding: 0; |
||||
width: 6px; |
display: flex; |
||||
background: #4f8bff; |
justify-content: space-between; |
||||
margin-right: 10px; |
} |
||||
border-radius: 8px; |
|
||||
} |
.title { |
||||
</style> |
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> |
||||
Loading…
Reference in new issue