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

Reviewed-on: #168

.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-04 15:50:26
  # @LastEditors: zhp
  # @Description:
 ###
@@ -13,7 +13,8 @@ VUE_APP_TITLE = MES系统
 
 # 芋道管理系统/开发环境
 # VUE_APP_BASE_API = 'http://100.64.0.26:48082'
-VUE_APP_BASE_API = 'http://192.168.0.33: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'
@@ -21,10 +22,14 @@ VUE_APP_BASE_API = 'http://192.168.0.33:48082'
 # VUE_APP_BASE_API = 'http://192.168.4.159:48080'
 # VUE_APP_BASE_API = 'http://192.168.1.104:48082'
 # VUE_APP_BASE_API = 'http://192.168.1.62:48082'
-# VUE_APP_BASE_API = 'http://192.168.1.78:48082'
+VUE_APP_BASE_API = 'http://192.168.1.78:48082'
+# socket地址
+VUE_APP_Socket_API = 'ws://192.168.0.33:48082'
 
+
+# VUE_APP_BASE_API = 'http://100.64.0.23:48082'
 # 积木报表指向地址
-VUE_APP_JIMU_API = 'http://192.168.0.33:48082'
+VUE_APP_JIMU_API = 'http://10.70.2.22:8080'
 
 # 路由懒加载
 VUE_CLI_BABEL_TRANSPILE_MODULES = true

.env.prod

@@ -15,11 +15,11 @@ VUE_APP_TITLE = MES系统
 VUE_APP_BASE_API = '/prod-api'
 
 # 积木报表指向地址
-VUE_APP_JIMU_API = 'http://10.70.2.22:8080'
+VUE_APP_JIMU_API = 'http://10.70.2.2:8080'
 
 
 # 根据服务器或域名修改
-PUBLIC_PATH = 'http://10.70.2.32'
+PUBLIC_PATH = ''
 
 # 二级部署路径
 # VUE_APP_APP_NAME ='yudao-admin'

.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 { borderBox1 } 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(dataV)
 // 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,30 @@
 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:{}, // 烟气
