fix

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

@@ -0,0 +1,100 @@
+<template>
+  <div class="staff-archives-charts">
+    <div class="staff-archives-title">{{title}}</div>
+    <div :id="aId" :data="dataInfo" class="chart-box" style="height: 300px"></div>
+  </div>
+</template>
+
+<script>
+  export default{
+    props: {
+      total: 100,
+      aId: {
+        type: String,
+        default: 'mycharts'
+      },
+      dataInfo: {
+        type: Object,
+        default: () => {
+          return {}
+        }
+      },
+      title: {
+        type: String,
+        default: () => '分布'
+      }
+    },
+    mounted () {
+      this.initChartBar()
+    },
+    methods: {
+      initChartBar () {
+        var staffTotal = this.dataInfo.total
+        var option = {
+          color: '#3298DB',
+          // 标题
+          title: {
+            left: 'left'
+          },
+          tooltip: {
+            trigger: 'axis',
+            formatter: params => {
+              var res = '<p>等级：' + params[0].name + '</p>'
+              for (var i = 0; i < params.length; i++) {
+                res += '<p>' + params[i].seriesName + ': ' + (params[i].data * staffTotal).toFixed(0) + '</p>'
+                res += '<p> ' + '占比： ' + ': ' + params[i].data * 100 + '%' + '</p>'
+              }
+              return res
+            }
+          },
+          // 图例
+          legend: {
+            data: ['人数']
+          },
+          // x轴
+          xAxis: {
+            name: '等级',
+            data: this.dataInfo.names
+          },
+          yAxis: {
+            name: '百分比',
+            type: 'value',
+            axisLabel: {
+              show: true,
+              interval: 'auto',
+              formatter: params => {
+                // if (params.data.value === 0) return ''
+                return `${params * 100}%`
+              }
+              // : '{value} %'
+            },
+            show: true
+          },
+          // 数据
+          series: [{
+            name: '人数',
+            type: 'bar',
+            barWidth: 30,
+            label: {
+              show: true,
+              position: 'top',
+              formatter: (params) => (params.value * staffTotal).toFixed(0) + '人\n' + '占比: ' + params.value * 100 + '%'
+            },
+            data: this.dataInfo.datas
+          }
+          ]
+        }
+        var echarts = require('echarts')
+        this.chartBar = echarts.init(document.getElementById(this.aId))
+        this.chartBar.setOption(option)
+        window.onresize = echarts.getInstanceByDom(document.getElementById(this.aId)).resize()
+      }
+    }
+  }
+</script>
+
+<style lang='scss' scoped>
+  .staff-archives-charts {
+    // width: 50%;
+  }
+</style>

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

@@ -36,7 +36,7 @@
           legend: {
             x: 'center',
             y: '85%',
-            show: true
+            show: false // 是否展示图例
           },
           series: {
             center: ['50%', '40%'],
@@ -53,6 +53,7 @@
           },
           label: {
             formatter: params => {
+              // if (params.data.value === 0) return ''
               return `{a|${params.data.name} (${params.data.value}人})`
             },
             rich: {
@@ -60,8 +61,9 @@
                 textAlign: 'center'
               }
             }
+          },
+          labelLine: {
           }
-
         }
       }
     },

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

@@ -1,4 +1,157 @@
 <!--  -->
