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:
  优化
  优化
  添加报表详情页面

src/api/assessment.js

@@ -17,3 +17,21 @@ export function apiDeleteAssessList (query) {
     params: query
   })
 }
+
+// 获取考核详情列表人数统计
+export function apiChartList (query) {
+  return request({
+    url: '/lz_management/performance/assess/manager/chart',
+    method: 'post',
+    data: query
+  })
+}
+
+// 获取考核详情列表
+export function apiManagerDetail (query) {
+  return request({
+    url: '/lz_management/performance/assess/manager/detail',
+    method: 'post',
+    data: query
+  })
+}

src/api/report.js

@@ -4,8 +4,8 @@ import requestFuc from '@/utils/request'
 export function getChartData (query) {
   return requestFuc({
     url: '/lz_management/performance/chart/result',
-    method: 'POST',
+    method: 'get',
-    data: query
+    params: query
   })
 }
 

src/style/public.less

@@ -47,3 +47,6 @@ a:hover img{ border:none;}
 * html .clearfix { height: 1%;}
 .clearfix {display: block;}
 /* End hide from IE-mac */
+div{
+    box-sizing: border-box;
+}

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

@@ -164,7 +164,7 @@ export default {
       this.handleGetData(Object.assign({}, this.form, this.params))
     },
     handlePush (id) {
-      this.$router.push({name: 'assessment-stepList', query: {id: 10, name: 'workbench-home'}})
+      this.$router.push({name: 'assessment-stepList', query: {id: 10}})
     },
     async handleGetData (parmas = this.params) {
       try {

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

@@ -3,24 +3,25 @@
     <div class="step">
          <small-nav :showTitle='false'>
            <div slot="content">
-            <el-cascader size="small" :props="props"></el-cascader>
+            <el-cascader size="mini" :props="props" :options="timeOptions" @change="handleChange"></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"  @click="handleChoose" plain>{{formTitle}}<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-button size="small" @click="kaopingFrom.showRight = true" 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>
+                <!-- handleGetList handleChoose -->
+                <el-button size="small"  @click="handleGetList"  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>
+                <span class="hover" :class="{active:i.active}" @click="handleActive(i)" style="cursor: pointer;">{{i.desc}}( {{i.num}} )</span>
                 <div v-if="index<titleList.length-1" class="step-content-center-item-img">
                   <div v-if="titleList.length>2 && index===0" class='shuxian'></div>
                   <i v-else  class="el-icon-arrow-right"></i>
@@ -57,15 +58,60 @@
               </el-table>
             </div>
          </div>
+         <popup-right v-if="kaopingFrom.showRight" @cancel='handleCancel' @submit="handleSubmit" title="考评组筛选">
+            <div slot="content" class="chooseManage">
+              66
+              <!-- <div v-for="i in GroundList" :key="i.staffId" class="chooseManage-item" >
+                  <el-checkbox :true-label='1' :false-label='0' :disabled='i.isDisable===1' :checked='i.isDisable===1' v-model='i.isSelect'></el-checkbox><span class='commonFont' style="margin:0 0 0 10px;">{{i.staffName}} </span>
+              </div> -->
+            </div>
+          </popup-right>
+         <getPersonnel v-if="form.isShowPersonnel" :value.sync='params.staffIds'  :isShow.sync='form.isShowPersonnel' :showDataList.sync='form.personnelList'/>
     </div>
 </template>
 
 <script>
 import SmallNav from '@/components/kpi-layout/SmallNav'
+import getPersonnel from '@/components/getPersonnel'
+import PopupRight from '@/components/PopupRight'
+import { apiManagerDetail, apiChartList } from '@/api/assessment'
+import { getStartsData } from '@/api/report'
 let id = 0
 export default {
   data () {
     return {
+      kaopingFrom: {
+        showRight: false
+      },
+      form: {
+        isShowPersonnel: false,
+        personnelList: {
+          list: []
+        }
+      },
+      params: {
+        'currPage': 1,
+        // 'evaluationIds': '',
+        'flowProcess': 0,
+        'pageSize': 10,
+        // 'staffIds': '',
+        // 'staffName': '',
+        'startId': 10
+      },
+      timeOptions: [{
+        startId: 0,
+        time: '月底',
+        children: []
+      }, {
+        startId: 1,
+        time: '自定义',
+        children: []
+      }],
+      //
+      props: {
+        value: 'startId',
+        label: 'time'
+      },
       tableData: [{
         date: '2016-05-02',
         name: '王小虎',
@@ -84,62 +130,79 @@ export default {
         address: '上海市普陀区金沙江路 1516 弄'
       }],
       formInline: {},
-      titleList: [{
+      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) => {
-          console.log(this)
-          console.log('node: ', node)
-          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
+    SmallNav,
+    getPersonnel,
+    PopupRight
+  },
+  computed: {
+    formTitle () {
+      return this.form.personnelList.list.length > 0 ? this.form.personnelList.title + '等' + this.form.personnelList.list.length + '人' : '选择部门'
+    }
   },
-  computed: {},
   beforeMount () {},
-  mounted () {},
+  mounted () {
-  methods: {},
+    this.handleGetChartList()
+    this.handleStartsReq()
+  },
+  methods: {
+    // 为了不分页直接传999
+    async handleStartsReq (type, handleNode) {
+      let params = {
+        currentPage: 1,
+        cycleType: type,
+        pageSize: 999
+      }
+      for (let j in this.timeOptions) {
+        try {
+          let res = await getStartsData({
+            currentPage: 1,
+            cycleType: this.timeOptions[j].startId,
+            pageSize: 999
+          })
+          res = res.data
+          console.log('res: ', res)
+          this.timeOptions[j].children = res.list
+        } catch (error) {
+          console.log(error)
+        }
+      }
+    },
+    handleChange (item) {
+      console.log('item: ', item)
+    },
+    handleSubmit () {
+      this.kaopingFrom.showRight = false
+    },
+    handleCancel () {
+      this.kaopingFrom.showRight = false
+    },
+    // 选择部门
+    handleChoose () {
+      this.form.isShowPersonnel = true
+    },
+    handleGetList () {
+      console.log('1', this.form.personnelList)
+    },
+    handleActive (i) {
+      this.titleList = this.titleList.map(j => {
+        j.active = false
+        return j
+      })
+      i.active = true
+    },
+    // 获取tabbar
+    async handleGetChartList (params = this.params) {
+      let res = await apiChartList(params)
+      if (res.code !== 200) return
+      this.titleList = res.data
+      this.titleList[0].active = true
+      console.log('res: ', res)
+    }
+  },
   watch: {}
 
 }
@@ -187,7 +250,7 @@ export default {
       &-img{
         .center();
         height: 20px;
-        margin: 0 56px;
+        margin: 0 40px;
         img{
           width: 100%;
           height: 100%;

src/views/kpi/report/detail.vue

@@ -0,0 +1,40 @@
+<!--  -->
+<template>
+   <div>
+     <div>返回</div>
+     <span></span>
+     <div>等级分布详情<div>
+   </div>
+   <div>
+    <el-cascader></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>
+    </el-table>
+   </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+
+    }
+  },
+  computed: {},
+  beforeMount () {},
+  mounted () {},
+  methods: {},
+  watch: {}
+
+}
+
+</script>
+
+<style lang='' scoped>
+
+</style>

src/views/kpi/report/index.vue

@@ -1,41 +1,42 @@
 <!--  -->
 <template>
   <div class="block">
-    <el-cascader :props="props" :options="timeOptions"></el-cascader>
+    <el-cascader :props="props" :options="timeOptions" @change="handleChange">
+    </el-cascader>
     <div class="report_content">
       <div class="header">
         <div>
-          <div>7</div>
+          <div>{{statisticals[0].num}}</div>
-          <div>参与人数</div>
+          <div>{{statisticals[0].desc}}</div>
         </div>
         <span></span>
         <div>
-          <div>7</div>
+          <div>{{statisticals[1].num}}</div>
-          <div>目标定制</div>
+          <div>{{statisticals[1].desc}}</div>
         </div>
         <div>
-          <div>1</div>
+          <div>{{statisticals[2].num}}</div>
-          <div>目标确认</div>
+          <div>{{statisticals[2].desc}}</div>
         </div>
         <div>
-          <div>7</div>
+          <div>{{statisticals[3].num}}</div>
-          <div>执行中</div>
+          <div>{{statisticals[3].desc}}</div>
         </div>
         <div>
-          <div>7</div>
+          <div>{{statisticals[4].num}}</div>
-          <div>结果值录入</div>
+          <div>{{statisticals[4].desc}}</div>
         </div>
         <div>
-          <div>7</div>
+          <div>{{statisticals[4].num}}</div>
-          <div>评分</div>
+          <div>{{statisticals[4].desc}}</div>
         </div>
         <div>
-          <div>7</div>
+          <div>{{statisticals[4].num}}</div>
-          <div>考核结束</div>
+          <div>{{statisticals[4].desc}}</div>
         </div>
       </div>
       <div>
-        <div>考核人数分析</div>
+        <div class="num_title">考核人数分析</div>
         <div class="num_tips">
           <div>考核人数分析</div>
           <div>参与考核部门人数</div>
@@ -43,28 +44,26 @@
         <div class="num_report">
           <div id="num_chart"></div>
           <ul>
-            <li v-for="(dep, index) in deps" :key="dep.id">
+            <li v-for="(assessItem, index) in assessNum" :key="assessItem.desc">
-              <div
+              <div class="rep_list">
-                :class="{
+                <div :class="handleliColor(index)">{{ index }}
-                  width: '20px',
+                </div>
-                  height: '20px',
+                <div>{{ assessItem.title }} {{ assessItem.num }}人</div>
-                  background: handleliColor(index)
+                </div>
-                }"
-              >
-                {{ index }}
-              </div>
-              <div>{{ dep.title }} {{ dep.num }}人</div>
             </li>
           </ul>
         </div>
-        <div>结果分析</div>
+        <div class="level_title">结果分析</div>
-        <div>等级分布</div>
+        <div class="level_tips">等级分布</div>
         <div class="reslut_display">
           <div id="level_chart"></div>
-          <el-table :data="tableData" style="display: inline-block;">
+          <el-table :data="tableData"
-            <el-table-column prop="level" label="绩效等级" width="200">
+                    :header-cell-style="{ background:'#F5F7FA'}"
+                    border
+                    style="flex:1">
+            <el-table-column prop="desc" label="绩效等级" width="200">
             </el-table-column>
-            <el-table-column prop="layout" label="实际分布" width="200">
+            <el-table-column prop="num" label="实际分布" width="200">
             </el-table-column>
             <el-table-column label="操作" width="150">
               <template slot-scope="scope">
@@ -89,17 +88,32 @@
 <script>
 // 引入基本模板
 import { getChartData, getStartsData } from '@/api/report'
-let echarts = require('echarts/lib/echarts')
+// 引入 ECharts 主模块
+var echarts = require('echarts/lib/echarts')
+// 引入柱状图
+require('echarts/lib/chart/bar')
+// 引入提示框和标题组件
+require('echarts/lib/component/tooltip')
+require('echarts/lib/component/title')
 
 export default {
   data () {
     return {
       // 当前选择的月份
       pickerTime: '',
+      //
+      statisticals: [
+        {num: '0', desc: '参与人数'},
+        {num: '0', desc: '目标制定'},
+        {num: '0', desc: '目标确认'},
+        {num: '0', desc: '执行中'},
+        {num: '0', desc: '结果值录入'},
+        {num: '0', desc: '评分'},
+        {num: '0', desc: '考核结束'}],
       // 表格内容
       tableData: [],
-      //
+      // 考核人数
-      deps: [],
+      assessNum: [],
       //
       value: [],
       timeOptions: [{
@@ -115,22 +129,17 @@ export default {
       props: {
         lazy: true,
         lazyLoad: (node, resolve) => {
-          const { level } = node
+          console.log('aaaa')
-          let type = node.data.val
+          // 获取节点类型
-          console.log(this)
+          let type = node.data.value
+          // 请求获取2级列表
           this.handleStartsReq(type, function (reslut) {
-            console.log('aaaaaaa')
+            const childNode = Array.from(reslut.list).map(item => ({
-            if (reslut.data.code === 200) {
+              value: item.startId,
-              const childNode = Array.from(reslut.data.list).map(item => ({
+              label: item.time,
-                value: item.desc,
+              leaf: true
-                lable: item.num,
+            }))
-                leaf: level >= 2
+            resolve(childNode)
-              }))
-              resolve(childNode)
-            } else {
-              const childNode = []
-              resolve(childNode)
-            }
           })
         }
       },
@@ -172,7 +181,7 @@ export default {
           }
         ]
       },
-      //
+      // 等级分布数据报表持有类
       levelOption: {
         color: ['#3398DB'],
         tooltip: {
@@ -203,7 +212,7 @@ export default {
         ],
         series: [
           {
-            name: '',
+            name: '直接访问',
             type: 'bar',
             barWidth: '60%',
             data: []
@@ -213,25 +222,36 @@ export default {
     }
   },
   computed: {
-    // 背景色计算
-    handleliColor (pos) {
-      switch (pos) {
-        case 0:
-          return '#ff7705'
-        case 1:
-          return '#ff8b22'
-        case 2:
-          return '#ff9e45'
-        default:
-          return '#bcbcbc'
-      }
-    }
   },
   beforeMount () { },
   mounted () {
-
+    this.handleChartDataReq()
+    this.handleLevelChart()
   },
   methods: {
+    // 背景色计算
+    handleliColor (val) {
+      let color
+      switch (val) {
+        case 0:
+          color = '#ff7705'
+          break
+        case 1:
+          color = '#ff8b22'
+          break
+        case 2:
+          color = '#ff9e45'
+          break
+        default:
+          color = '#bcbcbc'
+          break
+      }
+      return {
+        width: '20px',
+        height: '20px',
+        background: color
+      }
+    },
     //
     handleDetailClick (index, rows) {
 
@@ -252,11 +272,41 @@ export default {
       let levelChart = echarts.init(document.getElementById('level_chart'))
       levelChart.setOption(this.levelOption)
     },
-    // 获取报表内容
+    //
-    handleChartDataReq () {
+    handleChange (val) {
-      getChartData()
+      console.log(val)
+      this.handleChartDataReq(val[1])
+    },
+    // 获取报表内容
+    async handleChartDataReq (startId) {
+      let params = {
+        startId: startId
+      }
+      try {
+        const result = await getChartData(params)
+        result.forEach((val, index) => {
+          console.log(val)
+          if (val.type === 0) {
+            // 头部数据
+            this.statisticals = val.statisticals
+          } else if (val.type === 1) {
+            // 等级分布数据
+            this.tableData = val.statisticals
+            this.levelOption.series[0].data = Array.from(this.tableData).map(item => (item.num))
+            this.levelOption.xAxis[0].data = Array.from(this.tableData).map(item => (item.desc))
+            this.handleLevelChart()
+          } else if (val.type === 2) {
+            // 报表数据
+            this.assessNum = val.statisticals
+            this.option.series[0].data = Array.from(this.assessNum).map(item => (item.num))
+            this.option.xAxis[0].data = Array.from(this.assessNum).map(item => (item.desc))
+            this.handleNumChart()
+          }
+        })
+      } catch (error) {
+        console.log(error)
+      }
     },
-
     // 为了不分页直接传999
     async handleStartsReq (type, handleNode) {
       let params = {
@@ -283,12 +333,34 @@ export default {
   height: fit-content;
   background: white;
   border-style: #fcfcfc solid 3px;
-  margin-top: 20px;
+  margin-top:20px;
+  padding-top:40px;
+  padding-left: 20px;
+  padding-right: 20px;
 }
 .header {
   background: #fcfcfc;
   width: fit-content;
 }
+.header > div {
+  display: inline-block;
+  width: fit-content;
+  height: fit-content;
+  padding-top: 20px;
+  padding-bottom: 20px;
+  padding-left: 30px;
+  padding-right: 30px;
+  text-align: center;
+}
+.header > div > div:nth-child(1) {
+  color: black;
+  font-weight: bold;
+  font-size: 20px;
+}
+.header > div > div:nth-child(2) {
+  color: #3a3a3a;
+  font-size: 14px;
+}
 .header > span {
   display: inline-block;
   background: #333333;
@@ -296,25 +368,14 @@ export default {
   width: 1px;
   margin-top: 20px;
 }
-.header > div {
+.num_title{
-  display: inline-block;
+  margin-top:20px;
-  width: 200px;
+  margin-bottom: 25px;
-  height: 100px;
+  color: #333333;
-  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;
+  color: #3a3a3a;
   font-size: 14px;
   width: fit-content;
   padding-left: 20px;
@@ -322,12 +383,30 @@ export default {
 }
 .num_tips > div:nth-child(2) {
   display: inline-block;
-  color: #333333;
+  color: #3a3a3a;
   font-size: 14px;
   width: fit-content;
   padding-left: 50%;
   position: relative;
 }
+.level_title{
+  margin-top:20px;
+  margin-bottom: 25px;
+  color: #333333;
+}
+.level_tips{
+  color: #3a3a3a;
+  font-size: 14px;
+  width: fit-content;
+  padding-left: 20px;
+  position: relative;
+}
+.num_report{
+  display: flex
+}
+.rep_list{
+  display: flex;
+}
 #num_chart {
   display: inline-block;
   width: 600px;
@@ -337,7 +416,6 @@ export default {
   display: flex;
 }
 #level_chart {
-  display: inline-block;
   width: 600px;
   height: 360px;
   flex: 1;