[FrontendWebApi] 取得 Device Item 系統小類下的點位資訊程序建置 | [Frontend] 系統監控設備卡片點位值呈現

Frontend/_sysMonAll.html

@@ -94,7 +94,7 @@
             if (!matchDevice) {
                 return false;
             }
-            console.log(data)
+            
             //將訂閱值塞入 subDeviceData
             if (subDeviceData.findIndex(x => x.device_number == matchDevice.device_number) == -1) {
                 let obj = {};
@@ -130,14 +130,24 @@
 
             setLightColor();
             setForgeHotSpotColor(matchDevice);
+            // 從設備訂閱更新每個設備卡片即時點位
+            setDevItemPoiValBySub(data);
         });
 
         myBaja.setSubscribeDeviceEndCallBack(function (data) {
-
             endPageLoading();
         });
 
     }
+    // 從設備訂閱更新每個設備卡片即時點位
+    function setDevItemPoiValBySub(data) { 
+        
+        let pointSpan = $(`.card.device-wrap[data-number=${data.device_number_full}] span[name=devItemPoiVal]`);
+        if (pointSpan && pointSpan.data("point") == data.point_name) {
+            console.log(data)
+            pointSpan.text(data.value);
+        }
+    }
 
     function setLightColor() {
         $("[data-light-type]").each((index, ele) => {
@@ -200,6 +210,15 @@
         }
     }
 
+    // 取得昇位圖點位 (deviceItem)
+    function getRiserPoiObj() {
+        let tarDevItem = pageAct.devItems?.filter(x => x.is_show_riserDiagram == 1);
+        if (tarDevItem && tarDevItem[0]) {
+            return tarDevItem[0];
+        }
+        return null;
+    }
+
     // 取得設備列表 並繪製卡片
     function getFloDevList() {
         let url = baseApiUrl + "/api/Device/GetDeviceList";
@@ -220,8 +239,8 @@
                     strHtml += `<div class="col p-0 d-grid grid-gap-5 grid-temp-col-c" style="--c-grid-temp-col:repeat(auto-fill,minmax(250px,1fr))">`
                     $.each(floObj.device_list, (index2, devObj) => {
                         allDevList.push(devObj);
-
+                        let devItem = getRiserPoiObj();
-                        strHtml += `<div class="card m-1 border device-wrap">
+                        strHtml += `<div class="card m-1 border device-wrap" data-number="${devObj.device_number}">
                                         <div class="card-body p-2">
                                             <div class="d-flex mb-2">
                                                 <div  class="mr-5 cur-poi">
@@ -233,7 +252,7 @@
                                             </div>
                                         <div class="d-flex mb-0 mt-2 align-items-center">
                                                 <span id="${devObj.device_number}_status" class="circle-light"></span>
-                                                <span class="d-none">即時功率：</span>
+                                                <span class="${devItem ? "" : "d-none"} ml-2">${devItem?.full_name}：<span name="devItemPoiVal" data-point="${devItem?.points}"></span>${devItem?.unit}</span>
                                                 <a href="javascript:;" name="devItem" data-id="${devObj.device_guid}" data-number="${devObj.device_number}" data-name="${devObj.full_name}" class=" ml-2 mb-0 ">詳細資料</a>
                                             </div>
                                         </div>

Frontend/index.html

@@ -928,6 +928,7 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
                     pageAct.sysSubTag = $(this).data("subSysObj").sub_system_tag;
                     pageAct.sysSubName = $(this).data("subSysObj").full_name;
                     pageAct.sysSubObj = $(this).data("subSysObj");
+                    getDevItem();
                 })
 
                 onEvent("active:change", "#buiList", function (e, actEle) {
@@ -1350,6 +1351,22 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
             $(loadEle).Loading("close");
         }
 
+        function getDevItem() {
+            let url = baseApiUrl + "/api/Device/GetDeviceItem";
+            
+            objSendData.Data = {
+                main_system_tag: pageAct.sysMainTag,
+                sub_system_tag: pageAct.sysSubTag,
+            }
+            ytAjax = new YourTeam.Ajax(url, objSendData, function (res) {
+                if (!res || res.code != "0000" || !res.data) {
+
+                } else {
+                    pageAct.devItems = res.data;
+                }
+            }, null, "POST").send();
+        }
+
         function alarmIconBlink(data) {
             if (data?.data.length != 0) {
                 $(".page-header [name=topFunBtn][data-page=alert] i").addClass("blink");

FrontendWebApi/ApiControllers/DeviceManageController.cs

@@ -872,5 +872,43 @@ namespace FrontendWebApi.ApiControllers
             }
             return Ok(apiResult);
         }
+
+        /// <summary>
+        /// 取得 Device Item 系統小類下的點位資訊
+        /// </summary>
+        /// <param name="account"></param>
+        /// <returns></returns>
+        [HttpPost]
+        [Route("api/Device/GetDeviceItem")]
+        public async Task<ActionResult<ApiResult<List<DeviceItemViewModel>>>> GetDeviceItem([FromBody] FindDeviceItem fdi)
+        {
+            ApiResult<List<DeviceItemViewModel>> apiResult = new ApiResult<List<DeviceItemViewModel>>();
+
+            if (string.IsNullOrEmpty(fdi.main_system_tag) || string.IsNullOrEmpty(fdi.sub_system_tag))
+            {
+                apiResult.Code = "0002";
+                apiResult.Msg = "需傳入大小類tag";
+                return apiResult;
+            }
+
+            try
+            {
+                var sqlString = $@"	SELECT * FROM device_item
+                                    WHERE deleted = '0' AND device_system_tag = @main_system_tag AND device_name_tag = @sub_system_tag AND points = IFNULL(@points,points)";
+                var param = new { @main_system_tag = fdi.main_system_tag, @sub_system_tag = fdi.sub_system_tag, @points = fdi.points };
+                var fr = await backendRepository.GetAllAsync<DeviceItemViewModel>(sqlString, param);
+
+                apiResult.Code = "0000";
+                apiResult.Data = fr;
+            }
+            catch (Exception exception)
+            {
+                apiResult.Code = "9999";
+                apiResult.Msg = "系統內部錯誤，請聯絡管理者。";
+                Logger.LogError("【" + controllerName + "/" + actionName + "】" + exception.Message);
+                return Ok(apiResult);
+            }
+            return Ok(apiResult);
+        }
     }
 }

FrontendWebApi/Models/Device.cs

@@ -141,4 +141,27 @@ namespace FrontendWebApi.Models
         public string device_node_coordinate_3d { get; set; }
         public int? forge_dbid { get; set; }
     }
+
+    public class DeviceItemViewModel
+    {
+        public int id { get; set; }
+        public short deleted { get; set; }
+        public string full_name { get; set; }
+        public string points { get; set; }
+        public string unit { get; set; }
+        public short is_show { get; set; }
+        public short? is_show_riserDiagram { get; set; }
+        public short is_controll { get; set; }
+        public short is_bool { get; set; }
+        public short is_link { get; set; }
+        public short is_show_history { get; set; }
+        public string device_system_tag { get; set; }
+        public string device_name_tag { get; set; }
+    }
+
+    public class FindDeviceItem : FindDevice
+    {
+        public string points { get; set; }
+        
+    }
 }