ebike-ui/ebike-maintenance/pages/home/home.vue

<template>
  <div class="divHead">
    <label
      :class="selRight.index == index ? 'divHeadSel' : ''"
      v-for="(item, index) in arrRight"
      :key="index"
      @click="queryOrders(item.lx, index)"
    >
      {{ item.name }}
    </label>
  </div>
  <div>
    <div class="divTag">
      <uni-row>
        <uni-col :span="8">
          <label
            class="divbgColor mapFont"
            style="
              padding: 5px 10px;
              border-radius: 15px;
              font-weight: bold;
              border: 1px solid #80808061;
            "
            @click="onShowDrawer"
          >
            <label style="margin-left: 5px">
              <uni-icons
                custom-prefix="iconfont"
                type="icon-ebikeqiehuan"
                :color="iconcolor"
                :size="iconsize"
              />
            </label>
            切区
          </label>
        </uni-col>
        <uni-col :span="14">
          <label
            style="
              padding: 5px 15px;
              border-radius: 15px;
              background-color: #35374dc2;
              color: white;
            "
            @click="navigatePageByOrder"
          >
            当前范围内可接单车辆 |
            <label style="margin-left: 5px">{{ orderCount || 0 }}</label>
            <uni-icons
              type="right"
              size="12"
              color="white"
              v-show="selRight.lx !== 'wx'"
            ></uni-icons>
          </label>
        </uni-col>
      </uni-row>
    </div>
    <div class="divLowerLeft">
      <div class="divBtn">
        <div style="padding: 10px 10px 5px 10px">
          <uni-icons
            custom-prefix="iconfont"
            type="icon-ebikejia"
            :color="iconcolor"
            :size="iconsize"
            @click="onZoom('out')"
          />
        </div>
        <div style="padding: 5px 10px 10px 10px">
          <uni-icons
            custom-prefix="iconfont"
            type="icon-ebikejian"
            :color="iconcolor"
            :size="iconsize"
            @click="onZoom('in')"
          />
        </div>
      </div>
      <div class="divBtn">
        <div class="divBtnTitle" @click="getLocation">
          <uni-icons
            custom-prefix="iconfont"
            type="icon-ebikedingwei2"
            :color="iconcolor"
            :size="iconsize"
          />
          <div>定位</div>
        </div>
        <div class="divBtnTitle" @click="refreshArea">
          <uni-icons
            custom-prefix="iconfont"
            type="icon-ebikeshuaxin"
            :color="iconcolor"
            :size="iconsize"
          />
          <div>刷新</div>
        </div>
        <div
          class="divBtnTitle"
          style="padding-bottom: 10px"
          @click="
            () => {
              showMore = !showMore;
            }
          "
        >
          <uni-icons
            custom-prefix="iconfont"
            type="icon-ebikea-gengduo3x"
            :color="iconcolor"
            :size="iconsize"
          />
          <div>更多</div>
        </div>
      </div>
      <div v-if="showMore" class="divLowerLeftMore">
        <div class="divBtn divLowerLeftMoreBtn" @click="showRegionData">
          <uni-icons
            custom-prefix="iconfont"
            type="icon-ebikeP"
            :color="showRegion ? showColor : iconcolor"
            :size="iconsize"
          />
          <div :style="{ color: showRegion ? showColor : iconcolor }">站点</div>
        </div>
        <div class="divBtn divLowerLeftMoreBtn" @click="showBikeData">
          <uni-icons
            custom-prefix="iconfont"
            type="icon-ebikedianpingchechongdianzhuang"
            :color="showBike ? showColor : iconcolor"
            :size="iconsize"
          />
          <div :style="{ color: showBike ? showColor : iconcolor }">车辆</div>
        </div>
      </div>
    </div>
    <div class="divLowerRight">
      <div v-show="selRight.lx == 'hd'" @click="openChangebatteries">
        <uni-icons type="scan" :color="iconcolor" :size="iconsize" />
        <div>换电</div>
      </div>
      <div v-show="selRight.lx == 'dd'" @click="openVehicledispatch">
        <uni-icons type="scan" :color="iconcolor" :size="iconsize" />
        <div>调度</div>
      </div>
      <div v-show="selRight.lx == 'wx'" @click="openMaintain">
        <uni-icons type="scan" :color="iconcolor" :size="iconsize" />
        <div>维修</div>
      </div>
    </div>
    <div class="divBottom">
      <div class="divBottomBack">
        <!-- 换电 -->
        <div v-show="showQC">
          <uni-row>
            <uni-col :span="8">
              <div class="divQuantity">
                <div class="divQuantityCount" :style="{ color: color_down }">
                  {{ q_cnt0 }}
                </div>
                <div>
                  <label>
                    <uni-icons
                      custom-prefix="iconfont"
                      type="icon-ebikedianliang"
                      :color="color_down"
                      :size="iconsize"
                    />
                  </label>
                  低电量
                </div>
              </div>
            </uni-col>
            <uni-col :span="8">
              <div class="divQuantity">
                <div class="divQuantityCount" :style="{ color: color_middle }">
                  {{ q_cnt1 }}
                </div>
                <div>
                  <label>
                    <uni-icons
                      custom-prefix="iconfont"
                      type="icon-ebikedianliang1"
                      :color="color_middle"
                      :size="iconsize"
                    />
                  </label>
                  中电量
                </div>
              </div>
            </uni-col>
            <uni-col :span="8">
              <div class="divQuantity">
                <div class="divQuantityCount" :style="{ color: color_high }">
                  {{ q_cnt2 }}
                </div>
                <div>
                  <label
                    ><uni-icons
                      custom-prefix="iconfont"
                      type="icon-ebikedianliang2"
                      :color="color_high"
                      :size="iconsize"
                    />
                  </label>
                  高电量
                </div>
              </div>
            </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="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="dataBikeInfo" />
        </div>
        <!-- 调度 -->
        <div v-show="showDD">
          <div class="divFlex">
            <div>
              <div class="divCount">
                {{ orderCount }}
              </div>
              <div class="divCountLabel">筛选结果</div>
            </div>
            <div>
              <div class="divCount" :style="{ color: color_down }">
                {{ dd_count.ccyyq }}
              </div>
              <div class="divCountLabel">超出运营区域</div>
            </div>
            <div>
              <div class="divCount" :style="{ color: color_middle }">
                {{ dd_count.bztcq }}
              </div>
              <div class="divCountLabel">不在停车区</div>
            </div>
          </div>
          <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 v-show="showWX">
          <div class="flex-wrapper">
            <div
              class="flex-column-wrapper"
              v-for="(item, index) in WX_list"
              :key="index"
              @click="handleWxClick(item)"
            >
              <div
                class="wx-value"
                :style="{
                  color: item.color,
                }"
              >
                {{ item.value }}
              </div>
              <div class="wx-labal">{{ item.label }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 维修车辆详情 -->
    <you-touchbox
      ref="touchboxRef"
      initTop="0"
      :disable="isTouchDisable"
      minTop="0"
      maxTop="380"
      :customStyle="{
        borderRadius: '40rpx',
        backgroundColor: '#f5f5f5',
        boxShadow: '0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04)',
      }"
    >
      <BikeMaintainDetail
        ref="BikeMaintainDetailRef"
        @apiChangeAll="() => touchboxRef.setBottom(0.5)"
      />
    </you-touchbox>

    <uni-drawer ref="showArea" mode="right" :width="300">
      <div class="divArea">
        <div v-for="(item, index) in arrAreaData" :key="index">
          <div style="margin-bottom: 10px; padding-left: 10px">
            <label style="font-size: 1.2rem">{{ item.city }}</label>
          </div>
          <uni-row>
            <uni-col
              :span="12"
              v-for="(data, indexd) in item.country"
              :key="indexd"
            >
              <div style="padding: 2px 10px; margin-bottom: 5px">
                <div
                  style="
                    line-height: 30px;
                    text-align: center;
                    border-radius: 20rpx;
                    background-color: #8080801a;
                    color: #056cec;
                  "
                  @click="clickArea(data)"
                >
                  {{ data.name }}
                </div>
              </div>
            </uni-col>
          </uni-row>
        </div>
      </div>
    </uni-drawer>

    <map
      :style="{ width: '100%', height: height }"
      show-location
      id="mapRef"
      ref="mapRef"
      :scale="scale"
      :markers="markers"
      :longitude="mapcenter.longitude"
      :latitude="mapcenter.latitude"
      :circles="circles"
      :polygons="polygons"
      :polyline="polylines"
      @markertap="markerTap"
      @labeltap="markerTap"
      @regionchange="regionchange"
    />
  </div>
