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-form v-if="lunboActiveIndex == 1" ref="conditionData" :model="conditionData" label-width="90px">
                <el-form-item label="产品名称：" size="mini">
                  <el-input v-model="conditionData.name"></el-input>
                </el-form-item>
                <el-form-item class="mt10" label="保单状态：" size="mini">
                  <el-select v-model="conditionData.status">
                    <el-option label="有效" value="有效"></el-option>
                    <el-option label="无效" value="无效"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item class="mt10" label="首期保费：" size="mini">
                  <el-input v-model="conditionData.money"></el-input>
                </el-form-item>
                <el-form-item class="mt10" 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>
              <div v-else>

              </div>
            </div>
            <div class="infoRight">
              <div v-if="lunboActiveIndex == 1">
                <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'
  export default {
    name: "UserInfoDetails",
    components: {
      BarTwoWayChart,
      BarChart,
      BarChart3,
      PieChart
    },
    data() {
      return {
        barTwoWayChartData:{
          legendData:["男生", "女生"],
          xAxisData:["儿童", "少年", "青年", "中年", "老年", "大龄", "高龄"],
          seriesData:[
            [4, 5, 9, 12, 19, 22, 23, ],
            [5,12,12,19,19,23,23]
          ]
        },
        barChartData:{
          yAxisName:'单位：万',
          color:['#028FF3','#F29700'],
          xAxisData:['A意外险', 'H健康险', 'L寿险'],
          seriesData:[
            {
              name:'客户数量',
              data: [ 390, 330, 220]
            },
            {
              name:'保单总金额',
              data: [80, 52, 200]
            },
          ]
        },
        pieChartData:{
          color:['#0084F1','#ED475B','#F39801','#00C7FF'],
          seriesData:[
            { value: 320, name: '1-3' },
            { value: 240, name: '4-7' },
            { value: 149, name: '8-10' },
            { value: 100, name: '>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:'1',
        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:['万能险大户','百万医疗','单身女青年','理性用户'],
        },
      }
    },
    created() {

    },
    mounted() {
      this.lunboFn();
    },
    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,
            }
          },

        });
      },
    }
  };
</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;
      }
    }
  }

  .mt20{
    margin-top: 20px;
  }
  .ht100p{
    height: 100%;
  }
  .ht50p{
    height: 50%;
  }
</style>