台账样式优化

src/views/pms/qhse/index.vue

@@ -1,189 +1,203 @@
 <template>
-  <el-row :gutter="20">
-    <!-- 左侧部门树 -->
+  <div
+    class="qhse-page grid grid-cols-[auto_1fr] grid-rows-[auto_auto_minmax(0,1fr)_auto] gap-3 gap-x-4 h-[calc(100vh-20px-var(--top-tool-height)-var(--tags-view-height)-var(--app-footer-height))]">
+    <DeptTreeSelect
+      class="row-span-4"
+      :top-id="rootDeptId"
+      :deptId="deptId"
+      v-model="queryParams.deptId"
+      :init-select="false"
+      :show-title="false"
+      request-api="getSimpleDeptList"
+      @node-click="handleDeptNodeClick" />
 
-    <DeptTree @node-click="handleDeptNodeClick" v-model:collapsed="isLeftContentCollapsed" />
-
-    <el-col :xs="24" :span="isLeftContentCollapsed ? 24 : 20">
-      <ContentWrap style="border: none">
-        <!-- 搜索工作栏 -->
-        <el-form class="-mb-15px" :model="queryParams" ref="queryFormRef" :inline="true">
-          <el-form-item label="计量器具名称" prop="measureName">
-            <el-input
-              v-model="queryParams.measureName"
-              placeholder="请输入计量器具名称"
-              clearable
-              @keyup.enter="handleQuery"
-              class="!w-150px" />
-          </el-form-item>
-          <el-form-item label="是否过期" prop="expired">
-            <el-select
-              v-model="queryParams.expired"
-              placeholder="请选择是否过期"
-              clearable
-              style="width: 120px">
-              <el-option
-                v-for="dict in getBoolDictOptions(DICT_TYPE.INFRA_BOOLEAN_STRING)"
-                :key="dict.value"
-                :label="dict.label"
-                :value="dict.value" />
-            </el-select>
-          </el-form-item>
-
-          <el-form-item label="是否预警" prop="alertWarn">
-            <el-select
-              v-model="queryParams.alertWarn"
-              placeholder="请选择是否预警"
-              clearable
-              style="width: 120px">
-              <el-option
-                v-for="dict in getBoolDictOptions(DICT_TYPE.INFRA_BOOLEAN_STRING)"
-                :key="dict.value"
-                :label="dict.label"
-                :value="dict.value" />
-            </el-select>
-          </el-form-item>
+    <el-form
+      ref="queryFormRef"
+      :model="queryParams"
+      size="default"
+      label-width="auto"
+      class="bg-white dark:bg-[#1d1e1f] rounded-lg shadow px-8 py-2 flex items-center flex-wrap min-w-0">
+      <div class="flex items-center gap-4 flex-wrap">
+        <el-form-item label="计量器具名称" prop="measureName">
+          <el-input
+            v-model="queryParams.measureName"
+            placeholder="请输入计量器具名称"
+            clearable
+            @keyup.enter="handleQuery"
+            class="!w-200px" />
+        </el-form-item>
+        <el-form-item label="是否过期" prop="expired">
+          <el-select
+            v-model="queryParams.expired"
+            placeholder="请选择是否过期"
+            clearable
+            class="!w-200px">
+            <el-option
+              v-for="dict in getBoolDictOptions(DICT_TYPE.INFRA_BOOLEAN_STRING)"
+              :key="dict.value"
+              :label="dict.label"
+              :value="dict.value" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="是否预警" prop="alertWarn">
+          <el-select
+            v-model="queryParams.alertWarn"
+            placeholder="请选择是否预警"
+            clearable
+            class="!w-200px">
+            <el-option
+              v-for="dict in getBoolDictOptions(DICT_TYPE.INFRA_BOOLEAN_STRING)"
+              :key="dict.value"
+              :label="dict.label"
+              :value="dict.value" />
+          </el-select>
+        </el-form-item>
+        <el-form-item>
+          <el-button @click="handleQuery">
+            <Icon icon="ep:search" class="mr-5px" /> {{ t('devicePerson.search') }}
+          </el-button>
+          <el-button @click="resetQuery">
+            <Icon icon="ep:refresh" class="mr-5px" /> {{ t('devicePerson.reset') }}
+          </el-button>
+          <el-button @click="handleAdd" type="primary">
+            <Icon icon="ep:plus" class="mr-5px" />新增
+          </el-button>
+          <el-button @click="handleExport" type="success" plain :loading="exportLoading">
+            <Icon icon="ep:download" class="mr-5px" /> 导出
+          </el-button>
+        </el-form-item>
+      </div>
+    </el-form>
 
