From eea5a675a03cb0d7f46386894a3a9c0970021d03 Mon Sep 17 00:00:00 2001
From: sakuya <81883387@qq.com>
Date: Sat, 5 Jun 2021 22:27:17 +0800
Subject: [PATCH] Create calendar.vue

---
 src/views/template/calendar.vue | 154 ++++++++++++++++++++++++++++++++
 1 file changed, 154 insertions(+)
 create mode 100644 src/views/template/calendar.vue

diff --git a/src/views/template/calendar.vue b/src/views/template/calendar.vue
new file mode 100644
index 00000000..435c1c72
--- /dev/null
+++ b/src/views/template/calendar.vue
@@ -0,0 +1,154 @@
+<template>
+	<el-container>
+		<el-main class="nopadding">
+			<el-calendar v-model="toDay">
+				<template #dateCell="{data}">
+					<div class="calendar-item">
+						<h2>{{ data.day.split('-')[2] }}</h2>
+						<div v-if="getData(data.day) && data.type=='current-month'" class="calendar-item-info">
+							<p><el-progress :percentage="getData(data.day).plan" :show-text="false"></el-progress></p>
+							<p><el-progress :percentage="getData(data.day).complete" status="success" :show-text="false"></el-progress></p>
+						</div>
+					</div>
+				</template>
+			</el-calendar>
+		</el-main>
+		<el-aside style="width: 400px;border-left: 1px solid #e6e6e6;">
+			<el-container>
+				<el-header>
+					<h2 class="dayTitle"><i class="el-icon-date"></i>{{day}}</h2>
+				</el-header>
+				<el-main>
+					<div class="task-list">
+						<template v-if="dayItem">
+							<el-card shadow="hover" v-for="task in dayItem.tasks" :class="stateMap[task.state]">
+								<h2>{{task.title}}</h2>
+								<div class="task-bottom">
+									<div class="tags">
+										<el-tag type="info" size="mini">#{{task.id}}</el-tag>
+										<el-tag v-if="task.state=='open'" type="info" size="mini">{{task.state}}</el-tag>
+										<el-tag v-if="task.state=='complete'" type="success" size="mini">{{task.state}}</el-tag>
+										<el-tag v-if="task.state=='timeout'" type="danger" size="mini">{{task.state}}</el-tag>
+									</div>
+									<el-avatar :size="20" :src="task.avatar"></el-avatar>
+								</div>
+							</el-card>
+						</template>
+						<template v-else>
+							<el-empty description="无工作任务" :image-size="100"></el-empty>
+						</template>
+					</div>
+				</el-main>
+			</el-container>
+		</el-aside>
+	</el-container>
+</template>
+
+<script>
+	export default {
+		name: 'calendar',
+		data(){
+			return {
+				stateMap: {
+					open: "open",
+					complete: "complete",
+					timeout: "timeout"
+				},
+				toDay: new Date(this.demoDay()),
+				data: {
+					[this.demoDay()]: {
+						plan: 80,
+						complete: 66,
+						tasks: [
+							{
+								id: "3601",
+								title: "vite2 on demand loading popconfirm style missing",
+								avatar: "img/avatar.jpg",
+								state: "complete"
+							},
+							{
+								id: "3602",
+								title: "Switch prevent switching invalid",
+								avatar: "img/avatar.jpg",
+								state: "complete"
+							},
+							{
+								id: "3603",
+								title: "The use of paging in vue3 is inconsistent with the official UI display",
+								avatar: "img/avatar.jpg",
+								state: "timeout"
+							}
+						]
+					},
+					[this.demoDay(1)]: {
+						plan: 80,
+						complete: 0,
+						tasks: [
+							{
+								id: "3604",
+								title: "el-switch @change is auto triggered when page load",
+								avatar: "img/avatar.jpg",
+								state: "open"
+							}
+						]
+					},
+					[this.demoDay(2)]: {
+						plan: 80,
+						complete: 0,
+						tasks: [
+							{
+								id: "3605",
+								title: "locale plugin problem happen in production mode when install element-plus on demand",
+								avatar: "img/avatar.jpg",
+								state: "open"
+							},
+							{
+								id: "3606",
+								title: "table uses fixed=right, which leads to the dislocation of hover style",
+								avatar: "img/avatar.jpg",
+								state: "open"
+							}
+						]
+					}
+				}
+			}
+		},
+		computed: {
+			day(){
+				return this.$TOOL.dateFormat(this.toDay);
+			},
+			dayItem(){
+				return this.getData(this.day)
+			}
+		},
+		methods: {
+			getData(date){
+				return this.data[date]
+			},
+			demoDay(n=0){
+				var curDate = new Date()
+				var oneDayTime = 24*60*60*1000
+				var rDate = new Date(curDate.getTime() + (oneDayTime*n) )
+				return this.$TOOL.dateFormat(rDate);
+			}
+		}
+	}
+</script>
+
+<style scoped>
+	.calendar-item h2 {font-size: 14px;}
+	.calendar-item-info {margin-top: 15px;}
+	.calendar-item-info p {margin-top: 5px;}
+
+	.task-list .el-card {margin-bottom: 15px;border-left: 5px solid #ddd;cursor: pointer;}
+
+	.task-list .el-card.open {border-color: #ddd;}
+	.task-list .el-card.complete {border-color: #67C23A;}
+	.task-list .el-card.timeout {border-color: #f56c6c;}
+
+	.task-list h2 {font-size: 14px;font-weight: normal;}
+	.task-bottom {display: flex;justify-content: space-between;align-items: center;margin-top: 10px;}
+	.task-bottom .tags .el-tag {margin-right: 5px;}
+	.dayTitle {font-size: 14px;}
+	.dayTitle i {color: #999;margin-right: 10px;}
+</style>