[Frontend][系統監控] 左右邊區塊動態呈現程序建置

Frontend/_sysMonAll.html

@@ -2,29 +2,11 @@
 </style>
 
 <div class="row">
-    <div class="col-sm-12 col-xl-6">
+    <div id="leftDiv" class="col-sm-12 col-xl-6">
-        <div class="d-flex mb-4" style="gap:15px">
-            <div class="row m-0 align-items-center">
-                <span id="sysNorLight" class="circle-light mr-2 " data-light-type="normal"></span>
-                <label class="mb-0">正常</label>
-            </div>
-            <div class="row m-0 align-items-center">
-                <span id="sysCloLight" class="circle-light mr-2" data-light-type="close"></span>
-                <label class="mb-0">關機</label>
-            </div>
-            <div class="row m-0 align-items-center">
-                <span id="sysErrLight" class="circle-light mr-2" data-light-type="error"></span>
-                <label class="mb-0">異常</label>
-            </div>
-        </div>
       
-        <div class="col-12 p-0" id="floDevList">
-
-
-        </div>
     </div>
-    <div class="col-sm-12 col-xl-6">
+    <div id="rightDiv" class="col-sm-12 col-xl-6">
-        <div id="forgeViewer"></div>
+
     </div>
 </div>
 
@@ -32,11 +14,56 @@
     var allDevList = [];  //全設備清單
     
     $(function () {
-        getFloDevList();
+        getBuildMenu((arr,data) => {
-        setLightColor();
+            if (arr.indexOf(4) != -1) {
-        show3DModel();
+                getFloDevList();
+                setLightColor();
+            }
+            if (arr.indexOf(5) != -1) {
+                show3DModel(data.urn_3D);
+            }
+        });
+        
+        
     })
 
