1
0

test-nodeland-shppath.html 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>NodeLand 接口 shppath 测试</title>
  7. <style>
  8. body {
  9. font-family: Arial, sans-serif;
  10. max-width: 900px;
  11. margin: 50px auto;
  12. padding: 20px;
  13. background-color: #f5f5f5;
  14. }
  15. .container {
  16. background-color: white;
  17. padding: 30px;
  18. border-radius: 8px;
  19. box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  20. }
  21. h1 {
  22. color: #333;
  23. text-align: center;
  24. margin-bottom: 30px;
  25. }
  26. .section {
  27. margin-bottom: 30px;
  28. padding: 20px;
  29. border: 1px solid #ddd;
  30. border-radius: 5px;
  31. }
  32. .section h3 {
  33. color: #555;
  34. margin-top: 0;
  35. }
  36. input[type="text"] {
  37. width: 70%;
  38. padding: 8px;
  39. border: 1px solid #ddd;
  40. border-radius: 4px;
  41. }
  42. button {
  43. padding: 8px 16px;
  44. background-color: #007bff;
  45. color: white;
  46. border: none;
  47. border-radius: 4px;
  48. cursor: pointer;
  49. margin-left: 10px;
  50. }
  51. button:hover {
  52. background-color: #0056b3;
  53. }
  54. .result {
  55. background-color: #d4edda;
  56. border: 1px solid #c3e6cb;
  57. padding: 15px;
  58. border-radius: 4px;
  59. margin-top: 10px;
  60. }
  61. .error {
  62. background-color: #f8d7da;
  63. border: 1px solid #f5c6cb;
  64. padding: 15px;
  65. border-radius: 4px;
  66. margin-top: 10px;
  67. }
  68. .info {
  69. background-color: #d1ecf1;
  70. border: 1px solid #bee5eb;
  71. padding: 15px;
  72. border-radius: 4px;
  73. margin-top: 10px;
  74. }
  75. .json-display {
  76. background-color: #f8f9fa;
  77. padding: 15px;
  78. border-radius: 4px;
  79. margin: 10px 0;
  80. font-family: monospace;
  81. font-size: 12px;
  82. white-space: pre-wrap;
  83. border: 1px solid #dee2e6;
  84. max-height: 300px;
  85. overflow-y: auto;
  86. }
  87. .field-highlight {
  88. background-color: #fff3cd;
  89. padding: 2px 4px;
  90. border-radius: 3px;
  91. font-weight: bold;
  92. }
  93. .download-btn {
  94. background-color: #28a745;
  95. margin-top: 10px;
  96. }
  97. .download-btn:hover {
  98. background-color: #218838;
  99. }
  100. </style>
  101. </head>
  102. <body>
  103. <div class="container">
  104. <h1>NodeLand 接口 shppath 字段测试</h1>
  105. <div class="section">
  106. <h3>SQL 查询修改说明</h3>
  107. <div class="info">
  108. <strong>修改内容:</strong><br>
  109. 1. 添加了 <span class="field-highlight">tgd.shppath as "shppath"</span> 字段<br>
  110. 2. 增加了 <span class="field-highlight">LEFT JOIN t_geom_db tgd ON nl.geom_db_id = tgd.id</span> 关联<br>
  111. 3. 在 GROUP BY 中添加了 <span class="field-highlight">tgd.shppath</span><br><br>
  112. <strong>现在返回的字段:</strong><br>
  113. • geomDbId - 几何数据库ID<br>
  114. • <span class="field-highlight">shppath - SHP文件路径(新增)</span><br>
  115. • geoms - 几何数据数组<br>
  116. • envelope - 外边框<br>
  117. • centroid - 中心点
  118. </div>
  119. </div>
  120. <div class="section">
  121. <h3>接口测试</h3>
  122. <p>测试 /nodeland/geom/{nodeId} 接口是否正确返回 shppath 字段</p>
  123. <input type="text" id="nodeId" placeholder="输入 nodeId,如:test-node-001">
  124. <button onclick="testNodeLandGeom()">测试正式接口</button>
  125. <button onclick="fillExampleNodeId()">填入示例ID</button>
  126. <div id="testResult" style="display:none;"></div>
  127. </div>
  128. <div class="section">
  129. <h3>调试工具</h3>
  130. <p>分步调试,查看每一层的数据返回情况</p>
  131. <input type="text" id="debugNodeId" placeholder="输入 nodeId 进行调试">
  132. <button onclick="testMapper()">1. 测试 Mapper 层</button>
  133. <button onclick="testService()">2. 测试 Service 层</button>
  134. <button onclick="checkAllData()">3. 完整检查</button>
  135. <div id="debugResult" style="display:none;"></div>
  136. </div>
  137. <div class="section">
  138. <h3>返回数据结构</h3>
  139. <div class="info">
  140. <strong>期望的返回格式:</strong>
  141. <div class="json-display">{
  142. "code": 200,
  143. "msg": "操作成功",
  144. "data": {
  145. "geomDbId": "uuid-string",
  146. "shppath": "/home/siwei/uploadPath/2025/08/01/文件_20250801154318A001.zip",
  147. "geoms": ["SRID=4326;POLYGON(...)", "SRID=4326;POLYGON(...)"],
  148. "envelope": "SRID=4326;POLYGON(...)",
  149. "centroid": "SRID=4326;POINT(...)"
  150. }
  151. }</div>
  152. </div>
  153. </div>
  154. </div>
  155. <script>
  156. function testNodeLandGeom() {
  157. const nodeId = document.getElementById('nodeId').value.trim();
  158. const resultDiv = document.getElementById('testResult');
  159. if (!nodeId) {
  160. alert('请输入 nodeId');
  161. return;
  162. }
  163. resultDiv.style.display = 'block';
  164. resultDiv.innerHTML = '<div class="info">正在请求接口...</div>';
  165. // 根据实际的服务端口调整URL
  166. const url = `http://127.0.0.1:9201/nodeland/geom/${nodeId}`;
  167. fetch(url)
  168. .then(response => response.json())
  169. .then(data => {
  170. if (data.code === 200) {
  171. const result = data.data;
  172. // 检查是否包含 shppath 字段
  173. const hasShppath = result && result.shppath !== undefined;
  174. const shppathValue = result ? result.shppath : null;
  175. let resultHtml = `
  176. <div class="${hasShppath ? 'result' : 'error'}">
  177. <strong>${hasShppath ? '✅' : '❌'} 接口返回${hasShppath ? '成功' : '失败'}!</strong><br><br>
  178. <strong>字段检查:</strong><br>
  179. • geomDbId: ${result?.geomDbId ? '✅ 存在' : '❌ 缺失'}<br>
  180. • shppath: ${hasShppath ? '✅ 存在' : '❌ 缺失'}<br>
  181. • geoms: ${result?.geoms ? '✅ 存在' : '❌ 缺失'}<br>
  182. • envelope: ${result?.envelope ? '✅ 存在' : '❌ 缺失'}<br>
  183. • centroid: ${result?.centroid ? '✅ 存在' : '❌ 缺失'}<br><br>
  184. `;
  185. if (hasShppath && shppathValue) {
  186. resultHtml += `
  187. <strong>shppath 值:</strong><br>
  188. <div class="json-display">${shppathValue}</div>
  189. <strong>文件下载测试:</strong><br>
  190. <button class="download-btn" onclick="testFileDownload('${shppathValue}')">测试文件下载</button>
  191. <button class="download-btn" onclick="window.open('http://127.0.0.1:9202${shppathValue}', '_blank')">直接下载</button><br><br>
  192. `;
  193. }
  194. resultHtml += `
  195. <strong>完整返回数据:</strong><br>
  196. <div class="json-display">${JSON.stringify(data, null, 2)}</div>
  197. </div>
  198. `;
  199. resultDiv.innerHTML = resultHtml;
  200. } else {
  201. resultDiv.innerHTML = `
  202. <div class="error">
  203. <strong>❌ 接口调用失败</strong><br>
  204. 错误码:${data.code}<br>
  205. 错误信息:${data.msg}<br><br>
  206. <strong>完整响应:</strong><br>
  207. <div class="json-display">${JSON.stringify(data, null, 2)}</div>
  208. </div>
  209. `;
  210. }
  211. })
  212. .catch(error => {
  213. console.error('Error:', error);
  214. resultDiv.innerHTML = `
  215. <div class="error">
  216. <strong>❌ 请求异常</strong><br>
  217. 错误信息:${error.message}<br><br>
  218. <strong>可能的原因:</strong><br>
  219. • 服务未启动(检查端口 9201)<br>
  220. • 网络连接问题<br>
  221. • 跨域问题<br>
  222. • nodeId 不存在
  223. </div>
  224. `;
  225. });
  226. }
  227. function testFileDownload(shppath) {
  228. if (!shppath) {
  229. alert('shppath 为空');
  230. return;
  231. }
  232. const downloadUrl = `http://127.0.0.1:9202${shppath}`;
  233. // 测试文件是否可访问
  234. fetch(downloadUrl, { method: 'HEAD' })
  235. .then(response => {
  236. if (response.ok) {
  237. alert(`✅ 文件可访问!\n状态码: ${response.status}\n即将打开下载链接`);
  238. window.open(downloadUrl, '_blank');
  239. } else {
  240. alert(`❌ 文件不可访问\n状态码: ${response.status}\n请检查文件是否存在`);
  241. }
  242. })
  243. .catch(error => {
  244. alert(`❌ 文件访问测试失败\n错误: ${error.message}`);
  245. });
  246. }
  247. function fillExampleNodeId() {
  248. document.getElementById('nodeId').value = 'test-node-001';
  249. document.getElementById('debugNodeId').value = 'test-node-001';
  250. }
  251. // 调试功能
  252. function testMapper() {
  253. const nodeId = document.getElementById('debugNodeId').value.trim();
  254. if (!nodeId) {
  255. alert('请输入 nodeId');
  256. return;
  257. }
  258. debugRequest(`http://127.0.0.1:9201/debug/nodeland/mapper/${nodeId}`, 'Mapper 层测试');
  259. }
  260. function testService() {
  261. const nodeId = document.getElementById('debugNodeId').value.trim();
  262. if (!nodeId) {
  263. alert('请输入 nodeId');
  264. return;
  265. }
  266. debugRequest(`http://127.0.0.1:9201/debug/nodeland/service/${nodeId}`, 'Service 层测试');
  267. }
  268. function checkAllData() {
  269. const nodeId = document.getElementById('debugNodeId').value.trim();
  270. if (!nodeId) {
  271. alert('请输入 nodeId');
  272. return;
  273. }
  274. debugRequest(`http://127.0.0.1:9201/debug/nodeland/check/${nodeId}`, '完整数据检查');
  275. }
  276. function debugRequest(url, title) {
  277. const resultDiv = document.getElementById('debugResult');
  278. resultDiv.style.display = 'block';
  279. resultDiv.innerHTML = `<div class="info">正在执行 ${title}...</div>`;
  280. fetch(url)
  281. .then(response => response.json())
  282. .then(data => {
  283. let resultHtml = `<div class="${data.code === 200 ? 'result' : 'error'}">`;
  284. resultHtml += `<strong>${title} 结果:</strong><br>`;
  285. resultHtml += `状态码:${data.code}<br>`;
  286. resultHtml += `消息:${data.msg}<br><br>`;
  287. if (data.code === 200 && data.data) {
  288. resultHtml += `<strong>返回数据分析:</strong><br>`;
  289. if (title.includes('Mapper')) {
  290. const hasShppath = data.data.shppath !== undefined;
  291. resultHtml += `• shppath 字段:${hasShppath ? '✅ 存在' : '❌ 不存在'}<br>`;
  292. if (hasShppath) {
  293. resultHtml += `• shppath 值:${data.data.shppath || '(空值)'}<br>`;
  294. }
  295. } else if (title.includes('Service')) {
  296. const hasShppath = data.data.shppath !== undefined;
  297. resultHtml += `• shppath 字段:${hasShppath ? '✅ 存在' : '❌ 不存在'}<br>`;
  298. if (hasShppath) {
  299. resultHtml += `• shppath 值:${data.data.shppath || '(空值)'}<br>`;
  300. }
  301. } else if (title.includes('完整')) {
  302. resultHtml += `• Mapper 有 shppath:${data.data.mapperHasShppath ? '✅' : '❌'}<br>`;
  303. resultHtml += `• Service 有 shppath:${data.data.serviceHasShppath ? '✅' : '❌'}<br>`;
  304. resultHtml += `• shppath 实际值:${data.data.shppathValue || '(空值)'}<br>`;
  305. }
  306. }
  307. resultHtml += `<br><strong>完整响应数据:</strong><br>`;
  308. resultHtml += `<div class="json-display">${JSON.stringify(data, null, 2)}</div>`;
  309. resultHtml += `</div>`;
  310. resultDiv.innerHTML = resultHtml;
  311. })
  312. .catch(error => {
  313. resultDiv.innerHTML = `
  314. <div class="error">
  315. <strong>❌ ${title} 请求失败</strong><br>
  316. 错误:${error.message}
  317. </div>
  318. `;
  319. });
  320. }
  321. </script>
  322. </body>
  323. </html>