SaaS-DataScreen/src/views/index/components/repair/index.vue

<!--
 * @Author: WangQiBiao
 * @Date: 2019-09-25 17:54:01
 * @LastEditors: WangQiBiao
 * @LastEditTime: 2019-09-26 17:54:43
 * @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="rate"
        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">{{125 | 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">{{1576 | 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">{{2376 | 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">{{1245 | numberFormat}}</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import TitleCom from '@/components/title'
import echarts from 'echarts'
export default {
  components: {
    TitleCom
  },
  data () {
    return {
      rate: 4.6
    }
  },
  mounted () {
    this.createMap()
  },
  methods: {
    /**
     * 受理环比
     */
    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: 335,
                name: '待受理  125',
                itemStyle: {
                  color: '#F9AF09'
                }
              },
              {
                value: 335,
                name: '已受理  1576',
                itemStyle: {
                  color: '#0996FE'
                }
              },
              {
                value: 335,
                name: '已解决  2376',
                itemStyle: {
                  color: '#00C738'
                }
              },
              {
                value: 335,
                name: '已评价  1245',
                itemStyle: {
                  color: '#0BDCE5'
                }
              }
            ]
          }
        ]
      }
      myChart.setOption(option)
    }
  }
}
</script>
<style lang="scss" scoped>
@import './index.scss';
</style>