parking-html/Parking_spaces/Views/Engineering/Engineering_CAM_detail.cshtml

@{
    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://localhost: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://localhost: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://localhost: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://localhost: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://localhost: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://localhost: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://localhost: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://localhost: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://localhost: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://localhost: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://localhost: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://localhost:7700/api/Parking_spaces_roi_pass/" + parking_spaces_name,
                data: stringify_obj,

                contentType: "application/json",
                headers: {
                    'Authorization': token
                },
                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://localhost: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",
                headers: {
                    'Authorization': token
                },
                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://localhost:7700/api/Parking_spaces_roi_car_num_check/",
                data: stringify_obj,
                headers: {
                    'Authorization': token
                },
                contentType: "application/json",
                headers: {
                    'Authorization': token
                },
                success: function (Model) {
                    console.log(Model)
                    window.location.reload();
                }
            });
        }

        if (mode == "violation") {
            $.ajax({
                type: "GET",
                url: "http://localhost: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://localhost: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://localhost: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://localhost: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://localhost: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://localhost: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://localhost: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://localhost: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://localhost: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://localhost: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>
    var token
    function token_check() {
        // 检查本地存储中是否存在JWT令牌
        token = localStorage.getItem('token_park_space');
        console.log(token)
        $.ajax({
            type: "GET",
            url: 'http://localhost: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://localhost: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://localhost: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>