Skip to content

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

地图隐患标注加气泡

parent 41860244
Show whitespace changes
Inline Side-by-side
Showing with 288 additions and 46 deletions
dcit-hcsystem-hcsystem-master/src/views/Enterprises/EnterprisesInformation.vue
View file @ cb7c1435
<template> <template>
<el-table <div class="EnseList">
:data="tableData" <el-row class="topBar">
border <el-col>
stripe <el-form :inline="true" :model="searchData">
show-summary <el-form-item>
style="width: 100%"> <el-input v-model="searchData.unitName" placeholder="请输入企业名称"></el-input>
<el-table-column </el-form-item>
prop="qiye" <el-form-item>
label="企业名称" <el-button type="primary" @click="searchFun()">
width="180"> <i class="el-icon-search"></i> 搜索
</el-table-column> </el-button>
<el-table-column <el-button type="primary" @click="resetFun()">
prop="date" <i class="el-icon-refresh"></i> 重置
label="危险源" </el-button>
width="180"> </el-form-item>
</el-table-column> </el-form>
<el-table-column </el-col>
prop="name" </el-row>
label="监控设备" <el-table :data="tableData.pageData" stripe show-summary border style="width:100%;" :loading="loading">
width="180"> <el-table-column prop="unitName" label="企业名称"></el-table-column>
</el-table-column> <el-table-column prop="unitName" label="危险源"></el-table-column>
<el-table-column <el-table-column prop="legalPerson" label="设备监控"></el-table-column>
prop="address" <el-table-column prop="orgCode" label="职业危害场所"></el-table-column>
label="职业危害场所"> <el-table-column prop="legalPersonEmail" label="隐患数量""></el-table-column>
</el-table-column>
<el-table-column
prop="yinhuan"
label="隐患数量">
</el-table-column>
</el-table> </el-table>
<el-pagination
background
layout="total,sizes, prev, pager, next, jumper"
:total="tableData.total"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="PAGE.page"
:page-size="PAGE.size"
></el-pagination>
<EnterprisesMgEdit
v-if="dialogVisible"
:dialogVisible="dialogVisible"
:editFormA="formData"
@dialogFun="closeDialog"
@refreshTableData="getTableData"
:key="zjKey"
></EnterprisesMgEdit>
</div>
</template> </template>
<script lang="ts">
import { Component, Vue, Provide } from "vue-property-decorator";
import EnterprisesMgEdit from "./EnterprisesMgEdit.vue";
import City from "@/components/city.vue";
import METHOD from "@/utils/methods";
@Component({
components: { EnterprisesMgEdit, City }
})
export default class EnterprisesMg extends Vue {
@Provide() tableData: Object = { pageData: [], total: 0 };
@Provide() PAGE: any = { page: 1, size: 10 };
@Provide() searchData: any = {};
@Provide() loading: Boolean = false;
@Provide() cityval: any = [];
//编辑组件
@Provide() dialogVisible: Boolean = false;
@Provide() formData: any = { dataType: "", enterpriseId: "" };
@Provide() zjKey: any = 0;
<script> getTableData() {
export default { let that = this;
data() { that.searchData.accountNotDel=true;
return { let param = Object.assign({}, that.PAGE, that.searchData);
tableData: [{ that.loading = true;
qiye: '奔腾', METHOD.axiosPost(
date: '6', that,
name: '3', `/enterpriseInfo/queryEnterpriseInfo`,
address: '5', param,
yinhuan: '9' function(res: any) {
}] that.loading = false;
} if (res.code == 0) {
}, that.tableData = res.data;
}
}
);
}
searchFun() {
this.PAGE = { page: 1, size: 10 };
this.getTableData();
}
resetFun() {
this.PAGE = { page: 1, size: 10 };
this.searchData = { unitName: "" };
this.getTableData();
this.cityval = [];
}
handleSizeChange(val: any) {
this.PAGE.size = val;
this.getTableData();
}
handleCurrentChange(val: any) {
this.PAGE.page = val;
this.getTableData();
}
closeDialog() {
//关闭窗口
this.dialogVisible = false;
this.formData = {};
}
selectChange(val: any) {
this.searchData.dataType = val;
this.getTableData();
}
verrifyFun(row: any) {
this.formData = Object.assign({}, row);
this.zjKey++;
this.dialogVisible = true;
}
setLock(row: any) {
let that = this;
that
.$confirm(`确定锁定企业 ${row.unitName} 吗?`, "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
})
.then(() => {
METHOD.axiosPost(
that,
`/enterpriseInfo/cancelEnterpriseInfoById/${row.enterpriseId}`,
{ remarks: "" },
function(res: any) {
if (res.code == 0) {
(that as any).$message({
type: "success",
message: "注销成功!"
});
that.getTableData();
}
}
);
});
}
/*选择城市*/
changeFun(v: any) {
this.searchData.provinceId = v[0];
this.searchData.cityId = v[1];
this.searchData.countyId = v[2];
}
resetPw(row: any) {
let that = this;
(that as any)
.$confirm("确定重置用户 "+ row.userName +" 的密码 为 66668888 吗?", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
})
.then(() => {
METHOD.axiosGet(that, `/user/resetUserPwd/${row.userId}`, function(
res: any
) {
if (res.code == 0) {
(that as any).$message({
type: "success",
message: "重置成功!"
});
}
});
});
}
created() {
this.getTableData();
}
} }
</script> </script>
<style lang="scss" >
@import "@/utils/public.scss";
@media screen and (max-width: 1350px) {
main > div .el-table {
height: calc(100% - 150px);
}
}
.el-dialog__body{
padding: 10px 20px !important;
color: #606266;
font-size: 14px;
word-break: break-all;
}
</style>
\ No newline at end of file
dcit-hcsystem-hcsystem-master/src/views/qyMap/qyMap.vue
View file @ cb7c1435
...@@ -72,9 +72,9 @@ ...@@ -72,9 +72,9 @@
</div> </div>
<div class="markbox-div"> <div class="markbox-div">
<el-tooltip content="隐患" placement="left" effect="light"> <el-tooltip content="隐患" placement="left" effect="light">
<div ref="yhimg" style="position: relative;"> <div @click="yinhuan" ref="yhimg" style="position: relative;">
<img width="20px" style="margin-top: 10px;" src="@/assets/mark/yinhuan.png" /> <img width="20px" style="margin-top: 10px;" src="@/assets/mark/yinhuan.png" />
<!-- <img src="@/assets/mark/selected.png" alt="" style="position: absolute;width: 16px; top: 0;right: 0"> --> <img src="@/assets/mark/selected.png" alt="" style="position: absolute;width: 16px; top: 0;right: 0">
</div> </div>
</el-tooltip> </el-tooltip>
...@@ -143,6 +143,7 @@ export default class GIS extends Vue { ...@@ -143,6 +143,7 @@ export default class GIS extends Vue {
@Provide() markers: any = []; @Provide() markers: any = [];
@Provide() markers1: any = []; @Provide() markers1: any = [];
@Provide() markers2: any = []; @Provide() markers2: any = [];
@Provide() markers3: any = [];
@Provide() mapData: any = []; @Provide() mapData: any = [];
@Provide() windowsArr: any = []; @Provide() windowsArr: any = [];
@Provide() windowsArr1: any = []; @Provide() windowsArr1: any = [];
...@@ -264,7 +265,8 @@ export default class GIS extends Vue { ...@@ -264,7 +265,8 @@ export default class GIS extends Vue {
`<p><span>联系人:</span>${goods.contacts}</p>` + `<p><span>联系人:</span>${goods.contacts}</p>` +
`<p><span>联系电话:</span>${goods.phone}</p>` + `<p><span>联系电话:</span>${goods.phone}</p>` +
`<p><span>危险等级:</span>${goods.dangerGrade}</p>` + `<p><span>危险等级:</span>${goods.dangerGrade}</p>` +
`</div>`; `</div>` +
`<p class="gengxin"><button>更新</button></p>`;
that.Mutil.addPopup(html, goods.id, goods.longitude, goods.latitude) that.Mutil.addPopup(html, goods.id, goods.longitude, goods.latitude)
} }
...@@ -289,6 +291,30 @@ export default class GIS extends Vue { ...@@ -289,6 +291,30 @@ export default class GIS extends Vue {
} }
} }
); );
}
getyinhuanWindowInfo(troubleId: string) {
let that = this;
this.closeVideo();
METHOD.axiosGet(
that,
`/hiddenTrouble/getMapHiddenTroubleById/${troubleId}`,
function (res: any) {
if (res.code == 0) {
let trouble = res.data,
html =
`<div class="windowDg"><h3>隐患</h3>` +
`<p><span>隐患名称:</span>${trouble.troubleName}</p >` +
`<p><span>隐患类型:</span>${trouble.troubleType}</p >` +
`<p><span>隐患等级:</span>${trouble.troubleLevel}</p >` +
`<p><span>地址:</span>${trouble.address}</p >` +
`<p><button onclick="updateTrouble">修改</button></p >` +
`</div>` +
`<p class="gengxin"><button>更新</button></p>`;
that.Mutil.addPopup(html, trouble.id, trouble.longitude, trouble.latitude)
}
}
);
} }
//关闭视频方法 //关闭视频方法
closeVideo(){ closeVideo(){
...@@ -401,6 +427,40 @@ export default class GIS extends Vue { ...@@ -401,6 +427,40 @@ export default class GIS extends Vue {
obj.id obj.id
); );
} }
yhaddMark(obj: any, index: any) {
let icon,
that = this;
icon = require("@/assets/mark/yinhuan.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.windowsArr2.forEach((ele: any) => {
ele.visible = false;
});
that.$nextTick(() => {
that.currentWindow = that.windowsArr2[index];
that.currentWindow.visible = true;
});
},
},
visible: true,
};
that.Mutil.addMarkerToMap(
'yh',
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) => {
...@@ -424,6 +484,13 @@ export default class GIS extends Vue { ...@@ -424,6 +484,13 @@ export default class GIS extends Vue {
that.markers2[index].visible = false; that.markers2[index].visible = false;
} }
}); });
that.yhmapData.forEach((ele: any, index: any) => {
if (ele.dataType == v || v == 0) {
that.markers3[index].visible = true;
} else {
that.markers3[index].visible = false;
}
});
} }
/* 搜索 */ /* 搜索 */
...@@ -459,6 +526,10 @@ export default class GIS extends Vue { ...@@ -459,6 +526,10 @@ export default class GIS extends Vue {
let that = this; let that = this;
that.getshipinWindowInfo(shipinid); that.getshipinWindowInfo(shipinid);
} }
getyinhuanPopcon(yinhuanid: any) {
let that = this;
that.getyinhuanWindowInfo(yinhuanid);
}
created() { created() {
this.getMapData(); this.getMapData();
} }
...@@ -484,6 +555,10 @@ export default class GIS extends Vue { ...@@ -484,6 +555,10 @@ 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.getshipinPopcon(id); if (id) that.getshipinPopcon(id);
}else if(evt.selected[0].get('type')==='yh'){//其他类的气泡
that.Mutil.closeAllOverlays();
let id = evt.selected[0].get('did');
if (id) that.getyinhuanPopcon(id);
} }
...@@ -530,6 +605,17 @@ export default class GIS extends Vue { ...@@ -530,6 +605,17 @@ export default class GIS extends Vue {
this.shipinVisble=true; this.shipinVisble=true;
this.$refs.shipinimg.lastChild.style.display = "block"; this.$refs.shipinimg.lastChild.style.display = "block";
} }
}
yinhuan(){
if(this.yinhuanVisble){
this.Mutil.visibleMarks(false,"yh");
this.yinhuanVisble=false;
this.$refs.yhimg.lastChild.style.display = "none";
}else{
this.Mutil.visibleMarks(true,"yh");
this.yinhuanVisble=true;
this.$refs.yhimg.lastChild.style.display = "block";
}
} }
getStatiData() { getStatiData() {
let that = this; let that = this;
...@@ -589,6 +675,23 @@ export default class GIS extends Vue { ...@@ -589,6 +675,23 @@ export default class GIS extends Vue {
that.Mutil.setViewF({ that.Mutil.setViewF({
center: center center: center
}) })
}
if (res.code == 0 && res.data.goodsList.length > 0) {
that.yhmapData = res.data.goodsList;
let yhlatSum = 0;
let yhlngSum = 0;
that.yhmapData.forEach((ele: any, index: any) => {
that.yhaddMark(ele, index);
yhlngSum += ele.longitude;
yhlatSum += ele.latitude;
});
let center = [
yhlngSum / that.yhmapData.length,
yhlatSum / that.yhmapData.length,
];
that.Mutil.setViewF({
center: center
})
} }
} }
} }
...@@ -606,6 +709,9 @@ export default class GIS extends Vue { ...@@ -606,6 +709,9 @@ export default class GIS extends Vue {
z-index: 10; z-index: 10;
position:absolute; position:absolute;
} }
.gengxin{
text-align: center;
}
.map-botton:nth-child(1){ .map-botton:nth-child(1){
left:50px; left:50px;
} }
......
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