1978 lines
56 KiB
Vue
1978 lines
56 KiB
Vue
<template>
|
||
<div class="container">
|
||
<div class="left_wrap">
|
||
<div class="item_wrap">
|
||
<div class="item_tip">
|
||
<div class="item_tip_left">设备实时状态</div>
|
||
</div>
|
||
<div class="item_5_l">
|
||
<div class="item_content_0">
|
||
<div id="echart_d01" style="width: 100%; height: 100%"></div>
|
||
</div>
|
||
<div class="total">
|
||
<div v-show="totalNum">{{totalNum}}<span>台</span></div>
|
||
</div>
|
||
<div v-show="totalNum" class="total-desc">设备总数</div>
|
||
</div>
|
||
<div class="item_5_r">
|
||
<div class="right_1_down_inner_3_i" v-for="(e, i) in arrR01" :key="i">
|
||
<div class="right_1_down_inner_3_l">
|
||
<span :style="{'background-color': e.color}"><i :style="{'background-color': e.color}"></i></span>
|
||
<span>{{e.name}}</span>
|
||
</div>
|
||
<div class="right_1_down_inner_3_r">
|
||
<span>{{e.value}}</span>
|
||
<span>台</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<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_inner">
|
||
<div class="item_content_1_inner_1">弯头工段</div>
|
||
<div class="item_content_1_inner_2 item_content_1_inner_2_bg">
|
||
<p class="item_content_1_inner_2_p1">OEE：</p>
|
||
<p class="item_content_1_inner_2_p2">{{sbgl_jo1.oee}}</p>
|
||
</div>
|
||
<div class="item_content_1_inner_2 item_content_1_inner_2_bg">
|
||
<p class="item_content_1_inner_2_p1">MIBF：</p>
|
||
<p class="item_content_1_inner_2_p2">{{sbgl_jo1.MIBF}}h</p>
|
||
</div>
|
||
<div class="item_content_1_inner_2 item_content_1_inner_2_bg">
|
||
<p class="item_content_1_inner_2_p1">MTTR：</p>
|
||
<p class="item_content_1_inner_2_p2">{{sbgl_jo1.MTTR}}h</p>
|
||
</div>
|
||
<div class="item_content_1_inner_2">
|
||
<p class="item_content_1_inner_2_p1 cred">报警：</p>
|
||
<p class="item_content_1_inner_2_p2 cred">{{sbgl_jo1.err_times}}次</p>
|
||
</div>
|
||
</div>
|
||
<div class="item_content_1_inner">
|
||
<div class="item_content_1_inner_1">综合工段</div>
|
||
<div class="item_content_1_inner_2 item_content_1_inner_2_bg">
|
||
<p class="item_content_1_inner_2_p1">OEE：</p>
|
||
<p class="item_content_1_inner_2_p2">{{sbgl_jo2.oee}}</p>
|
||
</div>
|
||
<div class="item_content_1_inner_2 item_content_1_inner_2_bg">
|
||
<p class="item_content_1_inner_2_p1">MIBF：</p>
|
||
<p class="item_content_1_inner_2_p2">{{sbgl_jo2.MIBF}}h</p>
|
||
</div>
|
||
<div class="item_content_1_inner_2 item_content_1_inner_2_bg">
|
||
<p class="item_content_1_inner_2_p1">MTTR：</p>
|
||
<p class="item_content_1_inner_2_p2">{{sbgl_jo2.MTTR}}h</p>
|
||
</div>
|
||
<div class="item_content_1_inner_2">
|
||
<p class="item_content_1_inner_2_p1 cred">报警：</p>
|
||
<p class="item_content_1_inner_2_p2 cred">{{sbgl_jo2.err_times}}次</p>
|
||
</div>
|
||
</div>
|
||
<div class="item_content_1_inner">
|
||
<div class="item_content_1_inner_1">成品工段</div>
|
||
<div class="item_content_1_inner_2 item_content_1_inner_2_bg">
|
||
<p class="item_content_1_inner_2_p1">OEE：</p>
|
||
<p class="item_content_1_inner_2_p2">{{sbgl_jo3.oee}}</p>
|
||
</div>
|
||
<div class="item_content_1_inner_2 item_content_1_inner_2_bg">
|
||
<p class="item_content_1_inner_2_p1">MIBF：</p>
|
||
<p class="item_content_1_inner_2_p2">{{sbgl_jo3.MIBF}}h</p>
|
||
</div>
|
||
<div class="item_content_1_inner_2 item_content_1_inner_2_bg">
|
||
<p class="item_content_1_inner_2_p1">MTTR：</p>
|
||
<p class="item_content_1_inner_2_p2">{{sbgl_jo3.MTTR}}h</p>
|
||
</div>
|
||
<div class="item_content_1_inner_2">
|
||
<p class="item_content_1_inner_2_p1 cred">报警：</p>
|
||
<p class="item_content_1_inner_2_p2 cred">{{sbgl_jo3.err_times}}次</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="item_wrap">
|
||
<div class="item_tip">
|
||
<div class="item_tip_left">设备产能利用</div>
|
||
</div>
|
||
<div class="item_content_1">
|
||
<div id="echart_d02" style="width: 100%; height: 100%"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="center_wrap">
|
||
<div class="item_wrap_1 inlblock">
|
||
<div class="item_tip item_tip_01">
|
||
<div class="item_tip_left">设备综合效率OEE&产能利用效率TEEP</div>
|
||
</div>
|
||
<div class="item_content_1">
|
||
<div id="echart_d03" style="width: 100%; height: 100%"></div>
|
||
</div>
|
||
</div>
|
||
<div class="item_wrap_1 inlblock">
|
||
<div class="item_tip item_tip_01">
|
||
<div class="item_tip_left">运行设备大类产能比</div>
|
||
</div>
|
||
<div class="item_content_1">
|
||
<div id="echart_d04" style="width: 100%; height: 100%"></div>
|
||
</div>
|
||
</div>
|
||
<div class="item_wrap_2 item_wrap_3">
|
||
<div class="item_tip item_tip_2">
|
||
<div class="item_tip_left">设备综合统计</div>
|
||
</div>
|
||
<div class="item_content_1">
|
||
<div id="echart_d05" style="width: 100%; height: 100%"></div>
|
||
</div>
|
||
</div>
|
||
<div class="item_wrap_2">
|
||
<div class="item_tip item_tip_2">
|
||
<div class="item_tip_left">设备状态列表</div>
|
||
</div>
|
||
<div class="item_content_2">
|
||
<div class="scroll_wrap">
|
||
<ul class="scroll_tab_1">
|
||
<li>设备编号</li>
|
||
<li>设备名称</li>
|
||
<li>设备大类</li>
|
||
<li>设备状态</li>
|
||
<!-- <li>产量</li> -->
|
||
<li>开机时间</li>
|
||
<li>关机时间</li>
|
||
<!-- <li>生产日期</li> -->
|
||
</ul>
|
||
<div class="scroll_container_1 scroll_container_3" v-show="array1.length">
|
||
<vue-seamless-scroll :data="array1" :class-option="defaultOption1">
|
||
<ul class="scroll-ul_1">
|
||
<li v-for="(e, i) in array1" :key="i">
|
||
<div class="scroll-ul_1_div">{{e.device_code}}</div>
|
||
<div class="scroll-ul_1_div">{{e.device_name}}</div>
|
||
<div class="scroll-ul_1_div">{{e.workprocedure_name}}</div>
|
||
<div class="scroll-ul_1_div scroll-ul_1_div4"><span :style="{'background-color': e.color}"></span><i>{{e.device_status}}</i></div>
|
||
<!-- <div class="scroll-ul_1_div">{{e.product_qty}}</div> -->
|
||
<div class="scroll-ul_1_div">{{e.start_time}}</div>
|
||
<div class="scroll-ul_1_div">{{e.end_time}}</div>
|
||
<!-- <div class="scroll-ul_1_div">{{e.product_time}}</div> -->
|
||
</li>
|
||
</ul>
|
||
</vue-seamless-scroll>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="right_wrap">
|
||
<div class="item_wrap">
|
||
<div class="item_tip">
|
||
<div class="item_tip_left">设备TOP10故障次数</div>
|
||
</div>
|
||
<div class="item_content_1">
|
||
<div id="echart_d08" style="width: 100%; height: 100%"></div>
|
||
</div>
|
||
</div>
|
||
<div class="item_wrap">
|
||
<div class="item_tip">
|
||
<div class="item_tip_left">设备报警信息</div>
|
||
</div>
|
||
<div class="item_content_4">
|
||
<div class="scroll_wrap">
|
||
<ul class="scroll_tab_2">
|
||
<li>编号</li>
|
||
<li>名称</li>
|
||
<li>报警原因</li>
|
||
<li>报警时间</li>
|
||
</ul>
|
||
<div class="scroll_container_2">
|
||
<vue-seamless-scroll :data="array2" :class-option="defaultOption2">
|
||
<ul class="scroll-ul_2">
|
||
<li v-for="(e, i) in array2" :key="i">
|
||
<div class="scroll-ul_2_div">{{e.device_code}}</div>
|
||
<div class="scroll-ul_2_div">{{e.device_name}}</div>
|
||
<div class="scroll-ul_2_div">{{e.err_name}}</div>
|
||
<div class="scroll-ul_2_div">{{e.start_time}}</div>
|
||
</li>
|
||
</ul>
|
||
</vue-seamless-scroll>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="item_wrap">
|
||
<div class="item_tip">
|
||
<div class="item_tip_left">近10天设备故障统计</div>
|
||
</div>
|
||
<!-- <div class="item_content_5">
|
||
<div id="echart_d4" style="width: 100%; height: 100%"></div>
|
||
</div> -->
|
||
<div class="item_content_1">
|
||
<div id="echart_d10" style="width: 100%; height: 100%"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import {deviceStatus, oeeAndTeep, queryDeviceByWork, deviceErrorNum, deviceManage, deviceCensus, deviceErrorInfo, deviceUseRate, deviceStatusList, errCensus} from '@js/getData1.js'
|
||
import * as echarts from 'echarts'
|
||
export default {
|
||
name: 'DeviceScreen',
|
||
data () {
|
||
return {
|
||
interTime: this.$store.getters.setTime,
|
||
timer1: null,
|
||
timer2: null,
|
||
timer4: null,
|
||
timeOut1: null,
|
||
timeOut2: null,
|
||
timeOut3: null,
|
||
totalNum: '',
|
||
// arrR01: [
|
||
// {
|
||
// color: '#2D7CEB',
|
||
// name: '正常运行',
|
||
// value: '10'
|
||
// },
|
||
// {
|
||
// color: '#07E083',
|
||
// name: '暂未生产',
|
||
// value: '20'
|
||
// },
|
||
// {
|
||
// color: '#00D5FF',
|
||
// name: '空闲设备',
|
||
// value: '30'
|
||
// },
|
||
// {
|
||
// color: '#CC6060',
|
||
// name: '故障设备',
|
||
// value: '40'
|
||
// }
|
||
// ],
|
||
arrR01: [],
|
||
data01: [{value: 500, name: '正常运行'}, {value: 300, name: '暂未生产'}, {value: 200, name: '空闲设备'}, {value: 100, name: '故障设备'}],
|
||
sbgl_jo1: {},
|
||
sbgl_jo2: {},
|
||
sbgl_jo3: {},
|
||
data03: '',
|
||
chartData1: [],
|
||
chartData2: [],
|
||
// chartData1: [
|
||
// {
|
||
// teep: '31',
|
||
// workprocedure_name: 'D001'
|
||
// },
|
||
// {
|
||
// teep: '22',
|
||
// workprocedure_name: 'D002'
|
||
// },
|
||
// {
|
||
// teep: '10',
|
||
// workprocedure_name: 'D003'
|
||
// },
|
||
// {
|
||
// teep: '38',
|
||
// workprocedure_name: 'D004'
|
||
// },
|
||
// {
|
||
// teep: '15',
|
||
// workprocedure_name: 'D005'
|
||
// },
|
||
// {
|
||
// teep: '66',
|
||
// workprocedure_name: 'D006'
|
||
// },
|
||
// {
|
||
// teep: '77',
|
||
// workprocedure_name: 'D007'
|
||
// }
|
||
// ],
|
||
// chartData2: [
|
||
// {
|
||
// err_times: '21',
|
||
// device_name: 'SBGZ0001'
|
||
// },
|
||
// {
|
||
// err_times: '32',
|
||
// device_name: 'SBGZ0002'
|
||
// },
|
||
// {
|
||
// err_times: '60',
|
||
// device_name: 'SBGZ0003'
|
||
// },
|
||
// {
|
||
// err_times: '78',
|
||
// device_name: 'SBGZ0004'
|
||
// },
|
||
// {
|
||
// err_times: '12',
|
||
// device_name: 'SBGZ0005'
|
||
// },
|
||
// {
|
||
// err_times: '6',
|
||
// device_name: 'SBGZ0006'
|
||
// },
|
||
// {
|
||
// err_times: '88',
|
||
// device_name: 'SBGZ0007'
|
||
// }
|
||
// ],
|
||
xData: ['无屑下料机', '三通成型机', '推弯一体机', 'L22-35货压机'], // 横坐标
|
||
yData: [23, 24, 18, 25], // 人数数据
|
||
taskDate: [10, 11, 9, 17],
|
||
taskDate2: [15, 19, 3, 23],
|
||
data05_d0: [],
|
||
data05_d1: [],
|
||
data05_d2: [],
|
||
data05_d3: [],
|
||
data05_d4: [],
|
||
data06_d0: [],
|
||
data06_d1: [],
|
||
timer: null,
|
||
time: '',
|
||
hours: '',
|
||
minutes: '',
|
||
seconds: '',
|
||
date: '',
|
||
week: '',
|
||
myCharts01: '',
|
||
myCharts02: '',
|
||
myCharts03: '',
|
||
myCharts04: '',
|
||
myCharts05: '',
|
||
myCharts08: '',
|
||
myCharts10: '',
|
||
myCharts2: '',
|
||
myCharts3: '',
|
||
myCharts4: '',
|
||
// array1: [{material_code: '001'}, {material_code: '001'}, {material_code: '001'}, {material_code: '001'}, {material_code: '001'}, {material_code: '001'}],
|
||
// array2: [{material_code: '01'}, {material_code: '01'}, {material_code: '01'}, {material_code: '01'}],
|
||
array1: [],
|
||
array2: []
|
||
}
|
||
},
|
||
computed: {
|
||
defaultOption1 () {
|
||
return {
|
||
step: 0.4, // 数值越大速度滚动越快
|
||
limitMoveNum: 5, // 开始无缝滚动的数据量 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)
|
||
}
|
||
},
|
||
defaultOption2 () {
|
||
return {
|
||
step: 0.4, // 数值越大速度滚动越快
|
||
limitMoveNum: 5, // 开始无缝滚动的数据量 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)
|
||
}
|
||
}
|
||
},
|
||
// created () {
|
||
// this.refresh()
|
||
// },
|
||
mounted () {
|
||
this.refresh()
|
||
setTimeout(() => {
|
||
this.$router.push('/MonitoringScreen')
|
||
}, 5000)
|
||
},
|
||
beforeDestroy () {
|
||
this.$once('hook:beforeDestroy', () => {
|
||
clearInterval(this.timer1)
|
||
clearInterval(this.timer2)
|
||
clearInterval(this.interTime)
|
||
clearInterval(this.timeOut1)
|
||
clearInterval(this.timeOut2)
|
||
clearInterval(this.timeOut3)
|
||
})
|
||
},
|
||
methods: {
|
||
initData () {
|
||
this._deviceStatus()
|
||
this._deviceManage()
|
||
this._deviceUseRate()
|
||
this._oeeAndTeep()
|
||
this._queryDeviceByWork() // gun
|
||
this._deviceCensus()
|
||
this._deviceStatusList() // 中grid
|
||
this._deviceErrorNum()
|
||
this._deviceErrorInfo() // 右grid
|
||
},
|
||
refresh () {
|
||
this.initData()
|
||
this._errCensus() // 右下
|
||
this.timer2 = setInterval(() => {
|
||
this.initData()
|
||
}, this.interTime)
|
||
this.timer1 = setInterval(() => {
|
||
this._errCensus()
|
||
}, 60000)
|
||
},
|
||
fontSize (res) {
|
||
const clientWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth
|
||
if (!clientWidth) return
|
||
let fontSize = clientWidth * res / 1920
|
||
return fontSize
|
||
},
|
||
updateTime () {
|
||
let cd = new Date()
|
||
let year = cd.getFullYear()
|
||
let month = cd.getMonth() + 1 < 10 ? '0' + (cd.getMonth() + 1) : cd.getMonth() + 1
|
||
let date = cd.getDate() < 10 ? '0' + cd.getDate() : cd.getDate()
|
||
let hh = cd.getHours() < 10 ? '0' + cd.getHours() : cd.getHours()
|
||
let mm = cd.getMinutes() < 10 ? '0' + cd.getMinutes() : cd.getMinutes()
|
||
let ss = cd.getSeconds() < 10 ? '0' + cd.getSeconds() : cd.getSeconds()
|
||
var weekday = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
|
||
let myddy = new Date().getDay()
|
||
let week = weekday[myddy]
|
||
this.time = `${hh}:${mm}:${ss}`
|
||
this.hours = `${hh}`
|
||
this.minutes = `${mm}`
|
||
this.seconds = `${ss}`
|
||
this.date = `${year}年${month}月${date}日`
|
||
this.week = `${week}`
|
||
},
|
||
setEchart08 () {
|
||
var dataLine = this.data06_d1
|
||
let numMax = Math.max.apply(null, dataLine)
|
||
let manNum = numMax + 1
|
||
let positionLeft = 0.4
|
||
let max = manNum + 2 * positionLeft
|
||
// var dataLine = [5, 66, 33, 25, 10]
|
||
// let positionLeft = 0.4
|
||
// let max = 100 + 2 * positionLeft
|
||
var option = {
|
||
grid: [
|
||
{
|
||
left: '8%',
|
||
top: '5%',
|
||
right: '5%',
|
||
bottom: '0%',
|
||
containLabel: true
|
||
},
|
||
{
|
||
left: '10%',
|
||
top: '5%',
|
||
right: '5%',
|
||
bottom: '0%',
|
||
containLabel: true
|
||
}
|
||
],
|
||
xAxis: [{
|
||
max: max,
|
||
show: false
|
||
}],
|
||
yAxis: [
|
||
{
|
||
axisTick: 'none',
|
||
axisLine: 'none',
|
||
offset: '5',
|
||
axisLabel: {
|
||
textStyle: {
|
||
color: '#8FABBF', // y轴字体颜色
|
||
fontSize: '12'
|
||
}
|
||
},
|
||
data: this.data06_d0
|
||
// data: ['设备01', '设备02', '设备03', '设备04', '设备05']
|
||
},
|
||
{
|
||
axisTick: 'none',
|
||
axisLine: 'none',
|
||
show: false,
|
||
axisLabel: {
|
||
textStyle: {
|
||
color: '#ffffff',
|
||
fontSize: '12'
|
||
}
|
||
},
|
||
data: [1, 1, 1, 1]
|
||
},
|
||
{
|
||
axisLine: {
|
||
lineStyle: {
|
||
type: [8, 4],
|
||
dashOffset: 4,
|
||
// color: 'rgba(0,0,0,0)' // y轴线颜色
|
||
color: '#3D5266', // y轴线颜色
|
||
opacity: 0.4
|
||
}
|
||
},
|
||
data: []
|
||
},
|
||
{
|
||
// 设置柱状图右边参数
|
||
show: true,
|
||
inverse: true,
|
||
data: [],
|
||
axisLine: {
|
||
show: false
|
||
},
|
||
splitLine: {
|
||
show: false
|
||
},
|
||
axisTick: {
|
||
show: false
|
||
}
|
||
}
|
||
],
|
||
series: [
|
||
{
|
||
name: '条',
|
||
type: 'bar',
|
||
stack: 'b',
|
||
yAxisIndex: 0,
|
||
data: dataLine,
|
||
barGap: '400%', // 柱图间距
|
||
label: {
|
||
normal: {
|
||
show: false,
|
||
position: 'right',
|
||
distance: 2,
|
||
formatter: function (param) {
|
||
return param.value + '%'
|
||
},
|
||
textStyle: {
|
||
color: '#ffffff',
|
||
fontSize: '16'
|
||
}
|
||
}
|
||
},
|
||
barWidth: 8,
|
||
// itemStyle: {
|
||
// normal: {
|
||
// color: new echarts.graphic.LinearGradient(
|
||
// 1, 0, 0, 0,
|
||
// [
|
||
// {offset: 0, color: '#FF0000'},
|
||
// {offset: 1, color: '#FF7744'}
|
||
// ]
|
||
// ),
|
||
// barBorderRadius: 0
|
||
// }
|
||
// },
|
||
itemStyle: {
|
||
normal: {
|
||
color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
|
||
{
|
||
offset: 0,
|
||
color: '#B68845',
|
||
opacity: 1
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: 'rgba(134,98,45,0.25)',
|
||
opacity: 0.25
|
||
}
|
||
]),
|
||
barBorderRadius: 0
|
||
}
|
||
},
|
||
z: 2
|
||
},
|
||
{
|
||
name: '外框',
|
||
type: 'bar',
|
||
yAxisIndex: 2,
|
||
barGap: '-100%',
|
||
data: [100, 100, 100, 100, 100, 100, 100, 100, 100, 100],
|
||
barWidth: 23,
|
||
label: {
|
||
normal: {
|
||
show: true,
|
||
position: 'right',
|
||
distance: 2,
|
||
color: '#ffffff',
|
||
formatter: function (data) {
|
||
return dataLine[data.dataIndex] + '次'
|
||
}
|
||
}
|
||
},
|
||
itemStyle: {
|
||
normal: {
|
||
// color: '#ffffff',
|
||
color: '#00000000', // #8个f代表黑色全透明
|
||
barBorderRadius: 0
|
||
}
|
||
},
|
||
z: 0
|
||
}
|
||
]
|
||
}
|
||
let echart = document.getElementById('echart_d08')
|
||
this.myCharts08 = this.$echarts.init(echart)
|
||
this.myCharts08.setOption(option)
|
||
window.addEventListener('resize', () => {
|
||
this.myCharts08.resize()
|
||
})
|
||
},
|
||
setEchart01 () {
|
||
let data = this.data01
|
||
var option = {
|
||
// legend: {
|
||
// orient: 'vertical',
|
||
// right: 0,
|
||
// data: ['正常运行', '暂未生产', '空闲设备', '故障设备'],
|
||
// textStyle: {
|
||
// color: '#ffffff',
|
||
// fontSize: '12'
|
||
// }
|
||
// },
|
||
color: ['#0966E8', '#07E083', '#00D5FF', '#CC6060'],
|
||
series: [
|
||
{
|
||
type: 'pie',
|
||
radius: ['50%', '70%'],
|
||
label: {
|
||
formatter: ''
|
||
},
|
||
labelLine: {
|
||
show: false
|
||
},
|
||
data: data
|
||
}
|
||
]
|
||
}
|
||
let echart = document.getElementById('echart_d01')
|
||
this.myCharts01 = this.$echarts.init(echart)
|
||
this.myCharts01.setOption(option)
|
||
window.addEventListener('resize', () => {
|
||
this.myCharts01.resize()
|
||
})
|
||
},
|
||
setEchart04 () {
|
||
// 多列柱状图
|
||
// 到外面壳边框的距离
|
||
let option = {
|
||
dataZoom: [
|
||
{
|
||
show: false, // 为true滚动条出现
|
||
type: 'slider', // type:'inside'，滚动条在最下面，鼠标点击滚动
|
||
startValue: 0, // 从头开始。
|
||
endValue: 2 // end百分比显示范围，endValue具体显示几个数值
|
||
}
|
||
],
|
||
grid: {
|
||
top: this.fontSize(50),
|
||
left: 0,
|
||
right: this.fontSize(25),
|
||
bottom: 0,
|
||
containLabel: true
|
||
},
|
||
// 图例
|
||
legend: {
|
||
// icon: 'rect',
|
||
textStyle: {
|
||
color: '#fff',
|
||
fontSize: 14,
|
||
lineHeight: 14
|
||
},
|
||
itemGap: 30.86,
|
||
itemWidth: 14.16,
|
||
itemHeight: 7.38,
|
||
data: [{name: '最大产能', itemStyle: {color: '#0E90FD'}}, {name: '平均产能', itemStyle: {color: '#33CCCC'}}, {name: '最小产能', itemStyle: {color: '#EAAD24'}}]
|
||
},
|
||
xAxis: {
|
||
type: 'category',
|
||
axisTick: {
|
||
show: false
|
||
},
|
||
axisLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
width: 2,
|
||
color: '#8FABBF'
|
||
}
|
||
},
|
||
axisLabel: {
|
||
interval: 0,
|
||
textStyle: {
|
||
color: '#8FABBF',
|
||
fontSize: 14
|
||
}
|
||
},
|
||
data: this.xData
|
||
},
|
||
yAxis: {
|
||
type: 'value',
|
||
axisLine: {
|
||
show: false
|
||
},
|
||
splitNumber: 2,
|
||
axisTick: {
|
||
show: false
|
||
},
|
||
axisLabel: {
|
||
textStyle: {
|
||
color: '#8FABBF',
|
||
fontSize: 14
|
||
}
|
||
},
|
||
splitLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
type: [8, 4],
|
||
dashOffset: 4,
|
||
color: '#8FABBF',
|
||
opacity: 0.2
|
||
}
|
||
}
|
||
},
|
||
series: [
|
||
{
|
||
type: 'bar', // 形状为柱状图
|
||
data: this.yData,
|
||
name: '最大产能', // legend属性
|
||
barGap: '150%', // 柱图间距
|
||
barWidth: '8', // 柱图宽度
|
||
itemStyle: {
|
||
normal: {
|
||
show: true,
|
||
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
|
||
}
|
||
])
|
||
}
|
||
}
|
||
},
|
||
{
|
||
type: 'line', // 形状为折线图
|
||
data: this.taskDate2,
|
||
name: '最小产能', // legend属性
|
||
barGap: '150%', // 柱图间距
|
||
barWidth: '8', // 柱图宽度
|
||
itemStyle: {
|
||
normal: {
|
||
show: true,
|
||
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
|
||
}
|
||
])
|
||
}
|
||
}
|
||
},
|
||
{
|
||
type: 'bar', // 形状为柱状图
|
||
data: this.taskDate,
|
||
name: '平均产能', // legend属性
|
||
barGap: '150%', // 柱图间距
|
||
barWidth: '8', // 柱图宽度
|
||
itemStyle: {
|
||
normal: {
|
||
show: true,
|
||
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
{
|
||
offset: 0,
|
||
color: '#33CCCC',
|
||
opacity: 1
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: 'rgba(31,89,89,0.25)',
|
||
opacity: 0.25
|
||
}
|
||
])
|
||
}
|
||
}
|
||
}
|
||
]
|
||
}
|
||
let echart = document.getElementById('echart_d04')
|
||
this.myCharts04 = this.$echarts.init(echart)
|
||
this.myCharts04.setOption(option)
|
||
this.autoMove(option, 1)
|
||
window.addEventListener('resize', () => {
|
||
this.myCharts04.resize()
|
||
})
|
||
},
|
||
setEchart03 () {
|
||
let d03 = this.data03
|
||
let data1 = [d03.oee.value1, d03.teep.value1]
|
||
let data2 = [d03.oee.value2, d03.teep.value2]
|
||
let data3 = [d03.oee.value3, d03.teep.value3]
|
||
// let data1 = [50, 80]
|
||
// let data2 = [50, 69]
|
||
// let data3 = [25, 88]
|
||
let option = {
|
||
grid: {
|
||
top: 50,
|
||
left: 0,
|
||
right: 0,
|
||
bottom: 0,
|
||
containLabel: true
|
||
},
|
||
legend: {
|
||
icon: 'rect',
|
||
textStyle: {
|
||
color: '#fff',
|
||
fontSize: 14,
|
||
lineHeight: 14
|
||
},
|
||
itemGap: 30.86,
|
||
itemWidth: 14.16,
|
||
itemHeight: 7.38,
|
||
data: [{name: '过去一个月', itemStyle: {color: '#0E90FD'}}, {name: '目标', itemStyle: {color: '#33CCCC'}}, {name: '实际', itemStyle: {color: '#EAAD24'}}]
|
||
},
|
||
xAxis: {
|
||
type: 'category',
|
||
axisTick: {
|
||
show: false
|
||
},
|
||
axisLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
width: 2,
|
||
color: '#8FABBF'
|
||
}
|
||
},
|
||
axisLabel: {
|
||
interval: 0,
|
||
textStyle: {
|
||
color: '#8FABBF',
|
||
fontSize: 14
|
||
}
|
||
},
|
||
data: ['设备综合效率OEE', '产能利用效率TEEP']
|
||
},
|
||
yAxis: {
|
||
type: 'value',
|
||
axisLine: {
|
||
show: false
|
||
},
|
||
splitNumber: 2,
|
||
axisTick: {
|
||
show: false
|
||
},
|
||
axisLabel: {
|
||
formatter: '{value} %',
|
||
textStyle: {
|
||
color: '#8FABBF',
|
||
fontSize: 14
|
||
}
|
||
},
|
||
splitLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
type: [8, 4],
|
||
dashOffset: 4,
|
||
color: '#8FABBF',
|
||
opacity: 0.2
|
||
}
|
||
}
|
||
},
|
||
series: [
|
||
{
|
||
name: '过去一个月',
|
||
type: 'bar',
|
||
barGap: '400%', // 柱图间距
|
||
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
|
||
}
|
||
])
|
||
}
|
||
},
|
||
label: {
|
||
// 柱状图上方文本标签，默认展示数值信息
|
||
show: true,
|
||
position: 'top',
|
||
textStyle: {
|
||
color: '#8FABBF',
|
||
fontSize: 14
|
||
},
|
||
formatter: function (data) {
|
||
return data.value + '%'
|
||
}
|
||
},
|
||
data: data1
|
||
},
|
||
{
|
||
name: '目标',
|
||
type: 'bar',
|
||
barGap: '400%', // 柱图间距
|
||
barWidth: '8', // 柱图宽度
|
||
itemStyle: {
|
||
normal: {
|
||
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
{
|
||
offset: 0,
|
||
color: '#33CCCC',
|
||
opacity: 1
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: 'rgba(31,89,89,0.25)',
|
||
opacity: 0.25
|
||
}
|
||
])
|
||
}
|
||
},
|
||
label: {
|
||
// 柱状图上方文本标签，默认展示数值信息
|
||
show: true,
|
||
position: 'top',
|
||
textStyle: {
|
||
color: '#8FABBF',
|
||
fontSize: 14
|
||
},
|
||
formatter: function (data) {
|
||
return data.value + '%'
|
||
}
|
||
},
|
||
data: data2
|
||
},
|
||
{
|
||
name: '实际',
|
||
type: 'bar',
|
||
barGap: '400%', // 柱图间距
|
||
// barCategoryGap: '10%',
|
||
barWidth: '8', // 柱图宽度
|
||
itemStyle: {
|
||
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
|
||
}
|
||
])
|
||
}
|
||
},
|
||
label: {
|
||
// 柱状图上方文本标签，默认展示数值信息
|
||
show: true,
|
||
position: 'top',
|
||
textStyle: {
|
||
color: '#8FABBF',
|
||
fontSize: 14
|
||
},
|
||
formatter: function (data) {
|
||
return data.value + '%'
|
||
}
|
||
},
|
||
data: data3
|
||
}
|
||
]
|
||
}
|
||
let echart = document.getElementById('echart_d03')
|
||
this.myCharts03 = this.$echarts.init(echart)
|
||
this.myCharts03.setOption(option)
|
||
window.addEventListener('resize', () => {
|
||
this.myCharts03.resize()
|
||
})
|
||
},
|
||
setEchart05 () {
|
||
let option = {
|
||
grid: {
|
||
top: 50,
|
||
left: 0,
|
||
right: 0,
|
||
bottom: 0,
|
||
containLabel: true
|
||
},
|
||
legend: {
|
||
icon: 'rect',
|
||
textStyle: {
|
||
color: '#fff',
|
||
fontSize: 14,
|
||
lineHeight: 14
|
||
},
|
||
itemGap: 30.86,
|
||
itemWidth: 14.16,
|
||
itemHeight: 7.38,
|
||
data: [{name: '运行设备', itemStyle: {color: '#0E90FD'}}, {name: '暂未生产设备', itemStyle: {color: '#07E083'}}, {name: '关机设备', itemStyle: {color: '#EAAD24'}}, {name: '故障设备', itemStyle: {color: '#CC6060'}}]
|
||
},
|
||
xAxis: {
|
||
type: 'category',
|
||
axisTick: {
|
||
show: false
|
||
},
|
||
axisLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
width: 2,
|
||
color: '#8FABBF'
|
||
}
|
||
},
|
||
axisLabel: {
|
||
interval: 0,
|
||
textStyle: {
|
||
color: '#8FABBF',
|
||
fontSize: 14
|
||
}
|
||
},
|
||
data: this.data05_d0
|
||
// data: ['无屑下料机1', '无屑下料机1', '无屑下料机1', '无屑下料机1', '无屑下料机1', '无屑下料机1']
|
||
},
|
||
yAxis: {
|
||
type: 'value',
|
||
axisLine: {
|
||
show: false
|
||
},
|
||
splitNumber: 2,
|
||
axisTick: {
|
||
show: false
|
||
},
|
||
axisLabel: {
|
||
textStyle: {
|
||
color: '#8FABBF',
|
||
fontSize: 14
|
||
}
|
||
},
|
||
splitLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
type: [8, 4],
|
||
dashOffset: 4,
|
||
color: '#8FABBF',
|
||
opacity: 0.2
|
||
}
|
||
}
|
||
},
|
||
series: [
|
||
{
|
||
name: '运行设备',
|
||
type: 'bar',
|
||
barWidth: '8',
|
||
barGap: '100%', // 柱图间距
|
||
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: this.data05_d1
|
||
// data: ['390', '390', '390', '390', '390', '390']
|
||
},
|
||
{
|
||
name: '暂未生产设备',
|
||
type: 'bar',
|
||
barWidth: '8',
|
||
barGap: '100%', // 柱图间距
|
||
itemStyle: {
|
||
normal: {
|
||
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
{
|
||
offset: 0,
|
||
color: '#07E083',
|
||
opacity: 1
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: 'rgba(31,89,89,0.25)',
|
||
opacity: 0.25
|
||
}
|
||
])
|
||
}
|
||
},
|
||
data: this.data05_d2
|
||
// data: ['230', '230', '230', '230', '230', '230']
|
||
},
|
||
{
|
||
name: '关机设备',
|
||
type: 'bar',
|
||
barWidth: '8',
|
||
barGap: '100%', // 柱图间距
|
||
itemStyle: {
|
||
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
|
||
}
|
||
])
|
||
}
|
||
},
|
||
data: this.data05_d3
|
||
// data: ['210', '210', '210', '210', '210', '210']
|
||
},
|
||
{
|
||
name: '故障设备',
|
||
type: 'bar',
|
||
barWidth: '8',
|
||
barGap: '100%', // 柱图间距
|
||
itemStyle: {
|
||
normal: {
|
||
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
{
|
||
offset: 0,
|
||
color: '#CC6060',
|
||
opacity: 1
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: 'rgba(123,33,33,0.25)',
|
||
opacity: 0.25
|
||
}
|
||
])
|
||
}
|
||
},
|
||
data: this.data05_d4
|
||
// data: ['110', '110', '110', '110', '110', '110']
|
||
}
|
||
]
|
||
}
|
||
let echart = document.getElementById('echart_d05')
|
||
this.myCharts05 = this.$echarts.init(echart)
|
||
this.myCharts05.setOption(option)
|
||
window.addEventListener('resize', () => {
|
||
this.myCharts05.resize()
|
||
})
|
||
},
|
||
setEchart02 () {
|
||
// 左3
|
||
let total = []
|
||
let names = []
|
||
let max = 0
|
||
this.chartData1.map(el => {
|
||
total.push(el.teep)
|
||
names.push(el.workprocedure_name)
|
||
max = Math.max(max, Number(el.teep))
|
||
})
|
||
let option = {
|
||
dataZoom: [
|
||
{
|
||
show: false, // 为true滚动条出现
|
||
type: 'slider', // type:'inside'，滚动条在最下面，鼠标点击滚动
|
||
startValue: 0, // 从头开始。
|
||
endValue: 8 // end百分比显示范围，endValue具体显示几个数值
|
||
}
|
||
],
|
||
grid: {
|
||
top: 30,
|
||
left: 0,
|
||
right: 0,
|
||
bottom: 0,
|
||
borderColor: '#ffffff',
|
||
containLabel: true
|
||
},
|
||
xAxis: {
|
||
type: 'category',
|
||
axisTick: {
|
||
show: false
|
||
},
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: '#8FABBF ',
|
||
fontSize: 14,
|
||
lineHeight: 14
|
||
}
|
||
},
|
||
axisLabel: {
|
||
color: '#8FABBF ',
|
||
rotate: 50
|
||
},
|
||
data: names
|
||
},
|
||
yAxis: {
|
||
axisTick: {
|
||
show: false
|
||
},
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: '#909399'
|
||
}
|
||
},
|
||
// axisLabel: {
|
||
// color: '#909399'
|
||
// },
|
||
axisLabel: {
|
||
formatter: '{value} %',
|
||
textStyle: {
|
||
color: '#8FABBF',
|
||
fontSize: 14
|
||
}
|
||
},
|
||
splitLine: {
|
||
show: false,
|
||
lineStyle: {
|
||
type: [8, 4],
|
||
dashOffset: 4,
|
||
color: '#8FABBF',
|
||
opacity: 0.2
|
||
}
|
||
},
|
||
max: max
|
||
},
|
||
series: [
|
||
{
|
||
type: 'bar',
|
||
barWidth: 8,
|
||
itemStyle: {
|
||
normal: {
|
||
show: true,
|
||
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
{
|
||
offset: 0,
|
||
color: '#0E90FD',
|
||
opacity: 1
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: 'rgba(96,112,128,0.10)',
|
||
opacity: 0.1
|
||
}
|
||
]),
|
||
borderWidth: 0
|
||
}
|
||
},
|
||
// data: [100, 51, 90, 41, 91, 61, 51]
|
||
data: total,
|
||
label: {
|
||
show: true,
|
||
position: 'top',
|
||
// distance: 5,
|
||
// fontSize: 12,
|
||
textStyle: {
|
||
color: '#8FABBF',
|
||
fontSize: 14
|
||
},
|
||
formatter: function (data) {
|
||
return data.value + '%'
|
||
}
|
||
}
|
||
}
|
||
]
|
||
}
|
||
let echart = document.getElementById('echart_d02')
|
||
this.myCharts02 = this.$echarts.init(echart)
|
||
this.myCharts02.setOption(option)
|
||
this.autoMove(option, 2)
|
||
window.addEventListener('resize', () => {
|
||
this.myCharts02.resize()
|
||
})
|
||
},
|
||
setEchart10 () {
|
||
// 右3
|
||
let total = []
|
||
let names = []
|
||
let max = 0
|
||
this.chartData2.map(el => {
|
||
total.push(el.err_times)
|
||
names.push(el.device_name)
|
||
max = Math.max(max, Number(el.err_times))
|
||
})
|
||
let option = {
|
||
dataZoom: [
|
||
{
|
||
show: false, // 为true滚动条出现
|
||
type: 'slider', // type:'inside'，滚动条在最下面，鼠标点击滚动
|
||
startValue: 0, // 从头开始。
|
||
endValue: 9 // end百分比显示范围，endValue具体显示几个数值
|
||
}
|
||
],
|
||
grid: {
|
||
top: 30,
|
||
left: 0,
|
||
right: 0,
|
||
bottom: 0,
|
||
borderColor: '#ffffff',
|
||
containLabel: true
|
||
},
|
||
xAxis: {
|
||
type: 'category',
|
||
axisTick: {
|
||
show: false
|
||
},
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: '#8FABBF ',
|
||
fontSize: 14,
|
||
lineHeight: 14
|
||
}
|
||
},
|
||
axisLabel: {
|
||
color: '#8FABBF ',
|
||
rotate: 50
|
||
},
|
||
data: names
|
||
},
|
||
yAxis: {
|
||
axisTick: {
|
||
show: false
|
||
},
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: '#909399'
|
||
}
|
||
},
|
||
axisLabel: {
|
||
color: '#909399'
|
||
},
|
||
splitLine: {
|
||
show: false,
|
||
lineStyle: {
|
||
type: [8, 4],
|
||
dashOffset: 4,
|
||
color: '#8FABBF',
|
||
opacity: 0.2
|
||
}
|
||
},
|
||
max: max
|
||
},
|
||
series: [
|
||
{
|
||
type: 'bar',
|
||
barWidth: 8,
|
||
itemStyle: {
|
||
normal: {
|
||
show: true,
|
||
// color: '#67c23a',
|
||
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
{
|
||
offset: 0,
|
||
color: '#0E90FD',
|
||
opacity: 1
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: 'rgba(96,112,128,0.10)',
|
||
opacity: 0.1
|
||
}
|
||
]),
|
||
borderWidth: 0
|
||
}
|
||
},
|
||
// data: [100, 51, 90, 41, 91, 61, 51]
|
||
data: total
|
||
}
|
||
]
|
||
}
|
||
let echart = document.getElementById('echart_d10')
|
||
this.myCharts10 = this.$echarts.init(echart)
|
||
this.myCharts10.setOption(option)
|
||
this.autoMove(option, 3)
|
||
window.addEventListener('resize', () => {
|
||
this.myCharts10.resize()
|
||
})
|
||
},
|
||
autoMove (option, type) {
|
||
if (type === 1) {
|
||
this.timeOut1 = setInterval(() => {
|
||
if (Number(option.dataZoom[0].endValue) === option.series[0].data.length - 1) {
|
||
option.dataZoom[0].endValue = 2
|
||
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.myCharts04.setOption(option)
|
||
}, 5000)
|
||
}
|
||
if (type === 2) {
|
||
this.timeOut2 = setInterval(() => {
|
||
if (Number(option.dataZoom[0].endValue) === option.series[0].data.length - 1) {
|
||
option.dataZoom[0].endValue = 8
|
||
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.myCharts02.setOption(option)
|
||
}, 5000)
|
||
}
|
||
if (type === 3) {
|
||
this.timeOut3 = 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.myCharts10.setOption(option)
|
||
}, 5000)
|
||
}
|
||
},
|
||
/** 左1 */
|
||
async _deviceStatus () {
|
||
let res = await deviceStatus()
|
||
if (res.code === '1') {
|
||
this.totalNum = res.result.total_num
|
||
this.data01 = res.result.ja
|
||
let colors = ['#2D7CEB', '#07E083', '#00D5FF', '#CC6060']
|
||
res.result.ja.map((e, i) => {
|
||
this.$set(e, 'color', colors[i])
|
||
})
|
||
this.arrR01 = [...res.result.ja]
|
||
this.setEchart01() // 左1
|
||
} else {
|
||
this.Dialog(res.desc)
|
||
}
|
||
},
|
||
/** 左2 */
|
||
async _deviceManage () {
|
||
let res = await deviceManage()
|
||
if (res.code === '1') {
|
||
this.sbgl_jo1 = res.result.jo1
|
||
this.sbgl_jo2 = res.result.jo2
|
||
this.sbgl_jo3 = res.result.jo3
|
||
} else {
|
||
this.Dialog(res.desc)
|
||
}
|
||
},
|
||
/** 左3 */
|
||
async _deviceUseRate () {
|
||
let res = await deviceUseRate()
|
||
if (res.code === '1') {
|
||
this.chartData1 = res.result
|
||
if (res.result.length) {
|
||
clearInterval(this.timeOut2)
|
||
this.setEchart02() // 左3
|
||
}
|
||
// this.setEchart02() // 左3
|
||
} else {
|
||
this.Dialog(res.desc)
|
||
}
|
||
},
|
||
/** 中1 */
|
||
async _oeeAndTeep () {
|
||
let res = await oeeAndTeep()
|
||
if (res.code === '1') {
|
||
this.data03 = res.result
|
||
this.setEchart03() // 中1
|
||
} else {
|
||
this.Dialog(res.desc)
|
||
}
|
||
},
|
||
/** 中2 */
|
||
async _queryDeviceByWork () {
|
||
let res = await queryDeviceByWork()
|
||
if (res.code === '1') {
|
||
this.xData = []
|
||
this.yData = []
|
||
this.taskDate = []
|
||
this.taskDate2 = []
|
||
res.result.map((e, i) => {
|
||
this.xData.push(e.workprocedure_name)
|
||
this.yData.push(e.max_productivity)
|
||
this.taskDate.push(e.ave_productivity)
|
||
this.taskDate2.push(e.min_productivity)
|
||
})
|
||
if (res.result.length) {
|
||
clearInterval(this.timeOut1)
|
||
this.setEchart04() // 中2
|
||
}
|
||
} else {
|
||
this.Dialog(res.desc)
|
||
}
|
||
},
|
||
/** 中3 */
|
||
async _deviceCensus () {
|
||
let res = await deviceCensus()
|
||
if (res.code === '1') {
|
||
this.data05_d0 = []
|
||
this.data05_d1 = []
|
||
this.data05_d2 = []
|
||
this.data05_d3 = []
|
||
this.data05_d4 = []
|
||
res.result.map((e, i) => {
|
||
this.data05_d0.push(e.workprocedure_name)
|
||
this.data05_d1.push(e.run_device)
|
||
this.data05_d2.push(e.prepare_device)
|
||
this.data05_d3.push(e.free_device)
|
||
this.data05_d4.push(e.err_device)
|
||
})
|
||
this.setEchart05() // 中3
|
||
} else {
|
||
this.Dialog(res.desc)
|
||
}
|
||
},
|
||
/** 中4 */
|
||
async _deviceStatusList () {
|
||
let res = await deviceStatusList()
|
||
if (res.code === '1') {
|
||
// let colors = ['#2D7CEB', '#07E083', '#00D5FF', '#CC6060', '#fc0']
|
||
res.result.map((e, i) => {
|
||
if (e.device_status === '02') {
|
||
this.$set(e, 'color', '#2D7CEB')
|
||
}
|
||
if (e.device_status === '03') {
|
||
this.$set(e, 'color', '#07E083')
|
||
}
|
||
if (e.device_status === '04') {
|
||
this.$set(e, 'color', '#00D5FF')
|
||
}
|
||
if (e.device_status === '05') {
|
||
this.$set(e, 'color', '#CC6060')
|
||
}
|
||
if (e.device_status === '') {
|
||
this.$set(e, 'color', '#fc0')
|
||
}
|
||
})
|
||
this.array1 = res.result
|
||
} else {
|
||
this.Dialog(res.desc)
|
||
}
|
||
},
|
||
/** 右1 */
|
||
async _deviceErrorNum () {
|
||
let res = await deviceErrorNum()
|
||
if (res.code === '1') {
|
||
this.data06_d0 = []
|
||
this.data06_d1 = []
|
||
res.result.map((e, i) => {
|
||
this.data06_d0.push(e.device_name)
|
||
this.data06_d1.push(e.err_num)
|
||
})
|
||
this.setEchart08() // 右1
|
||
} else {
|
||
this.Dialog(res.desc)
|
||
}
|
||
},
|
||
/** 右2 */
|
||
async _deviceErrorInfo () {
|
||
let res = await deviceErrorInfo()
|
||
if (res.code === '1') {
|
||
this.array2 = res.result
|
||
} else {
|
||
this.Dialog(res.desc)
|
||
}
|
||
},
|
||
/** 右3 */
|
||
async _errCensus () {
|
||
let res = await errCensus()
|
||
if (res.code === '1') {
|
||
this.chartData2 = res.result
|
||
if (res.result.length) {
|
||
clearInterval(this.timeOut3)
|
||
this.setEchart10() // 右3
|
||
}
|
||
// this.setEchart10() // 右3
|
||
} else {
|
||
this.Dialog(res.desc)
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="stylus" scoped>
|
||
@import '~@css/mixin'
|
||
.bg
|
||
_wh(100%, 100%)
|
||
background #050d20 center center / 100% 100% url(../assets/images/screen1/bg.png) no-repeat
|
||
overflow hidden
|
||
header
|
||
width 100%
|
||
height 1rem
|
||
position relative
|
||
background center center / 100% 100% url(../assets/images/screen1/header.png) no-repeat
|
||
p
|
||
font-family "PangMenZhengDao"
|
||
_font(.48rem, 1rem, #ffffff, lighter, center)
|
||
letter-spacing .05rem
|
||
text-shadow 0 .08rem .08rem rgba(0,0,0,0.30)
|
||
.data_box
|
||
position absolute
|
||
right 0
|
||
top .14rem
|
||
height .37rem
|
||
.date, .week
|
||
padding-right .2rem
|
||
.time
|
||
width 1.7rem
|
||
text-align center
|
||
.date_item
|
||
float left
|
||
_font(.2rem, .37rem, #fff,,)
|
||
.tiem_item
|
||
float left
|
||
_font(.32rem, .37rem, #fff,,)
|
||
.colon
|
||
float left
|
||
_font(.32rem, .37rem, #fff,,)
|
||
.container
|
||
_wh(100%, calc(100% - 1.38rem))
|
||
padding .3rem .2509rem 0
|
||
overflow hidden
|
||
clear both
|
||
.bottom
|
||
_wh(100%, .38rem)
|
||
background center bottom / 19.06rem 100% url(../assets/images/screen1/bottom.png) no-repeat
|
||
.left_wrap
|
||
float left
|
||
_wh(4.0756rem, 100%)
|
||
.center_wrap
|
||
float left
|
||
// _wh(9.96rem, 100%)
|
||
_wh(10rem, 100%)
|
||
margin-left .2936rem
|
||
// padding .4rem .16rem
|
||
.right_wrap
|
||
float right
|
||
_wh(4.0273rem, 100%)
|
||
.item_wrap
|
||
_wh(100%, calc(100% / 3))
|
||
.item_tip
|
||
clear both
|
||
_wh(100%, .32rem)
|
||
line-height .32rem
|
||
background center center / 100% 100% url(../assets/images/screen1/title_bg_1.png) no-repeat
|
||
.item_tip_01
|
||
width 100%
|
||
background center center / 100% 100% url(../assets/images/screen1/title_bg_d1.png) no-repeat
|
||
.item_tip_2
|
||
background center center / 100% 100% url(../assets/images/screen1/title_bg_d2.png) no-repeat
|
||
.item_tip_left
|
||
float left
|
||
// _wh(60%, 100%)
|
||
_wh(100%, 100%)
|
||
font-family "SourceHanSansCN"
|
||
_font(.18rem, inherit, #fff, 700,)
|
||
letter-spacing .02rem
|
||
text-shadow 0 0 .09rem #159AFF
|
||
padding-left .38rem
|
||
.item_content_0
|
||
width 2.2rem
|
||
height 2.2rem
|
||
// _fj(space-around)
|
||
// padding .17rem 0 .24rem
|
||
.item_content_1
|
||
_wh(100%, calc(100% - .32rem))
|
||
_fj(space-around)
|
||
padding .17rem 0 .24rem
|
||
.item_content_1_inner
|
||
_wh(1.2rem, 100%)
|
||
background-color #011834
|
||
.item_content_1_inner_1
|
||
_wh(100%, .37rem)
|
||
font-family "SourceHanSansCN"
|
||
_font(.14rem, .37rem, #78B1DE, 700, center)
|
||
letter-spacing .02rem
|
||
background center center / 100% 100% url(../assets/images/screen1/item_1.png) no-repeat
|
||
.item_content_1_inner_2
|
||
_wh(100%, calc((100% - .37rem) / 4))
|
||
// overflow hidden
|
||
// _fj(space-evenly)
|
||
// flex-direction column
|
||
padding-top .06rem
|
||
.item_content_1_inner_2_bg
|
||
background center bottom / 1.02rem .03rem url(../assets/images/screen1/line_1.png) no-repeat
|
||
.item_content_1_inner_2_p1
|
||
float left
|
||
margin 0.17rem 0 0 0.08rem
|
||
font-family "SourceHanSansCN"
|
||
_font(.14rem, .14rem, #84B0DA, 700, left)
|
||
.item_content_1_inner_2_p2
|
||
float right
|
||
margin 0.15rem 0.08rem 0 0
|
||
font-family "SourceHanSansCN"
|
||
_font(.18rem, .18rem, #FFFFFF, 700, right)
|
||
.item_wrap_1
|
||
// _wh(100%, calc((100% - .4rem) / 2))
|
||
_wh(48.8%, calc((100% - .4rem) / 3))
|
||
.item_wrap_2
|
||
// _wh(100%, calc((100% - .4rem) / 2))
|
||
_wh(100%, calc((100% - .4rem) / 3))
|
||
.item_wrap_3
|
||
margin-top .26rem
|
||
.inlblock
|
||
display inline-block
|
||
margin-right 0.08rem
|
||
.item_content_2
|
||
_wh(100%, calc(100% - .32rem))
|
||
margin-top .06rem
|
||
border .01rem solid rgba(8,205,248,0.3)
|
||
.scroll_wrap
|
||
_wh(100%, 100%)
|
||
// scroll1
|
||
.scroll_tab_1
|
||
_wh(100%, .4rem)
|
||
border-bottom .01rem solid rgba(8,205,248,0.3)
|
||
li
|
||
float left
|
||
width 15%
|
||
_font(.14rem,.4rem,#78B1DE,,center)
|
||
word-wrap break-word
|
||
word-break break-all
|
||
white-space nowrap
|
||
padding 0 .02rem
|
||
overflow hidden
|
||
box-sizing border-box
|
||
&:nth-child(5)
|
||
width 20%
|
||
&:nth-child(6)
|
||
width 20%
|
||
.scroll_container_1
|
||
width 100%
|
||
height calc(100% - .4rem)
|
||
overflow hidden
|
||
.scroll-ul_1
|
||
li
|
||
_wh(100%, .4rem)
|
||
border-bottom .01rem solid rgba(8,205,248,0.3)
|
||
&: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
|
||
float left
|
||
_wh(15%, .4rem)
|
||
_fj(center)
|
||
_font(.14rem, .4rem, #fff,,center)
|
||
word-wrap break-word
|
||
word-break break-all
|
||
white-space nowrap
|
||
padding 0 .02rem
|
||
overflow hidden
|
||
&:nth-child(5)
|
||
width 20%
|
||
&:nth-child(6)
|
||
width 20%
|
||
&:nth-child(4)
|
||
// text-align left
|
||
span
|
||
// display inline-block
|
||
_wh(.0725rem, .0725rem)
|
||
border-radius 100%
|
||
background-color #2D7CEB
|
||
margin-right .1rem
|
||
// scroll2
|
||
.scroll_tab_2
|
||
_wh(100%, .4rem)
|
||
border-bottom .01rem solid rgba(8,205,248,0.3)
|
||
li
|
||
float left
|
||
width 18%
|
||
_font(.14rem,.4rem,#78B1DE,,center)
|
||
word-wrap break-word
|
||
word-break break-all
|
||
white-space nowrap
|
||
padding 0 .02rem
|
||
overflow hidden
|
||
box-sizing border-box
|
||
&:nth-child(4)
|
||
width 46%
|
||
.scroll_container_2
|
||
width 100%
|
||
height calc(100% - .4rem)
|
||
overflow hidden
|
||
.scroll-ul_2
|
||
li
|
||
_wh(100%, .44rem)
|
||
border-bottom .01rem solid rgba(8,205,248,0.3)
|
||
&: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_2_div
|
||
float left
|
||
_wh(18%, .44rem)
|
||
_fj(center)
|
||
_font(.12rem, .44rem, #fff,,center)
|
||
word-wrap break-word
|
||
word-break break-all
|
||
white-space nowrap
|
||
padding 0 .02rem
|
||
overflow hidden
|
||
&:nth-child(4)
|
||
font-size .12rem
|
||
width 46%
|
||
_fj(left)
|
||
_font(.12rem, .44rem, #fff,,left)
|
||
word-wrap break-word
|
||
word-break break-all
|
||
white-space nowrap
|
||
padding 0 .02rem
|
||
overflow hidden
|
||
.right_1_up
|
||
clear both
|
||
_wh(100%, 1.6rem)
|
||
padding 0 .3rem .2rem
|
||
background center bottom / 100% .03rem url(../assets/images/screen1/line_2.png) no-repeat
|
||
.right_1_up_left
|
||
float left
|
||
_wh(1.4rem, 1.4rem)
|
||
background center bottom / 100% 100% url(../assets/images/screen1/item_3.png) no-repeat
|
||
_fj(center)
|
||
.right_1_up_right
|
||
float right
|
||
_wh(1.71rem, 100%)
|
||
.right_1_up_right_item
|
||
_wh(100%, .6rem)
|
||
background center bottom / 100% 100% url(../assets/images/screen1/item_4.png) no-repeat
|
||
_fj(space-evenly)
|
||
flex-direction column
|
||
&:nth-child(2)
|
||
margin-top .2rem
|
||
.right_1_up_p1
|
||
font-family "SourceHanSansCN"
|
||
_font(.14rem, .14rem, #78B1DE, 700, center)
|
||
.right_1_up_p2
|
||
font-family "SourceHanSansCN"
|
||
_font(.18rem, .18rem, #fff, 700, center)
|
||
span
|
||
_font(.12rem, .18rem, #fff, 700, center)
|
||
.right_1_down
|
||
_wh(100%, calc(100% - 1.6rem))
|
||
padding .05rem .3rem 0
|
||
.right_1_down_inner_1
|
||
_wh(100%, .28rem)
|
||
overflow hidden
|
||
_fj()
|
||
div
|
||
&:nth-child(1)
|
||
font-family "SourceHanSansCN"
|
||
_font(.12rem, .28rem, #84B0DA, 700,)
|
||
letter-spacing .0171rem
|
||
&:nth-child(2)
|
||
font-family "SourceHanSansCN"
|
||
_font(.16rem, .28rem, #fff, 700, right)
|
||
letter-spacing .02rem
|
||
.right_1_down_inner_2
|
||
_wh(100%, .1811rem)
|
||
background-color rgba(0,213,255,0.20)
|
||
_fj()
|
||
div
|
||
&:nth-child(1)
|
||
_wh(50%, .0805rem)
|
||
background-color #07E083
|
||
&:nth-child(2)
|
||
_wh(50%, .0805rem)
|
||
background-color #B68845
|
||
.right_1_down_inner_3
|
||
_wh(100%, .3rem)
|
||
margin-top .1rem
|
||
_fj()
|
||
.right_1_down_inner_3_i
|
||
_wh(1.83rem, .3rem)
|
||
_fj()
|
||
background center bottom / 100% 100% url(../assets/images/screen1/item_5.png) no-repeat
|
||
.right_1_down_inner_3_l
|
||
_wh(50%, 100%)
|
||
overflow hidden
|
||
_fj()
|
||
span
|
||
display block
|
||
&:nth-child(1)
|
||
_wh(.0725rem, .0725rem)
|
||
border-radius 100%
|
||
background-color #2D7CEB
|
||
margin-left .15rem
|
||
&:nth-child(2)
|
||
font-family "SourceHanSansCN"
|
||
_font(.14rem, .3rem, #fff,400,)
|
||
.right_1_down_inner_3_r
|
||
_wh(50%, 100%)
|
||
line-height .3rem
|
||
overflow hidden
|
||
text-align center
|
||
span
|
||
font-family "SourceHanSansCN"
|
||
_font(.12rem, .3rem, #fff,700,)
|
||
&:nth-child(1)
|
||
font-family "SourceHanSansCN"
|
||
_font(.18rem, .3rem, #00D5FF,700,)
|
||
.item_content_4
|
||
_wh(100%, calc(100% - .32rem))
|
||
padding .1rem 0 .2rem
|
||
overflow hidden
|
||
.item_content_5
|
||
_wh(100%, calc(100% - .32rem))
|
||
padding-top .3rem
|
||
clear both
|
||
.item_5_l
|
||
float left
|
||
_wh(1.83rem, .3rem)
|
||
margin-top .2rem
|
||
.item_5_r
|
||
float right
|
||
margin-top .4rem
|
||
_wh(1.83rem, 60%)
|
||
_fj()
|
||
flex-direction column
|
||
.right_1_down_inner_3_i
|
||
margin-bottom .045rem
|
||
.item_5_l_1
|
||
_wh(100%, 60%)
|
||
background right center / .02rem 100% url(../assets/images/screen1/line_3.png) no-repeat
|
||
.item_5_l_2
|
||
_wh(100%, 40%)
|
||
.right_1_down_inner_3_i
|
||
&:nth-child(1), &:nth-child(2)
|
||
margin-bottom 5%
|
||
.total
|
||
position absolute
|
||
top 2.7rem
|
||
left .3rem
|
||
text-align center
|
||
width 2.2rem
|
||
div
|
||
line-height 0.24rem
|
||
// color #f80
|
||
color #00D9FF
|
||
font-size .3rem
|
||
margin-top 0.08rem
|
||
font-weight 700
|
||
.total-desc
|
||
width 2.2rem
|
||
text-align center
|
||
.cred
|
||
color #CC6060
|
||
.scroll_container_3
|
||
li
|
||
.scroll-ul_1_div
|
||
&:nth-child(4)
|
||
i
|
||
display block
|
||
width .4rem
|
||
_font(.14rem, .4rem, #fff,,center)
|
||
font-style normal
|
||
</style>
|