Merge branch 'v_1.0.0' of http://gitlab.ldxinyong.com/enterpriseManagement/digitization-ui into v_1.0.0

* 'v_1.0.0' of http://gitlab.ldxinyong.com/enterpriseManagement/digitization-ui:
  添加绩效报表页面
  优化

# Conflicts:
#	src/utils/elementConfig.js

src/api/assessment.js

@@ -0,0 +1,19 @@
+import request from '@/utils/request'
+
+// 考核任务列表
+export function apiGetAssessList (query) {
+  return request({
+    url: '/lz_management/performance/assess/manager/list',
+    method: 'post',
+    data: query
+  })
+}
+
+// 删除考核任务
+export function apiDeleteAssessList (query) {
+  return request({
+    url: '/lz_management/performance/assess/manager/delete',
+    method: 'get',
+    params: query
+  })
+}

src/api/report.js

@@ -0,0 +1,19 @@
+import requestFuc from '@/utils/request'
+
+// 获取考核组列表
+export function getChartData(query) {
+	return requestFuc({
+		url: '/lz_management/performance/chart/result',
+		method: 'POST',
+		data: query
+	})
+}
+
+// 获取绩效排名
+export function getStartsData(query) {
+	return requestFuc({
+		url: '/lz_management/performance/chart/starts',
+		method: 'POST',
+		data: query
+	})
+}

src/components/kpi-layout/AppMain.vue

