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 {
});
let iconFeatureArr = [];
feature.setStyle(style);
if (id) feature.set('did', id);
if (id) {feature.set('did', id);
feature.set('type', type);}
iconFeatureArr.push(feature);
var vectorSource = new VectorSource({
features: iconFeatureArr,
......@@ -154,7 +155,10 @@ export default class Mutil {
vectorLayer.set('layClassName', type)
if (["1", "2", "3", "4", "5", "6"].indexOf(type) > -1) {
vectorLayer.set('layClassMark', 'Maker');
if (id) vectorLayer.set('did', id);
if (id){
vectorLayer.set('did', id);
feature.set('type', type);
}
}
that.MAP.addLayer(vectorLayer)
......@@ -180,14 +184,23 @@ export default class Mutil {
}
}
//隐藏显示某类型标注 type：Boolean 是否显示
visibleMarks(type, datatype) {
visibleMarks(showtype, datatype) {
let that = this, layerarr = that.MAP.getLayers().getArray(),
formerLayer = layerarr.filter((e) => e.get("layClassName") == datatype);
if (formerLayer) {
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) {
......@@ -210,6 +223,7 @@ export default class Mutil {
},
})
that.MAP.addOverlay(overlay);
//点击X隐藏企业气泡
document.getElementById(`pop-close${id}`).onclick = function () {
overlay.setPosition(undefined)
}
......
dcit-hcsystem-hcsystem-master/src/views/qyMap/qyMap.vue
View file @ d5999024
<template>
<div class="gis">
<div id="mapbox">
<div id="mapbox" @click="mapbox">
<!-- <Search :MAP="MAP" :Mutil="Mutil" v-if="mapLoadDone"></Search> -->
<!-- <DrawTool :MAP="MAP" v-if="mapLoadDone"></DrawTool> -->
<!-- <div style="width:200px;height:250px;" class="show-box" > -->
......@@ -41,7 +41,9 @@
<!-- <div id="pieReport" style="width: 400px;height: 300px;background-color: rgba(2, 20, 44, 0.4)"></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"> -->
<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">
<ul>
<div class="ul-div"><li><img width="15px" src="@/assets/mark/markqy.png" /> 注册企业 <span>{{tjNumberObj.enterpriseRegNum}}</span></li></div>
......@@ -59,7 +61,38 @@
<div class="ul-div"><li><img width="20px" src="@/assets/mark/yinhuan.png" /> 隐患<span>0</span></li></div>
</ul>
</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: 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 {
@Provide() mouseTool: any; //测量工具
@Provide() toolVisble: boolean = false;
@Provide() tjNumberObj: any = {};
@Provide() qiyeVisble: boolean = true;
getMapData() {
let that = this;
......@@ -295,13 +328,40 @@ export default class GIS extends Vue {
that.Mutil = new Mutil("mapbox");
that.MAP = that.Mutil.MAP;
that.Mutil.mapSelectBind((evt: any) => {
let id = evt.selected[0].get('did');
if (id) that.getPopcon(id);
//这是地图marker点击回调监听
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.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() {
let that = this;
METHOD.axiosPost(
......@@ -402,30 +462,23 @@ export default class GIS extends Vue {
}
.markBox {
width: 100%;
z-index: 12;
ul {
.ul-div{
margin-left: -30px;
li {
padding: 5px;
list-style-type:none;
color:#0000FF;
font-size: 20px;
img {
width: 25px;
vertical-align: middle;
}
}
span{
float: right;
margin-right: 5px;
font-family: 'UnidreamLED';
overflow: hidden;
font-size: 30px;
}
}
}
z-index: 30;
width:50px;
height:250px;
background-color: rgba(2, 40, 90, 0.5);
position: fixed;
bottom: 10px;
right: 20px;
}
.markBox div{
width: 100%;
height: 50px;
text-align: center;
/* background: url(@/assets/mark/markqy.png) right top no-repeat !important; */
}
.markBox div img{
width: 25px;
margin-top: 10px;
}
.show-box {
position: absolute !important;
......@@ -443,4 +496,5 @@ export default class GIS extends Vue {
top: .5em;
left: 500px !important;
}
</style>
dcit-hcsystem-hcsystem-master/src/views/qyMap/qyMapone.vue
View file @ d5999024
<template style="">
<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 style="width:480px;height: 40px;text-align: center;">
<span style="font-size: 20px; font-weight: 900; color: #fff;">企业注册</span>
......@@ -59,13 +59,15 @@
</vue-ellipse-progress>
</div>
</div>
</dv-border-box-1>
<div id="pie2" style="width:450px;height: 350px;">
<!-- </dv-border-box-1> -->
<dv-border-box-12>
<div id="pie2" style="width:450px;height: 370px;padding: 20px 0 0 0;">
<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div id="main2" style="width:450px;height:320px;"></div>
<div id="main2" style="width:450px;height:340px;"></div>
</div>
</dv-border-box-12>
<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
:data="tableData"
height="220"
......@@ -257,6 +259,11 @@ export default {
}
</script>
<style>
.pie #pie2 {
/* border: 1px #000000 solid; */
margin-left: 20px;
margin-top: 30px !important;
}
.el-main .el-tabs .el-tabs__content{
/* height: 100%; */
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