|
|
|
@ -9,32 +9,32 @@ |
|
|
|
<span class="left-bottom-line" /> |
|
|
|
<h3><i class="iconfont icon-kongqizhiliangshuju" />档案库空气质量数据</h3> |
|
|
|
<ul class="screen-env-list"> |
|
|
|
<li> |
|
|
|
<li v-show="topDisplayData.DAK_DIV_TOP_003.show" :class="{ 'li-warn': topDisplayData.DAK_DIV_TOP_003.curstatus > 0 }"> |
|
|
|
<svg-icon icon-class="co2" class-name="msg-list-svg" /> |
|
|
|
<div class="msg-txt"> |
|
|
|
<span class="msg-list-num">60</span> |
|
|
|
<p class="msg-list-unit">CO2ppm</p> |
|
|
|
<span class="msg-list-num">{{ topDisplayData.DAK_DIV_TOP_003.curValue }}</span> |
|
|
|
<p class="msg-list-unit">CO2 {{ topDisplayData.DAK_DIV_TOP_003.unit }}</p> |
|
|
|
</div> |
|
|
|
</li> |
|
|
|
<li> |
|
|
|
<li v-show="topDisplayData.DAK_DIV_TOP_004.show" :class="{ 'li-warn': topDisplayData.DAK_DIV_TOP_004.curstatus > 0 }"> |
|
|
|
<svg-icon icon-class="voc" class-name="msg-list-svg" /> |
|
|
|
<div class="msg-txt"> |
|
|
|
<span class="msg-list-num">60</span> |
|
|
|
<p class="msg-list-unit">VOCmg/m³</p> |
|
|
|
<span class="msg-list-num">{{ topDisplayData.DAK_DIV_TOP_004.curValue }}</span> |
|
|
|
<p class="msg-list-unit">VOC {{ topDisplayData.DAK_DIV_TOP_004.unit }}</p> |
|
|
|
</div> |
|
|
|
</li> |
|
|
|
<li class="msg-pm li-warn"> |
|
|
|
<li v-show="topDisplayData.DAK_DIV_TOP_005.show" :class="{ 'li-warn': topDisplayData.DAK_DIV_TOP_005.curstatus > 0 }" class="msg-pm"> |
|
|
|
<svg-icon icon-class="pm25" class-name="msg-list-svg" /> |
|
|
|
<div class="msg-txt"> |
|
|
|
<span class="msg-list-num">60</span> |
|
|
|
<p class="msg-list-unit">PM2.5ug/m³</p> |
|
|
|
<span class="msg-list-num">{{ topDisplayData.DAK_DIV_TOP_005.curValue }}</span> |
|
|
|
<p class="msg-list-unit">PM2.5 {{ topDisplayData.DAK_DIV_TOP_005.unit }}</p> |
|
|
|
</div> |
|
|
|
</li> |
|
|
|
<li class="msg-pm"> |
|
|
|
<li v-show="topDisplayData.DAK_DIV_TOP_006.show" :class="{ 'li-warn': topDisplayData.DAK_DIV_TOP_006.curstatus > 0 }" class="msg-pm"> |
|
|
|
<svg-icon icon-class="pm10" class-name="msg-list-svg" /> |
|
|
|
<div class="msg-txt"> |
|
|
|
<span class="msg-list-num">60</span> |
|
|
|
<p class="msg-list-unit">PM10ug/m³</p> |
|
|
|
<span class="msg-list-num">{{ topDisplayData.DAK_DIV_TOP_006.curValue }}</span> |
|
|
|
<p class="msg-list-unit">PM10 {{ topDisplayData.DAK_DIV_TOP_006.unit }}</p> |
|
|
|
</div> |
|
|
|
</li> |
|
|
|
</ul> |
|
|
|
@ -90,28 +90,20 @@ |
|
|
|
</div> |
|
|
|
<div class="env-main-middle"> |
|
|
|
<div class="env-3d"> |
|
|
|
<iframe |
|
|
|
id="myIframe" |
|
|
|
ref="myIframe" |
|
|
|
name="iframeMap" |
|
|
|
class="iframe_box" |
|
|
|
src="/webA/index.html" |
|
|
|
frameborder="0" |
|
|
|
scrolling="no" |
|
|
|
/> |
|
|
|
<iframe id="myIframe" ref="myIframe" name="iframeMap" class="iframe_box" src="/webA/index.html" frameborder="0" scrolling="no" /> |
|
|
|
<ul class="screen-env-list"> |
|
|
|
<li> |
|
|
|
<li v-show="topDisplayData.DAK_DIV_TOP_001.show" :class="{ 'li-warn': topDisplayData.DAK_DIV_TOP_001.curstatus > 0 }"> |
|
|
|
<svg-icon icon-class="temperature" class-name="msg-list-svg" /> |
|
|
|
<div class="msg-txt"> |
|
|
|
<span class="msg-list-num">60</span> |
|
|
|
<p class="msg-list-unit">温度℃</p> |
|
|
|
<span class="msg-list-num">{{ topDisplayData.DAK_DIV_TOP_001.curValue }}</span> |
|
|
|
<p class="msg-list-unit">温度 {{ topDisplayData.DAK_DIV_TOP_001.unit }}</p> |
|
|
|
</div> |
|
|
|
</li> |
|
|
|
<li class="li-warn"> |
|
|
|
<li v-show="topDisplayData.DAK_DIV_TOP_002.show" :class="{ 'li-warn': topDisplayData.DAK_DIV_TOP_002.curstatus > 0 }"> |
|
|
|
<svg-icon icon-class="shidu" class-name="msg-list-svg" /> |
|
|
|
<div class="msg-txt"> |
|
|
|
<span class="msg-list-num">60</span> |
|
|
|
<p class="msg-list-unit">湿度%</p> |
|
|
|
<span class="msg-list-num">{{ topDisplayData.DAK_DIV_TOP_002.curValue }}</span> |
|
|
|
<p class="msg-list-unit">湿度 {{ topDisplayData.DAK_DIV_TOP_002.unit }}</p> |
|
|
|
</div> |
|
|
|
</li> |
|
|
|
</ul> |
|
|
|
@ -217,20 +209,11 @@ import { getCurrentTime } from '@/utils/index' |
|
|
|
import typePie from '@/views/components/echarts/typePie.vue' |
|
|
|
import lendAcross from '@/views/components/echarts/lendAcross.vue' |
|
|
|
import Video from '@/views/storeManage/warehouse3D/module/video' |
|
|
|
import data1 from './data1.json' |
|
|
|
import WarehouseWarning from '@/views/components/WarehouseWarning' |
|
|
|
import SecurityDoor from '@/views/components/SecurityDoor' |
|
|
|
import displayConfigApi from '@/api/storeManage/displayConfig' |
|
|
|
import thirdApi from '@/api/thirdApi' |
|
|
|
import { statisticsCrud } from '@/views/system/archiveStatistics/mixins/statistics' |
|
|
|
const lineChartData = { |
|
|
|
readRoomData: { |
|
|
|
temperatureData: [16, 12, 15, 11, 20, 16, 15, 22], |
|
|
|
humidnessData: [10, 50, 40, 60, 50, 30, 15, 30] |
|
|
|
}, |
|
|
|
collateRoomData: { |
|
|
|
temperatureData: [16, 12, 15, 11, 20, 16, 15, 22], |
|
|
|
humidnessData: [10, 50, 40, 60, 50, 30, 15, 30] |
|
|
|
} |
|
|
|
} |
|
|
|
export default { |
|
|
|
name: 'EnvironmentalScreen', |
|
|
|
components: { |
|
|
|
@ -245,21 +228,73 @@ export default { |
|
|
|
return { |
|
|
|
nowDate: '', |
|
|
|
timer: null, |
|
|
|
tableData: [], |
|
|
|
lineChartData: lineChartData, |
|
|
|
lendData: [], |
|
|
|
typeData: [], |
|
|
|
className: ['readRoomContainer', 'collateRoomContainer'] |
|
|
|
className: ['readRoomContainer', 'collateRoomContainer'], |
|
|
|
roomId: 'D6490DA3D4261E8C26D0E3', |
|
|
|
allDisplayConfigData: [], |
|
|
|
displayConfigData: [], |
|
|
|
url: '', |
|
|
|
allDeviceIds: [], |
|
|
|
oaoMessage: [], |
|
|
|
topDisplayData: { |
|
|
|
DAK_DIV_TOP_001: { |
|
|
|
show: false, |
|
|
|
curValue: '', |
|
|
|
unit: '', |
|
|
|
curstatus: 0 |
|
|
|
}, |
|
|
|
DAK_DIV_TOP_002: { |
|
|
|
show: false, |
|
|
|
curValue: '', |
|
|
|
unit: '', |
|
|
|
curstatus: 0 |
|
|
|
}, |
|
|
|
DAK_DIV_TOP_003: { |
|
|
|
show: false, |
|
|
|
curValue: '', |
|
|
|
unit: '', |
|
|
|
curstatus: 0 |
|
|
|
}, |
|
|
|
DAK_DIV_TOP_004: { |
|
|
|
show: false, |
|
|
|
curValue: '', |
|
|
|
unit: '', |
|
|
|
curstatus: 0 |
|
|
|
}, |
|
|
|
DAK_DIV_TOP_005: { |
|
|
|
show: false, |
|
|
|
curValue: '', |
|
|
|
unit: '', |
|
|
|
curstatus: 0 |
|
|
|
}, |
|
|
|
DAK_DIV_TOP_006: { |
|
|
|
show: false, |
|
|
|
curValue: '', |
|
|
|
unit: '', |
|
|
|
curstatus: 0 |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
created() { |
|
|
|
async created() { |
|
|
|
this.timer = setInterval(() => { |
|
|
|
this.nowDate = getCurrentTime() |
|
|
|
}, 1000) |
|
|
|
window.getIframeLoading = this.getIframeLoading // 把vue实例中的方法引用给window对象 |
|
|
|
this.allDisplayConfigData = await displayConfigApi.list({ storeroomId: this.roomId }) |
|
|
|
this.allDisplayConfigData.forEach(element => { |
|
|
|
if (element.isDisplay && element.bindState && element.deviceInfo && (element.divPosition.includes('OAO') || element.divPosition.includes('TOP') || element.divPosition.includes('LS'))) { |
|
|
|
this.allDeviceIds.push(element.deviceInfo.deviceId) |
|
|
|
if (!this.url) { |
|
|
|
this.url = 'http://' + element.deviceInfo.deviceIp + ':' + element.deviceInfo.devicePort |
|
|
|
} |
|
|
|
} |
|
|
|
}) |
|
|
|
this.displayConfigData = this.allDisplayConfigData.filter((item) => { return item.isDisplay && item.bindState && item.deviceInfo && (item.divPosition.includes('OAO') || item.divPosition.includes('TOP') || item.divPosition.includes('LS')) }) |
|
|
|
await this.getRealTimeData() |
|
|
|
}, |
|
|
|
mounted() { |
|
|
|
this.tableData = data1.rows |
|
|
|
const _this = this |
|
|
|
this.iframeWin = this.$refs.myIframe.contentWindow |
|
|
|
// inframe 加载完成之后 |
|
|
|
@ -267,50 +302,39 @@ export default { |
|
|
|
_this.deviceState() |
|
|
|
} |
|
|
|
window.addEventListener('message', this.handleMessageDevice) |
|
|
|
// 定时请求第三方数据，更新页面数据 |
|
|
|
this.dataTimer = setInterval(async() => { |
|
|
|
await _this.getRealTimeData() |
|
|
|
_this.handleAQI() |
|
|
|
}, 10000) |
|
|
|
}, |
|
|
|
beforeDestroy() { |
|
|
|
if (this.timer) { |
|
|
|
clearInterval(this.timer) |
|
|
|
} |
|
|
|
if (this.dataTimer) { |
|
|
|
clearInterval(this.dataTimer) |
|
|
|
} |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
// 加载完成状态传值 |
|
|
|
getIframeLoading(value) { |
|
|
|
// console.log(`我是iframe传过来的参数：${value}`) |
|
|
|
if (value === 'false') { |
|
|
|
this.handleHide('DAK_MO_OAO_001') |
|
|
|
this.handleAlarm('DAK_MO_OAO_003') |
|
|
|
this.allDisplayConfigData.forEach(element => { |
|
|
|
if ((!element.isDisplay || !element.bindState) && element.divPosition.includes('OAO')) { |
|
|
|
this.handleHide(element.divPosition) |
|
|
|
} |
|
|
|
}) |
|
|
|
// this.handleAlarm('DAK_MO_OAO_003') |
|
|
|
this.deviceState() |
|
|
|
this.handleAQI() |
|
|
|
} |
|
|
|
}, |
|
|
|
// 传入设备状态data / 给iframe传初始值 |
|
|
|
deviceState(e) { |
|
|
|
this.iframeWin.postMessage({ |
|
|
|
data: [ |
|
|
|
{ |
|
|
|
id: 'DAK_MO_OAO_001', |
|
|
|
wendu: 6, |
|
|
|
sidu: 10, |
|
|
|
alarmState: false |
|
|
|
}, |
|
|
|
{ |
|
|
|
id: 'DAK_MO_OAO_002', |
|
|
|
wendu: 2, |
|
|
|
sidu: 5, |
|
|
|
alarmState: false |
|
|
|
}, |
|
|
|
{ |
|
|
|
id: 'DAK_MO_OAO_003', |
|
|
|
wendu: 3, |
|
|
|
sidu: 1, |
|
|
|
alarmState: false |
|
|
|
}, |
|
|
|
{ |
|
|
|
id: 'DAK_MO_OAO_004', |
|
|
|
wendu: 6, |
|
|
|
sidu: 6, |
|
|
|
alarmState: false |
|
|
|
} |
|
|
|
] |
|
|
|
data: this.oaoMessage |
|
|
|
}, '*') |
|
|
|
}, |
|
|
|
// 点击查看设备状况 / 密集架列号 |
|
|
|
@ -330,13 +354,20 @@ export default { |
|
|
|
} |
|
|
|
}, |
|
|
|
// 设置温湿度 |
|
|
|
handleAQI(deviceId, wendu, sidu) { |
|
|
|
window.frames['iframeMap'].setAlertValue(deviceId, wendu, sidu) |
|
|
|
handleAQI() { |
|
|
|
this.oaoMessage.forEach(element => { |
|
|
|
window.frames['iframeMap'].setAlertValue(element.id, element.wendu, element.sidu) |
|
|
|
}) |
|
|
|
}, |
|
|
|
// 设置温湿度报警状况 |
|
|
|
handleAlarm(deviceId) { |
|
|
|
window.frames['iframeMap'].Myalert(deviceId, true) |
|
|
|
}, |
|
|
|
// 设置是否显示 |
|
|
|
handleHide(deviceId) { |
|
|
|
// true 显示 false 隐藏 |
|
|
|
window.frames['iframeMap'].setYangGanCanshow(deviceId, false) |
|
|
|
}, |
|
|
|
// 表格隔行变色 |
|
|
|
rowBgColor({ row, rowIndex }) { |
|
|
|
if (rowIndex % 2 === 1) { |
|
|
|
@ -344,66 +375,112 @@ export default { |
|
|
|
} else { |
|
|
|
return '' |
|
|
|
} |
|
|
|
}, |
|
|
|
getRealTimeData() { |
|
|
|
if (this.allDeviceIds.length > 0) { |
|
|
|
thirdApi.getRealTimeData({ ids: this.allDeviceIds, url: this.url }).then((data) => { |
|
|
|
this.oaoMessage.splice(0, this.oaoMessage.length) |
|
|
|
this.displayConfigData.forEach(element => { |
|
|
|
if (element.divPosition.includes('TOP') && element.deviceSpecParams[0]) { |
|
|
|
// 获取页面div显示的数据 |
|
|
|
const result = data.find((item) => { |
|
|
|
return item.property_id === element.deviceSpecParams[0].paramId && item.device_id === element.deviceInfo.deviceId |
|
|
|
}) |
|
|
|
this.$set(this.topDisplayData, element.divPosition, { |
|
|
|
show: true, |
|
|
|
curValue: result.curvalue, |
|
|
|
unit: result.unit, |
|
|
|
curstatus: result.curstatus |
|
|
|
}) |
|
|
|
} else if (element.divPosition.includes('OAO')) { |
|
|
|
// 获取3D弹窗显示的数据 |
|
|
|
const wenduParamId = element.deviceSpecParams.find((item) => { return item.paramName === '温度' })?.paramId |
|
|
|
const siduParamId = element.deviceSpecParams.find((item) => { return item.paramName === '湿度' })?.paramId |
|
|
|
let wendu = {} |
|
|
|
let sidu = {} |
|
|
|
if (wenduParamId) { |
|
|
|
wendu = data.find((item) => { |
|
|
|
return item.property_id === wenduParamId && item.device_id === element.deviceInfo.deviceId |
|
|
|
}) |
|
|
|
} |
|
|
|
if (siduParamId) { |
|
|
|
sidu = data.find((item) => { |
|
|
|
return item.property_id === siduParamId && item.device_id === element.deviceInfo.deviceId |
|
|
|
}) |
|
|
|
} |
|
|
|
console.log(wendu?.curstatus, sidu?.curstatus) |
|
|
|
this.oaoMessage.push({ |
|
|
|
id: element.divPosition, |
|
|
|
wendu: (wendu?.curvalue) ? (Math.round(wendu?.curvalue)) : '-', |
|
|
|
sidu: (sidu?.curvalue) ? (Math.round(sidu?.curvalue)) : '-', |
|
|
|
alarmState: (wendu && wendu.curstatus > 0) || (sidu && sidu.curstatus > 0) |
|
|
|
}) |
|
|
|
} else { |
|
|
|
// LS 漏水感应器 |
|
|
|
} |
|
|
|
}) |
|
|
|
}) |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
</script> |
|
|
|
|
|
|
|
<style rel="stylesheet/scss" lang="scss" scoped> |
|
|
|
@import '~@/assets/styles/lend-manage.scss'; |
|
|
|
.env-container{ |
|
|
|
@import "~@/assets/styles/lend-manage.scss"; |
|
|
|
.env-container { |
|
|
|
width: 100%; |
|
|
|
height: calc(100vh); |
|
|
|
background-color: #031435; |
|
|
|
.env-top-title{ |
|
|
|
.env-top-title { |
|
|
|
width: calc(100vw); |
|
|
|
height: 130px; |
|
|
|
background: url('~@/assets/images/largeScreen/top-title.png') no-repeat 0 -14px; |
|
|
|
background: url("~@/assets/images/largeScreen/top-title.png") no-repeat 0 -14px; |
|
|
|
background-size: contain; |
|
|
|
} |
|
|
|
.current-date{ |
|
|
|
.current-date { |
|
|
|
position: fixed; |
|
|
|
top: 25px; |
|
|
|
right: 150px; |
|
|
|
font-size: 16px; |
|
|
|
color: #3A99FD; |
|
|
|
color: #3a99fd; |
|
|
|
} |
|
|
|
.env-main{ |
|
|
|
.env-main { |
|
|
|
display: flex; |
|
|
|
justify-content: space-between; |
|
|
|
padding: 0 25px; |
|
|
|
margin-top: -12px; |
|
|
|
.env-main-left, |
|
|
|
.env-main-right{ |
|
|
|
.env-main-right { |
|
|
|
max-width: 24%; |
|
|
|
flex: 1; |
|
|
|
height: calc(100vh - 138px); |
|
|
|
overflow: hidden; |
|
|
|
} |
|
|
|
.env-main-middle{ |
|
|
|
.env-main-middle { |
|
|
|
flex: 1; |
|
|
|
margin: 0 20px; |
|
|
|
height: calc(100vh - 138px); |
|
|
|
} |
|
|
|
.container-wrap{ |
|
|
|
height: calc(100%/3 - 14px); |
|
|
|
.container-wrap { |
|
|
|
height: calc(100% / 3 - 14px); |
|
|
|
min-height: auto; |
|
|
|
} |
|
|
|
.env-item { |
|
|
|
margin-bottom: 20px; |
|
|
|
text-align: center; |
|
|
|
h3{ |
|
|
|
h3 { |
|
|
|
position: relative; |
|
|
|
display: inline-block; |
|
|
|
padding: 10px 70px; |
|
|
|
font-size: 16px; |
|
|
|
color: #fff; |
|
|
|
.iconfont{ |
|
|
|
.iconfont { |
|
|
|
margin-right: 10px; |
|
|
|
font-size: 14px; |
|
|
|
color: #F65163; |
|
|
|
color: #f65163; |
|
|
|
} |
|
|
|
&::before{ |
|
|
|
&::before { |
|
|
|
content: ""; |
|
|
|
position: absolute; |
|
|
|
left: 0; |
|
|
|
@ -411,10 +488,11 @@ export default { |
|
|
|
width: 36px; |
|
|
|
height: 12px; |
|
|
|
margin-top: -6px; |
|
|
|
background: url('~@/assets/images/largeScreen/item-left.png') no-repeat; |
|
|
|
background: url("~@/assets/images/largeScreen/item-left.png") |
|
|
|
no-repeat; |
|
|
|
background-size: cover; |
|
|
|
} |
|
|
|
&::after{ |
|
|
|
&::after { |
|
|
|
content: ""; |
|
|
|
position: absolute; |
|
|
|
top: 50%; |
|
|
|
@ -422,75 +500,76 @@ export default { |
|
|
|
width: 36px; |
|
|
|
height: 12px; |
|
|
|
margin-top: -6px; |
|
|
|
background: url('~@/assets/images/largeScreen/item-right.png') no-repeat; |
|
|
|
background: url("~@/assets/images/largeScreen/item-right.png") |
|
|
|
no-repeat; |
|
|
|
background-size: cover; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
.screen-env-list{ |
|
|
|
.screen-env-list { |
|
|
|
flex-wrap: wrap; |
|
|
|
justify-content: space-between; |
|
|
|
height: calc(100% - 38px); |
|
|
|
padding: 0 44px 0 4px; |
|
|
|
li{ |
|
|
|
li { |
|
|
|
flex: none; |
|
|
|
width: calc(100%/2 - 44px); |
|
|
|
width: calc(100% / 2 - 44px); |
|
|
|
margin: 20px 0 20px 40px; |
|
|
|
height: calc(100%/2 - 40px); |
|
|
|
.msg-list-svg{ |
|
|
|
height: calc(100% / 2 - 40px); |
|
|
|
.msg-list-svg { |
|
|
|
font-size: 40px; |
|
|
|
margin-left: 20px; |
|
|
|
} |
|
|
|
&.msg-pm{ |
|
|
|
.msg-list-svg{ |
|
|
|
&.msg-pm { |
|
|
|
.msg-list-svg { |
|
|
|
font-size: 46px; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
.leakage-detection{ |
|
|
|
.leakage-detection { |
|
|
|
padding: 0 44px; |
|
|
|
font-size: 14px; |
|
|
|
color: #339CFF; |
|
|
|
color: #339cff; |
|
|
|
height: calc(100% - 38px); |
|
|
|
.leakage-list{ |
|
|
|
.leakage-list { |
|
|
|
height: calc(100% - 26px); |
|
|
|
text-align: left; |
|
|
|
li{ |
|
|
|
li { |
|
|
|
position: relative; |
|
|
|
display: flex; |
|
|
|
justify-content: space-between; |
|
|
|
align-items: center; |
|
|
|
height: calc(100%/4 - 14px); |
|
|
|
height: calc(100% / 4 - 14px); |
|
|
|
margin-bottom: 14px; |
|
|
|
padding: 0 30px; |
|
|
|
border: 1px solid #3581CC; |
|
|
|
background-color: #02255F; |
|
|
|
border: 1px solid #3581cc; |
|
|
|
background-color: #02255f; |
|
|
|
border-radius: 2px; |
|
|
|
&::before{ |
|
|
|
&::before { |
|
|
|
content: ""; |
|
|
|
position: absolute; |
|
|
|
top: 4px; |
|
|
|
left: 4px; |
|
|
|
width: 0; |
|
|
|
height: 0; |
|
|
|
border-color: transparent #339CFF; |
|
|
|
border-color: transparent #339cff; |
|
|
|
border-width: 0 0 6px 6px; |
|
|
|
border-style: solid; |
|
|
|
} |
|
|
|
p{ |
|
|
|
i{ |
|
|
|
p { |
|
|
|
i { |
|
|
|
margin-right: 8px; |
|
|
|
} |
|
|
|
} |
|
|
|
span.leakage-state-tip{ |
|
|
|
span.leakage-state-tip { |
|
|
|
position: relative; |
|
|
|
display: block; |
|
|
|
width: 6px; |
|
|
|
height: 6px; |
|
|
|
border-radius: 50%; |
|
|
|
background-color: #18B08F; |
|
|
|
&::before{ |
|
|
|
background-color: #18b08f; |
|
|
|
&::before { |
|
|
|
content: ""; |
|
|
|
position: absolute; |
|
|
|
left: 50%; |
|
|
|
@ -498,39 +577,39 @@ export default { |
|
|
|
width: 14px; |
|
|
|
height: 14px; |
|
|
|
border-radius: 50%; |
|
|
|
box-shadow: inset 0px 0px 10px 1px #18B08F; |
|
|
|
transform: translate(-50%,-50%); |
|
|
|
box-shadow: inset 0px 0px 10px 1px #18b08f; |
|
|
|
transform: translate(-50%, -50%); |
|
|
|
} |
|
|
|
} |
|
|
|
&.leakage-warn{ |
|
|
|
border-color: #F65164; |
|
|
|
box-shadow: inset 0px 0px 15px 1px #F65164; |
|
|
|
color: #F65164; |
|
|
|
&::before{ |
|
|
|
border-color: transparent #F65164; |
|
|
|
&.leakage-warn { |
|
|
|
border-color: #f65164; |
|
|
|
box-shadow: inset 0px 0px 15px 1px #f65164; |
|
|
|
color: #f65164; |
|
|
|
&::before { |
|
|
|
border-color: transparent #f65164; |
|
|
|
} |
|
|
|
span.leakage-state-tip{ |
|
|
|
background-color: #F65164; |
|
|
|
&::before{ |
|
|
|
box-shadow: inset 0px 0px 10px 1px #F65164; |
|
|
|
span.leakage-state-tip { |
|
|
|
background-color: #f65164; |
|
|
|
&::before { |
|
|
|
box-shadow: inset 0px 0px 10px 1px #f65164; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
.state-list{ |
|
|
|
.state-list { |
|
|
|
display: flex; |
|
|
|
justify-content: flex-end; |
|
|
|
margin-bottom: 10px; |
|
|
|
font-size: 14px; |
|
|
|
color: #339CFF; |
|
|
|
span{ |
|
|
|
color: #339cff; |
|
|
|
span { |
|
|
|
position: relative; |
|
|
|
display: block; |
|
|
|
padding-left: 16px; |
|
|
|
margin-left: 30px; |
|
|
|
&::before{ |
|
|
|
&::before { |
|
|
|
content: ""; |
|
|
|
position: absolute; |
|
|
|
left: 0; |
|
|
|
@ -539,42 +618,42 @@ export default { |
|
|
|
height: 10px; |
|
|
|
border-radius: 50%; |
|
|
|
margin-top: -5px; |
|
|
|
background-color: #18B08F; |
|
|
|
background-color: #18b08f; |
|
|
|
} |
|
|
|
&:last-child::before{ |
|
|
|
background-color:#F65164; |
|
|
|
&:last-child::before { |
|
|
|
background-color: #f65164; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
.device-container{ |
|
|
|
.device-container { |
|
|
|
position: relative; |
|
|
|
.state-list{ |
|
|
|
.state-list { |
|
|
|
position: absolute; |
|
|
|
right: 40px; |
|
|
|
top: 12px; |
|
|
|
} |
|
|
|
.env-device-list{ |
|
|
|
.env-device-list { |
|
|
|
display: flex; |
|
|
|
height: calc(100% - 38px); |
|
|
|
justify-content: space-between; |
|
|
|
padding: 0 0 20px 20px; |
|
|
|
li{ |
|
|
|
width: calc(100%/6 - 20px); |
|
|
|
li { |
|
|
|
width: calc(100% / 6 - 20px); |
|
|
|
margin-right: 20px; |
|
|
|
.env-device-img{ |
|
|
|
.env-device-img { |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
justify-content: center; |
|
|
|
height: calc(100% - 40px); |
|
|
|
border: 1px solid #3581CC; |
|
|
|
border: 1px solid #3581cc; |
|
|
|
margin-bottom: 10px; |
|
|
|
img{ |
|
|
|
img { |
|
|
|
display: block; |
|
|
|
// height: 100%; |
|
|
|
// object-fit: contain; |
|
|
|
} |
|
|
|
} |
|
|
|
.env-device-text{ |
|
|
|
.env-device-text { |
|
|
|
position: relative; |
|
|
|
display: flex; |
|
|
|
justify-content: center; |
|
|
|
@ -582,11 +661,11 @@ export default { |
|
|
|
height: 36px; |
|
|
|
line-height: 36px; |
|
|
|
font-size: 14px; |
|
|
|
color: #339CFF; |
|
|
|
border: 1px solid #3581CC; |
|
|
|
background-color: #02255F; |
|
|
|
color: #339cff; |
|
|
|
border: 1px solid #3581cc; |
|
|
|
background-color: #02255f; |
|
|
|
border-radius: 36px; |
|
|
|
span{ |
|
|
|
span { |
|
|
|
position: relative; |
|
|
|
// position: absolute; |
|
|
|
// right: 8px; |
|
|
|
@ -597,8 +676,8 @@ export default { |
|
|
|
height: 6px; |
|
|
|
margin-left: 14px; |
|
|
|
border-radius: 50%; |
|
|
|
background-color: #18B08F; |
|
|
|
&::before{ |
|
|
|
background-color: #18b08f; |
|
|
|
&::before { |
|
|
|
content: ""; |
|
|
|
position: absolute; |
|
|
|
left: 50%; |
|
|
|
@ -606,17 +685,17 @@ export default { |
|
|
|
width: 14px; |
|
|
|
height: 14px; |
|
|
|
border-radius: 50%; |
|
|
|
box-shadow: inset 0px 0px 10px 1px #18B08F; |
|
|
|
transform: translate(-50%,-50%); |
|
|
|
box-shadow: inset 0px 0px 10px 1px #18b08f; |
|
|
|
transform: translate(-50%, -50%); |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
&.device-warn{ |
|
|
|
.env-device-text{ |
|
|
|
span{ |
|
|
|
background-color: #F65164; |
|
|
|
&::before{ |
|
|
|
box-shadow: inset 0px 0px 10px 1px #F65164; |
|
|
|
&.device-warn { |
|
|
|
.env-device-text { |
|
|
|
span { |
|
|
|
background-color: #f65164; |
|
|
|
&::before { |
|
|
|
box-shadow: inset 0px 0px 10px 1px #f65164; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
@ -624,20 +703,20 @@ export default { |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
.env-3d{ |
|
|
|
.env-3d { |
|
|
|
position: relative; |
|
|
|
width: 100%; |
|
|
|
height: calc(100% - (100%/3) - 8px); |
|
|
|
height: calc(100% - (100% / 3) - 8px); |
|
|
|
margin-bottom: 20px; |
|
|
|
background: url('~@/assets/images/largeScreen/bg.png') no-repeat center -130px; |
|
|
|
background: url("~@/assets/images/largeScreen/bg.png") no-repeat center -130px; |
|
|
|
// background-size: 100% 100%; |
|
|
|
overflow: hidden; |
|
|
|
.iframe_box{ |
|
|
|
.iframe_box { |
|
|
|
width: 100%; |
|
|
|
height: 100%; |
|
|
|
margin-left: -80px; |
|
|
|
} |
|
|
|
.screen-env-list{ |
|
|
|
.screen-env-list { |
|
|
|
position: absolute; |
|
|
|
right: 0; |
|
|
|
bottom: 0; |
|
|
|
@ -646,10 +725,10 @@ export default { |
|
|
|
padding: 0; |
|
|
|
width: 165px; |
|
|
|
height: 200px; |
|
|
|
li{ |
|
|
|
li { |
|
|
|
width: 100%; |
|
|
|
margin: 20px 0 0 0; |
|
|
|
height: calc(100%/2 - 20px); |
|
|
|
height: calc(100% / 2 - 20px); |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
