获取项目信息1
This commit is contained in:
parent
ce17f62ab6
commit
925d56c48a
@ -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
|
||||
|
||||
@ -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,
|
||||
|
||||
|
||||
|
||||
|
||||
@ -136,6 +136,12 @@ const router = createRouter({
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
path:'/ProjectMessage',
|
||||
name:'MainMessageCustom',
|
||||
component:()=>import('@/views/ProjectPage/MainMessageCustom.vue')
|
||||
},
|
||||
|
||||
]
|
||||
})
|
||||
|
||||
|
||||
38
src/views/ProjectPage/MainMessageCustom.vue
Normal file
38
src/views/ProjectPage/MainMessageCustom.vue
Normal file
@ -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>
|
||||
@ -1,12 +1,14 @@
|
||||
<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">
|
||||
<nav class="ml-16 flex space-x-[30vw]">
|
||||
<div class="inline-flex rounded-md " role="group">
|
||||
<button
|
||||
:class="buttonClass('DisableSelection')"
|
||||
|
||||
type="button"
|
||||
@click="toggleSelectionDisabled"
|
||||
class="w-[8vw] rounded-lg "
|
||||
:class="buttonClass('DisableSelection')"
|
||||
>
|
||||
全部
|
||||
</button>
|
||||
@ -14,6 +16,7 @@
|
||||
: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>
|
||||
<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>
|
||||
<ul class="flex space-x-12 ">
|
||||
<a-checkbox>未开始</a-checkbox>
|
||||
<a-checkbox>进行中</a-checkbox>
|
||||
<a-checkbox>已完成</a-checkbox>
|
||||
</ul>
|
||||
</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>
|
||||
// 点击跳转事件
|
||||
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
|
||||
Loading…
x
Reference in New Issue
Block a user