Skip to content

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

提交

parent 8233a107
Show 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/components/PopWindow/pipelineView.vue
View file @ 4fb258dc
......@@ -4,35 +4,66 @@
:visible.sync="dialogVisible"
:before-close="handleClose"
>
<el-row>
<el-form ref="editForm" :model="editForm" label-width="120px" size="mini">
<el-form-item label="管道id" prop="pipeId">
<el-col>
<el-form-item v-show="false" label="管道id" prop="pipeId">
<el-input
disabled
class="el-input"
v-model="editForm.pipeId"
></el-input>
</el-form-item>
</el-col>
<el-form-item label="企业id" prop="enterpriseId">
<el-col>
<el-form-item v-show="false" label="企业id" prop="enterpriseId">
<el-input disabled v-model="editForm.enterpriseId"></el-input>
</el-form-item>
</el-col>
<el-form-item label="管道名称" prop="pipeName">
<el-input v-model="editForm.pipeName"></el-input>
</el-form-item>
<el-col
><el-form-item label="管道名称" prop="pipeName">
<el-input v-model="editForm.pipeName"></el-input> </el-form-item
></el-col>
<el-col :span="11">
<el-form-item label="管道编号" prop="pipeCode">
<el-input v-model="editForm.pipeCode"></el-input>
</el-form-item>
</el-col>
<el-col :span="11">
<el-form-item label="管道长度" prop="pipeLength">
<el-input v-model="editForm.pipeLength">
<i
slot="suffix"
style="color: #000; font-style: normal; margin-right: 10px"
>米</i
>
</el-input>
</el-form-item>
</el-col>
<el-col>
<el-form-item label="管道所在地址" prop="iconUrl">
<el-input v-model="editForm.iconUrl"></el-input>
</el-form-item>
<el-form-item label="坐标" prop="coordinates">
<el-input disabled v-model="editForm.coordinates"></el-input>
</el-form-item>
<el-form-item label="管道长度" prop="pipeLength">
<el-input disabled v-model="editForm.pipeLength"></el-input>
</el-col>
<el-col>
<el-form-item label="经纬度坐标" prop="coordinates">
<el-card class="box-card">
<div v-text="lnglatsArr"></div>
<!-- [<span
v-for="(item, index) in lnglatsArr"
:key="index"
class="text item"
>
{{`[${item[0]},${item[1]}],`}}
</span>] -->
</el-card>
</el-form-item>
</el-col>
<el-col>
<el-form-item label="管道类型" prop="pipeType">
<!-- 下拉 -->
......@@ -41,34 +72,47 @@
<el-radio label="2">地表管线</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
<el-col>
<el-form-item label="管道压力" prop="pipePressure">
<!-- select -->
<el-radio-group v-model="editForm.pipePressure">
<!-- 1低压，2中压，3次高压，4高压 -->
<el-radio label="1">抵押</el-radio>
<el-radio label="1">低押</el-radio>
<el-radio label="2">中压</el-radio>
<el-radio label="3">此高压</el-radio>
<el-radio label="3">次高压</el-radio>
<el-radio label="4">高压</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
<el-col>
<el-form-item label="上传图片" prop="">
<MyFileUpload listType="picture-card" @resFun="fileFinshed" @remove="listRemove" :fileArr="fileArr" />
<MyFileUpload
listType="picture-card"
@resFun="fileFinshed"
@remove="listRemove"
:fileArr="fileArr"
/>
</el-form-item>
<el-form-item label="设备图片路径" prop="url">
</el-col>
<el-col>
<el-form-item v-show="false" label="设备图片路径" prop="url">
<el-input disabled v-model="editForm.url"></el-input>
</el-form-item>
</el-col>
<el-col>
<el-form-item label="安装日期" prop="installationTime">
<el-col :span="11">
<el-date-picker
type="date"
type="datetime"
placeholder="选择日期"
style="width: 100%"
v-model="editForm.installationTime"
></el-date-picker>
</el-col>
</el-form-item>
</el-col>
<!-- <el-col>
<el-form-item label="最后巡检日期" prop="inspectionTime">
<el-col :span="11">
<el-date-picker
......@@ -79,10 +123,15 @@
></el-date-picker>
</el-col>
</el-form-item>
<el-form-item label="备注信息" prop="textarea">
</el-col> -->
<el-col>
<el-form-item label="备注信息" prop="remarks">
<el-input v-model="editForm.remarks" type="textarea"></el-input>
</el-form-item>
</el-col>
</el-form>
</el-row>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="ok">确 定</el-button>
......@@ -91,9 +140,21 @@
</template>
<script>
import MyFileUpload from "@/components/MyFileUpload";
import { addPipe, updatePipe } from "@/api/device/pipe.js";
export default {
props: {
lineData: {
type: Object,
// default:{}
},
// 经纬度路径
lnglatsArr: {
type: Array,
},
// 管道长度
pipeLength: { type: Number },
title: { type: String },
//回调函数
lineOkCallBack: { type: Function },
gaodeMap: { type: Object },
target: { type: Object },
......@@ -107,23 +168,44 @@ export default {
data() {
return {
// isShow: false,
fileArr:[],
fileArr: [],
editForm: {
pipeType: "1",
pipePressure: "1",
url:"",
url: "",
},
dialogVisible: false,
};
},
created(){
this.fileArr=this.editForm.url !="" ?[{url:this.editForm.url}] : [];
created() {
console.log("lineData", this.lineData, this.lnglatsArr, this.pipeLength);
if (this.lineData?.pipeId) {
this.editForm = { ...this.lineData };
}
this.editForm.coordinates = this.lnglatsArr;
// 如果有图片路径就赋显，如果没有就啥也没有
this.fileArr = this.editForm.url != "" ? [{ url: this.editForm.url }] : [];
},
methods: {
ok() {
console.log(this.editForm);
// console.log(this.editForm.pipeId);
// if(this.editForm.pipeId){
// console.log("更改")
// }else{
// console.log("新增")
// }
const data = { ...this.editForm };
console.log("data", data);
console.log(this.editForm.pipeId);
this.requeset(this.editForm.pipeId).then((res) => {
this.dialogVisible = false;
this.lineOkCallBack.call(this.gaodeMap, this.target);
});
// console.log(this.gaodeMap,this.target)
},
async requeset(id, data) {
id ? console.log("修改") : console.log("新增");
return id ? updatePipe(data) : addPipe(data);
},
show() {
//this.isShow = true;
......@@ -144,14 +226,14 @@ export default {
.catch((_) => {});
},
// 图片上传成功
fileFinshed(e){
fileFinshed(e) {
this.editForm.url = e.url;
},
// 图片列表移除
listRemove(e){
this.editForm.url="";
this.fileArr=[];
}
listRemove(e) {
this.editForm.url = "";
this.fileArr = [];
},
},
};
</script>
......
gassafety-web/src/utils/gaodeMap.js
View file @ 4fb258dc
......@@ -234,7 +234,7 @@ 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);
......@@ -292,43 +292,47 @@ 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 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;
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;
}
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
});
polyline.on("mouseout", e => {
......@@ -336,9 +340,7 @@ class gaodeMap {
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