添加报表详情页面

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/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 = {
@@ -282,12 +332,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;
@@ -295,25 +367,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;
@@ -321,12 +382,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;
@@ -336,7 +415,6 @@ export default {
   display: flex;
 }
 #level_chart {
-  display: inline-block;
   width: 600px;
   height: 360px;
   flex: 1;