<template>
    <div class="DPcomputer8Box">
		<!-- 矿石开采效率 -->
		<div class="dataScrView_rightView_title">矿石开采效率</div>
        <div class="dataScrView_rightView_content">
            <div class="dataScrView_rightView_content_view1 guanhulanseditu">
                <div id='liquidEchart1' class="dataScrView_rightView_content_view1_rate1"></div>
                <div style="color:white;">
                    <div style="color:#A6F6F9;font-size:20px;"><span style="color:#06BEFA;">{{exploitationEfficiencyData.dayYield1}}</span> T</div>
                    <div>日总开采量</div>
                </div>
                <div style="color:white;">
                    <div style="color:#A6F6F9;font-size:20px;"><span style="color:#06BEFA;">{{exploitationEfficiencyData.dayMil1}}</span> KM</div>
                    <div>日总里程</div>
                </div>
            </div>
            <div class="dataScrView_rightView_content_view1 guanhulvseditu">
                <div style="color:white;">
                    <div style="color:#A6F6F9;font-size:20px;"><span style="color:#03FEFE;">{{exploitationEfficiencyData.dayWorkTime2}}</span> H</div>
                    <div>司机日总工作时长</div>
                </div>
                <div style="color:white;">
                    <div style="color:#A6F6F9;font-size:20px;"><span style="color:#03FEFE;">{{exploitationEfficiencyData.dayYield2}}</span> T</div>
                    <div>日总开采量</div> 
                </div>
                <div id='liquidEchart2' class="dataScrView_rightView_content_view1_rate2"></div>
            </div>
        </div>
    </div>
</template>

<script>
import { Tools, HttpReq, CAMap} from '@/assets/js/common.js';
import * as echarts from 'echarts';
import 'echarts-liquidfill'; // 引入水球图的组件


