mky-vent-base/src/views/vent/monitorManager/windowMonitor/components/gasSupplyAir.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" v-if="!isMock">
          <template v-if="monitorData['nwindownum'] == 1">
            <div class="input-box"
              >风窗实时开度(°)：<span>{{ monitorData['forntArea'] }}</span></div
            >
          </template>
          <template v-else>
            <div class="input-box"
              >前窗实时开度(°)：<span>{{ monitorData['forntArea'] }}</span></div
            >
            <div class="input-box"
              >后窗实时开度(°)：<span>{{ monitorData['rearArea'] }}</span></div
            >
          </template>
          <div class="input-box"
            >风窗实时瓦斯含量(%)：<span>{{ monitorData['gas'] }}</span></div
          >
        </div>
        <div class="vent-flex-row" v-else>
          <template v-if="monitorData['nwindownum'] == 1">
            <div class="input-box"
              >风窗实时开度(°)：<span>{{ frontWindowAngle }}</span></div
            >
          </template>
          <template v-else>
            <div class="input-box"
              >前窗实时开度(°)：<span>{{ frontWindowAngle }}</span></div
            >
            <div class="input-box"
              >后窗实时开度(°)：<span>{{ rearWindowAngle }}</span></div
            >
          </template>
          <div class="input-box"
            >风窗实时瓦斯含量(%)：<span>{{ gasTemp ? gasTemp.toFixed(2) : gas?.toFixed(2) }}</span></div
          >
          <div class="input-box"
            >风窗实时风量(m³/min)：<span>{{ fWindowM3Temp ? fWindowM3Temp.toFixed(2) : fWindowM3?.toFixed(2) }}</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 { number } from 'vue-types';
  const props = defineProps({
    modalIsShow: {
      type: Boolean,
      default: false,
    },
    modalType: {
      type: String,
    },
    data: {
      type: Object,
      default: () => {},
    },
    gasVal: {
      type: Number,
    },
    isMock: {
      type: Boolean,
    },
  });
  const emit = defineEmits(['handleOk', 'handleCancel']);
  const visible = computed(() => props.modalIsShow);
  const changeEchart = computed(() => props.modalType);
  const echartsData = ref<
    {
      gasVal: string | number;
      gas: string | number;
      readTime: string;
      fWindowM3: string | number;
      forntArea: string | number;
      rearArea?: 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: '(%)',
      ymax: 1100,
      yname: '%',
      linetype: 'line',
      yaxispos: 'left',
      color: '#00FFA8',
      sort: 1,
      xRotate: 0,
      dataIndex: 'gasVal',
    },
    {
      legend: '瓦斯实时值',
      seriesName: '(%)',
      ymax: 1100,
      yname: '%',
      linetype: 'line',
      yaxispos: 'left',
      color: '#00FFA8',
      sort: 1,
      xRotate: 0,
      dataIndex: 'gas',
    },
    {
      legend: '风窗开度',
      seriesName: '(°)',
      ymax: 1100,
      yname: '°',
      linetype: 'line',
      yaxispos: 'right',
      color: '#FDB146',
      sort: 2,
      xRotate: 0,
      dataIndex: 'forntArea',
    },
    {
      legend: '前窗开度',
      seriesName: '(°)',
      ymax: 1100,
      yname: '°',
      linetype: 'line',
      yaxispos: 'right',
      color: '#FDB146',
      sort: 2,
      xRotate: 0,
      dataIndex: 'forntArea',
    },
    {
      legend: '后窗开度',
      seriesName: '(°)',
      ymax: 1100,
      yname: '°',
      linetype: 'line',
      yaxispos: 'right',
      color: '#FDB146',
      sort: 2,
      xRotate: 0,
      dataIndex: 'rearArea',
    },
  ];
  const chartsColumnList = ref(chartsColumnListTemp);
  let frontWindowAngle = ref<undefined | number>(undefined);
  let rearWindowAngle = ref<undefined | number>(undefined);
  let fWindowM3 = ref<undefined | number>(undefined);
  let gas = ref<undefined | number>(undefined);
  let fWindowM3Temp = ref<undefined | number>(undefined);
  let gasTemp = ref<undefined | number>(undefined);
  let index = 1;
  watch(
    () => props.data,
    (newVal) => {
      if (!visible.value) return;
      if (newVal['nwindownum'] == 1) {
        // 单道风窗
        if (chartsColumnList.value.length != 3) chartsColumnList.value = [chartsColumnListTemp[0], chartsColumnListTemp[1], chartsColumnListTemp[2]];
      } else {
        // 多道风窗
        if (chartsColumnList.value.length != 4)
          chartsColumnList.value = [chartsColumnListTemp[0], chartsColumnListTemp[1], chartsColumnListTemp[3], chartsColumnListTemp[4]];
      }
      monitorData.value = newVal;
      if (echartsData.value.length > 20) {
        echartsData.value.shift();
      }
      if (props.isMock) {
        // 这里开启风窗开度模拟
        if (newVal['nwindownum'] == 1 && frontWindowAngle.value === undefined) {
          frontWindowAngle.value = newVal['forntArea'];
        } else if (newVal['nwindownum'] == 2) {
          if (frontWindowAngle.value === undefined) frontWindowAngle.value = (newVal['forntArea'] / newVal['maxarea']) * 90;
          if (rearWindowAngle.value === undefined) rearWindowAngle.value = (newVal['rearArea'] / newVal['maxarea']) * 90;
        }
        if (fWindowM3.value === undefined) fWindowM3.value = newVal['fWindowM3'];
        // if (gas == undefined) gas = Number(newVal['gas']) > Number(props.gasVal) ? newVal['gas'] : props.gasVal + 0.2;
        if (gas.value == undefined) gas.value = props.gasVal + 0.2;
        // 开启模拟
        if (gas.value > props.gasVal - 0.3) {
          mock(newVal['maxarea']);
          echartsData.value = [
            ...echartsData.value,
            {
              gasVal: props.gasVal,
              gas: gas.value as number,
              readTime: newVal['readTime'].substring(11),
              forntArea: frontWindowAngle.value as number,
              rearArea: rearWindowAngle.value as number,
              fWindowM3: fWindowM3.value as number,
            },
          ];
        } else {
          const random = Math.random() - 0.5;
          fWindowM3Temp.value = fWindowM3.value + random * 50;
          gasTemp.value = gas.value + random * 0.01;
          echartsData.value = [
            ...echartsData.value,
            {
              gasVal: props.gasVal,
              gas: gasTemp.value,
              readTime: newVal['readTime'].substring(11),
              forntArea: frontWindowAngle.value as number,
              rearArea: rearWindowAngle.value as number,
              fWindowM3: fWindowM3Temp.value,
            },
          ];
        }
      } else {
        echartsData.value = [
          ...echartsData.value,
          {
            gasVal: props.gasVal,
            gas: newVal['gas'],
            readTime: newVal['readTime'].substring(11),
            forntArea: (newVal['forntArea'] / newVal['maxarea']) * 90,
            rearArea: (newVal['rearArea'] / newVal['maxarea']) * 90,
            fWindowM3: newVal['fWindowM3'],
          },
        ];
      }
    }
  );

  function mock(maxArea?: number) {
    debugger;
    if (maxArea) {
      // 每调用一次数据就增减一些
      // frontWindowAngle 增加一些
      if (frontWindowAngle.value !== undefined && frontWindowAngle.value <= 90) {
        frontWindowAngle.value = Math.min(frontWindowAngle.value + 3, 90);
      }
      if (rearWindowAngle.value !== undefined && rearWindowAngle.value <= 90) {
        rearWindowAngle.value = Math.min(rearWindowAngle.value + 3, 90);
      }
      if (fWindowM3.value !== undefined) {
        fWindowM3.value += 40 * index;
      }
      if (gas.value !== undefined) {
        gas.value -= 0.001 * index;
      }
      ++index;
    }
  }

  function handleOk() {
    emit('handleCancel');
    echartsData.value = [];
    frontWindowAngle.value = undefined;
    rearWindowAngle.value = undefined;
    fWindowM3.value = undefined;
    gas.value = undefined;
    fWindowM3Temp.value = undefined;
    gasTemp.value = undefined;
  }
  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/supplyAir.svg);
      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: 300px;
      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>