调整布局

src/App.vue

@@ -6,34 +6,66 @@ import router from "@/router";
 
 export default {
   name: 'App',
-  components: {
+  components: {},
-  },
   mounted() {
   },
 }
 </script>
-<style>
+<style lang="scss">
 #app {
-  height:100%;
-  max-height: 100%;
-  width: 100%;
-  max-width: 100%;
-}
-html{
-  height:100%;
-  max-height: 100%;
-  width: 100%;
-  max-width: 100%;
-}
-body{
   height: 100%;
   max-height: 100%;
   width: 100%;
   max-width: 100%;
-  margin:0;
-  padding:0;
 }
+
+html {
+  height: 100%;
+  max-height: 100%;
+  width: 100%;
+  max-width: 100%;
+}
+
+body {
+  height: 100%;
+  max-height: 100%;
+  width: 100%;
+  max-width: 100%;
+  margin: 0;
+  padding: 0;
+}
+
 p.p-title {
-  font-family: 'Segoe UI',sans-serif;font-size: 20px;font-weight: bold;color: #606266
+  font-family: 'Segoe UI', sans-serif;
+  font-size: 20px;
+  font-weight: bold;
+  color: #606266
+}
+
+.el-menu {
+  background-color: transparent;
+
+  .el-menu-item {
+    height: 40px;
+    margin: 8px 16px 0 16px;
+    border-radius: 10px;
+    line-height: 40px;
+
+    i {
+    }
+  }
+
+  .el-menu-item:hover,
+  .el-menu-item:focus {
+    background-color: transparent;
+    color: var(--el-color-primary);
+  }
+
+  .el-menu-item.is-active {
+    background-color: rgba(var(--el-color-primary-rgb), .1);
+    color: var(--el-color-primary);
+    font-weight: bold;
+  }
+
 }
 </style>

src/components/echartsPie.vue

@@ -1,6 +1,6 @@
 <template>
   <div id="echartsPie" ref="echartsPie">
-    <div :id="id" class="echarts_box" style="width: 450px;height: 100%;"></div>
+    <div :id="id" class="echarts_box" style="width: 100%;height: 100%;"></div>
 <!--    <div class="list_box">-->
 <!--      <p>总人数：{{ getTotalNumber }}</p>-->
 <!--      <p v-for="(item,index) in dataList" :key="index">{{ item.name }}：{{ item.value }}人</p>-->

src/views/Home.vue

@@ -4,10 +4,10 @@
               style="display: flex;flex-direction: column;align-items: stretch;overflow: unset">
       <el-menu
           router
-          style="height: 100%"
+          style="height: 100%;display: flex;flex-direction: column;align-items: stretch;"
           :default-active="menuDefaultActive">
         <div
-            style="width: 100%;height: 60px;margin: 30px 0 20px 20px; display: flex; flex-direction: row; align-items: center">
+            style="width: 100%;height: 60px;margin: 30px 0 30px 20px; display: flex; flex-direction: row; align-items: center">
           <svg-icon style="width: 52px;height: 52px;margin: 10px" icon-class="logo"></svg-icon>
           <p style="font-family: 'Segoe UI',sans-serif;font-size: 20px;font-weight: bold;color: #606266">项目<br/>管理系统</p>
         </div>
@@ -17,7 +17,10 @@
         <el-menu-item index="2" route="/project/closed">
           <span>已结项项目</span>
         </el-menu-item>
-
+        <el-button v-if="canCreateAccount"
+                   class="menu-button"
+                   link @click="uploadDialogVisible=true">导入账号
+        </el-button>
       </el-menu>
     </el-aside>
     <el-container style="background-color: #F2F3F5">
@@ -51,12 +54,36 @@
       </el-main>
     </el-container>
   </el-container>
-
+  <el-dialog
+      :model-value="uploadDialogVisible"
+      title="导入账号"
+      width="500px"
+      @closed="uploadDialogVisible=false"
+  >
+    <el-upload
+        class="upload-demo"
+        drag
+        :multiple="false"
+        :http-request="customUpload"
+    >
+      <el-icon class="el-icon--upload">
+        <upload-filled/>
+      </el-icon>
+      <div class="el-upload__text">
+        拖动文件至此或<em>点击上传</em>
+      </div>
+      <template #tip>
+        <div class="el-upload__tip">
+          <el-link href="https://element.eleme.io" type="primary">下载模板</el-link>
+        </div>
+      </template>
+    </el-upload>
+  </el-dialog>
 </template>
 
 <script setup>
 import LogoutButton from "../components/LogoutButton";
-
+import {UploadFilled} from '@element-plus/icons'
 </script>
 <script>
 // @ is an alias to /src
