|
|
|
@ -11,7 +11,7 @@ |
|
|
|
<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="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="['开始日期','结束日期']" |
|
|
|
@ -29,6 +29,44 @@ |
|
|
|
</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="queryParams4.timeType" @change="typeChange($event, 'queryParams4')"> |
|
|
|
<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, 'queryParams4')" /> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="sta-row-echart"> |
|
|
|
<a-row :gutter="[16,16]"> |
|
|
|
<a-col :span="12"> |
|
|
|
<div class="echarts-box" ref="zbboxlt"></div> |
|
|
|
</a-col> |
|
|
|
<a-col :span="12"> |
|
|
|
<div class="echarts-box" ref="zbboxrt"></div> |
|
|
|
</a-col> |
|
|
|
<a-col :span="12"> |
|
|
|
<div class="echarts-box" ref="zbboxlb"></div> |
|
|
|
</a-col> |
|
|
|
<a-col :span="12"> |
|
|
|
<div class="echarts-box" ref="zbboxrb"></div> |
|
|
|
</a-col> |
|
|
|
<a-col :span="12"> |
|
|
|
<div class="echarts-box" ref="zbboxlbb"></div> |
|
|
|
</a-col> |
|
|
|
</a-row> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="sta-row"> |
|
|
|
<div class="sta-row-head"> |
|
|
|
<div class="sta-row-title"> |
|
|
|
@ -39,7 +77,7 @@ |
|
|
|
<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="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="['开始日期','结束日期']" |
|
|
|
@ -51,15 +89,15 @@ |
|
|
|
<a-col :span="12"> |
|
|
|
<div class="echarts-box" ref="jmrsboxlt"></div> |
|
|
|
</a-col> |
|
|
|
<a-col :span="12"> |
|
|
|
<!-- <a-col :span="12"> |
|
|
|
<div class="echarts-box" ref="jmrsboxrt"></div> |
|
|
|
</a-col> |
|
|
|
</a-col> --> |
|
|
|
<a-col :span="12"> |
|
|
|
<div class="echarts-box" ref="jmrsboxlb"></div> |
|
|
|
</a-col> |
|
|
|
<a-col :span="12"> |
|
|
|
<!-- <a-col :span="12"> |
|
|
|
<div class="echarts-box" ref="jmrsboxrb"></div> |
|
|
|
</a-col> |
|
|
|
</a-col> --> |
|
|
|
</a-row> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
@ -73,7 +111,7 @@ |
|
|
|
<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="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="['开始日期','结束日期']" |
|
|
|
@ -106,13 +144,17 @@ |
|
|
|
queryRptResult, |
|
|
|
queryDptResult, |
|
|
|
selectXgzl, |
|
|
|
// queryDptResult, |
|
|
|
queryDitResult, |
|
|
|
queryOntResult, |
|
|
|
queryOptResult, |
|
|
|
querySichResult, |
|
|
|
queryDntResult, |
|
|
|
queryJmrs, |
|
|
|
queryJmrsResult, |
|
|
|
queryByDatePatient, |
|
|
|
queryPatient, |
|
|
|
queryXgzlBfzResult, |
|
|
|
queryXgzlLv, |
|
|
|
} from 'api'; |
|
|
|
import * as echarts from 'echarts' |
|
|
|
import * as dayjs from 'dayjs' |
|
|
|
@ -121,88 +163,35 @@ |
|
|
|
data() { |
|
|
|
return { |
|
|
|
queryParams1: { |
|
|
|
"timeType": "0", //统计方式 0:周 1:月 2:季 3:年 |
|
|
|
"timeType": "1", //统计方式 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:年 |
|
|
|
"timeType": "1", //统计方式 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:年 |
|
|
|
"timeType": "1", //统计方式 0:周 1:月 2:季 3:年 |
|
|
|
"startTime": "2024-10-01 00:00:00", //开始时间 |
|
|
|
"endTime": "2025-01-01 00:00:00" //结束时间 |
|
|
|
}, |
|
|
|
queryParams4: { |
|
|
|
"timeType": "1", //统计方式 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() |
|
|
|
const _this = this; |
|
|
|
setTimeout(() => { |
|
|
|
_this.$nextTick(() => { |
|
|
|
_this.init() |
|
|
|
}) |
|
|
|
}, 100) |
|
|
|
|
|
|
|
}, |
|
|
|
methods: { |
|
|
|
init(filed) { |
|
|
|
@ -223,6 +212,13 @@ |
|
|
|
this.getData9() |
|
|
|
this.getData10() |
|
|
|
break; |
|
|
|
case "queryParams3": |
|
|
|
this.getData11() |
|
|
|
this.getData12() |
|
|
|
this.getData13() |
|
|
|
this.getData14() |
|
|
|
this.getData15() |
|
|
|
break; |
|
|
|
default: |
|
|
|
this.getData1() |
|
|
|
this.getData2() |
|
|
|
@ -234,6 +230,11 @@ |
|
|
|
this.getData8() |
|
|
|
this.getData9() |
|
|
|
this.getData10() |
|
|
|
this.getData11() |
|
|
|
this.getData12() |
|
|
|
this.getData13() |
|
|
|
this.getData14() |
|
|
|
this.getData15() |
|
|
|
break; |
|
|
|
} |
|
|
|
|
|
|
|
@ -281,7 +282,7 @@ |
|
|
|
var myChart = echarts.init(chartDom); |
|
|
|
var option = { |
|
|
|
title: { |
|
|
|
text: '病历统计', |
|
|
|
text: '患者总数', |
|
|
|
left: 'left' |
|
|
|
}, |
|
|
|
color: ['#6F7FF6', '#F3D37C', '#5AD0A5', '#008660'], |
|
|
|
@ -388,7 +389,7 @@ |
|
|
|
|
|
|
|
var option = { |
|
|
|
title: { |
|
|
|
text: '数据对比', |
|
|
|
text: '患者统计', |
|
|
|
left: 'left' |
|
|
|
}, |
|
|
|
color: ['#6F7FF6', '#F3D37C', '#5AD0A5', '#008660'], |
|
|
|
@ -462,6 +463,7 @@ |
|
|
|
}, |
|
|
|
// 静脉溶栓统计- 数据对比 |
|
|
|
async getData4() { |
|
|
|
return |
|
|
|
var chartDom = this.$refs.jmrsboxrt |
|
|
|
var myChart = echarts.init(chartDom); |
|
|
|
|
|
|
|
@ -527,7 +529,7 @@ |
|
|
|
|
|
|
|
option && myChart.setOption(option); |
|
|
|
}, |
|
|
|
// 静脉溶栓统计- sICH发生率 |
|
|
|
// 静脉溶栓统计- sICH发生率 静脉溶栓并发症发生率 |
|
|
|
async getData5() { |
|
|
|
var chartDom = this.$refs.jmrsboxlb |
|
|
|
var myChart = echarts.init(chartDom); |
|
|
|
@ -561,7 +563,7 @@ |
|
|
|
|
|
|
|
var option = { |
|
|
|
title: { |
|
|
|
text: 'slCH发生率', |
|
|
|
text: '静脉溶栓并发症发生率', |
|
|
|
left: 'left' |
|
|
|
}, |
|
|
|
color: ['#6F7FF6', '#F3D37C', '#5AD0A5', '#008660'], |
|
|
|
@ -582,6 +584,7 @@ |
|
|
|
}, |
|
|
|
// 静脉溶栓统计- DNT分布 |
|
|
|
async getData6() { |
|
|
|
return |
|
|
|
var chartDom = this.$refs.jmrsboxrb |
|
|
|
var myChart = echarts.init(chartDom); |
|
|
|
|
|
|
|
@ -650,7 +653,8 @@ |
|
|
|
async getData7() { |
|
|
|
var chartDom = this.$refs.xgnboxlt |
|
|
|
var myChart = echarts.init(chartDom); |
|
|
|
const res = await querySichResult({ |
|
|
|
// const res = await querySichResult({ |
|
|
|
const res = await queryXgzlLv({ |
|
|
|
param: this.queryParams3 |
|
|
|
}) |
|
|
|
|
|
|
|
@ -667,7 +671,7 @@ |
|
|
|
type: 'line', |
|
|
|
areaStyle: {}, |
|
|
|
data: newlist.map(a => ({ |
|
|
|
value: a['bfNum'], |
|
|
|
value: a['total'], |
|
|
|
itemStyle: { |
|
|
|
borderRadius: [20, 20, 0, 0] |
|
|
|
}, |
|
|
|
@ -695,7 +699,7 @@ |
|
|
|
|
|
|
|
var option = { |
|
|
|
title: { |
|
|
|
text: '血管内治疗率', |
|
|
|
text: '血管内治疗再通率', |
|
|
|
left: 'left' |
|
|
|
}, |
|
|
|
color: ['#6F7FF6', '#F3D37C', '#5AD0A5', '#008660'], |
|
|
|
@ -716,7 +720,7 @@ |
|
|
|
option && myChart.setOption(option); |
|
|
|
}, |
|
|
|
// 血管内治疗统计- 数据对比 |
|
|
|
async getData8() { |
|
|
|
async _getData8() { |
|
|
|
var chartDom = this.$refs.xgnboxrt |
|
|
|
var myChart = echarts.init(chartDom); |
|
|
|
|
|
|
|
@ -780,6 +784,61 @@ |
|
|
|
|
|
|
|
option && myChart.setOption(option); |
|
|
|
}, |
|
|
|
// 血管内治疗统计- (2) 血管内治疗并发症发生率 |
|
|
|
async getData8() { |
|
|
|
var chartDom = this.$refs.xgnboxrt; |
|
|
|
chartDom.style.width = '100%'; // 强制设置宽度 |
|
|
|
var myChart = echarts.init(chartDom); |
|
|
|
const res = await queryXgzlBfzResult({ |
|
|
|
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] |
|
|
|
}, |
|
|
|
label: { |
|
|
|
show: true, |
|
|
|
position: 'top' |
|
|
|
}, |
|
|
|
})) |
|
|
|
}]; |
|
|
|
|
|
|
|
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); |
|
|
|
}, |
|
|
|
// 血管内治疗统计- DPT |
|
|
|
async getData9() { |
|
|
|
var chartDom = this.$refs.xgnboxlb |
|
|
|
@ -914,12 +973,350 @@ |
|
|
|
|
|
|
|
option && myChart.setOption(option); |
|
|
|
}, |
|
|
|
|
|
|
|
// 指标- DNT |
|
|
|
async getData11() { |
|
|
|
var chartDom = this.$refs.zbboxlt |
|
|
|
var myChart = echarts.init(chartDom); |
|
|
|
const res = await queryDntResult({ |
|
|
|
param: this.queryParams4 |
|
|
|
}) |
|
|
|
|
|
|
|
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] |
|
|
|
}, |
|
|
|
label: { |
|
|
|
show: true, |
|
|
|
position: 'top' |
|
|
|
}, |
|
|
|
} |
|
|
|
item.data.push(itemdata) |
|
|
|
}) |
|
|
|
series.push(item) |
|
|
|
}) |
|
|
|
var option = { |
|
|
|
title: { |
|
|
|
text: 'DNT分布', |
|
|
|
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); |
|
|
|
}, |
|
|
|
// 指标- DPT |
|
|
|
async getData12() { |
|
|
|
var chartDom = this.$refs.zbboxrt |
|
|
|
var myChart = echarts.init(chartDom); |
|
|
|
|
|
|
|
const res = await queryDptResult({ |
|
|
|
param: this.queryParams4 |
|
|
|
}) |
|
|
|
|
|
|
|
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] |
|
|
|
}, |
|
|
|
label: { |
|
|
|
show: true, |
|
|
|
position: 'top' |
|
|
|
}, |
|
|
|
} |
|
|
|
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); |
|
|
|
}, |
|
|
|
// 指标- DIT |
|
|
|
async getData13() { |
|
|
|
var chartDom = this.$refs.zbboxlb |
|
|
|
var myChart = echarts.init(chartDom); |
|
|
|
|
|
|
|
const res = await queryDitResult({ |
|
|
|
param: this.queryParams4 |
|
|
|
}) |
|
|
|
|
|
|
|
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] |
|
|
|
}, |
|
|
|
label: { |
|
|
|
show: true, |
|
|
|
position: 'top' |
|
|
|
}, |
|
|
|
} |
|
|
|
item.data.push(itemdata) |
|
|
|
}) |
|
|
|
series.push(item) |
|
|
|
}) |
|
|
|
|
|
|
|
var option = { |
|
|
|
title: { |
|
|
|
text: 'DIT分布', |
|
|
|
left: 'left' |
|
|
|
}, |
|
|
|
color: ['#6F7FF6', '#F3D37C', '#5AD0A5', '#008660'], |
|
|
|
legend: { |
|
|
|
left: 'right' |
|
|
|
}, |
|
|
|
xAxis: [{ |
|
|
|
type: 'category', |
|
|
|
data: xdata |
|
|
|
}], |
|
|
|
yAxis: [{ |
|
|
|
type: 'value' |
|
|
|
}], |
|
|
|
series: series |
|
|
|
}; |
|
|
|
|
|
|
|
option && myChart.setOption(option); |
|
|
|
}, |
|
|
|
// 指标- ONT |
|
|
|
async getData14() { |
|
|
|
var chartDom = this.$refs.zbboxrb |
|
|
|
var myChart = echarts.init(chartDom); |
|
|
|
|
|
|
|
const res = await queryOntResult({ |
|
|
|
param: this.queryParams4 |
|
|
|
}) |
|
|
|
|
|
|
|
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] |
|
|
|
}, |
|
|
|
label: { |
|
|
|
show: true, |
|
|
|
position: 'top' |
|
|
|
}, |
|
|
|
} |
|
|
|
item.data.push(itemdata) |
|
|
|
}) |
|
|
|
series.push(item) |
|
|
|
}) |
|
|
|
|
|
|
|
var option = { |
|
|
|
title: { |
|
|
|
text: 'ONT分布', |
|
|
|
left: 'left' |
|
|
|
}, |
|
|
|
color: ['#6F7FF6', '#F3D37C', '#5AD0A5', '#008660'], |
|
|
|
legend: { |
|
|
|
left: 'right' |
|
|
|
}, |
|
|
|
xAxis: [{ |
|
|
|
type: 'category', |
|
|
|
data: xdata |
|
|
|
}], |
|
|
|
yAxis: [{ |
|
|
|
type: 'value' |
|
|
|
}], |
|
|
|
series: series |
|
|
|
}; |
|
|
|
|
|
|
|
option && myChart.setOption(option); |
|
|
|
}, |
|
|
|
// 指标- OPT |
|
|
|
async getData15() { |
|
|
|
var chartDom = this.$refs.zbboxlbb |
|
|
|
var myChart = echarts.init(chartDom); |
|
|
|
const res = await queryOptResult({ |
|
|
|
param: this.queryParams4 |
|
|
|
}) |
|
|
|
|
|
|
|
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] |
|
|
|
}, |
|
|
|
label: { |
|
|
|
show: true, |
|
|
|
position: 'top' |
|
|
|
}, |
|
|
|
} |
|
|
|
item.data.push(itemdata) |
|
|
|
}) |
|
|
|
series.push(item) |
|
|
|
}) |
|
|
|
|
|
|
|
var option = { |
|
|
|
title: { |
|
|
|
text: 'OPT分布', |
|
|
|
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); |
|
|
|
}, |
|
|
|
|
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
</script> |
|
|
|
|
|
|
|
<style lang="less" scoped> |
|
|
|
.statistics { |
|
|
|
height: 100%; |
|
|
|
overflow-y: auto; |
|
|
|
|
|
|
|
// padding: 10px; |
|
|
|
.statistics-container { |
|
|
|
@ -960,8 +1357,18 @@ |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.sta-row-echart { |
|
|
|
.ant-row { |
|
|
|
.ant-col { |
|
|
|
// width: 100%; |
|
|
|
// height: 500px; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.echarts-box { |
|
|
|
height: 420px; |
|
|
|
width: 100%; |
|
|
|
height: 350px; |
|
|
|
background-color: #ffffff; |
|
|
|
border-radius: 10px; |
|
|
|
padding: 10px; |
|
|
|
|
领悟
5 months ago