'1'

.env.dev

@@ -1,8 +1,8 @@
 ###
  # @Author: Do not edit
  # @Date: 2023-08-29 09:40:39
- # @LastEditTime: 2024-01-04 15:50:26
+ # @LastEditTime: 2024-01-08 16:23:54
- # @LastEditors: zhp
+ # @LastEditors: DY
  # @Description:
 ###
 # 开发环境配置
@@ -27,7 +27,6 @@ VUE_APP_BASE_API = 'http://10.70.2.2:8080'
 VUE_APP_Socket_API = 'ws://10.70.2.2:8080'
 
 
-# VUE_APP_BASE_API = 'http://100.64.0.23:48082'
 # 积木报表指向地址
 VUE_APP_JIMU_API = 'http://10.70.2.22:8080'
 

src/main.js

@@ -9,7 +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 { scrollBoard } from '@jiaminghi/data-view'
 
 import './assets/icons'; // icon
 import './permission'; // permission control
@@ -79,7 +79,7 @@ Vue.use(CodeBrickZj)
 Vue.use(directive);
 Vue.use(plugins);
 Vue.use(VueMeta);
-// Vue.use(dataV)
+Vue.use(scrollBoard)
 // Vue.use(hljs.vuePlugin);
 import scroll from 'vue-seamless-scroll'
 Vue.use(scroll)

src/store/modules/websocket.js