</template>

<script setup>
import AMapWX from "@/utils/amap-wx.130.js";
import navigator from "@/utils/navigator.js";
import * as map from "@/utils/map.js";
import { ref, onMounted, getCurrentInstance } from "vue";
import { showModelMessage } from "@/utils/tools.js";
import * as api from "@/utils/api.js";
import { findIndex, find } from "lodash";
import { useSelarea } from "@/stores/selarea.js";
import BikeMaintainDetail from "@/components/bike-maintain-detail/bike-maintain-detail.vue";

var amapsdk = new AMapWX({
  key: map.sdkKey,
});
const systemInfo = uni.getSystemInfoSync();
const height = systemInfo.screenHeight - systemInfo.statusBarHeight - 95 + "px";

//权限
const arrRight = ref([
  {
    name: "换电",
    lx: "hd",
  },
  {
    name: "调度",
    lx: "dd",
  },
  {
    name: "维修",
    lx: "wx",
  },
]);
const selRight = ref({
  index: 0,
  ...arrRight.value[0],
});

const mapRef = ref("mapRef");
let mapContext = null;
const iconsize = 16;
const iconcolor = "#6f7777";
const showArea = ref(null);
const mapcenter = ref({
  longitude: null,
  latitude: null,
});
const scale = ref(17);
const markers = ref([]); //点
const polygons = ref([]); //面
const polylines = ref([]);
const circles = ref([]); //圆
let arrMakers = [];

