ibms-dome/Frontend/js/site.js

673 lines
25 KiB
JavaScript
Raw Normal View History

$(function () {
$(".dropdown-menu.dropdown-select-menu").each((index, value) => {
setDropdownItem(value)
})
})
/**
* fn 定義 | 手動初始化 Bootstrap dropdown select
*/
$.fn.droSetItem = function () {
setDropdownItem(this);
return this;
}
/**
* fn 定義 | 輸出含原元素 html
*/
$.fn.outerHtml = function () {
return $(this).prop("outerHTML");
}
/**
* fn 定義 | Loading 操作
* @param {any} type - close / start / exceed , exceed => 繼續執行並可切換文字
* @param {any} text - 右下角 Alert 文字
*/
$.fn.Loading = function (type = "close", text) {
let ele = this;
let aleObj = $(this)[0]._aleObj;
let showStatus = $(ele).data("loading-show-status");
function closeLoading() {
$(ele).data("loading-show-status", "close");
$("body").css("overflow", "auto");
$(aleObj.ele).YTAlert().hide();
$(ele).animate({ opacity: 0 }, 300, () => {
if ($(ele).data("loading-show-status") == "close") {
$(ele).hide();
}
})
}
function showLoading() {
$(ele).data("loading-show-status", "show");
$("body").css("overflow", "hidden");
let aleObj = YT.Alert.Tip(text || "讀取中,請稍後", "show");
$(ele)[0]._aleObj = aleObj;
$(ele).show();
$(ele).animate({ opacity: 1 }, 300);
$(aleObj.ele).YTAlert().text(text);
}
if (type == "close") {
closeLoading();
} else if (type == "exceed") {
$(aleObj.ele).YTAlert().text(text);
} else if (type == "start") {
showLoading();
}
return $(this);
}
$.fn.YTAlert = function () {
let th = { element: this };
th.hide = function (delay = 0) {
let obj = this;
setTimeout(function () {
$(obj.element).fadeOut(300);
alertIdArray.splice($.inArray($(obj.element).prop("id"), alertIdArray), 1);
setTimeout(function () {
$(obj.element).remove();
}, 1000);
}, delay);
}
th.text = function (text) {
let obj = this;
let id = $(obj.element).prop("id").split("tip-alert-")[1];
$(`#alert-text-${id}`).text(text);
}
return th;
}
/**
* 設置 bootstrap dropdown 為下拉選單
* @param {any} menuEle - .dropdown-menu element
*/
function setDropdownItem(menuEle) {
if ($(menuEle).find(".dropdown-item.active").length == 0) {
$(menuEle).find(".dropdown-item").first().addClass("active");
}
let actText = $(menuEle).find(".dropdown-item.active").first().text();
let actEleId = $(menuEle).prop("id");
$(`.dropdown-toggle[data-target=${actEleId}]`).text(actText);
/*actChaCallback($(menuEle).find(".dropdown-item.active"))*/
$(menuEle).trigger("active:change", $(menuEle).find(".dropdown-item.active"));
//點選選項 add active class
onEvent("click", ".dropdown-menu.dropdown-select-menu .dropdown-item", function () {
$(this).parent(".dropdown-menu.dropdown-select-menu").find(".dropdown-item").removeClass("active");
$(this).addClass("active");
setDropdownItem($(this).parent(".dropdown-menu.dropdown-select-menu"));
})
}
/**
* 預設設備圖像
* @param {any} obj
*/
function defDev(obj) {
let defSrc = 'img/defdev.png';
obj.src = defSrc;
}
/**
* jquery datatable - ajax send data reset
* @param {any} table
* @param {any} sendData
*/
function dtAjaxResetSendData(table, sendData) {
table.context[0].ajax.data = function (d) {
d = sendData;
return JSON.stringify(d)
}
}
/**
* element 建造
* @param {any} text
* @param {any} id
* @param {any} name
* @param {any} cls
* @param {any} data
* @param {any} attr
*/
function eleBuild(text = null, id = null, name = null, cls = [], data = {}, attr = {}) {
cls = cls ?? [], data = data ?? {}, attr = attr ?? {};
id = id ? `id="${id}"` : "";
name = name ? `name="${name}"` : "";
cls = cls.length != 0 ? `class="${cls.join(' ')}"` : "";
data = data.length != 0 ? `${Object.keys(data).map(x => `data-${x}="${data[x]}"`).join(" ")}` : "";
attr = attr ? `${Object.keys(attr).map(x => `${x}="${attr[x]}"`).join(" ")}` : "";
let attrArr = [], attrText = "";
attrArr = [id, name, cls, data, attr];
attrText = attrArr.filter(x => x != "").join(" ");
text = text === null ? "" : text;
return { attrText: attrText, text: text };
}
function creEle(ele, text = null, id = null, name = null, cls = [], data = {}, attr = {}) {
let comp = eleBuild(text, id, name, cls, data, attr);
return $(`<${ele} ${comp.attrText}>${comp.text}</${ele}>`);
}
function creDiv(cls = [], attr = {}, id = null, name = null, data = {}, text = null) {
return creEle("div", text, id, name, cls, data, attr);
}
function creBtn(text = null, id = null, name = null, cls = [], data = {}, attr = {}) {
return creEle("button", text, id, name, cls, data, attr);
}
function creBtnHtml(text = null, id = null, name = null, cls = [], data = {}, attr = {}) {
return creEle("button", text, id, name, cls, data, attr).prop("outerHTML");
}
function creSelect(id = null, cls = [], name = null, data = {}, attr = {}, text = null) {
return creEle("select", text, id, name, cls, data, attr);
}
function creOption(text = null, value = null, data = {}, attr = {}, cls = [], name = null, id = null) {
2022-12-14 11:57:40 +08:00
value != null ? attr.value = value : attr;
return creEle("option", text, id, name, cls, data, attr);
}
function creImg(ele, text = null, id = null, name = null, cls = [], data = {}, attr = {}) {
let comp = eleBuild(text, id, name, cls, data, attr);
return $(`<${ele} ${comp.attrText}>${comp.text}`);
}
function creI(cls = [], data = {}, attr = {}, id = null, name = null, text = null) {
return creEle("i", text, id, name, cls, data, attr);
}
function creA(text = null, attr = {}, cls = [], id = null, data = {}, name = null) {
return creEle("a", text, id, name, cls, data, attr);
}
function creSpan(text = null, cls = [], id = null, attr = {}, data = {}, name = null) {
return creEle("span", text, id, name, cls, data, attr);
}
/**
* 根據該棟建築底下的'所有'電梯執行緒物件
* */
class ElevatorHandler {
constructor(ele, option = {}) {
this.ele = ele;
this.eleId = "";
this.eleWra = $("<div></div>");
this.speed = 0.3;
this.movStatus = {}; // {id:elevator01,value:0} 0=no 1=up 2=down
this.floorHeight = typeof option.fHeight == "undefined" ? 60 : option.fHeight;
this.floorWidth = typeof option.fWidth == "undefined" ? 45 : option.fWidth;
this.floors = typeof option.floors == "undefined" ? [{}] : option.floors;
this.elevators = typeof option.elevators == "undefined" ? [{}] : option.elevators; // {id:elevator01}
this.curElevFloor = typeof option.curElevFloor == "undefined" ? {} : option.curElevFloor;
this.setTimeout = null;
this.init();
}
// 所有電梯初始化
init = function () {
this.setTabWra();
this.setTabFloor();
// 若已有每個設備的所在樓層,則預設到該樓層位置
if (Object.keys(this.curElevFloor).length != 0) {
$.each(Object.keys(this.curElevFloor), (idx, elevKey) => {
this.setElevFloor(elevKey, this.curElevFloor[elevKey]);
})
}
}
// 設置 wrapper
setTabWra = function () {
let id = $(this.ele).prop("id");
this.eleId = id;
if ($(this.ele).parent(".elevator-table-wrapper").length != 0) {
$(this.ele).unwrap(".elevator-table-wrapper");
}
let wrapper = creDiv(["elevator-table-wrapper"], null, `${id}_wrapper`);
$(this.ele).wrap(wrapper);
this.eleWra = wrapper;
}
// 設置 table 樓層
setTabFloor = function () {
let _w = this.floorWidth, _h = this.floorHeight;
let thead = creEle("thead"), tbody = creEle("tbody");
let _floors = this.floors, _ele = this.ele, _elevators = this.elevators;
//樓層從小到大
_floors = _floors.oSort("sort").reverse().map(x => x.name);
let theadTr = creEle("tr");
for (let e = 1; e <= _elevators.length + 2; e++) {
let th = creEle("th");
th.css({ "width": `${_w}px`, "height": `${_h}px`, "position": "relative" });
if (e != 1 && e != _elevators.length + 2) {
let elevId = _elevators[e - 2]?.id;
// 電梯方框
let span = creEle("span", null, "elevator-item-" + (elevId), null, ["elevator-item"]);
let spanUp = creEle("span", null, null, null, ["elevator-item-toup"]);
let spanDown = creEle("span", null, null, null, ["elevator-item-todown"]);
span.css({ "width": `${_w - 3}px`, "height": `${_h - 3}px`, "top": `1.5px`, "left": "1.5px", "transition": `transform ${1 / this.speed}s cubic-bezier(0.43, 0.05, 0.62, 1) 0s` })
spanUp.css({ "width": `${_w - 3}px`, "height": `${(_h - 3) / 2}px`, "top": `1.5px`, "left": "1.5px", "transition": `transform ${1 / this.speed}s cubic-bezier(0.43, 0.05, 0.62, 1) 0s` })
spanDown.css({ "width": `${_w - 3}px`, "height": `${(_h - 3) / 2}px`, "top": `1.5px`, "left": "1.5px", "transition": `transform ${1 / this.speed}s cubic-bezier(0.43, 0.05, 0.62, 1) 0s`, "top": `${1.5 + (_h - 3) / 2}px` })
th.append(spanUp);
th.append(span);
th.append(spanDown);
}
theadTr.append(th);
}
thead.css("position", "absolute");
thead.append(theadTr);
//樓層表格建置 tbody
for (let f = 1; f <= _floors.length; f++) {
let tr = creEle("tr");
for (let e = 1; e <= _elevators.length + 2; e++) {
let td = creEle("td");
td.css({ "width": `${_w}px`, "height": `${_h}px` });
if (e == 1) {
td.addClass("t-black")
td.text(_floors[f - 1]);
} else if (e == _elevators.length + 2) {
}
else {
let div = creDiv(["d-flex", "justify-content-center", "align-items-end", "h-100"]);
div.append(`<i class="fal fa-door-open fs-1-2"></i>`)
td.append(div)
}
tr.append(td);
}
tbody.append(tr);
}
$(_ele).append(thead);
$(_ele).append(tbody);
//表格外圍無框線
$(_ele).find("tbody tr").each((index, tr) => {
$(tr).find("td:eq(0)").css("border-left", "0");
$(tr).find("td:eq(-1)").css("border-right", "0");
if (index == 0) {
$(tr).find("td").each((index, td) => {
$(td).css("border-top", "0");
})
} else if (index == $("#floorTable tbody tr").length - 1) {
$(tr).find("td").each((index, td) => {
$(td).css("border-bottom", "0");
})
}
})
}
// 設置某個電梯到某個樓層
setElevFloor = function (elevId, floId) {
let curFloId = this.curElevFloor[elevId];
let curSort = this.floors.filter(x => x.id == curFloId).map(x => x.sort)[0];
let tarSort = this.floors.filter(x => x.id == floId).map(x => x.sort)[0];
let gapFloor = tarSort - curSort;
let cssEle = [$(`#elevator-item-${elevId}`)[0], $(`#elevator-item-${elevId}`).prev("span.elevator-item-toup")[0], $(`#elevator-item-${elevId}`).next("span.elevator-item-todown")[0]]
if (this.movStatus[elevId] != 0) {
$(cssEle).css("transition", `transform ${1 / this.speed * Math.abs(gapFloor)}s cubic-bezier(0, 0, 0.62, 1) 0s`);
}
clearTimeout(this.setTimeout);
this.setTimeout = setTimeout(() => {
$(cssEle).css("transition", `transform ${1 / this.speed * Math.abs(gapFloor)}s cubic-bezier(0.43, 0.05, 0.62, 1) 0s`);
this.setEleUpDownStyle(elevId);
}, (1 / this.speed * Math.abs(gapFloor)) * 1000)
this.setEleUpDownStyle(elevId);
this.curElevFloor[elevId] = floId;
$(cssEle).css("transition", `transform ${1 / this.speed * Math.abs(gapFloor)}s cubic-bezier(0.43, 0.05, 0.62, 1) 0s`)
$(cssEle).css("transform", `translateY(${this.floorHeight * (this.floors.length - tarSort)}px)`);
}
// 設定現在電梯狀態 (往上/往下/停止)
setEleMovStatus = function (elevId, status) {
this.movStatus[elevId] = status;
}
// 電梯方框 往上或往下閃爍
setEleUpDownStyle = function (elevId) {
if (this.movStatus[elevId] == 1) {
$(`#elevator-item-${elevId}`).next("span.elevator-item-todown").removeClass("light-flash-c-bd")
$(`#elevator-item-${elevId}`).prev("span.elevator-item-toup").addClass("light-flash-c-bd")
.css("--flash-color-1", "#44ea8e").css("--flash-color-2", "rgba(255,255,255,0)");
} else if (this.movStatus[elevId] == 2) {
$(`#elevator-item-${elevId}`).prev("span.elevator-item-toup").removeClass("light-flash-c-bd")
$(`#elevator-item-${elevId}`).next("span.elevator-item-todown").addClass("light-flash-c-bd")
.css("--flash-color-1", "#44ea8e").css("--flash-color-2", "rgba(255,255,255,0)");
} else {
$(`#elevator-item-${elevId}`).prev("span.elevator-item-toup").removeClass("light-flash-c-bd");
$(`#elevator-item-${elevId}`).next("span.elevator-item-todown").removeClass("light-flash-c-bd");
}
}
// 設定現在某個電梯所在樓層
setCurElevFloor = function (elevId, floId) {
this.curElevFloor[elevId] = floId;
}
// 重新繪製
redraw = function () {
$(this.ele).empty();
this.setTabFloor();
if (Object.keys(this.curElevFloor).length != 0) {
$.each(Object.keys(this.curElevFloor), (idx, elevKey) => {
this.setElevFloor(elevKey, this.curElevFloor[elevKey]);
})
}
}
}
// 從數字週數轉為中文週數
function dayToChiDay(num) {
let chiDay = ["週日", "週一", "週二", "週三", "週四", "週五", "週六"];
return chiDay[num];
}
// 取得現在或前後時間,輸出單位依據 type
function getTimeByType(type = null, cal = 0, unit = "d") {
let now = new Date();
return strToDate(now, type, cal, unit);
}
// 取得某當下時間或前後時間,輸出單位依據 type
function strToDate(text, type = null, cal = 0, unit = "d") {
let dec = 24 * 60 * 60 * 1000;
if (unit == "d") {
dec = 24 * 60 * 60 * 1000;
} else if (unit == "h") {
dec = 60 * 60 * 1000;
} else if (unit == "m") {
dec = 60 * 1000;
} else if (unit == "s") {
dec = 1000;
}
let calDay = function (_d, _cal) {
return new Date(_d.getTime() + (cal * dec));
}
let tarDate = new Date(text);
let result = 0;
if (type == "year") {
result = calDay(tarDate, cal).getFullYear();
} else if (type == "month") {
result = calDay(tarDate, cal).getMonth();
} else if (type == "date") {
result = calDay(tarDate, cal).getDate();
} else if (type == "day") {
result = calDay(tarDate, cal).getDay();
} else {
result = calDay(tarDate, cal);
}
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();
let cutTimeArr = [];
if (sTime < eTime) return [];
let partNum = (sTime - eTime) / cutNum;
for (let i = eTime; i <= sTime; i = i + partNum) {
cutTimeArr.push(i)
}
cutTimeArr.forEach(x => new Date(x));
return cutTimeArr;
}
function isJSON(str) {
try {
JSON.parse(str);
return true;
} catch {
return false;
}
}
function addBsToast(container, type = "warning",title="",content ="", id, datas = {}, option = {}) {
datas = Object.keys(datas).length != 0 ? `${Object.keys(datas).map(x => `data-${x}="${datas[x]}"`).join(" ")}` : "";
let iconClass = option.iconHtml ?? `fas fa-exclamation-triangle`;
let strHtml = `<div class="toast" role="alert" aria-live="assertive" aria-atomic="true" data-autohide="false" ${datas}>
<div class="toast-header ${warning ? `bg-` + warning : ""}">
<i class="${iconClass}"></i>
<strong class="mr-auto">${title}</strong>
<small class="text-muted">just now</small>
<button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="toast-body">
${content}
</div>
</div>`
}
/**
* 取得資料庫電梯設備根據 baja 訂閱移動 3D 電梯
* */
class Forge3DElevFull {
constructor(option = {}) {
this.allElevDevList = []; //全電梯設備清單
this.subSeviceData = []; //每個設備訂閱點位值
this.floList = [];
this.elev3DBind = {};
this.elev3DOption = {};
this.elev3DObj = [];
this.viewer = option.viewer ?? null;
this.ordPath = option.ordPath ?? {};
this.sysMainTag = option.system_tag ?? "ELEV";
this.sysSubTag = option.name_tag ?? "EL";
this.selector = option.selector ?? "#forgeViewer";
this.bajaChaCallback = option.bajaChaCallback ?? null;
this.bajaEndCallback = option.bajaEndCallback ?? null;
}
init = function () {
// 系統大類、小類固定
this.ordPath.system_tag = this.sysMainTag;
this.ordPath.name_tag = this.sysSubTag;
this.getElevDevList();
}
// 訂閱電梯設備
subElevDevice = function () {
let myBaja = new subscriptionDevices();
let ordPath = this.ordPath;
myBaja.setSubscribeDevicesByBql(ordPath);
myBaja.setSubscribeDevicesCallBack((data) => {
this.bajaChaCallback ? this.bajaChaCallback(data) : "";
if (this.allElevDevList.length == 0) {
return false;
}
data.device_number = data.device_number_full;
let matchDevice = this.allElevDevList.filter(x => x.device_number == data.device_number)[0];
if (!matchDevice) {
return;
}
//將訂閱值塞入 subSeviceData
if (this.subSeviceData.findIndex(x => x.device_number == matchDevice.device_number) == -1) {
let obj = {};
obj.device_number = matchDevice.device_number;
this.subSeviceData.push(obj)
}
let subData = this.subSeviceData.filter(x => x.device_number == matchDevice.device_number)[0];
if (subData) {
subData[data.point_name] = data.value;
}
if (data.point_name == "CP") {
if (this.elev3DObj.length != 0) {
let elevObj = this.elev3DObj.filter(x => x.nodeId == this.elev3DBind[matchDevice.device_number])[0];
if (elevObj && elevObj.id) {
elevObj.obj.setElevatorFloor(data.value)
elevObj.obj.movElevator();
}
}
}
});
myBaja.setSubscribeDeviceEndCallBack((data) => {
this.floList = data.filter(x => x.point_name.startsWith("SP_FLS_")).map(x => x?.point_name?.split("SP_FLS_")[1]).Distinct();
this.set3DElevOpt(data);
this.bajaEndCallback != null ? this.bajaEndCallback() : "";
});
}
// 電梯 3D Option 設置
set3DElevOpt = function (data) {
let devNumArr = data.map(x => { return { devNum: x.device_number_full, priority: this.allElevDevList.filter(y => y.device_number == x.device_number_full)[0]?.priority } }).DistinctBy("devNum");
devNumArr = devNumArr.oSort("priority");
$.each(devNumArr, (idx, devObj) => {
let devNum = devObj.devNum;
let subData = this.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]);*/
this.elev3DOption.nodeId = this.elev3DBind[devNum];
this.elev3DOption.floorHeight = this.floList.map((x) => { return { floor: x } });
this.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 (this.elev3DObj.length != 0) {
let elevObj = this.elev3DObj.filter(x => x.nodeId == this.elev3DBind[devNum])[0];
if (!elevObj.id) {
elevObj.id = devNum;
}
elevObj.obj = Object.assign(elevObj.obj, this.elev3DOption);
elevObj.obj.init(() => {
let frags = elevObj.obj.fragProxys.filter(x => x.nodeId == this.elev3DBind[devNum]);
frags.forEach((fragProxy) => {
fragProxy.frag.position.z = this.elev3DOption.floorHeight.filter(x => x.floor == subData["CP"])[0]?.height ?? 0;
fragProxy.frag.updateAnimTransform();
})
elevObj.obj.viewer.impl.sceneUpdated(true);
});
}
}
})
this.set3DElevPos();
}
// 電梯 3D 位置呈現
set3DElevPos = function () {
let nodeIds = this.allElevDevList.filter(x => !isNaN(parseInt(x.forge_dbid))).map(x => { return { devNum: x.device_number, nodeId: parseInt(x.forge_dbid) } });
$.each(nodeIds, (idx, item) => {
this.elev3DBind[item.devNum] = item.nodeId;
})
nodeIds = nodeIds.map(x => x.nodeId);
$.each(nodeIds, (idx, node) => {
let options = {
element: $(this.selector),
viewer: this.viewer,
nodeId: node,
floorHeight: this.elev3DOption.floorHeight ?? [],
inited: function () {
}
}
let elevator3DObj = new elevator3D(options);
let devNum = Object.keys(this.elev3DBind).filter(x => this.elev3DBind[x] == node)[0];
let subData = this.subSeviceData.filter(x => x.device_number == devNum)[0];
if (this.elev3DObj.filter(x => x.nodeId == node).length == 0) {
this.elev3DObj.push({ id: devNum, nodeId: node, obj: elevator3DObj });
}
if (subData) {
let elevObj = this.elev3DObj.filter(x => x.nodeId == node)[0];
if (!elevObj.id) {
elevObj.id = devNum;
}
elevObj.obj = Object.assign(elevObj, elevator3DObj ?? {})
elevObj.obj.init(() => {
let frags = elevObj.obj.fragProxys.filter(x => x.nodeId == node);
frags.forEach((fragProxy) => {
fragProxy.frag.position.z = this.elev3DOption.floorHeight.filter(x => x.floor == subData["CP"])[0]?.height ?? 0;
fragProxy.frag.updateAnimTransform()
})
elevObj.obj.viewer.impl.sceneUpdated(true);
})
}
})
}
// 取得設備列表
getElevDevList = function () {
let url = baseApiUrl + "/api/Device/GetDeviceList";
let sendData = {
sub_system_tag: this.ordPath.name_tag,
building_tag: this.ordPath.building_tag,
};
objSendData.Data = sendData;
ytAjax = new YourTeam.Ajax(url, objSendData, (res) => {
if (!res || res.code != "0000" || !res.data) {
} else {
$.each(res.data, (index, floObj) => {
$.each(floObj.device_list, (index2, devObj) => {
this.allElevDevList.push(devObj);
})
})
this.subElevDevice();
}
}, null, "POST").send();
}
getNodeIds = function () {
return this.elev3DObj.map(x => x.nodeId);
}
}