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

<template>
  <div class="app-container" v-loading="loading">
    <div class="conPanel">
      <el-row class="ht50p" :gutter="20">
        <el-col class="ht100p" :span="7">
          <div class="cardDiv">
            <div class="cardTitle">客户年龄段性别分布</div>
            <bar-two-way-chart
              id="barTwoWayChart"
              :width="width"
              :height="height"
              :data="barTwoWayChartData" />
          </div>
        </el-col>
        <el-col class="ht100p" :span="17">
          <div class="cardDiv">
            <div class="cardTitle">查询条件</div>
            <div class="lunboDiv">
              <img class="lineImg" src="../assets/image/line.png" alt="">
              <div class="wrapper horizontal demo1">
                <ul class="container" style=" transform-style: preserve-3d;transform: rotateX(-5deg) rotateY(0deg);">
                  <li class="cards-list" v-for="(item,index) in lunboData" :key="index">
                    <div class="img">
                      <img class="iconImg" :src="item.iconSrc" alt="">
                      <img class="shadowImg" src="../assets/image/shadow.png" alt="">
                    </div>
                    <div class="main-con">
                      <div class="name">{{item.name}}</div>
                      <img src="../assets/image/ItalicsLine.png" alt="">
                    </div>
                  </li>
                </ul>
              </div>
            </div>
            <div class="infoLeft">
