merge test

.env.dev

@@ -1,7 +1,7 @@
 ###
  # @Author: Do not edit
  # @Date: 2023-08-29 09:40:39
- # @LastEditTime: 2023-12-29 08:57:36
+ # @LastEditTime: 2024-01-09 16:27:57
  # @LastEditors: zhp
  # @Description:
 ###
@@ -14,6 +14,7 @@ VUE_APP_TITLE = MES系统
 # 芋道管理系统/开发环境
 # VUE_APP_BASE_API = 'http://100.64.0.26:48082'
 # VUE_APP_BASE_API = 'http://10.70.2.2:8080'
+VUE_APP_BASE_API = 'http://192.168.0.33:48082'
 # VUE_APP_BASE_API = 'http://192.168.4.173:48080'
 # VUE_APP_BASE_API = 'http://192.168.2.173:48080'
 # VUE_APP_BASE_API = 'http://192.168.1.49:48082'
@@ -22,8 +23,15 @@ VUE_APP_TITLE = MES系统
 # VUE_APP_BASE_API = 'http://192.168.1.104:48082'
 # VUE_APP_BASE_API = 'http://192.168.0.33:48082'
 # VUE_APP_BASE_API = 'http://192.168.1.62:48082'
-VUE_APP_BASE_API = 'http://192.168.1.78:48082'
+# VUE_APP_BASE_API = 'http://192.168.1.78:48082'
 
+# VUE_APP_BASE_API = 'http://192.168.1.78:48082'
+# socket地址
+# dcs地址
+VUE_APP_Socket_Dcs_API = 'ws://10.70.180.10:8081'
+# socket地址
+VUE_APP_Socket_API = 'ws://10.70.2.2:8080'
+# VUE_APP_Socket_API = 'ws://192.168.0.33:48082'
 # 积木报表指向地址
 VUE_APP_JIMU_API = 'http://10.70.2.22:8080'
 

.env.stage

@@ -12,7 +12,7 @@ VUE_APP_JIMU_API = 'http://192.168.0.33:48082'
 
 
 # 根据服务器或域名修改
-PUBLIC_PATH = 'http://192.168.0.33:8889/'
+PUBLIC_PATH = ''
 
 # 二级部署路径
 # VUE_APP_APP_NAME ='yudao-admin'

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",
@@ -80,6 +81,7 @@
     "vue-plugin-hiprint": "0.0.54-fix",
     "vue-quill-editor": "^3.0.6",
     "vue-router": "3.4.9",
+    "vue-seamless-scroll": "^1.1.23",
     "vue-video-player": "^5.0.2",
     "vuedraggable": "2.24.3",
     "vuex": "3.6.2",

src/layout/components/TagsView/index.vue

@@ -48,6 +48,7 @@
 <script>
 import ScrollPane from './ScrollPane';
 import path from 'path';
+import { getDcsMsg, closeDcsMsg } from "@/websocket/wsInterface"
 
 export default {
 	components: { ScrollPane },
@@ -58,6 +59,7 @@ export default {
 			left: 0,
 			selectedTag: {},
 			affixTags: [],
+			wsIsOpen: false
 		};
 	},
 	computed: {
@@ -83,6 +85,27 @@ export default {
 				document.body.removeEventListener('click', this.closeMenu);
 			}
 		},
