diff --git a/src/api/report.js b/src/api/report.js
index 1434fb1..b08b85b 100644
--- a/src/api/report.js
+++ b/src/api/report.js
@@ -17,3 +17,20 @@ export function getStartsData (query) {
     data: query
   })
 }
+// 获取绩效排名详情
+export function getChartDetail (query) {
+  return requestFuc({
+    url: '/lz_management/performance/chart/detail',
+    method: 'POST',
+    data: query
+  })
+}
+
+// 获取部门信息
+export function getDepList (query) {
+  return requestFuc({
+    url: '/lz_management/staff/structure/deplist',
+    method: 'GET',
+    params: query
+  })
+}
diff --git a/src/router/kpi_route.js b/src/router/kpi_route.js
index 6370552..1cbbc19 100644
--- a/src/router/kpi_route.js
+++ b/src/router/kpi_route.js
@@ -147,6 +147,13 @@ export default [
         title: '智能测试带弹窗',
         pop: true
       }
+    }, {
+      path: 'report-detial',
+      name: 'reportDetial',
+      component: (resolve) => require(['@/views/kpi/report/detail.vue'], resolve),
+      meta: {
+        title: '绩效详情'
+      }
     }
     ]
   }
diff --git a/src/views/kpi/report/detail.vue b/src/views/kpi/report/detail.vue
index 2fea95c..3d1eff7 100644
--- a/src/views/kpi/report/detail.vue
+++ b/src/views/kpi/report/detail.vue
@@ -1,40 +1,121 @@
 <!--  -->
 <template>
-   <div>
-     <div>返回</div>
-     <span></span>
-     <div>等级分布详情<div>
-   </div>
-   <div>
-    <el-cascader></el-cascader>
-    <el-table :data="tableData"
+  <div>
+    <div class="title_bar">
+      <div @click="handleBack">返回</div>
+      <span></span>
+      <div>等级分布详情</div>
+    </div>
+    <div class="detail_content">
+        <el-cascader :options="depList" @change="handleChange" style="margin-bottom:20px" ></el-cascader>
+      <el-table :data="tableData"
               border
-              :header-cell-style="{ background:'#F5F7FA'}">
-      <el-table-column></el-table-column>
-      <el-table-column></el-table-column>
-      <el-table-column></el-table-column>
-      <el-table-column><el-table-column>
+              :header-cell-style="{ background:'#F5F7FA'}"
+              style="margin-top:20px">
+        <el-table-column prop="staffName" label="姓名"></el-table-column>
+        <el-table-column prop="staffNo" label="工号"></el-table-column>
+        <el-table-column prop="departmentName" label="部门"></el-table-column>
+        <el-table-column prop="allScore" label="考评结果"></el-table-column>
+        <el-table-column prop="scoreLevel" label="实际分布"></el-table-column>
     </el-table>
+    </div>
    </div>
 </template>
 
 <script>
+import {getChartDetail, getDepList} from '@/api/report'
 export default {
   data () {
     return {
-
+      // 表格数据
+      tableData: [],
+      // 部门数据列表
+      depList: []
     }
   },
   computed: {},
   beforeMount () {},
-  mounted () {},
-  methods: {},
-  watch: {}
+  mounted () {
+    this.handleDepListReq()
+    this.handleDetailReq()
+  },
+  methods: {
+    // 返回上一页
+    handleBack () {
+      this.$router.go(-1)
+    },
+    // 多选框转中处理
+    handleChange (val) {
+      this.handleDetailReq(val[1])
+    },
+    // 请求详情页面信息
+    async handleDetailReq (depId) {
+      let params = {
+        currPage: 1,
+        departmentId: depId,
+        flowProcess: this.$route.query.flowProcess,
+        startId: this.$route.query.startId,
+        pageSize: 20
+      }
+      let result = await getChartDetail(params)
+      this.tableData = result.data.list
+    },
+    // 请求部门信息
+    async handleDepListReq (handleNode) {
+      let params = {
+        type: 0
+      }
+      let result = await getDepList(params)
+      console.log(result)
+      this.depList = this.handleDepResult(result.data)
+    },
+    // 递归生成可用数组
+    handleDepResult (list) {
+      return Array.from(list).map(item => {
+        let resItem = {
+          value: item.departmentId,
+          label: item.departmentName
+        }
+        // 如果有下一级部门则递归调用
+        if (item.list && item.list.length > 0) {
+          let children = this.handleDepResult(item.list)
+          resItem['children'] = children
+        }
+        return resItem
+      })
+    }
+  },
+  watch: {
+
+  }
 
 }
