业绩快报添加险种名称列

src/views/ebiz/report/reportDetail.vue

@@ -1,39 +1,80 @@
 <template>
-  <div class="report-list-container mt15">
-    <div class="all">
-      <table class="move-table" cellspacing="0" cellpadding="0" border="0">
-        <tr>
-          <th>{{ this.title | filterTitle }}</th>
-          <th>当日预收件数</th>
-          <th>当日预收规模保费（万元）</th>
-          <th>当日承保件数</th>
-          <th>当日承保规模保费（万元）</th>
-          <th>当日承保标准保费（万元）</th>
-        </tr>
-        <tr v-for="(item, index) in reportList" :key="index">
-          <td v-if="item.manageComName != null">{{ item.manageComName }}</td>
-          <td v-else-if="item.riskName != null">{{ item.riskName }}</td>
-          <td v-else>{{ item.sellTypeName }}</td>
-          <td>{{ item.preItems }}</td>
-          <td>{{ item.prePrem }}</td>
-          <td>{{ item.items }}</td>
-          <td>{{ item.prem }}</td>
-          <td>{{ item.standPrem }}</td>
-        </tr>
-      </table>
-    </div>
+  <div class="report-list-container">
+    <div class="all mt15" v-if="!special">
+      <div>
+        <table class="move-table" cellspacing="0" cellpadding="0" border="0">
+          <tr>
+            <th>{{ this.title | filterTitle }}</th>
+            <th>当日预收件数</th>
+            <th>当日预收规模保费（万元）</th>
+            <th>当日承保件数</th>
+            <th>当日承保规模保费（万元）</th>
+            <th>当日承保标准保费（万元）</th>
+          </tr>
+          <tr v-for="(item, index) in reportList" :key="index">
+            <td v-if="item.manageComName != null">{{ item.manageComName }}</td>
+            <td v-else-if="item.riskName != null">{{ item.riskName }}</td>
+            <td v-else>{{ item.sellTypeName }}</td>
+            <td>{{ item.preItems }}</td>
+            <td>{{ item.prePrem }}</td>
+            <td>{{ item.items }}</td>
+            <td>{{ item.prem }}</td>
+            <td>{{ item.standPrem }}</td>
+          </tr>
+        </table>
+      </div>
 
-    <div class="l">
-      <table border="0" cellspacing="0" cellpadding="0" class="fixed-l">
-        <tr>
-          <th>{{ this.title | filterTitle }}</th>
-        </tr>
-        <tr v-for="(item, index) in reportList" :key="index">
-          <td v-if="item.manageComName != null">{{ item.manageComName }}</td>
-          <td v-else-if="item.riskName != null">{{ item.riskName }}</td>
-          <td v-else>{{ item.sellTypeName }}</td>
-        </tr>
-      </table>
+      <div class="l">
+        <table border="0" cellspacing="0" cellpadding="0" class="fixed-l">
+          <tr>
+            <th>{{ this.title | filterTitle }}</th>
+          </tr>
+          <tr v-for="(item, index) in reportList" :key="index">
+            <td v-if="item.manageComName != null">{{ item.manageComName }}</td>
+            <td v-else-if="item.salechnlName != null">{{ item.salechnlName }}</td>
+            <td v-else-if="item.riskName != null">{{ item.riskName }}</td>
+            <td v-else>{{ item.sellTypeName }}</td>
+          </tr>
+        </table>
+      </div>
+    </div>
+    <div v-else style="background: #fff; width: 1162px; min-height: 100vh;" class="specialTable pt15">
+      <div class="tableHead">
+        <span class="th w140 header fixedTitle" style="border-bottom: none;">合作渠道</span>
+        <span class="th w140 header firstCol">险种名称</span>
+        <span class="th w140 header">当日预收件数</span>
+        <span class="th header longTitle">当日预收规模保费（万元）</span>
+        <span class="th w140 header">当日承保件数</span>
+        <span class="th header longTitle">当日承保规模保费（万元）</span>
+        <span class="th header longTitle" style="border-right: none">当日承保标准保费（万元）</span>
+      </div>
+      <div v-for="(item, index) in company" :key="index" class="line">
+        <div class="th w140 fixedTitle" :style="{ height: item.data.length * 70 + 'px' }">
+          <div class="companyName">{{ item.name }}</div>
+        </div>
+        <div class="lineWrapper">
+          <div v-for="(data, i) in item.data" :key="i" class="firstCol">
+            <div class="data w140">
+              {{ data.riskName }}
+            </div>
+            <div class="data lh70 w140">
+              {{ data.preItems }}
+            </div>
+            <div class="data longTitle lh70">
+              {{ data.prePrem }}
+            </div>
+            <div class="data lh70 w140">
+              {{ data.items }}
+            </div>
+            <div class="data longTitle lh70">
+              {{ data.prem }}
+            </div>
+            <div class="data longTitle lh70">
+              {{ data.standPrem }}
+            </div>
+          </div>
+        </div>
+      </div>
     </div>
   </div>
 </template>
