<template>
  <div class="DPcomputer10Box">
    <!-- 车辆运行状况 -->
    <div class="carManScrView_leftView_title">车辆运行状况</div>
    <div class="carManScrView_leftView_content" style="position: relative;">
      <div style="width:100%;height: 1.5vh;display: flex;font-size: 15px;justify-content: right;align-items: center;">
        <div style="width:1.5vh;height: 1.5vh;background-color: #14F3C5;margin-right: 10px;border-radius: 2px;"></div>
        <div style="color:#A6F6F9;margin-right: 10px;">车辆离线</div>
        <div style="width:1.5vh;height: 1.5vh;background-color: #2195FD;margin-right: 10px;border-radius: 2px;"></div>
        <div style="color:#A6F6F9;margin-right: 10px;">车辆在线</div>
      </div>
      <div>
        <div style="margin-top:5px;">
          <span style="color:#02F7EF;margin-left: 4vw;">{{ carWorkingStateData.kacheoffline }}</span>
          <span style="color:#2195FD;margin-left: 13vw;">{{ carWorkingStateData.kacheonline }}</span>
        </div>
        <div style="display: flex;">
          <div style="color:#A6F6F9;font-size: 15px;">卡车状态</div>
          <div style="display: flex;width: 80%;margin-left: 0.5vw;border: #02F7EF 0.5px solid;border-radius: 3px;">
            <div
              :style="'height:1.7vh;border-top-left-radius: 3px;border-bottom-left-radius: 3px;background-color: #14F3C5;width:' + (carWorkingStateData.kacheoffline/(carWorkingStateData.kacheonline + carWorkingStateData.kacheoffline)) * 100  + '%;'"></div>
            <div
              :style="'height:1.7vh;border-top-right-radius: 3px;border-bottom-right-radius: 3px;background-color: #2195FD;width:' + (carWorkingStateData.kacheonline/(carWorkingStateData.kacheonline + carWorkingStateData.kacheoffline)) * 100  + '%;'"></div>
          </div>
        </div>
      </div>
      <div>
        <div style="margin-top:5px;">
          <span style="color:#02F7EF;margin-left: 4vw;">{{ carWorkingStateData.chancheoffline }}</span>
          <span style="color:#2195FD;margin-left: 13vw;">{{ carWorkingStateData.chancheonline }}</span>
        </div>
        <div style="display: flex;">
          <div style="color:#A6F6F9;font-size: 15px;">铲车状态</div>
          <div style="display: flex;width: 80%;margin-left: 0.5vw;border: #02F7EF 0.5px solid;border-radius: 3px;">
            <div
              :style="'height:1.7vh;border-top-left-radius: 3px;border-bottom-left-radius: 3px;background-color: #14F3C5;width:' + (carWorkingStateData.chancheoffline/(carWorkingStateData.chancheonline + carWorkingStateData.chancheoffline)) * 100  + '%;'"></div>
            <div
              :style="'height:1.7vh;border-top-right-radius: 3px;border-bottom-right-radius: 3px;background-color: #2195FD;width:' + (carWorkingStateData.chancheonline/(carWorkingStateData.chancheonline + carWorkingStateData.chancheoffline)) * 100  + '%;'"></div>
          </div>
        </div>
      </div>
      <div>
        <div style="margin-top:5px;">
          <span style="color:#02F7EF;margin-left: 4vw;">{{ carWorkingStateData.qitacheoffline }}</span>
          <span style="color:#2195FD;margin-left: 13vw;">{{ carWorkingStateData.qitacheonline }}</span>
        </div>
        <div style="display: flex;">
          <div style="color:#A6F6F9;font-size: 15px;">其他车辆</div>
          <div style="display: flex;width: 80%;margin-left: 0.5vw;border: #02F7EF 0.5px solid;border-radius: 3px;">
            <div
              :style="'height:1.7vh;border-top-left-radius: 3px;border-bottom-left-radius: 3px;background-color: #14F3C5;width:' + (carWorkingStateData.qitacheoffline/(carWorkingStateData.qitacheonline + carWorkingStateData.qitacheoffline)) * 100  + '%;'"></div>
            <div
              :style="'height:1.7vh;border-top-right-radius: 3px;border-bottom-right-radius: 3px;background-color: #2195FD;width:' + (carWorkingStateData.qitacheonline/(carWorkingStateData.qitacheonline + carWorkingStateData.qitacheoffline)) * 100  + '%;'"></div>
          </div>
        </div>
      </div>
      <div id="chart-panel" style="width:100%;height: 12vh;"></div>
    </div>
  </div>
