[帳號管理] 頁面建置 | 帳號權限管理列表 角色權限 角色管理 列表建置 | 圖檔復歸建置 | 樓層sendData增加小類tag

Frontend/_accountManagement.html

@@ -0,0 +1,297 @@
+<main id="js-page-content" role="main" class="page-content">
+    <div class="row">
+        <div class="col-sm-12 col-xl-12">
+            <h1 class="p-2 mb-0">帳號與權限管理</h1>
+            <div class="row mt-5">
+                <ul class="nav nav-tabs w-100" role="tablist">
+                    <li class="nav-item"> <a class="nav-link active" data-toggle="tab" href="#tab_borders_icons-1" role="tab"><i class="fal fa-user mr-1"></i> 帳號管理</a> </li>
+                    <li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#tab_borders_icons-2" role="tab"><i class="fal fa-users mr-1"></i> 群組管理</a> </li>
+                    <li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#tab_borders_icons-3" role="tab"><i class="fal fa-cog mr-1"></i> 群組權限</a> </li>
+                </ul>
+                <div class="tab-content border border-top-0 p-3 w-100">
+                    <div class="tab-pane fade show active" id="tab_borders_icons-1" role="tabpanel">
+                        <div class="row mb-5 align-items-end">
+                            <div class="col-auto">
+                                <div class="form-group">
+                                    <label class="form-label" for="simpleinput">姓名</label>
+                                    <input type="text" id="simpleinput" class="form-control">
+                                </div>
+                            </div>
+                            <div class="col-auto">
+                                <div class="form-group">
+                                    <label class="form-label" for="simpleinput">群組</label>
+                                    <input type="text" id="simpleinput" class="form-control">
+                                </div>
+                            </div>
+                            <div class="col-auto">
+                                <div class="form-group">
+                                    <label class="form-label" for="example-select">狀態</label>
+                                    <select class="form-control" id="example-select select2bs4">
+                                        <option>啟用中</option>
+                                        <option>停用</option>
+                                    </select>
+                                </div>
+                            </div>
+                            <div class="col-auto"> <a href="#" class="btn btn-info">搜尋</a> </div>
+                        </div>
+                        <div class="frame-wrap">
+                            <div class="mb-3"> <a href="#" class="btn btn-success" data-toggle="modal" data-target="#modal-center-add">+ 新增</a> </div>
+                            <table id="accManTable" class="table table-bordered table-striped text-center m-0 w-100">
+                                
+                            </table>
+                        </div>
+                    </div>
+                    <div class="tab-pane fade" id="tab_borders_icons-2" role="tabpanel">
+                        <div class="row mb-5 align-items-end">
+                            <div class="col-auto">
+                                <div class="form-group">
+                                    <label class="form-label" for="simpleinput">群組</label>
+                                    <input type="text" id="simpleinput" class="form-control">
+                                </div>
+                            </div>
+                            <div class="col-auto"> <a href="#" class="btn btn-info">搜尋</a> </div>
+                        </div>
+                        <div class="frame-wrap">
+                            <div class="mb-3"> <a href="#" class="btn btn-success">+ 新增</a> </div>
+                            <table id="rolManTable" class="table table-bordered table-striped text-center m-0 w-100">
+                                
+                            </table>
+                        </div>
+                    </div>
+                    <div class="tab-pane fade" id="tab_borders_icons-3" role="tabpanel">
+                        <div class="row mb-5 align-items-end">
+                            <div class="col-auto">
+                                <div class="form-group">
+                                    <label class="form-label" for="roleSel">角色</label>
+                                    <select class="form-control select2bs4" id="roleSel">
+                                        
+                                    </select>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="frame-wrap">
+                            <div class="mb-3"> <a href="#" class="btn btn-success" data-toggle="modal" data-target="#modal-center-users">+ 加入可用功能</a> </div>
+                            <table id="rolAuthTable" class="table table-bordered table-striped text-center m-0 w-100">
+                               
+                            </table>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</main>
+
+<script>
+    var rolAuthTable = null;
+    $(function () {
+        getRoleSel();
+        loadAccManTable();
+        loadRolManTable();
+        loadRolAuthTable();
+        events();
+    })
+
+    function loadAccManTable() {
+        let ajaxObj = {
+            url: baseApiUrl + "/User/UserManagerList",
+            method: "POST",
+        }
+        let tag = "#accManTable";
+
+        let column_defs = [
+            { "targets": [0], "width": "6%", "sortable": true },
+            { "targets": [1], "width": "12%", "sortable": true },
+            { "targets": [2], "width": "14%", "sortable": true },
+            { "targets": [3], "width": "12%", "sortable": true },
+            { "targets": [4], "width": "14%", "sortable": true },
+            { "targets": [5], "width": "14%", "sortable": true },
+            { "targets": [6], "width": "14%", "sortable": true },
+            { "targets": [7], "width": "14%", "sortable": true },
+        ];
+
+        let columns = [
+            {
+                "title": "#",
+                "data": null,
+                "render": function (data, type, row, meta) {
+                    return meta.row + 1;
+                }
+            },
+            {
+                "title": "姓名",
+                "data": "full_name",
+            },
+            {
+                "title": "帳號",
+                "data": "account",
+            },
+            {
+                "title": "角色",
+                "data": "role_full_name",
+            },
+            {
+                "title": "email",
+                "data": "email",
+            },
+            {
+                "title": "手機號碼",
+                "data": "phone",
+            },
+            {
+                "title": "建立時間",
+                "data": "created_at",
+            },
+            {
+                "title": "功能",
+                "data": "userinfo_guid",
+                "render": function (data, type, row, meta) {
+                    
+                    let btnDiv = creDiv(["row", "m-0","justify-content-center"], { "style": "gap:10px" });
+                    btnDiv.append(creBtnHtml("修改", "accManEdiBtn" + data, null, ["btn", "btn-info"]));
+                    btnDiv.append(creBtnHtml("刪除", "accManDelBtn" + data, null, ["btn", "btn-danger"]));
+                    return btnDiv.outerHtml();
+                }
+            },
+        ];
+
+        let accManTable = new YourTeam.JqDataTables.getTableByAjax(ajaxObj, tag, null, columns, column_defs);
+    }
+
+    function loadRolManTable() {
+        let ajaxObj = {
+            url: baseApiUrl + "/User/RoleManagerList",
+            method: "POST",
+            data: { post: 0 },
+        }
+        let tag = "#rolManTable";
+
+        let column_defs = [
+            { "targets": [0], "width": "15%", "sortable": true },
+            { "targets": [1], "width": "50%", "sortable": true },
+            { "targets": [2], "width": "20%", "sortable": true },
+            { "targets": [3], "width": "15%", "sortable": true },
+        ];
+
+        let columns = [
+            {
+                "title": "編號",
+                "data": null,
+                "render": function (data, type, row, meta) {
+                    return meta.row + 1;
+                }
+            },
+            {
+                "title": "名稱",
+                "data": "full_name",
+            },
+            {
+                "title": "建立時間",
+                "data": "created_at",
+            },
+            {
+                "title": "功能",
+                "data": "layer",
+                "render": function (data, type, row, meta) {
+                    let btnDiv = creDiv(["row", "m-0", "justify-content-center"], { "style": "gap:10px" });
+                    btnDiv.append(creBtnHtml("修改", "rolManEdiBtn" + data, null, ["btn", "btn-info"]));
+                    btnDiv.append(creBtnHtml("刪除", "rolManDelBtn" + data, null, ["btn", "btn-danger"]));
+                    return btnDiv.outerHtml();
+                }
+            },
+        ];
+
+        let rolManTable = new YourTeam.JqDataTables.getTableByAjax(ajaxObj, tag, null, columns, column_defs);
+    }
+
+    function loadRolAuthTable() {
+        let ajaxObj = {
+            url: baseApiUrl + "/User/RoleAuthList",
+            method: "POST",
+            data: { SelectedRoleId :"882b7e2c-1205-4d7c-81dc-818b8d1c1b33"},
+        }
+        let tag = "#rolAuthTable";
+
+        let column_defs = [
+            { "targets": [0], "width": "6%", "sortable": true },
+            { "targets": [1], "width": "12%", "sortable": true },
+            { "targets": [2], "width": "14%", "sortable": true },
+            { "targets": [3], "width": "12%", "sortable": true },
+            { "targets": [4], "width": "14%", "sortable": true },
+            { "targets": [5], "width": "14%", "sortable": true },
+            { "targets": [6], "width": "14%", "sortable": true },
+            { "targets": [7], "width": "14%", "sortable": true },
+        ];
+
+        let columns = [
+            {
+                "title": "編號",
+                "data": null,
+                "render": function (data, type, row, meta) {
+                    return meta.row + 1;
+                }
+            },
+            {
+                "title": "角色",
+                "data": "role_full_name",
+            },
+            {
+                "title": "功能類型",
+                "data": "authTypeText",
+            },
+            {
+                "title": "區域",
+                "data": "building_full_name",
+            },
+            {
+                "title": "功能名稱",
+                "data": "mainName",
+            },
+            {
+                "title": "功能細項名稱",
+                "data": "subName",
+            },
+            {
+                "title": "建立時間",
+                "data": "created_at",
+            },
+            {
+                "title": "功能",
+                "data": "userinfo_guid",
+                "render": function (data, type, row, meta) {
+                    let btnDiv = creDiv(["row", "m-0", "justify-content-center"], { "style": "gap:10px" });
+                    btnDiv.append(creBtnHtml("刪除", "rolAuthDelBtn", null, ["btn", "btn-danger"]));
+                    return btnDiv.outerHtml();
+                }
+            },
+        ];
+
+        rolAuthTable = new YourTeam.JqDataTables.getTableByAjax(ajaxObj, tag, null, columns, column_defs);
+    }
+
+    function getRoleSel() {
+        
+        let url = baseApiUrl + "/User/RoleManagerList";
+        let sendData = {
+            post:1,
+        };
+        objSendData.Data = sendData;
+        ytAjax = new YourTeam.Ajax(url, objSendData, function (res) {
+            if (!res || res.code != "0000" || !res.data) {
+
+            } else {
+                $("#roleSel").html();
+                $.each(res.data, (index, roleObj) => {
+                    $("#roleSel").append(creOption(roleObj.full_name, roleObj.role_guid));
+                })
+            }
+        }, null, "POST").send();
+    }
+
+    function events() {
+        onEvent("change", "#roleSel", function () {
+            let roleGuid = $(this).val();
+            dtAjaxResetSendData(rolAuthTable, { SelectedRoleId: roleGuid })
+        })
+    }
+</script>