-          <el-form-item>
-            <el-button @click="handleAdd" type="primary"
-              ><Icon icon="ep:plus" class="mr-5px" />新增</el-button
-            >
-            <el-button @click="handleQuery"
-              ><Icon icon="ep:search" class="mr-5px" /> {{ t('devicePerson.search') }}</el-button
-            >
-            <el-button @click="resetQuery"
-              ><Icon icon="ep:refresh" class="mr-5px" /> {{ t('devicePerson.reset') }}</el-button
-            >
-            <el-button @click="handleExport" type="success" plain :loading="exportLoading"
-              ><Icon icon="ep:download" class="mr-5px" /> 导出</el-button
-            >
-          </el-form-item>
-        </el-form>
-      </ContentWrap>
-
-      <!-- 列表 -->
-      <ContentWrap class="flex-1 overflow-hidden mt-15px" style="border: none">
-        <div class="stats-cards">
-          <div class="stats-card stats-card--expired">
-            <div class="stats-card__header">
-              <el-icon class="stats-card__icon" :size="28">
-                <Icon icon="ep:info-filled" />
-              </el-icon>
-              <div class="stats-card__label">已过期</div>
-            </div>
-            <div class="stats-card__value text-[40px]! pt-10 text-center!">
-              <CountTo
-                :duration="2600"
-                :end-val="expired"
-                :start-val="0"
-                class="stats-card__value text-[40px]! pt-10 text-center! text-[#e35656]!"
-            /></div>
-          </div>
-          <div class="stats-card stats-card--warn">
-            <div class="stats-card__header">
-              <el-icon class="stats-card__icon" :size="28">
-                <Icon icon="ep:bell-filled" />
-              </el-icon>
-              <div class="stats-card__label">90天预警</div>
-            </div>
-            <div class="stats-card__value text-[40px]! pt-10 text-center!">
-              <CountTo
-                :duration="2600"
-                :end-val="warn"
-                :start-val="0"
-                class="stats-card__value text-[40px]! pt-10 text-center! text-[#df8a28]!" />
-            </div>
-          </div>
-          <div class="stats-chart-card">
-            <div class="stats-card__label">分类统计</div>
-            <div ref="staticChartRef" class="stats-chart"></div>
-          </div>
+    <div class="stats-cards min-w-0">
+      <div class="stats-card stats-card--expired">
+        <div class="stats-card__header">
+          <el-icon class="stats-card__icon" :size="28">
+            <Icon icon="ep:info-filled" />
+          </el-icon>
+          <div class="stats-card__label">已过期</div>
+        </div>
+        <div class="stats-card__value text-[40px]! pt-10 text-center!">
+          <CountTo
+            :duration="2600"
+            :end-val="expired"
+            :start-val="0"
+            class="stats-card__value text-[40px]! pt-10 text-center! text-[#e35656]!" />
         </div>
