保养查询

src/views/pms/iotmainworkorder/IotDeviceMainAlarm.vue

@@ -1,200 +1,68 @@
-<template>
-  <el-row :gutter="20">
-    <!-- 左侧部门树 -->
-    <DeptTree @node-click="handleDeptNodeClick" v-model:collapsed="isLeftContentCollapsed" />
-    <el-col :xs="24" :span="isLeftContentCollapsed ? 24 : 20">
-      <ContentWrap>
-        <!-- 搜索工作栏 -->
-        <el-form
-          class="-mb-15px"
-          :model="queryParams"
-          ref="queryFormRef"
-          :inline="true"
-          label-width="68px"
-        >
-          <el-form-item :label="t('iotDevice.code')" prop="deviceCode" style="margin-left: 25px">
-            <el-input
-              v-model="queryParams.deviceCode"
-              :placeholder="t('iotDevice.codeHolder')"
-              clearable
-              @keyup.enter="handleQuery"
-              class="!w-200px"
-            />
-          </el-form-item>
-          <el-form-item :label="t('iotDevice.name')" prop="deviceName">
-            <el-input
-              v-model="queryParams.deviceName"
-              :placeholder="t('iotDevice.nameHolder')"
-              clearable
-              @keyup.enter="handleQuery"
-              class="!w-200px"
-            />
-          </el-form-item>
-
-          <el-form-item>
-            <el-button @click="handleQuery"
-              ><Icon icon="ep:search" class="mr-5px" /> {{ t('file.search') }}</el-button
-            >
-            <el-button @click="resetQuery"
-              ><Icon icon="ep:refresh" class="mr-5px" /> {{ t('file.reset') }}</el-button
-            >
-            <el-button
-              type="success"
-              plain
-              @click="handleExport"
-              :loading="exportLoading"
-              v-hasPermi="['rq:iot-device:export']"
-            >
-              <Icon icon="ep:download" class="mr-5px" /> 导出
-            </el-button>
-          </el-form-item>
-        </el-form>
-      </ContentWrap>
-
-      <!-- 列表 -->
-      <ContentWrap>
-        <el-table
-          height="calc(85vh - 135px)"
-          v-loading="loading"
-          :data="list"
-          :stripe="true"
-          :show-overflow-tooltip="true"
-        >
-          <el-table-column :label="t('monitor.serial')" width="70" align="center">
-            <template #default="scope">
-              {{ scope.$index + 1 }}
-            </template>
-          </el-table-column>
-          <el-table-column :label="t('iotDevice.code')" align="center" prop="deviceCode" />
-          <el-table-column :label="t('iotDevice.name')" align="center" prop="deviceName">
-            <template #default="scope">
-              <el-link :underline="false" type="primary" @click="handleDetail(scope.row.id)">
-                {{ scope.row.deviceName }}
-              </el-link>
-            </template>
-          </el-table-column>
-          <el-table-column :label="t('bomList.serviceDue')" align="center">
-            <template #default="scope">
-              <template v-if="hasMaintenancePlan(scope.row.mainDistance)">
-                <span :class="getDistanceClass(scope.row.mainDistance)">
-                  {{ scope.row.mainDistance }}
-                </span>
-              </template>
-              <span v-else>无保养计划</span>
-            </template>
-          </el-table-column>
-          <el-table-column
-            v-if="showRunTime"
-            label="累计运行时长H"
-            align="center"
-            prop="totalRunTime"
-          />
-          <el-table-column
-            v-if="showMileage"
-            label="累计运行里程KM"
-            align="center"
-            prop="totalMileage"
-          />
-          <el-table-column v-if="showMultiAttrs" label="多属性累计值" align="center" width="200">
-            <template #default="scope">
-              <template v-for="(value, key) in scope.row.multiAttrsTotalRuntime" :key="key">
-                <span v-if="value && key"> {{ key }}: {{ value }}&nbsp;&nbsp;</span>
-              </template>
-              <template v-for="(value, key) in scope.row.multiAttrsTotalMileage" :key="key">
-                <span v-if="value && key"> {{ key }}: {{ value }}&nbsp;&nbsp;</span>
-              </template>
-            </template>
-          </el-table-column>
-          <el-table-column :label="t('iotDevice.dept')" align="center" prop="deptName" />
-          <el-table-column :label="t('devicePerson.rp')" align="center" prop="responsibleNames" />
-          <el-table-column :label="t('monitor.status')" align="center" prop="deviceStatus">
-            <template #default="scope">
-              <dict-tag :type="DICT_TYPE.PMS_DEVICE_STATUS" :value="scope.row.deviceStatus" />
-            </template>
-          </el-table-column>
-          <!-- 工单状态列 -->
-          <el-table-column :label="t('operationFill.status')" align="center">
-            <template #default="scope">
-              <span v-if="scope.row.shouldWorkOrder && scope.row.runningWorkOrder">
-                {{ t('mainPlan.generatedNotExecuted') }}
-              </span>
-              <span v-else-if="scope.row.shouldWorkOrder && !scope.row.runningWorkOrder">
-                {{ t('mainPlan.notGenerated') }}
-              </span>
-              <span v-else>-</span>
-            </template>
-          </el-table-column>
-          <el-table-column :label="t('monitor.operation')" align="center" min-width="60px">
-            <template #default="scope">
-              <el-button
-                link
-                type="primary"
-                @click="openBomForm(scope.row)"
-                v-hasPermi="['rq:iot-device:query']"
-                v-if="hasMaintenancePlan(scope.row.mainDistance)"
-              >
-                {{ t('monitor.details') }}
-              </el-button>
-            </template>
-          </el-table-column>
-        </el-table>
-        <!-- 分页 -->
-        <Pagination
-          :total="total"
-          v-model:page="queryParams.pageNo"
-          v-model:limit="queryParams.pageSize"
-          @pagination="getList"
-        />
-      </ContentWrap>
-    </el-col>
-  </el-row>
-  <DeviceAlarmBomList ref="modelFormRef" :flag="flag" />
-</template>
-
 <script setup lang="ts">
