迁移设备监控模块

- 新增计划与生产设备监控 V2 页面 - 新增设备监控接口、路由和中英文文案 - 更新迁移任务列表中的设备监控状态
2026-06-22 15:50:19 +08:00
parent b942d24f2c
commit eb31da72e0
6 changed files with 283 additions and 3 deletions
--- a/docs/迁移任务列表.md
+++ b/docs/迁移任务列表.md
@@ -3,8 +3,8 @@
 > 根据 `后台Webman界面截图对照表.md` 生成。状态以当前 V2 项目中已落地的页面目录为准。

 - 总功能数：79
- 已迁移：23
- 未迁移：56
+- 已迁移：24
+- 未迁移：55

 | 状态 | 一级模块 | 二级模块 | 三级模块 | 功能说明 | V2 目标路径 |
 |:---:|---|---|---|---|---|
@@ -51,7 +51,7 @@
 | ⬜ | 计划与生产 (Planning & Production) | 生产监控 (Production Monitoring) | 电池复投管理 (Rework Management) | 返工管理 | 待确认 |
 | ✅ | 计划与生产 (Planning & Production) | 生产监控 (Production Monitoring) | 托盘管理 (Tray Management) | 托盘管理 | `src/views/planning-production/production-monitoring/tray-management/` |
 | ⬜ | 计划与生产 (Planning & Production) | 生产监控 (Production Monitoring) | 托盘登录 (Tray Registration) | 托盘登记 | 待确认 |
-| ⬜ | 计划与生产 (Planning & Production) | 生产监控 (Production Monitoring) | 设备监控 (Equipment Monitoring) | 设备监控 | 待确认 |
+| ✅ | 计划与生产 (Planning & Production) | 生产监控 (Production Monitoring) | 设备监控 (Equipment Monitoring) | 设备监控 | `src/views/planning-production/production-monitoring/equipment-monitoring/` |
 | ✅ | 计划与生产 (Planning & Production) | 生产监控 (Production Monitoring) | 电池工序管理 (Process Execution) | 工序管理 | `src/views/planning-production/production-monitoring/process-execution/` |
 | ⬜ | 质量管理 (Quality Management) | 过程控制 (Process Control) | 检验类别管理 (Inspection Type Management) |  | 待确认 |
 | ⬜ | 质量管理 (Quality Management) | 过程控制 (Process Control) | 首巡检项目配置 (First Article Inspection Configuration) |  | 待确认 |
--- a/src/api/planning-production/equipment-monitoring.js
+++ b/src/api/planning-production/equipment-monitoring.js
@@ -0,0 +1,19 @@
+import { request } from '@/api/_service'
+
+const BASE = 'production_configuration/device_model/device_management/'
+
+function apiParams (method, data = {}) {
+  return {
+    method,
+    platform: 'background',
+    ...data
+  }
+}
+
+export function getDeviceAll (data) {
+  return request({
+    url: BASE + 'all',
+    method: 'get',
+    params: apiParams('production_configuration_device_model_device_management_all', data)
+  })
+}
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -993,6 +993,23 @@
 					"class": "Grade",
 					"previous_process": "Previous Process",
 					"current_process": "Current Process"
