基本完成项目概览页

src/views/ProjectInfo.vue

@@ -36,7 +36,9 @@
           <el-row>
             <el-col :span="24">
               <p class="p-subtitle">进度</p>
-              <el-progress :percentage="totalNum===0?0:Math.round(completeNum*100/totalNum)" :color="customColor"/>
+              <el-progress
+                  :status="(totalNum!==0&&completeNum===totalNum) ? 'success' : ''"
+                  :percentage="totalNum===0?0:Math.round(completeNum*100/totalNum)" />
 
             </el-col>
           </el-row>
@@ -47,8 +49,7 @@
         <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 style="width: 100%;height: 100%;">
-          </div>
+
         </div>
       </div>
     </div>
@@ -65,11 +66,11 @@
             </el-col>
             <el-col :span="6">
               <p class="p-subtitle">项目主类</p>
-              <p>{{ project.projectClassId }}</p>
+              <p>{{ projectClassName }}</p>
             </el-col>
             <el-col :span="6">
               <p class="p-subtitle">项目子类</p>
-              <p>{{ project.projectSubclassId }}</p>
+              <p>{{ projectSubClassName }}</p>
             </el-col>
             <el-col :span="6">
               <p class="p-subtitle">重要程度</p>
@@ -138,8 +139,7 @@
         <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 style="width: 100%;height: 100%;">
-          </div>
+          <p>{{ project.projectDescription }}</p>
         </div>
       </div>
     </div>
@@ -152,23 +152,6 @@
 
 import {ref} from 'vue'
 
-const percentage = ref(20)
-const customColor = ref('#409eff')
-
-const customColorMethod = (percentage) => {
-  if (percentage < 30) {
-    return '#909399'
-  }
-  if (percentage < 70) {
-    return '#e6a23c'
-  }
-  return '#67c23a'
-}
-
-const customColors = [
-  {color: '#f56c6c', percentage: 20},
-]
-
 </script>
 <script>
 import request from "@/utils/request";
@@ -202,7 +185,10 @@ export default {
       },
 
       completeNum: 0,
-      totalNum: 0
+      totalNum: 0,
+
+      projectClasses: [],
+      projectSubClasses: []
     }
   },
   props: {
@@ -216,12 +202,33 @@ export default {
         const projectCreator = this.projectGroup.find(function (item, index, arr) {
           return item.staffId === that.project.projectCreator;
         })
-        console.log(projectCreator)
         if (projectCreator)
           return projectCreator.staffFullname
       }
       return ' '
+    },
+    projectClassName() {
+      if (this.project.projectClassId) {
+        const that = this
+        const projectClass = this.projectClasses.find(function (item, index, arr) {
+          return item.projectClassId === that.project.projectClassId;
+        })
+        if (projectClass)
+          return projectClass.projectClassName
       }
+      return ' '
+    },
+    projectSubClassName() {
+      if (this.project.projectSubclassId) {
+        const that = this
+        const projectSubClass = this.projectSubClasses.find(function (item, index, arr) {
+          return item.projectClassId === that.project.projectSubclassId;
+        })
+        if (projectSubClass)
+          return projectSubClass.projectClassName
+      }
+      return ' '
+    },
   },
   watch: {
     projectAccessLevel: function (val) {
@@ -235,7 +242,8 @@ export default {
   },
   created() {
     this.getProjectInfo();
-    this.getProjectstats();
+    this.getProjectStats();
+    this.getProjectClass()
   },
   methods: {
 
@@ -258,7 +266,7 @@ export default {
         console.log(error)
       })
     },
-    getProjectstats() {
+    getProjectStats() {
       const that = this
       request({
         url: 'project/' + this.$route.params.projectId + '/stats',
@@ -273,6 +281,27 @@ export default {
         console.log(error)
       })
     },
+    getProjectClass() {
+      const that = this;
+      request({
+        url: 'project/type',
+        method: 'get',
+      }).then(response => {
+        if (response.data.code === 200) {
+          console.log(response.data.data.records)
+          that.projectClasses = []
+          that.projectSubClasses = []
+          for (const record of response.data.data.records) {
+            if (record.classFatherId === 0)
+              that.projectClasses.push(record)
+            else
+              that.projectSubClasses.push(record)
+          }
+        }
+      }).catch(function (error) {
+        console.log(error)
+      })
+    },
   }
 }
 </script>