|
@@ -35,54 +35,74 @@
|
|
|
|
|
|
<!-- 传感器基础数据 -->
|
|
<!-- 传感器基础数据 -->
|
|
<div class="sensorInfo" v-show="isSensorVisible">
|
|
<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="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 style="margin-top: 5%;"></div>
|
|
<!-- 传感器列表 -->
|
|
<!-- 传感器列表 -->
|
|
<div class="cameraInfo">
|
|
<div class="cameraInfo">
|
|
- <div
|
|
|
|
- v-for="(e,idx) in deviceList"
|
|
|
|
- :key="idx"
|
|
|
|
|
|
+ <div
|
|
|
|
+ v-for="(e,idx) in deviceList"
|
|
|
|
+ :key="idx"
|
|
class="cameradiv device_contain"
|
|
class="cameradiv device_contain"
|
|
@click="currentDeviceHasChanged(e,idx)"
|
|
@click="currentDeviceHasChanged(e,idx)"
|
|
:class="currentDevice == idx ? 'select-device' : '' "
|
|
:class="currentDevice == idx ? 'select-device' : '' "
|
|
>
|
|
>
|
|
- <img
|
|
|
|
- :src="e.deviceImg?e.deviceImg : require('@/assets/images/video-plaza/shiLianWangImg/no-camera.png')"
|
|
|
|
|
|
+ <img
|
|
|
|
+ :src="e.deviceImg?e.deviceImg : require('@/assets/images/video-plaza/shiLianWangImg/no-camera.png')"
|
|
style="width: 110px;height: 70px;object-fit: fill;"
|
|
style="width: 110px;height: 70px;object-fit: fill;"
|
|
>
|
|
>
|
|
-
|
|
|
|
|
|
+
|
|
<span>{{ e.deviceName }}</span>
|
|
<span>{{ e.deviceName }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 摄像头基础数据 -->
|
|
<!-- 摄像头基础数据 -->
|
|
<div class="cameraInfo" v-show="!isSensorVisible">
|
|
<div class="cameraInfo" v-show="!isSensorVisible">
|
|
- <div
|
|
|
|
- v-for="(e,idx) in cameraList"
|
|
|
|
- :key="idx"
|
|
|
|
- class="cameradiv"
|
|
|
|
|
|
+ <div
|
|
|
|
+ v-for="(e,idx) in cameraList"
|
|
|
|
+ :key="idx"
|
|
|
|
+ class="cameradiv"
|
|
@click="deviceShow(e,idx)"
|
|
@click="deviceShow(e,idx)"
|
|
>
|
|
>
|
|
- <img
|
|
|
|
|
|
+ <img
|
|
:src="e.cameraImg?e.cameraImg : require('@/assets/images/video-plaza/shiLianWangImg/no-camera.png') "
|
|
:src="e.cameraImg?e.cameraImg : require('@/assets/images/video-plaza/shiLianWangImg/no-camera.png') "
|
|
style="width: 110px;height: 70px;object-fit: fill;"
|
|
style="width: 110px;height: 70px;object-fit: fill;"
|
|
>
|
|
>
|
|
@@ -108,14 +128,14 @@
|
|
</div>
|
|
</div>
|
|
<!-- 摄像头视图 -->
|
|
<!-- 摄像头视图 -->
|
|
<div class="camera_contain" v-show="!isSensorVisible">
|
|
<div class="camera_contain" v-show="!isSensorVisible">
|
|
- <div class="camera_list_row"
|
|
|
|
- v-for="(e,idx) in cameraList"
|
|
|
|
|
|
+ <div class="camera_list_row"
|
|
|
|
+ v-for="(e,idx) in cameraList"
|
|
:key="idx"
|
|
:key="idx"
|
|
@click="deviceShow(e)"
|
|
@click="deviceShow(e)"
|
|
>
|
|
>
|
|
- <img
|
|
|
|
|
|
+ <img
|
|
:src="e.cameraImg?e.cameraImg : require('@/assets/images/video-plaza/shiLianWangImg/no-camera.png') "
|
|
:src="e.cameraImg?e.cameraImg : require('@/assets/images/video-plaza/shiLianWangImg/no-camera.png') "
|
|
- style="width: 153px;height: 94px;object-fit: fill;"
|
|
|
|
|
|
+ style="width: 153px;height: 94px;object-fit: fill;"
|
|
>
|
|
>
|
|
<h4>{{ e.cameraName }}</h4>
|
|
<h4>{{ e.cameraName }}</h4>
|
|
</div>
|
|
</div>
|
|
@@ -222,6 +242,7 @@
|
|
currentRadio: '传感器',
|
|
currentRadio: '传感器',
|
|
isSensorVisible: true, // 当前是否显示为传感器信息,否则为摄像头信息,默认为传感器
|
|
isSensorVisible: true, // 当前是否显示为传感器信息,否则为摄像头信息,默认为传感器
|
|
signalOption: {
|
|
signalOption: {
|
|
|
|
+ color: ['#bf791f', '#bf791f', '#bf791f'], // 设置全局颜色
|
|
grid: {
|
|
grid: {
|
|
top: '15%',
|
|
top: '15%',
|
|
left: '3%',
|
|
left: '3%',
|
|
@@ -236,19 +257,19 @@
|
|
'23:00', '24:00',
|
|
'23:00', '24:00',
|
|
],
|
|
],
|
|
lineStyle: {
|
|
lineStyle: {
|
|
- color: "#2297DA",
|
|
|
|
|
|
+ color: "#bf791f",
|
|
},
|
|
},
|
|
axisLabel: {
|
|
axisLabel: {
|
|
formatter: '{value}',
|
|
formatter: '{value}',
|
|
},
|
|
},
|
|
splitLine: {
|
|
splitLine: {
|
|
lineStyle: {
|
|
lineStyle: {
|
|
- color: "#2297DA",
|
|
|
|
|
|
+ color: "#bf791f",
|
|
},
|
|
},
|
|
},
|
|
},
|
|
axisLine: {
|
|
axisLine: {
|
|
lineStyle: {
|
|
lineStyle: {
|
|
- color: "#2297DA",
|
|
|
|
|
|
+ color: "#bf791f",
|
|
},
|
|
},
|
|
},
|
|
},
|
|
|
|
|
|
@@ -258,7 +279,7 @@
|
|
axisLabel: {
|
|
axisLabel: {
|
|
formatter: '{value} dB/m',
|
|
formatter: '{value} dB/m',
|
|
textStyle: {
|
|
textStyle: {
|
|
- color: "#2297DA",
|
|
|
|
|
|
+ color: "#bf791f",
|
|
},
|
|
},
|
|
},
|
|
},
|
|
splitLine: {
|
|
splitLine: {
|
|
@@ -268,7 +289,7 @@
|
|
},
|
|
},
|
|
axisLine: {
|
|
axisLine: {
|
|
lineStyle: {
|
|
lineStyle: {
|
|
- color: "#2297DA",
|
|
|
|
|
|
+ color: "#bf791f",
|
|
},
|
|
},
|
|
},
|
|
},
|
|
},
|
|
},
|
|
@@ -276,10 +297,11 @@
|
|
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,
|
|
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,
|
|
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'
|
|
|
|
|
|
+ type: 'line',
|
|
}]
|
|
}]
|
|
},
|
|
},
|
|
concentrationOption: {
|
|
concentrationOption: {
|
|
|
|
+ color: ['#06C562', '#06C562', '#06C562'], // 设置全局颜色
|
|
grid: {
|
|
grid: {
|
|
top: '15%',
|
|
top: '15%',
|
|
left: '3%',
|
|
left: '3%',
|
|
@@ -295,12 +317,12 @@
|
|
],
|
|
],
|
|
splitLine: {
|
|
splitLine: {
|
|
lineStyle: {
|
|
lineStyle: {
|
|
- color: "#2297DA",
|
|
|
|
|
|
+ color: "#06C562",
|
|
},
|
|
},
|
|
},
|
|
},
|
|
axisLine: {
|
|
axisLine: {
|
|
lineStyle: {
|
|
lineStyle: {
|
|
- color: "#2297DA",
|
|
|
|
|
|
+ color: "#06C562",
|
|
},
|
|
},
|
|
},
|
|
},
|
|
},
|
|
},
|
|
@@ -316,7 +338,7 @@
|
|
},
|
|
},
|
|
axisLine: {
|
|
axisLine: {
|
|
lineStyle: {
|
|
lineStyle: {
|
|
- color: "#2297DA",
|
|
|
|
|
|
+ color: "#06C562",
|
|
},
|
|
},
|
|
},
|
|
},
|
|
},
|
|
},
|
|
@@ -328,6 +350,7 @@
|
|
}]
|
|
}]
|
|
},
|
|
},
|
|
voltageOption: {
|
|
voltageOption: {
|
|
|
|
+ color: ['#1ce7e0', '#1ce7e0', '#1ce7e0'], // 设置全局颜色
|
|
grid: {
|
|
grid: {
|
|
top: '15%',
|
|
top: '15%',
|
|
left: '3%',
|
|
left: '3%',
|
|
@@ -343,12 +366,12 @@
|
|
],
|
|
],
|
|
splitLine: {
|
|
splitLine: {
|
|
lineStyle: {
|
|
lineStyle: {
|
|
- color: "#2297DA",
|
|
|
|
|
|
+ color: "#1ce7e0",
|
|
},
|
|
},
|
|
},
|
|
},
|
|
axisLine: {
|
|
axisLine: {
|
|
lineStyle: {
|
|
lineStyle: {
|
|
- color: "#2297DA",
|
|
|
|
|
|
+ color: "#1ce7e0",
|
|
},
|
|
},
|
|
},
|
|
},
|
|
},
|
|
},
|
|
@@ -364,7 +387,7 @@
|
|
},
|
|
},
|
|
axisLine: {
|
|
axisLine: {
|
|
lineStyle: {
|
|
lineStyle: {
|
|
- color: "#2297DA",
|
|
|
|
|
|
+ color: "#1ce7e0",
|
|
},
|
|
},
|
|
},
|
|
},
|
|
},
|
|
},
|
|
@@ -377,6 +400,7 @@
|
|
}]
|
|
}]
|
|
},
|
|
},
|
|
temperatureOption: {
|
|
temperatureOption: {
|
|
|
|
+ color: ['#9aaf2a', '#9aaf2a', '#9aaf2a'], // 设置全局颜色
|
|
grid: {
|
|
grid: {
|
|
top: '15%',
|
|
top: '15%',
|
|
left: '3%',
|
|
left: '3%',
|
|
@@ -392,12 +416,12 @@
|
|
],
|
|
],
|
|
splitLine: {
|
|
splitLine: {
|
|
lineStyle: {
|
|
lineStyle: {
|
|
- color: "#2297DA",
|
|
|
|
|
|
+ color: "#9aaf2a",
|
|
},
|
|
},
|
|
},
|
|
},
|
|
axisLine: {
|
|
axisLine: {
|
|
lineStyle: {
|
|
lineStyle: {
|
|
- color: "#2297DA",
|
|
|
|
|
|
+ color: "#9aaf2a",
|
|
},
|
|
},
|
|
},
|
|
},
|
|
},
|
|
},
|
|
@@ -413,7 +437,7 @@
|
|
},
|
|
},
|
|
axisLine: {
|
|
axisLine: {
|
|
lineStyle: {
|
|
lineStyle: {
|
|
- color: "#2297DA",
|
|
|
|
|
|
+ color: "#9aaf2a",
|
|
},
|
|
},
|
|
},
|
|
},
|
|
},
|
|
},
|
|
@@ -796,7 +820,7 @@
|
|
|
|
|
|
.cameradiv:hover{
|
|
.cameradiv:hover{
|
|
>span{
|
|
>span{
|
|
- color: #55D7FF !important;
|
|
|
|
|
|
+ color: #55D7FF !important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
@@ -811,13 +835,13 @@
|
|
|
|
|
|
.select-device,.select-camera{
|
|
.select-device,.select-camera{
|
|
>span{
|
|
>span{
|
|
- color: #55D7FF !important;
|
|
|
|
|
|
+ color: #55D7FF !important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
.device_contain:hover{
|
|
.device_contain:hover{
|
|
>span{
|
|
>span{
|
|
- color: #55D7FF !important;
|
|
|
|
|
|
+ color: #55D7FF !important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.device_contain span{
|
|
.device_contain span{
|
|
@@ -918,16 +942,17 @@
|
|
border: 1px solid #10539a;
|
|
border: 1px solid #10539a;
|
|
cursor: pointer;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
-
|
|
|
|
|
|
+
|
|
h4{
|
|
h4{
|
|
color: #2297DA;
|
|
color: #2297DA;
|
|
cursor: pointer;
|
|
cursor: pointer;
|
|
|
|
+ text-align: center;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
.camera_list_row:hover{
|
|
.camera_list_row:hover{
|
|
>h4{
|
|
>h4{
|
|
- color: #55D7FF !important;
|
|
|
|
|
|
+ color: #55D7FF !important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
@@ -968,4 +993,4 @@
|
|
}
|
|
}
|
|
|
|
|
|
}
|
|
}
|
|
-</style>
|
|
|
|
|
|
+</style>
|