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.
886 lines
21 KiB
886 lines
21 KiB
<template>
|
|
<div class="statistics">
|
|
<div class="statistics-container">
|
|
<div class="sta-row">
|
|
<div class="sta-row-head">
|
|
<div class="sta-row-title">
|
|
<img src="@/assets/images/slice/title-line.png" alt="" />
|
|
<span class="sta-row-text">病历统计</span>
|
|
</div>
|
|
<div class="sta-row-filter">
|
|
<a-radio-group v-model="queryParams1.timeType" @change="typeChange($event, 'queryParams1')">
|
|
<a-radio-button value="0">周</a-radio-button>
|
|
<a-radio-button value="1">月</a-radio-button>
|
|
<a-radio-button value="2">季</a-radio-button>
|
|
<a-radio-button value="3">年</a-radio-button>
|
|
</a-radio-group>
|
|
<a-range-picker format="YYYY-MM-DD" style="width: 280px;" :placeholder="['开始日期','结束日期']"
|
|
separator="至" @change="dateChange($event, 'queryParams1')" />
|
|
</div>
|
|
</div>
|
|
<div class="sta-row-echart">
|
|
<a-row :gutter="[16,16]">
|
|
<a-col :span="12">
|
|
<div class="echarts-box" ref="blboxl"></div>
|
|
</a-col>
|
|
<a-col :span="12">
|
|
<div class="echarts-box" ref="blboxr"></div>
|
|
</a-col>
|
|
</a-row>
|
|
</div>
|
|
</div>
|
|
<div class="sta-row">
|
|
<div class="sta-row-head">
|
|
<div class="sta-row-title">
|
|
<img src="@/assets/images/slice/title-line.png" alt="" />
|
|
<span class="sta-row-text">静脉溶栓统计</span>
|
|
</div>
|
|
<div class="sta-row-filter">
|
|
<a-radio-group v-model="queryParams2.timeType" @change="typeChange($event, 'queryParams2')">
|
|
<a-radio-button value="0">周</a-radio-button>
|
|
<a-radio-button value="1">月</a-radio-button>
|
|
<a-radio-button value="2">季</a-radio-button>
|
|
<a-radio-button value="3">年</a-radio-button>
|
|
</a-radio-group>
|
|
<a-range-picker format="YYYY-MM-DD" style="width: 280px;" :placeholder="['开始日期','结束日期']"
|
|
separator="至" @change="dateChange($event, 'queryParams2')" />
|
|
</div>
|
|
</div>
|
|
<div class="sta-row-echart">
|
|
<a-row :gutter="[16,16]">
|
|
<a-col :span="12">
|
|
<div class="echarts-box" ref="jmrsboxlt"></div>
|
|
</a-col>
|
|
<a-col :span="12">
|
|
<div class="echarts-box" ref="jmrsboxrt"></div>
|
|
</a-col>
|
|
<a-col :span="12">
|
|
<div class="echarts-box" ref="jmrsboxlb"></div>
|
|
</a-col>
|
|
<a-col :span="12">
|
|
<div class="echarts-box" ref="jmrsboxrb"></div>
|
|
</a-col>
|
|
</a-row>
|
|
</div>
|
|
</div>
|
|
<div class="sta-row">
|
|
<div class="sta-row-head">
|
|
<div class="sta-row-title">
|
|
<img src="@/assets/images/slice/title-line.png" alt="" />
|
|
<span class="sta-row-text">血管内治疗统计</span>
|
|
</div>
|
|
<div class="sta-row-filter">
|
|
<a-radio-group v-model="queryParams3.timeType" @change="typeChange($event, 'queryParams3')">
|
|
<a-radio-button value="0">周</a-radio-button>
|
|
<a-radio-button value="1">月</a-radio-button>
|
|
<a-radio-button value="2">季</a-radio-button>
|
|
<a-radio-button value="3">年</a-radio-button>
|
|
</a-radio-group>
|
|
<a-range-picker format="YYYY-MM-DD" style="width: 280px;" :placeholder="['开始日期','结束日期']"
|
|
separator="至" @change="dateChange($event, 'queryParams3')" />
|
|
</div>
|
|
</div>
|
|
<div class="sta-row-echart">
|
|
<a-row :gutter="[16,16]">
|
|
<a-col :span="12">
|
|
<div class="echarts-box" ref="xgnboxlt"></div>
|
|
</a-col>
|
|
<a-col :span="12">
|
|
<div class="echarts-box" ref="xgnboxrt"></div>
|
|
</a-col>
|
|
<a-col :span="12">
|
|
<div class="echarts-box" ref="xgnboxlb"></div>
|
|
</a-col>
|
|
<a-col :span="12">
|
|
<div class="echarts-box" ref="xgnboxrb"></div>
|
|
</a-col>
|
|
</a-row>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
queryRptResult,
|
|
queryDptResult,
|
|
selectXgzl,
|
|
// queryDptResult,
|
|
querySichResult,
|
|
queryDntResult,
|
|
queryJmrs,
|
|
queryJmrsResult,
|
|
queryByDatePatient,
|
|
queryPatient,
|
|
} from 'api';
|
|
import * as echarts from 'echarts'
|
|
import * as dayjs from 'dayjs'
|
|
export default {
|
|
name: 'Statistics',
|
|
data() {
|
|
return {
|
|
queryParams1: {
|
|
"timeType":"0", //统计方式 0:周 1:月 2:季 3:年
|
|
"startTime":"2024-10-01 00:00:00", //开始时间
|
|
"endTime":"2025-01-01 00:00:00" //结束时间
|
|
},
|
|
queryParams2: {
|
|
"timeType":"0", //统计方式 0:周 1:月 2:季 3:年
|
|
"startTime":"2024-10-01 00:00:00", //开始时间
|
|
"endTime":"2025-01-01 00:00:00" //结束时间
|
|
},
|
|
queryParams3: {
|
|
"timeType":"0", //统计方式 0:周 1:月 2:季 3:年
|
|
"startTime":"2024-10-01 00:00:00", //开始时间
|
|
"endTime":"2025-01-01 00:00:00" //结束时间
|
|
}
|
|
}
|
|
},
|
|
mounted() {
|
|
// queryRptResult({
|
|
// param: {
|
|
// "timeType":"0", //统计方式 0:周 1:月 2:季 3:年
|
|
// "startTime":"2024-10-01 00:00:00", //开始时间
|
|
// "endTime":"2025-01-01 00:00:00" //结束时间
|
|
// }
|
|
// })
|
|
|
|
// queryDptResult({
|
|
// param: {
|
|
// "timeType":"0", //统计方式 0:周 1:月 2:季 3:年
|
|
// "startTime":"2024-10-01 00:00:00", //开始时间
|
|
// "endTime":"2025-01-01 00:00:00" //结束时间
|
|
// }
|
|
// })
|
|
// selectXgzl({
|
|
// param: {
|
|
// "timeType":"0", //统计方式 0:周 1:月 2:季 3:年
|
|
// "startTime":"2024-10-01 00:00:00", //开始时间
|
|
// "endTime":"2025-01-01 00:00:00" //结束时间
|
|
// }
|
|
// })
|
|
// querySichResult({
|
|
// param: {
|
|
// "timeType":"0", //统计方式 0:周 1:月 2:季 3:年
|
|
// "startTime":"2024-10-01 00:00:00", //开始时间
|
|
// "endTime":"2025-01-01 00:00:00" //结束时间
|
|
// }
|
|
// })
|
|
// queryDntResult({
|
|
// param: {
|
|
// "timeType":"0", //统计方式 0:周 1:月 2:季 3:年
|
|
// "startTime":"2024-10-01 00:00:00", //开始时间
|
|
// "endTime":"2025-01-01 00:00:00" //结束时间
|
|
// }
|
|
// })
|
|
// queryJmrs({
|
|
// param: {
|
|
// "timeType":"0", //统计方式 0:周 1:月 2:季 3:年
|
|
// "startTime":"2024-10-01 00:00:00", //开始时间
|
|
// "endTime":"2025-01-01 00:00:00" //结束时间
|
|
// }
|
|
// })
|
|
// queryJmrsResult({
|
|
// param: {
|
|
// "timeType":"0", //统计方式 0:周 1:月 2:季 3:年
|
|
// "startTime":"2024-10-01 00:00:00", //开始时间
|
|
// "endTime":"2025-01-01 00:00:00" //结束时间
|
|
// }
|
|
// })
|
|
// queryByDatePatient({
|
|
// param: {
|
|
// "timeType":"0", //统计方式 0:周 1:月 2:季 3:年
|
|
// "startTime":"2024-10-01 00:00:00", //开始时间
|
|
// "endTime":"2025-01-01 00:00:00" //结束时间
|
|
// }
|
|
// })
|
|
// queryPatient({
|
|
// param: {
|
|
// "timeType":"0", //统计方式 0:周 1:月 2:季 3:年
|
|
// "startTime":"2024-10-01 00:00:00", //开始时间
|
|
// "endTime":"2025-01-01 00:00:00" //结束时间
|
|
// }
|
|
// })
|
|
this.init()
|
|
},
|
|
methods: {
|
|
init(filed){
|
|
switch(filed)
|
|
{
|
|
case "queryParams1":
|
|
this.getData1()
|
|
this.getData2()
|
|
break;
|
|
case "queryParams2":
|
|
this.getData3()
|
|
this.getData4()
|
|
this.getData5()
|
|
this.getData6()
|
|
break;
|
|
case "queryParams3":
|
|
this.getData7()
|
|
this.getData8()
|
|
this.getData9()
|
|
this.getData10()
|
|
break;
|
|
default:
|
|
this.getData1()
|
|
this.getData2()
|
|
this.getData3()
|
|
this.getData4()
|
|
this.getData5()
|
|
this.getData6()
|
|
this.getData7()
|
|
this.getData8()
|
|
this.getData9()
|
|
this.getData10()
|
|
break;
|
|
}
|
|
|
|
|
|
|
|
},
|
|
typeChange(e, filed){
|
|
this[filed]['timeType'] = e.target.value
|
|
this.init(filed)
|
|
},
|
|
dateChange(dates,filed){
|
|
const startTime = dates[0].format('YYYY-MM-DD HH:mm:ss')
|
|
const endTime = dates[1].format('YYYY-MM-DD HH:mm:ss')
|
|
this[filed]['startTime'] = startTime
|
|
this[filed]['endTime'] = endTime
|
|
this.init(filed)
|
|
},
|
|
// 病历统计- 病历统计
|
|
async getData1() {
|
|
const res = await queryPatient({param: this.queryParams1})
|
|
const { onlyRs = 0, onlyXgzl = 0, both = 0, neither = 0} = res.data
|
|
var series = [{
|
|
value: onlyRs,
|
|
name: '仅溶栓人数'
|
|
},
|
|
{
|
|
value: onlyXgzl,
|
|
name: '仅介入人数'
|
|
},
|
|
{
|
|
value: both,
|
|
name: '溶栓且介入人数'
|
|
},
|
|
{
|
|
value: neither,
|
|
name: '未溶栓且未介入人数'
|
|
}
|
|
]
|
|
|
|
var chartDom = this.$refs.blboxl
|
|
var myChart = echarts.init(chartDom);
|
|
var option = {
|
|
title: {
|
|
text: '病历统计',
|
|
left: 'left'
|
|
},
|
|
color: ['#6F7FF6', '#F3D37C', '#5AD0A5', '#008660'],
|
|
legend: {
|
|
bottom: 0,
|
|
left: 'left'
|
|
},
|
|
series: [{
|
|
name: '病历统计',
|
|
type: 'pie',
|
|
avoidLabelOverlap: false,
|
|
label: {
|
|
show: false,
|
|
position: 'center'
|
|
},
|
|
itemStyle: {
|
|
borderColor: '#fff',
|
|
borderWidth: 2
|
|
},
|
|
radius: ['5%', '70%'],
|
|
data: series
|
|
}]
|
|
};
|
|
|
|
option && myChart.setOption(option);
|
|
|
|
},
|
|
// 病历统计- 数据对比
|
|
async getData2() {
|
|
var chartDom = this.$refs.blboxr
|
|
var myChart = echarts.init(chartDom);
|
|
|
|
const res = await queryByDatePatient({param: this.queryParams1})
|
|
const {list = []} = res.data
|
|
|
|
var items = ['仅溶栓人数', '仅介入人数', '未溶栓且未介入人数', '溶栓且未介入人数']
|
|
|
|
var xdata = [];
|
|
var series = [];
|
|
|
|
const newlist = list.map(a => {
|
|
xdata.push(dayjs(a.time).format('YYYY-MM-DD'))
|
|
return { ...a, time: dayjs(a.time).format('YYYY-MM-DD') }
|
|
})
|
|
items.forEach(i => {
|
|
var item = {
|
|
name: i,
|
|
type: 'bar',
|
|
barWidth: 5,
|
|
data: [],
|
|
}
|
|
var filed = ""
|
|
if(i == '仅溶栓人数') filed = "onlyRs"
|
|
else if(i == '仅介入人数') filed = "onlyXgzl"
|
|
else if(i == '溶栓且介入人数') filed = "both"
|
|
else if(i == '未溶栓且未介入人数') filed = "neither"
|
|
newlist.forEach(a => {
|
|
var itemdata = {
|
|
value: a[filed],
|
|
itemStyle: {
|
|
borderRadius: [20, 20, 0, 0]
|
|
}
|
|
}
|
|
item.data.push(itemdata)
|
|
})
|
|
series.push(item)
|
|
})
|
|
|
|
var option = {
|
|
title: {
|
|
text: '数据对比',
|
|
left: 'left'
|
|
},
|
|
color: ['#6F7FF6', '#F3D37C', '#5AD0A5', '#008660'],
|
|
legend: {
|
|
bottom: 0,
|
|
left: 'left'
|
|
},
|
|
xAxis: [{
|
|
type: 'category',
|
|
data: xdata
|
|
}],
|
|
yAxis: [{
|
|
type: 'value'
|
|
}],
|
|
series: series
|
|
};
|
|
|
|
option && myChart.setOption(option);
|
|
},
|
|
// 静脉溶栓统计- 静脉溶栓率
|
|
async getData3() {
|
|
var chartDom = this.$refs.jmrsboxlt
|
|
var myChart = echarts.init(chartDom);
|
|
|
|
const res = await queryJmrs({param: this.queryParams2})
|
|
|
|
var xdata = [];
|
|
const newlist = res.data.map(a => {
|
|
xdata.push(dayjs(a.time).format('YYYY-MM-DD'))
|
|
return { ...a, time: dayjs(a.time).format('YYYY-MM-DD') }
|
|
})
|
|
|
|
var series = [{
|
|
name: "静脉溶栓率",
|
|
type: 'bar',
|
|
barWidth: 5,
|
|
data: newlist.map(a => ({
|
|
value: a['decimal'],
|
|
itemStyle: {
|
|
borderRadius: [20, 20, 0, 0]
|
|
}
|
|
}))
|
|
}];
|
|
|
|
var option = {
|
|
title: {
|
|
text: '静脉溶栓率',
|
|
left: 'left'
|
|
},
|
|
color: ['#6F7FF6', '#F3D37C', '#5AD0A5', '#008660'],
|
|
xAxis: [{
|
|
type: 'category',
|
|
data: xdata
|
|
}],
|
|
yAxis: [{
|
|
type: 'value'
|
|
}],
|
|
series: series
|
|
};
|
|
|
|
option && myChart.setOption(option);
|
|
},
|
|
// 静脉溶栓统计- 数据对比
|
|
async getData4() {
|
|
var chartDom = this.$refs.jmrsboxrt
|
|
var myChart = echarts.init(chartDom);
|
|
|
|
const res = await queryJmrs({param: this.queryParams2})
|
|
const list = res.data
|
|
var items = ['静脉溶栓人数', '急救特征人数']
|
|
|
|
var xdata = [];
|
|
var series = [];
|
|
|
|
const newlist = list.map(a => {
|
|
xdata.push(dayjs(a.time).format('YYYY-MM-DD'))
|
|
return { ...a, time: dayjs(a.time).format('YYYY-MM-DD') }
|
|
})
|
|
items.forEach(i => {
|
|
var item = {
|
|
type: 'line',
|
|
areaStyle: {},
|
|
data: [],
|
|
}
|
|
var filed = ""
|
|
if(i == '静脉溶栓人数') filed = "gailv"
|
|
else if(i == '急救特征人数') filed = "total"
|
|
newlist.forEach(a => {
|
|
var itemdata = {
|
|
value: a[filed],
|
|
itemStyle: {
|
|
borderRadius: [20, 20, 0, 0]
|
|
}
|
|
}
|
|
item.data.push(itemdata)
|
|
})
|
|
series.push(item)
|
|
})
|
|
|
|
var option = {
|
|
title: {
|
|
text: '数据对比',
|
|
left: 'left'
|
|
},
|
|
color: ['#008660', '#6F7FF6', '#F3D37C', '#5AD0A5'],
|
|
legend: {
|
|
left: 'right'
|
|
},
|
|
xAxis: [{
|
|
type: 'category',
|
|
data: xdata
|
|
}],
|
|
yAxis: [{
|
|
type: 'value'
|
|
}],
|
|
series: series
|
|
};
|
|
|
|
option && myChart.setOption(option);
|
|
},
|
|
// 静脉溶栓统计- sICH发生率
|
|
async getData5() {
|
|
var chartDom = this.$refs.jmrsboxlb
|
|
var myChart = echarts.init(chartDom);
|
|
const res = await querySichResult({param: this.queryParams2})
|
|
|
|
var xdata = [];
|
|
const newlist = res.data.map(a => {
|
|
xdata.push(dayjs(a.time).format('YYYY-MM-DD'))
|
|
return { ...a, time: dayjs(a.time).format('YYYY-MM-DD') }
|
|
})
|
|
|
|
var series = [{
|
|
type: 'line',
|
|
areaStyle: {},
|
|
data: newlist.map(a => ({
|
|
value: a['decimal'],
|
|
itemStyle: {
|
|
borderRadius: [20, 20, 0, 0]
|
|
}
|
|
}))
|
|
}];
|
|
|
|
var option = {
|
|
title: {
|
|
text: 'slCH发生率',
|
|
left: 'left'
|
|
},
|
|
color: ['#6F7FF6', '#F3D37C', '#5AD0A5', '#008660'],
|
|
legend: {
|
|
left: 'right'
|
|
},
|
|
xAxis: [{
|
|
type: 'category',
|
|
data: xdata
|
|
}],
|
|
yAxis: [{
|
|
type: 'value'
|
|
}],
|
|
series: series
|
|
};
|
|
|
|
option && myChart.setOption(option);
|
|
},
|
|
// 静脉溶栓统计- DNT分布
|
|
async getData6() {
|
|
var chartDom = this.$refs.jmrsboxrb
|
|
var myChart = echarts.init(chartDom);
|
|
|
|
const res = await queryDntResult({param: this.queryParams2})
|
|
var items = ['≤45min', '≤60min', '>60min']
|
|
var xdata = [];
|
|
var series = [];
|
|
const newlist = res.data.map(a => {
|
|
xdata.push(dayjs(a.time).format('YYYY-MM-DD'))
|
|
return { ...a, time: dayjs(a.time).format('YYYY-MM-DD') }
|
|
})
|
|
items.forEach(i => {
|
|
var item = {
|
|
name: i,
|
|
type: 'bar',
|
|
barWidth: 5,
|
|
data: [],
|
|
}
|
|
var filed = ""
|
|
if(i == '≤45min') filed = "dy45"
|
|
else if(i == '≤60min') filed = "dy60"
|
|
else if(i == '>60min') filed = "other"
|
|
newlist.forEach(a => {
|
|
var itemdata = {
|
|
value: a[filed],
|
|
itemStyle: {
|
|
borderRadius: [20, 20, 0, 0]
|
|
}
|
|
}
|
|
item.data.push(itemdata)
|
|
})
|
|
series.push(item)
|
|
})
|
|
|
|
var option = {
|
|
title: {
|
|
text: 'DNT分布',
|
|
left: 'left'
|
|
},
|
|
color: ['#6F7FF6', '#F3D37C', '#008660', '#5AD0A5'],
|
|
legend: {
|
|
left: 'right'
|
|
},
|
|
xAxis: [{
|
|
type: 'category',
|
|
data: xdata
|
|
}],
|
|
yAxis: [{
|
|
type: 'value'
|
|
}],
|
|
series: series
|
|
};
|
|
|
|
option && myChart.setOption(option);
|
|
},
|
|
// 血管内治疗统计- 血管内治疗率
|
|
async getData7() {
|
|
var chartDom = this.$refs.xgnboxlt
|
|
var myChart = echarts.init(chartDom);
|
|
const res = await querySichResult({param: this.queryParams3})
|
|
|
|
var xdata = [];
|
|
const newlist = res.data.map(a => {
|
|
xdata.push(dayjs(a.time).format('YYYY-MM-DD'))
|
|
return { ...a, time: dayjs(a.time).format('YYYY-MM-DD') }
|
|
})
|
|
|
|
var series = [{
|
|
type: 'line',
|
|
areaStyle: {},
|
|
data: newlist.map(a => ({
|
|
value: a['bfNum'],
|
|
itemStyle: {
|
|
borderRadius: [20, 20, 0, 0]
|
|
}
|
|
}))
|
|
}];
|
|
|
|
// var xdata = [];
|
|
// var year = new Date().getFullYear()
|
|
// for (let i = 0; i < 12; i++) {
|
|
// var month = i < 10 ? ('0' + (i + 1)) : ((i + 1) + '')
|
|
// xdata.push(year + '-' + month)
|
|
// }
|
|
// var series = [{
|
|
// type: 'line',
|
|
// areaStyle: {},
|
|
// data: [],
|
|
// }]
|
|
// for (let j = 0; j < 12; j++) {
|
|
// series[0].data.push(Math.floor(Math.random() * 101))
|
|
// }
|
|
|
|
var option = {
|
|
title: {
|
|
text: '血管内治疗率',
|
|
left: 'left'
|
|
},
|
|
color: ['#6F7FF6', '#F3D37C', '#5AD0A5', '#008660'],
|
|
legend: {
|
|
left: 'right'
|
|
},
|
|
xAxis: [{
|
|
type: 'category',
|
|
boundaryGap: false,
|
|
data: xdata
|
|
}],
|
|
yAxis: [{
|
|
type: 'value'
|
|
}],
|
|
series: series
|
|
};
|
|
|
|
option && myChart.setOption(option);
|
|
},
|
|
// 血管内治疗统计- 数据对比
|
|
async getData8() {
|
|
var chartDom = this.$refs.xgnboxrt
|
|
var myChart = echarts.init(chartDom);
|
|
|
|
const res = await selectXgzl({param: this.queryParams3})
|
|
|
|
var items = ['桥接治疗人数', '非桥接治疗人数']
|
|
var xdata = [];
|
|
var series = [];
|
|
const newlist = res.data.map(a => {
|
|
xdata.push(dayjs(a.time).format('YYYY-MM-DD'))
|
|
return { ...a, time: dayjs(a.time).format('YYYY-MM-DD') }
|
|
})
|
|
items.forEach(i => {
|
|
var item = {
|
|
name: i,
|
|
type: 'bar',
|
|
barWidth: 5,
|
|
data: [],
|
|
}
|
|
var filed = ""
|
|
if(i == '桥接治疗人数') filed = "qiaojie"
|
|
else if(i == '非桥接治疗人数') filed = "falseQiaojie"
|
|
newlist.forEach(a => {
|
|
var itemdata = {
|
|
value: a[filed],
|
|
itemStyle: {
|
|
borderRadius: [20, 20, 0, 0]
|
|
}
|
|
}
|
|
item.data.push(itemdata)
|
|
})
|
|
series.push(item)
|
|
})
|
|
var option = {
|
|
title: {
|
|
text: '数据对比',
|
|
left: 'left'
|
|
},
|
|
color: ['#6F7FF6', '#F3D37C', '#5AD0A5', '#008660'],
|
|
legend: {
|
|
left: 'right'
|
|
},
|
|
xAxis: [{
|
|
type: 'category',
|
|
data: xdata
|
|
}],
|
|
yAxis: [{
|
|
type: 'value'
|
|
}],
|
|
series: series
|
|
};
|
|
|
|
option && myChart.setOption(option);
|
|
},
|
|
// 血管内治疗统计- DPT
|
|
async getData9() {
|
|
var chartDom = this.$refs.xgnboxlb
|
|
var myChart = echarts.init(chartDom);
|
|
|
|
const res = await queryDptResult({param: this.queryParams3})
|
|
|
|
var items = ['≤60min', '≤90min', '>90min']
|
|
var xdata = [];
|
|
var series = [];
|
|
const newlist = res.data.map(a => {
|
|
xdata.push(dayjs(a.time).format('YYYY-MM-DD'))
|
|
return { ...a, time: dayjs(a.time).format('YYYY-MM-DD') }
|
|
})
|
|
items.forEach(i => {
|
|
var item = {
|
|
name: i,
|
|
type: 'bar',
|
|
barWidth: 5,
|
|
data: [],
|
|
}
|
|
var filed = ""
|
|
if(i == '≤60min') filed = "dy60"
|
|
else if(i == '≤90min') filed = "dy90"
|
|
else if(i == '>90min') filed = "other"
|
|
newlist.forEach(a => {
|
|
var itemdata = {
|
|
value: a[filed],
|
|
itemStyle: {
|
|
borderRadius: [20, 20, 0, 0]
|
|
}
|
|
}
|
|
item.data.push(itemdata)
|
|
})
|
|
series.push(item)
|
|
})
|
|
|
|
var option = {
|
|
title: {
|
|
text: 'DPT',
|
|
left: 'left'
|
|
},
|
|
color: ['#6F7FF6', '#F3D37C', '#5AD0A5', '#008660'],
|
|
legend: {
|
|
left: 'right'
|
|
},
|
|
xAxis: [{
|
|
type: 'category',
|
|
data: xdata
|
|
}],
|
|
yAxis: [{
|
|
type: 'value'
|
|
}],
|
|
series: series
|
|
};
|
|
|
|
option && myChart.setOption(option);
|
|
},
|
|
// 血管内治疗统计- RPT
|
|
async getData10() {
|
|
var chartDom = this.$refs.xgnboxrb
|
|
var myChart = echarts.init(chartDom);
|
|
|
|
const res = await queryRptResult({param: this.queryParams3})
|
|
|
|
var items = ['≤60min', '≤90min', '>90min']
|
|
var xdata = [];
|
|
var series = [];
|
|
const newlist = res.data.map(a => {
|
|
xdata.push(dayjs(a.time).format('YYYY-MM-DD'))
|
|
return { ...a, time: dayjs(a.time).format('YYYY-MM-DD') }
|
|
})
|
|
items.forEach(i => {
|
|
var item = {
|
|
name: i,
|
|
type: 'bar',
|
|
barWidth: 5,
|
|
data: [],
|
|
}
|
|
var filed = ""
|
|
if(i == '≤60min') filed = "dy60"
|
|
else if(i == '≤90min') filed = "dy90"
|
|
else if(i == '>90min') filed = "other"
|
|
newlist.forEach(a => {
|
|
var itemdata = {
|
|
value: a[filed],
|
|
itemStyle: {
|
|
borderRadius: [20, 20, 0, 0]
|
|
}
|
|
}
|
|
item.data.push(itemdata)
|
|
})
|
|
series.push(item)
|
|
})
|
|
|
|
var option = {
|
|
title: {
|
|
text: 'PRT',
|
|
left: 'left'
|
|
},
|
|
color: ['#6F7FF6', '#F3D37C', '#5AD0A5', '#008660'],
|
|
legend: {
|
|
left: 'right'
|
|
},
|
|
xAxis: [{
|
|
type: 'category',
|
|
data: xdata
|
|
}],
|
|
yAxis: [{
|
|
type: 'value'
|
|
}],
|
|
series: series
|
|
};
|
|
|
|
option && myChart.setOption(option);
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.statistics {
|
|
// padding: 10px;
|
|
.statistics-container{
|
|
.sta-row {
|
|
background: #fff;
|
|
margin-bottom: .2rem;
|
|
padding: 10px;
|
|
overflow: hidden;
|
|
box-sizing: border-box;
|
|
.sta-row-head {
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
border-bottom: 1px solid #eee;
|
|
.sta-row-title {
|
|
height: 50px;
|
|
line-height: 50px;
|
|
// display: flex;
|
|
// align-items: center;
|
|
|
|
img {
|
|
width: 5px;
|
|
}
|
|
|
|
.sta-row-text {
|
|
padding: 2px 10px;
|
|
font-size: 1.3rem;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
|
|
.sta-row-filter {
|
|
height: 50px;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
}
|
|
|
|
.echarts-box {
|
|
height: 420px;
|
|
background-color: #ffffff;
|
|
border-radius: 10px;
|
|
padding: 10px;
|
|
box-sizing: border-box;
|
|
overflow: hidden;
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
</style>
|
|
|
|
<style lang="less">
|
|
.statistics {
|
|
.sta-row {
|
|
.sta-row-head {
|
|
.sta-row-filter {
|
|
.ant-radio-group {
|
|
height: 32px;
|
|
}
|
|
|
|
.ant-radio-button-wrapper {
|
|
border-radius: 6px;
|
|
margin-right: 10px;
|
|
overflow: hidden;
|
|
box-sizing: border-box;
|
|
border-left: 1px solid #d9d9d9;
|
|
&.ant-radio-button-wrapper-checked{
|
|
border-left: 1px solid #0062d9;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|