ccsens_tall
/
tall4-pc
7
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

feat: "项目详情"

master
xuesinan 4 years ago
parent
ffa87084f1
commit
6dad31d920
5 changed files with 221 additions and 161 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 18
      src/apis/index.js
  2. 254
      src/components/tall/center/ProjectDetail.vue
  3. 58
      src/components/tall/left/Index.vue
  4. 44
      src/components/tall/left/Projects.vue
  5. 8
      src/store/tall/task/index.js

18
src/apis/index.js
View File

@ -5,6 +5,7 @@ import http from 'utils/axios';
const apiUrl = import.meta.env.VITE_API_URL; const apiUrl = import.meta.env.VITE_API_URL;
const users = `${apiUrl}/gateway/tall3/v3.0/users`; const users = `${apiUrl}/gateway/tall3/v3.0/users`;
const tall = `${apiUrl}/gateway/tall3/v3.0`; const tall = `${apiUrl}/gateway/tall3/v3.0`;
const experiment = `${apiUrl}/gateway/experiment`;
// 根据userId 获取token // 根据userId 获取token
// eslint-disable-next-line import/prefer-default-export // eslint-disable-next-line import/prefer-default-export
@ -17,11 +18,22 @@ export const signIn = params => http.post(`${users}/signin`, params);
export const getProjects = (startTime, endTime) => http.post(`${tall}/project/query`, { param: { startTime, endTime } }); export const getProjects = (startTime, endTime) => http.post(`${tall}/project/query`, { param: { startTime, endTime } });
// 根据项目id查找角色 // 根据项目id查找角色
export const findShowRole = param => http.post(`${tall}/role/show`, param); export const findShowRole = projectId => http.post(`${experiment}/role/show`, { param: { projectId } });
// 根据项目id查找所有成员 // 根据项目id查找所有成员
export const queryChecker = param => http.post(`${tall}/deliver/queryChecker`, param); export const queryChecker = param => http.post(`${tall}/deliver/queryChecker`, param);
export const getGlobal = params => http.post(`${tall}/task/global`, params); // 查找带时间的日常任务
export const getGlobal = params => http.post(`${experiment}/task/global`, params);
export const getPermanent = params => http.post(`${tall}/task/permanent`, params); // 查找永久日常任务
export const getPermanent = params => http.post(`${experiment}/task/permanent`, params);
// 查找定期任务
export const getRegularTask = params => http.post(`${experiment}/task/regular`, params);
// 添加任务
export const saveTask = params => http.post(`${experiment}/task/save`, params);
// 查询子任务
export const findSonTask = params => http.post(`${experiment}/task/findSonTask`, params);

