From 9f13c9e3dcae6280428efc1035e59a21e43f3b0f Mon Sep 17 00:00:00 2001
From: shuishen <1109946754@qq.com>
Date: Fri, 02 Apr 2021 16:12:11 +0800
Subject: [PATCH] Merge branch 'master' of http://s16s652780.51mypc.cn:49896/r/jfpt-Vue
---
src/views/realTimePolice/real.vue | 38 +
src/router/views/index.js | 28
src/styles/alarmAnalysis/alarmAnalysis.scss | 244 +++++++++++
src/views/clientManagement/clientManagement.vue | 219 ++++++++-
src/views/system/cs.vue | 57 ++
src/views/alarmManagement/alarmAnalysis.vue | 715 +++++++++++++++++++++++++-------
6 files changed, 1,096 insertions(+), 205 deletions(-)
diff --git a/src/router/views/index.js b/src/router/views/index.js
index 3014528..22fe348 100644
--- a/src/router/views/index.js
+++ b/src/router/views/index.js
@@ -188,18 +188,32 @@
import( /* webpackChunkName: "views" */ '@/views/work/process/leave/detail')
}]
},
+ // {
+ // path: '/realTimePolice',
+ // component: Layout,
+ // redirect: '/realTimePolice/index',
+ // children: [{
+ // path: 'index',
+ // name: '实时报警',
+ // meta: {
+ // i18n: 'real'
+ // },
+ // component: () =>
+ // import( /* webpackChunkName: "views" */ '@/views/realTimePolice/real')
+ // }]
+ // },
{
- path: '/realTimePolice',
+ path: '/home',
component: Layout,
- redirect: '/realTimePolice/index',
+ redirect: '/home/index',
children: [{
path: 'index',
- name: '实时报警',
+ name: '研判洞察',
meta: {
- i18n: 'real'
+ i18n: 'home'
},
component: () =>
- import( /* webpackChunkName: "views" */ '@/views/realTimePolice/real')
+ import( /* webpackChunkName: "views" */ '@/views/home/home')
}]
},
{
@@ -234,7 +248,7 @@
{
path: '/suser',
component: Layout,
- redirect: '/suser/suser',
+ redirect: '/suser',
children: [{
path: 'index',
name: '客户管理',
@@ -242,7 +256,7 @@
i18n: 'suser'
},
component: () =>
- import( /* webpackChunkName: "views" */ '@/views/suser/suser')
+ import( /* webpackChunkName: "views" */ '@/views/system/cs')
}]
}, {
path: '/policeTracking',
diff --git a/src/styles/alarmAnalysis/alarmAnalysis.scss b/src/styles/alarmAnalysis/alarmAnalysis.scss
new file mode 100644
index 0000000..51c19b2
--- /dev/null
+++ b/src/styles/alarmAnalysis/alarmAnalysis.scss
@@ -0,0 +1,244 @@
+.alarm_title {
+ width: 100%;
+ height: 3%;
+}
+
+.alarm_title span {
+ font-size: 12px;
+ color: #7B91B4;
+ left: 1%;
+ position: relative;
+}
+
+.timeSearchBtn {
+ width: 100%;
+ height: 4%;
+}
+
+.timeSearchBtn .timeBtn {
+ position: relative;
+ left: 0.8%;
+ top: 15%;
+}
+
+.timeSearchBtn .timeSearch {
+ position: relative;
+ left: 1.2%;
+ top: 15.6%;
+}
+
+//预警总数统计
+.statisTotal {
+ position: relative;
+ left: 0.3%;
+ top: 2%;
+ width: 100%;
+ height: 10%;
+}
+
+.statisTotalAvueDataBox .el-row {
+ width: 99.7% !important;
+}
+
+//预警数量统计
+.alarmStatis {
+ background-color: #ffffff;
+ width: 98.6%;
+ height: 550px;
+ position: relative;
+ left: 0.8%;
+ top: 6%;
+}
+
+#alarmNumberStatis {
+ width: 75%;
+ height: 550px;
+ position: relative;
+ left: 1%;
+}
+
+.alarmClassifyStatis {
+ width: 25%;
+ height: 550px;
+ position: relative;
+ left: 75%;
+ top: -85%;
+}
+
+.alarmClassifyStatis .avue-data-cardtext {
+ width: 100%;
+ height: 90%;
+}
+
+.avue-data-cardText .item {
+ -webkit-box-shadow: 0px 0px 0px 0px #ccc;
+ box-shadow: 0px 0px 0px #ccc;
+}
+
+.avue-data-cardtext .el-row {
+ width: 250px !important;
+ height: 50px !important;
+ position: relative !important;
+ top: 30px !important;
+}
+
+.alarmClassifyStatis .el-col {
+ float: inherit !important;
+ width: 100% !important;
+ height: 100px !important;
+}
+
+.avue-data-cardText .item-header a {
+ font-size: 14px;
+ margin-left: 2px;
+ position: absolute;
+ bottom: 1px;
+}
+
+.avue-data-cardText .item-header i {
+ font-size: 14px;
+}
+
+//预警类型占比
+.alarmTypePro {
+ background-color: #ffffff;
+ width: 98.6%;
+ height: 450px;
+ position: relative;
+ left: 0.8%;
+ top: 8%;
+}
+
+#alarmTypeProEcharts {
+ width: 30%;
+ height: 450px;
+ position: relative;
+ left: 1%;
+}
+
+.alarmTypeProStatis {
+ //background-color: aqua;
+ width: 50%;
+ height: 100%;
+ position: relative;
+ top: -100%;
+ left: 30%;
+}
+
+.alarmTypeProStatis .el-row {
+ position: relative;
+ top: 120px;
+}
+
+//预警设备类型占比
+.alarmEquipmentPro {
+ background-color: #ffffff;
+ width: 98.6%;
+ height: 450px;
+ position: relative;
+ left: 0.8%;
+ top: 10%;
+}
+
+#alarmEquipmentProEcharts {
+ width: 30%;
+ height: 450px;
+ position: relative;
+ left: 1%;
+}
+
+.alarmEquipmentProStatis {
+ //background-color: aqua;
+ width: 35%;
+ height: 100%;
+ position: relative;
+ left: 30%;
+ top: -100%;
+}
+
+.alarmEquipmentProStatis .avue-crud {
+ position: relative;
+ top: 20%;
+}
+
+.alarmEquipmentProStatis .avue-crud__menu {
+ display: none;
+}
+
+//确认时间占比
+.confirmTimePro {
+ background-color: #ffffff;
+ width: 61.6%;
+ height: 450px;
+ position: relative;
+ left: 0.8%;
+ top: 12%;
+}
+
+#confirmTimeProEcharts {
+ 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;
+}
+
+//预警时间分布
+.alarmTimeDis {
+ background-color: #ffffff;
+ width: 98.6%;
+ height: 450px;
+ position: relative;
+ left: 0.8%;
+ top: -38.6%;
+}
+
+#alarmTimeDisEchars {
+ width: 100%;
+ height: 450px;
+ position: relative;
+ left: 1%;
+}
+
+//底部
+.low {
+ background-color: F0F2F5;
+ width: 100%;
+ height: 50px;
+ position: relative;
+ left: 0.8%;
+ top: -38%;
+}
\ No newline at end of file
diff --git a/src/views/alarmManagement/alarmAnalysis.vue b/src/views/alarmManagement/alarmAnalysis.vue
index 6e2b80b..bf4dde2 100644
--- a/src/views/alarmManagement/alarmAnalysis.vue
+++ b/src/views/alarmManagement/alarmAnalysis.vue
@@ -1,5 +1,5 @@
<template>
- <div>
+ <div class="big">
<!-- 标题 -->
<div class="alarm_title"><span>预警分析</span></div>
<!-- 时间按钮 -->
@@ -23,10 +23,39 @@
<div class="alarmClassifyStatis">
<avue-data-cardtext :option="alarmClassifyStatis"></avue-data-cardtext>
</div>
-
</div>
<!-- 预警类型占比 -->
- <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>
@@ -44,14 +73,43 @@
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: {
@@ -61,54 +119,120 @@
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'
},
];
},
+ //预警数量分布
+ 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;
+ var that = this;
that.alarmClassifyStatis.data = [
{
click: function (item) {
@@ -154,63 +278,439 @@
];
},
- //预警数量分布
- getAlarmNumberStatis(){
+
+ //预警类型占比统计
+ getAlarmTypeProEcharts(){
let echarts = require('echarts');
- let myChart = echarts.init(document.getElementById('alarmNumberStatis'));
+ let myChart = echarts.init(document.getElementById('alarmTypeProEcharts'));
let option = {
- color: ['#3AA7F0'],
+ 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) {
+ 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天前'
+ }
+ ];
+ },
+
+
+
+ //预警设备类型占比统计
+ 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) {
+ 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');
+ let myChart = echarts.init(document.getElementById('alarmTimeDisEchars'));
+ let option = {
title: {
textStyle: {
fontWeight: 'normal',
fontSize: 16,
color: '#000'
},
- left: '5%',
+ left: '3%',
top: 25,
textAlign:'center',
- text: '预警数量分布'
+ text: '预警时间分布'
},
- tooltip : {
- trigger: 'axis',
- axisPointer : {
- type : 'shadow'
- }
+ tooltip: {
+ trigger: 'axis'
+ },
+ legend: {
+ data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎'],
+ top:'10%',
+ right:'6%'
},
grid: {
left: '1%',
- right: '5%',
- bottom: '7%',
- top: '20%',
+ right: '7%',
+ bottom: '10%',
+ top:'25%',
containLabel: true
},
- xAxis : [
- {
- type : 'category',
- data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月',],
- axisTick: {
- alignWithLabel: true
+ xAxis: {
+ type: 'category',
+ boundaryGap: false,
+ data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
+ },
+ yAxis: {
+ type: 'value',
+ splitLine: {
+ show: true,
+ lineStyle:{
+ type:'dashed'
+ }
}
- }
- ],
- yAxis : [
- {
- type : 'value'
- }
- ],
- series : [
- {
- name:'每月花费',
- type:'bar',
- barWidth: '60%',
- data:[995,666,444,858,654,236,645,546,846,225,547,356]
- }
+ },
+ 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);
+ };
+
+ myChart.setOption(option);
- //建议加上以下这一行代码，不加的效果图如下（当浏览器窗口缩小的时候）。超过了div的界限（红色边框）
- window.addEventListener('resize',function() {myChart.resize()});
+ //建议加上以下这一行代码，不加的效果图如下（当浏览器窗口缩小的时候）。超过了div的界限（红色边框）
+ window.addEventListener('resize',function() {myChart.resize()});
},
//点击按钮获取不同时间段的数据
@@ -297,108 +797,5 @@
</script>
<style lang="scss">
- .alarm_title{
- width: 100%;
- height: 3%;
- }
-
- .alarm_title span{
- font-size: 12px;
- color: #7B91B4;
- left: 1%;
- position: relative;
- }
-
- .timeSearchBtn{
- width: 100%;
- height: 4%;
- }
-
- .timeSearchBtn .timeBtn{
- position: relative;
- left: 0.8%;
- top: 15%;
- }
-
- .timeSearchBtn .timeSearch{
- position: relative;
- left: 1.2%;
- top: 15.6%;
- }
-
- .statisTotal{
- position: relative;
- left: 0.3%;
- top: 2%;
- width: 100%;
- height: 10%;
- }
-
- /* .statisTotal statisTotalAvueDataBox{
- position: relative !important;
- top: 22% !important;
- left: 1% !important;
- } */
-
- .statisTotalAvueDataBox .el-row {
- width: 99.7% !important;
- }
-
- .alarmStatis{
- background-color: #ffffff;
- width: 98.6%;
- height: 550px;
- position: relative;
- left: 0.8%;
- top: 6%;
- }
-
- #alarmNumberStatis{
- width: 75%;
- height: 550px;
- position: relative;
- left: 2%;
- }
-
- .alarmClassifyStatis{
- width: 25%;
- height: 550px;
- position: relative;
- left: 75%;
- top: -85%;
- }
-
- .alarmClassifyStatis .avue-data-cardtext{
- width: 100%;
- height: 90%;
- }
-
- .avue-data-cardText .item{
- -webkit-box-shadow: 0px 0px 0px 0px #ccc;
- box-shadow: 0px 0px 0px #ccc;
- }
-
- .avue-data-cardtext .el-row{
- width: 250px !important;
- height: 50px !important;
- position: relative !important;
- top: 30px !important;
- }
-
- .alarmClassifyStatis .el-col{
- float: inherit !important;
- width: 100% !important;
- height: 100px !important;
- }
-
- .avue-data-cardText .item-header a{
- font-size: 14px;
- margin-left: 2px;
- position:absolute;
- bottom: 1px;
- }
-
- .avue-data-cardText .item-header i{
- font-size: 14px;
- }
+ @import '@/styles/alarmAnalysis/alarmAnalysis.scss'
</style>
\ No newline at end of file
diff --git a/src/views/clientManagement/clientManagement.vue b/src/views/clientManagement/clientManagement.vue
index 70e040d..a8b5b5f 100644
--- a/src/views/clientManagement/clientManagement.vue
+++ b/src/views/clientManagement/clientManagement.vue
@@ -18,6 +18,8 @@
@row-update="rowUpdate"
@row-save="rowSave"
:row-style="rowStyle"
+ @contextmenu.prevent.native=""
+ @row-contextmenu="rightClick"
row-class-name="tabFontSize"
:before-open="beforeOpen"
@search-change="searchChange"
@@ -44,22 +46,22 @@
}}
</el-tag>
</template>
- <template slot-scope="{ type, size, row }" slot="menu">
- <el-button
- icon="el-icon-video-camera-solid"
- :size="size"
- :type="type"
- @click.stop="handleStart(row)"
- >视频
- </el-button>
- <el-button
- icon="el-icon-location-outline"
- :size="size"
- :type="type"
- @click.stop="handleMap(row)"
- >定位
- </el-button>
- </template>
+<!-- <template slot-scope="{ type, size, row }" slot="menu">-->
+<!-- <el-button-->
+<!-- icon="el-icon-video-camera-solid"-->
+<!-- :size="size"-->
+<!-- :type="type"-->
+<!-- @click.stop="handleStart(row)"-->
+<!-- >视频-->
+<!-- </el-button>-->
+<!-- <el-button-->
+<!-- icon="el-icon-location-outline"-->
+<!-- :size="size"-->
+<!-- :type="type"-->
+<!-- @click.stop="handleMap(row)"-->
+<!-- >定位-->
+<!-- </el-button>-->
+<!-- </template>-->
<template slot-scope="{ row }" slot="dxzt">
<el-tag>{{
@@ -75,6 +77,12 @@
</avue-crud>
+ <div v-show="menuVisible">
+ <ul id="menu" class="menu">
+ <li class="menu_item" @click.stop="handleStart">视频</li>
+ <li class="menu_item" @click.stop="handleMap">定位</li>
+ </ul>
+ </div>
<el-drawer
title="电子地图"
@@ -195,8 +203,10 @@
form: {},
query: {},
showMap: false,
+ selectRow:null,
initFlag: true,
loading: true,
+ menuVisible:false,
page: {
pageSize: 10,
currentPage: 1,
@@ -238,14 +248,15 @@
calcHeight: 80,
labelWidth: '100',
dialogWidth: 950,
- menuWidth: 250,
+ menuWidth: 150,
align:"center",
size: "mini",
tip: false,
searchShow: true,
searchMenuSpan: 4,
searchSpan: 4,
- border: true,
+ border: false,
+ stripe:true,
index: true,
viewBtn: true,
selection: true,
@@ -330,12 +341,10 @@
label: "缴费状态",
prop: "jfzt",
slot: true,
- align: "center",
addDisplay: false,
editDisplay: false,
}, {
label: "布撤防状态",
- align: "center",
prop: "devicestate",
type: "select",
slot: true,
@@ -358,7 +367,6 @@
},
{
label: "设备状态",
- align: "center",
prop: "dxzt",
slot: true,
addDisplay: false,
@@ -390,6 +398,10 @@
value: "dictValue"
},
dicUrl: "/api/blade-system/dict-biz/child-list?parentId=1357568691367661569",
+ hide: true,
+ addDisplay: true,
+ editDisplay: true,
+ viewDisplay: true,
},
{
label: "省份",
@@ -406,7 +418,11 @@
cascaderItem: ["city", "district"],
dicUrl: "/api/blade-system/region/select",
span: 6,
- className: "cityClass1"
+ className: "cityClass1",
+ hide: true,
+ addDisplay: true,
+ editDisplay: true,
+ viewDisplay: true,
},
{
label: "地市",
@@ -424,7 +440,11 @@
dicUrl: "/api/blade-system/region/select?code={{key}}",
span: 3,
labelWidth: "0",
- className: "cityClass2"
+ className: "cityClass2",
+ hide: true,
+ addDisplay: true,
+ editDisplay: true,
+ viewDisplay: true,
},
{
label: "区县",
@@ -442,45 +462,77 @@
dicUrl: "/api/blade-system/region/select?code={{key}}",
span: 3,
labelWidth: "0",
- className: "cityClass3"
+ className: "cityClass3",
+ hide: true,
+ addDisplay: true,
+ editDisplay: true,
+ viewDisplay: true,
}, {
label: "街道",
prop: "street",
- width: 200
+ width: 200,
+ hide: true,
+ addDisplay: true,
+ editDisplay: true,
+ viewDisplay: true,
},
{
label: "负责人",
prop: "oneContacts",
- width: 72
+ width: 72,
+ hide: true,
+ addDisplay: true,
+ editDisplay: true,
+ viewDisplay: true,
},
{
label: "负责人电话",
prop: "onePhone",
- width: 110
+ width: 110,
+ hide: true,
+ addDisplay: true,
+ editDisplay: true,
+ viewDisplay: true,
}, {
label: "到期时间",
prop: "expireTime",
type: "datetime",
format: "yyyy-MM-dd",
valueFormat: "yyyy-MM-dd HH:mm:ss",
- width: 130
+ width: 130,
+ hide: true,
+ addDisplay: true,
+ editDisplay: true,
+ viewDisplay: true,
}, {
label: "缴费信息",
prop: "pay",
+ hide: true,
+ addDisplay: true,
+ editDisplay: true,
+ viewDisplay: true,
}, {
label: "安装时间",
prop: "stime",
type: "datetime",
format: "yyyy-MM-dd",
valueFormat: "yyyy-MM-dd HH:mm:ss",
- width: 130
+ width: 130,
+ hide: true,
+ addDisplay: true,
+ editDisplay: true,
+ viewDisplay: true,
}, {
label: "心跳时间",
prop: "heartbeat",
type: "datetime",
format: "yyyy-MM-dd",
valueFormat: "yyyy-MM-dd HH:mm:ss",
- width: 130
+ width: 130,
+ hide: true,
+ addDisplay: true,
+ editDisplay: true,
+ viewDisplay: true,
},
]
@@ -726,6 +778,7 @@
});
}, handleStart(row) {
+ row = this.selectRow;
var arr = [];
this.$store.state.tags.tagList.forEach(item => {
if (item.label != "视频") {
@@ -737,13 +790,37 @@
path: `/real/video/`, query: row
});
}, handleMap(row) {
+ row = this.selectRow;
this.showMap = true;
this.$nextTick(() => {
this.$refs.mapDiv.onload = () => {
window.frames[0].init("equipment", {x: row.jd, y: row.wd});
};
})
+ },rightClick(row, event) {
+ this.selectRow = row;
+ this.menuVisible = false; // 先把模态框关死，目的是 第二次或者第n次右键鼠标的时候 它默认的是true
+ this.menuVisible = true; // 显示模态窗口，跳出自定义菜单栏
+ var menu = document.querySelector('#menu');
+ this.styleMenu(menu);
},
+ foo() {
+ // 取消鼠标监听事件 菜单栏
+ this.menuVisible = false;
+ document.removeEventListener('click', this.foo); // 要及时关掉监听，不关掉的是一个坑，不信你试试，虽然前台显示的时候没有啥毛病，加一个alert你就知道了
+ },
+ styleMenu(menu) {
+ let cha = document.body.clientHeight - event.clientY
+ //console.log(document.body.clientHeight,event.clientY,cha)
+ // 防止菜单太靠底，根据可视高度调整菜单出现位置
+ if (cha < 150) {
+ menu.style.top = event.clientY -120 - (120) + 'px'
+ } else {
+ menu.style.top = event.clientY -10 - (120) + 'px'
+ }
+ menu.style.left = event.clientX + 10 - (240) + 'px'
+ document.addEventListener('click', this.foo); // 给整个document新增监听鼠标事件，点击任何位置执行foo方法
+ }
}
};
</script>
@@ -756,6 +833,51 @@
.payWin .el-dialog__body {
padding-top: 0px !important;
+ }
+
+
+ /*页面样式*/
+ .el-card__body .cityClass1 {
+ width: 155px;
+ padding-right: 0px !important;
+ }
+
+ .el-card__body .cityClass2 {
+ width: 100px;
+ padding-left: 0px !important;
+ padding-right: 0px !important;
+ }
+
+ .el-card__body .cityClass3 {
+ width: 100px;
+ padding-left: 0px !important;
+ padding-right: 0px !important;
+ }
+
+ /*新增窗体样式*/
+ .el-dialog .cityClass1 {
+ width: 220px;
+ padding-right: 0px !important;
+ }
+
+ .el-dialog .cityClass2 {
+ width: 110px;
+ padding-left: 5px !important;
+ padding-right: 5px !important;
+ }
+
+ .el-dialog .cityClass3 {
+ width: 110px;
+ padding-left: 0px !important;
+ padding-right: 0px !important;
+ }
+
+ .cityClass2 div label {
+ display: none;
+ }
+
+ .cityClass3 div label {
+ display: none;
}
.real-jf-dialog {
@@ -799,4 +921,41 @@
font-size: 15px;
}
+ .menu_item {
+ cursor:pointer;
+ line-height: 20px;
+ text-align: center;
+ margin-top: 0px;
+ }
+
+ .menu {
+ height: auto;
+ width: 120px;
+ color: #606266;
+ position: absolute;
+ padding: 0px;
+ box-sizing: border-box;
+ /*border: 1px solid #999999;*/
+ text-align: center;
+ background-color: #fff;
+ border-radius: .25rem;
+ box-shadow: 0 .5rem 1rem rgba(0,0,0,.15);
+ }
+ .menu li:hover {
+ background-color: rgba(232,237,250,.6);
+ color: darkslategrey;
+ }
+ .menu li{
+ position: relative;
+ display: flex;
+ font-size: 14px;
+ align-items: center;
+ height: 34px;
+ line-height: 34px;
+ outline: none;
+ margin-top: 0px;
+ padding-left: 20px;
+ padding-right: 5px;
+ }
+
</style>
diff --git a/src/views/realTimePolice/real.vue b/src/views/realTimePolice/real.vue
index 0871bfc..cd9b25d 100644
--- a/src/views/realTimePolice/real.vue
+++ b/src/views/realTimePolice/real.vue
@@ -19,6 +19,7 @@
@row-save="rowSave"
:before-open="beforeOpen"
:row-style="rowStyle"
+ row-class-name="tabFontSize"
@search-change="searchChange"
@search-reset="searchReset"
@selection-change="selectionChange"
@@ -43,7 +44,7 @@
<template slot="menuLeft">
<el-button
v-bind:class="activeClass == 0 ? 'btn-color' : ''"
- size="small"
+ size="mini"
@click="getBRdata(0)"
>本日
</el-button>
@@ -433,13 +434,14 @@
calcHeight: 30,
labelWidth: "100",
size: "mini",
+ border: false,
+ stripe:true,
menuWidth: 240,
dialogWidth: 950,
tip: false,
searchShow: true,
searchMenuSpan: 3,
align:"center",
- border: true,
index: true,
viewBtn: true,
selection: true,
@@ -450,7 +452,7 @@
prop: "waringType",
search: false,
searchSpan: 3,
- width: 130,
+ width: 85,
className: "waringTypeClass",
searchPlaceholder: "请选择",
type: "select",
@@ -465,7 +467,7 @@
{
label: "报警时间",
type: "datetime",
- width: 130,
+ width: 160,
format: "yyyy-MM-dd HH:mm:ss",
valueFormat: "yyyy-MM-dd HH:mm:ss",
prop: "alarmTime",
@@ -499,11 +501,12 @@
{
label: "负责人电话",
prop: "onePhone",
- width: 96,
+ width: 110,
},
{
label: "报警人",
prop: "galarmPeople",
+ width: 90
},
{
label: "报警人电话",
@@ -512,7 +515,6 @@
},
{
label: "事发地址",
- width: 200,
prop: "place",
},
{
@@ -562,6 +564,10 @@
dicUrl: "/api/blade-system/region/select",
span: 6,
className: "cityClass1",
+ hide: true,
+ addDisplay: true,
+ editDisplay: true,
+ viewDisplay: true,
},
{
label: "地市",
@@ -580,6 +586,10 @@
span: 3,
labelWidth: "0",
className: "cityClass2",
+ hide: true,
+ addDisplay: true,
+ editDisplay: true,
+ viewDisplay: true,
},
{
label: "区县",
@@ -598,10 +608,15 @@
span: 3,
labelWidth: "0",
className: "cityClass3",
+ hide: true,
+ addDisplay: true,
+ editDisplay: true,
+ viewDisplay: true,
},
{
label: "接警人",
prop: "alarmPeople",
+ width: 90
},
{
label: "接警时间",
@@ -610,6 +625,10 @@
valueFormat: "yyyy-MM-dd HH:mm:ss",
width: 130,
prop: "jjTime",
+ hide: true,
+ addDisplay: true,
+ editDisplay: true,
+ viewDisplay: true,
},
],
},
@@ -887,7 +906,7 @@
return a.jtype - b.jtype;
});
-
+
this.data = data.records;
@@ -1483,4 +1502,9 @@
background-color: rgb(64, 158, 255);
border-color: rgb(64, 158, 255);
}
+
+.tabFontSize{
+ font-size: 15px;
+}
+
</style>
diff --git a/src/views/system/cs.vue b/src/views/system/cs.vue
index 5c0b87e..aef990b 100644
--- a/src/views/system/cs.vue
+++ b/src/views/system/cs.vue
@@ -9,6 +9,7 @@
:permission="permissionList"
:before-open="beforeOpen"
@row-del="rowDel"
+ row-class-name="tabFontSize"
@row-update="rowUpdate"
@row-save="rowSave"
@search-change="searchChange"
@@ -20,7 +21,7 @@
@on-load="onLoad">
<template slot="menuLeft">
<el-button type="danger"
- size="small"
+ size="mini"
icon="el-icon-delete"
v-if="permission.tenant_delete"
plain
@@ -92,10 +93,12 @@
option: {
height: 'auto',
calcHeight: 80,
+ size: "mini",
tip: false,
searchShow: true,
searchMenuSpan: 6,
- border: true,
+ border: false,
+ stripe:true,
index: true,
selection: true,
viewBtn: true,
@@ -847,4 +850,54 @@
</script>
<style>
+
+ /*页面样式*/
+ .el-card__body .cityClass1 {
+ width: 155px;
+ padding-right: 0px !important;
+ }
+
+ .el-card__body .cityClass2 {
+ width: 100px;
+ padding-left: 0px !important;
+ padding-right: 0px !important;
+ }
+
+ .el-card__body .cityClass3 {
+ width: 100px;
+ padding-left: 0px !important;
+ padding-right: 0px !important;
+ }
+
+ /*新增窗体样式*/
+ .el-dialog .cityClass1 {
+ width: 220px;
+ padding-right: 0px !important;
+ }
+
+ .el-dialog .cityClass2 {
+ width: 110px;
+ padding-left: 5px !important;
+ padding-right: 5px !important;
+ }
+
+ .el-dialog .cityClass3 {
+ width: 110px;
+ padding-left: 0px !important;
+ padding-right: 0px !important;
+ }
+
+ .cityClass2 div label {
+ display: none;
+ }
+
+ .cityClass3 div label {
+ display: none;
+ }
+
+ .tabFontSize{
+ font-size: 15px;
+ }
+
+
</style>
--
Gitblit v1.9.3