From 02969cecbfba6e0e5bd468669e5b2d3f07c8e7a1 Mon Sep 17 00:00:00 2001 From: dev01 Date: Wed, 28 Dec 2022 18:47:09 +0800 Subject: [PATCH] =?UTF-8?q?[Frontend][=E7=B3=BB=E7=B5=B1=E7=9B=A3=E6=8E=A7?= =?UTF-8?q?]=20=E7=86=B1=E9=BB=9E=E9=A1=AF=E7=A4=BA=20popover=20=E7=A8=8B?= =?UTF-8?q?=E5=BA=8F=E5=BB=BA=E7=BD=AE=E5=8F=8A=E8=B3=87=E6=96=99=E4=B8=B2?= =?UTF-8?q?=E6=8E=A5=20|=20=E7=86=B1=E9=BB=9E=E8=AE=8A=E8=89=B2=E7=A8=8B?= =?UTF-8?q?=E5=BA=8F=E5=BB=BA=E7=BD=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- Frontend/_sysMonAll.html | 42 +++++++++--- Frontend/img/forge/hotspot.svg | 24 +++++-- Frontend/index.html | 4 ++ Frontend/js/forge/forgemodel.js | 65 ++++++++++++------- .../yourteam/plugins/yt-tooltip/yt-tooltip.js | 3 + 5 files changed, 100 insertions(+), 38 deletions(-) diff --git a/Frontend/_sysMonAll.html b/Frontend/_sysMonAll.html index 76d5619..9f73889 100644 --- a/Frontend/_sysMonAll.html +++ b/Frontend/_sysMonAll.html @@ -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(`詳細資料`); + 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 + }) diff --git a/Frontend/img/forge/hotspot.svg b/Frontend/img/forge/hotspot.svg index 690bb0e..e45ef98 100644 --- a/Frontend/img/forge/hotspot.svg +++ b/Frontend/img/forge/hotspot.svg @@ -1,7 +1,17 @@ - - - - - Svg Vector Icons : http://www.onlinewebfonts.com/icon - - \ No newline at end of file + + + + + + + + + + + + + + + + + diff --git a/Frontend/index.html b/Frontend/index.html index bcb9e68..e868f8a 100644 --- a/Frontend/index.html +++ b/Frontend/index.html @@ -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); } }; diff --git a/Frontend/js/forge/forgemodel.js b/Frontend/js/forge/forgemodel.js index 1a927de..8189b96 100644 --- a/Frontend/js/forge/forgemodel.js +++ b/Frontend/js/forge/forgemodel.js @@ -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 -------------- //----------------- 開關熱點小視窗 ---------------------- diff --git a/Frontend/js/yourteam/plugins/yt-tooltip/yt-tooltip.js b/Frontend/js/yourteam/plugins/yt-tooltip/yt-tooltip.js index 60208ba..5b9cbb9 100644 --- a/Frontend/js/yourteam/plugins/yt-tooltip/yt-tooltip.js +++ b/Frontend/js/yourteam/plugins/yt-tooltip/yt-tooltip.js @@ -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 () {