vent-template/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.id" :class="{ selected: item.id === selectedFileId }" @click="handleFileClick(item)">
            {{ item.fileName }}
          </li>
        </ul>
      </div>
      <div class="table-container">
        <a-table :columns="computedColumns" :data-source="tableData" size="small" :pagination="false" :scroll="{ y: 250 }" class="tableW">
          <template #bodyCell="{ column, record }">
            <template v-if="column.dataIndex === 'action'">
              <a class="action-link" @click="toDetail(record)">数据分析</a>
            </template>
            <template v-else>
              <template v-if="record[column.dataIndex] === null">
                <span>-</span>
              </template>
            </template>
          </template>
        </a-table>
        <div class="data-container">
          <div id="barChart" class="bar-chart"></div>
          <div class="data-content">
            <div class="title">煤自燃阶段统计分析</div>
            <div class="explain">测点共计{{ total }}个</div>
            <div class="progress-label">潜伏期阶段：{{ qfqCount }}</div>
            <Progress :percent="qfqPercent" size="default" strokeColor="green" :show-info="true" :format="() => qfqCount" />
            <div class="progress-label">缓慢氧化升温阶段：{{ latentCount }}</div>
            <Progress :percent="latentPercent" size="default" strokeColor="yellow" :show-info="true" :format="() => latentCount" />
            <div class="progress-label">加速氧化升温阶段：{{ selfHeatingCount }}</div>
            <Progress :percent="selfHeatingPercent" size="default" strokeColor="orange‌" :show-info="true" :format="() => selfHeatingCount" />
            <div class="progress-label">剧烈氧化升温阶段：{{ combustionCount }}</div>
            <Progress :percent="combustionPercent" size="default" strokeColor="red" :show-info="true" :format="() => combustionCount" />
          </div>
        </div>
      </div>
    </div>
    <a-modal style="width: 60%; height: 300px" title="爆炸三角形" v-model:visible="modalVisible" :draggable="true" :footer="null">
      <div class="blast-delta-container">
        <BlastDelta :posMonitor="posMonitor" style="width: calc(50% - 20px)" />
        <BlastDelta1 :posMonitor="posMonitor" style="width: calc(50% - 20px)" />
      </div>
    </a-modal>
  </div>
</template>

