ZheJiangNingBo
/
pingAnQiYeWeb
7
0
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

update

Browse Source
master
loveflow 7 months ago
parent 3b3a6b98bd
commit c8deafe9b2
5 changed files with 174 additions and 165 deletions
Show Stats Download Patch File Download Diff File

22
public/index.html
Unescape View File

@ -1,20 +1,20 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang=""> <html lang="">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta name="viewport" content="width=device-width,initial-scale=1.0" />
<script src="<%= BASE_URL %>baiduapi.js"></script> <script src="<%= BASE_URL %>baiduapi.js"></script>
<script src="<%= BASE_URL %>TextIconOverlay_min.js"></script> <script src="<%= BASE_URL %>TextIconOverlay_min.js"></script>
<script src="<%= BASE_URL %>MarkerClusterer_min.js"></script> <script src="<%= BASE_URL %>MarkerClusterer_min.js"></script>
<script src="<%= BASE_URL %>map_load.js"></script> <script src="<%= BASE_URL %>map_load.js"></script>
<script src="<%= BASE_URL %>liveplayer-lib.min.js"></script> <script src="<%= BASE_URL %>liveplayer-lib.min.js"></script>
<!-- <title>镇海平安企业（园区）</title> --> <!-- <title>镇海平安企业（园区）</title> -->
<title>vue</title> <title>vue</title>
</head> </head>
<style> <style>
body{ body {
margin:0; margin: 0;
padding: 0; padding: 0;
} }
</style> </style>
@ -24,5 +24,9 @@
</noscript> --> </noscript> -->
<div id="app"></div> <div id="app"></div>
<!-- built files will be auto injected --> <!-- built files will be auto injected -->
<script src="./static/config.js"></script>
<script>
console.log(window.mapCfg);
</script>
</body> </body>
</html> </html>

8
public/static/config.js
Unescape View File

@ -0,0 +1,8 @@
window.mapCfg = {
type: "onLine",//离线地图；地图类型 onLine:在线地图
lgt: "", //经度
lat: "", //纬度
center: [],
zoom: 12,
tiles_dir: "" + "/static/newTiles/{z}/{x}/{y}.png", //瓦片地址
};

295
public/static/map.html
Unescape View File

