Browse Source

修改图标展示

wangqin
Joe 10 months ago
parent
commit
1d71b14779
  1. 14
      ruoyi-ui/src/views/JiHeExpressway/images/deviceType/ball.svg
  2. 14
      ruoyi-ui/src/views/JiHeExpressway/images/deviceType/ball_fault.svg
  3. 15
      ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/RoadAndEvents/utils/buttonEvent.js
  4. 36
      ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/RoadAndEvents/utils/map.js

14
ruoyi-ui/src/views/JiHeExpressway/images/deviceType/ball.svg

@ -0,0 +1,14 @@
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="Frame 10218">
<g id="Frame" clip-path="url(#clip0_507_10)">
<path id="Vector" d="M16.0002 13.451C16.3331 13.4513 16.6584 13.5502 16.9351 13.7353C17.2118 13.9204 17.4274 14.1834 17.5546 14.4911C17.6819 14.7987 17.715 15.1372 17.6499 15.4636C17.5848 15.7901 17.4244 16.09 17.1889 16.3253C16.9534 16.5606 16.6535 16.7208 16.3269 16.7857C16.0004 16.8505 15.662 16.8171 15.3545 16.6897C15.0469 16.5622 14.7841 16.3464 14.5991 16.0696C14.4142 15.7928 14.3155 15.4674 14.3155 15.1345C14.3158 14.6879 14.4935 14.2597 14.8094 13.944C15.1253 13.6283 15.5536 13.451 16.0002 13.451ZM16.0002 12.1082C15.4014 12.1082 14.8161 12.2857 14.3182 12.6184C13.8203 12.9511 13.4323 13.4239 13.2031 13.9771C12.974 14.5303 12.914 15.139 13.0308 15.7263C13.1476 16.3136 13.436 16.8531 13.8594 17.2765C14.2828 17.6999 14.8223 17.9882 15.4095 18.105C15.9968 18.2219 16.6056 18.1619 17.1588 17.9328C17.712 17.7036 18.1848 17.3156 18.5175 16.8177C18.8502 16.3198 19.0277 15.7345 19.0277 15.1357C19.0277 14.3327 18.7087 13.5627 18.141 12.9949C17.5732 12.4271 16.8031 12.1082 16.0002 12.1082Z" fill="#0FD4FF"/>
<path id="Vector_2" d="M16.0006 6C10.9558 6 6.86621 10.0896 6.86621 15.1343C6.86621 20.1791 10.9563 24.2684 16.0006 24.2684C21.0448 24.2684 25.1347 20.1791 25.1347 15.1343C25.1347 10.0896 21.0453 6 16.0006 6ZM16.0006 7.51694C16.1633 7.51694 16.3225 7.56521 16.4578 7.65565C16.5932 7.74608 16.6987 7.87463 16.761 8.02502C16.8232 8.17541 16.8395 8.3409 16.8078 8.50056C16.776 8.66021 16.6976 8.80686 16.5825 8.92197C16.4674 9.03708 16.3208 9.11546 16.1611 9.14722C16.0015 9.17898 15.836 9.16268 15.6856 9.10038C15.5352 9.03809 15.4067 8.9326 15.3162 8.79725C15.2258 8.6619 15.1775 8.50277 15.1775 8.33999C15.1775 8.23189 15.1987 8.12485 15.2401 8.02498C15.2814 7.92511 15.3421 7.83437 15.4185 7.75793C15.4949 7.6815 15.5857 7.62087 15.6856 7.57952C15.7854 7.53817 15.8925 7.51691 16.0006 7.51694ZM16.0006 19.5655C15.1241 19.5656 14.2673 19.3057 13.5385 18.8188C12.8097 18.3319 12.2417 17.6398 11.9063 16.83C11.5708 16.0203 11.483 15.1293 11.654 14.2696C11.825 13.41 12.2471 12.6204 12.8668 12.0006C13.4866 11.3809 14.2762 10.9588 15.1358 10.7878C15.9955 10.6168 16.8865 10.7046 17.6963 11.04C18.506 11.3755 19.1981 11.9435 19.685 12.6723C20.1719 13.4011 20.4318 14.2579 20.4317 15.1343C20.4317 15.7163 20.3171 16.2925 20.0944 16.8301C19.8717 17.3677 19.5453 17.8562 19.1339 18.2677C18.7224 18.6791 18.2339 19.0055 17.6963 19.2282C17.1587 19.4509 16.5825 19.5655 16.0006 19.5655Z" fill="#0FD4FF"/>
<path id="Vector_3" d="M15.9997 25.4203C14.1167 25.4232 12.2693 24.9068 10.6608 23.9277L8.58887 25.9999H23.4106L21.3384 23.9277C19.73 24.9068 17.8827 25.4233 15.9997 25.4203Z" fill="#0FD4FF"/>
</g>
</g>
<defs>
<clipPath id="clip0_507_10">
<rect width="20" height="20" fill="white" transform="translate(6 6)"/>
</clipPath>
</defs>
</svg>

