From e79a2134c4654b81deb8cf5043a6efd9b07d6023 Mon Sep 17 00:00:00 2001
From: wuyize <wuyize25@163.com>
Date: Fri, 8 Jul 2022 14:24:14 +0800
Subject: [PATCH] =?UTF-8?q?=E5=88=9D=E6=AD=A5=E5=AE=8C=E6=88=90=E9=A1=B9?=
 =?UTF-8?q?=E7=9B=AE=E6=A6=82=E8=A7=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/ProjectInfo.vue     | 321 +++++++++++++++++++++++++++++++++-
 src/views/ProjectWorkitem.vue |   2 +-
 2 files changed, 318 insertions(+), 5 deletions(-)

diff --git a/src/views/ProjectInfo.vue b/src/views/ProjectInfo.vue
index 86f744a..9258bf2 100644
--- a/src/views/ProjectInfo.vue
+++ b/src/views/ProjectInfo.vue
@@ -1,13 +1,326 @@
 <template>
-<div>项目概览</div>
+  <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>
+              </div>
+              <div v-if="project.completed === true">
+                <el-tag class="Tag1" style="height: 100%;width: 60%;margin:10px;color: brown;">已结项</el-tag>
+              </div>
+            </div>
+
+          </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>
+        </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>
+      </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>
+      </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>
+        </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>
 </template>
 
-<script>
+<script setup>
+
+import { reactive, toRefs } from 'vue'
+import { ref } from 'vue'
+import * as echarts from 'echarts/core';
+
+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) {
+    return '#909399'
+  }
+  if (percentage < 70) {
+    return '#e6a23c'
+  }
+  return '#67c23a'
+}
+const { circleUrl } = toRefs(state)
+
+const customColors = [
+  { color: '#f56c6c', percentage: 20 },
+]
+
+</script>
+<script >
+import request from "@/utils/request";
 export default {
-  name: "ProjectInfo"
+  name: "ProjectInfo",
+  components: {
+
+  },
+  data() {
+    return {
+      project: {
+        projectName: '',
+        projectAbbreviation: '',
+        projectClassId: '',
+        projectSubclassId: '',
+        projectImportance: '',
+        contractAmount: '',
+        expectedCompletion: '',
+        projectManMonth: '',
+        projectStartDate: '',
+        projectOnlineDate: '',
+        projectFirstTestDate: '',
+        projectFinalTestDate: '',
+        projectEndDate: '',
+        financialCode: '',
+        projectDepartment: '',
+        projectArea: '',
+        projectCompany: '',
+        projectDescription: '',
+        completed: '',
+      },
+      completeNum: 0,
+      totalNum: 0
+    }
+  },
+  created() {
+    this.getProjectInfo();
+    this.getProjectstats();
+  },
+  methods: {
+    getProjectInfo() {
+      const that = this
+      request({
+        url: 'project/' + this.$route.params.projectId,
+        method: 'get'
+
+      }).then(response => {
+        if (response.data.code === 200) {
+          that.project = response.data.data
+        }
+      }).catch(function (error) {
+        console.log(error)
+      })
+    },
+    getProjectstats() {
+      const that = this
+      request({
+        url: 'project/' + this.$route.params.projectId + '/stats',
+        method: 'get'
+
+      }).then(response => {
+        if (response.data.code === 200) {
+          that.completeNum = response.data.data.completeNum
+          that.totalNum = response.data.data.totalNum
+        }
+      }).catch(function (error) {
+        console.log(error)
+      })
+    },
+  }
 }
 </script>
 
-<style scoped>
+<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;
+}
+
+.form2 {
+  height: 25%;
+  width: 96%;
+  display: flex;
+  flex-direction: row;
+  background-color: white;
+}
+
+.form3 {
+  height: 40%;
+  width: 25%;
+  background-color: white;
+  font-size: 10px;
+  display: flex;
+  flex-direction: row;
+}
+
+.sub-title {
+  margin-bottom: 10px;
+  font-size: 14px;
+  color: var(--el-text-color-secondary);
+}
+
+.block:not(:last-child) {
+  border-right: 1px solid var(--el-border-color);
+}
+
+.block {
+  flex: 1;
+  display: flex;
+  flex-direction: row;
+}
+
+.demo-progress {
+  margin-bottom: 5px;
+  width: 96%;
+}
+
+.box {
+  background-color: darkgray;
+  margin: 0 auto;
+}
 </style>
\ No newline at end of file
diff --git a/src/views/ProjectWorkitem.vue b/src/views/ProjectWorkitem.vue
index f1c43f7..35c96a9 100644
--- a/src/views/ProjectWorkitem.vue
+++ b/src/views/ProjectWorkitem.vue
@@ -369,7 +369,7 @@ export default {
           {required: true, message: '请设置截止时间', trigger: 'blur'},
           {
             validator:  (rule, value, callback) => {
-              if (!this.form.taskStartTime){
+              if (!this.form.taskStartTime||!this.form.taskEndTime){
                 return callback();
               }
               if (this.form.taskEndTime.getTime() > this.form.taskStartTime.getTime())