提交一把订单

jiangping

2025-06-24 6d9ce36cc8cdc48256a7292fffea58286d409c33

提交一把订单

 company/.env.development

@@ -4,15 +4,15 @@
# æŽ¥å£å‰ç¼€
VUE_APP_API_PREFIX = '/yyb_admin_api'
VUE_APP_SYSTEM_TITLE = '云易保客户服务系统-平台端'
VUE_APP_CONTEXT_PATH = '/yyb_admin'
VUE_APP_CONTEXT_PATH = '/'

VUE_APP_COOKIE_NAME='dmplat-auth-token'

# æµ‹è¯•æœ
# VUE_APP_API = 'https://test.doumee.cn:8088/yyb_admin_api/'
VUE_APP_API = 'https://www.yyb.red/yyb_admin_api/'
#VUE_APP_API = 'https://www.yyb.red/yyb_admin_api/'

# ä»»åº·
# VUE_APP_API = 'http://192.168.0.129:10030/'
VUE_APP_API = 'http://192.168.0.132:10030/'

# VUE_APP_API = 'http://192.168.0.131:10031/'

 company/.env.developmentCom

@@ -13,6 +13,6 @@

# VUE_APP_API = 'http://192.168.0.138:10031/'

VUE_APP_API = 'http://192.168.0.129:10031/'
VUE_APP_API = 'http://192.168.0.132:10031/'

# VUE_APP_API = 'https://www.yyb.red/yyb_web_api/'

 company/src/api/business/insuranceApply.js

@@ -2,191 +2,212 @@

