更新金牛设备实时看板页面

jnzg_project/static/src/view/equipment_status_jnzg.html

@@ -160,7 +160,7 @@
   let vue = new Vue({
     el: "#app",
     delimiters: ["[[", "]]"], // 替换原本vue的[[ key ]]取值方式(与odoo使用的jinja2冲突问题)
-    data: function () {
+    data() {
       return {
         dwsURL: "", // 基地址
         baseURL: "https://dws-platform.xbg.rokeris.com/dev-api", // 基地址
@@ -175,24 +175,24 @@
         equipmentMaintenanceInfos: [], // 设备维护信息
       }
     },
-    created: function () {
+    created() {
       // 截取url后面的参数
       this.factoryCode = this.getUrlSearch("factory_code") || ""
       // 初始化当前时间
       this.initCurrentTimeFn()
     },
-    mounted: async function () {
-      this.$nextTick(function () {
+    async mounted() {
+      this.$nextTick(() => {
         document.getElementById("bodyId").style.display = "block"
       })
       // 初始化数据 - 实际使用时取消这行的注释
       await this.initData()
       // 设置定时刷新（每分钟刷新一次，静默模式）
-      this.refreshInterval = setInterval(function () {
+      this.refreshInterval = setInterval(() => {
         this.initData(true) // 传入true表示静默刷新，不显示加载提示
-      }.bind(this), 60000)
+      }, 60000)
     },
-    beforeDestroy: function () {
+    beforeDestroy() {
       // 清除定时器
       if (this.refreshInterval) clearInterval(this.refreshInterval)
       if (this.timer) clearInterval(this.timer)
@@ -241,8 +241,8 @@
         this.isFullscreen = false
       },
       // 初始化当前时间
-      initCurrentTimeFn: function () {
-        this.timer = setInterval(function () {
+      initCurrentTimeFn() {
+        this.timer = setInterval(() => {
           const now = new Date()
           const year = now.getFullYear()
           const month = String(now.getMonth() + 1).padStart(2, "0")
@@ -251,10 +251,10 @@
           const minutes = String(now.getMinutes()).padStart(2, "0")
           const seconds = String(now.getSeconds()).padStart(2, "0")
           this.currentTime = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
-        }.bind(this), 1000)
+        }, 1000)
       },
       // 通过网址跳转过来的页面,截取后面的参数
-      getUrlSearch: function (name) {
+      getUrlSearch(name) {
         // 未传参，返回空
         if (!name) return ""
         // 查询参数：先通过search取值，如果取不到就通过hash来取
@@ -272,8 +272,7 @@
         return r[2]
       },
       // 初始化数据
-      initData: async function (silent) {
-        if (silent === undefined) silent = false
+      async initData(silent = false) {
         try {
           // 只有在非静默模式下才显示加载提示
           if (!silent) this.loading = true
@@ -292,7 +291,7 @@
         }
       },
       // 获取设备计划运行时间
-      getDevicePlanTime: async function () {
+      async getDevicePlanTime() {
         try {
           // 发送请求获取计划运行时间
           const response = await axios({
@@ -322,7 +321,7 @@
         }
       },
       // 获取所有已绑定设备数据
-      getAllEquipmentData: async function () {
+      async getAllEquipmentData() {
         try {
           // 发送请求获取所有已绑定设备数据
           const response = await axios({
@@ -347,7 +346,7 @@
         }
       },
       // 获取设备状态列表
-      getDeviceStateList: async function (planTimeList) {
+      async getDeviceStateList(planTimeList) {
         try {
           // 使用CORS代理
           // 发送请求获取设备状态
@@ -375,7 +374,7 @@
         }
       },
       // 获取factoryCode
-      getFactoryCode: async function (planTimeList) {
+      async getFactoryCode(planTimeList) {
         try {
           // 使用CORS代理
           // 发送请求获取设备状态
@@ -400,7 +399,7 @@
         }
       },
       // 获取设备维护信息
-      getEquipmentMaintenanceInfoApi: async function () {
+      async getEquipmentMaintenanceInfoApi() {
         try {
           const response = await axios({
             method: "post",
@@ -408,10 +407,10 @@
             data: {},
             headers: { "Content-Type": "application/json" },
           })
-          if (response && response.data && response.data.result && response.data.result.state === "success") {
+          if (response?.data?.result?.state === "success") {
             this.equipmentMaintenanceInfos = response.data.result.equipment_maintenance_list || []
           } else {
-            const errorMsg = response && response.data && response.data.result && response.data.result.msgs || "获取设备维护信息失败！"
+            const errorMsg = response?.data?.result?.msgs || "获取设备维护信息失败！"
             throw new Error(errorMsg)
           }
         } catch (error) {
@@ -421,8 +420,8 @@
       // 处理设备状态数据
       processDeviceStateData: function (deviceStateData) {
         var self = this
-        self.allEquipmentData.forEach(function (item) {
-          self.equipmentMaintenanceInfos.forEach(function (it) {
+        self.allEquipmentData.forEach(item => {
+          self.equipmentMaintenanceInfos.forEach(it => {
             if (it.equipment_code == item.code) {
               item['check_info'] = it.check_info
               item['change_info'] = it.change_info
@@ -484,7 +483,7 @@
             aging = self.formatDecimal(device.pulse_count / Math.floor(Number(device.run_seconds) / 3600), 2)
           }
           // 在所有设备列表中查找匹配的设备
-          if (self.allEquipmentData && self.allEquipmentData.length) {
+          if (self.allEquipmentData && self.allEquipmentData.length > 0) {
             var matchedDevice = self.allEquipmentData.find(function (equip) {
               return equip.code === device.code
             })
@@ -520,10 +519,11 @@
             finish_qty: finishQty
           }
         })
-        this.deviceList = this.deviceList.filter(function (device) { return device })
+        this.deviceList = this.deviceList.filter((device) => device)
       },
       // 处理小数方法
-      formatDecimal: function (value, digit) {
+      formatDecimal(value, digit) {
+        if (value === Infinity) return 0
         // 没设置位数默认返回原来的值
         if (!digit) return value
         // 处理 null/undefined/空字符串
@@ -537,12 +537,12 @@
         // 截取小数位数
         const decimalPart = parsedNum.toString().split('.')[1]
         // 检查小数长度是否大于要求位数，小于或等于直接返回
-        if (decimalPart && decimalPart.length <= digit) return parsedNum
+        if (decimalPart.length <= digit) return parsedNum
         // 保留要求位数（处理浮点误差）
         return parseFloat((Math.round((parsedNum + Number.EPSILON) * 100) / 100).toFixed(digit))
       },
       // 处理时间方法
-      formatTime: function (seconds) {
+      formatTime(seconds) {
         if (seconds < 60) {
           return `0min` // 不足 1 分钟显示 0min
         } else if (seconds < 3600) {
@@ -558,7 +558,7 @@
         }
       },
       // 获取卡片的CSS类名
-      getCardClass: function (status) {
+      getCardClass(status) {
         switch (status) {
           case "running":
             return "card-running"
@@ -572,7 +572,7 @@
         }
       },
       // 获取边框的CSS类名
-      getBorderClass: function (status) {
+      getBorderClass(status) {
         switch (status) {
           case "running":
             return "border-running";
@@ -586,7 +586,7 @@
         }
       },
       // 获取设备状态对应的CSS类名
-      getStatusClass: function (status) {
+      getStatusClass(status) {
         switch (status) {
           case "running":
             return "status-running";
@@ -600,7 +600,7 @@
         }
       },
       // 获取波浪效果的类名
-      getWaveClass: function (status) {
+      getWaveClass(status) {
         switch (status) {
           case "running":
             return "wave-running";
@@ -614,7 +614,7 @@
         }
       },
       // 获取波浪高度
-      getWaveHeight: function (status, percentage) {
+      getWaveHeight(status, percentage) {
         // 将百分比限制在10%-100%之间，确保即使是低百分比也有一定的水位可见
         let height = percentage;
 
@@ -630,7 +630,7 @@
       },
 
       // 获取设备状态对应的文本
-      getStatusText: function (status) {
+      getStatusText(status) {
         switch (status) {
           case "running":
             return "运行中";
@@ -644,7 +644,7 @@
         }
       },
       // 获取设备维护信息状态颜色
-      getMaintenanceColor: function (status, type) {
+      getMaintenanceColor(status, type) {
         if (type && type == '维修' && status == 'in_progress') {
           return "rgba(230, 188, 92, 0.7)"
         } else if (status == 'no_task' || status == 'in_progress' || status == 'finished') {
@@ -656,7 +656,7 @@
         }
       },
       // 获取设备维护信息状态颜色
-      getMaintenanceText: function (status, type) {
+      getMaintenanceText(status, type) {
         if (type == '点检' || type == '保养') {
           if (status == 'no_task') return "无任务"
           if (status == 'not_started') return "未开始"
@@ -674,11 +674,10 @@
         return "未知"
       },
       // 处理小数位数方法
-      toFixedHandle: function (value, num) {
-        if (num === undefined) num = 4
+      toFixedHandle(value, num = 4) {
         if (value) {
           let strValue = String(value);
-          if (strValue.split(".") && strValue.split(".").length > 1 || strValue.split(".")[1] && strValue.split(".")[1].length > num) {
+          if (strValue.split(".").length > 1 || strValue.split(".")[1]?.length > num) {
             strValue = Number(strValue).toFixed(num);
           }
           return Number(strValue);
@@ -688,7 +687,7 @@
       },
 
       // 计算高度百分比
-      calculateHeight: function (hours) {
+      calculateHeight(hours) {
         // 24小时对应整个高度(100%)
         // 每4小时对应一个刻度区间，总共6个区间
         // 计算每小时占的百分比：100% / 24 ≈ 4.167%
@@ -700,13 +699,13 @@
       },
 
       // 显示完整标题
-      showFullTitle: function (event, device) {
+      showFullTitle(event, device) {
         const fullTitle = device.name + " | " + device.code;
         event.target.setAttribute("title", fullTitle);
       },
 
       // 获取ERR文字的CSS类名
-      getErrClass: function (status) {
+      getErrClass(status) {
         if (status === "error") {
           return "err-error";
         }
@@ -714,7 +713,7 @@
       },
 
       // 获取OFF文字的CSS类名
-      getOffClass: function (status) {
+      getOffClass(status) {
         if (status === "off") {
           return "off-status";
         }
@@ -955,13 +954,14 @@
     /* 让每个区域平均分配宽度 */
     position: relative;
     height: 100%;
+    gap: 5px;
   }
 
   /* 新增：图标和文字的水平容器 */
   .maintenance-header {
     display: flex;
     align-items: center;
-    margin-bottom: 5px;
+    gap: 5px;
   }
 
   /* 维护状态竖向虚线分割 - 改为竖向分割线，从上到下，实现密闭效果 */
@@ -1030,7 +1030,6 @@
     margin-bottom: 0;
     /* 移除底部边距 */
     text-align: center;
-    margin-left: 5px;
   }
 
   .maintenance-status-badge {
@@ -1065,6 +1064,7 @@
     display: flex;
     justify-content: space-between;
     width: 100%;
+    gap: 10px;
     padding: 0 10px;
     /* 增加间距 */
   }
@@ -1085,7 +1085,6 @@
   }
 
   .stat-item:nth-child(2) {
-    margin: 0 10px;
     background: linear-gradient(135deg, rgba(46, 204, 113, 0.6), rgba(39, 174, 96, 0.6));
   }
 
@@ -1141,6 +1140,7 @@
   .left-status {
     display: flex;
     flex-direction: column;
+    gap: 8px;
     flex: 0 0 auto;
     /* 改为固定宽度 */
     width: 80px;
@@ -1151,6 +1151,7 @@
   .right-status {
     display: flex;
     flex-direction: column;
+    gap: 8px;
     flex: 0 0 auto;
     /* 改为固定宽度 */
     width: 80px;
@@ -1175,14 +1176,7 @@
     display: flex;
     align-items: center;
     justify-content: flex-start;
-  }
-
-  .time-item-side:nth-child(1) {
-    margin-bottom: 5px;
-  }
-
-  .time-item-side:nth-child(2) {
-    margin-top: 5px;
+    gap: 6px;
   }
 
   /* 右侧状态项布局调整 */
@@ -1205,12 +1199,6 @@
     font-size: 10px;
     color: rgba(255, 255, 255, 0.9);
     font-weight: 500;
-    margin-left: 6px;
-  }
-
-  .right-status .time-value {
-    margin-left: 0;
-    margin-right: 6px;
   }
 
   /* 移动端虚线样式调整 */
@@ -1466,6 +1454,7 @@
     .maintenance-header {
       margin-bottom: 6px;
       /* 减小间距 */
+      gap: 4px;
     }
 
     .maintenance-icon {