gasInjection-project/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>
      </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';
const props = defineProps({
  data: {
    type: Object,
    default: () => {},
  },
  gasMax: {
    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];
    console.log('echarts data:', echartsData.value);
  }
);
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();
}
</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>