粉尘监测报表 束管报表 色谱仪报表左侧文件名称列表

src/views/vent/bundle/bundleMonitorTable/bundle-table.data.ts

@@ -11,7 +11,7 @@ export const columns: BasicColumn[] = [
     title: '测点名称',
     dataIndex: 'jcdd',
     key: 'jcdd',
-    width: 150,
+    width: 130,
     align: 'center',
   },
   {

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

@@ -1,20 +1,24 @@
 <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 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)">
+            {{ item.fileName }}
+          </li>
+        </ul>
+      </div>
+      <div class="table-container">
+        <a-table :columns="columns" :data-source="tableData" size="small" :scroll="{ y: 500 }" class="tableW">
+          <template #bodyCell="{ column, record }">
+            <template v-if="column.dataIndex === 'action'">
+              <a class="action-link" @click="toDetail(record)">数据分析</a>
+            </template>
+          </template>
+        </a-table>
+      </div>
     </div>
-    <a-table :columns="columns" :data-source="tableData" size="small" :scroll="{ y: 500 }" class="tableW">
-      <template #bodyCell="{ column, record }">
-        <template v-if="column.dataIndex === 'action'">
-          <a class="action-link" @click="toDetail(record)">数据分析</a>
-        </template>
-      </template>
-    </a-table>
     <a-modal style="width: 24%; height: 600px" title="爆炸三角形" v-model:visible="modalVisible" :draggable="true" :footer="null">
       <blastDelta :posMonitor="posMonitor" />
     </a-modal>
@@ -37,10 +41,12 @@ let formSearch = reactive({
 });
 let tableData = ref<any[]>([]);
 let modalVisible = ref(false);
+let selectedFileId = ref<string | null>(null);
 const posMonitor = shallowRef({});
 
 function toDetail(record: any) {
   posMonitor.value = record;
+  console.log(posMonitor.value, '爆炸三角形');
   modalVisible.value = true;
 }
 
@@ -59,6 +65,17 @@ async function getAllFile() {
     fileId: item.fileId,
     fileName: item.fileName,
   }));
