diff --git a/src/views/distributor/distributorDetail.vue b/src/views/distributor/distributorDetail.vue
new file mode 100644
index 0000000..78b2bbb
--- /dev/null
+++ b/src/views/distributor/distributorDetail.vue
@@ -0,0 +1,475 @@
+<!--经销商详情弹窗-->
+<template>
+  <el-dialog title="经销商详情" width="75%" :visible.sync="isShowInfo" append-to-body :close-on-click-modal="false">
+    <el-descriptions title="" :column="2" border>
+      <el-descriptions-item label="经销商名称">{{ baseInfo.distributorName }}</el-descriptions-item>
+      <el-descriptions-item label="经销商编号">{{ baseInfo.distributorCode }}</el-descriptions-item>
+      <el-descriptions-item label="单位性质">{{ baseInfo.companyNatureName }}</el-descriptions-item>
+      <el-descriptions-item label="单位类型">{{ baseInfo.companyTypeName }}</el-descriptions-item>
+      <el-descriptions-item label="详细地址" span="2">
+        {{ baseInfo.companyProvince }} / {{ baseInfo.companyCity }} / {{ baseInfo.companyArea }} / {{ baseInfo.companyAddress }}
+      </el-descriptions-item>
+    </el-descriptions>
+
+    <el-tabs v-model="activeTabName" style="margin-top: 20px;">
+      <el-tab-pane label="三证信息" name="certDetail">
+        <cert-info-detail ref="certDetail"/>
+      </el-tab-pane>
+
+      <el-tab-pane label="联系人信息" name="personDetail">
+        <person-info-detail ref="personDetail" />
+      </el-tab-pane>
+
+      <el-tab-pane label="业务信息" name="businessDetail">
+        <business-info-detail ref="businessDetail" />
+      </el-tab-pane>
+
+      <el-tab-pane label="经营信息" name="operationDetail">
+        <operation-info-detail ref="operationDetail" />
+      </el-tab-pane>
+
+      <el-tab-pane label="其他信息" name="extraDetail">
+        其他附加
+      </el-tab-pane>
+    </el-tabs>
+
+<!--    <div class="deviceDialog ">-->
+<!--      &lt;!&ndash; {{personInfo}} &ndash;&gt;-->
+<!--      <div class="headInfo">-->
+<!--      </div>-->
+<!--      <div class="content">-->
+<!--        <div class="content_nav">-->
+<!--          <div class="nav_item" :class="{ selectNav: navSelect == 0 }" @click="changeNav(0)">-->
+<!--            三证信息-->
+<!--          </div>-->
+<!--          <div class="nav_item" :class="{ selectNav: navSelect == 1 }" @click="changeNav(1)">-->
+<!--            联系人信息-->
+<!--          </div>-->
+<!--          <div class="nav_item" :class="{ selectNav: navSelect == 2 }" @click="changeNav(2)">-->
+<!--            业务信息-->
+<!--          </div>-->
+<!--          <div class="nav_item" :class="{ selectNav: navSelect == 3 }" @click="changeNav(3)">-->
+<!--            经营信息-->
+<!--          </div>-->
+<!--          <div class="nav_item" :class="{ selectNav: navSelect == 4 }" @click="changeNav(4)">-->
+<!--            评审信息-->
+<!--          </div>-->
+<!--          <div class="nav_item" :class="{ selectNav: navSelect == 5 }" @click="changeNav(5)">-->
+<!--            其他信息-->
+<!--          </div>-->
+<!--        </div>-->
+<!--          <div v-if="navSelect == 4" class="reviewbox">-->
+<!--            <div class="inputContent">-->
+<!--              <input-vue-->
+<!--                v-model="reviewInfo.supplierStatusName"-->
+<!--                title="供应商状态"-->
+<!--                width="200px"-->
+<!--                disabled="true"-->
+<!--              />-->
+<!--              <input-vue-->
+<!--                v-model="reviewInfo.preReviewResultName"-->
+<!--                title="资料预审结果"-->
+<!--                width="200px"-->
+<!--                disabled="true"-->
+<!--              />-->
+<!--              <input-vue-->
+<!--                v-model="reviewInfo.inputReviewResult"-->
+<!--                title="录库评审结果"-->
+<!--                width="200px"-->
+<!--                disabled="true"-->
+<!--              />-->
+<!--            </div>-->
+<!--            <div class="title">-->
+<!--              历史季度评价-->
+<!--            </div>-->
+<!--            <el-table-->
+<!--              height="200"-->
+<!--              :data="reviewInfo.quarterlyEvaluateList"-->
+<!--              :row-class-name="tableRowClassName"-->
+<!--              :header-cell-style="{-->
+<!--                'text-align': 'center',-->
+<!--                background: '  #2483b3',-->
+<!--                color: 'white',-->
+<!--              }"-->
+<!--              :row-style="{ 'text-align': 'center' }"-->
+<!--              style="width: 100%"-->
+<!--            >-->
+<!--              <el-table-column prop="supplierCode" label="序号" />-->
+<!--              <el-table-column prop="evaluateQuarterly" label="评价季度" />-->
+<!--              <el-table-column prop="quarterlyEvaluateResult" label="季度评价结果" />-->
+<!--              <el-table-column prop="quarterlyEvaluateIllustration" label="季度评价说明" />-->
+<!--              <el-table-column prop="quarterlyEvaluateDate" label="季度评价时间" />-->
+<!--              <el-table-column prop="quarterlyEvaluateFile" label="评价详情" />-->
+<!--            </el-table>-->
+<!--            <div class="title">-->
+<!--              历史年度考核-->
+<!--            </div>-->
+<!--            <el-table-->
+<!--              height="200"-->
+<!--              :data="reviewInfo.annualAssessList"-->
+<!--              :row-class-name="tableRowClassName"-->
+<!--              :header-cell-style="{-->
+<!--                'text-align': 'center',-->
+<!--                background: '  #2483b3',-->
+<!--                color: 'white',-->
+<!--              }"-->
+<!--              :row-style="{ 'text-align': 'center' }"-->
+<!--              style="width: 100%"-->
+<!--            >-->
+<!--              <el-table-column prop="supplierCode" label="序号" />-->
+<!--              <el-table-column prop="assessAnnual" label="考核年度" />-->
+<!--              <el-table-column prop="annualAssessResult" label="年度考核结果" />-->
+<!--              <el-table-column prop="annualAssessIllustration" label="年度考核时说明" />-->
+<!--              <el-table-column prop="annualAssessDate" label="年度考核时间" />-->
+<!--              <el-table-column prop="annualAssessFile" label="考核详情" />-->
+<!--            </el-table>-->
+<!--          </div>-->
+<!--          <div v-if="navSelect == 5" class="othernfo">-->
+<!--            <div class="title">-->
+<!--              历史年度考核-->
+<!--            </div>-->
+<!--            <el-table-->
+<!--              height="200"-->
+<!--              :data="businessInfo.bankList"-->
+<!--              :row-class-name="tableRowClassName"-->
+<!--              :header-cell-style="{-->
+<!--                'text-align': 'center',-->
+<!--                background: '  #2483b3',-->
+<!--                color: 'white',-->
+<!--              }"-->
+<!--              :row-style="{ 'text-align': 'center' }"-->
+<!--              style="width: 100%"-->
+<!--            >-->
+<!--              &lt;!&ndash; <el-table-column prop="date" label="序号" > </el-table-column> &ndash;&gt;-->
+<!--              <el-table-column prop="accountName" label="账户名称" />-->
+<!--              <el-table-column prop="accountNumber" label="银行账号" />-->
+<!--              <el-table-column prop="depositBank" label="开户行" />-->
+<!--              <el-table-column prop="depositBankName" label="开户行名称" />-->
+<!--              <el-table-column prop="depositBankNumber" label="开户行号" />-->
+<!--              &lt;!&ndash; <el-table-column prop="address" label="操作"> </el-table-column> &ndash;&gt;-->
+<!--            </el-table>-->
+<!--            <div class="title">-->
+<!--              历史年度考核-->
+<!--            </div>-->
+<!--            <div class="inputContent">-->
+<!--              <input-vue-->
+<!--                v-model="businessInfo.systemCertificateName"-->
+<!--                title="管理体系认证名称"-->
+<!--                width="200px"-->
+<!--                disabled="true"-->
+<!--              />-->
+<!--              <input-vue-->
+<!--                v-model="businessInfo.systemCertificateTerm"-->
+<!--                title="管理体系认证期限"-->
+<!--                width="200px"-->
+<!--                disabled="true"-->
+<!--              />-->
+<!--              <input-vue-->
+<!--                v-model="businessInfo.systemCertificateScan"-->
+<!--                title="管理体系扫描件"-->
+<!--                width="200px"-->
+<!--                disabled="true"-->
+<!--              />-->
+<!--            </div>-->
+<!--            <div class="title">-->
+<!--              历史年度考核-->
+<!--            </div>-->
+<!--            <el-table-->
+<!--              height="200"-->
+<!--              :data="businessInfo.qualifyCertificateList"-->
+<!--              :row-class-name="tableRowClassName"-->
+<!--              :header-cell-style="{-->
+<!--                'text-align': 'center',-->
+<!--                background: '  #2483b3',-->
+<!--                color: 'white',-->
+<!--              }"-->
+<!--              :row-style="{ 'text-align': 'center' }"-->
+<!--              style="width: 100%"-->
+<!--            >-->
+<!--              <el-table-column prop="id" label="序号" />-->
+<!--              <el-table-column prop="qualifyName" label="资质需要名称" />-->
+<!--              <el-table-column prop="qualifyDesc" label="资质需求描述" />-->
+<!--              <el-table-column prop="proveMaterialDesc" label="资质要求材料" />-->
+<!--            </el-table>-->
+<!--          </div>-->
+<!--        </div>-->
+<!--      </div>-->
+<!--    </div>-->
+  </el-dialog>
+</template>
+
+<script>
+
+import CertInfoDetail from '@/views/companyDetail/certInfoDetail'
+import PersonInfoDetail from '@/views/companyDetail/personInfoDetail'
+import BusinessInfoDetail from '@/views/companyDetail/businessInfoDetail'
+import OperationInfoDetail from '@/views/companyDetail/operationInfoDetail'
+import { tableRowClassName } from '@/utils/myUtils/changeTableTr'
+import { certificateDetail, personDetail, businessDetail } from '@/api/distributor/distributor'
+
+export default {
+  name: 'DistributorDetail',
+  components: {
+    CertInfoDetail, PersonInfoDetail, BusinessInfoDetail, OperationInfoDetail
+  },
+  data() {
+    return {
+      baseInfo: {
+        distributorCode: '',
+        distributorName: '',
+        companyNatureName: '',
+        companyTypeName: '',
+        companyProvince: '',
+        companyCity: '',
+        companyArea: '',
+        companyAddress: ''
+      },
+      activeTabName: 'certDetail',
+      certificateInfo: '',
+      personInfo: '',
+      businessInfo: '',
+      reviewInfo: '',
+      isShowInfo: false
+    }
+  },
+  methods: {
+    tableRowClassName: tableRowClassName,
+    initDialog(dialogStatus, row = null) {
+      this.isShowInfo = true
+      this.activeTabName = 'certDetail'
+      if (row !== null) {
+        this.baseInfo.distributorCode = row.distributorCode
+        this.baseInfo.distributorName = row.distributorName
+        this.baseInfo.companyNatureName = row.companyNatureName
+        this.baseInfo.companyTypeName = row.companyTypeName
+        this.baseInfo.companyProvince = row.companyProvince
+        this.baseInfo.companyCity = row.companyCity
+        this.baseInfo.companyArea = row.companyArea
+        this.baseInfo.companyAddress = row.companyAddress
+      }
+
+      this.getCertDetail(row.distributorCode)
+      this.getPersonDetail(row.distributorCode)
+      this.getBusinessDetail(row.distributorCode)
+    },
+    getCertDetail(distributorCode) {
+      certificateDetail({ distributorCode: distributorCode }).then(res => {
+        if (res !== null && res !== undefined && res !== '') {
+          this.$refs.certDetail.showCertDetail(res)
+        }
+      })
+    },
+    getPersonDetail(distributorCode) {
+      personDetail({ distributorCode: distributorCode }).then(res => {
+        if (res !== null && res !== undefined && res !== '') {
+          this.$refs.personDetail.showPersonDetail(res)
+        }
+      })
+    },
+    getBusinessDetail(distributorCode) {
+      businessDetail({ distributorCode: distributorCode }).then(res => {
+        if (res !== null && res !== undefined && res !== '') {
+          this.$refs.businessDetail.showBusinessDetail(res)
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.deviceDialog {
+  border-radius: 5px;
+  // overflow: hidden;
+  // padding: 10px ;
+  width: 1125px;
+  height: 100%;
+  box-sizing: border-box;
+}
+
+.selectNav {
+  border: 1px solid #999;
+  border-bottom: 3px solid #fff;
+  position: relative;
+  z-index: 9;
+  box-sizing: border-box;
+  top: 2px;
+}
+
+.content {
+  width: 100%;
+
+  .content_nav {
+    box-sizing: border-box;
+    display: flex;
+    margin: 10px 0;
+    border-bottom: 1px solid #999;
+
+    .nav_item {
+      width: 130px;
+      height: 60px;
+      margin: 0 10px;
+      line-height: 60px;
+      text-align: center;
+    }
+  }
+}
+
+.content_content {
+  // padding: 20px 0 60px 0;
+  // box-sizing: border-box;
+
+}
+
+.headInfo {
+  width: 1000px;
+
+  .inputContent {
+    // flex: 1;
+    display: flex;
+    // flex-direction: column;
+
+    justify-content: space-between;
+    align-items: center;
+  }
+}
+
+.baseInfo {
+  width: 1000px;
+  display: flex;
+
+  .inputContent {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    margin: 0 10px;
+    // justify-content: space-between;
+    // align-items: center;
+  }
+}
+
+.deviceInfo {
+  display: flex;
+  // align-items: center;
+  justify-content: space-between;
+  height: 100%;
+
+  .inputContent {
+    flex: 1;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+  }
+}
+
+.dataInfo {
+  display: flex;
+  // align-items: center;
+  justify-content: space-between;
+  height: 100%;
+
+  .inputContent {
+    flex: 1;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+  }
+}
+
+.relation {
+  .topbox {
+    .inputContent {
+      display: flex;
+      justify-content: space-between;
+
+      .input-vue {
+        // flex: 1;
+        width: 364px;
+      }
+
+      .doulbe {
+        // width: 572px;
+        width: 602px;
+        padding-left: 27px;
+        // padding-left: 4px;
+      }
+
+      .doulbe2 {
+        padding-left: 12px;
+        width: 588px;
+      }
+    }
+  }
+}
+
+.business, .reviewbox {
+  .inputContent {
+    display: flex;
+    justify-content: space-between;
+  }
+
+  .title {
+    padding: 10px 0;
+  }
+}
+
+.manage {
+  .title {
+    background-color: rgb(40, 115, 158);
+    color: #fff;
+    font-size: 22px;
+    padding: 10px;
+    font-weight: bold;
+  }
+
+  .inputContent {
+    display: flex;
+    justify-content: space-between;
+
+    .tableDown {
+      width: 200px;
+      display: flex;
+      align-items: center;
+      padding: 0 10px;
+
+      input {
+        outline: none;
+        border: none;
+        width: 140px;
+      }
+
+      span {
+        margin-left: 5px;
+      }
+
+      color: rgb(40, 115, 158);
+      border: 1px solid lightgray;
+      height: 40px;
+    }
+  }
+
+  .inputbox {
+    display: flex;
+  }
+
+}
+
+.othernfo {
+  .title {
+    background-color: rgb(40, 115, 158);
+    color: #fff;
+    font-size: 22px;
+    padding: 10px;
+    font-weight: bold;
+    margin: 10px 0;
+  }
+
+  .inputContent {
+    display: flex;
+    justify-content: space-between;
+  }
+}
+
+</style>