[Frontend] Forge 3D 顯示燈光程序調整 | 溫度條四種顏色程序調整 | [系統監控] 溫度條只有含有 Temp 的點位才會出現 | 計時器程序調整 | 顯示警告 toast |
This commit is contained in:
parent
92b6fd6de9
commit
f0af802f0d
@ -216,7 +216,7 @@
|
||||
var tarElePath = '';
|
||||
var sysSubList = [];
|
||||
var viewer3DNodeIds = [];
|
||||
var timeOuters = [];
|
||||
|
||||
var eveDayElecChart = null;
|
||||
var eveWeekElecChart = null;
|
||||
var worOrdErrChart = null;
|
||||
@ -269,7 +269,7 @@
|
||||
show3DModel();
|
||||
getSubList();
|
||||
getFirstEletric();
|
||||
timeOutGetData();
|
||||
|
||||
});
|
||||
|
||||
function demoSubList() {
|
||||
|
||||
@ -48,7 +48,6 @@
|
||||
setLightColor();
|
||||
}
|
||||
if (arr.indexOf(3) != -1) {
|
||||
getLightPoint();
|
||||
getHotspotPoint(() => {
|
||||
show3DModel(data.urn_3D);
|
||||
});
|
||||
@ -96,12 +95,12 @@
|
||||
}
|
||||
myBaja.setSubscribeDevicesByBql(ordPath);
|
||||
myBaja.setSubscribeDevicesCallBack(function (data) {
|
||||
console.log(data)
|
||||
|
||||
let matchDevice = allDevList.filter(x => x.device_number == data.device_number_full)[0];
|
||||
if (!matchDevice) {
|
||||
return false;
|
||||
}
|
||||
console.log(data)
|
||||
|
||||
//將訂閱值塞入 subDeviceData
|
||||
if (subDeviceData.findIndex(x => x.device_number == matchDevice.device_number) == -1) {
|
||||
let obj = {};
|
||||
@ -144,6 +143,10 @@
|
||||
|
||||
myBaja.setSubscribeDeviceEndCallBack(function (data) {
|
||||
endPageLoading();
|
||||
if (data.findIndex(x => x.point_name == "Temp") != -1) {
|
||||
// 顯示溫度條
|
||||
showHeat("[name=forgeHeatBar]");
|
||||
}
|
||||
});
|
||||
|
||||
}
|
||||
@ -267,7 +270,7 @@
|
||||
<span class="d-inline-block mr-3">
|
||||
<img src="${baseImgUrl + varPathDevIcon + devObj.device_image}" class="profile-image rounded-circle" onerror="defDev(this)" alt="...">
|
||||
</span>
|
||||
<a href="javascript:;">${devObj.full_name}</a>
|
||||
<a name="devItemName" data-number="${devObj.device_number}" href="javascript:;">${devObj.full_name}</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex mb-0 mt-2 align-items-center">
|
||||
@ -282,13 +285,28 @@
|
||||
})
|
||||
// Niagara 產生 file 開頭字串問題
|
||||
strHtml = strHtml.replaceAll(`src="/file/`, `src="`);
|
||||
|
||||
if (!res.data || res.data.length == 0) {
|
||||
endPageLoading();
|
||||
} else {
|
||||
// 訂閱 baja 設備
|
||||
subDevice();
|
||||
}
|
||||
|
||||
// 繪製 html
|
||||
$("#floDevList").append(strHtml);
|
||||
|
||||
// 存入 device 基本資料至元素 data 屬性
|
||||
$("#floDevList a[name=devItem]").each((idx, ele) => {
|
||||
if (allDevList.findIndex(x => x.device_number == $(ele).data("number")) != -1) {
|
||||
$(ele).data("devobj", allDevList.filter(x => x.device_number == $(ele).data("number"))[0]);
|
||||
}
|
||||
})
|
||||
|
||||
// 初始化 pop 視窗
|
||||
initPopover();
|
||||
// 卡片設備名稱點擊事件
|
||||
devItemNameEvent();
|
||||
}
|
||||
}, null, "POST").send();
|
||||
}
|
||||
@ -349,9 +367,10 @@
|
||||
|
||||
function show3DModel(urn) {
|
||||
$(loadEle).Loading("start");
|
||||
//getLightData(allDevList);
|
||||
if (pageAct.sysMainTag == "LT") {
|
||||
setLightPoint(allDevList);
|
||||
}
|
||||
launchViewerForHotspot(urn, (viewer, nodeIds) => {
|
||||
showHeat("[name=forgeHeatBar]");
|
||||
let devDbIds = allDevList.map(x => x.forge_dbid);
|
||||
/*hideAllObjects(devDbIds);*/
|
||||
|
||||
@ -455,7 +474,6 @@
|
||||
myDataList.push(item);
|
||||
})
|
||||
|
||||
console.log("1", myDataList)
|
||||
setHotspotPoint(myDataList);
|
||||
callback ? callback() : "";
|
||||
}
|
||||
@ -463,45 +481,12 @@
|
||||
|
||||
}
|
||||
|
||||
async function getLightPoint(callback = null) {
|
||||
let url = baseApiUrl + "/api/GetDevNodeForCor";
|
||||
let sendData = {
|
||||
"device_area_tag": pageAct.AreaTag,
|
||||
"device_building_tag": pageAct.buiTag,
|
||||
"device_system_tag": pageAct.sysMainTag,
|
||||
"device_name_tag": pageAct.sysSubTag,
|
||||
};
|
||||
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) => {
|
||||
let item = {};
|
||||
item.position = {};
|
||||
if (data.device_node_coordinate_3d != null && isJSON(data.device_node_coordinate_3d)) {
|
||||
item.position = JSON.parse(data.device_node_coordinate_3d);
|
||||
}
|
||||
$.extend(item, data);
|
||||
myDataList.push(item);
|
||||
})
|
||||
|
||||
console.log("2", myDataList)
|
||||
setLightPoint(myDataList);
|
||||
callback ? callback() : "";
|
||||
}
|
||||
}, null, "POST").send();
|
||||
|
||||
}
|
||||
|
||||
function setHotspotPoint(myDataList = []) {
|
||||
console.log(myDataList)
|
||||
getHopspotPoint(myDataList);
|
||||
}
|
||||
|
||||
async function setLightPoint(myDataList = []) {
|
||||
function setLightPoint(myDataList = []) {
|
||||
console.log(myDataList)
|
||||
getLightData(myDataList);
|
||||
}
|
||||
|
||||
@ -93,6 +93,9 @@ input:-webkit-autofill { background-color: rgba(0, 0, 0, 0.15) !important; }
|
||||
.device-wrap .card-body #info, .device-wrap .card-body #errRec, .device-wrap .card-body #opeRec { min-width: 500px; }
|
||||
.scrolledTable { overflow-y: auto; clear: both; max-height:100%;}
|
||||
|
||||
#toast-container > div {
|
||||
width:330px !important;
|
||||
}
|
||||
/*a[data-tabname="topFunBtn"] { color: #fff }
|
||||
|
||||
a[data-tabname="topFunBtn"].active { color: #886ab5 }
|
||||
@ -103,7 +106,7 @@ a[data-tabname="topFunBtn"]:hover { color: var(--theme-primary-50); }
|
||||
}
|
||||
.userblock:hover { color: var(--theme-primary-50); }
|
||||
.dropdown.show .userblock { color: var(--theme-primary-50) !important; }*/
|
||||
.page-header a {color:#fff !important;}
|
||||
.page-header a { color: #fff !important; }
|
||||
.page-header a:hover { color: var(--theme-primary-50) !important; }
|
||||
.page-header a.active { color: var(--theme-primary-500) !important; }
|
||||
.dropdown.show a { color: var(--theme-primary-50) !important; }
|
||||
|
||||
@ -725,6 +725,7 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
|
||||
var jwt = null;
|
||||
var loadingTip = '';
|
||||
var pageAct = {}; //記錄全頁面已選擇項目
|
||||
var timeOuters = [];
|
||||
pageAct.AreaTag = "";
|
||||
if (location.href.indexOf("ord") != -1) {
|
||||
location.href = "/file/index.html"
|
||||
@ -838,6 +839,7 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
|
||||
getSysMonBtnList();
|
||||
checkDevState();
|
||||
|
||||
|
||||
if (lastPage) {
|
||||
let lastPageAct = {};
|
||||
if (isJSON(sessionStorage.getItem("pageAct"))) {
|
||||
@ -855,6 +857,7 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
|
||||
$("#app").load("_dashboard.html", loadCallback);
|
||||
}
|
||||
|
||||
timeOutGetData();
|
||||
|
||||
function getBuiList() {
|
||||
let url = baseApiUrl + "/api/Device/GetBuild";
|
||||
@ -935,7 +938,7 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
|
||||
endPageLoading();
|
||||
$(".yt-alert").YTAlert().hide();
|
||||
|
||||
if (typeof timeOuters != "undefined") {
|
||||
if (typeof timeOuters != "undefined" && timeOuters) {
|
||||
$.each(timeOuters, (idx, timeOut) => {
|
||||
clearInterval(timeOut);
|
||||
})
|
||||
@ -989,6 +992,7 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
|
||||
})
|
||||
|
||||
$(window).on("timeout:3s", function () {
|
||||
debugger
|
||||
getSystemAlarmByBaja((data) => {
|
||||
if (typeof getAlarmSub != "undefined" && getAlarmSub) {
|
||||
getAlarmSub(data);
|
||||
@ -996,6 +1000,7 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
|
||||
alarmIconBlink();
|
||||
|
||||
})
|
||||
showWarToast();
|
||||
})
|
||||
|
||||
}
|
||||
@ -1103,7 +1108,6 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
|
||||
let lightHtml = type == "light" ? `<button type="button" id="lightSch-tab" class="btn btn-icon nav-link" role="tab" data-tabname="cardTab" data-target="#lightSch"><i class="fas fa-calendar-alt"></i></button>` : "";
|
||||
let option = {
|
||||
html: `<div class="card m-1 border device-wrap">
|
||||
|
||||
<div class="card-header p-3">
|
||||
|
||||
<div class="position-absolute w-50" style="word-break: break-all;">
|
||||
@ -1135,20 +1139,29 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
|
||||
</div>`,
|
||||
group: "device",
|
||||
onShow: function (tooltipEle, oriEle) {
|
||||
var tab = new YT.Tab({ tabName: "cardTab" })
|
||||
// 執行 pop 視窗上方 Tab 類別
|
||||
new YT.Tab({ tabName: "cardTab" })
|
||||
let devObj = $(oriEle).data("devobj");
|
||||
// 讀取運維列表
|
||||
loadOpeRecTable(devGuid);
|
||||
|
||||
// 讀取異常列表
|
||||
loadErr($(oriEle).data("number"));
|
||||
// 讀取設備基本資料列表
|
||||
$(tooltipEle).find("#info").html(typeof drawInfoTabBlo != "undefined" ? drawInfoTabBlo(devGuid) : "");
|
||||
// 聚焦熱點
|
||||
if ($(oriEle).data("dbId")) {
|
||||
controlFocusHotspot($(oriEle).data("dbId"));
|
||||
}
|
||||
// 3D 視角 ZOOM IN 聚焦
|
||||
moveViewToDevice(devObj?.forge_dbid);
|
||||
// pop 視窗卡片可拖移功能初始化
|
||||
$(tooltipEle).draggable({
|
||||
cursor: "move",
|
||||
handle: ".card-header", // 只能通过卡片的标题栏拖拽
|
||||
containment: "document",
|
||||
scroll: true
|
||||
});
|
||||
// pop 視窗卡片可縮放功能初始化
|
||||
$(tooltipEle).resizable({
|
||||
resize: function (event,ui) {
|
||||
let iframe = $(ui.element).find("iframe");
|
||||
@ -1167,9 +1180,11 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
|
||||
minWidth: 200,
|
||||
minHeight:150,
|
||||
});
|
||||
// 電梯管理 - Card table 更新
|
||||
typeof subDeviceSetTable != "undefined" ? subDeviceSetTable($(oriEle).data("number")) : ""
|
||||
},
|
||||
onHide: function (tooltipEle, oriEle) {
|
||||
// 3D 熱點解除
|
||||
controlFocusHotspot($(oriEle).data("dbId"), false);
|
||||
// sysMonFloor Echart 解除 focus
|
||||
typeof chartUnFocus != "undefined" ? chartUnFocus(oriEle) : "";
|
||||
@ -1182,6 +1197,15 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
|
||||
})
|
||||
}
|
||||
|
||||
// 卡片設備名稱點擊事件
|
||||
function devItemNameEvent() {
|
||||
onEvent("click", "[name=devItemName]", function () {
|
||||
let devNum = $(this).data("number");
|
||||
let devObj = $(`[name=devItem][data-number=${devNum}]`).data("devobj");
|
||||
moveViewToDevice(devObj.forge_dbid);
|
||||
})
|
||||
}
|
||||
|
||||
// Card - 運維紀錄 Table
|
||||
function loadOpeRecTable(devGuid) {
|
||||
if (opeRecTable) {
|
||||
@ -1433,6 +1457,7 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
|
||||
function timeOutGetData() {
|
||||
let timeOut3s = null, timeOut5m = null;
|
||||
let events = $._data($(window)[0], "events");
|
||||
|
||||
if (Object.keys(events).findIndex(x => x == "timeout:3s") != -1) {
|
||||
timeOut3s = setInterval(() => {
|
||||
$(window).trigger("timeout:3s");
|
||||
@ -1531,7 +1556,6 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
|
||||
};
|
||||
objSendData.Data = sendData;
|
||||
ytAjax = new YourTeam.Ajax(url, objSendData, function (res) {
|
||||
console.log(res);
|
||||
if (!res || res.code != "0000" || !res.data) {
|
||||
|
||||
} else {
|
||||
@ -1576,6 +1600,56 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
|
||||
}
|
||||
}, null, "POST").send();
|
||||
}
|
||||
|
||||
function showWarToast() {
|
||||
let options = {
|
||||
"closeButton": false,
|
||||
"debug": false,
|
||||
"newestOnTop": true,
|
||||
"progressBar": false,
|
||||
"positionClass": "toast-top-right",
|
||||
"preventDuplicates": false,
|
||||
"onclick": null,
|
||||
"showDuration": "300",
|
||||
"hideDuration": "1000",
|
||||
"timeOut": 0,
|
||||
"extendedTimeOut": 0,
|
||||
"showEasing": "swing",
|
||||
"hideEasing": "linear",
|
||||
"showMethod": "fadeIn",
|
||||
"hideMethod": "fadeOut",
|
||||
"tapToDismiss": false
|
||||
}
|
||||
|
||||
if ($("#toast-container .toast").length < 2) {
|
||||
let strConHtml = `<div class="col-12">
|
||||
<div class="row m-0">
|
||||
<span class="m-0">異常編號：<span>001</span></span>
|
||||
</div>
|
||||
<div class="row m-0">
|
||||
<span class="m-0">異常等級：<span>2</span></span>
|
||||
</div>
|
||||
<div class="row m-0">
|
||||
<span class="m-0">異常類別：<span>S01</span></span>
|
||||
</div>
|
||||
<div class="row m-0">
|
||||
<span class="m-0">設備名稱：<span>電表01</span></span>
|
||||
</div>
|
||||
<div class="row m-0">
|
||||
<span class="m-0">異常訊息：<span>壞掉</span></span>
|
||||
</div>
|
||||
|
||||
</div>`;
|
||||
let titleHtml = `<div class="col-12">
|
||||
<div class="row m-0">
|
||||
<span class="fs-1">異常通知</span>
|
||||
<span class="ml-auto">2023/01/01 12:00:00</span>
|
||||
</div>
|
||||
</div>`
|
||||
toastr.warning(strConHtml, titleHtml, options)
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
@ -596,7 +596,7 @@ class ADHeatMaps {
|
||||
await dataVizExtn.setupSurfaceShading(this.model, heatmapData);
|
||||
|
||||
// 對 "temperature" 的溫度設定兩種顏色：紅色和藍色
|
||||
dataVizExtn.registerSurfaceShadingColors("temperature", [0x0000ff, 0xff0000]);
|
||||
dataVizExtn.registerSurfaceShadingColors("temperature", [0x0000ff, 0x00ff00, 0xffff00, 0xff0000]);
|
||||
|
||||
this.dataVizExtn = dataVizExtn;
|
||||
|
||||
@ -622,9 +622,9 @@ class ADHeatMaps {
|
||||
dev.temp = temp;
|
||||
}
|
||||
})
|
||||
|
||||
this.dataVizExtn.updateSurfaceShading(this.getSensorValue.bind(this));
|
||||
|
||||
$.each(this.roomDbIds, (idx, rDbid) => {
|
||||
this.dataVizExtn.renderSurfaceShading("RoomPanel" + rDbid, "temperature", this.getSensorValue.bind(this));
|
||||
})
|
||||
//if (rDbid != null) {
|
||||
// // 取得新的溫度值
|
||||
// let getSensorValue = (device, sensorType) => {
|
||||
@ -720,13 +720,16 @@ function hideColor(nodeId) {//顏色改成透明
|
||||
|
||||
//紀錄燈具座標
|
||||
async function getLightData(data) {
|
||||
lightList = [];
|
||||
lightDataList = data;
|
||||
}
|
||||
|
||||
async function testNewLight(dataList) {
|
||||
dataList.forEach((myData, index) => {
|
||||
const position = JSON.parse(myData.device_node_coordinate_3d);
|
||||
const position = JSON.parse(myData.device_coordinate_3d);
|
||||
if (lightList.findIndex(x => x.device_guid == myData.device_guid) == -1) {
|
||||
lightList.push({ dbid: myData.forge_dbid, device_guid: myData.device_guid, lightObject: new THREE.SpotLight(0xffffff, 200, 20, 0.6, 0.5, 10) });
|
||||
}
|
||||
|
||||
lightList[index].lightObject.position.set(position.x, position.y, position.z);
|
||||
lightList[index].lightObject.castShadow = true;
|
||||
@ -928,8 +931,8 @@ async function loadHeatmaps(model) {
|
||||
|
||||
// Setup surface shading
|
||||
await dataVizExtn.setupSurfaceShading(model, heatmapData);
|
||||
const sensorColors = [0x0000ff, 0x00ff00, 0xffff00, 0xff0000];//0 ~ 1 藍綠黃紅
|
||||
dataVizExtn.registerSurfaceShadingColors("temperature", sensorColors);
|
||||
|
||||
dataVizExtn.registerSurfaceShadingColors("temperature", [0xff0000, 0x0000ff]);
|
||||
|
||||
function getSensorValue(device, sensorType) {
|
||||
return sensorVals[parseInt(device.id.slice(-1)) - 1];
|
||||
@ -1170,10 +1173,10 @@ function createHeatmapRect(labels, colorStops, selector) {
|
||||
}
|
||||
const context = $(selector)[0].getContext('2d');
|
||||
let i, len;
|
||||
context.clearRect(0, 0, 300, 50);
|
||||
context.clearRect(0, 0, 200, 50);
|
||||
context.fillStyle = 'back';//white
|
||||
for (i = 0, len = labels.length; i < len; i++) {
|
||||
let x = 10 + 280 * i / (len - 1);
|
||||
let x = 10 + 180 * i / (len - 1);
|
||||
if (i === len - 1) {
|
||||
x -= context.measureText(labels[i]).width;
|
||||
}
|
||||
@ -1182,12 +1185,12 @@ function createHeatmapRect(labels, colorStops, selector) {
|
||||
}
|
||||
context.fillText(labels[i], x, 10);
|
||||
}
|
||||
const gradient = context.createLinearGradient(0, 0, 300, 0);
|
||||
const gradient = context.createLinearGradient(0, 0, 200, 0);
|
||||
for (i = 0, len = colorStops.length; i < len; i++) {
|
||||
gradient.addColorStop(i / (len - 1), colorStops[i]);
|
||||
}
|
||||
context.fillStyle = gradient;
|
||||
context.fillRect(10, 20, 280, 20);
|
||||
context.fillRect(10, 20, 200, 25);
|
||||
}
|
||||
|
||||
//======================== 外部呼叫function ===========================
|
||||
|
||||
@ -407,6 +407,12 @@ function strToDate(text, type = null, cal = 0, unit = "d") {
|
||||
return result;
|
||||
}
|
||||
|
||||
// 將只有時間(Hms) 格式轉換為當日的時間
|
||||
function fullTime(time) {
|
||||
let nowDate = displayDate(new Date(), "date");
|
||||
return new Date(nowDate + " " + time);
|
||||
}
|
||||
|
||||
function dateRanCutPart(start, end, cutNum) {
|
||||
let sTime = (new Date(start)).getTime();
|
||||
let eTime = (new Date(end)).getTime();
|
||||
|
||||
Loading…
Reference in New Issue
Block a user