活鸡兔井粉尘监测报表 色谱仪报表 束管报表页面问题修改

src/views/vent/bundle/bundleMonitorTable/index.vue

@@ -4,13 +4,13 @@
     <div class="content-container">
       <div class="file-list">
         <ul>
-          <li v-for="item in selectList" :key="item.fileId" :class="{ selected: item.fileId === selectedFileId }" @click="handleFileClick(item)">
+          <li v-for="item in selectList" :key="item.id" :class="{ selected: item.id === selectedFileId }" @click="handleFileClick(item)">
             {{ item.fileName }}
           </li>
         </ul>
       </div>
       <div class="table-container">
-        <a-table :columns="computedColumns" :data-source="tableData" size="small" :scroll="{ y: 250 }" class="tableW">
+        <a-table :columns="computedColumns" :data-source="tableData" size="small" :pagination="false" :scroll="{ y: 250 }" class="tableW">
           <template #bodyCell="{ column, record }">
             <template v-if="column.dataIndex === 'action'">
               <a class="action-link" @click="toDetail(record)">数据分析</a>
@@ -65,7 +65,7 @@ let jcddArr = ref<any[]>([]);
 let formSearch = reactive({
   pageNum: 1,
   pageSize: 1000,
-  fileId: '',
+  id: '',
   fileName: '',
 });
 const total = ref(0);
@@ -411,6 +411,27 @@ function updateChart(data: any) {
         color: '#ffffff',
       },
     },
