From 94b485ac5b56304e46ef7beb3ad89cf62eadcd57 Mon Sep 17 00:00:00 2001
From: licp <lichunping@guanfang.com.cn>
Date: 星期三, 17 四月 2024 17:26:25 +0800
Subject: [PATCH] 优化检验任务
---
src/components/view/index-index.vue | 352 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 347 insertions(+), 5 deletions(-)
diff --git a/src/components/view/index-index.vue b/src/components/view/index-index.vue
index bff6116..4743c4e 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{
@@ -68,6 +70,167 @@
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;
+ }
+ .search_thing {
+ height: 50px;
+ margin-bottom: 26px;
+ }
+
+ .search_label {
+ width: 120px;
+ font-size: 14px;
+ text-align: left;
+ margin-bottom: 10px;
+ }
</style>
@@ -83,7 +246,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,11 +307,90 @@
</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;" @click="dialogVisible=true">娣诲姞鎴戠殑鏃ョ▼</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>
+ <el-dialog title="鏃ョ▼娣诲姞" :visible.sync="dialogVisible" width="400px">
+ <div class="body" style="max-height: 60vh;">
+ <el-row>
+ <el-col class="search_thing" :span="22">
+ <div class="search_label">鏃堕棿锛�</div>
+ <div class="search_input">
+ <el-date-picker
+ v-model="query.time"
+ type="datetime"
+ placeholder="閫夋嫨鏃ユ湡鏃堕棿"
+ size="small"
+ style="width:100%">
+ </el-date-picker>
+ </div>
+ </el-col>
+ <el-col class="search_thing" :span="22">
+ <div class="search_label">鍐呭锛�</div>
+ <div class="search_input">
+ <el-input v-model="query.content" size="small" placeholder="璇疯緭鍏ュ唴瀹�"></el-input>
+ </div>
+ </el-col>
+ </el-row>
+ </div>
+ <span slot="footer" class="dialog-footer">
+ <el-row>
+ <el-button @click="handleCancel">鍙� 娑�</el-button>
+ <el-button type="primary" @click="submit" :loading="loading">纭� 瀹�</el-button>
+ </el-row>
+ </span>
+ </el-dialog>
</div>
</template>
@@ -139,12 +400,20 @@
return {
user: {},
now: null,
+ calendarValue: new Date(),
+ currentIndex:0,
+ dialogVisible:false,
+ query:{
+ time:'',
+ content:''
+ },
+ loading:false
}
},
mounted() {
this.user = JSON.parse(localStorage.getItem('user'))
this.nowTime()
- this.getDataList()
+ // this.getDataList()
setInterval(() => {
this.nowTime()
}, 1000)
@@ -180,7 +449,80 @@
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);
+ },
+ handleCancel(){
+ this.dialogVisible = false;
+ this.query = {
+ time:'',
+ content:''
+ }
+ },
+ submit(){
+ if(!this.query.time){
+ this.$message.error('鏃堕棿鏈～鍐�')
+ return
+ }
+ if(!this.query.content){
+ this.$message.error('鍐呭鏈～鍐�')
+ return
+ }
+ }
}
}
</script>
--
Gitblit v1.9.3