From 10ad3acf9c88fffd723e39a81d9a6b401b1e7a34 Mon Sep 17 00:00:00 2001 From: juzi <819872918@qq.com> Date: Mon, 8 Jan 2024 16:59:42 +0800 Subject: [PATCH] =?UTF-8?q?=E9=A9=BE=E9=A9=B6=E8=88=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .env.dev | 10 +- src/store/modules/websocket.js | 77 ++++- src/styles/index.scss | 8 + .../databoard/components/DefectChart.vue | 83 ++--- src/views/databoard/components/FlueGas.vue | 8 +- src/views/databoard/components/GasChart.vue | 11 + .../databoard/components/ScrollBoard.vue | 18 +- src/views/databoard/components/Switcher.vue | 23 +- .../databoard/components/YieldRateChart.vue | 317 ++++++++++++++++++ .../databoard/deepProcessing/DefectSum.vue | 38 ++- .../databoard/deepProcessing/EqAlarm.vue | 28 +- .../deepProcessing/WorkOrderMonitoring.vue | 50 ++- src/views/databoard/kiln/EnergeCost.vue | 3 +- src/views/databoard/kiln/FanSequence.vue | 4 +- src/views/databoard/kiln/GasHandle.vue | 11 +- src/views/databoard/kiln/RightTwo.vue | 3 +- .../databoard/wholePlant/OrderStatus.vue | 24 +- src/views/databoard/wholePlant/YieldRate.vue | 118 +++++-- src/websocket/wsInterface.js | 107 +++++- 19 files changed, 776 insertions(+), 165 deletions(-) create mode 100644 src/views/databoard/components/YieldRateChart.vue diff --git a/.env.dev b/.env.dev index 4fa61a97..67ff42df 100644 --- a/.env.dev +++ b/.env.dev @@ -25,12 +25,14 @@ VUE_APP_BASE_API = 'http://192.168.0.33:48082' # VUE_APP_BASE_API = 'http://192.168.4.159:48080' # VUE_APP_BASE_API = 'http://192.168.1.104:48082' # VUE_APP_BASE_API = 'http://192.168.1.62:48082' -VUE_APP_BASE_API = 'http://192.168.1.78:48082' +# VUE_APP_BASE_API = 'http://192.168.1.78:48082' + +# dcs地址 +VUE_APP_Socket_Dcs_API = 'ws://10.70.180.10:8081' # socket地址 -VUE_APP_Socket_API = 'ws://192.168.0.33:48082' +VUE_APP_Socket_API = 'ws://10.70.2.2:8080' +# VUE_APP_Socket_API = 'ws://192.168.0.33:48082' - -# VUE_APP_BASE_API = 'http://100.64.0.23:48082' # 积木报表指向地址 VUE_APP_JIMU_API = 'http://10.70.2.22:8080' diff --git a/src/store/modules/websocket.js b/src/store/modules/websocket.js index 9964e201..7b69b33e 100644 --- a/src/store/modules/websocket.js +++ b/src/store/modules/websocket.js @@ -20,6 +20,7 @@ const state = { gasChartWeekTrend:{}, // 烟气 gasChartMonthTrend:{}, // 烟气 gasChartYearTrend:{}, // 烟气 + israCheckType: [], israDayStatistic: [],//缺陷统计 israWeekStatistic: [],//缺陷统计 israMonthStatistic: [],//缺陷统计 @@ -73,8 +74,17 @@ const state = { "productionLineId": 1737312466842456065, "sumInputNum": 27 }], // SJG产线产量及良品率 - sjgEquipment:[],// SJG设备报警 - + sjgEquipment:[ + {name: 'sadd', error:false,code: 'EQ202312121624540000072',status: "正常"} + ],// SJG设备报警 + workOrder: [], // 工单监控 + defectSum: [], // 缺陷汇总 + order: [],// 订单完成情况 + yieldRateTable: [],// 本日生产良率table + cutChartDay:[], + cutChartWeek:[], + cutChartMonth:[], + cutChartYear:[] }; const mutations = { SET_FANFREQUENCYINFO: (state, fanFrequencyInfo) => { @@ -123,12 +133,13 @@ const mutations = { state.exhaustGasInfo = exhaustGasInfo }, SET_EXHAUSTGASCHART: (state, exhaustGasChart) => { - state.gasChartDayTrend = exhaustGasChart.gasChartDayTrend - state.gasChartWeekTrend = exhaustGasChart.gasChartWeekTrend - state.gasChartMonthTrend = exhaustGasChart.gasChartMonthTrend - state.gasChartYearTrend = exhaustGasChart.gasChartYearTrend + state.gasChartDayTrend = exhaustGasChart.dayTrend + state.gasChartWeekTrend = exhaustGasChart.weekTrend + state.gasChartMonthTrend = exhaustGasChart.monthTrend + state.gasChartYearTrend = exhaustGasChart.yearTrend }, SET_DEFECTCHART: (state, israStatistic) => { + state.israCheckType = israStatistic.checkType state.israDayStatistic = israStatistic.dayStatistic state.israWeekStatistic = israStatistic.weekStatistic state.israMonthStatistic = israStatistic.monthStatistic @@ -136,6 +147,33 @@ const mutations = { }, SET_PRODUCTLINE: (state, productline) => { state.productline = productline + }, + SET_SJGEQ: (state, equipment) => { + state.sjgEquipment = equipment + }, + SET_WORKORDER: (state, workOrder) => { + state.workOrder = workOrder + }, + SET_DEFECTSUM: (state, defectSum) => { + state.defectSum = defectSum + }, + SET_ORDER: (state, order) => { + state.order = order + }, + SET_YIELDRATETABLE: (state, yieldRateTable) => { + state.yieldRateTable = yieldRateTable + }, + SET_CUTCHARDAY: (state, cutChartDay) => { + state.cutChartDay = cutChartDay + }, + SET_CUTCHARWEEK: (state, cutChartWeek) => { + state.cutChartWeek = cutChartWeek + }, + SET_CUTCHARMONTH: (state, cutChartMonth) => { + state.cutChartMonth = cutChartMonth + }, + SET_CUTCHARYEAR: (state, cutChartYear) => { + state.cutChartYear = cutChartYear } }; const actions = { @@ -180,6 +218,33 @@ const actions = { setProductline({ commit }, productline) { commit('SET_PRODUCTLINE', productline.payload) }, + setSJGEq({ commit }, equipment) { + commit('SET_SJGEQ', equipment.payload) + }, + setWorkOrder({ commit }, workOrder) { + commit('SET_WORKORDER', workOrder.payload) + }, + setDefectSum({ commit }, defectSum) { + commit('SET_DEFECTSUM', defectSum.payload) + }, + setOrder({ commit }, order) { + commit('SET_ORDER', order.payload) + }, + setYieldRateTable({ commit }, yieldRateTable) { + commit('SET_YIELDRATETABLE', yieldRateTable.payload) + }, + setCutChartDay({ commit }, cutChartDay) { + commit('SET_CUTCHARDAY', cutChartDay.payload) + }, + setCutChartWeek({ commit }, cutChartWeek) { + commit('SET_CUTCHARWEEK', cutChartWeek.payload) + }, + setCutChartMonth({ commit }, cutChartMonth) { + commit('SET_CUTCHARMONTH', cutChartMonth.payload) + }, + setCutChartYear({ commit }, cutChartYear) { + commit('SET_CUTCHARYEAR', cutChartYear.payload) + } }; export default { namespaced: true, diff --git a/src/styles/index.scss b/src/styles/index.scss index d162abed..7c145d7e 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -200,4 +200,12 @@ input, textarea{ // 弹出框，上下分布，去掉label的padding-bottom .el-form--label-top .el-form-item__label { padding: 0; +} + +// 大屏滚动表格 +.dv-scroll-board .rows .ceil, .dv-scroll-board .header .header-item { + border-right: 1px solid rgba(13, 23, 40, 1); +} +.dv-scroll-board .rows .ceil:last-child, .dv-scroll-board .header .header-item:last-child { + border-right: none; } \ No newline at end of file diff --git a/src/views/databoard/components/DefectChart.vue b/src/views/databoard/components/DefectChart.vue index f10647b4..deb892ec 100644 --- a/src/views/databoard/components/DefectChart.vue +++ b/src/views/databoard/components/DefectChart.vue @@ -17,6 +17,9 @@ export default { } }, computed: { + israCheckType() { + return this.$store.state.websocket.israCheckType + }, israDayStatistic() { return this.$store.state.websocket.israDayStatistic }, @@ -34,7 +37,7 @@ export default { israDayStatistic: { handler(newVal, oldVal) { if (this.chartTime === '日') { - this.tempData = israDayStatistic + this.tempData = this.israDayStatistic this.updateChart() } } @@ -42,7 +45,7 @@ export default { israWeekStatistic: { handler(newVal, oldVal) { if (this.chartTime === '周') { - this.tempData = israWeekStatistic + this.tempData = this.israWeekStatistic this.updateChart() } } @@ -50,7 +53,7 @@ export default { israMonthStatistic: { handler(newVal, oldVal) { if (this.chartTime === '月') { - this.tempData = israMonthStatistic + this.tempData = this.israMonthStatistic this.updateChart() } } @@ -58,7 +61,7 @@ export default { israYearStatistic: { handler(newVal, oldVal) { if (this.chartTime === '年') { - this.tempData = israYearStatistic + this.tempData = this.israYearStatistic this.updateChart() } } @@ -80,56 +83,34 @@ export default { this.chart.dispose() } this.chart = echarts.init(this.$el); - let legendData = [] let xData = [] - let yData = [] + let seriesData = [] + for (let i = 0;i < this.israCheckType.length; i++) { + let obj = {} + obj.type = 'bar' + obj.stack = 'all' + obj.emphasis = { + focus:"series" + } + obj.name = this.israCheckType[i] + obj.barWidth = 12 + obj.data = [] + for (let j = 0;j < this.tempData.length; j++) { + for (let k = 0; k < this.tempData[j].data.length; k++) { + if (this.israCheckType[i] === this.tempData[j].data[k].checkType) { + obj.data.push(this.tempData[j].data[k].checkNum) + } + } + } + seriesData.push(obj) + } + this.tempData && this.tempData.length > 0 && this.tempData.map(item => { xData.push(item.name) }) - var series = [ - { - data: [120, 200, 150, 80, 70, 110, 130], - type: 'bar', - stack: 'all', - name: 'a', - barWidth: 12, - }, - { - data: [10, 46, 64, '-', 0, '-', 0], - type: 'bar', - stack: 'all', - name: 'b', - barWidth: 12, - }, - { - data: [30, '-', 0, 20, 10, '-', 0], - type: 'bar', - stack: 'all', - barWidth: 12, - name: 'c' - }, - { - data: [30, '-', 0, 20, 10, '-', 0], - type: 'bar', - stack: 'all', - barWidth: 12, - name: 'd' - }, - { - data: [10, 20, 150, 0, '-', 50, 10], - type: 'bar', - stack: 'all', - name: 'e', - barWidth: 12, - label: { - show: true, - position: 'top' - } - } - ]; var option = { - color: ['#2760FF','#5B9BFF','#FFD160','#8167F6', '#99D66C', '#FF8A40'], - grid: { top: 40, right: 12, bottom: 20, left: 48 }, + color: ["#2760FF", "#8167F6", "#5B9BFF", "#99D66C", "#FFD160", "#FF8A40"], + grid: { top: 80, right: 12, bottom: 20, left: 48 }, legend: { top: 10, left: 80, @@ -142,7 +123,7 @@ export default { color: "#DFF1FE", fontSize: 12, }, - data:['a','b','c','d','e'], + data:this.israCheckType, }, xAxis: { type: "category", @@ -191,7 +172,7 @@ export default { }, className: "defect-chart-tooltip" }, - series: series + series: seriesData }; option && this.chart.setOption(option) } diff --git a/src/views/databoard/components/FlueGas.vue b/src/views/databoard/components/FlueGas.vue index aaecbcf9..dfd286e9 100644 --- a/src/views/databoard/components/FlueGas.vue +++ b/src/views/databoard/components/FlueGas.vue @@ -119,19 +119,19 @@ export default { } switch (this.chartType) { case '氧气含量':{ - temp2 = temp1.O2_float || [] + temp2 = temp1?.O2_float || [] break; } case '二氧化硫':{ - temp2 = temp1.SO2_float || [] + temp2 = temp1?.SO2_float || [] break; } case '一氧化氮':{ - temp2 = temp1.NOX_float || [] + temp2 = temp1?.NOX_float || [] break; } case '颗粒物':{ - temp2 = temp1.dust_float || [] + temp2 = temp1?.dust_float || [] break; } default: diff --git a/src/views/databoard/components/GasChart.vue b/src/views/databoard/components/GasChart.vue index 87445833..4971e1be 100644 --- a/src/views/databoard/components/GasChart.vue +++ b/src/views/databoard/components/GasChart.vue @@ -221,6 +221,7 @@ export default { series: seriesData, tooltip: { trigger: 'axis', + className: "gas-tooltip" }, } option && this.chart.setOption(option) @@ -269,3 +270,13 @@ export default { height: 100%; } + diff --git a/src/views/databoard/components/ScrollBoard.vue b/src/views/databoard/components/ScrollBoard.vue index 033c602f..bc4524ad 100644 --- a/src/views/databoard/components/ScrollBoard.vue +++ b/src/views/databoard/components/ScrollBoard.vue @@ -1,6 +1,6 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/src/views/databoard/components/Switcher.vue b/src/views/databoard/components/Switcher.vue index 341e8946..026f6e01 100644 --- a/src/views/databoard/components/Switcher.vue +++ b/src/views/databoard/components/Switcher.vue @@ -7,7 +7,7 @@ \ No newline at end of file diff --git a/src/views/databoard/deepProcessing/EqAlarm.vue b/src/views/databoard/deepProcessing/EqAlarm.vue index 6b6fc21f..9e82e9bb 100644 --- a/src/views/databoard/deepProcessing/EqAlarm.vue +++ b/src/views/databoard/deepProcessing/EqAlarm.vue @@ -2,19 +2,24 @@
- +
\ No newline at end of file diff --git a/src/views/databoard/deepProcessing/WorkOrderMonitoring.vue b/src/views/databoard/deepProcessing/WorkOrderMonitoring.vue index 47271bc5..fe2c1d11 100644 --- a/src/views/databoard/deepProcessing/WorkOrderMonitoring.vue +++ b/src/views/databoard/deepProcessing/WorkOrderMonitoring.vue @@ -2,17 +2,21 @@
- +
\ No newline at end of file diff --git a/src/views/databoard/kiln/EnergeCost.vue b/src/views/databoard/kiln/EnergeCost.vue index b152d828..719c962c 100644 --- a/src/views/databoard/kiln/EnergeCost.vue +++ b/src/views/databoard/kiln/EnergeCost.vue @@ -45,7 +45,7 @@ import Container from '../components/Container'; import ShadowRect from '../components/ShadowRect.vue'; import SplitLine from '../components/line'; -import Switcher from '../components/Switcher'; +// import Switcher from '../components/Switcher'; import EnergeTop from './EnergeTop'; import GasChart from '../components/GasChart.vue'; import SelectorBtnGroup from '../components/SelectorBtnGroup'; @@ -55,7 +55,6 @@ export default { Container, ShadowRect, SplitLine, - Switcher, EnergeTop, GasChart, SelectorBtnGroup, diff --git a/src/views/databoard/kiln/FanSequence.vue b/src/views/databoard/kiln/FanSequence.vue index c23c6316..2af2b190 100644 --- a/src/views/databoard/kiln/FanSequence.vue +++ b/src/views/databoard/kiln/FanSequence.vue @@ -42,10 +42,10 @@ \ No newline at end of file diff --git a/src/views/databoard/wholePlant/YieldRate.vue b/src/views/databoard/wholePlant/YieldRate.vue index 6c82ae63..a4a4d2bb 100644 --- a/src/views/databoard/wholePlant/YieldRate.vue +++ b/src/views/databoard/wholePlant/YieldRate.vue @@ -1,20 +1,53 @@ - \ No newline at end of file diff --git a/src/websocket/wsInterface.js b/src/websocket/wsInterface.js index 6e2d708b..355c39ae 100644 --- a/src/websocket/wsInterface.js +++ b/src/websocket/wsInterface.js @@ -6,7 +6,7 @@ import store from "@/store"; const timestr = new Date().getTime() const dcsConn = new WsConnect( // websocket地址 - 'ws://10.70.180.10:8081/xc-screen/websocket/dcsmsg'+timestr, + process.env.VUE_APP_Socket_Dcs_API + '/xc-screen/websocket/dcsmsg'+timestr, // 传递给后台的数据 '', (data) => { @@ -39,7 +39,7 @@ const dcsConn = new WsConnect( ) // ISRA const mesIsra = new WsConnect( - 'ws://10.70.2.2:8080/websocket/message?userId=KILN'+timestr, + process.env.VUE_APP_Socket_API + '/websocket/message?userId=KILN'+timestr, '', (data) => { // console.log('mes ISRA成功的回调函数, 接收到的data数据: ', data) @@ -51,10 +51,6 @@ const mesIsra = new WsConnect( store.dispatch({type: "websocket/setIsraKiln", payload:msgData.detData.dayStatistic}) break; } - // case "KilnInfo": { - // // store.dispatch({type: "websocket/setKilnInfo", payload: msgData.data.kilnInfo}) - // break; - // } default: } }, @@ -65,7 +61,7 @@ const mesIsra = new WsConnect( // 原料 MA const mesMA = new WsConnect( - 'ws://10.70.2.2:8080/websocket/message?userId=MA'+timestr, + process.env.VUE_APP_Socket_API + '/websocket/message?userId=MA'+timestr, '', (data) => { // console.log('mes 原料成功的回调函数, 接收到的data数据: ', data) @@ -76,10 +72,6 @@ const mesMA = new WsConnect( store.dispatch({type: "websocket/setMaterial", payload:msgData.data}) break; } - // case "KilnInfo": { - // // store.dispatch({type: "websocket/setKilnInfo", payload: msgData.data.kilnInfo}) - // break; - // } default: } }, @@ -90,7 +82,7 @@ const mesMA = new WsConnect( // 能耗 EN const mesEN = new WsConnect( // websocket地址 - 'ws://10.70.2.2:8080/websocket/message?userId=ENERGY'+timestr, + process.env.VUE_APP_Socket_API + '/websocket/message?userId=ENERGY'+timestr, // 传递给后台的数据 '', // 成功拿到后台返回的数据的回调函数 @@ -122,7 +114,7 @@ const mesEN = new WsConnect( // 烟气 GAS const mesGAS = new WsConnect( // websocket地址 - 'ws://10.70.2.2:8080/websocket/message?userId=GAS'+timestr, + process.env.VUE_APP_Socket_API + '/websocket/message?userId=GAS'+timestr, // 传递给后台的数据 '', // 成功拿到后台返回的数据的回调函数 @@ -153,7 +145,7 @@ const mesGAS = new WsConnect( // 缺陷分类/统计 IS const mesIS = new WsConnect( // websocket地址 - 'ws://10.70.2.2:8080/websocket/message?userId=IS'+timestr, + process.env.VUE_APP_Socket_API + '/websocket/message?userId=IS'+timestr, // 传递给后台的数据 '', // 成功拿到后台返回的数据的回调函数 @@ -164,6 +156,7 @@ const mesIS = new WsConnect( switch (msgData?.type) { case "isra": { store.dispatch({type: "websocket/setDefectChart", payload:{ + checkType: msgData.detData.checkType, dayStatistic: msgData.detData.dayStatistic, weekStatistic: msgData.detData.weekStatistic, monthStatistic: msgData.detData.monthStatistic, @@ -183,9 +176,7 @@ const mesIS = new WsConnect( // 深加工生产运行驾驶舱（除能源） SJG const mesSJG = new WsConnect( // websocket地址 - // 'ws://10.70.2.2:8080/websocket/message?userId=SJG'+timestr, - // 'ws://192.168.0.33:48082/websocket/message?userId=SJG'+timestr, - 'ws://192.168.1.62:48082/websocket/message?userId=SJG'+timestr, + process.env.VUE_APP_Socket_API + '/websocket/message?userId=SJG'+timestr, // 传递给后台的数据 '', // 成功拿到后台返回的数据的回调函数 @@ -202,6 +193,14 @@ const mesSJG = new WsConnect( store.dispatch({type: "websocket/setSJGEq", payload:msgData.detData}) break; } + case "order": { + store.dispatch({type: "websocket/setWorkOrder", payload:msgData.detData}) + break; + } + case "defectSum": { + store.dispatch({type: "websocket/setDefectSum", payload:msgData.detData}) + break; + } default: } }, @@ -211,6 +210,76 @@ const mesSJG = new WsConnect( } ) +// 订单完成情况 OV +const mesOV = new WsConnect( + // websocket地址 + process.env.VUE_APP_Socket_API + '/websocket/message?userId=OV'+timestr, + // 'ws://192.168.0.33:48082/websocket/message?userId=OV'+timestr, + // 传递给后台的数据 + '', + // 成功拿到后台返回的数据的回调函数 + (data) => { + // console.log('mes 产线产量及良品率成功的回调函数, 接收到的data数据: ', data) + let msgData = JSON.parse(data) + if (msgData == null) return; + switch (msgData?.type) { + case "order": { + store.dispatch({type: "websocket/setOrder", payload:msgData.detData}) + break; + } + default: + } + }, + // websocket连接失败的回调函数 + (err) => { + console.log('失败的回调函数', err) + } +) + +// 本日生产良品率 CUTTING +const mesCUTTING = new WsConnect( + // websocket地址 + process.env.VUE_APP_Socket_API + '/websocket/message?userId=CUTTING'+timestr, + // 传递给后台的数据 + '', + // 成功拿到后台返回的数据的回调函数 + (data) => { + // console.log('mes 产线产量及良品率成功的回调函数, 接收到的data数据: ', data) + let msgData = JSON.parse(data) + if (msgData == null) return; + console.log(msgData) + switch (msgData?.type) { + case "cutting": { + if (msgData?.name === 'table') { + store.dispatch({type: "websocket/setYieldRateTable", payload:msgData.data}) + return + } + if (msgData?.dateType === 'day') { + store.dispatch({type: "websocket/setCutChartDay", payload:msgData.detData}) + return + } + if (msgData?.dateType === 'weekly') { + store.dispatch({type: "websocket/setCutChartWeek", payload:msgData.detData}) + return + } + if (msgData?.dateType === 'month') { + store.dispatch({type: "websocket/setCutChartMonth", payload:msgData.detData}) + return + } + if (msgData?.dateType === 'year') { + store.dispatch({type: "websocket/setCutChartYear", payload:msgData.detData}) + return + } + break; + } + default: + } + }, + // websocket连接失败的回调函数 + (err) => { + console.log('失败的回调函数', err) + } +) export const getDcsMsg = () => { dcsConn.createWebSoket() @@ -220,6 +289,8 @@ export const getDcsMsg = () => { mesGAS.createWebSoket() mesIS.createWebSoket() mesSJG.createWebSoket() + mesOV.createWebSoket() + mesCUTTING.createWebSoket() } export const closeDcsMsg = () => { dcsConn.closeWebsocket() @@ -229,4 +300,6 @@ export const closeDcsMsg = () => { mesGAS.closeWebsocket() mesIS.closeWebsocket() mesSJG.closeWebsocket() + mesOV.closeWebsocket() + mesCUTTING.closeWebsocket() } \ No newline at end of file -- 2.45.2