@@ -20,11 +20,71 @@ const state = {
   gasChartWeekTrend:{}, // 烟气
   gasChartMonthTrend:{}, // 烟气
   gasChartYearTrend:{}, // 烟气
+  israCheckType: [],
   israDayStatistic: [],//缺陷统计
   israWeekStatistic: [],//缺陷统计
   israMonthStatistic: [],//缺陷统计
   israYearStatistic: [],//缺陷统计
-  productline: [] // 产线产量及良品率
+  productline: [{
+		"creator": "1",
+		"sumOutputNum": 15,
+		"outputNum": 15,
+		"passRate": 0.6,
+		"lineName": "3#深加工",
+		"updateTime": "2024-01-04T16:00:19",
+		"updater": "1",
+		"inputNum": 15,
+		"deleted": false,
+		"recordTime": "2023-12-25T20:00:00",
+		"createTime": "2023-10-13T10:44:27",
+		"tenantId": 1,
+		"id": 1712660539187441666,
+		"productionLineId": 1737313260027285506,
+		"sumInputNum": 15
+	}, {
+		"creator": "1",
+		"sumOutputNum": 49,
+		"outputNum": 16,
+		"passRate": 0.3,
+		"lineName": "2#深加工",
+		"updateTime": "2024-01-04T16:00:19",
+		"updater": "1",
+		"inputNum": 17,
+		"deleted": false,
+		"recordTime": "2023-12-25T20:00:00",
+		"createTime": "2023-10-13T10:44:27",
+		"tenantId": 1,
+		"id": 1712660539187441665,
+		"productionLineId": 1737313119178362881,
+		"sumInputNum": 47
+	}, {
+		"creator": "1",
+		"sumOutputNum": 29,
+		"outputNum": 18,
+		"passRate": 0.5,
+		"lineName": "1#深加工",
+		"updateTime": "2024-01-04T16:00:19",
+		"updater": "1",
+		"inputNum": 20,
+		"deleted": false,
+		"recordTime": "2023-12-25T20:00:00",
+		"createTime": "2023-10-13T10:43:17",
+		"tenantId": 1,
+		"id": 1712660244285927426,
+		"productionLineId": 1737312466842456065,
+		"sumInputNum": 27
+	}], // SJG产线产量及良品率
+  sjgEquipment:[
+    {name: 'sadd', error:false,code: 'EQ202312121624540000072',status: "正常"}
+  ],// SJG设备报警
+  workOrder: [], // 工单监控
+  defectSum: [], // 缺陷汇总
+  order: [],// 订单完成情况
+  yieldRateTable: [],// 本日生产良率table
+  cutChartDay:[],
+  cutChartWeek:[],
+  cutChartMonth:[],
+  cutChartYear:[]
 };
 const mutations = {
   SET_FANFREQUENCYINFO: (state, fanFrequencyInfo) => {
@@ -73,12 +133,13 @@ const mutations = {
     state.exhaustGasInfo = exhaustGasInfo
   },
   SET_EXHAUSTGASCHART: (state, exhaustGasChart) => {
-    state.gasChartDayTrend = exhaustGasChart.gasChartDayTrend
+    state.gasChartDayTrend = exhaustGasChart.dayTrend
-    state.gasChartWeekTrend = exhaustGasChart.gasChartWeekTrend
+    state.gasChartWeekTrend = exhaustGasChart.weekTrend
-    state.gasChartMonthTrend = exhaustGasChart.gasChartMonthTrend
+    state.gasChartMonthTrend = exhaustGasChart.monthTrend
-    state.gasChartYearTrend = exhaustGasChart.gasChartYearTrend
+    state.gasChartYearTrend = exhaustGasChart.yearTrend
   },
   SET_DEFECTCHART: (state, israStatistic) => {
+    state.israCheckType = israStatistic.checkType
     state.israDayStatistic = israStatistic.dayStatistic
     state.israWeekStatistic = israStatistic.weekStatistic
     state.israMonthStatistic = israStatistic.monthStatistic
@@ -86,6 +147,33 @@ const mutations = {
   },
   SET_PRODUCTLINE: (state, productline) => {
     state.productline = productline
+  },
+  SET_SJGEQ: (state, equipment) => {
+    state.sjgEquipment = equipment
+  },
+  SET_WORKORDER: (state, workOrder) => {
+    state.workOrder = workOrder
+  },
+  SET_DEFECTSUM: (state, defectSum) => {
+    state.defectSum = defectSum
+  },
+  SET_ORDER: (state, order) => {
+    state.order = order
+  },
+  SET_YIELDRATETABLE: (state, yieldRateTable) => {
+    state.yieldRateTable = yieldRateTable
+  },
+  SET_CUTCHARDAY: (state, cutChartDay) => {
+    state.cutChartDay = cutChartDay
+  },
+  SET_CUTCHARWEEK: (state, cutChartWeek) => {
+    state.cutChartWeek = cutChartWeek
+  },
+  SET_CUTCHARMONTH: (state, cutChartMonth) => {
+    state.cutChartMonth = cutChartMonth
+  },
+  SET_CUTCHARYEAR: (state, cutChartYear) => {
+    state.cutChartYear = cutChartYear
   }
 };
 const actions = {
@@ -130,6 +218,33 @@ const actions = {
   setProductline({ commit }, productline) {
     commit('SET_PRODUCTLINE', productline.payload)
   },
+  setSJGEq({ commit }, equipment) {
+    commit('SET_SJGEQ', equipment.payload)
+  },
+  setWorkOrder({ commit }, workOrder) {
+    commit('SET_WORKORDER', workOrder.payload)
+  },
+  setDefectSum({ commit }, defectSum) {
+    commit('SET_DEFECTSUM', defectSum.payload)
+  },
+  setOrder({ commit }, order) {
+    commit('SET_ORDER', order.payload)
+  },
+  setYieldRateTable({ commit }, yieldRateTable) {
+    commit('SET_YIELDRATETABLE', yieldRateTable.payload)
+  },
+  setCutChartDay({ commit }, cutChartDay) {
+    commit('SET_CUTCHARDAY', cutChartDay.payload)
+  },
+  setCutChartWeek({ commit }, cutChartWeek) {
+    commit('SET_CUTCHARWEEK', cutChartWeek.payload)
+  },
+  setCutChartMonth({ commit }, cutChartMonth) {
+    commit('SET_CUTCHARMONTH', cutChartMonth.payload)
+  },
+  setCutChartYear({ commit }, cutChartYear) {
+    commit('SET_CUTCHARYEAR', cutChartYear.payload)
+  }
 };
 export default {
   namespaced: true,

src/styles/index.scss

@@ -200,4 +200,12 @@ input, textarea{
 // 弹出框，上下分布，去掉label的padding-bottom
 .el-form--label-top .el-form-item__label {
   padding: 0;
+}
+
+// 大屏滚动表格
+.dv-scroll-board .rows .ceil, .dv-scroll-board .header .header-item {
+  border-right: 1px solid rgba(13, 23, 40, 1);
+}
+.dv-scroll-board .rows .ceil:last-child, .dv-scroll-board .header .header-item:last-child {
+  border-right: none;
 }

src/views/base/coreProduct/add-or-updata.vue

@@ -2,7 +2,7 @@
  * @Author: zwq
  * @Date: 2021-11-18 14:16:25
  * @LastEditors: DY
- * @LastEditTime: 2023-12-06 10:36:56
+ * @LastEditTime: 2024-01-08 16:11:03
  * @Description:
 -->
 <template>
@@ -253,6 +253,7 @@ export default {
 			dataRule: {
         code: [{ required: true, message: "产品编码不能为空", trigger: "blur" }],
         name: [{ required: true, message: "产品名称不能为空", trigger: "blur" }],
+				specifications: [{ required: true, message: "规格不能为空", trigger: "blur" }],
 				materialType: [{ required: true, message: "物料类型不能为空", trigger: "change" }],
 				productType: [{ required: true, message: "产品类型不能为空", trigger: "change" }],
 				processTime: [{ required: true, message: "产线生产单位用时不能为空", trigger: "blur" }]

src/views/databoard/components/DefectChart.vue

@@ -17,6 +17,9 @@ export default {
     }
   },
   computed: {
+    israCheckType() {
+      return this.$store.state.websocket.israCheckType
+    },
     israDayStatistic() {
       return this.$store.state.websocket.israDayStatistic
     },
@@ -34,7 +37,7 @@ export default {
     israDayStatistic: {
 			handler(newVal, oldVal) {
 				if (this.chartTime === '日') {
-          this.tempData = israDayStatistic
+          this.tempData = this.israDayStatistic
 					this.updateChart()
 				}
 			}
@@ -42,7 +45,7 @@ export default {
     israWeekStatistic: {
 			handler(newVal, oldVal) {
 				if (this.chartTime === '周') {
-          this.tempData = israWeekStatistic
+          this.tempData = this.israWeekStatistic
 					this.updateChart()
 				}
 			}
@@ -50,7 +53,7 @@ export default {
     israMonthStatistic: {
 			handler(newVal, oldVal) {
 				if (this.chartTime === '月') {
-          this.tempData = israMonthStatistic
+          this.tempData = this.israMonthStatistic
 					this.updateChart()
 				}
 			}
@@ -58,7 +61,7 @@ export default {
     israYearStatistic: {
 			handler(newVal, oldVal) {
 				if (this.chartTime === '年') {
-          this.tempData = israYearStatistic
+          this.tempData = this.israYearStatistic
 					this.updateChart()
 				}
 			}
@@ -80,56 +83,34 @@ export default {
         this.chart.dispose()
       }
       this.chart = echarts.init(this.$el);
-      let legendData = []
       let xData = []
-      let yData = []
+      let seriesData = []
+      for (let i = 0;i < this.israCheckType.length; i++) {
+        let obj = {}
+        obj.type = 'bar'
+        obj.stack = 'all'
+        obj.emphasis = {
+          focus:"series"
+        }
+        obj.name = this.israCheckType[i]
+        obj.barWidth = 12
+        obj.data = []
+        for (let j = 0;j < this.tempData.length; j++) {
+          for (let k = 0; k < this.tempData[j].data.length; k++) {
+            if (this.israCheckType[i] === this.tempData[j].data[k].checkType) {
+              obj.data.push(this.tempData[j].data[k].checkNum)
+            }
+          }
+        }
+        seriesData.push(obj)
+      }
+
       this.tempData && this.tempData.length > 0 && this.tempData.map(item => {
         xData.push(item.name)
       })
-      var series = [
-        {
-          data: [120, 200, 150, 80, 70, 110, 130],
-          type: 'bar',
-          stack: 'all',
-          name: 'a',
-          barWidth: 12,
-        },
-        {
-          data: [10, 46, 64, '-', 0, '-', 0],
-          type: 'bar',
-          stack: 'all',
-          name: 'b',
-          barWidth: 12,
-        },
-        {
-          data: [30, '-', 0, 20, 10, '-', 0],
-          type: 'bar',
-          stack: 'all',
-          barWidth: 12,
-          name: 'c'
-        },
-        {
-          data: [30, '-', 0, 20, 10, '-', 0],
-          type: 'bar',
-          stack: 'all',
-          barWidth: 12,
-          name: 'd'
-        },
-        {
-          data: [10, 20, 150, 0, '-', 50, 10],
-          type: 'bar',
-          stack: 'all',
-          name: 'e',
-          barWidth: 12,
-          label: {
-            show: true,
-            position: 'top'
-          }
-        }
-      ];
       var option = {
-        color: ['#2760FF','#5B9BFF','#FFD160','#8167F6', '#99D66C', '#FF8A40'],
+        color: ["#2760FF", "#8167F6", "#5B9BFF", "#99D66C", "#FFD160", "#FF8A40"],
-        grid: { top: 40, right: 12, bottom: 20, left: 48 },
+        grid: { top: 80, right: 12, bottom: 20, left: 48 },
         legend: {
           top: 10,
           left: 80,
@@ -142,7 +123,7 @@ export default {
             color: "#DFF1FE",
             fontSize: 12,
           },
-          data:['a','b','c','d','e'],
+          data:this.israCheckType,
         },
         xAxis: {
           type: "category",
@@ -191,7 +172,7 @@ export default {
           },
           className: "defect-chart-tooltip"
         },
-        series: series
+        series: seriesData
       };
       option && this.chart.setOption(option)
     }

src/views/databoard/components/EnergeMonitoringChart.vue

@@ -118,7 +118,7 @@ export default {
           {
             name: '电耗能',
             type: 'bar',
-            // barWidth: 12,
+            barWidth: 20,
             tooltip: {
               valueFormatter: function (value) {
                 return value + ' ml';

src/views/databoard/components/FlueGas.vue

@@ -119,19 +119,19 @@ export default {
 			}
 			switch (this.chartType) {
 				case '氧气含量':{
-					temp2 = temp1.O2_float || []
+					temp2 = temp1?.O2_float || []
 					break;
 				}
 				case '二氧化硫':{
-					temp2 = temp1.SO2_float || []
+					temp2 = temp1?.SO2_float || []
 					break;
 				}
 				case '一氧化氮':{
-					temp2 = temp1.NOX_float || []
+					temp2 = temp1?.NOX_float || []
 					break;
 				}
 				case '颗粒物':{
-					temp2 = temp1.dust_float || []
+					temp2 = temp1?.dust_float || []
 					break;
 				}
 				default:

src/views/databoard/components/GasChart.vue

@@ -221,6 +221,7 @@ export default {
 				series: seriesData,
 				tooltip: {
 					trigger: 'axis',
+					className: "gas-tooltip"
 				},
 			}
 			option && this.chart.setOption(option)
@@ -269,3 +270,13 @@ export default {
 	height: 100%;
 }
 </style>
+<style>
+  .gas-tooltip {
+    background: #0a2b4f77 !important;
+    border: none !important;
+    backdrop-filter: blur(12px);
+  }
+  .gas-tooltip * {
+    color: #fff !important;
+  }
+</style>

src/views/databoard/components/NumRateChart.vue

@@ -47,9 +47,9 @@ export default {
       let outputNum = []
       let passRate = []
       this.productline && this.productline.length > 0 && this.productline.map(item => {
-        xData.push(itme.productionLineId)
+        xData.push(item.lineName)
-        outputNum.push(itme.outputNum)
+        outputNum.push(item.outputNum)
-        passRate.push(item.passRate)
+        passRate.push(item.passRate*100)
       })
       var option = {
         grid: { top: 32, right: 60, bottom: 20, left: 60 },
@@ -70,7 +70,7 @@ export default {
         xAxis: [
           {
             type: 'category',
-            data: ['Y61', 'Y62', 'Y63', 'Y64', 'Y65', 'Y66', 'Y67'],
+            data: xData,
             axisLabel: {
               color: "#fff",
               fontSize: 12,
@@ -91,9 +91,6 @@ export default {
           {
             type: 'value',
             name: '产量/片',
-            // min: 0,
-            // max: 250,
-            // interval: 50,
             axisLabel: {
               color: "#fff",
               fontSize: 12,
@@ -114,9 +111,6 @@ export default {
           {
             type: 'value',
             name: '良品率',
-            min: 0,
-            max: 25,
-            interval: 5,
             axisLabel: {
               color: "#fff",
               fontSize: 12,
@@ -151,9 +145,7 @@ export default {
                 { offset: 1, color: '#364BFE' }
               ])
             },
-            data: [
+            data: outputNum
-              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: '合格率',
@@ -177,7 +169,7 @@ export default {
             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]
+            data: passRate
           }
         ]
       };

src/views/databoard/components/ScrollBoard.vue

@@ -0,0 +1,32 @@
+<template>
+  <div class="scroll-board-container">
+    <dv-scroll-board :config="config" :style="{'width':width,'height':height}" :ref='id'/>
+  </div>
+</template>
+<script>
+export default {
+  name: 'ScrollBoard',
+  props: {
+    config: {
+      type: Object,
+      default: () => ({})
+    },
+    width:{
+      type: String,
+      default: '600px'
+    },
+    height:{
+      type: String,
+      default: '380px'
+    },
+    id:{
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    return {
+    }
+  }
+}
+</script>

src/views/databoard/components/Switcher.vue

@@ -7,7 +7,7 @@
 
 <template>
 	<div class="switcher" style="display: flex; align-items: center; gap: 12px">
-		<el-switch v-model="value"></el-switch>
+		<el-switch v-model="value" @change="handleClick"></el-switch>
 		<span style="color: #fff; font-size: 16px">{{ mode }}</span>
 		;
 	</div>
@@ -17,18 +17,31 @@
 export default {
 	name: 'Switcher',
 	components: {},
-	props: {},
+	props: {
+		showTitle:{
+			type: Array,
+      required: true,
+      default: () => {
+        return []
+      }
+		}
+	},
 	data() {
 		return {
-			value: true,
+			value: false,
 		};
 	},
 	computed: {
 		mode() {
-			return this.value ? '历史详情' : '实时数据';
+			return this.value ?  this.showTitle[0]: this.showTitle[1];
 		},
 	},
-	methods: {},
+	methods: {
+		handleClick(v) {
+			this.value = v;
+			this.$emit('emitFun', v);
+		}
+	},
 };
 </script>
 

src/views/databoard/components/YieldRateChart.vue

@@ -0,0 +1,317 @@
+<template>
+	<div class="yield-rate-chart"></div>
+</template>
+
+<script>
+import * as echarts from 'echarts';
+import resize from './../mixins/resize'
+import { formatDate } from '@/utils'
+
+export default {
+	name: 'GasChart',
+	mixins: [resize],
+	components: {},
+	props: {
+		chartType: '', // 能源类型
+		chartTime: ''
+	},
+	data() {
+		return {
+			chart: null
+		};
+	},
+	computed: {
+		cutChartDay() {
+			return this.$store.state.websocket.cutChartDay
+		},
+		cutChartWeek() {
+			return this.$store.state.websocket.cutChartWeek
+		},
+		cutChartMonth() {
+			return this.$store.state.websocket.cutChartMonth
+		},
+		cutChartYear() {
+			return this.$store.state.websocket.cutChartYear
+		}
+	},
+	watch: {
+		cutChartDay: {
+			handler(newVal, oldVal) {
+				if (this.chartTime === '日') {
+					this.updateChart()
+				}
+			}
+		},
+		cutChartWeek: {
+			handler(newVal, oldVal) {
+				if (this.chartTime === '周') {
+					this.updateChart()
+				}
+			}
+		},
+		cutChartMonth: {
+			handler(newVal, oldVal) {
+				if (this.chartTime === '月') {
+					this.updateChart()
+				}
+			}
+		},
+		cutChartYear: {
+			handler(newVal, oldVal) {
+				if (this.chartTime === '年') {
+					this.updateChart()
+				}
+			}
+		},
+		chartTime: {
+			handler(newVal, oldVal) {
+				console.log("===================")
+				console.log(newVal)
+				this.updateChart()
+			}
+		},
+		chartType: {
+			handler(newVal, oldVal) {
+				this.updateChart()
+			}
+		}
+	},
+	mounted() {
+		this.$el.addEventListener('resize', () => {
+			console.log('resziing.....');
+		});
+		this.updateChart()
+	},
+	methods: {
+		updateChart() {
+			let chartData = []
+			let xData = []
+			let dayArr = []
+			let nightArr = []
+			let sumArr = []
+			let seriesData = []
+			switch(this.chartTime) {
+					case '日':
+						chartData = this.cutChartDay
+						break;
+					case '周':
+					 chartData = this.cutChartWeek
+						break;
+					case '月':
+					 chartData = this.cutChartMonth
+						break;
+					case '年':
+					 chartData = this.cutChartYear
+						break;
+					default:
+			}
+			chartData && chartData.length > 0 && chartData.map(item => {
+				if (this.chartTime === '日') {
+					xData.push((item.dataTime).slice(11))
+				}else{
+					xData.push((item.dataTime).slice(0,10))
+				}
+				dayArr.push((item.day * 100).toFixed(2))
+				nightArr.push((item.night * 100).toFixed(2))
+				sumArr.push((item.sum * 100).toFixed(2))
+			})
+			if (this.chartType) {
+				seriesData = [{
+					color: '#ff9e00',
+					name: 'sum',
+					data: sumArr,
+					type: "line",
+					areaStyle: {
+							color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+							{ offset: 0, color: '#FFCB5940' },
+							{ offset: 0.5, color: '#FFCB5920' },
+							{ offset: 1, color: '#FFCB5900' },
+							]),
+					},
+					lineStyle: {
+							width: 1
+					},
+					symbolSize: 1,
+					emphasis: {
+							focus: 'series'
+					}
+				},
+				{
+					color: '#08d8cd',
+					name: 'day',
+					data: dayArr,
+					type: "line",
+					areaStyle: {
+						color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+						{ offset: 0, color: "#12FFF540" },
+						{ offset: 0.5, color: "#12FFF520" },
+						{ offset: 1, color: "#12FFF510" },
+        ]),
+					},
+					lineStyle: {
+							width: 1
+					},
+					symbolSize: 1,
+					emphasis: {
+							focus: 'series'
+					}
+				},
+				{
+					color: '#0b58ff',
+					name: 'night',
+					data: nightArr,
+					type: "line",
+					areaStyle: {
+						color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+						{ offset: 0, color: "#2760FF40" },
+						{ offset: 0.5, color: "#2760FF20" },
+						{ offset: 1, color: "#2760FF10" },
+					]),
+					},
+					lineStyle: {
+							width: 1
+					},
+					symbolSize: 1,
+					emphasis: {
+							focus: 'series'
+					}
+				}]
+			}else{
+				seriesData = [{
+					color: '#ff9e00',
+					name: 'sum',
+					data: sumArr,
+					type: "line",
+					areaStyle: {
+							color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+							{ offset: 0, color: '#FFCB5940' },
+							{ offset: 0.5, color: '#FFCB5920' },
+							{ offset: 1, color: '#FFCB5900' },
+							]),
+					},
+					lineStyle: {
+							width: 1
+					},
+					symbolSize: 1,
+					emphasis: {
+							focus: 'series'
+					}
+				}]
+			}
+			// 绘图
+			if (
+        this.chart !== null &&
+        this.chart !== '' &&
+        this.chart !== undefined
+      ) {
+        this.chart.dispose() // 页面多次刷新会出现警告，Dom已经初始化了一个实例，这是销毁实例
+      }
+			this.chart = echarts.init(this.$el);
+			var option = {
+				grid: { top: 15, right: 12, bottom: 45, left: 60 },
+				xAxis: {
+					type: 'category',
+					data: xData,
+					axisLabel: {
+						color: "#fff",
+						fontSize: 10,
+						rotate: 25,
+						margin: 13,
+					},
+					axisTick: { show: false },
+					axisLine: {
+						lineStyle: {
+							width: 1,
+							color: '#213259',
+						},
+					},
+				},
+				yAxis: {
+					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',
+						},
+					},
+					interval: 10,
+					min: 0,
+					max: 100,
+				},
+				series: seriesData,
+				tooltip: {
+					trigger: 'axis',
+					className: "yield-rate-tooltip"
+				},
+			}
+			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);
+		}
+	},
+};
+</script>
+
+<style scoped lang="scss">
+.yield-rate-chart {
+	width: 100%;
+	height: 100%;
+}
+</style>
+<style>
+  .yield-rate-tooltip {
+    background: #0a2b4f77 !important;
+    border: none !important;
+    backdrop-filter: blur(12px);
+  }
+  .yield-rate-tooltip * {
+    color: #fff !important;
+  }
+</style>

src/views/databoard/deepProcessing/DefectSum.vue

@@ -1,7 +1,9 @@
 <template>
   <div style="flex: 1;">
     <Container name="各工序缺陷汇总" size="small" style="">
-      设备报警
+      <div style="padding: 5px 10px;">
+        <dv-scroll-board :config="config" style="width:575px;height:380px" ref='defectScrollBoard'/>
+      </div>
     </Container>
   </div>
 </template>
@@ -10,5 +12,40 @@ import Container from '../components/Container.vue';
 export default {
   name: 'DefectSum',
   components: { Container },
+  computed: {
+    defectSum() {
+      return this.$store.state.websocket.defectSum
+    }
+  },
+  data() {
+    return {
+      config: {
+        header: ['序号', '产线', '工序','损耗片数','缺陷类型'],
+        // headerHeight: '17',
+        headerBGC: 'rgba(32, 55, 96, 0.8)',
+        oddRowBGC: 'rgba(32, 55, 96, 0.8)',
+        evenRowBGC: 'rgba(14, 32, 62, 0.8)',
+        columnWidth: [60],
+        align: ['center'],
+        data: [],
+        rowNum: 10
+      }
+    }
+  },
+  watch:{
+    defectSum: {
+			handler(newVal, oldVal) {
+        let outArr = this.defectSum.map((item, index) => [
+          index+1,
+          item.productionLineName,
+          item.sectionName,
+          item.count,
+          item.inspectionTypeName
+      ]);
+        this.config.data = outArr
+        this.$refs['defectScrollBoard'].updateRows(outArr)
+			}
+		}
+  }
 }
 </script>

src/views/databoard/deepProcessing/EqAlarm.vue

@@ -1,7 +1,9 @@
 <template>
   <div style="flex: 1;">
     <Container name="设备报警" size="small" style="">
-      设备报警
+      <div style="padding: 5px 10px;">
+        <dv-scroll-board :config="config" style="width:575px;height:380px" ref='eqScrollBoard'/>
+      </div>
     </Container>
   </div>
 </template>
@@ -10,5 +12,54 @@ import Container from '../components/Container.vue';
 export default {
   name: 'EqAlarm',
   components: { Container },
+  computed: {
+    sjgEquipment() {
+      return this.$store.state.websocket.sjgEquipment
+    }
+  },
+  data() {
+    return {
+      // config:{}
+      config: {
+        header: ['序号', '设备名称', '设备编码','设备状态','是否故障'],
+        // headerHeight: '17',
+        headerBGC: 'rgba(32, 55, 96, 0.8)',
+        oddRowBGC: 'rgba(32, 55, 96, 0.8)',
+        evenRowBGC: 'rgba(14, 32, 62, 0.8)',
+        columnWidth: [60],
+        align: ['center'],
+        data: [
+          [1, '设备1', '行1列3', '', ''],
+          [2, '设备2', '行2列3', '', ''],
+          [3, '设备3', '行3列3', '', ''],
+          [4, '设备4', '行4列3', '', ''],
+          [5, '设备5', '行5列3', '', ''],
+          [6, '设备6', '行6列3', '', ''],
+          [7, '设备7', '行7列3', '', ''],
+          [8, '设备8', '行8列3', '', ''],
+          [9, '设备9', '行9列3', '', ''],
+          [10, '设备10', '行10列3', '', '']
+        ],
+        rowNum: 10
+      }
+    }
+  },
+  mounted(){
+  },
+  watch:{
+    sjgEquipment: {
+			handler(newVal, oldVal) {
+        let outArr = this.sjgEquipment.map((item, index) => [
+          index+1,
+          item.name,
+          item.code,
+          item.status,
+          item.error? '是': '否'
+      ]);
+        this.config.data = outArr
+        this.$refs['eqScrollBoard'].updateRows(outArr)
+			}
+		}
+  }
 }
 </script>

src/views/databoard/deepProcessing/WorkOrderMonitoring.vue

@@ -1,7 +1,9 @@
 <template>
   <div style="flex: 1;">
     <Container name="工单监控" size="small" style="">
-      设备报警111
+      <div style="padding: 5px 10px;">
+        <dv-scroll-board :config="config" style="width:575px;height:380px" ref='worderScrollBoard'/>
+      </div>
     </Container>
   </div>
 </template>
@@ -10,5 +12,54 @@ import Container from '../components/Container.vue';
 export default {
   name: 'WorkOrderMonitoring',
   components: { Container },
+  computed: {
+    order() {
+      return this.$store.state.websocket.workOrder
+    }
+  },
+  data() {
+    return {
+      config: {
+        header: ['序号', '工单名称', '规格','产线','工单状态', '计划完成时间', '计划产量', '实际产量'],
+        // headerHeight: '17',
+        headerBGC: 'rgba(32, 55, 96, 0.8)',
+        oddRowBGC: 'rgba(32, 55, 96, 0.8)',
+        evenRowBGC: 'rgba(14, 32, 62, 0.8)',
+        columnWidth: [60, 120, 80, 60, 80, 120, 120, 120],
+        align: ['center'],
+        data: [
+          [1, '工单1', '行1列3', '', '','','',''],
+          [2, '工单2', '行2列3', '', '','','',''],
+          [3, '工单3', '行3列3', '', '','','',''],
+          [4, '工单4', '行4列3', '', '','','',''],
+          [5, '工单5', '行5列3', '', '','','',''],
+          [6, '工单6', '行6列3', '', '','','',''],
+          [7, '工单7', '行7列3', '', '','','',''],
+          [8, '工单8', '行8列3', '', '','','',''],
+          [9, '工单9', '行9列3', '', '','','',''],
+          [10, '工单10', '行10列3', '', '','','','']
+        ],
+        rowNum: 10
+      }
+    }
+  },
+  watch:{
+    order: {
+			handler(newVal, oldVal) {
+        let outArr = this.order.map((item, index) => [
+          index+1,
+          item.name,
+          item.specifications,
+          item.lines,
+          item.status,
+          item.planFinishTime,
+          item.planQuantity,
+          item.planAssignQuantity
+      ]);
+        this.config.data = outArr
+        this.$refs['worderScrollBoard'].updateRows(outArr)
+			}
+		}
+  }
 }
 </script>

src/views/databoard/deepProcessing/index.vue

@@ -17,7 +17,7 @@
 				gap: 24px;
 			"
 			:style="{transform:'scale('+scaleNum+')'}">
-			<KHeader :isFullScreen='isFullScreen' @screenfullChange='screenfullChange' topTitle='全厂总览驾驶舱'/>
+			<KHeader :isFullScreen='isFullScreen' @screenfullChange='screenfullChange' topTitle='深加工生产运行驾驶舱'/>
 			<div
 				class="main-body"
 				style="

src/views/databoard/kiln/EnergeCost.vue

@@ -45,7 +45,7 @@
 import Container from '../components/Container';
 import ShadowRect from '../components/ShadowRect.vue';
 import SplitLine from '../components/line';
-import Switcher from '../components/Switcher';
+// import Switcher from '../components/Switcher';
 import EnergeTop from './EnergeTop';
 import GasChart from '../components/GasChart.vue';
 import SelectorBtnGroup from '../components/SelectorBtnGroup';
@@ -55,7 +55,6 @@ export default {
 		Container,
 		ShadowRect,
 		SplitLine,
-		Switcher,
 		EnergeTop,
 		GasChart,
 		SelectorBtnGroup,

src/views/databoard/kiln/FanSequence.vue

@@ -42,10 +42,10 @@
 <script>
 import Container from '../components/Container.vue';
 import ShadowRect from '../components/ShadowRect.vue';
-import Switcher from '../components/Switcher';
+// import Switcher from '../components/Switcher';
 export default {
 	name: 'FanSequence',
-	components: { Container, ShadowRect, Switcher },
+	components: { Container, ShadowRect },
 	computed: {
 		fanFrequencyInfo() {
 			return this.$store.state.websocket.fanFrequencyInfo

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 ? (exhaustGasInfo?.O2_float).toFixed(2): ''}}%</span>
+					<span style="font-size: 20px; line-height: 1.24; flex: 1">{{exhaustGasInfo?.O2_float ? (Number(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 ? (exhaustGasInfo?.NOX_float).toFixed(2):''}}mg/m³</span>
+					<span style="font-size: 20px; line-height: 1.24; flex: 1">{{exhaustGasInfo?.NOX_float ? (Number(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 ? (exhaustGasInfo?.SO2_float).toFixed(2): ''}}mg/m³</span>
+					<span style="font-size: 20px; line-height: 1.24; flex: 1">{{exhaustGasInfo?.SO2_float ? (Number(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 ? (exhaustGasInfo?.dust_float).toFixed(2) : ''}}mg/m³</span>
+					<span style="font-size: 20px; line-height: 1.24; flex: 1">{{exhaustGasInfo?.dust_float ? (Number(exhaustGasInfo.dust_float)).toFixed(2) : ''}}mg/m³</span>
 				</ShadowRect>
 			</div>
 			<KilnLine :horizontal="true" />
@@ -110,7 +110,7 @@
 import Container from '../components/Container';
 import ShadowRect from '../components/ShadowRect.vue';
 import KilnLine from '../components/line';
-import Switcher from '../components/Switcher';
+// import Switcher from '../components/Switcher';
 import SelectorBtnGroup from '../components/SelectorBtnGroup';
 import FlueGas from '../components/FlueGas';
 
@@ -120,7 +120,6 @@ export default {
 		Container,
 		ShadowRect,
 		KilnLine,
-		Switcher,
 		SelectorBtnGroup,
 		FlueGas,
 	},

src/views/databoard/kiln/RightTwo.vue

@@ -22,13 +22,12 @@
 import Container from '../components/Container';
 import ShadowRect from '../components/ShadowRect.vue';
 import KilnLine from '../components/line';
-import Switcher from '../components/Switcher';
 import SelectorBtnGroup from '../components/SelectorBtnGroup';
 import KilnInfo from './KilnInfo.vue';
 import GasHandle from './GasHandle.vue';
 export default {
 	name: 'RightTwo',
-	components: { Container, Switcher, SelectorBtnGroup, KilnLine, ShadowRect, KilnInfo, GasHandle },
+	components: { Container, SelectorBtnGroup, KilnLine, ShadowRect, KilnInfo, GasHandle },
 	props: {},
 	data() {
 		return {};

src/views/databoard/wholePlant/OrderStatus.vue

@@ -1,155 +1,61 @@
 <template>
   <div style="flex: 1;">
-    <Container name="订单完成情况" size="small" class="wholeOrder">
+    <Container name="订单完成情况" size="small" style="">
-      <div style="width: 100%;padding: 10px; 20px">
+      <div style="padding: 5px 10px;">
-        <el-table
+        <dv-scroll-board :config="config" style="width:575px;height:230px" ref='orderScrollBoard'/>
-        :header-cell-style="{background:'rgba(4, 74, 132, 0.8)',color:'#fff',height: '40px',lineHeight: '40px', padding: 0,fontSize:'16px'}"
-        :row-style="setRowStyle"
-        :data="list"
-        height="225"
-        border
-        style="width: 100%; background: transparent"
-      >
-        <el-table-column
-          v-for="item in tableProps"
-          :key="item.prop"
-          :show-overflow-tooltip="item.showOverflowtooltip"
-          v-bind="item"
-        >
-          <template slot-scope="scope">
-            <component :is="item.subcomponent" v-if="item.subcomponent" :inject-data="{...scope.row, ...item}" @emitData="emitData" />
-            <span v-else>{{ scope.row[item.prop] | commonFilter(item.filter) }}</span>
-          </template>
-        </el-table-column>
-        <slot name="content" />
-      </el-table>
       </div>
     </Container>
   </div>
 </template>
 <script>
-// :header-cell-style="{background:'rgba(79,114,136,0.29)',color:'#fff'}"
+import Container from '../components/Container'
-const tableProps = [
-    {
-      prop: 'time',
-      label: '添加时间',
-      filter: parseTime,
-      minWidth: 140
-    },
-    {
-      prop: 'name',
-      label: '订单名称',
-      minWidth: 120,
-      showOverflowtooltip: true
-    },
-    {
-      prop: 'code',
-      label: '订单编码',
-      minWidth: 180
-    },
-    {
-      prop: 'customerId',
-      label: '客户',
-      showOverflowtooltip: true
-    }
-  ]
-import Container from '../components/Container.vue';
-import { parseTime } from '@/utils/ruoyi'
 export default {
   name: 'OrderStatus',
-  filters: {
+  components: { Container },
-    commonFilter: (source, filterType = a => a) => {
+  computed: {
-      return filterType(source)
+    order() {
+      return this.$store.state.websocket.order
     }
   },
-  components: { Container },
   data() {
     return {
-      tableProps,
+      config: {
-      list:[
+        header: ['上线时间', '客户名称', '规格','完成度'],
-        {time: '2023-12-12', name: '名称名称'},
+        // headerHeight: '17',
-        {time: '2023-12-13', name: '名称名称'},
+        headerBGC: 'rgba(32, 55, 96, 0.8)',
-        {time: '2023-12-14', name: '名称名称'},
+        oddRowBGC: 'rgba(32, 55, 96, 0.8)',
-        {time: '2023-12-15', name: '名称名称'},
+        evenRowBGC: 'rgba(14, 32, 62, 0.8)',
-        {time: '2023-12-16', name: '名称名称'},
+        // columnWidth: [60],
-        {time: '2023-12-17', name: '名称名称'},
+        align: ['center'],
-        {time: '2023-12-18', name: '名称名称'},
+        data: [
-        {time: '2023-12-19', name: '名称名称'},
+          ['2023-12-01', '客户1', '行1列3', ''],
-        {time: '2023-12-20', name: '名称名称'},
+          ['2023-12-01', '客户2', '行2列3', ''],
-        {time: '2023-12-21', name: '名称名称'}
+          ['2023-12-01', '客户3', '行3列3', ''],
-      ]
+          ['2023-12-01', '客户4', '行4列3', ''],
-    }
+          ['2023-12-01', '客户5', '行5列3', ''],
-  },
+          ['2023-12-01', '客户6', '行6列3', ''],
-  mounted() {
+          ['2023-12-01', '客户7', '行7列3', ''],
-    
+          ['2023-12-01', '客户8', '行8列3', ''],
-  },
+          ['2023-12-01', '客户9', '行9列3', ''],
-  methods:{
+          ['2023-12-01', '客户10', '行10列3', '']
-    setRowStyle(v) {
+        ],
-      if (v.rowIndex % 2 === 0) {
+        rowNum: 6
-        return {
-          background: 'rgba(11, 84, 153, 0.5)',
-          color: 'rgba(255,255,255,0.8)',
-          height: '40px',
-          lineHeight: '40px',
-          padding: 0,
-          fontSize: '16px'
-        }
-      } else {
-        return {
-          background: 'rgba(4, 74, 132, 0.5)',
-          color: 'rgba(255,255,255,0.8)',
-          height: '40px',
-          lineHeight: '40px',
-          padding: 0,
-          fontSize: '16px'
-        }
       }
     }
+  },
+  watch:{
+    order: {
+			handler(newVal, oldVal) {
+        let outArr = this.order.map((item) => [
+          item.startProduceTime,
+          item.name,
+          item.specifications,
+          item.completeRate
+      ]);
+        this.config.data = outArr
+        this.$refs['orderScrollBoard'].updateRows(outArr)
+			}
+		}
   }
 }
-</script>
+</script>
-<style lang='scss'>
-.wholeOrder {
-  .el-table {
-    border: 0;
-  }
-  .el-table::before,.el-table--border::after {
-    background-color: transparent;
-  }
-  .el-table th,td{
-    border-color: #0D1728 !important;
-    padding: 0;
-  }
-  .el-table tr {
-    background: transparent;
-  }
-  .el-table__row:hover > td {
-    background-color: rgba(79,114,136,0.29) !important;
-    }
-
-  .el-table__row--striped:hover > td {
-    background-color: rgba(79,114,136,0.29) !important;
-  }
-  // .el-table {
-  //   border: 0;
-  // }
-  // .el-table::before,.el-table--border::after {
-  //   background-color: transparent;
-  // }
-  // .el-table th,td{
-  //   border-color: #0D1728 !important;
-  //   padding: 0;
-  // }
-  // .el-table tr {
-  //   background: transparent;
-  // }
-  // .el-table__row:hover > td {
-  //   background-color: rgba(79,114,136,0.29) !important;
-  //   }
-
-  // .el-table__row--striped:hover > td {
-  //   background-color: rgba(79,114,136,0.29) !important;
-  // }
-  
-}
-</style>

src/views/databoard/wholePlant/YieldRate.vue

@@ -1,127 +1,125 @@
 <template>
-  <div style="flex: 2;" class="aaa">
+  <div style="flex: 2;">
-    <Container name="本日生产良品率" size="small" style="">
+    <Container name="本日生产良品率" size="small">
-      <el-table
+      <div style="padding: 5px 10px;">
-        :header-cell-style="{background:'rgba(4, 74, 132, 0.8)',color:'#fff',height: '40px',lineHeight: '40px', padding: 0,fontSize:'16px'}"
+        <dv-scroll-board :config="config" style="width:575px;height:230px" ref='yieldRateScrollBoard'/>
-        :row-style="setRowStyle"
+      </div>
-        :data="list"
+      <KilnLine :horizontal="true" />
-        border
+      <div class="" style="flex: 2; padding: 8px">
-        style="width: 100%; background: transparent"
+        <div
-      >
+          class="header-line"
-        <el-table-column
+          style="margin: 8px 0 16px; display: flex; align-items: center">
-          v-for="item in tableProps"
+          <h2 class="" style="margin: 0; color: #0ee8fe; margin-right: 5px">
-          :key="item.prop"
+            生产良品率
-          :show-overflow-tooltip="item.showOverflowtooltip"
+          </h2>
-          v-bind="item"
+          <Switcher :showTitle='["班次详情","班次详情"]' @emitFun='changeType'/>
-        >
+          <div style="width: 169px;">
-          <template slot-scope="scope">
+            <span class="lgd lgd-total">总量</span>
-            <component :is="item.subcomponent" v-if="item.subcomponent" :inject-data="{...scope.row, ...item}" @emitData="emitData" />
+            <span class="lgd lgd-day" v-show='chartType'>白班</span>
-            <span v-else>{{ scope.row[item.prop] | commonFilter(item.filter) }}</span>
+            <span class="lgd lgd-night" v-show='chartType'>夜班</span>
-          </template>
+          </div>
-        </el-table-column>
+          <div>
-        <slot name="content" />
+            <SelectorBtnGroup :options="['日', '周', '月', '年']" @emitFun='toggleDate' :active='chartTime'/>
-      </el-table>
+          </div>
+        </div>
+        <div class="chart" style="height: 230px;">
+          <YieldRateChart :chartTime='chartTime' :chartType='chartType'/>
+        </div>
+      </div>
     </Container>
   </div>
 </template>
 <script>
-const tableProps = [
+import Container from '../components/Container'
-    {
+import ScrollBoard from '../components/ScrollBoard'
-      prop: 'time',
+import KilnLine from '../components/line'
-      label: '添加时间',
+import Switcher from '../components/Switcher'
-      filter: parseTime,
+import SelectorBtnGroup from '../components/SelectorBtnGroup';
-      minWidth: 140
+import YieldRateChart from '../components/YieldRateChart'
-    },
-    {
-      prop: 'name',
-      label: '订单名称',
-      minWidth: 120,
-      showOverflowtooltip: true
-    },
-    {
-      prop: 'code',
-      label: '订单编码',
-      minWidth: 180
-    },
-    {
-      prop: 'customerId',
-      label: '客户',
-      showOverflowtooltip: true
-    }
-  ]
-import Container from '../components/Container';
-import { parseTime } from '@/utils/ruoyi'
 export default {
   name: 'YieldRate',
-  filters: {
+  components: { Container, ScrollBoard, KilnLine, Switcher, SelectorBtnGroup, YieldRateChart },
-    commonFilter: (source, filterType = a => a) => {
+  computed: {
-      return filterType(source)
+    yieldRateTable() {
+      return this.$store.state.websocket.yieldRateTable
     }
   },
-  components: { Container },
   data() {
     return {
-      tableProps,
+      config: {
-      list:[
+        header: ['产线', '一等率', '二等率','成品率','废品率'],
-        {time: '2023-12-12', name: '名称名称'},
+        // headerHeight: '17',
-        // {time: '2023-12-13', name: '名称名称'},
+        headerBGC: 'rgba(32, 55, 96, 0.8)',
-        // {time: '2023-12-14', name: '名称名称'},
+        oddRowBGC: 'rgba(32, 55, 96, 0.8)',
-        // {time: '2023-12-15', name: '名称名称'},
+        evenRowBGC: 'rgba(14, 32, 62, 0.8)',
-        // {time: '2023-12-16', name: '名称名称'},
+        columnWidth: [60],
-        // {time: '2023-12-17', name: '名称名称'},
+        align: ['center'],
-        // {time: '2023-12-18', name: '名称名称'},
+        data: [
-        // {time: '2023-12-19', name: '名称名称'},
+          [1, '产线1', '49%', '', ''],
-        // {time: '2023-12-20', name: '名称名称'},
+          [2, '产线2', '49%', '', ''],
-        // {time: '2023-12-21', name: '名称名称'}
+          [3, '产线3', '49%', '', ''],
-      ]
+          [4, '产线4', '49%', '', ''],
+          [5, '产线5', '49%', '', '']
+        ],
+        rowNum: 5
+      },
+      chartType:false,
+      chartTime: "日"
     }
   },
+  watch:{
+    yieldRateTable: {
+			handler(newVal, oldVal) {
+        let outArr = this.yieldRateTable.map((item) => [
+          item.lineName,
+          item.first,
+          item.second,
+          item.product,
+          item.waste
+      ]);
+        this.config.data = outArr
+        this.$refs['yieldRateScrollBoard'].updateRows(outArr)
+			}
+		}
+  },
   methods: {
-    setRowStyle(v) {
+    changeType(val) {
-      if (v.rowIndex % 2 === 0) {
+      this.chartType = val
-        return {
+    },
-          background: 'rgba(11, 84, 153, 1)',
+    // 切换时间
-          color: 'rgba(255,255,255,0.8)',
+		toggleDate(val) {
-          height: '40px',
+			this.chartTime = val
-          lineHeight: '40px',
+		}
-          padding: 0,
-          fontSize: '16px'
-        }
-      } else {
-        return {
-          background: 'rgba(4, 74, 132, 1)',
-          color: 'rgba(255,255,255,0.8)',
-          height: '40px',
-          lineHeight: '40px',
-          padding: 0,
-          fontSize: '16px'
-        }
-      }
-    }
   }
 }
 </script>
-<style lang='scss'>
+<style lang='scss' scoped>
-.aaa {
+.lgd {
-  .el-table {
+	color: #fff;
-    border: 0;
-  }
-  .el-table::before,.el-table--border::after {
-    background-color: transparent;
-  }
-  .el-table th,td{
-    border-color: #0D1728 !important;
-    padding: 0;
-  }
-  .el-table tr {
-    background: transparent;
-  }
-  .el-table__row:hover > td {
-    background-color: rgba(79,114,136,0.29) !important;
-    }
 
-  .el-table__row--striped:hover > td {
+	&:not(:last-child) {
-    background-color: rgba(79,114,136,0.29) !important;
+		margin-right: 12px;
-  }
+	}
+}
+
+.lgd::before {
+	content: '';
+	display: inline-block;
+	width: 8px;
+	height: 8px;
+	margin-right: 4px;
+	border-radius: 2px;
+}
+
+.lgd.lgd-total::before {
+	background-color: #ff9e00;
+}
+
+.lgd.lgd-day::before {
+	background-color: #08d8cd;
+}
+
+.lgd.lgd-night::before {
+	background-color: #0b58ff;
 }
 </style>

src/views/monitoring/equipmentFullParams/index.vue

@@ -51,10 +51,10 @@ export default {
 	components: {},
 	props: {},
 	data() {
-		const now = new Date();
+		// const now = new Date().getTime();
 		// const [y, m, d] = [now.getFullYear(), now.getMonth(), now.getDate()];
 		const today = new Date().getTime();
-		const tenminAgo = today - (10 * 60 * 1000);
+		const tenminAgo = new Date(today - (10 * 60 * 1000)).getTime();
 		return {
 			searchBarFormConfig: [
 				{
@@ -77,7 +77,7 @@ export default {
 					dateType: 'datetimerange', // datetimerange
 					format: 'yyyy-MM-dd HH:mm:ss',
 					// valueFormat: 'yyyy-MM-dd HH:mm:ss',
-					valueFormat: 'timestamp',
+					valueFormat: 'yyyy-MM-dd HH:mm:ss',
 					rangeSeparator: '-',
 					startPlaceholder: '开始时间',
 					endPlaceholder: '结束时间',
@@ -94,8 +94,8 @@ export default {
 				},
 			],
 			queryParams: {
-				id: null,
+				equipmentId: null,
-				time: [tenminAgo, today],
+				recordTime: [parseTime(tenminAgo), parseTime(today)],
 			},
 			tableList: [
 				// {
@@ -118,7 +118,7 @@ export default {
 	beforeRouteEnter(to, from, next) {
 		if (Object.keys(to.params).length > 0) {
 			next((vm) => {
-				vm.$set(vm.queryParams, 'id', to.params.equipmentId);
+				vm.$set(vm.queryParams, 'equipmentId', to.params.equipmentId);
 				vm.$set(
 					vm.searchBarFormConfig[0],
 					'defaultSelect',
@@ -132,7 +132,7 @@ export default {
 				vm.$set(
 					vm.searchBarFormConfig[2],
 					'defaultSelect',
-					vm.queryParams.time
+					vm.queryParams.recordTime
 				);
 				vm.handleQuery();
 			});
@@ -167,7 +167,7 @@ export default {
 	},
 	beforeRouteLeave(to, from, next) {
 		// clean job
-		this.$set(this.queryParams, 'id', null);
+		this.$set(this.queryParams, 'equipmentId', null);
 		this.$set(this.searchBarFormConfig[0], 'defaultSelect', null);
 		this.$set(this.searchBarFormConfig[1], 'defaultSelect', null);
 		this.tableList = [];
@@ -204,7 +204,7 @@ export default {
 				props.push({
 					label: item.name,
 					prop: item.name,
-					width: 128,
+					// width: 128,
 				});
 				firstLineData[item.name] = `${item.minValue ?? ''}-${
 					item.maxValue ?? ''
@@ -280,14 +280,15 @@ export default {
 
 		async handleSearchBarBtnClick({ btnName, timeVal }) {
 			if (timeVal && timeVal.length > 0) {
-				if (timeVal[1] - timeVal[0] <= 10 * 60 * 1000) {
+				console.log('nihc ', timeVal)
-					this.queryParams.time = timeVal;
+				if (new Date(timeVal[1]).getTime() - new Date(timeVal[0]).getTime() <= 10 * 60 * 1000) {
+					this.queryParams.recordTime = timeVal;
 					await this.handleQuery();
 				} else {
 					this.$message.warning('时间范围最大一小时限制！')
 				}
 			} else {
-				this.queryParams.time = [];
+				this.queryParams.recordTime = [];
 				this.$message.warning('时间段必选！')
 			}
 			

src/websocket/wsInterface.js

@@ -6,7 +6,7 @@ import store from "@/store";
 const timestr = new Date().getTime()
 const dcsConn = new WsConnect(
   // websocket地址
-  'ws://10.70.180.10:8081/xc-screen/websocket/dcsmsg'+timestr,
+  process.env.VUE_APP_Socket_Dcs_API + '/xc-screen/websocket/dcsmsg'+timestr,
   // 传递给后台的数据
   '',
   (data) => {
@@ -39,7 +39,7 @@ const dcsConn = new WsConnect(
 )
 // ISRA
 const mesIsra = new WsConnect(
-  'ws://10.70.2.2:8080/websocket/message?userId=KILN'+timestr,
+  process.env.VUE_APP_Socket_API + '/websocket/message?userId=KILN'+timestr,
   '',
   (data) => {
     // console.log('mes ISRA成功的回调函数, 接收到的data数据: ', data)
@@ -51,10 +51,6 @@ const mesIsra = new WsConnect(
         store.dispatch({type: "websocket/setIsraKiln", payload:msgData.detData.dayStatistic})
         break;
       }
-      // case "KilnInfo": {
-      //   // store.dispatch({type: "websocket/setKilnInfo", payload: msgData.data.kilnInfo})
-      //   break;
-      // }
       default:
     }
   },
@@ -65,7 +61,7 @@ const mesIsra = new WsConnect(
 
 // 原料 MA
 const mesMA = new WsConnect(
-  'ws://10.70.2.2:8080/websocket/message?userId=MA'+timestr,
+  process.env.VUE_APP_Socket_API + '/websocket/message?userId=MA'+timestr,
   '',
   (data) => {
     // console.log('mes 原料成功的回调函数, 接收到的data数据: ', data)
@@ -76,10 +72,6 @@ const mesMA = new WsConnect(
         store.dispatch({type: "websocket/setMaterial", payload:msgData.data})
         break;
       }
-      // case "KilnInfo": {
-      //   // store.dispatch({type: "websocket/setKilnInfo", payload: msgData.data.kilnInfo})
-      //   break;
-      // }
       default:
     }
   },
@@ -90,7 +82,7 @@ const mesMA = new WsConnect(
 // 能耗 EN
 const mesEN = new WsConnect(
   // websocket地址
-  'ws://10.70.2.2:8080/websocket/message?userId=ENERGY'+timestr,
+  process.env.VUE_APP_Socket_API + '/websocket/message?userId=ENERGY'+timestr,
   // 传递给后台的数据
   '',
   // 成功拿到后台返回的数据的回调函数
@@ -122,7 +114,7 @@ const mesEN = new WsConnect(
 // 烟气 GAS
 const mesGAS = new WsConnect(
   // websocket地址
-  'ws://10.70.2.2:8080/websocket/message?userId=GAS'+timestr,
+  process.env.VUE_APP_Socket_API + '/websocket/message?userId=GAS'+timestr,
   // 传递给后台的数据
   '',
   // 成功拿到后台返回的数据的回调函数
@@ -153,7 +145,7 @@ const mesGAS = new WsConnect(
 // 缺陷分类/统计 IS
 const mesIS = new WsConnect(
   // websocket地址
-  'ws://10.70.2.2:8080/websocket/message?userId=IS'+timestr,
+  process.env.VUE_APP_Socket_API + '/websocket/message?userId=IS'+timestr,
   // 传递给后台的数据
   '',
   // 成功拿到后台返回的数据的回调函数
@@ -164,6 +156,7 @@ const mesIS = new WsConnect(
     switch (msgData?.type) {
       case "isra": {
         store.dispatch({type: "websocket/setDefectChart", payload:{
+          checkType: msgData.detData.checkType,
           dayStatistic: msgData.detData.dayStatistic,
           weekStatistic: msgData.detData.weekStatistic,
           monthStatistic: msgData.detData.monthStatistic,
@@ -180,11 +173,10 @@ const mesIS = new WsConnect(
   }
 )
 
-// 产线产量及良品率 SJG
+// 深加工生产运行驾驶舱（除能源） SJG
 const mesSJG = new WsConnect(
   // websocket地址
-  // 'ws://10.70.2.2:8080/websocket/message?userId=SJG'+timestr,
+  process.env.VUE_APP_Socket_API + '/websocket/message?userId=SJG'+timestr,
-  'ws://192.168.1.104:48082/websocket/message?userId=SJG'+timestr,
   // 传递给后台的数据
   '',
   // 成功拿到后台返回的数据的回调函数
@@ -197,6 +189,18 @@ const mesSJG = new WsConnect(
         store.dispatch({type: "websocket/setProductline", payload:msgData.detData})
         break;
       }
+      case "equipment": {
+        store.dispatch({type: "websocket/setSJGEq", payload:msgData.detData})
+        break;
+      }
+      case "order": {
+        store.dispatch({type: "websocket/setWorkOrder", payload:msgData.detData})
+        break;
+      }
+      case "defectSum": {
+        store.dispatch({type: "websocket/setDefectSum", payload:msgData.detData})
+        break;
+      }
       default:
     }
   },
@@ -206,6 +210,76 @@ const mesSJG = new WsConnect(
   }
 )
 
+// 订单完成情况 OV
+const mesOV = new WsConnect(
+  // websocket地址
+  process.env.VUE_APP_Socket_API + '/websocket/message?userId=OV'+timestr,
+  // 'ws://192.168.0.33:48082/websocket/message?userId=OV'+timestr,
+  // 传递给后台的数据
+  '',
+  // 成功拿到后台返回的数据的回调函数
+  (data) => {
+    // console.log('mes 产线产量及良品率成功的回调函数, 接收到的data数据: ', data)
+    let msgData = JSON.parse(data)
+    if (msgData == null) return;
+    switch (msgData?.type) {
+      case "order": {
+        store.dispatch({type: "websocket/setOrder", payload:msgData.detData})
+        break;
+      }
+      default:
+    }
+  },
+  // websocket连接失败的回调函数
+  (err) => {
+    console.log('失败的回调函数', err)
+  }
+)
+
+// 本日生产良品率 CUTTING
+const mesCUTTING = new WsConnect(
+  // websocket地址
+  process.env.VUE_APP_Socket_API + '/websocket/message?userId=CUTTING'+timestr,
+  // 传递给后台的数据
+  '',
+  // 成功拿到后台返回的数据的回调函数
+  (data) => {
+    // console.log('mes 产线产量及良品率成功的回调函数, 接收到的data数据: ', data)
+    let msgData = JSON.parse(data)
+    if (msgData == null) return;
+    console.log(msgData)
+    switch (msgData?.type) {
+      case "cutting": {
+        if (msgData?.name === 'table') {
+          store.dispatch({type: "websocket/setYieldRateTable", payload:msgData.data})
+          return
+        }
+        if (msgData?.dateType === 'day') {
+          store.dispatch({type: "websocket/setCutChartDay", payload:msgData.detData})
+          return
+        }
+        if (msgData?.dateType === 'weekly') {
+          store.dispatch({type: "websocket/setCutChartWeek", payload:msgData.detData})
+          return
+        }
+        if (msgData?.dateType === 'month') {
+          store.dispatch({type: "websocket/setCutChartMonth", payload:msgData.detData})
+          return
+        }
+        if (msgData?.dateType === 'year') {
+          store.dispatch({type: "websocket/setCutChartYear", payload:msgData.detData})
+          return
+        }
+        break;
+      }
+      default:
+    }
+  },
+  // websocket连接失败的回调函数
+  (err) => {
+    console.log('失败的回调函数', err)
+  }
+)
 
 export const getDcsMsg = () => {
   dcsConn.createWebSoket()
@@ -214,7 +288,9 @@ export const getDcsMsg = () => {
   mesEN.createWebSoket()
   mesGAS.createWebSoket()
   mesIS.createWebSoket()
-  // mesSJG.createWebSoket()
+  mesSJG.createWebSoket()
+  mesOV.createWebSoket()
+  mesCUTTING.createWebSoket()
 }
 export const closeDcsMsg = () => {
   dcsConn.closeWebsocket()
@@ -223,5 +299,7 @@ export const closeDcsMsg = () => {
   mesEN.closeWebsocket()
   mesGAS.closeWebsocket()
   mesIS.closeWebsocket()
-  // mesSJG.closeWebsocket()
+  mesSJG.closeWebsocket()
+  mesOV.closeWebsocket()
+  mesCUTTING.closeWebsocket()
 }