大屏看板电视适配

f8f15897 · 冀忠欣 · df835fc2 · f8f15897
Commit f8f15897 authored Jun 24, 2025 by 冀忠欣
Hide whitespace changes
Inline Side-by-side

Showing with 59 additions and 47 deletions

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

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