feat:展示项目地址和项目成员 100%；添加图表填补空白 50%

package.json

@@ -13,7 +13,7 @@
   "dependencies": {
     "axios": "^0.21.1",
     "core-js": "^3.6.5",
-    "echarts": "^5.0.2",
+    "echarts": "^5.1.1",
     "element-plus": "^1.0.2-beta.31",
     "jsonwebtoken": "^8.5.1",
     "vue": "^3.0.0",

src/views/Project/Schedule.vue

@@ -1,4 +1,33 @@
 <template>
+  <el-row  style="display: flex;flex-direction: row;align-items: center;margin-bottom: 10px;color: #333333">
+    <h4>项目概览</h4>
+  </el-row>
+  <el-card shadow="never" class='description-card'>
+    <el-row>
+      <el-col :span="12">
+        <div class="description-card-text" style="font-size: 18px;font-weight: bold">{{selectedProject.name}}</div>
+        <div class="description-card-text">项目地址:
+          <span><a target="_blank" :href="selectedProject.gitRemoteUrl">{{selectedProject.gitRemoteUrl}}</a></span>
+        </div>
+        <div class="description-card-text">项目介绍:
+          <span>{{selectedProject.description}}</span>
+        </div>
+        <div class="description-card-text">项目成员:
+          <span>
+            <el-tag v-for="item in projectMembers" :key="item.id" style="margin: 0 5px;">
+              {{item.username}}
+            </el-tag>
+          </span>
+        </div>
+      </el-col>
+      <el-col :span="6">
+        <div style="height: 140px;width: 140px" id="requirement_pie"></div>
+      </el-col>
+      <el-col :span="6">
+        <div style="height: 140px;width: 140px" id="bug_pie"></div>
+      </el-col>
+    </el-row>
+  </el-card>
   <el-row  style="display: flex;flex-direction: row;align-items: center;margin-bottom: 10px;color: #333333">
     <h4>项目规划</h4>
     <el-tooltip class="item" effect="dark" :content="scheduleGuide" placement="right-end">
@@ -16,14 +45,21 @@
 
 <script>
 import Tree from '@/components/Tree.vue';
-
+import * as echarts from 'echarts';
 import { RequirementAPI } from '@/api';
 import RequirementDrawer from '@/components/RequirementDrawer.vue';
+import { useProjectList } from '../../composable/useProject';
 
 const scheduleGuide = '项目规划用于asdsadsadda';
 export default {
   name: 'Schedule',
   components: { RequirementDrawer, Tree },
+  setup() {
+    const { selectedProject } = useProjectList();
+    return {
+      selectedProject,
+    };
+  },
   data() {
     return {
       scheduleGuide,
@@ -33,10 +69,13 @@ export default {
       addRequirementDrawer: false,
       parentOfAddingRequirement: null,
       requirementInDrawer: {},
+      projectMembers: [],
     };
   },
   async mounted() {
+    this.projectMembers = this.$store.state.workspace.currentProjectMembers;
     await this.getTreeData();
+    this.drawChart();
   },
   methods: {
     async getTreeData() {
@@ -85,10 +124,84 @@ export default {
     handleDrawerContentChange(id) {
       this.requirementInDrawer = Array.prototype.find.call(this.requirements, (requirement) => requirement.id === id);
     },
+    drawChart() {
+      const requirementPie = echarts.init(document.getElementById('requirement_pie'));
+      requirementPie.setOption({
+        tooltip: {
+          trigger: 'item',
+        },
+        series: [
+          {
+            name: '任务情况',
+            type: 'pie',
+            radius: ['40%', '70%'],
+            avoidLabelOverlap: false,
+            label: {
+              show: false,
+              position: 'center',
+            },
+            emphasis: {
+              label: {
+                show: true,
+                fontSize: '10',
+                fontWeight: 'bold',
+              },
+            },
+            labelLine: {
+              show: false,
+            },
+            data: [
+              { value: 1048, name: '已完成' },
+              { value: 735, name: '进行中' },
+              { value: 580, name: '已结束' },
+            ],
+          },
+        ],
+      });
+      const bugPie = echarts.init(document.getElementById('bug_pie'));
+      bugPie.setOption({
+        tooltip: {
+          trigger: 'item',
+        },
+        series: [
+          {
+            name: '任务情况',
+            type: 'pie',
+            radius: ['40%', '70%'],
+            avoidLabelOverlap: false,
+            label: {
+              show: false,
+              position: 'center',
+            },
+            emphasis: {
+              label: {
+                show: true,
+                fontSize: '10',
+                fontWeight: 'bold',
+              },
+            },
+            labelLine: {
+              show: false,
+            },
+            data: [
+              { value: 1048, name: '已完成' },
+              { value: 735, name: '进行中' },
+              { value: 580, name: '已结束' },
+            ],
+          },
+        ],
+      });
+    },
   },
 };
 </script>
 
 <style>
+.description-card{
+  margin: 10px 0;
+}
+.description-card-text{
+  margin: 5px 0;
+}
 
 </style>