From 925d56c48a026494dec89e18e40ef189edbd8609 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=A6=96=E5=A7=90?= <2981176548@qq.com>
Date: Tue, 12 Mar 2024 20:08:31 +0800
Subject: [PATCH] =?UTF-8?q?=E8=8E=B7=E5=8F=96=E9=A1=B9=E7=9B=AE=E4=BF=A1?=
 =?UTF-8?q?=E6=81=AF1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/HomeComponents/NavBar.vue    |   2 +-
 src/js/request.js                           |  21 +++-
 src/router/index.js                         |   6 +
 src/views/ProjectPage/MainMessageCustom.vue |  38 ++++++
 src/views/ProjectPage/ProjectCard.vue       | 132 +++++++++++++++-----
 5 files changed, 161 insertions(+), 38 deletions(-)
 create mode 100644 src/views/ProjectPage/MainMessageCustom.vue

diff --git a/src/components/HomeComponents/NavBar.vue b/src/components/HomeComponents/NavBar.vue
index cf8806e..ea93ac8 100644
--- a/src/components/HomeComponents/NavBar.vue
+++ b/src/components/HomeComponents/NavBar.vue
@@ -194,7 +194,7 @@ onMounted(() => {
                 // avatar.value = res.data.data.avatar   数据库无头像，暂时用下面的头像
                 avatar.value = 'https://img1.baidu.com/it/u=2005056479,139681251&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1710176400&t=4f32b862465c709f79c8fb80d3c0444b';
                 console.log(username.value, avatar.value)
-                if (res.data.data.role === 'teacher') {
+                if (res.data.data.role === '老师') {
                     console.log('这是老师');
                     // 执行老师相关的逻辑
                     role.value =true
diff --git a/src/js/request.js b/src/js/request.js
index 2c19191..cd0206b 100644
--- a/src/js/request.js
+++ b/src/js/request.js
@@ -500,8 +500,7 @@ const infoEditSettingHeaderImage = (showType, token) => {
 }
 
 /**
- * 展示全部项目
- * @param  (listAll tags isFinish)
+ * 展示我负责的项目
  * @param token
  */
 const projectGet =(token) => {
@@ -515,8 +514,23 @@ const projectGet =(token) => {
     })
 }
 
-
 /**
+ * 展示游客查看的项目
+ * @param data (tags isFinish)
+ */
+const  projectGetCustom = (data) =>{
+    return axios({
+        url:api+ "/project/get/custom",
+        method: "get",
+        data: data,
+        headers:{
+            'Timestamp': getCurrentTimestamp()
+        }
+    })
+}
+
+
+    /**
  * 展示全部消息
  *
  */
@@ -566,6 +580,7 @@ export default {
 
 
     projectGet,
+    projectGetCustom,
 
 
 
diff --git a/src/router/index.js b/src/router/index.js
index d24de75..99e7b5b 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -136,6 +136,12 @@ const router = createRouter({
         },
       ]
     },
+    {
+      path:'/ProjectMessage',
+      name:'MainMessageCustom',
+      component:()=>import('@/views/ProjectPage/MainMessageCustom.vue')
+    },
+
   ]
 })
 
diff --git a/src/views/ProjectPage/MainMessageCustom.vue b/src/views/ProjectPage/MainMessageCustom.vue
new file mode 100644
index 0000000..7434397
--- /dev/null
+++ b/src/views/ProjectPage/MainMessageCustom.vue
@@ -0,0 +1,38 @@
+<template>
+  <NavBar class="h-[10vh]"></NavBar>
+    <div class=" flex flex-row">
+        <div class="flex  flex-col w-[20vw]  h-[90vh] bg-blue-100 border border-[2px] border-gray-400 border-t-0 border-b-0 border-l-0">
+            <span>子系统名称：</span>
+            <span>子系统周期：</span>
+            <span>项目开发时间：</span>
+            <span>项目完成时间：</span>
+            <span>工作量：</span>
+            <span>完成情况：</span>
+            <span>需求文档：</span>
+            <button>子系统文档</button>
+        </div>
+
+        <div class="w-[80vw] ml-[5vw]">
+            <a-card class="w-[22vw] h-[30vh] bg-gradient-to-b from-blue-500 to-blue-300">
+                <div class="w-[22vw] h-[20vh] flex flex-col">
+                    <span class="">登录注册模块</span>
+                    负责人：
+                    剩余8天
+                </div>
+                <div class="flex flex-row w-[22vw] h-[5vh]">
+                    <p class="w-3 h-3 rounded-full bg-blue-500"></p>进行中
+                   <div>
+                       <span>2</span>
+                       <span>人/天</span>
+
+                   </div>
+                </div>
+            </a-card>
+        </div>
+
+    </div>
+
+</template>
+<script setup>
+import NavBar from "@/components/HomeComponents/NavBar.vue";
+</script>
diff --git a/src/views/ProjectPage/ProjectCard.vue b/src/views/ProjectPage/ProjectCard.vue
index c60713e..0f71d70 100644
--- a/src/views/ProjectPage/ProjectCard.vue
+++ b/src/views/ProjectPage/ProjectCard.vue
@@ -1,19 +1,22 @@
 <template>
     <div class="relative h-full bg-gray-50 flex">
         <div class="mt-12">