+				},
+				"equipment_monitoring": {
+					"device_total": "Total Devices",
+					"device_code": "Device Code",
+					"device_name": "Device Name",
+					"area": "Plant Area",
+					"production_line": "Production Line",
+					"workstation": "Workstation",
+					"last_response": "Last Response",
+					"work_status": "Status",
+					"msg": "Message",
+					"run": "Running",
+					"manual": "Manual",
+					"finished": "Completed",
+					"exception": "Exception",
+					"offline": "Offline",
+					"idle": "Waiting for Material"
 				}
 			},
 			"alert_center": {
--- a/src/locales/zh-chs.json
+++ b/src/locales/zh-chs.json
@@ -993,6 +993,23 @@
 					"class": "档位",
 					"previous_process": "上一工序",
 					"current_process": "当前工序"
+				},
+				"equipment_monitoring": {
+					"device_total": "设备总数",
+					"device_code": "设备编码",
+					"device_name": "设备名称",
+					"area": "厂区",
+					"production_line": "产线",
+					"workstation": "工作站",
+					"last_response": "最后响应",
+					"work_status": "工作状态",
+					"msg": "信息",
+					"run": "运行中",
+					"manual": "手动中",
+					"finished": "已完成",
+					"exception": "异常中",
+					"offline": "离线中",
+					"idle": "待料中"
 				}
 			},
 			"alert_center": {
--- a/src/router/modules/planning-production.js
+++ b/src/router/modules/planning-production.js
@@ -44,6 +44,12 @@ export default {
      meta: { ...meta, cache: true, title: '托盘管理' },
      component: _import('planning-production/production-monitoring/tray-management')
    },
+    {
+      path: 'produce/monitor/device',
+      name: `${pre}monitor-device`,
+      meta: { ...meta, cache: true, title: '设备监控' },
+      component: _import('planning-production/production-monitoring/equipment-monitoring')
+    },
    {
      path: 'produce/monitor/change_battery_process',
      name: `${pre}monitor-change_battery_process`,
--- a/src/views/planning-production/production-monitoring/equipment-monitoring/index.vue
+++ b/src/views/planning-production/production-monitoring/equipment-monitoring/index.vue
@@ -0,0 +1,221 @@
+<template>
+  <d2-container>
+    <template #header>
+      <div class="status-board">
+        <el-card
+          :class="['status-card', 'status-card--all', { 'is-active': activeStatus === '' }]"
+          shadow="hover"
+          @click.native="selectStatus('all')"
+        >
+          <span class="status-card__label">{{ $t(key('device_total')) }}</span>
+          <strong class="status-card__value">{{ totalDeviceCount }}</strong>
+        </el-card>
+        <el-card
+          v-for="item in statusCards"
+          :key="item.status"
+          :class="['status-card', 'status-card--' + item.className, { 'is-active': activeStatus === item.status }]"
+          shadow="hover"
+          @click.native="selectStatus(item.status)"
+        >
+          <span class="status-card__label">{{ $t(key(item.label)) }}</span>
+          <strong class="status-card__value">{{ item.count }}</strong>
+        </el-card>
+      </div>
+    </template>
+
+    <page-table
+      :columns="columns"
+      :data="tableData"
+      :loading="loading"
+      :toolbar-buttons="[]"
+      :row-buttons="[]"
+      :pagination="null"
+      :table-attrs="{ size: 'mini', rowKey: 'id', highlightCurrentRow: true }"
+      auto-height
+    >
+      <template #col-status="{ row }">
+        <el-tag :color="statusColor(row.status)" class="status-tag">
+          {{ statusName(row.status) }}
+        </el-tag>
+      </template>
+      <template #col-msg="{ row }">
+        <span>{{ row.status === 'TROUBLE' ? row.msg : '' }}</span>
+      </template>
+      <template #empty>
+        <el-empty :description="$t('暂无数据')" :image-size="80" />
+      </template>
+    </page-table>
+  </d2-container>
+</template>
+
+<script>
+import { useTableColumns } from '@/composables/useTableColumns'
+import { i18nMixin } from '@/composables/useI18n'
+import PageTable from '@/components/page-table'
+import { getDeviceAll } from '@/api/planning-production/equipment-monitoring'
+
+const STATUS_META = {
+  FINISH: { label: 'finished', color: '#409EFF', className: 'finish' },
+  RUN: { label: 'run', color: '#67C23A', className: 'run' },
+  OFFLINE: { label: 'offline', color: '#A1A1A1', className: 'offline' },
+  TROUBLE: { label: 'exception', color: '#F56C6C', className: 'trouble' },
+  IDLE: { label: 'idle', color: '#E6A23C', className: 'idle' },
+  PAUSE: { label: 'manual', color: '#EF42EF', className: 'pause' }
+}
+
+export default {
+  name: 'planning-production-equipment-monitoring',
+  components: { PageTable },
+  mixins: [i18nMixin('page.planning_production.production_monitoring.equipment_monitoring')],
+  data () {
+    return {
+      loading: false,
+      activeStatus: '',
+      tableData: [],
+      statusNum: [],
+      refreshTimer: null
+    }
+  },
+  computed: {
+    columns () {
+      return useTableColumns([
+        { prop: 'code', label: this.key('device_code'), minWidth: 140, showOverflowTooltip: true },
+        { prop: 'name', label: this.key('device_name'), minWidth: 160, showOverflowTooltip: true },
+        { prop: 'area_name', label: this.key('area'), minWidth: 120, showOverflowTooltip: true },
+        { prop: 'line_name', label: this.key('production_line'), minWidth: 140, showOverflowTooltip: true },
+        { prop: 'workstation_name', label: this.key('workstation'), minWidth: 140, showOverflowTooltip: true },
+        { prop: 'heartbeat', label: this.key('last_response'), minWidth: 170, showOverflowTooltip: true },
+        { prop: 'status', label: this.key('work_status'), minWidth: 110, slot: 'status' },
+        { prop: 'msg', label: this.key('msg'), minWidth: 180, slot: 'msg', showOverflowTooltip: true }
+      ], {
+        selectionWidth: 0,
+        indexWidth: 55
+      })
+    },
+    statusCountMap () {
+      return this.statusNum.reduce((result, item) => {
+        result[item.status] = Number(item.num || 0)
+        return result
+      }, {})
+    },
+    totalDeviceCount () {
+      return Object.keys(this.statusCountMap).reduce((total, status) => {
+        return total + this.statusCountMap[status]
+      }, 0)
+    },
+    statusCards () {
+      return Object.keys(STATUS_META).map(status => ({
+        status,
+        count: this.statusCountMap[status] || 0,
+        ...STATUS_META[status]
+      }))
+    }
+  },
+  mounted () {
+    this.fetchData()
+    this.refreshTimer = setInterval(() => {
+      this.fetchData(false)
+    }, 5000)
+  },
+  beforeDestroy () {
+    if (this.refreshTimer) {
+      clearInterval(this.refreshTimer)
+      this.refreshTimer = null
+    }
+  },
+  methods: {
+    selectStatus (status) {
+      this.activeStatus = status === 'all' ? '' : status
+      this.fetchData()
+    },
+    async fetchData (showLoading = true) {
+      if (showLoading) this.loading = true
+      try {
+        const res = await getDeviceAll({ status: this.activeStatus })
+        const payload = res && res.data ? res.data : (res || {})
+        this.statusNum = Array.isArray(payload.status_num) ? payload.status_num : []
+        this.tableData = Array.isArray(payload.data) ? payload.data : []
+      } finally {
+        if (showLoading) this.loading = false
+      }
+    },
+    statusName (status) {
+      const meta = STATUS_META[status]
+      return meta ? this.$t(this.key(meta.label)) : status
+    },
+    statusColor (status) {
+      const meta = STATUS_META[status]
+      return meta ? meta.color : '#909399'
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.status-board {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
+  gap: 10px;
+}
+
+.status-card {
+  cursor: pointer;
+  border-left: 4px solid #dcdfe6;
+
+  ::v-deep .el-card__body {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 12px 14px;
+  }
+
+  &.is-active {
+    border-color: #303133;
+    box-shadow: 0 2px 10px rgba(48, 49, 51, 0.12);
+  }
+}
+
+.status-card--all {
+  border-left-color: #303133;
+}
+
+.status-card--finish {
+  border-left-color: #409EFF;
+}
+
+.status-card--run {
+  border-left-color: #67C23A;
+}
+
+.status-card--offline {
+  border-left-color: #A1A1A1;
+}
+
+.status-card--trouble {
+  border-left-color: #F56C6C;
+}
+
+.status-card--idle {
+  border-left-color: #E6A23C;
+}
+
+.status-card--pause {
+  border-left-color: #EF42EF;
+}
+
+.status-card__label {
+  color: #606266;
+  font-size: 13px;
+}
+
+.status-card__value {
+  color: #303133;
+  font-size: 22px;
+  line-height: 1;
+}
+
+.status-tag {
+  color: #fff;
+  border: 0;
+}
+</style>