254
src/components/tall/center/ProjectDetail.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<div class="navbar flex items-center justify-between"> <div class="navbar flex items-center justify-between">
<div class="project-name">项目名称</div> <div class="project-name">{{ projectObj.obj.pname }}</div>
<div class="project-action"> <div class="project-action">
<img /> <img />
<img @click="toShowMask" /> <img @click="toShowMask" />
@ -8,26 +8,25 @@
</div> </div>
<div class="role-list flex items-center"> <div class="role-list flex items-center">
<div class="role-box relative"> <div class="role-box relative" v-for="(item, index) in roles.arr" :key="index">
<div class="role-name">角色名称</div> <div class="role-name" :class="{ mine: item.mine === 1 && currRoleId === item.id }">{{ item.name }}</div>
<div class="line-box absolute flex justify-center"><div class="line"></div></div> <div class="line-box absolute flex justify-center" v-if="item.mine === 1 && currRoleId === item.id"><div class="line"></div></div>
</div> </div>
</div> </div>
<div class="global"> <div class="global">
<div class="global-box"> <div class="global-box" v-if="permanentObj.permanentList && permanentObj.permanentList.length > 0">
<div class="global-task">任务1</div> <div class="global-task cursor-pointer" v-for="(item, index) in permanentObj.permanentList" :key="index" @click="toDetail(item)">
<div class="global-task">任务1</div> {{ item.name }}
<div class="global-task">任务1</div> </div>
<div class="global-task">任务1</div>
</div> </div>
</div> </div>
<div class="task-list"> <div class="task-list" :style="{ height: 'calc(100vh - 160px - (' + globalHeight + 'px))' }">
<div class="task-box"> <div class="task-box" v-for="(item, index) in taskObj.tasks" :key="index">
<div class="task-time flex items-center justify-between"> <div class="task-time flex items-center justify-between">
<div class="flex items-center"> <div class="flex items-center">
<img /> <img />
<span>10日 09:00</span> <span>{{ dayjs(item.planStart).format('D日 HH:mm') }}</span>
</div> </div>
<div class="task-action"></div> <div class="task-action"></div>
</div> </div>
@ -35,114 +34,150 @@
<div class="task-info"> <div class="task-info">
<div> <div>
<div class="task-card"> <div class="task-card">
<div class="task-name">任务名</div> <div class="task-name cursor-pointer" @click="toDetail(item)">{{ item.name }}</div>
<div class="task-con">
<div> <div class="task-con" v-if="item.sonList && item.sonList.length > 0">
<a-checkbox><span class="child-project-name">子课题负责人1 穿戴式运动捕获单元</span></a-checkbox> <div v-for="(val, key) in item.sonList" :key="key">
</div> <a-checkbox @change="handleChange">{{ val.name }}</a-checkbox>
<div>
<a-checkbox><span class="child-project-name">子课题负责人1 穿戴式运动捕获单元</span></a-checkbox>
</div>
<div>
<a-checkbox><span class="child-project-name">子课题负责人1 穿戴式运动捕获单元</span></a-checkbox>
</div>
<div>
<a-checkbox><span class="child-project-name">子课题负责人1 穿戴式运动捕获单元</span></a-checkbox>
</div>
<div>
<a-checkbox><span class="child-project-name">子课题负责人1 穿戴式运动捕获单元</span></a-checkbox>
</div> </div>
</div> </div>
<div class="open-icon" @click="openCard"> <div class="open-icon" v-if="item.sonList" @click="openCard">
<img /> <img />
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="task-box">
<div class="task-time flex items-center justify-between">
<div class="flex items-center">
<img />
<span>10日 09:00</span>
</div>
<div class="task-action"></div>
</div>
<div class="task-info">
<div>
<div class="task-card">
<div class="task-name">任务名</div>
</div>
</div>
</div>
</div>
</div> </div>
</template> </template>
<script setup> <script setup>
import { computed, watch } from 'vue'; import { computed, watch, reactive, ref } from 'vue';
import { useStore } from 'vuex'; import { useStore } from 'vuex';
// import { findShowRole } from 'apis'; import dayjs from 'dayjs';
import { findShowRole, getRegularTask, findSonTask } from 'apis';
const store = useStore(); const store = useStore();
// const project = ref(0) const projectObj = reactive({ obj: { u: '', p: '', pname: '', url: '' } });
const project = computed(() => store.state.projects.project); const project = computed(() => store.state.projects.project); // 项目信息
watch(project, (newVal, oldVal) => { const currRoleId = computed(() => store.state.role.roleId); // 当前角色
console.log(newVal.p, oldVal.p); const roles = reactive({
// clearTasksData(); // 角色信息
// getGlobalData(); // 查可变日常任务 arr: [
// initPlanTasks(); // 处理定期任务 { id: 1, name: '项目经理', mine: 1, pm: 1, sequence: 1 },
{ id: 2, name: '运维', mine: 0, pm: 0, sequence: 2 },
],
}); });
console.log('project', project.value.p); const permanents = computed(() => store.state.role.permanents); // 日常任务
const permanentObj = reactive({ permanentList: [] });
const tasks = computed(() => store.state.role.tasks); // 定期任务
const taskObj = reactive({ tasks: [] });
const globalHeight = ref(0); // 日常任务面板高度
// 设置 初始显示角色信息 // 设置 初始显示角色信息
// const setInitialRoleId = visibleList => { const setInitialRoleId = visibleList => {
// if (!visibleList || !visibleList.length) return; if (!visibleList || !visibleList.length) return;
// const index = visibleList.findIndex(item => +item.mine === 1);
// const currentRole = index > 0 ? visibleList[index] : visibleList[0]; roles.arr = [];
// // const storageRoleId = uni.getStorageSync('roleId'); visibleList.forEach(item => {
// const currentRoleId = storageRoleId ? storageRoleId : currentRole ? currentRole.id : ''; roles.arr.push(item);
// store.commit('role/setRoleId', currentRoleId); });
// // 清空storage
// // uni.setStorageSync('roleId', ''); const index = visibleList.findIndex(item => +item.mine === 1);
// } const currentRole = index > 0 ? visibleList[index] : visibleList[0];
// const storageRoleId = this.$t.storage.getStorageSync('roleId');
// /** // const currentRoleId = storageRoleId ? storageRoleId : currentRole ? currentRole.id : '';
// * 通过项目id获取角色信息 const currentRoleId = currentRole ? currentRole.id : '';
// * @param {string} projectId currRoleId.value = currentRoleId;
// * @param {object} params 提交的参数 store.commit('role/setRoleId', currentRoleId);
// */ // 清空storage
// const getRoles = async params => { // this.$t.storage.setStorageSync('roleId', '');
// try { };
// let data = await findShowRole(params);
// store.commit('role/setInvisibleRoles', data ? data.invisibleList : []); /**
// store.commit('role/setVisibleRoles', data ? data.visibleList : []); * 通过项目id获取角色信息
// setInitialRoleId(data ? data.visibleList : []); * @param {string} projectId
// } catch (error) { * @param {object} params 提交的参数
// throw new Error(error); */
// } const getRoles = async projectId => {
// } try {
const data = await findShowRole(projectId);
// // 清除已有的任务数据 store.commit('role/setInvisibleRoles', data ? data.invisibleList : []);
// function clearTasksData() { store.commit('role/setVisibleRoles', data ? data.visibleList : []);
// // 清空日常任务的数据 setInitialRoleId(data ? data.visibleList : []);
// // setPermanents([]); } catch (error) {
// // setDailyTasks([]); throw new Error(error);
// // // 清空定期任务数据 }
// // clearTasks(); };
// // 到顶的标志复位
// // 到底的标志复位 // 日常任务
// // clearEndFlag(); const getPermanentData = async roleId => {
// } const params = { param: { roleId } };
try {
// // 获取可变全局任务 const data = await store.dispatch('task/getPermanent', params);
// function getGlobalData() { permanentObj.permanentList = data;
// const { roleId, timeNode, timeUnit, projectId } = this; globalHeight.value = data.length * 38 + 26;
// const param = { roleId, timeNode, timeUnit, projectId }; } catch (error) {
// store.dispatch('task/getGlobal', param); throw new Error(error);
// } }
};
// 根据id获取子任务
const getSonTask = async detailId => {
const params = { param: { detailId } };
try {
const data = await findSonTask(params);
taskObj.tasks.forEach(item => {
if (item.detailId === detailId) {
item.sonList = data;
}
});
} catch (error) {
throw new Error(error);
}
};
/**
* 根据时间基准点和角色查找定期任务
* @param {object} query
* @param {string} query.roleId 角色id
* @param {string} query.timeNode 时间基准点 默认当前
* @param {string} query.timeUnit 时间颗粒度 默认天
* @param {string} query.queryNum 查找颗粒度数量 默认3个
* @param {number} query.queryType 0向上查找 1向下查找(默认) 下查包含自己，上查不包含
*/
const getTasks = async query => {
const params = { param: query };
try {
const data = await getRegularTask(params);
taskObj.tasks = data;
data.forEach(item => {
getSonTask(item.detailId);
});
store.commit('task/setUpTasks', data);
} catch (error) {
throw new Error(error);
}
};
// 监听项目信息
watch(project, async newVal => {
projectObj.obj = newVal;
store.commit('projects/setProject', newVal);
permanentObj.permanentList = permanents.value;
taskObj.tasks = tasks.value;
await getRoles(projectObj.obj.p); // 通过项目id获取角色信息
await getPermanentData(currRoleId.value); // 根据角色查找永久的日常任务
await getTasks({ roleId: currRoleId.value });
});
function toDetail(item) {
store.commit('task/setTaskDetail', item);
}
</script> </script>
<style scoped> <style scoped>
@ -164,12 +199,17 @@ console.log('project', project.value.p);
} }
.role-box { .role-box {
margin-right: 16px;
height: 36px; height: 36px;
} }
.role-name { .role-name {
font-size: 14px; font-size: 14px;
line-height: 36px; line-height: 36px;
color: #333333;
}
.role-name.mine {
font-weight: 600; font-weight: 600;
color: #1890ff; color: #1890ff;
} }
@ -197,10 +237,12 @@ console.log('project', project.value.p);
.global-task { .global-task {
padding: 8px 0; padding: 8px 0;
line-height: 22px;
} }
.task-list { .task-list {
padding: 0 16px; padding: 0 16px 50px;
overflow-y: auto;
} }
.task-box { .task-box {
@ -247,7 +289,11 @@ console.log('project', project.value.p);
height: 30px; height: 30px;
} }
.child-project-name { ::v-deep .ant-checkbox + span {
color: #607d8b; color: #607d8b;
} }
::-webkit-scrollbar {
width: 0 !important;
}
</style> </style>