-            <nav class="ml-16 flex space-x-72">
-              <div class="inline-flex rounded-md shadow-sm" role="group">
-                <button
-                    :class="buttonClass('DisableSelection')"
-                    type="button"
-                    @click="toggleSelectionDisabled"
-                >
-                 全部
-                </button>
+            <nav class="ml-16 flex space-x-[30vw]">
+              <div class="inline-flex rounded-md " role="group">
+                  <button
+
+                          type="button"
+                          @click="toggleSelectionDisabled"
+                          class="w-[8vw] rounded-lg "
+                          :class="buttonClass('DisableSelection')"
+                  >
+                      全部
+                  </button>
                 <button
                     :class="buttonClass('web')"
                     type="button"
                     @click="toggleSelection('web')"
+                    class="w-[6vw] rounded-lg"
                 >
                  Web
                 </button>
@@ -21,6 +24,7 @@
                     :class="buttonClass('Ai')"
                     type="button"
                     @click="toggleSelection('Ai')"
+                    class="w-[6vw] rounded-lg"
                 >
                   Ai
                 </button>
@@ -28,23 +32,68 @@
                     :class="buttonClass('App')"
                     type="button"
                     @click="toggleSelection('App')"
+                    class="w-[6vw] rounded-lg  "
                 >
                 App
                 </button>
+                  <button
+                          :class="buttonClass('大数据')"
+                          type="button"
+                          @click="toggleSelection('大数据')"
+                          class="w-[6vw] rounded-lg "
+                  >
+                      大数据
+                  </button>
               </div>
-                <ul class="flex space-x-12 ">
-                    <a-checkbox>未开始</a-checkbox>
-                    <a-checkbox>进行中</a-checkbox>
-                    <a-checkbox>已完成</a-checkbox>
-                </ul>
+                <div class="flex space-x-12">
+                    <label class="inline-flex items-center space-x-2 hover:text-blue-600">
+                        <input
+                                type="checkbox"
+                                class="form-checkbox h-5 w-5 text-red-400 rounded-lg focus:ring-white"
+                                value="0"
+                                v-model="selectedStatus"
+                        />
+                        <span class="text-sm">未开始</span>
+                    </label>
+
+                    <label class="inline-flex items-center space-x-2 hover:text-blue-600">
+                        <input
+                                type="checkbox"
+                                class="form-checkbox h-5 w-5 text-blue-400 rounded-lg focus:ring-white"
+                                value="2"
+                                v-model="selectedStatus"
+                        />
+                        <span class="text-sm">进行中</span>
+                    </label>
+
+                    <label class="inline-flex items-center space-x-2 hover:text-blue-600">
+                        <input
+                                type="checkbox"
+                                class="form-checkbox h-5 w-5 text-green-400 rounded-full focus:ring-white"
+                                value="1"
+                                v-model="selectedStatus"
+                        />
+                        <span class="text-sm">已完成</span>
+                    </label>
+
+                    <label class="inline-flex items-center space-x-2 hover:text-blue-600">
+                        <input
+                                type="checkbox"
+                                class="form-checkbox h-5 w-5 text-red-400 rounded-full focus:ring-white "
+                                value="-1"
+                                v-model="selectedStatus"
+                        />
+                        <span class="text-sm ">暂停</span>
+                    </label>
+                </div>
             </nav>