@@ -56,7 +97,9 @@ export default {
   data() {
     return {
       reportList: [],
-      title: ''
+      title: '',
+      special: false,
+      company: null
     }
   },
   beforeRouteLeave(to, from, next) {
@@ -64,41 +107,68 @@ export default {
     next()
   },
   mounted() {
-    document.body.style.backgroundColor = '#fff'
-    this.reportList = JSON.parse(localStorage.reportList)
-    if (localStorage.title == '团险') {
-      this.title = '健康险'
-    } else if (localStorage.title == '银代') {
-      if (localStorage.name) {
-        this.title = localStorage.name
-        document.title = '银保渠道'
-        return
-      } else {
-        this.title = '银保'
+    let special = localStorage.getItem('special')
+    if (special) {
+      this.special = special
+      // 获取所有公司名称
+      let companyName = new Set()
+      let dataList = JSON.parse(localStorage.reportList)
+      for (let data of dataList) {
+        companyName.add(data.salechnlName)
       }
-    } else if (localStorage.title == '个险') {
-      if (localStorage.name) {
-        this.title = localStorage.name
-        document.title = '个险渠道'
-        return
-      } else {
-        this.title = '个险'
+      let company = []
+      for (let name of companyName) {
+        company.push({
+          name: name,
+          data: []
+        })
       }
+
+      for (let data of dataList) {
+        for (let c of company) {
+          if (data.salechnlName === c.name) {
+            c.data.push(data)
+          }
+        }
+      }
+      this.company = company
     } else {
-      this.title = localStorage.title
-    }
-    this.reportList.map((item, index) => {
-      if (item.sellTypeName == null) {
-        item.sellTypeName = '其他'
+      document.body.style.backgroundColor = '#fff'
+      this.reportList = JSON.parse(localStorage.reportList)
+      if (localStorage.title == '团险') {
+        this.title = '健康险'
+      } else if (localStorage.title == '银代') {
+        if (localStorage.name) {
+          this.title = localStorage.name
+          document.title = '银保渠道'
+          return
+        } else {
+          this.title = '银保'
+        }
+      } else if (localStorage.title == '个险') {
+        if (localStorage.name) {
+          this.title = localStorage.name
+          document.title = '个险渠道'
+          return
+        } else {
+          this.title = '个险'
+        }
+      } else {
+        this.title = localStorage.title
       }
-      // if (localStorage.name) {
-      //   if (item.manageComName == null) {
-      //     item.manageComName = '其他'
-      //   }
-      // }
-    })
-    // 筛选按钮的点击事件
-    document.title = this.title + '渠道'
+      this.reportList.map((item, index) => {
+        if (item.sellTypeName == null) {
+          item.sellTypeName = '其他'
+        }
+        // if (localStorage.name) {
+        //   if (item.manageComName == null) {
+        //     item.manageComName = '其他'
+        //   }
+        // }
+      })
+      // 筛选按钮的点击事件
+      document.title = this.title + '渠道'
+    }
   },
   filters: {
     filterTitle: function(value) {
@@ -132,6 +202,77 @@ export default {
 }
 </script>
 <style lang="scss" scoped>
+$border: 1px solid #d7d7d7;
+
+* {
+  box-sizing: border-box;
+}
+
+.lineWrapper {
+  display: inline-block;
+  vertical-align: middle;
+}
+
+.companyName {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.tableHead {
+  border: $border;
+}
+
+.data {
+  height: 70px;
+  display: inline-block;
+  vertical-align: middle;
+  border-right: $border;
+  border-bottom: $border;
+  text-align: center;
+}
+
+.line {
+  border-left: $border;
+}
+
+.specialTable {
+  position: relative;
+}
+
+.header {
+  font-weight: bold;
+  line-height: 80px;
+  border-right: $border;
+}
+
+.th {
+  display: inline-block;
+  background-color: #fff;
+  text-align: center;
+}
+
+.fixedTitle {
+  position: sticky;
+  left: 0;
+  border-right: $border;
+  border-bottom: $border;
+  display: inline-block;
+  vertical-align: middle;
+}
+
+.longTitle {
+  width: 200px;
+}
+
+.w140 {
+  width: 140px;
+}
+
+.lh70 {
+  line-height: 70px;
+}
+
 .all {
   overflow-x: scroll;
   height: 100%;

src/views/ebiz/report/reportList.vue

@@ -54,7 +54,7 @@
       <van-button class="bottom0 left0" type="danger" @click="goDetail('1')" v-no-more-click="1000" size="large">银行明细</van-button>
     </div>
     <div class="flex justify-content-s bottom-btn bg-white" v-show="this.active == '1'">
-      <van-button class="bottom0 left0" type="danger" size="large" @click="goDetail('2')" v-no-more-click="1000">险种明细</van-button>
+      <van-button class="bottom0 left0" type="danger" size="large" @click="goDetail('2', true)" v-no-more-click="1000">险种明细</van-button>
       <van-button class="bottom0 left0" type="danger" @click="goDetail('1')" v-no-more-click="1000" size="large">机构明细</van-button>
     </div>
   </div>
@@ -116,7 +116,12 @@ export default {
         }
       })
     },
-    goDetail(val) {
+    goDetail(val, special) {
+      if (special) {
+        localStorage.setItem('special', special)
+      } else {
+        localStorage.removeItem('special')
+      }
       let name = ''
       let data = {
         resultsName: this.title,