From 41cad2434411b2eac1b9814d47d06e34c291f285 Mon Sep 17 00:00:00 2001
From: licp <lichunping@guanfang.com.cn>
Date: 星期五, 29 三月 2024 16:29:40 +0800
Subject: [PATCH] 完成首页等问题修改
---
src/page/wel.vue | 95 +++++++++++++++++++++++++++++++++++++++++++----
1 files changed, 86 insertions(+), 9 deletions(-)
diff --git a/src/page/wel.vue b/src/page/wel.vue
index 4c632dc..c682e79 100644
--- a/src/page/wel.vue
+++ b/src/page/wel.vue
@@ -1,6 +1,6 @@
<template>
<div class="dashboard-main">
- <!-- <div class="body">
+ <div class="body">
<el-row>
<el-col :span="12">
<p class="todo-title"><i class="el-icon-bell"></i><span> 鐢熶骇璋冨害 路 寰呭姙</span></p>
@@ -9,7 +9,10 @@
<el-row>
<el-col :span="6">
<el-card class="box-card todo-card">
- <el-collapse v-model="activeName" accordion class="todo-collapse" style="display:none">
+ <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>
@@ -63,33 +66,35 @@
</template>
</el-calendar>
<div class="todo-span"><span>寰呭姙</span></div>
- <div class="todo-info" v-for="(item,index) in 10" :key="index">
+ <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">
<span>浠婃棩寰呭姙</span>
- <span v-text="todoByDayList.length"></span>
+ <span v-text="todoInfo.todoByDay"></span>
</div>
<div class="todo-total-text">
<span>鏈懆寰呭姙</span>
- <span v-text="todoByWeekList.length"></span>
+ <span v-text="todoInfo.todoByWeek"></span>
</div>
<div class="todo-total-text">
<span>鏈湀寰呭姙</span>
- <span v-text="todoByMonthList.length"></span>
+ <span v-text="todoInfo.todoByMonth"></span>
</div>
<div class="todo-total-text">
<span>瓒呮湡</span>
- <span v-text="0"></span>
+ <span v-text="todoInfo.outByTime"></span>
</div>
</el-card>
</el-col>
</el-row>
- </div> -->
+ </div>
</div>
</template>
<style scoped="scoped" lang="scss">
@@ -125,6 +130,8 @@
background: #FFFFFF;
border-radius: 8px 8px 8px 8px;
border: 1px solid #E8E8E8;
+ display: flex;
+ align-items: center;
.todo-info-state{
width:12px;
height:64px;
@@ -133,6 +140,18 @@
position: relative;
top:0px;
}
+ span{
+ font-size: 14px;
+ margin: 0 16px;
+ }
+}
+.no-info{
+ font-size: 14px;
+ color: #666;
+ display: inline-block;
+ text-align: center;
+ width: 100%;
+ margin-top: 100px;
}
.todo-total-card{
margin-left: 15px;
@@ -142,6 +161,8 @@
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;
@@ -227,6 +248,24 @@
>>>.el-calendar-table td.is-selected {
background-color: #e3effc;
}
+.type-box{
+ list-style-type: none;
+ display: flex;
+ align-items: center;
+ width: 100%;
+ padding-left: 0;
+ margin-left: 20px;
+ li{
+ padding: 8px 16px;
+ border: 1px solid #E3E1FD;
+ cursor: pointer;
+ font-size: 14px;
+ color: #875A7B;
+ &.active{
+ background: linear-gradient( 180deg, #E3E1FD 0%, #F0EFF9 100%);
+ }
+ }
+}
</style>
<script>
@@ -234,6 +273,7 @@
import ECharts from 'vue-echarts'
import {dateFormat} from '@/util/date'
import {getProductionSchedulReport} from '@/api/plan/productionschedul'
+import { getReportList,getReport } from '@/api/wel/index'
export default {
name: 'Wel',
components: {
@@ -246,18 +286,26 @@
todoByDayList: [],
todoByWeekList: [],
todoByMonthList: [],
+ tabList:['姘村瘑鎺ユ彃浠�','娴峰伐鍣ㄤ欢','瑙傛祴缃�','鍏朵粬'],
+ current:0,
+ type:'姘村瘑鎺ユ彃浠�',
+ todoList:[],
+ todoInfo:{}
}
},
computed: {
...mapGetters(['website'])
},
created() {
- this.getProSchedulReport()
+ // this.getProSchedulReport()
+ this.getReportList();
+ this.getReport();
},
watch:{
calendarValue(newVal){
if(newVal){
console.log(dateFormat(newVal,'yyyy-MM-dd'));
+ this.getReportList()
}
}
},
@@ -272,6 +320,35 @@
}).catch(error=>{
console.error(error)
})
+ },
+ changeTab(m,i){
+ this.type = m;
+ this.current = i;
+ this.getReportList()
+ this.getReport();
+ },
+ getReportList(){
+ getReportList({
+ type:this.type,
+ time:dateFormat(this.calendarValue,'yyyy-MM-dd')
+ }).then(res=>{
+ if(res.status===200){
+ this.todoList = res.data.data
+ }
+ }).catch(error=>{
+ console.error(error)
+ })
+ },
+ getReport(){
+ getReport({
+ type:this.type,
+ }).then(res=>{
+ if(res.status===200){
+ this.todoInfo = res.data.data
+ }
+ }).catch(error=>{
+ console.error(error)
+ })
}
}
}
--
Gitblit v1.9.3