<script setup lang="ts">
  import { ref, onMounted, computed, shallowRef, reactive, nextTick } from 'vue';
  import { columns, Hjtcolumns, Bdcolumns, Bltcolumns, Sgtcolumns, Yjlcolumns, Cctrkcolumns, wlmlcolumns, Cctkcolumns } from './bundle-table.data';
  import { getBundleInfoList, getAllFileList, getAllFileListById } from './bundle-table.api';
  import customHeader from '/@/components/vent/customHeader.vue';
  // import { blastDelta } from './modal/blastDelta.vue';
  import BlastDelta from './modal/blastDelta.vue';
  import BlastDelta1 from './modal/blastDelta1.vue';
  import * as echarts from 'echarts';
  import { Progress } from 'ant-design-vue';
  import { useGlobSetting } from '/@/hooks/setting';
  // import 'ant-design-vue/dist/antd.css'; // 引入样式
  let selectList = ref<any[]>([]);
  let jcddArr = ref<any[]>([]);
  let formSearch = reactive({
    pageNum: 1,
    pageSize: 1000,
    id: '',
    fileName: '',
  });
  const total = ref(0);
  const { sysOrgCode } = useGlobSetting();
  const qfqCount = ref(0); // 潜伏期
  const latentCount = ref(0); // 缓慢氧化阶段(潜伏期)
  const selfHeatingCount = ref(0); // 加速氧化阶段(自热期)
  const combustionCount = ref(0); // 剧烈氧化阶段(燃烧期)
  const qfqPercent = ref(0); // 潜伏期(潜伏期)
  const latentPercent = ref(0); // 缓慢氧化阶段(潜伏期)
  const selfHeatingPercent = ref(0); // 加速氧化阶段(自热期)
  const combustionPercent = ref(0); // 剧烈氧化阶段(燃烧期)
  let tableData = ref<any[]>([]);
  let modalVisible = ref(false);
  let selectedFileId = ref<string | null>(null);
  const posMonitor = shallowRef({});
  const computedColumns = computed(() => {
    switch (sysOrgCode) {
      case 'sdmtjtdltmkhjtj':
        return Hjtcolumns; // 活鸡兔对应的列配置
      case 'sdmtjtBdmk':
        return Bdcolumns; // 保德对应的列配置
      case 'sdmtjtbltmk':
        return Bltcolumns; // 补连塔对应的列配置
      case 'sdmtjtsgtmk':
        return Sgtcolumns; // 石圪台对应的列配置
      case 'sdmtjtyjlmk':
        return Yjlcolumns; // 榆家梁对应的列配置
      case 'sdmtjtcctrk':
        return Cctrkcolumns; // 寸草塔二矿对应的列配置
      case 'sdmtjtwlmlmk':
        return wlmlcolumns; // 乌兰木伦对应的列配置
      case 'sdmtjtcctmk':
        return Cctkcolumns; // 乌兰木伦对应的列配置
      default:
        return columns; // 默认情况下返回的列配置
    }
  });
  function updateChart(data: any) {
    const chartDom = document.getElementById('barChart');
    const myChart = echarts.init(chartDom);
    const categories = data.map((item: any) => item.jcdd);
    const c2h2MaxValues = data.map((item: any) => parseFloat(item.c2h2_max));
    const c2h2MinValues = data.map((item: any) => parseFloat(item.c2h2_min));
    const c2h2AveValues = data.map((item: any) => parseFloat(item.c2h2_ave));
    const c2h4MaxValues = data.map((item: any) => parseFloat(item.c2h4_max));
    const c2h4MinValues = data.map((item: any) => parseFloat(item.c2h4_min));
    const c2h4AveValues = data.map((item: any) => parseFloat(item.c2h4_ave));
    const c2h6AveValues = data.map((item: any) => parseFloat(item.c2h6_ave));
    const ch4MaxValues = data.map((item: any) => parseFloat(item.ch4_max));
    const ch4MinValues = data.map((item: any) => parseFloat(item.ch4_min));
    const ch4AveValues = data.map((item: any) => parseFloat(item.ch4_ave));
    const co2MaxValues = data.map((item: any) => parseFloat(item.co2_max));
    const co2MinValues = data.map((item: any) => parseFloat(item.co2_min));
    const co2AveValues = data.map((item: any) => parseFloat(item.co2_ave));
    const coMaxValues = data.map((item: any) => parseFloat(item.co_max));
    const coMinValues = data.map((item: any) => parseFloat(item.co_min));
    const coAveValues = data.map((item: any) => parseFloat(item.co_ave));
    const o2MaxValues = data.map((item: any) => parseFloat(item.o2_max));
    const o2MinValues = data.map((item: any) => parseFloat(item.o2_min));
    const o2AveValues = data.map((item: any) => parseFloat(item.o2_ave));
    const n2MaxValues = data.map((item: any) => parseFloat(item.n2_max));
    const n2MinValues = data.map((item: any) => parseFloat(item.n2_min));
    const n2AveValues = data.map((item: any) => parseFloat(item.n2_ave));
    const no2MaxValues = data.map((item: any) => parseFloat(item.no2_max));
    const no2MinValues = data.map((item: any) => parseFloat(item.no2_min));
    const no2AveValues = data.map((item: any) => parseFloat(item.no2_ave));
    const h2MaxValues = data.map((item: any) => parseFloat(item.h2_max));
    const h2MinValues = data.map((item: any) => parseFloat(item.h2_min));
    const h2AveValues = data.map((item: any) => parseFloat(item.h2_ave));

    const getSeriesConfig = (sysOrgCode) => {
      switch (sysOrgCode) {
        case 'sdmtjtdltmkhjtj':
          return [
            {
              name: 'CO₂最大值',
              data: co2MaxValues,
              type: 'bar',
            },
            {
              name: 'CO₂平均值',
              data: co2AveValues,
              type: 'bar',
            },
            {
              name: 'CO最大值',
              data: coMaxValues,
              type: 'bar',
            },
            {
              name: 'CO平均值',
              data: coAveValues,
              type: 'bar',
            },
            {
              name: 'O₂最小值',
              data: o2MinValues,
              type: 'bar',
            },
            {
              name: 'O₂平均值',
              data: o2AveValues,
              type: 'bar',
            },
            {
              name: 'CH₄最大值',
              data: ch4MaxValues,
              type: 'bar',
            },
            {
              name: 'CH₄平均值',
              data: ch4AveValues,
              type: 'bar',
            },
            {
              name: 'N₂最大值',
              data: n2MaxValues,
              type: 'bar',
            },
            {
              name: 'N₂平均值',
              data: n2AveValues,
              type: 'bar',
            },
            {
              name: 'C₂H₂最大值',
              data: c2h2MaxValues,
              type: 'bar',
            },
            {
              name: 'C₂H₂平均值',
              data: c2h2AveValues,
              type: 'bar',
            },
            {
              name: 'C₂H₄最大值',
              data: c2h4MaxValues,
              type: 'bar',
            },
            {
              name: 'C₂H₄平均值',
              data: c2h4AveValues,
              type: 'bar',
            },
          ];
        case 'sdmtjtswmk':
          return [
            {
              name: 'C₂H₂最大值',
              data: c2h2MaxValues,
              type: 'bar',
            },
            {
              name: 'C₂H₂平均值',
              data: c2h2AveValues,
              type: 'bar',
            },
            {
              name: 'C₂H₄最大值',
              data: c2h4MaxValues,
              type: 'bar',
            },
            {
              name: 'C₂H₄平均值',
              data: c2h4AveValues,
              type: 'bar',
            },
            {
              name: 'CH₄最大值',
              data: ch4MaxValues,
              type: 'bar',
            },
            {
              name: 'CH₄平均值',
              data: ch4AveValues,
              type: 'bar',
            },
            {
              name: 'CO₂最大值',
              data: co2MaxValues,
              type: 'bar',
            },
            {
              name: 'CO₂平均值',
              data: co2AveValues,
              type: 'bar',
            },
            {
              name: 'CO最大值',
              data: coMaxValues,
              type: 'bar',
            },
            {
              name: 'CO平均值',
              data: coAveValues,
              type: 'bar',
            },
            {
              name: 'O₂最小值',
              data: o2MinValues,
              type: 'bar',
            },
            {
              name: 'O₂平均值',
              data: o2AveValues,
              type: 'bar',
            },
            {
              name: 'N₂最大值',
              data: n2MaxValues,
              type: 'bar',
            },
            {
              name: 'N₂平均值',
              data: n2AveValues,
              type: 'bar',
            },
            {
              name: 'NO₂最大值',
              data: no2MaxValues,
              type: 'bar',
            },
            {
              name: 'NO₂平均值',
              data: no2AveValues,
              type: 'bar',
            },
          ];
        case 'sdmtjtBdmk':
          return [
            {
              name: 'O₂最大值',
              data: o2MaxValues,
              type: 'bar',
            },
            {
              name: 'O₂最小值',
              data: o2MinValues,
              type: 'bar',
            },
            {
              name: 'O₂平均值',
              data: o2AveValues,
              type: 'bar',
            },
            {
              name: 'N₂最大值',
              data: n2MaxValues,
              type: 'bar',
            },
            {
              name: 'N₂最小值',
              data: n2MinValues,
              type: 'bar',
            },
            {
              name: 'N₂平均值',
              data: n2AveValues,
              type: 'bar',
            },

            {
              name: 'CO最大值',
              data: coMaxValues,
              type: 'bar',
            },
            {
              name: 'CO最小值',
              data: coMinValues,
              type: 'bar',
            },
            {
              name: 'CO平均值',
              data: coAveValues,
              type: 'bar',
            },
            {
              name: 'CO₂最大值',
              data: co2MaxValues,
              type: 'bar',
            },
            {
              name: 'CO₂最小值',
              data: co2MinValues,
              type: 'bar',
            },
            {
              name: 'CO₂平均值',
              data: co2AveValues,
              type: 'bar',
            },
            {
              name: 'CH₄最大值',
              data: ch4MaxValues,
              type: 'bar',
            },
            {
              name: 'CH₄最小值',
              data: ch4MinValues,
              type: 'bar',
            },
            {
              name: 'CH₄平均值',
              data: ch4AveValues,
              type: 'bar',
            },
            {
              name: 'C₂H₄最大值',
              data: c2h4MaxValues,
              type: 'bar',
            },
            {
              name: 'C₂H₄最小值',
              data: c2h4MinValues,
              type: 'bar',
            },
            {
              name: 'C₂H₄平均值',
              data: c2h4AveValues,
              type: 'bar',
            },
            {
              name: 'C₂H₂最大值',
              data: c2h2MaxValues,
              type: 'bar',
            },
            {
              name: 'C₂H₂最小值',
              data: c2h2MinValues,
              type: 'bar',
            },
            {
              name: 'C₂H₂平均值',
              data: c2h2AveValues,
              type: 'bar',
            },
            {
              name: 'H₂最大值',
              data: h2MaxValues,
              type: 'bar',
            },
            {
              name: 'H₂最小值',
              data: h2MinValues,
              type: 'bar',
            },
            {
              name: 'H₂平均值',
              data: h2AveValues,
              type: 'bar',
            },
            {
              name: 'NO₂最大值',
              data: no2MaxValues,
              type: 'bar',
            },
            {
              name: 'NO₂最小值',
              data: no2MinValues,
              type: 'bar',
            },
            {
              name: 'NO₂平均值',
              data: no2AveValues,
              type: 'bar',
            },
          ];
        case 'sdmtjtBltmk':
          return [
            {
              name: 'O₂最大值',
              data: o2MaxValues,
              type: 'bar',
            },
            {
              name: 'O₂最小值',
              data: o2MinValues,
              type: 'bar',
            },
            {
              name: 'O₂平均值',
              data: o2AveValues,
              type: 'bar',
            },
            {
              name: 'N₂最大值',
              data: n2MaxValues,
              type: 'bar',
            },
            {
              name: 'N₂最小值',
              data: n2MinValues,
              type: 'bar',
            },
            {
              name: 'N₂平均值',
              data: n2AveValues,
              type: 'bar',
            },

            {
              name: 'CO最大值',
              data: coMaxValues,
              type: 'bar',
            },
            {
              name: 'CO最小值',
              data: coMinValues,
              type: 'bar',
            },
            {
              name: 'CO平均值',
              data: coAveValues,
              type: 'bar',
            },
            {
              name: 'CO₂最大值',
              data: co2MaxValues,
              type: 'bar',
            },
            {
              name: 'CO₂最小值',
              data: co2MinValues,
              type: 'bar',
            },
            {
              name: 'CO₂平均值',
              data: co2AveValues,
              type: 'bar',
            },
            {
              name: 'CH₄最大值',
              data: ch4MaxValues,
              type: 'bar',
            },
            {
              name: 'CH₄最小值',
              data: ch4MinValues,
              type: 'bar',
            },
            {
              name: 'CH₄平均值',
              data: ch4AveValues,
              type: 'bar',
            },
            {
              name: 'C₂H₄最大值',
              data: c2h4MaxValues,
              type: 'bar',
            },
            {
              name: 'C₂H₄最小值',
              data: c2h4MinValues,
              type: 'bar',
            },
            {
              name: 'C₂H₄平均值',
              data: c2h4AveValues,
              type: 'bar',
            },
            {
              name: 'C₂H₂最大值',
              data: c2h2MaxValues,
              type: 'bar',
            },
            {
              name: 'C₂H₂最小值',
              data: c2h2MinValues,
              type: 'bar',
            },
            {
              name: 'C₂H₂平均值',
              data: c2h2AveValues,
              type: 'bar',
            },
          ];
        case 'sdmtjtyjlmk':
          return [
            {
              name: 'O₂最小值',
              data: o2MinValues,
              type: 'bar',
            },
            {
              name: 'O₂平均值',
              data: o2AveValues,
              type: 'bar',
            },
            {
              name: 'N₂最大值',
              data: n2MaxValues,
              type: 'bar',
            },
            {
              name: 'N₂平均值',
              data: n2AveValues,
              type: 'bar',
            },

            {
              name: 'CO最大值',
              data: coMaxValues,
              type: 'bar',
            },
            {
              name: 'CO平均值',
              data: coAveValues,
              type: 'bar',
            },
            {
              name: 'CO₂最大值',
              data: co2MaxValues,
              type: 'bar',
            },
            {
              name: 'CO₂平均值',
              data: co2AveValues,
              type: 'bar',
            },
            {
              name: 'CH₄最大值',
              data: ch4MaxValues,
              type: 'bar',
            },
            {
              name: 'CH₄平均值',
              data: ch4AveValues,
              type: 'bar',
            },
            {
              name: 'C₂H₄最大值',
              data: c2h4MaxValues,
              type: 'bar',
            },
            {
              name: 'C₂H₄平均值',
              data: c2h4AveValues,
              type: 'bar',
            },
            {
              name: 'C₂H₂最大值',
              data: c2h2MaxValues,
              type: 'bar',
            },
            {
              name: 'C₂H₂平均值',
              data: c2h2AveValues,
              type: 'bar',
            },
          ];
        case 'sdmtjtcctrk':
          return [
            {
              name: 'O₂平均值',
              data: o2AveValues,
              type: 'bar',
            },
            {
              name: 'N₂平均值',
              data: n2AveValues,
              type: 'bar',
            },
            {
              name: 'CO平均值',
              data: coAveValues,
              type: 'bar',
            },
            {
              name: 'CO₂平均值',
              data: co2AveValues,
              type: 'bar',
            },
            {
              name: 'CH₄平均值',
              data: ch4AveValues,
              type: 'bar',
            },
            {
              name: 'C₂H₄平均值',
              data: c2h4AveValues,
              type: 'bar',
            },
            {
              name: 'C₂H₂平均值',
              data: c2h2AveValues,
              type: 'bar',
            },
            {
              name: 'C₂H₆平均值',
              data: c2h6AveValues,
              type: 'bar',
            },
          ];
        case 'sdmtjtwlmlmk':
          return [
            {
              name: 'O₂平均值',
              data: o2AveValues,
              type: 'bar',
            },
            {
              name: 'N₂平均值',
              data: n2AveValues,
              type: 'bar',
            },
            {
              name: 'CO平均值',
              data: coAveValues,
              type: 'bar',
            },
            {
              name: 'CO₂平均值',
              data: co2AveValues,
              type: 'bar',
            },
            {
              name: 'CH₄平均值',
              data: ch4AveValues,
              type: 'bar',
            },
            {
              name: 'C₂H₄平均值',
              data: c2h4AveValues,
              type: 'bar',
            },
            {
              name: 'C₂H₂平均值',
              data: c2h2AveValues,
              type: 'bar',
            },
          ];
        case 'sdmtjtcctmk':
          return [
            {
              name: 'O₂最小值',
              data: o2MinValues,
              type: 'bar',
            },
            {
              name: 'O₂平均值',
              data: o2AveValues,
              type: 'bar',
            },
            {
              name: 'N₂最大值',
              data: n2MaxValues,
              type: 'bar',
            },
            {
              name: 'N₂平均值',
              data: n2AveValues,
              type: 'bar',
            },

            {
              name: 'CO最大值',
              data: coMaxValues,
              type: 'bar',
            },
            {
              name: 'CO平均值',
              data: coAveValues,
              type: 'bar',
            },
            {
              name: 'CO₂最大值',
              data: co2MaxValues,
              type: 'bar',
            },
            {
              name: 'CO₂平均值',
              data: co2AveValues,
              type: 'bar',
            },
            {
              name: 'CH₄最大值',
              data: ch4MaxValues,
              type: 'bar',
            },
            {
              name: 'CH₄平均值',
              data: ch4AveValues,
              type: 'bar',
            },
            {
              name: 'C₂H₄最大值',
              data: c2h4MaxValues,
              type: 'bar',
            },
            {
              name: 'C₂H₄平均值',
              data: c2h4AveValues,
              type: 'bar',
            },
            {
              name: 'C₂H₂最大值',
              data: c2h2MaxValues,
              type: 'bar',
            },
            {
              name: 'C₂H₂平均值',
              data: c2h2AveValues,
              type: 'bar',
            },
          ];
        default:
          return [
            {
              name: 'C₂H₂最大值',
              data: c2h2MaxValues,
              type: 'bar',
            },
            {
              name: 'C₂H₂平均值',
              data: c2h2AveValues,
              type: 'bar',
            },
            {
              name: 'C₂H₄最大值',
              data: c2h4MaxValues,
              type: 'bar',
            },
            {
              name: 'C₂H₄平均值',
              data: c2h4AveValues,
              type: 'bar',
            },
            {
              name: 'CH₄最大值',
              data: ch4MaxValues,
              type: 'bar',
            },
            {
              name: 'CH₄平均值',
              data: ch4AveValues,
              type: 'bar',
            },
            {
              name: 'CO₂最大值',
              data: co2MaxValues,
              type: 'bar',
            },
            {
              name: 'CO₂平均值',
              data: co2AveValues,
              type: 'bar',
            },
            {
              name: 'CO最大值',
              data: coMaxValues,
              type: 'bar',
            },
            {
              name: 'CO平均值',
              data: coAveValues,
              type: 'bar',
            },
            {
              name: 'O₂最小值',
              data: o2MinValues,
              type: 'bar',
            },
            {
              name: 'O₂平均值',
              data: o2AveValues,
              type: 'bar',
            },
            // {
            //   name: 'N₂最大值',
            //   data: n2MaxValues,
            //   type: 'bar',
            // },
            // {
            //   name: 'N₂平均值',
            //   data: n2AveValues,
            //   type: 'bar',
            // },
            // {
            //   name: 'NO₂最大值',
            //   data: no2MaxValues,
            //   type: 'bar',
            // },
            // {
            //   name: 'NO₂平均值',
            //   data: no2AveValues,
            //   type: 'bar',
            // },
          ];
      }
    };

    const seriesConfig = getSeriesConfig(sysOrgCode);

    const option = {
      tooltip: {
        trigger: 'axis',
        backgroundColor: 'rgba(28, 72, 105, 0.5)', // 设置 tooltip 背景为透明
        textStyle: {
          color: '#ffffff', // 设置 tooltip 字体颜色为白色
        },
        axisPointer: {
          type: 'shadow',
          label: {
            show: true,
            backgroundColor: '#1c4869',
          },
        },
      },
      legend: {
        top: '2%',
        textStyle: {
          color: '#ffffffff',
        },
        width: '80%', // 设置图例的宽度
        orient: 'horizontal', // 水平布局
        pageIconColor: '#ffffff', // 设置翻页图标颜色
        pageTextStyle: {
          color: '#ffffff', // 设置翻页文字颜色
        },
      },
      xAxis: {
        type: 'category',
        data: categories,
        splitLine: { show: true, lineStyle: { color: 'rgba(28, 72, 105, 0.5)' } },
        axisLabel: {
          interval: 0, // 显示所有标签
          color: '#ffffff', // 设置 x 轴字体颜色
          formatter: function (value: string) {
            return value.length > 8 ? value.slice(0, 8) + '...' : value; // 截断长标签
          },
        },
      },
      yAxis: {
        type: 'value',
        splitLine: { show: true, lineStyle: { color: 'rgba(28, 72, 105, 0.5)' } },
        axisLabel: {
          color: '#ffffff',
        },
      },
      dataZoom: [
        {
          type: 'slider', // 会创建一个滑块来选择要显示的区域
          start: 0, // 初始选中范围的起始百分比
          end: (5 / categories.length) * 100, // 初始选中范围的结束百分比，根据数据条数调整
          minSpan: (5 / categories.length) * 100, // 最小选中范围，根据数据条数调整
          maxSpan: (5 / categories.length) * 100, // 最大选中范围，根据数据条数调整
          show: true,
          height: 10, // 设置滑块高度
          bottom: 1, // 设置滑块距离容器底部的距离
          borderColor: 'transparent', // 设置边框颜色为透明
          backgroundColor: '#F6F7FB', // 设置背景颜色
          handleIcon: 'path://M512,512m-448,0a448,448,0,1,0,896,0a448,448,0,1,0,-896,0Z', // 设置手柄图标为圆形
          handleColor: '#C2D2FF', // 设置手柄颜色
          handleSize: 13, // 设置手柄大小
          handleStyle: {
            borderColor: '#C2D2FF', // 设置手柄边框颜色
          },
          fillerColor: '#C2D2FF', // 设置选中范围的填充颜色
        },
      ],
      grid: {
        top: '21%', // 设置 grid 距离顶部的距离，增加间隔
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true,
      },
      series: seriesConfig,
    };
    myChart.setOption(option);
  }
  //跳转到爆炸三角形
  function toDetail(record: any) {
    posMonitor.value = record;
    modalVisible.value = true;
  }
  //获取束管日报
  async function getTableList(params: any) {
    let res = await getBundleInfoList({ type: 'bundle', ...params });
    const content = res.content;
    let contentArr = JSON.parse(content);
    // const contentNewArr = computed(() => {
    //   return contentArr.map((item) => {
    //     let internalFireWarnLevel = '';

    //     const co = item.co_ave;
    //     const co2 = item.co2_ave;
    //     const c2h4 = item.c2h4_ave;
    //     const c2h2 = item.c2h2_ave;
    //     const coRatio = co / co2;

    //     if (co >= 0 && co <= 13.75) {
    //       internalFireWarnLevel = '潜伏期阶段';
    //     } else if (co > 13.75 && co < 67.2 && coRatio < 0.095) {
    //       internalFireWarnLevel = '缓慢氧化升温阶段';
    //     } else if ((co >= 67.2 && co < 1606.3) || (coRatio >= 0.095 && coRatio < 0.322) || c2h4 < 2) {
    //       internalFireWarnLevel = '加速氧化阶段';
    //     } else if (co >= 1606.3 || coRatio >= 0.322 || c2h4 >= 2 || c2h2 > 0) {
    //       internalFireWarnLevel = '剧烈氧化阶段';
    //     }

    //     return { ...item, internalFireWarnLevel };
    //   });
    // });
    total.value = contentArr.length;
    qfqCount.value = contentArr.filter((item: any) => item.internalFireWarnLevel === '潜伏期阶段').length;
    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;
    qfqPercent.value = (qfqCount.value / total.value) * 100;
    latentPercent.value = (latentCount.value / total.value) * 100;
    selfHeatingPercent.value = (selfHeatingCount.value / total.value) * 100;
    combustionPercent.value = (combustionCount.value / total.value) * 100;
    tableData.value = contentArr;
    nextTick(() => {
      updateChart(contentArr);
    });
  }
  async function getTableListById(params: any) {
    let res = await getAllFileListById({ ...params });
    const content = res.content;
    let contentArr = JSON.parse(content);
    total.value = contentArr.length;
    qfqCount.value = contentArr.filter((item: any) => item.internalFireWarnLevel === '潜伏期阶段').length;
    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;
    qfqPercent.value = (qfqCount.value / total.value) * 100;
    latentPercent.value = (latentCount.value / total.value) * 100;
    selfHeatingPercent.value = (selfHeatingCount.value / total.value) * 100;
    combustionPercent.value = (combustionCount.value / total.value) * 100;
    tableData.value = contentArr;
    nextTick(() => {
      updateChart(contentArr);
    });
  }
  //获取所有文件列表
  async function getAllFile() {
    let res = await getAllFileList({ type: 'bundle' });
    selectList.value = res.records.map((item: any) => ({
      id: item.id,
      fileName: item.fileName,
    }));
    jcddArr.value = res.records.map((item: any) => ({
      id: item.jcdd,
    }));
    if (selectList.value.length > 0) {
      formSearch.id = selectList.value[0].id;
      getSearch();
    }
  }
  // 处理文件点击事件
  function handleFileClick(item: any) {
    formSearch.id = item.id;
    formSearch.fileName = item.fileName;
    selectedFileId.value = item.id;
    getSearch();
  }
  //查询
  function getSearch() {
    // const selectedFile = selectList.value.find((item) => item.id === formSearch.id);
    const params = {
      id: formSearch.id,
      // fileName: selectedFile ? selectedFile.fileName : '',
    };
    getTableListById(params);
  }
  onMounted(() => {
    getTableList({ type: 'bundle' });
    getAllFile().then(() => {
      if (selectList.value.length > 0) {
        formSearch.id = selectList.value[0].id;
        selectedFileId.value = selectList.value[0].id;
        getSearch();
      }
    });
  });