+		visitedViews(newVal, oldVal){
+			let num = 0
+			newVal && newVal.map(item => {
+				if (item.path === '/databoard/kiln' || item.path === '/databoard/whole-plant' || item.path === '/databoard/deep-processing') {
+					num++
+				}
+			})
+			if (num > 0) {
+				if(!this.wsIsOpen) {
+					getDcsMsg()
+					this.wsIsOpen = true
+					console.log('开启websocket==========')
+				}
+			}else{
+				if (this.wsIsOpen) {
+					closeDcsMsg()
+					this.wsIsOpen = false
+					console.log('关闭============')
+				}
+			}
+		}
 	},
 	mounted() {
 		this.initTags();

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 { scrollBoard } from '@jiaminghi/data-view'
 
 import './assets/icons'; // icon
 import './permission'; // permission control
@@ -78,8 +79,10 @@ Vue.use(CodeBrickZj)
 Vue.use(directive);
 Vue.use(plugins);
 Vue.use(VueMeta);
+// Vue.use(scrollBoard)
 // Vue.use(hljs.vuePlugin);
-
+import scroll from 'vue-seamless-scroll'
+Vue.use(scroll)
 // bpmnProcessDesigner 需要引入
 import MyPD from '@/components/bpmnProcessDesigner/package/index.js';
 Vue.use(MyPD);

src/store/modules/websocket.js

@@ -1,10 +1,90 @@
 const state = {
   fanFrequencyInfo:{},// 分机运行频率
   kilnInfo:{},// 窑炉信息
-  gasInfo:{},// 天然气
+  gasInfo:{},// 天然气流量图
+  sumGasInfo: {},// 天然气总量
 
-  israKiln:[],// ISRA缺陷检测
-  material:[]// 原料
+  israKiln:[],// ISRA窑炉缺陷检测
+  material:[],// 原料
+  energyInfo: {
+    elecQty1: '',
+    elecQty2: '',
+    waterQty: ''
+  }, // 能耗
+  energyWeekTrend:[],
+  energyMonthTrend:[],
+  energyYearTrend:[],// 能耗图
+  energyMonitoring: [], // 能源监控
+  exhaustGasInfo:{}, // 烟气
+  gasChartDayTrend:{}, // 烟气
+  gasChartWeekTrend:{}, // 烟气
+  gasChartMonthTrend:{}, // 烟气
+  gasChartYearTrend:{}, // 烟气
+  israCheckType: [],
+  israDayStatistic: [],//缺陷统计
+  israWeekStatistic: [],//缺陷统计
+  israMonthStatistic: [],//缺陷统计
+  israYearStatistic: [],//缺陷统计
+  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) => {
@@ -16,6 +96,9 @@ const mutations = {
   SET_GASINFO: (state, gasInfo) => {
     state.gasInfo = gasInfo
   },
+  SET_SUMGASINFO: (state, sumGasInfo) => {
+    state.sumGasInfo = sumGasInfo
+  },
 
 
   SET_ISRAKILN: (state, israKiln) => {
@@ -23,6 +106,74 @@ const mutations = {
   },
   SET_MATERIAL: (state, material) => {
     state.material = material
+  },
+  SET_ENERGYINFO: (state, energyInfo) => {
+    if (Object.keys(energyInfo).length > 1) {
+      state.energyInfo.elecQty1 = energyInfo.elecQty1
+      state.energyInfo.elecQty2 = energyInfo.elecQty2
+    } else {
+      state.energyInfo.waterQty = energyInfo.waterQty
+    }
+  },
+  SET_ENERGYTREND: (state, energyTrend) => {
+    if (energyTrend.week.length > 0) {
+      state.energyWeekTrend = energyTrend.week
+    }
+    if (energyTrend.month.length > 0) {
+      state.energyMonthTrend = energyTrend.month
+    }
+    if (energyTrend.year.length > 0) {
+      state.energyYearTrend = energyTrend.year
+    }
+  },
+  SET_ENERGY_MONITORING: (state, energyMonitoring) => {
+    state.energyMonitoring = energyMonitoring
+  },
+  SET_EXHAUSTGASINFO: (state, exhaustGasInfo) => {
+    state.exhaustGasInfo = exhaustGasInfo
+  },
+  SET_EXHAUSTGASCHART: (state, exhaustGasChart) => {
+    state.gasChartDayTrend = exhaustGasChart.dayTrend
+    state.gasChartWeekTrend = exhaustGasChart.weekTrend
+    state.gasChartMonthTrend = exhaustGasChart.monthTrend
+    state.gasChartYearTrend = exhaustGasChart.yearTrend
+  },
+  SET_DEFECTCHART: (state, israStatistic) => {
+    state.israCheckType = israStatistic.checkType
+    state.israDayStatistic = israStatistic.dayStatistic
+    state.israWeekStatistic = israStatistic.weekStatistic
+    state.israMonthStatistic = israStatistic.monthStatistic
+    state.israYearStatistic = israStatistic.yearStatistic
+  },
+  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 = {
@@ -35,6 +186,9 @@ const actions = {
   setGasInfo({ commit }, gasInfo) {
     commit('SET_GASINFO', gasInfo.payload)
   },
+  setSumGasInfo({ commit }, sumGasInfo) {
+    commit('SET_SUMGASINFO', sumGasInfo.payload)
+  },
 
 
   setIsraKiln({ commit }, israKiln) {
@@ -43,6 +197,54 @@ const actions = {
   setMaterial({ commit }, material) {
     commit('SET_MATERIAL', material.payload)
   },
+  setEnergyInfo({ commit }, energyInfo) {
+    commit('SET_ENERGYINFO', energyInfo.payload)
+  },
+  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)
+  },
+  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

@@ -201,3 +201,11 @@ input, textarea{
 .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/OperationalOverview/AGVBoard.vue

@@ -2,7 +2,7 @@
  * @Author: zwq
  * @Date: 2021-07-19 15:18:30
  * @LastEditors: zhp
- * @LastEditTime: 2023-11-23 11:14:30
+ * @LastEditTime: 2024-01-08 16:07:58
  * @Description:
 -->
 <template>
@@ -12,7 +12,7 @@
       lineHeight: 88 + 'px',
       fontSize: 31 + 'px'
     }">
-      <img src="../../assets/img/logo.png" style="width:1.1em;position:relative;top:.4em" alt="">
+      <img src="../../assets/img/logo.png" style="width:1.1em;position:relative;top:.22em" alt="">
       许昌安彩AGV原片周转看板
       <h3 class="unit">单位：河南汇融科技服务有限公司</h3>
       <h3 class="time">{{ times }}</h3>
@@ -29,13 +29,13 @@
     <el-row class="container-main flex-col" type="flex">
       <el-row :style="{ padding: '0 ' + 9 + 'px' }" :gutter="15 * beilv" type="flex" class="flex-1">
         <el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="12">
-          <base-container :beilv="1" :title="'搬运任务'" :title-icon="'5_1'" :back="'energy'">
-            <base-table1 :page="1" :limit="9" :show-index="false" :beilv="1" :table-config="qualityYearTableProps"
+          <base-container :beilv="1" :size="'middle'" :title="'搬运任务'" :title-icon="'5_1'" :back="'energy'">
+            <base-table1 :page="1" :limit="999" :show-index="false" :beilv="1" :table-config="qualityYearTableProps"
               :table-data="qualityYearList" />
           </base-container>
         </el-col>
         <el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="12">
-          <base-container :beilv="1" :title="'周转进度'" :title-icon="'5_3'" :back="'energy'">
+          <base-container :beilv="1" :size="'middle'" :title="'周转进度'" :title-icon="'5_3'" :back="'energy'">
             <!-- <div style="width: 45%;position: absolute; top: 3em; right: 3em;">
               <top-radio-group />
             </div> -->
@@ -85,13 +85,14 @@
 
       <el-row :style="{ padding: '0 ' + 9 + 'px' }" :gutter="12 * beilv" type="flex" class="flex-1">
         <el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="12">
-          <base-container :beilv="1" :height="256" :title="'库存管理'" :title-icon="'5_5'" :back="'energy'">
+          <base-container :beilv="1" :height="256" :size="'middle'" :title="'库存管理'" :title-icon="'5_5'"
+            :back="'energy'">
             <!-- <div style="width: 45%;position: absolute; top: 3em; right: 3em;">
               <top-radio-group />
             </div> -->
             <!-- <el-row :gutter="9 * beilv"> -->
             <!-- <el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="24"> -->
-                <base-table :page="1" :limit="9" :show-index="false" :beilv="1" :table-config="inventoryTableProps"
+            <base-table :page="1" :limit="999" :show-index="false" :beilv="1" :table-config="inventoryTableProps"
               :table-data="inventoryList" />
             <!-- </el-col> -->
             <!-- <el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="12">
@@ -107,12 +108,13 @@
           </base-container>
         </el-col>
         <el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="12">
-          <base-container :beilv="1" :height="318 + 338 + 16" :title="'库位信息'" :title-icon="'5_4'" :back="'energy'">
+          <base-container :beilv="1" :height="318 + 338 + 16" :size="'middle'" :title="'库位信息'" :title-icon="'5_4'"
+            :back="'energy'">
             <!-- <div style="width: 45%;position: absolute; top: 3em; right: 3em;">
               <top-radio-group />
             </div> -->
             <!-- 像下面这样表格里的limit值，也许可以用js动态计算出来 -->
-            <base-table2 :page="1" :limit="9" :show-index="false" :beilv="1" :table-config="locationTableProps"
+            <base-table2 :page="1" :limit="999" :show-index="false" :beilv="1" :table-config="locationTableProps"
               :table-data="locationList" />
           </base-container>
         </el-col>

src/views/OperationalOverview/coldBoard.vue

@@ -2,7 +2,7 @@
  * @Author: zwq
  * @Date: 2021-07-19 15:18:30
  * @LastEditors: zhp
- * @LastEditTime: 2023-12-29 16:41:18
+ * @LastEditTime: 2024-01-09 15:34:00
  * @Description:
 -->
 <template>
@@ -29,26 +29,26 @@
     <el-row class="container-main flex-col" type="flex">
       <el-row :style="{ padding: '0 ' + 9 + 'px' }" :gutter="15" type="flex" class="flex-1">
         <el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="8">
-          <base-container :title="'切割数据'" :title-icon="'eqAlarm'">
-            <base-table1 :page="1" :limit="9" :show-index="false" :table-config="cutProps"
+          <base-container :title="'切割数据'" :size="'small'" :title-icon="'eqAlarm'">
+            <base-table1 :page="1" :limit="999" :show-index="false" :table-config="cutProps"
               :table-data="cutTableDataList" />
           </base-container>
         </el-col>
 
         <el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="8">
-          <base-container :title="'产量及良率统计'" :title-icon="'productLine'">
+          <base-container :title="'产量及良率统计'" :size="'small'" :title-icon="'energyMonitoring'">
             <!-- <div style="width: 45%;position: absolute; top: 3em; right: 3em;">
               <top-radio-group />
             </div> -->
             <!-- 像下面这样表格里的limit值，也许可以用js动态计算出来 -->
-            <double-y-chart ref="productChart" :id="'doubleYChart'" :name-list="cxNameList" :data-list="cxDataList" :height="359"
-              :show-legend="true" />
+            <double-y-chart ref="productChart" :id="'doubleYChart'" :name-list="cxNameList" :data-list="cxDataList"
+              :height="359" :show-legend="true" />
           </base-container>
         </el-col>
 
         <el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="8">
-          <base-container :title="'ISRA 缺陷数据'" :title-icon="'eqMonitoring'">
-            <base-table1 :page="1" :limit="9" :show-index="false" :table-config="ISRATableProps"
+          <base-container :title="'ISRA 缺陷数据'" :size="'small'" :title-icon="'scrap'">
+            <base-table1 :page="1" :limit="999" :show-index="false" :table-config="ISRATableProps"
               :table-data="ISRAList" />
           </base-container>
         </el-col>
@@ -56,7 +56,7 @@
 
       <el-row :style="{ padding: '0 ' + 9 + 'px' }" :gutter="10" type="flex" class="flex-1">
         <el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="12">
-          <base-container :height="256" :title="'废片 缺陷数据'" :title-icon="'energyMonitoring'">
+          <base-container :height="256" :title="'废片 缺陷数据'" :size="'middle'" :title-icon="'scrap'">
             <!-- <div style="width: 45%;position: absolute; top: 3em; right: 3em;">
               <top-radio-group />
             </div> -->
@@ -78,21 +78,24 @@
           </base-container>
         </el-col>
         <el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="14">
-          <base-container :height="318 + 338 + 16" :title="'设备状态监控'" :title-icon="'scrap'">
+          <base-container :height="318 + 338 + 16" :size="'middle'" :title="'设备状态监控'" :title-icon="'eqMonitoring'">
             <!-- <div style="width: 45%;position: absolute; top: 3em; right: 3em;">
               <top-radio-group />
             </div> -->
             <!-- 像下面这样表格里的limit值，也许可以用js动态计算出来 -->
             <el-col :span="6">
-              <base-table1 :page="1" :limit="9" :show-index="false" :table-config="EqMonitoringPropsFun"
+              <h4 style="margin: 5px 0 5px 0;">融化风机</h4>
+              <base-table1 :page="1" :limit="999" :show-index="false" :table-config="EqMonitoringPropsFun"
                 :table-data="funList" />
             </el-col>
             <el-col :span="6">
-              <base-table1 :page="1" :limit="9" :show-index="false" :table-config="EqMonitoringPropsFun"
+              <h4 style="margin: 5px 0 5px 0;">退火风机</h4>
+              <base-table1 :page="1" :limit="999" :show-index="false" :table-config="EqMonitoringPropsFun"
                 :table-data="annealFunList" />
             </el-col>
             <el-col :span="12" style="float: right;">
-              <base-table1 :page="1" :limit="9" :show-index="false" :table-config="EqMonitoringProps"
+              <h4 style="margin: 5px 0 5px 0;">产线设备</h4>
+              <base-table1 :page="1" :limit="999" :show-index="false" :table-config="EqMonitoringProps"
                 :table-data="realEqList" />
             </el-col>
             <!-- <double-y-chart :id="'doubleYChart'" :name-list="cxNameList" :data-list="cxDataList" :height="359"
@@ -130,6 +133,7 @@ import screenfull from 'screenfull'
 // import BaseVideo from './components/baseVideo.vue'
 import alarmLevel from './components/alarmLevel'
 import pileBarChart from './components/pileBarChart'
+import colorDiv from './components/colorDiv'
 
 // import axios from '@/utils/request'
 import doubleYChart from './components/doubleYChart '
@@ -146,19 +150,16 @@ const EqMonitoringPropsFun = [
   { prop: 'status', label: '运行状态', width: 80}
 ]
 const EqMonitoringProps = [
-  { prop: 'productLine', label: '产线' },
-  { prop: 'equipmentName', label: '设备名称' },
-  { prop: 'equipmentCode', label: '设备编码' },
+  { prop: 'line', label: '产线' },
+  { prop: 'name', label: '设备名称' },
+  { prop: 'code', label: '设备编码' },
   {
-    prop: 'status',
+    prop: 'run',
     label: '运行状态',
-    filter: (val) =>
-      val != null ? ['正常', '计划停机', '故障'][val] : '',
   },
   {
     prop: 'error',
     label: '故障状态',
-    filter: (val) => (val != null ? (val ? '是' : '否') : ''),
   },
 ]
 const cutProps = [
@@ -170,7 +171,10 @@ const cutProps = [
   { prop: 'size', label: '规格' },
   { prop: 'productArea', label: '良品面积', width: 80 },
   { prop: 'wasteArea', label: '废片面积', width: 80 },
-  { prop: 'product', label: '良品率', width: 80 },
+  {
+    prop: 'product', label: '良品率', width: 80,
+    subcomponent: colorDiv,
+  },
 ]
 const cxNameList = ['周一', '周二', '周三', '周四', '周五']
 
@@ -324,7 +328,7 @@ export default {
     this.funInitWebSocket()
     this.CutInitWebSocket()
     this.SJGInitWebSocket()
-
+    // this.getList()
     this.getTimes()
     const _this = this;
     _this.beilv2 = document.documentElement.clientWidth / 1920
@@ -334,7 +338,7 @@ export default {
         this.beilv2 = _this.clientWidth / 1920
       })()
     }
-    this.getList()
+    // this.getList()
     // const _this = this;
     // window.onresize = () => {
     //   return (() => {
@@ -359,30 +363,30 @@ export default {
   //   removeEventListener('resize', resizeFun)
   // },
   methods: {
-    getList() {
-      // this.loading = true;
-      // 执行查询
-      // let data = '{ "data": { "FanFrequencyInfo": { "1#10处拐角冷却风机": "0", "1#L型吊墙冷却风机": "0", "1#助燃风机": "44.8", "1#澄清带池壁风机": "40", "1#融化带池壁风机": "43", "1#钢碹碴小炉垛风机": "48", "2#10处拐角冷却风机": "50", "2#L型吊墙冷却风机": "49.7", "2#助燃风机": "0", "2#澄清带池壁风机": "0", "2#融化带池壁风机": "0", "2#钢碹碴小炉垛风机": "48", "3#澄清带池壁风机": "0", "3#融化带池壁风机": "0", "4#澄清带池壁风机": "40", "4#融化带池壁风机": "43" } }, "type": "FanFrequencyInfo" }'
-      // let obj = JSON.parse(data)
-      // // for()
-      // let arr = []
-      // for (let i in obj.data.FanFrequencyInfo) {
-      //   arr.push({
-      //     equipmentName: i,
-      //     status: obj.data.FanFrequencyInfo[i]
-      //   })
-      // }
-      // this.funList = arr``
-      this.$axios.get(
-        '/monitoring/equipment-monitor/realtime-page',
-        'get',
-        this.queryParams
-      ).then((res) => {
-        this.realEqList = res.data.list;
-        // this.total = response.data.total;
-        // this.loading = false;
-      });
-    },
+    // getList() {
+    //   // this.loading = true;
+    //   // 执行查询
+    //   // let data = '{ "data": { "FanFrequencyInfo": { "1#10处拐角冷却风机": "0", "1#L型吊墙冷却风机": "0", "1#助燃风机": "44.8", "1#澄清带池壁风机": "40", "1#融化带池壁风机": "43", "1#钢碹碴小炉垛风机": "48", "2#10处拐角冷却风机": "50", "2#L型吊墙冷却风机": "49.7", "2#助燃风机": "0", "2#澄清带池壁风机": "0", "2#融化带池壁风机": "0", "2#钢碹碴小炉垛风机": "48", "3#澄清带池壁风机": "0", "3#融化带池壁风机": "0", "4#澄清带池壁风机": "40", "4#融化带池壁风机": "43" } }, "type": "FanFrequencyInfo" }'
+    //   // let obj = JSON.parse(data)
+    //   // // for()
+    //   // let arr = []
+    //   // for (let i in obj.data.FanFrequencyInfo) {
+    //   //   arr.push({
+    //   //     equipmentName: i,
+    //   //     status: obj.data.FanFrequencyInfo[i]
+    //   //   })
+    //   // }
+    //   // this.funList = arr``
+    //   this.$axios.get(
+    //     '/monitoring/equipment-monitor/realtime-page',
+    //     'get',
+    //     this.queryParams
+    //   ).then((res) => {
+    //     this.realEqList = res.data.list;
+    //     // this.total = response.data.total;
+    //     // this.loading = false;
+    //   });
+    // },
     getTimes() {
       setInterval(this.getTimesInterval, 1000);
     },
@@ -414,7 +418,7 @@ export default {
         // const wsUrl = 'ws://192.168.1.74:48080/websocket/message?userId=EN111'
         // const wsUrl = 'ws://192.168.1.104:48082/websocket/message?userId=SJG'
         let date = new Date().valueOf()
-        const SJGWsUrl = `ws://10.70.2.2:8080/websocket/message?userId=COLD${date}`
+        const SJGWsUrl = process.env.VUE_APP_Socket_API + `/websocket/message?userId=COLD${date}`
         this.SJGWebsocket = new WebSocket(SJGWsUrl)
         // 监听 WebSocket 连接
         this.SJGWebsocket.onopen = this.SJGWebsocketOnOpen
@@ -433,7 +437,7 @@ export default {
         // const wsUrl = 'ws://192.168.1.74:48080/websocket/message?userId=EN111'
         // const wsUrl = 'ws://192.168.1.104:48082/websocket/message?userId=SJG'
         let date = new Date().valueOf()
-        const cutWsUrl = `ws://10.70.2.2:8080/websocket/message?userId=CUTTING${date}`
+        const cutWsUrl = process.env.VUE_APP_Socket_API + `/websocket/message?userId=CUTTING${date}`
 
         this.cutWebsocket = new WebSocket(cutWsUrl)
         // 监听 WebSocket 连接
@@ -506,6 +510,14 @@ export default {
     cutWebsocketOnError(e) {
       this.CutInitWebSocket()
     },
+    getSize(str) {
+      console.log(str.match(/\d+(\.\d+)?/g))
+     let size =  str.match(/\d+(\.\d+)?/g).map(ele => {
+        return parseFloat(ele)
+     })
+      console.log(size[0] + '*' + size[1] + '*' + size[2]);
+      return size[0] + '*' + size[1] + '*' + size[2]
+    },
     // 数据接收
     cutWebsocketOnMessage(e) {
       this.cutWsData = e?.data ? JSON.parse(e?.data) : {}
@@ -516,11 +528,10 @@ export default {
             id: ele.id,
             lineName: ele.lineName,
             time: ele.time,
-            size: ele.size,
+            size: this.getSize(ele.size),
             productArea: ele.productArea + '㎡',
             wasteArea: ele.wasteArea + '㎡',
-            product: (ele.product * 100).toFixed(2) + '%'
-
+            product: (ele.product * 100).toFixed(2)
           }
           // }
         });
@@ -572,6 +583,20 @@ export default {
           }
           // }
         });
+      } else if (this.SJGWsData.type === 'equipment') {
+        this.realEqList = this.SJGWsData.detData.map((ele, index) => {
+          // if (ele.progressRate != 1) {
+          return {
+            line: ele.line,
+            name: ele.name,
+            code: ele.code,
+            run: ele.run,
+            error: ele.error,
+            // percent: ele.percent
+          }
+          // }
+        });
+
       }
     },
     windowWidth(value) {
@@ -643,7 +668,7 @@ export default {
     width: 100%;
     background: url('../../assets/img/OperationalOverview/title.png') no-repeat;
     background-size: 100% 100%;
-    color: #00fff0;
+    color: #ffffff;
     text-align: center;
 
     .unit {
@@ -661,7 +686,7 @@ export default {
     }
 
     .title-button {
-      color: #00fff0;
+      color: #ffffff;
       font-size: 20px;
       position: absolute;
     }

src/views/OperationalOverview/components/baseContainer/index.vue

@@ -2,13 +2,13 @@
  * @Author: gtz
  * @Date: 2022-01-19 15:58:17
  * @LastEditors: zhp
- * @LastEditTime: 2023-11-14 13:28:27
+ * @LastEditTime: 2024-01-08 16:03:05
  * @Description: file content
  * @FilePath: \mt-bus-fe\src\views\OperationalOverview\components\baseContainer\index.vue
 -->
 <template>
   <div class="base-container" ref="baseContainer" :style="{ height: '100%', fontSize: 12 + 'px', padding: 12 + 'px' }"
-    :class="{ 'no-padding': noPadding, 'border-none': !showLine }">
+    :class="[{ 'no-padding': noPadding, 'border-none': !showLine }, 'base-container__' + size]">
     <!-- <div class="base-container" :style="{height: height + 'px', fontSize: 12 + 'px', padding: 12 + 'px'}"> -->
     <template v-if="showLine">
       <div class="line" />
@@ -74,6 +74,10 @@ export default {
     beilv: {
       type: Number,
       default: 1
+    },
+    size: {
+      type: String,
+      default: ''
     }
   },
   data() {
@@ -106,8 +110,25 @@ export default {
   // background-color: rgba($color: #061027, $alpha: 0.15);
   position: relative;
   // border: 2px solid;
-    background: url('../../../../assets/img/energy.png') no-repeat;
+    // background: url('../../../../assets/img/energy.png') no-repeat;
+    // background-size: 100% 100%;
+      &__small {
+          background: url(../../../../assets/img/short.png) no-repeat;
           background-size: 100% 100%;
+          // background-position: 0 0;
+        }
+
+        &__middle {
+          background: url(../../../../assets/img/middle.png) no-repeat;
+          background-size: 100% 100%;
+          // background-position: 0 0;
+        }
+
+        &__large {
+          background: url(../../../../assets/img/high.png) no-repeat;
+          background-size: 100% 100%;
+          // background-position: 0 0;
+        }
   //   border-radius: 40px 0px 40px 0px;
   // border-image: linear-gradient(360deg, rgba(157, 246, 254, 0.05), rgba(100, 233, 252, 0.9)) 2 2;
   // .line {
@@ -170,8 +191,8 @@ export default {
 
   .bar-title {
     width: 100%;
-    color: #52fff1;
-    font-size: 1.5em;
+    color: #ffffff;
+    font-size: 1.6em;
     padding: 0.67em;
   }
 

src/views/OperationalOverview/components/baseTable.vue

@@ -1,46 +1,44 @@
 <!--
  * @Date: 2020-12-14 09:07:03
  * @LastEditors: zhp
- * @LastEditTime: 2023-12-28 09:00:44
+ * @LastEditTime: 2024-01-08 14:09:05
  * @FilePath: \mt-bus-fe\src\views\OperationalOverview\components\baseTable.vue
  * @Description:
 -->
 <template>
-  <div class="visual-base-table-container">
-    <el-table
-      v-loading="isLoading"
-      :header-cell-style="{background:'rgba(4, 74, 132, .19)',color:'#fff'}"
-      :row-style="setRowStyle"
-      :data="renderData"
-      border
-      style="width: 100%; background: transparent"
-    >
-      <el-table-column
-        prop="_pageIndex"
-        label="序号"
-        :width="50"
-        align="center"
-      />
-      <el-table-column
-        v-for="item in renderTableHeadList"
-        :key="item.prop"
-        :show-overflow-tooltip="showOverflow"
-        v-bind="item"
-      >
+  <div class="visual-base-table-container scroll_table">
+    <div style="display: inline-block; width: 100%">
+      <el-table class="top" v-loading="isLoading"
+        :header-cell-style="{ background: 'rgba(32, 55, 96, 1)', color: '#fff', height: '33px', }"
+        :row-style="setRowStyle" :data="renderData" border style="width: 100%; background: transparent">
+        <el-table-column prop="_pageIndex" label="序号" :width="50" align="center" />
+        <el-table-column v-for="item in renderTableHeadList" :key="item.prop" :show-overflow-tooltip="showOverflow"
+          v-bind="item">
           <template slot-scope="scope">
-
-          <component
-            :is="item.subcomponent"
-            v-if="item.subcomponent"
-            :inject-data="{...scope.row, ...item}"
-            @emitData="emitData"
-          />
+            <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>
+      <vue-seamless-scroll :data="renderData" class="seamless-warp" style="width: 100%" :class-option="classOption">
+        <el-table class="bottom" v-loading="isLoading"
+          :header-cell-style="{background:'rgba(4, 74, 132, .19)',color:'#fff',}" :row-style="setRowStyle"
+          :data="renderData" border style="width: 100%; background: transparent">
+          <el-table-column prop="_pageIndex" label="序号" :width="50" align="center" />
+          <el-table-column v-for="item in renderTableHeadList" :key="item.prop" :show-overflow-tooltip="showOverflow"
+            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>
+      </vue-seamless-scroll>
+    </div>
   </div>
 </template>
 <script>
@@ -109,7 +107,19 @@ export default {
       return this.tableConfig.filter((item, index) => {
         return this.selectedBox[index]
       })
-    }
+    },
+    classOption() {
+      return {
+        step: 0.3, // 数值越大速度滚动越快
+        limitMoveNum: 1, // 开始无缝滚动的数据量 this.list
+        hoverStop: true, // 是否开启鼠标悬停stop
+        direction: 1, // 0向下 1向上 2向左 3向右
+        openWatch: true, // 开启数据实时监控刷新dom
+        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
+        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
+        waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
+      };
+    },
   },
   beforeMount() {
     this.selectedBox = new Array(100).fill(true)
@@ -171,16 +181,23 @@ export default {
     background-color: rgba(79,114,136,0.29) !important;
   }
 }
-// .setting {
-//   text-align: right;
-//   padding: 15px;
-//   .setting-box {
-//     width: 100px;
-//   }
-//   i {
-//     color: #aaa;
-//     @extend .pointer;
-//   }
-// }
+</style>
+
+<style lang="scss">
+ .seamless-warp {
+  height: 308px;
+  overflow: hidden;
+}
+ .min {
+  display: flex;
+  width: 100%;
+}
+ .top  .el-table__body-wrapper {
+  display: none;
+}
+ .bottom .el-table__header-wrapper {
+  display: none;
+  width: 100%;
+}
 
 </style>

src/views/OperationalOverview/components/colorDiv.vue

@@ -0,0 +1,44 @@
+<!--
+ * @Date: 2021-02-20 10:45:21
+ * @LastEditors: zhp
+ * @LastEditTime: 2024-01-09 16:16:43
+ * @FilePath: \basic-admin\src\views\EquipmentManager\TypeParamSetting\ColorSqua.vue
+ * @Description:
+-->
+<template>
+  <span :class="[injectData.product <= 91 ? 'orange' : 'white']" >
+    {{ injectData.product + "%" }}
+  </span>
+</template>
+
+<script>
+export default {
+  props: {
+    injectData: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data() {
+    return {
+      color: 'rgba(255,255,255,0.5)',
+    }
+  },
+  mounted() {
+    this.product = this.injectData.product
+  },
+  methods: {
+    emitClick() {
+      console.log(this.injectData)
+    }
+  }
+}
+</script>
+<style  scoped>
+.orange{
+  color:rgba(255, 209, 96, 1)
+}
+.white{
+  color:rgba(255, 255, 255, 0.5)
+}
+</style>

src/views/OperationalOverview/components/doubleYChart .vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: zhp
  * @Date: 2023-09-21 09:06:28
- * @LastEditTime: 2023-12-29 16:18:17
+ * @LastEditTime: 2024-01-09 14:42:02
  * @LastEditors: zhp
  * @Description:
 -->
@@ -89,10 +89,20 @@ export default {
           type: 'bar',
           yAxisIndex: 1,
          itemStyle: {
+           normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#9DD5FF' },
-              { offset: 1, color: '#1295FF' }
-            ])
+               { offset: 0.3, color: '#1295FF' }
+             ]),
+             label: {
+               show: true,		//开启显示
+               position: 'top',	//在上方显示
+               textStyle: {	    //数值样式
+                 color: '#ced1d5',
+                 fontSize: 12
+               }
+             },
+            }
             // barBorderRadius: this.borderRadius
           },
           barWidth: 12,
@@ -100,6 +110,7 @@ export default {
         },
         {
           name: '产线良品率',
+          symbol: 'circle', //变为实心圆
           type: 'line',
           yAxisIndex: 0,
           areaStyle: {
@@ -126,10 +137,10 @@ export default {
           data: passRateList
         }
       ]
-      const colors = ['#5470C6', '#91CC75', '#EE6666']
+      // const colors = ['#5470C6', '#91CC75', '#EE6666']
       this.chart = echarts.init(document.getElementById(this.id))
       this.chart.setOption({
-        color: colors,
+        // color: colors,
         tooltip: {
           trigger: 'axis',
           axisPointer: {
@@ -137,8 +148,8 @@ export default {
           }
         },
         grid: {
-          left: "4%",
-          right: "4%",
+          left: "3%",
+          right: "5%",
           bottom: "3%",
           width: 'auto',
           height: "auto",
@@ -187,11 +198,13 @@ export default {
             type: 'value',
             name: '良品率/%',
             nameTextStyle: {// y轴上方单位的颜色
-              color: '#fff'
+              color: '#fff',
+              align: "left",
             },
             position: 'right',
             alignTicks: true,
             axisLine: {
+              show: true,
               lineStyle: {
                 type: 'solid',
                 color: '#213259', // 左边线的颜色
@@ -227,12 +240,15 @@ export default {
             scale: true,
             type: 'value',
             name: '产量/㎡', // y轴上方的单位
-            nameTextStyle: {// y轴上方单位的颜色
-              color: '#fff'
+            nameTextStyle: {
+              color: "#fff",
+              // fontSize: 10,
+              align: "right",
             },
             position: 'left',
             alignTicks: true,
             axisLine: {
+              show: true,
               lineStyle: {
                 type: 'solid',
                 color: '#213259', // 左边线的颜色

src/views/OperationalOverview/components/linearBarChart.vue

@@ -142,6 +142,7 @@ export default {
             }
           },
           axisLabel: {
+            show: true,    // 是否显示 y 轴
             textStyle: {
               color: 'rgba(255,255,255,0.5)' // 坐标值得具体的颜色
             }

src/views/OperationalOverview/processingBoard.vue

@@ -2,7 +2,7 @@
  * @Author: zwq
  * @Date: 2021-07-19 15:18:30
  * @LastEditors: zhp
- * @LastEditTime: 2023-12-29 15:15:50
+ * @LastEditTime: 2024-01-08 16:06:49
  * @Description:
 -->
 <template>
@@ -12,7 +12,7 @@
       lineHeight: 88 + 'px',
       fontSize: 31 + 'px'
     }">
-      <img src="../../assets/img/logo.png" style="width:1.1em;position:relative;top:.4em" alt="">
+      <img src="../../assets/img/logo.png" style="width:1.1em;position:relative;top:.22em" alt="">
       许昌安彩深加工看板
       <h3 class="unit">单位：河南汇融科技服务有限公司</h3>
       <h3 class="time">{{ times }}</h3>
@@ -27,23 +27,23 @@
       </el-button> -->
     </el-row>
     <el-row class="container-main flex-col" type="flex">
-      <el-row :style="{ padding: '0 ' + 9 + 'px' }" :gutter="15" type="flex" class="flex-1">
-        <el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="8">
-          <base-container :title="'设备报警'" :title-icon="'eqAlarm'">
-            <base-table1 :page="1" :limit="9" :show-index="false" :table-config="qualityYearTableProps"
+      <el-row :style="{ padding: '0 ' + 9 + 'px' }" :gutter="15" type="flex" class="flex-1" style="height: 50%;">
+        <el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="8" height="100%">
+          <base-container :title="'设备报警'" :size="'small'" :height="318" :title-icon="'eqAlarm'">
+            <base-table1 :page="1" :limit="999" :show-index="false" :table-config="qualityYearTableProps"
               :table-data="equipmentList" />
           </base-container>
         </el-col>
 
-        <el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="8">
-          <base-container :title="'各工序缺陷汇总'" :title-icon="'scrap'">
-            <base-table1 :page="1" :limit="9" :show-index="false" :table-config="qualityMonthTableProps"
+        <el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="8" height="100%">
+          <base-container :title="'各工序缺陷汇总'" :size="'small'" :title-icon="'scrap'">
+            <base-table1 :page="1" :limit="999" :show-index="false" :table-config="qualityMonthTableProps"
               :table-data="qualityMonthList" />
           </base-container>
         </el-col>
 
-        <el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="8">
-          <base-container :title="'工单监控'" :title-icon="'eqMonitoring'">
+        <el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="8" height="100%">
+          <base-container :height="318" :size="'small'" :title="'工单监控'" :title-icon="'eqMonitoring'">
             <!-- <div style="width: 45%;position: absolute; top: 3em; right: 3em;">
               <top-radio-group />
             </div> -->
@@ -95,7 +95,7 @@
 
       <el-row :style="{ padding: '0 ' + 9 + 'px' }" :gutter="12" type="flex" class="flex-1">
         <el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="12">
-          <base-container :height="256" :title="'能源监控'" :title-icon="'energyMonitoring'">
+          <base-container :height="256" :size="'middle'" :title="'能源监控'" :title-icon="'energyMonitoring'">
             <!-- <div style="width: 45%;position: absolute; top: 3em; right: 3em;">
               <top-radio-group />
             </div> -->
@@ -117,7 +117,7 @@
           </base-container>
         </el-col>
         <el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="12">
-          <base-container :height="318 + 338 + 16" :title="'产线产量及良品率'" :title-icon="'productLine'">
+          <base-container :height="318 + 338 + 16" :size="'middle'" :title="'产线产量及良品率'" :title-icon="'productLine'">
             <!-- <div style="width: 45%;position: absolute; top: 3em; right: 3em;">
               <top-radio-group />
             </div> -->
@@ -606,7 +606,7 @@ export default {
         'get',
       ).then((res) => {
         // console.log('11111', res);
-        this.qualityMonthList = res.data
+        this.qualityMonthList = res.data ? res.data : []
       })
     },
     getTimes() {
@@ -637,9 +637,9 @@ export default {
       if (typeof (WebSocket) === 'undefined') {
         alert('您的浏览器不支持WebSocket')
       } else {
-        const wsUrl = `ws://10.70.2.2:8080/websocket/message?userId=EN${date}`
-        // const wsUrl = 'ws://192.168.1.104:48082/websocket/message?userId=SJG'
         let date = new Date().valueOf()
+        const wsUrl = process.env.VUE_APP_Socket_API + `/websocket/message?userId=EN${date}`
+        // const wsUrl = 'ws://192.168.1.104:48082/websocket/message?userId=SJG'
         // const wsUrl = 'ws://10.70.2.2:8080/websocket/message?userId=EN111'
         // 实例化 WebSocket
         this.websocket = new WebSocket(wsUrl)
@@ -661,7 +661,8 @@ export default {
         // const wsUrl = 'ws://192.168.1.104:48082/websocket/message?userId=SJG'
         let date = new Date().valueOf()
         // console.log(date);
-        const SJGWsUrl = `ws://10.70.2.2:8080/websocket/message?userId=SJG${date}`
+        console.log(process.env);
+        const SJGWsUrl = process.env.VUE_APP_Socket_API + `/websocket/message?userId=SJG${date}`
         this.SJGWebsocket = new WebSocket(SJGWsUrl)
         // 监听 WebSocket 连接
         this.SJGWebsocket.onopen = this.SJGWebsocketOnOpen
@@ -675,7 +676,7 @@ export default {
     },
     SJGWebsocketOnOpen() {
       console.log('socket连接成功')
-      console.log(this.SJGWebsocket.onmessage);
+      // console.log(this.SJGWebsocket.onmessage);
       this.SJGWebsocket.onmessage()
     },
     // 连接建立失败重连
@@ -686,7 +687,7 @@ export default {
     // 数据接收
     SJGWebsocketOnMessage(e) {
       // console.log(1111, e)
-      this.SJGWsData = JSON.parse(e.data)
+      this.SJGWsData = e?.data ? JSON.parse(e?.data) : {}
       // console.log(this.wsData.detData);
       // console.log('22222', this.wsData.data)
       if (this.SJGWsData.type === 'order') {
@@ -727,7 +728,6 @@ export default {
             }
           })
         })
-        console.log(Array.from(new Set(nameList)))
         // progressRateList = EnergyNameList
         // let EnergyDataList = []
         this.SJGWsData.detData.forEach((ele) => {
@@ -741,7 +741,7 @@ export default {
         // console.log(this.EnergyMonitoringNameList)
         // console.log(this.EnergyMonitoringList)
         // this.$nextTick(() => {
-        this.$refs.productLineChart.initChart(nameList, passRateList, outputNumList)
+        this.$refs.productLineChart.initChart(Array.from(new Set(nameList)), passRateList, outputNumList)
       }
     },
     // 数据发送
@@ -765,7 +765,7 @@ export default {
     // 数据接收
     websocketOnMessage(e) {
       // console.log(1111, e)
-      this.wsData = JSON.parse(e.data)
+      this.wsData = e?.data ? JSON.parse(e?.data) : {}
       // console.log('22222', this.wsData.data)
       if (this.wsData.type === 'EnergyMonitoring') {
         let EnergyNameList = []
@@ -926,6 +926,10 @@ export default {
   background-color: unset;
   background-image: linear-gradient(to right, #4573fe, #47f8dc);
 }
+// ::v-deep .el-progress-bar__outer {
+//   background-color:rgba(71, 248, 220, 1);
+//   // background-image: rgba(71, 248, 220, 1))
+// }
  .visual-select {
    position: absolute;
    right: 1em;
@@ -935,8 +939,6 @@ export default {
 // .container-main {
 //    padding: 5px;
 //  }
-
-
 </style>
 
 <style lang="scss">

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/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,197 @@
+<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: {
+    israCheckType() {
+      return this.$store.state.websocket.israCheckType
+    },
+    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 = this.israDayStatistic
+					this.updateChart()
+				}
+			}
+		},
+    israWeekStatistic: {
+			handler(newVal, oldVal) {
+				if (this.chartTime === '周') {
+          this.tempData = this.israWeekStatistic
+					this.updateChart()
+				}
+			}
+		},
+    israMonthStatistic: {
+			handler(newVal, oldVal) {
+				if (this.chartTime === '月') {
+          this.tempData = this.israMonthStatistic
+					this.updateChart()
+				}
+			}
+		},
+    israYearStatistic: {
+			handler(newVal, oldVal) {
+				if (this.chartTime === '年') {
+          this.tempData = this.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 xData = []
+      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 option = {
+        color: ["#2760FF", "#8167F6", "#5B9BFF", "#99D66C", "#FFD160", "#FF8A40"],
+        grid: { top: 80, 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:this.israCheckType,
+        },
+        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: seriesData
+      };
+      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: 20,
+            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/FlueGas.vue

@@ -0,0 +1,234 @@
+<template>
+	<div class="gas-chart"></div>
+</template>
+
+<script>
+import * as echarts from 'echarts';
+import resize from './../mixins/resize'
+
+export default {
+	name: 'GasChart',
+	mixins: [resize],
+	components: {},
+	props: {
+		chartType: '',
+		chartTime: ''
+	},
+	data() {
+		const colors = [
+			'#12FFF5',
+			'#2760FF',
+			'#FFD160',
+			'#E80091',
+			'#8064ff',
+			'#ff8a3b',
+			'#8cd26d',
+			'#2aa1ff',
+		];
+		return {
+			chart: null
+		};
+	},
+	computed: {
+		gasChartDayTrend() {
+			return this.$store.state.websocket.gasChartDayTrend
+		},
+		gasChartWeekTrend() {
+			return this.$store.state.websocket.gasChartWeekTrend
+		},
+		gasChartMonthTrend() {
+			return this.$store.state.websocket.gasChartMonthTrend
+		},
+		gasChartYearTrend() {
+			return this.$store.state.websocket.gasChartYearTrend
+		}
+	},
+	watch: {
+		gasChartDayTrend: {
+			handler(newVal, oldVal) {
+				if (this.chartTime === '日') {
+					this.updateChart()
+				}
+			}
+		},
+		gasChartWeekTrend: {
+			handler(newVal, oldVal) {
+				if (this.chartTime === '周') {
+					this.updateChart()
+				}
+			}
+		},
+		gasChartMonthTrend: {
+			handler(newVal, oldVal) {
+				if (this.chartTime === '月') {
+					this.updateChart()
+				}
+			}
+		},
+		gasChartYearTrend: {
+			handler(newVal, oldVal) {
+				if (this.chartTime === '年') {
+					this.updateChart()
+				}
+			}
+		},
+		chartType: {// 监听类型变化，更新图
+			handler(newVal, oldVal) {
+				this.updateChart()
+			}
+		},
+		chartTime: {// 监听时间变化，更新图
+			handler(newVal, oldVal) {
+				this.updateChart()
+			}
+		}
+	},
+	mounted() {
+		this.$el.addEventListener('resize', () => {
+			console.log('resziing.....');
+		});
+		this.updateChart()
+	},
+	methods: {
+		updateChart() {
+			let gasName  = ''
+			const colors = ['#FFCB59'];
+			let temp1 = []
+			let temp2 = []
+			let seriesData = []
+			let xData = []
+			let yData = []
+			switch (this.chartTime) {
+				case '日':{
+					temp1 = this.gasChartDayTrend
+					break;
+				}
+				case '周':{
+					temp1 = this.gasChartWeekTrend
+					break;
+				}
+				case '月':{
+					temp1 = this.gasChartMonthTrend
+					break;
+				}
+				case '年':{
+					temp1 = this.gasChartYearTrend
+					break;
+				}
+				default:
+			}
+			switch (this.chartType) {
+				case '氧气含量':{
+					temp2 = temp1?.O2_float || []
+					break;
+				}
+				case '二氧化硫':{
+					temp2 = temp1?.SO2_float || []
+					break;
+				}
+				case '一氧化氮':{
+					temp2 = temp1?.NOX_float || []
+					break;
+				}
+				case '颗粒物':{
+					temp2 = temp1?.dust_float || []
+					break;
+				}
+				default:
+			}
+			temp2.length > 0 && temp2.map(i => {
+				xData.push(i.time)
+				yData.push(i.value)
+			}) 
+			if (yData.length == 0) {
+				seriesData = []
+			}else {
+				seriesData = [{
+					name: gasName,
+					data: yData,
+					type: "line",
+					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
+					},
+					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 = {
+				color: colors,
+				grid: { top: 32, right: 12, bottom: 20, left: 48 },
+				xAxis: {
+					type: 'category',
+					data: xData,
+					axisLabel: {
+						color: '#fff',
+						fontSize: 12,
+					},
+					axisTick: { show: false },
+					axisLine: {
+						lineStyle: {
+							width: 1,
+							color: '#213259',
+						},
+					},
+				},
+				yAxis: {
+					name: '单位m³/h',
+					nameTextStyle: {
+						color: '#fff',
+						fontSize: 10,
+						align: 'right',
+					},
+					type: 'value',
+					axisLabel: {
+						color: '#fff',
+						fontSize: 12,
+					},
+					axisLine: {
+						show: true,
+						lineStyle: {
+							color: '#213259',
+						},
+					},
+					splitLine: {
+						lineStyle: {
+							color: '#213259a0',
+						},
+					},
+				},
+				series: seriesData,
+				tooltip: {
+					trigger: 'axis',
+				},
+			}
+			option && this.chart.setOption(option)
+		}
+	},
+};
+</script>
+
+<style scoped lang="scss">
+.gas-chart {
+	width: 100%;
+	height: 100%;
+}
+</style>

src/views/databoard/components/GasChart.vue

@@ -17,7 +17,10 @@ export default {
 	name: 'GasChart',
 	mixins: [resize],
 	components: {},
-	props: {},
+	props: {
+		chartType: '', // 能源类型
+		chartTime: ''
+	},
 	data() {
 		const colors = [
 			'#12FFF5',
@@ -30,22 +33,155 @@ export default {
 			'#2aa1ff',
 		];
 		return {
-			chart: null,
-			option: {
+			chart: null
+		};
+	},
+	computed: {
+		gasChartMsg() {
+			return this.$store.state.websocket.sumGasInfo
+		},
+		energyWeekTrend() {
+			return this.$store.state.websocket.energyWeekTrend
+		},
+		energyMonthTrend() {
+			return this.$store.state.websocket.energyMonthTrend
+		},
+		energyYearTrend() {
+			return this.$store.state.websocket.energyYearTrend
+		}
+	},
+	watch: {
+		energyWeekTrend: {// 监听周电能，更新图
+			handler(newVal, oldVal) {
+				if (this.chartTime === '周' && this.chartType === '电耗能') {
+					this.updateChart()
+				}
+			}
+		},
+		energyMonthTrend: {// 监听月电能，更新图
+			handler(newVal, oldVal) {
+				if (this.chartTime === '月' && this.chartType === '电耗能') {
+					this.updateChart()
+				}
+			}
+		},
+		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()
+			}
+		},
+		chartType: {// 监听能源类型变化，更新图
+			handler(newVal, oldVal) {
+				this.updateChart()
+			}
+		}
+	},
+	mounted() {
+		this.$el.addEventListener('resize', () => {
+			console.log('resziing.....');
+		});
+		this.updateChart()
+	},
+	methods: {
+		updateChart() {
+			let gasName  = ''
+			const colors = ['#FFCB59'];
+			let temp = []
+			let seriesData = []
+			let xData = []
+			let yData = []
+			switch (this.chartType) {
+				case '电耗能':{
+					gasName = '电耗能'
+					if (this.chartTime === '周') {
+						temp = this.energyWeekTrend || []
+					}else if(this.chartTime === '月') {
+						temp = this.energyMonthTrend || []
+					}else{
+						temp = this.energyYearTrend || []
+					}
+					temp && temp.map(i => {
+						xData.push(i.time)
+						yData.push(i.qty)
+					})
+					break;
+				}
+				case '天然气I':{
+					if (this.chartTime === '周') {
+						yData = this.gasChartMsg.hisSumGas1For7Day || []
+					}else if(this.chartTime === '月') {
+						yData = this.gasChartMsg.sumGas1ForMonth || []
+					}else{
+						yData = this.gasChartMsg.sumGas1ForYear || []
+					}
+					gasName = '天然气I'
+					xData = this.getXdata()
+					break;
+				}
+				default:
+				gasName = '天然气II'
+				if (this.chartTime === '周') {
+						yData = this.gasChartMsg.hisSumGas2For7Day || []
+					}else if(this.chartTime === '月') {
+						yData = this.gasChartMsg.sumGas2ForMonth || []
+					}else{
+						yData = this.gasChartMsg.sumGas2ForYear || []
+					}
+				xData = this.getXdata()
+			}
+			if (yData.length == 0) {
+				seriesData = []
+			}else {
+				seriesData = [{
+					name: gasName,
+					data: yData,
+					type: "line",
+					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
+					},
+					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 = {
 				color: colors,
-				grid: { top: 32, right: 12, bottom: 20, left: 48 },
+				grid: { top: 32, right: 12, bottom: 20, left: 60 },
 				xAxis: {
 					type: 'category',
-					data: Array(7)
-						.fill(1)
-						.map((_, index) => {
-							const today = new Date();
-							const dtimestamp = today - index * 24 * 60 * 60 * 1000;
-							return `${new Date(dtimestamp).getMonth() + 1}.${new Date(
-								dtimestamp
-							).getDate()}`;
-						})
-						.reverse(),
+					data: xData,
 					axisLabel: {
 						color: '#fff',
 						fontSize: 12,
@@ -82,71 +218,49 @@ export default {
 						},
 					},
 				},
-				series: [
-					Array(7)
-						.fill(1)
-						.map((_) => Math.ceil(Math.random() * 100)),
-					Array(7)
-						.fill(1)
-						.map((_) => Math.ceil(Math.random() * 100)),
-					Array(7)
-						.fill(1)
-						.map((_) => Math.ceil(Math.random() * 100)),
-				].map((v, i) => ({
-					name: ['总量', '白班', '夜班'][i],
-					data: v,
-					type: 'line',
-					symbol: 'circle',
-					areaStyle: {
-						color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-							// i % 8 避免超过8个数据时无颜色的问题
-							{ offset: 0, color: colors[i % 8] + '40' },
-							{ offset: 0.5, color: colors[i % 8] + '20' },
-							{ offset: 1, color: colors[i % 8] + '00' },
-						]),
-					},
-				})),
+				series: seriesData,
 				tooltip: {
 					trigger: 'axis',
+					className: "gas-tooltip"
 				},
+			}
+			option && this.chart.setOption(option)
 		},
-		};
-	},
-	computed: {
-		sidebarStatus() {
-			return this.$store.state.app.sidebar.opened;
-		},
-		gasChartMsg() {
-			return this.$store.state.websocket.gasInfo
+		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()
 			}
 		},
-	watch: {
-		sidebarStatus(val) {
-			console.log('sidebarStatus', val);
-			this.chart && this.chart.dispose();
-
-			setTimeout(() => {
-				this.chart = echarts.init(this.$el);
-				this.chart.setOption(this.option);
-			}, 500);
-		},
-		gasChartMsg: {
-			handler(newVal, oldVal) {
-				console.log(newVal)
-				// this.chartData = newVal
-				console.log('newVal============')
-				// this.updateChart()
-			}
+		isLeapYear(year) {
+			return year % 400 == 0 || (year % 4 == 0 && year % 100 != 0);
 		}
 	},
-	mounted() {
-		this.$el.addEventListener('resize', () => {
-			console.log('resziing.....');
-		});
-		this.chart = echarts.init(this.$el);
-		this.chart.setOption(this.option);
-	},
-	methods: {},
 };
 </script>
 
@@ -156,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/ISRAChart.vue

@@ -1,10 +1,3 @@
-<!-- 
-    filename: ISRAChart.vue
-    author: liubin
-    date: 2023-12-12 09:05:25
-    description: 
--->
-
 <template>
 	<div class="isra-chart"></div>
 </template>
@@ -68,9 +61,7 @@ export default {
 	watch: {
 		israChartMsg: {
 			handler(newVal, oldVal) {
-				console.log(newVal)
 				this.chartData = newVal
-				console.log('newVal============')
 				this.updateChart()
 			}
 		}
@@ -99,48 +90,18 @@ export default {
 						color: '#fff',
 					},
 					subtextStyle: {
-						fontSize: 16,
+						fontSize: 20,
 						color: '#fff00',
 					},
 				},
 				series:[{
-						name: 'Access From',
+						name: 'ISRA缺陷检测',
 						type: 'pie',
-						radius: ['45%', '65%'],
+						center: ['50%', '40%'],
+						radius: ['45%', '70%'],
 						avoidLabelOverlap: true,
 						label: {
-							show: true,
-							position: 'outside',
-							formatter: ({ dataIndex, percent }) => {
-								const styleName = ['a', 'b', 'c', 'd'][dataIndex % 4];
-								return `{${styleName}|${percent}%}`;
-							},
-							rich: {
-								a: {
-									color: '#2760ff',
-									fontSize: 24,
-									borderWidth: 0,
-									textBorderWidth: 0,
-								},
-								b: {
-									color: '#518eec',
-									fontSize: 24,
-									borderWidth: 0,
-									textBorderWidth: 0,
-								},
-								c: {
-									color: '#0ee8e4',
-									fontSize: 24,
-									borderWidth: 0,
-									textBorderWidth: 0,
-								},
-								d: {
-									color: '#ddb523',
-									fontSize: 24,
-									borderWidth: 0,
-									textBorderWidth: 0,
-								},
-							},
+							show: false
 						},
 						labelLine: {
 							show: true,

src/views/databoard/components/NumRateChart.vue

@@ -0,0 +1,196 @@
+<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(item.lineName)
+        outputNum.push(item.outputNum)
+        passRate.push(item.passRate*100)
+      })
+      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: xData,
+            axisLabel: {
+              color: "#fff",
+              fontSize: 12,
+            },
+            axisPointer: {
+              type: 'shadow'
+            },
+            axisTick: { show: false },
+            axisLine: {
+              lineStyle: {
+                width: 1,
+                color: "#213259",
+              },
+            },
+          }
+        ],
+        yAxis: [
+          {
+            type: 'value',
+            name: '产量/片',
+            axisLabel: {
+              color: "#fff",
+              fontSize: 12,
+              formatter: '{value}'
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#213259",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "#213259a0",
+              },
+            }
+          },
+          {
+            type: 'value',
+            name: '良品率',
+            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: outputNum
+          },
+          {
+            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: passRate
+          }
+        ]
+      };
+      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/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/SelectorBtnGroup.vue

@@ -11,7 +11,7 @@
 			class="btn"
 			v-for="opt in options"
 			:key="opt"
-			@click="active = opt"
+			@click="clickBtn(opt)"
 			:class="active == opt ? 'btn-active' : ''">
 			{{ opt }}
 		</button>
@@ -22,15 +22,18 @@
 export default {
 	name: 'SelectorBtnGroup',
 	components: {},
-	props: ['options'],
+	props: ['options', 'active'],
 	data() {
 		return {
-			active: this.options[0] || 'default'
+			// active: this.options[0] || 'default'
 		};
 	},
 	computed: {},
 	methods: {
-		
+		clickBtn(opt) {
+			// this.active = opt
+			this.$emit('emitFun', opt)
+		}
 	},
 };
 </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/BottomTwo.vue

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

src/views/databoard/deepProcessing/DefectSum.vue

@@ -0,0 +1,51 @@
+<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>
+<script>
+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/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

@@ -0,0 +1,65 @@
+<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>
+<script>
+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/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/OrderStatus.vue

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

src/views/databoard/deepProcessing/TopThree.vue

@@ -1,22 +1,44 @@
 <template>
 	<div
 		class="top-three"
+		style="flex: 1; display: flex; gap: 20px; padding: 0px 16px;">
+		<div class="left-side" style="flex: 1;">
+			<div
 				style="
 					display: grid;
-			gap: 16px;
-			grid-template-rows: 462px 462px;
+					grid-template-rows: 462px;
 				">
-		<OrderStatus />
-		<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 YieldRate from './YieldRate.vue';
+import WorkOrderMonitoring from './WorkOrderMonitoring';
+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,65 @@
+<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='worderScrollBoard'/>
+      </div>
+    </Container>
+  </div>
+</template>
+<script>
+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/YieldRate.vue

@@ -1,14 +0,0 @@
-<template>
-  <div style="flex: 1;">
-    <Container name="本日生产良品率" size="small" style="">
-      0000987
-    </Container>
-  </div>
-</template>
-<script>
-import Container from '../components/Container.vue';
-export default {
-  name: 'YieldRate',
-  components: { Container },
-}
-</script>

src/views/databoard/deepProcessing/index.vue

@@ -6,10 +6,10 @@
 			class="deepProcessingBoard"
 			style="
 				position: absolute;
-				transform-origin: 16px 8px;
+				transform-origin: left top;
 				font-size: 16px;
-				top: -8px;
-				left: -16px;
+				top: 0px;
+				left: 0px;
 				width: 1920px;
 				height: 1080px;
 				display: flex;
@@ -17,8 +17,19 @@
 				gap: 24px;
 			"
 			:style="{transform:'scale('+scaleNum+')'}">
-			<KHeader :isFullScreen='isFullScreen' @screenfullChange='screenfullChange' topTitle='全厂总览驾驶舱'/>
+			<KHeader :isFullScreen='isFullScreen' @screenfullChange='screenfullChange' topTitle='深加工生产运行驾驶舱'/>
 			<div
+				class="main-body"
+				style="
+					display: grid;
+					gap: 16px;
+					grid-template-rows: 462px 462px;
+				">
+				<TopThree />
+				<BottomTwo />
+			</div>
+
+			<!-- <div
 				class="main-body"
 				style="flex: 1; display: flex; gap: 20px; padding: 0px 16px">
 				<div class="left-side" style="flex: 1">
@@ -27,7 +38,7 @@
 				<div class="middle-side" style="flex: 1">
 					<BottomTwo />
 				</div>
-			</div>
+			</div> -->
 		</div>
 	</div>
 </template>
@@ -103,14 +114,14 @@ export default {
         })
         return false
       }
-      screenfull.toggle(this.$refs.wholePlantContainerB)
+      screenfull.toggle(this.$refs.deepProcessingContainerB)
     },
 		resetSize() {
-      let wholePlantContainerBox = document.querySelector('#wholePlantContainer')
+      let deepProcessingContainer = document.querySelector('#deepProcessingContainer')
       let rw = parseFloat(window.innerWidth)
       let rh = parseFloat(window.innerHeight)
-      let bw = parseFloat(wholePlantContainerBox.style.width)
-      let bh = parseFloat(wholePlantContainerBox.style.height)
+      let bw = parseFloat(deepProcessingContainer.style.width)
+      let bh = parseFloat(deepProcessingContainer.style.height)
 			let wx = 0
 			let hx = 0
 			if (screenfull.isFullscreen) {

src/views/databoard/kiln/EnergeCost.vue

@@ -31,48 +31,74 @@
 					justify-content: space-between;
 				">
 				<SelectorBtnGroup
-					:options="['电耗能', '天然气I', '天然气II']" @emitFun='toggleType'/>
-				<SelectorBtnGroup :options="['周', '月', '年']" @emitFun='toggleDate'/>
+					:options="['电耗能', '天然气I', '天然气II']" @emitFun='toggleType' :active='chartType'/>
+				<SelectorBtnGroup :options="['周', '月', '年']" @emitFun='toggleDate' :active='chartTime'/>
 			</div>
 			<div class="chart" style="height: 200px; margin-top: 8px;">
-				<GasChart />
+				<GasChart :chartType='chartType' :chartTime='chartTime'/>
 			</div>
 		</div>
 	</Container>
 </template>
 
 <script>
-import Container from '../components/Container.vue';
+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.vue';
+import SelectorBtnGroup from '../components/SelectorBtnGroup';
 export default {
 	name: 'EnergeCost',
 	components: {
 		Container,
 		ShadowRect,
 		SplitLine,
-		Switcher,
 		EnergeTop,
 		GasChart,
 		SelectorBtnGroup,
 	},
 	props: {},
 	data() {
-		return {};
+		return {
+			chartType:'电耗能',
+			chartTime:'周'
+		};
+	},
+	computed: {
+		gasInfoMsg() {
+			return this.$store.state.websocket.gasInfo
+		},
 	},
-	computed: {},
 	methods: {
 		// 切换能源
-		toggleType() {
-
+		toggleType(val) {
+			console.log('能源' + val)
+			this.chartType = val
+			// if (val === '天然气I' || val === '天然气II') {
+			// 	if (this.chartTime === '周') {
+			// 		this.chartType = val
+			// 	} else {
+			// 		this.$message.warning('暂无数据')
+			// 	}
+			// }else {
+			// 	this.chartType = val
+			// }
 		},
 		// 切换时间
-		toggleDate() {
-			
+		toggleDate(val) {
+			console.log('时间' + val)
+			this.chartTime = val
+			// if (val === '月' || val === '年') {
+			// 	if (this.chartType === '电耗能') {
+			// 		this.chartTime = val
+			// 	} else {
+			// 		this.$message.warning('暂无数据')
+			// 	}
+			// }else{
+			// 	this.chartTime = val
+			// }
 		}
 	},
 };

src/views/databoard/kiln/EnergeTop.vue

@@ -23,8 +23,7 @@
 				style="
 					font-size: 16px;
 					line-height: 1.55;
-					text-align: right;
-					padding-right: 8px;
+					text-align: center;
 					letter-spacing: 1px;
 				">
 				余热发电
@@ -33,11 +32,10 @@
 				style="
 					font-size: 16px;
 					line-height: 1.55;
-					text-align: right;
-					padding-right: 8px;
+					text-align: center;
 					letter-spacing: 1px;
 				">
-				1023kWh
+				{{energyInfo.elecQty1}}kwh
 			</span>
 		</ShadowRect>
 
@@ -46,14 +44,14 @@
 				style="
 					font-size: 16px;
 					line-height: 1.25;
-					flex: 1.2;
+					flex: 1;
 					text-align: right;
 					padding-right: 8px;
 					letter-spacing: 3px;
 				">
 				<p style="margin: 0; line-height: inherit">水耗量</p>
 			</div>
-			<span style="font-size: 16px; line-height: 1.24; flex: 1">32Km³</span>
+			<span style="font-size: 16px; line-height: 1.24; flex: 1">{{energyInfo.waterQty}}m³</span>
 		</ShadowRect>
 
 		<ShadowRect>
@@ -61,14 +59,14 @@
 				style="
 					font-size: 16px;
 					line-height: 1.25;
-					flex: 1.2;
+					flex: 1;
 					text-align: right;
 					padding-right: 8px;
 					letter-spacing: 3px;
 				">
 				<p style="margin: 0; line-height: inherit">天然气I</p>
 			</div>
-			<span style="font-size: 16px; line-height: 1.24; flex: 1">322Km³</span>
+			<span style="font-size: 16px; line-height: 1.24; flex: 1">{{sumGasInfo.sumGas1Now}}</span>
 		</ShadowRect>
 
 		<ShadowRect>
@@ -76,14 +74,14 @@
 				style="
 					font-size: 16px;
 					line-height: 1.25;
-					flex: 1.2;
+					flex: 1;
 					text-align: right;
 					padding-right: 8px;
 					letter-spacing: 3px;
 				">
 				<p style="margin: 0; line-height: inherit">电耗量</p>
 			</div>
-			<span style="font-size: 16px; line-height: 1.24; flex: 1">132kWh</span>
+			<span style="font-size: 16px; line-height: 1.24; flex: 1">{{energyInfo.elecQty2}}kwh</span>
 		</ShadowRect>
 
 		<ShadowRect>
@@ -91,14 +89,14 @@
 				style="
 					font-size: 16px;
 					line-height: 1.25;
-					flex: 1.2;
+					flex: 1;
 					text-align: right;
 					padding-right: 8px;
 					letter-spacing: 3px;
 				">
 				<p style="margin: 0; line-height: inherit">天然气II</p>
 			</div>
-			<span style="font-size: 16px; line-height: 1.24; flex: 1">992Km³</span>
+			<span style="font-size: 16px; line-height: 1.24; flex: 1">{{sumGasInfo.sumGas2Now}}</span>
 		</ShadowRect>
 	</div>
 </template>
@@ -113,7 +111,14 @@ export default {
 	data() {
 		return {};
 	},
-	computed: {},
+	computed: {
+		sumGasInfo(){
+			return this.$store.state.websocket.sumGasInfo
+		},
+		energyInfo() {
+			return this.$store.state.websocket.energyInfo
+		}
+	},
 	methods: {},
 };
 </script>

src/views/databoard/kiln/FanSequence.vue

@@ -7,13 +7,13 @@
 
 <template>
 	<Container name="风机运行频率" size="middle" style="">
-		<div class="" style="position: absolute; top: 26px; left: 220px">
+		<!-- <div class="" style="position: absolute; top: 26px; left: 220px">
 			<Switcher />
-		</div>
+		</div> -->
 		<div
 			class="absolute"
 			style="
-				padding: 12px;
+				padding: 5px 12px;
 				display: grid;
 				grid-template-columns: repeat(2, 1fr);
 				grid-auto-rows: auto;
@@ -23,7 +23,7 @@
 				<span
 					style="
 						font-size: 18px;
-						line-height: 1.1;
+						line-height: 1.15;
 						flex: 3.5;
 						text-align: right;
 						padding-right: 8px;
@@ -31,7 +31,7 @@
 					">
 					{{ key }}:
 				</span>
-				<span style="font-size: 20px; line-height: 1; flex: 1">
+				<span style="font-size: 20px; line-height: 1.15; flex: 1">
 					{{ value }}Hz
 				</span>
 			</ShadowRect>
@@ -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

@@ -1,10 +1,3 @@
-<!-- 
-    filename: GasHandle.vue
-    author: liubin
-    date: 2023-12-11 09:02:40
-    description: 
--->
-
 <template>
 	<div class="gas-handle" style="flex: 2">
 		<Container name="烟气处理" size="large" style="">
@@ -26,11 +19,11 @@
 							flex: 1.2;
 							text-align: right;
 							padding-right: 8px;
-							letter-spacing: 1px;
+							letter-spacing: 3px;
 						">
 						氧气含量
 					</span>
-					<span style="font-size: 20px; line-height: 1.24; flex: 1">82%</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
@@ -45,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">82%</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>
@@ -61,23 +54,22 @@
 						<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">59mg/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>
-					<div
+					<span
 						style="
 							font-size: 20px;
-							line-height: 1.5;
+							line-height: 1.24;
 							flex: 1.2;
 							text-align: right;
 							padding-right: 8px;
-							letter-spacing: 3px;
+							letter-spacing: 1px;
 						">
-						<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">82%</span>
+						颗粒物浓度
+					</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" />
@@ -103,11 +95,11 @@
 						justify-content: space-between;
 					">
 					<SelectorBtnGroup
-						:options="['氧气含量', '二氧化硫', '一氧化氮', '二氧化氮']" />
-					<SelectorBtnGroup :options="['日', '周', '月', '年']" />
+						:options="['氧气含量', '二氧化硫', '一氧化氮', '颗粒物']" @emitFun='toggleType' :active='chartType'/>
+					<SelectorBtnGroup :options="['日', '周', '月', '年']" @emitFun='toggleDate' :active='chartTime' />
 				</div>
 				<div class="chart" style="height: 250px;margin-top: 10px;">
-					<GasChart />
+					<FlueGas :chartType='chartType' :chartTime='chartTime'/>
 				</div>
 			</div>
 		</Container>
@@ -115,12 +107,12 @@
 </template>
 
 <script>
-import Container from '../components/Container.vue';
+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.vue';
-import GasChart from '../components/GasChart.vue';
+// import Switcher from '../components/Switcher';
+import SelectorBtnGroup from '../components/SelectorBtnGroup';
+import FlueGas from '../components/FlueGas';
 
 export default {
 	name: 'GasHandle',
@@ -128,16 +120,33 @@ export default {
 		Container,
 		ShadowRect,
 		KilnLine,
-		Switcher,
 		SelectorBtnGroup,
-		GasChart,
+		FlueGas,
 	},
 	props: {},
 	data() {
-		return {};
+		return {
+			chartType:'氧气含量',
+			chartTime:'日'
+		};
+	},
+	computed: {
+		exhaustGasInfo() {
+			return this.$store.state.websocket.exhaustGasInfo
+		}
+	},
+	methods: {
+		// 烟气
+		toggleType(val) {
+			console.log('烟气' + val)
+			this.chartType = val
+		},
+		// 切换时间
+		toggleDate(val) {
+			console.log('时间' + val)
+			this.chartTime = val
+		}
 	},
-	computed: {},
-	methods: {},
 };
 </script>
 

src/views/databoard/kiln/IsraCheck.vue

@@ -33,7 +33,7 @@
 </template>
 
 <script>
-import Container from '../components/Container.vue';
+import Container from '../components/Container';
 import ShadowRect from '../components/ShadowRect.vue';
 import ISRAChart from '../components/ISRAChart.vue';
 

src/views/databoard/kiln/MaterialCost.vue

@@ -34,7 +34,7 @@
 							{{item.materialUsed}}
 						</span>
 						<span style="color: #fff; font-size: 16px; letter-spacing: 1px">
-							- {{item.materialName}} -
+							- {{item.materialName}}/kg-
 						</span>
 					</div>
 				</ShadowRect>
@@ -60,7 +60,7 @@
 							{{item.materialUsed}}
 						</span>
 						<span style="color: #fff; font-size: 16px; letter-spacing: 1px">
-							- {{item.materialName}} -
+							- {{item.materialName}}/kg-
 						</span>
 					</div>
 				</ShadowRect>
@@ -71,7 +71,7 @@
 </template>
 
 <script>
-import Container from '../components/Container.vue';
+import Container from '../components/Container';
 import ShadowRect from '../components/ShadowRect.vue';
 export default {
 	name: 'MaterialCost',

src/views/databoard/kiln/RightTwo.vue

@@ -19,16 +19,15 @@
 </template>
 
 <script>
-import Container from '../components/Container.vue';
+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.vue';
+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/kiln/index.vue

@@ -1,10 +1,3 @@
-<!-- 
-    filename: KilnDataBoard.vue
-    author: liubin
-    date: 2023-12-04 16:51:00
-    description: 
--->
-
 <template>
 	<div id='kilnContainerB' ref='kilnContainerB' style="width: 100%;height: 100%;">
 		<div
@@ -13,10 +6,10 @@
 			class="KilnDataBoard"
 			style="
 				position: absolute;
-				transform-origin: 16px 8px;
+				transform-origin: left top;
 				font-size: 16px;
-				top: -8px;
-				left: -16px;
+				top: 0px;
+				left: 0px;
 				width: 1920px;
 				height: 1080px;
 				display: flex;
@@ -45,15 +38,19 @@ import LeftFour from './LeftFour';
 import RightTwo from './RightTwo.vue';
 import screenfull from 'screenfull'
 import { debounce } from '@/utils/debounce'
-import { getDcsMsg, getMesMsg } from './../utils/wsInterface'
 
 export default {
-	name: 'KilnDataBoard',
+	name: 'Kiln',
 	components: {
 		KHeader,
 		LeftFour,
 		RightTwo,
 	},
+	computed:{
+		sidebarStatus() {
+			return this.$store.state.app.sidebar.opened;
+		}
+	},
 	// provide() {
 	// 	return {
 	// 		resizeChart: null,
@@ -65,6 +62,11 @@ export default {
 			scaleNum: 0.8
 		};
 	},
+	watch: {
+		sidebarStatus() {
+			this.boxReset()
+		},
+	},
 	created() {
 		this.init()
 	},
@@ -79,14 +81,6 @@ export default {
     window.addEventListener('resize', () => {
       this.boxReset()
     })
-		// this.getMes()
-		// closeWebsocket()
-		getDcsMsg()
-		getMesMsg()
-		console.log('mounted...........')
-	},
-	destroyed() {
-		console.log('destroyed...........')
 	},
 	methods: {
 		change() {

src/views/databoard/utils/wsInterface.js

@@ -1,4 +1,4 @@
-import { connectWebsocket, closeWebsocket } from './../utils/websocket'
+import { connectWebsocket, closeWebsocket } from './websocket'
 import store from "@/store";
 
 // 创建dcs链接
@@ -27,6 +27,10 @@ export const getDcsMsg = () => {
           store.dispatch({type: "websocket/setGasInfo", payload: msgData.data})
           break;
         }
+        case "SumGasInfo": {
+          store.dispatch({type: "websocket/setSumGasInfo", payload: msgData.data})
+          break;
+        }
         default:
       }
     },
@@ -41,54 +45,110 @@ export const getDcsMsg = () => {
 export const getMesMsg = () => {
   const sj = new Date().getTime()
   // ISRA
-  connectWebsocket(
-    // 测试地址
-    'ws://10.70.2.2:8080/websocket/message?userId=KI'+sj,
-    // 传递给后台的数据
-    '',
-    // 成功拿到后台返回的数据的回调函数
-    (data) => {
-      console.log('mes ISRA成功的回调函数, 接收到的data数据: ', data)
-      let msgData = JSON.parse(data)
-      if (msgData == null) return;
-      switch (msgData?.type) {
-        case "israKiln": {
-          store.dispatch({type: "websocket/setIsraKiln", payload:msgData.detData.dayStatistic})
-          break;
-        }
-        // case "KilnInfo": {
-        //   // store.dispatch({type: "websocket/setKilnInfo", payload: msgData.data.kilnInfo})
+  // connectWebsocket(
+  //   // 测试地址
+  //   'ws://10.70.2.2:8080/websocket/message?userId=KI'+sj,
+  //   // 传递给后台的数据
+  //   '',
+  //   // 成功拿到后台返回的数据的回调函数
+  //   (data) => {
+  //     console.log('mes ISRA成功的回调函数, 接收到的data数据: ', data)
+  //     let msgData = JSON.parse(data)
+  //     if (msgData == null) return;
+  //     switch (msgData?.type) {
+  //       case "israKiln": {
+  //         store.dispatch({type: "websocket/setIsraKiln", payload:msgData.detData.dayStatistic})
   //         break;
   //       }
-        default:
-      }
-    },
-    // websocket连接失败的回调函数
-    (err) => {
-      console.log('失败的回调函数', err)
-    }
-  )
+  //       // case "KilnInfo": {
+  //       //   // store.dispatch({type: "websocket/setKilnInfo", payload: msgData.data.kilnInfo})
+  //       //   break;
+  //       // }
+  //       default:
+  //     }
+  //   },
+  //   // websocket连接失败的回调函数
+  //   (err) => {
+  //     console.log('失败的回调函数', err)
+  //   }
+  // )
 
-  // 原料 MA
+  // // 原料 MA
+  // connectWebsocket(
+  //   // 测试地址
+  //   'ws://10.70.2.2:8080/websocket/message?userId=MA'+sj,
+  //   // 传递给后台的数据
+  //   '',
+  //   // 成功拿到后台返回的数据的回调函数
+  //   (data) => {
+  //     console.log('mes 原料成功的回调函数, 接收到的data数据: ', data)
+  //     let msgData = JSON.parse(data)
+  //     if (msgData == null) return;
+  //     switch (msgData?.type) {
+  //       case "material": {
+  //         store.dispatch({type: "websocket/setMaterial", payload:msgData.data})
+  //         break;
+  //       }
+  //       // case "KilnInfo": {
+  //       //   // store.dispatch({type: "websocket/setKilnInfo", payload: msgData.data.kilnInfo})
+  //       //   break;
+  //       // }
+  //       default:
+  //     }
+  //   },
+  //   // websocket连接失败的回调函数
+  //   (err) => {
+  //     console.log('失败的回调函数', err)
+  //   }
+  // )
+
+   // 能耗 EN
+  //  connectWebsocket(
+  //   // 测试地址
+  //   'ws://10.70.2.2:8080/websocket/message?userId=ENERGY'+sj,
+  //   // 传递给后台的数据
+  //   '',
+  //   // 成功拿到后台返回的数据的回调函数
+  //   (data) => {
+  //     console.log('mes 能耗成功的回调函数, 接收到的data数据: ', data)
+  //     let msgData = JSON.parse(data)
+  //     if (msgData == null) return;
+  //     switch (msgData?.type) {
+  //       case "EnergyInfo": {
+  //         store.dispatch({type: "websocket/setEnergyInfo", payload:msgData.data})
+  //         break;
+  //       }
+  //       default:
+  //     }
+  //   },
+  //   // websocket连接失败的回调函数
+  //   (err) => {
+  //     console.log('失败的回调函数', err)
+  //   }
+  // )
+
+  // 烟气 GAS
   connectWebsocket(
     // 测试地址
-    'ws://10.70.2.2:8080/websocket/message?userId=MA'+sj,
+    'ws://10.70.2.2:8080/websocket/message?userId=GAS'+sj,
     // 传递给后台的数据
     '',
     // 成功拿到后台返回的数据的回调函数
     (data) => {
-      console.log('mes 原料成功的回调函数, 接收到的data数据: ', data)
+      console.log('mes 烟气成功的回调函数, 接收到的data数据: ', data)
       let msgData = JSON.parse(data)
       if (msgData == null) return;
       switch (msgData?.type) {
-        case "material": {
-          store.dispatch({type: "websocket/setMaterial", payload:msgData.data})
+        case "exhaustGas": {
+          store.dispatch({type: "websocket/setExhaustGasInfo", payload:msgData.realtime})
+          store.dispatch({type: "websocket/setExhaustGasChart", payload:{
+            dayTrend: msgData.dayTrend,
+            weekTrend: msgData.weekTrend,
+            monthTrend: msgData.monthTrend,
+            yearTrend: msgData.yearTrend,
+          }})
           break;
         }
-        // case "KilnInfo": {
-        //   // store.dispatch({type: "websocket/setKilnInfo", payload: msgData.data.kilnInfo})
-        //   break;
-        // }
         default:
       }
     },

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

@@ -0,0 +1,38 @@
+<template>
+  <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;">
+          <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, DefectChart },
+  data() {
+    return {
+      chartTime:'日'
+    }
+  },
+  methods: {
+    // 切换时间
+		toggleDate(val) {
+			console.log('时间' + val)
+			this.chartTime = val
+		}
+  }
+}
+</script>
+<style lang='scss' scoped>
+.timeToggle {
+  position: absolute;
+  right: 20px;
+  top: 20px;
+}
+</style>

src/views/databoard/wholePlant/LeftTwo.vue

@@ -4,7 +4,7 @@
 		style="
 			display: grid;
 			gap: 16px;
-			grid-template-rows: 462px 462px;
+			grid-template-rows: 308px 616px;
 		">
 		<OrderStatus />
 		<YieldRate />

src/views/databoard/wholePlant/MiddleTwo.vue

@@ -4,19 +4,19 @@
 		style="
 			display: grid;
 			gap: 16px;
-			grid-template-rows: 462px 462px;
+			grid-template-rows: 605px 320px;
 		">
-		<OrderStatus />
-		<YieldRate />
+		<GasHandle />
+		<DefectStatistics />
 	</div>
 </template>
 
 <script>
-import OrderStatus from './OrderStatus.vue';
-import YieldRate from './YieldRate.vue';
+import GasHandle from './../kiln/GasHandle';
+import DefectStatistics from './DefectStatistics';
 export default {
 	name: 'MiddleFour',
-	components: { OrderStatus, YieldRate },
+	components: { GasHandle, DefectStatistics },
 	props: {},
 	data() {
 		return {};

src/views/databoard/wholePlant/OrderStatus.vue

@@ -1,14 +1,61 @@
 <template>
   <div style="flex: 1;">
     <Container name="订单完成情况" size="small" style="">
-      digndna
+      <div style="padding: 5px 10px;">
+        <dv-scroll-board :config="config" style="width:575px;height:230px" ref='orderScrollBoard'/>
+      </div>
     </Container>
   </div>
 </template>
 <script>
-import Container from '../components/Container.vue';
+import Container from '../components/Container'
 export default {
   name: 'OrderStatus',
   components: { Container },
+  computed: {
+    order() {
+      return this.$store.state.websocket.order
+    }
+  },
+  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: [
+          ['2023-12-01', '客户1', '行1列3', ''],
+          ['2023-12-01', '客户2', '行2列3', ''],
+          ['2023-12-01', '客户3', '行3列3', ''],
+          ['2023-12-01', '客户4', '行4列3', ''],
+          ['2023-12-01', '客户5', '行5列3', ''],
+          ['2023-12-01', '客户6', '行6列3', ''],
+          ['2023-12-01', '客户7', '行7列3', ''],
+          ['2023-12-01', '客户8', '行8列3', ''],
+          ['2023-12-01', '客户9', '行9列3', ''],
+          ['2023-12-01', '客户10', '行10列3', '']
+        ],
+        rowNum: 6
+      }
+    }
+  },
+  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>

src/views/databoard/wholePlant/RightTwo.vue

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

src/views/databoard/wholePlant/YieldRate.vue

@@ -1,14 +1,125 @@
 <template>
-  <div style="flex: 1;">
-    <Container name="本日生产良品率" size="small" style="">
-      0000987
+  <div style="flex: 2;">
+    <Container name="本日生产良品率" size="small">
+      <div style="padding: 5px 10px;">
+        <dv-scroll-board :config="config" style="width:575px;height:230px" ref='yieldRateScrollBoard'/>
+      </div>
+      <KilnLine :horizontal="true" />
+      <div class="" style="flex: 2; padding: 8px">
+        <div
+          class="header-line"
+          style="margin: 8px 0 16px; display: flex; align-items: center">
+          <h2 class="" style="margin: 0; color: #0ee8fe; margin-right: 5px">
+            生产良品率
+          </h2>
+          <Switcher :showTitle='["班次详情","班次详情"]' @emitFun='changeType'/>
+          <div style="width: 169px;">
+            <span class="lgd lgd-total">总量</span>
+            <span class="lgd lgd-day" v-show='chartType'>白班</span>
+            <span class="lgd lgd-night" v-show='chartType'>夜班</span>
+          </div>
+          <div>
+            <SelectorBtnGroup :options="['日', '周', '月', '年']" @emitFun='toggleDate' :active='chartTime'/>
+          </div>
+        </div>
+        <div class="chart" style="height: 230px;">
+          <YieldRateChart :chartTime='chartTime' :chartType='chartType'/>
+        </div>
+      </div>
     </Container>
   </div>
 </template>
 <script>
-import Container from '../components/Container.vue';
+import Container from '../components/Container'
+import ScrollBoard from '../components/ScrollBoard'
+import KilnLine from '../components/line'
+import Switcher from '../components/Switcher'
+import SelectorBtnGroup from '../components/SelectorBtnGroup';
+import YieldRateChart from '../components/YieldRateChart'
 export default {
   name: 'YieldRate',
-  components: { Container },
+  components: { Container, ScrollBoard, KilnLine, Switcher, SelectorBtnGroup, YieldRateChart },
+  computed: {
+    yieldRateTable() {
+      return this.$store.state.websocket.yieldRateTable
+    }
+  },
+  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: [
+          [1, '产线1', '49%', '', ''],
+          [2, '产线2', '49%', '', ''],
+          [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: {
+    changeType(val) {
+      this.chartType = val
+    },
+    // 切换时间
+		toggleDate(val) {
+			this.chartTime = val
+		}
+  }
 }
 </script>
+<style lang='scss' scoped>
+.lgd {
+	color: #fff;
+
+	&:not(:last-child) {
+		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/databoard/wholePlant/index.vue

@@ -8,8 +8,8 @@
 				position: absolute;
 				transform-origin: 16px 8px;
 				font-size: 16px;
-				top: -8px;
-				left: -16px;
+				top: 0px;
+				left: 0px;
 				width: 1920px;
 				height: 1080px;
 				display: flex;
@@ -42,7 +42,6 @@ import MiddleTwo from './MiddleTwo';
 import RightTwo from './RightTwo';
 import screenfull from 'screenfull'
 import { debounce } from '@/utils/debounce'
-import { getDcsMsg, getMesMsg } from './../utils/wsInterface'
 
 export default {
 	name: 'wholePlantBoard',
@@ -77,9 +76,6 @@ export default {
     window.addEventListener('resize', () => {
       this.boxReset()
     })
-		// closeWebsocket()
-		// getDcsMsg()
-		// getMesMsg()
 		console.log('mounted...........')
 	},
 	destroyed() {

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,
-				time: [tenminAgo, today],
+				equipmentId: null,
+				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) {
-					this.queryParams.time = timeVal;
+				console.log('nihc ', 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/views/quality/base/qualityHotMaterial/add-or-updata.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: zhp
  * @Date: 2023-12-08 13:46:17
- * @LastEditTime: 2023-12-15 16:12:08
+ * @LastEditTime: 2024-01-09 16:03:22
  * @LastEditors: zhp
  * @Description:
 -->
@@ -455,8 +455,8 @@ export default {
               materialId: response.data.materialId
             }).then((res) => {
               console.log(res.data);
-              this.ingredientList = res.data
-              valueList = this.ingredientList.map((ele) => {
+              let arr  = res.data
+              valueList = arr.map((ele) => {
                 // console.log(ele)
                 return {
                   maxValue: ele.maxValue,
@@ -466,6 +466,17 @@ export default {
               getQualityHotMaterialDetList({
                 mainId: response.data.id
               }).then((result) => {
+                this.ingredientList = result.data.map((ele) => {
+                  return {
+                    name: ele.checkName,
+                    id: ele.id,
+                    checkDetId: ele.id,
+                    checkValue: ele.checkValue,
+                    // isStandard: true,
+                    // showIcon: false,
+                  }
+                })
+                console.log(this.ingredientList);
                 this.dataForm.checkValueList = result.data.map((ele) => {
                   return {
                     mainId: ele.mainId,

src/websocket/websocket.js

@@ -0,0 +1,176 @@
+/**
+ * 发起websocket请求函数
+ * @param {string} url ws连接地址
+ * @param {Object} agentData 传给后台的参数
+ * @param {function} successCallback 接收到ws数据，对数据进行处理的回调函数
+ * @param {function} errCallback ws连接错误的回调函数
+ */
+export function WsConnect(url, agentData, successCallback, errCallback) {
+  this.wsUrl = url;
+  this.wsObj = null;
+  // 是否执行重连 true/不执行 ； false/执行
+  this.lockReconnect = false;
+  // 重连定时器
+  this.wsCreateHandler = null;
+  // 连接成功，执行回调函数
+  this.messageCallback = successCallback;
+  // 连接失败，执行回调函数
+  this.errorCallback = errCallback;
+  // 发送给后台的数据
+  this.sendDatas = agentData;
+  // 创建ws函数
+  this.createWebSoket = () => {
+    if (typeof WebSocket === "undefined") {
+      writeToScreen("您的浏览器不支持WebSocket，无法获取数据");
+      return false;
+    }
+    try {
+      this.wsObj = new WebSocket(url);
+      initWsEventHandle();
+    } catch (e) {
+      writeToScreen("连接异常，开始重连");
+      reconnect();
+    }
+  };
+  // 手动关闭websocket （这里手动关闭会执行onclose事件）
+  this.closeWebsocket = () => {
+    if (this.wsObj) {
+      writeToScreen("手动关闭websocket");
+      this.wsObj.close(); // 关闭websocket
+      // this.wsObj.onclose() // 关闭websocket(如果上面的关闭不生效就加上这一条)
+      // 关闭重连
+      this.lockReconnect = true;
+      this.wsCreateHandler && clearTimeout(this.wsCreateHandler);
+      // 关闭心跳检查
+      // heartCheck.stop();
+    }
+  };
+  const initWsEventHandle = () => {
+    try {
+      // 连接成功
+      this.wsObj.onopen = (event) => {
+        onWsOpen(event);
+        // heartCheck.start();
+      };
+
+      // 监听服务器端返回的信息
+      this.wsObj.onmessage = (event) => {
+        onWsMessage(event);
+        // heartCheck.start();
+      };
+
+      this.wsObj.onclose = (event) => {
+        writeToScreen("onclose执行关闭事件");
+        onWsClose(event);
+      };
+
+      this.wsObj.onerror = (event) => {
+        writeToScreen("onerror执行error事件，开始重连");
+        onWsError(event);
+        reconnect();
+      };
+    } catch (err) {
+      writeToScreen("绑定事件没有成功，开始重连");
+      reconnect();
+    }
+  };
+
+  const onWsOpen = (event) => {
+    writeToScreen("CONNECT");
+    // // 客户端与服务器端通信
+    // wsObj.send('我发送消息给服务端');
+    // 添加状态判断，当为OPEN时，发送消息
+    if (this.wsObj.readyState === this.wsObj.OPEN) {
+      // wsObj.OPEN = 1
+      // 发给后端的数据需要字符串化
+      this.wsObj.send(JSON.stringify(this.sendDatas));
+    }
+    if (this.wsObj.readyState === this.wsObj.CLOSED) {
+      // wsObj.CLOSED = 3
+      writeToScreen("wsObj.readyState=3, ws连接异常，开始重连");
+      reconnect();
+      this.errorCallback(event);
+    }
+  };
+  const onWsMessage = (event) => {
+    const jsonStr = event.data;
+    writeToScreen("onWsMessage接收到服务器的数据: ", jsonStr);
+    this.messageCallback(jsonStr);
+  };
+  const onWsClose = (event) => {
+    writeToScreen("DISCONNECT");
+    // e.code === 1000  表示正常关闭。 无论为何目的而创建, 该链接都已成功完成任务。
+    // e.code !== 1000  表示非正常关闭。
+    console.log("onclose event: ", event);
+    if (event && event.code !== 1000) {
+      writeToScreen("非正常关闭");
+      this.errorCallback(event);
+      // 如果不是手动关闭，这里的重连会执行；如果调用了手动关闭函数，这里重连不会执行
+      reconnect();
+    }
+  };
+  const onWsError = (event) => {
+    writeToScreen("onWsError: ", event.data);
+    this.errorCallback(event);
+  };
+
+  const writeToScreen = (massage) => {
+    console.log(massage);
+  };
+
+  // 重连函数
+  const reconnect = () => {
+    if (this.lockReconnect) {
+      return;
+    }
+    writeToScreen("3秒后重连");
+    this.lockReconnect = true;
+    // 没连接上会一直重连，设置延迟避免请求过多
+    this.wsCreateHandler && clearTimeout(this.wsCreateHandler);
+    this.wsCreateHandler = setTimeout(() => {
+      writeToScreen("重连..." + this.wsUrl);
+      this.createWebSoket();
+      this.lockReconnect = false;
+      writeToScreen("重连完成");
+    }, 3000);
+  };
+
+  // 心跳检查（看看websocket是否还在正常连接中）
+  // let heartCheck = {
+  //   timeout: 15000,
+  //   timeoutObj: null,
+  //   serverTimeoutObj: null,
+  //   // 重启
+  //   reset() {
+  //     clearTimeout(this.timeoutObj);
+  //     clearTimeout(this.serverTimeoutObj);
+  //     this.start();
+  //   },
+  //   // 停止
+  //   stop() {
+  //     clearTimeout(this.timeoutObj);
+  //     clearTimeout(this.serverTimeoutObj);
+  //   },
+  //   // 开启定时器
+  //   start() {
+  //     this.timeoutObj && clearTimeout(this.timeoutObj);
+  //     this.serverTimeoutObj && clearTimeout(this.serverTimeoutObj);
+  //     // 15s之内如果没有收到后台的消息，则认为是连接断开了，需要重连
+  //     this.timeoutObj = setTimeout(() => {
+  //       writeToScreen("心跳检查，发送ping到后台");
+  //       try {
+  //         const datas = { ping: true };
+  //         this.wsObj.send(JSON.stringify(datas));
+  //       } catch (err) {
+  //         writeToScreen("发送ping异常");
+  //       }
+  //       console.log("内嵌定时器this.serverTimeoutObj: ", this.serverTimeoutObj);
+  //       // 内嵌定时器
+  //       this.serverTimeoutObj = setTimeout(() => {
+  //         writeToScreen("没有收到后台的数据，重新连接");
+  //         reconnect();
+  //       }, this.timeout);
+  //     }, this.timeout);
+  //   },
+  // };
+}

src/websocket/wsInterface.js

@@ -0,0 +1,305 @@
+import { WsConnect } from './websocket'
+import store from "@/store";
+
+// 创建websocket链接
+
+const timestr = new Date().getTime()
+const dcsConn = new WsConnect(
+  // websocket地址
+  process.env.VUE_APP_Socket_Dcs_API + '/xc-screen/websocket/dcsmsg'+timestr,
+  // 传递给后台的数据
+  '',
+  (data) => {
+    // console.log('dcs成功的回调函数, 接收到的data数据: ', data)
+    let msgData = JSON.parse(data)
+    if (msgData == null) return;
+    switch (msgData?.type) {
+      case "FanFrequencyInfo": {
+        store.dispatch({type: "websocket/setFanFrequencyInfo", payload:msgData.data.FanFrequencyInfo})
+        break;
+      }
+      case "KilnInfo": {
+        store.dispatch({type: "websocket/setKilnInfo", payload: msgData.data})
+        break;
+      }
+      case "GasInfo": {
+        store.dispatch({type: "websocket/setGasInfo", payload: msgData.data})
+        break;
+      }
+      case "SumGasInfo": {
+        store.dispatch({type: "websocket/setSumGasInfo", payload: msgData.data})
+        break;
+      }
+      default:
+    }
+  },
+  (err) => {
+    console.log('失败的回调函数', err)
+  }
+)
+// ISRA
+const mesIsra = new WsConnect(
+  process.env.VUE_APP_Socket_API + '/websocket/message?userId=KILN'+timestr,
+  '',
+  (data) => {
+    // console.log('mes ISRA成功的回调函数, 接收到的data数据: ', data)
+    let msgData = JSON.parse(data)
+    // console.log(msgData)
+    if (msgData == null) return;
+    switch (msgData?.type) {
+      case "israKiln": {
+        store.dispatch({type: "websocket/setIsraKiln", payload:msgData.detData.dayStatistic})
+        break;
+      }
+      default:
+    }
+  },
+  (err) => {
+    console.log('失败的回调函数', err)
+  }
+)
+
+// 原料 MA
+const mesMA = new WsConnect(
+  process.env.VUE_APP_Socket_API + '/websocket/message?userId=MA'+timestr,
+  '',
+  (data) => {
+    // console.log('mes 原料成功的回调函数, 接收到的data数据: ', data)
+    let msgData = JSON.parse(data)
+    if (msgData == null) return;
+    switch (msgData?.type) {
+      case "material": {
+        store.dispatch({type: "websocket/setMaterial", payload:msgData.data})
+        break;
+      }
+      default:
+    }
+  },
+  (err) => {
+    console.log('失败的回调函数', err)
+  }
+)
+// 能耗 EN
+const mesEN = new WsConnect(
+  // websocket地址
+  process.env.VUE_APP_Socket_API + '/websocket/message?userId=ENERGY'+timestr,
+  // 传递给后台的数据
+  '',
+  // 成功拿到后台返回的数据的回调函数
+  (data) => {
+    // console.log('mes 能耗成功的回调函数, 接收到的data数据: ', data)
+    let msgData = JSON.parse(data)
+    if (msgData == null) return;
+    switch (msgData?.type) {
+      case "EnergyInfo": {
+        store.dispatch({type: "websocket/setEnergyInfo", payload:msgData.data})
+        break;
+      }
+      case "EnergyTrend": {
+        store.dispatch({type: "websocket/setEnergyTrend", payload:msgData.data})
+        break;
+      }
+      case "EnergyMonitoring": {
+        store.dispatch({type: "websocket/setEnergyMonitoring", payload:msgData.data})
+        break;
+      }
+      default:
+    }
+  },
+  // websocket连接失败的回调函数
+  (err) => {
+    console.log('失败的回调函数', err)
+  }
+)
+// 烟气 GAS
+const mesGAS = new WsConnect(
+  // websocket地址
+  process.env.VUE_APP_Socket_API + '/websocket/message?userId=GAS'+timestr,
+  // 传递给后台的数据
+  '',
+  // 成功拿到后台返回的数据的回调函数
+  (data) => {
+    // console.log('mes 烟气成功的回调函数, 接收到的data数据: ', data)
+    let msgData = JSON.parse(data)
+    if (msgData == null) return;
+    switch (msgData?.type) {
+      case "exhaustGas": {
+        store.dispatch({type: "websocket/setExhaustGasInfo", payload:msgData.realtime})
+        store.dispatch({type: "websocket/setExhaustGasChart", payload:{
+          dayTrend: msgData.dayTrend,
+          weekTrend: msgData.weekTrend,
+          monthTrend: msgData.monthTrend,
+          yearTrend: msgData.yearTrend,
+        }})
+        break;
+      }
+      default:
+    }
+  },
+  // websocket连接失败的回调函数
+  (err) => {
+    console.log('失败的回调函数', err)
+  }
+)
+
+// 缺陷分类/统计 IS
+const mesIS = new WsConnect(
+  // websocket地址
+  process.env.VUE_APP_Socket_API + '/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:{
+          checkType: msgData.detData.checkType,
+          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地址
+  process.env.VUE_APP_Socket_API + '/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;
+      }
+      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:
+    }
+  },
+  // websocket连接失败的回调函数
+  (err) => {
+    console.log('失败的回调函数', err)
+  }
+)
+
+// 订单完成情况 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()
+  mesIsra.createWebSoket()
+  mesMA.createWebSoket()
+  mesEN.createWebSoket()
+  mesGAS.createWebSoket()
+  mesIS.createWebSoket()
+  mesSJG.createWebSoket()
+  mesOV.createWebSoket()
+  mesCUTTING.createWebSoket()
+}
+export const closeDcsMsg = () => {
+  dcsConn.closeWebsocket()
+  mesIsra.closeWebsocket()
+  mesMA.closeWebsocket()
+  mesEN.closeWebsocket()
+  mesGAS.closeWebsocket()
+  mesIS.closeWebsocket()
+  mesSJG.closeWebsocket()
+  mesOV.closeWebsocket()
+  mesCUTTING.closeWebsocket()
+}

yarn.lock

@@ -1119,6 +1119,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"
@@ -3507,6 +3552,11 @@
     "safe-buffer" "5.1.2"
     "vary" "~1.1.2"
 
+"comutils@^1.1.9":
+  "integrity" "sha512-JxXB67juILiwhdLwOsYyjUqwWEhHdObI0EClOPk+JDtEuTbac59s0pxGpfCBnNNQ5JommifmcMGneW/4Cg7YWw=="
+  "resolved" "https://registry.npmmirror.com/comutils/-/comutils-1.1.19.tgz"
+  "version" "1.1.19"
+
 "concat-map@0.0.1":
   "integrity" "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg=="
   "resolved" "https://registry.npmmirror.com/concat-map/-/concat-map-0.0.1.tgz"
@@ -11378,6 +11428,13 @@
   "resolved" "https://registry.npmmirror.com/vue-router/-/vue-router-3.4.9.tgz"
   "version" "3.4.9"
 
+"vue-seamless-scroll@^1.1.23":
+  "integrity" "sha512-HBjUub8WwsKJzbFCrwKPDrZn4e+SSbkKgwWtjKtfLwesiFGwSsVxP44/Z6d3kpXy94qIFOiflJH6l0/9pj7SGA=="
+  "resolved" "https://registry.npmmirror.com/vue-seamless-scroll/-/vue-seamless-scroll-1.1.23.tgz"
+  "version" "1.1.23"
+  dependencies:
+    "comutils" "^1.1.9"
+
 "vue-style-loader@^4.1.0", "vue-style-loader@^4.1.2":
   "integrity" "sha512-sFuh0xfbtpRlKfm39ss/ikqs9AbKCoXZBpHeVZ8Tx650o0k0q/YCM7FRvigtxpACezfq6af+a7JeqVTWvncqDg=="
   "resolved" "https://registry.npmmirror.com/vue-style-loader/-/vue-style-loader-4.1.3.tgz"