From 09d00cd810cebc2b78c3928a8673f569cbffe165 Mon Sep 17 00:00:00 2001
From: yubo <autumnal_wind@yeah.net>
Date: 星期三, 11 三月 2026 19:27:17 +0800
Subject: [PATCH] feat(dashboard): 添加四险提醒统计功能和导出功能
---
src/views/dashboard/index.vue | 1245 +++++++++++++++++++++++++++++++++++------------------------
1 files changed, 739 insertions(+), 506 deletions(-)
diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue
index 64050f2..7c78203 100644
--- a/src/views/dashboard/index.vue
+++ b/src/views/dashboard/index.vue
@@ -1,540 +1,773 @@
<template>
<div class="main">
- <el-row :gutter="10">
- <el-col :xs="24" :sm="12">
- <div class="app-container" style="height: 120px">
- <div class="user-wrapper">
- <div class="user-header">
- <img alt="avatar" :src="avatar">
- </div>
- <div class="user-info">
- <div class="random-message">
- {{ welcomeMessage }}
- </div>
- <div class="user-dept">
- <span>{{ user.deptName ? user.deptName : $t('common.noDept') }}</span> | <span>{{ user.roleName ? user.roleName : $t('common.noRole') }}</span>
- </div>
- <div class="user-login-info">
- {{ $t('common.lastLoginTime') }}：<span id="last-login-time">{{ user.lastLoginTime ? user.lastLoginTime : $t('common.firstLogin') }}</span>
- </div>
- </div>
- </div>
- </div>
- </el-col>
- <el-col :xs="24" :sm="4">
- <div class="app-container" style="height: 120px;padding: 0">
- <el-card :body-style="{ padding: '0px' }" shadow="never" style="height: 120px">
- <div class="count-header">
- <img alt="" :src="resolveIcon('count1.svg')">
- <span class="des">{{ $t('common.todayIp') }}</span>
- <countTo class="countTo todayIp" :start-val="0" :end-val="todayIp" :duration="3000" />
- </div>
- </el-card>
- </div>
- </el-col>
- <el-col :xs="24" :sm="4">
- <div class="app-container" style="height: 120px;padding: 0">
- <el-card :body-style="{ padding: '0px' }" shadow="never" style="height: 120px">
- <div class="count-header">
- <img alt="" :src="resolveIcon('count2.svg')">
- <span class="des">{{ $t('common.todayVisit') }}</span>
- <countTo class="countTo todayVisit" :start-val="0" :end-val="todayVisit" :duration="3000" />
- </div>
- </el-card>
- </div>
- </el-col>
- <el-col :xs="24" :sm="4">
- <div class="app-container" style="height: 120px;padding: 0">
- <el-card :body-style="{ padding: '0px' }" shadow="never" style="height: 120px">
- <div class="count-header">
- <img alt="" :src="resolveIcon('count3.svg')">
- <span class="des">{{ $t('common.TotalVisit') }}</span>
- <countTo class="countTo totalVisit" :start-val="0" :end-val="totalVisit" :duration="3000" />
- </div>
- </el-card>
- </div>
+ <el-row style="height: 4.25vh;margin-bottom: 0">
+ <el-col :span="8"><p /></el-col>
+ <el-col :span="16">
+ <ul class="data-ul">
+ <li :class="{ selectedColor: selectIndex === 0 }" @click="selectTab(0)">
+ 今日
+ </li>
+ <li :class="{ selectedColor: selectIndex === 1 }" @click="selectTab(1)">
+ 本周
+ </li>
+ <li :class="{ selectedColor: selectIndex === 2 }" @click="selectTab(2)">
+ 本月
+ </li>
+ <li :class="{ selectedColor: selectIndex === 3 }" @click="selectTab(3)">
+ 今年
+ </li>
+ </ul>
+ <span style=" font-size: 16px; color: #333333;"> 时间段：</span>
+ <el-date-picker
+ v-model="value2"
+ type="daterange"
+ :picker-options="pickerOptions"
+ range-separator="至"
+ start-placeholder="开始日期"
+ end-placeholder="结束日期"
+ align="right"
+ value-format="yyyy-MM-dd"
+ style="width: 400px;"
+ />
+ <el-button type="primary" plain @click="submitForm">
+ 查询
+ </el-button>
</el-col>
</el-row>
- <el-row :gutter="10">
- <el-col :xs="24" :sm="12">
- <div class="app-container">
- <div id="visit-count-chart" style="width: 100%;height: 370px" />
- </div>
+ <el-row :gutter="20" class="dashboard-card">
+ <el-col>
+ <el-card shadow="always" class="card-info" @click.native="showXzyg('在职员工总数','1')">
+ <p class="card-number">{{ total.zzyg }}</p>
+ <p>在职员工总数</p>
+ </el-card>
</el-col>
- <el-col :xs="24" :sm="12">
- <div class="app-container">
- <el-table
- :data="server"
- border
- class="server-table"
- style="width: 100%"
- >
- <el-table-column
- prop="name"
- label="服务名"
- />
- <el-table-column
- prop="port"
- label="端口"
- >
- <template slot-scope="scope">
- <el-tag
- :type="scope.row.id % 2 === 0 ? 'primary' : 'success'"
- disable-transitions
- >
- {{ scope.row.port }}
- </el-tag>
- </template>
- </el-table-column>
- <el-table-column
- prop="description"
- label="描述"
- />
- </el-table>
- </div>
+ <el-col>
+ <el-card shadow="always" class="card-info" @click.native="showXzyg('新进员工人数','2')">
+ <p class="card-number">{{ total.xjyg }}</p>
+ <p>新进员工人数</p>
+ </el-card>
+ </el-col>
+ <el-col>
+ <el-card shadow="always" class="card-info" @click.native="showXzyg('正式员工人数','3')">
+ <p class="card-number">{{ total.zsyg }}</p>
+ <p>正式员工人数</p>
+ </el-card>
+ </el-col>
+ <el-col>
+ <el-card shadow="always" class="card-info" @click.native="showXzyg('临时员工人数','4')">
+ <p class="card-number">{{ total.lsyg }}</p>
+ <p>临时员工人数</p>
+ </el-card>
+ </el-col>
+ <el-col>
+ <el-card shadow="always" class="card-info" @click.native="showXzyg('超龄员工人数','5')">
+ <p class="card-number">{{ total.clyg }}</p>
+ <p>超龄员工人数</p>
+ </el-card>
</el-col>
</el-row>
+ <el-row :gutter="20" class="dashboard-card">
+ <el-col>
+ <el-card shadow="always" class="card-info" @click.native="showXzyg('离职员工总数','6')">
+ <p class="card-number">{{ total.lzyg }}</p>
+ <p>离职员工总数</p>
+ </el-card>
+ </el-col>
+ <el-col>
+ <el-card shadow="always" class="card-info" @click.native="showCtyg('辞职申请人数','7')">
+ <p class="card-number">{{ total.czyg }}</p>
+ <p>辞职申请人数</p>
+ </el-card>
+ </el-col>
+ <el-col>
+ <el-card shadow="always" class="card-info" @click.native="showXzyg('正常离职人数','8')">
+ <p class="card-number">{{ total.zclz }}</p>
+ <p>正常离职人数</p>
+ </el-card>
+ </el-col>
+ <el-col>
+ <el-card shadow="always" class="card-info" @click.native="showXzyg('自动离职人数','9')">
+ <p class="card-number">{{ total.zdlz }}</p>
+ <p>自动离职人数</p>
+ </el-card>
+ </el-col>
+ <el-col>
+ <el-card shadow="always" class="card-info" @click.native="showXzyg('公司辞退人数','10')">
+ <p class="card-number">{{ total.gsct }}</p>
+ <p>公司辞退人数</p>
+ </el-card>
+ </el-col>
+ </el-row>
+ <el-row :gutter="20" class="dashboard-card">
+ <el-col :span="4">
+ <el-card shadow="always" class="card-info" @click.native="showht('有效合同','11')">
+ <p class="card-number">{{ total.yxht }}</p>
+ <p>有效合同</p>
+ </el-card>
+ </el-col>
+ <el-col :span="4">
+ <el-card shadow="always" class="card-info" @click.native="showht('到期合同','12')">
+ <p class="card-number">{{ total.dqht }}</p>
+ <p>到期合同</p>
+ </el-card>
+ </el-col>
+ <el-col :span="4">
+ <el-card shadow="always" class="card-info" @click.native="showht('新签合同','13')">
+ <p class="card-number">{{ total.xinqht }}</p>
+ <p>新签合同</p>
+ </el-card>
+ </el-col>
+ <el-col :span="4">
+ <el-card shadow="always" class="card-info" @click.native="showht('续签合同','14')">
+ <p class="card-number">{{ total.xqht }}</p>
+ <p>续签合同</p>
+ </el-card>
+ </el-col>
+ <el-col :span="4">
+ <el-card shadow="always" class="card-info" @click.native="showht('解除合同','15')">
+ <p class="card-number">{{ total.jcht }}</p>
+ <p>解除合同</p>
+ </el-card>
+ </el-col>
+ </el-row>
+ <el-row :gutter="20" class="dashboard-card">
+ <el-col>
+ <el-card shadow="always" class="card-info" @click.native="showcq('出勤人数','1')">
+ <p class="card-number">{{ total.cqrs }}</p>
+ <p>出勤人数</p>
+ </el-card>
+ </el-col>
+ <el-col>
+ <el-card shadow="always" class="card-info" @click.native="showqj('员工请假','1')">
+ <p class="card-number">{{ total.ygqj }}</p>
+ <p>员工请假</p>
+ </el-card>
+ </el-col>
+ <el-col>
+ <el-card shadow="always" class="card-info" @click.native="showtj('员工体检','1')">
+ <p class="card-number">{{ total.ygtj }}</p>
+ <p>员工体检</p>
+ </el-card>
+ </el-col>
+ <el-col>
+ <el-card shadow="always" class="card-info" @click.native="showcq('员工加班','2')">
+ <p class="card-number">{{ total.ygjb }}</p>
+ <p>员工加班</p>
+ </el-card>
+ </el-col>
+ <el-col>
+ <el-card shadow="always" class="card-info" @click.native="showcq('员工旷工','3')">
+ <p class="card-number">{{ total.ygkg }}</p>
+ <p>员工旷工</p>
+ </el-card>
+ </el-col>
+ </el-row>
+ <el-row :gutter="20" class="dashboard-card">
+ <el-col>
+ <el-card shadow="always" class="card-info" @click.native="showlz('仲裁案件','1')">
+ <p class="card-number">{{ total.lzaj }}</p>
+ <p>仲裁案件</p>
+ </el-card>
+ </el-col>
+ <el-col>
+ <el-card shadow="always" class="card-info" @click.native="showgs('工伤案件','1')">
+ <p class="card-number">{{ total.gsaj }}</p>
+ <p>工伤案件</p>
+ </el-card>
+ </el-col>
+ <el-col>
+ <el-card shadow="always" class="card-info" @click.native="showyw('意外险案件','1')">
+ <p class="card-number">{{ total.ywxaj }}</p>
+ <p>意外险案件</p>
+ </el-card>
+ </el-col>
+ <el-col>
+ <el-card shadow="always" class="card-info" @click.native="showsb('社保申请','3')">
+ <p class="card-number">{{ total.sbsq }}</p>
+ <p>社保申请</p>
+ </el-card>
+ </el-col>
+ <el-col>
+ <el-card shadow="always" class="card-info" @click.native="showsyj('失业金领取','3')">
+ <p class="card-number">{{ total.syj }}</p>
+ <p>失业金领取</p>
+ </el-card>
+ </el-col>
+ </el-row>
+ <el-row :gutter="20" class="dashboard-card">
+ <el-col>
+ <el-card shadow="always" class="card-info" @click.native="showSfz('身份证到期','11')">
+ <p class="card-number">{{ total.sfz }}</p>
+ <p>身份证到期</p>
+ </el-card>
+ </el-col>
+ <el-col>
+ <el-card shadow="always" class="card-info" @click.native="showtg('员工调岗','3')">
+ <p class="card-number">{{ total.ygtg }}</p>
+ <p>员工调岗</p>
+ </el-card>
+ </el-col>
+ <el-col>
+ <el-card shadow="always" class="card-info" @click.native="showbl('不良记录','3')">
+ <p class="card-number">{{ total.bljl }}</p>
+ <p>不良记录</p>
+ </el-card>
+ </el-col>
+ <el-col>
+ <el-card shadow="always" class="card-info" @click.native="showInsurance('四险提醒','3')">
+ <p class="card-number">{{ total.insurance }}</p>
+ <p>四险提醒</p>
+ </el-card>
+ </el-col>
+ <el-col>
+ <el-card shadow="always" class="card-info" @click.native="showProbation('转正提醒')">
+ <p class="card-number">{{ total.probation }}</p>
+ <p>转正提醒</p>
+ </el-card>
+ </el-col>
+ </el-row>
+ <on-the-job-user
+ ref="jobUser"
+ :dialog-visible="dialog.isVisible"
+ :title="title"
+ @cancleChooseUser="cancleChooseUser"
+ />
+ <ht-user
+ ref="htUser"
+ :dialog-visible="dialog.dialogShowHt"
+ :title="title"
+ @cancleChooseUser="canclehtUser"
+ />
+ <cq-user
+ ref="cqUser"
+ :dialog-visible="dialog.dialogShowCq"
+ :title="title"
+ @cancleChooseUser="canclecqUser"
+ />
+ <bl-user ref="blUser" :dialog-visible="dialog.dialogShowbl" :title="title" @cancleChooseUser="cancleblUser" />
+ <tg-user ref="tgUser" :dialog-visible="dialog.dialogShowtg" :title="title" @cancleChooseUser="cancletgUser" />
+ <tj-user ref="tjUser" :dialog-visible="dialog.dialogShowtj" :title="title" @cancleChooseUser="cancletjUser" />
+ <yj-user ref="syjUser" :dialog-visible="dialog.dialogShowsyj" :title="title" @cancleChooseUser="cancleyjUser" />
+ <sb-user ref="sbUser" :dialog-visible="dialog.dialogShowsb" :title="title" @cancleChooseUser="canclesbUser" />
+ <yw-user ref="ywUser" :dialog-visible="dialog.dialogShowyw" :title="title" @cancleChooseUser="cancleywUser" />
+ <gs-user ref="gsUser" :dialog-visible="dialog.dialogShowgs" :title="title" @cancleChooseUser="canclegsUser" />
+ <lz-user ref="lzUser" :dialog-visible="dialog.dialogShowlz" :title="title" @cancleChooseUser="canclelzUser" />
+ <qj-user ref="qjUser" :dialog-visible="dialog.dialogShowqj" :title="title" @cancleChooseUser="cancleqjUser" />
+ <yg-user ref="ygUser" :dialog-visible="dialog.dialogShowyg" :title="title" @cancleChooseUser="cancleygUser" />
+ <sfz-user ref="sfzUser" :dialog-visible="dialog.dialogShowSfz" :title="title" @cancleChooseUser="cancleSfzUser" />
+ <ct-user ref="ctUser" :dialog-visible="dialog.dialogShowct" :title="title" @cancleChooseUser="canclectUser" />
+ <zz-user ref="zzUser" :dialog-visible="dialog.dialogShowProbation" :title="title" @cancleChooseUser="cancleZzUser" />
+ <!-- 四险提醒统计-->
+ <insurance-user ref="insuranceUser" :dialog-visible="dialog.dialogShowInsurance" :title="title" @cancleChooseUser="cancleInsuranceUser" />
</div>
</template>
<script>
-import echarts from 'echarts'
-import { parseTime } from '@/utils'
-import countTo from 'vue-count-to'
-import resize from '@/components/Charts/mixins/resize'
+import OnTheJobUser from './onTheJobUser'
+import HtUser from './HtUser'
+import CqUser from './cqUser'
+import BlUser from './blUser'
+import TgUser from './tgUser'
+import TjUser from './tjUser'
+import YjUser from './yjUser'
+import SbUser from './sbUser'
+import YwUser from './ywUser'
+import GsUser from './gsUser'
+import LzUser from './lzUser'
+import QjUser from './qjUser'
+import YgUser from './ygUser'
+import CtUser from './ctUser'
+import SfzUser from './sfzUser'
+import ZzUser from './zzUser'
+import InsuranceUser from './insuranceUser'
export default {
- name: 'Dashboard',
- components: { countTo },
- filters: {
- portFilter(v) {
- const map = {
- 0: 'danger',
- 1: 'success'
- }
- return map[status]
- }
- },
- mixins: [resize],
+ components: { SfzUser, YgUser, QjUser, LzUser, GsUser, YwUser, SbUser, YjUser, TjUser, TgUser, BlUser, CqUser, HtUser, OnTheJobUser, CtUser, ZzUser, InsuranceUser },
data() {
return {
- server: [{
- id: 1,
- name: 'FEBS-Auth',
- port: '8101',
- description: '微服务认证服务器'
+ dialog: {
+ isVisible: false,
+ dialogShowyg: false,
+ dialogShowHt: false,
+ dialogShowbl: false,
+ dialogShowtg: false,
+ dialogShowtj: false,
+ dialogShowsyj: false,
+ dialogShowsb: false,
+ dialogShowyw: false,
+ dialogShowgs: false,
+ dialogShowct: false,
+ dialogShowlz: false,
+ dialogShowqj: false,
+ dialogShowCq: false,
+ dialogShowSfz: false,
+ dialogShowProbation: false,
+ dialogShowInsurance: false,
+ title: '',
+ type: ''
},
- {
- id: 2,
- name: 'FEBS-Gateway',
- port: '8301',
- description: '微服务网关'
+ title: '',
+ total: {
+ zzyg: 0,
+ zsyg: 0,
+ lsyg: 0,
+ zclz: 0,
+ zdlz: 0,
+ clyg: 0,
+ gsct: 0,
+ xjyg: 0,
+ lzyg: 0,
+ jcht: 0,
+ czyg: 0,
+ yxht: 0,
+ xinqht: 0,
+ xqht: 0,
+ dqht: 0,
+ cqrs: 0,
+ ygjb: 0,
+ ygkg: 0,
+ ygqj: 0,
+ lzaj: 0,
+ gsaj: 0,
+ ywxaj: 0,
+ sbsq: 0,
+ syj: 0,
+ ygtj: 0,
+ sfz: 0,
+ ygtg: 0,
+ bljl: 0,
+ zzyg: 0,
+ sxyg: 0,
+ probation: 0,
+ insurance: 0
},
- {
- id: 3,
- name: 'FEBS-Server-System',
- port: '8201',
- description: '微服务子系统，系统模块'
+ pickerOptions: {
+ shortcuts: [
+ {
+ text: '最近一周',
+ onClick(picker) {
+ const end = new Date()
+ const start = new Date()
+ start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
+ picker.$emit('pick', [start, end])
+ }
+ },
+ {
+ text: '最近一个月',
+ onClick(picker) {
+ const end = new Date()
+ const start = new Date()
+ start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
+ picker.$emit('pick', [start, end])
+ }
+ },
+ {
+ text: '最近三个月',
+ onClick(picker) {
+ const end = new Date()
+ const start = new Date()
+ start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
+ picker.$emit('pick', [start, end])
+ }
+ }
+ ]
},
- {
- id: 4,
- name: 'FEBS-Server-Test',
- port: '8202',
- description: '微服务子系统，Demo模块'
- },
- {
- id: 5,
- name: 'FEBS-Server-Generator',
- port: '8203',
- description: '微服务子系统，代码生成模块'
- },
- {
- id: 6,
- name: 'FEBS-Server-Job',
- port: '8204',
- description: '微服务子系统，任务调度模块'
- },
- {
- id: 7,
- name: 'FEBS-TX-Manager',
- port: '8501',
- description: '分布式事务控制中心'
- }
- ],
- welcomeMessage: '',
- todayIp: 0,
- todayVisit: 0,
- totalVisit: 0,
- chart: null
- }
- },
- computed: {
- user() {
- return this.$store.state.account.user
- },
- avatar() {
- return require(`@/assets/avatar/${this.user.avatar}`)
+ value2: '',
+ selectIndex: '' // 搜索结果,被选中的li index
}
},
mounted() {
- this.welcomeMessage = this.welcome()
- this.initIndexData()
+ this.selectTab(0)
+ this.fetchProbationCount()
},
methods: {
- resolveIcon(icon) {
- return require(`@/assets/icons/${icon}`)
+ showSfz(title, number) {
+ this.dialog.dialogShowSfz = true
+ this.title = title
+ const values = this.value2
+ const btime = values[0]
+ const etime = values[1]
+ const index = this.selectIndex
+ this.$refs.sfzUser.setjobUser(btime, etime, index, number)
},
- welcome() {
- const date = new Date()
- const hour = date.getHours()
- const time = hour < 6 ? this.$t('common.goodMorning') : (hour <= 11 ? this.$t('common.goodMorning') : (hour <= 13 ? this.$t('common.goodAfternoon') : (hour <= 18 ? this.$t('common.goodAfternoon') : this.$t('common.goodEvening'))))
- const welcomeArr = [
- this.$t('common.randomMessage.a'),
- this.$t('common.randomMessage.b'),
- this.$t('common.randomMessage.c'),
- this.$t('common.randomMessage.d'),
- this.$t('common.randomMessage.e'),
- this.$t('common.randomMessage.f'),
- this.$t('common.randomMessage.g'),
- this.$t('common.randomMessage.h'),
- this.$t('common.randomMessage.i')
- ]
- const index = Math.floor((Math.random() * welcomeArr.length))
- return `${time}, ${this.user.username}, ${welcomeArr[index]}`
+ showbl(title, number) {
+ this.dialog.dialogShowbl = true
+ this.title = title
+ const values = this.value2
+ const btime = values[0]
+ const etime = values[1]
+ const index = this.selectIndex
+ this.$refs.blUser.setjobUser(btime, etime, index, number)
},
- initIndexData: function() {
- this.$get('system/user/index').then((r) => {
+ showtg(title, number) {
+ this.dialog.dialogShowtg = true
+ this.title = title
+ const values = this.value2
+ const btime = values[0]
+ const etime = values[1]
+ const index = this.selectIndex
+ this.$refs.tgUser.setjobUser(btime, etime, index, number)
+ },
+ showtj(title, number) {
+ this.dialog.dialogShowtj = true
+ this.title = title
+ const values = this.value2
+ const btime = values[0]
+ const etime = values[1]
+ const index = this.selectIndex
+ this.$refs.tjUser.setjobUser(btime, etime, index, number)
+ },
+ showsyj(title, number) {
+ this.dialog.dialogShowsyj = true
+ this.title = title
+ const values = this.value2
+ const btime = values[0]
+ const etime = values[1]
+ const index = this.selectIndex
+ this.$refs.syjUser.setjobUser(btime, etime, index, number)
+ },
+ showsb(title, number) {
+ this.dialog.dialogShowsb = true
+ this.title = title
+ const values = this.value2
+ const btime = values[0]
+ const etime = values[1]
+ const index = this.selectIndex
+ this.$refs.sbUser.setjobUser(btime, etime, index, number)
+ },
+ showyw(title, number) {
+ this.dialog.dialogShowyw = true
+ this.title = title
+ const values = this.value2
+ const btime = values[0]
+ const etime = values[1]
+ const index = this.selectIndex
+ this.$refs.ywUser.setjobUser(btime, etime, index, number)
+ },
+ showgs(title, number) {
+ this.dialog.dialogShowgs = true
+ this.title = title
+ const values = this.value2
+ const btime = values[0]
+ const etime = values[1]
+ const index = this.selectIndex
+ this.$refs.gsUser.setjobUser(btime, etime, index, number)
+ },
+ showlz(title, number) {
+ this.dialog.dialogShowlz = true
+ this.title = title
+ const values = this.value2
+ const btime = values[0]
+ const etime = values[1]
+ const index = this.selectIndex
+ this.$refs.lzUser.setjobUser(btime, etime, index, number)
+ },
+ showqj(title, number) {
+ this.dialog.dialogShowqj = true
+ this.title = title
+ const values = this.value2
+ const btime = values[0]
+ const etime = values[1]
+ const index = this.selectIndex
+ this.$refs.qjUser.setjobUser(btime, etime, index, number)
+ },
+ showcq(title, number) {
+ this.dialog.dialogShowCq = true
+ this.title = title
+ const values = this.value2
+ const btime = values[0]
+ const etime = values[1]
+ const index = this.selectIndex
+ this.$refs.cqUser.setjobUser(btime, etime, index, number)
+ },
+ showht(title, number) {
+ this.dialog.dialogShowHt = true
+ this.title = title
+ const values = this.value2
+ const btime = values[0]
+ const etime = values[1]
+ const index = this.selectIndex
+ this.$refs.htUser.setjobUser(btime, etime, index, number)
+ },
+ showXzyg(title, number) {
+ this.title = title
+ const values = this.value2
+ const btime = values[0]
+ const etime = values[1]
+ const index = this.selectIndex
+ if (number >= 6) {
+ this.$refs.ygUser.setjobUser(btime, etime, index, number)
+ this.dialog.dialogShowyg = true
+ } else {
+ this.$refs.jobUser.setjobUser(btime, etime, index, number)
+ this.dialog.isVisible = true
+ }
+ },
+ showCtyg(title, number) {
+ this.title = title
+ const values = this.value2
+ const btime = values[0]
+ const etime = values[1]
+ const index = this.selectIndex
+ this.$refs.ctUser.setjobUser(btime, etime, index, number)
+ this.dialog.dialogShowct = true
+ },
+ showProbation(title) {
+ this.dialog.dialogShowProbation = true
+ this.title = title
+ const values = this.value2
+ const btime = values[0]
+ const etime = values[1]
+ const index = this.selectIndex // 传入当前 dashboard 选中的时间维度
+ this.$refs.zzUser.setjobUser(btime, etime, index, null)
+ },
+ showProbation(title) {
+ this.dialog.dialogShowInsurance = true
+ this.title = title
+ const values = this.value2
+ const btime = values[0]
+ const etime = values[1]
+ const index = this.selectIndex
+ this.$refs.insuranceUser.setjobUser(btime, etime, index, null)
+ },
+ showInsurance(title) {
+ this.dialog.dialogShowInsurance = true
+ this.title = title
+ const values = this.value2
+ const btime = values[0]
+ const etime = values[1]
+ const index = this.selectIndex
+ this.$refs.insuranceUser.setjobUser(btime, etime, index, null)
+ },
+ cancleZzUser() {
+ this.dialog.dialogShowProbation = false
+ },
+ cancleInsuranceUser() {
+ this.dialog.dialogShowInsurance = false
+ },
+ fetchProbationCount() {
+ this.$get('hr/empBaseInfo/probation/alert', {
+ pageSize: 1,
+ pageNum: 1,
+ delFlag: 0,
+ empStatus: 0,
+ timeRange: this.selectIndex
+ }).then((r) => {
const data = r.data.data
- this.todayIp = data.todayIp
- this.totalVisit = data.totalVisitCount
- this.todayVisit = data.todayVisitCount
- const tenVisitCount = []
- const dateArr = []
- for (let i = 10; i >= 0; i--) {
- const time = parseTime(new Date(new Date().getTime() - 24 * 60 * 60 * 1000 * i), '{m}-{d}')
- let contain = false
- for (const o of data.lastTenVisitCount) {
- if (o.days === time) {
- contain = true
- tenVisitCount.push(o.count)
- }
- }
- if (!contain) {
- tenVisitCount.push(0)
- }
- dateArr.push(time)
- }
- const tenUserVisitCount = []
- for (let i = 10; i >= 0; i--) {
- const time = parseTime(new Date(new Date().getTime() - 24 * 60 * 60 * 1000 * i), '{m}-{d}')
- let contain = false
- for (const o of data.lastTenUserVisitCount) {
- if (o.days === time) {
- contain = true
- tenUserVisitCount.push(o.count)
- }
- }
- if (!contain) {
- tenUserVisitCount.push(0)
- }
- }
- this.chart = echarts.init(document.getElementById('visit-count-chart'))
- const option = {
- backgroundColor: '#FFF',
- title: {
- text: this.$t('common.visitTitle') + '\n',
- textStyle: {
- fontSize: 14
- }
- },
- tooltip: {
- trigger: 'axis',
- axisPointer: {
- type: 'shadow'
- }
- },
- legend: {
- data: [this.$t('common.you'), this.$t('common.total')],
- top: '18'
- },
- grid: {
- left: '3%',
- right: '5%',
- bottom: '3%',
- containLabel: true,
- show: false
- },
- toolbox: {
- feature: {
- dataView: { show: false, readOnly: false }
- }
- },
- xAxis: {
- type: 'category',
- boundaryGap: true,
- splitLine: {
- show: false
- },
- data: dateArr,
- axisLine: {
- lineStyle: {
- color: '#333'
- }
- }
- },
- yAxis: [
- {
- type: 'value',
- splitLine: {
- lineStyle: {
- type: 'dashed',
- color: '#DDD'
- }
- },
- axisLine: {
- show: false,
- lineStyle: {
- color: '#333'
- }
- },
- nameTextStyle: {
- color: '#999'
- },
- splitArea: {
- show: false
- }
- }],
- series: [
- {
- name: this.$t('common.you'),
- smooth: true,
- type: 'line',
- color: 'rgb(0, 143, 251)',
- areaStyle: {
- color: {
- type: 'linear',
- x: 0,
- y: 0,
- x2: 0,
- y2: 1,
- colorStops: [{
- offset: 0,
- color: 'rgba(0, 143, 251, 0.8)'
- },
- {
- offset: 1,
- color: '#fff'
- }
- ],
- globalCoord: false
- }
- },
- lineStyle: {
- normal: {
- width: 3
- }
- },
- data: tenUserVisitCount
- },
- {
- name: this.$t('common.total'),
- smooth: true,
- type: 'line',
- color: 'rgba(82, 222, 151, 1)',
- areaStyle: {
- color: {
- type: 'linear',
- x: 0,
- y: 0,
- x2: 0,
- y2: 1,
- colorStops: [{
- offset: 0,
- color: 'rgba(82, 222, 151, 0.8)'
- },
- {
- offset: 1,
- color: '#fff'
- }
- ],
- globalCoord: false
- }
- },
- lineStyle: {
- normal: {
- width: 3
- }
- },
- data: tenVisitCount
- }
- ]
- }
- this.chart.setOption(option)
+ this.total.probation = data.total || 0
})
+ },
+ cancleChooseUser() {
+ this.dialog.isVisible = false
+ },
+ canclehtUser() {
+ this.dialog.dialogShowHt = false
+ },
+ canclecqUser() {
+ this.dialog.dialogShowCq = false
+ },
+ cancleblUser() {
+ this.dialog.dialogShowbl = false
+ },
+ cancletgUser() {
+ this.dialog.dialogShowtg = false
+ },
+ cancletjUser() {
+ this.dialog.dialogShowtj = false
+ },
+ cancleyjUser() {
+ this.dialog.dialogShowsyj = false
+ },
+ canclesbUser() {
+ this.dialog.dialogShowsb = false
+ },
+ cancleywUser() {
+ this.dialog.dialogShowyw = false
+ },
+ canclegsUser() {
+ this.dialog.dialogShowgs = false
+ },
+ canclelzUser() {
+ this.dialog.dialogShowlz = false
+ },
+ cancleqjUser() {
+ this.dialog.dialogShowqj = false
+ },
+ cancleygUser() {
+ this.dialog.dialogShowyg = false
+ },
+ canclectUser() {
+ this.dialog.dialogShowct = false
+ },
+ cancleSfzUser() {
+ this.dialog.dialogShowSfz = false
+ },
+ submitForm() {
+ const values = this.value2
+ const btime = values[0]
+ const etime = values[1]
+ this.$get('hr/statistics/list', {
+ btime: btime, etime: etime, index: null
+ }).then((r) => {
+ const data = r.data.data
+ this.totalValue(data)
+ })
+ },
+ selectTab(index) {
+ this.selectIndex = index
+ this.$get('hr/statistics/list', {
+ index: index
+ }).then((r) => {
+ const data = r.data.data
+ this.totalValue(data)
+ })
+ },
+ totalValue(data) {
+ this.total.zzyg = data.zzyg
+ this.total.zsyg = data.zsyg
+ this.total.lsyg = data.lsyg
+ this.total.zclz = data.zclz
+ this.total.zdlz = data.zdlz
+ this.total.gsct = data.gsct
+ this.total.xjyg = data.xjyg
+ this.total.lzyg = data.lzyg
+ this.total.jcht = data.jcht
+ this.total.czyg = data.czyg
+ this.total.yxht = data.yxht
+ this.total.xinqht = data.xinqht
+ this.total.xqht = data.xqht
+ this.total.dqht = data.dqht
+ if (this.selectIndex === 0 || this.selectIndex === 1) {
+ this.total.cqrs = '--'
+ } else {
+ this.total.cqrs = data.cqrs
+ }
+ if (this.selectIndex === 0 || this.selectIndex === 1) {
+ this.total.ygjb = '--'
+ } else {
+ this.total.ygjb = data.ygjb
+ }
+ if (this.selectIndex === 0 || this.selectIndex === 1) {
+ this.total.ygkg = '--'
+ } else {
+ this.total.ygkg = data.ygkg
+ }
+ this.total.ygqj = data.ygqj
+ this.total.lzaj = data.lzaj
+ this.total.gsaj = data.gsaj
+ this.total.ywxaj = data.ywxaj
+ this.total.sbsq = data.sbsq
+ this.total.syj = data.syj
+ this.total.ygtj = data.ygtj
+ this.total.sfz = data.sfz
+ this.total.clyg = data.clyg
+ this.total.ygtg = data.ygtg
+ this.total.bljl = data.bljl
+ this.total.probation = data.probationCount
+ this.total.insurance = data.insuranceCount
}
}
}
</script>
-<style lang="scss">
- .main {
- .el-card {
- border: none;
- border-radius: 2px;
- }
- .el-table.server-table {
- th {
- height: 2.7rem;
- padding: 7px 0;
- border-right: none;
- }
- td {
- padding: 7px 0;
- border-right: none;
- }
- }
- .count-header {
- padding-left: 1rem;
- height: 120px;
- line-height: 120px;
- text-align: left;
- vertical-align: center;
- img {
- width: 3.8rem;
- margin-top: 1.8rem;
- vertical-align: top;
- }
- span {
- font-size: 15px;
- color: #606266;
- font-weight: 600;
- &.des {
- margin-left: 9px;
- }
- }
- }
- .todayIp {
- color: #27c6da !important;
- }
- .todayVisit {
- color: #fc573b !important;
- }
- .totalVisit {
- color: #be63f9 !important;
- }
- }
-</style>
<style lang="scss" scoped>
- .main {
- padding: 10px;
- .app-container {
- margin: 0 0 10px 0;
- }
- .user-container {
- padding: 15px;
- }
- .user-wrapper {
- width: 100%;
- display: inline-block;
- .user-header {
- display: inline-block;
- vertical-align: middle;
- img {
- width: 5rem;
- margin: .5rem 1rem;
- border-radius: 50%
- }
- }
- .user-info {
- display: inline-block;
- vertical-align: middle;
- .random-message {
- font-size: 1rem;
- margin-bottom: .5rem;
- color: #333;
- }
- .user-dept, .user-login-info {
- color: rgba(0, 0, 0, 0.45);
- margin-bottom: .5rem;
- font-size: .9rem;
- line-height: 1.1rem;
- }
- }
- }
- .user-visits {
- text-align: center;
- padding-right: 2rem;
- margin-top: 1rem;
- vertical-align: middle;
- .num {
- font-weight: 600;
- }
- }
- .project-wrapper {
- padding: 0;
- .project-header {
- padding: 18px;
- margin-bottom: 16px;
- }
- table {
- width: 100%;
- border-collapse: collapse;
- td {
- width: 50%;
- border-top: 1px solid #f1f1f1;
- border-bottom: 1px solid #f1f1f1;
- padding: .7rem;
- .project-avatar-wrapper {
- display:inline-block;
- float:left;
- margin-right:.7rem;
- .project-avatar {
- color: #42b983;
- background-color: #d6f8b8;
- }
- }
- &:nth-child(odd) {
- border-right: 1px solid #f1f1f1;
- }
- }
- }
- .project-detail {
- display:inline-block;
- float:left;
- text-align:left;
- width: 75%;
- .project-name {
- font-size:.9rem;
- margin-top:-2px;
- font-weight:600;
- }
- .project-desc {
- color:rgba(0, 0, 0, 0.45);
- p {
- margin: 5px 0 0 0;
- font-size: .85rem;
- line-height: 1.4rem;
- white-space:normal;
- }
- }
- }
- }
- @media screen and (max-width: 1366px)
- {
- .user-info {
- max-width: 25rem;
- }
- }
- @media screen and (max-width: 1300px)
- {
- .user-info {
- max-width: 19rem;
- }
- }
- @media screen and (max-width: 1120px)
- {
- .user-info {
- max-width: 17rem;
- }
- }
+.main {
+ padding: 5px 2vw 4.25vh;
+ text-align: center;
+ .data-ul {
+ margin-right: 2vw;
+ margin-top: 0px;
+ list-style: none;
+ float: left;
+ li {
+ float: left;
+ width: 3.12vw;
+ text-align: center;
+ font-size: 1.7vh;
+ color: #333333;
+ }
+ li:hover {
+ color: #a00515;
+ border-bottom: 2px solid #a00515;
+ }
+ }
+}
+.selectedColor {
+ color: #a00515;
+ border-bottom: 2px solid #a00515;
+}
+.el-card__body {
+ text-align: center;
+ p {
+ height: 3.2vh;
+ line-height: 3.2vh;
+ font-size: 1.5vh;
+ margin: 0;
}
+ p.card-number {
+ color: #a00515;
+ font-size: 2.12vh;
+ height: 4.25vh;
+ line-height: 4.25vh;
+ margin: 0;
+ margin-top: 2.65vh;
+ }
+}
+.card-info {
+ height: 100%;
+}
+.card-info:hover {
+ text-align: center;
+ background-color: #a00515;
+ cursor: pointer;
+ color: #fff;
+ .card-number {
+ color: #fff;
+ }
+}
+.el-row {
+ margin-bottom: 1vh;
+ &:last-child {
+ margin-bottom: 0;
+ }
+}
+.el-col {
+ border-radius: 4px;
+}
+.bg-purple-dark {
+ background: #99a9bf;
+}
+.bg-purple {
+ background: #d3dce6;
+}
+.bg-purple-light {
+ background: #e5e9f2;
+}
+.grid-content {
+ border-radius: 4px;
+ min-height: 36px;
+}
+.row-bg {
+ padding: 10px 0;
+ background-color: #f9fafc;
+}
+.data-ul {
+ li {
+ line-height: 4.25vh;
+ }
+}
+</style>
+
+<style lang="scss">
+.dashboard-card {
+ width: 100%;
+div.el-col {
+ width: 20%;
+ height: 12.23vh;
+}
+.el-card__body {
+ padding: 0;
+ height: 100%;
+ overflow: hidden;
+}
+}
</style>
--
Gitblit v1.8.0