Skip to content

P
pingshan-ranqi
Commit 33f3c68b authored by 王晓倩's avatar 王晓倩
Browse files
Options

Merge remote-tracking branch 'origin/master'

parents 2737c109 c0fb9df5
Hide whitespace changes
Inline Side-by-side
Showing with 258 additions and 96 deletions
gassafety-web/package.json
View file @ 33f3c68b
......@@ -30,6 +30,7 @@
"quill": "1.3.7",
"screenfull": "5.0.2",
"sortablejs": "1.10.2",
"velocity-animate": "^1.5.2",
"vue": "2.6.12",
"vue-count-to": "1.0.13",
"vue-cropper": "0.5.5",
......
gassafety-web/src/components/PopWindowGis/detectorOnlyInfoWindow.vue
View file @ 33f3c68b
......@@ -3,7 +3,7 @@
<span class="dot-left"></span>
<div class="top display-default">
<div class="left text ddd" :title="data.deviceName">
{{ data.deviceName }}
{{ data.detectorName }}
</div>
<div class="right text">
<img src="../../assets/images/closeBtn.png" alt="" @click="close" />
......@@ -11,9 +11,9 @@
</div>
<div class="contant">
<div>
<div class="theadtop">
<!-- <div class="theadtop">
设备名称: <span v-un-content>{{ data.detectorName }}</span>
</div>
</div> -->
<div>
设备编号: <span v-un-content>{{ data.detectorCode }}</span>
</div>
......@@ -83,6 +83,7 @@ export default {
background: rgba(7, 29, 51, 0.9);
box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
color: #fff;
font-size: 14px;
// overflow: hidden;
.top {
width: 100%;
......@@ -129,6 +130,9 @@ export default {
}
.contant {
padding: 10px;
&>div div{
margin-bottom:8px;
}
}
}
......
gassafety-web/src/utils/gaodeMapView.js
View file @ 33f3c68b
......@@ -102,7 +102,7 @@ class gaodeMap {
this.closeInfoWindow();
this.polyLinesColorClear();
// 删除独立报警器
this.clearDetectorOnlyOpen();
// this.clearDetectorOnlyOpen();
this.domAllShow();
if (this.lineType != 1 || this.lineFlag) return;
// 除了这里，还要利用vue页面的window事件辅助，当组件出来的时候，就得利用window事件
......@@ -121,6 +121,10 @@ class gaodeMap {
}
// //console.log("抬起来了");
});
this.myMap.on("click", () => {
// 删除独立报警器
this.clearDetectorOnlyOpen();
});
// 地图开始平移删除infowindow
this.myMap.on("movestart", () => {
// console.log("地图平移");
......@@ -402,7 +406,9 @@ class gaodeMap {
this.handleInfoWindowOpenFunc = () => {
this.detectorOnlyOpen(e);
};
this.panTo([data.longitude, data.latitude - 0.08]);
this.panTo([data.longitude, data.latitude - this.view.lntPosition]);
marker.on("mousedown", this.detectorOnlyOpen);
marker.setExtData(data);
// 赋值上去
......@@ -517,6 +523,7 @@ class gaodeMap {
return marker;
}
// 值班人员
wokerManOpen = e => {
this.markerType = e.target.markerType;
......@@ -1243,9 +1250,10 @@ class gaodeMap {
Right: { $el: pageDomRight },
RightPic: { $el: pageDomRightPic }
} = this.view.$refs;
console.log("pageDomRightPic", pageDomRightPic);
// this.mathWho(infowindowDom, pageDomBottom, "bottomDataShow", "bottom");
// this.mathWho(infowindowDom, pageDomRight, "rightDataShow", "right");
this.mathWho(infowindowDom,pageDomRightPic,"RightPicShow","rightpic");
this.mathWho(infowindowDom, pageDomRightPic, "RightPicShow", "rightpic");
}
// domAttr view里的属性
//attr 存储在类里的值
......@@ -1256,6 +1264,7 @@ class gaodeMap {
offsetWidth: aw,
offsetHeight: ah
} = pageDom;
let {
y: by,
x: bx,
......@@ -1278,8 +1287,9 @@ class gaodeMap {
// ax = this.ax;
ax = this[attr + "x"];
}
console.log("ay", ay);
if (by + bh >= ay && bx + bw >= ax) {
console.log(ay + ah >= by && bx + bw >= ax);
if (ay + ah >= by && bx + bw >= ax) {
console.log("隐藏");
this.view[domAttr] = false;
} else {
......@@ -1494,8 +1504,17 @@ class gaodeMap {
})
.forEach(item => {
bool ? item.show() : item.hide();
// 如果独立报警器存在，且属于自身
if (this.detcetorMarker &&this.detcetorMarker.data.detectorId==item.data.userId) {
bool?this.detcetorMarker.show():this.detcetorMarker.hide();
}
});
}
detcetorMarkerShow(bool) {
if (this.detcetorMarker) {
bool ? this.detcetorMarker.show() : this.detcetorMarker.hide();
}
}
lineDelete(obj) {
const {
......
gassafety-web/src/views/enterprise/mapView/components/Center.vue
View file @ 33f3c68b
<template>
<div v-show="show" class="wrapper center">
<div class="left">
<div class="title-wrapper">
<div class="title"></div>
<div class="close" @click="close">
<img src="@/assets/images/closeBtn.png" alt="" />
<transition
v-on:before-enter="beforeEnter"
v-on:enter="enter"
v-on:before-leave="beforeLeave"
v-on:leave="leave"
v-bind:css="false"
>
<div v-show="show" class="wrapper center">
<div class="left">
<div class="title-wrapper">
<div class="title">报警器列表</div>
<div class="close" @click="close">
<img src="@/assets/images/closeBtn.png" alt="" />
</div>
</div>
</div>
<div class="bottom right-bottom-data-left">
<el-table
size="mini"
:data="tableData"
style="width: 100%;"
:height="tableHeight"
class="el-bottom"
>
<!-- :height="tableHeight" -->
<div class="bottom right-bottom-data-left">
<el-table
size="mini"
:data="tableData"
style="width: 100%"
:height="tableHeight"
class="el-bottom"
>
<!-- :height="tableHeight" -->
<el-table-column prop="detectorName" label="设备名称" width="100">
</el-table-column>
<el-table-column prop="detectorCode" label="设备编号" width="200">
</el-table-column>
<el-table-column prop="linkman" label="联系人" width="100">
</el-table-column>
<el-table-column prop="phone" label="联系电话" width="">
</el-table-column>
<el-table-column prop="detectorStatus" label="设备状态" width="100">
</el-table-column>
<el-table-column prop="alarmTime" label="报警时间" width="">
<template slot-scope="scope">
<div v-un-content>{{ scope.row.alarmTime }}</div>
</template>
</el-table-column>
<el-table-column prop="creatTime" label="创建时间" width="">
<template slot-scope="scope">
<div v-un-content>{{ scope.row.creatTime }}</div>
</template>
</el-table-column>
<el-table-column prop="alarmValue" label="定位" width="50">
<template slot-scope="scope">
<div
@click="createDetector(scope)"
class="iconfont icon-bjqdw"
></div>
<!-- {{ scope.row.userId }} -->
</template>
</el-table-column>
</el-table>
<el-table-column prop="detectorName" label="设备名称" width="100">
</el-table-column>
<el-table-column prop="detectorCode" label="设备编号" width="200">
</el-table-column>
<el-table-column prop="linkman" label="联系人" width="100">
</el-table-column>
<el-table-column prop="phone" label="联系电话" width="">
</el-table-column>
<el-table-column prop="detectorStatus" label="设备状态" width="100">
</el-table-column>
<el-table-column prop="alarmTime" label="报警时间" width="">
<template slot-scope="scope">
<div v-un-content>{{ scope.row.alarmTime }}</div>
</template>
</el-table-column>
<el-table-column prop="creatTime" label="创建时间" width="">
<template slot-scope="scope">
<div v-un-content>{{ scope.row.creatTime }}</div>
</template>
</el-table-column>
<el-table-column prop="alarmValue" label="定位" width="50">
<template slot-scope="scope">
<div
@click="createDetector(scope)"
class="iconfont icon-bjqdw"
></div>
<!-- {{ scope.row.userId }} -->
</template>
</el-table-column>
</el-table>
</div>
</div>
</div>
</div>
</transition>
</template>
<script>
import Velocity from "velocity-animate";
import { listDeviceAlarm } from "@/api/dataMonitoring/deviceAlarm";
export default {
......@@ -67,6 +75,9 @@ export default {
},
data() {
return {
// 动画效果的切换
animateChange: 0,
fade: "fade",
tableHeight: 600,
tableData: [
{
......@@ -76,8 +87,9 @@ export default {
city: "普陀区",
address: "上海市普陀区金沙江路",
},
],
moveX: 0,
moveY: 0,
};
},
created() {
......@@ -90,20 +102,115 @@ export default {
console.log(bol);
if (bol) {
console.log(this.detcetorList);
this.tableData=[...this.detcetorList]
this.tableData = [...this.detcetorList];
}
},
},
methods: {
close() {
this.fade = "fade";
this.$parent.centerShow = false;
this.$parent.circleShow = false;
},
// 点击创建点并且定位过去
createDetector(data) {
console.log(data);
this.close();
this.$parent.gaoMap.addMarker("detector_only", data.row);
// 如果有经纬度才能走通，没有套弹框提示
if (data.row.latitude && data.row.longitude) {
this.fade = "scale";
this.$parent.centerShow = false;
this.$parent.circleShow = true;
this.$parent.gaoMap.addMarker("detector_only", data.row);
} else {
this.msgError("数据不完善，无法定位");
}
},
beforeEnter: function (el) {
// 如果点的是关闭
if (this.fade == "fade") {
// 如果点的是定位
el.style.opacity = 0;
console.log(el);
} else {
el.style.transfrom = `translate(${this.moveX},${this.moveY})`;
el.style.transfrom = "scale(0,0)";
}
},
enter: function (el, done) {
if (this.fade == "fade") {
Velocity(
el,
{
opacity: 1,
translateX: "0px",
translateY: "0px",
scaleX: 1,
scaleY: 1,
// scaleX:1,
// scaleY:1
},
{ duration: 0, complete: done }
);
} else {
Velocity(
el,
{
translateX: "0px",
translateY: "0px",
scaleX: 1,
scaleY: 1,
},
{ duration: 300, complete: done }
);
}
},
beforeLeave(el) {
if (this.fade == "fade") {
el.style.opacity = 1;
} else {
el.style.transfrom = "translate(0px,0px)";
el.style.transfrom = "scale(1,1)";
}
},
leave: function (el, done) {
if (this.fade == "fade") {
Velocity(
el,
{
opacity: 0,
},
{ duration: 0, complete: done }
);
} else {
// 列表的位置参数
const { top, left, height, width } = el.getBoundingClientRect();
// 当列表缩下去的右下角的位置参数
const {
top: topC,
left: leftC,
height: heightC,
width: widthC,
} = this.$parent.$refs.circle.getBoundingClientRect();
const moveX = Math.abs(leftC - left) - width / 2 + heightC / 2 + "px";
const moveY = Math.abs(topC - top) - height / 2 + heightC / 2 + "px";
this.moveX = moveX;
this.moveY = moveY;
Velocity(
el,
{
translateX: moveX,
translateY: moveY,
scaleX: 0,
scaleY: 0,
},
{ duration: 300, complete: done }
);
}
},
},
};
......@@ -129,7 +236,7 @@ export default {
// width: 100px;
max-height: 598px;
margin-right: 12px;
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.16);
// box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.16);
// background-color: #fff;
// color: #fff;
font-size: 14px;
......@@ -251,18 +358,5 @@ export default {
.iconFontSize {
font-size: 50px !important;
}
.fade-enter-to,
.fade-leave {
opacity: 1;
}
.fade-leave-active {
transition: opacity 0.5s;
}
.fade-enter-active {
transition: opacity 0s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
opacity: 0;
}
}
</style>
\ No newline at end of file
gassafety-web/src/views/enterprise/mapView/index.vue
View file @ 33f3c68b
......@@ -81,7 +81,7 @@
:list="rightBototmData"
/>
<!-- 右边 -->
<RightPic v-show="RightPicShow" ref="RightPic"/>
<RightPic v-show="RightPicShow" ref="RightPic" />
<!-- 报警工单 -->
<CreateWork
ref="CreateWork"
......@@ -98,8 +98,12 @@
<Center :show="centerShow" ref="center" :detcetorList="detcetorList" />
<!-- 当报警列表隐藏时，这个显示,点击就让Center回来 -->
<div
@click="centerShow = true"
v-show="!centerShow && gaoMap && gaoMap.detcetorMarker"
@click="
centerShow = true;
circleShow = false;
"
v-show="circleShow"
ref="circle"
class="circle"
>
列表
......@@ -570,7 +574,7 @@ export default {
rightBototmData: [],
bottomDataShow: true,
rightDataShow: true,
RightPicShow:true,
RightPicShow: true,
// 如果右边与下面重叠了，bottom要往左移
bottomMarginRight: false,
// 是否显示生成工单弹框
......@@ -591,7 +595,11 @@ export default {
// Center组件的参数，也就是报警用户的的list
centerShow: false,
// 右下角的圆
circleShow: false,
circleNum: 0,
detcetorList: [],
lntPosition: 0,
};
},
created() {
......@@ -834,6 +842,7 @@ export default {
console.log("queryParams", res);
if (res.code == 200) {
this.detcetorList = res.data;
this.$refs.center.fade="fade";
this.centerShow = true;
// 传递回去
return res.code;
......@@ -1326,15 +1335,30 @@ export default {
const b =
(Number(item.list[0].lnglat[1]) + Number(item.list[0].path[1])) /
2;
path = [a, b - 0.08];
path = [a, b - this.lntPosition];
} else {
path = [item.list[0].path[0], item.list[0].path[1] - 0.08];
path = [
item.list[0].path[0],
item.list[0].path[1] - this.lntPosition,
];
}
this.gaoMap.panTo(path);
}
}
},
panToo(iten, item) {
// 如果没有经纬度
if (!iten.path[0] || !iten.path[1]) {
this.msgError("数据不完善，无法定位");
return;
}
// 动画模式归位
this.$refs.center.fade = "fade";
// 点击任何一个功能元素的时候，列表都要消失
this.centerShow = false;
// 右下角的圆也要消失
this.circleShow = false;
this.domAllShow();
// 如果没打对勾，就啥也不干
if (!this.leftBarNum.includes(item.value)) return;
......@@ -1343,7 +1367,7 @@ export default {
// 如果地图太大了就吸纳是不出来infowindow了，所以要固定缩放比例
// 所有线条颜色还原
this.gaoMap.polyLinesColorClear();
this.gaoMap.myMap.setZoom(12);
// this.gaoMap.myMap.setZoom(12);
if (item.list.length > 0) {
if (this.leftBarNum.includes(item.value)) {
let path;
......@@ -1351,12 +1375,12 @@ export default {
const a = (Number(iten.lnglat[0]) + Number(iten.path[0])) / 2;
const b = (Number(iten.lnglat[1]) + Number(iten.path[1])) / 2;
//屏幕移动的位置
path = [a, b - 0.08];
path = [a, b - this.lntPosition];
// 线条infowindow显示中间,保留六位转换字符串，否则有时候会出现一些问题
iten.infoPath = [a.toFixed(6), b.toFixed(6)];
console.log(path);
} else {
path = [iten.path[0], iten.path[1] - 0.08];
path = [iten.path[0], iten.path[1] - this.lntPosition];
}
// const path =
// item.value == 1
......@@ -1404,8 +1428,8 @@ export default {
if (
iten.infoPath[0] - lng >= -0.00001 &&
iten.infoPath[0] - lng <= 0.00001 &&
iten.infoPath[1] - (lat + 0.08) >= -0.00001 &&
iten.infoPath[1] - (lat + 0.08) <= 0.00001
iten.infoPath[1] - (lat + this.lntPosition) >= -0.00001 &&
iten.infoPath[1] - (lat + this.lntPosition) <= 0.00001
) {
this.gaoMap.leftListClick = false;
this.gaoMap.polylineMouseOver(e);
......@@ -1430,8 +1454,11 @@ export default {
lnglat: iten.path,
};
// 如果是原地不动，就直接执行
// if (iten.path[0] == lng && iten.path[1] == lat + 0.08) {
if (iten.path[0] == lng && iten.path[1] >= lat + 0.08 - 0.000001) {
// if (iten.path[0] == lng && iten.path[1] == lat + this.lntPosition) {
if (
iten.path[0] == lng &&
iten.path[1] >= lat + this.lntPosition - 0.000001
) {
this.gaoMap.leftListClick = false;
this.gaoMap.infoOpen(e);
return;
......@@ -1452,8 +1479,11 @@ export default {
lnglat: iten.path,
};
// 如果是原地不动，就直接执行
// if (iten.path[0] == lng && iten.path[1] == lat + 0.08) {
if (iten.path[0] == lng && iten.path[1] >= lat + 0.08 - 0.000001) {
// if (iten.path[0] == lng && iten.path[1] == lat + this.lntPosition) {
if (
iten.path[0] == lng &&
iten.path[1] >= lat + this.lntPosition - 0.000001
) {
this.gaoMap.leftListClick = false;
this.gaoMap.troubleOpen(e);
return;
......@@ -1475,9 +1505,12 @@ export default {
lnglat: iten.path,
};
// 如果是原地不动，就直接执行
// if (iten.path[0] == lng && iten.path[1] == lat + 0.08) {
// if (iten.path[0] == lng && iten.path[1] == lat + this.lntPosition) {
// console.log(iten.path[0] , iten.path[1] ,lat+0.06,lng)
if (iten.path[0] == lng && iten.path[1] >= lat + 0.08 - 0.000001) {
if (
iten.path[0] == lng &&
iten.path[1] >= lat + this.lntPosition - 0.000001
) {
this.gaoMap.leftListClick = false;
this.gaoMap.wokerManOpen(e);
return;
......@@ -1498,9 +1531,12 @@ export default {
lnglat: iten.path,
};
// 如果是原地不动，就直接执行
// if (iten.path[0] == lng && iten.path[1] == lat + 0.08) {
// if (iten.path[0] == lng && iten.path[1] == lat + this.lntPosition) {
// console.log(iten.path[0] , iten.path[1] ,lat+0.06,lng)
if (iten.path[0] == lng && iten.path[1] >= lat + 0.08 - 0.000001) {
if (
iten.path[0] == lng &&
iten.path[1] >= lat + this.lntPosition - 0.000001
) {
this.gaoMap.leftListClick = false;
this.gaoMap.videoOpen(e);
return;
......@@ -1522,9 +1558,12 @@ export default {
lnglat: iten.path,
};
// 如果是原地不动，就直接执行
// if (iten.path[0] == lng && iten.path[1] == lat + 0.08) {
// if (iten.path[0] == lng && iten.path[1] == lat + this.lntPosition) {
// console.log(iten.path[0] , iten.path[1] ,lat+0.06,lng)
if (iten.path[0] == lng && iten.path[1] >= lat + 0.08 - 0.000001) {
if (
iten.path[0] == lng &&
iten.path[1] >= lat + this.lntPosition - 0.000001
) {
this.gaoMap.leftListClick = false;
this.gaoMap.detectorOpen(e);
return;
......
gassafety-web/yarn.lock
View file @ 33f3c68b
......@@ -8914,6 +8914,11 @@ vary@~1.1.2:
resolved "https://registry.npm.taobao.org/vary/download/vary-1.1.2.tgz#2299f02c6ded30d4a5961b0b9f74524a18f634fc"
integrity sha1-IpnwLG3tMNSllhsLn3RSShj2NPw=
velocity-animate@^1.5.2:
version "1.5.2"
resolved "https://registry.nlark.com/velocity-animate/download/velocity-animate-1.5.2.tgz#5a351d75fca2a92756f5c3867548b873f6c32105"
integrity sha1-WjUddfyiqSdW9cOGdUi4c/bDIQU=
vendors@^1.0.0:
version "1.0.4"
resolved "https://registry.npm.taobao.org/vendors/download/vendors-1.0.4.tgz?cache=0&sync_timestamp=1615203486079&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fvendors%2Fdownload%2Fvendors-1.0.4.tgz#e2b800a53e7a29b93506c3cf41100d16c4c4ad8e"
......
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