<template>
|
<div class="dashboard-main">
|
<div class="body">
|
<el-row>
|
<el-col :span="12">
|
<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">
|
<span>今日待办</span>
|
<span v-text="todoInfo.todoByDay"></span>
|
</div>
|
<div class="todo-total-text">
|
<span>本周待办</span>
|
<span v-text="todoInfo.todoByWeek"></span>
|
</div>
|
<div class="todo-total-text">
|
<span>本月待办</span>
|
<span v-text="todoInfo.todoByMonth"></span>
|
</div>
|
<div class="todo-total-text">
|
<span>超期</span>
|
<span v-text="todoInfo.outByTime"></span>
|
</div>
|
</el-card>
|
</el-col>
|
</el-row>
|
</div>
|
</div>
|
</template>
|
<style scoped="scoped" lang="scss">
|
.dashboard-main {
|
width: 100%;
|
height: 100%;
|
padding: 10px;
|
margin: 0;
|
}
|
.body{
|
margin: 5px;
|
padding: 0px 15px;
|
border-radius: 8px;
|
background: linear-gradient( 180deg, #E3E1FD 0%, #F0EFF9 100%);
|
}
|
.todo-title{
|
width: 487px;
|
height: 20px;
|
font-family: PingFang SC, PingFang SC;
|
font-weight: 700;
|
font-size: 18px;
|
color: #875A7B;
|
line-height: 20px;
|
text-align: left;
|
font-style: normal;
|
text-transform: none;
|
}
|
.todo-info{
|
width: 90%;
|
margin-left:5%;
|
height: 64px;
|
margin-top: 10px;
|
background: #FFFFFF;
|
border-radius: 8px 8px 8px 8px;
|
border: 1px solid #E8E8E8;
|
display: flex;
|
align-items: center;
|
.todo-info-state{
|
width:12px;
|
height:64px;
|
background-color: #6ACE00;
|
border-radius: 8px 0px 0px 8px;
|
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;
|
.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;
|
>>>.el-card__body{
|
padding: 0px 0px 5px
|
}
|
.todo-span{
|
height:17px;
|
padding:0px 20px;
|
}
|
.todo-span::before{
|
content: "";
|
display: inline-block;
|
width:21px;
|
height:17px;
|
background: url("/img/group-464.png") no-repeat;
|
}
|
.todo-span span{
|
height:20px;
|
display: inline-block;
|
position: relative;
|
top: -2px;
|
color: #6D5EEE;
|
}
|
}
|
.todo-collapse{
|
padding: 0px 20px;
|
.title{
|
font-weight: 700;
|
}
|
}
|
>>>.el-calendar-table .el-calendar-day {
|
-webkit-box-sizing: border-box;
|
box-sizing: border-box;
|
padding: 8px;
|
height: 32px;
|
line-height: 100%;
|
text-align: center;
|
font-size: 12px;
|
font-family: PingFang SC, PingFang SC;
|
font-weight: 400;
|
}
|
>>>.el-calendar-table tr td:first-child {
|
border-left: none;
|
}
|
>>>.el-calendar-table tr:first-child td {
|
border-top: none;
|
}
|
>>>.el-calendar-table td {
|
border-bottom: none;
|
border-right: none;
|
vertical-align: top;
|
-webkit-transition: background-color 0.2s ease;
|
transition: background-color 0.2s ease;
|
}
|
>>>.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>
|
import { mapGetters } from 'vuex'
|
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: {
|
'v-chart': ECharts
|
},
|
data() {
|
return {
|
calendarValue: new Date(),
|
activeName: '1',
|
todoByDayList: [],
|
todoByWeekList: [],
|
todoByMonthList: [],
|
tabList:['水密接插件','海工器件','观测网','其他'],
|
current:0,
|
type:'水密接插件',
|
todoList:[],
|
todoInfo:{}
|
}
|
},
|
computed: {
|
...mapGetters(['website'])
|
},
|
created() {
|
// this.getProSchedulReport()
|
this.getReportList();
|
this.getReport();
|
},
|
watch:{
|
calendarValue(newVal){
|
if(newVal){
|
console.log(dateFormat(newVal,'yyyy-MM-dd'));
|
this.getReportList()
|
}
|
}
|
},
|
methods: {
|
getProSchedulReport(){
|
getProductionSchedulReport().then(res=>{
|
if(res.status===200){
|
this.todoByDayList = res.data.data.todoByDay
|
this.todoByWeekList = res.data.data.todoByWeek
|
this.todoByMonthList = res.data.data.todoByMonth
|
}
|
}).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)
|
})
|
}
|
}
|
}
|
</script>
|
