<template>
<div class="">
<div class="calendarTraffic" name="CalendarTraffic">
<!-- 年份/月份 流量查詢-->
<div class="monthHeader">
<!--綁定click事件，點擊按鈕；重新刷新當前日期-->
<button class="lf oprButton oprButton-bg ml5"
@click="pickPre(currentYear, currentMonth)">❮上月</button>
<span class="lf oprButton title-data">{{ nowFullYear }}/{{ nowMonth }}/{{ nowDay }}</span>
<button class="lf oprButton oprButton-bg"
@click="pickNext(currentYear,currentMonth)">下月❯</button>
<button class="lf oprButton oprButton-bg ml5"
@click="pickToday(currentYear,currentMonth)">今天</button>
<button class="rt oprButton oprButton-bg mr10">流量查詢</button>
</div>
<!-- 日歷 -->
<div class="calendar-list calendar-date">
<!-- 星期 -->
<ul class="calendar-weekadys clearfix">
<li class="weekadys-item">一</li>
<li class="weekadys-item">二</li>
<li class="weekadys-item">三</li>
<li class="weekadys-item">四</li>
<li class="weekadys-item">五</li>
<li class="weekadys-item">六</li>
<li class="weekadys-item">日</li>
</ul>
<!-- 日期 -->
<ul class="calendar-days clearfix">
<!-- 核心 v-for循環 每一次循環用<li>標簽創建一天 -->
<li class="daysList" v-for="(dayobject,inedx) in days" :key="dayobject.id">
<!--本月-->
<!--如果不是本月 改變類名加灰色-->
<div class="daysList-cont daysList-invalid"
v-if="dayobject.day.getMonth()+1 != currentMonth">
<div class="daysList-mid">
<p class="daysList-item"> {{ dayobject.day.getDate() }}</p>
<p class="daysList-item">{{ dayobject.parccent}}</p>
</div>
</div>
<!-- 如果是本月 判斷是不是該月第一天-->
<div class="daysList-cont daysList-normal"
:class="{active:inedx==number}"
v-else-if="dayobject.day.getFullYear() == currentYear && //當前年份
((dayobject.day.getMonth()+1 == currentMonth &&//本月且不是系統月份
dayobject.day.getMonth() != new Date().getMonth())&&
dayobject.day.getDate() == currentDay)||
(dayobject.day.getMonth() == new Date().getMonth() &&//當前系統時間
dayobject.day.getDate() ==new Date().getDate())"
@click="pickDays(currentYear,currentMonth,dayobject.day.getDate(),inedx)">
<div class="daysList-mid">
<p class="daysList-item">{{ dayobject.day.getDate() }}</p>
<p class="daysList-item">{{ dayobject.parccent}}</p>
</div>
</div>
<!-- 如果是本月-->
<div class="daysList-cont daysList-normal" v-else
:class="{active:inedx==number}"
@click="pickDays(currentYear,currentMonth,dayobject.day.getDate(),inedx)">
<div class="daysList-mid">
<p class="daysList-item">{{ dayobject.day.getDate() }}</p>
<p class="daysList-item">{{ dayobject.parccent}}</p>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</template>
<script>
export default {
name: "CalendarTraffic",
data(){
return{
number:0,//active樣式索引
currentDay: 1,//當前日
currentMonth: 1,//當前月份
currentYear: 1970,//當前年份
currentWeek: 1,//前星期X
nowFullYear:1970,//中間顯示當前年
nowMonth:1,//中間顯示當前月
nowDay:1,//中間顯示當前日
days: []
}
},
created() {
//在vue初始化時調用
this.initData(null);
},
methods: {
initData(cur) {
let date;
if (cur) {
date = new Date(cur);
} else {
const now = new Date();
const d = new Date(this.formatDate(now.getFullYear(), now.getMonth(), 1));
d.setDate(35);
date = new Date(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1));
}
// 初始化年月日
this.currentDay = date.getDate();
this.currentYear = date.getFullYear();
this.currentMonth = date.getMonth() + 1;
this.nowDay = new Date().getDate();
this.nowFullYear = date.getFullYear();
this.nowMonth = date.getMonth() + 1;
this.currentWeek = date.getDay(); //獲取當前星期X(0-6,0代表星期天)
if (this.currentWeek == 0) {
this.currentWeek = 7;
}
const str = this.formatDate(
this.currentYear,
this.currentMonth,
this.currentDay,
);
this.days.length = 0;
// 例今天是周五，放在第一行第5個位置，前面4個上個月的
//初始化本周
for (let i = this.currentWeek - 1; i >= 0; i--) {
const d = new Date(str);
d.setDate(d.getDate() - i);
const dayobject = {}; //用一個對象包裝Date對象 以便為以后預定功能添加屬性
dayobject.day = d;
dayobject.parccent = '100%';
this.days.push(dayobject);//將日期放入data 中的days數組 供頁面渲染使用
}
//this.nowDay-1（今天幾號索引）this.currentWeek-1（當月第一天周幾索引）
//得到今天的索引值 初始化active樣式
this.number=this.nowDay+this.currentWeek-2;
//列表顯示的天數6*7減去前星期X
for (let i = 1; i <= 42 - this.currentWeek; i++) {
const d = new Date(str);
d.setDate(d.getDate() + i);
const dayobject = {};
dayobject.day = d;
dayobject.parccent = '100%';
this.days.push(dayobject);
}
//console.log(this.days)
},
//上個月
pickPre(year, month) {
// setDate(0); 上月最后一天
// setDate(-1); 上月倒數第二天
// setDate(dx) 參數dx為 上月最后一天的前后dx天
const d = new Date(this.formatDate(year, month, 1));
d.setDate(0);
this.initData(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1));
this.nowDay=1;
this.number=this.currentWeek-1;//active樣式
},
//下個月
pickNext(year, month) {
const d = new Date(this.formatDate(year, month, 1));
d.setDate(35);
this.initData(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1));
this.nowDay=1;
// console.log(this.currentWeek)
this.number=this.currentWeek-1;//active樣式
// console.log(this.number)
//console.log(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1))
},
//今天
pickToday(year, month) {
const d = new Date();
this.initData(this.formatDate(d.getFullYear(), d.getMonth()+1, 1));
//this.number=this.currentWeek-1;//active樣式
//console.log(this.formatDate(d.getFullYear(), d.getMonth()+1, d.getDate()))
},
pickYear(year, month) {
//alert(year + "," + month);
},
//當前日歷時間點擊
pickDays(year, month,clickCurrentDay,index){
const d = new Date();
const day=clickCurrentDay;
//active樣式的更改
this.number=index;
// 年月日更改
this.nowFullYear= year;
this.nowMonth= month;
this.nowDay= clickCurrentDay;
// console.log(year,month,clickCurrentDay);
},
// 格式化日期
formatDate(year, month, day) {
let y = year;
let m = month;
if (m < 10) m = "0" + m;
let d = day;
if (d < 10) d = "0" + d;
return y + "/" + m + "/" + d;
}
}
};
</script>
<style lang="scss" scoped>
@import '../../../common/css/common.scss';
//定義基本長度
$line10:10px;
$lf:left;
$rt:right;
$color-fff:#ffffff;
//按鈕背景顏色
$button-bg:#314D68;
//正文顏色
$text-color:#B8C9DA;
//hover藍色
$table-deepBlue:#0c8ceb;
$table-blue:#289cf4;
//失效顏色
$invalid-color:#2F3F53;
$item-color:#B8C9DA;
$item-invalid-color:#77899c;
//字體居中
$text-center:center;
button {
outline: none;
border: none;
}
ul li{
list-style: none;
}
.lf{
float: $lf;
}
.rt{
float: $rt;
}
.topWrap{
height: $line10*33.5;
}
//清楚浮動
.clearfix {
zoom: 1;
}
.clearfix:after {
content: '';
display: block;
height: 0;
font-size: 0;
clear: both;
overflow: hidden;
}
//日歷表頭按鈕
.calendarTraffic{
width: 100%;
height: 100%;
}
//日歷表頭
.monthHeader{
height:$line10*3.6;
padding-top: $line10*0.6;
//按鈕樣式
.oprButton{
height: $line10*2.5;
padding: 0 $line10;
border-radius:$line10/2;
color: $color-fff;
line-height: $line10*2.5;
cursor: pointer;
}
.oprButton-bg{
background-color: $button-bg
}
.title-data{
text-align: $text-center;
width: $line10*10;
}
.ml5{
margin-left: $line10/2;
}
.mr10{
margin-right: $line10;
}
}
//日歷
.calendar-list{
color:$text-color;
//日歷星期頭
.calendar-weekadys{
width: 100%;
}
.calendar-weekadys .weekadys-item{
height: $line10*2.4;
line-height: $line10*2.4;
}
.calendar-weekadys .weekadys-item,
.calendar-days .daysList{
width: 14%;
float: $lf;
text-align: $text-center;
color:$text-color;
margin-right: $line10*0.1;
}
.calendar-days .daysList{
cursor: pointer;
height: $line10*4.5;
color: $item-color;
.daysList-cont{
width: 100%;
float: $lf;
}
}
.calendar-days .daysList-normal .daysList-item:nth-child(2n){
color: $item-invalid-color;
}
.calendar-days .daysList-normal .daysList-item:nth-child(2n+1){
color: $item-color;
}
.calendar-days .daysList-mid{
height: $line10*3.4;
margin: $line10*0.4;
}
.calendar-days .daysList-cont.daysList-normal:hover,
.daysList-normal.active{
border-radius:$line10/2;
background-color: $table-deepBlue;
}
.calendar-days .daysList-cont.daysList-normal:hover .daysList-mid,
.daysList-normal.active .daysList-mid{
background-color: $table-blue;
}
.calendar-days .daysList-cont.daysList-normal:hover p,
.daysList-normal.active p{
color: $color-fff !important;
}
.daysList-item{
height: $line10*1.6;
}
// 上個月或者下個月
.daysList-invalid{
background-color: $invalid-color;
border-radius:$line10/2;
}
.daysList-invalid .daysList-item{
color:$item-invalid-color;
}
}
</style>