1386 lines
53 KiB
Plaintext
1386 lines
53 KiB
Plaintext
|
@{
|
||
|
|
ViewData["Title"] = "Engineering_CAM_detail";
|
||
|
|
Layout = "~/Views/Shared/_Layout_Engineering.cshtml";
|
||
|
|
string parking_spaces_name = ViewBag.parking_spaces_name;
|
||
|
|
string ip = ViewBag.ip;
|
||
|
|
string port = ViewBag.port;
|
||
|
|
}
|
||
|
|
<input type="hidden" id="parking_spaces_name_id" value=@parking_spaces_name />
|
||
|
|
<input type="hidden" id="ip_id" value=@ip />
|
||
|
|
<input type="hidden" id="port_id" value=@port />
|
||
|
|
|
||
|
|
<h1>@parking_spaces_name - @ip:@port</h1>
|
||
|
|
|
||
|
|
<!--
|
||
|
|
<style>
|
||
|
|
#img_parking_spaces_id {
|
||
|
|
position: absolute;
|
||
|
|
top: 20%;
|
||
|
|
left: 10%;
|
||
|
|
width: 80%
|
||
|
|
}
|
||
|
|
|
||
|
|
#myCanvas {
|
||
|
|
position: absolute;
|
||
|
|
top: 20%;
|
||
|
|
left: 10%;
|
||
|
|
width: 80%
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
-->
|
||
|
|
<div>
|
||
|
|
<p id="url_id"></p>
|
||
|
|
<p id="ptz_id"></p>
|
||
|
|
|
||
|
|
<button style="display:none " class="btn btn-outline-success" onclick="put_license_plate_roi_1()" id="put_license_plate_roi_id">更新</button>
|
||
|
|
<button style="display:none " class="btn btn-outline-success" onclick="post_license_plate_roi_1()" id="post_license_plate_roi_id">新增</button>
|
||
|
|
<button style="display:none " class="btn btn-outline-success" onclick="put_violation_roi_1()" id="put_violation_roi_id">更新</button>
|
||
|
|
<button style="display:none " class="btn btn-outline-success" onclick="post_violation_roi_1()" id="post_violation_roi_id">新增</button>
|
||
|
|
<button style="display:none " class="btn btn-outline-success" onclick="put_normal_roi_1()" id="put_normal_roi_id">更新</button>
|
||
|
|
<button style="display:none " class="btn btn-outline-success" onclick="post_normal_plate_roi_1()" id="post_normal_roi_id">新增</button>
|
||
|
|
<!--<canvas id="myCanvas" width="640" style="z-index: 0; position:absolute"></canvas>
|
||
|
|
<img id="img_parking_spaces_id" width="640" style="z-index: 0; position: absolute;">-->
|
||
|
|
<div>
|
||
|
|
<img id="img_parking_spaces_id" style="display:none" />
|
||
|
|
<canvas id="myCanvas" style="width:80%"></canvas>
|
||
|
|
<div id="buttom_id"></div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
<!--獲取資料-->
|
||
|
|
<script>
|
||
|
|
var token = localStorage.getItem('token_park_space');
|
||
|
|
var parking_spaces_name = document.getElementById("parking_spaces_name_id").value
|
||
|
|
var rtsp_url
|
||
|
|
const canvas = document.getElementById("myCanvas");
|
||
|
|
const ctx = canvas.getContext("2d");
|
||
|
|
var token_ckeck //確認token
|
||
|
|
var position //職位
|
||
|
|
var serial_num_choose
|
||
|
|
|
||
|
|
var rtsp_url
|
||
|
|
var mode
|
||
|
|
//獲取此台相機相關PORT
|
||
|
|
function get_data() {
|
||
|
|
//token_check = document.getElementById("token_check_id").value
|
||
|
|
console.log(parking_spaces_name)
|
||
|
|
$.ajax({
|
||
|
|
type: "GET",
|
||
|
|
url: "http://140.125.20.183:7700/api/Parking_spaces_cam/parking_spaces_name-" + parking_spaces_name,
|
||
|
|
data: {},
|
||
|
|
headers: {
|
||
|
|
'Authorization': token
|
||
|
|
},
|
||
|
|
contentType: "application/json",
|
||
|
|
success: function (Model) {
|
||
|
|
console.log(Model)
|
||
|
|
for (var i = 0; i < Model.length; i++) {
|
||
|
|
if (@port == Model[i]['port']) {
|
||
|
|
set_model_1(Model[i])
|
||
|
|
mode = Model[i].mode
|
||
|
|
rtsp_url = Model[i].url
|
||
|
|
}
|
||
|
|
}
|
||
|
|
//set_model_1(Model[0])
|
||
|
|
console.log(mode)
|
||
|
|
get_cam_ptz_data()
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
//獲取此台相機相關PTZ
|
||
|
|
function get_cam_ptz_data() {
|
||
|
|
if (mode == "pass") {
|
||
|
|
$.ajax({
|
||
|
|
type: "GET",
|
||
|
|
url: "http://140.125.20.183:7700/api/Parking_spaces_cam_ptz_pass/parking_spaces_name-" + parking_spaces_name,
|
||
|
|
data: {},
|
||
|
|
headers: {
|
||
|
|
'Authorization': token
|
||
|
|
},
|
||
|
|
contentType: "application/json",
|
||
|
|
success: function (Model) {
|
||
|
|
console.log(Model)
|
||
|
|
for (var i = 0; i < Model.length; i++) {
|
||
|
|
if (rtsp_url == Model[i]['rtsp_url']) {
|
||
|
|
set_model_2(Model[i])
|
||
|
|
}
|
||
|
|
}
|
||
|
|
//set_model_2(Model[0])
|
||
|
|
get_data_3()
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
if (mode == "car_num_check") {
|
||
|
|
$.ajax({
|
||
|
|
type: "GET",
|
||
|
|
url: "http://140.125.20.183:7700/api/Parking_spaces_cam_ptz_car_num_check/parking_spaces_name-" + parking_spaces_name,
|
||
|
|
data: {},
|
||
|
|
headers: {
|
||
|
|
'Authorization': token
|
||
|
|
},
|
||
|
|
contentType: "application/json",
|
||
|
|
success: function (Model) {
|
||
|
|
console.log(Model)
|
||
|
|
for (var i = 0; i < Model.length; i++) {
|
||
|
|
if (rtsp_url == Model[i]['rtsp_url']) {
|
||
|
|
set_model_2(Model[i])
|
||
|
|
console.log(Model[i])
|
||
|
|
}
|
||
|
|
}
|
||
|
|
//set_model_2(Model[0])
|
||
|
|
get_data_3()
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
if (mode == "violation") {
|
||
|
|
$.ajax({
|
||
|
|
type: "GET",
|
||
|
|
url: "http://140.125.20.183:7700/api/Parking_spaces_cam_ptz_violation/parking_spaces_name-" + parking_spaces_name,
|
||
|
|
data: {},
|
||
|
|
headers: {
|
||
|
|
'Authorization': token
|
||
|
|
},
|
||
|
|
contentType: "application/json",
|
||
|
|
success: function (Model) {
|
||
|
|
console.log(Model)
|
||
|
|
for (var i = 0; i < Model.length; i++) {
|
||
|
|
if (rtsp_url == Model[i]['rtsp_url']) {
|
||
|
|
set_model_2(Model[i])
|
||
|
|
console.log(Model[i])
|
||
|
|
}
|
||
|
|
}
|
||
|
|
//set_model_2(Model[0])
|
||
|
|
get_data_3()
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
function get_data_3() {
|
||
|
|
if (mode == "pass") {
|
||
|
|
$.ajax({
|
||
|
|
type: "GET",
|
||
|
|
url: "http://140.125.20.183:7700/api/Parking_spaces_roi_pass/" + parking_spaces_name,
|
||
|
|
data: {},
|
||
|
|
headers: {
|
||
|
|
'Authorization': token
|
||
|
|
},
|
||
|
|
contentType: "application/json",
|
||
|
|
success: function (Model) {
|
||
|
|
set_model_3(Model)
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
if (mode == "car_num_check") {
|
||
|
|
$.ajax({
|
||
|
|
type: "GET",
|
||
|
|
url: "http://140.125.20.183:7700/api/Parking_spaces_roi_car_num_check/parking_spaces_name-" + parking_spaces_name,
|
||
|
|
data: {},
|
||
|
|
headers: {
|
||
|
|
'Authorization': token
|
||
|
|
},
|
||
|
|
contentType: "application/json",
|
||
|
|
success: function (Model) {
|
||
|
|
//console.log(Model)
|
||
|
|
set_model_3(Model)
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
if (mode == "violation") {
|
||
|
|
$.ajax({
|
||
|
|
type: "GET",
|
||
|
|
url: "http://140.125.20.183:7700/api/Parking_spaces_roi_violation/parking_spaces_name-" + parking_spaces_name,
|
||
|
|
data: {},
|
||
|
|
headers: {
|
||
|
|
'Authorization': token
|
||
|
|
},
|
||
|
|
contentType: "application/json",
|
||
|
|
success: function (Model) {
|
||
|
|
//console.log(Model)
|
||
|
|
set_model_3(Model)
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<!--放置資料-->
|
||
|
|
<script>
|
||
|
|
function set_model_1(Model) {
|
||
|
|
Text = "IP : " + Model.ip + " 帳號 : " + Model.user_name + " 密碼 : " + Model.password + "<br>"
|
||
|
|
rtsp_url = Model.url
|
||
|
|
Text += "RTSP串流URL : " + Model.url + "<br>"
|
||
|
|
Text += "控制相機PORT : " + Model.http_port + "<a href='" + "http://" + Model.ip + ":" + Model.http_port + "'" + "target='_blank'" + "> 前往控制頁面</a>"
|
||
|
|
document.getElementById("url_id").innerHTML = Text
|
||
|
|
}
|
||
|
|
|
||
|
|
var ptz_view = ""
|
||
|
|
function set_model_2(Model) {
|
||
|
|
if (mode == "pass") {
|
||
|
|
img_parking_spaces = document.getElementById("img_parking_spaces_id")
|
||
|
|
img_parking_spaces.src = Model.img
|
||
|
|
const canvas = document.getElementById("myCanvas");
|
||
|
|
canvas.style.width = "80%"
|
||
|
|
document.getElementById("ptz_id").innerHTML = "此畫面的相機PTZ參數 -" + " Pan : " + Model.pan + " Titl : " + Model.titl + " Zoom : " + Model.zoom
|
||
|
|
}
|
||
|
|
if (mode == "car_num_check") {
|
||
|
|
img_parking_spaces = document.getElementById("img_parking_spaces_id")
|
||
|
|
img_parking_spaces.src = Model.img
|
||
|
|
const canvas = document.getElementById("myCanvas");
|
||
|
|
canvas.style.width = "80%"
|
||
|
|
serial_num_choose = Model.serial_num
|
||
|
|
ptz_view += '<button class="btn btn-success " onclick="ROI_choose(' + Model.serial_num + ')">ROI-' + Model.serial_num + '</button> '
|
||
|
|
document.getElementById("ptz_id").innerHTML = ptz_view + "此畫面的相機PTZ參數 -" + " Pan : " + Model.pan + " Titl : " + Model.titl + " Zoom : " + Model.zoom
|
||
|
|
}
|
||
|
|
if (mode == "violation") {
|
||
|
|
img_parking_spaces = document.getElementById("img_parking_spaces_id")
|
||
|
|
img_parking_spaces.src = Model.img
|
||
|
|
const canvas = document.getElementById("myCanvas");
|
||
|
|
canvas.style.width = "80%"
|
||
|
|
serial_num_choose = Model.serial_num
|
||
|
|
|
||
|
|
document.getElementById("ptz_id").innerHTML = "此畫面的相機PTZ參數 -" + " Pan : " + Model.pan + " Titl : " + Model.titl + " Zoom : " + Model.zoom
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
function set_model_3(Model) {
|
||
|
|
if (mode == "pass") {
|
||
|
|
// 获取图像元素和Canvas元素
|
||
|
|
const img = document.getElementById("img_parking_spaces_id");
|
||
|
|
//const canvas = document.getElementById("myCanvas");
|
||
|
|
//const ctx = canvas.getContext("2d");
|
||
|
|
//console.log(img.width)
|
||
|
|
//console.log(img.height)
|
||
|
|
// 将图像绘制到Canvas上
|
||
|
|
canvas.width = img.width;
|
||
|
|
canvas.height = img.height;
|
||
|
|
ctx.drawImage(img, 0, 0);
|
||
|
|
|
||
|
|
for (var i = 0; i < Model.length; i++) {
|
||
|
|
if (rtsp_url == Model[i]['cam_ip']) {
|
||
|
|
console.log(Model[i])
|
||
|
|
draw_box(Model[i])
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
document.getElementById("buttom_id").innerHTML = button_view
|
||
|
|
}
|
||
|
|
|
||
|
|
if (mode == "car_num_check") {
|
||
|
|
const canvas = document.getElementById("myCanvas");
|
||
|
|
const ctx = canvas.getContext("2d");
|
||
|
|
// 获取图像元素和Canvas元素
|
||
|
|
const img = document.getElementById("img_parking_spaces_id");
|
||
|
|
//const canvas = document.getElementById("myCanvas");
|
||
|
|
//const ctx = canvas.getContext("2d");
|
||
|
|
//console.log(img.width)
|
||
|
|
//console.log(img.height)
|
||
|
|
// 将图像绘制到Canvas上
|
||
|
|
canvas.width = img.width;
|
||
|
|
canvas.height = img.height;
|
||
|
|
ctx.drawImage(img, 0, 0);
|
||
|
|
button_view = ''
|
||
|
|
|
||
|
|
for (var i = 0; i < Model.length; i++) {
|
||
|
|
if ((rtsp_url == Model[i]['cam_ip']) && (serial_num_choose.toString() == Model[i]['serial_num'])) {
|
||
|
|
console.log(Model[i])
|
||
|
|
draw_box(Model[i])
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
if (button_view == ''){
|
||
|
|
button_view += '<button class="btn btn-outline-primary " onclick="post_license_plate_roi()">新增車牌辨識ROI</button>'
|
||
|
|
//console.log('新增' + serial_num_choose.toString())
|
||
|
|
}
|
||
|
|
document.getElementById("buttom_id").innerHTML = button_view
|
||
|
|
}
|
||
|
|
|
||
|
|
if (mode == "violation") {
|
||
|
|
const canvas = document.getElementById("myCanvas");
|
||
|
|
const ctx = canvas.getContext("2d");
|
||
|
|
// 获取图像元素和Canvas元素
|
||
|
|
const img = document.getElementById("img_parking_spaces_id");
|
||
|
|
//const canvas = document.getElementById("myCanvas");
|
||
|
|
//const ctx = canvas.getContext("2d");
|
||
|
|
console.log(img.width)
|
||
|
|
console.log(img.height)
|
||
|
|
// 将图像绘制到Canvas上
|
||
|
|
canvas.width = img.width;
|
||
|
|
canvas.height = img.height;
|
||
|
|
ctx.drawImage(img, 0, 0);
|
||
|
|
button_view = ''
|
||
|
|
|
||
|
|
for (var i = 0; i < Model.length; i++) {
|
||
|
|
if ((rtsp_url == Model[i]['cam_ip'])) {
|
||
|
|
console.log(Model[i])
|
||
|
|
draw_box(Model[i])
|
||
|
|
}
|
||
|
|
}
|
||
|
|
button_view += '<button class="btn btn-outline-primary " onclick="post_license_plate_roi()">新增車牌辨識ROI</button> '
|
||
|
|
button_view += '<button class="btn btn-outline-danger " onclick="post_violation_violation_roi()">新增違規區域ROI</button> '
|
||
|
|
button_view += '<button class="btn btn-outline-success " onclick="post_normal_roi()">新增正常區域ROI</button> '
|
||
|
|
|
||
|
|
document.getElementById("buttom_id").innerHTML = button_view
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<!--ROI選擇-->
|
||
|
|
<script>
|
||
|
|
function ROI_choose(serial_num) {
|
||
|
|
serial_num_choose = serial_num
|
||
|
|
$.ajax({
|
||
|
|
type: "GET",
|
||
|
|
url: "http://140.125.20.183:7700/api/Parking_spaces_cam_ptz_car_num_check/parking_spaces_name-" + parking_spaces_name,
|
||
|
|
data: {},
|
||
|
|
headers: {
|
||
|
|
'Authorization': token
|
||
|
|
},
|
||
|
|
contentType: "application/json",
|
||
|
|
success: function (Model) {
|
||
|
|
//console.log(Model)
|
||
|
|
for (var i = 0; i < Model.length; i++) {
|
||
|
|
if ((rtsp_url == Model[i]['rtsp_url']) && (serial_num.toString() == Model[i]['serial_num'])) {
|
||
|
|
//set_model_2(Model[i])
|
||
|
|
//console.log(Model[i])
|
||
|
|
|
||
|
|
img_parking_spaces = document.getElementById("img_parking_spaces_id")
|
||
|
|
img_parking_spaces.src = Model[i].img
|
||
|
|
const canvas = document.getElementById("myCanvas");
|
||
|
|
canvas.style.width = "80%"
|
||
|
|
document.getElementById("ptz_id").innerHTML = ptz_view + "此畫面的相機PTZ參數 -" + " Pan : " + Model[i].pan + " Titl : " + Model[i].titl + " Zoom : " + Model[i].zoom
|
||
|
|
}
|
||
|
|
}
|
||
|
|
//set_model_2(Model[0])
|
||
|
|
get_data_3()
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
|
||
|
|
<!--畫ROI框-->
|
||
|
|
<script>
|
||
|
|
var button_view = ""
|
||
|
|
|
||
|
|
function draw_box(Model) {
|
||
|
|
if (mode == "pass") {
|
||
|
|
if (Model.roi_function == "CAR_ROI_license_plate") {
|
||
|
|
button_view += '<button class="btn btn-primary " onclick="edit_license_plate_roi()">編輯車牌辨識ROI</button>'
|
||
|
|
//document.getElementById("buttom_id").innerHTML = '<button class="btn btn-primary " onclick="edit_license_plate_roi()">編輯車牌辨識ROI</button>'
|
||
|
|
// 在图像上绘制矩形框
|
||
|
|
ctx.strokeStyle = "blue"; // 设置框的颜色
|
||
|
|
ctx.lineWidth = 5; // 设置框的线宽
|
||
|
|
//ctx.strokeRect(150, 150, 50, 50); // 绘制一个矩形框
|
||
|
|
//console.log(Model.roi_y1)
|
||
|
|
//console.log(Model.roi_y2)
|
||
|
|
ctx.strokeRect(Model.roi_x1, Model.roi_y1, Model.roi_x2 - Model.roi_x1, (Model.roi_y2 - Model.roi_y1)); // 绘制一个矩形框
|
||
|
|
}
|
||
|
|
if (Model.roi_function == "CAR_ROI_violation") {
|
||
|
|
button_view += '<button class="btn btn-danger " onclick="edit_violation_roi()">編輯違規ROI</button>'
|
||
|
|
// 在图像上绘制矩形框
|
||
|
|
ctx.strokeStyle = "red"; // 设置框的颜色
|
||
|
|
ctx.lineWidth = 5; // 设置框的线宽
|
||
|
|
//ctx.strokeRect(150, 150, 50, 50); // 绘制一个矩形框
|
||
|
|
ctx.strokeRect(Model.roi_x1, Model.roi_y1, Model.roi_x2 - Model.roi_x1, (Model.roi_y2 - Model.roi_y1)); // 绘制一个矩形框
|
||
|
|
}
|
||
|
|
if (Model.roi_function == "CAR_ROI_normal") {
|
||
|
|
button_view += '<button class="btn btn-success " onclick="edit_normal_roi()">編輯正常ROI</button>'
|
||
|
|
// 在图像上绘制矩形框
|
||
|
|
ctx.strokeStyle = "green"; // 设置框的颜色
|
||
|
|
ctx.lineWidth = 5; // 设置框的线宽
|
||
|
|
//ctx.strokeRect(150, 150, 50, 50); // 绘制一个矩形框
|
||
|
|
ctx.strokeRect(Model.roi_x1, Model.roi_y1, Model.roi_x2 - Model.roi_x1, (Model.roi_y2 - Model.roi_y1)); // 绘制一个矩形框
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
if (mode == "car_num_check") {
|
||
|
|
if (Model.roi_function == "CAR_ROI_license_plate") {
|
||
|
|
button_view += '<button class="btn btn-primary " onclick="edit_license_plate_roi()">編輯車牌辨識ROI</button>'
|
||
|
|
//document.getElementById("buttom_id").innerHTML = '<button class="btn btn-primary " onclick="edit_license_plate_roi()">編輯車牌辨識ROI</button>'
|
||
|
|
// 在图像上绘制矩形框
|
||
|
|
ctx.strokeStyle = "blue"; // 设置框的颜色
|
||
|
|
ctx.lineWidth = 5; // 设置框的线宽
|
||
|
|
//ctx.strokeRect(150, 150, 50, 50); // 绘制一个矩形框
|
||
|
|
//console.log(Model.roi_y1)
|
||
|
|
//console.log(Model.roi_y2)
|
||
|
|
ctx.strokeRect(Model.roi_x1, Model.roi_y1, Model.roi_x2 - Model.roi_x1, (Model.roi_y2 - Model.roi_y1)); // 绘制一个矩形框
|
||
|
|
}
|
||
|
|
if (Model.roi_function == "CAR_ROI_violation") {
|
||
|
|
button_view += '<button class="btn btn-danger " onclick="edit_violation_roi()">編輯違規ROI</button>'
|
||
|
|
// 在图像上绘制矩形框
|
||
|
|
ctx.strokeStyle = "red"; // 设置框的颜色
|
||
|
|
ctx.lineWidth = 5; // 设置框的线宽
|
||
|
|
//ctx.strokeRect(150, 150, 50, 50); // 绘制一个矩形框
|
||
|
|
ctx.strokeRect(Model.roi_x1, Model.roi_y1, Model.roi_x2 - Model.roi_x1, (Model.roi_y2 - Model.roi_y1)); // 绘制一个矩形框
|
||
|
|
}
|
||
|
|
if (Model.roi_function == "CAR_ROI_normal") {
|
||
|
|
button_view += '<button class="btn btn-success " onclick="edit_normal_roi()">編輯正常ROI</button>'
|
||
|
|
// 在图像上绘制矩形框
|
||
|
|
ctx.strokeStyle = "green"; // 设置框的颜色
|
||
|
|
ctx.lineWidth = 5; // 设置框的线宽
|
||
|
|
//ctx.strokeRect(150, 150, 50, 50); // 绘制一个矩形框
|
||
|
|
ctx.strokeRect(Model.roi_x1, Model.roi_y1, Model.roi_x2 - Model.roi_x1, (Model.roi_y2 - Model.roi_y1)); // 绘制一个矩形框
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
if (mode == "violation") {
|
||
|
|
if (Model.roi_function == "CAR_ROI_license_plate") {
|
||
|
|
button_view += '<button class="btn btn-primary " onclick="edit_license_plate_roi()">編輯車牌辨識ROI</button>'
|
||
|
|
//document.getElementById("buttom_id").innerHTML = '<button class="btn btn-primary " onclick="edit_license_plate_roi()">編輯車牌辨識ROI</button>'
|
||
|
|
// 在图像上绘制矩形框
|
||
|
|
ctx.strokeStyle = "blue"; // 设置框的颜色
|
||
|
|
ctx.lineWidth = 5; // 设置框的线宽
|
||
|
|
//ctx.strokeRect(150, 150, 50, 50); // 绘制一个矩形框
|
||
|
|
//console.log(Model.roi_y1)
|
||
|
|
//console.log(Model.roi_y2)
|
||
|
|
ctx.strokeRect(Model.roi_x1, Model.roi_y1, Model.roi_x2 - Model.roi_x1, (Model.roi_y2 - Model.roi_y1)); // 绘制一个矩形框
|
||
|
|
}
|
||
|
|
if (Model.roi_function == "CAR_ROI_violation") {
|
||
|
|
button_view += '<button class="btn btn-danger " onclick="edit_violation_roi()">編輯違規ROI</button>'
|
||
|
|
// 在图像上绘制矩形框
|
||
|
|
ctx.strokeStyle = "red"; // 设置框的颜色
|
||
|
|
ctx.lineWidth = 5; // 设置框的线宽
|
||
|
|
//ctx.strokeRect(150, 150, 50, 50); // 绘制一个矩形框
|
||
|
|
ctx.strokeRect(Model.roi_x1, Model.roi_y1, Model.roi_x2 - Model.roi_x1, (Model.roi_y2 - Model.roi_y1)); // 绘制一个矩形框
|
||
|
|
}
|
||
|
|
if (Model.roi_function == "CAR_ROI_normal") {
|
||
|
|
button_view += '<button class="btn btn-success " onclick="edit_normal_roi()">編輯正常ROI</button>'
|
||
|
|
// 在图像上绘制矩形框
|
||
|
|
ctx.strokeStyle = "green"; // 设置框的颜色
|
||
|
|
ctx.lineWidth = 5; // 设置框的线宽
|
||
|
|
//ctx.strokeRect(150, 150, 50, 50); // 绘制一个矩形框
|
||
|
|
ctx.strokeRect(Model.roi_x1, Model.roi_y1, Model.roi_x2 - Model.roi_x1, (Model.roi_y2 - Model.roi_y1)); // 绘制一个矩形框
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
</script>
|
||
|
|
|
||
|
|
|
||
|
|
<!--編輯車牌辨識ROI框-->
|
||
|
|
<script>
|
||
|
|
let startX, startY, endX, endY;
|
||
|
|
function edit_license_plate_roi() {
|
||
|
|
document.getElementById("put_license_plate_roi_id").style.display = "block"
|
||
|
|
// 获取Canvas元素
|
||
|
|
const img = document.getElementById("img_parking_spaces_id");
|
||
|
|
const canvas = document.getElementById("myCanvas");
|
||
|
|
const ctx = canvas.getContext("2d");
|
||
|
|
canvas.style.width = null
|
||
|
|
// 定义变量来跟踪鼠标位置和绘制状态
|
||
|
|
let isDrawing = false;
|
||
|
|
//let startX, startY, endX, endY;
|
||
|
|
|
||
|
|
// 监听鼠标按下事件
|
||
|
|
canvas.addEventListener("mousedown", (e) => {
|
||
|
|
isDrawing = true;
|
||
|
|
startX = e.clientX - canvas.getBoundingClientRect().left;
|
||
|
|
startY = e.clientY - canvas.getBoundingClientRect().top;
|
||
|
|
roi_x1 = startX
|
||
|
|
roi_y1 = startY
|
||
|
|
//console.log("鼠标坐标 X:", e.clientX - canvas.getBoundingClientRect().left);
|
||
|
|
//console.log("鼠标坐标 Y:", e.clientY - canvas.getBoundingClientRect().top);
|
||
|
|
});
|
||
|
|
|
||
|
|
// 监听鼠标移动事件
|
||
|
|
canvas.addEventListener("mousemove", (e) => {
|
||
|
|
if (!isDrawing) return;
|
||
|
|
|
||
|
|
endX = e.clientX - canvas.getBoundingClientRect().left;
|
||
|
|
endY = e.clientY - canvas.getBoundingClientRect().top;
|
||
|
|
|
||
|
|
// 清空Canvas
|
||
|
|
canvas.width = canvas.width;
|
||
|
|
|
||
|
|
// 绘制图像
|
||
|
|
ctx.drawImage(img, 0, 0);
|
||
|
|
|
||
|
|
// 绘制框框
|
||
|
|
ctx.strokeStyle = "blue";
|
||
|
|
ctx.lineWidth = 2;
|
||
|
|
ctx.strokeRect(startX, startY, endX - startX, endY - startY);
|
||
|
|
});
|
||
|
|
|
||
|
|
// 监听鼠标释放事件
|
||
|
|
canvas.addEventListener("mouseup", (e) => {
|
||
|
|
isDrawing = false;
|
||
|
|
console.log("鼠标坐标 X:", startX);
|
||
|
|
console.log("鼠标坐标 Y:", startY);
|
||
|
|
console.log("鼠标坐标 X:", endX);
|
||
|
|
console.log("鼠标坐标 Y:", endY);
|
||
|
|
});
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<!--更新車牌辨識ROI框-->
|
||
|
|
<script>
|
||
|
|
function put_license_plate_roi_1() {
|
||
|
|
if (mode == "pass") {
|
||
|
|
$.ajax({
|
||
|
|
type: "GET",
|
||
|
|
url: "http://140.125.20.183:7700/api/Parking_spaces_roi_pass/" + parking_spaces_name,
|
||
|
|
data: {},
|
||
|
|
headers: {
|
||
|
|
'Authorization': token
|
||
|
|
},
|
||
|
|
contentType: "application/json",
|
||
|
|
success: function (Model) {
|
||
|
|
for (var i = 0; i < Model.length; i++) {
|
||
|
|
if (rtsp_url == Model[i]['cam_ip']) {
|
||
|
|
//console.log(Model[i])
|
||
|
|
if (Model[i].roi_function == "CAR_ROI_license_plate") {
|
||
|
|
put_license_plate_roi_2(Model[i])
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
if (mode == "car_num_check") {
|
||
|
|
$.ajax({
|
||
|
|
type: "GET",
|
||
|
|
url: "http://140.125.20.183:7700/api/Parking_spaces_roi_car_num_check/parking_spaces_name-" + parking_spaces_name,
|
||
|
|
data: {},
|
||
|
|
headers: {
|
||
|
|
'Authorization': token
|
||
|
|
},
|
||
|
|
contentType: "application/json",
|
||
|
|
success: function (Model) {
|
||
|
|
for (var i = 0; i < Model.length; i++) {
|
||
|
|
if (rtsp_url == Model[i]['cam_ip']) {
|
||
|
|
//console.log(Model[i])
|
||
|
|
if (Model[i].roi_function == "CAR_ROI_license_plate" && Model[i].serial_num == serial_num_choose.toString() ) {
|
||
|
|
//console.log(Model[i])
|
||
|
|
put_license_plate_roi_2(Model[i])
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
if (mode == "violation") {
|
||
|
|
console.log('violation')
|
||
|
|
$.ajax({
|
||
|
|
type: "GET",
|
||
|
|
url: "http://140.125.20.183:7700/api/Parking_spaces_roi_violation/parking_spaces_name-" + parking_spaces_name,
|
||
|
|
data: {},
|
||
|
|
headers: {
|
||
|
|
'Authorization': token
|
||
|
|
},
|
||
|
|
contentType: "application/json",
|
||
|
|
success: function (Model) {
|
||
|
|
for (var i = 0; i < Model.length; i++) {
|
||
|
|
if (rtsp_url == Model[i]['cam_ip']) {
|
||
|
|
//console.log(Model[i])
|
||
|
|
if (Model[i].roi_function == "CAR_ROI_license_plate" && Model[i].serial_num == serial_num_choose.toString()) {
|
||
|
|
console.log(Model[i])
|
||
|
|
//put_license_plate_roi_2(Model[i])
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function put_license_plate_roi_2(Model) {
|
||
|
|
if (mode == "pass") {
|
||
|
|
console.log(Model)
|
||
|
|
Model.roi_x1 = startX.toString()
|
||
|
|
Model.roi_x2 = endX.toString()
|
||
|
|
Model.roi_y1 = startY.toString()
|
||
|
|
Model.roi_y2 = endY.toString()
|
||
|
|
var stringify_obj = JSON.stringify(Model);
|
||
|
|
console.log(stringify_obj)
|
||
|
|
$.ajax({
|
||
|
|
type: "PUT",
|
||
|
|
url: "http://140.125.20.183:7700/api/Parking_spaces_roi_pass/" + parking_spaces_name,
|
||
|
|
data: stringify_obj,
|
||
|
|
|
||
|
|
contentType: "application/json",
|
||
|
|
success: function (Model) {
|
||
|
|
console.log(Model)
|
||
|
|
window.location.reload();
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
if (mode == "car_num_check") {
|
||
|
|
console.log(Model)
|
||
|
|
Model.roi_x1 = startX.toString()
|
||
|
|
Model.roi_x2 = endX.toString()
|
||
|
|
Model.roi_y1 = startY.toString()
|
||
|
|
Model.roi_y2 = endY.toString()
|
||
|
|
var stringify_obj = JSON.stringify(Model);
|
||
|
|
console.log(stringify_obj)
|
||
|
|
|
||
|
|
$.ajax({
|
||
|
|
type: "PUT",
|
||
|
|
url: "http://140.125.20.183:7700/api/Parking_spaces_roi_car_num_check/parking_spaces_name-" + parking_spaces_name + "-serial_num-" + serial_num_choose.toString(),
|
||
|
|
data: stringify_obj,
|
||
|
|
|
||
|
|
contentType: "application/json",
|
||
|
|
success: function (Model) {
|
||
|
|
console.log(Model)
|
||
|
|
window.location.reload();
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
if (mode == "violation") {
|
||
|
|
console.log('violation')
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<!--新增車牌辨識ROI框-->
|
||
|
|
<script>
|
||
|
|
function post_license_plate_roi(){
|
||
|
|
if (mode == "car_num_check") {
|
||
|
|
document.getElementById("post_license_plate_roi_id").style.display = "block"
|
||
|
|
// 获取Canvas元素
|
||
|
|
const img = document.getElementById("img_parking_spaces_id");
|
||
|
|
const canvas = document.getElementById("myCanvas");
|
||
|
|
const ctx = canvas.getContext("2d");
|
||
|
|
canvas.style.width = null
|
||
|
|
// 定义变量来跟踪鼠标位置和绘制状态
|
||
|
|
let isDrawing = false;
|
||
|
|
//let startX, startY, endX, endY;
|
||
|
|
|
||
|
|
// 监听鼠标按下事件
|
||
|
|
canvas.addEventListener("mousedown", (e) => {
|
||
|
|
isDrawing = true;
|
||
|
|
startX = e.clientX - canvas.getBoundingClientRect().left;
|
||
|
|
startY = e.clientY - canvas.getBoundingClientRect().top;
|
||
|
|
roi_x1 = startX
|
||
|
|
roi_y1 = startY
|
||
|
|
//console.log("鼠标坐标 X:", e.clientX - canvas.getBoundingClientRect().left);
|
||
|
|
//console.log("鼠标坐标 Y:", e.clientY - canvas.getBoundingClientRect().top);
|
||
|
|
});
|
||
|
|
|
||
|
|
// 监听鼠标移动事件
|
||
|
|
canvas.addEventListener("mousemove", (e) => {
|
||
|
|
if (!isDrawing) return;
|
||
|
|
|
||
|
|
endX = e.clientX - canvas.getBoundingClientRect().left;
|
||
|
|
endY = e.clientY - canvas.getBoundingClientRect().top;
|
||
|
|
|
||
|
|
// 清空Canvas
|
||
|
|
canvas.width = canvas.width;
|
||
|
|
|
||
|
|
// 绘制图像
|
||
|
|
ctx.drawImage(img, 0, 0);
|
||
|
|
|
||
|
|
// 绘制框框
|
||
|
|
ctx.strokeStyle = "blue";
|
||
|
|
ctx.lineWidth = 2;
|
||
|
|
ctx.strokeRect(startX, startY, endX - startX, endY - startY);
|
||
|
|
});
|
||
|
|
|
||
|
|
// 监听鼠标释放事件
|
||
|
|
canvas.addEventListener("mouseup", (e) => {
|
||
|
|
isDrawing = false;
|
||
|
|
console.log("鼠标坐标 X:", startX);
|
||
|
|
console.log("鼠标坐标 Y:", startY);
|
||
|
|
console.log("鼠标坐标 X:", endX);
|
||
|
|
console.log("鼠标坐标 Y:", endY);
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
if (mode == "violation") {
|
||
|
|
document.getElementById("post_license_plate_roi_id").style.display = "block"
|
||
|
|
// 获取Canvas元素
|
||
|
|
const img = document.getElementById("img_parking_spaces_id");
|
||
|
|
const canvas = document.getElementById("myCanvas");
|
||
|
|
const ctx = canvas.getContext("2d");
|
||
|
|
canvas.style.width = null
|
||
|
|
// 定义变量来跟踪鼠标位置和绘制状态
|
||
|
|
let isDrawing = false;
|
||
|
|
//let startX, startY, endX, endY;
|
||
|
|
|
||
|
|
// 监听鼠标按下事件
|
||
|
|
canvas.addEventListener("mousedown", (e) => {
|
||
|
|
isDrawing = true;
|
||
|
|
startX = e.clientX - canvas.getBoundingClientRect().left;
|
||
|
|
startY = e.clientY - canvas.getBoundingClientRect().top;
|
||
|
|
roi_x1 = startX
|
||
|
|
roi_y1 = startY
|
||
|
|
//console.log("鼠标坐标 X:", e.clientX - canvas.getBoundingClientRect().left);
|
||
|
|
//console.log("鼠标坐标 Y:", e.clientY - canvas.getBoundingClientRect().top);
|
||
|
|
});
|
||
|
|
|
||
|
|
// 监听鼠标移动事件
|
||
|
|
canvas.addEventListener("mousemove", (e) => {
|
||
|
|
if (!isDrawing) return;
|
||
|
|
|
||
|
|
endX = e.clientX - canvas.getBoundingClientRect().left;
|
||
|
|
endY = e.clientY - canvas.getBoundingClientRect().top;
|
||
|
|
|
||
|
|
// 清空Canvas
|
||
|
|
canvas.width = canvas.width;
|
||
|
|
|
||
|
|
// 绘制图像
|
||
|
|
ctx.drawImage(img, 0, 0);
|
||
|
|
|
||
|
|
// 绘制框框
|
||
|
|
ctx.strokeStyle = "blue";
|
||
|
|
ctx.lineWidth = 2;
|
||
|
|
ctx.strokeRect(startX, startY, endX - startX, endY - startY);
|
||
|
|
});
|
||
|
|
|
||
|
|
// 监听鼠标释放事件
|
||
|
|
canvas.addEventListener("mouseup", (e) => {
|
||
|
|
isDrawing = false;
|
||
|
|
console.log("鼠标坐标 X:", startX);
|
||
|
|
console.log("鼠标坐标 Y:", startY);
|
||
|
|
console.log("鼠标坐标 X:", endX);
|
||
|
|
console.log("鼠标坐标 Y:", endY);
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function post_license_plate_roi_1(){
|
||
|
|
if (mode == "car_num_check") {
|
||
|
|
data_1 ={
|
||
|
|
"parking_spaces_name": parking_spaces_name,
|
||
|
|
"cam_ip": rtsp_url,
|
||
|
|
"roi_x1": startX.toString(),
|
||
|
|
"roi_x2": endX.toString(),
|
||
|
|
"roi_y1": startY.toString(),
|
||
|
|
"roi_y2": endY.toString(),
|
||
|
|
"roi_function": "CAR_ROI_license_plate",
|
||
|
|
"mode": "car_num_check",
|
||
|
|
"data_create_time": "2023-10-20T12:19:06.094141",
|
||
|
|
"serial_num": serial_num_choose.toString()
|
||
|
|
|
||
|
|
}
|
||
|
|
var stringify_obj = JSON.stringify(data_1);
|
||
|
|
console.log(stringify_obj)
|
||
|
|
$.ajax({
|
||
|
|
type: "POST",
|
||
|
|
url: "http://140.125.20.183:7700/api/Parking_spaces_roi_car_num_check/",
|
||
|
|
data: stringify_obj,
|
||
|
|
headers: {
|
||
|
|
'Authorization': token
|
||
|
|
},
|
||
|
|
contentType: "application/json",
|
||
|
|
success: function (Model) {
|
||
|
|
console.log(Model)
|
||
|
|
window.location.reload();
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
if (mode == "violation") {
|
||
|
|
$.ajax({
|
||
|
|
type: "GET",
|
||
|
|
url: "http://140.125.20.183:7700/api/Parking_spaces_roi_violation/parking_spaces_name-" + parking_spaces_name,
|
||
|
|
data: {},
|
||
|
|
headers: {
|
||
|
|
'Authorization': token
|
||
|
|
},
|
||
|
|
contentType: "application/json",
|
||
|
|
success: function (Model) {
|
||
|
|
var serial_num=0
|
||
|
|
console.log(Model.length)
|
||
|
|
for (var i = 0; i < Model.length; i++) {
|
||
|
|
if (Model[i].roi_function == "CAR_ROI_license_plate") {
|
||
|
|
serial_num = serial_num+1
|
||
|
|
}
|
||
|
|
}
|
||
|
|
serial_num_choose = serial_num
|
||
|
|
|
||
|
|
data_1 = {
|
||
|
|
"parking_spaces_name": parking_spaces_name,
|
||
|
|
"cam_ip": rtsp_url,
|
||
|
|
"roi_x1": startX.toString(),
|
||
|
|
"roi_x2": endX.toString(),
|
||
|
|
"roi_y1": startY.toString(),
|
||
|
|
"roi_y2": endY.toString(),
|
||
|
|
"roi_function": "CAR_ROI_license_plate",
|
||
|
|
"mode": "violation",
|
||
|
|
"data_create_time": "2023-10-20T12:19:06.094141",
|
||
|
|
"serial_num": serial_num_choose.toString()
|
||
|
|
|
||
|
|
}
|
||
|
|
var stringify_obj = JSON.stringify(data_1);
|
||
|
|
console.log(stringify_obj)
|
||
|
|
$.ajax({
|
||
|
|
type: "POST",
|
||
|
|
url: "http://140.125.20.183:7700/api/Parking_spaces_roi_violation/",
|
||
|
|
data: stringify_obj,
|
||
|
|
headers: {
|
||
|
|
'Authorization': token
|
||
|
|
},
|
||
|
|
contentType: "application/json",
|
||
|
|
success: function (Model) {
|
||
|
|
console.log(Model)
|
||
|
|
window.location.reload();
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
//set_model_3(Model)
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
<!--編輯違規ROI框-->
|
||
|
|
<script>
|
||
|
|
var roi_x1, roi_y1, roi_x2, roi_y2
|
||
|
|
function edit_violation_roi() {
|
||
|
|
document.getElementById("put_violation_roi_id").style.display = "block"
|
||
|
|
// 获取Canvas元素
|
||
|
|
const img = document.getElementById("img_parking_spaces_id");
|
||
|
|
const canvas = document.getElementById("myCanvas");
|
||
|
|
const ctx = canvas.getContext("2d");
|
||
|
|
canvas.style.width = null
|
||
|
|
// 定义变量来跟踪鼠标位置和绘制状态
|
||
|
|
let isDrawing = false;
|
||
|
|
let startX, startY, endX, endY;
|
||
|
|
|
||
|
|
// 监听鼠标按下事件
|
||
|
|
canvas.addEventListener("mousedown", (e) => {
|
||
|
|
isDrawing = true;
|
||
|
|
startX = e.clientX - canvas.getBoundingClientRect().left;
|
||
|
|
startY = e.clientY - canvas.getBoundingClientRect().top;
|
||
|
|
roi_x1 = startX
|
||
|
|
roi_y1 = startY
|
||
|
|
//console.log("鼠标坐标 X:", e.clientX - canvas.getBoundingClientRect().left);
|
||
|
|
//console.log("鼠标坐标 Y:", e.clientY - canvas.getBoundingClientRect().top);
|
||
|
|
});
|
||
|
|
|
||
|
|
// 监听鼠标移动事件
|
||
|
|
canvas.addEventListener("mousemove", (e) => {
|
||
|
|
if (!isDrawing) return;
|
||
|
|
|
||
|
|
endX = e.clientX - canvas.getBoundingClientRect().left;
|
||
|
|
endY = e.clientY - canvas.getBoundingClientRect().top;
|
||
|
|
|
||
|
|
// 清空Canvas
|
||
|
|
canvas.width = canvas.width;
|
||
|
|
|
||
|
|
// 绘制图像
|
||
|
|
ctx.drawImage(img, 0, 0);
|
||
|
|
|
||
|
|
// 绘制框框
|
||
|
|
ctx.strokeStyle = "red";
|
||
|
|
ctx.lineWidth = 2;
|
||
|
|
ctx.strokeRect(startX, startY, endX - startX, endY - startY);
|
||
|
|
});
|
||
|
|
|
||
|
|
// 监听鼠标释放事件
|
||
|
|
canvas.addEventListener("mouseup", (e) => {
|
||
|
|
isDrawing = false;
|
||
|
|
roi_x2 = e.clientX - canvas.getBoundingClientRect().left
|
||
|
|
roi_y2 = e.clientY - canvas.getBoundingClientRect().top
|
||
|
|
//console.log("鼠标坐标 X:", e.clientX - canvas.getBoundingClientRect().left);
|
||
|
|
//console.log("鼠标坐标 Y:", e.clientY - canvas.getBoundingClientRect().top);
|
||
|
|
});
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<!--更新違規ROI框-->
|
||
|
|
<script>
|
||
|
|
function put_violation_roi_1() {
|
||
|
|
$.ajax({
|
||
|
|
type: "GET",
|
||
|
|
url: "http://140.125.20.183:7700/api/Parking_spaces_roi/" + parking_spaces_name,
|
||
|
|
data: {},
|
||
|
|
headers: {
|
||
|
|
'Authorization': token
|
||
|
|
},
|
||
|
|
contentType: "application/json",
|
||
|
|
success: function (Model) {
|
||
|
|
for (var i = 0; i < Model.length; i++) {
|
||
|
|
if (rtsp_url == Model[i]['cam_ip']) {
|
||
|
|
//console.log(Model[i])
|
||
|
|
if (Model[i].roi_function == "CAR_ROI_violation") {
|
||
|
|
put_violation_roi_2(Model[i])
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
function put_violation_roi_2(Model) {
|
||
|
|
console.log(Model)
|
||
|
|
Model.roi_x1 = roi_x1.toString()
|
||
|
|
Model.roi_x2 = roi_x2.toString()
|
||
|
|
Model.roi_y2 = roi_y2.toString()
|
||
|
|
Model.roi_y2 = roi_y2.toString()
|
||
|
|
var stringify_obj = JSON.stringify(Model);
|
||
|
|
console.log(stringify_obj)
|
||
|
|
$.ajax({
|
||
|
|
type: "PUT",
|
||
|
|
url: "http://140.125.20.183:7700/api/Parking_spaces_roi/" + parking_spaces_name,
|
||
|
|
data: stringify_obj,
|
||
|
|
headers: {
|
||
|
|
'Authorization': token
|
||
|
|
},
|
||
|
|
contentType: "application/json",
|
||
|
|
success: function (Model) {
|
||
|
|
console.log(Model)
|
||
|
|
window.location.reload();
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<!--新增違規區域-->
|
||
|
|
<script>
|
||
|
|
function post_violation_violation_roi(){
|
||
|
|
if (mode == "violation") {
|
||
|
|
document.getElementById("post_violation_roi_id").style.display = "block"
|
||
|
|
// 获取Canvas元素
|
||
|
|
const img = document.getElementById("img_parking_spaces_id");
|
||
|
|
const canvas = document.getElementById("myCanvas");
|
||
|
|
const ctx = canvas.getContext("2d");
|
||
|
|
canvas.style.width = null
|
||
|
|
// 定义变量来跟踪鼠标位置和绘制状态
|
||
|
|
let isDrawing = false;
|
||
|
|
//let startX, startY, endX, endY;
|
||
|
|
|
||
|
|
// 监听鼠标按下事件
|
||
|
|
canvas.addEventListener("mousedown", (e) => {
|
||
|
|
isDrawing = true;
|
||
|
|
startX = e.clientX - canvas.getBoundingClientRect().left;
|
||
|
|
startY = e.clientY - canvas.getBoundingClientRect().top;
|
||
|
|
roi_x1 = startX
|
||
|
|
roi_y1 = startY
|
||
|
|
//console.log("鼠标坐标 X:", e.clientX - canvas.getBoundingClientRect().left);
|
||
|
|
//console.log("鼠标坐标 Y:", e.clientY - canvas.getBoundingClientRect().top);
|
||
|
|
});
|
||
|
|
|
||
|
|
// 监听鼠标移动事件
|
||
|
|
canvas.addEventListener("mousemove", (e) => {
|
||
|
|
if (!isDrawing) return;
|
||
|
|
|
||
|
|
endX = e.clientX - canvas.getBoundingClientRect().left;
|
||
|
|
endY = e.clientY - canvas.getBoundingClientRect().top;
|
||
|
|
|
||
|
|
// 清空Canvas
|
||
|
|
canvas.width = canvas.width;
|
||
|
|
|
||
|
|
// 绘制图像
|
||
|
|
ctx.drawImage(img, 0, 0);
|
||
|
|
|
||
|
|
// 绘制框框
|
||
|
|
ctx.strokeStyle = "red";
|
||
|
|
ctx.lineWidth = 2;
|
||
|
|
ctx.strokeRect(startX, startY, endX - startX, endY - startY);
|
||
|
|
});
|
||
|
|
|
||
|
|
// 监听鼠标释放事件
|
||
|
|
canvas.addEventListener("mouseup", (e) => {
|
||
|
|
isDrawing = false;
|
||
|
|
console.log("鼠标坐标 X:", startX);
|
||
|
|
console.log("鼠标坐标 Y:", startY);
|
||
|
|
console.log("鼠标坐标 X:", endX);
|
||
|
|
console.log("鼠标坐标 Y:", endY);
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function post_violation_roi_1(){
|
||
|
|
if (mode == "violation") {
|
||
|
|
$.ajax({
|
||
|
|
type: "GET",
|
||
|
|
url: "http://140.125.20.183:7700/api/Parking_spaces_roi_violation/parking_spaces_name-" + parking_spaces_name,
|
||
|
|
data: {},
|
||
|
|
headers: {
|
||
|
|
'Authorization': token
|
||
|
|
},
|
||
|
|
contentType: "application/json",
|
||
|
|
success: function (Model) {
|
||
|
|
var serial_num = 0
|
||
|
|
console.log(Model.length)
|
||
|
|
for (var i = 0; i < Model.length; i++) {
|
||
|
|
if (Model[i].roi_function == "CAR_ROI_violation") {
|
||
|
|
serial_num = serial_num + 1
|
||
|
|
}
|
||
|
|
}
|
||
|
|
serial_num_choose = serial_num
|
||
|
|
|
||
|
|
data_1 = {
|
||
|
|
"parking_spaces_name": parking_spaces_name,
|
||
|
|
"cam_ip": rtsp_url,
|
||
|
|
"roi_x1": startX.toString(),
|
||
|
|
"roi_x2": endX.toString(),
|
||
|
|
"roi_y1": startY.toString(),
|
||
|
|
"roi_y2": endY.toString(),
|
||
|
|
"roi_function": "CAR_ROI_violation",
|
||
|
|
"mode": "violation",
|
||
|
|
"data_create_time": "2023-10-20T12:19:06.094141",
|
||
|
|
"serial_num": serial_num_choose.toString()
|
||
|
|
|
||
|
|
}
|
||
|
|
var stringify_obj = JSON.stringify(data_1);
|
||
|
|
console.log(stringify_obj)
|
||
|
|
$.ajax({
|
||
|
|
type: "POST",
|
||
|
|
url: "http://140.125.20.183:7700/api/Parking_spaces_roi_violation/",
|
||
|
|
data: stringify_obj,
|
||
|
|
headers: {
|
||
|
|
'Authorization': token
|
||
|
|
},
|
||
|
|
contentType: "application/json",
|
||
|
|
success: function (Model) {
|
||
|
|
console.log(Model)
|
||
|
|
window.location.reload();
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
//set_model_3(Model)
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
|
||
|
|
<!--編輯正常ROI框-->
|
||
|
|
<script>
|
||
|
|
var roi_x1, roi_y1, roi_x2, roi_y2
|
||
|
|
function edit_normal_roi() {
|
||
|
|
document.getElementById("put_normal_roi_id").style.display = "block"
|
||
|
|
// 获取Canvas元素
|
||
|
|
const img = document.getElementById("img_parking_spaces_id");
|
||
|
|
const canvas = document.getElementById("myCanvas");
|
||
|
|
const ctx = canvas.getContext("2d");
|
||
|
|
canvas.style.width = null
|
||
|
|
// 定义变量来跟踪鼠标位置和绘制状态
|
||
|
|
let isDrawing = false;
|
||
|
|
let startX, startY, endX, endY;
|
||
|
|
|
||
|
|
// 监听鼠标按下事件
|
||
|
|
canvas.addEventListener("mousedown", (e) => {
|
||
|
|
isDrawing = true;
|
||
|
|
startX = e.clientX - canvas.getBoundingClientRect().left;
|
||
|
|
startY = e.clientY - canvas.getBoundingClientRect().top;
|
||
|
|
roi_x1 = startX
|
||
|
|
roi_y1 = startY
|
||
|
|
//console.log("鼠标坐标 X:", e.clientX - canvas.getBoundingClientRect().left);
|
||
|
|
//console.log("鼠标坐标 Y:", e.clientY - canvas.getBoundingClientRect().top);
|
||
|
|
});
|
||
|
|
|
||
|
|
// 监听鼠标移动事件
|
||
|
|
canvas.addEventListener("mousemove", (e) => {
|
||
|
|
if (!isDrawing) return;
|
||
|
|
|
||
|
|
endX = e.clientX - canvas.getBoundingClientRect().left;
|
||
|
|
endY = e.clientY - canvas.getBoundingClientRect().top;
|
||
|
|
|
||
|
|
// 清空Canvas
|
||
|
|
canvas.width = canvas.width;
|
||
|
|
|
||
|
|
// 绘制图像
|
||
|
|
ctx.drawImage(img, 0, 0);
|
||
|
|
|
||
|
|
// 绘制框框
|
||
|
|
ctx.strokeStyle = "green";
|
||
|
|
ctx.lineWidth = 2;
|
||
|
|
ctx.strokeRect(startX, startY, endX - startX, endY - startY);
|
||
|
|
});
|
||
|
|
|
||
|
|
// 监听鼠标释放事件
|
||
|
|
canvas.addEventListener("mouseup", (e) => {
|
||
|
|
isDrawing = false;
|
||
|
|
roi_x2 = e.clientX - canvas.getBoundingClientRect().left
|
||
|
|
roi_y2 = e.clientY - canvas.getBoundingClientRect().top
|
||
|
|
//console.log("鼠标坐标 X:", e.clientX - canvas.getBoundingClientRect().left);
|
||
|
|
//console.log("鼠标坐标 Y:", e.clientY - canvas.getBoundingClientRect().top);
|
||
|
|
});
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<!--更新正常ROI框-->
|
||
|
|
<script>
|
||
|
|
function put_normal_roi_1() {
|
||
|
|
if (mode == "pass") {
|
||
|
|
$.ajax({
|
||
|
|
type: "GET",
|
||
|
|
url: "http://140.125.20.183:7700/api/Parking_spaces_roi_pass/" + parking_spaces_name,
|
||
|
|
data: {},
|
||
|
|
headers: {
|
||
|
|
'Authorization': token
|
||
|
|
},
|
||
|
|
contentType: "application/json",
|
||
|
|
success: function (Model) {
|
||
|
|
for (var i = 0; i < Model.length; i++) {
|
||
|
|
if (rtsp_url == Model[i]['cam_ip']) {
|
||
|
|
//console.log(Model[i])
|
||
|
|
if (Model[i].roi_function == "CAR_ROI_normal") {
|
||
|
|
put_normal_roi_2(Model[i])
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
function put_normal_roi_2(Model) {
|
||
|
|
if (mode == "pass") {
|
||
|
|
console.log(Model)
|
||
|
|
Model.roi_x1 = roi_x1.toString()
|
||
|
|
Model.roi_x2 = roi_x2.toString()
|
||
|
|
Model.roi_y2 = roi_y2.toString()
|
||
|
|
Model.roi_y2 = roi_y2.toString()
|
||
|
|
var stringify_obj = JSON.stringify(Model);
|
||
|
|
console.log(stringify_obj)
|
||
|
|
$.ajax({
|
||
|
|
type: "PUT",
|
||
|
|
url: "http://140.125.20.183:7700/api/Parking_spaces_roi_pass/" + parking_spaces_name,
|
||
|
|
data: stringify_obj,
|
||
|
|
headers: {
|
||
|
|
'Authorization': token
|
||
|
|
},
|
||
|
|
contentType: "application/json",
|
||
|
|
success: function (Model) {
|
||
|
|
console.log(Model)
|
||
|
|
window.location.reload();
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
|
||
|
|
<!--新增正常ROI框-->
|
||
|
|
<script>
|
||
|
|
function post_normal_roi(){
|
||
|
|
if (mode == "violation") {
|
||
|
|
document.getElementById("post_normal_roi_id").style.display = "block"
|
||
|
|
// 获取Canvas元素
|
||
|
|
const img = document.getElementById("img_parking_spaces_id");
|
||
|
|
const canvas = document.getElementById("myCanvas");
|
||
|
|
const ctx = canvas.getContext("2d");
|
||
|
|
canvas.style.width = null
|
||
|
|
// 定义变量来跟踪鼠标位置和绘制状态
|
||
|
|
let isDrawing = false;
|
||
|
|
//let startX, startY, endX, endY;
|
||
|
|
|
||
|
|
// 监听鼠标按下事件
|
||
|
|
canvas.addEventListener("mousedown", (e) => {
|
||
|
|
isDrawing = true;
|
||
|
|
startX = e.clientX - canvas.getBoundingClientRect().left;
|
||
|
|
startY = e.clientY - canvas.getBoundingClientRect().top;
|
||
|
|
roi_x1 = startX
|
||
|
|
roi_y1 = startY
|
||
|
|
//console.log("鼠标坐标 X:", e.clientX - canvas.getBoundingClientRect().left);
|
||
|
|
//console.log("鼠标坐标 Y:", e.clientY - canvas.getBoundingClientRect().top);
|
||
|
|
});
|
||
|
|
|
||
|
|
// 监听鼠标移动事件
|
||
|
|
canvas.addEventListener("mousemove", (e) => {
|
||
|
|
if (!isDrawing) return;
|
||
|
|
|
||
|
|
endX = e.clientX - canvas.getBoundingClientRect().left;
|
||
|
|
endY = e.clientY - canvas.getBoundingClientRect().top;
|
||
|
|
|
||
|
|
// 清空Canvas
|
||
|
|
canvas.width = canvas.width;
|
||
|
|
|
||
|
|
// 绘制图像
|
||
|
|
ctx.drawImage(img, 0, 0);
|
||
|
|
|
||
|
|
// 绘制框框
|
||
|
|
ctx.strokeStyle = "green";
|
||
|
|
ctx.lineWidth = 2;
|
||
|
|
ctx.strokeRect(startX, startY, endX - startX, endY - startY);
|
||
|
|
});
|
||
|
|
|
||
|
|
// 监听鼠标释放事件
|
||
|
|
canvas.addEventListener("mouseup", (e) => {
|
||
|
|
isDrawing = false;
|
||
|
|
console.log("鼠标坐标 X:", startX);
|
||
|
|
console.log("鼠标坐标 Y:", startY);
|
||
|
|
console.log("鼠标坐标 X:", endX);
|
||
|
|
console.log("鼠标坐标 Y:", endY);
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function post_normal_plate_roi_1(){
|
||
|
|
if (mode == "violation") {
|
||
|
|
$.ajax({
|
||
|
|
type: "GET",
|
||
|
|
url: "http://140.125.20.183:7700/api/Parking_spaces_roi_violation/parking_spaces_name-" + parking_spaces_name,
|
||
|
|
data: {},
|
||
|
|
headers: {
|
||
|
|
'Authorization': token
|
||
|
|
},
|
||
|
|
contentType: "application/json",
|
||
|
|
success: function (Model) {
|
||
|
|
var serial_num = 0
|
||
|
|
console.log(Model.length)
|
||
|
|
for (var i = 0; i < Model.length; i++) {
|
||
|
|
if (Model[i].roi_function == "CAR_ROI_normal" ) {
|
||
|
|
serial_num = serial_num + 1
|
||
|
|
}
|
||
|
|
}
|
||
|
|
serial_num_choose = serial_num
|
||
|
|
|
||
|
|
data_1 = {
|
||
|
|
"parking_spaces_name": parking_spaces_name,
|
||
|
|
"cam_ip": rtsp_url,
|
||
|
|
"roi_x1": startX.toString(),
|
||
|
|
"roi_x2": endX.toString(),
|
||
|
|
"roi_y1": startY.toString(),
|
||
|
|
"roi_y2": endY.toString(),
|
||
|
|
"roi_function": "CAR_ROI_normal",
|
||
|
|
"mode": "violation",
|
||
|
|
"data_create_time": "2023-10-20T12:19:06.094141",
|
||
|
|
"serial_num": serial_num_choose.toString()
|
||
|
|
|
||
|
|
}
|
||
|
|
var stringify_obj = JSON.stringify(data_1);
|
||
|
|
console.log(stringify_obj)
|
||
|
|
$.ajax({
|
||
|
|
type: "POST",
|
||
|
|
url: "http://140.125.20.183:7700/api/Parking_spaces_roi_violation/",
|
||
|
|
data: stringify_obj,
|
||
|
|
headers: {
|
||
|
|
'Authorization': token
|
||
|
|
},
|
||
|
|
contentType: "application/json",
|
||
|
|
success: function (Model) {
|
||
|
|
console.log(Model)
|
||
|
|
window.location.reload();
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
//set_model_3(Model)
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<!--檢查token-->
|
||
|
|
<script>
|
||
|
|
function token_check() {
|
||
|
|
// 检查本地存储中是否存在JWT令牌
|
||
|
|
var token = localStorage.getItem('token_park_space');
|
||
|
|
console.log(token)
|
||
|
|
$.ajax({
|
||
|
|
type: "GET",
|
||
|
|
url: 'http://140.125.20.183:7700/Users/token_check',
|
||
|
|
headers: {
|
||
|
|
'Authorization': token
|
||
|
|
},
|
||
|
|
success: function (response) {
|
||
|
|
//console.log(response)
|
||
|
|
token_check = "true"
|
||
|
|
from_token_import_id()
|
||
|
|
},
|
||
|
|
error: function (xhr) {
|
||
|
|
token_check = "false"
|
||
|
|
window.location.href = '/';
|
||
|
|
// 处理错误响应，例如跳转到未授权页面
|
||
|
|
//window.location.href = 'https://example.com/unauthorized_page';
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
function from_token_import_id() {
|
||
|
|
var token = localStorage.getItem('token_park_space');
|
||
|
|
$.ajax({
|
||
|
|
type: "GET",
|
||
|
|
url: 'http://140.125.20.183:7700/Users/token-' + token,
|
||
|
|
headers: {
|
||
|
|
'Authorization': token
|
||
|
|
},
|
||
|
|
success: function (response) {
|
||
|
|
//console.log(response)
|
||
|
|
from_id_import_user_data(response)
|
||
|
|
|
||
|
|
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
function from_id_import_user_data(id) {
|
||
|
|
var token = localStorage.getItem('token_park_space');
|
||
|
|
$.ajax({
|
||
|
|
type: "GET",
|
||
|
|
url: 'http://140.125.20.183:7700/Users/user_id-' + id,
|
||
|
|
headers: {
|
||
|
|
'Authorization': token
|
||
|
|
},
|
||
|
|
success: function (model) {
|
||
|
|
model = model.result
|
||
|
|
position = model.lastname
|
||
|
|
console.log(position)
|
||
|
|
if (position == "engineer") {
|
||
|
|
get_data()
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
window.location.href = '/';
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<!--開機自啟-->
|
||
|
|
<script>
|
||
|
|
window.onload = token_check;
|
||
|
|
</script>
|