const orderCount = ref(0); //接单数量
const quantityCount = ref(100); // 电量
const color_down = "#EF4B4D"; //低电量
const color_middle = "#F29710"; //中电量
const color_high = "#3DB71A"; //高电量
const quantityColor = ref(color_high);
const q_cnt2 = ref(0);
const q_cnt0 = ref(0);
const q_cnt1 = ref(0);
const showQC = ref(true);
const showBikeInfo = ref(false);
const dataBikeInfo = ref({
  bikeCode: "",
  arrTag: [],
  time: "",
  color: "",
  soc: "",
  distance: "",
  icon: "",
});

const showDD = ref(false);
const changeBatteryArr = ref([]); //范围内可换电的车辆
const dispatchArr = ref([]); //范围内可调度的车辆
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); //行政区划
const mapData_opt = []; //运营区数据
let arrSelData = [];
let selArea = null; //选中行政区划
const selAreaStore = useSelarea();
const showMore = ref(false); //显示更多
const showBike = ref(true); //显示车辆
const showRegion = ref(false); //显示站点
const showColor = "#1088FD";

const showWX = ref(false); //维修
const BikeMaintainDetailRef = ref(null);
const touchboxRef = ref(null); //调度wrapper的top值
const WX_list = ref([
  {
    label: "总数",
    value: 0,
    color: "",
    points: [],
  },
  {
    label: "故障",
    value: 0,
    color: "red",
    points: [],
  },
  {
    label: "用户报修",
    value: 0,
    color: "orange",
    points: [],
  },
]);
const currentWxIndex = ref("总数"); // 维修当前选中项

let loadeTime = null;
let minLat = 0;
let maxLat = 0;
let minLng = 0;
let maxLng = 0;

function changeDDSelvalue(e) {
  const {
    detail: { value },
  } = e;
  dd_selvalue.value = value;
  showMarker();
}

//调度查询类型
function changeDDLX() {
  let lx = 1;
  let max = 7;
  if (showDD_LX.value == 1) {
    lx = 2;
    max = 120;
  }

  dd_selvalue.value =
    dd_selvalue.value == showDD_LX_Max.value ? max : dd_selvalue.value;
  showDD_LX.value = lx;
  showDD_LX_Max.value = max;
  showMarker();
}