58
src/components/tall/left/Index.vue
View File

@ -4,47 +4,47 @@
</template> </template>
<script setup> <script setup>
import { reactive } from 'vue'; // import { reactive } from 'vue';
import { useStore } from 'vuex'; // import { useStore } from 'vuex';
import dayjs from 'dayjs'; // import dayjs from 'dayjs';
import { getProjects } from 'apis'; // import { getProjects } from 'apis';
import Calendar from './Calendar.vue'; import Calendar from './Calendar.vue';
import Projects from './Projects.vue'; import Projects from './Projects.vue';
const store = useStore(); // const store = useStore();
const projects = reactive([]); // const projects = reactive([]);
// 获取项目列表 // 获取项目列表
const getProjectsList = async (startTime, endTime) => { // const getProjectsList = async (startTime, endTime) => {
try { // try {
const data = await getProjects(startTime, endTime); // const data = await getProjects(startTime, endTime);
data.forEach(item => { // data.forEach(item => {
item.show = false; // item.show = false;
}); // });
data.forEach(item => { // data.forEach(item => {
item.show = false; // item.show = false;
if (item.sonsonProjectList) { // if (item.sonsonProjectList) {
item.sonsonProjectList.forEach(sonItem => { // item.sonsonProjectList.forEach(sonItem => {
sonItem.show = false; // sonItem.show = false;
}); // });
} // }
projects.push(item); // projects.push(item);
}); // });
store.commit('projects/setProjects', projects); // store.commit('projects/setProjects', projects);
} catch (error) { // } catch (error) {
console.log(error); // console.log(error);
} // }
}; // };
getProjectsList(dayjs().startOf('day').format('x'), dayjs().endOf('day').format('x')); // getProjectsList(dayjs().startOf('day').format('x'), dayjs().endOf('day').format('x'));
function changeTime(data) { function changeTime() {
getProjectsList(data.startTime, data.endTime); // getProjectsList(data.startTime, data.endTime);
} }
</script> </script>

