k94314517
2025-06-03 eb614540cf399bc97cb4019c187f78b6473f2976
company/src/views/business/dataBoard.vue
@@ -1,51 +1,51 @@
<template>
    <div class="box">
        <div class="box_shua">
            <el-button icon="el-icon-refresh" type="primary">刷新数据</el-button>
            <el-button icon="el-icon-refresh" type="primary" @click="getChatData(),getData()">刷新数据</el-button>
        </div>
        <div class="box_head">
            <div class="box_head_info">
                <i class="el-icon-info"></i>
                <span>展示当前系统合计总数,每天更新数据</span>
            </div>
            <div class="box_head_list">
            <div class="box_head_list" v-if="info">
                <div class="box_head_list_item">
                    <div class="box_head_list_item_top">
                        <span>保险公司数</span>
                        <span>本月 +3</span>
                        <span>本月 +{{info.insuranceAddTotal}}</span>
                    </div>
                    <div class="box_head_list_item_bottom">32</div>
                    <div class="box_head_list_item_bottom">{{info.insuranceTotal}}</div>
                </div>
                <div class="box_head_list_item">
                    <div class="box_head_list_item_top">
                        <span>保单数</span>
                        <span>本月 +12</span>
                        <span>本月 +{{info.insuranceApplyAddTotal}}</span>
                    </div>
                    <div class="box_head_list_item_bottom">88</div>
                    <div class="box_head_list_item_bottom">{{info.insuranceApplyTotal}}</div>
                </div>
                <div class="box_head_list_item">
                    <div class="box_head_list_item_top">
                        <span>在保人数</span>
                        <span>本月 +300</span>
                        <span>本月 +{{info.insuranceUserAddTotal}}</span>
                    </div>
                    <div class="box_head_list_item_bottom">2,000</div>
                    <div class="box_head_list_item_bottom">{{info.insuranceUserTotal}}</div>
                </div>
                <div class="box_head_list_item">
                    <div class="box_head_list_item_top">
                        <span>已收费用合计</span>
                        <span>本月 +813,789.00</span>
                        <span>本月 +{{info.totalAddFee}}</span>
                    </div>
                    <div class="box_head_list_item_bottom">¥6,345,654.00</div>
                    <div class="box_head_list_item_bottom">¥{{info.totalFee}}</div>
                </div>
            </div>
        </div>
        <div class="box_chart">
        <div class="box_chart" v-if="chatData">
            <div class="box_chart_item">
                <div class="box_chart_item_info">
                    <span>总理赔金额</span>
                    <i class="el-icon-info"></i>
                </div>
                <div class="box_chart_item_price">¥2,345,654.00</div>
                <div class="box_chart_item_price">¥{{chatData.settleClaimsTotalFee || ''}}</div>
                <div class="box_chart_item_tu" style="height: 132px" id="tu1"></div>
            </div>
            <div class="box_chart_item">
@@ -53,7 +53,7 @@
                    <span>总理赔案件数</span>
                    <i class="el-icon-info"></i>
                </div>
                <div class="box_chart_item_price">1,234</div>
                <div class="box_chart_item_price">{{chatData.settleClaimsTotal || ''}}</div>
                <div class="box_chart_item_tu"  style="height: 132px"  id="tu2"></div>
            </div>
            <div class="box_chart_item">
@@ -61,31 +61,31 @@
                    <span>平均理赔处理时长</span>
                    <i class="el-icon-info"></i>
                </div>
                <div class="box_chart_item_price">10.5天</div>
                <div class="box_chart_item_price">{{chatData.averageSettleClaimsTime || ''}}天</div>
                <div class="box_chart_item_tu"   style="height: 132px"  id="tu3"></div>
            </div>
        </div>
        <div class="box_shuju">
        <div class="box_shuju" v-if="chatData">
            <div class="box_shuju_item">
                <div class="box_shuju_item_top">
                    <span>受理率</span>
                    <i class="el-icon-info"></i>
                </div>
                <div class="box_shuju_item_bottom">95.3%</div>
                <div class="box_shuju_item_bottom">{{chatData.acceptanceRata}}%</div>
            </div>
            <div class="box_shuju_item">
                <div class="box_shuju_item_top">
                    <span>拒赔率</span>
                    <i class="el-icon-info"></i>
                </div>
                <div class="box_shuju_item_bottom">12.8%</div>
                <div class="box_shuju_item_bottom">{{chatData.refuseRata}}%</div>
            </div>
            <div class="box_shuju_item">
                <div class="box_shuju_item_top">
                    <span>结案率</span>
                    <i class="el-icon-info"></i>
                </div>
                <div class="box_shuju_item_bottom">88.9%</div>
                <div class="box_shuju_item_bottom">{{chatData.closeCaseRata}}%</div>
            </div>
        </div>
        <div class="box_content">
