首页修改

src/assets/styles/home.scss

@@ -15,11 +15,35 @@
   background: $--color-background;
   z-index: 98;
 }
-.home-main {
+.home-body-content {
   position: relative;
   padding: 20px 30px 50px 250px;
   min-height: 100%;
 }
+.home-page-main {
+  .home-navs {
+    bottom: auto;
+    height: 50px;
+    border-radius: 0;
+    background-color: transparent;
+    &::before {
+      display: none;
+    }
+    .head-logo-content {
+      padding: 5px 0;
+      border: none;
+    }
+    .el-menu {
+      display: none;
+    }
+  }
+  .home-breadcrumb {
+    display: none;
+  }
+  .home-body-content {
+    padding-left: 30px;
+  }
+}
 
 /* navs */
 .home-navs {
@@ -361,3 +385,140 @@
     color: $--color-text-gray;
   }
 }
+
+// home-page
+.home-page {
+  width: 1000px;
+  margin: 0 auto;
+
+  .tab-summary {
+    margin-bottom: 20px;
+    font-size: 0;
+
+    &-item {
+      position: relative;
+      display: inline-block;
+      vertical-align: top;
+      width: 137px;
+      margin-right: 10px;
+      border-radius: 16px;
+      padding: 20px;
+      color: #fff;
+      text-align: right;
+
+      &:nth-of-type(1) {
+        background: #9877ff;
+        box-shadow: 0px 10px 10px 0px rgba(152, 119, 255, 0.3);
+      }
+      &:nth-of-type(2) {
+        background: #3fcb98;
+        box-shadow: 0px 10px 10px 0px rgba(63, 203, 152, 0.3);
+      }
+    }
+    &-rp {
+      display: block;
+      position: absolute;
+      width: 6px;
+      height: 6px;
+      background: #fe646a;
+      border: 2px solid #eff0f5;
+      top: -2px;
+      left: -2px;
+      border-radius: 50%;
+      z-index: 9;
+    }
+    &-icon {
+      display: block;
+      position: absolute;
+      top: 20px;
+      left: 20px;
+      font-size: 16px;
+      z-index: auto;
+    }
+    &-title {
+      font-size: 12px;
+      margin-bottom: 7px;
+    }
+    &-cont {
+      height: 38px;
+      font-size: 32px;
+      font-weight: bold;
+      line-height: 38px;
+    }
+  }
+
+  .tab-box {
+    border-radius: 16px;
+    background-color: #fff;
+    margin-bottom: 20px;
+    min-height: 100px;
+    padding: 20px;
+    &-title {
+      font-weight: bold;
+      font-size: 16px;
+      color: #1f222f;
+      margin-bottom: 10px;
+    }
+  }
+  .shortcut-list {
+    font-size: 0;
+    white-space: nowrap;
+    overflow: auto;
+  }
+  .shortcut-item {
+    display: inline-block;
+    vertical-align: top;
+    padding: 10px 0;
+    width: 100px;
+    text-align: center;
+  }
+  .shortcut-icon {
+    width: 40px;
+    height: 40px;
+    background: #3a5ae5;
+    border-radius: 6px;
+    font-size: 20px;
+    line-height: 40px;
+    margin: 0 auto;
+  }
+  .shortcut-name {
+    margin-top: 12px;
+    font-size: 14px;
+    font-weight: 500;
+    color: #434656;
+  }
+
+  .task-item {
+    display: flex;
+    justify-content: space-between;
+    align-items: stretch;
+    padding: 10px 0;
+    &:not(:last-child) {
+      border-bottom: 1px solid #eff0f5;
+    }
+
+    &-cont {
+      flex-grow: 2;
+      margin: 0 10px;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      overflow: hidden;
+      line-height: 22px;
+    }
+    &-type,
+    &-action {
+      flex-shrink: 0;
+      flex-grow: 0;
+    }
+
+    &-type {
+      width: 60px;
+      padding: 5px;
+      line-height: 1;
+      font-size: 12px;
+      color: #fff;
+      border-radius: 6px;
+      text-align: center;
+    }
+  }
+}

src/constants/menus-data.js

