Skip to content

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

分离地图

parent fc10f4fc
Show whitespace changes
Inline Side-by-side
Showing with 661 additions and 0 deletions
gassafety-web/src/views/enterprise/mapView/index.vue 0 → 100644
View file @ 67bdde22
<template>
<div>
<div style="width: 100vw; height: 100vh" id="container"></div>
<div class="btn-wrapper">
<div class="myBtn">
<div
class="el-btn"
:class="{ active: targetNum == 1 }"
@click.stop="addDevice"
>
<template v-if="iconClass == 'icon-create'">
<span class="left">
<i class="iconfont" :class="iconClass" />
</span>
<span class="right">{{ createLabel }}</span>
</template>
<template v-else>
<span class="newLetf">{{ createLabel }}</span>
<span class="newRight">
<i class="iconfont" :class="iconClass" />
</span>
</template>
</div>
<div
class="el-btn"
:class="{ active: targetNum == 2 }"
@click.stop="editDevice"
>
<span class="left">
<i class="iconfont icon-compile" />
</span>
<span class="right">编辑</span>
</div>
<div
class="el-btn"
:class="{ active: targetNum == 3 }"
@click.stop="deleteDevice"
>
<span class="left">
<i class="iconfont icon-delete" />
</span>
<span class="right">删除</span>
</div>
</div>
<div class="animate">
<el-collapse-transition>
<div v-show="deviceType">
<div v-for="item in changeBtnData" :key="item.value" class="option">
<div
class="op-btn"
:class="{ active: item.value == createValue }"
@click.stop="createChange($event, item)"
>
<span class="left">
<i class="iconfont" :class="item.icon" />
</span>
<span class="right">{{ item.label }}</span>
</div>
</div>
</div>
</el-collapse-transition>
</div>
</div>
<el-input
v-model="keyWord"
placeholder="点击输入"
id="tipinput"
class="search-input"
/>
<el-button icon="el-icon-search" class="search-but" @click="search()"
>搜索</el-button
>
<el-button icon="el-icon-refresh" class="refresh-but" @click="refreshMap()"
>重置</el-button
>
<div class="leftBar-wrapper">
<div
v-for="item in changeBtnData"
:key="item.value"
class="box"
:class="{ active: leftBarNum.indexOf(item.value) >= 0 }"
@click="leftBarChange(item)"
>
<div class="left">
<i class="iconfont" :class="item.icon"></i>
</div>
<div class="right">
{{ item.label }}
</div>
<i class="el-icon-check"></i>
</div>
</div>
</div>
</template>
<script>
import gaodeMap from "utils/gaodeMap.js";
import { pipeAllInfoList } from "@/api/device/pipe.js";
import { map, DEVICE_TYPE, mapOperateType } from "utils/gaodeMap.js";
import { getAllDeviceInfo } from "@/api/device/deviceInfo";
export default {
data() {
return {
gaoMap: null,
deviceType: false,
value: "",
operateType: "",
radio1: "",
// 1新建，2编辑，3删除,点按钮变色
targetNum: 0,
// 左边的bar的active判定
leftBarNum: [1, 2, 3, 4, 7],
// 新建里的值
iconClass: "icon-create",
createValue: 0,
createLabel: "新增",
changeBtnData: [
{
value: 1,
icon: "icon-gd",
label: "管道",
},
{
value: 2,
icon: "icon-tyx",
label: "调压箱",
},
{
value: 3,
icon: "icon-fmj",
label: "阀门井",
},
{
value: 4,
icon: "icon-llj",
label: "流量计",
},
{
value: 7,
icon: "icon-ylb",
label: "压力表",
},
],
keyWord: "",
};
},
mounted() {
this.initMap();
},
methods: {
initMap() {
let gaoMap = new gaodeMap("石家庄");
this.gaoMap = gaoMap;
window.addEventListener("click", this.barClose);
gaoMap.addMouseTool();
gaoMap.searchTips("tipinput");
this.getDeviceInfo();
this.getPipeList();
},
// 左边的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);
} 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") {
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) {
this.gaoMap.lineType = 1;
} else {
this.gaoMap.lineType = 0;
this.gaoMap.mouseTool.close();
}
// 关闭当前的infowindow
this.gaoMap.closeInfoWindow();
this.deviceType = !this.deviceType;
this.gaoMap.mapOperateType = "add";
this.gaoMap.removeMarkerDragg();
},
// 选择新建项目哪个
createChange(e, item) {
// e.stopPropagation();
this.deviceType = false;
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;
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() {
this.iconClass = "icon-create";
this.createValue = 0;
this.createLabel = "新建";
this.gaoMap.closeAddMarker();
},
editDevice() {
this.targetNum = this.targetNum != 2 ? 2 : 0;
this.gaoMap.lineType = this.targetNum;
if (this.targetNum != 2) {
this.gaoMap.linePolyEditorAllClose();
this.gaoMap.removeMarkerDragg();
this.gaoMap.mapOperateType = "normal";
} else {
// 如果正在新建线条，则清空
this.gaoMap.newLineReset();
this.deviceType = false;
this.gaoMap.mapOperateType = "edit";
this.gaoMap.addMarkerDragg();
// this.gaoMap.placeSearch.clear();
this.gaoMap.closeAddMarker();
}
// 关闭当前的infowindow
this.gaoMap.closeInfoWindow();
this.createReset();
},
deleteDevice() {
this.targetNum = this.targetNum != 3 ? 3 : 0;
this.gaoMap.lineType = this.targetNum;
if (this.targetNum != 3) {
this.gaoMap.removeMarkerDragg();
this.gaoMap.mapOperateType = "normal";
} else {
// 如果正在新建线条，则清空
this.gaoMap.newLineReset();
// 清空所有正在编辑状态的线
this.gaoMap.linePolyEditorAllClose();
this.deviceType = false;
this.gaoMap.mapOperateType = "delete";
this.gaoMap.removeMarkerDragg();
//this.gaoMap.placeSearch.clear();
this.gaoMap.closeAddMarker();
}
// 关闭当前的infowindow
this.gaoMap.closeInfoWindow();
this.createReset();
},
selectDeviceType(val) {
// if("add" == this.operationType){
this.gaoMap.draw(val);
// }
this.deviceType = false;
this.value = "";
// 如果选择的是新建管道
if (val == 1) {
this.gaoMap.lineType = 1;
this.gaoMap.createNewLine();
}
},
getDeviceInfo(queryParams) {
this.loading = true;
getAllDeviceInfo(queryParams).then((response) => {
if (response.code == 200) {
for (var i = 0; i < response.data.length; i++) {
if ("1" == response.data[i].deviceType) {
this.gaoMap.addMarker(
DEVICE_TYPE.REGEULATORBOX,
response.data[i]
);
}
if ("2" == response.data[i].deviceType) {
this.gaoMap.addMarker(DEVICE_TYPE.VALUEWELL, response.data[i]);
}
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]);
}
}
}
this.loading = false;
});
},
getPipeList(queryParams) {
pipeAllInfoList(queryParams).then((res) => {
console.log("管道", res);
if (res.code == 200) {
this.gaoMap.addPolyline(res.data);
}
});
},
searchClear() {
this.iconClass = "icon-create";
this.createValue = 0;
this.createLabel = "新建";
this.targetNum = 0;
this.gaoMap.lineType = 0;
this.gaoMap.newLineReset();
this.gaoMap.linePolyEditorAllClose();
this.gaoMap.closeAddMarker();
this.gaoMap.removeMarkerDragg();
this.gaoMap.mapOperateType = "normal";
// map.remove(this.gaodeMap.markerOverlays);
},
search() {
this.searchClear();
map.clearMap();
this.gaoMap.placeSearch.clear();
if (!(!this.gaoMap.searchSelectAdcode && !this.gaoMap.searchSelectName)) {
this.gaoMap.placeSearch.setCity(this.gaoMap.searchSelectAdcode);
this.gaoMap.placeSearch.search(this.gaoMap.searchSelectName);
this.getDeviceInfo({ deviceName: this.gaoMap.searchSelectName });
this.gaoMap.polyLines = [];
this.getPipeList({ pipeName: this.gaoMap.searchSelectName });
this.gaoMap.searchSelectAdcode = undefined;
this.gaoMap.searchSelectName = undefined;
} else {
this.gaoMap.placeSearch.search(this.keyWord);
this.getDeviceInfo({ deviceName: this.keyWord });
this.gaoMap.polyLines = [];
this.getPipeList({ pipeName: this.keyWord });
}
},
// 新建下拉列表关闭 window点击事件
barClose() {
console.log("window");
this.deviceType = false;
// 关闭当前线条的infowindow
this.gaoMap.closeInfoWindow();
// 如果没有选择的时候点window 则高亮消失
if (this.targetNum == 1 && this.iconClass == "icon-create") {
this.targetNum = 0;
}
// 辅助新建重新画线
// if (!this.gaoMap.lineFlag || this.gaoMap.lineType != 1) return;
console.log("利用window把lineFlagh恢复");
this.gaoMap.lineFlag = false;
// this.gaoMap.createNewLine();
},
refreshMap() {
this.iconClass = "icon-create";
this.createValue = 0;
this.createLabel = "新建";
this.targetNum = 0;
map.clearMap();
this.initMap();
},
},
beforeDestroy() {
console.log("移除window事件");
window.removeEventListener("click", this.barClose);
},
};
</script>
<style lang="scss" scoped>
// 左边的bar
.leftBar-wrapper {
position: fixed;
left: 100px;
top: 150px;
.box {
width: 180px;
height: 48px;
display: flex;
background-color: #ffffff;
box-sizing: border-box;
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;
// > i {
// color:#fff;
// }
}
&:hover .left,
&:hover .right {
// color: #ffffff;
}
&.active {
// background-color: #053b6a;
.left,
.right {
color: #053b6a;
}
> i {
color: #053b6a;
}
}
.left {
color: #053b6a;
line-height: 48px;
margin-left: 40px;
}
.right {
color: #1d1d1d;
line-height: 48px;
margin-left: 20px;
}
}
}
.btn-wrapper {
position: fixed;
right: 32px;
top: 100px;
.myBtn {
display: flex;
justify-content: space-between;
.el-btn {
width: 144px;
height: 44px;
background-color: #053b6a;
margin-right: 22px;
border-radius: 4px;
text-align: center;
line-height: 44px;
color: #fff;
cursor: pointer;
font-size: 18px;
display: flex;
justify-content: space-between;
&.active {
background: #31eaea;
color: #053b6a !important;
}
.left {
padding-left: 38px;
i {
font-size: 18px;
}
}
.right {
padding-right: 38px;
}
.newLetf {
margin-left: 20px;
}
.newRight {
margin-right: 20px;
position: relative;
i {
position: absolute;
right: 0px;
top: 1px;
font-size: 30px;
}
}
}
}
.animate {
.option {
.op-btn {
width: 144px;
height: 38px;
border-radius: 0;
color: #053b6a;
line-height: 38px;
background-color: #fff;
cursor: pointer;
position: relative;
border: 1px solid #cccccc;
border-top: 0;
&.active {
background-image: url("../../../assets/images/bac1.png");
}
.left {
position: relative;
margin-right: 30px;
margin-left: 22px;
i {
position: absolute;
top: -7px;
font-size: 20px;
}
}
.right {
display: inline-block;
font-size: 14px;
line-height: 38px;
}
&:hover {
background-image: url("../../../assets/images/bac1.png");
}
}
}
}
}
.input-card {
display: flex;
flex-direction: column;
min-width: 0;
word-wrap: break-word;
background-color: #fff;
background-clip: border-box;
border-radius: 0.25rem;
width: 22rem;
border-width: 0;
border-radius: 0.4rem;
box-shadow: 0 2px 6px 0 rgba(114, 124, 245, 0.5);
position: fixed;
bottom: 1rem;
right: 1rem;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
padding: 0.75rem 1.25rem;
}
.input-item {
position: relative;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-ms-flex-align: center;
align-items: center;
width: 100%;
height: 2.2rem;
}
input[type="checkbox"],
input[type="radio"] {
box-sizing: border-box;
padding: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: 0;
margin: 0 0.5rem 0 0;
}
.btn {
display: inline-block;
font-weight: 400;
text-align: center;
white-space: nowrap;
vertical-align: middle;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
border: 1px solid transparent;
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
background-color: transparent;
background-image: none;
color: #25a5f7;
border-color: #25a5f7;
padding: 0.25rem 0.5rem;
line-height: 1.5;
border-radius: 1rem;
-webkit-appearance: button;
cursor: pointer;
width: 6rem;
margin: 0 1rem 0 2rem;
}
.btn:hover {
color: #fff;
background-color: #25a5f7;
border-color: #25a5f7;
}
.input-text {
width: 4rem;
margin-right: 1rem;
}
.search-input {
position: fixed;
top: 100px;
left: 7%;
width: 240px;
}
.search-but {
position: fixed;
top: 100px;
left: 23%;
width: 85px;
color: white;
background-color: #053b6a;
}
.refresh-but {
position: fixed;
top: 100px;
left: 28%;
width: 85px;
color: white;
background-color: #053b6a;
}
</style>
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