usoft
/
saas-platform


			
				
					
						
						
							12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485
							<!DOCTYPE html>
<html lang="zh_CN">
    <head>
        <title>软件更新 - U企云服</title>
        <style>
            body {
                margin: 0;
                font-family: 'Microsoft YaHei';
                font-size: 16px;
                overflow: hidden;
            }
            .block {
                position: relative;
                transition: .2s;
                padding: 24px;
            }
            .progress {
                position: relative;
                line-height: 1;
            }
            .progress-circle {
                height: 126px; 
                width: 126px;
                margin: 103px auto;
            }
            .progress-text {
                position: absolute;
                top: 50%;
                left: 0;
                width: 100%;
                text-align: center;
                color: #606266;
                display: inline-block;
                vertical-align: middle;
                line-height: 1;
                transform: translateY(-50%);
            }
            .message {
                position: absolute;
                bottom: 20px;
                left: 0;
                width: 100%;
                text-align: center;
                color: #9c9c9c;
            }
        </style>
    </head>
    <body>
        <div class="block">
            <div class="progress">
                <div class="progress-circle">
                    <svg viewBox="0 0 100 100">
                        <path d="M 50 50 m 0 -47 a 47 47 0 1 1 0 94 a 47 47 0 1 1 0 -94" stroke="#e5e9f2" stroke-width="4.8" fill="none" class="progress-circle-track"></path>
                        <path d="M 50 50 m 0 -47 a 47 47 0 1 1 0 94 a 47 47 0 1 1 0 -94" stroke-linecap="round" stroke="#20a0ff" stroke-width="4.8" fill="none" class="progress-circle-path" 
                            style="stroke-dasharray: 299.08px, 299.08px; stroke-dashoffset: 299.08px; transition: stroke-dashoffset 0.6s ease 0s, stroke 0.6s ease 0s;"></path>
                    </svg>
                </div>
                <div class="progress-text">0%</div>
            </div>
            <div class="message">
                <span class="version"></span><span class="action">正在更新</span>，请稍等
            </div>
        </div>

        <script>
            const ipcRenderer = require('electron').ipcRenderer;
            ipcRenderer.on("message", (event, text) => {
                document.querySelector('.version').innerHTML = '版本' + text.version;
            });
            ipcRenderer.on("downloadProgress", (event, progressObj)=> {
                const percent = Math.round(progressObj.percent || 0);
                const pathEl = document.querySelector('.progress-circle-path');
                pathEl.style.strokeDashoffset = 299.08*(1 - percent/100) + 'px';
                if (percent >= 100) {
                    pathEl.style.stroke = '#13ce66';
                    document.querySelector('.action').innerHTML = '下载完毕，准备安装';
                } else if (percent >= 50) {
                    pathEl.style.stroke = '#8e71c7';
                }
                const textEl = document.querySelector('.progress-text');
                textEl.innerHTML = percent >= 100 ? '√' : (percent + '%');
            });
        </script>       
    </body>
</html>