+    // 從資料庫取得 drawing type 決定呈現畫面
+    function getHtmlByType(type = 4, data = {}) {
+        let strHtml = ``;
+        switch (type) {
+            case 2:
+                strHtml = `<div>
+                                <iframe src="${data.system_url}" width="100%" height="100%"></iframe>
+                           </div>`;
+                break;
+            case 4:
+                strHtml = `<div class="d-flex mb-4" style="gap:15px">
+                                <div class="row m-0 align-items-center">
+                                    <span id="sysNorLight" class="circle-light mr-2 " data-light-type="normal"></span>
+                                    <label class="mb-0">正常</label>
+                                </div>
+                                <div class="row m-0 align-items-center">
+                                    <span id="sysCloLight" class="circle-light mr-2" data-light-type="close"></span>
+                                    <label class="mb-0">關機</label>
+                                </div>
+                                <div class="row m-0 align-items-center">
+                                    <span id="sysErrLight" class="circle-light mr-2" data-light-type="error"></span>
+                                    <label class="mb-0">異常</label>
+                                </div>
+                            </div>
+
+                            <div class="col-12 p-0" id="floDevList">
+
+                            </div>`;
+                break;
+            case 5:
+                strHtml = `<div name="forgeViewer" style="height:85vh;"></div>`;
+                break;
+        }
+
+        return strHtml;
+    }
+
     //baja 訂閱設備
     function subDevice() {
         if (myBaja == null) {
@@ -162,9 +189,47 @@
         return strHtml;
     }
 
-    function show3DModel() {
+    function getBuildMenu(callback = null) {
-        launchViewer("dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6dnNjb2RlX2ZvcmdlX3Rlc3QvJUUzJTgwJTkwQVJDJUUzJTgwJTkxQjFGXzIwMjJfMTJfMDQubndj", (viewer, nodeIds) => {
+        let url = baseApiUrl + "/api/Device/GetBuildMenu";
+        let sendData = {
+            main_system_tag: pageAct.sysMainTag,
+            sub_system_tag: pageAct.sysSubTag,
+            building_tag: pageAct.buiTag,
+        };
+        objSendData.Data = sendData;
+        ytAjax = new YourTeam.Ajax(url, objSendData, function (res) {
+            if (!res || res.code != "0000" || !res.data) {
 
-        });
+            } else {
+                let leftData = {}, rightData = {};
+                debugger
+                for (var key in res.data) {
+                    if (key.startsWith("left")) {
+                        leftData[key.split("left_")[1]] = res.data[key];
+                    } else if (key.startsWith("right")) {
+                        rightData[key.split("right_")[1]] = res.data[key];
+                    }
+                }
+
+                if (res.data.left_drawing != null) {
+                    $("#leftDiv").html(getHtmlByType(res.data.left_drawing, leftData));
+                } else {
+                    $("#leftDiv").html(getHtmlByType(4, leftData));
+                }
+                if (res.data.right_drawing != null) {
+                    $("#rightDiv").html(getHtmlByType(res.data.right_drawing), rightData);
+                } else {
+                    $("#rightDiv").html(getHtmlByType(4, rightData));
+                }
+
+                callback ? callback([res.data.left_drawing, res.data.right_drawing],res.data) : "";
+            }
+        }, null, "POST").send();
+    }
+
+    function show3DModel(urn) {
+        launchViewer(urn, (viewer, nodeIds) => {
+
+        },"[name=forgeViewer]");
     }
 </script>

Frontend/js/forge/forgemodel.js

@@ -45,25 +45,26 @@
 let fragProxy;
 var targetFloorZ;
 var elevatorSpeed;
+var selector = "#forgeViewer";
 // for (let i = 0; i < devices.length; i++) {
 //     sensorVals[i] = Math.random();
 // }
 
-function launchViewer(urn, callback) {
+function launchViewer(urn, callback,selector = "#forgeViewer") {
     var options = {
         env: 'AutodeskProduction',
         getAccessToken: getForgeToken
     };
 
     Autodesk.Viewing.Initializer(options, () => {
-        viewer = new Autodesk.Viewing.GuiViewer3D(document.getElementById('forgeViewer'));
+        viewer = new Autodesk.Viewing.GuiViewer3D($(selector)[0]);
         //viewer = new Autodesk.Viewing.Viewer3D(document.getElementById('forgeViewer'));
         viewer.start();
         var documentId = 'urn:' + urn;
 
         Autodesk.Viewing.Document.load(documentId, onDocumentLoadSuccess, onDocumentLoadFailure);
 
-        $("#forgeViewer").on("autodesk:loaded", function (e,nodeIds) {
+        $(selector).on("autodesk:loaded", function (e,nodeIds) {
             callback ? callback(viewer, nodeIds) : "";
         })
 
@@ -103,13 +104,13 @@ function launchViewerNoTools(urn, callback) {
 
     Autodesk.Viewing.Initializer(options, () => {
         //viewer = new Autodesk.Viewing.GuiViewer3D(document.getElementById('forgeViewer'));
-        viewer = new Autodesk.Viewing.Viewer3D(document.getElementById('forgeViewer'));
+        viewer = new Autodesk.Viewing.Viewer3D($('forgeViewer')[0]);
         viewer.start();
         var documentId = 'urn:' + urn;
 
         Autodesk.Viewing.Document.load(documentId, onDocumentLoadSuccess, onDocumentLoadFailure);
 
-        $("#forgeViewer").on("autodesk:loaded", function (e, nodeIds) {
+        $(selector).on("autodesk:loaded", function (e, nodeIds) {
             callback ? callback(viewer, nodeIds) : "";
         })
     });
@@ -314,7 +315,7 @@ function onDocumentLoadSuccess(doc, eleOption) {
         console.log(instanceTree.nodeAccess)
         allDbIdsStr = Object.keys(instanceTree.nodeAccess.dbIdToIndex);
         getNodeIdByDbIds(allDbIdsStr, (nodeIds) => {
-            $("#forgeViewer").trigger("autodesk:loaded", nodeIds );
+            $(selector).trigger("autodesk:loaded", nodeIds );
         });
         
         

FrontendWebApi/ApiControllers/DeviceManageController.cs

@@ -119,6 +119,51 @@ namespace FrontendWebApi.ApiControllers
             return Ok(apiResult);
         }
 
+        /// <summary>
+        /// 系統監控電錶左右區塊呈現
+        /// </summary>
+        /// <param name="account"></param>
+        /// <returns></returns>
+        [HttpPost]
+        [Route("api/Device/GetBuildMenu")]
+        public async Task<ActionResult<ApiResult<BuildBuildingMenu>>> GetBuildMenu([FromBody] FindDevice fd)
+        {
+            ApiResult<BuildBuildingMenu> apiResult = new ApiResult<BuildBuildingMenu>(jwt_str);
+            if (!jwtlife)
+            {
+                apiResult.Code = "5000";
+                return BadRequest(apiResult);
+            }
+            else if (string.IsNullOrEmpty(fd.building_tag) || string.IsNullOrEmpty(fd.main_system_tag) || string.IsNullOrEmpty(fd.sub_system_tag))
+            {
+                apiResult.Code = "0002";
+                apiResult.Msg = "傳入參數不完整";
+                return apiResult;
+            }
+
+            try
+            {
+                var buiMenu = await frontendRepository.GetOneAsync<BuildBuildingMenu>(
+                    @$"SELECT b.urn_3D,bm.* FROM building_menu bm
+                        JOIN building b on b.building_tag = bm.building_tag
+                        WHERE bm.building_tag = @building_tag AND bm.main_system_tag = @main_system_tag AND bm.sub_system_tag = @sub_system_tag",
+                    new { @sub_system_tag = fd.sub_system_tag, @main_system_tag = fd.main_system_tag, @building_tag = fd.building_tag });
+
+                apiResult.Data = buiMenu;
+
+                apiResult.Code = "0000";
+            }
+            catch (Exception exception)
+            {
+                apiResult.Code = "9999";
+                apiResult.Msg = "系統內部錯誤，請聯絡管理者。";
+                Logger.LogError("【" + controllerName + "/" + actionName + "】" + exception.Message);
+                return Ok(apiResult);
+            }
+            return Ok(apiResult);
+        }
+
+
         /// <summary>
         /// 東別列表
         /// </summary>

FrontendWebApi/Models/Build.cs

@@ -228,4 +228,42 @@ namespace FrontendWebApi.Models
         public string Ip_address { get; set; } //監控主機 IP
         public byte FloorNum { get; set; } //樓層數量
     }
+
+    public class BuildBuildingMenu : BuildingMenu
+    {
+        public string urn_3D { get; set; }
+    }
+
+    public class BuildingMenu
+    {
+        public string building_tag { get; set; }
+        public string main_system_tag { get; set; }
+        public string sub_system_tag { get; set; }
+        public short? left_drawing { get; set; }
+        public short? left_icon_click { get; set; }
+        public string left_icon_click_url { get; set; }
+        public int? left_icon_click_url_width { get; set; }
+        public int? left_icon_click_url_height { get; set; }
+        public short? left_planimetric_click { get; set; }
+        public string left_planimetric_floor_guid { get; set; }
+        public string left_system_url { get; set; }
+        public string left_riser_diagram_url { get; set; }
+        public short? right_drawing { get; set; }
+        public short? right_icon_click { get; set; }
+        public string right_icon_click_url { get; set; }
+        public int? right_icon_click_url_width { get; set; }
+        public int? right_icon_click_url_height { get; set; }
+        public short right_planimetric_click { get; set; }
+        public string right_planimetric_floor_guid { get; set; }
+        public string right_system_url { get; set; }
+        public string right_riser_diagram_url { get; set; }
+        public string device_building_tag { get; set; }
+        public string device_system_tag { get; set; }
+        public short? OpenTab { get; set; }
+        public short? is_link { get; set; }
+        public string created_by { get; set; }
+        public string created_at { get; set; }
+        public string updated_by { get; set; }
+        public string updated_at { get; set; }
+    }
 }