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

<template>
  <div class="fanMonitor">
    <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="fanTypeList"
        aria-placeholder="请选择"
        @change="changeSelect"
      />
      <div class="status-yx">
        <template v-if="fjStatus !== '断开' && fjStatus !== '-'">
          <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">{{ fjStatus }}</div>
        </template>
        <template v-else>
          <div v-if="fjStatus == '断开'" class="now-status" style="margin-left: 25px">断开</div>
        </template>
      </div>
    </div>
    <div class="fan-contents">
      <div v-if="!isShowGif" class="fan" ref="fan"></div>
      <img v-else src="@/assets/images/gif/fanlocal.gif" style="height: 100%; width: 100%" />
    </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 { useGo } from '/@/hooks/web/usePage';
  import { useGlobSetting } from '/@/hooks/setting';
  let props = defineProps({
    fandata: Array,
  });
  const emit = defineEmits(['goDetail']);
  const go = useGo();
  const { sysOrgCode } = useGlobSetting();
  let searchValue = ref('');
  let fanList = reactive<any[]>([]);
  let fanTypeList = reactive<any[]>([]); //下拉列表
  let fjStatus = ref(''); //运行风机
  const isShowGif = ref(false);
  //获取dom节点
  let fan = ref<any>();
  //echart图表数据
  let echartData = reactive<any>({
    xdata: 0,
    ydata: 0,
  });
  //跳转详情
  function getDetail() {
    emit('goDetail', 'fanLocal');
  }
  //选项切换
  function changeSelect(val) {
    searchValue.value = val;
    const selectData = fanList.find((item) => item['deviceID'] == val);
    if (selectData) {
      fjStatus.value =
        selectData.readData.Fan1StartStatus && selectData.readData.Fan1StartStatus == '1'
          ? sysOrgCode !== 'ymdnymdn'
            ? '主机'
            : '1#风机'
          : selectData.readData.Fan2StartStatus && selectData.readData.Fan2StartStatus == '1'
          ? sysOrgCode !== 'ymdnymdn'
            ? '备机'
            : '2#风机'
          : selectData.readData.Fan1StartStatus &&
            selectData.readData.Fan1StartStatus == '0' &&
            selectData.readData.Fan2StartStatus &&
            selectData.readData.Fan2StartStatus == '0'
          ? '断开'
          : '-';
      echartData.xdata = selectData.readData.windQuantity1 || selectData.readData.windQuantity1_merge;
      echartData.ydata = selectData.readData.windQuantity2 || selectData.readData.windQuantity2_merge;
      if (echartData.xdata && echartData.ydata) {
        getOption();
      } else {
        isShowGif.value = true;
      }
    } else {
      isShowGif.value = true;
    }
  }
  function getOption() {
    nextTick(() => {
      const myChart = echarts.init(fan.value);
      let option = {
        grid: {
          top: '20%',
          left: '7%',
          bottom: '14%',
          right: '7%',
          containLabel: true,
        },
        xAxis: [
          {
            type: 'category',
            data: ['吸风量', '供风量'],
            axisTick: {
              alignWithLabel: true,
            },
            nameTextStyle: {
              color: 'red',
            },
            axisLine: {
              //坐标轴轴线相关设置。数学上的x轴
              show: true,
              lineStyle: {
                color: 'rgba(62, 103, 164)',
              },
            },
            axisLabel: {
              //坐标轴刻度标签的相关设置
              textStyle: {
                color: '#b3b8cc',
                padding: 10,
                fontSize: 14,
              },
              formatter: function (data) {
                return data;
              },
            },
          },
        ],
        yAxis: [
          {
            type: 'value',
            min: 0,
            name: '(m³/min)',
            nameTextStyle: {
              color: '#b3b8cc',
              fontSize: 12,
              padding: 0,
            },
            splitLine: {
              show: false,
              lineStyle: {
                color: 'rgba(62, 103, 164,.4)',
              },
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: 'rgba(62, 103, 164)',
              },
            },

            axisLabel: {
              show: true,
              textStyle: {
                color: '#b3b8cc',
                padding: 0,
                fontSize: 14,
              },
              formatter: function (value) {
                if (value === 0) {
                  return value;
                }
                return value;
              },
            },
            axisTick: {
              show: false,
            },
          },
        ],
        series: [
          {
            name: '',
            type: 'pictorialBar',
            symbolSize: [60, 16],
            symbolOffset: [0, -10],
            symbolPosition: 'end',
            z: 12,
            //"barWidth": "20",
            label: {
              normal: {
                show: true,
                position: 'top',
                formatter: '{c}',
                color: '#fff',
              },
            },
            data: [
              {
                value: echartData.xdata,
                itemStyle: {
                  color: '#59cb42',
                },
              },
              {
                value: echartData.ydata,
                itemStyle: {
                  color: '#3cefff',
                },
              },
            ],
          },
          {
            name: '',
            type: 'pictorialBar',
            symbolSize: [60, 16],
            symbolOffset: [0, 10],
            // "barWidth": "20",
            z: 12,
            data: [
              {
                value: 100,
                itemStyle: {
                  color: '#59cb42',
                },
              },
              {
                value: 100,
                itemStyle: {
                  color: '#3cefff',
                },
              },
            ],
          },
          {
            name: '',
            type: 'pictorialBar',
            symbolSize: [90, 30],
            symbolOffset: [0, 20],
            z: 10,
            itemStyle: {
              normal: {
                color: 'transparent',
                borderColor: '#14b1eb',
                borderType: 'dashed',
                borderWidth: 5,
              },
            },
            data: [100, 100],
          },
          {
            type: 'bar',
            itemStyle: {
              normal: {
                //color: '#14b1eb',
                opacity: 0.7,
              },
            },
            //silent: true,
            barWidth: '60',
            //barGap: '-100%', // Make series be overlap
            data: [
              {
                value: echartData.xdata,
                itemStyle: {
                  color: '#59cb42',
                },
              },
              {
                value: echartData.ydata,
                itemStyle: {
                  color: '#3cefff',
                },
              },
            ],
            markLine: {
              symbol: 'none',
              label: {
                position: 'middle',
                formatter: '{b}',
              },
              // data: [
              //   {
              //     name: '目标值',
              //     yAxis: 40, //res.targetTwo,
              //     lineStyle: {
              //       color: 'rgba(0, 119, 233,.8)',
              //     },
              //   },
              // ],
            },
          },
        ],
      };
      myChart.setOption(option);
      window.onresize = function () {
        myChart.resize();
      };
    });
  }

  watch(
    () => props.fandata,
    (val) => {
      console.log('000999', val);
      fanList = val[0];
      fanTypeList.length = 0;
      fanList.forEach((el) => {
        fanTypeList.push({
          label: el.strinstallpos,
          value: el.deviceID,
        });
      });
      if (searchValue.value) {
        changeSelect(searchValue.value);
      } else {
        searchValue.value = fanTypeList[0].value;
        changeSelect(searchValue.value);
      }
    },
    {
      deep: true,
    }
  );

  onMounted(() => {});
</script>

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

  .fanMonitor {
    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;
        }
      }
    }

    .fan-contents {
      position: absolute;
      top: 66px;
      left: 0;
      height: calc(100% - 66px);
      width: 100%;
      padding: 10px;

      .fan {
        width: 100%;
        height: 100%;
      }
    }
  }

  :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>