Commit 525e7f91 authored by 耿迪迪's avatar 耿迪迪

Merge branch 'master' of ssh://111.61.77.35:15/gengdidi/gassafety

parents b9e9de79 0de38c9b
This source diff could not be displayed because it is too large. You can view the blob instead.
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

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
......@@ -387,3 +387,58 @@
height: 140px !important;
}
}
// 设备巡检详情页表格样式
.inspectiondetail {
.el-table {
.el-table__header-wrapper,
.el-table__fixed-header-wrapper {
th {
word-break: break-word;
background-color: #1181e8;
color: #fff;
height: 40px;
font-size: 14px;
}
}
.el-table__body-wrapper {
.el-table__row:nth-child(2n + 1) {
background-color: #e6e6e6;
// &:hover {
// td {
// background-color: #f4f4f4;
// }
// }
td {
.cell {
color: #053b6a;
}
}
}
.el-table__row:nth-child(2n) {
background-color: #f4f4f4;
// &:hover {
// td {
// background-color: #e6e6e6;
// }
// }
td {
.cell {
color: #053b6a;
}
}
}
}
.el-table__body-wrapper {
.el-button [class*="el-icon-"] + span {
margin-left: 1px;
}
}
}
}
.ddd {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
......@@ -14,6 +14,7 @@
placeholder="请选择所属管道"
filterable
style="width: 100%"
@change="selectChange"
>
<el-option
v-for="item in pipeList"
......@@ -201,6 +202,10 @@ export default {
MyFileUpload,
},
methods: {
selectChange(e){
const arr = this.pipeList.filter(item=>item.pipeId == e);
this.form.pipeName = arr[0].pipeName;
},
show() {
this.dialogVisible = true;
},
......@@ -211,7 +216,7 @@ export default {
this.form.iconUrl = res.url;
},
submitForm() {
console.log(this.form);
// console.log("this.form",this.form);
this.$refs["form"].validate((valid) => {
if (valid) {
if (this.form.deviceId != null) {
......
<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>
......@@ -132,27 +132,30 @@ export default {
.wrapper {
width: 406px;
// height: 488px;
background: #fff;
// background: #fff;
border-radius: 4px;
box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
background: rgba(7, 29, 51, 0.9);
color: #fff;
// overflow: hidden;
.top {
width: 100%;
height: 51px;
// 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;
/* 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);
}
.top {
width: 100%;
height: 51px;
background-color: #053b6a;
.text {
font-weight: 600;
font-size: 16px;
......@@ -187,7 +190,7 @@ export default {
.eq-text {
font-size: 14px;
font-weight: 400;
color: #1d1d1d;
color: #fff;
opacity: 1;
& > span {
vertical-align: top;
......
......@@ -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"
......@@ -51,8 +51,8 @@
</el-col>
<div>
<span>管道所在地址:</span>
<span>{{ data.pipeAddr }}</span>
<span>设备所在地址:</span>
<span>{{ data.deviceAddr }}</span>
</div>
<div>
<span>备注信息:</span>
......@@ -88,26 +88,28 @@ export default {
.wrapper {
width: 406px;
// height: 488px;
background: #fff;
border-radius: 4px;
box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
// background: #fff;
// overflow: hidden;
background: rgba(7, 29, 51, 0.9);
color: #fff;
.top {
width: 100%;
height: 51px;
background-color: #053b6a;
background-image: url(../../assets/images/blueTopBg.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 #053b6a;
z-index: -1;
width: 33px;
height: 33px;
background-image: url(../../assets/images/blueLeftTriangle.png);
}
.text {
font-weight: 600;
......@@ -143,7 +145,7 @@ export default {
.eq-text {
font-size: 14px;
font-weight: 400;
color: #1d1d1d;
color: #fff;
opacity: 1;
& > span {
vertical-align: top;
......
......@@ -349,7 +349,6 @@ export default {
// 图片列表移除
listRemove(e) {
this.editForm.iconUrl = "";
this.fileArr = [];
},
},
......
......@@ -14,6 +14,7 @@
placeholder="请选择所属管道"
filterable
style="width: 100%"
@change="selectChange"
>
<el-option
v-for="item in pipeList"
......@@ -202,6 +203,10 @@ export default {
MyFileUpload,
},
methods: {
selectChange(e){
const arr = this.pipeList.filter(item=>item.pipeId == e);
this.form.pipeName = arr[0].pipeName;
},
show() {
this.dialogVisible = true;
},
......
......@@ -14,6 +14,7 @@
placeholder="请选择所属管道"
filterable
style="width: 100%"
@change="selectChange"
>
<el-option
v-for="item in pipeList"
......@@ -201,6 +202,10 @@ export default {
MyFileUpload,
},
methods: {
selectChange(e){
const arr = this.pipeList.filter(item=>item.pipeId == e);
this.form.pipeName = arr[0].pipeName;
},
show() {
this.dialogVisible = true;
//this.getPipeInfo();
......
......@@ -14,6 +14,7 @@
placeholder="请选择所属管道"
filterable
style="width: 100%"
@change="selectChange"
>
<el-option
v-for="item in pipeList"
......@@ -199,6 +200,10 @@ export default {
MyFileUpload,
},
methods: {
selectChange(e){
const arr = this.pipeList.filter(item=>item.pipeId == e);
this.form.pipeName = arr[0].pipeName;
},
show() {
this.dialogVisible = true;
},
......
<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;
border-radius: 4px;
box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
background: rgba(7, 29, 51, 0.9);
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;
......
<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;
}
}
}
......
......@@ -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;
......
......@@ -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;
// 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;
}
}
}
......
......@@ -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;
}
}
}
......
<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 {
......
......@@ -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,
}));
},
......
......@@ -54,6 +54,7 @@ class gaodeMap {
// labelzIndex: 110,
pitch: 8,
zoom: 9,
mapStyle: "amap://styles/1c84d2203793b0f622df2cda53db1afd"
// mapStyle: 'amap://styles/darkblue',
// mapStyle: 'amap://styles/3b679a15f448a4740ba2ff7524e1a4ae',
});
......@@ -77,7 +78,7 @@ class gaodeMap {
this.createNewLine();
console.log("map点击事件新建");
})
.catch(() => { });
.catch(() => {});
}
// console.log("抬起来了");
});
......@@ -116,7 +117,7 @@ class gaodeMap {
let options = this.myMap.getStatus();
options.scrollWheel = true;
this.myMap.setStatus(options);
console.log("飞行结束")
console.log("飞行结束");
});
this.districtBoundaries(latlng);
......@@ -124,6 +125,21 @@ class gaodeMap {
panTo(lnglat) {
this.myMap.panTo(lnglat);
}
changeMap(bool) {
// 卫星图
if (!bool) {
if (this.satellite) return;
this.satellite = new AMap.TileLayer.Satellite();
this.myMap.addLayer(this.satellite);
} else {
if (this.satellite) {
this.myMap.removeLayer(this.satellite);
this.satellite = null;
}
}
}
/**
* 获取map
* @returns {AMap.Map}
......@@ -157,9 +173,8 @@ class gaodeMap {
level: "city"
};
let district = new AMap.DistrictSearch(opts);
district.search(that.center, function (status, result) {
district.search(that.center, function(status, result) {
if (status == "complete") {
let defaultCenter = [];
defaultCenter.push(result.districtList[0].center.lng);
defaultCenter.push(result.districtList[0].center.lat);
......@@ -169,7 +184,7 @@ class gaodeMap {
map.setCenter(defaultCenter);
}
console.log("defaultCenter", defaultCenter)
console.log("defaultCenter", defaultCenter);
let bounds = result.districtList[0].boundaries;
for (let i = 0; i < bounds.length; i += 1) {
......@@ -199,12 +214,12 @@ class gaodeMap {
offset: new AMap.Pixel(24, -38),
anchor: "left-top"
});
infoWindow.on("mouseover", function () {
infoWindow.on("mouseover", function() {
let options = map.getStatus();
options.scrollWheel = false;
map.setStatus(options);
});
infoWindow.on("mouseout", function () {
infoWindow.on("mouseout", function() {
let options = map.getStatus();
options.scrollWheel = true;
map.setStatus(options);
......@@ -234,7 +249,7 @@ class gaodeMap {
editWindow.obj = marker;
editWindow.gaoMap = that;
editWindow.map = map;
marker.on("click", function (e) {
marker.on("click", function(e) {
if ("edit" == that.mapOperateType) {
editWindow.form = e.target.getExtData();
editWindow.show();
......@@ -296,19 +311,19 @@ class gaodeMap {
infoWindow.open(map, e.target.getPosition());
}*/
});
marker.on("dragend", function (e) {
marker.on("dragend", function(e) {
editWindow.form.longitude = e.lnglat.lng;
editWindow.form.latitude = e.lnglat.lat;
});
} else {
marker.on("mouseover", function () {
marker.on("mouseover", function() {
marker.setLabel({
offset: new AMap.Pixel(0, -10), //设置文本标注偏移量
content: "<div class='info'>" + data.deviceName + "</div>", //设置文本标注内容
direction: "top" //设置文本标注方位
});
});
marker.on("mouseout", function () {
marker.on("mouseout", function() {
marker.setLabel({
content: null
});
......@@ -447,7 +462,7 @@ class gaodeMap {
case DEVICE_TYPE.REGEULATORBOX: {
let icon = new AMap.Icon({
//size: new AMap.Size(51, 23),
image: require("../assets/oldImages/tiaoyaxiang.png")
image: require("../assets/images/tiaoyaxiang.png")
});
marker.setIcon(icon);
break;
......@@ -455,7 +470,7 @@ class gaodeMap {
case DEVICE_TYPE.VALUEWELL: {
let icon = new AMap.Icon({
//size: new AMap.Size(51, 23),
image: require("../assets/oldImages/famenjing.png")
image: require("../assets/images/famenjing.png")
});
marker.setIcon(icon);
break;
......@@ -463,7 +478,7 @@ class gaodeMap {
case DEVICE_TYPE.FLOWMETER: {
let icon = new AMap.Icon({
//size: new AMap.Size(51, 23),
image: require("../assets/oldImages/liuliangji.png")
image: require("../assets/images/liuliangji.png")
});
marker.setIcon(icon);
break;
......@@ -487,7 +502,7 @@ class gaodeMap {
case DEVICE_TYPE.PRESSUREGAGE: {
let icon = new AMap.Icon({
//size: new AMap.Size(51, 23),
image: require("../assets/oldImages/yalibiao.png")
image: require("../assets/images/yalibiao.png")
});
marker.setIcon(icon);
break;
......@@ -952,14 +967,14 @@ class gaodeMap {
this.overlays = [];
let that = this;
this.markerOverlays = [];
this.mouseTool.on("draw", function (e) {
this.mouseTool.on("draw", function(e) {
if (e.obj.getExtData().type != "newLine") {
map.remove(that.markerOverlays);
const device = that.createInfowindow("新增");
device.map = map;
device.obj = e.obj;
device.gaoMap = that;
e.obj.on("click", function (aa) {
e.obj.on("click", function(aa) {
let postion = aa.target._position;
//兼容拖拽后单击事件,拖拽后点击事件返回位置为数组
if (postion instanceof Array) {
......@@ -971,11 +986,11 @@ class gaodeMap {
}
device.show();
});
e.obj.on("mouseover", function () {
e.obj.on("mouseover", function() {
that.mouseTool.close();
});
e.obj.on("mouseout", function () {
e.obj.on("mouseout", function() {
that.draw(that.deviceType);
});
......@@ -1086,7 +1101,7 @@ class gaodeMap {
"AMap.MapType",
"AMap.Geolocation"
],
function () {
function() {
// 在图面添加工具条控件,工具条控件集成了缩放、平移、定位等功能按钮在内的组合控件
//map.addControl(new AMap.ToolBar());
......@@ -1109,7 +1124,7 @@ class gaodeMap {
searchTips(inputId) {
let that = this;
AMap.plugin(["AMap.AutoComplete", "AMap.PlaceSearch"], function () {
AMap.plugin(["AMap.AutoComplete", "AMap.PlaceSearch"], function() {
//输入提示
// var autoOptions = {
// input: inputId
......@@ -1170,7 +1185,10 @@ class gaodeMap {
const path1 = eval(coordinates)[0];
const path2 = eval(coordinates)[1];
// map.setFitView();
const path3 = [(Number(path1[0])+Number(path2[0]) )/2 ,(Number(path1[1])+Number(path2[1]) )/2];
const path3 = [
(Number(path1[0]) + Number(path2[0])) / 2,
(Number(path1[1]) + Number(path2[1])) / 2
];
map.setCenter(path3, false);
// const lntlat = eval(coordinates)[0];
......
......@@ -15,6 +15,7 @@ import workerManInfowindow from "../components/PopWindowGis/workerManInfowindow.
import workerManView from "../components/PopWindowGis/workerManView.vue";
import { getArray } from "@/utils/gassafety.js";
import { lineColor } from "./mapCommon.js";
import { delPipe } from "@/api/device/pipe.js";
import vue from "../main";
import { Card } from "element-ui";
......@@ -32,6 +33,7 @@ export const DEVICE_TYPE = {
SMALLINSPECTOR: "workPoint",
TROUBLE: "trouble"
};
class gaodeMap {
// 所有线的数组
polyLines = [];
......@@ -80,7 +82,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) {
......@@ -112,6 +114,8 @@ class gaodeMap {
this.myMap.on("zoomstart", () => {
// console.log("缩放开始")
this.closeInfoWindow();
this.polyLinesColorClear()
});
this.myMap.on("moveend", () => {
if (this.handleInfoWindowOpenFunc) {
......@@ -139,13 +143,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 +288,7 @@ class gaodeMap {
marker.on("mouseover", this.wokerManOpen);
marker.on("mouseout", e => {
e.target.infoWindow.close();
this.domAllShow();
});
marker.on("mousedown", e => {
......@@ -719,7 +724,7 @@ class gaodeMap {
map: map,
path: lineArr,
showDir: true,
strokeColor: "#28F", //线颜色
strokeColor: "#2EE7E7", //线颜色
// strokeOpacity: 1, //线透明度
strokeWeight: 6 //线宽
// strokeStyle: "solid" //线样式
......@@ -804,14 +809,15 @@ class gaodeMap {
//console.log("包装的数组", arr);
for (let i = 0; i < arr.length; i++) {
const item = arr[i];
let { coordinates } = item;
let { coordinates, pipePressure } = item;
console.log(pipePressure);
// //console.log("coordinates",coordinates)
// let path = coordinates ? getArray(coordinates) :[];
// 字符串转二维数组
let path = coordinates ? eval(coordinates) : [];
let polyline = new AMap.Polyline({
path,
strokeColor: "#2EE7E7",
strokeColor: lineColor[pipePressure],
strokeWeight: 4,
strokeOpacity: 0.9,
zIndex: 50,
......@@ -833,6 +839,8 @@ class gaodeMap {
//添加事件
polyline.on("mousedown", this.polylineMouseOver);
polyline.on("mouseover", () => {
// lineColor
polyline.setOptions({ strokeColor: "#F7FE38" });
});
polyline.on("mouseout", e => {
......@@ -840,7 +848,7 @@ class gaodeMap {
if (polyline.getExtData().lineData.alarmState == 1) {
polyline.setOptions({ strokeColor: "#ff0000" });
} else {
polyline.setOptions({ strokeColor: "#2EE7E7" });
polyline.setOptions({ strokeColor: lineColor[pipePressure] });
}
// infoWindow.close();
});
......@@ -934,7 +942,8 @@ class gaodeMap {
if (item.getExtData().lineData.alarmState == 1) {
item.setOptions({ strokeColor: "#ff0000" });
} else {
item.setOptions({ strokeColor: "#2EE7E7" });
const { pipePressure } = item.getExtData().lineData;
item.setOptions({ strokeColor: lineColor[pipePressure] });
}
}
});
......@@ -969,8 +978,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 +1001,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);
......
// 管道压力(1低压,2中压,3次高压,4高压) 颜色不同
export const lineColor ={
"1":"#2EE7E7",
"2":"#FFFFFF",
"3":"#18FF0F",
"4":"#DE67FA"
}
\ No newline at end of file
......@@ -103,6 +103,11 @@
:class="{ back: backFlag, opacity: drawerOpacity }"
@click.stop="drawerdrawer"
>
<div class="mapChange">
<div :class="{ active: !mapStyle }" @click="mapChange(1)">卫星地图</div>
<div :class="{ active: mapStyle }" @click="mapChange(2)">全景地图</div>
</div>
<div class="switch" @click="backFlag = !backFlag">
<img v-if="!backFlag" src="@/assets/images/l.png" alt="" />
<img v-else src="@/assets/images/r.png" alt="" />
......@@ -213,7 +218,7 @@
</template>
<!-- 无数据 -->
<template v-else>
<div style="padding-left: 5px">暂无数据</div>
<div style="padding-left: 5px; color: #fff">暂无数据</div>
</template>
</div>
</el-collapse-transition>
......@@ -240,6 +245,8 @@ export default {
targetNum: 0,
backFlag: true,
// 卫星与全景地图的切换
mapStyle: true,
// 抽屉内的滚动条的高需要赋值赋值
boxHeight: "",
boxWidth: "",
......@@ -307,7 +314,7 @@ export default {
},
methods: {
onResize() {
this.boxHeight = document.body.clientHeight - 81;
this.boxHeight = document.body.clientHeight - 80;
this.boxWidth = document.body.clientWidth - 100;
},
async initMap() {
......@@ -371,6 +378,15 @@ export default {
this.gaoMap.markerShow(4, false);
}
},
// 卫星地图与全景地图的切换
mapChange(num) {
if (num == 1) {
this.mapStyle = false;
} else {
this.mapStyle = true;
}
this.gaoMap.changeMap(this.mapStyle);
},
addDevice() {
if (this.iconClass == "icon-create") {
this.targetNum = this.targetNum != 1 ? 1 : 0;
......@@ -1116,7 +1132,9 @@ input[type="radio"] {
left: 100px;
width: 348px;
transition: 0.2s linear;
background: #fff;
// background: #fff;
background: rgba(6, 29, 51, 0.8);
// background: red;
opacity: 0;
&.opacity {
......@@ -1125,6 +1143,24 @@ input[type="radio"] {
&.back {
left: -248px;
}
.mapChange {
right: -178px;
top: 10px;
color: #fff;
position: absolute;
display: flex;
div {
padding: 4px 8px;
border: 1px solid #fff;
margin-left: 8px;
cursor: pointer;
&.active,
&:hover {
background-color: #053b6a;
color: #31eaea;
}
}
}
.scroll {
// height: 100%;
position: relative;
......@@ -1188,7 +1224,9 @@ input[type="radio"] {
// border-right: 1px solid #cccccc;
box-sizing: border-box;
// padding-left: 5px;
color: #053b6a;
// color: #053b6a;
color: #fff;
font-weight: 600;
}
}
......@@ -1200,9 +1238,14 @@ input[type="radio"] {
color: #1d1d1d;
&:hover {
box-sizing: border-box;
border-bottom: 1px solid #053b6a;
color: #053b6a;
// border-bottom: 1px solid #053b6a;
border-bottom: 1px solid #7fc0f8;
// color: #053b6a;
font-weight: 600;
> div {
color: #7fc0f8;
}
}
&.topActive {
// border-top: 1px solid #cccccc;
......@@ -1219,6 +1262,8 @@ input[type="radio"] {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: #fff;
// border-right: 1px solid #cccccc;
}
}
......@@ -1242,14 +1287,16 @@ input[type="radio"] {
height: 48px;
padding-left: 20px;
display: flex;
background-color: #ffffff;
// background-color: #ffffff;
box-sizing: border-box;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
border-bottom: 1px solid rgba(0, 0, 0, 0.5);
cursor: pointer;
position: relative;
// box-sizing: border-box;
&.firstbox {
border-top: 1px solid rgba(0, 0, 0, 0.1);
// border-top: 1px solid rgba(0, 0, 0, 0.1);
border-top: 1px solid rgba(5, 59, 106, 0);
// box-sizing: border-box;
&:hover {
border-top: 1px solid rgba(5, 59, 106, 0);
......@@ -1257,15 +1304,24 @@ input[type="radio"] {
}
&:hover {
box-sizing: border-box;
background-color: rgba(5, 59, 106, 0.1);
// background-color: rgba(5, 59, 106, 0.1);
background-color: #053b6a;
border-bottom: none !important;
.upPic {
color: #31eaea;
}
.left,
.right {
color: #31eaea !important;
}
}
.upPic {
display: inline-block;
margin-left: 40px;
line-height: 48px;
font-size: 16px;
color: #053b6a;
// color: #053b6a;
color: #fff;
}
> i.ju {
position: absolute;
......@@ -1289,6 +1345,7 @@ input[type="radio"] {
color: #fff;
}
> i.arrow-right {
color: #fff !important;
position: absolute;
right: 32px;
top: 16px;
......@@ -1299,16 +1356,21 @@ input[type="radio"] {
}
&.active {
// background-color: #053b6a;
.left,
.right {
color: #053b6a;
}
// .left,
// .right {
// color: #053b6a;
// }
// > i {
// color: #053b6a;
// }
> i {
color: #053b6a;
color: #31eaea;
font-weight: 600;
}
}
.left {
color: #053b6a;
// color: #053b6a;
color: #fff;
line-height: 48px;
margin-left: 28px;
.iconfont {
......@@ -1316,7 +1378,8 @@ input[type="radio"] {
}
}
.right {
color: #1d1d1d;
// color: #1d1d1d;
color: #fff;
line-height: 48px;
font-size: 16px;
margin-left: 4px;
......@@ -1337,6 +1400,8 @@ input[type="radio"] {
padding-bottom: 2px;
.btn {
border-radius: 50%;
background: none;
// width: 14px;
// height: 14px;
padding: 2px;
......@@ -1345,6 +1410,7 @@ input[type="radio"] {
display: inline-block;
font-size: 14px;
padding: 0px 5px;
color: #fff;
}
}
}
......@@ -1353,9 +1419,9 @@ input[type="radio"] {
.switch {
position: absolute;
font-size: 30px;
right: -27px;
right: -30px;
top: 50%;
margin-top: -30px;
margin-top: -123px;
width: 40px;
border-radius: 40%;
overflow: hidden;
......
<template>
<div class="app-container detail" style="background-color: rgb(238, 241, 245);">
<div class="app-container detail inspectiondetail" style="background-color: rgb(238, 241, 245);">
<!-- 巡检计划信息 -->
<div style="padding-top: 10px;background: #fff;height: 100%;">
<el-row>
......@@ -416,7 +416,7 @@
addBasicsInfo(this.form2).then(response => {
this.msgSuccess("生成工单成功");
this.open2 = false;
this.getList();
location.reload();
});
}
});
......
......@@ -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;
}
......
......@@ -73,7 +73,10 @@
/>
<Bottom
v-show="bottomDataShow"
:class="{ classShow: !bottomDataShow }"
:class="{
classShow: !bottomDataShow,
bottomMarginRight: bottomMarginRight,
}"
ref="Bottom"
:list="rightBototmData"
/>
......@@ -100,6 +103,14 @@
<div :class="{ active: !mapStyle }" @click="mapChange(1)">卫星地图</div>
<div :class="{ active: mapStyle }" @click="mapChange(2)">全景地图</div>
</div>
<!-- 管道压力 -->
<div class="pipePressure">
<!-- <div>管道压力</div> -->
<div class="hasColorBox" :style="{color:lineColor[`1`]}">低压</div>
<div class="hasColorBox" :style="{color:lineColor[`2`]}">中压</div>
<div class="hasColorBox" :style="{color:lineColor[`3`]}">次高</div>
<div class="hasColorBox" :style="{color:lineColor[`4`]}">高压</div>
</div>
<div class="switch" @click="backFlag = !backFlag">
<img v-if="!backFlag" src="@/assets/images/l.png" alt="" />
<img v-else src="@/assets/images/r.png" alt="" />
......@@ -265,7 +276,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>
......@@ -292,6 +303,7 @@ import Right from "./components/Right.vue";
import CreateWork from "./components/CreateWork.vue";
import CreateWorkTrouble from "./components/CreateWorkTrouble.vue";
import { getInspectorLocations } from "@/api/inspectorLocation/location";
import { lineColor } from "@/utils/mapCommon.js";
export default {
components: {
......@@ -302,6 +314,7 @@ export default {
},
data() {
return {
lineColor,
gaoMap: null,
deviceType: false,
value: "",
......@@ -389,6 +402,8 @@ export default {
rightBototmData: [],
bottomDataShow: true,
rightDataShow: true,
// 如果右边与下面重叠了,bottom要往左移
bottomMarginRight: false,
// 是否显示生成工单弹框
createWorkOpen: false,
//隐患工单
......@@ -419,6 +434,7 @@ export default {
window.removeEventListener("resize", this.onResize);
window.addEventListener("resize", this.onResize);
this.initMap();
// });
},
watch: {
......@@ -433,7 +449,21 @@ 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 +822,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 +907,7 @@ export default {
}
},
panToo(iten, item) {
this.domAllShow();
// 如果没打对勾,就啥也不干
if (!this.leftBarNum.includes(item.value)) return;
// 点击的时候允许infowindow消失
......@@ -1029,6 +1062,7 @@ export default {
} else {
this.arrowRightNum.push(item.value);
}
this.domAllShow();
},
// 管道储存
......@@ -1147,7 +1181,7 @@ export default {
path: [item.longitude, item.latitude],
no: index,
userId: item.userId,
userName: item.userName,
userName: item.nickName,
userPhone: item.phonenumber,
};
});
......@@ -1381,6 +1415,10 @@ export default {
this.gaoMap.lineFlag = false;
// this.gaoMap.createNewLine();
},
domAllShow() {
this.bottomDataShow = true;
this.rightDataShow = true;
},
refreshMap() {
// this.changeBtnDataClear();
this.keyWord = "";
......@@ -1452,8 +1490,8 @@ export default {
drawerClick() {
console.log("drawerClick");
this.gaoMap.polyLinesColorClear();
this.gaoMap.closeInfoWindow();
this.domAllShow();
},
},
......@@ -1482,6 +1520,10 @@ export default {
bottom: 0;
width: 100%;
}
// 如果right与bottom 重叠,则bottom左移动
.bottomMarginRight {
right: 280px;
}
// .btn-wrapper {
// position: fixed;
// right: 32px;
......@@ -1655,6 +1697,20 @@ input[type="radio"] {
}
}
}
.pipePressure {
position: absolute;
color: #fff;
right: -52px;
top: 50px;
padding:1px;
// background: rgba(6, 29, 51, 0.8);
.hasColorBox{
border:1px solid #053b6a;
padding:2px 5px;
margin-bottom:5px;
}
}
.scroll {
// height: 100%;
position: relative;
......@@ -1800,7 +1856,9 @@ input[type="radio"] {
position: relative;
// box-sizing: border-box;
&.firstbox {
border-top: 1px solid rgba(0, 0, 0, 0.5);
// border-top: 1px solid rgba(0, 0, 0, 0.5);
border-top: 1px solid rgba(5, 59, 106, 0);
// box-sizing: border-box;
&:hover {
border-top: 1px solid rgba(5, 59, 106, 0);
......
......@@ -552,7 +552,7 @@ export default {
addBasicsInfo(this.form2).then(response => {
this.msgSuccess("生成工单成功");
this.open2 = false;
this.getList();
location.reload();
});
}
});
......
......@@ -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