fix

2020-09-18 16:11:48 +08:00 · 2020-09-18 16:11:48 +08:00 · 3b32fe0c43
commit 3b32fe0c43
parent 09514f017f
5 changed files with 247 additions and 83 deletions
--- a/src/api/api_report.js
+++ b/src/api/api_report.js
@ -1,6 +1,6 @@
 import http from '../utils/http'

-// 获取侧边菜单栏
-export const apiGetOwnResult = params => {
-  return http({url: '/lz_management/report/own/result', method: 'get', params})
+// 业绩报表
+export const apiReportChart = data => {
+  return http({ url: '/lz_management/report/chart', method: 'get', params: data })
 }
--- a/src/api/api_staff.js
+++ b/src/api/api_staff.js
@ -56,4 +56,4 @@ export const apiUpdateLuck = data => {
 // 钉钉抽奖详情
 export const apiDingtalkJump = params => {
  return http({ url: '/lz_management/dtlg/jump', method: 'get',  params })
-}
+}
--- a/src/views/modules/result/chart/componments/chart-form/index.vue
+++ b/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 {
-  props: {
-    dataInfo: {
-      type: Object,
-      default: () => {
-        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'
-          }
+  export default {
+    props: {
+      dataInfo: {
+        type: Object,
+        default: () => {
+          return {}
        }
      },
-      chartData: {
-        columns: ['分类', '数量', '占比'],
-        rows: [
-          { '分类': '0-3年', '数量': '50', '占比': '10%' },
-          { '分类': '3-5年', '数量': '80', '占比': '10%' },
-          { '分类': '5-8年', '数量': '58', '占比': '10%' },
-          { '分类': '8-10年', '数量': '58', '占比': '10%' }
-        ]
+      title: {
+        type: String,
+        default: () => '分布'
      },
-      chartSettings: {
-        radius: ['60px', '80px'],
-        itemStyle: {
-          textAlign: 'center'
-        },
-        label: {
-          formatter: params => {
-            return `{a|${params.data.name}\n${params.data.value}人}`
+      color: {
+        type: Array,
+        default: () => []
+      }
+    },
+    data () {
+      return {
+        chartExtend: {
+          legend: {
+            x: 'center',
+            y: '85%',
+            show: true
          },
-          rich: {
-            a: {
-              color: '#ccc',
-              textAlign: 'center'
-
+          series: {
+            center: ['50%', '40%'],
+            itemStyle: {
+              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: {},
-  beforeMount () { },
-  mounted () { },
-  methods: {},
-  watch: {}
+    },
+    computed: {},
+    beforeMount () { },
+    mounted () { },
+    methods: {},
+    watch: {}

-}
+  }
 </script>

 <style lang='scss' scoped>
-.staff-archives-charts {
-  // width: 50%;
-}
-</style>
+  .staff-archives-charts {
+    // 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>
+
+-->
--- a/src/views/modules/result/chart/index.vue
+++ b/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">
-          <chart-form :dataInfo="dataInfo.genderDistribution" title="月初目标" />
+        <el-card v-if="dataInfo.targetDistribution" >
+          <chart-form aId="id1" :dataInfo="dataInfo.targetDistribution" title="月初目标" />
        </el-card>
-        <el-card v-if="dataInfo.ageDistribution">
-          <chart-form :dataInfo="dataInfo.ageDistribution" title="月末结果" />
+        <el-card v-if="dataInfo.resultDistribution">
+          <chart-form aId="id2" :dataInfo="dataInfo.resultDistribution" title="月末结果" />
        </el-card>
-        <el-card v-if="dataInfo.jobSeniorityDistribution">
-          <chart-form :dataInfo="dataInfo.jobSeniorityDistribution" title="月末人员等级" />
+        <el-card v-if="dataInfo.staffDistribution">
+          <chart-form aId="id3" :dataInfo="dataInfo.staffDistribution" title="等级分布" />
        </el-card>
-        <el-card v-if="dataInfo.educationDistribution">
-          <chart-form :dataInfo="dataInfo.educationDistribution" title="部门等级占比" />
+        <el-card v-if="dataInfo.departmentDistribution">
+          <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: {}
--- a/src/views/modules/staff/profile/componments/chart-form/index.vue
+++ b/src/views/modules/staff/profile/componments/chart-form/index.vue
@ -90,4 +90,4 @@ export default {
 .staff-archives-charts {
  // width: 50%;
 }
-</style>
+</style>