Skip to content

W
whp-xl
Commit d5eb15a4 authored by yaqizhang's avatar yaqizhang
Browse files
Options

大屏点击标注

parent 6884732b
Show whitespace changes
Inline Side-by-side
Showing with 259 additions and 36 deletions
dcit-hcsystem-hcsystem-master/src/views/qyMap/qyMap.vue
View file @ d5eb15a4
...@@ -65,32 +65,62 @@ ...@@ -65,32 +65,62 @@
<div class="markBox"> <div class="markBox">
<el-tooltip :disabled="disabled" content="企业注册" placement="left" effect="light"> <div style="float: left;background-color: aquamarine;text-align: center;">
<el-tooltip :disabled="disabled" content="企业注册" placement="left" effect="light" style="margin-left: 25%;">
<div @click="mapqiye"> <div @click="mapqiye">
<img width="15px" src="@/assets/mark/markqy.png" /> <img width="15px" src="@/assets/mark/markqy.png" />
</div> </div>
</el-tooltip> </el-tooltip>
</div>
<div style="float: right;text-align: center;line-height: ;">
<span>{{tjNumberObj.enterpriseRegNum}}</span>
</div>
<div style="float: left;text-align: center;">
<el-tooltip :disabled="disabled" content="危险源" placement="left" effect="light"> <el-tooltip :disabled="disabled" content="危险源" placement="left" effect="light">
<div @click="mapwxy"> <div @click="mapwxy">
<img width="20px" src="@/assets/mark/weixianyuan.png" /> <img width="20px" src="@/assets/mark/weixianyuan.png" />
</div> </div>
</el-tooltip> </el-tooltip>
</div>
<div style="float: right;">
<span>{{tjNumberObj.dangerNum}}</span>
</div>
<div style="float: left;">
<el-tooltip :disabled="disabled" content="监控监测点" placement="left" effect="light"> <el-tooltip :disabled="disabled" content="监控监测点" placement="left" effect="light">
<div @click="mapshipin"> <div @click="mapshipin">
<img width="20px" src="@/assets/mark/jiankong.png" /> <img width="20px" src="@/assets/mark/jiankong.png" />
</div> </div>
</el-tooltip> </el-tooltip>
</div>
<div style="float: right;">
<span>{{tjNumberObj.cameraNum}}</span>
</div>
<div style="float: left;">
<el-tooltip :disabled="disabled" content="职业危害场所" placement="left" effect="light"> <el-tooltip :disabled="disabled" content="职业危害场所" placement="left" effect="light">
<div> <div>
<img width="20px" src="@/assets/mark/weihaichangsuo.png" /> <img width="20px" src="@/assets/mark/weihaichangsuo.png" />
</div> </div>
</el-tooltip> </el-tooltip>
</div>
<div style="float: right;">
<span>2</span>
</div>
<div style="float: left;">
<el-tooltip :disabled="disabled" content="隐患" placement="left" effect="light"> <el-tooltip :disabled="disabled" content="隐患" placement="left" effect="light">
<div> <div>
<img width="20px" src="@/assets/mark/yinhuan.png" /> <img width="20px" src="@/assets/mark/yinhuan.png" />
</div> </div>
</el-tooltip> </el-tooltip>
</div> </div>
<div style="float: right;">
<span>2</span>
</div>
</div>
<!-- <div id="pieReport" style="width: 480px;height: 200px;background-color: rgba(2, 20, 44, 0.5);margin-top: 30px;margin-left: 10px;"></div> <!-- <div id="pieReport" style="width: 480px;height: 200px;background-color: rgba(2, 20, 44, 0.5);margin-top: 30px;margin-left: 10px;"></div>
...@@ -173,6 +203,8 @@ export default class GIS extends Vue { ...@@ -173,6 +203,8 @@ export default class GIS extends Vue {
@Provide() toolVisble: boolean = false; @Provide() toolVisble: boolean = false;
@Provide() tjNumberObj: any = {}; @Provide() tjNumberObj: any = {};
@Provide() qiyeVisble: boolean = true; @Provide() qiyeVisble: boolean = true;
@Provide() wxyVisble: boolean = true;
@Provide() shipinVisble: boolean = true;
getMapData() { getMapData() {
let that = this; let that = this;
...@@ -249,6 +281,63 @@ export default class GIS extends Vue { ...@@ -249,6 +281,63 @@ export default class GIS extends Vue {
} }
); );
} }
getWxyWindowInfo(goodsId: string) {
let that = this;
// (window as any).checkDetail = function (param: string) {
// that.$router.push({
// path: "/EnDetail",
// query: {
// enterpriseId: param
// }
// });
// };
METHOD.axiosGet(
that,
`/enterpriseGoods/getMapEnterpriseGoodsById/${goodsId}`,
function (res: any) {
if (res.code == 0) {
let goods = res.data,
html =
`<div class="windowDg"><h3>危险源</h3>` +
`<p><span>名称:</span>${goods.goodsName}</p>` +
`<p><span>物品类型:</span>${goods.category}</p>` +
`<p><span>联系人:</span>${goods.contacts}</p>` +
`<p><span>联系电话:</span>${goods.phone}</p>` +
`<p><span>危险等级:</span>${goods.dangerGrade}</p>` +
`</div>`;
that.Mutil.addPopup(html, goods.id, goods.longitude, goods.latitude)
}
}
);
}
getshipinWindowInfo(deviceId: string) {
let that = this;
// (window as any).checkDetail = function (param: string) {
// that.$router.push({
// path: "/EnDetail",
// query: {
// enterpriseId: param
// }
// });
// };
METHOD.axiosGet(
that,
`/safetyDeviceInfo/getSafetyDeviceInfoById/${deviceId}`,
function (res: any) {
if (res.code == 0) {
let device = res.data,
html = `<div class="windowDg"><h3>${device.deviceName}</h3>` + `<div id="playerWindow" class="playerWindow"></div>` + `</div>`;
that.Mutil.addPopup(html, device.id, device.longitude, device.latitude)
alert(2)
var player = new WasmPlayer(null, "playerWindow", null, {Height: true});
player.play('http://27.128.189.137:18000/flv/hls/stream_88_0.flv' , 1);
console.log(device,"de-----")
}
}
);
}
addMark(obj: any, index: any) { addMark(obj: any, index: any) {
let icon, let icon,
that = this; that = this;
...@@ -283,6 +372,74 @@ export default class GIS extends Vue { ...@@ -283,6 +372,74 @@ export default class GIS extends Vue {
obj.enterpriseId obj.enterpriseId
); );
} }
wxyaddMark(obj: any, index: any) {
let icon,
that = this;
icon = require("@/assets/mark/weixianyuan.png");
let option = {
position: [Number(obj.longitude), Number(obj.latitude)],
content: ` <img src="${icon}" width="50">`,
label: {
content: obj.unitName,
offset: [28, -7]
},
offset: [-13, -2],
events: {
click: (e: any) => {
that.windowsArr.forEach((ele: any) => {
ele.visible = false;
});
that.$nextTick(() => {
that.currentWindow = that.windowsArr[index];
that.currentWindow.visible = true;
});
},
},
visible: true,
};
that.Mutil.addMarkerToMap(
'wxy',
obj.goodsName,
icon,
[obj.longitude, obj.latitude],
0.6,
obj.id
);
}
shipinaddMark(obj: any, index: any) {
let icon,
that = this;
icon = require("@/assets/mark/jiankong.png");
let option = {
position: [Number(obj.longitude), Number(obj.latitude)],
content: ` <img src="${icon}" width="50">`,
label: {
content: obj.unitName,
offset: [28, -7]
},
offset: [-13, -2],
events: {
click: (e: any) => {
that.windowsArr.forEach((ele: any) => {
ele.visible = false;
});
that.$nextTick(() => {
that.currentWindow = that.windowsArr[index];
that.currentWindow.visible = true;
});
},
},
visible: true,
};
that.Mutil.addMarkerToMap(
'shipin',
obj.deviceName,
icon,
[obj.longitude, obj.latitude],
0.6,
obj.id
);
}
change(v: any) { change(v: any) {
let that = this; let that = this;
that.mapData.forEach((ele: any, index: any) => { that.mapData.forEach((ele: any, index: any) => {
...@@ -318,9 +475,16 @@ export default class GIS extends Vue { ...@@ -318,9 +475,16 @@ export default class GIS extends Vue {
let that = this; let that = this;
that.getWindowInfo(qyid); that.getWindowInfo(qyid);
} }
getWxyPopcon(wxyid: any) {
let that = this;
that.getWxyWindowInfo(wxyid);
}
getshipinPopcon(shipinid: any) {
let that = this;
that.getshipinWindowInfo(shipinid);
}
created() { created() {
this.getMapData(); this.getMapData();
} }
mounted() { mounted() {
let that = this; let that = this;
...@@ -333,8 +497,14 @@ export default class GIS extends Vue { ...@@ -333,8 +497,14 @@ export default class GIS extends Vue {
that.Mutil.closeAllOverlays(); that.Mutil.closeAllOverlays();
let id = evt.selected[0].get('did'); let id = evt.selected[0].get('did');
if (id) that.getPopcon(id); if (id) that.getPopcon(id);
}else{//其他类的气泡 }else if(evt.selected[0].get('type')==='wxy'){//其他类的气泡
that.Mutil.closeAllOverlays();
let id = evt.selected[0].get('did');
if (id) that.getWxyPopcon(id);
}else if(evt.selected[0].get('type')==='shipin'){//其他类的气泡
that.Mutil.closeAllOverlays();
let id = evt.selected[0].get('did');
if (id) that.getshipinPopcon(id);
} }
...@@ -357,10 +527,22 @@ export default class GIS extends Vue { ...@@ -357,10 +527,22 @@ export default class GIS extends Vue {
that.Mutil.closeAllOverlays(); that.Mutil.closeAllOverlays();
} }
mapwxy(){ mapwxy(){
alert("qiye22222") if(this.wxyVisble){
this.Mutil.visibleMarks(false,"wxy");
this.wxyVisble=false;
}else{
this.Mutil.visibleMarks(true,"wxy");
this.wxyVisble=true;
}
} }
mapshipin(){ mapshipin(){
alert("qiye33333") if(this.shipinVisble){
this.Mutil.visibleMarks(false,"shipin");
this.shipinVisble=false;
}else{
this.Mutil.visibleMarks(true,"shipin");
this.shipinVisble=true;
}
} }
getStatiData() { getStatiData() {
let that = this; let that = this;
...@@ -382,9 +564,46 @@ export default class GIS extends Vue { ...@@ -382,9 +564,46 @@ export default class GIS extends Vue {
value: Number(obj.handleAlarmNum), value: Number(obj.handleAlarmNum),
}); });
// that.$nextTick(() => { // that.$nextTick(() => {
// that.$set(that.config, "data", arr); // that.$set(that.config, "data", arr);
// }); // });
if (res.code == 0 && res.data.goodsList.length > 0) {
that.mapData = res.data.goodsList;
let latSum = 0;
let lngSum = 0;
that.mapData.forEach((ele: any, index: any) => {
that.wxyaddMark(ele, index);
lngSum += ele.longitude;
latSum += ele.latitude;
});
let center = [
lngSum / that.mapData.length,
latSum / that.mapData.length,
];
that.Mutil.setViewF({
center: center
})
}
if (res.code == 0 && res.data.cameraList.length > 0) {
let shipinmapData = res.data.cameraList;
console.log(shipinmapData,"shipin")
let shipinlatSum = 0;
let shipinlngSum = 0;
shipinmapData.forEach((ele: any, index: any) => {
that.shipinaddMark(ele, index);
shipinlngSum += ele.longitude;
shipinlatSum += ele.latitude;
});
let shipincenter = [
shipinlngSum / this.shipinmapData.length,
shipinlatSum / this.shipinmapData.length,
];
that.Mutil.setViewF({
center: shipincenter
})
}
} }
} }
); );
...@@ -463,7 +682,7 @@ export default class GIS extends Vue { ...@@ -463,7 +682,7 @@ export default class GIS extends Vue {
.markBox { .markBox {
z-index: 30; z-index: 30;
width:50px; width:150px;
height:250px; height:250px;
background-color: rgba(2, 40, 90, 0.5); background-color: rgba(2, 40, 90, 0.5);
position: fixed; position: fixed;
...@@ -471,10 +690,14 @@ export default class GIS extends Vue { ...@@ -471,10 +690,14 @@ export default class GIS extends Vue {
right: 20px; right: 20px;
} }
.markBox div{ .markBox div{
width: 100%; width: 50%;
height: 50px; height: 50px;
text-align: center; text-align: center;
/* background: url(@/assets/mark/markqy.png) right top no-repeat !important; */ /* background: url(selected.png) right top no-repeat !important; */
background-size: 16px !important;
}
.markBox span{
float: right;
} }
.markBox div img{ .markBox div img{
width: 25px; width: 25px;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment