cmc-oa/oa-ui/src/views/index.vue

<!--
 * @Author: ysh
 * @Date: 2024-01-03 09:23:11
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2024-02-27 14:12:01
-->
<template>
  <div class="app-container home">
    <div class="left">
      <!-- 用户信息 -->
      <div class="user-info">
        <el-row align="bottom" :gutter="40">
          <el-col :span="4">
            <h3 style="font-weight: bold;text-align: right;font-size: 18px;"> {{ user.nickName }}，您好！ </h3>
            <!-- <h2 style="text-align: right;font-size: 24px;font-weight: bold;"> {{ 10 }}℃ </h2> -->
            <el-row style="font-size:12px;text-align: right;"> {{ "2024-01-22" }} {{ "星期一" }} </el-row>
          </el-col>
          <el-col :span="4" style="text-align: center;">
            <img :src="avatar" class="user-avatar" />
          </el-col>
          <el-col :span="16">
            <el-row style="font-size: 20px;font-weight: bold;margin-bottom: 20px;">
              {{ user.nickName }} <el-tag type="warning">{{ titles }}</el-tag>
            </el-row>
            <el-row>
              <el-col :span="4">
                <el-row class="userinfo-item">
                  入职时间
                </el-row>
                <el-row class="userinfo-data">
                  {{ user.entryDate != null ? user.entryDate.substring(0, 7) : user.entryDate }}
                </el-row>
              </el-col>
              <el-col :span="4">
                <el-row class="userinfo-item">
                  工龄
                </el-row>
                <el-row class="userinfo-data">
                  {{ getObtainSeniority(user.entryDate) }}
                </el-row>
              </el-col>
              <el-col :span="4">
                <el-row class="userinfo-item">
                  所在部门
                </el-row>
                <el-row class="userinfo-data">
                  {{ user.dept ? user.dept.deptName : '' }}
                </el-row>
              </el-col>
              <el-col :span="4">
                <el-row class="userinfo-item">
                  岗级
                </el-row>
                <el-row class="userinfo-data">
                  {{ engineerLevel }}
                </el-row>
              </el-col>
              <el-col :span="4">
                <el-row class="userinfo-item">
                  技术职称
                </el-row>
                <el-row class="userinfo-data">
                  {{ titles }}
                </el-row>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
      </div>
      <!-- 快捷菜单 -->
      <el-row class="meau" type="flex">
        <el-col :span="12" class="meau-left">
          <div class="titles">
            <span class="title-line"></span>
            <span class="title-text">快捷菜单</span>
            <span class="title-more">更多</span>
          </div>
          <el-row style="text-align: center;">
            <el-col :span="4" class="item" style="background-color: #42b983;padding:3px" @click.native="gotoTask">
              <el-row class="item-icon"><i class="el-icon-tickets"></i></el-row>
              <el-row>新建申请</el-row>
            </el-col>
            <!-- <el-col :span="4" class="item" style="background-color: #40A9FF;padding:3px">
              <el-row class="item-icon"><i class="el-icon-s-order"></i></el-row>
              <el-row>已办任务</el-row>
            </el-col> -->
          </el-row>
        </el-col>
        <el-col :span="12" class="meau-right">
          <div class="titles">
            <span class="title-line"></span>
            <span class="title-text">我的待办</span>
          </div>
          <el-row>
            <el-col :span="6" class="db-item" @click.native="$router.push({ path: '/task/todo' })">
              <el-row class="db-text">考核待审</el-row>
              <el-row class="db-number">{{ detail }}</el-row>
            </el-col>
            <el-col :span="6" class="db-item" @click.native="$router.push({ path: '/task/finished' })">
              <el-row class="db-text">已办任务</el-row>
              <el-row class="db-number">{{ finish }}</el-row>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
      <!-- 公告列表和日历 -->
      <el-row class="notice">
        <el-col :span="16">
          <div class="titles">
            <span class="title-line"></span>
            <span class="title-text">公告列表</span>
          </div>
          <el-table :data="noticeData" style="width: 100%">
            <el-table-column prop="type" label="公告分类">
            </el-table-column>
            <el-table-column prop="name" label="公告标题">
            </el-table-column>
            <el-table-column prop="time" label="发布时间">
            </el-table-column>
          </el-table>
        </el-col>
        <el-col :span="8">
          <el-calendar v-model="times" style="margin-top: 80px;">
          </el-calendar>
        </el-col>
      </el-row>
    </div>
    <div class="right">
      <div class="titles">
        <span class="title-line"></span>
        <span class="title-text">项目列表</span>
      </div>
      <el-table :data="projectData" style="width: 100%">
        <el-table-column prop="isFinshed" label="状态" width="90px">
          <template slot-scope="scope">
            <el-tag :type="scope.row.isFinished === '0' ? 'success' : 'warning'" disable-transitions>
              {{ scope.row.isFinished == '0' ? '进行中' : '已结束' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="projectNumber" label="项目编号" width="90px">
        </el-table-column>
        <el-table-column prop="projectLeader" label="项目负责人" width="90px">
        </el-table-column>
        <el-table-column prop="projectName" label="项目名称">
        </el-table-column>
      </el-table>
      <div style="text-align: right;margin-top: 20px;">
        <el-pagination @current-change="getProject" :current-page.sync="projectQueryParams.pageNum"
          :page-size="projectQueryParams.pageSize" layout="total, prev, pager, next,jumper" :total="projectTotal">
        </el-pagination>
      </div>

    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import { getUserProfile } from "@/api/system/user";
import { listProject } from "@/api/oa/project/project";
import { todoList } from "@/api/flowable/todo";
import { finishedList } from "@/api/flowable/finished";
import { getDicts as getDicts, getData } from '@/api/system/dict/data'
export default {
  name: "index",
  computed: {
    ...mapGetters(["avatar"]),
  },
  dicts: ['sys_user_engineerlevel', 'sys_user_titles'],
  data() {
    return {
      user: {},
      weather: {},
      noticeData: [],
      projectData: [],
      projectQueryParams: {
        pageNum: 1,
        pageSize: 16
      },
      projectTotal: 0,
      times: new Date(),
      detail: 0,
      finish: 0,
      engineerLevel: '',
      titles: '',
    };
  },
  created() {
    this.getUser();
    this.getDetail();
    this.getProject();
  },
  methods: {
    goTarget(href) {
      window.open(href, "_blank");
    },
    getUser() {
      getUserProfile().then(response => {
        this.user = response.data;
        for (let d of this.dict.type.sys_user_engineerlevel) {
          if (d.value == response.data.engineerLevel) {
            console.log(d);
            this.engineerLevel = d.label
          }
        }
        for (let t of this.dict.type.sys_user_titles) {
          if (t.value == response.data.titles) {
            console.log(t);
            this.titles = t.label
          }
        }
      });
    },
    gotoTask() {
      this.$router.push({ path: "/task/process" });
    },
    goTodo() {
      this.$router.push({ path: "/task/todo" });
    },
    getProject() {
      listProject(this.projectQueryParams).then(response => {
        this.projectData = response.rows;
        this.projectTotal = response.total;
      })
    },
    // 获取考核待办
    getDetail() {
      todoList({
        pageNum: 1,
        pageSize: 10,
        name: null,
        category: 'assess'
      }).then(response => {
        this.detail = response.data.total;
      });
    },
    getFinish() {
      finishedList({
        pageNum: 1,
        pageSize: 10,
        name: null,
        category: null,
        key: null,
        tenantId: null,
        deployTime: null,
        derivedFrom: null,
        derivedFromRoot: null,
        parentDeploymentId: null,
        engineVersion: null
      }).then(response => {
        this.finish = response.data.total;
      })
    },
    // 获取工龄
    getObtainSeniority(entryDate) {
      if (entryDate != "" && entryDate != undefined && entryDate != null) {
        let curYear = new Date();
        let e = entryDate.substring(0, 4);
        return (curYear.getFullYear() - parseInt(e)) + '年'
      }


    }
  },
};
</script>

<style scoped lang="scss">
.home {
  display: flex;
  background-color: #f5f5f5;
}

.left {
  flex: 2;
  margin-right: 20px;

  .user-info {
    width: 100%;
    height: 160px;
    padding: 10px;
    margin-bottom: 20px;
    background-color: #fff;

    .user-avatar {
      width: 120px;
      height: 120px;
      border-radius: 50%;
    }

    .userinfo-item {
      font-size: 18px;
      font-family: 'Times New Roman', '黑体', Times, serif, ;
      font-weight: bold;
      color: #6D6D6D;
      margin: 5px;
    }

    .userinfo-data {
      font-size: 14px;
      font-family: '微软雅黑';
      font-weight: bold;
      margin: 5px;
    }
  }

  .meau {
    height: 150px;
    margin-bottom: 20px;

    .meau-left {
      background-color: #fff;
      padding: 0px 20px 10px;
      margin-right: 20px;
    }

    .meau-right {
      background-color: #fff;
      padding: 0px 20px 10px;
      margin-left: 20px;

      .db-item {
        text-align: center;
        background-color: #F5F5F5;
        padding: 10px 20px;
        margin: 0 5px;
        cursor: pointer;

        .db-text {}

        .db-number {
          font-weight: bold;
          color: #e67153;
          line-height: 30px;
          font-size: 19px;
        }
      }
    }

    .item {
      color: #fff;
      margin: 0 10px;
      cursor: pointer;
    }

    .item-icon {
      width: 100%;
      height: 100%;
      text-align: center;

      i {
        display: inline-block;
        font-size: 40px;
        color: #fff;
      }
    }
  }

  .notice {
    padding: 0px 20px 10px;
    background-color: #fff;
  }
}

.right {
  padding: 0px 20px 10px;
  background-color: #fff;
  flex: 1;
}

.border {
  border: 1px solid #CDCDCD;
}

.titles {
  line-height: 55px;
  vertical-align: middle;
  font-weight: bold;
  position: relative;
  margin-bottom: 10px;

  .title-line {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate(0%, -50%);
    width: 5px;
    height: 30px;
    background-color: #42b983;
  }

  .title-text {
    display: inline-block;
    padding-left: 15px;
  }

  .title-more {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translate(0%, -50%);
    color: #40A9FF;
    font-size: 14px;
    cursor: pointer;
  }

  .title-more:hover {
    color: #e4b82a;
  }
}
</style>