mky-vent-base/src/views/vent/monitorManager/fanLocalMonitor/components/supplyAir.vue

<template>
  <BasicModal
    @register="register"
    title="按需供风联动"
    :maskStyle="{ backgroundColor: '#000000aa', backdropFilter: 'blur(3px)' }"
    width="1200px"
    v-bind="$attrs"
    @ok="onSubmit"
    @cancel="onCancel"
    :canFullscreen="false"
    :destroyOnClose="true"
    :footer="null"
    :maskClosable="false"
  >
    <div class="modal-box">
      <div class="left-box" style="width: 550px; height: 400px"> </div>
      <div class="right-box">
        <BarAndLine
          class="echarts-line"
          xAxisPropType="readTime"
          height="400px"
          :dataSource="echartsData"
          :chartsColumns="chartsColumnList1"
          :option="echatsOption1"
        />
      </div>
    </div>
    <div class="setting-box">
      <div class="right-inputs">
        <div class="vent-flex-row">
          <div class="input-title">出风口风量(m³/min)：</div>
          <span class="input-box" size="normal">{{ data.ductOutletAirVolume_merge }}</span>
          <div class="input-title">局扇供风量(m³/min)：</div>
          <span class="input-box" size="normal">{{ data.inletAirVolume_merge }}</span>
          <div class="input-title">目标风量(m³/min)：</div>
          <span class="input-box" size="normal">{{ props.targetVolume }}</span>
          <div class="btn btn1" @click="onHide">隐藏</div>
          <div class="btn btn1" @click="stop">紧急停止</div>
        </div>
      </div>
    </div>
  </BasicModal>
</template>

<script lang="ts" setup>
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { ref, onMounted, nextTick, watch } from 'vue';
  import echarts from '/@/utils/lib/echarts';
  import BarAndLine from '/@/components/chart/BarAndLine.vue';
  import { option, chartsColumnList1, echatsOption1 } from '../fanLocal.data';
  import { autoAdjust } from '../fanLocal.api';
  import { message } from 'ant-design-vue';
  const emit = defineEmits(['close', 'register', 'openModal']);
  const props = defineProps({
    data: {
      type: Object,
      default: () => {},
    },
    targetVolume: {
      type: Number,
    },
    fanlocalId: {
      type: String,
    },
  });
  // 注册 modal
  const [register, { closeModal }] = useModalInner((data) => {
    nextTick(() => {
      if (option['xAxis']) option['xAxis']['data'] = xData;
      option['series'] = yDataList;
      initEcharts();
    });
  });
  const ChartRef = ref();
  const myChart = ref();
  const refresh = ref(true);
  const xData: any[] = [];
  const yDataList: [] = [];
  // const echartsData = ref([]);
  // const monitorData = ref({});
  const echartsData = ref<Record<string, any>[]>([]);
  const monitorData = ref<Record<string, any>>({});
  watch(
    () => props.data,
    (newVal) => {
      // 创建新对象，合并 newVal 和 targetVolume
      const combinedData = {
        inletAirVolume_merge: newVal.inletAirVolume_merge,
        targetVolume: props.targetVolume, // 添加目标风量
        readTime: newVal.readTime || new Date().toISOString(), // 确保有时间字段
      };
      monitorData.value = combinedData;
      if (echartsData.value.length > 20) {
        echartsData.value.shift();
      }
      echartsData.value = [...echartsData.value, combinedData];
    }
  );
  function onSubmit() {
    emit('close');
    closeModal();
  }
  function onCancel() {
    //
  }
  function initEcharts() {
    if (ChartRef.value) {
      myChart.value = echarts.init(ChartRef.value);
      option && myChart.value.setOption(option);
      refresh.value = false;
      nextTick(() => {
        setTimeout(() => {
          refresh.value = true;
        }, 0);
      });
    }
  }
  function onHide() {
    closeModal();
  }
  function stop() {
    const params = { auto: 0, fanlocalId: props.fanlocalId };
    autoAdjust(params)
      .then(() => {
        message.success('指令已下发成功！');
      })
      .catch(() => {
        message.error('指令下发失败');
      });
  }
  onMounted(() => {
    // initEcharts();
  });
</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: 100%;
    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-title {
      max-width: 150px;
    }
    .input-box {
      width: 120px !important;
      background: transparent !important;
      border-color: #00d8ff44 !important;
      margin-right: 20px;
      color: #fff !important;
    }
    .btn {
      padding: 8px 20px;
      margin: 10px;
      position: relative;
      border-radius: 2px;
      color: #fff;
      width: fit-content;
      cursor: pointer;

      &::before {
        position: absolute;
        display: block;
        content: '';
        width: calc(100% - 4px);
        height: calc(100% - 4px);
        top: 2px;
        left: 2px;
        border-radius: 2px;
        z-index: -1;
      }
    }

    .btn1 {
      border: 1px solid #5cfaff;

      &::before {
        background-image: linear-gradient(#2effee92, #0cb1d592);
      }

      &:hover {
        border: 1px solid #5cfaffaa;

        &::before {
          background-image: linear-gradient(#2effee72, #0cb1d572);
        }
      }
    }
  }

  @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>