WxxyDeveloper/JSL_OrganizeInternalOAWeb
9
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

更换项目卡片样式

Browse Source
This commit is contained in:
妖姐 2024-03-16 12:03:41 +08:00
parent 8596d4fb85
commit 95c824f0b0
4 changed files with 178 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/js/request.js
View File

@ -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=')}`;

113
src/views/ProjectPage/ProjectList.vue
View File

@ -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)

8
src/views/WorkLoadPage/I_Manage_ChildSystem.vue
View File

@ -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">

85
src/views/WorkLoadPage/PersonalProject.vue
View File

@ -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')