-import download from '@/utils/download'
+import { useTableComponents } from '@/components/ZmTable/useTableComponents'
 import { IotDeviceApi, IotDeviceVO } from '@/api/pms/device'
 import { IotMainWorkOrderApi } from '@/api/pms/iotmainworkorder'
+import { useUserStore } from '@/store/modules/user'
 import { DICT_TYPE } from '@/utils/dict'
-import DeptTree from '@/views/system/user/DeptTree2.vue'
-import { useCache } from '@/hooks/web/useCache'
+import download from '@/utils/download'
 import DeviceAlarmBomList from '@/views/pms/iotmainworkorder/DeviceAlarmBomList.vue'
-let isLeftContentCollapsed = ref(false)
-const showRunTime = computed(() => {
-  const all = list.value?.map((item) => item.totalRunTime)
-  return all.some((item) => Boolean(item))
-})
 
-const showMileage = computed(() => {
-  const all = list.value?.map((item) => item.totalMileage)
-  return all.some((item) => Boolean(item))
-})
+defineOptions({ name: 'IotDeviceMainAlarm' })
 
-const showMultiAttrs = computed(() => {
-  const all = list.value
-    ?.map((item) => item.multiAttrsTotalRuntime)
-    .concat(list.value.map((item) => item.multiAttrsTotalMileage))
-    .flatMap((item) => Object.values(item ?? {}))
-  return all.some((item) => Boolean(item))
-})
+type DeviceMainAlarmRow = IotDeviceVO & {
+  mainDistance?: string | number | null
+  workOrderId?: number
+  planId?: number
+  responsibleNames?: string
+}
 