@ -1,167 +1,164 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head>
<head> <meta charset="UTF-8" />
<meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title> <title>Document</title>
<style> <style>
#container { #container {
width: 100vw; width: 100vw;
height: 100vh; height: 100vh;
/* border: 0.1px solid #495e70; */ /* border: 0.1px solid #495e70; */
} }
/* 去除百度地图logo */ /* 去除百度地图logo */
.anchorBL { .anchorBL {
display: none display: none;
} }
</style> </style>
<!-- <script src="https://unpkg.com/mapv-three@1.0.10/dist/mapvthree.umd.js"></script> --> <!-- <script src="https://unpkg.com/mapv-three@1.0.10/dist/mapvthree.umd.js"></script> -->
<script src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=CSfWwqFqSVkQaqcAAMxKyXg6Moe9UUqA"></script> <!-- <script
</head> src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=CSfWwqFqSVkQaqcAAMxKyXg6Moe9UUqA"
></script> -->
</head>
<body> <body>
<div id="container"></div> <div id="container"></div>
<script> <script>
let mapCfg = window.parent.mapCfg;
if (mapCfg.type === "offLine") {
}
if (mapCfg.type === "onLine") {
loadScript();
}
// map.setHeading(64.5);
// map.setTilt(73);
// 禁止地图旋转和倾斜可以通过配置项进行设置
// var map = new BMapGL.Map("allmap", {
// enableRotate: false,
// enableTilt: false
// });
function initMap() {
// 创建地图实例 // 创建地图实例
var map = new BMapGL.Map("container"); // 创建地图实例 var map = new BMapGL.Map("container"); // 创建地图实例
var point = new BMapGL.Point(121.619992, 30.025703); // 创建点坐标 var point = new BMapGL.Point(121.619992, 30.025703); // 创建点坐标
window.addEventListener('message', function (event) { window.addEventListener("message", function (event) {
let company_list = event.data let company_list = event.data;
//console.log('data01', company_list); //console.log('data01', company_list);
company_list.forEach((item) => { company_list.forEach((item) => {
let company_point = new BMapGL.Point(item.longitude, item.latitude); let company_point = new BMapGL.Point(item.longitude, item.latitude);
let myIcon = {}; let myIcon = {};
// 根据公司排名打点 // 根据公司排名打点
if (item.areaRank == '1') { if (item.areaRank == "1") {
myIcon = new BMapGL.Icon( myIcon = new BMapGL.Icon("./top01.png", new BMapGL.Size(40, 60), {
'./top01.png', imageOffset: new BMapGL.Size(0, 0, 5),
new BMapGL.Size(40, 60), });
{ var marker = new BMapGL.Marker(company_point, { icon: myIcon }); // 创建点位
imageOffset: new BMapGL.Size(0, 0, 5) marker.disableMassClear();
} map.addOverlay(marker);
) } else if (item.areaRank == "2") {
var marker = new BMapGL.Marker(company_point, { icon: myIcon }); // 创建点位 myIcon = new BMapGL.Icon("./top02.png", new BMapGL.Size(40, 60), {
marker.disableMassClear(); imageOffset: new BMapGL.Size(0, 0, 5),
map.addOverlay(marker); });
} else if (item.areaRank == '2') { var marker = new BMapGL.Marker(company_point, { icon: myIcon }); // 创建点位
myIcon = new BMapGL.Icon( marker.disableMassClear();
'./top02.png', map.addOverlay(marker);
new BMapGL.Size(40, 60), } else if (item.areaRank == "3") {
{ myIcon = new BMapGL.Icon("./top03.png", new BMapGL.Size(40, 60), {
imageOffset: new BMapGL.Size(0, 0, 5) imageOffset: new BMapGL.Size(0, 0, 5),
} });
) var marker = new BMapGL.Marker(company_point, { icon: myIcon }); // 创建点位
var marker = new BMapGL.Marker(company_point, { icon: myIcon }); // 创建点位 marker.disableMassClear();
marker.disableMassClear(); map.addOverlay(marker);
map.addOverlay(marker); } else if (item.areaRank == "4") {
} else if (item.areaRank == '3') { myIcon = new BMapGL.Icon("./top04.png", new BMapGL.Size(40, 60), {
myIcon = new BMapGL.Icon( imageOffset: new BMapGL.Size(0, 0, 5),
'./top03.png', });
new BMapGL.Size(40, 60), var marker = new BMapGL.Marker(company_point, { icon: myIcon }); // 创建点位
{ marker.disableMassClear();
imageOffset: new BMapGL.Size(0, 0, 5) map.addOverlay(marker);
} } else if (item.areaRank == "5") {
) myIcon = new BMapGL.Icon("./top05.png", new BMapGL.Size(40, 60), {
var marker = new BMapGL.Marker(company_point, { icon: myIcon }); // 创建点位 imageOffset: new BMapGL.Size(0, 0, 5),
marker.disableMassClear(); });
map.addOverlay(marker); var marker = new BMapGL.Marker(company_point, { icon: myIcon }); // 创建点位
} else if (item.areaRank == '4') { marker.disableMassClear();
myIcon = new BMapGL.Icon( map.addOverlay(marker);
'./top04.png', }
new BMapGL.Size(40, 60), // 公司名
{ let content = item.companyName;
imageOffset: new BMapGL.Size(0, 0, 5) let label = new BMapGL.Label(content, {
} position: company_point, // 设置标注的地理位置
) offset: new BMapGL.Size(-20, -50), // 设置标注的偏移量
var marker = new BMapGL.Marker(company_point, { icon: myIcon }); // 创建点位 });
marker.disableMassClear(); label.setStyle({
map.addOverlay(marker); backgroundColor: "#f9d2e4",
} else if (item.areaRank == '5') { border: "0",
myIcon = new BMapGL.Icon( color: "#01847f",
'./top05.png', fontSize: "16px",
new BMapGL.Size(40, 60), cursor: "pointer",
{ });
imageOffset: new BMapGL.Size(0, 0, 5) label.disableMassClear();
} map.addOverlay(label);
) // 文本点击
var marker = new BMapGL.Marker(company_point, { icon: myIcon }); // 创建点位 label.addEventListener("click", function () {
marker.disableMassClear(); map.clearOverlays(); // 为保证始终只有一个文本覆盖物弹出，每次创造文本覆盖物时，先清楚所有的文本覆盖物
map.addOverlay(marker); // 注意 ！ clearOverlays会清除地图所有的覆盖物，所以要给不想清除的覆盖物加上disableMassClear以做到禁止删除
} var point_text = new BMapGL.Label(); // 创建公司详情文本覆盖物
// 公司名 point_text.setStyle({
let content = item.companyName; color: "blue",
let label = new BMapGL.Label(content, { borderRadius: "5px",
position: company_point, // 设置标注的地理位置 borderColor: "#ccc",
offset: new BMapGL.Size(-20, -50), // 设置标注的偏移量 padding: "10px",
}) fontSize: "16px",
label.setStyle({ fontFamily: "微软雅黑",
backgroundColor: "#f9d2e4", backgroundColor: "#b5ebff",
border: "0", transform: "translateX(-50%) translateY(calc(-100% - 10px))",
color: "#01847f", });
fontSize: "16px", // 点位点击转处置弹窗
cursor: "pointer", point_text.setPosition(
}); new BMapGL.Point(item.longitude, item.latitude)
label.disableMassClear(); );
map.addOverlay(label); point_text.setOffset(new BMapGL.Size(130, -10));
// 文本点击 point_text.setStyle({
label.addEventListener('click', function () { width: "340px",
map.clearOverlays(); // 为保证始终只有一个文本覆盖物弹出，每次创造文本覆盖物时，先清楚所有的文本覆盖物 height: "238px",
// 注意 ！ clearOverlays会清除地图所有的覆盖物，所以要给不想清除的覆盖物加上disableMassClear以做到禁止删除 background: "url(../pbImg/dialogback.png) no-repeat",
var point_text = new BMapGL.Label(); // 创建公司详情文本覆盖物 backgroundSize: "100% 100%",
point_text.setStyle({ border: "0",
color: "blue", color: "#fff",
borderRadius: "5px", zIndex: 2000000000,
borderColor: "#ccc", });
padding: "10px", point_text.setContent(`
fontSize: "16px", <div style='width:100%;display:flex;justify-content: space-between;align-items: center;'>
fontFamily: "微软雅黑", <h4 style='margin:12px;font-size: 14px;color: #FFE6D9;overflow: hidden;text-overflow: ellipsis;white-space: nowrap; cursor: pointer;'>${item.companyName}</h4>
backgroundColor: "#b5ebff", <div class='closeBtn' style='background: url(../pbImg/close.png) no-repeat;width:20px;height:20px;background-size: 100% 100%;margin-right:10px; cursor: pointer;"'></div></div>
transform: "translateX(-50%) translateY(calc(-100% - 10px))", <div style='margin:0 auto;font-size: 14px;width:316px;height:108px;padding:0 12px;background: rgba(108,128,151,0.20);border: 1px solid rgba(73,84,97,1);'>
}); <h4 style='height:33%;opacity: 0.8;margin:0;line-height:38px;font-weight:300;'><span style="color:#D0DEEE;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">单位地址：</span>${item.companyAddress}</h4>
// 点位点击转处置弹窗 <div title="${item.levelIndexThree}" style='height:33%;opacity: 0.8;margin:0;line-height:38px;font-weight:300;overflow:hidden; text-overflow: ellipsis;white-space: nowrap'><span style="color:#D0DEEE;">安全负责人：</span>${item.emergencyContact}</div>
point_text.setPosition( <h4 style='height:33%;opacity: 0.8;margin:0;line-height:38px;font-weight:300;'><span style="color:#D0DEEE;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">综合得分：</span>${item.score}</h4>
new BMapGL.Point(item.longitude, item.latitude) `);
); map.addOverlay(point_text);
point_text.setOffset(new BMapGL.Size(130, -10)); let closebtn = document.querySelector(".closeBtn");
point_text.setStyle({ closebtn.addEventListener("click", () => {
width: "340px", map.removeOverlay(point_text);
height: "238px", });
background: "url(../pbImg/dialogback.png) no-repeat", });
backgroundSize: "100% 100%", });
border: "0", });
color: "#fff",
zIndex: 2000000000,
});
point_text.setContent(`
<div style='width:100%;display:flex;justify-content: space-between;align-items: center;'>
<h4 style='margin:12px;font-size: 14px;color: #FFE6D9;overflow: hidden;text-overflow: ellipsis;white-space: nowrap; cursor: pointer;'>${item.companyName}</h4>
<div class='closeBtn' style='background: url(../pbImg/close.png) no-repeat;width:20px;height:20px;background-size: 100% 100%;margin-right:10px; cursor: pointer;"'></div></div>
<div style='margin:0 auto;font-size: 14px;width:316px;height:108px;padding:0 12px;background: rgba(108,128,151,0.20);border: 1px solid rgba(73,84,97,1);'>
<h4 style='height:33%;opacity: 0.8;margin:0;line-height:38px;font-weight:300;'><span style="color:#D0DEEE;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">单位地址：</span>${item.companyAddress}</h4>
<div title="${item.levelIndexThree}" style='height:33%;opacity: 0.8;margin:0;line-height:38px;font-weight:300;overflow:hidden; text-overflow: ellipsis;white-space: nowrap'><span style="color:#D0DEEE;">安全负责人：</span>${item.emergencyContact}</div>
<h4 style='height:33%;opacity: 0.8;margin:0;line-height:38px;font-weight:300;'><span style="color:#D0DEEE;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">综合得分：</span>${item.score}</h4>
`);
map.addOverlay(point_text);
let closebtn = document.querySelector(".closeBtn");
closebtn.addEventListener("click", () => {
map.removeOverlay(point_text);
});
})
})
})
map.centerAndZoom(point, 14); // 初始化地图，设置中心点坐标和地图级别 map.centerAndZoom(point, 14); // 初始化地图，设置中心点坐标和地图级别
map.enableScrollWheelZoom(); map.enableScrollWheelZoom();
map.setMapType(BMAP_SATELLITE_MAP); // 卫星地图模式 map.setMapType(BMAP_SATELLITE_MAP); // 卫星地图模式
// map.setHeading(64.5); }
// map.setTilt(73);
// 禁止地图旋转和倾斜可以通过配置项进行设置
// var map = new BMapGL.Map("allmap", {
// enableRotate: false,
// enableTilt: false
// });
</script>
</body>
function loadScript() {
var script = document.createElement("script");
script.type = "text/javascript";
script.src =
"//api.map.baidu.com/api?type=webgl&v=1.0&ak=CSfWwqFqSVkQaqcAAMxKyXg6Moe9UUqA&callback=initMap";
document.body.appendChild(script);
}
</script>
</body>
</html> </html>

