<template>
    <div class="DPcomputer25Box">
        <!-- 装卸点平均时长  -->
        <div class="dataAnalysisScrView_leftView_title truck_titleStyle">
            <div>装卸点平均时长</div>
            <div class="loadAndUnloadTitleDateStyle">
                <div :class="loadAndUnloadListData.selectTimeText == 'day' ? 'loadAndUnloadDateStyle_son1' : 'loadAndUnloadDateStyle_son2' " @click="loadAndUnloadChangeTime('day')">日</div>
                <div :class="loadAndUnloadListData.selectTimeText == 'week' ? 'loadAndUnloadDateStyle_son1' : 'loadAndUnloadDateStyle_son2' " @click="loadAndUnloadChangeTime('week')">周</div>
                <div :class="loadAndUnloadListData.selectTimeText == 'month' ? 'loadAndUnloadDateStyle_son1' : 'loadAndUnloadDateStyle_son2' " @click="loadAndUnloadChangeTime('month')">月</div>
            </div>
        </div>
        <div class="dataAnalysisScrView_rightView_content" style="position: relative;">
            <div id="echarts4View"></div>
        </div>
    </div>
</template>

<script>
import { Tools, HttpReq, CAMap} from '@/assets/js/common.js';
import * as echarts from 'echarts';


