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

[前台] 系統監控 開關燈 | 告警 縮短異常編號 | 能源管理 文字修正 | 歷史資料 邊提文字位置修正

Browse Source
This commit is contained in:
Celeste 2023-02-18 21:00:48 +08:00
parent 9a27834be0
commit 55bff6fca3
8 changed files with 2100 additions and 3010 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
Frontend/_alert.html
View File

@ -228,7 +228,7 @@
$('input[type=checkbox][data-type=sub]').on('click', function () {
if (!pageAct.selAllSysSub) {
console.log(this);
// console.log(this);
pageAct.selAllSysSub = true;
$.each($('input[type=checkbox][data-type=sub]:checked'), function (i, v) {
@ -646,6 +646,7 @@
let tag = "#alertTable";
$.each(data, function (i, v) {
// console.log(v.uuid.$val, v.uuid)
v.formId = AlertList(v.uuid.$val || v.uuid);
});
@ -669,6 +670,9 @@
{
"title": "異常ID",
"data": "uuid",
render: (data) => {
return data.split("-")[0]
}
},
{
"title": "異常類別",
@ -788,7 +792,7 @@
function selOpeFir() {
let url = baseApiUrl + "/operation/OpeFirSel";
objSendData.Data = { sub_system_tag: $('input[data-type=sub]').map(function (i, v) { return $(v).prop('id'); }).toArray() };
console.log(objSendData.Data)
// console.log(objSendData.Data)
ytAjax = new YourTeam.Ajax(url, objSendData, function (res) {
if (!res || res.code != "0000" || !res.data) {

75
Frontend/_energyManagement.html
View File

@ -1,4 +1,5 @@
<main id="js-page-content" role="main" class="page-content">
<h1 class="p-2 mb-0">運維管理</h1>
<div class="row">
<div class="col-12">
<div class="btn-group mb-3">
@ -23,7 +24,7 @@
<div class="panel-container show">
<div class="row">
<div class="col-sm-12 col-lg-6 d-flex flex-column">
<h4 class="p-3">今日耗電量 kWh</h4>
<h4 class="p-3 todayElecNoDataTitle text-center">今日耗電量 (kWh)</h4>
<div class="panel-content poisition-relative" style="min-height: 346.84px;">
<div id="todayElecNoData" class="row justify-content-center align-items-center h-100" style="display:none;">
<h4>無資料</h4>
@ -34,7 +35,7 @@
</div>
</div>
<div class="col-sm-12 col-lg-6 d-flex flex-column">
<h4 class="py-3">用電比較</h4>
<h4 class="py-3 elecCompNoDataTitle text-center">用電比較</h4>
<div id="elecCompNoData" class="row justify-content-center align-items-center h-100" style="display:none;">
<h4>無資料</h4>
</div>
@ -53,12 +54,12 @@
<div class="card">
<div class="card-body">
<div class="d-flex justify-content-between align-items-center mb-3">
<h4 class="mb-0"><i class="fal fa-server"></i> 自動需量管理</h4>
<h4 class="mb-0"><i class="fal fa-server mr-1"></i>自動需量管理</h4>
<button id="ediAutDemBtn" class="btn btn-success"><i class="fal fa-pencil"></i> 編輯</button>
</div>
<div class="row align-items-center justify-content-between d-flex flex-column">
<div class="col d-flex">
<!-- <div class="col d-flex">
<p class="card-text color-white d-flex justify-content-between mr-3">
<span>契約容量</span>
<span><span data-id="contract_capacity"></span> kW</span>
@ -71,7 +72,7 @@
<span>復歸值</span>
<span><span data-id="resetting_value"></span> kW</span>
</p>
</div>
</div> -->
<div class="col" style=" min-height:250px;">
<canvas class="chart" id="autDemChart"></canvas>
</div>
@ -273,9 +274,11 @@
} else {
let strHtml = "";
$.each(res.data, (index, mainSysObj) => {
if ((type == 0 || (type == 3 && mainSysObj.mainSubTag == "ELEV_EL"))
if (type == 0)
// && filNotShowSysSub.indexOf(subSysObj.sub_system_tag) == -1
) {
{
document.querySelector(".elecCompNoDataTitle").textContent = "用電比較";
document.querySelector(".todayElecNoDataTitle").textContent = "今日耗電量 (kWh)";
const full_name = mainSysObj.system_remark.split("-")[1];
strHtml += `<div class="col-sm-12 col-xl-4 mb-2">
<div class="card elecCard cur-poi" data-id="${mainSysObj.mainSubTag}" data-name="${mainSysObj.mainSubTag}">
@ -291,6 +294,27 @@
</p>
</div>
</div>
</div>`;
} else if (type == 3 && mainSysObj.mainSubTag == "ELEV_EL") {
document.querySelector(".elecCompNoDataTitle").textContent = "供電比較";
document.querySelector(".todayElecNoDataTitle").textContent = "今日供電量 (kWh)";
const full_name = mainSysObj.system_remark.split("-")[1];
strHtml += `<div class="col-sm-12 col-xl-4 mb-2">
<div class="card elecCard cur-poi" data-id="${mainSysObj.mainSubTag}" data-name="${mainSysObj.mainSubTag}">
<div class="card-body">
<h4 class="card-title color-white">${full_name}供電</h4>
<p class="card-text color-white pl-5 pr-3 d-flex justify-content-between">
<span>${elecCardConText[type]?.text1}</span>
<span id="insPow${mainSysObj.mainSubTag}"></span>
</p>
<p class="card-text color-white pl-5 pr-3 d-flex justify-content-between">
<span>${elecCardConText[type]?.text2}</span>
<span id="insPowPer${mainSysObj.mainSubTag}"></span>
</p>
</div>
</div>
</div>`;
}
});
@ -298,7 +322,7 @@
strHtml += `<div class="col-sm-12 col-xl-4 mb-2">
<div class="card elecCard cur-poi">
<div class="card-body">
<h4 class="card-title color-white">太陽能設備用電</h4>
<h4 class="card-title color-white">太陽能設備供電</h4>
<p class="card-text color-white pl-5 pr-3 d-flex justify-content-between">
<span>${elecCardConText[type]?.text1}</span>
<span id="insPow">---</span>
@ -480,10 +504,10 @@
// 空調系統 今日與30日內平均用電比較
getElectricMeterDayDataByBaja(tarDevNum + "_KWH", n4Sup, prevThirtyDay, tomorrow, (data) => {
let curDay = (new Date()).getDay() == 0 ? 7 : (new Date()).getDay();
// let curDay = (new Date()).getDay() == 0 ? 7 : (new Date()).getDay();
let curDay = 7;
let eveWeek = [];
let curWeekData = data.data.filter(x => strToDate(displayDate(new Date(), "date"), null, 0 - (curDay - 1)) <= strToDate(x.timestamp.$cEncStr));
for (let i = 1; i <= curDay; i++) {
let tarDayData = data.data.filter(x => strToDate(x.timestamp.$cEncStr, "day") == i);
let tarDayElecs = tarDayData.map(x => x.sum);
@ -619,10 +643,11 @@
// 圖表 - 今日與30日內平均用電量比較 (長條圖)
function chartEveWeeksElec(curWeekData, avgData) {
const labels = curWeekData.map(x => dayToChiDay(strToDate(x.timestamp.$cEncStr, "day")))
elecCompChart?.destroy()
let elecCompChartCanvas = $('#elecCompChart').get(0).getContext('2d');
let elecCompChartData = {
labels: curWeekData.map(x => dayToChiDay(strToDate(x.timestamp.$cEncStr, "day"))),
labels,
datasets: [
{
id: "today",
@ -662,13 +687,13 @@
offset: true,
grid: { color: color.fusion._500 },
ticks: {
callback: function (value, index, ticks) {
return value
}
// callback: function (value, index, ticks) {
// console.log("@@@@圖表的",value)
// return value
// }
},
},
y: {
ticks: {
min: 0,
beginAtZero: true
@ -691,6 +716,7 @@
// This will get the first returned node in the jQuery collection.
elecCompChart = new Chart(elecCompChartCanvas, {
type: "bar",
data: elecCompChartData,
options: elecCompChartOptions
})
@ -709,7 +735,7 @@
resCapData = [resCapVal];
let autDemChartData = {
labels: labels,
labels,
datasets: [
{
id: "conCap",
@ -779,15 +805,21 @@
display: true,
fullSize: true,
labels: {
font: {
size: 16,
lineHeight: "40px",
},
usePointStyle: true,
generateLabels: (chart) => {
if (!chart.data) return [];
return chart.data.datasets.map(
(dataset, index) => ({
datasetIndex: index,
text: dataset.label,
text: `${dataset.label} ${dataset.data[0]} KW`,
fontColor: color.fusion._100,
lineDash: dataset.borderDash ? [5, 5] : [],
lineWidth: 5,
fillStyle: dataset.backgroundColor,
strokeStyle: dataset.borderColor,
pointStyle: "line",
@ -834,7 +866,14 @@
autDemChart = new Chart(autDemChartCanvas, {
data: autDemChartData,
options: autDemChartOptions
options: autDemChartOptions,
plugins: [{
beforeInit: function (chart, args, options) {
chart.legend.afterFit = function () {
this.height = this.height + 50;
};
}
}]
})
} else {
autDemChart.data.datasets[0].data.forEach((x, i) => autDemChart.data.datasets[0].data[i] = conCapVal);

5
Frontend/_historyData.html
View File

@ -1,4 +1,6 @@
<main id="js-page-content" role="main" class="page-content">
<h1 class="p-2 mb-0">歷史資料</h1>
<div class="row">
<div class="col-sm-12 col-xl-2">
<div class="rounded border border-white">
@ -14,7 +16,6 @@
</div>
<div class="col-sm-12 col-xl-10">
<h1 class="p-2 mb-0">歷史資料瀏覽</h1>
<div class="row bg-dark p-2 mb-5">
<div class="col-auto">
<div class="btn-group">
@ -93,7 +94,6 @@
if (pageAct.dateType == 'range') {
if ($('#his_startdate').val() > $('#his_enddate input').val() && ($('#his_startdate').val() != "" && $('#his_enddate input').val() != "")) {
console.log('aaaa');
$('#his_startdate').val($('#his_startdate').data('val'));
toast_error('不可選擇大於結束時間');
}
@ -137,7 +137,6 @@
let ytd = displayDate(new Date(new Date().setDate(new Date(Date.now()).getDate() - 1)), 'date').replaceAll('/', '-');
if ($('#his_startdate').val() > $('#his_enddate input').val() && ($('#his_startdate').val() != "" && $('#his_enddate input').val() != "")) {
console.log('bbbb');
$('#his_enddate input').val($('#his_enddate input').data('val'));
toast_error('不可選擇大於結束時間');
}

2
Frontend/_operation.html
View File

@ -504,7 +504,7 @@
setDate(null, startdate, enddate);
});
$(`[onclick="setType(null)"]`).click();
$(`[onclick="setType(2)"]`).click();
initDate();
event();

17
Frontend/_sysMonAll.html
View File

@ -102,7 +102,7 @@
}
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;
@ -126,6 +126,16 @@
let cloDevPoiName = matchDevice.device_close_point_name;
let errDevPoiName = matchDevice.device_error_point_name;
if (data.point_name == "SSC") {
const lightOn = data.value.includes("true")
setLightOpenOrClose(lightOn, matchDevice.device_guid);
if (lightOn) {
setLightValues(matchDevice.device_guid, 200, 0xe1cf18);
} else {
setLightValues(matchDevice.device_guid, 0, 0xe1cf18);
}
}
if (data.point_name == "Temp") {
heatMap?.changeTemp(data.device_number_full, !isNaN(parseInt(data.value)) ? parseInt(data.value) : 0);
let devIdx = allDevList.findIndex(x => x.device_number == data.device_number_full);
@ -406,7 +416,9 @@
"area_tag": pageAct.AreaTag,
"building_tag": pageAct.buiTag,
},
selector: "[name=forgeViewer]",
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
@ -576,7 +588,7 @@
var parentEle = "";
onEvent("autodesk:click:sprite", "[name=forgeViewer]", function (e, obj) {
forgeUnFocusAll();
let position = [obj.event.target.toolController.lastClickX, obj.event.target.toolController.lastClickY];
let position = [obj.event.target.toolController.lastClickX - 100, obj.event.target.toolController.lastClickY - 100];
let devObj = obj.myData;
let name = allDevList.filter(x => x.device_guid == devObj.device_guid)[0]?.full_name;
devObj.full_name = name;
@ -589,7 +601,6 @@
})
onEvent("autodesk:complete:sprite", "[name=forgeViewer]", function (e, obj) {
$("#floDevList a[name=devItem]").each((idx, ele) => {
let devNum = $(ele).data("number");
let dbid = obj.myDataList.filter(x => x.device_number == devNum)[0]?._dbId;

11
Frontend/_sysMonFloor.html
View File

@ -459,6 +459,17 @@
currentData[devIdx]._temp = !isNaN(parseInt(data.value)) ? parseInt(data.value) : 0;
}
if (data.point_name == "SSC") {
const lightOn = data.value.includes("true")
setLightOpenOrClose(lightOn, matchDevice.device_guid);
if (lightOn) {
setLightValues(matchDevice.device_guid, 200, 0xe1cf18);
} else {
setLightValues(matchDevice.device_guid, 0, 0xffffff);
}
}
if (data.point_name == norDevPoiName && data.value == matchDevice.device_normal_point_value) {
//顯示正常燈號
$(`#${matchDevice.device_number}_status`).attr("data-light-type", "normal").data("light-type", "normal");

2553
Frontend/index.html
View File

File diff suppressed because it is too large Load Diff

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

@ -748,7 +748,7 @@ async function testNewLight(dataList) {
dataList.forEach((myData, index) => {
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(0xff0000, 200, 20, 0.6, 0.5, 10) });
lightList.push({ dbid: myData.forge_dbid, device_guid: myData.device_guid, lightObject: new THREE.SpotLight(0xe1cf18, 200, 20, 0.6, 0.5, 10) });
}
lightList[index].lightObject.position.set(position.x, position.y, position.z);
@ -795,7 +795,7 @@ async function addHotPoint(data) {
//熱點 點擊事件註冊
viewer.addEventListener(DataVizCore.MOUSE_CLICK, onSpriteClicked);// SPRITE_SELECTED
// viewer.addEventListener(DataVizCore.MOUSE_CLICK, onSpriteClickedOut);
//viewer.addEventListener(
// Autodesk.Viewing.SELECTION_CHANGED_EVENT,
// onSelectionChange
@ -820,25 +820,13 @@ async function addHotPoint(data) {
//---------------- 熱點點擊事件 --------------------
function onSpriteClicked(event) {
event.hasStopped = true;
if (pageAct.sysSubTag === "M12" && event != undefined && event != null) {
if (event.dbId >= dbIdStart) {
changeColorForHotspot(event.dbId);
changeScaleForHotspot(event.dbId, false);
let myData = [this.curDevice].filter(x => x.forge_dbid == event.dbId)[0];
moveViewToDevice(myData.forge_dbid);//移動視角至該設備
$(selector).trigger("autodesk:click:sprite", { event, myData });
} else {
$(selector).trigger("autodesk:clickOut:sprite", { event });
}
}
if (event != undefined && event != null) {
if (event.dbId >= dbIdStart) {//event.dbId > 0 && event.dbId < 19
// console.log(`Sprite clicked: ${event.dbId}`);
for (let i = dbIdStart; i <= myDataList.length + 10; i++) {
changeColorForHotspot(i);
changeScaleForHotspot(i, false);
changeScaleForHotspot(i, true);
}
let myData = myDataList.filter(x => x._dbId == event.dbId)[0];
if (lightList != undefined && lightList != null && lightList.length > 0) {
@ -848,6 +836,8 @@ async function addHotPoint(data) {
}
$(selector).trigger("autodesk:click:sprite", { event, myData });
} else {
changeColorForHotspot(event.dbId, null);
changeScaleForHotspot(event.dbId, false);
$(selector).trigger("autodesk:clickOut:sprite", { event });
}
@ -860,6 +850,21 @@ async function addHotPoint(data) {
}
}
// function onSpriteClickedOut(event){
// event.hasStopped = true;
// if (event != undefined && event != null) {
// if (event.dbId >= dbIdStart) {
// for (let i = dbIdStart; i <= myDataList.length + 10; i++) {
// changeColorForHotspot(event.dbId);
// changeScaleForHotspot(event.dbId, false);
// }
// let myData = myDataList.filter(x => x._dbId == event.dbId)[0];
// debugger
// $(selector).trigger("autodesk:clickOut:sprite", { event });
// }
// }
// }
//function onSelectionChange(event) {
// if (event != undefined && event != null) {
// const dbIds = event.dbIdArray;
@ -881,7 +886,7 @@ async function addHotPoint(data) {
// 熱點 更換顏色
async function changeColorForHotspot(dbId, type = null) {
const dataVizExtn = await viewer.loadExtension("Autodesk.DataVisualization");
// console.log(dbId, dataVizExtn.viewableData.getViewableColor(dbId, false))
console.log(dbId, dataVizExtn.viewableData.getViewableColor(dbId, false))
let spriteColorFocus = dataVizExtn.viewableData?.getViewableColor(dbId, false) || new THREE.Color(0xffffff);
if (type == "focus" && pageAct.sysSubTag !== "M12") {
spriteColorFocus = new THREE.Color(0x00ffe1);
@ -897,26 +902,6 @@ async function changeColorForHotspot(dbId, type = null) {
}
// 熱點 更換顏色---環境感知器
async function changeColorForSensorHotspot(dbId, temp) {
const dataVizExtn = await viewer.loadExtension("Autodesk.DataVisualization");
const temps = [new THREE.Color(0x0000ff), new THREE.Color(0x00ff00), new THREE.Color(0xffff00), new THREE.Color(0xff0000)]
let index = Math.floor(temp / 10);
if (index > 3) {
index = 3
}
const viewablesToUpdate = dbId;
const color = temps[index]
dataVizExtn.invalidateViewables(viewablesToUpdate, (viewable) => {
return {
color: color,
};
});
console.log(dataVizExtn)
}
// 熱點 更換大小
async function changeScaleForHotspot(dbId, type = true) {
const dataVizExtn = await viewer.loadExtension("Autodesk.DataVisualization");