//获取行政区划
function getZone(callback) {
  api.callOperateApi("ebikeRegion/getZone", null, "get").then((res) => {
    console.log(res);
    const arrData = [];
    const { code, data, message } = res;
    if (code != 200) {
      showModelMessage(message);
      if (callback) callback(arrData);
      return;
    }
    if (data && data.length > 0) {
      data.map((item) => {
        const { id, name, lng, lat, cityName } = item;
        let index = findIndex(arrData, {
          city: cityName,
        });
        let oData = arrData[index];
        const obj = {
          id,
          name,
          lat,
          lng,
        };
        if (index == "-1") {
          index = 0;
          oData = {
            city: cityName,
            country: [obj],
          };
        } else {
          oData["country"].push(obj);
        }
        arrData[index] = oData;
      });
    }
    if (locationPoint) {
      arrData.splice(0, 0, locationPoint);
    }
    if (callback) callback(arrData);
  });
}

//定位
function getLocation() {
  map.getLoalcation(mapContext, (res) => {
    const { latitude, longitude } = res;
    mapcenter.value = {
      longitude: longitude,
      latitude: latitude,
    };
    scale.value = 17;
  });
}

//显示区域
function onShowDrawer() {
  showArea.value.open();
}

//切换区域
function clickArea(data) {
  changeArea(data);
  showArea.value.close();
}

function changeArea(data, refresh) {
  const { id, lng, lat } = data;
  selArea = data;
  selAreaStore.setValue(id);
  const zoneId = id;
  mapcenter.value = {
    latitude: lat,
    longitude: lng,
  };
  let mapDataIndex = findIndex(mapData_opt, {
    zoneId,
  });
  loadeTime = Date.now();
  if (!refresh) {
    if (mapDataIndex > -1) {
      console.log(mapData_opt);

      loadMapData(mapData_opt[mapDataIndex]);
      return;
    }
  }
  uni.showLoading({
    title: "加载中",
  });

  map.getOperation(zoneId, (res) => {
    uni.hideLoading();
    if (!res) return;
    const { arrRegionID, arrCircles, arrPolygons, arrData } = res;
    let mapdata = {
      zoneId,
      arrCircles,
      arrPolygons,
      arrData,
    };
    polygons.value = arrPolygons;
    circles.value = arrCircles;
    mapDataIndex = mapDataIndex == -1 ? mapData_opt.length : mapDataIndex;
    mapData_opt[mapDataIndex] = mapdata;

    //站点
    if (arrRegionID.length == 0) return;
    const params = {
      operationRegionId: arrRegionID,
    };
    map.getRegionData(arrRegionID, (res) => {
      const { arrData, arrCircles, arrPolygons } = res;
      mapdata = {
        ...mapdata,
        regionData: {
          arrData,
          arrCircles,
          arrPolygons,
        },
      };
      mapData_opt[mapDataIndex] = mapdata;
      loadMapRegionData(showRegion.value, mapdata);
    });

    //车辆
    map.getBikeData(arrRegionID, (res) => {
      const { arrData } = res;

      arrMakers = arrData;
      const countData = showMarker();
      showCountData(countData);
      mapdata = {
        ...mapdata,
        bikeData: { arrData },
      };
      mapData_opt[mapDataIndex] = mapdata;
    });
  });
}

//地图数据
function loadMapData(data) {
  const {
    bikeData: { arrData },
  } = data;
  arrMakers = arrData;
  const countData = showMarker();
  showCountData(countData);
  loadMapBikeData(showBike.value, data);
  loadMapRegionData(showRegion.value, data);
}

function showCountData(data) {
  const { icnt_2, icnt_0, icnt_1 } = data;
  const { lx } = selRight.value;
  switch (lx) {
    case "hd":
      q_cnt0.value = icnt_0;
      q_cnt1.value = icnt_1;
      q_cnt2.value = icnt_2;
      break;
    case "dd":
      dd_count.value.ccyyq = icnt_1;
      dd_count.value.bztcq = icnt_2;
      break;
    case "wx":
      break;
  }
}

//显示隐藏车辆
function showBikeData() {
  const show = !showBike.value;
  showBike.value = show;
  const { id } = selArea;
  const data = find(mapData_opt, {
    zoneId: id,
  });
  if (!data) return;
  loadMapBikeData(show, data);
}

function loadMapBikeData(show, data) {
  const { bikeData } = data;
  if (show) {
    if (bikeData) {
      const { arrData } = bikeData;
      showMarker();
      return;
    }
  }
  markers.value = [];
}

//显示隐藏站点
function showRegionData() {
  const show = !showRegion.value;
  showRegion.value = show;
  const { id } = selArea;
  const data = find(mapData_opt, {
    zoneId: id,
  });
  if (!data) return;
  loadMapRegionData(show, data);
}

