add 数据样式
This commit is contained in:
x
14294
package-lock.json
generated
14294
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
1050
src/pages/DeviceMonitor copy.vue
Normal file
1050
src/pages/DeviceMonitor copy.vue
Normal file
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
1439
src/pages/HomePage copy.vue
Normal file
1439
src/pages/HomePage copy.vue
Normal file
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
877
src/pages/LogisticsTech copy.vue
Normal file
877
src/pages/LogisticsTech copy.vue
Normal file
@@ -0,0 +1,877 @@
|
||||
<template>
|
||||
<section>
|
||||
<t-header index='3'></t-header>
|
||||
<div class="content clearfix">
|
||||
<div class="fl block_left">
|
||||
<div class="block_1">
|
||||
<h2>{{machine !== '' ? machine : '混料'}}工序情况</h2>
|
||||
<h3 v-show="machine !== ''">{{machine !== '' ? machine : '混料'}}设备</h3>
|
||||
<div id="echart_item" class="echart_item">
|
||||
<div id="echart_d1" style="width: 100%;height:270px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="block_2">
|
||||
<h2>当天物料数量</h2>
|
||||
<div class="scroll_item">
|
||||
<ul class="scroll_tab">
|
||||
<li v-if="code !== '0002'">设备号</li>
|
||||
<li v-if="code === '0002'">货位编码</li>
|
||||
<li>物料号</li>
|
||||
<li>物料名称</li>
|
||||
<li>完成重量</li>
|
||||
</ul>
|
||||
<div class="scroll_container">
|
||||
<vue-seamless-scroll :data="produceRows" :class-option="defaultOption">
|
||||
<ul class="content-block-scroll-ul">
|
||||
<li v-for="(e, i) in produceRows" :key="i">
|
||||
<div v-if="code !== '0002'"><p>{{e.device_name}}</p></div>
|
||||
<div v-if="code === '0002'"><p>{{e.struct_code}}</p></div>
|
||||
<div><p>{{e.material_code}}</p></div>
|
||||
<div><p>{{e.material_name}}</p></div>
|
||||
<div><p>{{e.produce_qty}}吨</p></div>
|
||||
</li>
|
||||
</ul>
|
||||
</vue-seamless-scroll>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="fr block_right">
|
||||
<div v-if="produceData.length > 0" class="circles_block clearfix">
|
||||
<div class="fl circles_item" @click="getData(produceData[4])">
|
||||
<t-circle>
|
||||
<div class="circles_rel">
|
||||
<div class="circle_s">{{produceData[4].ivt__qty}}</div>
|
||||
<p>{{produceData[4].workprocedure_name}}</p>
|
||||
</div>
|
||||
</t-circle>
|
||||
</div>
|
||||
<div class="fl arrow">
|
||||
<div class="arrow_l">
|
||||
<img src="../assets/images/lt_arrow.png">
|
||||
</div>
|
||||
</div>
|
||||
<div class="fl circles_item" @click="getData(produceData[3])">
|
||||
<t-circle>
|
||||
<div class="circles_rel">
|
||||
<div class="circle_s">{{produceData[3].ivt__qty}}</div>
|
||||
<p>{{produceData[3].workprocedure_name}}</p>
|
||||
</div>
|
||||
</t-circle>
|
||||
</div>
|
||||
<div class="fl arrow">
|
||||
<div class="arrow_l">
|
||||
<img src="../assets/images/lt_arrow.png">
|
||||
</div>
|
||||
</div>
|
||||
<div class="fl circles_item" @click="getData(produceData[2])">
|
||||
<t-circle>
|
||||
<div class="circles_rel">
|
||||
<div class="circle_s">{{produceData[2].ivt__qty}}</div>
|
||||
<p>{{produceData[2].workprocedure_name}}</p>
|
||||
</div>
|
||||
</t-circle>
|
||||
</div>
|
||||
<div class="fl arrow arrow2">
|
||||
<div class="arrow_l">
|
||||
<img src="../assets/images/lt_arrow.png">
|
||||
</div>
|
||||
<div class="arrow_r">
|
||||
<img src="../assets/images/lt_arrow_r.png">
|
||||
</div>
|
||||
</div>
|
||||
<div class="fl circles_item" @click="getData(produceData[1])">
|
||||
<t-circle>
|
||||
<div class="circles_rel">
|
||||
<div class="circle_s">{{produceData[1].ivt__qty}}</div>
|
||||
<p>{{produceData[1].workprocedure_name}}</p>
|
||||
</div>
|
||||
</t-circle>
|
||||
</div>
|
||||
<div class="fl arrow">
|
||||
<div class="arrow_l">
|
||||
<img src="../assets/images/lt_arrow.png">
|
||||
</div>
|
||||
</div>
|
||||
<div class="fl circles_item" @click="getData(produceData[0])">
|
||||
<t-circle>
|
||||
<div class="circles_rel">
|
||||
<div class="circle_s">{{produceData[0].ivt__qty}}</div>
|
||||
<p>{{produceData[0].workprocedure_name}}</p>
|
||||
</div>
|
||||
</t-circle>
|
||||
</div>
|
||||
<div class="fl arrow">
|
||||
<div class="arrow_l">
|
||||
<img src="../assets/images/lt_arrow.png">
|
||||
</div>
|
||||
</div>
|
||||
<div class="fl circles_item">
|
||||
<t-circle>
|
||||
<div class="circles_rel">
|
||||
<div class="circle_s circle_ss">配料</div>
|
||||
</div>
|
||||
</t-circle>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="kilnjo.length > 0" class="process_block">
|
||||
<div class="process_block_in">
|
||||
<div class="process_f1 flexcenter">
|
||||
<div class="machine_bg_1 flexcenter tdborder">
|
||||
<div class="machines machine_1" :class="['m1_status_yellow', 'm1_status_green', 'm1_status_orange', 'm1_status_gray'][Number(jxsjo.device_status) - 1]" @click="getData(produceData[4])">
|
||||
<p>{{jxsjo.device_name}}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="prarrow_bg_1 flexcenter">
|
||||
<div class="arrows_block">
|
||||
<p>成品</p>
|
||||
<div class="prarrow_1"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="process_f1 fj">
|
||||
<div class="process_line flexcenter tdborder">
|
||||
<p>叠托</p>
|
||||
<p>（空托盘存储线）</p>
|
||||
</div>
|
||||
<div class="prarrow_2">空托盘</div>
|
||||
<div class="machines_bg_1 tdborder">
|
||||
<div class="l2_machine mgt3 mgb14">
|
||||
<div class="machines machine_2" :class="['m1_status_yellow', 'm1_status_green', 'm1_status_orange', 'm1_status_gray'][Number(kilnjo[0].device_status) - 1]" @click="getData(produceData[3])"></div>
|
||||
<p>{{kilnjo[0].device_name}}</p>
|
||||
<div class="bedone">
|
||||
<p>{{kilnjo[0].percentage}}<br>%</p>
|
||||
<div class="percent"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="l2_machine mgb08">
|
||||
<div class="machines machine_2" :class="['m1_status_yellow', 'm1_status_green', 'm1_status_orange', 'm1_status_gray'][Number(kilnjo[1].device_status) - 1]" @click="getData(produceData[3])"></div>
|
||||
<p>{{kilnjo[1].device_name}}</p>
|
||||
<div class="bedone">
|
||||
<p>{{kilnjo[1].percentage}}<br>%</p>
|
||||
<div class="percent"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="l2_machine l2_machine_n mgb08">
|
||||
<div class="machine_none"></div>
|
||||
<div class="machines machine_3" :class="['m2_status_yellow', 'm2_status_green', 'm2_status_orange', 'm2_status_gray'][Number(kilnjo[2].device_status) - 1]" @click="getData(produceData[3])"></div>
|
||||
<p>{{kilnjo[2].device_name}}</p>
|
||||
</div>
|
||||
<div class="l2_machine l2_machine_n mgb08">
|
||||
<div class="machine_none"></div>
|
||||
<div class="machines machine_3" :class="['m2_status_yellow', 'm2_status_green', 'm2_status_orange', 'm2_status_gray'][Number(kilnjo[3].device_status) - 1]" @click="getData(produceData[3])"></div>
|
||||
<p>{{kilnjo[3].device_name}}</p>
|
||||
</div>
|
||||
<div class="l2_machine l2_machine_n mgb08 hide">
|
||||
<div class="machine_none"></div>
|
||||
<div class="machine machine_3"></div>
|
||||
<p>3号窑</p>
|
||||
</div>
|
||||
<div class="l2_machine l2_machine_n mgb14 hide">
|
||||
<div class="machine_none"></div>
|
||||
<div class="machine machine_3"></div>
|
||||
<p>4号窑</p>
|
||||
</div>
|
||||
<div class="l2_machine mgb14 hide">
|
||||
<div class="machines machine_2"></div>
|
||||
<p>准备<br>车道</p>
|
||||
<div class="bedone">
|
||||
<p>50<br>%</p>
|
||||
<div class="percent"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="l2_machine mgb3 hide">
|
||||
<div class="machines machine_2"></div>
|
||||
<p>空窑<br>车道</p>
|
||||
<div class="bedone">
|
||||
<p>50<br>%</p>
|
||||
<div class="percent"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="prarrow_bg_2">
|
||||
<div class="prarrow_bg_2_top">
|
||||
<p>空托盘</p>
|
||||
<div class="prarrow_4"></div>
|
||||
</div>
|
||||
<div class="prarrow_bg_2_bottom flexcenter">
|
||||
<div class="arrows_block">
|
||||
<p class='pl10'>合格品托盘</p>
|
||||
<div class="prarrow_1"></div>
|
||||
<div class="fr flexcenter prarrow_3">不<br>良<br>品</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="process_f2">
|
||||
<div class="machine_bg_2 tdborder">
|
||||
<div class="machines machine_1 machine_4" :class="['m3_status_yellow', 'm3_status_green', 'm3_status_orange', 'm3_status_gray'][Number(e.device_status) - 1]" v-for="(e, i) in pressjo" :key="i" @click="getData(produceData[2])">
|
||||
<p>{{e.device_name}}</p>
|
||||
</div>
|
||||
<div class="machines machine_1 machine_4 hide">
|
||||
<p>压机7</p>
|
||||
</div>
|
||||
<div class="machines machine_1 machine_4 hide">
|
||||
<p>压机8</p>
|
||||
</div>
|
||||
<div class="machines machine_1 machine_4 hide">
|
||||
<p>压机9</p>
|
||||
</div>
|
||||
<div class="machines machine_1 machine_4 hide">
|
||||
<p>压机10</p>
|
||||
</div>
|
||||
<div class="machines machine_1 machine_4 hide">
|
||||
<p>压机11</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="prarrow_bg_3">
|
||||
<div class="prarrow_bg_2_top prarrow_bg_3_top">
|
||||
<p>空料盅</p>
|
||||
<div class="prarrow_5"></div>
|
||||
</div>
|
||||
<div class="prarrow_bg_3_bottom">
|
||||
<div class="prarrow_left flexcenter">
|
||||
<div class="arrows_block">
|
||||
<p class="pl20">困料盅</p>
|
||||
<div class="prarrow_1 mgb30"></div>
|
||||
<div class="prarrow_4"></div>
|
||||
<p class="pl20">退料盅</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="prarrow_mid flexcenter tdborder">
|
||||
<div class="machines machine_5" @click="getData(produceData[1])">
|
||||
<p>货架1</p>
|
||||
</div>
|
||||
<div class="machines machine_5 mgt80" @click="getData(produceData[1])">
|
||||
<p>货架2</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="prarrow_left flexcenter">
|
||||
<div class="arrows_block">
|
||||
<p class="pl20">混料盅</p>
|
||||
<div class="prarrow_1 mgb30"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="process_f2 fj">
|
||||
<div class="process_line flexcenter tdborder">
|
||||
<p>空罐区</p>
|
||||
</div>
|
||||
<div class="prarrow_2 prarrow_6">空料盅</div>
|
||||
<div class="machines_bg_1 flexcenter tdborder">
|
||||
<div class="machines machine_1 machine_7" :class="['m3_status_yellow', 'm3_status_green', 'm3_status_orange', 'm3_status_gray'][Number(e.device_status) - 1]" v-for="(e, i) in mixjo" :key="i" @click="getData(produceData[0])">
|
||||
<p>{{e.device_name}}</p>
|
||||
</div>
|
||||
<div class="machines machine_1 machine_7 hide">
|
||||
<p>混碾6</p>
|
||||
</div>
|
||||
<div class="machines machine_1 machine_7 hide">
|
||||
<p>混碾7</p>
|
||||
</div>
|
||||
<div class="machines machine_1 machine_7 hide">
|
||||
<p>混碾8</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="prarrow_bg_1 flexcenter">
|
||||
<div class="arrows_block">
|
||||
<div class="prarrow_1"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="process_f2 flexcenter">
|
||||
<div class="machine_bg_2 machine_bg_3 flexcenter tdborder">
|
||||
<div class="machines machine_5">
|
||||
<p>配料</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tag_block">
|
||||
<div class="tag_type">
|
||||
<div class="type_color green"></div>
|
||||
<div class="tag_text">运行</div>
|
||||
</div>
|
||||
<div class="tag_type">
|
||||
<div class="type_color yellow"></div>
|
||||
<div class="tag_text">暂停</div>
|
||||
</div>
|
||||
<div class="tag_type">
|
||||
<div class="type_color gray"></div>
|
||||
<div class="tag_text">停机</div>
|
||||
</div>
|
||||
<div class="tag_type">
|
||||
<div class="type_color orange"></div>
|
||||
<div class="tag_text">故障</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import THeader from '@components/header.vue'
|
||||
import TCircle from '@components/circle.vue'
|
||||
export default {
|
||||
name: 'LogisticsTech',
|
||||
components: {
|
||||
THeader,
|
||||
TCircle
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
interTime: this.$store.getters.setTime,
|
||||
timer: null,
|
||||
produceData: [],
|
||||
jxsjo: {},
|
||||
kilnjo: [],
|
||||
mixjo: [],
|
||||
pressjo: [],
|
||||
deviceRows: [],
|
||||
produceRows: [],
|
||||
code: '',
|
||||
machine: ''
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
defaultOption () {
|
||||
return {
|
||||
step: 0.2, // 数值越大速度滚动越快
|
||||
limitMoveNum: 3, // 开始无缝滚动的数据量 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 () {
|
||||
this.initData()
|
||||
this.refresh()
|
||||
},
|
||||
beforeDestroy () {
|
||||
clearInterval(this.timer)
|
||||
},
|
||||
methods: {
|
||||
refresh () {
|
||||
this.timer = setInterval(() => {
|
||||
// this.produceData = []
|
||||
// this.jxsjo = {}
|
||||
// this.kilnjo = []
|
||||
// this.mixjo = []
|
||||
// this.pressjo = []
|
||||
// this.deviceRows = []
|
||||
// this.produceRows = []
|
||||
// this.code = ''
|
||||
// this.machine = ''
|
||||
this.initData()
|
||||
}, this.interTime)
|
||||
},
|
||||
setEchart () {
|
||||
let nullData = []
|
||||
this.deviceRows.map(el => {
|
||||
nullData.push('')
|
||||
})
|
||||
let colors = ['#E2BB0E', '#30EBC9', '#F96700', '#516282', '#000']
|
||||
let option = {
|
||||
grid: {
|
||||
top: 30,
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
borderColor: '#ffffff',
|
||||
containLabel: true
|
||||
},
|
||||
legend: {
|
||||
top: 0,
|
||||
left: 'center',
|
||||
height: 14,
|
||||
textStyle: {
|
||||
color: '#ffffff',
|
||||
fontSize: 14,
|
||||
lineHeight: 20
|
||||
},
|
||||
itemGap: 20,
|
||||
itemWidth: 10,
|
||||
itemHeight: 10,
|
||||
icon: 'circle',
|
||||
data: []
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#909399',
|
||||
fontSize: 12,
|
||||
lineHeight: 12
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#909399'
|
||||
},
|
||||
data: []
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#909399'
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
type: 'dotted',
|
||||
color: 'rgba(255, 255, 255, 0.2)'
|
||||
}
|
||||
},
|
||||
max: 0
|
||||
},
|
||||
series: []
|
||||
}
|
||||
for (let i = 0; i < this.deviceRows.length; i++) {
|
||||
let nData = [].concat(nullData)
|
||||
nData[i] = this.deviceRows[i].device_qty
|
||||
option.legend.data.push(this.deviceRows[i].status_name)
|
||||
option.xAxis.data.push(this.deviceRows[i].status_name)
|
||||
option.yAxis.max = Math.max(option.yAxis.max, Number(this.deviceRows[i].device_qty))
|
||||
option.series.push({
|
||||
name: this.deviceRows[i].status_name,
|
||||
type: 'bar',
|
||||
barWidth: 10,
|
||||
barGap: '-100%',
|
||||
itemStyle: {
|
||||
normal: {
|
||||
show: true,
|
||||
color: colors[i]
|
||||
}
|
||||
},
|
||||
data: nData
|
||||
})
|
||||
}
|
||||
let echart = document.getElementById('echart_d1')
|
||||
let myChart = this.$echarts.init(echart)
|
||||
myChart.setOption(option)
|
||||
window.addEventListener('resize', function () {
|
||||
myChart.resize()
|
||||
})
|
||||
},
|
||||
initData () {
|
||||
let data = {
|
||||
'_SRVNAME': 'service.st.al.realivt',
|
||||
'_SRVMETHOD': 'queryInfo',
|
||||
'_DATA': JSON.stringify({
|
||||
accountId: '-1'
|
||||
})
|
||||
}
|
||||
this
|
||||
.$post(data)
|
||||
.then(res => {
|
||||
if (res.code === '1') {
|
||||
this.produceData = [...res.result.workprocedure_rows]
|
||||
this.jxsjo = res.result.jxsjo
|
||||
this.kilnjo = [...res.result.kilnjo]
|
||||
this.mixjo = [...res.result.mixjo]
|
||||
this.pressjo = [...res.result.pressjo]
|
||||
} else {
|
||||
this.toast(res.desc)
|
||||
}
|
||||
})
|
||||
},
|
||||
getData (obj) {
|
||||
let data = {
|
||||
'_SRVNAME': 'service.st.al.realivt',
|
||||
'_SRVMETHOD': 'queryInfoByWorkprocedure',
|
||||
'_DATA': JSON.stringify({
|
||||
accountId: '-1',
|
||||
workprocedure_code: obj.workprocedure_code
|
||||
})
|
||||
}
|
||||
this
|
||||
.$post(data)
|
||||
.then(res => {
|
||||
if (res.code === '1') {
|
||||
if (obj.workprocedure_code === '0002') {
|
||||
this.deviceRows = [...res.result.device_rows1]
|
||||
this.produceRows = [...res.result.produce_rows1]
|
||||
} else {
|
||||
this.deviceRows = [...res.result.device_rows2]
|
||||
this.produceRows = [...res.result.produce_rows2]
|
||||
}
|
||||
this.code = obj.workprocedure_code
|
||||
this.machine = obj.workprocedure_name
|
||||
this.setEchart()
|
||||
} else {
|
||||
this.toast(res.desc)
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
@import '~@css/mixin'
|
||||
.content
|
||||
_wh(100% , calc(100% - 84px))
|
||||
padding 37px .49rem
|
||||
.block_left
|
||||
_wh(3.73rem, 100%)
|
||||
.block_right
|
||||
_wh(calc(100% - 3.73rem), 100%)
|
||||
padding-left .76rem
|
||||
overflow hidden
|
||||
.block_1
|
||||
_wh(100%, 365px)
|
||||
_bis('../assets/images/lt_echartbg.png')
|
||||
h2
|
||||
_font(16px,22px,,,left)
|
||||
padding 17px 0 0 15px
|
||||
h3
|
||||
_font(18px,25px,#32C5FF)
|
||||
.echart_item
|
||||
width calc(100% - 0.4rem)
|
||||
margin 15px
|
||||
height 270px
|
||||
.block_2
|
||||
_wh(100%,calc(100% - 380px))
|
||||
margin-top 15px
|
||||
_bis('../assets/images/lt_bg2.png')
|
||||
h2
|
||||
_font(16px,22px,,,left)
|
||||
padding 17px 0 0 15px
|
||||
.scroll_item
|
||||
width 100%
|
||||
height calc(100% - 39px)
|
||||
padding 15px 15px 0 15px
|
||||
.scroll_tab
|
||||
li
|
||||
float left
|
||||
width 20%
|
||||
_font(12px,32px,rgba(255,255,255,0.60))
|
||||
background #262F52
|
||||
box-sizing border-box
|
||||
&:nth-child(3)
|
||||
width 40%
|
||||
.scroll_container
|
||||
width 100%
|
||||
height calc(100% - 36px)
|
||||
overflow hidden
|
||||
.content-block-scroll-ul
|
||||
li
|
||||
div
|
||||
float left
|
||||
width 20%
|
||||
height 40px
|
||||
overflow hidden
|
||||
white-space nowrap
|
||||
p
|
||||
_font(12px,40px,#fff)
|
||||
&:nth-child(3)
|
||||
width 40%
|
||||
&:nth-child(even) div
|
||||
background rgba(38,47,82,0.50)
|
||||
.circles_block
|
||||
_wh(1233px, 165px)
|
||||
margin 0 auto
|
||||
overflow hidden
|
||||
.circles_item
|
||||
width 88px
|
||||
.circles_rel
|
||||
position absolute
|
||||
top 7px
|
||||
left 0px
|
||||
width 78px
|
||||
p
|
||||
display inline-block
|
||||
width 78px
|
||||
_font(18px,36px,,300)
|
||||
.circle_s
|
||||
_wh(100%,78px)
|
||||
_font(16px,78px,#E9C10D)
|
||||
_bis('../assets/images/lt_syuan.png')
|
||||
.circle_ss
|
||||
font-size 18px
|
||||
_bis('../assets/images/lt_ssyuan.png')
|
||||
.arrow
|
||||
_fj(,center)
|
||||
_wh(calc((100% - 88px * 6) / 5), 87px)
|
||||
.arrow_l
|
||||
_wh(62px,9px)
|
||||
overflow hidden
|
||||
img
|
||||
_wh(100%, 100%)
|
||||
animation arrowtoleft .5s ease-in
|
||||
@keyframes arrowtoleft{
|
||||
0%{
|
||||
transform translateX(100%)
|
||||
}
|
||||
100%{
|
||||
transform translateX(0)
|
||||
}
|
||||
}
|
||||
.arrow_r
|
||||
_wh(62px,9px)
|
||||
margin-top 15px
|
||||
overflow hidden
|
||||
img
|
||||
_wh(100%,100%)
|
||||
animation arrowtoright .5s ease-in
|
||||
@keyframes arrowtoright{
|
||||
0%{
|
||||
transform translateX(-100%)
|
||||
}
|
||||
100%{
|
||||
transform translateX(0)
|
||||
}
|
||||
}
|
||||
.process_block
|
||||
_wh(100%, calc(100% - 165px))
|
||||
_fj(row)
|
||||
overflow hidden
|
||||
p
|
||||
_font(18px, 20px)
|
||||
.process_block_in
|
||||
_wh(100%, 100%)
|
||||
_fj(row,center)
|
||||
.process_f1
|
||||
position relative
|
||||
_wh(140px, 100%)
|
||||
.process_f2
|
||||
position relative
|
||||
_wh(104px,100%)
|
||||
.tdborder
|
||||
background rgba(173,217,255,0.10)
|
||||
border 2px dotted #32C5FF
|
||||
box-shadow inset 2px 2px 4px 0 rgba(0,0,0,0.50)
|
||||
border-radius 10px
|
||||
border-radius 10px
|
||||
.fj
|
||||
_fj()
|
||||
.machines
|
||||
position relative
|
||||
overflow hidden
|
||||
&:after
|
||||
content: ''
|
||||
display block
|
||||
height 100%
|
||||
transform translateX(-100%)
|
||||
background inherit
|
||||
p
|
||||
position absolute
|
||||
width 100%
|
||||
z-index 100
|
||||
.machine_bg_1
|
||||
_wh(100%, 160px)
|
||||
.machine_1
|
||||
_wh(128px,88px)
|
||||
_bis('../assets/images/logitech/machine01.png')
|
||||
p
|
||||
top 8px
|
||||
.prarrow_bg_1
|
||||
_wh(70px,100%)
|
||||
margin 0 .25rem
|
||||
padding-top 78px
|
||||
p
|
||||
display inline-block
|
||||
width 100%
|
||||
_font(12px,1,#30EBC9)
|
||||
padding-left 22px
|
||||
.prarrow_1
|
||||
_wh(70px,30px)
|
||||
_bis('../assets/images/logitech/arrow01.png')
|
||||
.process_line
|
||||
_wh(100%, 60px)
|
||||
p
|
||||
font-size 16px
|
||||
.prarrow_2
|
||||
_wh(100%,30px)
|
||||
margin-top 8px
|
||||
_font(12px,30px,#32C5FF,,right)
|
||||
_bis('../assets/images/logitech/arrow02.png',30px,30px)
|
||||
.machines_bg_1
|
||||
width 100%
|
||||
padding 5px 0
|
||||
_fj()
|
||||
.l2_machine
|
||||
position relative
|
||||
_wh(100%,65px)
|
||||
_fj(row,center)
|
||||
p
|
||||
position absolute
|
||||
top 2px
|
||||
display inline-block
|
||||
width 100%
|
||||
.l2_machine_n
|
||||
p
|
||||
top 12px
|
||||
.machine_2
|
||||
_wh(128px,65px)
|
||||
_bis('../assets/images/logitech/machine02.png')
|
||||
.bedone
|
||||
position absolute
|
||||
top -10px
|
||||
left 20px
|
||||
_wh(13px,40px)
|
||||
border-radius 5px
|
||||
border 1px solid #1195DB
|
||||
background rgba(99,181,203,0.50)
|
||||
z-index 100
|
||||
p
|
||||
position absolute
|
||||
top -20px
|
||||
left 50%
|
||||
width 32px
|
||||
margin-left -16px
|
||||
_font(14px,18px,#32C5FF)
|
||||
.percent
|
||||
position absolute
|
||||
bottom 0
|
||||
_wh(100%,50%)
|
||||
background-color #1195DB
|
||||
.machine_none
|
||||
_wh(50%,65px)
|
||||
_bis('../assets/images/logitech/machine_none.png')
|
||||
.machine_3
|
||||
_wh(50%,65px)
|
||||
_bis('../assets/images/logitech/machine03.png')
|
||||
.prarrow_bg_2
|
||||
_wh(70px,100%)
|
||||
margin 0 .25rem
|
||||
.prarrow_bg_2_top
|
||||
_wh(100%,54px)
|
||||
p
|
||||
_font(12px,24px,#32C5FF,,right)
|
||||
padding-right 22px
|
||||
.prarrow_4
|
||||
_wh(100%,30px)
|
||||
_bis('../assets/images/logitech/arrow03.png')
|
||||
.prarrow_bg_2_bottom
|
||||
_wh(100%,calc(100% - 54px))
|
||||
p
|
||||
_font(12px,20px,#32c5ff)
|
||||
.arrows_block
|
||||
height 120px
|
||||
.prarrow_3
|
||||
_wh(60px,68px)
|
||||
_font(12px,16px,#32c5ff)
|
||||
_bis('../assets/images/logitech/arrow04.png',42px,100%,,right)
|
||||
align-items start
|
||||
.machine_bg_2
|
||||
_wh(100%,100%)
|
||||
.machine_bg_3
|
||||
height 3.15rem
|
||||
.machine_4
|
||||
_wh(100px,64px)
|
||||
.machine_7
|
||||
_wh(100px,74px)
|
||||
&:after
|
||||
_shadow(100px,#30EBC9)
|
||||
p
|
||||
top 12px
|
||||
.prarrow_bg_3
|
||||
_wh(344px,100%)
|
||||
margin 0
|
||||
.prarrow_bg_3_top
|
||||
width 256px
|
||||
margin 0 auto
|
||||
p
|
||||
text-align center
|
||||
padding-right 0
|
||||
.prarrow_5
|
||||
_wh(100%,32px)
|
||||
_bis('../assets/images/logitech/arrow05.png')
|
||||
.prarrow_bg_3_bottom
|
||||
_wh(100%,calc(100% - 54px))
|
||||
_fj(row)
|
||||
.prarrow_left
|
||||
_wh(calc((100% - 104px) / 2),100%)
|
||||
p
|
||||
_font(12px,20px,#32c5ff)
|
||||
.prarrow_mid
|
||||
_wh(104px,calc(100% - 30px))
|
||||
margin-top 30px
|
||||
.machine_5
|
||||
_wh(100px,213px)
|
||||
_bis('../assets/images/logitech/machine04.png')
|
||||
&:after
|
||||
_shadow(100px,#30EBC9)
|
||||
p
|
||||
top 50%
|
||||
.prarrow_6
|
||||
text-align left
|
||||
_bis('../assets/images/logitech/arrow06.png',30px,30px)
|
||||
.tag_block
|
||||
position fixed
|
||||
bottom 10px
|
||||
right 30px
|
||||
.tag_type
|
||||
display inline-block
|
||||
padding-left 3px
|
||||
margin-left 32px
|
||||
.type_color
|
||||
display inline-block
|
||||
_wh(10px,10px)
|
||||
border-radius 50%
|
||||
.tag_text
|
||||
display inline-block
|
||||
_font(14px,20px)
|
||||
@media screen and (max-width:1800px)
|
||||
.content
|
||||
padding 37px 20px
|
||||
.block_right
|
||||
padding-left 20px
|
||||
.circles_block
|
||||
_wh(100%, 165px)
|
||||
.content-block-scroll-ul li div p
|
||||
transform scale(0.8)
|
||||
.m1_status_yellow
|
||||
&:after
|
||||
_shadow(128px,#E2BB0E)
|
||||
.m1_status_green
|
||||
&:after
|
||||
_shadow(128px,#30EBC9)
|
||||
.m1_status_orange
|
||||
&:after
|
||||
_shadow(128px,#F96700)
|
||||
.m1_status_gray
|
||||
&:after
|
||||
_shadow(128px,#516282)
|
||||
.m2_status_yellow
|
||||
&:after
|
||||
_shadow(64px,#E2BB0E)
|
||||
.m2_status_green
|
||||
&:after
|
||||
_shadow(64px,#30EBC9)
|
||||
.m2_status_orange
|
||||
&:after
|
||||
_shadow(64px,#F96700)
|
||||
.m2_status_gray
|
||||
&:after
|
||||
_shadow(64px,#516282)
|
||||
|
||||
.m3_status_yellow
|
||||
&:after
|
||||
_shadow(100px,#E2BB0E)
|
||||
.m3_status_green
|
||||
&:after
|
||||
_shadow(100px,#30EBC9)
|
||||
.m3_status_orange
|
||||
&:after
|
||||
_shadow(100px,#F96700)
|
||||
.m3_status_gray
|
||||
&:after
|
||||
_shadow(100px,#516282)
|
||||
</style>
|
||||
@@ -139,18 +139,18 @@
|
||||
<div class="l2_machine mgt3 mgb14">
|
||||
<div class="machines machine_2" :class="['m1_status_yellow', 'm1_status_green', 'm1_status_orange', 'm1_status_gray'][Number(kilnjo[0].device_status) - 1]" @click="getData(produceData[3])"></div>
|
||||
<p>{{kilnjo[0].device_name}}</p>
|
||||
<div class="bedone">
|
||||
<!-- <div class="bedone">
|
||||
<p>{{kilnjo[0].percentage}}<br>%</p>
|
||||
<div class="percent"></div>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
<div class="l2_machine mgb08">
|
||||
<div class="machines machine_2" :class="['m1_status_yellow', 'm1_status_green', 'm1_status_orange', 'm1_status_gray'][Number(kilnjo[1].device_status) - 1]" @click="getData(produceData[3])"></div>
|
||||
<p>{{kilnjo[1].device_name}}</p>
|
||||
<div class="bedone">
|
||||
<!-- <div class="bedone">
|
||||
<p>{{kilnjo[1].percentage}}<br>%</p>
|
||||
<div class="percent"></div>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
<div class="l2_machine l2_machine_n mgb08">
|
||||
<div class="machine_none"></div>
|
||||
@@ -162,31 +162,37 @@
|
||||
<div class="machines machine_3" :class="['m2_status_yellow', 'm2_status_green', 'm2_status_orange', 'm2_status_gray'][Number(kilnjo[3].device_status) - 1]" @click="getData(produceData[3])"></div>
|
||||
<p>{{kilnjo[3].device_name}}</p>
|
||||
</div>
|
||||
<div class="l2_machine l2_machine_n mgb08 hide">
|
||||
<!-- <div class="l2_machine l2_machine_n mgb08 hide"> -->
|
||||
<div class="l2_machine l2_machine_n mgb08">
|
||||
<div class="machine_none"></div>
|
||||
<div class="machine machine_3"></div>
|
||||
<!-- <div class="machine machine_3"></div> -->
|
||||
<div class="machines machine_3" :class="['m2_status_yellow', 'm2_status_green', 'm2_status_orange', 'm2_status_gray'][Number(kilnjo[2].device_status) - 1]" @click="getData(produceData[3])"></div>
|
||||
<p>3号窑</p>
|
||||
</div>
|
||||
<div class="l2_machine l2_machine_n mgb14 hide">
|
||||
<!-- <div class="l2_machine l2_machine_n mgb14 hide"> -->
|
||||
<div class="l2_machine l2_machine_n mgb14">
|
||||
<div class="machine_none"></div>
|
||||
<div class="machine machine_3"></div>
|
||||
<!-- <div class="machine machine_3"></div> -->
|
||||
<div class="machines machine_3" :class="['m2_status_yellow', 'm2_status_green', 'm2_status_orange', 'm2_status_gray'][Number(kilnjo[3].device_status) - 1]" @click="getData(produceData[3])"></div>
|
||||
<p>4号窑</p>
|
||||
</div>
|
||||
<div class="l2_machine mgb14 hide">
|
||||
<!-- <div class="l2_machine mgb14 hide"> -->
|
||||
<div class="l2_machine mgb14">
|
||||
<div class="machines machine_2"></div>
|
||||
<p>准备<br>车道</p>
|
||||
<div class="bedone">
|
||||
<p>50<br>%</p>
|
||||
<p>准备车道</p>
|
||||
<!-- <div class="bedone">
|
||||
<p>2<br>%</p>
|
||||
<div class="percent"></div>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
<div class="l2_machine mgb3 hide">
|
||||
<!-- <div class="l2_machine mgb3 hide"> -->
|
||||
<div class="l2_machine mgb3">
|
||||
<div class="machines machine_2"></div>
|
||||
<p>空窑<br>车道</p>
|
||||
<div class="bedone">
|
||||
<p>50<br>%</p>
|
||||
<p>空车道</p>
|
||||
<!-- <div class="bedone">
|
||||
<p>14<br>%</p>
|
||||
<div class="percent"></div>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -351,8 +357,9 @@ export default {
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.initData()
|
||||
this.refresh()
|
||||
this.iData()
|
||||
// this.initData()
|
||||
// this.refresh()
|
||||
},
|
||||
beforeDestroy () {
|
||||
clearInterval(this.timer)
|
||||
@@ -468,6 +475,14 @@ export default {
|
||||
myChart.resize()
|
||||
})
|
||||
},
|
||||
iData () {
|
||||
let res = {"code":"1","desc":"查询成功","result":{"workprocedure_rows":[{"workprocedure_uuid":"3560AB81A1CA4CB0942641CB3C51C34A","workprocedure_code":"0001","workprocedure_name":"混碾","ivt__qty":"665.8"},{"workprocedure_uuid":"D6FA61D29A0745D696970DB319E039E6","workprocedure_code":"0002","workprocedure_name":"困料","ivt__qty":"51.0"},{"workprocedure_uuid":"B239F5667F1C40E2B424D2ED6C51525B","workprocedure_code":"0003","workprocedure_name":"压制","ivt__qty":"19.3"},{"workprocedure_uuid":"2679C3DC63FE4B36A3E16156E291B57A","workprocedure_code":"0004","workprocedure_name":"干燥","ivt__qty":"0.0"},{"workprocedure_uuid":"60610416D34945A0ACF5799F82EB9D63","workprocedure_code":"0005","workprocedure_name":"分拣","ivt__qty":"0.0"}],"jxsjo":{"status":"3","device_code":"MDJXS01","device_name":"码垛机械手","device_uuid":"50","percentage":"0"},"kilnjo":[{"device_status":"","device_code":"KCD01","device_name":"空车道","device_uuid":"35","percentage":"14"},{"device_status":"","device_code":"ZBCD01","device_name":"准备车道","device_uuid":"36","percentage":"2"},{"device_status":"2","device_code":"GZY01","device_name":"1号窑","device_uuid":"37","percentage":"80"},{"device_status":"2","device_code":"GZY02","device_name":"2号窑","device_uuid":"39","percentage":"16"}],"pressjo":[{"device_status":"2","device_code":"YZJ01","device_name":"压制机1","device_uuid":"65","percentage":"0"},{"device_status":"3","device_code":"YZJ02","device_name":"压制机2","device_uuid":"66","percentage":"0"},{"device_status":"1","device_code":"YZJ03","device_name":"压制机3","device_uuid":"10","percentage":"0"},{"device_status":"1","device_code":"YZJ04","device_name":"压制机4","device_uuid":"11","percentage":"0"},{"device_status":"2","device_code":"YZJ05","device_name":"压制机5","device_uuid":"12","percentage":"0"},{"device_status":"2","device_code":"YZJ06","device_name":"压制机6","device_uuid":"13","percentage":"0"},{"device_status":"3","device_code":"YZJ07","device_name":"压制机7","device_uuid":"8","percentage":"0"},{"device_status":"2","device_code":"YZJ08","device_name":"压制机8","device_uuid":"9","percentage":"0"},{"device_status":"2","device_code":"YZJ09","device_name":"压制机1","device_uuid":"79","percentage":"0"},{"device_status":"3","device_code":"YZJ10","device_name":"压制机2","device_uuid":"80","percentage":"0"}],"mixjo":[{"device_status":"3","device_code":"HLJ01","device_name":"混料机1","device_uuid":"1","percentage":"0"},{"device_status":"3","device_code":"HLJ02","device_name":"混料机2","device_uuid":"2","percentage":"0"},{"device_status":"3","device_code":"HLJ03","device_name":"混料机3","device_uuid":"3","percentage":"0"},{"device_status":"2","device_code":"HLJ04","device_name":"混料机4","device_uuid":"4","percentage":"0"},{"device_status":"2","device_code":"HLJ05","device_name":"混料机5","device_uuid":"5","percentage":"0"},{"device_status":"2","device_code":"HLJ06","device_name":"混料机6","device_uuid":"60","percentage":"0"},{"device_status":"2","device_code":"HLJ07","device_name":"混料机7","device_uuid":"61","percentage":"0"},{"device_status":"3","device_code":"HLJ08","device_name":"混料机8","device_uuid":"62","percentage":"0"},{"device_status":"3","device_code":"HLJ09","device_name":"混料机9","device_uuid":"63","percentage":"0"}]}}
|
||||
this.produceData = [...res.result.workprocedure_rows]
|
||||
this.jxsjo = res.result.jxsjo
|
||||
this.kilnjo = [...res.result.kilnjo]
|
||||
this.mixjo = [...res.result.mixjo]
|
||||
this.pressjo = [...res.result.pressjo]
|
||||
},
|
||||
initData () {
|
||||
let data = {
|
||||
'_SRVNAME': 'service.st.al.realivt',
|
||||
|
||||
Reference in New Issue
Block a user