gas-injection/src/views/vent/monitorManager/comment/bundleMonitorTable.vue

<template>
  <div class="dustMonitor">
    <div class="search-area">
      <a-row>
        <a-col :span="12">
          <div class="area-item">
            <div class="item-text">录入时间：</div>
            <span style="width: 240px; color: #fff">{{ createTime }}</span>
          </div>
        </a-col>
        <a-col :span="12">
          <div class="area-item">
            <div class="item-text">录入人员：</div>
            <span style="width: 240px; color: #fff">{{ createBy }}</span>
          </div>
        </a-col>
      </a-row>
    </div>
    <div class="content-area">
      <a-table v-if="columns.length > 0" :columns="columns" :data-source="tableData" size="small" class="tableW" :scroll="{ y: 300 }">
        <template #bodyCell="{ column, record }">
          <a v-if="column.dataIndex === 'operation'" class="table-action-link" @click="handlerLocation(record)">定位</a>
        </template>
      </a-table>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { ref, onMounted, reactive, watch } from 'vue';
  import { bundleColumns } from './comment.data';
  import { getInfoList, getAllFileList } from './comment.api';
  // import 'ant-design-vue/dist/antd.css'; // 引入样式
  const emit = defineEmits(['locate']);
  const props = defineProps({
    isShowAction: {
      type: Boolean,
      default: false,
    },
  });
  let selectList = ref<any[]>([]);
  let jcddArr = ref<any[]>([]);
  let createBy = ref<any[]>([]);
  let createTime = ref<any[]>([]);
  let formSearch = reactive({
    pageNum: 1,
    pageSize: 1000,
    fileId: '',
    fileName: '',
  });
  const latentCount = ref(0); // 缓慢氧化阶段(潜伏期)
  const selfHeatingCount = ref(0); // 加速氧化阶段(自热期)
  const combustionCount = ref(0); // 剧烈氧化阶段(燃烧期)
  const latentPercent = ref(0); // 缓慢氧化阶段(潜伏期)
  const selfHeatingPercent = ref(0); // 加速氧化阶段(自热期)
  const combustionPercent = ref(0); // 剧烈氧化阶段(燃烧期)
  let tableData = ref<any[]>([]);
  let selectedFileId = ref<string | null>(null);
  const columns = ref([]);
  watch(
    () => props.isShowAction,
    (value) => {
      if (value) {
        bundleColumns.push({
          title: '操作',
          dataIndex: 'operation',
          width: 100,
          align: 'center',
        });
        if (columns.value.length == 0) columns.value = bundleColumns;
      } else {
        if (columns.value.length == 0) columns.value = bundleColumns;
      }
    },
    { immediate: true }
  );
  function handlerLocation(record) {
    emit('locate', record);
  }

  //获取束管日报
  async function getTableList(params: any) {
    let res = await getInfoList({ type: 'bundle', ...params });
    const content = res.content;
    let contentArr = JSON.parse(content);
    createBy.value = res.createBy;
    createTime.value = res.createTime;
    latentCount.value = contentArr.filter((item: any) => item.internalFireWarnLevel === '缓慢氧化阶段（潜伏期）').length;
    selfHeatingCount.value = contentArr.filter((item: any) => item.internalFireWarnLevel === '加速氧化阶段（自热期）').length;
    combustionCount.value = contentArr.filter((item: any) => item.internalFireWarnLevel === '剧烈氧化阶段（燃烧期）').length;
    const total = contentArr.length;
    latentPercent.value = (latentCount.value / total) * 100;
    selfHeatingPercent.value = (selfHeatingCount.value / total) * 100;
    combustionPercent.value = (combustionCount.value / total) * 100;
    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,
    }));
    jcddArr.value = res.records.map((item: any) => ({
      fileId: item.jcdd,
    }));
    if (selectList.value.length > 0) {
      formSearch.fileId = selectList.value[0].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>
  @ventSpace: zxm;
  .dustMonitor {
    .search-area {
      margin: 15px;

      .area-item {
        display: flex;
        align-items: center;

        .item-text {
          color: #fff;
        }
      }
    }

    .zxm-picker,
    .zxm-input {
      border: 1px solid #3ad8ff77;
      background-color: #ffffff00;
      color: #fff;
    }
  }

  :deep(.@{ventSpace}-table-body) {
    height: auto !important;

    tr > td {
      background: #ffffff00 !important;
    }

    tr.@{ventSpace}-table-row-selected {
      td {
        background: #007cc415 !important;
      }
    }
  }

  :deep(.jeecg-basic-table .@{ventSpace}-table-wrapper .@{ventSpace}-table-title) {
    min-height: 0;
  }

  :deep(.@{ventSpace}-pagination) {
    margin-right: 20px !important;
  }

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