365 lines
12 KiB
Vue
365 lines
12 KiB
Vue
<template>
|
|
<div class="week">
|
|
<div class="head">
|
|
<div @click="zhou--">
|
|
<img src="../../static/images/left.png" alt="" />
|
|
上一周
|
|
</div>
|
|
{{week.year}}年{{week.yue}}月
|
|
<a-button type="primary" class="button" @click="navto('/regime/date')"> 月日历 </a-button>
|
|
<div @click="zhou++">
|
|
下一周
|
|
<img src="../../static/images/right.png" alt="" />
|
|
</div>
|
|
</div>
|
|
<div class="week">
|
|
<div class="heads">
|
|
<div></div>
|
|
<div :class="{ zhou: zhou == 0 && week.zhou == 1 }">
|
|
周一<span>{{ week.date[0].day }}</span>
|
|
</div>
|
|
<div :class="{ zhou: zhou == 0 && week.zhou == 2 }">
|
|
周二<span>{{ week.date[1].day }}</span>
|
|
</div>
|
|
<div :class="{ zhou: zhou == 0 && week.zhou == 3 }">
|
|
周三<span>{{ week.date[2].day }}</span>
|
|
</div>
|
|
<div :class="{ zhou: zhou == 0 && week.zhou == 4 }">
|
|
周四<span>{{ week.date[3].day }}</span>
|
|
</div>
|
|
<div :class="{ zhou: zhou == 0 && week.zhou == 5 }">
|
|
周五<span>{{ week.date[4].day }}</span>
|
|
</div>
|
|
<div :class="{ zhou: zhou == 0 && week.zhou == 6 }">
|
|
周六<span>{{ week.date[5].day }}</span>
|
|
</div>
|
|
<div :class="{ zhou: zhou == 0 && week.zhou == 0 }">
|
|
周日<span>{{ week.date[6].day }}</span>
|
|
</div>
|
|
</div>
|
|
<div class="body">
|
|
<div class="row" v-for="item in 24" :key="item">
|
|
<div class="day date" :style="{'background-color': item - 1 == xs ? '#0DBBA4' : '', 'color': item - 1 == xs ? '#fff' : ''}">
|
|
{{ item > 9 ? item - 1 : "0" + (item - 1) }}:00-{{
|
|
item > 9 ? item : "0" + item
|
|
}}:00
|
|
</div>
|
|
<div v-for="i in 7" :key="i" >
|
|
<div class="day">
|
|
<div :class="zhuangtai(week.date[i -1].list[item - 1].zhuangtai)" v-if="week.date[i -1].list[item - 1].title != ''" :style="{'top': (week.date[i -1].list[item - 1].start / 60 * 0.63) + 'rem', 'min-height': (week.date[i -1].list[item - 1].num / 60 * 0.63) + 'rem' }" @click="tolive(week.date[i -1].list[item - 1])">
|
|
<div class="one-line-hide" style="max-width: 1.5rem">
|
|
{{week.date[i -1].list[item - 1].title}}
|
|
</div>
|
|
<div>{{week.date[i -1].list[item - 1].time}}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="lien" :style="{'top': top + 'rem'}">
|
|
<div class="heng">
|
|
<div class="dian"></div>
|
|
<div class="xian"></div>
|
|
</div>
|
|
<div class="times">{{times}}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<style lang="scss" scoped>
|
|
.week {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
|
|
.head {
|
|
width: 1320px;
|
|
height: 57px;
|
|
background-color: #fff;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: relative;
|
|
> div {
|
|
display: flex;
|
|
align-items: center;
|
|
cursor: pointer;
|
|
font-size: 13px;
|
|
color: #0dbba4;
|
|
> img {
|
|
width: 7px;
|
|
height: 11px;
|
|
}
|
|
}
|
|
> div:first-child {
|
|
margin-right: 90px;
|
|
> img {
|
|
margin-right: 11px;
|
|
}
|
|
}
|
|
> div:last-child {
|
|
margin-left: 90px;
|
|
|
|
> img {
|
|
margin-left: 11px;
|
|
}
|
|
}
|
|
.button {
|
|
width: 57px;
|
|
height: 26px;
|
|
background-color: #0dbba4;
|
|
border-right: 4px;
|
|
border: none;
|
|
font-size: 10px;
|
|
color: #fff;
|
|
padding: 0;
|
|
position: absolute;
|
|
right: 40px;
|
|
}
|
|
}
|
|
.week {
|
|
.heads {
|
|
width: 1320px;
|
|
height: 63px;
|
|
display: flex;
|
|
position: sticky;
|
|
top: -23px;
|
|
z-index: 1000;
|
|
> div {
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: #f5fefd;
|
|
text-align: center;
|
|
line-height: 1;
|
|
font-size: 13px;
|
|
color: #08ae98;
|
|
border-right: 1px solid #eee;
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
> span {
|
|
font-size: 11px;
|
|
margin-top: 9px;
|
|
color: #111;
|
|
}
|
|
}
|
|
.zhou {
|
|
color: #fff;
|
|
background: #08ae98;
|
|
> span {
|
|
color: #fff;
|
|
}
|
|
}
|
|
}
|
|
.body {
|
|
width: 100%;
|
|
overflow: hidden;
|
|
position: relative;
|
|
.row {
|
|
background-color: #fff;
|
|
height: 63px;
|
|
width: 100%;
|
|
display: flex;
|
|
.date {
|
|
background-color: #f5fefd;
|
|
text-align: center;
|
|
line-height: 63px;
|
|
font-size: 11px;
|
|
color: #111;
|
|
}
|
|
> div {
|
|
width: 100%;
|
|
border-top: 1px solid #eee;
|
|
border-right: 1px solid #eee;
|
|
.day {
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
color: #111;
|
|
position: relative;
|
|
> div {
|
|
position: absolute;
|
|
min-height: 100%;
|
|
width: 100%;
|
|
border-radius: 6px;
|
|
overflow: hidden;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 11px;
|
|
border-radius: 6px;
|
|
z-index: 999;
|
|
overflow: hidden;
|
|
> div:last-child {
|
|
font-size: 11px;
|
|
margin-top: 8px;
|
|
}
|
|
}
|
|
.old {
|
|
background-color: #f7f7f7;
|
|
color: #111;
|
|
|
|
}
|
|
.ing {
|
|
background-color: #0dbba4;
|
|
color: #fff;
|
|
}
|
|
.next {
|
|
background-color: #cef9f0;
|
|
color: #0dbba4;
|
|
}
|
|
}
|
|
}
|
|
> div::last-child {
|
|
border: unset;
|
|
}
|
|
}
|
|
.lien{
|
|
width: 100%;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 128px;
|
|
.heng{
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.dian{
|
|
width: 6px;
|
|
height: 6px;
|
|
flex-shrink: 0;
|
|
background-color: #FFFA18;
|
|
border-radius: 50%;
|
|
}
|
|
.xian{
|
|
width: 100%;
|
|
height: 2px;
|
|
background: linear-gradient(90deg, #FFFA18, #D0EB3D, #87E062, #42DE9D, #00DAC2);
|
|
}
|
|
}
|
|
.times{
|
|
font-size: 11px;
|
|
color: #D12C2E;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
<script lang="ts">
|
|
import { computed, defineComponent, ref, watch } from "vue";
|
|
import { getDay, gethour, getminute, gettime, getweek } from "@/utils/date";
|
|
import store from '@/store';
|
|
import { getdatelist, userinfo } from '@/api';
|
|
import router from '@/router';
|
|
import dayjs from 'dayjs';
|
|
import { useRoute } from 'vue-router';
|
|
|
|
export default defineComponent({
|
|
props: {},
|
|
setup() {
|
|
const userinfo = computed(()=>store.state.userinfo)
|
|
const zhou = ref(0);
|
|
const time: any = useRoute().query.time;
|
|
let userid = userinfo.value.memberid;
|
|
const week = ref<any>(getweek(time, userinfo.value.zoneValue));
|
|
|
|
function getdates(userid: number){
|
|
getdatelist(week.value.start, week.value.end, userid).then((res: any)=>{
|
|
console.log(res)
|
|
for(const i in res){
|
|
const day = getDay(res[i].dateline)
|
|
console.log(day)
|
|
for(const j in week.value.date){
|
|
console.log(getDay(week.value.date[j].day))
|
|
if(day == getDay(week.value.date[j].day)){
|
|
console.log("fuzhi")
|
|
week.value.date[j].list[gethour(res[i].dateline)].start = getminute(res[i].dateline);
|
|
week.value.date[j].list[gethour(res[i].dateline)].num = res[i].livetime
|
|
week.value.date[j].list[gethour(res[i].dateline)].title = res[i].title
|
|
week.value.date[j].list[gethour(res[i].dateline)].time = gettime(res[i].dateline, res[i].livetime)
|
|
week.value.date[j].list[gethour(res[i].dateline)].zhuangtai = res[i].livestatus
|
|
week.value.date[j].list[gethour(res[i].dateline)].zid = res[i].liveid
|
|
}
|
|
}
|
|
}
|
|
console.log(week.value)
|
|
})
|
|
}
|
|
watch(userinfo,()=>{
|
|
userid = userinfo.value.memberid;
|
|
getdates(userid);
|
|
week.value = getweek(time, userinfo.value.zoneValue);
|
|
})
|
|
console.log(week.value);
|
|
|
|
|
|
getdates(userid);
|
|
|
|
const top = ref(0);
|
|
const times = ref('');
|
|
const xs = ref(0);
|
|
setInterval(()=>{
|
|
/* eslint-disable */
|
|
const utc = require('dayjs/plugin/utc') // dependent on utc plugin
|
|
/* eslint-disable */
|
|
const timezone = require('dayjs/plugin/timezone')
|
|
dayjs.extend(utc)
|
|
dayjs.extend(timezone)
|
|
const days: any = dayjs;
|
|
const now = days().tz(userinfo.value.zoneValue)
|
|
const xiaoshi = now.hour()
|
|
const fenzhong = now.minute()
|
|
top.value = (xiaoshi + (fenzhong / 60)) * 0.63;
|
|
times.value = (xiaoshi > 10 ? xiaoshi : '0' + xiaoshi) + ":" + (fenzhong > 10 ? fenzhong : '0' + fenzhong);
|
|
xs.value = xiaoshi;
|
|
}, 2000)
|
|
|
|
watch(zhou, (value) => {
|
|
week.value = getweek(time, userinfo.value.zoneValue, value);
|
|
console.log(week.value);
|
|
getdates(userid)
|
|
});
|
|
|
|
function zhuangtai(index: number){
|
|
switch (index) {
|
|
case 0:
|
|
return 'next'
|
|
case 1:
|
|
return 'ing'
|
|
case 2:
|
|
return 'old'
|
|
default:
|
|
return 'old'
|
|
}
|
|
}
|
|
function navto(url: string){
|
|
router.push(url)
|
|
}
|
|
function tolive(data: any){
|
|
let url = '';
|
|
console.log(data)
|
|
if(data.zhuangtai != 1){
|
|
url = '/regime/livedetail?id=' + data.zid
|
|
}else{
|
|
url = '/regime/liveing?id=' + data.zid
|
|
}
|
|
console.log(url)
|
|
router.push(url)
|
|
}
|
|
|
|
return {
|
|
zhou,
|
|
week,
|
|
navto,
|
|
zhuangtai,
|
|
top,
|
|
times,
|
|
xs,
|
|
tolive
|
|
};
|
|
},
|
|
});
|
|
</script> |