<!--              <img class="lineImg" src="../assets/image/line.png" alt="">-->
<!--              <el-button class="lunboSearchBtn" icon="el-icon-search" circle @click="toUserInfoList"></el-button>-->
              <el-button class="lunboSearchBtn" circle @click="toUserInfoList">
                <img src="../assets/image/searchBtn.png" alt=""/>
              </el-button>
              <el-form v-if="lunboActiveIndex == 0" ref="conditionData" :model="conditionData" label-width="96px">
                <el-form-item class="formItemFull" label="业绩归属：" size="mini">
                  <el-select v-model="conditionData.policybelong">
                    <el-option v-for="(item,index) in policybelongArr" :key="index" :label="item.label" :value="item.value"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item class="formItemFull" label="年缴费区间：" size="mini">
                  <el-input v-model="conditionData.payS" style="width: 43%;"></el-input>
                  &nbsp;-&nbsp;
                  <el-input v-model="conditionData.payE" style="width: 43%;"></el-input>
                </el-form-item>
                <el-form-item class="formItemFull" label="投保年份：" size="mini">
                  <el-date-picker
                    v-model="conditionData.fadate"
                    type="year"
                    clearable
                    value-format="yyyy"
                    placeholder="选择年">
                  </el-date-picker>
                </el-form-item>
                <el-form-item class="formItemFull" label="险种类别：" size="mini">
                  <el-select v-model="conditionData.productname">
                    <el-option label="人寿保险" value="L"></el-option>
                    <el-option label="年金保险" value="R"></el-option>
                    <el-option label="万能保险" value="U"></el-option>
                    <el-option label="意外伤害险" value="A"></el-option>
                    <el-option label="重疾保险" value="S"></el-option>
                    <el-option label="健康险" value="H"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item class="formItemFull" label="保额区间：" size="mini">
                  <el-input v-model="conditionData.insuredAmountS" style="width: 43%;"></el-input>
                  &nbsp;-&nbsp;
                  <el-input v-model="conditionData.insuredAmountE" style="width: 43%;"></el-input>
                </el-form-item>
              </el-form>
              <el-form v-if="lunboActiveIndex == 1" :inline="true" ref="conditionData" :model="conditionData" label-width="96px">
                <el-form-item class="formItem" label="年龄：" size="mini">
                  <el-input class="age" oninput="value=value.replace(/[^\d]/g,'')" v-model="conditionData.ageS"></el-input>
                  -
                  <el-input class="age" oninput="value=value.replace(/[^\d]/g,'')" v-model="conditionData.ageE"></el-input>
                </el-form-item>
                <el-form-item class="formItem" label="性别：" size="mini">
                  <el-select v-model="conditionData.gender">
                    <el-option label="男" value="0"></el-option>
                    <el-option label="女" value="1"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item class="formItem" label="省份：" size="mini">
                  <el-input v-model="conditionData.sobirth"></el-input>
                </el-form-item>

                <el-form-item class="formItem" label="保单件数：" size="mini">
                  <el-select v-model="conditionData.NOVPolicy">
                    <el-option label="无保单" value="无保单"></el-option>
                    <el-option label="1件" value="1件"></el-option>
                    <el-option label="2件" value="2件"></el-option>
                    <el-option label="3-5件" value="3-5件"></el-option>
                    <el-option label="6-10件" value="6-10件"></el-option>
                    <el-option label="11-20件" value="11-20件"></el-option>
                    <el-option label="21-50件" value="21-50件"></el-option>
                    <el-option label="50件以上" value="50件以上"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item class="formItem" label="客户类型：" size="mini">
                  <el-select v-model="conditionData.custtype">
                    <el-option label="投保人" value="投保人"></el-option>
                    <el-option label="被保人" value="被保人"></el-option>
                    <el-option label="受益人" value="受益人"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item class="formItem" label="核心客户号：" size="mini">
                  <el-input v-model="conditionData.SCustID"></el-input>
                </el-form-item>
                <el-form-item class="formItemFull labelM education" label="客户等级：" size="mini" style="width:100%;margin-top: 5px;">
                  <el-select v-model="conditionData.custclass">
                    <el-option label="钻石" value="1"></el-option>
                    <el-option label="白金" value="2"></el-option>
                    <el-option label="黄金" value="3"></el-option>
                    <el-option label="普通" value="4"></el-option>
                    <el-option label="无" value="0"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item class="formItemFull labelM education" label="学历：" size="mini" style="width:100%;margin-top: 5px;">
                  <el-select v-model="conditionData.education" multiple collapse-tags>
                    <el-option v-for="(item,index) in educationArr" :key="index" :label="item.label" :value="item.value"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item class="formItemFull labelM dateQj" label="参与方进入时间：" size="mini" style="margin-top: 5px;">
                  <el-date-picker
                    v-model="conditionData.participantsDateS"
                    type="date"
                    clearable
                    style="width: 44%;"
                    value-format="yyyy-MM-dd"
                    placeholder="选择日期"
                    :picker-options="pickerOptionsS">
                  </el-date-picker>
                  -
                  <el-date-picker
                    v-model="conditionData.participantsDateE"
                    type="date"
                    clearable
                    value-format="yyyy-MM-dd"
                    style="width: 44%;"
                    placeholder="选择日期"
                    :picker-options="pickerOptionsE">
                  </el-date-picker>
                </el-form-item>
              </el-form>
              <el-form v-if="lunboActiveIndex == 2" ref="conditionData" :model="conditionData" label-width="96px">
                <el-form-item class="formItemFull" label="年收入：" size="mini">
                  <el-input v-model="conditionData.PIncomeS" style="width: 43%;"></el-input>
                  &nbsp;-&nbsp;
                  <el-input v-model="conditionData.PIncomeE" style="width: 43%;"></el-input>
                </el-form-item>
              </el-form>
              <el-form v-if="lunboActiveIndex == 3" ref="conditionData" :model="conditionData" label-width="96px">
                <el-form-item class="formItemFull" label="投保对象：" size="mini">
                  <el-input v-model="conditionData.Insured"></el-input>
                </el-form-item>
              </el-form>
              <el-form v-if="lunboActiveIndex == 4" ref="conditionData" :model="conditionData" label-width="196px">
                <el-form-item class="formItemFull" label="理赔：" size="mini">
                  <el-radio v-model="conditionData.lp" label="0">是</el-radio>
                  <el-radio v-model="conditionData.lp" label="1">否</el-radio>
                </el-form-item>
                <el-form-item class="formItemFull" label="有效：" size="mini">
                  <el-radio v-model="conditionData.yx" label="0">是</el-radio>
                  <el-radio v-model="conditionData.yx" label="1">否</el-radio>
                </el-form-item>
                <el-form-item class="formItemFull" label="关注官微：" size="mini">
                  <el-radio v-model="conditionData.gzgw" label="0">是</el-radio>
                  <el-radio v-model="conditionData.gzgw" label="1">否</el-radio>
                </el-form-item>
                <el-form-item class="formItemFull" label="注册官微：" size="mini">
                  <el-radio v-model="conditionData.zcgw" label="0">是</el-radio>
                  <el-radio v-model="conditionData.zcgw" label="1">否</el-radio>
                </el-form-item>
              </el-form>
            </div>
<!--            <div class="infoRight">-->
<!--              <div v-if="lunboActiveIndex == 0">-->
<!--                <div class="infoItem">-->
<!--                  <div class="infoItemTitle">基本信息</div>-->
<!--                  <el-row class="infoCon">-->
<!--                    <el-col :span="12">性别：{{conditionData.sex}}</el-col>-->
<!--                    <el-col :span="12">年龄：{{conditionData.age}}</el-col>-->
<!--                  </el-row>-->
<!--                </div>-->
<!--                <div class="infoItem">-->
<!--                  <div class="infoItemTitle">客户标签</div>-->
<!--                  <el-row class="infoCon">-->
<!--                    <el-col :span="12" v-for="(item,index) in conditionData.tag" :key="index">{{item}}</el-col>-->
<!--                  </el-row>-->
<!--                </div>-->
<!--              </div>-->
<!--              <div v-else>-->