export default {
    data(){
        return {
            DPcomputer8BoxTimer:null,
			//矿石开采效率
			exploitationEfficiencyData:{
                rate1:[0.5],
                dayYield1:0,
                dayMil1:0,
                rate2:[0.5],
                dayWorkTime2:0,
                dayYield2:0,
            },
        }
    },
    mounted(){
        this.loadData();
    },
    methods:{
        loadData(){
            //矿石开采效率
			HttpReq.truckDispatching.apiManmadesCheDayQueryDay({createTime:this.dayCurrentTimeFn(),size:9999,page:0}).then((res) => {
				if(res.code == 200){
					let text1 = 0;
					let text2 = 0;
					let text3 = 0;
					res.data.forEach((item,index)=>{
						text1 = text1 + (item.weight ? parseFloat(item.weight) : 0);
						text2 = text2 + (item.mil ? parseFloat(item.mil) : 0);
						text3 = text3 + (item.time ? parseFloat(item.time) : 0);
					});
					this.exploitationEfficiencyData.dayYield1 = text1;
					this.exploitationEfficiencyData.dayMil1 = text2.toFixed(3);
					this.exploitationEfficiencyData.dayWorkTime2 = text3;
					this.exploitationEfficiencyData.dayYield2 = text1;
				}
			})
			this.initLiquidEchart1();
            this.initLiquidEchart2();

			this.DPcomputer8BoxTimer = setInterval(() => {
				//矿石开采效率
				HttpReq.truckDispatching.apiManmadesCheDayQueryDay({createTime:this.dayCurrentTimeFn(),size:9999,page:0}).then((res) => {
					if(res.code == 200){
						let text1 = 0;
						let text2 = 0;
						let text3 = 0;
						res.data.forEach((item,index)=>{
							text1 = text1 + (item.weight ? parseFloat(item.weight) : 0);
							text2 = text2 + (item.mil ? parseFloat(item.mil) : 0);
							text3 = text3 + (item.time ? parseFloat(item.time) : 0);
						});
						this.exploitationEfficiencyData.dayYield1 = text1;
						this.exploitationEfficiencyData.dayMil1 = text2.toFixed(3);
						this.exploitationEfficiencyData.dayWorkTime2 = text3;
						this.exploitationEfficiencyData.dayYield2 = text1;
					}
				})
				this.initLiquidEchart1();
                this.initLiquidEchart2();
			},10000)
        },
        //矿石开采效率
        initLiquidEchart1(){
			echarts.init(document.getElementById('liquidEchart1')).dispose();
			setTimeout(() => {
				this.chartsLiquid = echarts.init(document.getElementById('liquidEchart1'));
				// 把配置和数据放这里
				this.chartsLiquid.setOption({
					series: [{
						type: 'liquidFill',
                        name: '比率\n' + this.exploitationEfficiencyData.rate1 * 100 + '%',
						radius: '70px',
						data: this.exploitationEfficiencyData.rate1,
						label: {
							normal: {
                                formatter: '{a}',
								color: '#05ADFB',
								insideColor: '#fff',
								textStyle: {
									fontSize: 18,
								}
							}
						},
						backgroundStyle: {
							color: '#012861',
							borderWidth: "1.5", // 内边框
							borderColor: "rgb(6, 190, 250)"
						},
						color: [{
							type: 'linear',
							x: 0,
							y: 1,
							x2: 0,
							y2: 0,
							colorStops: [{
								offset: 1,
								color: ["rgb(6, 190, 250)"], // 0% 处的颜色
							}, {
								offset: 0,
								color: ["rgb(6, 190, 250)"], // 100% 处的颜色
							}],
							global: false // 缺省为 false
						}],
						outline: {
							show: true,
							borderDistance: 0,
							itemStyle: {
								borderColor: '#012861',
								borderWidth: 5,
								shadowBlur: 5,
								shadowColor: 'rgb(6, 190, 250)'
							}, 
						}
					}]
				});
			}, 50)
		},
        initLiquidEchart2(){
			echarts.init(document.getElementById('liquidEchart2')).dispose();
			setTimeout(() => {
				this.chartsLiquid = echarts.init(document.getElementById('liquidEchart2'));
				// 把配置和数据放这里
				this.chartsLiquid.setOption({
					series: [{
						type: 'liquidFill',
                        name: '比率\n' + this.exploitationEfficiencyData.rate2 * 100 + '%',
						radius: '70px',
						data: this.exploitationEfficiencyData.rate2,
						label: {
							normal: {
                                formatter: '{a}',
								color: 'rgb(3, 254, 254)',
								insideColor: '#fff',
								textStyle: {
									fontSize: 18,
								}
							}
						},
						backgroundStyle: {
							color: '#012861',
							borderWidth: "1.5", // 内边框
							borderColor: "rgb(3, 254, 254)"
						},
						color: [{
							type: 'linear',
							x: 0,
							y: 1,
							x2: 0,
							y2: 0,
							colorStops: [{
								offset: 1,
								color: ["rgb(3, 254, 254)"], // 0% 处的颜色
							}, {
								offset: 0,
								color: ["rgb(3, 254, 254)"], // 100% 处的颜色
							}],
							global: false // 缺省为 false
						}],
						outline: {
							show: true,
							borderDistance: 0,
							itemStyle: {
								borderColor: '#012861',
								borderWidth: 5,
								shadowBlur: 5,
								shadowColor: 'rgb(3, 254, 254)'
							}, 
						}
					}]
				});
			}, 50)
		},
		//获取当前时间
		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;
			return currentFormatDate
		},
    },
    beforeDestroy(){
        if(this.DPcomputer8BoxTimer) {
			clearInterval(this.DPcomputer8BoxTimer);
            this.DPcomputer8BoxTimer = null;
		}
    }
}
</script>

<style scoped>
*{
  margin: 0;
  padding: 0;
}
.DPcomputer8Box{
    width: 20vw;
    height: 23.5vh;
    background-color: rgba(32,42,67,0.95);
    padding: 5px 7px;
    box-sizing: border-box;
    overflow: hidden;
}
.DPcomputer8Box .dataScrView_rightView_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;
}
.DPcomputer8Box .dataScrView_rightView_content{
    width: 100%;
    height: 19vh;
}
.DPcomputer8Box .dataScrView_rightView_content_view1{
    position: relative;
    margin-top: 1vh;
    display: flex;
    align-items: center;
    font-weight: 600;
    justify-content: space-evenly;
}
.DPcomputer8Box .dataScrView_rightView_content_view1_rate1{
    height: 80px;
    width: 80px;
}
.DPcomputer8Box .dataScrView_rightView_content_view1_rate2{
    height: 80px;
    width: 80px;
}
.DPcomputer8Box .guanhulanseditu{
    background:no-repeat center center url('~@/assets/images/cutGraph/juxinglanse.png');
	background-size:100% 85%;
    margin-right: 5%;
}
.DPcomputer8Box .guanhulvseditu{
    background:no-repeat center center url('~@/assets/images/cutGraph/juxinglvse.png');
	background-size:100% 90%;
    margin-left: 5%;
}
</style>