需求修改
This commit is contained in:
@@ -132,3 +132,7 @@ div, p {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.jcse {
|
||||
justify-content: space-evenly !important;
|
||||
-webkit-box-pack: space-evenly !important;
|
||||
}
|
||||
BIN
src/assets/images/screen1/item_8.png
Normal file
BIN
src/assets/images/screen1/item_8.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.3 KiB |
@@ -91,7 +91,8 @@ export const homepageData = () => {
|
||||
'materialCode': 'WGBMMC00002MGL8343P10-K23Z006',
|
||||
'completed': '3.65吨'
|
||||
}
|
||||
]
|
||||
],
|
||||
mainEquipmentStatus: [{devicename: '压机1', status: '运行', material: '镁碳砖DLMT-1025/023Z003'}, {devicename: '压机2', status: '暂停', material: '镁碳砖DLMT-1025/023Z003'}, {devicename: '压机3', status: '停机', material: '镁碳砖DLMT-1025/023Z003'}, {devicename: '压机4', status: '故障', material: '镁碳砖DLMT-1025/023Z003'}, {devicename: '压机5', status: '运行', material: '镁碳砖DLMT-1025/023Z003'}, {devicename: '压机1', status: '运行', material: '镁碳砖DLMT-1025/023Z003'}, {devicename: '压机2', status: '运行', material: '镁碳砖DLMT-1025/023Z003'}, {devicename: '压机3', status: '运行', material: '镁碳砖DLMT-1025/023Z003'}, {devicename: '压机4', status: '运行', material: '镁碳砖DLMT-1025/023Z003'}, {devicename: '压机5', status: '运行', material: '镁碳砖DLMT-1025/023Z003'}, {devicename: '压机1', status: '运行', material: '镁碳砖DLMT-1025/023Z003'}, {devicename: '压机2', status: '运行', material: '镁碳砖DLMT-1025/023Z003'}, {devicename: '压机3', status: '运行', material: '镁碳砖DLMT-1025/023Z003'}, {devicename: '压机4', status: '运行', material: '镁碳砖DLMT-1025/023Z003'}, {devicename: '压机5', status: '运行', material: '镁碳砖DLMT-1025/023Z003'}, {devicename: '压机1', status: '运行', material: '镁碳砖DLMT-1025/023Z003'}, {devicename: '压机2', status: '运行', material: '镁碳砖DLMT-1025/023Z003'}, {devicename: '压机3', status: '运行', material: '镁碳砖DLMT-1025/023Z003'}, {devicename: '压机4', status: '运行', material: '镁碳砖DLMT-1025/023Z003'}, {devicename: '压机5', status: '运行', material: '镁碳砖DLMT-1025/023Z003'}]
|
||||
}
|
||||
return res
|
||||
}
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
</t-header>
|
||||
<div class="container" ref="container">
|
||||
<div class="left_wrap">
|
||||
<div class="item_wrap">
|
||||
<!-- <div class="item_wrap">
|
||||
<div class="item_tip">
|
||||
<div class="item_tip_left">当前设备情况</div>
|
||||
</div>
|
||||
@@ -24,6 +24,32 @@
|
||||
<div class="item_content_1" style="padding-bottom: 0">
|
||||
<div id="echart_d2" style="width: 100%; height: 100%"></div>
|
||||
</div>
|
||||
</div> -->
|
||||
<div class="item_tip">
|
||||
<div class="item_tip_left">主要设备运行情况</div>
|
||||
</div>
|
||||
<div class="item_content_2">
|
||||
<div class="scroll_wrap">
|
||||
<ul class="scroll_tab_1 scroll_tab_2">
|
||||
<li>生产设备</li>
|
||||
<li>运行情况</li>
|
||||
<li>当前生产物料名称</li>
|
||||
</ul>
|
||||
<div class="scroll_container">
|
||||
<vue-seamless-scroll :data="equipmentProductionStatistics" :class-option="defaultOption2">
|
||||
<ul class="scroll-ul_1 scroll-ul_2">
|
||||
<li v-for="(e, i) in mainEquipmentStatus" :key="'device' + i">
|
||||
<div class="scroll-ul_div">{{e.devicename}}</div>
|
||||
<div class="scroll-ul_div jcse">
|
||||
<div class="state_icon" :class = "{'bg_col_1': e.status === '运行', 'bg_col_2': e.status === '暂停', 'bg_col_3': e.status === '停机', 'bg_col_4': e.status === '故障'}"></div>
|
||||
<div>{{e.status}}</div>
|
||||
</div>
|
||||
<div class="scroll-ul_div">{{e.material}}</div>
|
||||
</li>
|
||||
</ul>
|
||||
</vue-seamless-scroll>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="center_wrap">
|
||||
@@ -77,26 +103,16 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="item_inner_h2">
|
||||
<div class="item_inner_h2_inner">
|
||||
<div class="item_inner_h2_inner item_inner_h2_inner_2">
|
||||
<div class="item_inner_h2_inner_l">
|
||||
<span><i class="color2"></i></span>
|
||||
<span>静置中</span>
|
||||
<span>当前重量</span>
|
||||
</div>
|
||||
<div class="item_inner_h2_inner_r">
|
||||
<span>{{stand.onStanding}}</span>
|
||||
<span>吨</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item_inner_h2_inner">
|
||||
<div class="item_inner_h2_inner_l">
|
||||
<span><i class="color1"></i></span>
|
||||
<span>已完成</span>
|
||||
</div>
|
||||
<div class="item_inner_h2_inner_r">
|
||||
<span>{{stand.completed}}</span>
|
||||
<span>吨</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item_inner_wrap">
|
||||
@@ -144,7 +160,7 @@
|
||||
<div class="item_inner_h2_inner">
|
||||
<div class="item_inner_h2_inner_l">
|
||||
<span><i class="color2"></i></span>
|
||||
<span>计划量</span>
|
||||
<span>入窑量</span>
|
||||
</div>
|
||||
<div class="item_inner_h2_inner_r">
|
||||
<span>{{dry.planned}}</span>
|
||||
@@ -154,7 +170,7 @@
|
||||
<div class="item_inner_h2_inner">
|
||||
<div class="item_inner_h2_inner_l">
|
||||
<span><i class="color1"></i></span>
|
||||
<span>已生产</span>
|
||||
<span>出窑量</span>
|
||||
</div>
|
||||
<div class="item_inner_h2_inner_r">
|
||||
<span>{{dry.completed}}</span>
|
||||
@@ -209,14 +225,14 @@
|
||||
<li>物料名称</li>
|
||||
<li>完成</li>
|
||||
</ul>
|
||||
<div class="scroll_container_1">
|
||||
<div class="scroll_container">
|
||||
<vue-seamless-scroll :data="equipmentProductionStatistics" :class-option="defaultOption1">
|
||||
<ul class="scroll-ul_1">
|
||||
<li v-for="(e, i) in equipmentProductionStatistics" :key="i">
|
||||
<div class="scroll-ul_1_div">{{e.equipment}}</div>
|
||||
<div class="scroll-ul_1_div">{{e.materialCode}}</div>
|
||||
<div class="scroll-ul_1_div">{{e.materialName}}</div>
|
||||
<div class="scroll-ul_1_div">{{e.completed}}</div>
|
||||
<div class="scroll-ul_div">{{e.equipment}}</div>
|
||||
<div class="scroll-ul_div">{{e.materialCode}}</div>
|
||||
<div class="scroll-ul_div">{{e.materialName}}</div>
|
||||
<div class="scroll-ul_div">{{e.completed}}</div>
|
||||
</li>
|
||||
</ul>
|
||||
</vue-seamless-scroll>
|
||||
@@ -260,7 +276,8 @@ export default {
|
||||
press: {},
|
||||
dry: {},
|
||||
sort: {},
|
||||
equipmentProductionStatistics: []
|
||||
equipmentProductionStatistics: [],
|
||||
mainEquipmentStatus: []
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
@@ -277,6 +294,20 @@ export default {
|
||||
singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
|
||||
waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
|
||||
}
|
||||
},
|
||||
defaultOption2 () {
|
||||
return {
|
||||
timer1: null,
|
||||
timer2: null,
|
||||
step: 0.4, // 数值越大速度滚动越快
|
||||
limitMoveNum: 31, // 开始无缝滚动的数据量 this.dataList.length
|
||||
hoverStop: true, // 是否开启鼠标悬停stop
|
||||
direction: 1, // 0向下 1向上 2向左 3向右
|
||||
openWatch: true, // 开启数据实时监控刷新dom
|
||||
singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
|
||||
singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
|
||||
waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
@@ -677,15 +708,15 @@ export default {
|
||||
async _homepageData () {
|
||||
let res = await homepageData()
|
||||
// 当前设备情况
|
||||
this.running = res.currentEquipmentCondition.running
|
||||
this.pausing = res.currentEquipmentCondition.pausing
|
||||
this.shutdown = res.currentEquipmentCondition.shutdown
|
||||
this.inTrouble = res.currentEquipmentCondition.inTrouble
|
||||
this.setEchart1()
|
||||
// this.running = res.currentEquipmentCondition.running
|
||||
// this.pausing = res.currentEquipmentCondition.pausing
|
||||
// this.shutdown = res.currentEquipmentCondition.shutdown
|
||||
// this.inTrouble = res.currentEquipmentCondition.inTrouble
|
||||
// this.setEchart1()
|
||||
// 每月故障统计
|
||||
this.currentMonth = res.monthlyFailureStatistics.currentMonth
|
||||
this.average = res.monthlyFailureStatistics.average
|
||||
this.setEchart2()
|
||||
// this.currentMonth = res.monthlyFailureStatistics.currentMonth
|
||||
// this.average = res.monthlyFailureStatistics.average
|
||||
// this.setEchart2()
|
||||
// 工序生产统计
|
||||
this.mix = res.dailyProductionStatistics.mix
|
||||
this.stand = res.dailyProductionStatistics.stand
|
||||
@@ -694,6 +725,7 @@ export default {
|
||||
this.sort = res.dailyProductionStatistics.sort
|
||||
// 设备生产统计
|
||||
this.equipmentProductionStatistics = [...res.equipmentProductionStatistics]
|
||||
this.mainEquipmentStatus = [...res.mainEquipmentStatus]
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -776,7 +808,7 @@ export default {
|
||||
border-bottom .01rem solid rgba(8,205,248,0.3)
|
||||
li
|
||||
float left
|
||||
width 30%
|
||||
width 32%
|
||||
font-size .14rem
|
||||
line-height .4rem
|
||||
color #78B1DE
|
||||
@@ -788,10 +820,16 @@ export default {
|
||||
overflow hidden
|
||||
box-sizing border-box
|
||||
&:nth-child(1)
|
||||
width 20%
|
||||
width 16%
|
||||
&:nth-child(4)
|
||||
width 20%
|
||||
.scroll_container_1
|
||||
.scroll_tab_2 li
|
||||
width 20%
|
||||
&:nth-child(1)
|
||||
width 20%
|
||||
&:nth-child(3)
|
||||
width 60%
|
||||
.scroll_container
|
||||
width 100%
|
||||
height calc(100% - .4rem)
|
||||
overflow hidden
|
||||
@@ -803,7 +841,7 @@ export default {
|
||||
&:nth-child(even)
|
||||
background rgba(1,24,52,0.60)
|
||||
box-shadow inset 0px 1px 0px 0px rgba(13,89,115,0.3)
|
||||
.scroll-ul_1_div
|
||||
.scroll-ul_div
|
||||
float left
|
||||
width 32%
|
||||
height 100%
|
||||
@@ -822,6 +860,15 @@ export default {
|
||||
width 16%
|
||||
&:nth-child(4)
|
||||
width 20%
|
||||
.scroll-ul_2
|
||||
li
|
||||
height .4rem
|
||||
.scroll-ul_div
|
||||
width 20%
|
||||
&:nth-child(1)
|
||||
width 20%
|
||||
&:nth-child(3)
|
||||
width 60%
|
||||
.item_inner_wrap
|
||||
width 100%
|
||||
padding-bottom 4%
|
||||
@@ -877,6 +924,9 @@ export default {
|
||||
justify-content space-between
|
||||
align-items center
|
||||
background center bottom / 100% 100% url(../../../assets/images/screen1/item_5.png) no-repeat
|
||||
.item_inner_h2_inner_2
|
||||
width 100%
|
||||
background-image url(../../../assets/images/screen1/item_8.png)
|
||||
.item_inner_h2_inner_l
|
||||
width 50%
|
||||
height 100%
|
||||
@@ -952,4 +1002,19 @@ export default {
|
||||
background: radial-gradient(circle at 7.2% 13.6%, rgb(37, 249, 245) 0%, #004c92 90%)
|
||||
+a
|
||||
margin-left .2rem
|
||||
.state_icon
|
||||
width .14rem
|
||||
height .06rem
|
||||
.bg_col_1
|
||||
background-color #30EBC9
|
||||
box-shadow 0px 0px 8px 0px #30EBC9
|
||||
.bg_col_2
|
||||
background-color #E2BB0E
|
||||
box-shadow 0px 0px 8px 0px #E2BB0E
|
||||
.bg_col_3
|
||||
background-color #516282
|
||||
box-shadow 0px 0px 8px 0px #516282
|
||||
.bg_col_4
|
||||
background-color #F96700
|
||||
box-shadow 0px 0px 8px 0px #F96700
|
||||
</style>
|
||||
|
||||
@@ -20,7 +20,7 @@
|
||||
</div>
|
||||
<!-- <div class="c-title c-right"> -->
|
||||
<div class="cbox">
|
||||
<div>今日干燥量：</div>
|
||||
<div>今日出窑成品数量：</div>
|
||||
<div class="num">
|
||||
<div class="bg" v-for="(item, i) in showNum2" :key="i" :class="{dot: item === '.'}">{{item}}</div>
|
||||
</div>
|
||||
@@ -60,7 +60,7 @@
|
||||
</div>
|
||||
<div class="con03">
|
||||
<!-- <div class="title">成品计划完成率</div> -->
|
||||
<div class="title"><span class="dotIncon"></span><span class="tltxt">成品计划完成率</span></div>
|
||||
<div class="title"><span class="dotIncon"></span><span class="tltxt">成品计划完成情况</span></div>
|
||||
<div class="item_content_1" style="marginTop: 60px;">
|
||||
<div id="echart_d1" style="width: 100%; height: 100%"></div>
|
||||
</div>
|
||||
|
||||
@@ -340,7 +340,7 @@
|
||||
</div>
|
||||
<div class="bottom_wrapper_l">
|
||||
<div class="block_h2">
|
||||
<h2>成型库存</h2>
|
||||
<h2>半成品库存</h2>
|
||||
</div>
|
||||
<div class="list_scroll_title">
|
||||
<span>货位</span><span>物料编码</span><span>物料名称</span><span>库存数(块)</span><span>托盘号</span><span>入库时间</span>
|
||||
|
||||
Reference in New Issue
Block a user