diff --git a/src/api/ebiz/branchOffice/branchOffice.js b/src/api/ebiz/branchOffice/branchOffice.js
index 4df4c7fb2..966aeaf55 100644
--- a/src/api/ebiz/branchOffice/branchOffice.js
+++ b/src/api/ebiz/branchOffice/branchOffice.js
@@ -9,3 +9,30 @@ export function branchOfficeApi(data) {
     data
   })
 }
+
+// 个险业绩排行优化: 机构查询
+export function getComList(data) {
+  return request({
+    url: getUrl('/data/performance/getComList', 1),
+    method: 'post',
+    data
+  })
+}
+
+// 个险业绩排行优化: 业绩查询
+export function getComPerformance(data) {
+  return request({
+    url: getUrl('/data/performance/getComPerformance', 1),
+    method: 'post',
+    data
+  })
+}
+
+// 个险业绩排行优化: 机构查询
+export function getOrgList(data) {
+  return request({
+    url: getUrl('/data/performance/getBranchComList', 1),
+    method: 'post',
+    data
+  })
+}
diff --git a/src/assets/js/utils/request.js b/src/assets/js/utils/request.js
index d002bfc50..c55cb82ec 100644
--- a/src/assets/js/utils/request.js
+++ b/src/assets/js/utils/request.js
@@ -96,6 +96,9 @@ let whitelist = ['/agent/white/getWhiteInfo']
 
 let goodStart = ['/data/performance/getComPerformance']
 
