<style lang="less">
#kanban{
background:#DCE9FE;
display: flex;
flex-direction: column;
height: 100%;
>.tap{
flex-shrink: 0;
background:#E6EFFE;
display:flex;
>span{
width:calc(100%/5);
text-align: center;
position:relative;
height: 35px;
line-height: 35px;
&:after{
content:" ";
left:50%;
position:absolute;
bottom:0;
width:0;
border-top:3px solid #5E9AFE;
border-radius: 20px;
transition: all 0.3s;
}
&.active{
font-size:15px;
&:after{
width:100%;
left:0;
}
}
}
}
>.date{
flex-shrink: 0;
display: flex;
height: 30px;
>div{
flex-grow:1;
display:flex;
justify-content: center;
align-items: center;
font-size: 14px;
>.line{
width: 15px;
background: #815EFF;
height: 3px;
border-radius: 50px;
margin: 0 5px;
}
}
>button{
flex-shrink: 0;
padding: 0 10px;
position:relative;
overflow:hidden;
color:#815EFF;
&:after{
content:" ";
width:0;
height:0;
left:50%;
top:50%;
position:absolute;
background:rgba(50, 125, 255, 0.4);
border-radius: 50%;
transform:translate(-50%,-50%);
}
&:active:after{
transition: all 0.4s;
width:100px;
height:100px;
}
}
}
>.list{
flex-shrink: 0;
display:flex;
background: #f2f2f2;
color:#679FFE;
>span{
width: calc(100%/5);
text-align: center;
padding: 10px;
box-sizing: border-box;
transition: all 0.3s;
&.active{
background: rgb(93, 148, 245);
color: #fff;
box-shadow: 2px 2px 3px rgba(94,154,254,0.4);
}
}
}
>.content{
flex-grow:1;
overflow:auto;
height:1px;
-webkit-overflow-scrolling: touch;
}
}
</style>
<template>
<div id="kanban">
<div class="tap">
<span :class="{active:dateMode==1}" @click="dateSelect(1)">日</span>
<span :class="{active:dateMode==2}" @click="dateSelect(2)">周</span>
<span :class="{active:dateMode==3}" @click="dateSelect(3)">月</span>
<span :class="{active:dateMode==4}" @click="dateSelect(4)">年</span>
<span :class="{active:dateMode==5}" @click="dateSelect(5)">自定义</span>
</div>
<div class="date">
<button v-if="dateMode<5" @click="preDate">上一{{dateMode==1&&'天'||dateMode==2&&'周'||dateMode==3&&'月'||dateMode==4&&'年'}}</button>
<div>
<span>{{startDate}}</span>
<span v-show="dateMode>1" class="line" />
<span v-show="dateMode>1">{{endDate}}</span>
</div>
<button v-if="dateMode<5" @click="nextDate">下一{{dateMode==1&&'天'||dateMode==2&&'周'||dateMode==3&&'月'||dateMode==4&&'年'}}</button>
</div>
<div class="list">
<span :class="{active:situation=='operate'}" @click="situation='operate'">运营概况</span>
<span :class="{active:situation=='capital'}" @click="situation='capital'">资金概况</span>
<span :class="{active:situation=='Finance'}" @click="situation='Finance'">财务概况</span>
<span :class="{active:situation=='abnormal'}" @click="situation='abnormal'">异常预警</span>
<span :class="{active:situation=='tiipChartInventory'}" @click="situation='tiipChartInventory'">库存资金</span>
</div>
<div class="content">
<component :is="situation" :dateMode="dateMode" :start="DateValue[0]" :end="DateValue[1]"/>
</div>
<calendar
:show.sync="calendarShow"
mode="during"
:defaultDate="calendarValue"
@change="Change"/>
</div>
</template>
<script>
import util from "@/libs/util.js"
import operate from "./operate"
import capital from "./capital"
import Finance from "./Finance"
import abnormal from "./abnormal"
import tiipChartInventory from "@/view/tiip/chart/inventory"
export default {
name:"kanban",
components:{operate,capital,Finance,abnormal,tiipChartInventory},
data(){
return{
calendarShow:false,
DateValue:[new Date],
calendarValue:[],
dateMode:1,
situation:"operate",
}
},
mounted(){
window.kanban=this
this.$store.dispatch('saveUserId',this.$route.params.userId);
this.dateMode=3
},
methods:{
preDate(){
switch(this.dateMode){
case 1:this.DateValue=[new Date(this.DateValue[0].setDate(this.DateValue[0].getDate()-1))]; break;
case 2:this.DateValue=[this.setWeek(this.DateValue[0],-1,"start"),
this.setWeek(this.DateValue[1],-1,'end')];break;
case 3:this.DateValue=[this.setMonth(this.DateValue[0],-1,"start"),
this.setMonth(this.DateValue[1],-1,'end')];break;
case 4:this.DateValue=[this.setYear(this.DateValue[0],-1,"start"),
this.setYear(this.DateValue[1],-1,'end')];break;
}
},
nextDate(){
switch(this.dateMode){
case 1:this.DateValue=[new Date(this.DateValue[0].setDate(this.DateValue[0].getDate()+1))]; break;
case 2:this.DateValue=[this.setWeek(this.DateValue[0],+1,"start"),
this.setWeek(this.DateValue[1],+1,'end')];break;
case 3:this.DateValue=[this.setMonth(this.DateValue[0],+1,"start"),
this.setMonth(this.DateValue[1],+1,'end')];break;
case 4:this.DateValue=[this.setYear(this.DateValue[0],+1,"start"),
this.setYear(this.DateValue[1],+1,'end')];break;
}
},
dateSelect(index){//选择日期方式
if(index==5){
this.calendarShow=true
}else{
this.calendarValue=[]
this.dateMode=index
}
},
Change(e){
console.log(e)
if(e.length==2){
this.DateValue=this.calendarValue=[e[0].$d,e[1].$d]
this.dateMode=5
this.calendarShow=false
}
},
setWeek(date,val,mode){
if(mode=="start"){
date.setDate(date.getDate()+1-(date.getDay()||7)+val*7)
}else{
date.setDate(date.getDate()+7-(date.getDay()||7)+val*7)
}
return new Date(date.getTime());
},
setMonth(date,val,mode){
date.setDate(1)
date.setMonth(date.getMonth()+val)
if(mode=='end'){
date.setMonth(date.getMonth()+1)
date.setDate(0)
}
return new Date(date.getTime());
},
setYear(date,val,mode){
date.setFullYear(date.getFullYear()+val)
date.setMonth(0)
if(mode=="start"){
date.setDate(1)
}else{
date.setFullYear(date.getFullYear()+1)
date.setDate(0);
}
return new Date(date.getTime());
},
},
computed:{
startDate(val){
return util.dateFormat(this.DateValue[0],"yyyy年MM月dd日")
},
endDate(val){
return util.dateFormat(this.DateValue[1],"yyyy年MM月dd日");
}
},
watch:{
dateMode(n){
var date=new Date
switch(n){
case 1:this.DateValue=[date];break;
case 2:this.DateValue=[
this.setWeek(new Date(),0,'start'),
this.setWeek(new Date(),0,'end')
];break;
case 3:this.DateValue=[
this.setMonth(new Date(),0,"start"),
this.setMonth(new Date(),0,"end"),
];break;
case 4:this.DateValue=[
this.setYear(new Date(),0,"start"),
this.setYear(new Date(),0,"end")
];break;
}
}
},
}
</script>