Skip to content

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

隐患危险源修改按钮

parent 8fdf29f9
Hide whitespace changes
Inline Side-by-side
Showing with 811 additions and 777 deletions
dcit-hcsystem-hcsystem-master/src/views/Enterprises/EnterprisesInformation.vue
View file @ 7b5403d1
......@@ -17,11 +17,12 @@
</el-form>
</el-col>
</el-row>
<el-table :data="tableData.pageData" stripe show-summary :summary-method="getTotal" border style="width:100%;" :loading="loading">
<el-table :data="tableData.pageData" stripe show-summary border style="width:100%;" :loading="loading">
<el-table-column prop="unitName" label="企业名称"></el-table-column>
<el-table-column prop="dangerNum" label="危险源数量"></el-table-column>
<el-table-column prop="cameraNum" label="设备监控数量"></el-table-column>
<el-table-column prop="troubleNum" label="隐患数量"></el-table-column>
<el-table-column prop="unitName" label="危险源"></el-table-column>
<el-table-column prop="legalPerson" label="设备监控"></el-table-column>
<el-table-column prop="orgCode" label="职业危害场所"></el-table-column>
<el-table-column prop="legalPersonEmail" label="隐患数量""></el-table-column>
</el-table>
<el-pagination
background
......@@ -68,7 +69,7 @@
that.loading = true;
METHOD.axiosPost(
that,
`/dataStatistics/getDataStatistics`,
`/enterpriseInfo/queryEnterpriseInfo`,
param,
function(res: any) {
that.loading = false;
......@@ -78,52 +79,6 @@
}
);
}
getTotal(param: any) {
const { columns, data } = param;
const sums: any[] = [];
columns.forEach((column: any, index: any) => {
if (index === 0) {
sums[index] = '合计';
return;
}
const values = data.map((item: { [x: string]: any; }) => Number(item[column.property]));
if (column.property === 'dangerNum') {
sums[index] = values.reduce((prev: any, curr: any) => {
const value = Number(curr);
if (!isNaN(value)) {
return prev + curr;
} else {
return prev;
}
}, 0);
sums[index];
} else if (column.property === 'troubleNum') {
sums[index] = values.reduce((prev: any, curr: any) => {
const value = Number(curr);
if (!isNaN(value)) {
return prev + curr;
} else {
return prev;
}
}, 0);
sums[index];
} else if (column.property === 'cameraNum') {
sums[index] = values.reduce((prev: any, curr: any) => {
const value = Number(curr);
if (!isNaN(value)) {
return prev + curr;
} else {
return prev;
}
}, 0);
sums[index];
} else {
sums[index] = '--';
}
});
return sums;
}
searchFun() {
this.PAGE = { page: 1, size: 10 };
this.getTableData();
......
dcit-hcsystem-hcsystem-master/src/views/qyMap/qyMap.vue
View file @ 7b5403d1
<template>
<div class="gis">
<div id="mapbox" @click="mapbox">
<div class="gis">
<div id="mapbox">
<div style="position:absolute;left:500px;top:10px">
<button @click="Mutil.tianSlA()" class="map-botton">卫星地图</button>
<button @click="Mutil.tianSlB()" class="map-botton">全景地图</button>
</div>
<div v-show="isShowVideo" v-drag style="display: none;position:absolute;left:1000px;top:10px;z-index: 30;padding: 5px; background-color: rgba(2, 40, 90, 0.8);width: 400px;height: 255px;border-radius: 5px;border: 1px solid #000;">
<div style="width: 100%;height: 30px;">
<span style="float: left;color: #fff;font-size: 1rem;">{{deviceVideo.deviceName}}</span>
<span @click="closeVideo" style="float: right;margin-right: 10px;font-size: 1.5rem;color: #fff;"class="el-icon-close"></span>
</div>
<div id="div_video"></div>
<div v-show="isShowVideo" v-drag
style="display: none;position:absolute;left:1000px;top:10px;z-index: 30;padding: 5px; background-color: rgba(2, 40, 90, 0.8);width: 400px;height: 255px;border-radius: 5px;border: 1px solid #000;">
<div style="width: 100%;height: 30px;">
<span style="float: left;color: #fff;font-size: 1rem;">{{deviceVideo.deviceName}}</span>
<span @click="closeVideo" style="float: right;margin-right: 10px;font-size: 1.5rem;color: #fff;"
class="el-icon-close"></span>
</div>
<div id="div_video"></div>
</div>
</div>
<div style="">
<div style="width: 500px;height: 100%;z-index: 11;background-color: rgba(2, 40, 90, 0.7);position: absolute;top: 0;left: 10px;float: left;">
</div>
<div style="">
<div
style="width: 500px;height: 100%;z-index: 11;background-color: rgba(2, 40, 90, 0.7);position: absolute;top: 0;left: 10px;float: left;">
<QyMapone></QyMapone>
</div>
<div class="markBox">
<div class="markbox-div">
<el-tooltip content="企业注册" placement="left" effect="light">
<div class="markbox-click" ref="qyimg" @click="mapqiye" style="position: relative;">
<img width="15px" style="margin-top: 10px;" src="@/assets/mark/markqy.png" />
<img src="@/assets/mark/selected.png" alt="" style="position: absolute;width: 16px; top: 0;right: 0">
</div>
</el-tooltip>
</div>
<div class="markbox-span">
<span>{{tjNumberObj.enterpriseRegNum}}</span>
</div>
<div class="markbox-div">
<el-tooltip content="危险源" placement="left" effect="light">
<div @click="mapwxy" ref="wxyimg" style="position: relative;">
<img width="20px" style="margin-top: 10px;" src="@/assets/mark/weixianyuan.png" />
<img src="@/assets/mark/selected.png" alt="" style="position: absolute;width: 16px; top: 0;right: 0">
</div>
</el-tooltip>
<div class="markBox">
<div class="markbox-div">
<el-tooltip content="企业注册" placement="left" effect="light">
<div class="markbox-click" ref="qyimg" @click="mapqiye" style="position: relative;">
<img width="15px" style="margin-top: 10px;" src="@/assets/mark/markqy.png" />
<img src="@/assets/mark/selected.png" alt=""
style="position: absolute;width: 16px; top: 0;right: 0">
</div>
<div class="markbox-span">
<span>{{tjNumberObj.dangerNum}}</span>
</div>
<div class="markbox-div">
<el-tooltip content="监控监测点" placement="left" effect="light">
<div @click="mapshipin" ref="shipinimg" style="position: relative;">
<img width="20px" style="margin-top: 10px;" src="@/assets/mark/jiankong.png" />
<img src="@/assets/mark/selected.png" alt="" style="position: absolute;width: 16px; top: 0;right: 0">
</div>
</el-tooltip>
</div>
<div class="markbox-span">
<span>{{tjNumberObj.cameraNum}}</span>
</div>
<div class="markbox-div">
<el-tooltip content="职业危害场所" placement="left" effect="light">
<div ref="whimg" style="position: relative;">
<img width="20px" style="margin-top: 10px;" src="@/assets/mark/weihaichangsuo.png" />
<!-- <img src="@/assets/mark/selected.png" alt="" style="position: absolute;width: 16px; top: 0;right: 0"> -->
</div>
</el-tooltip>
</el-tooltip>
</div>
<div class="markbox-span">
<span>{{tjNumberObj.enterpriseRegNum}}</span>
</div>
<div class="markbox-div">
<el-tooltip content="危险源" placement="left" effect="light">
<div @click="mapwxy" ref="wxyimg" style="position: relative;">
<img width="20px" style="margin-top: 10px;" src="@/assets/mark/weixianyuan.png" />
<img src="@/assets/mark/selected.png" alt=""
style="position: absolute;width: 16px; top: 0;right: 0">
</div>
<div class="markbox-span">
<span>0</span>
</el-tooltip>
</div>
<div class="markbox-span">
<span>{{tjNumberObj.dangerNum}}</span>
</div>
<div class="markbox-div">
<el-tooltip content="监控监测点" placement="left" effect="light">
<div @click="mapshipin" ref="shipinimg" style="position: relative;">
<img width="20px" style="margin-top: 10px;" src="@/assets/mark/jiankong.png" />
<img src="@/assets/mark/selected.png" alt=""
style="position: absolute;width: 16px; top: 0;right: 0">
</div>
<div class="markbox-div">
<el-tooltip content="隐患" placement="left" effect="light">
<div @click="yinhuan" ref="yhimg" style="position: relative;">
<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">
</div>
</el-tooltip>
</el-tooltip>
</div>
<div class="markbox-span">
<span>{{tjNumberObj.cameraNum}}</span>
</div>
<div class="markbox-div">
<el-tooltip content="职业危害场所" placement="left" effect="light">
<div ref="whimg" style="position: relative;">
<img width="20px" style="margin-top: 10px;" src="@/assets/mark/weihaichangsuo.png" />
<!-- <img src="@/assets/mark/selected.png" alt="" style="position: absolute;width: 16px; top: 0;right: 0"> -->
</div>
<div class="markbox-span">
<span>{{tjNumberObj.troubleNum}}</span>
</el-tooltip>
</div>
<div class="markbox-span">
<span>0</span>
</div>
<div class="markbox-div">
<el-tooltip content="隐患" placement="left" effect="light">
<div @click="yinhuan" ref="yhimg" style="position: relative;">
<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">
</div>
</div>
</el-tooltip>
</div>
<div class="markbox-span">
<span>{{tjNumberObj.troubleNum}}</span>
</div>
</div>
</div>
<el-dialog title="危险源" :visible.sync="dialogVisible1">
<el-form ref="goods" :model="goods" label-width="100px" class="demo-ruleForm">
<el-form-item label="名称:" prop="goodsName">
<input type="text"></input>
</el-form-item>
<el-form-item label="物品类型:" prop="category">
<input type="text"></input>
</el-form-item>
<el-form-item label="联系人:" prop="contacts">
<input type="text"></input>
</el-form-item>
<el-form-item label="联系电话:" prop="phone">
<input type="text"></input>
</el-form-item>
<el-form-item label="危险等级:" prop="dangerGrade">
<input type="text"></input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogVisible1 = false">取 消</el-button>
<el-button type="primary" @click="dialogVisible1 = false">确 定</el-button>
</div>
</el-dialog>
<el-dialog title="隐患" :visible.sync="dialogVisible2">
<el-form ref="trouble" :model="trouble" label-width="100px" class="demo-ruleForm">
<el-form-item label="隐患名称:" prop="troubleName">
<input type="text"></input>
</el-form-item>
<el-form-item label="隐患类型:" prop="troubleType">
<input type="text"></input>
</el-form-item>
<el-form-item label="隐患等级:" prop="troubleLevel"">
<input type="text"></input>
</el-form-item>
<el-form-item label="地址:" prop="address">
<input type="text"></input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogVisible2 = false">取 消</el-button>
<el-button type="primary" @click="dialogVisible2 = false">确 定</el-button>
</div>
</el-dialog>
</div>
</div>
</template>
<script lang="ts">
import {
Component,
Vue,
Provide
} from "vue-property-decorator";
import METHOD from "@/utils/methods";
import "@/utils/directive.js";
import {
Icon
} from "element-ui";
import "@/utils/VamapLoad.ts";
import DrawTool from "@/components/drawTool.vue";
import Search from "@/components/search.vue";
import Mutil from "@/utils/mapUtil.js";
import METHOD from "@/utils/methods";
import QyMaptwo from './qyMaptwo.vue';
import QyMapone from './qyMapone.vue';
import vueDrag from 'vue-dragging'
Vue.use(vueDrag)
@Component({
components: {
DrawTool,
Search,
QyMapone,
QyMaptwo
},
})
export default class GIS extends Vue {
@Provide() Mutil: any;
@Provide() mapLoadDone = false;
@Provide() MAP: any;
@Provide() isShowVideo:boolean=false;
@Provide() player:any;
@Provide() mapOption = {
plugin: [{
import {
Component,
Vue,
Provide
} from "vue-property-decorator";
import METHOD from "@/utils/methods";
import "@/utils/directive.js";
import {
Icon
} from "element-ui";
import "@/utils/VamapLoad.ts";
import DrawTool from "@/components/drawTool.vue";
import Search from "@/components/search.vue";
import Mutil from "@/utils/mapUtil.js";
import METHOD from "@/utils/methods";
import QyMaptwo from './qyMaptwo.vue';
import QyMapone from './qyMapone.vue';
import vueDrag from 'vue-dragging'
import { Component, Vue, Provide, Prop, Watch } from "vue-property-decorator";
Vue.use(vueDrag)
@Component({
components: {
DrawTool,
Search,
QyMapone,
QyMaptwo
},
})
export default class GIS extends Vue {
@Provide() Mutil: any;
@Provide() mapLoadDone = false;
@Provide() MAP: any;
@Provide() isShowVideo: boolean = false;
@Provide() player: any;
@Provide() mapOption = {
plugin: [{
pName: "MapType",
defaultType: 1,
},
{
pName: "ToolBar",
},
],
center: [115, 28],
zoom: 10,
events: {},
};
@Provide() searchData: any = {
type: "0",
};
/* 地图 */
@Provide() markers: any = [];
@Provide() markers1: any = [];
@Provide() markers2: any = [];
@Provide() markers3: any = [];
@Provide() mapData: any = [];
@Provide() windowsArr: any = [];
@Provide() windowsArr1: any = [];
@Provide() windowsArr2: any = [];
@Provide() windowsArr3: any = [];
@Provide() currentWindow: any = "";
// @Provide() searchOption: any = {
// city: "石家庄",
// citylimit: true,
// };
@Provide() lastVideoPlayId:any="";
@Provide() markersB: any = [];
@Provide() toolobj: any;
@Provide() mouseTool: any; //测量工具
@Provide() toolVisble: boolean = false;
@Provide() tjNumberObj: any = {};
@Provide() deviceVideo: any = {};
@Provide() qiyeVisble: boolean = true;
@Provide() wxyVisble: boolean = true;
@Provide() shipinVisble: boolean = true;
@Provide() weihaiVisble: boolean = true;
@Provide() yinhuanVisble: boolean = true;
@Provide() treecheckedObj: any = {};
getMapData() {
let that = this;
METHOD.axiosPost(
that,
`/enterpriseInfo/queryEnterpriseInfo`, {
],
center: [115, 28],
zoom: 10,
events: {},
};
@Provide() searchData: any = {
type: "0",
};
/* 地图 */
@Provide() markers: any = [];
@Provide() markers1: any = [];
@Provide() markers2: any = [];
@Provide() markers3: any = [];
@Provide() mapData: any = [];
@Provide() windowsArr: any = [];
@Provide() windowsArr1: any = [];
@Provide() windowsArr2: any = [];
@Provide() windowsArr3: any = [];
@Provide() currentWindow: any = "";
// @Provide() searchOption: any = {
// city: "石家庄",
// citylimit: true,
// };
@Prop(Object) goods!: {
};
@Prop(Object) trouble!: {
};
@Provide() lastVideoPlayId: any = "";
@Provide() markersB: any = [];
@Provide() dialogVisible1: Boolean = false;
@Provide() dialogVisible2: Boolean = false;
@Provide() toolobj: any;
@Provide() mouseTool: any; //测量工具
@Provide() toolVisble: boolean = false;
@Provide() tjNumberObj: any = {};
@Provide() deviceVideo: any = {};
@Provide() qiyeVisble: boolean = true;
@Provide() wxyVisble: boolean = true;
@Provide() shipinVisble: boolean = true;
@Provide() weihaiVisble: boolean = true;
@Provide() yinhuanVisble: boolean = true;
@Provide() treecheckedObj: any = {};
getMapData() {
let that = this;
METHOD.axiosPost(
that,
`/enterpriseInfo/queryEnterpriseInfo`, {
page: 1,
size: 1000,
accountStatus: "0"
},
function (res: any) {
if (res.code == 0 && res.data.pageData.length > 0) {
that.mapData = res.data.pageData;
let latSum = 0;
let lngSum = 0;
that.mapData.forEach((ele: any, index: any) => {
that.addMark(ele, index);
lngSum += ele.longitude;
latSum += ele.latitude;
});
let center = [
lngSum / that.mapData.length,
latSum / that.mapData.length,
];
that.Mutil.setViewF({
center: center
})
}
}
);
}
getWindowInfo(enterpriseId: string) {
let that = this;
(window as any).checkDetail = function (param: string) {
that.$router.push({
path: "/EnDetail",
query: {
enterpriseId: param
function (res: any) {
if (res.code == 0 && res.data.pageData.length > 0) {
that.mapData = res.data.pageData;
let latSum = 0;
let lngSum = 0;
that.mapData.forEach((ele: any, index: any) => {
that.addMark(ele, index);
lngSum += ele.longitude;
latSum += ele.latitude;
});
let center = [
lngSum / that.mapData.length,
latSum / that.mapData.length,
];
that.Mutil.setViewF({
center: center
})
}
}
});
};
METHOD.axiosGet(
that,
`/enterpriseInfo/getMapEnterpriseInfoById/${enterpriseId}`,
function (res: any) {
if (res.code == 0) {
let obj = res.data.enterpriseInfo,
zdnum = res.data.bigDangerNum,
wxnum = res.data.dangerNum,
html =
`<div class="windowDg"><h3>企业详细信息</h3>` +
`<p><span>企业名称:</span>${obj.unitName}</p>` +
`<p><span>统一社会信用代码:</span>${obj.orgCode}</p>` +
`<p><span>企业法人:</span>${obj.legalPerson}</p>` +
`<p><span>注册地址:</span>${obj.regAddress}</p>` +
`<p><span>法人邮箱:</span>${obj.legalPersonEmail}</p>` +
`<p><span>经营地址:</span>${obj.runAddress}</p>` +
`<p><span>法人手机:</span>${obj.legalPersonPhone}</p>` +
`<p><span>管理员姓名:</span>${obj.userName}</p>` +
`<p><span>管理员手机:</span>${obj.mobliePhone}</p>` +
`<p><span>管理员邮箱:</span>${obj.email}</p>` +
`<div class="wxyWrap">` +
`<span class="itm">${wxnum[0].gradeName}<br><b>${wxnum[0].num}个</b></span>` +
`<span class="itm">${wxnum[1].gradeName}<br><b>${wxnum[1].num}个</b></span>` +
`<span class="itm">${wxnum[2].gradeName}<br><b>${wxnum[2].num}个</b></span>` +
`<span class="itm">${wxnum[3].gradeName}<br><b>${wxnum[3].num}个</b></span>` +
`<span class="itm">重大危险源<br>${zdnum}个</span>` +
`</div>` +
`<div class="cent margT10"><button class="el-button el-button--small" onclick="checkDetail('${obj.enterpriseId}')">查看企业详情</button></div>` +
`</div>`;
that.Mutil.addPopup(html, obj.enterpriseId, obj.longitude, obj.latitude)
);
}
getWindowInfo(enterpriseId: string) {
let that = this;
(window as any).checkDetail = function (param: string) {
that.$router.push({
path: "/EnDetail",
query: {
enterpriseId: param
}
});
};
METHOD.axiosGet(
that,
`/enterpriseInfo/getMapEnterpriseInfoById/${enterpriseId}`,
function (res: any) {
if (res.code == 0) {
let obj = res.data.enterpriseInfo,
zdnum = res.data.bigDangerNum,
wxnum = res.data.dangerNum,
html =
`<div class="windowDg"><h3>企业详细信息</h3>` +
`<p><span>企业名称:</span>${obj.unitName}</p>` +
`<p><span>统一社会信用代码:</span>${obj.orgCode}</p>` +
`<p><span>企业法人:</span>${obj.legalPerson}</p>` +
`<p><span>注册地址:</span>${obj.regAddress}</p>` +
`<p><span>法人邮箱:</span>${obj.legalPersonEmail}</p>` +
`<p><span>经营地址:</span>${obj.runAddress}</p>` +
`<p><span>法人手机:</span>${obj.legalPersonPhone}</p>` +
`<p><span>管理员姓名:</span>${obj.userName}</p>` +
`<p><span>管理员手机:</span>${obj.mobliePhone}</p>` +
`<p><span>管理员邮箱:</span>${obj.email}</p>` +
`<div class="wxyWrap">` +
`<span class="itm">${wxnum[0].gradeName}<br><b>${wxnum[0].num}个</b></span>` +
`<span class="itm">${wxnum[1].gradeName}<br><b>${wxnum[1].num}个</b></span>` +
`<span class="itm">${wxnum[2].gradeName}<br><b>${wxnum[2].num}个</b></span>` +
`<span class="itm">${wxnum[3].gradeName}<br><b>${wxnum[3].num}个</b></span>` +
`<span class="itm">重大危险源<br>${zdnum}个</span>` +
`</div>` +
`<div class="cent margT10"><button class="el-button el-button--small" onclick="checkDetail('${obj.enterpriseId}')">查看企业详情</button></div>` +
`</div>`;
that.Mutil.addPopup(html, obj.enterpriseId, obj.longitude, obj.latitude)
}
}
}
);
}
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>` +
`<p class="gengxin"><button>更新</button></p>`;
that.Mutil.addPopup(html, goods.id, goods.longitude, goods.latitude)
);
}
getWxyWindowInfo(goodsId: string) {
let that = this;
(window as any).dialogVisible1Change = function () {
that.dialogVisible1Change()
};
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>` +
`<p class="gengxin"><el-button onClick="dialogVisible1Change()" size="small">修改</el-button></p>`;
that.Mutil.addPopup(html, goods.id, goods.longitude, goods.latitude)
}
}
}
);
}
getshipinWindowInfo(deviceId: string) {
let that = this;
this.closeVideo();
METHOD.axiosGet(
that,
`/safetyDeviceInfo/getSafetyDeviceInfoById/${deviceId}`,
function (res: any) {
if (res.code == 0) {
that.treecheckedObj = res.data;
that.deviceVideo = res.data;
let device = res.data;
that.isShowVideo=true;
that.player.play('http://27.128.189.137:18000/flv/hls/' + that.treecheckedObj.deviceNumber + '.flv' , 1);
that.lastVideoPlayId=that.treecheckedObj.deviceNumber;//记录上次播放的视频ID
);
}
getshipinWindowInfo(deviceId: string) {
let that = this;
this.closeVideo();
METHOD.axiosGet(
that,
`/safetyDeviceInfo/getSafetyDeviceInfoById/${deviceId}`,
function (res: any) {
if (res.code == 0) {
that.treecheckedObj = res.data;
that.deviceVideo = res.data;
let device = res.data;
that.isShowVideo = true;
that.player.play('http://27.128.189.137:18000/flv/hls/' + that.treecheckedObj.deviceNumber + '.flv', 1);
that.lastVideoPlayId = that.treecheckedObj.deviceNumber;//记录上次播放的视频ID
}
}
}
);
}
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 >` +
`</div>` +
`<p class="gengxin"><button>更新</button></p>`;
that.Mutil.addPopup(html, trouble.id, trouble.longitude, trouble.latitude)
);
}
getyinhuanWindowInfo(troubleId: string) {
let that = this;
(window as any).dialogVisible2Change = function () {
that.dialogVisible2Change()
};
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 >` +
`</div>` +
`<p class="gengxin"><el-button onClick="dialogVisible2Change()" size="small">修改</el-button></p>`;
that.Mutil.addPopup(html, trouble.id, trouble.longitude, trouble.latitude)
}
}
);
}
//关闭视频方法
closeVideo() {
if (this.lastVideoPlayId != "") {
this.player.stop('http://27.128.189.137:18000/flv/hls/' + this.lastVideoPlayId + '.flv', 1);
}
);
}
//关闭视频方法
closeVideo(){
if(this.lastVideoPlayId!=""){
this.player.stop('http://27.128.189.137:18000/flv/hls/'+this.lastVideoPlayId+'.flv' , 1);
}
this.isShowVideo=false;
}
addMark(obj: any, index: any) {
let icon,
that = this;
icon = require("@/assets/mark/markqy.png");
let option = {
position: [Number(obj.longitude), Number(obj.latitude)],
content: ` <img src="${icon}" width="25">`,
label: {
content: obj.unitName,
offset: [28, -7]
},
offset: [-13, -2],
events: {
click: (e: any) => {
that.windowsArr.forEach((ele: any) => {
// console.log(ele,"ele")
ele.visible = false;
});
that.$nextTick(() => {
// console.log(ele,"ele")
that.currentWindow = that.windowsArr[index];
that.currentWindow.visible = true;
});
this.isShowVideo = false;
}
addMark(obj: any, index: any) {
let icon,
that = this;
icon = require("@/assets/mark/markqy.png");
let option = {
position: [Number(obj.longitude), Number(obj.latitude)],
content: ` <img src="${icon}" width="25">`,
label: {
content: obj.unitName,
offset: [28, -7]
},
},
visible: true,
};
that.Mutil.addMarkerToMap(
'qiye',
obj.unitName,
icon,
[obj.longitude, obj.latitude],
0.4,
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.windowsArr1.forEach((ele: any) => {
ele.visible = false;
});
that.$nextTick(() => {
that.currentWindow = that.windowsArr1[index];
that.currentWindow.visible = true;
});
offset: [-13, -2],
events: {
click: (e: any) => {
that.windowsArr.forEach((ele: any) => {
// console.log(ele,"ele")
ele.visible = false;
});
that.$nextTick(() => {
// console.log(ele,"ele")
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.windowsArr2.forEach((ele: any) => {
ele.visible = false;
});
that.$nextTick(() => {
that.currentWindow = that.windowsArr2[index];
that.currentWindow.visible = true;
});
visible: true,
};
that.Mutil.addMarkerToMap(
'qiye',
obj.unitName,
icon,
[obj.longitude, obj.latitude],
0.4,
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]
},
},
visible: true,
};
that.Mutil.addMarkerToMap(
'shipin',
obj.deviceName,
icon,
[obj.longitude, obj.latitude],
0.6,
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.windowsArr3.forEach((ele: any) => {
ele.visible = false;
});
that.$nextTick(() => {
that.currentWindow = that.windowsArr3[index];
that.currentWindow.visible = true;
});
offset: [-13, -2],
events: {
click: (e: any) => {
that.windowsArr1.forEach((ele: any) => {
ele.visible = false;
});
that.$nextTick(() => {
that.currentWindow = that.windowsArr1[index];
that.currentWindow.visible = true;
});
},
},
},
visible: true,
};
that.Mutil.addMarkerToMap(
'yh',
obj.troubleName,
icon,
[obj.longitude, obj.latitude],
0.6,
obj.id
);
}
change(v: any) {
let that = this;
that.mapData.forEach((ele: any, index: any) => {
if (ele.dataType == v || v == 0) {
that.markers[index].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.windowsArr2.forEach((ele: any) => {
ele.visible = false;
});
that.$nextTick(() => {
that.currentWindow = that.windowsArr2[index];
that.currentWindow.visible = true;
});
},
},
visible: true,
};
that.Mutil.addMarkerToMap(
'shipin',
obj.deviceName,
icon,
[obj.longitude, obj.latitude],
0.6,
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.windowsArr3.forEach((ele: any) => {
ele.visible = false;
});
that.$nextTick(() => {
that.currentWindow = that.windowsArr3[index];
that.currentWindow.visible = true;
});
},
},
visible: true,
};
that.Mutil.addMarkerToMap(
'yh',
obj.troubleName,
icon,
[obj.longitude, obj.latitude],
0.6,
obj.id
);
}
change(v: any) {
let that = this;
that.mapData.forEach((ele: any, index: any) => {
if (ele.dataType == v || v == 0) {
that.markers[index].visible = true;
} else {
that.markers[index].visible = false;
}
});
that.wxymapData.forEach((ele: any, index: any) => {
if (ele.dataType == v || v == 0) {
that.markers1[index].visible = true;
} else {
that.markers1[index].visible = false;
}
});
that.shipinmapData.forEach((ele: any, index: any) => {
if (ele.dataType == v || v == 0) {
that.markers2[index].visible = true;
} else {
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;
}
});
}
/* 搜索 */
onSearchResult(pois: any) {
let latSum = 0;
let lngSum = 0;
if (pois.length > 0) {
pois.forEach((poi: any) => {
let {
lng,
lat
} = poi;
lngSum += lng;
latSum += lat;
this.markersB.push([poi.lng, poi.lat]);
});
let center = {
lng: lngSum / pois.length,
lat: latSum / pois.length,
};
this.mapOption.center = [center.lng, center.lat];
}
}
getPopcon(qyid: any) {
let that = this;
that.getWindowInfo(qyid);
}
getWxyPopcon(wxyid: any) {
let that = this;
that.getWxyWindowInfo(wxyid);
}
getshipinPopcon(shipinid: any) {
let that = this;
that.getshipinWindowInfo(shipinid);
}
getyinhuanPopcon(yinhuanid: any) {
let that = this;
that.getyinhuanWindowInfo(yinhuanid);
}
created() {
this.getMapData();
}
dialogVisible1Change() {
this.dialogVisible1 = true;
}
dialogVisible2Change() {
this.dialogVisible2 = true;
}
mounted() {
let that = this;
that.player = new WasmPlayer(null, "div_video", null);
that.mapLoadDone = true;
that.Mutil = new Mutil("mapbox");
that.MAP = that.Mutil.MAP;
that.Mutil.mapSelectBind((evt: any) => {
//这是地图marker点击回调监听
if (evt.selected[0].get('type') === 'qiye') {
that.Mutil.closeAllOverlays();
let id = evt.selected[0].get('did');
if (id) that.getPopcon(id);
} 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);
} else if (evt.selected[0].get('type') === 'yh') {//其他类的气泡
that.Mutil.closeAllOverlays();
let id = evt.selected[0].get('did');
if (id) that.getyinhuanPopcon(id);
}
})
this.getStatiData();
this.Mutil.getBoundaries("新乐");
}
mapqiye() {
if (this.qiyeVisble) {
this.Mutil.visibleMarks(false, "qiye");
this.qiyeVisble = false;
this.$refs.qyimg.lastChild.style.display = "none";
} else {
that.markers[index].visible = false;
this.Mutil.visibleMarks(true, "qiye");
this.qiyeVisble = true;
this.$refs.qyimg.lastChild.style.display = "block";
}
});
that.wxymapData.forEach((ele: any, index: any) => {
if (ele.dataType == v || v == 0) {
that.markers1[index].visible = true;
}
// mapbox(){
// let that = this;
// that.Mutil.closeAllOverlays();
// }
mapwxy() {
if (this.wxyVisble) {
this.Mutil.visibleMarks(false, "wxy");
this.wxyVisble = false;
this.$refs.wxyimg.lastChild.style.display = "none";
} else {
that.markers1[index].visible = false;
this.Mutil.visibleMarks(true, "wxy");
this.wxyVisble = true;
this.$refs.wxyimg.lastChild.style.display = "block";
}
});
that.shipinmapData.forEach((ele: any, index: any) => {
if (ele.dataType == v || v == 0) {
that.markers2[index].visible = true;
}
mapshipin() {
if (this.shipinVisble) {
this.Mutil.visibleMarks(false, "shipin");
this.shipinVisble = false;
this.$refs.shipinimg.lastChild.style.display = "none";
} else {
that.markers2[index].visible = false;
this.Mutil.visibleMarks(true, "shipin");
this.shipinVisble = true;
this.$refs.shipinimg.lastChild.style.display = "block";
}
});
that.yhmapData.forEach((ele: any, index: any) => {
if (ele.dataType == v || v == 0) {
that.markers3[index].visible = true;
}
yinhuan() {
if (this.yinhuanVisble) {
this.Mutil.visibleMarks(false, "yh");
this.yinhuanVisble = false;
this.$refs.yhimg.lastChild.style.display = "none";
} else {
that.markers3[index].visible = false;
this.Mutil.visibleMarks(true, "yh");
this.yinhuanVisble = true;
this.$refs.yhimg.lastChild.style.display = "block";
}
});
}
/* 搜索 */
onSearchResult(pois: any) {
let latSum = 0;
let lngSum = 0;
if (pois.length > 0) {
pois.forEach((poi: any) => {
let {
lng,
lat
} = poi;
lngSum += lng;
latSum += lat;
this.markersB.push([poi.lng, poi.lat]);
});
let center = {
lng: lngSum / pois.length,
lat: latSum / pois.length,
};
this.mapOption.center = [center.lng, center.lat];
}
// editFun(row: any) {
// this.dialogTit = "编辑";
// this.formData = Object.assign({}, row);
// this.zjKey++;
// this.dialogVisible = true;
// }
getStatiData() {
let that = this;
METHOD.axiosPost(
that,
`/dataStatistics/managerDataStatistics`,
{ cityId: "", countyId: "", provinceId: "" },
function (res: any) {
if (res.code == 0) {
that.tjNumberObj = res.data;
console.log("that.tjNumberObj", that.tjNumberObj)
let obj = res.data,
arr: any = [];
arr.push({
name: "预警处理中",
value: Number(obj.alarmingNum),
});
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.wxymapData = res.data.goodsList;
let wxylatSum = 0;
let wxylngSum = 0;
that.wxymapData.forEach((ele: any, index: any) => {
that.wxyaddMark(ele, index);
wxylngSum += ele.longitude;
wxylatSum += ele.latitude;
});
let center = [
wxylngSum / that.wxymapData.length,
wxylatSum / that.wxymapData.length,
];
that.Mutil.setViewF({
center: center
})
}
if (res.code == 0 && res.data.cameraList.length > 0) {
that.shipinmapData = res.data.cameraList;
let shipinlatSum = 0;
let shipinlngSum = 0;
that.shipinmapData.forEach((ele: any, index: any) => {
that.shipinaddMark(ele, index);
shipinlngSum += ele.longitude;
shipinlatSum += ele.latitude;
});
let center = [
shipinlngSum / that.shipinmapData.length,
shipinlatSum / that.shipinmapData.length,
];
that.Mutil.setViewF({
center: center
})
}
if (res.code == 0 && res.data.troubleList.length > 0) {
that.yhmapData = res.data.troubleList;
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
})
}
}
}
);
}
}
getPopcon(qyid: any) {
let that = this;
that.getWindowInfo(qyid);
}
getWxyPopcon(wxyid: any) {
let that = this;
that.getWxyWindowInfo(wxyid);
}
getshipinPopcon(shipinid: any) {
let that = this;
that.getshipinWindowInfo(shipinid);
}
getyinhuanPopcon(yinhuanid: any) {
let that = this;
that.getyinhuanWindowInfo(yinhuanid);
}
created() {
this.getMapData();
}
mounted() {
let that = this;
that.player = new WasmPlayer(null, "div_video", null);
that.mapLoadDone = true;
that.Mutil = new Mutil("mapbox");
that.MAP = that.Mutil.MAP;
that.Mutil.mapSelectBind((evt: any) => {
//这是地图marker点击回调监听
if(evt.selected[0].get('type')==='qiye'){
that.Mutil.closeAllOverlays();
let id = evt.selected[0].get('did');
if (id) that.getPopcon(id);
}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);
}else if(evt.selected[0].get('type')==='yh'){//其他类的气泡
that.Mutil.closeAllOverlays();
let id = evt.selected[0].get('did');
if (id) that.getyinhuanPopcon(id);
}
})
this.getStatiData();
this.Mutil.getBoundaries("新乐");
</script>
<style lang="scss">
@import "@/utils/public.scss";
.map-botton {
width: 100px;
height: 50px;
outline: none;
z-index: 10;
position: absolute;
}
mapqiye(){
if(this.qiyeVisble){
this.Mutil.visibleMarks(false,"qiye");
this.qiyeVisble=false;
this.$refs.qyimg.lastChild.style.display = "none";
}else{
this.Mutil.visibleMarks(true,"qiye");
this.qiyeVisble=true;
this.$refs.qyimg.lastChild.style.display = "block";
}
.gengxin {
text-align: center;
color: #fff;
}
mapbox(){
let that = this;
that.Mutil.closeAllOverlays();
.map-botton:nth-child(1) {
left: 50px;
}
mapwxy(){
if(this.wxyVisble){
this.Mutil.visibleMarks(false,"wxy");
this.wxyVisble=false;
this.$refs.wxyimg.lastChild.style.display = "none";
}else{
this.Mutil.visibleMarks(true,"wxy");
this.wxyVisble=true;
this.$refs.wxyimg.lastChild.style.display = "block";
}
.map-botton:nth-child(2) {
left: 160px;
}
mapshipin(){
if(this.shipinVisble){
this.Mutil.visibleMarks(false,"shipin");
this.shipinVisble=false;
this.$refs.shipinimg.lastChild.style.display = "none";
}else{
this.Mutil.visibleMarks(true,"shipin");
this.shipinVisble=true;
this.$refs.shipinimg.lastChild.style.display = "block";
}
.map-botton:nth-child(3) {
left: 270px;
}
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";
}
#mapbox {
width: 100%;
height: 100%;
position: relative;
}
getStatiData() {
let that = this;
METHOD.axiosPost(
that,
`/dataStatistics/managerDataStatistics`,
{ cityId: "", countyId: "", provinceId: "" },
function (res: any) {
if (res.code == 0) {
that.tjNumberObj = res.data;
console.log("that.tjNumberObj",that.tjNumberObj)
let obj = res.data,
arr: any = [];
arr.push({
name: "预警处理中",
value: Number(obj.alarmingNum),
});
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.wxymapData = res.data.goodsList;
let wxylatSum = 0;
let wxylngSum = 0;
that.wxymapData.forEach((ele: any, index: any) => {
that.wxyaddMark(ele, index);
wxylngSum += ele.longitude;
wxylatSum += ele.latitude;
});
let center = [
wxylngSum / that.wxymapData.length,
wxylatSum / that.wxymapData.length,
];
that.Mutil.setViewF({
center: center
})
}
if (res.code == 0 && res.data.cameraList.length > 0) {
that.shipinmapData = res.data.cameraList;
let shipinlatSum = 0;
let shipinlngSum = 0;
that.shipinmapData.forEach((ele: any, index: any) => {
that.shipinaddMark(ele, index);
shipinlngSum += ele.longitude;
shipinlatSum += ele.latitude;
});
let center = [
shipinlngSum / that.shipinmapData.length,
shipinlatSum / that.shipinmapData.length,
];
that.Mutil.setViewF({
center: center
})
}
if (res.code == 0 && res.data.troubleList.length > 0) {
that.yhmapData = res.data.troubleList;
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
})
}
}
}
);
.gis {
position: relative;
overflow: hidden;
}
}
</script>
<style lang="scss">
@import "@/utils/public.scss";
.map-botton{
width: 100px;
height: 50px;
outline: none;
z-index: 10;
position:absolute;
}
.gengxin{
text-align: center;
}
.map-botton:nth-child(1){
left:50px;
}
.map-botton:nth-child(2){
left:160px;
}
.map-botton:nth-child(3){
left:270px;
}
#mapbox {
width: 100%;
height: 100%;
position: relative;
}
.gis {
position: relative;
overflow: hidden;
}
/* .div-isShowVideo{
/* .div-isShowVideo{
width: 200px;
height: 350px;
} */
/* .div-isShowVideo .divspan{
/* .div-isShowVideo .divspan{
width: 100%;
height: 20px;
} */
.markBox {
z-index: 30;
width:120px;
height:250px;
background-color: rgba(2, 40, 90, 0.5);
position: fixed;
bottom: 10px;
right: 20px;
}
.markBox .markbox-div{
float: left;
width: 50%;
height: 50px;
text-align: center;
/* background: url(selected.png) right top no-repeat !important;
.markBox {
z-index: 30;
width: 120px;
height: 250px;
background-color: rgba(2, 40, 90, 0.5);
position: fixed;
bottom: 10px;
right: 20px;
}
.markBox .markbox-div {
float: left;
width: 50%;
height: 50px;
text-align: center;
/* background: url(selected.png) right top no-repeat !important;
background-size: 16px !important; */
}
.markBox .markbox-span{
float: right;
width: 50%;
height: 50px;
text-align: center;
line-height: 50px;
font-size: 2rem;
font-family: 'UnidreamLED';
color: #fff;
}
.markBox div img{
width: 25px;
/* margin-top: 10px; */
}
.show-box {
position: absolute !important;
z-index: 9;
/* background: rgba(204, 204, 204, 0.7); */
top: 4px;
right: 10px;
}
.search-box {
position: absolute !important;
top: 14px;
left: 80px;
}
.ol-zoom {
top: .5em;
left: 500px !important;
}
</style>
}
.markBox .markbox-span {
float: right;
width: 50%;
height: 50px;
text-align: center;
line-height: 50px;
font-size: 2rem;
font-family: 'UnidreamLED';
color: #fff;
}
.markBox div img {
width: 25px;
/* margin-top: 10px; */
}
.show-box {
position: absolute !important;
z-index: 9;
/* background: rgba(204, 204, 204, 0.7); */
top: 4px;
right: 10px;
}
.search-box {
position: absolute !important;
top: 14px;
left: 80px;
}
.ol-zoom {
top: .5em;
left: 500px !important;
}
</style>
\ No newline at end of file
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