From 716b89768ab6b8a9146bfe2a27d35ca8522ba7b6 Mon Sep 17 00:00:00 2001
From: licp <lichunping@guanfang.com.cn>
Date: 星期三, 17 四月 2024 15:04:14 +0800
Subject: [PATCH] 完成检验审核功能优化
---
src/components/view/index-index.vue | 287 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++-
1 files changed, 282 insertions(+), 5 deletions(-)
diff --git a/src/components/view/index-index.vue b/src/components/view/index-index.vue
index bff6116..57b55ee 100644
--- a/src/components/view/index-index.vue
+++ b/src/components/view/index-index.vue
@@ -10,7 +10,8 @@
background-image: url("../../../static/img/棣栭〉鍥剧墖1.png");
background-size: 100% 100%;
height: 118px;
- margin-bottom: 10px;
+ margin-bottom: 16px;
+ border-radius: 16px;
}
.left-1 .say {
@@ -55,6 +56,7 @@
display: flex;
align-items: center;
justify-content: space-between;
+ margin-bottom: 16px;
}
.right-1-item{
@@ -69,6 +71,155 @@
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>
@@ -83,7 +234,26 @@
</div>
</div>
</div>
- <div class="left-2 card"></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">
@@ -125,8 +295,57 @@
</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">
+ <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>
@@ -139,12 +358,14 @@
return {
user: {},
now: null,
+ calendarValue: new Date(),
+ currentIndex:0,
}
},
mounted() {
this.user = JSON.parse(localStorage.getItem('user'))
this.nowTime()
- this.getDataList()
+ // this.getDataList()
setInterval(() => {
this.nowTime()
}, 1000)
@@ -180,7 +401,63 @@
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>
--
Gitblit v1.9.3