mengff
/
jihe-hs
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

feat export getContent

wangqin
qingzhengli 9 months ago
parent
45be9fd2a2
commit
741a30a632
2 changed files with 91 additions and 82 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 12
      ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/RoadAndEvents/utils/buttonEvent.js
  2. 161
      ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/RoadAndEvents/utils/map.js

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

@ -9,8 +9,8 @@ import { EventTopics } from "@screen/utils/enum.js";
import { debounce } from "lodash";
import Vue from "vue";
import { markerClusterIns } from "./map";
const canvasCtx = Vue.prototype.canvasCtx;
import { markerClusterIns, getContent } from "./map";
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);
}

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

@ -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();

Write Preview
Loading…
Cancel
Save