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

<template>
  <div class="app-container">
    <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">
              <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-form v-if="lunboActiveIndex == 0" ref="conditionData" :model="conditionData" label-width="96px">
                <el-form-item class="formItemFull" label="业绩归属：" size="mini">
                  <el-input v-model="conditionData.yj"></el-input>
                </el-form-item>
                <el-form-item class="formItemFull" label="年缴费区间：" size="mini">
                  <el-input v-model="conditionData.jfS" style="width: 43%;"></el-input>
                  &nbsp;-&nbsp;
                  <el-input v-model="conditionData.jfE" style="width: 43%;"></el-input>
                </el-form-item>
                <el-form-item class="formItemFull" label="投保年份：" size="mini">
                  <el-input v-model="conditionData.money"></el-input>
                </el-form-item>
                <el-form-item class="formItemFull" label="险种类别：" size="mini">
                  <el-select v-model="conditionData.num">
                    <el-option label="险种类别1" value="有效"></el-option>
                    <el-option label="险种类别2" value="无效"></el-option>
                    <el-option label="险种类别3" value="无效"></el-option>
                    <el-option label="险种类别4" value="无效"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item class="formItemFull" label="保额区间：" size="mini">
                  <el-input v-model="conditionData.name" style="width: 43%;"></el-input>
                  &nbsp;-&nbsp;
                  <el-input v-model="conditionData.name" 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 v-model="conditionData.name"></el-input>
                </el-form-item>
                <el-form-item class="formItem" label="性别：" size="mini">
                  <el-select v-model="conditionData.num">
                    <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-select v-model="conditionData.num">
                    <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.name"></el-input>
                </el-form-item>
                <el-form-item class="formItem" label="保单件数：" size="mini">
                  <el-select v-model="conditionData.num">
                    <el-option label="3张以下" value="有效"></el-option>
                    <el-option label="4-7张" value="无效"></el-option>
                    <el-option label="8-10张" value="无效"></el-option>
                    <el-option label="10张以上" value="无效"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item class="formItem" label="客户类型：" size="mini">
                  <el-select v-model="conditionData.num">
                    <el-option label="客户类型1" value="有效"></el-option>
                    <el-option label="客户类型2" value="无效"></el-option>
                    <el-option label="客户类型3" value="无效"></el-option>
                    <el-option label="客户类型4" value="无效"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item class="formItem" label="核心客户号：" size="mini">
                  <el-input v-model="conditionData.name"></el-input>
                </el-form-item>
                <el-form-item class="formItem" label="客户层级：" size="mini">
                  <el-input v-model="conditionData.name"></el-input>
                </el-form-item>
                <el-form-item class="formItemFull labelM" label="参与方进入时间：" size="mini">
                  <el-date-picker
                    v-model="cyfDate"
                    type="date"
                    placeholder="选择日期">
                  </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.name"></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.name"></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.radio" label="1">是</el-radio>
                  <el-radio v-model="conditionData.radio" label="2">否</el-radio>
                </el-form-item>
                <el-form-item class="formItemFull" label="是否有效：" size="mini">
                  <el-radio v-model="conditionData.radio" label="1">是</el-radio>
                  <el-radio v-model="conditionData.radio" label="2">否</el-radio>
                </el-form-item>
                <el-form-item class="formItemFull" label="是否关注官微：" size="mini">
                  <el-radio v-model="conditionData.radio" label="1">是</el-radio>
                  <el-radio v-model="conditionData.radio" label="2">否</el-radio>
                </el-form-item>
                <el-form-item class="formItemFull" label="是否注册官微：" size="mini">
                  <el-radio v-model="conditionData.radio" label="1">是</el-radio>
                  <el-radio v-model="conditionData.radio" label="2">否</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 {
        // 客户年龄段性别分布
        barTwoWayChartData:{
          legendData:[],
          xAxisData:[],
          seriesData:[]
        },
        // 险种类别
        barChartData:{
          yAxisName:'单位：个',
          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:'客户标签',
          },
        ],
        conditionData:{
          name:'',
          status:'',
          money:'',
          num:'',
          sex:'女',
          age:'23',
          tag:['万能险大户','百万医疗','单身女青年','理性用户'],
        },
        cyfDate:'',
      }
    },
    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(){
        this.$router.push({ path:'/userInfoList'})
      },
        // 客户年龄段性别分布
        getAgeSexDis(){
            let that = this;
            ageSexDis().then(response => {
                    console.log(response);
                    that.barTwoWayChartData.xAxisData =  response.data.xaxisData;
                    that.barTwoWayChartData.seriesData =  response.data.seriesData;
                    that.barTwoWayChartData.legendData =  response.data.legendData;
                    this.loading = false;
                }
            );
        },
        // 险种类别
        getRiskcode(){
          let that = this;
            riskcode().then(response => {
                    console.log(response);
                    that.barChartData.xAxisData =  response.data.xaxisData;
                    that.barChartData.seriesData =  response.data.seriesData;
                    this.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>