</template>

<script>
import {Tools, HttpReq, CAMap} from '@/assets/js/common.js';
import * as echarts from 'echarts';
import "echarts-gl";
import {getPie3D} from "../../../components/echarts/bingtu3d";


export default {
  data() {
    return {
      chartPanel: null,
      DPcomputer10BoxTimer: null,
      //车辆运行状况
      carWorkingStateData: {
        kacheonline: 0,
        kacheoffline: 0,
        chancheonline: 0,
        chancheoffline: 0,
        qitacheonline: 0,
        qitacheoffline: 0,
        optionData: [
          {
            name: "卡车",
            value: 0,
            itemStyle: {
              opacity: 0.2,
              color: "#8FDFFE",
            },
          },
          {
            name: "铲车",
            value: 0,
            itemStyle: {
              opacity: 0.2,
              color: "#00A8FF",
            },
          }
        ],
      },
    }
  },
  mounted() {
    this.loadData();
  },
  methods: {
    loadData() {
      //获取车辆运行状况
      HttpReq.truckDispatching.carInformationQuery({size: 9999}).then((res) => {
        let kache1 = [];
        let kachezaixian = [];
        let kachelixian = [];
        let dianchan1 = [];
        let dianchanzaixian = [];
        let dianchanlixian = [];
        let qitache1 = [];
        let qitachezaixian = [];
        let qitachelixian = [];
        if (res.code == 200) {
          res.data.content.forEach((item) => {
            if (item.carclass == '卡车') {
              kache1.push(item);
            } else if (item.carclass == '铲车') {
              dianchan1.push(item);
            } else {
              qitache1.push(item);
            }
          })
          this.carWorkingStateData.optionData[0].value = kache1.length;
          this.carWorkingStateData.optionData[1].value = dianchan1.length;
          kache1.forEach((item) => {
            if (item.odo != 0) {
              kachezaixian.push(item);
            } else {
              kachelixian.push(item);
            }
          })
          dianchan1.forEach((item) => {
            if (item.odo != 0) {
              dianchanzaixian.push(item);
            } else {
              dianchanlixian.push(item);
            }
          })
          qitache1.forEach((item) => {
            if (item.odo != 0) {
              qitachezaixian.push(item);
            } else {
              qitachelixian.push(item);
            }
          })
          this.carWorkingStateData.kacheonline = kachezaixian.length;
          this.carWorkingStateData.chancheonline = dianchanzaixian.length;
          this.carWorkingStateData.qitacheonline = qitachezaixian.length;
          this.carWorkingStateData.kacheoffline = kachelixian.length;
          this.carWorkingStateData.chancheoffline = dianchanlixian.length;
          this.carWorkingStateData.qitacheoffline = qitachelixian.length;
          this.draw3d();
          // this.$nextTick(() => {
          //   let parent = document.getElementById("chart-panel"); // 获取父元素
          //   let canvas = parent.getElementsByTagName("canvas"); // 获取父元素下面的所有canvas元素
          //   canvas[1].style.transform = "rotateX(30deg)";
          // });
        }
      })

      this.DPcomputer10BoxTimer = setInterval(() => {
        //获取车辆运行状况
        HttpReq.truckDispatching.carInformationQuery({size: 9999}).then((res) => {
          let kache1 = [];
          let kachezaixian = [];
          let kachelixian = [];
          let dianchan1 = [];
          let dianchanzaixian = [];
          let dianchanlixian = [];
          let qitache1 = [];
          let qitachezaixian = [];
          let qitachelixian = [];
          if (res.code == 200) {
            res.data.content.forEach((item) => {
              if (item.carclass == '卡车') {
                kache1.push(item);
              } else if (item.carclass == '铲车') {
                dianchan1.push(item);
              } else {
                qitache1.push(item);
              }
            })
            this.carWorkingStateData.optionData[0].value = kache1.length;
            this.carWorkingStateData.optionData[1].value = dianchan1.length;
            kache1.forEach((item) => {
              if (item.odo != 0) {
                kachezaixian.push(item);
              } else {
                kachelixian.push(item);
              }
            })
            dianchan1.forEach((item) => {
              if (item.odo != 0) {
                dianchanzaixian.push(item);
              } else {
                dianchanlixian.push(item);
              }
            })
            qitache1.forEach((item) => {
              if (item.odo != 0) {
                qitachezaixian.push(item);
              } else {
                qitachelixian.push(item);
              }
            })
            this.carWorkingStateData.kacheonline = kachezaixian.length;
            this.carWorkingStateData.chancheonline = dianchanzaixian.length;
            this.carWorkingStateData.qitacheonline = qitachezaixian.length;
            this.carWorkingStateData.kacheoffline = kachelixian.length;
            this.carWorkingStateData.chancheoffline = dianchanlixian.length;
            this.carWorkingStateData.qitacheoffline = qitachelixian.length;
            this.draw3d();
            // this.$nextTick(() => {
            //   let parent = document.getElementById("chart-panel"); // 获取父元素
            //   let canvas = parent.getElementsByTagName("canvas"); // 获取父元素下面的所有canvas元素
            //   canvas[1].style.transform = "rotateX(30deg)";
            // });
          }
        })
      }, 10000)

    },
    //车辆运行状况
    draw3d() {
      // 基于准备好的dom，初始化echarts实例
      if(this.chartPanel){
        this.chartPanel.clear();
      }else{
        this.chartPanel = echarts.init(document.getElementById("chart-panel"));
      }
      // echarts.init(document.getElementById('chart-panel')).dispose();
      for (let i = 0; i < this.carWorkingStateData.optionData.length; i++) {
        delete this.carWorkingStateData.optionData[i].itemStyle.opacity;
      }
      // 传入数据生成 option
      let series = getPie3D(this.carWorkingStateData.optionData, 0);
      let option = {
        tooltip: {
          formatter: (params) => {
            // console.log(params)
            if (
              params.seriesName !== "mouseoutSeries" &&
              params.seriesName !== "pie2d"
            ) {
              return `<div style="padding:0 0px">${params.seriesName}：${(
                option.series[params.seriesIndex].pieData.proportion * 100
              ).toFixed(2)}%</div>`;
            }
          },
        },
        xAxis3D: {
          min: -1,
          max: 1,
        },
        yAxis3D: {
          min: -1,
          max: 1,
        },
        zAxis3D: {
          min: -1,
          max: 1,
        },
        grid3D: {
          show: false, //是否显示三维笛卡尔坐标系。
          boxHeight: 20, //三维笛卡尔坐标系在三维场景中的高度
          top: "1%",
          // bottom: "80%",
          // environment: "#021041", //背景
          viewControl: {
            //用于鼠标的旋转，缩放等视角控制
            alpha: 25, //角度
            distance: 200, //调整视角到主体的距离，类似调整zoom 重要
            rotateSensitivity: 0, //设置为0无法旋转
            zoomSensitivity: 0, //设置为0无法缩放
            panSensitivity: 0, //设置为0无法平移
            autoRotate: false, //自动旋转
          },
        },
        series: series,
      };
      // this.chartPanel.setOption(option);

      //是否需要label指引线，如果要就添加一个透明的2d饼状图并调整角度使得labelLine和3d的饼状图对齐，并再次setOption
      option.series.push({
        name: "pie2d",
        type: "pie",
        label: {
          color: "#00D7E9",
          fontSize: 16,
          //  position: 'inner',
          // formatter: "{b}\n\n",
          // padding: [0, -40],
          formatter: (item) => {
            //  console.log(item)
            return item.data.name + ":" + item.data.value + "辆" + "";
          },
        },
        labelLine: {
          length: 50,
          length2: 30,
          lineStyle: {
            color: "#ffffff",
            width: 1.5,
          },
        },
        startAngle: 30, //起始角度，支持范围[0, 360]。 //重要
        clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
        radius: ["50%", "50%"],
        center: ["50%", "50%"],
        data: this.carWorkingStateData.optionData,
        itemStyle: {
          opacity: 0,
        },
        top: "15%",
        avoidLabelOverlap: true, //防止标签重叠
      });
      this.chartPanel.setOption(option);
    },
  },
  beforeDestroy() {
    if (this.DPcomputer10BoxTimer) {
      clearInterval(this.DPcomputer10BoxTimer);
      this.DPcomputer10BoxTimer = null;
    }
  }
}
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}

.DPcomputer10Box {
  width: 20vw;
  height: 32vh;
  background-color: rgba(32, 42, 67, 0.95);
  padding: 5px 7px;
  box-sizing: border-box;
  overflow: hidden;
}

.DPcomputer10Box .carManScrView_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;
}

.DPcomputer10Box .carManScrView_leftView_content {
  width: 100%;
  height: 27vh;
}
</style>
