gas-injection/src/views/vent/home/colliery/components/wind-line.vue

<template>
  <div class="windLine">
    <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="lineTypeList"
        aria-placeholder="请选择" @change="changeSelect" />
    </div>
    <div class="line-echart">
      <div class="line" ref="line"></div>
      <div class="pic">
        <img src="../../../../../assets/images/home-container/pie.png" alt="" />
      </div>
      <div class="percent">
        <div class="percent-box">
          <span>{{ percentF }}</span>
          <span class="dw">%</span>
        </div>
        <div class="percent-box">
          <span>{{ percentT }}</span>
          <span class="dw">%</span>
        </div>
        <div class="percent-box">
          <span>{{ percentE }}</span>
          <span class="dw">%</span>
        </div>
      </div>
    </div>
    <div class="line-card">
      <div class="card-item" v-for="(item, index) in tabList" :key="index">
        <div class="item-s">
          <div class="item-label">{{ item.name }}</div>
          <div class="item-val">{{ item.val }}</div>
        </div>
      </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';
const emit = defineEmits(['goDetail'])

let props = defineProps({
  lineList: Array,
});

//获取dom节点
let line = ref<any>();
let lineData = reactive<any[]>([]);
let searchValue = ref('');
const lineTypeList = reactive<any[]>([]);

let echartData = reactive<any[]>([
  { name: '进风区', value: 0 },
  { name: '用风区', value: 0 },
  { name: '回风区', value: 0 },
]);
let xData = reactive<any[]>([]);
let yData = reactive<any[]>([]);
let percentE = ref<any>(0);
let percentF = ref<any>(0);
let percentT = ref<any>(0);

