新增组件及页面

dgtis-ui/src/assets/styles/index.scss

@@ -24,6 +24,7 @@ html {
 
 #app {
   height: 100%;
+  background: #0E1855;
 }
 
 *,
@@ -121,7 +122,87 @@ aside {
 
 //main-container全局样式
 .app-container {
-  padding: 20px;
+  padding: 10px 20px;
+  min-height: calc(100vh - 94px);
+  box-sizing: border-box;
+  .panelCol{
+    min-height: calc(100vh - 126px);
+    box-sizing: border-box;
+  }
+  .bgWhite{
+    padding: 15px;
+    background: #FFF;
+    border-radius: 5px;
+  }
+  .el-tree{
+    //background: #0E1C5B;
+    //color: #1890ff;
+  }
+  .el-tree-node__expand-icon{
+    color: #1890ff;
+  }
+  .el-tree-node__expand-icon.is-leaf {
+    color: transparent;
+    cursor: default;
+  }
+
+  .el-form-item{
+    margin-bottom: 0px;
+  }
+  .el-table--group::after, .el-table--border::after, .el-table::before{
+    background-color:#EFF2F7;
+  }
+  .el-table .el-table__header-wrapper th, .el-table .el-table__fixed-header-wrapper th{
+    background-color: #EFF2F7;
+  }
+
+
+  .el-table--enable-row-hover .el-table__body tr:hover > td {
+    background-color: #F5F5F5;
+  }
+  .el-table__expand-icon{
+    color: #02A5EB;
+  }
+  .queryParams{
+    background: #FFF;
+    margin-bottom: 15px;
+  }
+  .mb0{
+    margin-bottom: 0px;
+  }
+  .el-button--default{
+    background-color: #F39801;
+    border-color: #F39801;
+    color: #FFFFFF !important;
+  }
+  .el-button--danger,.el-button--danger:hover,.el-button--danger:active,.el-button--danger:focus{
+    background-color: #ED475B;
+    border-color: #ED475B;
+    color: #FFFFFF !important;
+  }
+  .el-button--cyan,.el-button--cyan:hover,.el-button--cyan:active,.el-button--cyan:focus{
+    background-color: #013E8A;
+    border-color: #013E8A;
+    color: #FFFFFF !important;
+  }
+  .el-button--info {
+    background: #88ACD6;
+    border-color: #88ACD6;
+    color: #FFFFFF;
+  }
+  .el-button--warning {
+    background: #21C9CD;
+    border-color: #21C9CD;
+    color: #FFFFFF !important;
+  }
+  .el-pagination.is-background .el-pager li:not(.disabled).active {
+    background-color: #013C8A;
+    color: #FFFFFF;
+  }
+  .el-tag--dark.el-tag--warning{
+    background-color: #F49B00;
+    border-color: #F49B00;
+  }
 }
 
 .components-container {
@@ -189,3 +270,8 @@ aside {
 .multiselect--active {
   z-index: 1000 !important;
 }
+.infoLeft{
+  .el-input--mini .el-input__inner {
+    width: 100px;
+  }
+}

dgtis-ui/src/assets/styles/ruoyi.scss

@@ -107,8 +107,9 @@
 
 .el-table .fixed-width .el-button--mini {
 	color: #409EFF;
-	padding-left: 0;
-	padding-right: 0;
+	//padding-left: 0;
+	//padding-right: 0;
+  padding: 4px;
 	width: inherit;
 }
 
@@ -237,4 +238,4 @@
 .top-right-btn {
 	position: relative;
 	float: right;
-}
+}

dgtis-ui/src/assets/styles/sidebar.scss

@@ -5,6 +5,7 @@
     transition: margin-left .28s;
     margin-left: $sideBarWidth;
     position: relative;
+    background: #0E1855;
   }
 
   .sidebar-container {

dgtis-ui/src/assets/styles/variables.scss

@@ -9,15 +9,22 @@ $yellow:#FEC171;
 $panGreen: #30B08F;
 
 // sidebar
-$menuText:#bfcbd9;
+//$menuText:#bfcbd9;
+//$menuActiveText:#409EFF;
+//$subMenuActiveText:#f4f4f5; // https://github.com/ElemeFE/element/issues/12951
+$menuText:#FFF;
 $menuActiveText:#409EFF;
-$subMenuActiveText:#f4f4f5; // https://github.com/ElemeFE/element/issues/12951
+$subMenuActiveText:#f4f4f5;
 
-$menuBg:#304156;
-$menuHover:#263445;
+//$menuBg:#304156;
+//$menuHover:#263445;
+$menuBg:#0E1855;
+$menuHover:#0D3279;
 
-$subMenuBg:#1f2d3d;
-$subMenuHover:#001528;
+//$subMenuBg:#1f2d3d;
+//$subMenuHover:#001528;
+$subMenuBg:#0E1855;
+$subMenuHover:#0D3279;
 
 $sideBarWidth: 200px;
 

dgtis-ui/src/components/Breadcrumb/index.vue

@@ -74,8 +74,14 @@ export default {
   margin-left: 8px;
 
   .no-redirect {
-    color: #97a8be;
+    color: #1890ff;
     cursor: text;
   }
 }
 </style>
+<style>
+  .el-breadcrumb__inner a{
+    color: #FFF   !important;
+  }
+</style>
+

dgtis-ui/src/components/Hamburger/index.vue

@@ -37,7 +37,9 @@ export default {
   width: 20px;
   height: 20px;
 }
-
+.hamburger path{
+  fill: #003E88;
+}
 .hamburger.is-active {
   transform: rotate(180deg);
 }

dgtis-ui/src/components/Pagination/index.vue

@@ -92,7 +92,7 @@ export default {
 
 <style scoped>
 .pagination-container {
-  background: #fff;
+  /*background: #fff;*/
   padding: 32px 16px;
 }
 .pagination-container.hidden {

dgtis-ui/src/layout/components/AppMain.vue

@@ -26,9 +26,12 @@ export default {
 .app-main {
   /* 50= navbar  50  */
   min-height: calc(100vh - 50px);
-  width: 100%;
+  width: 99.8%;
   position: relative;
   overflow: hidden;
+  background: #F3F3F5;
+  margin-left: 0.2%;
+  /*box-shadow: -1px 0px 10px 0px #091442;*/
 }
 
 .fixed-header+.app-main {

dgtis-ui/src/layout/components/Navbar.vue

@@ -1,13 +1,13 @@
 <template>
   <div class="navbar">
     <hamburger id="hamburger-container" :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
-
-    <breadcrumb id="breadcrumb-container" class="breadcrumb-container" />
+    <div class="sysName">后台管理系统</div>
+<!--    <breadcrumb id="breadcrumb-container" class="breadcrumb-container" />-->
 
     <div class="right-menu">
       <template v-if="device!=='mobile'">
         <search id="header-search" class="right-menu-item" />
-        
+
         <el-tooltip content="源码地址" effect="dark" placement="bottom">
           <ruo-yi-git id="ruoyi-git" class="right-menu-item hover-effect" />
         </el-tooltip>
@@ -107,9 +107,15 @@ export default {
   height: 50px;
   overflow: hidden;
   position: relative;
-  background: #fff;
+  background: #FFF;
   box-shadow: 0 1px 4px rgba(0,21,41,.08);
-
+  .sysName{
+    line-height: 50px;
+    font-size: 16px;
+    font-weight: bold;
+    color:#003C8A;
+    display: inline-block;
+  }
   .hamburger-container {
     line-height: 46px;
     height: 100%;
@@ -146,7 +152,7 @@ export default {
       padding: 0 8px;
       height: 100%;
       font-size: 18px;
-      color: #5a5e66;
+      color: #333;
       vertical-align: text-bottom;
 
       &.hover-effect {

dgtis-ui/src/layout/components/Sidebar/Logo.vue

@@ -3,18 +3,18 @@
     <transition name="sidebarLogoFade">
       <router-link v-if="collapse" key="collapse" class="sidebar-logo-link" to="/">
         <img v-if="logo" :src="logo" class="sidebar-logo">
-        <h1 v-else class="sidebar-title">{{ title }} </h1>
+<!--        <h1 v-else class="sidebar-title">{{ title }} </h1>-->
       </router-link>
       <router-link v-else key="expand" class="sidebar-logo-link" to="/">
         <img v-if="logo" :src="logo" class="sidebar-logo">
-        <h1 class="sidebar-title">{{ title }} </h1>
+<!--        <h1 class="sidebar-title">{{ title }} </h1>-->
       </router-link>
     </transition>
   </div>
 </template>
 
 <script>
-import logoImg from '@/assets/logo/logo.png'
+import logoImg from '@/assets/logo/logo-white.png'
 
 export default {
   name: 'SidebarLogo',
@@ -48,7 +48,7 @@ export default {
   width: 100%;
   height: 50px;
   line-height: 50px;
-  background: #2b2f3a;
+  background: #013C8A;
   text-align: center;
   overflow: hidden;
 
@@ -57,8 +57,9 @@ export default {
     width: 100%;
 
     & .sidebar-logo {
-      width: 32px;
-      height: 32px;
+      /*width: 32px;*/
+      /*height: 32px;*/
+      width: 80%;
       vertical-align: middle;
       margin-right: 12px;
     }

dgtis-ui/src/layout/components/TagsView/index.vue

@@ -76,8 +76,10 @@ export default {
     activeStyle(tag) {
       if (!this.isActive(tag)) return {};
       return {
-        "background-color": this.theme,
-        "border-color": this.theme
+        // "background-color": this.theme,
+        // "border-color": this.theme
+        "background-color": "#DCE4F7",
+        "border-color": "#dedede"
       };
     },
     isAffix(tag) {
@@ -212,9 +214,9 @@ export default {
 .tags-view-container {
   height: 34px;
   width: 100%;
-  background: #fff;
-  border-bottom: 1px solid #d8dce5;
-  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04);
+  background: #FFF;
+  border-bottom: 1px solid #EBEBEB;
+  /*box-shadow: 0 1px 3px 0 rgba(11,20,75, .12), 0 0 3px 0 rgba(11,20,75, .04);*/
   .tags-view-wrapper {
     .tags-view-item {
       display: inline-block;
@@ -222,9 +224,9 @@ export default {
       cursor: pointer;
       height: 26px;
       line-height: 26px;
-      border: 1px solid #d8dce5;
-      color: #495060;
-      background: #fff;
+      border: 1px solid #EBEBEB;
+      color: #333;
+      background: #FFF;
       padding: 0 8px;
       font-size: 12px;
       margin-left: 5px;
@@ -236,12 +238,12 @@ export default {
         margin-right: 15px;
       }
       &.active {
-        background-color: #42b983;
-        color: #fff;
-        border-color: #42b983;
+        background-color: #DCE4F7;
+        color: #084E93;
+        border-color: #084E93;
         &::before {
           content: '';
-          background: #fff;
+          background: #1890ff;
           display: inline-block;
           width: 8px;
           height: 8px;

dgtis-ui/src/settings.js

@@ -1,5 +1,5 @@
 module.exports = {
-  title: '若依管理系统',
+  title: '上海人寿后台管理系统',
 
   /**
    * 是否系统布局配置

dgtis-ui/src/views/index.vue

@@ -1,98 +1,334 @@
 <template>
-  <div class="dashboard-editor-container">
+  <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>
 
-    <panel-group @handleSetLineChartData="handleSetLineChartData" />
+              </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>
 
-    <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
-      <line-chart :chart-data="lineChartData" />
-    </el-row>
-
-    <el-row :gutter="32">
-      <el-col :xs="24" :sm="24" :lg="8">
-        <div class="chart-wrapper">
-          <raddar-chart />
-        </div>
-      </el-col>
-      <el-col :xs="24" :sm="24" :lg="8">
-        <div class="chart-wrapper">
-          <pie-chart />
-        </div>
-      </el-col>
-      <el-col :xs="24" :sm="24" :lg="8">
-        <div class="chart-wrapper">
-          <bar-chart />
-        </div>
-      </el-col>
-    </el-row>
-
-    
+              </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 PanelGroup from './dashboard/PanelGroup'
-import LineChart from './dashboard/LineChart'
-import RaddarChart from './dashboard/RaddarChart'
-import PieChart from './dashboard/PieChart'
-import BarChart from './dashboard/BarChart'
+  import '../assets/styles/lunbo.css'
+  import '../assets/js/empile.js'
+  // import '../assets/js/lunbo.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() {
 
-const lineChartData = {
-  newVisitis: {
-    expectedData: [100, 120, 161, 134, 105, 160, 165],
-    actualData: [120, 82, 91, 154, 162, 140, 145]
-  },
-  messages: {
-    expectedData: [200, 192, 120, 144, 160, 130, 140],
-    actualData: [180, 160, 151, 106, 145, 150, 130]
-  },
-  purchases: {
-    expectedData: [80, 100, 121, 104, 105, 90, 100],
-    actualData: [120, 90, 100, 138, 142, 130, 130]
-  },
-  shoppings: {
-    expectedData: [130, 140, 141, 142, 145, 150, 160],
-    actualData: [120, 82, 91, 154, 162, 140, 130]
-  }
-}
+    },
+    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)';
 
-export default {
-  name: 'Index',
-  components: {
-    PanelGroup,
-    LineChart,
-    RaddarChart,
-    PieChart,
-    BarChart
-  },
-  data() {
-    return {
-      lineChartData: lineChartData.newVisitis
-    }
-  },
-  methods: {
-    handleSetLineChartData(type) {
-      this.lineChartData = lineChartData[type]
+            var transform = [translateX,rotateY,translateZ].join(' ');
+            return {
+              zIndex: zIndex,
+              opacity: opacity,
+              transform: transform,
+            }
+          },
+
+        });
+      },
     }
-  }
-}
+  };
 </script>
-
 <style lang="scss" scoped>
-.dashboard-editor-container {
-  padding: 32px;
-  background-color: rgb(240, 242, 245);
-  position: relative;
-
-  .chart-wrapper {
-    background: #fff;
-    padding: 16px 16px 0;
-    margin-bottom: 32px;
+  .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;
+      }
+    }
   }
-}
 
-@media (max-width:1024px) {
-  .chart-wrapper {
-    padding: 8px;
+  .mt20{
+    margin-top: 20px;
+  }
+  .ht100p{
+    height: 100%;
+  }
+  .ht50p{
+    height: 50%;
   }
-}
 </style>

dgtis-ui/src/views/login.vue

@@ -1,55 +1,64 @@
 <template>
-  <div class="login">
-    <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form">
-      <h3 class="title">若依后台管理系统</h3>
-      <el-form-item prop="username">
-        <el-input v-model="loginForm.username" type="text" auto-complete="off" placeholder="账号">
-          <svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" />
-        </el-input>
-      </el-form-item>
-      <el-form-item prop="password">
-        <el-input
-          v-model="loginForm.password"
-          type="password"
-          auto-complete="off"
-          placeholder="密码"
-          @keyup.enter.native="handleLogin"
-        >
-          <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
-        </el-input>
-      </el-form-item>
-      <el-form-item prop="code">
-        <el-input
-          v-model="loginForm.code"
-          auto-complete="off"
-          placeholder="验证码"
-          style="width: 63%"
-          @keyup.enter.native="handleLogin"
-        >
-          <svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" />
-        </el-input>
-        <div class="login-code">
-          <img :src="codeUrl" @click="getCode" class="login-code-img"/>
-        </div>
-      </el-form-item>
-      <el-checkbox v-model="loginForm.rememberMe" style="margin:0px 0px 25px 0px;">记住密码</el-checkbox>
-      <el-form-item style="width:100%;">
-        <el-button
-          :loading="loading"
-          size="medium"
-          type="primary"
-          style="width:100%;"
-          @click.native.prevent="handleLogin"
-        >
-          <span v-if="!loading">登 录</span>
-          <span v-else>登 录 中...</span>
-        </el-button>
-      </el-form-item>
-    </el-form>
-    <!--  底部  -->
-    <div class="el-login-footer">
-      <span>Copyright © 2018-2019 ruoyi.vip All Rights Reserved.</span>
+  <div class="allConDiv">
+    <div class="headerDiv">
+      <img src="../assets/logo/logo.png"/>
+      <span class="line"></span>
+      <span class="text">管理系统</span>
     </div>
+    <div class="login">
+      <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form">
+
+        <h3 class="title"><span class="orangeLine"></span>用户登录</h3>
+        <el-form-item prop="username">
+          <el-input v-model="loginForm.username" type="text" auto-complete="off" placeholder="账号">
+            <svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" />
+          </el-input>
+        </el-form-item>
+        <el-form-item prop="password">
+          <el-input
+            v-model="loginForm.password"
+            type="password"
+            auto-complete="off"
+            placeholder="密码"
+            @keyup.enter.native="handleLogin"
+          >
+            <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
+          </el-input>
+        </el-form-item>
+        <el-form-item prop="code">
+          <el-input
+            v-model="loginForm.code"
+            auto-complete="off"
+            placeholder="验证码"
+            style="width: 63%"
+            @keyup.enter.native="handleLogin"
+          >
+            <svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" />
+          </el-input>
+          <div class="login-code">
+            <img :src="codeUrl" @click="getCode" class="login-code-img"/>
+          </div>
+        </el-form-item>
+        <el-checkbox v-model="loginForm.rememberMe" style="margin:0px 0px 25px 0px;">记住密码</el-checkbox>
+        <el-form-item style="width:100%;">
+          <el-button
+            :loading="loading"
+            size="medium"
+            type="primary"
+            style="width:100%;background: #F39800;border-color: #F39800;"
+            @click.native.prevent="handleLogin"
+          >
+            <span v-if="!loading">登 录</span>
+            <span v-else>登 录 中...</span>
+          </el-button>
+        </el-form-item>
+      </el-form>
+      <!--  底部  -->
+      <!--<div class="el-login-footer">-->
+        <!--<span>Copyright © 2018-2019 ruoyi.vip All Rights Reserved.</span>-->
+      <!--</div>-->
+    </div>
+    <div class="footerDiv"> © 2020上海人寿保险股份有限公司</div>
   </div>
 </template>
 
@@ -145,18 +154,29 @@ export default {
 <style rel="stylesheet/scss" lang="scss">
 .login {
   display: flex;
-  justify-content: center;
+  justify-content: flex-end;
   align-items: center;
-  height: 100%;
-  background-image: url("../assets/image/login-background.jpg");
+  height: 83%;
+  background-image: url("../assets/image/login-background.png");
   background-size: cover;
+  padding: 0 80px;
+  box-sizing: border-box;
 }
 .title {
   margin: 0px auto 30px auto;
-  text-align: center;
+  /*text-align: center;*/
   color: #707070;
+  position: relative;
+}
+.orangeLine{
+  height: 18px;
+  width: 4px;
+  background: #F39800;
+  display: inline-block;
+  position: absolute;
+  left: -25px;
+  top: 0;
 }
-
 .login-form {
   border-radius: 6px;
   background: #ffffff;
@@ -203,4 +223,39 @@ export default {
 .login-code-img {
   height: 38px;
 }
+.allConDiv{
+  height: 100%;
+  .headerDiv{
+    height: 10%;
+    display: flex;
+    align-items: center;
+    background:#FFF;
+    padding: 0 50px;
+    box-sizing:border-box;
+    img{
+      height: 40%;
+    }
+    .line{
+      display: inline-block;
+      height: 30%;
+      width: 2px;
+      background: #333;
+      margin: 0 6px;
+    }
+    .text{
+      font-size: 20px;
+      color: #333;
+      font-weight: bold;
+    }
+  }
+  .footerDiv{
+    height: 7%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background:#FFF;
+    font-size: 14px;
+    color: #333;
+  }
+}
 </style>

dgtis-ui/src/views/system/dept/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="app-container">
-    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch">
-      <el-form-item label="部门名称" prop="deptName">
+    <el-form class="queryParams bgWhite" :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch">
+      <el-form-item label="部门名称:" prop="deptName">
         <el-input
           v-model="queryParams.deptName"
           placeholder="请输入部门名称"
@@ -10,7 +10,7 @@
           @keyup.enter.native="handleQuery"
         />
       </el-form-item>
-      <el-form-item label="状态" prop="status">
+      <el-form-item label="状态:" prop="status">
         <el-select v-model="queryParams.status" placeholder="部门状态" clearable size="small">
           <el-option
             v-for="dict in statusOptions"
@@ -25,63 +25,73 @@
         <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
       </el-form-item>
     </el-form>
-
-    <el-row :gutter="10" class="mb8">
-      <el-col :span="1.5">
-        <el-button
-          type="primary"
-          icon="el-icon-plus"
-          size="mini"
-          @click="handleAdd"
-          v-hasPermi="['system:dept:add']"
-        >新增</el-button>
-      </el-col>
-      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
-    </el-row>
-
-    <el-table
-      v-loading="loading"
-      :data="deptList"
-      row-key="deptId"
-      default-expand-all
-      :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
-    >
-      <el-table-column prop="deptName" label="部门名称" width="260"></el-table-column>
-      <el-table-column prop="orderNum" label="排序" width="200"></el-table-column>
-      <el-table-column prop="status" label="状态" :formatter="statusFormat" width="100"></el-table-column>
-      <el-table-column label="创建时间" align="center" prop="createTime" width="200">
-        <template slot-scope="scope">
-          <span>{{ parseTime(scope.row.createTime) }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
-        <template slot-scope="scope">
-          <el-button 
-            size="mini" 
-            type="text" 
-            icon="el-icon-edit" 
-            @click="handleUpdate(scope.row)"
-            v-hasPermi="['system:dept:edit']"
-          >修改</el-button>
-          <el-button 
-            size="mini" 
-            type="text" 
-            icon="el-icon-plus" 
-            @click="handleAdd(scope.row)"
+    <div class="bgWhite">
+      <el-row :gutter="10" class="mb8">
+        <el-col :span="1.5">
+          <el-button
+            type="cyan"
+            icon="el-icon-plus"
+            size="mini"
+            @click="handleAdd"
             v-hasPermi="['system:dept:add']"
           >新增</el-button>
           <el-button
-            v-if="scope.row.parentId != 0"
+            type="warning"
+            icon="el-icon-plus"
             size="mini"
-            type="text"
-            icon="el-icon-delete"
-            @click="handleDelete(scope.row)"
-            v-hasPermi="['system:dept:remove']"
-          >删除</el-button>
-        </template>
-      </el-table-column>
-    </el-table>
+            @click="isExpandAll"
+          >展开/折叠</el-button>
+        </el-col>
+        <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+      </el-row>
 
+      <el-table
+        v-loading="loading"
+        :data="deptList"
+        ref="treeTable"
+        row-key="deptId"
+        default-expand-all
+        :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
+      >
+        <el-table-column prop="deptName" label="部门名称" width="260"></el-table-column>
+        <el-table-column prop="orderNum" label="排序" width="200"></el-table-column>
+        <el-table-column label="状态"  width="100">
+          <template slot-scope="scope">
+            <span class="statusTag">{{statusFormat(scope.row)}}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="创建时间" align="center" prop="createTime" width="200">
+          <template slot-scope="scope">
+            <span>{{ parseTime(scope.row.createTime) }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+          <template slot-scope="scope">
+            <el-button
+              size="mini"
+              icon="el-icon-edit"
+              @click="handleUpdate(scope.row)"
+              v-hasPermi="['system:dept:edit']"
+            >修改</el-button>
+            <el-button
+              size="mini"
+              type="cyan"
+              icon="el-icon-plus"
+              @click="handleAdd(scope.row)"
+              v-hasPermi="['system:dept:add']"
+            >新增</el-button>
+            <el-button
+              v-if="scope.row.parentId != 0"
+              size="mini"
+              type="danger"
+              icon="el-icon-delete"
+              @click="handleDelete(scope.row)"
+              v-hasPermi="['system:dept:remove']"
+            >删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
     <!-- 添加或修改部门对话框 -->
     <el-dialog :title="title" :visible.sync="open" width="600px" append-to-body>
       <el-form ref="form" :model="form" :rules="rules" label-width="80px">
@@ -193,7 +203,8 @@ export default {
             trigger: "blur"
           }
         ]
-      }
+      },
+      isExpand:true,
     };
   },
   created() {
@@ -205,6 +216,7 @@ export default {
   methods: {
     /** 查询部门列表 */
     getList() {
+      var that = this;
       this.loading = true;
       listDept(this.queryParams).then(response => {
         this.deptList = this.handleTree(response.data, "deptId");
@@ -223,7 +235,7 @@ export default {
       };
     },
     // 字典状态字典翻译
-    statusFormat(row, column) {
+    statusFormat(row) {
       return this.selectDictLabel(this.statusOptions, row.status);
     },
     // 取消按钮
@@ -310,7 +322,51 @@ export default {
           this.getList();
           this.msgSuccess("删除成功");
         })
-    }
+    },
+    // 树形展开折叠
+    forArr(arr, isExpand) {
+      arr.forEach(i => {
+        this.$refs.treeTable.toggleRowExpansion(i, isExpand)
+        if (i.children) {
+          this.forArr(i.children, isExpand)
+        }
+      })
+    },
+    isExpandAll(){
+      this.isExpand = !this.isExpand;
+      if(this.isExpand){
+        this.forArr(this.deptList, true)
+      }else{
+        this.forArr(this.deptList, false)
+      }
+    },
   }
 };
-</script>
+</script>
+<style>
+  .el-carousel__item h3 {
+    color: #475669;
+    font-size: 14px;
+    opacity: 0.75;
+    line-height: 200px;
+    margin: 0;
+  }
+
+  .el-carousel__item:nth-child(2n) {
+    background-color: #99a9bf;
+  }
+
+  .el-carousel__item:nth-child(2n+1) {
+    background-color: #d3dce6;
+  }
+  .statusTag{
+    display: inline-block;
+    height: 24px;
+    line-height: 24px;
+    font-size: 12px;
+    color: #FFF;
+    padding: 0 8px;
+    border-radius: 12px;
+    background: #24C9C5;
+  }
+</style>

dgtis-ui/src/views/system/role/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="app-container">
-    <el-form :model="queryParams" ref="queryForm" v-show="showSearch" :inline="true">
+    <el-form class="queryParams bgWhite" :model="queryParams" ref="queryForm" v-show="showSearch" :inline="true">
       <el-form-item label="角色名称" prop="roleName">
         <el-input
           v-model="queryParams.roleName"
@@ -21,7 +21,7 @@
           @keyup.enter.native="handleQuery"
         />
       </el-form-item>
-      <el-form-item label="状态" prop="status">
+      <el-form-item label="角色状态" prop="status">
         <el-select
           v-model="queryParams.status"
           placeholder="角色状态"
@@ -37,7 +37,7 @@
           />
         </el-select>
       </el-form-item>
-      <el-form-item label="创建时间">
+      <el-form-item class="mt10" label="创建时间">
         <el-date-picker
           v-model="dateRange"
           size="small"
@@ -49,110 +49,117 @@
           end-placeholder="结束日期"
         ></el-date-picker>
       </el-form-item>
-      <el-form-item>
+      <el-form-item class="mt10">
         <el-button type="cyan" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
         <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
       </el-form-item>
     </el-form>
 
-    <el-row :gutter="10" class="mb8">
-      <el-col :span="1.5">
-        <el-button
-          type="primary"
-          icon="el-icon-plus"
-          size="mini"
-          @click="handleAdd"
-          v-hasPermi="['system:role:add']"
-        >新增</el-button>
-      </el-col>
-      <el-col :span="1.5">
-        <el-button
-          type="success"
-          icon="el-icon-edit"
-          size="mini"
-          :disabled="single"
-          @click="handleUpdate"
-          v-hasPermi="['system:role:edit']"
-        >修改</el-button>
-      </el-col>
-      <el-col :span="1.5">
-        <el-button
-          type="danger"
-          icon="el-icon-delete"
-          size="mini"
-          :disabled="multiple"
-          @click="handleDelete"
-          v-hasPermi="['system:role:remove']"
-        >删除</el-button>
-      </el-col>
-      <el-col :span="1.5">
-        <el-button
-          type="warning"
-          icon="el-icon-download"
-          size="mini"
-          @click="handleExport"
-          v-hasPermi="['system:role:export']"
-        >导出</el-button>
-      </el-col>
-      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
-    </el-row>
-
-    <el-table v-loading="loading" :data="roleList" @selection-change="handleSelectionChange">
-      <el-table-column type="selection" width="55" align="center" />
-      <el-table-column label="角色编号" prop="roleId" width="120" />
-      <el-table-column label="角色名称" prop="roleName" :show-overflow-tooltip="true" width="150" />
-      <el-table-column label="权限字符" prop="roleKey" :show-overflow-tooltip="true" width="150" />
-      <el-table-column label="显示顺序" prop="roleSort" width="100" />
-      <el-table-column label="状态" align="center" width="100">
-        <template slot-scope="scope">
-          <el-switch
-            v-model="scope.row.status"
-            active-value="0"
-            inactive-value="1"
-            @change="handleStatusChange(scope.row)"
-          ></el-switch>
-        </template>
-      </el-table-column>
-      <el-table-column label="创建时间" align="center" prop="createTime" width="180">
-        <template slot-scope="scope">
-          <span>{{ parseTime(scope.row.createTime) }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
-        <template slot-scope="scope">
+    <div class="bgWhite">
+      <el-row :gutter="10" class="mb8">
+        <el-col :span="1.5">
           <el-button
+            type="cyan"
+            icon="el-icon-plus"
             size="mini"
-            type="text"
-            icon="el-icon-edit"
-            @click="handleUpdate(scope.row)"
-            v-hasPermi="['system:role:edit']"
-          >修改</el-button>
+            @click="handleAdd"
+            v-hasPermi="['system:role:add']"
+          >新增</el-button>
+        </el-col>
+        <el-col :span="1.5">
           <el-button
+            icon="el-icon-edit"
             size="mini"
-            type="text"
-            icon="el-icon-circle-check"
-            @click="handleDataScope(scope.row)"
-            v-hasPermi="['system:role:edit']"
-          >数据权限</el-button>
+            :disabled="single"
+            @click="handleUpdate"
+            v-hasPermi="['system:role:edit']"s
+          >修改</el-button>
+        </el-col>
+        <el-col :span="1.5">
           <el-button
-            size="mini"
-            type="text"
+            type="danger"
             icon="el-icon-delete"
-            @click="handleDelete(scope.row)"
+            size="mini"
+            :disabled="multiple"
+            @click="handleDelete"
             v-hasPermi="['system:role:remove']"
           >删除</el-button>
-        </template>
-      </el-table-column>
-    </el-table>
+        </el-col>
+        <el-col :span="1.5">
+          <el-button
+            type="warning"
+            icon="el-icon-download"
+            size="mini"
+            @click="handleExport"
+            v-hasPermi="['system:role:export']"
+          >导出</el-button>
+        </el-col>
+        <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+      </el-row>
 
-    <pagination
-      v-show="total>0"
-      :total="total"
-      :page.sync="queryParams.pageNum"
-      :limit.sync="queryParams.pageSize"
-      @pagination="getList"
-    />
+      <el-table v-loading="loading" :data="roleList" @selection-change="handleSelectionChange">
+        <el-table-column type="selection" width="55" align="center" />
+        <el-table-column label="角色编号" prop="roleId" width="90" />
+        <el-table-column label="角色名称" prop="roleName" :show-overflow-tooltip="true" width="150" />
+        <el-table-column label="权限字符" prop="roleKey" :show-overflow-tooltip="true" width="100" />
+        <el-table-column label="显示顺序" prop="roleSort" width="100" />
+        <el-table-column label="角色状态" align="center" width="100">
+          <template slot-scope="scope">
+            <el-switch
+              v-model="scope.row.status"
+              active-value="0"
+              active-color="#25C7C8"
+              inactive-value="1"
+              @change="handleStatusChange(scope.row)"
+            ></el-switch>
+          </template>
+        </el-table-column>
+        <el-table-column label="创建时间" align="center" prop="createTime" width="180">
+          <template slot-scope="scope">
+            <span>{{ parseTime(scope.row.createTime) }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" align="center" width="300" class-name="small-padding fixed-width">
+          <template slot-scope="scope">
+            <el-button
+              size="mini"
+              icon="el-icon-edit"
+              @click="handleUpdate(scope.row)"
+              v-hasPermi="['system:role:edit']"
+            >修改</el-button>
+            <el-button
+              size="mini"
+              type="cyan"
+              icon="el-icon-circle-check"
+              @click="handleDataScope(scope.row)"
+              v-hasPermi="['system:role:edit']"
+            >数据权限</el-button>
+            <el-button
+              size="mini"
+              type="warning"
+              icon="el-icon-s-custom"
+              @click="handleDataScope(scope.row)"
+              v-hasPermi="['system:role:edit']"
+            >分配用户</el-button>
+            <el-button
+              size="mini"
+              type="danger"
+              icon="el-icon-delete"
+              @click="handleDelete(scope.row)"
+              v-hasPermi="['system:role:remove']"
+            >删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
 
+      <pagination
+        v-show="total>0"
+        :total="total"
+        :page.sync="queryParams.pageNum"
+        :limit.sync="queryParams.pageSize"
+        @pagination="getList"
+      />
+    </div>
     <!-- 添加或修改角色配置对话框 -->
     <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
       <el-form ref="form" :model="form" :rules="rules" label-width="80px">
@@ -585,4 +592,4 @@ export default {
     }
   }
 };
-</script>
+</script>

dgtis-ui/src/views/system/user/index.vue

@@ -1,200 +1,212 @@
 <template>
   <div class="app-container">
-    <el-row :gutter="20">
+    <el-row :gutter="10">
       <!--部门数据-->
-      <el-col :span="4" :xs="24">
-        <div class="head-container">
-          <el-input
-            v-model="deptName"
-            placeholder="请输入部门名称"
-            clearable
-            size="small"
-            prefix-icon="el-icon-search"
-            style="margin-bottom: 20px"
-          />
-        </div>
-        <div class="head-container">
-          <el-tree
-            :data="deptOptions"
-            :props="defaultProps"
-            :expand-on-click-node="false"
-            :filter-node-method="filterNode"
-            ref="tree"
-            default-expand-all
-            @node-click="handleNodeClick"
-          />
-        </div>
-      </el-col>
-      <!--用户数据-->
-      <el-col :span="20" :xs="24">
-        <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
-          <el-form-item label="用户名称" prop="userName">
+      <el-col class="deptCol" :span="deptCol" :xs="24">
+        <div class="panelCol bgWhite" style="position: relative">
+          <div class="head-container" v-if="isShowDept">
             <el-input
-              v-model="queryParams.userName"
-              placeholder="请输入用户名称"
+              v-model="deptName"
+              placeholder="请输入部门名称"
               clearable
               size="small"
-              style="width: 240px"
-              @keyup.enter.native="handleQuery"
+              prefix-icon="el-icon-search"
+              style="margin-bottom: 20px"
             />
-          </el-form-item>
-          <el-form-item label="手机号码" prop="phonenumber">
-            <el-input
-              v-model="queryParams.phonenumber"
-              placeholder="请输入手机号码"
-              clearable
-              size="small"
-              style="width: 240px"
-              @keyup.enter.native="handleQuery"
+          </div>
+          <div class="head-container" v-if="isShowDept">
+            <el-tree
+              :data="deptOptions"
+              :props="defaultProps"
+              :expand-on-click-node="false"
+              :filter-node-method="filterNode"
+              ref="tree"
+              default-expand-all
+              @node-click="handleNodeClick"
             />
-          </el-form-item>
-          <el-form-item label="状态" prop="status">
-            <el-select
-              v-model="queryParams.status"
-              placeholder="用户状态"
-              clearable
-              size="small"
-              style="width: 240px"
-            >
-              <el-option
-                v-for="dict in statusOptions"
-                :key="dict.dictValue"
-                :label="dict.dictLabel"
-                :value="dict.dictValue"
+          </div>
+          <div :class="isHideTreeIcon.divClass" @click="toggleDeptClick">
+            <i :class="isHideTreeIcon.arrowClass"></i>
+          </div>
+        </div>
+      </el-col>
+      <!--用户数据-->
+      <el-col :span="dataCol" :xs="24">
+        <div class="panelCol">
+          <el-form class="queryParams bgWhite" :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
+            <el-form-item label="登录名称" prop="userName">
+              <el-input
+                v-model="queryParams.userName"
+                placeholder="请输入用户名称"
+                clearable
+                size="small"
+                style="width: 240px"
+                @keyup.enter.native="handleQuery"
               />
-            </el-select>
-          </el-form-item>
-          <el-form-item label="创建时间">
-            <el-date-picker
-              v-model="dateRange"
-              size="small"
-              style="width: 240px"
-              value-format="yyyy-MM-dd"
-              type="daterange"
-              range-separator="-"
-              start-placeholder="开始日期"
-              end-placeholder="结束日期"
-            ></el-date-picker>
-          </el-form-item>
-          <el-form-item>
-            <el-button type="cyan" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
-            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
-          </el-form-item>
-        </el-form>
-
-        <el-row :gutter="10" class="mb8">
-          <el-col :span="1.5">
-            <el-button
-              type="primary"
-              icon="el-icon-plus"
-              size="mini"
-              @click="handleAdd"
-              v-hasPermi="['system:user:add']"
-            >新增</el-button>
-          </el-col>
-          <el-col :span="1.5">
-            <el-button
-              type="success"
-              icon="el-icon-edit"
-              size="mini"
-              :disabled="single"
-              @click="handleUpdate"
-              v-hasPermi="['system:user:edit']"
-            >修改</el-button>
-          </el-col>
-          <el-col :span="1.5">
-            <el-button
-              type="danger"
-              icon="el-icon-delete"
-              size="mini"
-              :disabled="multiple"
-              @click="handleDelete"
-              v-hasPermi="['system:user:remove']"
-            >删除</el-button>
-          </el-col>
-          <el-col :span="1.5">
-            <el-button
-              type="info"
-              icon="el-icon-upload2"
-              size="mini"
-              @click="handleImport"
-              v-hasPermi="['system:user:import']"
-            >导入</el-button>
-          </el-col>
-          <el-col :span="1.5">
-            <el-button
-              type="warning"
-              icon="el-icon-download"
-              size="mini"
-              @click="handleExport"
-              v-hasPermi="['system:user:export']"
-            >导出</el-button>
-          </el-col>
-          <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
-        </el-row>
+            </el-form-item>
+            <el-form-item label="手机号码" prop="phonenumber">
+              <el-input
+                v-model="queryParams.phonenumber"
+                placeholder="请输入手机号码"
+                clearable
+                size="small"
+                style="width: 240px"
+                @keyup.enter.native="handleQuery"
+              />
+            </el-form-item>
+            <el-form-item class="mt10" label="用户状态" prop="status">
+              <el-select
+                v-model="queryParams.status"
+                placeholder="用户状态"
+                clearable
+                size="small"
+                style="width: 240px"
+              >
+                <el-option
+                  v-for="dict in statusOptions"
+                  :key="dict.dictValue"
+                  :label="dict.dictLabel"
+                  :value="dict.dictValue"
+                />
+              </el-select>
+            </el-form-item>
+            <el-form-item class="mt10" label="创建时间">
+              <el-date-picker
+                v-model="dateRange"
+                size="small"
+                style="width: 240px"
+                value-format="yyyy-MM-dd"
+                type="daterange"
+                range-separator="-"
+                start-placeholder="开始日期"
+                end-placeholder="结束日期"
+              ></el-date-picker>
+            </el-form-item>
+            <el-form-item class="mt10">
+              <el-button type="cyan" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+              <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+            </el-form-item>
+          </el-form>
+          <div class="bgWhite">
+            <el-row :gutter="10" class="mb8">
+              <el-col :span="1.5">
+                <el-button
+                  type="cyan"
+                  icon="el-icon-plus"
+                  size="mini"
+                  @click="handleAdd"
+                  v-hasPermi="['system:user:add']"
+                >新增</el-button>
+              </el-col>
+              <el-col :span="1.5">
+                <el-button
+                  icon="el-icon-edit"
+                  size="mini"
+                  :disabled="single"
+                  @click="handleUpdate"
+                  v-hasPermi="['system:user:edit']"
+                >修改</el-button>
+              </el-col>
+              <el-col :span="1.5">
+                <el-button
+                  type="danger"
+                  icon="el-icon-delete"
+                  size="mini"
+                  :disabled="multiple"
+                  @click="handleDelete"
+                  v-hasPermi="['system:user:remove']"
+                >删除</el-button>
+              </el-col>
+              <el-col :span="1.5">
+                <el-button
+                  type="info"
+                  icon="el-icon-upload2"
+                  size="mini"
+                  @click="handleImport"
+                  v-hasPermi="['system:user:import']"
+                >导入</el-button>
+              </el-col>
+              <el-col :span="1.5">
+                <el-button
+                  type="warning"
+                  icon="el-icon-download"
+                  size="mini"
+                  @click="handleExport"
+                  v-hasPermi="['system:user:export']"
+                >导出</el-button>
+              </el-col>
+              <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+            </el-row>
 
-        <el-table v-loading="loading" :data="userList" @selection-change="handleSelectionChange">
-          <el-table-column type="selection" width="50" align="center" />
-          <el-table-column label="用户编号" align="center" prop="userId" />
-          <el-table-column label="用户名称" align="center" prop="userName" :show-overflow-tooltip="true" />
-          <el-table-column label="用户昵称" align="center" prop="nickName" :show-overflow-tooltip="true" />
-          <el-table-column label="部门" align="center" prop="dept.deptName" :show-overflow-tooltip="true" />
-          <el-table-column label="手机号码" align="center" prop="phonenumber" width="120" />
-          <el-table-column label="状态" align="center">
-            <template slot-scope="scope">
-              <el-switch
-                v-model="scope.row.status"
-                active-value="0"
-                inactive-value="1"
-                @change="handleStatusChange(scope.row)"
-              ></el-switch>
-            </template>
-          </el-table-column>
-          <el-table-column label="创建时间" align="center" prop="createTime" width="160">
-            <template slot-scope="scope">
-              <span>{{ parseTime(scope.row.createTime) }}</span>
-            </template>
-          </el-table-column>
-          <el-table-column
-            label="操作"
-            align="center"
-            width="160"
-            class-name="small-padding fixed-width"
-          >
-            <template slot-scope="scope">
-              <el-button
-                size="mini"
-                type="text"
-                icon="el-icon-edit"
-                @click="handleUpdate(scope.row)"
-                v-hasPermi="['system:user:edit']"
-              >修改</el-button>
-              <el-button
-                v-if="scope.row.userId !== 1"
-                size="mini"
-                type="text"
-                icon="el-icon-delete"
-                @click="handleDelete(scope.row)"
-                v-hasPermi="['system:user:remove']"
-              >删除</el-button>
-              <el-button
-                size="mini"
-                type="text"
-                icon="el-icon-key"
-                @click="handleResetPwd(scope.row)"
-                v-hasPermi="['system:user:resetPwd']"
-              >重置</el-button>
-            </template>
-          </el-table-column>
-        </el-table>
+            <el-table v-loading="loading" :data="userList" @selection-change="handleSelectionChange">
+              <el-table-column type="selection" width="40" align="center" />
+              <el-table-column label="用户ID" width="80" align="center" prop="userId" />
+              <el-table-column label="登录名称" align="center" prop="nickName" :show-overflow-tooltip="true" />
+              <el-table-column label="用户名称" align="center" prop="userName" :show-overflow-tooltip="true" />
+              <el-table-column label="部门" align="center" prop="dept.deptName" :show-overflow-tooltip="true" />
+              <el-table-column label="手机" align="center" prop="phonenumber" width="120" />
+              <el-table-column label="用户状态" align="center">
+                <template slot-scope="scope">
+                  <el-switch
+                    v-model="scope.row.status"
+                    active-color="#21C7CB"
+                    active-value="0"
+                    inactive-value="1"
+                    @change="handleStatusChange(scope.row)"
+                  ></el-switch>
+                </template>
+              </el-table-column>
+              <el-table-column label="创建时间" align="center" prop="createTime" width="150">
+                <template slot-scope="scope">
+                  <span>{{ parseTime(scope.row.createTime) }}</span>
+                </template>
+              </el-table-column>
+              <el-table-column
+                label="操作"
+                align="center"
+                width="270"
+                class-name="small-padding fixed-width"
+              >
+                <template slot-scope="scope">
+                  <el-button
+                    size="mini"
+                    icon="el-icon-edit"
+                    @click="handleUpdate(scope.row)"
+                    v-hasPermi="['system:user:edit']"
+                  >修改</el-button>
+                  <el-button
+                    v-if="scope.row.userId !== 1"
+                    size="mini"
+                    type="danger"
+                    icon="el-icon-delete"
+                    @click="handleDelete(scope.row)"
+                    v-hasPermi="['system:user:remove']"
+                  >删除</el-button>
+                  <el-button
+                    size="mini"
+                    type="warning"
+                    icon="el-icon-key"
+                    @click="handleResetPwd(scope.row)"
+                    v-hasPermi="['system:user:resetPwd']"
+                  >重置</el-button>
+                  <el-button
+                    size="mini"
+                    type="cyan"
+                    icon="el-icon-key"
+                  >发送邮件</el-button>
+                </template>
+              </el-table-column>
+            </el-table>
 
-        <pagination
-          v-show="total>0"
-          :total="total"
-          :page.sync="queryParams.pageNum"
-          :limit.sync="queryParams.pageSize"
-          @pagination="getList"
-        />
+            <pagination
+              v-show="total>0"
+              :total="total"
+              :page.sync="queryParams.pageNum"
+              :limit.sync="queryParams.pageSize"
+              @pagination="getList"
+            />
+          </div>
+        </div>
       </el-col>
     </el-row>
 
@@ -443,7 +455,16 @@ export default {
             trigger: "blur"
           }
         ]
-      }
+      },
+      // 部门列数
+      deptCol:4,
+      // 数据占列
+      dataCol:20,
+      isHideTreeIcon:{
+        divClass:'showTreeIcon',
+        arrowClass:'el-icon-arrow-left',
+      },
+      isShowDept:true,
     };
   },
   watch: {
@@ -652,7 +673,59 @@ export default {
     // 提交上传文件
     submitFileForm() {
       this.$refs.upload.submit();
+    },
+    toggleDeptClick(){
+      this.isShowDept = !this.isShowDept;
+      if(this.isShowDept){
+        this.deptCol = 4;
+        this.dataCol = 20;
+        this.isHideTreeIcon.divClass = 'hideTreeIcon';
+        this.isHideTreeIcon.arrowClass = 'el-icon-arrow-left';
+      }else{
+        this.deptCol = 0;
+        this.dataCol = 24;
+        this.isHideTreeIcon.divClass = 'showTreeIcon';
+        this.isHideTreeIcon.arrowClass = 'el-icon-arrow-right';
+      }
     }
   }
 };
-</script>
+</script>
+<style lang="scss" scoped>
+  .showTreeIcon{
+    height: 40px;
+    line-height: 40px;
+    width: 16px;
+    text-align: center;
+    font-size: 12px;
+    background: #dedede;
+    position: absolute;
+    right: 0px;
+    top: 50%;
+    margin-top: -20px;
+    cursor: pointer;
+  }
+  .hideTreeIcon{
+    height: 40px;
+    line-height: 40px;
+    width: 16px;
+    text-align: center;
+    font-size: 12px;
+    background: #dedede;
+    position: absolute;
+    right: 0px;
+    top: 50%;
+    margin-top: -20px;
+    cursor: pointer;
+  }
+</style>
+<style>
+  .deptCol.el-col-0 {
+    display: inline-block;
+    padding: 0;
+  }
+  .el-col-0 .bgWhite{
+    padding: 0;
+  }
+</style>
+

dgtis-ui/src/views/system/userInfo/index.vue

@@ -0,0 +1,390 @@
+<template>
+  <div class="app-container">
+    <div class="conPanel">
+      <div class="userInfoPanel">
+        <div class="title">张大川<span class="num">（cp0185210402）</span><span class="tag">2孩儿</span><span class="tag">关注官微</span><span class="tag">内部人员</span></div>
+        <el-row class="userInfo">
+          <el-col :span="12">
+            <span class="name">性别</span>
+            <span class="value">男</span>
+          </el-col>
+          <el-col :span="12">
+            <span class="name">年龄</span>
+            <span class="value">55</span>
+            <el-tag type="warning" effect="dark" size="mini">大龄</el-tag>
+          </el-col>
+          <el-col :span="12">
+            <span class="name">出生日期</span>
+            <span class="value">1965-10-08</span>
+            <el-tag type="warning" effect="dark" size="mini">60后</el-tag>
+          </el-col>
+          <el-col :span="12">
+            <span class="name">证件类型</span>
+            <span class="value">身份证</span>
+          </el-col>
+          <el-col :span="12">
+            <span class="name">证件号码</span>
+            <span class="value">410328196510081234</span>
+          </el-col>
+          <el-col :span="12">
+            <span class="name">联系电话</span>
+            <span class="value">13212312312</span>
+          </el-col>
+          <el-col :span="12">
+            <span class="name">职业</span>
+            <span class="value">律师</span>
+            <el-tag type="warning" effect="dark" size="mini">敏感职业</el-tag>
+          </el-col>
+          <el-col :span="12">
+            <span class="name">客户等级</span>
+            <span class="value">铂金</span>
+          </el-col>
+          <el-col :span="12">
+            <span class="name">身高</span>
+            <span class="value">178cm</span>
+          </el-col>
+          <el-col :span="12">
+            <span class="name">体重</span>
+            <span class="value">74kg</span>
+          </el-col>
+          <el-col :span="12">
+            <span class="name">户籍所在地</span>
+            <span class="value">江苏省南京市江宁区一二三是</span>
+          </el-col>
+        </el-row>
+      </div>
+      <div>
+        <el-tabs class="userInfoTab" v-model="tabActive" @tab-click="tabChange">
+          <el-tab-pane label="联系信息" name="lxxx">联系信息</el-tab-pane>
+          <el-tab-pane label="习惯偏好" name="pzgl">
+            <div class="userInfoPanel mt10">
+              <el-row class="userInfo">
+                <el-col :span="12">
+                  <span class="name">首选联系方式</span>
+                  <span class="value">电话拜访</span>
+                </el-col>
+                <el-col :span="12">
+                  <span class="name">兴趣爱好</span>
+                  <span class="value">运动、养生、手工、篮球</span>
+                </el-col>
+              </el-row>
+            </div>
+          </el-tab-pane>
+          <el-tab-pane label="健康状况" name="jsgl">
+            <div class="userInfoPanel mt10">
+              <el-row class="userInfo">
+                <el-col :span="12">
+                  <span class="name">评估日期</span>
+                  <span class="value">2020-01-03</span>
+                </el-col>
+                <el-col :span="12">
+                  <span class="name">身高</span>
+                  <span class="value">180cm</span>
+                </el-col>
+                <el-col :span="12">
+                  <span class="name">体重</span>
+                  <span class="value">70kg</span>
+                </el-col>
+                <el-col :span="12">
+                  <span class="name">BMI体质指数</span>
+                  <span class="value">19（正常）</span>
+                </el-col>
+              </el-row>
+            </div>
+          </el-tab-pane>
+          <el-tab-pane label="关系信息" name="gxxx">关系信息</el-tab-pane>
+          <el-tab-pane label="合约信息" name="hyxx">
+            <div class="tagDiv">
+              <el-tag class="tag" type="warning" effect="dark" size="mini">有极短意保单</el-tag>
+              <el-tag class="tag" type="warning" effect="dark" size="mini">给本人投保</el-tag>
+              <el-tag class="tag" type="warning" effect="dark" size="mini">给父母投保</el-tag>
+              <el-tag class="tag" type="warning" effect="dark" size="mini">给配偶投保</el-tag>
+              <el-tag class="tag" type="warning" effect="dark" size="mini">仅有一年期短险保单</el-tag>
+              <el-tag class="tag" type="warning" effect="dark" size="mini">有续期缴费的保单</el-tag>
+            </div>
+            <div class="userInfoPanel mt10">
+              <el-row class="userInfo">
+                <el-col :span="12">
+                  <span class="name">保险单号</span>
+                  <span class="value">bx12312312313</span>
+                </el-col>
+                <el-col :span="12">
+                  <span class="name">保险期限</span>
+                  <span class="value">一年</span>
+                </el-col>
+                <el-col :span="12">
+                  <span class="name">承保分公司</span>
+                  <span class="value">上海人寿</span>
+                </el-col>
+                <el-col :span="12">
+                  <span class="name">起保日期</span>
+                  <span class="value">2018-03-02</span>
+                </el-col>
+                <el-col :span="12">
+                  <span class="name">终保日期</span>
+                  <span class="value">2019-03-01</span>
+                </el-col>
+                <el-col :span="12">
+                  <span class="name">签单日期</span>
+                  <span class="value">2018-03-02</span>
+                </el-col>
+                <el-col :span="12">
+                  <span class="name">投保日期</span>
+                  <span class="value">2018-03-02</span>
+                </el-col>
+                <el-col :span="12">
+                  <span class="name">续保日期</span>
+                  <span class="value">2020-12-12</span>
+                </el-col>
+                <el-col :span="12">
+                  <span class="name">续保次数</span>
+                  <span class="value">1次</span>
+                </el-col>
+                <el-col :span="12">
+                  <span class="name">销售渠道</span>
+                  <span class="value">AGY</span>
+                </el-col>
+                <el-col :span="12">
+                  <span class="name">保单状态</span>
+                  <span class="value">在保</span>
+                </el-col><el-col :span="12">
+                  <span class="name">缴费方式</span>
+                  <span class="value">线上支付</span>
+                </el-col>
+                <el-col :span="12">
+                  <span class="name">保单保额</span>
+                  <span class="value">30万</span>
+                </el-col>
+                <el-col :span="12">
+                  <span class="name">保单保费</span>
+                  <span class="value">1689元</span>
+                </el-col>
+                <el-col :span="12">
+                  <span class="name">下次缴费日期</span>
+                  <span class="value">2020-12-12</span>
+                </el-col>
+                <el-col :span="12">
+                  <span class="name">被保人数</span>
+                  <span class="value">2人</span>
+                </el-col>
+                <el-col :span="12">
+                  <span class="name">基本保额</span>
+                  <span class="value">10万</span>
+                </el-col>
+                <el-col :span="12">
+                  <span class="name">保单价值</span>
+                  <span class="value">1111元</span>
+                </el-col>
+                <el-col :span="12">
+                  <span class="name">主被保险人名称</span>
+                  <span class="value">张大川</span>
+                </el-col>
+                <el-col :span="12">
+                  <span class="name">险种名称</span>
+                  <span class="value">重疾健康险</span>
+                </el-col>
+                <el-col :span="12">
+                  <span class="name">业务员</span>
+                  <span class="value">刘小美</span>
+                </el-col>
+                <el-col :span="12">
+                  <span class="name">业绩归属</span>
+                  <span class="value">运营二部</span>
+                </el-col>
+                <el-col :span="12">
+                  <span class="name">代理渠道</span>
+                  <span class="value">123</span>
+                </el-col>
+                <el-col :span="12">
+                  <span class="name">代理机构</span>
+                  <span class="value">上海人寿</span>
+                </el-col>
+                <el-col :span="12">
+                  <span class="name">是否保全</span>
+                  <span class="value">否</span>
+                </el-col>
+                <el-col :span="12">
+                  <span class="name">缴费年期</span>
+                  <span class="value">10年</span>
+                </el-col>
+              </el-row>
+            </div>
+          </el-tab-pane>
+          <el-tab-pane label="理赔信息" name="lpxx">
+            <div class="userInfoPanel mt10">
+              <el-row class="userInfo">
+                <el-col :span="12">
+                  <span class="name">立案号</span>
+                  <span class="value">LA2231231312</span>
+                </el-col>
+                <el-col :span="12">
+                  <span class="name">保险单号</span>
+                  <span class="value">123123123123</span>
+                </el-col>
+                <el-col :span="12">
+                  <span class="name">报案号</span>
+                  <span class="value">131231232213</span>
+                </el-col>
+                <el-col :span="12">
+                  <span class="name">损失发生时间</span>
+                  <span class="value">2020-11-12 10：30</span>
+                </el-col>
+                <el-col :span="12">
+                  <span class="name">报案人名称</span>
+                  <span class="value">张大川</span>
+                </el-col>
+                <el-col :span="12">
+                  <span class="name">出险人名称</span>
+                  <span class="value">张艺</span>
+                </el-col>
+                <el-col :span="12">
+                  <span class="name">报案日期</span>
+                  <span class="value">2020-11-02</span>
+                </el-col>
+                <el-col :span="12">
+                  <span class="name">损失原因</span>
+                  <span class="value">住院</span>
+                </el-col>
+                <el-col :span="12">
+                  <span class="name">立案日期</span>
+                  <span class="value">2020-11-03</span>
+                </el-col>
+                <el-col :span="12">
+                  <span class="name">报案描述</span>
+                  <span class="value">胃穿孔，做手术</span>
+                </el-col>
+                <el-col :span="12">
+                  <span class="name">报案人与出险人关系</span>
+                  <span class="value">夫妻</span>
+                </el-col>
+                <el-col :span="12">
+                  <span class="name">赔案号</span>
+                  <span class="value">12312313</span>
+                </el-col>
+                <el-col :span="12">
+                  <span class="name">险种代码</span>
+                  <span class="value">232323</span>
+                </el-col>
+                <el-col :span="12">
+                  <span class="name">赔付金额</span>
+                  <span class="value">2899元</span>
+                </el-col>
+                <el-col :span="12">
+                  <span class="name">案件状态</span>
+                  <span class="value">已赔付</span>
+                </el-col>
+              </el-row>
+            </div>
+          </el-tab-pane>
+          <el-tab-pane label="接触信息" name="jcxx">定时任务补偿</el-tab-pane>
+          <el-tab-pane label="标签信息" name="bqxx">定时任务补偿</el-tab-pane>
+        </el-tabs>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: "UserInfo",
+  components: {
+
+  },
+  data() {
+    return {
+      tabActive:'hyxx',
+    }
+  },
+  created() {
+
+  },
+  mounted() {
+
+  },
+  methods: {
+    tabChange(tab, event){
+      console.log(tab, event);
+    },
+  }
+};
+</script>
+<style lang="scss" scoped>
+  .conPanel{
+    width: 97%;
+    /*height: 92%;*/
+    /*position: absolute;*/
+    .userInfoPanel{
+      border-radius: 5px;
+      background:#FFF;
+      .title{
+        font-size: 16px;
+        color: #1E4F97;
+        font-weight: bold;
+        padding: 10px;
+        border-bottom: 1px solid #F0F0F0;
+        .num{
+          font-size: 14px;
+        }
+        .tag{
+          font-size: 12px;
+          color: #FFF;
+          padding: 4px;
+          background: #00398B;
+          margin: 0 4px;
+          border-radius: 4px;
+        }
+      }
+    }
+    .userInfoTab{
+      margin-top: 16px;
+      .tagDiv{
+        padding: 20px 30px;
+        border-radius: 5px;
+        background: #FFF;
+        box-sizing: border-box;
+        .tag{
+          margin-right: 16px;
+        }
+      }
+    }
+    .userInfo{
+      padding: 10px;
+      box-sizing: border-box;
+      line-height:26px;
+      .name{
+        font-size: 14px;
+        font-weight: bold;
+        color: #333;
+        width: 130px;
+        text-align: right;
+        display: inline-block;
+      }
+      .value{
+        font-size: 14px;
+        color: #333;
+        display: inline-block;
+        padding-left: 20px;
+        margin-right: 6px;
+      }
+    }
+  }
+</style>
+<style>
+  .userInfoTab .el-tabs__header .el-tabs__nav-wrap::after {
+        background-color: rgba(255,255,255,0);
+  }
+  .userInfoTab .el-tabs__item.is-active{
+    color: #00388B;
+  }
+  .userInfoTab .el-tabs__active-bar{
+    background-color: #00388B;
+  }
+  .userInfoTab .el-tabs__item:hover {
+    color: #00388B;
+  }
+  .userInfoTab .el-tabs__header{
+    padding: 0 30px;
+    box-sizing: border-box;
+  }
+</style>

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

@@ -0,0 +1,596 @@
+<template>
+  <div class="app-container">
+    <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">1张</div>-->
+<!--                </div>-->
+                <div class="dashedLine"></div>
+                <div class="bottomNumDiv">
+                  <div class="leftNumDiv">
+                    <div class="numTitle">有效保单</div>
+                    <div class="num">10张</div>
+                  </div>
+                  <div class="rightNumDiv">
+                    <div class="numTitle">失效保单</div>
+                    <div class="num">5张</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">
+                  <div class="level">铂金会员</div>
+                  <div class="isPay">已交保费</div>
+                  <div class="payNum">234,897.234</div>
+                </div>
+              </div>
+              <el-row class="bottomInfoDiv" :gutter="10">
+                <el-col :span="6">
+                  <div class="bxDetail">
+                    <div class="numTitle">享受保障</div>
+                    <div class="num">1706<span class="unit">天</span></div>
+                  </div>
+                </el-col>
+                <el-col :span="6">
+                  <div class="bxDetail">
+                    <div class="numTitle">大病保障</div>
+                    <div class="num">1706<span class="unit">万</span></div>
+                  </div>
+                </el-col>
+                <el-col :span="6">
+                  <div class="bxDetail">
+                    <div class="numTitle">意外险</div>
+                    <div class="num">1706<span class="unit">万</span></div>
+                  </div>
+                </el-col>
+                <el-col :span="6">
+                  <div class="bxDetail">
+                    <div class="numTitle">标准保费</div>
+                    <div class="num">1706<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">应交日期：2021-01-23</div>
+                    <div class="bxInfo">应交保费：3624元</div>
+                    <div class="bxInfo">已交保费：13625元</div>
+                    <div class="bxInfo">交费年期：1年</div>
+                  </div>
+                </el-col>
+                <el-col :span="12">
+                  <div class="bxDetail bxDetailHt">
+                    <div class="numTitleB">理赔信息</div>
+                    <div class="bxInfo">是否理赔：是</div>
+                    <div class="bxInfo">理赔类别：交通意外</div>
+                    <div class="bxInfo">理赔金额：13625元</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>姓名：张大春</div>
+                  </el-col>
+                  <el-col :span="12">
+                    <div>手机：12345678912</div>
+                  </el-col>
+                </el-row>
+                <el-row :gutter="10">
+                  <el-col :span="12">
+                    <div>年龄：30岁</div>
+                  </el-col>
+                </el-row>
+                <div class="dayDiv">
+                  <div class="dayTitle">投保时长</div>
+                  <div class="dayNum">1470<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 WordCloudChart from '../../dashboard/WordCloudChart'
+  import LineBarChart from '../../dashboard/LineBarChart'
+  import PieChartHalf from '../../dashboard/PieChartHalf'
+export default {
+  name: "UserInfoDetails",
+  components: {
+    WordCloudChart,
+    LineBarChart,
+    PieChartHalf
+  },
+  data() {
+    return {
+      chartsTitle:'',
+      wordCloudChartData:[
+        {
+        "name": "美食",
+        "value": 12
+      },
+        {
+          "name": "网红店",
+          "value": 10
+        },
+        {
+          "name": "新冠肺炎疫情表彰大会",
+          "value": 10
+        },
+        {
+          "name": "打卡",
+          "value": 14
+        },
+        {
+          "name": "十一长假",
+          "value": 14
+        },
+        {
+          "name": "自由行",
+          "value": 16
+        },
+        {
+          "name": "教师节",
+          "value": 17
+        },
+        {
+          "name": "旅游景点攻略",
+          "value": 13
+        },
+        {
+          "name": "坡子街",
+          "value": 13
+        },
+        {
+          "name": "体育",
+          "value": 11
+        },
+        {
+          "name": "综艺",
+          "value": 12
+        },
+        {
+          "name": "商场",
+          "value": 15
+        },
+        {
+          "name": "衡山",
+          "value": 12
+        },
+        {
+          "name": "科学家座谈会",
+          "value": 15
+        },
+        {
+          "name": "潇湘晨报",
+          "value": 15
+        },
+        {
+          "name": "张家界",
+          "value": 15
+        },
+        {
+          "name": "橘子洲",
+          "value": 15
+        },
+        {
+          "name": "房价",
+          "value": 15
+        },
+        {
+          "name": "开学",
+          "value": 15
+        },
+        {
+          "name": "湘江",
+          "value": 15
+        },
+        {
+          "name": "繁华",
+          "value": 15
+        },
+        {
+          "name": "湖南公考",
+          "value": 14
+        },
+        {
+          "name": "中秋节",
+          "value": 14
+        },
+        {
+          "name": "天气",
+          "value": 14
+        },
+        {
+          "name": "幸福感",
+          "value": 14
+        },
+        {
+          "name": "芒果台",
+          "value": 13
+        },
+        {
+          "name": "游戏",
+          "value": 13
+        },
+        {
+          "name": "宝藏小店",
+          "value": 13
+        },
+        {
+          "name": "动漫",
+          "value": 13
+        },
+        {
+          "name": "武汉",
+          "value": 13
+        },
+        {
+          "name": "湖南大学",
+          "value": 13
+        },
+        {
+          "name": "湘西",
+          "value": 12
+        }
+      ],
+      lineBarChartData:{
+        expectedData:{
+          name:'',
+          data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
+        },
+        actualData:{
+          name:'',
+          data:[2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
+        },
+        xAxisData:['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12']
+      },
+      pieChartHalfData:[],
+      width:'100%',
+      height:'80%'
+    }
+  },
+  created() {
+
+  },
+  mounted() {
+
+  },
+  methods: {
+
+  }
+};
+</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;
+          .levelImgDiv{
+            width: 240px;
+            height: 204px;
+            background: url("../../../assets/image/levelBg.png") no-repeat;
+            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: 20px;
+            padding: 10px !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;
+            }
+            .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%;
+  }
+</style>

dgtis-ui/src/views/system/userInfoList/index.vue

@@ -0,0 +1,183 @@
+<template>
+  <div class="app-container">
+    <el-row :gutter="10">
+      <!--用户数据-->
+      <el-col :span="24" :xs="24">
+        <div class="panelCol">
+          <div class="bgWhite">
+            <div class="titleDiv">
+              <span class="line"></span>
+              <span class="title">客户信息列表</span>
+              <el-button
+                class="exportBtn"
+                type="warning"
+                icon="el-icon-download"
+                size="mini"
+                @click="handleExport"
+                v-hasPermi="['system:role:export']"
+              >导出</el-button>
+            </div>
+            <el-table v-loading="loading" :data="userList">
+              <el-table-column label="客户号" width="120" align="center" prop="userId" />
+              <el-table-column label="姓名" align="center" prop="userName" :show-overflow-tooltip="true" />
+              <el-table-column label="证件类型" align="center" prop="IDType" :show-overflow-tooltip="true" />
+              <el-table-column label="证件号码" width="160" align="center" prop="IDNum" :show-overflow-tooltip="true" />
+              <el-table-column label="性别" align="center" prop="sex" width="70" />
+              <el-table-column label="出生日期" align="center" prop="birthday" width="150">
+<!--                <template slot-scope="scope">-->
+<!--                  <span>{{ parseTime(scope.row.createTime) }}</span>-->
+<!--                </template>-->
+              </el-table-column>
+              <el-table-column label="年龄" align="center" prop="age" width="70" />
+              <el-table-column label="客户层级" align="center" prop="level" width="80" />
+              <el-table-column
+                label="操作"
+                align="center"
+                width="270"
+                class-name="small-padding fixed-width"
+              >
+                <template slot-scope="scope">
+                  <el-button
+                    size="mini"
+                    icon="el-icon-copy-document"
+                    @click="toOverview(scope.row)"
+                    v-hasPermi="['system:user:edit']"
+                  >概览</el-button>
+                  <el-button
+                    v-if="scope.row.userId !== 1"
+                    size="mini"
+                    type="cyan"
+                    icon="el-icon-warning-outline"
+                    @click="toDetail(scope.row)"
+                    v-hasPermi="['system:user:remove']"
+                  >详情</el-button>
+                </template>
+              </el-table-column>
+            </el-table>
+
+            <pagination
+              v-show="total>0"
+              :total="total"
+              :page.sync="queryParams.pageNum"
+              :limit.sync="queryParams.pageSize"
+              @pagination="getList"
+            />
+          </div>
+        </div>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+  import { listUser } from "@/api/system/user";
+export default {
+  name: "UserList",
+  data() {
+    return {
+      // 遮罩层
+      loading: false,
+      // 总条数
+      total: 0,
+      // 用户表格数据
+      // userList: null,
+      userList: [
+        {
+          userId:'CP0185210401',
+          userName:'刘德华',
+          IDType:'身份证',
+          IDNum:'410326****2345',
+          sex:'男',
+          birthday:'2020-01-01',
+          age:30,
+          level:'铂金'
+        },
+        {
+          userId:'CP0185210401',
+          userName:'刘德华',
+          IDType:'身份证',
+          IDNum:'410326****2345',
+          sex:'男',
+          birthday:'2020-01-01',
+          age:30,
+          level:'铂金'
+        },
+        {
+          userId:'CP0185210401',
+          userName:'刘德华',
+          IDType:'身份证',
+          IDNum:'410326****2345',
+          sex:'男',
+          birthday:'2020-01-01',
+          age:30,
+          level:'铂金'
+        },
+      ],
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        userName: undefined,
+        phonenumber: undefined,
+        status: undefined,
+        deptId: undefined
+      },
+    };
+  },
+  watch: {
+
+  },
+  created() {
+    // this.getList();
+    this.total = 3;
+  },
+  methods: {
+    /** 查询用户列表 */
+    getList() {
+      this.loading = true;
+      listUser(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
+          this.userList = response.rows;
+          this.total = response.total;
+          this.loading = false;
+        }
+      );
+    },
+    /** 导出按钮操作 */
+    handleExport() {
+      this.download('system/user/export', {
+        ...this.queryParams
+      }, `user_${new Date().getTime()}.xlsx`)
+    },
+    toOverview(){
+      this.$router.push({ path:'/system/userInfoDetails'  })
+    },
+    toDetail(){
+      this.$router.push({ path:'/system/userInfo'  })
+    }
+  }
+};
+</script>
+<style lang="scss" scoped>
+  .titleDiv{
+    height: 50px;
+    line-height: 50px;
+    .line{
+      display: inline-block;
+      height: 14px;
+      width: 4px;
+      border-radius: 2px;
+      background: #013C89;
+      vertical-align: middle;
+    }
+    .title{
+      font-size: 16px;
+      color: #013C89;
+      margin-left: 14px;
+      vertical-align: middle;
+    }
+    .exportBtn{
+      float: right;
+      margin-top: 10px;
+    }
+  }
+</style>