mky-vent-base/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="chartsColumnList1"
          :option="echatsOption"
        />
      </div>
    </div>
    <div class="setting-box">
      <div class="right-inputs">
        <div class="vent-flex-row">
          <div class="input-title">出风口风量(m³/min)：</div>
          <!-- <InputNumber class="input-box" size="large" v-model:value="ductOutletAirVolume_merge" /> -->
          <div class="input-title">局扇供风量(m³/min)：</div>
          <!-- <InputNumber class="input-box" size="large" v-model:value="inletAirVolume_merge" /> -->
        </div>
      </div>
    </div>
  </BasicModal>
</template>

<script lang="ts" setup>
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { ref, nextTick, onMounted, watch } from 'vue';
  import { chartsColumnList1, echatsOption } from '../fanLocal.data';
  import BarAndLine from '/@/components/chart/BarAndLine.vue';
  const props = defineProps({
    data: {
      type: Object,
      default: () => {},
    },
    gasMax: {
      type: Number,
    },
  });
  const emit = defineEmits(['close', 'register', 'openModal']);
  // 注册 modal
  const [register, { closeModal }] = useModalInner((data) => {
    nextTick(() => {
      // updateChart();
    });
  });
  const echartsData = ref([]);
  const monitorData = ref({});
  watch(
    () => props.data,
    (newVal) => {
      monitorData.value = newVal;
      if (echartsData.value.length > 20) {
        echartsData.value.shift();
      }
      echartsData.value = [...echartsData.value, newVal];
      console.log(echartsData.value);
    }
  );
  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: 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>