<!--
|
* @Author: lzhe lzhe@example.com
|
* @Date: 2024-04-16 15:22:46
|
* @LastEditors: lzhe lzhe@example.com
|
* @LastEditTime: 2024-06-20 23:18:04
|
* @FilePath: /CPSnew/smart-web/src/views/home/widgets/components/mdcDeviceStatus.vue
|
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
|
-->
|
<template>
|
<el-card shadow="hover" header="日历" style="height: 100%;" class="weather">
|
<div>
|
<div class="weater-img">
|
<img src="./weather.png" alt="">
|
</div>
|
<div class="weater-bottom">
|
<div style="margin: 29px 20px 23px;">
|
<span style="font-weight: bold; font-size: 26px; text-align: left; color: rgb(51, 51, 51);">{{newMonth}}</span>
|
<span style="font-weight: bold;font-size: 16px;">月 {{nowYears}} 年</span>
|
<div style="text-align: right; float: right; line-height: 35px; margin-right: 15px;">
|
<el-tag type="danger" style="font-size: 16px; width: 123px; height: 38px; font-weight: 400; display: flex; justify-content: center; align-items: center;">
|
<el-icon style="font-size: 60px;margin-right: 12px;vertical-align: middle;font-weight: bold;"><Sunrise /></el-icon>
|
<span>{{ time }}</span>
|
</el-tag>
|
</div>
|
</div>
|
<div style="padding: 0 20px;">
|
<div class="date-title">
|
<div v-for="item in dateTitle">{{item}}</div>
|
</div>
|
<div class="date-list">
|
<div v-for="item in dateList" :style="{color: item.color,background: item.background}">{{item.num}}</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</el-card>
|
</template>
|
|
<script>
|
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
|
let icons = []
|
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
|
icons.push(key)
|
}
|
import moment from 'moment'
|
export default {
|
title: "日历",
|
icon: "el-icon-data-line",
|
description: "每日天气预报、日历、时间快速查看",
|
data() {
|
return {
|
time: '',
|
newMonth: "",
|
nowYears: "",
|
dateTitle: ['一','二','三','四','五','六','日'],
|
dateList: []
|
}
|
},
|
components: {...ElementPlusIconsVue},
|
mounted() {
|
this.getDateList();
|
this.showTime()
|
setInterval(()=>{
|
this.showTime()
|
},1000)
|
},
|
methods: {
|
showTime(){
|
this.time = this.$TOOL.dateFormat(new Date(), 'hh:mm:ss')
|
this.day = this.$TOOL.dateFormat(new Date(), 'yyyy年MM月dd日')
|
},
|
getDateList() {
|
var now = moment();
|
var date = now.date(); //当前是几号
|
this.newMonth = now.month() + 1; //当前月份
|
this.nowYears = now.year(); //当前天数
|
|
var monthStart = moment(this.nowYears + "-" + this.newMonth + "-01"); //当前月
|
var daysInMonth = monthStart.daysInMonth(); //当前月份的天数
|
|
var lastMonth = now.subtract(1, 'months'); //前一个月
|
var lastMonthFormatted = lastMonth.format('YYYY-MM'); //前一个月格式化
|
var monthEnd = moment(lastMonthFormatted + "-01"); //前一个月
|
var daysEndMonth = monthEnd.daysInMonth(); //前一个月份的天数
|
|
var arr = [];
|
for(var i=daysEndMonth-(35-daysEndMonth);i<=daysEndMonth;i++) {
|
arr.push({
|
num: i,
|
color: '#c0c4cc',
|
background: '#fff'
|
})
|
}
|
for(var i=1;i<=daysInMonth;i++) {
|
if(i == date) {
|
arr.push({
|
num: i,
|
color: '#fff',
|
background: '#3b8e8e'
|
})
|
}else {
|
arr.push({
|
num: i,
|
color: '#000',
|
background: '#fff'
|
})
|
}
|
}
|
this.dateList = arr;
|
},
|
goPage(item) {
|
|
}
|
}
|
}
|
</script>
|
<style scoped>
|
.weather /deep/ .el-card__body {
|
padding: 12px 12px 6px;
|
}
|
.weater-img {
|
width: 100%;
|
align-items: center;
|
}
|
.weater-img img {
|
height: 91px;
|
width: 100%;
|
}
|
.weater-bottom {
|
height: 100%;
|
display: flex;
|
flex-direction: column;
|
flex-wrap: nowrap;
|
}
|
.date-list {
|
display: flex;
|
flex-wrap: wrap;
|
}
|
.date-title {
|
display: flex;
|
}
|
.date-title div {
|
flex: 1;
|
height: 39px;
|
font-weight: 700;
|
font-size: 14px;
|
color: #3b8e8e;
|
text-align: center;
|
}
|
.date-list div {
|
flex: 0 0 14.2857%;
|
height: 39px;
|
font-weight: 700;
|
font-size: 14px;
|
text-align: center;
|
line-height: 39px;
|
cursor: pointer;
|
}
|
.date-list div:hover {
|
background-color: #f2f8fe;
|
}
|
</style>
|