新增校園相機

This commit is contained in:
威勝 張 2024-02-15 12:46:39 +08:00
parent 8c3fd0caff
commit f6bc0a837a
2 changed files with 304 additions and 7 deletions

View File

@ -99,7 +99,8 @@
<h6 class="m-0 font-weight-bold text-primary">即時影像</h6> <h6 class="m-0 font-weight-bold text-primary">即時影像</h6>
</div> </div>
<div class="card-body"> <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 />
<br /> <br />
<div id="myMap"></div> <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> </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>
<!--關閉串流--> <!--關閉串流-->
<script> <script>
function RTSP_Close() { function RTSP_Close() {
RTSP_view.close() RTSP_view.close()
img = document.getElementById("img_id")
img.src = ''
stop = true stop = true
} }
</script> </script>
@ -708,6 +761,14 @@
}).addTo(map); }).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', { L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
@ -723,16 +784,28 @@
lng = e.latlng.lng; // 經度 lng = e.latlng.lng; // 經度
////console.log(lat, lng) ////console.log(lat, lng)
//自己的
for (var i = 0; i < location_name_list.length; i++) { for (var i = 0; i < location_name_list.length; i++) {
var location = [location_lat_list[i], location_lng_list[i]]; var location = [location_lat_list[i], location_lng_list[i]];
if (isDifferenceGreaterThan5Percent(location[0], lat) < 3 && isDifferenceGreaterThan5Percent(location[1], lng) < 3) { if (isDifferenceGreaterThan5Percent(location[0], lat) < 3 && isDifferenceGreaterThan5Percent(location[1], lng) < 3) {
////console.log() //console.log()
get_RTSP_data_3(location_name_list[i]) get_RTSP_data_3(location_name_list[i])
//CAM_RTSP('192.168.100.82') //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_lat_list = []
var location_lng_list = [] var location_lng_list = []
var Y_location_name_list = []
var Y_location_lat_list = []
var Y_location_lng_list = []
function get_RTSP_data() { function get_RTSP_data() {
//token_check = document.getElementById("token_check_id").value //token_check = document.getElementById("token_check_id").value
@ -791,11 +868,29 @@
contentType: "application/json", contentType: "application/json",
success: function (Model) { success: function (Model) {
set_RTSP_data_2(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 var location_name
function get_RTSP_data_3(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> </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) { function set_RTSP_data_3(Model, location_name) {
Button = '<button class="btn btn-outline-success " onclick="CAM_RTSP('; Button = '<button class="btn btn-outline-success " onclick="CAM_RTSP(';
var i1 = 0 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> </script>

View File

@ -34,8 +34,9 @@
</style> </style>
<h1>即時影像</h1> <h1>即時影像</h1>
<!--
<button class="btn btn-outline-info" onclick="Yuntech_RTSP()">雲科即時影像</button> <button class="btn btn-outline-info" onclick="Yuntech_RTSP()">雲科即時影像</button>
-->
<div> <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> </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>
<!--關閉串流--> <!--關閉串流-->
<script> <script>
function RTSP_Close() { function RTSP_Close() {
RTSP_view.close() RTSP_view.close()
img = document.getElementById("img_id")
img.src = ''
stop = true stop = true
} }
</script> </script>
@ -136,7 +191,6 @@
var map var map
function map_show() { function map_show() {
var centerCoordinates = [23.691951, 120.535318]; // Replace with your desired coordinates var centerCoordinates = [23.691951, 120.535318]; // Replace with your desired coordinates
map = L.map("myMap", { map = L.map("myMap", {
center: centerCoordinates, center: centerCoordinates,
zoom: 17 zoom: 17
@ -159,6 +213,15 @@
}).addTo(map); }).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', { L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
@ -172,8 +235,8 @@
function onMapClick(e) { function onMapClick(e) {
lat = e.latlng.lat; // 緯度 lat = e.latlng.lat; // 緯度
lng = e.latlng.lng; // 經度 lng = e.latlng.lng; // 經度
//console.log(lat, lng)
//自己的
for (var i = 0; i < location_name_list.length; i++) { for (var i = 0; i < location_name_list.length; i++) {
var location = [location_lat_list[i], location_lng_list[i]]; var location = [location_lat_list[i], location_lng_list[i]];
if (isDifferenceGreaterThan5Percent(location[0], lat) < 3 && isDifferenceGreaterThan5Percent(location[1], lng) < 3) { 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_lat_list=[]
var location_lng_list=[] var location_lng_list=[]
var Y_location_name_list = []
var Y_location_lat_list = []
var Y_location_lng_list = []
function get_data() { function get_data() {
//token_check = document.getElementById("token_check_id").value //token_check = document.getElementById("token_check_id").value
@ -242,6 +320,25 @@
contentType: "application/json", contentType: "application/json",
success: function (Model) { success: function (Model) {
set_data_2(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() map_show()
} }
}); });
@ -268,6 +365,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> </script>
@ -300,6 +416,19 @@
} }
}
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)
}
}
} }
@ -326,6 +455,27 @@
} }
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> </script>