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.
656 lines
19 KiB
656 lines
19 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>
|
|
<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>
|
|
</div>
|
|
</li>
|
|
<li>
|
|
<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>
|
|
</div>
|
|
</li>
|
|
<li class="msg-pm li-warn">
|
|
<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>
|
|
</div>
|
|
</li>
|
|
<li 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>
|
|
</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">
|
|
<p><i class="iconfont icon-weihubaojing" />维护报警</p>
|
|
<span class="leakage-state-tip" />
|
|
</li>
|
|
<li>
|
|
<p><i class="iconfont icon-loushuibaojing" />漏水报警</p>
|
|
<span class="leakage-state-tip" />
|
|
</li>
|
|
<li>
|
|
<p><i class="iconfont icon-ganyingxianduanlie" />感应线断裂</p>
|
|
<span class="leakage-state-tip" />
|
|
</li>
|
|
<li>
|
|
<p><i class="iconfont icon-loushuiweizhi" />漏水位置</p>
|
|
<span>8.22</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>
|
|
<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>
|
|
</div>
|
|
</li>
|
|
<li class="li-warn">
|
|
<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>
|
|
</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>
|
|
<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">
|
|
<lend-across :lend-data="lendData" />
|
|
</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">
|
|
<type-pie :type-data="typeData" />
|
|
</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 data1 from './data1.json'
|
|
import WarehouseWarning from '@/views/components/WarehouseWarning'
|
|
import SecurityDoor from '@/views/components/SecurityDoor'
|
|
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: {
|
|
WarehouseWarning,
|
|
SecurityDoor,
|
|
Video,
|
|
lendAcross,
|
|
typePie
|
|
},
|
|
data() {
|
|
return {
|
|
nowDate: '',
|
|
timer: null,
|
|
tableData: [],
|
|
lineChartData: lineChartData,
|
|
lendData: [],
|
|
typeData: [],
|
|
className: ['readRoomContainer', 'collateRoomContainer']
|
|
}
|
|
},
|
|
created() {
|
|
this.timer = setInterval(() => {
|
|
this.nowDate = getCurrentTime()
|
|
}, 1000)
|
|
window.getIframeLoading = this.getIframeLoading // 把vue实例中的方法引用给window对象
|
|
},
|
|
mounted() {
|
|
this.tableData = data1.rows
|
|
const _this = this
|
|
this.iframeWin = this.$refs.myIframe.contentWindow
|
|
// inframe 加载完成之后
|
|
document.getElementById('myIframe').onload = function() {
|
|
_this.deviceState()
|
|
}
|
|
window.addEventListener('message', this.handleMessageDevice)
|
|
},
|
|
beforeDestroy() {
|
|
if (this.timer) {
|
|
clearInterval(this.timer)
|
|
}
|
|
},
|
|
methods: {
|
|
// 加载完成状态传值
|
|
getIframeLoading(value) {
|
|
// console.log(`我是iframe传过来的参数：${value}`)
|
|
if (value === 'false') {
|
|
this.handleHide('DAK_MO_OAO_001')
|
|
this.handleAlarm('DAK_MO_OAO_003')
|
|
}
|
|
},
|
|
// 传入设备状态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
|
|
}
|
|
]
|
|
}, '*')
|
|
},
|
|
// 点击查看设备状况 / 密集架列号
|
|
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(deviceId, wendu, sidu) {
|
|
window.frames['iframeMap'].setAlertValue(deviceId, wendu, sidu)
|
|
},
|
|
// 设置温湿度报警状况
|
|
handleAlarm(deviceId) {
|
|
window.frames['iframeMap'].Myalert(deviceId, true)
|
|
},
|
|
// 表格隔行变色
|
|
rowBgColor({ row, rowIndex }) {
|
|
if (rowIndex % 2 === 1) {
|
|
return 'light-blue'
|
|
} else {
|
|
return ''
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style rel="stylesheet/scss" lang="scss" scoped>
|
|
@import '~@/assets/styles/lend-manage.scss';
|
|
.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%/3) - 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);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|