调度界面

This commit is contained in:
小小 2025-05-16 15:23:21 +08:00
parent cda8a2f68f
commit 2e7a5047f5
2 changed files with 171 additions and 223 deletions

View File

@ -118,36 +118,34 @@
text-align: center;
}
.divQuantityCount {
.divQuantityCount,
.divCount {
font-size: 18px;
font-weight: bolder;
}
/* .divRowQC {
line-height: 25px;
.divFlex {
display: flex;
justify-content: space-evenly;
text-align: center;
}
.lbNoQC {
.divCountLabel {
font-size: 14px;
color: #000;
margin-left: 3px;
font-weight: 600;
}
.lbTag {
padding: 3px 10px;
font-size: 12px;
.divSlider {
display: flex;
align-items: center;
margin-left: 10px;
font-size: 14px;
padding-top: 10px;
}
.divSliderLable {
background-color: #E2F8FF;
border-radius: 15px;
margin-left: 5px;
}
.lbTagGreen {
color: #1DD950;
background-color: #E8F9E6;
}
.lbTagRed {
color: #F98F93;
background-color: #FFECED;
} */
padding: 3px 15px;
color: #0AB6F9;
margin-right: 10px;
}

View File

@ -1,6 +1,6 @@
<template>
<div class="divHead">
<label :class="selRight==index?'divHeadSel':''" v-for="(item,index) in arrRight" :key="index"
<label :class="selRight.index==index?'divHeadSel':''" v-for="(item,index) in arrRight" :key="index"
@click="queryOrders(item.lx,index)">
{{item.name}}
</label>
@ -69,9 +69,13 @@
</div>
</div>
<div class="divLowerRight">
<div @click="changeBatteries">
<div v-show="selRight.lx=='hd'" @click="changeBatteries">
<uni-icons type="scan" :color="iconcolor" :size="iconsize" />
<div>批量换电</div>
<div>换电</div>
</div>
<div v-show="selRight.lx=='dd'" @click="changeBatteries">
<uni-icons type="scan" :color="iconcolor" :size="iconsize" />
<div>调度</div>
</div>
</div>
<div class="divBottom">
@ -94,7 +98,8 @@
<div class="divQuantity">
<div class="divQuantityCount" :style="{color:color_middle}">{{q_cnt2}}</div>
<div>
<label><uni-icons custom-prefix="iconfont" :type="icon-ebikedianliang1"
<label>
<uni-icons custom-prefix="iconfont" type="icon-ebikedianliang1"
:color="color_middle" :size="iconsize" />
</label>
中电量
@ -114,74 +119,62 @@
</uni-col>
</uni-row>
<div style="padding-top: 10px;">
<uni-row>
<uni-col :span="6">
<div style="text-align: right;">电量筛选</div>
</uni-col>
<uni-col :span="16">
<slider show-value block-size="20" :value="quantityCount" :active-color="quantityColor"
:block-color="quantityColor" @change="quantityChange" />
</uni-col>
</uni-row>
<div class="divSlider">
<div style="text-align: right;">电量筛选</div>
<div style="flex: 1;">
<slider show-value block-size="20" :value="quantityCount" :active-color="quantityColor"
:block-color="quantityColor" @change="quantityChange" />
</div>
</div>
</div>
<div v-show="showQC_info" style="padding: 0px 10px;">
<div style="position:absolute;right:10px;top: -5px;" @click="colseQC_Info">
<div v-show="showBikeInfo" style="padding: 0px 10px;">
<div style="position:absolute;right:10px;top: -5px;" @click="colseBikeInfo">
<uni-icons custom-prefix="iconfont" type="icon-ebikeguanbi" size="20" color="#777777" />
</div>
<devops-home-bikeinfo :data="dataQC" />
<devops-home-bikeinfo :data="dataBikeInfo" />
</div>
<div v-show="showDD">
<div class="divFlex">
<div>
<div class="divCount">
{{dd_count.sxjg}}
</div>
<div class="divCountLabel">
筛选结果
</div>
</div>
<div>
<div class="divCount" :style="{color:color_down}">
{{dd_count.ccyyq}}
</div>
<div class="divCountLabel">
超出运营区域
<!-- <div v-show="showQC_info" style="padding: 0px 10px;">
<div style="position:absolute;right:10px;top: -5px;" @click="colseQC_Info">
<uni-icons custom-prefix="iconfont" type="icon-ebikeguanbi" size="20" color="#777777" />
</div>
<div class="divRowQC">
<lable class="lbNoQC">{{dataQC.bikeCode}}</lable>
<label v-for="(item,index) in dataQC.arrTag" :key="index" :class="getTagClass(item.type)">
{{item.title}}
</label>
</div>
<div class="divRowQC" style="color:#adb3b3;font-size: 14px;">
电量刷新时间{{dataQC.time}}
</div>
<div class="divRowQC" style="display:flex;justify-content: space-between;font-size: 14px;">
<label>
<label :style="{color:dataQC.color}">
<uni-icons custom-prefix="iconfont" :type="dataQC.icon" :color="dataQC.color"
:size="iconsize" />
{{dataQC.soc}}%
</label>
<lable style="color: #00C57C;margin-left: 10px;">
(
<label>
<uni-icons custom-prefix="iconfont" type="icon-ebikecheliangguanli"
color="#00C57C" />
</label>
<label>{{dataQC.distance}}</label>
)
</lable>
</label>
<div style="background-color:#E2F8FF;border-radius:15px;padding: 3px 15px;">
<label>
<uni-icons custom-prefix="iconfont" type="icon-ebikeyinlianglabashengyin"
color="#0084FF" size="16" />
</label>
<label style="color: #0084FF;" @click="findBike">寻车铃</label>
</div>
</div>
<div>
<div class="divCount" :style="{color:color_middle}">
{{dd_count.bztcq}}
</div>
<div class="divCountLabel">
不在停车区
</div>
</div>
</div>
<div style="margin-top:15px;display:flex;justify-content:space-between;">
<label class="divBtnBlue" @click="openBikeInfo">车辆详情</label>
<label class="divBtnBlue" @click="openBattery">电池开仓</label>
<label class="divBtnBlue" @click="changeBatteries">完成换电</label>
<div class="divSlider">
<div>无单筛选</div>
<div style="flex: 1;">
<slider show-value block-size="20" :max="showDD_LX_Max" :value="dd_selvalue"
@change="changeDDSelvalue" />
</div>
<div @click="changeDDLX">
<label class="divSliderLable" v-show="showDD_LX===1"> 天数</label>
<label class="divSliderLable" v-show="showDD_LX===2"> 小时</label>
</div>
</div>
</div> -->
</div>
</div>
</div>
@ -244,18 +237,24 @@
//
const arrRight = ref([{
name: "换电",
lx: "changebatteries"
lx: "hd"
},
{
name: "调度",
lx: "deploy"
lx: "dd"
},
{
name: "维修",
lx: "maintenance"
lx: "wx"
}
]);
const selRight = ref(0);
const selRight = ref({
index: 0,
...arrRight.value[0]
});
console.log("66666666666666666666666", selRight)
const mapRef = ref("mapRef");
let mapContext = null;
@ -283,8 +282,8 @@
const q_cnt0 = ref(0);
const q_cnt2 = ref(0);
const showQC = ref(true);
const showQC_info = ref(false);
const dataQC = ref({
const showBikeInfo = ref(false);
const dataBikeInfo = ref({
bikeCode: "",
arrTag: [],
time: "",
@ -294,6 +293,18 @@
icon: ""
})
const showDD = ref(false);
const showDD_LX = ref(1); // 1 2
const showDD_LX_Max = ref(7);
const dd_count = ref({
sxjg: 0, //
ccyyq: 0, //
bztcq: 0 //
});
const dd_selvalue = ref(0); //
let locationPoint = null; //
const arrAreaData = ref(null); //
@ -305,6 +316,28 @@
const showRegion = ref(false); //
const showColor = "#1088FD";
function changeDDSelvalue(e) {
const {
detail: {
value
}
} = e;
dd_selvalue = value;
showModelMessage("该功能暂未实现!");
}
//
function changeDDLX() {
let lx = 1;
let max = 7;
if (showDD_LX.value == 1) {
lx = 2;
max = 120;
}
showDD_LX.value = lx;
showDD_LX_Max.value = max;
}
//
onMounted(() => {
mapContext = map.getMap("mapRef", getCurrentInstance());
@ -518,106 +551,7 @@
loadMapBikeData(showBike.value, mapdata);
})
})
/* const params = {
zoneId
}
api.callOperateApi("ebikeRegion/getOperation", params, "get").then((res) => {
uni.hideLoading();
const {
code,
message,
data
} = res;
if (code == 200) {
const arrCircles = [];
const arrPolygons = [];
const arrRegionID = [];
data.map((item, index) => {
const {
shapeType,
regionId,
radius,
points
} = item;
arrRegionID.push(regionId);
const scolor = "#578FD4";
const fcolor = "#C0DAF5";
if (shapeType == 1) {
const {
longitude: lng,
latitude: lat
} = points[0];
arrCircles.push(map.addCirle(scolor, fcolor, lng, lat, radius));
} else if (shapeType == 2) {
const arrPoint = points.map(p => {
return {
longitude: p.longitude,
latitude: p.latitude
}
})
arrPolygons.push(map.addPolygon(scolor, fcolor, arrPoint));
}
});
let mapdata = {
zoneId,
arrCircles,
arrPolygons,
arrData: data
};
polygons.value = arrPolygons;
circles.value = arrCircles;
mapDataIndex = mapDataIndex == -1 ? mapData_opt.length : mapDataIndex;
mapData_opt[mapDataIndex] = mapdata;
//
if (arrRegionID.length == 0) return;
map.getRegionData(arrRegionID, (res) => {
const {
arrData,
arrCircles,
arrPolygons
} = res;
mapdata = {
...mapdata,
regionData: {
arrData,
arrCircles,
arrPolygons
}
};
mapData_opt[mapDataIndex] = mapdata;
loadMapRegionData(showRegion.value, mapdata);
//
if (arrRegionID.length == 0) return;
map.getBikeData(arrRegionID, (res) => {
const {
arrData,
arrPoints,
icnt,
icnt_0,
icnt_2
} = res;
mapdata = {
...mapdata,
bikeData: {
arrData,
arrPoints
}
};
mapData_opt[mapDataIndex] = mapdata;
q_cnt.value = icnt;
q_cnt0.value = icnt_0;
q_cnt2.value = icnt_2;
arrMakers = arrData;
loadMapBikeData(showBike.value, mapdata);
})
})
} else {
showModelMessage(message);
}
});
*/
}
//
@ -769,23 +703,50 @@
//
//
function changeBatteries() {
showModelMessage("该功能暂未实现!");
uni.navigateTo({
url: "/pages/devops/changebatteries/changebatteries"
})
}
//
function queryOrders(lx, index) {
selRight.value = index;
console.log("11111111111111111111", lx, index)
showModelMessage("该功能暂未实现!");
selRight.value = {
index,
...arrRight.value[index]
}
switch (index) {
case 0:
showDD.value = false;
showQC.value = true;
showBikeInfo.value = false;
break;
case 1:
showDD.value = true;
showQC.value = false;
showBikeInfo.value = false;
break;
}
}
//
function colseQC_Info() {
showQC.value = true;
showQC_info.value = false;
function colseBikeInfo() {
const {
lx
} = selRight.value;
switch (lx) {
case "dd":
showDD.value = true;
break;
case "hd":
showQC.value = true;
break;
}
showBikeInfo.value = false;
dataBikeInfo.value=null;
}
function markerTap(e) {
@ -806,7 +767,7 @@
longitude: elng,
latitude: elat
} = selMarker;
if (bikeCode == dataQC.value.bikeCode) {
if (bikeCode == dataBikeInfo.value.bikeCode) {
return;
}
map.getLoalcation(mapContext, (res) => {
@ -830,8 +791,9 @@
icon
} = getQCIcon(soc);
showQC.value = false;
showQC_info.value = true;
dataQC.value = {
showDD.value = false;
showBikeInfo.value = true;
dataBikeInfo.value = {
...selMarker,
bikeCode: bikeCode,
arrTag: [{
@ -845,7 +807,8 @@
color,
soc: soc,
distance: distance,
icon
icon,
rightlx: selRight.value.lx
}
mapContext.includePoints({
points: arrPoint,
@ -864,30 +827,17 @@
}
function regionchange(e) {
console.log("1111111111111111111111111", e)
// "centerLocation": {
// "latitude": 30.633169,
// "longitude": 103.975094
// },
// "region": {
// "southwest": {
// "latitude": 30.628234,
// "longitude": 103.971932
// },
// "northeast": {
// "latitude": 30.638104,
// "longitude": 103.978255
// }
// }
const {
type,causedBy,region
type,
causedBy,
region
} = e.detail;
if (type != "end") return;
const minLat= region.southwest.latitude;
const maxLat= region.northeast.latitude;
const minLng=region.southwest.longitude;
const maxLng= region.northeast.longitude;
const minLat = region.southwest.latitude;
const maxLat = region.northeast.latitude;
const minLng = region.southwest.longitude;
const maxLng = region.northeast.longitude;
}
</script>