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

<!--
 * @Author: WangQiBiao
 * @Date: 2019-09-25 14:10:08
 * @LastEditors: wjc
 * @LastEditTime: 2025-11-18 09:50:12
 * @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">
      <vueSeamless :data="dialogData" :class-option="optionScroll" 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>
      </vueSeamless>
    </div>
  </div>
</template>
<script>
import TitleCom from '@/components/title'
import TagCom from '@/components/tag'
import * as echarts from 'echarts'
import { api } from '@/api'
import vueSeamless from 'vue-seamless-scroll'

export default {
  computed: {
    optionScroll () {
      return {
        step: 0.5
      }
    }
  },
  data () {
    return {
      reportAdvice: '',
      reportComplaint: '',
      reportSuggest: '',
      reportPraise: '',
      reportServiceScore: '',
      reportSum: {},
      dialogData: []
    }
  },
  components: {
    TitleCom,
    TagCom,
    vueSeamless
  },
  mounted () {
    this.init()
    setInterval(() => {
      this.init()
    }, 30000)
  },
  methods: {
    init () {
      api.getDialogRecord().then(res => {
        this.dialogData = res.data.data.list
      })
      this.getReportSum()
    },
    getReportSum () {
      api.getReportSum().then(res => {
        res.data.data.reportRepairStatisticsVos && res.data.data.reportRepairStatisticsVos.map(item => {
          this[item.type] = item.total
        })
        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: '#6786B8',
                    fontSize: 10
                  }
                }
              }
            },
            data: [
              {
                value: this.reportAdvice,
                name: '咨询',
                label: {
                  show: true,
                  color: '#2CDAE1'
                },
                itemStyle: {
                  color: '#2CDAE1'
                }
              },
              {
                value: this.reportComplaint,
                name: '投诉',
                label: {
                  show: true,
                  color: '#DE5B5B'
                },
                itemStyle: {
                  color: '#DE5B5B'
                }
              },
              {
                value: this.reportSuggest,
                name: '建议',
                label: {
                  show: true,
                  color: '#2592E1'
                },
                itemStyle: {
                  color: '#2592E1'
                }
              },
              {
                value: this.reportPraise,
                name: '表扬',
                label: {
                  show: true,
                  color: '#1EC74D'
                },
                itemStyle: {
                  color: '#1EC74D'
                }
              }
            ]
          }
        ]
      }
      myChart.setOption(option)
    },
    /**
     * 满意度
     */
    createSatisfactionMap () {
      var myChart = echarts.init(document.getElementById('satisfaction'))
      var option = {
        // this.reportServiceScore
        name: '仪表盘',
        grid: {
          top: '0px',
          bottom: '5px',
          left: '0px',
          right: '0px'
        },
        title: {
          show: true,
          text: [`{titleBg|满意度}`],
          left: 'center',
          bottom: '0',
          textStyle: {
            rich: {
              titleBg: {
                backgroundColor: '#14223C',
                borderRadius: 4,
                height: 20,
                width: 50,
                color: '#01DFFC',
                fontSize: 12
              }
            }
          }
        },
        series: [
          {
            type: 'gauge',
            radius: '100%',
            axisLine: {
              show: true,
              lineStyle: {
                width: 12,
                color: [
                  [
                    ((this.reportServiceScore) / 100).toFixed(1), new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                      {
                        offset: 0,
                        color: '#43D3C7'
                      },
                      {
                        offset: 1,
                        color: '#2D32F0'
                      }
                    ])
                  ],
                  [
                    1, '#182743'
                  ]
                ]
              }
            },
            splitLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              show: false
            },
            pointer: {
              show: false
            },
            title: {
              offsetCenter: [0, '20%'],
              fontSize: 12,
              fontFamily: 'Microsoft YaHei',
              fontWeight: '400',
              color: '#5774A2'
            },
            detail: {
              formatter: `${this.reportServiceScore}%`,
              offsetCenter: [0, 0],
              fontSize: 20,
              fontFamily: 'DS-Digital',
              fontWeight: 'bold',
              color: '#00D2ED'
            },
            data: [{ value: 0, name: '' }]
          }
        ]
      }
      myChart.setOption(option)
    }
  }
}
</script>

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