index.vue

<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>