<template>
|
<div class="dashboard-main">
|
<div class="body">
|
<el-row>
|
<el-col :xs="24" :sm="14" :md="14" :lg="14">
|
<p class="todo-title"><i class="el-icon-bell"></i><span> 生产调度 · 待办</span></p>
|
<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 style="font-size: 20px;font-weight: 500;color: #0166E2;">{{ todoInfo.todoByDay }}</span>
|
</div>
|
<img src="../assets/daliy-0.svg" alt="">
|
</div>
|
<div class="todo-item todo-item">
|
<div class="todo-item-left">
|
<span>本周待办</span>
|
<span style="font-size: 20px;font-weight: 500;color: #0166E2;">{{ todoInfo.todoByWeek }}</span>
|
</div>
|
<img src="../assets/daliy-1.svg" alt="">
|
</div>
|
<div class="todo-item todo-item">
|
<div class="todo-item-left">
|
<span>本月待办</span>
|
<span style="font-size: 20px;font-weight: 500;color: #0166E2;">{{ todoInfo.todoByMonth }}</span>
|
</div>
|
<img src="../assets/daliy-2.svg" alt="">
|
</div>
|
<div class="todo-item todo-item">
|
<div class="todo-item-left">
|
<span>超期</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 }} 欢迎您登录MES系统</span>
|
<span>当前时间：{{ now }}</span>
|
</div>
|
</div>
|
<img src="../assets/main.af3c5c19.png" class="baImg" alt="">
|
</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-card{
|
height: 65vh;
|
overflow: hidden;
|
>>>.el-card__body{
|
padding: 0px 0px 5px;
|
height: 100%;
|
}
|
.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%);
|
}
|
}
|
}
|
.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>
|
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:{},
|
now:''
|
}
|
},
|
computed: {
|
...mapGetters(['website','userInfo'])
|
},
|
created() {
|
// this.getProSchedulReport()
|
this.getReportList();
|
this.getReport();
|
setInterval(() => {
|
this.nowTime()
|
}, 1000)
|
},
|
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)
|
})
|
},
|
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>
|
