ShangHaiLifeECIF/dgtis-ui/src/views/system/userInfoDetails/index.vue

<template>
  <div class="app-container" v-loading="loading">
    <div class="conPanel">
      <el-row class="ht100p" :gutter="20">
        <el-col class="ht100p" :span="7">
          <div class="topDiv">
            <div class="cardDiv">
              <!--标题-->
              <div class="cardTitle">客户标签</div>
              <word-cloud-chart
                id="wordCloud"
                :title="chartsTitle"
                :data="wordCloudChartData"
                :width="width"
                :height="height"
              />
              <!--角边-->
              <!--<div class="borderLB"></div>-->
              <!--<div class="borderRB"></div>-->
            </div>
          </div>
          <div class="bottomDiv">
            <div class="cardDiv">
              <div class="cardTitle">客户保单信息</div>
              <div class="chart">
                <div class="topNumDiv">
                  <div class="numTitle">保单总数</div>
                  <div class="num cursor" @click="toDetail">{{custInfo.bdTotalNum}}张</div>
                </div>
<!--                <div class="dashedLine"></div>-->
                <div class="bottomNumDiv">
                  <div class="leftNumDiv">
                    <div class="numTitle">有效保单</div>
                    <div class="num cursor" @click="toDetail">{{custInfo.novpolicy}}张</div>
                  </div>
                  <div class="rightNumDiv">
                    <div class="numTitle">失效保单</div>
                    <div class="num cursor" @click="toDetail">{{custInfo.noivpolicy}}张</div>
                  </div>
                </div>
              </div>
              <!--<div class="borderLB"></div>-->
              <!--<div class="borderRB"></div>-->
            </div>
          </div>
        </el-col>
        <el-col class="ht100p" :span="10">
          <div class="cardDiv">
            <div class="cardTitle">客户信息</div>
            <div class="infoDiv">
              <div class="chartDiv">
                <pie-chart-half
                  id="pieChartHalf"
                  :title="chartsTitle"
                  :data="pieChartHalfData"
                  :width="width"
                  :height="height"
                />
              </div>
              <div class="imgDiv">
<!--                <div style="width: 240px;">-->
<!--                  <img style="width: 100%;" src="../../../assets/image/levelBg.png" alt=""/>-->
<!--                </div>-->
                <div :class="{'levelImgDiv':true,'levelImg':isShowlevelText(levelText(custInfo.custclass)),'levelImgNull':!isShowlevelText(levelText(custInfo.custclass))}">
                  <div class="level" v-if="isShowlevelText(levelText(custInfo.custclass))">{{levelText(custInfo.custclass)}}客户</div>
                  <div class="isPay">已交保费</div>
                  <div class="payNum">{{custInfo.prem}}</div>
                </div>
              </div>
              <el-row class="bottomInfoDiv" :gutter="10">
                <el-col :span="24">
                  <div class="bxDetail" style="padding: 10px 10px 6px;">
                    <div class="numTitleB">险种信息</div>
                    <el-row :gutter="10">
                      <el-col :span="8">
                        <div class="bxInfo">享受保障：<span>{{custInfo.guaranteeDay}}</span><span class="unit">天</span></div>
                      </el-col>
                      <el-col :span="8">
                        <div class="bxInfo">年缴保费：<span>{{custInfo.prem}}</span><span class="unit">元</span></div>
                      </el-col>
                      <el-col :span="8" v-for="(value, key, index) in majorCategorie">
                        <div class="bxInfo">{{key}}：<span>{{value/10000}}</span><span class="unit">万</span></div>
                      </el-col>
                    </el-row>
                  </div>
                </el-col>