@@ -1,4 +1,13 @@
 export default [
+  {
+    id: "1272831",
+    name: "首页",
+    url: "HomePage",
+    type: "MENU",
+    parentId: "1",
+    sequence: 1,
+    enable: true
+  },
   {
     id: "2",
     name: "用户管理",

src/modules/exam/api.js

@@ -51,6 +51,9 @@ export const analysisTaskListPage = datas => {
 export const analysisTaskCount = () => {
   return $postParam("/api/admin/work/grade/task/ready_count", {});
 };
+export const auditedTaskCount = () => {
+  return $postParam("/api/admin/exam/task/review_list_audited_count", {});
+};
 
 // exam-task-manage
 export const examTaskListPage = datas => {

src/router.js

@@ -2,6 +2,7 @@ import Vue from "vue";
 import Router from "vue-router";
 
 import Home from "./views/Home.vue";
+import HomePage from "./views/HomePage.vue";
 import NotFound from "./views/404.vue";
 
 import login from "./modules/login/router";
@@ -43,7 +44,19 @@ let router = new Router({
       path: "/home/:nextRouter?",
       name: "Home",
       component: Home,
-      children: [...base, ...exam, ...print, ...customer, ...stmms, ...analysis]
+      children: [
+        {
+          path: "/home-page",
+          name: "HomePage",
+          component: HomePage
+        },
+        ...base,
+        ...exam,
+        ...print,
+        ...customer,
+        ...stmms,
+        ...analysis
+      ]
     },
     { ...login },
     { ...admin },

src/views/Home.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="home">
+  <div :class="['home', { 'home-page-main': IS_HOME_PAGE }]">
     <div class="home-header">
       <div class="head-menu menu-list">
         <ul>
@@ -92,7 +92,7 @@
     </div>
 
     <div class="home-body">
-      <div class="home-main">
+      <div class="home-body-content">
         <div class="home-breadcrumb" v-if="breadcrumbs.length">
           <span class="breadcrumb-tips">
             <i class="icon icon-location"></i>
@@ -145,6 +145,7 @@ export default {
     return {
       MENU_ICONS,
       privileges: [],
+      homePageMenu: null,
       menus: [],
       curMenu: { url: "", children: [] },
       curRouteName: "",
@@ -170,10 +171,14 @@ export default {
     }
   },
   computed: {
-    ...mapState("exam", ["waitTaskCount"])
+    ...mapState("exam", ["waitTaskCount"]),
+    IS_HOME_PAGE() {
+      return this.$route.name === "HomePage";
+    }
   },
   created() {
-    this.initData();
+    this.initData1();
+    // this.initData();
   },
   methods: {
     ...mapActions("exam", ["updateWaitTaskCount"]),
@@ -181,10 +186,19 @@ export default {
       // 开发阶段专用
       this.initPrivilegeMap(localMenus);
       this.privileges = this.transformMenu(localMenus);
+      this.homePageMenu = localMenus.find(item => item.url === "HomePage");
       this.menus = this.getMenu();
 
+      if (this.IS_HOME_PAGE) return;
+
       if (this.$route.name === "Home") {
-        this.toMenu(this.menus[0]);
+        if (this.homePageMenu) {
+          this.$router.replace({
+            name: this.homePageMenu.url
+          });
+        } else {
+          this.toMenu(this.menus[0]);
+        }
         return;
       }
 
@@ -211,10 +225,19 @@ export default {
       const data = await sysMenu();
       this.initPrivilegeMap(data.privileges);
       this.privileges = this.transformMenu(data.privileges);
+      this.homePageMenu = data.privileges.find(item => item.url === "HomePage");
       this.menus = this.getMenu();
 
+      if (this.IS_HOME_PAGE) return;
+
       if (this.$route.name === "Home") {
-        this.toMenu(this.menus[0]);
+        if (this.homePageMenu) {
+          this.$router.replace({
+            name: this.homePageMenu.url
+          });
+        } else {
+          this.toMenu(this.menus[0]);
+        }
         return;
       }
 
@@ -239,15 +262,17 @@ export default {
       }
     },
     transformMenu(list) {
-      return list.map(item => {
-        return {
-          id: item.id,
-          parentId: item.parentId,
-          name: item.name,
-          type: item.type,
-          url: item.url
-        };
-      });
+      return list
+        .filter(item => item.url !== "HomePage")
+        .map(item => {
+          return {
+            id: item.id,
+            parentId: item.parentId,
+            name: item.name,
+            type: item.type,
+            url: item.url
+          };
+        });
     },
     getMenu() {
       const getChildren = id => {

src/views/HomePage.vue

@@ -0,0 +1,167 @@
+<template>
+  <div class="home-page">
+    <div v-if="hasWaitTaskPrivilege" class="tab-summary">
+      <div class="tab-summary-item">
+        <i v-if="summary.waitTaskCount" class="tab-summary-rp"></i>
+        <i class="tab-summary-icon icon icon-wait"></i>
+        <h4 class="tab-summary-title">代办任务</h4>
+        <p class="tab-summary-cont">{{ summary.waitTaskCount }}</p>
+      </div>
+      <div class="tab-summary-item">
+        <i class="tab-summary-icon icon icon-done"></i>
+        <h4 class="tab-summary-title">已办任务</h4>
+        <p class="tab-summary-cont">{{ summary.doneTaskCount }}</p>
+      </div>
+    </div>
+    <div class="tab-box tab-shortcut">
+      <h2 class="tab-box-title">快捷入口</h2>
+      <div class="tab-box-body shortcut-list">
+        <div
+          v-for="(item, ind) in shortcutList"
+          :key="ind"
+          class="shortcut-item"
+        >
+          <div class="shortcut-icon"><i :class="['icon', item.icon]"></i></div>
+          <div class="shortcut-name">{{ item.name }}</div>
+        </div>
+      </div>
+    </div>
+    <div v-if="hasWaitTaskPrivilege" class="tab-box tab-task">
+      <h2 class="tab-box-title">代办任务</h2>
+      <div class="tab-box-body task-list">
+        <div v-for="item in waitTaskList" :key="item.id" class="task-item">
+          <div class="task-item-type"></div>
+          <div class="task-item-cont"></div>
+          <div class="task-item-action action-column">
+            <el-button class="btn-primary" type="text" @click="toDo(item)"
+              >立即处理</el-button
+            >
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="tab-box tab-guide">
+      <h2 class="tab-box-title">业务引导图</h2>
+      <div class="tab-box-body"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapState, mapActions } from "vuex";
+import shortcutData from "../constants/shortcutData";
+import {
+  auditedTaskCount,
+  waitExamTaskListPage,
+  stmmsTaskListPage,
+  analysisTaskListPage
+} from "../modules/exam/api";
+import { userSysRoles } from "../modules/stmms/api";
+
+export default {
+  name: "home-page",
+  data() {
+    return {
+      hasWaitTaskPrivilege: false,
+      summary: {
+        waitTaskCount: 0,
+        doneTaskCount: 0
+      },
+      shortcutList: [],
+      waitTaskList: [],
+      waitTaskFilter: {
+        pageNumber: 1,
+        pageSize: 2
+      }
+    };
+  },
+  computed: {
+    ...mapState(["privilegeMap"]),
+    ...mapState("exam", ["waitTaskCount"])
+  },
+  created() {
+    this.initShortcutList();
+  },
+  methods: {
+    ...mapActions("exam", ["updateWaitTaskCount"]),
+    async initShortcutList() {
+      const validRouters = Object.keys(this.privilegeMap);
+      let validShortcutData = shortcutData
+        .filter(item => validRouters.includes(item.router))
+        .map(item => {
+          return {
+            ...item
+          };
+        });
+
+      const roleSource = this.$ls.get("user", {
+        roleSource: []
+      });
+
+      // 阅卷角色查询
+      if (validRouters.includes("MarkerLogin")) {
+        const markerRoles = await userSysRoles();
+        validShortcutData = validShortcutData.filter(
+          item =>
+            item.url === "MarkerLogin" &&
+            markerRoles.includes(item.params.trigger)
+        );
+      }
+
+      // 报告角色查询
+      if (validRouters.includes("AnalysisReportView")) {
+        const analysisRoles = roleSource.filter(
+          item => item.roleSource === "ANALYSIS"
+        );
+        validShortcutData = validShortcutData.filter(
+          item =>
+            item.url === "AnalysisReportView" &&
+            analysisRoles.includes(item.params.trigger)
+        );
+      }
+
+      this.shortcutList = validShortcutData;
+
+      // 代办任务判断
+      if (this.privilegeMap["WaitTask"]) {
+        this.getWaitTaskData();
+      }
+    },
+    async getWaitTaskData() {
+      const doneTaskCount = await auditedTaskCount();
+      this.summary.doneTaskCount = doneTaskCount || 0;
+      await this.updateWaitTaskCount();
+      this.summary.waitTaskCount = this.waitTaskCount;
+
+      this.waitTaskList = [];
+      this.getFlowWaitTaskList();
+      this.getStmmsWaitTaskList();
+      this.getAnalysisWaitTaskList();
+    },
+    async getFlowWaitTaskList() {
+      const data = await waitExamTaskListPage(this.waitTaskFilter);
+      const dataList = data.records;
+      this.waitTaskList.push(...dataList);
+    },
+    async getStmmsWaitTaskList() {
+      const data = await stmmsTaskListPage(this.waitTaskFilter);
+      const dataList = data.records;
+      this.waitTaskList.push(...dataList);
+    },
+    async getAnalysisWaitTaskList() {
+      const data = await analysisTaskListPage(this.waitTaskFilter);
+      const dataList = data.records;
+      this.waitTaskList.push(...dataList);
+    },
+    toMenu(item) {
+      this.$router.push({
+        name: item.router,
+        params: item.params
+      });
+    },
+    toDo(item) {
+      console.log(item);
+    }
+  }
+};
+</script>

src/views/Main.vue

@@ -1,15 +0,0 @@
-<template>
-  <div class="main">
-    main
-  </div>
-</template>
-
-<script>
-export default {
-  name: "main",
-  data() {
-    return {};
-  },
-  methods: {}
-};
-</script>