新增校園相機

Parking_spaces/Views/Engineering/Engineering_Index.cshtml

@@ -99,7 +99,8 @@
                 <h6 class="m-0 font-weight-bold text-primary">即時影像</h6>
             </div>
             <div class="card-body">
-                <button class="btn btn-outline-info" onclick="Yuntech_RTSP()">雲科即時影像</button>
+                <!--
+                <button class="btn btn-outline-info" onclick="Yuntech_RTSP()">雲科即時影像</button>-->
                 <br />
                 <br />
                 <div id="myMap"></div>
@@ -656,6 +657,47 @@
 
         });
     }
+    function CAM_RTSP_2(IP) {
+        console.log(IP)
+        IP_1 = IP
+        $.ajax({
+            type: "GET",
+            url: 'http://140.125.50.178:5000/IP/' + IP,
+            headers: {
+                'Authorization': token
+            },
+            success: function (response) {
+                stop = false
+                RTSP_START_2(response)
+                token_check = "true"
+                //from_token_import_id()
+            },
+            error: function (xhr) {
+                console.log("111")
+                window.alert("相機未連線");
+            }
+
+        });
+    }
+
+    function CAM_RTSP_3() {
+        console.log(IP_1)
+        $.ajax({
+            type: "GET",
+            url: 'http://140.125.50.178:5000/IP/' + IP_1,
+            headers: {
+                'Authorization': token
+            },
+            success: function (response) {
+                //webcam_view.showModal()
+                RTSP_START_2(response)
+
+                token_check = "true"
+                //from_token_import_id()
+            },
+
+        });
+    }
 </script>
 
 
@@ -670,12 +712,23 @@
         }
 
     }
+    function RTSP_START_2(img_base_64) {
+        //console.log(img)
+        img = document.getElementById("img_id")
+        img.src = img_base_64
+        if (stop == false) {
+            setTimeout('CAM_RTSP_3()', 20);
+        }
+
+    }
 </script>
 
 <!--關閉串流-->
 <script>
     function RTSP_Close() {
         RTSP_view.close()
+        img = document.getElementById("img_id")
+        img.src = ''
         stop = true
     }
 </script>
@@ -708,6 +761,14 @@
             }).addTo(map);
         };
 
+        for (var i = 0; i < Y_location_name_list.length; i++) {
+            var location = [Y_location_lat_list[i], Y_location_lng_list[i]];
+            cam_ip = L.marker(location, {
+                icon: cam_icon,
+                title: "",
+                opacity: 1.0
+            }).addTo(map);
+        };
 
         // 載入圖資
         L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
@@ -723,16 +784,28 @@
             lng = e.latlng.lng; // 經度
             ////console.log(lat, lng)
 
+            //自己的
             for (var i = 0; i < location_name_list.length; i++) {
                 var location = [location_lat_list[i], location_lng_list[i]];
                 if (isDifferenceGreaterThan5Percent(location[0], lat) < 3 && isDifferenceGreaterThan5Percent(location[1], lng) < 3) {
-                    ////console.log()
+                    //console.log()
                     get_RTSP_data_3(location_name_list[i])
                     //CAM_RTSP('192.168.100.82')
                 }
 
             };
 
+            //雲科校園的
+            for (var i = 0; i < Y_location_name_list.length; i++) {
+                var location = [Y_location_lat_list[i], Y_location_lng_list[i]];
+                if (isDifferenceGreaterThan5Percent(location[0], lat) < 3 && isDifferenceGreaterThan5Percent(location[1], lng) < 3) {
+                    //console.log()
+                    get_RTSP_data_5(Y_location_name_list[i])
+                    //CAM_RTSP('192.168.100.82')
+                }
+
+            };
+
 
         }
 
@@ -760,6 +833,10 @@
     var location_lat_list = []
     var location_lng_list = []
 
+    var Y_location_name_list = []
+    var Y_location_lat_list = []
+    var Y_location_lng_list = []
+
     function get_RTSP_data() {
         //token_check = document.getElementById("token_check_id").value
 
@@ -791,11 +868,29 @@
             contentType: "application/json",
             success: function (Model) {
                 set_RTSP_data_2(Model)
-                map_show()
+                get_RTSP_data_4()
             }
         });
     }
 
+    function get_RTSP_data_4() {
+        //token_check = document.getElementById("token_check_id").value
+
+        $.ajax({
+            type: "GET",
+            url: "http://140.125.20.183:7700/api/Yuntech_cam_total_table",
+            data: {},
+            headers: {
+                'Authorization': token
+            },
+            contentType: "application/json",
+            success: function (Model) {
+                console.log(Model)
+                set_RTSP_data_4(Model)
+                map_show()
+            }
+        });
+    }
 
     var location_name
     function get_RTSP_data_3(location_name) {
@@ -817,6 +912,25 @@
         });
     }
 
