调整设备点检日志左右布局

src/locales/en.json

@@ -1395,7 +1395,13 @@
 					"item_ng_number": "NG Total",
 					"item_ng_rate": "NG Rate (%)",
 					"please_enter_export_device_code": "Enter device code before exporting",
-					"please_select_export_time": "Select inspection time range before exporting"
+					"please_select_export_time": "Select inspection time range before exporting",
+					"current_device": "Current Device",
+					"no_data": "No Data",
+					"please_select_operator": "Please select operator",
+					"device": "Device",
+					"inspection_details": "Inspection Details",
+					"please_select_device": "Please select device first"
 				}
 			},
 			"maintenance_management": {

src/locales/zh-chs.json

@@ -1395,7 +1395,13 @@
 					"item_ng_number": "NG总数",
 					"item_ng_rate": "NG率(%)",
 					"please_enter_export_device_code": "请输入设备编码后再导出",
-					"please_select_export_time": "请选择点检时间范围后再导出"
+					"please_select_export_time": "请选择点检时间范围后再导出",
+					"current_device": "当前设备",
+					"no_data": "无数据",
+					"please_select_operator": "请选择操作人",
+					"device": "设备",
+					"inspection_details": "点检详情",
+					"please_select_device": "请先选择设备"
 				}
 			},
 			"maintenance_management": {

src/views/equipment-management/inspection-management/inspection-logs/index.vue

@@ -1,20 +1,55 @@
 <template>
   <d2-container>
-    <template #header>
+    <div class="inspection-logs-page">
+      <aside class="device-panel" v-loading="treeLoading">
+        <el-input
+          v-model.trim="deviceFilter"
+          size="mini"
+          :placeholder="$t(key('enter_device_name'))"
+          clearable
+          class="device-filter"
+        />
+        <el-tree
+          v-if="deviceTree.length"
+          ref="deviceTree"
+          :data="deviceTree"
+          show-checkbox
+          highlight-current
+          default-expand-all
+          node-key="id"
+          :expand-on-click-node="false"
+          :default-checked-keys="currentDeviceId ? [currentDeviceId] : []"
+          :current-node-key="currentDeviceId"
+          :filter-node-method="filterDeviceNode"
+          @node-click="handleDeviceClick"
+          @check-change="handleDeviceCheckChange"
+        >
+          <template #default="{ node, data }">
+            <span class="device-node">
+              <span>{{ node.label }}</span>
+              <span class="device-code">({{ data.code || '-' }})</span>
+            </span>
+          </template>
+        </el-tree>
+        <el-result v-else icon="info" :title="$t(key('no_data'))" sub-title="" />
+      </aside>
+
+      <section class="logs-panel">
+        <div class="logs-context">
+          <span class="context-label">{{ $t(key('current_device')) }}</span>
+          <strong>{{ currentDeviceLabel || '-' }}</strong>
+        </div>
         <div class="search-bar">
           <el-form :inline="true" :model="search" size="mini">
-          <el-form-item :label="$t(key('device_category'))">
-            <el-select v-model="search.device_category_id" :placeholder="$t(key('please_select_device_category'))" clearable filterable style="width:210px">
-              <el-option v-for="item in deviceCategoryOptions" :key="item.value" :label="item.label" :value="item.value" />
+            <el-form-item :label="$t(key('inspection_item_name'))">
+              <el-input v-model.trim="search.device_check_items_name" :placeholder="$t(key('enter_inspection_item_name'))" clearable style="width:210px" @keyup.enter.native="onSearch" />
+            </el-form-item>
+            <el-form-item :label="$t(key('operator'))">
+              <el-select v-model="search.user_id" :placeholder="$t(key('please_select_operator'))" clearable filterable style="width:190px">
+                <el-option v-for="item in userOptions" :key="item.value" :label="item.label" :value="item.value" />
               </el-select>
             </el-form-item>
-          <el-form-item :label="$t(key('device_code'))">
-            <el-input v-model.trim="search.device_code" :placeholder="$t(key('enter_device_code'))" clearable style="width:200px" @keyup.enter.native="onSearch" />
-          </el-form-item>
-          <el-form-item :label="$t(key('device_name'))">
-            <el-input v-model.trim="search.device_name" :placeholder="$t(key('enter_device_name'))" clearable style="width:200px" @keyup.enter.native="onSearch" />
-          </el-form-item>
-          <el-form-item :label="$t(key('create_time'))">
+            <el-form-item :label="$t(key('inspection_time'))">
               <el-date-picker v-model="search.create_time" type="datetimerange" value-format="yyyy-MM-dd HH:mm:ss" :start-placeholder="$t(key('start_time'))" :end-placeholder="$t(key('end_time'))" style="width:330px" />
             </el-form-item>
             <el-form-item>
@@ -23,7 +58,6 @@
             </el-form-item>
           </el-form>
         </div>
-    </template>
 
         <page-table
           ref="pageTable"
@@ -40,10 +74,23 @@
             <el-tag :type="row.result === 'OK' ? 'success' : 'danger'" size="mini">{{ row.result }}</el-tag>
           </template>
         </page-table>
+      </section>
+    </div>
 
-    <el-dialog :title="$t(key('details_title'))" :visible.sync="detailsVisible" width="1050px" :close-on-click-modal="false">
-      <el-table v-loading="detailsLoading" :data="detailsData" border height="460" size="mini">
-        <el-table-column prop="sort" :label="$t(key('sort'))" width="70" />
+    <el-dialog :title="detailsTitle" :visible.sync="detailsVisible" width="1050px" :close-on-click-modal="false">
+      <div class="details-search">
+        <el-form :inline="true" :model="detailsSearch" size="mini">
+          <el-form-item :label="$t(key('inspection_item_name'))">
+            <el-input v-model.trim="detailsSearch.device_check_items_name" :placeholder="$t(key('enter_inspection_item_name'))" clearable style="width:220px" @keyup.enter.native="loadDetails" />
+          </el-form-item>
+          <el-form-item>
+            <el-button icon="el-icon-search" @click="loadDetails">{{ $t(key('search')) }}</el-button>
+            <el-button icon="el-icon-refresh" @click="resetDetailsSearch">{{ $t(key('reset')) }}</el-button>
+          </el-form-item>
+        </el-form>
+      </div>
+      <el-table v-loading="detailsLoading" :data="detailsData" border height="430" size="mini">
+        <el-table-column prop="id" label="ID" width="80" />
         <el-table-column prop="device_check_items_name" :label="$t(key('inspection_item_name'))" min-width="150" />
         <el-table-column prop="result" :label="$t(key('inspection_result'))" width="100">
           <template #default="{ row }">
@@ -74,8 +121,9 @@ import { useTableButtons } from '@/composables/useTableButtons'
 import { i18nMixin } from '@/composables/useI18n'
 import { confirmMixin } from '@/composables/useConfirmHandle'
 import PageTable from '@/components/page-table'
-import { getEquipmentCategoryALL } from '@/api/equipment-management/equipment-category'
-import { getList, getDetails, createExportTask } from '@/api/equipment-management/inspection-logs'
+import { getAll as getDeviceAll } from '@/api/equipment-management/equipment-registry'
+import { getUserList } from '@/api/system-administration/user'
+import { getDetails, getDetailsList, createExportTask } from '@/api/equipment-management/inspection-logs'
 
 function readPageData (res) {
   const data = res && res.data !== undefined ? res.data : res
@@ -92,8 +140,16 @@ function readList (res) {
   return []
 }
 
-function toOptions (list) {
-  return (Array.isArray(list) ? list : []).map(item => ({ label: item.name || item.label, value: item.id || item.value, raw: item }))
+function normalizeDevices (list) {
+  return (Array.isArray(list) ? list : []).map((item, index) => ({
+    id: item.id || item.value,
+    value: item.id || item.value,
+    label: item.name || item.label,
+    name: item.name || item.label,
+    code: item.code || item.device_code || '',
+    index,
+    children: []
+  }))
 }
 
 export default {
@@ -103,29 +159,54 @@ export default {
   data () {
     return {
       loading: false,
+      treeLoading: false,
       detailsLoading: false,
       tableData: [],
       detailsData: [],
       detailsVisible: false,
-      deviceCategoryOptions: [],
-      search: { device_category_id: '', device_code: '', device_name: '', create_time: [] },
+      currentDetailRow: null,
+      deviceFilter: '',
+      deviceTree: [],
+      currentDeviceId: '',
+      currentDevice: null,
+      userOptions: [],
+      search: { device_check_items_name: '', user_id: '', create_time: [] },
+      detailsSearch: { device_check_items_name: '' },
       pagination: { current: 1, size: 10, total: 0 },
       columns: [],
       toolbarButtons: [],
       rowButtons: []
     }
   },
+  computed: {
+    currentDeviceLabel () {
+      if (!this.currentDevice) return ''
+      return `${this.currentDevice.label}${this.currentDevice.code ? ` (${this.currentDevice.code})` : ''}`
+    },
+    detailsTitle () {
+      const deviceName = this.currentDetailRow ? (this.currentDetailRow.device_name || (this.currentDevice && this.currentDevice.label) || '') : ''
+      return deviceName ? `${this.$t(this.key('device'))}【${deviceName}】${this.$t(this.key('inspection_details'))}` : this.$t(this.key('details_title'))
+    }
+  },
+  watch: {
+    deviceFilter (val) {
+      if (this.$refs.deviceTree) this.$refs.deviceTree.filter(val)
+    }
+  },
   created () {
     this.columns = useTableColumns([
-      { prop: 'device_code', label: this.key('device_code'), minWidth: 140, fixed: 'left' },
-      { prop: 'device_name', label: this.key('device_name'), minWidth: 150, fixed: 'left' },
-      { prop: 'device_category_name', label: this.key('device_category'), minWidth: 140 },
+      { prop: 'id', label: 'ID', width: 80, fixed: 'left' },
+      { prop: 'device_check_items_name', label: this.key('inspection_item_name'), minWidth: 150, fixed: 'left' },
       { prop: 'result', label: this.key('inspection_result'), slot: 'result', width: 120 },
-      { prop: 'item_total', label: this.key('item_total'), minWidth: 120 },
-      { prop: 'item_ng_number', label: this.key('item_ng_number'), minWidth: 120 },
-      { prop: 'item_ng_rate', label: this.key('item_ng_rate'), minWidth: 130 },
+      { prop: 'val', label: this.key('inspection_value'), minWidth: 110 },
+      { prop: 'standard', label: this.key('standard'), minWidth: 140, showOverflowTooltip: true },
+      { prop: 'check_method', label: this.key('check_method'), minWidth: 130, showOverflowTooltip: true },
+      { prop: 'unit', label: this.key('unit'), width: 90 },
+      { prop: 'frequentness', label: this.key('frequentness'), width: 110 },
+      { prop: 'example', label: this.key('example'), width: 110 },
+      { prop: 'class_please', label: this.key('class_please'), width: 100 },
+      { prop: 'implementation_people', label: this.key('implementation_people'), minWidth: 120 },
       { prop: 'username', label: this.key('operator'), minWidth: 120 },
-      { prop: 'remark', label: this.key('remark'), minWidth: 140, showOverflowTooltip: true },
       { prop: 'create_time', label: this.key('inspection_time'), minWidth: 160 },
       { prop: '_actions', label: this.key('operation'), width: 120, fixed: 'right' }
     ], { selectionWidth: 0 })
@@ -139,23 +220,75 @@ export default {
     }, this.$permission)
     this.toolbarButtons = btns.toolbarButtons
     this.rowButtons = btns.rowButtons
-    this.loadDeviceCategories()
-    this.fetchData()
+    this.loadDevices()
+    this.loadUsers()
   },
   methods: {
-    async loadDeviceCategories () {
-      const res = await getEquipmentCategoryALL({})
-      this.deviceCategoryOptions = toOptions((res && res.data) || res)
+    async loadDevices () {
+      this.treeLoading = true
+      try {
+        const res = await getDeviceAll({ no_denglu_sign: 'NO' })
+        const raw = res && res.data && Array.isArray(res.data.data) ? res.data.data : ((res && res.data) || res)
+        const list = normalizeDevices(raw)
+        this.deviceTree = list
+        if (list.length) {
+          this.setCurrentDevice(list[0], false)
+          this.$nextTick(() => {
+            if (this.$refs.deviceTree) {
+              this.$refs.deviceTree.setCheckedKeys([this.currentDeviceId])
+              this.$refs.deviceTree.setCurrentKey(this.currentDeviceId)
+            }
+          })
+          this.fetchData()
+        }
+      } finally {
+        this.treeLoading = false
+      }
+    },
+    async loadUsers () {
+      const res = await getUserList({ page_no: 1, page_size: 10000 })
+      const page = readPageData(res)
+      this.userOptions = page.list.map(item => ({
+        label: item.username || item.nickname || item.name,
+        value: item.user_id || item.id
+      }))
+    },
+    setCurrentDevice (device, shouldFetch = true) {
+      this.currentDevice = device
+      this.currentDeviceId = device ? device.id : ''
+      this.pagination.current = 1
+      if (shouldFetch) this.fetchData()
+    },
+    filterDeviceNode (value, data) {
+      if (!value) return true
+      const text = String(value).toLowerCase()
+      return String(data.label || '').toLowerCase().includes(text) || String(data.code || '').toLowerCase().includes(text)
+    },
+    handleDeviceClick (data) {
+      this.setCurrentDevice(data)
+      this.$nextTick(() => {
+        if (this.$refs.deviceTree) this.$refs.deviceTree.setCheckedKeys([data.id])
+      })
+    },
+    handleDeviceCheckChange (data, checked) {
+      if (!checked) return
+      if (this.$refs.deviceTree) this.$refs.deviceTree.setCheckedKeys([data.id])
+      if (String(data.id) !== String(this.currentDeviceId)) this.setCurrentDevice(data)
     },
     buildSearchParams () {
-      const params = { ...this.search }
+      const params = { ...this.search, device_code: this.currentDevice ? this.currentDevice.code : '' }
       if (!Array.isArray(params.create_time) || !params.create_time.length) delete params.create_time
       return params
     },
     async fetchData () {
+      if (!this.currentDevice || !this.currentDevice.code) {
+        this.tableData = []
+        this.pagination.total = 0
+        return
+      }
       this.loading = true
       try {
-        const res = await getList({ ...this.buildSearchParams(), page_no: this.pagination.current, page_size: this.pagination.size })
+        const res = await getDetailsList({ ...this.buildSearchParams(), page_no: this.pagination.current, page_size: this.pagination.size })
         const page = readPageData(res)
         this.tableData = page.list
         this.pagination.total = page.total
@@ -168,7 +301,7 @@ export default {
       this.fetchData()
     },
     onReset () {
-      this.search = { device_category_id: '', device_code: '', device_name: '', create_time: [] }
+      this.search = { device_check_items_name: '', user_id: '', create_time: [] }
       this.pagination.current = 1
       this.fetchData()
     },
@@ -178,18 +311,31 @@ export default {
       this.fetchData()
     },
     async openDetails (row) {
+      this.currentDetailRow = row
+      this.detailsSearch = { device_check_items_name: '' }
       this.detailsVisible = true
+      await this.loadDetails()
+    },
+    async loadDetails () {
+      if (!this.currentDetailRow) return
       this.detailsLoading = true
       try {
-        const res = await getDetails({ device_check_items_log_id: row.id })
+        const res = await getDetails({
+          ...this.detailsSearch,
+          device_check_items_log_id: this.currentDetailRow.device_check_items_log_id || this.currentDetailRow.id
+        })
         this.detailsData = readList(res)
       } finally {
         this.detailsLoading = false
       }
     },
+    resetDetailsSearch () {
+      this.detailsSearch = { device_check_items_name: '' }
+      this.loadDetails()
+    },
     async handleExport () {
-      if (!this.search.device_code) {
-        this.$message.warning(this.$t(this.key('please_enter_export_device_code')))
+      if (!this.currentDevice || !this.currentDevice.code) {
+        this.$message.warning(this.$t(this.key('please_select_device')))
         return
       }
       if (!Array.isArray(this.search.create_time) || this.search.create_time.length !== 2) {
@@ -198,7 +344,7 @@ export default {
       }
       const cancelled = await this.$confirmAction(
         { message: this.key('confirm_export'), title: this.key('tip'), confirmButtonText: this.key('confirm'), cancelButtonText: this.key('cancel') },
-        () => createExportTask(this.buildSearchParams())
+        () => createExportTask({ ...this.buildSearchParams(), action: 'download' })
       )
       if (!cancelled) this.$message.success(this.$t(this.key('create_download_task_success')))
     }
@@ -207,6 +353,64 @@ export default {
 </script>
 
 <style scoped>
-.search-bar { padding: 10px 0; }
-/deep/ .el-form-item--mini.el-form-item { margin-bottom: 4px; }
+.inspection-logs-page {
+  display: flex;
+  gap: 16px;
+  height: 100%;
+  min-height: 560px;
+}
+.device-panel {
+  flex: 0 0 260px;
+  min-width: 220px;
+  border-right: 1px solid #ebeef5;
+  padding: 10px 14px 10px 0;
+  overflow: auto;
+}
+.device-filter {
+  margin-bottom: 12px;
+}
+.device-node {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  max-width: 190px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.device-code {
+  color: #909399;
+  font-size: 12px;
+}
+.logs-panel {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+}
+.logs-context {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-height: 30px;
+  margin-bottom: 8px;
+  color: #303133;
+}
+.context-label {
+  color: #909399;
+}
+.search-bar {
+  padding-bottom: 8px;
+  border-bottom: 1px solid #ebeef5;
+  margin-bottom: 10px;
+}
+.details-search {
+  padding-bottom: 8px;
+}
+/deep/ .el-form-item--mini.el-form-item {
+  margin-bottom: 4px;
+}
+/deep/ .d2-container-full__body {
+  overflow: hidden;
+}
 </style>