-const message = useMessage() // 消息弹窗
-const { t } = useI18n() // 国际化
-const { push } = useRouter() // 路由跳转
-const modelFormRef = ref()
-const loading = ref(true) // 列表的加载中
-const ifShow = ref(false)
+interface QueryParams extends PageParam {
+  deptId?: number
+  deviceCode?: string
+  deviceName?: string
+  brand?: string
+  model?: string | number
+  deviceStatus?: string
+  assetProperty?: string
+  picUrl?: string
+  remark?: string
+  manufacturerId?: number
+  supplierId?: number
+  manDate?: string[]
+  nameplate?: string
+  expires?: number
+  plPrice?: number
+  plDate?: string[]
+  plYear?: number
+  plStartDate?: string[]
+  plMonthed?: number
+  plAmounted?: number
+  remainAmount?: number
+  infoId?: number
+  infoType?: string
+  infoName?: string
+  infoRemark?: string
+  infoUrl?: string
+  templateJson?: string
+  creator?: string
+  setFlag?: string
+}
+
+const { t } = useI18n()
+const { push } = useRouter()
+const { ZmTable, ZmTableColumn } = useTableComponents<DeviceMainAlarmRow>()
+
+const rootDeptId = 156
+const deptId = useUserStore().getUser.deptId || rootDeptId
 