let tabList = reactive<any[]>([
  { name: '总风量(m³/min)', val: 0 },
  { name: '总阻力(Pa)', val: 0 },
  { name: '等积孔(m²)', val: 0 },
]);
//跳转详情
function getDetail() {
  console.log('跳转详情');
  emit('goDetail', 'majorpath')
}
//选项切换
function changeSelect(val) {
  searchValue.value = val;
  switch (val) {
    case 'bet关键路线1':
      echartData[0].value = lineData[0].majorpath.drag_1 || 0;
      echartData[1].value = lineData[0].majorpath.drag_2 || 0;
      echartData[2].value = lineData[0].majorpath.drag_3 || 0;
      tabList[0].val = lineData[0].majorpath.drag_total || 0;
      tabList[1].val = lineData[0].majorpath.m3_total || 0;
      tabList[2].val = 0.78;
      percentF.value = ((echartData[0].value / (echartData[0].value + echartData[1].value + echartData[2].value)) * 100).toFixed(2) || 0;
      percentT.value = ((echartData[1].value / (echartData[0].value + echartData[1].value + echartData[2].value)) * 100).toFixed(2) || 0;
      percentE.value = ((echartData[2].value / (echartData[0].value + echartData[1].value + echartData[2].value)) * 100).toFixed(2) || 0;

      // echartData[0].value = Math.floor(Math.random() * (629 - 620 + 1)) + 620;
      // echartData[1].value = Math.floor(Math.random() * (949 - 940 + 1)) + 940;
      // echartData[2].value = Math.floor(Math.random() * (855 - 850 + 1)) + 850;
      // tabList[0].val = Math.floor(Math.random() * (10700 - 10600 + 1)) + 10600;
      // tabList[1].val = Math.floor(Math.random() * (2433 - 2423 + 1)) + 2423;
      // tabList[2].val = 0.56;
      // percentF.value = ((echartData[0].value / (echartData[0].value + echartData[1].value + echartData[2].value)) * 100).toFixed(2);
      // percentT.value = ((echartData[1].value / (echartData[0].value + echartData[1].value + echartData[2].value)) * 100).toFixed(2);
      // percentE.value = ((echartData[2].value / (echartData[0].value + echartData[1].value + echartData[2].value)) * 100).toFixed(2);
      getOption();
      break;
    case 'bet关键路线2':
      echartData[0].value = lineData[1].majorpath.drag_1 || 0;
      echartData[1].value = lineData[1].majorpath.drag_2 || 0;
      echartData[2].value = lineData[1].majorpath.drag_3 || 0;
      tabList[0].val = lineData[1].majorpath.drag_total || 0;
      tabList[1].val = lineData[1].majorpath.m3_total || 0;
      tabList[2].val = 0.83;
      percentF.value = ((echartData[0].value / (echartData[0].value + echartData[1].value + echartData[2].value)) * 100).toFixed(2) || 0;
      percentT.value = ((echartData[1].value / (echartData[0].value + echartData[1].value + echartData[2].value)) * 100).toFixed(2) || 0;
      percentE.value = ((echartData[2].value / (echartData[0].value + echartData[1].value + echartData[2].value)) * 100).toFixed(2) || 0;

      // echartData[0].value = Math.floor(Math.random() * (830 - 820 + 1)) + 820;
      // echartData[1].value = Math.floor(Math.random() * (620 - 600 + 1)) + 600;
      // echartData[2].value = Math.floor(Math.random() * (860 - 800 + 1)) + 800;
      // tabList[0].val = Math.floor(Math.random() * (10100 - 10000 + 1)) + 10000;
      // tabList[1].val = Math.floor(Math.random() * (2310 - 2210 + 1)) + 2210;
      // tabList[2].val = 0.78;
      // percentF.value = ((echartData[0].value / (echartData[0].value + echartData[1].value + echartData[2].value)) * 100).toFixed(2);
      // percentT.value = ((echartData[1].value / (echartData[0].value + echartData[1].value + echartData[2].value)) * 100).toFixed(2);
      // percentE.value = ((echartData[2].value / (echartData[0].value + echartData[1].value + echartData[2].value)) * 100).toFixed(2);
      getOption();
      break;
    case 'sw关键路线1':
      echartData[0].value = lineData[2].majorpath.drag_1 || 0;
      echartData[1].value = lineData[2].majorpath.drag_2 || 0;
      echartData[2].value = lineData[2].majorpath.drag_3 || 0;
      tabList[0].val = lineData[2].majorpath.drag_total || 0;
      tabList[1].val = lineData[2].majorpath.m3_total || 0;
      tabList[2].val = 0.88;
      percentF.value = ((echartData[0].value / (echartData[0].value + echartData[1].value + echartData[2].value)) * 100).toFixed(2) || 0;
      percentT.value = ((echartData[1].value / (echartData[0].value + echartData[1].value + echartData[2].value)) * 100).toFixed(2) || 0;
      percentE.value = ((echartData[2].value / (echartData[0].value + echartData[1].value + echartData[2].value)) * 100).toFixed(2) || 0;

      // echartData[0].value = Math.floor(Math.random() * (830 - 820 + 1)) + 820;
      // echartData[1].value = Math.floor(Math.random() * (620 - 600 + 1)) + 600;
      // echartData[2].value = Math.floor(Math.random() * (860 - 800 + 1)) + 800;
      // tabList[0].val = Math.floor(Math.random() * (10100 - 10000 + 1)) + 10000;
      // tabList[1].val = Math.floor(Math.random() * (2310 - 2210 + 1)) + 2210;
      // tabList[2].val = 0.78;
      // percentF.value = ((echartData[0].value / (echartData[0].value + echartData[1].value + echartData[2].value)) * 100).toFixed(2);
      // percentT.value = ((echartData[1].value / (echartData[0].value + echartData[1].value + echartData[2].value)) * 100).toFixed(2);
      // percentE.value = ((echartData[2].value / (echartData[0].value + echartData[1].value + echartData[2].value)) * 100).toFixed(2);
      getOption();
      break;
    case 'sw关键路线2':
      echartData[0].value = lineData[3].majorpath.drag_1 || 0;
      echartData[1].value = lineData[3].majorpath.drag_2 || 0;
      echartData[2].value = lineData[3].majorpath.drag_3 || 0;
      tabList[0].val = lineData[3].majorpath.drag_total || 0;
      tabList[1].val = lineData[3].majorpath.m3_total || 0;
      tabList[2].val = 0.93;
      percentF.value = ((echartData[0].value / (echartData[0].value + echartData[1].value + echartData[2].value)) * 100).toFixed(2) || 0;
      percentT.value = ((echartData[1].value / (echartData[0].value + echartData[1].value + echartData[2].value)) * 100).toFixed(2) || 0;
      percentE.value = ((echartData[2].value / (echartData[0].value + echartData[1].value + echartData[2].value)) * 100).toFixed(2) || 0;

      // echartData[0].value = Math.floor(Math.random() * (830 - 820 + 1)) + 820;
      // echartData[1].value = Math.floor(Math.random() * (620 - 600 + 1)) + 600;
      // echartData[2].value = Math.floor(Math.random() * (860 - 800 + 1)) + 800;
      // tabList[0].val = Math.floor(Math.random() * (10100 - 10000 + 1)) + 10000;
      // tabList[1].val = Math.floor(Math.random() * (2310 - 2210 + 1)) + 2210;
      // tabList[2].val = 0.78;
      // percentF.value = ((echartData[0].value / (echartData[0].value + echartData[1].value + echartData[2].value)) * 100).toFixed(2);
      // percentT.value = ((echartData[1].value / (echartData[0].value + echartData[1].value + echartData[2].value)) * 100).toFixed(2);
      // percentE.value = ((echartData[2].value / (echartData[0].value + echartData[1].value + echartData[2].value)) * 100).toFixed(2);
      getOption();
      break;
  }
}

