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

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

    <!-- 监测数据卡片 -->
    <div class="data-cards">
      <MiniBoard
        v-for="(item, index) in modalDetailsData.board"
        :key="index"
        type="D"
        :label="item.label"
        :value="dataRef[item.value] || '-'"
        layout="val-top"
      />
    </div>

    <!-- 图表区域 -->
    <div class="chart-area">
      <div class="chart-item">
        <div class="chart-title pl-20px">爆炸三角形</div>
        <div class="chart-placeholder">
          <BlastDelta
            :posMonitor="dataRef"
            :canvas-size="{ width: 225, height: 149 }"
            :legendStyle="{ left: '50%', top: '10px' }"
            text-color="#000"
          />
        </div>
      </div>
      <div 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',
              },
            }"
            style="height: 100%; width: 100%"
          />
        </div>
      </div>
      <div 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',
              },
            }"
            style="height: 100%; width: 100%"
          />
        </div>
      </div>
    </div>
  </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 { modalDetailsData } from '../monitor.data';
  import { concat, get, isFunction, last, takeRight } from 'lodash-es';
  import { h } from 'vue';
  import { getGoafData } from '../monitor.api';
  import { useIntervalFn } from '@vueuse/core';
  import dayjs from 'dayjs';
  import { propTypes } from '/@/utils/propTypes';

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

      // 添加元素，数组最多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;
        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 = last(records);
          push(dataRef.value);
        });
      }

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

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

      return {
        dataRef,
        modalDetailsData,
        dataArray,
        get,
        register,
        contextRender,
        okHandler,
      };
    },
  });
</script>
<style lang="less" scoped>
  .base-info {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 强制每行4列 */
    grid-template-rows: auto auto; /* 两行自动高度 */
    gap: 16px 12px; /* 行列间距（行间距16px，列间距12px） */
    margin-bottom: 20px;
    padding: 20px;
    border: 1px solid @border-color-base;
    border-radius: 10px;
    background: @card-bg-color;
  }
  .info-item {
    display: flex;
    align-items: center;
    /* 适配文字过长的情况 */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .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;
  }
  .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;
    /* background: black; */
    background: @card-bg-color;
  }
  .chart-item {
    flex: 1;
    // flex-basis: 6;
    // flex-shrink: 1;
    // min-width: 200px;
    &: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;
  }
  .chart-placeholder {
    width: 100%;
    height: 200px;
    border-radius: 4px;
    overflow: hidden;
  }
  .chart-placeholder img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
</style>