root/screen-hl-one
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

大屏

Browse Source
This commit is contained in:
xiangxy
2022-07-29 17:16:02 +08:00
parent e711e1cdef
commit 938141102c
4 changed files with 3241 additions and 164 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
src/assets/js/getData1.js
View File

@@ -1,10 +1,22 @@
import {post} from '@js/http.js' import {post} from '@js/http.js'
/** 1.1小屏-上 */ /** 1.1设备实时状态 */
export const queryInfo5 = (did) => post('api/screen/pdm/queryInfo5', { export const deviceStatus = (id) => post('api/deviceScreen/deviceStatus', {})
device_id: did /** 1.2设备综合效率OEE&产能利用效率TEEP */
}) export const oeeAndTeep = (id) => post('api/deviceScreen/oeeAndTeep', {})
/** 1.1小屏-下 */ /** 1.3运行设备大类产能比 */
export const queryInfo6 = (did) => post('api/screen/pdm/queryInfo6', { export const queryDeviceByWork = (id) => post('api/deviceScreen/queryDeviceByWork', {})
device_id: did /** 1.4设备TOP10故障次数 */
}) export const deviceErrorNum = (id) => post('api/deviceScreen/deviceErrorNum', {})
/** 1.5设备管理 */
export const deviceManage = (id) => post('api/deviceScreen/deviceManage', {})
/** 1.6设备综合统计 */
export const deviceCensus = (id) => post('api/deviceScreen/deviceCensus', {})
/** 1.7设备报警信息 */
export const deviceErrorInfo = (id) => post('api/deviceScreen/deviceErrorInfo', {})
/** 1.8设备产能利用 */
export const deviceUseRate = (id) => post('api/deviceScreen/deviceUseRate', {})
/** 1.9设备状态列表 */
export const deviceStatusList = (id) => post('api/deviceScreen/deviceStatusList', {})
/** 1.10近30天设备故障统计 */
export const errCensus = (id) => post('api/deviceScreen/errCensus', {})

1740
src/pages/DeviceScreen.1.vue Normal file
View File

File diff suppressed because it is too large Load Diff

548
src/pages/DeviceScreen.vue
View File

