|
|
@@ -1,77 +1,61 @@
|
|
|
<template>
|
|
|
<div class="tasks">
|
|
|
- <div class="tasks-top">
|
|
|
- <el-calendar v-model="date" />
|
|
|
- <div class="tasks-top-notification">
|
|
|
- <div class="tasks-top-notification-title">
|
|
|
- <div>
|
|
|
- <svg-icon icon-class="task-notification" />
|
|
|
- <span class="title">任务通知</span>
|
|
|
- </div>
|
|
|
- <div>
|
|
|
- <i class="el-icon-arrow-right" @click="goPersonal" />
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="tasks-top-notification-container">
|
|
|
- <ul>
|
|
|
- <li v-for="item in message_list" :key="item.id" @click="readMyMessage(item.id, item.source_entity_id)">
|
|
|
- <span class="send_time">{{ item.send_time }}</span>
|
|
|
- <span class="content">{{ item.content }}</span>
|
|
|
- </li>
|
|
|
- </ul>
|
|
|
- </div>
|
|
|
+ <div class="tasks-left">
|
|
|
+ <!-- 菜单 -->
|
|
|
+ <div class="menu">
|
|
|
+ <span v-for="{ tab, name } in menuList" :key="tab" :class="['menu-item', tab === 'TaskList' ? 'active' : '']">
|
|
|
+ {{ name }}
|
|
|
+ </span>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- <div class="tasks-container">
|
|
|
- <div class="tasks-container-title">
|
|
|
- <div class="tasks-container-title-left">
|
|
|
- <svg-icon icon-class="clock" />
|
|
|
- <span class="title">时间轴</span>
|
|
|
- <span class="date">{{ dateTime }}</span>
|
|
|
- <i class="el-icon-arrow-left" @click="dateSkip(-1)" />
|
|
|
- <i class="el-icon-arrow-right" @click="dateSkip(1)" />
|
|
|
- </div>
|
|
|
- <div>
|
|
|
- <!-- <el-select v-model="selected"></el-select> -->
|
|
|
+ <!-- 日历 -->
|
|
|
+ <div class="calendar" />
|
|
|
+ <!-- 通知 -->
|
|
|
+ <div class="notice">
|
|
|
+ <div class="notice-title">
|
|
|
+ <svg-icon icon-class="task-notification" />
|
|
|
+ <span>通知</span>
|
|
|
+ <span class="notice-title-link">全部 <i class="el-icon-arrow-right" /></span>
|
|
|
</div>
|
|
|
+ <div class="notice-container" />
|
|
|
</div>
|
|
|
- <div class="tasks-container-main">
|
|
|
- <div v-for="(item, i) in task_group_list" :key="i" class="tasks-group">
|
|
|
- <div class="tasks-group-top">
|
|
|
- <span class="tasks-group-top-time">{{ item.begin_time_view_text }}</span>
|
|
|
- <span class="tasks-group-top-line" />
|
|
|
- </div>
|
|
|
- <div class="tasks-group-list">
|
|
|
- <div v-for="list in item.task_list" :key="list.id" class="tasks-group-list-info">
|
|
|
- <div class="tasks-group-list-info-name">
|
|
|
- <span @click="taskLink_outside(list.id)"> {{ timeType(list.time_type) }}任务：{{ list.name }} </span>
|
|
|
- <el-link class="task-link" :underline="false" @click.stop="taskLink(list.teaching_type, list.id)">
|
|
|
- {{ teachingType(list.teaching_type) }}
|
|
|
- </el-link>
|
|
|
- </div>
|
|
|
- <div class="tasks-group-list-info-item-name">{{ list.course_name }} - {{ list.cs_item_name }}</div>
|
|
|
- <div class="tasks-group-list-info-time">{{ list.time_space_view_txt }}</div>
|
|
|
- <div />
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ </div>
|
|
|
+ <div class="tasks-right">
|
|
|
+ <div class="task-title">
|
|
|
+ <svg-icon icon-class="task-list" /><span class="task-title-name">任务列表</span>
|
|
|
+ <div class="curricula-type">
|
|
|
+ <span
|
|
|
+ v-for="{ constant, name } in taskTimeList"
|
|
|
+ :key="constant"
|
|
|
+ :class="['curricula-type-item', curTaskTime === constant ? 'active' : '']"
|
|
|
+ >
|
|
|
+ {{ name }}
|
|
|
+ </span>
|
|
|
</div>
|
|
|
+ <el-select />
|
|
|
</div>
|
|
|
+ <div />
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import { GetMyDayTaskList, PageQueryMyMessageList } from '@/api/table';
|
|
|
+import { GetMyDayTaskList, PageQueryMyMessageList, GetMyTaskList } from '@/api/table';
|
|
|
import { CreateEnterLiveRoomSession } from '@/api/live';
|
|
|
import { parseTime, formatDate } from '@/utils';
|
|
|
import { ReadMyMessage } from '@/api/user';
|
|
|
+import { colorMatching, getMenuList } from './data';
|
|
|
+import { taskTimeList } from '@/common/data';
|
|
|
|
|
|
export default {
|
|
|
name: 'TaskList',
|
|
|
data() {
|
|
|
return {
|
|
|
+ colorMatching,
|
|
|
+ taskTimeList,
|
|
|
date: new Date(),
|
|
|
selected: '',
|
|
|
+ curTaskTime: -1,
|
|
|
+ menuList: getMenuList(),
|
|
|
task_group_list: [],
|
|
|
message_list: []
|
|
|
};
|
|
|
@@ -95,6 +79,9 @@ export default {
|
|
|
}).then(({ message_list }) => {
|
|
|
this.message_list = message_list;
|
|
|
});
|
|
|
+ GetMyTaskList({
|
|
|
+ time_type: this.time_type
|
|
|
+ });
|
|
|
},
|
|
|
mounted() {
|
|
|
this.getTaskList();
|
|
|
@@ -170,182 +157,119 @@ export default {
|
|
|
|
|
|
<style lang="scss">
|
|
|
.tasks {
|
|
|
- &-top {
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
+ display: flex;
|
|
|
|
|
|
- .el-calendar {
|
|
|
- width: 334px;
|
|
|
- height: 300px;
|
|
|
+ &-left {
|
|
|
+ width: 392px;
|
|
|
+ margin-right: 16px;
|
|
|
|
|
|
- &__header .el-button {
|
|
|
- padding: 7px 10px;
|
|
|
- }
|
|
|
-
|
|
|
- &-table div.el-calendar-day {
|
|
|
- height: 29px;
|
|
|
- }
|
|
|
-
|
|
|
- &__body {
|
|
|
- thead th {
|
|
|
- padding: 0 0 4px;
|
|
|
+ .menu {
|
|
|
+ display: flex;
|
|
|
+ height: 56px;
|
|
|
+ font-size: 20px;
|
|
|
+ font-weight: 500;
|
|
|
+ line-height: 56px;
|
|
|
+ text-align: center;
|
|
|
+ background-color: #ebebeb;
|
|
|
+ border: 1px solid $border-color;
|
|
|
+ border-radius: 8px;
|
|
|
+
|
|
|
+ &-item {
|
|
|
+ flex: 1;
|
|
|
+ color: rgba(0, 0, 0, 45%);
|
|
|
+ cursor: pointer;
|
|
|
+ border-radius: 8px;
|
|
|
+
|
|
|
+ &.active {
|
|
|
+ color: #000;
|
|
|
+ background-color: #fff;
|
|
|
+ box-shadow: 0 2px 4px $border-color;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- // 任务通知
|
|
|
- &-notification {
|
|
|
- flex: 1;
|
|
|
- height: 300px;
|
|
|
- padding: 20px 24px;
|
|
|
- margin-left: 16px;
|
|
|
- overflow: hidden;
|
|
|
+ .calendar {
|
|
|
+ height: 498px;
|
|
|
+ padding: 32px;
|
|
|
+ margin: 16px 0;
|
|
|
background-color: #fff;
|
|
|
+ border-radius: 8px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .notice {
|
|
|
+ height: calc(100vh - 705px);
|
|
|
+ padding: 32px;
|
|
|
+ background: #fff;
|
|
|
+ border-radius: 8px;
|
|
|
|
|
|
&-title {
|
|
|
display: flex;
|
|
|
+ align-items: center;
|
|
|
justify-content: space-between;
|
|
|
- font-size: 20px;
|
|
|
- font-weight: 700;
|
|
|
|
|
|
- .title {
|
|
|
- display: inline-block;
|
|
|
- margin-left: 10px;
|
|
|
+ .svg-icon {
|
|
|
+ width: 24px;
|
|
|
+ height: 24px;
|
|
|
}
|
|
|
|
|
|
- .el-icon-arrow-right {
|
|
|
- cursor: pointer;
|
|
|
+ > span:first-of-type {
|
|
|
+ flex: 1;
|
|
|
+ padding-left: 16px;
|
|
|
}
|
|
|
- }
|
|
|
-
|
|
|
- &-container {
|
|
|
- height: 210px;
|
|
|
- margin-top: 24px;
|
|
|
- overflow-y: auto;
|
|
|
-
|
|
|
- ul {
|
|
|
- li {
|
|
|
- display: flex;
|
|
|
- font-size: 14px;
|
|
|
- line-height: 1.3;
|
|
|
-
|
|
|
- .send_time {
|
|
|
- width: 150px;
|
|
|
- min-width: 150px;
|
|
|
- color: #767676;
|
|
|
- }
|
|
|
-
|
|
|
- .content {
|
|
|
- color: $color;
|
|
|
- cursor: pointer;
|
|
|
- }
|
|
|
- }
|
|
|
|
|
|
- li:not(:first-child) {
|
|
|
- margin-top: 16px;
|
|
|
- }
|
|
|
+ &-link {
|
|
|
+ color: #bababa;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- &-container {
|
|
|
- width: 100%;
|
|
|
- min-height: calc(100vh - 522px);
|
|
|
- margin-top: 16px;
|
|
|
+ &-right {
|
|
|
+ width: 802px;
|
|
|
+ padding: 16px 24px;
|
|
|
background-color: #fff;
|
|
|
border-radius: 8px;
|
|
|
|
|
|
- &-title {
|
|
|
+ .task-title {
|
|
|
display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- padding: 16px;
|
|
|
-
|
|
|
- &-left {
|
|
|
- line-height: 40px;
|
|
|
-
|
|
|
- .title {
|
|
|
- margin-left: 8px;
|
|
|
- }
|
|
|
-
|
|
|
- .date {
|
|
|
- margin-left: 24px;
|
|
|
- color: #a6a6a6;
|
|
|
- vertical-align: middle;
|
|
|
- }
|
|
|
-
|
|
|
- .el-icon-arrow-right {
|
|
|
- cursor: pointer;
|
|
|
- }
|
|
|
+ align-items: center;
|
|
|
+ padding-bottom: 16px;
|
|
|
+ border-bottom: 1px solid #d9d9d9;
|
|
|
|
|
|
- .el-icon-arrow-left {
|
|
|
- margin: 0 26px 0 33px;
|
|
|
- cursor: pointer;
|
|
|
- }
|
|
|
+ &-name {
|
|
|
+ margin-left: 8px;
|
|
|
+ font-weight: 600;
|
|
|
}
|
|
|
- }
|
|
|
|
|
|
- &-main {
|
|
|
- margin: 0 24px 8px 40px;
|
|
|
-
|
|
|
- .tasks-group {
|
|
|
- margin-top: 8px;
|
|
|
-
|
|
|
- &-top {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: space-between;
|
|
|
-
|
|
|
- &-time {
|
|
|
- color: #808080;
|
|
|
- }
|
|
|
-
|
|
|
- &-line {
|
|
|
- width: calc(100% - 78px);
|
|
|
- height: 1px;
|
|
|
- background-color: #d9d9d9;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- &-list {
|
|
|
- margin-left: 78px;
|
|
|
+ .curricula-type {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ height: 40px;
|
|
|
+ margin: 0 16px;
|
|
|
+ color: #8c8c8c;
|
|
|
+ background-color: #f5f5f5;
|
|
|
+ border: 1px solid $border-color;
|
|
|
+ border-radius: 8px;
|
|
|
+
|
|
|
+ &-item {
|
|
|
+ height: 100%;
|
|
|
+ padding: 8px;
|
|
|
+ line-height: 26px;
|
|
|
+ cursor: pointer;
|
|
|
|
|
|
- &-info {
|
|
|
- display: inline-block;
|
|
|
- padding: 16px 24px;
|
|
|
- margin: 10px 15px 10px 0;
|
|
|
- background-color: #fff4e3;
|
|
|
- border: 1px solid #ccc;
|
|
|
+ &.active {
|
|
|
+ color: #000;
|
|
|
+ background-color: #fff;
|
|
|
border-radius: 8px;
|
|
|
-
|
|
|
- > div {
|
|
|
- margin: 8px 0;
|
|
|
- }
|
|
|
-
|
|
|
- &-name {
|
|
|
- > span {
|
|
|
- cursor: pointer;
|
|
|
- }
|
|
|
-
|
|
|
- .task-link {
|
|
|
- margin-left: 8px;
|
|
|
- font-size: 16px;
|
|
|
- color: $basic-color;
|
|
|
- vertical-align: top;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- &-item-name {
|
|
|
- font-size: 14px;
|
|
|
- color: #727280;
|
|
|
- }
|
|
|
-
|
|
|
- &-time {
|
|
|
- font-size: 14px;
|
|
|
- }
|
|
|
+ box-shadow: 0 2px 4px $border-color;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
+ .el-select {}
|
|
|
+ }
|
|
|
+
|
|
|
+ .task-container {
|
|
|
}
|
|
|
}
|
|
|
}
|
