From ed251fe533c8661c01c8d37e25c2d344a45e9ff9 Mon Sep 17 00:00:00 2001
From: Administrator <admin>
Date: Fri, 02 Apr 2021 15:30:39 +0800
Subject: [PATCH] 预警分析页面完善
---
src/styles/alarmAnalysis/alarmAnalysis.scss | 53 +++++++++++-
src/views/alarmManagement/alarmAnalysis.vue | 155 ++++++++++++++++++++++++++++----------
2 files changed, 160 insertions(+), 48 deletions(-)
diff --git a/src/styles/alarmAnalysis/alarmAnalysis.scss b/src/styles/alarmAnalysis/alarmAnalysis.scss
index f51b51e..51c19b2 100644
--- a/src/styles/alarmAnalysis/alarmAnalysis.scss
+++ b/src/styles/alarmAnalysis/alarmAnalysis.scss
@@ -148,12 +148,17 @@
}
.alarmEquipmentProStatis {
- background-color: aqua;
- width: 50%;
+ //background-color: aqua;
+ width: 35%;
height: 100%;
position: relative;
left: 30%;
- top: -80%;
+ top: -100%;
+}
+
+.alarmEquipmentProStatis .avue-crud {
+ position: relative;
+ top: 20%;
}
.alarmEquipmentProStatis .avue-crud__menu {
@@ -163,7 +168,7 @@
//确认时间占比
.confirmTimePro {
background-color: #ffffff;
- width: 98.6%;
+ width: 61.6%;
height: 450px;
position: relative;
left: 0.8%;
@@ -171,10 +176,44 @@
}
#confirmTimeProEcharts {
- width: 30%;
+ width: 40%;
height: 450px;
position: relative;
left: 1%;
+}
+
+.confirmTimeProStatis {
+ //background-color: aqua;
+ width: 60%;
+ height: 100%;
+ position: relative;
+ top: -100%;
+ left: 40%;
+}
+
+.confirmTimeProStatis .el-row {
+ position: relative;
+ top: 120px;
+}
+
+//预警平均速度排行
+.confirmAverageSpeed {
+ background-color: #ffffff;
+ width: 35%;
+ height: 450px;
+ position: relative;
+ top: -41%;
+ left: 64.4%;
+}
+
+.confirmAverageSpeed .avue-crud {
+ width: 90%;
+ position: relative;
+ top: 10%;
+}
+
+.confirmAverageSpeed .avue-crud__menu {
+ display: none;
}
//预警时间分布
@@ -184,7 +223,7 @@
height: 450px;
position: relative;
left: 0.8%;
- top: 14%;
+ top: -38.6%;
}
#alarmTimeDisEchars {
@@ -201,5 +240,5 @@
height: 50px;
position: relative;
left: 0.8%;
- top: 14%;
+ top: -38%;
}
\ No newline at end of file
diff --git a/src/views/alarmManagement/alarmAnalysis.vue b/src/views/alarmManagement/alarmAnalysis.vue
index 9f683ae..bf4dde2 100644
--- a/src/views/alarmManagement/alarmAnalysis.vue
+++ b/src/views/alarmManagement/alarmAnalysis.vue
@@ -41,6 +41,13 @@
<!-- 确认时间占比 -->
<div class="confirmTimePro">
<div id="confirmTimeProEcharts"></div>
+ <div class="confirmTimeProStatis">
+ <avue-data-cardtext :option="confirmTimeProStatis"></avue-data-cardtext>
+ </div>
+ </div>
+ <!-- 预警平均确认速度排行 -->
+ <div class="confirmAverageSpeed">
+ <avue-crud :data="confirmAverageSpeedData" :option="confirmAverageSpeedOption"></avue-crud>
</div>
<!-- 预警时间分布 -->
<div class="alarmTimeDis">
@@ -73,7 +80,14 @@
data: []
},
alarmEquipmentProStatisData:[],
- alarmEquipmentProStatisOption:{}
+ alarmEquipmentProStatisOption:{},
+ confirmTimeProStatis:{
+ span:10,
+ height:100,
+ data: []
+ },
+ confirmAverageSpeedData:[],
+ confirmAverageSpeedOption:{}
};
},
@@ -92,6 +106,8 @@
this.getAlarmEquipmentProStatis();
//确认时间占比统计
this.getConfirmTimeProEcharts();
+ this.getConfirmTimeProStatis();
+ this.confirmAverageSpeedStatis();
//预警时间分布统计
this.getAlarmTimeDisEchars();
},
@@ -103,46 +119,38 @@
that.statisToTalData.data = [
{
click: function (item) {
- alert(JSON.stringify(item));
},
- title: '错误日志',
+ title: '监测点总数',
count: 12332,
icon: 'el-icon-warning',
color: '#3AA7F0',
- href:'https://avuejs.com',
target:'_blank'
},
{
click: function (item) {
- alert(JSON.stringify(item));
},
- title: '数据展示',
+ title: '总预警数',
count: 33,
icon: 'el-icon-warning',
color: '#F34A4A',
- href:'https://avuejs.com',
target:'_blank'
},
{
click: function (item) {
- alert(JSON.stringify(item));
},
- title: '权限管理',
+ title: '一键求助确认率',
count: 2223,
icon: 'el-icon-setting',
color: '#8058A5',
- href:'https://avuejs.com',
target:'_blank'
},
{
click: function (item) {
- alert(JSON.stringify(item));
},
- title: '权限管理',
+ title: '一键求助确认数',
count: 2223,
icon: 'el-icon-setting',
color: '#29C093',
- href:'https://avuejs.com',
target:'_blank'
},
];
@@ -282,9 +290,9 @@
fontSize: 16,
color: '#000'
},
- left: '10%',
+ left: '1%',
top: 25,
- textAlign:'center',
+ textAlign:'left',
text: '预警类型占比'
},
tooltip: {
@@ -337,7 +345,7 @@
//警情类别统计总数(分类占比)
getAlarmTypeProStatis(){
- var that = this;
+ var that = this;
that.alarmTypeProStatis.data = [
{
click: function (item) {
@@ -453,21 +461,9 @@
var that = this;
that.alarmEquipmentProStatisData=[
{
- name:'张三',
- sex:'男',
- date:'1994-02-23 00:00:00'
- }, {
- name:'李四',
- sex:'女',
- date:'1994-02-23 00:00:00'
- }, {
- name:'王五',
- sex:'女',
- date:'1994-02-23 00:00:00'
- }, {
- name:'赵六',
- sex:'男',
- date:'1994-02-23 00:00:00'
+ name:'一键求助',
+ sex:'1',
+ date:'100%'
}
];
that.alarmEquipmentProStatisOption={
@@ -478,18 +474,15 @@
menuAlign:'center',
column:[
{
- label:'姓名',
+ label:'预警设备类型',
prop:'name'
},
{
- label:'性别',
+ label:'预警次数',
prop:'sex'
},{
- label: "日期",
- prop: "date",
- type: "date",
- format: "yyyy-MM-dd hh:mm:ss",
- valueFormat: "yyyy-MM-dd hh:mm:ss",
+ label: "占比",
+ prop: "date"
}
]
}
@@ -509,10 +502,10 @@
fontSize: 16,
color: '#000'
},
- left: '10%',
+ left: '1%',
top: 25,
- textAlign:'center',
- text: '预警类型占比'
+ textAlign:'left',
+ text: '确认时间占比'
},
tooltip: {
trigger: 'item'
@@ -561,6 +554,86 @@
window.addEventListener('resize',function() {myChart.resize()});
},
+ //确认时间占比（分类）
+ getConfirmTimeProStatis(){
+ var that = this;
+ that.confirmTimeProStatis.data = [
+ {
+ click: function (item) {
+ alert(JSON.stringify(item));
+ },
+ title:'香菜',
+ color:'yellow',
+ href:"http://www.baidu.com",
+ target:'_blank',
+ name:'文件上传',
+ date:'1天前'
+ },
+ {
+ click: function (item) {
+ alert(JSON.stringify(item));
+ },
+ title:'钉宫',
+ color:'green',
+ href:"http://www.baidu.com",
+ name:'流加载',
+ date:'1天前'
+ },
+ {
+ click: function (item) {
+ alert(JSON.stringify(item));
+ },
+ title:'亚丝娜',
+ color:'#3fa1ff',
+ href:"http://www.baidu.com",
+ name:'表单',
+ date:'1天前'
+ },
+ {
+ click: function (item) {
+ alert(JSON.stringify(item));
+ },
+ title:'狂三',
+ color:'red',
+ href:"http://www.baidu.com",
+ name:'文件上传',
+ date:'1天前'
+ }
+ ];
+ },
+
+ //预警平均速度排行(table)
+ confirmAverageSpeedStatis(){
+ var that = this;
+ that.confirmAverageSpeedData=[
+ {
+ name:'一键求助',
+ sex:'1',
+ }
+ ];
+ that.confirmAverageSpeedOption={
+ title:'表格的标题',
+ titleSize:'h3',
+ titleStyle:{
+ color:'red'
+ },
+ menu:false,
+ page:false,
+ align:'center',
+ menuAlign:'center',
+ column:[
+ {
+ label:'巡检人',
+ prop:'name'
+ },
+ {
+ label:'平均确认速度',
+ prop:'sex'
+ }
+ ]
+ }
+ },
+
//预警时间分布
getAlarmTimeDisEchars(){
let echarts = require('echarts');
--
Gitblit v1.9.3