[Frontend] 系統監控 - 樓層平面圖前端程序建置 | ajax 連續發送防呆hide | a | 設備基本資料串接 | [Backend] startup 允許靜態文件 CORS

This commit is contained in:
dev01 2022-11-17 10:49:49 +08:00
parent 690d06cbf4
commit 2912dfebee
6 changed files with 325 additions and 301 deletions

View File

@ -24,6 +24,7 @@ using Microsoft.AspNetCore.Authentication.JwtBearer;
using Microsoft.IdentityModel.Tokens; using Microsoft.IdentityModel.Tokens;
using System.Text; using System.Text;
using System.IdentityModel.Tokens.Jwt; using System.IdentityModel.Tokens.Jwt;
using Microsoft.AspNetCore.Http;
namespace Backend namespace Backend
{ {
@ -159,7 +160,13 @@ namespace Backend
app.UseSession(); app.UseSession();
app.UseHttpsRedirection(); app.UseHttpsRedirection();
app.UseStaticFiles(); app.UseStaticFiles(new StaticFileOptions
{
OnPrepareResponse = ctx =>
{
ctx.Context.Response.Headers.Append("Access-Control-Allow-Origin", "*");
}
});
app.UseRouting(); app.UseRouting();
JwtSecurityTokenHandler.DefaultInboundClaimTypeMap.Clear(); JwtSecurityTokenHandler.DefaultInboundClaimTypeMap.Clear();

View File

@ -110,48 +110,47 @@
return strHtml; return strHtml;
} }
function drawInfoTabBlo() { function drawInfoTabBlo(devGuid) {
let strHtml = `<table class="table table-bordered table-striped text-center m-0"> let tabEle = $(`<table class="table table-bordered table-striped text-center m-0">`);
<tbody> let tbody = tabEle.append("<tbody>");
<tr> let columnNames = ["設備編號", "設備名稱"];
<td>設備編號</td>
<td>B01-B2-19F-CR-001</td> $.each(columnNames, (index, colName) => {
<td>3D 座標</td> let tr = $("<tr></tr>");
<td>113</td> let td = $("<td></td>");
</tr> td.text(colName);
<tr> tr.append(td);
<td>設備名稱</td> tbody.append(tr);
<td>A區迴路001</td> })
<td>forge dbid</td>
<td>101</td> let url = baseApiUrl + "/api/Device/GetBaseDevice";
</tr> let sendData = {
<tr> device_guid: devGuid,
<td>廠牌</td> };
<td>飛利浦 Philip</td> objSendData.Data = sendData;
<td>IP</td> ytAjax = new YourTeam.Ajax(url, objSendData, function (res) {
<td>192.168.1.105</td> if (!res || res.code != "0000" || !res.data) {
</tr>
<tr> } else {
<td>型號</td> tbody.find("tr").eq(0).append(creEle("td", res.data.device_number));
<td>BH065</td> tbody.find("tr").eq(1).append(creEle("td", res.data.full_name));
<td></td> }
<td></td> }, null, "POST").send();
</tr>
<tr> //let strHtml = `<table class="table table-bordered table-striped text-center m-0">
<td>原廠文件</td> // <tbody>
<td><a href="#">2022使用手冊.pdf</a></td> // <tr>
<td></td> // <td>設備編號</td>
<td></td> // <td>B01-B2-19F-CR-001</td>
</tr> // </tr>
<tr> // <tr>
<td>型號</td> // <td>設備名稱</td>
<td>BH065</td> // <td>A區迴路001</td>
<td></td>
<td></td> // </tr>
</tr> // </tbody>
</tbody> // </table>`
</table>` return tabEle.prop("outerHTML");
return strHtml;
} }
function drawErrRecTabBlo() { function drawErrRecTabBlo() {
@ -206,7 +205,10 @@
} }
function initPopover() { function initPopover() {
$("[name=devItem]").YTTooltip({ $("[name=devItem]").each((index, ele) => {
let devNum = $(ele).data("number"); //設備編號
let devGuid = $(ele).data("id"); //guid
$(ele).YTTooltip({
html: `<div class="card m-1 border device-wrap"> html: `<div class="card m-1 border device-wrap">
<div class="card-header p-2 px-3"> <div class="card-header p-2 px-3">
<div id="card-tab" class="row justify-content-end nav nav-tabs" role="tablist"> <div id="card-tab" class="row justify-content-end nav nav-tabs" role="tablist">
@ -222,7 +224,7 @@
${drawStateTabBlo()} ${drawStateTabBlo()}
</div> </div>
<div id="info" data-tabname="cardTab" data-tabrole="child"> <div id="info" data-tabname="cardTab" data-tabrole="child">
${drawInfoTabBlo()}
</div> </div>
<div id="errRec" data-tabname="cardTab" data-tabrole="child"> <div id="errRec" data-tabname="cardTab" data-tabrole="child">
${drawErrRecTabBlo()} ${drawErrRecTabBlo()}
@ -234,13 +236,16 @@
</div> </div>
</div>`, </div>`,
group:"device", group: "device",
onShow: function (tooltipEle, oriEle) { onShow: function (tooltipEle, oriEle) {
console.log($(oriEle).data("number"))
var tab = new YT.Tab({ tabName: "cardTab" }) var tab = new YT.Tab({ tabName: "cardTab" })
//基本資料tab block
$("#info").append(drawInfoTabBlo(devGuid))
loadOpeRecTable(); loadOpeRecTable();
} }
}) })
})
function loadOpeRecTable() { function loadOpeRecTable() {
let url = "https://api.npoint.io/31e717774a0f5822cc7b"; let url = "https://api.npoint.io/31e717774a0f5822cc7b";

View File

@ -5,7 +5,7 @@
</style> </style>
<div class="row"> <div class="row">
<div id="floChart"></div> <div id="floChart" style="height : 80vh!important;width:100%"></div>
</div> </div>
@ -15,35 +15,46 @@
$(function () { $(function () {
initChart(); initChart();
chartHandler(); getFloData();
}) })
function getFloData() {
let url = baseApiUrl + "/api/Device/GetDeviceList";
let sendData = {
main_system_tag: pageAct.sysMainTag,
building_tag: pageAct.buiTag,
floor_tag: pageAct.floTag,
};
objSendData.Data = sendData;
ytAjax = new YourTeam.Ajax(url, objSendData, function (res) {
if (!res || res.code != "0000" || !res.data) {
} else {
chartHandler(`${baseImgUrl}/upload/floor_map/${res.data[0].floor_map_name}`);
}
}, null, "POST").send();
}
function initChart() { function initChart() {
let chartDom = $("#floChart")[0]; let chartDom = $("#floChart")[0];
floChart = echarts.init(chartDom, null, { width: 'auto' }); floChart = echarts.init(chartDom, null, { width: 'auto' });
} }
function getSvg() { function chartHandler(url) {
"/upload/floor_map/c0de2199-e62b-4f82-b7f7-abacd4e1cd17.svg" floChart.clear();
$.get(url, function (svg) {
if (svg == undefined || svg == null) {
return;
} }
function chartHandler() { echarts.registerMap('floor_svg', { svg: svg });
floChart.clear();
/*let url = `${baseApiUrl}/upload/graph_manage/de08e7ee-9839-4403-90e5-754dec4e389b.jpg`*/
let url = `${baseImgUrl}/upload/floor_map/2e5be49c-f8e8-4977-b5b6-db4d95ff9691.svg`
download(url) option = {
// animationDurationUpdate: 1500,
//ytAjax = new YourTeam.Ajax(url, null, function (res) { //tooltip: {
// if (svg == undefined || svg == null) {
// return;
// }
// echarts.registerMap('floor_svg', { svg: svg });
// option = {
// // animationDurationUpdate: 1500,
// tooltip: {
// formatter: function (params) { // formatter: function (params) {
// if (params.data.device_node_guid != undefined && params.data.device_node_guid != null && params.data.device_node_guid != "") { // 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> // return `名稱:${params.data.device_node_full_name}<br>
@ -54,149 +65,149 @@
// Guid${params.data.device_guid}` // Guid${params.data.device_guid}`
// } // }
// } // }
// }, //},
// toolbox: { //工具欄 toolbox: { //工具欄
// show: false show: false
// }, },
// geo: { geo: {
// map: 'floor_svg', map: 'floor_svg',
// roam: true, roam: true,
// scaleLimit: { //限制放大縮小倍數 scaleLimit: { //限制放大縮小倍數
// max: 32, max: 32,
// min: 2.5 min: 2.5
// }, },
// layoutSize: '100%', layoutSize: '100%',
// layoutCenter: ['50%', '50%'], layoutCenter: [],
// zoom: 2.5, zoom: 2.5,
// silent: true silent: true
// }, },
// series: [ series: [
// { //不管有無被選擇(圓點) { //不管有無被選擇(圓點)
// type: 'scatter', type: 'scatter',
// coordinateSystem: 'geo', coordinateSystem: 'geo',
// geoIndex: 0, geoIndex: 0,
// symbol: 'circle', symbol: 'circle',
// symbolSize: 10, symbolSize: 10,
// symbolOffset: [10, 10], symbolOffset: [10, 10],
// label: { label: {
// show: false show: false
// }, },
// data: currentData, /*data: currentData,*/
// z: 2 z: 2
// }, },
// { //未選擇的設備(icon) { //未選擇的設備(icon)
// type: 'scatter', type: 'scatter',
// coordinateSystem: 'geo', coordinateSystem: 'geo',
// geoIndex: 0, geoIndex: 0,
// symbolSize: 30, symbolSize: 30,
// label: { label: {
// formatter: '{b}', formatter: '{b}',
// position: 'bottom', position: 'bottom',
// show: true, show: true,
// backgroundColor: 'orange' backgroundColor: 'orange'
// }, },
// emphasis: { emphasis: {
// label: { label: {
// show: true, show: true,
// fontSize: '20', fontSize: '20',
// fontWeight: 'bold', fontWeight: 'bold',
// color: 'yellow' color: 'yellow'
// } }
// }, },
// selectedMode: 'single', selectedMode: 'single',
// data: null, data: null,
// z: 1 z: 1
// }, },
// { //被選擇的設備(icon) { //被選擇的設備(icon)
// type: 'effectScatter', type: 'effectScatter',
// coordinateSystem: 'geo', coordinateSystem: 'geo',
// geoIndex: 0, geoIndex: 0,
// showEffectOn: 'render', showEffectOn: 'render',
// symbolSize: 30, symbolSize: 30,
// label: { label: {
// formatter: '{b}', formatter: '{b}',
// position: 'bottom', position: 'bottom',
// show: true, show: true,
// backgroundColor: 'orange' backgroundColor: 'orange'
// }, },
// emphasis: { emphasis: {
// label: { label: {
// show: true, show: true,
// fontSize: '20', fontSize: '20',
// fontWeight: 'bold', fontWeight: 'bold',
// color: 'yellow' color: 'yellow'
// } }
// }, },
// selectedMode: 'single', selectedMode: 'single',
// data: null, data: null,
// z: 1 z: 1
// }, },
// { //編輯模式底下的設備(圓點,只會有一個) { //編輯模式底下的設備(圓點,只會有一個)
// type: 'scatter', type: 'scatter',
// coordinateSystem: 'geo', coordinateSystem: 'geo',
// geoIndex: 0, geoIndex: 0,
// symbol: 'circle', symbol: 'circle',
// symbolSize: 10, symbolSize: 10,
// symbolOffset: [10, 10], symbolOffset: [10, 10],
// label: { label: {
// show: false show: false
// }, },
// data: currentData, /*data: currentData,*/
// z: 2 z: 2
// }, },
// { //編輯模式底下的設備(icon只會有一個) { //編輯模式底下的設備(icon只會有一個)
// type: 'scatter', type: 'scatter',
// coordinateSystem: 'geo', coordinateSystem: 'geo',
// geoIndex: 0, geoIndex: 0,
// symbolSize: 30, symbolSize: 30,
// label: { label: {
// formatter: '{b}', formatter: '{b}',
// position: 'bottom', position: 'bottom',
// show: true, show: true,
// backgroundColor: 'orange' backgroundColor: 'orange'
// }, },
// emphasis: { emphasis: {
// label: { label: {
// show: true, show: true,
// fontSize: '20', fontSize: '20',
// fontWeight: 'bold', fontWeight: 'bold',
// color: 'yellow' color: 'yellow'
// } }
// }, },
// data: null, data: null,
// z: 1 z: 1
// }, },
// ], ],
// }; };
floChart.setOption(option);
console.log(floChart)
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);
if (floor_map_mode == "edit") {
temp_device_on_floor_map = [{
device_guid: selected_temp_device.device_guid,
device_full_name: selected_temp_device.device_full_name,
device_node_guid: selected_temp_device.device_node_guid ? selected_temp_device.device_node_guid : null,
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]);
// floChart.setOption(option); // floChart.setOption(option);
});
// floChart.getZr().on('click', function (params) { //floChart.on('selectchanged', function (params) {
// 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") {
// temp_device_on_floor_map = [{
// device_guid: selected_temp_device.device_guid,
// device_full_name: selected_temp_device.device_full_name,
// device_node_guid: selected_temp_device.device_node_guid ? selected_temp_device.device_node_guid : null,
// 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]);
// // floChart.setOption(option);
// });
// 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]);
@ -212,40 +223,37 @@
// } // }
// }); //});
// // 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();
//$.get(`${baseImgUrl}/device/GetFloorSvg/c0de2199-e62b-4f82-b7f7-abacd4e1cd17.svg`, function (svg) {
})
//}) .fail(function () {
// .fail(function () { toast_warning("查無該樓層地圖")
// toast_warning("查無該樓層地圖") floChart.clear();
// floChart.clear(); });
// });
} }
</script> </script>

