<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: 15px;
color: #ffffff;
margin-left: 20px;
"
>
雨衣
</div>
<div
style="
font-family: Source Han Sans CN;
font-weight: bold;
font-size: 17px;
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: 15px;
color: #ffffff;
margin-left: 20px;
"
>
对讲机
</div>
<div
style="
font-family: Source Han Sans CN;
font-weight: bold;
font-size: 17px;
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: 15px;
color: #ffffff;
margin-left: 20px;
"
>
油布
</div>
<div
style="
font-family: Source Han Sans CN;
font-weight: bold;
font-size: 17px;
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: 15px;
color: #ffffff;
margin-left: 20px;
"
>
救生衣
</div>
<div
style="
font-family: Source Han Sans CN;
font-weight: bold;
font-size: 17px;
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: 15px;
color: #ffffff;
margin-left: 20px;
"
>
潜水泵
</div>
<div
style="
font-family: Source Han Sans CN;
font-weight: bold;
font-size: 17px;
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: 15px;
color: #ffffff;
margin-left: 20px;
"
>
其他
</div>
<div
style="
font-family: Source Han Sans CN;
font-weight: bold;
font-size: 17px;
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 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";
const ryData = ref({});
const ryRefresh = ref("");
const clData = {
xData: ["陕J234S3", "陕JF9768"],
data1: [9.8, 11],
data2: [21, 28],
refresh: "1",
};
// 车辆调度
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: 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: 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: 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: 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: 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: 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);
.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>
