Skip to content

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

合并到jzl地图index有改动

parents cdc68b51 5d1d397b
Hide whitespace changes
Inline Side-by-side
Showing with 991 additions and 137 deletions
gassafety-web/package.json
View file @ be178b5c
...@@ -24,6 +24,7 @@ ...@@ -24,6 +24,7 @@
"js-beautify": "1.13.0", "js-beautify": "1.13.0",
"js-cookie": "2.2.1", "js-cookie": "2.2.1",
"jsencrypt": "3.0.0-rc.1", "jsencrypt": "3.0.0-rc.1",
"moment": "^2.29.1",
"nprogress": "0.2.0", "nprogress": "0.2.0",
"quill": "1.3.7", "quill": "1.3.7",
"screenfull": "5.0.2", "screenfull": "5.0.2",
......
gassafety-web/src/assets/styles/fonticon.scss 0 → 100644
View file @ be178b5c
@font-face {
font-family: "iconfont"; /* Project id 2692138 */
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 {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-ylb:before {
content: "\e60f";
}
.icon-fmj:before {
content: "\e608";
}
.icon-llj:before {
content: "\e609";
}
.icon-yh:before {
content: "\e60a";
}
.icon-tyx:before {
content: "\e60b";
}
.icon-yqb:before {
content: "\e60c";
}
.icon-zbry:before {
content: "\e60d";
}
.icon-gd:before {
content: "\e60e";
}
.icon-delete:before {
content: "\e604";
}
.icon-compile:before {
content: "\e603";
}
.icon-create:before {
content: "\e601";
}
gassafety-web/src/components/MyFileUpload/index.vue 0 → 100644
View file @ be178b5c
<template>
<div class="upload-file">
<el-upload
:action="uploadFileUrl"
:before-upload="handleBeforeUpload"
:file-list="fileArr"
:limit="1"
:list-type="listType"
:on-error="handleUploadError"
:on-exceed="handleExceed"
:on-success="handleUploadSuccess"
:on-remove="handleRemove"
:on-preview="handleFileClick"
:show-file-list="true"
:headers="headers"
class="upload-file-uploader"
ref="upload"
>
<!-- 上传按钮 -->
<!-- <el-button size="mini" icon="" type="primary"></el-button> -->
<i class="el-icon-plus"></i>
<!-- 上传提示 -->
<div class="el-upload__tip" slot="tip" v-if="showTip">
请上传
<template v-if="fileSize">
大小不超过 <b style="color: #f56c6c">{{ fileSize }}MB</b>
</template>
<template v-if="fileType">
格式为 <b style="color: #f56c6c">{{ fileType.join("/") }}</b>
</template>
的文件
</div>
</el-upload>
<el-dialog :modal="modal" :visible.sync="dialogVisible">
<img width="100%" :src="dialogImageUrl" alt="" />
</el-dialog>
<!-- 文件列表 -->
<!-- <transition-group class="upload-file-list el-upload-list el-upload-list--text" name="el-fade-in-linear" tag="ul">
<li :key="file.uid" class="el-upload-list__item ele-upload-list__item-content" v-for="(file, index) in list">
<el-link :href="file.url" :underline="false" target="_blank">
<span class="el-icon-document"> {{ getFileName(file.name) }} </span>
</el-link>
<div class="ele-upload-list__item-content-action">
<el-link :underline="false" @click="handleDelete(index)" type="danger">删除</el-link>
</div>
</li>
</transition-group> -->
</div>
</template>
<script>
import { getToken } from "@/utils/auth";
export default {
props: {
// 值
value: [String, Object, Array],
listType: {
type: String,
defaule: "text",
},
// 大小限制(MB)
fileSize: {
type: Number,
default: 5,
},
fileArr: {
type: Array,
default: [],
},
// 文件类型, 例如['png', 'jpg', 'jpeg']
fileType: {
type: Array,
default: () => ["doc", "xls", "ppt", "txt", "pdf", "png", "jpg", "jpeg"],
},
// 是否显示提示
isShowTip: {
type: Boolean,
default: false,
},
},
data() {
return {
uploadFileUrl: process.env.VUE_APP_BASE_API + "/common/upload", // 上传的图片服务器地址
headers: {
Authorization: "Bearer " + getToken(),
},
fileList: [],
modal:false,
dialogVisible:false,
dialogImageUrl:"",
};
},
computed: {
// 是否显示提示
showTip() {
return this.isShowTip && (this.fileType || this.fileSize);
},
// 列表
list() {
let temp = 1;
if (this.value) {
// 首先将值转为数组
const list = Array.isArray(this.value) ? this.value : [this.value];
// 然后将数组转为对象数组
return list.map((item) => {
if (typeof item === "string") {
item = { name: item, url: item };
}
item.uid = item.uid || new Date().getTime() + temp++;
return item;
});
} else {
this.fileList = [];
return [];
}
},
},
methods: {
// 上传前校检格式和大小
handleBeforeUpload(file) {
// 校检文件类型
if (this.fileType) {
let fileExtension = "";
if (file.name.lastIndexOf(".") > -1) {
fileExtension = file.name.slice(file.name.lastIndexOf(".") + 1);
}
const isTypeOk = this.fileType.some((type) => {
if (file.type.indexOf(type) > -1) return true;
if (fileExtension && fileExtension.indexOf(type) > -1) return true;
return false;
});
if (!isTypeOk) {
this.$message.error(
`文件格式不正确, 请上传${this.fileType.join("/")}格式文件!`
);
return false;
}
}
// 校检文件大小
if (this.fileSize) {
const isLt = file.size / 1024 / 1024 < this.fileSize;
if (!isLt) {
this.$message.error(`上传文件大小不能超过 ${this.fileSize} MB!`);
return false;
}
}
return true;
},
// 文件个数超出
handleExceed() {
this.$message.error(`只允许上传单个文件`);
},
// 上传失败
handleUploadError(err) {
this.$message.error("上传失败, 请重试");
},
// 上传成功回调
handleUploadSuccess(res, file) {
this.$message.success("上传成功");
this.$emit("resFun", res);
},
// 文件列表移除文件
handleRemove(file, fileList) {
console.log("列表移除", file, fileList);
this.$emit("remove", file);
},
// 删除文件
handleDelete(index) {
this.fileList.splice(index, 1);
this.$emit("input", "");
// let that = this,
// param;
// param = file.response ? file.response.fileName.replace(/\\/g, "%")
// : file.response.url.replace(/\\/g, "%").slice(9);
// $.ajax({
// type: "GET",
// url: process.env.VUE_APP_BASE_API + "/common/deleteFile",
// data: {savePath: param},
// dataType: "json",
// success: function(data){
// if (data) that.$message.success("删除成功");
// else return false;
// }
// });
},
handleFileClick(file) {
this.dialogImageUrl = file.response.url;
this.dialogVisible=true;
console.log(file);
},
// 获取文件名称
getFileName(name) {
if (name.lastIndexOf("/") > -1) {
return name.slice(name.lastIndexOf("/") + 1).toLowerCase();
} else {
return "";
}
},
},
created() {
// this.fileList = this.list;
},
};
</script>
<style scoped lang="scss">
.upload-file-uploader {
margin-bottom: 5px;
}
.upload-file-list .el-upload-list__item {
border: 1px solid #e4e7ed;
line-height: 2;
margin-bottom: 10px;
position: relative;
}
.upload-file-list .ele-upload-list__item-content {
display: flex;
justify-content: space-between;
align-items: center;
color: inherit;
}
.ele-upload-list__item-content-action .el-link {
margin-right: 10px;
}
</style>
gassafety-web/src/components/PopWindow/lineInfoWindow.vue
View file @ be178b5c
<template> <template>
<div class="wrapper"> <div class="wrapper">
<div class="top display-default"> <div class="top display-default">
<div class="left text">裕华路地埋管线</div> <div class="left text">{{ obj.pipeName }}</div>
<div class="right text"> <div v-if="!obj.editorPage" class="right text">
<img src="../../assets/images/closeBtn.png" alt="" /> <img src="../../assets/images/closeBtn.png" alt="" />
</div> </div>
</div> </div>
<!-- 设备信息 --> <!-- 设备信息 -->
<div class="eq-content display-default"> <div class="eq-content display-default">
<div class="text-wrapper"> <div class="text-wrapper">
<div class="eq-text">设备编号：<span>aa</span></div> <div :title="obj.pipeName" class="eq-text">
<div class="eq-text">设备名称：<span>裕华路地埋管线</span></div> <span>管道名称：</span>
<div class="eq-text">监测介质：<span>甲烷</span></div> <span>{{ obj.pipeName }}</span>
<div class="eq-text">设备状态：<span>报警</span></div> </div>
<div class="eq-text">用户信息：<span>中厨燃气</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>
<div class="pic"> <div class="pic">
<img src="" alt="" /> <img :src="obj.url" alt="" />
</div> </div>
</div> </div>
<!-- 维修人员 -->
<div class="maintain-content"> <div class="maintain-content">
<div>姓名： <span>高雄</span></div> <div>
<div>电话： <span>13512451234</span></div> 安装日期：<span>{{ obj.installationTime }}</span>
<div>详细信息：<span>管线两端设备压差较大，管线可能泄漏</span></div> </div>
<div>
最后巡检日期：<span>{{ obj.inspectionTime }}</span>
</div>
<div>
备注信息；<span>{{ obj.remarks }}</span>
</div>
</div> </div>
<template v-if="!obj.editorPage">
<div class="warn-content">
<div>报警状态 <span>报警</span></div>
<div>详细信息：<span>管线两端设备压差较大，管线可能泄漏</span></div>
</div>
<div class="btn">
<el-button class="elbtn" type="primary">生成工单</el-button>
</div>
</template>
<!-- 报警状态 --> <!-- 报警状态 -->
<div class="warn-content">
<div>报警状态 <span>报警</span></div>
<div>详细信息：<span>管线两端设备压差较大，管线可能泄漏</span></div>
</div>
<div class="btn">
<el-button class="elbtn" type="primary">生成工单</el-button>
</div>
</div> </div>
</template> </template>
...@@ -49,7 +74,7 @@ export default { ...@@ -49,7 +74,7 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
.wrapper { .wrapper {
width: 406px; width: 406px;
height: 488px; // height: 488px;
background: #fff; background: #fff;
border-radius: 4px; border-radius: 4px;
box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16); box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
...@@ -57,7 +82,7 @@ export default { ...@@ -57,7 +82,7 @@ export default {
.top { .top {
width: 100%; width: 100%;
height: 51px; height: 51px;
background-color: #ff5a67; background-color: #053b6a;
.text { .text {
font-weight: 600; font-weight: 600;
font-size: 16px; font-size: 16px;
...@@ -73,7 +98,7 @@ export default { ...@@ -73,7 +98,7 @@ export default {
} }
.eq-content { .eq-content {
height: 156px; min-height: 156px;
box-sizing: border-box; box-sizing: border-box;
padding: 13px 16px 13px 22px; padding: 13px 16px 13px 22px;
border-bottom: 1px solid #e2e2e2; border-bottom: 1px solid #e2e2e2;
...@@ -87,6 +112,15 @@ export default { ...@@ -87,6 +112,15 @@ export default {
font-weight: 400; font-weight: 400;
color: #1d1d1d; color: #1d1d1d;
opacity: 1; opacity: 1;
& > span {
display: inline-block;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
word-break: break-all;
max-width: 100px;
}
} }
} }
.pic { .pic {
...@@ -135,6 +169,9 @@ export default { ...@@ -135,6 +169,9 @@ export default {
} }
} }
} }
.wrapperEditorPage {
}
.display-default { .display-default {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
......
gassafety-web/src/components/PopWindow/pipelineView.vue
View file @ be178b5c
<template> <template>
<el-dialog <el-dialog
title="新增" title="新增"
:visible.sync="dialogVisible" :visible.sync="dialogVisible"
width="80%" :before-close="handleClose"
:before-close="handleClose"> >
<el-form ref="editForm" :model="editForm" label-width="120px" size="mini"> <el-row>
<el-form-item label="所属燃气公司" prop="a"> <el-form ref="editForm" :model="editForm" label-width="120px" size="mini">
<el-input v-model="editForm.title"></el-input> <el-col>
</el-form-item> <el-form-item v-show="false" label="管道id" prop="pipeId">
<el-form-item label="名称" prop="b"> <el-input
<el-input ></el-input> disabled
</el-form-item> class="el-input"
<el-form-item label="地址" prop="c"> v-model="editForm.pipeId"
<el-input></el-input> ></el-input>
</el-form-item> </el-form-item>
<el-form-item label="联系人" prop="d"> </el-col>
<el-input></el-input>
</el-form-item> <el-col>
<el-form-item label="电话" prop="e"> <el-form-item v-show="false" label="企业id" prop="enterpriseId">
<el-input></el-input> <el-input disabled v-model="editForm.enterpriseId"></el-input>
</el-form-item> </el-form-item>
<el-form-item label="型号" prop="f"> </el-col>
<el-input></el-input>
</el-form-item> <el-col
<el-form-item label="安装日期" prop="g"> ><el-form-item label="管道名称" prop="pipeName">
<el-input v-model="editForm.pipeName"></el-input> </el-form-item
></el-col>
<el-col :span="11"> <el-col :span="11">
<el-date-picker type="date" placeholder="选择日期" style="width: 100%;"></el-date-picker> <el-form-item label="管道编号" prop="pipeCode">
<el-input v-model="editForm.pipeCode"></el-input>
</el-form-item>
</el-col> </el-col>
</el-form-item>
<el-form-item label="最后巡检日期" prop="k">
<el-col :span="11"> <el-col :span="11">
<el-date-picker type="date" placeholder="选择日期" style="width: 100%;"></el-date-picker> <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-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">
<!-- 下拉 -->
<el-radio-group v-model="editForm.pipeType">
<el-radio label="1">地埋管线</el-radio>
<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="2">中压</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"
/>
</el-form-item>
</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="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
type="date"
placeholder="选择日期"
style="width: 100%"
v-model="editForm.inspectionTime"
></el-date-picker>
</el-col>
</el-form-item>
</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-col>
</el-form-item> </el-form>
<el-form-item label="备注信息" prop="l"> </el-row>
<el-input type="textarea"></el-input>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer"> <span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button> <el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="ok">确 定</el-button> <el-button type="primary" @click="ok">确 定</el-button>
</span> </span>
</el-dialog> </el-dialog>
</template> </template>
<script> <script>
export default { import MyFileUpload from "@/components/MyFileUpload";
props: { import { addPipe, updatePipe } from "@/api/device/pipe.js";
title: { type: String }, export default {
lineOkCallBack:{ type:Function}, props: {
gaodeMap:{type:Object}, lineData: {
target:{type:Object}, type: Object,
// default:{}
//message: { type: String },
//duration: { type: Number, default: 2000 }
}, },
data () { // 经纬度路径
return { lnglatsArr: {
// isShow: false, type: Array,
editForm : {},
dialogVisible : false,
}
}, },
methods: { // 管道长度
ok(){ pipeLength: { type: Number },
this.dialogVisible =false; title: { type: String },
this.lineOkCallBack.call(this.gaodeMap,this.target); //回调函数
lineOkCallBack: { type: Function },
gaodeMap: { type: Object },
target: { type: Object },
//message: { type: String },
//duration: { type: Number, default: 2000 }
},
components: {
MyFileUpload,
},
data() {
return {
// isShow: false,
fileArr: [],
editForm: {
pipeType: "1",
pipePressure: "1",
url: "",
}, },
show () { dialogVisible: false,
//this.isShow = true; };
this.dialogVisible = true; },
/*setTimeout(() => { 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.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;
this.dialogVisible = true;
/*setTimeout(() => {
this.hide() this.hide()
}, this.duration)*/ }, this.duration)*/
}, },
hide () { hide() {
this.isShow = false this.isShow = false;
this.remove() this.remove();
}, },
handleClose(done) { handleClose(done) {
this.$confirm('确认关闭？') this.$confirm("确认关闭？")
.then(_ => { .then((_) => {
done(); done();
}) })
.catch(_ => {}); .catch((_) => {});
} },
// 图片上传成功
} fileFinshed(e) {
} this.editForm.url = e.url;
},
// 图片列表移除
listRemove(e) {
this.editForm.url = "";
this.fileArr = [];
},
},
};
</script> </script>
<style lang="scss"> <style lang="scss">
.notice { .notice {
background: white; background: white;
position: fixed; position: fixed;
top: 102px; top: 102px;
right: 0; right: 0;
left: 0; left: 0;
margin: auto; margin: auto;
width: 80%; width: 80%;
height: 80%; height: 80%;
border: solid 1px; border: solid 1px;
} }
.el-input {
// width: 200px;
}
</style> </style>
gassafety-web/src/main.js
View file @ be178b5c
...@@ -7,6 +7,7 @@ import './assets/styles/element-variables.scss' ...@@ -7,6 +7,7 @@ import './assets/styles/element-variables.scss'
import '@/assets/styles/index.scss' // global css import '@/assets/styles/index.scss' // global css
import '@/assets/styles/gassafety.scss' // gassafety css import '@/assets/styles/gassafety.scss' // gassafety css
import '@/assets/styles/fonticon.scss' // 字体图标css
import App from './App' import App from './App'
import store from './store' import store from './store'
import router from './router' import router from './router'
...@@ -17,6 +18,8 @@ import './permission' // permission control ...@@ -17,6 +18,8 @@ import './permission' // permission control
import { getDicts } from "@/api/system/dict/data"; import { getDicts } from "@/api/system/dict/data";
import { getConfigKey } from "@/api/system/config"; import { getConfigKey } from "@/api/system/config";
import { parseTime, resetForm, addDateRange, selectDictLabel, selectDictLabels, download, handleTree } from "@/utils/gassafety"; import { parseTime, resetForm, addDateRange, selectDictLabel, selectDictLabels, download, handleTree } from "@/utils/gassafety";
import CollapseTransition from 'element-ui/lib/transitions/collapse-transition';
import Pagination from "@/components/Pagination"; import Pagination from "@/components/Pagination";
// 自定义表格工具扩展 // 自定义表格工具扩展
import RightToolbar from "@/components/RightToolbar" import RightToolbar from "@/components/RightToolbar"
...@@ -47,6 +50,8 @@ Vue.prototype.msgInfo = function (msg) { ...@@ -47,6 +50,8 @@ Vue.prototype.msgInfo = function (msg) {
// 全局组件挂载 // 全局组件挂载
Vue.component('Pagination', Pagination) Vue.component('Pagination', Pagination)
Vue.component('RightToolbar', RightToolbar) Vue.component('RightToolbar', RightToolbar)
Vue.component(CollapseTransition.name, CollapseTransition)
Vue.use(permission) Vue.use(permission)
......
gassafety-web/src/utils/gaodeMap.js
View file @ be178b5c
...@@ -284,7 +284,7 @@ class gaodeMap { ...@@ -284,7 +284,7 @@ class gaodeMap {
for (let i = 0; i < path.length; i++) { for (let i = 0; i < path.length; i++) {
let polyline = new AMap.Polyline({ let polyline = new AMap.Polyline({
path: path[i], path: path[i],
strokeColor: "green", strokeColor: "#F7FE38",
strokeWeight: 8, strokeWeight: 8,
strokeOpacity: 0.9, strokeOpacity: 0.9,
zIndex: 50, zIndex: 50,
...@@ -299,15 +299,16 @@ class gaodeMap { ...@@ -299,15 +299,16 @@ class gaodeMap {
this.polyLines.push(polyline); this.polyLines.push(polyline);
// 信息窗体 // 信息窗体
const dom = createPop(lineInfoWindow, { const dom = createPop(lineInfoWindow, {
obj: { a: 123 } obj: { a: 123, editorPage: true }
}); });
console.log("dom", dom.$el); console.log("dom", dom.$el);
var infoWindow = new AMap.InfoWindow({
let infoWindow = new AMap.InfoWindow({
isCustom: true, isCustom: true,
content: dom.$el, content: dom.$el,
//信息船体偏移量 //信息船体偏移量
offset: new AMap.Pixel(20, -20), offset: new AMap.Pixel(0, 0),
anchor: "left-top" anchor: "left-top"
}); });
...@@ -348,13 +349,63 @@ class gaodeMap { ...@@ -348,13 +349,63 @@ class gaodeMap {
//添加事件 //添加事件
polyline.on("mouseover", e => { polyline.on("mouseover", e => {
polyline.setOptions({ strokeColor: "red" }); // console.log("屏幕宽高",document.body.clientWidth,document.body.clientHeight)
// console.log('窗口大小',infoWindow.dom.offsetWidth)
// console.log("鼠标的位置",e.originEvent.clientX,e.originEvent.clientY);
// 上方导航的高
const topBar = 81;
// 坐标导航的宽
const leftBar = 100;
// 屏幕可视区的宽高
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 { clientX: mouseClientX, clientY: mouseClientY } = e.originEvent;
// 鼠标到左边界的距离
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;
}
polyline.setOptions({ strokeColor: "#FF5A67" });
infoWindow.setOffset(new AMap.Pixel(X, Y));
infoWindow.open(map, e.lnglat); infoWindow.open(map, e.lnglat);
// const
}); });
polyline.on("mouseout", e => { polyline.on("mouseout", e => {
polyline.setOptions({ strokeColor: "green" }); polyline.setOptions({ strokeColor: "#F7FE38" });
infoWindow.close(); infoWindow.close();
}); });
// 计算info的位置
// function infoPosition() {}
// polyline.on("rightclick", e => { // polyline.on("rightclick", e => {
// console.log(this.lineType); // console.log(this.lineType);
...@@ -438,7 +489,9 @@ class gaodeMap { ...@@ -438,7 +489,9 @@ class gaodeMap {
newLineAddEvent(obj) { newLineAddEvent(obj) {
obj.polyEditor = new AMap.PolyEditor(map, obj); obj.polyEditor = new AMap.PolyEditor(map, obj);
obj.on("click", () => { obj.on("click", () => {
console.log(this.lineType)
// 获取当前状态 0普通状态，1是正编辑状态 // 获取当前状态 0普通状态，1是正编辑状态
const { isState, type } = obj.getExtData(); const { isState, type } = obj.getExtData();
// 如果不是新线的时候并且没点编辑，点击是无效的 // 如果不是新线的时候并且没点编辑，点击是无效的
if (type != "newLine" && this.lineType != 2) return; if (type != "newLine" && this.lineType != 2) return;
...@@ -450,10 +503,27 @@ class gaodeMap { ...@@ -450,10 +503,27 @@ class gaodeMap {
console.log(opstions); console.log(opstions);
obj.setExtData(opstions); obj.setExtData(opstions);
} else { } 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) { lineOkCallBack(target) {
target.polyEditor.close(); target.polyEditor.close();
...@@ -469,11 +539,17 @@ class gaodeMap { ...@@ -469,11 +539,17 @@ class gaodeMap {
// 上传服务器用的组件 // 上传服务器用的组件
infoWindowPipelineView(options) { infoWindowPipelineView(options) {
// const {} =options;
const notice = createPop(pipelineView, { const notice = createPop(pipelineView, {
title: "管道", title: "管道",
//线是新线还是老线 // 数据
lineType: options.lineType, // lineData: options.lineData,
target: options.obj, // lnglatsArr:options.lnglatsArr,
// pipeLength:options.pipeLength,
// //线是新线还是老线
// lineType: options.lineType,
// target: options.obj,
...options,
//把当前对象当作that传进去 //把当前对象当作that传进去
gaodeMap: this, gaodeMap: this,
lineOkCallBack: this.lineOkCallBack lineOkCallBack: this.lineOkCallBack
......
gassafety-web/src/views/enterprise/map/index.vue
View file @ be178b5c
...@@ -16,25 +16,79 @@ ...@@ -16,25 +16,79 @@
<input id="close" type="button" class="btn" value="关闭绘图" /> <input id="close" type="button" class="btn" value="关闭绘图" />
</div> </div>
</div>--> </div>-->
<el-button <div class="btn-wrapper">
type="primary" <!-- <el-button type="primary" class="el-btn" icon="el-icon-search" @click="addDevice"
style="position: absolute; top: 100px; left: 75%" >
@click="addDevice" 新增
>新增</el-button </el-button>
> <el-button type="primary" class="el-btn" @click="editDevice"
<el-button >编辑
type="primary" </el-button>
style="position: absolute; top: 100px; left: 82%" <el-button type="primary" class="el-btn" @click="deleteDevice"
@click="editDevice" >删除
>编辑</el-button </el-button> -->
> <div class="myBtn">
<el-button <div
type="primary" class="el-btn"
style="position: absolute; top: 100px; left: 90%" :class="{ active: targetNum == 1 }"
@click="deleteDevice" @click="addDevice"
>删除</el-button >
> <template v-if="iconClass == 'icon-create'">
<el-select <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="editDevice"
>
<span class="left">
<i class="iconfont icon-compile" />
</span>
<span class="right">编辑</span>
</div>
<div
class="el-btn"
:class="{ active: targetNum == 3 }"
@click="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="createChange(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-select
v-model="value" v-model="value"
placeholder="请选择..." placeholder="请选择..."
@change="selectDeviceType" @change="selectDeviceType"
...@@ -45,11 +99,30 @@ ...@@ -45,11 +99,30 @@
<el-option label="调压箱" value="2"></el-option> <el-option label="调压箱" value="2"></el-option>
<el-option label="阀门井" value="3"></el-option> <el-option label="阀门井" value="3"></el-option>
<el-option label="流量计" value="4"></el-option> <el-option label="流量计" value="4"></el-option>
</el-select> <el-option label="值班人员" value="5"></el-option>
</el-select> -->
<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>
</div>
</div>
</div> </div>
</template> </template>
<script> <script>
import gaodeMap from "utils/gaodeMap.js"; import gaodeMap from "utils/gaodeMap.js";
import {pipeAllInfoList} from "@/api/device/pipe.js"
import { map, DEVICE_TYPE, mapOperateType } from "utils/gaodeMap.js"; import { map, DEVICE_TYPE, mapOperateType } from "utils/gaodeMap.js";
import { getAllDeviceInfo } from "@/api/device/deviceInfo"; import { getAllDeviceInfo } from "@/api/device/deviceInfo";
export default { export default {
...@@ -76,10 +149,50 @@ export default { ...@@ -76,10 +149,50 @@ export default {
inspectionTime: null, inspectionTime: null,
remarks: null remarks: null
}, },
radio1: "",
// 1新建，2编辑，3删除,点按钮变色
targetNum: 0,
// 左边的bar的active判定
leftBarNum:[1,2,3,4,5],
// 新建里的值
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: 5,
icon: "icon-ylb",
label: "压力表",
},
],
}; };
}, },
mounted() { mounted() {
let gaoMap = new gaodeMap("石家庄"); let gaoMap = new gaodeMap("石家庄");
pipeAllInfoList().then(res=>{
console.log("管道",res);
})
this.gaoMap = gaoMap; this.gaoMap = gaoMap;
let path = [ let path = [
[ [
...@@ -99,18 +212,69 @@ export default { ...@@ -99,18 +212,69 @@ export default {
this.getDeviceInfo(); this.getDeviceInfo();
}, },
methods: { methods: {
// 左边的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)
}
},
addDevice() { addDevice() {
this.deviceType = true; if (this.iconClass == "icon-create") {
this.targetNum = this.targetNum != 1 ? 1 : 0;
} else {
if (this.deviceType) {
this.targetNum = 0;
this.createReset();
}
}
if(this.targetNum ==1 && this.createValue ==1){
this.gaoMap.lineType=1;
}
this.deviceType = !this.deviceType;
this.gaoMap.mapOperateType = "add"; this.gaoMap.mapOperateType = "add";
this.gaoMap.removeMarkerDragg(); this.gaoMap.removeMarkerDragg();
}, },
// 选择新建项目哪个
createChange(item) {
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;
this.gaoMap.createNewLine();
}
},
// 新建按钮还原
createReset() {
this.iconClass = "icon-create";
this.createValue = 0;
this.createLabel = "新建";
},
editDevice() { 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.deviceType = false;
this.gaoMap.lineType =2;
this.gaoMap.mapOperateType = "edit"; this.gaoMap.mapOperateType = "edit";
this.gaoMap.addMarkerDragg(); this.gaoMap.addMarkerDragg();
}, },
deleteDevice() { deleteDevice() {
this.targetNum = this.targetNum != 3 ? 3 : 0;
this.gaoMap.lineType=this.targetNum;
this.createReset();
this.deviceType = false; this.deviceType = false;
this.gaoMap.mapOperateType = "delete"; this.gaoMap.mapOperateType = "delete";
this.gaoMap.removeMarkerDragg(); this.gaoMap.removeMarkerDragg();
...@@ -150,7 +314,139 @@ export default { ...@@ -150,7 +314,139 @@ export default {
}, },
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
// 左边的bar
.leftBar-wrapper {
position: fixed;
left: 100px;
top: 100px;
.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;
&:hover {
background-color: #053b6a;
color: #ffffff;
}
&:hover .left,
&:hover .right {
color: #ffffff;
}
&.active {
background-color: #053b6a;
.left,
.right {
color: #ffffff;
}
}
.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 { .input-card {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
......
gassafety-web/yarn.lock
View file @ be178b5c
...@@ -5929,6 +5929,11 @@ mkdirp@^1.0.4: ...@@ -5929,6 +5929,11 @@ mkdirp@^1.0.4:
resolved "https://registry.nlark.com/mkdirp/download/mkdirp-1.0.4.tgz#3eb5ed62622756d79a5f0e2a221dfebad75c2f7e" resolved "https://registry.nlark.com/mkdirp/download/mkdirp-1.0.4.tgz#3eb5ed62622756d79a5f0e2a221dfebad75c2f7e"
integrity sha1-PrXtYmInVteaXw4qIh3+utdcL34= 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: move-concurrently@^1.0.1:
version "1.0.1" version "1.0.1"
resolved "https://registry.npm.taobao.org/move-concurrently/download/move-concurrently-1.0.1.tgz#be2c005fda32e0b29af1f05d7c4b33214c701f92" 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