fix(遵义官网)：背景图替换、个人中心优化、删除不相关文件

.gitignore

@@ -20,3 +20,4 @@ yarn-error.log*
 *.sln
 *.sw?
 .history/
+*.orig

src/App.vue

@@ -77,8 +77,11 @@ export default {
     ...mapGetters(["userInfo"]),
   },
   watch: {
-    $route(val) {
-      this.defaultActive = val.path;
+    $route: {
+      handler(val) {
+        this.defaultActive = val.path;
+      },
+      immediate: true,
     },
   },
   data() {
@@ -100,7 +103,7 @@ export default {
       this.$router.push("/login");
     },
     toCenter() {
-      this.$router.push("/personal-center");
+      this.$router.push("/personal-center/work");
     },
     handleCommand(command) {
       if (command == "logOut") {
@@ -142,31 +145,46 @@ body {
   width: 100%;
   margin: 0 auto;
   height: 84px !important;
+  .flex {
+    height: 100%;
+  }
+  .el-menu-demo {
+    flex: 1;
+    overflow-x: auto;
+    overflow-y: hidden;
+  }
+  .el-menu-item.is-active {
+    border-bottom: 2px solid #409eff !important;
+  }
   .el-menu,
   .el-submenu,
   .el-submenu__title,
   .el-menu-item {
     height: 40px !important;
     line-height: 40px !important;
+    font-weight: bold;
+    i {
+      display: none;
+    }
   }
   .el-menu.el-menu--horizontal,
   .el-menu-demo .el-menu-item,
   .el-submenu .el-submenu__title {
     border-bottom: none;
-    font-weight: 400;
-    font-size: 16px;
+    font-weight: bold;
+    font-size: 18px;
     color: #323232;
     padding: 0;
     margin: 0 20px;
   }
   .el-menu.el-menu--horizontal,
   .el-submenu .el-submenu__title {
-    font-weight: 400;
-    font-size: 16px;
+    font-weight: bold;
+    font-size: 18px;
     color: #323232 !important;
   }
   .logo {
-    width: 280px;
+    height: 84px;
     padding: 10px;
     img {
       width: 100%;
@@ -193,7 +211,7 @@ body {
   overflow: hidden;
   background-color: #386afe;
   font-weight: 400;
-  font-size: 18px;
+  font-size: 14px;
   color: #ffffff;
   display: flex;
   align-items: center;

src/assets/styles/index.scss

@@ -97,27 +97,63 @@ body,
 }
 
 .custom-submenu {
+  top: 88px !important;
   border-radius: 4px;
   overflow: hidden;
   box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
+  position: relative;
+  overflow: visible;
+  font-weight: bold;
+  &::before {
+    content: '';
+    display: block;
+    position: absolute;
+    z-index: 9999;
+    width: 0;
+    height: 0;
+    top: -10px;
+    left: calc(50% - 6px);
+    border-width: 6px;
+    border-style: solid;
+    border-color: transparent transparent #fff transparent;
+  }
   .el-menu {
-    padding: 0;
+    padding: 8px;
     border-radius: 4px;
     min-width: 120px;
+    margin-top: 0;
   }
 
   .el-menu-item {
-    font-weight: 400;
     font-size: 16px;
     color: #323232 !important;
     height: 24px;
     line-height: 24px;
-    text-align: center;
-
+    text-align: left;
+    border-radius: 2px;
     &:hover {
       background-color: #ebf3ff !important;
       color: #386afe !important;
     }
+    &.is-active {
+      background-color: #ebf3ff !important;
+      color: #386afe !important;
+    }
+    &:nth-child(1) {
+      &:hover, &.is-active {
+        background: url('../img/sub-menu-1.png') right no-repeat;
+      }
+    }
+    &:nth-child(2) {
+      &:hover, &.is-active {
+        background: url('../img/sub-menu-2.png') right no-repeat;
+      }
+    }
+    &:nth-child(3) {
+      &:hover, &.is-active {
+        background: url('../img/sub-menu-3.png') right no-repeat;
+      }
+    }
   }
 }
 
@@ -149,15 +185,14 @@ body,
 
 .left-tabs {
   width: 266px;
+  height: 100%;
   border-radius: 8px;
   overflow: hidden;
   background-color: #fff;
   box-shadow: 0px 3px 6px 1px rgba(1, 64, 100, 0.16);
   margin-right: 24px;
-  min-height: 550px;
   display: flex;
   flex-direction: column;
-
   h4 {
     height: 72px;
     line-height: 72px;
@@ -170,7 +205,7 @@ body,
 
   ul {
     flex: 1;
-
+    margin-bottom: 10px;
     li {
       height: 60px;
       font-weight: 400;
@@ -211,15 +246,15 @@ body,
   min-height: 550px;
   box-shadow: 0px 3px 6px 1px rgba(1, 64, 100, 0.16);
 
-  ::v-deep .el-card__body {
-    height: calc(100% - 100px);
+  .el-card__body {
+    height: calc(100% - 61px) !important;
   }
 
   .header {
     display: flex;
     align-items: center;
     justify-content: space-between;
-
+    height: 24px;
     h4 {
       font-weight: bold;
       font-size: 18px;

src/components/LeftTabs.vue

@@ -55,7 +55,6 @@ export default {
   background-color: #fff;
   box-shadow: 0px 3px 6px 1px rgba(1, 64, 100, 0.16);
   margin-right: 24px;
-  min-height: 550px;
   display: flex;
   flex-direction: column;
   h4 {

src/router.js

@@ -81,14 +81,29 @@ let router = new Router({
       meta: {
         requireAuth: true,
       },
-      component: () => import("./views/PersonalCenter.vue"),
+      component: () => import("./views/PersonalCenter/index.vue"),
+      children: [
+        {
+          path: "work",
+          name: "work",
+          meta: {
+            requireAuth: true,
+          },
+          component: () => import("./views/PersonalCenter/work.vue"),
+        },
+        {
+          path: "appointment",
+          name: "personal-appointment",
+          meta: {
+            requireAuth: true,
+          },
+          component: () => import("./views/PersonalCenter/appointment.vue"),
+        }
+      ]
     },
     {
       path: "/contact-us",
       name: "contactUs",
-      meta: {
-        requireAuth: true,
-      },
       component: () => import("./views/ContactUs.vue"),
     }
   ],
@@ -102,7 +117,7 @@ router.beforeEach(async (to, from, next) => {
     const [err, res] = await awaitTo(getUserByUserName());
     if (err) return;
     const obj = res.data.userInfo
-    obj.roleNames = res.data.roles.map(item => item.roleName).join(',')
+    obj.roleNames = res.data.roles ? res.data.roles.map(item => item.roleName).join(',') : ''
     obj.pgName = res.data.projectGroupRes ? res.data.projectGroupRes.pgName : ''
     store.dispatch("setUserInfo", obj);
   }
@@ -111,7 +126,7 @@ router.beforeEach(async (to, from, next) => {
     // 判断是否登录
     if (token) {
       next();
-    } else {
+    } else if(to.path != '/login'){
       // 没登录则跳转到登录界面
       next({
         path: "/login",

src/utils/micro_request.js

@@ -1,14 +1,14 @@
 /*
  * @Date: 2021-11-27 15:27:19
  * @LastEditors: wanglj
- * @LastEditTime: 2025-01-11 10:42:17
+ * @LastEditTime: 2025-01-13 17:13:36
  * @FilePath: \labsop_website\src\utils\micro_request.js
  * @Description: file content
  */
 import axios from "axios";
 import { Notification, MessageBox, Message } from "element-ui";
 import store from "@/store";
-import { getToken, getProject } from "@/utils/auth";
+import { getToken, removeToken, getProject } from "@/utils/auth";
 import errorCode from "@/utils/errorCode";
 import Cookies from "js-cookie";
 import router from "../router";
@@ -179,7 +179,10 @@ function processResponse(res) {
     ).then(() => {
       store.dispatch("logOut").then(() => {
         router.push("/");
-      });
+      }).catch(() => {
+        removeToken()
+        router.push("/");
+      })
     });
   } else if (code === 500) {
     Message({

src/views/Admin.vue

@@ -1,100 +0,0 @@
-<template>
-  <div class="admin">
-    <el-container>
-      <el-aside width="200px">
-        <el-menu default-active="2" class="el-menu-vertical-demo" router>
-          <el-menu-item index="/admin/user">
-            <i class="el-icon-star-off"></i>
-            <span slot="title">后台用户管理</span>
-          </el-menu-item>
-          <el-menu-item index="/admin/news">
-            <i class="el-icon-news"></i>
-            <span slot="title">新闻咨询管理</span>
-          </el-menu-item>
-          <el-menu-item index="/admin/cases">
-            <i class="el-icon-location-outline"></i>
-            <span slot="title">案例信息管理</span>
-          </el-menu-item>
-          <el-menu-item index="/admin/team">
-            <i class="el-icon-picture-outline"></i>
-            <span slot="title">团队风采管理</span>
-          </el-menu-item>
-          <el-menu-item index="/admin/course">
-            <i class="el-icon-time"></i>
-            <span slot="title">发展历程管理</span>
-          </el-menu-item>
-          <el-menu-item index="/admin/enterprise">
-            <i class="el-icon-edit-outline"></i>
-            <span slot="title">合作企业管理</span>
-          </el-menu-item>
-          <el-menu-item index="/admin/honor">
-            <i class="el-icon-edit-outline"></i>
-            <span slot="title">荣誉墙管理</span>
-          </el-menu-item>
-          <el-menu-item index="/admin/dictionary">
-            <i class="el-icon-setting"></i>
-            <span slot="title">数据字典管理</span>
-          </el-menu-item>
-          <el-menu-item index="/admin/page">
-            <i class="el-icon-setting"></i>
-            <span slot="title">测试分页</span>
-          </el-menu-item>
-        </el-menu>
-      </el-aside>
-      <el-container>
-        <el-main>
-          <div class="base-padding">
-            <router-view />
-          </div>
-        </el-main>
-        <el-footer>2019@科建版权所有</el-footer>
-      </el-container>
-    </el-container>
-  </div>
-</template>
-
-<script>
-export default {
-  name: "admin"
-};
-</script>
-
-<style lang="scss" soped>
-.admin {
-  border-top: 1px solid rgb(238, 238, 238);
-}
-
-.base-padding {
-  padding: 20px;
-}
-
-.el-footer {
-  line-height: 60px;
-}
-</style>
-
-<style>
-.avatar-uploader .el-upload {
-  border: 1px dashed #d9d9d9;
-  border-radius: 6px;
-  cursor: pointer;
-  position: relative;
-  overflow: hidden;
-}
-.avatar-uploader .el-upload:hover {
-  border-color: #409eff;
-}
-.avatar-uploader-icon {
-  font-size: 28px;
-  color: #8c939d;
-  width: 178px;
-  height: 178px;
-  line-height: 178px;
-  text-align: center;
-}
-.avatar {
-  width: 178px;
-  height: 178px;
-  display: block;
-}
-</style>

src/views/Admin/Cases.vue

@@ -1,228 +0,0 @@
-<template>
-  <div class="cases">
-    <el-button type="primary" @click="openDialog()">新增案例</el-button>
-
-    <el-table border :data="tableData" v-loading="loading" style="width: 100%">
-      <el-table-column prop="Id" label="序号" width="180"></el-table-column>
-      <el-table-column prop="Title" label="案例标题" width="180"></el-table-column>
-      <el-table-column prop="Img" label="图片">
-        <template slot-scope="scope">
-          <img style="width:100%" :src="imgserver+scope.row.Img" alt />
-        </template>
-      </el-table-column>
-      <el-table-column prop="Content" label="案例内容"></el-table-column>
-      <el-table-column label="操作">
-        <template slot-scope="scope">
-          <el-button
-            type="primary"
-            icon="el-icon-edit"
-            @click="handleEdit(scope.$index, scope.row)"
-          ></el-button>
-          <el-button
-            type="danger"
-            icon="el-icon-delete"
-            @click="handleDelete(scope.$index, scope.row)"
-          ></el-button>
-        </template>
-      </el-table-column>
-    </el-table>
-    <el-dialog title="案例编辑" :visible.sync="dialogFormVisible">
-      <el-form :model="formData">
-        <el-form-item label="案例标题" :label-width="formLabelWidth">
-          <el-input v-model="formData.Title" autocomplete="off"></el-input>
-        </el-form-item>
-        <el-form-item label="案例图片" :label-width="formLabelWidth">
-          <!-- :before-upload="beforeAvatarUpload" -->
-          <el-upload
-            class="avatar-uploader"
-            action="http://shkjgw.shkjem.com/api/UpLoad/UploadImage"
-            :headers="headers"
-            :show-file-list="false"
-            :on-success="handleSuccess"
-          >
-            <img v-if="formData.Img" :src="imgserver + formData.Img" class="avatar" />
-            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
-          </el-upload>
-        </el-form-item>
-        <el-form-item label="案例内容" :label-width="formLabelWidth">
-          <el-input v-model="formData.Content" autocomplete="off"></el-input>
-        </el-form-item>
-      </el-form>
-      <div slot="footer" class="dialog-footer">
-        <el-button @click="dialogFormVisible = false">取 消</el-button>
-        <el-button type="primary" @click="handleCreateOrModify()">确 定</el-button>
-      </div>
-    </el-dialog>
-  </div>
-</template>
-
-<script>
-export default {
-  data() {
-    return {
-      loading: true,
-      dialogFormVisible: false,
-      formLabelWidth: "120px",
-      tableData: [],
-      formData: {
-        Id: 0,
-        Img: "",
-        Title: "",
-        Content: "",
-        Del: "",
-        CreateTime: new Date()
-      },
-      options: {},
-      headers: {}
-    };
-  },
-  mounted() {
-    let token = "Browser " + sessionStorage.getItem("token");
-    //window.console.log(token);
-    this.options = {
-      headers: {
-        Authorization: token
-      }
-    };
-    this.headers = {
-      Authorization: token
-    };
-
-    this.loadData();
-  },
-  methods: {
-    handleSuccess(response, file, fileList) {
-      window.console.log(response, file, fileList);
-      this.formData.Img = response;
-    },
-    loadData() {
-      this.loading = true;
-      this.$http
-        .get("Cases/GetCasesAll")
-        .then(response => {
-          window.console.log(response);
-          this.tableData = response.data;
-          this.loading = false;
-        })
-        .catch(e => {
-          this.$message({
-            message: "网络或程序异常！" + e,
-            type: "error"
-          });
-        });
-    },
-    openDialog() {
-      // 清除数据
-      this.formData.Id = 0;
-      this.formData.Img = "";
-      this.formData.Title = "";
-      this.formData.Content = "";
-      this.formData.Del = "";
-      this.formData.CreateTime = new Date();
-
-      this.dialogFormVisible = true;
-    },
-    // 新增
-    handleCreateOrModify() {
-      window.console.log(this.formData);
-      //window.console.log(JSON.stringify(this.formData));
-      if (!this.formData.Id) {
-        // ID 无效时 视为新增
-        this.loading = true;
-        this.$http
-          .post("Cases/CreateCases", this.formData, this.options)
-          .then(response => {
-            this.loading = false;
-            window.console.log(response);
-            this.$message({
-              message: "创建成功！",
-              type: "success"
-            });
-            this.dialogFormVisible = false;
-            this.loadData();
-          })
-          .catch(e => {
-            this.$message({
-              message: "网络或程序异常！" + e,
-              type: "error"
-            });
-          });
-      } else {
-        this.loading = true;
-        this.$http
-          .post("Cases/ModifiedCases", this.formData, this.options)
-          .then(response => {
-            this.loading = false;
-            window.console.log(response);
-            this.$message({
-              message: "修改成功！",
-              type: "success"
-            });
-            this.dialogFormVisible = false;
-            this.loadData();
-          })
-          .catch(e => {
-            this.$message({
-              message: "网络或程序异常！" + e,
-              type: "error"
-            });
-          });
-      }
-    },
-    handleEdit(index, row) {
-      window.console.log(index, row);
-      this.formData = row;
-      this.dialogFormVisible = true;
-    },
-    handleDelete(index, row) {
-      window.console.log(index, row);
-      this.$confirm("此操作将永久此条数据, 是否继续?", "提示", {
-        confirmButtonText: "确定",
-        cancelButtonText: "取消",
-        type: "warning"
-      })
-        .then(() => {
-          // 已确认删除
-          // 调接口删除
-          this.loading = true;
-          this.$http
-            .post(`Cases/DeleteCases?id=${row.Id}`, null, this.options)
-            .then(response => {
-              this.loading = false;
-              window.console.log(response);
-              this.$message({
-                message: "删除成功！",
-                type: "success"
-              });
-              this.loadData();
-            })
-            .catch(e => {
-              this.$message({
-                message: "网络或程序异常！" + e,
-                type: "error"
-              });
-            });
-        })
-        .catch(() => {
-          this.$message({
-            type: "info",
-            message: "已取消删除"
-          });
-        });
-    },
-    //时间格式化
-    dateFormat: function(row) {
-      //row 表示一行数据, CreateTime 表示要格式化的字段名称
-      let t = new Date(row.CreateTime);
-      return t.getFullYear() + "-" + (t.getMonth() + 1) + "-" + t.getDate();
-    }
-  }
-};
-</script>
-
-<style scoped>
-.el-table {
-  margin-top: 20px;
-}
-</style>
-

src/views/Admin/Course.vue

@@ -1,198 +0,0 @@
-<template>
-  <div class="cases">
-    <el-button type="primary" @click="openDialog()">新增数据</el-button>
-
-    <el-table border :data="tableData" v-loading="loading" style="width: 100%">
-      <el-table-column prop="Id" label="序号" width="180"></el-table-column>
-      <el-table-column prop="Year" label="历程年份" width="180"></el-table-column>
-      <el-table-column prop="Content" label="历程内容"></el-table-column>
-      <el-table-column label="操作">
-        <template slot-scope="scope">
-          <el-button
-            type="primary"
-            icon="el-icon-edit"
-            @click="handleEdit(scope.$index, scope.row)"
-          ></el-button>
-          <el-button
-            type="danger"
-            icon="el-icon-delete"
-            @click="handleDelete(scope.$index, scope.row)"
-          ></el-button>
-        </template>
-      </el-table-column>
-    </el-table>
-    <el-dialog title="发展历程编辑" :visible.sync="dialogFormVisible">
-      <el-form :model="formData">
-        <el-form-item label="历程年份" :label-width="formLabelWidth">
-          <el-input v-model="formData.Year" autocomplete="off"></el-input>
-        </el-form-item>
-        <el-form-item label="历程内容" :label-width="formLabelWidth">
-          <el-input v-model="formData.Content" autocomplete="off"></el-input>
-        </el-form-item>
-      </el-form>
-      <div slot="footer" class="dialog-footer">
-        <el-button @click="dialogFormVisible = false">取 消</el-button>
-        <el-button type="primary" @click="handleCreateOrModify()">确 定</el-button>
-      </div>
-    </el-dialog>
-  </div>
-</template>
-
-<script>
-export default {
-  data() {
-    return {
-      loading: true,
-      dialogFormVisible: false,
-      formLabelWidth: "120px",
-      tableData: [],
-      formData: {
-        Id: 0,
-        Year: "",
-        Content: "",
-        CreateTime: new Date()
-      },
-      options: {}
-    };
-  },
-  mounted() {
-    let token = "Browser " + sessionStorage.getItem("token");
-    //window.console.log(token);
-    this.options = {
-      headers: {
-        Authorization: token
-      }
-    };
-
-    this.loadData();
-  },
-  methods: {
-    loadData() {
-      this.loading = true;
-      this.$http
-        .get("Course/GetCourseAll")
-        .then(response => {
-          window.console.log(response);
-          this.tableData = response.data;
-          this.loading = false;
-        })
-        .catch(e => {
-          this.$message({
-            message: "网络或程序异常！" + e,
-            type: "error"
-          });
-        });
-    },
-    openDialog() {
-      // 清除数据
-      this.formData.Id = 0;
-      this.formData.LoginName = "";
-      this.formData.Password = "";
-      this.formData.IsAction = true;
-      this.formData.CreateTime = new Date();
-
-      this.dialogFormVisible = true;
-    },
-    // 新增
-    handleCreateOrModify() {
-      window.console.log(this.formData);
-      //window.console.log(JSON.stringify(this.formData));
-      if (!this.formData.Id) {
-        // ID 无效时 视为新增
-        this.loading = true;
-        this.$http
-          .post("Course/CreateCourse", this.formData, this.options)
-          .then(response => {
-            this.loading = false;
-            window.console.log(response);
-            this.$message({
-              message: "创建成功！",
-              type: "success"
-            });
-            this.dialogFormVisible = false;
-            this.loadData();
-          })
-          .catch(e => {
-            this.$message({
-              message: "网络或程序异常！" + e,
-              type: "error"
-            });
-          });
-      } else {
-        this.loading = true;
-        this.$http
-          .post("Course/ModifiedCourse", this.formData, this.options)
-          .then(response => {
-            this.loading = false;
-            window.console.log(response);
-            this.$message({
-              message: "修改成功！",
-              type: "success"
-            });
-            this.dialogFormVisible = false;
-            this.loadData();
-          })
-          .catch(e => {
-            this.$message({
-              message: "网络或程序异常！" + e,
-              type: "error"
-            });
-          });
-      }
-    },
-    handleEdit(index, row) {
-      window.console.log(index, row);
-      this.formData = row;
-      this.dialogFormVisible = true;
-    },
-    handleDelete(index, row) {
-      window.console.log(index, row);
-      this.$confirm("此操作将永久此条数据, 是否继续?", "提示", {
-        confirmButtonText: "确定",
-        cancelButtonText: "取消",
-        type: "warning"
-      })
-        .then(() => {
-          // 已确认删除
-          // 调接口删除
-          this.loading = true;
-          this.$http
-            .post(`Course/DeleteCourse?id=${row.Id}`, null, this.options)
-            .then(response => {
-              this.loading = false;
-              window.console.log(response);
-              this.$message({
-                message: "删除成功！",
-                type: "success"
-              });
-              this.loadData();
-            })
-            .catch(e => {
-              this.$message({
-                message: "网络或程序异常！" + e,
-                type: "error"
-              });
-            });
-        })
-        .catch(() => {
-          this.$message({
-            type: "info",
-            message: "已取消删除"
-          });
-        });
-    },
-    //时间格式化
-    dateFormat: function(row) {
-      //row 表示一行数据, CreateTime 表示要格式化的字段名称
-      let t = new Date(row.CreateTime);
-      return t.getFullYear() + "-" + (t.getMonth() + 1) + "-" + t.getDate();
-    }
-  }
-};
-</script>
-
-<style scoped>
-.el-table {
-  margin-top: 20px;
-}
-</style>

src/views/Admin/Dictionary.vue

@@ -1,209 +0,0 @@
-<template>
-  <div class="cases">
-    <el-button type="primary" @click="openDialog()">新增用户</el-button>
-
-    <el-table border :data="tableData" v-loading="loading" style="width: 100%">
-      <el-table-column prop="Id" label="序号" width="180"></el-table-column>
-      <el-table-column prop="Key" label="键" width="180"></el-table-column>
-      <el-table-column prop="Content" label="值"></el-table-column>
-      <el-table-column label="操作">
-        <template slot-scope="scope">
-          <el-button
-            type="primary"
-            icon="el-icon-edit"
-            @click="handleEdit(scope.$index, scope.row)"
-          ></el-button>
-          <el-button
-            type="danger"
-            icon="el-icon-delete"
-            @click="handleDelete(scope.$index, scope.row)"
-          ></el-button>
-        </template>
-      </el-table-column>
-    </el-table>
-    <el-dialog title="案例编辑" :visible.sync="dialogFormVisible">
-      <el-form :model="formData">
-        <el-form-item label="数据键" :label-width="formLabelWidth">
-          <el-input v-model="formData.Key" autocomplete="off"></el-input>
-        </el-form-item>
-        <el-form-item label="数据键" :label-width="formLabelWidth">
-          <el-input v-model="formData.Content" autocomplete="off"></el-input>
-        </el-form-item>
-      </el-form>
-      <div slot="footer" class="dialog-footer">
-        <el-button @click="dialogFormVisible = false">取 消</el-button>
-        <el-button type="primary" @click="handleCreateOrModify()">确 定</el-button>
-      </div>
-    </el-dialog>
-  </div>
-</template>
-
-<script>
-export default {
-  data() {
-    return {
-      loading: true,
-      dialogFormVisible: false,
-      formLabelWidth: "120px",
-      tableData: [],
-      formData: {
-        Id: 0,
-        Key: "",
-        Content: "",
-        CreateTime: new Date()
-      },
-      options: {}
-    };
-  },
-  mounted() {
-    let token = "Browser " + sessionStorage.getItem("token");
-    //window.console.log(token);
-    this.options = {
-      headers: {
-        Authorization: token
-      }
-    };
-
-    this.loadData();
-  },
-  methods: {
-    loadData() {
-      this.loading = true;
-      this.$http
-        .get(`DataDictionary/GetDataDictionaryAll?key=`)
-        .then(response => {
-          window.console.log(response);
-          this.tableData = response.data;
-          this.loading = false;
-        })
-        .catch(e => {
-          this.$message({
-            message: "网络或程序异常！" + e,
-            type: "error"
-          });
-        });
-    },
-    openDialog() {
-      // 清除数据
-      this.formData.Id = 0;
-      this.formData.Key = "";
-      this.formData.Content = "";
-      this.formData.CreateTime = new Date();
-
-      this.dialogFormVisible = true;
-    },
-    // 新增
-    handleCreateOrModify() {
-      window.console.log(this.formData);
-      //window.console.log(JSON.stringify(this.formData));
-      if (!this.formData.Id) {
-        // ID 无效时 视为新增
-        this.loading = true;
-        this.$http
-          .post(
-            "DataDictionary/CreateDataDictionary",
-            this.formData,
-            this.options
-          )
-          .then(response => {
-            this.loading = false;
-            window.console.log(response);
-            this.$message({
-              message: "创建成功！",
-              type: "success"
-            });
-            this.dialogFormVisible = false;
-            this.loadData();
-          })
-          .catch(e => {
-            this.$message({
-              message: "网络或程序异常！" + e,
-              type: "error"
-            });
-          });
-      } else {
-        this.loading = true;
-        this.$http
-          .post(
-            "DataDictionary/ModifiedDataDictionary",
-            this.formData,
-            this.options
-          )
-          .then(response => {
-            this.loading = false;
-            window.console.log(response);
-            this.$message({
-              message: "修改成功！",
-              type: "success"
-            });
-            this.dialogFormVisible = false;
-            this.loadData();
-          })
-          .catch(e => {
-            this.$message({
-              message: "网络或程序异常！" + e,
-              type: "error"
-            });
-          });
-      }
-    },
-    handleEdit(index, row) {
-      window.console.log(index, row);
-      this.formData = row;
-      this.dialogFormVisible = true;
-    },
-    handleDelete(index, row) {
-      window.console.log(index, row);
-      this.$confirm("此操作将永久此条数据, 是否继续?", "提示", {
-        confirmButtonText: "确定",
-        cancelButtonText: "取消",
-        type: "warning"
-      })
-        .then(() => {
-          // 已确认删除
-          // 调接口删除
-          this.loading = true;
-          this.$http
-            .post(
-              `DataDictionary/DeleteDataDictionary?id=${row.Id}`,
-              null,
-              this.options
-            )
-            .then(response => {
-              this.loading = false;
-              window.console.log(response);
-              this.$message({
-                message: "删除成功！",
-                type: "success"
-              });
-              this.loadData();
-            })
-            .catch(e => {
-              this.$message({
-                message: "网络或程序异常！" + e,
-                type: "error"
-              });
-            });
-        })
-        .catch(() => {
-          this.$message({
-            type: "info",
-            message: "已取消删除"
-          });
-        });
-    },
-    //时间格式化
-    dateFormat: function(row) {
-      //row 表示一行数据, CreateTime 表示要格式化的字段名称
-      let t = new Date(row.CreateTime);
-      return t.getFullYear() + "-" + (t.getMonth() + 1) + "-" + t.getDate();
-    }
-  }
-};
-</script>
-
-<style scoped>
-.el-table {
-  margin-top: 20px;
-}
-</style>

src/views/Admin/Enterprise.vue

@@ -1,221 +0,0 @@
-<template>
-  <div class="cases">
-    <el-button type="primary" @click="openDialog()">新增数据</el-button>
-
-    <el-table border :data="tableData" v-loading="loading" style="width: 100%">
-      <el-table-column prop="Id" label="序号" width="180"></el-table-column>
-      <el-table-column prop="Img" label="企业Logo">
-        <template slot-scope="scope">
-          <img style="width:200px" :src="imgserver+scope.row.Img" alt />
-        </template>
-      </el-table-column>
-      <el-table-column prop="Remark" label="企业名称" width="180"></el-table-column>
-      <el-table-column label="操作">
-        <template slot-scope="scope">
-          <el-button
-            type="primary"
-            icon="el-icon-edit"
-            @click="handleEdit(scope.$index, scope.row)"
-          ></el-button>
-          <el-button
-            type="danger"
-            icon="el-icon-delete"
-            @click="handleDelete(scope.$index, scope.row)"
-          ></el-button>
-        </template>
-      </el-table-column>
-    </el-table>
-    <el-dialog title="合作企业管理" :visible.sync="dialogFormVisible">
-      <el-form :model="formData">
-        <el-form-item label="企业Logo" :label-width="formLabelWidth">
-          <el-upload
-            class="avatar-uploader"
-            action="http://shkjgw.shkjem.com/api/UpLoad/UploadImage"
-            :headers="headers"
-            :show-file-list="false"
-            :on-success="handleSuccess"
-          >
-            <img v-if="formData.Img" :src="imgserver+formData.Img" class="avatar" />
-            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
-          </el-upload>
-        </el-form-item>
-        <el-form-item label="企业名称" :label-width="formLabelWidth">
-          <el-input v-model="formData.Remark" autocomplete="off"></el-input>
-        </el-form-item>
-      </el-form>
-      <div slot="footer" class="dialog-footer">
-        <el-button @click="dialogFormVisible = false">取 消</el-button>
-        <el-button type="primary" @click="handleCreateOrModify()">确 定</el-button>
-      </div>
-    </el-dialog>
-  </div>
-</template>
-
-<script>
-export default {
-  data() {
-    return {
-      loading: true,
-      dialogFormVisible: false,
-      formLabelWidth: "120px",
-      tableData: [],
-      formData: {
-        Id: 0,
-        Img: "",
-        Remark: "",
-        CreateTime: new Date()
-      },
-      options: {},
-      headers: {}
-    };
-  },
-  mounted() {
-    let token = "Browser " + sessionStorage.getItem("token");
-    //window.console.log(token);
-    this.options = {
-      headers: {
-        Authorization: token
-      }
-    };
-    this.headers = {
-      Authorization: token
-    };
-    this.loadData();
-  },
-  methods: {
-    handleSuccess(response, file, fileList) {
-      window.console.log(response, file, fileList);
-      this.formData.Img = response;
-    },
-    loadData() {
-      this.loading = true;
-      this.$http
-        .get("Enterprise/GetEnterpriseAll")
-        .then(response => {
-          window.console.log(response);
-          this.tableData = response.data;
-          this.loading = false;
-        })
-        .catch(e => {
-          this.$message({
-            message: "网络或程序异常！" + e,
-            type: "error"
-          });
-        });
-    },
-    openDialog() {
-      // 清除数据
-      this.formData.Id = 0;
-      this.formData.Img = "";
-      this.formData.Remark = "";
-      this.formData.CreateTime = new Date();
-
-      this.dialogFormVisible = true;
-    },
-    // 新增
-    handleCreateOrModify() {
-      window.console.log(this.formData);
-      //window.console.log(JSON.stringify(this.formData));
-      if (!this.formData.Id) {
-        // ID 无效时 视为新增
-        this.loading = true;
-        this.$http
-          .post("Enterprise/CreateEnterprise", this.formData, this.options)
-          .then(response => {
-            this.loading = false;
-            window.console.log(response);
-            this.$message({
-              message: "创建成功！",
-              type: "success"
-            });
-            this.dialogFormVisible = false;
-            this.loadData();
-          })
-          .catch(e => {
-            this.$message({
-              message: "网络或程序异常！" + e,
-              type: "error"
-            });
-          });
-      } else {
-        this.loading = true;
-        this.$http
-          .post("Enterprise/ModifiedEnterprise", this.formData, this.options)
-          .then(response => {
-            this.loading = false;
-            window.console.log(response);
-            this.$message({
-              message: "修改成功！",
-              type: "success"
-            });
-            this.dialogFormVisible = false;
-            this.loadData();
-          })
-          .catch(e => {
-            this.$message({
-              message: "网络或程序异常！" + e,
-              type: "error"
-            });
-          });
-      }
-    },
-    handleEdit(index, row) {
-      window.console.log(index, row);
-      this.formData = row;
-      this.dialogFormVisible = true;
-    },
-    handleDelete(index, row) {
-      window.console.log(index, row);
-      this.$confirm("此操作将永久此条数据, 是否继续?", "提示", {
-        confirmButtonText: "确定",
-        cancelButtonText: "取消",
-        type: "warning"
-      })
-        .then(() => {
-          // 已确认删除
-          // 调接口删除
-          this.loading = true;
-          this.$http
-            .post(
-              `Enterprise/DeleteEnterprise?id=${row.Id}`,
-              null,
-              this.options
-            )
-            .then(response => {
-              this.loading = false;
-              window.console.log(response);
-              this.$message({
-                message: "删除成功！",
-                type: "success"
-              });
-              this.loadData();
-            })
-            .catch(e => {
-              this.$message({
-                message: "网络或程序异常！" + e,
-                type: "error"
-              });
-            });
-        })
-        .catch(() => {
-          this.$message({
-            type: "info",
-            message: "已取消删除"
-          });
-        });
-    },
-    //时间格式化
-    dateFormat: function(row) {
-      //row 表示一行数据, CreateTime 表示要格式化的字段名称
-      let t = new Date(row.CreateTime);
-      return t.getFullYear() + "-" + (t.getMonth() + 1) + "-" + t.getDate();
-    }
-  }
-};
-</script>
-
-<style scoped>
-.el-table {
-  margin-top: 20px;
-}
-</style>

src/views/Admin/Honor.vue

@@ -1,217 +0,0 @@
-<template>
-  <div class="cases">
-    <el-button type="primary" @click="openDialog()">新增用户</el-button>
-
-    <el-table border :data="tableData" v-loading="loading" style="width: 100%">
-      <el-table-column prop="Id" label="序号" width="180"></el-table-column>
-      <el-table-column prop="Img" label="荣誉图片">
-        <template slot-scope="scope">
-          <img style="width:100%" :src="imgserver+scope.row.Img" alt />
-        </template>
-      </el-table-column>
-      <el-table-column prop="Remark" label="荣誉标题" width="180"></el-table-column>
-      <el-table-column label="操作">
-        <template slot-scope="scope">
-          <el-button
-            type="primary"
-            icon="el-icon-edit"
-            @click="handleEdit(scope.$index, scope.row)"
-          ></el-button>
-          <el-button
-            type="danger"
-            icon="el-icon-delete"
-            @click="handleDelete(scope.$index, scope.row)"
-          ></el-button>
-        </template>
-      </el-table-column>
-    </el-table>
-    <el-dialog title="合作企业管理" :visible.sync="dialogFormVisible">
-      <el-form :model="formData">
-        <el-form-item label="荣誉图片" :label-width="formLabelWidth">
-          <el-upload
-            class="avatar-uploader"
-            action="http://shkjgw.shkjem.com/api/UpLoad/UploadImage"
-            :headers="headers"
-            :show-file-list="false"
-            :on-success="handleSuccess"
-          >
-            <img v-if="formData.Img" :src="imgserver+formData.Img" class="avatar" />
-            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
-          </el-upload>
-        </el-form-item>
-        <el-form-item label="荣誉标题" :label-width="formLabelWidth">
-          <el-input v-model="formData.Remark" autocomplete="off"></el-input>
-        </el-form-item>
-      </el-form>
-      <div slot="footer" class="dialog-footer">
-        <el-button @click="dialogFormVisible = false">取 消</el-button>
-        <el-button type="primary" @click="handleCreateOrModify()">确 定</el-button>
-      </div>
-    </el-dialog>
-  </div>
-</template>
-
-<script>
-export default {
-  data() {
-    return {
-      loading: true,
-      dialogFormVisible: false,
-      formLabelWidth: "120px",
-      tableData: [],
-      formData: {
-        Id: 0,
-        Img: "",
-        Remark: "",
-        CreateTime: new Date()
-      },
-      options: {},
-      headers: {}
-    };
-  },
-  mounted() {
-    let token = "Browser " + sessionStorage.getItem("token");
-    //window.console.log(token);
-    this.options = {
-      headers: {
-        Authorization: token
-      }
-    };
-    this.headers = {
-      Authorization: token
-    };
-    this.loadData();
-  },
-  methods: {
-    handleSuccess(response, file, fileList) {
-      window.console.log(response, file, fileList);
-      this.formData.Img = response;
-    },
-    loadData() {
-      this.loading = true;
-      this.$http
-        .get("Honor/GetHonorAll")
-        .then(response => {
-          window.console.log(response);
-          this.tableData = response.data;
-          this.loading = false;
-        })
-        .catch(e => {
-          this.$message({
-            message: "网络或程序异常！" + e,
-            type: "error"
-          });
-        });
-    },
-    openDialog() {
-      // 清除数据
-      this.formData.Id = 0;
-      this.formData.Img = "";
-      this.formData.Remark = "";
-      this.formData.CreateTime = new Date();
-
-      this.dialogFormVisible = true;
-    },
-    // 新增
-    handleCreateOrModify() {
-      window.console.log(this.formData);
-      //window.console.log(JSON.stringify(this.formData));
-      if (!this.formData.Id) {
-        // ID 无效时 视为新增
-        this.loading = true;
-        this.$http
-          .post("Honor/CreateHonor", this.formData, this.options)
-          .then(response => {
-            this.loading = false;
-            window.console.log(response);
-            this.$message({
-              message: "创建成功！",
-              type: "success"
-            });
-            this.dialogFormVisible = false;
-            this.loadData();
-          })
-          .catch(e => {
-            this.$message({
-              message: "网络或程序异常！" + e,
-              type: "error"
-            });
-          });
-      } else {
-        this.loading = true;
-        this.$http
-          .post("Honor/ModifiedHonor", this.formData, this.options)
-          .then(response => {
-            this.loading = false;
-            window.console.log(response);
-            this.$message({
-              message: "修改成功！",
-              type: "success"
-            });
-            this.dialogFormVisible = false;
-            this.loadData();
-          })
-          .catch(e => {
-            this.$message({
-              message: "网络或程序异常！" + e,
-              type: "error"
-            });
-          });
-      }
-    },
-    handleEdit(index, row) {
-      window.console.log(index, row);
-      this.formData = row;
-      this.dialogFormVisible = true;
-    },
-    handleDelete(index, row) {
-      window.console.log(index, row);
-      this.$confirm("此操作将永久此条数据, 是否继续?", "提示", {
-        confirmButtonText: "确定",
-        cancelButtonText: "取消",
-        type: "warning"
-      })
-        .then(() => {
-          // 已确认删除
-          // 调接口删除
-          this.loading = true;
-          this.$http
-            .post(`Honor/DeleteHonor?id=${row.Id}`, null, this.options)
-            .then(response => {
-              this.loading = false;
-              window.console.log(response);
-              this.$message({
-                message: "删除成功！",
-                type: "success"
-              });
-              this.loadData();
-            })
-            .catch(e => {
-              this.$message({
-                message: "网络或程序异常！" + e,
-                type: "error"
-              });
-            });
-        })
-        .catch(() => {
-          this.$message({
-            type: "info",
-            message: "已取消删除"
-          });
-        });
-    },
-    //时间格式化
-    dateFormat: function(row) {
-      //row 表示一行数据, CreateTime 表示要格式化的字段名称
-      let t = new Date(row.CreateTime);
-      return t.getFullYear() + "-" + (t.getMonth() + 1) + "-" + t.getDate();
-    }
-  }
-};
-</script>
-
-<style scoped>
-.el-table {
-  margin-top: 20px;
-}
-</style>

src/views/Admin/News.vue

@@ -1,231 +0,0 @@
-<template>
-  <div class="news">
-    <el-button type="primary" @click="openDialog()">新增</el-button>
-
-    <el-table :data="tableData" border style="width: 100%" v-loading="loading">
-      <el-table-column prop="Id" label="序号" width="180"></el-table-column>
-      <el-table-column prop="Title" label="新闻标题" width="180"></el-table-column>
-      <el-table-column prop="Img" label="图片">
-        <template slot-scope="scope">
-          <img style="width:100%" :src="imgserver + scope.row.Img" alt />
-        </template>
-      </el-table-column>
-      <el-table-column prop="Content" label="新闻内容">
-        <template slot-scope="scope">
-          <p v-if="scope.row.Content.length > 100">{{scope.row.Content.substring(0,100)}} ...</p>
-          <p v-else>{{scope.row.Content}}</p>
-        </template>
-      </el-table-column>
-      <el-table-column prop="Type" label="新闻类别">
-        <template slot-scope="scope">{{scope.row.Type == 1 ? '公司新闻':'行业动态'}}</template>
-      </el-table-column>
-      <el-table-column label="操作">
-        <template slot-scope="scope">
-          <el-button
-            type="primary"
-            icon="el-icon-edit"
-            @click="handleEdit(scope.$index, scope.row)"
-          ></el-button>
-          <el-button
-            type="danger"
-            icon="el-icon-delete"
-            @click="handleDelete(scope.$index, scope.row)"
-          ></el-button>
-        </template>
-      </el-table-column>
-    </el-table>
-    <!--  -->
-    <el-dialog title="新闻编辑" :visible.sync="dialogFormVisible">
-      <el-form :model="formData">
-        <el-form-item label="新闻名称" :label-width="formLabelWidth">
-          <el-input v-model="formData.Title" autocomplete="off"></el-input>
-        </el-form-item>
-        <el-form-item label="新闻图片" :label-width="formLabelWidth">
-          <el-upload
-            class="avatar-uploader"
-            action="http://shkjgw.shkjem.com/api/UpLoad/UploadImage"
-            :headers="headers"
-            :show-file-list="false"
-            :on-success="handleSuccess"
-          >
-            <img v-if="formData.Img" :src="imgserver+formData.Img" class="avatar" />
-            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
-          </el-upload>
-        </el-form-item>
-        <el-form-item label="新闻内容" :label-width="formLabelWidth">
-          <el-input type="textarea" :rows="10" v-model="formData.Content" autocomplete="off"></el-input>
-        </el-form-item>
-        <el-form-item label="新闻类别" :label-width="formLabelWidth">
-          <el-radio v-model="formData.Type" :label="1">公司新闻</el-radio>
-          <el-radio v-model="formData.Type" :label="2">行业动态</el-radio>
-        </el-form-item>
-      </el-form>
-      <div slot="footer" class="dialog-footer">
-        <el-button @click="dialogFormVisible = false">取 消</el-button>
-        <el-button type="primary" @click="handleCreateOrModify()">确 定</el-button>
-      </div>
-    </el-dialog>
-  </div>
-</template>
-
-<script>
-export default {
-  name: "loginNews",
-  data() {
-    return {
-      options: {},
-      headers: {},
-      tableData: [],
-      formData: {
-        Id: 0,
-        Title: "",
-        Img: "",
-        Type: 1,
-        Content: "",
-        CreateTime: new Date()
-      },
-      dialogFormVisible: false,
-      formLabelWidth: "120px",
-      loading: true
-    };
-  },
-  mounted() {
-    let token = "Browser " + sessionStorage.getItem("token");
-    //window.console.log(token);
-    this.options = {
-      headers: {
-        Authorization: token
-      }
-    };
-    this.headers = {
-      Authorization: token
-    };
-
-    this.loadData();
-  },
-  methods: {
-    handleSuccess(response, file, fileList) {
-      window.console.log(response, file, fileList);
-      this.formData.Img = response;
-    },
-    loadData() {
-      this.loading = true;
-      this.$http
-        .get("News/GetNewsAll?type=0&num=10")
-        .then(response => {
-          // window.console.log(response);
-          this.tableData = response.data;
-          this.loading = false;
-        })
-        .catch(e => {
-          this.$message({
-            message: "网络或程序异常！" + e,
-            type: "error"
-          });
-        });
-    },
-    openDialog() {
-      // 清除数据
-      this.formData.Id = 0;
-      this.formData.Title = "";
-      this.formData.Img = "";
-      this.formData.Type = 1;
-      this.formData.Content = "";
-      this.formData.CreateTime = new Date();
-
-      this.dialogFormVisible = true;
-    },
-    handleCreateOrModify() {
-      if (!this.formData.Id) {
-        this.loading = true;
-        this.$http
-          .post("News/CreateNews", this.formData, this.options)
-          .then(response => {
-            window.console.log(response);
-            this.loading = false;
-            this.$message({
-              message: "创建成功！",
-              type: "success"
-            });
-            this.dialogFormVisible = false;
-            this.loadData();
-          })
-          .catch(e => {
-            this.$message({
-              message: "网络或程序异常！" + e,
-              type: "error"
-            });
-          });
-      } else {
-        this.loading = true;
-        this.$http
-          .post("News/ModifiedNews", this.formData, this.options)
-          .then(response => {
-            this.loading = false;
-            window.console.log(response);
-            this.$message({
-              message: "修改成功！",
-              type: "success"
-            });
-            this.dialogFormVisible = false;
-            this.loadData();
-          })
-          .catch(e => {
-            this.$message({
-              message: "网络或程序异常！" + e,
-              type: "error"
-            });
-          });
-      }
-    },
-    //编辑
-    handleEdit(index, row) {
-      //index:第几行   row:这一行的数据
-      window.console.log(index, row);
-      this.formData = row;
-      this.dialogFormVisible = true;
-    },
-    handleDelete(index, row) {
-      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
-        confirmButtonText: "确定",
-        cancelButtonText: "取消",
-        type: "warning"
-      })
-        .then(() => {
-          // 已确认删除
-          // 调接口删除
-          this.loading = true;
-          this.$http
-            .post(`News/DeleteNews?id=${row.Id}`, null, this.options)
-            .then(response => {
-              this.loading = false;
-              window.console.log(response);
-              this.$message({
-                message: "删除成功！",
-                type: "success"
-              });
-              this.loadData();
-            })
-            .catch(e => {
-              this.$message({
-                message: "网络或程序异常！" + e,
-                type: "error"
-              });
-            });
-        })
-        .catch(() => {
-          this.$message({
-            type: "info",
-            message: "已取消删除"
-          });
-        });
-    }
-  }
-};
-</script>
-
-<style lang="scss" scoped>
-.el-table {
-  margin-top: 20px;
-}
-</style>

src/views/Admin/Page.vue

@@ -1,82 +0,0 @@
-<template >
-  <div v-loading="loading">
-    <el-form :inline="true" :model="formInline" class="demo-form-inline">
-      <el-form-item label="姓名：">
-        <el-input v-model="formInline.name" placeholder="姓名"></el-input>
-      </el-form-item>
-      <el-form-item label="年龄：">
-        <el-input v-model="formInline.age" label="年龄"></el-input>
-      </el-form-item>
-      <el-form-item>
-        <el-button type="primary" @click="onSelect" :loading="loading">查询</el-button>
-      </el-form-item>
-    </el-form>
-    <el-table :data="tableData" border style="width: 100%">
-      <el-table-column prop="name" label="姓名"></el-table-column>
-      <el-table-column prop="age" label="年龄"></el-table-column>
-    </el-table>
-    <el-pagination
-      background
-      layout="sizes,prev, pager, next"
-      :page-sizes="[5, 10, 15, 20]"
-      :total="totalCount"
-      :current-page="pageIndex"
-      :page-size="pageSize"
-      @current-change="currentChange"
-      @size-change="sizeChange"
-    ></el-pagination>
-  </div>
-</template>
-
-<script>
-export default {
-  data() {
-    return {
-      loading: true,
-      pageIndex: 1,
-      pageSize: 5,
-      formInline: {
-        name: "",
-        age: ""
-      },
-      tableData: [],
-      totalCount: 0
-    };
-  },
-  mounted() {
-    this.onSelect();
-  },
-  methods: {
-    onSelect() {
-      this.loading = true;
-      this.$http
-        .get(
-          `https://localhost:5001/api/User/GetUsers?name=${this.formInline.name}&age=${this.formInline.age}&pageIndex=${this.pageIndex}&pageSize=${this.pageSize}`
-        )
-        .then(response => {
-          window.console.log(response);
-          this.tableData = response.data.data;
-          this.totalCount = response.data.totalCount;
-          this.loading = false;
-        })
-        .catch(e => {
-          this.$message({
-            message: "网络或程序异常！" + e,
-            type: "error"
-          });
-          this.loading = false;
-        });
-    },
-    currentChange(val) {
-      window.console.log(`当前页: ${val}`);
-      this.pageIndex = val;
-      this.onSelect();
-    },
-    sizeChange(val) {
-      window.console.log(`每页 ${val} 条`);
-      this.pageSize = val;
-      this.onSelect();
-    }
-  }
-};
-</script>

src/views/Admin/Team.vue

@@ -1,218 +0,0 @@
-<template>
-  <div class="Team">
-    <el-button type="primary" @click="openDialog()">新增数据</el-button>
-
-    <el-table border :data="tableData" v-loading="loading" style="width: 100%">
-      <el-table-column prop="Id" label="序号" width="180"></el-table-column>
-      <el-table-column prop="Img" label="图片">
-        <template slot-scope="scope">
-          <img style="width:100%" :src="imgserver+scope.row.Img" alt />
-        </template>
-      </el-table-column>
-      <el-table-column prop="Remark" label="备注"></el-table-column>
-      <el-table-column label="操作">
-        <template slot-scope="scope">
-          <el-button
-            type="primary"
-            icon="el-icon-edit"
-            @click="handleEdit(scope.$index, scope.row)"
-          ></el-button>
-          <el-button
-            type="danger"
-            icon="el-icon-delete"
-            @click="handleDelete(scope.$index, scope.row)"
-          ></el-button>
-        </template>
-      </el-table-column>
-    </el-table>
-    <el-dialog title="团队风采编辑" :visible.sync="dialogFormVisible">
-      <el-form :model="formData">
-        <el-form-item label="风采图片" :label-width="formLabelWidth">
-          <el-upload
-            class="avatar-uploader"
-            action="http://shkjgw.shkjem.com/api/UpLoad/UploadImage"
-            :headers="headers"
-            :show-file-list="false"
-            :on-success="handleSuccess"
-          >
-            <img v-if="formData.Img" :src="imgserver+formData.Img" class="avatar" />
-            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
-          </el-upload>
-        </el-form-item>
-        <el-form-item label="备注" :label-width="formLabelWidth">
-          <el-input v-model="formData.Remark" autocomplete="off"></el-input>
-        </el-form-item>
-      </el-form>
-      <div slot="footer" class="dialog-footer">
-        <el-button @click="dialogFormVisible = false">取 消</el-button>
-        <el-button type="primary" @click="handleCreateOrModify()">确 定</el-button>
-      </div>
-    </el-dialog>
-  </div>
-</template>
-
-<script>
-export default {
-  data() {
-    return {
-      loading: true,
-      dialogFormVisible: false,
-      formLabelWidth: "120px",
-      tableData: [],
-      formData: {
-        Id: 0,
-        Img: "",
-        Remark: "",
-        CreateTime: new Date()
-      },
-      options: {},
-      headers: {}
-    };
-  },
-  mounted() {
-    let token = "Browser " + sessionStorage.getItem("token");
-    //window.console.log(token);
-    this.options = {
-      headers: {
-        Authorization: token
-      }
-    };
-    this.headers = {
-      Authorization: token
-    };
-
-    this.loadData();
-  },
-  methods: {
-    handleSuccess(response, file, fileList) {
-      window.console.log(response, file, fileList);
-      this.formData.Img = response;
-    },
-    loadData() {
-      this.loading = true;
-      this.$http
-        .get("Team/GetTeamAll")
-        .then(response => {
-          window.console.log(response);
-          this.tableData = response.data;
-          this.loading = false;
-        })
-        .catch(e => {
-          this.$message({
-            message: "网络或程序异常！" + e,
-            type: "error"
-          });
-        });
-    },
-    openDialog() {
-      // 清除数据
-      this.formData.Id = 0;
-      this.formData.Img = "";
-      this.formData.Remark = "";
-      this.formData.CreateTime = new Date();
-
-      this.dialogFormVisible = true;
-    },
-    // 新增
-    handleCreateOrModify() {
-      window.console.log(this.formData);
-      //window.console.log(JSON.stringify(this.formData));
-      if (!this.formData.Id) {
-        // ID 无效时 视为新增
-        this.loading = true;
-        this.$http
-          .post("Team/CreateTeam", this.formData, this.options)
-          .then(response => {
-            this.loading = false;
-            window.console.log(response);
-            this.$message({
-              message: "创建成功！",
-              type: "success"
-            });
-            this.dialogFormVisible = false;
-            this.loadData();
-          })
-          .catch(e => {
-            this.$message({
-              message: "网络或程序异常！" + e,
-              type: "error"
-            });
-          });
-      } else {
-        this.loading = true;
-        this.$http
-          .post("Team/ModifiedTeam", this.formData, this.options)
-          .then(response => {
-            this.loading = false;
-            window.console.log(response);
-            this.$message({
-              message: "修改成功！",
-              type: "success"
-            });
-            this.dialogFormVisible = false;
-            this.loadData();
-          })
-          .catch(e => {
-            this.$message({
-              message: "网络或程序异常！" + e,
-              type: "error"
-            });
-          });
-      }
-    },
-    handleEdit(index, row) {
-      window.console.log(index, row);
-      this.formData = row;
-      this.dialogFormVisible = true;
-    },
-    handleDelete(index, row) {
-      window.console.log(index, row);
-      this.$confirm("此操作将永久此条数据, 是否继续?", "提示", {
-        confirmButtonText: "确定",
-        cancelButtonText: "取消",
-        type: "warning"
-      })
-        .then(() => {
-          // 已确认删除
-          // 调接口删除
-          this.loading = true;
-          this.$http
-            .post(`Team/DeleteTeam?id=${row.Id}`, null, this.options)
-            .then(response => {
-              this.loading = false;
-              window.console.log(response);
-              this.$message({
-                message: "删除成功！",
-                type: "success"
-              });
-              this.loadData();
-            })
-            .catch(e => {
-              this.$message({
-                message: "网络或程序异常！" + e,
-                type: "error"
-              });
-            });
-        })
-        .catch(() => {
-          this.$message({
-            type: "info",
-            message: "已取消删除"
-          });
-        });
-    },
-    //时间格式化
-    dateFormat: function(row) {
-      //row 表示一行数据, CreateTime 表示要格式化的字段名称
-      let t = new Date(row.CreateTime);
-      return t.getFullYear() + "-" + (t.getMonth() + 1) + "-" + t.getDate();
-    }
-  }
-};
-</script>
-
-<style scoped>
-.el-table {
-  margin-top: 20px;
-}
-</style>

src/views/Admin/User.vue

@@ -1,209 +0,0 @@
-<template>
-  <div>
-    <el-button type="primary" @click="openDialog()">新增用户</el-button>
-    <el-button type="danger">清除用户身份票据</el-button>
-    <el-table border :data="tableData" v-loading="loading" style="width: 100%">
-      <el-table-column prop="Id" label="序号"></el-table-column>
-      <el-table-column prop="LoginName" label="用户名"></el-table-column>
-      <el-table-column prop="Password" label="密码"></el-table-column>
-      <el-table-column prop="IsAction" label="是否启用">
-        <template slot-scope="scope">{{ scope.row.IsAction ? '是':'否' }}</template>
-      </el-table-column>
-      <el-table-column prop="CreateTime" label="创建时间" :formatter="dateFormat"></el-table-column>
-      <el-table-column label="操作">
-        <template slot-scope="scope">
-          <el-button
-            type="primary"
-            icon="el-icon-edit"
-            @click="handleEdit(scope.$index, scope.row)"
-            :disabled="scope.row.LoginName == 'admin'"
-          ></el-button>
-          <el-button
-            type="danger"
-            icon="el-icon-delete"
-            @click="handleDelete(scope.$index, scope.row)"
-            :disabled="scope.row.LoginName == 'admin'"
-          ></el-button>
-        </template>
-      </el-table-column>
-    </el-table>
-    <el-dialog title="用户信息操作" :visible.sync="dialogFormVisible">
-      <el-form :model="formData">
-        <el-form-item label="登录名" :label-width="formLabelWidth">
-          <el-input v-model="formData.LoginName" autocomplete="off"></el-input>
-        </el-form-item>
-        <el-form-item label="密码" :label-width="formLabelWidth">
-          <el-input v-model="formData.Password" autocomplete="off"></el-input>
-        </el-form-item>
-        <el-form-item label="是否启用" :label-width="formLabelWidth">
-          <el-radio v-model="formData.IsAction" :label="true" border>是</el-radio>
-          <el-radio v-model="formData.IsAction" :label="false" border>否</el-radio>
-        </el-form-item>
-      </el-form>
-      <div slot="footer" class="dialog-footer">
-        <el-button @click="dialogFormVisible = false">取 消</el-button>
-        <el-button type="primary" @click="handleCreateOrModify()">确 定</el-button>
-      </div>
-    </el-dialog>
-  </div>
-</template>
-
-<script>
-export default {
-  data() {
-    return {
-      loading: true,
-      dialogFormVisible: false,
-      formLabelWidth: "120px",
-      tableData: [],
-      formData: {
-        Id: 0,
-        LoginName: "",
-        Password: "",
-        IsAction: true,
-        CreateTime: new Date()
-      },
-      options: {}
-    };
-  },
-  mounted() {
-    let token = "Browser " + sessionStorage.getItem("token");
-    //window.console.log(token);
-    this.options = {
-      headers: {
-        Authorization: token
-      }
-    };
-
-    this.loadData();
-  },
-  methods: {
-    loadData() {
-      this.loading = true;
-      this.$http
-        .post("User/GetUserAll", null, this.options)
-        .then(response => {
-          window.console.log(response);
-          this.tableData = response.data;
-          this.loading = false;
-        })
-        .catch(e => {
-          this.$message({
-            message: "网络或程序异常！" + e,
-            type: "error"
-          });
-        });
-    },
-    openDialog() {
-      // 清除数据
-      this.formData.Id = 0;
-      this.formData.LoginName = "";
-      this.formData.Password = "";
-      this.formData.IsAction = true;
-      this.formData.CreateTime = new Date();
-
-      this.dialogFormVisible = true;
-    },
-    // 新增
-    handleCreateOrModify() {
-      window.console.log(this.formData);
-      //window.console.log(JSON.stringify(this.formData));
-      if (!this.formData.Id) {
-        // ID 无效时 视为新增
-        this.loading = true;
-        this.$http
-          .post("User/CreateUser", this.formData, this.options)
-          .then(response => {
-            this.loading = false;
-            window.console.log(response);
-            this.$message({
-              message: "创建成功！",
-              type: "success"
-            });
-            this.dialogFormVisible = false;
-            this.loadData();
-          })
-          .catch(e => {
-            this.$message({
-              message: "网络或程序异常！" + e,
-              type: "error"
-            });
-          });
-      } else {
-        this.loading = true;
-        this.$http
-          .post("User/ModifiedUser", this.formData, this.options)
-          .then(response => {
-            this.loading = false;
-            window.console.log(response);
-            this.$message({
-              message: "修改成功！",
-              type: "success"
-            });
-            this.dialogFormVisible = false;
-            this.loadData();
-          })
-          .catch(e => {
-            this.$message({
-              message: "网络或程序异常！" + e,
-              type: "error"
-            });
-          });
-      }
-    },
-    handleEdit(index, row) {
-      window.console.log(index, row);
-      this.formData = row;
-      this.dialogFormVisible = true;
-    },
-    handleDelete(index, row) {
-      window.console.log(index, row);
-      this.$confirm("此操作将永久此条数据, 是否继续?", "提示", {
-        confirmButtonText: "确定",
-        cancelButtonText: "取消",
-        type: "warning"
-      })
-        .then(() => {
-          // 已确认删除
-          // 调接口删除
-          this.loading = true;
-          this.$http
-            .post(`User/DeleteUser?id=${row.Id}`, null, this.options)
-            .then(response => {
-              this.loading = false;
-              window.console.log(response);
-              this.$message({
-                message: "删除成功！",
-                type: "success"
-              });
-              this.loadData();
-            })
-            .catch(e => {
-              this.$message({
-                message: "网络或程序异常！" + e,
-                type: "error"
-              });
-            });
-        })
-        .catch(() => {
-          this.$message({
-            type: "info",
-            message: "已取消删除"
-          });
-        });
-    },
-    //时间格式化
-    dateFormat: function(row) {
-      //row 表示一行数据, CreateTime 表示要格式化的字段名称
-      let t = new Date(row.CreateTime);
-      return t.getFullYear() + "-" + (t.getMonth() + 1) + "-" + t.getDate();
-    }
-  }
-};
-</script>
-
-<style scoped>
-.el-table {
-  margin-top: 20px;
-}
-</style>

src/views/Case.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="news">
-    <Banner :img="require('@/assets/img/center-introduce.png')" />
+    <Banner :img="require('@/assets/img/data-banner.png')" />
     <div class="common-container">
       <el-container>
         <CaseLeftTabs title="资料下载" :options="options" @tabSelect="tabSelect" />

src/views/Case/LeftTabs.vue

@@ -55,7 +55,6 @@ export default {
   background-color: #fff;
   box-shadow: 0px 3px 6px 1px rgba(1, 64, 100, 0.16);
   margin-right: 24px;
-  height: 550px;
   overflow-y: auto;
   display: flex;
   flex-direction: column;

src/views/Case/RightContent.vue

@@ -245,7 +245,4 @@ export default {
     }
   }
 }
-::v-deep .el-card__body {
-  height: auto !important;
-}
 </style>

src/views/ContactUs.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="news">
-    <Banner :img="require('@/assets/img/contact-us.png')" />
+    <Banner :img="require('@/assets/img/contact.png')" />
     <div class="common-container">
       <el-container>
         <el-card>
@@ -65,7 +65,9 @@ export default {
       var map = new BMapGL.Map("container"); // 创建Map实例
       map.centerAndZoom(new BMapGL.Point(106.951933, 27.713082), 18); // 初始化地图,设置中心点坐标和地图级别
       var marker1 = new BMapGL.Marker(new BMapGL.Point(106.951933, 27.713082));
-      map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放
+      map.disableDoubleClickZoom()
+      // map.enableScrollWheelZoom(false); // 开启鼠标滚轮缩放
+      map.disableDragging()
       map.addOverlay(marker1);
     },
   },

src/views/GoIn.vue

@@ -1,483 +0,0 @@
-<template>
-  <div class="go-in">
-    <banner img="../assets/img/bgtop.jpg" title="走进科建" />
-    <div class="section" v-loading="loading">
-      <div class="section-content">
-        <div class="content-summary">
-          <div class="summary-left">
-            <p class="title">公司简介</p>
-            <p class="eTitle">ABOUT US</p>
-            <p class="content">
-              上海科建工程管理股份有限公司成立于2012年9月，注册资金500万。公司前身上海科建工程管理有限公司，
-              是一家从事专业工程技术服务及工程项目管理的企业。公司于2017年11月通过国家高新技术企业认定，
-              目前工程管理软件研发团队10人，包括硕士和研究生在内，平均年龄在35岁。公司自主研发工程项目管理
-              标准化+互联网协同工作系统平台，此软件广泛应用于工程项目管理过程，实现全覆盖检查、全过程控制、全方位协调的目标。
-              目前公司业务范围涉及上海、广东等多地，合作的单位有上海同济工程项目管理咨询有限公司、
-              上海华银日用品有限公司、中科建设开发总公司、广东怡轩房地产开发有限公司等多家知名企业。 立人立己、达人达己！公司一直秉承“
-              帮助施工单位解决技术问题、帮助业主解决协调问题 ”的管理理念，上海科建工程管理股份有限公司不断在工程项目管理领域开拓创新，
-              通过不断完善工程项目管理标准化+互联网协同工作系统平台，实现每项工程“无重大安全事故、无重大返工、工程施工材料无伪劣产品、
-              工程管理留下痕迹、施工过程可追溯”五大管理目标。
-            </p>
-          </div>
-          <div class="summary-right">
-            <img src="../assets/img/jianjietopmin.jpg" alt />
-          </div>
-        </div>
-        <el-divider class="el-divider-active">
-          <i class="el-icon-arrow-down el-icon-arrow-down-active"></i>
-        </el-divider>
-        <!-- 发展历程 -->
-        <div class="content-course">
-          <div class="top">
-            <h3>发展历程</h3>
-            <p>DEVELOPMENT</p>
-            <div class="border"></div>
-            <div class="timeline"></div>
-          </div>
-          <div class="course-time">
-            <swiper :options="swiperOption" ref="mySwiper">
-              <swiper-slide v-for="(item,index) in courseList" :key="index">
-                <div class="time-show">
-                  <div class="time-show-item" v-for="(courseOne,one) in item" :key="one">
-                    <div class="item-top" :class="{'order-top' : one%2===1}"></div>
-                    <el-divider>
-                      <i class="el-icon-mobile-phone"></i>
-                    </el-divider>
-                    <div class="item-bottom" :class="{'order' : one%2===1}">
-                      <div class="item-bottom-content">
-                        <p>{{courseOne.Content}}</p>
-                        <p>{{courseOne.Year}}</p>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </swiper-slide>
-              <div class="swiper-button-prev" slot="button-prev"></div>
-              <div class="swiper-button-next" slot="button-next"></div>
-            </swiper>
-          </div>
-        </div>
-
-        <div class="content-culture">
-          <h3>企业文化</h3>
-          <h3>CULTURE</h3>
-          <p>我们只专注一件事情——工程项目管理</p>
-          <span>确保工程无重大安全事故</span>
-          <span>确保工程施工单位无大面积返工</span>
-          <span>确保工程材料及设备无伪劣产品</span>
-          <span>确保工程管理留下痕迹、实施过程可追溯</span>
-        </div>
-        <!-- 公司荣誉 -->
-        <div class="content-honor">
-          <div class="honor-big-img">
-            <el-dialog :title="dialogTitle" :visible.sync="dialogTableVisible">
-              <img v-lazy="dialogUrl" alt />
-            </el-dialog>
-          </div>
-          <div class="top">
-            <h3>公司荣誉</h3>
-            <p>HONOR</p>
-            <div class="border"></div>
-          </div>
-          <ul class="honor-show">
-            <li v-for="(honor,index) in honorList" :key="index">
-              <img
-                v-lazy="imgserver+honor.Img"
-                @click="dialogTableVisible = true ;dialogUrl = imgserver + honor.Img;dialogTitle= honor.Remark"
-              />
-            </li>
-          </ul>
-          <p>点击图片查看大图</p>
-        </div>
-        <!-- 团队风采 -->
-        <div class="content-team">
-          <div class="top">
-            <h3>团队风采</h3>
-            <p>TEAM</p>
-          </div>
-          <el-carousel :interval="4000" type="card">
-            <el-carousel-item v-for="(team,index) in teamItem" :key="index">
-              <div class="swiper-img" v-lazy:background-image="imgserver + team.Img"></div>
-            </el-carousel-item>
-          </el-carousel>
-        </div>
-        <!-- 合作伙伴 -->
-        <div class="content-partner">
-          <div class="top">
-            <h3>合作伙伴</h3>
-            <p>RARTNERS</p>
-            <ul class="partner-img">
-              <li v-for="(partner,i) in partnerImg" :key="i">
-                <img v-lazy="imgserver+partner.Img" alt />
-              </li>
-            </ul>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import Banner from "../components/Banner";
-import { swiper, swiperSlide } from "vue-awesome-swiper";
-export default {
-  components: {
-    Banner,
-    swiper,
-    swiperSlide
-  },
-  data() {
-    return {
-      loading: true,
-      honorList: [],
-      partnerImg: [],
-      courseList: [],
-      teamItem: [],
-      swiperOption: {
-        navigation: {
-          nextEl: ".swiper-button-next",
-          prevEl: ".swiper-button-prev"
-        }
-      },
-      dialogTableVisible: false,
-      dialogUrl: "",
-      dialogTitle: ""
-    };
-  },
-  mounted() {
-    this.$http
-      .all([
-        this.$http.get("Honor/GetHonorAll"),
-        this.$http.get("Enterprise/GetEnterpriseAll"),
-        this.$http.get(`Team/GetTeamAll`),
-        this.$http.get(`Course/GetCourseAll`)
-      ])
-      .then(
-        this.$http.spread(
-          (responseHonor, responseEnterprise, responseTeam, responseCourse) => {
-            this.honorList = responseHonor.data;
-            this.partnerImg = responseEnterprise.data;
-            this.teamItem = responseTeam.data;
-
-            var groupCount = Math.ceil(responseCourse.data.length / 2);
-            window.console.log(groupCount);
-            for (let i = 0; i < groupCount; i++) {
-              let img2 = [];
-              for (let j = 0; j < 2; j++) {
-                if (responseCourse.data.length - 1 >= i * 2 + j) {
-                  img2.push(responseCourse.data[i * 2 + j]);
-                }
-              }
-              this.courseList.push(img2);
-            }
-            window.console.log(this.courseList);
-            this.loading = false;
-          }
-        )
-      );
-  }
-};
-</script>
-
-<style lang="scss" scoped>
-* {
-  margin: 0;
-  padding: 0;
-}
-
-.go-in {
-  width: 100%;
-  height: 100%;
-  background-color: #14679f;
-  position: relative;
-  overflow: hidden;
-  .section {
-    width: 100%;
-    &-content {
-      width: 1240px;
-      margin: 0 auto;
-      background-color: #fff;
-
-      .content-summary {
-        //height: 500px;
-        display: flex;
-        justify-content: space-around;
-        padding: 100px 0;
-        .summary-left {
-          width: 600px;
-          .title {
-            font-size: 25px;
-            color: #e13834;
-          }
-          .eTitle {
-            font-size: 17px;
-            color: #e13834;
-            padding: 20px 0;
-          }
-          .content {
-            color: #14679f;
-            font-size: 14px;
-            text-indent: 25px;
-            line-height: 30px;
-          }
-        }
-
-        .summary-right {
-          width: 400px;
-          height: 310px;
-          border: 2px solid #1d42b9;
-          //animation: imgboxkey 4s infinite;
-          border-radius: 10px;
-          margin-top: 80px;
-          text-align: center;
-
-          img {
-            width: 360px;
-            height: 270px;
-            margin-top: 20px;
-            //animation: imgbo 4s infinite;
-          }
-        }
-      }
-
-      //发展历程
-      .content-course {
-        padding: 50px 0;
-        .course-time {
-          width: 1000px;
-          height: 400px;
-          margin: 20px auto;
-          .swiper-container {
-            height: 100%;
-          }
-          .time-show {
-            width: 700px;
-            height: 100%;
-            margin: 0 auto;
-            display: flex;
-            .time-show-item {
-              width: 350px;
-              height: 100%;
-              overflow: hidden;
-              display: flex;
-              flex-direction: column;
-
-              .item-top,
-              .item-bottom {
-                height: 190px;
-              }
-              .item-bottom {
-                // display: flex;
-                // align-content: center;
-                .item-bottom-content {
-                  background-color: #1667a0;
-                  margin: 20px 0;
-                  p {
-                    color: #fff;
-                    text-align: center;
-                    padding: 15px;
-                  }
-                }
-              }
-            }
-          }
-        }
-      }
-
-      //企业文化
-      .content-culture {
-        height: 450px;
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        align-items: flex-start;
-        padding-left: 100px;
-        background-color: #c2daeb;
-        h3 {
-          color: #3c6088;
-          font-size: 26px;
-        }
-        p {
-          color: #3c6088;
-          font-size: 26px;
-          padding: 5px 0;
-        }
-        span {
-          font-weight: 400;
-          line-height: 36px;
-          font-size: 18px;
-          padding: 5px 0;
-        }
-      }
-
-      //公司荣誉
-      .content-honor {
-        padding: 50px 0;
-        .honor-show {
-          width: 1000px;
-          margin: 30px auto;
-          display: flex;
-          flex-wrap: wrap;
-          justify-content: flex-start;
-          align-content: flex-start;
-
-          li {
-            width: 220px;
-            height: 320px;
-            margin-left: 15px;
-            list-style: none;
-            border: 1px solid palegoldenrod;
-
-            img {
-              width: 100%;
-              height: 100%;
-            }
-          }
-        }
-        p {
-          text-align: center;
-          color: #3c6088;
-        }
-      }
-
-      //团队风采
-      .content-team {
-        padding: 50px 100px;
-        .swiper-img {
-          height: 400px;
-          background: no-repeat center;
-          background-size: cover;
-        }
-      }
-
-      //合作伙伴
-      .content-partner {
-        padding: 50px 0;
-        .partner-img {
-          width: 950px;
-          margin: 20px auto;
-          display: flex;
-          justify-content: flex-start;
-          flex-wrap: wrap;
-          li {
-            width: 107px;
-            height: 107px;
-            list-style: none;
-            margin: 10px 25px;
-
-            img {
-              width: 100%;
-              height: 100%;
-              border: 1px solid rgb(194, 218, 235);
-            }
-          }
-        }
-      }
-    }
-  }
-}
-
-@keyframes imgboxkey {
-  0% {
-    border: solid rgb(29, 66, 185) 2px;
-  }
-  40% {
-    border: solid rgb(255, 255, 255) 2px;
-  }
-  60% {
-    border: solid rgb(255, 255, 255) 2px;
-  }
-  100% {
-    border: solid rgb(29, 66, 185) 2px;
-  }
-}
-
-@keyframes imgbo {
-  0% {
-    transform: scale(1);
-    box-shadow: 0px 0px 0px 0px #ababab;
-  }
-  50% {
-    transform: scale(1.1);
-    box-shadow: 0px 0px 10px 5px #ababab;
-  }
-  100% {
-    transform: scale(1);
-    box-shadow: 0px 0px 0px 0px #ababab;
-  }
-}
-.el-divider--horizontal {
-  margin: 1px 0;
-}
-
-.top {
-  h3,
-  p {
-    text-align: center;
-    color: #3c6088;
-    font-weight: 400;
-    padding: 10px 0;
-  }
-  h3 {
-    font-size: 30px;
-  }
-  p {
-    font-size: 20px;
-  }
-  .border {
-    border-bottom: 1px solid #3c6088;
-    width: 15%;
-    margin: 0 auto;
-  }
-}
-// .swiper-button-disabled {
-//   display: none;
-// }
-.order {
-  order: -1;
-}
-.order-top {
-  order: 1;
-}
-.el-divider {
-  background-color: red;
-  height: 3px;
-  .el-divider__text {
-    width: 20px;
-    height: 20px;
-    border-radius: 50%;
-    padding: 0px;
-    color: #fff;
-    border: 3px solid red;
-  }
-}
-.el-divider-active {
-  background-color: #3c6088;
-}
-.honor-big-img {
-  width: 100%;
-  height: 100%;
-  z-index: 10;
-  text-align: center;
-  padding-bottom: 20px;
-  padding: 5%;
-  //background-color: #14679f;
-  .el-dialog__wrapper {
-    position: fixed;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    overflow: auto;
-    margin: 0;
-
-    .el-dialog__body {
-      overflow: hidden;
-      img {
-        width: 100%;
-      }
-    }
-  }
-}
-</style>

src/views/Home.vue

@@ -286,17 +286,17 @@ export default {
 <style lang="scss" scoped>
 .slide-one {
   height: 320px;
-  background: url(../assets/img/home-banner.png) no-repeat center;
+  background: url(../assets/img/home.png) no-repeat center;
   background-size: cover;
 }
 .slide-two {
   height: 320px;
-  background: url(../assets/img/home-banner.png) no-repeat center;
+  background: url(../assets/img/home.png) no-repeat center;
   background-size: cover;
 }
 .slide-three {
   height: 320px;
-  background: url(../assets/img/home-banner.png) no-repeat center;
+  background: url(../assets/img/home.png) no-repeat center;
   background-size: cover;
 }
 .common-container {

src/views/Introduce.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="news">
-    <Banner :img="require('@/assets/img/center-introduce.png')" />
+    <Banner :img="require('@/assets/img/introduce.png')" />
     <div class="common-container">
       <el-container>
         <LeftTabs title="中心简介" :options="options" @tabSelect="tabSelect" />

src/views/Login.vue

@@ -102,7 +102,7 @@ a {
   display: flex;
   align-items: center;
   justify-content: center;
-  background: url('../assets/img/login-bg.png') center no-repeat;
+  background: url('../assets/img/login.png') center no-repeat;
   background-size: 100% 100%;
 }
 

src/views/NewsDetails.vue

@@ -1,87 +0,0 @@
-<template>
-  <div class="NewsDetails">
-    <banner img="../assets/img/bgtop.jpg" />
-    <div class="NewsDetails-product">
-      <div class="NewsDetails-product-content">
-        <img v-lazy="imgserver+newsIdList.Img" alt />
-        <p class="product-title">{{newsIdList.Title}}</p>
-        <p class="product-time">{{newsIdList.CreateTime}}</p>
-        <p class="product-content">{{newsIdList.Content}}</p>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import Banner from "../components/Banner";
-export default {
-  name: "NewsDetails",
-  components: {
-    Banner
-  },
-  data() {
-    return {
-      pid: 0,
-      newsIdList: {}
-    };
-  },
-  created() {
-    this.pid = this.$route.params.id;
-    window.console.log(this.pid);
-  },
-  mounted() {
-    this.loadData();
-  },
-  methods: {
-    loadData() {
-      this.$http
-        .get(`News/GetNewsById/${this.pid}`)
-        .then(response => {
-          //console.log(response);
-          this.newsIdList = response.data;
-          window.console.log(this.newsIdList);
-        })
-        .catch(function(error) {
-          window.console.log(error);
-        });
-    }
-  }
-};
-</script>
-
-<style lang="scss" scoped>
-.NewsDetails {
-  width: 100%;
-  height: 100%;
-  //overflow: hidden;
-  background-color: #14679f;
-  &-product {
-    width: 1240px;
-    margin: 0 auto;
-    background-color: #fff;
-    border: 1px solid red;
-    &-content {
-      width: 760px;
-      margin: 0 auto;
-      display: flex;
-      flex-direction: column;
-      align-items: flex-start;
-      padding: 50px 0;
-      img {
-        width: 100%;
-        //height: 500px;
-      }
-      .product-title {
-        font-size: 25px;
-        color: #e13834;
-        padding: 20px 0;
-      }
-      .product-content {
-        font-size: 17px;
-        font-weight: bolder;
-        padding: 20px 0;
-      }
-    }
-  }
-}
-</style>

src/views/PersonalCenter/appointment.vue

@@ -0,0 +1,550 @@
+<template>
+  <div class="news">
+    <div class="w100">
+      <el-card>
+        <div class="toolbar-wrap">
+          <div class="switch-date">
+            <div class="btn day"
+                 :class="curSelectedDate == 'd' ? 'actived' : ''"
+                 @click="selectDate('d')">
+              日
+            </div>
+            <div class="btn week"
+                 :class="curSelectedDate == 'w' ? 'actived' : ''"
+                 @click="selectDate('w')">
+              周
+            </div>
+            <div class="btn month"
+                 :class="curSelectedDate == 'm' ? 'actived' : ''"
+                 @click="selectDate('m')">
+              月
+            </div>
+          </div>
+          <div class="date-wrap">
+            <div class="prev"
+                 @click="handlePrev">
+              <el-button icon="el-icon-arrow-left"
+                         size="small"
+                         circle />
+            </div>
+            <div class="date">
+              <el-popover :width="200"
+                          placement="top-start"
+                          trigger="click">
+                <div slot="reference">
+                  <span class="time">{{ curTime }}</span>
+                </div>
+                <el-date-picker @change="getAppointList"
+                                style="width: 100%"
+                                v-model="curTime"
+                                type="date"
+                                placeholder="选择日期"
+                                value-format="yyyy-MM-dd"
+                                :clearable="false" />
+              </el-popover>
+              <span class="week">{{ WEEKS[moment(curTime).day()] }}</span>
+            </div>
+            <div class="next"
+                 @click="handleNext">
+              <el-button icon="el-icon-arrow-right"
+                         size="small"
+                         circle />
+            </div>
+          </div>
+        </div>
+        <div class="table-wrap">
+          <el-table :data="appointData"
+                    border
+                    height="500"
+                    style="width: 922px">
+            <el-table-column type="index"
+                             width="50"
+                             align="center"></el-table-column>
+            <el-table-column prop="instName"
+                             label="仪器名称"
+                             min-width="160" />
+            <el-table-column prop="projectName"
+                             label="课题组/服务"
+                             min-width="160">
+              <template #default="{ row }">
+                <span v-if="row.projectName">{{ row.projectName }}</span>
+                <span v-else>{{ row.serviceName }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column prop="startTime"
+                             label="开始时间"
+                             width="160">
+              <template #default="{ row }">
+                {{ parseTime(row.startTime, "{y}-{m}-{d} {h}:{i}") }}
+              </template>
+            </el-table-column>
+            <el-table-column prop="endTime"
+                             label="结束时间"
+                             width="160">
+              <template #default="{ row }">
+                {{ parseTime(row.endTime, "{y}-{m}-{d} {h}:{i}") }}
+              </template>
+            </el-table-column>
+            <el-table-column prop="userName"
+                             label="预约人"
+                             width="140" />
+            <el-table-column prop="userContact"
+                             label="联系方式"
+                             width="160" />
+            <el-table-column prop="appointStatus"
+                             label="预约状态"
+                             width="160">
+              <template #default="{ row }">
+                {{ setStatus(row.appointStatus) }}
+              </template>
+            </el-table-column>
+            <el-table-column prop="appointStatus"
+                             label="违约情况"
+                             width="160">
+              <template #default="{ row }">
+                {{ getBreachTypes(row) }}
+              </template>
+            </el-table-column>
+            <el-table-column prop="breachScore"
+                             label="扣分明细"
+                             width="160">
+              <template #default="{ row }">
+                <span>{{ row.breachScore }}分</span>
+              </template>
+            </el-table-column>
+            <el-table-column label="操作"
+                             fixed="right"
+                             width="100">
+              <template #default="{ row }">
+                <el-button type="text"
+                           v-if="row.appointStatus == '10'"
+                           @click="handleEditAppoint(row)"
+                           text>
+                  编辑
+                </el-button>
+                <el-button type="text"
+                           style="color: #f56c6c"
+                           v-if="
+                        row.appointStatus == '10' || row.appointStatus == '20'
+                      "
+                           @click="cancelAppoint(row)"
+                           text>
+                  取消
+                </el-button>
+              </template>
+            </el-table-column>
+          </el-table>
+        </div>
+        <div class="pagination">
+          <el-pagination background
+                         @size-change="handleSizeChange"
+                         @current-change="handleCurrentChange"
+                         :current-page="searchForm.pageNum"
+                         :page-sizes="[10, 50, 100]"
+                         :page-size="searchForm.pageSize"
+                         layout="total, sizes, prev, pager, next, jumper"
+                         :total="total"></el-pagination>
+        </div>
+      </el-card>
+    </div>
+    <AppointCreate ref="appointCreateRef"
+                   @refresh="
+        searchForm.pageNum = 1;
+        getAppointList();
+      "></AppointCreate>
+    <PersonalInfoDialog ref="personalInfoDialogRef" />
+  </div>
+</template>
+
+<script>
+import Banner from "../../components/Banner";
+import LeftTabs from "@/components/LeftTabs";
+import RightContent from "@/components/RightContent";
+import * as echarts from "echarts";
+import FullCalendar from "@fullcalendar/vue";
+import dayGridPlugin from "@fullcalendar/daygrid";
+import interactionPlugin from "@fullcalendar/interaction";
+import { getNoticeList } from "@/api/login";
+import {
+  getInstrList,
+  getInstrListByUser,
+  userCancelAppoint,
+} from "@/api/instr";
+import { mapGetters } from "vuex";
+import moment from "moment";
+import to from "await-to-js";
+import { getToken } from "@/utils/auth";
+import AppointCreate from "../equipment/components/appoint-create.vue";
+import PersonalInfoDialog from "@/components/PersonalInfo";
+export default {
+  name: "PersonalCenter",
+  components: {
+    Banner,
+    LeftTabs,
+    RightContent,
+    FullCalendar,
+    AppointCreate,
+    PersonalInfoDialog,
+  },
+  data() {
+    return {
+      active: -1,
+      loading: true,
+      selectTab: {},
+      searchForm: {
+        pageNum: 1,
+        pageSize: 10,
+      },
+      total: 0,
+      options: [
+        {
+          label: "工作台",
+          path: "work",
+        },
+        {
+          label: "预约信息",
+          path: "/personal-center/appointment",
+        },
+      ],
+      routeList: [
+        {
+          name: "首页",
+          path: "/",
+        },
+        {
+          name: "个人中心",
+        },
+      ],
+      breadList: [],
+      calendarOptions: {
+        height: 300,
+        plugins: [dayGridPlugin, interactionPlugin], // 需要用哪个插件引入后放到这个数组里
+        initialDate: new Date(), // 日历第一次加载时显示的初始日期。可以解析为Date的任何职包括ISO8601日期字符串，例如"2014-02-01"。
+        initialView: "dayGridMonth", // 日历加载时的初始视图，默认值为'dayGridMonth'，可以为任何可用视图的值，如例如'dayGridWeek'，'timeGridDay'，'listWeek'
+        locale: "zh-cn", // 设置日历的语言，中文为 “zh-cn”
+        firstDay: "1", // 设置每周的第一天，默认值取决于当前语言环境，该值为代表星期几的数字，且值必须为整数，星期日=0
+        weekNumberCalculation: "ISO", // 指定"ISO"结果为ISO8601周数。指定"ISO"将firstDay的默认值更改为1（Monday）
+        buttonText: {
+          // 文本将显示在headerToolbar / footerToolbar的按钮上。不支持HTML注入。所有特殊字符将被转义。
+          today: "今天",
+          month: "月",
+          week: "周",
+          day: "天",
+        },
+        headerToolbar: {
+          // 在日历顶部定义按钮和标题。将headerToolbar选项设置为false不会显示任何标题工具栏。可以为对象提供属性start/center/end或left/center/right。这些属性包含带有逗号/空格分隔值的字符串。用逗号分隔的值将相邻显示。用空格分隔的值之间会显示一个很小的间隙。
+          right: "today prev,next",
+          center: "title",
+          left: "dayGridMonth,dayGridWeek,dayGridDay",
+        },
+        eventTimeFormat: {
+          // 在每个事件上显示的时间的格式
+          hour: "numeric",
+          minute: "2-digit",
+          hour12: false,
+        },
+        events: [],
+        dateClick: this.handleDateClick, // 当用户单击日期或时间时,触发该回调，触发此回调，您必须加载interaction插件
+      },
+      instrList: [],
+      noticeList: [],
+      curSelectedDate: "w",
+      curTime: "",
+      appointData: [],
+      WEEKS: [
+        "星期日",
+        "星期一",
+        "星期二",
+        "星期三",
+        "星期四",
+        "星期五",
+        "星期六",
+      ],
+      chart: null
+    };
+  },
+  computed: {
+    ...mapGetters(["userInfo"]),
+  },
+  mounted() {
+    this.curTime = this.getToday();
+    this.getInstr();
+    this.getAppointList();
+  },
+  methods: {
+    moment,
+    // 獲取當前日期
+    getToday() {
+      return moment(moment().startOf("day").valueOf()).format("YYYY-MM-DD");
+    },
+    getYesterday() {
+      this.curTime = moment(
+        moment(this.curTime).add(-1, "days").startOf("day").valueOf()
+      ).format("YYYY-MM-DD");
+    },
+    getTomorrow() {
+      this.curTime = moment(
+        moment(this.curTime).add(+1, "days").startOf("day").valueOf()
+      ).format("YYYY-MM-DD");
+    },
+    getPrevWeekDays() {
+      this.curTime = moment(this.curTime)
+        .subtract(1, "week")
+        .format("YYYY-MM-DD");
+    },
+    getNextWeekDays() {
+      this.curTime = moment(this.curTime).add(1, "week").format("YYYY-MM-DD");
+    },
+    getPrevMonthDays() {
+      this.curTime = moment(this.curTime)
+        .subtract(1, "months")
+        .format("YYYY-MM-DD");
+    },
+    getNextMonthDays() {
+      this.curTime = moment(this.curTime).add(1, "months").format("YYYY-MM-DD");
+    },
+    getWeekDate() {
+      // 获取当前周的周一0点
+      var startOfWeek = moment(this.curTime)
+        .startOf("isoWeek")
+        .format("YYYY-MM-DD HH:mm:ss");
+
+      // 获取下一周的周一0点
+      var startOfNextWeek = moment(this.curTime)
+        .startOf("isoWeek")
+        .add(1, "weeks")
+        .format("YYYY-MM-DD HH:mm:ss");
+      return [startOfWeek, startOfNextWeek];
+    },
+    getMonthDate() {
+      const date = moment(this.curTime);
+      // 获取当前月份的最后一天
+      return [
+        date.startOf("month").format("YYYY-MM-DD HH:mm:ss"),
+        date.endOf("month").add(1, "days").format("YYYY-MM-DD") + " 00:00:00",
+      ];
+    },
+    // 上一周、天、月
+    handlePrev() {
+      if (this.curSelectedDate == "d") {
+        this.getYesterday();
+      } else if (this.curSelectedDate == "w") {
+        this.getPrevWeekDays();
+      } else if (this.curSelectedDate == "m") {
+        this.getPrevMonthDays();
+      }
+      this.getAppointList();
+    },
+    // 下一周、天、月
+    handleNext() {
+      if (this.curSelectedDate == "d") {
+        this.getTomorrow();
+      } else if (this.curSelectedDate == "w") {
+        this.getNextWeekDays();
+      } else if (this.curSelectedDate == "m") {
+        this.getNextMonthDays();
+      }
+      this.getAppointList();
+    },
+    selectDate(date) {
+      this.curSelectedDate = date;
+      this.getAppointList();
+    },
+    async getAppointList() {
+      let startTimeStart = "";
+      let startTimeEnd = "";
+      if (this.curSelectedDate == "d") {
+        startTimeStart = moment(this.curTime).format("YYYY-MM-DD HH:mm:ss");
+        startTimeEnd = moment(this.curTime)
+          .add(1, "days")
+          .format("YYYY-MM-DD HH:mm:ss");
+      } else if (this.curSelectedDate == "w") {
+        startTimeStart = this.getWeekDate()[0];
+        startTimeEnd = this.getWeekDate()[1];
+      } else if (this.curSelectedDate == "m") {
+        startTimeStart = moment(this.curTime)
+          .startOf("month")
+          .format("YYYY-MM-DD HH:mm:ss");
+        startTimeEnd = this.getMonthDate()[1];
+      }
+      console.log(startTimeStart);
+      const [err, res] = await to(
+        getInstrListByUser({
+          startTimeStart,
+          startTimeEnd,
+          ...this.searchForm,
+        })
+      );
+      if (err) return;
+      this.appointData = res.data.list;
+      this.total = res.data.total;
+    },
+    setStatus(key) {
+      let str = "";
+      switch (key) {
+        case "10":
+          str = "待审核";
+          break;
+        case "11":
+          str = "已退回";
+          break;
+        case "20":
+          str = "已通过";
+          break;
+        case "30":
+          str = "已驳回";
+          break;
+        case "40":
+          str = "已取消";
+          break;
+        case "50":
+          str = "已上机";
+          break;
+        case "60":
+          str = "已完成";
+          break;
+        case "70":
+          str = "审核超时";
+          break;
+        case "80":
+          str = "超时取消";
+          break;
+        case "90":
+          str = "超时未上机";
+          break;
+      }
+      return str;
+    },
+    getBreachTypes(row) {
+      let breachTypes = [];
+      if (row.isLate) breachTypes.push("迟到");
+      if (row.isOvertime) breachTypes.push("超时");
+      if (row.isLeaveEarly) breachTypes.push("早退");
+      if (row.isAbsence) breachTypes.push("爽约");
+      return breachTypes.join("、") || "-";
+    },
+    // 取消预约
+    cancelAppoint(row) {
+      // 删除附件
+      this.$confirm("确认取消预约?", "提示", {
+        confirmButtonText: "确认",
+        cancelButtonText: "取消",
+        type: "warning",
+      })
+        .then(async () => {
+          const post = userCancelAppoint({ id: Number(row.id) });
+          const [err] = await to(post);
+          if (err) return;
+          this.$message.success("取消成功");
+          this.getAppointList();
+        })
+        .catch(() => {});
+    },
+    // 编辑预约
+    handleEditAppoint(row) {
+      const token = getToken();
+      if (!token) {
+        return this.$router.push("/login");
+      }
+      this.$refs.appointCreateRef.openDialog(row);
+    },
+    // 选择tab
+    tabSelect(row, index) {
+      this.active = index;
+      this.selectTab = { ...row };
+      this.breadList = [...this.routeList, { name: this.selectTab.label }];
+      if (index == 1) {
+        this.getAppointList();
+      }
+      this.$router.push(row.path);
+    },
+    async getNotice() {
+      const [err, res] = await to(getNoticeList());
+      if (err) return;
+      this.noticeList = res.data.list || [];
+    },
+    async getInstr() {
+      const [err, res] = await to(getInstrList({ pageSize: 4, pageNum: 1 }));
+      if (err) return;
+      this.instrList = res.data.list || [];
+    },
+    handleDateClick(dateClickInfo) {
+      console.log(dateClickInfo);
+    },
+    handleSizeChange(val) {
+      this.searchForm.pageSize = val;
+      this.getAppointList();
+    },
+    handleCurrentChange(val) {
+      this.searchForm.pageNum = val;
+      this.getAppointList();
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.toolbar-wrap {
+  height: 30px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  // margin-bottom: 20px;
+  .switch-date {
+    width: 108px;
+    height: 28px;
+    border-radius: 2px;
+    border: 1px solid #b5c1d8;
+    display: flex;
+    padding: 4px 6px 0;
+    .btn {
+      cursor: pointer;
+      flex: 1;
+      font-size: 13px;
+      color: #585858;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      &.actived {
+        background: #eef3fe;
+        font-weight: bold;
+        color: #2c78ff;
+      }
+    }
+  }
+  .date-wrap {
+    display: flex;
+    align-items: center;
+    :deep(.el-button--small.is-circle) {
+      width: 26px;
+      height: 26px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+    .date {
+      margin: 0 10px;
+      font-size: 14px;
+      color: #585858;
+      display: flex;
+      align-items: center;
+    }
+    .week {
+      color: #2c78ff;
+      padding-left: 6px;
+    }
+  }
+}
+.table-wrap {
+  flex: 1;
+  margin: 20px 0 0;
+  // overflow: hidden;
+}
+.pagination {
+  width: 100%;
+  height: 50px;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+}
+</style>

src/views/PersonalCenter/index.vue

@@ -0,0 +1,673 @@
+<template>
+  <div class="news">
+    <div class="center-banner">
+      <div class="content">
+        <div class="user">
+          <img v-if="userInfo.avatar" :src="userInfo.avatar" />
+          <img v-else src="../../assets/img/default-avatar.png">
+          <p>
+            <span>Hi~{{ userInfo.nickName }}</span>
+            <span>{{ userInfo.roleNames }}</span>
+            <span>{{ userInfo.pgName || '未加入课题组' }}</span>
+          </p>
+        </div>
+        <div class="btns">
+          <p>安全积分：<span>100</span></p>
+          <el-button size="medium"
+                     round>个人设置</el-button>
+        </div>
+      </div>
+    </div>
+    <div class="common-container">
+      <el-container>
+        <div class="left-tabs">
+          <h4>个人中心</h4>
+          <ul>
+            <li
+              v-for="(item, index) in options"
+              :key="index"
+              :class="{ active: $route.path === item.path }"
+              @click="tabSelect(item, index)"
+            >
+              {{ item.label }}
+            </li>
+          </ul>
+        </div>
+        <router-view></router-view>
+      </el-container>
+    </div>
+    <AppointCreate
+      ref="appointCreateRef"
+      @refresh="
+        searchForm.pageNum = 1;
+        getAppointList();
+      "
+    ></AppointCreate>
+     <PersonalInfoDialog ref="personalInfoDialogRef" />
+  </div>
+</template>
+
+<script>
+  import Banner from "../../components/Banner";
+  import LeftTabs from "@/components/LeftTabs";
+  import RightContent from "@/components/RightContent";
+  import FullCalendar from "@fullcalendar/vue";
+  import dayGridPlugin from "@fullcalendar/daygrid";
+  import interactionPlugin from "@fullcalendar/interaction";
+  import { getNoticeList } from "@/api/login";
+  import {
+    getInstrList,
+    getInstrListByUser,
+    userCancelAppoint,
+  } from "@/api/instr";
+  import { mapGetters } from "vuex";
+  import moment from "moment";
+  import to from "await-to-js";
+  import { getToken } from "@/utils/auth";
+  import AppointCreate from "../equipment/components/appoint-create.vue";
+  import PersonalInfoDialog from "@/components/PersonalInfo";
+  export default {
+    name: "PersonalCenter",
+    components: {
+      Banner,
+      LeftTabs,
+      RightContent,
+      FullCalendar,
+      AppointCreate,
+	  PersonalInfoDialog,
+    },
+    data() {
+      return {
+        active: -1,
+        loading: true,
+        selectTab: {},
+        searchForm: {
+          pageNum: 1,
+          pageSize: 10,
+        },
+        total: 0,
+        options: [
+          {
+            label: "工作台",
+            path: '/personal-center/work'
+          },
+          {
+            label: "预约信息",
+            path: '/personal-center/appointment'
+          },
+        ],
+        routeList: [
+          {
+            name: "首页",
+            path: "/",
+          },
+          {
+            name: "个人中心",
+          },
+        ],
+        breadList: [],
+        calendarOptions: {
+          height: 300,
+          plugins: [dayGridPlugin, interactionPlugin], // 需要用哪个插件引入后放到这个数组里
+          initialDate: new Date(), // 日历第一次加载时显示的初始日期。可以解析为Date的任何职包括ISO8601日期字符串，例如"2014-02-01"。
+          initialView: "dayGridMonth", // 日历加载时的初始视图，默认值为'dayGridMonth'，可以为任何可用视图的值，如例如'dayGridWeek'，'timeGridDay'，'listWeek'
+          locale: "zh-cn", // 设置日历的语言，中文为 “zh-cn”
+          firstDay: "1", // 设置每周的第一天，默认值取决于当前语言环境，该值为代表星期几的数字，且值必须为整数，星期日=0
+          weekNumberCalculation: "ISO", // 指定"ISO"结果为ISO8601周数。指定"ISO"将firstDay的默认值更改为1（Monday）
+          buttonText: {
+            // 文本将显示在headerToolbar / footerToolbar的按钮上。不支持HTML注入。所有特殊字符将被转义。
+            today: "今天",
+            month: "月",
+            week: "周",
+            day: "天",
+          },
+          headerToolbar: {
+            // 在日历顶部定义按钮和标题。将headerToolbar选项设置为false不会显示任何标题工具栏。可以为对象提供属性start/center/end或left/center/right。这些属性包含带有逗号/空格分隔值的字符串。用逗号分隔的值将相邻显示。用空格分隔的值之间会显示一个很小的间隙。
+            right: "today prev,next",
+            center: "title",
+            left: "dayGridMonth,dayGridWeek,dayGridDay",
+          },
+          eventTimeFormat: {
+            // 在每个事件上显示的时间的格式
+            hour: "numeric",
+            minute: "2-digit",
+            hour12: false,
+          },
+          events: [],
+          dateClick: this.handleDateClick, // 当用户单击日期或时间时,触发该回调，触发此回调，您必须加载interaction插件
+        },
+        instrList: [],
+        noticeList: [],
+        curSelectedDate: "w",
+        curTime: "",
+        appointData: [],
+        WEEKS: [
+          "星期日",
+          "星期一",
+          "星期二",
+          "星期三",
+          "星期四",
+          "星期五",
+          "星期六",
+        ],
+      };
+    },
+    computed: {
+      ...mapGetters(["userInfo"]),
+    },
+    mounted() {
+      // this.tabSelect(this.options[0], 0);
+      this.curTime = this.getToday();
+      this.getNotice();
+      this.getInstr();
+    },
+    methods: {
+      moment,
+      // 獲取當前日期
+      getToday() {
+        return moment(moment().startOf("day").valueOf()).format("YYYY-MM-DD");
+      },
+      getYesterday() {
+        this.curTime = moment(
+          moment(this.curTime).add(-1, "days").startOf("day").valueOf()
+        ).format("YYYY-MM-DD");
+      },
+      getTomorrow() {
+        this.curTime = moment(
+          moment(this.curTime).add(+1, "days").startOf("day").valueOf()
+        ).format("YYYY-MM-DD");
+      },
+      getPrevWeekDays() {
+        this.curTime = moment(this.curTime)
+          .subtract(1, "week")
+          .format("YYYY-MM-DD");
+      },
+      getNextWeekDays() {
+        this.curTime = moment(this.curTime).add(1, "week").format("YYYY-MM-DD");
+      },
+      getPrevMonthDays() {
+        this.curTime = moment(this.curTime)
+          .subtract(1, "months")
+          .format("YYYY-MM-DD");
+      },
+      getNextMonthDays() {
+        this.curTime = moment(this.curTime)
+          .add(1, "months")
+          .format("YYYY-MM-DD");
+      },
+      getWeekDate() {
+        // 获取当前周的周一0点
+        var startOfWeek = moment(this.curTime)
+          .startOf("isoWeek")
+          .format("YYYY-MM-DD HH:mm:ss");
+
+        // 获取下一周的周一0点
+        var startOfNextWeek = moment(this.curTime)
+          .startOf("isoWeek")
+          .add(1, "weeks")
+          .format("YYYY-MM-DD HH:mm:ss");
+        return [startOfWeek, startOfNextWeek];
+      },
+      getMonthDate() {
+        const date = moment(this.curTime);
+        // 获取当前月份的最后一天
+        return [
+          date.startOf("month").format("YYYY-MM-DD HH:mm:ss"),
+          date.endOf("month").add(1, "days").format("YYYY-MM-DD") + " 00:00:00",
+        ];
+      },
+      // 上一周、天、月
+      handlePrev() {
+        if (this.curSelectedDate == "d") {
+          this.getYesterday();
+        } else if (this.curSelectedDate == "w") {
+          this.getPrevWeekDays();
+        } else if (this.curSelectedDate == "m") {
+          this.getPrevMonthDays();
+        }
+        this.getAppointList();
+      },
+      // 下一周、天、月
+      handleNext() {
+        if (this.curSelectedDate == "d") {
+          this.getTomorrow();
+        } else if (this.curSelectedDate == "w") {
+          this.getNextWeekDays();
+        } else if (this.curSelectedDate == "m") {
+          this.getNextMonthDays();
+        }
+        this.getAppointList();
+      },
+      selectDate(date) {
+        this.curSelectedDate = date;
+        this.getAppointList();
+      },
+      async getAppointList() {
+        let startTimeStart = "";
+        let startTimeEnd = "";
+        if (this.curSelectedDate == "d") {
+          startTimeStart = moment(this.curTime).format("YYYY-MM-DD HH:mm:ss");
+          startTimeEnd = moment(this.curTime)
+            .add(1, "days")
+            .format("YYYY-MM-DD HH:mm:ss");
+        } else if (this.curSelectedDate == "w") {
+          startTimeStart = this.getWeekDate()[0];
+          startTimeEnd = this.getWeekDate()[1];
+        } else if (this.curSelectedDate == "m") {
+          startTimeStart = moment(this.curTime)
+            .startOf("month")
+            .format("YYYY-MM-DD HH:mm:ss");
+          startTimeEnd = this.getMonthDate()[1];
+        }
+        console.log(startTimeStart);
+        const [err, res] = await to(
+          getInstrListByUser({
+            startTimeStart,
+            startTimeEnd,
+            ...this.searchForm,
+          })
+        );
+        if (err) return;
+        this.appointData = res.data.list;
+        this.total = res.data.total;
+      },
+      setStatus(key) {
+        let str = "";
+        switch (key) {
+          case "10":
+            str = "待审核";
+            break;
+          case "11":
+            str = "已退回";
+            break;
+          case "20":
+            str = "已通过";
+            break;
+          case "30":
+            str = "已驳回";
+            break;
+          case "40":
+            str = "已取消";
+            break;
+          case "50":
+            str = "已上机";
+            break;
+          case "60":
+            str = "已完成";
+            break;
+          case "70":
+            str = "审核超时";
+            break;
+          case "80":
+            str = "超时取消";
+            break;
+          case "90":
+            str = "超时未上机";
+            break;
+        }
+        return str;
+      },
+      getBreachTypes(row) {
+        let breachTypes = [];
+        if (row.isLate) breachTypes.push("迟到");
+        if (row.isOvertime) breachTypes.push("超时");
+        if (row.isLeaveEarly) breachTypes.push("早退");
+        if (row.isAbsence) breachTypes.push("爽约");
+        return breachTypes.join("、") || "-";
+      },
+      // 取消预约
+      cancelAppoint(row) {
+        // 删除附件
+        this.$confirm("确认取消预约?", "提示", {
+          confirmButtonText: "确认",
+          cancelButtonText: "取消",
+          type: "warning",
+        })
+          .then(async () => {
+            const post = userCancelAppoint({ id: Number(row.id) });
+            const [err] = await to(post);
+            if (err) return;
+            this.$message.success("取消成功");
+            this.getAppointList();
+          })
+          .catch(() => {});
+      },
+      // 编辑预约
+      handleEditAppoint(row) {
+        const token = getToken();
+        if (!token) {
+          return this.$router.push("/login");
+        }
+        this.$refs.appointCreateRef.openDialog(row);
+      },
+      // 选择tab
+      tabSelect(row, index) {
+        this.active = index;
+        this.selectTab = { ...row };
+        this.breadList = [...this.routeList, { name: this.selectTab.label }];
+        this.$router.push(row.path)
+      },
+      async getNotice() {
+        const [err, res] = await to(getNoticeList());
+        if (err) return;
+        this.noticeList = res.data.list || [];
+      },
+      async getInstr() {
+        const [err, res] = await to(getInstrList({ pageSize: 4, pageNum: 1 }));
+        if (err) return;
+        this.instrList = res.data.list || [];
+      },
+      handleDateClick(dateClickInfo) {
+        console.log(dateClickInfo);
+      },
+      handleSizeChange(val) {
+        this.searchForm.pageSize = val;
+        this.getAppointList();
+      },
+      handleCurrentChange(val) {
+        this.searchForm.pageNum = val;
+        this.getAppointList();
+      },
+    },
+  };
+</script>
+
+<style lang="scss" scoped>
+.center-banner {
+  background: url(../../assets/img/center-banner.png) top no-repeat;
+  background-size: 100% 240px;
+  height: 240px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  .content {
+    height: 180px;
+    width: 1200px;
+    border-radius: 16px;
+    background-color: rgba($color: #fff, $alpha: 0.5);
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 40px;
+    .user {
+      display: flex;
+      align-items: center;
+      img {
+        height: 100px;
+        width: 100px;
+        border-radius: 50%;
+      }
+      p {
+        height: 100px;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-around;
+        margin-left: 12px;
+        span:nth-child(1) {
+          font-weight: bold;
+          font-size: 18px;
+        }
+        span:nth-child(3) {
+          font-weight: bold;
+        }
+      }
+    }
+    .btns {
+      display: flex;
+      align-items: center;
+      > p {
+        display: flex;
+        align-items: center;
+        margin-right: 20px;
+        line-height: 30px;
+        font-weight: bold;
+        span {
+          font-size: 30px;
+          font-weight: bold;
+          color: #1d66dc;
+          font-style: italic;
+        }
+      }
+    }
+  }
+}
+  .flex {
+    width: 100%;
+    flex-wrap: wrap;
+    .el-card {
+      flex: 0 0 calc(50% - 14px);
+      height: 400px;
+      ::v-deep .el-card__body {
+        padding: 10px;
+        height: calc(100% - 79px);
+      }
+      &.calendar {
+        height: 500px;
+        ul {
+          display: flex;
+          flex-direction: column;
+          justify-content: space-around;
+          height: 130px;
+          li {
+            font-size: 14px;
+            display: flex;
+            align-items: center;
+            &:before {
+              content: "";
+              display: inline-block;
+              width: 6px;
+              height: 6px;
+              border-radius: 3px;
+              background-color: #a30014;
+              margin-right: 4px;
+            }
+          }
+        }
+      }
+      &.cost {
+        height: 300px;
+      }
+    }
+    &.technical .el-card {
+      height: auto;
+      ::v-deep .el-card__body {
+        height: auto;
+      }
+    }
+  }
+  .cage-list {
+    display: flex;
+    flex-wrap: wrap;
+    list-style: none;
+    li {
+      height: 160px;
+      width: 221px;
+      font-size: 14px;
+      border: 1px solid #ebeef5;
+      border-radius: 6px;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-around;
+      padding: 10px;
+      &:nth-child(2n) {
+        margin-left: 4px;
+      }
+      &:nth-child(n + 3) {
+        margin-top: 4px;
+      }
+      header {
+        display: flex;
+        justify-content: space-between;
+        p {
+          color: #1d66dc;
+        }
+      }
+    }
+  }
+  .platform-list {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    li {
+      flex: 1;
+      display: flex;
+      align-items: center;
+      margin: 12px;
+      border-radius: 8px;
+      overflow: hidden;
+      border: 1px solid #ebeef5;
+      .text {
+        flex: 1;
+        height: 100%;
+        padding: 12px;
+      }
+      .btn {
+        width: 120px;
+        height: 100%;
+        color: #fff;
+        font-size: 20px;
+        background-color: #73b9b9;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: space-around;
+        header {
+          font-size: 14px;
+        }
+        .remain-time {
+          color: #f56c6c;
+        }
+      }
+    }
+  }
+  .chart-container {
+    display: flex;
+    .text {
+      flex: 1;
+      font-size: 14px;
+      display: flex;
+      flex-direction: column;
+      header {
+        color: #1d66dc;
+      }
+      ul {
+        margin-top: 12px;
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-around;
+      }
+      li {
+        background-color: #e4b5bb;
+        border-radius: 4px;
+        padding: 4px 8px;
+      }
+    }
+    #chart {
+      width: 233px;
+      height: 220px;
+    }
+  }
+  .technical {
+    p {
+      font-size: 16px;
+      height: 24px;
+      line-height: 24px;
+    }
+    ul {
+      display: flex;
+      height: 50px;
+      line-height: 50px;
+      border-radius: 4px;
+      overflow: hidden;
+      margin: 20px 0;
+      li {
+        flex: 1;
+        text-align: center;
+        background-color: #d9fba5;
+        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+        &:nth-child(2) {
+          background-color: #98ca49;
+        }
+        &:nth-child(3) {
+          background-color: #a4dffa;
+        }
+        &:nth-child(4) {
+          background-color: #48bff4;
+        }
+        &:nth-child(5) {
+          background-color: #b6b6f1;
+        }
+        &:nth-child(6) {
+          background-color: #ebcda7;
+        }
+        &:nth-child(7) {
+          background-color: #f2a4ad;
+        }
+      }
+    }
+  }
+  .toolbar-wrap {
+    height: 30px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    // margin-bottom: 20px;
+    .switch-date {
+      width: 108px;
+      height: 28px;
+      border-radius: 2px;
+      border: 1px solid #b5c1d8;
+      display: flex;
+      padding: 4px 6px 0;
+      .btn {
+        cursor: pointer;
+        flex: 1;
+        font-size: 13px;
+        color: #585858;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        &.actived {
+          background: #eef3fe;
+          font-weight: bold;
+          color: #2c78ff;
+        }
+      }
+    }
+    .date-wrap {
+      display: flex;
+      align-items: center;
+      :deep(.el-button--small.is-circle) {
+        width: 26px;
+        height: 26px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+      .date {
+        margin: 0 10px;
+        font-size: 14px;
+        color: #585858;
+        display: flex;
+        align-items: center;
+      }
+      .week {
+        color: #2c78ff;
+        padding-left: 6px;
+      }
+    }
+  }
+  .table-wrap {
+    flex: 1;
+    margin: 20px 0 0;
+    // overflow: hidden;
+  }
+  .pagination {
+    width: 100%;
+    height: 50px;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+  }
+</style>

src/views/PersonalCenter/work.vue

@@ -0,0 +1,920 @@
+<template>
+  <div class="w100">
+    <el-row class="flex mt12"
+            :gutter="12">
+      <el-col :span="12">
+        <el-card>
+          <div slot="header"
+               class="header">
+            <h4>科研仪器</h4>
+          </div>
+          <ul class="cage-list">
+            <li v-for="v in instrList"
+                :key="v.id">
+              <header>
+                <p>{{ v.instName }}</p>
+                <el-tag v-if="v.instStatus == '10'"
+                        type="primary"
+                        size="mini">
+                  正常
+                </el-tag>
+                <el-tag v-else-if="v.instStatus == '20'"
+                        type="warning"
+                        size="mini">
+                  故障
+                </el-tag>
+                <el-tag v-else-if="v.instStatus == '30'"
+                        type="danger"
+                        size="mini">
+                  报废
+                </el-tag>
+              </header>
+              <p>型号：{{ v.instNameEn }}</p>
+              <p>仪器负责人：{{ v.instHeadName }}</p>
+            </li>
+          </ul>
+        </el-card>
+      </el-col>
+      <el-col :span="12">
+        <el-card header="通知公告">
+          <div slot="header"
+               class="header">
+            <h4>通知公告</h4>
+          </div>
+          <div class="link-list">
+            <ul>
+              <li v-for="item in noticeList"
+                  :key="item.id">
+                <div>
+                  {{ item.noticeTitle }}
+                </div>
+                <span>{{ item.noticeTime.split(" ")[0] }}</span>
+              </li>
+            </ul>
+          </div>
+        </el-card>
+      </el-col>
+    </el-row>
+    <el-row class="flex mt12"
+            :gutter="12">
+      <el-col :span="12">
+        <el-card>
+          <div slot="header"
+               class="header">
+            <h4>科研平台</h4>
+          </div>
+          <ul class="platform-list">
+            <li>
+              <div class="text">
+                <header>
+                  <p>分子生物平台</p>
+                  <span>单价：¥100/小时</span>
+                </header>
+                <p>位置：7栋6层-分子生物平台中心-12号终端</p>
+                <p>有效时间：1月1日 12：00 -- 1月15日 12:00</p>
+              </div>
+              <div class="btn">
+                <header>
+                  <p>剩余时长</p>
+                  <p class="remain-time">2天18小时</p>
+                </header>
+                小计：¥300
+              </div>
+            </li>
+            <li>
+              <div class="text">
+                <header>
+                  <p>分子生物平台</p>
+                  <span>单价：¥100/小时</span>
+                </header>
+                <p>位置：7栋6层-分子生物平台中心-12号终端</p>
+                <p>有效时间：1月1日 12：00 -- 1月15日 12:00</p>
+              </div>
+              <div class="btn">
+                <header>
+                  <p>剩余时长</p>
+                  <p class="remain-time">2天18小时</p>
+                </header>
+                小计：¥300
+              </div>
+            </li>
+          </ul>
+        </el-card>
+        <el-card class="mt12">
+          <div slot="header"
+               class="header">
+            <h4>笼位管理(共3个)</h4>
+          </div>
+          <ul class="cage-list">
+            <li>
+              <header>
+                <p>实验用小鼠-3只</p>
+                <el-tag type="primary"
+                        size="mini">正常</el-tag>
+              </header>
+              <p>位置：7栋6层-602室 4区12号架 8号笼</p>
+              <p>到期时间：2月1日（剩余10天）</p>
+            </li>
+            <li>
+              <header>
+                <p>实验用小鼠-3只-笼位申请</p>
+                <el-tag type="warning"
+                        size="mini">待分配</el-tag>
+              </header>
+              <p>位置：待分配</p>
+              <p>申请时间：2月1日</p>
+            </li>
+            <li>
+              <header>
+                <p>实验用小鼠-3只</p>
+                <el-tag type="primary"
+                        size="mini">正常</el-tag>
+              </header>
+              <p>位置：7栋6层-602室 4区12号架 8号笼</p>
+              <p>到期时间：2月1日（剩余10天）</p>
+            </li>
+          </ul>
+        </el-card>
+      </el-col>
+      <el-col :span="12">
+        <el-card class="calendar">
+          <div slot="header"
+               class="header">
+            <h4>日程安排</h4>
+          </div>
+          <FullCalendar class="fullCalendar"
+                        ref="fullCalendar"
+                        :options="calendarOptions" />
+          <ul>
+            <li>仪器：需要进行第二期临床实验使用仪器</li>
+            <li>平台：需要使用平台查找相应的案例</li>
+            <li>笼位：进行第二次动物实验</li>
+            <li>技术：约李老师进行第三次技术咨询</li>
+          </ul>
+        </el-card>
+        <el-card class="mt12 cost">
+          <div slot="header"
+               class="header">
+            <h4>费用统计</h4>
+          </div>
+          <div class="chart-container">
+            <div class="text">
+              <header>课题组：人血球免疫蛋白应用研究课题组</header>
+              <ul>
+                <li>费用账单：6条待确认</li>
+                <li>本月支出：¥567.89</li>
+                <li>累计支出：¥1234.56</li>
+              </ul>
+            </div>
+            <div id="chart"></div>
+          </div>
+        </el-card>
+      </el-col>
+    </el-row>
+    <el-row class="flex mt12 technical"
+            :gutter="12">
+      <el-col :span="24">
+        <el-card>
+          <div slot="header"
+               class="header">
+            <h4>技术服务</h4>
+          </div>
+          <p>技术服务 - No.123456 - 李老师</p>
+          <ul>
+            <li>11-20：委托发起</li>
+            <li>11-21：项目确定</li>
+            <li>11-23：项目开始</li>
+            <li>11-23：阶段性结果</li>
+            <li>当前：结尾验收</li>
+            <li>费用结算</li>
+            <li>结果上传</li>
+          </ul>
+          <p>技术服务 - No.123456 - 李老师</p>
+          <ul>
+            <li>11-20：委托发起</li>
+            <li>11-21：项目确定</li>
+            <li>11-23：项目开始</li>
+            <li>11-23：阶段性结果</li>
+            <li>当前：结尾验收</li>
+            <li>费用结算</li>
+            <li>结果上传</li>
+          </ul>
+        </el-card>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import Banner from "../../components/Banner";
+import LeftTabs from "@/components/LeftTabs";
+import RightContent from "@/components/RightContent";
+import * as echarts from "echarts";
+import FullCalendar from "@fullcalendar/vue";
+import dayGridPlugin from "@fullcalendar/daygrid";
+import interactionPlugin from "@fullcalendar/interaction";
+import { getNoticeList } from "@/api/login";
+import {
+  getInstrList,
+  getInstrListByUser,
+  userCancelAppoint,
+} from "@/api/instr";
+import { mapGetters } from "vuex";
+import moment from "moment";
+import to from "await-to-js";
+import { getToken } from "@/utils/auth";
+import PersonalInfoDialog from "@/components/PersonalInfo";
+export default {
+  name: "PersonalCenter",
+  components: {
+    Banner,
+    LeftTabs,
+    RightContent,
+    FullCalendar,
+    PersonalInfoDialog,
+  },
+  data() {
+    return {
+      active: -1,
+      loading: true,
+      selectTab: {},
+      searchForm: {
+        pageNum: 1,
+        pageSize: 10,
+      },
+      total: 0,
+      options: [
+        {
+          label: "工作台",
+        },
+        {
+          label: "预约信息",
+        },
+      ],
+      routeList: [
+        {
+          name: "首页",
+          path: "/",
+        },
+        {
+          name: "个人中心",
+        },
+      ],
+      breadList: [],
+      calendarOptions: {
+        height: 300,
+        plugins: [dayGridPlugin, interactionPlugin], // 需要用哪个插件引入后放到这个数组里
+        initialDate: new Date(), // 日历第一次加载时显示的初始日期。可以解析为Date的任何职包括ISO8601日期字符串，例如"2014-02-01"。
+        initialView: "dayGridMonth", // 日历加载时的初始视图，默认值为'dayGridMonth'，可以为任何可用视图的值，如例如'dayGridWeek'，'timeGridDay'，'listWeek'
+        locale: "zh-cn", // 设置日历的语言，中文为 “zh-cn”
+        firstDay: "1", // 设置每周的第一天，默认值取决于当前语言环境，该值为代表星期几的数字，且值必须为整数，星期日=0
+        weekNumberCalculation: "ISO", // 指定"ISO"结果为ISO8601周数。指定"ISO"将firstDay的默认值更改为1（Monday）
+        buttonText: {
+          // 文本将显示在headerToolbar / footerToolbar的按钮上。不支持HTML注入。所有特殊字符将被转义。
+          today: "今天",
+          month: "月",
+          week: "周",
+          day: "天",
+        },
+        headerToolbar: {
+          // 在日历顶部定义按钮和标题。将headerToolbar选项设置为false不会显示任何标题工具栏。可以为对象提供属性start/center/end或left/center/right。这些属性包含带有逗号/空格分隔值的字符串。用逗号分隔的值将相邻显示。用空格分隔的值之间会显示一个很小的间隙。
+          right: "today prev,next",
+          center: "title",
+          left: "dayGridMonth,dayGridWeek,dayGridDay",
+        },
+        eventTimeFormat: {
+          // 在每个事件上显示的时间的格式
+          hour: "numeric",
+          minute: "2-digit",
+          hour12: false,
+        },
+        events: [],
+        dateClick: this.handleDateClick, // 当用户单击日期或时间时,触发该回调，触发此回调，您必须加载interaction插件
+      },
+      instrList: [],
+      noticeList: [],
+      curSelectedDate: "w",
+      curTime: "",
+      appointData: [],
+      WEEKS: [
+        "星期日",
+        "星期一",
+        "星期二",
+        "星期三",
+        "星期四",
+        "星期五",
+        "星期六",
+      ],
+    };
+  },
+  computed: {
+    ...mapGetters(["userInfo"]),
+  },
+  mounted() {
+    this.curTime = this.getToday();
+    this.initChart();
+    this.getNotice();
+    this.getInstr();
+  },
+  beforeDestroy() {
+    this.chart && this.chart.dispose()
+  },
+  methods: {
+    moment,
+    // 獲取當前日期
+    getToday() {
+      return moment(moment().startOf("day").valueOf()).format("YYYY-MM-DD");
+    },
+    getYesterday() {
+      this.curTime = moment(
+        moment(this.curTime).add(-1, "days").startOf("day").valueOf()
+      ).format("YYYY-MM-DD");
+    },
+    getTomorrow() {
+      this.curTime = moment(
+        moment(this.curTime).add(+1, "days").startOf("day").valueOf()
+      ).format("YYYY-MM-DD");
+    },
+    getPrevWeekDays() {
+      this.curTime = moment(this.curTime)
+        .subtract(1, "week")
+        .format("YYYY-MM-DD");
+    },
+    getNextWeekDays() {
+      this.curTime = moment(this.curTime).add(1, "week").format("YYYY-MM-DD");
+    },
+    getPrevMonthDays() {
+      this.curTime = moment(this.curTime)
+        .subtract(1, "months")
+        .format("YYYY-MM-DD");
+    },
+    getNextMonthDays() {
+      this.curTime = moment(this.curTime).add(1, "months").format("YYYY-MM-DD");
+    },
+    getWeekDate() {
+      // 获取当前周的周一0点
+      var startOfWeek = moment(this.curTime)
+        .startOf("isoWeek")
+        .format("YYYY-MM-DD HH:mm:ss");
+
+      // 获取下一周的周一0点
+      var startOfNextWeek = moment(this.curTime)
+        .startOf("isoWeek")
+        .add(1, "weeks")
+        .format("YYYY-MM-DD HH:mm:ss");
+      return [startOfWeek, startOfNextWeek];
+    },
+    getMonthDate() {
+      const date = moment(this.curTime);
+      // 获取当前月份的最后一天
+      return [
+        date.startOf("month").format("YYYY-MM-DD HH:mm:ss"),
+        date.endOf("month").add(1, "days").format("YYYY-MM-DD") + " 00:00:00",
+      ];
+    },
+    // 上一周、天、月
+    handlePrev() {
+      if (this.curSelectedDate == "d") {
+        this.getYesterday();
+      } else if (this.curSelectedDate == "w") {
+        this.getPrevWeekDays();
+      } else if (this.curSelectedDate == "m") {
+        this.getPrevMonthDays();
+      }
+      this.getAppointList();
+    },
+    // 下一周、天、月
+    handleNext() {
+      if (this.curSelectedDate == "d") {
+        this.getTomorrow();
+      } else if (this.curSelectedDate == "w") {
+        this.getNextWeekDays();
+      } else if (this.curSelectedDate == "m") {
+        this.getNextMonthDays();
+      }
+      this.getAppointList();
+    },
+    selectDate(date) {
+      this.curSelectedDate = date;
+      this.getAppointList();
+    },
+    async getAppointList() {
+      let startTimeStart = "";
+      let startTimeEnd = "";
+      if (this.curSelectedDate == "d") {
+        startTimeStart = moment(this.curTime).format("YYYY-MM-DD HH:mm:ss");
+        startTimeEnd = moment(this.curTime)
+          .add(1, "days")
+          .format("YYYY-MM-DD HH:mm:ss");
+      } else if (this.curSelectedDate == "w") {
+        startTimeStart = this.getWeekDate()[0];
+        startTimeEnd = this.getWeekDate()[1];
+      } else if (this.curSelectedDate == "m") {
+        startTimeStart = moment(this.curTime)
+          .startOf("month")
+          .format("YYYY-MM-DD HH:mm:ss");
+        startTimeEnd = this.getMonthDate()[1];
+      }
+      console.log(startTimeStart);
+      const [err, res] = await to(
+        getInstrListByUser({
+          startTimeStart,
+          startTimeEnd,
+          ...this.searchForm,
+        })
+      );
+      if (err) return;
+      this.appointData = res.data.list;
+      this.total = res.data.total;
+    },
+    setStatus(key) {
+      let str = "";
+      switch (key) {
+        case "10":
+          str = "待审核";
+          break;
+        case "11":
+          str = "已退回";
+          break;
+        case "20":
+          str = "已通过";
+          break;
+        case "30":
+          str = "已驳回";
+          break;
+        case "40":
+          str = "已取消";
+          break;
+        case "50":
+          str = "已上机";
+          break;
+        case "60":
+          str = "已完成";
+          break;
+        case "70":
+          str = "审核超时";
+          break;
+        case "80":
+          str = "超时取消";
+          break;
+        case "90":
+          str = "超时未上机";
+          break;
+      }
+      return str;
+    },
+    getBreachTypes(row) {
+      let breachTypes = [];
+      if (row.isLate) breachTypes.push("迟到");
+      if (row.isOvertime) breachTypes.push("超时");
+      if (row.isLeaveEarly) breachTypes.push("早退");
+      if (row.isAbsence) breachTypes.push("爽约");
+      return breachTypes.join("、") || "-";
+    },
+    // 取消预约
+    cancelAppoint(row) {
+      // 删除附件
+      this.$confirm("确认取消预约?", "提示", {
+        confirmButtonText: "确认",
+        cancelButtonText: "取消",
+        type: "warning",
+      })
+        .then(async () => {
+          const post = userCancelAppoint({ id: Number(row.id) });
+          const [err] = await to(post);
+          if (err) return;
+          this.$message.success("取消成功");
+          this.getAppointList();
+        })
+        .catch(() => {});
+    },
+    // 编辑预约
+    handleEditAppoint(row) {
+      const token = getToken();
+      if (!token) {
+        return this.$router.push("/login");
+      }
+      this.$refs.appointCreateRef.openDialog(row);
+    },
+    // 选择tab
+    tabSelect(row, index) {
+      this.active = index;
+      this.selectTab = { ...row };
+      this.breadList = [...this.routeList, { name: this.selectTab.label }];
+      if (index == 1) {
+        this.getAppointList();
+      }
+    },
+    async getNotice() {
+      const [err, res] = await to(getNoticeList());
+      if (err) return;
+      this.noticeList = res.data.list || [];
+    },
+    async getInstr() {
+      const [err, res] = await to(getInstrList({ pageSize: 4, pageNum: 1 }));
+      if (err) return;
+      this.instrList = res.data.list || [];
+    },
+    initChart() {
+      let chart = echarts.init(document.getElementById("chart"));
+      const options = {
+        series: [
+          {
+            type: "gauge",
+            startAngle: 180,
+            endAngle: 0,
+            center: ["50%", "75%"],
+            radius: "90%",
+            min: 0,
+            max: 1,
+            splitNumber: 8,
+            axisLine: {
+              lineStyle: {
+                width: 6,
+                color: [
+                  [0.25, "#FF6E76"],
+                  [0.5, "#FDDD60"],
+                  [0.75, "#58D9F9"],
+                  [1, "#7CFFB2"],
+                ],
+              },
+            },
+            pointer: {
+              icon: "path://M12.8,0.7l12,40.1H0.7L12.8,0.7z",
+              length: "12%",
+              width: 20,
+              offsetCenter: [0, "-60%"],
+              itemStyle: {
+                color: "auto",
+              },
+            },
+            axisTick: {
+              length: 12,
+              lineStyle: {
+                color: "auto",
+                width: 2,
+              },
+            },
+            splitLine: {
+              length: 20,
+              lineStyle: {
+                color: "auto",
+                width: 5,
+              },
+            },
+            axisLabel: {
+              color: "#464646",
+              fontSize: 14,
+              distance: -40,
+              rotate: "tangential",
+              formatter: function (value) {
+                if (value === 0.875) {
+                  return "充足";
+                } else if (value === 0.625) {
+                  return "可控";
+                } else if (value === 0.375) {
+                  return "紧张";
+                } else if (value === 0.125) {
+                  return "危险";
+                }
+                return "";
+              },
+            },
+            title: {
+              offsetCenter: [0, "-10%"],
+              fontSize: 14,
+            },
+            detail: {
+              fontSize: 20,
+              offsetCenter: [0, "-35%"],
+              valueAnimation: true,
+              formatter: function (value) {
+                return Math.round(value * 100) + "";
+              },
+              color: "inherit",
+            },
+            data: [
+              {
+                value: 0.7,
+                name: "危险预算余额",
+              },
+            ],
+          },
+        ],
+      };
+      chart.setOption(options);
+    },
+    handleDateClick(dateClickInfo) {
+      console.log(dateClickInfo);
+    },
+    handleSizeChange(val) {
+      this.searchForm.pageSize = val;
+      this.getAppointList();
+    },
+    handleCurrentChange(val) {
+      this.searchForm.pageNum = val;
+      this.getAppointList();
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.center-banner {
+  background: url(../../assets/img/center-banner.png) top no-repeat;
+  background-size: 100% 240px;
+  height: 240px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  .content {
+    height: 180px;
+    width: 1200px;
+    border-radius: 16px;
+    background-color: rgba($color: #fff, $alpha: 0.5);
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 40px;
+    .user {
+      display: flex;
+      align-items: center;
+      img {
+        height: 100px;
+        width: 100px;
+        border-radius: 50%;
+      }
+      p {
+        height: 100px;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-around;
+        margin-left: 12px;
+        span:nth-child(1) {
+          font-weight: bold;
+          font-size: 18px;
+        }
+        span:nth-child(3) {
+          font-weight: bold;
+        }
+      }
+    }
+    .btns {
+      display: flex;
+      align-items: center;
+      > p {
+        display: flex;
+        align-items: center;
+        margin-right: 20px;
+        line-height: 30px;
+        font-weight: bold;
+        span {
+          font-size: 30px;
+          font-weight: bold;
+          color: #1d66dc;
+          font-style: italic;
+        }
+      }
+    }
+  }
+}
+.flex {
+  width: 100%;
+  flex-wrap: wrap;
+  .el-card {
+    flex: 0 0 calc(50% - 14px);
+    height: 400px;
+    ::v-deep .el-card__body {
+      padding: 10px;
+      height: calc(100% - 79px);
+    }
+    &.calendar {
+      height: 500px;
+      ul {
+        display: flex;
+        flex-direction: column;
+        justify-content: space-around;
+        height: 130px;
+        li {
+          font-size: 14px;
+          display: flex;
+          align-items: center;
+          &:before {
+            content: "";
+            display: inline-block;
+            width: 6px;
+            height: 6px;
+            border-radius: 3px;
+            background-color: #a30014;
+            margin-right: 4px;
+          }
+        }
+      }
+    }
+    &.cost {
+      height: 300px;
+    }
+  }
+  &.technical .el-card {
+    height: auto;
+    ::v-deep .el-card__body {
+      height: auto;
+    }
+  }
+}
+.cage-list {
+  display: flex;
+  flex-wrap: wrap;
+  list-style: none;
+  li {
+    height: 160px;
+    width: 221px;
+    font-size: 14px;
+    border: 1px solid #ebeef5;
+    border-radius: 6px;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+    padding: 10px;
+    &:nth-child(2n) {
+      margin-left: 4px;
+    }
+    &:nth-child(n + 3) {
+      margin-top: 4px;
+    }
+    header {
+      display: flex;
+      justify-content: space-between;
+      p {
+        color: #1d66dc;
+      }
+    }
+  }
+}
+.platform-list {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  li {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    margin: 12px;
+    border-radius: 8px;
+    overflow: hidden;
+    border: 1px solid #ebeef5;
+    .text {
+      flex: 1;
+      height: 100%;
+      padding: 12px;
+    }
+    .btn {
+      width: 120px;
+      height: 100%;
+      color: #fff;
+      font-size: 20px;
+      background-color: #73b9b9;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: space-around;
+      header {
+        font-size: 14px;
+      }
+      .remain-time {
+        color: #f56c6c;
+      }
+    }
+  }
+}
+.chart-container {
+  display: flex;
+  .text {
+    flex: 1;
+    font-size: 14px;
+    display: flex;
+    flex-direction: column;
+    header {
+      color: #1d66dc;
+    }
+    ul {
+      margin-top: 12px;
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-around;
+    }
+    li {
+      background-color: #e4b5bb;
+      border-radius: 4px;
+      padding: 4px 8px;
+    }
+  }
+  #chart {
+    width: 233px;
+    height: 220px;
+  }
+}
+.technical {
+  p {
+    font-size: 16px;
+    height: 24px;
+    line-height: 24px;
+  }
+  ul {
+    display: flex;
+    height: 50px;
+    line-height: 50px;
+    border-radius: 4px;
+    overflow: hidden;
+    margin: 20px 0;
+    li {
+      flex: 1;
+      text-align: center;
+      background-color: #d9fba5;
+      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+      &:nth-child(2) {
+        background-color: #98ca49;
+      }
+      &:nth-child(3) {
+        background-color: #a4dffa;
+      }
+      &:nth-child(4) {
+        background-color: #48bff4;
+      }
+      &:nth-child(5) {
+        background-color: #b6b6f1;
+      }
+      &:nth-child(6) {
+        background-color: #ebcda7;
+      }
+      &:nth-child(7) {
+        background-color: #f2a4ad;
+      }
+    }
+  }
+}
+.toolbar-wrap {
+  height: 30px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  // margin-bottom: 20px;
+  .switch-date {
+    width: 108px;
+    height: 28px;
+    border-radius: 2px;
+    border: 1px solid #b5c1d8;
+    display: flex;
+    padding: 4px 6px 0;
+    .btn {
+      cursor: pointer;
+      flex: 1;
+      font-size: 13px;
+      color: #585858;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      &.actived {
+        background: #eef3fe;
+        font-weight: bold;
+        color: #2c78ff;
+      }
+    }
+  }
+  .date-wrap {
+    display: flex;
+    align-items: center;
+    :deep(.el-button--small.is-circle) {
+      width: 26px;
+      height: 26px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+    .date {
+      margin: 0 10px;
+      font-size: 14px;
+      color: #585858;
+      display: flex;
+      align-items: center;
+    }
+    .week {
+      color: #2c78ff;
+      padding-left: 6px;
+    }
+  }
+}
+.table-wrap {
+  flex: 1;
+  margin: 20px 0 0;
+  // overflow: hidden;
+}
+.pagination {
+  width: 100%;
+  height: 50px;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+}
+</style>

src/views/Product.vue

@@ -1,19 +1,34 @@
+<!--
+ * @Author: wanglj wanglijie@dashoo.cn
+ * @Date: 2025-01-09 14:34:23
+ * @LastEditors: wanglj
+ * @LastEditTime: 2025-01-13 15:17:46
+ * @Description: file content
+ * @FilePath: \labsop_website\src\views\Product.vue
+-->
 <template>
   <div class="product">
+    <Banner :img="require('@/assets/img/education-banner.png')" />
+    <div class="product-container"></div>
   </div>
 </template>
 
 <script>
+import Banner from "../components/Banner";
 export default {
   data() {
     return {
     };
   },
   components: {
+    Banner
   },
   created() {}
 };
 </script>
 
 <style lang="scss" scoped>
+.product-container {
+  min-height: 500px;
+}
 </style>

src/views/Register.vue

@@ -365,7 +365,7 @@ a {
   display: flex;
   align-items: center;
   justify-content: center;
-  background: url("../assets/img/login-bg.png") center no-repeat;
+  background: url("../assets/img/login.png") center no-repeat;
   background-size: 100% 100%;
 }