function getOption() {
  nextTick(() => {
    function deepCopy(obj) {
      if (typeof obj !== 'object') {
        return obj;
      }
      var newobj = {};
      for (var attr in obj) {
        newobj[attr] = obj[attr];
      }
      return newobj;
    }

    echartData.map((a, b) => {
      xData.push(a.name);
      yData.push(a.value);
    });
    var startColor = ['rgba(255, 224, 28,.6)', 'rgba(31, 248, 251,.6)', 'rgba(154, 255, 168,.6)'];
    var borderStartColor = ['#ffe01c', '#1ff8fb', '#9affa8'];
    var RealData = [];
    var borderData = [];
    echartData.map((item, index) => {
      var newobj = deepCopy(item);
      var newobj1 = deepCopy(item);
      RealData.push(newobj);
      borderData.push(newobj1);
    });
    RealData.map((item, index) => {
      item.itemStyle = {
        normal: {
          color: startColor[index],
        },
      };
    });
    borderData.map((item, index) => {
      item.itemStyle = {
        normal: {
          color: borderStartColor[index],
        },
      };
    });
    const myChart = echarts.init(line.value);

    let option = {
      legend: [
        {
          // orient: 'vertical',
          x: '50%',
          y: '12%',
          itemWidth: 10,
          itemHeight: 10,
          align: 'left',
          textStyle: {
            fontSize: 14,
            color: '#b3b8cc',
          },
          data: ['进风区'],
        },
        {
          // orient: 'vertical',
          x: '50%',
          y: '42%',
          itemWidth: 10,
          itemHeight: 10,
          align: 'left',
          textStyle: {
            fontSize: 14,
            color: '#b3b8cc',
          },
          data: ['用风区'],
        },
        {
          // orient: 'vertical',
          x: '50%',
          y: '70%',
          itemWidth: 10,
          itemHeight: 10,
          align: 'left',
          textStyle: {
            fontSize: 14,
            color: '#b3b8cc',
          },
          data: ['回风区'],
        },
      ],
      tooltip: {
        formatter: '{b}:{c}',
      },
      series: [
        // 主要展示层的
        {
          radius: ['40%', '80%'],
          center: ['25%', '50%'],
          type: 'pie',
          z: 10,
          label: {
            normal: {
              show: false,
            },
            emphasis: {
              show: false,
            },
          },
          labelLine: {
            normal: {
              show: false,
            },
            emphasis: {
              show: false,
            },
          },
          itemStyle: {
            normal: {
              borderWidth: 5,
              borderColor: 'rgba(1, 57, 134,1)',
            },
          },
          data: RealData,
        },
        // 边框的设置
        {
          radius: ['45%', '52%'],
          center: ['25%', '50%'],
          type: 'pie',
          z: 5,
          label: {
            normal: {
              show: false,
            },
            emphasis: {
              show: false,
            },
          },
          labelLine: {
            normal: {
              show: false,
            },
            emphasis: {
              show: false,
            },
          },

          animation: false,
          tooltip: {
            show: false,
          },
          data: borderData,
        },
      ],
    };
    myChart.setOption(option);
    window.onresize = function () {
      myChart.resize();
    };
  });
}

watch(
  () => props.lineList,
  (val) => {
    console.log(val, '关键路线数据');
    lineData = val;
    lineTypeList.length = 0;
    lineData.forEach((el) => {
      lineTypeList.push({
        label: el.deviceName,
        value: el.deviceName,
      });
    });

    if (searchValue.value) {
      changeSelect(searchValue.value);
    } else {
      searchValue.value = lineTypeList[0].value;
      changeSelect(searchValue.value);
    }
  },
  {
    deep: true,
  }
);

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

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

.windLine {
  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%);
    }
  }

  .line-echart {
    position: absolute;
    top: 66px;
    left: 0;
    width: 100%;
    height: 120px;

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

    .pic {
      height: 100%;
      position: absolute;
      left: 45%;
      top: 0;
      display: flex;
      align-items: center;

      img {
        height: 60%;
      }
    }

    .percent {
      position: absolute;
      left: 75%;
      top: 0;
      width: 45px;
      height: 100%;
      display: flex;
      flex-direction: column;
      // justify-content: space-between;
      align-items: center;

      .percent-box {
        font-size: 14px;

        // color: #b3b8cc;
        &:nth-child(1) {
          position: absolute;
          top: 12%;
          color: #ffe01c;
        }

        &:nth-child(2) {
          position: absolute;
          top: 42%;
          color: #1ff8fb;
        }

        &:nth-child(3) {
          position: absolute;
          top: 70%;
          color: #9affa8;
        }

        .dw {
          color: #b3b8cc;
          margin-left: 5px;
        }
      }
    }
  }

  .line-card {
    position: absolute;
    top: 186px;
    left: 0;
    width: 100%;
    height: calc(100% - 186px);
    padding: 0px 15px 15px 15px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-around;
    align-items: center;

    .card-item {
      display: flex;
      flex: 1;
      justify-content: center;
      align-items: center;
      height: 100%;

      .item-s {
        position: relative;
        width: 105px;
        height: 58px;
        margin-top: 20px;
        background: url('../../../../../assets/images/home-container/line-val.png') no-repeat;
        background-size: 100% 90%;

        .item-label {
          width: 100%;
          text-align: center;
          color: #b3b8cc;
          font-size: 12px;
        }

        .item-val {
          position: absolute;
          left: 50%;
          top: 26px;
          font-size: 14px;
          font-family: 'douyuFont';
          color: #fff;
          transform: translate(-50%, 0);
        }
      }
    }
  }
}

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