</script>

<style lang="less" scoped>
  @import '/@/design/theme.less';

  .content-container {
    display: flex;
    width: 100%;
    height: 100%;
    padding-top: 54px;
  }

  .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: #1c4869;
  }

  .table-container {
    margin-top: 10px;
    width: 80%;
    box-sizing: border-box;
  }
  .data-container {
    margin-top: 40px;
    display: flex;
    width: 100%;
    height: 100%;
  }

  .bar-chart {
    flex: 3; /* 占据 3/4 的空间 */
    width: 100%;
    height: 400px;
  }

  .data-content {
    flex: 1; /* 占据 1/4 的空间 */
    height: 400px;
    display: flex;
    flex-direction: column; /* 垂直排列进度条 */
    // align-items: center; /* 水平居中 */
    margin: 10px;
    .title {
      font-size: 18px;
      font-weight: 600;
      color: #fff;
      margin-bottom: 20px;
    }
    .explain {
      color: var(--vent-table-action-link);
      margin-top: 18px;
    }
  }

  .dustMonitor {
    width: 100%;
    height: 100%;
    padding: 10px 10px 15px 10px;
    box-sizing: border-box;
    position: relative;
  }

  .yellow-progress .ant-progress-bg {
    background-color: yellow !important;
  }

  :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;
  }
  .blast-delta-container {
    margin: 50px;
    display: flex;
    justify-content: space-between;
  }
  .progress {
    width: 100%;
    height: 20px;
    margin-top: 10px;
  }
  .progress-label {
    margin-top: 20px;
    text-align: left;
    margin-bottom: 5px;
    color: #fff;
  }
  ::deep .progress-text {
    color: #fff !important; /* 自定义百分比文字颜色 */
  }
</style>