Merge pull request 'projects/mesxc-zjl' (#168) from projects/mesxc-zjl into projects/mesxc-test

Reviewed-on: #168

package.json

@@ -43,6 +43,7 @@
   "dependencies": {
     "@antv/x6": "^2.15.3",
     "@babel/parser": "7.18.4",
+    "@jiaminghi/data-view": "^2.10.0",
     "@riophae/vue-treeselect": "0.4.0",
     "axios": "0.27.2",
     "benz-amr-recorder": "^1.1.5",

src/layout/components/TagsView/index.vue

@@ -88,7 +88,7 @@ export default {
 		visitedViews(newVal, oldVal){
 			let num = 0
 			newVal && newVal.map(item => {
-				if (item.path === '/databoard/kiln' || item.path === '/databoard/whole-plant') {
+				if (item.path === '/databoard/kiln' || item.path === '/databoard/whole-plant' || item.path === '/databoard/deep-processing') {
 					num++
 				}
 			})

src/main.js

@@ -9,6 +9,7 @@ import store from './store';
 import router from './router';
 import directive from './directive'; // directive
 import plugins from './plugins'; // plugins
+// import { borderBox1 } from '@jiaminghi/data-view'
 
 import './assets/icons'; // icon
 import './permission'; // permission control
@@ -78,6 +79,7 @@ Vue.use(CodeBrickZj)
 Vue.use(directive);
 Vue.use(plugins);
 Vue.use(VueMeta);
+// Vue.use(dataV)
 // Vue.use(hljs.vuePlugin);
 
 // bpmnProcessDesigner 需要引入

src/store/modules/websocket.js

@@ -4,7 +4,7 @@ const state = {
   gasInfo:{},// 天然气流量图
   sumGasInfo: {},// 天然气总量
 
-  israKiln:[],// ISRA缺陷检测
+  israKiln:[],// ISRA窑炉缺陷检测
   material:[],// 原料
   energyInfo: {
     elecQty1: '',
@@ -14,11 +14,17 @@ const state = {
   energyWeekTrend:[],
   energyMonthTrend:[],
   energyYearTrend:[],// 能耗图
+  energyMonitoring: [], // 能源监控
   exhaustGasInfo:{}, // 烟气
   gasChartDayTrend:{}, // 烟气
   gasChartWeekTrend:{}, // 烟气
   gasChartMonthTrend:{}, // 烟气
-  gasChartYearTrend:{} // 烟气
+  gasChartYearTrend:{}, // 烟气
+  israDayStatistic: [],//缺陷统计
+  israWeekStatistic: [],//缺陷统计
+  israMonthStatistic: [],//缺陷统计
+  israYearStatistic: [],//缺陷统计
+  productline: [] // 产线产量及良品率
 };
 const mutations = {
   SET_FANFREQUENCYINFO: (state, fanFrequencyInfo) => {
@@ -60,6 +66,9 @@ const mutations = {
       state.energyYearTrend = energyTrend.year
     }
   },
+  SET_ENERGY_MONITORING: (state, energyMonitoring) => {
+    state.energyMonitoring = energyMonitoring
+  },
   SET_EXHAUSTGASINFO: (state, exhaustGasInfo) => {
     state.exhaustGasInfo = exhaustGasInfo
   },
@@ -68,6 +77,15 @@ const mutations = {
     state.gasChartWeekTrend = exhaustGasChart.gasChartWeekTrend
     state.gasChartMonthTrend = exhaustGasChart.gasChartMonthTrend
     state.gasChartYearTrend = exhaustGasChart.gasChartYearTrend
+  },
+  SET_DEFECTCHART: (state, israStatistic) => {
+    state.israDayStatistic = israStatistic.dayStatistic
+    state.israWeekStatistic = israStatistic.weekStatistic
+    state.israMonthStatistic = israStatistic.monthStatistic
+    state.israYearStatistic = israStatistic.yearStatistic
+  },
+  SET_PRODUCTLINE: (state, productline) => {
+    state.productline = productline
   }
 };
 const actions = {
@@ -97,12 +115,21 @@ const actions = {
   setEnergyTrend({ commit }, energyTrend) {
     commit('SET_ENERGYTREND', energyTrend.payload)
   },
+  setEnergyMonitoring({ commit }, energyMonitoring) {
+    commit('SET_ENERGY_MONITORING', energyMonitoring.payload)
+  },
   setExhaustGasInfo({ commit }, exhaustGasInfo) {
     commit('SET_EXHAUSTGASINFO', exhaustGasInfo.payload)
   },
   setExhaustGasChart({ commit }, exhaustGasChart) {
     commit('SET_EXHAUSTGASCHART', exhaustGasChart.payload)
   },
+  setDefectChart({ commit }, israStatistic) {
+    commit('SET_DEFECTCHART', israStatistic.payload)
+  },
+  setProductline({ commit }, productline) {
+    commit('SET_PRODUCTLINE', productline.payload)
+  },
 };
 export default {
   namespaced: true,

src/views/databoard/components/Container.vue

@@ -55,6 +55,24 @@ export default {
 					return require('../assets/msg.png');
 				case '烟气处理':
 					return require('../assets/gas.png');
+				case '产线缺陷统计':
+					return require('../assets/defectStatistics.png');
+				case '产线当日缺陷分类':
+					return require('../assets/check.png');
+				case '本日生产良品率':
+					return require('../assets/goodRate.png');
+				case '订单完成情况':
+					return require('../assets/order.png');
+				case '设备报警':
+					return require('../assets/goodRate.png');
+				case '各工序缺陷汇总':
+					return require('../assets/check.png');
+				case '能源监控':
+					return require('../assets/defectStatistics.png');
+				case '产线产量及良品率':
+					return require('../assets/order.png');
+				case '工单监控':
+					return require('../assets/eqMonitor.png');
 			}
 		},
 	},

src/views/databoard/components/DefectChart.vue

@@ -0,0 +1,216 @@
+<template>
+  <div class="defect-chart"></div>
+</template>
+<script>
+import * as echarts from 'echarts';
+import resize from './../mixins/resize'
+export default {
+  name: 'DefectChart',
+  mixins: [resize],
+  props: {
+		chartTime: ''
+	},
+  data() {
+    return {
+      chart: null,
+      tempData: []
+    }
+  },
+  computed: {
+    israDayStatistic() {
+      return this.$store.state.websocket.israDayStatistic
+    },
+    israWeekStatistic() {
+      return this.$store.state.websocket.israWeekStatistic
+    },
+    israMonthStatistic() {
+      return this.$store.state.websocket.israMonthStatistic
+    },
+    israYearStatistic() {
+      return this.$store.state.websocket.israYearStatistic
+    }
+  },
+  watch: {
+    israDayStatistic: {
+			handler(newVal, oldVal) {
+				if (this.chartTime === '日') {
+          this.tempData = israDayStatistic
+					this.updateChart()
+				}
+			}
+		},
+    israWeekStatistic: {
+			handler(newVal, oldVal) {
+				if (this.chartTime === '周') {
+          this.tempData = israWeekStatistic
+					this.updateChart()
+				}
+			}
+		},
+    israMonthStatistic: {
+			handler(newVal, oldVal) {
+				if (this.chartTime === '月') {
+          this.tempData = israMonthStatistic
+					this.updateChart()
+				}
+			}
+		},
+    israYearStatistic: {
+			handler(newVal, oldVal) {
+				if (this.chartTime === '年') {
+          this.tempData = israYearStatistic
+					this.updateChart()
+				}
+			}
+		}
+  },
+  mounted() {
+		this.$el.addEventListener('resize', () => {
+			console.log('resziing.....');
+		});
+		this.updateChart()
+	},
+  methods: {
+    updateChart() {
+      if (
+        this.chart !== null &&
+        this.chart !== '' &&
+        this.chart !== undefined
+      ) {
+        this.chart.dispose()
+      }
+      this.chart = echarts.init(this.$el);
+      let legendData = []
+      let xData = []
+      let yData = []
+      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 },
+        legend: {
+          top: 10,
+          left: 80,
+          padding: 5,
+          itemWidth: 12,
+          itemHeight: 12,
+          itemGap: 12,
+          height: 12,
+          textStyle: {
+            color: "#DFF1FE",
+            fontSize: 12,
+          },
+          data:['a','b','c','d','e'],
+        },
+        xAxis: {
+          type: "category",
+          data: xData,
+          axisLabel: {
+            color: "#fffc",
+            fontSize: 12,
+          },
+          axisTick: { show: false },
+          axisLine: {
+            lineStyle: {
+              width: 1,
+              color: "#213259",
+            },
+          },
+        },
+        yAxis: {
+          name: "单位/个",
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 10,
+            align: "right",
+          },
+          type: "value",
+          axisLabel: {
+            color: "#fff",
+            fontSize: 12,
+            formatter: "{value}",
+          },
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: "#213259",
+            },
+          },
+          splitLine: {
+            lineStyle: {
+              color: "#213259a0",
+            },
+          },
+        },
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          className: "defect-chart-tooltip"
+        },
+        series: series
+      };
+      option && this.chart.setOption(option)
+    }
+  }
+}
+</script>
+<style scoped lang="scss">
+.defect-chart {
+	width: 100%;
+	height: 100%;
+}
+</style>
+<style>
+  .defect-chart-tooltip {
+    background: #0a2b4f77 !important;
+    border: none !important;
+    backdrop-filter: blur(12px);
+  }
+  .defect-chart-tooltip * {
+    color: #fff !important;
+  }
+</style>

src/views/databoard/components/DefectClassChart.vue

@@ -0,0 +1,170 @@
+<template>
+  <div class="defect-class-chart"></div>
+</template>
+<script>
+import * as echarts from 'echarts';
+import resize from './../mixins/resize'
+export default {
+  name: 'DefectClassChart',
+  mixins: [resize],
+  props: {
+		chartType: ''
+	},
+  data() {
+    return {
+      chart: null
+    }
+  },
+  computed: {
+    israDayStatistic() {
+      return this.$store.state.websocket.israDayStatistic
+    }
+  },
+  watch:{
+    israDayStatistic: {
+			handler(newVal, oldVal) {
+        if (newVal === oldVal) {
+          return false
+        }
+        this.updateChart()
+			}
+		},
+    chartType: {// 监听类型变化，更新图
+			handler(newVal, oldVal) {
+				this.updateChart()
+			}
+		}
+  },
+  mounted() {
+		this.$el.addEventListener('resize', () => {
+			console.log('resziing.....');
+		});
+		this.updateChart()
+	},
+  methods: {
+    updateChart() {
+      if (
+        this.chart !== null &&
+        this.chart !== '' &&
+        this.chart !== undefined
+      ) {
+        this.chart.dispose()
+      }
+      this.chart = echarts.init(this.$el);
+      let tempData = []
+      let xData = []
+      let yData = []
+      this.israDayStatistic && this.israDayStatistic.length > 0 && this.israDayStatistic.map(item => {
+        if (this.chartType === item.name) {
+          tempData = item.data
+          return
+        }
+      })
+      tempData.length > 0 && tempData.map(item => {
+        xData.push(item.checkType)
+        yData.push(item.checkNum)
+      })
+      var option = {
+        color: ['#2760FF','#5B9BFF','#FFD160','#8167F6', '#99D66C', '#FF8A40'],
+        grid: { top: 40, right: 12, bottom: 80, left: 60 },
+        // legend: {
+        //   top: 10,
+        //   left: 80,
+        //   padding: 5,
+        //   itemWidth: 12,
+        //   itemHeight: 12,
+        //   itemGap: 12,
+        //   height: 12,
+        //   textStyle: {
+        //     color: "#DFF1FE",
+        //     fontSize: 12,
+        //   },
+        //   data:['a','b','c','d','e'],
+        // },
+        xAxis: {
+          type: "category",
+          data: xData,
+          axisLabel: {
+            color: "#fffc",
+            fontSize: 12,
+            rotate: 45
+          },
+          axisTick: { show: false },
+          axisLine: {
+            lineStyle: {
+              width: 1,
+              color: "#213259",
+            },
+          },
+        },
+        yAxis: {
+          name: "单位/次",
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 10,
+            align: "right",
+          },
+          type: "value",
+          axisLabel: {
+            color: "#fff",
+            fontSize: 12,
+            formatter: "{value}",
+          },
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: "#213259",
+            },
+          },
+          splitLine: {
+            lineStyle: {
+              color: "#213259a0",
+            },
+          },
+        },
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          className: "defect-chart-tooltip"
+        },
+        series: [
+          {
+          data: yData,
+          type: 'bar',
+          barWidth: 12,
+          label: {
+            show: true,
+            position: 'top'
+          },
+          itemStyle: {
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              { offset: 0, color: '#5CB7FF' },
+              { offset: 1, color: '#364BFE' }
+            ])
+          },
+        }
+      ]
+      };
+      option && this.chart.setOption(option)
+    }
+  }
+}
+</script>
+<style scoped lang="scss">
+.defect-class-chart {
+	width: 100%;
+	height: 100%;
+}
+</style>
+<style>
+  .defect-chart-tooltip {
+    background: #0a2b4f77 !important;
+    border: none !important;
+    backdrop-filter: blur(12px);
+  }
+  .defect-chart-tooltip * {
+    color: #fff !important;
+  }
+</style>

