提交一把订单

jiangping

2025-05-30 500832387dd658dcfa5ca2ccca602208c16f6802

 company/src/views/business/dataBoard.vue

@@ -46,7 +46,7 @@
                    <i class="el-icon-info"></i>
                </div>
                <div class="box_chart_item_price">¥2,345,654.00</div>
                <div class="box_chart_item_tu" id="tu1"></div>
                <div class="box_chart_item_tu" style="height: 132px" id="tu1"></div>
            </div>
            <div class="box_chart_item">
                <div class="box_chart_item_info">
@@ -54,7 +54,7 @@
                    <i class="el-icon-info"></i>
                </div>
                <div class="box_chart_item_price">1,234</div>
                <div class="box_chart_item_tu" id="tu2"></div>
                <div class="box_chart_item_tu"  style="height: 132px"  id="tu2"></div>
            </div>
            <div class="box_chart_item">
                <div class="box_chart_item_info">
@@ -62,7 +62,7 @@
                    <i class="el-icon-info"></i>
                </div>
                <div class="box_chart_item_price">10.5天</div>
                <div class="box_chart_item_tu" id="tu3"></div>
                <div class="box_chart_item_tu"   style="height: 132px"  id="tu3"></div>
            </div>
        </div>
        <div class="box_shuju">
@@ -92,12 +92,12 @@
            <div class="box_content_left">
                <div class="box_content_left_title">风险案件监控</div>
                <div class="box_content_left_list">
                    <div class="box_content_left_list_item" :style="{ backgroundColor: item.backgroundColor }" v-for="(item, index) in list" :key="index">
                        <div class="box_content_left_list_item_top">
                    <div class="box_content_left_list_item"   :style="{ backgroundColor: item.title!= ''? item.backgroundColor :'#fff'}" v-for="(item, index) in list" :key="index">
                        <div class="box_content_left_list_item_top" v-if="item.title != ''" >
                            <span>{{item.title}}</span>
                            <span :style="{ color: item.color }">{{item.num}}</span>
                        </div>
                        <div class="box_content_left_list_item_bottom">
                        <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%
@@ -107,7 +107,60 @@
                </div>
            </div>
            <div class="box_content_right">
                <div class="box_content_right_title">风险案件监控</div>
                <div class="box_content_right_title">风险案件敏感词</div>
                <div class="box_chart_item_tu" id="wordchart"></div>
            </div>
        </div>
      <div class="box_chart" style="height: 500px">
        <div class="box_chart_item" style=" width:59%;height: 100%">
          <div class="box_content_right_title" style="width: 100%;display: flex">
            <div style="flex: 1">理赔金额趋势</div>
            <div style="flex: 1; text-align: right">
              <span :class="dateType == 0?'seldatetype':'datetype'" @click="changeDataType(0)">近一月</span>
              <span :class="dateType == 1?'seldatetype':'datetype'"  @click="changeDataType(1)">近一年</span>
            </div>
          </div>
          <div class="box_chart_item_tu" id="tuLipeijine" style="width: 100%;height: 90%" ></div>
        </div>
        <div class="box_chart_item"   style=" width: 40%;height: 100%" >
          <div class="box_content_right_title" >
            <span>地区分布</span>
          </div>
          <div class="box_chart_item_tu" style="width: 100%;height: 100%" id="tuDiqu"></div>
        </div>
      </div>
      <div class="box_chart" >
        <div class="box_chart_item" style="height: 400px">
          <div class="box_content_right_title">
            <span>各类型案件分布</span>
          </div>
          <div class="box_chart_item_tu" id="tuAnjianleixing"></div>
        </div>
        <div class="box_chart_item"  style="height: 400px">
          <div class="box_content_right_title">
            <span>事故类型分布</span>
          </div>
          <div class="box_chart_item_tu" id="tuShiguleixing"></div>
        </div>
        <div class="box_chart_item"  style="height: 400px">
          <div class="box_content_right_title">
            <span>结案率分析</span>
          </div>
          <div class="box_chart_item_tu" id="tuJieanlv"></div>
        </div>
      </div>
      <div class="box_chart">
        <div class="box_chart_item" style=" width: 49.5%;height: 400px;">
          <div class="box_content_right_title"  >
            <span>工种出险TOP10</span>
          </div>
          <div class="box_chart_item_tu" id="tuGongzhong"></div>
        </div>
        <div class="box_chart_item"  style=" width: 49.5%;height: 400px;">
          <div class="box_content_right_title">
            <span>出险人年龄分布</span>
          </div>
          <div class="box_chart_item_tu" id="tuNianlin"></div>
            </div>
        </div>
    </div>