View File

@ -43,3 +43,7 @@ function defDev(obj) {
let defSrc = 'img/defdev.png'; let defSrc = 'img/defdev.png';
obj.src = defSrc; obj.src = defSrc;
} }
function creEle(ele,text) {
return $(`<${ele}>${text}</${ele}>`);
}

View File

@ -123,9 +123,9 @@ class Ajax {
*/ */
send = function (conType = this.contentType.Json, sendData = null, successFunction = null, errorFunction = null) { send = function (conType = this.contentType.Json, sendData = null, successFunction = null, errorFunction = null) {
if (!CheckMultiSend(this.apiUrl, this.type, this.dataToString(this.sendData))) { //連點防呆 //if (!CheckMultiSend(this.apiUrl, this.type, this.dataToString(this.sendData))) { //連點防呆
return false; // return false;
} //}
if (sendData) { if (sendData) {
this.sendData = sendData; this.sendData = sendData;
} }

View File

@ -175,7 +175,7 @@ namespace FrontendWebApi.ApiControllers
try try
{ {
var sqlString = $@"select full_name, InitMapName as map_name, floor_map_name + '.svg' as floor_map_name from floor where deleted = 0 and building_tag = @building_tag and full_name = ifnull(@floor_tag, full_name)"; var sqlString = $@"select full_name, InitMapName as map_name, concat(floor_map_name,'.svg') as floor_map_name from floor where deleted = 0 and building_tag = @building_tag and full_name = ifnull(@floor_tag, full_name)";
var param = new { @building_tag = fd.building_tag, @floor_tag = fd.floor_tag }; var param = new { @building_tag = fd.building_tag, @floor_tag = fd.floor_tag };
var fl = await backendRepository.GetAllAsync<FloorList>(sqlString, param); var fl = await backendRepository.GetAllAsync<FloorList>(sqlString, param);