4
src/router/index.js
Unescape View File

@ -35,9 +35,9 @@ const router = new VueRouter({
}); });
router.beforeEach((to, from, next) => { router.beforeEach((to, from, next) => {
console.log(to); /* console.log(to);
console.log(from); console.log(from);
console.log(getToken()); console.log(getToken()); */
if (getToken() || to.path === "/login") { if (getToken() || to.path === "/login") {
if (to.path == "/") { if (to.path == "/") {
router.push({ router.push({

2
src/utils/request.js
Unescape View File

@ -20,11 +20,11 @@ request.interceptors.request.use(
(config) => { (config) => {
// 是否需要设置 token // 是否需要设置 token
const isToken = (config.headers || {}).isToken === false; const isToken = (config.headers || {}).isToken === false;
console.log("isToken:", isToken);
// 是否需要防止数据重复提交 // 是否需要防止数据重复提交
if (getToken() && !isToken) { if (getToken() && !isToken) {
config.headers["Authorization"] = "Bearer " + getToken(); // 让每个请求携带自定义token 请根据实际情况自行修改 config.headers["Authorization"] = "Bearer " + getToken(); // 让每个请求携带自定义token 请根据实际情况自行修改
//console.log(config)
} }
//防止重复提交 //防止重复提交

Write Preview
Loading…
Cancel
Save