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: 300 }" 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 } 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';
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,
  fileId: '',
  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({});
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 c2h2AveValues = data.map((item: any) => parseFloat(item.c2h2_ave));
  const c2h4MaxValues = data.map((item: any) => parseFloat(item.c2h4_max));
  const c2h4AveValues = data.map((item: any) => parseFloat(item.c2h4_ave));
  const ch4MaxValues = data.map((item: any) => parseFloat(item.ch4_max));
  const ch4AveValues = data.map((item: any) => parseFloat(item.ch4_ave));
  const co2MaxValues = data.map((item: any) => parseFloat(item.co2_max));
  const co2AveValues = data.map((item: any) => parseFloat(item.co2_ave));
  const coMaxValues = data.map((item: any) => parseFloat(item.co_max));
  const coAveValues = data.map((item: any) => parseFloat(item.co_ave));
  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 n2AveValues = data.map((item: any) => parseFloat(item.n2_ave));
  const no2MaxValues = data.map((item: any) => parseFloat(item.no2_max));
  const no2AveValues = data.map((item: any) => parseFloat(item.no2_ave));

  const option = {
    title: {
      text: '束管日报分析',
      textStyle: {
        color: '#ffffff', // 设置标题颜色
      },
      left: 'center', // 水平居中
      top: '0', // 设置标题距离顶部的距离
    },
    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: '8%',
      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',
      },
    },
    grid: {
      top: '21%', // 设置 grid 距离顶部的距离，增加间隔
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true,
    },
    series: [
      {
        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',
      },
    ],
  };
  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 = contentNewArr.value.filter((item: any) => item.internalFireWarnLevel === '潜伏期阶段').length;
  latentCount.value = contentNewArr.value.filter((item: any) => item.internalFireWarnLevel === '缓慢氧化升温阶段').length;
  selfHeatingCount.value = contentNewArr.value.filter((item: any) => item.internalFireWarnLevel === '加速氧化阶段').length;
  combustionCount.value = contentNewArr.value.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 = contentNewArr.value;
  nextTick(() => {
    updateChart(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 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%;
  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 {
  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>