@@ -25,7 +25,7 @@
<div id="echart_d01" style="width: 100%; height: 100%"></div> <div id="echart_d01" style="width: 100%; height: 100%"></div>
</div> </div>
<div class="total"> <div class="total">
<div>110<span>台</span></div> <div>{{totalNum}}<span>台</span></div>
</div> </div>
<div class="total-desc">设备总数</div> <div class="total-desc">设备总数</div>
</div> </div>
@@ -36,7 +36,7 @@
<span>{{e.name}}</span> <span>{{e.name}}</span>
</div> </div>
<div class="right_1_down_inner_3_r"> <div class="right_1_down_inner_3_r">
<span>{{e.qty}}</span> <span>{{e.value}}</span>
<span>台</span> <span>台</span>
</div> </div>
</div> </div>
@@ -51,57 +51,57 @@
<div class="item_content_1_inner_1">弯头工段</div> <div class="item_content_1_inner_1">弯头工段</div>
<div class="item_content_1_inner_2 item_content_1_inner_2_bg"> <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_p1">OEE：</p>
<p class="item_content_1_inner_2_p2">45.8%</p> <p class="item_content_1_inner_2_p2">{{sbgl_jo1.oee}}</p>
</div> </div>
<div class="item_content_1_inner_2 item_content_1_inner_2_bg"> <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_p1">MIBF：</p>
<p class="item_content_1_inner_2_p2">173h</p> <p class="item_content_1_inner_2_p2">{{sbgl_jo1.MIBF}}h</p>
</div> </div>
<div class="item_content_1_inner_2 item_content_1_inner_2_bg"> <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_p1">MTTR：</p>
<p class="item_content_1_inner_2_p2">6h</p> <p class="item_content_1_inner_2_p2">{{sbgl_jo1.MTTR}}h</p>
</div> </div>
<div class="item_content_1_inner_2"> <div class="item_content_1_inner_2">
<p class="item_content_1_inner_2_p1 cred">报警：</p> <p class="item_content_1_inner_2_p1 cred">报警：</p>
<p class="item_content_1_inner_2_p2 cred">4次</p> <p class="item_content_1_inner_2_p2 cred">{{sbgl_jo1.err_times}}次</p>
</div> </div>
</div> </div>
<div class="item_content_1_inner"> <div class="item_content_1_inner">
<div class="item_content_1_inner_1">综合工段</div> <div class="item_content_1_inner_1">综合工段</div>
<div class="item_content_1_inner_2 item_content_1_inner_2_bg"> <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_p1">OEE：</p>
<p class="item_content_1_inner_2_p2">45.8%</p> <p class="item_content_1_inner_2_p2">{{sbgl_jo2.oee}}</p>
</div> </div>
<div class="item_content_1_inner_2 item_content_1_inner_2_bg"> <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_p1">MIBF：</p>
<p class="item_content_1_inner_2_p2">173h</p> <p class="item_content_1_inner_2_p2">{{sbgl_jo2.MIBF}}h</p>
</div> </div>
<div class="item_content_1_inner_2 item_content_1_inner_2_bg"> <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_p1">MTTR：</p>
<p class="item_content_1_inner_2_p2">6h</p> <p class="item_content_1_inner_2_p2">{{sbgl_jo2.MTTR}}h</p>
</div> </div>
<div class="item_content_1_inner_2 cred"> <div class="item_content_1_inner_2">
<p class="item_content_1_inner_2_p1 cred">报警：</p> <p class="item_content_1_inner_2_p1 cred">报警：</p>
<p class="item_content_1_inner_2_p2 cred">4次</p> <p class="item_content_1_inner_2_p2 cred">{{sbgl_jo2.err_times}}次</p>
</div> </div>
</div> </div>
<div class="item_content_1_inner"> <div class="item_content_1_inner">
<div class="item_content_1_inner_1">成品工段</div> <div class="item_content_1_inner_1">成品工段</div>
<div class="item_content_1_inner_2 item_content_1_inner_2_bg"> <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_p1">OEE：</p>
<p class="item_content_1_inner_2_p2">45.8%</p> <p class="item_content_1_inner_2_p2">{{sbgl_jo3.oee}}</p>
</div> </div>
<div class="item_content_1_inner_2 item_content_1_inner_2_bg"> <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_p1">MIBF：</p>
<p class="item_content_1_inner_2_p2">173h</p> <p class="item_content_1_inner_2_p2">{{sbgl_jo3.MIBF}}h</p>
</div> </div>
<div class="item_content_1_inner_2 item_content_1_inner_2_bg"> <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_p1">MTTR：</p>
<p class="item_content_1_inner_2_p2">6h</p> <p class="item_content_1_inner_2_p2">{{sbgl_jo3.MTTR}}h</p>
</div> </div>
<div class="item_content_1_inner_2 cred"> <div class="item_content_1_inner_2">
<p class="item_content_1_inner_2_p1 cred">报警：</p> <p class="item_content_1_inner_2_p1 cred">报警：</p>
<p class="item_content_1_inner_2_p2 cred">4次</p> <p class="item_content_1_inner_2_p2 cred">{{sbgl_jo3.err_times}}次</p>
</div> </div>
</div> </div>
</div> </div>
@@ -156,18 +156,18 @@
<li>关机时间</li> <li>关机时间</li>
<li>生产日期</li> <li>生产日期</li>
</ul> </ul>
<div class="scroll_container_1"> <div class="scroll_container_1" v-if="array1.length">
<vue-seamless-scroll :data="array1" :class-option="defaultOption1"> <vue-seamless-scroll :data="array1" :class-option="defaultOption1">
<ul class="scroll-ul_1"> <ul class="scroll-ul_1">
<li v-for="(e, i) in array1" :key="i"> <li v-for="(e, i) in array1" :key="i">
<div class="scroll-ul_1_div">{{e.material_code}}</div> <div class="scroll-ul_1_div">{{e.device_code}}</div>
<div class="scroll-ul_1_div">{{e.material_code}}</div> <div class="scroll-ul_1_div">{{e.device_name}}</div>
<div class="scroll-ul_1_div">{{e.material_code}}</div> <div class="scroll-ul_1_div">{{e.workprocedure_name}}</div>
<div class="scroll-ul_1_div"><span :style="{'background-color': ddddcolor}"><i></i></span>{{e.material_code}}</div> <div class="scroll-ul_1_div scroll-ul_1_div4"><span :style="{'background-color': e.color}"><i></i></span>{{e.device_status}}</div>
<div class="scroll-ul_1_div">{{e.material_code}}</div> <div class="scroll-ul_1_div">{{e.product_qty}}</div>
<div class="scroll-ul_1_div">{{e.material_code}}</div> <div class="scroll-ul_1_div">{{e.start_time}}</div>
<div class="scroll-ul_1_div">{{e.material_code}}</div> <div class="scroll-ul_1_div">{{e.end_time}}</div>
<div class="scroll-ul_1_div">{{e.material_code}}</div> <div class="scroll-ul_1_div">{{e.product_time}}</div>
</li> </li>
</ul> </ul>
</vue-seamless-scroll> </vue-seamless-scroll>
@@ -192,19 +192,19 @@
<div class="item_content_4"> <div class="item_content_4">
<div class="scroll_wrap"> <div class="scroll_wrap">
<ul class="scroll_tab_2"> <ul class="scroll_tab_2">
<li>设备编号</li> <li>编号</li>
<li>设备名称</li> <li>名称</li>
<li>报警原因</li> <li>报警原因</li>
<li>报警时间</li> <li>报警时间</li>
</ul> </ul>
<div class="scroll_container_2"> <div class="scroll_container_2">
<vue-seamless-scroll :data="array2" :class-option="defaultOption2"> <vue-seamless-scroll :data="array2" :class-option="defaultOption2">
<ul class="scroll-ul_2"> <ul class="scroll-ul_2">
<li v-for="(e, i) in array1" :key="i"> <li v-for="(e, i) in array2" :key="i">
<div class="scroll-ul_2_div">{{e.material_code}}</div> <div class="scroll-ul_2_div">{{e.device_code}}</div>
<div class="scroll-ul_2_div">{{e.material_code}}</div> <div class="scroll-ul_2_div">{{e.device_name}}</div>
<div class="scroll-ul_2_div">{{e.material_code}}</div> <div class="scroll-ul_2_div">{{e.err_name}}</div>
<div class="scroll-ul_2_div">{{e.material_code}}</div> <div class="scroll-ul_2_div">{{e.start_time}}</div>
</li> </li>
</ul> </ul>
</vue-seamless-scroll> </vue-seamless-scroll>
@@ -230,99 +230,114 @@
</template> </template>
<script> <script>
import {deviceStatus, oeeAndTeep, queryDeviceByWork, deviceErrorNum, deviceManage, deviceCensus, deviceErrorInfo, deviceUseRate, deviceStatusList, errCensus} from '@js/getData1.js'
import * as echarts from 'echarts' import * as echarts from 'echarts'
export default { export default {
name: 'MonitoringScreen2', name: 'MonitoringScreen2',
data () { data () {
return { return {
ddddcolor: '#f00', totalNum: '',
arrR01: [ // arrR01: [
{ // {
color: '#2D7CEB', // color: '#2D7CEB',
name: '正常运行', // name: '正常运行',
qty: '10' // value: '10'
}, // },
{ // {
color: '#07E083', // color: '#07E083',
name: '暂未生产', // name: '暂未生产',
qty: '20' // value: '20'
}, // },
{ // {
color: '#00D5FF', // color: '#00D5FF',
name: '空闲设备', // name: '空闲设备',
qty: '30' // value: '30'
}, // },
{ // {
color: '#CC6060', // color: '#CC6060',
name: '故障设备', // name: '故障设备',
qty: '40' // value: '40'
} // }
], // ],
arrR01: [],
data01: [{value: 500, name: '正常运行'}, {value: 300, name: '暂未生产'}, {value: 200, name: '空闲设备'}, {value: 100, name: '故障设备'}], data01: [{value: 500, name: '正常运行'}, {value: 300, name: '暂未生产'}, {value: 200, name: '空闲设备'}, {value: 100, name: '故障设备'}],
chartData1: [ sbgl_jo1: {},
{ sbgl_jo2: {},
total_quantity: '31', sbgl_jo3: {},
material_name: 'D001' data03: '',
}, chartData1: [],
{ chartData2: [],
total_quantity: '22', // chartData1: [
material_name: 'D002' // {
}, // teep: '31',
{ // workprocedure_name: 'D001'
total_quantity: '10', // },
material_name: 'D003' // {
}, // teep: '22',
{ // workprocedure_name: 'D002'
total_quantity: '38', // },
material_name: 'D004' // {
}, // teep: '10',
{ // workprocedure_name: 'D003'
total_quantity: '15', // },
material_name: 'D005' // {
}, // teep: '38',
{ // workprocedure_name: 'D004'
total_quantity: '66', // },
material_name: 'D006' // {
}, // teep: '15',
{ // workprocedure_name: 'D005'
total_quantity: '77', // },
material_name: 'D007' // {
} // teep: '66',
], // workprocedure_name: 'D006'
chartData2: [ // },
{ // {
total_quantity: '21', // teep: '77',
material_name: 'SBGZ0001' // workprocedure_name: 'D007'
}, // }
{ // ],
total_quantity: '32', // chartData2: [
material_name: 'SBGZ0002' // {
}, // err_times: '21',
{ // device_name: 'SBGZ0001'
total_quantity: '60', // },
material_name: 'SBGZ0003' // {
}, // err_times: '32',
{ // device_name: 'SBGZ0002'
total_quantity: '78', // },
material_name: 'SBGZ0004' // {
}, // err_times: '60',
{ // device_name: 'SBGZ0003'
total_quantity: '12', // },
material_name: 'SBGZ0005' // {
}, // err_times: '78',
{ // device_name: 'SBGZ0004'
total_quantity: '6', // },
material_name: 'SBGZ0006' // {
}, // err_times: '12',
{ // device_name: 'SBGZ0005'
total_quantity: '88', // },
material_name: 'SBGZ0007' // {
} // err_times: '6',
], // device_name: 'SBGZ0006'
// },
// {
// err_times: '88',
// device_name: 'SBGZ0007'
// }
// ],
xData: ['无屑下料机', '三通成型机', '推弯一体机', 'L22-35货压机'], // 横坐标 xData: ['无屑下料机', '三通成型机', '推弯一体机', 'L22-35货压机'], // 横坐标
yData: [23, 24, 18, 25], // 人数数据 yData: [23, 24, 18, 25], // 人数数据
taskDate: [10, 11, 9, 17], taskDate: [10, 11, 9, 17],
taskDate2: [15, 19, 3, 23], taskDate2: [15, 19, 3, 23],
data05_d0: [],
data05_d1: [],
data05_d2: [],
data05_d3: [],
data05_d4: [],
data06_d0: [],
data06_d1: [],
timer: null, timer: null,
time: '', time: '',
hours: '', hours: '',
@@ -340,8 +355,10 @@ export default {
myCharts2: '', myCharts2: '',
myCharts3: '', myCharts3: '',
myCharts4: '', myCharts4: '',
array1: [{material_code: '001'}, {material_code: '001'}, {material_code: '001'}, {material_code: '001'}, {material_code: '001'}, {material_code: '001'}], // 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'}], // array2: [{material_code: '01'}, {material_code: '01'}, {material_code: '01'}, {material_code: '01'}],
array1: [],
array2: [],
num: 8 num: 8
} }
}, },
@@ -381,13 +398,23 @@ export default {
}) })
}, },
mounted () { mounted () {
this.setEchart08() // 右1 this._deviceStatus()
this.setEchart10() // 右3 this._deviceManage()
this.setEchart01() // 左1 this._deviceUseRate()
this.setEchart02() // 左3 this._oeeAndTeep()
this.setEchart03() this._queryDeviceByWork() // gun
this.setEchart04() this._deviceCensus()
this.setEchart05() this._deviceStatusList() // 中grid
this._deviceErrorNum()
this._deviceErrorInfo() // 右grid
this._errCensus()
// this.setEchart01() // 左1
// this.setEchart02() // 左3
// this.setEchart03() // 中1
// this.setEchart04() // 中2
// this.setEchart05() // 中3
// this.setEchart08() // 右1
// this.setEchart10() // 右3
}, },
methods: { methods: {
fontSize (res) { fontSize (res) {
@@ -415,10 +442,14 @@ export default {
this.week = `${week}` this.week = `${week}`
}, },
setEchart08 () { setEchart08 () {
// var myColor = ['#81E7ED'] // 内柱状图颜色 var dataLine = this.data06_d1
var dataLine = [5, 66, 33, 25, 10] let numMax = Math.max.apply(null, dataLine)
let manNum = numMax + 1
let positionLeft = 0.4 let positionLeft = 0.4
let max = 100 + 2 * positionLeft let max = manNum + 2 * positionLeft
// var dataLine = [5, 66, 33, 25, 10]
// let positionLeft = 0.4
// let max = 100 + 2 * positionLeft
var option = { var option = {
grid: [ grid: [
{ {
@@ -451,7 +482,8 @@ export default {
fontSize: '12' fontSize: '12'
} }
}, },
data: ['设备01', '设备02', '设备03', '设备04', '设备05'] data: this.data06_d0
// data: ['设备01', '设备02', '设备03', '设备04', '设备05']
}, },
{ {
axisTick: 'none', axisTick: 'none',
@@ -551,7 +583,7 @@ export default {
type: 'bar', type: 'bar',
yAxisIndex: 2, yAxisIndex: 2,
barGap: '-100%', barGap: '-100%',
data: [100, 100, 100, 100, 100], data: [100, 100, 100, 100, 100, 100, 100, 100, 100, 100],
barWidth: 23, barWidth: 23,
label: { label: {
normal: { normal: {
@@ -591,7 +623,7 @@ export default {
// data: ['正常运行', '暂未生产', '空闲设备', '故障设备'], // data: ['正常运行', '暂未生产', '空闲设备', '故障设备'],
// textStyle: { // textStyle: {
// color: '#ffffff', // color: '#ffffff',
// fontSize: '16' // fontSize: '12'
// } // }
// }, // },
color: ['#0966E8', '#07E083', '#00D5FF', '#CC6060'], color: ['#0966E8', '#07E083', '#00D5FF', '#CC6060'],
@@ -620,6 +652,14 @@ export default {
// 多列柱状图 // 多列柱状图
// 到外面壳边框的距离 // 到外面壳边框的距离
let option = { let option = {
dataZoom: [
{
show: false, // 为true滚动条出现
type: 'slider', // type:'inside'，滚动条在最下面，鼠标点击滚动
startValue: 0, // 从头开始。
endValue: 2 // end百分比显示范围，endValue具体显示几个数值
}
],
grid: { grid: {
top: this.fontSize(50), top: this.fontSize(50),
left: 0, left: 0,
@@ -764,14 +804,19 @@ export default {
let echart = document.getElementById('echart_d04') let echart = document.getElementById('echart_d04')
this.myCharts04 = this.$echarts.init(echart) this.myCharts04 = this.$echarts.init(echart)
this.myCharts04.setOption(option) this.myCharts04.setOption(option)
this.autoMove(option, 1)
window.addEventListener('resize', () => { window.addEventListener('resize', () => {
this.myCharts04.resize() this.myCharts04.resize()
}) })
}, },
setEchart03 () { setEchart03 () {
let data1 = [50, 80] let d03 = this.data03
let data2 = [50, 69] let data1 = [d03.oee.value1, d03.teep.value1]
let data3 = [25, 88] 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 = { let option = {
grid: { grid: {
top: 50, top: 50,
@@ -995,7 +1040,8 @@ export default {
fontSize: 14 fontSize: 14
} }
}, },
data: ['无屑下料机1', '无屑下料机1', '无屑下料机1', '无屑下料机1', '无屑下料机1', '无屑下料机1'] data: this.data05_d0
// data: ['无屑下料机1', '无屑下料机1', '无屑下料机1', '无屑下料机1', '无屑下料机1', '无屑下料机1']
}, },
yAxis: { yAxis: {
type: 'value', type: 'value',
@@ -1044,7 +1090,8 @@ export default {
]) ])
} }
}, },
data: ['390', '390', '390', '390', '390', '390'] data: this.data05_d1
// data: ['390', '390', '390', '390', '390', '390']
}, },
{ {
name: '暂未生产设备', name: '暂未生产设备',
@@ -1067,7 +1114,8 @@ export default {
]) ])
} }
}, },
data: ['230', '230', '230', '230', '230', '230'] data: this.data05_d2
// data: ['230', '230', '230', '230', '230', '230']
}, },
{ {
name: '关机设备', name: '关机设备',
@@ -1090,7 +1138,8 @@ export default {
]) ])
} }
}, },
data: ['210', '210', '210', '210', '210', '210'] data: this.data05_d3
// data: ['210', '210', '210', '210', '210', '210']
}, },
{ {
name: '故障设备', name: '故障设备',
@@ -1113,7 +1162,8 @@ export default {
]) ])
} }
}, },
data: ['110', '110', '110', '110', '110', '110'] data: this.data05_d4
// data: ['110', '110', '110', '110', '110', '110']
} }
] ]
} }
@@ -1130,9 +1180,9 @@ export default {
let names = [] let names = []
let max = 0 let max = 0
this.chartData1.map(el => { this.chartData1.map(el => {
total.push(el.total_quantity) total.push(el.teep)
names.push(el.material_name) names.push(el.workprocedure_name)
max = Math.max(max, Number(el.total_quantity)) max = Math.max(max, Number(el.teep))
}) })
let option = { let option = {
grid: { grid: {
@@ -1214,11 +1264,13 @@ export default {
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [ color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ {
offset: 0, offset: 0,
color: '#0E90FD' color: '#0E90FD',
opacity: 1
}, },
{ {
offset: 1, offset: 1,
color: '#607080' color: 'rgba(96,112,128,0.10)',
opacity: 0.1
} }
]), ]),
borderWidth: 0 borderWidth: 0
@@ -1277,9 +1329,9 @@ export default {
let names = [] let names = []
let max = 0 let max = 0
this.chartData2.map(el => { this.chartData2.map(el => {
total.push(el.total_quantity) total.push(el.err_times)
names.push(el.material_name) names.push(el.device_name)
max = Math.max(max, Number(el.total_quantity)) max = Math.max(max, Number(el.err_times))
}) })
let option = { let option = {
grid: { grid: {
@@ -1343,11 +1395,13 @@ export default {
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [ color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ {
offset: 0, offset: 0,
color: '#0E90FD' color: '#0E90FD',
opacity: 1
}, },
{ {
offset: 1, offset: 1,
color: '#607080' color: 'rgba(96,112,128,0.10)',
opacity: 0.1
} }
]), ]),
borderWidth: 0 borderWidth: 0
@@ -1386,6 +1440,177 @@ export default {
} }
}, 2000) }, 2000)
} }
},
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)
}, 2000)
}
},
/** 左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') {
// console.log(res.result)
this.chartData1 = res.result
this.setEchart02() // 左3
} else {
this.Dialog(res.desc)
}
},
/** 中1 */
async _oeeAndTeep () {
let res = await oeeAndTeep()
if (res.code === '1') {
console.log(res.result)
this.data03 = res.result
this.setEchart03() // 中1
} else {
this.Dialog(res.desc)
}
},
/** 中2 */
async _queryDeviceByWork () {
let res = await queryDeviceByWork()
if (res.code === '1') {
console.log(res.result)
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) {
window.clearInterval(this.timeOut1)
this.setEchart04() // 中2
}
} else {
this.Dialog(res.desc)
}
},
/** 中3 */
async _deviceCensus () {
let res = await deviceCensus()
if (res.code === '1') {
console.log(res.result)
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') {
console.log(res.result)
// 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') {
console.log(res.result)
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') {
console.log(res.result)
this.array2 = res.result
} else {
this.Dialog(res.desc)
}
},
/** 右3 */
async _errCensus () {
let res = await errCensus()
if (res.code === '1') {
console.log(res.result)
this.chartData2 = res.result
this.setEchart10() // 右3
} else {
this.Dialog(res.desc)
}
} }
} }
} }
@@ -1495,12 +1720,12 @@ header
background center bottom / 1.02rem .03rem url(../assets/images/screen1/line_1.png) no-repeat background center bottom / 1.02rem .03rem url(../assets/images/screen1/line_1.png) no-repeat
.item_content_1_inner_2_p1 .item_content_1_inner_2_p1
float left float left
margin 0.14rem 0 0 0.08rem margin 0.26rem 0 0 0.08rem
font-family "SourceHanSansCN" font-family "SourceHanSansCN"
_font(.14rem, .14rem, #84B0DA, 700, left) _font(.14rem, .14rem, #84B0DA, 700, left)
.item_content_1_inner_2_p2 .item_content_1_inner_2_p2
float right float right
margin 0.14rem 0.08rem 0 0 margin 0.26rem 0.08rem 0 0
font-family "SourceHanSansCN" font-family "SourceHanSansCN"
_font(.18rem, .18rem, #FFFFFF, 700, right) _font(.18rem, .18rem, #FFFFFF, 700, right)
.item_wrap_1 .item_wrap_1
@@ -1560,7 +1785,9 @@ header
&:nth-child(8) &:nth-child(8)
width 13.2% width 13.2%
&:nth-child(4) &:nth-child(4)
// text-align left
span span
// display inline-block
_wh(.0725rem, .0725rem) _wh(.0725rem, .0725rem)
border-radius 100% border-radius 100%
background-color #2D7CEB background-color #2D7CEB
@@ -1571,7 +1798,7 @@ header
border-bottom .01rem solid rgba(8,205,248,0.3) border-bottom .01rem solid rgba(8,205,248,0.3)
li li
float left float left
width 25% width 18%
_font(.14rem,.4rem,#78B1DE,,center) _font(.14rem,.4rem,#78B1DE,,center)
word-wrap break-word word-wrap break-word
word-break break-all word-break break-all
@@ -1580,7 +1807,7 @@ header
overflow hidden overflow hidden
box-sizing border-box box-sizing border-box
&:nth-child(4) &:nth-child(4)
width 25% width 46%
.scroll_container_2 .scroll_container_2
width 100% width 100%
height calc(100% - .4rem) height calc(100% - .4rem)
@@ -1594,16 +1821,24 @@ header
box-shadow inset 0px 1px 0px 0px rgba(13,89,115,0.3) box-shadow inset 0px 1px 0px 0px rgba(13,89,115,0.3)
.scroll-ul_2_div .scroll-ul_2_div
float left float left
_wh(25%, .44rem) _wh(18%, .44rem)
_fj(center) _fj(center)
_font(.14rem, .44rem, #fff,,center) _font(.12rem, .44rem, #fff,,center)
word-wrap break-word word-wrap break-word
word-break break-all word-break break-all
white-space nowrap white-space nowrap
padding 0 .02rem padding 0 .02rem
overflow hidden overflow hidden
&:nth-child(4) &:nth-child(4)
width 25% 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 .right_1_up
clear both clear both
_wh(100%, 1.6rem) _wh(100%, 1.6rem)
@@ -1703,6 +1938,7 @@ header
.item_5_l .item_5_l
float left float left
_wh(1.83rem, .3rem) _wh(1.83rem, .3rem)
margin-top .2rem
.item_5_r .item_5_r
float right float right
margin-top .4rem margin-top .4rem
@@ -1721,7 +1957,7 @@ header
margin-bottom 5% margin-bottom 5%
.total .total
position absolute position absolute
top 2.5rem top 2.7rem
left .3rem left .3rem
text-align center text-align center
width 2.2rem width 2.2rem

1089
src/pages/MonitoringScreen2.vue Normal file
View File

File diff suppressed because it is too large Load Diff