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-05-11 13:51:43 +08:00
parent 81c40e3042
commit 824b55f854
1 changed files with 172 additions and 166 deletions
Download Patch File Download Diff File Expand all files Collapse all files

122
src/pages/DeviceMonitor.vue
View File

@@ -10,7 +10,7 @@
<img v-if="e.device_url !== ''" :src="require('../assets/images/devmon/' + e.device_url + '.jpg')" :alt="e.device_name"> <img v-if="e.device_url !== ''" :src="require('../assets/images/devmon/' + e.device_url + '.jpg')" :alt="e.device_name">
</div> </div>
<div class="device_name clearfix"> <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_tag" :class="['gray', 'yellow', 'green', 'orange'][Number(e.device_status)]"></div>
<div class="fl device_name_text">{{e.device_name}}</div> <div class="fl device_name_text">{{e.device_name}}</div>
</div> </div>
<div class="info_block"> <div class="info_block">
@@ -51,8 +51,8 @@
<div class="pop_info_name">{{pkObj.device_name}}</div> <div class="pop_info_name">{{pkObj.device_name}}</div>
<div class="pop_info_tip"> <div class="pop_info_tip">
<div class="pop_status"> <div class="pop_status">
<div class="pop_status_dot" :class="['yellow', 'green', 'orange', 'gray'][Number(pkObj.device_status)]"></div> <div class="pop_status_dot" :class="['gray', 'yellow', 'green', 'orange'][Number(pkObj.device_status)]"></div>
<div class="pop_status_text" :class="['fyellow', 'fgreen', 'forange', 'fgray'][Number(pkObj.device_status)]">{{pkObj.device_status_name}}</div> <div class="pop_status_text" :class="['fgray', 'fyellow', 'fgreen', 'forange'][Number(pkObj.device_status)]">{{pkObj.device_status_name}}</div>
</div> </div>
<div v-if="pkObj.material_name !== null && pkObj.material_name !== undefined" class="pop_tip">当前生产：{{pkObj.material_name}}</div> <div v-if="pkObj.material_name !== null && pkObj.material_name !== undefined" class="pop_tip">当前生产：{{pkObj.material_name}}</div>
<div v-if="pkObj.real_qty !== null && pkObj.real_qty !== undefined" class="pop_tip">已生产：{{pkObj.real_qty}}KG</div> <div v-if="pkObj.real_qty !== null && pkObj.real_qty !== undefined" class="pop_tip">已生产：{{pkObj.real_qty}}KG</div>
@@ -67,14 +67,14 @@
</div> </div>
</div> </div>
</div> </div>
<div class="item_wrapper_h1"> <div class="item_wrapper_h2">
<div class="item_block fl" v-for="(e, i) in YZJ" :key="i"> <div class="item_block fl" v-for="(e, i) in YZJ" :key="i">
<div class="item_inner" @click.stop="getInfo(e)"> <div class="item_inner" @click.stop="getInfo(e)">
<div class="item_img"> <div class="item_img">
<img v-if="e.device_url !== ''" :src="require('../assets/images/devmon/' + e.device_url + '.jpg')" :alt="e.device_name"> <img v-if="e.device_url !== ''" :src="require('../assets/images/devmon/' + e.device_url + '.jpg')" :alt="e.device_name">
</div> </div>
<div class="device_name clearfix"> <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_tag" :class="['gray', 'yellow', 'green', 'orange'][Number(e.device_status)]"></div>
<div class="fl device_name_text">{{e.device_name}}</div> <div class="fl device_name_text">{{e.device_name}}</div>
</div> </div>
<div class="info_block"> <div class="info_block">
@@ -115,8 +115,8 @@
<div class="pop_info_name">{{pkObj.device_name}}</div> <div class="pop_info_name">{{pkObj.device_name}}</div>
<div class="pop_info_tip"> <div class="pop_info_tip">
<div class="pop_status"> <div class="pop_status">
<div class="pop_status_dot" :class="['yellow', 'green', 'orange', 'gray'][Number(pkObj.device_status)]"></div> <div class="pop_status_dot" :class="['gray', 'yellow', 'green', 'orange'][Number(pkObj.device_status)]"></div>
<div class="pop_status_text" :class="['fyellow', 'fgreen', 'forange', 'fgray'][Number(pkObj.device_status)]">{{pkObj.device_status_name}}</div> <div class="pop_status_text" :class="['fgray', 'fyellow', 'fgreen', 'forange'][Number(pkObj.device_status)]">{{pkObj.device_status_name}}</div>
</div> </div>
<div v-if="pkObj.material_name !== null && pkObj.material_name !== undefined" class="pop_tip">当前生产：{{pkObj.material_name}}</div> <div v-if="pkObj.material_name !== null && pkObj.material_name !== undefined" class="pop_tip">当前生产：{{pkObj.material_name}}</div>
<div v-if="pkObj.real_qty !== null && pkObj.real_qty !== undefined" class="pop_tip">已生产：{{pkObj.real_qty}}KG</div> <div v-if="pkObj.real_qty !== null && pkObj.real_qty !== undefined" class="pop_tip">已生产：{{pkObj.real_qty}}KG</div>
@@ -131,15 +131,14 @@
</div> </div>
</div> </div>
</div> </div>
<div class="item_wrapper_f"> <div class="item_wrapper_h2">
<div class="item_wrapper_l"> <div class="item_block fl" v-for="(e, i) in MDJXS" :key="i">
<div class="item_block item_block_f fl" v-for="(e, i) in MDJXS" :key="i">
<div class="item_inner" @click.stop="getInfo(e)"> <div class="item_inner" @click.stop="getInfo(e)">
<div class="item_img"> <div class="item_img">
<img v-if="e.device_url !== ''" :src="require('../assets/images/devmon/' + e.device_url + '.jpg')" :alt="e.device_name"> <img v-if="e.device_url !== ''" :src="require('../assets/images/devmon/' + e.device_url + '.jpg')" :alt="e.device_name">
</div> </div>
<div class="device_name clearfix"> <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_tag" :class="['gray', 'yellow', 'green', 'orange'][Number(e.device_status)]"></div>
<div class="fl device_name_text">{{e.device_name}}</div> <div class="fl device_name_text">{{e.device_name}}</div>
</div> </div>
<div class="info_block"> <div class="info_block">
@@ -180,8 +179,8 @@
<div class="pop_info_name">{{pkObj.device_name}}</div> <div class="pop_info_name">{{pkObj.device_name}}</div>
<div class="pop_info_tip"> <div class="pop_info_tip">
<div class="pop_status"> <div class="pop_status">
<div class="pop_status_dot" :class="['yellow', 'green', 'orange', 'gray'][Number(pkObj.device_status)]"></div> <div class="pop_status_dot" :class="['gray', 'yellow', 'green', 'orange'][Number(pkObj.device_status)]"></div>
<div class="pop_status_text" :class="['fyellow', 'fgreen', 'forange', 'fgray'][Number(pkObj.device_status)]">{{pkObj.device_status_name}}</div> <div class="pop_status_text" :class="['fgray', 'fyellow', 'fgreen', 'forange'][Number(pkObj.device_status)]">{{pkObj.device_status_name}}</div>
</div> </div>
<div v-if="pkObj.material_name !== null && pkObj.material_name !== undefined" class="pop_tip">当前生产：{{pkObj.material_name}}</div> <div v-if="pkObj.material_name !== null && pkObj.material_name !== undefined" class="pop_tip">当前生产：{{pkObj.material_name}}</div>
<div v-if="pkObj.real_qty !== null && pkObj.real_qty !== undefined" class="pop_tip">已生产：{{pkObj.real_qty}}KG</div> <div v-if="pkObj.real_qty !== null && pkObj.real_qty !== undefined" class="pop_tip">已生产：{{pkObj.real_qty}}KG</div>
@@ -196,14 +195,14 @@
</div> </div>
</div> </div>
</div> </div>
<div class="item_wrapper_l"> <div class="item_wrapper_h2">
<div class="item_block item_block_f fl" v-for="(e, i) in YAO" :key="i"> <div class="item_block fl" v-for="(e, i) in YAO" :key="i">
<div class="item_inner" @click.stop="getInfo(e)"> <div class="item_inner" @click.stop="getInfo(e)">
<div class="item_img"> <div class="item_img">
<img v-if="e.device_url !== ''" :src="require('../assets/images/devmon/' + e.device_url + '.jpg')" :alt="e.device_name"> <img v-if="e.device_url !== ''" :src="require('../assets/images/devmon/' + e.device_url + '.jpg')" :alt="e.device_name">
</div> </div>
<div class="device_name clearfix"> <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_tag" :class="['gray', 'yellow', 'green', 'orange'][Number(e.device_status)]"></div>
<div class="fl device_name_text">{{e.device_name}}</div> <div class="fl device_name_text">{{e.device_name}}</div>
</div> </div>
<div class="info_block"> <div class="info_block">
@@ -244,8 +243,8 @@
<div class="pop_info_name">{{pkObj.device_name}}</div> <div class="pop_info_name">{{pkObj.device_name}}</div>
<div class="pop_info_tip"> <div class="pop_info_tip">
<div class="pop_status"> <div class="pop_status">
<div class="pop_status_dot" :class="['yellow', 'green', 'orange', 'gray'][Number(pkObj.device_status)]"></div> <div class="pop_status_dot" :class="['gray', 'yellow', 'green', 'orange'][Number(pkObj.device_status)]"></div>
<div class="pop_status_text" :class="['fyellow', 'fgreen', 'forange', 'fgray'][Number(pkObj.device_status)]">{{pkObj.device_status_name}}</div> <div class="pop_status_text" :class="['fgray', 'fyellow', 'fgreen', 'forange'][Number(pkObj.device_status)]">{{pkObj.device_status_name}}</div>
</div> </div>
<div v-if="pkObj.material_name !== null && pkObj.material_name !== undefined" class="pop_tip">当前生产：{{pkObj.material_name}}</div> <div v-if="pkObj.material_name !== null && pkObj.material_name !== undefined" class="pop_tip">当前生产：{{pkObj.material_name}}</div>
<div v-if="pkObj.real_qty !== null && pkObj.real_qty !== undefined" class="pop_tip">已生产：{{pkObj.real_qty}}KG</div> <div v-if="pkObj.real_qty !== null && pkObj.real_qty !== undefined" class="pop_tip">已生产：{{pkObj.real_qty}}KG</div>
@@ -260,16 +259,14 @@
</div> </div>
</div> </div>
</div> </div>
</div> <div class="item_wrapper_h2">
<div class="item_wrapper_f"> <div class="item_block fl" v-for="(e, i) in FJJXS" :key="i">
<div class="item_wrapper_l">
<div class="item_block item_block_f fl" v-for="(e, i) in FJJXS" :key="i">
<div class="item_inner" @click.stop="getInfo(e)"> <div class="item_inner" @click.stop="getInfo(e)">
<div class="item_img"> <div class="item_img">
<img v-if="e.device_url !== ''" :src="require('../assets/images/devmon/' + e.device_url + '.jpg')" :alt="e.device_name"> <img v-if="e.device_url !== ''" :src="require('../assets/images/devmon/' + e.device_url + '.jpg')" :alt="e.device_name">
</div> </div>
<div class="device_name clearfix"> <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_tag" :class="['gray', 'yellow', 'green', 'orange'][Number(e.device_status)]"></div>
<div class="fl device_name_text">{{e.device_name}}</div> <div class="fl device_name_text">{{e.device_name}}</div>
</div> </div>
<div class="info_block"> <div class="info_block">
@@ -310,8 +307,8 @@
<div class="pop_info_name">{{pkObj.device_name}}</div> <div class="pop_info_name">{{pkObj.device_name}}</div>
<div class="pop_info_tip"> <div class="pop_info_tip">
<div class="pop_status"> <div class="pop_status">
<div class="pop_status_dot" :class="['yellow', 'green', 'orange', 'gray'][Number(pkObj.device_status)]"></div> <div class="pop_status_dot" :class="['gray', 'yellow', 'green', 'orange'][Number(pkObj.device_status)]"></div>
<div class="pop_status_text" :class="['fyellow', 'fgreen', 'forange', 'fgray'][Number(pkObj.device_status)]">{{pkObj.device_status_name}}</div> <div class="pop_status_text" :class="['fgray', 'fyellow', 'fgreen', 'forange'][Number(pkObj.device_status)]">{{pkObj.device_status_name}}</div>
</div> </div>
<div v-if="pkObj.material_name !== null && pkObj.material_name !== undefined" class="pop_tip">当前生产：{{pkObj.material_name}}</div> <div v-if="pkObj.material_name !== null && pkObj.material_name !== undefined" class="pop_tip">当前生产：{{pkObj.material_name}}</div>
<div v-if="pkObj.real_qty !== null && pkObj.real_qty !== undefined" class="pop_tip">已生产：{{pkObj.real_qty}}KG</div> <div v-if="pkObj.real_qty !== null && pkObj.real_qty !== undefined" class="pop_tip">已生产：{{pkObj.real_qty}}KG</div>
@@ -326,14 +323,14 @@
</div> </div>
</div> </div>
</div> </div>
<div class="item_wrapper_l"> <div class="item_wrapper_h2">
<div class="item_block item_block_f fl" v-for="(e, i) in BZX" :key="i"> <div class="item_block fl" v-for="(e, i) in BZX" :key="i">
<div class="item_inner" @click.stop="getInfo(e)"> <div class="item_inner" @click.stop="getInfo(e)">
<div class="item_img"> <div class="item_img">
<img v-if="e.device_url !== ''" :src="require('../assets/images/devmon/' + e.device_url + '.jpg')" :alt="e.device_name"> <img v-if="e.device_url !== ''" :src="require('../assets/images/devmon/' + e.device_url + '.jpg')" :alt="e.device_name">
</div> </div>
<div class="device_name clearfix"> <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_tag" :class="['gray', 'yellow', 'green', 'orange'][Number(e.device_status)]"></div>
<div class="fl device_name_text">{{e.device_name}}</div> <div class="fl device_name_text">{{e.device_name}}</div>
</div> </div>
<div class="info_block"> <div class="info_block">
@@ -374,8 +371,8 @@
<div class="pop_info_name">{{pkObj.device_name}}</div> <div class="pop_info_name">{{pkObj.device_name}}</div>
<div class="pop_info_tip"> <div class="pop_info_tip">
<div class="pop_status"> <div class="pop_status">
<div class="pop_status_dot" :class="['yellow', 'green', 'orange', 'gray'][Number(pkObj.device_status)]"></div> <div class="pop_status_dot" :class="['gray', 'yellow', 'green', 'orange'][Number(pkObj.device_status)]"></div>
<div class="pop_status_text" :class="['fyellow', 'fgreen', 'forange', 'fgray'][Number(pkObj.device_status)]">{{pkObj.device_status_name}}</div> <div class="pop_status_text" :class="['fgray', 'fyellow', 'fgreen', 'forange'][Number(pkObj.device_status)]">{{pkObj.device_status_name}}</div>
</div> </div>
<div v-if="pkObj.material_name !== null && pkObj.material_name !== undefined" class="pop_tip">当前生产：{{pkObj.material_name}}</div> <div v-if="pkObj.material_name !== null && pkObj.material_name !== undefined" class="pop_tip">当前生产：{{pkObj.material_name}}</div>
<div v-if="pkObj.real_qty !== null && pkObj.real_qty !== undefined" class="pop_tip">已生产：{{pkObj.real_qty}}KG</div> <div v-if="pkObj.real_qty !== null && pkObj.real_qty !== undefined" class="pop_tip">已生产：{{pkObj.real_qty}}KG</div>
@@ -392,19 +389,18 @@
</div> </div>
</div> </div>
</div> </div>
</div>
<div class="tag_block"> <div class="tag_block">
<div class="tag_type"> <div class="tag_type">
<div class="type_color green"></div> <div class="type_color gray"></div>
<div class="tag_text">运行</div> <div class="tag_text">关机</div>
</div> </div>
<div class="tag_type"> <div class="tag_type">
<div class="type_color yellow"></div> <div class="type_color yellow"></div>
<div class="tag_text">暂停</div> <div class="tag_text">待机</div>
</div> </div>
<div class="tag_type"> <div class="tag_type">
<div class="type_color gray"></div> <div class="type_color green"></div>
<div class="tag_text">停机</div> <div class="tag_text">生产中</div>
</div> </div>
<div class="tag_type"> <div class="tag_type">
<div class="type_color orange"></div> <div class="type_color orange"></div>
@@ -462,9 +458,9 @@ export default {
this.addPosition1(this.HLJ) this.addPosition1(this.HLJ)
this.addPosition1(this.YZJ) this.addPosition1(this.YZJ)
this.addPosition1(this.MDJXS) this.addPosition1(this.MDJXS)
this.addPosition2(this.YAO) this.addPosition1(this.YAO)
this.addPosition1(this.FJJXS) this.addPosition1(this.FJJXS)
this.addPosition2(this.BZX) this.addPosition1(this.BZX)
} else { } else {
this.toast(res.desc) this.toast(res.desc)
} }
@@ -523,7 +519,7 @@ export default {
.item_tr .item_tr
width 100% width 100%
height auto height auto
padding 3% .5% padding 34px .5% 15px .5%
_fj(,center) _fj(,center)
.item_wrapper_h1 .item_wrapper_h1
width 100% width 100%
@@ -537,12 +533,21 @@ export default {
overflow hidden overflow hidden
.item_wrapper_l .item_wrapper_l
width 49.85% width 49.85%
// .item_block
// position relative
// width 9.55%
// padding 8px 4px
// margin-bottom 0.5%
// margin-right 0.5%
// background center center / 100% 100% url(../assets/images/bg_item.png) no-repeat
// &:nth-child(10n)
// margin-right 0
.item_block .item_block
position relative position relative
width 9.55% width 6.0625%
padding 8px 4px padding 8px 4px
margin-bottom 0.5% margin-bottom 0.4%
margin-right 0.5% margin-right 0.2%
background center center / 100% 100% url(../assets/images/bg_item.png) no-repeat background center center / 100% 100% url(../assets/images/bg_item.png) no-repeat
&:nth-child(10n) &:nth-child(10n)
margin-right 0 margin-right 0
@@ -556,7 +561,7 @@ export default {
width 100% width 100%
overflow hidden overflow hidden
.item_img .item_img
_wh(98%,91px) _wh(98%,70px)
margin 0 auto 5px auto margin 0 auto 5px auto
border 1px solid #393F51 border 1px solid #393F51
background-color $gray background-color $gray
@@ -573,20 +578,20 @@ export default {
width 100% width 100%
padding 4px 0 padding 4px 0
.info_block .info_block
_wh(100%, 80px) _wh(100%, 98px)
padding 4px 0 padding 4px 0
overflow hidden overflow hidden
.info_table_block .info_table_block
width 100% width 100%
_fj(row,,flex-start) _fj(row,,flex-start)
.info_table .info_table
width 80px width 60px
max-height 36px max-height 54px
overflow hidden overflow hidden
_font(12px,18px,,100,left) _font(12px,18px,,100,left)
.info_data .info_data
width calc(100% - 80px) width calc(100% - 64px)
max-height 36px max-height 54px
overflow hidden overflow hidden
_font(12px,18px,,200,right) _font(12px,18px,,200,right)
word-break break-all word-break break-all
@@ -701,21 +706,22 @@ export default {
border-bottom none border-bottom none
.tag_block .tag_block
position fixed position fixed
bottom 10px bottom 20px
right 54px right 54px
_fj(row, flex-end)
.tag_type .tag_type
display inline-block height 16px
padding-left 30px _fj(row)
margin-left 30px
.type_color .type_color
display inline-block width 14px
width 10px height 14px
height 10px
border-radius 50% border-radius 50%
margin-right 10px
.tag_text .tag_text
display inline-block _font(16px,16px,,,left)
_font(14px,20px,,,left)
.green .green
background-color $green background-color $green2
.yellow .yellow
background-color $yellow background-color $yellow
.gray .gray
@@ -723,7 +729,7 @@ export default {
.orange .orange
background-color $orange background-color $orange
.fgreen .fgreen
color $green color $green2
.fyellow .fyellow
color $yellow color $yellow
.fgray .fgray