gasInjection-project/src/views/vent/monitorManager/windowMonitor/components/supplyAir.vue

<template>
  <a-modal
    v-model:visible="visible"
    width="1200px"
    height="500px"
    class="supplyAir-modal"
    title="风窗自主调控风量监测"
    @ok="handleOk"
    @cancel="handleOk"
  >
    <div class="modal-box">
      <div class="left-box"> </div>
      <div class="right-box">
        <BarAndLine
          class="echarts-line"
          xAxisPropType="readTime"
          height="400px"
          :dataSource="echartsData"
          :chartsColumns="chartsColumnList"
          :option="echatsOption"
        />
      </div>
    </div>
    <div class="setting-box">
      <div class="right-inputs">
        <div class="vent-flex-row">
          <div class="input-box"
            >风窗目标风量(m³/min)：<span>{{ props.targetVolume }}</span></div
          >
          <div class="input-box"
            >风窗实时供风量(m³/min)：<span>{{ monitorData['fWindowM3'] }}</span></div
          >
        </div>
      </div>
    </div>
  </a-modal>
</template>

<script lang="ts" setup>
  import { ref, nextTick, onMounted, watch, computed, reactive } from 'vue';
  import BarAndLine from '/@/components/chart/BarAndLine.vue';
  import { useGlobSetting } from '/@/hooks/setting';
  const props = defineProps({
    modalIsShow: {
      type: Boolean,
      default: false,
    },
    modalType: {
      type: String,
    },
    data: {
      type: Object,
      default: () => {},
    },
    targetVolume: {
      type: Number,
    },
  });
  const emit = defineEmits(['handleOk', 'handleCancel']);
  const visible = computed(() => props.modalIsShow);
  const { sysOrgCode } = useGlobSetting();
  // const sysOrgCode = 'sdmtjtswmk';
  const echartsData = ref<{ targetVolume: string | Number; readTime: string; fWindowM3: string | Number; rearm3?: string | Number }[]>([]);
  const monitorData = ref({});
  const echatsOption = {
    legend: {
      top: 10,
    },
    grid: {
      top: '80',
      left: '30',
      right: '35',
      bottom: '10',
      containLabel: true,
    },
    toolbox: {
      feature: {
        saveAsImage: {
          show: false,
        },
      },
    },
    xAxis: {
      type: 'category',
      axisLabel: {
        margin: 10,
        color: '#f1f1f199',
      },
      name: '',
    },
    yAxis: {
      axisLabel: {
        color: '#0071A5',
      },
    },
  };

  const chartsColumnListTemp = [
    {
      legend: '目标风量',
      seriesName: '(m³/min)',
      ymax: 1100,
      yname: 'm³/min',
      linetype: 'line',
      yaxispos: 'left',
      color: '#00FFA8',
      sort: 1,
      xRotate: 0,
      dataIndex: 'targetVolume',
    },
    {
      legend: sysOrgCode == 'sdmtjtswmk' ? '窗1实时供风量' : '前窗实时供风量',
      seriesName: '(m³/min)',
      ymax: 1100,
      yname: 'm³/min',
      linetype: 'line',
      yaxispos: 'left',
      color: '#FDB146',
      sort: 1,
      xRotate: 0,
      dataIndex: 'fWindowM3',
    },
    {
      legend: sysOrgCode == 'sdmtjtswmk' ? '窗2实时供风量' : '后窗实时供风量',
      seriesName: '(m³/min)',
      ymax: 1100,
      yname: 'm³/min',
      linetype: 'line',
      yaxispos: 'left',
      color: '#AD19FE',
      sort: 1,
      xRotate: 0,
      dataIndex: 'rearm3',
    },
  ];
  const chartsColumnList = ref(chartsColumnListTemp);
  watch(
    () => props.data,
    (newVal) => {
      if (!visible.value) return;
      if (newVal['nwindownum'] == 1) {
        if (chartsColumnList.value.length != 2) chartsColumnList.value = [chartsColumnListTemp[0], chartsColumnListTemp[1]];
      } else {
        if (chartsColumnList.value.length != 3) chartsColumnList.value = [chartsColumnListTemp[0], chartsColumnListTemp[1], chartsColumnListTemp[2]];
      }
      monitorData.value = newVal;
      if (echartsData.value.length > 20) {
        echartsData.value.shift();
      }
      echartsData.value = [
        ...echartsData.value,
        { fWindowM3: newVal['fWindowM3'], targetVolume: props.targetVolume, readTime: newVal['readTime'].substring(11), rearm3: newVal['rearm3'] },
      ];
    }
  );

  function handleOk() {
    emit('handleCancel');
    echartsData.value = [];
  }
  onMounted(() => {});
</script>

<style scoped lang="less">
  .modal-box {
    display: flex;
    flex-direction: row;
    background-color: #ffffff05;
    padding: 10px 8px 0 8px;
    border: 1px solid #00d8ff22;
    position: relative;
    // min-height: 600px;
    .left-box {
      flex: 1; /* 占据 3/4 的空间 */
      background-image: url(../../../../../assets/images/window-targetm3.png);
      background-repeat: no-repeat;
      background-size: contain; /* 确保背景图片完整显示 */
      background-position: center; /* 确保背景图片居中 */
    }
    .right-box {
      flex: 1; /* 占据 3/4 的空间 */
      height: 400px;
      width: 100%;
    }
  }
  .setting-box {
    width: 1570px;
    height: 70px;
    margin: 10px 0;
    background-color: #ffffff05;
    border: 1px solid #00d8ff22;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .right-inputs {
      width: 100%;
      display: flex;
      height: 40px;
      margin: 0 10px;
      justify-content: space-between;
    }
    .left-buttons {
      display: flex;
      height: 40px;

      .btn {
        margin: 0 10px;
      }
    }
    .border-clip {
      width: 1px;
      height: 25px;
      border-right: 1px solid #8b8b8b77;
    }

    .input-box {
      width: 350px;
      span {
        color: aqua;
        padding: 0 20px;
      }
    }
  }

  @keyframes open {
    0% {
      height: 0px;
    }
    100% {
      height: fit-content;
    }
  }

  @keyframes close {
    0% {
      height: fit-content;
    }
    100% {
      height: 0px;
    }
  }
  :deep(.zxm-divider-inner-text) {
    color: #cacaca88 !important;
  }
  :deep(.zxm-form-item) {
    margin-bottom: 10px;
  }
</style>