You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
927 lines
31 KiB
927 lines
31 KiB
<template>
|
|
<div class="env-container">
|
|
<div class="env-top-title" />
|
|
<div class="current-date">{{ nowDate }}</div>
|
|
<div class="env-main">
|
|
<div class="env-main-left">
|
|
<div class="env-item container-wrap">
|
|
<span class="right-top-line" />
|
|
<span class="left-bottom-line" />
|
|
<h3><i class="iconfont icon-kongqizhiliangshuju" />档案库空气质量数据</h3>
|
|
<ul class="screen-env-list">
|
|
<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">{{ topDisplayData.DAK_DIV_TOP_003.curValue }}</span>
|
|
<p class="msg-list-unit">CO2 {{ topDisplayData.DAK_DIV_TOP_003.unit }}</p>
|
|
</div>
|
|
</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">{{ topDisplayData.DAK_DIV_TOP_004.curValue }}</span>
|
|
<p class="msg-list-unit">VOC {{ topDisplayData.DAK_DIV_TOP_004.unit }}</p>
|
|
</div>
|
|
</li>
|
|
<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">{{ topDisplayData.DAK_DIV_TOP_005.curValue }}</span>
|
|
<p class="msg-list-unit">PM2.5 {{ topDisplayData.DAK_DIV_TOP_005.unit }}</p>
|
|
</div>
|
|
</li>
|
|
<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">{{ topDisplayData.DAK_DIV_TOP_006.curValue }}</span>
|
|
<p class="msg-list-unit">PM10 {{ topDisplayData.DAK_DIV_TOP_006.unit }}</p>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="env-item container-wrap">
|
|
<span class="right-top-line" />
|
|
<span class="left-bottom-line" />
|
|
<h3><i class="iconfont icon-loushuijiance" />漏水检测</h3>
|
|
<div class="leakage-detection">
|
|
<div class="state-list">
|
|
<span>正常</span>
|
|
<span>报警</span>
|
|
</div>
|
|
<ul class="leakage-list">
|
|
<li :class="{ 'leakage-warn': waterLeakage.waterLeakageStatus1 }">
|
|
<p><i class="iconfont icon-weihubaojing" />维护报警</p>
|
|
<span class="leakage-state-tip" />
|
|
</li>
|
|
<li :class="{ 'leakage-warn': waterLeakage.waterLeakageStatus2 }">
|
|
<p><i class="iconfont icon-loushuibaojing" />漏水报警</p>
|
|
<span class="leakage-state-tip" />
|
|
</li>
|
|
<li :class="{ 'leakage-warn': waterLeakage.waterLeakageStatus3 }">
|
|
<p><i class="iconfont icon-ganyingxianduanlie" />感应线断裂</p>
|
|
<span class="leakage-state-tip" />
|
|
</li>
|
|
<li :class="{ 'leakage-warn': waterLeakage.waterLeakageStatus4 }">
|
|
<p><i class="iconfont icon-loushuiweizhi" />漏水位置</p>
|
|
<span>{{ waterLeakage.waterLeakageText4 }}</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<!-- <div class="env-item container-wrap">
|
|
<span class="right-top-line" />
|
|
<span class="left-bottom-line" />
|
|
<h3><i class="iconfont icon-menjinjilu" />门禁记录</h3>
|
|
<el-table
|
|
ref="table"
|
|
style="min-width: 100%;"
|
|
height="calc(100% - 38px)"
|
|
:data="tableData"
|
|
class="warehose-el-table"
|
|
:row-class-name="rowBgColor"
|
|
>
|
|
<el-table-column prop="time" label="时间" align="center" min-width="60" />
|
|
<el-table-column prop="warehouse" label="库房" align="center" min-width="60" />
|
|
<el-table-column prop="name" label="档案名称" align="center" :show-overflow-tooltip="true" min-width="85" />
|
|
</el-table>
|
|
</div> -->
|
|
<!-- 门禁记录 -->
|
|
<security-door :height="'calc(100% - 38px)'" />
|
|
</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" />
|
|
<ul class="screen-env-list">
|
|
<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">{{ topDisplayData.DAK_DIV_TOP_001.curValue }}</span>
|
|
<p class="msg-list-unit">温度 {{ topDisplayData.DAK_DIV_TOP_001.unit }}</p>
|
|
</div>
|
|
</li>
|
|
<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">{{ topDisplayData.DAK_DIV_TOP_002.curValue }}</span>
|
|
<p class="msg-list-unit">湿度 {{ topDisplayData.DAK_DIV_TOP_002.unit }}</p>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<!-- <div class="env-item container-wrap device-container">
|
|
<span class="right-top-line" />
|
|
<span class="left-bottom-line" />
|
|
<h3><i class="iconfont icon-shebeizhuangtai" />设备状态</h3>
|
|
<div class="state-list">
|
|
<span>正常</span>
|
|
<span>报警</span>
|
|
</div>
|
|
<ul class="env-device-list">
|
|
<li class="device-warn">
|
|
<div class="env-device-img">
|
|
<img src="~@/assets/images/largeScreen/device-1.png" alt="">
|
|
</div>
|
|
<div class="env-device-text">
|
|
<p>密集架</p>
|
|
<span />
|
|
</div>
|
|
</li>
|
|
<li>
|
|
<div class="env-device-img">
|
|
<img src="~@/assets/images/largeScreen/device-2.png" alt="">
|
|
</div>
|
|
<div class="env-device-text">
|
|
<p>回转柜</p>
|
|
<span />
|
|
</div>
|
|
</li>
|
|
<li>
|
|
<div class="env-device-img">
|
|
<img src="~@/assets/images/largeScreen/device-3.png" alt="">
|
|
</div>
|
|
<div class="env-device-text">
|
|
<p>空调</p>
|
|
<span />
|
|
</div>
|
|
</li>
|
|
<li>
|
|
<div class="env-device-img">
|
|
<img src="~@/assets/images/largeScreen/device-4.png" alt="">
|
|
</div>
|
|
<div class="env-device-text">
|
|
<p>通道门</p>
|
|
<span />
|
|
</div>
|
|
</li>
|
|
<li>
|
|
<div class="env-device-img">
|
|
<img src="~@/assets/images/largeScreen/device-5.png" alt="">
|
|
</div>
|
|
<div class="env-device-text">
|
|
<p>漏水传感器</p>
|
|
<span />
|
|
</div>
|
|
</li>
|
|
<li>
|
|
<div class="env-device-img">
|
|
<img src="~@/assets/images/largeScreen/device-6.png" alt="">
|
|
</div>
|
|
<div class="env-device-text">
|
|
<p>温湿度传感器</p>
|
|
<span />
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div> -->
|
|
<div class="middle-bottom">
|
|
<!-- <span class="right-top-line" />
|
|
<span class="left-bottom-line" /> -->
|
|
<div class="container-wrap middle-bottom-l">
|
|
<span class="right-top-line" />
|
|
<span class="left-bottom-line" />
|
|
<ul>
|
|
<li>
|
|
<div class="row-item">
|
|
<div class="svg-box">
|
|
<svg-icon icon-class="danganzongliang" class-name="card-panel-icon" />
|
|
</div>
|
|
<span>馆藏总量</span>
|
|
</div>
|
|
<span class="row-num">12345</span>
|
|
</li>
|
|
<li>
|
|
<div class="row-item">
|
|
<div class="svg-box">
|
|
<svg-icon icon-class="danganzongliang" class-name="card-panel-icon" />
|
|
</div>
|
|
<span>在借数量</span>
|
|
</div>
|
|
<span class="row-num">12345</span>
|
|
</li>
|
|
<li>
|
|
<div class="row-item">
|
|
<div class="svg-box">
|
|
<svg-icon icon-class="danganhezongliang" class-name="card-panel-icon" />
|
|
</div>
|
|
<span>在库数量</span>
|
|
</div>
|
|
<span class="row-num">12345</span>
|
|
</li>
|
|
</ul>
|
|
<ul>
|
|
<li>
|
|
<div class="row-item">
|
|
<div class="svg-box">
|
|
<svg-icon icon-class="quanbushebei" class-name="card-panel-icon" />
|
|
</div>
|
|
<span>全部设备</span>
|
|
</div>
|
|
<span class="row-num">12345</span>
|
|
</li>
|
|
<li>
|
|
<div class="row-item">
|
|
<div class="svg-box">
|
|
<svg-icon icon-class="zaixianshebei" class-name="card-panel-icon" />
|
|
</div>
|
|
<span>在线设备</span>
|
|
</div>
|
|
<span class="row-num">12345</span>
|
|
</li>
|
|
<li>
|
|
<div class="row-item">
|
|
<div class="svg-box">
|
|
<svg-icon icon-class="lixianshebei" class-name="card-panel-icon" />
|
|
</div>
|
|
<span>离线设备</span>
|
|
</div>
|
|
<span class="row-num">12345</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="container-wrap middle-bottom-r">
|
|
<span class="right-top-line" />
|
|
<span class="left-bottom-line" />
|
|
<ul>
|
|
<li>
|
|
<span>日借阅量</span>
|
|
<div class="chartNum">
|
|
<div id="TNum" class="box-items">
|
|
<li class="number-item"><span><i ref="numberItem" class="item">0123456789</i></span></li>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
<li><span>日归还量</span></li>
|
|
<li><span>月借阅量</span></li>
|
|
<li><span>月归还量</span></li>
|
|
</ul>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="env-main-right">
|
|
<div class="env-item container-wrap">
|
|
<span class="right-top-line" />
|
|
<span class="left-bottom-line" />
|
|
<h3><i class="iconfont icon-zhenglishi" />档案借阅</h3>
|
|
<div class="chart-wrapper" style="height: calc(100% - 40px);">
|
|
<lend-across :lend-data="lendData" :refreshtime="60000" />
|
|
</div>
|
|
</div>
|
|
<div class="env-item container-wrap">
|
|
<span class="right-top-line" />
|
|
<span class="left-bottom-line" />
|
|
<h3><i class="iconfont icon-zhenglishi" />档案类型</h3>
|
|
<div v-if="typeData.length !== 0" class="chart-wrapper" style="height: calc(100% - 40px);">
|
|
<type-pie :type-data="typeData" :refreshtime="60000" />
|
|
</div>
|
|
<div v-else class="empty-main">
|
|
<svg-icon icon-class="empty" class-name="empty-img" />
|
|
<p>暂无数据</p>
|
|
</div>
|
|
</div>
|
|
<!-- 报警记录 -->
|
|
<warehouse-warning :height="'calc(100% - 38px)'" />
|
|
</div>
|
|
</div>
|
|
<!-- 摄像头视频 -->
|
|
<Video ref="camera" />
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
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 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'
|
|
export default {
|
|
name: 'EnvironmentalScreen',
|
|
components: {
|
|
WarehouseWarning,
|
|
SecurityDoor,
|
|
Video,
|
|
lendAcross,
|
|
typePie
|
|
},
|
|
mixins: [statisticsCrud],
|
|
data() {
|
|
return {
|
|
nowDate: '',
|
|
timer: null,
|
|
lendData: [],
|
|
typeData: [],
|
|
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
|
|
}
|
|
},
|
|
waterLeakage: {
|
|
waterLeakageStatus1: false,
|
|
waterLeakageStatus2: false,
|
|
waterLeakageStatus3: false,
|
|
waterLeakageStatus4: false,
|
|
waterLeakageText4: ''
|
|
}
|
|
}
|
|
},
|
|
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() {
|
|
const _this = this
|
|
this.iframeWin = this.$refs.myIframe.contentWindow
|
|
// inframe 加载完成之后
|
|
document.getElementById('myIframe').onload = function() {
|
|
_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.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: this.oaoMessage
|
|
}, '*')
|
|
},
|
|
// 点击查看设备状况 / 密集架列号
|
|
handleMessageDevice(event) {
|
|
const _this = this
|
|
if (event.data && event.data.data) {
|
|
const data = event.data.data
|
|
// 摄像头
|
|
if (data.includes('CAM')) {
|
|
_this.$nextTick(() => {
|
|
this.$refs.camera.openVideoVisible = true
|
|
// 后期看接口调试变化
|
|
this.$refs.camera.videoSrc = 'https://qiniu.aiyxlib.com/1606275873000.mp4'
|
|
this.$refs.camera.videoTitle = data
|
|
})
|
|
}
|
|
}
|
|
},
|
|
// 设置温湿度
|
|
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) {
|
|
return 'light-blue'
|
|
} 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
|
|
})
|
|
if (result) {
|
|
this.$set(this.topDisplayData, element.divPosition, {
|
|
show: true,
|
|
curValue: result.curvalue,
|
|
unit: result.unit,
|
|
curstatus: result.curstatus
|
|
})
|
|
} else {
|
|
this.$set(this.topDisplayData, element.divPosition, {
|
|
show: false
|
|
})
|
|
}
|
|
} 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 漏水感应器
|
|
const waterLeakageParamId1 = element.deviceSpecParams.find((item) => { return item.paramName === '维护报警' })?.paramId
|
|
const waterLeakageParamId2 = element.deviceSpecParams.find((item) => { return item.paramName === '漏水报警' })?.paramId
|
|
const waterLeakageParamId3 = element.deviceSpecParams.find((item) => { return item.paramName === '感应线断裂' })?.paramId
|
|
const waterLeakage4 = element.deviceSpecParams.find((item) => { return item.paramName === '漏水位置' })
|
|
if (waterLeakage4) {
|
|
this.waterLeakage.waterLeakageText4 = waterLeakage4.unit
|
|
}
|
|
const waterLeakageParamId4 = waterLeakage4?.paramId
|
|
if (waterLeakageParamId1) {
|
|
this.waterLeakage.waterLeakageStatus1 = data.find((item) => {
|
|
return item.property_id === waterLeakageParamId1 && item.device_id === element.deviceInfo.deviceId
|
|
})?.curstatus > 0
|
|
}
|
|
if (waterLeakageParamId2) {
|
|
this.$set(this.waterLeakage, 'waterLeakageStatus2', data.find((item) => {
|
|
return item.property_id === waterLeakageParamId2 && item.device_id === element.deviceInfo.deviceId
|
|
})?.curstatus > 0)
|
|
}
|
|
if (waterLeakageParamId3) {
|
|
this.$set(this.waterLeakage, 'waterLeakageStatus3', data.find((item) => {
|
|
return item.property_id === waterLeakageParamId3 && item.device_id === element.deviceInfo.deviceId
|
|
})?.curstatus > 0)
|
|
}
|
|
if (waterLeakageParamId4) {
|
|
const waterLeakageValue4 = data.find((item) => {
|
|
return item.property_id === waterLeakageParamId4 && item.device_id === element.deviceInfo.deviceId
|
|
})
|
|
this.$set(this.waterLeakage, 'waterLeakageStatus4', waterLeakageValue4?.curstatus > 0)
|
|
this.waterLeakage.waterLeakageText4 = waterLeakageValue4?.curvalue ? waterLeakageValue4?.curvalue + ' ' + this.waterLeakage.waterLeakageText4 : ''
|
|
}
|
|
}
|
|
})
|
|
})
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style rel="stylesheet/scss" lang="scss" scoped>
|
|
@import "~@/assets/styles/lend-manage.scss";
|
|
@import "~@/assets/styles/font-some.css";
|
|
|
|
.env-container {
|
|
width: 100%;
|
|
height: calc(100vh);
|
|
background-color: #031435;
|
|
.env-top-title {
|
|
width: calc(100vw);
|
|
height: 130px;
|
|
background: url("~@/assets/images/largeScreen/top-title.png") no-repeat 0 -14px;
|
|
background-size: contain;
|
|
}
|
|
.current-date {
|
|
position: fixed;
|
|
top: 25px;
|
|
right: 150px;
|
|
font-size: 16px;
|
|
color: #3a99fd;
|
|
}
|
|
.env-main {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding: 0 25px;
|
|
margin-top: -12px;
|
|
.env-main-left,
|
|
.env-main-right {
|
|
max-width: 24%;
|
|
flex: 1;
|
|
height: calc(100vh - 138px);
|
|
overflow: hidden;
|
|
}
|
|
.env-main-middle {
|
|
flex: 1;
|
|
margin: 0 20px;
|
|
height: calc(100vh - 138px);
|
|
}
|
|
.container-wrap {
|
|
height: calc(100% / 3 - 14px);
|
|
min-height: auto;
|
|
}
|
|
.env-item {
|
|
margin-bottom: 20px;
|
|
text-align: center;
|
|
h3 {
|
|
position: relative;
|
|
display: inline-block;
|
|
padding: 10px 70px;
|
|
font-size: 16px;
|
|
color: #fff;
|
|
.iconfont {
|
|
margin-right: 10px;
|
|
font-size: 14px;
|
|
color: #f65163;
|
|
}
|
|
&::before {
|
|
content: "";
|
|
position: absolute;
|
|
left: 0;
|
|
top: 50%;
|
|
width: 36px;
|
|
height: 12px;
|
|
margin-top: -6px;
|
|
background: url("~@/assets/images/largeScreen/item-left.png")
|
|
no-repeat;
|
|
background-size: cover;
|
|
}
|
|
&::after {
|
|
content: "";
|
|
position: absolute;
|
|
top: 50%;
|
|
right: 0;
|
|
width: 36px;
|
|
height: 12px;
|
|
margin-top: -6px;
|
|
background: url("~@/assets/images/largeScreen/item-right.png")
|
|
no-repeat;
|
|
background-size: cover;
|
|
}
|
|
}
|
|
}
|
|
.screen-env-list {
|
|
flex-wrap: wrap;
|
|
justify-content: space-between;
|
|
height: calc(100% - 38px);
|
|
padding: 0 44px 0 4px;
|
|
li {
|
|
flex: none;
|
|
width: calc(100% / 2 - 44px);
|
|
margin: 20px 0 20px 40px;
|
|
height: calc(100% / 2 - 40px);
|
|
.msg-list-svg {
|
|
font-size: 40px;
|
|
margin-left: 20px;
|
|
}
|
|
&.msg-pm {
|
|
.msg-list-svg {
|
|
font-size: 46px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.leakage-detection {
|
|
padding: 0 44px;
|
|
font-size: 14px;
|
|
color: #339cff;
|
|
height: calc(100% - 38px);
|
|
.leakage-list {
|
|
height: calc(100% - 26px);
|
|
text-align: left;
|
|
li {
|
|
position: relative;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
height: calc(100% / 4 - 14px);
|
|
margin-bottom: 14px;
|
|
padding: 0 30px;
|
|
border: 1px solid #3581cc;
|
|
background-color: #02255f;
|
|
border-radius: 2px;
|
|
&::before {
|
|
content: "";
|
|
position: absolute;
|
|
top: 4px;
|
|
left: 4px;
|
|
width: 0;
|
|
height: 0;
|
|
border-color: transparent #339cff;
|
|
border-width: 0 0 6px 6px;
|
|
border-style: solid;
|
|
}
|
|
p {
|
|
i {
|
|
margin-right: 8px;
|
|
}
|
|
}
|
|
span.leakage-state-tip {
|
|
position: relative;
|
|
display: block;
|
|
width: 6px;
|
|
height: 6px;
|
|
border-radius: 50%;
|
|
background-color: #18b08f;
|
|
&::before {
|
|
content: "";
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 50%;
|
|
width: 14px;
|
|
height: 14px;
|
|
border-radius: 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;
|
|
}
|
|
span.leakage-state-tip {
|
|
background-color: #f65164;
|
|
&::before {
|
|
box-shadow: inset 0px 0px 10px 1px #f65164;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.state-list {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
margin-bottom: 10px;
|
|
font-size: 14px;
|
|
color: #339cff;
|
|
span {
|
|
position: relative;
|
|
display: block;
|
|
padding-left: 16px;
|
|
margin-left: 30px;
|
|
&::before {
|
|
content: "";
|
|
position: absolute;
|
|
left: 0;
|
|
top: 50%;
|
|
width: 10px;
|
|
height: 10px;
|
|
border-radius: 50%;
|
|
margin-top: -5px;
|
|
background-color: #18b08f;
|
|
}
|
|
&:last-child::before {
|
|
background-color: #f65164;
|
|
}
|
|
}
|
|
}
|
|
.device-container {
|
|
position: relative;
|
|
.state-list {
|
|
position: absolute;
|
|
right: 40px;
|
|
top: 12px;
|
|
}
|
|
.env-device-list {
|
|
display: flex;
|
|
height: calc(100% - 38px);
|
|
justify-content: space-between;
|
|
padding: 0 0 20px 20px;
|
|
li {
|
|
width: calc(100% / 6 - 20px);
|
|
margin-right: 20px;
|
|
.env-device-img {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: calc(100% - 40px);
|
|
border: 1px solid #3581cc;
|
|
margin-bottom: 10px;
|
|
img {
|
|
display: block;
|
|
// height: 100%;
|
|
// object-fit: contain;
|
|
}
|
|
}
|
|
.env-device-text {
|
|
position: relative;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
height: 36px;
|
|
line-height: 36px;
|
|
font-size: 14px;
|
|
color: #339cff;
|
|
border: 1px solid #3581cc;
|
|
background-color: #02255f;
|
|
border-radius: 36px;
|
|
span {
|
|
position: relative;
|
|
// position: absolute;
|
|
// right: 8px;
|
|
// top: 50%;
|
|
// margin-top: -3px;
|
|
display: block;
|
|
width: 6px;
|
|
height: 6px;
|
|
margin-left: 14px;
|
|
border-radius: 50%;
|
|
background-color: #18b08f;
|
|
&::before {
|
|
content: "";
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 50%;
|
|
width: 14px;
|
|
height: 14px;
|
|
border-radius: 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;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.env-3d {
|
|
position: relative;
|
|
width: 100%;
|
|
height: calc(100% - (100% / 4) - 8px);
|
|
margin-bottom: 20px;
|
|
background: url("~@/assets/images/largeScreen/bg.png") no-repeat center -130px;
|
|
// background-size: 100% 100%;
|
|
overflow: hidden;
|
|
.iframe_box {
|
|
width: 100%;
|
|
height: 100%;
|
|
margin-left: -80px;
|
|
}
|
|
.screen-env-list {
|
|
position: absolute;
|
|
right: 0;
|
|
bottom: 0;
|
|
flex-wrap: wrap;
|
|
justify-content: space-between;
|
|
padding: 0;
|
|
width: 165px;
|
|
height: 200px;
|
|
li {
|
|
width: 100%;
|
|
margin: 20px 0 0 0;
|
|
height: calc(100% / 2 - 20px);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.middle-bottom{
|
|
display: flex;
|
|
color: #339CFF ;
|
|
font-size: 14px;
|
|
justify-content: space-between;
|
|
height: calc(100% - 198px);
|
|
.middle-bottom-l{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
width: 60%;
|
|
ul{
|
|
width: 59%;
|
|
padding: 25px 20px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
li{
|
|
height: calc(100% / 3 - 14px);
|
|
background: linear-gradient(360deg, rgba(51,156,255,0.24) 0%, rgba(56,158,225,0) 70%, rgba(56,158,225,0) 100%);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
.row-item{
|
|
display: flex;
|
|
align-items: center;
|
|
.svg-box{
|
|
margin-right: 10px;
|
|
.card-panel-icon{
|
|
font-size: 24px;
|
|
}
|
|
}
|
|
}
|
|
.row-num{
|
|
font-size: 18px;
|
|
color: #fff;
|
|
}
|
|
|
|
// padding: 10px 0;
|
|
}
|
|
}
|
|
}
|
|
.middle-bottom-r{
|
|
width: 38%;
|
|
ul{
|
|
width: 100%;
|
|
height: 100%;
|
|
padding: 20px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
li{
|
|
height: 20%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
// padding: 10px 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
</style>
|