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/views/alarmManagement/alarmAnalysis.vue | 119 +++++++++++++++++++++++++++++++----------------------------
1 files changed, 62 insertions(+), 57 deletions(-)
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