<!--              </div>-->
<!--              <div>-->
<!--                <el-button class="searchBtn" type="primary" size="mini">查询</el-button>-->
<!--              </div>-->
<!--            </div>-->
          </div>
        </el-col>
      </el-row>
      <el-row class="ht50p" :gutter="20">
        <el-col class="ht100p" :span="7">
          <div class="cardDiv">
            <div class="cardTitle">险种类别</div>
            <bar-chart3
              id="barChart"
              :width="width"
              :height="height"
              :data="barChartData" />
          </div>
        </el-col>
        <el-col class="ht100p" :span="10">
          <div class="cardDiv">
            <div class="cardTitle">近10年有效客户数</div>
            <bar-chart
              id="barChartVistors"
              :width="width"
              :height="height"
              :data="barChartVistorsData" />
          </div>
        </el-col>
        <el-col class="ht100p" :span="7">
          <div class="cardDiv">
            <div class="cardTitle">拥有保单件数分布</div>
            <pie-chart
              id="pieChart"
              :width="width"
              :height="height"
              :data="pieChartData" />
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
  import '../assets/styles/lunbo.css'
  import '../assets/js/empile.js'
  import BarTwoWayChart from './dashboard/BarTwoWayChart'
  import BarChart from './dashboard/BarChart2'
  import BarChart3 from './dashboard/BarChart3'
  import PieChart from './dashboard/PieChart2'
  import { ageSexDis, riskcode, bdNumDis } from "@/api/index";
  export default {
    name: "UserInfoDetails",
    components: {
      BarTwoWayChart,
      BarChart,
      BarChart3,
      PieChart
    },
    data() {
      return {
        loading: true,
        // 客户年龄段性别分布
        barTwoWayChartData:{
          yAxisName:'单位：万',
          legendData:[],
          xAxisData:[],
          seriesData:[]
        },
        // 险种类别
        barChartData:{
          yAxisNameL:'单位：万',
          yAxisNameR:'单位：元',
          color:['#028FF3','#F29700'],
          xAxisData:[],
          seriesData:[]
        },
        // 拥有保单件数分布
        pieChartData:{
          color:['#0084F1','#ED475B','#F39801','#00C7FF','rgb(242,158,194)','rgb(250,216,137)','rgb(127,229,154)','rgb(33,201,205)'],
          seriesData:[]
        },
        // 近10年有效客户数
        barChartVistorsData:{
          yAxisName:'数量：万个',
          color:['#048EF3','#7FE59A','#FAD889','#F29EC2'],
          xAxisData:['2011', '2012', '2013', '2014', '2015', '2016', '2017'],
          seriesData:[
            {
              name:'白银',
              stack: 'vistors',
              data: [79, 52, 200, 334, 390, 330, 220]
            },
            {
              name:'黄金',
              stack: 'vistors',
              data: [80, 52, 200, 334, 390, 330, 220]
            },
            {
              name:'白金',
              stack: 'vistors',
              data: [30, 52, 200, 334, 390, 330, 220]
            },
            {
              name:'钻石',
              stack: 'vistors',
              data: [30, 52, 200, 334, 390, 330, 220]
            },
          ]
        },
        width:'100%',
        height:'80%',
        lunboActiveIndex:'0',
        lunboData:[
          {
            iconSrc:require('../assets/image/productInfo.png'),
            name:'产品信息',
          },
          {
            iconSrc:require('../assets/image/baseInfo.png'),
            name:'基本信息',
          },
          {
            iconSrc:require('../assets/image/money.png'),
            name:'资产信息',
          },
          {
            iconSrc:require('../assets/image/guanlian.png'),
            name:'关联信息',
          },
          {
            iconSrc:require('../assets/image/tag.png'),
            name:'客户标签',
          },
        ],
        // 学历选项
        educationArr:[
          {
            value: '幼儿园',
            label: '幼儿园'
          },{
            value: '小学',
            label: '小学'
          },{
            value: '中专',
            label: '中专'
          },{
            value: '职高',
            label: '职高'
          },{
            value: '技校',
            label: '技校'
          },{
            value: '初中',
            label: '初中'
          },{
            value: '高中',
            label: '高中'
          },{
            value: '大专',
            label: '大专'
          },{
            value: '本科',
            label: '本科'
          },{
            value: '硕士及以上',
            label: '硕士及以上'
          },{
            value: '其他',
            label: '其他'
          }
        ],
        // 业绩归属选项
        policybelongArr:[
          {
            value: '00',
            label: '总部团险个单业务'
          },{
            value: '01',
            label: '上分团险个单业务'
          },{
            value: '02',
            label: '个险渠道'
          },{
            value: '03',
            label: '银保渠道'
          },{
            value: '05',
            label: '网销渠道'
          },{
            value: '06',
            label: '健康险事业部'
          }
        ],
        conditionData:{
          education:'',
        },
        pickerOptionsS: {
          disabledDate:(time)=> {
            if (this.conditionData.participantsDateE) {
              return time.getTime() > new Date(this.conditionData.participantsDateE).getTime()
            }
          }
        },
        pickerOptionsE: {
          disabledDate:(time)=> {
            if (this.conditionData.participantsDateS) {
              return time.getTime() < new Date(this.conditionData.participantsDateS).getTime() - 86400000
            }
          }
        },
      }
    },
    created() {

    },
    mounted() {
      this.lunboFn();
      this.getRiskcode();
      this.getAgeSexDis();
      this.getBdNumDis();
    },
    methods: {
      _$ (el) {
        try {
          var item = document.querySelectorAll(el);
          return item.length == 1 ? item[0] : item;
        } catch (err) {
          console.log(err)
        }
      },
      lunboFn(){
        var that = this;
        var empile1 = new Empile(that._$('.demo1>.container'), {
          waitForTransition: true,
          isClickSlide: true,
          on: {
            // 卡片切换时执行
            slideChange: function () {
                //设置'当前显示的是第[xxx]张'元素的文本内容
                // activeIndexEle.textContent = this.activeIndex + 1;
                that.lunboActiveIndex = this.activeIndex;
            }
          },
          css: function (coord, absCoord) {
            var zIndex = 100 - absCoord,
              opacity = Math.pow(.92, absCoord).toFixed(3),
              scale = 'scale(' + Math.pow(.9, absCoord).toFixed(2) + ')',
              translateX = 'translateX(' + 30 * coord + 'px)',
              translateZ = 'translateZ('  + '105px)',
              rotateY= 'rotateY('+ coord * 30 +'deg)';

            var transform = [translateX,rotateY,translateZ].join(' ');
            return {
              zIndex: zIndex,
              opacity: opacity,
              transform: transform,
            }
          },

        });
      },
      toUserInfoList(){
        var that = this;
        console.log(that.conditionData)
        // this.$router.push({ path:'/userInfoList',query:that.conditionData})
        this.$router.push({ name:'UserInfoList',params:that.conditionData},)
      },
        // 客户年龄段性别分布
        getAgeSexDis(){
            let that = this;
            ageSexDis().then(response => {
                    console.log(response);
                    response.data.seriesData.forEach((item,index) => {
                      item.forEach((num,i) => {
                        item[i] = ((num-0)/10000).toFixed(2);
                      })
                    })
                    that.barTwoWayChartData.xAxisData =  response.data.xaxisData;
                    that.barTwoWayChartData.seriesData =  response.data.seriesData;
                    that.barTwoWayChartData.legendData =  response.data.legendData;
                    that.loading = false;
                }
            );
        },
        // 险种类别
        getRiskcode(){
          let that = this;
            riskcode().then(response => {
                    console.log(response);
                    response.data.seriesData.forEach((item,index) => {
                      if(item.name == '客户数量'){
                        item.data.forEach((num,i) => {
                          item.data[i] = ((num-0)/10000).toFixed(2);
                        })
                      }
                    })
                    that.barChartData.xAxisData =  response.data.xaxisData;
                    that.barChartData.seriesData =  response.data.seriesData;
                    that.loading = false;
              }
            );
        },
        // 拥有保单件数分布
        getBdNumDis(){
            let that = this;
            bdNumDis().then(response => {
                    console.log(response);
                    that.pieChartData.seriesData =  response.data.seriesData;
                    this.loading = false;
                }
            );
        },
    }
  };
