在車輛租賃行業，數據的高效管理與分析對于企業的運營決策、資源調配及客戶服務優化至關重要。自建 Excel 實現多表統計交互，如同為行業裝上了效能驅動引擎，助力企業在復雜多變的市場環境中穩健前行。
一、精準資源管理，優化車輛調配
車輛租賃企業擁有多種類型、不同狀態的車輛資源，分布于各個租賃站點。通過自建 Excel 并實現多表統計交互，可將車輛信息表、租賃訂單表、站點信息表等進行關聯分析。例如，在車輛信息表中記錄車輛型號、購置時間、維修記錄等，租賃訂單表記錄租車時間、還車時間、客戶信息，站點信息表記錄各站點位置、可容納車輛數等。利用 Excel 的函數和數據透視表功能，企業能實時統計各站點不同類型車輛的庫存情況，根據訂單趨勢提前預測車輛需求。如通過多表交互分析發現某站點在旅游旺季對 SUV 車型的租賃需求大增，企業可提前從其他站點調配車輛，避免供不應求的情況，提高車輛利用率，降低運營成本。
二、深度客戶洞察，提升服務質量
客戶是車輛租賃企業的核心資產，自建 Excel 多表統計交互有助于深入了解客戶行為和需求。將客戶信息表、租賃歷史表、客戶反饋表等進行整合分析，企業可以統計客戶的租賃頻率、租賃時長、偏好車型等信息。例如，通過多表關聯發現某些客戶經常租賃高端車型且租賃時間較長，企業可針對性地為這些客戶提供專屬優惠、優先預訂權等增值服務，增強客戶忠誠度。同時，結合客戶反饋表，分析不同車型的客戶滿意度，找出需要改進的服務環節，如車輛清潔程度、取還車流程便捷性等，從而優化服務質量，提升品牌形象。
三、精細財務分析，支持決策制定
財務數據是企業運營的晴雨表，在車輛租賃行業也不例外。自建 Excel 多表統計交互能夠將租賃合同表、財務收支表、車輛成本表等相關數據進行綜合分析。通過多表統計，企業可以準確計算每筆租賃業務的利潤，分析不同車型、不同租賃時長的盈利能力。例如，對比不同車型的購置成本、維修成本與租賃收入，評估哪種車型為企業帶來的利潤更高。此外，還能通過分析歷史數據預測未來的財務趨勢，如在特定季節或活動期間的收入變化，為企業制定預算、投資決策提供有力支持。例如，根據多表分析結果，企業可決定是否購置新車型以滿足市場需求，或調整租賃價格策略以提高整體收益。
四、風險預警與防控，保障企業穩定運營
車輛租賃行業面臨著諸如車輛損壞、逾期未還、客戶違約等多種風險。自建 Excel 多表統計交互可通過整合租賃訂單表、車輛狀態表、客戶信用表等數據，實現風險預警功能。例如，通過設置數據條件格式和函數公式，當車輛租賃即將到期時自動提醒工作人員，降低逾期未還風險；通過分析客戶歷史租賃記錄和信用數據，對信用不佳的客戶進行風險評估，在接單時謹慎處理，避免潛在的違約風險。同時，結合車輛狀態表，對車輛的維修頻率、故障情況進行統計分析，提前發現車輛潛在的安全隱患，及時安排維修保養，保障車輛的安全運營，維護企業的聲譽和利益。
自建 Excel 實現多表統計交互在車輛租賃行業中發揮著不可或缺的重要作用。它從資源管理、客戶服務、財務決策到風險防控等多個維度，為企業提供了全面、精準的數據支持和分析能力，幫助企業在激烈的市場競爭中脫穎而出，實現可持續發展。隨著行業的不斷發展和數據量的持續增長，不斷優化和完善自建 Excel 多表統計交互功能，將成為車輛租賃企業提升核心競爭力的關鍵舉措。
代碼
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>未來之窗EXCEL戴維斯跨表交互模擬</title><style>/* 基礎樣式 */* {box-sizing: border-box;margin: 0;padding: 0;font-family: Arial, sans-serif;}body {background-color: #f5f7fa;color: #1d2129;line-height: 1.5;min-height: 100vh;display: flex;flex-direction: column;}/* 布局組件 */.container {width: 100%;max-width: 1200px;margin: 0 auto;padding: 0 20px;}/* 頭部樣式 */header {background-color: white;box-shadow: 0 2px 4px rgba(0,0,0,0.1);padding: 15px 0;position: sticky;top: 0;z-index: 100;}.header-content {display: flex;justify-content: space-between;align-items: center;}.logo {font-size: 1.5rem;font-weight: bold;color: #165dff;}/* 主內容區 */main {flex: 1;padding: 30px 0;}/* 步驟指示器 */.steps {display: flex;justify-content: space-between;max-width: 800px;margin: 0 auto 40px;position: relative;}.steps::before {content: '';position: absolute;top: 20px;left: 50px;right: 50px;height: 4px;background-color: #e5e6eb;z-index: 1;}.steps::after {content: '';position: absolute;top: 20px;left: 50px;width: 33%;height: 4px;background-color: #165dff;z-index: 2;transition: width 0.5s ease;}.step {display: flex;flex-direction: column;align-items: center;position: relative;z-index: 3;}.step-icon {width: 40px;height: 40px;border-radius: 50%;background-color: #165dff;color: white;display: flex;align-items: center;justify-content: center;margin-bottom: 8px;font-weight: bold;}.step:nth-child(3) .step-icon {background-color: #e5e6eb;color: #86909c;}.step-text {font-size: 0.9rem;font-weight: 500;}/* 網格布局 */.grid-layout {display: grid;grid-template-columns: 1fr;gap: 20px;}@media (min-width: 992px) {.grid-layout {grid-template-columns: 1fr 2fr;}}/* 卡片組件 */.card {background-color: white;border-radius: 6px;box-shadow: 0 2px 8px rgba(0,0,0,0.08);padding: 20px;margin-bottom: 20px;}.card-title {font-size: 1.1rem;font-weight: 600;margin-bottom: 15px;color: #165dff;display: flex;align-items: center;}.card-title span {margin-right: 8px;}/* 表單元素 */.form-group {margin-bottom: 15px;}label {display: block;margin-bottom: 6px;font-size: 0.9rem;color: #4e5969;}input, select, textarea {width: 100%;padding: 8px 12px;border: 1px solid #dcdee2;border-radius: 4px;font-size: 0.9rem;transition: border-color 0.2s;}input:focus, select:focus, textarea:focus {outline: none;border-color: #165dff;box-shadow: 0 0 0 2px rgba(22, 93, 255, 0.1);}/* 按鈕樣式 */.btn {display: inline-flex;align-items: center;justify-content: center;padding: 8px 16px;background-color: #165dff;color: white;border: none;border-radius: 4px;font-size: 0.9rem;font-weight: 500;cursor: pointer;transition: background-color 0.2s;}.btn:hover {background-color: #0e47cc;}.btn-success {background-color: #52c41a;}.btn-success:hover {background-color: #43a616;}.btn-text {background: none;color: #165dff;padding: 4px 8px;}.btn-text:hover {background-color: rgba(22, 93, 255, 0.1);color: #0e47cc;}/* 表選擇樣式 */.table-option {display: flex;align-items: center;padding: 10px;border: 1px solid #dcdee2;border-radius: 4px;margin-bottom: 10px;cursor: pointer;transition: all 0.2s;}.table-option:hover {border-color: #165dff;background-color: rgba(22, 93, 255, 0.05);}.table-option input {width: auto;margin-right: 10px;}/* 字段配置樣式 */.field-item {padding: 15px;border: 1px solid #dcdee2;border-radius: 4px;background-color: #fafafa;margin-bottom: 15px;}.field-row {display: flex;flex-wrap: wrap;gap: 10px;}.field-col {flex: 1;min-width: 120px;}.remove-field {background: none;border: none;color: #86909c;cursor: pointer;align-self: flex-end;padding: 4px;}.remove-field:hover {color: #ff4d4f;}.add-field-container {display: flex;justify-content: flex-end;margin-bottom: 20px;}/* SQL預覽樣式 */.sql-preview {position: relative;background-color: #fafafa;border-radius: 4px;padding: 15px;font-family: monospace;font-size: 0.9rem;line-height: 1.5;white-space: pre;overflow-x: auto;max-height: 300px;margin-bottom: 15px;}.copy-btn {position: absolute;top: 10px;right: 10px;background-color: #f0f2f5;border: none;border-radius: 4px;padding: 4px 8px;cursor: pointer;font-size: 0.8rem;}.copy-btn:hover {background-color: #e5e6eb;}/* 表格樣式 */.result-table {width: 100%;border-collapse: collapse;margin-bottom: 20px;}.result-table th,.result-table td {padding: 12px 15px;text-align: left;border-bottom: 1px solid #e5e6eb;}.result-table th {background-color: #f5f7fa;font-weight: 600;color: #4e5969;font-size: 0.85rem;}.result-table tr:hover {background-color: #fafafa;}/* 分頁樣式 */.pagination {display: flex;justify-content: space-between;align-items: center;margin-top: 20px;font-size: 0.9rem;}.page-controls {display: flex;gap: 5px;}.page-btn {padding: 5px 10px;border: 1px solid #dcdee2;border-radius: 4px;background-color: white;cursor: pointer;}.page-btn:hover {border-color: #165dff;color: #165dff;}.page-btn.active {background-color: #165dff;color: white;border-color: #165dff;}.page-btn:disabled {opacity: 0.5;cursor: not-allowed;}/* 連接設置樣式 */.join-settings {margin-top: 20px;padding-top: 20px;border-top: 1px solid #e5e6eb;}.toggle-container {display: flex;justify-content: space-between;align-items: center;margin-bottom: 15px;}.toggle-switch {position: relative;display: inline-block;width: 40px;height: 20px;}.toggle-switch input {opacity: 0;width: 0;height: 0;}.toggle-slider {position: absolute;cursor: pointer;top: 0;left: 0;right: 0;bottom: 0;background-color: #e5e6eb;transition: .2s;border-radius: 20px;}.toggle-slider:before {position: absolute;content: "";height: 16px;width: 16px;left: 2px;bottom: 2px;background-color: white;transition: .2s;border-radius: 50%;}input:checked + .toggle-slider {background-color: #165dff;}input:checked + .toggle-slider:before {transform: translateX(20px);}/* 按鈕組 */.btn-group {display: flex;justify-content: flex-end;gap: 10px;margin-top: 20px;}/* 通知樣式 */.notification {position: fixed;top: 20px;right: 20px;background-color: #1d2129;color: white;padding: 10px 15px;border-radius: 4px;box-shadow: 0 2px 8px rgba(0,0,0,0.2);transform: translateX(calc(100% + 20px));transition: transform 0.3s ease;z-index: 1000;display: flex;align-items: center;}.notification.show {transform: translateX(0);}.notification span {margin-left: 8px;}/* 頁腳樣式 */footer {background-color: white;border-top: 1px solid #e5e6eb;padding: 15px 0;margin-top: 40px;}.footer-content {text-align: center;font-size: 0.85rem;color: #86909c;}</style>
</head>
<body><!-- 頂部導航欄 --><header><div class="container header-content"><div class="logo">未來之窗EXCEL戴維斯跨表交互模擬</div><div><button class="btn-text">幫助</button><button class="btn-text">設置</button></div></div></header><!-- 主要內容區 --><main><div class="container"><!-- 步驟指示器 --><div class="steps"><div class="step"><div class="step-icon">1</div><div class="step-text">選擇表</div></div><div class="step"><div class="step-icon">2</div><div class="step-text">配置字段</div></div><div class="step"><div class="step-icon">3</div><div class="step-text">查看結果</div></div></div><div class="grid-layout"><!-- 左側面板：表和字段選擇 --><div><!-- 表選擇卡片 --><div class="card"><div class="card-title"><span>1</span>選擇數據表</div><div><div class="table-option"><input type="radio" name="table" value="table1" checked><span>東方仙盟小無相</span></div><div class="table-option"><input type="radio" name="table" value="table2"><span>項目信息表</span></div><div class="table-option"><input type="radio" name="table" value="table3"><span>客戶信息表</span></div></div><div style="margin-top: 20px; padding-top: 20px; border-top: 1px solid #e5e6eb;"><div class="form-group"><label>表篩選條件 (table_sn)</label><input type="text" id="mainTableSn" value="779802252fb750aa016d20fc803b59ef052edec990002"></div><button class="btn-text">+ 添加更多條件</button></div></div><!-- 字段配置卡片 --><div class="card"><div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px;"><div class="card-title"><span>2</span>字段配置</div><button id="addFieldBtn" class="btn">+ 添加字段</button></div><div id="fieldsContainer"><!-- 字段配置項1 --><div class="field-item"><div class="field-row"><div class="field-col"><label>字段</label><select class="field-select"><option value="param1">param1</option><option value="param2">param2</option><option value="param11">param11</option><option value="param12">param12</option><option value="param13">param13</option><option value="param16" selected>param16</option></select></div><div class="field-col"><label>顯示名稱</label><input type="text" value="工程名稱" class="display-name"></div><div class="field-col"><label>處理方式</label><select class="process-type"><option value="show" selected>顯示</option><option value="sum">匯總(SUM)</option><option value="count">統計(COUNT)</option></select></div><div><button type="button" class="remove-field">×</button></div></div></div><!-- 字段配置項2 --><div class="field-item"><div class="field-row"><div class="field-col"><label>字段</label><select class="field-select"><option value="param1">param1</option><option value="param2" selected>param2</option><option value="param11">param11</option><option value="param12">param12</option><option value="param13">param13</option><option value="param16">param16</option></select></div><div class="field-col"><label>顯示名稱</label><input type="text" value="結算單號" class="display-name"></div><div class="field-col"><label>處理方式</label><select class="process-type"><option value="show" selected>顯示</option><option value="sum">匯總(SUM)</option><option value="count">統計(COUNT)</option></select></div><div><button type="button" class="remove-field">×</button></div></div></div><!-- 字段配置項3 --><div class="field-item"><div class="field-row"><div class="field-col"><label>字段</label><select class="field-select"><option value="param1">param1</option><option value="param2">param2</option><option value="param11" selected>param11</option><option value="param12">param12</option><option value="param13">param13</option><option value="param16">param16</option></select></div><div class="field-col"><label>顯示名稱</label><input type="text" value="結算金額" class="display-name"></div><div class="field-col"><label>處理方式</label><select class="process-type"><option value="show">顯示</option><option value="sum" selected>匯總(SUM)</option><option value="count">統計(COUNT)</option></select></div><div><button type="button" class="remove-field">×</button></div></div></div></div><!-- 多表連接配置 --><div class="join-settings"><div class="toggle-container"><div class="card-title" style="margin-bottom: 0;">多表連接</div><label class="toggle-switch"><input type="checkbox" id="joinTables" checked><span class="toggle-slider"></span></label></div><div id="joinSettings"><div class="form-group"><label>關聯表</label><select id="joinTableSelect"><option value="table1">東方仙盟小無相</option><option value="table2">項目信息表</option><option value="table3">客戶信息表</option></select></div><div class="form-group"><label>關聯表篩選條件 (table_sn)</label><input type="text" id="joinTableSn" value="77980225571289009447b68b5fb91dbdae9b200390002"></div><div class="form-group"><label>連接條件</label><div style="display: flex; gap: 10px;"><select id="mainTableField" style="flex: 1;"><option value="param16">主表: param16 (工程名稱)</option><option value="param1">主表: param1</option><option value="param2">主表: param2</option></select><div style="display: flex; align-items: center;">=</div><select id="joinTableField" style="flex: 1;"><option value="param1">關聯表: param1 (工程名稱)</option><option value="param2">關聯表: param2</option><option value="param16">關聯表: param16</option></select></div></div><div class="form-group"><label>連接類型</label><select id="joinType"><option value="JOIN">INNER JOIN (僅匹配記錄)</option><option value="LEFT JOIN">LEFT JOIN (保留主表所有記錄)</option><option value="RIGHT JOIN">RIGHT JOIN (保留關聯表所有記錄)</option></select></div></div></div><div class="btn-group"><button id="generateSQLBtn" class="btn">生成SQL</button></div></div></div><!-- 右側面板：SQL和結果 --><div><!-- SQL預覽卡片 --><div class="card"><div class="card-title"><span>SQL</span>預覽</div><div class="sql-preview"><button class="copy-btn" id="copySQLBtn">復制</button><div id="sqlPreview">SELECT a.工程名稱,b.結算單號,a.結算金額,a.已付金額,a.未付金額
FROM (SELECT param16 AS '工程名稱',SUM(CAST(param11 AS DECIMAL(10,2))) AS '結算金額',SUM(CAST(param12 AS DECIMAL(10,2))) AS '已付金額',SUM(CAST(param13 AS DECIMAL(10,2))) AS '未付金額'FROM 東方仙盟小無相 WHERE table_sn = '779802252fb750aa016d20fc803b59ef052edec990002' GROUP BY param16) AS a
JOIN (SELECT param1 AS '工程名稱',param2 AS '結算單號'FROM 東方仙盟小無相 WHERE table_sn = '77980225571289009447b68b5fb91dbdae9b200390002') AS b
ON a.工程名稱 = b.工程名稱
ORDER BY a.工程名稱;</div></div><div class="btn-group"><button id="executeSQLBtn" class="btn btn-success">執行查詢</button></div></div><!-- 結果展示卡片 --><div class="card"><div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px;"><div class="card-title"><span>3</span>查詢結果</div><div style="display: flex; gap: 10px;"><button class="btn-text">導出</button><button class="btn-text">刷新</button></div></div><div style="overflow-x: auto;"><table class="result-table"><thead><tr><th>工程名稱</th><th>結算單號</th><th>結算金額</th><th>已付金額</th><th>未付金額</th></tr></thead><tbody><tr><td>辦公樓項目</td><td>JS2023001</td><td>1,250,000.00</td><td>750,000.00</td><td>500,000.00</td></tr><tr><td>住宅項目A區</td><td>JS2023002</td><td>3,800,000.00</td><td>1,900,000.00</td><td>1,900,000.00</td></tr><tr><td>商業綜合體</td><td>JS2023003</td><td>8,500,000.00</td><td>5,100,000.00</td><td>3,400,000.00</td></tr></tbody></table></div><div class="pagination"><div>顯示 1 至 3，共 3 條記錄</div><div class="page-controls"><button class="page-btn" disabled>←</button><button class="page-btn active">1</button><button class="page-btn">2</button><button class="page-btn">→</button></div></div></div></div></div></div></main><!-- 頁腳 --><footer><div class="container footer-content"><p>? 2023 未來之窗EXCEL戴維斯跨表交互模擬</p></div></footer><!-- 通知提示框 --><div class="notification" id="notification"><span id="notificationText">操作成功</span></div><script>// 字段模板const fieldTemplate = `<div class="field-item"><div class="field-row"><div class="field-col"><label>字段</label><select class="field-select"><option value="param1">param1</option><option value="param2">param2</option><option value="param11">param11</option><option value="param12">param12</option><option value="param13">param13</option><option value="param16">param16</option></select></div><div class="field-col"><label>顯示名稱</label><input type="text" value="" placeholder="請輸入顯示名稱" class="display-name"></div><div class="field-col"><label>處理方式</label><select class="process-type"><option value="show" selected>顯示</option><option value="sum">匯總(SUM)</option><option value="count">統計(COUNT)</option></select></div><div><button type="button" class="remove-field">×</button></div></div></div>`;// 獲取主表名稱function getMainTableName() {const tableRadios = document.querySelectorAll('input[name="table"]');for (const radio of tableRadios) {if (radio.checked) {if (radio.value === 'table1') return '東方仙盟小無相';if (radio.value === 'table2') return '項目信息表';if (radio.value === 'table3') return '客戶信息表';}}return '東方仙盟小無相';}// 獲取關聯表名稱function getJoinTableName() {const joinTableSelect = document.getElementById('joinTableSelect');if (joinTableSelect.value === 'table1') return '東方仙盟小無相';if (joinTableSelect.value === 'table2') return '項目信息表';if (joinTableSelect.value === 'table3') return '客戶信息表';return '東方仙盟小無相';}// 生成SQLfunction generateSQL() {// 獲取主表信息const mainTableName = getMainTableName();const mainTableSn = document.getElementById('mainTableSn').value;// 獲取關聯表信息const useJoin = document.getElementById('joinTables').checked;let joinTableName = '';let joinTableSn = '';let joinType = '';let mainField = '';let joinField = '';if (useJoin) {joinTableName = getJoinTableName();joinTableSn = document.getElementById('joinTableSn').value;joinType = document.getElementById('joinType').value;mainField = document.getElementById('mainTableField').value;joinField = document.getElementById('joinTableField').value;// 提取字段名（去掉顯示文本）mainField = mainField.split(':')[1].trim().split(' ')[0];joinField = joinField.split(':')[1].trim().split(' ')[0];}// 獲取所有字段配置const fieldItems = document.querySelectorAll('.field-item');const mainTableFields = [];const joinTableFields = [];const selectFields = [];// 簡單區分主表和關聯表字段（實際應用中需要更復雜的邏輯）const mainTableFieldNames = ['param16', 'param11', 'param12', 'param13'];const joinTableFieldNames = ['param1', 'param2'];fieldItems.forEach((item, index) => {const fieldSelect = item.querySelector('.field-select');const displayName = item.querySelector('.display-name').value;const processType = item.querySelector('.process-type').value;const fieldName = fieldSelect.value;// 構建選擇字段let selectField;if (processType === 'show') {selectField = `${fieldName} AS '${displayName}'`;} else if (processType === 'sum') {selectField = `SUM(CAST(${fieldName} AS DECIMAL(10,2))) AS '${displayName}'`;} else { // countselectField = `COUNT(${fieldName}) AS '${displayName}'`;}// 分配到對應的表if (mainTableFieldNames.includes(fieldName)) {mainTableFields.push(selectField);selectFields.push(`a.${displayName}`);} else if (joinTableFieldNames.includes(fieldName)) {joinTableFields.push(selectField);selectFields.push(`b.${displayName}`);} else {// 默認為主表字段mainTableFields.push(selectField);selectFields.push(`a.${displayName}`);}});// 構建主表子查詢let mainSubquery = `(SELECT ${mainTableFields.join(',\n ')}FROM ${mainTableName} WHERE table_sn = '${mainTableSn}'`;// 確定需要GROUP BY的字段const groupByFields = [];fieldItems.forEach(item => {const fieldName = item.querySelector('.field-select').value;const processType = item.querySelector('.process-type').value;if (processType === 'show' && mainTableFieldNames.includes(fieldName)) {groupByFields.push(fieldName);}});if (groupByFields.length > 0) {mainSubquery += `\n GROUP BY ${groupByFields.join(', ')}`;}mainSubquery += ') AS a';// 構建關聯表子查詢let joinSubquery = '';if (useJoin && joinTableFields.length > 0) {joinSubquery = `${joinType} (SELECT ${joinTableFields.join(',\n ')}FROM ${joinTableName} WHERE table_sn = '${joinTableSn}') AS b
ON a.${mainField.split('.').pop()} = b.${joinField.split('.').pop()}`;}// 構建完整SQLlet sql = `SELECT ${selectFields.join(',\n ')}
FROM ${mainSubquery}
${useJoin && joinTableFields.length > 0 ? joinSubquery : ''}
${groupByFields.length > 0 ? `\nORDER BY a.${groupByFields[0]}` : ''};`;// 格式化SQLsql = sql.replace(/ /g, ' ');return sql;}// 添加字段按鈕事件document.getElementById('addFieldBtn').addEventListener('click', function() {const container = document.getElementById('fieldsContainer');const div = document.createElement('div');div.innerHTML = fieldTemplate;container.appendChild(div.firstElementChild);// 為新添加的字段綁定刪除事件bindRemoveEvents();// 顯示通知showNotification('字段已添加');});// 綁定刪除字段事件function bindRemoveEvents() {document.querySelectorAll('.remove-field').forEach(button => {button.addEventListener('click', function() {const fieldItem = this.closest('.field-item');fieldItem.style.opacity = '0';fieldItem.style.transform = 'scale(0.95)';fieldItem.style.transition = 'all 0.2s ease';setTimeout(() => {fieldItem.remove();showNotification('字段已刪除');}, 200);});});}// 生成SQL按鈕事件document.getElementById('generateSQLBtn').addEventListener('click', function() {// 顯示加載狀態this.textContent = '生成中...';this.disabled = true;setTimeout(() => {// 生成SQLconst sql = generateSQL();document.getElementById('sqlPreview').textContent = sql;// 恢復按鈕狀態this.textContent = '生成SQL';this.disabled = false;// 顯示通知showNotification('SQL已生成');// 更新步驟指示器document.querySelector('.steps::after').style.width = '100%';}, 800);});// 執行SQL按鈕事件document.getElementById('executeSQLBtn').addEventListener('click', function() {// 顯示加載狀態this.textContent = '執行中...';this.disabled = true;setTimeout(() => {// 恢復按鈕狀態this.textContent = '執行查詢';this.disabled = false;// 模擬執行完成，顯示通知showNotification('查詢已執行，共返回3條記錄');// 更新步驟指示器，激活第三步document.querySelector('.step:nth-child(3) .step-icon').style.backgroundColor = '#165dff';document.querySelector('.step:nth-child(3) .step-icon').style.color = 'white';}, 1200);});// 復制SQL按鈕事件document.getElementById('copySQLBtn').addEventListener('click', function() {const sqlText = document.getElementById('sqlPreview').textContent;const textarea = document.createElement('textarea');textarea.value = sqlText;document.body.appendChild(textarea);textarea.select();document.execCommand('copy');document.body.removeChild(textarea);showNotification('SQL已復制到剪貼板');});// 多表連接開關事件document.getElementById('joinTables').addEventListener('change', function() {const joinSettings = document.getElementById('joinSettings');if (this.checked) {joinSettings.style.maxHeight = '500px';joinSettings.style.opacity = '1';joinSettings.style.overflow = 'visible';} else {joinSettings.style.maxHeight = '0';joinSettings.style.opacity = '0';joinSettings.style.overflow = 'hidden';joinSettings.style.transition = 'max-height 0.3s ease, opacity 0.3s ease';}});// 表選擇變更時更新SQLdocument.querySelectorAll('input[name="table"]').forEach(radio => {radio.addEventListener('change', function() {// 當表選擇變更時，可以自動更新SQL或提示用戶重新生成});});// 字段變更時更新SQLdocument.addEventListener('change', function(e) {if (e.target.classList.contains('field-select') || e.target.classList.contains('display-name') || e.target.classList.contains('process-type')) {// 字段配置變更，可以延遲生成SQL}});// 顯示通知函數function showNotification(message) {const notification = document.getElementById('notification');const notificationText = document.getElementById('notificationText');notificationText.textContent = message;notification.classList.add('show');setTimeout(() => {notification.classList.remove('show');}, 3000);}// 初始化事件綁定document.addEventListener('DOMContentLoaded', function() {bindRemoveEvents();});</script>
</body>
</html>阿雪技術觀
在科技發展浪潮中，我們不妨積極投身技術共享。不滿足于做受益者，更要主動擔當貢獻者。無論是分享代碼、撰寫技術博客，還是參與開源項目維護改進，每一個微小舉動都可能蘊含推動技術進步的巨大能量。東方仙盟是匯聚力量的天地，我們攜手在此探索硅基生命，為科技進步添磚加瓦。
Hey folks, in this wild tech - driven world, why not dive headfirst into the whole tech - sharing scene? Don't just be the one reaping all the benefits; step up and be a contributor too. Whether you're tossing out your code snippets, hammering out some tech blogs, or getting your hands dirty with maintaining and sprucing up open - source projects, every little thing you do might just end up being a massive force that pushes tech forward. And guess what? The Eastern FairyAlliance is this awesome place where we all come together. We're gonna team up and explore the whole silicon - based life thing, and in the process, we'll be fueling the growth of technology
)
)
)
八股小記)
