root/screen-lnsh
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

设备监控

Browse Source
This commit is contained in:
caill
2023-03-09 15:34:16 +08:00
parent 44cbfafaf2
commit 2b73f03c66
13 changed files with 429 additions and 141 deletions
Download Patch File Download Diff File Expand all files Collapse all files

154
src/pages/DeviceMonitor.vue
View File

@@ -3,41 +3,41 @@
<t-header index='3'></t-header>
<div class="content">
<div class="item_tr clearfix">
<div class="item_block fl" v-for="e in deviceDatas" :key="e.point_id">
<div class="item_block fl" v-for="e in deviceDatas" :key="e.device_code">
<div class="item_inner" @click.stop="getInfo(e)">
<div class="item_img">
<img v-if="e.device_url !== ''" :src="require('../assets/images/devmoni/' + e.device_url + '.jpg')" :alt="e.point_name">
<img v-if="e.device_url !== ''" :src="require('../assets/images/devmoni/' + e.device_url + '.jpg')" :alt="e.device_name">
</div>
<div class="point_name clearfix">
<div class="fl point_name_tag" :class="['yellow', 'green', 'orange', 'gray'][Number(e.point_status) - 1]"></div>
<div class="fl point_name_text">{{e.point_name}}</div>
<div class="device_name clearfix">
<div class="fl device_name_tag" :class="['yellow', 'green', 'orange', 'gray'][Number(e.device_status)]"></div>
<div class="fl device_name_text">{{e.device_name}}</div>
</div>
<div class="info_block clearfix">
<div class="fl info_table_block">
<div v-if="e.material_name !== ''" class="info_table"><p>当前生产：</p></div>
<div v-if="e.work_time !== ''" class="info_table"><p>已工作：</p></div>
<div v-if="e.ivt_qty !== ''" class="info_table"><p>已生产：</p></div>
<div v-if="e.vehicle_qty !== ''" class="info_table"><p>当前窑车数：</p></div>
<div v-if="e.vehicle_max_qty !== ''" class="info_table"><p>容 量：</p></div>
<div v-if="e.material_name !== null && e.material_name !== undefined" class="info_table"><p>当前生产：</p></div>
<div v-if="e.work_time !== null && e.work_time !== undefined" class="info_table"><p>已工作：</p></div>
<div v-if="e.real_qty !== null && e.real_qty !== undefined" class="info_table"><p>已生产：</p></div>
<div v-if="e.vehicle_qty !== null && e.vehicle_qty !== undefined" class="info_table"><p>当前窑车数：</p></div>
<div v-if="e.vehicle_max_qty !== null && e.vehicle_max_qty !== undefined" class="info_table"><p>容 量：</p></div>
</div>
<div class="fr info_data_block">
<div v-if="e.material_name !== ''" class="info_data"><p>{{e.material_name}}</p></div>
<div v-if="e.work_time !== ''" class="info_data"><p>{{e.work_time}}小时</p></div>
<div v-if="e.ivt_qty !== ''" class="info_data"><p>{{e.ivt_qty | numFixed(2)}}KG</p></div>
<div v-if="e.vehicle_qty !== ''" class="info_data"><p>{{e.vehicle_qty}}车</p></div>
<div v-if="e.vehicle_max_qty !== ''" class="info_data"><p>{{e.vehicle_max_qty}}车</p></div>
<div v-if="e.material_name !== null && e.material_name !== undefined" class="info_data"><p>{{e.material_name}}</p></div>
<div v-if="e.work_time !== null && e.work_time !== undefined" class="info_data"><p>{{e.work_time}}小时</p></div>
<div v-if="e.real_qty !== null && e.real_qty !== undefined" class="info_data"><p>{{e.real_qty}}KG</p></div>
<div v-if="e.vehicle_qty !== null && e.vehicle_qty !== undefined" class="info_data"><p>{{e.vehicle_qty}}车</p></div>
<div v-if="e.vehicle_max_qty !== null && e.vehicle_max_qty !== undefined" class="info_data"><p>{{e.vehicle_max_qty}}车</p></div>
</div>
</div>
</div>
<div v-if="e.point_id === uid" class="popover_block">
<div v-if="e.device_code === uid" class="popover_block">
<div class="foldline" :class="e.postion1"></div>
<div class="popver_bg" :class="e.postion2">
<div class="popver_block">
<div class="pop_info_name">{{form.point_name}}</div>
<div class="pop_info_name">{{form.device_name}}</div>
<div class="pop_info_tip">
<div class="pop_status">
<div class="pop_status_dot" :class="['yellow', 'green', 'orange', 'gray'][Number(form.point_status) - 1]"></div>
<div class="pop_status_text" :class="['fyellow', 'fgreen', 'forange', 'fgray'][Number(form.point_status) - 1]">{{['待机', '生产中', '故障', '关机'][Number(form.point_status) - 1]}}</div>
<div class="pop_status_dot" :class="['yellow', 'green', 'orange', 'gray'][Number(form.device_status) - 1]"></div>
<div class="pop_status_text" :class="['fyellow', 'fgreen', 'forange', 'fgray'][Number(form.device_status) - 1]">{{['待机', '生产中', '故障', '关机'][Number(form.device_status) - 1]}}</div>
</div>
<div v-if="form.material_name !== ''" class="pop_tip">当前生产：{{form.material_name}}</div>
<div v-if="form.real_qty !== ''" class="pop_tip">已生产：{{form.real_qty}}KG</div>
@@ -98,15 +98,15 @@
</div>
</div>
<!-- 混碾机LB0001 -->
<div v-if="e.point_id === uid && e.deviceclass_code === 'LB0001'" class="popover_block">
<div v-if="e.device_code === uid && e.deviceclass_code === 'LB0001'" class="popover_block">
<div class="foldline" :class="e.postion1"></div>
<div class="popver_bg" :class="e.postion2">
<div class="popver_block">
<div class="pop_info_name">{{form.point_name}}</div>
<div class="pop_info_name">{{form.device_name}}</div>
<div class="pop_info_tip">
<div class="pop_status">
<div class="pop_status_dot" :class="['yellow', 'green', 'orange', 'gray'][Number(form.point_status) - 1]"></div>
<div class="pop_status_text" :class="['fyellow', 'fgreen', 'forange', 'fgray'][Number(form.point_status) - 1]">{{['待机', '生产中', '故障', '关机'][Number(form.point_status) - 1]}}</div>
<div class="pop_status_dot" :class="['yellow', 'green', 'orange', 'gray'][Number(form.device_status) - 1]"></div>
<div class="pop_status_text" :class="['fyellow', 'fgreen', 'forange', 'fgray'][Number(form.device_status) - 1]">{{['待机', '生产中', '故障', '关机'][Number(form.device_status) - 1]}}</div>
</div>
<div class="pop_tip">本周用电：{{form.week_electricity}}kw.h</div>
<div class="pop_tip">本月用电：{{form.mouth_electricity}}kw.h</div>
@@ -129,15 +129,15 @@
</div>
</div>
<!-- 压力机LB0004、机械手LB0006 -->
<div v-if="e.point_id === uid && (e.deviceclass_code === 'LB0004' || (e.deviceclass_code === 'LB0006' && e.device_code !== 'CDJQR01' && e.device_code !== 'MDJXS01'))" class="popover_block">
<div v-if="e.device_code === uid && (e.deviceclass_code === 'LB0004' || (e.deviceclass_code === 'LB0006' && e.device_code !== 'CDJQR01' && e.device_code !== 'MDJXS01'))" class="popover_block">
<div class="foldline" :class="e.postion1"></div>
<div class="popver_bg" :class="e.postion2">
<div class="popver_block">
<div class="pop_info_name">{{form.point_name}}</div>
<div class="pop_info_name">{{form.device_name}}</div>
<div class="pop_info_tip">
<div class="pop_status">
<div class="pop_status_dot" :class="['yellow', 'green', 'orange', 'gray'][Number(form.point_status) - 1]"></div>
<div class="pop_status_text" :class="['fyellow', 'fgreen', 'forange', 'fgray'][Number(form.point_status) - 1]">{{['待机', '生产中', '故障', '关机'][Number(form.point_status) - 1]}}</div>
<div class="pop_status_dot" :class="['yellow', 'green', 'orange', 'gray'][Number(form.device_status) - 1]"></div>
<div class="pop_status_text" :class="['fyellow', 'fgreen', 'forange', 'fgray'][Number(form.device_status) - 1]">{{['待机', '生产中', '故障', '关机'][Number(form.device_status) - 1]}}</div>
</div>
<div class="pop_tip">本周用电：{{form.week_electricity}}kw.h</div>
<div class="pop_tip">本月用电：{{form.mouth_electricity}}kw.h</div>
@@ -160,15 +160,15 @@
</div>
</div>
<!-- 衍架LB0010 -->
<div v-if="e.point_id === uid && e.deviceclass_code === 'LB0010'" class="popover_block">
<div v-if="e.device_code === uid && e.deviceclass_code === 'LB0010'" class="popover_block">
<div class="foldline" :class="e.postion1"></div>
<div class="popver_bg" :class="e.postion2">
<div class="popver_block">
<div class="pop_info_name">{{form.point_name}}</div>
<div class="pop_info_name">{{form.device_name}}</div>
<div class="pop_info_tip">
<div class="pop_status">
<div class="pop_status_dot" :class="['yellow', 'green', 'orange', 'gray'][Number(form.point_status) - 1]"></div>
<div class="pop_status_text" :class="['fyellow', 'fgreen', 'forange', 'fgray'][Number(form.point_status) - 1]">{{['待机', '生产中', '故障', '关机'][Number(form.point_status) - 1]}}</div>
<div class="pop_status_dot" :class="['yellow', 'green', 'orange', 'gray'][Number(form.device_status) - 1]"></div>
<div class="pop_status_text" :class="['fyellow', 'fgreen', 'forange', 'fgray'][Number(form.device_status) - 1]">{{['待机', '生产中', '故障', '关机'][Number(form.device_status) - 1]}}</div>
</div>
<div class="pop_tip">本周用电：{{form.week_electricity}}kw.h</div>
<div class="pop_tip">本月用电：{{form.mouth_electricity}}kw.h</div>
@@ -183,15 +183,15 @@
</div>
</div>
<!-- 空车道LB0011、准备车道LB0012、窑-暂存LB0014 -->
<div v-if="e.point_id === uid && (e.deviceclass_code === 'LB0011' || e.deviceclass_code === 'LB0012' || e.deviceclass_code === 'LB0014')" class="popover_block">
<div v-if="e.device_code === uid && (e.deviceclass_code === 'LB0011' || e.deviceclass_code === 'LB0012' || e.deviceclass_code === 'LB0014')" class="popover_block">
<div class="foldline" :class="e.postion1"></div>
<div class="popver_bg" :class="e.postion2">
<div class="popver_block">
<div class="pop_info_name">{{form.point_name}}</div>
<div class="pop_info_name">{{form.device_name}}</div>
<div class="pop_info_tip">
<div class="pop_status">
<div class="pop_status_dot" :class="['yellow', 'green', 'orange', 'gray'][Number(form.point_status) - 1]"></div>
<div class="pop_status_text" :class="['fyellow', 'fgreen', 'forange', 'fgray'][Number(form.point_status) - 1]">{{['待机', '生产中', '故障', '关机'][Number(form.point_status) - 1]}}</div>
<div class="pop_status_dot" :class="['yellow', 'green', 'orange', 'gray'][Number(form.device_status) - 1]"></div>
<div class="pop_status_text" :class="['fyellow', 'fgreen', 'forange', 'fgray'][Number(form.device_status) - 1]">{{['待机', '生产中', '故障', '关机'][Number(form.device_status) - 1]}}</div>
</div>
<div class="pop_tip">本周用电：{{form.week_electricity}}kw.h</div>
<div class="pop_tip">本月用电：{{form.mouth_electricity}}kw.h</div>
@@ -202,15 +202,15 @@
</div>
</div>
<!-- 窑LB0013 -->
<div v-if="e.point_id === uid && e.deviceclass_code === 'LB0013'" class="popover_block">
<div v-if="e.device_code === uid && e.deviceclass_code === 'LB0013'" class="popover_block">
<div class="foldline" :class="e.postion1"></div>
<div class="popver_bg" :class="e.postion2">
<div class="popver_block">
<div class="pop_info_name">{{form.point_name}}</div>
<div class="pop_info_name">{{form.device_name}}</div>
<div class="pop_info_tip">
<div class="pop_status">
<div class="pop_status_dot" :class="['yellow', 'green', 'orange', 'gray'][Number(form.point_status) - 1]"></div>
<div class="pop_status_text" :class="['fyellow', 'fgreen', 'forange', 'fgray'][Number(form.point_status) - 1]">{{['待机', '生产中', '故障', '关机'][Number(form.point_status) - 1]}}</div>
<div class="pop_status_dot" :class="['yellow', 'green', 'orange', 'gray'][Number(form.device_status) - 1]"></div>
<div class="pop_status_text" :class="['fyellow', 'fgreen', 'forange', 'fgray'][Number(form.device_status) - 1]">{{['待机', '生产中', '故障', '关机'][Number(form.device_status) - 1]}}</div>
</div>
<div class="pop_tip">本周用电/气：{{form.week_electricity}}kw.h / {{form.week_gas}} Nm</div>
<div class="pop_tip">本月用电/气：{{form.mouth_electricity}}kw.h / {{form.month_gas}} Nm</div>
@@ -233,15 +233,15 @@
</div>
</div>
<!-- RGVLB0015 -->
<div v-if="e.point_id === uid && e.deviceclass_code === 'LB0015'" class="popover_block">
<div v-if="e.device_code === uid && e.deviceclass_code === 'LB0015'" class="popover_block">
<div class="foldline" :class="e.postion1"></div>
<div class="popver_bg" :class="e.postion2">
<div class="popver_block">
<div class="pop_info_name">{{form.point_name}}</div>
<div class="pop_info_name">{{form.device_name}}</div>
<div class="pop_info_tip">
<div class="pop_status">
<div class="pop_status_dot" :class="['yellow', 'green', 'orange', 'gray'][Number(form.point_status) - 1]"></div>
<div class="pop_status_text" :class="['fyellow', 'fgreen', 'forange', 'fgray'][Number(form.point_status) - 1]">{{['待机', '生产中', '故障', '关机'][Number(form.point_status) - 1]}}</div>
<div class="pop_status_dot" :class="['yellow', 'green', 'orange', 'gray'][Number(form.device_status) - 1]"></div>
<div class="pop_status_text" :class="['fyellow', 'fgreen', 'forange', 'fgray'][Number(form.device_status) - 1]">{{['待机', '生产中', '故障', '关机'][Number(form.device_status) - 1]}}</div>
</div>
<div class="pop_tip">本周用电：{{form.week_electricity}}kw.h</div>
<div class="pop_tip">本月用电：{{form.mouth_electricity}}kw.h</div>
@@ -253,15 +253,15 @@
</div>
</div>
<!-- 拆垛机械手、码垛机械手LB0006 -->
<div v-if="e.point_id === uid && (e.deviceclass_code === 'LB0006' && e.device_code === 'CDJQR01'|| e.device_code === 'MDJXS01')" class="popover_block">
<div v-if="e.device_code === uid && (e.deviceclass_code === 'LB0006' && e.device_code === 'CDJQR01'|| e.device_code === 'MDJXS01')" class="popover_block">
<div class="foldline" :class="e.postion1"></div>
<div class="popver_bg" :class="e.postion2">
<div class="popver_block">
<div class="pop_info_name">{{form.point_name}}</div>
<div class="pop_info_name">{{form.device_name}}</div>
<div class="pop_info_tip">
<div class="pop_status">
<div class="pop_status_dot" :class="['yellow', 'green', 'orange', 'gray'][Number(form.point_status) - 1]"></div>
<div class="pop_status_text" :class="['fyellow', 'fgreen', 'forange', 'fgray'][Number(form.point_status) - 1]">{{['待机', '生产中', '故障', '关机'][Number(form.point_status) - 1]}}</div>
<div class="pop_status_dot" :class="['yellow', 'green', 'orange', 'gray'][Number(form.device_status) - 1]"></div>
<div class="pop_status_text" :class="['fyellow', 'fgreen', 'forange', 'fgray'][Number(form.device_status) - 1]">{{['待机', '生产中', '故障', '关机'][Number(form.device_status) - 1]}}</div>
</div>
<div class="pop_tip">本周用电：{{form.week_electricity}}kw.h</div>
<div class="pop_tip">本月用电：{{form.mouth_electricity}}kw.h</div>
@@ -274,15 +274,15 @@
</div>
</div>
<!-- 叠盘机LB0016 -->
<div v-if="e.point_id === uid && e.deviceclass_code === 'LB0016'" class="popover_block">
<div v-if="e.device_code === uid && e.deviceclass_code === 'LB0016'" class="popover_block">
<div class="foldline" :class="e.postion1"></div>
<div class="popver_bg" :class="e.postion2">
<div class="popver_block">
<div class="pop_info_name">{{form.point_name}}</div>
<div class="pop_info_name">{{form.device_name}}</div>
<div class="pop_info_tip">
<div class="pop_status">
<div class="pop_status_dot" :class="['yellow', 'green', 'orange', 'gray'][Number(form.point_status) - 1]"></div>
<div class="pop_status_text" :class="['fyellow', 'fgreen', 'forange', 'fgray'][Number(form.point_status) - 1]">{{['待机', '生产中', '故障', '关机'][Number(form.point_status) - 1]}}</div>
<div class="pop_status_dot" :class="['yellow', 'green', 'orange', 'gray'][Number(form.device_status) - 1]"></div>
<div class="pop_status_text" :class="['fyellow', 'fgreen', 'forange', 'fgray'][Number(form.device_status) - 1]">{{['待机', '生产中', '故障', '关机'][Number(form.device_status) - 1]}}</div>
</div>
<div class="pop_tip">本周用电：{{form.week_electricity}}kw.h</div>
<div class="pop_tip">本月用电：{{form.mouth_electricity}}kw.h</div>
@@ -295,15 +295,15 @@
</div>
</div>
<!-- AGVLB0019 -->
<div v-if="e.point_id === uid && e.deviceclass_code === 'LB0019'" class="popover_block">
<div v-if="e.device_code === uid && e.deviceclass_code === 'LB0019'" class="popover_block">
<div class="foldline" :class="e.postion1"></div>
<div class="popver_bg" :class="e.postion2">
<div class="popver_block">
<div class="pop_info_name">{{form.point_name}}</div>
<div class="pop_info_name">{{form.device_name}}</div>
<div class="pop_info_tip">
<div class="pop_status">
<div class="pop_status_dot" :class="['yellow', 'green', 'orange', 'gray'][Number(form.point_status) - 1]"></div>
<div class="pop_status_text" :class="['fyellow', 'fgreen', 'forange', 'fgray'][Number(form.point_status) - 1]">{{['待机', '生产中', '故障', '关机'][Number(form.point_status) - 1]}}</div>
<div class="pop_status_dot" :class="['yellow', 'green', 'orange', 'gray'][Number(form.device_status) - 1]"></div>
<div class="pop_status_text" :class="['fyellow', 'fgreen', 'forange', 'fgray'][Number(form.device_status) - 1]">{{['待机', '生产中', '故障', '关机'][Number(form.device_status) - 1]}}</div>
</div>
<div class="pop_tip">已完成搬运：0个</div>
<div class="pop_tip">故障信息：{{form.error_info}}</div>
@@ -412,15 +412,15 @@ export default {
}
},
getInfo (e) {
if (this.uid === e.point_id) {
this.uid = ''
} else {
this.form = {}
this.allrows1 = []
this.allrows2 = []
this.allrowsw3 = []
this._findDeviceById(e.point_id)
}
// if (this.uid === e.device_code) {
// this.uid = ''
// } else {
// this.form = {}
// this.allrows1 = []
// this.allrows2 = []
// this.allrowsw3 = []
// this._findDeviceById(e.device_code)
// }
},
closebtn () {
this.uid = ''
@@ -442,16 +442,16 @@ export default {
cursor pointer
.content
width 100%
padding 10px 1rem 0
height calc(100% - 134px)
height calc(100% - 135px)
overflow-y auto
padding 10px 1rem 0
.item_tr
width 100%
.item_block
position relative
_wh(180px,219px)
_wh(180px,209px)
padding 8px 4px
margin-bottom 11px
margin-bottom 21px
margin-right calc((100% - 180px * 9) / 8)
background center center / 100% 100% url(../assets/images/bg_item.png) no-repeat
&:nth-child(9n)
@@ -465,14 +465,14 @@ export default {
background-color $gray
img
_wh(100%,100%)
.point_name_tag
.device_name_tag
_wh(10px,10px)
border-radius 50%
margin 2px
background-color #ffffff
.point_name_text
.device_name_text
_font(14px,14px,,,left)
.point_name, .info_block
.device_name, .info_block
width 100%
padding 4px 0
.info_table_block
@@ -627,7 +627,7 @@ export default {
border-bottom none
.tag_block
position fixed
bottom 30px
bottom 25px
right 54px
.tag_type
display inline-block
@@ -640,16 +640,6 @@ export default {
.tag_text
display inline-block
_font(14px,20px,,,left)
@media screen and (max-width:1800px)
.content
width 100%
padding 10px 14px 0
.item_block
_wh(160px,219px)
margin-bottom 20px
margin-right calc((100% - 160px * 9) / 8)
.item_img
_wh(100%,80px)
.green
background-color $green
.yellow