-        <zm-table
-          :loading="loading"
-          :data="list"
-          height="calc(46vh - 130px)"
-          :show-overflow-tooltip="true"
-          :row-style="tableRowStyle"
-          :row-class-name="tableRowClassName">
-          <zm-table-column :label="t('monitor.serial')" width="70" align="center" fixed="left">
-            <template #default="scope">
-              {{ scope.$index + 1 }}
-            </template>
-          </zm-table-column>
-          <zm-table-column label="名称" align="center" prop="measureName" fixed="left" />
-          <zm-table-column label="编码" align="center" prop="measureCode" fixed="left" />
-          <zm-table-column label="部门名称" align="center" prop="deptName" />
-          <zm-table-column label="计量单位" align="center" prop="measureUnit" />
-
-          <zm-table-column label="责任人" align="center" prop="dutyPerson" />
-          <zm-table-column label="品牌" align="center" prop="brand" />
-          <zm-table-column label="规格型号" align="center" prop="modelName" />
-          <zm-table-column label="分类" align="center" prop="classify" min-width="120px">
-            <template #default="scope">
-              <dict-tag :type="DICT_TYPE.MEASURE_TYPE" :value="scope.row.classify" />
-            </template>
-          </zm-table-column>
-          <zm-table-column label="采购日期" align="center" prop="buyDate">
-            <template #default="scope">
-              {{ formatDateCorrectly(scope.row.buyDate) }}
-            </template>
-          </zm-table-column>
-
-          <zm-table-column label="价格" align="center" prop="measurePrice">
-            <template #default="scope">
-              {{ scope.row.measurePrice }}
-            </template>
-          </zm-table-column>
-          <zm-table-column label="备注" align="center" prop="remark" />
-
-          <zm-table-column label="检测信息" align="center" fixed="right">
-            <template #default="scope">
-              <div>
-                <el-button link type="primary" @click="handleView(scope.row.id)"> 查看 </el-button>
-              </div>
-            </template>
-          </zm-table-column>
-
-          <zm-table-column
-            :label="t('devicePerson.operation')"
-            align="center"
-            fixed="right"
-            action
-            min-width="120px">
-            <template #default="scope">
-              <el-button link type="primary" @click="handleEdit(scope.row)"> 编辑 </el-button>
-              <el-button link type="danger" @click="handleDelete(scope.row.id)"> 删除 </el-button>
-            </template>
-          </zm-table-column>
-        </zm-table>
-        <!-- 分页 -->
+      </div>
+      <div class="stats-card stats-card--warn">
+        <div class="stats-card__header">
+          <el-icon class="stats-card__icon" :size="28">
+            <Icon icon="ep:bell-filled" />
+          </el-icon>
+          <div class="stats-card__label">90天预警</div>
+        </div>
+        <div class="stats-card__value text-[40px]! pt-10 text-center!">
+          <CountTo
+            :duration="2600"
+            :end-val="warn"
+            :start-val="0"
+            class="stats-card__value text-[40px]! pt-10 text-center! text-[#df8a28]!" />
+        </div>
+      </div>
+      <div class="stats-chart-card">
+        <div class="stats-card__label">分类统计</div>
+        <div ref="staticChartRef" class="stats-chart"></div>
+      </div>
+    </div>
+
+    <div class="bg-white dark:bg-[#1d1e1f] shadow rounded-lg flex flex-col p-2 pt-3 min-w-0">
+      <div class="flex-1 relative min-h-0">
+        <el-auto-resizer class="absolute">
+          <template #default="{ width, height }">
+            <zm-table
+              :loading="loading"
+              :data="list"
+              :width="width"
+              :height="height"
+              :max-height="height"
+              :show-overflow-tooltip="true"
+              :row-style="tableRowStyle"
+              :row-class-name="tableRowClassName">
+              <zm-table-column :label="t('monitor.serial')" width="70" align="center" fixed="left">
+                <template #default="scope">
+                  {{ scope.$index + 1 }}
+                </template>
+              </zm-table-column>
+              <zm-table-column label="名称" align="center" prop="measureName" fixed="left" />
+              <zm-table-column label="编码" align="center" prop="measureCode" fixed="left" />
+              <zm-table-column label="部门名称" align="center" prop="deptName" />
+              <zm-table-column label="计量单位" align="center" prop="measureUnit" />
+              <zm-table-column label="责任人" align="center" prop="dutyPerson" />
+              <zm-table-column label="品牌" align="center" prop="brand" />
+              <zm-table-column label="规格型号" align="center" prop="modelName" />
+              <zm-table-column label="分类" align="center" prop="classify" min-width="120px">
+                <template #default="scope">
+                  <dict-tag :type="DICT_TYPE.MEASURE_TYPE" :value="scope.row.classify" />
+                </template>
+              </zm-table-column>
+              <zm-table-column label="采购日期" align="center" prop="buyDate">
+                <template #default="scope">
+                  {{ formatDateCorrectly(scope.row.buyDate) }}
+                </template>
+              </zm-table-column>
+              <zm-table-column label="价格" align="center" prop="measurePrice">
+                <template #default="scope">
+                  {{ scope.row.measurePrice }}
+                </template>
+              </zm-table-column>
+              <zm-table-column label="备注" align="center" prop="remark" />
+              <zm-table-column label="检测信息" align="center" fixed="right">
+                <template #default="scope">
+                  <el-button link type="primary" @click="handleView(scope.row.id)">
+                    查看
+                  </el-button>
+                </template>
+              </zm-table-column>
+              <zm-table-column
+                :label="t('devicePerson.operation')"
+                align="center"
+                fixed="right"
+                action
+                min-width="120px">
+                <template #default="scope">
+                  <el-button link type="primary" @click="handleEdit(scope.row)"> 编辑 </el-button>
+                  <el-button link type="danger" @click="handleDelete(scope.row.id)">
+                    删除
+                  </el-button>
+                </template>
+              </zm-table-column>
+            </zm-table>
+          </template>
+        </el-auto-resizer>
+      </div>
+      <div class="h-8 mt-2 flex items-center justify-end">
         <Pagination
           :total="total"
           v-model:page="queryParams.pageNo"
           v-model:limit="queryParams.pageSize"
           @pagination="getList" />
