|  | @@ -1,13 +1,24 @@
 | 
	
		
			
				|  |  |  <template>
 | 
	
		
			
				|  |  |    <div class="dustMonitor">
 | 
	
		
			
				|  |  |      <customHeader>束管日报分析</customHeader>
 | 
	
		
			
				|  |  | -    <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 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-modal style="width: 24%; height: 600px" title="爆炸三角形" v-model:visible="modalVisible" :draggable="true" :footer="null">
 | 
	
		
			
				|  |  |        <blastDelta :posMonitor="posMonitor" />
 | 
	
		
			
				|  |  |      </a-modal>
 | 
	
	
		
			
				|  | @@ -15,40 +26,125 @@
 | 
	
		
			
				|  |  |  </template>
 | 
	
		
			
				|  |  |  
 | 
	
		
			
				|  |  |  <script setup lang="ts">
 | 
	
		
			
				|  |  | -import { ref, onMounted, shallowRef } from 'vue';
 | 
	
		
			
				|  |  | +import { ref, onMounted, shallowRef, reactive } from 'vue';
 | 
	
		
			
				|  |  |  import { columns } from './bundle-table.data';
 | 
	
		
			
				|  |  | -import { getBundleInfoList } from './bundle-table.api';
 | 
	
		
			
				|  |  | +import { getBundleInfoList, getAllFileList } from './bundle-table.api';
 | 
	
		
			
				|  |  |  import customHeader from '/@/components/vent/customHeader.vue';
 | 
	
		
			
				|  |  |  // import { blastDelta } from './modal/blastDelta.vue';
 | 
	
		
			
				|  |  |  import blastDelta from './modal/blastDelta.vue';
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | +let selectList = ref<any[]>([]);
 | 
	
		
			
				|  |  | +let formSearch = reactive({
 | 
	
		
			
				|  |  | +  pageNum: 1,
 | 
	
		
			
				|  |  | +  pageSize: 1000,
 | 
	
		
			
				|  |  | +  fileId: '',
 | 
	
		
			
				|  |  | +  fileName: '',
 | 
	
		
			
				|  |  | +});
 | 
	
		
			
				|  |  |  let tableData = ref<any[]>([]);
 | 
	
		
			
				|  |  |  let modalVisible = ref(false);
 | 
	
		
			
				|  |  | +let selectedFileId = ref<string | null>(null);
 | 
	
		
			
				|  |  |  const posMonitor = shallowRef({});
 | 
	
		
			
				|  |  | -async function getTableList() {
 | 
	
		
			
				|  |  | -  let res = await getBundleInfoList({ type: 'bundle' });
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +function toDetail(record: any) {
 | 
	
		
			
				|  |  | +  posMonitor.value = record;
 | 
	
		
			
				|  |  | +  console.log(posMonitor.value, '爆炸三角形');
 | 
	
		
			
				|  |  | +  modalVisible.value = true;
 | 
	
		
			
				|  |  | +}
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +//获取色谱仪报表
 | 
	
		
			
				|  |  | +async function getTableList(params: any) {
 | 
	
		
			
				|  |  | +  let res = await getBundleInfoList({ type: 'bundle', ...params });
 | 
	
		
			
				|  |  |    const content = res.content;
 | 
	
		
			
				|  |  |    let contentArr = JSON.parse(content);
 | 
	
		
			
				|  |  |    tableData.value = contentArr;
 | 
	
		
			
				|  |  |  }
 | 
	
		
			
				|  |  |  
 | 
	
		
			
				|  |  | -function toDetail(record: any) {
 | 
	
		
			
				|  |  | -  posMonitor.value = record;
 | 
	
		
			
				|  |  | -  console.log(posMonitor.value, 'posMonitor');
 | 
	
		
			
				|  |  | -  modalVisible.value = true;
 | 
	
		
			
				|  |  | +//获取所有文件列表
 | 
	
		
			
				|  |  | +async function getAllFile() {
 | 
	
		
			
				|  |  | +  let res = await getAllFileList({ type: 'bundle' });
 | 
	
		
			
				|  |  | +  selectList.value = res.records.map((item: any) => ({
 | 
	
		
			
				|  |  | +    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 = {
 | 
	
		
			
				|  |  | +    fileId: formSearch.fileId,
 | 
	
		
			
				|  |  | +    fileName: selectedFile ? selectedFile.fileName : '',
 | 
	
		
			
				|  |  | +  };
 | 
	
		
			
				|  |  | +  getTableList(params);
 | 
	
		
			
				|  |  |  }
 | 
	
		
			
				|  |  |  onMounted(() => {
 | 
	
		
			
				|  |  | -  getTableList();
 | 
	
		
			
				|  |  | +  getTableList({ type: 'bundle' });
 | 
	
		
			
				|  |  | +  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';
 | 
	
		
			
				|  |  |  
 | 
	
		
			
				|  |  | +.content-container {
 | 
	
		
			
				|  |  | +  display: flex;
 | 
	
		
			
				|  |  | +  width: 100%;
 | 
	
		
			
				|  |  | +  height: 100%;
 | 
	
		
			
				|  |  | +}
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +.file-list {
 | 
	
		
			
				|  |  | +  width: 20%;
 | 
	
		
			
				|  |  | +  padding: 10px;
 | 
	
		
			
				|  |  | +  margin-right: 10px;
 | 
	
		
			
				|  |  | +  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;
 | 
	
		
			
				|  |  | +}
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +.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;
 | 
	
		
			
				|  |  |  }
 |