export default {
    data(){
        return {
            DPcomputer25BoxTimer:null,
            //时间
            currentTime:{
                day:'',
                month:'',
                year:'',
            },
            //装卸点平均时长
            loadAndUnloadListData:{
                selectTimeText:'day',
                selectTimeDate:'',
                caiquName:[],
                timeData:[],
            },
        }
    },
    mounted(){
        this.loadData();
    },
    methods:{
        loadData(){
            this.dayCurrentTimeFn();
            this.monthCurrentTimeFn();
            this.yearCurrentTimeFn();
            //装卸点平均时长
            if(this.loadAndUnloadListData.selectTimeText == 'day'){
                HttpReq.truckDispatching.xiequAreaQueryDay({createTime:this.currentTime.day}).then((res) => {
                    if(res.code == 200){
                        let caiquName = [];
                        let workTime = [];
                        res.data.forEach((item,index)=>{
                            caiquName.push(item.name);
                            workTime.push(item.worktime);
                        })
                        this.loadAndUnloadListData.caiquName = caiquName;
                        this.loadAndUnloadListData.timeData = workTime;
                        this.echarts4Fn();
                    }
                })
            }
            if(this.loadAndUnloadListData.selectTimeText == 'week'){
                HttpReq.truckDispatching.xiequAreaQueryMonth({createTime:this.currentTime.month}).then((res) => {
                    if(res.code == 200){
                        let caiquName = [];
                        let workTime = [];
                        res.data.forEach((item,index)=>{
                            caiquName.push(item.name);
                            workTime.push(item.worktime);
                        })
                        this.loadAndUnloadListData.caiquName = caiquName;
                        this.loadAndUnloadListData.timeData = workTime;
                        this.echarts4Fn();
                    }
                })
            }
            if(this.loadAndUnloadListData.selectTimeText == 'month'){
                HttpReq.truckDispatching.xiequAreaQueryYear({createTime:this.currentTime.year}).then((res) => {
                    if(res.code == 200){
                        let caiquName = [];
                        let workTime = [];
                        res.data.forEach((item,index)=>{
                            caiquName.push(item.name);
                            workTime.push(item.worktime);
                        })
                        this.loadAndUnloadListData.caiquName = caiquName;
                        this.loadAndUnloadListData.timeData = workTime;
                        this.echarts4Fn();
                    }
                })
            }

            this.DPcomputer25BoxTimer = setInterval(() => {
                //装卸点平均时长
                if(this.loadAndUnloadListData.selectTimeText == 'day'){
                    HttpReq.truckDispatching.xiequAreaQueryDay({createTime:this.currentTime.day}).then((res) => {
                        if(res.code == 200){
                            let caiquName = [];
                            let workTime = [];
                            res.data.forEach((item,index)=>{
                                caiquName.push(item.name);
                                workTime.push(item.worktime);
                            })
                            this.loadAndUnloadListData.caiquName = caiquName;
                            this.loadAndUnloadListData.timeData = workTime;
                            this.echarts4Fn();
                        }
                    })
                }
                if(this.loadAndUnloadListData.selectTimeText == 'week'){
                    HttpReq.truckDispatching.xiequAreaQueryMonth({createTime:this.currentTime.month}).then((res) => {
                        if(res.code == 200){
                            let caiquName = [];
                            let workTime = [];
                            res.data.forEach((item,index)=>{
                                caiquName.push(item.name);
                                workTime.push(item.worktime);
                            })
                            this.loadAndUnloadListData.caiquName = caiquName;
                            this.loadAndUnloadListData.timeData = workTime;
                            this.echarts4Fn();
                        }
                    })
                }
                if(this.loadAndUnloadListData.selectTimeText == 'month'){
                    HttpReq.truckDispatching.xiequAreaQueryYear({createTime:this.currentTime.year}).then((res) => {
                        if(res.code == 200){
                            let caiquName = [];
                            let workTime = [];
                            res.data.forEach((item,index)=>{
                                caiquName.push(item.name);
                                workTime.push(item.worktime);
                            })
                            this.loadAndUnloadListData.caiquName = caiquName;
                            this.loadAndUnloadListData.timeData = workTime;
                            this.echarts4Fn();
                        }
                    })
                }
            },20000)

        },
        //装卸点平均时长切换
        loadAndUnloadChangeTime(text){
            this.loadAndUnloadListData.selectTimeText = text;
            if(text == 'day'){
                HttpReq.truckDispatching.xiequAreaQueryDay({createTime:this.currentTime.day}).then((res) => {
					if(res.code == 200){
                        let caiquName = [];
                        let workTime = [];
                        res.data.forEach((item,index)=>{
                            caiquName.push(item.name);
                            workTime.push(item.worktime);
                        })
                        this.loadAndUnloadListData.caiquName = caiquName;
                        this.loadAndUnloadListData.timeData = workTime;
                        this.echarts4Fn();
					}
				})
            }
            if(text == 'week'){
                HttpReq.truckDispatching.xiequAreaQueryMonth({createTime:this.currentTime.month}).then((res) => {
					if(res.code == 200){
                        let caiquName = [];
                        let workTime = [];
                        res.data.forEach((item,index)=>{
                            caiquName.push(item.name);
                            workTime.push(item.worktime);
                        })
                        this.loadAndUnloadListData.caiquName = caiquName;
                        this.loadAndUnloadListData.timeData = workTime;
                        this.echarts4Fn();
					}
				})
            }
            if(text == 'month'){
                HttpReq.truckDispatching.xiequAreaQueryYear({createTime:this.currentTime.year}).then((res) => {
					if(res.code == 200){
                        let caiquName = [];
                        let workTime = [];
                        res.data.forEach((item,index)=>{
                            caiquName.push(item.name);
                            workTime.push(item.worktime);
                        })
                        this.loadAndUnloadListData.caiquName = caiquName;
                        this.loadAndUnloadListData.timeData = workTime;
                        this.echarts4Fn();
					}
				})
            }
        },
        echarts4Fn(){
            echarts.init(document.getElementById('echarts4View')).dispose();
            var myChart = echarts.init(document.getElementById('echarts4View'));
            var option = {
                tooltip: {
                    trigger: 'axis'
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: this.loadAndUnloadListData.caiquName,
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: 'white'
                        }
                    },
                    axisLine: {
                        lineStyle: {
                            color: 'white',
                            width: 0
                        }   
                    }
                },
                yAxis: {
                    type: 'value',
                    name: '平均时长',
                    nameTextStyle: { fontSize: 14 },
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: 'white'
                        }
                    },
                    axisLine: {
                        lineStyle: {
                            color: 'white',
                            width: 0
                        }
                    }
                },
                series: [
                    {
                        name: '时长(h)',
                        type: 'line',
                        data: this.loadAndUnloadListData.timeData,
                        itemStyle: {
                            normal: {
                                lineStyle: { color: '#FFC200' } //设置线条颜色
                            }
                        }
                    },
                ]
            };
            option && myChart.setOption(option);
        },
        //获取当前时间
		dayCurrentTimeFn(){
			var date = new Date();
			var year = date.getFullYear();        //年 ,从 Date 对象以四位数字返回年份
			var month = date.getMonth() + 1;      //月 ,从 Date 对象返回月份 (0 ~ 11) ,date.getMonth()比实际月份少 1 个月
			var day = date.getDate();             //日 ,从 Date 对象返回一个月中的某一天 (1 ~ 31)
			//修改月份格式
			if (month >= 1 && month <= 9) {
				month = "0" + month;
			}
			//修改日期格式
			if (day >= 0 && day <= 9) {
				day = "0" + day;
			}
			let currentFormatDate = year + "-" + month + "-" + day;
			this.currentTime.day = currentFormatDate;
		},
        monthCurrentTimeFn(){
			var date = new Date();
			var year = date.getFullYear();        //年 ,从 Date 对象以四位数字返回年份
			var month = date.getMonth() + 1;      //月 ,从 Date 对象返回月份 (0 ~ 11) ,date.getMonth()比实际月份少 1 个月
			//修改月份格式
			if (month >= 1 && month <= 9) {
				month = "0" + month;
			}
			let currentFormatDate = year + "-" + month;
			this.currentTime.month = currentFormatDate;
		},
        yearCurrentTimeFn(){
			var date = new Date();
			var year = date.getFullYear();        //年 ,从 Date 对象以四位数字返回年份
			let currentFormatDate = year;
			this.currentTime.year = currentFormatDate;
		},
    },
    beforeDestroy(){
        if(this.DPcomputer25BoxTimer) {
			clearInterval(this.DPcomputer25BoxTimer);
            this.DPcomputer25BoxTimer = null;
		}
    }
}
</script>

