<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>重庆</title>
<link rel="stylesheet" href="./css/index.css" />
<script src="./js/axios.min.js"></script>
<script charset="utf-8" src="https://map.qq.com/api/gljs?v=1.exp&key=XPZBZ-WTGWU-JL7VB-GQJQ5-24TFV-RLBON">
</script>
</head>
<style>
#title {
font-size: 18px;
margin-top: 0;
}
.boxss {
height: unset;
}
</style>
<body style="background-color: #f3f3f3 ;">
<div class="content" style="margin-top: 15px;border-radius: 8px;background: #fff;">
<header style="text-align: center; padding: 0 20px">
<h1 id="title"></h1>
</header>
<p style="text-align: center;font-size: 14px;font-weight: bold;">查询时间：<span id="currentTime"></span></p>
<main>
<div style="display: flex; flex-wrap: wrap; gap: 20px;">
<div style="flex: 1; min-width: 300px;">
<h4><img src="./bumen.png" style="width: 16px;height: 16px;" alt="" />基本信息</h4>
<div class="boxss">
<div class="info_box" id="basicInfo"></div>
<div class="info_box">
<div class="info_title">取水地点</div>
<div class="info_con" id="address"></div>
</div>
</div>
<div>
<h4><img src="./bumen.png" style="width: 16px;height: 16px;" alt="" />取水人基本信息</h4>
<div id="waterUserInfo"></div>
</div>
</div>
<div style="flex: 1; min-width: 300px;">
<div class="map_box">
<div id="container" style="height: 100%;"></div>
</div>
</div>
</div>
</main>
</div>
<script>
function getUrlParameter(name) {
const urlParams = new URLSearchParams(window.location.search);
return urlParams.get(name);
}
function getTime() {
var now = new Date();
var dateTimeString = now.toLocaleString();
var matchArray = dateTimeString.match(/\d+/g);
var year = matchArray[0];
var month = matchArray[1];
var date = matchArray[2];
var hour = matchArray[3];
var minute = matchArray[4];
var second = matchArray[5];
return `${year}-${month}-${date} ${hour}:${minute}:${second}`;
}
function initMap(lng, lat, locations) {
var center = new TMap.LatLng(lat, lng);
var map = new TMap.Map("container", {
zoom: 15,
center: center,
baseMap: {
type: 'satellite'
}
});
var markerStyle = new TMap.MarkerStyle({
width: 20,
height: 30,
anchor: {
x: 10,
y: 30
},
src: 'https://water.yy.hk.cn/makers.png'
});
var markersData = locations.map(function(location) {
return {
position: new TMap.LatLng(location[1], location[0]),
styleId: 'marker'
};
});
var multiMarker = new TMap.MultiMarker({
map: map,
styles: {
marker: markerStyle
},
geometries: markersData
});
}
async function getInfo() {
const urlParams = getUrlParameter('id');
console.log(urlParams);
try {
const res = await axios.get(
`https://water.yy.hk.cn/index.php/api/index/getinfo/id/${urlParams}`);
let infoData = res.data;
document.title = infoData.gname;
document.getElementById('title').textContent = infoData.gname;
document.getElementById('currentTime').textContent = getTime();
document.getElementById('address').textContent = infoData.address;
initMap(infoData.latlng[0][0], infoData.latlng[0][1], infoData.latlng);
const basicInfoDiv = document.getElementById('basicInfo');
const basicInfo = [{
label: '许可证编号',
value: infoData.number || '无'
},
{
label: '行业类别',
value: infoData.type || '无'
},
{
label: '取水用途',
value: infoData.usetype || '无'
},
{
label: '审批机关',
value: infoData.jiguan || '无'
},
{
label: '水源类型',
value: infoData.watertype || '无'
},
{
label: '取水量',
value: infoData.usenumber || '无'
},
{
label: '取水类型',
value: infoData.usewatertype || '无'
},
{
label: '审批时间',
value: infoData.time || '无'
},
{
label: '有效期',
value: infoData.setime || '无'
}
];
basicInfo.forEach(item => {
const infoDiv = document.createElement('div');
infoDiv.className = 'info';
infoDiv.innerHTML = `
<div class="info_title">${item.label}</div>
<div class="info_con">${item.value}</div>
`;
basicInfoDiv.appendChild(infoDiv);
});
const waterUserInfoDiv = document.getElementById('waterUserInfo');
const waterUserInfo = [{
label: '单位名称',
value: infoData.name || '无'
},
{
label: '统一社会信用代码',
value: infoData.tcode || '无'
},
{
label: '法定代表人',
value: infoData.faname || '无'
},
{
label: '用水管理部门',
value: infoData.gname || '无'
},
{
label: '生产经营场所',
value: infoData.saddress || '无'
},
{
label: '建设项目名称',
value: infoData.xname || '无'
},
{
label: '项目编码',
value: infoData.xnumber || '无'
}
];
waterUserInfo.forEach(item => {
const danweiDiv = document.createElement('div');
danweiDiv.className = 'danwei';
danweiDiv.innerHTML = `
<div class="info-label">${item.label}</div>
<div class="tab_con">${item.value}</div>
`;
waterUserInfoDiv.appendChild(danweiDiv);
});
} catch (error) {
console.error('请求出错:', error);
}
}
getInfo();
</script>
</body>
</html>
