Merge branch 'projects/mesxc-test' into projects/mesxc-zhp

修改bug
Merge pull request 'projects/mesxc-zjl' (#163 ) from projects/mesxc-zjl into projects/mesxc-test
2023-12-29 16:29:50 +08:00 · 2023-12-29 16:29:15 +08:00 · 2023-12-29 10:05:42 +08:00 · 2023-12-29 09:35:36 +08:00 · 2023-12-29 09:32:21 +08:00 · 2023-12-29 09:26:07 +08:00
27 changed files with 995 additions and 515 deletions
--- a/src/store/modules/websocket.js
+++ b/src/store/modules/websocket.js
@ -1,6 +1,10 @@
 const state = {
-  fanFrequencyInfo:{},
-  kilnInfo:{}
+  fanFrequencyInfo:{},// 分机运行频率
+  kilnInfo:{},// 窑炉信息
+  gasInfo:{},// 天然气
+
+  israKiln:[],// ISRA缺陷检测
+  material:[]// 原料
 };
 const mutations = {
  SET_FANFREQUENCYINFO: (state, fanFrequencyInfo) => {
@ -8,6 +12,17 @@ const mutations = {
  },
  SET_KILNINFO: (state, kilnInfo) => {
    state.kilnInfo = kilnInfo
+  },
+  SET_GASINFO: (state, gasInfo) => {
+    state.gasInfo = gasInfo
+  },
+
+
+  SET_ISRAKILN: (state, israKiln) => {
+    state.israKiln = israKiln
+  },
+  SET_MATERIAL: (state, material) => {
+    state.material = material
  }
 };
 const actions = {
@ -16,7 +31,18 @@ const actions = {
  },
  setKilnInfo({ commit }, kilnInfo) {
    commit('SET_KILNINFO', kilnInfo.payload)
-  }
+  },
+  setGasInfo({ commit }, gasInfo) {
+    commit('SET_GASINFO', gasInfo.payload)
+  },
+
+
+  setIsraKiln({ commit }, israKiln) {
+    commit('SET_ISRAKILN', israKiln.payload)
+  },
+  setMaterial({ commit }, material) {
+    commit('SET_MATERIAL', material.payload)
+  },
 };
 export default {
  namespaced: true,
--- a/src/views/OperationalOverview/coldBoard.vue
+++ b/src/views/OperationalOverview/coldBoard.vue
@ -2,7 +2,7 @@
 * @Author: zwq
 * @Date: 2021-07-19 15:18:30
 * @LastEditors: zhp
- * @LastEditTime: 2023-12-28 11:52:08
+ * @LastEditTime: 2023-12-29 16:19:38
 * @Description:
 -->
 <template>
@ -132,6 +132,8 @@ import doubleYChart from './components/doubleYChart '
 // import elementResizeDetectorMaker from 'element-resize-detector';
 // var erd = elementResizeDetectorMaker(); //创建实例
 // let resizeFun = null
+import { parseTime } from '../core/mixins/code-filter';
+

 import LinearBarChart from './components/linearBarChart'
 const qualityYearTableProps= []
@ -153,7 +155,10 @@ const EqMonitoringProps = [
 ]
 const cutProps = [
  { prop: 'lineName', label: '产线' },
-  { prop: 'time', label: '时间' },
+  {
+    prop: 'time', label: '时间',
+    filter: parseTime
+  },
  { prop: 'size', label: '规格' },
  { prop: 'productArea', label: '良品面积' },
  { prop: 'wasteArea', label: '废片面积' },
@ -303,7 +308,10 @@ export default {
    this.init()
  },
  mounted() {
-    this.initWebSocket()
+    this.funInitWebSocket()
+    this.CutInitWebSocket()
+    this.SJGInitWebSocket()
+
    this.getTimes()
    const _this = this;
    _this.beilv2 = document.documentElement.clientWidth / 1920
@ -353,13 +361,13 @@ export default {
      //     status: obj.data.FanFrequencyInfo[i]
      //   })
      // }
-      this.funList = arr``
+      // this.funList = arr``
      this.$axios.get(
        '/monitoring/equipment-monitor/realtime-page',
        'get',
        this.queryParams
      ).then((res) => {
-        console.log(res);
+        console.log('222222222222222', res);
        this.realEqList = res.data.list;
        // this.total = response.data.total;
        // this.loading = false;
@ -389,7 +397,7 @@ export default {
      //拼接格式化当前时间
      this.times = year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds;
    },
-    initWebSocket() {
+    SJGInitWebSocket() {
      if (typeof (WebSocket) === 'undefined') {
        alert('您的浏览器不支持WebSocket')
      } else {
@ -397,7 +405,7 @@ export default {
        // const wsUrl = 'ws://192.168.1.104:48082/websocket/message?userId=SJG'
        let date = new Date().valueOf()
        console.log(date);
-        const SJGWsUrl = `ws://192.168.0.33:48082/websocket/message?userId=COLD${date}`
+        const SJGWsUrl = `ws://192.168.0.30:8888/websocket/message?userId=COLD${date}`
        this.SJGWebsocket = new WebSocket(SJGWsUrl)
        // 监听 WebSocket 连接
        this.SJGWebsocket.onopen = this.SJGWebsocketOnOpen
@ -407,7 +415,17 @@ export default {
        this.SJGWebsocket.onmessage = this.SJGWebsocketOnMessage
        // 监听 webSocket 断开信息
        this.SJGWebsocket.onclose = this.SJGWebsocketClose
-        const cutWsUrl = `ws://192.168.0.33:48082/websocket/message?userId=CUTTING${date}`
+      }
+    },
+    CutInitWebSocket() {
+      if (typeof (WebSocket) === 'undefined') {
+        alert('您的浏览器不支持WebSocket')
+      } else {
+        // const wsUrl = 'ws://192.168.1.74:48080/websocket/message?userId=EN111'
+        // const wsUrl = 'ws://192.168.1.104:48082/websocket/message?userId=SJG'
+        let date = new Date().valueOf()
+        console.log(date);
+        const cutWsUrl = `ws://192.168.0.30:8888/websocket/message?userId=CUTTING${date}`

        this.cutWebsocket = new WebSocket(cutWsUrl)
        // 监听 WebSocket 连接
@ -418,29 +436,27 @@ export default {
        this.cutWebsocket.onmessage = this.cutWebsocketOnMessage
        // 监听 webSocket 断开信息
        this.cutWebsocket.onclose = this.cutWebsocketClose
-        const funWsUrl = `ws://10.70.180.10:8081/xc-screen/websocket/${date}`
-        this.funWebsocket = new WebSocket(funWsUrl)
-        // 监听 WebSocket 连接
-        this.funWebsocket.onopen = this.funWebsocketOnOpen
-        // 监听 WebSocket 错误信息
-        this.funWebsocket.onerror = this.funWebsocketOnError
-        // 监听 WebSocket 消息
-        this.funWebsocket.onmessage = this.funWebsocketOnMessage
-        // 监听 webSocket 断开信息
-        this.funWebsocket.onclose = this.funWebsocketClose
-        // const wsUrl = 'ws://192.168.0.33:48082/websocket/message?userId=EN111'
-        // 实例化 WebSocket
-        // this.websocket = new WebSocket(wsUrl)
-        // // 监听 WebSocket 连接
-        // this.websocket.onopen = this.websocketOnOpen
-        // // 监听 WebSocket 错误信息
-        // this.websocket.onerror = this.websocketOnError
-        // // 监听 WebSocket 消息
-        // this.websocket.onmessage = this.websocketOnMessage
-        // // 监听 webSocket 断开信息
-        // this.websocket.onclose = this.websocketClose
      }
    },
+    funInitWebSocket() {
+      // if (typeof (WebSocket) === 'undefined') {
+      //   alert('您的浏览器不支持WebSocket')
+      // } else {
+      //   // const wsUrl = 'ws://192.168.1.74:48080/websocket/message?userId=EN111'
+      //   // const wsUrl = 'ws://192.168.1.104:48082/websocket/message?userId=SJG'
+      //   let date = new Date().valueOf()
+      //   const funWsUrl = `ws://10.70.2.2:8080/xc-screen/websocket/${date}`
+      //   this.funWebsocket = new WebSocket(funWsUrl)
+      //   // 监听 WebSocket 连接
+      //   this.funWebsocket.onopen = this.funWebsocketOnOpen
+      //   // 监听 WebSocket 错误信息
+      //   this.funWebsocket.onerror = this.funWebsocketOnError
+      //   // 监听 WebSocket 消息
+      //   this.funWebsocket.onmessage = this.funWebsocketOnMessage
+      //   // 监听 webSocket 断开信息
+      //   this.funWebsocket.onclose = this.funWebsocketClose
+      // }
+    },
    funWebsocketOnOpen() {
      console.log('socket连接成功')
      // console.log(this.SJGWebsocket.onmessage);
@ -449,23 +465,23 @@ export default {
    // 连接建立失败重连
    funWebsocketOnError(e) {
      console.log('222222', e)
-      this.initWebSocket()
+      this.funInitWebSocket()
    },
    // 数据接收
    funWebsocketOnMessage(e) {
      // console.log(1111, e)
      // console.log(this.wsData)
      // console.log('22222', this.wsData.data)
-      this.wsData = JSON.parse(e.data)
-      if (this.wsData.type === 'FanFrequencyInfo') {
-        // let arr = []
-        // for (let i in this.wsData.FanFrequencyInfo) {
-        //   arr.push({
-        //     equipmentName: i,
-        //     status: obj.data.FanFrequencyInfo[i]
-        //   })
-        // }
-        // this.funList = arr
+      this.funWsData = JSON.parse(e.data)
+      if (this.funWsData.type === 'FanFrequencyInfo') {
+        let arr = []
+        for (let i in this.funWsData.FanFrequencyInfo) {
+          arr.push({
+            equipmentName: i,
+            status: obj.data.FanFrequencyInfo[i]
+          })
+        }
+        this.funList = arr
      }
    },
    cutWebsocketOnOpen() {
@ -476,16 +492,16 @@ export default {
    // 连接建立失败重连
    cutWebsocketOnError(e) {
      console.log('11111', e)
-      this.initWebSocket()
+      this.CutInitWebSocket()
    },
    // 数据接收
    cutWebsocketOnMessage(e) {
      // console.log(1111, e)
-      this.wsData = JSON.parse(e.data)
-      console.log(this.wsData)
+      this.cutWsData = JSON.parse(e.data)
      // console.log('22222', this.wsData.data)
-      if (this.wsData.type === 'cutting' && this.wsData.name === 'table' ) {
-        this.cutTableDataList = this.wsData.productHourData.map((ele, index) => {
+      console.log('table', this.cutWsData)
+      if (this.cutWsData.type === 'cutting' && this.cutWsData.name === 'table') {
+        this.cutTableDataList = this.cutWsData.productHourData.map((ele, index) => {
          // if (ele.progressRate != 1) {
          return {
            id: ele.id,
@ -500,7 +516,7 @@ export default {
          // }
        });
        // console.log(this.orderList)
-      } else if (this.wsData.type === 'cutting' && this.wsData.name === 'chart') {
+      } else if (this.cutWsData.type === 'cutting' && this.cutWsData.name === 'chart' && this.cutWsData.dateType === 'day') {
        let nameList = []
        let nameWasteList = []
        let topNameList = []
@ -508,14 +524,18 @@ export default {
        let wasteList = []
        let sumAreaList = []
        let yieldList = []
-        this.cutTableDataList = this.wsData.detData.forEach((ele, index) => {
+        this.cutTableDataList = this.cutWsData.coldDetData.forEach((ele, index) => {
          nameList.push(ele.lineName)
-          topNameList.push(ele.lineName + '   ' + '总面积' + ele.sumArea)
+          topNameList.push('产线: ' + ele.lineName + '   ' + '总面积:' + ele.sumArea)
          productList.push(ele.productArea)
          wasteList.push(ele.wastArea)
          nameWasteList.push('缺陷面积:' + ele.wastArea)
+          sumAreaList.push(ele.sumArea)
+          yieldList.push(ele.yield)
        })
        this.$refs.pileChart.initChart(nameList, topNameList, nameWasteList, productList, wasteList)
+        // console.log(this.cutWsData)
+        // console.log('chart',nameList, topNameList, nameWasteList, productList, wasteList);
        this.$refs.productChart.initChart(nameList, yieldList, sumAreaList)
        // this.$refs.pileChart.initWebSocket
        // console.log(this.orderList)
@ -529,7 +549,7 @@ export default {
    // 连接建立失败重连
    SJGWebsocketOnError(e) {
      console.log('11111', e)
-      this.initWebSocket()
+      this.SJGInitWebSocket()
    },
    // 数据接收
    SJGWebsocketOnMessage(e) {
@ -538,11 +558,11 @@ export default {
      // let data = { "data": { "FanFrequencyInfo": { "1#10处拐角冷却风机": "0", "1#L型吊墙冷却风机": "0", "1#助燃风机": "44.8", "1#澄清带池壁风机": "40", "1#融化带池壁风机": "43", "1#钢碹碴小炉垛风机": "48", "2#10处拐角冷却风机": "50", "2#L型吊墙冷却风机": "49.7", "2#助燃风机": "0", "2#澄清带池壁风机": "0", "2#融化带池壁风机": "0", "2#钢碹碴小炉垛风机": "48", "3#澄清带池壁风机": "0", "3#融化带池壁风机": "0", "4#澄清带池壁风机": "40", "4#融化带池壁风机": "43" } }, "type": "FanFrequencyInfo" }
      // let obj = JSON.parse(data.data)
      // console.log(obj);
-      this.wsData = JSON.parse(e.data)
-      console.log(this.wsData)
+      this.SJGWsData = JSON.parse(e.data)
+      console.log(this.SJGWsData)
      // console.log('22222', this.wsData.data)
-      if (this.wsData.type === 'isra') {
-        this.ISRAList = this.wsData.detData.map((ele, index) => {
+      if (this.SJGWsData.type === 'isra') {
+        this.ISRAList = this.SJGWsData.detData.map((ele, index) => {
          // if (ele.progressRate != 1) {
          return {
            id: ele.id,
@ -557,63 +577,6 @@ export default {
        // console.log(this.orderList)
      }
    },
-    // 数据发送
-    // SJGWebsocketSend() {
-    //   this.websocket.send('11111')
-    // },
-    // // 关闭
-    // SJGWebsocketClose(e) {
-    //   console.log('WebSocket 断开连接', e)
-    // },
-    // // 连接建立之后执行send方法发送数据
-    // websocketOnOpen() {
-    //   console.log('socket连接成功')
-    //   this.websocket.onmessage()
-    // },
-    // // 连接建立失败重连
-    // websocketOnError(e) {
-    //   console.log('11111', e)
-    //   this.initWebSocket()
-    // },
-    // // 数据接收
-    // websocketOnMessage(e) {
-    //   console.log(1111, e)
-    //   this.wsData = JSON.parse(e.data)
-    //   // console.log('22222', this.wsData.data)
-    //   if (this.wsData.type === 'EnergyMonitoring') {
-    //     let EnergyNameList = []
-    //     this.wsData.data.forEach((ele) => {
-    //       EnergyNameList.push(ele.lineName)
-    //     })
-    //     this.EnergyMonitoringNameList = EnergyNameList
-    //     let EnergyDataList = []
-    //     this.wsData.data.forEach((ele) => {
-    //       EnergyDataList.push(ele.useQuantity
-    //         // {
-    //         //   type: 'bar',
-    //         //   data: ele.useQuantity,
-    //         //   barWidth: 6
-
-    //         // }
-    //       )
-    //     })
-    //     this.EnergyMonitoringList = EnergyDataList
-    //     console.log(EnergyDataList)
-    //     // console.log(this.EnergyMonitoringNameList)
-    //     // console.log(this.EnergyMonitoringList)
-    //     // this.$nextTick(() => {
-    //     this.$refs.EnergyMonitoringChart.initChart(this.EnergyMonitoringNameList, this.EnergyMonitoringList)
-    //     // })
-    //   }
-    // },
-    // // 数据发送
-    // websocketSend() {
-    //   this.websocket.send('11111')
-    // },
-    // // 关闭
-    // websocketClose(e) {
-    //   console.log('WebSocket 断开连接', e)
-    // },
    windowWidth(value) {
      this.clientWidth = value
      this.beilv2 = this.clientWidth / 1920
--- a/src/views/OperationalOverview/components/doubleYChart
+++ b/src/views/OperationalOverview/components/doubleYChart
@ -1,7 +1,7 @@
 <!--
 * @Author: zhp
 * @Date: 2023-09-21 09:06:28
- * @LastEditTime: 2023-12-27 18:28:45
+ * @LastEditTime: 2023-12-29 16:18:17
 * @LastEditors: zhp
 * @Description:
 -->
@ -138,7 +138,7 @@ export default {
          }
        },
        grid: {
-          left: "3%",
+          left: "4%",
          right: "4%",
          bottom: "3%",
          width: 'auto',
--- a/src/views/OperationalOverview/components/pileBarChart.vue
+++ b/src/views/OperationalOverview/components/pileBarChart.vue
@ -1,7 +1,7 @@
 <!--
 * @Author: zhp
 * @Date: 2023-12-27 13:54:52
- * @LastEditTime: 2023-12-27 19:47:27
+ * @LastEditTime: 2023-12-29 16:28:26
 * @LastEditors: zhp
 * @Description:
 -->
@ -93,54 +93,50 @@ export default {
    initChart(nameList, topNameList, nameWasteList, passRateList, wasteList) {
      // console.log(1)
      this.chart = echarts.init(document.getElementById(this.id))
-      let series = [{
-        name: '成品面积',
+      let series = [
+        {
+          // 辅助系列
+          name: '良品',
          type: 'bar',
          stack: 'total',
-        // label: {
-        //   show: true
+          // silent: true,
+          // itemStyle: {
+            color: '#0fdedb',
          // },
-        emphasis: {
-          focus: 'series'
-        },
-        data: passRateList,
-        itemStyle: {
-          normal: { color: '#2359ec' }
-        }
+          barWidth: 10,
+          data: passRateList
        },
        {
-        name: '废片面积',
          type: 'bar',
          stack: 'total',
-        // label: {
-        //   show: true
-        // },
-        emphasis: {
-          focus: 'series'
-        },
-        barWidth: 12,
+          name: '废品',
          data: wasteList,
-        itemStyle: {
-          normal: { color: '#745fe4' }
+          barWidth: 10,
+          // barWidth: 15,
+          // label: {
+          //   position: [10, 10],
+          //   normal: {
+          //     position: [800, -24],
+          //     show: true,
+          //     textStyle: {
+          //       color: '#2359ec',
+          //       fontSize: 16,
+          //     },
+          //   },
+          // },
        }
-      },]
+      ]
      // for (i = 0; i < 5; i++) {
      //   series.push({

      //   })
      // }
-      const yAxisDataLeft = topNameList;
-      // const yAxisDataRight = ['服装', '矿产', '服务业', '建筑业', '金融业'];
-      const yAxisDataRight = nameWasteList
      this.chart.setOption({
-        tooltip: {
-          trigger: 'axis',
-          axisPointer: {
-            // Use axis to trigger tooltip
-            type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
+        legend: {
+          textStyle: {
+            color: '#ffffff'
          }
        },
-        // legend: {},
        grid: {
          left: '3%',
          right: '4%',
@ -149,73 +145,38 @@ export default {
          height: 'auto',
          containLabel: true
        },
-        xAxis: {
-          type: 'value',
-          show: false, // 不显示坐标轴线、坐标轴刻度线和坐标轴上的文字
-          axisTick: {
-            show: false // 不显示坐标轴刻度线
-          },
-          axisLine: {
-            show: false, // 不显示坐标轴线
-          },
-          axisLabel: {
-            show: false, // 不显示坐标轴上的文字
-          },
-          splitLine: {
-            show: false // 不显示网格线
-          },
-        },
        yAxis: [
          {
+            type: 'category',
            inverse: true,
-            data: yAxisDataLeft,
+            splitLine: {
+              show: false
+            },
+            axisTick: {
+              show: false
+            },
+            axisLine: {
+              show: false
+            },
            axisLabel: {
              show: true,
              inside: true,
+              interval: 0, //横轴信息全部显
+              splitNumber: 50,
+              // boundaryGap: [20, 20],
              textStyle: {
                color: '#ffffff',
+                verticalAlign: 'bottom',
                fontSize: 12,
                align: 'left',
-              },
-              formatter: '{value}\n{a|占位}\n{a|占位}',
-              rich: {
-                a: {
-                  color: 'transparent',
-                  lineHeight: 24,
-                }
+                padding: [0, 0, 15, -5]
              }
            },
-            //offset: 30,
-            splitLine: {
-              show: false
-            },
-            axisTick: {
-              show: false
-            },
-            axisLine: {
-              show: false
-            }
+            data: topNameList
          },
          {
-            inverse: false,
-            data: yAxisDataRight,
-            axisLabel: {
-              inside: true,
-              textStyle: {
-                color: '#ffffff',
-                fontSize: 12,
-                align: 'right',
-              },
-              formatter: '{value}\n{a|占位}\n{a|占位}',
-              rich: {
-                a: {
-                  color: 'transparent',
-                  lineHeight: 24,
-                  fontFamily: 'digital'
-                }
-              }
-            },
-            offset: 0,
+            type: 'category',
+            inverse: true,
            splitLine: {
              show: false
            },
@ -224,9 +185,28 @@ export default {
            },
            axisLine: {
              show: false
+            },
+            axisLabel: {
+              show: true,
+              inside: true,
+              interval: 0, //横轴信息全部显
+              splitNumber: 50,
+              // boundaryGap: [20, 20],
+              textStyle: {
+                color: '#ffffff',
+                verticalAlign: 'bottom',
+                fontSize: 12,
+                align: 'right',
+                padding: [0, 0, 15, -5]
              }
+            },
+            data: nameWasteList
          }
        ],
+        xAxis: {
+          // max: 120,
+          show: false,
+        },
        series:series
      })
    }
--- a/src/views/OperationalOverview/processingBoard.vue
+++ b/src/views/OperationalOverview/processingBoard.vue
@ -2,7 +2,7 @@
 * @Author: zwq
 * @Date: 2021-07-19 15:18:30
 * @LastEditors: zhp
- * @LastEditTime: 2023-12-28 10:22:06
+ * @LastEditTime: 2023-12-29 15:15:50
 * @Description:
 -->
 <template>
@ -557,6 +557,7 @@ export default {
  mounted() {
    this.getList()
    this.initWebSocket()
+    this.SJGInitWebSocket()
    this.getTimes()
    const _this = this;
    _this.beilv2 = document.documentElement.clientWidth / 1920
@ -597,14 +598,14 @@ export default {
        'get',
        this.queryParams
      ).then((res) => {
-        console.log('11111', res);
+        // console.log('11111', res);
        this.productLineList = res.data
      })
      this.$axios.get(
        'base/quality-inspection-record/dayStatistics',
        'get',
      ).then((res) => {
-        console.log('11111', res);
+        // console.log('11111', res);
        this.qualityMonthList = res.data
      })
    },
@ -639,17 +640,6 @@ export default {
        const wsUrl = `ws://192.168.0.33:48082/websocket/message?userId=EN${date}`
        // const wsUrl = 'ws://192.168.1.104:48082/websocket/message?userId=SJG'
        let date = new Date().valueOf()
-        console.log(date);
-        const SJGWsUrl = `ws://192.168.0.33:48082/websocket/message?userId=SJG${date}`
-        this.SJGWebsocket = new WebSocket(SJGWsUrl)
-        // 监听 WebSocket 连接
-        this.SJGWebsocket.onopen = this.SJGWebsocketOnOpen
-        // 监听 WebSocket 错误信息
-        this.SJGWebsocket.onerror = this.SJGWebsocketOnError
-        // 监听 WebSocket 消息
-        this.SJGWebsocket.onmessage = this.SJGWebsocketOnMessage
-        // 监听 webSocket 断开信息
-        this.SJGWebsocket.onclose = this.SJGWebsocketClose
        // const wsUrl = 'ws://192.168.0.33:48082/websocket/message?userId=EN111'
        // 实例化 WebSocket
        this.websocket = new WebSocket(wsUrl)
@ -663,6 +653,26 @@ export default {
        this.websocket.onclose = this.websocketClose
      }
    },
+    SJGInitWebSocket() {
+      if (typeof (WebSocket) === 'undefined') {
+        alert('您的浏览器不支持WebSocket')
+      } else {
+        // const wsUrl = `ws://192.168.0.33:48082/websocket/message?userId=EN${date}`
+        // const wsUrl = 'ws://192.168.1.104:48082/websocket/message?userId=SJG'
+        let date = new Date().valueOf()
+        // console.log(date);
+        const SJGWsUrl = `ws://192.168.0.33:48082/websocket/message?userId=SJG${date}`
+        this.SJGWebsocket = new WebSocket(SJGWsUrl)
+        // 监听 WebSocket 连接
+        this.SJGWebsocket.onopen = this.SJGWebsocketOnOpen
+        // 监听 WebSocket 错误信息
+        this.SJGWebsocket.onerror = this.SJGWebsocketOnError
+        // 监听 WebSocket 消息
+        this.SJGWebsocket.onmessage = this.SJGWebsocketOnMessage
+        // 监听 webSocket 断开信息
+        this.SJGWebsocket.onclose = this.SJGWebsocketClose
+      }
+    },
    SJGWebsocketOnOpen() {
      console.log('socket连接成功')
      console.log(this.SJGWebsocket.onmessage);
@ -671,16 +681,16 @@ export default {
    // 连接建立失败重连
    SJGWebsocketOnError(e) {
      // console.log('11111', e)
-      this.initWebSocket()
+      this.SJGInitWebSocket()
    },
    // 数据接收
    SJGWebsocketOnMessage(e) {
      // console.log(1111, e)
-      this.wsData = JSON.parse(e.data)
+      this.SJGWsData = JSON.parse(e.data)
      // console.log(this.wsData.detData);
      // console.log('22222', this.wsData.data)
-      if (this.wsData.type === 'order') {
-        this.orderList = this.wsData.detData.map((ele, index) => {
+      if (this.SJGWsData.type === 'order') {
+        this.orderList = this.SJGWsData.detData.map((ele, index) => {
          if (ele.progressRate != 1) {
            return {
              id: ele.id,
@ -690,8 +700,8 @@ export default {
          }
        });
        console.log(this.orderList)
-      } else if (this.wsData.type === 'equipment') {
-        this.equipmentList = this.wsData.detData.map((ele, index) => {
+      } else if (this.SJGWsData.type === 'equipment') {
+        this.equipmentList = this.SJGWsData.detData.map((ele, index) => {
          // if (ele.progressRate != 1) {
            return {
              id: ele.id,
@ -702,16 +712,16 @@ export default {
            }
          // }
        });
-        // console.log(this.orderList)
-      } else if (this.wsData.type === 'productline') {
-        console.log(this.wsData.detData);
+        // console.log(SJGWsData.orderList)
+      } else if (this.SJGWsData.type === 'productline') {
+        // console.log(this.wsData.detData);
        let nameList = []
        let passRateList = []
        let outputNumList = []

        // console.log('2222222222', this.productLineList);
        this.productLineList.forEach((item) => {
-          this.wsData.detData.forEach((ele) => {
+          this.SJGWsData.detData.forEach((ele) => {
            if (item.id == ele.productionLineId) {
              nameList.push(item.name)
            }
@ -720,11 +730,11 @@ export default {
        console.log(Array.from(new Set(nameList)))
        // progressRateList = EnergyNameList
        // let EnergyDataList = []
-        this.wsData.detData.forEach((ele) => {
+        this.SJGWsData.detData.forEach((ele) => {
          passRateList.push(ele.passRate *100
          )
        })
-        this.wsData.detData.forEach((ele) => {
+        this.SJGWsData.detData.forEach((ele) => {
          outputNumList.push(ele.outputNum
          )
        })
--- a/src/views/databoard/components/GasChart.vue
+++ b/src/views/databoard/components/GasChart.vue
@ -116,6 +116,9 @@ export default {
 		sidebarStatus() {
 			return this.$store.state.app.sidebar.opened;
 		},
+		gasChartMsg() {
+			return this.$store.state.websocket.gasInfo
+		}
 	},
 	watch: {
 		sidebarStatus(val) {
@ -127,6 +130,14 @@ export default {
 				this.chart.setOption(this.option);
 			}, 500);
 		},
+		gasChartMsg: {
+			handler(newVal, oldVal) {
+				console.log(newVal)
+				// this.chartData = newVal
+				console.log('newVal============')
+				// this.updateChart()
+			}
+		}
 	},
 	mounted() {
 		this.$el.addEventListener('resize', () => {
--- a/src/views/databoard/components/Header.vue
+++ b/src/views/databoard/components/Header.vue
@ -7,9 +7,7 @@

 <template>
 	<header class="kiln-header">
-		<h1>
-			窑炉生产运行驾驶舱
-		</h1>
+		<h1>{{topTitle}}</h1>
 		<!-- left: 312px; -->
 		<div
 			class="firm">
@ -38,7 +36,9 @@ export default {
 	name: 'KilnHeader',
 	// components: { DateBtnGroup },
 	props: {
-		isFullScreen:false
+		isFullScreen:false,
+		topTitle: ''
+
 	},
 	data() {
 		return {
--- a/src/views/databoard/components/ISRAChart.vue
+++ b/src/views/databoard/components/ISRAChart.vue
@ -21,8 +21,9 @@ export default {
 	data() {
 		return {
 			chart: null,
+			colors:['#2760ff', '#518eec', '#0ee8e4', '#ddb523'],
+			chartData: [],
 			option: {
-				color: ['#2760ff', '#518eec', '#0ee8e4', '#ddb523'],
 				tooltip: {
 					trigger: 'item',
 				},
@ -35,7 +36,7 @@ export default {
 					}
 				},
 				title: {
-					text: 11234,
+					text: 0,
 					subtext: '总数',
 					top: '43%',
 					left: '49%',
@ -47,11 +48,62 @@ export default {
 					},
 					subtextStyle: {
 						fontSize: 16,
-						color: '#fff7',
+						color: '#fff00',
 					},
 				},
-				series: [
-					{
+				series: []
+			},
+		};
+	},
+	mounted() {
+		this.initChart();
+	},
+	activated() {
+	},
+	computed: {
+		israChartMsg() {
+			return this.$store.state.websocket.israKiln
+		}
+	},
+	watch: {
+		israChartMsg: {
+			handler(newVal, oldVal) {
+				console.log(newVal)
+				this.chartData = newVal
+				console.log('newVal============')
+				this.updateChart()
+			}
+		}
+	},
+	methods: {
+		initChart() {
+			this.chart = echarts.init(this.$el);
+			this.chart.setOption(this.option);
+		},
+		updateChart() {
+			console.log('update')
+			let num = 0
+			this.chartData && this.chartData.length > 0 && this.chartData.map(i => {
+				num+=i.num
+			})
+			this.chart.setOption({
+				title:{
+					text: num,
+					subtext: '总数',
+					top: '43%',
+					left: '49%',
+					textAlign: 'center',
+					textStyle: {
+						fontSize: 32,
+						lineHeight: 16,
+						color: '#fff',
+					},
+					subtextStyle: {
+						fontSize: 16,
+						color: '#fff00',
+					},
+				},
+				series:[{
 						name: 'Access From',
 						type: 'pie',
 						radius: ['45%', '65%'],
@ -60,10 +112,6 @@ export default {
 							show: true,
 							position: 'outside',
 							formatter: ({ dataIndex, percent }) => {
-								// console.log(
-								// 	['#2760ff', '#518eec', '#0ee8e4', '#ddb523'][dataIndex % 4],
-								// 	percent
-								// );
 								const styleName = ['a', 'b', 'c', 'd'][dataIndex % 4];
 								return `{${styleName}|${percent}%}`;
 							},
@ -98,14 +146,11 @@ export default {
 							show: true,
 						},
 						itemStyle: {
-							borderRadius: 12,
-							// borderColor: 'transparent',
-							// borderWidth: 20
+							borderRadius: 12
 						},
-						data: [
-							{
-								value: 1048,
-								name: '缺陷1',
+						data: this.chartData && this.chartData.length > 0 && this.chartData.map((item, index) => ({
+						name:item.name,
+						value: item.num,
 						itemStyle:{
 							color:{
 								type: 'linear',
@ -113,126 +158,16 @@ export default {
 								y: 1,
 								x2: 0,
 								y2: 0,
+								global: false,
 								colorStops:[
-											{
-												offset: 0,
-												color: '#2760ff', // 0% 处的颜色
-											},
-											// {
-											// 	offset: 0.6,
-											// 	color: 'transparent', // 80% 处的颜色
-											// },
-											{
-												offset: 1,
-												color: '#2760ff33', // 100% 处的颜色
-											},
-										],
-										global: false, // 缺省为 false
-									},
-								},
-							},
-							{
-								value: 735,
-								name: '缺陷2',
-								itemStyle: {
-									color: {
-										type: 'linear',
-										x: 0,
-										y: 0,
-										x2: 1,
-										y2: 0,
-										colorStops: [
-											{
-												offset: 0,
-												color: '#518eec', // 0% 处的颜色
-											},
-											// {
-											// 	offset: 0.6,
-											// 	color: 'transparent', // 80% 处的颜色
-											// },
-											{
-												offset: 1,
-												color: '#518eec33', // 100% 处的颜色
-											},
-										],
-										global: false, // 缺省为 false
-									},
-								},
-							},
-							{
-								value: 580,
-								name: '缺陷3',
-								itemStyle: {
-									color: {
-										type: 'linear',
-										x: 0,
-										y: 0,
-										x2: 1,
-										y2: 1,
-										colorStops: [
-											{
-												offset: 0,
-												color: '#0ee8e4', // 0% 处的颜色
-											},
-											// {
-											// 	offset: 0.6,
-											// 	color: 'transparent', // 80% 处的颜色
-											// },
-											{
-												offset: 1,
-												color: '#0ee8e433', // 100% 处的颜色
-											},
-										],
-										global: false, // 缺省为 false
-									},
-								},
-							},
-							{
-								value: 484,
-								name: '缺陷4',
-								itemStyle: {
-									color: {
-										type: 'linear',
-										x: 1,
-										y: 0,
-										x2: 0,
-										y2: 0,
-										colorStops: [
-											{
-												offset: 0,
-												color: '#ddb523', // 0% 处的颜色
-											},
-											// {
-											// 	offset: 0.6,
-											// 	color: 'transparent', // 70% 处的颜色
-											// },
-											{
-												offset: 1,
-												color: '#ddb52333', // 100% 处的颜色
-											},
-										],
-										global: false, // 缺省为 false
-									},
-								},
-							},
-						],
-					},
-				],
-			},
-		};
-	},
-	mounted() {
-		this.initChart();
-	},
-	activated() {
-		// this.initChart();
-	},
-	computed: {},
-	methods: {
-		initChart() {
-			this.chart = echarts.init(this.$el);
-			this.chart.setOption(this.option);
-		},
+									{offset: 0,color: this.colors[index%4]},
+									{offset: 1,color: this.colors[index%4]+'33'}
+								]
+							}
+						}
+					}))}]
+			})
+		}
 	},
 };
 </script>
--- a/src/views/databoard/components/SelectorBtnGroup.vue
+++ b/src/views/databoard/components/SelectorBtnGroup.vue
@ -29,7 +29,9 @@ export default {
 		};
 	},
 	computed: {},
-	methods: {},
+	methods: {
+		
+	},
 };
 </script>

--- a/src/views/databoard/deepProcessing/BottomTwo.vue
+++ b/src/views/databoard/deepProcessing/BottomTwo.vue
@ -0,0 +1,29 @@
+<template>
+	<div
+		class="bottom-two"
+		style="
+			display: grid;
+			gap: 16px;
+			grid-template-rows: 462px 462px;
+		">
+		<OrderStatus />
+		<YieldRate />
+	</div>
+</template>
+
+<script>
+import OrderStatus from './OrderStatus.vue';
+import YieldRate from './YieldRate.vue';
+export default {
+	name: 'BottomTwo',
+	components: { OrderStatus, YieldRate },
+	props: {},
+	data() {
+		return {};
+	},
+	computed: {},
+	methods: {},
+};
+</script>
+
+<style scoped lang="scss"></style>
--- a/src/views/databoard/deepProcessing/OrderStatus.vue
+++ b/src/views/databoard/deepProcessing/OrderStatus.vue
@ -0,0 +1,14 @@
+<template>
+  <div style="flex: 1;">
+    <Container name="订单完成情况" size="small" style="">
+      digndna
+    </Container>
+  </div>
+</template>
+<script>
+import Container from '../components/Container.vue';
+export default {
+  name: 'OrderStatus',
+  components: { Container },
+}
+</script>
--- a/src/views/databoard/deepProcessing/TopThree.vue
+++ b/src/views/databoard/deepProcessing/TopThree.vue
@ -0,0 +1,29 @@
+<template>
+	<div
+		class="top-three"
+		style="
+			display: grid;
+			gap: 16px;
+			grid-template-rows: 462px 462px;
+		">
+		<OrderStatus />
+		<YieldRate />
+	</div>
+</template>
+
+<script>
+import OrderStatus from './OrderStatus.vue';
+import YieldRate from './YieldRate.vue';
+export default {
+	name: 'TopThree',
+	components: { OrderStatus, YieldRate },
+	props: {},
+	data() {
+		return {};
+	},
+	computed: {},
+	methods: {},
+};
+</script>
+
+<style scoped lang="scss"></style>
--- a/src/views/databoard/deepProcessing/YieldRate.vue
+++ b/src/views/databoard/deepProcessing/YieldRate.vue
@ -0,0 +1,14 @@
+<template>
+  <div style="flex: 1;">
+    <Container name="本日生产良品率" size="small" style="">
+      0000987
+    </Container>
+  </div>
+</template>
+<script>
+import Container from '../components/Container.vue';
+export default {
+  name: 'YieldRate',
+  components: { Container },
+}
+</script>
--- a/src/views/databoard/deepProcessing/index.vue
+++ b/src/views/databoard/deepProcessing/index.vue
@ -0,0 +1,145 @@
+<template>
+	<div id='deepProcessingContainerB' ref='deepProcessingContainerB' style="width: 100%;height: 100%;">
+		<div
+			id='deepProcessingContainer'
+			ref='deepProcessingContainer'
+			class="deepProcessingBoard"
+			style="
+				position: absolute;
+				transform-origin: 16px 8px;
+				font-size: 16px;
+				top: -8px;
+				left: -16px;
+				width: 1920px;
+				height: 1080px;
+				display: flex;
+				flex-direction: column;
+				gap: 24px;
+			"
+			:style="{transform:'scale('+scaleNum+')'}">
+			<KHeader :isFullScreen='isFullScreen' @screenfullChange='screenfullChange' topTitle='全厂总览驾驶舱'/>
+			<div
+				class="main-body"
+				style="flex: 1; display: flex; gap: 20px; padding: 0px 16px">
+				<div class="left-side" style="flex: 1">
+					<TopThree />
+				</div>
+				<div class="middle-side" style="flex: 1">
+					<BottomTwo />
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+import KHeader from '../components/Header';
+import TopThree from './TopThree';
+import BottomTwo from './BottomTwo';
+import screenfull from 'screenfull'
+import { debounce } from '@/utils/debounce'
+import { getDcsMsg, getMesMsg } from './../utils/wsInterface'
+
+export default {
+	name: 'deepProcessingBoard',
+	components: {
+		KHeader,
+		TopThree,
+		BottomTwo
+	},
+	// provide() {
+	// 	return {
+	// 		resizeChart: null,
+	// 	};
+	// },
+	data() {
+		return {
+			isFullScreen: false,
+			scaleNum: 0.8
+		};
+	},
+	created() {
+		this.init()
+	},
+	destroy() {
+		this.destroy()
+	},
+	mounted() {
+		this.boxReset = debounce(() => {
+      this.resetSize()
+    }, 300)
+    this.boxReset()
+    window.addEventListener('resize', () => {
+      this.boxReset()
+    })
+		// closeWebsocket()
+		// getDcsMsg()
+		// getMesMsg()
+		console.log('mounted...........')
+	},
+	destroyed() {
+		console.log('destroyed...........')
+	},
+	methods: {
+		change() {
+      this.isFullScreen = screenfull.isFullscreen
+    },
+    init() {
+      if (screenfull.isEnabled) {
+        screenfull.on('change', this.change)
+      }
+    },
+    destroy() {
+      if (screenfull.isEnabled) {
+        screenfull.off('change', this.change)
+      }
+    },
+		// 全屏
+		screenfullChange() {
+      if (!screenfull.isEnabled) {
+        this.$message({
+          message: 'you browser can not work',
+          type: 'warning'
+        })
+        return false
+      }
+      screenfull.toggle(this.$refs.wholePlantContainerB)
+    },
+		resetSize() {
+      let wholePlantContainerBox = document.querySelector('#wholePlantContainer')
+      let rw = parseFloat(window.innerWidth)
+      let rh = parseFloat(window.innerHeight)
+      let bw = parseFloat(wholePlantContainerBox.style.width)
+      let bh = parseFloat(wholePlantContainerBox.style.height)
+			let wx = 0
+			let hx = 0
+			if (screenfull.isFullscreen) {
+				console.log('全屏')
+				wx = rw / bw
+				hx = rh / bh
+				console.log(this.scaleNum)
+			}else{
+				console.log('非全屏')
+				console.log(this.$store.state.app.sidebar.opened)
+				if (this.$store.state.app.sidebar.opened) {
+					wx = (rw-264) / bw
+					hx = (rh-116) / bh
+				}else{
+					wx = (rw-78) / bw
+					hx = (rh-116) / bh
+				}
+			}
+			this.scaleNum = wx
+    }
+	}
+};
+</script>
+
+<style scoped lang="scss">
+.deepProcessingBoard {
+	background: url(../assets/bg.png) no-repeat;
+	background-size: cover;
+	background-position: 0 0;
+	overflow: auto;
+}
+</style>
--- a/src/views/databoard/kiln/EnergeCost.vue
+++ b/src/views/databoard/kiln/EnergeCost.vue
@ -31,8 +31,8 @@
 					justify-content: space-between;
 				">
 				<SelectorBtnGroup
-					:options="['电耗能', '天然气I', '天然气II']" />
-				<SelectorBtnGroup :options="['周', '月', '年']" />
+					:options="['电耗能', '天然气I', '天然气II']" @emitFun='toggleType'/>
+				<SelectorBtnGroup :options="['周', '月', '年']" @emitFun='toggleDate'/>
 			</div>
 			<div class="chart" style="height: 200px; margin-top: 8px;">
 				<GasChart />
@ -65,7 +65,16 @@ export default {
 		return {};
 	},
 	computed: {},
-	methods: {},
+	methods: {
+		// 切换能源
+		toggleType() {
+
+		},
+		// 切换时间
+		toggleDate() {
+			
+		}
+	},
 };
 </script>

--- a/src/views/databoard/kiln/LeftFour.vue
+++ b/src/views/databoard/kiln/LeftFour.vue
@ -25,7 +25,7 @@
 import MaterialCost from './MaterialCost.vue';
 import FanSequence from './FanSequence.vue';
 import IsraCheck from './IsraCheck.vue';
-import EnergeCost from './EnergeCost.vue';
+import EnergeCost from './EnergeCost';
 export default {
 	name: 'LeftFour',
 	components: { MaterialCost, EnergeCost, IsraCheck, FanSequence },
--- a/src/views/databoard/kiln/MaterialCost.vue
+++ b/src/views/databoard/kiln/MaterialCost.vue
@ -7,36 +7,66 @@

 <template>
 	<Container name="原料用量统计" size="middle" style="">
+		<div style="flex: 1; display: flex; gap: 8px;flex-direction: column;">
 			<div
 				class="absolute"
 				style="
-				padding: 12px;
+					flex:3;
+					padding: 12px 12px 0 12px;
 					display: grid;
 					grid-template-columns: repeat(3, 1fr);
-				grid-auto-rows: auto;
+					grid-auto-rows: repeat(4, 1fr);
 					gap: 8px;
 				">
-			<ShadowRect v-for="n in 9" :key="n" :rounded="false">
+				<ShadowRect v-for="(item, index) in materialMsg1" :key="index" :rounded="false">
 					<div
 						class="material"
 						style="
 							flex: 1;
-						padding: 12px 6px 20px;
+							padding-bottom: 3px;
 							display: flex;
 							flex-direction: column;
 							gap: 4px;
 							align-items: center;
 							justify-content: center;
 						">
-					<span style="color: #0ee8e4; font-weight: 500; font-size: 32px">
-						234
+						<span style="color: #0ee8e4; font-weight: 500; font-size: 32px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">
+							{{item.materialUsed}}
 						</span>
 						<span style="color: #fff; font-size: 16px; letter-spacing: 1px">
-						- 原料1/吨 -
+							- {{item.materialName}} -
 						</span>
 					</div>
 				</ShadowRect>
 			</div>
+			<div style="flex:1;
+					padding: 0 12px 12px 12px;
+					display: grid;
+					grid-template-columns: repeat(4, 1fr);
+					gap: 8px;">
+				<ShadowRect v-for="(item, index) in materialMsg2" :key="index" :rounded="false">
+					<div
+						class="material"
+						style="
+							flex: 1;
+							padding-bottom: 3px;
+							display: flex;
+							flex-direction: column;
+							gap: 4px;
+							align-items: center;
+							justify-content: center;
+						">
+						<span style="color: #0ee8e4; font-weight: 500; font-size: 32px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">
+							{{item.materialUsed}}
+						</span>
+						<span style="color: #fff; font-size: 16px; letter-spacing: 1px">
+							- {{item.materialName}} -
+						</span>
+					</div>
+				</ShadowRect>
+			</div>
+		</div>
+		
 	</Container>
 </template>

@ -50,7 +80,14 @@ export default {
 	data() {
 		return {};
 	},
-	computed: {},
+	computed: {
+		materialMsg1() {
+			return this.$store.state.websocket.material.slice(0,9)
+		},
+		materialMsg2() {
+			return this.$store.state.websocket.material.slice(9)
+		}
+	},
 	methods: {},
 };
 </script>
--- a/src/views/databoard/kiln/index.vue
+++ b/src/views/databoard/kiln/index.vue
@ -6,9 +6,9 @@
 -->

 <template>
-	<div id='kilnContainer' style="width: 100%;height: 100%;">
+	<div id='kilnContainerB' ref='kilnContainerB' style="width: 100%;height: 100%;">
 		<div
-			id='kilnContainerB'
+			id='kilnContainer'
 			ref='kilnContainer'
 			class="KilnDataBoard"
 			style="
@ -24,7 +24,7 @@
 				gap: 24px;
 			"
 			:style="{transform:'scale('+scaleNum+')'}">
-			<KHeader :isFullScreen='isFullScreen' @screenfullChange='screenfullChange'/>
+			<KHeader :isFullScreen='isFullScreen' @screenfullChange='screenfullChange' topTitle='窑炉生产运行驾驶舱'/>
 			<div
 				class="main-body"
 				style="flex: 1; display: flex; gap: 20px; padding: 0px 16px">
@ -45,7 +45,7 @@ import LeftFour from './LeftFour';
 import RightTwo from './RightTwo.vue';
 import screenfull from 'screenfull'
 import { debounce } from '@/utils/debounce'
-import { getDcsMsg } from './../utils/dcs'
+import { getDcsMsg, getMesMsg } from './../utils/wsInterface'

 export default {
 	name: 'KilnDataBoard',
@ -82,6 +82,7 @@ export default {
 		// this.getMes()
 		// closeWebsocket()
 		getDcsMsg()
+		// getMesMsg()
 		console.log('mounted...........')
 	},
 	destroyed() {
@ -112,13 +113,10 @@ export default {
        })
        return false
      }
-      screenfull.toggle(this.$refs.kilnContainer)
-			console.log('11111')
-			// this.resetSize()
-			console.log('2222')
+      screenfull.toggle(this.$refs.kilnContainerB)
    },
 		resetSize() {
-      let kilnContainerBox = document.querySelector('#kilnContainerB')
+      let kilnContainerBox = document.querySelector('#kilnContainer')
      let rw = parseFloat(window.innerWidth)
      let rh = parseFloat(window.innerHeight)
      let bw = parseFloat(kilnContainerBox.style.width)
@ -142,25 +140,6 @@ export default {
 				}
 			}
 			this.scaleNum = wx
-    },
-		// 获取ws
-		getMes() {
-			const userId = 'dcsmsg' + new Date().getTime()
-			connectWebsocket(
-				// 测试地址
-				'ws://10.70.180.10:8081/xc-screen/websocket/'+userId,
-				// 传递给后台的数据
-				'',
-				// 成功拿到后台返回的数据的回调函数
-				(data) => {
-					console.log('成功的回调函数, 接收到的data数据: ', data)
-
-				},
-				// websocket连接失败的回调函数
-				(err) => {
-					console.log('失败的回调函数', err)
-				}
-			)
    }
 	}
 };
--- a/src/views/databoard/utils/dcs.js
+++ b/src/views/databoard/utils/dcs.js
@ -1,34 +0,0 @@
-import { connectWebsocket, closeWebsocket } from './../utils/websocket'
-import store from "@/store";
-
-// 创建dcs链接
-export const getDcsMsg = () => {
-  const userId = 'dcsmsg' + new Date().getTime()
-  connectWebsocket(
-    // 测试地址
-    'ws://10.70.180.10:8081/xc-screen/websocket/'+userId,
-    // 传递给后台的数据
-    '',
-    // 成功拿到后台返回的数据的回调函数
-    (data) => {
-      console.log('成功的回调函数, 接收到的data数据: ', data)
-      let msgData = JSON.parse(data)
-      switch (msgData?.type) {
-        case "FanFrequencyInfo": {
-          store.dispatch({type: "websocket/setFanFrequencyInfo", payload:msgData.data.FanFrequencyInfo})
-          break;
-        }
-        case "KilnInfo": {
-          store.dispatch({type: "websocket/setKilnInfo", payload: msgData.data.kilnInfo})
-          break;
-        }
-        default:
-          console.log('++++++++')
-      }
-    },
-    // websocket连接失败的回调函数
-    (err) => {
-      console.log('失败的回调函数', err)
-    }
-  )
-}
--- a/src/views/databoard/utils/mes.js
+++ b/src/views/databoard/utils/mes.js
@ -1,34 +0,0 @@
-import { connectWebsocket, closeWebsocket } from './../utils/websocket'
-import store from "@/store";
-
-// 创建dcs链接
-export const getDcsMsg = () => {
-  const userId = 'dcsmsg' + new Date().getTime()
-  connectWebsocket(
-    // 测试地址
-    'ws://10.70.180.10:8081/xc-screen/websocket/'+userId,
-    // 传递给后台的数据
-    '',
-    // 成功拿到后台返回的数据的回调函数
-    (data) => {
-      console.log('成功的回调函数, 接收到的data数据: ', data)
-      let msgData = JSON.parse(data)
-      switch (msgData?.type) {
-        case "FanFrequencyInfo": {
-          store.dispatch({type: "websocket/setFanFrequencyInfo", payload:msgData.data.FanFrequencyInfo})
-          break;
-        }
-        case "KilnInfo": {
-          store.dispatch({type: "websocket/setKilnInfo", payload: msgData.data.kilnInfo})
-          break;
-        }
-        default:
-          console.log('++++++++')
-      }
-    },
-    // websocket连接失败的回调函数
-    (err) => {
-      console.log('失败的回调函数', err)
-    }
-  )
-}
--- a/src/views/databoard/utils/wsInterface.js
+++ b/src/views/databoard/utils/wsInterface.js
@ -0,0 +1,100 @@
+import { connectWebsocket, closeWebsocket } from './../utils/websocket'
+import store from "@/store";
+
+// 创建dcs链接
+export const getDcsMsg = () => {
+  const userId = 'dcsmsg' + new Date().getTime()
+  connectWebsocket(
+    // 测试地址
+    'ws://10.70.180.10:8081/xc-screen/websocket/'+userId,
+    // 传递给后台的数据
+    '',
+    // 成功拿到后台返回的数据的回调函数
+    (data) => {
+      console.log('dcs成功的回调函数, 接收到的data数据: ', data)
+      let msgData = JSON.parse(data)
+      if (msgData == null) return;
+      switch (msgData?.type) {
+        case "FanFrequencyInfo": {
+          store.dispatch({type: "websocket/setFanFrequencyInfo", payload:msgData.data.FanFrequencyInfo})
+          break;
+        }
+        case "KilnInfo": {
+          store.dispatch({type: "websocket/setKilnInfo", payload: msgData.data.kilnInfo})
+          break;
+        }
+        case "GasInfo": {
+          store.dispatch({type: "websocket/setGasInfo", payload: msgData.data})
+          break;
+        }
+        default:
+      }
+    },
+    // websocket连接失败的回调函数
+    (err) => {
+      console.log('失败的回调函数', err)
+    }
+  )
+}
+
+// 创建mes链接
+export const getMesMsg = () => {
+  const sj = new Date().getTime()
+  // ISRA
+  connectWebsocket(
+    // 测试地址
+    'ws://10.70.2.2:8080/websocket/message?userId=KI'+sj,
+    // 传递给后台的数据
+    '',
+    // 成功拿到后台返回的数据的回调函数
+    (data) => {
+      console.log('mes ISRA成功的回调函数, 接收到的data数据: ', data)
+      let msgData = JSON.parse(data)
+      if (msgData == null) return;
+      switch (msgData?.type) {
+        case "israKiln": {
+          store.dispatch({type: "websocket/setIsraKiln", payload:msgData.detData.dayStatistic})
+          break;
+        }
+        // case "KilnInfo": {
+        //   // store.dispatch({type: "websocket/setKilnInfo", payload: msgData.data.kilnInfo})
+        //   break;
+        // }
+        default:
+      }
+    },
+    // websocket连接失败的回调函数
+    (err) => {
+      console.log('失败的回调函数', err)
+    }
+  )
+
+  // 原料 MA
+  connectWebsocket(
+    // 测试地址
+    'ws://10.70.2.2:8080/websocket/message?userId=MA'+sj,
+    // 传递给后台的数据
+    '',
+    // 成功拿到后台返回的数据的回调函数
+    (data) => {
+      console.log('mes 原料成功的回调函数, 接收到的data数据: ', data)
+      let msgData = JSON.parse(data)
+      if (msgData == null) return;
+      switch (msgData?.type) {
+        case "material": {
+          store.dispatch({type: "websocket/setMaterial", payload:msgData.data})
+          break;
+        }
+        // case "KilnInfo": {
+        //   // store.dispatch({type: "websocket/setKilnInfo", payload: msgData.data.kilnInfo})
+        //   break;
+        // }
+        default:
+      }
+    },
+    // websocket连接失败的回调函数
+    (err) => {
+      console.log('失败的回调函数', err)
+    }
+  )
+}
--- a/src/views/databoard/wholePlant/LeftTwo.vue
+++ b/src/views/databoard/wholePlant/LeftTwo.vue
@ -0,0 +1,29 @@
+<template>
+	<div
+		class="left-two"
+		style="
+			display: grid;
+			gap: 16px;
+			grid-template-rows: 462px 462px;
+		">
+		<OrderStatus />
+		<YieldRate />
+	</div>
+</template>
+
+<script>
+import OrderStatus from './OrderStatus.vue';
+import YieldRate from './YieldRate.vue';
+export default {
+	name: 'LeftFour',
+	components: { OrderStatus, YieldRate },
+	props: {},
+	data() {
+		return {};
+	},
+	computed: {},
+	methods: {},
+};
+</script>
+
+<style scoped lang="scss"></style>
--- a/src/views/databoard/wholePlant/MiddleTwo.vue
+++ b/src/views/databoard/wholePlant/MiddleTwo.vue
@ -0,0 +1,29 @@
+<template>
+	<div
+		class="middle-two"
+		style="
+			display: grid;
+			gap: 16px;
+			grid-template-rows: 462px 462px;
+		">
+		<OrderStatus />
+		<YieldRate />
+	</div>
+</template>
+
+<script>
+import OrderStatus from './OrderStatus.vue';
+import YieldRate from './YieldRate.vue';
+export default {
+	name: 'MiddleFour',
+	components: { OrderStatus, YieldRate },
+	props: {},
+	data() {
+		return {};
+	},
+	computed: {},
+	methods: {},
+};
+</script>
+
+<style scoped lang="scss"></style>
--- a/src/views/databoard/wholePlant/OrderStatus.vue
+++ b/src/views/databoard/wholePlant/OrderStatus.vue
@ -0,0 +1,14 @@
+<template>
+  <div style="flex: 1;">
+    <Container name="订单完成情况" size="small" style="">
+      digndna
+    </Container>
+  </div>
+</template>
+<script>
+import Container from '../components/Container.vue';
+export default {
+  name: 'OrderStatus',
+  components: { Container },
+}
+</script>
--- a/src/views/databoard/wholePlant/RightTwo.vue
+++ b/src/views/databoard/wholePlant/RightTwo.vue
@ -0,0 +1,29 @@
+<template>
+	<div
+		class="right-two"
+		style="
+			display: grid;
+			gap: 16px;
+			grid-template-rows: 462px 462px;
+		">
+		<OrderStatus />
+		<YieldRate />
+	</div>
+</template>
+
+<script>
+import OrderStatus from './OrderStatus.vue';
+import YieldRate from './YieldRate.vue';
+export default {
+	name: 'RightFour',
+	components: { OrderStatus, YieldRate },
+	props: {},
+	data() {
+		return {};
+	},
+	computed: {},
+	methods: {},
+};
+</script>
+
+<style scoped lang="scss"></style>
--- a/src/views/databoard/wholePlant/YieldRate.vue
+++ b/src/views/databoard/wholePlant/YieldRate.vue
@ -0,0 +1,14 @@
+<template>
+  <div style="flex: 1;">
+    <Container name="本日生产良品率" size="small" style="">
+      0000987
+    </Container>
+  </div>
+</template>
+<script>
+import Container from '../components/Container.vue';
+export default {
+  name: 'YieldRate',
+  components: { Container },
+}
+</script>
--- a/src/views/databoard/wholePlant/index.vue
+++ b/src/views/databoard/wholePlant/index.vue
@ -0,0 +1,150 @@
+<template>
+	<div id='wholePlantContainerB' ref='wholePlantContainerB' style="width: 100%;height: 100%;">
+		<div
+			id='wholePlantContainer'
+			ref='wholePlantContainer'
+			class="wholePlantBoard"
+			style="
+				position: absolute;
+				transform-origin: 16px 8px;
+				font-size: 16px;
+				top: -8px;
+				left: -16px;
+				width: 1920px;
+				height: 1080px;
+				display: flex;
+				flex-direction: column;
+				gap: 24px;
+			"
+			:style="{transform:'scale('+scaleNum+')'}">
+			<KHeader :isFullScreen='isFullScreen' @screenfullChange='screenfullChange' topTitle='全厂总览驾驶舱'/>
+			<div
+				class="main-body"
+				style="flex: 1; display: flex; gap: 20px; padding: 0px 16px">
+				<div class="left-side" style="flex: 1">
+					<LeftTwo />
+				</div>
+				<div class="middle-side" style="flex: 1">
+					<MiddleTwo />
+				</div>
+				<div class="right-side" style="flex: 1">
+					<RightTwo />
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+import KHeader from '../components/Header';
+import LeftTwo from './LeftTwo';
+import MiddleTwo from './MiddleTwo';
+import RightTwo from './RightTwo';
+import screenfull from 'screenfull'
+import { debounce } from '@/utils/debounce'
+import { getDcsMsg, getMesMsg } from './../utils/wsInterface'
+
+export default {
+	name: 'wholePlantBoard',
+	components: {
+		KHeader,
+		LeftTwo,
+		MiddleTwo,
+		RightTwo
+	},
+	// provide() {
+	// 	return {
+	// 		resizeChart: null,
+	// 	};
+	// },
+	data() {
+		return {
+			isFullScreen: false,
+			scaleNum: 0.8
+		};
+	},
+	created() {
+		this.init()
+	},
+	destroy() {
+		this.destroy()
+	},
+	mounted() {
+		this.boxReset = debounce(() => {
+      this.resetSize()
+    }, 300)
+    this.boxReset()
+    window.addEventListener('resize', () => {
+      this.boxReset()
+    })
+		// closeWebsocket()
+		// getDcsMsg()
+		// getMesMsg()
+		console.log('mounted...........')
+	},
+	destroyed() {
+		console.log('destroyed...........')
+	},
+	methods: {
+		change() {
+      this.isFullScreen = screenfull.isFullscreen
+    },
+    init() {
+      if (screenfull.isEnabled) {
+        screenfull.on('change', this.change)
+      }
+    },
+    destroy() {
+      if (screenfull.isEnabled) {
+        screenfull.off('change', this.change)
+      }
+    },
+		// 全屏
+		screenfullChange() {
+      if (!screenfull.isEnabled) {
+        this.$message({
+          message: 'you browser can not work',
+          type: 'warning'
+        })
+        return false
+      }
+      screenfull.toggle(this.$refs.wholePlantContainerB)
+    },
+		resetSize() {
+      let wholePlantContainerBox = document.querySelector('#wholePlantContainer')
+      let rw = parseFloat(window.innerWidth)
+      let rh = parseFloat(window.innerHeight)
+      let bw = parseFloat(wholePlantContainerBox.style.width)
+      let bh = parseFloat(wholePlantContainerBox.style.height)
+			let wx = 0
+			let hx = 0
+			if (screenfull.isFullscreen) {
+				console.log('全屏')
+				wx = rw / bw
+				hx = rh / bh
+				console.log(this.scaleNum)
+			}else{
+				console.log('非全屏')
+				console.log(this.$store.state.app.sidebar.opened)
+				if (this.$store.state.app.sidebar.opened) {
+					wx = (rw-264) / bw
+					hx = (rh-116) / bh
+				}else{
+					wx = (rw-78) / bw
+					hx = (rh-116) / bh
+				}
+			}
+			this.scaleNum = wx
+    }
+	}
+};
+</script>
+
+<style scoped lang="scss">
+.wholePlantBoard {
+	background: url(../assets/bg.png) no-repeat;
+	background-size: cover;
+	background-position: 0 0;
+	overflow: auto;
+}
+</style>
Author	SHA1	Message	Date
‘937886381’	1c5e77258e	Merge branch 'projects/mesxc-test' into projects/mesxc-zhp	2023-12-29 16:29:50 +08:00
‘937886381’	ebd7cb02ff	修改bug	2023-12-29 16:29:15 +08:00
juzi	0789decfd9	Merge pull request 'projects/mesxc-zjl' (#163 ) from projects/mesxc-zjl into projects/mesxc-test Reviewed-on: #163	2023-12-29 10:05:42 +08:00
juzi	75aa253a29	merge test	2023-12-29 09:35:36 +08:00
高天泽	14967cbf67	Merge pull request 'projects/mesxc-zhp' (#162 ) from projects/mesxc-zhp into projects/mesxc-test Reviewed-on: #162	2023-12-29 09:32:21 +08:00
juzi	35bcb23920	12.29	2023-12-29 09:26:07 +08:00