映射关系表，HTML/Vue代码在线实时编辑、预览

            
                1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224

            
            <!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>酒店品牌匹配工具</title>
    <!-- 引入XLSX库 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.16.9/xlsx.full.min.js"></script>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f9;
            margin: 0;
            padding: 20px;
            color: #333;
        }
        h1 {
            text-align: center;
            color: #2c3e50;
        }
        .container {
            max-width: 600px;
            margin: 0 auto;
            background: #fff;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }
        .upload-section {
            margin-bottom: 20px;
        }
        .upload-section h3 {
            margin-bottom: 10px;
            color: #3498db;
        }
        .upload-section button {
            background-color: #3498db;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 5px;
            cursor: pointer;
            font-size: 16px;
            margin: 5px;
        }
        .upload-section button:hover {
            background-color: #2980b9;
        }
        .upload-section input {
            display: none;
        }
        .file-info {
            margin-top: 10px;
            font-size: 14px;
            color: #666;
        }
        .file-info span {
            color: #27ae60;
            font-weight: bold;
        }
        .progress-bar {
            width: 100%;
            background-color: #e0e0e0;
            border-radius: 5px;
            margin-top: 20px;
            overflow: hidden;
        }
        .progress-bar-inner {
            width: 0;
            height: 20px;
            background-color: #3498db;
            transition: width 0.5s ease;
        }
        .instructions {
            text-align: center;
            font-size: 14px;
            color: #666;
            margin-top: 10px;
        }
    </style>
    <script>
        let mappingData = null; // 存储映射表数据
        let targetData = null; // 存储目标表数据

        // 处理上传的映射表
        function handleMappingFile(e) {
            const file = e.target.files[0];
            if (!file) {
                alert("请选择一个文件！");
                return;
            }

            const reader = new FileReader();
            reader.onload = function (event) {
                const data = event.target.result;
                const workbook = XLSX.read(data, { type: 'binary' });
                const firstSheetName = workbook.SheetNames[0];
                const worksheet = workbook.Sheets[firstSheetName];
                const json = XLSX.utils.sheet_to_json(worksheet, { header: 1 });

                // 忽略标题行，存储映射数据
                mappingData = json.slice(1);

                // 显示文件名和上传成功提示
                document.getElementById('mappingFileInfo').innerHTML = `
                    已上传文件：<span>${file.name}</span> - <span>上传成功</span>
                `;
            };
            reader.readAsBinaryString(file);
        }

        // 处理上传的目标表
        function handleTargetFile(e) {
            const file = e.target.files[0];
            if (!file) {
                alert("请选择一个文件！");
                return;
            }

            const reader = new FileReader();
            reader.onload = function (event) {
                const data = event.target.result;
                const workbook = XLSX.read(data, { type: 'binary' });
                const firstSheetName = workbook.SheetNames[0];
                const worksheet = workbook.Sheets[firstSheetName];
                const json = XLSX.utils.sheet_to_json(worksheet, { header: 1 });

                // 忽略标题行，存储目标数据
                targetData = json.slice(1);

                // 显示文件名和上传成功提示
                document.getElementById('targetFileInfo').innerHTML = `
                    已上传文件：<span>${file.name}</span> - <span>上传成功</span>
                `;
            };
            reader.readAsBinaryString(file);
        }

        // 开始分析
        function startAnalysis() {
            if (!mappingData || !targetData) {
                alert("请先上传映射表和目标表！");
                return;
            }

            // 模拟进度条
            const progressBar = document.getElementById('progress-bar-inner');
            let progress = 0;
            const interval = setInterval(() => {
                progress += 10;
                progressBar.style.width = `${progress}%`;
                if (progress >= 100) {
                    clearInterval(interval);
                }
            }, 300); // 3秒完成

            // 遍历目标表的每一行
            for (let i = 0; i < targetData.length; i++) {
                const hotelName = String(targetData[i][2]); // C列是酒店名称，确保是字符串

                // 遍历映射表的每一行
                for (let j = 0; j < mappingData.length; j++) {
                    const brandName = String(mappingData[j][1]); // B列是品牌名，确保是字符串

                    // 检查目标表的C列是否包含映射表B列的连续品牌名
                    if (hotelName.includes(brandName)) {
                        targetData[i][0] = mappingData[j][0]; // A列是集团名
                        targetData[i][1] = brandName; // B列是品牌名
                        break; // 匹配成功后跳出循环
                    }
                }
            }

            alert("分析完成！");
            document.getElementById('exportButton').style.display = 'block';
        }

        // 导出结果
        function exportResult() {
            if (!targetData) {
                alert("请先完成分析！");
                return;
            }

            // 添加标题行
            const resultData = [["集团名", "品牌名", "酒店名称"]].concat(targetData);

            const newWorkbook = XLSX.utils.book_new();
            const newWorksheet = XLSX.utils.aoa_to_sheet(resultData);
            XLSX.utils.book_append_sheet(newWorkbook, newWorksheet, "Sheet1");
            XLSX.writeFile(newWorkbook, 'processed_hotels.xlsx');
        }
    </script>
</head>
<body>
    <div class="container">
        <h1>酒店品牌匹配工具</h1>
        <div class="upload-section">
            <h3>上传映射表</h3>
            <button onclick="document.getElementById('mappingFileInput').click()">上传映射表</button>
            <input type="file" id="mappingFileInput" onchange="handleMappingFile(event)" accept=".xlsx,.xls" />
            <div id="mappingFileInfo" class="file-info"></div>
            <p>映射表格式：A列是集团名，B列是品牌名。</p>
        </div>
        <div class="upload-section">
            <h3>上传目标表</h3>
            <button onclick="document.getElementById('targetFileInput').click()">上传目标表</button>
            <input type="file" id="targetFileInput" onchange="handleTargetFile(event)" accept=".xlsx,.xls" />
            <div id="targetFileInfo" class="file-info"></div>
            <p>目标表格式：A、B列为空白，C列是酒店名称。</p>
        </div>
        <div class="upload-section">
            <button onclick="startAnalysis()">开始分析</button>
            <button id="exportButton" onclick="exportResult()" style="display: none;">导出结果</button>
        </div>
        <div class="progress-bar">
            <div id="progress-bar-inner" class="progress-bar-inner"></div>
        </div>
        <div class="instructions">
            <p>请先上传映射表，再上传目标表，点击“开始分析”按钮进行匹配。</p>
        </div>
    </div>
</body>
</html>