youhua

config/dev.env.js

@@ -4,5 +4,5 @@ const prodEnv = require('./prod.env')
 
 module.exports = merge(prodEnv, {
   NODE_ENV: '"development"',
-  PROXY:false
+  PROXY: false,
 })

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/utils/elementConfig.js

@@ -29,7 +29,9 @@ import {
   Pagination,
   Cascader,
   Tabs,
-  TabPane
+  TabPane,
+  Menu,
+  MenuItem
 } from 'element-ui'
 
 Vue.prototype.$message = Message
@@ -64,3 +66,6 @@ Vue.use(Radio)
 Vue.use(Dropdown)
 Vue.use(DropdownMenu)
 Vue.use(DropdownItem)
+Vue.use(Cascader)
+Vue.use(Menu)
+Vue.use(MenuItem)

src/views/kpi/report/index.vue

@@ -1,27 +1,344 @@
 <!--  -->
 <template>
+  <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>
+// 引入基本模板
+import { getChartData, getStartsData } from '@/api/report'
+let echarts = require('echarts/lib/echarts')
+
 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, function (reslut) {
+            console.log('aaaaaaa')
+            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()
+    },
+
+    // 为了不分页直接传999
+    async handleStartsReq (type, handleNode) {
+      let params = {
+        currentPage: 1,
+        cycleType: type,
+        pageSize: 999
+      }
+      try {
+        const res = await getStartsData(params)
+        handleNode(res)
+      } catch (error) {
+        console.log(error)
+      }
     }
   },
-  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/set/index.vue

@@ -1,27 +1,54 @@
 <!--  -->
 <template>
-    <div>
+  <div class="set-mian commonFont">
-        设置
+    <el-menu
+      :default-active="activeIndex"
+      mode="horizontal"
+      @select="handleSelect"
+      text-color="#52575b"
+      active-text-color="#3ba1ff"
+    >
+      <el-menu-item index="0">考评组设置</el-menu-item>
+      <el-menu-item index="1">默认值设置</el-menu-item>
+    </el-menu>
+    <ground-table v-if="activeIndex==='0'"></ground-table>
+    <div v-else-if="activeIndex==='1'">
+      <span>默认值设置</span>
+    </div>
   </div>
 </template>
 
 <script>
+import groundTable from '../workbench/assessmentGroup/groundTable'
+
 export default {
   data () {
     return {
-
+      activeIndex: '0'
+    }
+  },
+  components: {
+    groundTable
+  },
+  beforeMount () { },
+  mounted () { },
+  methods: {
+    handleSelect (key, keyPath) {
+      this.activeIndex = key
+      console.log(key, keyPath)
+      console.log(this.activeIndex)
     }
   },
-  computed: {},
-  beforeMount () {},
-  mounted () {},
-  methods: {},
   watch: {}
 
 }
 
 </script>
 
-<style lang='' scoped>
+<style lang='less' scoped>
-
+.set-mian {
+    background-color: white;
+    min-height: 600px;
+    padding: 25px;
+}
 </style>

src/views/kpi/workbench/initiateAssessment/index.vue

@@ -100,7 +100,7 @@
     <div>
       <popup-right
         v-if="showChooseList"
-        @cancel='showChooseList = false'
+        @cancel="hundlePopupHide"
         @submit="handleSubmitPopup"
         :title="popupRightTitle"
         class="popup"
@@ -118,13 +118,16 @@
           <div class="popup-table">
             <el-table
               v-if="popupData.tableList.length"
+              ref="popupMultipleTable"
               :data="popupData.tableList"
               @selection-change="handleSelectionChange"
               tooltip-effect="dark"
+              :row-key="getRowKeys"
             >
               <el-table-column
                 type="selection"
                 width="40"
+                :reserve-selection="true"
               ></el-table-column>
               <el-table-column
                 label="全选"
@@ -228,7 +231,6 @@ export default {
   },
   watch: {
     'formData.cycleTimeType': function (newVal, oldVal) {
-      // console.log(this.formData.cycleTimeType)
       this.formData.rangDate = ''
     }
   },
@@ -244,9 +246,23 @@ export default {
       }
       this.formData.mergeType.name = nameStr
     },
-    handleChooseGroup () {
+    hundlePopupHide () {
       this.popupData.selectedList = []
+      this.$refs.popupMultipleTable.clearSelection()
+      this.showChooseList = false
+    },
+    handleChooseGroup () {
       this.showChooseList = !this.showChooseList
+      this.$nextTick(res => {
+        if (this.formData.assessmentList.length > 0) {
+          this.formData.assessmentList.forEach((row) => {
+            this.$refs.popupMultipleTable.toggleRowSelection(row, true)
+          })
+        }
+      })
+    },
+    getRowKeys (row) {
+      return row.id
     },
     handleGroupDelete (index, rows) {
       console.log('删除----', rows)
@@ -256,7 +272,6 @@ export default {
       console.log('提交')
       this.$refs['formData'].validate((val) => {
         this.dialogSendVisible = val
-        console.log('1111111111111111')
       })
     },
     handleDialogSend () {
@@ -266,8 +281,7 @@ export default {
       })
       let para = {
         cycleType: this.formData.cycleTimeType,
-        groupIds: '24',
+        groupIds: groupIdList.join(),
-        // groupIds: groupIdList.join(),
         name: this.formData.mergeType.name
       }
       if (this.formData.cycleTimeType === 0) {
@@ -291,8 +305,9 @@ export default {
       this.handleGainAssessmentGroupList()
     },
     handleSelectionChange (val) {
-      //  全选
+      //  选择发生变化
       this.popupData.selectedList = val
+      console.log('选择发生变化  ', val)
     },
     handlePopupCreat () {
       this.showChooseList = false
@@ -300,9 +315,9 @@ export default {
       this.$router.push({ name: 'workbench-edit-group' })
     },
     handleSubmitPopup () {
-      this.showChooseList = false
       const list = this.popupData.selectedList
       this.formData.assessmentList = this.popupData.selectedList
+      this.showChooseList = false
     },
     handleCurrentChange (val) {
       this.handleGainAssessmentGroupList(val)