<!--
 * @Author: WangQiBiao
 * @Date: 2019-09-25 17:54:01
 * @LastEditors: wjc
 * @LastEditTime: 2025-11-18 09:50:34
 * @Description: 住户报修
 -->
<template>
  <div class="repair">
    <TitleCom :isBorder="true">住户报修</TitleCom>
    <div class="rate">
      <div class="rate-title">服务评分</div>
      <div class="rate-cnt">
        <el-rate
        v-model="repairServiceScore"
        disabled
        :show-score="true"
        :allow-half="true"
        text-color="#fff"
        disabled-void-color="#ddd"
        score-template="{value}/5"
      >
      </el-rate>
      </div>
    </div>
    <div class="map">
      <div class="map-cnt" id="map"></div>
      <div class="map-tips">
        <div class="map-tips-item b1">
          <div class="map-tips-item-w"></div>
          <div class="map-tips-item-txt">待受理</div>
          <div class="map-tips-item-p">{{repairWaitAccept | numberFormat}}</div>
        </div>
        <div class="map-tips-item b2">
          <div class="map-tips-item-w"></div>
          <div class="map-tips-item-txt">已受理</div>
          <div class="map-tips-item-p">{{repairAccept | numberFormat}}</div>
        </div>
        <div class="map-tips-item b3">
          <div class="map-tips-item-w"></div>
          <div class="map-tips-item-txt">已解决</div>
          <div class="map-tips-item-p">{{repairSolve | numberFormat}}</div>
        </div>
        <div class="map-tips-item b4">
          <div class="map-tips-item-w"></div>
          <div class="map-tips-item-txt">已评价</div>
          <div class="map-tips-item-p">{{repairEvaluate | numberFormat}}</div>
        </div>
        <div class="map-tips-item b5">
          <div class="map-tips-item-w"></div>
          <div class="map-tips-item-txt">已挂起</div>
          <div class="map-tips-item-p">{{repairHangUp | numberFormat}}</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import TitleCom from '@/components/title'
import * as echarts from 'echarts'
import { api } from '@/api'
export default {
  components: {
    TitleCom
  },
  data () {
    return {
      repairWaitAccept: '',
      repairAccept: '',
      repairSolve: '',
      repairEvaluate: '',
      repairHangUp: '',
      repairSum: {},
      repairServiceScore: 4.6
    }
  },
  mounted () {
    this.getRepairSum()
  },
  methods: {
    getRepairSum () {
      api.getRepairSum().then(res => {
        res.data.data.reportRepairStatisticsVos && res.data.data.reportRepairStatisticsVos.map(item => {
          this[item.type] = item.total
          return item
        })
        this.createMap()
      })
    },
    /**
     * 受理环比
     */
    createMap () {
      var myChart = echarts.init(document.getElementById('map'))
      var option = {
        // backgroundColor: '#2c343b',
        series: [
          {
            name: '受理环比',
            hoverAnimation: false,
            type: 'pie',
            radius: ['50%', '100%'],
            label: {
              show: false
            },
            data: [
              {
                value: this.repairWaitAccept,
                name: '待受理',
                itemStyle: {
                  color: new echarts.graphic.LinearGradient(
                    0, 0, 0, 1,
                    [
                      { offset: 0, color: '#D6595D' },
                      { offset: 1, color: '#D0A971' }
                    ]
                  )
                }
              },
              {
                value: this.repairAccept,
                name: '已受理',
                itemStyle: {
                  color: new echarts.graphic.LinearGradient(
                    0, 0, 0, 1,
                    [
                      { offset: 0, color: '#43D3C7' },
                      { offset: 1, color: '#2D32F0' }
                    ]
                  )
                }
              },
              {
                value: this.repairSolve,
                name: '已解决',
                itemStyle: {
                  color: new echarts.graphic.LinearGradient(
                    0, 0, 0, 1,
                    [
                      { offset: 0, color: '#1BA71E' },
                      { offset: 1, color: '#8EBB16' }
                    ]
                  )
                }
              },
              {
                value: this.repairEvaluate,
                name: '已评价',
                itemStyle: {
                  color: new echarts.graphic.LinearGradient(
                    0, 0, 0, 1,
                    [
                      { offset: 0, color: '#2E38EE' },
                      { offset: 1, color: '#8E44C6' }
                    ]
                  )
                }
              },
              {
                value: this.repairHangUp,
                name: '已挂起',
                itemStyle: {
                  color: new echarts.graphic.LinearGradient(
                    0, 0, 0, 1,
                    [
                      { offset: 0, color: '#949090' },
                      { offset: 1, color: '#E0DBDB' }
                    ]
                  )
                }
              }
            ]
          }
        ]
      }
      myChart.setOption(option)
    }
  }
}
</script>
<style lang="scss" scoped>
@import './index.scss';
</style>
