From 95c824f0b0cb475d1b26c90fd99a8e40e244dd84 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=A6=96=E5=A7=90?= <2981176548@qq.com>
Date: Sat, 16 Mar 2024 12:03:41 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=8D=A2=E9=A1=B9=E7=9B=AE=E5=8D=A1?=
 =?UTF-8?q?=E7=89=87=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/js/request.js                             |   1 +
 src/views/ProjectPage/ProjectList.vue         | 113 +++++++++++++++---
 .../WorkLoadPage/I_Manage_ChildSystem.vue     |   8 +-
 src/views/WorkLoadPage/PersonalProject.vue    |  85 +++++++++++--
 4 files changed, 178 insertions(+), 29 deletions(-)

diff --git a/src/js/request.js b/src/js/request.js
index ee0215d..a43f1f4 100644
--- a/src/js/request.js
+++ b/src/js/request.js
@@ -538,6 +538,7 @@ const projectAdd =(token,data) => {
 const  projectGetCustom = (data) =>{
     const tags = data.tags
     const isFinish = data.isFinish
+    // const principalUser = data.principalId
     const encodedTags = tags.map(tag => encodeURIComponent(tag));
     const encodedIsFinish = isFinish.map(is => encodeURIComponent(is))
     const queryTags = `tags=${encodedTags.join('&tags=')}`;
diff --git a/src/views/ProjectPage/ProjectList.vue b/src/views/ProjectPage/ProjectList.vue
index f0e45fa..8c832c9 100644
--- a/src/views/ProjectPage/ProjectList.vue
+++ b/src/views/ProjectPage/ProjectList.vue
@@ -33,22 +33,98 @@
             </template>
             <template v-else>
             <div class="flex flex-wrap justify-start  mt-5 w-full">
-                <template v-for="(project, index) in projects" :key="index">
-                    <a-card class=" mr-2 transition-transform transform-gpu hover:scale-105 relative w-[24vw]  h-60 mb-4 rounded-none bg-cover bg-center bg-[url('@/assert/images/img12.jpg')]" @mouseleave="showButton[index]=false" @mouseover="showButton[index]=true">
-                        <div class="flex absolute left-0 bottom-0 min-h-[30%] w-full bg-white">
-                            <p class="ml-6 mt-4 text-lg font-bold tracking-tight text-gray-900">{{ project.name }}</p>
-                            <div class="ml-auto mr-10">
-                                <button v-if="showButton[index]" class="mt-8 w-6 h-6 flex items-center justify-center bg-green-400 text-black rounded-full transition duration-300 ease-in-out transform hover:scale-105" @click="MainMessage(project)">
-                                    <svg aria-hidden="true" class="rtl:rotate-180 w-4 h-4 text-white" fill="none" viewBox="0 0 14 10" xmlns="http://www.w3.org/2000/svg">
-                                        <path d="M1 5h12m0 0L9 1m4 4L9 9" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
-                                    </svg>
-                                </button>
+<!--                <template v-for="(project, index) in projects" :key="index">-->
+<!--                    <a-card class=" mr-2 transition-transform transform-gpu hover:scale-105 relative w-[24vw]  h-60 mb-4 rounded-none bg-cover bg-center bg-[url('@/assert/images/img12.jpg')]" @mouseleave="showButton[index]=false" @mouseover="showButton[index]=true">-->
+<!--                        <div class="flex absolute left-0 bottom-0 min-h-[30%] w-full bg-white">-->
+<!--                            <p class="ml-6 mt-4 text-lg font-bold tracking-tight text-gray-900">{{ project.name }}</p>-->
+<!--                            <div class="ml-auto mr-10">-->
+<!--                                <button v-if="showButton[index]" class="mt-8 w-6 h-6 flex items-center justify-center bg-green-400 text-black rounded-full transition duration-300 ease-in-out transform hover:scale-105" @click="MainMessage(project)">-->
+<!--                                    <svg aria-hidden="true" class="rtl:rotate-180 w-4 h-4 text-white" fill="none" viewBox="0 0 14 10" xmlns="http://www.w3.org/2000/svg">-->
+<!--                                        <path d="M1 5h12m0 0L9 1m4 4L9 9" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>-->
+<!--                                    </svg>-->
+<!--                                </button>-->
+<!--                            </div>-->
+<!--                        </div>-->
+<!--                    </a-card>-->
+<!--                </template>-->
+<!--            </template>-->
+
+
+
+
+
+
+
+
+            <template v-for="(project, index) in projects" :key="index"  >
+<!--                <div class="flex flex-row justify-start  mt-5 w-full">-->
+                <a-card hoverable  class="w-[30vw] ml-[2.5vw] mb-[4vh]"  :loading="false" @click="MainMessage(project)" >
+                    <template #title>
+                        <div style="display: flex; flex-direction: row">
+                            <div style="display: flex; flex-direction: row; width: 18vw">
+                                <div style="width: 0.5vw; height: 3vh; background-color: #BD3124; border-radius: 10px; margin-right: 0.2vw;margin-top: 0.3vh"/>
+
+                                <div style="text-shadow: 2px 2px 6px rgba(189, 49, 36, 0.4);">{{ project.name }}</div>
                             </div>
+                            <div style="margin-left: 1.8vw;
+                    font-size: 70%;
+                    font-weight: normal;
+                    text-shadow: 2px 2px 4px #B886F8;
+                    display: flex;
+                    flex-direction: row;
+                    margin-top: 0.8vh;">
+                                <div style="width: 0.5vw; height: 2.5vh; background-color: #B886F8; border-radius: 10px; margin-right: 0.2vw;"/>负责人：{{ project.principalUser }}</div>
                         </div>
-                    </a-card>
-                </template>
+                    </template>
+                    <div style="display: flex; flex-direction: column; height: 10vh; margin-top: 0">
+                        <!--      description-->
+                        <div style="display: flex; flex-direction: row; height: 8vh">
+                            <div style="width: 0.8vw; height: 2vh; background-color: rgba(233, 157, 66, 1); border-radius: 10px; margin-right: 0.2vw;"/>
+                            <div style="font-size: 60%; text-shadow: 2px 2px 6px rgba(233, 157, 66, 1); color: rgba(154, 154, 154, 1)">{{ project.description }}</div>
+                        </div>
+                        <!--      other message-->
+                        <div style="display: flex; flex-direction: row; height: 2vh">
+                            <!--        status-->
+                            <div style="display: flex; flex-direction: row; width: 5vw">
+                                <sync-outlined :spin="true" style="color:#87d068;" v-if="project.isFinish===2"/>
+                                <div style="font-size: 60%; margin-left: 0.3vw" v-if="project.isFinish===2">进行中</div>
+
+                                <check-circle-two-tone two-tone-color="cyan" v-if="project.isFinish===1"/>
+                                <div style="font-size: 60%; margin-left: 0.3vw" v-if="project.isFinish===1">已完成</div>
+
+                                <PlayCircleOutlined two-tone-color="rgba(154, 154, 154, 1)" v-if="project.isFinish===0"/>
+                                <div style="font-size: 60%; margin-left: 0.3vw" v-if="project.isFinish===0">未开始</div>
+
+                                <InfoCircleOutlined style="color: red" v-if="project.isFinish===-1"/>
+                                <div style="font-size: 60%; margin-left: 0.3vw" v-if="project.isFinish===-1">已暂停</div>
+                            </div>
+                            <!--        works-->
+                            <div style="display: flex; flex-direction: row; width: 8.5vw">
+                                <smile-two-tone />
+                                <div style="font-size: 60%; margin-left: 0.3vw">工作量：{{ project.workLoad }}人/天</div>
+                            </div>
+
+                            <div style="display: flex; flex-direction: row; width: 8vw">
+                                <schedule-two-tone two-tone-color="pink"/>
+                                <div style="font-size: 60%; margin-left: 0.3vw">周期：{{ project.cycle }}天</div>
+                            </div>
+
+
+                        </div>
+
+                    </div>
+                    <template >
+                        <a-tag v-for="(project, index) in projects" :color="color[index]">
+                            {{ project.tag }}
+                        </a-tag>
+                        <a-button type="text" shape="circle" :icon="ArrowRightOutlined"></a-button>
+                    </template>
+                </a-card>
+<!--                </div>-->
+            </template>
             </div>
             </template>
+
         </div>
     </div>
     </a-spin>
@@ -57,7 +133,17 @@
 import {onMounted, reactive, ref, watch} from "vue";
 import request from "@/js/request.js";
 import router from "@/router/index.js";
+import {
+    ArrowRightOutlined,
+    CheckCircleTwoTone,
+    InfoCircleOutlined,
+    PlayCircleOutlined,
+    ScheduleTwoTone,
+    SmileTwoTone,
+    SyncOutlined,
+} from "@ant-design/icons-vue";
 
+const color = ['pink','red','green','orange','cyan','blue','purple']
 const showButton = reactive([]);
 const projects = ref([]);
 const id =ref(1)
@@ -81,8 +167,7 @@ onMounted(() =>{
 function  getAllProject(){
     request.projectGetCustom(data).then((res)=>{
         projects.value = res.data.data;
-        console.log(projects.value)
-
+        console.log('查询到的所有项目',projects.value)
     })
     // loading.value = true;
     // console.log('zmhuisss',loading.value)
diff --git a/src/views/WorkLoadPage/I_Manage_ChildSystem.vue b/src/views/WorkLoadPage/I_Manage_ChildSystem.vue
index f7e5a7f..d372ed9 100644
--- a/src/views/WorkLoadPage/I_Manage_ChildSystem.vue
+++ b/src/views/WorkLoadPage/I_Manage_ChildSystem.vue
@@ -8,9 +8,9 @@
       <button class="rounded-lg bg-green-400 hover:bg-green-500 p-1.5 text-white">编辑</button>
       <button class="rounded-lg bg-red-500 hover:bg-red-600 p-1.5 text-white" @click="showAddModal">新增子系统</button>
     </div>
-    <div class="mt-12 ml-8 flex space-x-16 h-full">
+    <div class="mt-12 ml-8 flex space-x-16 h-full" >
       <div class="flex flex-col space-y-6 border-r border-gray-200 w-80 h-full p-8">
-        <p class="text-lg">项目名称：梁溪区纪委大数据管理平台</p>
+        <p class="text-lg">项目名称：梁溪区纪委大数据管理平台{{ChildSystems.name}}</p>
         <p>项目周期：3个月</p>
         <p>项目开始时间：</p>
         <p>项目完成时间：</p>
@@ -19,8 +19,8 @@
           <p>20人/天</p>
         </div>
       </div>
-      <div class="container">
-        <div v-for="(ChildSystem, index) in ChildSystems" :key="index" class="flex space-x-5">
+      <div class="flex  flex-row justify-start space-x-5 container">
+        <div v-for="(ChildSystem, index) in ChildSystems" :key="index" class="flex  flex-row justify-start space-x-5">
           <a-card class="transition-transform transform-gpu hover:scale-105 relative w-[260px] h-[300px] bg-cover bg-center bg-[url('@/assert/images/img44.jpg')]" @mouseleave="showButton[index]=false" @mouseover="showButton[index]=true">
             <div class="flex absolute left-0 bottom-0 min-h-[30%] w-full bg-white">
               <div class="flex flex-col">
diff --git a/src/views/WorkLoadPage/PersonalProject.vue b/src/views/WorkLoadPage/PersonalProject.vue
index af716c8..06d0650 100644
--- a/src/views/WorkLoadPage/PersonalProject.vue
+++ b/src/views/WorkLoadPage/PersonalProject.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="relative  bg-gray-50 flex flex-col ">
+  <div class="relative   flex flex-col ">
       <a-breadcrumb class="ml-[3vw]">
           <a-breadcrumb-item>我的项目</a-breadcrumb-item>
       </a-breadcrumb>
@@ -28,19 +28,71 @@
             </div>
         </div>
         <div class="flex flex-wrap justify-start   mt-5 w-full">
-            <template v-for="(project, index) in projects" :key="index">
-                <a-card class=" mr-2.5 transition-transform transform-gpu hover:scale-105 relative w-[24vw]  h-60 mb-4 rounded-none bg-cover bg-center bg-[url('@/assert/images/img26.jpg')]" @mouseleave="showButton[index]=false" @mouseover="showButton[index]=true">
-                    <div class="flex absolute left-0 bottom-0 min-h-[30%] w-full bg-white">
-                        <p class="ml-6 mt-4 text-lg font-bold tracking-tight text-gray-900">{{ project.name }}</p>
-                        <div class="ml-auto mr-10">
-                            <button v-if="showButton[index]" class="mt-8 w-6 h-6 flex items-center justify-center bg-green-400 text-black rounded-full transition duration-300 ease-in-out transform hover:scale-105" @click="MainMessage(project)">
-                                <svg aria-hidden="true" class="rtl:rotate-180 w-4 h-4 text-white" fill="none" viewBox="0 0 14 10" xmlns="http://www.w3.org/2000/svg">
-                                    <path d="M1 5h12m0 0L9 1m4 4L9 9" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
-                                </svg>
-                            </button>
+            <template v-for="(project, index) in projects" :key="index"  >
+                <!--                <div class="flex flex-row justify-start  mt-5 w-full">-->
+                <a-card hoverable  class="w-[30vw] ml-[2.5vw] mb-[4vh]"  :loading="false" @click="MainMessage(project)" >
+                    <template #title>
+                        <div style="display: flex; flex-direction: row">
+                            <div style="display: flex; flex-direction: row; width: 18vw">
+                                <div style="width: 0.5vw; height: 3vh; background-color: #BD3124; border-radius: 10px; margin-right: 0.2vw;margin-top: 0.3vh"/>
+
+                                <div style="text-shadow: 2px 2px 6px rgba(189, 49, 36, 0.4);">{{ project.name }}</div>
+                            </div>
+                            <div style="margin-left: 1.8vw;
+                    font-size: 70%;
+                    font-weight: normal;
+                    text-shadow: 2px 2px 4px #B886F8;
+                    display: flex;
+                    flex-direction: row;
+                    margin-top: 0.8vh;">
+                                <div style="width: 0.5vw; height: 2.5vh; background-color: #B886F8; border-radius: 10px; margin-right: 0.2vw;"/>负责人：{{ project.principalUser}}</div>
                         </div>
+                    </template>
+                    <div style="display: flex; flex-direction: column; height: 10vh; margin-top: 0">
+                        <!--      description-->
+                        <div style="display: flex; flex-direction: row; height: 8vh">
+                            <div style="width: 0.8vw; height: 2vh; background-color: rgba(233, 157, 66, 1); border-radius: 10px; margin-right: 0.2vw;"/>
+                            <div style="font-size: 60%; text-shadow: 2px 2px 6px rgba(233, 157, 66, 1); color: rgba(154, 154, 154, 1)">{{ project.description }}</div>
+                        </div>
+                        <!--      other message-->
+                        <div style="display: flex; flex-direction: row; height: 2vh">
+                            <!--        status-->
+                            <div style="display: flex; flex-direction: row; width: 5vw">
+                                <sync-outlined :spin="true" style="color:#87d068;" v-if="project.isFinish===2"/>
+                                <div style="font-size: 60%; margin-left: 0.3vw" v-if="project.isFinish===2">进行中</div>
+
+                                <check-circle-two-tone two-tone-color="cyan" v-if="project.isFinish===1"/>
+                                <div style="font-size: 60%; margin-left: 0.3vw" v-if="project.isFinish===1">已完成</div>
+
+                                <PlayCircleOutlined two-tone-color="rgba(154, 154, 154, 1)" v-if="project.isFinish===0"/>
+                                <div style="font-size: 60%; margin-left: 0.3vw" v-if="project.isFinish===0">未开始</div>
+
+                                <InfoCircleOutlined style="color: red" v-if="project.isFinish===-1"/>
+                                <div style="font-size: 60%; margin-left: 0.3vw" v-if="project.isFinish===-1">已暂停</div>
+                            </div>
+                            <!--        works-->
+                            <div style="display: flex; flex-direction: row; width: 8.5vw">
+                                <smile-two-tone />
+                                <div style="font-size: 60%; margin-left: 0.3vw">工作量：{{ project.workLoad }}人/天</div>
+                            </div>
+
+                            <div style="display: flex; flex-direction: row; width: 8vw">
+                                <schedule-two-tone two-tone-color="pink"/>
+                                <div style="font-size: 60%; margin-left: 0.3vw">周期：{{ project.cycle }}天</div>
+                            </div>
+
+
+                        </div>
+
                     </div>
+                    <template >
+                        <a-tag v-for="(project, index) in projects" :color="color[index]">
+                            {{ project.tag }}
+                        </a-tag>
+                        <a-button type="text" shape="circle" :icon="ArrowRightOutlined"></a-button>
+                    </template>
                 </a-card>
+                <!--                </div>-->
             </template>
         </div>
     </div>
@@ -53,6 +105,17 @@
 import {onMounted, reactive, ref, watch} from "vue";
 import request from '@/js/request.js'
 import router from "@/router/index.js";
+import {
+    ArrowRightOutlined,
+    CheckCircleTwoTone,
+    InfoCircleOutlined,
+    PlayCircleOutlined,
+    ScheduleTwoTone,
+    SmileTwoTone,
+    SyncOutlined
+} from "@ant-design/icons-vue";
+
+const color = ['pink','red','green','orange','cyan','blue','purple']
 
 const showButton = reactive([]);
 const token = window.localStorage.getItem('token')