<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="small"
|
@click="getData(1)">
|
本周
|
</el-button>
|
|
<el-button
|
v-bind:class="activeClass == 2 ? 'btn-color' : ''"
|
size="small"
|
@click="getData(2)">
|
月初至今
|
</el-button>
|
|
<el-button
|
v-bind:class="activeClass == 3 ? 'btn-color' : ''"
|
size="small"
|
@click="getData(3)">
|
季度至今
|
</el-button>
|
</el-button-group>
|
<el-date-picker
|
class="timeSearch"
|
size="small"
|
v-model="dateTime"
|
type="daterange"
|
@change="timeChange"
|
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="alarmTypeTotal">
|
<div class="numAlarmType"><span>{{alarmTypeTotal}}</span></div>
|
<div class="textAlarmType"><span>总预警数</span></div>
|
</div>
|
<div class="alarmTypeProStatis">
|
<avue-data-cardtext :option="alarmTypeProStatis"></avue-data-cardtext>
|
</div>
|
</div>
|
<!-- 预警设备类型占比 -->
|
<div class="alarmEquipmentPro" style="display:none">
|
<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="confirmTimeTotal">
|
<div class="numConfirmTime"><span>{{confirmTimeTotal}}</span></div>
|
<div class="textConfirmTime"><span>确认预警数</span></div>
|
</div>
|
<div class="confirmTimeProStatis">
|
<avue-data-cardtext :option="confirmTimeProStatis"></avue-data-cardtext>
|
</div>
|
</div>
|
<!-- 预警平均确认速度排行 -->
|
<div class="confirmAverageSpeed">
|
<div class="confirmAverageSpeedTitle"><span>预警平均确认速度排行</span></div>
|
<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,selectAlertScount,selAlarmDayAveragePro,selConfirmTimePro,selAlarmTimeDis} from "@/api/statis/statis";
|
import alarmVue from '../alarm/alarm.vue';
|
|
export default {
|
data(){
|
return {
|
activeClass:2,
|
alarmTypeTotal:0,
|
confirmTimeTotal:0,
|
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.getData(2);
|
window.handleStartAlarm=this.handleStartAlarm;
|
window.handleStartParcel=this.handleStartParcel;
|
window.handleStartParcelKind=this.handleStartParcelKind;
|
window.handleStartEquipment=this.handleStartEquipment;
|
window.handleStartSuser=this.handleStartSuser;
|
window.handleStartAnimalHeat=this.handleStartAnimalHeat;
|
window.handleStartHealthcode=this.handleStartHealthcode;
|
},
|
|
methods: {
|
//日期选好后触发
|
timeChange(){
|
//清空选项按钮标记
|
var that = this;
|
var time = this.dateTime;
|
var startTime = time[0]+"";
|
if(startTime.indexOf("-")==-1){
|
//修改时间格式
|
time[0]=this.timeFormat(time[0]);
|
time[1]=this.timeFormat(time[1]);
|
}
|
//如果开始时间和结束时间相同，则修改结束时间
|
if(time[0]==time[1]){
|
time[1]= time[0].substring(0,10)+" 23:59:59";
|
}
|
that.activeClass = 0;
|
var data = {};
|
data ={
|
startTime:time[0],
|
endTime:time[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 => {
|
var that = this;
|
var time = this.dateTime;
|
var startTime = time[0]+"";
|
if(startTime.indexOf("-")==-1){
|
//修改时间格式
|
time[0]=this.timeFormat(time[0]);
|
time[1]=this.timeFormat(time[1]);
|
}
|
//如果开始时间和结束时间相同，则修改结束时间
|
if(time[0]==time[1]){
|
time[1]= time[0].substring(0,10)+" 23:59:59";
|
}
|
that.statisToTalData.data = [
|
{
|
click: function (item) {
|
var data = [];
|
data.push({
|
startTime:time[0],
|
endTime:time[1],
|
// waringType:'紧急求救',
|
})
|
window.parent.handleStartAlarm(data);
|
},
|
title: '警情总数',
|
count: res.data.data[0].value,
|
icon: 'el-icon-message-solid',
|
color: '#F34A4A'
|
},
|
{
|
click: function (item) {
|
var data =[];
|
// // 当前时间
|
// var date = new Date();
|
// //年
|
// var Y = date.getFullYear();
|
// //月
|
// var M = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
|
// //日
|
// var D = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
|
console.log(this.dateTime,111);
|
data.push({
|
startTime:time[0],
|
endTime: time[1],
|
decisioDiagramResult:"contraband"
|
});
|
window.parent.handleStartParcel(data);
|
},
|
title: '违禁包裹数',
|
count: res.data.data[1].value,
|
icon: 'el-icon-shopping-bag-1',
|
color: '#FF9836'
|
},
|
{
|
click: function (item) {
|
var data = [];
|
// 当前时间
|
// var date = new Date();
|
// //年
|
// var Y = date.getFullYear();
|
// //月
|
// var M = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
|
// //日
|
// var D = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
|
|
data.push({
|
startTime:time[0],
|
endTime: time[1],
|
decisioDiagramResult:"contraband"
|
});
|
window.parent.handleStartParcelKind(data);
|
},
|
title: '违禁物品数',
|
count: res.data.data[2].value,
|
icon: 'el-icon-warning',
|
color: '#8058A5'
|
},
|
{
|
click: function (item) {
|
var data =[];
|
data.push({
|
dxtype: 4
|
});
|
//console.log(data[0],111);
|
window.parent.handleStartEquipment(data);
|
},
|
title: '在线设备数',
|
count: res.data.data[3].value,
|
icon: 'el-icon-success',
|
color: '#29C093'
|
},
|
{
|
click: function (item) {
|
window.parent.handleStartSuser();
|
},
|
title: '客户数量',
|
count: res.data.data[4].value,
|
icon: 'el-icon-s-custom',
|
color: '#3AA7F0'
|
}
|
];
|
});
|
},
|
|
//主动报警（警情派发，电话报警）分页数据
|
handleStartAlarm(data) {
|
this.$router.push({
|
path: `/realTimePolice/index`,
|
query: data[0],
|
});
|
},
|
|
//包裹分页数据
|
handleStartParcel(data) {
|
this.$router.push({
|
path: `/parcel/index`,
|
query: data[0],
|
});
|
},
|
|
//违禁品分页数据
|
handleStartParcelKind(data) {
|
this.$router.push({
|
path: `/parcelKind/index`,
|
query: data[0],
|
});
|
},
|
|
//在线设备分页数据
|
handleStartEquipment(data) {
|
this.$router.push({
|
path: `/clientManagement/index`,
|
query: data[0],
|
});
|
},
|
|
//客户管理分页数据
|
handleStartSuser() {
|
this.$router.push({
|
path: `/suser/index`,
|
});
|
},
|
|
//体温监测分页数据
|
handleStartAnimalHeat(data) {
|
this.$router.push({
|
path: `/animalHeat/animalHeatPage`,
|
query: data[0],
|
});
|
},
|
|
//健康码分页数据
|
handleStartHealthcode(data) {
|
this.$router.push({
|
path: `/healthcode/healthcodePage`,
|
query: data[0],
|
});
|
},
|
|
//预警数量分布
|
getAlarmNumberStatis(data){
|
//调接口，获取数据
|
selectAlertScount(data).then(res =>{
|
var typesArray = res.data.data.types;
|
var timesArray = res.data.data.times;
|
var dataArray = res.data.data.dataList;
|
var data = [];
|
dataArray.forEach(item => {
|
if (item.name == typesArray[0]) {
|
data.push({
|
name: item.name,
|
data: item.alarmData,
|
type: 'line'
|
})
|
}
|
if (item.name == typesArray[1]) {
|
data.push({
|
name: item.name,
|
type: 'line',
|
data: item.parcelData
|
})
|
}
|
|
if (item.name == typesArray[2]) {
|
data.push({
|
name: item.name,
|
type: 'line',
|
data: item.healthcodeData
|
})
|
}
|
|
if (item.name == typesArray[3]) {
|
data.push({
|
name: item.name,
|
type: 'line',
|
data: item.animalData
|
})
|
}
|
})
|
let echarts = require('echarts');
|
let myChart = echarts.init(document.getElementById('alarmNumberStatis'));
|
myChart.on('click', function (params) {
|
var data = [];
|
|
if(params.seriesName=='警情派发'){
|
data.push({
|
startTime:params.name+" 00:00:00",
|
endTime:params.name+" 23:59:59",
|
// waringType:'紧急求救',
|
})
|
window.parent.handleStartAlarm(data);
|
}
|
|
if(params.seriesName=='违禁品'){
|
data.push({
|
startTime:params.name+" 00:00:00",
|
endTime:params.name+" 23:59:59",
|
decisioDiagramResult:"contraband"
|
});
|
window.parent.handleStartParcelKind(data);
|
}
|
|
if(params.seriesName=='红色健康码'){
|
data.push({
|
startTime:params.name+" 00:00:00",
|
endTime:params.name+" 23:59:59",
|
type:3
|
});
|
window.parent.handleStartHealthcode(data);
|
}
|
|
if(params.seriesName=='体温异常'){
|
data.push({
|
startTime:params.name+" 00:00:00",
|
endTime:params.name+" 23:59:59",
|
status:1
|
});
|
window.parent.handleStartAnimalHeat(data);
|
}
|
})
|
var colors = ['#FF9836', '#1E90FF', '#F34A4A', '#8058A5'];
|
let option = {
|
color:colors,
|
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: timesArray
|
},
|
yAxis: {
|
type: 'value',
|
splitLine: {
|
show: true,
|
lineStyle:{
|
type:'dashed'
|
}
|
}
|
},
|
series: data
|
};
|
|
myChart.setOption(option);
|
|
//建议加上以下这一行代码，不加的效果图如下（当浏览器窗口缩小的时候）。超过了div的界限（红色边框）
|
window.addEventListener('resize',function() {myChart.resize()});
|
})
|
},
|
|
//警情类别统计总数
|
getAlarmClassifyStatis(data){
|
selAlarmDayAveragePro(data).then(res =>{
|
var time = this.dateTime;
|
var day = this.getDaysBetween(time[0],time[1]);
|
var that = this;
|
that.alarmClassifyStatis.data = [
|
{
|
click: function (item) {
|
var data = [];
|
data.push({
|
startTime:time[0],
|
endTime:time[1],
|
// waringType:'紧急求救',
|
})
|
window.parent.handleStartAlarm(data);
|
},
|
title:'警情派发',
|
color:'#FF9836',
|
name:'日平均警情派发数',
|
date:(res.data.data[0]/Math.round(day)).toFixed(2)
|
},
|
{
|
click: function (item) {
|
var data = [];
|
data.push({
|
startTime:time[0],
|
endTime:time[1],
|
decisioDiagramResult:"contraband"
|
});
|
window.parent.handleStartParcelKind(data);
|
},
|
title:'违禁品',
|
color:'#1E90FF',
|
name:'日平均违禁品数',
|
date:(res.data.data[1]/Math.round(day)).toFixed(2)
|
},
|
{
|
click: function (item) {
|
var data = [];
|
data.push({
|
startTime:time[0],
|
endTime:time[1],
|
type:3
|
});
|
window.parent.handleStartHealthcode(data);
|
},
|
title:'红色健康码',
|
color:'#F34A4A',
|
name:'日平均红色健康码数',
|
date:(res.data.data[2]/Math.round(day)).toFixed(2)
|
},
|
{
|
click: function (item) {
|
var data = [];
|
data.push({
|
startTime:time[0],
|
endTime:time[1],
|
status:1
|
});
|
window.parent.handleStartAnimalHeat(data);
|
},
|
title:'体温异常',
|
color:'#8058A5',
|
name:'日平均体温异常数',
|
date:(res.data.data[3]/Math.round(day)).toFixed(2)
|
}
|
];
|
})
|
},
|
|
|
//预警类型占比统计
|
getAlarmTypeProEcharts(data){
|
selAlarmDayAveragePro(data).then(res =>{
|
var that = this;
|
//计算总和
|
that.alarmTypeTotal = res.data.data[0]+res.data.data[1]+res.data.data[2]+res.data.data[3];
|
var data = [];
|
var startDate = this.dateTime[0];
|
var endDate = this.dateTime[1];
|
data.push(
|
{value: res.data.data[0], name: '警情派发'},
|
{value: res.data.data[1], name: '违禁品'},
|
{value: res.data.data[2], name: '红色健康码'},
|
{value: res.data.data[3], name: '体温异常'}
|
)
|
let echarts = require('echarts');
|
let myChart = echarts.init(document.getElementById('alarmTypeProEcharts'));
|
myChart.on('click', function (params) {
|
var data = [];
|
|
if(params.name=='警情派发'){
|
data.push({
|
startTime:startDate,
|
endTime:endDate,
|
// waringType:'紧急求救',
|
})
|
window.parent.handleStartAlarm(data);
|
}
|
|
if(params.name=='违禁品'){
|
data.push({
|
startTime:startDate,
|
endTime:endDate,
|
decisioDiagramResult:"contraband"
|
});
|
window.parent.handleStartParcelKind(data);
|
}
|
|
if(params.name=='红色健康码'){
|
data.push({
|
startTime:startDate,
|
endTime:endDate,
|
type:3
|
});
|
window.parent.handleStartHealthcode(data);
|
}
|
|
if(params.name=='体温异常'){
|
data.push({
|
startTime:startDate,
|
endTime:endDate,
|
status:1
|
});
|
window.parent.handleStartAnimalHeat(data);
|
}
|
|
})
|
var colors = ['#FF9836', '#3fa1ff', '#F34A4A', '#8058A5'];
|
let option = {
|
color:colors,
|
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: [
|
{
|
type: 'pie',
|
radius: ['43%','60%'],
|
center: ['45%','53%'],
|
avoidLabelOverlap: false,
|
label: {
|
show: false,
|
position: 'center'
|
},
|
labelLine: {
|
show: false
|
},
|
data: data
|
}
|
]
|
};
|
myChart.setOption(option);
|
|
//建议加上以下这一行代码，不加的效果图如下（当浏览器窗口缩小的时候）。超过了div的界限（红色边框）
|
window.addEventListener('resize',function() {myChart.resize()});
|
})
|
|
},
|
|
|
//警情类别统计总数(分类占比)
|
getAlarmTypeProStatis(data){
|
selAlarmDayAveragePro(data).then(res =>{
|
var that = this;
|
var time = this.dateTime;
|
var count = res.data.data[0]+res.data.data[1]+res.data.data[2]+res.data.data[3];
|
that.alarmTypeProStatis.data = [
|
{
|
click: function (item) {
|
var data = [];
|
data.push({
|
startTime:time[0],
|
endTime:time[1],
|
// waringType:'紧急求救',
|
})
|
window.parent.handleStartAlarm(data);
|
},
|
title:'警情派发',
|
color:'#FF9836',
|
name:res.data.data[0],
|
date:(res.data.data[0]/count*100).toFixed(2)+'%'
|
},
|
{
|
click: function (item) {
|
var data = [];
|
data.push({
|
startTime:time[0],
|
endTime:time[1],
|
decisioDiagramResult:"contraband"
|
});
|
window.parent.handleStartParcelKind(data);
|
},
|
title:'违禁品',
|
color:'#3fa1ff',
|
name:res.data.data[1],
|
date:(res.data.data[1]/count*100).toFixed(2)+'%'
|
},
|
{
|
click: function (item) {
|
var data = [];
|
data.push({
|
startTime:time[0],
|
endTime:time[1],
|
type:3
|
});
|
window.parent.handleStartHealthcode(data);
|
},
|
title:'红色健康码',
|
color:'#F34A4A',
|
name:res.data.data[2],
|
date:(res.data.data[2]/count*100).toFixed(2)+'%'
|
},
|
{
|
click: function (item) {
|
var data = [];
|
data.push({
|
startTime:time[0],
|
endTime:time[1],
|
status:1
|
});
|
window.parent.handleStartAnimalHeat(data);
|
},
|
title:'体温异常',
|
color:'#8058A5',
|
name:res.data.data[3],
|
date:(res.data.data[3]/count*100).toFixed(2)+'%'
|
}
|
];
|
})
|
},
|
|
//预警设备类型占比统计
|
getAlarmEquipmentProEcharts(data){
|
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: [
|
{
|
type: 'pie',
|
radius: ['43%','60%'],
|
cneter: ['45%','53%'],
|
avoidLabelOverlap: false,
|
label: {
|
show: false,
|
position: 'center'
|
},
|
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(data){
|
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(data){
|
selConfirmTimePro(data).then(res =>{
|
var data = res.data.data;
|
var that =this;
|
//计算总数
|
that.confirmTimeTotal = data[0]+data[1]+data[2]+data[3];
|
var time = this.dateTime;
|
let echarts = require('echarts');
|
let myChart = echarts.init(document.getElementById('confirmTimeProEcharts'));
|
//饼图点击事件
|
myChart.on('click',function(params){
|
var data = [];
|
data.push({
|
startTime:time[0],
|
endTime:time[1],
|
waringType:'紧急求救',
|
timeDesc: params.name
|
})
|
window.parent.handleStartAlarm(data);
|
})
|
var colors = ['green','#3fa1ff','yellow','#F34A4A']
|
let option = {
|
color:colors,
|
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: [
|
{
|
type: 'pie',
|
radius: ['43%', '60%'],
|
center: ['45%','53%'],
|
avoidLabelOverlap: false,
|
label: {
|
show: false,
|
position: 'center'
|
},
|
labelLine: {
|
show: false
|
},
|
data: [
|
{value: data[0], name: '小于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){
|
selConfirmTimePro(data).then(res =>{
|
var data = res.data.data;
|
var time = this.dateTime;
|
var that = this;
|
that.confirmTimeProStatis.data = [
|
{
|
click: function (item) {
|
var data = [];
|
data.push({
|
startTime:time[0],
|
endTime:time[1],
|
waringType:'紧急求救',
|
timeDesc: '小于5分钟'
|
})
|
window.parent.handleStartAlarm(data);
|
},
|
title:'小于5分钟',
|
color:'green',
|
name:data[0]==0? 0:data[0]+"次",
|
},
|
{
|
click: function (item) {
|
var data = [];
|
data.push({
|
startTime:time[0],
|
endTime:time[1],
|
waringType:'紧急求救',
|
timeDesc: '5-10分钟'
|
})
|
window.parent.handleStartAlarm(data);
|
},
|
title:'5-10分钟',
|
color:'#3fa1ff',
|
name:data[1]==0? 0:data[1]+"次",
|
},
|
{
|
click: function (item) {
|
var data = [];
|
data.push({
|
startTime:time[0],
|
endTime:time[1],
|
waringType:'紧急求救',
|
timeDesc: '10-30分钟'
|
})
|
window.parent.handleStartAlarm(data);
|
},
|
title:'10-30分钟',
|
color:'yellow',
|
name:data[2]==0? 0:data[2]+"次",
|
},
|
{
|
click: function (item) {
|
var data = [];
|
data.push({
|
startTime:time[0],
|
endTime:time[1],
|
waringType:'紧急求救',
|
timeDesc: '30分钟以上'
|
})
|
window.parent.handleStartAlarm(data);
|
},
|
title:'30分钟以上',
|
color:'#F34A4A',
|
name:data[3]==0? 0:data[3]+"次",
|
}
|
];
|
})
|
},
|
|
//预警平均确认速度排行(table)
|
confirmAverageSpeedStatis(data){
|
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(data){
|
selAlarmTimeDis(data).then(res =>{
|
var data = res.data;
|
var time = this.dateTime;
|
let echarts = require('echarts');
|
let myChart = echarts.init(document.getElementById('alarmTimeDisEchars'));
|
//图表数据点击事件
|
myChart.on('click', function (params) {
|
var data = [];
|
if(params.seriesName=='警情派发'){
|
window.parent.handleStartAlarm(data);
|
data.push({
|
startTime:time[0],
|
endTime:time[1],
|
// waringType:'紧急求救',
|
timeDesc: params.name
|
})
|
window.parent.handleStartAlarm(data);
|
}
|
|
if(params.seriesName=='违禁品'){
|
data.push({
|
startTime:time[0],
|
endTime:time[1],
|
decisioDiagramResult:"contraband",
|
timeDesc: params.name
|
});
|
window.parent.handleStartParcelKind(data);
|
}
|
|
if(params.seriesName=='红色健康码'){
|
data.push({
|
startTime:time[0],
|
endTime:time[1],
|
type:3,
|
timeDesc: params.name
|
});
|
window.parent.handleStartHealthcode(data);
|
}
|
|
if(params.seriesName=='体温异常'){
|
data.push({
|
startTime:time[0],
|
endTime:time[1],
|
status:1,
|
timeDesc: params.name
|
});
|
window.parent.handleStartAnimalHeat(data);
|
}
|
})
|
var colors = ['#FF9836', '#1E90FF', '#F34A4A', '#8058A5'];
|
let option = {
|
color: colors,
|
title: {
|
textStyle: {
|
fontWeight: 'normal',
|
fontSize: 16,
|
color: '#000'
|
},
|
left: '3%',
|
top: 25,
|
textAlign:'center',
|
text: '预警时间分布'
|
},
|
tooltip: {
|
trigger: 'axis'
|
},
|
legend: {
|
data: ['警情派发', '违禁品', '红色健康码', '体温异常'],
|
top:'10%',
|
right:'6%',
|
icon:'circle'
|
},
|
grid: {
|
left: '1%',
|
right: '7%',
|
bottom: '10%',
|
top:'25%',
|
containLabel: true
|
},
|
xAxis: {
|
name:'时段',
|
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: {
|
name:'个/次',
|
type: 'value',
|
splitLine: {
|
show: true,
|
lineStyle:{
|
type:'dashed'
|
}
|
}
|
},
|
series: [
|
{
|
name: '警情派发',
|
type: 'bar',
|
data: data.data.alarmTimeDis
|
},
|
{
|
name: '违禁品',
|
type: 'bar',
|
data: data.data.parcelTimeDis
|
},
|
{
|
name: '红色健康码',
|
type: 'bar',
|
data: data.data.healthcodeTimeDis
|
},
|
{
|
name: '体温异常',
|
type: 'bar',
|
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);
|
//预警数量统计
|
this.getAlarmNumberStatis(data);
|
//预警分类统计
|
this.getAlarmClassifyStatis(data);
|
//预警类型占比统计
|
this.getAlarmTypeProEcharts(data);
|
this.getAlarmTypeProStatis(data);
|
//预警设备类型占比统计
|
//this.getAlarmEquipmentProEcharts(data);
|
//this.getAlarmEquipmentProStatis(data);
|
//确认时间占比统计
|
this.getConfirmTimeProEcharts(data);
|
this.getConfirmTimeProStatis(data);
|
this.confirmAverageSpeedStatis(data);
|
//预警时间分布统计
|
this.getAlarmTimeDisEchars(data);
|
},
|
|
|
//计算两个日期之间的天数
|
getDaysBetween(startTime,endTime){
|
var startDate = Date.parse(startTime);
|
var endDate = Date.parse(endTime);
|
if (startDate>endDate){
|
return 0;
|
}
|
if (startDate==endDate){
|
return 1;
|
}
|
var days=(endDate - startDate)/(1*24*60*60*1000);
|
return days;
|
},
|
|
//计算时间
|
getDate(date){
|
var that = this;
|
var today = new Date();
|
var startTime ='';
|
var endTime = '';
|
//本周的时间
|
if(date==1){
|
startTime = this.showWeekFirstDay(today)+ " 00:00:00";
|
endTime = this.showToDay(today)+ " 23:59:59";
|
that.dateTime = [startTime,endTime];
|
}
|
//月初至今的时间
|
if(date==2){
|
startTime = this.showMonthFirstDay(today)+ " 00:00:00";
|
endTime = this.showToDay(today)+ " 23:59:59";
|
that.dateTime = [startTime,endTime];
|
}
|
//本季度初至今的时间
|
if(date==3){
|
startTime = this.getQuarterStartDate(today)+ " 00:00:00";
|
endTime = this.showToDay(today)+ " 23:59:59";
|
that.dateTime = [startTime,endTime];
|
}
|
//封装数据
|
var data ={};
|
return data ={
|
startTime:this.dateTime[0],
|
endTime:this.dateTime[1]
|
}
|
},
|
|
|
//本日
|
showToDay(Nowdate){
|
var M=Number(Nowdate.getMonth())+1;
|
if(M<10){
|
M="0"+M;
|
}
|
var day = Nowdate.getDate();
|
if(day<10){
|
day = "0"+day;
|
}
|
return Nowdate.getFullYear()+"-"+M+"-"+day;
|
},
|
|
//本周第一天
|
showWeekFirstDay(Nowdate){
|
var WeekFirstDay=new Date(Nowdate-(Nowdate.getDay()-1)*86400000);
|
var M=Number(WeekFirstDay.getMonth())+1;
|
if(M<10){
|
M="0"+M;
|
}
|
var day = WeekFirstDay.getDate();
|
if(day<10){
|
day = "0"+day;
|
}
|
return WeekFirstDay.getFullYear()+"-"+M+"-"+day;
|
},
|
|
//本月第一天
|
showMonthFirstDay(Nowdate){
|
var MonthFirstDay=new Date(Nowdate.getFullYear(),Nowdate.getMonth(),1);
|
var M=Number(MonthFirstDay.getMonth())+1;
|
if(M<10){
|
M="0"+M;
|
}
|
return MonthFirstDay.getFullYear()+"-"+M+"-"+"0"+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">
|
|
@import '@/styles/alarmAnalysis/alarmAnalysis.scss'
|
|
</style>
|
