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 @@ ...@@ -387,3 +387,58 @@
height: 140px !important; 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 @@ ...@@ -14,6 +14,7 @@
placeholder="请选择所属管道" placeholder="请选择所属管道"
filterable filterable
style="width: 100%" style="width: 100%"
@change="selectChange"
> >
<el-option <el-option
v-for="item in pipeList" v-for="item in pipeList"
...@@ -201,6 +202,10 @@ export default { ...@@ -201,6 +202,10 @@ export default {
MyFileUpload, MyFileUpload,
}, },
methods: { methods: {
selectChange(e){
const arr = this.pipeList.filter(item=>item.pipeId == e);
this.form.pipeName = arr[0].pipeName;
},
show() { show() {
this.dialogVisible = true; this.dialogVisible = true;
}, },
...@@ -211,7 +216,7 @@ export default { ...@@ -211,7 +216,7 @@ export default {
this.form.iconUrl = res.url; this.form.iconUrl = res.url;
}, },
submitForm() { submitForm() {
console.log(this.form); // console.log("this.form",this.form);
this.$refs["form"].validate((valid) => { this.$refs["form"].validate((valid) => {
if (valid) { if (valid) {
if (this.form.deviceId != null) { if (this.form.deviceId != null) {
......
<template> <template>
<div class="wrapper"> <div class="wrapper">
<div class="top display-default"> <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"> <div class="right text">
<img @click="close" src="../../assets/images/closeBtn.png" alt="" /> <img @click="close" src="../../assets/images/closeBtn.png" alt="" />
</div> </div>
...@@ -132,27 +132,30 @@ export default { ...@@ -132,27 +132,30 @@ export default {
.wrapper { .wrapper {
width: 406px; width: 406px;
// height: 488px; // height: 488px;
background: #fff; // background: #fff;
border-radius: 4px; border-radius: 4px;
box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16); box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
background: rgba(7, 29, 51, 0.9);
color: #fff;
// overflow: hidden; // 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 { &:before {
content: ""; content: "";
position: absolute; position: absolute;
left: -20px; left: -20px;
top: 5px; top: 5px;
width: 0px; z-index: -1;
height: 0px; width: 33px;
/* border: 20px solid red; */ height: 33px;
border-top: 15px solid transparent; background-image: url(../../assets/images/blueLeftTriangle.png);
border-bottom: 15px solid transparent;
/* border-left: 50px solid greenyellow; */
border-right: 30px solid #053b6a;
} }
.top {
width: 100%;
height: 51px;
background-color: #053b6a;
.text { .text {
font-weight: 600; font-weight: 600;
font-size: 16px; font-size: 16px;
...@@ -187,7 +190,7 @@ export default { ...@@ -187,7 +190,7 @@ export default {
.eq-text { .eq-text {
font-size: 14px; font-size: 14px;
font-weight: 400; font-weight: 400;
color: #1d1d1d; color: #fff;
opacity: 1; opacity: 1;
& > span { & > span {
vertical-align: top; vertical-align: top;
......
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
<div class="wrapper"> <div class="wrapper">
<span class="dot-left"></span> <span class="dot-left"></span>
<div class="top display-default"> <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"> <div class="right text">
<img <img
src="../../assets/images/closeBtn.png" src="../../assets/images/closeBtn.png"
...@@ -51,8 +51,8 @@ ...@@ -51,8 +51,8 @@
</el-col> </el-col>
<div> <div>
<span>管道所在地址:</span> <span>设备所在地址:</span>
<span>{{ data.pipeAddr }}</span> <span>{{ data.deviceAddr }}</span>
</div> </div>
<div> <div>
<span>备注信息:</span> <span>备注信息:</span>
...@@ -88,26 +88,28 @@ export default { ...@@ -88,26 +88,28 @@ export default {
.wrapper { .wrapper {
width: 406px; width: 406px;
// height: 488px; // height: 488px;
background: #fff;
border-radius: 4px; border-radius: 4px;
box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16); box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
// background: #fff;
// overflow: hidden; // overflow: hidden;
background: rgba(7, 29, 51, 0.9);
color: #fff;
.top { .top {
width: 100%; width: 100%;
height: 51px; height: 51px;
background-color: #053b6a; background-image: url(../../assets/images/blueTopBg.png);
background-size: 100% 100%;
background-position: center;
color: #fff;
&:before { &:before {
content: ""; content: "";
position: absolute; position: absolute;
left: -20px; left: -20px;
top: 5px; top: 5px;
width: 0px; z-index: -1;
height: 0px; width: 33px;
/* border: 20px solid red; */ height: 33px;
border-top: 15px solid transparent; background-image: url(../../assets/images/blueLeftTriangle.png);
border-bottom: 15px solid transparent;
/* border-left: 50px solid greenyellow; */
border-right: 30px solid #053b6a;
} }
.text { .text {
font-weight: 600; font-weight: 600;
...@@ -143,7 +145,7 @@ export default { ...@@ -143,7 +145,7 @@ export default {
.eq-text { .eq-text {
font-size: 14px; font-size: 14px;
font-weight: 400; font-weight: 400;
color: #1d1d1d; color: #fff;
opacity: 1; opacity: 1;
& > span { & > span {
vertical-align: top; vertical-align: top;
......
...@@ -349,7 +349,6 @@ export default { ...@@ -349,7 +349,6 @@ export default {
// 图片列表移除 // 图片列表移除
listRemove(e) { listRemove(e) {
this.editForm.iconUrl = ""; this.editForm.iconUrl = "";
this.fileArr = []; this.fileArr = [];
}, },
}, },
......
...@@ -14,6 +14,7 @@ ...@@ -14,6 +14,7 @@
placeholder="请选择所属管道" placeholder="请选择所属管道"
filterable filterable
style="width: 100%" style="width: 100%"
@change="selectChange"
> >
<el-option <el-option
v-for="item in pipeList" v-for="item in pipeList"
...@@ -202,6 +203,10 @@ export default { ...@@ -202,6 +203,10 @@ export default {
MyFileUpload, MyFileUpload,
}, },
methods: { methods: {
selectChange(e){
const arr = this.pipeList.filter(item=>item.pipeId == e);
this.form.pipeName = arr[0].pipeName;
},
show() { show() {
this.dialogVisible = true; this.dialogVisible = true;
}, },
......
...@@ -14,6 +14,7 @@ ...@@ -14,6 +14,7 @@
placeholder="请选择所属管道" placeholder="请选择所属管道"
filterable filterable
style="width: 100%" style="width: 100%"
@change="selectChange"
> >
<el-option <el-option
v-for="item in pipeList" v-for="item in pipeList"
...@@ -201,6 +202,10 @@ export default { ...@@ -201,6 +202,10 @@ export default {
MyFileUpload, MyFileUpload,
}, },
methods: { methods: {
selectChange(e){
const arr = this.pipeList.filter(item=>item.pipeId == e);
this.form.pipeName = arr[0].pipeName;
},
show() { show() {
this.dialogVisible = true; this.dialogVisible = true;
//this.getPipeInfo(); //this.getPipeInfo();
......
...@@ -14,6 +14,7 @@ ...@@ -14,6 +14,7 @@
placeholder="请选择所属管道" placeholder="请选择所属管道"
filterable filterable
style="width: 100%" style="width: 100%"
@change="selectChange"
> >
<el-option <el-option
v-for="item in pipeList" v-for="item in pipeList"
...@@ -199,6 +200,10 @@ export default { ...@@ -199,6 +200,10 @@ export default {
MyFileUpload, MyFileUpload,
}, },
methods: { methods: {
selectChange(e){
const arr = this.pipeList.filter(item=>item.pipeId == e);
this.form.pipeName = arr[0].pipeName;
},
show() { show() {
this.dialogVisible = true; this.dialogVisible = true;
}, },
......
<template> <template>
<div class="wrapper"> <div class="wrapper">
<div class="top display-default"> <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"> <div class="right text">
<img @click="close" src="../../assets/images/closeBtn.png" alt="" /> <img @click="close" src="../../assets/images/closeBtn.png" alt="" />
</div> </div>
...@@ -34,7 +34,6 @@ ...@@ -34,7 +34,6 @@
}}</span> }}</span>
</div> </div>
</div> </div>
<div class="pic"> <div class="pic">
<img @mousedown.stop="mousedown" :src="obj.iconUrl" alt="" /> <img @mousedown.stop="mousedown" :src="obj.iconUrl" alt="" />
<el-image <el-image
...@@ -129,7 +128,8 @@ export default { ...@@ -129,7 +128,8 @@ export default {
close() { close() {
this.obj.polyline.infoWindow.close(); this.obj.polyline.infoWindow.close();
// window底部的数据拦 // window底部的数据拦
this.obj.polyline.getExtData().class.view.bottomDataShow = true; this.obj.polyline.getExtData().class.view.domAllShow();
}, },
deviceMore() { deviceMore() {
console.log(this.obj.polyline.getExtData().lineData); console.log(this.obj.polyline.getExtData().lineData);
...@@ -151,27 +151,32 @@ export default { ...@@ -151,27 +151,32 @@ export default {
.wrapper { .wrapper {
width: 406px; width: 406px;
max-height: 430px; max-height: 430px;
background: #fff;
border-radius: 4px; border-radius: 4px;
box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16); box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
background: rgba(7, 29, 51, 0.9);
color: #fff;
// overflow: hidden; // overflow: hidden;
.top { .top {
width: 100%; width: 100%;
height: 51px; 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; position: relative;
&:before { &:before {
content: ""; content: "";
position: absolute; position: absolute;
left: -20px; left: -20px;
top: 5px; top: 5px;
width: 0px; z-index: -1;
height: 0px; width: 33px;
/* border: 20px solid red; */ height: 33px;
border-top: 15px solid transparent; background-image: url(../../assets/images/blueLeftTriangle.png);
border-bottom: 15px solid transparent;
/* border-left: 50px solid greenyellow; */
border-right: 30px solid #053b6a;
} }
.text { .text {
font-weight: 600; font-weight: 600;
...@@ -209,7 +214,8 @@ export default { ...@@ -209,7 +214,8 @@ export default {
.eq-text { .eq-text {
font-size: 14px; font-size: 14px;
font-weight: 400; font-weight: 400;
color: #1d1d1d; // color: #1d1d1d;
color: #fff;
opacity: 1; opacity: 1;
& > span { & > span {
vertical-align: top; vertical-align: top;
......
<template> <template>
<div class="wrapper"> <div class="wrapper">
<div class="top display-default"> <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"> <div class="right text">
<img @click="close" src="../../assets/images/closeBtn.png" alt="" /> <img @click="close" src="../../assets/images/closeBtn.png" alt="" />
</div> </div>
...@@ -200,7 +200,7 @@ export default { ...@@ -200,7 +200,7 @@ export default {
}, },
close() { close() {
this.obj.polyline.infoWindow.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 { ...@@ -210,26 +210,29 @@ export default {
.wrapper { .wrapper {
width: 406px; width: 406px;
max-height: 500px; max-height: 500px;
background: #fff; // background: #fff;
background: rgba(7, 29, 51, 0.9);
color: #fff;
border-radius: 4px; border-radius: 4px;
box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16); box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
// overflow: hidden; // overflow: hidden;
.top { .top {
width: 100%; width: 100%;
height: 51px; height: 51px;
background-color: #ff5a67; // background-color: #ff5a67;
background-image: url(../../assets/images/redTopBg.png);
background-size: 100% 100%;
background-position: center;
&:before { &:before {
content: ""; content: "";
position: absolute; position: absolute;
left: -20px; left: -20px;
top: 5px; top: 5px;
width: 0px; z-index: -1;
height: 0px; width: 33px;
/* border: 20px solid red; */ height: 33px;
border-top: 15px solid transparent; background-image: url(../../assets/images/redLeftTriangle.png);
border-bottom: 15px solid transparent;
/* border-left: 50px solid greenyellow; */
border-right: 30px solid #ff5a67;
} }
.text { .text {
font-weight: 600; font-weight: 600;
...@@ -239,6 +242,8 @@ export default { ...@@ -239,6 +242,8 @@ export default {
} }
.left { .left {
padding-left: 22px; padding-left: 22px;
width:100%;
overflow: hidden;
} }
.right { .right {
padding-right: 22px; padding-right: 22px;
...@@ -267,7 +272,7 @@ export default { ...@@ -267,7 +272,7 @@ export default {
.eq-text { .eq-text {
font-size: 14px; font-size: 14px;
font-weight: 400; font-weight: 400;
color: #1d1d1d; color: #fff;
opacity: 1; opacity: 1;
& > span { & > span {
vertical-align: top; vertical-align: top;
...@@ -300,6 +305,7 @@ export default { ...@@ -300,6 +305,7 @@ export default {
// padding-right: 22px; // padding-right: 22px;
// padding-bottom: 10px; // padding-bottom: 10px;
// padding-top: 16px; // padding-top: 16px;
box-sizing: border-box; box-sizing: border-box;
// border-bottom: 1px solid #e2e2e2; // border-bottom: 1px solid #e2e2e2;
& > div { & > div {
...@@ -337,7 +343,7 @@ export default { ...@@ -337,7 +343,7 @@ export default {
box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16); box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
width: 95px; width: 95px;
height: 33px; height: 33px;
border: none; // border: none;
} }
} }
} }
......
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
<div class="wrapper"> <div class="wrapper">
<span class="dot-left"></span> <span class="dot-left"></span>
<div class="top display-default"> <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"> <div class="right text">
<img src="../../assets/images/closeBtn.png" alt="" @click="close" /> <img src="../../assets/images/closeBtn.png" alt="" @click="close" />
</div> </div>
...@@ -97,7 +97,7 @@ export default { ...@@ -97,7 +97,7 @@ export default {
}, },
close() { close() {
this.map.clearInfoWindow(); this.map.clearInfoWindow();
this.data.class.view.bottomDataShow = true; this.data.class.view.domAllShow()
}, },
}, },
}; };
...@@ -107,26 +107,38 @@ export default { ...@@ -107,26 +107,38 @@ export default {
.wrapper { .wrapper {
width: 406px; width: 406px;
max-height: 430px; max-height: 430px;
background: #fff; // background: #fff;
border-radius: 4px; border-radius: 4px;
background: rgba(7, 29, 51, 0.9);
box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16); box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
color: #fff;
// overflow: hidden; // overflow: hidden;
.top { .top {
width: 100%; width: 100%;
height: 51px; height: 51px;
background-color: #053b6a; // background-color: #053b6a;
background-image: url(../../assets/images/blueTopBg.png);
background-size: 100% 100%;
background-position: center;
&:before { &: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: ""; content: "";
position: absolute; position: absolute;
left: -20px; left: -20px;
top: 5px; top: 5px;
width: 0px; z-index: -1;
height: 0px; width: 33px;
/* border: 20px solid red; */ height: 33px;
border-top: 15px solid transparent; background-image: url(../../assets/images/blueLeftTriangle.png);
border-bottom: 15px solid transparent;
/* border-left: 50px solid greenyellow; */
border-right: 30px solid #053b6a;
} }
.text { .text {
font-weight: 600; font-weight: 600;
...@@ -164,7 +176,8 @@ export default { ...@@ -164,7 +176,8 @@ export default {
.eq-text { .eq-text {
font-size: 14px; font-size: 14px;
font-weight: 400; font-weight: 400;
color: #1d1d1d; // color: #1d1d1d;
color: #fff;
opacity: 1; opacity: 1;
& > span { & > span {
vertical-align: top; vertical-align: top;
......
...@@ -2,13 +2,11 @@ ...@@ -2,13 +2,11 @@
<div class="wrapper"> <div class="wrapper">
<span class="dot-left"></span> <span class="dot-left"></span>
<div class="top display-default"> <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"> <div class="right text">
<img <img src="../../assets/images/closeBtn.png" alt="" @click="close" />
src="../../assets/images/closeBtn.png"
alt=""
@click="close"
/>
</div> </div>
</div> </div>
<!-- 设备信息 --> <!-- 设备信息 -->
...@@ -137,9 +135,9 @@ export default { ...@@ -137,9 +135,9 @@ export default {
type: "device", type: "device",
}); });
}, },
close(){ close() {
this.map.clearInfoWindow(); this.map.clearInfoWindow();
this.data.class.view.bottomDataShow = true; this.data.class.view.domAllShow();
}, },
// CreateWorkCallBack(e) { // CreateWorkCallBack(e) {
// // console.log("生成工单后传过来的参数", e); // // console.log("生成工单后传过来的参数", e);
...@@ -177,31 +175,32 @@ export default { ...@@ -177,31 +175,32 @@ export default {
}, },
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.wrapper { .wrapper {
width: 406px; width: 406px;
max-height: 500px; max-height: 500px;
background: #fff; // background: #fff;
background: rgba(7, 29, 51, 0.9);
color: #fff;
border-radius: 4px; border-radius: 4px;
box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16); box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
// overflow: hidden; // overflow: hidden;
.top { .top {
width: 100%; width: 100%;
height: 51px; height: 51px;
background-color: #ff5a67; // background-color: #ff5a67;
background-image: url(../../assets/images/redTopBg.png);
background-size: 100% 100%;
background-position: center;
&:before { &:before {
content: ""; content: "";
position: absolute; position: absolute;
left: -20px; left: -20px;
top: 5px; top: 5px;
width: 0px; z-index: -1;
height: 0px; width: 33px;
/* border: 20px solid red; */ height: 33px;
border-top: 15px solid transparent; background-image: url(../../assets/images/redLeftTriangle.png);
border-bottom: 15px solid transparent;
/* border-left: 50px solid greenyellow; */
border-right: 30px solid #ff5a67;
} }
.text { .text {
font-weight: 600; font-weight: 600;
...@@ -239,7 +238,7 @@ export default { ...@@ -239,7 +238,7 @@ export default {
.eq-text { .eq-text {
font-size: 14px; font-size: 14px;
font-weight: 400; font-weight: 400;
color: #1d1d1d; color: #fff;
opacity: 1; opacity: 1;
& > span { & > span {
vertical-align: top; vertical-align: top;
...@@ -309,7 +308,7 @@ export default { ...@@ -309,7 +308,7 @@ export default {
box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16); box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
width: 95px; width: 95px;
height: 33px; height: 33px;
border: none; // border: none;
} }
} }
} }
......
...@@ -2,7 +2,9 @@ ...@@ -2,7 +2,9 @@
<div class="wrapper"> <div class="wrapper">
<span class="dot-left"></span> <span class="dot-left"></span>
<div class="top display-default"> <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"> <div class="right text">
<img src="../../assets/images/closeBtn.png" alt="" @click="close" /> <img src="../../assets/images/closeBtn.png" alt="" @click="close" />
</div> </div>
...@@ -154,7 +156,7 @@ export default { ...@@ -154,7 +156,7 @@ export default {
// }, // },
close() { close() {
this.map.clearInfoWindow(); this.map.clearInfoWindow();
this.data.class.view.bottomDataShow = true; this.data.class.view.domAllShow();
}, },
deviceMore() { deviceMore() {
this.data.class.view.$router.push({ this.data.class.view.$router.push({
...@@ -185,26 +187,29 @@ export default { ...@@ -185,26 +187,29 @@ export default {
.wrapper { .wrapper {
width: 406px; width: 406px;
max-height: 500px; max-height: 500px;
background: #fff; // background: #fff;
background: rgba(7, 29, 51, 0.9);
border-radius: 4px; border-radius: 4px;
box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16); box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
// overflow: hidden; // overflow: hidden;
.top { .top {
width: 100%; width: 100%;
height: 51px; 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 { &:before {
content: ""; content: "";
position: absolute; position: absolute;
left: -20px; left: -20px;
top: 5px; top: 5px;
width: 0px; z-index: -1;
height: 0px; width: 33px;
/* border: 20px solid red; */ height: 33px;
border-top: 15px solid transparent; background-image: url(../../assets/images/yellowLeftTriangle.png);
border-bottom: 15px solid transparent;
/* border-left: 50px solid greenyellow; */
border-right: 30px solid #e6a23c;
} }
.text { .text {
font-weight: 600; font-weight: 600;
...@@ -242,7 +247,7 @@ export default { ...@@ -242,7 +247,7 @@ export default {
.eq-text { .eq-text {
font-size: 14px; font-size: 14px;
font-weight: 400; font-weight: 400;
color: #1d1d1d; color: #fff;
opacity: 1; opacity: 1;
& > span { & > span {
vertical-align: top; vertical-align: top;
...@@ -272,6 +277,7 @@ export default { ...@@ -272,6 +277,7 @@ export default {
width: 100%; width: 100%;
max-height: 119px; max-height: 119px;
padding-left: 22px; padding-left: 22px;
color: #fff;
// padding-right: 22px; // padding-right: 22px;
// padding-bottom: 10px; // padding-bottom: 10px;
// padding-top: 16px; // padding-top: 16px;
...@@ -312,7 +318,7 @@ export default { ...@@ -312,7 +318,7 @@ export default {
box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16); box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
width: 95px; width: 95px;
height: 33px; height: 33px;
border: none; // border: none;
} }
} }
} }
......
<template> <template>
<div class="wrapper"> <div class="wrapper">
<div class="content"> <div class="content">
<span class="left">姓名: {{ data.userName }}</span> <span class="left">姓名: {{ data.nickName }}</span>
<span class="right">时间: {{ data.createTime }}</span> <span class="right">时间: {{ data.createTime }}</span>
</div> </div>
...@@ -26,7 +26,9 @@ export default { ...@@ -26,7 +26,9 @@ export default {
.wrapper { .wrapper {
// width: 166px; // width: 166px;
height: 54px; height: 54px;
background: #0d4f88; // background: #0d4f88;
background: rgba(7, 29, 51, 0.9);
font-size: 14px; font-size: 14px;
color: #fff; color: #fff;
box-sizing: border-box; box-sizing: border-box;
...@@ -45,7 +47,9 @@ export default { ...@@ -45,7 +47,9 @@ export default {
border-top: 15px solid transparent; border-top: 15px solid transparent;
border-bottom: 15px solid transparent; border-bottom: 15px solid transparent;
/* border-left: 50px solid greenyellow; */ /* 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; z-index: -1;
} }
.content { .content {
......
...@@ -117,7 +117,7 @@ export default { ...@@ -117,7 +117,7 @@ export default {
created() { created() {
this.formData.userId = this.userId; this.formData.userId = this.userId;
this.workerManArr = this.gaodeMap.workerManArr.map((item) => ({ this.workerManArr = this.gaodeMap.workerManArr.map((item) => ({
label: item.userName, label: item.nickName,
value: item.userId, value: item.userId,
})); }));
}, },
......
...@@ -54,6 +54,7 @@ class gaodeMap { ...@@ -54,6 +54,7 @@ class gaodeMap {
// labelzIndex: 110, // labelzIndex: 110,
pitch: 8, pitch: 8,
zoom: 9, zoom: 9,
mapStyle: "amap://styles/1c84d2203793b0f622df2cda53db1afd"
// mapStyle: 'amap://styles/darkblue', // mapStyle: 'amap://styles/darkblue',
// mapStyle: 'amap://styles/3b679a15f448a4740ba2ff7524e1a4ae', // mapStyle: 'amap://styles/3b679a15f448a4740ba2ff7524e1a4ae',
}); });
...@@ -77,7 +78,7 @@ class gaodeMap { ...@@ -77,7 +78,7 @@ class gaodeMap {
this.createNewLine(); this.createNewLine();
console.log("map点击事件新建"); console.log("map点击事件新建");
}) })
.catch(() => { }); .catch(() => {});
} }
// console.log("抬起来了"); // console.log("抬起来了");
}); });
...@@ -116,7 +117,7 @@ class gaodeMap { ...@@ -116,7 +117,7 @@ class gaodeMap {
let options = this.myMap.getStatus(); let options = this.myMap.getStatus();
options.scrollWheel = true; options.scrollWheel = true;
this.myMap.setStatus(options); this.myMap.setStatus(options);
console.log("飞行结束") console.log("飞行结束");
}); });
this.districtBoundaries(latlng); this.districtBoundaries(latlng);
...@@ -124,6 +125,21 @@ class gaodeMap { ...@@ -124,6 +125,21 @@ class gaodeMap {
panTo(lnglat) { panTo(lnglat) {
this.myMap.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 * 获取map
* @returns {AMap.Map} * @returns {AMap.Map}
...@@ -157,9 +173,8 @@ class gaodeMap { ...@@ -157,9 +173,8 @@ class gaodeMap {
level: "city" level: "city"
}; };
let district = new AMap.DistrictSearch(opts); let district = new AMap.DistrictSearch(opts);
district.search(that.center, function (status, result) { district.search(that.center, function(status, result) {
if (status == "complete") { if (status == "complete") {
let defaultCenter = []; let defaultCenter = [];
defaultCenter.push(result.districtList[0].center.lng); defaultCenter.push(result.districtList[0].center.lng);
defaultCenter.push(result.districtList[0].center.lat); defaultCenter.push(result.districtList[0].center.lat);
...@@ -169,7 +184,7 @@ class gaodeMap { ...@@ -169,7 +184,7 @@ class gaodeMap {
map.setCenter(defaultCenter); map.setCenter(defaultCenter);
} }
console.log("defaultCenter", defaultCenter) console.log("defaultCenter", defaultCenter);
let bounds = result.districtList[0].boundaries; let bounds = result.districtList[0].boundaries;
for (let i = 0; i < bounds.length; i += 1) { for (let i = 0; i < bounds.length; i += 1) {
...@@ -199,12 +214,12 @@ class gaodeMap { ...@@ -199,12 +214,12 @@ class gaodeMap {
offset: new AMap.Pixel(24, -38), offset: new AMap.Pixel(24, -38),
anchor: "left-top" anchor: "left-top"
}); });
infoWindow.on("mouseover", function () { infoWindow.on("mouseover", function() {
let options = map.getStatus(); let options = map.getStatus();
options.scrollWheel = false; options.scrollWheel = false;
map.setStatus(options); map.setStatus(options);
}); });
infoWindow.on("mouseout", function () { infoWindow.on("mouseout", function() {
let options = map.getStatus(); let options = map.getStatus();
options.scrollWheel = true; options.scrollWheel = true;
map.setStatus(options); map.setStatus(options);
...@@ -234,7 +249,7 @@ class gaodeMap { ...@@ -234,7 +249,7 @@ class gaodeMap {
editWindow.obj = marker; editWindow.obj = marker;
editWindow.gaoMap = that; editWindow.gaoMap = that;
editWindow.map = map; editWindow.map = map;
marker.on("click", function (e) { marker.on("click", function(e) {
if ("edit" == that.mapOperateType) { if ("edit" == that.mapOperateType) {
editWindow.form = e.target.getExtData(); editWindow.form = e.target.getExtData();
editWindow.show(); editWindow.show();
...@@ -296,19 +311,19 @@ class gaodeMap { ...@@ -296,19 +311,19 @@ class gaodeMap {
infoWindow.open(map, e.target.getPosition()); infoWindow.open(map, e.target.getPosition());
}*/ }*/
}); });
marker.on("dragend", function (e) { marker.on("dragend", function(e) {
editWindow.form.longitude = e.lnglat.lng; editWindow.form.longitude = e.lnglat.lng;
editWindow.form.latitude = e.lnglat.lat; editWindow.form.latitude = e.lnglat.lat;
}); });
} else { } else {
marker.on("mouseover", function () { marker.on("mouseover", function() {
marker.setLabel({ marker.setLabel({
offset: new AMap.Pixel(0, -10), //设置文本标注偏移量 offset: new AMap.Pixel(0, -10), //设置文本标注偏移量
content: "<div class='info'>" + data.deviceName + "</div>", //设置文本标注内容 content: "<div class='info'>" + data.deviceName + "</div>", //设置文本标注内容
direction: "top" //设置文本标注方位 direction: "top" //设置文本标注方位
}); });
}); });
marker.on("mouseout", function () { marker.on("mouseout", function() {
marker.setLabel({ marker.setLabel({
content: null content: null
}); });
...@@ -447,7 +462,7 @@ class gaodeMap { ...@@ -447,7 +462,7 @@ class gaodeMap {
case DEVICE_TYPE.REGEULATORBOX: { case DEVICE_TYPE.REGEULATORBOX: {
let icon = new AMap.Icon({ let icon = new AMap.Icon({
//size: new AMap.Size(51, 23), //size: new AMap.Size(51, 23),
image: require("../assets/oldImages/tiaoyaxiang.png") image: require("../assets/images/tiaoyaxiang.png")
}); });
marker.setIcon(icon); marker.setIcon(icon);
break; break;
...@@ -455,7 +470,7 @@ class gaodeMap { ...@@ -455,7 +470,7 @@ class gaodeMap {
case DEVICE_TYPE.VALUEWELL: { case DEVICE_TYPE.VALUEWELL: {
let icon = new AMap.Icon({ let icon = new AMap.Icon({
//size: new AMap.Size(51, 23), //size: new AMap.Size(51, 23),
image: require("../assets/oldImages/famenjing.png") image: require("../assets/images/famenjing.png")
}); });
marker.setIcon(icon); marker.setIcon(icon);
break; break;
...@@ -463,7 +478,7 @@ class gaodeMap { ...@@ -463,7 +478,7 @@ class gaodeMap {
case DEVICE_TYPE.FLOWMETER: { case DEVICE_TYPE.FLOWMETER: {
let icon = new AMap.Icon({ let icon = new AMap.Icon({
//size: new AMap.Size(51, 23), //size: new AMap.Size(51, 23),
image: require("../assets/oldImages/liuliangji.png") image: require("../assets/images/liuliangji.png")
}); });
marker.setIcon(icon); marker.setIcon(icon);
break; break;
...@@ -487,7 +502,7 @@ class gaodeMap { ...@@ -487,7 +502,7 @@ class gaodeMap {
case DEVICE_TYPE.PRESSUREGAGE: { case DEVICE_TYPE.PRESSUREGAGE: {
let icon = new AMap.Icon({ let icon = new AMap.Icon({
//size: new AMap.Size(51, 23), //size: new AMap.Size(51, 23),
image: require("../assets/oldImages/yalibiao.png") image: require("../assets/images/yalibiao.png")
}); });
marker.setIcon(icon); marker.setIcon(icon);
break; break;
...@@ -952,14 +967,14 @@ class gaodeMap { ...@@ -952,14 +967,14 @@ class gaodeMap {
this.overlays = []; this.overlays = [];
let that = this; let that = this;
this.markerOverlays = []; this.markerOverlays = [];
this.mouseTool.on("draw", function (e) { this.mouseTool.on("draw", function(e) {
if (e.obj.getExtData().type != "newLine") { if (e.obj.getExtData().type != "newLine") {
map.remove(that.markerOverlays); map.remove(that.markerOverlays);
const device = that.createInfowindow("新增"); const device = that.createInfowindow("新增");
device.map = map; device.map = map;
device.obj = e.obj; device.obj = e.obj;
device.gaoMap = that; device.gaoMap = that;
e.obj.on("click", function (aa) { e.obj.on("click", function(aa) {
let postion = aa.target._position; let postion = aa.target._position;
//兼容拖拽后单击事件,拖拽后点击事件返回位置为数组 //兼容拖拽后单击事件,拖拽后点击事件返回位置为数组
if (postion instanceof Array) { if (postion instanceof Array) {
...@@ -971,11 +986,11 @@ class gaodeMap { ...@@ -971,11 +986,11 @@ class gaodeMap {
} }
device.show(); device.show();
}); });
e.obj.on("mouseover", function () { e.obj.on("mouseover", function() {
that.mouseTool.close(); that.mouseTool.close();
}); });
e.obj.on("mouseout", function () { e.obj.on("mouseout", function() {
that.draw(that.deviceType); that.draw(that.deviceType);
}); });
...@@ -1086,7 +1101,7 @@ class gaodeMap { ...@@ -1086,7 +1101,7 @@ class gaodeMap {
"AMap.MapType", "AMap.MapType",
"AMap.Geolocation" "AMap.Geolocation"
], ],
function () { function() {
// 在图面添加工具条控件,工具条控件集成了缩放、平移、定位等功能按钮在内的组合控件 // 在图面添加工具条控件,工具条控件集成了缩放、平移、定位等功能按钮在内的组合控件
//map.addControl(new AMap.ToolBar()); //map.addControl(new AMap.ToolBar());
...@@ -1109,7 +1124,7 @@ class gaodeMap { ...@@ -1109,7 +1124,7 @@ class gaodeMap {
searchTips(inputId) { searchTips(inputId) {
let that = this; let that = this;
AMap.plugin(["AMap.AutoComplete", "AMap.PlaceSearch"], function () { AMap.plugin(["AMap.AutoComplete", "AMap.PlaceSearch"], function() {
//输入提示 //输入提示
// var autoOptions = { // var autoOptions = {
// input: inputId // input: inputId
...@@ -1170,7 +1185,10 @@ class gaodeMap { ...@@ -1170,7 +1185,10 @@ class gaodeMap {
const path1 = eval(coordinates)[0]; const path1 = eval(coordinates)[0];
const path2 = eval(coordinates)[1]; const path2 = eval(coordinates)[1];
// map.setFitView(); // 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); map.setCenter(path3, false);
// const lntlat = eval(coordinates)[0]; // const lntlat = eval(coordinates)[0];
......
...@@ -15,6 +15,7 @@ import workerManInfowindow from "../components/PopWindowGis/workerManInfowindow. ...@@ -15,6 +15,7 @@ import workerManInfowindow from "../components/PopWindowGis/workerManInfowindow.
import workerManView from "../components/PopWindowGis/workerManView.vue"; import workerManView from "../components/PopWindowGis/workerManView.vue";
import { getArray } from "@/utils/gassafety.js"; import { getArray } from "@/utils/gassafety.js";
import { lineColor } from "./mapCommon.js";
import { delPipe } from "@/api/device/pipe.js"; import { delPipe } from "@/api/device/pipe.js";
import vue from "../main"; import vue from "../main";
import { Card } from "element-ui"; import { Card } from "element-ui";
...@@ -32,6 +33,7 @@ export const DEVICE_TYPE = { ...@@ -32,6 +33,7 @@ export const DEVICE_TYPE = {
SMALLINSPECTOR: "workPoint", SMALLINSPECTOR: "workPoint",
TROUBLE: "trouble" TROUBLE: "trouble"
}; };
class gaodeMap { class gaodeMap {
// 所有线的数组 // 所有线的数组
polyLines = []; polyLines = [];
...@@ -80,7 +82,7 @@ class gaodeMap { ...@@ -80,7 +82,7 @@ class gaodeMap {
this.closeInfoWindow(); this.closeInfoWindow();
this.polyLinesColorClear(); this.polyLinesColorClear();
this.view.bottomDataShow = true; this.domAllShow();
if (this.lineType != 1 || this.lineFlag) return; if (this.lineType != 1 || this.lineFlag) return;
// 除了这里,还要利用vue页面的window事件辅助,当组件出来的时候,就得利用window事件 // 除了这里,还要利用vue页面的window事件辅助,当组件出来的时候,就得利用window事件
if (this.newLineObj) { if (this.newLineObj) {
...@@ -112,6 +114,8 @@ class gaodeMap { ...@@ -112,6 +114,8 @@ class gaodeMap {
this.myMap.on("zoomstart", () => { this.myMap.on("zoomstart", () => {
// console.log("缩放开始") // console.log("缩放开始")
this.closeInfoWindow(); this.closeInfoWindow();
this.polyLinesColorClear()
}); });
this.myMap.on("moveend", () => { this.myMap.on("moveend", () => {
if (this.handleInfoWindowOpenFunc) { if (this.handleInfoWindowOpenFunc) {
...@@ -139,13 +143,13 @@ class gaodeMap { ...@@ -139,13 +143,13 @@ class gaodeMap {
// 卫星图 // 卫星图
if (!bool) { if (!bool) {
if(this.satellite) return; if (this.satellite) return;
this.satellite = new AMap.TileLayer.Satellite() this.satellite = new AMap.TileLayer.Satellite();
this.myMap.addLayer(this.satellite); this.myMap.addLayer(this.satellite);
} else { } else {
if(this.satellite){ if (this.satellite) {
this.myMap.removeLayer(this.satellite); this.myMap.removeLayer(this.satellite);
this.satellite=null; this.satellite = null;
} }
} }
} }
...@@ -284,6 +288,7 @@ class gaodeMap { ...@@ -284,6 +288,7 @@ class gaodeMap {
marker.on("mouseover", this.wokerManOpen); marker.on("mouseover", this.wokerManOpen);
marker.on("mouseout", e => { marker.on("mouseout", e => {
e.target.infoWindow.close(); e.target.infoWindow.close();
this.domAllShow();
}); });
marker.on("mousedown", e => { marker.on("mousedown", e => {
...@@ -719,7 +724,7 @@ class gaodeMap { ...@@ -719,7 +724,7 @@ class gaodeMap {
map: map, map: map,
path: lineArr, path: lineArr,
showDir: true, showDir: true,
strokeColor: "#28F", //线颜色 strokeColor: "#2EE7E7", //线颜色
// strokeOpacity: 1, //线透明度 // strokeOpacity: 1, //线透明度
strokeWeight: 6 //线宽 strokeWeight: 6 //线宽
// strokeStyle: "solid" //线样式 // strokeStyle: "solid" //线样式
...@@ -804,14 +809,15 @@ class gaodeMap { ...@@ -804,14 +809,15 @@ class gaodeMap {
//console.log("包装的数组", arr); //console.log("包装的数组", arr);
for (let i = 0; i < arr.length; i++) { for (let i = 0; i < arr.length; i++) {
const item = arr[i]; const item = arr[i];
let { coordinates } = item; let { coordinates, pipePressure } = item;
console.log(pipePressure);
// //console.log("coordinates",coordinates) // //console.log("coordinates",coordinates)
// let path = coordinates ? getArray(coordinates) :[]; // let path = coordinates ? getArray(coordinates) :[];
// 字符串转二维数组 // 字符串转二维数组
let path = coordinates ? eval(coordinates) : []; let path = coordinates ? eval(coordinates) : [];
let polyline = new AMap.Polyline({ let polyline = new AMap.Polyline({
path, path,
strokeColor: "#2EE7E7", strokeColor: lineColor[pipePressure],
strokeWeight: 4, strokeWeight: 4,
strokeOpacity: 0.9, strokeOpacity: 0.9,
zIndex: 50, zIndex: 50,
...@@ -833,6 +839,8 @@ class gaodeMap { ...@@ -833,6 +839,8 @@ class gaodeMap {
//添加事件 //添加事件
polyline.on("mousedown", this.polylineMouseOver); polyline.on("mousedown", this.polylineMouseOver);
polyline.on("mouseover", () => { polyline.on("mouseover", () => {
// lineColor
polyline.setOptions({ strokeColor: "#F7FE38" }); polyline.setOptions({ strokeColor: "#F7FE38" });
}); });
polyline.on("mouseout", e => { polyline.on("mouseout", e => {
...@@ -840,7 +848,7 @@ class gaodeMap { ...@@ -840,7 +848,7 @@ class gaodeMap {
if (polyline.getExtData().lineData.alarmState == 1) { if (polyline.getExtData().lineData.alarmState == 1) {
polyline.setOptions({ strokeColor: "#ff0000" }); polyline.setOptions({ strokeColor: "#ff0000" });
} else { } else {
polyline.setOptions({ strokeColor: "#2EE7E7" }); polyline.setOptions({ strokeColor: lineColor[pipePressure] });
} }
// infoWindow.close(); // infoWindow.close();
}); });
...@@ -934,7 +942,8 @@ class gaodeMap { ...@@ -934,7 +942,8 @@ class gaodeMap {
if (item.getExtData().lineData.alarmState == 1) { if (item.getExtData().lineData.alarmState == 1) {
item.setOptions({ strokeColor: "#ff0000" }); item.setOptions({ strokeColor: "#ff0000" });
} else { } else {
item.setOptions({ strokeColor: "#2EE7E7" }); const { pipePressure } = item.getExtData().lineData;
item.setOptions({ strokeColor: lineColor[pipePressure] });
} }
} }
}); });
...@@ -969,8 +978,15 @@ class gaodeMap { ...@@ -969,8 +978,15 @@ class gaodeMap {
boxCollision(infowindowDom) { boxCollision(infowindowDom) {
// gis地图页面的bottomdata组件 // gis地图页面的bottomdata组件
const { const {
Bottom: { $el: pageDom } Bottom: { $el: pageDomBottom },
Right: { $el: pageDomRight }
} = this.view.$refs; } = this.view.$refs;
this.mathWho(infowindowDom, pageDomBottom, "bottomDataShow", "bottom");
this.mathWho(infowindowDom, pageDomRight, "rightDataShow", "right");
}
// domAttr view里的属性
//attr 存储在类里的值
mathWho(infowindowDom, pageDom, domAttr, attr) {
let { let {
offsetTop: ay, offsetTop: ay,
offsetLeft: ax, offsetLeft: ax,
...@@ -985,20 +1001,34 @@ class gaodeMap { ...@@ -985,20 +1001,34 @@ class gaodeMap {
} = infowindowDom.getBoundingClientRect(); } = infowindowDom.getBoundingClientRect();
// 如果组件消失了ay回变成0,所以要记录一下,当它为0的时候取记录的值 // 如果组件消失了ay回变成0,所以要记录一下,当它为0的时候取记录的值
if (ay != 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 { } else {
ay = this.ay; // ax = this.ax;
ax = this[attr + "x"];
} }
console.log("ay", ay); console.log("ay", ay);
if (by + bh >= ay) { if (by + bh >= ay && bx + bw >= ax) {
console.log("隐藏"); console.log("隐藏");
this.view.bottomDataShow = false; this.view[domAttr] = false;
} else { } else {
console.log("显示"); 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 // 把map里的in佛window转化成vue里的dom
addCloneDome(target, infoWindow) { addCloneDome(target, infoWindow) {
target.cloneDom = infoWindow.dom.cloneNode(true); 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 @@ ...@@ -103,6 +103,11 @@
:class="{ back: backFlag, opacity: drawerOpacity }" :class="{ back: backFlag, opacity: drawerOpacity }"
@click.stop="drawerdrawer" @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"> <div class="switch" @click="backFlag = !backFlag">
<img v-if="!backFlag" src="@/assets/images/l.png" alt="" /> <img v-if="!backFlag" src="@/assets/images/l.png" alt="" />
<img v-else src="@/assets/images/r.png" alt="" /> <img v-else src="@/assets/images/r.png" alt="" />
...@@ -213,7 +218,7 @@ ...@@ -213,7 +218,7 @@
</template> </template>
<!-- 无数据 --> <!-- 无数据 -->
<template v-else> <template v-else>
<div style="padding-left: 5px">暂无数据</div> <div style="padding-left: 5px; color: #fff">暂无数据</div>
</template> </template>
</div> </div>
</el-collapse-transition> </el-collapse-transition>
...@@ -240,6 +245,8 @@ export default { ...@@ -240,6 +245,8 @@ export default {
targetNum: 0, targetNum: 0,
backFlag: true, backFlag: true,
// 卫星与全景地图的切换
mapStyle: true,
// 抽屉内的滚动条的高需要赋值赋值 // 抽屉内的滚动条的高需要赋值赋值
boxHeight: "", boxHeight: "",
boxWidth: "", boxWidth: "",
...@@ -307,7 +314,7 @@ export default { ...@@ -307,7 +314,7 @@ export default {
}, },
methods: { methods: {
onResize() { onResize() {
this.boxHeight = document.body.clientHeight - 81; this.boxHeight = document.body.clientHeight - 80;
this.boxWidth = document.body.clientWidth - 100; this.boxWidth = document.body.clientWidth - 100;
}, },
async initMap() { async initMap() {
...@@ -371,6 +378,15 @@ export default { ...@@ -371,6 +378,15 @@ export default {
this.gaoMap.markerShow(4, false); this.gaoMap.markerShow(4, false);
} }
}, },
// 卫星地图与全景地图的切换
mapChange(num) {
if (num == 1) {
this.mapStyle = false;
} else {
this.mapStyle = true;
}
this.gaoMap.changeMap(this.mapStyle);
},
addDevice() { addDevice() {
if (this.iconClass == "icon-create") { if (this.iconClass == "icon-create") {
this.targetNum = this.targetNum != 1 ? 1 : 0; this.targetNum = this.targetNum != 1 ? 1 : 0;
...@@ -1116,7 +1132,9 @@ input[type="radio"] { ...@@ -1116,7 +1132,9 @@ input[type="radio"] {
left: 100px; left: 100px;
width: 348px; width: 348px;
transition: 0.2s linear; transition: 0.2s linear;
background: #fff; // background: #fff;
background: rgba(6, 29, 51, 0.8);
// background: red; // background: red;
opacity: 0; opacity: 0;
&.opacity { &.opacity {
...@@ -1125,6 +1143,24 @@ input[type="radio"] { ...@@ -1125,6 +1143,24 @@ input[type="radio"] {
&.back { &.back {
left: -248px; 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 { .scroll {
// height: 100%; // height: 100%;
position: relative; position: relative;
...@@ -1188,7 +1224,9 @@ input[type="radio"] { ...@@ -1188,7 +1224,9 @@ input[type="radio"] {
// border-right: 1px solid #cccccc; // border-right: 1px solid #cccccc;
box-sizing: border-box; box-sizing: border-box;
// padding-left: 5px; // padding-left: 5px;
color: #053b6a; // color: #053b6a;
color: #fff;
font-weight: 600; font-weight: 600;
} }
} }
...@@ -1200,9 +1238,14 @@ input[type="radio"] { ...@@ -1200,9 +1238,14 @@ input[type="radio"] {
color: #1d1d1d; color: #1d1d1d;
&:hover { &:hover {
box-sizing: border-box; box-sizing: border-box;
border-bottom: 1px solid #053b6a; // border-bottom: 1px solid #053b6a;
color: #053b6a; border-bottom: 1px solid #7fc0f8;
// color: #053b6a;
font-weight: 600; font-weight: 600;
> div {
color: #7fc0f8;
}
} }
&.topActive { &.topActive {
// border-top: 1px solid #cccccc; // border-top: 1px solid #cccccc;
...@@ -1219,6 +1262,8 @@ input[type="radio"] { ...@@ -1219,6 +1262,8 @@ input[type="radio"] {
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
color: #fff;
// border-right: 1px solid #cccccc; // border-right: 1px solid #cccccc;
} }
} }
...@@ -1242,14 +1287,16 @@ input[type="radio"] { ...@@ -1242,14 +1287,16 @@ input[type="radio"] {
height: 48px; height: 48px;
padding-left: 20px; padding-left: 20px;
display: flex; display: flex;
background-color: #ffffff; // background-color: #ffffff;
box-sizing: border-box; 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; cursor: pointer;
position: relative; position: relative;
// box-sizing: border-box; // box-sizing: border-box;
&.firstbox { &.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; // box-sizing: border-box;
&:hover { &:hover {
border-top: 1px solid rgba(5, 59, 106, 0); border-top: 1px solid rgba(5, 59, 106, 0);
...@@ -1257,15 +1304,24 @@ input[type="radio"] { ...@@ -1257,15 +1304,24 @@ input[type="radio"] {
} }
&:hover { &:hover {
box-sizing: border-box; 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; border-bottom: none !important;
.upPic {
color: #31eaea;
}
.left,
.right {
color: #31eaea !important;
}
} }
.upPic { .upPic {
display: inline-block; display: inline-block;
margin-left: 40px; margin-left: 40px;
line-height: 48px; line-height: 48px;
font-size: 16px; font-size: 16px;
color: #053b6a; // color: #053b6a;
color: #fff;
} }
> i.ju { > i.ju {
position: absolute; position: absolute;
...@@ -1289,6 +1345,7 @@ input[type="radio"] { ...@@ -1289,6 +1345,7 @@ input[type="radio"] {
color: #fff; color: #fff;
} }
> i.arrow-right { > i.arrow-right {
color: #fff !important;
position: absolute; position: absolute;
right: 32px; right: 32px;
top: 16px; top: 16px;
...@@ -1299,16 +1356,21 @@ input[type="radio"] { ...@@ -1299,16 +1356,21 @@ input[type="radio"] {
} }
&.active { &.active {
// background-color: #053b6a; // background-color: #053b6a;
.left, // .left,
.right { // .right {
color: #053b6a; // color: #053b6a;
} // }
// > i {
// color: #053b6a;
// }
> i { > i {
color: #053b6a; color: #31eaea;
font-weight: 600;
} }
} }
.left { .left {
color: #053b6a; // color: #053b6a;
color: #fff;
line-height: 48px; line-height: 48px;
margin-left: 28px; margin-left: 28px;
.iconfont { .iconfont {
...@@ -1316,7 +1378,8 @@ input[type="radio"] { ...@@ -1316,7 +1378,8 @@ input[type="radio"] {
} }
} }
.right { .right {
color: #1d1d1d; // color: #1d1d1d;
color: #fff;
line-height: 48px; line-height: 48px;
font-size: 16px; font-size: 16px;
margin-left: 4px; margin-left: 4px;
...@@ -1337,6 +1400,8 @@ input[type="radio"] { ...@@ -1337,6 +1400,8 @@ input[type="radio"] {
padding-bottom: 2px; padding-bottom: 2px;
.btn { .btn {
border-radius: 50%; border-radius: 50%;
background: none;
// width: 14px; // width: 14px;
// height: 14px; // height: 14px;
padding: 2px; padding: 2px;
...@@ -1345,6 +1410,7 @@ input[type="radio"] { ...@@ -1345,6 +1410,7 @@ input[type="radio"] {
display: inline-block; display: inline-block;
font-size: 14px; font-size: 14px;
padding: 0px 5px; padding: 0px 5px;
color: #fff;
} }
} }
} }
...@@ -1353,9 +1419,9 @@ input[type="radio"] { ...@@ -1353,9 +1419,9 @@ input[type="radio"] {
.switch { .switch {
position: absolute; position: absolute;
font-size: 30px; font-size: 30px;
right: -27px; right: -30px;
top: 50%; top: 50%;
margin-top: -30px; margin-top: -123px;
width: 40px; width: 40px;
border-radius: 40%; border-radius: 40%;
overflow: hidden; overflow: hidden;
......
<template> <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%;"> <div style="padding-top: 10px;background: #fff;height: 100%;">
<el-row> <el-row>
...@@ -416,7 +416,7 @@ ...@@ -416,7 +416,7 @@
addBasicsInfo(this.form2).then(response => { addBasicsInfo(this.form2).then(response => {
this.msgSuccess("生成工单成功"); this.msgSuccess("生成工单成功");
this.open2 = false; this.open2 = false;
this.getList(); location.reload();
}); });
} }
}); });
......
...@@ -66,11 +66,12 @@ export default { ...@@ -66,11 +66,12 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
.wrapper { .wrapper {
width: 300px; width: 270px;
height: 800px; height: 700px;
position: absolute; position: absolute;
top: 40px; top: 40px;
right: 0; right: 0;
bottom:0;
overflow-x: hidden; overflow-x: hidden;
// right: 10px; // right: 10px;
// top: 131px; // top: 131px;
...@@ -102,6 +103,9 @@ export default { ...@@ -102,6 +103,9 @@ export default {
background-image: url(../../../../assets/images/listBg.png); background-image: url(../../../../assets/images/listBg.png);
margin-right: 10px; margin-right: 10px;
display: flex; display: flex;
&:last-child{
margin-bottom:0px !important;
}
&.three { &.three {
margin-right: 0px; margin-right: 0px;
} }
......
...@@ -73,7 +73,10 @@ ...@@ -73,7 +73,10 @@
/> />
<Bottom <Bottom
v-show="bottomDataShow" v-show="bottomDataShow"
:class="{ classShow: !bottomDataShow }" :class="{
classShow: !bottomDataShow,
bottomMarginRight: bottomMarginRight,
}"
ref="Bottom" ref="Bottom"
:list="rightBototmData" :list="rightBototmData"
/> />
...@@ -100,6 +103,14 @@ ...@@ -100,6 +103,14 @@
<div :class="{ active: !mapStyle }" @click="mapChange(1)">卫星地图</div> <div :class="{ active: !mapStyle }" @click="mapChange(1)">卫星地图</div>
<div :class="{ active: mapStyle }" @click="mapChange(2)">全景地图</div> <div :class="{ active: mapStyle }" @click="mapChange(2)">全景地图</div>
</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"> <div class="switch" @click="backFlag = !backFlag">
<img v-if="!backFlag" src="@/assets/images/l.png" alt="" /> <img v-if="!backFlag" src="@/assets/images/l.png" alt="" />
<img v-else src="@/assets/images/r.png" alt="" /> <img v-else src="@/assets/images/r.png" alt="" />
...@@ -265,7 +276,7 @@ ...@@ -265,7 +276,7 @@
</template> </template>
<!-- 无数据 --> <!-- 无数据 -->
<template v-else> <template v-else>
<div style="padding-left: 5px;color:#fff;">暂无数据</div> <div style="padding-left: 5px; color: #fff">暂无数据</div>
</template> </template>
</div> </div>
</el-collapse-transition> </el-collapse-transition>
...@@ -292,6 +303,7 @@ import Right from "./components/Right.vue"; ...@@ -292,6 +303,7 @@ import Right from "./components/Right.vue";
import CreateWork from "./components/CreateWork.vue"; import CreateWork from "./components/CreateWork.vue";
import CreateWorkTrouble from "./components/CreateWorkTrouble.vue"; import CreateWorkTrouble from "./components/CreateWorkTrouble.vue";
import { getInspectorLocations } from "@/api/inspectorLocation/location"; import { getInspectorLocations } from "@/api/inspectorLocation/location";
import { lineColor } from "@/utils/mapCommon.js";
export default { export default {
components: { components: {
...@@ -302,6 +314,7 @@ export default { ...@@ -302,6 +314,7 @@ export default {
}, },
data() { data() {
return { return {
lineColor,
gaoMap: null, gaoMap: null,
deviceType: false, deviceType: false,
value: "", value: "",
...@@ -389,6 +402,8 @@ export default { ...@@ -389,6 +402,8 @@ export default {
rightBototmData: [], rightBototmData: [],
bottomDataShow: true, bottomDataShow: true,
rightDataShow: true, rightDataShow: true,
// 如果右边与下面重叠了,bottom要往左移
bottomMarginRight: false,
// 是否显示生成工单弹框 // 是否显示生成工单弹框
createWorkOpen: false, createWorkOpen: false,
//隐患工单 //隐患工单
...@@ -419,6 +434,7 @@ export default { ...@@ -419,6 +434,7 @@ export default {
window.removeEventListener("resize", this.onResize); window.removeEventListener("resize", this.onResize);
window.addEventListener("resize", this.onResize); window.addEventListener("resize", this.onResize);
this.initMap(); this.initMap();
// }); // });
}, },
watch: { watch: {
...@@ -433,7 +449,21 @@ export default { ...@@ -433,7 +449,21 @@ export default {
this.boxHeight = document.body.clientHeight - 80; this.boxHeight = document.body.clientHeight - 80;
this.boxWidth = document.body.clientWidth; this.boxWidth = document.body.clientWidth;
console.log("挂在"); 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() { initMap() {
let gaoMap = new gaodeMap("石家庄"); let gaoMap = new gaodeMap("石家庄");
this.gaoMap = gaoMap; this.gaoMap = gaoMap;
...@@ -792,6 +822,8 @@ export default { ...@@ -792,6 +822,8 @@ export default {
leftBarChange(item) { leftBarChange(item) {
// this.leftBarNum= this.leftBarNum != item.value ? item.value:0; // this.leftBarNum= this.leftBarNum != item.value ? item.value:0;
this.gaoMap.closeInfoWindow(); this.gaoMap.closeInfoWindow();
this.domAllShow();
this.gaoMap.polyLinesColorClear(); this.gaoMap.polyLinesColorClear();
const index = this.leftBarNum.indexOf(item.value); const index = this.leftBarNum.indexOf(item.value);
if (index >= 0) { if (index >= 0) {
...@@ -875,6 +907,7 @@ export default { ...@@ -875,6 +907,7 @@ export default {
} }
}, },
panToo(iten, item) { panToo(iten, item) {
this.domAllShow();
// 如果没打对勾,就啥也不干 // 如果没打对勾,就啥也不干
if (!this.leftBarNum.includes(item.value)) return; if (!this.leftBarNum.includes(item.value)) return;
// 点击的时候允许infowindow消失 // 点击的时候允许infowindow消失
...@@ -1029,6 +1062,7 @@ export default { ...@@ -1029,6 +1062,7 @@ export default {
} else { } else {
this.arrowRightNum.push(item.value); this.arrowRightNum.push(item.value);
} }
this.domAllShow();
}, },
// 管道储存 // 管道储存
...@@ -1147,7 +1181,7 @@ export default { ...@@ -1147,7 +1181,7 @@ export default {
path: [item.longitude, item.latitude], path: [item.longitude, item.latitude],
no: index, no: index,
userId: item.userId, userId: item.userId,
userName: item.userName, userName: item.nickName,
userPhone: item.phonenumber, userPhone: item.phonenumber,
}; };
}); });
...@@ -1381,6 +1415,10 @@ export default { ...@@ -1381,6 +1415,10 @@ export default {
this.gaoMap.lineFlag = false; this.gaoMap.lineFlag = false;
// this.gaoMap.createNewLine(); // this.gaoMap.createNewLine();
}, },
domAllShow() {
this.bottomDataShow = true;
this.rightDataShow = true;
},
refreshMap() { refreshMap() {
// this.changeBtnDataClear(); // this.changeBtnDataClear();
this.keyWord = ""; this.keyWord = "";
...@@ -1452,8 +1490,8 @@ export default { ...@@ -1452,8 +1490,8 @@ export default {
drawerClick() { drawerClick() {
console.log("drawerClick"); console.log("drawerClick");
this.gaoMap.polyLinesColorClear(); this.gaoMap.polyLinesColorClear();
this.gaoMap.closeInfoWindow(); this.gaoMap.closeInfoWindow();
this.domAllShow();
}, },
}, },
...@@ -1482,6 +1520,10 @@ export default { ...@@ -1482,6 +1520,10 @@ export default {
bottom: 0; bottom: 0;
width: 100%; width: 100%;
} }
// 如果right与bottom 重叠,则bottom左移动
.bottomMarginRight {
right: 280px;
}
// .btn-wrapper { // .btn-wrapper {
// position: fixed; // position: fixed;
// right: 32px; // right: 32px;
...@@ -1655,6 +1697,20 @@ input[type="radio"] { ...@@ -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 { .scroll {
// height: 100%; // height: 100%;
position: relative; position: relative;
...@@ -1800,7 +1856,9 @@ input[type="radio"] { ...@@ -1800,7 +1856,9 @@ input[type="radio"] {
position: relative; position: relative;
// box-sizing: border-box; // box-sizing: border-box;
&.firstbox { &.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; // box-sizing: border-box;
&:hover { &:hover {
border-top: 1px solid rgba(5, 59, 106, 0); border-top: 1px solid rgba(5, 59, 106, 0);
......
...@@ -552,7 +552,7 @@ export default { ...@@ -552,7 +552,7 @@ export default {
addBasicsInfo(this.form2).then(response => { addBasicsInfo(this.form2).then(response => {
this.msgSuccess("生成工单成功"); this.msgSuccess("生成工单成功");
this.open2 = false; this.open2 = false;
this.getList(); location.reload();
}); });
} }
}); });
......
...@@ -903,6 +903,11 @@ ...@@ -903,6 +903,11 @@
"@babel/helper-validator-identifier" "^7.14.5" "@babel/helper-validator-identifier" "^7.14.5"
to-fast-properties "^2.0.0" 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": "@eslint/eslintrc@^0.2.2":
version "0.2.2" version "0.2.2"
resolved "https://registry.nlark.com/@eslint/eslintrc/download/@eslint/eslintrc-0.2.2.tgz#d01fc791e2fc33e88a29d6f3dc7e93d0cd784b76" resolved "https://registry.nlark.com/@eslint/eslintrc/download/@eslint/eslintrc-0.2.2.tgz#d01fc791e2fc33e88a29d6f3dc7e93d0cd784b76"
...@@ -3378,9 +3383,9 @@ ecc-jsbn@~0.1.1: ...@@ -3378,9 +3383,9 @@ ecc-jsbn@~0.1.1:
jsbn "~0.1.0" jsbn "~0.1.0"
safer-buffer "^2.1.0" safer-buffer "^2.1.0"
echarts@4.9.0: echarts@^4.9.0:
version "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= integrity sha1-qbm6oD8Doqcx5jQMVb77V6nhNH0=
dependencies: dependencies:
zrender "4.3.2" 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