<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">
        <ChartXcry :echartData="ryData" :refresh="ryRefresh" />
      </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 flex">
      <div class="yyBox">
        <div class="wzBox_A flex flex-align-center flex-justcontent-spacebetween">
          <div style="font-family: Source Han Sans CN; font-weight: 500; font-size: 14px; color: #ffffff; margin-left: 20px">
            雨衣
          </div>
          <div style="font-family: DINPro; font-weight: bold; font-size: 18px; color: #00f2ff; margin-right: 20px">20</div>
        </div>
      </div>
      <div class="djjBox">
        <div class="wzBox_A flex flex-align-center flex-justcontent-spacebetween">
          <div style="font-family: Source Han Sans CN; font-weight: 500; font-size: 14px; color: #ffffff; margin-left: 20px">
            对讲机
          </div>
          <div style="font-family: DINPro; font-weight: bold; font-size: 18px; color: #00f2ff; margin-right: 20px">24</div>
        </div>
      </div>
      <div class="ybBox">
        <div class="wzBox_A flex flex-align-center flex-justcontent-spacebetween">
          <div style="font-family: Source Han Sans CN; font-weight: 500; font-size: 14px; color: #ffffff; margin-left: 20px">
            油布
          </div>
          <div style="font-family: DINPro; font-weight: bold; font-size: 18px; color: #00f2ff; margin-right: 20px">32</div>
        </div>
      </div>
      <div class="jsyBox">
        <div class="wzBox_A flex flex-align-center flex-justcontent-spacebetween">
          <div style="font-family: Source Han Sans CN; font-weight: 500; font-size: 14px; color: #ffffff; margin-left: 20px">
            救生衣
          </div>
          <div style="font-family: DINPro; font-weight: bold; font-size: 18px; color: #00f2ff; margin-right: 20px">45</div>
        </div>
      </div>
      <div class="qsbBox">
        <div class="wzBox_A flex flex-align-center flex-justcontent-spacebetween">
          <div style="font-family: Source Han Sans CN; font-weight: 500; font-size: 14px; color: #ffffff; margin-left: 20px">
            潜水泵
          </div>
          <div style="font-family: DINPro; font-weight: bold; font-size: 18px; color: #00f2ff; margin-right: 20px">20</div>
        </div>
      </div>
      <div class="qtBox">
        <div class="wzBox_A flex flex-align-center flex-justcontent-spacebetween">
          <div style="font-family: Source Han Sans CN; font-weight: 500; font-size: 14px; color: #ffffff; margin-left: 20px">
            其他
          </div>
          <div style="font-family: DINPro; font-weight: bold; font-size: 18px; color: #00f2ff; margin-right: 20px">57</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import ChartCl from './chartCl.vue';
import ChartXcry from './ChartXcry.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 ryData = ref({});
const ryRefresh = ref('');
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);
}
// 人员
function getData() {
  let obj = {
    xData: [
      '市卫健委',
      '市水务局',
      '市城管局',
      '市自然资源局',
      '市交通运输局',
      '市气象局',
      '市公安局',
      '市消防救援支队',
      '市应急管理局',
    ],
    data: [10, 15, 20, 12, 28, 30, 35, 40, 50],
    num: [],
  };
  let max = JSON.parse(JSON.stringify(obj.data));
  let one = max.sort((a, b) => b - a)[0];
  max.forEach(i => {
    obj.num.push(one);
  });
  ryData.value = obj;
  ryRefresh.value = Math.random();
}
onMounted(() => {
  getData();
});
</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: 12px;
      }
    }
    .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: 12px;
    }
  }
  .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: 12px;
    }
  }
  .MaterialEcharts {
    margin: 10px auto;
    width: 430px;
    flex-wrap: wrap;
    // background: red;
    height: calc(100% - 45px);
    .yyBox {
      margin-top: 8px;
      margin-left: 13px;
      width: 197px;
      height: 50px;
      background: url('@/assets/images/fhpl/yy.png') no-repeat;
      background-size: 100% 100%;
      .wzBox_A {
        width: 139px;
        height: 39px;
        position: relative;
        top: 6px;
        left: 55px;
      }
    }
    .djjBox {
      margin-top: 8px;
      margin-left: 13px;
      width: 197px;
      height: 50px;
      background: url('@/assets/images/fhpl/djj.png') no-repeat;
      background-size: 100% 100%;
      .wzBox_A {
        width: 139px;
        height: 39px;
        position: relative;
        top: 6px;
        left: 55px;
      }
    }
    .ybBox {
      margin-top: 8px;
      margin-left: 13px;
      width: 197px;
      height: 50px;
      background: url('@/assets/images/fhpl/yb.png') no-repeat;
      background-size: 100% 100%;
      .wzBox_A {
        width: 139px;
        height: 39px;
        position: relative;
        top: 6px;
        left: 55px;
      }
    }
    .jsyBox {
      margin-top: 8px;
      margin-left: 13px;
      width: 197px;
      height: 50px;
      background: url('@/assets/images/fhpl/jsj.png') no-repeat;
      background-size: 100% 100%;
      .wzBox_A {
        width: 139px;
        height: 39px;
        position: relative;
        top: 6px;
        left: 55px;
      }
    }
    .qsbBox {
      margin-top: 8px;
      margin-left: 13px;
      width: 197px;
      height: 50px;
      background: url('@/assets/images/fhpl/qsb.png') no-repeat;
      background-size: 100% 100%;
      .wzBox_A {
        width: 139px;
        height: 39px;
        position: relative;
        top: 6px;
        left: 55px;
      }
    }
    .qtBox {
      margin-top: 8px;
      margin-left: 13px;
      width: 197px;
      height: 50px;
      background: url('@/assets/images/fhpl/qt.png') no-repeat;
      background-size: 100% 100%;
      .wzBox_A {
        width: 139px;
        height: 39px;
        position: relative;
        top: 6px;
        left: 55px;
      }
    }
  }
}

.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>