Frontend/_sysMonFloor.html

@@ -4,6 +4,9 @@
     }
 </style>
 
+<div class="row m-0 mb-3">
+    <button id="resChartZoom" class="btn btn-info">圖檔重置</button>
+</div>
 <div class="row">
     <div id="floChart" style="height : 80vh!important;width:100%"></div>
 </div>
@@ -21,6 +24,16 @@
         getFloData();
     })
 
+    onEvent("click", "#resChartZoom", function () {
+        floChart.setOption({
+            geo: {
+                center: null,
+                zoom: 1.2,
+            },
+        });
+        resetData();
+    })
+
     function getFloData() {
         let url = baseApiUrl + "/api/Device/GetDeviceList";
         let sendData = {
@@ -337,7 +350,6 @@
             //     console.log(params)
             // })
             floChart.on('georoam', function (params) {
-
                 var zoom = floChart.getOption().geo[0].zoom;
 
                 if (zoom <= 2.5) {
@@ -562,13 +574,6 @@
 
                 obj.itemStyle = { 'color': item.device_color };
 
-                if (item.selected) {
-                    obj.symbolSize = 60
-                }
-                console.log(item.zoom)
-                if (item.zoom > zoomToggle) {
-                    obj.symbolSize = 10
-                }
                 res.push(obj);
             });
 

Frontend/_systemMonitor.html

@@ -41,7 +41,7 @@
 
     function getFloList() {
         let url = baseApiUrl + "/api/Device/GetFloor";
-        let sendData = { building_tag: pageAct.buiTag };
+        let sendData = { building_tag: pageAct.buiTag, sub_system_tag: pageAct.sysSubTag };
         objSendData.Data = sendData;
         ytAjax = new YourTeam.Ajax(url, objSendData, function (res) {
             if (!res || res.code != "0000" || !res.data) {

Frontend/index.html

@@ -1162,12 +1162,12 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
                             </a>
                         </div>
                         <div class="btn-group mx-4">
-                            <a href="javascript:;" class="dropdown-toggle no-arrow text-center" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                            <a href="javascript:;" class="no-arrow text-center">
                                 <i class="fal fa-image fa-2x"></i><br>圖資管理
                             </a>
                         </div>
                         <div class="btn-group mx-4">
-                            <a href="javascript:;" class="dropdown-toggle no-arrow text-center" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                            <a href="javascript:;" name="topFunBtn" class="no-arrow text-center" data-page="accountManagement">
                                 <i class="fal fa-user fa-2x"></i><br>帳號管理
                             </a>
                         </div>
@@ -2079,7 +2079,6 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
         $(function () {
             getSysMonBtnList();
             getBuiList();
-            /*setBuiAct();*/
         })
 
 
@@ -2098,7 +2097,7 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
             if (actEle) {
                 pageAct.sysMainTag = $(actEle).data("maintag");
                 pageAct.sysSubTag = $(actEle).prop("id").split("subSysBtn")[1];
-                pageAct.sysMainName = $(actEle).text();
+                pageAct.sysSubName = $(actEle).text();
             }
             $(this).trigger("change");
         })

Frontend/js/site.js

@@ -12,6 +12,12 @@ $.fn.droSetItem = function () {
     setDropdownItem(this);
     return this;
 }
+/** 
+ * fn 定義 | 輸出含原元素 html
+ */
+$.fn.outerHtml = function () {
+    return $(this).prop("outerHTML");
+}
 
 /**
  * 設置 bootstrap dropdown 為下拉選單 
@@ -44,6 +50,58 @@ function defDev(obj) {
     obj.src = defSrc;
 }
 
-function creEle(ele,text) {
+function dtAjaxResetSendData(table,sendData) {
-    return $(`<${ele}>${text}</${ele}>`);
+    table.context[0].ajax.data = function (d) {
+        d = sendData;
+        return JSON.stringify(d)
+    }
+}
+
+/**
+ * element 建造 
+ * @param {any} text
+ * @param {any} id
+ * @param {any} name
+ * @param {any} cls
+ * @param {any} data
+ * @param {any} attr
+ */
+function eleBuild(text = null, id = null, name = null, cls = [], data = {}, attr = {}) {
+    cls = cls ?? [], data = data ?? {}, attr = attr ?? {};
+    id = id ? `id="${id}"` : "";
+    name = name ? `name="${name}"` : "";
+    cls = cls.length != 0 ? `class="${cls.join(' ')}"` : "";
+    data = data.length != 0 ? `${Object.keys(data).map(x => `data-${x}="${data[x]}"`).join(" ")}` : "";
+    attr = attr ? `${Object.keys(attr).map(x => `${x}="${attr[x]}"`).join(" ")}` : "";
+    let attrArr = [], attrText = "";
+    attrArr = [id, name, cls, data, attr];
+    attrText = attrArr.filter(x => x != "").join(" ");
+    text = text === null ? "" : text;
+    return { attrText: attrText, text: text };
+}
+
+function creEle(ele, text = null, id = null, name = null, cls = [], data = {}, attr = {}) {
+    let comp = eleBuild(text, id, name, cls, data, attr);
+    return $(`<${ele} ${comp.attrText}>${comp.text}</${ele}>`);
+}
+
+function creDiv(cls = [], attr = {}, id = null, name = null, data = {}, text = null) {
+    return creEle("div", text, id, name, cls, data, attr);
+}
+
+function creBtn(text = null, id = null, name = null, cls = [], data = {}, attr = {}) {
+    return creEle("button", text, id, name, cls, data, attr);
+}
+
+function creBtnHtml(text = null, id = null, name = null, cls = [], data = {}, attr = {}) {
+    return creEle("button", text, id, name, cls, data, attr).prop("outerHTML");
+}
+
+function creSelect(id = null, cls = [], name = null, data = {}, attr = {}, text = null) {
+    return creEle("select", text, id, name, cls, data, attr);
+}
+
+function creOption(text = null, value = null, data = {}, attr = {}, cls = [], name = null, id = null) {
+    attr = value != null ? attr.value = value : attr;
+    return creEle("option", text, id, name, cls, data, attr);
 }

Frontend/js/yourteam/yourteam.jquery.datatables.js

@@ -161,16 +161,27 @@ function fnInitJqDataTablesAjax(apiUrl, tag, sendData = null, columns, columns_d
     }
     let table = null;
     let token = localStorage.getItem("JWT-Authorization");
-   
+    let ajaxMethod = "GET";
+    let ajaxSendData = null;
+    if (typeof apiUrl == "object") {
+        ajaxMethod = apiUrl.method;
+        ajaxSendData = apiUrl.data;
+        apiUrl = apiUrl.url;
+    }
     try {
         let oTable = {
             "ajax": {
-                method: "GET",
+                method: ajaxMethod,
+                data: function (d) {
+                    d = ajaxSendData;
+                    return JSON.stringify(d)
+                },
                 url: apiUrl,
                 /* beforeSend: beforeSend,*/
                 headers: {
                     "Authorization": "Bearer " + token,
                 },
+                contentType: "application/json",
                 cache: true,
                 async:false,
                 dataSrc: sendData,
@@ -198,8 +209,8 @@ function fnInitJqDataTablesAjax(apiUrl, tag, sendData = null, columns, columns_d
             "EmptyTable": true,
             "destroy": true,
             "processing": false,
-            "sDom":'<"toolbar">frtipl',
+            "sDom":'<"toolbar">tipl',
-            "pagingType": "simple",
+            "pagingType": "full_numbers",
             //"responsive": true,
             "autoWidth": true,
             "aoColumns": columns,