From 7aa0dadef89ed8edd25c527bcb164f3fe5960c59 Mon Sep 17 00:00:00 2001
From: zss <zss@example.com>
Date: 星期三, 08 五月 2024 14:56:49 +0800
Subject: [PATCH] 工单的工作站修改
---
src/page/wel.vue | 315 ++++++++++++++++++++++++++++++++--------------------
1 files changed, 192 insertions(+), 123 deletions(-)
diff --git a/src/page/wel.vue b/src/page/wel.vue
index c682e79..03cdf33 100644
--- a/src/page/wel.vue
+++ b/src/page/wel.vue
@@ -2,96 +2,126 @@
<div class="dashboard-main">
<div class="body">
<el-row>
- <el-col :span="12">
+ <el-col :xs="24" :sm="14" :md="14" :lg="14">
<p class="todo-title"><i class="el-icon-bell"></i><span> 鐢熶骇璋冨害 路 寰呭姙</span></p>
- </el-col>
- </el-row>
- <el-row>
- <el-col :span="6">
- <el-card class="box-card todo-card">
- <ul class="type-box">
- <li v-for="(m,i) in tabList" :key="i" :class="{active:current == i}" @click="changeTab(m,i)">{{ m }}</li>
- </ul>
- <el-collapse v-model="activeName" accordion class="todo-collapse" style="display: none;">
- <el-collapse-item name="1">
- <template slot="title">
- <span class="title">浠婃棩寰呭姙</span>
- <el-badge v-if="todoByDayList.length>0" :value="todoByDayList.length" class="item"></el-badge>
- </template>
- <el-table :data="todoByDayList">
- <el-table-column label="搴忓彿" align="center" type="index" width="50"></el-table-column>
- <el-table-column prop="product_type" label="浜у搧绫诲瀷" align="center" min-width="50"></el-table-column>
- <el-table-column prop="total" label="寰呭姙鏁伴噺" align="center" min-width="50"></el-table-column>
- </el-table>
- </el-collapse-item>
- <el-collapse-item name="2">
- <template slot="title">
- <span class="title">鏈懆寰呭姙</span>
- <el-badge v-if="todoByWeekList.length>0" :value="todoByWeekList.length" class="item"></el-badge>
- </template>
- <el-table :data="todoByWeekList">
- <el-table-column label="搴忓彿" align="center" type="index" width="50"></el-table-column>
- <el-table-column prop="product_type" label="浜у搧绫诲瀷" align="center" min-width="50"></el-table-column>
- <el-table-column prop="total" label="寰呭姙鏁伴噺" align="center" min-width="50"></el-table-column>
- </el-table>
- </el-collapse-item>
- <el-collapse-item name="3">
- <template slot="title">
- <span class="title">鏈湀寰呭姙</span>
- <el-badge v-if="todoByMonthList.length>0" :value="todoByMonthList.length" class="item"></el-badge>
- </template>
- <el-table :data="todoByMonthList">
- <el-table-column label="搴忓彿" align="center" type="index" width="50"></el-table-column>
- <el-table-column prop="product_type" label="浜у搧绫诲瀷" align="center" min-width="50"></el-table-column>
- <el-table-column prop="total" label="寰呭姙鏁伴噺" align="center" min-width="50"></el-table-column>
- </el-table>
- </el-collapse-item>
- <el-collapse-item name="4">
- <template slot="title">
- <span class="title" style="color:red;">瓒呮湡</span>
- <el-badge :value="100" :max="99" class="item"></el-badge>
- </template>
-
- </el-collapse-item>
- </el-collapse>
- <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 class="todo-span"><span>寰呭姙</span></div>
- <div class="todo-info" v-for="(item,index) in todoList" :key="index" v-show="todoList.length>0">
- <div class="todo-info-state"></div>
- <span>{{ item }}</span>
- </div>
- <span class="no-info" v-if="todoList.length==0">鏆傛棤</span>
- </el-card>
- </el-col>
- <el-col :span="6">
- <el-card class="box-card todo-total-card">
- <div class="todo-total-text">
+ <div style="display: flex;
+ align-items: center;
+ justify-content: space-between;margin-bottom: 16px;">
+ <div class="todo-item todo-item">
+ <div class="todo-item-left">
<span>浠婃棩寰呭姙</span>
- <span v-text="todoInfo.todoByDay"></span>
+ <span style="font-size: 20px;font-weight: 500;color: #0166E2;">{{ todoInfo.todoByDay }}</span>
</div>
- <div class="todo-total-text">
+ <img src="../assets/daliy-0.svg" alt="">
+ </div>
+ <div class="todo-item todo-item">
+ <div class="todo-item-left">
<span>鏈懆寰呭姙</span>
- <span v-text="todoInfo.todoByWeek"></span>
+ <span style="font-size: 20px;font-weight: 500;color: #0166E2;">{{ todoInfo.todoByWeek }}</span>
</div>
- <div class="todo-total-text">
+ <img src="../assets/daliy-1.svg" alt="">
+ </div>
+ <div class="todo-item todo-item">
+ <div class="todo-item-left">
<span>鏈湀寰呭姙</span>
- <span v-text="todoInfo.todoByMonth"></span>
+ <span style="font-size: 20px;font-weight: 500;color: #0166E2;">{{ todoInfo.todoByMonth }}</span>
</div>
- <div class="todo-total-text">
+ <img src="../assets/daliy-2.svg" alt="">
+ </div>
+ <div class="todo-item todo-item">
+ <div class="todo-item-left">
<span>瓒呮湡</span>
- <span v-text="todoInfo.outByTime"></span>
+ <span style="font-size: 20px;font-weight: 500;color:red;">{{ todoInfo.outByTime }}</span>
</div>
+ <svg xmlns="http://www.w3.org/2000/svg" width="61" height="61" viewBox="0 0 61 61" fill="none">
+ <path opacity="0.21" d="M0.871094 23.209C0.871094 10.5064 11.1685 0.208984 23.8711 0.208984H37.8711C50.5736 0.208984 60.8711 10.5064 60.8711 23.209V37.209C60.8711 49.9115 50.5736 60.209 37.8711 60.209H23.8711C11.1685 60.209 0.871094 49.9115 0.871094 37.209V23.209Z" fill="red"/>
+ <path opacity="0.78" fill-rule="evenodd" clip-rule="evenodd" d="M29.503 24.8742C29.523 24.6138 29.7402 24.4126 30.0015 24.4126H30.4193C30.6762 24.4126 30.8913 24.6072 30.9169 24.8628L31.5385 31.0793L35.9532 33.602C36.109 33.691 36.2052 33.8567 36.2052 34.0361V34.4246C36.2052 34.7543 35.8917 34.9938 35.5736 34.907L29.2705 33.188C29.0391 33.1249 28.8851 32.9064 28.9035 32.6673L29.503 24.8742Z" fill="red"/>
+ <path opacity="0.901274" fill-rule="evenodd" clip-rule="evenodd" d="M23.5928 16.0498C23.3287 15.735 22.8188 15.8555 22.7235 16.2552L21.09 23.1033C21.0123 23.4289 21.2704 23.7374 21.6046 23.7185L28.6494 23.3193C29.0603 23.296 29.2687 22.814 29.0041 22.4987L27.2027 20.3519C28.3676 19.9538 29.6028 19.7459 30.8711 19.7459C37.1303 19.7459 42.2044 24.82 42.2044 31.0792C42.2044 37.3385 37.1303 42.4126 30.8711 42.4126C24.6119 42.4126 19.5378 37.3385 19.5378 31.0792C19.5378 30.0285 19.6801 28.9993 19.9575 28.0102L17.3899 27.29C17.0519 28.4951 16.8711 29.7661 16.8711 31.0792C16.8711 38.8112 23.1391 45.0792 30.8711 45.0792C38.6031 45.0792 44.8711 38.8112 44.8711 31.0792C44.8711 23.3472 38.6031 17.0792 30.8711 17.0792C28.9262 17.0792 27.074 17.4758 25.3908 18.1925L23.5928 16.0498Z" fill="red"/>
+ </svg>
+ </div>
+ </div>
+ <el-card class="box-card todo-card">
+ <el-row style="height: 100%;">
+ <el-col :span="12">
+ <ul class="type-box">
+ <li v-for="(m,i) in tabList" :key="i" :class="{active:current == i}" @click="changeTab(m,i)">{{ m }}</li>
+ </ul>
+ <el-collapse v-model="activeName" accordion class="todo-collapse" style="display: none;">
+ <el-collapse-item name="1">
+ <template slot="title">
+ <span class="title">浠婃棩寰呭姙</span>
+ <el-badge v-if="todoByDayList.length>0" :value="todoByDayList.length" class="item"></el-badge>
+ </template>
+ <el-table :data="todoByDayList">
+ <el-table-column label="搴忓彿" align="center" type="index" width="50"></el-table-column>
+ <el-table-column prop="product_type" label="浜у搧绫诲瀷" align="center" min-width="50"></el-table-column>
+ <el-table-column prop="total" label="寰呭姙鏁伴噺" align="center" min-width="50"></el-table-column>
+ </el-table>
+ </el-collapse-item>
+ <el-collapse-item name="2">
+ <template slot="title">
+ <span class="title">鏈懆寰呭姙</span>
+ <el-badge v-if="todoByWeekList.length>0" :value="todoByWeekList.length" class="item"></el-badge>
+ </template>
+ <el-table :data="todoByWeekList">
+ <el-table-column label="搴忓彿" align="center" type="index" width="50"></el-table-column>
+ <el-table-column prop="product_type" label="浜у搧绫诲瀷" align="center" min-width="50"></el-table-column>
+ <el-table-column prop="total" label="寰呭姙鏁伴噺" align="center" min-width="50"></el-table-column>
+ </el-table>
+ </el-collapse-item>
+ <el-collapse-item name="3">
+ <template slot="title">
+ <span class="title">鏈湀寰呭姙</span>
+ <el-badge v-if="todoByMonthList.length>0" :value="todoByMonthList.length" class="item"></el-badge>
+ </template>
+ <el-table :data="todoByMonthList">
+ <el-table-column label="搴忓彿" align="center" type="index" width="50"></el-table-column>
+ <el-table-column prop="product_type" label="浜у搧绫诲瀷" align="center" min-width="50"></el-table-column>
+ <el-table-column prop="total" label="寰呭姙鏁伴噺" align="center" min-width="50"></el-table-column>
+ </el-table>
+ </el-collapse-item>
+ <el-collapse-item name="4">
+ <template slot="title">
+ <span class="title" style="color:red;">瓒呮湡</span>
+ <el-badge :value="100" :max="99" class="item"></el-badge>
+ </template>
+
+ </el-collapse-item>
+ </el-collapse>
+ <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>
+ </el-col>
+ <el-col :span="12" style="padding: 16px 20px;box-sizing: border-box;height: 100%;">
+ <div class="todo-span"><span>寰呭姙</span></div>
+ <div style="height: calc(100% - 30px);overflow-y: auto;">
+ <div class="todo-info" v-for="(item,index) in todoList" :key="index" v-show="todoList.length>0">
+ <div class="todo-info-state"></div>
+ <span>{{ item }}</span>
+ </div>
+ <span class="no-info" v-if="todoList.length==0">鏆傛棤</span>
+ </div>
+ </el-col>
+ </el-row>
</el-card>
+ </el-col>
+ <el-col :xs="24" :sm="10" :md="10" :lg="10" style="display: flex;flex-direction: column;align-items: center;justify-content: center;height: calc(100vh - 200px);box-sizing: border-box;padding-top: 60px;">
+ <div class="login-info">
+ <img src="../assets/download.png" alt="">
+ <div class="login-info-right">
+ <span>{{ userInfo.username }} 娆㈣繋鎮ㄧ櫥褰昅ES绯荤粺</span>
+ <span>褰撳墠鏃堕棿锛歿{ now }}</span>
+ </div>
+ </div>
+ <img src="../assets/main.af3c5c19.png" class="baImg" alt="">
</el-col>
</el-row>
</div>
@@ -153,48 +183,12 @@
width: 100%;
margin-top: 100px;
}
-.todo-total-card{
- margin-left: 15px;
- .todo-total-text{
- width: 90%;
- margin-left:5%;
- margin-bottom:10px;
- height: 40px;
- background: linear-gradient( 90deg, #C8C2FF 0%, rgba(200,194,255,0) 100%);
- display: flex;
- align-items: center;
- span:nth-child(1){
- width:50%;
- height:40px;
- display: inline-block;
- text-align: center;
- font-family: PingFang SC, PingFang SC;
- font-weight: 400;
- font-size: 14px;
- color: #0166E2;
- line-height: 40px;
- }
- span:nth-child(2){
- width:50%;
- height:40px;
- display: inline-block;
- text-align: center;
- font-family: PingFang SC, PingFang SC;
- font-weight: 400;
- font-size: 24px;
- color: #0166E2;
- line-height: 40px;
- }
- }
- .todo-total-text:last-child span:nth-child(2){
- color:red
- }
-}
.todo-card{
- height: 80vh;
- overflow-y: auto;
+ height: 65vh;
+ overflow: hidden;
>>>.el-card__body{
- padding: 0px 0px 5px
+ padding: 0px 0px 5px;
+ height: 100%;
}
.todo-span{
height:17px;
@@ -266,6 +260,51 @@
}
}
}
+.todo-item{
+ width: 23.5%;
+ box-sizing: border-box;
+ background: #fff;
+ border: 1px solid #EBEEF5;
+ border-radius: 8px;
+ box-shadow: 1px 1px 6px rgba(0,0,0,0.1);
+ padding: 10px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+.todo-item-left{
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ flex-direction: column;
+ margin-right: 10px;
+}
+.login-info{
+ display: flex;
+ align-items: flex-end;
+ margin-bottom: 60px;
+ margin-top: 60px;
+ .login-info-right{
+ display: flex;
+ flex-direction: column;
+ margin-left: 20px;
+ color: rgb(135, 90, 123);
+ span{
+ &:nth-child(1){
+ font-size: 28px;
+ font-weight: 500;
+ margin-bottom: 14px;
+ }
+ &:nth-child(2){
+ font-size: 20px;
+ font-weight: 400;
+ }
+ }
+ }
+}
+.baImg{
+ width: 500px;
+}
</style>
<script>
@@ -290,16 +329,20 @@
current:0,
type:'姘村瘑鎺ユ彃浠�',
todoList:[],
- todoInfo:{}
+ todoInfo:{},
+ now:''
}
},
computed: {
- ...mapGetters(['website'])
+ ...mapGetters(['website','userInfo'])
},
created() {
// this.getProSchedulReport()
this.getReportList();
this.getReport();
+ setInterval(() => {
+ this.nowTime()
+ }, 1000)
},
watch:{
calendarValue(newVal){
@@ -349,7 +392,33 @@
}).catch(error=>{
console.error(error)
})
- }
+ },
+ 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;
+ },
}
}
</script>
--
Gitblit v1.9.3