gas-injection/src/views/vent/bundle/bundleMonitorTable/index.vue

<template>
  <div class="dustMonitor">
    <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">
          <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>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, shallowRef, reactive } from 'vue';
import { columns } from './bundle-table.data';
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({});

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;
}

//获取所有文件列表
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({ 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: 10px 10px 15px 10px;
  box-sizing: border-box;
  position: relative;
}

:deep(.zxm-table-thead > tr > th:last-child) {
  border-right: 1px solid #91e9fe !important;
}

:deep(.zxm-picker-input > input) {
  color: #fff;
}

:deep(.zxm-select:not(.zxm-select-customize-input) .zxm-select-selector) {
  border: 1px solid var(--vent-form-item-border) !important;
  background-color: #ffffff00 !important;
}

:deep(.zxm-select-selection-item) {
  color: #fff !important;
}
</style>