-
 </script>
 
 <style lang='' scoped>
-
+.title_bar{
+  display: flex;
+  align-items: center;
+  margin-bottom: 20px;
+}
+.title_bar>:nth-child(1){
+  font-size: 16px;
+  color: #b4b4b4;
+  margin-right: 10px;
+}
+.title_bar>:nth-child(2){
+  height: 15px ;
+  width: 1px;
+  background: #333;
+}
+.title_bar>:nth-child(3){
+  font-size: 16px;
+  color: #333;
+  margin-left: 10px;
+}
+.detail_content{
+  background: white;
+  padding: 40px 20px;
+  border:solid 1px #b4b4b4;
+}
 </style>
diff --git a/src/views/kpi/report/index.vue b/src/views/kpi/report/index.vue
index f880e85..d5aa51f 100644
--- a/src/views/kpi/report/index.vue
+++ b/src/views/kpi/report/index.vue
@@ -27,61 +27,65 @@
           <div>{{statisticals[4].desc}}</div>
         </div>
         <div>
-          <div>{{statisticals[4].num}}</div>
-          <div>{{statisticals[4].desc}}</div>
+          <div>{{statisticals[5].num}}</div>
+          <div>{{statisticals[5].desc}}</div>
         </div>
         <div>
-          <div>{{statisticals[4].num}}</div>
-          <div>{{statisticals[4].desc}}</div>
+          <div>{{statisticals[6].num}}</div>
+          <div>{{statisticals[6].desc}}</div>
         </div>
       </div>
       <div>
-        <div class="num_title">考核人数分析</div>
-        <div class="num_tips">
+      <div class="num_title">考核人数分析</div>
+      <div class="chart_content">
+        <div class="num_chart">
           <div>考核人数分析</div>
-          <div>参与考核部门人数</div>
+          <div id="num_chart"></div>
         </div>
         <div class="num_report">
-          <div id="num_chart"></div>
-          <ul>
+          <div>参与考核部门人数</div>
+          <ul class="num_report_list">
             <li v-for="(assessItem, index) in assessNum" :key="assessItem.desc">
               <div class="rep_list">
-                <div :style="handleliColor(index)">{{index}}
-                </div>
-                <div>{{assessItem.desc}} {{ assessItem.num }}人</div>
+                <div style="display:flex">
+                  <div :style="handleliColor(index)">{{index}}</div>
+                  <div style="margin-left:10px">{{assessItem.desc}} </div>
                 </div>
+                <div>{{ assessItem.num }}人</div>
+              </div>
             </li>
           </ul>
         </div>
-        <div class="level_title">结果分析</div>
-        <div class="level_tips">等级分布</div>
-        <div class="reslut_display">
+      </div>
+      <div class="level_title">结果分析</div>
+    <div class="level_content">
+        <div class="level_chart">
+          <div class="level_tips">等级分布</div>
           <div id="level_chart"></div>
-          <el-table :data="tableData"
-                    :header-cell-style="{ background:'#F5F7FA'}"
-                    border
-                    >
-            <el-table-column prop="desc" label="绩效等级">
-            </el-table-column>
-            <el-table-column prop="num" label="实际分布" width="200">
-            </el-table-column>
-            <el-table-column label="操作" width="150">
-              <template slot-scope="scope">
-                <el-button
-                  @click.native.prevent="
-                    handleDetailClick(scope.$index, tableData)
-                  "
+        </div>
+        <el-table :data="tableData"
+                  :header-cell-style="{ background:'#F5F7FA'}"
+                  border
+                  style="flex-grow:2;margin-top:20px">
+          <el-table-column prop="desc" label="绩效等级">
+          </el-table-column>
+          <el-table-column prop="num" label="实际分布">
+          </el-table-column>
+          <el-table-column label="操作" width="150">
+            <template slot-scope="scope">
+              <el-button
+                @click.native.prevent="handleDetailClick(scope.$index, scope.row)"
                   type="text"
                   size="small"
                 >
