feat export getContent

ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/RoadAndEvents/utils/buttonEvent.js

@@ -9,8 +9,8 @@ import { EventTopics } from "@screen/utils/enum.js";
 import { debounce } from "lodash";
 import Vue from "vue";
 
-import { markerClusterIns } from "./map";
+import { markerClusterIns, getContent } from "./map";
-const canvasCtx = Vue.prototype.canvasCtx;
+const graphInstance = Vue.prototype.graphInstance;
 
 const cameraIcon = {
   // 球机
@@ -287,11 +287,19 @@ function lngLatMapHandle(markers, cb) {
 }
 
 function addDataPreHandle(markers) {
+  // console.log(markers, graphInstance, "addData");
+
   const cb = (lngLatStr, markerData) => {
     if (lngLatMap[lngLatStr])
       !lngLatMap[lngLatStr].includes(markerData) &&
         lngLatMap[lngLatStr].push(markerData);
     else lngLatMap[lngLatStr] = [markerData];
+    // console.log(
+    //   getContent(lngLatMap[lngLatStr]),
+    //   lngLatMap[lngLatStr],
+    //   lngLatStr,
+    //   "marker div"
+    // );
   };
   lngLatMapHandle(markers, cb);
 }

ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/RoadAndEvents/utils/map.js

@@ -77,84 +77,6 @@ export class MarkerCluster {
     }, 150);
   }
 
-  getState(data) {
-    if (Array.isArray(data)) {
-      return data.every((item) => this.getStateSingle(item));
-    } else return this.getStateSingle(data);
-  }
-
-  getStateSingle({ config, extData }) {
-    return typeof config.stateCallback === "function"
-      ? config.stateCallback?.()
-      : extData.deviceState == 1;
-  }
-
-  getIcon({ config, extData }) {
-    const normal = require(`@screen/images/layer${config.item.id.replace(
-      /^\.|[^/]+(?=.svg$)/g,
-      (str) => (str === "." ? "" : `${str}_active`)
-    )}`);
-
-    const fault = require(`@screen/images/layer${config.item.id.replace(
-      /^\.|[^/]+(?=.svg$)/g,
-      (str) => (str === "." ? `` : `${str}_fault`)
-    )}`);
-
-    const currentState = this.getState({ config, extData });
-
-    const deviceIcon =
-      typeof config.iconCallback === "function" &&
-      config.iconCallback(currentState, extData, config.item);
-
-    return deviceIcon ? deviceIcon : currentState ? normal : fault;
-  }
-
-  getContent(data) {
-    const faultBg = require(`@screen/images/mapBg/fault.svg`);
-    const normalBg = require(`@screen/images/mapBg/active.svg`);
-    const nowBg = this.getState(data) ? normalBg : faultBg;
-    if (data.length === 1) {
-      return `
-      <div style="
-        background-image: url(${nowBg});
-        background-size: 100% 100%;
-        background-repeat: no-repeat;
-        width: 51px;
-        height: 51px;
-        display: flex;
-        justify-content: center;
-      ">
-        <img style="
-            min-width: 24px;
-            min-height: 24px;
-            width: 24px;
-            height: 24px;
-            margin-top: 8.1px;
-          " src='${this.getIcon(data[0])}'
-        >
-      </div>
-    `;
-    } else {
-      const width = `${36 + `${data.length}`.length * 15}px`;
-
-      return `
-      <div style="
-        background-image: url(${nowBg});
-        background-size: 100% 100%;
-        background-repeat: no-repeat;
-        width: ${width};
-        height: ${width};
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        padding-bottom: 9px;
-      ">
-        ${data.length}
-      </div>
-  `;
-    }
-  }
-
   async showInfoWindow(data) {
     const AMap = await loadAMap();
 
@@ -194,7 +116,7 @@ export class MarkerCluster {
           .map(
             (item) => `
               <div style="cursor: pointer; padding: 3px 6px;display: flex;align-items: center; gap: 6px;" class="info-window-item">
-                <img  style="width: 18px;" src="${this.getIcon(item)}" />
+                <img  style="width: 18px;" src="${getIcon(item)}" />
                 <span>${
                   item.extData.deviceName ||
                   item.extData.warningTitle ||
@@ -280,7 +202,7 @@ export class MarkerCluster {
         } = markerData;
         const lngLatStr = `${lng}/${lat}`;
 
-        context.marker.setContent(this.getContent(lngLatMap[lngLatStr]));
+        context.marker.setContent(getContent(lngLatMap[lngLatStr]));
 
         context.marker.setAnchor("bottom-center");
 
@@ -332,4 +254,83 @@ export class MarkerCluster {
   }
 }
 
+export function getContent(data) {
+  const faultBg = require(`@screen/images/mapBg/fault.svg`);
+  const normalBg = require(`@screen/images/mapBg/active.svg`);
+  const nowBg = getState(data) ? normalBg : faultBg;
+  if (data.length === 1) {
+    return `
+    <div style="
+      background-image: url(${nowBg});
+      background-size: 100% 100%;
+      background-repeat: no-repeat;
+      width: 51px;
+      height: 51px;
+      display: flex;
+      justify-content: center;
+    ">
+      <img style="
+          min-width: 24px;
+          min-height: 24px;
+          width: 24px;
+          height: 24px;
+          margin-top: 8.1px;
+        " src='${getIcon(data[0])}'
+      >
+    </div>
+  `;
+  } else {
+    const width = `${36 + `${data.length}`.length * 15}px`;
+
+    return `
+    <div style="
+      background-image: url(${nowBg});
+      background-size: 100% 100%;
+      background-repeat: no-repeat;
+      width: ${width};
+      height: ${width};
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      padding-bottom: 9px;
+    ">
+      ${data.length}
+    </div>
+`;
+  }
+}
+
+function getIcon({ config, extData }) {
+  const normal = require(`@screen/images/layer${config.item.id.replace(
+    /^\.|[^/]+(?=.svg$)/g,
+    (str) => (str === "." ? "" : `${str}_active`)
+  )}`);
+
+  const fault = require(`@screen/images/layer${config.item.id.replace(
+    /^\.|[^/]+(?=.svg$)/g,
+    (str) => (str === "." ? `` : `${str}_fault`)
+  )}`);
+
+  const currentState = getState({ config, extData });
+
+  const deviceIcon =
+    typeof config.iconCallback === "function" &&
+    config.iconCallback(currentState, extData, config.item);
+
+  return deviceIcon ? deviceIcon : currentState ? normal : fault;
+}
+
+function getState(data) {
+  if (Array.isArray(data)) {
+    return data.every((item) => getStateSingle(item));
+  } else return getStateSingle(data);
+}
+
+function getStateSingle({ config, extData }) {
+  console.log(config, "getStateSingle");
+  return typeof config?.stateCallback === "function"
+    ? config.stateCallback?.()
+    : extData.deviceState == 1;
+}
+
 export const markerClusterIns = new MarkerCluster();