goaf-monitoring-system/src/views/monitor/sealedMonitor/components/HistoricalDetailsModal.vue

<template>
  <BasicModal
    v-bind="$attrs"
    title="密闭监测详情"
    width="1400px"
    :bodyStyle="{ padding: `0 20px 0 20px` }"
    :showOkBtn="false"
    cancelText="返回"
    @register="register"
    @close="okHandler"
    @ok="okHandler"
    @cancel="okHandler"
    style="top: 10px"
  >
    <!-- 基础信息栏（修改布局：每行4列，共两行） -->
    <div class="base-info">
      <div v-for="(item, index) in modalDetailsData.basicInfo" :key="index" class="info-item" :style="item.style">
        <span class="label">{{ item.label }}:</span>
        <component :is="contextRender(item)"></component>
      </div>
    </div>

    <a-tabs v-model:activeKey="activeKey" type="card" :destroyInactiveTabPane="true">
      <a-tab-pane key="1" tab="密闭墙内">
        <!-- 监测数据卡片 -->
        <div class="data-cards">
          <MiniBoard
            v-for="(item, index) in modalDetailsData.board"
            :key="index"
            type="J"
            :label="item.label"
            :value="dataRef[item.value] || '-'"
            layout="label-top"
          />
        </div>

        <!-- 图表区域 -->
        <div class="chart-area">
          <div v-if="modalDetailsData.blastDeltaConfig" class="chart-item">
            <div class="chart-title pl-20px">爆炸三角形</div>
            <div class="chart-placeholder">
              <BlastDelta class="chart-blast" :posMonitor="dataRef" :canvas-size="{ width: 196, height: 125 }" text-color="#000" />
            </div>
          </div>
          <div v-if="modalDetailsData.gasConcentrationConfig" class="chart-item">
            <div class="chart-title pl-20px">气体浓度曲线</div>
            <div class="chart-placeholder">
              <CustomChart
                :chart-data="{ chartData: dataArray }"
                :chart-config="modalDetailsData.gasConcentrationConfig"
                :chart-option="{
                  textStyle: {
                    color: '#000',
                  },
                  tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                      type: 'none',
                    },
                  },
                }"
                style="height: 100%; width: 100%"
              />
            </div>
          </div>
          <div v-if="modalDetailsData.pressureConfig" class="chart-item">
            <div class="chart-title pl-20px">内外压力及压差曲线</div>
            <div class="chart-placeholder">
              <CustomChart
                :chart-data="{ chartData: dataArray }"
                :chart-config="modalDetailsData.pressureConfig"
                :chart-option="{
                  textStyle: {
                    color: '#000',
                  },
                  tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                      type: 'none',
                    },
                  },
                }"
                style="height: 100%; width: 100%"
              />
            </div>
          </div>
        </div>
      </a-tab-pane>

      <a-tab-pane key="2" tab="密闭墙外">
        <!-- 监测数据卡片 -->
        <div class="data-cards">
          <MiniBoard
            v-for="(item, index) in modalDetailsData.boardOut"
            :key="index"
            type="J"
            :label="item.label"
            :value="dataRef[item.value] || '-'"
            layout="label-top"
          />
        </div>

        <!-- 图表区域 -->
        <div class="chart-area">
          <div v-if="modalDetailsData.blastDeltaOutConfig" class="chart-item">
            <div class="chart-title pl-20px">爆炸危险性判定</div>
            <div class="chart-placeholder">
              <BlastDelta class="chart-blast" :posMonitor="dataRef" :canvas-size="{ width: 196, height: 125 }" text-color="#000" />
            </div>
          </div>
          <div v-if="modalDetailsData.gasConcentrationOutConfig" class="chart-item">
            <div class="chart-title pl-20px">气体浓度曲线</div>
            <div class="chart-placeholder">
              <CustomChart
                :chart-data="{ chartData: dataArray }"
                :chart-config="modalDetailsData.gasConcentrationOutConfig"
                :chart-option="{
                  textStyle: {
                    color: '#000',
                  },
                  tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                      type: 'none',
                    },
                  },
                }"
                style="height: 100%; width: 100%"
              />
            </div>
          </div>
          <div v-if="modalDetailsData.pressureOutConfig" class="chart-item">
            <div class="chart-title pl-20px">内外压力及压差曲线</div>
            <div class="chart-placeholder">
              <CustomChart
                :chart-data="{ chartData: dataArray }"
                :chart-config="modalDetailsData.pressureOutConfig"
                :chart-option="{
                  textStyle: {
                    color: '#000',
                  },
                  tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                      type: 'none',
                    },
                  },
                }"
                style="height: 100%; width: 100%"
              />
            </div>
          </div>
        </div>
      </a-tab-pane>
    </a-tabs>
  </BasicModal>
