diff --git a/src/api/ebiz/branchOffice/branchOffice.js b/src/api/ebiz/branchOffice/branchOffice.js
new file mode 100644
index 000000000..4df4c7fb2
--- /dev/null
+++ b/src/api/ebiz/branchOffice/branchOffice.js
@@ -0,0 +1,11 @@
+import request from '@/assets/js/utils/request'
+import getUrl from '@/assets/js/utils/get-url'
+
+// 代理人客户列表
+export function branchOfficeApi(data) {
+  return request({
+    url: getUrl('/data/performance/getlComPremDetil', 1),
+    method: 'post',
+    data
+  })
+}
diff --git a/src/assets/images/ebiz/calendar.png b/src/assets/images/ebiz/calendar.png
new file mode 100644
index 000000000..875af86dc
Binary files /dev/null and b/src/assets/images/ebiz/calendar.png differ
diff --git a/src/assets/images/ebiz/point.png b/src/assets/images/ebiz/point.png
new file mode 100644
index 000000000..8b8467904
Binary files /dev/null and b/src/assets/images/ebiz/point.png differ
diff --git a/src/assets/images/ebiz/refresh.png b/src/assets/images/ebiz/refresh.png
new file mode 100644
index 000000000..ccc8ca7a8
Binary files /dev/null and b/src/assets/images/ebiz/refresh.png differ
diff --git a/src/main.js b/src/main.js
index d09d92ac2..29cbd7acb 100644
--- a/src/main.js
+++ b/src/main.js
@@ -13,15 +13,33 @@ import vueHashCalendar from 'vue-hash-calendar'
 import 'vue-hash-calendar/lib/vue-hash-calendar.css'
 
 import {
+  Cell, CellGroup,
+  DatetimePicker ,
+  Popup ,
+  Picker,
+  Col, 
+  Row,
+  Tab, 
+  Tabs,
+  NavBar,
   Toast,
   Button,
   Dialog,
   Icon,
   Lazyload 
 } from 'vant'
-
+Vue.use(Cell);
+Vue.use(CellGroup)
+Vue.use(DatetimePicker);
+Vue.use(Popup)
+Vue.use(Picker)
+Vue.use(Col)
+Vue.use(Row);
+Vue.use(Tab)
+Vue.use(Tabs);
 Vue.use(Icon)
 Vue.use(vueHashCalendar)
+Vue.use(NavBar);
 Vue.use(Toast)
 Vue.use(Button)
 Vue.use(Dialog)
diff --git a/src/router/ebiz/index.js b/src/router/ebiz/index.js
index 4e43d3a02..a131d8d83 100644
--- a/src/router/ebiz/index.js
+++ b/src/router/ebiz/index.js
@@ -21,6 +21,8 @@ import exercising from './exercising'
 import productStore from './product-store'
 import performance from './performance'
 import attendance from './attendance'
