Skip to content

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

大屏样式

parent 1c0ee201
Hide whitespace changes
Inline Side-by-side
Showing with 115 additions and 40 deletions
dcit-hcsystem-hcsystem-master/src/utils/mapUtil.js
View file @ d5999024
...@@ -143,7 +143,8 @@ export default class Mutil { ...@@ -143,7 +143,8 @@ export default class Mutil {
}); });
let iconFeatureArr = []; let iconFeatureArr = [];
feature.setStyle(style); feature.setStyle(style);
if (id) feature.set('did', id); if (id) {feature.set('did', id);
feature.set('type', type);}
iconFeatureArr.push(feature); iconFeatureArr.push(feature);
var vectorSource = new VectorSource({ var vectorSource = new VectorSource({
features: iconFeatureArr, features: iconFeatureArr,
...@@ -154,7 +155,10 @@ export default class Mutil { ...@@ -154,7 +155,10 @@ export default class Mutil {
vectorLayer.set('layClassName', type) vectorLayer.set('layClassName', type)
if (["1", "2", "3", "4", "5", "6"].indexOf(type) > -1) { if (["1", "2", "3", "4", "5", "6"].indexOf(type) > -1) {
vectorLayer.set('layClassMark', 'Maker'); vectorLayer.set('layClassMark', 'Maker');
if (id) vectorLayer.set('did', id); if (id){
vectorLayer.set('did', id);
feature.set('type', type);
}
} }
that.MAP.addLayer(vectorLayer) that.MAP.addLayer(vectorLayer)
...@@ -180,14 +184,23 @@ export default class Mutil { ...@@ -180,14 +184,23 @@ export default class Mutil {
} }
} }
//隐藏显示某类型标注 type：Boolean 是否显示 //隐藏显示某类型标注 type：Boolean 是否显示
visibleMarks(type, datatype) { visibleMarks(showtype, datatype) {
let that = this, layerarr = that.MAP.getLayers().getArray(), let that = this, layerarr = that.MAP.getLayers().getArray(),
formerLayer = layerarr.filter((e) => e.get("layClassName") == datatype); formerLayer = layerarr.filter((e) => e.get("layClassName") == datatype);
if (formerLayer) { if (formerLayer) {
formerLayer.forEach((ele) => { formerLayer.forEach((ele) => {
ele.setVisible(type) ele.setVisible(showtype)
}); });
} }
}
closeAllOverlays(){
let lays=this.MAP.getOverlays().getArray();
lays.forEach((ele)=>{
ele.setPosition(undefined)
})
} }
//增加标注弹窗 //增加标注弹窗
addPopup(popConHtml, id, longitude, latitude) { addPopup(popConHtml, id, longitude, latitude) {
...@@ -210,6 +223,7 @@ export default class Mutil { ...@@ -210,6 +223,7 @@ export default class Mutil {
}, },
}) })
that.MAP.addOverlay(overlay); that.MAP.addOverlay(overlay);
//点击X隐藏企业气泡
document.getElementById(`pop-close${id}`).onclick = function () { document.getElementById(`pop-close${id}`).onclick = function () {
overlay.setPosition(undefined) overlay.setPosition(undefined)
} }
......
dcit-hcsystem-hcsystem-master/src/views/qyMap/qyMap.vue
View file @ d5999024
<template> <template>
<div class="gis"> <div class="gis">
<div id="mapbox"> <div id="mapbox" @click="mapbox">
<!-- <Search :MAP="MAP" :Mutil="Mutil" v-if="mapLoadDone"></Search> --> <!-- <Search :MAP="MAP" :Mutil="Mutil" v-if="mapLoadDone"></Search> -->
<!-- <DrawTool :MAP="MAP" v-if="mapLoadDone"></DrawTool> --> <!-- <DrawTool :MAP="MAP" v-if="mapLoadDone"></DrawTool> -->
<!-- <div style="width:200px;height:250px;" class="show-box" > --> <!-- <div style="width:200px;height:250px;" class="show-box" > -->
...@@ -41,7 +41,9 @@ ...@@ -41,7 +41,9 @@
<!-- <div id="pieReport" style="width: 400px;height: 300px;background-color: rgba(2, 20, 44, 0.4)"></div> --> <!-- <div id="pieReport" style="width: 400px;height: 300px;background-color: rgba(2, 20, 44, 0.4)"></div> -->
</div> </div>
<!-- <div style="width: 500px;height: 100%;z-index: 12;background-color: rgba(2, 40, 90, 0.7);position: absolute;top: 0;right: 10px;float: right"> --> <!-- <div style="width: 500px;height: 100%;z-index: 12;background-color: rgba(2, 40, 90, 0.7);position: absolute;top: 0;right: 10px;float: right"> -->
<dv-border-box-10 class="show-box" :color="['#4980b5','#4980b5']" backgroundColor="rgba(255, 255, 255, 0.5)" style="width:220px;height:280px;" >
<!-- <dv-border-box-10 class="show-box" :color="['#4980b5','#4980b5']" backgroundColor="rgba(255, 255, 255, 0.5)" style="width:220px;height:280px;" >
<div class="markBox"> <div class="markBox">
<ul> <ul>
<div class="ul-div"><li><img width="15px" src="@/assets/mark/markqy.png" /> 注册企业 <span>{{tjNumberObj.enterpriseRegNum}}</span></li></div> <div class="ul-div"><li><img width="15px" src="@/assets/mark/markqy.png" /> 注册企业 <span>{{tjNumberObj.enterpriseRegNum}}</span></li></div>
...@@ -59,7 +61,38 @@ ...@@ -59,7 +61,38 @@
<div class="ul-div"><li><img width="20px" src="@/assets/mark/yinhuan.png" /> 隐患<span>0</span></li></div> <div class="ul-div"><li><img width="20px" src="@/assets/mark/yinhuan.png" /> 隐患<span>0</span></li></div>
</ul> </ul>
</div> </div>
</dv-border-box-10></div> </dv-border-box-10></div> -->
<div class="markBox">
<el-tooltip :disabled="disabled" content="企业注册" placement="left" effect="light">
<div @click="mapqiye">
<img width="15px" src="@/assets/mark/markqy.png" />
</div>
</el-tooltip>
<el-tooltip :disabled="disabled" content="危险源" placement="left" effect="light">
<div @click="mapwxy">
<img width="20px" src="@/assets/mark/weixianyuan.png" />
</div>
</el-tooltip>
<el-tooltip :disabled="disabled" content="监控监测点" placement="left" effect="light">
<div @click="mapshipin">
<img width="20px" src="@/assets/mark/jiankong.png" />
</div>
</el-tooltip>
<el-tooltip :disabled="disabled" content="职业危害场所" placement="left" effect="light">
<div>
<img width="20px" src="@/assets/mark/weihaichangsuo.png" />
</div>
</el-tooltip>
<el-tooltip :disabled="disabled" content="隐患" placement="left" effect="light">
<div>
<img width="20px" src="@/assets/mark/yinhuan.png" />
</div>
</el-tooltip>
</div>
<!-- <div id="pieReport" style="width: 480px;height: 200px;background-color: rgba(2, 20, 44, 0.5);margin-top: 30px;margin-left: 10px;"></div> <!-- <div id="pieReport" style="width: 480px;height: 200px;background-color: rgba(2, 20, 44, 0.5);margin-top: 30px;margin-left: 10px;"></div>
<div id="pieReport" style="width: 480px;height: 250px;background-color: rgba(2, 20, 44, 0.5);margin-top: 30px;margin-left: 10px;"></div> <div id="pieReport" style="width: 480px;height: 250px;background-color: rgba(2, 20, 44, 0.5);margin-top: 30px;margin-left: 10px;"></div>
<div id="pieReport" style="width: 480px;height: 250px;background-color: rgba(2, 20, 44, 0.5);margin-top: 30px;margin-left: 10px;"></div> --> <div id="pieReport" style="width: 480px;height: 250px;background-color: rgba(2, 20, 44, 0.5);margin-top: 30px;margin-left: 10px;"></div> -->
...@@ -139,7 +172,7 @@ export default class GIS extends Vue { ...@@ -139,7 +172,7 @@ export default class GIS extends Vue {
@Provide() mouseTool: any; //测量工具 @Provide() mouseTool: any; //测量工具
@Provide() toolVisble: boolean = false; @Provide() toolVisble: boolean = false;
@Provide() tjNumberObj: any = {}; @Provide() tjNumberObj: any = {};
@Provide() qiyeVisble: boolean = true;
getMapData() { getMapData() {
let that = this; let that = this;
...@@ -295,13 +328,40 @@ export default class GIS extends Vue { ...@@ -295,13 +328,40 @@ export default class GIS extends Vue {
that.Mutil = new Mutil("mapbox"); that.Mutil = new Mutil("mapbox");
that.MAP = that.Mutil.MAP; that.MAP = that.Mutil.MAP;
that.Mutil.mapSelectBind((evt: any) => { that.Mutil.mapSelectBind((evt: any) => {
let id = evt.selected[0].get('did'); //这是地图marker点击回调监听
if (id) that.getPopcon(id); if(evt.selected[0].get('type')==='qiye'){
that.Mutil.closeAllOverlays();
let id = evt.selected[0].get('did');
if (id) that.getPopcon(id);
}else{//其他类的气泡
}
}) })
this.getStatiData(); this.getStatiData();
this.Mutil.getBoundaries("石家庄"); this.Mutil.getBoundaries("石家庄");
} }
mapqiye(){
if(this.qiyeVisble){
this.Mutil.visibleMarks(false,"qiye");
this.qiyeVisble=false;
}else{
this.Mutil.visibleMarks(true,"qiye");
this.qiyeVisble=true;
}
}
mapbox(){
let that = this;
that.Mutil.closeAllOverlays();
}
mapwxy(){
alert("qiye22222")
}
mapshipin(){
alert("qiye33333")
}
getStatiData() { getStatiData() {
let that = this; let that = this;
METHOD.axiosPost( METHOD.axiosPost(
...@@ -402,30 +462,23 @@ export default class GIS extends Vue { ...@@ -402,30 +462,23 @@ export default class GIS extends Vue {
} }
.markBox { .markBox {
width: 100%; z-index: 30;
z-index: 12; width:50px;
ul { height:250px;
.ul-div{ background-color: rgba(2, 40, 90, 0.5);
margin-left: -30px; position: fixed;
li { bottom: 10px;
padding: 5px; right: 20px;
list-style-type:none; }
color:#0000FF; .markBox div{
font-size: 20px; width: 100%;
img { height: 50px;
width: 25px; text-align: center;
vertical-align: middle; /* background: url(@/assets/mark/markqy.png) right top no-repeat !important; */
} }
} .markBox div img{
span{ width: 25px;
float: right; margin-top: 10px;
margin-right: 5px;
font-family: 'UnidreamLED';
overflow: hidden;
font-size: 30px;
}
}
}
} }
.show-box { .show-box {
position: absolute !important; position: absolute !important;
...@@ -443,4 +496,5 @@ export default class GIS extends Vue { ...@@ -443,4 +496,5 @@ export default class GIS extends Vue {
top: .5em; top: .5em;
left: 500px !important; left: 500px !important;
} }
</style> </style>
dcit-hcsystem-hcsystem-master/src/views/qyMap/qyMapone.vue
View file @ d5999024
<template style=""> <template style="">
<div class="pie" style="width:480px;margin-left: 10px;margin-top: 20px;"> <div class="pie" style="width:480px;margin-left: 10px;margin-top: 20px;">
<dv-border-box-1> <!-- <dv-border-box-1> -->
<div class="pie-div"> <div class="pie-div">
<div style="width:480px;height: 40px;text-align: center;"> <div style="width:480px;height: 40px;text-align: center;">
<span style="font-size: 20px; font-weight: 900; color: #fff;">企业注册</span> <span style="font-size: 20px; font-weight: 900; color: #fff;">企业注册</span>
...@@ -59,13 +59,15 @@ ...@@ -59,13 +59,15 @@
</vue-ellipse-progress> </vue-ellipse-progress>
</div> </div>
</div> </div>
</dv-border-box-1> <!-- </dv-border-box-1> -->
<div id="pie2" style="width:450px;height: 350px;"> <dv-border-box-12>
<div id="pie2" style="width:450px;height: 370px;padding: 20px 0 0 0;">
<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM --> <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div id="main2" style="width:450px;height:320px;"></div> <div id="main2" style="width:450px;height:340px;"></div>
</div> </div>
</dv-border-box-12>
<div class="div-table" style="width:480px;height: 380px;margin-top: 20px;"> <div class="div-table" style="width:480px;height: 380px;margin-top: 20px;">
<div style="width: 99%;height: 40px;background-color:#0b356d;text-align: center;font-size: 18px;border: 2px solid #8ec5fc;border-bottom: 0px solid; line-height: 40px;color: #fff;font-weight: 900;">预警信息</div> <div style="width: 100%;height: 40px;text-align: center;font-size: 18px; line-height: 40px;color: #fff;font-weight: 900;">预警信息</div>
<el-table <el-table
:data="tableData" :data="tableData"
height="220" height="220"
...@@ -257,6 +259,11 @@ export default { ...@@ -257,6 +259,11 @@ export default {
} }
</script> </script>
<style> <style>
.pie #pie2 {
/* border: 1px #000000 solid; */
margin-left: 20px;
margin-top: 30px !important;
}
.el-main .el-tabs .el-tabs__content{ .el-main .el-tabs .el-tabs__content{
/* height: 100%; */ /* height: 100%; */
padding: 0px !important; padding: 0px !important;
......
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