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>
      </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, computed } from 'vue';
import * as echarts from 'echarts';
const props = defineProps({
  data: {
    type: Object,
    default: () => {},
  },
});
const emit = defineEmits(['close', 'register', 'openModal']);
// 注册 modal
const [register, { closeModal }] = useModalInner((data) => {
  nextTick(() => {
    updateChart();
  });
});
const ChartRef = ref(null);
const categories = ref(['2025-01-01', '2025-01-02', '2025-01-03']);
const gasT1 = ref([0.1, 0.2, 0.1]);
const gasT2 = ref([0.2, 0.2, 0.1]);
function updateChart() {
  const myChart = echarts.init(ChartRef.value);
  const option = {
    title: {
      text: '',
      textStyle: {
        color: '#ffffff', // 设置标题颜色
      },
      left: 'center', // 水平居中
      top: '0', // 设置标题距离顶部的距离
    },
    legend: {
      top: '9%',
      textStyle: {
        color: '#ffffffff',
      },
      width: '80%', // 设置图例的宽度
      orient: 'horizontal', // 水平布局
      pageIconColor: '#ffffff', // 设置翻页图标颜色
      pageTextStyle: {
        color: '#ffffff', // 设置翻页文字颜色
      },
    },
    xAxis: {
      type: 'category',
      data: categories.value,
      splitLine: { show: true, lineStyle: { color: 'rgba(28, 72, 105, 0.5)' } },
      axisLabel: {
        interval: 0, // 显示所有标签
        color: '#ffffff', // 设置 x 轴字体颜色
      },
    },
    yAxis: [
      {
        type: 'value',
        name: '浓度',
        max: 1,
        splitLine: { show: true, lineStyle: { color: 'rgba(21,80,126,.5)' } },
        axisLabel: {
          color: '#ffffff',
        },
      },
    ],
    grid: {
      top: '21%', // 设置 grid 距离顶部的距离，增加间隔
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true,
    },
    series: [
      {
        name: '目标风量',
        data: gasT1.value,
        type: 'line',
        yAxisIndex: 1,
      },
      {
        name: '供风量',
        data: gasT2.value,
        type: 'line',
        yAxisIndex: 1,
      },
    ],
  };
  myChart.setOption(option);
  window.onresize = function () {
    myChart.resize();
  };
}
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>