// æŸ¥è¯¢
export function fetchList (data) {
    return request.post('/business/insuranceApply/page', data, {
        trim: true
    })
  return request.post('/business/insuranceApply/page', data, {
    trim: true
  })
}
export function findAllApply(data) {
    return request.post('/business/insuranceApply/findListByDTO', data, {
        trim: true
    })
export function findAllApply (data) {
  return request.post('/business/insuranceApply/findListByDTO', data, {
    trim: true
  })
}

// ä¿®æ”¹
export function updateById (data) {
    return request.post('/business/insuranceApply/updateById', data)
  return request.post('/business/insuranceApply/updateById', data)
}

// æ–°å»º
export function create (data) {
    return request.post('/business/insuranceApply/create', data)
  return request.post('/business/insuranceApply/create', data)
}

export function check (data) {
    return request.post('/business/insuranceApply/check', data)
  return request.post('/business/insuranceApply/check', data)
}
export function back (data) {
    return request.post('/business/insuranceApply/back', data)
  return request.post('/business/insuranceApply/back', data)
}
export function backWtb(data) {
    return request.post('/business/insuranceApply/back', data)
export function backWtb (data) {
  return request.post('/business/insuranceApply/back', data)
}
export function closeWtbForShop (data) {
    return request.post('/business/insuranceApply/closeWtbForShop', data)
  return request.post('/business/insuranceApply/closeWtbForShop', data)
}

export function uploadToubaodan (data) {
    return request.post('/business/insuranceApply/uploadToubaodan', data)
  return request.post('/business/insuranceApply/uploadToubaodan', data)
}
export function uploadBaoxiandan(data) {
    return request.post('/business/insuranceApply/uploadBaoxiandan', data)
export function uploadBaoxiandan (data) {
  return request.post('/business/insuranceApply/uploadBaoxiandan', data)
}
export function editBaoxiandan(data) {
    return request.post('/business/insuranceApply/editBaoxiandan', data)
export function editBaoxiandan (data) {
  return request.post('/business/insuranceApply/editBaoxiandan', data)
}
export function dealBackApply(data) {
    return request.post('/business/insuranceApply/dealBackApply', data)
export function dealBackApply (data) {
  return request.post('/business/insuranceApply/dealBackApply', data)
}

// èŽ·å–保单止期与初始金额
export function getCountCyclePriceVO (data) {
    return request.post('/business/insuranceApply/getCountCyclePriceVO', data)
  return request.post('/business/insuranceApply/getCountCyclePriceVO', data)
}

// ç”³è¯·è®°å½•çŠ¶æ€å¤„理
export function applyOpt (data) {
    return request.post('/business/insuranceApply/applyOpt', data)
  return request.post('/business/insuranceApply/applyOpt', data)
}

export function exportDetailExcel (data) {
    return request.post('/business/insuranceApply/exportDetailExcel', data, {
        trim: true,
        download: true
    })
  return request.post('/business/insuranceApply/exportDetailExcel', data, {
    trim: true,
    download: true
  })
}
export function getDetail (id) {
    return request.get(`business/insuranceApply/${id}`)
  return request.get(`business/insuranceApply/${id}`)
}
export function getAddReduceData () {
  return request.get('business/insuranceApply/getAddReduceData')
}
export function getInsuranceNum () {
  return request.get('business/insuranceApply/getInsuranceNum')
}
export function getSettleClaimsMoney () {
  return request.get('business/insuranceApply/getSettleClaimsMoney')
}
export function getInsuranceMemberData () {
  return request.get('business/insuranceApply/getInsuranceMemberData')
}
export function getInsuranceApplyStatusData () {
  return request.get('business/insuranceApply/getInsuranceApplyStatusData')
}
export function getInsuranceApplyDataVO () {
  return request.get('business/insuranceApply/getInsuranceApplyDataVO')
}
export function getInsuranceApplyReportDataVO () {
  return request.get('business/insuranceApply/getInsuranceApplyReportDataVO')
}
export function getChangeDetail (id) {
    return request.get(`business/applyChange/${id}`)
  return request.get(`business/applyChange/${id}`)
}
export function getSignLink (id) {
    return request.get(`business/insuranceApply/getSignLink/${id}`)
  return request.get(`business/insuranceApply/getSignLink/${id}`)
}
export function getSignWTBTBDLink (data) {
    return request.post(`business/insuranceApply/getSignWTBTBDLink`,data)
  return request.post('business/insuranceApply/getSignWTBTBDLink', data)
}
export function getSignTBQRSLink (data) {
    // return request.get('/business/insuranceApply/signTBQRSLink')
    return request.post('/business/insuranceApply/signTBQRSLink', data)
  // return request.get('/business/insuranceApply/signTBQRSLink')
  return request.post('/business/insuranceApply/signTBQRSLink', data)
}
export function findListByDTO (data) {
    return request.post('/business/insuranceApply/findListByDTO', data)
  return request.post('/business/insuranceApply/findListByDTO', data)
}
export function getMemberListOnlineSignLink (data) {
    return request.post('/business/insuranceApply/getMemberListOnlineSignLink', data, {
        trim: true
    })
  return request.post('/business/insuranceApply/getMemberListOnlineSignLink', data, {
    trim: true
  })
}
export function getSignWTBTBDLinkk (data) {
    return request.post('/business/insuranceApply/getSignWTBTBDLinkk', data, {
        trim: true
    })
  return request.post('/business/insuranceApply/getSignWTBTBDLinkk', data, {
    trim: true
  })
}
export function getJiajianBaoSignLink (data) {
    return request.post('/business/applyChange/getJiajianBaoSignLink', data, {
        trim: true
    })
  return request.post('/business/applyChange/getJiajianBaoSignLink', data, {
    trim: true
  })
}

export function getChangeUnitSignLink (data) {
    return request.post('/business/applyChange/getChangeUnitSignLink', data, {
        trim: true
    })
  return request.post('/business/applyChange/getChangeUnitSignLink', data, {
    trim: true
  })
}
export function getDetailList (data) {
    return request.post('/business/applyDetail/list', data, {
        trim: true
    })
  return request.post('/business/applyDetail/list', data, {
    trim: true
  })
}
export function getChangeDetailList (data) {
    return request.post('/business/applyChagneDetail/list', data, {
        trim: true
    })
  return request.post('/business/applyChagneDetail/list', data, {
    trim: true
  })
}

// åˆ—表查询
export function findList (data) {
    return request.post('/business/applyDetail/findList', data)
  return request.post('/business/applyDetail/findList', data)
}

// ä¿®æ”¹
export function updateData (data) {
    return request.post('/business/insuranceApply/updateData', data)
  return request.post('/business/insuranceApply/updateData', data)
}

// åœ¨ä¿åˆ†é¡µæŸ¥è¯¢
export function applyDetailPage (data) {
    return request.post('/business/applyDetail/page', data)
  return request.post('/business/applyDetail/page', data)
}

// åŠ å‡ã€æ¢åœºåˆ†é¡µæŸ¥è¯¢
export function applyChagneDetailPage (data) {
    return request.post('/business/applyChagneDetail/page', data)
  return request.post('/business/applyChagneDetail/page', data)
}
// å¯¼å‡ºåœ¨ä¿äººå‘˜è¯¦å•Excel
export function exportExcel (data) {
    return request.post('/business/applyDetail/exportExcel', data, {
        trim: true,
        download: true
    })
  return request.post('/business/applyDetail/exportExcel', data, {
    trim: true,
    download: true
  })
}
export function exportJiajianBaoExcel (data) {
    return request.post('/business/applyChange/exportJiajianBaoExcel', data, {
        trim: true,
        download: true
    })
  return request.post('/business/applyChange/exportJiajianBaoExcel', data, {
    trim: true,
    download: true
  })
}
export function backChagne (data) {
    return request.post('/business/applyChange/back', data, {
        trim: true
    })
  return request.post('/business/applyChange/back', data, {
    trim: true
  })
}
export function editChangePidan (data) {
    return request.post('/business/applyChange/editPidan', data, {
        trim: true
    })
  return request.post('/business/applyChange/editPidan', data, {
    trim: true
  })
}
export function uploadChangePidan (data) {
    return request.post('/business/applyChange/uploadPidan', data, {
        trim: true
    })
  return request.post('/business/applyChange/uploadPidan', data, {
    trim: true
  })
}
export function dealBackChangeApply (data) {
    return request.post('/business/applyChange/dealBackApply', data, {
        trim: true
    })
  return request.post('/business/applyChange/dealBackApply', data, {
    trim: true
  })
}
export function exportChangeUnitExcel (data) {
    return request.post('/business/applyChange/exportChangeUnitExcel', data, {
        trim: true,
        download: true
    })
  return request.post('/business/applyChange/exportChangeUnitExcel', data, {
    trim: true,
    download: true
  })
}

// å¯¼å‡ºExcel
export function applyChagneDetailExcel (data) {
    return request.post('/business/applyChagneDetail/exportExcel', data, {
        trim: true,
        download: true
    })
  return request.post('/business/applyChagneDetail/exportExcel', data, {
    trim: true,
    download: true
  })
}
// æŸ¥è¯¢ä¿å•æ˜¯å¦å¯è¿›è¡ŒåŠ å‡ä¿
export function getApplyPower (data) {
    return request.post('/business/insuranceApply/getApplyPower', data)
  return request.post('/business/insuranceApply/getApplyPower', data)
}

// æŠ•ä¿å¤å®¡
export function reexamineCheck (data) {
    return request.post('/business/insuranceApply/reexamineCheck', data)
  return request.post('/business/insuranceApply/reexamineCheck', data)
}

 company/src/components/common/upload.vue

@@ -12,7 +12,11 @@
                <i class="el-icon-plus"></i>
            </div>
        </div>
        <input type="file" ref="file" :accept="accept" @change="getFile" />
        <div style="display: block;">
          <input type="file" ref="file" :accept="accept" @change="getFile" />
          <progress id="progressBar" value="0" max="100"></progress>
          <span id="status">0%</span>
        </div>
    </div>
</template>

@@ -57,17 +61,29 @@
    },
    getFile (e) {
      if (e.target && e.target.files.length > 0) {
          const loading = this.$loading({
              lock: true,
              text: '上传中，请等待',
              spinner: 'el-icon-loading',
              background: 'rgba(0, 0, 0, 0.7)'
          });
        this.$emit('loading')
        const config = {
          onUploadProgress: function(progressEvent) {
            console.log(progressEvent)
            const percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total);
            document.getElementById('progressBar').value = percentCompleted;
            document.getElementById('status').textContent = percentCompleted + '%';
          },
          headers: {
            'Content-Type': 'multipart/form-data'
          }
        }

        // const loading = this.$loading({
        //       lock: true,
        //       text: '上传中，请等待',
        //       spinner: 'el-icon-loading',
        //       background: 'rgba(0, 0, 0, 0.7)'
        //   });
        // this.$emit('loading')
        const formdate = new FormData()
        formdate.append('file', e.target.files[0])
        formdate.append('folder', this.folder)
        axios.post(this.uploadImgUrl, formdate)
        axios.post(this.uploadImgUrl, formdate,config)
          .then(res => {
            this.$emit('success', res.data.data)
          })
@@ -75,7 +91,7 @@
            this.$message.error(e)
          })
          .finally(() => {
              loading.close();
            // loading.close();
            this.$refs.file.value = null
          })
      }

 company/src/views/business/dataBoardInusurance.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,648 @@
<template>
    <div class="box">
        <div class="box_shua">
            <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_item">
                    <div class="box_head_list_item_top">
                        <span>累计投保企业</span>
                        <span>本月 +{{info.monthAddInsuranceCompanyNum || 0}}</span>
                    </div>
                    <div class="box_head_list_item_bottom">{{info.insuranceCompanyNum || 0}}</div>
                </div>
                <div class="box_head_list_item">
                    <div class="box_head_list_item_top">
                        <span>累计有效保单</span>
                        <span>本月 +{{info.monthAddInsuranceNum || 0 }}</span>
                    </div>
                    <div class="box_head_list_item_bottom">{{info.insuranceNum || 0}}</div>
                </div>
                <div class="box_head_list_item">
                    <div class="box_head_list_item_top">
                        <span>累计保障人员</span>
                        <span>本月 +{{info.monthAddMemberNum || 0}}</span>
                    </div>
                    <div class="box_head_list_item_bottom">{{info.memberNum || 0}}</div>
                </div>
                <div class="box_head_list_item">
                    <div class="box_head_list_item_top">
                        <span>合计总费用(元)</span>
                        <span>本月 +Â¥{{info.monthAddTotalFee || 0}}</span>
                    </div>
                    <div class="box_head_list_item_bottom">Â¥{{info.totalFee || 0}}</div>
                </div>
            </div>
        </div>
        <div class="box_content">
            <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.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>
                        </div>
                        <div class="box_content_left_list_item_bottom" v-if="item.title!= ''">
                            <span>{{item.num}}</span>
                        </div>
                    </div>
                </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="tu1" ></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="tu2"></div>
        </div>
      </div>
      <div class="box_chart">
        <div class="box_chart_item" style=" width: 49.5%;height: 600px;">
          <div class="box_content_right_title"  >
            <span>累计企业投保金额top10</span>
          </div>
          <div class="box_chart_item_tu" id="tu3"></div>
        </div>
        <div class="box_chart_item"  style=" width: 49.5%;height: 600px;">
          <div class="box_content_right_title">
            <span>热门保险方案</span>
          </div>
          <div class="box_chart_item_tu" >
            <el-table
                v-loading="isWorking"
                :data="dataList"
                stripe
            >
              <el-table-column label="排名" width="80px">
                <template slot-scope="scope">
                  <span>{{scope.$index + 1}}</span>
                </template>
              </el-table-column>
              <el-table-column prop="name" label="子方案名称" min-width="100px">
                <template slot-scope="{row}" >{{row.solutions.name||''}}</template>
              </el-table-column>
              <el-table-column prop="solutionBaseName" label="所属主方案" min-width="100px">
                <template slot-scope="{row}">{{row.solutions.solutionBaseName}}</template>
              </el-table-column>
              <el-table-column prop="price" label="方案费用" min-width="100px">
                <template slot-scope="{row}">
                  <span v-if="row.solutions.timeUnit == 3">   {{row.solutions.price ||0}}/人/å¹´</span>
                  <span v-else-if="row.solutions.timeUnit == 2">   {{row.solutions.price ||0}}/人/月</span>
                  <span v-else-if="row.solutions.timeUnit == 1">   {{row.solutions.price ||0}}/人/半月</span>
                  <span v-else>   {{row.solutions.fee ||0}}/人/天</span>
                </template>
              </el-table-column>
              <el-table-column prop="dataSecond" label="使用数量" min-width="100px"></el-table-column>
            </el-table>
          </div>
        </div>
      </div>
    </div>
</template>

<script>
import * as echarts from 'echarts'
import 'echarts-wordcloud'
import { getInsuranceApplyDataVO, getInsuranceApplyReportDataVO } from '@/api/business/insuranceApply'
export default {
  name: 'dataBoard',
  data () {
    return {
      isWorking: false,
      dataList: [],
      dateType: 0,
      list: [
        {
          title: '在保企业数',
          num: 0,
          percentage: 0,
          color: '#EF4444',
          backgroundColor: '#fdf6ec'
        },
        {
          title: '在保保单数',
          num: 0,
          percentage: 0,
          color: '#368157',
          backgroundColor: '#fcfbe7'
        },
        {
          title: '在保人数',
          num: 0,
          percentage: 0,
          color: '#CA8A04',
          backgroundColor: '#d6f7e5'
        },
        {
          title: '',
          num: 0,
          color: '#9333EA',
          backgroundColor: '#FAF5FF'
        }
      ],
      info: {},
      tu1Data: [{ name: '直保', value: 0 }, { name: '委托保', value: 0 }],
      chatData: null
    }
  },
  created () {
    this.$nextTick(() => {
      this.setChartTu1(this.tu1Data)
      this.setChartTu2(['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
        , [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
        , [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0])
      this.setChartTu3([]
        , [])
      // this.setChartTu4([],[])
    })
    this.getInsuranceApplyReportDataVO()
    this.getInsuranceApplyDataVO()
  },
  methods: {
    getInsuranceApplyDataVO () {
      getInsuranceApplyDataVO()
        .then(res => {
          this.info = res
          this.info.monthAddTotalFee = (res.monthAddTotalFee || 0).toFixed(2)
          this.info.totalFee = (res.totalFee || 0).toFixed(2)
          this.list[0].num = this.info.useCompanyNum || 0
          this.list[1].num = this.info.useInsuranceNum || 0
          this.list[2].num = this.info.useMemberNum || 0
          this.tu1Data[0].value = this.info.zbInsuranceNum || 0
          this.tu1Data[1].value = this.info.wtbInsuranceNum || 0
          this.setChartTu1(this.tu1Data)
          console.log(res)
        })
    },
    getInsuranceApplyReportDataVO () {
      getInsuranceApplyReportDataVO()
        .then(res => {
          this.initChartData2(res)
          this.initChartData3(res)
          this.initChartData4(res)
        })
    },
    initChartData4(res){
      this.dataList = res.hotSolutionList || []
    },
    initChartData2 (res) {
      var monthAddReduceList = res.monthAddReduceList || []
      if (monthAddReduceList.length > 0) {
        var data1 = []
        var data2 = []
        var data3 = []
        monthAddReduceList.forEach(item => {
          data1.push(item.dataFirst)
          data2.push(item.dataSecond)
          data3.push(item.dataThird)
        })
        this.setChartTu2(data1, data2, data3)
      }
    },
    initChartData3 (res) {
      var companyTopFeeList = res.companyTopFeeList || []
      if (companyTopFeeList.length > 0) {
        var data1 = []
        var data2 = []
        companyTopFeeList.forEach(item => {
          data1.push(item.dataFirst)
          data2.push(item.dataSecond)
        })
        this.setChartTu3(data1, data2)
      }
    },
    changeDataType (type) {
      this.dateType = type
    },
    setChartTu1 (data) {
      const chartDom = document.getElementById('tu1')
      const myChart = echarts.init(chartDom)
      const option = {
        tooltip: {
          trigger: 'item'
        },
        label: {
          alignTo: 'edge',
          formatter: '{b}: ({d}%)',
          minMargin: 5,
          edgeDistance: 10,
          lineHeight: 15,
          rich: {
            time: {
              fontSize: 10,
              color: '#999'
            }
          }
        },
        labelLine: {
          length: 15,
          length2: 0,
          maxSurfaceAngle: 80
        },
        legend: {
          top: '5%',
          left: 'center'
        },
        series: [
          {
            name: '直保和委托保占比',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            // label: {
            //   show: false,
            //   position: 'center'
            // },
            // emphasis: {
            //   label: {
            //     show: true,
            //     fontSize: 40,
            //     fontWeight: 'bold'
            //   }
            // },
            // labelLine: {
            //   show: true
            // },
            data: data
          }
        ]
      }
      option && myChart.setOption(option)
      window.addEventListener('resize', function () { // æ‰§è¡Œ
        myChart.resize()
      })
    },
    setChartTu2 (xData, yData, yData2) {
      const chartDom = document.getElementById('tu2')
      const myChart = echarts.init(chartDom)
      const option = this.getBarOption2(xData, yData, yData2, 'rgba(207,58,24,0.83)')
      option && myChart.setOption(option)
      window.addEventListener('resize', function () { // æ‰§è¡Œ
        myChart.resize()
      })
    },
    setChartTu3 (dataX, dataY) {
      var chartDom = document.getElementById('tu3')
      var myChart = echarts.init(chartDom)
      var option = {
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        xAxis: {
          // position: 'top',
          type: 'value'
          // boundaryGap: [0, 0.01]
        },
        yAxis: {
          type: 'category',
          data: dataX,
          inverse: true
        },
        series: [
          {
            name: '金额(元)',
            type: 'bar',
            itemStyle: {
              color: '#f6d68d'
            },
            data: dataY
          }
        ]
      }
      option && myChart.setOption(option)
      window.addEventListener('resize', function () { // æ‰§è¡Œ
        myChart.resize()
      })
    },
    getBarOption2 (xd, yd, yd1, 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: 'bar',
            areaStyle: {
              opacity: 0.5,
              color: color || '#f07e6f'
            },
            lineStyle: {
              color: color || '#f07e6f'
            }
          },
          {
            data: yd1,
            type: 'bar',
            areaStyle: {
              opacity: 0.5,
              color: color || '#f07e6f'
            },
            lineStyle: {
              color: color || '#f07e6f'
            }
          }
        ]
      }
      return option
    }
  }
}
</script>

<style lang="scss" scoped>
    .box {
        width: 100%;
        padding: 0 10px 30px 10px;

        box-sizing: border-box;
        .box_shua {
            width: 100%;
            display: flex;
            justify-content: end;
            margin-bottom: 10px;
        }
        .box_head {
            width: 100%;
            padding: 0 15px 15px 15px;
            box-sizing: border-box;
            background-color: #ffffff;
            border-radius: 20px;
            display: flex;
            flex-direction: column;
            box-shadow: 0 2px 6px 0 rgba(206,206,206,0.21);
            .box_head_info {
                width: 100%;
                display: flex;
                align-items: center;
                margin: 8px 0;
                span {
                    color: rgba(16,16,16,1);
                    font-size: 14px;
                    margin-left: 5px;
                }
            }
            .box_head_list {
                width: 100%;
                display: flex;
                align-items: center;
                justify-content: space-between;
                .box_head_list_item {
                    width: 24%;
                    height: 100px;
                    padding: 15px;
                    box-sizing: border-box;
                    background-color: rgba(239,246,255,1);
                    border-radius: 20px;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                    .box_head_list_item_top {
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        span {
                            &:nth-child(1) {
                                color: rgba(154,154,154,1);
                                font-size: 14px;
                            }
                            &:nth-child(2) {
                                color: rgba(255,58,48,1);
                                font-size: 14px;
                            }
                        }
                    }
                    .box_head_list_item_bottom {
                        color: rgba(16,16,16,1);
                        font-size: 22px;
                        font-weight: bold;
                    }
                }
            }
        }
        .box_chart {
            width: 100%;
            display: flex;
            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 {
              &:nth-child(1) {
                width: 32.5%;
              }
              &:nth-child(2) {
                width: 67%;
              }
                height: 225px;
                padding: 15px;
                box-sizing: border-box;
                background-color: #ffffff;
                border-radius: 20px;
                box-shadow: 0 2px 6px 0 rgba(206,206,206,0.21);
                .box_chart_item_info {
                    display: flex;
                    align-items: center;
                    span {
                        color: rgba(154,154,154,1);
                        font-size: 14px;
                        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;
                    margin-top: 4px;
                    font-weight: bold;
                }
                .box_chart_item_tu {
                    width: 100%;
                    height: 90%;
                }
            }
        }
        .box_shuju {
            width: 32.5%;
            height: 93px;
            border-radius: 20px;
            margin-top: 15px;
            margin-bottom: 15px;
            padding: 15px;
            box-sizing: border-box;
            background-color: #ffffff;
            box-shadow: 0 2px 6px 0 rgba(206,206,206,0.21);
            display: flex;
            align-items: center;
            justify-content: space-between;
            .box_shuju_item {
                width: 33%;
                height: 100%;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                align-items: center;
                .box_shuju_item_top {
                    display: flex;
                    align-items: center;
                    span {
                        color: rgba(154,154,154,1);
                        font-size: 14px;
                        margin-right: 4px;
                    }
                }
                .box_shuju_item_bottom {
                    color: rgba(16,16,16,1);
                    font-size: 22px;
                    font-weight: bold;
                }
            }
        }
        .box_content {
            width: 100%;
            height: 32s0px;
            margin-top: 15px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            .box_content_left {
                width: 100%;
                height: 100%;
                background-color: #fff;
                padding: 15px;
                box-sizing: border-box;
                .box_content_left_title {
                    font-weight: bold;
                    font-size: 22px;
                    color: #101010;
                    margin-top: 50px;
                    margin-bottom: 30px;
                }
                .box_content_left_list {
                    width: 100%;
                    display: flex;
                    flex-wrap: wrap;
                    align-items: center;
                    justify-content: space-between;
                    .box_content_left_list_item {
                        width: 24%;
                        height: 150px;
                        padding: 16px 20px;
                        box-sizing: border-box;
                        border-radius: 15px;
                        background-color: #FEF2F2;
                        display: flex;
                        flex-direction: column;
                        justify-content: space-between;
                        margin-bottom: 15px;
                        .box_content_left_list_item_top {
                            width: 100%;
                            flex: 1;
                            display: flex;
                            align-items: center;
                            text-align: center;
                            span {
                              width: 100%;
                                &:nth-child(1) {
                                    color: rgba(75,85,99,1);
                                    font-size: 18px;
                                }
                            }
                        }
                        .box_content_left_list_item_bottom {
                            width: 100%;
                            flex: 2;
                            display: flex;
                            align-items: center;
                            text-align: center;
                            font-weight: bold;
                            span {
                               width: 100%;
                                color: rgba(16,16,16,1);
                                font-size: 22px;
                                margin-right: 6px;
                            }
                        }
                    }
                }
            }
            .box_content_right {
                width: 0%;
                height: 100%;
                padding: 15px;
                box-sizing: border-box;
                background-color: #fff;
                .box_content_right_title {
                    font-weight: bold;
                    font-size: 16px;
                    color: #101010;
                    margin-bottom: 15px;
                }
              .box_chart_item_tu {
                width: 100%;
                height: 130px;
              }
            }
        }
    }
</style>

 company/src/views/index.vue

@@ -16,10 +16,12 @@
      </div>
    </div>
    <div class="home_content">
      <div class="home_content_left">
        <div class="home_content_left_item" ref="picture1"></div>
      <div class="home_content_left" >
        <div class="home_content_left_item" v-if="userInfo.type == 0" ref="picture1"></div>
        <div class="home_content_left_item" v-if="userInfo.type == 1" ref="picture4"></div>
        <div class="home_content_left_item" ref="picture2"></div>
        <div class="home_content_left_item" ref="picture3"></div>
        <div class="home_content_left_item" v-if="userInfo.type == 0" ref="picture3"></div>
        <div class="home_content_left_item" v-if="userInfo.type == 1" ref="picture6"></div>
      </div>
      <div class="home_content_right">
        <div class="home_content_right_label" v-if="tabs && tabs.length>0" >待办事项</div>
@@ -126,7 +128,6 @@
            </el-pagination>
          </div>
        </div>

        <div v-if="activeName === '6'">
          <div class="home_content_right_list" v-if="tableData6 && tableData6.length">
            <div class="list_item" v-for="(item, index) in tableData6" :key="index">
@@ -243,8 +244,9 @@
import OperaApplyChangeDetailWindow from '@/components/business/OperaApplyChangeDetailWindow'
import OperaTaxesWindow from '@/components/business/OperaTaxesWindow'
import { fetchList as noticeList, deleById } from '@/api/business/notices'
import { getChangeDetail, getDetail } from '@/api/business/insuranceApply'
import { getAddReduceData, getSettleClaimsMoney, getInsuranceNum, getInsuranceApplyStatusData, getInsuranceMemberData, getInsuranceApplyDataVO, getInsuranceApplyReportDataVO } from '@/api/business/insuranceApply'
import OperaWtbApplyShopWindow from '@/components/business/OperaWtbApplyShopWindow'

export default {
  components: {
    OperaWtbApplyShopWindow,
@@ -343,9 +345,14 @@
    ...mapState(['userInfo'])
  },
  mounted () {
    this.setPicture1()
    if (this.userInfo.type == 0) {
      this.setPicture1()
      this.setPicture3()
    } else if (this.userInfo.type == 1) {
      this.setPicture4()
      this.setPicture6()
    }
    this.setPicture2()
    this.setPicture3()
    this.initPanel()
    this.setLoadTimer()
  },
@@ -393,7 +400,7 @@
        this.$refs.OperaTaxesWindow.open('开票申请详情', { id: obj.objId })
      } else if (obj.objType === 5) {
        this.$refs.operaSettleClaimsWindow.open('报案理赔详情', obj.objId)
        if ([1,4, 7,13, 14, 15, 16, 17, 18].includes(obj.type)) {
        if ([1, 4, 7, 13, 14, 15, 16, 17, 18].includes(obj.type)) {
          // å¦‚果是提醒累消息，删除通知
          deleById(obj.id)
            .then(res => {
@@ -544,122 +551,329 @@
      this.$router.push({ path: url })
    },
    setPicture1 () {
      const chartDom = this.$refs.picture1
      const myChart = echarts.init(chartDom)
      let option
      option = {
        title: {
          text: '当月保险金额',
          left: '5%',
          top: '5%'
        },
        tooltip: {
          trigger: 'item'
        },
        series: [
          {
            type: 'pie',
            radius: '50%',
            data: [
              { value: 1048, name: '保障中' },
              { value: 735, name: '不在保' }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
      getInsuranceNum()
        .then(res => {
          const chartDom = this.$refs.picture1
          const myChart = echarts.init(chartDom)
          const option = {
            title: {
              text: '已投保单',
              left: '5%',
              top: '5%'
            },
            legend: {
              orient: 'vertical',
              left: 'right',
              top: '30%'
            },
            tooltip: {
              trigger: 'item'
            },
            label: {
              alignTo: 'edge',
              formatter: '{b}: ({d}%)',
              minMargin: 5,
              edgeDistance: 10,
              lineHeight: 15,
              rich: {
                time: {
                  fontSize: 10,
                  color: '#999'
                }
              }
            }
            },
            series: [
              {
                type: 'pie',
                data: [
                  { value: res.zbInsuranceNum || 0, name: '直保' },
                  { value: res.wtbInsuranceNum || 0, name: '委托投保' }
                ],
                radius: ['30%', '50%'],
                avoidLabelOverlap: false,
                emphasis: {
                  itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                  }
                }
              }
            ]
          }
        ]
      }

      option && myChart.setOption(option)
          option && myChart.setOption(option)
        })
    },
    setPicture4 () {
      getInsuranceApplyStatusData()
        .then(res => {
          const chartDom = this.$refs.picture4
          const myChart = echarts.init(chartDom)
          var yd = []
          if (res && res.length > 0) {
            res.forEach(item => {
              yd.push({ name: item.dataFirst, value: item.dataSecond || 0 })
            })
          }
          const option = {
            title: {
              text: '已投保单各状态占比',
              left: '5%',
              top: '5%'
            },
            legend: {
              orient: 'vertical',
              left: 'right',
              top: '30%'
            },
            tooltip: {
              trigger: 'item'
            },
            label: {
              alignTo: 'edge',
              formatter: '{b}: ({c}个)',
              minMargin: 5,
              edgeDistance: 10,
              lineHeight: 15,
              rich: {
                time: {
                  fontSize: 10,
                  color: '#999'
                }
              }
            },
            series: [
              {
                type: 'pie',
                data: yd,
                radius: ['30%', '50%'],
                avoidLabelOverlap: false,
                emphasis: {
                  itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                  }
                }
              }
            ]
          }

          option && myChart.setOption(option)
        })
    },
    setPicture6 () {
      getInsuranceMemberData()
        .then(res => {
          const chartDom = this.$refs.picture6
          const myChart = echarts.init(chartDom)
          var yd = []
          if (res && res.length > 0) {
            res.forEach(item => {
              yd.push({ name: item.dataFirst, value: item.dataSecond || 0 })
            })
          }
          const option = {
            title: {
              text: '在保员工',
              left: '5%',
              top: '5%'
            },
            grid: {
              left: '3%',
              right: '3%',
              top: '25%',
              bottom: '0%',
              containLabel: true
            },
            legend: {
              orient: 'vertical',
              left: 'right',
              top: '30%'
            },
            tooltip: {
              trigger: 'item'
            },
            label: {
              alignTo: 'edge',
              formatter: '{b}: ({c}人)',
              minMargin: 5,
              edgeDistance: 10,
              lineHeight: 15,
              rich: {
                time: {
                  fontSize: 10,
                  color: '#999'
                }
              }
            },
            series: [
              {
                type: 'pie',
                data: yd,
                radius: ['30%', '50%'],
                avoidLabelOverlap: false,
                emphasis: {
                  itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                  }
                }
              }
            ]
          }

          option && myChart.setOption(option)
        })
    },
    setPicture2 () {
      const chartDom = this.$refs.picture2
      const myChart = echarts.init(chartDom)
      let option
      option = {
        title: {
          text: '当月在保人数',
          left: '5%',
          top: '5%'
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '13%',
          containLabel: true
        },
        tooltip: {
          trigger: 'axis'
        },
        xAxis: {
          type: 'category',
          data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [10, 30, 25, 16, 21, 18, 5, 30, 30, 30, 30, 30],
            type: 'line'
      getAddReduceData()
        .then(res => {
          var xd = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
          var yd = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
          var yd1 = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
          if (res && res.length > 0) {
            xd = []
            yd = []
            yd1 = []
            res.forEach(item => {
              xd.push(item.dataFirst)
              yd.push(item.dataSecond)
              yd1.push(item.dataThird)
            })
          }
        ]
      }
          const chartDom = this.$refs.picture2
          const myChart = echarts.init(chartDom)
          const option = {
            title: {
              text: '每月加减保人数',
              left: '5%',
              top: '1%'
            },
            grid: {
              left: '3%',
              right: '3%',
              top: '25%',
              bottom: '0%',
              containLabel: true
            },
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'shadow'
              }
            },
            legend: {
              top: '5%',
              left: 'right'
            },
            xAxis: {
              type: 'category',
              // boundaryGap: false,
              data: xd
            },
            yAxis: {
              type: 'value'
            },
            series: [
              {
                name: '加保',
                data: yd,
                type: 'bar',
                areaStyle: {
                  opacity: 0.5,
                  color: '#f07e6f'
                },
                lineStyle: {
                  color: '#f07e6f'
                }
              },
              {
                name: '减保',
                data: yd1,
                type: 'bar',
                areaStyle: {
                  opacity: 0.5,
                  color: '#f07e6f'
                },
                lineStyle: {
                  color: '#f07e6f'
                }
              }
            ]
          }
          option && myChart.setOption(option)

      option && myChart.setOption(option)
          console.log(res)
        })
    },
    setPicture3 () {
      const chartDom = this.$refs.picture3
      const myChart = echarts.init(chartDom)
      let option
      option = {
        title: {
          text: '总赔付率 78%',
          left: '5%',
          top: '5%'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
      getSettleClaimsMoney()
        .then(res => {
          var xd = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
          var yd = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
          if (res && res.length > 0) {
            xd = []
            yd = []
            res.forEach(item => {
              xd.push(item.dataFirst)
              yd.push(item.dataSecond)
            })
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '25%',
          containLabel: true
        },
        xAxis: {
          type: 'value'
          // boundaryGap: [0, 0.01]
        },
        yAxis: {
          type: 'category',
          data: ['保险A赔付率', '保险B赔付率', '总赔付率']
        },
        series: [
          {
            type: 'bar',
            stack: 'total',
            barWidth: '60%',
            data: [10, 20, 30]
          },
          {
            type: 'bar',
            stack: 'total',
            barWidth: '60%',
            data: [15, 16, 24]
          const chartDom = this.$refs.picture3
          const myChart = echarts.init(chartDom)
          const option = {
            title: {
              text: '每月赔付金额',
              left: '5%',
              top: '5%'
            },
            grid: {
              left: '3%',
              right: '3%',
              top: '25%',
              bottom: '0%',
              containLabel: true
            },
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'shadow'
              }
            },
            legend: {
              top: '5%',
              left: 'right'
            },
            xAxis: {
              type: 'category',
              // boundaryGap: false,
              data: xd
            },
            yAxis: {
              type: 'value'
            },
            series: [
              {
                data: yd,
                type: 'line',
                smooth: true,
                areaStyle: {
                  opacity: 0.5,
                  color: '#f07e6f'
                },
                lineStyle: {
                  color: '#f07e6f'
                }
              }
            ]
          }
        ]
      }
          option && myChart.setOption(option)

      option && myChart.setOption(option)
          console.log(res)
        })
    }
  }
}
@@ -717,6 +931,7 @@
    /*justify-content: space-between;*/
    .home_content_left {
      width: 350px;

      /*height: 100%;*/
      height: auto;
      flex-shrink: 0;