From 454c6e68f92b16e38058f3412a6cff22ef885c38 Mon Sep 17 00:00:00 2001
From: yz_08 <yz_0812@outlook.com>
Date: 星期四, 21 一月 2021 18:59:57 +0800
Subject: [PATCH] 修改首页 添加信息录入
---
vue.config.js | 2
src/views/dashboard/index.vue | 572 +++----------------------------------
src/layout/index.vue | 2
src/views/user/Informationinput.vue | 306 ++++++++++++++++++++
4 files changed, 358 insertions(+), 524 deletions(-)
diff --git a/src/layout/index.vue b/src/layout/index.vue
index 0ac7be4..22e1863 100644
--- a/src/layout/index.vue
+++ b/src/layout/index.vue
@@ -8,7 +8,7 @@
<tags-view v-if="needTagsView" />
</div>
<app-main />
- <div class="footer">© 2020 <a target="_blank" href="https://mrbird.cc">MrBird</a> - FEBS</div>
+ <div class="footer">© 2021 <a target="_blank" href="">中保亚太人力资源管理系统</a></div>
<right-panel v-if="showSettings">
<settings />
</right-panel>
diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue
index 64050f2..5e2e5c4 100644
--- a/src/views/dashboard/index.vue
+++ b/src/views/dashboard/index.vue
@@ -1,540 +1,68 @@
<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-col>
+ <el-row>
+ <el-col :span="24"><div class="grid-content bg-purple-dark" /></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-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-row :gutter="20">
+ <el-col :span="4"><div class="grid-content bg-purple" /></el-col>
+ <el-col :span="4"><div class="grid-content bg-purple" /></el-col>
+ <el-col :span="4"><div class="grid-content bg-purple" /></el-col>
+ <el-col :span="4"><div class="grid-content bg-purple" /></el-col>
+ <el-col :span="4"><div class="grid-content bg-purple" /></el-col>
+ <el-col :span="4"><div class="grid-content bg-purple" /></el-col>
+ </el-row>
+ <el-row :gutter="20">
+ <el-col :span="4"><div class="grid-content bg-purple" /></el-col>
+ <el-col :span="4"><div class="grid-content bg-purple" /></el-col>
+ <el-col :span="4"><div class="grid-content bg-purple" /></el-col>
+ <el-col :span="4"><div class="grid-content bg-purple" /></el-col>
+ <el-col :span="4"><div class="grid-content bg-purple" /></el-col>
+ <el-col :span="4"><div class="grid-content bg-purple" /></el-col>
+ </el-row>
+ <el-row :gutter="20">
+ <el-col :span="4"><div class="grid-content bg-purple" /></el-col>
+ <el-col :span="4"><div class="grid-content bg-purple" /></el-col>
+ <el-col :span="4"><div class="grid-content bg-purple" /></el-col>
+ <el-col :span="4"><div class="grid-content bg-purple" /></el-col>
+ <el-col :span="4"><div class="grid-content bg-purple" /></el-col>
+ <el-col :span="4"><div class="grid-content bg-purple" /></el-col>
</el-row>
</div>
</template>
<script>
-import echarts from 'echarts'
-import { parseTime } from '@/utils'
-import countTo from 'vue-count-to'
-import resize from '@/components/Charts/mixins/resize'
export default {
- name: 'Dashboard',
- components: { countTo },
- filters: {
- portFilter(v) {
- const map = {
- 0: 'danger',
- 1: 'success'
- }
- return map[status]
- }
- },
- mixins: [resize],
- data() {
- return {
- server: [{
- id: 1,
- name: 'FEBS-Auth',
- port: '8101',
- description: '微服务认证服务器'
- },
- {
- id: 2,
- name: 'FEBS-Gateway',
- port: '8301',
- description: '微服务网关'
- },
- {
- id: 3,
- name: 'FEBS-Server-System',
- port: '8201',
- description: '微服务子系统，系统模块'
- },
- {
- 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}`)
- }
- },
- mounted() {
- this.welcomeMessage = this.welcome()
- this.initIndexData()
- },
- methods: {
- resolveIcon(icon) {
- return require(`@/assets/icons/${icon}`)
- },
- 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]}`
- },
- initIndexData: function() {
- this.$get('system/user/index').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)
- })
- }
- }
+
}
</script>
<style lang="scss">
- .main {
- .el-card {
- border: none;
- border-radius: 2px;
+ .el-row {
+ margin-bottom: 20px;
+ &:last-child {
+ margin-bottom: 0;
}
- .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;
- }
+ }
+ .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;
}
</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;
- }
- }
- }
</style>
diff --git a/src/views/user/Informationinput.vue b/src/views/user/Informationinput.vue
new file mode 100644
index 0000000..26ad661
--- /dev/null
+++ b/src/views/user/Informationinput.vue
@@ -0,0 +1,306 @@
+<template>
+ <div>
+ <el-row>
+ <el-col :span="24">信息录入</el-col>
+ </el-row>
+ <el-divider />
+ <el-container>
+ <el-aside width="200px">
+ <el-card class="info-card" shadow="always" @click.native="isShow(showArr[0],0)">
+ 基本信息
+ </el-card>
+ <el-card class="info-card" shadow="always" @click.native="isShow(showArr[1],1)">
+ 工作信息
+ </el-card>
+ <el-card class="info-card" shadow="always" @click.native="isShow(showArr[2],2)">
+ 工作经历
+ </el-card>
+ <el-card class="info-card" shadow="always" @click.native="isShow(showArr[3],3)">
+ 体检信息
+ </el-card>
+ <el-card class="info-card" shadow="always" @click.native="isShow(showArr[4],4)">
+ 合同信息
+ </el-card>
+ <el-card class="info-card" shadow="always" @click.native="isShow(showArr[5],5)">
+ 考勤情况
+ </el-card>
+ <el-card class="info-card" shadow="always" @click.native="isShow(showArr[6],6)">
+ 请假记录
+ </el-card>
+ <el-card class="info-card" shadow="always" @click.native="isShow(showArr[7],7)">
+ 调岗记录
+ </el-card>
+ <el-card class="info-card" shadow="always" @click.native="isShow(showArr[8],8)">
+ 备注
+ </el-card>
+ <el-card class="info-card" shadow="always" @click.native="isShow(showArr[9],9)">
+ 记录截图
+ </el-card>
+ </el-aside>
+ <el-main>
+ <el-table
+ v-show="showArr[0]"
+ :data="tableData"
+ style="width: 100%"
+ >
+ <el-table-column
+ prop="date"
+ label="日期"
+ width="180"
+ />
+ <el-table-column
+ prop="name"
+ label="姓名"
+ width="180"
+ />
+ <el-table-column
+ prop="address"
+ label="地址"
+ />
+ </el-table>
+ <el-table
+ v-show="showArr[1]"
+ :data="tableData"
+ style="width: 100%"
+ >
+ <el-table-column
+ prop="date"
+ label="日期"
+ width="180"
+ />
+ <el-table-column
+ prop="name"
+ label="姓名"
+ width="180"
+ />
+ <el-table-column
+ prop="address"
+ label="地址"
+ />
+ </el-table>
+ <el-table
+ v-show="showArr[2]"
+ :data="tableData"
+ style="width: 100%"
+ >
+ <el-table-column
+ prop="date"
+ label="日期"
+ width="180"
+ />
+ <el-table-column
+ prop="name"
+ label="姓名"
+ width="180"
+ />
+ <el-table-column
+ prop="address"
+ label="地址"
+ />
+ </el-table>
+ <el-table
+ v-show="showArr[3]"
+ :data="tableData"
+ style="width: 100%"
+ >
+ <el-table-column
+ prop="date"
+ label="日期"
+ width="180"
+ />
+ <el-table-column
+ prop="name"
+ label="姓名"
+ width="180"
+ />
+ <el-table-column
+ prop="address"
+ label="地址"
+ />
+ </el-table>
+ <el-table
+ v-show="showArr[4]"
+ :data="tableData"
+ style="width: 100%"
+ >
+ <el-table-column
+ prop="date"
+ label="日期"
+ width="180"
+ />
+ <el-table-column
+ prop="name"
+ label="姓名"
+ width="180"
+ />
+ <el-table-column
+ prop="address"
+ label="地址"
+ />
+ </el-table>
+ <el-table
+ v-show="showArr[5]"
+ :data="tableData"
+ style="width: 100%"
+ >
+ <el-table-column
+ prop="date"
+ label="日期"
+ width="180"
+ />
+ <el-table-column
+ prop="name"
+ label="姓名"
+ width="180"
+ />
+ <el-table-column
+ prop="address"
+ label="地址"
+ />
+ </el-table>
+ <el-table
+ v-show="showArr[6]"
+ :data="tableData"
+ style="width: 100%"
+ >
+ <el-table-column
+ prop="date"
+ label="日期"
+ width="180"
+ />
+ <el-table-column
+ prop="name"
+ label="姓名"
+ width="180"
+ />
+ <el-table-column
+ prop="address"
+ label="地址"
+ />
+ </el-table>
+ <el-table
+ v-show="showArr[7]"
+ :data="tableData"
+ style="width: 100%"
+ >
+ <el-table-column
+ prop="date"
+ label="日期"
+ width="180"
+ />
+ <el-table-column
+ prop="name"
+ label="姓名"
+ width="180"
+ />
+ <el-table-column
+ prop="address"
+ label="地址"
+ />
+ </el-table>
+ <el-table
+ v-show="showArr[8]"
+ :data="tableData"
+ style="width: 100%"
+ >
+ <el-table-column
+ prop="date"
+ label="日期"
+ width="180"
+ />
+ <el-table-column
+ prop="name"
+ label="姓名"
+ width="180"
+ />
+ <el-table-column
+ prop="address"
+ label="地址"
+ />
+ </el-table>
+ <el-table
+ v-show="showArr[9]"
+ :data="tableData"
+ style="width: 100%"
+ >
+ <el-table-column
+ prop="date"
+ label="日期"
+ width="180"
+ />
+ <el-table-column
+ prop="name"
+ label="姓名"
+ width="180"
+ />
+ <el-table-column
+ prop="address"
+ label="地址"
+ />
+ </el-table>
+ </el-main>
+ </el-container>
+
+ </div>
+</template>
+<script>
+export default {
+ data() {
+ return {
+ thisShowIndex: 0,
+ showArr: [true, false, false, false, false, false, false, false, false, false],
+ tableData: [{
+ date: '2016-05-02',
+ name: '王小虎',
+ address: '上海市普陀区金沙江路 1518 弄'
+ }, {
+ date: '2016-05-04',
+ name: '王小虎',
+ address: '上海市普陀区金沙江路 1517 弄'
+ }, {
+ date: '2016-05-01',
+ name: '王小虎',
+ address: '上海市普陀区金沙江路 1519 弄'
+ }, {
+ date: '2016-05-03',
+ name: '王小虎',
+ address: '上海市普陀区金沙江路 1516 弄'
+ }]
+ }
+ },
+ methods: {
+ isShow(tableShow, index) {
+ if (tableShow) {
+ this.showArr[index] = false
+ } else {
+ this.showArr[index] = true
+ }
+ this.showArr[this.thisShowIndex] = false
+ this.thisShowIndex = index
+ }
+ }
+}
+</script>
+<style>
+.info-card{
+ margin-top: 20px;
+}
+ .el-header, .el-footer {
+ background-color: #B3C0D1;
+ color: #333;
+ text-align: center;
+ line-height: 60px;
+ }
+
+ .el-aside {
+ background-color: #D3DCE6;
+ color: #333;
+ text-align: center;
+ }
+
+ .el-main {
+ background-color: #E9EEF3;
+ color: #333;
+ text-align: center;
+ }
+</style>
diff --git a/vue.config.js b/vue.config.js
index 3b722e1..8871fce 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -36,7 +36,7 @@
// change xxx-api/login => mock/login
// detail: https://cli.vuejs.org/config/#devserver-proxy
[process.env.VUE_APP_BASE_API]: {
- target: 'http://localhost:8301/',
+ target: 'http://120.24.23.155:8301/',
changeOrigin: true,
pathRewrite: {
['^' + process.env.VUE_APP_BASE_API]: ''
--
Gitblit v1.8.0