-const list = ref<IotDeviceVO[]>([]) // 列表的数据
-const total = ref(0) // 列表的总页数
-const queryParams = reactive({
+const initQuery: QueryParams = {
   pageNo: 1,
   pageSize: 10,
+  deptId: undefined,
   deviceCode: undefined,
   deviceName: undefined,
   brand: undefined,
   model: undefined,
-  deptId: undefined,
   deviceStatus: undefined,
   assetProperty: undefined,
   picUrl: undefined,
@@ -219,14 +87,34 @@ const queryParams = reactive({
   templateJson: undefined,
   creator: undefined,
   setFlag: ''
+}
+
+const queryParams = reactive<QueryParams>({ ...initQuery })
+const queryFormRef = ref()
+const loading = ref(false)
+const exportLoading = ref(false)
+const list = ref<DeviceMainAlarmRow[]>([])
+const total = ref(0)
+const flag = ref()
+const modelFormRef = ref()
+
+const showRunTime = computed(() => {
+  return list.value.some((item) => Boolean(item.totalRunTime))
+})
+
+const showMileage = computed(() => {
+  return list.value.some((item) => Boolean(item.totalMileage))
+})
+
+const showMultiAttrs = computed(() => {
+  const values = list.value
+    .map((item) => item.multiAttrsTotalRuntime)
+    .concat(list.value.map((item) => item.multiAttrsTotalMileage))
+    .flatMap((item) => Object.values(item ?? {}))
+
+  return values.some((item) => Boolean(item))
 })
-const queryFormRef = ref() // 搜索的表单
-const flag = ref() // 查询保养计划或保养工单的标识
-const exportLoading = ref(false) // 导出的加载中
-const contentSpan = ref(20)
-const treeShow = ref(true)
 
-/** 查询列表 */
 const getList = async () => {
   loading.value = true
   try {
@@ -238,110 +126,384 @@ const getList = async () => {
   }
 }
 
-/** 处理部门被点击 */
-const handleDeptNodeClick = async (row) => {
-  queryParams.deptId = row.id
-  await getList()
-}
-
-/** 搜索按钮操作 */
 const handleQuery = () => {
   queryParams.pageNo = 1
   getList()
 }
 
-/** 重置按钮操作 */
 const resetQuery = () => {
-  queryFormRef.value.resetFields()
+  Object.assign(queryParams, { ...initQuery })
+  queryFormRef.value?.resetFields()
   handleQuery()
 }
 
-const getDistanceClass = (distance: number | string | null) => {
-  if (distance === null || distance === undefined) return ''
+const handleSizeChange = (val: number) => {
+  queryParams.pageSize = val
+  handleQuery()
+}
 
-  // 如果是数字类型，直接处理
-  if (typeof distance === 'number') {
-    return distance < 0 ? 'negative-distance' : distance > 0 ? 'positive-distance' : ''
-  }
+const handleCurrentChange = (val: number) => {
+  queryParams.pageNo = val
+  getList()
+}
 
-  // 如果是字符串，提取数字部分
-  if (typeof distance === 'string') {
-    // 使用正则提取数字部分（包括负号、小数点和科学计数法）
-    const numericPart = distance.match(/[-+]?\d*\.?\d+(?:[eE][-+]?\d+)?/)?.[0]
+const handleDeptNodeClick = async (row: Tree) => {
+  queryParams.deptId = row.id
+  queryParams.pageNo = 1
+  await getList()
+}
 
-    // 如果提取到数字部分，转换为数值
-    if (numericPart) {
-      const num = parseFloat(numericPart)
-      return num < 0 ? 'negative-distance' : num > 0 ? 'positive-distance' : ''
-    }
-  }
+const parseDistanceNumber = (distance: number | string | null | undefined) => {
+  if (distance === null || distance === undefined || distance === '') return undefined
+  if (typeof distance === 'number') return distance
+  const numericPart = distance.match(/[-+]?\d*\.?\d+(?:[eE][-+]?\d+)?/)?.[0]
+  return numericPart ? Number(numericPart) : undefined
+}
 
-  return ''
+const getDistanceClass = (distance: number | string | null | undefined) => {
+  const value = parseDistanceNumber(distance)
+  if (value === undefined || value === 0) return ''
+  return value < 0 ? 'negative-distance' : 'positive-distance'
 }
 
-// 判断是否有保养计划
-const hasMaintenancePlan = (mainDistance: any) => {
-  // 检查：非null、非undefined、非空字符串
-  return mainDistance != null && mainDistance !== ''
+const hasMaintenancePlan = (mainDistance: unknown) => {
+  return mainDistance !== null && mainDistance !== undefined && mainDistance !== ''
 }
 
 const handleDetail = (id: number) => {
   push({ name: 'DeviceDetailInfo', params: { id } })
 }
 
-const drawerVisible = ref<boolean>(false)
-const showDrawer = ref()
-
-const openBomForm = async (row) => {
-  // 构建设备信息对象，包含所有需要的属性
+const openBomForm = async (row: DeviceMainAlarmRow) => {
   const deviceInfo = {
     deviceId: row.id,
     deviceCode: row.deviceCode,
     deviceName: row.deviceName,
-    model: row.model // 新增 model 属性
+    model: row.model
   }
+
   if (row.workOrderId) {
     flag.value = 'workOrder'
-    modelFormRef.value.open(row.workOrderId, flag.value, row.id)
+    modelFormRef.value?.open(row.workOrderId, flag.value, row.id)
   } else if (row.planId) {
     flag.value = 'plan'
-    modelFormRef.value.open(row.planId, flag.value, deviceInfo)
+    modelFormRef.value?.open(row.planId, flag.value, deviceInfo)
   }
 }
 
-/** 导出按钮操作 */
 const handleExport = async () => {
+  exportLoading.value = true
   try {
-    exportLoading.value = true
     const data = await IotDeviceApi.exportIotDeviceMainAlarm(queryParams)
     download.excel(data, '保养查询.xls')
-  } catch {
   } finally {
     exportLoading.value = false
   }
 }
-const { wsCache } = useCache()
-/** 初始化 **/
+
 onMounted(() => {
   getList()
 })
 </script>
+
+<template>
+  <div
+    class="device-main-alarm-page grid grid-cols-[auto_1fr] grid-rows-[auto_1fr] gap-4 h-[calc(100vh-20px-var(--top-tool-height)-var(--tags-view-height)-var(--app-footer-height))]"
+  >
+    <DeptTreeSelect
+      :top-id="rootDeptId"
+      :deptId="deptId"
+      v-model="queryParams.deptId"
+      :init-select="false"
+      :show-title="false"
+      request-api="getSimpleDeptList"
+      class="device-main-alarm-tree row-span-2"
+      @node-click="handleDeptNodeClick"
+    />
+
+    <el-form
+      ref="queryFormRef"
+      :model="queryParams"
+      size="default"
+      label-width="68px"
+      class="device-main-alarm-query bg-white dark:bg-[#1d1e1f] rounded-lg shadow px-6 py-3 min-w-0"
+    >
+      <div class="query-row">
+        <el-form-item :label="t('iotDevice.code')" prop="deviceCode">
+          <el-input
+            v-model="queryParams.deviceCode"
+            :placeholder="t('iotDevice.codeHolder')"
+            clearable
+            class="query-control"
+            @keyup.enter="handleQuery"
+          />
+        </el-form-item>
+        <el-form-item :label="t('iotDevice.name')" prop="deviceName">
+          <el-input
+            v-model="queryParams.deviceName"
+            :placeholder="t('iotDevice.nameHolder')"
+            clearable
+            class="query-control"
+            @keyup.enter="handleQuery"
+          />
+        </el-form-item>
+      </div>
+
+      <el-form-item class="query-actions">
+        <el-button type="primary" @click="handleQuery">
+          <Icon icon="ep:search" class="mr-5px" />{{ t('file.search') }}
+        </el-button>
+        <el-button @click="resetQuery">
+          <Icon icon="ep:refresh" class="mr-5px" />{{ t('file.reset') }}
+        </el-button>
+        <el-button
+          type="success"
+          plain
+          :loading="exportLoading"
+          @click="handleExport"
+          v-hasPermi="['rq:iot-device:export']"
+        >
+          <Icon icon="ep:download" class="mr-5px" />导出
+        </el-button>
+      </el-form-item>
+    </el-form>
+
+    <div class="bg-white dark:bg-[#1d1e1f] shadow rounded-lg flex flex-col p-4 min-w-0 min-h-0">
+      <div class="flex-1 relative min-h-0">
+        <el-auto-resizer class="absolute">
+          <template #default="{ width, height }">
+            <ZmTable
+              :data="list"
+              :loading="loading"
+              :width="width"
+              :height="height"
+              :max-height="height"
+              show-border
+            >
+              <ZmTableColumn
+                type="index"
+                :label="t('monitor.serial')"
+                :width="70"
+                fixed="left"
+                hide-in-column-settings
+              />
+              <ZmTableColumn prop="deviceCode" :label="t('iotDevice.code')" fixed="left" />
+              <ZmTableColumn prop="deviceName" :label="t('iotDevice.name')" fixed="left">
+                <template #default="{ row }">
+                  <el-link :underline="false" type="primary" @click="handleDetail(row.id)">
+                    {{ row.deviceName }}
+                  </el-link>
+                </template>
+              </ZmTableColumn>
+              <ZmTableColumn :label="t('bomList.serviceDue')" min-width="140">
+                <template #default="{ row }">
+                  <template v-if="hasMaintenancePlan(row.mainDistance)">
+                    <span :class="getDistanceClass(row.mainDistance)">
+                      {{ row.mainDistance }}
+                    </span>
+                  </template>
+                  <span v-else>无保养计划</span>
+                </template>
+              </ZmTableColumn>
+              <ZmTableColumn
+                v-if="showRunTime"
+                prop="totalRunTime"
+                label="累计运行时长H"
+                min-width="140"
+              />
+              <ZmTableColumn
+                v-if="showMileage"
+                prop="totalMileage"
+                label="累计运行里程KM"
+                min-width="150"
+              />
+              <ZmTableColumn v-if="showMultiAttrs" label="多属性累计值" min-width="200">
+                <template #default="{ row }">
+                  <template v-for="(value, key) in row.multiAttrsTotalRuntime" :key="key">
+                    <span v-if="value && key">{{ key }}: {{ value }}&nbsp;&nbsp;</span>
+                  </template>
+                  <template v-for="(value, key) in row.multiAttrsTotalMileage" :key="key">
+                    <span v-if="value && key">{{ key }}: {{ value }}&nbsp;&nbsp;</span>
+                  </template>
+                </template>
+              </ZmTableColumn>
+              <ZmTableColumn prop="deptName" :label="t('iotDevice.dept')" />
+              <ZmTableColumn prop="responsibleNames" :label="t('devicePerson.rp')" />
+              <ZmTableColumn prop="deviceStatus" :label="t('monitor.status')">
+                <template #default="{ row }">
+                  <dict-tag :type="DICT_TYPE.PMS_DEVICE_STATUS" :value="row.deviceStatus" />
+                </template>
+              </ZmTableColumn>
+              <ZmTableColumn :label="t('operationFill.status')" min-width="150">
+                <template #default="{ row }">
+                  <span v-if="row.shouldWorkOrder && row.runningWorkOrder">
+                    {{ t('mainPlan.generatedNotExecuted') }}
+                  </span>
+                  <span v-else-if="row.shouldWorkOrder && !row.runningWorkOrder">
+                    {{ t('mainPlan.notGenerated') }}
+                  </span>
+                  <span v-else>-</span>
+                </template>
+              </ZmTableColumn>
+              <ZmTableColumn :label="t('monitor.operation')" width="80" fixed="right" action>
+                <template #default="{ row }">
+                  <el-button
+                    v-if="hasMaintenancePlan(row.mainDistance)"
+                    link
+                    type="primary"
+                    @click="openBomForm(row)"
+                    v-hasPermi="['rq:iot-device:query']"
+                  >
+                    {{ t('monitor.details') }}
+                  </el-button>
+                </template>
+              </ZmTableColumn>
+            </ZmTable>
+          </template>
+        </el-auto-resizer>
+      </div>
+
+      <div class="h-8 mt-2 flex items-center justify-end">
+        <el-pagination
+          v-show="total > 0"
+          size="default"
+          :current-page="queryParams.pageNo"
+          :page-size="queryParams.pageSize"
+          :background="true"
+          :page-sizes="[10, 20, 30, 50, 100]"
+          :total="total"
+          layout="total, sizes, prev, pager, next, jumper"
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+        />
+      </div>
+    </div>
+  </div>
+
+  <DeviceAlarmBomList ref="modelFormRef" :flag="flag" />
+</template>
+
 <style scoped>
-/* 正数样式 - 淡绿色 */
+.device-main-alarm-query {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px 24px;
+}
+
+.query-row {
+  display: flex;
+  flex: 1 1 auto;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 12px 24px;
+  min-width: 0;
+}
+
+.query-actions {
+  flex: 0 0 auto;
+}
+
+.query-actions :deep(.el-form-item__content) {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px 10px;
+}
+
+.query-actions :deep(.el-button) {
+  margin-left: 0;
+}
+
+.query-control {
+  width: 200px;
+}
+
 .positive-distance {
-  color: #67c23a; /* element-plus 成功色 */
-  background-color: rgba(103, 194, 58, 0.1); /* 10% 透明度的淡绿色背景 */
+  display: inline-block;
   padding: 2px 8px;
+  color: #67c23a;
+  background-color: rgb(103 194 58 / 10%);
   border-radius: 4px;
-  display: inline-block;
 }
 
-/* 负数样式 - 淡红色 */
 .negative-distance {
-  color: #f56c6c; /* element-plus 危险色 */
-  background-color: rgba(245, 108, 108, 0.1); /* 10% 透明度的淡红色背景 */
+  display: inline-block;
   padding: 2px 8px;
+  color: #f56c6c;
+  background-color: rgb(245 108 108 / 10%);
   border-radius: 4px;
-  display: inline-block;
+}
+
+:deep(.el-form-item) {
+  margin-bottom: 0;
+}
+
+@media (width >= 2200px) {
+  .device-main-alarm-query,
+  .query-row {
+    flex-wrap: nowrap;
+  }
+}
+
+@media (width <= 1500px) {
+  .device-main-alarm-query,
+  .query-row {
+    gap: 12px 18px;
+  }
+
+  .query-control {
+    width: 180px;
+  }
+}
+
+@media (width <= 1200px) {
+  .device-main-alarm-page {
+    grid-template-columns: minmax(0, 1fr);
+    grid-template-rows: auto auto minmax(480px, 1fr);
+    height: auto;
+    min-height: calc(
+      100vh - 20px - var(--top-tool-height) - var(--tags-view-height) - var(--app-footer-height)
+    );
+  }
+
+  :deep(.device-main-alarm-tree) {
+    grid-row: auto !important;
+    width: 100% !important;
+    height: 320px !important;
+    min-width: 0 !important;
+  }
+
+  .query-actions {
+    width: 100%;
+  }
+}
+
+@media (width <= 768px) {
+  .device-main-alarm-query {
+    padding: 12px;
+  }
+
+  .query-row,
+  .query-row :deep(.el-form-item),
+  .query-actions {
+    width: 100%;
+  }
+
+  .query-control {
+    width: 100%;
+  }
+
+  .query-actions :deep(.el-form-item__content) {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 8px;
+    width: 100%;
+  }
+
+  .query-actions :deep(.el-button) {
+    width: 100%;
+    margin-left: 0;
+  }
 }
 </style>