From f1c20903f98c57430e766489cb1ba7b5fd8daa8a Mon Sep 17 00:00:00 2001
From: Administrator <admin>
Date: Wed, 07 Apr 2021 11:17:08 +0800
Subject: [PATCH] 预警分析-确认时间占比饼图及占比次数数据回显Ok
---
src/api/statis/statis.js | 10 +++
src/styles/alarmAnalysis/alarmAnalysis.scss | 6 +-
src/views/alarmManagement/alarmAnalysis.vue | 119 ++++++++++++++++++++-------------------
3 files changed, 75 insertions(+), 60 deletions(-)
diff --git a/src/api/statis/statis.js b/src/api/statis/statis.js
index 4894ee3..9e8509f 100644
--- a/src/api/statis/statis.js
+++ b/src/api/statis/statis.js
@@ -28,4 +28,14 @@
...params,
}
})
+}
+
+export const selConfirmTimePro = (params) => {
+ return request({
+ url: '/api/blade-jfpts/alarm/alarm/selConfirmTimePro',
+ method: 'get',
+ params: {
+ ...params,
+ }
+ })
}
\ No newline at end of file
diff --git a/src/styles/alarmAnalysis/alarmAnalysis.scss b/src/styles/alarmAnalysis/alarmAnalysis.scss
index 649e3e3..ec90c9b 100644
--- a/src/styles/alarmAnalysis/alarmAnalysis.scss
+++ b/src/styles/alarmAnalysis/alarmAnalysis.scss
@@ -176,7 +176,7 @@
height: 450px;
position: relative;
left: 0.8%;
- top: 12%;
+ top: 10%;
}
#confirmTimeProEcharts {
@@ -206,7 +206,7 @@
width: 35%;
height: 450px;
position: relative;
- top: -41%;
+ top: -43%;
left: 64.4%;
}
@@ -227,7 +227,7 @@
height: 450px;
position: relative;
left: 0.8%;
- top: -38.6%;
+ top: -40.6%;
}
#alarmTimeDisEchars {
diff --git a/src/views/alarmManagement/alarmAnalysis.vue b/src/views/alarmManagement/alarmAnalysis.vue
index f8b8810..5531261 100644
--- a/src/views/alarmManagement/alarmAnalysis.vue
+++ b/src/views/alarmManagement/alarmAnalysis.vue
@@ -49,7 +49,7 @@
</div>
</div>
<!-- 预警设备类型占比 -->
- <div class="alarmEquipmentPro">
+ <div class="alarmEquipmentPro" style="display:none">
<div id="alarmEquipmentProEcharts"></div>
<div class="alarmEquipmentProStatis">
<avue-crud :data="alarmEquipmentProStatisData" :option="alarmEquipmentProStatisOption"></avue-crud>
@@ -78,7 +78,7 @@
<script>
import echarts from 'echarts'
- import {selectIndexCount,selectAlertScount,selAlarmDayAveragePro} from "@/api/statis/statis";
+ import {selectIndexCount,selectAlertScount,selAlarmDayAveragePro,selConfirmTimePro} from "@/api/statis/statis";
import alarmVue from '../alarm/alarm.vue';
export default {
@@ -262,9 +262,6 @@
selAlarmDayAveragePro(data).then(res =>{
var time = this.dateTime;
var day = this.getDaysBetween(time[0],time[1]);
-
- console.log(time,102);
- console.log(Math.round(day),103);
var that = this;
that.alarmClassifyStatis.data = [
{
@@ -341,7 +338,6 @@
},
series: [
{
- name: '访问来源',
type: 'pie',
radius: ['43%','60%'],
center: ['45%','53%'],
@@ -387,7 +383,7 @@
color:'yellow',
target:'_blank',
name:res.data.data[0],
- date:res.data.data[0]/count*100+'%'
+ date:(res.data.data[0]/count*100).toFixed(2)+'%'
},
{
click: function (item) {
@@ -395,7 +391,7 @@
title:'违禁品',
color:'green',
name:res.data.data[1],
- date:res.data.data[1]/count*100+'%'
+ date:(res.data.data[1]/count*100).toFixed(2)+'%'
},
{
click: function (item) {
@@ -403,7 +399,7 @@
title:'红色健康码',
color:'#3fa1ff',
name:res.data.data[2],
- date:res.data.data[2]/count*100+'%'
+ date:(res.data.data[2]/count*100).toFixed(2)+'%'
},
{
click: function (item) {
@@ -411,11 +407,10 @@
title:'体温异常',
color:'red',
name:res.data.data[3],
- date:res.data.data[3]/count*100+'%'
+ date:(res.data.data[3]/count*100).toFixed(2)+'%'
}
];
})
-
},
//预警设备类型占比统计
@@ -446,7 +441,6 @@
},
series: [
{
- name: '访问来源',
type: 'pie',
radius: ['43%','60%'],
cneter: ['45%','53%'],
@@ -458,7 +452,7 @@
emphasis: {
label: {
show: true,
- fontSize: '40',
+ fontSize: '18',
fontWeight: 'bold'
}
},
@@ -518,6 +512,8 @@
//确认时间占比统计
getConfirmTimeProEcharts(data){
+ selConfirmTimePro(data).then(res =>{
+ var data = res.data.data;
let echarts = require('echarts');
let myChart = echarts.init(document.getElementById('confirmTimeProEcharts'));
let option = {
@@ -544,7 +540,6 @@
},
series: [
{
- name: '访问来源',
type: 'pie',
radius: ['43%', '60%'],
center: ['45%','53%'],
@@ -556,7 +551,7 @@
emphasis: {
label: {
show: true,
- fontSize: '40',
+ fontSize: '18',
fontWeight: 'bold'
}
},
@@ -564,55 +559,57 @@
show: false
},
data: [
- {value: 1048, name: '搜索引擎'},
- {value: 735, name: '直接访问'},
- {value: 580, name: '邮件营销'},
- {value: 484, name: '联盟广告'},
- {value: 300, name: '视频广告'}
+ {value: data[0], name: '0-5分钟'},
+ {value: data[1], name: '5-10分钟'},
+ {value: data[2], name: '10-30分钟'},
+ {value: data[3], name: '30分钟以上'}
]
}
]
};
myChart.setOption(option);
-
//建议加上以下这一行代码，不加的效果图如下（当浏览器窗口缩小的时候）。超过了div的界限（红色边框）
window.addEventListener('resize',function() {myChart.resize()});
+ })
},
//确认时间占比（分类）
getConfirmTimeProStatis(data){
- var that = this;
- that.confirmTimeProStatis.data = [
- {
- click: function (item) {
- },
- title:'小于5分钟',
- color:'yellow',
- target:'_blank',
- name:'0',
- },
- {
- click: function (item) {
- },
- title:'5-10分钟',
- color:'green',
- name:'0',
- },
- {
- click: function (item) {
- },
- title:'10-30分钟',
- color:'#3fa1ff',
- name:'0',
- },
- {
- click: function (item) {
- },
- title:'30分钟以上',
- color:'red',
- name:'0',
- }
- ];
+ selConfirmTimePro(data).then(res =>{
+ var data = res.data.data;
+ var that = this;
+ that.confirmTimeProStatis.data = [
+ {
+ click: function (item) {
+ },
+ title:'小于5分钟',
+ color:'yellow',
+ target:'_blank',
+ name:data[0]==0? 0:data[0]+"次",
+ },
+ {
+ click: function (item) {
+ },
+ title:'5-10分钟',
+ color:'green',
+ name:data[1]==0? 0:data[1]+"次",
+ },
+ {
+ click: function (item) {
+ },
+ title:'10-30分钟',
+ color:'#3fa1ff',
+ name:data[2]==0? 0:data[2]+"次",
+ },
+ {
+ click: function (item) {
+ },
+ title:'30分钟以上',
+ color:'red',
+ name:data[3]==0? 0:data[3]+"次",
+ }
+ ];
+ })
},
//预警平均速度排行(table)
@@ -680,8 +677,16 @@
},
xAxis: {
type: 'category',
- boundaryGap: false,
- data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
+ boundaryGap: true,
+ axisLine: {
+ lineStyle:{
+ type:'dashed'
+ }
+ },
+ axisTick: {
+ show:false
+ },
+ data: ['0-2', '2-4', '4-6', '6-8', '8-10', '10-12', '12-14','14-16','16-18','18-20','20-22','22-24']
},
yAxis: {
type: 'value',
@@ -740,8 +745,8 @@
this.getAlarmTypeProEcharts(data);
this.getAlarmTypeProStatis(data);
//预警设备类型占比统计
- this.getAlarmEquipmentProEcharts(data);
- this.getAlarmEquipmentProStatis(data);
+ //this.getAlarmEquipmentProEcharts(data);
+ //this.getAlarmEquipmentProStatis(data);
//确认时间占比统计
this.getConfirmTimeProEcharts(data);
this.getConfirmTimeProStatis(data);
--
Gitblit v1.9.3