物流工艺
This commit is contained in:
@@ -27,43 +27,20 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="center_wrap">
|
||||
<div class="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="machine_block machine_block_1"></div>
|
||||
<div class="machine_block machine_block_2"></div>
|
||||
<div class="machine_block machine_block_3"></div>
|
||||
<div class="machine_block machine_block_4"></div>
|
||||
<div class="machine_block machine_block_5"></div>
|
||||
<div class="machine_block machine_block_6"></div>
|
||||
<t-workshop></t-workshop>
|
||||
</div>
|
||||
<div class="right_wrap">
|
||||
<div class="item_wrap">
|
||||
<div class="item_tip">
|
||||
<div class="item_tip_left">当日工序生产统计</div>
|
||||
</div>
|
||||
<div class="item_content_1">
|
||||
<div class="item_content_1" style="padding-left: 15px;padding-right:15px">
|
||||
<div class="item_inner_wrap">
|
||||
<div class="item_inner_h1">
|
||||
<div class="item_inner_h1_l">混料</div>
|
||||
<div class="item_inner_h1_r">
|
||||
<div class="process_wrap">
|
||||
<div class="process_rate" :style="{'width': Number(objL1.delayed_qty) * 100 / Number(objL1.normal_qty) + '%' }"></div>
|
||||
<div class="process_rate" :style="{'width': Number(mix.completed) * 100 / Number(mix.planned) + '%' }"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -74,7 +51,7 @@
|
||||
<span>计划量</span>
|
||||
</div>
|
||||
<div class="item_inner_h2_inner_r">
|
||||
<span>{{objL1.normal_qty}}</span>
|
||||
<span>{{mix.planned}}</span>
|
||||
<span>吨</span>
|
||||
</div>
|
||||
</div>
|
||||
@@ -84,7 +61,7 @@
|
||||
<span>已生产</span>
|
||||
</div>
|
||||
<div class="item_inner_h2_inner_r">
|
||||
<span>{{objL1.delayed_qty}}</span>
|
||||
<span>{{mix.completed}}</span>
|
||||
<span>吨</span>
|
||||
</div>
|
||||
</div>
|
||||
@@ -95,7 +72,7 @@
|
||||
<div class="item_inner_h1_l">困料</div>
|
||||
<div class="item_inner_h1_r">
|
||||
<div class="process_wrap">
|
||||
<div class="process_rate" :style="{'width': Number(objL1.delayed_qty) * 100 / Number(objL1.normal_qty) + '%' }"></div>
|
||||
<div class="process_rate" :style="{'width': Number(stand.completed) * 100 / Number(stand.onStanding) + '%' }"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -106,7 +83,7 @@
|
||||
<span>静置中</span>
|
||||
</div>
|
||||
<div class="item_inner_h2_inner_r">
|
||||
<span>{{objL1.normal_qty}}</span>
|
||||
<span>{{stand.onStanding}}</span>
|
||||
<span>吨</span>
|
||||
</div>
|
||||
</div>
|
||||
@@ -116,7 +93,7 @@
|
||||
<span>已完成</span>
|
||||
</div>
|
||||
<div class="item_inner_h2_inner_r">
|
||||
<span>{{objL1.delayed_qty}}</span>
|
||||
<span>{{stand.completed}}</span>
|
||||
<span>吨</span>
|
||||
</div>
|
||||
</div>
|
||||
@@ -127,7 +104,7 @@
|
||||
<div class="item_inner_h1_l">压制</div>
|
||||
<div class="item_inner_h1_r">
|
||||
<div class="process_wrap">
|
||||
<div class="process_rate" :style="{'width': Number(objL1.delayed_qty) * 100 / Number(objL1.normal_qty) + '%' }"></div>
|
||||
<div class="process_rate" :style="{'width': Number(press.completed) * 100 / Number(press.planned) + '%' }"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -138,7 +115,7 @@
|
||||
<span>计划量</span>
|
||||
</div>
|
||||
<div class="item_inner_h2_inner_r">
|
||||
<span>{{objL1.normal_qty}}</span>
|
||||
<span>{{press.planned}}</span>
|
||||
<span>万块</span>
|
||||
</div>
|
||||
</div>
|
||||
@@ -148,7 +125,7 @@
|
||||
<span>已生产</span>
|
||||
</div>
|
||||
<div class="item_inner_h2_inner_r">
|
||||
<span>{{objL1.delayed_qty}}</span>
|
||||
<span>{{press.completed}}</span>
|
||||
<span>万块</span>
|
||||
</div>
|
||||
</div>
|
||||
@@ -159,7 +136,7 @@
|
||||
<div class="item_inner_h1_l">干燥</div>
|
||||
<div class="item_inner_h1_r">
|
||||
<div class="process_wrap">
|
||||
<div class="process_rate" :style="{'width': Number(objL1.delayed_qty) * 100 / Number(objL1.normal_qty) + '%' }"></div>
|
||||
<div class="process_rate" :style="{'width': Number(dry.completed) * 100 / Number(dry.planned) + '%' }"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -170,7 +147,7 @@
|
||||
<span>计划量</span>
|
||||
</div>
|
||||
<div class="item_inner_h2_inner_r">
|
||||
<span>{{objL1.normal_qty}}</span>
|
||||
<span>{{dry.planned}}</span>
|
||||
<span>万块</span>
|
||||
</div>
|
||||
</div>
|
||||
@@ -180,7 +157,7 @@
|
||||
<span>已生产</span>
|
||||
</div>
|
||||
<div class="item_inner_h2_inner_r">
|
||||
<span>{{objL1.delayed_qty}}</span>
|
||||
<span>{{dry.completed}}</span>
|
||||
<span>万块</span>
|
||||
</div>
|
||||
</div>
|
||||
@@ -191,7 +168,7 @@
|
||||
<div class="item_inner_h1_l">分拣</div>
|
||||
<div class="item_inner_h1_r">
|
||||
<div class="process_wrap">
|
||||
<div class="process_rate" :style="{'width': Number(objL1.delayed_qty) * 100 / Number(objL1.normal_qty) + '%' }"></div>
|
||||
<div class="process_rate" :style="{'width': Number(sort.completed) * 100 / Number(sort.planned) + '%' }"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -202,7 +179,7 @@
|
||||
<span>计划量</span>
|
||||
</div>
|
||||
<div class="item_inner_h2_inner_r">
|
||||
<span>{{objL1.normal_qty}}</span>
|
||||
<span>{{sort.planned}}</span>
|
||||
<span>万块</span>
|
||||
</div>
|
||||
</div>
|
||||
@@ -212,7 +189,7 @@
|
||||
<span>已生产</span>
|
||||
</div>
|
||||
<div class="item_inner_h2_inner_r">
|
||||
<span>{{objL1.delayed_qty}}</span>
|
||||
<span>{{sort.completed}}</span>
|
||||
<span>万块</span>
|
||||
</div>
|
||||
</div>
|
||||
@@ -222,7 +199,7 @@
|
||||
</div>
|
||||
<div class="item_wrap">
|
||||
<div class="item_tip">
|
||||
<div class="item_tip_left"></div>
|
||||
<div class="item_tip_left">设备生产统计</div>
|
||||
</div>
|
||||
<div class="item_content_2">
|
||||
<div class="scroll_wrap">
|
||||
@@ -233,13 +210,13 @@
|
||||
<li>完成重量</li>
|
||||
</ul>
|
||||
<div class="scroll_container_1">
|
||||
<vue-seamless-scroll :data="array1" :class-option="defaultOption1">
|
||||
<vue-seamless-scroll :data="equipmentProductionStatistics" :class-option="defaultOption1">
|
||||
<ul class="scroll-ul_1">
|
||||
<li v-for="(e, i) in array1" :key="i">
|
||||
<div class="scroll-ul_1_div">{{e.a1}}</div>
|
||||
<div class="scroll-ul_1_div">{{e.a2}}</div>
|
||||
<div class="scroll-ul_1_div">{{e.a3}}</div>
|
||||
<div class="scroll-ul_1_div">{{e.a4}}</div>
|
||||
<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>
|
||||
</li>
|
||||
</ul>
|
||||
</vue-seamless-scroll>
|
||||
@@ -255,11 +232,14 @@
|
||||
|
||||
<script>
|
||||
import THeader from '@components/header.vue'
|
||||
import {worksectionHarvest, monthHarvest, productSchedule, output} from '@js/getData2.js'
|
||||
import TWorkshop from '@components/workshop.vue'
|
||||
// import {homepageData} from '@js/getData2.js'
|
||||
import {homepageData} from '@js/mork2.js'
|
||||
export default {
|
||||
name: 'LogisticsProcess',
|
||||
components: {
|
||||
THeader
|
||||
THeader,
|
||||
TWorkshop
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
@@ -270,10 +250,18 @@ export default {
|
||||
timeOut1: null,
|
||||
myCharts1: '',
|
||||
myCharts2: '',
|
||||
arrL1: [],
|
||||
arrL2: [],
|
||||
array1: [],
|
||||
objL1: {}
|
||||
running: '',
|
||||
pausing: '',
|
||||
shutdown: '',
|
||||
inTrouble: '',
|
||||
currentMonth: {},
|
||||
average: {},
|
||||
mix: {},
|
||||
stand: {},
|
||||
press: {},
|
||||
dry: {},
|
||||
sort: {},
|
||||
equipmentProductionStatistics: []
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
@@ -306,57 +294,44 @@ export default {
|
||||
this.$router.push('/devicescreen')
|
||||
},
|
||||
initData () {
|
||||
this._worksectionHarvest()
|
||||
this._productSchedule()
|
||||
this._output()
|
||||
this._homepageData()
|
||||
},
|
||||
refresh () {
|
||||
this.initData()
|
||||
this._monthHarvest()
|
||||
this.timer2 = setInterval(() => {
|
||||
this.initData()
|
||||
}, this.interTime)
|
||||
this.timer1 = setInterval(() => {
|
||||
this._monthHarvest()
|
||||
}, this.iTime)
|
||||
},
|
||||
setEchart1 () {
|
||||
let colors = ['#30EBC9', '#E2BB0E', '#516282', '#F96700']
|
||||
let status = ['运行', '暂停', '停机', '故障']
|
||||
let barName = []
|
||||
let running = [this.running, 0, 0, 0]
|
||||
let pausing = [0, this.pausing, 0, 0]
|
||||
let shutdown = [0, 0, this.shutdown, 0]
|
||||
let inTrouble = [0, 0, 0, this.inTrouble]
|
||||
let data = []
|
||||
let running = []
|
||||
let standby = []
|
||||
let shutdown = []
|
||||
let failure = []
|
||||
this.arrL1.map(el => {
|
||||
barName.push(el.device_name)
|
||||
running.push(el.running)
|
||||
standby.push(el.standby)
|
||||
shutdown.push(el.shutdown)
|
||||
failure.push(el.failure)
|
||||
})
|
||||
data.push(running)
|
||||
data.push(standby)
|
||||
data.push(pausing)
|
||||
data.push(shutdown)
|
||||
data.push(failure)
|
||||
data.push(inTrouble)
|
||||
let option = {
|
||||
grid: {
|
||||
top: 50,
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
left: 15,
|
||||
right: 15,
|
||||
bottom: 15,
|
||||
containLabel: true
|
||||
},
|
||||
legend: {
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
fontSize: 14,
|
||||
lineHeight: 14
|
||||
lineHeight: 14,
|
||||
fontFamily: 'Source Han Sans CN-Normal'
|
||||
},
|
||||
itemGap: 30.86,
|
||||
itemWidth: 14.16,
|
||||
itemHeight: 7.38,
|
||||
itemGap: 30,
|
||||
itemWidth: 14,
|
||||
itemHeight: 7,
|
||||
data: status
|
||||
},
|
||||
color: colors,
|
||||
@@ -376,24 +351,33 @@ export default {
|
||||
interval: 0,
|
||||
textStyle: {
|
||||
color: '#8FABBF',
|
||||
fontSize: 16
|
||||
fontSize: 16,
|
||||
fontFamily: 'Source Han Sans CN-Normal'
|
||||
}
|
||||
},
|
||||
data: barName
|
||||
data: status
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
name: '台',
|
||||
nameTextStyle: {
|
||||
color: '#82AFC6',
|
||||
fontSize: 13,
|
||||
fontFamily: 'Source Han Sans CN-Normal',
|
||||
align: 'left',
|
||||
verticalAlign: 'center'
|
||||
},
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
// splitNumber: 2,
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
color: '#8FABBF',
|
||||
fontSize: 14
|
||||
fontSize: 14,
|
||||
fontFamily: 'Source Han Sans CN-Normal'
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
@@ -433,23 +417,19 @@ export default {
|
||||
}
|
||||
},
|
||||
setEchart2 () {
|
||||
let date = []
|
||||
let qty = []
|
||||
let barData = []
|
||||
let xData = ['混料', '压制', '干燥', '分拣']
|
||||
let values1 = [] // 柱状
|
||||
values1.push(this.currentMonth.mix)
|
||||
values1.push(this.currentMonth.press)
|
||||
values1.push(this.currentMonth.dry)
|
||||
values1.push(this.currentMonth.sort)
|
||||
let values2 = [] // 折线
|
||||
values2.push(this.average.mix)
|
||||
values2.push(this.average.press)
|
||||
values2.push(this.average.dry)
|
||||
values2.push(this.average.sort)
|
||||
const legendData = ['故障次数', '平均次数']
|
||||
this.arrL2.map(el => {
|
||||
date.push(el.date)
|
||||
qty.push(el.real_qty)
|
||||
barData.push(el.rate)
|
||||
})
|
||||
let option = {
|
||||
grid: {
|
||||
top: 50,
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
containLabel: true
|
||||
},
|
||||
var option = {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
@@ -481,54 +461,54 @@ export default {
|
||||
<div style="font-size: 14px;font-family: Source Han Sans CN-Medium;font-weight: 500;color: #FFFFFF;margin-bottom:4px;">${legendData[0]}：${params[0].value}次</div>
|
||||
<div style="font-size: 14px;font-family: Source Han Sans CN-Medium;font-weight: 500;color: #FFFFFF;margin-bottom:4px;">${legendData[1]}：${params[1].value}次</div>`
|
||||
},
|
||||
extraCssText: 'opacity: 0.8;background-color:#050F1B;padding:16px;box-shadow: 1px 6px 15px 1px rgba(0,0,0,0.13);border-radius: 4px;filter: blur(undefinedpx);border:none;'
|
||||
extraCssText: 'opacity: 0.8;background-color:rgba(194,141,5,0.4);padding:16px;box-shadow: 1px 6px 15px 1px rgba(0,0,0,0.13);border-radius: 4px;filter: blur(undefinedpx);border:none;'
|
||||
},
|
||||
legend: {
|
||||
data: legendData,
|
||||
itemWidth: 14,
|
||||
itemHeight: 7,
|
||||
itemGap: 30,
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
fontSize: 14,
|
||||
lineHeight: 14
|
||||
},
|
||||
itemGap: 30.86,
|
||||
itemWidth: 14.16,
|
||||
itemHeight: 7.38,
|
||||
data: legendData
|
||||
lineHeight: 14,
|
||||
color: '#fff',
|
||||
fontFamily: 'Source Han Sans CN-Normal'
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
top: 50, // 上边距
|
||||
right: 15, // 右边距
|
||||
left: 15, // 左边距
|
||||
bottom: 15, // 下边距
|
||||
containLabel: true
|
||||
},
|
||||
// dataZoom: [
|
||||
// {
|
||||
// show: false, // 为true滚动条出现
|
||||
// type: 'slider', // type:'inside'，滚动条在最下面，鼠标点击滚动
|
||||
// startValue: 0, // 从头开始。
|
||||
// endValue: 9 // end百分比显示范围，endValue具体显示几个数值
|
||||
// }
|
||||
// ],
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: xData,
|
||||
axisTick: {
|
||||
show: false
|
||||
show: false // 隐藏X轴刻度
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
width: 2,
|
||||
color: '#8FABBF'
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
interval: 0,
|
||||
show: true,
|
||||
textStyle: {
|
||||
color: '#8FABBF',
|
||||
fontSize: 16
|
||||
fontSize: 16,
|
||||
fontFamily: 'Source Han Sans CN-Normal'
|
||||
}
|
||||
// rotate: 50
|
||||
},
|
||||
data: date
|
||||
}
|
||||
},
|
||||
yAxis: [{
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
name: '次数',
|
||||
boundaryGap: ['0%', '20%'],
|
||||
alignTicks: true,
|
||||
// splitNumber: 5,
|
||||
nameTextStyle: {
|
||||
color: '#82AFC6',
|
||||
fontSize: 13,
|
||||
@@ -538,7 +518,8 @@ export default {
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#8FABBF',
|
||||
fontSize: 14
|
||||
fontSize: 14,
|
||||
fontFamily: 'Source Han Sans CN-Normal'
|
||||
},
|
||||
axisLine: {
|
||||
show: false
|
||||
@@ -547,124 +528,99 @@ export default {
|
||||
show: false
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#8FABBF',
|
||||
type: [8, 4],
|
||||
dashOffset: 4,
|
||||
color: '#8FABBF'
|
||||
dashOffset: 4
|
||||
}
|
||||
}
|
||||
}, {
|
||||
type: 'value',
|
||||
name: '',
|
||||
position: 'right',
|
||||
boundaryGap: ['0%', '20%'],
|
||||
alignTicks: true,
|
||||
splitNumber: 5,
|
||||
nameTextStyle: {
|
||||
show: false
|
||||
},
|
||||
series: [{
|
||||
type: 'bar',
|
||||
name: legendData[0],
|
||||
data: values1,
|
||||
itemStyle: {
|
||||
color: {
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [{
|
||||
offset: 0, color: 'rgba(49, 218, 255, 1)' // 0% 处的颜色
|
||||
}, {
|
||||
offset: 1, color: 'rgba(3, 21, 50, 1)' // 100% 处的颜色
|
||||
}],
|
||||
global: false // 缺省为 false
|
||||
},
|
||||
borderRadius: [4, 4, 0, 0]
|
||||
},
|
||||
axisLabel: {
|
||||
show: false
|
||||
barWidth: 26
|
||||
},
|
||||
{
|
||||
name: legendData[1],
|
||||
type: 'line',
|
||||
data: values2,
|
||||
// yAxisIndex: 1,
|
||||
symbolSize: 8, // 标记的大小
|
||||
emphasis: {
|
||||
scale: 1.5
|
||||
},
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: 'rgba(49, 218, 255, 0.5)',
|
||||
type: 'dashed'
|
||||
areaStyle: {
|
||||
color: {
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [{
|
||||
offset: 0, color: 'rgba(6, 201, 112, 0.3)' // 0% 处的颜色
|
||||
}, {
|
||||
offset: 1, color: 'rgba(47,145,255,0)' // 100% 处的颜色
|
||||
}],
|
||||
global: false // 缺省为 false
|
||||
}
|
||||
}
|
||||
}],
|
||||
series: [
|
||||
{
|
||||
name: legendData[0],
|
||||
type: 'bar',
|
||||
barWidth: '8',
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgba(96,112,128,0.10)',
|
||||
opacity: 1
|
||||
},
|
||||
{
|
||||
offset: 0,
|
||||
color: '#0E90FD',
|
||||
opacity: 0.1
|
||||
}
|
||||
])
|
||||
}
|
||||
},
|
||||
data: barData
|
||||
},
|
||||
{
|
||||
name: legendData[1],
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
symbolSize: 5,
|
||||
showSymbol: false,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
lineStyle: {
|
||||
color: '#B68845',
|
||||
width: 2.4
|
||||
}
|
||||
}
|
||||
},
|
||||
areaStyle: {
|
||||
normal: {
|
||||
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: '#B68845',
|
||||
opacity: 1
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgba(134,98,45,0.25)',
|
||||
opacity: 0.25
|
||||
}
|
||||
], false)
|
||||
}
|
||||
},
|
||||
data: qty
|
||||
lineStyle: {
|
||||
color: 'rgba(6, 201, 112, 1)',
|
||||
width: 2
|
||||
},
|
||||
{ // 滚动点
|
||||
type: 'lines',
|
||||
zIndex: 999,
|
||||
z: 999,
|
||||
yAxisIndex: 1,
|
||||
coordinateSystem: 'cartesian2d',
|
||||
polyline: true,
|
||||
smooth: true,
|
||||
effect: {
|
||||
show: true,
|
||||
trailLength: 0,
|
||||
period: 10, // 光点滑动速度
|
||||
delay: 2000,
|
||||
symbol: 'circle',
|
||||
color: '#9eefce',
|
||||
symbolSize: 8,
|
||||
shadowBlur: 10,
|
||||
shadowColor: '#9eefce'
|
||||
},
|
||||
lineStyle: {
|
||||
show: false,
|
||||
opacity: 0
|
||||
},
|
||||
data: [{
|
||||
coords: date.map((item, index) => {
|
||||
return ['' + date[index], '' + barData[index]]
|
||||
})
|
||||
}]
|
||||
itemStyle: {
|
||||
// 折线拐点标志的样式
|
||||
color: 'rgba(6, 201, 112, 1)',
|
||||
borderColor: 'rgba(6, 201, 112, 1)',
|
||||
borderWidth: 2
|
||||
}
|
||||
]
|
||||
// smooth: true
|
||||
}, { // 滚动点
|
||||
type: 'lines',
|
||||
zIndex: 999,
|
||||
z: 999,
|
||||
// yAxisIndex: 1,
|
||||
coordinateSystem: 'cartesian2d',
|
||||
polyline: true,
|
||||
smooth: true,
|
||||
effect: {
|
||||
show: true,
|
||||
trailLength: 0,
|
||||
period: 10, // 光点滑动速度
|
||||
delay: 2000,
|
||||
symbol: 'circle',
|
||||
color: '#9eefce',
|
||||
symbolSize: 8,
|
||||
shadowBlur: 10,
|
||||
shadowColor: '#9eefce'
|
||||
},
|
||||
lineStyle: {
|
||||
show: false,
|
||||
opacity: 0
|
||||
},
|
||||
data: [{
|
||||
coords: xData.map((item, index) => {
|
||||
return ['' + xData[index], '' + values2[index]]
|
||||
})
|
||||
}]
|
||||
}]
|
||||
}
|
||||
let echart = document.getElementById('echart_d2')
|
||||
if (this.myCharts2 !== '') {
|
||||
@@ -673,88 +629,54 @@ export default {
|
||||
if (echart !== null) {
|
||||
this.myCharts2 = this.$echarts.init(echart)
|
||||
this.myCharts2.setOption(option)
|
||||
|
||||
var count = 0
|
||||
var timer = null
|
||||
|
||||
var dataLength = option.series[1].data.length
|
||||
timer && clearInterval(timer)
|
||||
timer = setInterval(() => {
|
||||
this.myCharts2.dispatchAction({
|
||||
type: 'downplay',
|
||||
seriesIndex: 1
|
||||
})
|
||||
this.myCharts2.dispatchAction({
|
||||
type: 'highlight',
|
||||
seriesIndex: 1,
|
||||
dataIndex: count % dataLength
|
||||
})
|
||||
this.myCharts2.dispatchAction({
|
||||
type: 'showTip',
|
||||
seriesIndex: 1,
|
||||
dataIndex: count % dataLength
|
||||
})
|
||||
count++
|
||||
}, 2000)
|
||||
|
||||
// this.autoMove(option)
|
||||
window.addEventListener('resize', () => {
|
||||
this.myCharts2.resize()
|
||||
})
|
||||
}
|
||||
},
|
||||
autoMove (option) {
|
||||
this.timeOut1 = setInterval(() => {
|
||||
if (Number(option.dataZoom[0].endValue) === option.series[0].data.length - 1) {
|
||||
option.dataZoom[0].endValue = 9
|
||||
option.dataZoom[0].startValue = 0
|
||||
} else {
|
||||
option.dataZoom[0].endValue = option.dataZoom[0].endValue + 1
|
||||
option.dataZoom[0].startValue = option.dataZoom[0].startValue + 1
|
||||
}
|
||||
this.myCharts2.setOption(option)
|
||||
|
||||
var count = 0
|
||||
var timer = null
|
||||
|
||||
var dataLength = option.series[1].data.length
|
||||
timer && clearInterval(timer)
|
||||
timer = setInterval(() => {
|
||||
this.myCharts2.dispatchAction({
|
||||
type: 'downplay',
|
||||
seriesIndex: 1
|
||||
})
|
||||
this.myCharts2.dispatchAction({
|
||||
type: 'highlight',
|
||||
seriesIndex: 1,
|
||||
dataIndex: count % dataLength
|
||||
})
|
||||
this.myCharts2.dispatchAction({
|
||||
type: 'showTip',
|
||||
seriesIndex: 1,
|
||||
dataIndex: count % dataLength
|
||||
})
|
||||
count++
|
||||
}, 2000)
|
||||
},
|
||||
/** 左一 */
|
||||
async _worksectionHarvest () {
|
||||
let res = await worksectionHarvest()
|
||||
if (res.code === '1') {
|
||||
this.arrL1 = [...res.result]
|
||||
if (this.arrL1.length > 0) {
|
||||
this.setEchart1()
|
||||
}
|
||||
} else {
|
||||
this.Dialog(res.desc)
|
||||
}
|
||||
},
|
||||
/** 左二 */
|
||||
async _monthHarvest () {
|
||||
let res = await monthHarvest()
|
||||
if (res.code === '1') {
|
||||
this.arrL2 = [...res.result]
|
||||
clearInterval(this.timeOut1)
|
||||
this.setEchart2()
|
||||
} else {
|
||||
this.Dialog(res.desc)
|
||||
}
|
||||
},
|
||||
/** 右二 */
|
||||
async _productSchedule () {
|
||||
let res = await productSchedule()
|
||||
if (res.code === '1') {
|
||||
this.array1 = [...res.result]
|
||||
} else {
|
||||
this.Dialog(res.desc)
|
||||
}
|
||||
},
|
||||
/** 右一 */
|
||||
async _output () {
|
||||
let res = await output()
|
||||
if (res.code === '1') {
|
||||
this.objL1 = res.result
|
||||
} else {
|
||||
this.Dialog(res.desc)
|
||||
}
|
||||
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.currentMonth = res.monthlyFailureStatistics.currentMonth
|
||||
this.average = res.monthlyFailureStatistics.average
|
||||
this.setEchart2()
|
||||
// 当日工序生产统计
|
||||
this.mix = res.dailyProductionStatistics.mix
|
||||
this.stand = res.dailyProductionStatistics.stand
|
||||
this.press = res.dailyProductionStatistics.press
|
||||
this.dry = res.dailyProductionStatistics.dry
|
||||
this.sort = res.dailyProductionStatistics.sort
|
||||
// 设备生产统计
|
||||
this.equipmentProductionStatistics = [...res.equipmentProductionStatistics]
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -776,16 +698,17 @@ export default {
|
||||
.left_wrap
|
||||
float left
|
||||
_wh(4.0756rem, 100%)
|
||||
background-image linear-gradient(to bottom, #040b1a, #050919)
|
||||
.center_wrap
|
||||
float left
|
||||
position relative
|
||||
_wh(9.96rem, 100%)
|
||||
margin-left .2936rem
|
||||
padding .4rem .16rem
|
||||
padding .25rem
|
||||
background center bottom / 100% 100% url(../../assets/images/screen1/item_2.png) no-repeat
|
||||
.right_wrap
|
||||
float right
|
||||
_wh(4.0273rem, 100%)
|
||||
background-image linear-gradient(to bottom, #040b1a, #050919)
|
||||
.item_wrap
|
||||
_wh(100%, calc(100% / 2))
|
||||
.item_tip
|
||||
@@ -805,8 +728,8 @@ export default {
|
||||
_wh(100%, calc(100% - .32rem))
|
||||
padding .12rem 0 .15rem
|
||||
.item_content_2
|
||||
_wh(100%, calc(100% - .38rem))
|
||||
margin-top .06rem
|
||||
_wh(calc(100% - 30px), calc(100% - .5rem - 15px))
|
||||
margin .12rem 15px 15px 15px
|
||||
border .01rem solid rgba(8,205,248,0.3)
|
||||
.scroll_wrap
|
||||
_wh(100%, 100%)
|
||||
@@ -932,47 +855,4 @@ export default {
|
||||
padding .05rem .2rem
|
||||
border-radius .05rem
|
||||
background: radial-gradient(circle at 7.2% 13.6%, rgb(37, 249, 245) 0%, #004c92 90%)
|
||||
.status_wrap
|
||||
position absolute
|
||||
top 3%
|
||||
right 2%
|
||||
z-index 1
|
||||
_fj(row)
|
||||
.status_item
|
||||
_fj(row)
|
||||
margin-left 20px
|
||||
.status_tip
|
||||
_wh(15px, 15px)
|
||||
border-radius 50%
|
||||
margin-right 10px
|
||||
box-shadow 0px 0px 4px 0px rgba(33,121,195,0.88)
|
||||
.status_name
|
||||
_font(16px, 1, #fff)
|
||||
.machine_block
|
||||
position absolute
|
||||
border 1px dashed #8FABBF
|
||||
.machine_block_1
|
||||
_wh(50%, 43%)
|
||||
left 2%
|
||||
top 3%
|
||||
.machine_block_2
|
||||
_wh(30%, 32%)
|
||||
right 2%
|
||||
top 9%
|
||||
.machine_block_3
|
||||
_wh(50%, 30%)
|
||||
left 2%
|
||||
top 56%
|
||||
.machine_block_4
|
||||
_wh(13%, 10%)
|
||||
left 56%
|
||||
top 75%
|
||||
.machine_block_5
|
||||
_wh(22%, 30%)
|
||||
right 2%
|
||||
top 56%
|
||||
.machine_block_6
|
||||
_wh(96%, 7%)
|
||||
left 2%
|
||||
bottom 3%
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user