devicesmgt/sgzb-screen/src/components/home/rightThree.vue

<template>
  <div class="access-rate-page">
    <div class="access-rate-box">
      <div class="access-rate-box-title-bg">
        <h5 class="access-rate-box-title">当月维修分析</h5>
      </div>
      <div class="box_header" @click="handleClick">
        <div class="box_left_bg">
          <div class="box_left_bg_upkeep">
            <div class="box_left_bg_img">
              <img src="../../assets/img/myImage/upkeep.png" alt="" />
            </div>
            <div class="box_left_bg_number">{{ dataObj.rate }}</div>
            <div class="box_left_bg_title">
              <span>待维修</span><span> ({{ dataObj.num }}) </span>
            </div>
          </div>
        </div>
        <div class="box_left_pie">
          <div id="accessRateEchartsPie"></div>
        </div>
        <div class="box_right_bg">
          <div class="box_left_bg_upkeep">
            <div class="box_left_bg_img">
              <img src="../../assets/img/myImage/scrap.png" alt="" />
            </div>
            <div class="box_left_bg_number">{{ dataObj.rate3 }}</div>
            <div class="box_left_bg_title">
              <span>待报废</span><span> ({{ dataObj.num3 }}) </span>
            </div>
          </div>
        </div>
      </div>

      <fixMaterialAnalysisDialog ref="fixMaterial" />
    </div>
  </div>
</template>
<script>
import * as echarts from 'echarts';
import { getMaintenanceByMonthApi } from "../../api/screen";
import fixMaterialAnalysisDialog from './fixMaterialAnalysisDialog.vue';

export default {
  name: 'accessRatePage',
  components: { fixMaterialAnalysisDialog },
  data() {
    return {
      dataObj: {},
      maType: ''
    }
  },
  mounted() {
    this.$eventBus.$on('maType', (maType) => {
      this.maType = maType
      this.getMaintenanceByMonthApiPage()
    });
    setInterval(() => {
      this.getMaintenanceByMonthApiPage()
    }, 60 * 1000);

  },
  destroyed() {
    this.$eventBus.$off('maType');
  },
  methods: {
    getMaintenanceByMonthApiPage() {
      let params = {
        maType: this.maType
      }
      this.dataObj = {}
      getMaintenanceByMonthApi(params).then(res => {
        if (res.code == 200) {
          this.dataObj = res.data
          this.getInitData();
        }
      })
    },
    getInitData() {
      let option = {
        backgroundColor: 'transparent',
        tooltip: {
          formatter: '{a} <br/>{b} : {c}%',
        },
        title: {
          text: `${this.dataObj.num2}`,
          left: 'center',
          top: '25%',
          itemGap: 6,
          textStyle: {
            color: '#1CFFA3',
            fontSize: 22,
            fontWeight: 'bold',
          },
          subtext: `维修合格\n (${this.dataObj.rate2})`,
          subtextStyle: {
            color: '#D9D9D9',
            fontSize: 14,
            lineHeight: 20
          },
        },
        series: [
          {
            type: 'gauge',
            radius: '84%',
            startAngle: '360',
            endAngle: '0',
            min: 0,
            max: 100,
            pointer: {
              show: false,
            },
            detail: {
              show: false,
            },
            data: [
              {
                value: 1,
              },
            ],
            axisLine: {
              show: true,
              lineStyle: {
                color: [[1, '#18E29C']],
                width: 2,
                opacity: 1,
              },
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              show: false,
              length: -44,
              lineStyle: {
                color: '#18E29C',
                width: 0,
                type: 'solid',
              },
            },
            axisLabel: {
              show: false,
            },
          },
        ],
      };

      let myCharts = echarts.init(document.querySelector('#accessRateEchartsPie'));
      myCharts.setOption(option)
    },
    handleClick() {
      this.$refs.fixMaterial.setOpen({ open: true, maType: this.maType })
    }
  },
}
</script>

<style lang="scss" scoped>
.access-rate-page {
  margin-bottom: 31px;

  .access-rate-box {
    .access-rate-box-title-bg {
      width: 433px;
      height: 50px;
      background: url(../../assets/img/myImage/title_right.png) no-repeat center;
      background-size: 100% 100%;
      position: relative;

      .access-rate-box-title {
        position: absolute;
        left: 6%;
        top: 28%;
        font-size: 20px;
        font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
        font-weight: 500;
        color: #ffffff;
        line-height: 23px;
        letter-spacing: 2px;
      }
    }

    .box_header {
      width: 433px;
      height: 113px;
      box-sizing: border-box;
      margin-top: 25px;
      display: flex;
      justify-content: space-around;
      align-items: center;
      .box_left_bg {
        width: 151px;
        height: 137px;
        background: url(../../assets/img/myImage/left_bg.png) no-repeat center;
        background-size: 100% 100%;
        margin-right: -15px;
        .box_left_bg_upkeep {
          margin-top: 33px;
          display: flex;
          flex-direction: column;
          align-items: center;
          .box_left_bg_img {
            width: 16px;
            height: 16px;
            img {
              width: 100%;
              height: 100%;
            }
          }
          .box_left_bg_number {
            font-size: 22px;
            font-family: Roboto, Roboto;
            font-weight: bold;
            color: #ffffff;
            line-height: 26px;
            margin: 8px 0;
          }
          .box_left_bg_title {
            font-size: 14px;
            font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
            font-weight: 400;
            color: rgba(255, 255, 255, 0.8);
            line-height: 16px;
          }
        }
      }

      .box_right_bg {
        width: 151px;
        height: 137px;
        background: url(../../assets/img/myImage/right_bg.png) no-repeat center;
        background-size: 100% 100%;
        margin-left: -15px;
        .box_left_bg_upkeep {
          margin-top: 33px;
          display: flex;
          flex-direction: column;
          align-items: center;
          .box_left_bg_img {
            width: 16px;
            height: 16px;
            img {
              width: 100%;
              height: 100%;
            }
          }
          .box_left_bg_number {
            font-size: 22px;
            font-family: Roboto, Roboto;
            font-weight: bold;
            color: #ffffff;
            line-height: 26px;
            margin: 8px 0;
          }
          .box_left_bg_title {
            font-size: 14px;
            font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
            font-weight: 400;
            color: rgba(255, 255, 255, 0.8);
            line-height: 16px;
          }
        }
      }
      .box_left_pie {
        width: calc(433px - 302px);
        height: 137px;
        border-radius: 50%;
        background: #003870;
        #accessRateEchartsPie {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
}
</style>