Skip to content

G
gassafety
Commit 691fc037 authored by 耿迪迪's avatar 耿迪迪
Browse files
Options

地图搜索修改 gengdidi

parents 76e63767 c0c97a07
Hide whitespace changes
Inline Side-by-side
Showing with 228 additions and 104 deletions
gassafety-web/src/components/PopWindow/lineInfoWindow.vue
View file @ 691fc037
......@@ -9,10 +9,10 @@
<!-- 设备信息 -->
<div class="eq-content display-default">
<div class="text-wrapper">
<div :title="obj.pipeName" class="eq-text">
<!-- <div :title="obj.pipeName" class="eq-text">
<span>管道名称：</span>
<span>{{ obj.pipeName }}</span>
</div>
</div> -->
<div class="eq-text">
<span>管道编号：</span>
<span>{{ obj.pipeCode }}</span>
......@@ -23,24 +23,27 @@
</div>
<div class="eq-text">
<span>管道类型：</span>
<span>{{ ["地埋管线", "地表管线"][obj.pipeType] }}</span>
<span>{{ ["地埋管线", "地表管线"][obj.pipeType-1] }}</span>
</div>
<div class="eq-text">
<span>管道压力：</span>
<span>{{
["低押", "中压", "次高压", "高压"][obj.pipePressure]
["低押", "中压", "次高压", "高压"][obj.pipePressure-1]
}}</span>
</div>
</div>
<div class="pic">
<img :src="obj.url" alt="" />
<img :src="obj.iconUrl" alt="" />
</div>
</div>
<div class="maintain-content">
<div>
安装日期：<span>{{ obj.installationTime }}</span>
管道所在地址：<span>{{obj.pipeAddr }}</span>
</div>
<div>
安装日期：<span>{{ moment(obj.installationTime).format("YYYY-MM-DD") }}</span>
</div>
<div>
最后巡检日期：<span>{{ obj.inspectionTime }}</span>
......@@ -64,10 +67,17 @@
<script>
//line移入时的的infowindow
import moment from "moment"
export default {
props: {
obj: { typs: Object },
},
created(){
console.log("created",this.obj)
},
methods:{
moment,
}
};
</script>
......@@ -78,7 +88,7 @@ export default {
background: #fff;
border-radius: 4px;
box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
overflow: hidden;
// overflow: hidden;
.top {
width: 100%;
height: 51px;
......@@ -90,18 +100,18 @@ export default {
line-height: 51px;
}
.left {
padding-left: 22px;
padding-left: 10px;
}
.right {
padding-right: 16px;
padding-right: 10px;
}
}
.eq-content {
min-height: 156px;
box-sizing: border-box;
padding: 13px 16px 13px 22px;
border-bottom: 1px solid #e2e2e2;
padding: 13px 10px 0px 10px;
// border-bottom: 1px solid #e2e2e2;
.text-wrapper {
padding-top: 1px;
& > div {
......@@ -112,7 +122,6 @@ export default {
font-weight: 400;
color: #1d1d1d;
opacity: 1;
& > span {
display: inline-block;
white-space: nowrap;
......@@ -126,18 +135,21 @@ export default {
.pic {
width: 177px;
height: 129px;
background-color: black;
// background-color: black;
img {
width: 100%;
height: 100%;
}
}
}
.maintain-content {
width: 100%;
height: 109px;
padding-left: 22px;
padding-top: 16px;
height: 119px;
padding-left: 10px;
padding-right:10px;
// padding-bottom:10px;
// padding-top: 16px;
box-sizing: border-box;
border-bottom: 1px solid #e2e2e2;
& > div {
......
gassafety-web/src/components/PopWindow/pipelineView.vue
View file @ 691fc037
......@@ -4,7 +4,7 @@
:visible.sync="dialogVisible"
:before-close="handleClose"
>
<el-row >
<el-row>
<el-form
:rules="rules"
ref="editForm"
......@@ -99,7 +99,11 @@
@remove="listRemove"
:fileArr="fileArr"
/>
<el-input v-show="false" disabled v-model="editForm.iconUrl"></el-input>
<el-input
v-show="false"
disabled
v-model="editForm.iconUrl"
></el-input>
</el-form-item>
<!-- <el-form-item v-show="false" label="设备图片路径" prop="iconUrl"> -->
<!-- </el-form-item> -->
......@@ -111,7 +115,7 @@
<el-form-item label="安装日期" prop="installationTime">
<el-col :span="11">
<el-date-picker
type="datetime"
type="date"
placeholder="选择日期"
style="width: 100%"
v-model="editForm.installationTime"
......@@ -141,7 +145,9 @@
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="ok">确 定</el-button>
<el-button :loading="okLoading" type="primary" @click="ok"
>确 定</el-button
>
</span>
</el-dialog>
</template>
......@@ -177,9 +183,10 @@ export default {
data() {
return {
// isShow: false,
okLoading: false,
fileArr: [],
editForm: {
pipeName:"",
pipeName: "",
pipeType: "1",
pipePressure: "1",
iconUrl: "",
......@@ -227,28 +234,39 @@ export default {
this.fileArr = this.lineData.pipeId ? [{ url: this.editForm.iconUrl }] : [];
},
methods: {
mouseup(){
console.log('组件mouseup')
mouseup() {
console.log("组件mouseup");
},
ok() {
this.$refs.editForm.validate((valid)=>{
if(valid){
this.$refs.editForm.validate((valid) => {
if (valid) {
this.okLoading = true;
const data = { ...this.editForm };
data.installationTime = moment(this.editForm.installationTime).format(
"YYYY-MM-DD HH:mm:ss"
);
console.log("data", data);
console.log(this.editForm.pipeId);
this.requeset(this.editForm.pipeId, data).then((res) => {
// 改变this指向，传回去target ，传回去data
if (res.code == 200) {
this.dialogVisible = false;
data.pipeId =data.pipeId ?data.pipeId: res.data;
this.lineOkCallBack.call(this.gaodeMap, this.target, data);
}
});
data.installationTime = moment(this.editForm.installationTime).format(
"YYYY-MM-DD HH:mm:ss"
);
console.log("data", data);
console.log(this.editForm.pipeId);
this.requeset(this.editForm.pipeId, data)
.then((res) => {
// 改变this指向，传回去target ，传回去data
if (res.code == 200) {
this.dialogVisible = false;
data.pipeId = data.pipeId ? data.pipeId : res.data;
this.lineOkCallBack.call(this.gaodeMap, this.target, data);
this.$message({
type: "success",
offset: 100,
// center:true,
message: `${this.editForm.pipeId ?"修改管道成功":"添加管道成功"}`,
});
}
})
.catch(() => {
this.okLoading = false;
});
}
})
});
// console.log(this.gaodeMap,this.target)
},
async requeset(id, data) {
......@@ -270,7 +288,6 @@ export default {
this.$confirm("确认关闭？")
.then((_) => {
done();
})
.catch((_) => {});
},
......
gassafety-web/src/utils/gaodeMap.js
View file @ 691fc037
......@@ -27,7 +27,8 @@ class gaodeMap {
lineType = 0;
// 创建一个新的lineObj
newLineObj = null;
lineFlag =false;
// onceFlag=false;
lineFlag = false;
mouseTool = null;
myMap = null;
......@@ -49,36 +50,26 @@ class gaodeMap {
// mapStyle: 'amap://styles/3b679a15f448a4740ba2ff7524e1a4ae',
});
this.myMap = map;
this.myMap.on("mousedown", e => {
// e.originEvent.stopPropagation();
// console.log(this.mouseTool);
// this.createNewLine()
// console.log(123)
// console.log(this.lineFlag)
// if (this.lineFlag) {
// return;
// }
// console.log("this.newLineObj",this.newLineObj)
// if (this.newLineObj != null) {
// this.newLineObj.polyEditor.close();
// map.remove(this.newLineObj);
// console.log(this.mouseTool);
// }
// console.log("map", e);
});
this.myMap.on("click", e => {
if (this.lineType !=1 ||this.lineFlag) return;
console.log(this.lineFlag);
// this.lineFlag = false;
// this.createNewLine();
// console.log("mapUp")
// if (this.lineType !=1 || this.lineFlag) return;
if (this.lineType != 1 || this.lineFlag) return;
// 除了这里，还要利用vue页面的window事件辅助，当组件出来的时候，就得利用window事件
if (this.newLineObj != null) {
this.newLineObj.polyEditor.close();
map.remove(this.newLineObj);
this.createNewLine();
if (this.newLineObj) {
vue
.$confirm("是否重新画管道")
.then(() => {
this.newLineObj.polyEditor.close();
map.remove(this.newLineObj);
this.newLineObj = null;
this.lineFlag = false;
this.createNewLine();
console.log("map点击事件新建");
})
.catch(() => {});
}
console.log("抬起来了");
// console.log("抬起来了");
});
this.districtBoundaries();
}
......@@ -157,14 +148,17 @@ class gaodeMap {
offset: new AMap.Pixel(0, 5)
});
this.setMarkerIcon(marker);
if(DEVICE_TYPE.WORKORDER != markerType){
if (DEVICE_TYPE.WORKORDER != markerType) {
marker.content = this.getMarketContent(data);
marker.on("mouseover", infoOpen);
marker.on("mouseout", infoClose);
marker.setExtData(data);
that.deviceType = markerType;
let editWindow = that.createInfowindow();
editWindow.fileArr = data.iconUrl != "" && data.iconUrl != undefined ? [{ url: data.iconUrl }] : [];
editWindow.fileArr =
data.iconUrl != "" && data.iconUrl != undefined
? [{ url: data.iconUrl }]
: [];
editWindow.obj = marker;
editWindow.gaoMap = that;
editWindow.map = map;
......@@ -264,16 +258,15 @@ class gaodeMap {
return html;
}
case DEVICE_TYPE.PRESSUREGAGE: {
const dom = createPop(markerInfoWindow,{
const dom = createPop(markerInfoWindow, {
title: "压力表",
data: data,
map:map
map: map
});
const html = dom.$el;
dom.remove();
return html;
}
}
}
......@@ -282,8 +275,13 @@ class gaodeMap {
* @param delType
* @param deviceId
*/
deleteMarker(delType,deviceId){
if(DEVICE_TYPE.REGEULATORBOX == delType || DEVICE_TYPE.VALUEWELL == delType || DEVICE_TYPE.FLOWMETER == delType || DEVICE_TYPE.PRESSUREGAGE == delType){
deleteMarker(delType, deviceId) {
if (
DEVICE_TYPE.REGEULATORBOX == delType ||
DEVICE_TYPE.VALUEWELL == delType ||
DEVICE_TYPE.FLOWMETER == delType ||
DEVICE_TYPE.PRESSUREGAGE == delType
) {
delDeviceInfo(deviceId);
}
}
......@@ -395,9 +393,6 @@ class gaodeMap {
//添加事件
polyline.on("mouseover", e => {
// console.log("屏幕宽高",document.body.clientWidth,document.body.clientHeight)
// console.log('窗口大小',infoWindow.dom.offsetWidth)
// console.log("鼠标的位置",e.originEvent.clientX,e.originEvent.clientY);
// 上方导航的高
const topBar = 81;
// 坐标导航的宽
......@@ -408,8 +403,7 @@ class gaodeMap {
clientHeight: windowClientHeight
} = document.body;
// 弹出的信息窗口的宽高
// const { offsetWidth:infoWindowWidth,offsetHeight:infoWindowHeight} =infoWindow.dom;
// 406,316
const {
offsetWidth: infoWindowWidth,
offsetHeight: infoWindowHeight
......@@ -468,9 +462,10 @@ class gaodeMap {
//当前line状态 0:正常状态 1:正在编辑状态
isState: 0
}
//同Polyline的Option设置
});
// 让它不再等于null
// this.newLineObj={a:123}
}
// 创建出来的新线归位，重置，当点击编辑跟删除的时候
newLineReset() {
......@@ -479,7 +474,9 @@ class gaodeMap {
this.mouseTool.close();
}
if (this.newLineObj) {
this.newLineObj.polyEditor.close();
map.remove(this.newLineObj);
this.newLineObj = null;
}
}
// 新建line增加编辑以及右键菜单
......@@ -537,7 +534,7 @@ class gaodeMap {
// })
obj.on("mousedown", e => {
console.log(e.originEvent);
console.log("lineType",this.lineType);
console.log("lineType", this.lineType);
this.lineFlag = true;
// 每次点击关闭然后再次激活
this.mouseTool.close();
......@@ -575,12 +572,30 @@ class gaodeMap {
}
});
}
// 隐藏所有管道
lineShow(bool) {
bool
? this.polyLines.forEach(item => item.show())
: this.polyLines.forEach(item => item.hide());
if (this.newLineObj) {
bool ? this.newLineObj.show() : this.newLineObj.hide();
}
}
markerShow(type, bool) {
this.markers.forEach(item => {
const { deviceType } = item.getExtData();
if (deviceType == type) {
bool ? item.show() : item.hide();
}
// console.log("deviceType",deviceType);
});
}
lineDelete(obj) {
vue
.$confirm("是否删除该管道", "提示", {
// confirmButtonText: "确定",
// cancelButtonText: "取消",
type: "warning",
type: "warning"
// center: true
})
.then(() => {
......@@ -597,6 +612,8 @@ class gaodeMap {
}
vue.$message({
type: "success",
offset: 100,
// center:true,
message: "删除成功!"
});
});
......@@ -604,6 +621,8 @@ class gaodeMap {
.catch(() => {
vue.$message({
type: "info",
// center:true,
offset: 100,
message: "已取消删除"
});
});
......@@ -612,10 +631,13 @@ class gaodeMap {
linePolyEditorAllClose() {
this.polyLines.forEach(item => {
item.polyEditor.close();
// let opstions = obj.getExtData();
// opstions.isState = 1;
item.setExtData({ isState: 0 });
item.setOptions({ strokeColor: "#F7FE38" });
let opstions = item.getExtData();
opstions.isState = 0;
item.setExtData(opstions);
let attr = item.getOptions();
attr.strokeColor = "#F7FE38";
item.setOptions(attr);
});
}
......@@ -684,24 +706,25 @@ class gaodeMap {
that.markerOverlays.push(e.obj);
}
if (e.obj.getExtData().type == "newLine") {
console.log("挂上菜单");
if (e.obj && e.obj.getExtData().type == "newLine") {
console.log("挂上事件");
that.newLineAddEvent(e.obj);
// 记录这条线
that.newLineObj = e.obj;
// that.mouseTool.close();
// 关闭
that.mouseTool.close();
// 创建一条新线，然后在点地图的时候删除原来的旧线
// that.createNewLine();
// 右键菜单
// that.addEditorAndMenu(e.obj)
that.overlays.push(e.obj);
}
// if(e.obj.getExtData().type=="line"){
// return;
// }
//that.mouseTool.close();
that.overlays.push(e.obj);
});
}
......@@ -814,7 +837,8 @@ class gaodeMap {
});
}
closeAddMarker(){
closeAddMarker() {
this.mouseTool.close();
map.remove(this.markerOverlays);
}
......
gassafety-web/src/views/enterprise/map/index.vue
View file @ 691fc037
......@@ -96,6 +96,7 @@
<div class="right">
{{ item.label }}
</div>
<i class="el-icon-check"></i>
</div>
</div>
</div>
......@@ -116,7 +117,7 @@ export default {
// 1新建，2编辑，3删除,点按钮变色
targetNum: 0,
// 左边的bar的active判定
leftBarNum: [1, 2, 3, 4, 5],
leftBarNum: [1, 2, 3, 4, 7],
// 新建里的值
iconClass: "icon-create",
......@@ -174,6 +175,46 @@ export default {
} else {
this.leftBarNum.push(item.value);
}
// 1,2,3,4,7分别对应数据库type5，1，2，3，4
console.log(this.leftBarNum);
if (this.leftBarNum.includes(1)) {
this.gaoMap.lineShow(true);
}else{
this.gaoMap.lineShow(false);
}
// console.log("marks",this.gaoMap.markers)
// this.gaoMap.markerShow();
if (this.leftBarNum.includes(2)) {
this.gaoMap.markerShow(1,true)
}else{
this.gaoMap.markerShow(1,false)
}
if (this.leftBarNum.includes(3)) {
this.gaoMap.markerShow(2,true)
}else{
this.gaoMap.markerShow(2,false)
}
if (this.leftBarNum.includes(4)) {
this.gaoMap.markerShow(3,true)
}else{
this.gaoMap.markerShow(3,false)
}
if (this.leftBarNum.includes(7)) {
this.gaoMap.markerShow(4,true)
}else{
this.gaoMap.markerShow(4,false)
}
},
addDevice() {
if (this.iconClass == "icon-create") {
......@@ -186,6 +227,8 @@ export default {
}
if (this.targetNum == 1 && this.createValue == 1) {
this.gaoMap.lineType = 1;
} else {
this.gaoMap.lineType = 0;
}
this.deviceType = !this.deviceType;
this.gaoMap.mapOperateType = "add";
......@@ -203,10 +246,21 @@ export default {
if (this.targetNum == 1 && this.createValue == 1) {
// 0是初始，1是新建 2是编辑 3删除
this.gaoMap.lineType = 1;
this.gaoMap.createNewLine();
}else {
if (this.gaoMap.newLineObj == null) {
this.gaoMap.createNewLine();
}
} else {
// 如果不是管道，就归位
this.gaoMap.lineType = 0;
// 如果不是管道了，把之前的管道清空
this.gaoMap.newLineReset();
// this.createReset();
// 其他
this.gaoMap.draw(this.createValue.toString());
}
// 清空所有正在编辑状态的线
this.gaoMap.linePolyEditorAllClose();
},
// 新建按钮还原
createReset() {
......@@ -235,6 +289,9 @@ export default {
this.gaoMap.lineType = this.targetNum;
// 如果正在新建线条，则清空
this.gaoMap.newLineReset();
// 清空所有正在编辑状态的线
this.gaoMap.linePolyEditorAllClose();
this.createReset();
this.deviceType = false;
this.gaoMap.mapOperateType = "delete";
......@@ -271,8 +328,8 @@ export default {
if ("3" == response.data[i].deviceType) {
this.gaoMap.addMarker(DEVICE_TYPE.FLOWMETER, response.data[i]);
}
if("4" == response.data[i].deviceType){
this.gaoMap.addMarker(DEVICE_TYPE.PRESSUREGAGE,response.data[i])
if ("4" == response.data[i].deviceType) {
this.gaoMap.addMarker(DEVICE_TYPE.PRESSUREGAGE, response.data[i]);
}
}
}
......@@ -315,9 +372,10 @@ export default {
this.targetNum = 0;
}
// 辅助新建重新画线
if (!this.gaoMap.lineFlag) return;
// if (!this.gaoMap.lineFlag || this.gaoMap.lineType != 1) return;
console.log("利用window把lineFlagh恢复");
this.gaoMap.lineFlag = false;
this.gaoMap.createNewLine();
// this.gaoMap.createNewLine();
},
refreshMap(){
map.clearMap();
......@@ -348,19 +406,32 @@ export default {
border: 1px solid rgba(0, 0, 0, 0.1);
border-top: none;
cursor: pointer;
position: relative;
> i {
position: absolute;
line-height: 48px;
right: 20px;
color: #fff;
}
&:hover {
background-color: #053b6a;
color: #ffffff;
// background-color: #053b6a;
// color: #ffffff;
// > i {
// color:#fff;
// }
}
&:hover .left,
&:hover .right {
color: #ffffff;
// color: #ffffff;
}
&.active {
background-color: #053b6a;
// background-color: #053b6a;
.left,
.right {
color: #ffffff;
color: #053b6a;
}
> i {
color: #053b6a;
}
}
.left {
......
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