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 @@
"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/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>
<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">
<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>
</template>
......@@ -49,7 +74,7 @@ export default {
<style lang="scss" scoped>
.wrapper {
width: 406px;
height: 488px;
// height: 488px;
background: #fff;
border-radius: 4px;
box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
......@@ -57,7 +82,7 @@ export default {
.top {
width: 100%;
height: 51px;
background-color: #ff5a67;
background-color: #053b6a;
.text {
font-weight: 600;
font-size: 16px;
......@@ -73,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;
......@@ -87,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 {
......@@ -135,6 +169,9 @@ export default {
}
}
}
.wrapperEditorPage {
}
.display-default {
display: flex;
justify-content: space-between;
......
gassafety-web/src/components/PopWindow/pipelineView.vue
View file @ be178b5c
<template>
<el-dialog
title="新增"
:visible.sync="dialogVisible"
width="80%"
:before-close="handleClose">
<el-form ref="editForm" :model="editForm" label-width="120px" size="mini">
<el-form-item label="所属燃气公司" prop="a">
<el-input v-model="editForm.title"></el-input>
</el-form-item>
<el-form-item label="名称" prop="b">
<el-input ></el-input>
</el-form-item>
<el-form-item label="地址" prop="c">
<el-input></el-input>
</el-form-item>
<el-form-item label="联系人" prop="d">
<el-input></el-input>
</el-form-item>
<el-form-item label="电话" prop="e">
<el-input></el-input>
</el-form-item>
<el-form-item label="型号" prop="f">
<el-input></el-input>
</el-form-item>
<el-form-item label="安装日期" prop="g">
:before-close="handleClose"
>
<el-row>
<el-form ref="editForm" :model="editForm" label-width="120px" size="mini">
<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-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-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-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-form-item>
<el-form-item label="最后巡检日期" prop="k">
<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-form-item>
<el-form-item label="备注信息" prop="l">
<el-input type="textarea"></el-input>
</el-form-item>
</el-form>
</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>
</span>
</el-dialog>
</template>
<script>
export default {
props: {
title: { type: String },
lineOkCallBack:{ type:Function},
gaodeMap:{type:Object},
target:{type:Object},
//message: { type: String },
//duration: { type: Number, default: 2000 }
import MyFileUpload from "@/components/MyFileUpload";
import { addPipe, updatePipe } from "@/api/device/pipe.js";
export default {
props: {
lineData: {
type: Object,
// default:{}
},
data () {
return {
// isShow: false,
editForm : {},
dialogVisible : false,
}
// 经纬度路径
lnglatsArr: {
type: Array,
},
methods: {
ok(){
this.dialogVisible =false;
this.lineOkCallBack.call(this.gaodeMap,this.target);
// 管道长度
pipeLength: { type: Number },
title: { type: String },
//回调函数
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 () {
//this.isShow = true;
this.dialogVisible = true;
/*setTimeout(() => {
dialogVisible: false,
};
},
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.duration)*/
},
hide () {
this.isShow = false
this.remove()
},
handleClose(done) {
this.$confirm('确认关闭？')
.then(_ => {
done();
})
.catch(_ => {});
}
}
}
},
hide() {
this.isShow = false;
this.remove();
},
handleClose(done) {
this.$confirm("确认关闭？")
.then((_) => {
done();
})
.catch((_) => {});
},
// 图片上传成功
fileFinshed(e) {
this.editForm.url = e.url;
},
// 图片列表移除
listRemove(e) {
this.editForm.url = "";
this.fileArr = [];
},
},
};
</script>
<style lang="scss">
.notice {
background: white;
position: fixed;
top: 102px;
right: 0;
left: 0;
margin: auto;
width: 80%;
height: 80%;
border: solid 1px;
}
.notice {
background: white;
position: fixed;
top: 102px;
right: 0;
left: 0;
margin: auto;
width: 80%;
height: 80%;
border: solid 1px;
}
.el-input {
// width: 200px;
}
</style>
gassafety-web/src/main.js
View file @ be178b5c
......@@ -7,6 +7,7 @@ import './assets/styles/element-variables.scss'
import '@/assets/styles/index.scss' // global css
import '@/assets/styles/gassafety.scss' // gassafety css
import '@/assets/styles/fonticon.scss' // 字体图标css
import App from './App'
import store from './store'
import router from './router'
......@@ -17,6 +18,8 @@ import './permission' // permission control
import { getDicts } from "@/api/system/dict/data";
import { getConfigKey } from "@/api/system/config";
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 RightToolbar from "@/components/RightToolbar"
......@@ -47,6 +50,8 @@ Vue.prototype.msgInfo = function (msg) {
// 全局组件挂载
Vue.component('Pagination', Pagination)
Vue.component('RightToolbar', RightToolbar)
Vue.component(CollapseTransition.name, CollapseTransition)
Vue.use(permission)
......
gassafety-web/src/utils/gaodeMap.js
View file @ be178b5c
......@@ -284,7 +284,7 @@ class gaodeMap {
for (let i = 0; i < path.length; i++) {
let polyline = new AMap.Polyline({
path: path[i],
strokeColor: "green",
strokeColor: "#F7FE38",
strokeWeight: 8,
strokeOpacity: 0.9,
zIndex: 50,
......@@ -299,15 +299,16 @@ class gaodeMap {
this.polyLines.push(polyline);
// 信息窗体
const dom = createPop(lineInfoWindow, {
obj: { a: 123 }
obj: { a: 123, editorPage: true }
});
console.log("dom", dom.$el);
var infoWindow = new AMap.InfoWindow({
let infoWindow = new AMap.InfoWindow({
isCustom: true,
content: dom.$el,
//信息船体偏移量
offset: new AMap.Pixel(20, -20),
offset: new AMap.Pixel(0, 0),
anchor: "left-top"
});
......@@ -348,13 +349,63 @@ class gaodeMap {
//添加事件
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);
// const
});
polyline.on("mouseout", e => {
polyline.setOptions({ strokeColor: "green" });
polyline.setOptions({ strokeColor: "#F7FE38" });
infoWindow.close();
});
// 计算info的位置
// function infoPosition() {}
// polyline.on("rightclick", e => {
// console.log(this.lineType);
......@@ -438,7 +489,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;
......@@ -450,10 +503,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();
......@@ -469,11 +539,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 @ be178b5c
......@@ -16,25 +16,79 @@
<input id="close" type="button" class="btn" value="关闭绘图" />
</div>
</div>-->
<el-button
type="primary"
style="position: absolute; top: 100px; left: 75%"
@click="addDevice"
>新增</el-button
>
<el-button
type="primary"
style="position: absolute; top: 100px; left: 82%"
@click="editDevice"
>编辑</el-button
>
<el-button
type="primary"
style="position: absolute; top: 100px; left: 90%"
@click="deleteDevice"
>删除</el-button
>
<el-select
<div class="btn-wrapper">
<!-- <el-button type="primary" class="el-btn" icon="el-icon-search" @click="addDevice"
>
新增
</el-button>
<el-button type="primary" class="el-btn" @click="editDevice"
>编辑
</el-button>
<el-button type="primary" class="el-btn" @click="deleteDevice"
>删除
</el-button> -->
<div class="myBtn">
<div
class="el-btn"
:class="{ active: targetNum == 1 }"
@click="addDevice"
>
<template v-if="iconClass == 'icon-create'">
<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"
placeholder="请选择..."
@change="selectDeviceType"
......@@ -45,11 +99,30 @@
<el-option label="调压箱" value="2"></el-option>
<el-option label="阀门井" value="3"></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>
</template>
<script>
import gaodeMap from "utils/gaodeMap.js";
import {pipeAllInfoList} from "@/api/device/pipe.js"
import { map, DEVICE_TYPE, mapOperateType } from "utils/gaodeMap.js";
import { getAllDeviceInfo } from "@/api/device/deviceInfo";
export default {
......@@ -76,10 +149,50 @@ export default {
inspectionTime: 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() {
let gaoMap = new gaodeMap("石家庄");
pipeAllInfoList().then(res=>{
console.log("管道",res);
})
this.gaoMap = gaoMap;
let path = [
[
......@@ -99,18 +212,69 @@ export default {
this.getDeviceInfo();
},
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() {
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.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() {
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";
this.gaoMap.removeMarkerDragg();
......@@ -150,7 +314,139 @@ export default {
},
};
</script>
<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 {
display: flex;
flex-direction: column;
......
gassafety-web/yarn.lock
View file @ be178b5c
......@@ -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