1031 lines
30 KiB
Vue
1031 lines
30 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>
|