feat(dashboard): 添加转正提醒功能

yubo

2026-03-10 74fd2e9414fe5bb67ad8743aa370a07fa5f8caf4

 src/views/dashboard/index.vue

@@ -1,540 +1,745 @@
<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="showbl('不良记录','3')">
          <p class="card-number">{{ total.sxyg }}</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" />
  </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'

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 },
  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,
        dialgoShowProbation: false,
        dialogShowProbation: 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
      },
      {
        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
      this.$refs.zzUser.setjobUser(btime, etime, index, null)
    },
    cancleZzUser() {
      this.dialog.dialogShowProbation = false
    },
    fetchProbationCount() {
      this.$get('hr/empBaseInfo/probation/alert', {
        pageSize: 1,
        pageNum: 1,
        delFlag: 0,
        empStatus: 0
      }).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
    }
  }
}
</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>