diff --git a/Backend/Startup.cs b/Backend/Startup.cs index 53a99f0..7285fc6 100644 --- a/Backend/Startup.cs +++ b/Backend/Startup.cs @@ -24,6 +24,7 @@ using Microsoft.AspNetCore.Authentication.JwtBearer; using Microsoft.IdentityModel.Tokens; using System.Text; using System.IdentityModel.Tokens.Jwt; +using Microsoft.AspNetCore.Http; namespace Backend { @@ -159,7 +160,13 @@ namespace Backend app.UseSession(); app.UseHttpsRedirection(); - app.UseStaticFiles(); + app.UseStaticFiles(new StaticFileOptions + { + OnPrepareResponse = ctx => + { + ctx.Context.Response.Headers.Append("Access-Control-Allow-Origin", "*"); + } + }); app.UseRouting(); JwtSecurityTokenHandler.DefaultInboundClaimTypeMap.Clear(); diff --git a/Frontend/_sysMonAll.html b/Frontend/_sysMonAll.html index 1f537fb..800c867 100644 --- a/Frontend/_sysMonAll.html +++ b/Frontend/_sysMonAll.html @@ -110,48 +110,47 @@ return strHtml; } - function drawInfoTabBlo() { - let strHtml = ` - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
設備編號B01-B2-19F-CR-0013D 座標113
設備名稱A區迴路001forge dbid101
廠牌飛利浦 PhilipIP192.168.1.105
型號BH065
原廠文件2022使用手冊.pdf
型號BH065
` - return strHtml; + function drawInfoTabBlo(devGuid) { + let tabEle = $(``); + let tbody = tabEle.append(""); + let columnNames = ["設備編號", "設備名稱"]; + + $.each(columnNames, (index, colName) => { + let tr = $(""); + let td = $(""); + td.text(colName); + tr.append(td); + tbody.append(tr); + }) + + let url = baseApiUrl + "/api/Device/GetBaseDevice"; + let sendData = { + device_guid: devGuid, + }; + objSendData.Data = sendData; + ytAjax = new YourTeam.Ajax(url, objSendData, function (res) { + if (!res || res.code != "0000" || !res.data) { + + } else { + tbody.find("tr").eq(0).append(creEle("td", res.data.device_number)); + tbody.find("tr").eq(1).append(creEle("td", res.data.full_name)); + } + }, null, "POST").send(); + + //let strHtml = `
+ // + // + // + // + // + // + // + // + + // + // + //
設備編號B01-B2-19F-CR-001
設備名稱A區迴路001
` + return tabEle.prop("outerHTML"); } function drawErrRecTabBlo() { @@ -206,41 +205,47 @@ } function initPopover() { - $("[name=devItem]").YTTooltip({ - html: `
-
-
- - - - -
-
-
+ $("[name=devItem]").each((index, ele) => { + let devNum = $(ele).data("number"); //設備編號 + let devGuid = $(ele).data("id"); //guid + $(ele).YTTooltip({ + html: `
+
+
+ + + + +
+
+
-
- ${drawStateTabBlo()} -
-
- ${drawInfoTabBlo()} -
-
- ${drawErrRecTabBlo()} -
-
- ${drawOpeRecTabBlo()} -
+
+ ${drawStateTabBlo()} +
+
+ +
+
+ ${drawErrRecTabBlo()} +
+
+ ${drawOpeRecTabBlo()} +
-
-
`, - group:"device", - onShow: function (tooltipEle, oriEle) { - console.log($(oriEle).data("number")) - var tab = new YT.Tab({ tabName: "cardTab" }) - loadOpeRecTable(); - } +
+
`, + group: "device", + onShow: function (tooltipEle, oriEle) { + var tab = new YT.Tab({ tabName: "cardTab" }) + //基本資料tab block + $("#info").append(drawInfoTabBlo(devGuid)) + loadOpeRecTable(); + } + }) }) + function loadOpeRecTable() { let url = "https://api.npoint.io/31e717774a0f5822cc7b"; diff --git a/Frontend/_sysMonFloor.html b/Frontend/_sysMonFloor.html index d88f236..e08554a 100644 --- a/Frontend/_sysMonFloor.html +++ b/Frontend/_sysMonFloor.html @@ -5,7 +5,7 @@
-
+
@@ -15,237 +15,245 @@ $(function () { 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() { let chartDom = $("#floChart")[0]; floChart = echarts.init(chartDom, null, { width: 'auto' }); } - function getSvg() { - "/upload/floor_map/c0de2199-e62b-4f82-b7f7-abacd4e1cd17.svg" - } - - function chartHandler() { + function chartHandler(url) { 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) - - //ytAjax = new YourTeam.Ajax(url, null, function (res) { - // if (svg == undefined || svg == null) { - // return; - // } - - // echarts.registerMap('floor_svg', { svg: svg }); - - // 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}
- // Guid：${params.data.device_node_guid}` - // } - // else { - // return `名稱：${params.data.device_full_name}
- // 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); - - // 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.on('selectchanged', function (params) { - - // console.log("selectchanged", params); - // // currentData.push([dataPoint[0], dataPoint[1], 1]); - // // floChart.setOption(option); - - // currentData = $.map(currentData, function (item) { - // item.selected = false; - // return item; - // }); - - // if (params.selected.length > 0) { - // currentData[params.selected[0].seriesIndex - 1].selected = true; - // } - - - // }); - - // // floChart.getZr().on('mousewheel', function (params) { - // // console.log(params) - // // }) - // floChart.on('georoam', function (params) { - - // var zoom = floChart.getOption().geo[0].zoom; - - // if (zoom <= 2.5) { - // ResetFloorMap(); - // floChart.setOption({ - // geo: { - // roam: 'scale' - // }, - // }); - // } else { - // floChart.setOption({ - // geo: { - // roam: true - // }, - // }); - // } - - - // }); - //}).send(); - //$.get(`${baseImgUrl}/device/GetFloorSvg/c0de2199-e62b-4f82-b7f7-abacd4e1cd17.svg`, function (svg) { + $.get(url, function (svg) { + if (svg == undefined || svg == null) { + return; + } - //}) - // .fail(function () { - // toast_warning("查無該樓層地圖") - // floChart.clear(); - // }); + echarts.registerMap('floor_svg', { svg: svg }); + + 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}
+ // Guid：${params.data.device_node_guid}` + // } + // else { + // return `名稱：${params.data.device_full_name}
+ // Guid：${params.data.device_guid}` + // } + // } + //}, + toolbox: { //工具欄 + show: false + }, + geo: { + map: 'floor_svg', + roam: true, + scaleLimit: { //限制放大縮小倍數 + max: 32, + min: 2.5 + }, + layoutSize: '100%', + layoutCenter: [], + 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); + 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.on('selectchanged', function (params) { + + // console.log("selectchanged", params); + // // currentData.push([dataPoint[0], dataPoint[1], 1]); + // // floChart.setOption(option); + + // currentData = $.map(currentData, function (item) { + // item.selected = false; + // return item; + // }); + + // if (params.selected.length > 0) { + // currentData[params.selected[0].seriesIndex - 1].selected = true; + // } + + + //}); + + // floChart.getZr().on('mousewheel', function (params) { + // console.log(params) + // }) + floChart.on('georoam', function (params) { + + var zoom = floChart.getOption().geo[0].zoom; + + if (zoom <= 2.5) { + ResetFloorMap(); + floChart.setOption({ + geo: { + roam: 'scale' + }, + }); + } else { + floChart.setOption({ + geo: { + roam: true + }, + }); + } + + + }); + + }) + .fail(function () { + toast_warning("查無該樓層地圖") + floChart.clear(); + }); } \ No newline at end of file diff --git a/Frontend/js/site.js b/Frontend/js/site.js index 3aecd08..89733b4 100644 --- a/Frontend/js/site.js +++ b/Frontend/js/site.js @@ -43,3 +43,7 @@ function defDev(obj) { let defSrc = 'img/defdev.png'; obj.src = defSrc; } + +function creEle(ele,text) { + return $(`<${ele}>${text}`); +} \ No newline at end of file diff --git a/Frontend/js/yourteam/yourteam.ajax.class.js b/Frontend/js/yourteam/yourteam.ajax.class.js index a8fb407..215fef6 100644 --- a/Frontend/js/yourteam/yourteam.ajax.class.js +++ b/Frontend/js/yourteam/yourteam.ajax.class.js @@ -123,9 +123,9 @@ class Ajax { */ send = function (conType = this.contentType.Json, sendData = null, successFunction = null, errorFunction = null) { - if (!CheckMultiSend(this.apiUrl, this.type, this.dataToString(this.sendData))) { //連點防呆 - return false; - } + //if (!CheckMultiSend(this.apiUrl, this.type, this.dataToString(this.sendData))) { //連點防呆 + // return false; + //} if (sendData) { this.sendData = sendData; } diff --git a/FrontendWebApi/ApiControllers/DeviceManageController.cs b/FrontendWebApi/ApiControllers/DeviceManageController.cs index 5a586fd..4522698 100644 --- a/FrontendWebApi/ApiControllers/DeviceManageController.cs +++ b/FrontendWebApi/ApiControllers/DeviceManageController.cs @@ -175,7 +175,7 @@ namespace FrontendWebApi.ApiControllers 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 fl = await backendRepository.GetAllAsync(sqlString, param);