Skip to content

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

合并jzl

parents 34bc758c b43719f0
Hide whitespace changes
Inline Side-by-side
Showing with 171 additions and 148 deletions
gassafety-web/src/components/PopWindow/lineInfoWindow.vue
View file @ b85e12cc
......@@ -2,82 +2,93 @@
<div class="wrapper">
<div class="top display-default">
<div class="left text">{{ obj.pipeName }}</div>
<div v-if="!obj.editorPage" class="right text">
<img src="../../assets/images/closeBtn.png" alt="" />
<div class="right text">
<img @click="close" src="../../assets/images/closeBtn.png" alt="" />
</div>
</div>
<!-- 设备信息 -->
<div class="eq-content display-default">
<div class="text-wrapper">
<!-- <div :title="obj.pipeName" class="eq-text">
<div class="content">
<div class="eq-content display-default">
<div class="text-wrapper">
<!-- <div :title="obj.pipeName" class="eq-text">
<span>管道名称：</span>
<span>{{ obj.pipeName }}</span>
</div> -->
<div class="eq-text">
<span>管道编号：</span>
<span>{{ obj.pipeCode }}</span>
</div>
<div class="eq-text">
<span>管道长度：</span>
<span>{{ `${obj.pipeLength ?obj.pipeLength+'米':""}` }}</span>
<div class="eq-text">
<span>管道编号：</span>
<span>{{ obj.pipeCode }} </span>
</div>
<div class="eq-text">
<span>管道长度：</span>
<span>{{ `${obj.pipeLength ? obj.pipeLength + "米" : ""}` }}</span>
</div>
<div class="eq-text">
<span>管道类型：</span>
<span>{{ ["地埋管线", "地表管线"][obj.pipeType - 1] }}</span>
</div>
<div class="eq-text">
<span>管道压力：</span>
<span>{{
["低押", "中压", "次高压", "高压"][obj.pipePressure - 1]
}}</span>
</div>
</div>
<div class="eq-text">
<span>管道类型：</span>
<span>{{ ["地埋管线", "地表管线"][obj.pipeType-1] }}</span>
</div>
<div class="eq-text">
<span>管道压力：</span>
<span>{{
["低押", "中压", "次高压", "高压"][obj.pipePressure-1]
}}</span>
<div class="pic">
<img :src="obj.iconUrl" alt="" />
</div>
</div>
<div class="pic">
<img :src="obj.iconUrl" alt="" />
<div class="maintain-content">
<div>
<span>管道所在地址：</span>
<span>{{ obj.pipeAddr }}</span>
</div>
<div>
<span>安装日期：</span>
<span>{{ moment(obj.installationTime).format("YYYY-MM-DD") }}</span>
</div>
<div>
<span>最后巡检日期：</span>
<span>{{ obj.inspectionTime }}</span>
</div>
<div>
<span>备注信息；</span>
<span>{{ obj.remarks }} </span>
</div>
</div>
<template v-if="!obj.editorPage">
<div class="warn-content">
<div>报警状态 <span>报警</span></div>
<div>详细信息：<span>管线两端设备压差较大，管线可能泄漏</span></div>
</div>
<div class="btn">
<el-button class="elbtn" type="primary">生成工单</el-button>
</div>
</template>
</div>
<div class="maintain-content">
<div>
管道所在地址：<span>{{obj.pipeAddr }}</span>
</div>
<div>
安装日期：<span>{{ moment(obj.installationTime).format("YYYY-MM-DD") }}</span>
</div>
<div>
最后巡检日期：<span>{{ obj.inspectionTime }}</span>
</div>
<div>
备注信息；<span>{{ obj.remarks }}</span>
</div>
</div>
<template v-if="!obj.editorPage">
<div class="warn-content">
<div>报警状态 <span>报警</span></div>
<div>详细信息：<span>管线两端设备压差较大，管线可能泄漏</span></div>
</div>
<div class="btn">
<el-button class="elbtn" type="primary">生成工单</el-button>
</div>
</template>
<!-- 报警状态 -->
</div>
</template>
<script>
//line移入时的的infowindow
import moment from "moment"
import moment from "moment";
export default {
props: {
obj: { typs: Object },
},
created(){
console.log("created",this.obj)
created() {
console.log("created", this.obj);
},
methods:{
methods: {
moment,
}
close() {
this.obj.polyline.infoWindow.close();
},
},
};
</script>
......@@ -100,45 +111,53 @@ export default {
line-height: 51px;
}
.left {
padding-left: 10px;
padding-left: 22px;
}
.right {
padding-right: 10px;
padding-right: 22px;
img{
cursor: pointer;
}
}
}
.eq-content {
min-height: 156px;
box-sizing: border-box;
padding: 13px 10px 0px 10px;
// border-bottom: 1px solid #e2e2e2;
.text-wrapper {
padding-top: 1px;
& > div {
margin-bottom: 6px;
}
.eq-text {
font-size: 14px;
font-weight: 400;
color: #1d1d1d;
opacity: 1;
& > span {
display: inline-block;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
word-break: break-all;
max-width: 100px;
.content {
max-height: 400px;
overflow: hidden;
overflow-y: auto;
.eq-content {
min-height: 156px;
box-sizing: border-box;
padding: 13px 22px 0px 22px;
// border-bottom: 1px solid #e2e2e2;
.text-wrapper {
padding-top: 1px;
& > div {
margin-bottom: 6px;
}
.eq-text {
font-size: 14px;
font-weight: 400;
color: #1d1d1d;
opacity: 1;
& > span {
vertical-align: top;
display: inline-block;
// white-space: nowrap;
// text-overflow: ellipsis;
// overflow: hidden;
word-break: break-all;
max-width: 100px;
}
}
}
}
.pic {
width: 177px;
height: 129px;
// background-color: black;
img {
width: 100%;
height: 100%;
.pic {
width: 177px;
height: 129px;
// background-color: black;
img {
width: 100%;
height: 100%;
}
}
}
}
......@@ -146,16 +165,22 @@ export default {
.maintain-content {
width: 100%;
height: 119px;
padding-left: 10px;
padding-right:10px;
// padding-bottom:10px;
padding-left: 22px;
padding-right: 22px;
padding-bottom: 10px;
// padding-top: 16px;
box-sizing: border-box;
border-bottom: 1px solid #e2e2e2;
// border-bottom: 1px solid #e2e2e2;
& > div {
margin-bottom: 8px;
font-size: 14px;
font-weight: 400;
span {
vertical-align: top;
display: inline-block;
word-break: break-all;
max-width: 280px;
}
}
}
......
gassafety-web/src/components/PopWindow/pipelineView.vue
View file @ b85e12cc
......@@ -25,6 +25,7 @@
<el-col>
<el-form-item v-show="false" label="企业id" prop="enterpriseId">
<el-input disabled v-model="editForm.enterpriseId"></el-input>
</el-form-item>
</el-col>
......@@ -40,7 +41,7 @@
</el-col>
<el-col :span="11">
<el-form-item label="管道长度" prop="pipeLength">
<el-input v-model="editForm.pipeLength">
<el-input type="number" min=0 v-model="editForm.pipeLength">
<i
slot="suffix"
style="color: #000; font-style: normal; margin-right: 10px"
......@@ -212,7 +213,7 @@ export default {
pipePressure: [
{ required: true, message: "请选择管道压力", trigger: "blur" },
],
iconUrl: [{ required: true, message: "请上传骨片", trigger: "change" }],
iconUrl: [{ required: true, message: "请上传图片", trigger: "change" }],
installationTime: [
{
// type: "date",
......@@ -254,11 +255,18 @@ export default {
this.dialogVisible = false;
data.pipeId = data.pipeId ? data.pipeId : res.data;
this.lineOkCallBack.call(this.gaodeMap, this.target, data);
if (!this.editForm.pipeId) {
this.gaodeMap.newLineObj = null;
this.gaodeMap.createNewLine();
}
this.$message({
type: "success",
offset: 100,
// center:true,
message: `${this.editForm.pipeId ?"修改管道成功":"添加管道成功"}`,
message: `${
this.editForm.pipeId ? "修改管道成功" : "添加管道成功"
}`,
});
}
})
......@@ -294,6 +302,7 @@ export default {
// 图片上传成功
fileFinshed(e) {
this.editForm.iconUrl = e.url;
console.log(this.editForm.iconUrl);
},
// 图片列表移除
listRemove(e) {
......
gassafety-web/src/utils/gaodeMap.js
View file @ b85e12cc
......@@ -31,6 +31,7 @@ class gaodeMap {
lineFlag = false;
mouseTool = null;
myMap = null;
showInfoWindow = null;
//构造函数中设置中央点默认值
constructor(center) {
......@@ -65,6 +66,7 @@ class gaodeMap {
this.newLineObj = null;
this.lineFlag = false;
this.createNewLine();
console.log("map点击事件新建");
})
.catch(() => {});
......@@ -91,9 +93,7 @@ class gaodeMap {
this.districtBoundaries();
}
resetMapCenter(value){
resetMapCenter(value) {
map.setCenter(value);
}
......@@ -345,7 +345,7 @@ class gaodeMap {
case DEVICE_TYPE.PRESSUREGAGE: {
let icon = new AMap.Icon({
//size: new AMap.Size(51, 23),
image: require("../assets/images/yalibiao.png"),
image: require("../assets/images/yalibiao.png")
});
marker.setIcon(icon);
break;
......@@ -383,16 +383,27 @@ class gaodeMap {
lineData: item
}
});
this.polyLines.push(polyline);
// 信息窗体
const dom = createPop(lineInfoWindow, {
obj: { a: 123, editorPage: true, ...item }
obj: { a: 123, editorPage: true, ...item, polyline }
});
console.log("dom", dom.$el);
dom.$el.addEventListener("mouseover", () => {
let options = this.myMap.getStatus();
options.scrollWheel = false;
this.myMap.setStatus(options);
});
dom.$el.addEventListener("mouseout", () => {
let options = this.myMap.getStatus();
options.scrollWheel = true;
this.myMap.setStatus(options);
});
let infoWindow = new AMap.InfoWindow({
isCustom: true,
autoMove: false,
content: dom.$el,
//信息船体偏移量
offset: new AMap.Pixel(0, 0),
......@@ -400,9 +411,10 @@ class gaodeMap {
});
this.newLineAddEvent(polyline);
polyline.infoWindow = infoWindow;
//添加事件
polyline.on("mouseover", e => {
if (this.lineType == 1) return;
// 上方导航的高
const topBar = 81;
// 坐标导航的宽
......@@ -447,12 +459,14 @@ class gaodeMap {
polyline.setOptions({ strokeColor: "#FF5A67" });
infoWindow.setOffset(new AMap.Pixel(X, Y));
infoWindow.open(map, e.lnglat);
// polyline.infoWindow=infoWindow;
this.showInfoWindow = infoWindow;
// const
});
polyline.on("mouseout", e => {
polyline.setOptions({ strokeColor: "#F7FE38" });
infoWindow.close();
// infoWindow.close();
});
// 计算info的位置
// function infoPosition() {}
......@@ -490,51 +504,8 @@ class gaodeMap {
}
}
// 新建line增加编辑以及右键菜单
addEditorAndMenu(obj) {
let polyEditor = new AMap.PolyEditor(map, obj);
let contextMenu = new AMap.ContextMenu();
contextMenu.addItem(
"编辑",
function() {
polyEditor.setTarget(obj);
polyEditor.open();
contextMenu.close();
},
0
);
contextMenu.addItem(
"结束编辑",
function() {
polyEditor.close();
contextMenu.close();
console.log(obj.getPath());
},
0
);
contextMenu.addItem(
"保存",
() => {
polyEditor.close();
contextMenu.close();
this.addPolyline([obj.getPath()]);
map.remove(obj);
},
0
);
contextMenu.addItem(
"删除",
function() {
polyEditor.setTarget(obj);
polyEditor.open();
contextMenu.close();
},
0
);
obj.on("rightclick", e => {
if (this.lineType == 1) {
contextMenu.open(map, e.lnglat);
}
});
closeLineInfoWindow() {
this.showInfoWindow && this.showInfoWindow.close();
}
// 新line与老line添加点击事件
newLineAddEvent(obj) {
......@@ -547,7 +518,10 @@ class gaodeMap {
console.log("lineType", this.lineType);
this.lineFlag = true;
// 每次点击关闭然后再次激活
this.mouseTool.close();
// 如果是新线就关闭
if (obj.getExtData().type == "newLine") {
this.mouseTool.close();
}
// 删除
if (this.lineType == 3) {
this.lineDelete(obj);
......@@ -601,8 +575,11 @@ class gaodeMap {
});
}
lineDelete(obj) {
const {
lineData: { pipeName }
} = obj.getExtData();
vue
.$confirm("是否删除该管道", "提示", {
.$confirm(`是否删除${pipeName}`, "提示", {
// confirmButtonText: "确定",
// cancelButtonText: "取消",
type: "warning"
......@@ -626,6 +603,8 @@ class gaodeMap {
// center:true,
message: "删除成功!"
});
// 关闭当前线条的infowindow
// this.closeLineInfoWindow();
});
})
.catch(() => {
......
gassafety-web/src/views/enterprise/map/index.vue
View file @ b85e12cc
......@@ -169,6 +169,7 @@ export default {
// 左边的Bar修改值
leftBarChange(item) {
// this.leftBarNum= this.leftBarNum != item.value ? item.value:0;
const index = this.leftBarNum.indexOf(item.value);
if (index >= 0) {
this.leftBarNum.splice(index, 1);
......@@ -217,12 +218,15 @@ export default {
},
addDevice() {
if (this.iconClass == "icon-create") {
this.targetNum = this.targetNum != 1 ? 1 : 0;
} else {
if (this.deviceType) {
this.targetNum = 0;
this.createReset();
this.gaoMap.newLineReset();
}
}
if (this.targetNum == 1 && this.createValue == 1) {
......@@ -230,6 +234,9 @@ export default {
} else {
this.gaoMap.lineType = 0;
}
// 关闭当前线条的infowindow
this.gaoMap.closeLineInfoWindow();
this.deviceType = !this.deviceType;
this.gaoMap.mapOperateType = "add";
this.gaoMap.removeMarkerDragg();
......@@ -242,7 +249,7 @@ export default {
this.iconClass = item.icon;
this.createValue = item.value;
this.createLabel = item.label;
if (this.targetNum == 1 && this.createValue == 1) {
// 0是初始，1是新建 2是编辑 3删除
this.gaoMap.lineType = 1;
......@@ -255,6 +262,7 @@ export default {
// 如果不是管道了，把之前的管道清空
this.gaoMap.newLineReset();
// this.createReset();
// 其他
this.gaoMap.draw(this.createValue.toString());
......@@ -370,10 +378,12 @@ export default {
}
},
// 新建下拉列表关闭
// 新建下拉列表关闭 window点击事件
barClose() {
console.log("window");
this.deviceType = false;
// 关闭当前线条的infowindow
this.gaoMap.closeLineInfoWindow()
// 如果没有选择的时候点window 则高亮消失
if (this.targetNum == 1 && this.iconClass == "icon-create") {
this.targetNum = 0;
......
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