1211 lines
35 KiB
Vue
1211 lines
35 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 }}
|
||
<!-- 枪机''球机' -->
|
||
<span>{{
|
||
item.deviceType == 1
|
||
? $t('message.dataBoard.deviceTypeList')[0]
|
||
: item.deviceType == 2
|
||
? $t('message.dataBoard.deviceTypeList')[1]
|
||
: item.deviceType == 3
|
||
? $t('message.dataBoard.deviceTypeList')[2]
|
||
: item.deviceType == 4
|
||
? $t('message.dataBoard.deviceTypeList')[3]
|
||
: item.deviceType == 5
|
||
? $t('message.dataBoard.deviceTypeList')[4]
|
||
: $t('message.dataBoard.deviceTypeList')[5]
|
||
}}</span>
|
||
</li>
|
||
</ul>
|
||
<div
|
||
class="placeholderBox placeholderBox2"
|
||
v-if="devStatusList.length == 0"
|
||
>
|
||
<img src="@/assets/images/noData3.png" alt="" srcset="" />
|
||
<p>
|
||
<!-- 暂无数据 -->
|
||
{{$t('message.dataBoard.nodata')}}
|
||
</p>
|
||
</div>
|
||
</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" />
|
||
</div>
|
||
<div class="content">
|
||
<div
|
||
v-if="item.hardwareName"
|
||
:title="
|
||
$t('message.dataBoard.dev') +
|
||
item.hardwareName +
|
||
$t('message.dataBoard.at') +
|
||
item.location +
|
||
$t('message.dataBoard.detected') +
|
||
alarmTypes(item.alarmType) +
|
||
$t('message.dataBoard.pleaseDealFast') +
|
||
'...'
|
||
"
|
||
class="list-title"
|
||
>
|
||
{{
|
||
$t('message.dataBoard.dev') +
|
||
item.hardwareName +
|
||
$t('message.dataBoard.at') +
|
||
item.location +
|
||
$t('message.dataBoard.detected') +
|
||
alarmTypes(item.alarmType) +
|
||
$t('message.dataBoard.pleaseDealFast') +
|
||
'...'
|
||
}}
|
||
</div>
|
||
<div class="list-time">
|
||
<!-- 识别时间： -->
|
||
{{ $t('message.dataBoard.discernTime') }}
|
||
{{ item.createTime }}
|
||
</div>
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
|
||
</vue-seamless-scroll>
|
||
<div
|
||
class="placeholderBox placeholderBox2"
|
||
v-if="earlyWarning.length == 0"
|
||
>
|
||
<img src="@/assets/images/noData3.png" alt="" srcset="" />
|
||
<p>
|
||
<!-- 暂无数据 -->
|
||
{{$t('message.dataBoard.nodata')}}
|
||
</p>
|
||
</div>
|
||
</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"
|
||
>
|
||
<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="@/assets/images/bigScreen/demo.jpg"/>-->
|
||
</div>
|
||
<div class="captureRecord_itemInfo">
|
||
<div :title="item.hardwareName" class="itemInfo itemInfoId">
|
||
<!-- 设备名: -->
|
||
{{ $t('message.dataBoard.devName') + ':'
|
||
}}{{ item.hardwareName }}
|
||
</div>
|
||
<div :title="item.createTime" class="itemInfo itemInfoTime">
|
||
<!-- 抓拍时间: -->
|
||
{{ $t('message.dataBoard.captureTime') + ':'
|
||
}}{{ item.createTime }}
|
||
</div>
|
||
<div :title="item.location" class="itemInfo itemInfoPlace">
|
||
<!-- 抓拍点: -->
|
||
{{ $t('message.dataBoard.captureLocation') + ':'
|
||
}}{{ item.location }}
|
||
</div>
|
||
<!-- 1-安全帽报警、2-明火报警、3-聚众报警、4-倒地报警、5-越界报警、6-闯入报警、7、反光衣报警,8-吸烟报警-->
|
||
<div
|
||
:title="alarmTypes(item.alarmType)"
|
||
class="itemInfo itemInfoType"
|
||
>
|
||
<!-- 抓拍类型: -->
|
||
{{ $t('message.dataBoard.captureType') + ':'
|
||
}}{{ alarmTypes(item.alarmType) }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</vue-seamless-scroll>
|
||
<div
|
||
class="placeholderBox placeholderBox2"
|
||
v-if="captureRecord.length == 0"
|
||
>
|
||
<img src="@/assets/images/noData3.png" alt="" srcset="" />
|
||
<p>
|
||
<!-- 暂无数据 -->
|
||
{{$t('message.dataBoard.nodata')}}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="blockBox blockBox2" style="height:calc(33.33% - 23px) !important;">
|
||
<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'
|
||
import { getAITypeStatistics } from '@/assets/js/api/companyBigScreen.js'
|
||
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: {},
|
||
earlyWarning: [
|
||
// {
|
||
// details:"摄像机一号在钢筋加工棚监测到有未戴安全帽，请及时处理…",
|
||
// time:"09-12 13:45:42"
|
||
// },
|
||
// {
|
||
// details:"摄像机一号在钢筋加工棚监测到有未戴安全帽，请及时处理…",
|
||
// time:"09-12 13:45:42"
|
||
// },
|
||
// {
|
||
// details:"摄像机一号在钢筋加工棚监测到有未戴安全帽，请及时处理…",
|
||
// time:"09-12 13:45:42"
|
||
// },
|
||
// {
|
||
// details:"摄像机一号在钢筋加工棚监测到有未戴安全帽，请及时处理…",
|
||
// time:"09-12 13:45:42"
|
||
// },
|
||
// {
|
||
// details:"摄像机一号在钢筋加工棚监测到有未戴安全帽，请及时处理…",
|
||
// time:"09-12 13:45:42"
|
||
// },
|
||
// {
|
||
// details:"摄像机一号在钢筋加工棚监测到有未戴安全帽，请及时处理…",
|
||
// time:"09-12 13:45:42"
|
||
// },
|
||
// {
|
||
// details:"摄像机一号在钢筋加工棚监测到有未戴安全帽，请及时处理…",
|
||
// time:"09-12 13:45:42"
|
||
// },
|
||
// {
|
||
// details:"摄像机一号在钢筋加工棚监测到有未戴安全帽，请及时处理…",
|
||
// time:"09-12 13:45:42"
|
||
// },
|
||
// {
|
||
// details:"摄像机一号在钢筋加工棚监测到有未戴安全帽，请及时处理…",
|
||
// time:"09-12 13:45:42"
|
||
// },
|
||
// {
|
||
// details:"摄像机一号在钢筋加工棚监测到有未戴安全帽，请及时处理…",
|
||
// time:"09-12 13:45:42"
|
||
// }
|
||
],
|
||
// [
|
||
// {value: 0, name: '安全帽报警'},
|
||
// {value: 0, name: '明火报警'},
|
||
// {value: 0, name: '聚众报警'},
|
||
// {value: 0, name: '倒地报警'},
|
||
// {value: 0, name: '越界报警'},
|
||
// {value: 0, name: '闯入报警'},
|
||
// {value: 0, name: '反光衣报警'},
|
||
// {value: 0, name: '吸烟报警'}
|
||
// ],
|
||
echartData: this.$t('message.dataBoard.alarmTypeList'),
|
||
totalNum: 0,
|
||
devStatusList: this.$t('message.dataBoard.devStatusList'),
|
||
captureRecord: [
|
||
// {
|
||
// id:'900',
|
||
// time: '09-11 15:00:00',
|
||
// place:'施工通道',
|
||
// type:'违规作业'
|
||
// },
|
||
// {
|
||
// id:'901',
|
||
// time: '09-11 15:00:00',
|
||
// place:'施工通道',
|
||
// type:'违规作业'
|
||
// },
|
||
// {
|
||
// id:'902',
|
||
// time: '09-11 15:00:00',
|
||
// place:'施工通道',
|
||
// type:'违规作业'
|
||
// },
|
||
// {
|
||
// id:'903',
|
||
// time: '09-11 15:00:00',
|
||
// place:'施工通道',
|
||
// type:'违规作业'
|
||
// },
|
||
// {
|
||
// id:'904',
|
||
// time: '09-11 15:00:00',
|
||
// place:'施工通道',
|
||
// type:'违规作业'
|
||
// },
|
||
// {
|
||
// id:'905',
|
||
// time: '09-11 15:00:00',
|
||
// place:'施工通道',
|
||
// type:'违规作业'
|
||
// },
|
||
// {
|
||
// id:'906',
|
||
// time: '09-11 15:00:00',
|
||
// place:'施工通道',
|
||
// type:'违规作业'
|
||
// },
|
||
// {
|
||
// id:'907',
|
||
// time: '09-11 15:00:00',
|
||
// place:'施工通道',
|
||
// type:'违规作业'
|
||
// },
|
||
// {
|
||
// id:'908',
|
||
// time: '09-11 15:00:00',
|
||
// place:'施工通道',
|
||
// type:'违规作业'
|
||
// },
|
||
// {
|
||
// id:'909',
|
||
// time: '09-11 15:00:00',
|
||
// place:'施工通道',
|
||
// type:'违规作业'
|
||
// },
|
||
// {
|
||
// id:'910',
|
||
// time: '09-11 15:00:00',
|
||
// place:'施工通道',
|
||
// type:'违规作业'
|
||
// },
|
||
// {
|
||
// id:'911',
|
||
// time: '09-11 15:00:00',
|
||
// place:'施工通道',
|
||
// type:'违规作业'
|
||
// }
|
||
],
|
||
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://182.90.224.147:8083/mqtt", options);
|
||
client = mqtt.connect(mqttUrl, options);
|
||
this.mqttMSG();
|
||
},
|
||
beforeDestroy() {
|
||
if (client) {
|
||
client.unsubscribe(this.topicName + this.$store.state.projectSn)
|
||
}
|
||
},
|
||
components: {
|
||
vueSeamlessScroll
|
||
},
|
||
computed: {
|
||
// 类型 1-烟感、2-明火、3-人员倒地、4-未戴安全帽、5-区域入侵、6-越界入侵、7-人员聚集衣 8-反光衣、9-裸土覆盖
|
||
alarmTypes() {
|
||
return function (type) {
|
||
let alarmType
|
||
if (type == 1) {
|
||
alarmType = /* '安全帽报警' */ this.$t(
|
||
'message.dataBoard.alarmTypeList'
|
||
)[0].name
|
||
} else if (type == 2) {
|
||
alarmType = /* '明火报警' */ this.$t(
|
||
'message.dataBoard.alarmTypeList'
|
||
)[1].name
|
||
} else if (type == 3) {
|
||
alarmType = /* '聚众报警' */ this.$t(
|
||
'message.dataBoard.alarmTypeList'
|
||
)[2].name
|
||
} else if (type == 4) {
|
||
alarmType = /* '倒地报警' */ this.$t(
|
||
'message.dataBoard.alarmTypeList'
|
||
)[3].name
|
||
} else if (type == 5) {
|
||
alarmType = /* '越界报警' */ this.$t(
|
||
'message.dataBoard.alarmTypeList'
|
||
)[4].name
|
||
} else if (type == 6) {
|
||
alarmType = /* '闯入报警' */ this.$t(
|
||
'message.dataBoard.alarmTypeList'
|
||
)[5].name
|
||
} else if (type == 7) {
|
||
alarmType = /* '反光衣报警' */ this.$t(
|
||
'message.dataBoard.alarmTypeList'
|
||
)[6].name
|
||
} else if (type == 8) {
|
||
alarmType = /* '吸烟报警' */ this.$t(
|
||
'message.dataBoard.alarmTypeList'
|
||
)[7].name
|
||
}
|
||
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.echartData[6].value = res.result.alarmTypeNum7
|
||
this.echartData[7].value = res.result.alarmTypeNum8
|
||
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) => {
|
||
console.log(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.alarmTypeArray'),
|
||
textStyle: {
|
||
fontSize: 12,//字体大小
|
||
color: '#ccc' //字体颜色
|
||
},
|
||
left: '6%',
|
||
top: '5%',
|
||
},
|
||
grid: {
|
||
top:'20%',
|
||
left: '3%',
|
||
right: '4%',
|
||
bottom: '2%',
|
||
containLabel: true
|
||
},
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
position: [20, 20]
|
||
},
|
||
xAxis: {
|
||
type: 'category',
|
||
data: this.dataTimeList,
|
||
axisLabel: {
|
||
formatter: '{value}',
|
||
textStyle: {
|
||
//改变刻度字体样式
|
||
color: 'RGB(254,255,255,0.5)',
|
||
fontSize: 10,
|
||
}
|
||
}
|
||
},
|
||
yAxis: {
|
||
type: 'value',
|
||
axisLabel: {
|
||
formatter: '{value}',
|
||
textStyle: {
|
||
//改变刻度字体样式
|
||
color: 'RGB(254,255,255,0.5)',
|
||
fontSize: 12,
|
||
}
|
||
},
|
||
splitLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
type: 'dashed',
|
||
color: 'RGB(236,236,236,0.5)',
|
||
|
||
}
|
||
}
|
||
},
|
||
series: [
|
||
{
|
||
name: /* "总计", */ this.$t('message.dataBoard.alarmTypeArray')[0],
|
||
data: this.alarmTotalNum,
|
||
type: 'line',
|
||
smooth: true,
|
||
itemStyle: {
|
||
normal: {
|
||
lineStyle: {
|
||
color: '#557DED'
|
||
}
|
||
}
|
||
}
|
||
},
|
||
{
|
||
name: /* "安全帽报警", */ this.$t(
|
||
'message.dataBoard.alarmTypeArray'
|
||
)[1],
|
||
data: this.alarmTypeNum1,
|
||
type: 'line',
|
||
smooth: true,
|
||
itemStyle: {
|
||
normal: {
|
||
lineStyle: {
|
||
color: '#44D7B6'
|
||
}
|
||
}
|
||
}
|
||
},
|
||
{
|
||
name: /* "明火报警", */ this.$t(
|
||
'message.dataBoard.alarmTypeArray'
|
||
)[2],
|
||
data: this.alarmTypeNum2,
|
||
type: 'line',
|
||
smooth: true,
|
||
itemStyle: {
|
||
normal: {
|
||
lineStyle: {
|
||
color: '#3052B3'
|
||
}
|
||
}
|
||
}
|
||
},
|
||
{
|
||
name: /* "聚众报警", */ this.$t(
|
||
'message.dataBoard.alarmTypeArray'
|
||
)[3],
|
||
data: this.alarmTypeNum3,
|
||
type: 'line',
|
||
smooth: true,
|
||
itemStyle: {
|
||
normal: {
|
||
lineStyle: {
|
||
color: '#FE6C7F'
|
||
}
|
||
}
|
||
}
|
||
},
|
||
{
|
||
name: /* "倒地报警", */ this.$t(
|
||
'message.dataBoard.alarmTypeArray'
|
||
)[4],
|
||
data: this.alarmTypeNum4,
|
||
type: 'line',
|
||
smooth: true,
|
||
itemStyle: {
|
||
normal: {
|
||
lineStyle: {
|
||
color: '#FAC915'
|
||
}
|
||
}
|
||
}
|
||
},
|
||
{
|
||
name: /* "越界报警", */ this.$t(
|
||
'message.dataBoard.alarmTypeArray'
|
||
)[5],
|
||
data: this.alarmTypeNum5,
|
||
type: 'line',
|
||
smooth: true,
|
||
itemStyle: {
|
||
normal: {
|
||
lineStyle: {
|
||
color: '#91c7ae'
|
||
}
|
||
}
|
||
}
|
||
},
|
||
{
|
||
name: /* "闯入报警", */ this.$t(
|
||
'message.dataBoard.alarmTypeArray'
|
||
)[6],
|
||
data: this.alarmTypeNum6,
|
||
type: 'line',
|
||
smooth: true,
|
||
itemStyle: {
|
||
normal: {
|
||
lineStyle: {
|
||
color: '#749f83'
|
||
}
|
||
}
|
||
}
|
||
},
|
||
{
|
||
name: /* "反光衣报警", */ this.$t(
|
||
'message.dataBoard.alarmTypeArray'
|
||
)[7],
|
||
data: this.alarmTypeNum7,
|
||
type: 'line',
|
||
smooth: true,
|
||
itemStyle: {
|
||
normal: {
|
||
lineStyle: {
|
||
color: '#ca8622'
|
||
}
|
||
}
|
||
}
|
||
},
|
||
{
|
||
name: /* "吸烟报警", */ this.$t(
|
||
'message.dataBoard.alarmTypeArray'
|
||
)[8],
|
||
data: this.alarmTypeNum8,
|
||
type: 'line',
|
||
smooth: true,
|
||
itemStyle: {
|
||
normal: {
|
||
lineStyle: {
|
||
color: '#bda29a'
|
||
}
|
||
}
|
||
}
|
||
}
|
||
]
|
||
}
|
||
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;
|
||
.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: 5px;
|
||
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>
|