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), anchor: new M(10, 25),
infoWindowAnchor: new M(10, 0) infoWindowAnchor: new M(10, 0)
}) })
, Bd = new nd(I.pa + "marker_red_sprite.png", new M(20, 11), { , Bd = new nd(I.pa + "marker_red_sprite.png", new M(50, 120), {
anchor: new M(6, 11), anchor: new M(50, 120),
imageOffset: new M(-19, -13) imageOffset: new M(-10, 40)
}); });
function W(a, b) { function W(a, b) {
b = b || {}; b = b || {};

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

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

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

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

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

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

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

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

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

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

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

@ -1,18 +1,17 @@
<template> <template>
<div> <div>
<div class="bmap" id="container" ref="container"></div> <div class="bmap" id="container" ref="container"></div>
</div> </div>
</template> </template>
<script> <script>
import MapLine from "../../../public/zhenhaiLine.json" import MapLine from "../../../public/zhenhaiLine.json";
import MapPoint from "../../../public/zhenhaiPoint.json" import MapPoint from "../../../public/zhenhaiPoint.json";
import styleJson from "../../../public/custom_map_config.json" import styleJson from "../../../public/custom_map_config.json";
import { topMap } from "@/api/offLineMap";
export default { export default {
name: 'zhenhaimap', name: "zhenhaimap",
props: ['waringList'], props: ["waringList"],
data() { data() {
return { return {
dongtaiPoint: [121.604192, 29.977299], dongtaiPoint: [121.604192, 29.977299],
@ -21,34 +20,39 @@ export default {
villageSumList: [], villageSumList: [],
flag: true, flag: true,
companyList: [], companyList: [],
} };
}, },
mounted() { mounted() {
this.$nextTick(() => { this.$nextTick(() => {
this.initMap() this.initMap();
}) });
topMap({ scoreType: "season" }).then((res) => {
this.companyList = res.data;
});
}, },
methods: { methods: {
goBack() { goBack() {
this.initMap() this.initMap();
this.$emit('goBack') this.$emit("goBack");
}, },
initMap() { initMap() {
var BMap = window.BMap var BMap = window.BMap;
// console.log(BMap, 'BMap'); // console.log(BMap, 'BMap');
var map = new BMap.Map('container', { var map = new BMap.Map("container", {
style: { style: {
styleJson styleJson,
} },
}); });
// console.log(this.WaringList, 'waringList'); // console.log(this.WaringList, 'waringList');
let that = this let that = this;
map.centerAndZoom(new BMap.Point(this.dongtaiPoint[0], this.dongtaiPoint[1]), 13); map.centerAndZoom(
map.setMinZoom(12) new BMap.Point(this.dongtaiPoint[0], this.dongtaiPoint[1]),
map.setMaxZoom(19) 13
);
map.setMinZoom(12);
map.setMaxZoom(19);
map.enableScrollWheelZoom(true); map.enableScrollWheelZoom(true);
// hjrequest({ // hjrequest({
// url: '/yc/dt/statistical/village', // url: '/yc/dt/statistical/village',
@ -62,29 +66,29 @@ export default {
showBoundaryEx(MapLine.features[i]); showBoundaryEx(MapLine.features[i]);
} }
var label = new BMap.Label(); var label = new BMap.Label();
showPoint() showPoint();
showPic() showPic();
function showBoundaryEx(city) { function showBoundaryEx(city) {
var paths = [] var paths = [];
var list = city.geometry.coordinates var list = city.geometry.coordinates;
// console.log(list.length, 'list[0].length') // console.log(list.length, 'list[0].length')
//console.log(list[1], 'list[1].length') //console.log(list[1], 'list[1].length')
var polygon = {} var polygon = {};
if (list.length > 1) { if (list.length > 1) {
for (let a = 0; a < list.length; a++) { for (let a = 0; a < list.length; a++) {
paths = [] paths = [];
for (let i = 0; i < list[a][0].length; i++) { for (let i = 0; i < list[a][0].length; i++) {
let lat = list[a][0][i][1], let lat = list[a][0][i][1],
lng = list[a][0][i][0]; lng = list[a][0][i][0];
paths.push(new BMap.Point(lng, lat)); paths.push(new BMap.Point(lng, lat));
} }
polygon = new BMap.Polygon(paths, { polygon = new BMap.Polygon(paths, {
fillColor: '#3b4c44', fillColor: "#3b4c44",
strokeColor: "#0f1423", strokeColor: "#0f1423",
fillOpacity: 0.6, fillOpacity: 0.6,
strokeWeight: 1 strokeWeight: 1,
}); //创建多边形 }); //创建多边形
map.addOverlay(polygon); //增加多边形 map.addOverlay(polygon); //增加多边形
} }
@ -98,10 +102,10 @@ export default {
} }
// console.log(list, 'length'); // console.log(list, 'length');
polygon = new BMap.Polygon(paths, { polygon = new BMap.Polygon(paths, {
fillColor: '#3b4c44', fillColor: "#3b4c44",
strokeColor: "#0f1423", strokeColor: "#0f1423",
fillOpacity: 0.6, fillOpacity: 0.6,
strokeWeight: 1 strokeWeight: 1,
}); //创建多边形 }); //创建多边形
map.addOverlay(polygon); //增加多边形 map.addOverlay(polygon); //增加多边形
} }
@ -112,67 +116,176 @@ export default {
}); });
polygon.addEventListener("mouseout", function () { polygon.addEventListener("mouseout", function () {
map.removeOverlay(label); 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() { function showPoint() {
// console.log(MapPoint, 'MapPoint'); // console.log(MapPoint, 'MapPoint');
for (let i = 0; i < MapPoint.features.length; i++) { for (let i = 0; i < MapPoint.features.length; i++) {
var opts = { var opts = {
position: new BMap.Point(MapPoint.features[i].geometry.coordinates[0], MapPoint.features[i].geometry.coordinates[1]), // 指定文本标注所在的地理位置 position: new BMap.Point(
offset: new BMap.Size(-30, -30) // 设置文本偏移量 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({ label1.setStyle({
color: 'orange', color: "orange",
borderRadius: '5px', borderRadius: "5px",
borderColor: '#ccc', borderColor: "#ccc",
padding: '10px', padding: "10px",
fontSize: '16px', fontSize: "16px",
height: '20px', height: "20px",
lineHeight: '20px', lineHeight: "20px",
backgroundColor: 'rgba(0,0,0,0)', backgroundColor: "rgba(0,0,0,0)",
border: '0', border: "0",
fontFamily: '微软雅黑' fontFamily: "微软雅黑",
}); });
map.addOverlay(label1); map.addOverlay(label1);
} }
} }
function showPic() { function showPic() {
// console.log(that.WaringList, 'that.WaringList'); // 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)); var myIcon = new BMap.Icon(
myIcon.setImageUrl("/dongtai/awrni.png") "public/dongtai/awrni.png",
new BMap.Size(80, 80)
);
myIcon.setImageUrl("/dongtai/awrni.png");
// 创建Marker标注，使用小车图标 // 创建Marker标注，使用小车图标
var marker = new BMap.Marker(new BMap.Point(item.longitude, item.latitude), { var marker = new BMap.Marker(
icon: myIcon new BMap.Point(item.longitude, item.latitude),
}); {
// console.log(marker, 'marker'); icon: myIcon,
}
);
console.log(marker, "marker");
map.addOverlay(marker); map.addOverlay(marker);
marker.addEventListener("click", function () { marker.addEventListener("click", function () {
var label = new BMap.Label(); var label = new BMap.Label();
label.setStyle({ label.setStyle({
color: 'blue', color: "blue",
borderRadius: '5px', borderRadius: "5px",
borderColor: '#ccc', borderColor: "#ccc",
padding: '10px', padding: "10px",
fontSize: '16px', fontSize: "16px",
fontFamily: '微软雅黑', fontFamily: "微软雅黑",
transform: 'translateX(-50%) translateY(calc(-100% - 10px))' transform: "translateX(-50%) translateY(calc(-100% - 10px))",
}); });
// 点位点击弹窗
label.setPosition(new BMap.Point(item.longitude, item.latitude)); label.setPosition(new BMap.Point(item.longitude, item.latitude));
label.setOffset(new BMap.Size(130, -10)) 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.setStyle({
width: "340px",
height: "238px",
background: "url(pbImg/气泡弹窗1.png) no-repeat",
backgroundSize: "100% 100%",
border: "0",
color: "#fff",
zIndex: 2000000000,
});
label.setContent(` 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='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);'> <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> </div>
`); `);
map.addOverlay(label); map.addOverlay(label);
let btn = document.querySelector('.zhuanchuzhiBtn') let btn = document.querySelector(".zhuanchuzhiBtn");
//console.log(btn, 'btn'); //console.log(btn, 'btn');
btn.addEventListener('click', () => { btn.addEventListener("click", () => {
//console.log(item, 'item'); //console.log(item, 'item');
that.$emit('zhuanchuzhi', item) that.$emit("zhuanchuzhi", item);
}) });
let closebtn = document.querySelector('.closeBtn') let closebtn = document.querySelector(".closeBtn");
//console.log(btn, 'btn'); //console.log(btn, 'btn');
closebtn.addEventListener('click', () => { closebtn.addEventListener("click", () => {
map.removeOverlay(label); map.removeOverlay(label);
}) });
// label.addEventListener('mouseout', function () { // label.addEventListener('mouseout', function () {
// map.removeOverlay(label); // map.removeOverlay(label);
// }) // })
}); });
}) });
//that.flexPoint() //that.flexPoint()
} }
}, },
flexPoint() { flexPoint() {
var pointAll = document.querySelectorAll('.BMap_Marker.BMap_noprint') var pointAll = document.querySelectorAll(".BMap_Marker.BMap_noprint");
console.log(pointAll, 'pointAll'); console.log(pointAll, "pointAll");
},
},
} };
}
}
</script> </script>
<style scoped lang="less"> <style scoped lang="less">
@ -226,13 +337,11 @@ font-weight: 400;'>转处置</div>
width: 100%; width: 100%;
height: 100%; height: 100%;
border: 1px solid #000000; border: 1px solid #000000;
} }
/deep/ .BMap_Marker { /deep/ .BMap_Marker {
z-index: 1000; 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; background-size: 100% 100% !important;
} }
@ -247,6 +356,5 @@ font-weight: 400;'>转处置</div>
justify-content: center; justify-content: center;
align-items: center; align-items: center;
z-index: 50; z-index: 50;
} }
</style> </style>
Write Preview
Loading…
Cancel
Save