@@ -26,9 +26,10 @@ export default {
 </script>
 <style lang='less' scoped>
 .appamin{
-  flex: 1;
+  // flex: 1;
+  background: #f4f4f4;
   box-sizing: border-box;
-  padding: 30px 80px;
+  padding: 90px 80px 30px;
 }
 
 </style>

src/components/kpi-layout/NavBar.vue

@@ -77,7 +77,7 @@ export default {
     left: 0;
   }
 .navBar{
-  position: relative;
+  position: fixed;
   z-index: 4;
   width: 100%;
   height: @headerHeight;

src/components/kpi-layout/SmallNav.vue

@@ -1,13 +1,20 @@
 <!--  -->
 <template>
     <div class="smallNav">
-      <span @click="handleBack" class="smallNav-back">返回</span>
+      <span @click="handleBack" class="smallNav-back a">返回</span>
-      <span class="commonFont smallNav-title a">{{title}}</span>
+      <span v-if="showTitle" class="commonFont smallNav-title commonFont">{{title}}</span>
+      <slot name='content'></slot>
     </div>
 </template>
 
 <script>
 export default {
+  props: {
+    showTitle: {
+      type: Boolean,
+      default: true
+    }
+  },
   data () {
     return {
 
@@ -34,7 +41,10 @@ export default {
 <style lang='less' scoped>
 .smallNav{
   height: 40px;
+  display: flex;
+  align-items: center;
   &-back{
+    padding-right: 10px;
     margin-right: 10px;
     color: #aaaaaa;
     cursor: pointer;
@@ -44,16 +54,19 @@ export default {
     position: relative;
 
   }
+  .a{
+    position: relative;
+  }
   .a::before{
       content:"";
       position: absolute;
-      left: 0;
+      right: 0;
       top: 0;
       bottom: 0;
       margin: auto;
-      height: 70%;
+      height: 80%;
       // background: red;
-      border-left: 1px solid #aaaaaa;
+      border-right: 1px solid #aaaaaa;
     }
 }
 </style>

src/router/kpi_route.js

@@ -61,7 +61,35 @@ export default [
       meta: {
         title: '考核管理',
         isNav: true
+      },
+      redirect: 'assessment/homeList',
+      children: [{
+        path: 'homeList',
+        name: 'assessment-homeList',
+        component: (resolve) => require(['@/views/kpi/assessment/homeList/index.vue'], resolve),
+        meta: {
+          title: '考核管理',
+          isNav: true
+        }
+      }, {
+        path: 'stepList',
+        name: 'assessment-stepList',
+        component: (resolve) => require(['@/views/kpi/assessment/stepList/index.vue'], resolve),
+        meta: {
+          title: '考核管理',
+          isNav: true
+        }
+      },
+      {
+        path: 'performance',
+        name: 'assessment-performance',
+        component: (resolve) => require(['@/views/kpi/assessment/performance/index.vue'], resolve),
+        meta: {
+          title: '员工绩效详情',
+          isNav: true
+        }
       }
+      ]
     }, {
       path: 'initiate',
       name: 'initiate',

src/utils/elementConfig.js

@@ -1,41 +1,40 @@
 import Vue from 'vue'
 import {
-  Button,
+	Button,
-  MessageBox,
+	MessageBox,
-  Message,
+	Message,
-  Table,
+	Table,
-  TableColumn,
+	TableColumn,
-  Form,
+	Form,
-  FormItem,
+	FormItem,
-  Input,
+	Input,
-  Select,
+	Select,
-  Option,
+	Option,
-  RadioGroup,
+	RadioGroup,
-  DatePicker,
+	DatePicker,
-  CheckboxGroup,
+	CheckboxGroup,
-  Switch,
+	Switch,
-  TimePicker,
+	TimePicker,
-  Col,
+	Col,
-  Checkbox,
+	Checkbox,
-  Radio,
+	Radio,
-  Dropdown,
+	Dropdown,
-  DropdownMenu,
+	DropdownMenu,
-  DropdownItem,
+	DropdownItem,
-  Dialog,
+	Dialog,
-  Tree,
+	Tree,
-  Tag,
+	Tag,
-  Tooltip,
+	Tooltip,
-  Popover,
+	Popover,
-  Pagination,
+	Pagination,
-  Menu,
+	Cascader
-  MenuItem
-
 } from 'element-ui'
 
 Vue.prototype.$message = Message
 Vue.prototype.$confirm = MessageBox.confirm
 Vue.prototype.$alert = MessageBox.alert
 
+Vue.use(Cascader)
 Vue.use(Pagination)
 Vue.use(Popover)
 Vue.use(Tooltip)
@@ -61,5 +60,4 @@ Vue.use(Radio)
 Vue.use(Dropdown)
 Vue.use(DropdownMenu)
 Vue.use(DropdownItem)
-Vue.use(Menu)
+Vue.use(Cascader)
-Vue.use(MenuItem)

src/views/kpi/assessment/homeList/index.vue

@@ -0,0 +1,236 @@
+<!--  -->
+<template>
+    <div class="assessment">
+      <div class="assessment-form">
+        <el-form ref="form" inline :model="form" >
+          <div>
+            <el-form-item >
+              <el-select  size="small"  v-model="form.cycleType" placeholder="请选择" style="width:100px">
+                <el-option
+                  v-for="item in options"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value">
+                </el-option>
+              </el-select>
+            </el-form-item>
+            <el-form-item >
+              <el-input @change="handleChange" @keyup.enter="handleChange"   size="small"  clearable prefix-icon="el-icon-search" v-model="form.name" placeholder="搜索考核名称"></el-input>
+            </el-form-item>
+          </div>
+          <div>
+            <el-form-item >
+              <el-button type="primary"  size="small"  @click="handlePush">发起考核</el-button>
+            </el-form-item>
+            <!-- <el-form-item >
+              <el-button  size="small"  >导入历史绩效</el-button>
+            </el-form-item> -->
+          </div>
+        </el-form>
+      </div>
+      <div class="assessment-table">
+        <el-table
+        :header-cell-style="{background:'#F5F7FA'}"
+        @row-click='handleSelectClick'
+        :data="tableData"
+        style="width: 100%">
+        <el-table-column
+          fixed
+          prop="name"
+          label="考核名称">
+        </el-table-column>
+        <el-table-column
+          prop="cycleTime"
+          label="时间周期">
+        </el-table-column>
+        <el-table-column
+          prop="joinNum"
+          label="参与人数">
+        </el-table-column>
+        <el-table-column
+          fixed="right"
+          label="操作"
+          width="120">
+          <template slot-scope="scope">
+            <el-button
+               @click="handlePush(scope.row.id)"
+              type="text"
+              size="small">
+              编 辑
+            </el-button>
+            <el-button
+              @click="handleDelete(scope.row.id)"
+              type="text"
+              size="small">
+              删 除
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <div class="footer">
+        <el-pagination
+            small
+            @current-change="handleChangePage"
+            layout="prev, pager, next"
+            :page-size.sync='params.pageSize'
+            :total="params.totalCount">
+          </el-pagination>
+      </div>
+      </div>
+    </div>
+</template>
+
+<script>
+import {apiGetAssessList, apiDeleteAssessList} from '@/api/assessment'
+console.log('apiGetAssessList: ', apiGetAssessList)
+export default {
+  components: {
+  },
+  data () {
+    return {
+      params: {
+        'currPage': 1,
+        'pageSize': 5
+      },
+      show: false,
+      options: [ {
+        value: '',
+        label: '全部'
+      }, {
+        value: 0,
+        label: '月度'
+      },
+      {
+        value: 1,
+        label: '自定义'
+      }
+      ],
+      form: {
+        cycleType: ''
+      },
+      tableData: [{
+        date: '2016-05-03',
+        name: '2020年01月绩效考核',
+        number: '10'
+      }, {
+        date: '2016-05-03',
+        name: '2020年02月绩效考核',
+        number: '10'
+      }, {
+        date: '2016-05-03',
+        name: '2020年03月绩效考核',
+        number: '10'
+      }, {
+        date: '2016-05-03',
+        name: '2020年01月绩效考核',
+        number: '10'
+      }, {
+        date: '2016-05-03',
+        name: '2020年01月绩效考核',
+        number: '10'
+      }, {
+        date: '2016-05-03',
+        name: '2020年01月绩效考核',
+        number: '10'
+      }, {
+        date: '2016-05-03',
+        name: '2020年01月绩效考核',
+        number: '10'
+      }]
+    }
+  },
+  computed: {},
+  beforeMount () {},
+  mounted () {
+    this.form.value = this.options[0].value
+    this.handleGetData()
+  },
+  methods: {
+    async handleDelete (item) {
+      try {
+        await apiDeleteAssessList({assessId: item})
+        this.handleGetData()
+        this.$message({
+          message: '成功',
+          type: 'success'
+        })
+      } catch (error) {
+        this.$message.error(error.msg)
+      }
+    },
+    handleChange (value) {
+      this.params.currPage = 1
+      console.log(' this.form: ', this.form)
+      this.handleGetData(Object.assign({}, this.form, this.params))
+    },
+    handlePush (id) {
+      this.$router.push({name: 'assessment-stepList', query: {id}})
+    },
+    async handleGetData (parmas = this.params) {
+      try {
+        const res = await apiGetAssessList(parmas)
+        console.log('res: ', res)
+        this.tableData = res.list
+        this.params.totalCount = res.totalCount
+        this.params.currPage = res.currPage
+      } catch (error) {
+        console.log('error: ', error)
+      }
+    },
+    handleChangePage (value) {
+      this.params.currPage = value
+      this.handleGetData()
+    },
+    handleRight () {
+      this.show = true
+    },
+    handleSelectClick (row, column, event) {
+      console.log('event: ', event)
+      console.log('column: ', column)
+      console.log('row: ', row)
+    },
+    handleToHome (i) {
+      this.$router.push({name: i})
+    },
+    deleteRow (index, rows) {
+      rows.splice(index, 1)
+    }
+  },
+  watch: {
+    'form.cycleType' (n, o) {
+      this.handleChange()
+    }
+  }
+
+}
+
+</script>
+
+<style lang='less' scoped>
+.assessment{
+
+  .footer{
+    text-align: right;
+    margin: 20px 0 0 0;
+  }
+  .el-form{
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+  &-form{
+    padding: 4px 0;
+  }
+
+  &-table{
+    background: #fff;
+    padding: 20px;
+    border: 1px solid @borderColor;
+  }
+}
+</style>
+<style lang="less">
+  .el-table__row{
+    cursor:pointer;
+  }
+</style>

src/views/kpi/assessment/index.vue

@@ -1,180 +1,27 @@
 <!--  -->
 <template>
-    <div class="assessment">
+    <div>
-      <div class="assessment-form">
+        <router-view></router-view>
-        <el-form ref="form" inline :model="form" >
-          <div>
-            <el-form-item >
-              <el-select  size="small"  v-model="form.value" placeholder="请选择" style="width:100px">
-                <el-option
-                  v-for="item in options"
-                  :key="item.value"
-                  :label="item.label"
-                  :value="item.value">
-                </el-option>
-              </el-select>
-            </el-form-item>
-            <el-form-item >
-              <el-input  size="small"  clearable prefix-icon="el-icon-search" v-model="form.name" placeholder="搜索考核名称"></el-input>
-            </el-form-item>
-          </div>
-          <div>
-            <el-form-item >
-              <el-button type="primary"  size="small"  @click="handleRight">发起考核</el-button>
-            </el-form-item>
-            <el-form-item >
-              <el-button  size="small"  >导入历史绩效</el-button>
-            </el-form-item>
-          </div>
-        </el-form>
-      </div>
-      <div class="assessment-table">
-        <el-table
-        :header-cell-style="{background:'#F5F7FA'}"
-        @row-click='handleSelectClick'
-        :data="tableData"
-        style="width: 100%">
-        <el-table-column
-          fixed
-          prop="name"
-          label="考核名称">
-        </el-table-column>
-        <el-table-column
-          prop="date"
-          label="时间周期">
-        </el-table-column>
-        <el-table-column
-          prop="number"
-          label="参与人数">
-        </el-table-column>
-        <el-table-column
-          fixed="right"
-          label="操作"
-          width="120">
-          <template slot-scope="scope">
-            <el-button
-              @click.native.prevent="deleteRow(scope.$index, tableData)"
-              type="text"
-              size="small">
-              查看
-            </el-button>
-          </template>
-        </el-table-column>
-      </el-table>
-      </div>
-      <popup-set :show.sync='show'></popup-set>
-      <!-- 考核管理
-      <el-button type="success" @click="handleToHome('home')">去二级页面</el-button>
-      <el-button type="success" @click="handleToHome('home1')">去二级页面带弹窗</el-button> -->
     </div>
 </template>
 
 <script>
-import popupSet from './components/popup'
 export default {
-  components: {
-    popupSet
-  },
   data () {
     return {
-      show: false,
+
-      options: [
-        {
-          value: '1',
-          label: '全部'
-        }, {
-          value: '2',
-          label: '月度'
-        }, {
-          value: '3',
-          label: '季度'
-        }, {
-          value: '4',
-          label: '半年度'
-        }, {
-          value: '5',
-          label: '年度'
-        }
-      ],
-      form: {},
-      tableData: [{
-        date: '2016-05-03',
-        name: '2020年01月绩效考核',
-        number: '10'
-      }, {
-        date: '2016-05-03',
-        name: '2020年02月绩效考核',
-        number: '10'
-      }, {
-        date: '2016-05-03',
-        name: '2020年03月绩效考核',
-        number: '10'
-      }, {
-        date: '2016-05-03',
-        name: '2020年01月绩效考核',
-        number: '10'
-      }, {
-        date: '2016-05-03',
-        name: '2020年01月绩效考核',
-        number: '10'
-      }, {
-        date: '2016-05-03',
-        name: '2020年01月绩效考核',
-        number: '10'
-      }, {
-        date: '2016-05-03',
-        name: '2020年01月绩效考核',
-        number: '10'
-      }]
     }
   },
   computed: {},
   beforeMount () {},
-  mounted () {
+  mounted () {},
-    this.form.value = this.options[0].value
+  methods: {},
-  },
-  methods: {
-    handleRight () {
-      this.show = true
-    },
-    handleSelectClick (row, column, event) {
-      console.log('event: ', event)
-      console.log('column: ', column)
-      console.log('row: ', row)
-    },
-    handleToHome (i) {
-      this.$router.push({name: i})
-    },
-    deleteRow (index, rows) {
-      rows.splice(index, 1)
-    }
-  },
   watch: {}
 
 }
 
 </script>
 
-<style lang='less' scoped>
+<style lang='' scoped>
-.assessment{
-  .el-form{
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-  }
-  &-form{
-    padding: 4px 0;
-  }
 
-  &-table{
-    background: #fff;
-    padding: 20px;
-    border: 1px solid @borderColor;
-  }
-}
-</style>
-<style lang="less">
-  .el-table__row{
-    cursor:pointer;
-  }
 </style>

src/views/kpi/assessment/performance/index.vue

@@ -0,0 +1,148 @@
+<!--  -->
+<template>
+    <div class="performance">
+        <SmallNav />
+        <div class="performance-content boderAndRadius">
+          <div class="performance-content-top">
+            <div class="performance-content-top-left">
+               <el-select size="small" v-model="form.value" placeholder="请选择">
+                  <el-option
+                    v-for="item in options"
+                    :key="item.value"
+                    :label="item.label"
+                    :value="item.value">
+                  </el-option>
+                </el-select>
+            </div>
+            <div class="performance-content-top-right">
+               <el-button size="small" plain>沟通管理</el-button>
+               <el-button size="small" plain>管理</el-button>
+            </div>
+          </div>
+          <div class="performance-content-center">
+              <div class="performance-content-center-item" v-for="i in 10"></div>
+          </div>
+          <div class="performance-content-bottom">
+              <el-table
+                :data="tableData"
+                :header-cell-style="{background:'#F5F7FA'}"
+                border
+                style="width: 100%">
+                <el-table-column
+                  prop="date"
+                  label="日期"
+                  align="center"
+                  width="180">
+                  <template slot-scope="scope">
+                    <div>
+                      <div v-for="(i,index) in scope.row.date" :key="index">{{i}}</div>
+                    </div>
+                  </template>
+                </el-table-column>
+                <el-table-column
+                  prop="name"
+                  label="姓名"
+                  align="center"
+                  width="180">
+                </el-table-column>
+                <el-table-column
+                  prop="address"
+                  align="center"
+                  label="地址">
+                </el-table-column>
+              </el-table>
+          </div>
+          <div class="performance-content-jilu">
+            ss
+          </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import SmallNav from '@/components/kpi-layout/SmallNav'
+export default {
+  data () {
+    return {
+      form: {},
+      options: [{
+        value: '选项1',
+        label: '黄金糕'
+      }, {
+        value: '选项2',
+        label: '双皮奶'
+      }, {
+        value: '选项3',
+        label: '蚵仔煎'
+      }, {
+        value: '选项4',
+        label: '龙须面'
+      }, {
+        value: '选项5',
+        label: '北京烤鸭'
+      }],
+      tableData: [{
+        date: '2016-05-02',
+        name: '王小虎',
+        address: '上海市普陀区金沙江路 1518 弄'
+      }, {
+        date: '2016-05-04',
+        name: '王小虎',
+        address: '上海市普陀区金沙江路 1517 弄'
+      }, {
+        date: '2016-05-01',
+        name: '王小虎',
+        address: '上海市普陀区金沙江路 1519 弄'
+      }, {
+        date: '2016-05-03',
+        name: '王小虎',
+        address: '上海市普陀区金沙江路 1516 弄'
+      }]
+    }
+  },
+  components: {
+    SmallNav
+  },
+  computed: {},
+  beforeMount () {},
+  mounted () {},
+  methods: {},
+  watch: {}
+
+}
+
+</script>
+
+<style lang='less' scoped>
+.performance{
+  overflow: auto;
+  &-content{
+    padding: 28px;
+    margin: 10px 0;
+    // height: 700px;
+    // overflow: auto;
+    &-top{
+      border-bottom: 1px solid @borderColor;
+      padding-bottom: 20px;
+      margin-bottom: 20px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+    &-center{
+      display: flex;
+      flex-wrap: wrap;
+      margin: 20px 0;
+      &-item{
+        width: 20%;
+        height: 20px;
+        background: #09f;
+        position: relative;
+      }
+    }
+    &-jilu{
+
+    }
+  }
+}
+</style>

src/views/kpi/assessment/stepList/index.vue

@@ -0,0 +1,190 @@
+<!--  -->
+<template>
+    <div class="step">
+         <small-nav :showTitle='false'>
+           <div slot="content">
+            <el-cascader size="small" :props="props"></el-cascader>
+           </div>
+         </small-nav>
+         <div class="step-content boderAndRadius">
+            <div class="step-content-top">
+              <div class="step-content-top-left">
+                <el-button size="small" plain>选择部门<i style="margin-left:10px;" class="el-icon-arrow-down"></i></el-button>
+                <el-button size="small" plain>选择考评组<i style="margin-left:10px;" class="el-icon-arrow-down"></i></el-button>
+                <el-input size="small" style="margin-left:10px;" v-model="formInline.user"  prefix-icon="el-icon-search" placeholder="请输入姓名搜索"></el-input>
+              </div>
+              <div class="step-content-top-right">
+                <el-button size="small"  type="primary">开始评分</el-button>
+                <el-button size="small" plain>更多</el-button>
+              </div>
+            </div>
+            <div  class="step-content-center boderAndRadius">
+              <div class="step-content-center-item commonFont" v-for="(i,index) in titleList" :key="i.id">
+                <span class="hover" style="cursor: pointer;">{{i.name}}({{i.number}})</span>
+                <div v-if="index<titleList.length-1" class="step-content-center-item-img">
+                  <img v-if="titleList.length>2 && index===0"  src="./img/shu.jpg" alt="">
+                  <img v-else  src="./img/right.jpg" alt="">
+                </div>
+              </div>
+            </div>
+            <div>
+              <el-table
+                :data="tableData"
+                style="width: 100%">
+                <el-table-column
+                  prop="date"
+                  label="日期"
+                  align='center'
+                  width="180">
+                </el-table-column>
+                <el-table-column
+                  prop="name"
+                  label="姓名"
+                  align='center'
+                  width="180">
+                </el-table-column>
+                <el-table-column
+                  prop="address"
+                  align='center'
+                  label="地址">
+                   <template slot-scope="scope">
+                    <div>
+                      {{scope.row}}
+                    </div>
+                  </template>
+                </el-table-column>
+
+              </el-table>
+            </div>
+         </div>
+    </div>
+</template>
+
+<script>
+import SmallNav from '@/components/kpi-layout/SmallNav'
+let id = 0
+export default {
+  data () {
+    return {
+      tableData: [{
+        date: '2016-05-02',
+        name: '王小虎',
+        address: '上海市普陀区金沙江路 1518 弄'
+      }, {
+        date: '2016-05-04',
+        name: '王小虎',
+        address: '上海市普陀区金沙江路 1517 弄'
+      }, {
+        date: '2016-05-01',
+        name: '王小虎',
+        address: '上海市普陀区金沙江路 1519 弄'
+      }, {
+        date: '2016-05-03',
+        name: '王小虎',
+        address: '上海市普陀区金沙江路 1516 弄'
+      }],
+      formInline: {},
+      titleList: [{
+        id: 10,
+        name: '全部',
+        number: 5
+      }, {
+        id: 11,
+        name: '全部',
+        number: 5
+      }, {
+        id: 12,
+        name: '全部',
+        number: 5
+      }, {
+        id: 13,
+        name: '全部',
+        number: 5
+      }, {
+        id: 14,
+        name: '全部',
+        number: 5
+      }, {
+        id: 15,
+        name: '全部',
+        number: 5
+      }, {
+        id: 10,
+        name: '全部',
+        number: 5
+      }],
+      props: {
+        lazy: true,
+        lazyLoad (node, resolve) {
+          const { level } = node
+          setTimeout(() => {
+            const nodes = Array.from({ length: level + 1 })
+              .map(item => ({
+                value: ++id,
+                label: `选项${id}`,
+                leaf: level >= 2
+              }))
+              // 通过调用resolve将子节点数据返回，通知组件数据加载完成
+            resolve(nodes)
+          }, 1000)
+        }
+      }
+    }
+  },
+  components: {
+    SmallNav
+  },
+  computed: {},
+  beforeMount () {},
+  mounted () {},
+  methods: {},
+  watch: {}
+
+}
+
+</script>
+
+<style lang='less' scoped>
+.step-content{
+  padding: 28px;
+  width: 100%;
+  margin: 20px 0;
+  height: 537px;
+  background: #fff;
+  &-top{
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    &-left{
+      display: flex;
+      align-items: center;
+    }
+  }
+  &-center{
+    margin: 30px 0;
+    padding: 0 40px;
+    min-height: 40px;
+    background: #f6f6f6;
+    display: flex;
+    flex-wrap: wrap;
+    &-item{
+      height: 40px;
+      .hover:hover{
+        color: @fontBlue;
+      }
+      .active{
+        color: @fontBlue;
+      }
+      .center();
+      &-img{
+        height: 20px;
+        margin: 0 56px;
+        img{
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
+  }
+}
+</style>

src/views/kpi/report/index.vue

@@ -1,27 +1,344 @@
 <!--  -->
 <template>
-    <div>
+  <div class="block">
-         绩效报表
+    <el-cascader :props="props" :options="timeOptions"></el-cascader>
+    <div class="report_content">
+      <div class="header">
+        <div>
+          <div>7</div>
+          <div>参与人数</div>
+        </div>
+        <span></span>
+        <div>
+          <div>7</div>
+          <div>目标定制</div>
+        </div>
+        <div>
+          <div>1</div>
+          <div>目标确认</div>
+        </div>
+        <div>
+          <div>7</div>
+          <div>执行中</div>
+        </div>
+        <div>
+          <div>7</div>
+          <div>结果值录入</div>
+        </div>
+        <div>
+          <div>7</div>
+          <div>评分</div>
+        </div>
+        <div>
+          <div>7</div>
+          <div>考核结束</div>
+        </div>
+      </div>
+      <div>
+        <div>考核人数分析</div>
+        <div class="num_tips">
+          <div>考核人数分析</div>
+          <div>参与考核部门人数</div>
+        </div>
+        <div class="num_report">
+          <div id="num_chart"></div>
+          <ul>
+            <li v-for="(dep, index) in deps" :key="dep.id">
+              <div
+                :class="{
+                  width: '20px',
+                  height: '20px',
+                  background: handleliColor(index)
+                }"
+              >
+                {{ index }}
+              </div>
+              <div>{{ dep.title }} {{ dep.num }}人</div>
+            </li>
+          </ul>
+        </div>
+        <div>结果分析</div>
+        <div>等级分布</div>
+        <div class="reslut_display">
+          <div id="level_chart"></div>
+          <el-table :data="tableData" style="display: inline-block;">
+            <el-table-column prop="level" label="绩效等级" width="200">
+            </el-table-column>
+            <el-table-column prop="layout" 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)
+                  "
+                  type="text"
+                  size="small"
+                >
+                  查看详情
+                </el-button>
+              </template>
+            </el-table-column>
+          </el-table>
+        </div>
+      </div>
     </div>
+  </div>
 </template>
 
 <script>
+// 引入基本模板
+let echarts = require('echarts/lib/echarts')
+import { getChartData, getStartsData } from '@/api/report'
+
 export default {
   data () {
     return {
-
+      // 当前选择的月份
+      pickerTime: '',
+      // 表格内容
+      tableData: [],
+      //
+      deps: [],
+      //
+      value: [],
+      timeOptions: [{
+        value: 0,
+        label: '月底',
+        children: []
+      }, {
+        value: 1,
+        label: '自定义',
+        children: []
+      }],
+      //
+      props: {
+        lazy: true,
+        lazyLoad: (node, resolve) => {
+          const { level } = node;
+          let type = node.data.val
+          console.log(this);
+          this.handleStartsReq(type)
+          // reslut => {
+          //   if (reslut.data.code = 200) {
+          //     const childNode = Array.from(reslut.data.list, map(item => {
+          //       value: item.desc
+          //       lable: item.num
+          //       leaf: level >= 2
+          //     }))
+          //     resolve(childNode)
+          //   } else {
+          //     const childNode = []
+          //     resolve(childNode)
+          //   }
+          // })
+        }
+      },
+      // 考核人数报表持有类
+      option: {
+        color: ['#3398DB'],
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow'
+          }
+        },
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          containLabel: true
+        },
+        xAxis: [
+          {
+            type: 'category',
+            data: [],
+            axisTick: {
+              alignWithLabel: true
+            }
+          }
+        ],
+        yAxis: [
+          {
+            type: 'value'
+          }
+        ],
+        series: [
+          {
+            name: '',
+            type: 'bar',
+            barWidth: '60%',
+            data: []
+          }
+        ]
+      },
+      //
+      levelOption: {
+        color: ['#3398DB'],
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow'
+          }
+        },
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          containLabel: true
+        },
+        xAxis: [
+          {
+            type: 'category',
+            data: [],
+            axisTick: {
+              alignWithLabel: true
+            }
+          }
+        ],
+        yAxis: [
+          {
+            type: 'value'
+          }
+        ],
+        series: [
+          {
+            name: '',
+            type: 'bar',
+            barWidth: '60%',
+            data: []
+          }
+        ]
+      }
+    }
+  },
+  computed: {
+    // 背景色计算
+    handleliColor (pos) {
+      switch (pos) {
+        case 0:
+          return '#ff7705'
+        case 1:
+          return '#ff8b22'
+        case 2:
+          return '#ff9e45'
+        default:
+          return '#bcbcbc'
+      }
+    },
+  },
+  beforeMount () { },
+  mounted () {
+
+  },
+  methods: {
+    //
+    handleDetailClick (index, rows) {
+
+    },
+    // Y轴坐标计算，取靠近最大值的3的倍数作为上限，然后划分成4个刻度(0为初始刻度)
+    handleChartYMul (val) {
+      let max = val
+      max = max + (3 - max % 3)
+      return [0, max / 3 * 1, max / 3 * 2, max]
+    },
+    // 绩效分析
+    handleNumChart () {
+      let numChart = echarts.init(document.getElementById('num_chart'))
+      numChart.setOption(this.option)
+    },
+    // 结果分析
+    handleLevelChart () {
+      let levelChart = echarts.init(document.getElementById('level_chart'))
+      levelChart.setOption(this.levelOption)
+    },
+    // 获取报表内容
+    handleChartDataReq () {
+      getChartData()
+    },
+    //
+    handleChartDataReq () {
+      getRankData()
+    },
+    // 为了不分页直接传999
+    handleStartsReq (type) {
+      let params = {
+        currentPage: 1,
+        cycleType: type,
+        pageSize: 999
+      }
+      getStartsData(params).then(result => {
+        //handleNode(reslut)
+      })
     }
   },
-  computed: {},
-  beforeMount () {},
-  mounted () {},
-  methods: {},
   watch: {}
-
 }
-
 </script>
 
 <style lang='' scoped>
-
+.report_content {
+  width: fit-content;
+  height: fit-content;
+  background: white;
+  border-style: #fcfcfc solid 3px;
+  margin-top: 20px;
+}
+.header {
+  background: #fcfcfc;
+  width: fit-content;
+}
+.header > span {
+  display: inline-block;
+  background: #333333;
+  height: 30px;
+  width: 1px;
+  margin-top: 20px;
+}
+.header > div {
+  display: inline-block;
+  width: 200px;
+  height: 100px;
+  text-align: center;
+}
+.header > div > div:nth-child(1) {
+  color: black;
+  font-weight: bold;
+  margin-top: 30px;
+  size: 20px;
+}
+.header > div > div:nth-child(2) {
+  color: #999999;
+  font-size: 10px;
+}
+.num_tips > div:nth-child(1) {
+  display: inline-block;
+  color: #333333;
+  font-size: 14px;
+  width: fit-content;
+  padding-left: 20px;
+  position: relative;
+}
+.num_tips > div:nth-child(2) {
+  display: inline-block;
+  color: #333333;
+  font-size: 14px;
+  width: fit-content;
+  padding-left: 50%;
+  position: relative;
+}
+#num_chart {
+  display: inline-block;
+  width: 600px;
+  height: 360px;
+}
+.reslut_display {
+  display: flex;
+}
+#level_chart {
+  display: inline-block;
+  width: 600px;
+  height: 360px;
+  flex: 1;
+}
 </style>

src/views/kpi/workbench/assessmentGroup/edit/index.vue

@@ -92,6 +92,7 @@ export default {
       this.$message({
         message: '保存成功',
         type: 'success',
+        duration: 1000,
         onClose: () => {
           this.$router.replace({name: 'workbench-group'})
         }

src/views/kpi/workbench/assessmentGroup/groundTable.vue

@@ -59,7 +59,7 @@
             small
             @current-change="handleChangePage"
             layout="prev, pager, next"
-            page-size.sync='params.pageSize'
+            :page-size.sync='params.pageSize'
             :total="params.totalCount">
           </el-pagination>
       </div>