- <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);
- .personnel {
- height: 26px;
- .icon {
- 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;
- padding-left: 5px;
- box-shadow: inset 0px -7px 10px -5px #47eef38a;
- }
- }
- .ScheduEcharts {
- margin: 5px auto;
- width: 445px;
- height: calc(100% - 35px);
- }
- }
- }
- .VehiclDispatch {
- margin-top: 5px;
- width: 450px;
- height: 30%;
- // background: yellowgreen;
- .topVehicl {
- height: 26px;
- // background: red;
- .icon {
- 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;
- padding-left: 5px;
- box-shadow: inset 0px -7px 10px -5px #47eef38a;
- }
- }
- .VehiclEcharts {
- margin: 5px auto;
- width: 445px;
- height: calc(100% - 35px);
- // background: red;
- }
- }
- .MaterialScheduling {
- margin-top: 5px;
- width: 450px;
- height: 30%;
- // background: rgb(233, 201, 24);
- .topMaterial {
- height: 26px;
- // background: red;
- .icon {
- 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;
- padding-left: 5px;
- box-shadow: inset 0px -7px 10px -5px #47eef38a;
- }
- }
- .MaterialEcharts {
- margin: 5px auto;
- width: 445px;
- height: calc(100% - 35px);
- // background: red;
- }
- }
- .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>