MrShi
2025-07-02 39ae52b3f65e2bba3b6570adb51e791cb3befff7
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>
@@ -98,6 +100,9 @@
              <div class="list_item_left">
                <span>{{item.title}}({{ item.typeDetail }})</span>
                <span>{{item.info}}({{item.content}})</span>
<!--
                <span style="font-size: 12px;color: #8c939d;margin-top: 10px">{{item.createDate}}</span>
-->
              </div>
              <div class="list_item_center">
                <span>{{item.companyName}}</span>
@@ -115,7 +120,7 @@
          </div>
          <div class="home_content_right_page">
            <el-pagination
                @current-change="handleCurrentChange6"
                @current-change="handleCurrentChange2"
                :current-page="page2"
                :page-size="5"
                layout="total, prev, pager, next, jumper"
@@ -123,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">
@@ -240,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 OperaWtbApplyShopWindow from "@/components/business/OperaWtbApplyShopWindow";
import { getAddReduceData, getSettleClaimsMoney, getInsuranceNum, getInsuranceApplyStatusData, getInsuranceMemberData, getInsuranceApplyDataVO, getInsuranceApplyReportDataVO } from '@/api/business/insuranceApply'
import OperaWtbApplyShopWindow from '@/components/business/OperaWtbApplyShopWindow'
export default {
  components: {
    OperaWtbApplyShopWindow,
@@ -250,7 +255,7 @@
    OperaTaxesWindow,
    OperaSettleClaimsWindow,
    OperaApplyChangeDetailWindow,
    OperaApplyChangeUnitDetailWindow,
    OperaApplyChangeUnitDetailWindow
  },
  name: 'Index',
  data () {
@@ -340,36 +345,41 @@
    ...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()
  },
  methods: {
    getTotalNoticeCount(a){
      if(a.name == 0){
        return this.totalPage0;
      } else if(a.name == 1){
        return this.totalPage1;
      } else if(a.name ==2){
        return this.totalPage2;
      } else if(a.name ==6){
        return this.totalPage6;
      } else if(a.name ==7){
        return this.totalPage7;
      } else if(a.name ==8){
        return this.totalPage8;
    getTotalNoticeCount (a) {
      if (a.name == 0) {
        return this.totalPage0
      } else if (a.name == 1) {
        return this.totalPage1
      } else if (a.name == 2) {
        return this.totalPage2
      } else if (a.name == 6) {
        return this.totalPage6
      } else if (a.name == 7) {
        return this.totalPage7
      } else if (a.name == 8) {
        return this.totalPage8
      }
      return 0;
      return 0
    },
    detail (obj) {
      if (obj.objType === 0) {
        getDetail(obj.objId).then(res => {
          if( res.solutionType == 0){
          if (res.solutionType == 0) {
            this.$refs.operaInsuranceApplyWindow.open('投保申请详情', { id: obj.objId })
          }else{
          } else {
            this.$refs.OperaWtbApplyShopWindow.open('委托投保申请详情', { id: obj.objId })
          }
        }).catch(err => {
@@ -389,17 +399,20 @@
      } else if (obj.objType === 4) {
        this.$refs.OperaTaxesWindow.open('开票申请详情', { id: obj.objId })
      } else if (obj.objType === 5) {
        // deleById(obj.id)
        //   .then(res => {
        //     this.tableData2.forEach((item, index) => {
        //       if (item.id === obj.id) {
        //         this.tableData2.splice(index, 1)
        //         this.totalPage2 = this.totalPage2 - 1
        //       }
        //     })
            this.$refs.operaSettleClaimsWindow.open('报案理赔详情',obj.objId)
            // this.$refs.operaSettleClaimsWindow.open('理赔详情', { id: obj.objId })
          // })
        this.$refs.operaSettleClaimsWindow.open('报案理赔详情', obj.objId)
        if ([1, 4, 7, 13, 14, 15, 16, 17, 18].includes(obj.type)) {
          // 如果是提醒累消息,删除通知
          deleById(obj.id)
            .then(res => {
              this.tableData2.forEach((item, index) => {
                if (item.id === obj.id) {
                  this.tableData2.splice(index, 1)
                  this.totalPage2 = this.totalPage2 - 1
                }
              })
              // this.$refs.operaSettleClaimsWindow.open('报案理赔详情', obj.objId)
            })
        }
      }
    },
    setLoadTimer () {
@@ -409,10 +422,10 @@
        clearInterval(window.timer)
      }
      window.timer = setInterval(() => {
          that.initLoadData()
        that.initLoadData()
      }, 60000)
    },
    initLoadData(){
    initLoadData () {
      var pemissons = this.userInfo.permissions
      if (pemissons.includes('business:notice:insurance')) {
        this.handleCurrentChange0(0)
@@ -538,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)
        })
    }
  }
}
@@ -711,6 +931,7 @@
    /*justify-content: space-between;*/
    .home_content_left {
      width: 350px;
      /*height: 100%;*/
      height: auto;
      flex-shrink: 0;