<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"></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 { ref, reactive, toRefs, onMounted, onBeforeUnmount } from 'vue';
</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;
        box-shadow: inset 0px -7px 10px -5px #47eef38a;
      }
    }
    .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;
      box-shadow: inset 0px -7px 10px -5px #47eef38a;
    }
  }
  .VehiclEcharts {
    margin: 10px auto;
    width: 410px;
    height: calc(100% - 45px);
    background: url('@/assets/images/fhpl/cldd.png') no-repeat;
    background-size: 100% 100%;
  }
}
.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;
      box-shadow: inset 0px -7px 10px -5px #47eef38a;
    }
  }
  .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>