无标题文档 - 《share》

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta
            name="viewport"
            content="width=device-width, initial-scale=1, maximum-scale=1"
    />
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <style>
        #map {
            background-color: rgba(8, 14, 17, 0.1);
            position: absolute;
            width: 36vw;
            height: 48vw;
            float: left;
            margin-left: 26vw;
            z-index: 10;
        }
        img {
            position: relative;
            width: 36vw;
            height: 48vw;
            margin-left: 26vw;
            z-index: 1;
        }
        #style {
            background-color: cyan;
            width: 8vw;
            height: 26vh;
            position: relative;
            margin-left: 37vw;
            margin-top: 0;
        }
        .car {
            width: 1vw;
            height: 1vw;
            position: absolute;
            float: left;
            margin: 0;
        }
        .car01 {
            width: 2vh;
            height: 2vh;
            float: left;
        }
        .text {
            width: 9vh;
            height: 2vh;
            margin: 3vh 0;
        }
        .text01 {
            float: left;
            text-align: center;
            font-size: 1.5vh;
        }
        #text001 {
            margin-top: 0;
            padding-top: 2vh;
        }
        #car1 {
            background-color: red;
        }
        #car2 {
            background-color: orange;
        }
        #car3 {
            background-color: yellow;
        }
        #car4 {
            background-color: green;
        }
        #car5 {
            background-color: blue;
        }
        #car01 {
            background-color: red;
        }
        #car02 {
            background-color: orange;
        }
        #car03 {
            background-color: yellow;
        }
        #car04 {
            background-color: green;
        }
        #car05 {
            background-color: blue;
        }
    </style>
</head>
<body>
<div id="map">
    <div id="car1" class="car"></div>
    <div id="car2" class="car"></div>
    <div id="car3" class="car"></div>
    <div id="car4" class="car"></div>
    <div id="car5" class="car"></div>
    <div id="car6" class="car" style="background-color: #001529;"></div>
    <div id="style">
        <div class="text" id="text001">
            <div id="car01" class="car01"></div>
            <div class="text01"><b> : 待机</b></div>
        </div>
        <div class="text">
            <div id="car02" class="car01"></div>
            <div class="text01"><b> : 待机</b></div>
        </div>
        <div class="text">
            <div id="car03" class="car01"></div>
            <div class="text01"><b> : 待机</b></div>
        </div>
        <div class="text">
            <div id="car04" class="car01"></div>
            <div class="text01"><b> : 待机</b></div>
        </div>
        <div class="text">
            <div id="car05" class="car01"></div>
            <div class="text01"><b> : 待机</b></div>
        </div>
    </div>
</div>
<img src="./img/321.png" alt="">
<button type="button" id="quite" class="btn btn-primary btn-lg ">踢出所有小车和客户端</button>
<script type="text/javascript">
    $('#quite').click(()=>{
        $.get({
            url:"/quite"
        })
    });
    let fx = (x) =>{
        let k = 6/500;
        let b = 15.2- (1300* (6/500));
        return k*x + b;
    }
    let cx = 800.0 / 9.3 ;
    let cy = 900.0 / 10.5;
    // $('#car6').css({
    //     "background-color" : "yellow",
    //     "left" : fx(1300) + "vw",
    //     "bottom" : fx(3300)   + "vw"
    // })
    let renderView = (data) => {
        console.log(data)
        let x = [0, 0, 0, 0, 0];
        let y = [0, 0, 0, 0, 0];
        let i = 0;
        for (let e in data) {
            x[i] = data[e][0].x;
            y[i] = data[e][0].y;
            //console.log(x[i])
            $('.text01 > b').eq(i).html(" : " + data[e][0].id)
            i = i + 1;
            $('#car' + i).css (
                {
                    "left" : fx(x[i-1])+ "vw",
                    "bottom" : fx(y[i-1])+ "vw"
                }
            ) ;
            // document.getElementById("car" + i).style.margin = (47 - y[i - 1] * 0.012) + "vw " + "0 " + "0 " + x[i - 1] * 0.012 + "vw";
        }
    }
    let req = () => {
        let handlee = (ejson) => {
            let ans = {};
            for (let e in ejson) {
                //console.log(ejson[e].id)
                if (!(ejson[e].id in ans)) {
                    ans[ejson[e].id] = [];
                }
                ans[ejson[e].id].push(ejson[e]);
            }
            return ans;
        }
        $.ajax({
            type: "post",
            url: "/getAll",
            contentType: 'application/json',
            async: false,
            success: function (msg, stuage, jqxmp) {
                //console.log(msg);
                renderView(handlee(msg));
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                clearInterval(task)
                //alert("上传失败");
            }
        });
    }
    //();
    let task = setInterval(() => {
        req();
    }, 2000);
</script>
</body>
</html>