diff --git a/src/components/ebiz/billingDetail/tableDetail.vue b/src/components/ebiz/billingDetail/tableDetail.vue
new file mode 100644
index 000000000..46600d71e
--- /dev/null
+++ b/src/components/ebiz/billingDetail/tableDetail.vue
@@ -0,0 +1,101 @@
+<template>
+  <div class="statisticsTable">
+    <table cellspacing="0" summary cellpadding="1">
+      <thead>
+        <tr>
+          <th :class="{'th-fixed':index<1}" v-for="(item,index) in theads" :key="index">{{item}}</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-for="(item, index) in tableData" :key="index">
+          <td :class="isLink?'td-fixed':'th-fixed'" @click="goLink(item)">{{item.convokeOrgCn}}</td>
+          <td>{{item.splan}}</td>
+          <td>{{item.estimatePeople}}</td>
+          <td>{{item.estimatePremium}}</td>
+          <td>{{item.rplan}}</td>
+          <td>{{item.realityPeople}}</td>
+          <td>{{item.estimateGetPremium}}</td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'tableDetail',
+  props:{
+      theads:{
+          type:Array,
+          default:[]
+      },
+      isLink:{
+          type:Boolean,
+          default:false,
+      },
+      tableData:{
+          type:Array,
+          default:[]
+      }
+  },
+  data() {
+    return {
+    }
+  },
+  created(){
+  },
+  methods: {
+      goLink(item){
+          if(this.isLink){
+              this.$emit('goLink',item)
+          }
+      },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.statisticsTable th {
+  width: 100px;
+}
+table {
+  width: 160vw;
+}
+.statisticsTable {
+  width: 100%;
+  table {
+    border-collapse: collapse;
+  }
+
+  table,
+  th,
+  td {
+    border: 1px solid #999;
+    text-align: center;
+    font-size: 14px;
+    line-height: 30px;
+    background:#fff;
+  }
+  thead {
+    th {
+      height: 40px;
+      line-height: 40px;
+      background: #e9332e;
+      color: #fff;
+    }
+  }
+}
+.th-fixed {
+  position: sticky;
+  left: 0;
+  width:200px;
+  padding: 0 5px;
+}
+.td-fixed {
+  position: sticky;
+  width:200px;
+  padding: 0 5px;
+  left: 0;
+  text-decoration: underline;
+}
+</style>
\ No newline at end of file
diff --git a/src/router/ebiz/billingDetail.js b/src/router/ebiz/billingDetail.js
new file mode 100644
index 000000000..fd4d9b255
--- /dev/null
+++ b/src/router/ebiz/billingDetail.js
@@ -0,0 +1,14 @@
+const billingDetail = () => import('@/views/ebiz/billingDetail/billingDetail')
+
+
+export default [
+    {
+      path: '/billingDetail',
+      name: 'billingDetail',
+      component: billingDetail,
+      meta: {
+        title: '出单详情',
+        index: 1
+      }
+    }
+  ]
\ No newline at end of file
diff --git a/src/router/ebiz/index.js b/src/router/ebiz/index.js
index 673fc44bd..599dc34bf 100644
--- a/src/router/ebiz/index.js
+++ b/src/router/ebiz/index.js
@@ -35,6 +35,9 @@ import insureAgain from './insureAgain'
 
 // 产说会
 import productionSay from './productionSay'
+// 出单详情
+import billingDetail from './billingDetail'
+
 export default [
   ...proposal,
   ...sale,
@@ -66,4 +69,5 @@ export default [
   ...eqiVisit,
   ...insureAgain,
   ...productionSay,
+  ...billingDetail
 ] //根据需要进行删减
diff --git a/src/views/ebiz/billingDetail/billingDetail.vue b/src/views/ebiz/billingDetail/billingDetail.vue
new file mode 100644
index 000000000..2efb673c9
--- /dev/null
+++ b/src/views/ebiz/billingDetail/billingDetail.vue
@@ -0,0 +1,224 @@
+<template>
+  <div>
+    <div class="classification">
+      <span>机构名称: </span>
+      <span @click="isOrgLv2ConditionShow = true">
+        <span>{{ OrgLv2Name }}</span>
+        <van-icon name="arrow-down" />
+      </span>
+      <template v-if="isMoreConditionShow">
+        <span @click="isOrgLv3ConditionShow = true">
+          <span>{{ OrgLv4Name }}</span>
+          <van-icon name="arrow-down" />
+        </span>
+        <span @click="isOrgLv4ConditionShow = true">
+          <span>{{ OrgLv3Name }}</span>
+          <van-icon name="arrow-down" />
+        </span>
+      </template>
+    </div>
+
+    <!-- 二级机构筛选栏 -->
+    <van-popup v-model="isOrgLv2ConditionShow" position="bottom" :style="{ height: '40vh' }">
+      <van-picker show-toolbar :columns="province" @confirm="onOrgLv2ConditionConfirm" @cancel="isOrgLv2ConditionShow = false" />
+    </van-popup>
+    <!-- 三级机构筛选栏 -->
+    <van-popup v-model="isOrgLv3ConditionShow" position="bottom" :style="{ height: '40vh' }">
+      <van-picker show-toolbar :columns="city" @confirm="onOrgLv3ConditionConfirm" @cancel="isOrgLv3ConditionShow = false" />
+    </van-popup>
+    <!-- 四级机构筛选栏 -->
+    <van-popup v-model="isOrgLv4ConditionShow" position="bottom" :style="{ height: '40vh' }">
+      <van-picker show-toolbar :columns="area" @confirm="onOrgLv4ConditionConfirm" @cancel="isOrgLv4ConditionShow = false" />
+    </van-popup>
+  </div>
+</template>
+
+<script>
+import { Icon } from 'vant'
+import tableDetail from '@/components/ebiz/billingDetail/tableDetail'
+import { getComPerformance, getOrgList } from '@/api/ebiz/branchOffice/branchOffice'
+// 当前时间
+const currentDate = new Date()
+export default {
+  name: 'billingDetail',
+  components: { tableDetail, [Icon.name]: Icon },
+  computed: {
+      
+    isMoreConditionShow() {
+      return this.OrgLv2Name !== '全国'
+    },
+    province() {
+      const name = ['全国']
+      this.OrgLv2s.forEach((item) => {
+        name.push(item.name)
+      })
+      return name
+    },
+    city() {
+      const city = ['全部']
+      this.OrgLv3s.forEach((item) => {
+        if (item.upBranchCode === this.OrgLv2Code) {
+          city.push(item.name)
+        }
+      })
+      return city
+    },
+    area() {
+      const area = ['全部']
+      this.OrgLv4s.forEach((item) => {
+        if (item.upBranchCode === this.OrgLv3Code) {
+          area.push(item.name)
+        }
+      })
+      return area
+    },
+  },
+  data() {
+    return {
+      // 二级机构筛选是否显示
+      isOrgLv2ConditionShow: false,
+      // 三级机构筛选是否显示
+      isOrgLv3ConditionShow: false,
+      // 四级机构筛选是否显示
+      isOrgLv4ConditionShow: false,
+      OrgLv2Name: '全国',
+      OrgLv4Name: '全部',
+      OrgLv3Name: '全部',
+      OrgLv2Code: 0,
+      OrgLv2s: [],
+      OrgLv3Code: 0,
+      OrgLv3s: [],
+      areaCode: 0,
+      OrgLv4s: [],
+      
+      params: {
+        // 86: 全国
+        manageCode: '86',
+        // 01: 全国, 02: 中心支公司, 03: 营销服务部, 04: 下辖营业区
+        manageLv: '01',
+        // 日期类型: 年/月/日/实时
+        queryType: 'd',
+        date: currentDate,
+        // all: 汇总, prem: 保费排行, active：人力排行, product: 产品
+        type: 'all',
+        // 1: 中心支公司, 2: 营销服务部, 3: 下辖营业区
+        queryCom: ''
+      },
+    }
+  },
+  methods: {
+      async initData() {
+      // 初始化年份筛选数据
+    //   const currentYear = new Date().getFullYear()
+    //   const startYear = currentYear - 10
+    //   for (let year = startYear; year <= currentYear; year++) {
+    //     this.years.unshift(year)
+    //   }
+      /**
+       * 查询机构下拉列表
+       * manageCode, manageLv传空查全国所有二级机构
+       **/
+      console.log('getOrgList :>> ', getOrgList)
+      const res = await getOrgList({
+        bussinessType: 'normal',
+        manageCode: '',
+        manageLv: ''
+      })
+      if (res.result === '0') {
+        this.OrgLv2s.push(...res.content)
+      } else {
+        this.$toast(res.resultMessage)
+      }
+      // 查询默认数据
+    //   const result = await this.getRankData()
+    //   this.setSummarizingData(result)
+    },
+    // 筛选二级机构
+    async onOrgLv2ConditionConfirm(data) {
+      this.isOrgLv2ConditionShow = false
+      let OrgLv2 = this.OrgLv2s.find((item) => item.name === data)
+      if (OrgLv2) {
+        this.OrgLv2Code = OrgLv2.code
+        this.params.manageCode = this.OrgLv2Code
+        this.params.manageLv = '02'
+      }
+      if (data === '全国') {
+        this.params.manageCode = '86'
+        this.params.manageLv = '01'
+      }
+      this.OrgLv2Name = data
+      this.OrgLv4Name = '全部'
+      this.OrgLv3Name = '全部'
+      // 查询三级机构
+      const res = await getOrgList({
+        bussinessType: 'normal',
+        manageCode: this.OrgLv2Code,
+        manageLv: '02',
+      })
+      this.OrgLv3s.splice(0)
+      this.OrgLv3s.push(...res.content)
+    //   this.setRankData()
+    },
+    // 筛选三级机构
+    async onOrgLv3ConditionConfirm(data) {
+      this.isOrgLv3ConditionShow = false
+      this.OrgLv4Name = data
+      let OrgLv3 = this.OrgLv3s.find((item) => item.name === data)
+      if (OrgLv3) {
+        this.OrgLv3Code = OrgLv3.code
+        this.params.manageCode = this.OrgLv3Code
+        this.params.manageLv = '03'
+      }
+      if (data === '全部') {
+        this.params.manageCode = this.OrgLv2Code
+        this.params.manageLv = '02'
+      }
+      this.OrgLv3Name = '全部'
+      // 查询四级机构
+      const res = await getOrgList({
+        bussinessType: 'normal',
+        manageCode: this.OrgLv3Code,
+        manageLv: '03',
+      })
+      this.OrgLv4s.splice(0)
+      this.OrgLv4s.push(...res.content)
+    //   this.setRankData()
+    },
+    // 筛选四级机构
+    async onOrgLv4ConditionConfirm(data) {
+      this.isOrgLv4ConditionShow = false
+      this.OrgLv3Name = data
+      let area = this.OrgLv4s.find((item) => item.name === data)
+      if (area) {
+        this.areaCode = area.code
+        this.params.manageCode = this.areaCode
+        this.params.manageLv = '04'
+      }
+      if (data === '全部') {
+        this.params.manageCode = this.OrgLv3Code
+        this.params.manageLv = '03'
+      }
+    //   this.setRankData()
+    },
+  },
+  created(){
+      this.initData();
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.classification {
+  font-size: 14px;
+  padding: 15px;
+}
+.van-icon {
+  font-weight: bolder;
+}
+
+::v-deep .classification .van-icon {
+  vertical-align: middle;
+  margin-right: 5px;
+  margin-bottom: 3px;
+}
+</style>
\ No newline at end of file