<template>
    <div class="DPcomputer5Box">
        <!-- 数据统计图表 -->
        <div class="dataScrView_centerView_title">
            <div :class="centerViewData.moduleText == 'centerModule1' ? 'centerModuleSelectStyle' : ''" @click="centerSelectFn('centerModule1')">产量数据</div>
            <div :class="centerViewData.moduleText == 'centerModule2' ? 'centerModuleSelectStyle' : ''" @click="centerSelectFn('centerModule2')">运载数据</div>
            <div :class="centerViewData.moduleText == 'centerModule3' ? 'centerModuleSelectStyle' : ''" @click="centerSelectFn('centerModule3')">装载数据</div>
        </div>
        <div class="dataScrView_centerView_planNum" v-if="centerViewData.moduleText == 'centerModule1'">
            <div>
                <div>
                    <div style="color:#FFFFFF;font-size:14px;">今日计划量</div>
                    <div style="color:#00E9FD;font-size:16px;font-weight:600;">{{outputMineData.day.plan}}吨</div>
                </div>
                <img src="../../../../assets/images/cutGraph/renwujihua1.png">
            </div>
            <div>
                <div>
                    <div style="color:#FFFFFF;font-size:14px;">今日完成量</div>
                    <div style="color:#00E9FD;font-size:16px;font-weight:600;">{{outputMineData.day.finish}}吨</div>
                </div>
                <img src="../../../../assets/images/cutGraph/mubiaoguanli1.png">
            </div>
            <div>
                <div>
                    <div style="color:#FFFFFF;font-size:14px;">今日完成率</div>
                    <div style="color:#00E9FD;font-size:16px;font-weight:600;">{{parseInt(outputMineData.day.eff)}}%</div>
                </div>
                <img src="../../../../assets/images/cutGraph/wancheng1.png">
            </div>
            <div>
                <div>
                    <div style="color:#FFFFFF;font-size:14px;">当月计划量</div>
                    <div style="color:#00E9FD;font-size:16px;font-weight:600;">{{outputMineData.month.plan}}吨</div>
                </div>
                <img src="../../../../assets/images/cutGraph/jihuarenwu2.png">
            </div>
            <div>
                <div>
                    <div style="color:#FFFFFF;font-size:14px;">当月累计完成量</div>
                    <div style="color:#00E9FD;font-size:16px;font-weight:600;">{{outputMineData.month.finish}}吨</div>
                </div>
                <img src="../../../../assets/images/cutGraph/zichantongji1.png">
            </div>
            <div>
                <div>
                    <div style="color:#FFFFFF;font-size:14px;">当月完成率</div>
                    <div style="color:#00E9FD;font-size:16px;font-weight:600;">{{parseInt(outputMineData.month.eff)}}%</div>
                </div>
                <img src="../../../../assets/images/cutGraph/wanchenglv1.png">
            </div>
        </div>
        <div class="dataScrView_centerView_planNum" v-if="centerViewData.moduleText == 'centerModule2'">
            <div>
                <div>
                    <div style="color:#FFFFFF;font-size:14px;">今日总运载量</div>
                    <div style="color:#00E9FD;font-size:16px;font-weight:600;">{{carryCenterData.dayAllCarry1}}吨</div>
                </div>
                <img src="../../../../assets/images/cutGraph/renwujihua1.png">
            </div>
            <div>
                <div>
                    <div style="color:#FFFFFF;font-size:14px;">今日平均运载量</div>
                    <div style="color:#00E9FD;font-size:16px;font-weight:600;">{{carryCenterData.dayAverageCarry1}}吨/小时</div>
                </div>
                <img src="../../../../assets/images/cutGraph/mubiaoguanli1.png">
            </div>
            <div>
                <div>
                    <div style="color:#FFFFFF;font-size:14px;">今日总里程数</div>
                    <div style="color:#00E9FD;font-size:16px;font-weight:600;">{{carryCenterData.dayAllMil1}}KM</div>
                </div>
                <img src="../../../../assets/images/cutGraph/wancheng1.png">
            </div>
            <div>
                <div>
                    <div style="color:#FFFFFF;font-size:14px;">今日总车数</div>
                    <div style="color:#00E9FD;font-size:16px;font-weight:600;">{{carryCenterData.dayAllCarNum}}辆</div>
                </div>
                <img src="../../../../assets/images/cutGraph/jihuarenwu2.png">
            </div>
            <div>
                <div>
                    <div style="color:#FFFFFF;font-size:14px;">单次运载平均时长</div>
                    <div style="color:#00E9FD;font-size:16px;font-weight:600;">{{carryCenterData.singleAverageTime}}H</div>
                </div>
                <img src="../../../../assets/images/cutGraph/zichantongji1.png">
            </div>
            <div>
                <div>
                    <div style="color:#FFFFFF;font-size:14px;">单次运载平均里程</div>
                    <div style="color:#00E9FD;font-size:16px;font-weight:600;">{{carryCenterData.singleAverageMil}}KM</div>
                </div>
                <img src="../../../../assets/images/cutGraph/wanchenglv1.png">
            </div>
        </div>
        <div class="dataScrView_centerView_planNum3" v-if="centerViewData.moduleText == 'centerModule3'">
            <div>
                <div>
                    <div style="color:#FFFFFF;font-size:14px;">今日装载量</div>
                    <div style="color:#00E9FD;font-size:16px;font-weight:600;">{{loadCenterData.dayAllLoad1}}吨</div>
                </div>
                <img src="../../../../assets/images/cutGraph/renwujihua1.png">
            </div>
            <div>
                <div>
                    <div style="color:#FFFFFF;font-size:14px;">今日平均装载量</div>
                    <div style="color:#00E9FD;font-size:16px;font-weight:600;">{{loadCenterData.dayAverageLoad1}}吨/小时</div>
                </div>
                <img src="../../../../assets/images/cutGraph/mubiaoguanli1.png">
            </div>
            <div>
                <div>
                    <div style="color:#FFFFFF;font-size:14px;">今日总工时</div>
                    <div style="color:#00E9FD;font-size:16px;font-weight:600;">{{loadCenterData.dayAllTime}}H</div>
                </div>
                <img src="../../../../assets/images/cutGraph/wancheng1.png">
            </div>
            <div>
                <div>
                    <div style="color:#FFFFFF;font-size:14px;">今日装载车数</div>
                    <div style="color:#00E9FD;font-size:16px;font-weight:600;">{{loadCenterData.dayLoadCarNum}}辆</div>
                </div>
                <img src="../../../../assets/images/cutGraph/jihuarenwu2.png">
            </div>
        </div>
        <div id="centerEchartsView"></div>
    </div>