After

Width:  |  Height:  |  Size: 2.8 KiB

14
ruoyi-ui/src/views/JiHeExpressway/images/deviceType/ball_fault.svg

@ -0,0 +1,14 @@
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="Frame 10225">
<g id="Frame" clip-path="url(#clip0_507_22)">
<path id="Vector" d="M16.0002 13.451C16.3331 13.4513 16.6584 13.5502 16.9351 13.7353C17.2118 13.9204 17.4274 14.1834 17.5546 14.4911C17.6819 14.7987 17.715 15.1372 17.6499 15.4636C17.5848 15.7901 17.4244 16.09 17.1889 16.3253C16.9534 16.5606 16.6535 16.7208 16.3269 16.7857C16.0004 16.8505 15.662 16.8171 15.3545 16.6897C15.0469 16.5622 14.7841 16.3464 14.5991 16.0696C14.4142 15.7928 14.3155 15.4674 14.3155 15.1345C14.3158 14.6879 14.4935 14.2597 14.8094 13.944C15.1253 13.6283 15.5536 13.451 16.0002 13.451ZM16.0002 12.1082C15.4014 12.1082 14.8161 12.2857 14.3182 12.6184C13.8203 12.9511 13.4323 13.4239 13.2031 13.9771C12.974 14.5303 12.914 15.139 13.0308 15.7263C13.1476 16.3136 13.436 16.8531 13.8594 17.2765C14.2828 17.6999 14.8223 17.9882 15.4095 18.105C15.9968 18.2219 16.6056 18.1619 17.1588 17.9328C17.712 17.7036 18.1848 17.3156 18.5175 16.8177C18.8502 16.3198 19.0277 15.7345 19.0277 15.1357C19.0277 14.3327 18.7087 13.5627 18.141 12.9949C17.5732 12.4271 16.8031 12.1082 16.0002 12.1082Z" fill="#FF5F5F"/>
<path id="Vector_2" d="M16.0006 6C10.9558 6 6.86621 10.0896 6.86621 15.1343C6.86621 20.1791 10.9563 24.2684 16.0006 24.2684C21.0448 24.2684 25.1347 20.1791 25.1347 15.1343C25.1347 10.0896 21.0453 6 16.0006 6ZM16.0006 7.51694C16.1633 7.51694 16.3225 7.56521 16.4578 7.65565C16.5932 7.74608 16.6987 7.87463 16.761 8.02502C16.8232 8.17541 16.8395 8.3409 16.8078 8.50056C16.776 8.66021 16.6976 8.80686 16.5825 8.92197C16.4674 9.03708 16.3208 9.11546 16.1611 9.14722C16.0015 9.17898 15.836 9.16268 15.6856 9.10038C15.5352 9.03809 15.4067 8.9326 15.3162 8.79725C15.2258 8.6619 15.1775 8.50277 15.1775 8.33999C15.1775 8.23189 15.1987 8.12485 15.2401 8.02498C15.2814 7.92511 15.3421 7.83437 15.4185 7.75793C15.4949 7.6815 15.5857 7.62087 15.6856 7.57952C15.7854 7.53817 15.8925 7.51691 16.0006 7.51694ZM16.0006 19.5655C15.1241 19.5656 14.2673 19.3057 13.5385 18.8188C12.8097 18.3319 12.2417 17.6398 11.9063 16.83C11.5708 16.0203 11.483 15.1293 11.654 14.2696C11.825 13.41 12.2471 12.6204 12.8668 12.0006C13.4866 11.3809 14.2762 10.9588 15.1358 10.7878C15.9955 10.6168 16.8865 10.7046 17.6963 11.04C18.506 11.3755 19.1981 11.9435 19.685 12.6723C20.1719 13.4011 20.4318 14.2579 20.4317 15.1343C20.4317 15.7163 20.3171 16.2925 20.0944 16.8301C19.8717 17.3677 19.5453 17.8562 19.1339 18.2677C18.7224 18.6791 18.2339 19.0055 17.6963 19.2282C17.1587 19.4509 16.5825 19.5655 16.0006 19.5655Z" fill="#FF5F5F"/>
<path id="Vector_3" d="M15.9997 25.4203C14.1167 25.4232 12.2693 24.9068 10.6608 23.9277L8.58887 25.9999H23.4106L21.3384 23.9277C19.73 24.9068 17.8827 25.4233 15.9997 25.4203Z" fill="#FF5F5F"/>
</g>
</g>
<defs>
<clipPath id="clip0_507_22">
<rect width="20" height="20" fill="white" transform="translate(6 6)"/>
</clipPath>
</defs>
</svg>

