diff --git a/public/baiduapi.js b/public/baiduapi.js index bfc7fba..78415c0 100644 --- a/public/baiduapi.js +++ b/public/baiduapi.js @@ -6038,11 +6038,12 @@ window.BMAP_AUTHENTIC_KEY = "iSZit9hpxlgGq28nmIyFk8lQQ21widby"; anchor: new M(10, 25), infoWindowAnchor: new M(10, 0) }) - , Bd = new nd(I.pa + "marker_red_sprite.png", new M(50, 120), { - anchor: new M(50, 120), - imageOffset: new M(-10, 40) + , Bd = new nd(I.pa + "marker_red_sprite.png", new M(20, 11), { + anchor: new M(6, 11), + imageOffset: new M(-19, -13) }); function W(a, b) { + kb.call(this); b = b || {}; this.point = a; this.Tq = this.map = p; diff --git a/public/baiduapi2.js b/public/baiduapi3.js similarity index 99% rename from public/baiduapi2.js rename to public/baiduapi3.js index 78415c0..bfc7fba 100644 --- a/public/baiduapi2.js +++ b/public/baiduapi3.js @@ -6038,12 +6038,11 @@ window.BMAP_AUTHENTIC_KEY = "iSZit9hpxlgGq28nmIyFk8lQQ21widby"; anchor: new M(10, 25), infoWindowAnchor: new M(10, 0) }) - , Bd = new nd(I.pa + "marker_red_sprite.png", new M(20, 11), { - anchor: new M(6, 11), - imageOffset: new M(-19, -13) + , Bd = new nd(I.pa + "marker_red_sprite.png", new M(50, 120), { + anchor: new M(50, 120), + imageOffset: new M(-10, 40) }); function W(a, b) { - kb.call(this); b = b || {}; this.point = a; this.Tq = this.map = p; diff --git a/src/assets/realtimeWarning/bluecity.png b/src/assets/realtimeWarning/bluecity.png new file mode 100644 index 0000000..5377c63 Binary files /dev/null and b/src/assets/realtimeWarning/bluecity.png differ diff --git a/src/assets/realtimeWarning/greencity.png b/src/assets/realtimeWarning/greencity.png new file mode 100644 index 0000000..f7c760f Binary files /dev/null and b/src/assets/realtimeWarning/greencity.png differ diff --git a/src/assets/realtimeWarning/redcity.png b/src/assets/realtimeWarning/redcity.png new file mode 100644 index 0000000..32267bd Binary files /dev/null and b/src/assets/realtimeWarning/redcity.png differ diff --git a/src/assets/realtimeWarning/yellowcity.png b/src/assets/realtimeWarning/yellowcity.png new file mode 100644 index 0000000..9eb99e5 Binary files /dev/null and b/src/assets/realtimeWarning/yellowcity.png differ diff --git a/src/views/realtimeWarning/components/blueWarn.vue b/src/views/realtimeWarning/components/blueWarn.vue index 90d56df..1f39e5e 100644 --- a/src/views/realtimeWarning/components/blueWarn.vue +++ b/src/views/realtimeWarning/components/blueWarn.vue @@ -117,7 +117,6 @@ export default { color: "blue", }; mapList(param).then((res) => { - console.log("22222222"); this.blue_warn_comapny_list = res.data; // 蓝色预警企业合计数量 this.total = res.total; diff --git a/src/views/realtimeWarning/components/warnMap.vue b/src/views/realtimeWarning/components/warnMap.vue new file mode 100644 index 0000000..7fee625 --- /dev/null +++ b/src/views/realtimeWarning/components/warnMap.vue @@ -0,0 +1,280 @@ + + + \ No newline at end of file diff --git a/src/views/realtimeWarning/index.vue b/src/views/realtimeWarning/index.vue index 24bff96..64538ab 100644 --- a/src/views/realtimeWarning/index.vue +++ b/src/views/realtimeWarning/index.vue @@ -9,13 +9,11 @@ 实时预警根据平安指数配置的预警规则,辖区内的企业达到预警分值后产生即时预警 - - +
@@ -144,11 +142,11 @@ import { addCommonApprovalProcess, get_company_list, } from "@/api/realtimeWarning"; -import Map from "./map"; +import WarnMap from "./components/warnMap"; // 预警地图 import WarnCompany from "./components/warnCompany"; export default { components: { - Map, + WarnMap, WarnCompany, }, data() { diff --git a/src/views/realtimeWarning/map.vue b/src/views/realtimeWarning/map.vue index 5bab3f1..132382e 100644 --- a/src/views/realtimeWarning/map.vue +++ b/src/views/realtimeWarning/map.vue @@ -79,7 +79,7 @@ export default { } var label = new BMap.Label(); showPoint(); - showPic(); + // showPic(); function showBoundaryEx(city) { var paths = []; @@ -131,7 +131,6 @@ export default { polygon.setFillColor("#3b4c44"); }); // 点击多边形展示公司点位_1 - // 银州大桥 宝隆 polygon.addEventListener("click", function () { if (city.properties.name == "骆驼街道") { map.centerAndZoom(new BMap.Point(121.58887, 29.986122), 15); @@ -155,7 +154,9 @@ export default { var point = new BMap.Point(item.longitude, item.latitude); // 自定义图标 var myIcon = new BMap.Icon( - require("@/assets/realtimeWarning/red.png"), new BMap.Size(23, 25) + require("@/assets/realtimeWarning/redcity.png"), new BMap.Size(60, 60),{ + anchor:new BMap.Size(100,25) + } ); var marker = new BMap.Marker(point,{icon:myIcon}); // 创建点位 map.addOverlay(marker); @@ -264,84 +265,80 @@ font-weight: 400;'>转处置
map.addOverlay(label1); } } - function showPic() { - console.log(that.WaringList, "that.WaringList"); - that.WaringList.forEach((item) => { - // 创建小车图标 - var myIcon = new BMap.Icon( - "public/dongtai/awrni.png", - new BMap.Size(80, 80) - ); - myIcon.setImageUrl("/dongtai/awrni.png"); - // 创建Marker标注,使用小车图标 - var marker = new BMap.Marker( - new BMap.Point(item.longitude, item.latitude), - { - icon: myIcon, - } - ); - console.log(marker, "marker"); - map.addOverlay(marker); - marker.addEventListener("click", function () { - var label = new BMap.Label(); - label.setStyle({ - color: "blue", - borderRadius: "5px", - borderColor: "#ccc", - padding: "10px", - fontSize: "16px", - fontFamily: "微软雅黑", - transform: "translateX(-50%) translateY(calc(-100% - 10px))", - }); - // 点位点击弹窗 - label.setPosition(new BMap.Point(item.longitude, item.latitude)); - label.setOffset(new BMap.Size(130, -10)); - label.setStyle({ - width: "340px", - height: "238px", - background: "url(pbImg/气泡弹窗1.png) no-repeat", - backgroundSize: "100% 100%", - border: "0", - color: "#fff", - zIndex: 2000000000, - }); - label.setContent(` -

${item.companyName}

-
-

一级指标:${item.levelIndexOne}

-

预警指标:"${item.levelIndexThree}"异常

-

预警时间:${item.alarmTime}

-
转处置
-
- `); - map.addOverlay(label); - let btn = document.querySelector(".zhuanchuzhiBtn"); - //console.log(btn, 'btn'); - btn.addEventListener("click", () => { - //console.log(item, 'item'); - that.$emit("zhuanchuzhi", item); - }); - let closebtn = document.querySelector(".closeBtn"); - //console.log(btn, 'btn'); - closebtn.addEventListener("click", () => { - map.removeOverlay(label); - }); - // label.addEventListener('mouseout', function () { - // map.removeOverlay(label); - // }) - }); - }); - //that.flexPoint() - } +// function showPic() { +// console.log(that.WaringList, "that.WaringList"); +// that.WaringList.forEach((item) => { +// // 创建小车图标 +// var myIcon = new BMap.Icon( +// "public/dongtai/awrni.png", +// new BMap.Size(80, 80) +// ); +// myIcon.setImageUrl("/dongtai/awrni.png"); +// // 创建Marker标注,使用小车图标 +// var marker = new BMap.Marker( +// new BMap.Point(item.longitude, item.latitude), +// { +// icon: myIcon, +// } +// ); +// console.log(marker, "marker"); +// map.addOverlay(marker); +// marker.addEventListener("click", function () { +// var label = new BMap.Label(); +// label.setStyle({ +// color: "blue", +// borderRadius: "5px", +// borderColor: "#ccc", +// padding: "10px", +// fontSize: "16px", +// fontFamily: "微软雅黑", +// transform: "translateX(-50%) translateY(calc(-100% - 10px))", +// }); +// // 点位点击弹窗 +// label.setPosition(new BMap.Point(item.longitude, item.latitude)); +// label.setOffset(new BMap.Size(130, -10)); +// label.setStyle({ +// width: "340px", +// height: "238px", +// background: "url(pbImg/气泡弹窗1.png) no-repeat", +// backgroundSize: "100% 100%", +// border: "0", +// color: "#fff", +// zIndex: 2000000000, +// }); +// label.setContent(` +//

${item.companyName}

+//
+//

一级指标:${item.levelIndexOne}

+//

预警指标:"${item.levelIndexThree}"异常

+//

预警时间:${item.alarmTime}

+//
转处置
+//
+// `); +// map.addOverlay(label); +// let btn = document.querySelector(".zhuanchuzhiBtn"); +// btn.addEventListener("click", () => { +// that.$emit("zhuanchuzhi", item); +// }); +// let closebtn = document.querySelector(".closeBtn"); +// closebtn.addEventListener("click", () => { +// map.removeOverlay(label); +// }); +// // label.addEventListener('mouseout', function () { +// // map.removeOverlay(label); +// // }) +// }); +// }); +// } }, flexPoint() { var pointAll = document.querySelectorAll(".BMap_Marker.BMap_noprint"); @@ -358,11 +355,11 @@ font-weight: 400;'>转处置 border: 1px solid #000000; } -/deep/ .BMap_Marker { - z-index: 1000; - background: url("../../../public/dongtai/awrni.png") no-repeat !important; - background-size: 100% 100% !important; -} +// /deep/ .BMap_Marker { +// z-index: 1000; +// background: url("../../../public/dongtai/awrni.png") no-repeat !important; +// background-size: 100% 100% !important; +// } .fanhui { display: inline-block;