435 lines
19 KiB
Plaintext
435 lines
19 KiB
Plaintext
@{
|
||
ViewData["MainNum"] = "2";
|
||
ViewData["SubNum"] = "3";
|
||
ViewData["Title"] = "Niagara資料同步";
|
||
}
|
||
|
||
<ol class="breadcrumb page-breadcrumb">
|
||
<li class="breadcrumb-item"><a href="javascript:void(0);">首頁</a></li>
|
||
<li class="breadcrumb-item">設備管理</li>
|
||
<li class="breadcrumb-item active">Niagara資料同步</li>
|
||
<li class="position-absolute pos-top pos-right d-none d-sm-block"><span class="js-get-date"></span></li>
|
||
</ol>
|
||
|
||
<div class="row">
|
||
<div class="col-xl-12">
|
||
<div id="panel-5" class="panel">
|
||
<div class="panel-container show">
|
||
<div class="panel-content">
|
||
|
||
<div class="form-row align-items-center">
|
||
<div class="col-12 mb-3">
|
||
<div class="custom-control custom-radio custom-control-inline">
|
||
<input type="radio" id="Building_B" name="Building" value="B" class="custom-control-input">
|
||
<label class="custom-control-label" for="Building_B"></label>
|
||
</div>
|
||
@*<div class="custom-control custom-radio custom-control-inline">
|
||
<input type="radio" id="Building_O" name="Building" value="O" class="custom-control-input">
|
||
<label class="custom-control-label" for="Building_O">辦公棟</label>
|
||
</div>*@
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-row align-items-center">
|
||
<button id="loadDataBtn" type="button" class="btn btn-primary" onclick="LoadData()">載入資料</button>
|
||
<button id="synchornizeDataBtn" type="button" class="btn btn-dark" onclick="SynchronizeData()">同步資料</button>
|
||
</div>
|
||
|
||
<br />
|
||
<br />
|
||
|
||
<div class="form-row align-items-center">
|
||
<p id="loadDataText"></p>
|
||
</div>
|
||
|
||
<div class="mb-5">
|
||
<div class="card p-3 w-100">
|
||
<div class="card-header d-flex align-items-center flex-wrap">
|
||
<div class="card-title">
|
||
Niagara資料
|
||
</div>
|
||
</div>
|
||
<div class="card-body row">
|
||
<div class="col-12">
|
||
<!-- datatable start -->
|
||
<div class="btn-group flex-wrap building_select"></div>
|
||
<hr />
|
||
<div class="btn-group flex-wrap systemMainType_select"></div>
|
||
<hr />
|
||
<div class="btn-group flex-wrap systemSubType_select"></div>
|
||
<hr />
|
||
<button class="btn btn-primary" id="search">搜尋</button>
|
||
<button class="btn btn-primary" id="no_filter">全選</button>
|
||
<table id="niagara_data_table" class="table table-bordered table-hover m-0 text-center">
|
||
<thead class="thead-themed">
|
||
<tr>
|
||
<th>value</th>
|
||
<th>tag_name</th>
|
||
<th>point_name</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody class="raw_data">
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
@section Scripts {
|
||
<script>
|
||
var buildingId, building;
|
||
var rawDataImportTable;
|
||
var ds;
|
||
var dataInTable;
|
||
|
||
var today = new Date();
|
||
var date = today.getFullYear() + '-' + (today.getMonth() + 1) + '-' + today.getDate();
|
||
|
||
$(function () {
|
||
ds = null;
|
||
document.getElementById("Building_B").checked = true;
|
||
|
||
projectName();
|
||
rawDataImportTable = $("#niagara_data_table").DataTable({
|
||
//paging: false,
|
||
searching: false,
|
||
destroy: true,
|
||
"columns": [
|
||
{
|
||
"data": "value"
|
||
},
|
||
{
|
||
"data": "tag_name"
|
||
},
|
||
{
|
||
"data": "point_name"
|
||
},
|
||
],
|
||
"ajax": {
|
||
"url": "/NiagaraDataSynchronize/RawDataList",
|
||
"type": "POST",
|
||
"dataSrc": function (rel) {
|
||
if (rel.code == "9999") {
|
||
toast_error(rel.msg);
|
||
document.getElementById('loadDataText').innerText = "載入資料出錯了!";
|
||
return;
|
||
}
|
||
|
||
var data = rel.data;
|
||
ds = $.extend(true, [], data);
|
||
$.each(data, function (i, v)
|
||
{
|
||
if (v.value.includes("$3"))
|
||
{
|
||
v.value = v.value.replace("$3", "");
|
||
v.tag_name = v.tag_name.replace("$3", "");
|
||
v.point_name = v.point_name.replace("$3", "");
|
||
}
|
||
})
|
||
//console.log(ds)
|
||
if (data == null || data.length == 0) {
|
||
this.data = [];
|
||
document.getElementById('loadDataText').innerText = "";
|
||
}
|
||
else if(data.length > 0) {
|
||
var time = today.getHours() + ":" + today.getMinutes() + ":" + today.getSeconds();
|
||
var dateTime = date + ' ' + time;
|
||
document.getElementById('loadDataText').innerText = "共 " + rel.data.length + " 筆資料 \n" + dateTime;
|
||
}
|
||
dataInTable = data;
|
||
console.log("---", dataInTable);
|
||
return data;
|
||
}
|
||
}
|
||
});
|
||
});
|
||
|
||
//#region 載入Niagara資料
|
||
function LoadData() {
|
||
document.getElementById('loadDataText').innerText = "Loading...";
|
||
buildingId = document.querySelector('input[name="Building"]:checked').value;
|
||
if (buildingId == "B") {
|
||
//building = "B1";
|
||
rawDataImportTable.ajax.reload();
|
||
}
|
||
}
|
||
//#endregion
|
||
|
||
function SynchronizeData() {
|
||
document.getElementById('loadDataText').innerText = "同步中...";
|
||
if (ds.length > 0) {
|
||
//比對資料，有差異的話，再同步到device等資料表
|
||
var url_synchronize_data = "/NiagaraDataSynchronize/CompareData/";
|
||
|
||
$.each(ds, function (i, v) {
|
||
v.building = building;
|
||
})
|
||
|
||
$.ajax({
|
||
method: "POST",
|
||
url: url_synchronize_data,
|
||
data: JSON.stringify(ds),
|
||
cache: false,
|
||
async: false,
|
||
contentType: "application/json; charset=UTF-8",
|
||
dataType: 'json',
|
||
success: function (rel) {
|
||
if (rel.code != "0000") {
|
||
toast_error(rel.msg);
|
||
document.getElementById('loadDataText').innerText = "比對資料出錯了!";
|
||
return;
|
||
}
|
||
SyncDevItem();
|
||
//var time = today.getHours() + ":" + today.getMinutes() + ":" + today.getSeconds();
|
||
//var dateTime = date + ' ' + time;
|
||
//document.getElementById('loadDataText').innerText = "比對完成 \n" + dateTime;
|
||
},
|
||
});
|
||
}
|
||
else {
|
||
document.getElementById('loadDataText').innerText = "查無資料 無法比對！";
|
||
}
|
||
}
|
||
|
||
function SyncDevItem()
|
||
{
|
||
//比對資料，有差異的話，再同步到device等資料表
|
||
var url_synchronize_data = "/NiagaraDataSynchronize/RawDataDevItemList/";
|
||
var url_synchronize_data_device_item = "/NiagaraDataSynchronize/DevIteComData/";
|
||
let object = {};
|
||
object.building = building;
|
||
$.ajax({
|
||
method: "POST",
|
||
url: url_synchronize_data,
|
||
cache: false,
|
||
async: false,
|
||
contentType: "application/json; charset=UTF-8",
|
||
data: JSON.stringify(object),
|
||
dataType: 'json',
|
||
success: function (rel) {
|
||
if (rel.code != "0000") {
|
||
toast_error(rel.msg);
|
||
document.getElementById('loadDataText').innerText = "比對資料出錯了!";
|
||
return;
|
||
}
|
||
|
||
$.ajax({
|
||
method: "POST",
|
||
url: url_synchronize_data_device_item,
|
||
data: JSON.stringify(rel.data),
|
||
cache: false,
|
||
async: false,
|
||
contentType: "application/json; charset=UTF-8",
|
||
dataType: 'json',
|
||
success: function (rel) {
|
||
if (rel.code != "0000") {
|
||
toast_error(rel.msg);
|
||
document.getElementById('loadDataText').innerText = "比對資料出錯了!";
|
||
return;
|
||
}
|
||
|
||
console.log(rel);
|
||
var time = today.getHours() + ":" + today.getMinutes() + ":" + today.getSeconds();
|
||
var dateTime = date + ' ' + time;
|
||
document.getElementById('loadDataText').innerText = "比對完成 \n" + dateTime;
|
||
},
|
||
})
|
||
var time = today.getHours() + ":" + today.getMinutes() + ":" + today.getSeconds();
|
||
var dateTime = date + ' ' + time;
|
||
document.getElementById('loadDataText').innerText = "比對完成 \n" + dateTime;
|
||
},
|
||
});
|
||
}
|
||
|
||
function projectName()
|
||
{
|
||
$.post("/Variable/ProjectName", null, function (rel) {
|
||
building = "B1";
|
||
if (rel.code != "0000") {
|
||
toast_error(rel.msg);
|
||
return;
|
||
}
|
||
|
||
if (rel.data != null) {
|
||
building = rel.data.system_value.split('/')[1];
|
||
$(`label[for='Building_B']`).html(rel.data.system_key + building);
|
||
}
|
||
else
|
||
{
|
||
$(`label[for='Building_B']`).html('三菱B1');
|
||
}
|
||
}, 'json');
|
||
}
|
||
|
||
let buildingValue, systemMainId, systemMainValue, systemSubId, systemSubValue;
|
||
|
||
document.querySelector(".building_select").addEventListener("click", (e) => {
|
||
buildingValue = e.target.dataset.value;
|
||
$(".building_select .btn-info.active").removeClass('btn-info active')
|
||
$(e.target).addClass('btn-info active');
|
||
})
|
||
document.querySelector(".systemSubType_select").addEventListener("click", (e) => {
|
||
systemSubId = e.target.dataset.value;
|
||
systemSubValue = e.target.dataset.systemValue;
|
||
$(".systemSubType_select .btn-info.active").removeClass('btn-info active')
|
||
$(e.target).addClass('btn-info active');
|
||
})
|
||
|
||
$(function () {
|
||
// 產生所有棟別下拉式選單
|
||
fetch("/BuildInfo/BuildInfoList", {
|
||
method: "POST"
|
||
}).then(res => res.json()).then(({ data }) => {
|
||
const buildingElement = document.querySelector(".building_select");
|
||
|
||
console.log(data);
|
||
let str = "";
|
||
data.forEach(({ full_name, building_tag
|
||
}) => {
|
||
if (building_tag.includes("$3")) {
|
||
building_tag = building_tag.replace("$3", "");
|
||
}
|
||
str += `<button data-value=${building_tag} class='btn'>${full_name}</button>`;
|
||
})
|
||
buildingElement.innerHTML = str;
|
||
});
|
||
|
||
// 產生所有大類系統下拉式選單
|
||
const systemMainTypeElement = document.querySelector(".systemMainType_select");
|
||
let init_id = '';
|
||
fetch("/SystemCategory/SystemMainList", {
|
||
method: "POST"
|
||
}).then(res => res.json()).then(({ data }) => {
|
||
//console.log(data);
|
||
init_id = data[0].id;
|
||
//console.log(init_id);
|
||
let str = "";
|
||
data.forEach(({ id, system_key, system_value
|
||
}) => {
|
||
str += `<button data-value=${id} data-system-value=${system_value} class='btn'>${system_key}</button>`;
|
||
})
|
||
systemMainTypeElement.innerHTML = str;
|
||
FetchSystenSubList(init_id);
|
||
});
|
||
|
||
// 產生所有小類系統下拉式選單
|
||
systemMainTypeElement.addEventListener("click", (e) => {
|
||
systemMainId = e.target.dataset.value;
|
||
systemMainValue = e.target.dataset.systemValue;
|
||
$(".systemMainType_select .btn-info.active").removeClass('btn-info active')
|
||
$(e.target).addClass('btn-info active');
|
||
//console.log(value);
|
||
|
||
FetchSystenSubList(systemMainId);
|
||
})
|
||
});
|
||
|
||
function FetchSystenSubList(id) {
|
||
var formData = new FormData();
|
||
formData.append("id", parseInt(id));
|
||
|
||
fetch("/SystemCategory/SystemSubList", {
|
||
method: "POST",
|
||
body: formData
|
||
}).then(res => res.json()).then(({ data }) => {
|
||
const systemSubTypeElement = document.querySelector(".systemSubType_select");
|
||
|
||
//console.log(data);
|
||
let str = "";
|
||
data.forEach(({ id, system_key, system_value
|
||
}) => {
|
||
str += `<button data-value=${id} data-system-value=${system_value} class='btn'>${system_key}</button>`;
|
||
});
|
||
systemSubTypeElement.innerHTML = str;
|
||
})
|
||
}
|
||
|
||
// 查詢功能，查棟別跟大類
|
||
const searchButton = document.querySelector("#search");
|
||
searchButton.addEventListener("click", (e) => {
|
||
//const buildingValue = document.querySelector(".building_select").value;
|
||
//const systemMainId = document.querySelector(".systemMainType_select").value;
|
||
//const systemMainValue = document.querySelector(`option[value='${systemMainId}']`).getAttribute("data-system-value");
|
||
//const systemSubId = document.querySelector(".systemSubType_select").value;
|
||
//const systemSubValue = document.querySelector(`option[value='${systemSubId}']`).getAttribute("data-system-value");
|
||
|
||
console.log("111", buildingValue, systemMainValue);
|
||
|
||
const table_body = document.querySelector('.raw_data');
|
||
let rawdata_table_body = '';
|
||
let count = 1;
|
||
//dataInTable.forEach(({ tag_name, value, point_name
|
||
//}) => {
|
||
// console.log("111", buildingValue, systemMainValue, systemSubValue);
|
||
// console.log("222", tag_name.includes(`_${buildingValue}_`), tag_name.includes(`_${systemMainValue}_`), tag_name.includes(`_${systemSubValue}_`));
|
||
// console.log("333", tag_name, value);
|
||
// console.log("444", rawdata_table_body);
|
||
|
||
// if (tag_name.includes(`_${buildingValue}_`) && tag_name.includes(`_${systemMainValue}_`)) {
|
||
// console.log("333", tag_name, value);
|
||
// let odd_or_even = '';
|
||
// if (count % 2 == 0) {
|
||
// odd_or_even = 'odd';
|
||
// } else {
|
||
// odd_or_even = 'even';
|
||
// }
|
||
|
||
// rawdata_table_body += `<tr role="row" class="${odd_or_even}"><td class="sorting_1 dtr-control">${value}</td><td>${tag_name}</td><td>${point_name}</td></tr>`;
|
||
// }
|
||
|
||
//});
|
||
//table_body.innerHTML = rawdata_table_body;
|
||
let search_str = `_${buildingValue}_${systemMainValue}_${systemSubValue}_`;
|
||
console.log("$$$", search_str, dataInTable.filter(({ tag_name }) => tag_name.includes(search_str)))
|
||
$("#niagara_data_table").DataTable({
|
||
//paging: false,
|
||
searching: false,
|
||
destroy: true,
|
||
"columns": [
|
||
{
|
||
"data": "value"
|
||
},
|
||
{
|
||
"data": "tag_name"
|
||
},
|
||
{
|
||
"data": "point_name"
|
||
},
|
||
],
|
||
data: dataInTable.filter(({ tag_name }) => tag_name.includes(search_str))
|
||
})
|
||
})
|
||
|
||
const noFilterButton = document.querySelector("#no_filter");
|
||
noFilterButton.addEventListener("click", (e) => {
|
||
$(".building_select .btn-info.active").removeClass('btn-info active');
|
||
$(".systemMainType_select .btn-info.active").removeClass('btn-info active');
|
||
$(".systemSubType_select .btn-info.active").removeClass('btn-info active');
|
||
$("#niagara_data_table").DataTable({
|
||
//paging: false,
|
||
searching: false,
|
||
destroy: true,
|
||
"columns": [
|
||
{
|
||
"data": "value"
|
||
},
|
||
{
|
||
"data": "tag_name"
|
||
},
|
||
{
|
||
"data": "point_name"
|
||
},
|
||
],
|
||
data: dataInTable
|
||
})
|
||
})
|
||
|
||
</script>
|
||
} |