216 lines
7.8 KiB
Vue
216 lines
7.8 KiB
Vue
<template>
|
||
<div class="flex flex-col h-full bg-gray-50 w-full">
|
||
<a-breadcrumb class="mt-6 ml-6">
|
||
<a-breadcrumb-item>我管理的</a-breadcrumb-item>
|
||
<a-breadcrumb-item><a href="">梁溪区纪委大数据管理平台项目</a></a-breadcrumb-item>
|
||
</a-breadcrumb>
|
||
<div class="flex space-x-[10vw] ml-96">
|
||
<div class="inline-flex rounded-md ml-6" role="group">
|
||
<button
|
||
|
||
:class="buttonClass('DisableSelection')"
|
||
class="w-16 h-8 flex justify-center items-center"
|
||
type="button"
|
||
@click="toggleSelectionDisabled"
|
||
>
|
||
全部
|
||
</button>
|
||
<button
|
||
:class="buttonClass('web')"
|
||
class="w-16 h-8 flex justify-center items-center"
|
||
type="button"
|
||
@click="toggleSelection('web')"
|
||
>
|
||
Web
|
||
</button>
|
||
<button
|
||
:class="buttonClass('Ai')"
|
||
class="w-16 h-8 flex justify-center items-center"
|
||
type="button"
|
||
@click="toggleSelection('Ai')"
|
||
>
|
||
Ai
|
||
</button>
|
||
<button
|
||
:class="buttonClass('App')"
|
||
class="w-16 h-8 flex justify-center items-center"
|
||
type="button"
|
||
@click="toggleSelection('App')"
|
||
>
|
||
App
|
||
</button>
|
||
<button
|
||
:class="buttonClass('大数据')"
|
||
class="w-20 h-8 flex justify-center items-center"
|
||
type="button"
|
||
@click="toggleSelection('大数据')"
|
||
>
|
||
大数据
|
||
</button>
|
||
</div>
|
||
<div class="flex space-x-8">
|
||
<label class="inline-flex items-center space-x-2 hover:text-blue-600">
|
||
<input
|
||
v-model="selectedStatus.weikaishi"
|
||
class="form-checkbox h-5 w-5 text-red-400 rounded-lg focus:ring-white"
|
||
type="checkbox"
|
||
/>
|
||
<span class="text-sm">未开始</span>
|
||
</label>
|
||
<label class="inline-flex items-center space-x-2 hover:text-blue-600">
|
||
<input
|
||
v-model="selectedStatus.jinxingzhong"
|
||
class="form-checkbox h-5 w-5 text-blue-400 rounded-lg focus:ring-white"
|
||
type="checkbox"
|
||
/>
|
||
<span class="text-sm">进行中</span>
|
||
</label>
|
||
<label class="inline-flex items-center space-x-2 hover:text-blue-600">
|
||
<input
|
||
v-model="selectedStatus.yiwancheng"
|
||
class="form-checkbox h-5 w-5 text-green-400 rounded-full focus:ring-white"
|
||
type="checkbox"
|
||
/>
|
||
<span class="text-sm">已完成</span>
|
||
</label>
|
||
<label class="inline-flex items-center space-x-2 hover:text-blue-600">
|
||
<input
|
||
v-model="selectedStatus.stop"
|
||
class="form-checkbox h-5 w-5 text-red-400 rounded-full focus:ring-white "
|
||
type="checkbox"
|
||
/>
|
||
<span class="text-sm ">暂停</span>
|
||
</label>
|
||
</div>
|
||
</div>
|
||
<div class="mt-12 ml-12 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>项目周期：3个月</p>
|
||
<p>项目开始日期：2024/3/2</p>
|
||
<div class="space-y-2">
|
||
<p>技术选型：</p>
|
||
<p>前端：vue3</p>
|
||
<p>后端：java,springboot</p>
|
||
</div>
|
||
<p>完成情况：进行中</p>
|
||
<p>是否发布：未发布</p>
|
||
<p>负责人：张三</p>
|
||
</div>
|
||
<div class="flex space-x-9">
|
||
<a-card v-for="(ChildProject, index) in ChildProjects" :key="index" class="transition-transform transform-gpu hover:scale-105 relative w-96 h-64 rounded-none bg-cover bg-center bg-[url('@/assert/images/img23.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-2xl font-bold tracking-tight text-gray-900">{{ChildProject.name}}</p>
|
||
<div class="flex mt-7 space-x-3">
|
||
<p class="ml-14 text-lg">剩余</p>
|
||
<p class="text-xl text-green-400 font-bold">10天</p>
|
||
</div>
|
||
<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="$router.push('/WorkLoad/I_Manage/Back')">
|
||
<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>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
|
||
<script setup>
|
||
import {onMounted, reactive, ref, watch} from 'vue';
|
||
import request from "@/js/request.js";
|
||
|
||
const showButton = reactive([]);
|
||
const token = window.localStorage.getItem('token')
|
||
const ChildProjects = ref([]); // 使用ref创建响应式数据
|
||
const id = ref(13);
|
||
|
||
onMounted(() =>{
|
||
request.projectWorkGet(id, token).then((res) => {
|
||
ChildProjects.value = res.data.data;
|
||
})
|
||
})
|
||
|
||
|
||
const toggleSelectionDisabled = () => {
|
||
selectionDisabled.value = !selectionDisabled.value;
|
||
if (selectionDisabled.value) {
|
||
// 清空选中的按钮
|
||
selectedButtons.value = [];
|
||
}
|
||
};
|
||
|
||
const toggleSelection = (button) => {
|
||
// 如果禁止选择，直接返回
|
||
if (selectionDisabled.value) {
|
||
return;
|
||
}
|
||
//选择其他按钮
|
||
const index = selectedButtons.value.indexOf(button);
|
||
if (index > -1) {
|
||
selectedButtons.value.splice(index, 1); // 如果已选中，再次点击时移除
|
||
} else {
|
||
selectedButtons.value.push(button); // 如果未选中，点击时添加
|
||
}
|
||
};
|
||
|
||
const buttonClass = (button) => ({
|
||
'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), // 选中状态的样式
|
||
});
|
||
|
||
// @click="selectedTags.web = !selectedTags.web"
|
||
|
||
// 根据选择的按钮过滤项目列表
|
||
const filteredProjects = ref([]);
|
||
// 根据选择的按钮过滤项目列表
|
||
const selectedButtons = ref(['web','ai','大数据']);
|
||
const selectionDisabled = ref('');
|
||
const selectedStatus = reactive({
|
||
weikaishi:true, //1
|
||
jinxingzhong:true, //2
|
||
yiwancheng:true, //0
|
||
stop:true //-1
|
||
}); // 选择的完成进度
|
||
const select = reactive({
|
||
|
||
})
|
||
const data = reactive({
|
||
tags:[],
|
||
isFinish:[]
|
||
})
|
||
const clickedButton= ref(null)
|
||
// 根据选择的完成进度过滤项目列表
|
||
watch(() => selectedButtons.value, (clickedButton) => {
|
||
if (selectedButtons.value === 1){
|
||
|
||
}
|
||
|
||
});
|
||
|
||
watch(selectedStatus, async (newValue, oldValue) => {
|
||
if (newValue.stop === true) {
|
||
data.isFinish.push(-1)
|
||
}
|
||
if (newValue.jinxingzhong === true) {
|
||
data.isFinish.push(2)
|
||
}
|
||
if (newValue.weikaishi === true ) {
|
||
data.isFinish.push(1)
|
||
}
|
||
if (newValue.yiwancheng === true) {
|
||
data.isFinish.push(0)
|
||
}
|
||
|
||
request.projectWorkGet(data)
|
||
|
||
data.isFinish = []
|
||
})
|
||
|
||
</script>
|