yf_elsa.cui
/
ninglu-frontt


			
							1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495
							<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测报灯网页</title>
<style>
html{
    --color-top-right: #ff005e;
    --color-bottom-left: #00d0ff;
}
html,body{margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden;}
body{   background: linear-gradient(-135deg, var(--color-top-right), var(--color-bottom-left));
    bottom: 0;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    transition: opacity 600ms;
    
}
canvas{display: block;
    /* background-color: #333; */
}
button{
    background: rgba(0,0,0,.3); color: #00d0ff; border: 0;  cursor: pointer; width: 80px; height: 36px; line-height: 36px; border-radius: 5px;
}
button.active{background: rgba(255, 255, 82, 0.5); color: #000;}
</style>
</head>
<body>

    <div id="canvas-container" style="width: 100%; height: 100%;"></div>
    <div style="position: fixed; bottom: 2em; left: 50%; margin-left: -124px; ">
        <button id="el_light">开灯</button>
        <button id="el_size">显示尺寸</button>
        <button id="el_rotate">旋转</button>
    </div>  
</body>
<script>
    window.baseURL = './'
</script>
<script type="module">
    import {openLight,closeLight,showSize,hideSize,autoRotate} from "./assets/js/index.js";
    

    let isOpenLight = false //开灯状态
    let isShowSize = false //显示尺寸
    let isRotate = true //是否旋转
    function lightToggle(e){
        if(isOpenLight) {
            isOpenLight = false
            closeLight();
            e.srcElement.innerText = '开灯'
            e.srcElement.classList.remove('active')
            
        } else {
            isOpenLight = true
            openLight();
            e.srcElement.innerText = '关灯'
            e.srcElement.classList.add('active')
        }
    }
    function sizeToggle(e){
        if(isShowSize) {
            isShowSize = false
            hideSize();
            e.srcElement.innerText = '显示尺寸'
            e.srcElement.classList.remove('active')
            
        } else {
            isShowSize = true
            showSize();
            e.srcElement.innerText = '隐藏尺寸'
            e.srcElement.classList.add('active')
        }
    }

    function rotateToggle(e){
        isRotate = !isRotate
        autoRotate(isRotate);
        if(isRotate) {
             e.srcElement.innerText = '旋转'
            e.srcElement.classList.remove('active')
        } else {
            e.srcElement.innerText = '停止旋转'
            e.srcElement.classList.add('active')
        }
    }
    document.getElementById('el_light').addEventListener('click', lightToggle);
    document.getElementById('el_size').addEventListener('click', sizeToggle);
    document.getElementById('el_rotate').addEventListener('click', rotateToggle);
</script>


</html>