<template>
  <!--调度回顾  -->
  <div class="Scheduling">
    <div class="ListBoxHeader">
      <div class="ListBoxHeader_font">调度回顾</div>
    </div>
    <div class="topDispatch">
      <div class="personnel flex">
        <div class="icon"></div>
        <div class="text">人员调度</div>
      </div>
      <div class="ScheduEcharts"></div>
    </div>
  </div>
  <!--车辆调度  -->
  <div class="VehiclDispatch">
    <div class="topVehicl flex">
      <div class="icon"></div>
      <div class="text">车辆调度</div>
    </div>
    <div class="VehiclEcharts">
      <ChartCl :echartData="clData" :refresh="clData.refresh" @updateKey="getCarIndex" />
    </div>
  </div>
  <!-- 物资调度 -->
  <div class="MaterialScheduling">
    <div class="topMaterial flex">
      <div class="icon"></div>
      <div class="text">物资调度</div>
    </div>
    <div class="MaterialEcharts"></div>
  </div>
</template>

<script setup name="ZHPS">
import ChartCl from './chartCl.vue';
import track from '@/assets/track.json';
import car from '@/assets/newImgs/car.png';
import mapBoxVectorLayer from '@/utils/GISdocument/mapboxVectorLayer.js';
import { ref, reactive, toRefs, onMounted, onBeforeUnmount } from 'vue';

const clData = {
  xData: ['陕J6JU85'],
  data1: [9.8],
  data2: [21],
  refresh: '1',
};

// 车辆调度
function getCarIndex(num) {
  console.log('num--', num);
  let center = turf.center(track);
  console.log('center---', center);
  newfiberMapbox.map.easeTo({
    center: [center.geometry.coordinates[0], center.geometry.coordinates[1] - 0.005],
    zoom: 13.8,
  });
  mapBoxVectorLayer.addDynamicRoute('dynamicRoute', track, car);
}
</script>

<style lang="scss" scoped>
.Scheduling {
  width: 450px;
  height: 37%;
  .topDispatch {
    margin: 5px auto;
    width: 445px;
    height: calc(100% - 50px);
    // background: yellow;
    .personnel {
      height: 26px;
      // background: red;
      .icon {
        position: relative;
        left: 10px;
        width: 25px;
        height: 25px;
        background: url('@/assets/newImgs/xtb_img.png') no-repeat;
      }
      .text {
        font-family: Source Han Sans CN;
        font-weight: bold;
        font-size: 14px;
        color: #ebfeff;
        line-height: 25px;
        position: relative;
        left: 10px;
        background: linear-gradient(0deg, rgba(0, 242, 255, 0.5) 0%, rgba(0, 242, 255, 0) 100%);
        height: 10px;
        line-height: 0px;
        margin-top: 10px;
      }
    }
    .ScheduEcharts {
      margin: 10px auto;
      width: 410px;
      height: calc(100% - 45px);
      // background: red;
      background: url('@/assets/images/fhpl/rydd.png') no-repeat;
      background-size: 100% 100%;
    }
  }
}
.VehiclDispatch {
  margin-top: 5px;
  width: 450px;
  height: 30%;
  // background: yellowgreen;
  .topVehicl {
    height: 26px;
    // background: red;
    .icon {
      position: relative;
      left: 10px;
      width: 25px;
      height: 25px;
      background: url('@/assets/newImgs/xtb_img.png') no-repeat;
    }
    .text {
      font-family: Source Han Sans CN;
      font-weight: bold;
      font-size: 14px;
      color: #ebfeff;
      line-height: 25px;
      position: relative;
      left: 10px;
      background: linear-gradient(0deg, rgba(0, 242, 255, 0.5) 0%, rgba(0, 242, 255, 0) 100%);
      height: 10px;
      line-height: 0px;
      margin-top: 10px;
    }
  }
  .VehiclEcharts {
    margin: 10px auto;
    width: 410px;
    height: calc(100% - 45px);
  }
}
.MaterialScheduling {
  margin-top: 5px;
  width: 450px;
  height: 30%;
  // background: rgb(233, 201, 24);
  .topMaterial {
    height: 26px;
    // background: red;
    .icon {
      position: relative;
      left: 10px;
      width: 25px;
      height: 25px;
      background: url('@/assets/newImgs/xtb_img.png') no-repeat;
    }
    .text {
      font-family: Source Han Sans CN;
      font-weight: bold;
      font-size: 14px;
      color: #ebfeff;
      line-height: 25px;
      position: relative;
      left: 10px;
      background: linear-gradient(0deg, rgba(0, 242, 255, 0.5) 0%, rgba(0, 242, 255, 0) 100%);
      height: 10px;
      line-height: 0px;
      margin-top: 10px;
    }
  }
  .MaterialEcharts {
    margin: 10px auto;
    width: 410px;
    height: calc(100% - 45px);
    // background: red;
    background: url('@/assets/images/fhpl/wzdd.png') no-repeat;
    background-size: 100% 100%;
  }
}

.ListBoxHeader {
  height: 44px;
  line-height: 50px;
  width: 98%;
  background: url('@/assets/newImgs/partBg.png') no-repeat;
  background-size: 100% 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 7px 0px 0px 8px;
  .ListBoxHeader_font {
    font-family: PangMenZhengDao;
    font-weight: 400;
    font-size: 23px;
    color: #ebfeff;
    padding-left: 34px;
  }
}
</style>