gas-injection/src/views/vent/monitorManager/fanLocalMonitor/components/dischargeGas.vue

<template>
  <BasicModal
    @register="register"
    title="智能排放瓦斯"
    :maskStyle="{ backgroundColor: '#000000aa', backdropFilter: 'blur(3px)' }"
    width="1600px"
    style="height: 60%"
    v-bind="$attrs"
    @ok="onSubmit"
    :canFullscreen="false"
    :destroyOnClose="true"
    :footer="null"
    :maskClosable="false"
  >
    <div class="modal-box">
      <div class="left-box" style="width: 900px; height: 400px"> </div>
      <div class="right-box">
        <!-- <div ref="ChartRef" class="line-chart" style="height: 400px; width: 100%"></div> -->
        <BarAndLine
          class="echarts-line"
          xAxisPropType="readTime"
          height="400px"
          :dataSource="echartsData"
          :chartsColumns="chartsColumnListGas"
          :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="large">{{ data.ductOutletAirVolume_merge }}</span>
          <div class="input-title">局扇供风量(m³/min)：</div>
          <span class="input-box" size="large">{{ data.inletAirVolume_merge }}</span>
          <div class="input-title">瓦斯超限浓度(%)：</div>
          <span class="input-box" size="large">{{ props.gasMax }}</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, nextTick, onMounted, watch } from 'vue';
  import { option, chartsColumnListGas, echatsOption1 } from '../fanLocal.data';
  import BarAndLine from '/@/components/chart/BarAndLine.vue';
  import { autoAdjust } from '../fanLocal.api';
  import { message } from 'ant-design-vue';
  const props = defineProps({
    data: {
      type: Object,
      default: () => {},
    },
    gasMax: {
      type: Number,
    },
    fanlocalId: {
      type: Number,
    },
  });
  const emit = defineEmits(['close', 'register', 'openModal']);
  // 注册 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<Record<string, any>[]>([]);
  const monitorData = ref<Record<string, any>>({});
  watch(
    () => props.data,
    (newVal) => {
      // 创建新对象，合并 newVal 和 targetVolume
      const combinedData = {
        gasT1: newVal.gasT1,
        gasT2: newVal.gasT2,
        gasT3: newVal.gasT3,
        gasT4: newVal.gasT4,
        readTime: newVal.readTime || new Date().toISOString(), // 确保有时间字段
      };
      monitorData.value = combinedData;
      if (echartsData.value.length > 20) {
        echartsData.value.shift();
      }
      echartsData.value = [...echartsData.value, combinedData];
    }
  );
  function initEcharts() {
    if (ChartRef.value) {
      myChart.value = echarts.init(ChartRef.value);
      option && myChart.value.setOption(option);
      refresh.value = false;
      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<Record<string, any>[]>([]);
    const monitorData = ref<Record<string, any>>({});
    watch(
      () => props.data,
      (newVal) => {
        // 创建新对象，合并 newVal 和 targetVolume
        const combinedData = {
          gasT1: newVal.gasT1,
          gasT2: newVal.gasT2,
          gasT3: newVal.gasT3,
          gasT4: newVal.gasT4,
          readTime: newVal.readTime || new Date().toISOString(), // 确保有时间字段
        };
        monitorData.value = combinedData;
        if (echartsData.value.length > 20) {
          echartsData.value.shift();
        }
        echartsData.value = [...echartsData.value, combinedData];
      }
    );
    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);
        });
      }
    }
    onMounted(() => {});
    function onSubmit() {
      emit('close');
      closeModal();
    }
  }
  function onHide() {
    closeModal();
  }
  function stop() {
    const params = { auto: 0, fanlocalId: props.fanlocalId };
    autoAdjust(params)
      .then(() => {
        message.success('指令已下发成功！');
      })
      .catch(() => {
        message.error('指令下发失败');
      });
  }
  onMounted(() => {});
  function onSubmit() {
    emit('close');
    closeModal();
  }
</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/dischargeGas.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;
      position: relative;
      margin: 10px;
      border-radius: 2px;
      color: #fff;
      width: fit-content;
      cursor: pointer;
      float: right;
      &::before {
        position: absolute;
        display: block;
        content: '';
        width: calc(100% - 4px);
        height: calc(100% - 4px);
        top: 2px;
        left: 2px;
        border-radius: 2px;
        z-index: -1;
      }
    }
    .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-title {
        max-width: 150px;
      }
      .input-box {
        width: 220px !important;
        background: transparent !important;
        border-color: #00d8ff44 !important;
        margin-right: 20px;
        color: #fff !important;
      }
      .btn {
        padding: 8px 20px;
        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>