From 61b7630d7ef83818dcb3bb42a3ea9fb82866684e Mon Sep 17 00:00:00 2001
From: sean yu <yuyumin@ldxingyong.com>
Date: Tue, 27 Oct 2020 09:34:29 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E7=BB=A9=E6=95=88=E6=8A=A5?=
 =?UTF-8?q?=E8=A1=A8=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/report.js              |  19 ++
 src/utils/elementConfig.js     |  57 +++---
 src/views/kpi/report/index.vue | 337 ++++++++++++++++++++++++++++++++-
 3 files changed, 375 insertions(+), 38 deletions(-)
 create mode 100644 src/api/report.js

diff --git a/src/api/report.js b/src/api/report.js
new file mode 100644
index 0000000..f55e9c5
--- /dev/null
+++ b/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
+	})
+}
diff --git a/src/utils/elementConfig.js b/src/utils/elementConfig.js
index 619f564..2fc0605 100644
--- a/src/utils/elementConfig.js
+++ b/src/utils/elementConfig.js
@@ -1,33 +1,33 @@
 import Vue from 'vue'
 import {
-  Button,
-  MessageBox,
-  Message,
-  Table,
-  TableColumn,
-  Form,
-  FormItem,
-  Input,
-  Select,
-  Option,
-  RadioGroup,
-  DatePicker,
-  CheckboxGroup,
-  Switch,
-  TimePicker,
-  Col,
-  Checkbox,
-  Radio,
-  Dropdown,
-  DropdownMenu,
-  DropdownItem,
-  Dialog,
-  Tree,
-  Tag,
-  Tooltip,
-  Popover,
-  Pagination
-
+	Button,
+	MessageBox,
+	Message,
+	Table,
+	TableColumn,
+	Form,
+	FormItem,
+	Input,
+	Select,
+	Option,
+	RadioGroup,
+	DatePicker,
+	CheckboxGroup,
+	Switch,
+	TimePicker,
+	Col,
+	Checkbox,
+	Radio,
+	Dropdown,
+	DropdownMenu,
+	DropdownItem,
+	Dialog,
+	Tree,
+	Tag,
+	Tooltip,
+	Popover,
+	Pagination,
+	Cascader
 } from 'element-ui'
 
 Vue.prototype.$message = Message
@@ -59,3 +59,4 @@ Vue.use(Radio)
 Vue.use(Dropdown)
 Vue.use(DropdownMenu)
 Vue.use(DropdownItem)
+Vue.use(Cascader)
diff --git a/src/views/kpi/report/index.vue b/src/views/kpi/report/index.vue
index b5848ca..cb1cdf1 100644
--- a/src/views/kpi/report/index.vue
+++ b/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>