function loadMapRegionData(show, data) {
  const { arrCircles, arrPolygons, regionData } = data;
  if (show) {
    if (regionData) {
      polygons.value = [...arrPolygons, ...regionData.arrPolygons];
      circles.value = [...arrCircles, ...regionData.arrCircles];
      return;
    }
  }
  polygons.value = arrPolygons;
  circles.value = arrCircles;
}

//刷新
function refreshArea() {
  changeArea(selArea, true);
}

//缩放
function onZoom(lx) {
  switch (lx) {
    case "out":
      scale.value = scale.value + 1;
      break;
    case "in":
      scale.value = scale.value - 1;
      break;
  }
}

//电量筛选
function quantityChange(e) {
  const {
    detail: { value },
  } = e;
  quantityCount.value = value;
  const { color } = getQCIcon(value);
  quantityColor.value = color;

  showMarker();
}

function getQCIcon(value) {
  let scolor = "";
  let icon = "";
  if (value <= 20) {
    scolor = color_down;
    icon = "icon-ebikedianliang";
  } else if (value <= 60) {
    scolor = color_middle;
    icon = "icon-ebikedianliang1";
  } else {
    scolor = color_high;
    icon = "icon-ebikedianliang2";
  }
  return {
    color: scolor,
    icon,
  };
}

//换电
function openChangebatteries() {
  uni.navigateTo({
    url: "/pages/devops/changebatteries/changebatteries",
  });
}

//切换tab选项
function queryOrders(lx, index) {
  selRight.value = {
    index,
    ...arrRight.value[index],
  };

  switch (index) {
    case 0:
      showDD.value = false;
      showQC.value = true;
      showWX.value = false;
      showBikeInfo.value = false;
      touchboxRef.value.setBottom(0);
      break;
    case 1:
      showDD.value = true;
      showQC.value = false;
      showWX.value = false;
      showBikeInfo.value = false;
      touchboxRef.value.setBottom(0);
      break;
    case 2:
      showDD.value = false;
      showQC.value = false;
      showWX.value = true;
      showBikeInfo.value = false;
      break;
  }
  dataBikeInfo.value = {};
  polylines.value = [];
  const countData = showMarker();
  showCountData(countData);
}

//关闭电量信息
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 = {};
  polylines.value = [];
}

function markerTap(e) {
  console.log(e);
  const { markerId } = e.detail;
  // 维修车辆点击事件
  if (selRight.value.lx == "wx") {
    const selMarker = WX_list.value[0].points[markerId];
    markerTap_Wx(selMarker);
    return;
  }
  const selMarker = arrMakers[markerId];
  if (!selMarker) {
    console.log("markerTap未找到点！");
    return;
  }
  const {
    updatedAt,
    bikeCode,
    soc,
    state,
    usageStatus,
    longitude: elng,
    latitude: elat,
  } = selMarker;
  console.log(selMarker);
  if (bikeCode == dataBikeInfo.value.bikeCode) {
    return;
  }
  map.getLoalcation(
    mapContext,
    (res) => {
      const { latitude: slat, longitude: slng } = res;
      const options = {
        mapsdk: amapsdk,
        slng,
        slat,
        elng,
        elat,
        success: (res) => {
          let { arrPoint, distance } = res;
          const { color, icon } = getQCIcon(soc);
          showQC.value = false;
          showDD.value = false;
          showBikeInfo.value = true;
          dataBikeInfo.value = {
            ...selMarker,
            bikeCode: bikeCode,
            arrTag: [
              {
                title: "低电量",
                type: "red",
              },
              {
                title: "待使用",
                type: "green",
              },
            ],
            time: updatedAt,
            color,
            soc: soc,
            distance: distance,
            icon,
            rightlx: selRight.value.lx,
          };
          mapContext.includePoints({
            points: arrPoint,
            padding: [50, 50, 50, 50], // 视野边缘与点的间距
            success: () => {
              polylines.value = [map.addLine("#1082FF", arrPoint)];
            },
          });
        },
        fail: (res) => {
          console.log("fail", res);
        },
      };
      map.direction(options);
    },
    null,
    true
  );
}

