diff --git a/gassafety-web/src/components/PopWindow/lineInfoWindow.vue b/gassafety-web/src/components/PopWindow/lineInfoWindow.vue index ee2972aa9cef3decc3d89360bd44a7de1cc4924c..ef296c8ac7df15a55b865a1c2be3ea90d3e87457 100644 --- a/gassafety-web/src/components/PopWindow/lineInfoWindow.vue +++ b/gassafety-web/src/components/PopWindow/lineInfoWindow.vue @@ -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; + } } } diff --git a/gassafety-web/src/components/PopWindow/pipelineView.vue b/gassafety-web/src/components/PopWindow/pipelineView.vue index 488cdbe7c300b2d1e360a11b3603776d6afb65b3..4fe520e567780ee61f1fefbbbe9608ed899d22e2 100644 --- a/gassafety-web/src/components/PopWindow/pipelineView.vue +++ b/gassafety-web/src/components/PopWindow/pipelineView.vue @@ -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) { diff --git a/gassafety-web/src/utils/gaodeMap.js b/gassafety-web/src/utils/gaodeMap.js index 625513ea452260dd9217ff2160f26503999159ce..17b14980fa01b6b89d8d4cfae09dc94dd632490d 100644 --- a/gassafety-web/src/utils/gaodeMap.js +++ b/gassafety-web/src/utils/gaodeMap.js @@ -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); } @@ -335,7 +335,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; @@ -373,16 +373,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), @@ -390,9 +401,10 @@ class gaodeMap { }); this.newLineAddEvent(polyline); - + polyline.infoWindow = infoWindow; //æ·»åŠ äº‹ä»¶ polyline.on("mouseover", e => { + if (this.lineType == 1) return; // 上方导航的高 const topBar = 81; // åæ ‡å¯¼èˆªçš„å®½ @@ -437,12 +449,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() {} @@ -480,51 +494,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) { @@ -537,7 +508,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); @@ -591,8 +565,11 @@ class gaodeMap { }); } lineDelete(obj) { + const { + lineData: { pipeName } + } = obj.getExtData(); vue - .$confirm("是å¦åˆ 除该管é“", "æ示", { + .$confirm(`是å¦åˆ 除${pipeName}`, "æ示", { // confirmButtonText: "确定", // cancelButtonText: "å–消", type: "warning" @@ -616,6 +593,8 @@ class gaodeMap { // center:true, message: "åˆ é™¤æˆåŠŸ!" }); + // å…³é—当å‰çº¿æ¡çš„infowindow + // this.closeLineInfoWindow(); }); }) .catch(() => { diff --git a/gassafety-web/src/views/enterprise/map/index.vue b/gassafety-web/src/views/enterprise/map/index.vue index 38fac624380cebc0eb470e408585f5ca250629c8..18eddf3e9c69854f052cf03c2d8a2b4ffdefb5dd 100644 --- a/gassafety-web/src/views/enterprise/map/index.vue +++ b/gassafety-web/src/views/enterprise/map/index.vue @@ -102,37 +102,7 @@ @click="search()" >æœç´¢</el-button > - <!-- <el-button - type="primary" - style="position: absolute; top: 100px; left: 75%" - @click="addDevice" - >新增</el-button - > - <el-button - type="primary" - style="position: absolute; top: 100px; left: 82%" - @click="editDevice" - >编辑</el-button - > - <el-button - type="primary" - style="position: absolute; top: 100px; left: 90%" - @click="deleteDevice" - >åˆ é™¤</el-button - > - <el-select - v-model="value" - placeholder="请选择..." - @change="selectDeviceType" - style="position: absolute; top: 150px; left: 75%" - v-if="deviceType" - > - <el-option label="管é“" value="1"></el-option> - <el-option label="调压箱" value="2"></el-option> - <el-option label="阀门井" value="3"></el-option> - <el-option label="æµé‡è®¡" value="4"></el-option> - <el-option label="值ç人员" value="5"></el-option> - </el-select> --> + <div class="leftBar-wrapper"> <div @@ -236,6 +206,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); @@ -284,12 +255,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) { @@ -297,6 +271,9 @@ export default { } else { this.gaoMap.lineType = 0; } + // å…³é—当å‰çº¿æ¡çš„infowindow + this.gaoMap.closeLineInfoWindow(); + this.deviceType = !this.deviceType; this.gaoMap.mapOperateType = "add"; this.gaoMap.removeMarkerDragg(); @@ -309,7 +286,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; @@ -322,6 +299,7 @@ export default { // 如果ä¸æ˜¯ç®¡é“了,把之å‰çš„管é“清空 this.gaoMap.newLineReset(); + // this.createReset(); // 其他 this.gaoMap.draw(this.createValue.toString()); @@ -415,10 +393,12 @@ export default { this.gaoMap.placeSearch.clear(); this.gaoMap.placeSearch.search(this.keyWord); }, - // æ–°å»ºä¸‹æ‹‰åˆ—è¡¨å…³é— + // æ–°å»ºä¸‹æ‹‰åˆ—è¡¨å…³é— window点击事件 barClose() { console.log("window"); this.deviceType = false; + // å…³é—当å‰çº¿æ¡çš„infowindow + this.gaoMap.closeLineInfoWindow() // 如果没有选择的时候点window 则高亮消失 if (this.targetNum == 1 && this.iconClass == "icon-create") { this.targetNum = 0;