From a4e06ccd3cd976fbe4eef99e188d42ec9f3ad054 Mon Sep 17 00:00:00 2001
From: shuishen <1109946754@qq.com>
Date: Thu, 08 Apr 2021 09:32:05 +0800
Subject: [PATCH] 样式修改
---
src/views/alarmManagement/alarmAnalysis.vue | 334 +++++++++++++++++++++++++++++++------------------------
1 files changed, 186 insertions(+), 148 deletions(-)
diff --git a/src/views/alarmManagement/alarmAnalysis.vue b/src/views/alarmManagement/alarmAnalysis.vue
index f8b8810..bbe4d92 100644
--- a/src/views/alarmManagement/alarmAnalysis.vue
+++ b/src/views/alarmManagement/alarmAnalysis.vue
@@ -26,7 +26,13 @@
季度至今
</el-button>
</el-button-group>
- <el-date-picker class="timeSearch" size="mini" v-model="dateTime" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
+ <el-date-picker
+ class="timeSearch"
+ size="mini"
+ v-model="dateTime"
+ type="daterange"
+ @change="timeChange"
+ range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
</el-date-picker>
</div>
<!-- 监测点 -->
@@ -49,7 +55,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,8 +84,8 @@
<script>
import echarts from 'echarts'
- import {selectIndexCount,selectAlertScount,selAlarmDayAveragePro} from "@/api/statis/statis";
-import alarmVue from '../alarm/alarm.vue';
+ import {selectIndexCount,selectAlertScount,selAlarmDayAveragePro,selConfirmTimePro,selAlarmTimeDis} from "@/api/statis/statis";
+ import alarmVue from '../alarm/alarm.vue';
export default {
data(){
@@ -118,6 +124,36 @@
},
methods: {
+ //日期选好后触发
+ timeChange(){
+ //清空选项按钮标记
+ var that = this;
+ that.activeClass = 0;
+ var data = {};
+ data ={
+ startTime:this.timeFormat(this.dateTime[0]),
+ endTime:this.timeFormat(this.dateTime[1])
+ }
+ this.getStatisData(data);
+ },
+
+ //中国区时间格式转换
+ timeFormat(date){
+ let y = date.getFullYear()
+ let m = date.getMonth() + 1
+ m = m < 10 ? ('0' + m) : m
+ let d = date.getDate()
+ d = d < 10 ? ('0' + d) : d
+ let h =date.getHours()
+ h = h < 10 ? ('0' + h) : h
+ let M =date.getMinutes()
+ M = M < 10 ? ('0' + M) : M
+ let s =date.getSeconds()
+ s = s < 10 ? ('0' + s) : s
+ let time= y + '-' + m + '-' + d + ' ' + h + ':' + M + ':' + s;
+ return time;
+ },
+
//警情统计总数
getStatisTotalData(data){
selectIndexCount(data).then(res => {
@@ -128,7 +164,7 @@
},
title: '警情总数',
count: res.data.data[0].value,
- icon: 'el-icon-warning',
+ icon: 'el-icon-message-solid',
color: '#F34A4A'
},
{
@@ -136,7 +172,7 @@
},
title: '违禁包裹数',
count: res.data.data[1].value,
- icon: 'el-icon-warning',
+ icon: 'el-icon-shopping-bag-1',
color: '#FF9836'
},
{
@@ -144,7 +180,7 @@
},
title: '违禁物品数',
count: res.data.data[2].value,
- icon: 'el-icon-setting',
+ icon: 'el-icon-warning',
color: '#8058A5'
},
{
@@ -152,7 +188,7 @@
},
title: '在线设备数',
count: res.data.data[3].value,
- icon: 'el-icon-setting',
+ icon: 'el-icon-success',
color: '#29C093'
},
{
@@ -160,7 +196,7 @@
},
title: '客户数量',
count: res.data.data[4].value,
- icon: 'el-icon-setting',
+ icon: 'el-icon-s-custom',
color: '#3AA7F0'
}
];
@@ -171,11 +207,9 @@
getAlarmNumberStatis(data){
//调接口，获取数据
selectAlertScount(data).then(res =>{
- console.log(res.data,111);
var typesArray = res.data.data.types;
var timesArray = res.data.data.times;
var dataArray = res.data.data.dataList;
- console.log(dataArray,333);
var data = [];
dataArray.forEach(item => {
if (item.name == typesArray[0]) {
@@ -262,9 +296,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 +372,6 @@
},
series: [
{
- name: '访问来源',
type: 'pie',
radius: ['43%','60%'],
center: ['45%','53%'],
@@ -378,7 +408,6 @@
selAlarmDayAveragePro(data).then(res =>{
var that = this;
var count = res.data.data[0]+res.data.data[1]+res.data.data[2]+res.data.data[3];
- console.log(count,1112);
that.alarmTypeProStatis.data = [
{
click: function (item) {
@@ -387,7 +416,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 +424,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 +432,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 +440,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 +474,6 @@
},
series: [
{
- name: '访问来源',
type: 'pie',
radius: ['43%','60%'],
cneter: ['45%','53%'],
@@ -458,7 +485,7 @@
emphasis: {
label: {
show: true,
- fontSize: '40',
+ fontSize: '18',
fontWeight: 'bold'
}
},
@@ -518,6 +545,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 +573,6 @@
},
series: [
{
- name: '访问来源',
type: 'pie',
radius: ['43%', '60%'],
center: ['45%','53%'],
@@ -556,7 +584,7 @@
emphasis: {
label: {
show: true,
- fontSize: '40',
+ fontSize: '18',
fontWeight: 'bold'
}
},
@@ -564,55 +592,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)
@@ -649,87 +679,102 @@
//预警时间分布
getAlarmTimeDisEchars(data){
- let echarts = require('echarts');
- let myChart = echarts.init(document.getElementById('alarmTimeDisEchars'));
- let option = {
- title: {
- textStyle: {
- fontWeight: 'normal',
- fontSize: 16,
- color: '#000'
- },
- left: '3%',
- top: 25,
- textAlign:'center',
- text: '预警时间分布'
- },
- tooltip: {
- trigger: 'axis'
- },
- legend: {
- data: ['一键求助', '违禁品', '红色健康码', '体温异常'],
- top:'10%',
- right:'6%'
- },
- grid: {
- left: '1%',
- right: '7%',
- bottom: '10%',
- top:'25%',
- containLabel: true
- },
- xAxis: {
- type: 'category',
- boundaryGap: false,
- data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
- },
- yAxis: {
- type: 'value',
- splitLine: {
- show: true,
- lineStyle:{
- type:'dashed'
+ selAlarmTimeDis(data).then(res =>{
+ var data = res.data;
+ let echarts = require('echarts');
+ let myChart = echarts.init(document.getElementById('alarmTimeDisEchars'));
+ let option = {
+ title: {
+ textStyle: {
+ fontWeight: 'normal',
+ fontSize: 16,
+ color: '#000'
+ },
+ left: '3%',
+ top: 25,
+ textAlign:'center',
+ text: '预警时间分布'
+ },
+ tooltip: {
+ trigger: 'axis'
+ },
+ legend: {
+ data: ['一键求助', '违禁品', '红色健康码', '体温异常'],
+ top:'10%',
+ right:'6%'
+ },
+ grid: {
+ left: '1%',
+ right: '7%',
+ bottom: '10%',
+ top:'25%',
+ containLabel: true
+ },
+ xAxis: {
+ type: 'category',
+ 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',
+ splitLine: {
+ show: true,
+ lineStyle:{
+ type:'dashed'
+ }
}
- }
- },
- series: [
- {
- name: '一键求助',
- type: 'line',
- stack: '总量',
- data: [120, 132, 101, 134, 90, 230, 210]
- },
- {
- name: '违禁品',
- type: 'line',
- stack: '总量',
- data: [220, 182, 191, 234, 290, 330, 310]
- },
- {
- name: '红色健康码',
- type: 'line',
- stack: '总量',
- data: [150, 232, 201, 154, 190, 330, 410]
- },
- {
- name: '体温异常',
- type: 'line',
- stack: '总量',
- data: [320, 332, 301, 334, 390, 330, 320]
- }
- ]
- };
-
- myChart.setOption(option);
-
- //建议加上以下这一行代码，不加的效果图如下（当浏览器窗口缩小的时候）。超过了div的界限（红色边框）
- window.addEventListener('resize',function() {myChart.resize()});
+ },
+ series: [
+ {
+ name: '一键求助',
+ type: 'line',
+ stack: '总量',
+ data: data.data.alarmTimeDis
+ },
+ {
+ name: '违禁品',
+ type: 'line',
+ stack: '总量',
+ data: data.data.parcelTimeDis
+ },
+ {
+ name: '红色健康码',
+ type: 'line',
+ stack: '总量',
+ data: data.data.healthcodeTimeDis
+ },
+ {
+ name: '体温异常',
+ type: 'line',
+ stack: '总量',
+ data: data.data.animalTimeDis
+ }
+ ]
+ };
+ myChart.setOption(option);
+ //建议加上以下这一行代码，不加的效果图如下（当浏览器窗口缩小的时候）。超过了div的界限（红色边框）
+ window.addEventListener('resize',function() {myChart.resize()});
+ })
},
//点击按钮获取不同时间段的数据
getData(date){
+ var that = this;
+ that.activeClass=date;
var data = this.getDate(date);
- //调用方法
+ //调用方法获取数据
+ this.getStatisData(data);
+ },
+
+ getStatisData(data){
//统计预警总数
this.getStatisTotalData(data);
//预警数量统计
@@ -740,8 +785,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);
@@ -862,9 +907,6 @@
return quarterStartMonth;
}
-
-
-
},
}
@@ -872,11 +914,7 @@
</script>
<style lang="scss">
- .el-button .btn-color {
- color: rgb(255, 255, 255);
- background-color: #29C093;
- border-color: #29C093;
- }
+
@import '@/styles/alarmAnalysis/alarmAnalysis.scss'
</style>
\ No newline at end of file
--
Gitblit v1.9.3