{"id":646,"date":"2025-06-20T03:02:59","date_gmt":"2025-06-20T03:02:59","guid":{"rendered":"https:\/\/mutou.men\/?p=646"},"modified":"2025-07-23T08:28:50","modified_gmt":"2025-07-23T08:28:50","slug":"atmb%e7%be%8e%e5%9b%bd%e7%a7%81%e4%ba%ba%e5%9c%b0%e5%9d%80%e8%87%aa%e5%8a%a8%e7%ad%9b%e9%80%89","status":"publish","type":"post","link":"https:\/\/mutou.men\/?p=646","title":{"rendered":"ATMB\u7f8e\u56fd\u79c1\u4eba\u5730\u5740\u7b5b\u9009\u5668\uff08\u66f4\u65b0\uff09"},"content":{"rendered":"\n

\u4e3a\u4e86\u65b9\u4fbf\u5927\u5bb6\u79df\u5230\u81ea\u5df1\u7684\u6ee1\u610f\u7684\u5730\u5740\uff0c\u7279\u610f\u7f16\u5199\u4e86\u6b64\u5de5\u5177\uff0c\u5e76\u81ea\u884c\u627f\u62c5\u4e86\u76f8\u5173api\u7684\u8d39\u7528\u3002\u7b5b\u9009\u7ed3\u679c\u4e3a\u7a0b\u5e8f\u81ea\u52a8\u8fdb\u884c\uff0c\u672a\u8fdb\u884c\u4eba\u5de5\u8fa8\u522b\uff1bAPI\uff0cAI\u8bc6\u522b\u7ed3\u679c\u672a\u5fc5100%\u51c6\u786e\uff0c\u6240\u4ee5\u8d2d\u4e70\u5730\u5740\u524d\u8bf7\u52a1\u5fc5\u518d\u6b21\u505a\u4eba\u5de5\u786e\u8ba4<\/strong>\u3002\u6211\u4e5f\u4f1a\u5b9a\u671f\u5bf9\u5730\u5740\u8fdb\u884c\u91cd\u65b0\u7b5b\u9009\uff0c\u5e76\u5728\u4e0b\u9762\u6807\u8bb0\u66f4\u65b0\u65e5\u671f\u3002<\/p>\n\n\n\n

\u5982\u679c\u672c\u5de5\u5177\u5bf9\u60a8\u6709\u6240\u5e2e\u52a9\uff0c\u6b22\u8fce\u4f7f\u7528\u6211\u7684\u9080\u8bf7\u8fde\u63a5\u6ce8\u518cATMB\uff0c\u5bf9\u6211\u7684\u5de5\u4f5c\u8868\u793a\u80af\u5b9a\u3002\u540c\u65f6\u4f7f\u7528\u6211\u7684\u9080\u8bf7\u94fe\u63a5\u6ce8\u518c\u60a8\u4e5f\u53ef\u4ee5\u83b7\u5f9710\u7f8e\u5143\u7684\u4e9a\u9a6c\u900a\u793c\u54c1\u5361<\/strong>\u70b9\u51fb\u6b64\u94fe\u63a5\u6ce8\u518c\u53ef\u5f9710\u7f8e\u5143\u4e9a\u9a6c\u900a\u793c\u54c1\u5361<\/a><\/p>\n\n\n\n

\u7b5b\u9009\u6570\u636e\u5e93\u66f4\u65b0\u65e5\u671f\uff1a2025\u5e747\u670823\u65e5<\/h3>\n\n\n\n\n\n \n ATMB \u865a\u62df\u4f4f\u5b85\u5730\u5740\u7b5b\u9009\u5668<\/title>\n <style>\n .address-filter {\n font-family: 'Segoe UI', sans-serif;\n background: #f9f9f9;\n padding: 1.5em;\n border-radius: 12px;\n max-width: 900px;\n margin: auto;\n box-shadow: 0 2px 8px rgba(0,0,0,0.1);\n }\n\n .filter-row {\n display: flex;\n flex-wrap: wrap;\n gap: 1em;\n margin-bottom: 1em;\n }\n\n .filter-row label {\n flex: 1;\n min-width: 180px;\n }\n\n select, button {\n width: 100%;\n padding: 6px 10px;\n font-size: 15px;\n border-radius: 6px;\n border: 1px solid #ccc;\n }\n\n button {\n background-color: #0066cc;\n color: white;\n border: none;\n cursor: pointer;\n font-weight: bold;\n }\n\n button:hover {\n background-color: #005bb5;\n }\n\n table {\n width: 100%;\n border-collapse: collapse;\n background: white;\n border-radius: 8px;\n overflow: hidden;\n }\n\n th, td {\n padding: 10px 14px;\n text-align: left;\n border-bottom: 1px solid #eee;\n }\n\n th {\n background-color: #f0f0f0;\n }\n\n .pagination {\n margin-top: 16px;\n text-align: center;\n }\n\n .pagination button {\n margin: 0 6px;\n padding: 6px 12px;\n border-radius: 6px;\n border: 1px solid #ccc;\n background-color: white;\n color: #333;\n }\n\n .pagination button.active {\n background-color: #007bff;\n color: white;\n font-weight: bold;\n }\n\n .pagination button:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n }\n <\/style>\n<\/head>\n<body>\n\n<div class=\"address-filter\">\n <h2>\ud83d\udcec ATMB\u4f4f\u5b85\u5730\u5740\u7b5b\u9009\u5668<\/h2>\n\n <div class=\"filter-row\">\n <label>\u5dde\uff1a\n <select id=\"stateSelect\" onchange=\"updateCities()\">\n <option value=\"\">\u5168\u90e8<\/option>\n <\/select>\n <\/label>\n\n <label>\u57ce\u5e02\uff1a\n <select id=\"citySelect\">\n <option value=\"\">\u5168\u90e8<\/option>\n <\/select>\n <\/label>\n\n <label>\u662f\u5426\u4f4f\u5b85\u5730\u5740\uff1a\n <select id=\"dpvSelect\">\n <option value=\"\">\u5168\u90e8<\/option>\n <option value=\"N\">\u662f\uff08\u4f4f\u5b85\uff09<\/option>\n <option value=\"Y\">\u5426\uff08\u5546\u4e1a\uff09<\/option>\n <\/select>\n <\/label>\n\n <label>\u8c37\u6b4c\u8857\u666f\u9a8c\u8bc1\uff1a\n <select id=\"imageSelect\">\n <option value=\"\">\u5168\u90e8<\/option>\n <option value=\"residential\">\u4f4f\u5b85<\/option>\n <option value=\"business\">\u5546\u4e1a<\/option>\n <option value=\"unknown\">\u672a\u77e5<\/option>\n <\/select>\n <\/label>\n\n <label>\u4ef7\u683c\u6392\u5e8f\uff1a\n <select id=\"sortSelect\">\n <option value=\"asc\">\u4ef7\u683c\u5347\u5e8f<\/option>\n <option value=\"desc\">\u4ef7\u683c\u964d\u5e8f<\/option>\n <\/select>\n <\/label>\n\n <label style=\"align-self: flex-end;\">\n <button id=\"filterBtn\">\ud83d\udd0d \u7b5b\u9009<\/button>\n <\/label>\n <\/div>\n\n <div id=\"addressListContainer\"><\/div>\n\n <div class=\"pagination\" id=\"paginationControls\">\n <button id=\"prevPageBtn\">\u2b05 \u4e0a\u4e00\u9875<\/button>\n <span id=\"pageInfo\"><\/span>\n <button id=\"nextPageBtn\">\u4e0b\u4e00\u9875 \u27a1<\/button>\n <\/div>\n<\/div>\n\n<script>\nconst API_URL = 'https:\/\/address.mutou.men\/addresses';\nlet allData = [];\nlet filteredData = [];\nlet currentPage = 1;\nconst pageSize = 10;\n\nasync function initAddressFilter() {\n const res = await fetch(API_URL);\n allData = await res.json();\n\n const stateSet = new Set(allData.map(d => d.state));\n const stateSelect = document.getElementById('stateSelect');\n [...stateSet].sort().forEach(s => {\n stateSelect.innerHTML += `<option value=\"${s}\">${s}<\/option>`;\n });\n\n updateCities();\n filterAddresses();\n}\n\nfunction updateCities() {\n const selectedState = document.getElementById('stateSelect').value;\n const citySelect = document.getElementById('citySelect');\n citySelect.innerHTML = '<option value=\"\">\u5168\u90e8<\/option>';\n\n const citySet = new Set(\n allData\n .filter(d => !selectedState || d.state === selectedState)\n .map(d => d.city)\n );\n\n [...citySet].sort().forEach(c => {\n citySelect.innerHTML += `<option value=\"${c}\">${c}<\/option>`;\n });\n}\n\nfunction filterAddresses() {\n const state = document.getElementById('stateSelect').value;\n const city = document.getElementById('citySelect').value;\n const dpv = document.getElementById('dpvSelect').value;\n const sort = document.getElementById('sortSelect').value;\n const image = document.getElementById('imageSelect').value;\n\n filteredData = allData.filter(d => {\n return (!state || d.state === state) &&\n (!city || d.city === city) &&\n (!dpv || d.dpv_cmra === dpv) &&\n (!image || (d.image_label || '').toLowerCase() === image.toLowerCase());\n });\n\n if (sort === 'asc') {\n filteredData.sort((a, b) => a.price - b.price);\n } else {\n filteredData.sort((a, b) => b.price - a.price);\n }\n\n currentPage = 1;\n renderPage();\n}\n\nfunction renderPage() {\n const container = document.getElementById('addressListContainer');\n container.innerHTML = '';\n\n const start = (currentPage - 1) * pageSize;\n const end = start + pageSize;\n const pageItems = filteredData.slice(start, end);\n\n if (pageItems.length === 0) {\n container.innerHTML = '<p>\u26a0\ufe0f \u6ca1\u6709\u5339\u914d\u7684\u5730\u5740\u3002<\/p>';\n return;\n }\n\n let table = `<table>\n <thead>\n <tr>\n <th>\u8857\u9053<\/th>\n <th>\u57ce\u5e02<\/th>\n <th>\u5dde<\/th>\n <th>\u4ef7\u683c<\/th>\n <th>\u4f4f\u5b85\u5730\u5740<\/th>\n <th>\u8c37\u6b4c\u8857\u666f\u9a8c\u8bc1<\/th>\n <\/tr>\n <\/thead>\n <tbody>`;\n\n pageItems.forEach(d => {\n table += `<tr>\n <td>${d.street}<\/td>\n <td>${d.city}<\/td>\n <td>${d.state}<\/td>\n <td>$${d.price.toFixed(2)}<\/td>\n <td>${d.dpv_cmra === 'N' ? '\u2705 \u662f' : '\u274c \u5426'}<\/td>\n <td>${formatImageLabel(d.image_label)}<\/td>\n <\/tr>`;\n });\n\n table += '<\/tbody><\/table>';\n container.innerHTML = table;\n\n const totalPages = Math.ceil(filteredData.length \/ pageSize);\n document.getElementById('pageInfo').innerText = `\u7b2c ${currentPage} \u9875 \/ \u5171 ${totalPages} \u9875`;\n document.getElementById('prevPageBtn').disabled = currentPage === 1;\n document.getElementById('nextPageBtn').disabled = currentPage === totalPages;\n}\n\nfunction changePage(offset) {\n const totalPages = Math.ceil(filteredData.length \/ pageSize);\n const newPage = currentPage + offset;\n if (newPage >= 1 && newPage <= totalPages) {\n currentPage = newPage;\n renderPage();\n }\n}\n\nfunction formatImageLabel(label) {\n switch ((label || '').toLowerCase()) {\n case 'residential': return '\ud83c\udfe0 \u4f4f\u5b85';\n case 'business': return '\ud83c\udfe2 \u5546\u4e1a';\n case 'unknown': return '\u2753 \u4e0d\u786e\u5b9a';\n default: return '\u274c \u65e0\u6570\u636e';\n }\n}\n\ndocument.addEventListener('DOMContentLoaded', () => {\n document.getElementById('filterBtn').addEventListener('click', filterAddresses);\n document.getElementById('prevPageBtn').addEventListener('click', () => changePage(-1));\n document.getElementById('nextPageBtn').addEventListener('click', () => changePage(1));\n initAddressFilter();\n});\n<\/script>\n\n<\/body>\n<\/html>\n\n\n<p class=\"has-background wp-block-paragraph\" style=\"background-color:#fac5f8\">\u8c37\u6b4c\u8857\u666f\u7ed3\u679c\u4e3a\u672a\u77e5\u7684\uff0c\u6807\u8bc6ai\u672a\u8bc6\u522b\u51fa\u5730\u5740\u7c7b\u578b\uff0c\u60a8\u53ef\u81ea\u884c\u8fdb\u884c\u67e5\u8be2\u548c\u9274\u522b\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u4e3a\u4e86\u65b9\u4fbf\u5927\u5bb6\u79df\u5230\u81ea\u5df1\u7684\u6ee1\u610f\u7684\u5730\u5740\uff0c\u7279\u610f\u7f16\u5199\u4e86\u6b64\u5de5\u5177\uff0c\u5e76\u81ea\u884c\u627f\u62c5\u4e86\u76f8\u5173api\u7684\u8d39\u7528\u3002\u7b5b\u9009\u7ed3\u679c\u4e3a\u7a0b\u5e8f\u81ea\u52a8\u8fdb\u884c\uff0c\u672a\u8fdb…<\/p>\n","protected":false},"author":1,"featured_media":646,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[7],"class_list":["post-646","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-address","tag-jiaocheng","article","has-meta-background","has-background","tfm-is-light","dark-theme-","has-excerpt","has-avatar","has-author","has-nickname","has-date","has-comment-count","has-category-meta","has-read-more","has-title","has-post-media","thumbnail-","cat-id-3"],"_links":{"self":[{"href":"https:\/\/mutou.men\/index.php?rest_route=\/wp\/v2\/posts\/646","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mutou.men\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mutou.men\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mutou.men\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mutou.men\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=646"}],"version-history":[{"count":5,"href":"https:\/\/mutou.men\/index.php?rest_route=\/wp\/v2\/posts\/646\/revisions"}],"predecessor-version":[{"id":724,"href":"https:\/\/mutou.men\/index.php?rest_route=\/wp\/v2\/posts\/646\/revisions\/724"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/mutou.men\/index.php?rest_route=\/wp\/v2\/posts\/646"}],"wp:attachment":[{"href":"https:\/\/mutou.men\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=646"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mutou.men\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=646"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mutou.men\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=646"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}