[Frontend][系統監控] 總覽 顯示熱點即顯示popover 及 focus 顏色程序調整
This commit is contained in:
parent
2819434390
commit
95e2780568
@ -91,8 +91,8 @@
|
|||||||
}
|
}
|
||||||
//baja 訂閱設備
|
//baja 訂閱設備
|
||||||
function subDevice() {
|
function subDevice() {
|
||||||
if (myBaja == null) {
|
|
||||||
myBaja = new subscriptionDevices();
|
let myBaja = new subscriptionDevices();
|
||||||
var ordPath = {
|
var ordPath = {
|
||||||
"area_tag": pageAct.AreaTag,
|
"area_tag": pageAct.AreaTag,
|
||||||
"building_tag": pageAct.buiTag,
|
"building_tag": pageAct.buiTag,
|
||||||
@ -123,7 +123,7 @@
|
|||||||
myBaja.setSubscribeDeviceEndCallBack(function (data) {
|
myBaja.setSubscribeDeviceEndCallBack(function (data) {
|
||||||
endPageLoading();
|
endPageLoading();
|
||||||
});
|
});
|
||||||
}
|
|
||||||
}
|
}
|
||||||
//根據 data-type 設置顏色 (判斷後台是否有設定,若無則帶預設)
|
//根據 data-type 設置顏色 (判斷後台是否有設定,若無則帶預設)
|
||||||
function setLightColor() {
|
function setLightColor() {
|
||||||
@ -256,7 +256,7 @@
|
|||||||
|
|
||||||
function show3DModel(urn) {
|
function show3DModel(urn) {
|
||||||
launchViewerForHotspot(urn, (viewer, nodeIds) => {
|
launchViewerForHotspot(urn, (viewer, nodeIds) => {
|
||||||
loadHeatmap();
|
|
||||||
},"[name=forgeViewer]");
|
},"[name=forgeViewer]");
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -298,13 +298,13 @@
|
|||||||
getHopspotPoint(myDataList);
|
getHopspotPoint(myDataList);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
var parentEle = "";
|
||||||
onEvent("autodesk:click:sprite", "[name=forgeViewer]", function (e, obj) {
|
onEvent("autodesk:click:sprite", "[name=forgeViewer]", function (e, obj) {
|
||||||
debugger
|
|
||||||
let position = {};
|
let position = {};
|
||||||
position.tpLeft = obj.event.target.toolController.lastClickX;
|
position.tpLeft = obj.event.target.toolController.lastClickX;
|
||||||
position.tpTop = obj.event.target.toolController.lastClickY;
|
position.tpTop = obj.event.target.toolController.lastClickY;
|
||||||
position.tpOffHeight = 24;
|
position.tpOffHeight = 24;
|
||||||
let parentEle = creDiv();
|
parentEle = creDiv();
|
||||||
let devObj = obj.myData;
|
let devObj = obj.myData;
|
||||||
parentEle.append(`<a href="javascript:;" name="devItem" class=" ml-2 mb-0 ">詳細資料</a>`);
|
parentEle.append(`<a href="javascript:;" name="devItem" class=" ml-2 mb-0 ">詳細資料</a>`);
|
||||||
parentEle.data("id", devObj.device_guid);
|
parentEle.data("id", devObj.device_guid);
|
||||||
@ -313,14 +313,15 @@
|
|||||||
let name = allDevList.filter(x => x.device_guid == devObj.device_guid)[0]?.full_name;
|
let name = allDevList.filter(x => x.device_guid == devObj.device_guid)[0]?.full_name;
|
||||||
parentEle.data("name", name);
|
parentEle.data("name", name);
|
||||||
|
|
||||||
console.log(position)
|
|
||||||
console.log(obj.event)
|
|
||||||
console.log(obj.myData)
|
|
||||||
initPopover(pageAct.sysMainTag == "LT" ? "light" : null, position, parentEle);
|
initPopover(pageAct.sysMainTag == "LT" ? "light" : null, position, parentEle);
|
||||||
$(parentEle).click();
|
$(parentEle).click();
|
||||||
|
|
||||||
})
|
})
|
||||||
|
|
||||||
|
onEvent("autodesk:clickOut:sprite", "[name=forgeViewer]", function (e) {
|
||||||
|
$(parentEle).YTTooltip("hide");
|
||||||
|
})
|
||||||
|
|
||||||
onEvent("autodesk:complete:sprite", "[name=forgeViewer]", function (e, obj) {
|
onEvent("autodesk:complete:sprite", "[name=forgeViewer]", function (e, obj) {
|
||||||
$("#floDevList a[name=devItem]").each((idx, ele) => {
|
$("#floDevList a[name=devItem]").each((idx, ele) => {
|
||||||
let devNum = $(ele).data("number");
|
let devNum = $(ele).data("number");
|
||||||
|
@ -30,14 +30,12 @@
|
|||||||
var allDeviceRowData = []; //所有設備原始資料
|
var allDeviceRowData = []; //所有設備原始資料
|
||||||
var global_emergency_alarm_device_number = [];
|
var global_emergency_alarm_device_number = [];
|
||||||
var zoomToggle = 3;
|
var zoomToggle = 3;
|
||||||
var urn2 = "dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6dnNjb2RlX2ZvcmdlX3Rlc3QvQVJDJUU1JTk2JUFFJUU1JUIxJUE0K01FUCVFNSU4NSVBOCVFNiVBMyU5Rl83Rl9ERU1PLm53ZA";
|
|
||||||
$(function () {
|
|
||||||
getHotspotPoint(() => {
|
|
||||||
show3DModel(urn2);
|
|
||||||
});
|
|
||||||
|
|
||||||
|
$(function () {
|
||||||
|
show3DModel();
|
||||||
initChart();
|
initChart();
|
||||||
getFloData();
|
getFloData();
|
||||||
|
subDevice();
|
||||||
})
|
})
|
||||||
|
|
||||||
onEvent("click", "#resChartZoom", function () {
|
onEvent("click", "#resChartZoom", function () {
|
||||||
@ -394,43 +392,79 @@
|
|||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
//baja 訂閱設備
|
||||||
|
function subDevice() {
|
||||||
|
|
||||||
//訂閱設備的回傳值,並塞到全域變數
|
let floMyBaja = new subscriptionDevices();
|
||||||
function subscribeCallBack(change_device, is_need_reset = false) {
|
var ordPath = {
|
||||||
if (change_device != undefined && change_device != null) {
|
"area_tag": pageAct.AreaTag,
|
||||||
var target_device = allDeviceRowData.filter(x => x.device_number == change_device.device_number)[0];
|
"building_tag": pageAct.buiTag,
|
||||||
|
"system_tag": pageAct.sysMainTag,
|
||||||
if (target_device == undefined || target_device == null) {
|
"name_tag": pageAct.sysSubTag,
|
||||||
//新增
|
|
||||||
obj = {
|
|
||||||
device_number: change_device.device_number,
|
|
||||||
points: [{
|
|
||||||
name: change_device.point_name,
|
|
||||||
value: change_device.value
|
|
||||||
}]
|
|
||||||
};
|
|
||||||
|
|
||||||
allDeviceRowData.push(obj);
|
|
||||||
}
|
}
|
||||||
else {
|
floMyBaja.setSubscribeDevicesByBql(ordPath);
|
||||||
selected_device_point = target_device.points.find(x => x.name == change_device.point_name);
|
floMyBaja.setSubscribeDevicesCallBack(function (data) {
|
||||||
if (selected_device_point != null) {
|
console.log(data)
|
||||||
selected_device_point.value = change_device.value;
|
let matchDevice = allDeviceRowData.filter(x => x.device_number == data.device_number_full)[0];
|
||||||
|
if (!matchDevice) {
|
||||||
|
return false;
|
||||||
}
|
}
|
||||||
else {
|
let norDevPoiName = matchDevice.device_normal_point_name;
|
||||||
obj = {
|
let cloDevPoiName = matchDevice.device_close_point_name;
|
||||||
name: change_device.point_name,
|
let errDevPoiName = matchDevice.device_error_point_name;
|
||||||
value: change_device.value
|
|
||||||
}
|
if (data.point_name == norDevPoiName && data.value == matchDevice.device_normal_point_value) {
|
||||||
target_device.points.push(obj);
|
//顯示正常燈號
|
||||||
}
|
$(`#${matchDevice.device_number}_status`).attr("data-light-type", "normal").data("light-type", "normal");
|
||||||
}
|
} else if (data.point_name == cloDevPoiName && data.value == matchDevice.device_close_point_value) {
|
||||||
|
$(`#${matchDevice.device_number}_status`).attr("data-light-type", "close").data("light-type", "close");
|
||||||
|
} else if (data.point_name == errDevPoiName && data.value == matchDevice.device_error_point_value) {
|
||||||
|
$(`#${matchDevice.device_number}_status`).attr("data-light-type", "error").data("light-type", "error");
|
||||||
|
}
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
floMyBaja.setSubscribeDeviceEndCallBack(function (data) {
|
||||||
|
endPageLoading();
|
||||||
|
});
|
||||||
|
|
||||||
if (is_need_reset) {
|
|
||||||
resetData();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
// //訂閱設備的回傳值,並塞到全域變數
|
||||||
|
// function subscribeCallBack(change_device, is_need_reset = false) {
|
||||||
|
// if (change_device != undefined && change_device != null) {
|
||||||
|
// var target_device = allDeviceRowData.filter(x => x.device_number == change_device.device_number)[0];
|
||||||
|
|
||||||
|
// if (target_device == undefined || target_device == null) {
|
||||||
|
// //新增
|
||||||
|
// obj = {
|
||||||
|
// device_number: change_device.device_number,
|
||||||
|
// points: [{
|
||||||
|
// name: change_device.point_name,
|
||||||
|
// value: change_device.value
|
||||||
|
// }]
|
||||||
|
// };
|
||||||
|
|
||||||
|
// allDeviceRowData.push(obj);
|
||||||
|
// }
|
||||||
|
// else {
|
||||||
|
// selected_device_point = target_device.points.find(x => x.name == change_device.point_name);
|
||||||
|
// if (selected_device_point != null) {
|
||||||
|
// selected_device_point.value = change_device.value;
|
||||||
|
// }
|
||||||
|
// else {
|
||||||
|
// obj = {
|
||||||
|
// name: change_device.point_name,
|
||||||
|
// value: change_device.value
|
||||||
|
// }
|
||||||
|
// target_device.points.push(obj);
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
|
||||||
|
// if (is_need_reset) {
|
||||||
|
// resetData();
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
|
||||||
// 重設平面圖設備資料
|
// 重設平面圖設備資料
|
||||||
function resetData() {
|
function resetData() {
|
||||||
@ -830,48 +864,9 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function show3DModel(urn) {
|
function show3DModel() {
|
||||||
launchViewerForHotspot(urn, (viewer, nodeIds) => {
|
launchViewer("dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6dnNjb2RlX2ZvcmdlX3Rlc3QvJUUzJTgwJTkwQVJDJUUzJTgwJTkxQjFGXzIwMjJfMTJfMDQubndj", (viewer, nodeIds) => {
|
||||||
loadHeatmapForFloor();
|
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
function getHotspotPoint(callback = null) {
|
|
||||||
let url = baseApiUrl + "/api/GetDevForCor";
|
|
||||||
let sendData = {
|
|
||||||
"device_area_tag": pageAct.AreaTag,
|
|
||||||
"device_building_tag": pageAct.buiTag,
|
|
||||||
"device_system_tag": pageAct.sysMainTag,
|
|
||||||
"device_name_tag": pageAct.sysSubTag,
|
|
||||||
"device_floor_tag": pageAct.floTag,
|
|
||||||
};
|
|
||||||
objSendData.Data = sendData;
|
|
||||||
ytAjax = new YourTeam.Ajax(url, objSendData, function (res) {
|
|
||||||
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);
|
|
||||||
}
|
|
||||||
$.extend(item, data);
|
|
||||||
myDataList.push(item);
|
|
||||||
})
|
|
||||||
|
|
||||||
console.log("1", myDataList)
|
|
||||||
setHotspotPoint(myDataList);
|
|
||||||
callback ? callback() : "";
|
|
||||||
}
|
|
||||||
}, null, "POST").send();
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
function setHotspotPoint(myDataList = []) {
|
|
||||||
console.log(myDataList)
|
|
||||||
getHopspotPoint(myDataList);
|
|
||||||
}
|
|
||||||
</script>
|
</script>
|
@ -18,13 +18,19 @@
|
|||||||
|
|
||||||
<script>
|
<script>
|
||||||
var floList = [];
|
var floList = [];
|
||||||
var myBaja = null;
|
|
||||||
$(function () {
|
$(function () {
|
||||||
$("#sysSubText").text(pageAct.sysSubName);
|
$("#sysSubText").text(pageAct.sysSubName);
|
||||||
getFloList();
|
getFloList();
|
||||||
})
|
})
|
||||||
|
|
||||||
onEvent("yt:tab:change", "[name=floBtn]", function () {
|
onEvent("yt:tab:change", "[name=floBtn]", function () {
|
||||||
|
debugger
|
||||||
|
$.each(tolSubList, (idx, sub) => {
|
||||||
|
sub.unsubscribeAll();
|
||||||
|
sub.detach();
|
||||||
|
})
|
||||||
|
tolSubList=[];
|
||||||
pageAct.floTag = $(this).data("id");
|
pageAct.floTag = $(this).data("id");
|
||||||
if ($(this).data("id") == "all") {
|
if ($(this).data("id") == "all") {
|
||||||
pageAct.floTag = null;
|
pageAct.floTag = null;
|
||||||
|
@ -2212,7 +2212,7 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
|
|||||||
sub.unsubscribeAll();
|
sub.unsubscribeAll();
|
||||||
sub.detach();
|
sub.detach();
|
||||||
})
|
})
|
||||||
|
tolSubList=[];
|
||||||
endPageLoading();
|
endPageLoading();
|
||||||
$(".yt-alert").YTAlert().hide();
|
$(".yt-alert").YTAlert().hide();
|
||||||
|
|
||||||
@ -2410,10 +2410,12 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
|
|||||||
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"));
|
changeColorForHotspot($(oriEle).data("dbId"));
|
||||||
|
changeScaleForHotspot($(oriEle).data("dbId"));
|
||||||
typeof subDeviceSetTable != "undefined " ? subDeviceSetTable($(oriEle).data("number")) : ""
|
typeof subDeviceSetTable != "undefined " ? subDeviceSetTable($(oriEle).data("number")) : ""
|
||||||
},
|
},
|
||||||
onHide: function (tooltipEle, oriEle) {
|
onHide: function (tooltipEle, oriEle) {
|
||||||
changeColorForHotspot($(oriEle).data("dbId"),false);
|
changeColorForHotspot($(oriEle).data("dbId"),false);
|
||||||
|
changeScaleForHotspot($(oriEle).data("dbId"),false);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -478,6 +478,64 @@ function getForgeToken(callback) {
|
|||||||
//callback("eyJhbGciOiJSUzI1NiIsImtpZCI6IlU3c0dGRldUTzlBekNhSzBqZURRM2dQZXBURVdWN2VhIn0.eyJzY29wZSI6WyJkYXRhOndyaXRlIiwiZGF0YTpyZWFkIiwiYnVja2V0OnJlYWQiLCJidWNrZXQ6dXBkYXRlIiwiYnVja2V0OmNyZWF0ZSJdLCJjbGllbnRfaWQiOiJUQTNocXNGZnpRYk5PVVhLcGxkS1VLU2V3NFNKMjF3NSIsImF1ZCI6Imh0dHBzOi8vYXV0b2Rlc2suY29tL2F1ZC9hand0ZXhwNjAiLCJqdGkiOiJiemxzWE5qWElvZ2R1UjUzTUJkdlhrTTNTT01qeVB1bHJrMmdTVWJudGNTeDg1b01kRG1xejg3Z05jenJkRzhpIiwiZXhwIjoxNjY4MTgzMDM2fQ.VU3qLwTJ9nlXnomKCdk4y5UcgszGEO_zlvE7w5mWWajeBMwKLo-zw7LJEqUEajRksvssppR9SbVsjLSx-vDVc3DRhCo3jYTWKPT1T3wQrlkOSqLeIrAdnKdBDNBWKgrGJt_xcmXc3dZ3XNKf9L_F6Ex808rUlo6cem1mcPpKl1jCBDqKu1mAX7aDtZ65TTQZbGGhbG4HdnET-d1i5w4LunGN11UAHhDUW3n0SWWIBL27PiiUQONZttajhD5st6IngYLcjr93BYVyJmDF7-wm4WZlHSw2OnXIfbJcFXEd83uVv_Rej4UXjzZ0e6kHwzc2nvGvKSIFu3Nt7CabdR8CkA", 3599);
|
//callback("eyJhbGciOiJSUzI1NiIsImtpZCI6IlU3c0dGRldUTzlBekNhSzBqZURRM2dQZXBURVdWN2VhIn0.eyJzY29wZSI6WyJkYXRhOndyaXRlIiwiZGF0YTpyZWFkIiwiYnVja2V0OnJlYWQiLCJidWNrZXQ6dXBkYXRlIiwiYnVja2V0OmNyZWF0ZSJdLCJjbGllbnRfaWQiOiJUQTNocXNGZnpRYk5PVVhLcGxkS1VLU2V3NFNKMjF3NSIsImF1ZCI6Imh0dHBzOi8vYXV0b2Rlc2suY29tL2F1ZC9hand0ZXhwNjAiLCJqdGkiOiJiemxzWE5qWElvZ2R1UjUzTUJkdlhrTTNTT01qeVB1bHJrMmdTVWJudGNTeDg1b01kRG1xejg3Z05jenJkRzhpIiwiZXhwIjoxNjY4MTgzMDM2fQ.VU3qLwTJ9nlXnomKCdk4y5UcgszGEO_zlvE7w5mWWajeBMwKLo-zw7LJEqUEajRksvssppR9SbVsjLSx-vDVc3DRhCo3jYTWKPT1T3wQrlkOSqLeIrAdnKdBDNBWKgrGJt_xcmXc3dZ3XNKf9L_F6Ex808rUlo6cem1mcPpKl1jCBDqKu1mAX7aDtZ65TTQZbGGhbG4HdnET-d1i5w4LunGN11UAHhDUW3n0SWWIBL27PiiUQONZttajhD5st6IngYLcjr93BYVyJmDF7-wm4WZlHSw2OnXIfbJcFXEd83uVv_Rej4UXjzZ0e6kHwzc2nvGvKSIFu3Nt7CabdR8CkA", 3599);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
async function loadHeatmaps(model) {
|
||||||
|
|
||||||
|
const dataVizExtn = await viewer.loadExtension("Autodesk.DataVisualization");
|
||||||
|
|
||||||
|
// Given a model loaded from Forge
|
||||||
|
const structureInfo = new Autodesk.DataVisualization.Core.ModelStructureInfo(model);
|
||||||
|
|
||||||
|
const devices = [
|
||||||
|
{
|
||||||
|
id: "Oficina 6",
|
||||||
|
name: "Oficina-",
|
||||||
|
position: { x: 22.475382737884104, y: 7.4884431474006163, z: 3.0 },
|
||||||
|
sensorTypes: ["temperature", "humidity"]
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
var offset = Autodesk.viewer.model.getGlobalOffset();
|
||||||
|
removeOffset(devices[0], offset)
|
||||||
|
|
||||||
|
// Generates `SurfaceShadingData` after assigning each device to a room.
|
||||||
|
|
||||||
|
const shadingData = await Autodesk.structureInfo.generateSurfaceShadingData(devices);
|
||||||
|
|
||||||
|
// Use the resulting shading data to generate heatmap from.
|
||||||
|
await dataVizExtn.setupSurfaceShading(model, shadingData);
|
||||||
|
|
||||||
|
// Register color stops for the heatmap. Along with the normalized sensor value
|
||||||
|
// in the range of [0.0, 1.0], `renderSurfaceShading` will interpolate the final
|
||||||
|
// heatmap color based on these specified colors.
|
||||||
|
const sensorColors = [0x0000ff, 0x00ff00, 0xffff00, 0xff0000];
|
||||||
|
|
||||||
|
// Set heatmap colors for temperature
|
||||||
|
const sensorType = "temperature";
|
||||||
|
dataVizExtn.registerSurfaceShadingColors(sensorType, sensorColors);
|
||||||
|
|
||||||
|
// Function that provides sensor value in the range of [0.0, 1.0]
|
||||||
|
|
||||||
|
function getSensorValue(surfaceShadingPoint, sensorType) {
|
||||||
|
// The `SurfaceShadingPoint.id` property matches one of the identifiers passed
|
||||||
|
// to `generateSurfaceShadingData` function. In our case above, this will either
|
||||||
|
// be "cafeteria-entrace-01" or "cafeteria-exit-01".
|
||||||
|
const deviceId = surfaceShadingPoint.id;
|
||||||
|
|
||||||
|
// Read the sensor data, along with its possible value range
|
||||||
|
let sensorValue = readSensorValue(deviceId, sensorType);
|
||||||
|
const maxSensorValue = getMaxSensorValue(sensorType);
|
||||||
|
const minSensorValue = getMinSensorValue(sensorType);
|
||||||
|
|
||||||
|
// Normalize sensor value to [0, 1.0]
|
||||||
|
sensorValue = (sensorValue - minSensorValue) / (maxSensorValue - minSensorValue);
|
||||||
|
return clamp(sensorValue, 0.0, 1.0);
|
||||||
|
}
|
||||||
|
|
||||||
|
// This value can also be a room instead of a floor
|
||||||
|
const floorName = "01 - Entry Level";
|
||||||
|
dataVizExtn.renderSurfaceShading(floorName, sensorType, getSensorValue);
|
||||||
|
}
|
||||||
|
|
||||||
function setTransparentBuilding() {
|
function setTransparentBuilding() {
|
||||||
//allDbIdsStr.forEach((dbId) => {
|
//allDbIdsStr.forEach((dbId) => {
|
||||||
// setTransparency(dbId, 0.2);
|
// setTransparency(dbId, 0.2);
|
||||||
@ -563,6 +621,8 @@ 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 dbIdStart = 10;
|
||||||
|
const dbIdEnd = 19;
|
||||||
let spriteIcon = "/file/img/forge/hotspot.svg";
|
let spriteIcon = "/file/img/forge/hotspot.svg";
|
||||||
if (location.href.indexOf("localhost:5966") != -1) {
|
if (location.href.indexOf("localhost:5966") != -1) {
|
||||||
spriteIcon = "/img/forge/hotspot.svg";
|
spriteIcon = "/img/forge/hotspot.svg";
|
||||||
@ -595,12 +655,19 @@ async function addHotPoint(data) {
|
|||||||
|
|
||||||
//---------------- 熱點點擊事件 --------------------
|
//---------------- 熱點點擊事件 --------------------
|
||||||
function onSpriteClicked(event) {
|
function onSpriteClicked(event) {
|
||||||
|
event.hasStopped = true;
|
||||||
if (event != undefined && event != null) {
|
if (event != undefined && event != null) {
|
||||||
if (event.dbId >= 10 && event.dbId <= 13) {//event.dbId > 0 && event.dbId < 19
|
if (event.dbId >= dbIdStart && event.dbId <= dbIdEnd) {//event.dbId > 0 && event.dbId < 19
|
||||||
console.log(`Sprite clicked: ${event.dbId}`);
|
console.log(`Sprite clicked: ${event.dbId}`);
|
||||||
openHotspotModal();
|
openHotspotModal();
|
||||||
|
for(let i = dbIdStart; i <= dbIdEnd; i++){
|
||||||
|
changeColorForHotspot(i,false);
|
||||||
|
changeScaleForHotspot(i,false);
|
||||||
|
}
|
||||||
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 });
|
||||||
|
} else {
|
||||||
|
$(selector).trigger("autodesk:clickOut:sprite", { event });
|
||||||
}
|
}
|
||||||
|
|
||||||
if (event.clickInfo != null) {
|
if (event.clickInfo != null) {
|
||||||
@ -634,7 +701,7 @@ async function addHotPoint(data) {
|
|||||||
// 熱點 更換顏色
|
// 熱點 更換顏色
|
||||||
async function changeColorForHotspot(dbId,type = true) {
|
async function changeColorForHotspot(dbId,type = true) {
|
||||||
const dataVizExtn = await viewer.loadExtension("Autodesk.DataVisualization");
|
const dataVizExtn = await viewer.loadExtension("Autodesk.DataVisualization");
|
||||||
const spriteColorFocus = new THREE.Color(0x00ffe1);
|
let spriteColorFocus = new THREE.Color(0x00ffe1);
|
||||||
if (!type) {
|
if (!type) {
|
||||||
spriteColorFocus = new THREE.Color(0xffffff);
|
spriteColorFocus = new THREE.Color(0xffffff);
|
||||||
}
|
}
|
||||||
@ -646,6 +713,21 @@ async function changeColorForHotspot(dbId,type = true) {
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 熱點 更換大小
|
||||||
|
async function changeScaleForHotspot(dbId,type = true) {
|
||||||
|
const dataVizExtn = await viewer.loadExtension("Autodesk.DataVisualization");
|
||||||
|
let scale = 1;
|
||||||
|
if(type){
|
||||||
|
scale = 1.2;
|
||||||
|
}
|
||||||
|
const viewablesToUpdate = dbId;
|
||||||
|
dataVizExtn.invalidateViewables(viewablesToUpdate, (viewable) => {
|
||||||
|
return {
|
||||||
|
scale: scale, // Restore the viewable size
|
||||||
|
//url: "https://.../circle.svg",
|
||||||
|
};
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
//------------------- end --------------
|
//------------------- end --------------
|
||||||
|
|
||||||
@ -665,187 +747,3 @@ function closeHotspotModal() {
|
|||||||
|
|
||||||
}
|
}
|
||||||
//------------------ end --------------------------------
|
//------------------ end --------------------------------
|
||||||
|
|
||||||
//------------------ 熱圖 -------------------------------
|
|
||||||
async function loadHeatmaps(model) {
|
|
||||||
const dataVizExtn = await viewer.loadExtension("Autodesk.DataVisualization");
|
|
||||||
|
|
||||||
//取三個空調設備的位置打點
|
|
||||||
const devices = [
|
|
||||||
//{
|
|
||||||
// id: "Oficina 5",
|
|
||||||
// position: { x: -4.93, y: -20.61, z: 16.86 }, // x: 0, y: 25, z: -2.5
|
|
||||||
// sensorTypes: ["temperature", "humidity"]
|
|
||||||
//},
|
|
||||||
//{
|
|
||||||
// id: "Oficina 4",
|
|
||||||
// position: { x: 23.94, y: -3.85, z: 16.86 }, // x: 0, y: 25.03, z: -2.52
|
|
||||||
// sensorTypes: ["temperature", "humidity"]
|
|
||||||
//},
|
|
||||||
//{
|
|
||||||
// id: "Oficina 3",
|
|
||||||
// position: { x: -4.93, y: -3.85, z: 16.86 }, // x: 0, y: 25.03, z: -2.52
|
|
||||||
// sensorTypes: ["temperature", "humidity"]
|
|
||||||
//}
|
|
||||||
{
|
|
||||||
id: "Oficina 5",
|
|
||||||
//name: "Oficina-",
|
|
||||||
position: { x: 3.35, y: -4.81, z: 12.88 }, // x: 0, y: 25, z: -2.5 (3.35, -4.81, 12.88
|
|
||||||
sensorTypes: ["temperature", "humidity"]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "Oficina 4",
|
|
||||||
//name: "Oficina-",
|
|
||||||
position: { x: 37.03, y: -4.81, z: 12.88 }, // x: 0, y: 25.03, z: -2.52 (37.03, -4.81, 12.88)
|
|
||||||
sensorTypes: ["temperature", "humidity"]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "Oficina 3",
|
|
||||||
//name: "Oficina-",
|
|
||||||
position: { x: 2.83, y: -22.60, z: 12.88 }, // x: 0, y: 25.03, z: -2.52 (2.83, -22.60, 12.88)
|
|
||||||
sensorTypes: ["temperature", "humidity"]
|
|
||||||
}
|
|
||||||
];
|
|
||||||
//冷氣N5: (-4.93, -20.61, 16.86), N4: (23.94, -3.85, 16.86), N3: (-4.93, -3.85, 16.86)
|
|
||||||
|
|
||||||
// Initialize sensor values
|
|
||||||
let sensorVals = [];
|
|
||||||
for (let i = 0; i < devices.length; i++) {
|
|
||||||
sensorVals[i] = Math.random();
|
|
||||||
}
|
|
||||||
|
|
||||||
const roomDbIds = [];
|
|
||||||
roomDbIds.push(8181);//房間的dbid 七樓的 Room3-5 792
|
|
||||||
roomDbIds.push(8183);
|
|
||||||
roomDbIds.push(8185);
|
|
||||||
|
|
||||||
const {
|
|
||||||
SurfaceShadingData,
|
|
||||||
SurfaceShadingPoint,
|
|
||||||
SurfaceShadingNode,
|
|
||||||
} = Autodesk.DataVisualization.Core;
|
|
||||||
|
|
||||||
const shadingNode = new SurfaceShadingNode("Room Panel", roomDbIds);
|
|
||||||
|
|
||||||
devices.forEach((device) => {
|
|
||||||
const shadingPoint = new SurfaceShadingPoint(
|
|
||||||
device.id,
|
|
||||||
device.position,
|
|
||||||
device.sensorTypes
|
|
||||||
);
|
|
||||||
shadingNode.addPoint(shadingPoint);
|
|
||||||
});
|
|
||||||
|
|
||||||
const heatmapData = new SurfaceShadingData();
|
|
||||||
heatmapData.addChild(shadingNode);
|
|
||||||
heatmapData.initialize(model);
|
|
||||||
|
|
||||||
// Setup surface shading
|
|
||||||
await dataVizExtn.setupSurfaceShading(model, heatmapData);
|
|
||||||
|
|
||||||
dataVizExtn.registerSurfaceShadingColors("temperature", [0xff0000, 0x0000ff]);
|
|
||||||
|
|
||||||
function getSensorValue(device, sensorType) {
|
|
||||||
return sensorVals[parseInt(device.id.slice(-1)) - 1];
|
|
||||||
}
|
|
||||||
|
|
||||||
dataVizExtn.renderSurfaceShading("Room Panel", "temperature", getSensorValue);
|
|
||||||
|
|
||||||
setInterval(() => {
|
|
||||||
// Modify sensor values.
|
|
||||||
for (let i = 0; i < devices.length; i++) {
|
|
||||||
sensorVals[i] = Math.random();
|
|
||||||
}
|
|
||||||
dataVizExtn.updateSurfaceShading(getSensorValue);
|
|
||||||
}, 2000);
|
|
||||||
}
|
|
||||||
//------------------ end --------------------------------
|
|
||||||
async function loadHeatmapsForFloor(model) {
|
|
||||||
|
|
||||||
const dataVizExtn = await viewer.loadExtension("Autodesk.DataVisualization");
|
|
||||||
|
|
||||||
//x: -17.33, y: 51.03, z: -2.52
|
|
||||||
const devices = [
|
|
||||||
{
|
|
||||||
id: "Oficina 5",
|
|
||||||
//name: "Oficina-",
|
|
||||||
position: { x: -4.93, y: -20.61, z: 16.86 }, // x: 0, y: 25, z: -2.5 (3.35, -4.81, 12.88
|
|
||||||
sensorTypes: ["temperature", "humidity"]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "Oficina 4",
|
|
||||||
//name: "Oficina-",
|
|
||||||
position: { x: 23.94, y: -3.85, z: 16.86 }, // x: 0, y: 25.03, z: -2.52 (37.03, -4.81, 12.88)
|
|
||||||
sensorTypes: ["temperature", "humidity"]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "Oficina 3",
|
|
||||||
//name: "Oficina-",
|
|
||||||
position: { x: -4.93, y: -3.85, z: 16.86 }, // x: 0, y: 25.03, z: -2.52 (2.83, -22.60, 12.88)
|
|
||||||
sensorTypes: ["temperature", "humidity"]
|
|
||||||
}
|
|
||||||
];
|
|
||||||
//冷氣N5: (-4.93, -20.61, 16.86), N4: (23.94, -3.85, 16.86), N3: (-4.93, -3.85, 16.86)
|
|
||||||
|
|
||||||
// Initialize sensor values
|
|
||||||
let sensorVals = [];
|
|
||||||
for (let i = 0; i < devices.length; i++) {
|
|
||||||
sensorVals[i] = Math.random();
|
|
||||||
}
|
|
||||||
|
|
||||||
const roofDbIds = [];
|
|
||||||
|
|
||||||
roofDbIds.push(792);
|
|
||||||
|
|
||||||
const {
|
|
||||||
SurfaceShadingData,
|
|
||||||
SurfaceShadingPoint,
|
|
||||||
SurfaceShadingNode,
|
|
||||||
} = Autodesk.DataVisualization.Core;
|
|
||||||
|
|
||||||
const shadingNode = new SurfaceShadingNode("Roof Panel", roofDbIds);
|
|
||||||
|
|
||||||
devices.forEach((device) => {
|
|
||||||
const shadingPoint = new SurfaceShadingPoint(
|
|
||||||
device.id,
|
|
||||||
device.position,
|
|
||||||
device.sensorTypes
|
|
||||||
);
|
|
||||||
shadingNode.addPoint(shadingPoint);
|
|
||||||
});
|
|
||||||
|
|
||||||
const heatmapData = new SurfaceShadingData();
|
|
||||||
heatmapData.addChild(shadingNode);
|
|
||||||
heatmapData.initialize(model);
|
|
||||||
|
|
||||||
// Setup surface shading
|
|
||||||
await dataVizExtn.setupSurfaceShading(model, heatmapData);
|
|
||||||
|
|
||||||
//dataVizExtn.registerSurfaceShadingColors("co2", [0x00ff00, 0xff0000]);
|
|
||||||
dataVizExtn.registerSurfaceShadingColors("temperature", [0xff0000, 0x0000ff]);
|
|
||||||
|
|
||||||
function getSensorValue(device, sensorType) {
|
|
||||||
return sensorVals[parseInt(device.id.slice(-1)) - 1];
|
|
||||||
}
|
|
||||||
|
|
||||||
dataVizExtn.renderSurfaceShading("Roof Panel", "temperature", getSensorValue);
|
|
||||||
|
|
||||||
setInterval(() => {
|
|
||||||
// Modify sensor values.
|
|
||||||
for (let i = 0; i < devices.length; i++) {
|
|
||||||
sensorVals[i] = Math.random();
|
|
||||||
}
|
|
||||||
dataVizExtn.updateSurfaceShading(getSensorValue);
|
|
||||||
}, 2000);
|
|
||||||
}
|
|
||||||
|
|
||||||
//
|
|
||||||
async function loadHeatmap() {
|
|
||||||
const model = viewer.model;
|
|
||||||
loadHeatmaps(model);
|
|
||||||
}
|
|
||||||
|
|
||||||
async function loadHeatmapForFloor() {
|
|
||||||
const model = viewer.model;
|
|
||||||
loadHeatmapsForFloor(model);
|
|
||||||
}
|
|
@ -40,6 +40,14 @@ $.fn.YTTooltip = function (option) {
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
if(typeof option == "string"){
|
||||||
|
if(option == "hide"){
|
||||||
|
let tooId = $(this).data("yttooltipid");
|
||||||
|
hideTooltipEvent(tooId);
|
||||||
|
}
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
if (obj.toggle == "hover") {
|
if (obj.toggle == "hover") {
|
||||||
obj.toggle == "mouseenter"
|
obj.toggle == "mouseenter"
|
||||||
}
|
}
|
||||||
@ -146,7 +154,9 @@ $.fn.YTTooltip = function (option) {
|
|||||||
|
|
||||||
|
|
||||||
function hideTooltipEvent(tooId) {
|
function hideTooltipEvent(tooId) {
|
||||||
obj.onHide ? obj.onHide($("#yt_tooltip_" + tooId), obj.ele, obj) : "";
|
let onHide = $(obj.ele)[0]._ytTooltip.onHide;
|
||||||
|
let _obj = $(obj.ele)[0]._ytTooltip;
|
||||||
|
onHide ? 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);
|
||||||
@ -168,6 +178,7 @@ $.fn.YTTooltip = function (option) {
|
|||||||
|
|
||||||
|
|
||||||
eleArr.push(obj);
|
eleArr.push(obj);
|
||||||
|
$(obj.ele)[0]._ytTooltip = obj;
|
||||||
})
|
})
|
||||||
|
|
||||||
let result = eleArr.filter(x => this.toArray().findIndex(y => y == x.ele) != -1)[0];
|
let result = eleArr.filter(x => this.toArray().findIndex(y => y == x.ele) != -1)[0];
|
||||||
|
Loading…
Reference in New Issue
Block a user