报表样式优化

.env.local

@@ -4,7 +4,7 @@ NODE_ENV=development
 VITE_DEV=true
 
 # 请求路径  http://192.168.188.149:48080  https://iot.deepoil.cc
-VITE_BASE_URL='https://iot.deepoil.cc'
+VITE_BASE_URL='http://192.168.188.149:48080'
 
 # 文件上传类型：server - 后端上传， client - 前端直连上传，仅支持 S3 服务
 VITE_UPLOAD_TYPE=server

src/views/report-statistics/device_book/index2.vue

@@ -94,7 +94,8 @@
           :stripe="true"
           :show-overflow-tooltip="true"
           @sort-change="handleSortChange"
-          height="45vh"
+          ref="tableRef"
+          :height="tableHeight"
         >
           <el-table-column :label="t('iotDevice.serial')" width="70" align="center">
             <template #default="scope">
@@ -237,6 +238,7 @@ import { useRefreshStore } from '@/store/modules/pms/refreshStore'
 import Echart from '@/components/Echart/src/Echart.vue'
 import echarts from '@/plugins/echarts'
 import { formatDate } from '@/utils/formatTime'
+import { nextTick } from 'vue'
 
 /** 设备台账 列表 */
 defineOptions({ name: 'IotDevicePms' })
@@ -309,7 +311,7 @@ const myoption = computed(() => {
       axisLabel: { color: '#000', rotate: 50 }
     },
     yAxis: {
-      name: '分类top10',
+      name: '分类top',
       type: 'value'
     },
     series: [
@@ -339,6 +341,9 @@ const myoption = computed(() => {
   }
 })
 
+let tableRef = ref(null)
+let tableHeight = ref(450)
+
 /** 查询列表 */
 const getList = async () => {
   loading.value = true
@@ -369,56 +374,11 @@ const handleQuery = () => {
   queryParams.pageNo = 1
   getList()
 }
-const moreQuery = (show) => {
-  ifShow.value = show
-}
-
-const openForm = (type: string, id?: number, deptId?: number) => {
-  //修改
-  if (typeof id === 'number') {
-    push({ name: 'DeviceDetailEdit', params: { type, id }, query: { source: 'devicerouter' } })
-    return
-  }
-  // 新增
-  if (deptId) {
-    push({ name: 'DeviceDetailAdd', params: { type, deptId }, query: { source: 'devicerouter' } })
-  } else {
-    push({ name: 'DeviceDetailAddd', params: {}, query: { source: 'devicerouter' } })
-  }
-}
-
-/** 删除按钮操作 */
-const handleDelete = async (id: number) => {
-  try {
-    // 删除的二次确认
-    await message.delConfirm()
-    // 发起删除
-    await IotDeviceApi.deleteIotDevice(id)
-    message.success(t('common.delSuccess'))
-    // 刷新列表
-    await getList()
-  } catch {}
-}
 
 const handleDetail = (id: number) => {
   push({ name: 'DeviceDetailInfo', params: { id } })
 }
 
-/** 导出按钮操作 */
-const handleExport = async () => {
-  try {
-    // 导出的二次确认
-    await message.exportConfirm()
-    // 发起导出
-    exportLoading.value = true
-    const data = await IotDeviceApi.exportIotDevice(queryParams)
-    download.excel(data, '设备台账.xls')
-  } catch {
-  } finally {
-    exportLoading.value = false
-  }
-}
-
 // 设备数量
 let devicesCount = ref(0)
 const deviceCountQueryParams = reactive({
@@ -492,12 +452,31 @@ const getDeviceCount = async () => {
   deviceStatus.value = await IotDeviceApi.getIotDeviceStatus(deviceCountQueryParams)
   deviceClassify.value = await IotDeviceApi.getIotDeviceClassify(deviceCountQueryParams)
 }
+
+// 计算表格高度
+const calculateTableHeight = () => {
+  if (!tableRef.value) return
+  let h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
+  tableHeight.value = h - 460
+}
+
+// 防抖处理（防止频繁触发）
+const debounce = (fn, delay) => {
+  let timer
+  return (...args) => {
+    clearTimeout(timer)
+    timer = setTimeout(() => fn(...args), delay)
+  }
+}
 /** 初始化 **/
 onMounted(async () => {
-  getDeviceCount()
-  // productClassifyList.value = handleTree(
-  //   await ProductClassifyApi.IotProductClassifyApi.getSimpleProductClassifyList()
-  // )
+  nextTick(() => {
+    calculateTableHeight()
+    // 使用防抖避免频繁触发
+    const handleResize = debounce(calculateTableHeight, 150)
+    window.addEventListener('resize', handleResize)
+  })
+
   const sort = {
     field: 'sortColumn',
     order: 'asc'

src/views/report-statistics/inspection_order/index.vue

@@ -89,6 +89,7 @@
           :data="list"
           :show-overflow-tooltip="true"
           @row-click="handleRowClick"
+          height="48vh"
         >
           <el-table-column :label="t('iotDevice.serial')" width="70" align="center">
             <template #default="scope">
@@ -103,6 +104,7 @@
           />
 
           <el-table-column label="项目" align="center" prop="project" min-width="110" />
+          <el-table-column label="公司" align="center" prop="company" min-width="110" />
 
           <el-table-column
             :label="t('route.orderType')"
@@ -172,7 +174,6 @@
 </template>
 
 <script setup lang="ts">
-import { dateFormatter } from '@/utils/formatTime'
 import { IotInspectOrderApi, IotInspectOrderVO } from '@/api/pms/inspect/order'
 import { DICT_TYPE } from '@/utils/dict'
 import DeptTree from '@/views/system/user/DeptTree.vue'
@@ -183,15 +184,13 @@ const { params } = useRoute()
 /** 巡检工单 列表 */
 defineOptions({ name: 'IotInspectOrder' })
 
-const message = useMessage() // 消息弹窗
 const { t } = useI18n() // 国际化
 const loading = ref(true) // 列表的加载中
 const list = ref<IotInspectOrderVO[]>([]) // 列表的数据
-const status = params.status
 const deptId = params.deptId
 const createTime = params.createTime
 const total = ref(0) // 列表的总页数
-const dialogVisible = ref(false)
+
 let dateType = ref('year')
 const queryParams = reactive({
   pageNo: 1,
@@ -231,7 +230,7 @@ const handleRowClick = (row, column: any, event: Event) => {
 
     push({
       name: 'IotInspectItemStat',
-      query: { orderName: row.inspectOrderTitle, ifNormal: false }
+      query: { orderName: row.inspectOrderTitle }
     })
   }
 }
@@ -463,4 +462,11 @@ onMounted(() => {
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+
+::v-deep .el-table__header-wrapper {
+  position: sticky !important;
+  width: 100%;
+  top: 0px;
+  z-index: 2000;
+}
 </style>