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

地图公司点位

Browse Source
pull/117/head
lukeyan 1 year ago
parent a945cde3d5
commit 5c56e879eb
7 changed files with 1489 additions and 1298 deletions
Show Stats Download Patch File Download Diff File

8
public/baiduapi.js
Unescape View File

@ -6034,13 +6034,13 @@ window.BMAP_AUTHENTIC_KEY = "iSZit9hpxlgGq28nmIyFk8lQQ21widby";
})
}
});
var Ad = new nd(I.pa + "", new M(19, 25), {
var Ad = new nd(I.pa + "marker_red_sprite.png", new M(19, 25), {
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) {
b = b || {};

227
src/components/offLineMap/index.vue
Unescape View File

@ -6,12 +6,12 @@
</template>
<script>
import MapLine from "../../../public/zhenhaiLine.json";
import MapPoint from "../../../public/zhenhaiPoint.json";
import styleJson from "../../../public/custom_map_config.json";
import { topMap, topMapOne } from "@/api/offLineMap";
import MapLine from "../../../public/zhenhaiLine.json"
import MapPoint from "../../../public/zhenhaiPoint.json"
import styleJson from "../../../public/custom_map_config.json"
import { topMap, topMapOne } from '@/api/offLineMap'
export default {
name: "zhenhaimap",
name: 'zhenhaimap',
data() {
return {
dongtaiPoint: [121.604192, 29.971189],
@ -20,36 +20,33 @@ export default {
villageSumList: [],
flag: true,
companyList: [],
label1: {},
};
label1: {}
}
},
mounted() {
topMap({ scoreType: "season" }).then((res) => {
this.companyList = res.data;
this.initMap();
});
topMap({ scoreType: 'season' }).then(res => {
this.companyList = res.data
this.initMap()
})
},
methods: {
goBack() {
this.initMap();
this.isGoBack = false;
this.$emit("goBack");
this.initMap()
this.isGoBack = false
this.$emit('goBack')
},
initMap() {
var BMap = window.BMap;
var BMap = window.BMap
// console.log(BMap, 'BMap');
var map = new BMap.Map("container", {
var map = new BMap.Map('container', {
style: {
styleJson,
},
styleJson
}
});
let that = this;
map.centerAndZoom(
new BMap.Point(this.dongtaiPoint[0], this.dongtaiPoint[1]),
12
);
map.setMinZoom(12);
map.setMaxZoom(19);
let that = this
map.centerAndZoom(new BMap.Point(this.dongtaiPoint[0], this.dongtaiPoint[1]), 12);
map.setMinZoom(12)
map.setMaxZoom(19)
map.enableScrollWheelZoom(true);
// hjrequest({
// url: '/yc/dt/statistical/village',
@ -63,27 +60,26 @@ export default {
showBoundaryEx(MapLine.features[i]);
}
var label = new BMap.Label();
showPoint();
// 城市区域划分，例如九龙湖镇区域，骆驼街道区域等等...区域边界为不规则多边形
showPoint()
function showBoundaryEx(city) {
var paths = [];
var list = city.geometry.coordinates;
var paths = []
var list = city.geometry.coordinates
// console.log(list.length, 'list[0].length')
//console.log(list[1], 'list[1].length')
var polygon = {};
var polygon = {}
if (list.length > 1) {
for (let a = 0; a < list.length; a++) {
paths = [];
paths = []
for (let i = 0; i < list[a][0].length; i++) {
let lat = list[a][0][i][1],
lng = list[a][0][i][0];
paths.push(new BMap.Point(lng, lat));
}
polygon = new BMap.Polygon(paths, {
fillColor: "#3b4c44",
fillColor: '#3b4c44',
strokeColor: "#0f1423",
fillOpacity: 0.6,
strokeWeight: 1,
strokeWeight: 1
}); //创建多边形
map.addOverlay(polygon); //增加多边形
}
@ -97,10 +93,10 @@ export default {
}
// console.log(list, 'length');
polygon = new BMap.Polygon(paths, {
fillColor: "#3b4c44",
fillColor: '#3b4c44',
strokeColor: "#0f1423",
fillOpacity: 0.6,
strokeWeight: 1,
strokeWeight: 1
}); //创建多边形
map.addOverlay(polygon); //增加多边形
}
@ -111,33 +107,34 @@ export default {
});
polygon.addEventListener("mouseout", function () {
map.removeOverlay(label);
polygon.setFillColor("#3b4c44");
polygon.setFillColor('#3b4c44');
});
//开始用"mouseover","mouseout"发现,鼠标移动过快,会多个省份也高亮了.所以改成 click了
polygon.addEventListener("click", function () {
console.log(city.properties.name, "city.properties.name");
if (city.properties.name == "骆驼街道") {
console.log(city.properties.name, 'city.properties.name');
if (city.properties.name == '骆驼街道') {
map.centerAndZoom(new BMap.Point(121.58887, 29.986122), 15);
that.isGoBack = true;
} else if (city.properties.name == "招宝山街道") {
that.isGoBack = true
} else if (city.properties.name == '招宝山街道') {
map.centerAndZoom(new BMap.Point(121.713707, 29.95656), 15);
that.isGoBack = true;
} else if (city.properties.name == "蛟川街道") {
that.isGoBack = true
} else if (city.properties.name == '蛟川街道') {
map.centerAndZoom(new BMap.Point(121.686105, 29.947339), 15);
that.isGoBack = true;
} else if (city.properties.name == "庄市街道") {
that.isGoBack = true
} else if (city.properties.name == '庄市街道') {
map.centerAndZoom(new BMap.Point(121.627037, 29.925579), 15);
that.isGoBack = true;
} else if (city.properties.name == "贵驷街道") {
that.isGoBack = true
} else if (city.properties.name == '贵驷街道') {
map.centerAndZoom(new BMap.Point(121.624142, 29.985606), 15);
that.isGoBack = true;
} else if (city.properties.name == "澥浦镇") {
that.isGoBack = true
} else if (city.properties.name == '澥浦镇') {
map.centerAndZoom(new BMap.Point(121.607133, 30.037162), 15);
that.isGoBack = true;
} else if (city.properties.name == "九龙湖镇") {
that.isGoBack = true
} else if (city.properties.name == '九龙湖镇') {
map.centerAndZoom(new BMap.Point(121.558532, 30.039457), 15);
that.isGoBack = true;
that.isGoBack = true
}
// let streetCode = that.streetCodeList.filter((item) => {
// if (item.areaName == city.properties.name) {
@ -172,62 +169,33 @@ export default {
that.companyList.forEach((item) => {
var point = new BMap.Point(item.longitude, item.latitude);
console.log(point, "point");
// var myIcon = new BMap.Icon(
// "../../../public/images/marker_red_sprite.png",
// new BMap.Size(23, 25),
// {
// anchor: new BMap.Size(10, 25),
// imageOffset: new BMap.Size(0, 0 - 25), // 设置图片偏移
// }
// );
console.log(point, 'point123');
var marker = new BMap.Marker(point); // 创建标注
// 向地图添加覆盖物
map.addOverlay(marker);
var content = item.companyName;
// 各公司点位
var label = new BMap.Label(content, {
// 创建文本标注
var label = new BMap.Label(content, { // 创建文本标注
position: point, // 设置标注的地理位置
offset: new BMap.Size(-10, -50), // 设置标注的偏移量
});
label.setStyle({
backgroundColor: " rgba(0, 0, 0, 0)",
border: "0",
color: "#0060ce",
fontSize: "16px",
});
offset: new BMap.Size(-10, -50) // 设置标注的偏移量
})
label.setStyle({ backgroundColor: ' rgba(0, 0, 0, 0)', border: '0', color: '#0060ce', fontSize: '16px' })
map.addOverlay(label);
marker.addEventListener("click", function () {
label.addEventListener("click", function () {
map.removeOverlay(that.label1);
topMapOne({
companyId: item.companyId,
companyName: item.companyName,
}).then((res) => {
topMapOne({ companyId: item.companyId, companyName: item.companyName }).then(res => {
that.label1 = new BMap.Label();
that.label1.setStyle({
color: "blue",
borderRadius: "5px",
borderColor: "#ccc",
padding: "10px",
fontSize: "16px",
fontFamily: "微软雅黑",
transform: "translateX(-50%) translateY(calc(-100% - 10px))",
color: 'blue',
borderRadius: '5px',
borderColor: '#ccc',
padding: '10px',
fontSize: '16px',
fontFamily: '微软雅黑',
transform: 'translateX(-50%) translateY(calc(-100% - 10px))'
});
that.label1.setPosition(
new BMap.Point(item.longitude, item.latitude)
);
that.label1.setOffset(new BMap.Size(130, -10));
that.label1.setStyle({
width: "372px",
height: "242px",
background: "url(pbImg/bz49.png) no-repeat",
backgroundSize: "100% 100%",
border: "0",
color: "#fff",
padding: "13px 20px",
});
that.label1.setPosition(new BMap.Point(item.longitude, item.latitude));
that.label1.setOffset(new BMap.Size(130, -10))
that.label1.setStyle({ width: '372px', height: '242px', background: 'url(pbImg/bz49.png) no-repeat', backgroundSize: '100% 100%', border: '0', color: '#fff', padding: '13px 20px' })
that.label1.setContent(`
<div style='width:100%;display:flex;justify-content: space-between;align-items: center;border-bottom:1px solid #657E83;'> <h4 style='margin:12px;font-size: 14px;color: #EBFFF4;letter-spacing: 1px;line-height: 24px;text-shadow: 0 0 9px rgba(21,255,195,0.77);overflow: hidden;text-overflow: ellipsis;white-space: nowrap;'>${res.data.companyName}</h4><div class='closeBtn' style='font-size: 14px;color: #30C4FF;letter-spacing: 1px;font-weight: 400;'>企业看板<i style='display:inline-block; background: url(pbImg/跳转.png) no-repeat;width:16px;height:14px;background-size: 100% 100%;"'></i></div><div class='closeBtn1' style='background: url(pbImg/关闭.png) no-repeat;width:20px;height:20px;background-size: 100% 100%;position:relative;z-index:200000000;
margin-top:-15px;"'></div></div>
@ -277,57 +245,55 @@ export default {
</div>
`);
map.addOverlay(that.label1);
let closebtn = document.querySelector(".closeBtn");
let closeBtn1 = document.querySelector(".closeBtn1");
closeBtn1.addEventListener("click", () => {
let closebtn = document.querySelector('.closeBtn')
let closeBtn1 = document.querySelector('.closeBtn1')
closeBtn1.addEventListener('click', () => {
map.removeOverlay(that.label1);
});
})
//console.log(btn, 'btn');
closebtn.addEventListener("click", () => {
that.$emit("toArchives", item);
closebtn.addEventListener('click', () => {
that.$emit('toArchives', item)
map.removeOverlay(that.label1);
})
})
});
})
polygon.removeEventListener('mousemove')
});
});
});
polygon.removeEventListener("mousemove");
});
}
function showPoint() {
console.log(MapPoint, "MapPoint");
console.log(MapPoint, 'MapPoint');
for (let i = 0; i < MapPoint.features.length; i++) {
var opts = {
position: new BMap.Point(
MapPoint.features[i].geometry.coordinates[0],
MapPoint.features[i].geometry.coordinates[1]
), // 指定文本标注所在的地理位置
offset: new BMap.Size(-30, -30), // 设置文本偏移量
position: new BMap.Point(MapPoint.features[i].geometry.coordinates[0], MapPoint.features[i].geometry.coordinates[1]), // 指定文本标注所在的地理位置
offset: new BMap.Size(-30, -30) // 设置文本偏移量
};
// 创建文本标注对象
var label1 = new BMap.Label(
MapPoint.features[i].properties.name,
opts
);
var label1 = new BMap.Label(MapPoint.features[i].properties.name, opts);
// 自定义文本标注样式
label1.setStyle({
color: "orange",
borderRadius: "5px",
borderColor: "#ccc",
padding: "10px",
fontSize: "16px",
height: "20px",
lineHeight: "20px",
backgroundColor: "rgba(0,0,0,0)",
border: "0",
fontFamily: "微软雅黑",
color: 'orange',
borderRadius: '5px',
borderColor: '#ccc',
padding: '10px',
fontSize: '16px',
height: '20px',
lineHeight: '20px',
backgroundColor: 'rgba(0,0,0,0)',
border: '0',
fontFamily: '微软雅黑'
});
map.addOverlay(label1);
}
}
},
},
};
}
}
</script>
<style scoped lang="less">
@ -337,6 +303,8 @@ export default {
border: 1px solid #000000;
}
.fanhui {
display: inline-block;
width: 50px;
@ -348,5 +316,6 @@ export default {
justify-content: center;
align-items: center;
z-index: 50;
}
</style>

2
src/views/applySupermarket/personBack/components/abnormalTable.vue
Unescape View File

@ -235,7 +235,7 @@ export default {
// }
.pagination_body {
width: 44vw;
height: 4vh;
height: 4.5vh;
display: flex;
flex-direction: row-reverse;
// border: 0.1px solid #2f6363;

2
src/views/applySupermarket/personBack/components/normalTable.vue
Unescape View File

@ -139,7 +139,7 @@ export default {
}
.pagination_body {
width: 44vw;
height: 4vh;
height: 4.5vh;
display: flex;
flex-direction: row-reverse;
// border: 0.1px solid #2f6363;

212
src/views/factorResources/map.vue
Unescape View File

@ -5,12 +5,13 @@
</template>
<script>
import MapLine from "../../../public/zhenhaiLine.json"
import MapPoint from "../../../public/zhenhaiPoint.json"
import styleJson from "../../../public/custom_map_config.json"
import MapLine from "../../../public/zhenhaiLine.json";
import MapPoint from "../../../public/zhenhaiPoint.json";
import styleJson from "../../../public/custom_map_config.json";
import { topMap } from "@/api/offLineMap";
export default {
name: 'zhenhaimap',
props: ['companyInfoList', 'deviceVideoInfoList'],
name: "zhenhaimap",
props: ["companyInfoList", "deviceVideoInfoList"],
data() {
return {
dongtaiPoint: [121.604192, 29.977299],
@ -20,50 +21,55 @@ export default {
villageSumList: [],
flag: true,
companyList: [],
}
};
},
mounted() {
this.$nextTick(() => {
this.initMap()
})
this.initMap();
});
topMap({ scoreType: "season" }).then((res) => {
this.companyList = res.data;
});
},
watch: {
companyInfoList: {
handler(newVal) {
this.WaringList = newVal
this.initMap()
this.WaringList = newVal;
this.initMap();
},
immediate: true
immediate: true,
},
deviceVideoInfoList: {
handler(newVal) {
this.VideoInfoList = newVal
this.initMap()
this.VideoInfoList = newVal;
this.initMap();
},
immediate: true,
},
immediate: true
}
},
methods: {
goBack() {
this.initMap()
this.initMap();
this.$emit('goBack')
this.$emit("goBack");
},
initMap() {
var BMap = window.BMap
var BMap = window.BMap;
// console.log(BMap, 'BMap');
var map = new BMap.Map('container', {
var map = new BMap.Map("container", {
style: {
styleJson
}
styleJson,
},
});
// console.log(this.WaringList, 'waringList');
let that = this
map.centerAndZoom(new BMap.Point(this.dongtaiPoint[0], this.dongtaiPoint[1]), 13);
map.setMinZoom(12)
map.setMaxZoom(19)
let that = this;
map.centerAndZoom(
new BMap.Point(this.dongtaiPoint[0], this.dongtaiPoint[1]),
13
);
map.setMinZoom(12);
map.setMaxZoom(19);
map.enableScrollWheelZoom(true);
// hjrequest({
// url: '/yc/dt/statistical/village',
@ -77,28 +83,28 @@ export default {
showBoundaryEx(MapLine.features[i]);
}
var label = new BMap.Label();
showPoint()
showPic()
showPoint();
showPic();
function showBoundaryEx(city) {
var paths = []
var list = city.geometry.coordinates
var paths = [];
var list = city.geometry.coordinates;
// console.log(list.length, 'list[0].length')
//console.log(list[1], 'list[1].length')
var polygon = {}
var polygon = {};
if (list.length > 1) {
for (let a = 0; a < list.length; a++) {
paths = []
paths = [];
for (let i = 0; i < list[a][0].length; i++) {
let lat = list[a][0][i][1],
lng = list[a][0][i][0];
paths.push(new BMap.Point(lng, lat));
}
polygon = new BMap.Polygon(paths, {
fillColor: '#3b4c44',
fillColor: "#3b4c44",
strokeColor: "#0f1423",
fillOpacity: 0.6,
strokeWeight: 1
strokeWeight: 1,
}); //创建多边形
map.addOverlay(polygon); //增加多边形
}
@ -112,10 +118,10 @@ export default {
}
// console.log(list, 'length');
polygon = new BMap.Polygon(paths, {
fillColor: '#3b4c44',
fillColor: "#3b4c44",
strokeColor: "#0f1423",
fillOpacity: 0.6,
strokeWeight: 1
strokeWeight: 1,
}); //创建多边形
map.addOverlay(polygon); //增加多边形
}
@ -126,79 +132,130 @@ export default {
});
polygon.addEventListener("mouseout", function () {
map.removeOverlay(label);
polygon.setFillColor('#3b4c44');
polygon.setFillColor("#3b4c44");
});
// 点击多边形展示公司点位_1
polygon.addEventListener("click", function () {
if (city.properties.name == "骆驼街道") {
map.centerAndZoom(new BMap.Point(121.58887, 29.986122), 15);
} else if (city.properties.name == "招宝山街道") {
map.centerAndZoom(new BMap.Point(121.713707, 29.95656), 15);
} else if (city.properties.name == "蛟川街道") {
map.centerAndZoom(new BMap.Point(121.686105, 29.947339), 15);
} else if (city.properties.name == "庄市街道") {
map.centerAndZoom(new BMap.Point(121.627037, 29.925579), 15);
} else if (city.properties.name == "贵驷街道") {
map.centerAndZoom(new BMap.Point(121.624142, 29.985606), 15);
} else if (city.properties.name == "澥浦镇") {
map.centerAndZoom(new BMap.Point(121.607133, 30.037162), 15);
} else if (city.properties.name == "九龙湖镇") {
map.centerAndZoom(new BMap.Point(121.558532, 30.039457), 15);
}
// 点击多边形展示公司点位_2
that.companyList.forEach((item) => {
var point = new BMap.Point(item.longitude, item.latitude);
var marker = new BMap.Marker(point); // 创建标注
map.addOverlay(marker);
var content = item.companyName;
var label = new BMap.Label(content, {
// 创建文本标注
position: point, // 设置标注的地理位置
offset: new BMap.Size(-10, -50), // 设置标注的偏移量
});
label.setStyle({
backgroundColor: " rgba(0, 0, 0, 0)",
border: "0",
color: "#0060ce",
fontSize: "16px",
});
map.addOverlay(label);
})
});
}
function showPoint() {
// console.log(MapPoint, 'MapPoint');
for (let i = 0; i < MapPoint.features.length; i++) {
var opts = {
position: new BMap.Point(MapPoint.features[i].geometry.coordinates[0], MapPoint.features[i].geometry.coordinates[1]), // 指定文本标注所在的地理位置
offset: new BMap.Size(-30, -30) // 设置文本偏移量
position: new BMap.Point(
MapPoint.features[i].geometry.coordinates[0],
MapPoint.features[i].geometry.coordinates[1]
), // 指定文本标注所在的地理位置
offset: new BMap.Size(-30, -30), // 设置文本偏移量
};
// 创建文本标注对象
var label1 = new BMap.Label(MapPoint.features[i].properties.name, opts);
var label1 = new BMap.Label(
MapPoint.features[i].properties.name,
opts
);
// 自定义文本标注样式
label1.setStyle({
color: 'orange',
borderRadius: '5px',
borderColor: '#ccc',
padding: '10px',
fontSize: '16px',
height: '20px',
lineHeight: '20px',
backgroundColor: 'rgba(0,0,0,0)',
border: '0',
fontFamily: '微软雅黑'
color: "orange",
borderRadius: "5px",
borderColor: "#ccc",
padding: "10px",
fontSize: "16px",
height: "20px",
lineHeight: "20px",
backgroundColor: "rgba(0,0,0,0)",
border: "0",
fontFamily: "微软雅黑",
});
map.addOverlay(label1);
}
}
function showPic() {
// console.log(that.WaringList, 'that.WaringList');
that.WaringList.forEach(item => {
that.WaringList.forEach((item) => {
// 创建小车图标
var myIcon = new BMap.Icon("pbImg/企业icon（悬浮）.png", new BMap.Size(80, 80));
myIcon.setImageUrl("pbImg/企业icon（悬浮）.png")
var myIcon = new BMap.Icon(
"pbImg/企业icon（悬浮）.png",
new BMap.Size(80, 80)
);
myIcon.setImageUrl("pbImg/企业icon（悬浮）.png");
// 创建Marker标注，使用小车图标
var marker = new BMap.Marker(new BMap.Point(item.longitude, item.latitude), {
icon: myIcon
});
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 () {
that.$emit('showCompanyData', item)
that.$emit("showCompanyData", item);
});
});
})
//that.flexPoint()
console.log(that.VideoInfoList, 'that.VideoInfoList');
that.VideoInfoList.forEach(item => {
console.log(that.VideoInfoList, "that.VideoInfoList");
that.VideoInfoList.forEach((item) => {
// 创建小车图标
var myIcon = new BMap.Icon("pbImg/监控icon（悬浮）.png", new BMap.Size(80, 80));
myIcon.setImageUrl("pbImg/监控icon（悬浮）.png")
var myIcon = new BMap.Icon(
"pbImg/监控icon（悬浮）.png",
new BMap.Size(80, 80)
);
myIcon.setImageUrl("pbImg/监控icon（悬浮）.png");
// 创建Marker标注，使用小车图标
var marker = new BMap.Marker(new BMap.Point(item.longitude, item.latitude), {
icon: myIcon
});
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 () {
that.$emit('showCameraData', item)
that.$emit("showCameraData", item);
});
});
})
}
},
flexPoint() {
var pointAll = document.querySelectorAll('.BMap_Marker.BMap_noprint')
console.log(pointAll, 'pointAll');
}
}
}
var pointAll = document.querySelectorAll(".BMap_Marker.BMap_noprint");
console.log(pointAll, "pointAll");
},
},
};
</script>
<style scoped lang="less">
@ -206,10 +263,8 @@ export default {
width: 100%;
height: 100%;
border: 1px solid #000000;
}
// /deep/ .BMap_Marker {
// z-index: 1000;
// background: url('../../../public/dongtai/awrni.png') no-repeat !important;
@ -227,6 +282,5 @@ export default {
justify-content: center;
align-items: center;
z-index: 50;
}
</style>

