zhouenguang
/
IronTowerCorrect


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        html, body, main {
            width: 100%;
            height: 100%;
        }
        main {
            display: flex;
            flex-direction: row;
        }
        main > div {
            position: relative;
            width: 85%;
        }
        #list {
            width: 15%;
            /* height: 100%; */
            overflow-y: scroll;
            padding: 10px;
        }
        #list li {
            position: relative;
        }
        #list li img {
            width: 100%;
        }
        #selectBorder {
            position: absolute;
            top: -2px;
            left: -3px;
            background: none;
            border: 3px solid #00FFFF;
            border-radius: 5px;
            width: 100%;
            height: 97%;
        }
        #label {
            padding: 2%;
            width: 96%;
            height: 15%;
            overflow-y: scroll;
        }
        #label li {
            display: inline-block;
            width: 33%;
            height: 20px;
            margin: 5px 0;
        }
        main div button {
            position: absolute;
            bottom: 30px;
            padding: 7px;
            width: 150px;
            display: none;
        }
        #download {
            left: 37%;
        }
        #uploadTxt {
            left: 50%;
        }
    </style>
</head>
<body>
    <main>
        <ul id="list"></ul>
        <div>
            <div id="scene3d"></div>
            <ul id="label"></ul>
            <button id="download" class="button">下载全景图</button>
            <button id="uploadTxt" class="button">
                上传纠正数据（txt）
                <input type="file" name="" id="uploadInput" style="display: none;">
            </button>
        </div>
    </main>

    <script src="./lib/three.min.js"></script>
    <script src="./lib/OrbitControls.js"></script>
    <script src="./lib/axios.min.js"></script>
    <script src="./lib/base64.min.js"></script>
    <script src="./lib/bytebuffer.min.js"></script>
    <script src="./lib/protobuf.min.js"></script>
    <script type="module">
        import Scene3d from './core/Scene3d.js'

        let sceneCode, currentPanoId

        // 读取场景码
        let querys = window.location.search.substr(1).split('&')
        for (let i = 0; i < querys.length; i++) {
            let keypair = querys[i].split('=')
            if (keypair.length === 2 && keypair[0] === "m") {
                sceneCode = keypair[1]
                break
            }
        }
        if(!sceneCode) alert("没有场景码")
        else start()

        function start() {
            // 初始化3d场景
            let scene3d = new Scene3d({
                dom: document.getElementById('scene3d'), 
                width: window.innerWidth * 0.85, 
                height: window.innerHeight * 0.75,
                sceneCode: sceneCode
            })
            
            let load = async (panoId) => {
                currentPanoId = panoId

                let labels = await scene3d.load(panoId)
                document.getElementById('label').innerHTML = labels
            }

            // 读取点位信息
            ;(async () => {
                const content = await axios.get(`https://4dkk.4dage.com/scene_view_data/${sceneCode}/images/vision.modeldata`, { responseType: 'arraybuffer', })
                let visionmodeldataPro = Base64.decode(
                    'Ly8KLy8gUHJvdG9jb2wgQnVmZmVyIGZvciBwdWNrIHZpc2liaWxpdHkgYW5kIHJlbGF0ZWQgZGF0YQovLwovL3BhY2thZ2UgZW9zLnN0b3JhZ2U7CgovLyBpbXBvcnQgImVvcy9pbmZyYS9jb21tb24ucHJvdG8iOwovLyBUaGUgZm9sbG93aW5nIHdlcmUgbWFudWFsbHkgZXh0cmFjdGVkIGhlcmUsIEpTIGRvZXMgbm90IGxpa2UgcHJvdG9idWYgaW1wb3J0cwoKbWVzc2FnZSBBZmZpbmUzZiB7CglvcHRpb25hbCBRdWF0ZXJuaW9uZiByb3RhdGlvbiA9IDE7CglvcHRpb25hbCBWZWN0b3IzZiB0cmFuc2xhdGlvbiA9IDI7Cn0KCm1lc3NhZ2UgUXVhdGVybmlvbmYgewoJb3B0aW9uYWwgZmxvYXQgdyA9IDE7CglvcHRpb25hbCBmbG9hdCB4ID0gMjsKCW9wdGlvbmFsIGZsb2F0IHkgPSAzOwoJb3B0aW9uYWwgZmxvYXQgeiA9IDQ7Cn0KCm1lc3NhZ2UgVmVjdG9yM2YgewoJb3B0aW9uYWwgZmxvYXQgeCA9IDE7CglvcHRpb25hbCBmbG9hdCB5ID0gMjsKCW9wdGlvbmFsIGZsb2F0IHogPSAzOwp9CgovLwovLyBPbmUgc3dlZXAgLyBwYW5vCi8vCm1lc3NhZ2UgU3dlZXBMb2NhdGlvbiB7CglvcHRpb25hbCBieXRlcyB1dWlkID0gMTsgIC8qIHV1aWQgKi8KCW9wdGlvbmFsIEFmZmluZTNmIHBvc2UgPSAyOyAgLyogY2FtZXJhIHBvc2UgKHgsIHkseikgaW4gbWV0ZXIgYW5kIGEgcXVhdGVybmlvbiovCglvcHRpb25hbCBWZWN0b3IzZiBwdWNrID0gMzsgIC8qIHB1Y2sgbG9jYXRpb24gLSB4IGFueSBpcyBnZW5lcmFsbHkgdGhlIHNhbWUgYXMgcG9zZSwgeiBpcyB0aGUgaGVpZ2h0IG9mIHRoZSBjbG9zZXN0IGZsb29yIHVuZGVyIHRoZSBjYW1lcmEgKi8KCW9wdGlvbmFsIGludDMyIGdyb3VwID0gNDsgIC8qIGZsb29yIGluZGV4ICovCglvcHRpb25hbCBpbnQzMiBzdWJncm91cCA9IDU7ICAvKiByb29tIGluZGV4ICovCglyZXBlYXRlZCBpbnQzMiB2aXNpYmxlcyA9IDY7ICAvKiBsaXN0IG9mIGluZGljZXMgdG8gYWxsIHB1Y2tzIHZpc2libGUgZnJvbSB0aGlzIHB1Y2sgKi8KCXJlcGVhdGVkIGludDMyIHZpc2libGVzMiA9IDc7IAoJcmVwZWF0ZWQgaW50MzIgdmlzaWJsZXMzID0gODsKfQoKLy8KLy8gQWxsIHB1Y2tzIGluIGEgbW9kZWwuIFB1Y2tzIGFyZSBzdG9yZWQgaW4gc2Nhbm5pbmcgb3JkZXIuCi8vCm1lc3NhZ2UgTmF2aWdhdGlvbkluZm8gewoJcmVwZWF0ZWQgU3dlZXBMb2NhdGlvbiBzd2VlcExvY2F0aW9ucyA9IDE7Cn0='
                )
                function decoderModeldata() {
                    var builderModeldata = dcodeIO.ProtoBuf.loadProto(visionmodeldataPro)
                    return builderModeldata.build('NavigationInfo')
                }
                let data = decoderModeldata().decode(content.data)
                let uuids = data.sweepLocations.map(n => n.uuid.toUTF8().replace(/-/g, ''))

                // 选中框
                let border = document.createElement("div")
                border.id = "selectBorder"
                // 创建点位列表
                uuids.forEach(panoId => {
                    let pano = document.createElement("li")
                    pano.innerHTML = `<img id="${panoId}" src="https://4dkk.4dage.com/scene_view_data/${sceneCode}/images/pan/low/${panoId}.jpg"/>`
                    document.getElementById("list").appendChild(pano)

                    // 点位切换事件
                    pano.addEventListener("click", (e) => {
                        Array.from(document.getElementsByClassName("button")).forEach(button => button.style.display = "block") // 显示两个button
                        e.srcElement.parentNode.appendChild(border) // 显示线框
                        load(e.srcElement.id)   // 加载点位数据
                    })
                })
            })()

            // 下载全景图
            document.getElementById("download").addEventListener("click", () => {
                const a_link = document.createElement("a")
                fetch(`https://4dkk.4dage.com/scene_view_data/${sceneCode}/images/pan/high/${currentPanoId}.jpg`)
                    .then(res => res.blob())
                    .then(blob => {
                        a_link.href = URL.createObjectURL(blob)
                        a_link.download = currentPanoId + ".jpg"
                        a_link.click()
                    })
            })

            // 上传txt
            document.getElementById("uploadTxt").addEventListener("click", () => {
                document.getElementById("uploadInput").click()
            })

            document.getElementById("uploadInput").addEventListener("change", (e) => {
                let file = e.target.files[0]

                const formData = new FormData()
                formData.append("num", sceneCode)
                formData.append("imgPath", currentPanoId + ".jpg")
                formData.append("file", file)

                axios.post(
                    "/service/scene/sceneMarkShape/editLabel", 
                    formData, 
                    {
                        'Content-Type': 'multipart/form-data',
                    }
                ).then(res => {
                    if(res.data.success) {
                        alert("上传成功")
                        load(currentPanoId)
                    } else {
                        alert("上传失败")
                    }
                }, err => {
                    console.error(err)
                })
            })
        }
    </script>
</body>
</html>