liu_li
/
yxk-storeroom-system
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

环境监控可视化大屏

master
xuhuajiao 3 years ago
parent
5018cd6b6d
commit
b4e32e554b
7 changed files with 691 additions and 130 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 0
      src/assets/icons/svg/pm25.svg
  2. BIN
      src/assets/images/largeScreen/bg.png
  3. 62
      src/assets/styles/yxk-admin.scss
  4. 119
      src/views/environmentalScreen/data1.json
  5. 437
      src/views/environmentalScreen/index.vue
  6. 40
      src/views/environmentalScreen/module/lineChart.vue
  7. 59
      src/views/storeManage/warehouse3D/archivesStorage/index.vue

0
src/assets/icons/svg/pm2.5.svg → src/assets/icons/svg/pm25.svg
View File

BIN
src/assets/images/largeScreen/bg.png
View File

Side by Side

After

Width: 1920  |  Height: 1080  |  Size: 332 KiB

62
src/assets/styles/yxk-admin.scss
View File

@ -1126,3 +1126,65 @@ input[type='number'] {
transform: rotate(0); transform: rotate(0);
} }
} }
// 库房空气质量监控
.msg-list{
position: absolute;
top: 0;
left: 0;
width: calc(100vw - 800px);
}
.msg-list,
.screen-env-list{
display: flex;
li{
flex: 1;
display: flex;
flex-wrap: nowrap;
align-items: center;
align-content: center;
justify-content: center;
// width: calc(100%/6);
height: 80px;
margin-right: 20px;
background: url('~@/assets/images/data_border_default.png') no-repeat;
background-size: 100% 100%;
position: relative;
&.li-warn{
background: url('~@/assets/images/data_border_warn.png') no-repeat;
background-size: 100% 100%;
}
.msg-list-svg{
font-size: 36px;
display: inline-block;
height: 80px;
line-height: 80px;
margin-left: 30px;
}
.msg-pm{
font-size: 46px;
}
.msg-txt{
position: relative;
flex: 1;
height: 80px;
text-align: center;
}
.msg-list-unit{
position: absolute;
left: 0;
bottom: 12px;
width: 100%;
font-size: 14px;
color: #339CFF;
}
.msg-list-num{
color: #fff;
font-size: 26px;
position: absolute;
left: 0;
top: 14px;
width: 100%;
}
}
}

119
src/views/environmentalScreen/data1.json
View File

@ -0,0 +1,119 @@
{
"rows":[
{
"time":"2022-6-30 13:00",
"warehouse":"文书档案库房",
"warning":"温度温度温度温度温度温度",
"name":"温度温度温度温度温度温度"
},
{
"time":"2022-6-30 13:00",
"warehouse":"文书档案库房",
"warning":"温度温度温度温度温度温度",
"name":"温度温度温度温度温度温度"
},
{
"time":"2022-6-30 13:00",
"warehouse":"文书档案库房",
"warning":"温度温度温度温度温度温度",
"name":"温度温度温度温度温度温度"
},
{
"time":"2022-6-30 13:00",
"warehouse":"文书档案库房",
"warning":"温度温度温度温度温度温度",
"name":"温度温度温度温度温度温度"
},
{
"time":"2022-6-30 13:00",
"warehouse":"文书档案库房",
"warning":"温度温度温度温度温度温度",
"name":"温度温度温度温度温度温度"
},
{
"time":"2022-6-30 13:00",
"warehouse":"文书档案库房",
"warning":"温度温度温度温度温度温度",
"name":"温度温度温度温度温度温度"
},
{
"time":"2022-6-30 13:00",
"warehouse":"文书档案库房",
"warning":"温度温度温度温度温度温度",
"name":"温度温度温度温度温度温度"
},
{
"time":"2022-6-30 13:00",
"warehouse":"文书档案库房",
"warning":"温度温度温度温度温度温度",
"name":"温度温度温度温度温度温度"
},
{
"time":"2022-6-30 13:00",
"warehouse":"文书档案库房",
"warning":"温度温度温度温度温度温度",
"name":"温度温度温度温度温度温度"
},
{
"time":"2022-6-30 13:00",
"warehouse":"文书档案库房",
"warning":"温度温度温度温度温度温度",
"name":"温度温度温度温度温度温度"
},
{
"time":"2022-6-30 13:00",
"warehouse":"文书档案库房",
"warning":"温度温度温度温度温度温度",
"name":"温度温度温度温度温度温度"
},
{
"time":"2022-6-30 13:00",
"warehouse":"文书档案库房",
"warning":"温度温度温度温度温度温度",
"name":"温度温度温度温度温度温度"
},
{
"time":"2022-6-30 13:00",
"warehouse":"文书档案库房",
"warning":"温度温度温度温度温度温度",
"name":"温度温度温度温度温度温度"
},
{
"time":"2022-6-30 13:00",
"warehouse":"文书档案库房",
"warning":"温度温度温度温度温度温度",
"name":"温度温度温度温度温度温度"
},
{
"time":"2022-6-30 13:00",
"warehouse":"文书档案库房",
"warning":"温度温度温度温度温度温度",
"name":"温度温度温度温度温度温度"
},
{
"time":"2022-6-30 13:00",
"warehouse":"文书档案库房",
"warning":"温度温度温度温度温度温度",
"name":"温度温度温度温度温度温度"
},
{
"time":"2022-6-30 13:00",
"warehouse":"文书档案库房",
"warning":"温度温度温度温度温度温度",
"name":"温度温度温度温度温度温度"
},
{
"time":"2022-6-30 13:00",
"warehouse":"文书档案库房",
"warning":"温度温度温度温度温度温度",
"name":"温度温度温度温度温度温度"
},
{
"time":"2022-6-30 13:00",
"warehouse":"文书档案库房",
"warning":"温度温度温度温度温度温度",
"name":"温度温度温度温度温度温度"
}
]
}