@@ -64,7 +91,7 @@ import LogoutButton from "../components/LogoutButton";
 import request from "@/utils/request";
 import router from "../router";
 import {ElMessage} from "element-plus";
-
+import md5 from 'blueimp-md5'
 
 export default {
   name: 'Home',
@@ -72,6 +99,7 @@ export default {
   data() {
     return {
       menuDefaultActive: 1,
+      uploadDialogVisible: false
     }
   },
   created() {
@@ -84,15 +112,39 @@ export default {
         break
     }
   },
+  computed: {
+    canCreateAccount() {
+      if (this.$store && this.$store.state.staff)
+        return this.$store.state.staff.staffGlobalLevel === 1
+      else
+        return false
+    },
+  },
   methods: {
+    customUpload(options) {
+      let param = new FormData()
+      param.append('fileDigest', md5(options.file))
+      param.append('uploadFile', options.file)
+      request({
+        url: '/staff/import',
+        data: param,
+        method: 'post',
+        onUploadProgress: progressEvent => {
+          progressEvent.percent = progressEvent.loaded / progressEvent.total * 100 | 0
+          options.onProgress(progressEvent)
+        }
+      }).then((res) => {
+        console.log(res.data);
+      })
+    },
     getStaffFullname() {
-      if(this.$store&&this.$store.state.staff)
+      if (this.$store && this.$store.state.staff)
         return this.$store.state.staff.staffFullname
       else
         return ' '
     },
     getStaffUsername() {
-      if(this.$store&&this.$store.state.staff)
+      if (this.$store && this.$store.state.staff)
         return this.$store.state.staff.staffUsername
       else
         return ' '
@@ -101,7 +153,7 @@ export default {
 
 }
 </script>
-<style scoped>
+<style scoped lang="scss">
 
 .home {
   height: 100%;
@@ -110,5 +162,29 @@ export default {
   max-width: 100%;
 }
 
+.menu-button {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  height: 40px !important;
+  margin: 8px 16px 0 16px;
+  border-radius: 10px;
+  line-height: 40px;
+  padding: 18px !important;
+  color: var(--el-menu-text-color);
+}
+
+.menu-button.is-link:hover {
+  color: var(--el-color-primary);
+}
+.menu-button.is-link:focus {
+  color: var(--el-menu-text-color);
+}
+
+.menu-button.is-active {
+  background-color: rgba(var(--el-color-primary-rgb), .1);
+  color: var(--el-color-primary);
+  font-weight: bold;
+}
 
 </style>

src/views/ProjectInfo.vue

@@ -155,7 +155,59 @@
       </div>
     </div>
 
+    <div style="height: 300px;margin: 0 30px 30px 30px;
+                display: flex;flex-direction: row;justify-content: space-between">
+      <div style="width: 32%; height: 100%;display: flex;flex-direction: column">
+        <p class="p-title" style="margin-left: 10px">工作项完成趋势</p>
+        <div style="flex:1;margin-top: 30px;padding: 20px;
+        display: flex;flex-direction: column; justify-content: space-between;background-color: white; border-radius: 10px; ">
+          <el-row>
+            <el-col :span="12">
+              <p class="p-subtitle">状态</p>
+              <div>
+                <div v-if="project.completed === false">
+                  <el-tag>进行中</el-tag>
+                </div>
+                <div v-if="project.completed === true">
+                  <el-tag type="info">已结项</el-tag>
+                </div>
+              </div>
+            </el-col>
+            <el-col :span="12">
+              <p class="p-subtitle">项目经理</p>
+              <p>{{ projectCreatorName }}</p>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="12">
+              <p class="p-subtitle">开始时间</p>
+              <p>{{ formatDate(project.projectCreatedTime) }}</p>
+            </el-col>
+            <el-col :span="12">
+              <p class="p-subtitle">结束时间</p>
+              <p>{{ formatDate(project.projectClosedDate) }}</p>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="24">
+              <p class="p-subtitle">进度</p>
+              <el-progress
+                  :status="(totalNum!==0&&completeNum===totalNum) ? 'success' : ''"
+                  :percentage="totalNum===0?0:Math.round(completeNum*100/totalNum)"/>
 
+            </el-col>
+          </el-row>
+        </div>
+
+      </div>
+      <div style="flex: 1;margin-left: 30px;height: 100%;display: flex;flex-direction: column">
+        <p class="p-title" style="margin-left: 10px">工作项统计</p>
+        <div style="flex:1;margin-top: 30px;padding: 20px;
+        display: flex;flex-direction: column; justify-content: space-between;background-color: white; border-radius: 10px;">
+
+        </div>
+      </div>
+    </div>
   </el-scrollbar>
   <EditProjectDialog
       :dialogFormVisible="editProjectDialogVisible" :projectClasses="projectClasses"