粉尘监测报表查询

src/views/vent/dust/dustMonitorTable/dsut-table.api.ts

@@ -2,9 +2,11 @@ import { defHttp } from '/@/utils/http/axios';
 
 enum Api {
   getDustInfo = '/ventanaly-device/safety/reportLocalData/queryReportData',
+  getFileList = '/ventanaly-device/safety/reportLocalData/list',
 }
 /**
  * 获取粉尘监测结果报表
  * @param params
  */
 export const getDustInfoList = (params) => defHttp.post({ url: Api.getDustInfo, params });
+export const getAllFileList = (params) => defHttp.get({ url: Api.getFileList, params });

src/views/vent/dust/dustMonitorTable/index.vue

@@ -1,26 +1,59 @@
 <template>
   <div class="dustMonitor">
     <customHeader>粉尘日常监测报表</customHeader>
+    <div class="select-container">
+      <span class="select-label">选择文件：</span>
+      <a-select v-model:value="formSearch.fileId" style="width: 220px" size="small" placeholder="请选择...">
+        <a-select-option v-for="item in selectList" :key="item.fileId">{{ item.fileName }}</a-select-option>
+      </a-select>
+      <a-button type="primary" style="margin-left: 10px" @click="getSearch">查询</a-button>
+    </div>
     <a-table :columns="columns" :data-source="tableData" size="small" :scroll="{ y: 500 }" class="tableW"> </a-table>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted } from 'vue';
+import { ref, onMounted, reactive } from 'vue';
 import { columns } from './dust-table.data';
-import { getDustInfoList } from './dsut-table.api';
+import { getDustInfoList, getAllFileList } from './dsut-table.api';
 import customHeader from '/@/components/vent/customHeader.vue';
 
 let tableData = ref<any[]>([]);
+let selectList = ref<any[]>([]);
+
+let formSearch = reactive({
+  pageNum: 1,
+  pageSize: 1000,
+  fileId: '',
+  fileName: '',
+});
 //获取粉尘监测结果数据
-async function getTableList() {
-  let res = await getDustInfoList({ type: 'smoke' });
+async function getTableList(params: any) {
+  let res = await getDustInfoList({ type: 'smoke', ...params });
   const content = res.content;
   let contentArr = JSON.parse(content);
   tableData.value = contentArr;
 }
+//获取所有文件列表
+async function getAllFile() {
+  let res = await getAllFileList({ type: 'smoke' });
+  selectList.value = res.records.map((item: any) => ({
+    fileId: item.fileId,
+    fileName: item.fileName,
+  }));
+}
+//查询
+function getSearch() {
+  const selectedFile = selectList.value.find((item) => item.fileId === formSearch.fileId);
+  const params = {
+    fileId: formSearch.fileId,
+    fileName: selectedFile ? selectedFile.fileName : '',
+  };
+  getTableList(params);
+}
 onMounted(() => {
-  getTableList();
+  getTableList({ type: 'smoke' });
+  getAllFile();
 });
 </script>
 
@@ -35,6 +68,30 @@ onMounted(() => {
   position: relative;
 }
 
+.select-container {
+  display: flex;
+  align-items: center;
+  margin-bottom: 10px;
+}
+
+.select-label {
+  margin-right: 10px;
+  color: white;
+}
+
+.action-link {
+  color: #1890ff;
+  cursor: pointer;
+}
+
+.dustMonitor {
+  width: 100%;
+  height: 100%;
+  padding: 80px 10px 15px 10px;
+  box-sizing: border-box;
+  position: relative;
+}
+
 :deep(.zxm-table-thead > tr > th:last-child) {
   border-right: 1px solid #91e9fe !important;
 }