+  if (selectList.value.length > 0) {
+    formSearch.fileId = selectList.value[0].fileId;
+    getSearch();
+  }
+}
+// 处理文件点击事件
+function handleFileClick(item: any) {
+  formSearch.fileId = item.fileId;
+  formSearch.fileName = item.fileName;
+  selectedFileId.value = item.fileId;
+  getSearch();
 }
 //查询
 function getSearch() {
@@ -71,32 +88,63 @@ function getSearch() {
 }
 onMounted(() => {
   getTableList({ type: 'bundle' });
-  getAllFile();
+  getAllFile().then(() => {
+    if (selectList.value.length > 0) {
+      formSearch.fileId = selectList.value[0].fileId;
+      selectedFileId.value = selectList.value[0].fileId;
+      getSearch();
+    }
+  });
 });
 </script>
 
 <style lang="less" scoped>
 @import '/@/design/theme.less';
 
-.select-container {
+.content-container {
   display: flex;
-  align-items: center;
-  margin-bottom: 10px;
+  width: 100%;
+  height: 100%;
 }
 
-.select-label {
+.file-list {
+  width: 20%;
+  padding: 10px;
   margin-right: 10px;
-  color: white;
+  margin-bottom: 50px;
+  border: 1px solid #99e8ff66;
+  background: #27546e1a;
+  box-shadow: 0px 0px 20px 7px rgba(145, 233, 254, 0.7) inset;
+  -moz-box-shadow: 0px 0px 20px 7px rgba(145, 233, 254, 0.7) inset;
+  -webkit-box-shadow: 0px 0px 50px 1px rgb(149 235 255 / 5%) inset;
 }
 
-.action-link {
-  color: #1890ff;
+.file-list ul {
+  list-style: none;
+  padding: 0;
+}
+
+.file-list li {
+  color: #fff;
+  padding: 5px;
   cursor: pointer;
 }
+
+.file-list li:hover,
+.file-list li.selected {
+  background: #26adfc1a;
+}
+
+.table-container {
+  margin-top: 10px;
+  width: 80%;
+  box-sizing: border-box;
+}
+
 .dustMonitor {
   width: 100%;
   height: 100%;
-  padding: 80px 10px 15px 10px;
+  padding: 10px 10px 15px 10px;
   box-sizing: border-box;
   position: relative;
 }

src/views/vent/bundle/bundleMonitorTable/modal/blastDelta.vue

@@ -1,6 +1,5 @@
 <template>
   <div class="blastDelta">
-    <!-- <div class="blast-title">爆炸三角形</div> -->
     <div ref="coord" class="coords">
       <div class="coord-lineY">
         <div :style="{ width: '5px', height: `${lengY}px`, 'border-top': '1px solid #0079ff' }" v-for="item in 10" :key="item"></div>
@@ -412,15 +411,6 @@ onMounted(() => {
   width: 100%;
   height: 450px;
 
-  // .blast-title {
-  //   position: absolute;
-  //   left: 50%;
-  //   top: 24px;
-  //   transform: translate(-50%, 0);
-  //   font-size: 12px;
-  //   color: #fff;
-  // }
-
   .line-legend {
     position: absolute;
     left: 50%;

src/views/vent/bundleSpy/bundleSpyTable/bundleSpy-table.data.ts

@@ -18,7 +18,7 @@ export const columns: BasicColumn[] = [
     title: '采样地点',
     dataIndex: 'jcdd',
     key: 'jcdd',
-    width: 140,
+    width: 100,
     align: 'center',
   },
   {

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

@@ -1,14 +1,18 @@
 <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>
+    <customHeader>色谱仪报表分析</customHeader>
+    <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)">
+            {{ item.fileName }}
+          </li>
+        </ul>
+      </div>
+      <div class="table-container">
+        <a-table :columns="columns" :data-source="tableData" size="small" :scroll="{ y: 500 }" class="tableW"> </a-table>
+      </div>
     </div>
-    <a-table :columns="columns" :data-source="tableData" size="small" :scroll="{ y: 500 }" class="tableW"> </a-table>
   </div>
 </template>
 
@@ -26,6 +30,7 @@ let formSearch = reactive({
   fileName: '',
 });
 let tableData = ref<any[]>([]);
+let selectedFileId = ref<string | null>(null);
 //获取色谱仪报表
 async function getTableList(params: any) {
   let res = await getbundleSpyInfoList({ type: 'bundleSpy', ...params });
@@ -41,6 +46,17 @@ async function getAllFile() {
     fileId: item.fileId,
     fileName: item.fileName,
   }));
+  if (selectList.value.length > 0) {
+    formSearch.fileId = selectList.value[0].fileId;
+    getSearch();
+  }
+}
+// 处理文件点击事件
+function handleFileClick(item: any) {
+  formSearch.fileId = item.fileId;
+  formSearch.fileName = item.fileName;
+  selectedFileId.value = item.fileId;
+  getSearch();
 }
 //查询
 function getSearch() {
@@ -53,33 +69,63 @@ function getSearch() {
 }
 onMounted(() => {
   getTableList({ type: 'bundleSpy' });
-  getAllFile();
+  getAllFile().then(() => {
+    if (selectList.value.length > 0) {
+      formSearch.fileId = selectList.value[0].fileId;
+      selectedFileId.value = selectList.value[0].fileId;
+      getSearch();
+    }
+  });
 });
 </script>
 
 <style lang="less" scoped>
 @import '/@/design/theme.less';
 
-.select-container {
+.content-container {
   display: flex;
-  align-items: center;
-  margin-bottom: 10px;
+  width: 100%;
+  height: 100%;
 }
 
-.select-label {
+.file-list {
+  width: 20%;
+  padding: 10px;
   margin-right: 10px;
-  color: white;
+  margin-bottom: 50px;
+  border: 1px solid #99e8ff66;
+  background: #27546e1a;
+  box-shadow: 0px 0px 20px 7px rgba(145, 233, 254, 0.7) inset;
+  -moz-box-shadow: 0px 0px 20px 7px rgba(145, 233, 254, 0.7) inset;
+  -webkit-box-shadow: 0px 0px 50px 1px rgb(149 235 255 / 5%) inset;
 }
 
-.action-link {
-  color: #1890ff;
+.file-list ul {
+  list-style: none;
+  padding: 0;
+}
+
+.file-list li {
+  color: #fff;
+  padding: 5px;
   cursor: pointer;
 }
 
+.file-list li:hover,
+.file-list li.selected {
+  background: #26adfc1a;
+}
+
+.table-container {
+  margin-top: 10px;
+  width: 80%;
+  box-sizing: border-box;
+}
+
 .dustMonitor {
   width: 100%;
   height: 100%;
-  padding: 80px 10px 15px 10px;
+  padding: 10px 10px 15px 10px;
   box-sizing: border-box;
   position: relative;
 }

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

@@ -9,7 +9,7 @@ export const columns = [
     title: '工作场所',
     dataIndex: 'gzcs',
     key: 'gzcs',
-    width: 130,
+    width: 100,
     align: 'center',
   },
   {

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

@@ -1,14 +1,18 @@
 <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>
+    <customHeader>粉尘监测报表分析</customHeader>
+    <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)">
+            {{ item.fileName }}
+          </li>
+        </ul>
+      </div>
+      <div class="table-container">
+        <a-table :columns="columns" :data-source="tableData" size="small" :scroll="{ y: 500 }" class="tableW"> </a-table>
+      </div>
     </div>
-    <a-table :columns="columns" :data-source="tableData" size="small" :scroll="{ y: 500 }" class="tableW"> </a-table>
   </div>
 </template>
 
@@ -27,6 +31,7 @@ let formSearch = reactive({
   fileId: '',
   fileName: '',
 });
+let selectedFileId = ref<string | null>(null);
 //获取粉尘监测结果数据
 async function getTableList(params: any) {
   let res = await getDustInfoList({ type: 'smoke', ...params });
@@ -41,8 +46,19 @@ async function getAllFile() {
     fileId: item.fileId,
     fileName: item.fileName,
   }));
+  if (selectList.value.length > 0) {
+    formSearch.fileId = selectList.value[0].fileId;
+    getSearch();
+  }
 }
 //查询
+// 处理文件点击事件
+function handleFileClick(item: any) {
+  formSearch.fileId = item.fileId;
+  formSearch.fileName = item.fileName;
+  selectedFileId.value = item.fileId;
+  getSearch();
+}
 function getSearch() {
   const selectedFile = selectList.value.find((item) => item.fileId === formSearch.fileId);
   const params = {
@@ -53,33 +69,63 @@ function getSearch() {
 }
 onMounted(() => {
   getTableList({ type: 'smoke' });
-  getAllFile();
+  getAllFile().then(() => {
+    if (selectList.value.length > 0) {
+      formSearch.fileId = selectList.value[0].fileId;
+      selectedFileId.value = selectList.value[0].fileId;
+      getSearch();
+    }
+  });
 });
 </script>
 
 <style lang="less" scoped>
 @import '/@/design/theme.less';
 
-.select-container {
+.content-container {
   display: flex;
-  align-items: center;
-  margin-bottom: 10px;
+  width: 100%;
+  height: 100%;
 }
 
-.select-label {
+.file-list {
+  width: 20%;
+  padding: 10px;
   margin-right: 10px;
-  color: white;
+  margin-bottom: 50px;
+  border: 1px solid #99e8ff66;
+  background: #27546e1a;
+  box-shadow: 0px 0px 20px 7px rgba(145, 233, 254, 0.7) inset;
+  -moz-box-shadow: 0px 0px 20px 7px rgba(145, 233, 254, 0.7) inset;
+  -webkit-box-shadow: 0px 0px 50px 1px rgb(149 235 255 / 5%) inset;
 }
 
-.action-link {
-  color: #1890ff;
+.file-list ul {
+  list-style: none;
+  padding: 0;
+}
+
+.file-list li {
+  color: #fff;
+  padding: 5px;
   cursor: pointer;
 }
 
+.file-list li:hover,
+.file-list li.selected {
+  background: #26adfc1a;
+}
+
+.table-container {
+  margin-top: 10px;
+  width: 80%;
+  box-sizing: border-box;
+}
+
 .dustMonitor {
   width: 100%;
   height: 100%;
-  padding: 80px 10px 15px 10px;
+  padding: 10px 10px 15px 10px;
   box-sizing: border-box;
   position: relative;
 }