Skip to content

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

大屏点击标注

parent 6884732b
Hide 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,31 +65,61 @@
<div class="markBox">
<el-tooltip :disabled="disabled" content="企业注册" placement="left" effect="light">
<div @click="mapqiye">
<img width="15px" src="@/assets/mark/markqy.png" />
</div>
</el-tooltip>
<el-tooltip :disabled="disabled" content="危险源" placement="left" effect="light">
<div @click="mapwxy">
<img width="20px" src="@/assets/mark/weixianyuan.png" />
</div>
</el-tooltip>
<el-tooltip :disabled="disabled" content="监控监测点" placement="left" effect="light">
<div @click="mapshipin">
<img width="20px" src="@/assets/mark/jiankong.png" />
</div>
</el-tooltip>
<el-tooltip :disabled="disabled" content="职业危害场所" placement="left" effect="light">
<div>
<img width="20px" src="@/assets/mark/weihaichangsuo.png" />
</div>
</el-tooltip>
<el-tooltip :disabled="disabled" content="隐患" placement="left" effect="light">
<div>
<img width="20px" src="@/assets/mark/yinhuan.png" />
</div>
</el-tooltip>
<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">
<img width="15px" src="@/assets/mark/markqy.png" />
</div>
</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">
<div @click="mapwxy">
<img width="20px" src="@/assets/mark/weixianyuan.png" />
</div>
</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">
<div @click="mapshipin">
<img width="20px" src="@/assets/mark/jiankong.png" />
</div>
</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">
<div>
<img width="20px" src="@/assets/mark/weihaichangsuo.png" />
</div>
</el-tooltip>
</div>
<div style="float: right;">
<span>2</span>
</div>
<div style="float: left;">
<el-tooltip :disabled="disabled" content="隐患" placement="left" effect="light">
<div>
<img width="20px" src="@/assets/mark/yinhuan.png" />
</div>
</el-tooltip>
</div>
<div style="float: right;">
<span>2</span>
</div>
</div>
......@@ -173,6 +203,8 @@ export default class GIS extends Vue {
@Provide() toolVisble: boolean = false;
@Provide() tjNumberObj: any = {};
@Provide() qiyeVisble: boolean = true;
@Provide() wxyVisble: boolean = true;
@Provide() shipinVisble: boolean = true;
getMapData() {
let that = this;
......@@ -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) {
let icon,
that = this;
......@@ -283,6 +372,74 @@ export default class GIS extends Vue {
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) {
let that = this;
that.mapData.forEach((ele: any, index: any) => {
......@@ -318,9 +475,16 @@ export default class GIS extends Vue {
let that = this;
that.getWindowInfo(qyid);
}
getWxyPopcon(wxyid: any) {
let that = this;
that.getWxyWindowInfo(wxyid);
}
getshipinPopcon(shipinid: any) {
let that = this;
that.getshipinWindowInfo(shipinid);
}
created() {
this.getMapData();
}
mounted() {
let that = this;
......@@ -333,8 +497,14 @@ export default class GIS extends Vue {
that.Mutil.closeAllOverlays();
let id = evt.selected[0].get('did');
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 {
that.Mutil.closeAllOverlays();
}
mapwxy(){
alert("qiye22222")
if(this.wxyVisble){
this.Mutil.visibleMarks(false,"wxy");
this.wxyVisble=false;
}else{
this.Mutil.visibleMarks(true,"wxy");
this.wxyVisble=true;
}
}
mapshipin(){
alert("qiye33333")
if(this.shipinVisble){
this.Mutil.visibleMarks(false,"shipin");
this.shipinVisble=false;
}else{
this.Mutil.visibleMarks(true,"shipin");
this.shipinVisble=true;
}
}
getStatiData() {
let that = this;
......@@ -380,11 +562,48 @@ export default class GIS extends Vue {
arr.push({
name: "预警已处理",
value: Number(obj.handleAlarmNum),
});
});
// that.$nextTick(() => {
// 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 {
.markBox {
z-index: 30;
width:50px;
width:150px;
height:250px;
background-color: rgba(2, 40, 90, 0.5);
position: fixed;
......@@ -471,10 +690,14 @@ export default class GIS extends Vue {
right: 20px;
}
.markBox div{
width: 100%;
width: 50%;
height: 50px;
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{
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