</template>

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


export default {
    data(){
        return {
            DPcomputer5BoxTimer:null,
            //产量数据以及中间图表数据
            outputMineData:{
                day:{finish:'0',eff:0,plan:'0',},
                month:{finish:'0',eff:0,plan:'0',},
                year:{finish:'0',eff:0,plan:'0',},
            },
            //运载数据以及中间图表数据
            carryCenterData:{
                dayAllCarry1:0,
                dayAverageCarry1:0,
                dayAllMil1:0,
                dayAllCarNum:0,
                singleAverageTime:0,
                singleAverageMil:0,
            },
            //装载数据据以及中间图表数据
            loadCenterData:{
                dayAllLoad1:0,
                dayAverageLoad1:0,
                dayAllTime:0,
                dayLoadCarNum:0,
            },
            //中间模块选择
            centerViewData:{
                moduleText:'centerModule1',
                xAxisData:['7:00', '8:00', '9:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00'],
                seriesData:[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
            },
        }
    },
    mounted(){
        this.loadData();
    },
    methods:{
        loadData(){
            //获取采区当前日产量
            HttpReq.truckDispatching.apiPlanDayQuery().then((res) => {
                let undueArray = {};
                if(res.length == 0 || JSON.stringify(res[0]) == '{}'){
                    undueArray.eff = 0;
                    undueArray.finish = 0;
                    undueArray.plan = 0;
                }else{
                    if(res[0].eff == ''){
                        undueArray.eff = 0;
                        undueArray.finish = res[0].finish;
                        undueArray.plan = res[0].plan;
                    }else if(res[0].eff >= 1){
                        undueArray.eff = 100;
                        undueArray.finish = res[0].finish;
                        undueArray.plan = res[0].plan;
                    }else{
                        undueArray.eff = parseFloat(res[0].eff) * 100;
                        undueArray.finish = res[0].finish;
                        undueArray.plan = res[0].plan;
                    }
                }
                this.outputMineData.day = undueArray; 
            })
            //获取采区当前月产量
            HttpReq.truckDispatching.apiPlanMonthQuery().then((res) => {
                let undueArray = {};
                if(res.length == 0 || JSON.stringify(res[0]) == '{}'){
                    undueArray.eff = 0;
                    undueArray.finish = 0;
                    undueArray.plan = 0;
                }else{
                    if(res[0].eff == ''){
                        undueArray.eff = 0;
                        undueArray.finish = res[0].finish;
                        undueArray.plan = res[0].plan;
                    }else if(res[0].eff >= 1){
                        undueArray.eff = 100;
                        undueArray.finish = res[0].finish;
                        undueArray.plan = res[0].plan;
                    }else{
                        undueArray.eff = parseFloat(res[0].eff) * 100;
                        undueArray.finish = res[0].finish;
                        undueArray.plan = res[0].plan;
                    }
                }
                this.outputMineData.month = undueArray;
            })
            //获取采区当前年产量
            HttpReq.truckDispatching.apiPlanYearQuery().then((res) => {
                let undueArray = {};
                if(res.length == 0 || JSON.stringify(res[0]) == '{}'){
                    undueArray.eff = 0;
                    undueArray.finish = 0;
                    undueArray.plan = 0;
                }else{
                    if(res[0].eff == ''){
                        undueArray.eff = 0;
                        undueArray.finish = res[0].finish;
                        undueArray.plan = res[0].plan;
                    }else if(res[0].eff >= 1){
                        undueArray.eff = 100;
                        undueArray.finish = res[0].finish;
                        undueArray.plan = res[0].plan;
                    }else{
                        undueArray.eff = parseFloat(res[0].eff) * 100;
                        undueArray.finish = res[0].finish;
                        undueArray.plan = res[0].plan;
                    }
                }
                this.outputMineData.year = undueArray;
            })
            //中间echarts图表
            HttpReq.truckDispatching.apiPlanTime1Query().then((res) => {
                let arr3 = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
                res.forEach((item,index)=>{
                    arr3.splice(parseInt(item.hour) - 7,1, parseFloat(item.finish));
                })
                this.centerViewData.seriesData = arr3;
                this.centerEcharts();
            })
            //中间echarts运载数据
            HttpReq.truckDispatching.apiPlanZDay1Query().then((res) => {
                if(res.length != 0){
                    this.carryCenterData.dayAllCarry1 = res[0].finish;
                    this.carryCenterData.dayAverageCarry1 = parseFloat(res[0].pfin).toFixed(2);
                    this.carryCenterData.dayAllMil1 = res[0].allmil ? parseFloat(res[0].allmil).toFixed(3) : 0;
                    this.carryCenterData.dayAllCarNum = res[0].num;
                    this.carryCenterData.singleAverageTime = parseFloat(res[0].time).toFixed(2);
                    this.carryCenterData.singleAverageMil = res[0].averagemil ? parseFloat(res[0].averagemil).toFixed(3) : 0;
                }
            })
            //中间echarts装载数据
            HttpReq.truckDispatching.apiPlanZMonth1Query().then((res) => {
                if(res.length != 0){
                    this.loadCenterData.dayAllLoad1 = res[0].finish;
                    this.loadCenterData.dayAverageLoad1 = parseFloat(res[0].pfin).toFixed(2);
                    this.loadCenterData.dayAllTime = res[0].time;
                    this.loadCenterData.dayLoadCarNum = res[0].num;
                }
            })

            this.DPcomputer5BoxTimer = setInterval(() => {
                //获取采区当前日产量
                HttpReq.truckDispatching.apiPlanDayQuery().then((res) => {
                    let undueArray = {};
                    if(res.length == 0 || JSON.stringify(res[0]) == '{}'){
                        undueArray.eff = 0;
                        undueArray.finish = 0;
                        undueArray.plan = 0;
                    }else{
                        if(res[0].eff == ''){
                            undueArray.eff = 0;
                            undueArray.finish = res[0].finish;
                            undueArray.plan = res[0].plan;
                        }else if(res[0].eff >= 1){
                            undueArray.eff = 100;
                            undueArray.finish = res[0].finish;
                            undueArray.plan = res[0].plan;
                        }else{
                            undueArray.eff = parseFloat(res[0].eff) * 100;
                            undueArray.finish = res[0].finish;
                            undueArray.plan = res[0].plan;
                        }
                    }
                    this.outputMineData.day = undueArray; 
                })
                //获取采区当前月产量
                HttpReq.truckDispatching.apiPlanMonthQuery().then((res) => {
                    let undueArray = {};
                    if(res.length == 0 || JSON.stringify(res[0]) == '{}'){
                        undueArray.eff = 0;
                        undueArray.finish = 0;
                        undueArray.plan = 0;
                    }else{
                        if(res[0].eff == ''){
                            undueArray.eff = 0;
                            undueArray.finish = res[0].finish;
                            undueArray.plan = res[0].plan;
                        }else if(res[0].eff >= 1){
                            undueArray.eff = 100;
                            undueArray.finish = res[0].finish;
                            undueArray.plan = res[0].plan;
                        }else{
                            undueArray.eff = parseFloat(res[0].eff) * 100;
                            undueArray.finish = res[0].finish;
                            undueArray.plan = res[0].plan;
                        }
                    }
                    this.outputMineData.month = undueArray;
                })
                //获取采区当前年产量
                HttpReq.truckDispatching.apiPlanYearQuery().then((res) => {
                    let undueArray = {};
                    if(res.length == 0 || JSON.stringify(res[0]) == '{}'){
                        undueArray.eff = 0;
                        undueArray.finish = 0;
                        undueArray.plan = 0;
                    }else{
                        if(res[0].eff == ''){
                            undueArray.eff = 0;
                            undueArray.finish = res[0].finish;
                            undueArray.plan = res[0].plan;
                        }else if(res[0].eff >= 1){
                            undueArray.eff = 100;
                            undueArray.finish = res[0].finish;
                            undueArray.plan = res[0].plan;
                        }else{
                            undueArray.eff = parseFloat(res[0].eff) * 100;
                            undueArray.finish = res[0].finish;
                            undueArray.plan = res[0].plan;
                        }
                    }
                    this.outputMineData.year = undueArray;
                })
                //中间echarts图表
                HttpReq.truckDispatching.apiPlanTime1Query().then((res) => {
                    let arr3 = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
                    res.forEach((item,index)=>{
                        arr3.splice(parseInt(item.hour) - 7,1, parseFloat(item.finish));
                    })
                    this.centerViewData.seriesData = arr3;
                    this.centerEcharts();
                })
                //中间echarts运载数据
                HttpReq.truckDispatching.apiPlanZDay1Query().then((res) => {
                    if(res.length != 0){
                        this.carryCenterData.dayAllCarry1 = res[0].finish;
                        this.carryCenterData.dayAverageCarry1 = parseFloat(res[0].pfin).toFixed(2);
                        this.carryCenterData.dayAllMil1 = res[0].allmil ? parseFloat(res[0].allmil).toFixed(3) : 0;
                        this.carryCenterData.dayAllCarNum = res[0].num;
                        this.carryCenterData.singleAverageTime = parseFloat(res[0].time).toFixed(2);
                        this.carryCenterData.singleAverageMil = res[0].averagemil ? parseFloat(res[0].averagemil).toFixed(3) : 0;
                    }
                })
                //中间echarts装载数据
                HttpReq.truckDispatching.apiPlanZMonth1Query().then((res) => {
                    if(res.length != 0){
                        this.loadCenterData.dayAllLoad1 = res[0].finish;
                        this.loadCenterData.dayAverageLoad1 = parseFloat(res[0].pfin).toFixed(2);
                        this.loadCenterData.dayAllTime = res[0].time;
                        this.loadCenterData.dayLoadCarNum = res[0].num;
                    }
                })

            },10000)

        },
        //中间模块选择
        centerSelectFn(text){
            this.centerViewData.moduleText = text;
        },
        //中间模块Echarts
        centerEcharts(){
            echarts.init(document.getElementById('centerEchartsView')).dispose();
            var myChart = echarts.init(document.getElementById('centerEchartsView'));
            var option = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                grid: {
                    top: '35%',
                    left: '1%',
                    right: '1%',
                    bottom: '2%',
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'category',
                        data: this.centerViewData.xAxisData,
                        axisTick: {
                            alignWithLabel: true
                        },
                        axisPointer: {
                            type: 'shadow'
                        },
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: 'white'
                            }
                        },
                        axisLine: {
                            lineStyle: {
                                color: 'white',
                                width: 1
                            }
                        }
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        axisLabel: {
					        show: true,
					        textStyle: {
						        color: 'white'
					        }
					    },
                        splitLine: {
						    lineStyle: {
						        // 使用深浅的间隔色
						        color: ['rgba(255,255,255,0.3)']
						    }
						},
					    axisLine: {
					        lineStyle: {
						        color: 'white',
						        width: 0
					        }
					    }
                    } 
                ],
                series: [
                    {
                        name: '重量(吨)',
                        type: 'bar',
                        barWidth: 20,
                        data: this.centerViewData.seriesData,
                        itemStyle: {
							color: '#01CBF6'
						},
                    }
                ]
            };
            option && myChart.setOption(option);
        },
    },
    beforeDestroy(){
        if(this.DPcomputer5BoxTimer) {
			clearInterval(this.DPcomputer5BoxTimer);
            this.DPcomputer5BoxTimer = null;
		}
    }
}
</script>