278
src/views/realtimeWarning/index.vue
Unescape View File

@ -3,43 +3,79 @@
<div class="box">
<div class="title">实时预警</div>
<div class="leftBox">
<div class="shuoming"><img src="../../assets/realtimeWarning/消息.png"
alt="">&nbsp;实时预警根据平安指数配置的预警规则，辖区内的企业达到预警分值后产生即时预警</div>
<zhmap class="map" :waringList="waringList" @zhuanchuzhi="chuzhi" v-if="waringList && waringList.length">
<div class="shuoming">
<img
src="../../assets/realtimeWarning/消息.png"
alt=""
/>&nbsp;实时预警根据平安指数配置的预警规则，辖区内的企业达到预警分值后产生即时预警
</div>
<zhmap
class="map"
:waringList="waringList"
@zhuanchuzhi="chuzhi"
v-if="waringList && waringList.length"
>
</zhmap>
</div>
<div class="rightBox">
<div class="totalTitle">
<div class="titleText">预警列表</div><span>&nbsp;（ <span class="redText">{{ total }}</span> ）</span>
<div class="titleText">预警列表</div>
<span
>&nbsp;（ <span class="redText">{{ total }}</span> ）</span
>
<div class="searchBox">
<el-form :model="formInline" class="search">
<el-form-item class="formItem">
<el-input v-model.trim="formInline.searchParams" placeholder="企业名称/预警指标" clearable
class="formIpt"></el-input>
<el-input
v-model.trim="formInline.searchParams"
placeholder="企业名称/预警指标"
clearable
class="formIpt"
></el-input>
</el-form-item>
<el-button type="primary" @click="getList()">搜索</el-button>
</el-form>
</div>
</div>
<div class="bottomBody">
<div class="yujingItem" v-for="(item, index) in waringList" :key="index">
<div
class="yujingItem"
v-for="(item, index) in waringList"
:key="index"
>
<div class="yujingTop">
<div class="companyName">{{ item.companyName }}</div>
<div class="impBtnList">
<div :class="{ 'shewei': a == '剧毒' || a == '易制毒', 'zhongdian': a == '消防重点' || a == '所管消防', 'zhibao': a == '放射源' || a == '易制爆', 'zhian': a == '治安重点' || a == '创安单位' }"
v-for="a in item.companyTypeList" :key="a">{{ a }}
<div
:class="{
shewei: a == '剧毒' || a == '易制毒',
zhongdian: a == '消防重点' || a == '所管消防',
zhibao: a == '放射源' || a == '易制爆',
zhian: a == '治安重点' || a == '创安单位',
}"
v-for="a in item.companyTypeList"
:key="a"
>
{{ a }}
</div>
</div>
</div>
<div class="yujingBottom">
<div class="bottomTOP">
<div class="topItem"><span>一级指标：</span><span class="numValue">{{ item.levelIndexOne
}}</span></div>
<div class="topItem">
<span>一级指标：</span
><span class="numValue">{{ item.levelIndexOne }}</span>
</div>
<div class="topItem"><span>预警指标：</span>
<el-tooltip :content="item.levelIndexThree + '异常'" placement="top-start">
<span class="numValue">“{{ item.levelIndexThree
}}”异常</span>
<div class="topItem">
<span>预警指标：</span>
<el-tooltip
:content="item.levelIndexThree + '异常'"
placement="top-start"
>
<span class="numValue"
>“{{ item.levelIndexThree }}”异常</span
>
</el-tooltip>
</div>
</div>
@ -51,23 +87,39 @@
</div>
</div>
<div class="block">
<el-pagination style="float:right;margin:5px;" class="msg-pagination-container" :background="true"
@size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageNum"
:page-sizes="[10]" layout="total, prev, pager, next, jumper" :total="total">
<el-pagination
style="float: right; margin: 5px"
class="msg-pagination-container"
:background="true"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="pageNum"
:page-sizes="[10]"
layout="total, prev, pager, next, jumper"
:total="total"
>
</el-pagination>
</div>
</div>
<el-dialog title="选择处置部门" :visible.sync="diaVisible" class="picForm" @closed="closeDia()">
<el-dialog
title="选择处置部门"
:visible.sync="diaVisible"
class="picForm"
@closed="closeDia()"
>
<div class="czTitle">可选择多个部门联合处置：</div>
<div class="czBody" v-if="deptList && deptList.length">
<el-checkbox-group v-model="checkedDepts">
<el-checkbox v-for="city in deptList" :label="city.deptId" :key="city.deptId">{{ city.deptName
}}</el-checkbox>
<el-checkbox
v-for="city in deptList"
:label="city.deptId"
:key="city.deptId"
>{{ city.deptName }}</el-checkbox
>
</el-checkbox-group>
</div>
<div slot="footer" class="dialog-footer">
<el-button @click="diaVisible = false">取 消
</el-button>
<el-button @click="diaVisible = false">取 消 </el-button>
<el-button type="primary" @click="addForm()">确 定</el-button>
</div>
</el-dialog>
@ -76,8 +128,12 @@
</template>
<script>
import { mapList, deptList, addCommonApprovalProcess } from '@/api/realtimeWarning'
import zhmap from './map.vue'
import {
mapList,
deptList,
addCommonApprovalProcess,
} from "@/api/realtimeWarning";
import zhmap from "./map.vue";
export default {
components: {
zhmap,
@ -93,54 +149,60 @@ export default {
pageNum: 1,
total: 0,
formInline: {},
}
};
},
created() {
this.getList()
this.getList();
},
methods: {
getList() {
mapList({ pageSize: this.pageSize, pageNum: this.pageNum, ...this.formInline }).then(res => {
this.waringList = res.data
this.total = res.total
})
mapList({
pageSize: this.pageSize,
pageNum: this.pageNum,
...this.formInline,
}).then((res) => {
this.waringList = res.data;
this.total = res.total;
});
},
handleSizeChange(val) {
this.pageNum = 1;
this.pageSize = val;
this.getList()
this.getList();
},
handleCurrentChange(val) {
this.pageNum = val;
this.getList()
this.getList();
},
chuzhi(val) {
//console.log(val)
this.chuzhiData = val
deptList().then(res => {
console.log(res, 'res');
this.deptList = res.data
this.diaVisible = true
})
this.chuzhiData = val;
deptList().then((res) => {
console.log(res, "res");
this.deptList = res.data;
this.diaVisible = true;
});
},
closeDia() {
this.checkedDepts = []
this.checkedDepts = [];
},
addForm() {
console.log(this.checkedDepts, 'this.checkedDepts');
addCommonApprovalProcess({ approveDeptCodes: this.checkedDepts, safeCompanyAlarm: { id: this.chuzhiData.id } }).then(res => {
console.log(this.checkedDepts, "this.checkedDepts");
addCommonApprovalProcess({
approveDeptCodes: this.checkedDepts,
safeCompanyAlarm: { id: this.chuzhiData.id },
}).then((res) => {
if (res.code == 200) {
this.$message.success(res.msg)
this.diaVisible = false
this.getList()
this.$message.success(res.msg);
this.diaVisible = false;
this.getList();
} else {
this.$message.error(res.msg)
}
})
}
}
this.$message.error(res.msg);
}
});
},
},
};
</script>
<style lang="less" scoped>
@ -157,7 +219,7 @@ export default {
height: 100%;
position: relative;
padding: 70px 25px 20px;
background: url('~@/assets/realtimeWarning/231.png') no-repeat;
background: url("~@/assets/realtimeWarning/231.png") no-repeat;
background-size: 100% 100%;
box-sizing: border-box;
display: flex;
@ -167,7 +229,7 @@ export default {
top: 25px;
left: 25px;
font-size: 18px;
color: #FFFFFF;
color: #ffffff;
letter-spacing: 1px;
font-weight: 500;
}
@ -177,7 +239,7 @@ export default {
height: 100%;
margin-right: 20px;
box-sizing: border-box;
background: url('~@/assets/realtimeWarning/矩形备份 289981.png') no-repeat;
background: url("~@/assets/realtimeWarning/矩形备份 289981.png") no-repeat;
background-size: 100% 100%;
padding: 20px;
position: relative;
@ -188,7 +250,7 @@ export default {
left: 20px;
height: 40px;
width: calc(100% - 40px);
background: rgba(15, 17, 19, 0.40);
background: rgba(15, 17, 19, 0.4);
z-index: 999999999;
padding: 0 10px;
display: flex;
@ -199,11 +261,9 @@ export default {
font-weight: 400;
img {
width: 20px;
height: 20px;
}
}
.map {
@ -216,7 +276,7 @@ export default {
width: 570px;
height: 100%;
box-sizing: border-box;
background: url('~@/assets/realtimeWarning/矩形备份 289981.png') no-repeat;
background: url("~@/assets/realtimeWarning/矩形备份 289981.png") no-repeat;
background-size: 100% 100%;
position: relative;
@ -227,14 +287,14 @@ export default {
padding: 0 20px;
display: flex;
align-items: center;
color: #EBFFF4;
color: #ebfff4;
.titleText {
font-size: 16px;
color: #EBFFF4;
color: #ebfff4;
letter-spacing: 2px;
width: 120px;
text-shadow: 0 0 9px rgba(21, 255, 195, 0.60);
text-shadow: 0 0 9px rgba(21, 255, 195, 0.6);
font-weight: 400;
}
@ -253,8 +313,8 @@ export default {
/deep/.el-input__inner {
// background: url('~@/assets/companyFile/2121.png') no-repeat;
background: #3B4450;
border: 1px solid #5B748C;
background: #3b4450;
border: 1px solid #5b748c;
color: rgba(234, 246, 255, 0.7);
height: 35px;
@ -269,7 +329,6 @@ export default {
}
/deep/.el-form-item {
margin: 0;
.el-form-item__content {
@ -277,12 +336,11 @@ export default {
}
.el-form-item__label {
color: #EAF6FF;
color: #eaf6ff;
letter-spacing: 1px;
text-align: center;
font-weight: 400;
}
}
/deep/.el-button--primary {
@ -293,10 +351,10 @@ export default {
text-align: center;
background: rgba(0, 0, 0, 0);
border: 0;
background: url('~@/assets/companyFile/2121.png') no-repeat;
background: url("~@/assets/companyFile/2121.png") no-repeat;
background-size: 100% 100%;
font-size: 14px;
color: #F8FBFF;
color: #f8fbff;
letter-spacing: 0.89px;
font-weight: 500;
}
@ -307,11 +365,11 @@ export default {
line-height: 30px;
padding: 0;
text-align: center;
background: #3B4450;
background: #3b4450;
border: 0;
font-size: 14px;
color: #F8FBFF;
color: #f8fbff;
letter-spacing: 0.89px;
font-weight: 500;
}
@ -319,10 +377,10 @@ export default {
.redText {
font-size: 16px;
color: #FF9191;
color: #ff9191;
letter-spacing: 2px;
font-weight: 400
font-weight: 400;
}
}
@ -335,7 +393,6 @@ export default {
&::-webkit-scrollbar {
width: 6px;
}
// 滚动条里面默认的小方块,自定义样式
@ -347,13 +404,12 @@ export default {
// 滚动条里面的轨道
&::-webkit-scrollbar-track {
background: transparent;
}
.yujingItem {
height: 158px;
width: 100%;
background: rgba(108, 128, 151, 0.20);
background: rgba(108, 128, 151, 0.2);
border: 1px solid rgba(73, 84, 97, 1);
position: relative;
margin-bottom: 1ch;
@ -364,10 +420,9 @@ export default {
width: 100%;
padding: 0 14px 5px;
.companyName {
font-size: 16px;
color: #30C4FF;
color: #30c4ff;
letter-spacing: 1.14px;
font-weight: 500;
margin-right: 20px;
@ -392,10 +447,11 @@ export default {
height: 26px;
line-height: 26px;
width: auto;
background: url('~@/assets/companyFile/编组 11991.png') no-repeat;
background: url("~@/assets/companyFile/编组 11991.png")
no-repeat;
padding: 0 5px;
font-size: 14px;
color: #B5EBFF;
color: #b5ebff;
letter-spacing: 0.44px;
font-weight: 400;
background-size: 100% 100%;
@ -406,10 +462,11 @@ export default {
height: 26px;
line-height: 26px;
width: auto;
background: url('~@/assets/companyFile/编组 11222221.png') no-repeat;
background: url("~@/assets/companyFile/编组 11222221.png")
no-repeat;
padding: 0 5px;
font-size: 14px;
color: #E3DEFF;
color: #e3deff;
letter-spacing: 0.44px;
font-weight: 400;
background-size: 100% 100%;
@ -420,10 +477,11 @@ export default {
height: 26px;
line-height: 26px;
width: auto;
background: url('~@/assets/companyFile/编组 11991备份 10.png') no-repeat;
background: url("~@/assets/companyFile/编组 11991备份 10.png")
no-repeat;
padding: 0 5px;
font-size: 14px;
color: #E3DEFF;
color: #e3deff;
letter-spacing: 0.44px;
font-weight: 400;
background-size: 100% 100%;
@ -434,16 +492,16 @@ export default {
height: 26px;
line-height: 26px;
width: auto;
background: url('~@/assets/companyFile/编组 11991备份 21.png') no-repeat;
background: url("~@/assets/companyFile/编组 11991备份 21.png")
no-repeat;
padding: 0 5px;
font-size: 14px;
color: #E3DEFF;
color: #e3deff;
letter-spacing: 0.44px;
font-weight: 400;
background-size: 100% 100%;
margin-right: 10px;
}
}
}
@ -456,7 +514,7 @@ export default {
width: 50px;
line-height: 20px;
font-size: 14px;
color: #30C4FF;
color: #30c4ff;
letter-spacing: 1px;
font-weight: 400;
}
@ -467,7 +525,6 @@ export default {
padding: 0 14px 5px;
overflow: hidden;
.bottomTOP {
width: 100%;
height: 50%;
@ -496,7 +553,6 @@ export default {
text-overflow: ellipsis;
span {
width: 70px;
}
@ -510,13 +566,12 @@ export default {
.numValue {
font-size: 14px;
color: #FFFFFF;
color: #ffffff;
letter-spacing: 0;
font-weight: 400;
white-space: nowrap;
text-overflow: ellipsis;
}
}
}
}
@ -538,13 +593,12 @@ export default {
color: #ccc;
}
}
}
.picForm {
/deep/ .el-dialog {
background-color: rgba(0, 0, 0, 0);
background: url('~@/assets/realtimeWarning/导入弹窗.png') no-repeat;
background: url("~@/assets/realtimeWarning/导入弹窗.png") no-repeat;
background-size: 100% 100%;
width: 461px;
height: 412px;
@ -553,7 +607,7 @@ export default {
.el-dialog__title {
font-size: 16px;
color: #EBFFF4;
color: #ebfff4;
letter-spacing: 2px;
text-shadow: 0 0 9px rgba(21, 255, 195, 0.77);
@ -570,7 +624,7 @@ export default {
opacity: 0.7;
font-family: PingFangSC-Regular;
font-size: 14px;
color: #EAF6FF;
color: #eaf6ff;
letter-spacing: 1px;
font-weight: 400;
margin-bottom: 12px;
@ -579,7 +633,7 @@ export default {
.czBody {
width: 440px;
height: 232px;
background: rgba(108, 128, 151, 0.20);
background: rgba(108, 128, 151, 0.2);
border: 1px solid #495461;
overflow: auto;
@ -603,32 +657,35 @@ export default {
width: 80%;
height: 34px;
opacity: 0.7;
background-image: linear-gradient(180deg, rgba(234, 241, 248, 0.10) 0%, rgba(208, 222, 238, 0.10) 100%);
border: 1px solid #5B748C;
background-image: linear-gradient(
180deg,
rgba(234, 241, 248, 0.1) 0%,
rgba(208, 222, 238, 0.1) 100%
);
border: 1px solid #5b748c;
margin: 16px 15px 0;
font-size: 14px;
color: #EAF6FF;
color: #eaf6ff;
letter-spacing: 1px;
padding: 7px;
}
.is-checked {
color: #37FDC7;
background: rgba(13, 251, 246, 0.10);
border: 1px solid #37FDC7;
color: #37fdc7;
background: rgba(13, 251, 246, 0.1);
border: 1px solid #37fdc7;
box-sizing: border-box;
}
.el-checkbox__input.is-checked + .el-checkbox__label {
color: #37FDC7;
color: #37fdc7;
}
.el-checkbox__input.is-checked .el-checkbox__inner,
.el-checkbox__input.is-indeterminate .el-checkbox__inner {
background-color: rgba(13, 251, 246, 0.10);
background-color: rgba(13, 251, 246, 0.1);
border-color: rgba(255, 251, 246, 0.6);
}
}
@ -640,10 +697,14 @@ export default {
height: 35px;
opacity: 0.8;
background: rgba(0, 0, 0, 0);
background-image: linear-gradient(180deg, rgba(234, 241, 248, 0.10) 0%, rgba(208, 222, 238, 0.10) 100%);
background-image: linear-gradient(
180deg,
rgba(234, 241, 248, 0.1) 0%,
rgba(208, 222, 238, 0.1) 100%
);
border: 1px solid rgba(91, 116, 140, 1);
border-radius: 4px;
color: #E3DEFF
color: #e3deff;
}
.el-button--primary {
@ -651,13 +712,12 @@ export default {
height: 35px;
background: rgba(0, 0, 0, 0);
border: 0;
background: url('~@/assets/realtimeWarning/2121.png') no-repeat;
background: url("~@/assets/realtimeWarning/2121.png") no-repeat;
background-size: 100% 100%;
}
}
}
}
}
}
</style>

278
src/views/realtimeWarning/map.vue
Unescape View File

@ -1,18 +1,17 @@
<template>
<div>
<div class="bmap" id="container" ref="container"></div>
</div>
</template>
<script>
import MapLine from "../../../public/zhenhaiLine.json"
import MapPoint from "../../../public/zhenhaiPoint.json"
import styleJson from "../../../public/custom_map_config.json"
import MapLine from "../../../public/zhenhaiLine.json";
import MapPoint from "../../../public/zhenhaiPoint.json";
import styleJson from "../../../public/custom_map_config.json";
import { topMap } from "@/api/offLineMap";
export default {
name: 'zhenhaimap',
props: ['waringList'],
name: "zhenhaimap",
props: ["waringList"],
data() {
return {
dongtaiPoint: [121.604192, 29.977299],
@ -21,34 +20,39 @@ export default {
villageSumList: [],
flag: true,
companyList: [],
}
};
},
mounted() {
this.$nextTick(() => {
this.initMap()
})
this.initMap();
});
topMap({ scoreType: "season" }).then((res) => {
this.companyList = res.data;
});
},
methods: {
goBack() {
this.initMap()
this.initMap();
this.$emit('goBack')
this.$emit("goBack");
},
initMap() {
var BMap = window.BMap
var BMap = window.BMap;
// console.log(BMap, 'BMap');
var map = new BMap.Map('container', {
var map = new BMap.Map("container", {
style: {
styleJson
}
styleJson,
},
});
// console.log(this.WaringList, 'waringList');
let that = this
map.centerAndZoom(new BMap.Point(this.dongtaiPoint[0], this.dongtaiPoint[1]), 13);
map.setMinZoom(12)
map.setMaxZoom(19)
let that = this;
map.centerAndZoom(
new BMap.Point(this.dongtaiPoint[0], this.dongtaiPoint[1]),
13
);
map.setMinZoom(12);
map.setMaxZoom(19);
map.enableScrollWheelZoom(true);
// hjrequest({
// url: '/yc/dt/statistical/village',
@ -62,29 +66,29 @@ export default {
showBoundaryEx(MapLine.features[i]);
}
var label = new BMap.Label();
showPoint()
showPic()
showPoint();
showPic();
function showBoundaryEx(city) {
var paths = []
var list = city.geometry.coordinates
var paths = [];
var list = city.geometry.coordinates;
// console.log(list.length, 'list[0].length')
//console.log(list[1], 'list[1].length')
var polygon = {}
var polygon = {};
if (list.length > 1) {
for (let a = 0; a < list.length; a++) {
paths = []
paths = [];
for (let i = 0; i < list[a][0].length; i++) {
let lat = list[a][0][i][1],
lng = list[a][0][i][0];
paths.push(new BMap.Point(lng, lat));
}
polygon = new BMap.Polygon(paths, {
fillColor: '#3b4c44',
fillColor: "#3b4c44",
strokeColor: "#0f1423",
fillOpacity: 0.6,
strokeWeight: 1
strokeWeight: 1,
}); //创建多边形
map.addOverlay(polygon); //增加多边形
}
@ -98,10 +102,10 @@ export default {
}
// console.log(list, 'length');
polygon = new BMap.Polygon(paths, {
fillColor: '#3b4c44',
fillColor: "#3b4c44",
strokeColor: "#0f1423",
fillOpacity: 0.6,
strokeWeight: 1
strokeWeight: 1,
}); //创建多边形
map.addOverlay(polygon); //增加多边形
}
@ -112,67 +116,176 @@ export default {
});
polygon.addEventListener("mouseout", function () {
map.removeOverlay(label);
polygon.setFillColor('#3b4c44');
polygon.setFillColor("#3b4c44");
});
// 点击多边形展示公司点位_1
polygon.addEventListener("click", function () {
if (city.properties.name == "骆驼街道") {
map.centerAndZoom(new BMap.Point(121.58887, 29.986122), 15);
} else if (city.properties.name == "招宝山街道") {
map.centerAndZoom(new BMap.Point(121.713707, 29.95656), 15);
} else if (city.properties.name == "蛟川街道") {
map.centerAndZoom(new BMap.Point(121.686105, 29.947339), 15);
} else if (city.properties.name == "庄市街道") {
map.centerAndZoom(new BMap.Point(121.627037, 29.925579), 15);
} else if (city.properties.name == "贵驷街道") {
map.centerAndZoom(new BMap.Point(121.624142, 29.985606), 15);
} else if (city.properties.name == "澥浦镇") {
map.centerAndZoom(new BMap.Point(121.607133, 30.037162), 15);
} else if (city.properties.name == "九龙湖镇") {
map.centerAndZoom(new BMap.Point(121.558532, 30.039457), 15);
}
// 点击多边形展示公司点位_2
that.companyList.forEach((item) => {
var point = new BMap.Point(item.longitude, item.latitude);
var marker = new BMap.Marker(point); // 创建标注
map.addOverlay(marker);
var content = item.companyName;
var label = new BMap.Label(content, {
// 创建文本标注
position: point, // 设置标注的地理位置
offset: new BMap.Size(-10, -50), // 设置标注的偏移量
});
label.setStyle({
backgroundColor: " rgba(0, 0, 0, 0)",
border: "0",
color: "#0060ce",
fontSize: "16px",
});
map.addOverlay(label);
label.addEventListener("click", function () {
var label_ponit = new BMap.Label(); // 公司点位
label_ponit.setStyle({
color: "blue",
borderRadius: "5px",
borderColor: "#ccc",
padding: "10px",
fontSize: "16px",
fontFamily: "微软雅黑",
transform: "translateX(-50%) translateY(calc(-100% - 10px))",
});
// 点位点击转处置弹窗
label_ponit.setPosition(
new BMap.Point(item.longitude, item.latitude)
);
label_ponit.setOffset(new BMap.Size(130, -10));
label_ponit.setStyle({
width: "340px",
height: "238px",
background: "url(pbImg/气泡弹窗1.png) no-repeat",
backgroundSize: "100% 100%",
border: "0",
color: "#fff",
zIndex: 2000000000,
});
label_ponit.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; '>${item.companyName}</h4><div class='closeBtn' style='background: url(pbImg/关闭.png) no-repeat;width:20px;height:20px;background-size: 100% 100%;margin-right:10px;"'></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.levelIndexOne}</h4>
<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.levelIndexThree}"异常</h4>
<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.alarmTime}</h4>
<div class='zhuanchuzhiBtn' style='width:80px;height:34px;font-size: 14px;
color: #FFFFFF;
text-align:center;
line-height:34px;
background: url(pbImg/2121.png) no-repeat;
margin-top:20px;
background-size: 100% 100%;
letter-spacing: 0;
margin-left:80px;
font-weight: 400;'>转处置</div>
</div>
`);
map.addOverlay(label_ponit);
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_ponit);
});
});
});
});
}
function showPoint() {
// console.log(MapPoint, 'MapPoint');
for (let i = 0; i < MapPoint.features.length; i++) {
var opts = {
position: new BMap.Point(MapPoint.features[i].geometry.coordinates[0], MapPoint.features[i].geometry.coordinates[1]), // 指定文本标注所在的地理位置
offset: new BMap.Size(-30, -30) // 设置文本偏移量
position: new BMap.Point(
MapPoint.features[i].geometry.coordinates[0],
MapPoint.features[i].geometry.coordinates[1]
), // 指定文本标注所在的地理位置
offset: new BMap.Size(-30, -30), // 设置文本偏移量
};
// 创建文本标注对象
var label1 = new BMap.Label(MapPoint.features[i].properties.name, opts);
var label1 = new BMap.Label(
MapPoint.features[i].properties.name,
opts
);
// 自定义文本标注样式
label1.setStyle({
color: 'orange',
borderRadius: '5px',
borderColor: '#ccc',
padding: '10px',
fontSize: '16px',
height: '20px',
lineHeight: '20px',
backgroundColor: 'rgba(0,0,0,0)',
border: '0',
fontFamily: '微软雅黑'
color: "orange",
borderRadius: "5px",
borderColor: "#ccc",
padding: "10px",
fontSize: "16px",
height: "20px",
lineHeight: "20px",
backgroundColor: "rgba(0,0,0,0)",
border: "0",
fontFamily: "微软雅黑",
});
map.addOverlay(label1);
}
}
function showPic() {
// console.log(that.WaringList, 'that.WaringList');
that.WaringList.forEach(item => {
that.WaringList.forEach((item) => {
// 创建小车图标
var myIcon = new BMap.Icon("public/dongtai/awrni.png", new BMap.Size(80, 80));
myIcon.setImageUrl("/dongtai/awrni.png")
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');
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))'
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.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(`
<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; '>${item.companyName}</h4><div class='closeBtn' style='background: url(pbImg/关闭.png) no-repeat;width:20px;height:20px;background-size: 100% 100%;margin-right:10px;"'></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);'>
@ -192,33 +305,31 @@ font-weight: 400;'>转处置</div>
</div>
`);
map.addOverlay(label);
let btn = document.querySelector('.zhuanchuzhiBtn')
let btn = document.querySelector(".zhuanchuzhiBtn");
//console.log(btn, 'btn');
btn.addEventListener('click', () => {
btn.addEventListener("click", () => {
//console.log(item, 'item');
that.$emit('zhuanchuzhi', item)
})
let closebtn = document.querySelector('.closeBtn')
that.$emit("zhuanchuzhi", item);
});
let closebtn = document.querySelector(".closeBtn");
//console.log(btn, 'btn');
closebtn.addEventListener('click', () => {
closebtn.addEventListener("click", () => {
map.removeOverlay(label);
})
});
// label.addEventListener('mouseout', function () {
// map.removeOverlay(label);
// })
});
})
});
//that.flexPoint()
}
},
flexPoint() {
var pointAll = document.querySelectorAll('.BMap_Marker.BMap_noprint')
console.log(pointAll, 'pointAll');
}
}
}
var pointAll = document.querySelectorAll(".BMap_Marker.BMap_noprint");
console.log(pointAll, "pointAll");
},
},
};
</script>
<style scoped lang="less">
@ -226,13 +337,11 @@ font-weight: 400;'>转处置</div>
width: 100%;
height: 100%;
border: 1px solid #000000;
}
/deep/ .BMap_Marker {
z-index: 1000;
background: url('../../../public/dongtai/awrni.png') no-repeat !important;
background: url("../../../public/dongtai/awrni.png") no-repeat !important;
background-size: 100% 100% !important;
}
@ -247,6 +356,5 @@ font-weight: 400;'>转处置</div>
justify-content: center;
align-items: center;
z-index: 50;
}
</style>
Write Preview
Loading…
Cancel
Save