From 0f7c0e33ac6110e7ccbd93c133ea5516f96b4df8 Mon Sep 17 00:00:00 2001
From: liuyg <376836862@qq.com>
Date: Thu, 08 Apr 2021 10:24:58 +0800
Subject: [PATCH] 4.8
---
src/views/alarmManagement/alarmAnalysis.vue | 814 ----------------------------------------------------------
1 files changed, 0 insertions(+), 814 deletions(-)
diff --git a/src/views/alarmManagement/alarmAnalysis.vue b/src/views/alarmManagement/alarmAnalysis.vue
index 4f42371..e69de29 100644
--- a/src/views/alarmManagement/alarmAnalysis.vue
+++ b/src/views/alarmManagement/alarmAnalysis.vue
@@ -1,814 +0,0 @@
-<template>
- <div class="big">
- <!-- 标题 -->
- <div class="alarm_title"><span>预警分析</span></div>
- <!-- 时间按钮 -->
- <div class="timeSearchBtn">
- <el-button-group class="timeBtn">
- <el-button
- v-bind:class="activeClass == 1 ? 'btn-color' : ''"
- size="mini"
- @click="getData(1)">
- 本周
- </el-button>
-
- <el-button
- v-bind:class="activeClass == 2 ? 'btn-color' : ''"
- size="mini"
- @click="getData(2)">
- 月初至今
- </el-button>
-
- <el-button
- v-bind:class="activeClass == 3 ? 'btn-color' : ''"
- size="mini"
- @click="getData(3)">
- 季度至今
- </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>
- </div>
- <!-- 监测点 -->
- <div class="statisTotal">
- <avue-data-box :option="statisToTalData" class="statisTotalAvueDataBox"></avue-data-box>
- </div>
- <!-- 预警数量分布 -->
- <div class="alarmStatis">
- <div id="alarmNumberStatis">
- </div>
- <div class="alarmClassifyStatis">
- <avue-data-cardtext :option="alarmClassifyStatis"></avue-data-cardtext>
- </div>
- </div>
- <!-- 预警类型占比 -->
- <div class="alarmTypePro">
- <div id="alarmTypeProEcharts"></div>
- <div class="alarmTypeProStatis">
- <avue-data-cardtext :option="alarmTypeProStatis"></avue-data-cardtext>
- </div>
- </div>
- <!-- 预警设备类型占比 -->
- <div class="alarmEquipmentPro">
- <div id="alarmEquipmentProEcharts"></div>
- <div class="alarmEquipmentProStatis">
- <avue-crud :data="alarmEquipmentProStatisData" :option="alarmEquipmentProStatisOption"></avue-crud>
- </div>
- </div>
- <!-- 确认时间占比 -->
- <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">
- <div id="alarmTimeDisEchars"></div>
- </div>
-
- <!-- 底部 -->
- <div class="low"></div>
- </div>
-</template>
-
-<script>
- import echarts from 'echarts'
- import {selectIndexCount} from "@/api/statis/statis";
-
- export default {
- data(){
- return {
- activeClass:2,
- statisToTalData: {
- span:6,
- data: []
- },
- dateTime: '',
- alarmClassifyStatis:{
- span:6,
- data: []
- },
- alarmTypeProStatis:{
- span:10,
- height:100,
- data: []
- },
- alarmEquipmentProStatisData:[],
- alarmEquipmentProStatisOption:{},
- confirmTimeProStatis:{
- span:10,
- height:100,
- data: []
- },
- confirmAverageSpeedData:[],
- confirmAverageSpeedOption:{}
- };
- },
-
- mounted() {
- //统计预警总数
- this.getStatisTotalData();
- //预警数量统计
- this.getAlarmNumberStatis();
- //预警分类统计
- this.getAlarmClassifyStatis();
- //预警类型占比统计
- this.getAlarmTypeProEcharts();
- this.getAlarmTypeProStatis();
- //预警设备类型占比统计
- this.getAlarmEquipmentProEcharts();
- this.getAlarmEquipmentProStatis();
- //确认时间占比统计
- this.getConfirmTimeProEcharts();
- this.getConfirmTimeProStatis();
- this.confirmAverageSpeedStatis();
- //预警时间分布统计
- this.getAlarmTimeDisEchars();
- },
-
- methods: {
- //警情统计总数
- getStatisTotalData(data){
- selectIndexCount(data).then(res => {
- console.log(res.data);
- this.form = res.data.data;
- });
- var that = this;
- that.statisToTalData.data = [
- {
- click: function (item) {
- },
- title: '警情总数',
- count: 12332,
- icon: 'el-icon-warning',
- color: '#F34A4A'
- },
- {
- click: function (item) {
- },
- title: '违禁包裹数',
- count: 33,
- icon: 'el-icon-warning',
- color: '#FF9836'
- },
- {
- click: function (item) {
- },
- title: '违禁物品数',
- count: 2223,
- icon: 'el-icon-setting',
- color: '#8058A5'
- },
- {
- click: function (item) {
- },
- title: '在线设备数',
- count: 2223,
- icon: 'el-icon-setting',
- color: '#29C093'
- },
- {
- click: function (item) {
- },
- title: '客户数量',
- count: 2223,
- icon: 'el-icon-setting',
- color: '#3AA7F0'
- }
- ];
- },
-
- //预警数量分布
- getAlarmNumberStatis(){
- let echarts = require('echarts');
- let myChart = echarts.init(document.getElementById('alarmNumberStatis'));
- let option = {
- title: {
- textStyle: {
- fontWeight: 'normal',
- fontSize: 16,
- color: '#000'
- },
- left: '1%',
- top: 25,
- textAlign:'left',
- text: '预警时间分布'
- },
- tooltip: {
- trigger: 'axis'
- },
- grid: {
- left: '3%',
- right: '7%',
- bottom: '10%',
- top:'20%',
- containLabel: true
- },
- xAxis: {
- type: 'category',
- boundaryGap: false,
- data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
- },
- 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()});
- },
-
- //警情类别统计总数
- getAlarmClassifyStatis(){
- var that = this;
- that.alarmClassifyStatis.data = [
- {
- click: function (item) {
- },
- title:'一键求助',
- color:'yellow',
- target:'_blank',
- name:'日平均一键求助数',
- date:'1.00'
- },
- {
- click: function (item) {
- },
- title:'违禁品',
- color:'green',
- name:'日平均违禁品数',
- date:'3.00'
- },
- {
- click: function (item) {
- },
- title:'红色健康码',
- color:'#3fa1ff',
- name:'日平均红色健康码数',
- date:'1.00'
- },
- {
- click: function (item) {
- },
- title:'体温异常',
- color:'red',
- name:'日平均体温异常数',
- date:'10.00'
- }
- ];
- },
-
-
- //预警类型占比统计
- getAlarmTypeProEcharts(){
- let echarts = require('echarts');
- let myChart = echarts.init(document.getElementById('alarmTypeProEcharts'));
- let option = {
- title: {
- textStyle: {
- fontWeight: 'normal',
- fontSize: 16,
- color: '#000'
- },
- left: '1%',
- top: 25,
- textAlign:'left',
- text: '预警类型占比'
- },
- tooltip: {
- trigger: 'item'
- },
- grid: {
- left: '1%',
- right: '10%',
- bottom: '5%',
- top:'25%',
- containLabel: true
- },
- series: [
- {
- name: '访问来源',
- type: 'pie',
- radius: ['43%','60%'],
- center: ['45%','53%'],
- avoidLabelOverlap: false,
- label: {
- show: false,
- position: 'center'
- },
- emphasis: {
- label: {
- show: true,
- fontSize: '40',
- fontWeight: 'bold'
- }
- },
- labelLine: {
- show: false
- },
- data: [
- {value: 1048, name: '搜索引擎'},
- {value: 735, name: '直接访问'},
- {value: 580, name: '邮件营销'},
- {value: 484, name: '联盟广告'},
- {value: 300, name: '视频广告'}
- ]
- }
- ]
- };
- myChart.setOption(option);
-
- //建议加上以下这一行代码，不加的效果图如下（当浏览器窗口缩小的时候）。超过了div的界限（红色边框）
- window.addEventListener('resize',function() {myChart.resize()});
- },
-
-
- //警情类别统计总数(分类占比)
- getAlarmTypeProStatis(){
- var that = this;
- that.alarmTypeProStatis.data = [
- {
- click: function (item) {
- },
- title:'一键求助',
- color:'yellow',
- target:'_blank',
- name:'0',
- date:'0.00%'
- },
- {
- click: function (item) {
- },
- title:'违禁品',
- color:'green',
- name:'0',
- date:'0.00%'
- },
- {
- click: function (item) {
- },
- title:'红色健康码',
- color:'#3fa1ff',
- name:'0',
- date:'0.00%'
- },
- {
- click: function (item) {
- },
- title:'体温异常',
- color:'red',
- name:'0',
- date:'0.00%'
- }
- ];
- },
-
-
-
- //预警设备类型占比统计
- getAlarmEquipmentProEcharts(){
- let echarts = require('echarts');
- let myChart = echarts.init(document.getElementById('alarmEquipmentProEcharts'));
- let option = {
- title: {
- textStyle: {
- fontWeight: 'normal',
- fontSize: 16,
- color: '#000'
- },
- left: '1%',
- top: 25,
- textAlign:'left',
- text: '预警设备类型占比'
- },
- tooltip: {
- trigger: 'item'
- },
- grid: {
- left: '1%',
- right: '10%',
- bottom: '5%',
- top:'25%',
- containLabel: true
- },
- series: [
- {
- name: '访问来源',
- type: 'pie',
- radius: ['43%','60%'],
- cneter: ['45%','53%'],
- avoidLabelOverlap: false,
- label: {
- show: false,
- position: 'center'
- },
- emphasis: {
- label: {
- show: true,
- fontSize: '40',
- fontWeight: 'bold'
- }
- },
- labelLine: {
- show: false
- },
- data: [
- {value: 1048, name: '搜索引擎'},
- {value: 735, name: '直接访问'},
- {value: 580, name: '邮件营销'},
- {value: 484, name: '联盟广告'},
- {value: 300, name: '视频广告'}
- ]
- }
- ]
- };
- myChart.setOption(option);
-
- //建议加上以下这一行代码，不加的效果图如下（当浏览器窗口缩小的时候）。超过了div的界限（红色边框）
- window.addEventListener('resize',function() {myChart.resize()});
- },
-
- //预警设备类型占比统计(分类表格)
- getAlarmEquipmentProStatis(){
- var that = this;
- that.alarmEquipmentProStatisData=[
- {
- name:'一键求助',
- sex:'1',
- date:'100%'
- }
- ];
- that.alarmEquipmentProStatisOption={
- menu:false,
- menuBtn:false,
- page:false,
- align:'center',
- menuAlign:'center',
- column:[
- {
- label:'预警设备类型',
- prop:'name'
- },
- {
- label:'预警次数',
- prop:'sex'
- },{
- label: "占比",
- prop: "date"
- }
- ]
- }
-
-
- },
-
-
- //确认时间占比统计
- getConfirmTimeProEcharts(){
- let echarts = require('echarts');
- let myChart = echarts.init(document.getElementById('confirmTimeProEcharts'));
- let option = {
- title: {
- textStyle: {
- fontWeight: 'normal',
- fontSize: 16,
- color: '#000'
- },
- left: '1%',
- top: 25,
- textAlign:'left',
- text: '确认时间占比'
- },
- tooltip: {
- trigger: 'item'
- },
- grid: {
- left: '1%',
- right: '10%',
- bottom: '5%',
- top:'25%',
- containLabel: true
- },
- series: [
- {
- name: '访问来源',
- type: 'pie',
- radius: ['43%', '60%'],
- center: ['45%','53%'],
- avoidLabelOverlap: false,
- label: {
- show: false,
- position: 'center'
- },
- emphasis: {
- label: {
- show: true,
- fontSize: '40',
- fontWeight: 'bold'
- }
- },
- labelLine: {
- show: false
- },
- data: [
- {value: 1048, name: '搜索引擎'},
- {value: 735, name: '直接访问'},
- {value: 580, name: '邮件营销'},
- {value: 484, name: '联盟广告'},
- {value: 300, name: '视频广告'}
- ]
- }
- ]
- };
- myChart.setOption(option);
-
- //建议加上以下这一行代码，不加的效果图如下（当浏览器窗口缩小的时候）。超过了div的界限（红色边框）
- window.addEventListener('resize',function() {myChart.resize()});
- },
-
- //确认时间占比（分类）
- getConfirmTimeProStatis(){
- 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',
- }
- ];
- },
-
- //预警平均速度排行(table)
- confirmAverageSpeedStatis(){
- var that = this;
- that.confirmAverageSpeedData=[
- {
- name:'mis_zhang',
- 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');
- 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'
- }
- }
- },
- 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()});
- },
-
- //点击按钮获取不同时间段的数据
- getData(data){
- var that = this;
- var today = new Date();
- var startTime ='';
- var endTime = '';
- //本周的时间
- if(data==1){
- startTime = this.showWeekFirstDay(today);
- endTime = this.showToDay(today);
- that.dateTime = [startTime,endTime];
- }
- //月初至今的时间
- if(data==2){
- startTime = this.showMonthFirstDay(today);
- endTime = this.showToDay(today);
- that.dateTime = [startTime,endTime];
- }
- //本季度初至今的时间
- if(data==3){
- startTime = this.getQuarterStartDate(today);
- endTime = this.showToDay(today);
- that.dateTime = [startTime,endTime];
- }
- //封装数据
- var data = {};
- data ={
- startTime:this.dateTime[0],
- endTime:this.dateTime[1]
- }
- console.log(data,111);
- //调用方法
- },
-
- //本日
- showToDay(Nowdate){
- var M=Number(Nowdate.getMonth())+1;
- console.log(Nowdate.getFullYear,111);
- return Nowdate.getFullYear()+"-"+M+"-"+Nowdate.getDate();
- },
-
- //本周第一天
- showWeekFirstDay(Nowdate){
- var WeekFirstDay=new Date(Nowdate-(Nowdate.getDay()-1)*86400000);
- var M=Number(WeekFirstDay.getMonth())+1;
- return WeekFirstDay.getFullYear()+"-"+M+"-"+WeekFirstDay.getDate();
- },
-
- //本月第一天
- showMonthFirstDay(Nowdate){
- var MonthFirstDay=new Date(Nowdate.getFullYear(),Nowdate.getMonth(),1);
- var M=Number(MonthFirstDay.getMonth())+1
- return MonthFirstDay.getFullYear()+"-"+M+"-"+MonthFirstDay.getDate();
- },
-
- //本季度的第一天
- getQuarterStartDate(Nowdate){
- var quarterStartDate = this.getQuarterStartMonth(Nowdate);
- return Nowdate.getFullYear()+"-"+quarterStartDate+"-"+"01";
- },
-
-
- //本季度的第一个月份
- getQuarterStartMonth(Nowdate){
- var nowMonth = Nowdate.getMonth()+1;
- console.log(nowMonth,555);
- var quarterStartMonth = 0;
- if(nowMonth<4){
- quarterStartMonth = "0"+1;
- }
- if(3<nowMonth && nowMonth<7){
- quarterStartMonth = "0"+4;
- }
- if(6<nowMonth && nowMonth<10){
- quarterStartMonth = "0"+7;
- }
- if(nowMonth>9){
- quarterStartMonth = 10;
- }
- return quarterStartMonth;
- }
-
-
-
-
- },
-
- }
-
-
-</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