@@ -115,10 +168,13 @@

<script>
    import * as echarts from 'echarts'
import 'echarts-wordcloud'
import chinaJSON from '@/assets/china.json'
    export default {
        name: "dataBoard",
  name: 'dataBoard',
        data() {
            return {
      dateType:0,
                list: [
                    {
                        title: '多次出险',
@@ -129,7 +185,7 @@
                    {
                        title: '重复报案',
                        num: 0,
                        color: '#EA580C',
          color: '#d6f7e5',
                        backgroundColor: '#FFF7ED'
                    },
                    {
@@ -139,22 +195,34 @@
                        backgroundColor: '#FEFCE8'
                    },
                    {
                        title: '多次出险',
          title: '新员工出险',
          num: 0,
          color: '#3ea570',
          backgroundColor: '#d6f7e5'
        },
        {
          title: '敏感词',
                        num: 0,
                        color: '#2563EB',
                        backgroundColor: '#EFF6FF'
                    },
                    {
                        title: '新员工出险',
                        num: 0,
                        color: '#9333EA',
                        backgroundColor: '#FAF5FF'
                    },
                    {
                        title: '延迟报案',
                        num: 0,
                        color: '#4F46E5',
                        backgroundColor: '#EEF2FF'
        },
        {
          title: '新员工保障条款',
          num: 0,
          color: '#9333EA',
          backgroundColor: '#FAF5FF'
        },
        {
          title: '',
          num: 0,
          color: '#9333EA',
          backgroundColor: '#FAF5FF'
                    }
                ]
            }
@@ -164,14 +232,116 @@
                this.setChart1()
                this.setChart2()
                this.setChart3()
      this.setChartLipeijine()
      this.setChartDiqu()
      this.setChartAnjianleixing()
      this.setChartShiguleixing()
      this.setChartJieanlv()
      this.setChartGonghzong()
      this.setChartNianlin()
      this.setChartWord()
            })
        },
        methods: {
            setChart1() {
                const chartDom = document.getElementById('tu1')
    changeDataType(type){
      this.dateType = type
    },
    setChartLipeijine () {
      const chartDom = document.getElementById('tuLipeijine')
                const myChart = echarts.init(chartDom)
                let option
                option = {
      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')
      option && myChart.setOption(option)
    },
    setChartDiqu () {
      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 option = {
        tooltip: {
          trigger: 'item',
          formatter: '{b}<br/>{c}'
        },
        // toolbox: {
        //   show: true,
        //   orient: 'vertical',
        //   left: 'right',
        //   top: 'center',
        //   feature: {
        //     dataView: { readOnly: false },
        //     restore: {},
        //     saveAsImage: {}
        //   }
        // },
        visualMap: {
          top: 100,
          left: 'right',
          // min: 0,
          // max: 50000,
          // text: ['High', 'Low'],
          // realtime: false,
          calculable: true,
          show: false,
          inRange: {
            color: ['lightskyblue', 'yellow', 'orangered']
          }
        },
        series: [
          {
            name: '地区分布',
            type: 'map',
            map: 'china',
            label: {
              show: true
            },
            data: mapData
          }
        ]
      }
      myChart.setOption(option)
    },
    setChartAnjianleixing () {
      const chartDom = document.getElementById('tuAnjianleixing')
      const myChart = echarts.init(chartDom)
      const option = {
                    grid: {
                        left: '3%',
                        right: '3%',
@@ -179,63 +349,215 @@
                        bottom: '0%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        label: {
          alignTo: 'edge',
          formatter: '{name|{b}}\n{time|{c} }',
          minMargin: 5,
          edgeDistance: 10,
          lineHeight: 15,
          rich: {
            time: {
              fontSize: 10,
              color: '#999'
            }
          }
                    },
                    yAxis: {
                        type: 'value'
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'right'
                    },
                    series: [
                        {
                            data: [2, 7, 3, 12, 16, 9, 6],
                            type: 'line',
            data: [{ value: 1048, name: 'Search Engine' },
              { value: 735, name: 'Direct' },
              { value: 580, name: 'Email' },
              { value: 484, name: 'Union Ads' },
              { value: 300, name: 'Video Ads' }],
            type: 'pie',
                            areaStyle: {},
                            smooth: true
                        }
                    ]
                }

      option && myChart.setOption(option)
    },
    setChartShiguleixing () {
      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}
          ]
        },
        tooltip: {
          trigger: 'item'
        },
        series: [
          {
            name: '事故类型分布',
            type: 'radar',
            data: [
              {
                value: [4200, 3000, 20000, 35000, 50000, 18000],
                name: ''
              }
            ]
          }
        ]
      }
      option && myChart.setOption(option);
    },
    setChartJieanlv () {
      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)')
      option && myChart.setOption(option)
    },
    setChartGonghzong () {
      var chartDom = document.getElementById('tuGongzhong');
      var myChart = echarts.init(chartDom);
      var option = {
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'value'
          // boundaryGap: [0, 0.01]
        },
        yAxis: {
          type: 'category',
          data: ['Brazil', 'Indonesia', 'USA', 'India', 'China', 'World']
        },
        series: [
          {
            name: '2025',
            type: 'bar',
            itemStyle: {
              color:  '#f6d68d'
            },
            data: [18203, 23489, 29034, 104970, 131744, 630230]
          }
        ]
      }
      option && myChart.setOption(option);
    },
    setChartNianlin () {
      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')
      option && myChart.setOption(option)
    },
    setChartWord () {
      // const color = ['#1890FF', '#13C2C2', '#2FC25B', '#009DFF', '#8496FA']
      const myChart = echarts.init(document.getElementById('wordchart'))
      var option = {
        backgroundColor: '#fff',
        series: [
          {
            type: 'wordCloud',
            sizeRange: [15, 70], // 用来调整字的大小范围
            rotationRange: [0, 0], // 每个词旋转的角度范围和旋转的步进
            rotationStep: 45,
            gridSize: 10, // 用来调整词之间的距离
            shape: 'pentagon', // shape这个属性虽然可配置，但是在词的数量不太多的时候，效果不明显，它会趋向于画一个椭圆
            // 位置的配置
            width: '100%',
            height: '100%',
            drawOutOfBound: false, // 允许词太大的时候，超出画布的范围
            layoutAnimation: true, // 布局的时候是否有动画
            textStyle: {
              // 颜色可以用一个函数来返回字符串，这里是随机色
            /*  color: function (v) {
                const index = Math.floor(Math.random() * color.length)
                return color[index]
              }, */
              fontFamily: 'sans-serif',
              fontWeight: 'bold',
              // Color可以是一个回调函数或一个颜色字符串
              color: function () {
                // Random color
                return 'rgb(' + [
                  Math.round(Math.random() * 160),
                  Math.round(Math.random() * 160),
                  Math.round(Math.random() * 160)
                ].join(',') + ')'
              }
            },
            // 划过添加的阴影，因为我不需要，因此注释了
            // emphasis: {
            //    focus: 'self',
            //    textStyle: {
            //        textShadowBlur: 10,
            //        textShadowColor: '#333'
            //    }
            //  },
            // data格式是一个数组
            data: [{
              name: '红色',
              value: 200
            },
            {
              name: '蓝色',
              value: 300
            },
            {
              name: '测试',
              value: 600
            },
            {
              name: '重大事故',
              value: 500
            }
            ]
          }
        ]

      }
      myChart.setOption(option)
    },
    setChart1 () {
      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')
                option && myChart.setOption(option)
            },
            setChart2() {
                const chartDom = document.getElementById('tu2')
                const myChart = echarts.init(chartDom)
                let option
                option = {
                    grid: {
                        left: '3%',
                        right: '3%',
                        top: '10%',
                        bottom: '0%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        {
                            data: [2, 7, 3, 12, 16, 9, 6],
                            type: 'line',
                            areaStyle: {},
                            smooth: true
                        }
                    ]
                }

      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)
            },
            setChart3() {
                const chartDom = document.getElementById('tu3')
                const myChart = echarts.init(chartDom)
                let option
                option = {
      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)
    },
    getBarOption(xd,yd,color){
      const option = {
                    grid: {
                        left: '3%',
                        right: '3%',
@@ -243,25 +565,80 @@
                        bottom: '0%',
                        containLabel: true
                    },
        legend: {},
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
          // boundaryGap: false,
          data: xd,
          axisLabel: {
            interval: 1 //
          }
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        {
                            data: [2, 7, 3, 12, 16, 9, 6],
                            type: 'line',
                            areaStyle: {},
            emphasis: {
              focus: 'series'
            },
            data: yd,
            type: 'bar',
            itemStyle: {
              color: color || '#f07e6f'
            },
                            smooth: true
                        }
                    ]
                }

                option && myChart.setOption(option)
      return option
    },
    getLineOption(xd,yd,color){
      const option = {
        grid: {
          left: '3%',
          right: '3%',
          top: '10%',
          bottom: '0%',
          containLabel: true
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {},
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: xd
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: yd,
            type: 'line',
            areaStyle: {
              opacity: 0.5,
              color: color || '#f07e6f'
            },
            lineStyle: {
              color: color || '#f07e6f'
            },
            smooth: true
          }
        ]
      }
      return option
            }
        }
    }
