vent-template/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', 'line')
  }
  //选项切换
  function changeSelect(val) {
    switch (val) {
      case '1号回风斜井':
        // echartData[0].value = lineData[0].majorpath.drag_1;
        // echartData[1].value = lineData[0].majorpath.drag_2;
        // echartData[2].value = lineData[0].majorpath.drag_3;
        // tabList[0].val = lineData[0].majorpath.drag_total;
        // tabList[1].val = lineData[0].majorpath.m3_total;
        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 '2号回风立井':
        // echartData[0].value = lineData[1].majorpath.drag_1;
        // echartData[1].value = lineData[1].majorpath.drag_2;
        // echartData[2].value = lineData[1].majorpath.drag_3;
        // tabList[0].val = lineData[1].majorpath.drag_total;
        // tabList[1].val = lineData[1].majorpath.m3_total;
        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(2, 39, 115)',
              },
            },
            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,
        });
      });
      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>