-                  查看详情
+                查看详情
                 </el-button>
               </template>
             </el-table-column>
-          </el-table>
-        </div>
+        </el-table>
       </div>
     </div>
+    </div>
   </div>
 </template>
 
@@ -102,6 +106,8 @@ export default {
       // 当前选择的月份
       pickerTime: '',
       //
+      startId: '',
+      //
       statisticals: [
         {num: '0', desc: '参与人数'},
         {num: '0', desc: '目标制定'},
@@ -255,9 +261,13 @@ export default {
         background: color
       }
     },
-    //
+    // 页面跳转
     handleDetailClick (index, rows) {
-
+      this.$router.push({
+        path: ('report-detial'),
+        query: {startId: this.startId, flowProcess: rows.desc}
+      })
+      console.log(this.$router)
     },
     // Y轴坐标计算，取靠近最大值的3的倍数作为上限，然后划分成4个刻度(0为初始刻度)
     handleChartYMul (val) {
@@ -277,7 +287,7 @@ export default {
     },
     //
     handleChange (val) {
-      console.log(val)
+      this.startId = val[1]
       this.handleChartDataReq(val[1])
     },
     // 获取报表内容
@@ -332,10 +342,8 @@ export default {
 
 <style lang='' scoped>
 .report_content {
-  width: fit-content;
-  height: fit-content;
   background: white;
-  border-style: #fcfcfc solid 3px;
+  border: #fcfcfc solid 1px;
   margin-top:20px;
   padding-top:40px;
   padding-left: 20px;
@@ -343,17 +351,13 @@ export default {
 }
 .header {
   background: #fcfcfc;
-  width: fit-content;
+  display: flex;
+  align-items: center;
 }
 .header > div {
-  display: inline-block;
-  width: fit-content;
-  height: fit-content;
-  padding-top: 20px;
-  padding-bottom: 20px;
-  padding-left: 30px;
-  padding-right: 30px;
+  flex-grow: 1;
   text-align: center;
+  padding:20px
 }
 .header > div > div:nth-child(1) {
   color: black;
@@ -369,29 +373,48 @@ export default {
   background: #333333;
   height: 30px;
   width: 1px;
-  margin-top: 20px;
 }
 .num_title{
   margin-top:20px;
   margin-bottom: 25px;
   color: #333333;
 }
-.num_tips > div:nth-child(1) {
-  display: inline-block;
-  color: #3a3a3a;
-  font-size: 14px;
-  width: fit-content;
-  padding-left: 20px;
-  position: relative;
+.chart_content{
+  display: flex;
 }
-.num_tips > div:nth-child(2) {
-  display: inline-block;
+.num_tips{
+  display: flex;
+}
+.num_chart {
+  flex-grow: 1;
+}
+.num_chart>:nth-child(1){
   color: #3a3a3a;
   font-size: 14px;
-  width: fit-content;
-  padding-left: 50%;
-  margin-bottom: 20px;
-  position: relative;
+  padding-left: 20px;
+}
+.num_report {
+  flex-grow: 1;
+  display: flex;
+  flex-direction: column;
+}
+.num_report>:nth-child(1){
+  color: #3a3a3a;
+  font-size: 14px;
+}
+.num_report_list{
+  margin-top: 20px;
+  height: 360px;
+  overflow:auto
+}
+.rep_list{
+  width: 200px;
+  display: flex;
+  margin-bottom: 10px;
+  justify-content: space-between;
+}
+.rep_list>:nth-child(2){
+  text-align: start;
 }
 .level_title{
   margin-top:20px;
@@ -408,25 +431,19 @@ export default {
 .num_report{
   display: flex
 }
-.rep_list{
-  display: flex;
-}
-.rep_list>:nth-child(2){
-    width: 200px;
-    margin-left: 10px;
-    flex:1
-}
 #num_chart {
-  display: inline-block;
-  width: 600px;
+  widows: 500px;
   height: 360px;
 }
-.reslut_display {
+.level_content{
   display: flex;
 }
+.level_chart {
+  display: flex;
+  flex-grow: 1;
+}
 #level_chart {
-  width: 600px;
+  width: 500px;
   height: 360px;
-  flex: 1;
 }
 </style>