437
src/views/environmentalScreen/index.vue
View File

@ -7,11 +7,65 @@
<span class="right-top-line" /> <span class="right-top-line" />
<span class="left-bottom-line" /> <span class="left-bottom-line" />
<h3><i class="iconfont icon-kongqizhiliangshuju" />档案库空气质量数据</h3> <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>
<div class="env-item container-wrap"> <div class="env-item container-wrap">
<span class="right-top-line" /> <span class="right-top-line" />
<span class="left-bottom-line" /> <span class="left-bottom-line" />
<h3><i class="iconfont icon-loushuijiance" />漏水检测</h3> <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>
<div class="env-item container-wrap"> <div class="env-item container-wrap">
<span class="right-top-line" /> <span class="right-top-line" />
@ -42,11 +96,87 @@
frameborder="0" frameborder="0"
scrolling="no" 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>
<div class="env-item container-wrap">
<div class="env-item container-wrap device-container">
<span class="right-top-line" /> <span class="right-top-line" />
<span class="left-bottom-line" /> <span class="left-bottom-line" />
<h3><i class="iconfont icon-shebeizhuangtai" />设备状态</h3> <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> </div>
<div class="env-main-right"> <div class="env-main-right">
@ -54,12 +184,13 @@
<span class="right-top-line" /> <span class="right-top-line" />
<span class="left-bottom-line" /> <span class="left-bottom-line" />
<h3><i class="iconfont icon-zhenglishi" />阅览室</h3> <h3><i class="iconfont icon-zhenglishi" />阅览室</h3>
<LineChart />
<LineChart :class-name="className[0]" :chart-data="lineChartData.readRoomData" />
</div> </div>
<div class="env-item container-wrap"> <div class="env-item container-wrap">
<span class="right-top-line" /> <span class="right-top-line" />
<span class="left-bottom-line" /> <span class="left-bottom-line" />
<h3><i class="iconfont icon-zhenglishi" />整理室</h3> <h3><i class="iconfont icon-zhenglishi" />整理室</h3>
<LineChart :class-name="className[1]" :chart-data="lineChartData.collateRoomData" />
</div> </div>
<div class="env-item container-wrap"> <div class="env-item container-wrap">
<span class="right-top-line" /> <span class="right-top-line" />
@ -80,22 +211,104 @@
</div> </div>
</div> </div>
</div> </div>
<!-- 摄像头视频 -->
<Video ref="camera" />
</div> </div>
</template> </template>
<script> <script>
import LineChart from './module/lineChart' 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 { export default {
name: 'Dashboard', name: 'Dashboard',
components: { components: {
LineChart
LineChart,
Video
}, },
data() { data() {
return { 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: { 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 }) { rowBgColor({ row, rowIndex }) {
if (rowIndex % 2 === 1) { if (rowIndex % 2 === 1) {
@ -124,15 +337,17 @@ export default {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
padding: 0 25px; padding: 0 25px;
margin-top: -12px;
.env-main-left, .env-main-left,
.env-main-right{ .env-main-right{
width: 458px; width: 458px;
height: calc(100vh - 150px);
height: calc(100vh - 138px);
overflow: hidden; overflow: hidden;
} }
.env-main-middle{ .env-main-middle{
flex: 1; flex: 1;
margin: 0 20px; margin: 0 20px;
height: calc(100vh - 138px);
} }
.container-wrap{ .container-wrap{
height: calc(100%/3 - 14px); height: calc(100%/3 - 14px);
@ -141,6 +356,7 @@ export default {
.env-item { .env-item {
margin-bottom: 20px; margin-bottom: 20px;
text-align: center; text-align: center;
overflow: hidden;
h3{ h3{
position: relative; position: relative;
display: inline-block; 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{ .env-3d{
height: calc(100vh - (100%/2) - 28px);
position: relative;
width: 100%;
height: calc(100vh - (100%/2) - 14px);
margin-bottom: 20px; margin-bottom: 20px;
background: url('~@/assets/images/largeScreen/bg.png') no-repeat center -130px;
// background-size: 100% 100%;
overflow: hidden; overflow: hidden;
.iframe_box{ .iframe_box{
width: 100%; width: 100%;
height: 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;
}
} }
} }
} }

40
src/views/environmentalScreen/module/lineChart.vue
View File

@ -1,17 +1,33 @@
<template> <template>
<div style="height:84%"> <div style="height:84%">
<div id="container" style="height:100%" />
<div :id="className" style="height:100%" />
</div> </div>
</template> </template>
<script> <script>
import echarts from 'echarts' import echarts from 'echarts'
export default { export default {
props: {
className: {
type: String,
default: ''
},
chartData: {
type: Object,
required: true
}
},
data() { data() {
return { return {
chart: null,
temperatureData: [16, 12, 15, 11, 20, 16, 15, 22],
humidnessData: [10, 50, 40, 60, 50, 30, 15, 30]
chart: null
}
},
watch: {
chartData: {
deep: true,
handler(val) {
this.setOptions(val)
}
} }
}, },
mounted() { mounted() {
@ -28,14 +44,11 @@ export default {
}, },
methods: { methods: {
initChart() { initChart() {
const dom = document.getElementById('container')
this.chart = echarts.init(dom, 'dark', {
renderer: 'canvas',
useDirtyRect: false
})
this.setOptions()
const dom = document.getElementById(this.className)
this.chart = echarts.init(dom, 'dark')
this.setOptions(this.chartData)
}, },
setOptions() {
setOptions({ temperatureData, humidnessData } = {}) {
this.chart.setOption({ this.chart.setOption({
backgroundColor: '#021941', backgroundColor: '#021941',
tooltip: { tooltip: {
@ -82,7 +95,6 @@ export default {
}], }],
yAxis: [ yAxis: [
{ {
type: 'value',
// 坐标轴最大值、最小值、强制设置数据的步长间隔 // 坐标轴最大值、最小值、强制设置数据的步长间隔
max: 24, max: 24,
min: 10, min: 10,
@ -179,7 +191,7 @@ export default {
emphasis: { emphasis: {
focus: 'series' focus: 'series'
}, },
data: this.temperatureData
data: temperatureData
}, },
{ {
name: '湿度（%）', name: '湿度（%）',
@ -207,7 +219,7 @@ export default {
emphasis: { emphasis: {
focus: 'series' focus: 'series'
}, },
data: this.humidnessData
data: humidnessData
} }
] ]
}) })

59
src/views/storeManage/warehouse3D/archivesStorage/index.vue
View File

@ -43,7 +43,7 @@
</li> </li>
<li class="msg-pm"> <li class="msg-pm">
<!-- style="font-size:46px;margin-left:25px;padding-bottom:10px" --> <!-- style="font-size:46px;margin-left:25px;padding-bottom:10px" -->
<svg-icon icon-class="pm2.5" class-name="msg-list-svg" />
<svg-icon icon-class="pm25" class-name="msg-list-svg" />
<div class="msg-txt"> <div class="msg-txt">
<span class="msg-list-num">60</span> <span class="msg-list-num">60</span>
<p class="msg-list-unit">PM2.5ug/m³</p> <p class="msg-list-unit">PM2.5ug/m³</p>
@ -238,65 +238,8 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
@import '~@/assets/styles/lend-manage.scss'; @import '~@/assets/styles/lend-manage.scss';
.warehouse-left{ .warehouse-left{
position: relative; position: relative;
.msg-list{
display: flex;
position: absolute;
top: 0;
left: 0;
width: calc(100vw - 800px);
li{
flex: 1;
display: flex;
flex-wrap: nowrap;
align-items: center;
align-content: center;
justify-content: center;
// width: calc(100%/6);
height: 80px;
margin-right: 20px;
background: url('~@/assets/images/data_border_default.png') no-repeat;
background-size: 100% 100%;
position: relative;
&.li-warn{
background: url('~@/assets/images/data_border_warn.png') no-repeat;
background-size: 100% 100%;
}
.msg-list-svg{
font-size: 36px;
display: inline-block;
height: 80px;
line-height: 80px;
margin-left: 30px;
}
.msg-pm{
font-size: 46px;
}
.msg-txt{
position: relative;
flex: 1;
height: 80px;
text-align: center;
}
.msg-list-unit{
position: absolute;
left: 0;
bottom: 12px;
width: 100%;
font-size: 14px;
}
.msg-list-num{
color: #fff;
font-size: 26px;
position: absolute;
left: 0;
top: 14px;
width: 100%;
}
}
}
} }
.container-wrap{ .container-wrap{
min-height: auto; min-height: auto;

Write Preview
Loading…
Cancel
Save