parking-html/Parking_spaces/Views/Engineering/Engineering_CAM_detail.cshtml
2024-02-01 11:37:15 +08:00

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>