mes-T09
/
mesclient-op170-dy


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687
							<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TSC 标签可视化编辑器</title>
    <!-- QR Code 生成库 -->
    <script src="https://cdn.jsdelivr.net/npm/qrcodejs@1.0.0/qrcode.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: #f5f5f5;
            padding: 20px;
        }

        .container {
            max-width: 1400px;
            margin: 0 auto;
            background: white;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            overflow: hidden;
        }

        .header {
            background: #2c3e50;
            color: white;
            padding: 20px 30px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .header h1 {
            font-size: 24px;
            font-weight: 500;
        }

        .header-actions {
            display: flex;
            gap: 10px;
        }

        .btn {
            padding: 10px 20px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
            transition: all 0.3s;
        }

        .btn-primary {
            background: #3498db;
            color: white;
        }

        .btn-primary:hover {
            background: #2980b9;
        }

        .btn-success {
            background: #27ae60;
            color: white;
        }

        .btn-success:hover {
            background: #229954;
        }

        .main-content {
            display: flex;
            height: calc(100vh - 140px);
        }

        .sidebar {
            width: 300px;
            border-right: 1px solid #ddd;
            overflow-y: auto;
            padding: 20px;
        }

        .sidebar h3 {
            margin-bottom: 15px;
            color: #2c3e50;
            font-size: 16px;
        }

        .element-list {
            list-style: none;
        }

        .element-item {
            padding: 12px;
            margin-bottom: 8px;
            background: #f8f9fa;
            border-radius: 4px;
            cursor: pointer;
            transition: all 0.2s;
            border-left: 3px solid #3498db;
        }

        .element-item:hover {
            background: #e9ecef;
        }

        .element-item.selected {
            background: #d4e6f1;
            border-left-color: #2980b9;
        }

        .element-item .label {
            font-weight: 500;
            color: #2c3e50;
            display: block;
            margin-bottom: 4px;
        }

        .element-item .type {
            font-size: 12px;
            color: #7f8c8d;
        }

        .canvas-area {
            flex: 1;
            padding: 30px;
            display: flex;
            flex-direction: column;
            align-items: center;
            background: #ecf0f1;
        }

        .canvas-wrapper {
            background: white;
            box-shadow: 0 4px 15px rgba(0,0,0,0.15);
            border-radius: 4px;
            padding: 20px;
            position: relative;
        }

        .canvas-container {
            position: relative;
            border: 2px solid #bdc3c7;
            background: white;
            cursor: crosshair;
        }

        .canvas-element {
            position: absolute;
            cursor: move;
            border: 2px solid transparent;
            transition: border-color 0.2s;
        }

        .canvas-element:hover {
            border-color: #3498db;
        }

        .canvas-element.selected {
            border-color: #e74c3c;
            box-shadow: 0 0 0 2px rgba(231, 76, 60, 0.3);
        }

        .canvas-element.text-element {
            white-space: nowrap;
            font-family: Arial, sans-serif;
            padding: 2px 4px;
        }

        .canvas-element.qrcode-element {
            background: #ecf0f1;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 10px;
            color: #7f8c8d;
        }

        .properties-panel {
            width: 320px;
            border-left: 1px solid #ddd;
            overflow-y: auto;
            padding: 20px;
        }

        .properties-panel h3 {
            margin-bottom: 15px;
            color: #2c3e50;
            font-size: 16px;
        }

        .property-group {
            margin-bottom: 20px;
        }

        .property-group label {
            display: block;
            margin-bottom: 5px;
            color: #34495e;
            font-size: 13px;
            font-weight: 500;
        }

        .property-group input,
        .property-group select {
            width: 100%;
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 13px;
        }

        .property-group input:focus,
        .property-group select:focus {
            outline: none;
            border-color: #3498db;
        }

        .info-bar {
            padding: 10px 20px;
            background: #34495e;
            color: white;
            font-size: 13px;
            display: flex;
            justify-content: space-between;
        }

        .zoom-controls {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 15px;
        }

        .zoom-btn {
            padding: 5px 12px;
            background: #7f8c8d;
            color: white;
            border: none;
            border-radius: 3px;
            cursor: pointer;
            font-size: 12px;
        }

        .zoom-btn:hover {
            background: #6c7a7d;
        }

        .zoom-level {
            font-size: 13px;
            color: #2c3e50;
            min-width: 60px;
            text-align: center;
        }

        .property-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 10px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>TSC 标签可视化编辑器</h1>
            <div class="header-actions">
                <button class="btn btn-primary" onclick="loadConfig()">加载配置</button>
                <button class="btn btn-success" onclick="saveConfig()">保存配置</button>
            </div>
        </div>

        <div class="main-content">
            <!-- 左侧元素列表 -->
            <div class="sidebar">
                <h3>📋 标签元素</h3>
                <ul class="element-list" id="elementList"></ul>
            </div>

            <!-- 中间画布区域 -->
            <div class="canvas-area">
                <div class="zoom-controls">
                    <button class="zoom-btn" onclick="zoomOut()">缩小 -</button>
                    <span class="zoom-level" id="zoomLevel">100%</span>
                    <button class="zoom-btn" onclick="zoomIn()">放大 +</button>
                    <button class="zoom-btn" onclick="resetZoom()">重置</button>
                </div>
                <div class="canvas-wrapper">
                    <div class="canvas-container" id="canvas"></div>
                </div>
            </div>

            <!-- 右侧属性面板 -->
            <div class="properties-panel">
                <h3>⚙️ 属性设置</h3>
                <div id="propertiesContent">
                    <p style="color: #7f8c8d; font-size: 13px;">请选择一个元素</p>
                </div>
            </div>
        </div>

        <div class="info-bar">
            <span>标签尺寸: <span id="labelSize">76.2mm × 38.1mm</span></span>
            <span>选中元素: <span id="selectedElement">无</span></span>
        </div>
    </div>

    <script>
        // 全局变量
        let config = null;
        let selectedElementId = null;
        let zoom = 1.0;
        const DPI = 203 / 25.4; // 203 DPI，1mm = 8 dots
        let isDragging = false;
        let dragStartX = 0;
        let dragStartY = 0;
        let dragElement = null;

        // 加载配置
        async function loadConfig() {
            try {
                const response = await fetch('../config/label-config.json');
                config = await response.json();
                renderCanvas();
                renderElementList();
                showMessage('配置加载成功', 'success');
            } catch (error) {
                showMessage('配置加载失败: ' + error.message, 'error');
            }
        }

        // 保存配置
        function saveConfig() {
            if (!config) {
                showMessage('没有配置可保存', 'error');
                return;
            }

            const json = JSON.stringify(config, null, 2);
            const blob = new Blob([json], { type: 'application/json' });
            const url = URL.createObjectURL(blob);
            const a = document.createElement('a');
            a.href = url;
            a.download = 'label-config.json';
            a.click();
            URL.revokeObjectURL(url);
            showMessage('配置已下载', 'success');
        }

        // 渲染画布
        function renderCanvas() {
            if (!config) return;

            const canvas = document.getElementById('canvas');
            const widthPx = config.labelSize.width * DPI * zoom;
            const heightPx = config.labelSize.height * DPI * zoom;

            canvas.style.width = widthPx + 'px';
            canvas.style.height = heightPx + 'px';
            canvas.innerHTML = '';

            config.elements.forEach(element => {
                const div = document.createElement('div');
                div.className = 'canvas-element';
                div.id = 'canvas-' + element.id;
                div.dataset.id = element.id;

                const x = element.x * zoom;
                const y = element.y * zoom;

                div.style.left = x + 'px';
                div.style.top = y + 'px';

                if (element.type === 'text') {
                    div.className += ' text-element';
                    div.textContent = element.text;
                    div.style.fontSize = (element.fontSize * zoom) + 'px';
                    div.style.fontFamily = element.fontFamily;
                    div.style.fontWeight = element.fontStyle === 1 ? 'bold' : 'normal';
                } else if (element.type === 'qrcode') {
                    div.className += ' qrcode-element';
                    div.style.width = (element.width * zoom) + 'px';
                    div.style.height = (element.height * zoom) + 'px';
                    div.style.background = 'white';
                    div.style.padding = '0';

                    // 生成真实二维码
                    const qrData = element.text || '+KB60IS3031T811001201'; // 默认示例数据
                    try {
                        new QRCode(div, {
                            text: qrData,
                            width: element.width * zoom,
                            height: element.height * zoom,
                            colorDark: '#000000',
                            colorLight: '#ffffff',
                            correctLevel: QRCode.CorrectLevel.L
                        });
                    } catch (e) {
                        div.textContent = 'QR';
                        div.style.background = '#ecf0f1';
                    }
                }

                if (element.id === selectedElementId) {
                    div.className += ' selected';
                }

                div.addEventListener('click', (e) => {
                    e.stopPropagation();
                    selectElement(element.id);
                });

                div.addEventListener('mousedown', startDrag);

                canvas.appendChild(div);
            });

            document.getElementById('labelSize').textContent =
                `${config.labelSize.width}mm × ${config.labelSize.height}mm`;
        }

        // 拖拽开始
        function startDrag(e) {
            isDragging = true;
            dragElement = e.target;
            dragStartX = e.clientX;
            dragStartY = e.clientY;

            const elementId = dragElement.dataset.id;
            selectElement(elementId);

            document.addEventListener('mousemove', onDrag);
            document.addEventListener('mouseup', stopDrag);

            e.preventDefault();
        }

        // 拖拽中
        function onDrag(e) {
            if (!isDragging || !dragElement) return;

            const dx = (e.clientX - dragStartX) / zoom;
            const dy = (e.clientY - dragStartY) / zoom;

            const elementId = dragElement.dataset.id;
            const element = config.elements.find(el => el.id === elementId);

            if (element) {
                element.x = Math.max(0, element.x + dx);
                element.y = Math.max(0, element.y + dy);
                renderCanvas();
                updateProperties();
            }

            dragStartX = e.clientX;
            dragStartY = e.clientY;
        }

        // 拖拽结束
        function stopDrag() {
            isDragging = false;
            dragElement = null;
            document.removeEventListener('mousemove', onDrag);
            document.removeEventListener('mouseup', stopDrag);
        }

        // 渲染元素列表
        function renderElementList() {
            const list = document.getElementById('elementList');
            list.innerHTML = '';

            config.elements.forEach(element => {
                const li = document.createElement('li');
                li.className = 'element-item';
                li.dataset.id = element.id;
                li.innerHTML = `
                    <span class="label">${element.label}</span>
                    <span class="type">${element.type === 'text' ? '文本' : '二维码'} - (${Math.round(element.x)}, ${Math.round(element.y)})</span>
                `;
                li.addEventListener('click', () => selectElement(element.id));
                list.appendChild(li);
            });
        }

        // 选择元素
        function selectElement(elementId) {
            selectedElementId = elementId;

            // 更新列表选中状态
            document.querySelectorAll('.element-item').forEach(item => {
                item.classList.toggle('selected', item.dataset.id === elementId);
            });

            // 更新画布选中状态
            document.querySelectorAll('.canvas-element').forEach(el => {
                el.classList.toggle('selected', el.dataset.id === elementId);
            });

            const element = config.elements.find(el => el.id === elementId);
            document.getElementById('selectedElement').textContent = element ? element.label : '无';

            updateProperties();
        }

        // 更新属性面板
        function updateProperties() {
            if (!selectedElementId) {
                document.getElementById('propertiesContent').innerHTML =
                    '<p style="color: #7f8c8d; font-size: 13px;">请选择一个元素</p>';
                return;
            }

            const element = config.elements.find(el => el.id === selectedElementId);
            if (!element) return;

            let html = '';

            // 位置属性
            html += `
                <div class="property-group">
                    <label>ID</label>
                    <input type="text" value="${element.id}" disabled>
                </div>
                <div class="property-group">
                    <div class="property-row">
                        <div>
                            <label>X 坐标 (dots)</label>
                            <input type="number" value="${element.x}" onchange="updateElementProperty('x', parseFloat(this.value))">
                        </div>
                        <div>
                            <label>Y 坐标 (dots)</label>
                            <input type="number" value="${element.y}" onchange="updateElementProperty('y', parseFloat(this.value))">
                        </div>
                    </div>
                </div>
            `;

            if (element.type === 'text') {
                html += `
                    <div class="property-group">
                        <label>文本内容</label>
                        <input type="text" value="${element.text}" onchange="updateElementProperty('text', this.value)">
                    </div>
                    <div class="property-group">
                        <label>字体大小 (pt)</label>
                        <input type="number" value="${element.fontSize}" onchange="updateElementProperty('fontSize', parseInt(this.value))">
                    </div>
                    <div class="property-group">
                        <label>字体</label>
                        <select value="${element.fontFamily}" onchange="updateElementProperty('fontFamily', this.value)">
                            <option value="Arial" ${element.fontFamily === 'Arial' ? 'selected' : ''}>Arial</option>
                            <option value="SimSun" ${element.fontFamily === 'SimSun' ? 'selected' : ''}>SimSun (宋体)</option>
                            <option value="SimHei" ${element.fontFamily === 'SimHei' ? 'selected' : ''}>SimHei (黑体)</option>
                        </select>
                    </div>
                    <div class="property-group">
                        <label>字体样式</label>
                        <select value="${element.fontStyle}" onchange="updateElementProperty('fontStyle', parseInt(this.value))">
                            <option value="0" ${element.fontStyle === 0 ? 'selected' : ''}>正常</option>
                            <option value="1" ${element.fontStyle === 1 ? 'selected' : ''}>加粗</option>
                        </select>
                    </div>
                `;
            } else if (element.type === 'qrcode') {
                html += `
                    <div class="property-group">
                        <div class="property-row">
                            <div>
                                <label>宽度 (dots)</label>
                                <input type="number" value="${element.width}" onchange="updateElementProperty('width', parseInt(this.value))">
                            </div>
                            <div>
                                <label>高度 (dots)</label>
                                <input type="number" value="${element.height}" onchange="updateElementProperty('height', parseInt(this.value))">
                            </div>
                        </div>
                    </div>
                    <div class="property-group">
                        <label>纠错等级</label>
                        <select value="${element.eccLevel}" onchange="updateElementProperty('eccLevel', this.value)">
                            <option value="L" ${element.eccLevel === 'L' ? 'selected' : ''}>L (7%)</option>
                            <option value="M" ${element.eccLevel === 'M' ? 'selected' : ''}>M (15%)</option>
                            <option value="Q" ${element.eccLevel === 'Q' ? 'selected' : ''}>Q (25%)</option>
                            <option value="H" ${element.eccLevel === 'H' ? 'selected' : ''}>H (30%)</option>
                        </select>
                    </div>
                    <div class="property-group">
                        <label>单元宽度</label>
                        <input type="number" value="${element.cellWidth}" onchange="updateElementProperty('cellWidth', this.value)">
                    </div>
                `;
            }

            document.getElementById('propertiesContent').innerHTML = html;
        }

        // 更新元素属性
        function updateElementProperty(property, value) {
            if (!selectedElementId) return;

            const element = config.elements.find(el => el.id === selectedElementId);
            if (element) {
                element[property] = value;
                renderCanvas();
                renderElementList();
            }
        }

        // 缩放控制
        function zoomIn() {
            zoom = Math.min(zoom + 0.1, 2.0);
            document.getElementById('zoomLevel').textContent = Math.round(zoom * 100) + '%';
            renderCanvas();
        }

        function zoomOut() {
            zoom = Math.max(zoom - 0.1, 0.5);
            document.getElementById('zoomLevel').textContent = Math.round(zoom * 100) + '%';
            renderCanvas();
        }

        function resetZoom() {
            zoom = 1.0;
            document.getElementById('zoomLevel').textContent = '100%';
            renderCanvas();
        }

        // 显示消息
        function showMessage(message, type) {
            const color = type === 'success' ? '#27ae60' : '#e74c3c';
            const div = document.createElement('div');
            div.style.cssText = `
                position: fixed;
                top: 20px;
                right: 20px;
                background: ${color};
                color: white;
                padding: 15px 25px;
                border-radius: 4px;
                box-shadow: 0 4px 12px rgba(0,0,0,0.15);
                z-index: 1000;
                animation: slideIn 0.3s ease-out;
            `;
            div.textContent = message;
            document.body.appendChild(div);

            setTimeout(() => {
                div.style.animation = 'slideOut 0.3s ease-out';
                setTimeout(() => div.remove(), 300);
            }, 2000);
        }

        // 初始化
        window.addEventListener('load', loadConfig);
    </script>

    <style>
        @keyframes slideIn {
            from {
                transform: translateX(400px);
                opacity: 0;
            }
            to {
                transform: translateX(0);
                opacity: 1;
            }
        }

        @keyframes slideOut {
            from {
                transform: translateX(0);
                opacity: 1;
            }
            to {
                transform: translateX(400px);
                opacity: 0;
            }
        }
    </style>
</body>
</html>