Skip to content

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

Merge branch 'develop_jzl'

parents 60cbf9e6 bbdc2c9d
Hide whitespace changes
Inline Side-by-side
Showing with 201 additions and 97 deletions
gassafety-web/src/assets/images/llj.gif
View replaced file @ 60cbf9e6 View file @ 512b154e
gassafety-web/src/assets/images/llj.gif

2.05 KB | W: | H:

gassafety-web/src/assets/images/llj.gif

1.98 KB | W: | H:

gassafety-web/src/assets/images/llj.gif
gassafety-web/src/assets/images/llj.gif
gassafety-web/src/assets/images/llj.gif
gassafety-web/src/assets/images/llj.gif
  • 2-up
  • Swipe
  • Onion skin
gassafety-web/src/assets/images/ylb.gif
View replaced file @ 60cbf9e6 View file @ 512b154e
gassafety-web/src/assets/images/ylb.gif

1.93 KB | W: | H:

gassafety-web/src/assets/images/ylb.gif

1.83 KB | W: | H:

gassafety-web/src/assets/images/ylb.gif
gassafety-web/src/assets/images/ylb.gif
gassafety-web/src/assets/images/ylb.gif
gassafety-web/src/assets/images/ylb.gif
  • 2-up
  • Swipe
  • Onion skin