-            <div class="flex space-x-9 ml-16 mt-12">
-                <template v-for="(project, index) in projects" :key="index">
-                    <a-card class="transition-transform transform-gpu hover:scale-105 relative w-[300px] h-64 rounded-none bg-cover bg-center bg-[url('@/assert/images/img25.jpg')]" @mouseleave="LearnMore1=false" @mouseover="LearnMore1=true">
+            <div class="flex space-x-9 ml-16 mt-12 ">
+                <template v-for="(project, index) in projects" :key="index" class="w-[80vw] ">
+                    <a-card class="transition-transform transform-gpu hover:scale-105 relative w-[300px] h-64 rounded-none bg-cover bg-center bg-[url('@/assert/images/img12.jpg')]" @mouseleave="LearnMore1=false" @mouseover="LearnMore1=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="LearnMore1" 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">
+                                <button v-if="LearnMore1" 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">
                                     <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>
@@ -65,15 +114,13 @@
     </div>
 </template>
 <script setup>
-import {onMounted, ref, watch} from "vue";
+import {onMounted, reactive, ref, watch} from "vue";
 import request from "@/js/request.js";
+import router from "@/router/index.js";
 
 const  LearnMore1 = ref(false)
-
-
-const token = window.localStorage.getItem('token')
 const projects = ref([]);
-
+const id =ref(1)
 const pageSize = ref(20);
 const current1 = ref(3);
 const onShowSizeChange = (current, pageSize) => {
@@ -89,16 +136,14 @@ onMounted(() =>{
     getAllProject()
 })
 function  getAllProject(){
-    request.projectGet(token).then((res)=>{
+    request.projectGetCustom(id).then((res)=>{
         console.log(res)
         // Project.data= res.data.data.data
         projects.value = res.data.data;
-
+        console.log(projects.value)
     })
 }
 
-const selectedButtons = ref([]);
-const selectionDisabled = ref(false);
 
 
 //选择全部按钮，其他按钮不可选
@@ -115,7 +160,6 @@ const toggleSelection = (button) => {
   if (selectionDisabled.value) {
     return;
   }
-
   //选择其他按钮
   const index = selectedButtons.value.indexOf(button);
   if (index > -1) {
@@ -125,12 +169,32 @@ const toggleSelection = (button) => {
   }
 };
 
-
-//设置复选按钮样式
 const buttonClass = (button) => ({
-  'px-4 py-2 text-sm font-medium border focus:z-10 focus:ring-2': true,
-  'text-gray-900 bg-white border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:ring-blue-700 focus:text-blue-700 ':  (!selectedButtons.value.includes(button) && !selectionDisabled.value) || (button === 'DisableSelection' && !selectionDisabled.value),
-  'bg-green-400 text-white': selectedButtons.value.includes(button) || (button === 'DisableSelection' && selectionDisabled.value), // 选中状态的样式
+  'px-4 py-2 text-sm font-medium border focus:z-10 focus:ring-1': true,
+  'text-gray-900 bg-white border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:ring-blue-100 focus:text-blue-700 outline-none ':  (!selectedButtons.value.includes(button) && !selectionDisabled.value) || (button === 'DisableSelection' && !selectionDisabled.value),
+  'bg-blue-400 text-white': selectedButtons.value.includes(button) || (button === 'DisableSelection' && selectionDisabled.value), // 选中状态的样式
 });
 
-</script>
\ No newline at end of file
+// 点击跳转事件
+function MainMessage(){
+    router.push("/ProjectMessage")
+}
+
+
+
+// 根据选择的按钮过滤项目列表
+const filteredProjects = ref([]);
+// 根据选择的按钮过滤项目列表
+const selectedButtons = ref(['web','ai','大数据']);
+const selectionDisabled = ref('');
+const selectedStatus = reactive([-1,0,1,2]); // 选择的完成进度
+const  clickedButton= ref(null)
+// 根据选择的完成进度过滤项目列表
+watch(() => selectedButtons.value, (clickedButton) => {
+   if (selectedButtons.value === 1){
+
+   }
+
+});
+
+</script>gj
\ No newline at end of file