@@ -100,7 +100,7 @@
                        <div class="box_content_left_list_item_bottom" v-if="item.title!= ''">
                            <span>较上月</span>
                            <div class="box_content_left_list_item_bottom_lv">
                                8.3%
                                {{item.percentage}}%
                            </div>
                        </div>
                    </div>
@@ -170,6 +170,7 @@
import * as echarts from 'echarts'
import 'echarts-wordcloud'
import chinaJSON from '@/assets/china.json'
import { getInsuranceDataVO, getSettleClaimsDataVO } from '@/api/business/settleRisk'
export default {
  name: 'dataBoard',
  data () {
@@ -179,42 +180,49 @@
        {
          title: '多次出险',
          num: 0,
          percentage: 0,
          color: '#EF4444',
          backgroundColor: '#FEF2F2'
        },
        {
          title: '重复报案',
          num: 0,
          percentage: 0,
          color: '#d6f7e5',
          backgroundColor: '#FFF7ED'
        },
        {
          title: '索赔过多',
          num: 0,
          percentage: 0,
          color: '#CA8A04',
          backgroundColor: '#FEFCE8'
        },
        {
          title: '新员工出险',
          num: 0,
          percentage: 0,
          color: '#3ea570',
          backgroundColor: '#d6f7e5'
        },
        {
          title: '敏感词',
          num: 0,
          percentage: 0,
          color: '#2563EB',
          backgroundColor: '#EFF6FF'
        },
        {
          title: '延迟报案',
          num: 0,
          percentage: 0,
          color: '#4F46E5',
          backgroundColor: '#EEF2FF'
        },
        {
          title: '新员工保障条款',
          num: 0,
          percentage: 0,
          color: '#9333EA',
          backgroundColor: '#FAF5FF'
        },
@@ -224,80 +232,166 @@
          color: '#9333EA',
          backgroundColor: '#FAF5FF'
        }
      ]
      ],
        info: null,
        chatData: null
    }
  },
  created () {
    this.$nextTick(() => {
      this.setChart1()
      this.setChart2()
      this.setChart3()
      this.setChartLipeijine()
      this.setChartDiqu()
      this.setChartAnjianleixing()
      this.setChartShiguleixing()
      this.setChartJieanlv()
      this.setChartGonghzong()
      this.setChartNianlin()
      this.setChartWord()
    })
      this.getData()
      this.getChatData()
  },
  methods: {
      getChatData() {
          getSettleClaimsDataVO()
            .then(res => {
                this.chatData = res
                let arr1_x = res.settleClaimsTotalList.map(item => item.dataFirst)
                let arr1_y = res.settleClaimsTotalList.map(item => item.dataSecond)
                let arr2_x = res.settleClaimsFeeList.map(item => item.dataFirst)
                let arr2_y = res.settleClaimsFeeList.map(item => item.dataSecond)
                let arr3_x = res.averageSettleClaimsList.map(item => item.dataFirst)
                let arr3_y = res.averageSettleClaimsList.map(item => item.dataSecond)
                let arr4 = res.sensitiveDataList ? res.sensitiveDataList.map(item => {
                    return {
                        name: item.dataFirst,
                        value: item.dataSecond
                    }
                }) : []
                this.list[0].num = res.riskTimesCxTotal
                this.list[0].percentage = res.riskTimesCxRata
                this.list[1].num = res.riskRepeatTotal
                this.list[1].percentage = res.riskRepeatRata
                this.list[2].num = res.riskTimesSpTotal
                this.list[2].percentage = res.riskTimesSpRata
                this.list[3].num = res.riskNewUserTotal
                this.list[3].percentage = res.riskNewUserRata
                this.list[4].num = res.riskSensitiveTotal
                this.list[4].percentage = res.riskSensitiveRata
                this.list[5].num = res.riskDelayUnitTotal
                this.list[5].percentage = res.riskDelayUnitRata
                this.list[6].num = res.riskUnTakeEffectTotal
                this.list[6].percentage = res.riskUnTakeEffectRata
                let arr5_x = res.monthTotalMoneyDataList.map(item => item.dataFirst)
                let arr5_y = res.monthTotalMoneyDataList.map(item => item.dataSecond)
                let arr6 = res.caseTypeDataList ? res.caseTypeDataList.map(item => {
                    return {
                        name: item.dataFirst,
                        value: item.dataSecond
                    }
                }) : []
                let arr7_x = res.typeDataList ? res.typeDataList.map(item => {
                    return {
                        name: item.dataFirst
                    }
                }) : []
                let arr7_y = res.typeDataList ? res.typeDataList.map(item => Number(item.dataSecond)) : []
                let arr8_x = res.closeRataDataList.map(item => item.dataFirst)
                let arr8_y = res.closeRataDataList.map(item => Number(item.dataSecond))
                let arr9_x = res.workTypeDataList.map(item => item.dataFirst)
                let arr9_y = res.workTypeDataList.map(item => Number(item.dataSecond))
                let arr10_x = res.memberAgeDataList.map(item => item.dataFirst)
                let arr10_y = res.memberAgeDataList.map(item => Number(item.dataSecond))
                let arr11_x = res.areaDataList ? res.areaDataList.map(item => {
                    return {
                        name: item.dataFirst,
                        code: item.dataThird,
                        value: item.dataThird
                    }
                }) : []
                this.$nextTick(() => {
                    this.setChart1(arr1_x, arr1_y)
                    this.setChart2(arr2_x, arr2_y)
                    this.setChart3(arr3_x, arr3_y)
                    this.setChartWord(arr4)
                    this.setChartLipeijine(arr5_x, arr5_y)
                    this.setChartAnjianleixing(arr6)
                    this.setChartShiguleixing(arr7_x, arr7_y)
                    this.setChartJieanlv(arr8_x, arr8_y)
                    this.setChartGonghzong(arr9_x, arr9_y)
                    this.setChartNianlin(arr10_x, arr10_y)
                    this.setChartDiqu(arr11_x)
                })
            })
      },
      getData() {
          getInsuranceDataVO()
              .then(res => {
                  this.info = res
              })
      },
    changeDataType(type){
      this.dateType = type
    },
    setChartLipeijine () {
    setChartLipeijine (xData, yData) {
      const chartDom = document.getElementById('tuLipeijine')
      const myChart = echarts.init(chartDom)
      const option = this.getBarOption(['2024-05', '2024-06', '2024-07', '2024-08', '2024-09', '2024-10', '2024-11', '2024-12', '2025-01', '2025-02', '2025-03', '2025-04'],
          [1320, 1322, 1031, 1344, 950, 2360, 210,1320, 1322, 1031, 1344, 950],'#5470c5')
      const option = this.getBarOption(xData, yData,'#5470c5')
      option && myChart.setOption(option)
      window.addEventListener('resize', function () {//执行
        myChart.resize()
      })
    },
    setChartDiqu () {
    setChartDiqu (mapData) {
      const chartDom = document.getElementById('tuDiqu')
      const myChart = echarts.init(chartDom)
      echarts.registerMap('china', chinaJSON)
      const mapData = [
        { name: '北京市', code: '110000', value: 100 },
        { name: '天津市', code: '120000', value: 200 },
        { name: '上海市', code: '310000', value: 300 },
        { name: '重庆市', code: '500000', value: 400 },
        { name: '河北省', code: '130000', value: 500 },
        { name: '河南省', code: '410000', value: 600 },
        { name: '云南省', code: '530000', value: 10 },
        { name: '辽宁省', code: '210000', value: 20 },
        { name: '黑龙江省', code: '230000', value: 30 },
        { name: '湖南省', code: '430000', value: 40 },
        { name: '安徽省', code: '340000', value: 60 },
        { name: '山东省', code: '370000', value: 50 },
        { name: '新疆维吾尔自治区', code: '650000', value: 70 },
        { name: '江苏省', code: '320000', value: 10 },
        { name: '浙江省', code: '330000', value: 20 },
        { name: '江西省', code: '360000', value: 30 },
        { name: '湖北省', code: '420000', value: 40 },
        { name: '广西壮族自治区', code: '450000', value: 0 },
        { name: '甘肃省', code: '620000', value: 0 },
        { name: '山西省', code: '140000', value: 0 },
        { name: '内蒙古自治区', code: '150000', value: 0 },
        { name: '陕西省', code: '610000', value: 0 },
        { name: '吉林省', code: '220000', value: 0 },
        { name: '福建省', code: '350000', value: 0 },
        { name: '贵州省', code: '520000', value: 0 },
        { name: '广东省', code: '440000', value: 0 },
        { name: '青海省', code: '630000', value: 0 },
        { name: '西藏自治区', code: '540000', value: 0 },
        { name: '宁夏回族自治区', code: '640000', value: 0 },
        { name: '四川省', code: '510000', value: 0 },
        { name: '宁夏省', code: '640000', value: 0 },
        { name: '海南省', code: '460000', value: 0 },
        { name: '台湾省', code: '710000', value: 0 },
        { name: '香港特别行政区', code: '810000', value: 0 },
        { name: '澳门特别行政区', code: '820003', value: 0 },
        { name: '南海诸岛', code: '', value: 0 }
      ]
      // const mapData = [
      //   { name: '北京市', code: '110000', value: 100 },
      //   { name: '天津市', code: '120000', value: 200 },
      //   { name: '上海市', code: '310000', value: 300 },
      //   { name: '重庆市', code: '500000', value: 400 },
      //   { name: '河北省', code: '130000', value: 500 },
      //   { name: '河南省', code: '410000', value: 600 },
      //   { name: '云南省', code: '530000', value: 10 },
      //   { name: '辽宁省', code: '210000', value: 20 },
      //   { name: '黑龙江省', code: '230000', value: 30 },
      //   { name: '湖南省', code: '430000', value: 40 },
      //   { name: '安徽省', code: '340000', value: 60 },
      //   { name: '山东省', code: '370000', value: 50 },
      //   { name: '新疆维吾尔自治区', code: '650000', value: 70 },
      //   { name: '江苏省', code: '320000', value: 10 },
      //   { name: '浙江省', code: '330000', value: 20 },
      //   { name: '江西省', code: '360000', value: 30 },
      //   { name: '湖北省', code: '420000', value: 40 },
      //   { name: '广西壮族自治区', code: '450000', value: 0 },
      //   { name: '甘肃省', code: '620000', value: 0 },
      //   { name: '山西省', code: '140000', value: 0 },
      //   { name: '内蒙古自治区', code: '150000', value: 0 },
      //   { name: '陕西省', code: '610000', value: 0 },
      //   { name: '吉林省', code: '220000', value: 0 },
      //   { name: '福建省', code: '350000', value: 0 },
      //   { name: '贵州省', code: '520000', value: 0 },
      //   { name: '广东省', code: '440000', value: 0 },
      //   { name: '青海省', code: '630000', value: 0 },
      //   { name: '西藏自治区', code: '540000', value: 0 },
      //   { name: '宁夏回族自治区', code: '640000', value: 0 },
      //   { name: '四川省', code: '510000', value: 0 },
      //   { name: '宁夏省', code: '640000', value: 0 },
      //   { name: '海南省', code: '460000', value: 0 },
      //   { name: '台湾省', code: '710000', value: 0 },
      //   { name: '香港特别行政区', code: '810000', value: 0 },
      //   { name: '澳门特别行政区', code: '820003', value: 0 },
      //   { name: '南海诸岛', code: '', value: 0 }
      // ]
      const option = {
        tooltip: {
          trigger: 'item',
@@ -344,7 +438,7 @@
        myChart.resize()
      })
    },
    setChartAnjianleixing () {
    setChartAnjianleixing (data) {
      const chartDom = document.getElementById('tuAnjianleixing')
      const myChart = echarts.init(chartDom)
      const option = {
@@ -377,11 +471,7 @@
        },
        series: [
          {
            data: [{ value: 1048, name: 'Search Engine' },
              { value: 735, name: 'Direct' },
              { value: 580, name: 'Email' },
              { value: 484, name: 'Union Ads' },
              { value: 300, name: 'Video Ads' }],
            data,
            type: 'pie',
            areaStyle: {},
            smooth: true
@@ -394,23 +484,13 @@
        myChart.resize()
      })
    },
    setChartShiguleixing () {
    setChartShiguleixing (indicator, value) {
        if (indicator.length === 0) return;
      var chartDom = document.getElementById('tuShiguleixing');
      var myChart = echarts.init(chartDom);
      var option = {
        // legend: {
        //   data: ['Allocated Budget', 'Actual Spending']
        // },
        radar: {
          // shape: 'circle',
          indicator: [
            {name: '交通事故', max: 16500},
            {name: '工地受伤', max: 16000},
            {name: '意外受伤', max: 30000},
            {name: '其他事故', max: 38000},
            {name: '医疗事故', max: 52000},
            {name: '自然灾害', max: 25000}
          ]
          indicator
        },
        tooltip: {
          trigger: 'item'
@@ -421,7 +501,7 @@
            type: 'radar',
            data: [
              {
                value: [4200, 3000, 20000, 35000, 50000, 18000],
                value,
                name: ''
              }
            ]
@@ -433,16 +513,16 @@
        myChart.resize()
      })
    },
    setChartJieanlv () {
    setChartJieanlv (xData, yData) {
      const chartDom = document.getElementById('tuJieanlv')
      const myChart = echarts.init(chartDom)
      const option = this.getLineOption(['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], [120, 132, 101, 134, 90, 230, 210],'rgba(207,58,24,0.83)')
      const option = this.getLineOption(xData, yData,'rgba(207,58,24,0.83)')
      option && myChart.setOption(option)
      window.addEventListener('resize', function () {//执行
        myChart.resize()
      })
    },
    setChartGonghzong () {
    setChartGonghzong (dataX, dataY) {
      var chartDom = document.getElementById('tuGongzhong');
      var myChart = echarts.init(chartDom);
      var option = {
@@ -458,7 +538,7 @@
        },
        yAxis: {
          type: 'category',
          data: ['Brazil', 'Indonesia', 'USA', 'India', 'China', 'World']
          data: dataX
        },
        series: [
          {
@@ -467,7 +547,7 @@
            itemStyle: {
              color:  '#f6d68d'
            },
            data: [18203, 23489, 29034, 104970, 131744, 630230]
            data: dataY
          }
        ]
      }
@@ -476,16 +556,16 @@
        myChart.resize()
      })
    },
    setChartNianlin () {
    setChartNianlin (dataX, dataY) {
      const chartDom = document.getElementById('tuNianlin')
      const myChart = echarts.init(chartDom)
      const option = this.getBarOption(['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], [120, 132, 101, 134, 90, 230, 210],'#80d3ff')
      const option = this.getBarOption(dataX, dataY,'#80d3ff')
      option && myChart.setOption(option)
      window.addEventListener('resize', function () {//执行
        myChart.resize()
      })
    },
    setChartWord () {
    setChartWord (data) {
      // const color = ['#1890FF', '#13C2C2', '#2FC25B', '#009DFF', '#8496FA']
      const myChart = echarts.init(document.getElementById('wordchart'))
      var option = {
@@ -530,56 +610,33 @@
            //    }
            //  },
            // data格式是一个数组
            data: [{
              name: '红色',
              value: 200
            },
            {
              name: '蓝色',
              value: 300
            },
            {
              name: '测试',
              value: 600
            },
            {
              name: '重大事故',
              value: 500
            }
            ]
            data
          }
        ]
      }
      myChart.setOption(option)
    },
    setChart1 () {
    setChart1 (xdata, ydata) {
      const chartDom = document.getElementById('tu1')
      const myChart = echarts.init(chartDom)
      var ydata = [2, 7, 3, 12, 16, 9, 6]
      var xdata = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      const option = this.getLineOption(xdata,ydata,'#50A850')
      const option = this.getLineOption(xdata, ydata,'#50A850')
      option && myChart.setOption(option)
      window.addEventListener('resize', function () {//执行
        myChart.resize()
      })
    },
    setChart2 () {
    setChart2 (xdata, ydata) {
      const chartDom = document.getElementById('tu2')
      const myChart = echarts.init(chartDom)
      var ydata = [2, 7, 3, 12, 16, 9, 6]
      var xdata = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      const option = this.getLineOption(xdata,ydata,'#f07e6f')
      option && myChart.setOption(option)
      window.addEventListener('resize', function () {//执行
        myChart.resize()
      })
    },
    setChart3 () {
    setChart3 (xdata, ydata) {
      const chartDom = document.getElementById('tu3')
      const myChart = echarts.init(chartDom)
      var ydata = [2, 7, 3, 12, 16, 9, 6]
      var xdata = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      const option = this.getLineOption(xdata,ydata,'#8951be')
      option && myChart.setOption(option)
      window.addEventListener('resize', function () {//执行