Merge branch 'feature/个险业绩排行优化' into dev

src/router/ebiz/institutionalPerform.js

@@ -27,7 +27,7 @@ export default [
     name: 'underOffice',
     component: UnderOffice,
     meta: {
-      title: '机构业绩',
+      title: '排名',
       index: 1
     }
   },

src/views/ebiz/institutionalPerform/Organization.vue

@@ -14,11 +14,11 @@
           </th>
         </tr>
         <tr v-for="(value, index) in values" :key="index">
-          <td class="sticky">{{ index + 1 }}</td>
-          <td v-for="(key, i) in needGettingKey" :key="i">{{ value[key] | blankFilter }}</td>
+          <td class="sticky bleft bright">{{ index + 1 }}</td>
+          <td v-for="(key, i) in needGettingKey" :key="i" class="bright">{{ value[key] | blankFilter }}</td>
         </tr>
         <tr v-if="values.length === 0">
-          <td :colspan="columns.length + 1">暂无数据</td>
+          <td class="nodata bleft bright" :colspan="columns.length + 1">暂无数据</td>
         </tr>
       </table>
     </div>
@@ -178,7 +178,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-$border: 1px solid #ccc;
+$border: 1px solid #e4e4e4;
 $bgRed: #f03;
 $white: #fff;
 ::v-deep .van-tabs__wrap {
@@ -203,21 +203,18 @@ $white: #fff;
 
 .table-wrapper {
   overflow: auto;
-  padding: 0 10px;
+  margin: 0 10px;
 }
 
 .myTable {
   text-align: center;
-  min-width: 160vw;
-  border-top: $border;
-  border-left: $border;
-  border-right: $border;
+  min-width: 200vw;
 }
 
 .myTable td,
 .myTable th {
   font-size: 14px;
-  padding: 10px 0;
+  padding: 10px 5px;
   border-bottom: $border;
   border-collapse: collapse;
   background-color: $white;
@@ -231,6 +228,19 @@ $white: #fff;
 
 .sticky {
   position: sticky;
-  left: -10px;
+  left: 0;
+}
+
+.bleft {
+  border-left: $border;
+}
+
+.bright {
+  border-right: $border;
+}
+
+.nodata {
+  text-align: left;
+  text-indent: 10em;
 }
 </style>

src/views/ebiz/institutionalPerform/Summarizing.vue

@@ -7,24 +7,24 @@
       <div class="table-wrapper">
         <table class="myTable" cellspacing="0" cellpadding="0">
           <tr>
-            <th>机构业绩</th>
+            <th style="width: 50%;">机构业绩</th>
             <th>达成</th>
           </tr>
           <tr>
-            <td>预收标保</td>
-            <td>{{ performance.ysbb | unitFilter(1) | blankFilter }}</td>
+            <td class="bleft bright">预收标保</td>
+            <td class="bright">{{ performance.ysbb | unitFilter(1) | blankFilter }}</td>
           </tr>
           <tr>
-            <td>预收件数</td>
-            <td>{{ performance.ysjs | unitFilter(2) | blankFilter }}</td>
+            <td class="bleft bright">预收件数</td>
+            <td class="bright">{{ performance.ysjs | unitFilter(2) | blankFilter }}</td>
           </tr>
           <tr>
-            <td>承保标保</td>
-            <td>{{ performance.bzbf | unitFilter(1) | blankFilter }}</td>
+            <td class="bleft bright">承保标保</td>
+            <td class="bright">{{ performance.bzbf | unitFilter(1) | blankFilter }}</td>
           </tr>
           <tr>
-            <td>承保件数</td>
-            <td>{{ performance.cbjs | unitFilter(2) | blankFilter }}</td>
+            <td class="bleft bright">承保件数</td>
+            <td class="bright">{{ performance.cbjs | unitFilter(2) | blankFilter }}</td>
           </tr>
         </table>
       </div>
@@ -36,28 +36,28 @@
       <div class="table-wrapper">
         <table class="myTable" cellspacing="0" cellpadding="0">
           <tr>
-            <th>活动人力</th>
+            <th style="width: 50%;">活动人力</th>
             <th>达成(人)</th>
           </tr>
           <tr>
-            <td>合格人力</td>
-            <td>{{ manpower.hgrl | blankFilter }}</td>
+            <td class="bleft bright">合格人力</td>
+            <td class="bright">{{ manpower.hgrl | blankFilter }}</td>
           </tr>
           <tr>
-            <td>桂冠人力</td>
-            <td>{{ manpower.ggrl | blankFilter }}</td>
+            <td class="bleft bright">桂冠人力</td>
+            <td class="bright">{{ manpower.ggrl | blankFilter }}</td>
           </tr>
           <tr>
-            <td>桂冠正式会员</td>
-            <td>{{ manpower.ggrl | blankFilter }}</td>
+            <td class="bleft bright">桂冠正式会员</td>
+            <td class="bright">{{ manpower.ggrl | blankFilter }}</td>
           </tr>
           <tr>
-            <td>双冠人力</td>
-            <td>{{ manpower.sgrl | blankFilter }}</td>
+            <td class="bleft bright">双冠人力</td>
+            <td class="bright">{{ manpower.sgrl | blankFilter }}</td>
           </tr>
           <tr>
-            <td>新增人力</td>
-            <td>{{ manpower.xzrl | blankFilter }}</td>
+            <td class="bleft bright">新增人力</td>
+            <td class="bright">{{ manpower.xzrl | blankFilter }}</td>
           </tr>
         </table>
       </div>
@@ -66,6 +66,9 @@
       <span ref="production" class="title">
         产品
       </span>
+      <p>
+        总保费: <span class="all-price"> {{ allPrice }}(万元)</span>
+      </p>
       <div class="table-wrapper">
         <table class="myTable" style="min-width: 140vw;" cellspacing="0" cellpadding="0">
           <tr>
@@ -75,13 +78,13 @@
             <th>保费占比(%)</th>
           </tr>
           <tr v-for="(product, index) in products" :key="index">
-            <td class="sticky">{{ product.productName }}</td>
-            <td>{{ product.cbbb | blankFilter }}</td>
-            <td>{{ product.cbItems | blankFilter }}</td>
-            <td>{{ product.percent | blankFilter }}</td>
+            <td class="sticky bleft bright">{{ product.productName }}</td>
+            <td class="bright">{{ product.cbbb | blankFilter }}</td>
+            <td class="bright">{{ product.cbItems | blankFilter }}</td>
+            <td class="bright">{{ product.percent | blankFilter }}</td>
           </tr>
           <tr v-if="products.length === 0">
-            <td colspan="4">暂无数据</td>
+            <td class="nodata bleft bright" colspan="4">暂无数据</td>
           </tr>
         </table>
       </div>
@@ -96,17 +99,14 @@ export default {
     typeIndex: {
       type: Number,
       default: 0
-    },
-    reset: {
-      type: Boolean,
-      default: false
     }
   },
   data() {
     return {
       performance: {},
       manpower: {},
-      products: []
+      products: [],
+      allPrice: 0
     }
   },
   methods: {
@@ -121,6 +121,7 @@ export default {
       let allPrice = this.products.reduce((prevVal, currVal) => {
         return prevVal + Number(currVal.cbbb)
       }, 0)
+      this.allPrice = allPrice
       this.products.map(product => {
         product.percent = ((product.cbbb / allPrice) * 100).toFixed(2)
         return product
@@ -129,22 +130,20 @@ export default {
   },
   watch: {
     typeIndex(nv) {
-      if (!this.reset) {
-        const scroll = {
-          behavior: 'smooth',
-          block: 'start'
-        }
-        switch (nv) {
-          case 0:
-            this.$refs.performance.scrollIntoView(scroll)
-            break
-          case 1:
-            this.$refs.manpower.scrollIntoView(scroll)
-            break
-          case 2:
-            this.$refs.production.scrollIntoView(scroll)
-            break
-        }
+      const scroll = {
+        behavior: 'smooth',
+        block: 'start'
+      }
+      switch (nv) {
+        case 0:
+          this.$refs.performance.scrollIntoView(scroll)
+          break
+        case 1:
+          this.$refs.manpower.scrollIntoView(scroll)
+          break
+        case 2:
+          this.$refs.production.scrollIntoView(scroll)
+          break
       }
     }
   },
@@ -169,7 +168,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-$border: 1px solid #ccc;
+$border: 1px solid #e4e4e4;
 $bgRed: #f03;
 $white: #fff;
 
@@ -190,15 +189,12 @@ $white: #fff;
 
 .table-wrapper {
   overflow: auto;
-  padding: 0 5px;
+  margin: 0 5px;
 }
 
 .myTable {
   text-align: center;
   width: 100%;
-  border-top: $border;
-  border-left: $border;
-  border-right: $border;
 }
 
 .myTable td,
@@ -216,8 +212,28 @@ $white: #fff;
 }
 
 .sticky {
-  width: 180px;
+  width: 8em;
   position: sticky;
-  left: -5px;
+  padding: 5px !important;
+  left: 0;
+}
+
+.bleft {
+  border-left: $border;
+}
+
+.bright {
+  border-right: $border;
+}
+
+.nodata {
+  text-align: left;
+  text-indent: 10em;
+}
+
+.all-price {
+  margin-bottom: 15px;
+  color: $bgRed;
+  display: inline-block;
 }
 </style>

src/views/ebiz/institutionalPerform/UnderOffice.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <div class="header">
-      <div class="header-left" @click="isSideBarShow = true">
+      <div class="header-left" @click="changeSearchType">
         <van-button>
           <img :src="point" />
           <span class="ml5 mr5">{{ typeName }}</span>
@@ -41,7 +41,7 @@
     <div class="content">
       <van-tabs v-model="active">
         <van-tab title="汇总">
-          <Summarizing ref="summarizing" :reset="resetFlag" :typeIndex="typeIndex" />
+          <Summarizing ref="summarizing" :typeIndex="typeIndex" />
         </van-tab>
         <van-tab title="分机构">
           <Organization ref="organization" :dataType.sync="typeIndex" :timeType.sync="timeType" @updateQueryCom="updateQueryCom" @updateData="updateData" />
@@ -49,7 +49,7 @@
       </van-tabs>
     </div>
     <!-- 侧边栏 -->
-    <van-popup v-model="isSideBarShow" position="left" :style="{ width: '50vw', height: '100vh' }" @closed="dataTypeChange">
+    <van-popup v-model="isSideBarShow" position="left" :style="{ width: '50vw', height: '100vh' }">
       <p class="title">指标</p>
       <span class="data-type" :class="{ 'data-active': index === typeIndex }" v-for="(type, index) in dataTypes" :key="index" @click="changeDataType(index)">{{
         type
@@ -111,7 +111,6 @@ export default {
   },
   data() {
     return {
-      resetFlag: false,
       timeType: 0,
       // 最大查询日期
       maxDate: currentDate,
@@ -216,6 +215,10 @@ export default {
     this.setRightBtn()
   },
   methods: {
+    changeSearchType() {
+      this.isSideBarShow = true
+      document.title = '返回'
+    },
     async reset() {
       this.params = {
         manageCode: '86',
@@ -236,8 +239,14 @@ export default {
       this.cityCode = 0
       this.areaCode = 0
       this.resetFlag = true
+    },
+    async getSetDate() {
       let result = await this.getSummarizingData()
-      this.setSummarizingData(result)
+      if (this.active === 0) {
+        this.setSummarizingData(result)
+      } else {
+        this.$refs.organization.setTableData(result.content, this.params.type)
+      }
     },
     appCallBack(data) {
       if (data.trigger == 'right_button_click') {
@@ -245,12 +254,7 @@ export default {
       }
     },
     async dataTypeChange() {
-      let result = await this.getSummarizingData()
-      if (this.active === 0) {
-        this.setSummarizingData(result)
-      } else {
-        this.$refs.organization.setTableData(result.content, this.params.type)
-      }
+      this.getSetDate()
     },
     setRightBtn() {
       setTimeout(() => {
@@ -327,32 +331,17 @@ export default {
     async onDayConditionConfirm() {
       this.isDayConditionShow = false
       this.timeType = 0
-      let result = await this.getSummarizingData()
-      if (this.active === 0) {
-        this.setSummarizingData(result)
-      } else {
-        this.$refs.organization.setTableData(result.content, this.params.type)
-      }
+      this.getSetDate()
     },
     async onMonthConditionConfirm() {
       this.isMonthConditionShow = false
       this.timeType = 1
-      let result = await this.getSummarizingData()
-      if (this.active === 0) {
-        this.setSummarizingData(result)
-      } else {
-        this.$refs.organization.setTableData(result.content, this.params.type)
-      }
+      this.getSetDate()
     },
     async onYearConditionConfirm() {
       this.isYearConditionShow = false
       this.timeType = 2
-      let result = await this.getSummarizingData()
-      if (this.active === 0) {
-        this.setSummarizingData(result)
-      } else {
-        this.$refs.organization.setTableData(result.content, this.params.type)
-      }
+      this.getSetDate()
     },
     // 筛选分公司确认事件
     async onProvinceConditionConfirm(data) {
@@ -377,12 +366,7 @@ export default {
       })
       const seconds = res.content
       this.cityObjs.push(...seconds)
-      let result = await this.getSummarizingData()
-      if (this.active === 0) {
-        this.setSummarizingData(result)
-      } else {
-        this.$refs.organization.setTableData(result.content, this.params.type)
-      }
+      this.getSetDate()
     },
     // 筛选城市确认事件
     async onCityConditionConfirm(data) {
@@ -406,12 +390,7 @@ export default {
       })
       const thirds = res.content
       this.areaObjs.push(...thirds)
-      let result = await this.getSummarizingData()
-      if (this.active === 0) {
-        this.setSummarizingData(result)
-      } else {
-        this.$refs.organization.setTableData(result.content, this.params.type)
-      }
+      this.getSetDate()
     },
     // 筛选地区确认事件
     async onAreaConditionConfirm(data) {
@@ -427,12 +406,7 @@ export default {
         this.params.manageCode = this.cityCode
         this.params.manageLv = '03'
       }
-      let result = await this.getSummarizingData()
-      if (this.active === 0) {
-        this.setSummarizingData(result)
-      } else {
-        this.$refs.organization.setTableData(result.content, this.params.type)
-      }
+      this.getSetDate()
     },
     // 筛选时间确认事件
     async onDayTimeConditionConfirm(time) {
@@ -440,16 +414,13 @@ export default {
       this.timeType = 3
       this.timeCondition = dateUtil.formatDate(time, 'MM-dd HH:mm')
       this.params.date = ''
-      let result = await this.getSummarizingData()
-      if (this.active === 0) {
-        this.setSummarizingData(result)
-      } else {
-        this.$refs.organization.setTableData(result.content, this.params.type)
-      }
+      this.getSetDate()
     },
     // 切换数据类型事件
     async changeDataType(index) {
+      document.title = '排名'
       if (this.typeIndex === index) {
+        this.isSideBarShow = false
         return
       }
       this.typeIndex = index
@@ -530,6 +501,9 @@ export default {
             break
         }
       }
+    },
+    async typeIndex() {
+      this.getSetDate()
     }
   }
 }