After

Width:  |  Height:  |  Size: 2.8 KiB

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

@ -33,6 +33,9 @@ export const eventMap = {
// status: "0", // status: "0",
// }; // };
const ballFault = require("@screen/images/deviceType/ball_fault.svg");
const ball = require("@screen/images/deviceType/ball.svg");
const data = await getDeviceList(1); const data = await getDeviceList(1);
// const data = [ // const data = [
// { // {
@ -74,6 +77,18 @@ export const eventMap = {
data: extData, data: extData,
}; };
} catch (error) {} } catch (error) {}
},
null,
{
iconCallback(bool, item) {
const type = JSON.parse(item.otherConfig)?.ptzCtrl;
switch (type) {
case "0":
case 0:
return bool ? ball : ballFault;
}
},
} }
); );
}, },

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

@ -97,20 +97,30 @@ export async function setMarkerCluster(map, points, markerFun) {
* @param {*} _markerClick marker 点击 * @param {*} _markerClick marker 点击
* @returns * @returns
*/ */
export async function setMarkToMap(item, data, _markerClick, content) { export async function setMarkToMap(
item,
data,
_markerClick,
content,
{ iconCallback } = {}
) {
const { mapIns } = this.getMap(); const { mapIns } = this.getMap();
if (!mapIns) return Message.error("地图加载失败!"); if (!mapIns) return Message.error("地图加载失败!");
const normal = require(`@screen/images/layer${item.id.replace( const normal =
/^\.|[^/]+(?=.svg$)/g, normal ||
(data) => (data === "." ? "" : `${data}`) require(`@screen/images/layer${item.id.replace(
)}`); /^\.|[^/]+(?=.svg$)/g,
(data) => (data === "." ? "" : `${data}`)
)}`);
const fault = require(`@screen/images/layer${item.id.replace( const fault =
/^\.|[^/]+(?=.svg$)/g, fault ||
(data) => (data === "." ? "" : `${data}_fault`) require(`@screen/images/layer${item.id.replace(
)}`); /^\.|[^/]+(?=.svg$)/g,
(data) => (data === "." ? "" : `${data}_fault`)
)}`);
const faultBg = require(`@screen/images/mapBg/fault.svg`); const faultBg = require(`@screen/images/mapBg/fault.svg`);
const normalBg = require(`@screen/images/mapBg/normal.svg`); const normalBg = require(`@screen/images/mapBg/normal.svg`);
@ -124,6 +134,10 @@ export async function setMarkToMap(item, data, _markerClick, content) {
const markerCluster = await setMarkerCluster( const markerCluster = await setMarkerCluster(
mapIns, mapIns,
data.map((item) => { data.map((item) => {
const deviceIcon =
iconCallback === "function" &&
iconCallback(item.deviceState == 1, item);
return { return {
weight: 1, weight: 1,
lnglat: [item.longitude, item.latitude], lnglat: [item.longitude, item.latitude],
@ -146,7 +160,9 @@ export async function setMarkToMap(item, data, _markerClick, content) {
height: 18px; height: 18px;
margin-left: 3px; margin-left: 3px;
margin-bottom: 6px; margin-bottom: 6px;
" src='${item.deviceState == 1 ? normal : fault}'> " src='${
deviceIcon ? deviceIcon : item.deviceState == 1 ? normal : fault
}'>
</div>`, </div>`,
}; };
}), }),

Loading…
Cancel
Save