no message
This commit is contained in:
蔡玲
BIN
src/images/area_a.jpg
Normal file
BIN
src/images/area_a.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 72 KiB |
BIN
src/images/area_b.jpg
Normal file
BIN
src/images/area_b.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 69 KiB |
@@ -39,7 +39,39 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="r_wraper"></div>
|
||||
<div class="relative r_wraper">
|
||||
<div class="absolute status_wrap">
|
||||
<div class="status_item">
|
||||
<div class="status_tip green"></div>
|
||||
<div class="status_name">运行中</div>
|
||||
</div>
|
||||
<div class="status_item">
|
||||
<div class="status_tip yellow"></div>
|
||||
<div class="status_name">待机</div>
|
||||
</div>
|
||||
<div class="status_item">
|
||||
<div class="status_tip gray"></div>
|
||||
<div class="status_name">关机</div>
|
||||
</div>
|
||||
<div class="status_item">
|
||||
<div class="status_tip red"></div>
|
||||
<div class="status_name">故障</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="area_t_a">1#车间监控</div>
|
||||
<div class="relative area_a">
|
||||
<div class="absolute hw_wrap">
|
||||
<div class="hw_item green" v-for="(e, i) in dataList" :key="i"></div>
|
||||
</div>
|
||||
<div class="absolute hw_wrap hw_wrap_1">
|
||||
<div class="hw_item green" v-for="(e, i) in dataList" :key="i"></div>
|
||||
</div>
|
||||
<div class="absolute hw_wrap hw_wrap_2">
|
||||
<div class="hw_item green" v-for="(e, i) in dataList" :key="i"></div>
|
||||
</div>
|
||||
<div class="absolute status_icon green" :style="{'left': e.x, 'top': e.y}" v-for="(e, i) in machineData" :key="i"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="n_wraper">
|
||||
<div class="l_wraper">
|
||||
@@ -73,7 +105,33 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="r_wraper"></div>
|
||||
<div class="relative r_wraper">
|
||||
<div class="absolute status_wrap">
|
||||
<div class="status_item">
|
||||
<div class="status_tip green"></div>
|
||||
<div class="status_name">运行中</div>
|
||||
</div>
|
||||
<div class="status_item">
|
||||
<div class="status_tip yellow"></div>
|
||||
<div class="status_name">待机</div>
|
||||
</div>
|
||||
<div class="status_item">
|
||||
<div class="status_tip gray"></div>
|
||||
<div class="status_name">关机</div>
|
||||
</div>
|
||||
<div class="status_item">
|
||||
<div class="status_tip red"></div>
|
||||
<div class="status_name">故障</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="area_t_a area_t_b">2#车间监控</div>
|
||||
<div class="relative area_b">
|
||||
<div class="absolute hw_wrap hw_wrap_3">
|
||||
<div class="hw_item green" v-for="(e, i) in dataList1" :key="i"></div>
|
||||
</div>
|
||||
<div class="absolute status_icon green" :style="{'left': e.x, 'top': e.y}" v-for="(e, i) in machineData1" :key="i"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -87,15 +145,12 @@ export default {
|
||||
return {
|
||||
interTime: this.$store.getters.setTime,
|
||||
timer: null,
|
||||
materList: [], // 原料库存
|
||||
curList: [], // 当日出入
|
||||
historyList: [], // 历史分析
|
||||
statisList: [], // 当日生产统计
|
||||
loadList: [], // 当日车间上下料
|
||||
taskList: [], // 当日搬运任务
|
||||
agvList: [],
|
||||
rgvList: [],
|
||||
stateStatistics: {}, // 设备运行统计
|
||||
dataList: [],
|
||||
dataList1: [],
|
||||
machineData: [{x: '10%', y: '10%'}, {x: '10%', y: '32%'}, {x: '10%', y: '53%'}, {x: '10%', y: '79%'}, {x: '75%', y: '71%'}, {x: '80%', y: '71%'}, {x: '85.4%', y: '71%'}, {x: '90.4%', y: '71%'}, {x: '95.6%', y: '71%'}],
|
||||
machineData1: [{x: '10%', y: '19%'}, {x: '10%', y: '36%'}, {x: '10%', y: '63%'}, {x: '10%', y: '81%'}],
|
||||
myChart1: null,
|
||||
myChart2: null,
|
||||
myChart3: null,
|
||||
@@ -104,6 +159,8 @@ export default {
|
||||
},
|
||||
created () {
|
||||
this.refresh()
|
||||
this.dataList = new Array(50)
|
||||
this.dataList1 = new Array(140)
|
||||
},
|
||||
mounted () {
|
||||
this.myChart1 = this.$echarts.init(this.$refs.echartsRef1)
|
||||
@@ -157,7 +214,6 @@ export default {
|
||||
},
|
||||
async _getAllBigScreen () {
|
||||
let res = await getAllBigScreen()
|
||||
this.materList = [...res.inventoryAnalysis]
|
||||
this.curList = [...res.inventoryIOAnalysis]
|
||||
res.stateStatistics.fourState.map(el => {
|
||||
let rate = Number(el.status) * 100 / Number(res.stateStatistics.count)
|
||||
|
||||
@@ -39,18 +39,36 @@
|
||||
.n_wraper
|
||||
width 100%
|
||||
height calc(50% - 4px)
|
||||
background-color #082B64
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
&:first-child
|
||||
margin-bottom 8px
|
||||
.l_wraper
|
||||
width 24%
|
||||
width calc(100% - 767px)
|
||||
height 100%
|
||||
padding 0 4px
|
||||
background-color #141828
|
||||
.r_wraper
|
||||
width 75%
|
||||
width 760px
|
||||
height 100%
|
||||
background center / 100% 100% url('../../../images/area_a.png') no-repeat
|
||||
padding 4px
|
||||
background-color #141828
|
||||
.area_t_a
|
||||
font-size 14px
|
||||
color #fff
|
||||
text-align center
|
||||
line-height 30px
|
||||
height calc(100% - 165px)
|
||||
.area_a
|
||||
width 752px
|
||||
height 155px
|
||||
margin 0 auto
|
||||
background center / 100% 100% url('../../../images/area_a.jpg') no-repeat
|
||||
.area_t_b
|
||||
height calc(100% - 160px)
|
||||
.area_b
|
||||
height 150px
|
||||
background center / 100% 100% url('../../../images/area_b.jpg') no-repeat
|
||||
.item_wraper
|
||||
width 100%
|
||||
height calc(50% - 2px)
|
||||
@@ -69,24 +87,19 @@
|
||||
font-weight: 400;
|
||||
color: #fff;
|
||||
line-height 12px
|
||||
.title_wraper_1
|
||||
background-image url('../../../images/bg-title_1_s.png')
|
||||
.content_wraper
|
||||
width 100%
|
||||
height calc(100% - 24px)
|
||||
padding 4px
|
||||
background-color #15347b
|
||||
padding 6px
|
||||
.content_wraper_2
|
||||
padding 0
|
||||
display flex
|
||||
justify-content space-between
|
||||
.pie_wraper
|
||||
width 50%
|
||||
width 48%
|
||||
height 100%
|
||||
// padding 1px 0 0 1px
|
||||
// background left center / 111px 111px url('../../../images/pie-bg_2_s.png') no-repeat
|
||||
.pie_legend
|
||||
width 50%
|
||||
width 52%
|
||||
height 100%
|
||||
display flex
|
||||
flex-direction row
|
||||
@@ -95,7 +108,7 @@
|
||||
flex-wrap: wrap
|
||||
.pie_legend_item
|
||||
width 50%
|
||||
padding 0 0px 2px 10px
|
||||
padding 0 0 0 10px
|
||||
.pie_legend_txt_1
|
||||
font-size: 8px;
|
||||
line-height: 8px
|
||||
@@ -191,4 +204,51 @@
|
||||
height 14px
|
||||
.state_name
|
||||
width 100%
|
||||
height 20px
|
||||
height 20px
|
||||
.hw_wrap
|
||||
width: 60px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between
|
||||
left: 60.79%;
|
||||
top: 7%;
|
||||
.hw_wrap_1
|
||||
top: 36%;
|
||||
.hw_wrap_2
|
||||
top: 66%;
|
||||
.hw_wrap_3
|
||||
left: 73.54%
|
||||
top: 13%;
|
||||
.hw_item
|
||||
width: 5px;
|
||||
height: 7px;
|
||||
margin: 0.5px;
|
||||
.status_wrap
|
||||
top 10px
|
||||
right 10px
|
||||
display flex
|
||||
.status_item
|
||||
display flex
|
||||
align-items center
|
||||
margin-left 10px
|
||||
.status_tip
|
||||
width 6px
|
||||
height 6px
|
||||
border-radius 1px
|
||||
.green
|
||||
background-color #11ff0d
|
||||
.yellow
|
||||
background-color #fdfd0f
|
||||
.gray
|
||||
background-color #bfbfbf
|
||||
.red
|
||||
background-color #ff1016
|
||||
.status_name
|
||||
margin-left 5px
|
||||
font-size 10px
|
||||
color #fff
|
||||
.status_icon
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border-radius: 50%;
|
||||
border: 4px solid rgba(22, 52, 22, 80%);
|
||||
@@ -84,7 +84,7 @@ body {
|
||||
-ms-user-select:none;/*IE10*/
|
||||
-khtml-user-select:none;/*早期浏览器*/
|
||||
user-select:none;
|
||||
background-color: #133471;
|
||||
background: linear-gradient(to right, #13296f, #1546b8, #13296f);
|
||||
}
|
||||
|
||||
div, p {
|
||||
|
||||
Reference in New Issue
Block a user