jay.chang/ibms-dome
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[Frontend][系統監控] 3D viewer 跑版問題解決 | 電梯 2d 平面圖訂閱串接 | 2D動畫調整

Browse Source
This commit is contained in:
dev01 2022-11-29 12:46:19 +08:00
parent 6947fa22b9
commit 86426b5782
9 changed files with 367 additions and 202 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

120
Frontend/_sysElevator.html
View File

@ -3,7 +3,9 @@
background-color: #fff;
min-height: 520px;
}
.elevator-table-wrapper {
padding:0.8rem;
}
table.elevator-build {
/*border: 1px double #000;*/
}
@ -25,6 +27,20 @@
height: 47px;
border: 4px solid orange;
}
.elevator-item-toup {
border: 4px solid rgba(255,255,255,0);
position: absolute;
border-bottom: 0;
z-index: 2;
}
.elevator-item-todown {
border: 4px solid rgba(255,255,255,0);
position: absolute;
border-top: 0;
z-index: 2;
}
</style>
<div class="d-flex">
@ -35,30 +51,22 @@
<div id="elevatorBlock" class="elevator">
<div class="elevator-header">
<div class="row m-0 align-items-center p-2 gap-3 btn-group btn-group-toggle">
<button class="btn btn-secondary btn-sm active" data-tabname="floShowType" data-target="#3dDiv">
3D
</button>
<button class="btn btn-secondary btn-sm" data-tabname="floShowType" data-target="#2dDiv">
<button class="btn btn-secondary btn-sm active" data-tabname="floShowType" data-target="#2dDiv">
2D
</button>
</div>
<div class="row m-0 align-items-center p-2 gap-3 btn-group btn-group-toggle">
<button id="upFloBtn" class="btn btn-secondary btn-sm">
上樓
</button>
<button id="downFloBtn" class="btn btn-secondary btn-sm">
下樓
<button class="btn btn-secondary btn-sm" data-tabname="floShowType" data-target="#3dDiv">
3D
</button>
</div>
</div>
<div class="elevator-body d-flex align-items-center justify-content-center yt-table-container">
<div id="3dDiv" data-tabname="floShowType" data-tabrole="child">
<div id="forgeViewer"></div>
</div>
<div id="2dDiv" data-tabname="floShowType" data-tabrole="child">
<div class="elevator-body d-flex align-items-center justify-content-center">
<div id="2dDiv" class="p-2" data-tabname="floShowType" data-tabrole="child">
<table id="floorTable" class="elevator-build m-auto">
</table>
</div>
<div id="3dDiv" class="w-100" data-tabname="floShowType" data-tabrole="child">
<div id="forgeViewer"></div>
</div>
</div>
</div>
<!--<div>
@ -886,10 +894,10 @@
<script>
var eleManTable = null;
var allDevList = [];
var subSeviceData = [];
var floList = [];
var elevObj = null;
var allDevList = []; //每個設備
var subSeviceData = []; //每個設備訂閱點位值
var floList = []; //每個樓層
var elevObj = null; //左側 2D 電梯物件
var subOrdPath = {
"building_tag": pageAct.buiTag,
"system_tag": pageAct.sysMainTag,
@ -903,20 +911,19 @@
var zoomToggle = 3;
$(function () {
initChart();
setBuildFloor();
setCards();
subDeviceSetStatus();
setEleManTable();
console.log("--- load 3d ---");
load3DModel();
})
function getFloDevList() {
}
$(document).ready(function () {
load3DModel();
});
//baja 訂閱設備
function subDeviceSetStatus() {
myBaja = new subscriptionDevices();
@ -953,7 +960,7 @@
}
//現在樓層
if (data.point_name == "CP") {
$(`#${matchDevice.device_number}_card [name=curFloor]`).text(data.value + "F");
$(`#${matchDevice.device_number}_card [name=curFloor]`).text(data.value);
}
//往上或往下
if (getValueByName("RD") == "UP") {
@ -986,7 +993,9 @@
if (subData) {
subData[data.point_name] = data.value;
}
// 設置燈色、卡片閃爍
setLightColor();
// Card table 更新
subDeviceSetTable(matchDevice.device_number);
// 重繪 電梯管理 列表
reloadEleManTable(setEleManTabDataFromBaja());
@ -994,8 +1003,6 @@
subDeviceSetEleManDet(matchDevice.device_number);
// 電梯管理 不服務樓層 detail
subDeviceSetEleManNotSerFloor(master);
console.log(elevObj)
});
}
@ -1042,21 +1049,28 @@
function creLight(type = "trueText") {
let lightType = type == "trueText" ? "bg-success" : "bg-danger";
debugger
return $(creEle("span", null, null, null, [lightType, "circle-light"])).outerHtml();
}
let masterTag = devNum?.split("_")[5];
let notSerFloors = Object.keys(subData).filter(x => x.startsWith("SP_FLS_") && subData[x] == "trueText").map(x => x?.split("SP_FLS_")[1]);
floList = Object.keys(subData).filter(x => x.startsWith("SP_FLS_")).map(x => x?.split("SP_FLS_")[1]);
elevObj.floors = floList.map((x, idx) => { return { id: x, name: x, sort: idx } });
//左側 2D 電梯物件 樓層資料更新
if (elevObj.floors.length != floList.length) {
elevObj.floors = floList.map((x, idx) => { return { id: x, name: x, sort: idx + 1 } });
elevObj.elevators = allDevList.map((x) => { return { id: x.device_number } });
elevObj.curElevFloor[matchDevice.device_number] = subData["CP"];
elevObj.redraw();
} else {
elevObj.setElevFloor(matchDevice.device_number, subData["CP"]);
}
elevObj.setEleMovStatus(matchDevice.device_number, subData["RD"] == "UP" ? 1 : subData["RD"] == "DOWN" ? 2 : 0);
//現在樓層
if (subData["CP"]) {
$(`#imdStaTable_${devNum} [name=curFloor]`).text(subData["CP"] + "F");
$(`#imdStaTable_${devNum} [name=curFloor]`).text(subData["CP"]);
}
//往上或往下
if (subData["RD"] == "UP") {
@ -1127,33 +1141,12 @@
}
//左側 2D 樓層 Table
function setBuildFloor() {
let floors = floList.map((x, idx) => { return { id: x, name: x, sort: idx } });
let options = {
floors: floors,
elevators: [
{id:"elevator01"},
],
curElevFloor: {"elevator01":"1F"}
}
console.log(options)
elevObj = new ElevatorHandler("#floorTable", options);
let curSort = 3;
onEvent("click", "#upFloBtn", function () {
curSort++;
elevObj.setElevFloor("elevator01", options.floors.filter(x => x.sort == curSort)[0]?.id);
})
onEvent("click", "#downFloBtn", function () {
curSort--;
elevObj.setElevFloor("elevator01", options.floors.filter(x => x.sort == curSort)[0]?.id);
})
elevObj = new ElevatorHandler("#floorTable");
}
// Card 即時狀態
function drawStateTabBlo(devNum) {
let div = creDiv(["row"]);
div.append(creDiv(["col-xl-6"]).append(drawImdStaBlock(devNum)))
@ -1161,6 +1154,7 @@
return div.outerHtml();
}
// Card 即時狀態 - 左側 table
function drawImdStaBlock(devNum) {
let tabEle = $(`<table id="imdStaTable_${devNum}" class="table table-bordered table-striped text-center m-0">`);
let tbody = tabEle.append("<tbody>");
@ -1215,6 +1209,7 @@
return tabEle.outerHtml();
}
// Card 即時狀態 - 右側 table
function drawOpeModBlock(devNum) {
let tabEle = $(`<table id="opeModTable_${devNum}" class="table table-bordered table-striped text-center m-0">`);
let tbody = tabEle.append("<tbody>");
@ -1252,6 +1247,7 @@
return tabEle.outerHtml();
}
// 電梯管理 Modal - 資料更新
function reloadEleManTable(datas) {
let tabCols = eleManTable.context[0].aoColumns.map(x => x.data);
@ -1266,6 +1262,7 @@
eleManTable.clear().rows.add(datas).draw();
}
// 電梯管理 Modal - table 初始化
function setEleManTable() {
let tag = "#eleManTable";
let datas = [];
@ -1464,6 +1461,7 @@
})
})
// 電梯管理 Modal 不服務樓層 設定不服務樓層(BAJA)
onEvent("click", "#eleManTable [name^=notSerChk]", function () {
require(['baja!'], function (baja) {
baja.Ord.make("local:|foxs:|station:|slot:/TPE/B1/ELEV/EL/R2F/NA/ELEV1/N1|bql:select name, displayName, out, out.value, slotPath, parent.name as 'device_number' from control:ControlPoint where name = 'CP' or name = 'RD' or name = 'DS' or name = 'ST' or name = 'LOAD' or name = 'MID' or name = 'HAND' or name = 'IND' or name = 'MD' or name = 'DNO'").get()
@ -1610,7 +1608,6 @@
resetData();
})
function initChart() {
let chartDom = $("#floChart")[0];
floChart = echarts.init(chartDom, null, { width: 'auto' });
@ -2284,16 +2281,7 @@
//載入3D模型
function load3DModel() {
console.log("launchViewer~");
launchViewer('dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6LW1vZGVsX3Rlc3QxMTIxLyVFMyU4MCU5MFRFU1QlRTMlODAlOTEubndk');
}
</script>
<!--<link rel="stylesheet" href="https://developer.api.autodesk.com/modelderivative/v2/viewers/7.*/style.min.css" type="text/css">
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js'></script>
<script src="js/init.js"></script>
<script src="https://developer.api.autodesk.com/modelderivative/v2/viewers/7.*/viewer3D.js"></script>
<script src="js/forge/forgemodel.js"></script>-->

23
Frontend/css/site.css
View File

@ -55,6 +55,12 @@ label[id$='-error'].error {
animation: flashing-c 0.5s linear infinite;
}
.light-flash-c-bd {
--flash-color-1: #ffa100;
--flash-color-2: #26272b;
animation: flashing-c-bd 0.5s linear infinite;
}
/* checkbox switch */
input.toggle:checked::before {
content: '';
@ -131,6 +137,23 @@ input.toggle:checked {
}
}
@keyframes flashing-c-bd {
0% {
border-color: var(--flash-color-1);
}
49% {
border-color: var(--flash-color-1);
}
50% {
border-color: var(--flash-color-2);
}
99% {
border-color: var(--flash-color-2);
}
}
/* ================================================================ */
/* 單一方法 */
/* ================================================================ */

8
Frontend/index.html
View File

@ -2528,15 +2528,15 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
<!--The order of scripts is irrelevant. Please check out the plugin pages for more details about these plugins below:-->
<script src="lib/statistics/easypiechart/easypiechart.bundle.js"></script>
<script src="https://developer.api.autodesk.com/modelderivative/v2/viewers/7.*/viewer3D.js"></script>
<script src="js/forge/forgemodel.js"></script>
<!--Bajascript-->
<script src="js/bajascript/bscriptReq.js"></script>
<!--<script type='text/javascript' src='/module/js/com/tridium/js/ext/require/require.min.js?version=1496767636459'></script>-->
<script src='js/bajascript/require.js'></script>
<script src="https://developer.api.autodesk.com/modelderivative/v2/viewers/7.*/viewer3D.js"></script>
<script src="js/forge/forgemodel.js"></script>
<script type='text/javascript'>
@ -2708,7 +2708,7 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
pageAct.sysMainTag = null;
}
$.each(tolSubList, (idx, sub) => {
console.log("sub", sub, idx)
console.log("sub",sub,idx)
sub.unsubscribeAll();
sub.detach();
})

119
Frontend/js/forge/forgemodel.js
View File

@ -1,25 +1,63 @@
var viewer;
// const devices = [
// {
// id: "Sensor 1",
// position: {
// x: -22.779729106182415,
// y: 5.431043023608719,
// z: 4.553068469137088,
// },
// type: "combo",
// sensorTypes: ["temperature", "co2"],
// dbId: 1,
// },
// {
// id: "Sensor 2",
// position: {
// x: 0.20752051811882666,
// y: 5.431043023608719,
// z: 4.553068469137088,
// },
// type: "combo",
// sensorTypes: ["temperature", "co2"],
// dbId: 2,
// },
// ];
// var sensorStyleDefinitions = {
// co2: {
// url: "https://d2zqnmauvnpnnm.cloudfront.net/assets-1/images/co2.svg",
// color: 0xffffff,
// },
// temperature: {
// url: "https://d2zqnmauvnpnnm.cloudfront.net/assets-1/images/thermometer.svg",
// color: 0xffffff,
// },
// default: {
// url: "https://d2zqnmauvnpnnm.cloudfront.net/assets-1/images/circle.svg",
// color: 0xffffff,
// },
// };
// Initialize sensor values
//let sensorVals = [];
let fragProxy;
var targetFloorZ;
var elevatorSpeed;
let bulbLight;
//for (let i = 0; i < devices.length; i++) {
// for (let i = 0; i < devices.length; i++) {
// sensorVals[i] = Math.random();
//}
// }
function launchViewer(urn) {
var options = {
env: 'AutodeskProduction',
getAccessToken: getForgeToken,
language: 'en'
getAccessToken: getForgeToken
};
Autodesk.Viewing.Initializer(options, () => {
viewer = new Autodesk.Viewing.GuiViewer3D(document.getElementById('forgeViewer'));
//viewer = new Autodesk.Viewing.Viewer3D(document.getElementById('forgeViewer'));//這是沒有工具列的
//viewer = new Autodesk.Viewing.Viewer3D(document.getElementById('forgeViewer'));
viewer.start();
var documentId = 'urn:' + urn;
Autodesk.Viewing.Document.load(documentId, onDocumentLoadSuccess, onDocumentLoadFailure);
@ -27,7 +65,7 @@ function launchViewer(urn) {
//test
//for (let i = 0; i < urn.length; i++) {
// for (let i = 0; i < urn.length; i++) {
// Autodesk.Viewing.Document.load(urn[i]["urn"], async (doc) => {
// let viewables = doc.getRoot().getDefaultGeometry();
// let model = await viewer.loadDocumentNode(doc, viewables, {
@ -44,7 +82,7 @@ function launchViewer(urn) {
// await viewer.waitForLoadDone(); //!<<< Wait for loading materials, properties and geometries for this model (URN)
// });
//}
// }
//loadHeatmaps(viewer.getAllModels()[0]); //!<<< equals to viewer.model
@ -85,65 +123,36 @@ function onDocumentLoadSuccess(doc) {
viewer.loadDocumentNode(doc, viewables).then(i => {
// documented loaded, any action?
});
//viewer.addEventListener(Autodesk.Viewing.AGGREGATE_SELECTION_CHANGED_EVENT, (args) => {
// viewer.addEventListener(Autodesk.Viewing.AGGREGATE_SELECTION_CHANGED_EVENT, (args) => {
// var currSelection = viewer.getSelection();
// var domElem = document.getElementById('id_printer');
// domElem.innerText = currSelection[0];
// });
// const targetElem = currSelection[0];
//viewer.addEventListener(Autodesk.Viewing.GEOMETRY_LOADED_EVENT, function () {
// var instanceTree = viewer.model.getData().instanceTree;
// var allDbIdsStr = Object.keys(instanceTree.nodeAccess.dbIdToIndex);
// var domElem = document.getElementById('all_id');
// domElem.innerText = allDbIdsStr;
// const model = viewer.model;
// const instanceTree = model.getData().instanceTree;
// const fragList = model.getFragmentList();
// let tree = viewer.model.getData().instanceTree;
// let nodeId = 10952;
// let bounds = new THREE.Box3();
// instanceTree.enumNodeFragments(targetElem, (fragId) => {
// let box = new THREE.Box3();
// fragList.getWorldBounds(fragId, box);
// bounds.union(box);
// }, true);
// const position = bounds.center();
// console.log(position)
//});
viewer.addEventListener(Autodesk.Viewing.GEOMETRY_LOADED_EVENT, function (data) {
//var viewer = data.target;
//var instanceTree = viewer.model.getData().instanceTree;
//var allDbIdsStr = Object.keys(instanceTree.nodeAccess.dbIdToIndex);
//var domElem = document.getElementById('all_id');
//domElem.innerText = allDbIdsStr;
//let tree = viewer.model.getData().instanceTree;
//let nodeId = 10952;
//tree.enumNodeFragments(nodeId, function (frag) {
// tree.enumNodeFragments(nodeId, function (frag) {
// fragProxy = viewer.impl.getFragmentProxy(viewer.model, frag);
// console.log("p:" + fragProxy.position);
// fragProxy.getAnimTransform();
// let fragPosition = new THREE.Vector3(0, 0, 0);// 一樓0 二樓15 三樓 26
// fragProxy.position = fragPosition;
// fragProxy.updateAnimTransform();
// fragProxy.position = fragPosition
// fragProxy.updateAnimTransform()
// });
// viewer.impl.sceneUpdated(true);
//});
//viewer.impl.sceneUpdated(true);
});//, { once: true, }
//bulbLight = new THREE.PointLight(0xff0000, 20, 2, 1);//0xffee88
//bulbLight.position.set(39.33340644836426, 19.965089797973633, 18);//17.880840301513672
//bulbLight.castShadow = true;
//bulbLight.power = 100;// 110000;
//bulbLight.emissiveIntensity = bulbLight.intensity / Math.pow(0.02, 2.0);
//viewer.scene.add(bulbLight);
}
function setLightPower(value) {
bulbLight.intensity = (value * 10);
viewer.impl.sceneUpdated(true);
//bulbLight.power = value;
}
function setElevatorFloor(floor) {

87
Frontend/js/n4js/alarmbaja.js
View File

@ -12,6 +12,39 @@ function addzero(num) {
* @param {any} alarmClass
* @param {any} callback
*/
// function getAlarmByBaja(startDate_millisecond, endDate_millisecond, isRecover, isAck, alarmClass, callback) {
// let _sourceTmp;
// var _result = "";
// var _ss = "";
// var _bfName = "";
// var _sourceName = "";
// var _index = 0;
// var _recoverState = isRecover ? "!= null" : "= null";
// var _ackState = isAck ? "= 1" : "!= 1";
// require(['baja!'], function (baja) {
// baja.Ord.make("local:|foxs:|alarm:|bql:select timestamp, ackState, alarmClass, alarmClassDisplayName, alarmValue, alarmData, alarmData.sourceName, uuid, alarmData.msgText, alarmData.numericValue, alarmData.presentValue, alarmData.status, alarmData.toState, normalTime from openAlarms where alarmClass = '" + alarmClass + "' and timestamp.millis > " + startDate_millisecond + " and timestamp.millis < " + endDate_millisecond + " and normalTime " + _recoverState + " order by timestamp asc").get()
// .then(function (table) {
// return table.cursor({
// each: function (record) {
// _sourceTmp = (record.get('alarmData').get('sourceName')).toString().split('_');
// _bfName = _sourceTmp[1] + "-" + _sourceTmp[4];
// _sourceName = _sourceTmp[7] + "-" + _sourceTmp[8];
// _ss += ', "' + _index + '": {"buildingFloorName_zh":"' + _bfName + '", "uuid":"' + record.get('uuid') + '", "timestamp":"' + record.get('timestamp') + '", "alarmClass":"' + record.get('alarmClass') + '", "sourceName_zh":"' + _sourceName + '", "msgText":"' + record.get('alarmData').get('msgText') + '", "ackState":"' + record.get('ackState') + '", "normalTime":"' + record.get('normalTime') + '"}';
// _index++;
// },
// after: function () {
// _result += '{' + '"count": ' + _index;
// _result += _ss;
// _result += '}';
// if (typeof callback === 'function') {
// callback(_result);
// }
// }
// });
// });
// });
// }
function getAlarmByBaja(startDate_millisecond, endDate_millisecond, isRecover, isAck, alarmClass, callback) {
let _sourceTmp;
var _result = "";
@ -57,6 +90,35 @@ function getAlarmByBaja(startDate_millisecond, endDate_millisecond, isRecover, i
* @param {any} devicePath
* @param {any} callback
*/
// function getOneDeviceAlarmTop10ByBaja(devicePath, callback) {
// var _result = "";
// var _ss = "";
// var _index = 0;
// //{ "count":2,"data": [{ "time": "2022/11/14 15:00:00", "errId": "0001", "ackCheck": "未確認", "errReason": "燈泡故障" }, { "time": "2022/11/14 15:00:00", "errId": "0002", "ackCheck": "未確認", "errReason": "燈泡故障" }]}
// require(['baja!'], function (baja) {
// baja.Ord.make("local:|foxs:|alarm:|bql:select top 10 timestamp, ackState, alarmData, alarmData.sourceName, sourceState, uuid, alarmData.msgText, normalTime where alarmData.sourceName like '%" + devicePath + "%' order by timestamp desc").get()
// .then(function (table) {
// return table.cursor({
// each: function (record) {
// if (_index == 0)
// _ss += '{"uuid":"' + record.get('uuid') + '", "msgText":"' + record.get('alarmData').get('msgText') + '", "ackState":"' + record.get('ackState') + '", "timestamp":"' + record.get('timestamp') + '"}';
// else
// _ss += ',{"uuid":"' + record.get('uuid') + '", "msgText":"' + record.get('alarmData').get('msgText') + '", "ackState":"' + record.get('ackState') + '", "timestamp":"' + record.get('timestamp') + '"}';
// _index++;
// },
// after: function () {
// _result += '{' + '"count": ' + _index +', "data":[';
// _result += _ss+']';
// _result += '}';
// if (typeof callback === 'function') {
// callback(_result);
// }
// }
// });
// });
// });
// }
function getOneDeviceAlarmTop10ByBaja(devicePath, callback) {
var _result = "";
var _ss = "";
@ -109,6 +171,31 @@ function getOneDeviceAlarmTop10ByBaja(devicePath, callback) {
* @param {any} systemPath
* @param {any} callback
*/
// function getOneSystemAlarmStateByBaja(systemPath, callback) {
// var _result = "";
// var _ss = "";
// var _index = 0;
// require(['baja!'], function (baja) {
// baja.Ord.make("local:|foxs:|alarm:|bql:select alarmData, alarmData.sourceName, sourceState, uuid where alarmData.sourceName like '%" + systemPath + "%' order by timestamp desc").get()
// .then(function (table) {
// return table.cursor({
// each: function (record) {
// _ss += ', "' + _index + '": {"uuid":"' + record.get('uuid') + '", "sourceName":"' + record.get('alarmData').get('sourceName') + '", "sourceState":"' + record.get('sourceState') + '"}';
// _index++;
// },
// after: function () {
// _result += '{' + '"count": ' + _index;
// _result += _ss;
// _result += '}';
// if (typeof callback === 'function') {
// callback(_result);
// }
// }
// });
// });
// });
// }
function getOneSystemAlarmStateByBaja(systemPath, callback) {
var _result = "";
var _ss = "";

26
Frontend/js/n4js/historybaja.js
View File

@ -8,6 +8,32 @@
* @param {any} company
* @param {any} callback
*/
// function getHistoryDataByBaja(devicePath, startDate_millisecond, endDate_millisecond, deviceName, company, callback) {
// var _result = "";
// var _ss = "";
// var _index = 0;
// require(['baja!'], function (baja) {
// baja.Ord.make('local:|foxs:|history:/' + company + '/' + devicePath + '|bql:select * from control:ControlPoint where timestamp.millis > ' + startDate_millisecond + ' and timestamp.millis < ' + endDate_millisecond).get()
// .then(function (table) {
// return table.cursor({
// each: function (record) {
// _ss += ', "' + _index + '": {"deviceName":"' + deviceName + '", "value":' + record.get('value') + ', "timestamp":"' + record.get('timestamp') + '"}';
// _index++;
// },
// after: function () {
// _result += '{' + '"count": ' + _index;
// _result += _ss;
// _result += '}';
// if (typeof callback === 'function') {
// callback(_result);
// }
// }
// });
// });
// });
// }
function getHistoryDataByBaja(devicePath, startDate_millisecond, endDate_millisecond, deviceName, company, callback) {
var _result = "";
var _ss = "";

67
Frontend/js/site.js
View File

@ -114,11 +114,11 @@ class ElevatorHandler {
this.eleId = "";
this.eleWra = $("<div></div>");
this.speed = 0.3;
this.monStatus = 0; // 0=no 1=up 2=down
this.movStatus = {}; // {id:elevator01,value:0} 0=no 1=up 2=down
this.floorHeight = typeof option.fHeight == "undefined" ? 50 : 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" ? [{ id: "elevator01" }] : option.elevators;
this.elevators = typeof option.elevators == "undefined" ? [{}] : option.elevators; // {id:elevator01}
this.curElevFloor = typeof option.curElevFloor == "undefined" ? {} : option.curElevFloor;
this.setTimeout = null;
this.init();
@ -130,7 +130,6 @@ class ElevatorHandler {
if (Object.keys(this.curElevFloor).length != 0) {
$.each(Object.keys(this.curElevFloor), (idx, elevKey) => {
this.setElevFloor(elevKey,this.curElevFloor[elevKey]);
})
}
}
@ -161,11 +160,17 @@ class ElevatorHandler {
let th = creEle("th");
th.css({ "width": `${_w}px`, "height": `${_h}px` });
if (e != 1 && e != _elevators.length + 2) {
let elevId = _elevators[e - 2].id;
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`, "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`, "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`, "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);
}
@ -221,25 +226,46 @@ class ElevatorHandler {
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]]
clearTimeout(this.setTimeout);
console.log(this.movStatus)
if (this.movStatus != 0) {
$(`#elevator-item-${elevId}`).css("transition", `transform ${1 / this.speed}s cubic-bezier(0, 0, 0.62, 1) 0s`);
}
if (gapFloor < 0) {
this.movStatus = 2;
} else if (gapFloor > 0) {
this.movStatus = 1;
} else {
this.movStatus = 0;
console.log("123",this.movStatus)
if (this.movStatus[elevId] != 0) {
$(cssEle).css("transition", `transform ${1 / this.speed * Math.abs(gapFloor)}s cubic-bezier(0, 0, 0.62, 1) 0s`);
}
//if (gapFloor < 0) {
// this.movStatus[elevId] = 2;
//} else if (gapFloor > 0) {
// this.movStatus[elevId] = 1;
//} else {
// this.movStatus[elevId] = 0;
//}
this.setTimeout = setTimeout(() => {
this.movStatus = 0;
$(`#elevator-item-${elevId}`).css("transition", `transform ${1 / this.speed}s cubic-bezier(0.43, 0.05, 0.62, 1) 0s`)
}, (1 / this.speed) * 1000)
$(`#elevator-item-${elevId}`).css("transform", `translateY(${this.floorHeight * (this.floors.length - tarSort)}px)`);
/*this.movStatus[elevId] = 0;*/
$(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}`).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}`).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;
@ -248,6 +274,11 @@ class ElevatorHandler {
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]);
})
}
}
}

5
Frontend/js/yourteam/plugins/yt-tab/yt-tab.js
View File

@ -19,12 +19,13 @@ $(function () {
* 初始全頁面 yt tab
* */
function initTabsByEle() {
_ytTabInited = [];
$("[data-tabname][data-target]:not([data-tabrole=child])").each(function (index, value) {
let tabName = $(value).data("tabname");
if (_ytTabInited.indexOf(tabName) == -1) {
var ytTab = new YT.Tab({ tabName: tabName })
_ytTabInited.push(tabName);
}
})
}

2
Frontend/js/yourteam/yourteam.jquery.datatables.js
View File

@ -58,7 +58,7 @@ function fnInitJqDataTablesNoData(tag, dataSet = null, columns = null, columnDef
"columns": columns,
"aoColumnDefs": columnDefs,
"stateSave": true,
"pagingType": "simple",
"pagingType": "full_numbers",
"destroy": false,
"initComplete": initComplete,
"drawCallback": fnDrawCallBack,