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

[Frontend]系統監控 tooltip show 取得原element 功能補上 | 部分功能註解補上

Browse Source
This commit is contained in:
dev01 2022-11-16 17:23:00 +08:00
parent f359469e1f
commit d9d2f27ba0
8 changed files with 3255 additions and 217 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
Frontend/_sysMonAll.html
View File

@ -72,7 +72,7 @@
strHtml += `<button id="floItemBtn${floObj.full_name}" type="button" class="btn btn-primary waves-effect waves-themed mr-5">${floObj.full_name}</button>` strHtml += `<button id="floItemBtn${floObj.full_name}" type="button" class="btn btn-primary waves-effect waves-themed mr-5">${floObj.full_name}</button>`
$.each(floObj.device_list, (index2, devObj) => { $.each(floObj.device_list, (index2, devObj) => {
strHtml += `<div name="devItem" data-id="${devObj.device_guid}" class="mr-5 cur-poi"> strHtml += `<div name="devItem" data-id="${devObj.device_guid}" data-number="${devObj.device_number}" class="mr-5 cur-poi">
<span class="status status-success d-inline-block"> <span class="status status-success d-inline-block">
<img src="${baseImgUrl + varPathImg + devObj.device_master_icon}" class="profile-image rounded-circle" onerror="defDev(this)" alt="..."> <img src="${baseImgUrl + varPathImg + devObj.device_master_icon}" class="profile-image rounded-circle" onerror="defDev(this)" alt="...">
</span> ${devObj.full_name} </span> ${devObj.full_name}
@ -235,7 +235,8 @@
</div> </div>
</div>`, </div>`,
group:"device", group:"device",
onShow: function () { onShow: function (tooltipEle, oriEle) {
console.log($(oriEle).data("number"))
var tab = new YT.Tab({ tabName: "cardTab" }) var tab = new YT.Tab({ tabName: "cardTab" })
loadOpeRecTable(); loadOpeRecTable();
} }

384
Frontend/_sysMonFloor.html
View File

@ -29,215 +29,223 @@
function chartHandler() { function chartHandler() {
floChart.clear(); floChart.clear();
$.get(`${baseImgUrl}/upload/floor_map/c0de2199-e62b-4f82-b7f7-abacd4e1cd17.svg`, function (svg) { /*let url = `${baseApiUrl}/upload/graph_manage/de08e7ee-9839-4403-90e5-754dec4e389b.jpg`*/
let url = `${baseImgUrl}/upload/floor_map/2e5be49c-f8e8-4977-b5b6-db4d95ff9691.svg`
if (svg == undefined || svg == null) { download(url)
return;
}
echarts.registerMap('floor_svg', { svg: svg }); //ytAjax = new YourTeam.Ajax(url, null, function (res) {
// if (svg == undefined || svg == null) {
// return;
// }
option = { // echarts.registerMap('floor_svg', { svg: svg });
// animationDurationUpdate: 1500,
tooltip: {
formatter: function (params) {
if (params.data.device_node_guid != undefined && params.data.device_node_guid != null && params.data.device_node_guid != "") {
return `名稱：${params.data.device_node_full_name}<br>
Guid：${params.data.device_node_guid}`
}
else {
return `名稱：${params.data.device_full_name}<br>
Guid：${params.data.device_guid}`
}
}
},
toolbox: { //工具欄
show: false
},
geo: {
map: 'floor_svg',
roam: true,
scaleLimit: { //限制放大縮小倍數
max: 32,
min: 2.5
},
layoutSize: '100%',
layoutCenter: ['50%', '50%'],
zoom: 2.5,
silent: true
},
series: [
{ //不管有無被選擇(圓點)
type: 'scatter',
coordinateSystem: 'geo',
geoIndex: 0,
symbol: 'circle',
symbolSize: 10,
symbolOffset: [10, 10],
label: {
show: false
},
data: currentData,
z: 2
},
{ //未選擇的設備(icon)
type: 'scatter',
coordinateSystem: 'geo',
geoIndex: 0,
symbolSize: 30,
label: {
formatter: '{b}',
position: 'bottom',
show: true,
backgroundColor: 'orange'
},
emphasis: {
label: {
show: true,
fontSize: '20',
fontWeight: 'bold',
color: 'yellow'
}
},
selectedMode: 'single',
data: null,
z: 1
},
{ //被選擇的設備(icon)
type: 'effectScatter',
coordinateSystem: 'geo',
geoIndex: 0,
showEffectOn: 'render',
symbolSize: 30,
label: {
formatter: '{b}',
position: 'bottom',
show: true,
backgroundColor: 'orange'
},
emphasis: {
label: {
show: true,
fontSize: '20',
fontWeight: 'bold',
color: 'yellow'
}
},
selectedMode: 'single',
data: null,
z: 1
},
{ //編輯模式底下的設備(圓點，只會有一個)
type: 'scatter',
coordinateSystem: 'geo',
geoIndex: 0,
symbol: 'circle',
symbolSize: 10,
symbolOffset: [10, 10],
label: {
show: false
},
data: currentData,
z: 2
},
{ //編輯模式底下的設備(icon，只會有一個)
type: 'scatter',
coordinateSystem: 'geo',
geoIndex: 0,
symbolSize: 30,
label: {
formatter: '{b}',
position: 'bottom',
show: true,
backgroundColor: 'orange'
},
emphasis: {
label: {
show: true,
fontSize: '20',
fontWeight: 'bold',
color: 'yellow'
}
},
data: null,
z: 1
},
],
};
floChart.setOption(option); // option = {
// // animationDurationUpdate: 1500,
// tooltip: {
// formatter: function (params) {
// if (params.data.device_node_guid != undefined && params.data.device_node_guid != null && params.data.device_node_guid != "") {
// return `名稱：${params.data.device_node_full_name}<br>
// Guid：${params.data.device_node_guid}`
// }
// else {
// return `名稱：${params.data.device_full_name}<br>
// Guid：${params.data.device_guid}`
// }
// }
// },
// toolbox: { //工具欄
// show: false
// },
// geo: {
// map: 'floor_svg',
// roam: true,
// scaleLimit: { //限制放大縮小倍數
// max: 32,
// min: 2.5
// },
// layoutSize: '100%',
// layoutCenter: ['50%', '50%'],
// zoom: 2.5,
// silent: true
// },
// series: [
// { //不管有無被選擇(圓點)
// type: 'scatter',
// coordinateSystem: 'geo',
// geoIndex: 0,
// symbol: 'circle',
// symbolSize: 10,
// symbolOffset: [10, 10],
// label: {
// show: false
// },
// data: currentData,
// z: 2
// },
// { //未選擇的設備(icon)
// type: 'scatter',
// coordinateSystem: 'geo',
// geoIndex: 0,
// symbolSize: 30,
// label: {
// formatter: '{b}',
// position: 'bottom',
// show: true,
// backgroundColor: 'orange'
// },
// emphasis: {
// label: {
// show: true,
// fontSize: '20',
// fontWeight: 'bold',
// color: 'yellow'
// }
// },
// selectedMode: 'single',
// data: null,
// z: 1
// },
// { //被選擇的設備(icon)
// type: 'effectScatter',
// coordinateSystem: 'geo',
// geoIndex: 0,
// showEffectOn: 'render',
// symbolSize: 30,
// label: {
// formatter: '{b}',
// position: 'bottom',
// show: true,
// backgroundColor: 'orange'
// },
// emphasis: {
// label: {
// show: true,
// fontSize: '20',
// fontWeight: 'bold',
// color: 'yellow'
// }
// },
// selectedMode: 'single',
// data: null,
// z: 1
// },
// { //編輯模式底下的設備(圓點，只會有一個)
// type: 'scatter',
// coordinateSystem: 'geo',
// geoIndex: 0,
// symbol: 'circle',
// symbolSize: 10,
// symbolOffset: [10, 10],
// label: {
// show: false
// },
// data: currentData,
// z: 2
// },
// { //編輯模式底下的設備(icon，只會有一個)
// type: 'scatter',
// coordinateSystem: 'geo',
// geoIndex: 0,
// symbolSize: 30,
// label: {
// formatter: '{b}',
// position: 'bottom',
// show: true,
// backgroundColor: 'orange'
// },
// emphasis: {
// label: {
// show: true,
// fontSize: '20',
// fontWeight: 'bold',
// color: 'yellow'
// }
// },
// data: null,
// z: 1
// },
// ],
// };
floChart.getZr().on('click', function (params) { // floChart.setOption(option);
console.log("click", params);
var pixelPoint = [params.offsetX, params.offsetY];
var dataPoint = floChart.convertFromPixel({ geoIndex: 0 }, pixelPoint);
console.log(dataPoint);
if (floor_map_mode == "edit") { // floChart.getZr().on('click', function (params) {
// console.log("click", params);
// var pixelPoint = [params.offsetX, params.offsetY];
// var dataPoint = floChart.convertFromPixel({ geoIndex: 0 }, pixelPoint);
// console.log(dataPoint);
temp_device_on_floor_map = [{ // if (floor_map_mode == "edit") {
device_guid: selected_temp_device.device_guid,
device_full_name: selected_temp_device.device_full_name, // temp_device_on_floor_map = [{
device_node_guid: selected_temp_device.device_node_guid ? selected_temp_device.device_node_guid : null, // device_guid: selected_temp_device.device_guid,
device_node_full_name: selected_temp_device.device_node_full_name ? selected_temp_device.device_node_full_name : null, // device_full_name: selected_temp_device.device_full_name,
status: selected_temp_device.status, // device_node_guid: selected_temp_device.device_node_guid ? selected_temp_device.device_node_guid : null,
value: dataPoint // device_node_full_name: selected_temp_device.device_node_full_name ? selected_temp_device.device_node_full_name : null,
}]; // status: selected_temp_device.status,
// value: dataPoint
// }];
} // }
// currentData.push([dataPoint[0], dataPoint[1], 1]); // // currentData.push([dataPoint[0], dataPoint[1], 1]);
// floChart.setOption(option); // // floChart.setOption(option);
}); // });
floChart.on('selectchanged', function (params) { // floChart.on('selectchanged', function (params) {
console.log("selectchanged", params); // console.log("selectchanged", params);
// currentData.push([dataPoint[0], dataPoint[1], 1]); // // currentData.push([dataPoint[0], dataPoint[1], 1]);
// floChart.setOption(option); // // floChart.setOption(option);
currentData = $.map(currentData, function (item) { // currentData = $.map(currentData, function (item) {
item.selected = false; // item.selected = false;
return item; // return item;
}); // });
if (params.selected.length > 0) { // if (params.selected.length > 0) {
currentData[params.selected[0].seriesIndex - 1].selected = true; // currentData[params.selected[0].seriesIndex - 1].selected = true;
} // }
}); // });
// floChart.getZr().on('mousewheel', function (params) { // // floChart.getZr().on('mousewheel', function (params) {
// console.log(params) // // console.log(params)
// }) // // })
floChart.on('georoam', function (params) { // floChart.on('georoam', function (params) {
var zoom = floChart.getOption().geo[0].zoom; // var zoom = floChart.getOption().geo[0].zoom;
if (zoom <= 2.5) { // if (zoom <= 2.5) {
ResetFloorMap(); // ResetFloorMap();
floChart.setOption({ // floChart.setOption({
geo: { // geo: {
roam: 'scale' // roam: 'scale'
}, // },
}); // });
} else { // } else {
floChart.setOption({ // floChart.setOption({
geo: { // geo: {
roam: true // roam: true
}, // },
}); // });
} // }
}); // });
}) //}).send();
.fail(function () { //$.get(`${baseImgUrl}/device/GetFloorSvg/c0de2199-e62b-4f82-b7f7-abacd4e1cd17.svg`, function (svg) {
toast_warning("查無該樓層地圖")
floChart.clear();
}); //})
// .fail(function () {
// toast_warning("查無該樓層地圖")
// floChart.clear();
// });
} }
</script> </script>

26
Frontend/js/site.js
View File

@ -5,13 +5,18 @@
}) })
/**
* fn 定義 | 手動初始化 Bootstrap dropdown select
*/
$.fn.droSetItem = function () { $.fn.droSetItem = function () {
setDropdownItem(this); setDropdownItem(this);
return this; return this;
} }
/**
* 設置 bootstrap dropdown 為下拉選單
* @param {any} menuEle .dropdown-menu element
*/
function setDropdownItem(menuEle) { function setDropdownItem(menuEle) {
if ($(menuEle).find(".dropdown-item.active").length == 0) { if ($(menuEle).find(".dropdown-item.active").length == 0) {
$(menuEle).find(".dropdown-item").first().addClass("active"); $(menuEle).find(".dropdown-item").first().addClass("active");
@ -21,14 +26,19 @@ function setDropdownItem(menuEle) {
let actEleId = $(menuEle).prop("id"); let actEleId = $(menuEle).prop("id");
$(`.dropdown-toggle[data-target=${actEleId}]`).text(actText); $(`.dropdown-toggle[data-target=${actEleId}]`).text(actText);
$(menuEle).trigger("active:change", $(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"));
})
} }
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"); * @param {any} obj
setDropdownItem($(this).parent(".dropdown-menu.dropdown-select-menu")); */
})
function defDev(obj) { function defDev(obj) {
let defSrc = 'img/defdev.png'; let defSrc = 'img/defdev.png';
obj.src = defSrc; obj.src = defSrc;

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

@ -10,11 +10,14 @@
* */ * */
var YT = YT || {}; var YT = YT || {};
var _ytTabInited = [] var _ytTabInited = [];
$(function () {
$(function () {
}) })
/**
* 初始全頁面 yt tab
* */
function initTabsByEle() { function initTabsByEle() {
$("[data-tabname][data-target]:not([data-tabrole=child])").each(function (index, value) { $("[data-tabname][data-target]:not([data-tabrole=child])").each(function (index, value) {
let tabName = $(value).data("tabname"); let tabName = $(value).data("tabname");
@ -38,25 +41,24 @@ class YourTeamTab {
} }
this.event(); this.event();
$(`[data-tabname=${this.tabName}][data-tabrole=child]`).css("display", "none"); $(`[data-tabname=${this.tabName}][data-tabrole=child]`).css("display", "none");
$(`[data-tabname=${this.tabName}][data-target]`).first().trigger("click","fromInit"); $(`[data-tabname=${this.tabName}][data-target]`).first().trigger("click");
_ytTabInited.push(this.tabName); _ytTabInited.push(this.tabName);
} }
event = function () { event = function () {
let clsObj = this; let clsObj = this;
// custom tab
// example : // Tab Item 按鈕 click
// <button id="test" data-target="#okDiv" data-tabname="tab1"></button> $(`[data-tabname=${this.tabName}][data-target]`).off("click").on("click", function (e) {
// <div id="okDiv" data-tabrole="child" data-tabname="tab1"></div>
$(`[data-tabname=${this.tabName}][data-target]`).off("click").on("click", function (e, arg) {
console.log(e)
let target = $(this).data("target"); let target = $(this).data("target");
let obj = this; let obj = this;
$(`[data-tabname=${clsObj.tabName}][data-target]:not([data-tabrole=child])`).removeClass("active") $(`[data-tabname=${clsObj.tabName}][data-target]:not([data-tabrole=child])`).removeClass("active");
$(obj).addClass("active") $(obj).addClass("active");
$(obj).trigger("yt:tab:change") // 觸發 yt:tab:change事件
$(obj).trigger("yt:tab:change");
let tabName = $(target).data("tabname"); let tabName = $(target).data("tabname");
if (tabName) { if (tabName) {
// 找出該觸發對象 block
if ($(target).data("tabrole") == "child") { if ($(target).data("tabrole") == "child") {
$(obj).trigger("yt:tab:show"); $(obj).trigger("yt:tab:show");
$(`[data-tabname='${tabName}'][data-tabrole='child']`).css("opacity", 0).hide(); $(`[data-tabname='${tabName}'][data-tabrole='child']`).css("opacity", 0).hide();

2
Frontend/js/yourteam/plugins/yt-tooltip/yt-tooltip.js
View File

@ -71,7 +71,7 @@ $.fn.YTTooltip = function (option) {
obj.tooltipDiv = clone; obj.tooltipDiv = clone;
//顯示 tooltip //顯示 tooltip
$(clone).css({ "display": display, "position": "absolute" }); $(clone).css({ "display": display, "position": "absolute" });
obj.onShow ? obj.onShow(clone,obj) : ""; obj.onShow ? obj.onShow(clone,obj.ele,obj) : "";
//tooltip 高寬 //tooltip 高寬
let toolWidth = $(clone)[0].offsetWidth; let toolWidth = $(clone)[0].offsetWidth;
let toolHeight = $(clone)[0].offsetHeight; let toolHeight = $(clone)[0].offsetHeight;

2
FrontendWebApi/ApiControllers/DeviceManageController.cs
View File

@ -182,7 +182,7 @@ namespace FrontendWebApi.ApiControllers
foreach (var f in fl) foreach (var f in fl)
{ {
List<DeviceLists> dl = new List<DeviceLists>(); List<DeviceLists> dl = new List<DeviceLists>();
sqlString = $@"select d.device_guid, d.full_name, d.status, d.device_coordinate, dm.device_master_icon sqlString = $@"select d.device_guid, d.full_name, d.status, d.device_coordinate, dm.device_master_icon,d.device_number
from device d from device d
left join device_master dm on d.device_building_tag = dm.device_building_tag and d.device_name_tag = dm.device_name_tag left join device_master dm on d.device_building_tag = dm.device_building_tag and d.device_name_tag = dm.device_name_tag
where d.deleted = 0 and d.device_system_tag = @main_system_tag and d.device_building_tag = @building_tag and d.device_floor_tag = ifnull(@floor_tag, d.device_floor_tag)"; where d.deleted = 0 and d.device_system_tag = @main_system_tag and d.device_building_tag = @building_tag and d.device_floor_tag = ifnull(@floor_tag, d.device_floor_tag)";

1
FrontendWebApi/Models/Device.cs
View File

@ -30,6 +30,7 @@ namespace FrontendWebApi.Models
public class DeviceLists public class DeviceLists
{ {
public string device_guid { get; set; } public string device_guid { get; set; }
public string device_number { get; set; }
public string full_name { get; set; } public string full_name { get; set; }
public string device_coordinate { get; set; } public string device_coordinate { get; set; }
public string device_coordinate_3d { get; set; } public string device_coordinate_3d { get; set; }

3016
FrontendWebApi/wwwroot/upload/26121072-5f50-4638-bee9-0ff8c9319350.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 2.0 MiB