44
src/components/tall/left/Projects.vue
View File

@ -7,7 +7,7 @@
<div class="detail"> <div class="detail">
<div class="name-box flex items-center"> <div class="name-box flex items-center">
<div class="name truncate">{{ item.name }}</div> <div class="name truncate">{{ item.name }}</div>
<div class="precent">50%</div> <div class="precent-num">50%</div>
</div> </div>
<div class="time">{{ dayjs(item.startTime).format('HH:mm:ss') }} 至 {{ dayjs(item.endTime).format('HH:mm:ss') }}</div> <div class="time">{{ dayjs(item.startTime).format('HH:mm:ss') }} 至 {{ dayjs(item.endTime).format('HH:mm:ss') }}</div>
@ -19,14 +19,14 @@
</div> </div>
</div> </div>
<div class="two-box" v-for="(sonItem, sonIndex) in item.sonProjectList" :key="sonIndex"> <div class="two-box">
<div class="two-flex"> <div class="two-flex" v-for="(sonItem, sonIndex) in item.sonProjectList" :key="sonIndex">
<div class="two-level h-70 cursor-pointer flex items-center" @click="toDetail()"> <div class="two-level h-70 cursor-pointer flex items-center" @click="toDetail(sonItem)">
<div class="icon"><img src="https://www.tall.wiki/staticrec/drag.svg" /></div> <div class="icon"><img src="https://www.tall.wiki/staticrec/drag.svg" /></div>
<div class="detail"> <div class="detail">
<div class="name-box flex items-center"> <div class="name-box flex items-center">
<div class="name truncate">{{ sonItem.name }}</div> <div class="name truncate">{{ sonItem.name }}</div>
<div class="precent">50%</div> <div class="precent-num">50%</div>
</div> </div>
<div class="time">{{ dayjs(sonItem.startTime).format('HH:mm:ss') }} 至 {{ dayjs(sonItem.endTime).format('HH:mm:ss') }}</div> <div class="time">{{ dayjs(sonItem.startTime).format('HH:mm:ss') }} 至 {{ dayjs(sonItem.endTime).format('HH:mm:ss') }}</div>
@ -39,15 +39,22 @@
</div> </div>
<div class="three-box"> <div class="three-box">
<div class="three-level h-70 cursor-pointer flex items-center" @click="toDetail()"> <div
class="three-level h-70 cursor-pointer flex items-center"
v-for="(thirdItem, thirdIndex) in sonItem.sonProjectList"
:key="thirdIndex"
@click="toDetail(thirdItem)"
>
<div class="icon"><img src="https://www.tall.wiki/staticrec/drag.svg" /></div> <div class="icon"><img src="https://www.tall.wiki/staticrec/drag.svg" /></div>
<div class="detail"> <div class="detail">
<div class="name-box flex items-center"> <div class="name-box flex items-center">
<div class="name truncate">项目名称</div> <div class="name truncate">{{ thirdItem.name }}</div>
<div class="precent">50%</div> <div class="precent-num">50%</div>
</div> </div>
<div class="time">11-21 00:00 至 11-21 23.59</div> <div class="time">
{{ dayjs(thirdItem.startTime).format('HH:mm:ss') }} 至 {{ dayjs(thirdItem.endTime).format('HH:mm:ss') }}
</div>
</div> </div>
</div> </div>
</div> </div>
@ -66,9 +73,6 @@ import { RightOutlined, DownOutlined } from '@ant-design/icons-vue';
const store = useStore(); const store = useStore();
const projects = reactive([]); const projects = reactive([]);
// const projectList = computed(() => store.state.projects.projects);
// watch( projectList, ( newVal, oldVal ) => { console.log( newVal + ":===" + oldVal ) })
// console.log('projectList', projectList)
// 获取项目列表 // 获取项目列表
const getProjectsList = async (startTime, endTime) => { const getProjectsList = async (startTime, endTime) => {
@ -78,8 +82,8 @@ const getProjectsList = async (startTime, endTime) => {
data.forEach(item => { data.forEach(item => {
item.show = false; item.show = false;
if (item.sonsonProjectList) { if (item.sonProjectList) {
item.sonsonProjectList.forEach(sonItem => { item.sonProjectList.forEach(sonItem => {
sonItem.show = false; sonItem.show = false;
}); });
} }
@ -96,16 +100,6 @@ const getProjectsList = async (startTime, endTime) => {
getProjectsList(dayjs().startOf('day').format('x'), dayjs().endOf('day').format('x')); getProjectsList(dayjs().startOf('day').format('x'), dayjs().endOf('day').format('x'));
function toDetail(project) { function toDetail(project) {
// 打开项目详情
// const { name, id, url } = project;
// url && (uni.$t.domain = url);
// this.$u.route('pages/project-webview/project-webview', {
// u: this.userId,
// p: id,
// pname: name,
// url: encodeURIComponent(url),
// });
const obj = { const obj = {
u: project.userId, u: project.userId,
p: project.id, p: project.id,
@ -174,7 +168,7 @@ export default { name: 'Projects' };
color: #333333; color: #333333;
} }
.precent { .precent-num {
width: 48px; width: 48px;
height: 18px; height: 18px;
line-height: 18px; line-height: 18px;

8
src/store/tall/task/index.js
View File

@ -25,6 +25,7 @@ export default {
showSkeleton: false, // 定期任务骨架屏 showSkeleton: false, // 定期任务骨架屏
newProjectInfo: {}, newProjectInfo: {},
showScrollTo: false, // 是否可以设置时间轴自动滚动的位置 showScrollTo: false, // 是否可以设置时间轴自动滚动的位置
taskDetail: {}, // 当前点击任务信息
}, },
getters: { getters: {
@ -284,6 +285,13 @@ export default {
setShowScrollTo(state, show) { setShowScrollTo(state, show) {
state.showScrollTo = show; state.showScrollTo = show;
}, },
/**
* 设置当前点击的任务信息
*/
setTaskDetail(state, show) {
state.taskDetail = show;
},
}, },
actions: { actions: {

Write Preview
Loading…
Cancel
Save