@@ -270,7 +647,8 @@
<style lang="scss" scoped>
    .box {
        width: 100%;
        padding: 0 10px;
        padding: 0 10px 30px 10px;

        box-sizing: border-box;
        .box_shua {
            width: 100%;
@@ -342,6 +720,22 @@
            align-items: center;
            justify-content: space-between;
            margin-top: 15px;
            .datetype{
              cursor: pointer;
              color: #8c939d;
              margin-right: 10px;
              padding: 2px 10px;
              font-size: 14px;
              border: solid 1px  #8c939d;
            }
            .seldatetype{
              cursor: pointer;
              color: #3170fe;
              margin-right: 10px;
              padding: 2px 10px;
              font-size: 14px;
              border: solid 1px  #3170fe;
            }
            .box_chart_item {
                width: 32.5%;
                height: 225px;
@@ -359,6 +753,12 @@
                        margin-right: 5px;
                    }
                }
              .box_content_right_title {
                font-weight: bold;
                font-size: 16px;
                color: #101010;
                margin-bottom: 15px;
              }
                .box_chart_item_price {
                    color: rgba(16,16,16,1);
                    font-size: 22px;
@@ -367,7 +767,7 @@
                }
                .box_chart_item_tu {
                    width: 100%;
                    height: 130px;
                    height: 90%;
                }
            }
        }
@@ -432,7 +832,7 @@
                    align-items: center;
                    justify-content: space-between;
                    .box_content_left_list_item {
                        width: 32%;
                        width: 24%;
                        height: 94px;
                        padding: 16px 20px;
                        box-sizing: border-box;
@@ -487,6 +887,10 @@
                    color: #101010;
                    margin-bottom: 15px;
                }
              .box_chart_item_tu {
                width: 100%;
                height: 130px;
              }
            }
        }
    }