mky-vent-base/src/views/vent/home/configurable/components/preset/QHCurve.vue

<template>
  <div class="main-contents">
    <!-- <div class="point-des-box">
      <div>工况点</div>
      <div>负压(Pa): {{ selectDataObj.dataH }}</div>
      <div>风量(m³/min): {{ (selectDataObj.dataQ * 60).toFixed(2) }}</div>
    </div> -->
    <div class="main" ref="main"></div>
  </div>
</template>

<script lang="ts" setup>
  import { ref, reactive, nextTick, defineProps, watch } from 'vue';
  import * as echarts from 'echarts';
  import { get } from 'lodash-es';
  //   import { useGlobSetting } from '/@/hooks/setting';
  //   const { sysOrgCode } = useGlobSetting();

  const props = defineProps<{ mainfan: Record<string, any>; /** QH */ fan1Prop: [string, string]; fan2Prop: [string, string] }>();
  const selectDataObj = ref({
    dataQ: 0,
    dataH: 0,
  });
  //echart图表数据
  const echartData = reactive<any>({
    xdata: [],
    ydata: [],
    ydata1: [],
  });
  const maxM3 = ref(150); // 高家梁是150，其他400
  const maxMPa = ref(4000);
  const main = ref();

  function changeSelect(selectData) {
    let objParam;
    if (!selectData) return;
    if (!selectData.readData) return;
    const fan2Active = selectData.readData.Fan2StartStatus && selectData.readData.Fan2StartStatus == '1';
    if (fan2Active) {
      objParam = {
        dataQ: get(selectData, props.fan2Prop[0], 0),
        dataH: Math.abs(Number(get(selectData, props.fan2Prop[1], 0))),
      };
    } else {
      objParam = {
        dataQ: get(selectData, props.fan1Prop[0], 0),
        dataH: Math.abs(Number(get(selectData, props.fan1Prop[1], 0))),
      };
    }

    setChart(objParam, {
      dataha0: -0.056,
      dataha1: 3.6491,
      dataha2: 434.4,
      dataha3: 100,
      dataha4: -1000,
    });
    getOption();
  }

  // 设置曲线数据
  function setChart(param, character) {
    const dataQ = 300;
    const dataH = character.dataha0 * dataQ * dataQ + character.dataha1 * dataQ + character.dataha2;
    const Q1 = Math.round((parseFloat(param.dataQ) / 60) * 100) / 100;
    const H1 = parseFloat(param.dataH);

    selectDataObj.value.dataH = H1;
    selectDataObj.value.dataQ = Q1;

    const q = Q1 - dataQ;
    const h = H1 - dataH;
    // 风压特性曲线1
    const data: [number, number][] = [];
    // 风压特性曲线2
    const data2: [number, number][] = [];
    const datax: number[] = [];
    maxM3.value = Q1 < 100 ? 150 : Q1 < 200 ? 250 : Q1 < 300 ? 400 : Q1 < 400 ? 500 : Q1 < 600 ? 800 : 1000;
    maxMPa.value = H1 < 2000 ? 4000 : H1 < 2500 ? 5000 : 6000;

    for (let i = 30; i <= maxM3.value; i++) {
      const x = i;
      const y4 = character.dataha0 * (x - q) * (x - q) + character.dataha1 * (x - q) + character.dataha2 + h;
      data2.push([x, y4]);
    }
    for (let i = 0; i <= maxM3.value; i++) {
      const x = i;
      const y = (H1 / Q1 / Q1) * x * x;
      data.push([x, y]);
      datax.push(x * 60);
    }
    echartData.xdata = datax;
    echartData.ydata = data;
    echartData.ydata1 = data2;
    echartData.ydata2 = [[Q1, H1]];
  }

  function getOption() {
    nextTick(() => {
      const myChart = echarts.init(main.value);
      let option = {
        title: {
          textStyle: {
            color: '#3df6ff',
            fontSize: 14, // 字体颜色
          },
          text: '',
        },
        grid: {
          top: '25%',
          left: '5%',
          right: '19%',
          bottom: '8%',
          containLabel: true,
        },
        legend: {
          // x:'right',
          top: '5%',
          textStyle: {
            color: '#ffffff',
            fontSize: 14, // 字体颜色
          },
          data: ['风量', '负压'],
        },
        tooltip: {
          backgroundColor: 'rgba(0,0,0,0.8)',
          textStyle: {
            color: '#3df6ff',
            fontSize: 14, // 字体颜色
          },
          formatter: function (params) {
            // var res = '风量' + ' : ' + Math.round(params.data[0] * 60 * 10) / 10 + '(m³/min)<br/>'
            // res = res + '&emsp;&emsp;&emsp;' + params.data[0] + '(m³/s)<br/>'
            var res = '风量' + ' : ' + params.data[0] * 60 + '(m³/min)<br/>';
            res = res + '&emsp;&emsp;&emsp;' + params.data[0].toFixed(2) + '(m³/s)<br/>';
            res = res + '负压' + ' : ' + params.data[1] + '(Pa)<br/>';
            return res;
          },
          trigger: 'item',
        },
        color: ['#00bb00', '#ffbb00', '#ff0000', '#0000ff'],
        xAxis: [
          {
            name: '风量\r\n(m³/min)\r\n',
            nameTextStyle: {
              color: '#3df6ff',
              fontSize: 12,
            },
            axisLine: {
              lineStyle: {
                color: '#0092d5',
                width: 1, // 这里是为了突出显示加上的
              },
            },
            splitLine: {
              show: false, // 网格线
              lineStyle: {
                color: '#006c9d',
                type: 'dashed', // 设置网格线类型 dotted：虚线   solid:实线
              },
            },
            axisLabel: {
              show: true,
              position: 'bottom',
              textStyle: {
                color: '#b3b8cc',
                fontSize: 14,
              },
              formatter: function (value) {
                return value * 60 + '';
              },
            },
            type: 'value',
            min: 0,
            max: maxM3.value, // 高家梁最大9000,
          },
          {
            name: '',
            nameTextStyle: {
              color: '#3df6ff',
              fontSize: 12,
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: '#0092d5',
                width: 1, // 这里是为了突出显示加上的
              },
            },
            splitLine: {
              show: false, // 网格线
              lineStyle: {
                color: '#006c9d',
                type: 'dashed', // 设置网格线类型 dotted：虚线   solid:实线
              },
            },
            axisLabel: {
              show: false,
              textStyle: {
                color: '#b3b8cc',
                fontSize: 14,
              },
            },
            type: 'value',
            min: 0,
            // max: 400,
            data: echartData.xdata,
          },
        ],
        yAxis: [
          {
            name: '负压(Pa)',
            splitNumber: 5,
            nameTextStyle: {
              color: '#3df6ff',
              fontSize: 12,
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#0092d5',
                width: 1, // 这里是为了突出显示加上的
              },
            },
            splitLine: {
              show: true, // 网格线
              lineStyle: {
                color: '#006c9d',
                type: 'dashed', // 设置网格线类型 dotted：虚线   solid:实线
              },
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: '#b3b8cc',
                fontSize: 14,
              },
            },
            type: 'value',
            min: 0,
            max: maxMPa.value,
          },
        ],
        series: [
          {
            type: 'effectScatter',
            symbolSize: 5,
            // symbolOffset:[1, 1],
            showEffectOn: 'render',
            // 涟漪特效相关配置。
            rippleEffect: {
              // 波纹的绘制方式，可选 'stroke' 和 'fill'。
              brushType: 'stroke',
            },
            zlevel: 1,
            z: 999,
            itemStyle: {
              color: '#ff0000',
            },
            data: echartData.ydata2,
          },
          {
            name: '风量',
            yAxisIndex: 0,
            xAxisIndex: 1,
            type: 'line',
            smooth: true,
            animationDuration: 1000,
            showSymbol: false,
            data: echartData.ydata,
          },
          {
            name: '负压',
            yAxisIndex: 0,
            xAxisIndex: 1,
            type: 'line',
            smooth: true,
            animationDuration: 1000,
            showSymbol: false,

            data: echartData.ydata1,
          },
        ],
      };
      myChart.setOption(option);
      window.onresize = function () {
        myChart.resize();
      };
    });
  }

  watch(
    () => props.mainfan,
    (val) => {
      changeSelect(val);
    },
    {
      deep: true,
    }
  );
</script>

<style lang="less" scoped>
  .main-contents {
    position: relative;
    width: 100%;
    height: 100%;

    // .point-des-box {
    //   position: absolute;
    //   background: #0d0d0dbd;
    //   padding: 5px 8px;
    //   border-radius: 10px;
    //   border: 1px solid #ffffff;
    //   z-index: 999;
    //   color: #fff;
    //   right: 20px;
    //   top: 10px;
    // }

    .main {
      width: 100%;
      height: 100%;
    }
  }
</style>