<style scoped>
|
.index {
|
width: 100%;
|
height: calc(100% - 50px);
|
overflow-y: auto;
|
padding: 25px 0;
|
}
|
|
.left-1 {
|
background-image: url("../../../static/img/首页图片1.png");
|
background-size: 100% 100%;
|
height: 118px;
|
margin-bottom: 16px;
|
border-radius: 16px;
|
}
|
|
.left-1 .say {
|
height: 100%;
|
display: flex;
|
align-items: center;
|
margin-left: 15%;
|
width: 45%;
|
}
|
|
.left-1 .say div {
|
color: #fff;
|
margin: 4px 0;
|
}
|
|
.left-1 .say-1 {
|
font-size: 18px;
|
}
|
|
.left-1 .say-2 {
|
font-size: 17px;
|
}
|
|
::-webkit-scrollbar {
|
width: 0px;
|
}
|
|
::-webkit-scrollbar-thumb {
|
background-color: transparent;
|
border-radius: 3px;
|
}
|
|
.card{
|
background: #FFFFFF;
|
border-radius: 16px;
|
width: 100%;
|
box-sizing: border-box;
|
}
|
|
.right-1{
|
padding: 14px 10px 4px;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
margin-bottom: 16px;
|
}
|
|
.right-1-item{
|
width: 25%;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
}
|
|
.right-1-item .mun{
|
margin-left: 6px;
|
color: #0166E2;
|
}
|
|
.right-2{
|
padding: 13px 20px;
|
margin-bottom: 16px;
|
}
|
|
.right-2-title{
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
}
|
|
.right-2-body{
|
width: 100%;
|
margin-top: 20px;
|
display: flex;
|
align-items: start;
|
justify-content: space-between;
|
}
|
>>>.el-calendar__header {
|
display: none;
|
}
|
>>>.el-calendar__body{
|
padding: 0;
|
}
|
>>>.el-calendar-table:not(.is-range) td.next {
|
/*隐藏下个月的日期*/
|
display: none;
|
}
|
>>>.el-calendar-day{
|
height: 40px;
|
}
|
>>>.el-calendar-table td{
|
border: 0;
|
font-size: 14px;
|
}
|
>>>.el-calendar-table tr td:first-child{
|
border-left: 0;
|
}
|
.control{
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
box-sizing: border-box;
|
padding: 0px 0 10px;
|
}
|
.control .el-button{
|
width: 32px;
|
height: 32px;
|
border-radius: 8px;
|
border: 1px solid #E8E8E8;
|
background: #fff;
|
padding: 0;
|
color: #0166E2;
|
font-size: 20px;
|
}
|
.list2-item{
|
line-height: 22px;
|
display: flex;
|
margin-bottom: 13px;
|
font-size: 14px;
|
}
|
.right-3{
|
}
|
.right-3-tab{
|
display: flex;
|
align-items: center;
|
margin-bottom: 16px;
|
}
|
.tab-item{
|
width: 50%;
|
box-sizing: border-box;
|
text-align: center;
|
padding: 16px 0;
|
font-size: 20px;
|
background: #F5F7FB;
|
color: #333333;
|
}
|
.tab-item.active{
|
background: #fff;
|
color: #FF3838;
|
}
|
.right-3-list{
|
padding: 0 12px 16px;
|
}
|
.list3-item{
|
padding: 6px 4px;
|
margin: 8px 0;
|
}
|
.list3-item:hover{
|
background: rgba(58, 123, 250,0.05);
|
}
|
.list3-item-title{
|
display: flex;
|
align-items: start;
|
margin-bottom: 10px;
|
}
|
.list3-item-info{
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
color: #666666;
|
font-size: 14px;
|
}
|
.left-2{
|
display: flex;
|
align-items: flex-start;
|
margin-bottom: 16px;
|
}
|
.left-2-item{
|
width: 14.1%;
|
border-right: 1px solid #F1F1F1;
|
}
|
.left-2-item:nth-last-child(1){
|
border-right: 0;
|
}
|
.left-2-item:hover{
|
background: rgba(58,123,250,0.05);
|
}
|
.left-2-item:hover .left-item-title span{
|
color: #3A7BFA !important;
|
}
|
.left-item-title{
|
border-bottom: 1px solid #F1F1F1;
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
justify-content: center;
|
padding: 20px 0;
|
}
|
.left-item-body{
|
box-sizing: border-box;
|
padding: 5px;
|
max-height: 711px;
|
overflow-y: auto;
|
}
|
.body-item{
|
background: #70A090;
|
border-radius: 16px;
|
overflow: hidden;
|
margin-bottom: 8px;
|
}
|
.body-item>div{
|
height: calc(100% - 16px);
|
margin-top: 16px;
|
background: rgba(255, 255, 255,0.9);
|
padding: 8px 8px 16px;
|
display: flex;
|
flex-direction: column;
|
}
|
</style>
|
|
<template>
|
<div class="index">
|
<el-row :gutter="25">
|
<el-col :xs="24" :sm="24" :md="14" :lg="14" :xl="14">
|
<div class="left-1">
|
<div class="say">
|
<div style="display: flex;align-items: center;flex-wrap: wrap;">
|
<div class="say-1">{{user.name}} 您好！祝您开心每一天</div>
|
<div class="say-2">当前时间： {{now}}</div>
|
</div>
|
</div>
|
</div>
|
<div class="left-2 card">
|
<div class="left-2-item" v-for="(item,index) in 7" :key="index">
|
<div class="left-item-title">
|
<span style="font-size: 18px;">25</span>
|
<span style="font-size: 14px;color: #999999;">星期四</span>
|
</div>
|
<div class="left-item-body">
|
<div class="body-item" v-for="(m,i) in 8" :key="i">
|
<div>
|
<span style="font-size: 12px;margin-bottom: 17px;">委托订单WT20230101 -001检测</span>
|
<el-image style="height: 24px;width: 24px;border-radius: 50%;">
|
<div slot="error" class="image-slot">
|
<i class="el-icon-picture-outline"></i>
|
</div>
|
</el-image>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</el-col>
|
<el-col :xs="24" :sm="24" :md="10" :lg="10" :xl="10">
|
<div class="right-1 card">
|
<div class="right-1-item">
|
<div class="img">
|
<img src="../../../static/img/index-0.svg" alt="">
|
</div>
|
<div class="mun">
|
<p style="font-size: 20px;">254</p>
|
<p style="font-size: 14px;margin-bottom: 10px;">我的代办</p>
|
</div>
|
</div>
|
<div class="right-1-item">
|
<div class="img">
|
<img src="../../../static/img/index-1.svg" alt="">
|
</div>
|
<div class="mun">
|
<p style="font-size: 20px;">254</p>
|
<p style="font-size: 14px;margin-bottom: 10px;">已办事宜</p>
|
</div>
|
</div>
|
<div class="right-1-item">
|
<div class="img">
|
<img src="../../../static/img/index-2.svg" alt="">
|
</div>
|
<div class="mun">
|
<p style="font-size: 20px;">254</p>
|
<p style="font-size: 14px;margin-bottom: 10px;">剩余待办</p>
|
</div>
|
</div>
|
<div class="right-1-item">
|
<div class="img">
|
<img src="../../../static/img/index-3.svg" alt="">
|
</div>
|
<div class="mun">
|
<p style="font-size: 20px;">254</p>
|
<p style="font-size: 14px;margin-bottom: 10px;">近期事宜</p>
|
</div>
|
</div>
|
</div>
|
<div class="right-2 card">
|
<div class="right-2-title">
|
<span style="color: #333333;font-size: 16px;">我的日程</span>
|
<span style="cursor: pointer;font-size: 12px;
|
color: #3A7BFA;">添加我的日程</span>
|
</div>
|
<div class="right-2-body">
|
<div class="calendar" style="width: 49%;">
|
<div class="control">
|
<el-button class="prevm" @click="prevMonth(calendarValue)" icon="el-icon-arrow-left"></el-button>
|
<span>{{ calendarValue.getFullYear()+'年'+(calendarValue.getMonth() + 1)+'月' }}</span>
|
<el-button class="nextm" @click="nextMonth(calendarValue)" icon="el-icon-arrow-right"></el-button>
|
</div>
|
<el-calendar v-model="calendarValue">
|
<template
|
slot="dateCell"
|
slot-scope="{date, data}">
|
<span>
|
{{ data.day.split('-').slice(2)+'' }}
|
</span>
|
<el-badge v-if="data.isSelected" is-dot class="item">
|
</el-badge>
|
</template>
|
</el-calendar>
|
</div>
|
<div class="right-2-list" style="width: 49%;">
|
<div class="list2-item" v-for="(m,i) in 5" :key="i">
|
<span>14:00</span>
|
<el-tooltip style="margin-left: 10px;" effect="dark" content="参加LIMS系统培训会议，并签上线上线上线上线上线上线" placement="top">
|
<p class="ellipsis-multiline" >参加LIMS系统培训会议，并签上线上线上线上线上线上线</p>
|
</el-tooltip>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="right-3 card" style="overflow: hidden;">
|
<div class="right-3-tab">
|
<div class="tab-item" style="cursor: pointer;" :class="{active:currentIndex==0}" @click="currentIndex=0">预警提醒 10</div>
|
<div class="tab-item" style="cursor: pointer;" :class="{active:currentIndex==1}" @click="currentIndex=1">通知通告 12</div>
|
</div>
|
<div class="right-3-list">
|
<div class="list3-item" v-for="(m,i) in 5" :key="i">
|
<div class="list3-item-title">
|
<img src="../../../static/img/index-tip.svg" alt="">
|
<p>设备到期提醒</p>
|
</div>
|
<div class="list3-item-info">
|
<p>编号<span style="color:#3A7BFA;"> SB20240101-001 </span>的设备将于2023-09-09 11:11:11过期</p>
|
<p>2023-09-09 09:09:09</p>
|
</div>
|
</div>
|
</div>
|
</div>
|
</el-col>
|
</el-row>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
data() {
|
return {
|
user: {},
|
now: null,
|
calendarValue: new Date(),
|
currentIndex:0,
|
}
|
},
|
mounted() {
|
this.user = JSON.parse(localStorage.getItem('user'))
|
this.nowTime()
|
// this.getDataList()
|
setInterval(() => {
|
this.nowTime()
|
}, 1000)
|
},
|
methods: {
|
nowTime() {
|
var date = new Date();
|
var y = date.getFullYear();
|
var m = date.getMonth() + 1;
|
var d = date.getDate();
|
var h = date.getHours();
|
this.timeH = h
|
var min = date.getMinutes();
|
var s = date.getSeconds();
|
if (s < 10) {
|
s = "0" + s;
|
}
|
if (min < 10) {
|
min = "0" + min;
|
}
|
if (h < 10) {
|
h = "0" + h;
|
}
|
if (d < 10) {
|
d = "0" + d;
|
}
|
if (m < 10) {
|
m = "0" + m;
|
}
|
this.now = y + "-" + m + "-" + d + " " + h + ":" + min + ":" + s;
|
},
|
getDataList() {
|
this.$axios.get(this.$api.dataReporting.getDataList).then(res => {
|
this.data = res.data
|
})
|
},
|
nextMonth(value) {
|
let year = this.calendarValue.getFullYear();// 当前年份
|
let month = this.calendarValue.getMonth() + 1;// 当前月份
|
let day = this.calendarValue.getDate();// 当前天数
|
let nextyear = year;
|
let nextmonth = parseInt(month) + 1;
|
// 判断下一月是否会进入下一年
|
if (nextmonth === 13) {
|
nextyear = parseInt(year) + 1;
|
nextmonth = 1;
|
}
|
// 计算下一年下一个月有多少天
|
let nextday = new Date(nextyear, nextmonth, 0);
|
let nextdays = nextday.getDate();
|
if (day > nextdays) {
|
day = nextdays;
|
if (day < 10) {
|
day = '0' + day;
|
}
|
}
|
if (nextmonth < 10) {
|
nextmonth = '0' + nextmonth;
|
}
|
let nexttime = nextyear + '-' + nextmonth + '-' + day;
|
|
// 将得到的年月日格式转换为标准时间，与饿了么时间格式相同才能联动
|
this.calendarValue = new Date(nexttime);
|
},
|
prevMonth(time) {
|
let year = this.calendarValue.getFullYear();// 当前年份
|
let month = this.calendarValue.getMonth() + 1;// 当前月份
|
let day = this.calendarValue.getDate();// 当前天数
|
let prevyear = year;
|
let prevmonth = parseInt(month) - 1;
|
// 判断上一月是否会进入上一年
|
if (prevmonth === 0) {
|
prevyear = parseInt(year) - 1;
|
prevmonth = 12;
|
}
|
// 计算上一年上一个月有多少天
|
let prevday = new Date(prevyear, prevmonth, 0);
|
let prevdays = prevday.getDate();
|
if (day > prevdays) {
|
day = prevdays;
|
if (day < 10) {
|
day = '0' + day;
|
}
|
}
|
if (prevmonth < 10) {
|
prevmonth = '0' + prevmonth;
|
}
|
let prevtime = prevyear + '-' + prevmonth + '-' + day;
|
|
// 将得到的年月日格式转换为标准时间，与饿了么时间格式相同才能联动
|
this.calendarValue = new Date(prevtime);
|
},
|
}
|
}
|
</script>
|