+    dataZoom: [
+      {
+        type: 'slider', // 会创建一个滑块来选择要显示的区域
+        start: 0, // 初始选中范围的起始百分比
+        end: (5 / categories.length) * 100, // 初始选中范围的结束百分比，根据数据条数调整
+        minSpan: (5 / categories.length) * 100, // 最小选中范围，根据数据条数调整
+        maxSpan: (5 / categories.length) * 100, // 最大选中范围，根据数据条数调整
+        show: true,
+        height: 10, // 设置滑块高度
+        bottom: 1, // 设置滑块距离容器底部的距离
+        borderColor: 'transparent', // 设置边框颜色为透明
+        backgroundColor: '#F6F7FB', // 设置背景颜色
+        handleIcon: 'path://M512,512m-448,0a448,448,0,1,0,896,0a448,448,0,1,0,-896,0Z', // 设置手柄图标为圆形
+        handleColor: '#C2D2FF', // 设置手柄颜色
+        handleSize: 13, // 设置手柄大小
+        handleStyle: {
+          borderColor: '#C2D2FF', // 设置手柄边框颜色
+        },
+        fillerColor: '#C2D2FF', // 设置选中范围的填充颜色
+      },
+    ],
     grid: {
       top: '21%', // 设置 grid 距离顶部的距离，增加间隔
       left: '3%',
@@ -491,29 +512,29 @@ async function getTableListById(params: any) {
 async function getAllFile() {
   let res = await getAllFileList({ type: 'bundle' });
   selectList.value = res.records.map((item: any) => ({
-    fileId: item.fileId,
+    id: item.id,
     fileName: item.fileName,
   }));
   jcddArr.value = res.records.map((item: any) => ({
-    fileId: item.jcdd,
+    id: item.jcdd,
   }));
   if (selectList.value.length > 0) {
-    formSearch.fileId = selectList.value[0].fileId;
+    formSearch.id = selectList.value[0].id;
     getSearch();
   }
 }
 // 处理文件点击事件
 function handleFileClick(item: any) {
-  formSearch.fileId = item.fileId;
+  formSearch.id = item.id;
   formSearch.fileName = item.fileName;
-  selectedFileId.value = item.fileId;
+  selectedFileId.value = item.id;
   getSearch();
 }
 //查询
 function getSearch() {
-  // const selectedFile = selectList.value.find((item) => item.fileId === formSearch.fileId);
+  // const selectedFile = selectList.value.find((item) => item.id === formSearch.id);
   const params = {
-    fileId: formSearch.fileId,
+    id: formSearch.id,
     // fileName: selectedFile ? selectedFile.fileName : '',
   };
   getTableListById(params);
@@ -522,8 +543,8 @@ onMounted(() => {
   getTableList({ type: 'bundle' });
   getAllFile().then(() => {
     if (selectList.value.length > 0) {
-      formSearch.fileId = selectList.value[0].fileId;
-      selectedFileId.value = selectList.value[0].fileId;
+      formSearch.id = selectList.value[0].id;
+      selectedFileId.value = selectList.value[0].id;
       getSearch();
     }
   });
@@ -574,6 +595,7 @@ onMounted(() => {
   box-sizing: border-box;
 }
 .data-container {
+  margin-top: 40px;
   display: flex;
   width: 100%;
   height: 100%;

src/views/vent/bundleSpy/bundleSpyTable/index.vue

@@ -4,13 +4,13 @@
     <div class="content-container">
       <div class="file-list">
         <ul>
-          <li v-for="item in selectList" :key="item.fileId" :class="{ selected: item.fileId === selectedFileId }" @click="handleFileClick(item)">
+          <li v-for="item in selectList" :key="item.id" :class="{ selected: item.id === selectedFileId }" @click="handleFileClick(item)">
             {{ item.fileName }}
           </li>
         </ul>
       </div>
       <div class="table-container">
-        <a-table :columns="computedColumns" :data-source="tableData" size="small" :scroll="{ y: 300 }" class="tableW">
+        <a-table :columns="computedColumns" :data-source="tableData" size="small" :pagination="false" :scroll="{ y: 300 }" class="tableW">
           <template #bodyCell="{ column, record }">
             <template v-if="column.dataIndex === 'action'">
               <a class="action-link" @click="toDetail(record)">数据分析</a>
@@ -57,7 +57,7 @@ let selectList = ref<any[]>([]);
 let formSearch = reactive({
   pageNum: 1,
   pageSize: 1000,
-  fileId: '',
+  id: '',
   fileName: '',
 });
 const total = ref(0);
@@ -323,6 +323,27 @@ function updateChart(data: any) {
         },
       },
     ],
+    dataZoom: [
+      {
+        type: 'slider', // 会创建一个滑块来选择要显示的区域
+        start: 0, // 初始选中范围的起始百分比
+        end: (5 / categories.length) * 100, // 初始选中范围的结束百分比，根据数据条数调整
+        minSpan: (5 / categories.length) * 100, // 最小选中范围，根据数据条数调整
+        maxSpan: (5 / categories.length) * 100, // 最大选中范围，根据数据条数调整
+        show: true,
+        height: 10, // 设置滑块高度
+        bottom: 1, // 设置滑块距离容器底部的距离
+        borderColor: 'transparent', // 设置边框颜色为透明
+        backgroundColor: '#F6F7FB', // 设置背景颜色
+        handleIcon: 'path://M512,512m-448,0a448,448,0,1,0,896,0a448,448,0,1,0,-896,0Z', // 设置手柄图标为圆形
+        handleColor: '#C2D2FF', // 设置手柄颜色
+        handleSize: 13, // 设置手柄大小
+        handleStyle: {
+          borderColor: '#C2D2FF', // 设置手柄边框颜色
+        },
+        fillerColor: '#C2D2FF', // 设置选中范围的填充颜色
+      },
+    ],
     grid: {
       top: '21%', // 设置 grid 距离顶部的距离，增加间隔
       left: '3%',
@@ -338,26 +359,26 @@ function updateChart(data: any) {
 async function getAllFile() {
   let res = await getAllFileList({ type: 'bundleSpy' });
   selectList.value = res.records.map((item: any) => ({
-    fileId: item.fileId,
+    id: item.id,
     fileName: item.fileName,
   }));
   if (selectList.value.length > 0) {
-    formSearch.fileId = selectList.value[0].fileId;
+    formSearch.id = selectList.value[0].id;
     getSearch();
   }
 }
 // 处理文件点击事件
 function handleFileClick(item: any) {
-  formSearch.fileId = item.fileId;
+  formSearch.id = item.id;
   formSearch.fileName = item.fileName;
-  selectedFileId.value = item.fileId;
+  selectedFileId.value = item.id;
   getSearch();
 }
 //查询
 function getSearch() {
-  // const selectedFile = selectList.value.find((item) => item.fileId === formSearch.fileId);
+  // const selectedFile = selectList.value.find((item) => item.id === formSearch.id);
   const params = {
-    fileId: formSearch.fileId,
+    id: formSearch.id,
     // fileName: selectedFile ? selectedFile.fileName : '',
   };
   getTableListById(params);
@@ -366,8 +387,8 @@ onMounted(() => {
   getTableList({ type: 'bundleSpy' });
   getAllFile().then(() => {
     if (selectList.value.length > 0) {
-      formSearch.fileId = selectList.value[0].fileId;
-      selectedFileId.value = selectList.value[0].fileId;
+      formSearch.id = selectList.value[0].id;
+      selectedFileId.value = selectList.value[0].id;
       getSearch();
     }
   });
@@ -443,6 +464,7 @@ onMounted(() => {
   color: #fff !important;
 }
 .data-container {
+  margin-top: 40px;
   display: flex;
   width: 100%;
   height: 100%;

src/views/vent/dust/dustMonitorTable/dust-table.data.ts

@@ -267,7 +267,7 @@ export const Hjtcolumns = [
     title: '监测地点',
     dataIndex: 'jcdd',
     key: 'jcdd',
-    width: 100,
+    width: 150,
     align: 'center',
   },
   {
@@ -286,14 +286,14 @@ export const Hjtcolumns = [
         title: '总尘',
         dataIndex: 'sc_zcds',
         key: 'sc_zcds',
-        width: 100,
+        width: 80,
         align: 'center',
       },
       {
         title: '呼尘',
         dataIndex: 'sc_hcds',
         key: 'sc_hcds',
-        width: 100,
+        width: 80,
         align: 'center',
       },
       {
@@ -314,14 +314,14 @@ export const Hjtcolumns = [
         title: '总尘',
         dataIndex: 'jx_zcds',
         key: 'jx_zcds',
-        width: 100,
+        width: 80,
         align: 'center',
       },
       {
         title: '呼尘',
         dataIndex: 'jx_hcds',
         key: 'jx_hcds',
-        width: 100,
+        width: 80,
         align: 'center',
       },
       {
@@ -342,28 +342,28 @@ export const Hjtcolumns = [
         title: '总尘',
         dataIndex: 'zcjqpj',
         key: 'zcjqpj',
-        width: 100,
+        width: 80,
         align: 'center',
       },
       {
         title: '是否合格',
         dataIndex: 'zcsfhgjqpj',
         key: 'zcsfhgjqpj',
-        width: 100,
+        width: 80,
         align: 'center',
       },
       {
         title: '呼尘',
         dataIndex: 'hcjqpj',
         key: 'hcjqpj',
-        width: 100,
+        width: 80,
         align: 'center',
       },
       {
         title: '是否合格',
         dataIndex: 'hcsfhgjqpj',
         key: 'hcsfhgjqpj',
-        width: 100,
+        width: 80,
         align: 'center',
       },
     ],
@@ -515,7 +515,7 @@ export const dataHjtColumns = [
     align: 'center',
     dataIndex: 'key',
     key: 'key',
-    width: 200,
+    width: 100,
     customRender: ({ text }) => fieldHjtMapping[text] || text,
   },
   {
@@ -661,7 +661,7 @@ export const AllDataHjtColumns = [
     align: 'center',
     dataIndex: 'key',
     key: 'key',
-    width: 200,
+    width: 100,
     customRender: ({ text }) => fieldHjtMapping[text] || text,
   },
   {

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

@@ -4,7 +4,7 @@
     <div class="content-container">
       <div class="file-list">
         <ul>
-          <li v-for="item in selectList" :key="item.fileId" :class="{ selected: item.fileId === selectedFileId }" @click="handleFileClick(item)">
+          <li v-for="item in selectList" :key="item.id" :class="{ selected: item.id === selectedFileId }" @click="handleFileClick(item)">
             {{ item.fileName }}
           </li>
         </ul>
@@ -39,7 +39,7 @@
                 :data-source="filteredResultByWorkplace"
                 :pagination="false"
                 size="small"
-                :scroll="{ y: 285 }"
+                :scroll="updateScrollPosition"
                 class="tableW"
               />
             </a-tab-pane>
@@ -49,7 +49,7 @@
                 :data-source="AllMaxValues"
                 size="small"
                 :pagination="false"
-                :scroll="{ y: 330 }"
+                :scroll="{ y: 280 }"
                 class="tableW"
               />
             </a-tab-pane>
@@ -96,9 +96,14 @@ const { sysOrgCode } = useGlobSetting();
 let formSearch = reactive({
   pageNum: 1,
   pageSize: 1000,
-  fileId: '',
+  id: '',
   fileName: '',
 });
+const updateScrollPosition = computed(() => {
+  return {
+    y: workplaceList.value.length > 0 ? 240 : 280,
+  };
+});
 //获取粉尘监测列展示数据
 const computedColumns = computed(() => {
   switch (sysOrgCode) {
@@ -360,26 +365,26 @@ function processTableData(data: any) {
 async function getAllFile() {
   let res = await getAllFileList({ type: 'smoke' });
   selectList.value = res.records.map((item: any) => ({
-    fileId: item.fileId,
+    id: item.id,
     fileName: item.fileName,
   }));
   if (selectList.value.length > 0) {
-    formSearch.fileId = selectList.value[0].fileId;
+    formSearch.id = selectList.value[0].id;
     getSearch();
   }
 }
 //查询
 // 处理文件点击事件
 function handleFileClick(item: any) {
-  formSearch.fileId = item.fileId;
+  formSearch.id = item.id;
   formSearch.fileName = item.fileName;
-  selectedFileId.value = item.fileId;
+  selectedFileId.value = item.id;
   getSearch();
 }
 function getSearch() {
-  // const selectedFile = selectList.value.find((item) => item.fileId === formSearch.fileId);
+  // const selectedFile = selectList.value.find((item) => item.id === formSearch.id);
   const params = {
-    id: formSearch.fileId,
+    id: formSearch.id,
     // fileName: selectedFile ? selectedFile.fileName : '',
   };
   getTableListById(params);
@@ -394,8 +399,8 @@ onMounted(() => {
   getTableList({ type: 'smoke' });
   getAllFile().then(() => {
     if (selectList.value.length > 0) {
-      formSearch.fileId = selectList.value[0].fileId;
-      selectedFileId.value = selectList.value[0].fileId;
+      formSearch.id = selectList.value[0].id;
+      selectedFileId.value = selectList.value[0].id;
       getSearch();
     }
   });
@@ -411,12 +416,11 @@ onMounted(() => {
   height: 100%;
   padding-top: 54px;
 }
-
 .file-list {
   width: 20%;
   padding: 10px;
   margin-right: 10px;
-  margin-bottom: 50px;
+  margin-bottom: 40px;
   border: 1px solid #99e8ff66;
   background: #27546e1a;
   box-shadow: 0px 0px 20px 7px rgba(145, 233, 254, 0.7) inset;
@@ -449,6 +453,7 @@ onMounted(() => {
 .tab-container {
   display: flex;
   align-items: center;
+  padding-top: 50px;
 }
 
 .tab-container .ant-tabs {