[Frontend][系統監控] 熱點顯示 popover 程序建置及資料串接 | 熱點變色程序建置
This commit is contained in:
parent
0499c2c439
commit
02969cecbf
@ -273,13 +273,13 @@
|
||||
if (!res || res.code != "0000" || !res.data) {
|
||||
|
||||
} else {
|
||||
debugger
|
||||
|
||||
let myDataList = [];
|
||||
$.each(res.data, (idx, data) => {
|
||||
let item = {};
|
||||
item.position = {};
|
||||
if (item.device_coordinate_3d != null && isJSON(item.device_coordinate_3d)) {
|
||||
item.position = JSON.parse(x.device_coordinate_3d);
|
||||
if (data.device_coordinate_3d != null && isJSON(data.device_coordinate_3d)) {
|
||||
item.position = JSON.parse(data.device_coordinate_3d);
|
||||
}
|
||||
$.extend(item, data);
|
||||
myDataList.push(item);
|
||||
@ -298,15 +298,39 @@
|
||||
getHopspotPoint(myDataList);
|
||||
}
|
||||
|
||||
onEvent("autodesk:click:sprite", "[name=forgeViewer]", function (e, obj,dbObj) {
|
||||
onEvent("autodesk:click:sprite", "[name=forgeViewer]", function (e, obj) {
|
||||
debugger
|
||||
let position = {};
|
||||
position.tpLeft = obj.target.toolController.lastClickX;
|
||||
position.tpTop = obj.target.toolController.lastClickY;
|
||||
position.tpLeft = obj.event.target.toolController.lastClickX;
|
||||
position.tpTop = obj.event.target.toolController.lastClickY;
|
||||
position.tpOffHeight = 24;
|
||||
let parentEle = creDiv();
|
||||
let devObj = obj.myData;
|
||||
parentEle.append(`<a href="javascript:;" name="devItem" class=" ml-2 mb-0 ">詳細資料</a>`);
|
||||
parentEle.data("id", devObj.device_guid);
|
||||
parentEle.data("number", devObj.device_number);
|
||||
parentEle.data("dbId", devObj._dbId);
|
||||
let name = allDevList.filter(x => x.device_guid == devObj.device_guid)[0]?.full_name;
|
||||
parentEle.data("name", name);
|
||||
|
||||
console.log(position)
|
||||
console.log(obj)
|
||||
console.log(dbObj)
|
||||
initPopover(pageAct.sysMainTag == "LT" ? "light" : null, position, "[name=forgeViewer]");
|
||||
console.log(obj.event)
|
||||
console.log(obj.myData)
|
||||
initPopover(pageAct.sysMainTag == "LT" ? "light" : null, position, parentEle);
|
||||
$(parentEle).click();
|
||||
|
||||
})
|
||||
|
||||
onEvent("autodesk:complete:sprite", "[name=forgeViewer]", function (e, obj) {
|
||||
$("#floDevList a[name=devItem]").each((idx, ele) => {
|
||||
let devNum = $(ele).data("number");
|
||||
let dbid = obj.myDataList.filter(x => x.device_number == devNum)[0]?._dbId;
|
||||
$(ele).data("dbId", dbid);
|
||||
})
|
||||
|
||||
|
||||
debugger
|
||||
|
||||
|
||||
})
|
||||
|
||||
|
||||
@ -1,7 +1,17 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Svg Vector Icons : http://www.onlinewebfonts.com/icon -->
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1000 1000" enable-background="new 0 0 1000 1000" xml:space="preserve">
|
||||
<metadata> Svg Vector Icons : http://www.onlinewebfonts.com/icon </metadata>
|
||||
<g><path d="M956.7,696.7L556.4,555.4c-14.6-5.2-22.1,2-16.6,15.8l150.4,379.4c5.5,13.8,15.4,14.2,22,0.8c0,0,36.8-74.8,69.6-122.3l97.8,95.4c9.3,9.1,24.7,9.3,34.3,0.4l22.8-21.3c9.5-8.9,9.7-23.6,0.4-32.7l-97.7-95.4c48-29,117.9-58.5,117.9-58.5C971.6,710.9,971.3,701.8,956.7,696.7z"/><path d="M846.5,169.1c-191.4-182.7-501.6-182.7-693,0c-191.4,182.7-191.4,479,0,661.8c106.7,101.9,250.3,147,389.7,135.2l-18.3-65.3c-116,6.8-234.4-32.1-323-116.7c-164-156.6-164-410.6,0-567.2c164-156.6,430-156.6,594,0c92.8,88.7,133.1,208.5,120.9,324.2l69.4,17.8C1004.4,420.4,957.9,275.5,846.5,169.1z"/><path d="M744.3,266.2C608,136,387,136,250.7,266.2c-136.3,130.2-136.3,341.2,0,471.4c70.4,67.3,163.4,99.7,255.7,97.5l-18.7-66.7c-68.2-2.3-135.6-28.2-187.6-77.9c-109-104.1-109-273,0-377.1c109-104.1,285.8-104.1,394.9,0c55.4,53,82.7,122.6,81.8,192l69.1,17.7C852,430.8,818.1,336.6,744.3,266.2z"/></g>
|
||||
</svg>
|
||||
<svg width="164" height="164" viewBox="0 0 164 164" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g filter="url(#filter0_d)">
|
||||
<circle cx="81.7363" cy="81.8212" r="70.3389" fill="#535353"/>
|
||||
<circle cx="81.7363" cy="81.8212" r="62.3112" stroke="white" stroke-width="16.0554"/>
|
||||
</g>
|
||||
<defs>
|
||||
<filter id="filter0_d" x="0.174763" y="0.259602" width="163.123" height="163.123" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
|
||||
<feOffset/>
|
||||
<feGaussianBlur stdDeviation="5.61135"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
|
||||
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
|
||||
</filter>
|
||||
</defs>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 1.3 KiB After Width: | Height: | Size: 916 B |
@ -2409,7 +2409,11 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
|
||||
//loadErrRecTable();
|
||||
loadErr($(oriEle).data("number"));
|
||||
$(tooltipEle).find("#info").html(typeof drawInfoTabBlo != "undefined" ? drawInfoTabBlo(devGuid) : "");
|
||||
changeColorForHotspot($(oriEle).data("dbId"));
|
||||
typeof subDeviceSetTable != "undefined " ? subDeviceSetTable($(oriEle).data("number")) : ""
|
||||
},
|
||||
onHide: function (tooltipEle, oriEle) {
|
||||
changeColorForHotspot($(oriEle).data("dbId"),false);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
@ -621,17 +621,20 @@ async function addHotPoint(data) {
|
||||
const DataVizCore = Autodesk.DataVisualization.Core;
|
||||
const viewableType = Autodesk.DataVisualization.Core.ViewableType.SPRITE;//DataVizCore.ViewableType.SPRITE;
|
||||
const spriteColor = new THREE.Color(0xffffff);
|
||||
const spriteIcon = "/file/img/forge/hotspot.svg";
|
||||
let spriteIcon = "/file/img/forge/hotspot.svg";
|
||||
if (location.href.indexOf("localhost:5966") != -1) {
|
||||
spriteIcon = "/img/forge/hotspot.svg";
|
||||
}
|
||||
|
||||
const style = new DataVizCore.ViewableStyle(viewableType, spriteColor, spriteIcon);
|
||||
|
||||
//熱點 點擊事件註冊
|
||||
viewer.addEventListener(DataVizCore.MOUSE_CLICK, onSpriteClicked);// SPRITE_SELECTED
|
||||
|
||||
viewer.addEventListener(
|
||||
Autodesk.Viewing.SELECTION_CHANGED_EVENT,
|
||||
onSelectionChange
|
||||
);
|
||||
|
||||
//viewer.addEventListener(
|
||||
// Autodesk.Viewing.SELECTION_CHANGED_EVENT,
|
||||
// onSelectionChange
|
||||
//);
|
||||
|
||||
const viewableData = new DataVizCore.ViewableData();
|
||||
viewableData.spriteSize = 24; // Sprites as points of size 24 x 24 pixels
|
||||
@ -646,6 +649,7 @@ async function addHotPoint(data) {
|
||||
|
||||
await viewableData.finish();
|
||||
dataVizExtn.addViewables(viewableData);
|
||||
$(selector).trigger("autodesk:complete:sprite", { myDataList });
|
||||
|
||||
//---------------- 熱點點擊事件 --------------------
|
||||
function onSpriteClicked(event) {
|
||||
@ -654,7 +658,7 @@ async function addHotPoint(data) {
|
||||
console.log(`Sprite clicked: ${event.dbId}`);
|
||||
openHotspotModal();
|
||||
let myData = myDataList.filter(x => x._dbId == event.dbId)[0];
|
||||
$(selector).trigger("autodesk:click:sprite", event, myData);
|
||||
$(selector).trigger("autodesk:click:sprite", { event, myData });
|
||||
}
|
||||
|
||||
if (event.clickInfo != null) {
|
||||
@ -666,24 +670,41 @@ async function addHotPoint(data) {
|
||||
}
|
||||
}
|
||||
|
||||
function onSelectionChange(event) {
|
||||
if (event != undefined && event != null) {
|
||||
const dbIds = event.dbIdArray;
|
||||
//function onSelectionChange(event) {
|
||||
// if (event != undefined && event != null) {
|
||||
// const dbIds = event.dbIdArray;
|
||||
|
||||
if (dbIds.length > 0) {
|
||||
// 處理已選取元件的邏輯
|
||||
$(selector).trigger("autodesk:click:sprite", event);
|
||||
//openHotspotModal();
|
||||
console.log(`------ name: ${viewer.model.getInstanceTree().getNodeName(dbIds)} , dbId: ${dbIds}`);//, id: ${event.clickInfo.object.id}, position.x: ${event.clickInfo.point.x}, y: ${event.clickInfo.point.y}, z: ${event.clickInfo.point.z}
|
||||
} else {
|
||||
// 處理沒有選取元件的邏輯
|
||||
$(selector).trigger("autodesk:click:sprite", event);
|
||||
console.log("no item");
|
||||
}
|
||||
}
|
||||
}
|
||||
// if (dbIds.length > 0) {
|
||||
// // 處理已選取元件的邏輯
|
||||
// $(selector).trigger("autodesk:click:sprite", event);
|
||||
// //openHotspotModal();
|
||||
// console.log(`------ name: ${viewer.model.getInstanceTree().getNodeName(dbIds)} , dbId: ${dbIds}`);//, id: ${event.clickInfo.object.id}, position.x: ${event.clickInfo.point.x}, y: ${event.clickInfo.point.y}, z: ${event.clickInfo.point.z}
|
||||
// } else {
|
||||
// // 處理沒有選取元件的邏輯
|
||||
// $(selector).trigger("autodesk:click:sprite", event);
|
||||
// console.log("no item");
|
||||
// }
|
||||
// }
|
||||
//}
|
||||
|
||||
}
|
||||
|
||||
// 熱點 更換顏色
|
||||
async function changeColorForHotspot(dbId,type = true) {
|
||||
const dataVizExtn = await viewer.loadExtension("Autodesk.DataVisualization");
|
||||
const spriteColorFocus = new THREE.Color(0x00ffe1);
|
||||
if (!type) {
|
||||
spriteColorFocus = new THREE.Color(0xffffff);
|
||||
}
|
||||
const viewablesToUpdate = dbId;
|
||||
dataVizExtn.invalidateViewables(viewablesToUpdate, (viewable) => {
|
||||
return {
|
||||
color: spriteColorFocus,
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
//------------------- end --------------
|
||||
|
||||
//----------------- 開關熱點小視窗 ----------------------
|
||||
|
||||
@ -30,6 +30,7 @@ $.fn.YTTooltip = function (option) {
|
||||
toggle: option.toggle || "click",
|
||||
hideTooltipEvent: hideTooltipEvent,
|
||||
onShow: option.onShow || null,
|
||||
onHide: option.onHide || null,
|
||||
group: option.group || null,
|
||||
targetPosition: {
|
||||
left: option.tpLeft || null,
|
||||
@ -145,6 +146,8 @@ $.fn.YTTooltip = function (option) {
|
||||
|
||||
|
||||
function hideTooltipEvent(tooId) {
|
||||
obj.onHide ? obj.onHide($("#yt_tooltip_" + tooId), obj.ele, obj) : "";
|
||||
|
||||
$("#yt_tooltip_" + tooId).remove();
|
||||
obj.isShowArr.splice($.inArray(tooId, obj.isShowArr), 1);
|
||||
//setTimeout(function () {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user