<style scoped>
*{
  margin: 0;
  padding: 0;
}
.DPcomputer25Box{
    width: 20vw;
    height: 23.5vh;
    background-color: rgba(32,42,67,0.95);
    padding: 5px 7px;
    box-sizing: border-box;
    overflow: hidden;
}
.DPcomputer25Box .dataAnalysisScrView_leftView_title{
    margin-bottom: 5px;
    width: 100%;
    height: 3.5vh;
    background:no-repeat center center url('~@/assets/images/cutGraph/biaoti1.png');
	background-size:100% 100%;
    padding-left: 10px;
    box-sizing: border-box;
    font-size: 18px;
    line-height: 3.5vh;
    color: #FAFAFB;
    letter-spacing: 1px;
    text-shadow: 1px 1px 1px #92CBFF;
}
.DPcomputer25Box .truck_titleStyle{
    display: flex;
    justify-content: space-between;
    padding-right: 4vw;
}
.DPcomputer25Box .loadAndUnloadTitleDateStyle{
    display: flex;
    color: #06EFFE;
    font-size: 16px;
    text-shadow: 0px 0px 0px;
    height: 3.5vh;
    align-items: center;
    z-index: 100;
}
.DPcomputer25Box .loadAndUnloadDateStyle_son1{
    height: 2.5vh;
    line-height: 2.5vh;
    margin-right: 5px;
    padding:0px 5px;
    background-color: #2DB3BB;
    box-sizing: border-box;
    border-radius: 5px;
    cursor: pointer;
}
.DPcomputer25Box .loadAndUnloadDateStyle_son2{
    height: 2.5vh;
    line-height: 2.5vh;
    margin-right: 5px;
    padding:0px 5px;
    box-sizing: border-box;
    border-radius: 5px;
    cursor: pointer;
}
.DPcomputer25Box .dataAnalysisScrView_rightView_content{
    width: 100%;
    height: 19vh;
}
.DPcomputer25Box #echarts4View{
    position: absolute;
    top: -2.5vh;
    width: 100%;
    height: 22vh;
}
</style>