jay.chang/ibms-dome
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[Frontend][系統監控] 熱點顯示 popover 程序建置及資料串接 | 熱點變色程序建置

Browse Source
This commit is contained in:
dev01 2022-12-28 18:47:09 +08:00
parent 0499c2c439
commit 02969cecbf
5 changed files with 100 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
Frontend/_sysMonAll.html
View File

@ -273,13 +273,13 @@
if (!res || res.code != "0000" || !res.data) { if (!res || res.code != "0000" || !res.data) {
} else { } else {
debugger
let myDataList = []; let myDataList = [];
$.each(res.data, (idx, data) => { $.each(res.data, (idx, data) => {
let item = {}; let item = {};
item.position = {}; item.position = {};
if (item.device_coordinate_3d != null && isJSON(item.device_coordinate_3d)) { if (data.device_coordinate_3d != null && isJSON(data.device_coordinate_3d)) {
item.position = JSON.parse(x.device_coordinate_3d); item.position = JSON.parse(data.device_coordinate_3d);
} }
$.extend(item, data); $.extend(item, data);
myDataList.push(item); myDataList.push(item);
@ -298,15 +298,39 @@
getHopspotPoint(myDataList); getHopspotPoint(myDataList);
} }
onEvent("autodesk:click:sprite", "[name=forgeViewer]", function (e, obj,dbObj) { onEvent("autodesk:click:sprite", "[name=forgeViewer]", function (e, obj) {
debugger
let position = {}; let position = {};
position.tpLeft = obj.target.toolController.lastClickX; position.tpLeft = obj.event.target.toolController.lastClickX;
position.tpTop = obj.target.toolController.lastClickY; position.tpTop = obj.event.target.toolController.lastClickY;
position.tpOffHeight = 24; 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(position)
console.log(obj) console.log(obj.event)
console.log(dbObj) console.log(obj.myData)
initPopover(pageAct.sysMainTag == "LT" ? "light" : null, position, "[name=forgeViewer]"); 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
}) })

22
Frontend/img/forge/hotspot.svg
View File

@ -1,7 +1,17 @@
<?xml version="1.0" encoding="utf-8"?> <svg width="164" height="164" viewBox="0 0 164 164" fill="none" xmlns="http://www.w3.org/2000/svg">
<!-- Svg Vector Icons : http://www.onlinewebfonts.com/icon --> <g filter="url(#filter0_d)">
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <circle cx="81.7363" cy="81.8212" r="70.3389" fill="#535353"/>
<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"> <circle cx="81.7363" cy="81.8212" r="62.3112" stroke="white" stroke-width="16.0554"/>
<metadata> Svg Vector Icons : http://www.onlinewebfonts.com/icon </metadata> </g>
<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> <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> </svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.3 KiB

After

Width:  |  Height:  |  Size: 916 B

4
Frontend/index.html
View File

@ -2409,7 +2409,11 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
//loadErrRecTable(); //loadErrRecTable();
loadErr($(oriEle).data("number")); loadErr($(oriEle).data("number"));
$(tooltipEle).find("#info").html(typeof drawInfoTabBlo != "undefined" ? drawInfoTabBlo(devGuid) : ""); $(tooltipEle).find("#info").html(typeof drawInfoTabBlo != "undefined" ? drawInfoTabBlo(devGuid) : "");
changeColorForHotspot($(oriEle).data("dbId"));
typeof subDeviceSetTable != "undefined " ? subDeviceSetTable($(oriEle).data("number")) : "" typeof subDeviceSetTable != "undefined " ? subDeviceSetTable($(oriEle).data("number")) : ""
},
onHide: function (tooltipEle, oriEle) {
changeColorForHotspot($(oriEle).data("dbId"),false);
} }
}; };

63
Frontend/js/forge/forgemodel.js
View File

