|
|
@@ -0,0 +1,996 @@
|
|
|
+/*
|
|
|
+*@description: 资源详情
|
|
|
+*@author: yh Fu
|
|
|
+*@date: 2023-12-07 15:17:18
|
|
|
+*@version: V1.0.5
|
|
|
+*/
|
|
|
+<template>
|
|
|
+ <el-dialog :visible.sync="tvWallInfoVisible" custom-class="tvDialog" width="55%" center
|
|
|
+ style="margin-top: 5vh !important;">
|
|
|
+ <div class="container">
|
|
|
+ <div class="leftContain">
|
|
|
+ <div class="TVWallCustomWidth"
|
|
|
+ style="width: 100% !important;height: 100% !important;box-shadow: none !important;background: none !important;">
|
|
|
+ <div class="leader-info-container" style="width: 100%;height: 100%;padding: 0;">
|
|
|
+ <div class="leader-info-list-con"
|
|
|
+ style="width: 100% !important; overflow: hidden;margin-bottom: 0;padding:1rem;background-image: none !important;box-shadow: none !important;">
|
|
|
+ <div>
|
|
|
+ <el-descriptions class="margin-top bd-table" title="" :column="2" direction="horizontal"
|
|
|
+ border>
|
|
|
+ <el-descriptions-item>
|
|
|
+ <template slot="label">
|
|
|
+ <span>{{ '企业名称' }}</span>
|
|
|
+ </template>
|
|
|
+ <span>{{currentDeviceLabel}}</span>
|
|
|
+ </el-descriptions-item>
|
|
|
+ </el-descriptions>
|
|
|
+ </div>
|
|
|
+
|
|
|
+
|
|
|
+ <!-- 切换器 -->
|
|
|
+ <el-radio-group v-model="currentRadio" @input="radioHasChanged">
|
|
|
+ <el-radio-button label="传感器"></el-radio-button>
|
|
|
+ <el-radio-button label="摄像头" class="cameraBtn"></el-radio-button>
|
|
|
+ </el-radio-group>
|
|
|
+
|
|
|
+ <!-- 传感器基础数据 -->
|
|
|
+ <div class="sensorInfo" v-show="isSensorVisible">
|
|
|
+<!-- <div>-->
|
|
|
+<!-- <span title="烟感探测器">设备名称：{{ deviceInfo.eventName ? deviceInfo.eventName : '--' }}</span>-->
|
|
|
+<!-- <span>状态：<span :class="currentWorkingStatus == '0' ? 'normal-state' : 'err-state' ">{{ currentWorkingStatus == '0' ? '正常' : "异常" }}</span></span>-->
|
|
|
+<!-- </div>-->
|
|
|
+<!-- <div>-->
|
|
|
+<!-- <span title="烟感探测器">信号强度：{{ deviceInfo.signalStrength ? deviceInfo.signalStrength : '--' }}dBm</span>-->
|
|
|
+<!-- <span>状态：<span :class="deviceInfo.signalStrengthStatus == '0' ? 'normal-state' : 'err-state' ">{{ deviceInfo.signalStrengthStatus == '0' ? '正常' : "异常" }}</span></span>-->
|
|
|
+<!-- </div>-->
|
|
|
+<!-- <div>-->
|
|
|
+<!-- <span title="烟感探测器">实时浓度：{{ deviceInfo.smokescope ? deviceInfo.smokescope : '--' }}%FT</span>-->
|
|
|
+<!-- <span>状态：<span :class="deviceInfo.smokescopeStatus == '0' ? 'normal-state' : 'err-state' ">{{ deviceInfo.smokescopeStatus == '0' ? '正常' : "异常" }}</span></span>-->
|
|
|
+<!-- </div>-->
|
|
|
+<!-- <div>-->
|
|
|
+<!-- <span title="烟感探测器">实时电压：{{ deviceInfo.cellVoltage ? deviceInfo.cellVoltage : '--' }}V</span>-->
|
|
|
+<!-- <span>状态：<span :class="deviceInfo.cellVoltageStatus == '0' ? 'normal-state' : 'err-state' ">{{ deviceInfo.cellVoltageStatus == '0' ? '正常' : "异常" }}</span></span>-->
|
|
|
+<!-- </div>-->
|
|
|
+<!-- <div>-->
|
|
|
+<!-- <span title="烟感探测器">实时温度：{{ deviceInfo.temperature ? deviceInfo.temperature : '--' }}℃</span>-->
|
|
|
+<!-- <span>状态：<span :class="deviceInfo.temperatureStatus == '0' ? 'normal-state' : 'err-state' ">{{ deviceInfo.temperatureStatus == '0' ? '正常' : "异常" }}</span></span>-->
|
|
|
+<!-- </div>-->
|
|
|
+ <div>
|
|
|
+ <span title="烟感探测器">设备名称：{{ deviceInfo.eventName ? deviceInfo.eventName : '--' }}</span>
|
|
|
+ <span>状态：<span class="normal-state">正常</span></span>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <span title="烟感探测器">信号强度：{{ deviceInfo.signalStrength ? deviceInfo.signalStrength : '--' }}dBm</span>
|
|
|
+ <span>状态：<span class="normal-state">正常</span></span>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <span title="烟感探测器">实时浓度：{{ deviceInfo.smokescope ? deviceInfo.smokescope : '--' }}%FT</span>
|
|
|
+ <span>状态：<span class="normal-state">正常</span></span>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <span title="烟感探测器">实时电压：{{ deviceInfo.cellVoltage ? deviceInfo.cellVoltage : '--' }}V</span>
|
|
|
+ <span>状态：<span class="normal-state">正常</span></span>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <span title="烟感探测器">实时温度：{{ deviceInfo.temperature ? deviceInfo.temperature : '--' }}℃</span>
|
|
|
+ <span>状态：<span class="normal-state">正常</span></span>
|
|
|
+ </div>
|
|
|
+ <div style="margin-top: 5%;"></div>
|
|
|
+ <!-- 传感器列表 -->
|
|
|
+ <div class="cameraInfo">
|
|
|
+ <div
|
|
|
+ v-for="(e,idx) in deviceList"
|
|
|
+ :key="idx"
|
|
|
+ class="cameradiv device_contain"
|
|
|
+ @click="currentDeviceHasChanged(e,idx)"
|
|
|
+ :class="currentDevice == idx ? 'select-device' : '' "
|
|
|
+ >
|
|
|
+ <img
|
|
|
+ :src="e.deviceImg?e.deviceImg : require('@/assets/images/video-plaza/shiLianWangImg/no-camera.png')"
|
|
|
+ style="width: 110px;height: 70px;object-fit: fill;"
|
|
|
+ >
|
|
|
+
|
|
|
+ <span>{{ e.deviceName }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 摄像头基础数据 -->
|
|
|
+ <div class="cameraInfo" v-show="!isSensorVisible">
|
|
|
+ <div
|
|
|
+ v-for="(e,idx) in cameraList"
|
|
|
+ :key="idx"
|
|
|
+ class="cameradiv"
|
|
|
+ @click="deviceShow(e,idx)"
|
|
|
+ >
|
|
|
+ <img
|
|
|
+ :src="e.cameraImg?e.cameraImg : require('@/assets/images/video-plaza/shiLianWangImg/no-camera.png') "
|
|
|
+ style="width: 110px;height: 70px;object-fit: fill;"
|
|
|
+ >
|
|
|
+ <span>{{ e.cameraName }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="rightContain">
|
|
|
+ <!-- 按照左侧切换器展示对应传感器/摄像头内容 -->
|
|
|
+ <!-- 传感器图表 -->
|
|
|
+ <div class="sernsorChart_contain" v-show="isSensorVisible">
|
|
|
+ <!-- 信号强度 -->
|
|
|
+ <div id="signal"></div>
|
|
|
+ <!-- 实时浓度 -->
|
|
|
+ <div id="concentration"></div>
|
|
|
+ <!-- 实时电压 -->
|
|
|
+ <div id="voltage"></div>
|
|
|
+ <!-- 实时温度 -->
|
|
|
+ <div id="temperature"></div>
|
|
|
+ </div>
|
|
|
+ <!-- 摄像头视图 -->
|
|
|
+ <div class="camera_contain" v-show="!isSensorVisible">
|
|
|
+ <div class="camera_list_row"
|
|
|
+ v-for="(e,idx) in cameraList"
|
|
|
+ :key="idx"
|
|
|
+ @click="deviceShow(e)"
|
|
|
+ >
|
|
|
+ <img
|
|
|
+ :src="e.cameraImg?e.cameraImg : require('@/assets/images/video-plaza/shiLianWangImg/no-camera.png') "
|
|
|
+ style="width: 153px;height: 94px;object-fit: fill;"
|
|
|
+ >
|
|
|
+ <h4>{{ e.cameraName }}</h4>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ let echarts = require("echarts");
|
|
|
+ import {
|
|
|
+ deviceById,
|
|
|
+ getSensorDataInfoAndList, // 获取传感器信息
|
|
|
+ } from '@/api/forest';
|
|
|
+ export default {
|
|
|
+ name: 'DeviceDialog',
|
|
|
+ props: ['localMark'],
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ currentDevicePic: require('@/assets/images/camera-online.png'),
|
|
|
+ deviceInfoList: [],
|
|
|
+ //设备名称 //设备地址
|
|
|
+ infoKey: [{
|
|
|
+ key: 'cameraName',
|
|
|
+ value: '名称'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ key: 'cameraRegion',
|
|
|
+ value: '地址'
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ chuanInfoKey: [{
|
|
|
+ key: 'deviceName',
|
|
|
+ value: '设备名称'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ key: 'address',
|
|
|
+ value: '设备地址'
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ laInfoKey: [{
|
|
|
+ key: 'name',
|
|
|
+ value: '名称'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ key: 'broadcastUse',
|
|
|
+ value: '用途'
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ centerInfoKey: [{
|
|
|
+ key: '名称',
|
|
|
+ value: '设备名称'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ key: '驻地位置',
|
|
|
+ value: '设备地址'
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ animalInfoKey: [{
|
|
|
+ key: 'type',
|
|
|
+ value: '动物名称'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ key: 'appearTime',
|
|
|
+ value: '出现时间'
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ treeInfoKey: [{
|
|
|
+ key: 'treesName',
|
|
|
+ value: '植物名称'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ key: 'treesNumber',
|
|
|
+ value: '编号'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ key: 'treesAge',
|
|
|
+ value: '树龄'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ key: 'treesSpecies',
|
|
|
+ value: '树种'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ key: 'treesRemarks',
|
|
|
+ value: '备注'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ key: 'deptName',
|
|
|
+ value: '部门名称'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ key: 'createTime',
|
|
|
+ value: '事件时间'
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ currentDeviceData: null,
|
|
|
+ tvWallInfoVisible: false,
|
|
|
+ currentCameraParam: null,
|
|
|
+ workingStatus: null,
|
|
|
+ currentCenterStatus: null,
|
|
|
+ currentType: null,
|
|
|
+ currentRadio: '传感器',
|
|
|
+ isSensorVisible: true, // 当前是否显示为传感器信息，否则为摄像头信息，默认为传感器
|
|
|
+ signalOption: {
|
|
|
+ color: ['#bf791f', '#bf791f', '#bf791f'], // 设置全局颜色
|
|
|
+ grid: {
|
|
|
+ top: '15%',
|
|
|
+ left: '3%',
|
|
|
+ right: '4%',
|
|
|
+ bottom: '3%',
|
|
|
+ containLabel: true
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ type: 'category',
|
|
|
+ data: ['1:00', '2:00', '3:00', '5:00', '6:00', '7:00', '8:00', '9:00', '10:00', '11:00', '12:00',
|
|
|
+ '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00',
|
|
|
+ '23:00', '24:00',
|
|
|
+ ],
|
|
|
+ lineStyle: {
|
|
|
+ color: "#bf791f",
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ formatter: '{value}',
|
|
|
+ },
|
|
|
+ splitLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: "#bf791f",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: "#bf791f",
|
|
|
+ },
|
|
|
+ },
|
|
|
+
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ type: 'value',
|
|
|
+ axisLabel: {
|
|
|
+ formatter: '{value} dB/m',
|
|
|
+ textStyle: {
|
|
|
+ color: "#bf791f",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ splitLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: "#7f92ab",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: "#bf791f",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ series: [{
|
|
|
+ data: [0.1, 0.1, 0.1, 0.1, 0.12, 0.08, 0.08, 0.1, 0.1, 0.1, 0.12, 0.08, 0.08, 0.1, 0.1,
|
|
|
+ 0.1, 0.12, 0.08, 0.08, 0.12, 0.08, 0.08, 0.1, 0.1, 0.1, 0.12, 0.08, 0.08,
|
|
|
+ ],
|
|
|
+ type: 'line',
|
|
|
+ }]
|
|
|
+ },
|
|
|
+ concentrationOption: {
|
|
|
+ color: ['#06C562', '#06C562', '#06C562'], // 设置全局颜色
|
|
|
+ grid: {
|
|
|
+ top: '15%',
|
|
|
+ left: '3%',
|
|
|
+ right: '4%',
|
|
|
+ bottom: '3%',
|
|
|
+ containLabel: true
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ type: 'category',
|
|
|
+ data: ['1:00', '2:00', '3:00', '5:00', '6:00', '7:00', '8:00', '9:00', '10:00', '11:00', '12:00',
|
|
|
+ '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00',
|
|
|
+ '23:00', '24:00',
|
|
|
+ ],
|
|
|
+ splitLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: "#06C562",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: "#06C562",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ type: 'value',
|
|
|
+ axisLabel: {
|
|
|
+ formatter: '{value} ％FT'
|
|
|
+ },
|
|
|
+ splitLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: "#7f92ab",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: "#06C562",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ series: [{
|
|
|
+ data: [6.35, 6.75, 6.35, 6.75, 6.35, 6.75, 6.35, 6.75, 6.35, 6.75, 6.35, 6.75, 6.35, 6.75,
|
|
|
+ 6.35, 6.75, 6.35, 6.75, 6.35, 6.75, 6.35, 6.75, 6.35, 6.75,
|
|
|
+ ],
|
|
|
+ type: 'line'
|
|
|
+ }]
|
|
|
+ },
|
|
|
+ voltageOption: {
|
|
|
+ color: ['#1ce7e0', '#1ce7e0', '#1ce7e0'], // 设置全局颜色
|
|
|
+ grid: {
|
|
|
+ top: '15%',
|
|
|
+ left: '3%',
|
|
|
+ right: '4%',
|
|
|
+ bottom: '3%',
|
|
|
+ containLabel: true
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ type: 'category',
|
|
|
+ data: ['1:00', '2:00', '3:00', '5:00', '6:00', '7:00', '8:00', '9:00', '10:00', '11:00', '12:00',
|
|
|
+ '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00',
|
|
|
+ '23:00', '24:00',
|
|
|
+ ],
|
|
|
+ splitLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: "#1ce7e0",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: "#1ce7e0",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ type: 'value',
|
|
|
+ axisLabel: {
|
|
|
+ formatter: '{value} V'
|
|
|
+ },
|
|
|
+ splitLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: "#7f92ab",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: "#1ce7e0",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ series: [{
|
|
|
+ data: [2.85, 2.85, 2.85, 2.85, 2.85, 2.85, 2.85, 2.85, 2.85, 2.85, 2.85, 2.85, 2.85, 2.85,
|
|
|
+ 2.85, 2.85, 2.85, 2.85, 2.85, 2.85, 2.85, 2.85, 2.85, 2.85, 2.85, 2.85, 2.85, 2.85,
|
|
|
+ 2.85, 2.85,
|
|
|
+ ],
|
|
|
+ type: 'line'
|
|
|
+ }]
|
|
|
+ },
|
|
|
+ temperatureOption: {
|
|
|
+ color: ['#9aaf2a', '#9aaf2a', '#9aaf2a'], // 设置全局颜色
|
|
|
+ grid: {
|
|
|
+ top: '15%',
|
|
|
+ left: '3%',
|
|
|
+ right: '4%',
|
|
|
+ bottom: '3%',
|
|
|
+ containLabel: true
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ type: 'category',
|
|
|
+ data: ['1:00', '2:00', '3:00', '5:00', '6:00', '7:00', '8:00', '9:00', '10:00', '11:00', '12:00',
|
|
|
+ '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00',
|
|
|
+ '23:00', '24:00',
|
|
|
+ ],
|
|
|
+ splitLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: "#9aaf2a",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: "#9aaf2a",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ type: 'value',
|
|
|
+ axisLabel: {
|
|
|
+ formatter: '{value} ℃'
|
|
|
+ },
|
|
|
+ splitLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: "#7f92ab",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: "#9aaf2a",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ series: [{
|
|
|
+ data: [23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 24, 24, 24, 24, 24, 24, 24, 23, 23,
|
|
|
+ 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23,
|
|
|
+ ],
|
|
|
+ type: 'line'
|
|
|
+ }]
|
|
|
+ },
|
|
|
+ cameraList: [{
|
|
|
+ tile: '四平市双辽市郑家屯街道工农村东',
|
|
|
+ pic: require('@/assets/images/video-plaza/shiLianWangImg/no-camera.png')
|
|
|
+ },
|
|
|
+ {
|
|
|
+ tile: '四平市双辽市辽东街道建金良村',
|
|
|
+ pic: require('@/assets/images/video-plaza/shiLianWangImg/no-camera.png')
|
|
|
+ },
|
|
|
+ {
|
|
|
+ tile: '四平市双辽市那木乡双城村',
|
|
|
+ pic: require('@/assets/images/video-plaza/shiLianWangImg/no-camera.png')
|
|
|
+ },
|
|
|
+ {
|
|
|
+ tile: '四平市双辽市郑家屯街道工农村东',
|
|
|
+ pic: require('@/assets/images/video-plaza/shiLianWangImg/no-camera.png')
|
|
|
+ },
|
|
|
+ {
|
|
|
+ tile: '四平市双辽市那木乡建新村东北',
|
|
|
+ pic: require('@/assets/images/video-plaza/shiLianWangImg/no-camera.png')
|
|
|
+ },
|
|
|
+ {
|
|
|
+ tile: '四平市双辽市那木乡永发屯金宝村',
|
|
|
+ pic: require('@/assets/images/video-plaza/shiLianWangImg/no-camera.png')
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ currentDeviceLabel:'',
|
|
|
+ currentWorkingStatus:null, // 当前所选传感器设备状态 0-正常 1-异常
|
|
|
+ deviceList:[], // 传感器列表
|
|
|
+ currentDevice:0, // 当前选中传感器，默认索引为0
|
|
|
+ currentCamera:null, // 当前选中传感器，默认不选
|
|
|
+ deviceInfo:{}, // 传感器基础数据
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ deviceShow(e) {
|
|
|
+ this.$parent.showTVWall(e.cameraCode, e.cameraName, e.cameraType);
|
|
|
+ },
|
|
|
+ initChart() {
|
|
|
+ let signalChart = echarts.init(document.getElementById("signal"));
|
|
|
+ let concentrationChart = echarts.init(document.getElementById("concentration"));
|
|
|
+ let voltageChart = echarts.init(document.getElementById("voltage"));
|
|
|
+ let temperatureChart = echarts.init(document.getElementById("temperature"));
|
|
|
+ signalChart.setOption(this.signalOption)
|
|
|
+ concentrationChart.setOption(this.concentrationOption)
|
|
|
+ voltageChart.setOption(this.voltageOption)
|
|
|
+ temperatureChart.setOption(this.temperatureOption)
|
|
|
+ },
|
|
|
+ // 当前所选传感器发生变化
|
|
|
+ currentDeviceHasChanged(e,idx){
|
|
|
+ if(this.currentDevice == idx) return;
|
|
|
+ this.currentDevice = idx
|
|
|
+ // 更新当前设备状态
|
|
|
+ this.currentWorkingStatus = e.workingStatus
|
|
|
+ // this.currentDeviceLabel = e.deviceName
|
|
|
+ // 获取传感器基础数据
|
|
|
+ getSensorDataInfoAndList(e.deviceCode).then(res => {
|
|
|
+ this.deviceInfo = res.data.info || {}
|
|
|
+ // 渲染图表
|
|
|
+ this.updateChart(res)
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 当前选项卡发生变化（传感器 / 摄像头）
|
|
|
+ radioHasChanged(v) {
|
|
|
+ if (v == '传感器') {
|
|
|
+ this.isSensorVisible = true
|
|
|
+ } else {
|
|
|
+ this.isSensorVisible = false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ open(data) {
|
|
|
+ // 重置选项卡状态为传感器
|
|
|
+ this.isSensorVisible = true
|
|
|
+ this.deviceInfoList = data
|
|
|
+ // 填充摄像头数据
|
|
|
+ this.cameraList = data[0].cameras
|
|
|
+ this.deviceList = data[0].devices
|
|
|
+ this.currentWorkingStatus = data[0].devices[0].workingStatus
|
|
|
+ // 获取传感器基础数据
|
|
|
+ if(this.deviceList.length != 0){
|
|
|
+ getSensorDataInfoAndList(this.deviceList[0].deviceCode).then(res => {
|
|
|
+ this.deviceInfo = res.data.info
|
|
|
+ // 渲染图表
|
|
|
+ this.updateChart(res)
|
|
|
+ })
|
|
|
+ }
|
|
|
+ // 填充传感器数据 && 调取传感器详情
|
|
|
+ this.currentDeviceLabel = data[0].value
|
|
|
+ // this.currentCameraParam = data
|
|
|
+ this.tvWallInfoVisible = true
|
|
|
+ setTimeout(() => {
|
|
|
+ this.initChart()
|
|
|
+ })
|
|
|
+ },
|
|
|
+ updateChart(res){
|
|
|
+ this.signalOption.series[0].data = res.data.signalStrengthList
|
|
|
+ this.concentrationOption.series[0].data = res.data.smokescopeList
|
|
|
+ this.voltageOption.series[0].data = res.data.cellVoltageList
|
|
|
+ this.temperatureOption.series[0].data = res.data.temperaturethList
|
|
|
+ this.signalOption.xAxis.data = res.data.createTimeList
|
|
|
+ this.concentrationOption.xAxis.data = res.data.createTimeList
|
|
|
+ this.voltageOption.xAxis.data = res.data.createTimeList
|
|
|
+ this.temperatureOption.xAxis.data = res.data.createTimeList
|
|
|
+ setTimeout(() => {
|
|
|
+ this.initChart()
|
|
|
+ })
|
|
|
+ },
|
|
|
+ update(option, type) {
|
|
|
+ this.currentType = type
|
|
|
+ this.deviceInfoList = []
|
|
|
+ this.workingStatus = option.workingStatus
|
|
|
+ if (option.workingStatus == 0) {
|
|
|
+ // 在线
|
|
|
+ this.currentDevicePic = require('@/assets/images/camera-online.png')
|
|
|
+ } else {
|
|
|
+ // 离线
|
|
|
+ this.currentDevicePic = require('@/assets/images/camera-offline.png')
|
|
|
+ }
|
|
|
+ switch (type) {
|
|
|
+ case 'dataCenter':
|
|
|
+ if (option.cameras.length == 0) {
|
|
|
+ // 离线
|
|
|
+ this.currentCenterStatus = false
|
|
|
+ this.currentDevicePic = require('@/assets/images/camera-offline.png')
|
|
|
+ } else {
|
|
|
+ // 在线
|
|
|
+ this.currentCenterStatus = true
|
|
|
+ this.currentDevicePic = require('@/assets/images/camera-online.png')
|
|
|
+ }
|
|
|
+ if (option.pictures.length != 0) {
|
|
|
+ let newArr = []
|
|
|
+ option.pictures.forEach(e => {
|
|
|
+ newArr.push(
|
|
|
+ e
|
|
|
+ )
|
|
|
+ })
|
|
|
+ }
|
|
|
+ let newArr = []
|
|
|
+ for (let key in option.detail) {
|
|
|
+ newArr.push({
|
|
|
+ key,
|
|
|
+ value: option.detail[key]
|
|
|
+ })
|
|
|
+ }
|
|
|
+ this.deviceInfoList = newArr
|
|
|
+ break;
|
|
|
+ case 'animal':
|
|
|
+ if (option.cameraList.length == 0) {
|
|
|
+ // 离线
|
|
|
+ this.currentCenterStatus = false
|
|
|
+ this.currentDevicePic = require('@/assets/images/camera-offline.png')
|
|
|
+ } else {
|
|
|
+ // 在线
|
|
|
+ this.currentCenterStatus = true
|
|
|
+ this.currentDevicePic = require('@/assets/images/camera-online.png')
|
|
|
+ }
|
|
|
+ let animalArr = []
|
|
|
+ this.animalInfoKey.forEach(e => {
|
|
|
+ animalArr.push({
|
|
|
+ key: e.value,
|
|
|
+ value: option[e.key]
|
|
|
+ })
|
|
|
+ })
|
|
|
+ this.deviceInfoList = animalArr
|
|
|
+ break;
|
|
|
+ case 'tree':
|
|
|
+ let treeArr = []
|
|
|
+ this.treeInfoKey.forEach(e => {
|
|
|
+ treeArr.push({
|
|
|
+ key: e.value,
|
|
|
+ value: option[e.key]
|
|
|
+ })
|
|
|
+ })
|
|
|
+ this.deviceInfoList = treeArr
|
|
|
+ break;
|
|
|
+ case 'SHE':
|
|
|
+ this.infoKey.forEach(e => {
|
|
|
+ this.deviceInfoList.push({
|
|
|
+ key: e.value,
|
|
|
+ value: option[e.key]
|
|
|
+ })
|
|
|
+ })
|
|
|
+ break;
|
|
|
+ case 'CHUAN':
|
|
|
+ this.currentDevicePic = null
|
|
|
+ if (option.cameras.length == 0) {
|
|
|
+ // 在线
|
|
|
+ this.currentCenterStatus = false
|
|
|
+ this.currentDevicePic = require('@/assets/images/camera-offline.png')
|
|
|
+ } else {
|
|
|
+ // 离线
|
|
|
+ this.currentCameraParam = {
|
|
|
+ cameras: option.cameras,
|
|
|
+ longitude: option.longitude,
|
|
|
+ latitude: option.latitude
|
|
|
+ }
|
|
|
+ this.currentCenterStatus = true
|
|
|
+ this.currentDevicePic = require('@/assets/images/camera-online.png')
|
|
|
+ }
|
|
|
+ let chuanArr = []
|
|
|
+ for (let key in option.deviceList) {
|
|
|
+ chuanArr.push({
|
|
|
+ key,
|
|
|
+ value: option.deviceList[key]
|
|
|
+ })
|
|
|
+ }
|
|
|
+ for (let key in option.sensorDetectionList) {
|
|
|
+ chuanArr.push({
|
|
|
+ key,
|
|
|
+ value: option.sensorDetectionList[key]
|
|
|
+ })
|
|
|
+ }
|
|
|
+ this.deviceInfoList = chuanArr
|
|
|
+ break;
|
|
|
+ case 'LA':
|
|
|
+ this.laInfoKey.forEach(e => {
|
|
|
+ if (e.key == 'broadcastUse') {
|
|
|
+ this.deviceInfoList.push({
|
|
|
+ key: e.value,
|
|
|
+ value: option[e.key] == '1' ? '应急云广播' : '2' ? '智能云广播' : null
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ this.deviceInfoList.push({
|
|
|
+ key: e.value,
|
|
|
+ value: option[e.key]
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
+ this.currentDevicePic = require('@/assets/images/cloudBroadcast.png')
|
|
|
+ break;
|
|
|
+ case 'Zhi':
|
|
|
+ this.infoKey.forEach(e => {
|
|
|
+ this.deviceInfoList.push({
|
|
|
+ key: e.value,
|
|
|
+ value: option[e.key]
|
|
|
+ })
|
|
|
+ })
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ this.tvWallInfoVisible = true
|
|
|
+ },
|
|
|
+ toDo() {
|
|
|
+ switch (this.localMark) {
|
|
|
+ case 'She':
|
|
|
+ if (this.workingStatus != 0) return
|
|
|
+ this.$emit('toTvWall', this.currentCameraParam)
|
|
|
+ break;
|
|
|
+ case 'Chuan':
|
|
|
+ this.$emit('toTvWall_cgq', this.currentCameraParam)
|
|
|
+ break;
|
|
|
+ case 'La':
|
|
|
+ this.$emit('jump')
|
|
|
+ break;
|
|
|
+ case 'dataCenter':
|
|
|
+ if (!this.currentCenterStatus) return
|
|
|
+ this.$emit('toTvWall')
|
|
|
+ break;
|
|
|
+ case 'animal':
|
|
|
+ this.$emit('sewageOutletClick', this.currentCameraParam)
|
|
|
+ break;
|
|
|
+ case 'Zhi':
|
|
|
+ if (this.workingStatus != 0) return
|
|
|
+ this.$emit('toTvWall', this.currentCameraParam)
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ localMark(newVal) {
|
|
|
+ switch (newVal) {
|
|
|
+ case 'she':
|
|
|
+ // this.currentDevicePic = require('@/assets/images/camera-online.png')
|
|
|
+ break;
|
|
|
+ case 'CHUAN':
|
|
|
+
|
|
|
+ break;
|
|
|
+ case 'la':
|
|
|
+ // this.currentDevicePic = require('@/assets/images/cloudBroadcast.png')
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style rel="stylesheet/scss" lang="scss" scoped>
|
|
|
+ @import '@/assets/styles/base.scss';
|
|
|
+
|
|
|
+ .normal-state{
|
|
|
+ color: #06C562 !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .err-state{
|
|
|
+ color: #FF0000 !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ ::v-deep .el-radio-group {
|
|
|
+ width: 100%;
|
|
|
+
|
|
|
+ .el-radio-button {
|
|
|
+ width: 50%;
|
|
|
+ margin-top: 10%;
|
|
|
+
|
|
|
+ .el-radio-button__inner {
|
|
|
+ display: block;
|
|
|
+ background-color: #010518;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-radio-button__inner {
|
|
|
+ border-left: 1px solid #2C3F73 !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 选中样式
|
|
|
+ .el-radio-button__orig-radio:checked+.el-radio-button__inner {
|
|
|
+ background-color: #104A8F;
|
|
|
+ border-color: #104A8F;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .cameraBtn {
|
|
|
+ .el-radio-button__inner {
|
|
|
+ border-left: none !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .sensorInfo {
|
|
|
+ margin-top: 10%;
|
|
|
+ height: 75%;
|
|
|
+
|
|
|
+ span {
|
|
|
+ color: #2297DA;
|
|
|
+ }
|
|
|
+
|
|
|
+ >div{
|
|
|
+ >span:nth-child(1){
|
|
|
+ display: inline-block;
|
|
|
+ width: 140px;
|
|
|
+ white-space: nowrap;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ }
|
|
|
+ >span:nth-child(2){
|
|
|
+ float: right;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .cameraInfo {
|
|
|
+ overflow: hidden scroll;
|
|
|
+ margin-top: 10%;
|
|
|
+ height: 73%;
|
|
|
+
|
|
|
+ .cameradiv {
|
|
|
+ img {
|
|
|
+ border-radius: 5px;
|
|
|
+ border: 1px solid #10539a;
|
|
|
+ margin-right: 10px;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ color: #2297DA;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ color: #2297DA;
|
|
|
+ cursor: pointer;
|
|
|
+ >span{
|
|
|
+ display: block;
|
|
|
+ width: 105px !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .cameradiv:hover{
|
|
|
+ >span{
|
|
|
+ color: #55D7FF !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ >div {
|
|
|
+ display: flex;
|
|
|
+ }
|
|
|
+
|
|
|
+ >div:not(:nth-child(1)) {
|
|
|
+ margin-top: 10%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .select-device,.select-camera{
|
|
|
+ >span{
|
|
|
+ color: #55D7FF !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .device_contain:hover{
|
|
|
+ >span{
|
|
|
+ color: #55D7FF !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .device_contain span{
|
|
|
+ display: block;
|
|
|
+ width: 105px !important;
|
|
|
+ }
|
|
|
+</style>
|
|
|
+
|
|
|
+<style lang="scss">
|
|
|
+ .tvDialog {
|
|
|
+ margin-top: 10vh !important;
|
|
|
+ height: 75%;
|
|
|
+
|
|
|
+ padding-top: 0;
|
|
|
+
|
|
|
+ .el-dialog__body {
|
|
|
+ height: 92%;
|
|
|
+ padding: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-dialog__header {
|
|
|
+ height: 8% !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .container {
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+ background: url('~@/assets/images/tvWallBg.png') 0 0 no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+
|
|
|
+ .leftContain {
|
|
|
+ width: 24.2%;
|
|
|
+
|
|
|
+ // border-right: 2px solid #153E42;
|
|
|
+ .deviceInfo {
|
|
|
+ height: 71%;
|
|
|
+ overflow-x: scroll;
|
|
|
+ white-space: nowrap;
|
|
|
+
|
|
|
+ >div {
|
|
|
+ text-indent: 42px;
|
|
|
+ height: 10%;
|
|
|
+ font-size: 15px;
|
|
|
+ color: #A4A4A4;
|
|
|
+ font-weight: 700;
|
|
|
+ }
|
|
|
+
|
|
|
+ >div:nth-child(1) {
|
|
|
+ margin-top: 7%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .deviceInfo::-webkit-scrollbar {
|
|
|
+ display: block !important;
|
|
|
+ background-color: #101823;
|
|
|
+ // border: 1px solid #fff;
|
|
|
+ height: 10px !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .deviceInfo::-webkit-scrollbar-thumb {
|
|
|
+ background-color: #183974;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .rightContain {
|
|
|
+ width: 73%;
|
|
|
+ height: 100%;
|
|
|
+ margin: 0 auto 0;
|
|
|
+
|
|
|
+ .sernsorChart_contain {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+
|
|
|
+ >div {
|
|
|
+ width: 100%;
|
|
|
+ height: 20%;
|
|
|
+ }
|
|
|
+
|
|
|
+ >div {
|
|
|
+ margin-top: 4%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .camera_contain {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ align-content: flex-start;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+
|
|
|
+ .camera_list_row {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+
|
|
|
+ img {
|
|
|
+ margin-bottom: 10px;
|
|
|
+ border-radius: 5px;
|
|
|
+ border: 1px solid #10539a;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+
|
|
|
+ h4{
|
|
|
+ color: #2297DA;
|
|
|
+ cursor: pointer;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .camera_list_row:hover{
|
|
|
+ >h4{
|
|
|
+ color: #55D7FF !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ >div {
|
|
|
+ width: 20%;
|
|
|
+ height: 20%;
|
|
|
+ margin-top: 3%;
|
|
|
+ }
|
|
|
+
|
|
|
+ >div:nth-child(4n-3) {
|
|
|
+ margin-left: 8%;
|
|
|
+ }
|
|
|
+
|
|
|
+ >div:not(:nth-child(4n-3)) {
|
|
|
+ margin-left: 3%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .leader-info-container {
|
|
|
+ .el-descriptions-item__label {
|
|
|
+ width: 77px !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .bd-table {
|
|
|
+ .el-descriptions__body {
|
|
|
+ .el-descriptions__table {
|
|
|
+ .el-descriptions-row {
|
|
|
+ .el-descriptions-item__cell {
|
|
|
+ border: 1px solid #2297DA;
|
|
|
+ color: #2297DA;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+</style>
|