+<template>
+  <div>
+    <div class="staff-archives-title">条件筛选</div>
+    <el-form :inline="true" :model="formInline" class="demo-form-inline staff-archives-form">
+      <el-form-item label="选择部门">
+        <el-input
+          placeholder="请选择部门"
+          @focus="isChoose=true"
+          readonly
+          :value="formInline.departmentName"
+        ></el-input>
+      </el-form-item>
+
+      <el-form-item :label="`选择月份`">
+        <el-date-picker
+          type="month"
+          placeholder="选择月份"
+          v-model="monthTime"
+          @change="changeApplyMonth"
+        >
+        </el-date-picker>
+      </el-form-item>
+
+
+      <el-form-item>
+        <el-button type="primary" @click="onSubmit">查询</el-button>
+        <el-button type="primary" @click="restValue">重置</el-button>
+      </el-form-item>
+    </el-form>
+
+    <el-dialog title="选择部门" :visible.sync="isChoose" width="30%">
+      <el-tree :data="menuList" :props="defaultProps" @node-click="handleNodeClick">
+        <span class="custom-tree-node" slot-scope="{ node, data }">
+          <span>{{ data.departmentName }}</span>
+          <span>({{ data.memberCount }})人</span>
+        </span>
+      </el-tree>
+      <span slot="footer" class="dialog-footer">
+        <el-button size="mini" @click="isChoose = false">取 消</el-button>
+        <el-button type="primary" size="mini" @click="onsumbit">确 定</el-button>
+      </span>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+  import { apiOrganizationList } from '@/api/api_staff'
+  export default {
+    props: {
+      monthTime: {
+        type: String,
+        default: ''
+      }
+    },
+    data () {
+      return {
+        defaultVal: '',
+        defaultValYear: '',
+        defaultValMon: '',
+        Datalist: [],
+        index: null,
+        value2: [],
+        isChooseObj: {},
+        isChoose: false,
+        menuList: [],
+        defaultProps: {
+          children: 'list',
+          label: 'name'
+        },
+        formInline: {
+          value: []
+        }
+      }
+    },
+    computed: {},
+    beforeMount () { },
+    created () {
+      this.handleGetMenuList()
+      this.handleChangeData({
+      })
+    },
+    mounted () { },
+    methods: {
+      async  handleChangeData () {
+        this.defaultVal = this.monthTime
+        this.onSubmit()
+      },
+      // 获取侧边架构列表
+      async handleGetMenuList () {
+        let result = await apiOrganizationList()
+        this.menuList = result
+      },
+      // 修改月份
+      changeApplyMonth (val) {
+        this.defaultVal = val.getFullYear() + '-' + (val.getMonth() + 1)
+        this.defaultValYear = val.getFullYear()
+        this.defaultValMon = val.getMonth() + 1
+        console.log(this.defaultVal)
+      },
+      onSubmit () {
+        let obj = {
+          departmentId: this.formInline.departmentId,
+          monthTime: this.defaultVal
+        }
+        this.$emit('submit', obj)
+      },
+      restValue () {
+        this.formInline = {}
+        this.monthTime = ''
+      },
+      onsumbit () {
+        this.formInline = Object.assign({}, this.formInline, this.isChooseObj)
+        this.isChoose = false
+      },
+      handleNodeClick (a, b) {
+        this.isChooseObj = {
+          departmentId: a.departmentId,
+          departmentName: a.departmentName
+        }
+      }
+    },
+    watch: {}
+
+  }
+</script>
+
+<style lang='scss'>
+  .el-range-separator {
+    width: 7% !important;
+  }
+  .el-input__icon {
+    transition: all 0.5s;
+  }
+  .staff-archives-choose {
+    margin: 2px;
+    height: 200px;
+    overflow: auto;
+    transition: all 0.3s;
+    position: relative;
+    border: 1px solid #dcdfe6;
+  }
+  .staff-archives-choose1 {
+    height: 0px;
+    opacity: 0;
+    overflow: hidden;
+  }
+</style>
+
+
+
+
+<!--
+&lt;!&ndash;  &ndash;&gt;
 <template>
   <div>
     <div class="staff-archives-title">条件筛选</div>
@@ -124,3 +277,4 @@ export default {
   overflow: hidden;
 }
 </style>
+-->

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

@@ -3,20 +3,17 @@
   <div class="staff-archives">
     <el-main :loding="true">
       <el-card>
-        <query-form @submit="submit" />
+        <query-form @submit="submit" :monthTime="dataInfo.monthTime"/>
       </el-card>
       <div class="staff-archives-chart">
         <el-card v-if="dataInfo.targetDistribution" >
-          <chart-form aId="id1" :dataInfo="dataInfo.targetDistribution" title="月初目标" />
+          <chart-form aId="id1" :dataInfo="dataInfo.targetDistribution" title="绩效目标进度" />
         </el-card>
         <el-card v-if="dataInfo.resultDistribution">
-          <chart-form aId="id2" :dataInfo="dataInfo.resultDistribution" title="月末结果" />
+          <chart-form aId="id2" :dataInfo="dataInfo.resultDistribution" title="绩效结果进度" />
         </el-card>
         <el-card v-if="dataInfo.staffDistribution">
-          <chart-form aId="id3" :dataInfo="dataInfo.staffDistribution" title="等级分布" />
+          <chart-bar-form aId="id3" :dataInfo="dataInfo.staffDistribution" title="绩效结果分布"/>
-        </el-card>
-        <el-card v-if="dataInfo.departmentDistribution">
-          <chart-form aId="id4" :dataInfo="dataInfo.departmentDistribution" title="等级占比" />
         </el-card>
       </div>
     </el-main>
@@ -27,16 +24,17 @@
 <script>
 import chartForm from './componments/chart-form'
 import queryForm from './componments/query-form'
+import chartBarForm from './componments/chart-bar-form'
 
 import { apiReportChart } from '@/api/api_report'
 export default {
   components: {
     chartForm,
-    queryForm
+    queryForm,
+    chartBarForm
   },
   data () {
     return {
-      monthLetter: {},
       dataInfo: {}
     }
   },
@@ -59,11 +57,10 @@ export default {
       if (result.code === 0) {
         this.dataInfo = result.data
       } else {
-        this.$message.error(result.mgs)
+        this.$message.error(result.msg)
       }
     },
-    submit (data, monthLetter) {
+    submit (data) {
-      this.monthLetter = monthLetter
       this.handleGetReportChart(data)
     }
   },