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

<!--
 * @Author: WangQiBiao
 * @Date: 2019-09-25 14:10:08
 * @LastEditors: WangQiBiao
 * @LastEditTime: 2019-10-16 07:05:00
 * @Description: 在线沟通
 -->
<template>
  <div class="communication">
    <TitleCom :isBorder="true">在线沟通</TitleCom>
    <div class="map">
      <div class="map-item proportion" id="proportion"></div>
      <div class="map-item satisfaction" id="satisfaction"></div>
    </div>
    <div class="linst-line"></div>
    <div class="list">
      <div class="list-item" v-for="(item, idx) in dialogData" :key="idx">
        <div class="list-item-lf">
          <TagCom type="time">{{item.createAt}}</TagCom>
          <span class="list-item-txt">{{item.content.replace('提交了', '')}}</span>
        </div>
        <div class="list-item-lr">
          <TagCom v-if="item.label === '建议'" type="advice">建议</TagCom>
          <TagCom v-if="item.label === '表扬'" type="praise">表扬</TagCom>
          <TagCom v-if="item.label === '投诉'" type="complaints">投诉</TagCom>
          <TagCom v-if="item.label === '咨询'" type="consulting">咨询</TagCom>
          <TagCom v-if="item.label === '待受理'" type="accept">待受理</TagCom>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import TitleCom from '@/components/title'
import TagCom from '@/components/tag'
import echarts from 'echarts'
import { api } from '@/api'
export default {
  data () {
    return {
      dialogData: []
    }
  },
  components: {
    TitleCom,
    TagCom
  },
  mounted () {
    this.init()
    setInterval(() => {
      this.init()
    }, 30000)
  },
  methods: {
    init () {
      api.getDialogRecord().then(res => {
        this.dialogData = res.data.data.list
      })
      this.circleProportionMap()
      this.createSatisfactionMap()
    },
    /**
     * 占比
     */
    circleProportionMap () {
      var myChart = echarts.init(document.getElementById('proportion'))
      var option = {
        // backgroundColor: '#2c343c',
        series: [
          {
            type: 'pie',
            radius: '46%',
            // radius: ['35%', '60%'],
            roseType: 'radius',
            center: ['50%', '50%'],
            label: {
              normal: {
                formatter: '{b|{b}}\n{c}',
                fontSize: 10,
                lineHeight: 14,
                rich: {
                  b: {
                    color: '#fff',
                    fontSize: 10
                  }
                }
              }
            },
            data: [
              {
                value: 1652,
                name: '咨询',
                label: {
                  show: true,
                  color: '#00F5FF'
                },
                itemStyle: {
                  color: '#00F5FF'
                }
              },
              {
                value: 2462,
                name: '投诉',
                label: {
                  show: true,
                  color: '#ed4f46'
                },
                itemStyle: {
                  color: '#ed4f46'
                }
              },
              {
                value: 591,
                name: '建议',
                label: {
                  show: true,
                  color: '#0998FF'
                },
                itemStyle: {
                  color: '#0998FF'
                }
              },
              {
                value: 350,
                name: '表扬',
                label: {
                  show: true,
                  color: '#07E144'
                },
                itemStyle: {
                  color: '#07E144'
                }
              }
            ]
          }
        ]
      }
      myChart.setOption(option)
    },
    /**
     * 满意度
     */
    createSatisfactionMap () {
      var myChart = echarts.init(document.getElementById('satisfaction'))
      var option = {
        // backgroundColor: '#2c343b',
        series: [
          {
            name: '满意度',
            hoverAnimation: false,
            type: 'pie',
            radius: ['70%', '100%'],
            label: {
              normal: {
                formatter: '{a|{a}}\n{b|{b}}',
                fontSize: 10,
                lineHeight: 14,
                position: 'center',
                rich: {
                  a: {
                    color: '#00CAFF',
                    fontSize: 10
                  },
                  b: {
                    color: '#00FAA8',
                    fontSize: 14
                  }
                }
              }
            },
            data: [
              {
                value: 83.2,
                name: '83.2%',
                itemStyle: {
                  color: '#07E144'
                }
              },
              {
                value: 16.8,
                itemStyle: {
                  color: '#262795'
                }
              }
            ]
          }
        ]
      }
      myChart.setOption(option)
    }
  }
}
</script>

<style lang="scss" scoped>
@import './index.scss';
</style>