Merge branch 'version_report' of http://gitlab.ldxinyong.com/enterpriseMt push -u oranagement/lz_management_vue into version_report

src/api/api_report.js

@@ -1,6 +1,6 @@
 import http from '../utils/http'
 
-// 获取侧边菜单栏
+// 业绩报表
-export const apiGetOwnResult = params => {
+export const apiReportChart = data => {
-  return http({url: '/lz_management/report/own/result', method: 'get', params})
+  return http({ url: '/lz_management/report/chart', method: 'get', params: data })
 }

src/views/modules/result/chart/componments/chart-form/index.vue

@@ -1,4 +1,3 @@
-<!--  -->
 <template>
   <div class="staff-archives-charts">
     <div class="staff-archives-title">{{title}}</div>
@@ -14,80 +13,245 @@
 </template>
 
 <script>
-export default {
+  export default {
-  props: {
+    props: {
-    dataInfo: {
+      dataInfo: {
-      type: Object,
+        type: Object,
-      default: () => {
+        default: () => {
-        return {}
+          return {}
-      }
-    },
-    title: {
-      type: String,
-      default: () => '分布'
-    },
-    color: {
-      type: Array,
-      default: () => []
-    }
-  },
-  data () {
-    return {
-      chartExtend: {
-        legend: {
-          x: 'center',
-          y: '80%',
-          show: true
-        },
-        series: {
-          center: ['50%', '40%'],
-          itemStyle: {
-            borderWidth: 2, // 设置border的宽度有多大
-            borderColor: '#fff'
-          }
         }
       },
-      chartData: {
+      title: {
-        columns: ['分类', '数量', '占比'],
+        type: String,
-        rows: [
+        default: () => '分布'
-          { '分类': '0-3年', '数量': '50', '占比': '10%' },
-          { '分类': '3-5年', '数量': '80', '占比': '10%' },
-          { '分类': '5-8年', '数量': '58', '占比': '10%' },
-          { '分类': '8-10年', '数量': '58', '占比': '10%' }
-        ]
       },
-      chartSettings: {
+      color: {
-        radius: ['60px', '80px'],
+        type: Array,
-        itemStyle: {
+        default: () => []
-          textAlign: 'center'
+      }
-        },
+    },
-        label: {
+    data () {
-          formatter: params => {
+      return {
-            return `{a|${params.data.name}\n${params.data.value}人}`
+        chartExtend: {
+          legend: {
+            x: 'center',
+            y: '85%',
+            show: true
           },
-          rich: {
+          series: {
-            a: {
+            center: ['50%', '40%'],
-              color: '#ccc',
+            itemStyle: {
-              textAlign: 'center'
+              borderWidth: 2, // 设置border的宽度有多大
-
+              borderColor: '#fff'
             }
           }
+        },
+        chartSettings: {
+          radius: ['60px', '80px'],
+          itemStyle: {
+            textAlign: 'center'
+          },
+          label: {
+            formatter: params => {
+              return `{a|${params.data.name} (${params.data.value}人})`
+            },
+            rich: {
+              a: {
+                textAlign: 'center'
+              }
+            }
+          }
+
         }
-
       }
-    }
+    },
-  },
+    computed: {},
-  computed: {},
+    beforeMount () { },
-  beforeMount () { },
+    mounted () { },
-  mounted () { },
+    methods: {},
-  methods: {},
+    watch: {}
-  watch: {}
 
-}
+  }
 </script>
 
 <style lang='scss' scoped>
-.staff-archives-charts {
+  .staff-archives-charts {
-  // width: 50%;
+    // width: 50%;
-}
+  }
 </style>
+
+
+<!--
+
+<
+<template>
+  <div class="staff-archives-charts">
+    <div class="staff-archives-title">{{title}}</div>
+    <div :id="aId" :data="dataInfo" style="min-height: 250px;"></div>
+  </div>
+</template>
+
+<script>
+  var echarts = require('echarts')
+  export default {
+    props: {
+      aId: {
+        type: String,
+        default: 'mycharts'
+      },
+      dataInfo: {
+        type: Object,
+        default: () => {
+          return {}
+        }
+      },
+      title: {
+        type: String,
+        default: () => '分布'
+      }
+    },
+    data () {
+      return {
+        datas: {
+          data: [
+            {value: 335, name: '直接访问'},
+            {value: 310, name: '邮件营销'},
+            {value: 234, name: '联盟广告'},
+            {value: 135, name: '视频广告'},
+            {value: 1548, name: '搜索引擎'}
+          ]
+        }
+      }
+    },
+    mounted () {
+      var legendData = []
+      for (var i in this.dataInfo.rows) {
+        legendData.push(this.dataInfo.rows[i])
+      }
+      var option = {
+        title: {
+          text: this.datas.text,
+          textStyle: {color: '#333'},
+          subtext: this.datas.subtext,
+          subtextStyle: {color: '#aaa'},
+          x: 'center'
+        },
+        tooltip: {
+          trigger: 'item',
+          formatter: '{a} <br/>{b} : {c} ({d}%)'
+        },
+        legend: {
+          orient: 'vertical',
+          bottom: 'bottom',
+          data: legendData
+        },
+        series: [
+          {
+            name: '访问来源',
+            type: 'pie',
+            radius: '55%',
+            center: ['50%', '60%'],
+            data: this.dataInfo.rows,
+            itemStyle: {
+              emphasis: {
+                shadowBlur: 10,
+                shadowOffsetX: 0,
+                shadowColor: 'rgba(0, 0, 0, 0.5)'
+              }
+            }
+          }
+        ]
+      }
+      var myChart = echarts.init(document.getElementById(this.aId))
+      myChart.setOption(option)
+      window.onresize = echarts.getInstanceByDom(document.getElementById(this.aId)).resize()
+    }
+  }
+</script>
+
+
+<style scoped>
+  .echarts-content{
+    width:100%;
+    min-height:78px;
+    max-height:300px;
+    background:#fff;
+    -webkit-box-shadow: 0 0 15px rgba(0,0,0,.1);
+    -moz-box-shadow: 0 0 15px rgba(0,0,0,.1);
+    box-shadow: 0 0 15px rgba(0,0,0,.1);
+    padding:0 30px;
+  }
+  .echarts-content .chart-head{
+    height:78px;
+    width:100%;
+    padding-top:30px;
+
+  }
+  .echarts-content .chart-head p{
+    display:inline-block;
+    height:21px;
+    width:100%;
+    cursor:pointer;
+    text-align:center;
+
+  }
+  .echarts-content .chart-head p strong{
+    font-weight:normal;
+    font-size:16px;
+    color:#999;
+  }
+  .echarts-content .chart-head p em{
+    display:inline-block;
+    font-style:normal;
+    font-size:14px;
+    color:#999;
+  }
+  .echarts-content .chart-head p i{
+    display:inline-block;
+    color:#e4e4e4;
+    font-size: 14px;
+    margin-left:10px;
+
+  }
+
+  .echarts-content .chart-main{
+    width:100%;
+    height:222px;
+    position: relative;
+    overflow: hidden;
+    -webkit-transition: height 0.6s;
+    -moz-transition: height 0.6s;
+    -o-transition: height 0.6s;
+    transition: height 0.6s;
+
+  }
+  .echarts-content .chart-main .chart-main-left{
+    width:calc(100% - 20px);
+    height:100%;
+    float:left;
+  }
+  .echarts-content .chart-main .chart-main-right{
+    width:20px;
+    height:100%;
+    float:right;
+    padding-top:50px;
+  }
+  .echarts-content .chart-main .chart-main-right span{
+    display:inline-block;
+    width:12px;
+    height:12px;
+    background:#e4e4e4;
+    border-radius:100%;
+    -moz-border-radius: 100%;
+    -webkit-border-radius: 100%;
+    cursor:pointer;
+  }
+  .echarts-content .chart-main .chart-main-right span:hover{
+    background:#0188fd;
+  }
+  .echarts-content .chart-main .chart-main-right .spanActive{
+    background:#0188fd;
+  }
+</style>
+
+-->

src/views/modules/result/chart/index.vue

@@ -6,17 +6,17 @@
         <query-form @submit="submit" />
       </el-card>
       <div class="staff-archives-chart">
-        <el-card v-if="dataInfo.genderDistribution">
+        <el-card v-if="dataInfo.targetDistribution" >
-          <chart-form :dataInfo="dataInfo.genderDistribution" title="月初目标" />
+          <chart-form aId="id1" :dataInfo="dataInfo.targetDistribution" title="月初目标" />
         </el-card>
-        <el-card v-if="dataInfo.ageDistribution">
+        <el-card v-if="dataInfo.resultDistribution">
-          <chart-form :dataInfo="dataInfo.ageDistribution" title="月末结果" />
+          <chart-form aId="id2" :dataInfo="dataInfo.resultDistribution" title="月末结果" />
         </el-card>
-        <el-card v-if="dataInfo.jobSeniorityDistribution">
+        <el-card v-if="dataInfo.staffDistribution">
-          <chart-form :dataInfo="dataInfo.jobSeniorityDistribution" title="月末人员等级" />
+          <chart-form aId="id3" :dataInfo="dataInfo.staffDistribution" title="等级分布" />
         </el-card>
-        <el-card v-if="dataInfo.educationDistribution">
+        <el-card v-if="dataInfo.departmentDistribution">
-          <chart-form :dataInfo="dataInfo.educationDistribution" title="部门等级占比" />
+          <chart-form aId="id4" :dataInfo="dataInfo.departmentDistribution" title="等级占比" />
         </el-card>
       </div>
     </el-main>
@@ -28,7 +28,7 @@
 import chartForm from './componments/chart-form'
 import queryForm from './componments/query-form'
 
-import { apiEmployeessItuation } from '@/api/api_staff'
+import { apiReportChart } from '@/api/api_report'
 export default {
   components: {
     chartForm,
@@ -45,14 +45,14 @@ export default {
   mounted () {
   },
   methods: {
-    async handleGetEmployeessItuation (data = {}) {
+    async handleGetReportChart (data = {}) {
       const loading = this.$loading({
         lock: true,
         text: 'Loading',
         spinner: 'el-icon-loading',
         background: 'rgba(0, 0, 0, 0.7)'
       })
-      let result = await apiEmployeessItuation(data)
+      let result = await apiReportChart(data)
       setTimeout(() => {
         loading.close()
       }, 500)
@@ -64,7 +64,7 @@ export default {
     },
     submit (data, monthLetter) {
       this.monthLetter = monthLetter
-      this.handleGetEmployeessItuation(data)
+      this.handleGetReportChart(data)
     }
   },
   watch: {}