</script>
<style lang="scss" scoped>
  .conPanel{
    width: 97%;
    height: 96%;
    position: absolute;
    .cardDiv {
      height: 95%;
      position: relative;
      margin-top: 5px;
      background:#FFF;
      border-radius:3px;
      /*border: 1px solid #122E83;*/
      box-sizing: border-box;
      /*position:relative;*/
      /*&.cardBg{*/
      /*   background: url("../assets/image/cardBg.png") no-repeat;*/
      /*   background-size: 100% 100%;*/
      /* }*/
      /*  &.cardBg2{*/
      /*     background: url("../assets/image/cardBg2.png") no-repeat;*/
      /*     background-size: 100% 100%;*/
      /*   }*/
      /*  &.cardBg3{*/
      /*     background: url("../assets/image/cardBg3.png") no-repeat;*/
      /*     background-size: 100% 100%;*/
      /*   }*/
      .cardTitle {
        height: 32px;
        line-height: 32px;
        font-size: 14px;
        color: #164993;
        font-weight: bold;
        padding: 0 15px;
        box-sizing: border-box;
        background: #DCE4F7;
      }
    }
  }
  .ht100p{
    height: 100%;
  }
  .ht50p{
    height: 50%;
  }
</style>
<style lang="scss">
  .age{
    width: 40px !important;
    .el-input__inner{
      padding: 0 6px !important;
    }
  }
</style>