<!--                <el-col :span="6">-->
<!--                  <div class="bxDetail">-->
<!--                    <div class="numTitle">享受保障</div>-->
<!--                    <div class="num">{{custInfo.guaranteeDay}}<span class="unit">天</span></div>-->
<!--                  </div>-->
<!--                </el-col>-->
<!--                <el-col :span="6" v-for="(value, key, index) in majorCategorie">-->
<!--                  <div class="bxDetail">-->
<!--                    <div class="numTitle">{{key}}</div>-->
<!--                    <div class="num">{{value/10000}}<span class="unit">万</span></div>-->
<!--                  </div>-->
<!--                </el-col>-->
<!--                <el-col :span="6">-->
<!--                  <div class="bxDetail">-->
<!--                    <div class="numTitle">标准保费</div>-->
<!--                    <div class="num">{{custInfo.prem}}<span class="unit">元</span></div>-->
<!--                  </div>-->
<!--                </el-col>-->
              </el-row>
              <el-row class="bottomInfoDiv" :gutter="10">
                <el-col :span="12">
                  <div class="bxDetail bxDetailHt">
                    <div class="numTitleB">续期信息</div>
                    <div class="bxInfo">应交日期：{{custInfo.null}}</div><!--未接数据-->
                    <div class="bxInfo">应交保费：{{custInfo.null}}元</div><!--未接数据-->
                    <div class="bxInfo">已交保费：{{custInfo.null}}元</div><!--未接数据-->
                    <div class="bxInfo">交费年期：{{custInfo.null}}年</div><!--未接数据-->
                  </div>
                </el-col>
                <el-col :span="12">
                  <div class="bxDetail bxDetailHt">
                    <div class="numTitleB">理赔信息</div>
                    <div class="bxInfo">是否理赔：{{insuranceclaimthread.isClaim}}</div>
                    <div class="bxInfo">理赔类别：{{insuranceclaimthread.claimType}}</div>
                    <div class="bxInfo">理赔金额：{{insuranceclaimthread.claimAmount}}元</div>
                  </div>
                </el-col>
              </el-row>
            </div>

            <!--<div class="borderLB"></div>-->
            <!--<div class="borderRB"></div>-->
          </div>
        </el-col>
        <el-col class="ht100p" :span="7">
          <div class="topDiv">
            <div class="cardDiv">
              <div class="cardTitle">基本信息</div>
              <div class="userInfo">
                <el-row class="mt20" :gutter="10">
                  <el-col :span="12">
                    <div>姓名：{{custInfo.name}}</div>
                  </el-col>
                  <el-col :span="12">
                    <div>手机：{{custInfo.pmphone}}</div>
                  </el-col>
                </el-row>
                <el-row :gutter="10">
                  <el-col :span="12">
                    <div>年龄：{{custInfo.age}}岁</div>
                  </el-col>
                </el-row>
                <div class="dayDiv">
                  <div class="dayTitle">投保时长</div>
                  <div class="dayNum">{{custInfo.insureDay}}<span class="unit">天</span></div>
                </div>
              </div>

              <!--<div class="borderLB"></div>-->
              <!--<div class="borderRB"></div>-->
            </div>
          </div>
          <div class="bottomDiv">
            <div class="cardDiv">
              <div class="cardTitle">投保时间节点及保费</div>
              <line-bar-chart
                id="lineBarChart"
                :width="width"
                :height="height"
                :data="lineBarChartData" />
              <!--<div class="borderLB"></div>-->
              <!--<div class="borderRB"></div>-->
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
  import { getCustomerById,getCustomerOverViewById } from "@/api/customerInformation/customerInformation.js";
  import WordCloudChart from '../../dashboard/WordCloudChart'
  import LineBarChart from '../../dashboard/LineBarChart'
  import PieChartHalf from '../../dashboard/PieChartHalf'
