mky-vent-base/src/views/vent/home/colliery/components/main-monitor.vue

<template>
  <div class="mainMonitor">
    <div class="title-top" @click="getDetail">主通风机监测与控制系统</div>
    <div class="toggle-search">
      <i class="icon-search">
        <SvgIcon class="icon" size="14" name="toggle" />
      </i>
      <a-select
        v-model:value="searchValue"
        style="width: 180px; margin-right: 10px"
        :options="mainTypeList"
        aria-placeholder="请选择"
        @change="changeSelect"
      />
      <div class="status-yx">
        <div class="now-name">
          <i style="margin: 0px 5px 0px 5px">
            <SvgIcon class="icon" size="14" name="yxfj" />
          </i>
          <span style="color: #fff">运行风机</span>
        </div>

        <div class="now-status">{{ runStatus }}</div>
      </div>
    </div>
    <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>
  </div>
</template>

<script lang="ts" setup>
  import { ref, reactive, onMounted, nextTick, defineProps, watch } from 'vue';
  import { SvgIcon } from '/@/components/Icon';
  import * as echarts from 'echarts';
  import { useGlobSetting } from '/@/hooks/setting';
  const { sysOrgCode } = useGlobSetting();
  let props = defineProps({
    maindata: Array,
  });
  const emit = defineEmits(['goDetail']);
  let searchValue = ref('');
  let mainTypeList = reactive<any>([]); //下拉框
  let mainList = reactive<any[]>([]); //主风机列表
  let selectDataObj = ref({
    dataQ: 0,
    dataH: 0,
  });
  let maxM3 = ref(150); // 高家梁是150，其他400
  let maxMPa = ref(4000); //
  //风机启动状态
  let runStatus = ref('');
  //获取dom节点
  let main = ref<any>();
  //echart图表数据
  let echartData = reactive<any>({
    xdata: [],
    ydata: [],
    ydata1: [],
  });

  //跳转详情
  function getDetail() {
    emit('goDetail', 'fanMain');
  }
  //选项切换
  function changeSelect(val) {
    let objParam;
    let objParam1;
    searchValue.value = val;
    const selectData = mainList.find((item) => item['deviceID'] == val);
    if (selectData) {
      runStatus.value =
        selectData.readData.Fan1StartStatus && selectData.readData.Fan1StartStatus == '1'
          ? '1#风机'
          : selectData.readData.Fan2StartStatus && selectData.readData.Fan2StartStatus == '1'
          ? '2#风机'
          : '--';
      if (runStatus.value == '1#风机') {
        objParam = {
          dataQ: selectData.readData.Fan1m3 || 0,
          dataH: Math.abs(Number(selectData.readData.Fan1FanPre || 0)),
        };
      } else if (runStatus.value == '2#风机') {
        objParam = {
          dataQ: selectData.readData.Fan2m3 || 0,
          dataH: Math.abs(Number(selectData.readData.Fan2FanPre || 0)),
        };
      } else {
        objParam = {
          dataQ: 0,
          dataH: 0,
        };
      }

      //  objParam = {
      //     dataQ: selectData.readData.Fan1m3 || selectData.readData.Fan2m3 || selectData.readData.m3 || selectData.readData.Fanm3,
      //     dataH: Math.abs(Number(selectData.readData.Fan1FanPre || selectData.readData.Fan2FanPre || selectData.readData.DataPa || selectData.readData.FanNegative || 0)),
      //   }
      objParam1 = {
        dataha0: -0.056,
        dataha1: 3.6491,
        dataha2: 434.4,
        dataha3: 100,
        dataha4: -1000,
      };
      setChart(objParam, objParam1);
      getOption();
    }
  }

  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, ticket, callback) {
            // 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();
      };
    });
  }

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

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

    let q = Q1 - dataQ;
    let h = H1 - dataH;
    // 风压特性曲线1
    let data = [];
    // 风压特性曲线2
    let data2 = [];
    let datax = [];
    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++) {
      let x = i;
      let 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++) {
      let x = i;
      let 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]];
  }

  watch(
    () => props.maindata,
    (val) => {
      mainList = val;
      mainTypeList.length = 0;
      mainList.forEach((el) => {
        mainTypeList.push({
          label: el.strinstallpos,
          value: el.deviceID,
        });
      });

      if (searchValue.value) {
        changeSelect(searchValue.value);
      } else {
        searchValue.value = mainTypeList[0].value;
        changeSelect(searchValue.value);
      }
    },
    {
      deep: true,
    }
  );
  onMounted(() => {});
</script>

<style lang="less" scoped>
  @font-face {
    font-family: 'douyuFont';
    src: url('../../../../../assets/font/douyuFont.otf');
  }

  .mainMonitor {
    width: 100%;
    height: 100%;
    position: relative;

    .title-top {
      position: absolute;
      top: 9px;
      left: 46px;
      color: #fff;
      font-size: 16px;
      font-family: 'douyuFont';
      cursor: pointer;

      &:hover {
        color: #66ffff;
      }
    }

    .toggle-search {
      position: absolute;
      left: 9px;
      top: 37px;
      display: flex;

      .icon-search {
        position: absolute;
        top: 50%;
        left: 5px;
        transform: translate(0%, -50%);
      }

      .status-yx {
        height: 30px;
        width: 180px;
        background-color: rgba(8, 148, 255, 0.3);
        border: 1px solid #1d80da;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .now-status {
          margin-right: 5px;
          padding-top: 3px;
          font-family: 'douyuFont';
          color: #3df6ff;
        }
      }
    }

    .main-contents {
      position: relative;
      top: 66px;
      left: 0;
      height: calc(100% - 66px);
      width: 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%;
        overflow-x: hidden;
      }
    }
  }

  :deep .zxm-select-selector {
    width: 100%;
    height: 30px !important;
    padding: 0 11px 0px 25px !important;
    background-color: rgba(8, 148, 255, 0.3) !important;
    border: 1px solid #1d80da !important;
  }

  :deep .zxm-select-selection-item {
    color: #fff !important;
    line-height: 28px !important;
  }

  :deep .zxm-select-arrow {
    color: #fff !important;
  }
</style>