Skip to content

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

提交

parent 8233a107
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 317 additions and 147 deletions
gassafety-web/package.json
View file @ 4fb258dc
......@@ -24,6 +24,7 @@
"js-beautify": "1.13.0",
"js-cookie": "2.2.1",
"jsencrypt": "3.0.0-rc.1",
"moment": "^2.29.1",
"nprogress": "0.2.0",
"quill": "1.3.7",
"screenfull": "5.0.2",
......
gassafety-web/src/api/device/pipe.js
View file @ 4fb258dc
......@@ -10,16 +10,17 @@ export function listPipe(query) {
}
// 查询管道信息详细
export function getPipe(pipeId) {
// 查询管道信息列表
export function pipeAllInfoList(query) {
return request({
url: '/device/pipe/' + pipeId,
method: 'get'
url: '/device/pipe/pipeAllInfoList',
method: 'get',
params: query
})
}
// getAllDeviceInfo
export function getAllDevice(data) {
......
gassafety-web/src/assets/styles/fonticon.scss
View file @ 4fb258dc
@font-face {
font-family: "iconfont"; /* Project id 2692138 */
src: url('//at.alicdn.com/t/font_2692138_odrjf05krdd.woff2?t=1626922957592') format('woff2'),
url('//at.alicdn.com/t/font_2692138_odrjf05krdd.woff?t=1626922957592') format('woff'),
url('//at.alicdn.com/t/font_2692138_odrjf05krdd.ttf?t=1626922957592') format('truetype');
src: url('//at.alicdn.com/t/font_2692138_75daec8zfbv.woff2?t=1627011828763') format('woff2'),
url('//at.alicdn.com/t/font_2692138_75daec8zfbv.woff?t=1627011828763') format('woff'),
url('//at.alicdn.com/t/font_2692138_75daec8zfbv.ttf?t=1627011828763') format('truetype');
}
.iconfont {
......@@ -13,6 +13,10 @@
-moz-osx-font-smoothing: grayscale;
}
.icon-ylb:before {
content: "\e60f";
}
.icon-fmj:before {
content: "\e608";
}
......
gassafety-web/src/components/PopWindow/lineInfoWindow.vue
View file @ 4fb258dc
<template>
<div class="wrapper">
<div class="top display-default">
<div class="left text">裕华路地埋管线</div>
<div class="right text">
<div class="left text">{{ obj.pipeName }}</div>
<div v-if="!obj.editorPage" class="right text">
<img src="../../assets/images/closeBtn.png" alt="" />
</div>
</div>
<!-- 设备信息 -->
<div class="eq-content display-default">
<div class="text-wrapper">
<div class="eq-text">设备编号：<span>aa</span></div>
<div class="eq-text">设备名称：<span>裕华路地埋管线</span></div>
<div class="eq-text">监测介质：<span>甲烷</span></div>
<div class="eq-text">设备状态：<span>报警</span></div>
<div class="eq-text">用户信息：<span>中厨燃气</span></div>
<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>
<div class="eq-text">
<span>管道类型：</span>
<span>{{ ["地埋管线", "地表管线"][obj.pipeType] }}</span>
</div>
<div class="eq-text">
<span>管道压力：</span>
<span>{{
["低押", "中压", "次高压", "高压"][obj.pipePressure]
}}</span>
</div>
</div>
<div class="pic">
<img src="" alt="" />
<img :src="obj.url" alt="" />
</div>
</div>
<!-- 维修人员 -->
<div class="maintain-content">
<div>姓名： <span>高雄</span></div>
<div>电话： <span>13512451234</span></div>
<div>详细信息：<span>管线两端设备压差较大，管线可能泄漏</span></div>
<div>
安装日期：<span>{{ obj.installationTime }}</span>
</div>
<div>
最后巡检日期：<span>{{ obj.inspectionTime }}</span>
</div>
<div>
备注信息；<span>{{ obj.remarks }}</span>
</div>
</div>
<template v-if="!obj.editorPage">
<div class="warn-content">
......@@ -58,7 +82,7 @@ export default {
.top {
width: 100%;
height: 51px;
background-color: #053B6A;
background-color: #053b6a;
.text {
font-weight: 600;
font-size: 16px;
......@@ -74,7 +98,7 @@ export default {
}
.eq-content {
height: 156px;
min-height: 156px;
box-sizing: border-box;
padding: 13px 16px 13px 22px;
border-bottom: 1px solid #e2e2e2;
......@@ -88,6 +112,15 @@ export default {
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;
}
}
}
.pic {
......@@ -137,8 +170,7 @@ export default {
}
}
.wrapperEditorPage{
.wrapperEditorPage {
}
.display-default {
display: flex;
......
gassafety-web/src/utils/gaodeMap.js
View file @ 4fb258dc
......@@ -234,11 +234,11 @@ class gaodeMap {
this.polyLines.push(polyline);
// 信息窗体
const dom = createPop(lineInfoWindow, {
obj: { a: 123 ,editorPage:true}
obj: { a: 123, editorPage: true }
});
console.log("dom", dom.$el);
let infoWindow = new AMap.InfoWindow({
isCustom: true,
content: dom.$el,
......@@ -292,53 +292,55 @@ class gaodeMap {
// 坐标导航的宽
const leftBar = 100;
// 屏幕可视区的宽高
const {clientWidth:windowClientWidth,clientHeight:windowClientHeight} = document.body;
const {
clientWidth: windowClientWidth,
clientHeight: windowClientHeight
} = document.body;
// 弹出的信息窗口的宽高
// const { offsetWidth:infoWindowWidth,offsetHeight:infoWindowHeight} =infoWindow.dom;
// 406,316
const { offsetWidth:infoWindowWidth,offsetHeight:infoWindowHeight} ={offsetWidth:406,offsetHeight:316}
const {
offsetWidth: infoWindowWidth,
offsetHeight: infoWindowHeight
} = { offsetWidth: 406, offsetHeight: 316 };
// 鼠标碰到线后的位置
const {clientX:mouseClientX,clientY:mouseClientY} = e.originEvent;
const { clientX: mouseClientX, clientY: mouseClientY } = e.originEvent;
// 鼠标到左边界的距离
const offsetLeftX= mouseClientX -100;
const offsetLeftX = mouseClientX - 100;
// 鼠标到右边界的距离
const offsetRightX= windowClientWidth-mouseClientX;
const offsetTopY = mouseClientY-81;
const offsetBottomY = windowClientHeight-mouseClientY;
const offsetRightX = windowClientWidth - mouseClientX;
const offsetTopY = mouseClientY - 81;
const offsetBottomY = windowClientHeight - mouseClientY;
const offsetY = mouseClientY -80 -infoWindowHeight;
let X=20,Y=-20;
if(offsetLeftX<=infoWindowWidth){
console.log("靠左了")
X=20;
}else if(offsetRightX<=infoWindowWidth){
console.log("靠右了")
X=-infoWindowWidth-20;
const offsetY = mouseClientY - 80 - infoWindowHeight;
let X = 20,
Y = -20;
if (offsetLeftX <= infoWindowWidth) {
console.log("靠左了");
X = 20;
} else if (offsetRightX <= infoWindowWidth) {
console.log("靠右了");
X = -infoWindowWidth - 20;
}
if(offsetTopY<=infoWindowHeight){
console.log("靠上了")
Y=20
}else if(offsetBottomY<=infoWindowHeight+81){
console.log("靠下了")
Y= -infoWindowHeight-20;
if (offsetTopY <= infoWindowHeight) {
console.log("靠上了");
Y = 20;
} else if (offsetBottomY <= infoWindowHeight + 81) {
console.log("靠下了");
Y = -infoWindowHeight - 20;
}
polyline.setOptions({ strokeColor: "#FF5A67" });
infoWindow.setOffset(new AMap.Pixel(X,Y))
infoWindow.setOffset(new AMap.Pixel(X, Y));
infoWindow.open(map, e.lnglat);
// const
// const
});
polyline.on("mouseout", e => {
polyline.setOptions({ strokeColor: "#F7FE38" });
infoWindow.close();
});
// 计算info的位置
function infoPosition(){
}
// function infoPosition() {}
// polyline.on("rightclick", e => {
// console.log(this.lineType);
......@@ -422,7 +424,9 @@ class gaodeMap {
newLineAddEvent(obj) {
obj.polyEditor = new AMap.PolyEditor(map, obj);
obj.on("click", () => {
console.log(this.lineType)
// 获取当前状态 0普通状态，1是正编辑状态
const { isState, type } = obj.getExtData();
// 如果不是新线的时候并且没点编辑，点击是无效的
if (type != "newLine" && this.lineType != 2) return;
......@@ -434,10 +438,27 @@ class gaodeMap {
console.log(opstions);
obj.setExtData(opstions);
} else {
this.infoWindowPipelineView({ obj, lineType: type });
// 经纬度
const lnglatsArr = obj.getPath().map(item=>([item.lng,item.lat]));
// 管道总长度
const pipeLength = obj.getLength();
// 传回来的数据 如果是新管道就是空
const lineData = type == "newLine" ? {} : obj.getExtData().lineData;
this.infoWindowPipelineView({ target:obj, lineType: type,lnglatsArr, pipeLength,lineData });
}
});
}
// 关闭所有已经上传的线的编辑状态
linePolyEditorAllClose() {
this.polyLines.forEach(item => {
item.polyEditor.close();
// let opstions = obj.getExtData();
// opstions.isState = 1;
item.setExtData({isState:0});
item.setOptions({ strokeColor: "#F7FE38" });
});
}
// 传进组件的会调 点确认的时候调
lineOkCallBack(target) {
target.polyEditor.close();
......@@ -453,11 +474,17 @@ class gaodeMap {
// 上传服务器用的组件
infoWindowPipelineView(options) {
// const {} =options;
const notice = createPop(pipelineView, {
title: "管道",
//线是新线还是老线
lineType: options.lineType,
target: options.obj,
// 数据
// lineData: options.lineData,
// lnglatsArr:options.lnglatsArr,
// pipeLength:options.pipeLength,
// //线是新线还是老线
// lineType: options.lineType,
// target: options.obj,
...options,
//把当前对象当作that传进去
gaodeMap: this,
lineOkCallBack: this.lineOkCallBack
......
gassafety-web/src/views/enterprise/map/index.vue
View file @ 4fb258dc
......@@ -122,6 +122,7 @@
</template>
<script>
import gaodeMap from "utils/gaodeMap.js";
import {pipeAllInfoList} from "@/api/device/pipe.js"
import { map, DEVICE_TYPE, mapOperateType } from "utils/gaodeMap.js";
export default {
data() {
......@@ -171,6 +172,9 @@ export default {
},
mounted() {
let gaoMap = new gaodeMap("石家庄");
pipeAllInfoList().then(res=>{
console.log("管道",res);
})
this.gaoMap = gaoMap;
let lnglats = [
[114.497949, 38.121129],
......@@ -198,6 +202,7 @@ export default {
gaoMap.addMouseTool();
},
methods: {
// 左边的Bar修改值
leftBarChange(item){
// this.leftBarNum= this.leftBarNum != item.value ? item.value:0;
const index = this.leftBarNum.indexOf(item.value);
......@@ -206,7 +211,6 @@ export default {
}else{
this.leftBarNum.push(item.value)
}
},
addDevice() {
if (this.iconClass == "icon-create") {
......@@ -217,8 +221,10 @@ export default {
this.createReset();
}
}
if(this.targetNum ==1 && this.createValue ==1){
this.gaoMap.lineType=1;
}
this.deviceType = !this.deviceType;
this.gaoMap.mapOperateType = "add";
this.gaoMap.removeMarkerDragg();
},
......@@ -228,6 +234,12 @@ 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;
this.gaoMap.createNewLine();
}
},
// 新建按钮还原
createReset() {
......@@ -237,14 +249,20 @@ export default {
},
editDevice() {
this.targetNum = this.targetNum != 2 ? 2 : 0;
this.gaoMap.lineType=this.targetNum;
console.log(this.gaoMap.lineType)
if(this.targetNum!=2) {
this.gaoMap.linePolyEditorAllClose();
}
this.createReset();
this.deviceType = false;
this.gaoMap.lineType = 2;
this.gaoMap.mapOperateType = "edit";
this.gaoMap.addMarkerDragg();
},
deleteDevice() {
this.targetNum = this.targetNum != 3 ? 3 : 0;
this.gaoMap.lineType=this.targetNum;
this.createReset();
this.deviceType = false;
this.gaoMap.mapOperateType = "delete";
......
gassafety-web/yarn.lock
View file @ 4fb258dc
......@@ -5929,6 +5929,11 @@ mkdirp@^1.0.4:
resolved "https://registry.nlark.com/mkdirp/download/mkdirp-1.0.4.tgz#3eb5ed62622756d79a5f0e2a221dfebad75c2f7e"
integrity sha1-PrXtYmInVteaXw4qIh3+utdcL34=
moment@^2.29.1:
version "2.29.1"
resolved "https://registry.npm.taobao.org/moment/download/moment-2.29.1.tgz#b2be769fa31940be9eeea6469c075e35006fa3d3"
integrity sha1-sr52n6MZQL6e7qZGnAdeNQBvo9M=
move-concurrently@^1.0.1:
version "1.0.1"
resolved "https://registry.npm.taobao.org/move-concurrently/download/move-concurrently-1.0.1.tgz#be2c005fda32e0b29af1f05d7c4b33214c701f92"
......
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