From 0e57fefaf3fc1fcd7596656e49fee2166231b059 Mon Sep 17 00:00:00 2001
From: wuyize <wuyize25@163.com>
Date: Fri, 8 Jul 2022 22:27:03 +0800
Subject: [PATCH] =?UTF-8?q?=E8=B0=83=E6=95=B4=E9=A1=B9=E7=9B=AE=E6=A6=82?=
 =?UTF-8?q?=E8=A7=88=E9=A1=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                   |   3 +
 src/components/echartsPie.vue |   1 -
 src/views/OngoingProject.vue  |   3 +-
 src/views/Project.vue         |   2 +-
 src/views/ProjectGroup.vue    |  10 +-
 src/views/ProjectInfo.vue     | 363 +++++++++++++++++-----------------
 src/views/ProjectWorkitem.vue |   4 +-
 7 files changed, 196 insertions(+), 190 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index d4bda4c..6c94bb1 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -33,4 +33,7 @@ body{
   margin:0;
   padding:0;
 }
+p.p-title {
+  font-family: 'Segoe UI',sans-serif;font-size: 20px;font-weight: bold;color: #606266
+}
 </style>
diff --git a/src/components/echartsPie.vue b/src/components/echartsPie.vue
index 017b8db..3f302a6 100644
--- a/src/components/echartsPie.vue
+++ b/src/components/echartsPie.vue
@@ -124,7 +124,6 @@ export default {
   width: 100%;
   height: 100%;
   display: flex;
-  background: #fff;
   .echarts_box {
     flex-shrink: 0;
   }
diff --git a/src/views/OngoingProject.vue b/src/views/OngoingProject.vue
index 9a7a788..3465522 100644
--- a/src/views/OngoingProject.vue
+++ b/src/views/OngoingProject.vue
@@ -24,7 +24,7 @@
           <template #default="scope">
             <el-progress :text-inside="true" :stroke-width="18"
                          :status="(scope.row.totalNum!==0&&scope.row.completeNum===scope.row.totalNum) ? 'success' : ''"
-                         :percentage="scope.row.totalNum===0?0:scope.row.completeNum*100/scope.row.totalNum"></el-progress>
+                         :percentage="scope.row.totalNum===0?0:Math.round(scope.row.completeNum*100/scope.row.totalNum)"></el-progress>
           </template>
         </el-table-column>
         <el-table-column min-width="10%" align="right">
@@ -56,6 +56,7 @@
 
 </template>
 <script setup>
+
 // table元素
 import {onMounted, ref} from "vue";
 
diff --git a/src/views/Project.vue b/src/views/Project.vue
index c375732..0e604fa 100644
--- a/src/views/Project.vue
+++ b/src/views/Project.vue
@@ -108,7 +108,7 @@ export default {
       method: 'get',
     }).then(response => {
       if (response.data.code === 200) {
-        that.projectStaffPosition = response.data.data.projectStaffPosition
+        that.projectStaffPosition = response.data.data.projectStaffPosition.replace(',','，')
         that.projectAccessLevel = response.data.data.projectAccessLevel
       }
     }).catch(function (error) {
diff --git a/src/views/ProjectGroup.vue b/src/views/ProjectGroup.vue
index 8a8536b..3aafc12 100644
--- a/src/views/ProjectGroup.vue
+++ b/src/views/ProjectGroup.vue
@@ -64,14 +64,14 @@
 
     </div>
     <div style="width: 50%;display: flex;flex-direction: column;height: 100%;">
-      <div style="display: flex;flex-direction: column;height: 100%">
+      <div style="margin-top: 5px;display: flex;flex-direction: column;height: 100%">
         <p style="'Segoe UI',sans-serif;font-size: 20px;font-weight: bold;color: #606266;margin: 0 0 30px 0;flex-shrink: 0;">岗位统计</p>
-        <div style="flex: 1;">
-<!--          <EchartsPie id="pie_post" ref="pie_post" :isLegend="true" :dataList="stationList"/>-->
+        <div style="flex: 1;background-color: white; border-radius: 10px;">
+          <EchartsPie id="pie_post" ref="pie_post" :isLegend="true" :dataList="stationList"/>
         </div>
         <p style="'Segoe UI',sans-serif;font-size: 20px;font-weight: bold;color: #606266;margin: 15px 0 30px 0;flex-shrink: 0;">团队工作情况统计</p>
-        <div style="flex: 1;">
-          <EchartsPie id="pie_team" :isRadius="true" />
+        <div style="flex: 1;background-color: white; border-radius: 10px;">
+<!--          <EchartsPie id="pie_team" :isRadius="true" />-->
         </div>
       </div>
     </div>
diff --git a/src/views/ProjectInfo.vue b/src/views/ProjectInfo.vue
index 9258bf2..28712a6 100644
--- a/src/views/ProjectInfo.vue
+++ b/src/views/ProjectInfo.vue
@@ -1,165 +1,159 @@
 <template>
-  <p style="font-family: 'Segoe UI',sans-serif;font-size: 20px;font-weight: bold;color: #606266">项目概况</p>
-  <div style="width: 100%;height: 47%; display: flex;flex-direction: row;margin: 10px;">
-    <div class="first-line" style="width: 28%; height: 100%;">
-      <div style="margin: 10px;display: flex; flex-direction: column;justify-content: center;width: 96%;height: 30px;">
-        <p style="font-size: 20px;">基本信息</p>
-        <div style="display: flex;flex-direction: row; height: 90%; width: 96%; height: 98%;">
-          <div class="form1" style="width: 48%;height: 33%; ">
-            <p>状态</p>
-            <div id="state">
-              <div v-if="project.completed === false">
-                <el-tag class="Tag1" style="height: 100%;width: 60%;margin:10px;">进行中</el-tag>
+  <el-scrollbar style="width: 100%;height: 100%;">
+    <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>
-              <div v-if="project.completed === true">
-                <el-tag class="Tag1" style="height: 100%;width: 60%;margin:10px;color: brown;">已结项</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 :percentage="totalNum===0?0:Math.round(completeNum*100/totalNum)" :color="customColor"/>
 
-          </div>
-          <div class="form1" style="width: 48%;height: 33%; ">
-            <p>项目经理</p>
-            <div class="demo-basic--circle">
-              <div class="block">
-                <el-avatar :size="50" :src="circleUrl" />
-                <div class="sub-title"
-                     style="display: flex;flex-direction: column;justify-content: center;margin: 5px;">姓名</div>
-              </div>
-            </div>
-          </div>
+            </el-col>
+          </el-row>
         </div>
-        <div style="display: flex;flex-direction: row;height: 33px;">
-          <div class="form1" style="width: 48%; ">
-            <p>开始时间</p>
-            <p>{{ project.projectStartDate }}</p>
-          </div>
-          <div class="form1" style="width: 48%; ">
-            <p>结束时间</p>
-            <p>{{ project.projectEndDate }}</p>
-          </div>
-        </div>
-        <div style="height: 33%;margin: 10px;">
-          <p>进度</p>
-          <div class="demo-progress">
-            <el-progress :percentage="totalNum===0?0:(completeNum/totalNum)*100" :color="customColor" />
+
+      </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 style="width: 100%;height: 100%;">
           </div>
         </div>
       </div>
     </div>
-    <div class="first-line" style="width: 68%;height: 100%;">
-      <p style="font-size: 20px;margin: 20px;">工作项统计</p>
-      <div class="box" style="width: 90%;height: 90%;">
-        <div style="width: 100%;height: 100%" id="main">
+    <div style="height: 400px;margin: 0 30px 30px 30px;
+                display: flex;flex-direction: row;justify-content: space-between">
+      <div style="width: 60%; 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="6">
+              <p class="p-subtitle">英文简称</p>
+              <p>{{ project.projectAbbreviation }}</p>
+            </el-col>
+            <el-col :span="6">
+              <p class="p-subtitle">项目主类</p>
+              <p>{{ project.projectClassId }}</p>
+            </el-col>
+            <el-col :span="6">
+              <p class="p-subtitle">项目子类</p>
+              <p>{{ project.projectSubclassId }}</p>
+            </el-col>
+            <el-col :span="6">
+              <p class="p-subtitle">重要程度</p>
+              <p>{{ project.projectImportance }}</p>
+            </el-col>
+          </el-row>
+          <el-row >
+            <el-col :span="6">
+              <p class="p-subtitle">合同额</p>
+              <p>{{  Math.round(project.contractAmount/10000)+'万' }}</p>
+            </el-col>
+            <el-col :span="6">
+              <p class="p-subtitle">预计完成度</p>
+              <p>{{ project.expectedCompletion+'%' }}</p>
+            </el-col>
+            <el-col :span="6">
+              <p class="p-subtitle">计划总人月</p>
+              <p>{{ project.projectManMonth }}</p>
+            </el-col>
+            <el-col :span="6">
+              <p class="p-subtitle">项目启动日期</p>
+              <p>{{ formatDate(project.projectStartDate) }}</p>
+            </el-col>
+
+          </el-row>
+          <el-row >
+            <el-col :span="6">
+              <p class="p-subtitle">计划上线日期</p>
+              <p>{{ formatDate(project.projectOnlineDate) }}</p>
+            </el-col>
+            <el-col :span="6">
+              <p class="p-subtitle">计划初验时间</p>
+              <p>{{ formatDate(project.projectFirstTestDate) }}</p>
+            </el-col>
+            <el-col :span="6">
+              <p class="p-subtitle">计划终验日期</p>
+              <p>{{ formatDate(project.projectFinalTestDate) }}</p>
+            </el-col>
+            <el-col :span="6">
+              <p class="p-subtitle">计划结项日期</p>
+              <p>{{ formatDate(project.projectEndDate) }}</p>
+            </el-col>
+          </el-row>
+          <el-row >
+            <el-col :span="6">
+              <p class="p-subtitle">财务编码</p>
+              <p>{{ project.financialCode }}</p>
+            </el-col>
+            <el-col :span="6">
+              <p class="p-subtitle">所属部门</p>
+              <p>{{ project.projectDepartment }}</p>
+            </el-col>
+            <el-col :span="6">
+              <p class="p-subtitle">所属区域</p>
+              <p>{{ project.projectArea }}</p>
+            </el-col>
+            <el-col :span="6">
+              <p class="p-subtitle">所属公司</p>
+              <p>{{ project.projectCompany }}</p>
+            </el-col>
+          </el-row>
         </div>
+
       </div>
-    </div>
-  </div>
-
-  <div style="display: flex;flex-direction: row;height: 48%;width: 100%;">
-    <div class="second-line" style="width: 55.5%;">
-      <div style="display: flex; flex-direction: row;">
-        <p style="font-size: 20px;margin: 2%;width: 75%;">项目属性</p>
-        <el-button type="primary" @click.native="onReviseProject" style="margin: 10px;">修改属性</el-button>
-      </div>
-
-      <div style="margin: 1%;display: flex; flex-direction: column;justify-content: center;height: 80%;">
-        <div class="form2">
-          <div class="form3">
-            <p>英文简称：</p>
-            <p>{{ project.projectAbbreviation }}</p>
-          </div>
-          <div class="form3">
-            <p>项目主类：</p>
-            <p>{{ project.projectClassId }}</p>
-          </div>
-          <div class="form3">
-            <p>项目子类：</p>
-            <p>{{ project.projectSubclassId }}</p>
-          </div>
-          <div class="form3">
-            <p>重要程度：</p>
-            <p>{{ project.projectImportance }}</p>
-          </div>
-        </div>
-
-        <div class="form2">
-          <div class="form3">
-            <p>合同额：</p>
-            <p>{{ project.contractAmount }}</p>
-          </div>
-          <div class="form3">
-            <p>预计完成度：</p>
-            <p>{{ project.expectedCompletion }}</p>
-          </div>
-          <div class="form3">
-            <p>计划总人月：</p>
-            <p>{{ project.projectManMonth }}</p>
-          </div>
-          <div class="form3">
-            <p>项目启动日期：</p>
-            <p>{{ project.projectStartDate }}</p>
-          </div>
-        </div>
-
-        <div class="form2">
-          <div class="form3">
-            <p>计划上线日期：</p>
-            <p>{{ project.projectOnlineDate }}</p>
-          </div>
-          <div class="form3">
-            <p>计划初验时间：</p>
-            <p>{{ project.projectFirstTestDate }}</p>
-          </div>
-          <div class="form3">
-            <p>计划终验日期：</p>
-            <p>{{ project.projectFinalTestDate }}</p>
-          </div>
-          <div class="form3">
-            <p>计划结项日期：</p>
-            <p>{{ project.projectEndDate }}</p>
-          </div>
-        </div>
-
-        <div class="form2">
-          <div class="form3">
-            <p>财务编码：</p>
-            <p>{{ project.financialCode }}</p>
-          </div>
-          <div class="form3">
-            <p>所属部门：</p>
-            <p>{{ project.projectDepartment }}</p>
-          </div>
-          <div class="form3">
-            <p>所属区域：</p>
-            <p>{{ project.projectArea }}</p>
-          </div>
-          <div class="form3">
-            <p>所属公司：</p>
-            <p>{{ project.projectCompany }}</p>
+      <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 style="width: 100%;height: 100%;">
           </div>
         </div>
       </div>
     </div>
 
-    <div class="second-line" style="width: 41.5%;">
-      <p style="font-size: 20px;margin: 20px;">项目描述</p>
-      <div style="margin: 30px">{{ project.projectDescription }}</div>
-    </div>
-  </div>
+
+  </el-scrollbar>
 </template>
 
 <script setup>
 
-import { reactive, toRefs } from 'vue'
-import { ref } from 'vue'
-import * as echarts from 'echarts/core';
+import {ref} from 'vue'
 
 const percentage = ref(20)
 const customColor = ref('#409eff')
-const state = reactive({
-  circleUrl:
-      'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
-})
 
 const customColorMethod = (percentage) => {
   if (percentage < 30) {
@@ -170,20 +164,19 @@ const customColorMethod = (percentage) => {
   }
   return '#67c23a'
 }
-const { circleUrl } = toRefs(state)
 
 const customColors = [
-  { color: '#f56c6c', percentage: 20 },
+  {color: '#f56c6c', percentage: 20},
 ]
 
 </script>
-<script >
+<script>
 import request from "@/utils/request";
+import moment from "moment";
+
 export default {
   name: "ProjectInfo",
-  components: {
-
-  },
+  components: {},
   data() {
     return {
       project: {
@@ -195,11 +188,11 @@ export default {
         contractAmount: '',
         expectedCompletion: '',
         projectManMonth: '',
-        projectStartDate: '',
-        projectOnlineDate: '',
-        projectFirstTestDate: '',
-        projectFinalTestDate: '',
-        projectEndDate: '',
+        projectStartDate: Number,
+        projectOnlineDate: Number,
+        projectFirstTestDate: Number,
+        projectFinalTestDate: Number,
+        projectEndDate: Number,
         financialCode: '',
         projectDepartment: '',
         projectArea: '',
@@ -207,15 +200,50 @@ export default {
         projectDescription: '',
         completed: '',
       },
+
       completeNum: 0,
       totalNum: 0
     }
   },
+  props: {
+    projectAccessLevel: Number,
+    projectGroup: Array
+  },
+  computed: {
+    projectCreatorName() {
+      if (this.projectGroup && this.project.projectCreator) {
+        const that = this
+        const projectCreator = this.projectGroup.find(function (item, index, arr) {
+          return item.staffId === that.project.projectCreator;
+        })
+        console.log(projectCreator)
+        if (projectCreator)
+          return projectCreator.staffFullname
+      }
+      return ' '
+    }
+  },
+  watch: {
+    projectAccessLevel: function (val) {
+    },
+    projectGroup: function (val) {
+
+    },
+    project: function (val) {
+
+    },
+  },
   created() {
     this.getProjectInfo();
     this.getProjectstats();
   },
   methods: {
+
+    formatDate(date) {
+      if (date)
+        return moment(date * 1000).format("yyyy年MM月DD日")
+      return '无'
+    },
     getProjectInfo() {
       const that = this
       request({
@@ -250,35 +278,10 @@ export default {
 </script>
 
 <style scoped lang="scss">
-.first-line {
-  height: 100%;
-  display: flex;
-  flex-direction: row;
-  display: flex;
-  flex-direction: column;
-  border: 10px;
-  margin: 5px;
-  background-color: white;
-}
-
-.second-line {
-  height: 100%;
-  display: flex;
-  flex-direction: row;
-  display: flex;
-  flex-direction: column;
-  border: 10px;
-  margin: 5px;
-  background-color: white;
-}
-
-.form1 {
-  display: flex;
-  flex-direction: row;
-  display: flex;
-  flex-direction: column;
-  margin: 20px;
-  background-color: white;
+p.p-subtitle {
+  font-size: 14px;
+  margin-bottom: 10px;
+  color: #606266
 }
 
 .form2 {
diff --git a/src/views/ProjectWorkitem.vue b/src/views/ProjectWorkitem.vue
index 6ca9aac..25ab425 100644
--- a/src/views/ProjectWorkitem.vue
+++ b/src/views/ProjectWorkitem.vue
@@ -349,7 +349,7 @@ export default {
   name: "ProjectWorkitem",
   props: {
     projectAccessLevel: Number,
-    projectGroup: []
+    projectGroup: Array
   },
   data() {
     return {
@@ -732,7 +732,7 @@ export default {
           let records = response.data.data.records
 
 
-          const editable = row.editable || row.taskHolderId === this.$store.state.staff.staffId
+          const editable = row.editable || row.taskHolderId === that.$store.state.staff.staffId
           for (let workitem of records) {
             workitem['editable'] = editable
             //console.log(workitem)