修改首页 添加信息录入

yz_08

2021-01-21 454c6e68f92b16e38058f3412a6cff22ef885c38

修改首页 添加信息录入

 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>

 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>

 src/views/user/Informationinput.vue

New file
@@ -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>

 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]: ''