function markerTap_Wx(target) {
  if (target) {
    const { detail } = target;
    if (touchboxRef.value) {
      BikeMaintainDetailRef.value.getBikeInfo(detail.bikeCode);
    }
  }
}

function regionchange(e) {
  const { type, causedBy, region, scale } = e.detail;
  if (type != "end") return;
  minLat = region.southwest.latitude;
  maxLat = region.northeast.latitude;
  minLng = region.southwest.longitude;
  maxLng = region.northeast.longitude;
  const l = Math.floor((Date.now() - loadeTime) / 1000);
  if (l >= 2) {
    showMarker();
  }
}

function showMarker() {
  let oData = {};
  if (arrMakers.length == 0) {
    orderCount.value = 0;
    markers.value = [];
  } else {
    const { lx } = selRight.value;
    const maxcnt = 100;
    switch (lx) {
      case "hd":
        oData = showMarker_HD(lx, maxcnt);
        changeBatteryArr.value = oData.changeBattery;
        break;
      case "dd":
        oData = showMarker_DD(lx, maxcnt);
        dispatchArr.value = oData.dispatch;
        break;
      case "wx":
        showMarker_WX(lx, maxcnt).then((res) => {
          oData = res;
          console.log("维修数据", oData);
          markers.value = oData.arrPoints;
          console.log("markers", markers.value);
        });
        break;
    }

    orderCount.value = oData.ordercnt;
    markers.value = oData.arrPoints;
  }
  const { icnt_2, icnt_0, icnt_1 } = oData;

  return { icnt_2, icnt_0, icnt_1 };
}

function showMarker_HD(lx, maxcnt) {
  let icnt_2 = 0;
  let icnt_0 = 0;
  let icnt_1 = 0;
  let showCount = 0;
  let arrPoints = [];
  let ordercnt = 0;
  let changeBattery = []; //需要换电车辆

  arrMakers.map((item, index) => {
    item = {
      ...item,
      soc: item.soc || 0,
    };
    const { bikeId, longitude: lng, latitude: lat, soc } = item;
    if (soc <= 20) {
      icnt_0++;
    } else if (soc <= 60) {
      icnt_1++;
    } else {
      icnt_2++;
    }
    if (
      !(lng <= maxLng && lng >= minLng && lat <= maxLat && lat >= minLat) ||
      soc > quantityCount.value
    )
      return;
    if (soc <= 20) {
      ordercnt++;
      changeBattery.push(item);
    }
    showCount++;
    arrPoints.push(map.addMarker_Q(index, item, showCount > maxcnt, lx));
  });
  if (showCount > maxcnt) {
    for (let i = 0; i < arrPoints.length; i++) {
      arrPoints[i] = { ...arrPoints[i], joinCluster: true };
    }
  }
  return {
    icnt_2,
    icnt_0,
    icnt_1,
    showCount,
    ordercnt,
    arrPoints,
    changeBattery,
  };
}

function showMarker_DD(lx, maxcnt) {
  let icnt_0 = 0;
  let icnt_1 = 0;
  let icnt_2 = 0;
  let showCount = 0;
  let arrPoints = [];
  let dispatch = []; //需要调度车辆

  arrMakers.map((item, index) => {
    const {
      bikeId,
      longitude: lng,
      latitude: lat,
      inOperation,
      inParking,
      intervalTime,
    } = item;
    if (!inOperation) {
      icnt_1++;
    } else if (!inParking) {
      icnt_2++;
    } else {
      return;
    }
    if (!(lng <= maxLng && lng >= minLng && lat <= maxLat && lat >= minLat))
      return;
    let cnt = dd_selvalue.value;
    if (showDD_LX.value == "1") cnt = cnt * 24;
    if (intervalTime > cnt) return;
    showCount++;
    dispatch.push(item);
    arrPoints.push(map.addMarker_Q(index, item, showCount > maxcnt, lx));
  });
  if (showCount > maxcnt) {
    for (let i = 0; i < arrPoints.length; i++) {
      arrPoints[i] = { ...arrPoints[i], joinCluster: true };
    }
  }

  return {
    icnt_2,
    icnt_0,
    icnt_1,
    showCount,
    ordercnt: showCount,
    arrPoints,
    dispatch,
  };
}

