修复生产监控分页和设备监控筛选

src/views/planning-production/production-monitoring/equipment-monitoring/index.vue

@@ -1,6 +1,35 @@
 <template>
   <d2-container>
     <template #header>
+      <div class="search-bar">
+        <el-form :inline="true" size="mini">
+          <el-form-item :label="$t(key('device_category'))">
+            <el-select
+              v-model="search.device_category_id"
+              :placeholder="$t(key('select_device_category'))"
+              clearable
+              filterable
+              style="width:220px"
+              @change="onSearch"
+            >
+              <el-option
+                v-for="item in deviceCategoryOptions"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              />
+            </el-select>
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" icon="el-icon-search" :disabled="loading" @click="onSearch">
+              {{ $t(key('query')) }}
+            </el-button>
+            <el-button icon="el-icon-refresh" :disabled="loading" @click="onReset">
+              {{ $t(key('reset')) }}
+            </el-button>
+          </el-form-item>
+        </el-form>
+      </div>
       <div class="status-board">
         <el-card
           :class="['status-card', 'status-card--all', { 'is-active': activeStatus === '' }]"
@@ -53,6 +82,7 @@ import { useTableColumns } from '@/composables/useTableColumns'
 import { i18nMixin } from '@/composables/useI18n'
 import PageTable from '@/components/page-table'
 import { getDeviceAll } from '@/api/planning-production/equipment-monitoring'
+import { getDeviceCategoryAll } from '@/api/production-master-data/device-category'
 
 const STATUS_META = {
   FINISH: { label: 'finished', color: '#409EFF', className: 'finish' },
@@ -73,6 +103,10 @@ export default {
       activeStatus: '',
       tableData: [],
       statusNum: [],
+      deviceCategoryOptions: [],
+      search: {
+        device_category_id: ''
+      },
       refreshTimer: null
     }
   },
@@ -112,6 +146,7 @@ export default {
     }
   },
   mounted () {
+    this.loadDeviceCategoryOptions()
     this.fetchData()
     this.refreshTimer = setInterval(() => {
       this.fetchData(false)
@@ -128,11 +163,47 @@ export default {
       this.activeStatus = status === 'all' ? '' : status
       this.fetchData()
     },
+    normalizePayload (res) {
+      const payload = res && res.data !== undefined ? res.data : (res || {})
+      if (Array.isArray(payload)) {
+        return { data: payload, status_num: [] }
+      }
+      if (payload && payload.data && !Array.isArray(payload.data) && (payload.data.data || payload.data.status_num)) {
+        return payload.data
+      }
+      return payload || {}
+    },
+    normalizeList (res) {
+      const payload = this.normalizePayload(res)
+      if (Array.isArray(payload)) return payload
+      if (Array.isArray(payload.data)) return payload.data
+      if (Array.isArray(payload.list)) return payload.list
+      return []
+    },
+    async loadDeviceCategoryOptions () {
+      try {
+        const res = await getDeviceCategoryAll()
+        this.deviceCategoryOptions = this.normalizeList(res).map(item => ({
+          value: item.id || item.device_category_id,
+          label: item.name || item.device_category_name || item.code
+        })).filter(item => item.value !== undefined && item.label)
+      } catch { /* 类别加载失败不影响监控列表 */ }
+    },
+    onReset () {
+      this.search.device_category_id = ''
+      this.fetchData()
+    },
+    onSearch () {
+      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 || {})
+        const res = await getDeviceAll({
+          status: this.activeStatus,
+          device_category_id: this.search.device_category_id
+        })
+        const payload = this.normalizePayload(res)
         this.statusNum = Array.isArray(payload.status_num) ? payload.status_num : []
         this.tableData = Array.isArray(payload.data) ? payload.data : []
       } finally {
@@ -152,6 +223,10 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.search-bar {
+  padding: 0 0 10px;
+}
+
 .status-board {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));