</template>
<script lang="ts">
  import { defineComponent } from 'vue';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { ref } from 'vue';
  import MiniBoard from '/@/components/Configurable/detail/MiniBoard.vue';
  import BlastDelta from '/@/components/Configurable/preset/BlastDelta.vue';
  import CustomChart from '/@/components/Configurable/detail/CustomChart.vue';
  import { get, isFunction } from 'lodash-es';
  import { h } from 'vue';
  import { getGoafHistory } from '../monitor.api';
  // import { useIntervalFn } from '@vueuse/core';
  import dayjs from 'dayjs';
  import { propTypes } from '/@/utils/propTypes';
  import { message } from 'ant-design-vue';

  export default defineComponent({
    components: { BasicModal, MiniBoard, BlastDelta, CustomChart },
    props: {
      identifyField: propTypes.string.def('goafId'),
      modalDetailsData: propTypes.any,
    },
    emits: ['close', 'register'],
    setup(props, { emit }) {
      const dataRef = ref<any>({});
      const dataArray = ref<any[]>([]);
      const activeKey = ref('1');

      // 添加元素，数组最多15项，按队列排布
      // const push = (item) => {
      //   item.readTime = dayjs().format('YYYY-MM-DD HH:mm:ss');
      //   dataArray.value = takeRight(concat(dataArray.value, item), 15);
      // };

      const [register] = useModalInner((d) => {
        if (!d) return;
        // 没数据或者新传入的数据id不同，说明是首次/点击别的数据列进入的该组件
        // if (!dataRef.value || d[props.identifyField] !== dataRef.value[props.identifyField]) {
        //   dataArray.value = [];
        // }
        dataRef.value = d;
        getGoafHistory({
          goafId: dataRef.value.goafId,
          startTime: dayjs().add(-3, 'day').format('YYYY-MM-DD 00:00:00'),
          endTime: dayjs().format('YYYY-MM-DD HH:mm:ss'),
          pageSize: 100,
          sort: 'asc',
        }).then((r) => {
          if (r && r.records) {
            dataArray.value = r.records;
          } else {
            message.info('暂无历史数据');
            dataArray.value = [];
          }
        });
        // push(d);
        // resume();
      });

      function contextRender({ value, customRender }: any) {
        if (isFunction(customRender)) return customRender({ record: dataRef.value });
        return h('span', get(dataRef.value, value));
      }

      // function fetchDetailData() {
      //   const { deptId, goafId } = dataRef.value;
      //   getGoafData({ deptId, goafId }).then(({ records }) => {
      //     dataRef.value = {
      //       ...dataRef.value,
      //       ...last(records),
      //     };
      //     push(dataRef.value);
      //   });
      // }

      // const { pause, resume } = useIntervalFn(
      //   () => {
      //     fetchDetailData();
      //   },
      //   1000,
      //   {
      //     immediate: false,
      //   }
      // );

      function okHandler() {
        // pause();
        emit('close');
      }

      return {
        dataRef,
        dataArray,
        get,
        register,
        contextRender,
        okHandler,
        activeKey,
      };
    },
  });
</script>
<style lang="less" scoped>
  .base-info {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 强制每行4列 */
    grid-template-rows: auto auto; /* 两行自动高度 */
    gap: 12px 12px; /* 行列间距（行间距16px，列间距12px） */
    margin-bottom: 20px;
    padding: 20px 10px;
    // border: 1px solid @border-color-base;
    border-radius: 10px;
    background: #ecf4fd;
  }
  .info-item {
    display: flex;
    align-items: center;
    /* 适配文字过长的情况 */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    background-image: linear-gradient(to right, #d7eafe, transparent);
    padding: 5px 10px;
    border-radius: 5px;
  }
  .label {
    color: #666;
    margin-right: 8px;
    // min-width: 90px;
    flex-shrink: 0; /* 标签宽度不收缩 */
  }
  .value {
    color: #333;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .data-cards {
    display: flex;
    // grid-template-columns: repeat(8, 1fr);
    // gap: 16px;
    justify-content: space-evenly;
    margin-bottom: 20px;
    padding: 20px;
    // border: 1px solid @border-color-base;
    border-radius: 10px;
    // background: @card-bg-color;
    background: #ecf4fd;
  }
  .data-card {
    background: #fafafa;
    border-radius: 8px;
    padding: 12px;
    text-align: center;
  }
  .card-value {
    font-size: 20px;
    font-weight: bold;
    color: #1890ff;
    margin-bottom: 4px;
  }
  .card-label {
    font-size: 14px;
    color: #666;
  }

  .chart-area {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    padding: 20px;
    // border: 1px solid @border-color-base;
    border-radius: 10px;
    justify-content: space-evenly;
    /* background: black; */
    // background: @card-bg-color;
    background: #ecf4fd;
    --image-title-2: url(/@/assets/images/sealedGoaf/module/module-title-2.png);
    // --image-bg: linear-gradient();
  }
  .chart-item {
    flex: 1;
    // flex-basis: 6;
    // flex-shrink: 1;
    // min-width: 200px;
    width: 300px;
    &:first-child {
      // flex-basis: 380px;
      flex: 0 0 380px;
      // flex-shrink: 0;
      // flex-grow: 1;
    }
  }
  .chart-title {
    font-size: 14px;
    font-weight: 500;
    // margin-bottom: 8px;
    font-weight: bold;
    color: @text-color-call-out;
    background-image: var(--image-title-2);
    background-size: 100% 100%;
    height: 32px;
    line-height: 32px;
  }
  .chart-placeholder {
    width: 100%;
    height: 200px;
    border-radius: 4px;
    overflow: hidden;
    background-image: @gradient-thirdary-color;

    .chart-blast {
      height: 170px;
      margin-top: 20px;
    }
  }
  .chart-placeholder img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
</style>