+// 机构业绩
+import institutionalPerform from './institutionalPerform'
 export default [
   ...proposal,
   ...sale,
@@ -45,5 +47,6 @@ export default [
   ...claims,
   ...productStore,
   ...performance,
-  ...attendance
+  ...attendance,
+  ...institutionalPerform
 ] //根据需要进行删减
diff --git a/src/router/ebiz/institutionalPerform.js b/src/router/ebiz/institutionalPerform.js
new file mode 100644
index 000000000..4ba415b18
--- /dev/null
+++ b/src/router/ebiz/institutionalPerform.js
@@ -0,0 +1,91 @@
+//客户管理 定义相关组件
+const BranchOffice = () => import('@/views/ebiz/institutionalPerform/BranchOffice')
+const UnderOffice = () => import('@/views/ebiz/institutionalPerform/UnderOffice')
+const DistrictOffice = () => import('@/views/ebiz/institutionalPerform/DistrictOffice')
+const DepartmentOffice = () => import('@/views/ebiz/institutionalPerform/DepartmentOffice')
+const GroupOffice = () => import('@/views/ebiz/institutionalPerform/GroupOffice')
+const PersonalOffice = () => import('@/views/ebiz/institutionalPerform/PersonalOffice')
+const ServiceDepartOffice = () => import('@/views/ebiz/institutionalPerform/ServiceDepartOffice')
+const RegionalOffice = () => import('@/views/ebiz/institutionalPerform/RegionalOffice')
+export default [
+  // 分公司  
+  {
+    path: '/institutionalPerform/BranchOffice',
+    name: 'BranchOffice',
+    component: BranchOffice,
+    meta: {
+      title: '机构业绩',
+      index: 1
+    }
+  },
+  // 支公司  02
+  {
+    path: '/institutionalPerform/underOffice',
+    name: 'underOffice',
+    component: UnderOffice,
+    meta: {
+      title: '机构业绩',
+      index: 1
+    }
+  }, 
+  // 营销服务部 03
+  {
+    path: '/institutionalPerform/serviceDepartOffice',
+    name: 'serviceDepartOffice',
+    component: ServiceDepartOffice,
+    meta: {
+      title: '机构业绩',
+      index: 1
+    }
+  }, 
+  // 区公司 04
+  {
+    path: '/institutionalPerform/districtOffice',
+    name: 'districtOffice',
+    component: DistrictOffice,
+    meta: {
+      title: '机构业绩',
+      index: 1
+    }
+  },
+  // 直辖区 05
+  {
+    path: '/institutionalPerform/regionalOffice',
+    name: 'regionalOffice',
+    component: RegionalOffice,
+    meta: {
+      title: '机构业绩',
+      index: 1
+    }
+  },
+  // 营业部公司 06
+  {
+    path: '/institutionalPerform/departmentOffice',
+    name: 'departmentOffice',
+    component: DepartmentOffice,
+    meta: {
+      title: '机构业绩',
+      index: 1
+    }
+  },
+  // 组  07
+  {
+    path: '/institutionalPerform/groupOffice',
+    name: 'groupOffice',
+    component: GroupOffice,
+    meta: {
+      title: '机构业绩',
+      index: 1
+    }
+  },
+  // 个人  08
+  {
+    path: '/institutionalPerform/personalOffice',
+    name: 'personalOffice',
+    component: PersonalOffice,
+    meta: {
+      title: '机构业绩',
+      index: 1
+    }
+  }
+]
diff --git a/src/views/ebiz/institutionalPerform/BranchOffice.vue b/src/views/ebiz/institutionalPerform/BranchOffice.vue
new file mode 100644
index 000000000..12c92b4bb
--- /dev/null
+++ b/src/views/ebiz/institutionalPerform/BranchOffice.vue
@@ -0,0 +1,402 @@
+<template>
+  <div class="branch-office-container bg-white">
+    <van-nav-bar left-text="机构业绩" left-arrow @click-left="onBack">
+      <template #right>
+        <img @click="getlComPremDetil" :src="refreshLogo" />
+      </template>
+    </van-nav-bar>
+    <!-- 业绩和人力 -->
+    <!-- <van-tabs type="card">
+      <van-tab title="机构业绩排名"></van-tab>
+      <van-tab title="机构人力排名"></van-tab>
+    </van-tabs> -->
+    <!-- 年月日选择 -->
+    <van-tabs @click="onClickRabs" type="card" class="pl20 pr20 pt10 pb10 bg-red">
+      <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" span="9">截至{{timeVal}}</van-col>
+        <van-col span="3">
+          <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="slide-box">
+      <table class="fs14">
+        <tr class="title">
+          <th>排名</th>
+          <th>机构</th>
+          <th>预收件数</th>
+          <th>预收标保</th>
+          <th>承保件数</th>
+          <th>承保保费</th>
+          <th>标准保费</th>
+          <th>操作</th>
+        </tr>
+        <tr>
+          <th></th>
+          <th>合计</th>
+          <th>{{ysjsTotal}}</th>
+          <th>{{ysbbTotol}}</th>
+          <th>{{cbjsTotal}}</th>
+          <th>{{cbbfTotal}}</th>
+          <th>{{bzbfTotal}}</th>
+        </tr>
+        <tr v-for="(item,index) in tableData" :key="index">
+          <td>{{index+1}}</td>
+          <td>{{item.name}}</td>
+          <td>{{item.ysjs}}</td>
+          <td>{{item.ysbb}}</td>
+          <td>{{item.cbjs}}</td>
+          <td>{{item.cbbf}}</td>
+          <td>{{item.bzbf}}</td>
+          <td>
+            <!-- 分公司 -->
+            <span @click="toZhi(item.code)" class="red">查看</span>
+          </td>
+        </tr>
+      </table>
+    </div>
+  </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'
+export default {
+  name: 'BranchOffice',
+  components: {
+    // XTable,
+    [Tabs.name]: Tabs,
+    [Tab.name]: Tab,
+  },
+  data() {
+    return {
+      YearColumns: ['2020', '2019', '2018', '2017', '2016', '2015'],
+      minDate: new Date(1997, 0, 1),
+      maxDate: new Date(2020, 10, 1),
+      currentMonthDate: new Date(),
+      currentYearDate: new Date(),
+      currentDate: new Date(),
+      sortType: '1',
+      // 总和
+      ysjsTotal: 0,
+      ysbbTotol: 0,
+      cbjsTotal: 0,
+      cbbfTotal: 0,
+      bzbfTotal: 0,
+      tableData: [],
+      timeVal: '',
+      sortTypeText: '预收件数',
+      queryColumns: ['预收件数', '预收标保', '承保件数', '承保标保', '标准保费'],
+      showPicker: false,
+      // 年月日选择器
+      showDatePicker: false,
+      showMonthPicker: false,
+      showYearPicker: false,
+      //
+      refreshLogo,
+      calendar,
+      point,
+      active: 0,
+      // 当前的机构编码
+      curCode: '',
+      dateType: 'now',
+      dateVal: '',
+      curTab: '',
+      shitimeVal: '',
+    }
+  },
+  methods: {
+    formatterYear(type, val) {
+      if (type === 'year') {
+        return val + '年'
+      }
+      return val
+    },
+    formatter(type, val) {
+      if (type === 'year') {
+        return `${val}年`
+      } else if (type === 'month') {
+        return `${val}月`
+      }
+      return val
+    },
+    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 {
+        // 实时的时候date清空
+        this.dateType = 'now'
+        this.dateVal = ''
+        // 左侧时间实时赋值
+        this.timeVal = this.shitimeVal
+        // 调接口
+        this.getlComPremDetil()
+      }
+    },
+    toZhi(manageCode) {
+      this.$router.push({
+        path: '/institutionalPerform/underOffice',
+        query: {
+          manageCode: manageCode,
+        },
+      })
+    },
+    //修改月、天的格式，保持两位数显示
+    add0(m) {
+      return m < 10 ? '0' + m : m
+    },
+    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
+        } else {
+          timeStr += ' 0' + curHour + ':' + curMinute
+        }
+      } else {
+        if (curMinute < 10) {
+          timeStr += ' ' + curHour + ':0' + curMinute
+        } else {
+          timeStr += ' ' + curHour + ':' + curMinute
+        }
+      }
+      // 一直在获取时间
+      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) {
+      console.log(this.curTab)
+      console.log(value)
+      if (this.curTab == 1) {
+        // now：当前 y:年 m:月 d:日
+        // 日
+        this.dateType = 'd'
+        this.dateVal = this.dateFormat(this.currentDate)
+        console.log(this.dateVal)
+        // 左侧时间实时赋值
+        this.timeVal = this.dateVal
+      } else if (this.curTab == 2) {
+        // 月
+        this.dateType = 'm'
+        this.dateVal = this.dateFormat(this.currentMonthDate)
+        // 左侧时间实时赋值
+        this.timeVal = this.dateVal
+      } else if (this.curTab == 3) {
+        // 年
+        this.dateType = 'y'
+        this.dateVal = value + '-' + '01' + '-' + '01'
+        // 左侧时间实时赋值
+        this.timeVal = this.dateVal
+      }
+      ;(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: this.curCode,
+        // manageLv: this.showItem,
+        sortType: this.sortType,
+        queryType: this.dateType,
+        date: this.dateVal,
+      }
+      // 去除对象里面是空的属性
+      for (var key in data) {
+        if (data[key] === '') {
+          delete data[key]
+        }
+      }
+      branchOfficeApi(data)
+        .then((res) => {
+          if (res.result == 0) {
+            console.log(res.content.list)
+            $this.tableData = res.content.list
+
+            $this.ysjsTotal = 0
+            $this.ysbbTotol = 0
+            $this.cbjsTotal = 0
+            $this.cbbfTotal = 0
+            $this.bzbfTotal = 0
+            $this.tableData.map(function (val) {
+              console.log(val.ysjs)
+              $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)
+            })
+            console.log($this.tableData)
+          }
+        })
+        .catch((err) => {})
+    },
+  },
+  mounted() {
+    setInterval(this.getCurrentDate(), 1000 * 60)
+
+    this.getlComPremDetil()
+  },
+}
+</script>
+<style lang="scss">
+.branch-office-container {
+  .van-tabs__nav--card .van-tab.van-tab--active {
+    color: red;
+    background-color: #fff;
+  }
+  .van-tabs__nav--card .van-tab {
+    color: #232020;
+    background-color: #e6e6e6;
+    border-right: 1px solid #8e8d8d;
+  }
+  .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: #f56123;
+    border-top: 0;
+    border-left: 0;
+    border-right: 0;
+  }
+  table td {
+    text-align: center;
+    white-space: nowrap;
+    border-width: 1px;
+    padding: 8px;
+    // border-style: solid;
+    // border-color: #666666;
+    background-color: #ffffff;
+    border-top: 0;
+    border-left: 0;
+    border-right: 0;
+  }
+  table {
+    border: 0;
+  }
+}
+</style>
diff --git a/src/views/ebiz/institutionalPerform/DepartmentOffice.vue b/src/views/ebiz/institutionalPerform/DepartmentOffice.vue
new file mode 100644
index 000000000..13fb4f5d7
--- /dev/null
+++ b/src/views/ebiz/institutionalPerform/DepartmentOffice.vue
@@ -0,0 +1,399 @@
+<template>
+  <div class="department-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="onClickRabs" type="card" class="pl20 pr20 pt10 pb10 bg-red">
+      <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" span="9">截至{{timeVal}}</van-col>
+        <van-col span="3">
+          <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="slide-box">
+      <table class="fs14">
+        <tr class="title">
+          <th>排名</th>
+          <th>机构</th>
+          <th>预收件数</th>
+          <th>预收标保</th>
+          <th>承保件数</th>
+          <th>承保保费</th>
+          <th>标准保费</th>
+          <th>操作</th>
+        </tr>
+        <tr>
+          <th></th>
+          <th>合计</th>
+          <th>{{ysjsTotal}}</th>
+          <th>{{ysbbTotol}}</th>
+          <th>{{cbjsTotal}}</th>
+          <th>{{cbbfTotal}}</th>
+          <th>{{bzbfTotal}}</th>
+        </tr>
+        <tr v-for="(item,index) in tableData" :key="index">
+          <td>{{index+1}}</td>
+          <td>{{item.name}}</td>
+          <td>{{item.ysjs}}</td>
+          <td>{{item.ysbb}}</td>
+          <td>{{item.cbjs}}</td>
+          <td>{{item.cbbf}}</td>
+          <td>{{item.bzbf}}</td>
+          <td>
+            <span @click="toDetail(item.code)" class="red">查看</span>
+          </td>
+        </tr>
+      </table>
+    </div>
+  </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'
+export default {
+  name: 'districtOffice',
+  components: {
+    // XTable,
+    [Tabs.name]: Tabs,
+    [Tab.name]: Tab,
+  },
+  data() {
+    return {
+      YearColumns: ['2020', '2019', '2018', '2017', '2016', '2015'],
+      minDate: new Date(1997, 0, 1),
+      maxDate: new Date(2020, 10, 1),
+      currentMonthDate: new Date(),
+      currentYearDate: new Date(),
+      currentDate: new Date(),
+      sortType: '1',
+      // 总和
+      ysjsTotal: 0,
+      ysbbTotol: 0,
+      cbjsTotal: 0,
+      cbbfTotal: 0,
+      bzbfTotal: 0,
+      tableData: [],
+      timeVal: '',
+      sortTypeText: '预收件数',
+      queryColumns: ['预收件数', '预收标保', '承保件数', '承保标保', '标准保费'],
+      showPicker: false,
+      // 年月日选择器
+      showDatePicker: false,
+      showMonthPicker: false,
+      showYearPicker: false,
+      //
+      refreshLogo,
+      calendar,
+      point,
+      active: 0,
+      // 当前的机构编码
+      curCode: '',
+      dateType: 'now',
+      dateVal: '',
+      curTab: '',
+      shitimeVal:""
+    }
+  },
+  methods: {
+    formatterYear(type, val) {
+      if (type === 'year') {
+        return val + '年'
+      }
+      return val
+    },
+    formatter(type, val) {
+      if (type === 'year') {
+        return `${val}年`
+      } else if (type === 'month') {
+        return `${val}月`
+      }
+      return val
+    },
+    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 {
+        // 实时的时候date清空
+        this.dateType = 'now'
+        this.dateVal = ''
+        // 左侧时间实时赋值
+        this.timeVal= this.shitimeVal
+        // 调接口
+         this.getlComPremDetil()
+      }
+    },
+    toDetail(manageCode) {
+      this.$router.push({
+        path: '/institutionalPerform/groupOffice',
+        query: {
+          manageCode: manageCode,
+        },
+      })
+    },
+    //修改月、天的格式，保持两位数显示
+    add0(m) {
+      return m < 10 ? '0' + m : m
+    },
+    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
+        } else {
+          timeStr += ' 0' + curHour + ':' + curMinute
+        }
+      } else {
+        if (curMinute < 10) {
+          timeStr += ' ' + curHour + ':0' + curMinute
+        } else {
+          timeStr += ' ' + curHour + ':' + curMinute
+        }
+      }
+      // 一直在获取时间
+      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) {
+      console.log(this.curTab)
+      console.log(value)
+      if (this.curTab == 1) {
+        // now：当前 y:年 m:月 d:日
+        // 日
+        this.dateType = 'd'
+        this.dateVal = this.dateFormat(this.currentDate)
+        console.log(this.dateVal)
+        // 左侧时间实时赋值
+        this.timeVal=this.dateVal
+      } else if (this.curTab == 2) {
+        // 月
+        this.dateType = 'm'
+        this.dateVal = this.dateFormat(this.currentMonthDate)
+        // 左侧时间实时赋值
+        this.timeVal=this.dateVal
+      } else if (this.curTab == 3) {
+        // 年
+        this.dateType = 'y'
+        this.dateVal = value+'-' + '01' + '-' + '01'
+        // 左侧时间实时赋值
+        this.timeVal=this.dateVal
+      }
+       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: this.$route.query.manageCode,
+        manageLv: "06",
+        sortType: this.sortType,
+        queryType: this.dateType,
+        date: this.dateVal,
+      }
+      // 去除对象里面是空的属性
+      for (var key in data) {
+        if (data[key] === '') {
+          delete data[key]
+        }
+      }
+      branchOfficeApi(data)
+        .then((res) => {
+          if (res.result == 0) {
+            console.log(res.content.list)
+            $this.tableData = res.content.list
+
+            $this.ysjsTotal = 0
+            $this.ysbbTotol = 0
+            $this.cbjsTotal = 0
+            $this.cbbfTotal = 0
+            $this.bzbfTotal = 0
+            $this.tableData.map(function (val) {
+              console.log(val.ysjs)
+              $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)
+            })
+            console.log($this.tableData)
+          }
+        })
+        .catch((err) => {})
+    },
+  },
+  mounted() {
+    setInterval(this.getCurrentDate(), 1000 * 60)
+
+    this.getlComPremDetil()
+  },
+}
+</script>
+<style lang="scss">
+.department-office-container {
+  .van-tabs__nav--card .van-tab.van-tab--active {
+    color: red;
+    background-color: #fff;
+  }
+  .van-tabs__nav--card .van-tab {
+    color: #232020;
+    background-color: #e6e6e6;
+    border-right: 1px solid #8e8d8d;
+  }
+  .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: #f56123;
+    border-top: 0;
+    border-left: 0;
+    border-right: 0;
+  }
+  table td {
+    text-align: center;
+    white-space: nowrap;
+    border-width: 1px;
+    padding: 8px;
+    // border-style: solid;
+    // border-color: #666666;
+    background-color: #ffffff;
+    border-top: 0;
+    border-left: 0;
+    border-right: 0;
+  }
+  table {
+    border: 0;
+  }
+}
+</style>
diff --git a/src/views/ebiz/institutionalPerform/DistrictOffice.vue b/src/views/ebiz/institutionalPerform/DistrictOffice.vue
new file mode 100644
index 000000000..371c41e99
--- /dev/null
+++ b/src/views/ebiz/institutionalPerform/DistrictOffice.vue
@@ -0,0 +1,398 @@
+<template>
+  <div class="destrict-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="onClickRabs" type="card" class="pl20 pr20 pt10 pb10 bg-red">
+      <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" span="9">截至{{timeVal}}</van-col>
+        <van-col span="3">
+          <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="slide-box">
+      <table class="fs14">
+        <tr class="title">
+          <th>排名</th>
+          <th>机构</th>
+          <th>预收件数</th>
+          <th>预收标保</th>
+          <th>承保件数</th>
+          <th>承保保费</th>
+          <th>标准保费</th>
+          <th>操作</th>
+        </tr>
+        <tr>
+          <th></th>
+          <th>合计</th>
+          <th>{{ysjsTotal}}</th>
+          <th>{{ysbbTotol}}</th>
+          <th>{{cbjsTotal}}</th>
+          <th>{{cbbfTotal}}</th>
+          <th>{{bzbfTotal}}</th>
+        </tr>
+        <tr v-for="(item,index) in tableData" :key="index">
+          <td>{{index+1}}</td>
+          <td>{{item.name}}</td>
+          <td>{{item.ysjs}}</td>
+          <td>{{item.ysbb}}</td>
+          <td>{{item.cbjs}}</td>
+          <td>{{item.cbbf}}</td>
+          <td>{{item.bzbf}}</td>
+          <td>
+            <span @click="toDetail(item.code)" class="red">查看</span>
+          </td>
+        </tr>
+      </table>
+    </div>
+  </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'
+export default {
+  name: 'districtOffice',
+  components: {
+    // XTable,
+    [Tabs.name]: Tabs,
+    [Tab.name]: Tab,
+  },
+  data() {
+    return {
+      YearColumns: ['2020', '2019', '2018', '2017', '2016', '2015'],
+      minDate: new Date(1997, 0, 1),
+      maxDate: new Date(2020, 10, 1),
+      currentMonthDate: new Date(),
+      currentYearDate: new Date(),
+      currentDate: new Date(),
+      sortType: '1',
+      // 总和
+      ysjsTotal: 0,
+      ysbbTotol: 0,
+      cbjsTotal: 0,
+      cbbfTotal: 0,
+      bzbfTotal: 0,
+      tableData: [],
+      timeVal: '',
+      sortTypeText: '预收件数',
+      queryColumns: ['预收件数', '预收标保', '承保件数', '承保标保', '标准保费'],
+      showPicker: false,
+      // 年月日选择器
+      showDatePicker: false,
+      showMonthPicker: false,
+      showYearPicker: false,
+      //
+      refreshLogo,
+      calendar,
+      point,
+      active: 0,
+      // 当前的机构编码
+      curCode: '',
+      dateType: 'now',
+      dateVal: '',
+      curTab: '',
+      shitimeVal:""
+    }
+  },
+  methods: {
+    formatterYear(type, val) {
+      if (type === 'year') {
+        return val + '年'
+      }
+      return val
+    },
+    formatter(type, val) {
+      if (type === 'year') {
+        return `${val}年`
+      } else if (type === 'month') {
+        return `${val}月`
+      }
+      return val
+    },
+    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 {
+        // 实时的时候date清空
+        this.dateType = 'now'
+        this.dateVal = ''
+        // 左侧时间实时赋值
+        this.timeVal= this.shitimeVal
+        // 调接口
+         this.getlComPremDetil()
+      }
+    },
+    toDetail(manageCode) {
+      this.$router.push({
+        path: '/institutionalPerform/regionalOffice',
+        query: {
+          manageCode: manageCode,
+        },
+      })
+    },
+    //修改月、天的格式，保持两位数显示
+    add0(m) {
+      return m < 10 ? '0' + m : m
+    },
+    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
+        } else {
+          timeStr += ' 0' + curHour + ':' + curMinute
+        }
+      } else {
+        if (curMinute < 10) {
+          timeStr += ' ' + curHour + ':0' + curMinute
+        } else {
+          timeStr += ' ' + curHour + ':' + curMinute
+        }
+      }
+      // 一直在获取时间
+      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) {
+      console.log(this.curTab)
+      console.log(value)
+      if (this.curTab == 1) {
+        // now：当前 y:年 m:月 d:日
+        // 日
+        this.dateType = 'd'
+        this.dateVal = this.dateFormat(this.currentDate)
+        console.log(this.dateVal)
+        // 左侧时间实时赋值
+        this.timeVal=this.dateVal
+      } else if (this.curTab == 2) {
+        // 月
+        this.dateType = 'm'
+        this.dateVal = this.dateFormat(this.currentMonthDate)
+        // 左侧时间实时赋值
+        this.timeVal=this.dateVal
+      } else if (this.curTab == 3) {
+        // 年
+        this.dateType = 'y'
+        this.dateVal = value+'-' + '01' + '-' + '01'
+        // 左侧时间实时赋值
+        this.timeVal=this.dateVal
+      }
+       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: this.$route.query.manageCode,
+        manageLv: "04",
+        sortType: this.sortType,
+        queryType: this.dateType,
+        date: this.dateVal,
+      }
+      // 去除对象里面是空的属性
+      for (var key in data) {
+        if (data[key] === '') {
+          delete data[key]
+        }
+      }
+      branchOfficeApi(data)
+        .then((res) => {
+          if (res.result == 0) {
+            console.log(res.content.list)
+            $this.tableData = res.content.list
+
+            $this.ysjsTotal = 0
+            $this.ysbbTotol = 0
+            $this.cbjsTotal = 0
+            $this.cbbfTotal = 0
+            $this.bzbfTotal = 0
+            $this.tableData.map(function (val) {
+              console.log(val.ysjs)
+              $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)
+            })
+            console.log($this.tableData)
+          }
+        })
+        .catch((err) => {})
+    },
+  },
+  mounted() {
+    setInterval(this.getCurrentDate(), 1000 * 60)
+    this.getlComPremDetil()
+  },
+}
+</script>
+<style lang="scss">
+.destrict-office-container {
+  .van-tabs__nav--card .van-tab.van-tab--active {
+    color: red;
+    background-color: #fff;
+  }
+  .van-tabs__nav--card .van-tab {
+    color: #232020;
+    background-color: #e6e6e6;
+    border-right: 1px solid #8e8d8d;
+  }
+  .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: #f56123;
+    border-top: 0;
+    border-left: 0;
+    border-right: 0;
+  }
+  table td {
+    text-align: center;
+    white-space: nowrap;
+    border-width: 1px;
+    padding: 8px;
+    // border-style: solid;
+    // border-color: #666666;
+    background-color: #ffffff;
+    border-top: 0;
+    border-left: 0;
+    border-right: 0;
+  }
+  table {
+    border: 0;
+  }
+}
+</style>
diff --git a/src/views/ebiz/institutionalPerform/GroupOffice.vue b/src/views/ebiz/institutionalPerform/GroupOffice.vue
new file mode 100644
index 000000000..713993c49
--- /dev/null
+++ b/src/views/ebiz/institutionalPerform/GroupOffice.vue
@@ -0,0 +1,399 @@
+<template>
+  <div class="group-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="onClickRabs" type="card" class="pl20 pr20 pt10 pb10 bg-red">
+      <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" span="9">截至{{timeVal}}</van-col>
+        <van-col span="3">
+          <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="slide-box">
+      <table class="fs14">
+        <tr class="title">
+          <th>排名</th>
+          <th>机构</th>
+          <th>预收件数</th>
+          <th>预收标保</th>
+          <th>承保件数</th>
+          <th>承保保费</th>
+          <th>标准保费</th>
+          <th>操作</th>
+        </tr>
+        <tr>
+          <th></th>
+          <th>合计</th>
+          <th>{{ysjsTotal}}</th>
+          <th>{{ysbbTotol}}</th>
+          <th>{{cbjsTotal}}</th>
+          <th>{{cbbfTotal}}</th>
+          <th>{{bzbfTotal}}</th>
+        </tr>
+        <tr v-for="(item,index) in tableData" :key="index">
+          <td>{{index+1}}</td>
+          <td>{{item.name}}</td>
+          <td>{{item.ysjs}}</td>
+          <td>{{item.ysbb}}</td>
+          <td>{{item.cbjs}}</td>
+          <td>{{item.cbbf}}</td>
+          <td>{{item.bzbf}}</td>
+          <td>
+            <span @click="toDetail(item.code)" class="red">查看</span>
+          </td>
+        </tr>
+      </table>
+    </div>
+  </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'
+export default {
+  name: 'districtOffice',
+  components: {
+    // XTable,
+    [Tabs.name]: Tabs,
+    [Tab.name]: Tab,
+  },
+  data() {
+    return {
+      YearColumns: ['2020', '2019', '2018', '2017', '2016', '2015'],
+      minDate: new Date(1997, 0, 1),
+      maxDate: new Date(2020, 10, 1),
+      currentMonthDate: new Date(),
+      currentYearDate: new Date(),
+      currentDate: new Date(),
+      sortType: '1',
+      // 总和
+      ysjsTotal: 0,
+      ysbbTotol: 0,
+      cbjsTotal: 0,
+      cbbfTotal: 0,
+      bzbfTotal: 0,
+      tableData: [],
+      timeVal: '',
+      sortTypeText: '预收件数',
+      queryColumns: ['预收件数', '预收标保', '承保件数', '承保标保', '标准保费'],
+      showPicker: false,
+      // 年月日选择器
+      showDatePicker: false,
+      showMonthPicker: false,
+      showYearPicker: false,
+      //
+      refreshLogo,
+      calendar,
+      point,
+      active: 0,
+      // 当前的机构编码
+      curCode: '',
+      dateType: 'now',
+      dateVal: '',
+      curTab: '',
+      shitimeVal:""
+    }
+  },
+  methods: {
+    formatterYear(type, val) {
+      if (type === 'year') {
+        return val + '年'
+      }
+      return val
+    },
+    formatter(type, val) {
+      if (type === 'year') {
+        return `${val}年`
+      } else if (type === 'month') {
+        return `${val}月`
+      }
+      return val
+    },
+    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 {
+        // 实时的时候date清空
+        this.dateType = 'now'
+        this.dateVal = ''
+        // 左侧时间实时赋值
+        this.timeVal= this.shitimeVal
+        // 调接口
+         this.getlComPremDetil()
+      }
+    },
+    toDetail(manageCode) {
+      this.$router.push({
+        path: '/institutionalPerform/personalOffice',
+        query: {
+          manageCode: manageCode,
+        },
+      })
+    },
+    //修改月、天的格式，保持两位数显示
+    add0(m) {
+      return m < 10 ? '0' + m : m
+    },
+    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
+        } else {
+          timeStr += ' 0' + curHour + ':' + curMinute
+        }
+      } else {
+        if (curMinute < 10) {
+          timeStr += ' ' + curHour + ':0' + curMinute
+        } else {
+          timeStr += ' ' + curHour + ':' + curMinute
+        }
+      }
+      // 一直在获取时间
+      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) {
+      console.log(this.curTab)
+      console.log(value)
+      if (this.curTab == 1) {
+        // now：当前 y:年 m:月 d:日
+        // 日
+        this.dateType = 'd'
+        this.dateVal = this.dateFormat(this.currentDate)
+        console.log(this.dateVal)
+        // 左侧时间实时赋值
+        this.timeVal=this.dateVal
+      } else if (this.curTab == 2) {
+        // 月
+        this.dateType = 'm'
+        this.dateVal = this.dateFormat(this.currentMonthDate)
+        // 左侧时间实时赋值
+        this.timeVal=this.dateVal
+      } else if (this.curTab == 3) {
+        // 年
+        this.dateType = 'y'
+        this.dateVal = value+'-' + '01' + '-' + '01'
+        // 左侧时间实时赋值
+        this.timeVal=this.dateVal
+      }
+       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: this.$route.query.manageCode,
+        manageLv: "07",
+        sortType: this.sortType,
+        queryType: this.dateType,
+        date: this.dateVal,
+      }
+      // 去除对象里面是空的属性
+      for (var key in data) {
+        if (data[key] === '') {
+          delete data[key]
+        }
+      }
+      branchOfficeApi(data)
+        .then((res) => {
+          if (res.result == 0) {
+            console.log(res.content.list)
+            $this.tableData = res.content.list
+
+            $this.ysjsTotal = 0
+            $this.ysbbTotol = 0
+            $this.cbjsTotal = 0
+            $this.cbbfTotal = 0
+            $this.bzbfTotal = 0
+            $this.tableData.map(function (val) {
+              console.log(val.ysjs)
+              $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)
+            })
+            console.log($this.tableData)
+          }
+        })
+        .catch((err) => {})
+    },
+  },
+  mounted() {
+    setInterval(this.getCurrentDate(), 1000 * 60)
+
+    this.getlComPremDetil()
+  },
+}
+</script>
+<style lang="scss">
+.group-office-container {
+  .van-tabs__nav--card .van-tab.van-tab--active {
+    color: red;
+    background-color: #fff;
+  }
+  .van-tabs__nav--card .van-tab {
+    color: #232020;
+    background-color: #e6e6e6;
+    border-right: 1px solid #8e8d8d;
+  }
+  .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: #f56123;
+    border-top: 0;
+    border-left: 0;
+    border-right: 0;
+  }
+  table td {
+    text-align: center;
+    white-space: nowrap;
+    border-width: 1px;
+    padding: 8px;
+    // border-style: solid;
+    // border-color: #666666;
+    background-color: #ffffff;
+    border-top: 0;
+    border-left: 0;
+    border-right: 0;
+  }
+  table {
+    border: 0;
+  }
+}
+</style>
diff --git a/src/views/ebiz/institutionalPerform/PersonalOffice.vue b/src/views/ebiz/institutionalPerform/PersonalOffice.vue
new file mode 100644
index 000000000..db045b0cb
--- /dev/null
+++ b/src/views/ebiz/institutionalPerform/PersonalOffice.vue
@@ -0,0 +1,388 @@
+<template>
+  <div class="personal-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="onClickRabs" type="card" class="pl20 pr20 pt10 pb10 bg-red">
+      <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" span="9">截至{{timeVal}}</van-col>
+        <van-col span="3">
+          <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="slide-box">
+      <table class="fs14">
+        <tr class="title">
+          <th>排名</th>
+          <th>机构</th>
+          <th>预收件数</th>
+          <th>预收标保</th>
+          <th>承保件数</th>
+          <th>承保保费</th>
+          <th>标准保费</th>
+        </tr>
+        <tr>
+          <th></th>
+          <th>合计</th>
+          <th>{{ysjsTotal}}</th>
+          <th>{{ysbbTotol}}</th>
+          <th>{{cbjsTotal}}</th>
+          <th>{{cbbfTotal}}</th>
+          <th>{{bzbfTotal}}</th>
+        </tr>
+        <tr v-for="(item,index) in tableData" :key="index">
+          <td>{{index+1}}</td>
+          <td>{{item.name}}</td>
+          <td>{{item.ysjs}}</td>
+          <td>{{item.ysbb}}</td>
+          <td>{{item.cbjs}}</td>
+          <td>{{item.cbbf}}</td>
+          <td>{{item.bzbf}}</td>
+        </tr>
+      </table>
+    </div>
+  </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'
+export default {
+  name: 'districtOffice',
+  components: {
+    // XTable,
+    [Tabs.name]: Tabs,
+    [Tab.name]: Tab,
+  },
+  data() {
+    return {
+      YearColumns: ['2020', '2019', '2018', '2017', '2016', '2015'],
+      minDate: new Date(1997, 0, 1),
+      maxDate: new Date(2020, 10, 1),
+      currentMonthDate: new Date(),
+      currentYearDate: new Date(),
+      currentDate: new Date(),
+      sortType: '1',
+      // 总和
+      ysjsTotal: 0,
+      ysbbTotol: 0,
+      cbjsTotal: 0,
+      cbbfTotal: 0,
+      bzbfTotal: 0,
+      tableData: [],
+      timeVal: '',
+      sortTypeText: '预收件数',
+      queryColumns: ['预收件数', '预收标保', '承保件数', '承保标保', '标准保费'],
+      showPicker: false,
+      // 年月日选择器
+      showDatePicker: false,
+      showMonthPicker: false,
+      showYearPicker: false,
+      //
+      refreshLogo,
+      calendar,
+      point,
+      active: 0,
+      // 当前的机构编码
+      curCode: '',
+      dateType: 'now',
+      dateVal: '',
+      curTab: '',
+      shitimeVal:""
+    }
+  },
+  methods: {
+    formatterYear(type, val) {
+      if (type === 'year') {
+        return val + '年'
+      }
+      return val
+    },
+    formatter(type, val) {
+      if (type === 'year') {
+        return `${val}年`
+      } else if (type === 'month') {
+        return `${val}月`
+      }
+      return val
+    },
+    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 {
+        // 实时的时候date清空
+        this.dateType = 'now'
+        this.dateVal = ''
+        // 左侧时间实时赋值
+        this.timeVal= this.shitimeVal
+        // 调接口
+         this.getlComPremDetil()
+      }
+    },
+   
+    //修改月、天的格式，保持两位数显示
+    add0(m) {
+      return m < 10 ? '0' + m : m
+    },
+    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
+        } else {
+          timeStr += ' 0' + curHour + ':' + curMinute
+        }
+      } else {
+        if (curMinute < 10) {
+          timeStr += ' ' + curHour + ':0' + curMinute
+        } else {
+          timeStr += ' ' + curHour + ':' + curMinute
+        }
+      }
+      // 一直在获取时间
+      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) {
+      console.log(this.curTab)
+      console.log(value)
+      if (this.curTab == 1) {
+        // now：当前 y:年 m:月 d:日
+        // 日
+        this.dateType = 'd'
+        this.dateVal = this.dateFormat(this.currentDate)
+        console.log(this.dateVal)
+        // 左侧时间实时赋值
+        this.timeVal=this.dateVal
+      } else if (this.curTab == 2) {
+        // 月
+        this.dateType = 'm'
+        this.dateVal = this.dateFormat(this.currentMonthDate)
+        // 左侧时间实时赋值
+        this.timeVal=this.dateVal
+      } else if (this.curTab == 3) {
+        // 年
+        this.dateType = 'y'
+        this.dateVal = value+'-' + '01' + '-' + '01'
+        // 左侧时间实时赋值
+        this.timeVal=this.dateVal
+      }
+       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: this.$route.query.manageCode,
+        manageLv: "08",
+        sortType: this.sortType,
+        queryType: this.dateType,
+        date: this.dateVal,
+      }
+      // 去除对象里面是空的属性
+      for (var key in data) {
+        if (data[key] === '') {
+          delete data[key]
+        }
+      }
+      branchOfficeApi(data)
+        .then((res) => {
+          if (res.result == 0) {
+            console.log(res.content.list)
+            $this.tableData = res.content.list
+
+            $this.ysjsTotal = 0
+            $this.ysbbTotol = 0
+            $this.cbjsTotal = 0
+            $this.cbbfTotal = 0
+            $this.bzbfTotal = 0
+            $this.tableData.map(function (val) {
+              console.log(val.ysjs)
+              $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)
+            })
+            console.log($this.tableData)
+          }
+        })
+        .catch((err) => {})
+    },
+  },
+  mounted() {
+    setInterval(this.getCurrentDate(), 1000 * 60)
+
+    this.getlComPremDetil()
+  },
+}
+</script>
+<style lang="scss">
+.personal-office-container {
+  .van-tabs__nav--card .van-tab.van-tab--active {
+    color: red;
+    background-color: #fff;
+  }
+  .van-tabs__nav--card .van-tab {
+    color: #232020;
+    background-color: #e6e6e6;
+    border-right: 1px solid #8e8d8d;
+  }
+  .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: #f56123;
+    border-top: 0;
+    border-left: 0;
+    border-right: 0;
+  }
+  table td {
+    text-align: center;
+    white-space: nowrap;
+    border-width: 1px;
+    padding: 8px;
+    // border-style: solid;
+    // border-color: #666666;
+    background-color: #ffffff;
+    border-top: 0;
+    border-left: 0;
+    border-right: 0;
+  }
+  table {
+    border: 0;
+  }
+}
+</style>
diff --git a/src/views/ebiz/institutionalPerform/RegionalOffice.vue b/src/views/ebiz/institutionalPerform/RegionalOffice.vue
new file mode 100644
index 000000000..fb8812718
--- /dev/null
+++ b/src/views/ebiz/institutionalPerform/RegionalOffice.vue
@@ -0,0 +1,399 @@
+<template>
+  <div class="regional-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="onClickRabs" type="card" class="pl20 pr20 pt10 pb10 bg-red">
+      <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" span="9">截至{{timeVal}}</van-col>
+        <van-col span="3">
+          <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="slide-box">
+      <table class="fs14">
+        <tr class="title">
+          <th>排名</th>
+          <th>机构</th>
+          <th>预收件数</th>
+          <th>预收标保</th>
+          <th>承保件数</th>
+          <th>承保保费</th>
+          <th>标准保费</th>
+          <th>操作</th>
+        </tr>
+        <tr>
+          <th></th>
+          <th>合计</th>
+          <th>{{ysjsTotal}}</th>
+          <th>{{ysbbTotol}}</th>
+          <th>{{cbjsTotal}}</th>
+          <th>{{cbbfTotal}}</th>
+          <th>{{bzbfTotal}}</th>
+        </tr>
+        <tr v-for="(item,index) in tableData" :key="index">
+          <td>{{index+1}}</td>
+          <td>{{item.name}}</td>
+          <td>{{item.ysjs}}</td>
+          <td>{{item.ysbb}}</td>
+          <td>{{item.cbjs}}</td>
+          <td>{{item.cbbf}}</td>
+          <td>{{item.bzbf}}</td>
+          <td>
+            <span @click="toDetail(item.code)" class="red">查看</span>
+          </td>
+        </tr>
+      </table>
+    </div>
+  </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'
+export default {
+  name: 'districtOffice',
+  components: {
+    // XTable,
+    [Tabs.name]: Tabs,
+    [Tab.name]: Tab,
+  },
+  data() {
+    return {
+      YearColumns: ['2020', '2019', '2018', '2017', '2016', '2015'],
+      minDate: new Date(1997, 0, 1),
+      maxDate: new Date(2020, 10, 1),
+      currentMonthDate: new Date(),
+      currentYearDate: new Date(),
+      currentDate: new Date(),
+      sortType: '1',
+      // 总和
+      ysjsTotal: 0,
+      ysbbTotol: 0,
+      cbjsTotal: 0,
+      cbbfTotal: 0,
+      bzbfTotal: 0,
+      tableData: [],
+      timeVal: '',
+      sortTypeText: '预收件数',
+      queryColumns: ['预收件数', '预收标保', '承保件数', '承保标保', '标准保费'],
+      showPicker: false,
+      // 年月日选择器
+      showDatePicker: false,
+      showMonthPicker: false,
+      showYearPicker: false,
+      //
+      refreshLogo,
+      calendar,
+      point,
+      active: 0,
+      // 当前的机构编码
+      curCode: '',
+      dateType: 'now',
+      dateVal: '',
+      curTab: '',
+      shitimeVal:""
+    }
+  },
+  methods: {
+    formatterYear(type, val) {
+      if (type === 'year') {
+        return val + '年'
+      }
+      return val
+    },
+    formatter(type, val) {
+      if (type === 'year') {
+        return `${val}年`
+      } else if (type === 'month') {
+        return `${val}月`
+      }
+      return val
+    },
+    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 {
+        // 实时的时候date清空
+        this.dateType = 'now'
+        this.dateVal = ''
+        // 左侧时间实时赋值
+        this.timeVal= this.shitimeVal
+        // 调接口
+         this.getlComPremDetil()
+      }
+    },
+    toDetail(manageCode) {
+      this.$router.push({
+        path: '/institutionalPerform/departmentOffice',
+        query: {
+          manageCode: manageCode,
+        },
+      })
+    },
+    //修改月、天的格式，保持两位数显示
+    add0(m) {
+      return m < 10 ? '0' + m : m
+    },
+    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
+        } else {
+          timeStr += ' 0' + curHour + ':' + curMinute
+        }
+      } else {
+        if (curMinute < 10) {
+          timeStr += ' ' + curHour + ':0' + curMinute
+        } else {
+          timeStr += ' ' + curHour + ':' + curMinute
+        }
+      }
+      // 一直在获取时间
+      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) {
+      console.log(this.curTab)
+      console.log(value)
+      if (this.curTab == 1) {
+        // now：当前 y:年 m:月 d:日
+        // 日
+        this.dateType = 'd'
+        this.dateVal = this.dateFormat(this.currentDate)
+        console.log(this.dateVal)
+        // 左侧时间实时赋值
+        this.timeVal=this.dateVal
+      } else if (this.curTab == 2) {
+        // 月
+        this.dateType = 'm'
+        this.dateVal = this.dateFormat(this.currentMonthDate)
+        // 左侧时间实时赋值
+        this.timeVal=this.dateVal
+      } else if (this.curTab == 3) {
+        // 年
+        this.dateType = 'y'
+        this.dateVal = value+'-' + '01' + '-' + '01'
+        // 左侧时间实时赋值
+        this.timeVal=this.dateVal
+      }
+       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: this.$route.query.manageCode,
+        manageLv: "05",
+        sortType: this.sortType,
+        queryType: this.dateType,
+        date: this.dateVal,
+      }
+      // 去除对象里面是空的属性
+      for (var key in data) {
+        if (data[key] === '') {
+          delete data[key]
+        }
+      }
+      branchOfficeApi(data)
+        .then((res) => {
+          if (res.result == 0) {
+            console.log(res.content.list)
+            $this.tableData = res.content.list
+
+            $this.ysjsTotal = 0
+            $this.ysbbTotol = 0
+            $this.cbjsTotal = 0
+            $this.cbbfTotal = 0
+            $this.bzbfTotal = 0
+            $this.tableData.map(function (val) {
+              console.log(val.ysjs)
+              $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)
+            })
+            console.log($this.tableData)
+          }
+        })
+        .catch((err) => {})
+    },
+  },
+  mounted() {
+    setInterval(this.getCurrentDate(), 1000 * 60)
+
+    this.getlComPremDetil()
+  },
+}
+</script>
+<style lang="scss">
+.regional-office-container {
+  .van-tabs__nav--card .van-tab.van-tab--active {
+    color: red;
+    background-color: #fff;
+  }
+  .van-tabs__nav--card .van-tab {
+    color: #232020;
+    background-color: #e6e6e6;
+    border-right: 1px solid #8e8d8d;
+  }
+  .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: #f56123;
+    border-top: 0;
+    border-left: 0;
+    border-right: 0;
+  }
+  table td {
+    text-align: center;
+    white-space: nowrap;
+    border-width: 1px;
+    padding: 8px;
+    // border-style: solid;
+    // border-color: #666666;
+    background-color: #ffffff;
+    border-top: 0;
+    border-left: 0;
+    border-right: 0;
+  }
+  table {
+    border: 0;
+  }
+}
+</style>
diff --git a/src/views/ebiz/institutionalPerform/ServiceDepartOffice.vue b/src/views/ebiz/institutionalPerform/ServiceDepartOffice.vue
new file mode 100644
index 000000000..096fc427a
--- /dev/null
+++ b/src/views/ebiz/institutionalPerform/ServiceDepartOffice.vue
@@ -0,0 +1,399 @@
+<template>
+  <div class="service-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="onClickRabs" type="card" class="pl20 pr20 pt10 pb10 bg-red">
+      <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" span="9">截至{{timeVal}}</van-col>
+        <van-col span="3">
+          <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="slide-box">
+      <table class="fs14">
+        <tr class="title">
+          <th>排名</th>
+          <th>机构</th>
+          <th>预收件数</th>
+          <th>预收标保</th>
+          <th>承保件数</th>
+          <th>承保保费</th>
+          <th>标准保费</th>
+          <th>操作</th>
+        </tr>
+        <tr>
+          <th></th>
+          <th>合计</th>
+          <th>{{ysjsTotal}}</th>
+          <th>{{ysbbTotol}}</th>
+          <th>{{cbjsTotal}}</th>
+          <th>{{cbbfTotal}}</th>
+          <th>{{bzbfTotal}}</th>
+        </tr>
+        <tr v-for="(item,index) in tableData" :key="index">
+          <td>{{index+1}}</td>
+          <td>{{item.name}}</td>
+          <td>{{item.ysjs}}</td>
+          <td>{{item.ysbb}}</td>
+          <td>{{item.cbjs}}</td>
+          <td>{{item.cbbf}}</td>
+          <td>{{item.bzbf}}</td>
+          <td>
+            <span @click="toDetail(item.code)" class="red">查看</span>
+          </td>
+        </tr>
+      </table>
+    </div>
+  </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'
+export default {
+  name: 'districtOffice',
+  components: {
+    // XTable,
+    [Tabs.name]: Tabs,
+    [Tab.name]: Tab,
+  },
+  data() {
+    return {
+      YearColumns: ['2020', '2019', '2018', '2017', '2016', '2015'],
+      minDate: new Date(1997, 0, 1),
+      maxDate: new Date(2020, 10, 1),
+      currentMonthDate: new Date(),
+      currentYearDate: new Date(),
+      currentDate: new Date(),
+      sortType: '1',
+      // 总和
+      ysjsTotal: 0,
+      ysbbTotol: 0,
+      cbjsTotal: 0,
+      cbbfTotal: 0,
+      bzbfTotal: 0,
+      tableData: [],
+      timeVal: '',
+      sortTypeText: '预收件数',
+      queryColumns: ['预收件数', '预收标保', '承保件数', '承保标保', '标准保费'],
+      showPicker: false,
+      // 年月日选择器
+      showDatePicker: false,
+      showMonthPicker: false,
+      showYearPicker: false,
+      //
+      refreshLogo,
+      calendar,
+      point,
+      active: 0,
+      // 当前的机构编码
+      curCode: '',
+      dateType: 'now',
+      dateVal: '',
+      curTab: '',
+      shitimeVal:""
+    }
+  },
+  methods: {
+    formatterYear(type, val) {
+      if (type === 'year') {
+        return val + '年'
+      }
+      return val
+    },
+    formatter(type, val) {
+      if (type === 'year') {
+        return `${val}年`
+      } else if (type === 'month') {
+        return `${val}月`
+      }
+      return val
+    },
+    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 {
+        // 实时的时候date清空
+        this.dateType = 'now'
+        this.dateVal = ''
+        // 左侧时间实时赋值
+        this.timeVal= this.shitimeVal
+        // 调接口
+         this.getlComPremDetil()
+      }
+    },
+    toDetail(manageCode) {
+      this.$router.push({
+        path: '/institutionalPerform/districtOffice',
+        query: {
+          manageCode: manageCode,
+        },
+      })
+    },
+    //修改月、天的格式，保持两位数显示
+    add0(m) {
+      return m < 10 ? '0' + m : m
+    },
+    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
+        } else {
+          timeStr += ' 0' + curHour + ':' + curMinute
+        }
+      } else {
+        if (curMinute < 10) {
+          timeStr += ' ' + curHour + ':0' + curMinute
+        } else {
+          timeStr += ' ' + curHour + ':' + curMinute
+        }
+      }
+      // 一直在获取时间
+      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) {
+      console.log(this.curTab)
+      console.log(value)
+      if (this.curTab == 1) {
+        // now：当前 y:年 m:月 d:日
+        // 日
+        this.dateType = 'd'
+        this.dateVal = this.dateFormat(this.currentDate)
+        console.log(this.dateVal)
+        // 左侧时间实时赋值
+        this.timeVal=this.dateVal
+      } else if (this.curTab == 2) {
+        // 月
+        this.dateType = 'm'
+        this.dateVal = this.dateFormat(this.currentMonthDate)
+        // 左侧时间实时赋值
+        this.timeVal=this.dateVal
+      } else if (this.curTab == 3) {
+        // 年
+        this.dateType = 'y'
+        this.dateVal = value+'-' + '01' + '-' + '01'
+        // 左侧时间实时赋值
+        this.timeVal=this.dateVal
+      }
+       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: this.$route.query.manageCode,
+        manageLv: "03",
+        sortType: this.sortType,
+        queryType: this.dateType,
+        date: this.dateVal,
+      }
+      // 去除对象里面是空的属性
+      for (var key in data) {
+        if (data[key] === '') {
+          delete data[key]
+        }
+      }
+      branchOfficeApi(data)
+        .then((res) => {
+          if (res.result == 0) {
+            console.log(res.content.list)
+            $this.tableData = res.content.list
+
+            $this.ysjsTotal = 0
+            $this.ysbbTotol = 0
+            $this.cbjsTotal = 0
+            $this.cbbfTotal = 0
+            $this.bzbfTotal = 0
+            $this.tableData.map(function (val) {
+              console.log(val.ysjs)
+              $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)
+            })
+            console.log($this.tableData)
+          }
+        })
+        .catch((err) => {})
+    },
+  },
+  mounted() {
+    setInterval(this.getCurrentDate(), 1000 * 60)
+
+    this.getlComPremDetil()
+  },
+}
+</script>
+<style lang="scss">
+.service-office-container {
+  .van-tabs__nav--card .van-tab.van-tab--active {
+    color: red;
+    background-color: #fff;
+  }
+  .van-tabs__nav--card .van-tab {
+    color: #232020;
+    background-color: #e6e6e6;
+    border-right: 1px solid #8e8d8d;
+  }
+  .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: #f56123;
+    border-top: 0;
+    border-left: 0;
+    border-right: 0;
+  }
+  table td {
+    text-align: center;
+    white-space: nowrap;
+    border-width: 1px;
+    padding: 8px;
+    // border-style: solid;
+    // border-color: #666666;
+    background-color: #ffffff;
+    border-top: 0;
+    border-left: 0;
+    border-right: 0;
+  }
+  table {
+    border: 0;
+  }
+}
+</style>
diff --git a/src/views/ebiz/institutionalPerform/UnderOffice.vue b/src/views/ebiz/institutionalPerform/UnderOffice.vue
new file mode 100644
index 000000000..55848ec4c
--- /dev/null
+++ b/src/views/ebiz/institutionalPerform/UnderOffice.vue
@@ -0,0 +1,408 @@
+<template>
+  <div 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-nav-bar left-text="机构业绩" left-arrow @click-left="onBack">
+      <template #right>
+        <img @click="getlComPremDetil" :src="refreshLogo" />
+      </template>
+    </van-nav-bar>
+    <!-- 年月日选择 -->
+    <van-tabs @click="onClickRabs" type="card" class="pl20 pr20 pt10 pb10 bg-red">
+      <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" span="9">截至{{timeVal}}</van-col>
+        <van-col span="3">
+          <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="slide-box">
+      <table class="fs14">
+        <tr class="title">
+          <th>排名</th>
+          <th>机构</th>
+          <th>预收件数</th>
+          <th>预收标保</th>
+          <th>承保件数</th>
+          <th>承保保费</th>
+          <th>标准保费</th>
+          <th>操作</th>
+        </tr>
+        <tr>
+          <th></th>
+          <th>合计</th>
+          <th>{{ysjsTotal}}</th>
+          <th>{{ysbbTotol}}</th>
+          <th>{{cbjsTotal}}</th>
+          <th>{{cbbfTotal}}</th>
+          <th>{{bzbfTotal}}</th>
+        </tr>
+        <tr v-for="(item,index) in tableData" :key="index">
+          <td>{{index+1}}</td>
+          <td>{{item.name}}</td>
+          <td>{{item.ysjs}}</td>
+          <td>{{item.ysbb}}</td>
+          <td>{{item.cbjs}}</td>
+          <td>{{item.cbbf}}</td>
+          <td>{{item.bzbf}}</td>
+          <td>
+            <span @click="toDetail(item.code)" class="red">查看</span>
+          </td>
+        </tr>
+      </table>
+    </div>
+  </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'
+export default {
+  name: 'districtOffice',
+  components: {
+    // XTable,
+    [Tabs.name]: Tabs,
+    [Tab.name]: Tab,
+  },
+  data() {
+    return {
+      YearColumns: ['2020', '2019', '2018', '2017', '2016', '2015'],
+      minDate: new Date(1997, 0, 1),
+      maxDate: new Date(2020, 10, 1),
+      currentMonthDate: new Date(),
+      currentYearDate: new Date(),
+      currentDate: new Date(),
+      sortType: '1',
+      // 总和
+      ysjsTotal: 0,
+      ysbbTotol: 0,
+      cbjsTotal: 0,
+      cbbfTotal: 0,
+      bzbfTotal: 0,
+      tableData: [],
+      timeVal: '',
+      sortTypeText: '预收件数',
+      queryColumns: ['预收件数', '预收标保', '承保件数', '承保标保', '标准保费'],
+      showPicker: false,
+      // 年月日选择器
+      showDatePicker: false,
+      showMonthPicker: false,
+      showYearPicker: false,
+      //
+      refreshLogo,
+      calendar,
+      point,
+      active: 0,
+      // 当前的机构编码
+      curCode: '',
+      dateType: 'now',
+      dateVal: '',
+      curTab: '',
+      shitimeVal:""
+    }
+  },
+  methods: {
+    formatterYear(type, val) {
+      if (type === 'year') {
+        return val + '年'
+      }
+      return val
+    },
+    formatter(type, val) {
+      if (type === 'year') {
+        return `${val}年`
+      } else if (type === 'month') {
+        return `${val}月`
+      }
+      return val
+    },
+    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 {
+        // 实时的时候date清空
+        this.dateType = 'now'
+        this.dateVal = ''
+        // 左侧时间实时赋值
+        this.timeVal= this.shitimeVal
+        // 调接口
+         this.getlComPremDetil()
+      }
+    },
+    toDetail(manageCode) {
+      this.$router.push({
+        path: '/institutionalPerform/serviceDepartOffice',
+        query: {
+          manageCode: manageCode,
+        },
+      })
+    },
+    //修改月、天的格式，保持两位数显示
+    add0(m) {
+      return m < 10 ? '0' + m : m
+    },
+    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
+        } else {
+          timeStr += ' 0' + curHour + ':' + curMinute
+        }
+      } else {
+        if (curMinute < 10) {
+          timeStr += ' ' + curHour + ':0' + curMinute
+        } else {
+          timeStr += ' ' + curHour + ':' + curMinute
+        }
+      }
+      // 一直在获取时间
+      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) {
+      console.log(this.curTab)
+      console.log(value)
+      if (this.curTab == 1) {
+        // now：当前 y:年 m:月 d:日
+        // 日
+        this.dateType = 'd'
+        this.dateVal = this.dateFormat(this.currentDate)
+        console.log(this.dateVal)
+        // 左侧时间实时赋值
+        this.timeVal=this.dateVal
+      } else if (this.curTab == 2) {
+        // 月
+        this.dateType = 'm'
+        this.dateVal = this.dateFormat(this.currentMonthDate)
+        // 左侧时间实时赋值
+        this.timeVal=this.dateVal
+      } else if (this.curTab == 3) {
+        // 年
+        this.dateType = 'y'
+        this.dateVal = value+'-' + '01' + '-' + '01'
+        // 左侧时间实时赋值
+        this.timeVal=this.dateVal
+      }
+       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: this.$route.query.manageCode,
+        manageLv: "02",
+        sortType: this.sortType,
+        queryType: this.dateType,
+        date: this.dateVal,
+      }
+      // 去除对象里面是空的属性
+      for (var key in data) {
+        if (data[key] === '') {
+          delete data[key]
+        }
+      }
+      branchOfficeApi(data)
+        .then((res) => {
+          if (res.result == 0) {
+            console.log(res.content.list)
+            $this.tableData = res.content.list
+
+            $this.ysjsTotal = 0
+            $this.ysbbTotol = 0
+            $this.cbjsTotal = 0
+            $this.cbbfTotal = 0
+            $this.bzbfTotal = 0
+            $this.tableData.map(function (val) {
+              console.log(val.ysjs)
+              $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)
+            })
+            console.log($this.tableData)
+          }
+        })
+        .catch((err) => {})
+    },
+  },
+  mounted() {
+    setInterval(this.getCurrentDate(), 1000 * 60)
+
+    this.getlComPremDetil()
+  },
+}
+</script>
+<style lang="scss">
+.under-office-container {
+  .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: red;
+    background-color: #fff;
+  }
+  .van-tabs__nav--card .van-tab {
+    color: #232020;
+    background-color: #e6e6e6;
+    border-right: 1px solid #8e8d8d;
+  }
+  .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: #f56123;
+    border-top: 0;
+    border-left: 0;
+    border-right: 0;
+  }
+  table td {
+    text-align: center;
+    white-space: nowrap;
+    border-width: 1px;
+    padding: 8px;
+    // border-style: solid;
+    // border-color: #666666;
+    background-color: #ffffff;
+    border-top: 0;
+    border-left: 0;
+    border-right: 0;
+  }
+  table {
+    border: 0;
+  }
+}
+</style>