src/views/databoard/components/EnergeMonitoringChart.vue

@@ -0,0 +1,157 @@
+<template>
+  <div class="energe-monitoring-chart"></div>
+</template>
+<script>
+import * as echarts from 'echarts';
+import resize from './../mixins/resize'
+export default {
+  name: 'EnergeMonitoringChart',
+  mixins: [resize],
+  data() {
+    return {
+      chart: null
+    }
+  },
+  computed: {
+    energyMonitoring() {
+      return this.$store.state.websocket.energyMonitoring
+    }
+  },
+  watch:{
+    energyMonitoring: {
+			handler(newVal, oldVal) {
+        if (newVal === oldVal) {
+          return false
+        }
+        this.updateChart()
+			}
+		}
+  },
+  mounted() {
+		this.$el.addEventListener('resize', () => {
+			console.log('resziing.....');
+		});
+		this.updateChart()
+	},
+  methods: {
+    updateChart() {
+      if (
+        this.chart !== null &&
+        this.chart !== '' &&
+        this.chart !== undefined
+      ) {
+        this.chart.dispose()
+      }
+      this.chart = echarts.init(this.$el);
+      let xData = []
+      let yData = []
+      this.energyMonitoring && this.energyMonitoring.length > 0 && this.energyMonitoring.map(item => {
+        xData.push(item.lineName)
+        yData.push(item.useQuantity)
+      })
+      var option = option = {
+        // color: ['#FF8A40','#FFD160','#99D66C','#5B9BFF','#8167F6','#2760FF'],
+        grid: { top: 32, right: 12, bottom: 20, left: 60 },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross',
+            crossStyle: {
+              color: '#999'
+            }
+          },
+          className: "energe-monitoring-chart-tooltip"
+        },
+        legend: {
+          data: ['电耗能'],
+          textStyle: {
+            color: "#DFF1FE",
+            fontSize: 12,
+          }
+        },
+        xAxis: [
+          {
+            type: 'category',
+            data: xData,
+            axisPointer: {
+              type: 'shadow'
+            },
+            axisLabel: {
+              color: "#fff",
+              fontSize: 12,
+            },
+            axisTick: { show: false },
+            axisLine: {
+              lineStyle: {
+                width: 1,
+                color: "#213259",
+              },
+            }
+          }
+        ],
+        yAxis: [
+          {
+            type: 'value',
+            name: '单位',
+            // min: 0,
+            // max: 250,
+            // interval: 50,
+            axisLabel: {
+              color: "#fff",
+              fontSize: 12,
+              formatter: '{value}'
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#213259",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "#213259a0",
+              },
+            }
+          }
+        ],
+        series: [
+          {
+            name: '电耗能',
+            type: 'bar',
+            // barWidth: 12,
+            tooltip: {
+              valueFormatter: function (value) {
+                return value + ' ml';
+              }
+            },
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 0, color: '#5CB7FF' },
+                { offset: 1, color: '#364BFE' }
+              ])
+            },
+            data: yData
+          }
+        ]
+      }
+      option && this.chart.setOption(option)
+    }
+  }
+}
+</script>
+<style scoped lang="scss">
+.energe-monitoring-chart {
+	width: 100%;
+	height: 100%;
+}
+</style>
+<style>
+  .energe-monitoring-chart-tooltip {
+    background: #0a2b4f77 !important;
+    border: none !important;
+    backdrop-filter: blur(12px);
+  }
+  .energe-monitoring-chart-tooltip * {
+    color: #fff !important;
+  }
+</style>