gassafety-web/src/assets/styles/gassafety.scss
View file @ 512b154e
......@@ -387,3 +387,9 @@
height: 140px !important;
}
}
.ddd {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
gassafety-web/src/components/PopWindowGis/lineInfoWindow.vue
View file @ 512b154e
<template>
<div class="wrapper">
<div class="top display-default">
<div class="left text">{{ obj.pipeName }}</div>
<div class="left text ddd" :title="obj.pipeName">{{ obj.pipeName }}</div>
<div class="right text">
<img @click="close" src="../../assets/images/closeBtn.png" alt="" />
</div>
......@@ -34,7 +34,6 @@
}}</span>
</div>
</div>
<div class="pic">
<img @mousedown.stop="mousedown" :src="obj.iconUrl" alt="" />
<el-image
......@@ -129,7 +128,8 @@ export default {
close() {
this.obj.polyline.infoWindow.close();
// window底部的数据拦
this.obj.polyline.getExtData().class.view.bottomDataShow = true;
this.obj.polyline.getExtData().class.view.domAllShow();
},
deviceMore() {
console.log(this.obj.polyline.getExtData().lineData);
......@@ -151,27 +151,32 @@ export default {
.wrapper {
width: 406px;
max-height: 430px;
background: #fff;
background: rgba(7, 29, 51, 0.9);
border-radius: 4px;
box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
color: #fff;
// overflow: hidden;
.top {
width: 100%;
height: 51px;
background-color: #053b6a;
// background-color: #053b6a;
background-image: url(../../assets/images/blueTopBg.png);
background-size: 100% 100%;
background-position: center;
// border-radius: 4px 4px 0px 0px;
// border: 1px solid #fff;
box-sizing: border-box;
position: relative;
&:before {
content: "";
position: absolute;
left: -20px;
top: 5px;
width: 0px;
height: 0px;
/* border: 20px solid red; */
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
/* border-left: 50px solid greenyellow; */
border-right: 30px solid #053b6a;
z-index: -1;
width: 33px;
height: 33px;
background-image: url(../../assets/images/blueLeftTriangle.png);
}
.text {
font-weight: 600;
......@@ -209,7 +214,8 @@ export default {
.eq-text {
font-size: 14px;
font-weight: 400;
color: #1d1d1d;
// color: #1d1d1d;
color: #fff;
opacity: 1;
& > span {
vertical-align: top;
......
gassafety-web/src/components/PopWindowGis/lineInfoWindowWarn.vue
View file @ 512b154e
<template>
<div class="wrapper">
<div class="top display-default">
<div class="left text">{{ obj.pipeName }}</div>
<div class="left text ddd" :title="obj.pipeName">{{ obj.pipeName }}</div>
<div class="right text">
<img @click="close" src="../../assets/images/closeBtn.png" alt="" />
</div>
......@@ -200,7 +200,7 @@ export default {
},
close() {
this.obj.polyline.infoWindow.close();
this.obj.polyline.getExtData().class.view.bottomDataShow = true;
this.obj.polyline.getExtData().class.view.domAllShow()
},
},
};
......@@ -210,26 +210,29 @@ export default {
.wrapper {
width: 406px;
max-height: 500px;
background: #fff;
// background: #fff;
background: rgba(7, 29, 51, 0.9);
color: #fff;
border-radius: 4px;
box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
// overflow: hidden;
.top {
width: 100%;
height: 51px;
background-color: #ff5a67;
// background-color: #ff5a67;
background-image: url(../../assets/images/redTopBg.png);
background-size: 100% 100%;
background-position: center;
&:before {
content: "";
position: absolute;
left: -20px;
top: 5px;
width: 0px;
height: 0px;
/* border: 20px solid red; */
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
/* border-left: 50px solid greenyellow; */
border-right: 30px solid #ff5a67;
z-index: -1;
width: 33px;
height: 33px;
background-image: url(../../assets/images/redLeftTriangle.png);
}
.text {
font-weight: 600;
......@@ -239,6 +242,8 @@ export default {
}
.left {
padding-left: 22px;
width:100%;
overflow: hidden;
}
.right {
padding-right: 22px;
......@@ -267,7 +272,7 @@ export default {
.eq-text {
font-size: 14px;
font-weight: 400;
color: #1d1d1d;
color: #fff;
opacity: 1;
& > span {
vertical-align: top;
......@@ -300,6 +305,7 @@ export default {
// padding-right: 22px;
// padding-bottom: 10px;
// padding-top: 16px;
box-sizing: border-box;
// border-bottom: 1px solid #e2e2e2;
& > div {
......@@ -337,7 +343,7 @@ export default {
box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
width: 95px;
height: 33px;
border: none;
// border: none;
}
}
}
......
gassafety-web/src/components/PopWindowGis/markerInfoWindow.vue
View file @ 512b154e
......@@ -2,7 +2,7 @@
<div class="wrapper">
<span class="dot-left"></span>
<div class="top display-default">
<div class="left text">{{ data.deviceName }}</div>
<div class="left text ddd" :title="data.deviceName">{{ data.deviceName }}</div>
<div class="right text">
<img src="../../assets/images/closeBtn.png" alt="" @click="close" />
</div>
......@@ -97,7 +97,7 @@ export default {
},
close() {
this.map.clearInfoWindow();
this.data.class.view.bottomDataShow = true;
this.data.class.view.domAllShow()
},
},
};
......@@ -107,26 +107,38 @@ export default {
.wrapper {
width: 406px;
max-height: 430px;
background: #fff;
// background: #fff;
border-radius: 4px;
background: rgba(7, 29, 51, 0.9);
box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
color: #fff;
// overflow: hidden;
.top {
width: 100%;
height: 51px;
background-color: #053b6a;
// background-color: #053b6a;
background-image: url(../../assets/images/blueTopBg.png);
background-size: 100% 100%;
background-position: center;
&:before {
// content: "";
// position: absolute;
// left: -20px;
// top: 5px;
// width: 0px;
// height: 0px;
// z-index:-1;
// border-top: 15px solid transparent;
// border-bottom: 15px solid transparent;
// border-right: 30px solid #053b6a;
content: "";
position: absolute;
left: -20px;
top: 5px;
width: 0px;
height: 0px;
/* border: 20px solid red; */
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
/* border-left: 50px solid greenyellow; */
border-right: 30px solid #053b6a;
z-index: -1;
width: 33px;
height: 33px;
background-image: url(../../assets/images/blueLeftTriangle.png);
}
.text {
font-weight: 600;
......@@ -164,7 +176,8 @@ export default {
.eq-text {
font-size: 14px;
font-weight: 400;
color: #1d1d1d;
// color: #1d1d1d;
color: #fff;
opacity: 1;
& > span {
vertical-align: top;
......
gassafety-web/src/components/PopWindowGis/markerInfoWindowWarn.vue
View file @ 512b154e
......@@ -2,13 +2,11 @@
<div class="wrapper">
<span class="dot-left"></span>
<div class="top display-default">
<div class="left text">{{ data.deviceName }}</div>
<div class="left text ddd" :title="data.deviceName">
{{ data.deviceName }}
</div>
<div class="right text">
<img
src="../../assets/images/closeBtn.png"
alt=""
@click="close"
/>
<img src="../../assets/images/closeBtn.png" alt="" @click="close" />
</div>
</div>
<!-- 设备信息 -->
......@@ -137,9 +135,9 @@ export default {
type: "device",
});
},
close(){
close() {
this.map.clearInfoWindow();
this.data.class.view.bottomDataShow = true;
this.data.class.view.domAllShow();
},
// CreateWorkCallBack(e) {
// // console.log("生成工单后传过来的参数", e);
......@@ -177,31 +175,32 @@ export default {
},
};
</script>
<style lang="scss" scoped>
.wrapper {
width: 406px;
max-height: 500px;
background: #fff;
// background: #fff;
background: rgba(7, 29, 51, 0.9);
color: #fff;
border-radius: 4px;
box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
// overflow: hidden;
.top {
width: 100%;
height: 51px;
background-color: #ff5a67;
&:before {
// background-color: #ff5a67;
background-image: url(../../assets/images/redTopBg.png);
background-size: 100% 100%;
background-position: center;
&:before {
content: "";
position: absolute;
left: -20px;
top: 5px;
width: 0px;
height: 0px;
/* border: 20px solid red; */
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
/* border-left: 50px solid greenyellow; */
border-right: 30px solid #ff5a67;
z-index: -1;
width: 33px;
height: 33px;
background-image: url(../../assets/images/redLeftTriangle.png);
}
.text {
font-weight: 600;
......@@ -239,7 +238,7 @@ export default {
.eq-text {
font-size: 14px;
font-weight: 400;
color: #1d1d1d;
color: #fff;
opacity: 1;
& > span {
vertical-align: top;
......@@ -309,7 +308,7 @@ export default {
box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
width: 95px;
height: 33px;
border: none;
// border: none;
}
}
}
......
gassafety-web/src/components/PopWindowGis/troubleInfoWindowWarn.vue
View file @ 512b154e
......@@ -2,7 +2,9 @@
<div class="wrapper">
<span class="dot-left"></span>
<div class="top display-default">
<div class="left text">{{ data.troubleName }}</div>
<div class="left text ddd" :title="data.troubleName">
{{ data.troubleName }}
</div>
<div class="right text">
<img src="../../assets/images/closeBtn.png" alt="" @click="close" />
</div>
......@@ -154,7 +156,7 @@ export default {
// },
close() {
this.map.clearInfoWindow();
this.data.class.view.bottomDataShow = true;
this.data.class.view.domAllShow();
},
deviceMore() {
this.data.class.view.$router.push({
......@@ -185,26 +187,29 @@ export default {
.wrapper {
width: 406px;
max-height: 500px;
background: #fff;
// background: #fff;
background: rgba(7, 29, 51, 0.9);
border-radius: 4px;
box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
// overflow: hidden;
.top {
width: 100%;
height: 51px;
background-color: #e6a23c;
// background-color: #e6a23c;
background-image: url(../../assets/images/yellowTopBg.png);
background-size: 100% 100%;
background-position: center;
color: #fff;
&:before {
content: "";
position: absolute;
left: -20px;
top: 5px;
width: 0px;
height: 0px;
/* border: 20px solid red; */
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
/* border-left: 50px solid greenyellow; */
border-right: 30px solid #e6a23c;
z-index: -1;
width: 33px;
height: 33px;
background-image: url(../../assets/images/yellowLeftTriangle.png);
}
.text {
font-weight: 600;
......@@ -242,7 +247,7 @@ export default {
.eq-text {
font-size: 14px;
font-weight: 400;
color: #1d1d1d;
color: #fff;
opacity: 1;
& > span {
vertical-align: top;
......@@ -272,6 +277,7 @@ export default {
width: 100%;
max-height: 119px;
padding-left: 22px;
color: #fff;
// padding-right: 22px;
// padding-bottom: 10px;
// padding-top: 16px;
......@@ -312,7 +318,7 @@ export default {
box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
width: 95px;
height: 33px;
border: none;
// border: none;
}
}
}
......
gassafety-web/src/components/PopWindowGis/workerManInfowindow.vue
View file @ 512b154e
<template>
<div class="wrapper">
<div class="content">
<span class="left">姓名: {{ data.userName }}</span>
<span class="left">姓名: {{ data.nickName }}</span>
<span class="right">时间: {{ data.createTime }}</span>
</div>
......@@ -26,7 +26,9 @@ export default {
.wrapper {
// width: 166px;
height: 54px;
background: #0d4f88;
// background: #0d4f88;
background: rgba(7, 29, 51, 0.9);
font-size: 14px;
color: #fff;
box-sizing: border-box;
......@@ -45,7 +47,9 @@ export default {
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
/* border-left: 50px solid greenyellow; */
border-right: 30px solid #0d4f88;
border-right: 30px solid rgba(7, 29, 51, 0.9);
box-shadow: 0 0 20px -5px #0d4f88;
z-index: -1;
}
.content {
......
gassafety-web/src/components/PopWindowGis/workerManView.vue
View file @ 512b154e
......@@ -117,7 +117,7 @@ export default {
created() {
this.formData.userId = this.userId;
this.workerManArr = this.gaodeMap.workerManArr.map((item) => ({
label: item.userName,
label: item.nickName,
value: item.userId,
}));
},
......
gassafety-web/src/utils/gaodeMapView.js
View file @ 512b154e
......@@ -80,7 +80,7 @@ class gaodeMap {
this.closeInfoWindow();
this.polyLinesColorClear();
this.view.bottomDataShow = true;
this.domAllShow();
if (this.lineType != 1 || this.lineFlag) return;
// 除了这里，还要利用vue页面的window事件辅助，当组件出来的时候，就得利用window事件
if (this.newLineObj) {
......@@ -139,13 +139,13 @@ class gaodeMap {
// 卫星图
if (!bool) {
if(this.satellite) return;
this.satellite = new AMap.TileLayer.Satellite()
if (this.satellite) return;
this.satellite = new AMap.TileLayer.Satellite();
this.myMap.addLayer(this.satellite);
} else {
if(this.satellite){
if (this.satellite) {
this.myMap.removeLayer(this.satellite);
this.satellite=null;
this.satellite = null;
}
}
}
......@@ -284,6 +284,7 @@ class gaodeMap {
marker.on("mouseover", this.wokerManOpen);
marker.on("mouseout", e => {
e.target.infoWindow.close();
this.domAllShow()
});
marker.on("mousedown", e => {
......@@ -719,7 +720,7 @@ class gaodeMap {
map: map,
path: lineArr,
showDir: true,
strokeColor: "#28F", //线颜色
strokeColor: "#2EE7E7", //线颜色
// strokeOpacity: 1, //线透明度
strokeWeight: 6 //线宽
// strokeStyle: "solid" //线样式
......@@ -969,8 +970,15 @@ class gaodeMap {
boxCollision(infowindowDom) {
// gis地图页面的bottomdata组件
const {
Bottom: { $el: pageDom }
Bottom: { $el: pageDomBottom },
Right: { $el: pageDomRight }
} = this.view.$refs;
this.mathWho(infowindowDom, pageDomBottom, "bottomDataShow", "bottom");
this.mathWho(infowindowDom, pageDomRight, "rightDataShow", "right");
}
// domAttr view里的属性
//attr 存储在类里的值
mathWho(infowindowDom, pageDom, domAttr, attr) {
let {
offsetTop: ay,
offsetLeft: ax,
......@@ -985,20 +993,34 @@ class gaodeMap {
} = infowindowDom.getBoundingClientRect();
// 如果组件消失了ay回变成0，所以要记录一下，当它为0的时候取记录的值
if (ay != 0) {
this.ay = ay;
// this.ay = ay;
this[attr + "y"] = ay;
} else {
// ay = this.ay;
ay = this[attr + "y"];
}
if (ax != 0) {
// this.ax = ax;
this[attr + "x"] = ax;
} else {
ay = this.ay;
// ax = this.ax;
ax = this[attr + "x"];
}
console.log("ay", ay);
if (by + bh >= ay) {
if (by + bh >= ay && bx + bw >= ax) {
console.log("隐藏");
this.view.bottomDataShow = false;
this.view[domAttr] = false;
} else {
console.log("显示");
this.view.bottomDataShow = true;
this.view[domAttr] = true;
}
// if((by+bh) -ay <0)
}
domAllShow() {
this.view.bottomDataShow = true;
this.view.rightDataShow = true;
}
// 把map里的in佛window转化成vue里的dom
addCloneDome(target, infoWindow) {
target.cloneDom = infoWindow.dom.cloneNode(true);
......
gassafety-web/src/views/enterprise/mapView/components/Right.vue
View file @ 512b154e
......@@ -66,11 +66,12 @@ export default {
<style lang="scss" scoped>
.wrapper {
width: 300px;
height: 800px;
width: 270px;
height: 700px;
position: absolute;
top: 40px;
right: 0;
bottom:0;
overflow-x: hidden;
// right: 10px;
// top: 131px;
......@@ -102,6 +103,9 @@ export default {
background-image: url(../../../../assets/images/listBg.png);
margin-right: 10px;
display: flex;
&:last-child{
margin-bottom:0px !important;
}
&.three {
margin-right: 0px;
}
......
gassafety-web/src/views/enterprise/mapView/index.vue
View file @ 512b154e
......@@ -73,7 +73,10 @@
/>
<Bottom
v-show="bottomDataShow"
:class="{ classShow: !bottomDataShow }"
:class="{
classShow: !bottomDataShow,
bottomMarginRight: bottomMarginRight,
}"
ref="Bottom"
:list="rightBototmData"
/>
......@@ -265,7 +268,7 @@
</template>
<!-- 无数据 -->
<template v-else>
<div style="padding-left: 5px;color:#fff;">暂无数据</div>
<div style="padding-left: 5px; color: #fff">暂无数据</div>
</template>
</div>
</el-collapse-transition>
......@@ -389,6 +392,8 @@ export default {
rightBototmData: [],
bottomDataShow: true,
rightDataShow: true,
// 如果右边与下面重叠了，bottom要往左移
bottomMarginRight: false,
// 是否显示生成工单弹框
createWorkOpen: false,
//隐患工单
......@@ -419,6 +424,7 @@ export default {
window.removeEventListener("resize", this.onResize);
window.addEventListener("resize", this.onResize);
this.initMap();
// });
},
watch: {
......@@ -433,7 +439,22 @@ export default {
this.boxHeight = document.body.clientHeight - 80;
this.boxWidth = document.body.clientWidth;
console.log("挂在");
const {
Bottom: { $el: pageDomBottom },
Right: { $el: pageDomRight },
} = this.$refs;
// 右边的底
const RightBottom = pageDomRight.offsetTop + pageDomRight.offsetHeight;
// 下边的上边
const bottomTop = pageDomBottom.offsetTop;
if(RightBottom>bottomTop){
// 重叠了，bottom右移动
this.bottomMarginRight=true;
}
},
initMap() {
let gaoMap = new gaodeMap("石家庄");
this.gaoMap = gaoMap;
......@@ -792,6 +813,8 @@ export default {
leftBarChange(item) {
// this.leftBarNum= this.leftBarNum != item.value ? item.value:0;
this.gaoMap.closeInfoWindow();
this.domAllShow();
this.gaoMap.polyLinesColorClear();
const index = this.leftBarNum.indexOf(item.value);
if (index >= 0) {
......@@ -875,6 +898,7 @@ export default {
}
},
panToo(iten, item) {
this.domAllShow();
// 如果没打对勾，就啥也不干
if (!this.leftBarNum.includes(item.value)) return;
// 点击的时候允许infowindow消失
......@@ -1029,6 +1053,7 @@ export default {
} else {
this.arrowRightNum.push(item.value);
}
this.domAllShow();
},
// 管道储存
......@@ -1147,7 +1172,7 @@ export default {
path: [item.longitude, item.latitude],
no: index,
userId: item.userId,
userName: item.userName,
userName: item.nickName,
userPhone: item.phonenumber,
};
});
......@@ -1381,6 +1406,10 @@ export default {
this.gaoMap.lineFlag = false;
// this.gaoMap.createNewLine();
},
domAllShow() {
this.bottomDataShow = true;
this.rightDataShow = true;
},
refreshMap() {
// this.changeBtnDataClear();
this.keyWord = "";
......@@ -1452,8 +1481,8 @@ export default {
drawerClick() {
console.log("drawerClick");
this.gaoMap.polyLinesColorClear();
this.gaoMap.closeInfoWindow();
this.domAllShow();
},
},
......@@ -1482,6 +1511,10 @@ export default {
bottom: 0;
width: 100%;
}
// 如果right与bottom 重叠，则bottom左移动
.bottomMarginRight{
right: 280px;
}
// .btn-wrapper {
// position: fixed;
// right: 32px;
......
gassafety-web/yarn.lock
View file @ 512b154e
......@@ -903,6 +903,11 @@
"@babel/helper-validator-identifier" "^7.14.5"
to-fast-properties "^2.0.0"
"@easydarwin/easywasmplayer@^4.0.13":
version "4.0.13"
resolved "https://registry.nlark.com/@easydarwin/easywasmplayer/download/@easydarwin/easywasmplayer-4.0.13.tgz#83dc92d880e9b0528e5d4cfc9c669a1a1e420c08"
integrity sha1-g9yS2IDpsFKOXUz8nGaaGh5CDAg=
"@eslint/eslintrc@^0.2.2":
version "0.2.2"
resolved "https://registry.nlark.com/@eslint/eslintrc/download/@eslint/eslintrc-0.2.2.tgz#d01fc791e2fc33e88a29d6f3dc7e93d0cd784b76"
......@@ -3378,9 +3383,9 @@ ecc-jsbn@~0.1.1:
jsbn "~0.1.0"
safer-buffer "^2.1.0"
echarts@4.9.0:
echarts@^4.9.0:
version "4.9.0"
resolved "https://registry.nlark.com/echarts/download/echarts-4.9.0.tgz#a9b9baa03f03a2a731e6340c55befb57a9e1347d"
resolved "https://registry.nlark.com/echarts/download/echarts-4.9.0.tgz?cache=0&sync_timestamp=1630472362764&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fecharts%2Fdownload%2Fecharts-4.9.0.tgz#a9b9baa03f03a2a731e6340c55befb57a9e1347d"
integrity sha1-qbm6oD8Doqcx5jQMVb77V6nhNH0=
dependencies:
zrender "4.3.2"
......
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