<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>
        <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;">{{clData.todayPlan}}</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;">{{clData.todayComplete}}</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;">{{clData.todayCompleteRate}}</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;">{{clData.toMonthPlan}}</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;">{{clData.toMonthComplete}}</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;">{{clData.toMonthCompleteRate}}</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;">{{clData.yunZaiTotal}}</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;">{{clData.yunZaiAveHour}}</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;">{{clData.milTotal}}</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;">{{clData.trainsTotal}}</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;">{{clData.aveSingleTransportTime}}</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;">{{clData.aveSingleTransportMil}}</div>
                </div>
                <img src="../../../../assets/images/cutGraph/wanchenglv1.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: ['00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00', '08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23:00'],
        seriesData: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
      },
      clData:{
        toMonthComplete: "暂无数据",
        toMonthCompleteRate: "暂无数据",
        toMonthPlan: "暂无数据",
        todayComplete: "暂无数据",
        todayCompleteRate: "暂无数据",
        todayPlan: "暂无数据",
        yunZaiTotal: "暂无数据",
        yunZaiAveHour: "暂无数据",
        milTotal: "暂无数据",
        trainsTotal: "暂无数据",
        aveSingleTransportTime: "暂无数据",
        aveSingleTransportMil: "暂无数据",
      },
    }
  },
  mounted() {
    this.loadData();
    this.DPcomputer5BoxTimer = setInterval(() => {
      this.loadData();
    }, 10000)
  },
  methods: {
    loadData() {
      //获取采区当前日产量
      HttpReq.truckDispatching.apiPlanDayQuery().then((res) => {
        this.clData = res.data;
      })
      //中间echarts图表
      HttpReq.truckDispatching.apiPlanTime1Query().then((res) => {
        this.centerViewData.seriesData = res.data || [];
        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;
      //   }
      // })
    },
    //中间模块选择
    centerSelectFn(text) {
      this.centerViewData.moduleText = text;
      this.loadData();
    },
    //中间模块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>
