feat:完成员工概况模块接口调试

src/api/api_staff.js

@@ -21,7 +21,7 @@ export const apiEmployeesInfo = data => {
 
 // 员工概况
 export const apiEmployeessItuation = data => {
-  return http({ url: '/lz_management/staff/statistical', method: 'post', data })
+  return http({ url: '/lz_management/staff/info/statistical', method: 'get', params: data })
 }
 
 /**

src/views/modules/staff/profile/componments/chart-form/index.vue

@@ -18,7 +18,9 @@ export default {
   props: {
     dataInfo: {
       type: Object,
-      default: () => { }
+      default: () => {
+        return {}
+      }
     },
     title: {
       type: String,

src/views/modules/staff/profile/componments/employees-number/index.vue

@@ -4,19 +4,19 @@
     <div class="staff-archives-title">员工数量</div>
     <div class="staff-archives-content">
       截至
-      <span class="staff-archives-yellow">2020</span>年
+      <span class="staff-archives-yellow">{{dataInfo.endDate.split("-")[0]}}</span>年
-      <span class="staff-archives-yellow">2</span>月
+      <span class="staff-archives-yellow">{{dataInfo.endDate.split("-")[1]}}</span>月
-      <span class="staff-archives-yellow">20</span>日，
+      <span class="staff-archives-yellow">{{dataInfo.endDate.split("-")[2]}}</span>日，
-      <span class="staff-archives-yellow">浙江霖梓控股有限公司</span>在职员工总数为
+      <span class="staff-archives-yellow">{{dataInfo.departmentName}}</span>在职员工总数为
-      <span class="staff-archives-bule">134</span>人，其中管理人员
+      <span class="staff-archives-bule">{{dataInfo.totalStaffCount}}</span>人，其中管理人员
-      <span class="staff-archives-bule">134</span>人，占比
+      <span class="staff-archives-bule">{{dataInfo.managementCount}}</span>人，占比
-      <span class="staff-archives-bule">20.5%。</span>
+      <span class="staff-archives-bule">{{dataInfo.managementRate}}%。</span>
     </div>
     <div class="staff-archives-content">
       <span class="staff-archives-yellow">近三个月</span>新入职员工
-      <span class="staff-archives-bule">134</span>人，离职员工
+      <span class="staff-archives-bule">{{dataInfo.newStaffCount}}</span>人，离职员工
-      <span class="staff-archives-bule">134</span>人，离职率为
+      <span class="staff-archives-bule">{{dataInfo.leaveStaffCount}}</span>人，离职率为
-      <span class="staff-archives-bule">134%。</span>
+      <span class="staff-archives-bule">{{dataInfo.leaveRate}}%。</span>
     </div>
   </div>
 </template>
@@ -26,7 +26,9 @@ export default {
   props: {
     dataInfo: {
       type: Object,
-      default: () => { }
+      default: () => {
+        return {}
+      }
     }
   },
   data () {
@@ -36,7 +38,11 @@ export default {
   },
   computed: {},
   beforeMount () { },
-  mounted () { },
+  mounted () {
+    setTimeout(() => {
+      console.log('dataInfo22: ', this.dataInfo)
+    }, 1000)
+  },
   methods: {},
   watch: {}
 

src/views/modules/staff/profile/componments/query-form/index.vue

@@ -109,8 +109,12 @@ export default {
       this.menuList = result
     },
     onSubmit () {
-      console.log('formInline', this.formInline)
+      let obj = {
-      this.$emit('submit', 12)
+        departmentId: this.formInline.departmentId,
+        beginDate: this.formInline.beginDate,
+        endDate: this.formInline.endDate
+      }
+      this.$emit('submit', obj)
     },
     restValue () {
       this.formInline = {}

src/views/modules/staff/profile/index.vue

@@ -8,16 +8,16 @@
       <employees-number :dataInfo="dataInfo" />
     </el-card>
     <div class="staff-archives-chart">
-      <el-card>
+      <el-card v-if="dataInfo.genderDistribution">
         <chart-form :dataInfo="dataInfo.genderDistribution" title="性别分布" />
       </el-card>
-      <el-card>
+      <el-card v-if="dataInfo.ageDistribution">
         <chart-form :dataInfo="dataInfo.ageDistribution" title="年龄分布" />
       </el-card>
-      <el-card>
+      <el-card v-if="dataInfo.jobSeniorityDistribution">
         <chart-form :dataInfo="dataInfo.jobSeniorityDistribution" title="岗位工龄分布" />
       </el-card>
-      <el-card>
+      <el-card v-if="dataInfo.educationDistribution">
         <chart-form :dataInfo="dataInfo.educationDistribution" title="学历分布" />
       </el-card>
     </div>
@@ -30,6 +30,7 @@ import chartForm from './componments/chart-form'
 import queryForm from './componments/query-form'
 import employeesNumber from './componments/employees-number'
 
+import { apiEmployeessItuation } from '@/api/api_staff'
 export default {
   components: {
     chartForm,
@@ -47,38 +48,50 @@ export default {
     this.initData()
   },
   methods: {
+    async handleGetEmployeessItuation (data = {}) {
+      let result = await apiEmployeessItuation(data)
+      console.log('result: ', result)
+      if (result.code === 0) {
+        this.dataInfo = result.data
+      } else {
+        this.$message.error(result.mgs)
+      }
+    },
     // 获取页面数据
     async initData () {
-      const dataInfo = {
+      this.handleGetEmployeessItuation()
-        beginDate: '2020-03-03',
+
-        endDate: '2020-05-16',
+      // const dataInfo = {
-        departmentName: '技术部',
+      //   beginDate: '2020-03-03',
-        totalStaffCount: '300',
+      //   endDate: '2020-05-16',
-        managementCount: '24',
+      //   departmentName: '技术部',
-        managementRate: '25%',
+      //   totalStaffCount: '300',
-        newStaffCount: '20',
+      //   managementCount: '24',
-        leaveStaffCount: '2',
+      //   managementRate: '25%',
-        leaveRate: '15%',
+      //   newStaffCount: '20',
-        genderDistribution: {
+      //   leaveStaffCount: '2',
-          columns: ['分类', '数量', '占比'],
+      //   leaveRate: '15%',
-          rows: [{ '分类': '男', '数量': 153, '占比': '60%' }, { '分类': '女', '数量': 100, '占比': '40%' }]
+      //   genderDistribution: {
-        },
+      //     columns: ['分类', '数量', '占比'],
-        ageDistribution: {
+      //     rows: [{ '分类': '男', '数量': 153, '占比': '60%' }, { '分类': '女', '数量': 100, '占比': '40%' }]
-          columns: ['分类', '数量', '占比'],
+      //   },
-          rows: [{ '分类': '10-20', '数量': 153, '占比': '60%' }, { '分类': '20-30', '数量': 60, '占比': '40%' }, { '分类': '30-40', '数量': 10, '占比': '40%' }]
+      //   ageDistribution: {
-        },
+      //     columns: ['分类', '数量', '占比'],
-        jobSeniorityDistribution: {
+      //     rows: [{ '分类': '10-20', '数量': 153, '占比': '60%' }, { '分类': '20-30', '数量': 60, '占比': '40%' }, { '分类': '30-40', '数量': 10, '占比': '40%' }]
-          columns: ['分类', '数量', '占比'],
+      //   },
-          rows: [{ '分类': '男', '数量': 153, '占比': '60%' }, { '分类': '女', '数量': 60, '占比': '40%' }]
+      //   jobSeniorityDistribution: {
-        },
+      //     columns: ['分类', '数量', '占比'],
-        educationDistribution: {
+      //     rows: [{ '分类': '男', '数量': 153, '占比': '60%' }, { '分类': '女', '数量': 60, '占比': '40%' }]
-          columns: ['分类', '数量', '占比'],
+      //   },
-          rows: [{ '分类': '专科', '数量': 13, '占比': '60%' }, { '分类': '本科', '数量': 100, '占比': '40%' }, { '分类': '研究生', '数量': 60, '占比': '40%' }, { '分类': '博士', '数量': 10, '占比': '40%' }]
+      //   educationDistribution: {
-        }
+      //     columns: ['分类', '数量', '占比'],
-      }
+      //     rows: [{ '分类': '专科', '数量': 13, '占比': '60%' }, { '分类': '本科', '数量': 100, '占比': '40%' }, { '分类': '研究生', '数量': 60, '占比': '40%' }, { '分类': '博士', '数量': 10, '占比': '40%' }]
-      this.dataInfo = dataInfo
+      //   }
+      // }
+      // this.dataInfo = dataInfo
     },
     submit (data) {
+      this.handleGetEmployeessItuation(data)
       console.log('data', data)
     }
   },