-      </ContentWrap>
-      <ContentWrap style="margin-top: -5px">
-        <el-alert title="台账已过期红色预警" type="error" show-icon :closable="false">
-          <template #icon>
-            <Bell />
-          </template>
-        </el-alert>
-
-        <el-alert
-          title="台账90天橙色预警"
-          type="warning"
-          show-icon
-          :closable="false"
-          style="margin-top: 5px">
-          <template #icon>
-            <Bell />
-          </template>
-        </el-alert>
-      </ContentWrap>
-    </el-col>
-  </el-row>
+      </div>
+    </div>
+
+    <div class="bg-white dark:bg-[#1d1e1f] shadow rounded-lg p-3 min-w-0">
+      <el-alert title="台账已过期红色预警" type="error" show-icon :closable="false">
+        <template #icon>
+          <Bell />
+        </template>
+      </el-alert>
+      <el-alert
+        title="台账90天橙色预警"
+        type="warning"
+        show-icon
+        :closable="false"
+        style="margin-top: 5px">
+        <template #icon>
+          <Bell />
+        </template>
+      </el-alert>
+    </div>
+  </div>
 
   <!-- 新增/编辑台账对话框 -->
   <el-dialog
@@ -191,13 +205,9 @@
     v-model="dialogVisible"
     width="800px"
     destroy-on-close
+    label-width="120px"
     @close="closeDialog">
-    <el-form
-      ref="formRef"
-      :model="formData"
-      :rules="formRules"
-      label-width="120px"
-      v-loading="formLoading">
+    <el-form ref="formRef" :model="formData" :rules="formRules" v-loading="formLoading">
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="计量器具名称" prop="measureName">
@@ -428,12 +438,10 @@
 <script setup lang="ts">
 import * as echarts from 'echarts'
 import { IotInstrumentApi, IotMeasureDetectApi } from '@/api/pms/qhse/index'
-import DeptTree from '@/views/system/user/DeptTree2.vue'
-import { handleTree } from '@/utils/tree'
+import DeptTreeSelect from '@/components/DeptTreeSelect/index.vue'
 import { defaultProps } from '@/utils/tree'
 import * as DeptApi from '@/api/system/dept'
 import { ElMessageBox } from 'element-plus'
-const deptList = ref<Tree[]>([]) // 树形结构
 const deptList2 = ref<Tree[]>([]) // 树形结构
 import { formatDate } from '@/utils/formatTime'
 import { useUserStore } from '@/store/modules/user'
@@ -442,6 +450,8 @@ import { useTableComponents } from '@/components/ZmTable/useTableComponents'
 const { ZmTable, ZmTableColumn } = useTableComponents()
 
 const userStore = useUserStore()
+const rootDeptId = 156
+const deptId = useUserStore().getUser.deptId || rootDeptId
 
 defineOptions({ name: 'IotQHSEMeasure' })
 
@@ -450,8 +460,6 @@ const formLoading = ref(false) // 表单加载中
 const submitLoading = ref(false) // 提交按钮加载中
 let exportLoading = ref(false)
 
-const isLeftContentCollapsed = ref(false)
-
 const { t } = useI18n()
 
 type StaticItem = {
@@ -957,8 +965,7 @@ onMounted(async () => {
   getList()
   getStatic()
 
-  deptList.value = handleTree(await DeptApi.getSimpleDeptList())
-  deptList2.value = handleTree(await DeptApi.getSimpleDeptList())
+  deptList2.value = await DeptApi.getSimpleDeptList()
   window.addEventListener('resize', resizeStaticChart)
 })
 
@@ -976,11 +983,14 @@ onUnmounted(() => {
   height: 700px !important;
 }
 
+.qhse-page {
+  grid-template-columns: auto minmax(0, 1fr);
+}
+
 .stats-cards {
   display: grid;
-  grid-template-columns: 180px 180px minmax(0, 1fr);
+  grid-template-columns: minmax(180px, 0.7fr) minmax(180px, 0.7fr) minmax(360px, 1.6fr);
   gap: 12px;
-  margin-bottom: 16px;
   align-items: stretch;
 }
 
@@ -1025,6 +1035,27 @@ onUnmounted(() => {
   color: #d97706;
 }
 
+@media (width <= 1440px) {
+  .stats-cards {
+    grid-template-columns: minmax(180px, 0.8fr) minmax(180px, 0.8fr) minmax(300px, 1.3fr);
+  }
+}
+
+@media (max-width: 768px) {
+  .qhse-page {
+    grid-template-columns: 1fr;
+    grid-template-rows: auto auto auto minmax(420px, 1fr) auto;
+    height: auto;
+    min-height: calc(
+      100vh - 20px - var(--top-tool-height) - var(--tags-view-height) - var(--app-footer-height)
+    );
+  }
+
+  .stats-cards {
+    grid-template-columns: 1fr;
+  }
+}
+
 .stats-chart-card {
   padding: 14px 16px 10px;
   background: linear-gradient(180deg, #ffffff 0%, #f7faff 100%);