+// 个险业绩排行优化
+let performanceRanking = ['/data/performance/getComList', '/data/performance/getComPerformance']
+
 let whiteList = [
   '/customer/agent/getCustomersList',
   ...proposal,
@@ -109,7 +112,8 @@ let whiteList = [
   ...renewalManage,
   ...hgb,
   ...whitelist,
-  ...goodStart
+  ...goodStart,
+  ...performanceRanking
 ]
 
 // 创建axios实例
diff --git a/src/router/ebiz/institutionalPerform.js b/src/router/ebiz/institutionalPerform.js
index d6f75f023..584473e17 100644
--- a/src/router/ebiz/institutionalPerform.js
+++ b/src/router/ebiz/institutionalPerform.js
@@ -26,7 +26,7 @@ export default [
     name: 'underOffice',
     component: UnderOffice,
     meta: {
-      title: '机构业绩',
+      title: '排名',
       index: 1
     }
   },
diff --git a/src/views/ebiz/institutionalPerform/Organization.vue b/src/views/ebiz/institutionalPerform/Organization.vue
new file mode 100644
index 000000000..df2e45f44
--- /dev/null
+++ b/src/views/ebiz/institutionalPerform/Organization.vue
@@ -0,0 +1,309 @@
+<template>
+  <div>
+    <van-tabs v-model="active">
+      <van-tab title="中心支公司"></van-tab>
+      <van-tab title="营销服务部"></van-tab>
+      <van-tab title="下辖营业区"></van-tab>
+    </van-tabs>
+    <div class="table-wrapper">
+      <table class="myTable mb30" :style="widthObj" cellspacing="0" cellpadding="0">
+        <tr>
+          <th class="sticky th-rank">排名</th>
+          <th v-for="(column, index) in columns" :key="index" :class="{ fixedWidth: index === 0, orgName: index === 0 }">
+            {{ column.name }}
+          </th>
+        </tr>
+        <tr v-show="values.length !== 0">
+          <td class="sticky bleft bright" colspan="2">合计</td>
+          <td class="bright" v-for="(total, i) in totals" :key="i">{{ total | blankFilter }}</td>
+        </tr>
+        <tr v-for="(value, index) in values" :key="index">
+          <td class="sticky bleft bright">{{ index + 1 }}</td>
+          <td v-for="(key, i) in needGettingKey" :key="i" class="bright" :class="{ orgName: i === 0 }">
+            {{ value[key] | blankFilter }}
+          </td>
+        </tr>
+        <tr v-if="values.length === 0">
+          <td class="nodata bleft bright" :colspan="columns.length + 1">暂无数据</td>
+        </tr>
+      </table>
+    </div>
+  </div>
+</template>
+
+<script>
+import { Tab, Tabs } from 'vant'
+import { orgShortNames } from '@/assets/js/utils/orgShortName'
+export default {
+  name: 'Organization',
+  components: {
+    [Tab.name]: Tab,
+    [Tabs.name]: Tabs
+  },
+  props: {
+    dataType: {
+      // 0: 业绩, 1: 人力, 2: 产品
+      type: Number,
+      default: 0
+    },
+    timeType: {
+      type: Number,
+      default: 0
+    }
+  },
+  computed: {
+    // 获取需要显示的列名称
+    columns() {
+      this.widthObj.minWidth = '200vw'
+      if (this.dataType === 0) {
+        switch (this.timeType) {
+          case 0:
+          case 3:
+            return this.tableColumns[0][0]
+          case 1:
+            return this.tableColumns[0][1]
+          case 2:
+            if (this.active <= 1) {
+              return this.tableColumns[0][2]
+            } else {
+              this.widthObj.minWidth = '100%'
+              return this.tableColumns[0][3]
+            }
+          default:
+            return []
+        }
+      } else {
+        return this.tableColumns[this.dataType]
+      }
+    },
+    needGettingKey() {
+      let keys = []
+      this.columns.forEach(element => {
+        keys.push(element.key)
+      })
+      return keys
+    }
+  },
+  data() {
+    return {
+      widthObj: {
+        minWidth: '200vw'
+      },
+      active: 0,
+      tableColumns: [
+        [
+          [
+            { isInt: false, name: '机构', key: 'name' },
+            { isInt: false, name: '预收标保(万元)', key: 'ysbb' },
+            { isInt: true, name: '预收件数(件)', key: 'ysjs' },
+            { isInt: false, name: '承保标保(万元)', key: 'bzbf' },
+            { isInt: true, name: '承保件数(件)', key: 'cbjs' }
+          ],
+          [
+            { isInt: false, name: '机构', key: 'name' },
+            { isInt: false, name: '预收标保(万元)', key: 'ysbb' },
+            { isInt: true, name: '预收件数(件)', key: 'ysjs' },
+            { isInt: false, name: '承保标保(万元)', key: 'bzbf' },
+            { isInt: true, name: '承保件数(件)', key: 'cbjs' },
+            { isInt: false, name: '承保同比', key: 'cbtb' },
+            { isInt: false, name: '承保环比', key: 'cbhb' }
+          ],
+          [
+            { isInt: false, name: '机构', key: 'name' },
+            { isInt: false, name: '承保标保(万元)', key: 'bzbf' },
+            { isInt: false, name: '标保目标', key: 'bbmb' },
+            { isInt: false, name: '标保目标达成率', key: 'bbmbdcl' },
+            { isInt: false, name: '差距', key: 'cj' }
+          ],
+          [
+            { isInt: false, name: '机构', key: 'name' },
+            { isInt: false, name: '承保标保(万元)', key: 'bzbf' }
+          ]
+        ],
+        [
+          { isInt: false, name: '机构', key: 'name' },
+          { isInt: true, name: '活动人力(人)', key: 'hdrl' },
+          { isInt: true, name: '合格人力(人)', key: 'hgrl' },
+          { isInt: true, name: '桂冠人力(人)', key: 'ggrl' },
+          { isInt: true, name: '桂冠正式会员(人)', key: 'gghy' },
+          { isInt: true, name: '双冠人力(人)', key: 'sgrl' },
+          { isInt: true, name: '新增人力(人)', key: 'xzrl' }
+        ],
+        [
+          { isInt: false, name: '产品', key: 'productName' },
+          { isInt: false, name: '承保标保(万元)', key: 'cbbb' },
+          { isInt: true, name: '承保件数(件)', key: 'cbItems' },
+          { isInt: false, name: '保费占比(%)', key: 'percent' }
+        ]
+      ],
+      values: [],
+      totals: []
+    }
+  },
+  methods: {
+    calculateTotal() {
+      this.totals = []
+      let columns = JSON.parse(JSON.stringify(this.columns))
+      // 排除第一列(排名)
+      columns.splice(0, 1)
+      for (let column of columns) {
+        let key = column.key
+        let total = this.values.reduce((prevVal, currVal) => {
+          let count = column.isInt ? parseInt(currVal[key]) : parseFloat(currVal[key])
+          return prevVal + count
+        }, 0)
+
+        if (column.isInt) {
+          this.totals.push(total)
+        } else {
+          this.totals.push(parseFloat(total.toFixed(2)))
+        }
+      }
+    },
+    setShortName() {
+      for (let org of this.values) {
+        for (let shortName of orgShortNames) {
+          if (org.code === shortName.code) {
+            org.name = shortName.name
+          }
+        }
+      }
+    },
+    setTableData(data, type) {
+      switch (type) {
+        case 'prem':
+          this.values = data.list ? data.list : []
+          this.setShortName()
+          this.calculateTotal()
+          break
+        case 'active':
+          this.values = data.listRL ? data.listRL : []
+          this.setShortName()
+          this.calculateTotal()
+          break
+        case 'product':
+          this.values = data.productDTO ? data.productDTO : []
+          this.calculate()
+          this.calculateTotal()
+          break
+      }
+    },
+    calculate() {
+      let allPrice = this.values.reduce((prevVal, currVal) => {
+        return prevVal + parseFloat(currVal.cbbb)
+      }, 0)
+      this.values.map(product => {
+        product.allPrice = allPrice
+        let percent = ((product.cbbb / allPrice) * 100).toFixed(8)
+        product.percent = percent
+        return product
+      })
+    }
+  },
+  watch: {
+    active: {
+      handler(nv) {
+        this.$emit('updateQueryCom', nv)
+      }
+    }
+  },
+  filters: {
+    blankFilter(val) {
+      if (isNaN(parseFloat(val))) {
+        return val ? val : '-'
+      } else {
+        let res = parseFloat(val).toFixed(2)
+        if (res.endsWith('.00')) {
+          return res.split('.')[0]
+        } else {
+          return res
+        }
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+$border: 1px solid #e4e4e4;
+$bgRed: #f03;
+$white: #fff;
+::v-deep .van-tabs__wrap {
+  padding: 10px;
+}
+
+::v-deep .van-tabs__nav {
+  border-radius: 5px;
+  border: 1px solid #e4e4e4;
+  padding-bottom: 0;
+}
+
+::v-deep .van-tabs__line {
+  bottom: 0;
+}
+
+::v-deep .van-tab--active {
+  font-size: 16px;
+  font-weight: bolder;
+  transition: all 0.1s ease;
+}
+
+.table-wrapper {
+  overflow: auto;
+  margin: 0 10px;
+}
+
+.myTable {
+  text-align: center;
+}
+
+.myTable td,
+.myTable th {
+  font-size: 14px;
+  padding: 10px 5px;
+  border-bottom: $border;
+  border-collapse: collapse;
+  background-color: $white;
+}
+
+.myTable th {
+  background-color: $bgRed;
+  border: none;
+  color: $white;
+}
+
+.sticky {
+  position: sticky;
+  left: 0;
+}
+
+.bleft {
+  border-left: $border;
+}
+
+.bright {
+  border-right: $border;
+}
+
+.nodata {
+  text-align: left;
+  text-indent: 10em;
+}
+
+th.fixedWidth {
+  width: 8em;
+}
+
+.th-rank {
+  width: 50px;
+}
+
+.orgName {
+  position: sticky;
+  left: 59px;
+}
+
+*::-webkit-scrollbar {
+  display: none;
+}
+</style>
diff --git a/src/views/ebiz/institutionalPerform/Summarizing.vue b/src/views/ebiz/institutionalPerform/Summarizing.vue
new file mode 100644
index 000000000..986b58fcd
--- /dev/null
+++ b/src/views/ebiz/institutionalPerform/Summarizing.vue
@@ -0,0 +1,241 @@
+<template>
+  <div class="summarize">
+    <div class="data-section">
+      <span ref="performance" class="title">
+        业绩
+      </span>
+      <div class="table-wrapper">
+        <table class="myTable" cellspacing="0" cellpadding="0">
+          <tr>
+            <th style="width: 50%;">机构业绩</th>
+            <th>达成</th>
+          </tr>
+          <tr>
+            <td class="bleft bright">预收标保</td>
+            <td class="bright">{{ performance.ysbb | unitFilter(1) | blankFilter }}</td>
+          </tr>
+          <tr>
+            <td class="bleft bright">预收件数</td>
+            <td class="bright">{{ performance.ysjs | unitFilter(2) | blankFilter }}</td>
+          </tr>
+          <tr>
+            <td class="bleft bright">承保标保</td>
+            <td class="bright">{{ performance.bzbf | unitFilter(1) | blankFilter }}</td>
+          </tr>
+          <tr>
+            <td class="bleft bright">承保件数</td>
+            <td class="bright">{{ performance.cbjs | unitFilter(2) | blankFilter }}</td>
+          </tr>
+        </table>
+      </div>
+    </div>
+    <div class="data-section">
+      <span ref="manpower" class="title">
+        人力
+      </span>
+      <div class="table-wrapper">
+        <table class="myTable" cellspacing="0" cellpadding="0">
+          <tr>
+            <th style="width: 50%;">人力指标</th>
+            <th>达成(人)</th>
+          </tr>
+          <tr>
+            <td class="bleft bright">活动人力</td>
+            <td class="bright">{{ manpower.hdrl | blankFilter }}</td>
+          </tr>
+          <tr>
+            <td class="bleft bright">合格人力</td>
+            <td class="bright">{{ manpower.hgrl | blankFilter }}</td>
+          </tr>
+          <tr>
+            <td class="bleft bright">桂冠人力</td>
+            <td class="bright">{{ manpower.ggrl | blankFilter }}</td>
+          </tr>
+          <tr>
+            <td class="bleft bright">桂冠正式会员</td>
+            <td class="bright">{{ manpower.gghy | blankFilter }}</td>
+          </tr>
+          <tr>
+            <td class="bleft bright">双冠人力</td>
+            <td class="bright">{{ manpower.sgrl | blankFilter }}</td>
+          </tr>
+          <tr>
+            <td class="bleft bright">新增人力</td>
+            <td class="bright">{{ manpower.xzrl | blankFilter }}</td>
+          </tr>
+        </table>
+      </div>
+    </div>
+    <div class="data-section">
+      <span ref="production" class="title">
+        产品
+      </span>
+      <p class="pl10">
+        总保费: <span class="all-price"> {{ performance.bzbf | blankFilter }}(万元)</span>
+      </p>
+      <div class="table-wrapper">
+        <table class="myTable" style="min-width: 140vw;" cellspacing="0" cellpadding="0">
+          <tr>
+            <th class="sticky">产品名称</th>
+            <th>承保标保(万元)</th>
+            <th>承保件数(件)</th>
+            <th>保费占比(%)</th>
+          </tr>
+          <tr v-for="(product, index) in products" :key="index">
+            <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 class="nodata bleft bright" colspan="4">暂无数据</td>
+          </tr>
+        </table>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Summarizing',
+  props: {
+    typeIndex: {
+      type: Number,
+      default: 0
+    }
+  },
+  data() {
+    return {
+      performance: {},
+      manpower: {},
+      products: [],
+      allPrice: 0
+    }
+  },
+  methods: {
+    setManpower(data) {
+      this.manpower = data
+    },
+    setPerformance(data) {
+      this.performance = data
+      this.allPrice = Number(this.performance.bzbf)
+    },
+    setProducts(data) {
+      this.products = data
+      this.products.map(product => {
+        let percent = ((Number(product.cbbb) / this.allPrice) * 100).toFixed(2)
+        product.percent = isNaN(percent) ? 0 : percent < 0 ? 0 : percent
+        return product
+      })
+    }
+  },
+  watch: {
+    typeIndex(nv) {
+      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
+      }
+    }
+  },
+  filters: {
+    blankFilter(val) {
+      return val ? val : '-'
+    },
+    unitFilter(val, unit) {
+      if (!val) {
+        return ''
+      }
+      // 1: 万元, 2: 件数
+      switch (unit) {
+        case 1:
+          return `${val} (万元)`
+        case 2:
+          return `${val} (件)`
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+$border: 1px solid #e4e4e4;
+$bgRed: #f03;
+$white: #fff;
+
+.summarize {
+  padding-bottom: 30px;
+}
+
+.data-section {
+  .title {
+    display: inline-block;
+    background-color: $bgRed;
+    color: $white;
+    padding: 5px 20px;
+    margin: 15px 0;
+    border-radius: 0 10px 10px 0;
+  }
+}
+
+.table-wrapper {
+  overflow: auto;
+  margin: 0 5px;
+}
+
+.myTable {
+  text-align: center;
+  width: 100%;
+}
+
+.myTable td,
+.myTable th {
+  padding: 10px 0;
+  border-bottom: $border;
+  border-collapse: collapse;
+  background-color: $white;
+}
+
+.myTable th {
+  background-color: $bgRed;
+  border: none;
+  color: $white;
+}
+
+.sticky {
+  width: 8em;
+  position: sticky;
+  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>
diff --git a/src/views/ebiz/institutionalPerform/UnderOffice.vue b/src/views/ebiz/institutionalPerform/UnderOffice.vue
index 2dc19607e..3ff4d9385 100644
--- a/src/views/ebiz/institutionalPerform/UnderOffice.vue
+++ b/src/views/ebiz/institutionalPerform/UnderOffice.vue
@@ -1,496 +1,600 @@
 <template>
-  <div v-cloak class="under-office-container">
-    <!-- <van-nav-bar left-text="机构业绩" left-arrow @click-left="onBack">
-      <template #right>
-        <img @click="getlComPremDetil" :src="refreshLogo" />
-      </template>
-    </van-nav-bar> -->
-    <!-- 业绩和人力 -->
-    <van-tabs @click="onClickMain" type="card" class="p0 title">
-      <van-tab title="机构业绩排名"></van-tab>
-      <van-tab title="机构人力排名"></van-tab>
-    </van-tabs>
-    <!-- 年月日选择 -->
-    <van-tabs @click="onClickRabs" type="card" class="pl20 pr20 pt10 pb10 bg-red1">
-      <van-tab title="实时"></van-tab>
-      <van-tab @click="showDatePicker = true" title="日"></van-tab>
-      <van-tab title="月"></van-tab>
-      <van-tab title="年"></van-tab>
-    </van-tabs>
-    <div class="p10 pl40 pr40">
-      <van-row>
-        <van-col span="3">
-          <img :src="calendar" />
-        </van-col>
-        <van-col class="fs14 mp2" span="9"><span v-if="showText">截至</span>{{ timeVal }}</van-col>
-        <van-col span="3">
+  <div>
+    <div class="header">
+      <div class="header-left" @click="changeSearchType">
+        <van-button>
           <img :src="point" />
-        </van-col>
-        <van-col span="9">
-          <span class="fs14" @click="showPicker = true">{{ sortTypeText }}</span>
-        </van-col>
-        <van-popup v-model="showPicker" position="bottom">
-          <van-picker show-toolbar :columns="queryColumns" @confirm="onConfirm" @cancel="showPicker = false" />
-        </van-popup>
-        <!-- 时间选择器 -->
-        <!-- 日 -->
-        <van-popup v-model="showDatePicker" position="bottom">
-          <van-datetime-picker
-            v-model="currentDate"
-            type="date"
-            :min-date="minDate"
-            :max-date="maxDate"
-            @confirm="onConfirmDate"
-            @cancel="showDatePicker = false"
-          />
-        </van-popup>
-        <!-- 月 -->
-        <van-popup v-model="showMonthPicker" position="bottom">
-          <van-datetime-picker
-            v-model="currentMonthDate"
-            type="year-month"
-            :min-date="minDate"
-            :max-date="maxDate"
-            :formatter="formatter"
-            @confirm="onConfirmDate"
-            @cancel="showMonthPicker = false"
-          />
-        </van-popup>
-        <!-- 年 -->
-        <van-popup v-model="showYearPicker" position="bottom">
-          <van-picker v-model="currentYearDate" show-toolbar :columns="YearColumns" @confirm="onConfirmDate" @cancel="showYearPicker = false" />
-        </van-popup>
-        <!-- /时间选择器 -->
-      </van-row>
-    </div>
-    <div class="layer-box">
-      <div class="layer">
-        <table class="fs14" style="table-layout：fixed;padding-left: 4.3em;">
-          <tr class="title">
-            <th class="td-1" style="height: 1.2em;">排名</th>
-            <th class="td-2">机构</th>
-            <!-- <th>预收标保</th> -->
-            <th>承保标保</th>
-            <th>承保保费</th>
-            <th>预收件数</th>
-            <th>承保件数</th>
-            <th>操作</th>
-          </tr>
-          <tr>
-            <td class="td-1 white" style="width:3em">1</td>
-            <td class="td-2">合计</td>
-            <!-- <td>{{ ysbbTotal.toFixed(2) }}</td> -->
-            <td>{{ bzbfTotol | toFixed(2) }}</td>
-            <td>{{ cbbfTotal.toFixed(2) }}</td>
-            <td>{{ ysjsTotal.toFixed(2) }}</td>
-            <td>{{ cbjsTotal.toFixed(2) }}</td>
-          </tr>
-          <tr v-for="(item, index) in tableData" :key="index">
-            <td class="td-1">{{ index + 1 }}</td>
-            <td class="td-2">
-              <div style="width:10em">{{ item.name }}</div>
-            </td>
-            <!-- <td>{{ item.ysbb }}</td> -->
-            <td>{{ item.bzbf | toFixed(2) }}</td>
-            <td>{{ item.cbbf | toFixed(2) }}</td>
-            <td>{{ item.ysjs | toFixed(2) }}</td>
-            <td>{{ item.cbjs | toFixed(2) }}</td>
-            <td>
-              <span @click="toDetail(item.code)" class="red1">查看</span>
-            </td>
-          </tr>
-        </table>
+          <span class="ml5 mr5">{{ typeName }}</span>
+          <van-icon name="arrow-down" />
+        </van-button>
+      </div>
+      <div class="header-center">
+        <van-button class="btn-gray" :class="{ activeBtn: timeType === 0 }" @click="isDayConditionShow = true">日</van-button>
+        <van-button class="btn-gray month" :class="{ activeBtn: timeType === 1 }" @click="isMonthConditionShow = true">月</van-button>
+        <van-button class="btn-gray" :class="{ activeBtn: timeType === 2 }" @click="isYearConditionShow = true">年</van-button>
+      </div>
+      <div class="header-right">
+        <van-button @click="isTimeBarShow = true">
+          <span class="mr5">{{ timeCondition }}</span>
+          <van-icon name="arrow-down" />
+        </van-button>
       </div>
     </div>
+    <!-- 筛选 -->
+    <div class="classification">
+      <span>机构名称: </span>
+      <span @click="isOrgLv2ConditionShow = true">
+        <span>{{ OrgLv2Name }}</span>
+        <van-icon name="arrow-down" />
+      </span>
+      <template v-if="isMoreConditionShow">
+        <span @click="isOrgLv3ConditionShow = true">
+          <span>{{ OrgLv4Name }}</span>
+          <van-icon name="arrow-down" />
+        </span>
+        <span @click="isOrgLv4ConditionShow = true">
+          <span>{{ OrgLv3Name }}</span>
+          <van-icon name="arrow-down" />
+        </span>
+      </template>
+    </div>
+    <div class="content">
+      <van-tabs v-model="active">
+        <van-tab title="汇总">
+          <Summarizing ref="summarizing" :typeIndex="typeIndex" />
+        </van-tab>
+        <van-tab title="分机构">
+          <Organization ref="organization" :dataType.sync="typeIndex" :timeType.sync="timeType" @updateQueryCom="updateQueryCom" />
+        </van-tab>
+      </van-tabs>
+    </div>
+    <!-- 侧边栏 -->
+    <van-popup v-model="isSideBarShow" position="left" :style="{ width: '50vw', height: '100vh' }" @close="onSidebarClose">
+      <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
+      }}</span>
+    </van-popup>
+    <!-- 时间筛选栏 -->
+    <van-popup v-model="isTimeBarShow" position="bottom" :style="{ height: '40vh' }">
+      <van-datetime-picker v-model="dayTimeCondition" type="datetime" :max-date="maxDate" @confirm="onDayTimeConditionConfirm" />
+    </van-popup>
+    <!-- 二级机构筛选栏 -->
+    <van-popup v-model="isOrgLv2ConditionShow" position="bottom" :style="{ height: '40vh' }">
+      <van-picker show-toolbar :columns="province" @confirm="onOrgLv2ConditionConfirm" @cancel="isOrgLv2ConditionShow = false" />
+    </van-popup>
+    <!-- 三级机构筛选栏 -->
+    <van-popup v-model="isOrgLv3ConditionShow" position="bottom" :style="{ height: '40vh' }">
+      <van-picker show-toolbar :columns="city" @confirm="onOrgLv3ConditionConfirm" @cancel="isOrgLv3ConditionShow = false" />
+    </van-popup>
+    <!-- 四级机构筛选栏 -->
+    <van-popup v-model="isOrgLv4ConditionShow" position="bottom" :style="{ height: '40vh' }">
+      <van-picker show-toolbar :columns="area" @confirm="onOrgLv4ConditionConfirm" @cancel="isOrgLv4ConditionShow = false" />
+    </van-popup>
+    <!-- 日 -->
+    <van-popup v-model="isDayConditionShow" position="bottom" :style="{ height: '40vh' }">
+      <van-datetime-picker v-model="dayCondition" type="date" :max-date="maxDate" @confirm="onDayConditionConfirm" />
+    </van-popup>
+    <!-- 月 -->
+    <van-popup v-model="isMonthConditionShow" position="bottom" :style="{ height: '40vh' }">
+      <van-datetime-picker v-model="monthCondition" type="year-month" :max-date="maxDate" @confirm="onMonthConditionConfirm" />
+    </van-popup>
+    <!-- 年 -->
+    <van-popup v-model="isYearConditionShow" position="bottom" :style="{ height: '40vh' }">
+      <van-picker show-toolbar :columns="years" @confirm="onYearConditionConfirm" />
+    </van-popup>
   </div>
 </template>
 
 <script>
-// import { XTable } from 'vux'
-import { branchOfficeApi } from '@/api/ebiz/branchOffice/branchOffice'
-import refreshLogo from '@/assets/images/ebiz/refresh.png'
-import calendar from '@/assets/images/ebiz/calendar.png'
 import point from '@/assets/images/ebiz/point.png'
-import { Tabs, Tab } from 'vant'
-import MinXin from '@/views/ebiz/institutionalPerform/InstitutionalManpower/components/js/mixins'
+import { Popup, Tab, Tabs, DatetimePicker, Picker, Toast } from 'vant'
+import Summarizing from './Summarizing.vue'
+import Organization from './Organization.vue'
+import dateUtil from '@/assets/js/utils/date-utils.js'
+import { getComPerformance, getOrgList } from '@/api/ebiz/branchOffice/branchOffice'
+
+// 当前时间
+const currentDate = new Date()
 
-import getApp from '@/assets/js/utils/getApp'
 export default {
-  name: 'districtOffice',
-
+  name: 'UnderOffice',
   components: {
-    // XTable,
+    [Popup.name]: Popup,
+    [Tab.name]: Tab,
     [Tabs.name]: Tabs,
-    [Tab.name]: Tab
+    [DatetimePicker.name]: DatetimePicker,
+    [Picker.name]: Picker,
+    [Toast.name]: Toast,
+    Summarizing,
+    Organization
   },
-  filters: {
-    toFixed(value) {
-      return Number(value).toFixed(2)
-    }
-  },
-  mixins: [MinXin],
   data() {
     return {
-      showText: true,
-      YearColumns: [],
-      minDate: new Date(2019, 0, 1),
-      maxDate: new Date(),
-      currentMonthDate: new Date(),
-      currentYearDate: new Date(),
-      currentDate: new Date(),
-      sortType: '2',
-      // 总和
-      ysjsTotal: 0,
-      ysbbTotol: 0,
-      cbjsTotal: 0,
-      cbbfTotal: 0,
-      ysbbTotal: 0,
-      bzbfTotal: 0,
-      tableData: [],
-      bzbfTotol: 0,
-      timeVal: '',
-      sortTypeText: '预收件数',
-      queryColumns: ['预收件数', '承保件数', '承保标保', '承保标保'],
-      showPicker: false,
-      // 年月日选择器
-      showDatePicker: false,
-      showMonthPicker: false,
-      showYearPicker: false,
-      //
-      refreshLogo,
-      calendar,
-      point,
+      timeType: 0,
+      // 最大查询日期
+      maxDate: currentDate,
+      // 日期筛选条件
+      dayCondition: currentDate,
+      // 月份筛选条件
+      monthCondition: currentDate,
+      // 年份筛选条件
+      yearCondition: currentDate.getFullYear(),
+      // 实时筛选时间条件
+      timeCondition: dateUtil.formatDate(currentDate, 'MM-dd HH:mm'),
+      dayTimeCondition: currentDate,
+      // 0: 标保, 1: 人力, 2: 产品
+      typeIndex: 0,
+      dataTypes: ['标保', '人力指标', '产品'],
       active: 0,
-      // 当前的机构编码
-      curCode: '',
-      dateType: 'now',
-      dateVal: '',
-      curTab: '',
-      shitimeVal: '',
-      curMainType: '01'
+      // 侧边栏是否显示
+      isSideBarShow: false,
+      // 日期筛选是否显示
+      isTimeBarShow: false,
+      // 二级机构筛选是否显示
+      isOrgLv2ConditionShow: false,
+      // 三级机构筛选是否显示
+      isOrgLv3ConditionShow: false,
+      // 四级机构筛选是否显示
+      isOrgLv4ConditionShow: false,
+      // 日筛选是否显示
+      isDayConditionShow: false,
+      // 月筛选是否展示
+      isMonthConditionShow: false,
+      // 年筛选是否显示
+      isYearConditionShow: false,
+      point,
+      OrgLv2Name: '全国',
+      OrgLv4Name: '全部',
+      OrgLv3Name: '全部',
+      OrgLv2Code: 0,
+      OrgLv2s: [],
+      OrgLv3Code: 0,
+      OrgLv3s: [],
+      areaCode: 0,
+      OrgLv4s: [],
+      years: [],
+      params: {
+        // 86: 全国
+        manageCode: '86',
+        // 01: 全国, 02: 中心支公司, 03: 营销服务部, 04: 下辖营业区
+        manageLv: '01',
+        // 日期类型: 年/月/日/实时
+        queryType: 'd',
+        date: currentDate,
+        // all: 汇总, prem: 保费排行, active：人力排行, product: 产品
+        type: 'all',
+        // 1: 中心支公司, 2: 营销服务部, 3: 下辖营业区
+        queryCom: ''
+      },
+      performance: {
+        pysbb: 0,
+        pysjs: 0,
+        pbzbf: 0,
+        pcbjs: 0
+      },
+      manpower: {},
+      products: []
     }
   },
-  methods: {
-    formatterYear(type, val) {
-      if (type === 'year') {
-        return val + '年'
-      }
-      return val
+  computed: {
+    isMoreConditionShow() {
+      return this.OrgLv2Name !== '全国'
     },
-    formatter(type, val) {
-      if (type === 'year') {
-        return `${val}年`
-      } else if (type === 'month') {
-        return `${val}月`
-      }
-      return val
+    province() {
+      const name = ['全国']
+      this.OrgLv2s.forEach(item => {
+        name.push(item.name)
+      })
+      return name
     },
-    onClickMain(name) {
-      if (name == 1) {
-        //this.curMainType = '02'
-        this.$router.push({
-          path: '/institutionalPerform/InstitutionalManpower/02/8645'
-        })
-      } else {
-        this.curMainType = '01'
-      }
-    },
-    onClickRabs(name, title) {
-      this.curTab = name
-      if (name == 1) {
-        this.showDatePicker = true
-      } else if (name == 2) {
-        this.showMonthPicker = true
-      } else if (name == 3) {
-        this.showYearPicker = true
-      } else {
-        // "截至"文字显示出来
-        this.showText = true
-        // 实时的时候date清空
-        this.dateType = 'now'
-        this.dateVal = ''
-        // 左侧时间实时赋值
-        this.timeVal = this.shitimeVal
-        // 调接口
-        this.getlComPremDetil()
-      }
-    },
-    toDetail(manageCode) {
-      this.$router.push({
-        path: '/institutionalPerform/ServiceDepartOffice',
-        query: {
-          manageCode: manageCode,
-          timeVal: this.timeVal,
-          showText: this.showText
+    city() {
+      const city = ['全部']
+      this.OrgLv3s.forEach(item => {
+        if (item.upBranchCode === this.OrgLv2Code) {
+          city.push(item.name)
         }
       })
+      return city
     },
-    //修改月、天的格式，保持两位数显示
-    add0(m) {
-      return m < 10 ? '0' + m : m
+    area() {
+      const area = ['全部']
+      this.OrgLv4s.forEach(item => {
+        if (item.upBranchCode === this.OrgLv3Code) {
+          area.push(item.name)
+        }
+      })
+      return area
     },
-    getCurrentDate() {
-      var timeStr = ''
-      var curDate = new Date()
-      var curMonth = curDate.getMonth() + 1 //获取当前月份(0-11,0代表1月)
-      var curDay = curDate.getDate() //获取当前日(1-31)
-
-      var curHour = curDate.getHours() //获取当前小时数(0-23)
-      var curMinute = curDate.getMinutes() // 获取当前分钟数(0-59)
-      var curSec = curDate.getSeconds() //获取当前秒数(0-59)
-      if (curHour < 10) {
-        if (curMinute < 10) {
-          timeStr += ' 0' + curHour + ':0' + curMinute
+    typeName() {
+      return this.dataTypes[this.typeIndex]
+    }
+  },
+  mounted() {
+    this.setRightBtn()
+    this.initData()
+  },
+  methods: {
+    onSidebarClose() {
+      document.title = '排名'
+    },
+    changeSearchType() {
+      this.isSideBarShow = true
+      document.title = '返回'
+    },
+    async reset() {
+      location.reload()
+    },
+    async setRankData() {
+      let result = await this.getRankData()
+      if (result.result === '0') {
+        if (this.active === 0) {
+          this.setSummarizingData(result)
         } else {
-          timeStr += ' 0' + curHour + ':' + curMinute
+          this.$refs.organization.setTableData(result.content, this.params.type)
         }
       } else {
-        if (curMinute < 10) {
-          timeStr += ' ' + curHour + ':0' + curMinute
-        } else {
-          timeStr += ' ' + curHour + ':' + curMinute
-        }
+        this.$toast(result.resultMessage)
       }
-      // 一直在获取时间
-      this.shitimeVal = this.add0(curMonth) + '-' + this.add0(curDay) + timeStr
-      // 存页面上值得一个变量
-      this.timeVal = this.shitimeVal
     },
-    dateFormat(time) {
-      // 时间格式化 2019-09-08
-      let year = time.getFullYear()
-      let month = time.getMonth() + 1
-      let day = time.getDate()
-      return year + '-' + this.add0(month) + '-' + this.add0(day)
-    },
-    onConfirmDate(value, index) {
-      // 点击确定那么文字“截至”就隐藏
-      this.showText = false
-      if (this.curTab == 1) {
-        // now：当前 y:年 m:月 d:日
-        // 日
-        this.dateType = 'd'
-        this.dateVal = this.dateFormat(this.currentDate)
-        // 左侧时间实时赋值
-        this.timeVal = this.dateVal
-      } else if (this.curTab == 2) {
-        // 月
-        this.dateType = 'm'
-        this.dateVal = this.dateFormat(this.currentMonthDate)
-        // 左侧时间实时赋值
-        this.timeVal = this.dateVal.substring(0, 7)
-      } else if (this.curTab == 3) {
-        // 年
-        this.dateType = 'y'
-        this.dateVal = value + '-' + '01' + '-' + '01'
-        // 左侧时间实时赋值
-        this.timeVal = this.dateVal.substring(0, 4)
-      }
-      ;(this.showDatePicker = false), (this.showMonthPicker = false), (this.showYearPicker = false), this.getlComPremDetil()
-    },
-    onConfirm(value, index) {
-      this.sortTypeText = value
-      switch (value) {
-        //  '预收件数', '预收标保', '承保件数', '承保标保', '承保标保
-        case '预收件数':
-          this.sortType = '1'
-          break
-        // case '预收标保':
-        //   this.sortType = '2'
-        //   break
-        case '承保件数':
-          this.sortType = '3'
-          break
-        case '承保标保':
-          this.sortType = '4'
-          break
-        case '承保标保':
-          this.sortType = '5'
-          break
-      }
-      this.showPicker = false
-      this.getlComPremDetil()
-    },
-    onBack() {
-      this.$router.go(-1)
-    },
-    //获取列表
-    getlComPremDetil() {
-      let $this = this
-      let data = {
-        manageCode: '8645',
-        manageLv: '02',
-        sortType: this.sortType,
-        queryType: this.dateType,
-        date: this.dateVal,
-        //01：保费排行 02：人力排行
-        type: this.curMainType
-      }
-      // 去除对象里面是空的属性
-      for (var key in data) {
-        if (data[key] === '') {
-          delete data[key]
-        }
-      }
-      branchOfficeApi(data)
-        .then(res => {
-          if (res.result == 0) {
-            $this.tableData = res.content.list
-
-            $this.ysjsTotal = 0
-            $this.ysbbTotol = 0
-            $this.cbjsTotal = 0
-            $this.cbbfTotal = 0
-            $this.bzbfTotal = 0
-            $this.ysbbTotal = 0
-            $this.bzbfTotol = 0
-            // 业绩排名的 总计计算
-            $this.tableData.map(function(val) {
-              $this.bzbfTotol = Number($this.bzbfTotol) + Number(val.bzbf)
-              $this.ysbbTotal = Number($this.ysbbTotal) + Number(val.ysbb)
-              $this.ysjsTotal = Number($this.ysjsTotal) + Number(val.ysjs)
-              $this.ysbbTotol = Number($this.ysbbTotol) + Number(val.ysbb)
-              $this.cbjsTotal = Number($this.cbjsTotal) + Number(val.cbjs)
-              $this.cbbfTotal = Number($this.cbbfTotal) + Number(val.cbbf)
-              $this.bzbfTotal = Number($this.bzbfTotal) + Number(val.bzbf)
-            })
-          }
-        })
-        .catch(err => {})
-    },
-    //页面返回服务页
     appCallBack(data) {
       if (data.trigger == 'right_button_click') {
-        this.$jump({
-          flag: 'service'
+        this.reset()
+      }
+    },
+    dataTypeChange() {
+      this.setRankData()
+    },
+    setRightBtn() {
+      setTimeout(() => {
+        window.EWebBridge.webCallAppInJs('webview_right_button', {
+          btns: [
+            {
+              img: this.$assetsUrl + 'images/ebiz/refresh.png'
+            }
+          ]
         })
+      }, 1000)
+      window.appCallBack = this.appCallBack
+    },
+    async initData() {
+      // 初始化年份筛选数据
+      const currentYear = new Date().getFullYear()
+      const startYear = currentYear - 10
+      for (let year = startYear; year <= currentYear; year++) {
+        this.years.unshift(year)
+      }
+      /**
+       * 查询机构下拉列表
+       * manageCode, manageLv传空查全国所有二级机构
+       **/
+      console.log('getOrgList :>> ', getOrgList)
+      const res = await getOrgList({
+        bussinessType: 'normal',
+        manageCode: '',
+        manageLv: ''
+      })
+      if (res.result === '0') {
+        this.OrgLv2s.push(...res.content)
+      } else {
+        this.$toast(res.resultMessage)
+      }
+      // 查询默认数据
+      const result = await this.getRankData()
+      this.setSummarizingData(result)
+    },
+    async getRankData() {
+      let date = null
+      switch (this.timeType) {
+        case 0:
+          date = this.dayCondition
+          this.params.queryType = 'd'
+          break
+        case 1:
+          date = this.monthCondition
+          this.params.queryType = 'm'
+          break
+        case 2:
+          date = new Date(String(this.yearCondition))
+          this.params.queryType = 'y'
+          break
+        case 3:
+          date = this.dayTimeCondition
+          this.params.queryType = 'd'
+          break
+      }
+      this.params.date = dateUtil.formatDate(date, 'yyyy-MM-dd')
+      console.log('this.params :>> ', this.params)
+      let result = await getComPerformance(this.params)
+      return result
+    },
+    // 按日筛选
+    onDayConditionConfirm() {
+      this.isDayConditionShow = false
+      this.timeType = 0
+      this.setRankData()
+    },
+    // 按月筛选
+    onMonthConditionConfirm() {
+      this.isMonthConditionShow = false
+      this.timeType = 1
+      this.setRankData()
+    },
+    // 按年筛选
+    onYearConditionConfirm(year) {
+      this.yearCondition = year
+      this.isYearConditionShow = false
+      this.timeType = 2
+      this.setRankData()
+    },
+    // 筛选二级机构
+    async onOrgLv2ConditionConfirm(data) {
+      this.isOrgLv2ConditionShow = false
+      let OrgLv2 = this.OrgLv2s.find(item => item.name === data)
+      if (OrgLv2) {
+        this.OrgLv2Code = OrgLv2.code
+        this.params.manageCode = this.OrgLv2Code
+        this.params.manageLv = '02'
+      }
+      if (data === '全国') {
+        this.params.manageCode = '86'
+        this.params.manageLv = '01'
+      }
+      this.OrgLv2Name = data
+      this.OrgLv4Name = '全部'
+      this.OrgLv3Name = '全部'
+      // 查询三级机构
+      const res = await getOrgList({
+        bussinessType: 'normal',
+        manageCode: this.OrgLv2Code,
+        manageLv: '02'
+      })
+      this.OrgLv3s.splice(0)
+      this.OrgLv3s.push(...res.content)
+      this.setRankData()
+    },
+    // 筛选三级机构
+    async onOrgLv3ConditionConfirm(data) {
+      this.isOrgLv3ConditionShow = false
+      this.OrgLv4Name = data
+      let OrgLv3 = this.OrgLv3s.find(item => item.name === data)
+      if (OrgLv3) {
+        this.OrgLv3Code = OrgLv3.code
+        this.params.manageCode = this.OrgLv3Code
+        this.params.manageLv = '03'
+      }
+      if (data === '全部') {
+        this.params.manageCode = this.OrgLv2Code
+        this.params.manageLv = '02'
+      }
+      this.OrgLv3Name = '全部'
+      // 查询四级机构
+      const res = await getOrgList({
+        bussinessType: 'normal',
+        manageCode: this.OrgLv3Code,
+        manageLv: '03'
+      })
+      this.OrgLv4s.splice(0)
+      this.OrgLv4s.push(...res.content)
+      this.setRankData()
+    },
+    // 筛选四级机构
+    async onOrgLv4ConditionConfirm(data) {
+      this.isOrgLv4ConditionShow = false
+      this.OrgLv3Name = data
+      let area = this.OrgLv4s.find(item => item.name === data)
+      if (area) {
+        this.areaCode = area.code
+        this.params.manageCode = this.areaCode
+        this.params.manageLv = '04'
+      }
+      if (data === '全部') {
+        this.params.manageCode = this.OrgLv3Code
+        this.params.manageLv = '03'
+      }
+      this.setRankData()
+    },
+    // 筛选时间确认事件
+    async onDayTimeConditionConfirm(time) {
+      this.isTimeBarShow = false
+      this.timeType = 3
+      this.timeCondition = dateUtil.formatDate(time, 'MM-dd HH:mm')
+      this.params.date = ''
+      this.setRankData()
+    },
+    // 切换数据类型事件
+    changeDataType(index) {
+      if (this.typeIndex === index) {
+        this.isSideBarShow = false
+        return
+      }
+      this.typeIndex = index
+      if (this.active === 0) {
+        this.params.type = 'all'
+        this.isSideBarShow = false
+        return
+      } else {
+        switch (this.typeIndex) {
+          case 0:
+            this.params.type = 'prem'
+            break
+          case 1:
+            this.params.type = 'active'
+            break
+          case 2:
+            this.params.type = 'product'
+            break
+        }
+      }
+      this.isSideBarShow = false
+    },
+    async updateQueryCom(val) {
+      switch (val) {
+        case 0:
+          this.params.queryCom = 'z'
+          break
+        case 1:
+          this.params.queryCom = 'y'
+          break
+        case 2:
+          this.params.queryCom = 'q'
+          break
+      }
+      switch (this.typeIndex) {
+        case 0:
+          this.params.type = 'prem'
+          break
+        case 1:
+          this.params.type = 'active'
+          break
+        case 2:
+          this.params.type = 'product'
+          break
+      }
+      let result = await this.getRankData()
+      this.$refs.organization.setTableData(result.content, this.params.type)
+    },
+    setSummarizingData(data) {
+      if (data.result === '0') {
+        const preDTO = data.content.preDTO ? data.content.preDTO : {}
+        const rlDTO = data.content.rlDTO ? data.content.rlDTO : {}
+        const productDTO = data.content.productDTO ? data.content.productDTO : {}
+        // 汇总业绩显示
+        this.$refs.summarizing.setPerformance(preDTO)
+        this.$refs.summarizing.setProducts(productDTO)
+        this.$refs.summarizing.setManpower(rlDTO)
+      } else {
+        this.$toast(data.resultMessage)
       }
     }
   },
-  // created() {
-  //   var that = this
-
-  //   getApp.closeBtn(that)
-  //   window.appCallBack = that.appCallBac
-  // },
-  mounted() {
-    //  this.timeVal=this.$route.query.timeVal||""
-    //  this.showText=this.$route.query.showText
-    let currentYear = new Date().getFullYear()
-    for (let year = 2019; year <= currentYear; year++) {
-      this.YearColumns.unshift(year)
+  watch: {
+    active(nv) {
+      // nv = 0 查询汇总
+      if (nv === 0) {
+        this.params.type = 'all'
+        this.setRankData()
+      } else {
+        switch (this.typeIndex) {
+          case 0:
+            this.params.type = 'prem'
+            break
+          case 1:
+            this.params.type = 'active'
+            break
+          case 2:
+            this.params.type = 'product'
+            break
+        }
+        this.$nextTick(() => {
+          this.updateQueryCom(this.$refs.organization.active)
+        })
+      }
+    },
+    async typeIndex() {
+      this.setRankData()
     }
-
-    this.getCurrentDate()
-    setInterval(this.getCurrentDate, 1000 * 60)
-    this.getlComPremDetil()
   }
 }
 </script>
-<style lang="scss">
-@import '@/assets/sass/variables.scss';
-.under-office-container {
-  .van-row {
-    line-height: 1.6rem;
-  }
-  .oneTab .van-tabs__nav--card .van-tab {
-    background-color: #fff;
-    border-right: 1px solid #fff;
-  }
-  .van-tabs__nav--card .van-tab.van-tab--active {
-    color: $red1;
-    background-color: #fff;
-  }
-  .van-tabs__nav--card .van-tab {
-    color: #232020;
-    background-color: #e6e6e6;
-    border-right: 1px solid #8e8d8d;
-    &:last-child {
-      border-right: none !important;
-    }
-  }
-  .van-nav-bar .van-icon,
-  .van-nav-bar__text {
-    color: #232020;
-  }
-  .slide-box {
-    display: -webkit-box;
-    overflow-x: scroll;
-    -webkit-overflow-scrolling: touch;
-  }
-  table.gridtable {
-    font-family: verdana, arial, sans-serif;
-    font-size: 11px;
-    color: #333333;
-    border-width: 1px;
-    border-color: #666666;
-    border-collapse: collapse;
-  }
-  table .title th {
-    color: #fff;
-    padding: 5px 10px;
 
-    white-space: nowrap;
-    border-width: 1px;
-    border-color: #666666;
-    background-color: $red1;
-    border-top: 0;
-    border-left: 0;
-    border-right: 0;
+<style lang="scss" scoped>
+.header {
+  font-size: 14px;
+  display: flex;
+  justify-content: space-between;
+  padding: 8px;
+  background: #f03;
+  .header-left,
+  .header-center,
+  .header-right {
+    border-radius: 5px;
+    overflow: hidden;
   }
-  table td {
-    text-align: right;
-    border-width: 1px;
-    padding: 8px;
-    // border-style: solid;
-    // border-color: #666666;
-    background-color: #ffffff;
-    border-top: 0;
-    border-left: 0;
-    border-right: 0;
-    &:nth-child(2) {
-      text-align: center;
+  .header-center {
+    .month {
+      border-left: none;
+      border-right: none;
+    }
+    .van-button {
+      border-radius: 0;
     }
-  }
-  table {
-    border: 0;
-  }
-  .title .van-tabs__nav--card {
-    margin: 0;
-    border: 1px solid #bdbdbd;
-    border-left: none;
-    border-right: none;
-  }
-  .title .van-tabs__nav--card .van-tab {
-    background-color: transparent;
-  }
-  // 固定表头
-  td,
-  th {
-    /* color: #333;
-            font-size: 14px;
-            border-right: 1px solid #333;
-            line-height: 30px; */
-    /* box-sizing: border-box; */
-    background: #fff;
-  }
-  .layer-box {
-    width: 100%;
-    overflow: hidden;
-    position: relative;
-  }
-  .layer {
-    width: 100%;
-    overflow: hidden;
-    overflow-x: scroll;
-  }
-  .td-1 {
-    position: absolute;
-    padding: 2.13333vw;
-    left: 0;
-    z-index: 2;
-    width: 3em;
-    height: 2.5em;
   }
 }
+
+.classification {
+  font-size: 14px;
+  padding: 15px;
+}
+
+.content {
+  padding: 0 10px;
+}
+
+.title {
+  font-weight: bolder;
+  margin: 15px;
+}
+
+.data-type {
+  display: inline-block;
+  padding: 5px 10px;
+  border-radius: 10px;
+  margin: 10px;
+  border: 1px solid #ccc;
+  font-size: 14px;
+}
+
+.data-active {
+  display: inline-block;
+  padding: 5px 10px;
+  background: red;
+  border-radius: 10px;
+  margin: 10px;
+  color: #fff;
+  border: 1px solid red;
+}
+
+.btn-gray {
+  background-color: #f2f2f2;
+}
+
+.activeBtn {
+  color: red;
+  background-color: #fff;
+}
+
+::v-deep .van-tab__pane {
+  background-color: #fff;
+}
+
+::v-deep .van-button__text {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+::v-deep .van-button {
+  padding: 0 10px;
+}
+
+::v-deep [class*='van-hairline']::after {
+  border: none;
+}
+
+.van-icon {
+  font-weight: bolder;
+}
+
+::v-deep .classification .van-icon {
+  vertical-align: middle;
+  margin-right: 5px;
+  margin-bottom: 3px;
+}
+
+::v-deep .van-tab--active {
+  font-size: 16px;
+  font-weight: bolder;
+  transition: all 0.1s ease;
+}
 </style>
diff --git a/yarn.lock b/yarn.lock
index 0ba6cbf64..e6d4a7f9f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2813,11 +2813,6 @@ crypto-browserify@^3.11.0:
     randombytes "^2.0.0"
     randomfill "^1.0.3"
 
-crypto-js@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.npm.taobao.org/crypto-js/download/crypto-js-4.0.0.tgz#2904ab2677a9d042856a2ea2ef80de92e4a36dcc"
-  integrity sha1-KQSrJnep0EKFai6i74DekuSjbcw=
-
 css-color-names@0.0.4, css-color-names@^0.0.4:
   version "0.0.4"
   resolved "https://registry.yarnpkg.com/css-color-names/-/css-color-names-0.0.4.tgz#808adc2e79cf84738069b646cb20ec27beb629e0"
@@ -3065,7 +3060,7 @@ debug@=3.1.0:
   dependencies:
     ms "2.0.0"
 
-debug@^3.0.0, debug@^3.1.0, debug@^3.1.1, debug@^3.2.5:
+debug@^3.0.0, debug@^3.1.0, debug@^3.1.1, debug@^3.2.5, debug@^3.2.6:
   version "3.2.6"
   resolved "https://registry.yarnpkg.com/debug/-/debug-3.2.6.tgz#e83d17de16d8a7efb7717edbe5fb10135eee629b"
   integrity sha512-mel+jf7nrtEl5Pn1Qx46zARXKDpBbvzezse7p7LqINmdoIk8PYP5SySaxEmYv6TZ0JyEKA1hsCId6DIhgITtWQ==
@@ -3101,6 +3096,11 @@ deep-equal@^1.0.1:
     object-keys "^1.1.1"
     regexp.prototype.flags "^1.2.0"
 
+deep-extend@^0.6.0:
+  version "0.6.0"
+  resolved "https://registry.yarnpkg.com/deep-extend/-/deep-extend-0.6.0.tgz#c4fa7c95404a17a9c3e8ca7e1537312b736330ac"
+  integrity sha512-LOHxIOaPYdHlJRtCQfDIVZtfw/ufM8+rVj649RIHzcm/vGwQRXFt6OPqIFWsm2XEMrNIEtWR64sY1LEKD2vAOA==
+
 deep-is@~0.1.3:
   version "0.1.3"
   resolved "https://registry.yarnpkg.com/deep-is/-/deep-is-0.1.3.tgz#b369d6fb5dbc13eecf524f91b070feedc357cf34"
@@ -3217,6 +3217,11 @@ detect-indent@^4.0.0:
   dependencies:
     repeating "^2.0.0"
 
+detect-libc@^1.0.2:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/detect-libc/-/detect-libc-1.0.3.tgz#fa137c4bd698edf55cd5cd02ac559f91a4c4ba9b"
+  integrity sha1-+hN8S9aY7fVc1c0CrFWfkaTEups=
+
 detect-newline@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/detect-newline/-/detect-newline-2.1.0.tgz#f41f1c10be4b00e87b5f13da680759f2c5bfd3e2"
@@ -4341,6 +4346,13 @@ fs-extra@^7.0.1:
     jsonfile "^4.0.0"
     universalify "^0.1.0"
 
+fs-minipass@^1.2.5:
+  version "1.2.7"
+  resolved "https://registry.yarnpkg.com/fs-minipass/-/fs-minipass-1.2.7.tgz#ccff8570841e7fe4265693da88936c55aed7f7c7"
+  integrity sha512-GWSSJGFy4e9GUeCcbIkED+bgAoFyj7XF1mV8rma3QW4NIqX9Kyx79N/PF61H5udOV3aY1IaMLs6pGbH71nlCTA==
+  dependencies:
+    minipass "^2.6.0"
+
 fs-write-stream-atomic@^1.0.8:
   version "1.0.10"
   resolved "https://registry.yarnpkg.com/fs-write-stream-atomic/-/fs-write-stream-atomic-1.0.10.tgz#b47df53493ef911df75731e70a9ded0189db40c9"
@@ -4894,7 +4906,7 @@ human-signals@^1.1.1:
   resolved "https://registry.yarnpkg.com/human-signals/-/human-signals-1.1.1.tgz#c5b1cd14f50aeae09ab6c59fe63ba3395fe4dfa3"
   integrity sha512-SEQu7vl8KjNL2eoGBLF3+wAjpsNfA9XMlXAYj/3EdaNfAlxKthD1xjEQfGOUhllCGGJVNY34bRr6lPINhNjyZw==
 
-iconv-lite@0.4.24, iconv-lite@^0.4.17, iconv-lite@^0.4.24:
+iconv-lite@0.4.24, iconv-lite@^0.4.17, iconv-lite@^0.4.24, iconv-lite@^0.4.4:
   version "0.4.24"
   resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.24.tgz#2022b4b25fbddc21d2f524974a474aafe733908b"
   integrity sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==
@@ -4923,6 +4935,13 @@ iferr@^0.1.5:
   resolved "https://registry.yarnpkg.com/iferr/-/iferr-0.1.5.tgz#c60eed69e6d8fdb6b3104a1fcbca1c192dc5b501"
   integrity sha1-xg7taebY/bazEEofy8ocGS3FtQE=
 
+ignore-walk@^3.0.1:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/ignore-walk/-/ignore-walk-3.0.3.tgz#017e2447184bfeade7c238e4aefdd1e8f95b1e37"
+  integrity sha512-m7o6xuOaT1aqheYHKf8W6J5pYH85ZI9w077erOzLje3JsB1gkafkAhHHY19dqjulgIZHFm32Cp5uNZgcQqdJKw==
+  dependencies:
+    minimatch "^3.0.4"
+
 ignore@^3.3.3, ignore@^3.3.5:
   version "3.3.10"
   resolved "https://registry.yarnpkg.com/ignore/-/ignore-3.3.10.tgz#0a97fb876986e8081c631160f8f9f389157f0043"
@@ -5029,7 +5048,7 @@ inherits@2.0.3:
   resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.3.tgz#633c2c83e3da42a502f52466022480f4208261de"
   integrity sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=
 
-ini@^1.3.4:
+ini@^1.3.4, ini@~1.3.0:
   version "1.3.5"
   resolved "https://registry.yarnpkg.com/ini/-/ini-1.3.5.tgz#eee25f56db1c9ec6085e0c22778083f596abf927"
   integrity sha512-RZY5huIKCMRWDUqZlEi72f/lmXKMvuszcMBduliQ3nnWbx9X/ZBQO7DijMEYS9EhHBb2qacRUMtC7svLwe0lcw==
@@ -5919,11 +5938,6 @@ js-levenshtein@^1.1.3:
   resolved "https://registry.yarnpkg.com/js-levenshtein/-/js-levenshtein-1.1.6.tgz#c6cee58eb3550372df8deb85fad5ce66ce01d59d"
   integrity sha512-X2BB11YZtrRqY4EnQcLX5Rh373zbK4alC1FW7D7MBhL2gtcC17cTnr6DmfHZeS0s2rTHjUTMMHfG7gO8SSdw+g==
 
-js-md5@^0.7.3:
-  version "0.7.3"
-  resolved "https://registry.npm.taobao.org/js-md5/download/js-md5-0.7.3.tgz#b4f2fbb0b327455f598d6727e38ec272cd09c3f2"
-  integrity sha1-tPL7sLMnRV9ZjWcn447Ccs0Jw/I=
-
 js-message@1.0.5:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/js-message/-/js-message-1.0.5.tgz#2300d24b1af08e89dd095bc1a4c9c9cfcb892d15"
@@ -6591,6 +6605,21 @@ minimist@~0.0.1:
   resolved "https://registry.yarnpkg.com/minimist/-/minimist-0.0.10.tgz#de3f98543dbf96082be48ad1a0c7cda836301dcf"
   integrity sha1-3j+YVD2/lggr5IrRoMfNqDYwHc8=
 
+minipass@^2.6.0, minipass@^2.8.6, minipass@^2.9.0:
+  version "2.9.0"
+  resolved "https://registry.yarnpkg.com/minipass/-/minipass-2.9.0.tgz#e713762e7d3e32fed803115cf93e04bca9fcc9a6"
+  integrity sha512-wxfUjg9WebH+CUDX/CdbRlh5SmfZiy/hpkxaRI16Y9W56Pa75sWgd/rvFilSgrauD9NyFymP/+JFV3KwzIsJeg==
+  dependencies:
+    safe-buffer "^5.1.2"
+    yallist "^3.0.0"
+
+minizlib@^1.2.1:
+  version "1.3.3"
+  resolved "https://registry.yarnpkg.com/minizlib/-/minizlib-1.3.3.tgz#2290de96818a34c29551c8a8d301216bd65a861d"
+  integrity sha512-6ZYMOEnmVsdCeTJVE0W9ZD+pVnE8h9Hma/iOwwRDsdQoePpoX56/8B6z3P9VNwppJuBKNRuFDRNRqRWexT9G9Q==
+  dependencies:
+    minipass "^2.9.0"
+
 mississippi@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/mississippi/-/mississippi-2.0.0.tgz#3442a508fafc28500486feea99409676e4ee5a6f"
@@ -6719,6 +6748,15 @@ natural-compare@^1.4.0:
   resolved "https://registry.yarnpkg.com/natural-compare/-/natural-compare-1.4.0.tgz#4abebfeed7541f2c27acfb29bdbbd15c8d5ba4f7"
   integrity sha1-Sr6/7tdUHywnrPspvbvRXI1bpPc=
 
+needle@^2.2.1:
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/needle/-/needle-2.4.0.tgz#6833e74975c444642590e15a750288c5f939b57c"
+  integrity sha512-4Hnwzr3mi5L97hMYeNl8wRW/Onhy4nUKR/lVemJ8gJedxxUyBLm9kkrDColJvoSfwi0jCNhD+xCdOtiGDQiRZg==
+  dependencies:
+    debug "^3.2.6"
+    iconv-lite "^0.4.4"
+    sax "^1.2.4"
+
 negotiator@0.6.2:
   version "0.6.2"
   resolved "https://registry.yarnpkg.com/negotiator/-/negotiator-0.6.2.tgz#feacf7ccf525a77ae9634436a64883ffeca346fb"
@@ -6831,6 +6869,22 @@ node-notifier@^5.2.1:
     shellwords "^0.1.1"
     which "^1.3.0"
 
+node-pre-gyp@*:
+  version "0.14.0"
+  resolved "https://registry.yarnpkg.com/node-pre-gyp/-/node-pre-gyp-0.14.0.tgz#9a0596533b877289bcad4e143982ca3d904ddc83"
+  integrity sha512-+CvDC7ZttU/sSt9rFjix/P05iS43qHCOOGzcr3Ry99bXG7VX953+vFyEuph/tfqoYu8dttBkE86JSKBO2OzcxA==
+  dependencies:
+    detect-libc "^1.0.2"
+    mkdirp "^0.5.1"
+    needle "^2.2.1"
+    nopt "^4.0.1"
+    npm-packlist "^1.1.6"
+    npmlog "^4.0.2"
+    rc "^1.2.7"
+    rimraf "^2.6.1"
+    semver "^5.3.0"
+    tar "^4.4.2"
+
 node-releases@^1.1.44:
   version "1.1.44"
   resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-1.1.44.tgz#cd66438a6eb875e3eb012b6a12e48d9f4326ffd7"
@@ -6868,7 +6922,7 @@ node-sass@^4.9.0:
   dependencies:
     abbrev "1"
 
-nopt@~4.0.1:
+nopt@^4.0.1, nopt@~4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/nopt/-/nopt-4.0.1.tgz#d0d4685afd5415193c8c7505602d0d17cd64474d"
   integrity sha1-0NRoWv1UFRk8jHUFYC0NF81kR00=
@@ -6923,6 +6977,26 @@ normalize-url@^3.0.0:
   resolved "https://registry.yarnpkg.com/normalize-url/-/normalize-url-3.3.0.tgz#b2e1c4dc4f7c6d57743df733a4f5978d18650559"
   integrity sha512-U+JJi7duF1o+u2pynbp2zXDW2/PADgC30f0GsHZtRh+HOcXHnw137TrNlyxxRvWW5fjKd3bcLHPxofWuCjaeZg==
 
+npm-bundled@^1.0.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/npm-bundled/-/npm-bundled-1.1.1.tgz#1edd570865a94cdb1bc8220775e29466c9fb234b"
+  integrity sha512-gqkfgGePhTpAEgUsGEgcq1rqPXA+tv/aVBlgEzfXwA1yiUJF7xtEt3CtVwOjNYQOVknDk0F20w58Fnm3EtG0fA==
+  dependencies:
+    npm-normalize-package-bin "^1.0.1"
+
+npm-normalize-package-bin@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/npm-normalize-package-bin/-/npm-normalize-package-bin-1.0.1.tgz#6e79a41f23fd235c0623218228da7d9c23b8f6e2"
+  integrity sha512-EPfafl6JL5/rU+ot6P3gRSCpPDW5VmIzX959Ob1+ySFUuuYHWHekXpwdUZcKP5C+DS4GEtdJluwBjnsNDl+fSA==
+
+npm-packlist@^1.1.6:
+  version "1.4.7"
+  resolved "https://registry.yarnpkg.com/npm-packlist/-/npm-packlist-1.4.7.tgz#9e954365a06b80b18111ea900945af4f88ed4848"
+  integrity sha512-vAj7dIkp5NhieaGZxBJB8fF4R0078rqsmhJcAfXZ6O7JJhjhPK96n5Ry1oZcfLXgfun0GWTZPOxaEyqv8GBykQ==
+  dependencies:
+    ignore-walk "^3.0.1"
+    npm-bundled "^1.0.1"
+
 npm-run-path@^2.0.0:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/npm-run-path/-/npm-run-path-2.0.2.tgz#35a9232dfa35d7067b4cb2ddf2357b1871536c5f"
@@ -6937,7 +7011,7 @@ npm-run-path@^4.0.0:
   dependencies:
     path-key "^3.0.0"
 
-"npmlog@0 || 1 || 2 || 3 || 4", npmlog@^4.0.0:
+"npmlog@0 || 1 || 2 || 3 || 4", npmlog@^4.0.0, npmlog@^4.0.2:
   version "4.1.2"
   resolved "https://registry.yarnpkg.com/npmlog/-/npmlog-4.1.2.tgz#08a7f2a8bf734604779a9efa4ad5cc717abb954b"
   integrity sha512-2uUqazuKlTaSI/dC8AzicUck7+IrEaOnN/e0jd3Xtt1KcGpwx30v50mL7oPyr/h9bL3E4aZccVwpwP+5W9Vjkg==
@@ -8156,6 +8230,16 @@ raw-loader@^0.5.1:
   resolved "https://registry.yarnpkg.com/raw-loader/-/raw-loader-0.5.1.tgz#0c3d0beaed8a01c966d9787bf778281252a979aa"
   integrity sha1-DD0L6u2KAclm2Xh793goElKpeao=
 
+rc@^1.2.7:
+  version "1.2.8"
+  resolved "https://registry.yarnpkg.com/rc/-/rc-1.2.8.tgz#cd924bf5200a075b83c188cd6b9e211b7fc0d3ed"
+  integrity sha512-y3bGgqKj3QBdxLbLkomlohkvsA8gdAiUQlSBJnBhfn+BPxg4bc62d8TcBW15wavDfgexCgccckhcZvywyQYPOw==
+  dependencies:
+    deep-extend "^0.6.0"
+    ini "~1.3.0"
+    minimist "^1.2.0"
+    strip-json-comments "~2.0.1"
+
 read-pkg-up@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/read-pkg-up/-/read-pkg-up-1.0.1.tgz#9d63c13276c065918d57f002a57f40a1b643fb02"
@@ -9411,6 +9495,19 @@ tar@^2.0.0:
     fstream "^1.0.12"
     inherits "2"
 
+tar@^4.4.2:
+  version "4.4.13"
+  resolved "https://registry.yarnpkg.com/tar/-/tar-4.4.13.tgz#43b364bc52888d555298637b10d60790254ab525"
+  integrity sha512-w2VwSrBoHa5BsSyH+KxEqeQBAllHhccyMFVHtGtdMpF4W7IRWfZjFiQceJPChOeTsSDVUpER2T8FA93pr0L+QA==
+  dependencies:
+    chownr "^1.1.1"
+    fs-minipass "^1.2.5"
+    minipass "^2.8.6"
+    minizlib "^1.2.1"
+    mkdirp "^0.5.0"
+    safe-buffer "^5.1.2"
+    yallist "^3.0.3"
+
 terser-webpack-plugin@^1.2.3, terser-webpack-plugin@^1.4.3:
   version "1.4.3"
   resolved "https://registry.yarnpkg.com/terser-webpack-plugin/-/terser-webpack-plugin-1.4.3.tgz#5ecaf2dbdc5fb99745fd06791f46fc9ddb1c9a7c"
@@ -9934,13 +10031,6 @@ vue-eslint-parser@^5.0.0:
     esquery "^1.0.1"
     lodash "^4.17.11"
 
-vue-hash-calendar@^1.2.12:
-  version "1.2.17"
-  resolved "https://registry.npm.taobao.org/vue-hash-calendar/download/vue-hash-calendar-1.2.17.tgz#da92148f02e5658a69316c05231ac0ef940bf176"
-  integrity sha1-2pIUjwLlZYppMWwFIxrA75QL8XY=
-  dependencies:
-    vue "^2.5.17"
-
 vue-hot-reload-api@^2.3.0:
   version "2.3.4"
   resolved "https://registry.yarnpkg.com/vue-hot-reload-api/-/vue-hot-reload-api-2.3.4.tgz#532955cc1eb208a3d990b3a9f9a70574657e08f2"
@@ -10020,11 +10110,6 @@ vue-template-es2015-compiler@^1.6.0, vue-template-es2015-compiler@^1.9.0:
   resolved "https://registry.yarnpkg.com/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.9.1.tgz#1ee3bc9a16ecbf5118be334bb15f9c46f82f5825"
   integrity sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==
 
-vue@^2.5.17:
-  version "2.6.12"
-  resolved "https://registry.npm.taobao.org/vue/download/vue-2.6.12.tgz?cache=0&sync_timestamp=1603224263683&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fvue%2Fdownload%2Fvue-2.6.12.tgz#f5ebd4fa6bd2869403e29a896aed4904456c9123"
-  integrity sha1-9evU+mvShpQD4pqJau1JBEVskSM=
-
 vue@^2.6.10:
   version "2.6.11"
   resolved "https://registry.yarnpkg.com/vue/-/vue-2.6.11.tgz#76594d877d4b12234406e84e35275c6d514125c5"
@@ -10412,7 +10497,7 @@ yallist@^2.1.2:
   resolved "https://registry.yarnpkg.com/yallist/-/yallist-2.1.2.tgz#1c11f9218f076089a47dd512f93c6699a6a81d52"
   integrity sha1-HBH5IY8HYImkfdUS+TxmmaaoHVI=
 
-yallist@^3.0.2:
+yallist@^3.0.0, yallist@^3.0.2, yallist@^3.0.3:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/yallist/-/yallist-3.1.1.tgz#dbb7daf9bfd8bac9ab45ebf602b8cbad0d5d08fd"
   integrity sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==