新增透明度及顏色

assets/project-colors.js

@@ -0,0 +1,14 @@
+const color = {
+    土地開發: "#A52A2A",
+    公路工程: "#808080",
+    水利工程: "#00FFFF",
+    共同管道: "#FFFF00",
+    災害調查與整治工程: "#FF0000",
+    建築工程: "#FFFFFF",
+    軌道工程: "#800000",
+    能源工程: "#008000",
+    港灣及海事工程: "#0000FF",
+    資訊工程: "#FFA500",
+    機場工程: "#ADD8E6",
+    環境工程: "#00FF00",
+};

assets/stylesheets/skins/default.css

@@ -522,11 +522,11 @@ html .panel-primary .panel-heading {
 }
 /* Treeview */
 .jstree-default .jstree-hovered {
-	background-color: #e6f7ff !important;
+	background-color: #223b68 !important;
 }
 
 .jstree-default .jstree-clicked {
-	background-color: #b3e5ff !important;
+	background-color: #223b68 !important;
 }
 
 .jstree-default .colored {

index.php

@@ -53,9 +53,11 @@ include($_SERVER['DOCUMENT_ROOT'] . "/Authorization/script/php/permission/check_
 	<script src="./script/js/bootstrap.js"></script>
 	<script src="./script/js/pdfobject.min.js"></script>
 	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.4/jstree.min.js"></script>
+	<script src="./assets/project-colors.js"></script>
 	<script src="./script/js/jstreeAJAX.js"></script>
 	<script src="https://js.arcgis.com/4.21/"></script>
 
+
 	<style>
 		html.no-overflowscrolling .nano>.nano-content {
 			overflow: auto;
@@ -273,6 +275,18 @@ include($_SERVER['DOCUMENT_ROOT'] . "/Authorization/script/php/permission/check_
 		#filter-slide {
 			width: 100%;
 		}
+
+		.jstree-default .jstree-wholerow-hovered {
+			background: #223b68;
+			background: -webkit-linear-gradient(top, #223b68 0, #223b68 100%);
+			background: linear-gradient(to bottom, #223b68 0, #223b68 100%);
+		}
+
+		.jstree-default .jstree-wholerow-clicked {
+			background: #223b68;
+			background: -webkit-linear-gradient(top, #223b68 0, #223b68 100%);
+			background: linear-gradient(to bottom, #223b68 0, #223b68 100%);
+		}
 	</style>
 
 	<script>
@@ -376,6 +390,37 @@ include($_SERVER['DOCUMENT_ROOT'] . "/Authorization/script/php/permission/check_
 
 			});
 
+			const typeRenderer = {
+				type: "unique-value",
+				legendOptions: {
+					title: "工程類別"
+				},
+				field: "工程類別",
+				uniqueValueInfos: getUniqueValueInfos()
+			};
+			//getUniqueValueInfos()
+			function getUniqueValueInfos() {
+				var array = [];
+				for (const [key, value] of Object.entries(color)) {
+					let data = JSON.parse(`{
+						"value": "${key}",
+						"label": "${key}",
+						"symbol": {
+							"type": "simple-fill",
+							"color": "${value}",
+							"width": "6px",
+							"style": "solid",
+							"outline": {
+								"color": "#00FFFF",
+								"width": 2
+							}
+						}
+					}`);
+					array.push(data);
+				}
+				return array;
+			}
+
 			var featureLayer = new FeatureLayer({
 
 				url: "https://services3.arcgis.com/W6g8dmWX0ILAHcNd/arcgis/rest/services/%E5%B7%A5%E7%A8%8B%E8%A8%AD%E8%A8%88%E8%B3%87%E6%96%99%E5%BA%AB/FeatureServer",
@@ -383,7 +428,9 @@ include($_SERVER['DOCUMENT_ROOT'] . "/Authorization/script/php/permission/check_
 				//renderer: poleRenderer,
 				title: "工程設計資料庫",
 				elevationInfo: "on-the-ground",
-				visible: true
+				visible: true,
+				opacity: 0.5,
+				renderer: typeRenderer
 			});
 			featureLayer.listMode = "hide";
 			webscene.add(featureLayer);
@@ -432,7 +479,7 @@ include($_SERVER['DOCUMENT_ROOT'] . "/Authorization/script/php/permission/check_
 					dockOptions: {
 						breakpoint: false,
 						buttonEnabled: false,
-						position: "bottom-right",
+						position: "bottom-left",
 					}
 
 				}
@@ -656,21 +703,19 @@ include($_SERVER['DOCUMENT_ROOT'] . "/Authorization/script/php/permission/check_
 			});
 
 			function zoomToLayer(layer) {
-				return layer.queryExtent().then((response) => {
-					console.log(response.extent.height);
-					console.log(response.extent.width);
+				return layer.queryExtent().then((response) => {					
 					var zoom = (response.extent.height > response.extent.width ? response.extent.height : response.extent.width) / 474;
-					console.log(view.zoom);
-
 					view.goTo({
-						target: response.extent,
-						tilt: 0,
-						heading: 0,
-						//zoom: zoom
-					}/*, {
-						speedFactor: 6,
-						easing: "linear"
-					}*/).catch((error) => {
+							target: response.extent,
+							tilt: 0,
+							heading: 0,
+							//zoom: zoom
+						}
+						/*, {
+												speedFactor: 6,
+												easing: "linear"
+											}*/
+					).catch((error) => {
 						console.log("error");
 						console.error(error);
 					}).then(() => {
@@ -727,6 +772,7 @@ include($_SERVER['DOCUMENT_ROOT'] . "/Authorization/script/php/permission/check_
 
 
 
+
 		});
 		var db_table = {};
 		$.ajax({

script/js/jstreeAJAX.js

@@ -30,7 +30,7 @@ $(document).ready(function () {
     var fileNums = [];
     var is_blueprint2 = false;
     PDFObject.embed("./assets/null.pdf", "#pdfFile");
-    addUserImage(userName.charAt(0),role);
+    addUserImage(userName.charAt(0), role);
 
     var table = $('#datatable-ajax').DataTable({
 
@@ -161,7 +161,9 @@ $(document).ready(function () {
         if (projectId != null) {
             $(this).jstree("open_all");
         }
-
+        $('.jstree-anchor').each(function () {
+            $(this).children().css("color",color[$(this).text()]);
+        })
     }).on(
         'select_node.jstree',
         function (event, data) {
@@ -544,7 +546,9 @@ $(document).ready(function () {
             data: {
                 project_id: [''].concat(search_data["project"]),
                 type_id: [''].concat(search_data["type"]),
-                notes_name: [''].concat(search_data["notes"].filter(element => {return element !== undefined;})),
+                notes_name: [''].concat(search_data["notes"].filter(element => {
+                    return element !== undefined;
+                })),
                 search: $("#search-word").val(),
             },
             type: "GET",
@@ -556,16 +560,16 @@ $(document).ready(function () {
             search_output = response;
             search_word = $("#search-word").val();
             filter_base_data = search_data;
-        }).error(function(error) {
+        }).error(function (error) {
             console.log(error);
         });
-        
+
         setTimeout(() => {
             draw_datatable(search_output);
             e.preventDefault();
             $.magnificPopup.close();
 
-            if($("#search-filter").css("display") != "none") {
+            if ($("#search-filter").css("display") != "none") {
                 $("#search-filter").slideUp(200);
                 $("#filter-slide").toggleClass("fa-sort-desc fa-sort-up");
             }
@@ -586,7 +590,9 @@ $(document).ready(function () {
             data: {
                 project_id: [''].concat(search_data["project"]),
                 type_id: [''].concat(search_data["type"]),
-                notes_name: [''].concat(search_data["notes"].filter(element => {return element !== undefined;})),
+                notes_name: [''].concat(search_data["notes"].filter(element => {
+                    return element !== undefined;
+                })),
                 search: $("#search-word").val(),
             },
             type: "GET",
@@ -596,12 +602,12 @@ $(document).ready(function () {
         }).success(function (response) {
             displayDetail(true);
             count = response;
-        }).error(function(error) {
+        }).error(function (error) {
             console.log(error);
         });
 
         search_total_count = count[0]["total"] + count[1]["total"];
-        if(search_total_count > 1000) {
+        if (search_total_count > 1000) {
             $("#keep-search-button").css("display", "inline-block");
             $("#warning-text").css("display", "inline-block");
             $("#advanced-search-button").css("display", "none");
@@ -614,7 +620,9 @@ $(document).ready(function () {
                 data: {
                     project_id: [''].concat(search_data["project"]),
                     type_id: [''].concat(search_data["type"]),
-                    notes_name: [''].concat(search_data["notes"].filter(element => {return element !== undefined;})),
+                    notes_name: [''].concat(search_data["notes"].filter(element => {
+                        return element !== undefined;
+                    })),
                     search: $("#search-word").val(),
                 },
                 type: "GET",
@@ -626,16 +634,16 @@ $(document).ready(function () {
                 search_output = response;
                 search_word = $("#search-word").val();
                 filter_base_data = search_data;
-            }).error(function(error) {
+            }).error(function (error) {
                 console.log(error);
             });
-            
+
             setTimeout(() => {
                 draw_datatable(search_output);
                 e.preventDefault();
                 $.magnificPopup.close();
 
-                if($("#search-filter").css("display") != "none") {
+                if ($("#search-filter").css("display") != "none") {
                     $("#search-filter").slideUp(200);
                     $("#filter-slide").toggleClass("fa-sort-desc fa-sort-up");
                 }
@@ -647,7 +655,7 @@ $(document).ready(function () {
         }
     });
 
-    $("#advancedSearch .panel-body input").on("change", function() {
+    $("#advancedSearch .panel-body input").on("change", function () {
         $("#keep-search-button").css("display", "none");
         $("#warning-text").css("display", "none");
         $("#advanced-search-button").css("display", "inline-block");
@@ -677,7 +685,7 @@ $(document).ready(function () {
         }
     }
 
-    function reset_filter_search_output(){
+    function reset_filter_search_output() {
         output_data = [];
         click_option = get_filter_click("btn-primary");
 
@@ -696,14 +704,14 @@ $(document).ready(function () {
         }).success(function (response) {
             displayDetail(true);
             search_output = response;
-        }).error(function(error) {
+        }).error(function (error) {
             console.log(error);
         });
 
         draw_datatable(search_output);
     }
 
-    function get_filter_click(click_class){
+    function get_filter_click(click_class) {
         click_id_list = {
             "category": [],
             "project": [],
@@ -711,32 +719,32 @@ $(document).ready(function () {
             "notes": []
         };
         check_notes = false;
-        $("#f-category ."+click_class).each(function() {
-            if($(this).css("display") == "inline-block") {
+        $("#f-category ." + click_class).each(function () {
+            if ($(this).css("display") == "inline-block") {
                 click_id_list["category"].push($(this).attr("id").replace("f-c", ""));
             }
         });
-        $("#f-project ."+click_class).each(function() {
-            if($(this).css("display") == "inline-block") {
+        $("#f-project ." + click_class).each(function () {
+            if ($(this).css("display") == "inline-block") {
                 click_id_list["project"].push($(this).attr("id").replace("f-p", ""));
             }
         });
-        $("#f-type ."+click_class).each(function() {
-            if($(this).css("display") == "inline-block") {
+        $("#f-type ." + click_class).each(function () {
+            if ($(this).css("display") == "inline-block") {
                 click_id_list["type"].push($(this).attr("id").replace("f-t", ""));
-                if($(this).attr("id").replace("f-t", "") == "3"){
+                if ($(this).attr("id").replace("f-t", "") == "3") {
                     check_notes = true;
                 }
             }
         });
-        if(check_notes) {
-            $("#f-notes ."+click_class).each(function() {
-                if($(this).css("display") == "inline-block") {
+        if (check_notes) {
+            $("#f-notes ." + click_class).each(function () {
+                if ($(this).css("display") == "inline-block") {
                     click_id_list["notes"].push($(this).text());
                 }
             });
         }
-        
+
         return click_id_list;
     }
 
@@ -754,15 +762,15 @@ $(document).ready(function () {
         filter_base_data["type"].forEach(element => {
             id = "f-t" + element;
             $("#" + id).css("display", "inline-block");
-            if(element == "3"){
+            if (element == "3") {
                 show_notes = true;
             }
         });
-        if(show_notes) {
+        if (show_notes) {
             $("#filter_notes").css("display", "block");
             filter_base_data["notes"].forEach(element => {
-                $("#f-notes button").each(function() {
-                    if($(this).text() == element) {
+                $("#f-notes button").each(function () {
+                    if ($(this).text() == element) {
                         $(this).css("display", "inline-block");
                     }
                 });
@@ -773,24 +781,26 @@ $(document).ready(function () {
     }
 
     var progress_bar_value = 0;
+
     function update_progress_bar() {
-        var i=0;
+        var i = 0;
         if (i == 0) {
-          i = 1;
-          var id = setInterval(frame, 10);
-          function frame() {
-            if (progress_bar_value >= 100) {
-              clearInterval(id);
-              i = 0;
-            } else {
-              $("#progress-bars").css("width", progress_bar_value+"%");
+            i = 1;
+            var id = setInterval(frame, 10);
+
+            function frame() {
+                if (progress_bar_value >= 100) {
+                    clearInterval(id);
+                    i = 0;
+                } else {
+                    $("#progress-bars").css("width", progress_bar_value + "%");
+                }
             }
-          }
         }
-      }
+    }
 
     function show_progress_bar(show) {
-        if(show) {
+        if (show) {
             $("#advanced-search-button-group").css("display", "none");
             $("#loading").css("display", "block");
             // $("#progress-bars").parent().css("display", "block");
@@ -800,54 +810,54 @@ $(document).ready(function () {
             // $("#progress-bars").parent().css("display", "none");
         }
     }
-    
+
     $("#search-filter-panel").hoverIntent({
-        sensitivity: 50,  
-        interval: 200,  
-        over: function( e ) {
-                $("#search-filter").slideDown(200);
-                $("#filter-slide").toggleClass("fa-sort-desc fa-sort-up")
-            },
+        sensitivity: 50,
+        interval: 200,
+        over: function (e) {
+            $("#search-filter").slideDown(200);
+            $("#filter-slide").toggleClass("fa-sort-desc fa-sort-up")
+        },
         timeout: 200,
-        out: function( e ) {
-                $("#search-filter").slideUp(200);
-                $("#filter-slide").toggleClass("fa-sort-desc fa-sort-up")
-            }
+        out: function (e) {
+            $("#search-filter").slideUp(200);
+            $("#filter-slide").toggleClass("fa-sort-desc fa-sort-up")
+        }
     });
 
     $("#search-filter-panel button").on("click", function (e) {
         $(this).toggleClass("btn-primary btn-default");
 
         click_option = get_filter_click("btn-primary");
-        if(click_option["category"].length>0 && click_option["project"].length>0 && click_option["type"].length>0) {
+        if (click_option["category"].length > 0 && click_option["project"].length > 0 && click_option["type"].length > 0) {
             reset_filter_search_output();
         } else {
             table.clear().draw();
         }
     });
 
-    $("#f-category button").on("click", function() {
+    $("#f-category button").on("click", function () {
         c_id = $(this).attr("id").replace("f-c", "");
 
         sub_project_list = [];
         db_table["project"].forEach(element => {
-            if(element["category_id"] == c_id) {
+            if (element["category_id"] == c_id) {
                 sub_project_list.push(element["project_id"]);
             }
         });
         sub_project_list.forEach(element => {
-            if($(this).hasClass("btn-primary")) {
-                if($("#f-p" + element).hasClass("btn-default")){
+            if ($(this).hasClass("btn-primary")) {
+                if ($("#f-p" + element).hasClass("btn-default")) {
                     $("#f-p" + element).toggleClass("btn-primary btn-default");
                 }
             } else {
-                if($("#f-p" + element).hasClass("btn-primary")){
+                if ($("#f-p" + element).hasClass("btn-primary")) {
                     $("#f-p" + element).toggleClass("btn-primary btn-default");
                 }
             }
 
             click_option = get_filter_click("btn-primary");
-            if(click_option["category"].length == 0) {
+            if (click_option["category"].length == 0) {
                 table.clear().draw();
             }
         });
@@ -855,10 +865,10 @@ $(document).ready(function () {
         reset_filter_search_output();
     });
 
-    $("#f-type button").on("click", function() {
+    $("#f-type button").on("click", function () {
         t_id = $(this).attr("id").replace("f-t", "");
-        if(t_id == "3") {
-            if($(this).hasClass("btn-default")) {
+        if (t_id == "3") {
+            if ($(this).hasClass("btn-default")) {
                 $("#filter_notes").css("display", "none");
                 $("#f-notes .btn-default").toggleClass("btn-primary btn-default");
             } else {
@@ -866,4 +876,6 @@ $(document).ready(function () {
             }
         }
     });
+
+
 });