Skip to content

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

Merge branch 'develop_jzl'

parents 77e76c21 5295048e
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 923 additions and 192 deletions
gassafety-web/src/components/PopWindow/markerInfoWindow.vue
View file @ b651ddc3
...@@ -13,7 +13,7 @@ ...@@ -13,7 +13,7 @@
<div class="text-wrapper"> <div class="text-wrapper">
<div class="eq-text">设备类型：<span>{{title}}</span></div> <div class="eq-text">设备类型：<span>{{title}}</span></div>
<div class="eq-text">设备型号：<span>{{data.deviceModel}}</span></div> <div class="eq-text">设备型号：<span>{{data.deviceModel}}</span></div>
<div class="eq-text">所属管道：<span>{{data.pipeCode}}</span></div> <div class="eq-text">所属管道：<span>{{data.pipeName}}</span></div>
<div class="eq-text">物联网编号：<span>{{data.iotNo}}</span></div> <div class="eq-text">物联网编号：<span>{{data.iotNo}}</span></div>
</div> </div>
<div class="pic"> <div class="pic">
......
gassafety-web/src/components/PopWindowGis/markerInfoWindow.vue
View file @ b651ddc3
...@@ -22,7 +22,7 @@ ...@@ -22,7 +22,7 @@
设备型号：<span>{{ data.deviceModel }}</span> 设备型号：<span>{{ data.deviceModel }}</span>
</div> </div>
<div class="eq-text"> <div class="eq-text">
所属管道：<span>{{ data.pipeCode }}</span> 所属管道：<span>{{ data.pipeName }}</span>
</div> </div>
<div class="eq-text"> <div class="eq-text">
物联网编号：<span>{{ data.iotNo }}</span> 物联网编号：<span>{{ data.iotNo }}</span>
......
gassafety-web/src/components/PopWindowGis/markerInfoWindowWarn.vue
View file @ b651ddc3
...@@ -22,7 +22,7 @@ ...@@ -22,7 +22,7 @@
设备型号：<span>{{ data.deviceModel }}</span> 设备型号：<span>{{ data.deviceModel }}</span>
</div> </div>
<div class="eq-text"> <div class="eq-text">
所属管道：<span>{{ data.pipeCode }}</span> 所属管道：<span>{{ data.pipeName }}</span>
</div> </div>
<div class="eq-text"> <div class="eq-text">
物联网编号：<span>{{ data.iotNo }}</span> 物联网编号：<span>{{ data.iotNo }}</span>
......
gassafety-web/src/components/PopWindowGis/troubleInfoWindowWarn.vue 0 → 100644
View file @ b651ddc3
<template>
<div class="wrapper">
<span class="dot-left"></span>
<div class="top display-default">
<div class="left text">{{ data.deviceName }}</div>
<div class="right text">
<img
src="../../assets/images/closeBtn.png"
alt=""
@click="map.clearInfoWindow()"
/>
</div>
</div>
<!-- 设备信息 -->
<div class="content">
<div class="eq-content display-default">
<div class="text-wrapper">
<div class="eq-text">
设备类型：<span>{{ title }}</span>
</div>
<div class="eq-text">
设备型号：<span>{{ data.deviceModel }}</span>
</div>
<div class="eq-text">
所属管道：<span>{{ data.pipeName }}</span>
</div>
<div class="eq-text">
物联网编号：<span>{{ data.iotNo }}</span>
</div>
</div>
<div class="pic">
<img v-bind:src="data.iconUrl" alt="" />
</div>
</div>
<!-- 维修人员 -->
<div class="maintain-content">
<el-col :span="11">
<div>
<span>安装日期：</span>
<span>{{
moment(data.installationTime).format("YYYY-MM-DD")
}}</span>
</div>
</el-col>
<el-col :span="13">
<div>
<span>最后巡检日期：</span>
<span>{{ data.inspectionTime ? data.inspectionTime : "-" }}</span>
</div>
</el-col>
<div>
<span>管道所在地址：</span>
<span>{{ data.pipeAddr }}</span>
</div>
<div>
<span>备注信息：</span>
<span>{{ data.remarks }} </span>
</div>
</div>
</div>
<!-- 报警状态 -->
<div class="warn-wrapper" v-if="true">
<div class="warn-content">
<div>
报警状态：<span>报警({{ data.alarmType }})</span>
</div>
<div>
详细信息：<span>{{ data.alarmValue ? data.alarmValue : "-" }}</span>
</div>
<div v-if="!orderId">
工单编号：<span>{{ data.orderId }}</span>
</div>
</div>
<div class="btn">
<span @mousedown.stop="deviceMore">
<el-button class="elbtn" type="primary">设备详情</el-button>
</span>
<span v-if="orderId" @mousedown.stop="createWork">
<el-button
v-if="title == '压力表' || title == '流量计'"
class="elbtn"
type="primary"
>生成工单</el-button
>
</span>
<span v-else @mousedown.stop="checkWork">
<el-button class="elbtn" type="primary">查看工单</el-button>
</span>
</div>
</div>
</div>
</template>
<script>
import moment from "moment";
//line移入时的的infowindow
export default {
props: {
obj: { typs: Object },
title: "",
data: {},
map: null,
},
data() {
return {
deviceType: {
1: "调压箱",
2: "阀门井",
3: "流量计",
4: "智能燃气表",
},
};
},
computed: {
orderId() {
// 如果已经生成过工单，就不能再次生成了
// return this.data.orderId ? false : true;
return this.data.orderId ? false : true;
},
},
methods: {
moment,
createWork() {
// 控制外层弹框
// console.log(this.data.view.$refs.CreateWork);
this.data.view.$refs.CreateWork.alarmId = this.data.alarmId;
this.data.view.$refs.CreateWork.open = true;
this.data.view.$refs.CreateWork.gaoMap = this.data.view.gaoMap;
// 改变外层回调
// this.data.view.CreateWorkCallBack = this.CreateWorkCallBack;
this.data.view.alarmObjChange({
alarmId: this.data.alarmId,
type: "device",
});
},
// CreateWorkCallBack(e) {
// // console.log("生成工单后传过来的参数", e);
// // console.log("markerCallBack");
// const marker = this.data.view.gaoMap.markers.filter((item) => {
// return item.getExtData().alarmId == this.data.alarmId;
// })[0];
// console.log("marer.getExtData()", marker.getExtData());
// let options = marker.getExtData();
// // 暂时传值，到时候回重新刷新
// options.orderId = e;
// marker.setExtData(options);
// },
deviceMore() {
this.data.view.$router.push({
path: "/dataMonitoring/alarmdetail",
query: {
alarmId: this.data.alarmId,
dcviceType: this.deviceType[this.data.deviceType],
},
});
},
// 查看工单
checkWork() {
this.data.view.$router.push({
path: "/workOrder/detail",
query: {
orderId: this.data.orderId,
},
});
},
},
beforeDestroy() {
// this.data.view.createWorkOpen = false;
},
};
</script>
<style lang="scss" scoped>
.wrapper {
width: 406px;
max-height: 430px;
background: #fff;
border-radius: 4px;
box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
overflow: hidden;
.top {
width: 100%;
height: 51px;
background-color: #ff5a67;
.text {
font-weight: 600;
font-size: 16px;
color: #ffffff;
line-height: 51px;
}
.left {
padding-left: 22px;
}
.right {
padding-right: 22px;
img {
cursor: pointer;
}
}
}
.content {
position: relative;
max-height: 300px;
overflow: hidden;
overflow-y: auto;
padding-bottom: 2px;
border-bottom: 1px solid #eeeeee;
.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: 180px;
height: 103px;
// background-color: black;
img {
width: 100%;
height: 100%;
// cursor: pointer;
}
}
}
}
.maintain-content {
width: 100%;
max-height: 119px;
padding-left: 22px;
// padding-right: 22px;
// padding-bottom: 10px;
// padding-top: 16px;
box-sizing: border-box;
// 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;
}
}
}
.warn-wrapper {
.warn-content {
box-sizing: border-box;
padding: 10px 0 2px 22px;
border-bottom: 1px solid #e2e2e2;
color: #fe5966;
& > div {
font-size: 14px;
font-weight: 400;
margin-bottom: 8px;
}
}
.btn {
padding: 16px 0;
text-align: center;
span {
display: inline-block;
padding: 0 10px;
.elbtn {
background-color: #053b6a;
box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
width: 95px;
height: 33px;
border: none;
}
}
}
}
}
.wrapperEditorPage {
}
.display-default {
display: flex;
justify-content: space-between;
}
</style>
gassafety-web/src/utils/gaodeMap.js
View file @ b651ddc3
...@@ -34,6 +34,7 @@ class gaodeMap { ...@@ -34,6 +34,7 @@ class gaodeMap {
mouseTool = null; mouseTool = null;
myMap = null; myMap = null;
showInfoWindow = null; showInfoWindow = null;
view = null;
//构造函数中设置中央点默认值 //构造函数中设置中央点默认值
constructor(center) { constructor(center) {
...@@ -86,6 +87,16 @@ class gaodeMap { ...@@ -86,6 +87,16 @@ class gaodeMap {
// console.log("缩放开始") // console.log("缩放开始")
this.closeInfoWindow(); this.closeInfoWindow();
}); });
this.myMap.on("moveend", () => {
// console.log("缩放开始")
if (!this.onceFlag) {
this.onceFlag = true;
this.view.backFlag = false;
// 让抽屉不在隐身
this.view.drawerOpacity = true;
}
});
this.districtBoundaries(); this.districtBoundaries();
} }
...@@ -987,10 +998,10 @@ class gaodeMap { ...@@ -987,10 +998,10 @@ class gaodeMap {
} }
}); });
let infoWindow = new AMap.InfoWindow({ let infoWindow = new AMap.InfoWindow({
isCustom:true, isCustom: true,
content: `<span style='border:1px solid #80d8ff;background:#fff'>${pipeName}</span>`, content: `<span style='border:1px solid #80d8ff;background:#fff'>${pipeName}</span>`,
anchor: "left-top", anchor: "left-top",
offset: new AMap.Pixel(20, -20), offset: new AMap.Pixel(20, -20)
}); });
polyline.on("mouseover", e => { polyline.on("mouseover", e => {
const options = polyline.getOptions(); const options = polyline.getOptions();
...@@ -1007,7 +1018,7 @@ class gaodeMap { ...@@ -1007,7 +1018,7 @@ class gaodeMap {
map.add(polyline); map.add(polyline);
const path = eval(coordinates)[0]; const path = eval(coordinates)[0];
// map.setFitView(); // map.setFitView();
map.setCenter([+path[0],+path[1]], false) map.setCenter([+path[0], +path[1]], false);
// const lntlat = eval(coordinates)[0]; // const lntlat = eval(coordinates)[0];
// map.panTo(lntlat) // map.panTo(lntlat)
......
gassafety-web/src/utils/gaodeMapView.js
View file @ b651ddc3
...@@ -29,13 +29,14 @@ export const DEVICE_TYPE = { ...@@ -29,13 +29,14 @@ export const DEVICE_TYPE = {
PRESSUREGAGE: "7", PRESSUREGAGE: "7",
INSPECTOR: "8", INSPECTOR: "8",
SMALLINSPECTOR: "workPoint", SMALLINSPECTOR: "workPoint",
TROUBLE:"trouble" TROUBLE: "trouble"
}; };
class gaodeMap { class gaodeMap {
// 所有线的数组 // 所有线的数组
polyLines = []; polyLines = [];
//值班人员的单独数组，轨迹的时候使用 //值班人员的单独数组，轨迹的时候使用
workerManArr = []; workerManArr = [];
troubles=[];
// 值班人员对象的arr // 值班人员对象的arr
workerManMarkArr = []; workerManMarkArr = [];
// 是否开启新增 // 是否开启新增
...@@ -115,7 +116,10 @@ class gaodeMap { ...@@ -115,7 +116,10 @@ class gaodeMap {
if (!this.onceFlag) { if (!this.onceFlag) {
this.onceFlag = true; this.onceFlag = true;
this.view.backFlag = false; this.view.backFlag = false;
// 让抽屉不在隐身
this.view.drawerOpacity = true;
} }
// 每次地图移动结束，就让地图可以缩放 // 每次地图移动结束，就让地图可以缩放
let options = this.myMap.getStatus(); let options = this.myMap.getStatus();
options.scrollWheel = true; options.scrollWheel = true;
...@@ -271,17 +275,14 @@ class gaodeMap { ...@@ -271,17 +275,14 @@ class gaodeMap {
} }
// 隐患 // 隐患
if(DEVICE_TYPE.TROUBLE == markerType){ if (DEVICE_TYPE.TROUBLE == markerType) {
console.log("隐患上图") this.troubles.push(marker)
} }
if ( if (
DEVICE_TYPE.WORKORDER != markerType && DEVICE_TYPE.WORKORDER != markerType &&
DEVICE_TYPE.INSPECTOR != markerType && DEVICE_TYPE.INSPECTOR != markerType &&
DEVICE_TYPE.SMALLINSPECTOR != markerType&& DEVICE_TYPE.SMALLINSPECTOR != markerType &&
DEVICE_TYPE.TROUBLE != markerType DEVICE_TYPE.TROUBLE != markerType
) { ) {
// marker.content = this.getMarketContent(data, markerInfoWindow); // marker.content = this.getMarketContent(data, markerInfoWindow);
...@@ -369,6 +370,7 @@ class gaodeMap { ...@@ -369,6 +370,7 @@ class gaodeMap {
return marker; return marker;
} }
// 值班人员
wokerManOpen = e => { wokerManOpen = e => {
this.markerType = e.target.markerType; this.markerType = e.target.markerType;
e.target.content = this.getMarketContent(e.target.data); e.target.content = this.getMarketContent(e.target.data);
......
gassafety-web/src/views/enterprise/mapView/index.vue
View file @ b651ddc3
...@@ -75,17 +75,14 @@ ...@@ -75,17 +75,14 @@
@callback="CreateWorkCallBack" @callback="CreateWorkCallBack"
/> />
<div ref="drawer" class="drawer" :class="{ back: backFlag }"> <div
ref="drawer"
class="drawer"
:class="{ back: backFlag, opacity: drawerOpacity }"
>
<div class="switch" @click="backFlag = !backFlag"> <div class="switch" @click="backFlag = !backFlag">
<!-- <i
:class="{
'el-icon-arrow-left': !backFlag,
'el-icon-arrow-right': backFlag,
}"
></i> -->
<img v-if="!backFlag" src="@/assets/images/l.png" alt="" /> <img v-if="!backFlag" src="@/assets/images/l.png" alt="" />
<img v-else src="@/assets/images/r.png" alt="" /> <img v-else src="@/assets/images/r.png" alt="" />
<!-- <i class="el-icon-arrow-right"></i> -->
</div> </div>
<!-- 只能动态传入内嵌盒子的高 --> <!-- 只能动态传入内嵌盒子的高 -->
<div class="scroll" :style="{ height: `${boxHeight}px` }"> <div class="scroll" :style="{ height: `${boxHeight}px` }">
...@@ -194,12 +191,8 @@ ...@@ -194,12 +191,8 @@
</div> </div>
</div> </div>
</template> </template>
<!-- 翻页 -->
<div class="goback"> <div class="goback">
<!-- <div class="minMax">
页数
{{ item.nowPage }}/{{ item.maxPage }}
</div> -->
<div class="btn-w"> <div class="btn-w">
<el-button <el-button
class="btn backPage" class="btn backPage"
...@@ -346,6 +339,7 @@ export default { ...@@ -346,6 +339,7 @@ export default {
alarmObj: { alarmId: "", type: "" }, alarmObj: { alarmId: "", type: "" },
// 左边抽屉 内嵌scroll盒子的高 // 左边抽屉 内嵌scroll盒子的高
boxHeight: "", boxHeight: "",
drawerOpacity: false,
//抽屉是否收回 //抽屉是否收回
backFlag: true, backFlag: true,
}; };
...@@ -473,7 +467,8 @@ export default { ...@@ -473,7 +467,8 @@ export default {
}, },
// 隐患 // 隐患
getMapHiddenTroublelist(queryParams) { getMapHiddenTroublelist(queryParams) {
return getMapHiddenTroublelist({ dealStatus: 3 }).then((res) => { return getMapHiddenTroublelist().then((res) => {
console.log(res);
if (res.code == 200) { if (res.code == 200) {
res.data.forEach((item) => { res.data.forEach((item) => {
console.log("隐患", item); console.log("隐患", item);
...@@ -1206,9 +1201,9 @@ export default { ...@@ -1206,9 +1201,9 @@ export default {
}, },
beforeDestroy() { beforeDestroy() {
// 让抽屉继续隐身
console.log("移除window事件"); console.log("移除window事件");
map.clearMap(); map.clearMap();
window.removeEventListener("mousedown", this.barClose); window.removeEventListener("mousedown", this.barClose);
// 关闭scoket // 关闭scoket
if (this.ws) { if (this.ws) {
...@@ -1228,93 +1223,93 @@ export default { ...@@ -1228,93 +1223,93 @@ export default {
bottom: 0; bottom: 0;
width: 100%; width: 100%;
} }
.btn-wrapper { // .btn-wrapper {
position: fixed; // position: fixed;
right: 32px; // right: 32px;
top: 100px; // top: 100px;
.myBtn { // .myBtn {
display: flex; // display: flex;
justify-content: space-between; // justify-content: space-between;
.el-btn { // .el-btn {
width: 144px; // width: 144px;
height: 44px; // height: 44px;
background-color: #053b6a; // background-color: #053b6a;
margin-right: 22px; // margin-right: 22px;
border-radius: 4px; // border-radius: 4px;
text-align: center; // text-align: center;
line-height: 44px; // line-height: 44px;
color: #fff; // color: #fff;
cursor: pointer; // cursor: pointer;
font-size: 18px; // font-size: 18px;
display: flex; // display: flex;
justify-content: space-between; // justify-content: space-between;
&.active { // &.active {
background: #31eaea; // background: #31eaea;
color: #053b6a !important; // color: #053b6a !important;
} // }
.left { // .left {
padding-left: 38px; // padding-left: 38px;
i { // i {
font-size: 18px; // font-size: 18px;
} // }
} // }
.right { // .right {
padding-right: 38px; // padding-right: 38px;
} // }
.newLetf { // .newLetf {
margin-left: 20px; // margin-left: 20px;
} // }
.newRight { // .newRight {
margin-right: 20px; // margin-right: 20px;
position: relative; // position: relative;
i { // i {
position: absolute; // position: absolute;
right: 0px; // right: 0px;
top: 1px; // top: 1px;
font-size: 30px; // font-size: 30px;
} // }
} // }
} // }
} // }
.animate { // .animate {
.option { // .option {
.op-btn { // .op-btn {
width: 144px; // width: 144px;
height: 38px; // height: 38px;
border-radius: 0; // border-radius: 0;
color: #053b6a; // color: #053b6a;
line-height: 38px; // line-height: 38px;
background-color: #fff; // background-color: #fff;
cursor: pointer; // cursor: pointer;
position: relative; // position: relative;
border: 1px solid #cccccc; // border: 1px solid #cccccc;
border-top: 0; // border-top: 0;
&.active { // &.active {
background-image: url("../../../assets/images/bac1.png"); // background-image: url("../../../assets/images/bac1.png");
} // }
.left { // .left {
position: relative; // position: relative;
margin-right: 30px; // margin-right: 30px;
margin-left: 22px; // margin-left: 22px;
i { // i {
position: absolute; // position: absolute;
top: -7px; // top: -7px;
font-size: 20px; // font-size: 20px;
} // }
} // }
.right { // .right {
display: inline-block; // display: inline-block;
font-size: 14px; // font-size: 14px;
line-height: 38px; // line-height: 38px;
} // }
&:hover { // &:hover {
background-image: url("../../../assets/images/bac1.png"); // background-image: url("../../../assets/images/bac1.png");
} // }
} // }
} // }
} // }
} // }
.input-card { .input-card {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
...@@ -1373,6 +1368,11 @@ input[type="radio"] { ...@@ -1373,6 +1368,11 @@ input[type="radio"] {
transition: 0.2s linear; transition: 0.2s linear;
background: #fff; background: #fff;
// background: red; // background: red;
opacity: 0;
// 优化抽屉出来回去
&.opacity {
opacity: 1;
}
&.back { &.back {
left: -348px; left: -348px;
} }
...@@ -1439,21 +1439,21 @@ input[type="radio"] { ...@@ -1439,21 +1439,21 @@ input[type="radio"] {
// border-right: 1px solid #cccccc; // border-right: 1px solid #cccccc;
box-sizing: border-box; box-sizing: border-box;
// padding-left: 5px; // padding-left: 5px;
color: #053B6A; color: #053b6a;
font-weight: 600; font-weight: 600;
} }
} }
.deviceList { .deviceList {
cursor: pointer; cursor: pointer;
margin-bottom: 2px; margin-bottom: 2px;
box-sizing: border-box; box-sizing: border-box;
border-bottom: 1px solid #053b6a00; border-bottom: 1px solid #053b6a00;
color: #1D1D1D; color: #1d1d1d;
&:hover { &:hover {
box-sizing: border-box; box-sizing: border-box;
border-bottom: 1px solid #053b6a; border-bottom: 1px solid #053b6a;
color: #053B6A; color: #053b6a;
font-weight: 600;
} }
&.topActive { &.topActive {
// border-top: 1px solid #cccccc; // border-top: 1px solid #cccccc;
...@@ -1589,18 +1589,6 @@ input[type="radio"] { ...@@ -1589,18 +1589,6 @@ input[type="radio"] {
// width: 14px; // width: 14px;
// height: 14px; // height: 14px;
padding: 2px; padding: 2px;
&:active {
// border-color: #053b6a;
// color: #053b6a;
// outline: none;
}
&:hover {
// background: #053b6a;
// color: #053b6a;
}
}
.goPage {
// margin-left: 0;
} }
.btn-w-num { .btn-w-num {
display: inline-block; display: inline-block;
...@@ -1621,7 +1609,6 @@ input[type="radio"] { ...@@ -1621,7 +1609,6 @@ input[type="radio"] {
border-radius: 40%; border-radius: 40%;
overflow: hidden; overflow: hidden;
cursor: pointer; cursor: pointer;
// background: #fff;
i { i {
background: #fff; background: #fff;
} }
......
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