|
|
|
@ -7,11 +7,65 @@ |
|
|
|
<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" /> |
|
|
|
@ -42,11 +96,87 @@ |
|
|
|
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> |
|
|
|
<div class="env-item container-wrap"> |
|
|
|
</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"> |
|
|
|
@ -54,12 +184,13 @@ |
|
|
|
<span class="right-top-line" /> |
|
|
|
<span class="left-bottom-line" /> |
|
|
|
<h3><i class="iconfont icon-zhenglishi" />阅览室</h3> |
|
|
|
<LineChart /> |
|
|
|
<LineChart :class-name="className[0]" :chart-data="lineChartData.readRoomData" /> |
|
|
|
</div> |
|
|
|
<div class="env-item container-wrap"> |
|
|
|
<span class="right-top-line" /> |
|
|
|
<span class="left-bottom-line" /> |
|
|
|
<h3><i class="iconfont icon-zhenglishi" />整理室</h3> |
|
|
|
<LineChart :class-name="className[1]" :chart-data="lineChartData.collateRoomData" /> |
|
|
|
</div> |
|
|
|
<div class="env-item container-wrap"> |
|
|
|
<span class="right-top-line" /> |
|
|
|
@ -80,22 +211,104 @@ |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<!-- 摄像头视频 --> |
|
|
|
<Video ref="camera" /> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
|
|
|
|
<script> |
|
|
|
import LineChart from './module/lineChart' |
|
|
|
import Video from '@/views/storeManage/warehouse3D/module/video' |
|
|
|
import data1 from './data1.json' |
|
|
|
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: 'Dashboard', |
|
|
|
components: { |
|
|
|
LineChart |
|
|
|
LineChart, |
|
|
|
Video |
|
|
|
}, |
|
|
|
data() { |
|
|
|
return { |
|
|
|
tableData: [] |
|
|
|
tableData: [], |
|
|
|
lineChartData: lineChartData, |
|
|
|
className: ['readRoomContainer', 'collateRoomContainer'] |
|
|
|
} |
|
|
|
}, |
|
|
|
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) |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
// 传入设备状态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) { |
|
|
|
@ -124,15 +337,17 @@ export default { |
|
|
|
display: flex; |
|
|
|
justify-content: space-between; |
|
|
|
padding: 0 25px; |
|
|
|
margin-top: -12px; |
|
|
|
.env-main-left, |
|
|
|
.env-main-right{ |
|
|
|
width: 458px; |
|
|
|
height: calc(100vh - 150px); |
|
|
|
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); |
|
|
|
@ -141,6 +356,7 @@ export default { |
|
|
|
.env-item { |
|
|
|
margin-bottom: 20px; |
|
|
|
text-align: center; |
|
|
|
overflow: hidden; |
|
|
|
h3{ |
|
|
|
position: relative; |
|
|
|
display: inline-block; |
|
|
|
@ -176,13 +392,222 @@ export default { |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
.screen-env-list{ |
|
|
|
flex-wrap: wrap; |
|
|
|
justify-content: space-between; |
|
|
|
padding: 0 44px 0 4px; |
|
|
|
li{ |
|
|
|
flex: none; |
|
|
|
width: calc(100%/2 - 44px); |
|
|
|
margin: 15px 0 0 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; |
|
|
|
margin-top: -3px; |
|
|
|
.leakage-list{ |
|
|
|
text-align: left; |
|
|
|
li{ |
|
|
|
position: relative; |
|
|
|
display: flex; |
|
|
|
justify-content: space-between; |
|
|
|
align-items: center; |
|
|
|
margin-bottom: 8px; |
|
|
|
padding: 9px 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: end; |
|
|
|
margin-bottom: 6px; |
|
|
|
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{ |
|
|
|
object-fit: cover; |
|
|
|
} |
|
|
|
} |
|
|
|
.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{ |
|
|
|
height: calc(100vh - (100%/2) - 28px); |
|
|
|
position: relative; |
|
|
|
width: 100%; |
|
|
|
height: calc(100vh - (100%/2) - 14px); |
|
|
|
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; |
|
|
|
li{ |
|
|
|
width: 100%; |
|
|
|
margin: 20px 0 0 0; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