export default {
  name: "UserInfoOverview",
  components: {
    WordCloudChart,
    LineBarChart,
    PieChartHalf
  },
  data() {
    return {
      loading:true,
      chartsTitle:'',
      custInfo : {},
      wordCloudChartData:[],
      lineBarChartData:{
        lineData:{
          name:'',
          xAxisName:'单位：月',
          yAxisName:'单位：元',
          data:[]
        },
        // barData:{
        //   name:'',
        //   data:[]
        // },
        xAxisData:[]
      },
      pieChartHalfData:[],
      width:'100%',
      height:'80%',
      insuranceclaimthread:{
        claimType: "",   //理赔类型
        claimAmount: '',  //理赔金额
        isClaim: ""    //是否理赔
      },
      majorCategorie:{},
    }
  },
  created() {
    this.getCustomerOverViewByIdData();
  },
  mounted() {

  },
  methods: {
    getCustomerOverViewByIdData(){
      this.loading = true;
      var that = this;
      let id = this.$route.query.id;
      // let id = this.$route.params.id;
      getCustomerOverViewById({id:id}).then(response => {
          console.log(response);
        // 客户标签
          for(var i =0 ;i< 120;i++){
            var label = 'label'+i;
            if(response.data.custInfo[label] && response.data.custInfo[label] != ""){
              var data = {
                name:response.data.custInfo[label],
                value:i,
              }
              that.wordCloudChartData.push(data)
            }
          }
        // 客户保单信息
          that.custInfo = response.data.custInfo;
          if(!that.custInfo.noivpolicy || that.custInfo.noivpolicy <= 0){
            that.custInfo.noivpolicy = 0;
          }
          if(!that.custInfo.novpolicy || that.custInfo.novpolicy <= 0){
            that.custInfo.novpolicy = 0;
          }
          that.custInfo.bdTotalNum = that.custInfo.noivpolicy + that.custInfo.novpolicy;
          // 理赔信息
          response.data.insuranceclaimthread != undefined ?that.insuranceclaimthread = response.data.insuranceclaimthread:{};
          response.data.majorCategorie != undefined ?that.majorCategorie = response.data.majorCategorie:{};
          // 投保时间节点及保费
          that.lineBarChartData.xAxisData = response.data.lineBarChartData.xaxisData;
          that.lineBarChartData.lineData.data = response.data.lineBarChartData.actaulData.data;
          that.lineBarChartData.lineData.name = response.data.lineBarChartData.actaulData.name;

          // that.lineBarChartData.barData.data = response.data.lineBarChartData.expectedData.data;
          // that.lineBarChartData.barData.name = response.data.lineBarChartData.expectedData.name;
          that.loading = false;
        }
      );
    },
    toDetail(){
      let id = this.$route.query.id;
      this.$router.push({ path:'/userInfoDetails', query: {id: id}  })
    },
    isShowlevelText(text){
      if(text == '无'){
        return false;
      }else{
        return true;
      }
    },
  }
};
</script>
<style lang="scss" scoped>
  .conPanel{
    width: 97%;
    height: 92%;
    position: absolute;
    .topDiv{
      height: 50%;
      padding-bottom: 10px;
      box-sizing: border-box;
    }
    .bottomDiv{
      height: 50%;
      padding-top: 10px;
      box-sizing: border-box;
    }
    .cardDiv{
      height: 100%;
      position: relative;
      /*border: 1px solid #122E83;*/
      box-sizing: border-box;
      /*background:url("../../../assets/image/cardBg.png") no-repeat;*/
      /*background-size:100% 100%;*/
      background:#FFF;
      border-radius:3px;
      .cardTitle{
        height: 32px;
        line-height: 32px;
        font-size: 14px;
        color: #164993;
        font-weight: bold;
        padding: 0 15px;
        box-sizing: border-box;
        background: #DCE4F7;
        /*background: linear-gradient( to right,rgba(6,34,128,0.7), rgba(18,107,209,0));*/
      }
      .chart{
        height: 80%;
        width: 100%;
        margin-top: 10px;
      }
      .numTitle{
        font-size: 14px;
        color: #333;
        /*font-weight: bold;*/
        line-height: 30px;
      }
      .num{
        font-size: 20px;
        color: #F39801;
        font-weight: bold;
        line-height: 20px;
      }
      .topNumDiv{
        width: 50%;
        height: 40%;
        text-align: center;
        margin-top: 8%;
        margin-left: 25%;
        padding-top: 10px;
        border-bottom: 1px dashed #F39801;
        box-sizing: border-box;
      }
      .dashedLine{
        width: 40%;
        height: 1px;
        border-bottom: 1px dashed #F39801;
        margin-top:25%;
        margin-left: 30%;
      }
      .bottomNumDiv{
        width: 60%;
        height: 50%;
        text-align: center;
        margin-left: 20%;
        .leftNumDiv{
          width: 50%;
          border-right: 1px dashed #F39801;
          box-sizing: border-box;
          float: left;
          padding-top: 10px;
          padding-right: 20px;
        }
        .rightNumDiv{
          width: 50%;
          float: left;
          padding-top: 10px;
          box-sizing: border-box;
          padding-left: 20px;
        }
      }
      .userInfo{
        font-size: 14px;
        color: #333;
        height: 24px;
        line-height: 24px;
        padding: 0 15px;
        box-sizing: border-box;
        height: 80%;
      }
      .infoDiv{
        height: 85%;
        padding: 15px;
        box-sizing:border-box;
        .chartDiv{
          height: 80%;
          width: 100%;
          position: absolute;
          top: 10px;
          left: 0;
          z-index: 0;
        }
        .imgDiv{
          height: 60%;
          position:relative;
          .levelImg{
            background: url("../../../assets/image/levelBg.png") no-repeat;
          }
          .levelImgNull{
            background: url("../../../assets/image/levelBg2.png") no-repeat;
          }
          .levelImgDiv{
            width: 240px;
            height: 204px;
            background-size: 100% 100%;
            position: absolute;
            bottom: 10px;
            left: 50%;
            margin-left: -125px;
            .level{
              width: 80px;
              padding: 4px 0;
              font-size: 14px;
              font-weight: bold;
              color: #FFF;
              background: #003B88;
              border-radius: 8px;
              text-align: center;
              position: absolute;
              top: 46px;
              left: 52%;
              margin-left: -40px;
            }
            .isPay{
              width: 100px;
              height: 40px;
              line-height: 40px;
              font-size: 14px;
              color: #333;
              text-align: center;
              position: absolute;
              bottom: 28px;
              left: 50%;
              margin-left: -50px;
            }
            .payNum{
              width: 100%;
              font-size: 20px;
              font-weight: bolder;
              color: #333;
              line-height: 50px;
              text-align: center;
              position: absolute;
              bottom: 0;
              left: 4px;
            }
          }

        }
        .bottomInfoDiv{
          /*height: 10%;*/
          margin-top:10px;
          .bxDetailHt{
            height: 110px;
            margin-top: 10px;
            padding: 10px 10px 6px !important;
          }
          .bxDetail{
            width: 100%;
            text-align: center;
            border: 1px solid #F39801;
            line-height: 24px;
            padding: 4px 10px;
            box-sizing:border-box;
            position:relative;
            .numTitle{
              font-size: 14px;
              color: #333;
            }
            .numTitleB{
              position: absolute;
              top: -12px;
              left: 50%;
              /*padding: 4px 0;*/
              width: 70px;
              margin-left: -35px;
              background: #FFF;
              font-size: 14px;
              color: #F39700;
            }
            .bxInfo{
              font-size: 12px;
              color: #333;
              line-height: 22px;
              text-align: left;
              span{
                color: #F39700;
              }
            }
            .num{
              font-size: 16px;
              color: #F39801;
              .unit{
                font-size: 12px;
                color: #333;
                margin-left: 6px;
              }
            }
          }
        }
      }
      .dayDiv{
        height: 50%;
        width:100%;
        background: #FEEBDC;
        border-radius: 5px;
        margin-top: 20px;
        padding: 15px 20px;
        box-sizing: border-box;
        .dayTitle{
          color: #333;
        }
        .dayNum{
          font-size: 24px;
          color: #F59801;
          text-align: center;
          padding-top: 10px;
          .unit{
            font-size: 14px;
            color: #333;
            margin-left: 6px;
          }
        }
      }
    }
    .borderLB{
      height: 20px;
      width: 20px;
      position: absolute;
      bottom: 0;
      left: 0;
      border-bottom: 1px solid #076DB9;
      border-left: 1px solid #076DB9;
    }
    .borderRB{
      height: 20px;
      width: 20px;
      position: absolute;
      bottom: 0;
      right: 0;
      border-bottom: 1px solid #076DB9;
      border-right: 1px solid #076DB9;
    }
  }
  .ht100p{
    height: 100%;
  }
  .cursor{
    cursor: pointer;
  }
  @media (min-width: 1400px) {
    .conPanel .cardDiv .topNumDiv{
      height: 28%;
      margin-top: 15%;
    }
    .conPanel .cardDiv .infoDiv .imgDiv .levelImgDiv{
      bottom: 15%;
    }
    .conPanel .cardDiv .infoDiv .bottomInfoDiv .bxDetail{
      padding: 20px;
    }
    .conPanel .cardDiv .infoDiv .bottomInfoDiv .bxDetailHt{
      height: 130px;
      padding: 20px !important;
    }
    .conPanel .cardDiv .dayDiv .dayNum{
      font-size: 28px;
      font-weight: bold;
      margin-top: 22px;
    }
  }
</style>