布局
This commit is contained in:
parent
b864cc7663
commit
795e817e70
@ -1,4 +1,5 @@
|
|||||||
<template>
|
<template>
|
||||||
|
|
||||||
<div id="controls-carousel" class="w-full relative" data-carousel="slide">
|
<div id="controls-carousel" class="w-full relative" data-carousel="slide">
|
||||||
<!-- Carousel wrapper -->
|
<!-- Carousel wrapper -->
|
||||||
<div class="relative h-56 overflow-hidden md:h-[600px]">
|
<div class="relative h-56 overflow-hidden md:h-[600px]">
|
||||||
@ -49,4 +50,8 @@
|
|||||||
</span>
|
</span>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</template>
|
</template>
|
||||||
@ -59,6 +59,7 @@
|
|||||||
</span>
|
</span>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</template>
|
</template>
|
||||||
<script setup>
|
<script setup>
|
||||||
</script>
|
</script>
|
||||||
@ -1,3 +1,96 @@
|
|||||||
<template>
|
<template>
|
||||||
新闻展示
|
新闻展示
|
||||||
|
|
||||||
|
|
||||||
|
<a-card title="dsdvsvdv" hoverable class="w-[23vw] h-[32vh] flex flex-col rounded-lg border-gray-300">
|
||||||
|
|
||||||
|
<template #extra >
|
||||||
|
<div class="flex flex-row justify-start">
|
||||||
|
<!-- <span class="text-blue-900 font-bold text-xl mt-1">后台管理系统</span>-->
|
||||||
|
<button v-if="edit === false" class=" w-6 h-6 flex items-center justify-center bg-blue-400 text-black rounded-full transition duration-300 ease-in-out transform hover:scale-105" @click="EnterChildModule(ChildSystem)" >
|
||||||
|
<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>
|
||||||
|
|
||||||
|
<button v-if="edit === true" class=" w-6 h-6 flex items-center justify-center bg-red-400 text-black rounded-full transition duration-300 ease-in-out transform hover:scale-105" @click="EnterChildModule(ChildSystem)" >
|
||||||
|
<CloseOutlined style="font-size: large ;color:white" />
|
||||||
|
</button>
|
||||||
|
<!-- <a-button v-else-if="edit === true" type="link" class="mt-8 w-6 h-6 flex items-center justify-center bg-red-400 text-white rounded-full transition duration-300 ease-in-out transform " @click="deleteCard(index)">-->
|
||||||
|
<!-- -->
|
||||||
|
<!-- </a-button>-->
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<div class="flex flex-row justify-between ">
|
||||||
|
<div class="flex-row flex justify-end space-x-5">
|
||||||
|
<div class="flex-col flex text-s text-blue-500">
|
||||||
|
<span class="text-blue-900 font-bold">负责人</span>
|
||||||
|
<span style="color: #04befe" class="font-bold text-blue-300 text-sm text-[80%]">杨怼怼</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex-col flex">
|
||||||
|
<span class="text-blue-900 font-bold">系统周期</span>
|
||||||
|
<span style="color: #04befe" class="font-bold text-blue-300 text-sm text-[80%] ">60天</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex-col flex">
|
||||||
|
<span class="text-blue-900 font-bold">系统状态</span>
|
||||||
|
|
||||||
|
<div style="color: #04befe" class="text-sm text-[80%] ml-1 text-blue-300 font-bold" v-if="project.isFinish===2">
|
||||||
|
<sync-outlined :spin="true" style="color: #04befe" v-if="project.isFinish===2"/>
|
||||||
|
进行中
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<div style="color: #04befe" class="text-sm text-[80%] ml-1 text-blue-300 font-bold" v-if="project.isFinish===1">
|
||||||
|
<check-circle-two-tone two-tone-color="cyan" v-if="project.isFinish===1"/>
|
||||||
|
已完成
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<div style="color: #04befe" class="text-sm text-[80%] ml-1 text-blue-300 font-bold" v-if="project.isFinish===0">
|
||||||
|
<PlayCircleOutlined two-tone-color="rgba(154, 154, 154, 1)" v-if="project.isFinish===0"/>
|
||||||
|
未开始
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<div style="color: #04befe" class="text-sm text-[80%] ml-1 font-bold" v-if="project.isFinish===-1">
|
||||||
|
<InfoCircleOutlined style="color: #04befe" v-if="project.isFinish===-1"/>
|
||||||
|
已暂停
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="flex flex-col mb-2 ">
|
||||||
|
<span class="font-bold text-blue-900 ">系统工作量</span>
|
||||||
|
<span style="color: #04befe" class="text-blue-300 text-sm text-[85%] font-bold">120人/天</span>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex-col flex">
|
||||||
|
<span class="font-bold text-blue-900">简介</span>
|
||||||
|
<span style="color: #04befe" class="w-[15vw] break-words text-blue-300 text-sm text-[85%] ">dwhdbwudheuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuw</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</a-card>
|
||||||
|
|
||||||
</template>
|
</template>
|
||||||
|
<script setup>
|
||||||
|
import {
|
||||||
|
CheckCircleTwoTone,
|
||||||
|
CloseOutlined,
|
||||||
|
InfoCircleOutlined,
|
||||||
|
PlayCircleOutlined,
|
||||||
|
SyncOutlined
|
||||||
|
} from "@ant-design/icons-vue";
|
||||||
|
import {reactive, ref} from "vue";
|
||||||
|
// const project = defineProps(["name","id","isFinish","principalUser","description","cycle","workLoad","tags"])
|
||||||
|
const project = reactive({
|
||||||
|
isFinish:2,
|
||||||
|
})
|
||||||
|
const edit = ref(false)
|
||||||
|
</script>
|
||||||
@ -1,258 +0,0 @@
|
|||||||
<template>
|
|
||||||
<a-spin :spinning="false" tip="Loading..." >
|
|
||||||
<div class="relative bg-gray-50 flex w-full overflow-x-hidden">
|
|
||||||
<div class="mt-0">
|
|
||||||
<div class="flex flex-row justify-between">
|
|
||||||
<div class="ml-3">
|
|
||||||
<!-- 第一个是 全部 所以独立出来 -->
|
|
||||||
<a-checkable-tag
|
|
||||||
v-model:checked="tagAll"
|
|
||||||
@change="checked => handleClickAll(checked)"
|
|
||||||
>
|
|
||||||
全部
|
|
||||||
</a-checkable-tag>
|
|
||||||
<a-checkable-tag
|
|
||||||
v-for="(tag, index) in tagsData"
|
|
||||||
:key="tag.id"
|
|
||||||
v-model:checked="selectTags[index]"
|
|
||||||
@change="checked => handleChange(tag, checked)"
|
|
||||||
>
|
|
||||||
{{ tag.name }}
|
|
||||||
</a-checkable-tag>
|
|
||||||
</div>
|
|
||||||
<div class="">
|
|
||||||
<a-checkbox-group v-model:value="data.isFinish" :options="options" class="mr-3" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<template v-if="projects.length === 0">
|
|
||||||
<!-- 数据为空时的提示信息 -->
|
|
||||||
<div class="w-full h-[80vh] ">
|
|
||||||
<img src="../../../public/33.png" class="w-[300px] h-[300px] mt-[20vh] ml-[40vw]">
|
|
||||||
</div>
|
|
||||||
</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>-->
|
|
||||||
<!-- </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>
|
|
||||||
</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="(tag, index) in project.tags" :color="color[index]">
|
|
||||||
{{ tag }}
|
|
||||||
</a-tag>
|
|
||||||
<a-button type="text" shape="circle" :icon="ArrowRightOutlined"></a-button>
|
|
||||||
</template>
|
|
||||||
</a-card>
|
|
||||||
<!-- </div>-->
|
|
||||||
</template>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</a-spin>
|
|
||||||
</template>
|
|
||||||
<script setup>
|
|
||||||
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)
|
|
||||||
const data = reactive({
|
|
||||||
id:'',
|
|
||||||
tags:[],
|
|
||||||
isFinish:[0,1,2,-1]
|
|
||||||
})
|
|
||||||
// const loading =ref(false)
|
|
||||||
onMounted(() =>{
|
|
||||||
|
|
||||||
request.getTagsProjectList().then(res=>{
|
|
||||||
console.log("tagsData:",res)
|
|
||||||
tagsData.value=res.data.data
|
|
||||||
|
|
||||||
})
|
|
||||||
getAllProject()
|
|
||||||
|
|
||||||
|
|
||||||
})
|
|
||||||
function getAllProject(){
|
|
||||||
request.projectGetCustom(data).then((res)=>{
|
|
||||||
projects.value = res.data.data;
|
|
||||||
console.log('查询到的所有项目',projects.value)
|
|
||||||
|
|
||||||
})
|
|
||||||
// loading.value = true;
|
|
||||||
// console.log('zmhuisss',loading.value)
|
|
||||||
}
|
|
||||||
|
|
||||||
const tagsData = ref([]);
|
|
||||||
const selectTags = ref([false, false, false, false]);
|
|
||||||
const options = [
|
|
||||||
{
|
|
||||||
label: '未开始',
|
|
||||||
value: 0,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '进行中',
|
|
||||||
value: 2,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '已完成',
|
|
||||||
value: 1,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '已暂停',
|
|
||||||
value: -1,
|
|
||||||
},
|
|
||||||
]
|
|
||||||
watch(() =>data.isFinish, async (newValue, oldValue) =>{
|
|
||||||
console.log("data.isFinish", data.isFinish)
|
|
||||||
getAllProject()
|
|
||||||
})
|
|
||||||
|
|
||||||
const tagAll=ref(true)
|
|
||||||
const token = window.localStorage.getItem('token')
|
|
||||||
|
|
||||||
//当选中全部时，其他的都不选中
|
|
||||||
const handleClickAll=(checked)=>{
|
|
||||||
if(checked){
|
|
||||||
selectTags.value.forEach((item,index)=>{
|
|
||||||
selectTags.value[index]=false
|
|
||||||
})
|
|
||||||
selectedTags.value = []
|
|
||||||
}
|
|
||||||
|
|
||||||
// console.log("selectedTags",selectedTags.value)
|
|
||||||
}
|
|
||||||
const selectedTags =ref([])
|
|
||||||
|
|
||||||
// 当选中其他的时候， 全部 不选中
|
|
||||||
const handleChange = (tag, checked) => {
|
|
||||||
tag.checked = checked; // 更新checkbox的选中状态
|
|
||||||
|
|
||||||
if (checked) {
|
|
||||||
tagAll.value = false;
|
|
||||||
|
|
||||||
selectedTags.value.push(tag.name); // 将选中的tag.name添加到数组中
|
|
||||||
} else {
|
|
||||||
const index = selectedTags.value.indexOf(tag.name);
|
|
||||||
if (index !== -1) {
|
|
||||||
selectedTags.value.splice(index, 1); // 从数组中移除取消选中的tag.name
|
|
||||||
}
|
|
||||||
let flag = true;
|
|
||||||
selectTags.value.forEach((item, index) => {
|
|
||||||
if (item) {
|
|
||||||
flag = false;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
if (flag) {
|
|
||||||
tagAll.value = true;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
function MainMessage(project) {
|
|
||||||
console.log(project.id)
|
|
||||||
window.localStorage.setItem('id',project.id)
|
|
||||||
router.push('/ProjectMessage');
|
|
||||||
|
|
||||||
}
|
|
||||||
watch(() => selectedTags.value.length, async (newValue, oldValue) =>{
|
|
||||||
data.tags = []
|
|
||||||
selectedTags.value.forEach((item,index)=>{
|
|
||||||
data.tags.push(item)
|
|
||||||
})
|
|
||||||
getAllProject()
|
|
||||||
})
|
|
||||||
|
|
||||||
</script>
|
|
||||||
Loading…
x
Reference in New Issue
Block a user