首页修改为待办事项

src/views/home copy.vue

@@ -0,0 +1,74 @@
+<template>
+  <div id="home">
+    <el-card v-if="!loading" shadow="hover">
+      <el-row type="flex" align="middle" justify="center" style="margin:10px">
+        <el-col :span="12">
+          <el-card shadow="hover" style="text-align:center">全年计划共计: {{ data.planstu }} 人 </el-card>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-card shadow="hover">
+            <iscome :istrain="data.trainstu" :nottrain="data.notrainstu"></iscome>
+          </el-card>
+        </el-col>
+        <el-col :span="12">
+          <el-card shadow="hover">
+            <leave :qj="data.levelqj" :exit="data.levelexit"></leave>
+          </el-card>
+        </el-col>
+      </el-row>
+    </el-card>
+  </div>
+</template>
+
+<script>
+import iscome from './home/iscome.vue';
+import leave from './home/leave.vue';
+import { mapState, createNamespacedHelpers } from 'vuex';
+const { mapActions: count } = createNamespacedHelpers('count');
+export default {
+  name: 'home',
+  props: {},
+  components: { leave, iscome },
+  data: function() {
+    return {
+      loading: true,
+      data: {},
+    };
+  },
+  created() {
+    this.search();
+  },
+  methods: {
+    ...count(['schoolQuery']),
+    async search() {
+      let res = await this.schoolQuery(this.user.code);
+      // 柱状图
+      //levelexit:退出;
+      //levelqj:请假;
+      //饼形图
+      //notrainstu:没参加培训的;
+      //trainstu:已参加学生数;
+
+      //planstu:计划总人数;
+
+      //饼形图,哪个学校多少人
+      //schstu:学校上报人数;
+      if (this.$checkRes(res)) this.$set(this, `data`, res.data);
+      this.loading = false;
+    },
+  },
+  computed: {
+    ...mapState(['user']),
+    pageTitle() {
+      return `${this.$route.meta.title}`;
+    },
+  },
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+};
+</script>
+
+<style lang="less" scoped></style>

src/views/home.vue

@@ -6,16 +6,35 @@
           <el-card shadow="hover" style="text-align:center">全年计划共计: {{ data.planstu }} 人 </el-card>
         </el-col>
       </el-row>
-      <el-row :gutter="20">
-        <el-col :span="12">
-          <el-card shadow="hover">
-            <iscome :istrain="data.trainstu" :nottrain="data.notrainstu"></iscome>
-          </el-card>
+      <el-row class="one_1">
+        <el-col :span="24" class="title">
+          <span>待办事项</span>
         </el-col>
-        <el-col :span="12">
-          <el-card shadow="hover">
-            <leave :qj="data.levelqj" :exit="data.levelexit"></leave>
-          </el-card>
+        <el-col :span="24" class="info">
+          <el-row class="info_1">
+            <el-col :span="6" class="list" @click.native="toView('0')">
+              <el-row>
+                <el-col :span="20" class="l">
+                  <el-col :span="24" class="name">学生请假或退出</el-col>
+                  <el-col :span="24" class="num"><span class="dw">未处理</span>{{ data.leaveNum || 0 }}<span class="dw">个</span></el-col>
+                </el-col>
+                <el-col :span="4" class="r">
+                  <i class="el-icon-s-check"></i>
+                </el-col>
+              </el-row>
+            </el-col>
+            <el-col :span="6" class="list" @click.native="toView('1')">
+              <el-row>
+                <el-col :span="20" class="l">
+                  <el-col :span="24" class="name">计划安排上报名单</el-col>
+                  <el-col :span="24" class="num"><span class="dw">未处理</span>{{ data.uploadNum || 0 }}<span class="dw">个</span></el-col>
+                </el-col>
+                <el-col :span="4" class="r">
+                  <i class="el-icon-cpu"></i>
+                </el-col>
+              </el-row>
+            </el-col>
+          </el-row>
         </el-col>
       </el-row>
     </el-card>
@@ -23,14 +42,12 @@
 </template>
 
 <script>
-import iscome from './home/iscome.vue';
-import leave from './home/leave.vue';
 import { mapState, createNamespacedHelpers } from 'vuex';
 const { mapActions: count } = createNamespacedHelpers('count');
 export default {
   name: 'home',
   props: {},
-  components: { leave, iscome },
+  components: {},
   data: function() {
     return {
       loading: true,
@@ -44,20 +61,14 @@ export default {
     ...count(['schoolQuery']),
     async search() {
       let res = await this.schoolQuery(this.user.code);
-      // 柱状图
-      //levelexit:退出;
-      //levelqj:请假;
-      //饼形图
-      //notrainstu:没参加培训的;
-      //trainstu:已参加学生数;
-
-      //planstu:计划总人数;
-
-      //饼形图,哪个学校多少人
-      //schstu:学校上报人数;
       if (this.$checkRes(res)) this.$set(this, `data`, res.data);
       this.loading = false;
     },
+    // 查看
+    toView(type) {
+      if (type == '0') this.$router.push({ path: '/train/plan/leave' });
+      else this.$router.push({ path: '/newPlan/index' });
+    },
   },
   computed: {
     ...mapState(['user']),
@@ -71,4 +82,67 @@ export default {
 };
 </script>
 
-<style lang="less" scoped></style>
+<style lang="less" scoped>
+.one_1 {
+  margin: 0 0 20px 0;
+  .title {
+    margin: 0 0 20px 0;
+    span {
+      background-color: #439eff;
+      color: #ffffff;
+      padding: 5px 10px;
+      border-radius: 5px;
+      font-weight: bold;
+    }
+  }
+  .info {
+    .info_1 {
+      .list {
+        max-width: 23%;
+        margin: 0 10px;
+        border-radius: 5px;
+        padding: 15px 10px;
+        background: linear-gradient(to bottom, #439eff 90%, #f1f1f1);
+        .l {
+          .name {
+            font-size: 18px;
+            font-weight: bold;
+            color: #ffffff;
+            margin: 0 0 10px 0;
+          }
+          .num {
+            display: flex;
+            align-items: center;
+            color: #ffffff;
+            font-size: 22px;
+            font-weight: bold;
+            .dw {
+              padding: 0 5px;
+              font-size: 12px;
+              color: #f1f1f1;
+            }
+          }
+        }
+        .r {
+          text-align: center;
+          padding: 5px 0;
+          font-size: 40px;
+          color: #ffffff;
+        }
+      }
+      .list:nth-child(2) {
+        background: linear-gradient(to bottom, #ffa500 90%, #f1f1f1);
+      }
+      .list:nth-child(3) {
+        background: linear-gradient(to bottom, #00ff7f 90%, #f1f1f1);
+      }
+      .list:nth-child(4) {
+        background: linear-gradient(to bottom, #ff0000 90%, #f1f1f1);
+      }
+      .list:hover {
+        cursor: pointer;
+      }
+    }
+  }
+}
+</style>