<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">
      <div class="wzddlist" v-for="item in AllData.wzddData">
        <img class="wzdd_img" :src="item.img" alt="" />
        <div class="wzdd_name">{{ item.name }}</div>
        <div class="wzdd_Num">{{ item.Num }}</div>
        <div class="wzdd_unit">{{ item.unit }}</div>
      </div>
    </div>
  </div>
</template>

<script setup>
import ChartCl from "./chartCl.vue";
import ChartXcry from "./ChartXcry.vue";
import track from "@/assets/track.json";
import track1 from "@/assets/track1.json";
import car from "@/assets/newImgs/car.png";
import mapBoxVectorLayer from "@/utils/GISdocument/mapboxVectorLayer.js";
import { ref, reactive, toRefs, onMounted, onBeforeUnmount } from "vue";
import Img_yy from "@/assets/images/fhpl/yy.png";
import Img_djj from "@/assets/images/fhpl/djj.png";
import Img_yb from "@/assets/images/fhpl/yb.png";
import Img_jsy from "@/assets/images/fhpl/jsy.png";
import Img_qsb from "@/assets/images/fhpl/qsb.png";
import Img_qt from "@/assets/images/fhpl/qt.png";
const ryData = ref({});
const ryRefresh = ref("");
const clData = {
  xData: ["陕J234S3", "陕JF9768"],
  data1: [9.8, 11],
  data2: [21, 28],
  refresh: "1",
};
const AllData = reactive({
  wzddData: [
    {
      img: Img_yy,
      name: "雨衣",
      Num: 20,
      unit: "件",
    },
    {
      img: Img_djj,
      name: "对讲机",
      Num: 24,
      unit: "部",
    },
    {
      img: Img_yb,
      name: "油布",
      Num: 32,
      unit: "卷",
    },
    {
      img: Img_jsy,
      name: "救生衣",
      Num: 45,
      unit: "件",
    },
    {
      img: Img_qsb,
      name: "潜水泵",
      Num: 20,
      unit: "个",
    },
    {
      img: Img_qt,
      name: "其他",
      Num: 57,
      unit: "件",
    },
  ],
});
// 车辆调度
function getCarIndex(num) {
  console.log("num--", num);
  if (num == 0) {
    clearInterval(window.routeTimer);
    mapBoxVectorLayer.removeByIds(["dynamicRoute", "dynamicRoute_Symbol"]);
    let center = turf.center(track);
    newfiberMapbox.map.easeTo({
      center: [center.geometry.coordinates[0], center.geometry.coordinates[1] - 0.005],
      zoom: 13.8,
    });
    mapBoxVectorLayer.addDynamicRoute("dynamicRoute", track, car);
  } else if (num == 1) {
    clearInterval(window.routeTimer);
    mapBoxVectorLayer.removeByIds(["dynamicRoute", "dynamicRoute_Symbol"]);
    let center = turf.center(track1);
    newfiberMapbox.map.easeTo({
      center: [center.geometry.coordinates[0], center.geometry.coordinates[1] - 0.005],
      zoom: 13.8,
    });
    mapBoxVectorLayer.addDynamicRoute("dynamicRoute", track1, 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: calc(100% - 550px);
  .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: 16px;
        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: 250px;
  // 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: 16px;
      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: 280px;
  // 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: 16px;
      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);
    display: flex;
    flex-direction: row;
    align-content: space-around;
    justify-content: space-around;
    align-items: center;
    .wzddlist {
      width: calc(50% - 10px);
      height: 70px;
      background: linear-gradient(
        90deg,
        rgba(22, 97, 127, 0.1) 0%,
        rgba(33, 177, 237, 0.5) 100%
      );
      border-radius: 4px;
      box-sizing: border-box;
      padding: 10px;

      .wzdd_img {
        width: 50px;
        height: 50px;
        float: left;
      }
      .wzdd_name {
        height: 50px;
        line-height: 50px;
        float: left;
        font-family: Source Han Sans CN;
        font-weight: 500;
        font-size: 18px;
        color: #ffffff;
        margin-left: 15px;
        width: 60px;
      }
      .wzdd_Num {
        height: 50px;
        line-height: 50px;
        float: left;
        font-family: Source Han Sans CN;
        font-weight: bold;
        font-size: 26px;
        color: #00f2ff;
      }
      .wzdd_unit {
        height: 50px;
        line-height: 50px;
        float: right;
        font-family: Source Han Sans CN;
        font-weight: 500;
        font-size: 18px;
        color: #ffffff;
      }
    }
  }
}

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