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