|
|
|
@ -1,86 +1,108 @@ |
|
|
|
<template> |
|
|
|
<div> |
|
|
|
<div class="app-container"> |
|
|
|
<div class="dis" style="width: 100%"> |
|
|
|
<div style="flex: 1; margin-right: 20px; min-width: 600px"> |
|
|
|
<div style="flex: 1; margin-right: 20px"> |
|
|
|
<el-card shadow="always"> |
|
|
|
<div class="dis title-box"> |
|
|
|
<span class="header-title">病例统计</span> |
|
|
|
<span class="header-title">患者总数</span> |
|
|
|
<div class="dis"></div> |
|
|
|
</div> |
|
|
|
<!-- 患者总数统计图 --> |
|
|
|
<div style="height: 300px" v-loading="loading"> |
|
|
|
<div id="patienty" 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 class="dian-box dis"> |
|
|
|
<div class="dian-box dis"> |
|
|
|
<span class="dian" style="background: #4f8bff"></span> |
|
|
|
仅溶栓人数 |
|
|
|
男 |
|
|
|
</div> |
|
|
|
<span class="dian" style="background: #ffcd6c"></span> |
|
|
|
仅介入人数 |
|
|
|
<span class="dian" style="background: #fe4943"></span> |
|
|
|
女 |
|
|
|
</div> |
|
|
|
<div class="dian-box dis"> |
|
|
|
<span class="dian" style="background: #00d1a1"></span> |
|
|
|
未溶栓且未介入人数 |
|
|
|
</div> |
|
|
|
<div class="dian-box dis"> |
|
|
|
<span class="dian" style="background: #a794fe"></span> |
|
|
|
溶栓+介入人数 |
|
|
|
</div> |
|
|
|
<!-- 性别统计图 --> |
|
|
|
<div style="height: 300px" v-loading="loading"> |
|
|
|
<div id="gender" 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> |
|
|
|
</div> |
|
|
|
<!-- 患者总数统计图 --> |
|
|
|
<div style="height: 300px" v-loading="loading"> |
|
|
|
<div id="patienty" style="width: 100%"></div> |
|
|
|
<div id="age" style="width: 100%"></div> |
|
|
|
</div> |
|
|
|
</el-card> |
|
|
|
</div> |
|
|
|
<div style="flex: 2; min-width: 610px"> |
|
|
|
<div style="flex: 1"> |
|
|
|
<el-card shadow="always"> |
|
|
|
<div class="dis title-box"> |
|
|
|
<span class="header-title">数据对比 </span> |
|
|
|
<span class="header-title">性别统计</span> |
|
|
|
<div class="dis"> |
|
|
|
<div class="dian-box dis"> |
|
|
|
<div class="dian-box dis"> |
|
|
|
<span class="dian" style="background: #4f8bff"></span> |
|
|
|
仅溶栓人数 |
|
|
|
男 |
|
|
|
</div> |
|
|
|
<span class="dian" style="background: #ffcd6c"></span> |
|
|
|
仅介入人数 |
|
|
|
</div> |
|
|
|
<div class="dian-box dis"> |
|
|
|
<span class="dian" style="background: #00d1a1"></span> |
|
|
|
未溶栓且未介入人数 |
|
|
|
女 |
|
|
|
</div> |
|
|
|
<div class="dian-box dis"> |
|
|
|
<span class="dian" style="background: #a794fe"></span> |
|
|
|
溶栓+介入人数 |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<!-- 统计图 --> |
|
|
|
<!-- 性别统计图 --> |
|
|
|
<div style="height: 300px" v-loading="loading"> |
|
|
|
<div id="patientz" style="width: 100%"></div> |
|
|
|
<!-- <div id="gender" 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 { queryPatient, queryByDatePatient } from "@/api/indexCom.js"; |
|
|
|
import { HZXX, HZXXSJFX } from "./index"; |
|
|
|
export default { |
|
|
|
import * as echarts from "echarts"; |
|
|
|
require("echarts/theme/macarons"); // echarts theme |
|
|
|
import resize from "@/views/dashboard/mixins/resize"; |
|
|
|
import { |
|
|
|
patientTotal, |
|
|
|
queryByDatePatient |
|
|
|
} from "@/api/indexCom.js"; |
|
|
|
import { |
|
|
|
HZXX, |
|
|
|
HZXXSJFX, |
|
|
|
gende, |
|
|
|
ageEcharts |
|
|
|
} from "./index"; |
|
|
|
export default { |
|
|
|
name: "Post", |
|
|
|
props: ["title"], |
|
|
|
mixins: [resize], |
|
|
|
data() { |
|
|
|
return { |
|
|
|
loading: false, |
|
|
|
HZXXvalue: null, |
|
|
|
SJDBvalue: null, |
|
|
|
HZXXvalue: null, // 患者总数统计值 |
|
|
|
gendeValue: null, // 性别统计值 |
|
|
|
ageValue: null, // 年龄统计值 |
|
|
|
queryParams: { |
|
|
|
param: { |
|
|
|
timeType: 4, |
|
|
|
startTime: "", |
|
|
|
endTime: "", |
|
|
|
}, |
|
|
|
@ -89,7 +111,7 @@ export default { |
|
|
|
}, |
|
|
|
created() { |
|
|
|
// this.Linepatient() |
|
|
|
// this.getData(); |
|
|
|
this.getData(); |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
statistics(_data, _type) { |
|
|
|
@ -97,18 +119,34 @@ export default { |
|
|
|
this.loading = true; |
|
|
|
this.getData(); // 获取数据 |
|
|
|
}, |
|
|
|
// 查询 |
|
|
|
//患者信息 |
|
|
|
async getData() { |
|
|
|
try { |
|
|
|
//患者信息 |
|
|
|
await queryPatient(this.queryParams).then((res) => { |
|
|
|
this.HZXXvalue = res.data; |
|
|
|
this.Linepatient(); |
|
|
|
}); |
|
|
|
//数据对比 |
|
|
|
await queryByDatePatient(this.queryParams).then((res) => { |
|
|
|
this.SJDBvalue = res.data.list; |
|
|
|
this.columnar(); |
|
|
|
await patientTotal(this.queryParams).then((res) => { |
|
|
|
// 患者总数统计图 |
|
|
|
this.HZXXvalue = [{ |
|
|
|
value: res.data.totalPatients, |
|
|
|
name: "患者总数" |
|
|
|
}, ]; |
|
|
|
// 性别分析图 |
|
|
|
this.gendeValue = [{ |
|
|
|
value: res.data.totalPatients, |
|
|
|
name: "男" |
|
|
|
}, |
|
|
|
{ |
|
|
|
value: res.data.totalPatients, |
|
|
|
name: "女" |
|
|
|
}, |
|
|
|
]; |
|
|
|
// 年龄分布 |
|
|
|
let ageValue = res.data.age |
|
|
|
this.ageValue = [ageValue.num1, ageValue.num2, ageValue.num2, ageValue.num4, ageValue |
|
|
|
.num5, ageValue.num6 |
|
|
|
] |
|
|
|
this.Linepatient(); // 患者总数 |
|
|
|
this.handleAge(); // 年龄 |
|
|
|
this.columnar(); //性别分析图 |
|
|
|
|
|
|
|
}); |
|
|
|
this.loading = false; |
|
|
|
} catch (e) {} |
|
|
|
@ -116,22 +154,9 @@ export default { |
|
|
|
|
|
|
|
// 患者信息 |
|
|
|
Linepatient() { |
|
|
|
HZXX.title.text = this.HZXXvalue?.total; |
|
|
|
HZXX.series[0].data = [ |
|
|
|
{ value: this.HZXXvalue?.onlyRs, name: "仅溶栓人数", roundCap: true }, |
|
|
|
{ |
|
|
|
value: this.HZXXvalue?.onlyXgzl, |
|
|
|
name: "仅介入人数", |
|
|
|
roundCap: true, |
|
|
|
}, |
|
|
|
{ value: this.HZXXvalue?.neither, name: "未溶栓且未介入人数" }, |
|
|
|
{ value: this.HZXXvalue?.both, name: "溶栓+介入人数" }, |
|
|
|
// { value: 200, name: "仅溶栓人数", roundCap: true }, |
|
|
|
// { value: 150, name: "血管内治疗人数", roundCap: true }, |
|
|
|
// { value: 100, name: "未溶栓人数" }, |
|
|
|
]; |
|
|
|
HZXX.title.text = this.HZXXvalue[0].value; |
|
|
|
HZXX.series[0].data = this.HZXXvalue; |
|
|
|
this.$nextTick(() => { |
|
|
|
// 基于准备好的dom，初始化echarts实例 |
|
|
|
var myChart = echarts.init(document.getElementById("patienty"), null, { |
|
|
|
height: 300, |
|
|
|
}); |
|
|
|
@ -140,40 +165,42 @@ export default { |
|
|
|
window.onresize = myChart.resize; |
|
|
|
}); |
|
|
|
}, |
|
|
|
// 患者信息 - 数据分析 |
|
|
|
// 性别分析图 |
|
|
|
columnar() { |
|
|
|
HZXXSJFX.series[0].data = this.SJDBvalue?.map((item) => { |
|
|
|
return item.onlyRs; //仅溶栓人数 |
|
|
|
}); |
|
|
|
HZXXSJFX.series[1].data = this.SJDBvalue?.map((item) => { |
|
|
|
return item.onlyXgzl; //仅介入人数 |
|
|
|
}); |
|
|
|
HZXXSJFX.series[2].data = this.SJDBvalue?.map((item) => { |
|
|
|
return item.neither; //未溶栓且未介入人数 |
|
|
|
}); |
|
|
|
HZXXSJFX.series[3].data = this.SJDBvalue?.map((item) => { |
|
|
|
return item.both; //溶栓+介入人数 |
|
|
|
gende.series[0].data = this.gendeValue; |
|
|
|
this.$nextTick(() => { |
|
|
|
var myChart = echarts.init(document.getElementById("gender"), null, { |
|
|
|
height: 300, |
|
|
|
}); |
|
|
|
HZXXSJFX.xAxis.data = this.SJDBvalue?.map((item) => { |
|
|
|
return item.date; //X轴 |
|
|
|
myChart.setOption(gende, true); |
|
|
|
myChart.resize(); |
|
|
|
window.onresize = myChart.resize; |
|
|
|
}); |
|
|
|
}, |
|
|
|
handleAge() { |
|
|
|
console.log('ageEcharts',ageEcharts) |
|
|
|
ageEcharts.series[0].data = [this.ageValue[0]] |
|
|
|
ageEcharts.series[1].data = [this.ageValue[1]] |
|
|
|
ageEcharts.series[2].data = [this.ageValue[2]] |
|
|
|
ageEcharts.series[3].data = [this.ageValue[3]] |
|
|
|
ageEcharts.series[4].data = [this.ageValue[4]] |
|
|
|
ageEcharts.series[5].data = [this.ageValue[5]] |
|
|
|
|
|
|
|
this.$nextTick(() => { |
|
|
|
// 基于准备好的dom，初始化echarts实例 |
|
|
|
var myChart = echarts.init(document.getElementById("patientz"), null, { |
|
|
|
var myChart = echarts.init(document.getElementById("age"), null, { |
|
|
|
height: 300, |
|
|
|
}); |
|
|
|
myChart.setOption(HZXXSJFX, true); |
|
|
|
myChart.setOption(ageEcharts, true); |
|
|
|
myChart.resize(); |
|
|
|
window.onresize = myChart.resize; |
|
|
|
}); |
|
|
|
}, |
|
|
|
// 数据处理 查询类型判断参数 |
|
|
|
initial(_data, _type) { |
|
|
|
console.log("_data, _type: ", _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", |
|
|
|
}; |
|
|
|
@ -184,63 +211,75 @@ export default { |
|
|
|
this.columnar(); |
|
|
|
}, |
|
|
|
}, |
|
|
|
}; |
|
|
|
}; |
|
|
|
</script> |
|
|
|
<style scoped src="@/assets/styles/common.css"></style> |
|
|
|
<style scoped> |
|
|
|
>>> .el-card__body { |
|
|
|
>>>.el-card__body { |
|
|
|
padding: 10px 0 !important; |
|
|
|
} |
|
|
|
.dis { |
|
|
|
} |
|
|
|
|
|
|
|
.dis { |
|
|
|
display: flex; |
|
|
|
} |
|
|
|
.header-title { |
|
|
|
} |
|
|
|
|
|
|
|
.header-title { |
|
|
|
font-size: 18px; |
|
|
|
} |
|
|
|
.title-box { |
|
|
|
} |
|
|
|
|
|
|
|
.title-box { |
|
|
|
padding: 10px 20px; |
|
|
|
border-bottom: 1px solid #dfe6ec; |
|
|
|
} |
|
|
|
.dian-box { |
|
|
|
} |
|
|
|
|
|
|
|
.dian-box { |
|
|
|
align-items: center; |
|
|
|
} |
|
|
|
.dian { |
|
|
|
} |
|
|
|
|
|
|
|
.dian { |
|
|
|
display: inline-block; |
|
|
|
width: 16px; |
|
|
|
height: 16px; |
|
|
|
border-radius: 50%; |
|
|
|
margin: 0 10px; |
|
|
|
} |
|
|
|
.title-box { |
|
|
|
} |
|
|
|
|
|
|
|
.title-box { |
|
|
|
justify-content: space-between; |
|
|
|
} |
|
|
|
. >>> .el-radio--small.is-bordered { |
|
|
|
} |
|
|
|
|
|
|
|
.>>>.el-radio--small.is-bordered { |
|
|
|
margin-right: 20px !important; |
|
|
|
margin-left: 0 !important; |
|
|
|
} |
|
|
|
>>> .el-radio__input { |
|
|
|
} |
|
|
|
|
|
|
|
>>>.el-radio__input { |
|
|
|
display: none; |
|
|
|
} |
|
|
|
>>> .el-radio__label { |
|
|
|
} |
|
|
|
|
|
|
|
>>>.el-radio__label { |
|
|
|
padding-left: 5px; |
|
|
|
} |
|
|
|
.app-container { |
|
|
|
} |
|
|
|
|
|
|
|
.app-container { |
|
|
|
padding: 0; |
|
|
|
display: flex; |
|
|
|
justify-content: space-between; |
|
|
|
} |
|
|
|
.title { |
|
|
|
} |
|
|
|
|
|
|
|
.title { |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
font-size: 20px; |
|
|
|
font-weight: 600; |
|
|
|
} |
|
|
|
.title-bor { |
|
|
|
} |
|
|
|
|
|
|
|
.title-bor { |
|
|
|
display: inline-block; |
|
|
|
height: 20px; |
|
|
|
width: 6px; |
|
|
|
background: #4f8bff; |
|
|
|
margin-right: 10px; |
|
|
|
border-radius: 8px; |
|
|
|
} |
|
|
|
} |
|
|
|
</style> |
1747191978@qq.com
4 months ago