<style scoped>
*{
  margin: 0;
  padding: 0;
}
.DPcomputer5Box{
    width: 60vw;
    height: 23.5vh;
    background-color: rgba(32,42,67,0.95);
    padding: 5px 7px;
    box-sizing: border-box;
    overflow: hidden;
    z-index: 3;
    position: relative;
}
.DPcomputer5Box .dataScrView_centerView_title{
    margin-bottom: 5px;
    width: 100%;
    height: 3.5vh;
    background:no-repeat center center url('~@/assets/images/cutGraph/changtianbiaoti2.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;
    display: flex;
}
.DPcomputer5Box .dataScrView_centerView_title>div{
    margin: 0px 20px;
    cursor: pointer;
}
.DPcomputer5Box .centerModuleSelectStyle{
    color: #1DF9FC;
    border-bottom: 3px solid #1DF9FC;
}
.DPcomputer5Box .dataScrView_centerView_planNum{
    width: 100%;
    height: 5vh;
    display: flex;
    justify-content: space-between;
}
.DPcomputer5Box .dataScrView_centerView_planNum>div{
    width: 16%;
    height: 100%;
    background-color: rgba(10,53,107,0.6);
    border-radius: 5px;
    display: flex;
    justify-content: space-around;
    align-items: center;
}
.DPcomputer5Box .dataScrView_centerView_planNum3{
    width: 100%;
    height: 5vh;
    display: flex;
}
.DPcomputer5Box .dataScrView_centerView_planNum3>div{
    width: 16%;
    height: 100%;
    background-color: rgba(10,53,107,0.6);
    border-radius: 5px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-right: 0.5vw;
}
.DPcomputer5Box #centerEchartsView{
    overflow: hidden;
    top: 5vh;
    width: 100%;
    height: 18vh;
    position: absolute;
}
</style>