From a7977aac3851fa49a83f0a389221e6b3825dcb0b Mon Sep 17 00:00:00 2001
From: luoyb <412940104@qq.com>
Date: 星期一, 22 四月 2024 19:11:48 +0800
Subject: [PATCH] feat: 将劳资案件改为仲裁案件

---
 src/views/dashboard/index.vue | 1175 +++++++++++++++++++++++++++++++++-------------------------
 1 files changed, 668 insertions(+), 507 deletions(-)

diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue
index 64050f2..e64e473 100644
--- a/src/views/dashboard/index.vue
+++ b/src/views/dashboard/index.vue
@@ -1,540 +1,701 @@
 <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-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" />
   </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'
 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 },
   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,
+        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
       },
-      {
-        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)
   },
   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
+    },
+    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.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.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>

--
Gitblit v1.8.0