@ -621,17 +621,20 @@ async function addHotPoint(data) {
const DataVizCore = Autodesk.DataVisualization.Core; const DataVizCore = Autodesk.DataVisualization.Core;
const viewableType = Autodesk.DataVisualization.Core.ViewableType.SPRITE;//DataVizCore.ViewableType.SPRITE; const viewableType = Autodesk.DataVisualization.Core.ViewableType.SPRITE;//DataVizCore.ViewableType.SPRITE;
const spriteColor = new THREE.Color(0xffffff); 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); const style = new DataVizCore.ViewableStyle(viewableType, spriteColor, spriteIcon);
//熱點 點擊事件註冊 //熱點 點擊事件註冊
viewer.addEventListener(DataVizCore.MOUSE_CLICK, onSpriteClicked);// SPRITE_SELECTED viewer.addEventListener(DataVizCore.MOUSE_CLICK, onSpriteClicked);// SPRITE_SELECTED
viewer.addEventListener( //viewer.addEventListener(
Autodesk.Viewing.SELECTION_CHANGED_EVENT, // Autodesk.Viewing.SELECTION_CHANGED_EVENT,
onSelectionChange // onSelectionChange
); //);
const viewableData = new DataVizCore.ViewableData(); const viewableData = new DataVizCore.ViewableData();
viewableData.spriteSize = 24; // Sprites as points of size 24 x 24 pixels viewableData.spriteSize = 24; // Sprites as points of size 24 x 24 pixels
@ -646,6 +649,7 @@ async function addHotPoint(data) {
await viewableData.finish(); await viewableData.finish();
dataVizExtn.addViewables(viewableData); dataVizExtn.addViewables(viewableData);
$(selector).trigger("autodesk:complete:sprite", { myDataList });
//---------------- 熱點點擊事件 -------------------- //---------------- 熱點點擊事件 --------------------
function onSpriteClicked(event) { function onSpriteClicked(event) {
@ -654,7 +658,7 @@ async function addHotPoint(data) {
console.log(`Sprite clicked: ${event.dbId}`); console.log(`Sprite clicked: ${event.dbId}`);
openHotspotModal(); openHotspotModal();
let myData = myDataList.filter(x => x._dbId == event.dbId)[0]; 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) { if (event.clickInfo != null) {
@ -666,24 +670,41 @@ async function addHotPoint(data) {
} }
} }
function onSelectionChange(event) { //function onSelectionChange(event) {
if (event != undefined && event != null) { // if (event != undefined && event != null) {
const dbIds = event.dbIdArray; // const dbIds = event.dbIdArray;
if (dbIds.length > 0) { // if (dbIds.length > 0) {
// 處理已選取元件的邏輯 // // 處理已選取元件的邏輯
$(selector).trigger("autodesk:click:sprite", event); // $(selector).trigger("autodesk:click:sprite", event);
//openHotspotModal(); // //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} // 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 { // } else {
// 處理沒有選取元件的邏輯 // // 處理沒有選取元件的邏輯
$(selector).trigger("autodesk:click:sprite", event); // $(selector).trigger("autodesk:click:sprite", event);
console.log("no item"); // 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 -------------- //------------------- end --------------
//----------------- 開關熱點小視窗 ---------------------- //----------------- 開關熱點小視窗 ----------------------

3
Frontend/js/yourteam/plugins/yt-tooltip/yt-tooltip.js
View File

@ -30,6 +30,7 @@ $.fn.YTTooltip = function (option) {
toggle: option.toggle || "click", toggle: option.toggle || "click",
hideTooltipEvent: hideTooltipEvent, hideTooltipEvent: hideTooltipEvent,
onShow: option.onShow || null, onShow: option.onShow || null,
onHide: option.onHide || null,
group: option.group || null, group: option.group || null,
targetPosition: { targetPosition: {
left: option.tpLeft || null, left: option.tpLeft || null,
@ -145,6 +146,8 @@ $.fn.YTTooltip = function (option) {
function hideTooltipEvent(tooId) { function hideTooltipEvent(tooId) {
obj.onHide ? obj.onHide($("#yt_tooltip_" + tooId), obj.ele, obj) : "";
$("#yt_tooltip_" + tooId).remove(); $("#yt_tooltip_" + tooId).remove();
obj.isShowArr.splice($.inArray(tooId, obj.isShowArr), 1); obj.isShowArr.splice($.inArray(tooId, obj.isShowArr), 1);
//setTimeout(function () { //setTimeout(function () {