Skip to content

G
gassafety
Commit fffa1d89 authored by 纪泽龙's avatar 纪泽龙
Browse files
Options

修改数据地图里的infowindow层级问题

parent 67bdde22
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 1165 additions and 56 deletions
gassafety-web/src/assets/styles/fonticon.scss
View file @ fffa1d89
@font-face {
font-family: "iconfont"; /* Project id 2692138 */
src: url('//at.alicdn.com/t/font_2692138_75daec8zfbv.woff2?t=1627011828763') format('woff2'),
url('//at.alicdn.com/t/font_2692138_75daec8zfbv.woff?t=1627011828763') format('woff'),
url('//at.alicdn.com/t/font_2692138_75daec8zfbv.ttf?t=1627011828763') format('truetype');
src: url('//at.alicdn.com/t/font_2692138_r2b0jk88vrj.woff2?t=1627616466373') format('woff2'),
url('//at.alicdn.com/t/font_2692138_r2b0jk88vrj.woff?t=1627616466373') format('woff'),
url('//at.alicdn.com/t/font_2692138_r2b0jk88vrj.ttf?t=1627616466373') format('truetype');
}
.iconfont {
......@@ -13,6 +13,26 @@
-moz-osx-font-smoothing: grayscale;
}
.icon-gdcd:before {
content: "\e615";
}
.icon-tyxgs:before {
content: "\e610";
}
.icon-fmjgs:before {
content: "\e612";
}
.icon-rqbgs:before {
content: "\e613";
}
.icon-ljsgs:before {
content: "\e614";
}
.icon-ylb:before {
content: "\e60f";
}
......
gassafety-web/src/components/MyFileUpload/index.vue
View file @ fffa1d89
......@@ -15,7 +15,7 @@
:show-file-list="true"
:headers="headers"
class="upload-file-uploader"
:class="{hide:addShow}"
:class="{ hide: addShow }"
ref="upload"
>
<!-- 上传按钮 -->
......@@ -33,8 +33,13 @@
的文件
</div>
</el-upload>
<el-dialog :modal="modal" :visible.sync="dialogVisible">
<img width="100%" :src="dialogImageUrl" alt="" />
<el-dialog
:center="true"
width="50%"
:modal="modal"
:visible.sync="dialogVisible"
>
<img :src="dialogImageUrl" alt="" />
</el-dialog>
<!-- 文件列表 -->
<!-- <transition-group class="upload-file-list el-upload-list el-upload-list--text" name="el-fade-in-linear" tag="ul">
......@@ -80,7 +85,6 @@ export default {
type: Boolean,
default: false,
},
},
data() {
return {
......@@ -89,10 +93,10 @@ export default {
Authorization: "Bearer " + getToken(),
},
fileList: [],
modal:false,
dialogVisible:false,
dialogImageUrl:"",
addShow:true,
modal: false,
dialogVisible: false,
dialogImageUrl: "",
addShow: true,
};
},
computed: {
......@@ -167,7 +171,7 @@ export default {
// 文件列表移除文件
handleRemove(file, fileList) {
console.log("列表移除", file, fileList);
this.addShow = fileList.length>0 ?true:false;
this.addShow = fileList.length > 0 ? true : false;
this.$emit("remove", file);
},
// 删除文件
......@@ -189,10 +193,13 @@ export default {
// }
// });
},
handleFileClick(file) {
this.dialogImageUrl = file.response.url;
this.dialogVisible=true;
handleFileClick(file, fileList) {
this.dialogImageUrl = file.response ? file.response.url : file.url;
// this.dialogImageUrl =if(this.fileArr) this.fileArr[0].url;
this.dialogVisible = true;
console.log(file);
// console.log(file.response.url)
},
// 获取文件名称
getFileName(name) {
......@@ -203,19 +210,21 @@ export default {
}
},
// 当改变列表改变时
fileChange(file,fileList){
this.addShow = fileList.length>0 ?true:false;
}
fileChange(file, fileList) {
this.addShow = fileList.length > 0 ? true : false;
},
},
created() {
// this.fileList = this.list;
this.addShow = this.fileArr.length>0 ?true:false;
this.addShow = this.fileArr.length > 0 ? true : false;
},
};
</script>
<style scoped lang="scss">
img {
width: 100%;
}
.upload-file-uploader {
margin-bottom: 5px;
}
......@@ -234,5 +243,4 @@ export default {
.ele-upload-list__item-content-action .el-link {
margin-right: 10px;
}
</style>
gassafety-web/src/components/PopWindow/lineInfoWindow.vue
View file @ fffa1d89
......@@ -121,6 +121,7 @@ export default {
}
}
.content {
position: relative;
max-height: 400px;
overflow: hidden;
overflow-y: auto;
......
gassafety-web/src/utils/gaodeMapView.js 0 → 100644
View file @ fffa1d89
This diff is collapsed.
gassafety-web/src/views/device/map/index.vue
View file @ fffa1d89
......@@ -416,7 +416,15 @@ export default {
<style lang="scss" scoped>
// 解决地图下拉框
#container{
position: fixed;
top: 80px;
bottom:0;
width: 100%;
}
// 左边的bar
.leftBar-wrapper {
position: fixed;
left: 100px;
......
gassafety-web/src/views/enterprise/mapView/components/RightBototmData.vue 0 → 100644
View file @ fffa1d89
<template>
<div class="wrapper">
<div class="left">
<div class="top">设备报警最新记录</div>
<div class="bottom">
<div class="one">设备编号:<span>1123123123</span></div>
<div class="two">报警时间:<span>34523452345</span></div>
</div>
</div>
<div class="right">
<template v-for="item in list" >
<div class="right-content" :key="item.type">
<div class="text-icon">
<i class="iconfont icon-gdcd"></i>
</div>
<div class="text">
<div class="top">{{typeName[item.type]}}</div>
<div class="bottom">{{item.number}}{{item.type==99?"KM":"个" }}</div>
</div>
</div>
</template>
</div>
</div>
</template>
<script>
export default {
props: {
list: {
type: Array,
},
},
data(){
return {
typeName:{
"1":"调压箱",
"2":"阀门井",
"3":"流量计",
"4":"压力表",
"99":"管道",
},
// type
}
},
created() {
console.log("list", this.list);
},
};
</script>
<style lang="scss" scoped>
.wrapper {
width: 778px;
height: 304px;
position: fixed;
right: 32px;
bottom: 22px;
// background-color: #fff;
display: flex;
justify-content: space-between;
& > div {
}
.left {
width: 278px;
margin-right: 12px;
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.16);
background-color: #fff;
color: #fff;
font-size: 14px;
font-weight: 400;
.top {
height: 32px;
background-color: #053b6a;
line-height: 32px;
padding-left: 12px;
}
.bottom {
& > div {
height: 20px;
padding-left: 32px;
padding-bottom: 2px;
&.one {
background-color: #f0f0f0;
color: #2788ea;
}
&.two {
color: #676767;
}
}
}
}
.right {
width: 500px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-content: flex-start;
& > .right-content {
background-color: #fff;
width: 238px;
height: 82px;
margin-bottom: 29px;
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.16);
display: flex;
// align-items: center;
.text-icon {
line-height: 82px;
padding-left: 22px;
margin-right: 22px;
i {
color: #053b6a;
font-size: 60px;
}
}
.text {
font-size: 14px;
padding-top: 16px;
.top {
color: #000;
margin-bottom: 10px;
font-weight: 600;
}
.bottom {
color: #2788ea;
}
}
}
}
}
</style>
\ No newline at end of file
gassafety-web/src/views/enterprise/mapView/index.vue
View file @ fffa1d89
<template>
<div>
<div style="width: 100vw; height: 100vh" id="container"></div>
<div class="btn-wrapper">
<div v-show="false" class="btn-wrapper">
<div class="myBtn">
<div
class="el-btn"
......@@ -63,6 +63,8 @@
</div>
</div>
<el-input
v-model="keyWord"
placeholder="点击输入"
......@@ -93,14 +95,20 @@
<i class="el-icon-check"></i>
</div>
</div>
<RightBototmData :list="rightBototmData"/>
</div>
</template>
<script>
import gaodeMap from "utils/gaodeMap.js";
import { pipeAllInfoList } from "@/api/device/pipe.js";
import { map, DEVICE_TYPE, mapOperateType } from "utils/gaodeMap.js";
import { getAllDeviceInfo } from "@/api/device/deviceInfo";
// import from "utils/gaodeMapView.js";
import { pipeAllInfoList, countPipeLength } from "@/api/device/pipe.js";
import gaodeMap, { map, DEVICE_TYPE, mapOperateType } from "utils/gaodeMapView.js";
import { getAllDeviceInfo, countDeviceByType } from "@/api/device/deviceInfo";
import RightBototmData from "./components/RightBototmData.vue";
export default {
components: {
RightBototmData,
},
data() {
return {
gaoMap: null,
......@@ -145,8 +153,22 @@ export default {
},
],
keyWord: "",
// 右下角的数据data
rightBototmData: [],
};
},
async created() {
await countPipeLength().then((res) => {
console.log("管道管道管道管道管道管道", res);
const obj = { number: res.data, type: "99" };
this.rightBototmData.push(obj);
});
await countDeviceByType().then((res) => {
console.log("markerresresresresresresresresresresresres", res);
this.rightBototmData.push(...res.data);
});
console.log(this.rightBototmData);
},
mounted() {
this.initMap();
},
......@@ -416,6 +438,12 @@ export default {
<style lang="scss" scoped>
#container{
position: fixed;
top: 80px;
bottom:0;
width: 100%;
}
// 左边的bar
.leftBar-wrapper {
position: fixed;
......@@ -599,37 +627,37 @@ input[type="radio"] {
padding: 0;
margin: 0 0.5rem 0 0;
}
.btn {
display: inline-block;
font-weight: 400;
text-align: center;
white-space: nowrap;
vertical-align: middle;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
border: 1px solid transparent;
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
background-color: transparent;
background-image: none;
color: #25a5f7;
border-color: #25a5f7;
padding: 0.25rem 0.5rem;
line-height: 1.5;
border-radius: 1rem;
-webkit-appearance: button;
cursor: pointer;
width: 6rem;
margin: 0 1rem 0 2rem;
}
// .btn {
// display: inline-block;
// font-weight: 400;
// text-align: center;
// white-space: nowrap;
// vertical-align: middle;
// -webkit-user-select: none;
// -moz-user-select: none;
// -ms-user-select: none;
// user-select: none;
// border: 1px solid transparent;
// transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
// border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
// background-color: transparent;
// background-image: none;
// color: #25a5f7;
// border-color: #25a5f7;
// padding: 0.25rem 0.5rem;
// line-height: 1.5;
// border-radius: 1rem;
// -webkit-appearance: button;
// cursor: pointer;
// width: 6rem;
// margin: 0 1rem 0 2rem;
// }
.btn:hover {
color: #fff;
background-color: #25a5f7;
border-color: #25a5f7;
}
// .btn:hover {
// color: #fff;
// background-color: #25a5f7;
// border-color: #25a5f7;
// }
.input-text {
width: 4rem;
margin-right: 1rem;
......
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