+    function get_RTSP_data_5(location_name) {
+        location_name = location_name
+        $.ajax({
+            type: "GET",
+            url: "http://140.125.20.183:7700/api/Yuntech_cam",
+            data: {},
+            headers: {
+                'Authorization': token
+            },
+            contentType: "application/json",
+            success: function (Model) {
+                console.log(location_name)
+                set_RTSP_data_5(Model, location_name)
+
+
+            }
+        });
+    }
+
 
 </script>
 
@@ -852,6 +966,20 @@
 
     }
 
+    function set_RTSP_data_4(Model) {
+        for (var i = 0; i < Model.length; i++) {
+
+            var hasValue = Y_location_name_list.includes(Model[i].location_name);
+            if (hasValue == false) {
+                Y_location_name_list.push(Model[i].location_name)
+                Y_location_lat_list.push(Model[i].latitude)
+                Y_location_lng_list.push(Model[i].longitude)
+            }
+
+        }
+
+    }
+
     function set_RTSP_data_3(Model, location_name) {
         Button = '<button class="btn btn-outline-success " onclick="CAM_RTSP(';
         var i1 = 0
@@ -875,7 +1003,26 @@
 
     }
 
+    function set_RTSP_data_5(Model, location_name) {
+        Button = '<button class="btn btn-outline-success " onclick="CAM_RTSP_2(';
+        var i1 = 0
+        if (Model.length > 0) {
+            for (var i = 0; i < Model.length; i++) {
+                if (Model[i].location_name == location_name) {
+                    i1 = i1 + 1
+                    console.log(Model[i].ip)
+                    Button += "'" + Model[i].ip + "'" + ')">' + Model[i].ip + '</button>'
+                    Button += '<button class="btn btn-outline-success " onclick="CAM_RTSP_2(';
+                    if (i1 == 1) {
+                        CAM_RTSP_2(Model[i].ip)
+                    }
+                }
+            }
+        }
+        document.getElementById("choose_cam_id").innerHTML = Button
+        RTSP_view.showModal()
 
+    }
 </script>
 
 

Parking_spaces/Views/Engineering/Map_RTSP.cshtml

@@ -34,8 +34,9 @@
 </style>
 
 <h1>即時影像</h1>
+<!--
 <button class="btn btn-outline-info" onclick="Yuntech_RTSP()">雲科即時影像</button>
-
+-->
 
 
 <div>
@@ -107,6 +108,48 @@
 
         });
     }
+
+    function CAM_RTSP_2(IP) {
+        console.log(IP)
+        IP_1 = IP
+        $.ajax({
+            type: "GET",
+            url: 'http://140.125.50.178:5000/IP/' + IP,
+            headers: {
+                'Authorization': token
+            },
+            success: function (response) {
+                stop = false
+                RTSP_START_2(response)
+                token_check = "true"
+                //from_token_import_id()
+            },
+            error: function (xhr) {
+                console.log("111")
+                window.alert("相機未連線");
+            }
+
+        });
+    }
+
+    function CAM_RTSP_3() {
+        console.log(IP_1)
+        $.ajax({
+            type: "GET",
+            url: 'http://140.125.50.178:5000/IP/' + IP_1,
+            headers: {
+                'Authorization': token
+            },
+            success: function (response) {
+                //webcam_view.showModal()
+                RTSP_START_2(response)
+
+                token_check = "true"
+                //from_token_import_id()
+            },
+
+        });
+    }
 </script>
 
 
@@ -121,12 +164,24 @@
         }
 
     }
+
+    function RTSP_START_2(img_base_64) {
+        //console.log(img)
+        img = document.getElementById("img_id")
+        img.src = img_base_64
+        if (stop == false) {
+            setTimeout('CAM_RTSP_3()', 20);
+        }
+
+    }
 </script>
 
 <!--關閉串流-->
 <script>
     function RTSP_Close() {
         RTSP_view.close()
+        img = document.getElementById("img_id")
+        img.src = ''
         stop = true
     }
 </script>
@@ -136,7 +191,6 @@
     var map
     function map_show() {
         var centerCoordinates = [23.691951, 120.535318]; // Replace with your desired coordinates
-
         map = L.map("myMap", {
             center: centerCoordinates,
             zoom: 17
@@ -158,6 +212,15 @@
                 opacity: 1.0
             }).addTo(map);
         };
