wally
/
tall-mui-3-project
forked from ccsens_fe/tall-mui-3
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity
Browse Source

feat: 上传逻辑

develop
wangrongrong 4 years ago
parent
3ff1dc2980 1a8d6bfa28
commit
40e0ecd54c
7 changed files with 178 additions and 124 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. 1
      CHANGELOG.md
  2. 175
      src/components/Calendar/Calendar.vue
  3. 14
      src/components/Calendar/generateDates.js
  4. 43
      src/components/Projects/Projects.vue
  5. 2
      src/components/TimeLine/component/TimeBox.vue
  6. 61
      src/components/TimeLine/component/TimeStatus.vue
  7. 6
      src/pages/index/index.vue

1
CHANGELOG.md
View File

@ -3,6 +3,7 @@
### 🌟 新功能 ### 🌟 新功能
范围|描述|commitId 范围|描述|commitId
--|--|-- --|--|--
- | 上传逻辑变化 | [3ff1dc2](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/3ff1dc2)
plugin | 插件添加了token及param参数 | [aeb0292](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/aeb0292) plugin | 插件添加了token及param参数 | [aeb0292](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/aeb0292)
- | 标题栏变化 | [3898cfe](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/3898cfe) - | 标题栏变化 | [3898cfe](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/3898cfe)
- | 标题栏变化 | [c0fcd9d](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/c0fcd9d) - | 标题栏变化 | [c0fcd9d](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/c0fcd9d)

175
src/components/Calendar/Calendar.vue
View File