src/views/databoard/components/GasChart.vue

@@ -51,27 +51,34 @@ export default {
 		}
 	},
 	watch: {
-		energyWeekTrend: {// 监听时间变化，更新图
+		energyWeekTrend: {// 监听周电能，更新图
 			handler(newVal, oldVal) {
 				if (this.chartTime === '周' && this.chartType === '电耗能') {
 					this.updateChart()
 				}
 			}
 		},
-		energyMonthTrend: {// 监听时间变化，更新图
+		energyMonthTrend: {// 监听月电能，更新图
 			handler(newVal, oldVal) {
 				if (this.chartTime === '月' && this.chartType === '电耗能') {
 					this.updateChart()
 				}
 			}
 		},
-		energyYearTrend: {// 监听时间变化，更新图
+		energyYearTrend: {// 监听年电能，更新图
 			handler(newVal, oldVal) {
 				if (this.chartTime === '年' && this.chartType === '电耗能') {
 					this.updateChart()
 				}
 			}
 		},
+		gasChartMsg: {// 监听天然气，更新图
+			handler(newVal, oldVal) {
+				if (this.chartType === '天然气I' || this.chartType === '天然气II') {
+					this.updateChart()
+				}
+			}
+		},
 		chartTime: {// 监听时间变化，更新图
 			handler(newVal, oldVal) {
 				this.updateChart()
@@ -114,33 +121,27 @@ export default {
 					break;
 				}
 				case '天然气I':{
-					yData = this.gasChartMsg.hisSumGas1 || []
+					if (this.chartTime === '周') {
+						yData = this.gasChartMsg.hisSumGas1For7Day || []
+					}else if(this.chartTime === '月') {
+						yData = this.gasChartMsg.sumGas1ForMonth || []
+					}else{
+						yData = this.gasChartMsg.sumGas1ForYear || []
+					}
 					gasName = '天然气I'
-					xData = Array(7)
+					xData = this.getXdata()
-						.fill(1)
-						.map((_, index) => {
-							const today = new Date();
-							const dtimestamp = today - (index+1) * 24 * 60 * 60 * 1000;
-							return `${new Date(dtimestamp).getMonth() + 1}.${new Date(
-								dtimestamp
-							).getDate()}`;
-						})
-						.reverse()
 					break;
 				}
 				default:
 				gasName = '天然气II'
-				yData = this.gasChartMsg.hisSumGas2 || []
+				if (this.chartTime === '周') {
-				xData = Array(7)
+						yData = this.gasChartMsg.hisSumGas2For7Day || []
-						.fill(1)
+					}else if(this.chartTime === '月') {
-						.map((_, index) => {
+						yData = this.gasChartMsg.sumGas2ForMonth || []
-							const today = new Date();
+					}else{
-							const dtimestamp = today - (index+1) * 24 * 60 * 60 * 1000;
+						yData = this.gasChartMsg.sumGas2ForYear || []
-							return `${new Date(dtimestamp).getMonth() + 1}.${new Date(
+					}
-								dtimestamp
+				xData = this.getXdata()
-							).getDate()}`;
-						})
-						.reverse()
 			}
 			if (yData.length == 0) {
 				seriesData = []
@@ -177,7 +178,7 @@ export default {
 			this.chart = echarts.init(this.$el);
 			var option = {
 				color: colors,
-				grid: { top: 32, right: 12, bottom: 20, left: 48 },
+				grid: { top: 32, right: 12, bottom: 20, left: 60 },
 				xAxis: {
 					type: 'category',
 					data: xData,
@@ -223,6 +224,40 @@ export default {
 				},
 			}
 			option && this.chart.setOption(option)
+		},
+		getXdata() {
+			const today = new Date();
+			const currentYear = today.getFullYear();
+			const currentMonth = today.getMonth() + 1;
+			let days = 30;
+			if (this.chartTime === '周') {
+				return Array(7)
+						.fill(1)
+						.map((_, index) => {
+							const today = new Date();
+							const dtimestamp = today - (index+1) * 24 * 60 * 60 * 1000;
+							return `${new Date(dtimestamp).getMonth() + 1}.${new Date(
+								dtimestamp
+							).getDate()}`;}).reverse()
+			}else if (this.chartTime == "月") {
+				if (currentMonth in [1, 3, 5, 7, 8, 10, 12]) {
+					days = 31;
+				} else if (currentMonth == 2) {
+					days = this.isLeapYear(currentYear) ? 29 : 28;
+				}
+				return Array(days)
+						.fill(1)
+						.map((_, index) => {
+							return `${currentMonth}.${days - index}`;}).reverse()
+			} else {
+				return Array(12)
+						.fill(1)
+						.map((_, index) => {
+							return `${currentYear}.${12 - index}`;}).reverse()
+			}
+		},
+		isLeapYear(year) {
+			return year % 400 == 0 || (year % 4 == 0 && year % 100 != 0);
 		}
 	},
 };

src/views/databoard/components/NumRateChart.vue

@@ -0,0 +1,204 @@
+<template>
+  <div class="num-rate-chart"></div>
+</template>
+<script>
+import * as echarts from 'echarts';
+import resize from './../mixins/resize'
+export default {
+  name: 'NumRateChart',
+  mixins: [resize],
+  data() {
+    return {
+      chart: null
+    }
+  },
+  computed: {
+    productline() {
+      return this.$store.state.websocket.productline
+    }
+  },
+  watch:{
+    productline: {
+			handler(newVal, oldVal) {
+        if (newVal === oldVal) {
+          return false
+        }
+        this.updateChart()
+			}
+		}
+  },
+  mounted() {
+		this.$el.addEventListener('resize', () => {
+			console.log('resziing.....');
+		});
+		this.updateChart()
+	},
+  methods: {
+    updateChart() {
+      if (
+        this.chart !== null &&
+        this.chart !== '' &&
+        this.chart !== undefined
+      ) {
+        this.chart.dispose()
+      }
+      this.chart = echarts.init(this.$el);
+      let xData = []
+      let outputNum = []
+      let passRate = []
+      this.productline && this.productline.length > 0 && this.productline.map(item => {
+        xData.push(itme.productionLineId)
+        outputNum.push(itme.outputNum)
+        passRate.push(item.passRate)
+      })
+      var option = {
+        grid: { top: 32, right: 60, bottom: 20, left: 60 },
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          className: "num-rate-chart-tooltip"
+        },
+        legend: {
+          data: ['产线产量', '合格率'],
+          textStyle: {
+            color: "#DFF1FE",
+            fontSize: 12,
+          }
+        },
+        xAxis: [
+          {
+            type: 'category',
+            data: ['Y61', 'Y62', 'Y63', 'Y64', 'Y65', 'Y66', 'Y67'],
+            axisLabel: {
+              color: "#fff",
+              fontSize: 12,
+            },
+            axisPointer: {
+              type: 'shadow'
+            },
+            axisTick: { show: false },
+            axisLine: {
+              lineStyle: {
+                width: 1,
+                color: "#213259",
+              },
+            },
+          }
+        ],
+        yAxis: [
+          {
+            type: 'value',
+            name: '产量/片',
+            // min: 0,
+            // max: 250,
+            // interval: 50,
+            axisLabel: {
+              color: "#fff",
+              fontSize: 12,
+              formatter: '{value}'
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#213259",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "#213259a0",
+              },
+            }
+          },
+          {
+            type: 'value',
+            name: '良品率',
+            min: 0,
+            max: 25,
+            interval: 5,
+            axisLabel: {
+              color: "#fff",
+              fontSize: 12,
+              formatter: '{value} %'
+            },
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: "#213259",
+            },
+          },
+          splitLine: {
+            lineStyle: {
+              color: "#213259a0",
+            },
+          }
+          }
+        ],
+        series: [
+          {
+            name: '产线产量',
+            type: 'bar',
+            tooltip: {
+              valueFormatter: function (value) {
+                return value;
+              }
+            },
+            barWidth: 12,
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 0, color: '#5CB7FF' },
+                { offset: 1, color: '#364BFE' }
+              ])
+            },
+            data: [
+              2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
+            ]
+          },
+          {
+            name: '合格率',
+            type: 'line',
+            yAxisIndex: 1,
+            tooltip: {
+              valueFormatter: function (value) {
+                return value + '%';
+              }
+            },
+            itemStyle: {
+              color: '#FFD160'
+            },
+            areaStyle: {
+							color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 0, color: '#FFCB59' + "40" },
+                { offset: 0.5, color: '#FFCB59' + "20" },
+                { offset: 1, color: '#FFCB59' + "00" },
+                ]),
+            },
+            lineStyle: {
+                width: 1
+            },
+            data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
+          }
+        ]
+      };
+      option && this.chart.setOption(option)
+    }
+  }
+}
+</script>
+<style scoped lang="scss">
+.num-rate-chart {
+	width: 100%;
+	height: 100%;
+}
+</style>
+<style>
+  .num-rate-chart-tooltip {
+    background: #0a2b4f77 !important;
+    border: none !important;
+    backdrop-filter: blur(12px);
+  }
+  .num-rate-chart-tooltip * {
+    color: #fff !important;
+  }
+</style>