+
+        for (var i = 0; i < Y_location_name_list.length; i++) {
+            var location = [Y_location_lat_list[i], Y_location_lng_list[i]];
+            cam_ip = L.marker(location, {
+                icon: cam_icon,
+                title: "",
+                opacity: 1.0
+            }).addTo(map);
+        };
         
 
         // 載入圖資
@@ -172,8 +235,8 @@
         function onMapClick(e) {
             lat = e.latlng.lat; // 緯度
             lng = e.latlng.lng; // 經度
-            //console.log(lat, lng)
 
+            //自己的
             for (var i = 0; i < location_name_list.length; i++) {
                 var location = [location_lat_list[i], location_lng_list[i]];
                 if (isDifferenceGreaterThan5Percent(location[0], lat) < 3 && isDifferenceGreaterThan5Percent(location[1], lng) < 3) {
@@ -184,6 +247,17 @@
 
             };
 
+            //雲科校園的
+            for (var i = 0; i < Y_location_name_list.length; i++) {
+                var location = [Y_location_lat_list[i], Y_location_lng_list[i]];
+                if (isDifferenceGreaterThan5Percent(location[0], lat) < 3 && isDifferenceGreaterThan5Percent(location[1], lng) < 3) {
+                    //console.log()
+                    get_data_5(Y_location_name_list[i])
+                    //CAM_RTSP('192.168.100.82')
+                }
+
+            };
+
 
         }
 
@@ -211,6 +285,10 @@
     var location_lat_list=[]
     var location_lng_list=[]
 
+    var Y_location_name_list = []
+    var Y_location_lat_list = []
+    var Y_location_lng_list = []
+
     function get_data() {
         //token_check = document.getElementById("token_check_id").value
 
@@ -242,6 +320,25 @@
             contentType: "application/json",
             success: function (Model) {
                 set_data_2(Model)
+                get_data_4()
+            }
+        });
+    }
+
+    function get_data_4() {
+        //token_check = document.getElementById("token_check_id").value
+
+        $.ajax({
+            type: "GET",
+            url: "http://140.125.20.183:7700/api/Yuntech_cam_total_table",
+            data: {},
+            headers: {
+                'Authorization': token
+            },
+            contentType: "application/json",
+            success: function (Model) {
+                console.log(Model)
+                set_data_4(Model)
                 map_show()
             }
         });
@@ -267,6 +364,25 @@
             }
         });
     }
+
+    function get_data_5(location_name) {
+        location_name = location_name
+        $.ajax({
+            type: "GET",
+            url: "http://140.125.20.183:7700/api/Yuntech_cam",
+            data: {},
+            headers: {
+                'Authorization': token
+            },
+            contentType: "application/json",
+            success: function (Model) {
+                console.log(location_name)
+                set_data_5(Model, location_name)
+
+
+            }
+        });
+    }
     
 
 </script>
@@ -299,10 +415,23 @@
             }
 
         }
-
         
     }
 
+    function set_data_4(Model) {
+        for (var i = 0; i < Model.length; i++) {
+
+            var hasValue = Y_location_name_list.includes(Model[i].location_name);
+            if (hasValue == false) {
+                Y_location_name_list.push(Model[i].location_name)
+                Y_location_lat_list.push(Model[i].latitude)
+                Y_location_lng_list.push(Model[i].longitude)
+            }
+
+        }
+
+    }
+
     function set_data_3(Model, location_name) {
         Button = '<button class="btn btn-outline-success " onclick="CAM_RTSP(';
         var i1=0
@@ -325,6 +454,27 @@
         RTSP_view.showModal()
 
     }
+
+    function set_data_5(Model, location_name) {
+        Button = '<button class="btn btn-outline-success " onclick="CAM_RTSP_2(';
+        var i1 = 0
+        if (Model.length > 0) {
+            for (var i = 0; i < Model.length; i++) {
+                if (Model[i].location_name == location_name) {
+                    i1 = i1 + 1
+                    console.log(Model[i].ip)
+                    Button += "'" + Model[i].ip + "'" + ')">' + Model[i].ip +  '</button>'
+                    Button += '<button class="btn btn-outline-success " onclick="CAM_RTSP_2(';
+                    if (i1 == 1) {
+                        CAM_RTSP_2(Model[i].ip )
+                    }
+                }
+            }
+        }
+        document.getElementById("choose_cam_id").innerHTML = Button
+        RTSP_view.showModal()
+
+    }
     
 
 </script>