1815 lines
60 KiB
HTML
1815 lines
60 KiB
HTML
<style>
|
||
[id^="yt_tooltip"] {
|
||
min-width: 520px;
|
||
}
|
||
</style>
|
||
|
||
<!-- <div class="row m-0 mb-3">
|
||
<button id="resChartZoom" class="btn btn-info">圖檔重置</button>
|
||
</div> -->
|
||
<div id="topLight" class="d-flex mb-4" style="gap: 15px"></div>
|
||
<!-- <div class="row">
|
||
<div id="floChart" style="height : 80vh!important;width:100%"></div>
|
||
</div> -->
|
||
<!-- <div class="row">
|
||
<div id="forgeViewer" class="position-absolute" style="width:96%;height:96%;"></div>
|
||
</div> -->
|
||
<div class="d-flex">
|
||
<div class="col-6 my-3">
|
||
<div id="floChart"
|
||
style="height: 100%; width: 100%; background-color: #fff"></div>
|
||
</div>
|
||
<div class="col-6 my-3">
|
||
<!-- <div id="forgeViewer" class="position-relative" style="height:100%">
|
||
<div id="forgeHeatBarDiv" class="d-flex mb-4 position-absolute" style="gap:15px">
|
||
</div>
|
||
</div> -->
|
||
<div id="forgeViewer" class="position-relative" style="height: 80vh">
|
||
<div id="forgeHeatBarDiv"
|
||
class="d-flex mb-4 position-absolute"
|
||
style="gap: 15px"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!--<script src="lib/echarts.min.js"></script>-->
|
||
<script>
|
||
var floChart = null;
|
||
var currentData = [];
|
||
var heatMap = null;
|
||
var allDeviceRowData = []; //所有設備原始資料
|
||
var global_emergency_alarm_device_number = [];
|
||
var lightControl = "device"; // device 群控 node 燈控
|
||
var zoomToggle = 1.3;
|
||
$(function () {
|
||
$(loadEle).Loading("start");
|
||
alarmDbIdList = [];
|
||
$("#topLight").html(setTopLight());
|
||
setLightColor();
|
||
initChart();
|
||
getFloData();
|
||
drawHeatBar();
|
||
getHotspotPoint(() => {
|
||
show3DModel(pageAct.urn);
|
||
});
|
||
});
|
||
|
||
onEvent("click", "#resChartZoom", function () {
|
||
floChart.setOption({
|
||
geo: {
|
||
center: null,
|
||
zoom: 1.2,
|
||
},
|
||
});
|
||
resetData();
|
||
});
|
||
|
||
function getFloData() {
|
||
let url = baseApiUrl + "/api/Device/GetDeviceList";
|
||
let sendData = {
|
||
sub_system_tag: pageAct.sysSubTag,
|
||
building_tag: pageAct.buiTag,
|
||
floor_tag: pageAct.floTag,
|
||
};
|
||
objSendData.Data = sendData;
|
||
ytAjax = new YourTeam.Ajax(
|
||
url,
|
||
objSendData,
|
||
function (res) {
|
||
if (!res || res.code != "0000" || !res.data) {
|
||
} else {
|
||
lightControl = res.module;
|
||
chartHandler(
|
||
`${baseImgUrl}/upload/floor_map/${res.data[0].floor_map_name}`
|
||
);
|
||
if (pageAct.sysSubTag === "L1") {
|
||
let nodes = [];
|
||
res.data[0].device_list.forEach((d) => {
|
||
nodes = [...nodes, ...d.device_nodes];
|
||
});
|
||
getDevice([...nodes, ...res.data[0].device_list]);
|
||
} else {
|
||
getDevice(res.data[0].device_list);
|
||
}
|
||
}
|
||
},
|
||
null,
|
||
"POST"
|
||
).send();
|
||
}
|
||
|
||
function getDevice(devList) {
|
||
let selected_floor = devList[0];
|
||
//let selected_floor_objs = devList.filter(function (item) {
|
||
// return item.floor_guid == selected_floor.floor_guid;
|
||
//});
|
||
|
||
//currentData = selected_floor_objs[0].device;
|
||
|
||
currentData = $.map(devList, function (item) {
|
||
//資料處理
|
||
if (
|
||
selected_floor.device_number != undefined &&
|
||
selected_floor.device_number != null &&
|
||
selected_floor.device_number != "" &&
|
||
selected_floor.device_number == item.device_number
|
||
) {
|
||
item.selected = true;
|
||
} else {
|
||
item.selected = false;
|
||
}
|
||
if (
|
||
item.device_coordinate != undefined &&
|
||
item.device_coordinate != null
|
||
) {
|
||
var coordinate = item.device_coordinate.split(",");
|
||
item.value = [parseFloat(coordinate[0]), parseFloat(coordinate[1])];
|
||
}
|
||
|
||
if (
|
||
item.device_nodes != undefined &&
|
||
item.device_nodes != null &&
|
||
item.device_nodes.length > 0
|
||
) {
|
||
if (item.device_master_number == selected_floor.device_master) {
|
||
//var datatable_data = {
|
||
// device_full_name: item.full_name,
|
||
// device_number: item.device_number,
|
||
// device_master: item.device_master_number
|
||
//}
|
||
//datatable_data_list.push(datatable_data);
|
||
|
||
$.map(item.device_nodes, function (item_node) {
|
||
item_node.selected = false;
|
||
if (
|
||
item_node.device_node_coordinate != undefined &&
|
||
item_node.device_node_coordinate != null
|
||
) {
|
||
var node_coordinate = item_node.device_node_coordinate.split(",");
|
||
item_node.value = [
|
||
parseFloat(node_coordinate[0]),
|
||
parseFloat(node_coordinate[1]),
|
||
];
|
||
}
|
||
});
|
||
} else {
|
||
//var index = datatable_data_list.findIndex(x => x.device_number == item.device_number);
|
||
//if (index < 0) {
|
||
// var datatable_data = {
|
||
// device_number: item.device_number,
|
||
// device_master: item.device_master_number
|
||
// }
|
||
// datatable_data_list.push(datatable_data);
|
||
//}
|
||
|
||
$.map(item.device_nodes, function (item_node) {
|
||
item_node.selected = false;
|
||
if (
|
||
item_node.device_node_coordinate != undefined &&
|
||
item_node.device_node_coordinate != null
|
||
) {
|
||
var node_coordinate = item_node.device_node_coordinate.split(",");
|
||
item_node.value = [
|
||
parseFloat(node_coordinate[0]),
|
||
parseFloat(node_coordinate[1]),
|
||
];
|
||
}
|
||
});
|
||
}
|
||
}
|
||
return item;
|
||
});
|
||
if (currentData == null || currentData.length == 0) {
|
||
currentData = [];
|
||
}
|
||
|
||
// myBaja.setPrepareSubscribeDevices(currentData);
|
||
// myBaja.setCallBack(mySubscribeDevices);
|
||
|
||
//if (datatable_data_list.length > 0) {
|
||
// $("#datatablediv").show();
|
||
// dataTableDraw();
|
||
//} else {
|
||
// $("#datatablediv").hide();
|
||
//}
|
||
}
|
||
|
||
function initChart() {
|
||
let chartDom = $("#floChart")[0];
|
||
floChart = echarts.init(chartDom, null, { width: "auto" });
|
||
}
|
||
|
||
function chartHandler(url) {
|
||
floChart.clear();
|
||
|
||
$.get(url, function (svg) {
|
||
if (svg == undefined || svg == null) {
|
||
return;
|
||
}
|
||
|
||
echarts.registerMap("floor_svg", { svg: svg });
|
||
|
||
option = {
|
||
// animationDurationUpdate: 1500,
|
||
tooltip: {
|
||
formatter: function (params) {
|
||
if (
|
||
params.data.device_node_guid != undefined &&
|
||
params.data.device_node_guid != null &&
|
||
params.data.device_node_guid != ""
|
||
) {
|
||
return `<div >
|
||
名稱：${params.data.device_node_full_name}<br>
|
||
Guid：${params.data.device_node_guid}
|
||
</div>`;
|
||
} else {
|
||
return `<div >名稱：${params.data.full_name}<br>
|
||
Guid：${params.data.device_guid}</div>`;
|
||
}
|
||
},
|
||
},
|
||
toolbox: {
|
||
//工具欄
|
||
show: false,
|
||
},
|
||
geo: {
|
||
map: "floor_svg",
|
||
roam: true,
|
||
scaleLimit: {
|
||
//限制放大縮小倍數
|
||
max: 2,
|
||
min: 1,
|
||
},
|
||
layoutSize: "100%",
|
||
layoutCenter: [],
|
||
zoom: 1.1,
|
||
silent: true,
|
||
},
|
||
series: [
|
||
{
|
||
//不管有無被選擇(圓點)
|
||
type: "scatter",
|
||
coordinateSystem: "geo",
|
||
geoIndex: 0,
|
||
symbol: "circle",
|
||
symbolSize: 20,
|
||
symbolOffset: [10, 10],
|
||
label: {
|
||
show: false,
|
||
},
|
||
/*data: currentData,*/
|
||
z: 2,
|
||
},
|
||
{
|
||
//未選擇的設備(icon)
|
||
type: "scatter",
|
||
coordinateSystem: "geo",
|
||
geoIndex: 0,
|
||
symbolSize: 50,
|
||
label: {
|
||
formatter: "{b}",
|
||
position: "bottom",
|
||
show: true,
|
||
backgroundColor: "orange",
|
||
},
|
||
emphasis: {
|
||
label: {
|
||
show: true,
|
||
fontSize: "20",
|
||
fontWeight: "bold",
|
||
color: "yellow",
|
||
},
|
||
},
|
||
selectedMode: "single",
|
||
data: null,
|
||
z: 1,
|
||
},
|
||
{
|
||
//被選擇的設備(icon)
|
||
type: "effectScatter",
|
||
coordinateSystem: "geo",
|
||
geoIndex: 0,
|
||
showEffectOn: "render",
|
||
symbolSize: 50,
|
||
label: {
|
||
formatter: "{b}",
|
||
position: "bottom",
|
||
show: true,
|
||
backgroundColor: "orange",
|
||
},
|
||
emphasis: {
|
||
label: {
|
||
show: true,
|
||
fontSize: "20",
|
||
fontWeight: "bold",
|
||
color: "yellow",
|
||
},
|
||
},
|
||
selectedMode: "single",
|
||
data: null,
|
||
z: 1,
|
||
},
|
||
{
|
||
//編輯模式底下的設備(圓點，只會有一個)
|
||
type: "scatter",
|
||
coordinateSystem: "geo",
|
||
geoIndex: 0,
|
||
symbol: "circle",
|
||
symbolSize: 20,
|
||
symbolOffset: [10, 10],
|
||
label: {
|
||
show: false,
|
||
},
|
||
/*data: currentData,*/
|
||
z: 2,
|
||
},
|
||
{
|
||
//編輯模式底下的設備(icon，只會有一個)
|
||
type: "scatter",
|
||
coordinateSystem: "geo",
|
||
geoIndex: 0,
|
||
symbolSize: 50,
|
||
label: {
|
||
formatter: "{b}",
|
||
position: "bottom",
|
||
show: true,
|
||
backgroundColor: "orange",
|
||
},
|
||
emphasis: {
|
||
label: {
|
||
show: true,
|
||
fontSize: "20",
|
||
fontWeight: "bold",
|
||
color: "yellow",
|
||
},
|
||
},
|
||
data: null,
|
||
z: 1,
|
||
},
|
||
],
|
||
};
|
||
|
||
floChart.setOption(option);
|
||
|
||
if (
|
||
currentData != undefined &&
|
||
currentData != null &&
|
||
currentData.length > 0
|
||
) {
|
||
resetData();
|
||
}
|
||
|
||
var ordPath = {
|
||
building_tag: pageAct.buiTag,
|
||
system_tag: pageAct.sysMainTag,
|
||
};
|
||
//myBaja.setSubscribeDevicesByBql(ordPath);
|
||
//myBaja.setSubscribeDevicesCallBack(subscribeCallBack);
|
||
let parentEle = null;
|
||
floChart.on("click", function (params) {
|
||
forgeUnFocusAll();
|
||
chartUnFocusAll();
|
||
if (params.componentType == "series") {
|
||
let data = params.data;
|
||
let rect = $("#floChart")[0].getBoundingClientRect();
|
||
let position = [
|
||
rect.left + rect.width / 2,
|
||
rect.top + rect.height / 4,
|
||
];
|
||
// console.log(position)
|
||
// let position = [params.event.event.clientX+100, params.event.event.clientY-300];
|
||
data._dbId = data._dbId ?? "";
|
||
// currentData.find(
|
||
// (cData) => cData.device_number === data.device_number
|
||
// ).forge_dbid;
|
||
parentEle = crePosPopover(position, data);
|
||
$(parentEle).click();
|
||
} else {
|
||
$(parentEle).YTTooltip("hide");
|
||
}
|
||
});
|
||
|
||
floChart.getZr().on("click", function (params) {
|
||
/*console.log("click", params);*/
|
||
var pixelPoint = [params.offsetX, params.offsetY];
|
||
var dataPoint = floChart.convertFromPixel({ geoIndex: 0 }, pixelPoint);
|
||
|
||
if (!(params?.target?.shape?.symbolType == "circle")) {
|
||
$(parentEle).YTTooltip("hide");
|
||
}
|
||
|
||
//temp_device_on_floor_map = [{
|
||
// device_guid: selected_temp_device.device_guid,
|
||
// device_full_name: selected_temp_device.device_full_name,
|
||
// device_node_guid: selected_temp_device.device_node_guid ? selected_temp_device.device_node_guid : null,
|
||
// device_node_full_name: selected_temp_device.device_node_full_name ? selected_temp_device.device_node_full_name : null,
|
||
// status: selected_temp_device.status,
|
||
// value: dataPoint
|
||
//}];
|
||
|
||
// currentData.push([dataPoint[0], dataPoint[1], 1]);
|
||
// floChart.setOption(option);
|
||
});
|
||
|
||
onEvent("autodesk:complete:sprite", "#forgeViewer", function (e, obj) {
|
||
console.log("Current", obj.myDataList);
|
||
let option = floChart.getOption();
|
||
|
||
option.series.forEach(function (series) {
|
||
(series.data ?? []).forEach(function (point) {
|
||
let dbid = obj.myDataList.filter(
|
||
(x) => x.device_number == point.device_number
|
||
)[0]?._dbId;
|
||
point._dbId = dbid;
|
||
// currentData.forEach(function (cData) {
|
||
// console.log(cData.device_node_guid=== point.device_node_guid)
|
||
// if (lightControl === "node" && pageAct.sysSubTag === "L1" && cData.device_node_guid == point.device_node_guid) {
|
||
// cData._dbId = dbid;
|
||
// cData.spriteDbid = dbid;
|
||
// setForgeHotSpotColor(cData);
|
||
// }
|
||
// else if (cData.device_guid == point.device_guid) {
|
||
// cData._dbId = dbid;
|
||
// cData.spriteDbid = dbid;
|
||
// setForgeHotSpotColor(cData);
|
||
// }
|
||
// });
|
||
const cData = currentData.find((cur) => {
|
||
if (lightControl === "node" && pageAct.sysSubTag === "L1") {
|
||
if (cur.device_node_guid == point.device_node_guid) return cur;
|
||
} else if (cur.device_guid == point.device_guid) {
|
||
return cur;
|
||
}
|
||
});
|
||
cData._dbId = dbid;
|
||
cData.spriteDbid = dbid;
|
||
// setForgeHotSpotColor(cData);
|
||
});
|
||
});
|
||
floChart.setOption(option);
|
||
|
||
subDevice();
|
||
});
|
||
//floChart.on('selectchanged', function (params) {
|
||
|
||
// console.log("selectchanged", params);
|
||
// // currentData.push([dataPoint[0], dataPoint[1], 1]);
|
||
// // floChart.setOption(option);
|
||
|
||
// currentData = $.map(currentData, function (item) {
|
||
// item.selected = false;
|
||
// return item;
|
||
// });
|
||
|
||
// if (params.selected.length > 0) {
|
||
// currentData[params.selected[0].seriesIndex - 1].selected = true;
|
||
// }
|
||
|
||
//});
|
||
|
||
// floChart.getZr().on('mousewheel', function (params) {
|
||
// console.log(params)
|
||
// })
|
||
floChart.on("georoam", function (params) {
|
||
var zoom = floChart.getOption().geo[0].zoom;
|
||
const option = floChart.getOption();
|
||
console.log("georoam", zoom);
|
||
|
||
if (zoom <= 1.5) {
|
||
/*ResetFloorMap();*/
|
||
floChart.setOption({
|
||
geo: {
|
||
roam: "scale",
|
||
},
|
||
});
|
||
} else {
|
||
floChart.setOption({
|
||
geo: {
|
||
roam: true,
|
||
},
|
||
});
|
||
}
|
||
if (zoom > zoomToggle) {
|
||
const currentImage = currentData.find(
|
||
({ device_image }) => device_image
|
||
).device_image;
|
||
option.series[1].data = option.series[0].data.map((d) => ({
|
||
...d,
|
||
symbol:
|
||
"image://" + baseImgUrl + "/upload/device_icon/" + currentImage,
|
||
}));
|
||
} else {
|
||
option.series[1].data = [];
|
||
}
|
||
floChart.setOption(option);
|
||
// resetData();
|
||
});
|
||
}).fail(function () {
|
||
toast_warning("查無該樓層地圖");
|
||
floChart.clear();
|
||
});
|
||
}
|
||
|
||
//baja 訂閱設備
|
||
function subDevice() {
|
||
console.log("subDevice 開始");
|
||
|
||
let option = floChart.getOption();
|
||
let floMyBaja = new subscriptionDevices();
|
||
var ordPath = {
|
||
area_tag: pageAct.AreaTag,
|
||
building_tag: pageAct.buiTag,
|
||
system_tag: pageAct.sysMainTag,
|
||
name_tag: pageAct.sysSubTag,
|
||
flo_tag: pageAct.floTag,
|
||
};
|
||
floMyBaja.setSubscribeDevicesByBql(ordPath);
|
||
|
||
// 燈熱點用
|
||
let lightOnHotColorArr = [];
|
||
let lightOffHotColorArr = [];
|
||
// 燈光圈用
|
||
let deviceScatterNormalArr = [];
|
||
let deviceScatterCloseArr = [];
|
||
let deviceScatterErrorArr = [];
|
||
floMyBaja.setSubscribeDevicesCallBack(function (data) {
|
||
let matchDevice = currentData.filter(
|
||
(x) => x.device_number == data.device_number_full
|
||
)[0];
|
||
if (!matchDevice) {
|
||
$(loadEle).Loading("close");
|
||
return false;
|
||
}
|
||
//將訂閱值塞入 subDeviceData
|
||
if (
|
||
subDeviceData.findIndex(
|
||
(x) => x.device_number == matchDevice.device_number
|
||
) == -1
|
||
) {
|
||
let obj = {};
|
||
obj.device_number = matchDevice.device_number;
|
||
obj.dbid = matchDevice.forge_dbid;
|
||
subDeviceData.push(obj);
|
||
}
|
||
let norDevPoiName = matchDevice.device_normal_point_name;
|
||
let cloDevPoiName = matchDevice.device_close_point_name;
|
||
let errDevPoiName = matchDevice.device_error_point_name;
|
||
|
||
if (data.point_name == "Temp" || data.point_name == "TEMP") {
|
||
heatMap?.changeTemp(
|
||
data.device_number_full,
|
||
!isNaN(parseInt(data.value)) ? parseInt(data.value) : 0
|
||
);
|
||
let devIdx = currentData.findIndex(
|
||
(x) => x.device_number == data.device_number_full
|
||
);
|
||
currentData[devIdx]._temp = !isNaN(parseInt(data.value))
|
||
? parseInt(data.value)
|
||
: 0;
|
||
}
|
||
if (data.point_name == "SSC" && pageAct.sysSubTag === "L1") {
|
||
const lightOn = data.value.includes("true");
|
||
setLightOpenOrClose(lightOn, matchDevice.device_guid);
|
||
if (lightOn && matchDevice.spriteDbid) {
|
||
// setLightValues(matchDevice.device_guid, 200, 0xe1cf18);
|
||
// changeColorForHotspot(matchDevice.spriteDbid, null, lightOn);
|
||
if (
|
||
!lightOnHotColorArr.some(
|
||
({ spriteDbid }) => spriteDbid === matchDevice.spriteDbid
|
||
)
|
||
) {
|
||
lightOnHotColorArr.push(matchDevice);
|
||
}
|
||
lightOffHotColorArr = lightOffHotColorArr.filter(
|
||
(light) => light.spriteDbid !== matchDevice.spriteDbid
|
||
);
|
||
heatMap?.changeTemp(matchDevice.device_number, 40);
|
||
} else if (matchDevice.spriteDbid) {
|
||
if (
|
||
!lightOffHotColorArr.some(
|
||
({ spriteDbid }) => spriteDbid === matchDevice.spriteDbid
|
||
)
|
||
) {
|
||
lightOffHotColorArr.push(matchDevice);
|
||
}
|
||
lightOnHotColorArr = lightOnHotColorArr.filter(
|
||
(light) => light.spriteDbid !== matchDevice.spriteDbid
|
||
);
|
||
heatMap?.changeTemp(matchDevice.device_number, 0);
|
||
}
|
||
}
|
||
|
||
if (
|
||
data.point_name == errDevPoiName &&
|
||
data.value !== matchDevice.device_error_point_value &&
|
||
alarmDbIdList.some(
|
||
({ device_number }) => matchDevice.device_number === device_number
|
||
)
|
||
) {
|
||
alarmDbIdList = alarmDbIdList.filter(
|
||
({ device_number }) => matchDevice.device_number === device_number
|
||
);
|
||
} else if (
|
||
data.point_name == errDevPoiName &&
|
||
data.value == matchDevice.device_error_point_value &&
|
||
!alarmDbIdList.some(
|
||
({ device_number }) => matchDevice.device_number === device_number
|
||
)
|
||
) {
|
||
$(`#${matchDevice.device_number}_status`)
|
||
.attr("data-light-type", "error")
|
||
.data("light-type", "error");
|
||
alarmDbIdList.push(matchDevice);
|
||
}
|
||
|
||
if (
|
||
data.point_name == norDevPoiName &&
|
||
(data.value == matchDevice.device_normal_point_value || norDevPoiName === errDevPoiName) &&
|
||
!deviceScatterNormalArr.some(
|
||
({ device_number }) => data.device_number_full === device_number
|
||
)
|
||
) {
|
||
//顯示正常燈號
|
||
$(`#${matchDevice.device_number}_status`)
|
||
.attr("data-light-type", "normal")
|
||
.data("light-type", "normal");
|
||
deviceScatterNormalArr.push(matchDevice);
|
||
deviceScatterCloseArr = deviceScatterCloseArr.filter(
|
||
(device) => device.spriteDbid !== matchDevice.spriteDbid
|
||
);
|
||
} else if (
|
||
data.point_name == cloDevPoiName &&
|
||
data.value == matchDevice.device_close_point_value &&
|
||
!deviceScatterCloseArr.some(
|
||
({ device_number }) => data.device_number_full === device_number
|
||
)
|
||
) {
|
||
$(`#${matchDevice.device_number}_status`)
|
||
.attr("data-light-type", "close")
|
||
.data("light-type", "close");
|
||
deviceScatterCloseArr.push(matchDevice);
|
||
deviceScatterNormalArr = deviceScatterNormalArr.filter(
|
||
(device) => device.spriteDbid !== matchDevice.spriteDbid
|
||
);
|
||
}
|
||
|
||
if (pageAct.sysSubTag === "L1" && lightControl === "node") {
|
||
alarmDbIdList = alarmDbIdList.filter(
|
||
({ device_node_guid }) =>
|
||
device_node_guid !== undefined && device_node_guid !== null
|
||
);
|
||
|
||
deviceScatterNormalArr = deviceScatterNormalArr.filter(
|
||
({ device_node_guid }) =>
|
||
device_node_guid !== undefined && device_node_guid !== null
|
||
);
|
||
deviceScatterCloseArr = deviceScatterCloseArr.filter(
|
||
({ device_node_guid }) =>
|
||
device_node_guid !== undefined && device_node_guid !== null
|
||
);
|
||
|
||
lightOnHotColorArr = lightOnHotColorArr.filter(
|
||
({ device_node_guid }) =>
|
||
device_node_guid !== undefined && device_node_guid !== null
|
||
);
|
||
lightOffHotColorArr = lightOffHotColorArr.filter(
|
||
({ device_node_guid }) =>
|
||
device_node_guid !== undefined && device_node_guid !== null
|
||
);
|
||
}
|
||
|
||
if (
|
||
deviceScatterCloseArr.length + deviceScatterNormalArr.length ===
|
||
option.series[0].data.length ||
|
||
deviceScatterCloseArr.length +
|
||
deviceScatterNormalArr.length +
|
||
alarmDbIdList.length ===
|
||
option.series[0].data.length
|
||
) {
|
||
deviceScatterNormalArr.length &&
|
||
deviceScatterNormalArr.forEach((device) => {
|
||
const cur = option.series[0].data.find(
|
||
({ device_number }) => device_number === device.device_number
|
||
);
|
||
|
||
const normalColor = currentData.find(
|
||
({ device_number }) => device_number === device.device_number
|
||
).device_normal_color;
|
||
if (cur) {
|
||
cur.itemStyle = { color: normalColor };
|
||
}
|
||
});
|
||
|
||
changeColorForHotspot(
|
||
deviceScatterNormalArr.map(({ spriteDbid }) => spriteDbid),
|
||
null,
|
||
true
|
||
);
|
||
|
||
deviceScatterCloseArr.length &&
|
||
deviceScatterCloseArr.forEach((device) => {
|
||
const cur = option.series[0].data.find(
|
||
({ device_number }) => device_number === device.device_number
|
||
);
|
||
const closeColor = currentData.find(
|
||
({ device_number }) => device_number === device.device_number
|
||
).device_close_color;
|
||
if (cur) {
|
||
cur.itemStyle = { color: closeColor };
|
||
}
|
||
});
|
||
|
||
changeColorForHotspot(
|
||
deviceScatterCloseArr.map(({ spriteDbid }) => spriteDbid),
|
||
null,
|
||
false
|
||
);
|
||
|
||
alarmDbIdList.length &&
|
||
alarmDbIdList.forEach((device) => {
|
||
const cur = option.series[0].data.find(
|
||
({ device_number }) => device_number === device.device_number
|
||
);
|
||
const errColor = currentData.find(
|
||
({ device_number }) => device_number === device.device_number
|
||
)?.device_error_color;
|
||
|
||
if (cur) {
|
||
cur.itemStyle = { color: errColor };
|
||
}
|
||
});
|
||
changeColorForHotspot(
|
||
alarmDbIdList.map(({ spriteDbid }) => spriteDbid),
|
||
"error",
|
||
false
|
||
);
|
||
|
||
floChart.setOption(option);
|
||
$(loadEle).Loading("close");
|
||
}
|
||
});
|
||
|
||
floMyBaja.setSubscribeDeviceEndCallBack(function (data) {
|
||
endPageLoading();
|
||
if (
|
||
pageAct.sysSubTag !== "M12" &&
|
||
data.findIndex(
|
||
(x) => x.point_name == "Temp" || x.point_name == "TEMP"
|
||
) != -1
|
||
) {
|
||
// 顯示溫度條
|
||
showHeat("[name=forgeHeatBar]");
|
||
}
|
||
});
|
||
}
|
||
|
||
function drawHeatBar() {
|
||
$("#forgeHeatBarDiv").html(setTopHeatBar());
|
||
}
|
||
|
||
// 電梯 3D 位置呈現
|
||
function set3DElevPos(viewer) {
|
||
let nodeIds = allElevDevList
|
||
.filter((x) => !isNaN(parseInt(x.forge_dbid)))
|
||
.map((x) => {
|
||
return { devNum: x.device_number, nodeId: parseInt(x.forge_dbid) };
|
||
});
|
||
|
||
$.each(nodeIds, (idx, item) => {
|
||
elev3DBind[item.devNum] = item.nodeId;
|
||
});
|
||
nodeIds = nodeIds.map((x) => x.nodeId);
|
||
$.each(nodeIds, function (idx, node) {
|
||
let options = {
|
||
element: $("#forgeViewer"),
|
||
viewer: viewer,
|
||
nodeId: node,
|
||
floorHeight: elev3DOption.floorHeight ?? [],
|
||
inited: function () { },
|
||
};
|
||
let elevator3DObj = new elevator3D(options);
|
||
let devNum = Object.keys(elev3DBind).filter(
|
||
(x) => elev3DBind[x] == node
|
||
)[0];
|
||
let subData = subSeviceData.filter((x) => x.device_number == devNum)[0];
|
||
|
||
if (elev3DObj.filter((x) => x.nodeId == node).length == 0) {
|
||
elev3DObj.push({ id: devNum, nodeId: node, obj: elevator3DObj });
|
||
}
|
||
|
||
if (subData) {
|
||
let elevObj = elev3DObj.filter((x) => x.nodeId == node)[0];
|
||
if (!elevObj.id) {
|
||
elevObj.id = devNum;
|
||
}
|
||
elevObj.obj = Object.assign(elevObj, elevator3DObj ?? {});
|
||
elevObj.obj.init(function () {
|
||
let frags = elevObj.obj.fragProxys.filter((x) => x.nodeId == node);
|
||
|
||
frags.forEach((fragProxy) => {
|
||
fragProxy.frag.position.z =
|
||
elev3DOption.floorHeight.filter(
|
||
(x) => x.floor == subData["CP"]
|
||
)[0]?.height ?? 0;
|
||
fragProxy.frag.updateAnimTransform();
|
||
});
|
||
elevObj.obj.viewer.impl.sceneUpdated(true);
|
||
});
|
||
}
|
||
});
|
||
}
|
||
|
||
// 電梯 3D Option 設置
|
||
function set3DElevOpt(data) {
|
||
let devNumArr = data
|
||
.map((x) => {
|
||
return {
|
||
devNum: x.device_number_full,
|
||
priority: allElevDevList.filter(
|
||
(y) => y.device_number == x.device_number_full
|
||
)[0]?.priority,
|
||
};
|
||
})
|
||
.DistinctBy("devNum");
|
||
devNumArr = devNumArr.oSort("priority");
|
||
$.each(devNumArr, (idx, devObj) => {
|
||
devNum = devObj.devNum;
|
||
let subData = subSeviceData.filter((x) => x.device_number == devNum)[0];
|
||
|
||
if (subData) {
|
||
//// 左側 3D 電梯 nodeID 與 device_number match
|
||
//if (Object.keys(elev3DBind).indexOf(devNum) == -1 && viewer3DNodeIds.length != 0) {
|
||
// elev3DBind[devNum] = viewer3DNodeIds[Object.keys(elev3DBind).length];
|
||
//}
|
||
// 左側 3D 電梯 Viewer Option 設置
|
||
/*elev3DOption.nodes = Object.keys(elev3DBind).map(x => elev3DBind[x]);*/
|
||
elev3DOption.nodeId = elev3DBind[devNum];
|
||
elev3DOption.floorHeight = floList.map((x) => {
|
||
return { floor: x };
|
||
});
|
||
elev3DOption.floorHeight.forEach((floObj, idx) => {
|
||
if (floObj.floor.startsWith("B")) {
|
||
let floor = parseInt(floObj.floor.split("B")[1].split("F")[0]);
|
||
floObj.height = floor * -13;
|
||
} else {
|
||
let floor = parseInt(floObj.floor.split("F")[0]);
|
||
if (floor == 1) {
|
||
floObj.height = 0;
|
||
} else if (floor == 2) {
|
||
floObj.height = 14.75;
|
||
} else {
|
||
floObj.height = 14.75 + (floor - 2) * 9.75;
|
||
}
|
||
}
|
||
});
|
||
|
||
if (elev3DObj.length != 0) {
|
||
let elevObj = elev3DObj.filter(
|
||
(x) => x.nodeId == elev3DBind[devNum]
|
||
)[0];
|
||
if (!elevObj.id) {
|
||
elevObj.id = devNum;
|
||
}
|
||
elevObj.obj = Object.assign(elevObj.obj, elev3DOption);
|
||
elevObj.obj.init(function () {
|
||
let frags = elevObj.obj.fragProxys.filter(
|
||
(x) => x.nodeId == elev3DBind[devNum]
|
||
);
|
||
|
||
frags.forEach((fragProxy) => {
|
||
fragProxy.frag.position.z =
|
||
elev3DOption.floorHeight.filter(
|
||
(x) => x.floor == subData["CP"]
|
||
)[0]?.height ?? 0;
|
||
fragProxy.frag.updateAnimTransform();
|
||
});
|
||
elevObj.obj.viewer.impl.sceneUpdated(true);
|
||
});
|
||
}
|
||
}
|
||
});
|
||
}
|
||
|
||
// //訂閱設備的回傳值，並塞到全域變數
|
||
// 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() {
|
||
const scatter_symbol_convertData = function (data, zoom) {
|
||
//正常、關閉排除CCVT(圓點)
|
||
let res = [],
|
||
temp = [];
|
||
data.forEach(function (item, index) {
|
||
if (
|
||
global_emergency_alarm_device_number != undefined &&
|
||
global_emergency_alarm_device_number != null
|
||
) {
|
||
if (
|
||
global_emergency_alarm_device_number.findIndex(
|
||
(x) => x.device_number == item.device_number
|
||
) < 0 &&
|
||
item.device_system_category_layer3 != "C"
|
||
) {
|
||
//如果有子節點，則只針對子節點操作
|
||
if (
|
||
lightControl === "node" &&
|
||
item.device_nodes != undefined &&
|
||
item.device_nodes != null &&
|
||
item.device_nodes.length > 0
|
||
) {
|
||
item.device_nodes.forEach(function (item_node, item_node_index) {
|
||
//添加父節點相關資訊
|
||
item_node.device_system_category_layer3 =
|
||
item.device_system_category_layer3;
|
||
item_node.device_normal_color = item.device_normal_color;
|
||
item_node.device_close_color = item.device_close_color;
|
||
|
||
//判斷父節點狀態
|
||
var device_index = allDeviceRowData.findIndex(
|
||
(x) => x.device_number == item.device_number
|
||
);
|
||
var temp_point_value;
|
||
if (device_index > -1) {
|
||
if (
|
||
item.device_normal_point_name != null ||
|
||
item.device_close_point_name != null
|
||
) {
|
||
//當其中point name 不為null的情況
|
||
if (item.device_normal_point_name != null) {
|
||
temp_point_value = allDeviceRowData[
|
||
device_index
|
||
].points.find(
|
||
(x) => x.name == item.device_normal_point_name
|
||
);
|
||
temp_point_value =
|
||
allDeviceRowData[device_index].points[
|
||
item.device_normal_point_name
|
||
];
|
||
if (temp_point_value == item.device_normal_point_value) {
|
||
item_node.device_color = item.device_normal_color;
|
||
}
|
||
}
|
||
if (item.device_close_point_name != null) {
|
||
temp_point_value =
|
||
allDeviceRowData[device_index].points[
|
||
item.device_close_point_name
|
||
];
|
||
if (temp_point_value == item.device_close_point_value) {
|
||
item_node.device_color = item.device_close_color;
|
||
}
|
||
}
|
||
} else {
|
||
if (item.device_normal_point_name == "ER") {
|
||
temp_point_value =
|
||
allDeviceRowData[device_index].points[
|
||
item.device_normal_point_name
|
||
];
|
||
if (temp_point_value == "true") {
|
||
item_node.device_color = item.device_normal_color;
|
||
} else {
|
||
temp_point_value =
|
||
allDeviceRowData[device_index].points[
|
||
item.device_close_point_name
|
||
];
|
||
if (temp_point_value == item.device_close_point_value) {
|
||
item_node.device_color = item.device_close_color;
|
||
}
|
||
}
|
||
} else if (item.device_close_point_name == "ER") {
|
||
temp_point_value =
|
||
allDeviceRowData[device_index].points[
|
||
item.device_close_point_name
|
||
];
|
||
if (temp_point_value == "true") {
|
||
item_node.device_color = item.device_close_color;
|
||
} else {
|
||
temp_point_value =
|
||
allDeviceRowData[device_index].points[
|
||
item.device_normal_point_name
|
||
];
|
||
if (
|
||
temp_point_value == item.device_normal_point_value
|
||
) {
|
||
item_node.device_color = item.device_normal_color;
|
||
}
|
||
}
|
||
} else {
|
||
temp_point_value =
|
||
allDeviceRowData[device_index].points[
|
||
item.device_normal_point_name
|
||
];
|
||
if (temp_point_value == item.device_normal_point_value) {
|
||
item_node.device_color = item.device_normal_color;
|
||
} else if (
|
||
temp_point_value == item.device_close_point_value
|
||
) {
|
||
item_node.device_color = item.device_close_color;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
// temp.push(item_node);
|
||
});
|
||
} else {
|
||
var device_index = allDeviceRowData.findIndex(
|
||
(x) => x.device_number == item.device_number
|
||
);
|
||
if (device_index > -1) {
|
||
if (
|
||
item.device_normal_point_name != null ||
|
||
item.device_close_point_name != null
|
||
) {
|
||
//當其中point name 有為null的情況
|
||
if (item.device_normal_point_name != null) {
|
||
// temp_point_value = allDeviceRowData[device_index].points[item.device_normal_point_name];
|
||
temp_point_value = allDeviceRowData[
|
||
device_index
|
||
].points.find(
|
||
(x) => x.name == item.device_normal_point_name
|
||
).value;
|
||
if (temp_point_value == item.device_normal_point_value) {
|
||
item.device_color = item.device_normal_color;
|
||
}
|
||
}
|
||
if (item.device_close_point_name != null) {
|
||
// temp_point_value = allDeviceRowData[device_index].points[item.device_close_point_name];
|
||
temp_point_value = allDeviceRowData[
|
||
device_index
|
||
].points.find(
|
||
(x) => x.name == item.device_close_point_name
|
||
).value;
|
||
if (temp_point_value == item.device_close_point_value) {
|
||
item.device_color = item.device_close_color;
|
||
}
|
||
}
|
||
} else {
|
||
if (item.device_normal_point_name == "ER") {
|
||
// temp_point_value = allDeviceRowData[device_index].points[item.device_normal_point_name];
|
||
temp_point_value = allDeviceRowData[
|
||
device_index
|
||
].points.find(
|
||
(x) => x.name == item.device_normal_point_name
|
||
).value;
|
||
if (temp_point_value == "true") {
|
||
item.device_color = item.device_normal_color;
|
||
} else {
|
||
// temp_point_value = allDeviceRowData[device_index].points[item.device_close_point_name];
|
||
temp_point_value = allDeviceRowData[
|
||
device_index
|
||
].points.find(
|
||
(x) => x.name == item.device_close_point_name
|
||
).value;
|
||
if (temp_point_value == item.device_close_point_value) {
|
||
item.device_color = item.device_close_color;
|
||
}
|
||
}
|
||
} else if (item.device_close_point_name == "ER") {
|
||
// temp_point_value = allDeviceRowData[device_index].points[item.device_close_point_name];
|
||
temp_point_value = allDeviceRowData[
|
||
device_index
|
||
].points.find(
|
||
(x) => x.name == item.device_close_point_name
|
||
).value;
|
||
if (temp_point_value == "true") {
|
||
item.device_color = item.device_close_color;
|
||
} else {
|
||
// temp_point_value = allDeviceRowData[device_index].points[item.device_normal_point_name];
|
||
temp_point_value = allDeviceRowData[
|
||
device_index
|
||
].points.find(
|
||
(x) => x.name == item.device_normal_point_name
|
||
).value;
|
||
if (temp_point_value == item.device_normal_point_value) {
|
||
item.device_color = item.device_normal_color;
|
||
}
|
||
}
|
||
} else {
|
||
// temp_point_value = allDeviceRowData[device_index].points[item.device_normal_point_name];
|
||
temp_point_value = allDeviceRowData[
|
||
device_index
|
||
].points.find(
|
||
(x) => x.name == item.device_normal_point_name
|
||
).value;
|
||
if (temp_point_value == item.device_normal_point_value) {
|
||
item.device_color = item.device_normal_color;
|
||
} else if (
|
||
temp_point_value == item.device_close_point_value
|
||
) {
|
||
item.device_color = item.device_close_color;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
item.zoom = zoom;
|
||
temp.push(item);
|
||
}
|
||
}
|
||
}
|
||
});
|
||
|
||
// let temp = data.filter(function (item, index) {
|
||
// if (global_emergency_alarm_device_number != undefined && global_emergency_alarm_device_number != null) {
|
||
// return global_emergency_alarm_device_number.findIndex(x => x.device_number == item.device_number) < 0 && item.device_system_category_layer3 != "C";
|
||
// } else {
|
||
// return [];
|
||
// }
|
||
// });
|
||
let option = floChart.getOption();
|
||
temp.forEach(function (tempData) {
|
||
let oldTarObj = option.series[0]?.data?.filter(
|
||
(x) => x.device_number == tempData.device_number
|
||
)[0];
|
||
if (oldTarObj) {
|
||
tempData = Object.assign(tempData, oldTarObj);
|
||
}
|
||
});
|
||
temp.map(function (item) {
|
||
var obj = {
|
||
device_guid: item.device_guid,
|
||
device_number: item.device_number,
|
||
full_name: item.full_name ? item.full_name : null,
|
||
device_node_guid: item.device_node_guid
|
||
? item.device_node_guid
|
||
: null,
|
||
device_node_full_name: item.device_node_full_name
|
||
? item.device_node_full_name
|
||
: null,
|
||
device_system_category_layer3: item.device_system_category_layer3
|
||
? item.device_system_category_layer3
|
||
: null,
|
||
status: item.status,
|
||
value: item.value,
|
||
deviceItems: item.deviceItems,
|
||
deviceURL: item.deviceURL,
|
||
_dbId: item._dbId ?? null,
|
||
};
|
||
|
||
obj.itemStyle = {
|
||
color: item.device_color || item.device_close_color,
|
||
};
|
||
|
||
res.push(obj);
|
||
});
|
||
|
||
return res;
|
||
};
|
||
|
||
const scatter_icon_convertData = function (data) {
|
||
//正常、關閉(icon)
|
||
let res = [],
|
||
temp = [];
|
||
|
||
data.forEach(function (item, index) {
|
||
if (
|
||
global_emergency_alarm_device_number != undefined &&
|
||
global_emergency_alarm_device_number != null
|
||
) {
|
||
if (
|
||
global_emergency_alarm_device_number.findIndex(
|
||
(x) => x.device_number == item.device_number
|
||
) < 0 &&
|
||
item.device_system_category_layer3 != "C"
|
||
) {
|
||
//如果有子節點，則只針對子節點操作
|
||
if (
|
||
lightControl === "node" &&
|
||
item.device_nodes != undefined &&
|
||
item.device_nodes != null &&
|
||
item.device_nodes.length > 0
|
||
) {
|
||
item.device_nodes.forEach(function (item_node, item_node_index) {
|
||
//添加父節點相關資訊
|
||
item_node.device_system_category_layer3 =
|
||
item.device_system_category_layer3;
|
||
item_node.device_normal_color = item.device_normal_color;
|
||
item_node.device_image = item.device_image;
|
||
temp.push(item_node);
|
||
});
|
||
} else {
|
||
temp.push(item);
|
||
}
|
||
}
|
||
}
|
||
});
|
||
|
||
temp = data.filter(function (item, index) {
|
||
if (
|
||
global_emergency_alarm_device_number != undefined &&
|
||
global_emergency_alarm_device_number != null
|
||
) {
|
||
return (
|
||
global_emergency_alarm_device_number.findIndex(
|
||
(x) => x.device_number == item.device_number
|
||
) < 0 && item.device_system_category_layer3 != "C"
|
||
);
|
||
} else {
|
||
return [];
|
||
}
|
||
});
|
||
|
||
temp.map(function (item) {
|
||
var obj = {
|
||
device_guid: item.device_guid,
|
||
device_number: item.device_number,
|
||
full_name: item.full_name ? item.full_name : null,
|
||
device_node_guid: item.device_node_guid
|
||
? item.device_node_guid
|
||
: null,
|
||
device_node_full_name: item.device_node_full_name
|
||
? item.device_node_full_name
|
||
: null,
|
||
device_system_category_layer3: item.device_system_category_layer3
|
||
? item.device_system_category_layer3
|
||
: null,
|
||
status: item.status,
|
||
symbol:
|
||
"image://" +
|
||
baseImgUrl +
|
||
"/upload/device_icon/" +
|
||
item.device_image,
|
||
value: item.value,
|
||
deviceItems: item.deviceItems,
|
||
deviceURL: item.deviceURL,
|
||
};
|
||
|
||
if (item.selected) {
|
||
obj.symbolSize = 50;
|
||
}
|
||
obj.itemStyle = {
|
||
color: item.device_colse_color,
|
||
};
|
||
res.push(obj);
|
||
});
|
||
|
||
return res;
|
||
};
|
||
|
||
const scatter_error_convertData = function (data) {
|
||
//異常(圓點)
|
||
let res = [],
|
||
temp = [];
|
||
|
||
data.forEach(function (item, index) {
|
||
if (
|
||
global_emergency_alarm_device_number != undefined &&
|
||
global_emergency_alarm_device_number != null
|
||
) {
|
||
if (
|
||
global_emergency_alarm_device_number.findIndex(
|
||
(x) => x.device_number == item.device_number
|
||
) > -1 &&
|
||
item.device_system_category_layer3 != "C"
|
||
) {
|
||
//如果有子節點，則只針對子節點操作
|
||
if (
|
||
lightControl === "node" &&
|
||
item.device_nodes != undefined &&
|
||
item.device_nodes != null &&
|
||
item.device_nodes.length > 0
|
||
) {
|
||
item.device_nodes.forEach(function (item_node, item_node_index) {
|
||
//添加父節點相關資訊
|
||
item_node.device_system_category_layer3 =
|
||
item.device_system_category_layer3;
|
||
item_node.device_error_color = item.device_error_color;
|
||
temp.push(item_node);
|
||
});
|
||
} else {
|
||
temp.push(item);
|
||
}
|
||
}
|
||
}
|
||
});
|
||
|
||
// if (global_emergency_alarm_device_number != undefined && global_emergency_alarm_device_number != null) {
|
||
// temp = data.filter(function (item, index) {
|
||
// return global_emergency_alarm_device_number.findIndex(x => x.device_number == item.device_number) > -1 && item.device_system_category_layer3 != "C";
|
||
// });
|
||
// }
|
||
|
||
temp.map(function (item) {
|
||
var obj = {
|
||
device_guid: item.device_guid,
|
||
device_number: item.device_number,
|
||
full_name: item.full_name ? item.full_name : null,
|
||
device_node_guid: item.device_node_guid
|
||
? item.device_node_guid
|
||
: null,
|
||
device_node_full_name: item.device_node_full_name
|
||
? item.device_node_full_name
|
||
: null,
|
||
device_system_category_layer3: item.device_system_category_layer3
|
||
? item.device_system_category_layer3
|
||
: null,
|
||
status: item.status,
|
||
value: item.value,
|
||
deviceItems: item.deviceItems,
|
||
deviceURL: item.deviceURL,
|
||
};
|
||
console.log("異常", item.device_color);
|
||
obj.itemStyle = { color: item.device_error_color };
|
||
|
||
res.push(obj);
|
||
});
|
||
|
||
return res;
|
||
};
|
||
|
||
const scatter_error_icon_convertData = function (data) {
|
||
//異常(icon)
|
||
let res = [],
|
||
temp = [];
|
||
|
||
data.forEach(function (item, index) {
|
||
if (
|
||
global_emergency_alarm_device_number != undefined &&
|
||
global_emergency_alarm_device_number != null
|
||
) {
|
||
if (
|
||
global_emergency_alarm_device_number.findIndex(
|
||
(x) => x.device_number == item.device_number
|
||
) > -1 &&
|
||
item.device_system_category_layer3 != "C"
|
||
) {
|
||
//如果有子節點，則只針對子節點操作
|
||
if (
|
||
lightControl === "node" &&
|
||
item.device_nodes != undefined &&
|
||
item.device_nodes != null &&
|
||
item.device_nodes.length > 0
|
||
) {
|
||
item.device_nodes.forEach(function (item_node, item_node_index) {
|
||
//添加父節點相關資訊
|
||
item_node.device_system_category_layer3 =
|
||
item.device_system_category_layer3;
|
||
item_node.device_error_color = item.device_error_color;
|
||
item_node.device_image = item.device_image;
|
||
temp.push(item_node);
|
||
});
|
||
} else {
|
||
temp.push(item);
|
||
}
|
||
}
|
||
}
|
||
});
|
||
|
||
if (
|
||
global_emergency_alarm_device_number != undefined &&
|
||
global_emergency_alarm_device_number != null
|
||
) {
|
||
temp = data.filter(function (item, index) {
|
||
return (
|
||
global_emergency_alarm_device_number.findIndex(
|
||
(x) => x.device_number == item.device_number
|
||
) > -1 && item.device_system_category_layer3 != "C"
|
||
);
|
||
});
|
||
}
|
||
|
||
temp.map(function (item) {
|
||
var obj = {
|
||
device_guid: item.device_guid,
|
||
device_number: item.device_number,
|
||
full_name: item.full_name ? item.full_name : null,
|
||
device_node_guid: item.device_node_guid
|
||
? item.device_node_guid
|
||
: null,
|
||
device_node_full_name: item.device_node_full_name
|
||
? item.device_node_full_name
|
||
: null,
|
||
device_system_category_layer3: item.device_system_category_layer3
|
||
? item.device_system_category_layer3
|
||
: null,
|
||
status: item.status,
|
||
symbol:
|
||
"image://" +
|
||
baseImgUrl +
|
||
"/upload/device_icon/" +
|
||
item.device_image,
|
||
value: item.value,
|
||
deviceItems: item.deviceItems,
|
||
deviceURL: item.deviceURL,
|
||
};
|
||
|
||
res.push(obj);
|
||
});
|
||
|
||
return res;
|
||
};
|
||
|
||
const scatter_cctv_convertData = function (data) {
|
||
//CCTV
|
||
let res = [];
|
||
let temp = data.filter(function (item, index) {
|
||
return item.device_system_category_layer3 == "C";
|
||
});
|
||
|
||
temp.map(function (item) {
|
||
var obj = {
|
||
device_guid: item.device_guid,
|
||
device_number: item.device_number,
|
||
full_name: item.full_name,
|
||
device_system_category_layer3: item.device_system_category_layer3,
|
||
device_ip: item.device_ip,
|
||
device_port: item.device_port,
|
||
status: item.status,
|
||
symbol:
|
||
"image://" +
|
||
str_location_url +
|
||
"/upload/device_icon/" +
|
||
item.device_image,
|
||
value: item.value,
|
||
};
|
||
|
||
res.push(obj);
|
||
});
|
||
|
||
return res;
|
||
};
|
||
|
||
if (!floChart.getOption()) {
|
||
return;
|
||
}
|
||
|
||
var zoom = 0;
|
||
if (floChart.getOption().geo && floChart.getOption().geo.length > 0) {
|
||
zoom = floChart.getOption().geo[0].zoom;
|
||
}
|
||
if (zoom <= zoomToggle) {
|
||
floChart.setOption({
|
||
series: [
|
||
{
|
||
symbolOffset: [0, 0],
|
||
data: scatter_symbol_convertData(currentData), //正常、關閉(圓點)
|
||
},
|
||
{
|
||
data: [], //正常、關閉(icon)
|
||
},
|
||
{
|
||
symbolOffset: [0, 0],
|
||
data: scatter_error_convertData(currentData), //異常(圓點)
|
||
},
|
||
{
|
||
data: [], //異常(icon)
|
||
},
|
||
{
|
||
data: scatter_cctv_convertData(currentData), //CCTV
|
||
},
|
||
],
|
||
});
|
||
} else {
|
||
floChart.setOption({
|
||
series: [
|
||
{
|
||
symbolOffset: [10, 10],
|
||
|
||
data: scatter_symbol_convertData(currentData, zoom), //正常、關閉(圓點)
|
||
},
|
||
{
|
||
data: scatter_icon_convertData(currentData), //正常、關閉(icon)
|
||
},
|
||
{
|
||
symbolOffset: [10, 10],
|
||
data: scatter_error_convertData(currentData), //異常(圓點)
|
||
},
|
||
{
|
||
data: scatter_error_icon_convertData(currentData), //異常(icon)
|
||
},
|
||
{
|
||
data: scatter_cctv_convertData(currentData), //CCTV
|
||
},
|
||
],
|
||
});
|
||
}
|
||
}
|
||
|
||
function getNextFloor(floGuid = null) {
|
||
let url = baseApiUrl + "/api/Device/GetNextFloor";
|
||
objSendData.Data = { floor_guid: floGuid, building_tag: pageAct.buiTag };
|
||
let result = "";
|
||
ytAjax = new YourTeam.Ajax(
|
||
url,
|
||
objSendData,
|
||
function (res) {
|
||
if (!res || res.code != "0000" || !res.data) {
|
||
} else {
|
||
result = res.data?.full_name;
|
||
}
|
||
},
|
||
null,
|
||
"POST"
|
||
).send();
|
||
|
||
return result;
|
||
}
|
||
|
||
// show 3D 模型
|
||
function show3DModel(urn) {
|
||
launchViewerForHotspot(urn, (viewer, nodeIds) => {
|
||
// 隱藏 toolbar
|
||
document.querySelector("#guiviewer3d-toolbar").style.display = "none";
|
||
let nextFloor = getNextFloor(pageAct.floGuid);
|
||
let curFloTag = pageAct.floTag;
|
||
|
||
if (!nextFloor) {
|
||
toast_warning("超出樓層範圍");
|
||
return;
|
||
}
|
||
|
||
if (curFloTag?.startsWith("U")) {
|
||
curFloTag = curFloTag.split("U")[1];
|
||
}
|
||
if (nextFloor?.startsWith("U")) {
|
||
nextFloor = nextFloor.split("U")[1];
|
||
}
|
||
|
||
getLevelsData(curFloTag, nextFloor, function () {
|
||
viewer.model.search(
|
||
"天花板",
|
||
(nodeIds) => {
|
||
// console.log("2",nodeIds)
|
||
viewer.hide(nodeIds);
|
||
},
|
||
(e) => {
|
||
console.log(e);
|
||
}
|
||
);
|
||
});
|
||
|
||
setHeatMap();
|
||
|
||
if (
|
||
(pageAct.sysSubTag == "M12" || pageAct.sysSubTag == "ELEV") &&
|
||
elevatorShow
|
||
) {
|
||
let elevOption = {
|
||
viewer: viewer,
|
||
ordPath: {
|
||
area_tag: pageAct.AreaTag,
|
||
building_tag: pageAct.buiTag,
|
||
},
|
||
};
|
||
// 電梯移動訂閱程序載入
|
||
let forge3DElev = new Forge3DElevFull(elevOption);
|
||
forge3DElev.bajaEndCallback = function () {
|
||
endPageLoading();
|
||
};
|
||
forge3DElev.init();
|
||
subDevice();
|
||
}
|
||
});
|
||
}
|
||
|
||
function setHeatMap() {
|
||
if (pageAct.sysSubTag !== "M12") {
|
||
devices = currentData.map((x) => {
|
||
return {
|
||
roomDbId: !isNaN(parseInt(x.room_dbid)) ? parseInt(x.room_dbid) : -1,
|
||
id: x.device_number,
|
||
position: isJSON(x.device_coordinate_3d)
|
||
? JSON.parse(x.device_coordinate_3d)
|
||
: {}, // x: 0, y: 25, z: -2.5 (3.35, -4.81, 12.88
|
||
sensorTypes: ["temperature", "humidity"],
|
||
};
|
||
});
|
||
|
||
let option = {
|
||
devices: devices,
|
||
};
|
||
|
||
heatMap = new ADHeatMaps(option);
|
||
heatMap.onComplete = () => {
|
||
$.each(currentData, (idx, dev) => {
|
||
heatMap.changeTemp(dev.device_number, dev._temp || 0);
|
||
});
|
||
};
|
||
}
|
||
if (pageAct.sysSubTag === "M12" && !elevatorShow) {
|
||
let sensorObjs = [];
|
||
addHotPoint(viewer);
|
||
Forge3DSensor.sensorTimes = 0;
|
||
sensorObjs = currentData.map((device) => {
|
||
Forge3DSensor.sensorTimes++;
|
||
return new Forge3DSensor({
|
||
viewer: viewer,
|
||
ordPath: {
|
||
area_tag: pageAct.AreaTag,
|
||
building_tag: pageAct.buiTag,
|
||
},
|
||
selector: "#forgeViewer",
|
||
elevCb: elevatorShow
|
||
? () => {
|
||
let elevOption = {
|
||
selector: "#forgeViewer",
|
||
viewer: viewer,
|
||
ordPath: {
|
||
area_tag: pageAct.AreaTag,
|
||
building_tag: pageAct.buiTag,
|
||
},
|
||
sensorObjs,
|
||
};
|
||
|
||
// 電梯移動訂閱程序載入
|
||
let forge3DElev = new Forge3DElevFull(elevOption);
|
||
forge3DElev.bajaEndCallback = function () {
|
||
endPageLoading();
|
||
};
|
||
forge3DElev.init();
|
||
}
|
||
: null,
|
||
curDevice: {
|
||
...device,
|
||
roomDbId: !isNaN(parseInt(device.room_dbid))
|
||
? parseInt(device.room_dbid)
|
||
: -1,
|
||
id: device.device_number,
|
||
position: isJSON(device.device_coordinate_3d)
|
||
? JSON.parse(device.device_coordinate_3d)
|
||
: {}, // x: 0, y: 25, z: -2.5 (3.35, -4.81, 12.88
|
||
temp: 25,
|
||
forge_dbid: parseInt(device.forge_dbid),
|
||
},
|
||
deviceList: currentData.map((d) => ({
|
||
...d,
|
||
roomDbId: !isNaN(parseInt(d.room_dbid))
|
||
? parseInt(d.room_dbid)
|
||
: -1,
|
||
id: d.device_number,
|
||
position: isJSON(d.device_coordinate_3d)
|
||
? JSON.parse(d.device_coordinate_3d)
|
||
: {}, // x: 0, y: 25, z: -2.5 (3.35, -4.81, 12.88
|
||
temp: 25,
|
||
forge_dbid: parseInt(d.forge_dbid),
|
||
})),
|
||
});
|
||
});
|
||
}
|
||
}
|
||
|
||
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 {
|
||
let myDataList = [];
|
||
$.each(res.data, (idx, data) => {
|
||
if (lightControl == "node" && data.device_nodes.length > 0) {
|
||
data.device_nodes.forEach((node) => {
|
||
if (
|
||
node.device_node_coordinate_3D != null &&
|
||
isJSON(node.device_node_coordinate_3D)
|
||
) {
|
||
myDataList.push({
|
||
...node,
|
||
position: JSON.parse(node.device_node_coordinate_3D),
|
||
});
|
||
}
|
||
});
|
||
} else if (
|
||
data.device_coordinate_3d != null &&
|
||
isJSON(data.device_coordinate_3d)
|
||
) {
|
||
myDataList.push({
|
||
...data,
|
||
position: JSON.parse(data.device_coordinate_3d),
|
||
});
|
||
}
|
||
});
|
||
|
||
getLightData(myDataList);
|
||
setHotspotPoint(myDataList);
|
||
callback ? callback() : "";
|
||
}
|
||
},
|
||
null,
|
||
"POST"
|
||
).send();
|
||
}
|
||
|
||
function setHotspotPoint(myDataList = []) {
|
||
getHopspotPoint(myDataList);
|
||
}
|
||
|
||
onEvent("autodesk:click:sprite", "#forgeViewer", function (e, obj) {
|
||
forgeUnFocusAll();
|
||
chartUnFocusAll();
|
||
let rect = $("#forgeViewer")[0].getBoundingClientRect();
|
||
let position = [rect.left + rect.width / 2, rect.top + rect.height / 4];
|
||
// console.log(position)
|
||
// let position = [obj.event.target.toolController.lastClickX, obj.event.target.toolController.lastClickY];
|
||
let devObj = obj.myData;
|
||
let name =
|
||
lightControl === "node" && pageAct.sysSubTag === "L1"
|
||
? currentData.filter(
|
||
(x) => x.device_node_guid == devObj.device_node_guid
|
||
)[0]?.device_node_full_name
|
||
: currentData.filter((x) => x.device_guid == devObj.device_guid)[0]
|
||
?.full_name;
|
||
devObj.full_name = name;
|
||
parentEle = crePosPopover(position, devObj);
|
||
$(parentEle).click();
|
||
|
||
let option = floChart.getOption();
|
||
option.series.forEach(function (series) {
|
||
series.data.forEach(function (point) {
|
||
if (pageAct.sysSubTag === "L1") {
|
||
if (point.device_node_guid == devObj.device_node_guid) {
|
||
point.symbolSize = 50;
|
||
}
|
||
} else {
|
||
if (point.device_guid == devObj.device_guid) {
|
||
point.symbolSize = 50;
|
||
}
|
||
}
|
||
});
|
||
});
|
||
floChart.setOption(option);
|
||
});
|
||
|
||
onEvent("autodesk:clickOut:sprite", "#forgeViewer", function (e) {
|
||
$(parentEle).YTTooltip("hide");
|
||
});
|
||
|
||
function forgeUnFocusAll() {
|
||
$.each(currentData, (idx, cData) => {
|
||
const eleDbId = cData._dbId;
|
||
if (alarmDbIdList.some((dbId) => dbId == eleDbId)) {
|
||
changeScaleForHotspot(eleDbId, false);
|
||
return;
|
||
} else {
|
||
// 3D 熱點解除
|
||
controlFocusHotspot(eleDbId, false);
|
||
}
|
||
});
|
||
}
|
||
|
||
function chartUnFocusAll() {
|
||
let option = floChart.getOption();
|
||
option.series.forEach(function (series) {
|
||
series.data.forEach(function (point) {
|
||
point.symbolSize = 20;
|
||
});
|
||
});
|
||
floChart.setOption(option);
|
||
}
|
||
|
||
// 解除 series 聚焦
|
||
function chartUnFocus(ele) {
|
||
let devGuid = $(ele).data("id");
|
||
let option = floChart.getOption();
|
||
option.series.forEach(function (series) {
|
||
series.data.forEach(function (point) {
|
||
if (point.device_guid == devGuid) {
|
||
point.symbolSize = 20;
|
||
}
|
||
});
|
||
});
|
||
floChart.setOption(option);
|
||
}
|
||
</script>
|