+  israDayStatistic: [],//缺陷统计
+  israWeekStatistic: [],//缺陷统计
+  israMonthStatistic: [],//缺陷统计
+  israYearStatistic: [],//缺陷统计
+  productline: [] // 产线产量及良品率
 };
 const mutations = {
   SET_FANFREQUENCYINFO: (state, fanFrequencyInfo) => {
@@ -16,6 +36,9 @@ const mutations = {
   SET_GASINFO: (state, gasInfo) => {
     state.gasInfo = gasInfo
   },
+  SET_SUMGASINFO: (state, sumGasInfo) => {
+    state.sumGasInfo = sumGasInfo
+  },
 
 
   SET_ISRAKILN: (state, israKiln) => {
@@ -23,6 +46,46 @@ 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.gasChartDayTrend
+    state.gasChartWeekTrend = exhaustGasChart.gasChartWeekTrend
+    state.gasChartMonthTrend = exhaustGasChart.gasChartMonthTrend
+    state.gasChartYearTrend = exhaustGasChart.gasChartYearTrend
+  },
+  SET_DEFECTCHART: (state, israStatistic) => {
+    state.israDayStatistic = israStatistic.dayStatistic
+    state.israWeekStatistic = israStatistic.weekStatistic
+    state.israMonthStatistic = israStatistic.monthStatistic
+    state.israYearStatistic = israStatistic.yearStatistic
+  },
+  SET_PRODUCTLINE: (state, productline) => {
+    state.productline = productline
   }
 };
 const actions = {
@@ -35,6 +98,9 @@ const actions = {
   setGasInfo({ commit }, gasInfo) {
     commit('SET_GASINFO', gasInfo.payload)
   },
+  setSumGasInfo({ commit }, sumGasInfo) {
+    commit('SET_SUMGASINFO', sumGasInfo.payload)
+  },
 
 
   setIsraKiln({ commit }, israKiln) {
@@ -43,6 +109,27 @@ 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)
+  },
 };
 export default {
   namespaced: true,

src/views/OperationalOverview/AGVBoard.vue

@@ -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>

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-04 16:41:17
  * @Description:
 -->
 <template>
@@ -41,8 +41,8 @@
               <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>
 
@@ -62,7 +62,7 @@
             </div> -->
             <!-- <el-row :gutter="9"> -->
             <!-- <el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="24"> -->
-            <pile-bar-chart  ref="pileChart" :name-list="EnergyMonitoringNameList" :data-list="EnergyMonitoringList"
+            <pile-bar-chart ref="pileChart" :name-list="EnergyMonitoringNameList" :data-list="EnergyMonitoringList"
               :height="359" />
             <!-- </el-col> -->
             <!-- <el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="12">
@@ -83,11 +83,18 @@
               <top-radio-group />
             </div> -->
             <!-- 像下面这样表格里的limit值，也许可以用js动态计算出来 -->
-            <el-col :span="12">
-              <base-table1 :page="1" :limit="9" :show-index="false" :table-config="EqMonitoringProps"
+            <el-col :span="6">
+              <h4 style="margin: 5px 0 5px 0;">融化风机</h4>
+              <base-table1 :page="1" :limit="9" :show-index="false" :table-config="EqMonitoringPropsFun"
                 :table-data="funList" />
             </el-col>
+            <el-col :span="6">
+              <h3 style="margin: 5px 0 5px 0;">退火风机</h3>
+              <base-table1 :page="1" :limit="9" :show-index="false" :table-config="EqMonitoringPropsFun"
+                :table-data="annealFunList" />
+            </el-col>
             <el-col :span="12" style="float: right;">
+              <h3 style="margin: 5px 0 5px 0;">产线设备</h3>
               <base-table1 :page="1" :limit="9" :show-index="false" :table-config="EqMonitoringProps"
                 :table-data="realEqList" />
             </el-col>
@@ -137,32 +144,33 @@ import { parseTime } from '../core/mixins/code-filter';
 
 import LinearBarChart from './components/linearBarChart'
 const qualityYearTableProps= []
-const EqMonitoringProps = [
-  { prop: 'productLine', label: '产线' },
+const EqMonitoringPropsFun = [
   { prop: 'equipmentName', label: '设备名称' },
-  { prop: 'equipmentCode', label: '设备编码' },
+  { prop: 'status', label: '运行状态', width: 80}
+]
+const EqMonitoringProps = [
+  { 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 = [
-  { prop: 'lineName', label: '产线' },
+  { prop: 'lineName', label: '产线', width: 50 },
   {
     prop: 'time', label: '时间',
     filter: parseTime
   },
   { prop: 'size', label: '规格' },
-  { prop: 'productArea', label: '良品面积' },
-  { prop: 'wasteArea', label: '废片面积' },
-  { prop: 'product', label: '良品率' },
+  { prop: 'productArea', label: '良品面积', width: 80 },
+  { prop: 'wasteArea', label: '废片面积', width: 80 },
+  { prop: 'product', label: '良品率', width: 80 },
 ]
 const cxNameList = ['周一', '周二', '周三', '周四', '周五']
 
@@ -246,6 +254,7 @@ export default {
       beilv: 1,
       value: 100,
       EqMonitoringProps,
+      EqMonitoringPropsFun,
       realEqList:[],
       qualityYearTableProps,
       ISRATableProps,
@@ -263,9 +272,13 @@ export default {
       clientWidth: 0,
       containerWidth: 111111,
       isFullScreen: false,
+      cutWsData: {},
+      funWsData: {},
+      SJGWsData: {},
       // orderProcessList: [],
       dateType: '0',
       funList:[],
+      annealFunList: [],
       queryParams: {
         pageNo: 1,
         pageSize: 10,
@@ -311,7 +324,7 @@ export default {
     this.funInitWebSocket()
     this.CutInitWebSocket()
     this.SJGInitWebSocket()
-
+    // this.getList()
     this.getTimes()
     const _this = this;
     _this.beilv2 = document.documentElement.clientWidth / 1920
@@ -321,7 +334,7 @@ export default {
         this.beilv2 = _this.clientWidth / 1920
       })()
     }
-    this.getList()
+    // this.getList()
     // const _this = this;
     // window.onresize = () => {
     //   return (() => {
@@ -334,7 +347,6 @@ export default {
     //   this.beilv2 = window.innerWidth / 1920
     // })
     // erd.listenTo(document, (element) => {
-    //   console.log(element.offsetWidth)
     //   this.beilv2 = element.offsetWidth / 1920
 
     //   // var width = element.offsetWidth;
@@ -347,32 +359,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)
-      // console.log('data', obj.data.FanFrequencyInfo)
-      // // 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) => {
-        console.log('222222222222222', 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);
     },
@@ -404,8 +414,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()
-        console.log(date);
-        const SJGWsUrl = `ws://192.168.0.30:8888/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
@@ -424,8 +433,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()
-        console.log(date);
-        const cutWsUrl = `ws://192.168.0.30:8888/websocket/message?userId=CUTTING${date}`
+        const cutWsUrl = process.env.VUE_APP_Socket_API + `/websocket/message?userId=CUTTING${date}`
 
         this.cutWebsocket = new WebSocket(cutWsUrl)
         // 监听 WebSocket 连接
@@ -439,46 +447,52 @@ export default {
       }
     },
     funInitWebSocket() {
-      // if (typeof (WebSocket) === 'undefined') {
-      //   alert('您的浏览器不支持WebSocket')
-      // } else {
-      //   // const wsUrl = 'ws://192.168.1.74:48080/websocket/message?userId=EN111'
-      //   // const wsUrl = 'ws://192.168.1.104:48082/websocket/message?userId=SJG'
-      //   let date = new Date().valueOf()
-      //   const funWsUrl = `ws://10.70.2.2:8080/xc-screen/websocket/${date}`
-      //   this.funWebsocket = new WebSocket(funWsUrl)
-      //   // 监听 WebSocket 连接
-      //   this.funWebsocket.onopen = this.funWebsocketOnOpen
-      //   // 监听 WebSocket 错误信息
-      //   this.funWebsocket.onerror = this.funWebsocketOnError
-      //   // 监听 WebSocket 消息
-      //   this.funWebsocket.onmessage = this.funWebsocketOnMessage
-      //   // 监听 webSocket 断开信息
-      //   this.funWebsocket.onclose = this.funWebsocketClose
-      // }
+      if (typeof (WebSocket) === 'undefined') {
+        alert('您的浏览器不支持WebSocket')
+      } else {
+        // const wsUrl = 'ws://192.168.1.74:48080/websocket/message?userId=EN111'
+        // const wsUrl = 'ws://192.168.1.104:48082/websocket/message?userId=SJG'
+        let date = new Date().valueOf()
+        const funWsUrl = `ws://10.70.180.10:8081/xc-screen/websocket/${date}`
+        this.funWebsocket = new WebSocket(funWsUrl)
+        // 监听 WebSocket 连接
+        this.funWebsocket.onopen = this.funWebsocketOnOpen
+        // 监听 WebSocket 错误信息
+        this.funWebsocket.onerror = this.funWebsocketOnError
+        // 监听 WebSocket 消息
+        this.funWebsocket.onmessage = this.funWebsocketOnMessage
+        // 监听 webSocket 断开信息
+        this.funWebsocket.onclose = this.funWebsocketClose
+      }
     },
     funWebsocketOnOpen() {
       console.log('socket连接成功')
-      // console.log(this.SJGWebsocket.onmessage);
       this.SJGWebsocket.onmessage()
     },
     // 连接建立失败重连
     funWebsocketOnError(e) {
-      console.log('222222', e)
       this.funInitWebSocket()
     },
     // 数据接收
     funWebsocketOnMessage(e) {
-      // console.log(1111, e)
-      // console.log(this.wsData)
-      // console.log('22222', this.wsData.data)
-      this.funWsData = JSON.parse(e.data)
-      if (this.funWsData.type === 'FanFrequencyInfo') {
+      this.funWsData = e?.data ? JSON.parse(e?.data) : {}
+      // FanInfo
+      if (this.funWsData.type === 'AnnealFanInfo') {
         let arr = []
-        for (let i in this.funWsData.FanFrequencyInfo) {
+        for (let i in this.funWsData.data.annealFanInfo) {
           arr.push({
             equipmentName: i,
-            status: obj.data.FanFrequencyInfo[i]
+            status: this.funWsData.data.annealFanInfo[i]
+          })
+        }
+        this.annealFunList = arr
+      }
+      if (this.funWsData.type === 'FanInfo') {
+        let arr = []
+        for (let i in this.funWsData.data.fanInfo) {
+          arr.push({
+            equipmentName: i,
+            status: this.funWsData.data.fanInfo[i]
           })
         }
         this.funList = arr
@@ -486,20 +500,23 @@ export default {
     },
     cutWebsocketOnOpen() {
       console.log('socket连接成功')
-      // console.log(this.SJGWebsocket.onmessage);
       this.SJGWebsocket.onmessage()
     },
     // 连接建立失败重连
     cutWebsocketOnError(e) {
-      console.log('11111', 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) {
-      // console.log(1111, e)
-      this.cutWsData = JSON.parse(e.data)
-      // console.log('22222', this.wsData.data)
-      console.log('table', this.cutWsData)
+      this.cutWsData = e?.data ? JSON.parse(e?.data) : {}
       if (this.cutWsData.type === 'cutting' && this.cutWsData.name === 'table') {
         this.cutTableDataList = this.cutWsData.productHourData.map((ele, index) => {
           // if (ele.progressRate != 1) {
@@ -507,15 +524,14 @@ 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 + '%'
+            product: (ele.product * 100).toFixed(2) + '%'
 
           }
           // }
         });
-        // console.log(this.orderList)
       } else if (this.cutWsData.type === 'cutting' && this.cutWsData.name === 'chart' && this.cutWsData.dateType === 'day') {
         let nameList = []
         let nameWasteList = []
@@ -524,7 +540,8 @@ export default {
         let wasteList = []
         let sumAreaList = []
         let yieldList = []
-        this.cutTableDataList = this.cutWsData.coldDetData.forEach((ele, index) => {
+        // this.cutTableDataList =
+        this.cutWsData.coldDetData.forEach((ele, index) => {
           nameList.push(ele.lineName)
           topNameList.push('产线: ' + ele.lineName + '   ' + '总面积:' + ele.sumArea)
           productList.push(ele.productArea)
@@ -534,33 +551,22 @@ export default {
           yieldList.push((ele.yield *100).toFixed(3))
         })
         this.$refs.pileChart.initChart(nameList, topNameList, nameWasteList, productList, wasteList)
-        // console.log(this.cutWsData)
-        // console.log('chart',nameList, topNameList, nameWasteList, productList, wasteList);
         this.$refs.productChart.initChart(nameList, yieldList, sumAreaList)
-        // this.$refs.pileChart.initWebSocket
-        // console.log(this.orderList)
       }
     },
     SJGWebsocketOnOpen() {
       console.log('socket连接成功')
-      // console.log(this.SJGWebsocket.onmessage);
       this.SJGWebsocket.onmessage()
     },
     // 连接建立失败重连
     SJGWebsocketOnError(e) {
-      console.log('11111', e)
       this.SJGInitWebSocket()
     },
     // 数据接收
     SJGWebsocketOnMessage(e) {
-      console.log(e);
-      // console.log(1111, e)
       // let data = { "data": { "FanFrequencyInfo": { "1#10处拐角冷却风机": "0", "1#L型吊墙冷却风机": "0", "1#助燃风机": "44.8", "1#澄清带池壁风机": "40", "1#融化带池壁风机": "43", "1#钢碹碴小炉垛风机": "48", "2#10处拐角冷却风机": "50", "2#L型吊墙冷却风机": "49.7", "2#助燃风机": "0", "2#澄清带池壁风机": "0", "2#融化带池壁风机": "0", "2#钢碹碴小炉垛风机": "48", "3#澄清带池壁风机": "0", "3#融化带池壁风机": "0", "4#澄清带池壁风机": "40", "4#融化带池壁风机": "43" } }, "type": "FanFrequencyInfo" }
       // let obj = JSON.parse(data.data)
-      // console.log(obj);
-      this.SJGWsData = JSON.parse(e.data)
-      console.log(this.SJGWsData)
-      // console.log('22222', this.wsData.data)
+      this.SJGWsData = e?.data ? JSON.parse(e?.data) : {}
       if (this.SJGWsData.type === 'isra') {
         this.ISRAList = this.SJGWsData.detData.map((ele, index) => {
           // if (ele.progressRate != 1) {
@@ -574,7 +580,20 @@ export default {
           }
           // }
         });
-        // console.log(this.orderList)
+      } 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) {

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

@@ -2,7 +2,7 @@
  * @Author: gtz
  * @Date: 2022-01-19 15:58:17
  * @LastEditors: zhp
- * @LastEditTime: 2023-11-14 13:28:27
+ * @LastEditTime: 2024-01-04 16:16:22
  * @Description: file content
  * @FilePath: \mt-bus-fe\src\views\OperationalOverview\components\baseContainer\index.vue
 -->

src/views/OperationalOverview/components/baseTable.vue

@@ -1,47 +1,51 @@
 <!--
  * @Date: 2020-12-14 09:07:03
  * @LastEditors: zhp
- * @LastEditTime: 2023-12-28 09:00:44
+ * @LastEditTime: 2024-01-04 16:16:00
  * @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="70"
-        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>
+  <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(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">
 
-        </template>
-      </el-table-column>
-      <slot name="content" />
-    </el-table>
+            <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>
 import { isObject, isString } from 'lodash'
@@ -109,7 +113,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 +187,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/doubleYChart .vue

@@ -60,7 +60,6 @@ export default {
   data() {
     return {
       chart: null,
-      nameList: [],
       series: [{
         type: 'bar',
         data: [],
@@ -227,7 +226,7 @@ export default {
             },
             scale: true,
             type: 'value',
-            name: '产量/片', // y轴上方的单位
+            name: '产量/㎡', // y轴上方的单位
             nameTextStyle: {// y轴上方单位的颜色
               color: '#fff'
             },

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-04 15:52:52
  * @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'">
+      <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="'设备报警'" :height="318" :title-icon="'eqAlarm'">
             <base-table1 :page="1" :limit="9" :show-index="false" :table-config="qualityYearTableProps"
               :table-data="equipmentList" />
           </base-container>
         </el-col>
 
-        <el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="8">
+        <el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="8" height="100%">
           <base-container :title="'各工序缺陷汇总'" :title-icon="'scrap'">
             <base-table1 :page="1" :limit="9" :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" :title="'工单监控'" :title-icon="'eqMonitoring'">
             <!-- <div style="width: 45%;position: absolute; top: 3em; right: 3em;">
               <top-radio-group />
             </div> -->
@@ -56,12 +56,12 @@
                   </el-row> -->
               <el-row v-for="op in orderList" :key="op.id" style="margin-bottom: 1em">
                 <!-- <el-col :span="12"> -->
-                  <el-progress :percentage="op.progressRate * 100" class="custom-progress-bar" />
-                  <!-- <p v-if="op.progressRate === 1" class="now-secondary-title" style="color:#4679FD">
+                <el-progress :percentage="op.progressRate * 100" class="custom-progress-bar" />
+                <!-- <p v-if="op.progressRate === 1" class="now-secondary-title" style="color:#4679FD">
                   <i class="el-icon-check" />
                   {{ op.name }}
                 </p> -->
-                  <p class="now-secondary-title">{{ op.name }}</p>
+                <p class="now-secondary-title">{{ op.name }}</p>
                 <!-- </el-col> -->
               </el-row>
               <!-- <el-row>
@@ -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,10 +637,10 @@ export default {
       if (typeof (WebSocket) === 'undefined') {
         alert('您的浏览器不支持WebSocket')
       } else {
-        const wsUrl = `ws://192.168.0.33:48082/websocket/message?userId=EN${date}`
-        // const wsUrl = 'ws://192.168.1.104:48082/websocket/message?userId=SJG'
         let date = new Date().valueOf()
-        // const wsUrl = 'ws://192.168.0.33:48082/websocket/message?userId=EN111'
+        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)
         // 监听 WebSocket 连接
@@ -657,11 +657,12 @@ export default {
       if (typeof (WebSocket) === 'undefined') {
         alert('您的浏览器不支持WebSocket')
       } else {
-        // const wsUrl = `ws://192.168.0.33:48082/websocket/message?userId=EN${date}`
+        // 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()
         // console.log(date);
-        const SJGWsUrl = `ws://192.168.0.33:48082/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/databoard/components/Container.vue

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

src/views/databoard/components/DefectChart.vue

@@ -0,0 +1,216 @@
+<template>
+  <div class="defect-chart"></div>
+</template>
+<script>
+import * as echarts from 'echarts';
+import resize from './../mixins/resize'
+export default {
+  name: 'DefectChart',
+  mixins: [resize],
+  props: {
+		chartTime: ''
+	},
+  data() {
+    return {
+      chart: null,
+      tempData: []
+    }
+  },
+  computed: {
+    israDayStatistic() {
+      return this.$store.state.websocket.israDayStatistic
+    },
+    israWeekStatistic() {
+      return this.$store.state.websocket.israWeekStatistic
+    },
+    israMonthStatistic() {
+      return this.$store.state.websocket.israMonthStatistic
+    },
+    israYearStatistic() {
+      return this.$store.state.websocket.israYearStatistic
+    }
+  },
+  watch: {
+    israDayStatistic: {
+			handler(newVal, oldVal) {
+				if (this.chartTime === '日') {
+          this.tempData = israDayStatistic
+					this.updateChart()
+				}
+			}
+		},
+    israWeekStatistic: {
+			handler(newVal, oldVal) {
+				if (this.chartTime === '周') {
+          this.tempData = israWeekStatistic
+					this.updateChart()
+				}
+			}
+		},
+    israMonthStatistic: {
+			handler(newVal, oldVal) {
+				if (this.chartTime === '月') {
+          this.tempData = israMonthStatistic
+					this.updateChart()
+				}
+			}
+		},
+    israYearStatistic: {
+			handler(newVal, oldVal) {
+				if (this.chartTime === '年') {
+          this.tempData = israYearStatistic
+					this.updateChart()
+				}
+			}
+		}
+  },
+  mounted() {
+		this.$el.addEventListener('resize', () => {
+			console.log('resziing.....');
+		});
+		this.updateChart()
+	},
+  methods: {
+    updateChart() {
+      if (
+        this.chart !== null &&
+        this.chart !== '' &&
+        this.chart !== undefined
+      ) {
+        this.chart.dispose()
+      }
+      this.chart = echarts.init(this.$el);
+      let legendData = []
+      let xData = []
+      let yData = []
+      this.tempData && this.tempData.length > 0 && this.tempData.map(item => {
+        xData.push(item.name)
+      })
+      var series = [
+        {
+          data: [120, 200, 150, 80, 70, 110, 130],
+          type: 'bar',
+          stack: 'all',
+          name: 'a',
+          barWidth: 12,
+        },
+        {
+          data: [10, 46, 64, '-', 0, '-', 0],
+          type: 'bar',
+          stack: 'all',
+          name: 'b',
+          barWidth: 12,
+        },
+        {
+          data: [30, '-', 0, 20, 10, '-', 0],
+          type: 'bar',
+          stack: 'all',
+          barWidth: 12,
+          name: 'c'
+        },
+        {
+          data: [30, '-', 0, 20, 10, '-', 0],
+          type: 'bar',
+          stack: 'all',
+          barWidth: 12,
+          name: 'd'
+        },
+        {
+          data: [10, 20, 150, 0, '-', 50, 10],
+          type: 'bar',
+          stack: 'all',
+          name: 'e',
+          barWidth: 12,
+          label: {
+            show: true,
+            position: 'top'
+          }
+        }
+      ];
+      var option = {
+        color: ['#2760FF','#5B9BFF','#FFD160','#8167F6', '#99D66C', '#FF8A40'],
+        grid: { top: 40, right: 12, bottom: 20, left: 48 },
+        legend: {
+          top: 10,
+          left: 80,
+          padding: 5,
+          itemWidth: 12,
+          itemHeight: 12,
+          itemGap: 12,
+          height: 12,
+          textStyle: {
+            color: "#DFF1FE",
+            fontSize: 12,
+          },
+          data:['a','b','c','d','e'],
+        },
+        xAxis: {
+          type: "category",
+          data: xData,
+          axisLabel: {
+            color: "#fffc",
+            fontSize: 12,
+          },
+          axisTick: { show: false },
+          axisLine: {
+            lineStyle: {
+              width: 1,
+              color: "#213259",
+            },
+          },
+        },
+        yAxis: {
+          name: "单位/个",
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 10,
+            align: "right",
+          },
+          type: "value",
+          axisLabel: {
+            color: "#fff",
+            fontSize: 12,
+            formatter: "{value}",
+          },
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: "#213259",
+            },
+          },
+          splitLine: {
+            lineStyle: {
+              color: "#213259a0",
+            },
+          },
+        },
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          className: "defect-chart-tooltip"
+        },
+        series: series
+      };
+      option && this.chart.setOption(option)
+    }
+  }
+}
+</script>
+<style scoped lang="scss">
+.defect-chart {
+	width: 100%;
+	height: 100%;
+}
+</style>
+<style>
+  .defect-chart-tooltip {
+    background: #0a2b4f77 !important;
+    border: none !important;
+    backdrop-filter: blur(12px);
+  }
+  .defect-chart-tooltip * {
+    color: #fff !important;
+  }
+</style>

src/views/databoard/components/DefectClassChart.vue

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

src/views/databoard/components/EnergeMonitoringChart.vue

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

src/views/databoard/components/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,48 @@ 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',
 				},
-			},
-		};
-	},
-	computed: {
-		sidebarStatus() {
-			return this.$store.state.app.sidebar.opened;
-		},
-		gasChartMsg() {
-			return this.$store.state.websocket.gasInfo
-		}
-	},
-	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()
 			}
+			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);
 		}
 	},
-	mounted() {
-		this.$el.addEventListener('resize', () => {
-			console.log('resziing.....');
-		});
-		this.chart = echarts.init(this.$el);
-		this.chart.setOption(this.option);
-	},
-	methods: {},
 };
 </script>
 

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

src/views/databoard/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/deepProcessing/BottomTwo.vue

@@ -1,22 +1,34 @@
 <template>
 	<div
 		class="bottom-two"
-		style="
-			display: grid;
-			gap: 16px;
-			grid-template-rows: 462px 462px;
-		">
-		<OrderStatus />
-		<YieldRate />
+		style="flex: 1; display: flex; gap: 20px; padding: 0px 16px">
+		<div class="left-side" style="flex: 1">
+			<div
+				style="
+					display: grid;
+					grid-template-rows: 462px;
+				">
+				<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

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

src/views/databoard/deepProcessing/EnergyMonitoring.vue

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

src/views/databoard/deepProcessing/EqAlarm.vue

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

src/views/databoard/deepProcessing/NumRate.vue

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

src/views/databoard/deepProcessing/TopThree.vue

@@ -1,22 +1,44 @@
 <template>
 	<div
 		class="top-three"
-		style="
-			display: grid;
-			gap: 16px;
-			grid-template-rows: 462px 462px;
-		">
-		<OrderStatus />
-		<YieldRate />
+		style="flex: 1; display: flex; gap: 20px; padding: 0px 16px;">
+		<div class="left-side" style="flex: 1;">
+			<div
+				style="
+					display: grid;
+					grid-template-rows: 462px;
+				">
+				<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,14 @@
+<template>
+  <div style="flex: 1;">
+    <Container name="工单监控" size="small" style="">
+      设备报警111
+    </Container>
+  </div>
+</template>
+<script>
+import Container from '../components/Container.vue';
+export default {
+  name: 'WorkOrderMonitoring',
+  components: { Container },
+}
+</script>

src/views/databoard/deepProcessing/index.vue

@@ -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;
@@ -19,6 +19,17 @@
 			:style="{transform:'scale('+scaleNum+')'}">
 			<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,24 +31,24 @@
 					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 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: {
@@ -62,17 +62,44 @@ export default {
 	},
 	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>

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 ? (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 ? (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 ? (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 ? (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 SelectorBtnGroup from '../components/SelectorBtnGroup';
+import FlueGas from '../components/FlueGas';
 
 export default {
 	name: 'GasHandle',
@@ -130,14 +122,32 @@ export default {
 		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,11 +19,11 @@
 </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 {

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})
-        //   break;
-        // }
-        default:
-      }
-    },
-    // websocket连接失败的回调函数
-    (err) => {
-      console.log('失败的回调函数', err)
-    }
-  )
+  // connectWebsocket(
+  //   // 测试地址
+  //   'ws://10.70.2.2:8080/websocket/message?userId=KI'+sj,
+  //   // 传递给后台的数据
+  //   '',
+  //   // 成功拿到后台返回的数据的回调函数
+  //   (data) => {
+  //     console.log('mes ISRA成功的回调函数, 接收到的data数据: ', data)
+  //     let msgData = JSON.parse(data)
+  //     if (msgData == null) return;
+  //     switch (msgData?.type) {
+  //       case "israKiln": {
+  //         store.dispatch({type: "websocket/setIsraKiln", payload:msgData.detData.dayStatistic})
+  //         break;
+  //       }
+  //       // case "KilnInfo": {
+  //       //   // store.dispatch({type: "websocket/setKilnInfo", payload: msgData.data.kilnInfo})
+  //       //   break;
+  //       // }
+  //       default:
+  //     }
+  //   },
+  //   // websocket连接失败的回调函数
+  //   (err) => {
+  //     console.log('失败的回调函数', err)
+  //   }
+  // )
 
-  // 原料 MA
+  // // 原料 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,155 @@
 <template>
   <div style="flex: 1;">
-    <Container name="订单完成情况" size="small" style="">
-      digndna
+    <Container name="订单完成情况" size="small" class="wholeOrder">
+      <div style="width: 100%;padding: 10px; 20px">
+        <el-table
+        :header-cell-style="{background:'rgba(4, 74, 132, 0.8)',color:'#fff',height: '40px',lineHeight: '40px', padding: 0,fontSize:'16px'}"
+        :row-style="setRowStyle"
+        :data="list"
+        height="225"
+        border
+        style="width: 100%; background: transparent"
+      >
+        <el-table-column
+          v-for="item in tableProps"
+          :key="item.prop"
+          :show-overflow-tooltip="item.showOverflowtooltip"
+          v-bind="item"
+        >
+          <template slot-scope="scope">
+            <component :is="item.subcomponent" v-if="item.subcomponent" :inject-data="{...scope.row, ...item}" @emitData="emitData" />
+            <span v-else>{{ scope.row[item.prop] | commonFilter(item.filter) }}</span>
+          </template>
+        </el-table-column>
+        <slot name="content" />
+      </el-table>
+      </div>
     </Container>
   </div>
 </template>
 <script>
+// :header-cell-style="{background:'rgba(79,114,136,0.29)',color:'#fff'}"
+const tableProps = [
+    {
+      prop: 'time',
+      label: '添加时间',
+      filter: parseTime,
+      minWidth: 140
+    },
+    {
+      prop: 'name',
+      label: '订单名称',
+      minWidth: 120,
+      showOverflowtooltip: true
+    },
+    {
+      prop: 'code',
+      label: '订单编码',
+      minWidth: 180
+    },
+    {
+      prop: 'customerId',
+      label: '客户',
+      showOverflowtooltip: true
+    }
+  ]
 import Container from '../components/Container.vue';
+import { parseTime } from '@/utils/ruoyi'
 export default {
   name: 'OrderStatus',
+  filters: {
+    commonFilter: (source, filterType = a => a) => {
+      return filterType(source)
+    }
+  },
   components: { Container },
+  data() {
+    return {
+      tableProps,
+      list:[
+        {time: '2023-12-12', name: '名称名称'},
+        {time: '2023-12-13', name: '名称名称'},
+        {time: '2023-12-14', name: '名称名称'},
+        {time: '2023-12-15', name: '名称名称'},
+        {time: '2023-12-16', name: '名称名称'},
+        {time: '2023-12-17', name: '名称名称'},
+        {time: '2023-12-18', name: '名称名称'},
+        {time: '2023-12-19', name: '名称名称'},
+        {time: '2023-12-20', name: '名称名称'},
+        {time: '2023-12-21', name: '名称名称'}
+      ]
+    }
+  },
+  mounted() {
+    
+  },
+  methods:{
+    setRowStyle(v) {
+      if (v.rowIndex % 2 === 0) {
+        return {
+          background: 'rgba(11, 84, 153, 0.5)',
+          color: 'rgba(255,255,255,0.8)',
+          height: '40px',
+          lineHeight: '40px',
+          padding: 0,
+          fontSize: '16px'
+        }
+      } else {
+        return {
+          background: 'rgba(4, 74, 132, 0.5)',
+          color: 'rgba(255,255,255,0.8)',
+          height: '40px',
+          lineHeight: '40px',
+          padding: 0,
+          fontSize: '16px'
+        }
+      }
+    }
+  }
 }
-</script>
+</script>
+<style lang='scss'>
+.wholeOrder {
+  .el-table {
+    border: 0;
+  }
+  .el-table::before,.el-table--border::after {
+    background-color: transparent;
+  }
+  .el-table th,td{
+    border-color: #0D1728 !important;
+    padding: 0;
+  }
+  .el-table tr {
+    background: transparent;
+  }
+  .el-table__row:hover > td {
+    background-color: rgba(79,114,136,0.29) !important;
+    }
+
+  .el-table__row--striped:hover > td {
+    background-color: rgba(79,114,136,0.29) !important;
+  }
+  // .el-table {
+  //   border: 0;
+  // }
+  // .el-table::before,.el-table--border::after {
+  //   background-color: transparent;
+  // }
+  // .el-table th,td{
+  //   border-color: #0D1728 !important;
+  //   padding: 0;
+  // }
+  // .el-table tr {
+  //   background: transparent;
+  // }
+  // .el-table__row:hover > td {
+  //   background-color: rgba(79,114,136,0.29) !important;
+  //   }
+
+  // .el-table__row--striped:hover > td {
+  //   background-color: rgba(79,114,136,0.29) !important;
+  // }
+  
+}
+</style>

src/views/databoard/wholePlant/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,127 @@
 <template>
-  <div style="flex: 1;">
+  <div style="flex: 2;" class="aaa">
     <Container name="本日生产良品率" size="small" style="">
-      0000987
+      <el-table
+        :header-cell-style="{background:'rgba(4, 74, 132, 0.8)',color:'#fff',height: '40px',lineHeight: '40px', padding: 0,fontSize:'16px'}"
+        :row-style="setRowStyle"
+        :data="list"
+        border
+        style="width: 100%; background: transparent"
+      >
+        <el-table-column
+          v-for="item in tableProps"
+          :key="item.prop"
+          :show-overflow-tooltip="item.showOverflowtooltip"
+          v-bind="item"
+        >
+          <template slot-scope="scope">
+            <component :is="item.subcomponent" v-if="item.subcomponent" :inject-data="{...scope.row, ...item}" @emitData="emitData" />
+            <span v-else>{{ scope.row[item.prop] | commonFilter(item.filter) }}</span>
+          </template>
+        </el-table-column>
+        <slot name="content" />
+      </el-table>
     </Container>
   </div>
 </template>
 <script>
-import Container from '../components/Container.vue';
+const tableProps = [
+    {
+      prop: 'time',
+      label: '添加时间',
+      filter: parseTime,
+      minWidth: 140
+    },
+    {
+      prop: 'name',
+      label: '订单名称',
+      minWidth: 120,
+      showOverflowtooltip: true
+    },
+    {
+      prop: 'code',
+      label: '订单编码',
+      minWidth: 180
+    },
+    {
+      prop: 'customerId',
+      label: '客户',
+      showOverflowtooltip: true
+    }
+  ]
+import Container from '../components/Container';
+import { parseTime } from '@/utils/ruoyi'
 export default {
   name: 'YieldRate',
+  filters: {
+    commonFilter: (source, filterType = a => a) => {
+      return filterType(source)
+    }
+  },
   components: { Container },
+  data() {
+    return {
+      tableProps,
+      list:[
+        {time: '2023-12-12', name: '名称名称'},
+        // {time: '2023-12-13', name: '名称名称'},
+        // {time: '2023-12-14', name: '名称名称'},
+        // {time: '2023-12-15', name: '名称名称'},
+        // {time: '2023-12-16', name: '名称名称'},
+        // {time: '2023-12-17', name: '名称名称'},
+        // {time: '2023-12-18', name: '名称名称'},
+        // {time: '2023-12-19', name: '名称名称'},
+        // {time: '2023-12-20', name: '名称名称'},
+        // {time: '2023-12-21', name: '名称名称'}
+      ]
+    }
+  },
+  methods: {
+    setRowStyle(v) {
+      if (v.rowIndex % 2 === 0) {
+        return {
+          background: 'rgba(11, 84, 153, 1)',
+          color: 'rgba(255,255,255,0.8)',
+          height: '40px',
+          lineHeight: '40px',
+          padding: 0,
+          fontSize: '16px'
+        }
+      } else {
+        return {
+          background: 'rgba(4, 74, 132, 1)',
+          color: 'rgba(255,255,255,0.8)',
+          height: '40px',
+          lineHeight: '40px',
+          padding: 0,
+          fontSize: '16px'
+        }
+      }
+    }
+  }
 }
-</script>
+</script>
+<style lang='scss'>
+.aaa {
+  .el-table {
+    border: 0;
+  }
+  .el-table::before,.el-table--border::after {
+    background-color: transparent;
+  }
+  .el-table th,td{
+    border-color: #0D1728 !important;
+    padding: 0;
+  }
+  .el-table tr {
+    background: transparent;
+  }
+  .el-table__row:hover > td {
+    background-color: rgba(79,114,136,0.29) !important;
+    }
+
+  .el-table__row--striped:hover > td {
+    background-color: rgba(79,114,136,0.29) !important;
+  }
+}
+</style>

src/views/databoard/wholePlant/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/login.vue

@@ -47,7 +47,7 @@
 						向世界先进水平挑战，为人类社会文明做贡献
 					</p>
 				</div>
-				<video
+				<!-- <video
 					src="/static/videos/login.webm"
 					muted
 					autoplay
@@ -58,7 +58,7 @@
 						top: 28%;
 						width: 100%;
 						height: 70%;
-					"></video>
+					"></video> -->
 			</div>
 			<!-- 表单 -->
 			<div class="field">

src/views/specialEquipment/basic/FireFighthing.vue

@@ -170,7 +170,12 @@ export default {
 				{ width: 256, prop: 'code', label: '设备编码' },
 				{ prop: 'location', label: '位置' },
 				{ prop: 'responsiblePeopleName', label: '负责人' },
-				{ prop: 'dueTime', label: '有效期至' },
+				{
+					prop: 'dueDate',
+					label: '有效期至',
+					filter: (val) =>
+						val != null ? moment(val).format('yyyy-MM-DD HH:mm:ss') : '--',
+				},
 				{ prop: 'remark', label: '备注' },
 			],
 			searchBarFormConfig: [
@@ -250,8 +255,8 @@ export default {
 				[
 					{
 						datetime: true,
-						label: '有效期至',
-						prop: 'dueTime',
+						label: '有效期',
+						prop: 'dueDate',
 						bind: { clearable: true },
 					},
 					{},

src/views/specialEquipment/maintain/Record.vue

@@ -195,18 +195,21 @@ export default {
 						{ id: 3, name: '特种设备' },
 					],
 					filterable: true,
+					defaultSelect: null
 				},
 				{
 					type: 'select',
 					label: '设备',
 					placeholder: '请选择设备',
 					param: 'equipmentId',
+					defaultSelect: null
 				},
 				{
 					type: 'select',
 					label: '计划名称',
 					placeholder: '请选择计划名称',
 					param: 'maintainPlanId',
+					defaultSelect: null
 				},
 				// 开始结束时间
 				{
@@ -220,6 +223,7 @@ export default {
 					endPlaceholder: '结束日期',
 					defaultTime: ['00:00:00', '23:59:59'],
 					param: 'startTime',
+					defaultSelect: null
 					// width: 350,
 				},
 				{
@@ -229,6 +233,7 @@ export default {
 						{ name: '是', id: 1 },
 						{ name: '否', id: 2 },
 					],
+					defaultSelect: null,
 					param: 'relatePlan',
 				},
 				{
@@ -434,12 +439,16 @@ export default {
 	created() {
 		this.initSearchBar();
 		if (this.$route.query) {
+			this.queryParams.specialType =
+				this.$route.query?.specialType ?? undefined;
 			this.queryParams.equipmentId =
 				this.$route.query?.equipmentId ?? undefined;
 			this.queryParams.maintainPlanId =
 				this.$route.query?.maintainPlanId ?? undefined;
 			this.queryParams.relatePlan = this.$route.query?.relatePlan ?? undefined;
 			this.queryParams.startTime = this.$route.query?.createTime ?? undefined;
+			this.searchBarFormConfig[0].defaultSelect =
+				this.$route.query.specialType ?? undefined;
 			this.searchBarFormConfig[1].defaultSelect =
 				this.$route.query.equipmentId ?? undefined;
 			this.searchBarFormConfig[2].defaultSelect =

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,227 @@
+import { WsConnect } from './websocket'
+import store from "@/store";
+
+// 创建websocket链接
+
+const timestr = new Date().getTime()
+const dcsConn = new WsConnect(
+  // websocket地址
+  'ws://10.70.180.10:8081/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(
+  'ws://10.70.2.2:8080/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;
+      }
+      // case "KilnInfo": {
+      //   // store.dispatch({type: "websocket/setKilnInfo", payload: msgData.data.kilnInfo})
+      //   break;
+      // }
+      default:
+    }
+  },
+  (err) => {
+    console.log('失败的回调函数', err)
+  }
+)
+
+// 原料 MA
+const mesMA = new WsConnect(
+  'ws://10.70.2.2:8080/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;
+      }
+      // case "KilnInfo": {
+      //   // store.dispatch({type: "websocket/setKilnInfo", payload: msgData.data.kilnInfo})
+      //   break;
+      // }
+      default:
+    }
+  },
+  (err) => {
+    console.log('失败的回调函数', err)
+  }
+)
+// 能耗 EN
+const mesEN = new WsConnect(
+  // websocket地址
+  'ws://10.70.2.2:8080/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地址
+  'ws://10.70.2.2:8080/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地址
+  'ws://10.70.2.2:8080/websocket/message?userId=IS'+timestr,
+  // 传递给后台的数据
+  '',
+  // 成功拿到后台返回的数据的回调函数
+  (data) => {
+    // console.log('mes 缺陷成功的回调函数, 接收到的data数据: ', data)
+    let msgData = JSON.parse(data)
+    if (msgData == null) return;
+    switch (msgData?.type) {
+      case "isra": {
+        store.dispatch({type: "websocket/setDefectChart", payload:{
+          dayStatistic: msgData.detData.dayStatistic,
+          weekStatistic: msgData.detData.weekStatistic,
+          monthStatistic: msgData.detData.monthStatistic,
+          yearStatistic: msgData.detData.yearStatistic,
+        }})
+        break;
+      }
+      default:
+    }
+  },
+  // websocket连接失败的回调函数
+  (err) => {
+    console.log('失败的回调函数', err)
+  }
+)
+
+// 产线产量及良品率 SJG
+const mesSJG = new WsConnect(
+  // websocket地址
+  // 'ws://10.70.2.2:8080/websocket/message?userId=SJG'+timestr,
+  'ws://192.168.1.104:48082/websocket/message?userId=SJG'+timestr,
+  // 传递给后台的数据
+  '',
+  // 成功拿到后台返回的数据的回调函数
+  (data) => {
+    // console.log('mes 产线产量及良品率成功的回调函数, 接收到的data数据: ', data)
+    let msgData = JSON.parse(data)
+    if (msgData == null) return;
+    switch (msgData?.type) {
+      case "productline": {
+        store.dispatch({type: "websocket/setProductline", payload:msgData.detData})
+        break;
+      }
+      default:
+    }
+  },
+  // websocket连接失败的回调函数
+  (err) => {
+    console.log('失败的回调函数', err)
+  }
+)
+
+
+export const getDcsMsg = () => {
+  dcsConn.createWebSoket()
+  mesIsra.createWebSoket()
+  mesMA.createWebSoket()
+  mesEN.createWebSoket()
+  mesGAS.createWebSoket()
+  mesIS.createWebSoket()
+  // mesSJG.createWebSoket()
+}
+export const closeDcsMsg = () => {
+  dcsConn.closeWebsocket()
+  mesIsra.closeWebsocket()
+  mesMA.closeWebsocket()
+  mesEN.closeWebsocket()
+  mesGAS.closeWebsocket()
+  mesIS.closeWebsocket()
+  // mesSJG.closeWebsocket()
+}