visu_supervision/src/components/DeviceDialog/index.vue

/*
*@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 : '&#45;&#45;' }}</span>-->
<!--                    <span>状态：<span :class="currentWorkingStatus == '0' ? 'normal-state' : 'err-state' ">{{ currentWorkingStatus == '0' ? '正常' : "异常" }}</span></span>-->
<!--                </div>-->
<!--								<div>-->
<!--									<span title="烟感探测器">信号强度：{{ deviceInfo.signalStrength ? deviceInfo.signalStrength : '&#45;&#45;' }}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 : '&#45;&#45;' }}%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 : '&#45;&#45;' }}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 : '&#45;&#45;' }}℃</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>