935 lines
34 KiB
Vue
935 lines
34 KiB
Vue
|
<template>
|
|||
|
|
<!-- 进度管理 -->
|
|||
|
|
<div class="fullHeight">
|
|||
|
|
<!-- <vue-scroll>
|
|||
|
|
<img src="@/assets/images/dataBoard/6.png" style="height:auto;width:100%"/>
|
|||
|
|
</vue-scroll> -->
|
|||
|
|
<div class="aside fullHeight">
|
|||
|
|
<div class="blockBox">
|
|||
|
|
<div class="blockTitle">
|
|||
|
|
<!-- 预警统计 -->
|
|||
|
|
{{$t('message.dataBoard.alarmStatistics')}}
|
|||
|
|
</div>
|
|||
|
|
<div class="blockContent flex">
|
|||
|
|
<div class="companyChart" ref="echart"></div>
|
|||
|
|
<div class="right-tg">
|
|||
|
|
<ul>
|
|||
|
|
<li v-for="(item,index) in echartData" :key="index">
|
|||
|
|
<span :style="{'background': colorList[index]}"></span>
|
|||
|
|
{{item.name}}
|
|||
|
|
</li>
|
|||
|
|
</ul>
|
|||
|
|
<ul style="margin-left: 20px">
|
|||
|
|
<li v-for="(item,index) in echartData" :key="index">
|
|||
|
|
{{item.value}}
|
|||
|
|
</li>
|
|||
|
|
</ul>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="blockBox">
|
|||
|
|
<div class="blockTitle">
|
|||
|
|
<!-- 设备情况 -->
|
|||
|
|
{{$t('message.dataBoard.devDetail')}}
|
|||
|
|
</div>
|
|||
|
|
<div class="blockContent dev-status">
|
|||
|
|
<vue-scroll>
|
|||
|
|
<ul>
|
|||
|
|
<li v-if="item" class="flex" v-for="(item,index) in devStatusList" :key="index">
|
|||
|
|
{{item.videoName}}
|
|||
|
|
<!-- {{item.name}} -->
|
|||
|
|
<span>{{item.deviceType == 1?'枪机':item.deviceType == 2?'球机':item.deviceType == 3?'热成像':item.deviceType == 4?'单兵':item.deviceType == 5?'全景':'无人机'}}</span>
|
|||
|
|
<!-- <span>{{item.type}}</span> -->
|
|||
|
|
</li>
|
|||
|
|
</ul>
|
|||
|
|
</vue-scroll>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="blockBox">
|
|||
|
|
<div class="blockTitle">
|
|||
|
|
<!-- 预警事件 -->
|
|||
|
|
{{$t('message.dataBoard.alarmEvent')}}
|
|||
|
|
</div>
|
|||
|
|
<div style="overflow:hidden;" class="blockContent">
|
|||
|
|
<!-- :data="10" :class-option="defaultOption"-->
|
|||
|
|
<vue-seamless-scroll :data="earlyWarning" :class-option="defaultOption">
|
|||
|
|
<ul class="earlyWarningList">
|
|||
|
|
<li class="earlyWarningList_item" v-for="(item,index) in earlyWarning" :key="index">
|
|||
|
|
<div class="imgBox">
|
|||
|
|
<!-- <img :src="fileUrl + item.imageUrl"/> -->
|
|||
|
|
<!-- <img :src="item.imageUrl"/> -->
|
|||
|
|
<img src="./../../../assets/images/demo.jpg">
|
|||
|
|
</div>
|
|||
|
|
<div class="content">
|
|||
|
|
<!-- <div v-if="item.hardwareName" :title="'设备' + item.hardwareName + '在' + item.location + '检测到' + alarmTypes(item.alarmType) + ',请及时处理...'" class="list-title">{{'设备' + item.hardwareName + '在' + item.location + '检测到' + alarmTypes(item.alarmType) + ',请及时处理...'}}</div> -->
|
|||
|
|
<div class="list-title" :title="item.details">{{item.details}}</div>
|
|||
|
|
<!-- <div class="list-time">识别时间：{{item.createTime}}</div> -->
|
|||
|
|
<div class="list-title">{{item.time}}</div>
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
</ul>
|
|||
|
|
</vue-seamless-scroll>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="right fullHeight">
|
|||
|
|
<div class="blockBox blockBox3" style="height: calc(66.66% - 25px)">
|
|||
|
|
<div class="blockTitle">
|
|||
|
|
<!-- 抓拍记录 -->
|
|||
|
|
{{$t('message.dataBoard.captureRecords')}}
|
|||
|
|
</div>
|
|||
|
|
<!-- <div @click="scrollClick($event)" style="overflow:hidden;" class="blockContent">-->
|
|||
|
|
<div style="overflow:hidden;" class="blockContent">
|
|||
|
|
<!-- <vue-seamless-scroll :data="captureRecord" :class-option="defaultOption2"> -->
|
|||
|
|
<vue-scroll>
|
|||
|
|
<div class="captureRecordBox">
|
|||
|
|
<div :title="item.time" :data-name="item.id" :data-type="'all'" @click="selectCaptureRecord(item)" v-for="(item,index) in captureRecord" :key="index" class="captureRecord_item">
|
|||
|
|
<div class="imgBox">
|
|||
|
|
<!-- <img :src="fileUrl + item.imageUrl"/> -->
|
|||
|
|
<img :src="item.imageUrl"/>
|
|||
|
|
<!-- <img src="./../../../assets/images/demo.jpg"> -->
|
|||
|
|
</div>
|
|||
|
|
<div class="captureRecord_itemInfo">
|
|||
|
|
<!-- <div :title="item.hardwareName" class="itemInfo itemInfoId">设备名:{{item.hardwareName}}</div>
|
|||
|
|
<div :title="item.createTime" class="itemInfo itemInfoTime">抓拍时间:{{item.createTime}}</div>
|
|||
|
|
<div :title="item.location" class="itemInfo itemInfoPlace">抓拍点:{{item.location}}</div> -->
|
|||
|
|
<div :title="item.name" class="itemInfo itemInfoId"> {{$t('message.dataBoard.devName')+':'}}<!-- 设备名 -->:{{item.name}}</div>
|
|||
|
|
<div :title="item.time" class="itemInfo itemInfoTime">{{$t('message.dataBoard.captureTime')+':'}}<!-- 抓拍时间: -->{{item.time}}</div>
|
|||
|
|
<div :title="item.place" class="itemInfo itemInfoPlace">{{$t('message.dataBoard.captureLocation')+':'}}<!-- 抓拍点: -->{{item.place}}</div>
|
|||
|
|
<!-- 1-安全帽报警、2-明火报警、3-聚众报警、4-倒地报警、5-越界报警、6-闯入报警、7、反光衣报警,8-吸烟报警-->
|
|||
|
|
<!-- <div :title="alarmTypes(item.alarmType)" class="itemInfo itemInfoType">抓拍类型:{{alarmTypes(item.alarmType)}}</div> -->
|
|||
|
|
<div :title="alarmTypes(item.type)" class="itemInfo itemInfoType">{{$t('message.dataBoard.captureType')+':'}}<!-- 抓拍类型: -->{{alarmTypes(item.type)}}</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</vue-scroll>
|
|||
|
|
<!-- </vue-seamless-scroll> -->
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="blockBox blockBox2">
|
|||
|
|
<div class="blockTitle">
|
|||
|
|
<!-- 预警趋势 -->
|
|||
|
|
{{$t('message.dataBoard.warningTrend')}}
|
|||
|
|
</div>
|
|||
|
|
<div class="blockContent blockContent2" >
|
|||
|
|
<div class="optionBox">
|
|||
|
|
<div @click="changeOptionBoxListIndex(index)" v-for="(item,index) in optionBoxList" :key="index" class="optionBox_item" :class="{selectOptionBox_item:optionBoxListIndex === index}">
|
|||
|
|
<span>{{item.text}}</span>
|
|||
|
|
<div class="a"></div>
|
|||
|
|
<div class="b"></div>
|
|||
|
|
<div class="c"></div>
|
|||
|
|
<div class="d"></div>
|
|||
|
|
</div>
|
|||
|
|
<!-- <div class="optionBox_item">-->
|
|||
|
|
<!-- 近30天-->
|
|||
|
|
<!-- <div class="a"></div>-->
|
|||
|
|
<!-- <div class="b"></div>-->
|
|||
|
|
<!-- <div class="c"></div>-->
|
|||
|
|
<!-- <div class="d"></div>-->
|
|||
|
|
<!-- </div>-->
|
|||
|
|
</div>
|
|||
|
|
<div ref="echart2" style="width: 100%;height: 100%" class="stageBox">
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
<script>
|
|||
|
|
import echarts from 'echarts4';;
|
|||
|
|
import mqtt from "mqtt";
|
|||
|
|
import vueSeamlessScroll from 'vue-seamless-scroll'
|
|||
|
|
import {
|
|||
|
|
getAiAnalyseHardWareAlarmTotalApi,//查询所有各预警类型预警数 (预警统计)
|
|||
|
|
selectAiAnalyseHardWareAlarmTrendListApi,//查询近七天或近30天报警趋势(预计趋势)
|
|||
|
|
selectAIVideoTypeCountListApi,//按照摄像头类型查询具有AI功能的摄像头数量(设备情况)
|
|||
|
|
selectAiAnalyseHardWareAlarmListApi//查询设备报警记录列表(预警记录&&抓拍记录)
|
|||
|
|
} from "@/assets/js/api/AI";
|
|||
|
|
const options = {
|
|||
|
|
connectTimeout: 40000,
|
|||
|
|
clientId:
|
|||
|
|
"mqttjs_" +
|
|||
|
|
Math.random()
|
|||
|
|
.toString(16)
|
|||
|
|
.substr(2, 8),
|
|||
|
|
username: "root",
|
|||
|
|
password: "123456",
|
|||
|
|
clean: true
|
|||
|
|
};
|
|||
|
|
let client = null;
|
|||
|
|
export default {
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
optionBoxList:[
|
|||
|
|
{
|
|||
|
|
text:/* "近7天" */this.$t('message.dataBoard.timeList')[0]
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
text:/* "近30天" */this.$t('message.dataBoard.timeList')[1]
|
|||
|
|
}
|
|||
|
|
],
|
|||
|
|
optionBoxListIndex:0,
|
|||
|
|
colorList: ['#44D7B6','#3052B3', '#FE6C7F', '#FAC915','#91c7ae','#749f83','#ca8622','#bda29a'],
|
|||
|
|
chart1: Object,
|
|||
|
|
chart2: Object,
|
|||
|
|
option1:{},
|
|||
|
|
option1:{},
|
|||
|
|
// [
|
|||
|
|
// {
|
|||
|
|
// details:"摄像机一号在钢筋加工棚监测到有未戴安全帽，请及时处理…",
|
|||
|
|
// time:"09-12 13:45:42"
|
|||
|
|
// },
|
|||
|
|
// {
|
|||
|
|
// details:"摄像机一号在钢筋加工棚监测到有未戴安全帽，请及时处理…",
|
|||
|
|
// time:"09-12 13:45:42"
|
|||
|
|
// },
|
|||
|
|
|
|||
|
|
// ],
|
|||
|
|
earlyWarning:this.$t('message.dataBoard.earlyWarning'),
|
|||
|
|
// [
|
|||
|
|
// {value: 0, name: '车辆冲洗'},
|
|||
|
|
// {value: 0, name: '运输车辆密闭运输'},
|
|||
|
|
// {value: 0, name: '裸土覆盖'},
|
|||
|
|
// {value: 0, name: '围挡上报记录'},
|
|||
|
|
// {value: 0, name: '路面硬化上报记录'},
|
|||
|
|
// {value: 0, name: '湿法作业上报记录'},
|
|||
|
|
// ],
|
|||
|
|
echartData: this.$t('message.dataBoard.echartData'),
|
|||
|
|
totalNum:0,
|
|||
|
|
// [
|
|||
|
|
// {
|
|||
|
|
// name: '设备一号',
|
|||
|
|
// type: '枪机'
|
|||
|
|
// },{
|
|||
|
|
// name: '设备二号',
|
|||
|
|
// type: '球机'
|
|||
|
|
// },{
|
|||
|
|
// name: '设备三号',
|
|||
|
|
// type: '无人机'
|
|||
|
|
// }],
|
|||
|
|
devStatusList:this.$t('message.dataBoard.devStatusList2'),
|
|||
|
|
// [
|
|||
|
|
// {
|
|||
|
|
// name: '无人机',
|
|||
|
|
// id:'900',
|
|||
|
|
// time: '09-11 15:00:00',
|
|||
|
|
// place:'施工通道',
|
|||
|
|
// type:1,
|
|||
|
|
// imageUrl: 'http://124.71.178.44:30/image/71b019f8-09ea-42d7-b7cd-842ec34e330b.jpg'
|
|||
|
|
// },
|
|||
|
|
// {
|
|||
|
|
// name: '无人机',
|
|||
|
|
// id:'901',
|
|||
|
|
// time: '09-11 15:00:00',
|
|||
|
|
// place:'施工通道',
|
|||
|
|
// type: 1,
|
|||
|
|
// imageUrl: 'http://124.71.178.44:30/image/14e45426-6d94-4a97-a91e-74c1c9976b56.jpg'
|
|||
|
|
// }
|
|||
|
|
// ],
|
|||
|
|
captureRecord:this.$t('message.dataBoard.captureRecordList'),
|
|||
|
|
userId: "",
|
|||
|
|
topicName: "aiAnalyse",
|
|||
|
|
dataTimeList:[],
|
|||
|
|
alarmTypeNum1:[],
|
|||
|
|
alarmTypeNum2:[],
|
|||
|
|
alarmTypeNum3:[],
|
|||
|
|
alarmTypeNum4:[],
|
|||
|
|
alarmTypeNum5:[],
|
|||
|
|
alarmTypeNum6:[],
|
|||
|
|
alarmTypeNum7:[],
|
|||
|
|
alarmTypeNum8:[],
|
|||
|
|
alarmTotalNum:[],
|
|||
|
|
fileUrl:"",
|
|||
|
|
currentPersonDetail:''
|
|||
|
|
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
created(){
|
|||
|
|
this.fileUrl = this.$store.state.FILEURL;
|
|||
|
|
console.log(this.$store.state.userInfo.scope);
|
|||
|
|
this.getAiAnalyseHardWareAlarmTotal()
|
|||
|
|
this.selectAiAnalyseHardWareAlarmTrendList(this.optionBoxListIndex+1)
|
|||
|
|
this.selectAIVideoTypeCountList()
|
|||
|
|
// this.selectAiAnalyseHardWareAlarmList()
|
|||
|
|
},
|
|||
|
|
mounted() {
|
|||
|
|
// client = mqtt.connect("ws://139.159.226.224:8083/mqtt", options);
|
|||
|
|
client = mqtt.connect(mqttUrl, options);
|
|||
|
|
this.mqttMSG();
|
|||
|
|
},
|
|||
|
|
beforeDestroy() {
|
|||
|
|
if(client){
|
|||
|
|
client.unsubscribe(this.topicName + this.$store.state.projectSn);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
components: {
|
|||
|
|
vueSeamlessScroll
|
|||
|
|
},
|
|||
|
|
computed: {
|
|||
|
|
alarmTypes(){
|
|||
|
|
return function (type) {
|
|||
|
|
let alarmType
|
|||
|
|
if(type == 1){
|
|||
|
|
alarmType = /* '车辆冲洗' */this.$t('message.dataBoard.echartData')[0]
|
|||
|
|
}else if (type == 2){
|
|||
|
|
alarmType = /* '运输车辆密闭运输' */this.$t('message.dataBoard.echartData')[1]
|
|||
|
|
} else if (type == 3){
|
|||
|
|
alarmType = /* '裸土覆盖' */this.$t('message.dataBoard.echartData')[2]
|
|||
|
|
}else if (type == 4){
|
|||
|
|
alarmType = /* '围挡上报记录' */this.$t('message.dataBoard.echartData')[3]
|
|||
|
|
}else if (type == 5){
|
|||
|
|
alarmType = /* '路面硬化上报记录' */this.$t('message.dataBoard.echartData')[4]
|
|||
|
|
}else if (type == 6){
|
|||
|
|
alarmType = /* '湿法作业上报记录' */this.$t('message.dataBoard.echartData')[5]
|
|||
|
|
}
|
|||
|
|
return alarmType
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
defaultOption () {
|
|||
|
|
return {
|
|||
|
|
step: 0.5, // 数值越大速度滚动越快
|
|||
|
|
limitMoveNum: 3, // 开始无缝滚动的数据量 this.dataList.length
|
|||
|
|
hoverStop: true, // 是否开启鼠标悬停stop
|
|||
|
|
direction: 1, // 0向下 1向上 2向左 3向右
|
|||
|
|
openWatch: true, // 开启数据实时监控刷新dom
|
|||
|
|
singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
|
|||
|
|
singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
|
|||
|
|
waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
defaultOption2 () {
|
|||
|
|
return {
|
|||
|
|
step: 0.5, // 数值越大速度滚动越快
|
|||
|
|
limitMoveNum: 8, // 开始无缝滚动的数据量 this.dataList.length
|
|||
|
|
hoverStop: true, // 是否开启鼠标悬停stop
|
|||
|
|
direction: 1, // 0向下 1向上 2向左 3向右
|
|||
|
|
openWatch: true, // 开启数据实时监控刷新dom
|
|||
|
|
singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
|
|||
|
|
singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
|
|||
|
|
waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
//查询所有各预警类型预警数 (预警统计)
|
|||
|
|
getAiAnalyseHardWareAlarmTotal(){
|
|||
|
|
|
|||
|
|
getAiAnalyseHardWareAlarmTotalApi({
|
|||
|
|
projectSn:this.$store.state.projectSn,
|
|||
|
|
}).then((res) => {
|
|||
|
|
this.echartData[0].value = res.result.alarmTypeNum1
|
|||
|
|
this.echartData[1].value = res.result.alarmTypeNum2
|
|||
|
|
this.echartData[2].value = res.result.alarmTypeNum3
|
|||
|
|
this.echartData[3].value = res.result.alarmTypeNum4
|
|||
|
|
this.echartData[4].value = res.result.alarmTypeNum5
|
|||
|
|
this.echartData[5].value = res.result.alarmTypeNum6
|
|||
|
|
this.totalNum = res.result.totalNum
|
|||
|
|
this.createdEchart1()
|
|||
|
|
console.log(this.echartData);
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
changeOptionBoxListIndex(index){
|
|||
|
|
this.optionBoxListIndex = index
|
|||
|
|
this.selectAiAnalyseHardWareAlarmTrendList(index+1)
|
|||
|
|
},
|
|||
|
|
//查询近七天或近30天报警趋势(预计趋势)
|
|||
|
|
selectAiAnalyseHardWareAlarmTrendList(selectType){
|
|||
|
|
selectAiAnalyseHardWareAlarmTrendListApi({
|
|||
|
|
projectSn:this.$store.state.projectSn,
|
|||
|
|
selectType:selectType
|
|||
|
|
}).then((res) => {
|
|||
|
|
this.alarmTypeNum1 = []
|
|||
|
|
this.alarmTypeNum2 = []
|
|||
|
|
this.alarmTypeNum3 = []
|
|||
|
|
this.alarmTypeNum4 = []
|
|||
|
|
this.alarmTypeNum5 = []
|
|||
|
|
this.alarmTypeNum6 = []
|
|||
|
|
this.alarmTypeNum7 = []
|
|||
|
|
this.alarmTypeNum8 = []
|
|||
|
|
this.alarmTotalNum = []
|
|||
|
|
this.dataTimeList = []
|
|||
|
|
res.result.forEach((item) => {
|
|||
|
|
this.alarmTypeNum1.push(item.alarmTypeNum1)
|
|||
|
|
this.alarmTypeNum2.push(item.alarmTypeNum2)
|
|||
|
|
this.alarmTypeNum3.push(item.alarmTypeNum3)
|
|||
|
|
this.alarmTypeNum4.push(item.alarmTypeNum4)
|
|||
|
|
this.alarmTypeNum5.push(item.alarmTypeNum5)
|
|||
|
|
this.alarmTypeNum6.push(item.alarmTypeNum6)
|
|||
|
|
this.alarmTypeNum7.push(item.alarmTypeNum7)
|
|||
|
|
this.alarmTypeNum8.push(item.alarmTypeNum8)
|
|||
|
|
this.alarmTotalNum.push(item.totalNum)
|
|||
|
|
this.dataTimeList.push(item.dayTitle)
|
|||
|
|
this.createdEchart2()
|
|||
|
|
// console.log(item);
|
|||
|
|
})
|
|||
|
|
console.log(res);
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
//按照摄像头类型查询具有AI功能的摄像头数量(设备情况)
|
|||
|
|
selectAIVideoTypeCountList(){
|
|||
|
|
selectAIVideoTypeCountListApi({
|
|||
|
|
projectSn:this.$store.state.projectSn
|
|||
|
|
}).then((res) => {
|
|||
|
|
// 1 枪机，2球机，3热成像，4单兵，5全景，6无人机
|
|||
|
|
this.devStatusList = res.result
|
|||
|
|
console.log(res);
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
//查询设备报警记录列表(预警记录&&抓拍记录)
|
|||
|
|
selectAiAnalyseHardWareAlarmList(){
|
|||
|
|
selectAiAnalyseHardWareAlarmListApi({
|
|||
|
|
projectSn:this.$store.state.projectSn,
|
|||
|
|
sizeNum:20
|
|||
|
|
}).then((res) => {
|
|||
|
|
this.earlyWarning = res.result
|
|||
|
|
this.captureRecord = res.result
|
|||
|
|
console.log(res);
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
// scrollClick(e) {
|
|||
|
|
// //通过 e.target获取点击的dom
|
|||
|
|
// //通过e.target.dataset获取vuedom中的自定义属性
|
|||
|
|
// let data = e.target.dataset;
|
|||
|
|
// this.$emit("supervise-detail", data.name, data.type);
|
|||
|
|
// console.log(data);
|
|||
|
|
// },
|
|||
|
|
createdEchart1(){
|
|||
|
|
// console.log(this.$refs['echart'])
|
|||
|
|
let chart1 = echarts.init(this.$refs['echart']);
|
|||
|
|
this.chart1 = chart1;
|
|||
|
|
chart1.clear();
|
|||
|
|
this.option1 = {
|
|||
|
|
grid:{
|
|||
|
|
top:"0px",
|
|||
|
|
left:"0px",
|
|||
|
|
right:"0px",
|
|||
|
|
bottom:"0px"
|
|||
|
|
},
|
|||
|
|
tooltip: {
|
|||
|
|
trigger: 'item'
|
|||
|
|
},
|
|||
|
|
legend: {
|
|||
|
|
show: false,
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
graphic:[{
|
|||
|
|
type: 'text',
|
|||
|
|
left: 'center',
|
|||
|
|
top: '38%',
|
|||
|
|
style:{
|
|||
|
|
text: this.totalNum,
|
|||
|
|
textAlign: 'center',
|
|||
|
|
fill: '#fff',
|
|||
|
|
fontSize: 26
|
|||
|
|
}
|
|||
|
|
},{
|
|||
|
|
type: 'text',
|
|||
|
|
left: 'center',
|
|||
|
|
top: '55%',
|
|||
|
|
style:{
|
|||
|
|
text: /* '问题总数', */this.$t('message.dataBoard.questionAllCounts'),
|
|||
|
|
textAlign: 'center',
|
|||
|
|
fill: '#fff',
|
|||
|
|
fontSize: 14
|
|||
|
|
}
|
|||
|
|
}],
|
|||
|
|
color:this.colorList,
|
|||
|
|
series: [
|
|||
|
|
{
|
|||
|
|
type: 'pie',
|
|||
|
|
radius: ['55%', '70%'],
|
|||
|
|
center:['50%','50%'],
|
|||
|
|
avoidLabelOverlap: false,
|
|||
|
|
label: {
|
|||
|
|
show: false,
|
|||
|
|
position: 'center'
|
|||
|
|
},
|
|||
|
|
emphasis: {
|
|||
|
|
label: {
|
|||
|
|
show: false,
|
|||
|
|
fontSize: '16',
|
|||
|
|
color: "#fff"
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
labelLine: {
|
|||
|
|
show: false
|
|||
|
|
},
|
|||
|
|
data: this.echartData,
|
|||
|
|
stillShowZeroSum: true,
|
|||
|
|
minShowLabelAngle: 10
|
|||
|
|
},
|
|||
|
|
]
|
|||
|
|
}
|
|||
|
|
chart1.setOption(this.option1);
|
|||
|
|
},
|
|||
|
|
createdEchart2(){
|
|||
|
|
// console.log(this.$refs['echart'])
|
|||
|
|
let chart2 = echarts.init(this.$refs['echart2']);
|
|||
|
|
this.chart2 = chart2;
|
|||
|
|
chart2.clear();
|
|||
|
|
this.option2 = {
|
|||
|
|
color:['#557DED','#44D7B6','#3052B3', '#FE6C7F', '#FAC915','#91c7ae','#749f83','#ca8622','#bda29a'],
|
|||
|
|
legend: {
|
|||
|
|
// ['总计', '车辆冲洗','运输车辆密闭运输','裸土覆盖','围挡上报记录','路面硬化上报记录','湿法作业上报记录']
|
|||
|
|
data:this.$t('message.dataBoard.echartNameData'),
|
|||
|
|
textStyle:{
|
|||
|
|
// fontSize: 14,//字体大小
|
|||
|
|
color: '#FEFFFF'//字体颜色
|
|||
|
|
},
|
|||
|
|
left:"10%",
|
|||
|
|
top:"6%"
|
|||
|
|
},
|
|||
|
|
tooltip:{
|
|||
|
|
trigger: 'axis',
|
|||
|
|
position: [20, 20]
|
|||
|
|
},
|
|||
|
|
xAxis: {
|
|||
|
|
type: 'category',
|
|||
|
|
data: this.dataTimeList,
|
|||
|
|
axisLabel : {
|
|||
|
|
formatter: '{value}',
|
|||
|
|
textStyle: { //改变刻度字体样式
|
|||
|
|
color: 'RGB(254,255,255,0.5)'
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
yAxis: {
|
|||
|
|
type: 'value',
|
|||
|
|
axisLabel : {
|
|||
|
|
formatter: '{value}',
|
|||
|
|
textStyle: { //改变刻度字体样式
|
|||
|
|
color: 'RGB(254,255,255,0.5)'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
splitLine: {
|
|||
|
|
show: true,
|
|||
|
|
lineStyle:{
|
|||
|
|
type:'dashed',
|
|||
|
|
color:"RGB(236,236,236,0.5)"
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
series: [
|
|||
|
|
{
|
|||
|
|
name:/* "总计", */this.$t('message.dataBoard.echartNameData')[0],
|
|||
|
|
data: this.alarmTotalNum,
|
|||
|
|
type: 'line',
|
|||
|
|
smooth: true,
|
|||
|
|
itemStyle : {
|
|||
|
|
normal : {
|
|||
|
|
lineStyle:{
|
|||
|
|
color:'#557DED'
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name:/* "车辆冲洗", */this.$t('message.dataBoard.echartNameData')[1],
|
|||
|
|
data: this.alarmTypeNum1,
|
|||
|
|
type: 'line',
|
|||
|
|
smooth: true,
|
|||
|
|
itemStyle : {
|
|||
|
|
normal : {
|
|||
|
|
lineStyle:{
|
|||
|
|
color:'#44D7B6'
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name:/* "运输车辆密闭运输", */this.$t('message.dataBoard.echartNameData')[2],
|
|||
|
|
data: this.alarmTypeNum2,
|
|||
|
|
type: 'line',
|
|||
|
|
smooth: true,
|
|||
|
|
itemStyle : {
|
|||
|
|
normal : {
|
|||
|
|
lineStyle:{
|
|||
|
|
color:'#3052B3'
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name:/* "裸土覆盖", */this.$t('message.dataBoard.echartNameData')[3],
|
|||
|
|
data: this.alarmTypeNum3,
|
|||
|
|
type: 'line',
|
|||
|
|
smooth: true,
|
|||
|
|
itemStyle : {
|
|||
|
|
normal : {
|
|||
|
|
lineStyle:{
|
|||
|
|
color:'#FE6C7F'
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name:/* "围挡上报记录", */this.$t('message.dataBoard.echartNameData')[4],
|
|||
|
|
data: this.alarmTypeNum4,
|
|||
|
|
type: 'line',
|
|||
|
|
smooth: true,
|
|||
|
|
itemStyle : {
|
|||
|
|
normal : {
|
|||
|
|
lineStyle:{
|
|||
|
|
color:'#FAC915'
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name:/* "路面硬化上报记录", */this.$t('message.dataBoard.echartNameData')[5],
|
|||
|
|
data: this.alarmTypeNum5,
|
|||
|
|
type: 'line',
|
|||
|
|
smooth: true,
|
|||
|
|
itemStyle : {
|
|||
|
|
normal : {
|
|||
|
|
lineStyle:{
|
|||
|
|
color:'#91c7ae'
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name:/* "湿法作业上报记录", */this.$t('message.dataBoard.echartNameData')[6],
|
|||
|
|
data: this.alarmTypeNum6,
|
|||
|
|
type: 'line',
|
|||
|
|
smooth: true,
|
|||
|
|
itemStyle : {
|
|||
|
|
normal : {
|
|||
|
|
lineStyle:{
|
|||
|
|
color:'#749f83'
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
}
|
|||
|
|
chart2.setOption(this.option2);
|
|||
|
|
},
|
|||
|
|
mqttMSG() {
|
|||
|
|
// mqtt连接 +"/#" +workerId
|
|||
|
|
client.on("connect", (e) => {
|
|||
|
|
console.log("连接成功:", this.topicName + this.$store.state.projectSn);
|
|||
|
|
client.subscribe(this.topicName + this.$store.state.projectSn, { qos: 0 }, (error) => {
|
|||
|
|
if (!error) {
|
|||
|
|
console.log("订阅成功");
|
|||
|
|
} else {
|
|||
|
|
console.log("订阅失败");
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
// 接收消息处理
|
|||
|
|
client.on("message", (topic, message) => {
|
|||
|
|
console.log(message);
|
|||
|
|
message = JSON.parse(message);
|
|||
|
|
this.currentPersonDetail=JSON.parse(message.content)
|
|||
|
|
console.log(this.currentPersonDetail);
|
|||
|
|
if (this.currentPersonDetail){
|
|||
|
|
if(this.earlyWarning.length < 20){
|
|||
|
|
let arr = [this.currentPersonDetail]
|
|||
|
|
this.earlyWarning = arr.concat(this.earlyWarning)
|
|||
|
|
this.captureRecord = arr.concat(this.captureRecord)
|
|||
|
|
}else {
|
|||
|
|
this.earlyWarning.pop()
|
|||
|
|
this.captureRecord.pop()
|
|||
|
|
this.earlyWarning.unshift(this.currentPersonDetail)
|
|||
|
|
this.captureRecord.unshift(this.currentPersonDetail)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
// if(message.content){
|
|||
|
|
// if(message.content.indexOf("火点检测") > -1 || message.content.indexOf("温度报警") > -1){
|
|||
|
|
// this.$emit('sendMsg')
|
|||
|
|
// }
|
|||
|
|
// }
|
|||
|
|
// this.$notify({
|
|||
|
|
// title: message.title,
|
|||
|
|
// message: message.content,
|
|||
|
|
// });
|
|||
|
|
});
|
|||
|
|
// 断开发起重连
|
|||
|
|
// client.on("reconnect", (error) => {
|
|||
|
|
// console.log("正在重连:", error);
|
|||
|
|
// });
|
|||
|
|
// 链接异常处理
|
|||
|
|
client.on("error", (error) => {
|
|||
|
|
console.log("连接失败:", error);
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
selectCaptureRecord(e){
|
|||
|
|
console.log(e);
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
};
|
|||
|
|
</script>
|
|||
|
|
<style lang="less" scoped>
|
|||
|
|
/deep/ .stageBox{
|
|||
|
|
div{
|
|||
|
|
canvas{
|
|||
|
|
/*left: -70px !important;*/
|
|||
|
|
top: -25px !important;
|
|||
|
|
/*width: 1500px !important;*/
|
|||
|
|
height: 300px !important;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.a {
|
|||
|
|
width: 5px;
|
|||
|
|
height: 5px;
|
|||
|
|
position: absolute;
|
|||
|
|
top: 0;
|
|||
|
|
left: 0;
|
|||
|
|
border-left: 2px solid #EBEBEB;
|
|||
|
|
border-top: 2px solid #EBEBEB;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.b {
|
|||
|
|
width: 5px;
|
|||
|
|
height: 5px;
|
|||
|
|
position: absolute;
|
|||
|
|
top: 0;
|
|||
|
|
right: 0;
|
|||
|
|
border-right: 2px solid #EBEBEB;
|
|||
|
|
border-top: 2px solid #EBEBEB;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.c {
|
|||
|
|
width: 5px;
|
|||
|
|
height: 5px;
|
|||
|
|
position: absolute;
|
|||
|
|
bottom: 0;
|
|||
|
|
left: 0;
|
|||
|
|
border-bottom: 2px solid #EBEBEB;
|
|||
|
|
border-left: 2px solid #EBEBEB;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.d {
|
|||
|
|
width: 5px;
|
|||
|
|
height: 10px;
|
|||
|
|
position: absolute;
|
|||
|
|
bottom: 0;
|
|||
|
|
right: 0;
|
|||
|
|
border-right: 2px solid #EBEBEB;
|
|||
|
|
border-bottom: 2px solid #EBEBEB;
|
|||
|
|
}
|
|||
|
|
.optionBox{
|
|||
|
|
position: absolute;
|
|||
|
|
right: 50px;
|
|||
|
|
top: 0px;
|
|||
|
|
.optionBox_item{
|
|||
|
|
cursor:pointer;
|
|||
|
|
z-index: 100;
|
|||
|
|
padding: 4px;
|
|||
|
|
display: inline-block;
|
|||
|
|
width: 52px;
|
|||
|
|
height: 22px;
|
|||
|
|
font-size: 12px;
|
|||
|
|
line-height: 26px;
|
|||
|
|
margin-right: 10px;
|
|||
|
|
text-align: center;
|
|||
|
|
background: #193B43;
|
|||
|
|
position: relative;
|
|||
|
|
}
|
|||
|
|
.selectOptionBox_item{
|
|||
|
|
background: #393204;
|
|||
|
|
color: #F7D300;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.earlyWarningList{
|
|||
|
|
.earlyWarningList_item{
|
|||
|
|
padding: 15px ;
|
|||
|
|
height: 95px;
|
|||
|
|
background: #0D192C;
|
|||
|
|
margin-bottom: 5px;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
.imgBox{
|
|||
|
|
display: inline-block;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
img{
|
|||
|
|
width: 79px;
|
|||
|
|
height: 67px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.content{
|
|||
|
|
height: 100%;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
margin-left: 17px;
|
|||
|
|
width: 243px;
|
|||
|
|
display: inline-block;
|
|||
|
|
padding-bottom: 13px;
|
|||
|
|
.list-title{
|
|||
|
|
margin-bottom: 13px;
|
|||
|
|
font-size: 15px;
|
|||
|
|
text-overflow: ellipsis;
|
|||
|
|
line-clamp: 2;
|
|||
|
|
overflow: hidden;
|
|||
|
|
color: #C83E50;
|
|||
|
|
}
|
|||
|
|
.list-time{
|
|||
|
|
font-size: 13px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.captureRecordBox{
|
|||
|
|
/*display: flex;*/
|
|||
|
|
.captureRecord_item{
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
display: inline-block;
|
|||
|
|
width: 305px;
|
|||
|
|
height: 247px;
|
|||
|
|
margin-right: 25px;
|
|||
|
|
margin-bottom: 25px;
|
|||
|
|
.captureRecord_itemInfo{
|
|||
|
|
.itemInfo{
|
|||
|
|
font-size: 12px;
|
|||
|
|
display: inline-block;
|
|||
|
|
width: 152px;
|
|||
|
|
overflow: hidden;
|
|||
|
|
text-overflow:ellipsis; white-space: nowrap;
|
|||
|
|
}
|
|||
|
|
.itemInfoId{
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
.itemInfoTime{
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
.itemInfoPlace{
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
.itemInfoType{
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.imgBox{
|
|||
|
|
width: 100%;
|
|||
|
|
img{
|
|||
|
|
width: 100%;
|
|||
|
|
height: 190px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.numContent {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: space-around;
|
|||
|
|
p{
|
|||
|
|
font-size: 14px;
|
|||
|
|
opacity: 0.88;
|
|||
|
|
margin-top: 10px;
|
|||
|
|
text-align: center;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.companyChart{
|
|||
|
|
width: 50%;
|
|||
|
|
height: 100%;
|
|||
|
|
}
|
|||
|
|
/deep/.alarmTypeBox{
|
|||
|
|
position: absolute;
|
|||
|
|
top: 20px;
|
|||
|
|
right: 10px;
|
|||
|
|
width: 66px;
|
|||
|
|
opacity: 0.8;
|
|||
|
|
z-index: 3;
|
|||
|
|
.el-input__inner{
|
|||
|
|
background-color: transparent;
|
|||
|
|
color: white;
|
|||
|
|
height: 24px;
|
|||
|
|
line-height: 24px;
|
|||
|
|
padding: 0 5px;
|
|||
|
|
}
|
|||
|
|
.el-input__suffix{
|
|||
|
|
right: 0px;
|
|||
|
|
}
|
|||
|
|
.el-input__icon{
|
|||
|
|
color: white;
|
|||
|
|
line-height: 24px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.right-tg{
|
|||
|
|
// margin-left: 20px;
|
|||
|
|
display: flex;
|
|||
|
|
ul{
|
|||
|
|
display: flex;
|
|||
|
|
height: 100%;
|
|||
|
|
flex-direction: column;
|
|||
|
|
//align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
li{
|
|||
|
|
margin-bottom: 10px;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
span{
|
|||
|
|
width: 6px;
|
|||
|
|
height: 6px;
|
|||
|
|
display: block;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
margin-right: 6px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.configBtn{
|
|||
|
|
position: absolute;
|
|||
|
|
right: 8px;
|
|||
|
|
top: 15px;
|
|||
|
|
font-size: 20px;
|
|||
|
|
cursor: pointer;
|
|||
|
|
z-index: 3;
|
|||
|
|
}
|
|||
|
|
.days{
|
|||
|
|
position: absolute;
|
|||
|
|
top: 50%;
|
|||
|
|
left: 50%;
|
|||
|
|
transform: translate(-50%,-50%);
|
|||
|
|
.num{
|
|||
|
|
font-size: 46px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.daysBG{
|
|||
|
|
position: absolute;
|
|||
|
|
top: 50%;
|
|||
|
|
left: 50%;
|
|||
|
|
transform: translate(-50%,-50%);
|
|||
|
|
}
|
|||
|
|
.endDate{
|
|||
|
|
position: absolute;
|
|||
|
|
right: 15px;
|
|||
|
|
bottom: 12px;
|
|||
|
|
// font-size: 13px;
|
|||
|
|
}
|
|||
|
|
.Extgantt{
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100% ;
|
|||
|
|
border: none;
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
.flex{
|
|||
|
|
display: flex;
|
|||
|
|
}
|
|||
|
|
.dev-status{
|
|||
|
|
ul{
|
|||
|
|
li{
|
|||
|
|
background: rgba(#2F4988, 0.3);
|
|||
|
|
color: #fff;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
padding-left: 32px;
|
|||
|
|
height: 37px;
|
|||
|
|
line-height: 37px;
|
|||
|
|
margin-bottom: 6px;
|
|||
|
|
span{
|
|||
|
|
display: block;
|
|||
|
|
width: 65px;
|
|||
|
|
text-align: center;
|
|||
|
|
background: rgba(#557DED,0.6);
|
|||
|
|
color: #fff;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|