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

15f1b20f · guibin · c1835c7b · 15f1b20f
Commit 15f1b20f authored Jul 16, 2025 by guibin
Hide whitespace changes
Inline Side-by-side

Showing with 48 additions and 59 deletions

jnzg_project/static/src/view/equipment_status_jnzg.html
+48 -59

No files found.
--- a/jnzg_project/static/src/view/equipment_status_jnzg.html
+++ b/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 () {
+    async mounted() {
-      this.$nextTick(function () {
+      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 () {
+      initCurrentTimeFn() {
-        this.timer = setInterval(function () {
+        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) {
+      async initData(silent = false) {
-        if (silent === undefined) 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.allEquipmentData.forEach(item => {
-          self.equipmentMaintenanceInfos.forEach(function (it) {
+          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) {
+      toFixedHandle(value, num = 4) {
-        if (num === undefined) 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;
-  }
+    gap: 6px;
-  .time-item-side:nth-child(1) {
-    margin-bottom: 5px;
-  }
-  .time-item-side:nth-child(2) {
-    margin-top: 5px;
  }
  /* 右侧状态项布局调整 */
@@ -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 {