@ -3,8 +3,10 @@
<view class="calendar-heander"> <view class="calendar-heander">
{{ timeStr }} {{ timeStr }}
</view> </view>
<!-- 星期几标题 -->
<view class="calendar-weeks"> <view class="calendar-weeks">
<view class="calendar-week" v-for="(week, index) in weeks" :key="index"> <view class="calendar-week" :class="{ 'text-red-500': week === '六' || week === '日' }" v-for="(week, index) in weeks" :key="index">
{{ week }} {{ week }}
</view> </view>
</view> </view>
@ -25,14 +27,13 @@
> >
<swiper-item class="calendar-item" v-for="sitem in swiper" :key="sitem"> <swiper-item class="calendar-item" v-for="sitem in swiper" :key="sitem">
<view class="calendar-days"> <view class="calendar-days">
<!-- 当前的 -->
<template v-if="sitem === current"> <template v-if="sitem === current">
<view <view
class="calendar-day" class="calendar-day"
v-for="(item, index) in days" v-for="(item, index) in days"
:key="index" :key="index"
:class="{ :class="{ 'day-hidden': !item.show }"
'day-hidden': !item.show,
}"
@click="clickItem(item)" @click="clickItem(item)"
> >
<view class="date" :class="[item.isToday ? todayClass : '', item.fullDate === selectedDate ? checkedClass : '']"> <view class="date" :class="[item.isToday ? todayClass : '', item.fullDate === selectedDate ? checkedClass : '']">
@ -42,6 +43,7 @@
</view> </view>
</template> </template>
<template v-else> <template v-else>
<!-- 下一个月/周 -->
<template v-if="current - sitem === 1 || current - sitem === -2"> <template v-if="current - sitem === 1 || current - sitem === -2">
<view <view
class="calendar-day" class="calendar-day"
@ -56,6 +58,7 @@
</view> </view>
</view> </view>
</template> </template>
<!-- 上一个月/周 -->
<template v-else> <template v-else>
<view <view
class="calendar-day" class="calendar-day"
@ -74,14 +77,16 @@
</view> </view>
</swiper-item> </swiper-item>
</swiper> </swiper>
<view class="mode-change" @click="changeMode">
<!-- <view class="mode-change" @click="changeMode">
<view :class="weekMode ? 'mode-arrow-bottom' : 'mode-arrow-top'"> </view> <view :class="weekMode ? 'mode-arrow-bottom' : 'mode-arrow-top'"> </view>
</view> </view> -->
</view> </view>
<view class="back-today" @click="goback" v-if="showBack"> 今日 </view>
<view class="flex justify-center u-font-18" style="color: #3b82f6" @click="goback"> 今日 </view>
</view> </view>
</template> </template>
mb-3
<script> <script>
import { gegerateDates, dateEqual, formatDate } from './generateDates.js'; import { gegerateDates, dateEqual, formatDate } from './generateDates.js';
@ -116,6 +121,7 @@ export default {
}, },
}, },
}, },
watch: { watch: {
dotList: function (newvalue) { dotList: function (newvalue) {
const days = this.days.slice(0); const days = this.days.slice(0);
@ -129,24 +135,42 @@ export default {
console.log(days); console.log(days);
}, },
}, },
data() {
return {
weeks: ['日', '一', '二', '三', '四', '五', '六'], // 周
current: 1,
currentYear: '',
currentMonth: '',
currentDate: '',
days: [],
weekMode: false, // false -> 月 true -> 显示周
swiper: [0, 1, 2],
// dotList: [], // 打点的日期列表
selectedDate: formatDate(new Date(), 'yyyy-MM-dd'), // 当前选中的日期
};
},
computed: { computed: {
sheight() { sheight() {
// 根据年月判断有多少行 // 根据年月判断有多少行
// 判断该月有多少天 // 判断该月有多少天
let h = '70rpx'; let h = '35px';
if (!this.weekMode) { if (!this.weekMode) {
const d = new Date(this.currentYear, this.currentMonth, 0); const d = new Date(this.currentYear, this.currentMonth, 0);
const days = d.getDate(); // 判断本月有多少天 const days = d.getDate(); // 判断本月有多少天
let day = new Date(d.setDate(1)).getDay(); let day = new Date(d.setDate(1)).getDay();
if (day === 0) { // if (day === 0) {
day = 7; // day = 7;
} // }
const pre = 8 - day; const pre = 8 - day;
const rows = Math.ceil((days - pre) / 7) + 1; const rows = Math.ceil((days - pre) / 7) + 1;
h = 70 * rows + 'rpx'; h = 35 * rows + 'px';
} }
return h; return h;
}, },
// 当前日期 年月
timeStr() { timeStr() {
let str = ''; let str = '';
const d = new Date(this.currentYear, this.currentMonth - 1, this.currentDate); const d = new Date(this.currentYear, this.currentMonth - 1, this.currentDate);
@ -155,61 +179,66 @@ export default {
str = `${y}年${m}月`; str = `${y}年${m}月`;
return str; return str;
}, },
// 上一周期的days书籍
predays() { predays() {
let pres = []; let pres = [];
if (this.weekMode) { if (this.weekMode) {
// 周模式
const d = new Date(this.currentYear, this.currentMonth - 1, this.currentDate); const d = new Date(this.currentYear, this.currentMonth - 1, this.currentDate);
d.setDate(d.getDate() - 7); d.setDate(d.getDate() - 7);
pres = gegerateDates(d, 'week'); pres = gegerateDates(d, 'week');
} else { } else {
// 月模式
const d = new Date(this.currentYear, this.currentMonth - 2, 1); const d = new Date(this.currentYear, this.currentMonth - 2, 1);
pres = gegerateDates(d, 'month'); pres = gegerateDates(d, 'month');
} }
return pres; return pres;
}, },
// 下一周期的days书籍
nextdays() { nextdays() {
let nexts = []; let nexts = [];
if (this.weekMode) { if (this.weekMode) {
// 周模式
const d = new Date(this.currentYear, this.currentMonth - 1, this.currentDate); const d = new Date(this.currentYear, this.currentMonth - 1, this.currentDate);
d.setDate(d.getDate() + 7); d.setDate(d.getDate() + 7);
nexts = gegerateDates(d, 'week'); nexts = gegerateDates(d, 'week');
} else { } else {
// 月模式
const d = new Date(this.currentYear, this.currentMonth, 1); const d = new Date(this.currentYear, this.currentMonth, 1);
nexts = gegerateDates(d, 'month'); nexts = gegerateDates(d, 'month');
} }
return nexts; return nexts;
}, },
}, },
data() {
return { created() {
weeks: ['一', '二', '三', '四', '五', '六', '日'], this.initDate();
current: 1,
currentYear: '',
currentMonth: '',
currentDate: '',
days: [],
weekMode: true,
swiper: [0, 1, 2],
// dotList: [], // 打点的日期列表
selectedDate: formatDate(new Date(), 'yyyy-MM-dd'),
};
}, },
methods: { methods: {
//
/**
* 滑动切换上下周期
* 根据前一个减去目前的值我们可以判断是下一个月/周还是上一个月/周
* current - pre === 1, -2 下一个月/周
* current - pre === -1, 2 上一个月或者上一周
*/
changeSwp(e) { changeSwp(e) {
// console.log(e);
const pre = this.current; const pre = this.current;
const current = e.target.current; const current = e.target.current;
/* 根据前一个减去目前的值我们可以判断是下一个月/周还是上一个月/周
*current - pre === 1, -2时是下一个月/周
*current -pre === -1, 2时是上一个月或者上一周
*/
this.current = current; this.current = current;
if (current - pre === 1 || current - pre === -2) { if (current - pre === 1 || current - pre === -2) {
// 下一个月 或 下一周
this.daysNext(); this.daysNext();
} else { } else {
// 上一个月 或 上一周
this.daysPre(); this.daysPre();
} }
}, },
// 初始化日历的方法 // 初始化日历的方法
initDate(cur) { initDate(cur) {
let date = ''; let date = '';
@ -221,7 +250,7 @@ export default {
this.currentDate = date.getDate(); // 今日日期 几号 this.currentDate = date.getDate(); // 今日日期 几号
this.currentYear = date.getFullYear(); // 当前年份 this.currentYear = date.getFullYear(); // 当前年份
this.currentMonth = date.getMonth() + 1; // 当前月份 this.currentMonth = date.getMonth() + 1; // 当前月份
this.currentWeek = date.getDay() === 0 ? 7 : date.getDay(); // 1...6,0 // 星期几 this.currentWeek = date.getDay() === 0 ? 7 : date.getDay(); // 1...6,0 星期几
// const nowY = new Date().getFullYear(); // 当前年份 // const nowY = new Date().getFullYear(); // 当前年份
// const nowM = new Date().getMonth() + 1; // const nowM = new Date().getMonth() + 1;
// const nowD = new Date().getDate(); // 今日日期 几号 // const nowD = new Date().getDate(); // 今日日期 几号
@ -249,7 +278,8 @@ export default {
} }
}); });
this.days = days; this.days = days;
// 派发事件,时间发生改变 console.log(days);
// 派发事件,时间发生改变
let obj = { let obj = {
start: '', start: '',
end: '', end: '',
@ -265,6 +295,7 @@ export default {
} }
this.$emit('days-change', obj); this.$emit('days-change', obj);
}, },
// 上一个 // 上一个
daysPre() { daysPre() {
if (this.weekMode) { if (this.weekMode) {
@ -276,6 +307,7 @@ export default {
this.initDate(d); this.initDate(d);
} }
}, },
// 下一个 // 下一个
daysNext() { daysNext() {
if (this.weekMode) { if (this.weekMode) {
@ -287,6 +319,8 @@ export default {
this.initDate(d); this.initDate(d);
} }
}, },
// 切换模式
changeMode() { changeMode() {
const premode = this.weekMode; const premode = this.weekMode;
let isweek = false; let isweek = false;
@ -302,20 +336,19 @@ export default {
} }
this.initDate(d); this.initDate(d);
}, },
// 点击日期 // 点击日期
clickItem(e) { clickItem(e) {
this.selectedDate = e.fullDate; this.selectedDate = e.fullDate;
this.$emit('selected-change', e); this.$emit('selected-change', e);
}, },
// 返回
goback() { goback() {
const d = new Date(); const d = new Date();
this.initDate(d); this.initDate(d);
}, },
}, },
created() {
this.initDate();
},
mounted() {},
}; };
</script> </script>
@ -323,22 +356,27 @@ export default {
.zzx-calendar { .zzx-calendar {
width: 100%; width: 100%;
height: auto; height: auto;
background-color: #fff;
padding-bottom: 10px;
.calendar-heander { .calendar-heander {
text-align: center; text-align: center;
height: 60upx; padding: 16px 0;
line-height: 60upx;
position: relative; position: relative;
font-size: 30upx; font-size: 15px;
} }
.calendar-weeks { .calendar-weeks {
width: 100%; width: 100%;
display: flex; display: flex;
flex-flow: row nowrap; flex-flow: row nowrap;
height: 60upx; margin-bottom: 10px;
line-height: 60upx;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
font-size: 30upx; font-size: 12px;
color: #9ca3af;
font-weight: bold;
.calendar-week { .calendar-week {
width: calc(100% / 7); width: calc(100% / 7);
height: 100%; height: 100%;
@ -350,10 +388,10 @@ export default {
height: 60upx; height: 60upx;
} }
.calendar-content { .calendar-content {
min-height: 60upx; min-height: 30px;
} }
.calendar-swiper { .calendar-swiper {
min-height: 70upx; min-height: 35px;
transition: height ease-out 0.3s; transition: height ease-out 0.3s;
} }
.calendar-item { .calendar-item {
@ -367,10 +405,11 @@ export default {
width: 100%; width: 100%;
height: 100%; height: 100%;
overflow: hidden; overflow: hidden;
font-size: 28upx; font-size: 14px;
.calendar-day { .calendar-day {
width: calc(100% / 7); width: calc(100% / 7);
height: 70upx; height: 35px;
text-align: center; text-align: center;
display: flex; display: flex;
flex-flow: column nowrap; flex-flow: column nowrap;
@ -382,28 +421,30 @@ export default {
.day-hidden { .day-hidden {
visibility: hidden; visibility: hidden;
} }
.mode-change { .mode-change {
display: flex; display: flex;
justify-content: center; justify-content: center;
margin-top: 10upx; margin-top: 5px;
.mode-arrow-top { .mode-arrow-top {
width: 0; width: 0;
height: 0; height: 0;
border-left: 12upx solid transparent; border-left: 6px solid transparent;
border-right: 12upx solid transparent; border-right: 6px solid transparent;
border-bottom: 10upx solid #ff6633; border-bottom: 5px solid #ff6633;
} }
.mode-arrow-bottom { .mode-arrow-bottom {
width: 0; width: 0;
height: 0; height: 0;
border-left: 12upx solid transparent; border-left: 6px solid transparent;
border-right: 12upx solid transparent; border-right: 6px solid transparent;
border-top: 10upx solid #ff6633; border-top: 5px solid #ff6633;
} }
} }
.is-today { .is-today {
background: #ffffff; background: #ffffff;
// border: 1upx solid #FF6633; border: 1upx solid #ff6633;
border-radius: 50%; border-radius: 50%;
color: #ff6633; color: #ff6633;
} }
@ -412,34 +453,20 @@ export default {
color: #ffffff; color: #ffffff;
} }
.date { .date {
width: 50upx; width: 25px;
height: 50upx; height: 25px;
line-height: 50upx; line-height: 25px;
margin: 0 auto; margin: 0 auto;
border-radius: 50upx; border-radius: 25px;
} }
.dot-show { .dot-show {
width: 8px; width: 8px;
height: 8px; height: 8px;
// background: red; // background: red;
border-radius: 10upx; border-radius: 5px;
position: absolute; position: absolute;
top: 2px; top: 2px;
right: 10px; right: 10px;
} }
.back-today {
// position: absolute;
line-height: 30upx;
font-size: 20px;
top: 15upx;
// border-radius: 15upx 0 0 15upx;
color: #24abf1;
// position: relative;
// left: 39%;
// margin: 5%;
margin-top: 20px;
display: flex;
justify-content: center;
}
} }
</style> </style>

14
src/components/Calendar/generateDates.js
View File

@ -31,10 +31,13 @@ export const formatDate = (date, fmt) => {
const padLeftZero = str => { const padLeftZero = str => {
return ('00' + str).substr(str.length); return ('00' + str).substr(str.length);
}; };
// 判断是不是date对象
export const judgeType = s => { export const judgeType = s => {
// 函数返回数据的具体类型 // 函数返回数据的具体类型
return Object.prototype.toString.call(s).slice(8, -1); return Object.prototype.toString.call(s).slice(8, -1);
}; };
export const equalDate = (d1, d2) => { export const equalDate = (d1, d2) => {
let result = false; let result = false;
if (d1.getFullYear() === d2.getFullYear() && d1.getMonth() === d2.getMonth() && d1.getDate() === d2.getDate()) { if (d1.getFullYear() === d2.getFullYear() && d1.getMonth() === d2.getMonth() && d1.getDate() === d2.getDate()) {
@ -42,6 +45,7 @@ export const equalDate = (d1, d2) => {
} }
return result; return result;
}; };
/* 比较时间,时间格式为2020-04-04 /* 比较时间,时间格式为2020-04-04
*/ */
export const dateEqual = (before, after) => { export const dateEqual = (before, after) => {
@ -63,13 +67,15 @@ export const gegerateDates = (date = new Date(), type = 'week') => {
const d = date.getDate(); const d = date.getDate();
const days = new Date(y, m + 1, 0).getDate(); const days = new Date(y, m + 1, 0).getDate();
// 获取日期是星期几 // 获取日期是星期几
let weekIndex = date.getDay() === 0 ? 7 : date.getDay(); // let weekIndex = date.getDay() === 0 ? 7 : date.getDay();
let weekIndex = date.getDay();
if (type === 'month') { if (type === 'month') {
const dobj = new Date(y, m, 1); const dobj = new Date(y, m, 1);
weekIndex = dobj.getDay() === 0 ? 7 : dobj.getDay(); // weekIndex = dobj.getDay() === 0 ? 7 : dobj.getDay();
weekIndex = dobj.getDay();
} }
if (type === 'week') { if (type === 'week') {
for (let i = weekIndex - 1; i > 0; i--) { for (let i = weekIndex; i > 0; i--) {
const dtemp = new Date(y, m, d); const dtemp = new Date(y, m, d);
dtemp.setDate(dtemp.getDate() - i); dtemp.setDate(dtemp.getDate() - i);
result.push({ result.push({
@ -91,7 +97,7 @@ export const gegerateDates = (date = new Date(), type = 'week') => {
} }
} else if (type === 'month') { } else if (type === 'month') {
// 上个月 // 上个月
for (let i = weekIndex - 1; i > 0; i--) { for (let i = weekIndex; i > 0; i--) {
const dtemp = new Date(y, m, 1); const dtemp = new Date(y, m, 1);
dtemp.setDate(dtemp.getDate() - i); dtemp.setDate(dtemp.getDate() - i);
result.push({ result.push({

43
src/components/Projects/Projects.vue
View File

@ -1,28 +1,26 @@
<template> <template>
<view> <view class="p-3 bg-white">
<view class=""> <view class="flex items-center">
<view class="flex items-center m-2"> <image class="w-8 h-8 ml-1 mr-4 bg-yellow-700 rounded-full" src="../../static/local_play1.png"></image>
<image class="bg-yellow-700 w-8 h-8 rounded-full ml-1 mr-4" src="../../static/local_play1.png"></image> <view class="text-sm font-semibold">我的LWBS</view>
<view class="text-sm font-semibold">我的LWBS</view> </view>
</view> <view class="flex items-center justify-between p-2 task" v-for="(task, index) in tasks" :key="index">
<view class="task flex items-center justify-between p-2" v-for="(task, index) in tasks" :key="index"> <view class="flex items-center">
<view class="flex items-center"> <view class="w-8 h-8 ml-1 mr-2 bg-blue-300 rounded-full">
<view class="bg-blue-300 w-8 h-8 rounded-full ml-1 mr-2"> <view class="flex items-center justify-center w-8 h-8">{{ index + 1 }}</view>
<view class="w-8 h-8 flex items-center justify-center">{{ index + 1 }}</view> </view>
<view>
<view class="flex items-center">
<view class="text-sm font-semibold">{{ task.taskName }}</view>
<view class="pl-2 pr-2 text-green-500 bg-green-200 rounded-full">{{ task.state }}</view>
</view> </view>
<view> <view class="flex items-center text-gray-400">
<view class="flex items-center"> <view class="pr-2">{{ task.time }}</view>
<view class="text-sm font-semibold">{{ task.taskName }}</view> <view>时长：{{ task.duration }}</view>
<view class="rounded-full pl-2 pr-2 bg-green-200 text-green-500">{{ task.state }}</view>
</view>
<view class="flex items-center text-gray-400">
<view class="pr-2">{{ task.time }}</view>
<view>时长：{{ task.duration }}</view>
</view>
</view> </view>
</view> </view>
<u-icon name="arrow-right" size="28"></u-icon>
</view> </view>
<u-icon name="arrow-right" size="28"></u-icon>
</view> </view>
</view> </view>
</template> </template>
@ -83,8 +81,3 @@ export default {
}, },
}; };
</script> </script>
<style lang="scss">
.task {
border-bottom: 1px solid #c0b9b9;
}
</style>

2
src/components/TimeLine/component/TimeBox.vue
View File

@ -2,7 +2,7 @@
<view class="column"> <view class="column">
<view :key="index" v-for="(task, index) in tasks"> <view :key="index" v-for="(task, index) in tasks">
<view class="flex"> <view class="flex">
<TimeStatus :task-name="task.name" :status="task.process" :task-id="task.id" /> <TimeStatus :task="task" />
<view class="flex items-center justify-between flex-1 ml-2 task-column"> <view class="flex items-center justify-between flex-1 ml-2 task-column">
<view>{{ $moment(+task.planStart).format(startTimeFormat) }}</view> <view>{{ $moment(+task.planStart).format(startTimeFormat) }}</view>

61
src/components/TimeLine/component/TimeStatus.vue
View File

@ -1,7 +1,13 @@
<template> <template>
<view class="u-font-14"> <view class="u-font-14">
<view class="flex items-center justify-center rounded-full icon-column" :style="{ color: orderStyle.color }" @tap="changeStatus"> <view class="flex items-center justify-center rounded-full icon-column" :style="{ color: orderStyle.color }" @tap="changeStatus">
<u-circle-progress :percent="100" :active-color="orderStyle.color" bg-color="rgba(255,255,255,0)" border-width="4" width="66"> <u-circle-progress
:percent="orderStyle.persent"
:active-color="orderStyle.color"
bg-color="rgba(255,255,255,0)"
border-width="4"
width="66"
>
<view class="u-progress-content"> <view class="u-progress-content">
<view class="u-progress-dot"></view> <view class="u-progress-dot"></view>
<view class="u-progress-info"> <view class="u-progress-info">
@ -19,16 +25,11 @@ import { mapState, mapMutations } from 'vuex';
export default { export default {
name: 'TimeStatus', name: 'TimeStatus',
props: { props: { task: { type: Object, default: () => {} } },
status: { default: 0, type: Number },
taskName: { default: '', type: String },
taskId: { type: String, default: '' },
},
data() { data() {
return { return {
// status: 3, time: '',
time: 20,
start: [{ text: '确认开始任务', color: 'blue' }], start: [{ text: '确认开始任务', color: 'blue' }],
pause: [{ text: '继续' }, { text: '重新开始任务', color: 'blue' }, { text: '结束' }], pause: [{ text: '继续' }, { text: '重新开始任务', color: 'blue' }, { text: '结束' }],
proceed: [{ text: '暂停' }, { text: '重新开始任务', color: 'blue' }, { text: '结束' }], proceed: [{ text: '暂停' }, { text: '重新开始任务', color: 'blue' }, { text: '结束' }],
@ -38,31 +39,46 @@ export default {
computed: { computed: {
...mapState('task', ['tip']), ...mapState('task', ['tip']),
status() {
return this.task ? this.task.process : 0;
},
taskName() {
return this.task ? this.task.name : '';
},
taskId() {
return this.task ? this.task.id : '';
},
// 图标文本颜色 // 图标文本颜色
// 任务状态 0未开始 1进行中 2暂停中 3已完成 // 任务状态 0未开始 1进行中 2暂停中 3已完成
orderStyle() { orderStyle() {
let color = '#9CA3AF'; let color = '#9CA3AF';
let icon = 'play-right-fill'; let icon = 'play-right-fill';
let persent = 100;
switch (this.status) { switch (this.status) {
case 1: // 进行中 case 1: // 进行中
color = '#60A5FA'; color = '#60A5FA';
icon = ''; icon = '';
persent = this.computeCyclePersent();
console.log('persent: ', persent);
break; break;
case 2: // 暂停中 case 2: // 暂停中
color = '#F87171'; color = '#F87171';
icon = 'pause'; icon = 'pause';
persent = 50; // TODO: 暂时这样 暂停状态没有计算剩余多少时间
break; break;
case 3: // 已结束 case 3: // 已结束
color = '#34D399'; color = '#34D399';
icon = 'checkmark'; icon = 'checkmark';
persent = 100;
break; break;
default: default:
// 未开始 // 未开始
color = '#9CA3AF'; color = '#9CA3AF';
icon = 'play-right'; icon = 'play-right';
persent = 100;
break; break;
} }
return { color, icon }; return { color, icon, persent };
}, },
}, },
@ -73,16 +89,25 @@ export default {
* 点击了图标 修改任务状态 * 点击了图标 修改任务状态
* @param {object} event * @param {object} event
*/ */
changeStatus(event) { changeStatus() {
const { status, taskId, taskName, tip } = this; return false;
tip.status = status; // const { status, taskId, taskName, tip } = this;
tip.taskId = taskId; // tip.status = status;
tip.left = event.target.x; // tip.taskId = taskId;
tip.top = event.target.y; // tip.left = event.target.x;
tip.show = true; // tip.top = event.target.y;
tip.text = this.genetateTips(status, taskName); // tip.show = true;
// tip.text = this.genetateTips(status, taskName);
// this.setTip(tip);
},
this.setTip(tip); // 计算圆环的弧度百分比
computeCyclePersent() {
if (!this.task || !this.task.realStart || !this.task.planDuration) return 100;
const { realStart, planDuration } = this.task;
console.log((((Date.now() - +realStart) * 100) / +planDuration).toFixed(2));
return (((Date.now() - +realStart) * 100) / +planDuration).toFixed(2);
}, },
/** /**

6
src/pages/index/index.vue
View File

@ -1,11 +1,13 @@
<template> <template>
<view> <view class="bg-gray-50">
<Calendar @selected-change="datechange" :showBack="true" :dot-list="dayss"></Calendar> <Calendar @selected-change="datechange" :showBack="true" :dot-list="dayss"></Calendar>
<!-- <button @click="changeList">改变</button> --> <!-- <button @click="changeList">改变</button> -->
<Upload /> <Upload />
<Projects />
<Projects class="mt-3" />
</view> </view>
</template> </template>
<script> <script>
export default { export default {
data() { data() {

Write Preview
Loading…
Cancel
Save