src/views/databoard/deepProcessing/BottomTwo.vue

@@ -1,22 +1,34 @@
 <template>
 	<div
 		class="bottom-two"
-		style="
+		style="flex: 1; display: flex; gap: 20px; padding: 0px 16px">
-			display: grid;
+		<div class="left-side" style="flex: 1">
-			gap: 16px;
+			<div
-			grid-template-rows: 462px 462px;
+				style="
-		">
+					display: grid;
-		<OrderStatus />
+					grid-template-rows: 462px;
-		<YieldRate />
+				">
+				<EnergyMonitoring />
+			</div>
+		</div>
+		<div class="right-side" style="flex: 1">
+			<div
+				style="
+					display: grid;
+					grid-template-rows: 462px;
+				">
+				<NumRate />
+			</div>
+		</div>
 	</div>
 </template>
 
 <script>
-import OrderStatus from './OrderStatus.vue';
+import NumRate from './NumRate';
-import YieldRate from './YieldRate.vue';
+import  EnergyMonitoring from './EnergyMonitoring';
 export default {
 	name: 'BottomTwo',
-	components: { OrderStatus, YieldRate },
+	components: { NumRate,  EnergyMonitoring },
 	props: {},
 	data() {
 		return {};

src/views/databoard/deepProcessing/DefectSum.vue

@@ -1,14 +1,14 @@
 <template>
   <div style="flex: 1;">
-    <Container name="本日生产良品率" size="small" style="">
+    <Container name="各工序缺陷汇总" size="small" style="">
-      0000987
+      设备报警
     </Container>
   </div>
 </template>
 <script>
 import Container from '../components/Container.vue';
 export default {
-  name: 'YieldRate',
+  name: 'DefectSum',
   components: { Container },
 }
 </script>

src/views/databoard/deepProcessing/EnergyMonitoring.vue

@@ -0,0 +1,30 @@
+<template>
+  <div style="flex: 1;">
+    <Container name="能源监控" size="small" style="">
+      <div class="chart" style="height: 370px; margin-top: 8px;">
+        <EnergeMonitoringChart/>
+      </div>
+    </Container>
+  </div>
+</template>
+<script>
+import Container from '../components/Container.vue';
+import EnergeMonitoringChart from '../components/EnergeMonitoringChart';
+export default {
+  name: 'EnergyMonitoring',
+  components: { Container, EnergeMonitoringChart },
+  data() {
+    return {
+    }
+  },
+  methods: {
+  }
+}
+</script>
+<style lang='scss' scoped>
+.timeToggle {
+  position: absolute;
+  right: 20px;
+  top: 30px;
+}
+</style>

src/views/databoard/deepProcessing/EqAlarm.vue

@@ -1,14 +1,14 @@
 <template>
   <div style="flex: 1;">
-    <Container name="订单完成情况" size="small" style="">
+    <Container name="设备报警" size="small" style="">
-      digndna
+      设备报警
     </Container>
   </div>
 </template>
 <script>
 import Container from '../components/Container.vue';
 export default {
-  name: 'OrderStatus',
+  name: 'EqAlarm',
   components: { Container },
 }
 </script>

src/views/databoard/deepProcessing/NumRate.vue

@@ -0,0 +1,30 @@
+<template>
+  <div style="flex: 1;">
+    <Container name="产线产量及良品率" size="small" style="">
+      <div class="chart" style="height: 370px; margin-top: 8px;">
+        <NumRateChart />
+      </div>
+    </Container>
+  </div>
+</template>
+<script>
+import Container from '../components/Container';
+import NumRateChart from '../components/NumRateChart';
+export default {
+  name: 'NumRate',
+  components: { Container, NumRateChart },
+  data() {
+    return {
+    }
+  },
+  methods: {
+  }
+}
+</script>
+<style lang='scss' scoped>
+.timeToggle {
+  position: absolute;
+  right: 20px;
+  top: 30px;
+}
+</style>

src/views/databoard/deepProcessing/TopThree.vue

@@ -1,22 +1,44 @@
 <template>
 	<div
 		class="top-three"
-		style="
+		style="flex: 1; display: flex; gap: 20px; padding: 0px 16px;">
-			display: grid;
+		<div class="left-side" style="flex: 1;">
-			gap: 16px;
+			<div
-			grid-template-rows: 462px 462px;
+				style="
-		">
+					display: grid;
-		<OrderStatus />
+					grid-template-rows: 462px;
-		<YieldRate />
+				">
+				<EqAlarm />
+			</div>
+		</div>
+		<div class="middle-side" style="flex: 1">
+			<div
+				style="
+					display: grid;
+					grid-template-rows: 462px;
+				">
+				<DefectSum />
+			</div>
+		</div>
+		<div class="righe-side" style="flex: 1">
+			<div
+				style="
+					display: grid;
+					grid-template-rows: 462px;
+				">
+				<WorkOrderMonitoring />
+			</div>
+		</div>
 	</div>
 </template>
 
 <script>
-import OrderStatus from './OrderStatus.vue';
+import WorkOrderMonitoring from './WorkOrderMonitoring';
-import YieldRate from './YieldRate.vue';
+import EqAlarm from './EqAlarm'
+import DefectSum from './DefectSum'
 export default {
 	name: 'TopThree',
-	components: { OrderStatus, YieldRate },
+	components: { EqAlarm, DefectSum, WorkOrderMonitoring },
 	props: {},
 	data() {
 		return {};

src/views/databoard/deepProcessing/WorkOrderMonitoring.vue

@@ -0,0 +1,14 @@
+<template>
+  <div style="flex: 1;">
+    <Container name="工单监控" size="small" style="">
+      设备报警111
+    </Container>
+  </div>
+</template>
+<script>
+import Container from '../components/Container.vue';
+export default {
+  name: 'WorkOrderMonitoring',
+  components: { Container },
+}
+</script>

src/views/databoard/deepProcessing/index.vue

@@ -18,18 +18,18 @@
 			"
 			:style="{transform:'scale('+scaleNum+')'}">
 			<KHeader :isFullScreen='isFullScreen' @screenfullChange='screenfullChange' topTitle='全厂总览驾驶舱'/>
-			<!-- <div
+			<div
 				class="main-body"
 				style="
 					display: grid;
 					gap: 16px;
-					grid-template-rows: 605px 320px;
+					grid-template-rows: 462px 462px;
 				">
-				<GasHandle />
+				<TopThree />
-				<YieldRate />
+				<BottomTwo />
-			</div> -->
+			</div>
 
-			<div
+			<!-- <div
 				class="main-body"
 				style="flex: 1; display: flex; gap: 20px; padding: 0px 16px">
 				<div class="left-side" style="flex: 1">
@@ -38,7 +38,7 @@
 				<div class="middle-side" style="flex: 1">
 					<BottomTwo />
 				</div>
-			</div>
+			</div> -->
 		</div>
 	</div>
 </template>

src/views/databoard/kiln/EnergeCost.vue

@@ -76,28 +76,30 @@ export default {
 		// 切换能源
 		toggleType(val) {
 			console.log('能源' + val)
-			if (val === '天然气I' || val === '天然气II') {
+			this.chartType = val
-				if (this.chartTime === '周') {
+			// if (val === '天然气I' || val === '天然气II') {
-					this.chartType = val
+			// 	if (this.chartTime === '周') {
-				} else {
+			// 		this.chartType = val
-					this.$message.warning('暂无数据')
+			// 	} else {
-				}
+			// 		this.$message.warning('暂无数据')
-			}else {
+			// 	}
-				this.chartType = val
+			// }else {
-			}
+			// 	this.chartType = val
+			// }
 		},
 		// 切换时间
 		toggleDate(val) {
 			console.log('时间' + val)
-			if (val === '月' || val === '年') {
+			this.chartTime = val
-				if (this.chartType === '电耗能') {
+			// if (val === '月' || val === '年') {
-					this.chartTime = val
+			// 	if (this.chartType === '电耗能') {
-				} else {
+			// 		this.chartTime = val
-					this.$message.warning('暂无数据')
+			// 	} else {
-				}
+			// 		this.$message.warning('暂无数据')
-			}else{
+			// 	}
-				this.chartTime = val
+			// }else{
-			}
+			// 	this.chartTime = val
+			// }
 		}
 	},
 };

src/views/databoard/kiln/GasHandle.vue

@@ -23,7 +23,7 @@
 						">
 						氧气含量
 					</span>
-					<span style="font-size: 20px; line-height: 1.24; flex: 1">{{exhaustGasInfo.O2_float}}%</span>
+					<span style="font-size: 20px; line-height: 1.24; flex: 1">{{exhaustGasInfo?.O2_float ? (exhaustGasInfo?.O2_float).toFixed(2): ''}}%</span>
 				</ShadowRect>
 				<ShadowRect>
 					<div
@@ -38,7 +38,7 @@
 						<p style="margin: 0; line-height: inherit">一氧化氮</p>
 						<p style="margin: 0; line-height: inherit">排放浓度</p>
 					</div>
-					<span style="font-size: 20px; line-height: 1.24; flex: 1">{{exhaustGasInfo.NOX_float}}mg/m³</span>
+					<span style="font-size: 20px; line-height: 1.24; flex: 1">{{exhaustGasInfo?.NOX_float ? (exhaustGasInfo?.NOX_float).toFixed(2):''}}mg/m³</span>
 				</ShadowRect>
 
 				<ShadowRect>
@@ -54,7 +54,7 @@
 						<p style="margin: 0; line-height: inherit">二氧化硫</p>
 						<p style="margin: 0; line-height: inherit">排放浓度</p>
 					</div>
-					<span style="font-size: 20px; line-height: 1.24; flex: 1">{{exhaustGasInfo.SO2_float}}mg/m³</span>
+					<span style="font-size: 20px; line-height: 1.24; flex: 1">{{exhaustGasInfo?.SO2_float ? (exhaustGasInfo?.SO2_float).toFixed(2): ''}}mg/m³</span>
 				</ShadowRect>
 
 				<ShadowRect>
@@ -69,7 +69,7 @@
 						">
 						颗粒物浓度
 					</span>
-					<span style="font-size: 20px; line-height: 1.24; flex: 1">{{exhaustGasInfo.dust_float}}mg/m³</span>
+					<span style="font-size: 20px; line-height: 1.24; flex: 1">{{exhaustGasInfo?.dust_float ? (exhaustGasInfo?.dust_float).toFixed(2) : ''}}mg/m³</span>
 				</ShadowRect>
 			</div>
 			<KilnLine :horizontal="true" />

src/views/databoard/wholePlant/DefectClass.vue

@@ -0,0 +1,38 @@
+<template>
+  <div style="flex: 1;">
+    <Container name="产线当日缺陷分类" size="small">
+      <SelectorBtnGroup class="typeToggle" :options="['Y61', 'Y62', 'Y63', 'Y64', 'Y65']" @emitFun='toggleType' :active='chartType' />
+      <div class="chart" style="height: 370px; margin-top: 8px;">
+        <DefectClassChart :chartType='chartType'/>
+      </div>
+    </Container>
+  </div>
+</template>
+<script>
+import Container from '../components/Container';
+import SelectorBtnGroup from '../components/SelectorBtnGroup';
+import DefectClassChart from '../components/DefectClassChart';
+export default {
+  name: 'DefectClass',
+  components: { Container, SelectorBtnGroup, DefectClassChart },
+  data() {
+    return {
+      chartType:'Y61'
+    }
+  },
+  methods: {
+    // 切换产线
+		toggleType(val) {
+			console.log('产线' + val)
+			this.chartType = val
+		}
+  }
+}
+</script>
+<style lang='scss' scoped>
+.typeToggle {
+  position: absolute;
+  right: 20px;
+  top: 30px;
+}
+</style>

src/views/databoard/wholePlant/DefectStatistics.vue

@@ -2,16 +2,19 @@
   <div style="flex: 1;">
     <Container name="产线缺陷统计" size="small">
         <SelectorBtnGroup class="timeToggle" :options="['日', '周', '月', '年']" @emitFun='toggleDate' :active='chartTime' />
-      
+        <div class="chart" style="height: 238px; margin-top: 8px;">
-    </Container>
+          <DefectChart :chartTime='chartTime'/>
+        </div>
+      </Container>
   </div>
 </template>
 <script>
 import Container from '../components/Container';
 import SelectorBtnGroup from '../components/SelectorBtnGroup';
+import DefectChart from '../components/DefectChart';
 export default {
   name: 'DefectStatistics',
-  components: { Container, SelectorBtnGroup },
+  components: { Container, SelectorBtnGroup, DefectChart },
   data() {
     return {
       chartTime:'日'
@@ -29,6 +32,7 @@ export default {
 <style lang='scss' scoped>
 .timeToggle {
   position: absolute;
-  right: 0;
+  right: 20px;
+  top: 20px;
 }
 </style>

src/views/databoard/wholePlant/OrderStatus.vue

@@ -87,7 +87,7 @@ export default {
     setRowStyle(v) {
       if (v.rowIndex % 2 === 0) {
         return {
-          background: 'rgba(11, 84, 153, 1)',
+          background: 'rgba(11, 84, 153, 0.5)',
           color: 'rgba(255,255,255,0.8)',
           height: '40px',
           lineHeight: '40px',
@@ -96,7 +96,7 @@ export default {
         }
       } else {
         return {
-          background: 'rgba(4, 74, 132, 1)',
+          background: 'rgba(4, 74, 132, 0.5)',
           color: 'rgba(255,255,255,0.8)',
           height: '40px',
           lineHeight: '40px',

src/views/databoard/wholePlant/RightTwo.vue

@@ -7,16 +7,16 @@
 			grid-template-rows: 462px 462px;
 		">
 		<EnergeCost />
-		<YieldRate />
+		<DefectClass />
 	</div>
 </template>
 
 <script>
 import EnergeCost from './../kiln/EnergeCost.vue';
-import YieldRate from './YieldRate.vue';
+import DefectClass from './DefectClass.vue';
 export default {
 	name: 'RightFour',
-	components: { EnergeCost, YieldRate },
+	components: { EnergeCost, DefectClass },
 	props: {},
 	data() {
 		return {};

src/views/databoard/wholePlant/YieldRate.vue

@@ -64,15 +64,15 @@ export default {
       tableProps,
       list:[
         {time: '2023-12-12', name: '名称名称'},
-        {time: '2023-12-13', name: '名称名称'},
+        // {time: '2023-12-13', name: '名称名称'},
-        {time: '2023-12-14', name: '名称名称'},
+        // {time: '2023-12-14', name: '名称名称'},
-        {time: '2023-12-15', name: '名称名称'},
+        // {time: '2023-12-15', name: '名称名称'},
-        {time: '2023-12-16', name: '名称名称'},
+        // {time: '2023-12-16', name: '名称名称'},
-        {time: '2023-12-17', name: '名称名称'},
+        // {time: '2023-12-17', name: '名称名称'},
-        {time: '2023-12-18', name: '名称名称'},
+        // {time: '2023-12-18', name: '名称名称'},
-        {time: '2023-12-19', name: '名称名称'},
+        // {time: '2023-12-19', name: '名称名称'},
-        {time: '2023-12-20', name: '名称名称'},
+        // {time: '2023-12-20', name: '名称名称'},
-        {time: '2023-12-21', name: '名称名称'}
+        // {time: '2023-12-21', name: '名称名称'}
       ]
     }
   },

src/websocket/websocket.js

@@ -42,7 +42,7 @@ export function WsConnect(url, agentData, successCallback, errCallback) {
       this.lockReconnect = true;
       this.wsCreateHandler && clearTimeout(this.wsCreateHandler);
       // 关闭心跳检查
-      heartCheck.stop();
+      // heartCheck.stop();
     }
   };
   const initWsEventHandle = () => {
@@ -50,13 +50,13 @@ export function WsConnect(url, agentData, successCallback, errCallback) {
       // 连接成功
       this.wsObj.onopen = (event) => {
         onWsOpen(event);
-        heartCheck.start();
+        // heartCheck.start();
       };
 
       // 监听服务器端返回的信息
       this.wsObj.onmessage = (event) => {
         onWsMessage(event);
-        heartCheck.start();
+        // heartCheck.start();
       };
 
       this.wsObj.onclose = (event) => {
@@ -136,41 +136,41 @@ export function WsConnect(url, agentData, successCallback, errCallback) {
   };
 
   // 心跳检查（看看websocket是否还在正常连接中）
-  let heartCheck = {
+  // let heartCheck = {
-    timeout: 15000,
+  //   timeout: 15000,
-    timeoutObj: null,
+  //   timeoutObj: null,
-    serverTimeoutObj: null,
+  //   serverTimeoutObj: null,
-    // 重启
+  //   // 重启
-    reset() {
+  //   reset() {
-      clearTimeout(this.timeoutObj);
+  //     clearTimeout(this.timeoutObj);
-      clearTimeout(this.serverTimeoutObj);
+  //     clearTimeout(this.serverTimeoutObj);
-      this.start();
+  //     this.start();
-    },
+  //   },
-    // 停止
+  //   // 停止
-    stop() {
+  //   stop() {
-      clearTimeout(this.timeoutObj);
+  //     clearTimeout(this.timeoutObj);
-      clearTimeout(this.serverTimeoutObj);
+  //     clearTimeout(this.serverTimeoutObj);
-    },
+  //   },
-    // 开启定时器
+  //   // 开启定时器
-    start() {
+  //   start() {
-      this.timeoutObj && clearTimeout(this.timeoutObj);
+  //     this.timeoutObj && clearTimeout(this.timeoutObj);
-      this.serverTimeoutObj && clearTimeout(this.serverTimeoutObj);
+  //     this.serverTimeoutObj && clearTimeout(this.serverTimeoutObj);
-      // 15s之内如果没有收到后台的消息，则认为是连接断开了，需要重连
+  //     // 15s之内如果没有收到后台的消息，则认为是连接断开了，需要重连
-      this.timeoutObj = setTimeout(() => {
+  //     this.timeoutObj = setTimeout(() => {
-        writeToScreen("心跳检查，发送ping到后台");
+  //       writeToScreen("心跳检查，发送ping到后台");
-        try {
+  //       try {
-          const datas = { ping: true };
+  //         const datas = { ping: true };
-          this.wsObj.send(JSON.stringify(datas));
+  //         this.wsObj.send(JSON.stringify(datas));
-        } catch (err) {
+  //       } catch (err) {
-          writeToScreen("发送ping异常");
+  //         writeToScreen("发送ping异常");
-        }
+  //       }
-        console.log("内嵌定时器this.serverTimeoutObj: ", this.serverTimeoutObj);
+  //       console.log("内嵌定时器this.serverTimeoutObj: ", this.serverTimeoutObj);
-        // 内嵌定时器
+  //       // 内嵌定时器
-        this.serverTimeoutObj = setTimeout(() => {
+  //       this.serverTimeoutObj = setTimeout(() => {
-          writeToScreen("没有收到后台的数据，重新连接");
+  //         writeToScreen("没有收到后台的数据，重新连接");
-          reconnect();
+  //         reconnect();
-        }, this.timeout);
+  //       }, this.timeout);
-      }, this.timeout);
+  //     }, this.timeout);
-    },
+  //   },
-  };
+  // };
 }

src/websocket/wsInterface.js

@@ -37,6 +37,7 @@ const dcsConn = new WsConnect(
     console.log('失败的回调函数', err)
   }
 )
+// ISRA
 const mesIsra = new WsConnect(
   'ws://10.70.2.2:8080/websocket/message?userId=KILN'+timestr,
   '',
@@ -106,6 +107,10 @@ const mesEN = new WsConnect(
         store.dispatch({type: "websocket/setEnergyTrend", payload:msgData.data})
         break;
       }
+      case "EnergyMonitoring": {
+        store.dispatch({type: "websocket/setEnergyMonitoring", payload:msgData.data})
+        break;
+      }
       default:
     }
   },
@@ -144,12 +149,72 @@ const mesGAS = new WsConnect(
     console.log('失败的回调函数', err)
   }
 )
+
+// 缺陷分类/统计 IS
+const mesIS = new WsConnect(
+  // websocket地址
+  'ws://10.70.2.2:8080/websocket/message?userId=IS'+timestr,
+  // 传递给后台的数据
+  '',
+  // 成功拿到后台返回的数据的回调函数
+  (data) => {
+    // console.log('mes 缺陷成功的回调函数, 接收到的data数据: ', data)
+    let msgData = JSON.parse(data)
+    if (msgData == null) return;
+    switch (msgData?.type) {
+      case "isra": {
+        store.dispatch({type: "websocket/setDefectChart", payload:{
+          dayStatistic: msgData.detData.dayStatistic,
+          weekStatistic: msgData.detData.weekStatistic,
+          monthStatistic: msgData.detData.monthStatistic,
+          yearStatistic: msgData.detData.yearStatistic,
+        }})
+        break;
+      }
+      default:
+    }
+  },
+  // websocket连接失败的回调函数
+  (err) => {
+    console.log('失败的回调函数', err)
+  }
+)
+
+// 产线产量及良品率 SJG
+const mesSJG = new WsConnect(
+  // websocket地址
+  // 'ws://10.70.2.2:8080/websocket/message?userId=SJG'+timestr,
+  'ws://192.168.1.104:48082/websocket/message?userId=SJG'+timestr,
+  // 传递给后台的数据
+  '',
+  // 成功拿到后台返回的数据的回调函数
+  (data) => {
+    // console.log('mes 产线产量及良品率成功的回调函数, 接收到的data数据: ', data)
+    let msgData = JSON.parse(data)
+    if (msgData == null) return;
+    switch (msgData?.type) {
+      case "productline": {
+        store.dispatch({type: "websocket/setProductline", payload:msgData.detData})
+        break;
+      }
+      default:
+    }
+  },
+  // websocket连接失败的回调函数
+  (err) => {
+    console.log('失败的回调函数', err)
+  }
+)
+
+
 export const getDcsMsg = () => {
   dcsConn.createWebSoket()
   mesIsra.createWebSoket()
   mesMA.createWebSoket()
   mesEN.createWebSoket()
   mesGAS.createWebSoket()
+  mesIS.createWebSoket()
+  // mesSJG.createWebSoket()
 }
 export const closeDcsMsg = () => {
   dcsConn.closeWebsocket()
@@ -157,4 +222,6 @@ export const closeDcsMsg = () => {
   mesMA.closeWebsocket()
   mesEN.closeWebsocket()
   mesGAS.closeWebsocket()
+  mesIS.closeWebsocket()
+  // mesSJG.closeWebsocket()
 }

yarn.lock

@@ -1100,6 +1100,51 @@
     "cssnano-preset-default" "^4.0.0"
     "postcss" "^7.0.0"
 
+"@jiaminghi/bezier-curve@*":
+  "integrity" "sha512-u9xJPOEl6Dri2E9FfmJoGxYQY7vYJkURNX04Vj64tdi535tPrpkuf9Sm0lNr3QTKdHQh0DdNRsaa62FLQNQEEw=="
+  "resolved" "https://registry.npmmirror.com/@jiaminghi/bezier-curve/-/bezier-curve-0.0.9.tgz"
+  "version" "0.0.9"
+  dependencies:
+    "@babel/runtime" "^7.5.5"
+
+"@jiaminghi/c-render@^0.4.3":
+  "integrity" "sha512-FJfzj5hGj7MLqqqI2D7vEzHKbQ1Ynnn7PJKgzsjXaZpJzTqs2Yw5OSeZnm6l7Qj7jyPAP53lFvEQNH4o4j6s+Q=="
+  "resolved" "https://registry.npmmirror.com/@jiaminghi/c-render/-/c-render-0.4.3.tgz"
+  "version" "0.4.3"
+  dependencies:
+    "@babel/runtime" "^7.5.5"
+    "@jiaminghi/bezier-curve" "*"
+    "@jiaminghi/color" "*"
+    "@jiaminghi/transition" "*"
+
+"@jiaminghi/charts@*":
+  "integrity" "sha512-K+HXaOOeWG9OOY1VG6M4mBreeeIAPhb9X+khG651AbnwEwL6G2UtcAQ8GWCq6GzhczcLwwhIhuaHqRygwHC0sA=="
+  "resolved" "https://registry.npmmirror.com/@jiaminghi/charts/-/charts-0.2.18.tgz"
+  "version" "0.2.18"
+  dependencies:
+    "@babel/runtime" "^7.5.5"
+    "@jiaminghi/c-render" "^0.4.3"
+
+"@jiaminghi/color@*":
+  "integrity" "sha512-ZY3hdorgODk4OSTbxyXBPxAxHPIVf9rPlKJyK1C1db46a50J0reFKpAvfZG8zMG3lvM60IR7Qawgcu4ZDO3+Hg=="
+  "resolved" "https://registry.npmmirror.com/@jiaminghi/color/-/color-1.1.3.tgz"
+  "version" "1.1.3"
+
+"@jiaminghi/data-view@^2.10.0":
+  "integrity" "sha512-Cud2MTiMcqc5k2KWabR/svuVQmXHANqURo+yj40370/LdI/gyUJ6LG203hWXEnT1nMCeiv/SLVmxv3PXLScCeA=="
+  "resolved" "https://registry.npmmirror.com/@jiaminghi/data-view/-/data-view-2.10.0.tgz"
+  "version" "2.10.0"
+  dependencies:
+    "@babel/runtime" "^7.5.5"
+    "@jiaminghi/charts" "*"
+
+"@jiaminghi/transition@*":
+  "integrity" "sha512-owBggipoHMikDHHDW5Gc7RZYlVuvxHADiU4bxfjBVkHDAmmck+fCkm46n2JzC3j33hWvP9nSCAeh37t6stgWeg=="
+  "resolved" "https://registry.npmmirror.com/@jiaminghi/transition/-/transition-1.1.11.tgz"
+  "version" "1.1.11"
+  dependencies:
+    "@babel/runtime" "^7.5.5"
+
 "@jridgewell/gen-mapping@^0.3.0", "@jridgewell/gen-mapping@^0.3.2":
   "integrity" "sha512-HLhSWOLRi875zjjMG/r+Nv0oCW8umGb0BgEhyX3dDX3egwZtB8PqLnjz3yedt8R5StBrzcg4aBpnh8UA9D1BoQ=="
   "resolved" "https://registry.npmmirror.com/@jridgewell/gen-mapping/-/gen-mapping-0.3.3.tgz"