mky-vent-base/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 :columns="bundleColumns" :data-source="tableData" size="small" class="tableW" :scroll="{ y: 300 }"> </a-table>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, reactive } from 'vue';
import { bundleColumns } from './comment.data';
import { getInfoList, getAllFileList } from './comment.api';
// import 'ant-design-vue/dist/antd.css'; // 引入样式
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);
//获取束管日报
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>