async function showMarker_WX(lx, maxcnt) {
  try {
    const arrPoints = [];
    const filteredBikes = [];

    // 获取车辆列表中状态为 4（待维修）
    if (arrMakers.length > 0) {
      arrMakers.map((car) => {
        const { state } = car;
        if (state === 4) {
          filteredBikes.push({
            ...car,
            type: "故障",
          });
        }
      });
    }
    //调取维修工单接口获取
    const { data } = await api.callEbikeInfo("getWorkOrderList", {
      orderType: "",
      bikeCode: "",
      pageParam: {
        pageNum: 1,
        pageSize: 9999,
      },
    });

    uni.hideLoading();

    const { records } = data;
    if (records && records.length > 0) {
      records.map((car) => {
        const { orderType } = car;
        if (orderType === "1") {
          filteredBikes.push({
            ...car,
            type: "用户上报故障",
          });
        }
      });
    }

    if (filteredBikes.length > 0) {
      WX_list.value.forEach((item) => {
        item.value = 0;
        item.points = [];
      });

      WX_list.value[0].value = filteredBikes.length;

      filteredBikes.map((car, index) => {
        const { longitude: lng, latitude: lat } = car;

        if (car.type === "故障") {
          WX_list.value[1].value++;
        } else if (car.type === "用户上报故障") {
          WX_list.value[2].value++;
        }

        if (
          !(lng <= maxLng && lng >= minLng && lat <= maxLat && lat >= minLat)
        ) {
          console.log("车辆不在当前区域内，跳过");
          return;
        }

        const point = map.addMarker_Q(index, car, true, lx);
        WX_list.value[0].points.push({
          ...point,
          detail: car,
        });

        if (car.type === "故障" && currentWxIndex.value === "故障") {
          arrPoints.push(point);
        } else if (
          car.type === "用户上报故障" &&
          currentWxIndex.value === "用户报修"
        ) {
          arrPoints.push(point);
        } else if (currentWxIndex.value === "总数") {
          arrPoints.push(point);
        }
      });
    }

    return {
      arrPoints,
    };
  } catch (error) {
    console.error("数据组装失败", error);
    uni.hideLoading();
    return {
      arrPoints: [],
    };
  }
}

function handleWxClick(it) {
  uni.showLoading({ title: "加载中..." });
  const { label } = it;
  currentWxIndex.value = label;
  showMarker();
}

//调度
function openVehicledispatch() {
  uni.navigateTo({
    url: "/pages/warehouse/vehicledispatch/vehicledispatch",
  });
}

function openMaintain() {
  navigator.to("/pages/devops/maintenancepage/maintenancepage");
}

//接单类型页面跳转
const navigatePageByOrder = () => {
  const { lx } = selRight.value;
  switch (lx) {
    case "hd":
      navigator.to("/pages/devops/takeOrders/takeOrders", {
        changeBatteryArr: changeBatteryArr.value,
      });
      break;
    case "dd":
      navigator.to("/pages/devops/dispatchTakeOrders/dispatchTakeOrders", {
        dispatchArr: dispatchArr.value,
      });
      break;
    case "wx":
      break;
  }
};

//加载后
onMounted(() => {
  mapContext = map.getMap("mapRef", getCurrentInstance());
  getLocation();
  // setTimeout(()=>{
  // 	generatePoints(1000);
  // },2000);
  // return;
  getZone((arrData) => {
    //获取当前定位
    map.getLoalcation(mapContext, (res) => {
      const { latitude: lat, longitude: lng } = res;
      mapcenter.value = {
        latitude: lat,
        longitude: lng,
      };

      map.reverseGeocoder(
        amapsdk,
        lng,
        lat,
        (res) => {
          const { name, formatted_address, adcode, province, city, district } =
            res;
          // const {
          // 	ad_info: {
          // 		adcode,
          // 		city,
          // 		district
          // 	}
          // } = res;
          const data = {
            id: adcode,
            name: district,
            lat,
            lng,
          };
          locationPoint = {
            city: "当前定位" + city,
            country: [data],
          };
          arrData = arrData || [];
          arrData.splice(0, 0, locationPoint);
          arrAreaData.value = arrData;
          changeArea(data);
        },
        (res) => {
          showModelMessage("切换区域失败！");
        }
      );
    });
  });
});
</script>

<style scoped>
@import url("home.css");
</style>