修改看板

This commit is contained in:
‘937886381’
2024-01-29 15:55:16 +08:00
parent bd0636b458
commit 1045a5fbb0
11 changed files with 903 additions and 99 deletions

View File

@@ -2,7 +2,7 @@
* @Author: zwq
* @Date: 2021-07-19 15:18:30
* @LastEditors: zhp
* @LastEditTime: 2024-01-25 17:55:53
* @LastEditTime: 2024-01-29 15:00:30
* @Description:
-->
<template>
@@ -49,10 +49,11 @@
</el-col>
<el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="8">
<base-container :title="'ISRA 缺陷数据'" :size="'small'" :title-icon="'scrap'">
<base-container :no-content-padding="true" :title="'ISRA 缺陷数据'" :size="'small'" :title-icon="'scrap'">
<!-- <base-table1 :page="1" :limit="999" :show-index="false" :table-config="ISRATableProps"
:table-data="ISRAList" /> -->
<dv-scroll-board :config="ISRAConfig" style="width:100%;height:350px" ref='ISRAScrollBoard' />
<ISRAChart ref="ISRAChart" />
<!-- <dv-scroll-board :config="ISRAConfig" style="width:100%;height:350px" ref='ISRAScrollBoard' /> -->
</base-container>
</el-col>
</el-row>
@@ -82,27 +83,26 @@
</base-container>
</el-col>
<el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="14">
<base-container :height="318 + 338 + 16" :size="'eqStatus'"
:title="'设备状态监控'" :title-icon="'eqMonitoring'">
<base-container :height="318 + 338 + 16" :size="'eqStatus'" :title="'设备状态监控'" :title-icon="'eqMonitoring'">
<!-- <div style="width: 45%;position: absolute; top: 3em; right: 3em;">
<top-radio-group />
</div> -->
<!-- 像下面这样表格里的limit值也许可以用js动态计算出来 -->
<el-col :span="6" style="">
<div style="font-size:20px;margin: 5px 0 10px 0">化风机</div>
<el-col :span="8" style="">
<div style="font-size:20px;margin: 5px 0 10px 0">化风机</div>
<!-- <base-table1 :page="1" :limit="999" :show-index="false" :table-config="EqMonitoringPropsFun"
:table-data="funList" /> -->
<dv-scroll-board :config="funConfig" style="width:100%;height:310px" ref='funScrollBoard' />
</el-col>
<span class="eqLine"></span>
<el-col :span="6">
<el-col :span="8">
<div style="font-size:20px;margin: 5px 0 10px 0;">退火风机</div>
<!-- <base-table1 :page="1" :limit="999" :show-index="false" :table-config="EqMonitoringPropsFun"
:table-data="annealFunList" /> -->
<dv-scroll-board :config="annealFunConfig" style="width:100%;height:310px" ref='annealFunScrollBoard' />
</el-col>
<span class="eqLineTwo"></span>
<el-col :span="12" style="float: right;">
<el-col :span="8" style="float: right;">
<div style="font-size:20px;margin: 5px 0 10px 0;">产线设备</div>
<!-- <base-table1 :page="1" :limit="999" :show-index="false" :table-config="EqMonitoringProps"
:table-data="realEqList" /> -->
@@ -137,10 +137,6 @@ import baseTable1 from './components/baseTable'
// import baseTable2 from './components/baseTable'
// import baseTable3 from './components/baseTable'
import TopRadioGroup from './components/topRadioGroup'
// import pieChart1 from './components/PieChart'
// import pieChart2 from './components/PieChart'
// import pieChart3 from './components/PieChart'
// import { mapGetters } from 'vuex'
import screenfull from 'screenfull'
// import BaseVideo from './components/baseVideo.vue'
import alarmLevel from './components/alarmLevel'
@@ -149,13 +145,9 @@ import colorDiv from './components/colorDiv'
// import axios from '@/utils/request'
import doubleYChart from './components/coldDoubleYChart'
// import elementResizeDetectorMaker from 'element-resize-detector';
// var erd = elementResizeDetectorMaker(); //创建实例
// let resizeFun = null
import { parseTime } from '../core/mixins/code-filter';
import { formatDate } from '@/utils'
import ISRAChart from './components/ISRAChart.vue';
import { getDcsMsg, closeDcsMsg } from "@/websocket/wsInterface"
import LinearBarChart from './components/linearBarChart'
const qualityYearTableProps= []
const EqMonitoringPropsFun = [
@@ -260,6 +252,7 @@ export default {
TopRadioGroup,
doubleYChart,
LinearBarChart,
ISRAChart
// baseContainer1
// pieChart1,
// pieChart2
@@ -294,18 +287,18 @@ export default {
headerBGC: 'rgba(32, 55, 96, 0.8)',
oddRowBGC: 'rgba(32, 55, 96, 0.8)',
evenRowBGC: 'rgba(14, 32, 62, 0.8)',
columnWidth: [60, 90, 90],
columnWidth: [60, 180, 90],
align: ['center'],
data: [],
// index:true,
rowNum: 10
},
realEqConfig: {
header: ['序号', '产线', '设备名称', '设备编码', '运行状态','故障状态'],
header: ['序号','设备名称','运行状态'],
headerBGC: 'rgba(32, 55, 96, 0.8)',
oddRowBGC: 'rgba(32, 55, 96, 0.8)',
evenRowBGC: 'rgba(14, 32, 62, 0.8)',
columnWidth: [60, 80, 90,90,90,90],
columnWidth: [60, 180, 90],
align: ['center'],
data: [],
// index:true,
@@ -316,7 +309,7 @@ export default {
headerBGC: 'rgba(32, 55, 96, 0.8)',
oddRowBGC: 'rgba(32, 55, 96, 0.8)',
evenRowBGC: 'rgba(14, 32, 62, 0.8)',
columnWidth: [60, 90, 90],
columnWidth: [60, 180, 90],
align: ['center'],
data: [],
// index:true,
@@ -350,6 +343,7 @@ export default {
SJGWsData: {},
// orderProcessList: [],
dateType: '0',
wsIsOpen:false,
funList:[],
annealFunList: [],
queryParams: {
@@ -393,8 +387,27 @@ export default {
// this.fetchList('line-chart-data')
this.init()
},
destroyed() {
this.funInitWebSocket()
this.CutInitWebSocket()
this.SJGWebsocketClose()
if (this.wsIsOpen) {
closeDcsMsg()
this.wsIsOpen = false
console.log('关闭============')
}
},
mounted() {
this.funInitWebSocket()
// if (num > 0) {
if (!this.wsIsOpen) {
getDcsMsg()
this.wsIsOpen = true
console.log('开启websocket==========')
}
// } else {
// }
this.CutInitWebSocket()
this.SJGInitWebSocket()
// this.getList()
@@ -444,6 +457,15 @@ export default {
// removeEventListener('resize', resizeFun)
// },
methods: {
CutWebsocketClose(e) {
console.log('WebSocket 断开连接', e)
},
SJGWebsocketClose(e) {
console.log('WebSocket 断开连接', e)
},
funInitWebSocket(e) {
console.log('WebSocket 断开连接', e)
},
formatTime(time, option) {
// if (('' + time).length === 10) {
// time = parseInt(time) * 1000
@@ -738,6 +760,7 @@ export default {
// let obj = JSON.parse(data.data)
this.SJGWsData = e?.data ? JSON.parse(e?.data) : {}
if (this.SJGWsData.type === 'isra') {
console.log('222222', this.SJGWsData.detData);
// this.ISRAList = this.SJGWsData.detData.map((ele, index) => {
// // if (ele.progressRate != 1) {
// return {
@@ -751,34 +774,39 @@ export default {
// // }
// });
console.log(this.SJGWsData.detData);
let ISRAArr = this.SJGWsData.detData.map((item, index) => [
// console.log(item)
`<span style="color:rgba(255,255,255,0.5)" >${index + 1 || ''}
</span>`,
// formatDate(item.planStartTime) || '',
`
<span style="color:rgba(255,255,255,0.5)" >${item.linename || ''}
</span>`,
`<span style="color:rgba(255,255,255,0.5)">${item.time || ''}</span>`,
`<span style="color:rgba(255,255,255,0.5)">${item.type || ''}</span>`,
`<span style="color:rgba(255,255,255,0.5)">${item.num || ''}</span>`,
`<span style="color:rgba(255,255,255,0.5)">${(item.percent * 100).toFixed(2) || ''}</span>`,
])
this.ISRAConfig.data = ISRAArr
this.$refs['ISRAScrollBoard'].updateRows(ISRAArr)
let chartData = this.SJGWsData.detData.map((item, index) => {
return {
name: item.type,
num:item.num
}
})
// let ISRAArr = this.SJGWsData.detData.map((item, index) => [
// // console.log(item)
// `<span style="color:rgba(255,255,255,0.5)" >${index + 1 || ''}
// </span>`,
// // formatDate(item.planStartTime) || '',
// `
// <span style="color:rgba(255,255,255,0.5)" >${item.linename || ''}
// </span>`,
// `<span style="color:rgba(255,255,255,0.5)">${item.time || ''}</span>`,
// `<span style="color:rgba(255,255,255,0.5)">${item.type || ''}</span>`,
// `<span style="color:rgba(255,255,255,0.5)">${item.num || ''}</span>`,
// `<span style="color:rgba(255,255,255,0.5)">${(item.percent * 100).toFixed(2) || ''}</span>`,
// ])
// this.ISRAConfig.data = ISRAArr
this.$refs['ISRAChart'].updateChart(chartData)
} else if (this.SJGWsData.type === 'equipment') {
this.realEqList = this.SJGWsData.detData.map((ele, index) =>[
// console.log(item)
`<span style="color:rgba(255,255,255,0.5)" >${index + 1 || ''}
</span>`,
// formatDate(item.planStartTime) || '',
`
<span style="color:rgba(255,255,255,0.5)" >${item.line || ''}
</span>`,
// `<span style="color:rgba(255,255,255,0.5)" >${item.line || ''}
// </span>`,
`<span style="color:rgba(255,255,255,0.5)">${item.name || ''}</span>`,
`<span style="color:rgba(255,255,255,0.5)">${item.code || ''}</span>`,
// `<span style="color:rgba(255,255,255,0.5)">${item.code || ''}</span>`,
`<span style="color:rgba(255,255,255,0.5)">${item.run || ''}</span>`,
`<span style="color:rgba(255,255,255,0.5)">${item.error || ''}</span>`,
// `<span style="color:rgba(255,255,255,0.5)">${item.error || ''}</span>`,
]);
}
this.realEqConfig.data = this.realEqList
@@ -931,7 +959,7 @@ export default {
height: 290px;
width: 1px;
position: absolute;
left: 25%;
left: 33.8%;
top: 12%;
background: linear-gradient(to bottom,rgba(60,
231,
@@ -943,7 +971,7 @@ background: linear-gradient(to bottom,rgba(60,
height: 290px;
width: 1px;
position: absolute;
left: 50%;
left: 66.2%;
top: 12%;
background: linear-gradient(to bottom, rgba(60,
231,