Skip to content

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

第一次提交

parent d39acaf5
Hide whitespace changes
Inline Side-by-side
Showing with 10231 additions and 349 deletions
gassafety-web/src/assets/styles/gassafety.scss
View file @ b86fdc9d
/**
/**
* 通用css样式布局处理
* Copyright (c) 2019 gassafety
*/
/** 基础通用 **/
/** 基础通用 **/
.pt5 {
padding-top: 5px;
padding-top: 5px;
}
.pr5 {
padding-right: 5px;
padding-right: 5px;
}
.pb5 {
padding-bottom: 5px;
padding-bottom: 5px;
}
.mt5 {
margin-top: 5px;
margin-top: 5px;
}
.mr5 {
margin-right: 5px;
margin-right: 5px;
}
.mb5 {
margin-bottom: 5px;
margin-bottom: 5px;
}
.mb8 {
margin-bottom: 8px;
margin-bottom: 8px;
}
.ml5 {
margin-left: 5px;
margin-left: 5px;
}
.mt10 {
margin-top: 10px;
margin-top: 10px;
}
.mr10 {
margin-right: 10px;
margin-right: 10px;
}
.mb10 {
margin-bottom: 10px;
margin-bottom: 10px;
}
.ml0 {
margin-left: 10px;
margin-left: 10px;
}
.mt20 {
margin-top: 20px;
margin-top: 20px;
}
.mr20 {
margin-right: 20px;
margin-right: 20px;
}
.mb20 {
margin-bottom: 20px;
margin-bottom: 20px;
}
.m20 {
margin-left: 20px;
margin-left: 20px;
}
.el-dialog:not(.is-fullscreen){
margin-top: 6vh !important;
.el-dialog:not(.is-fullscreen) {
margin-top: 6vh !important;
}
.el-table {
.el-table__header-wrapper, .el-table__fixed-header-wrapper {
th {
word-break: break-word;
background-color: #f8f8f9;
color: #515a6e;
height: 40px;
font-size: 13px;
}
}
.el-table__body-wrapper {
.el-button [class*="el-icon-"] + span {
margin-left: 1px;
}
}
.el-table__header-wrapper,
.el-table__fixed-header-wrapper {
th {
word-break: break-word;
background-color: #053b6a;
color: #fff;
height: 40px;
font-size: 13px;
}
}
.el-table__body-wrapper {
.el-table__row:nth-child(2n + 1) {
background-color: #e6e6e6;
// &:hover {
// td {
// background-color: #f4f4f4;
// }
// }
td {
.cell {
color: #525252;
}
}
}
.el-table__row:nth-child(2n) {
background-color: #f4f4f4;
// &:hover {
// td {
// background-color: #e6e6e6;
// }
// }
td {
.cell {
color: #053b6a;
}
}
}
}
.el-table__body-wrapper {
.el-button [class*="el-icon-"] + span {
margin-left: 1px;
}
}
}
/** 表单布局 **/
.form-header {
font-size:15px;
color:#6379bb;
border-bottom:1px solid #ddd;
margin:8px 10px 25px 10px;
padding-bottom:5px
font-size: 15px;
color: #6379bb;
border-bottom: 1px solid #ddd;
margin: 8px 10px 25px 10px;
padding-bottom: 5px;
}
/** 表格布局 **/
.pagination-container {
position: relative;
height: 25px;
margin-bottom: 10px;
margin-top: 15px;
padding: 10px 20px !important;
position: relative;
height: 25px;
margin-bottom: 10px;
margin-top: 15px;
padding: 10px 20px !important;
}
/* tree border */
.tree-border {
margin-top: 5px;
border: 1px solid #e5e6e7;
background: #FFFFFF none;
border-radius:4px;
margin-top: 5px;
border: 1px solid #e5e6e7;
background: #ffffff none;
border-radius: 4px;
}
.pagination-container .el-pagination {
right: 0;
position: absolute;
right: 0;
position: absolute;
}
.el-table .fixed-width .el-button--mini {
padding-left: 0;
padding-right: 0;
width: inherit;
padding-left: 0;
padding-right: 0;
width: inherit;
}
.el-tree-node__content > .el-checkbox {
margin-right: 8px;
margin-right: 8px;
}
.list-group-striped > .list-group-item {
border-left: 0;
border-right: 0;
border-radius: 0;
padding-left: 0;
padding-right: 0;
border-left: 0;
border-right: 0;
border-radius: 0;
padding-left: 0;
padding-right: 0;
}
.list-group {
padding-left: 0px;
list-style: none;
padding-left: 0px;
list-style: none;
}
.list-group-item {
border-bottom: 1px solid #e7eaec;
border-top: 1px solid #e7eaec;
margin-bottom: -1px;
padding: 11px 0px;
font-size: 13px;
border-bottom: 1px solid #e7eaec;
border-top: 1px solid #e7eaec;
margin-bottom: -1px;
padding: 11px 0px;
font-size: 13px;
}
.pull-right {
float: right !important;
float: right !important;
}
.el-card__header {
padding: 14px 15px 7px;
min-height: 40px;
padding: 14px 15px 7px;
min-height: 40px;
}
.el-card__body {
padding: 15px 20px 20px 20px;
padding: 15px 20px 20px 20px;
}
.card-box {
padding-right: 15px;
padding-left: 15px;
margin-bottom: 10px;
padding-right: 15px;
padding-left: 15px;
margin-bottom: 10px;
}
/* button color */
.el-button--cyan.is-active,
.el-button--cyan:active {
background: #20B2AA;
border-color: #20B2AA;
color: #FFFFFF;
background: #20b2aa;
border-color: #20b2aa;
color: #ffffff;
}
.el-button--cyan:focus,
.el-button--cyan:hover {
background: #48D1CC;
border-color: #48D1CC;
color: #FFFFFF;
background: #48d1cc;
border-color: #48d1cc;
color: #ffffff;
}
.el-button--cyan {
background-color: #20B2AA;
border-color: #20B2AA;
color: #FFFFFF;
background-color: #20b2aa;
border-color: #20b2aa;
color: #ffffff;
}
/* text color */
.text-navy {
color: #1ab394;
color: #1ab394;
}
.text-primary {
color: inherit;
color: inherit;
}
.text-success {
color: #1c84c6;
color: #1c84c6;
}
.text-info {
color: #23c6c8;
color: #23c6c8;
}
.text-warning {
color: #f8ac59;
color: #f8ac59;
}
.text-danger {
color: #ed5565;
color: #ed5565;
}
.text-muted {
color: #888888;
color: #888888;
}
/* image */
.img-circle {
border-radius: 50%;
border-radius: 50%;
}
.img-lg {
width: 120px;
height: 120px;
width: 120px;
height: 120px;
}
.avatar-upload-preview {
position: absolute;
top: 50%;
transform: translate(50%, -50%);
width: 200px;
height: 200px;
border-radius: 50%;
box-shadow: 0 0 4px #ccc;
overflow: hidden;
position: absolute;
top: 50%;
transform: translate(50%, -50%);
width: 200px;
height: 200px;
border-radius: 50%;
box-shadow: 0 0 4px #ccc;
overflow: hidden;
}
/* 拖拽列样式 */
.sortable-ghost{
opacity: .8;
color: #fff!important;
background: #42b983!important;
.sortable-ghost {
opacity: 0.8;
color: #fff !important;
background: #42b983 !important;
}
.top-right-btn {
position: relative;
float: right;
position: relative;
float: right;
}
gassafety-web/src/components/PopWindow/lineInfoWindow.vue 0 → 100644
View file @ b86fdc9d
<template>
<div class="wrapper">
<div class="top display-default">
<div class="left text">裕华路地埋管线</div>
<div 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>
<div class="pic">
<img src="" alt="" />
</div>
</div>
<!-- 维修人员 -->
<div class="maintain-content">
<div>姓名： <span>高雄</span></div>
<div>电话： <span>13512451234</span></div>
<div>详细信息：<span>管线两端设备压差较大，管线可能泄漏</span></div>
</div>
<!-- 报警状态 -->
<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>
<script>
//line移入时的的infowindow
export default {
props: {
obj: { typs: Object },
},
};
</script>
<style lang="scss" scoped>
.wrapper {
width: 406px;
height: 488px;
background: #fff;
border-radius: 4px;
box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
overflow: hidden;
.top {
width: 100%;
height: 51px;
background-color: #ff5a67;
.text {
font-weight: 600;
font-size: 16px;
color: #ffffff;
line-height: 51px;
}
.left {
padding-left: 22px;
}
.right {
padding-right: 16px;
}
}
.eq-content {
height: 156px;
box-sizing: border-box;
padding: 13px 16px 13px 22px;
border-bottom: 1px solid #e2e2e2;
.text-wrapper {
padding-top: 1px;
& > div {
margin-bottom: 6px;
}
.eq-text {
font-size: 14px;
font-weight: 400;
color: #1d1d1d;
opacity: 1;
}
}
.pic {
width: 177px;
height: 129px;
background-color: black;
img {
width: 100%;
}
}
}
.maintain-content {
width: 100%;
height: 109px;
padding-left: 22px;
padding-top: 16px;
box-sizing: border-box;
border-bottom: 1px solid #e2e2e2;
& > div {
margin-bottom: 8px;
font-size: 14px;
font-weight: 400;
}
}
.warn-content {
height: 82px;
box-sizing: border-box;
padding: 8px 0 0 22px;
border-bottom: 1px solid #e2e2e2;
& > div {
font-size: 14px;
font-weight: 400;
margin-bottom: 8px;
}
}
.btn {
padding-top: 32px;
text-align: center;
.elbtn {
background-color: #053b6a;
box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
width: 95px;
height: 33px;
}
}
}
.display-default {
display: flex;
justify-content: space-between;
}
</style>
\ No newline at end of file
gassafety-web/src/components/PopWindow/pipelineView.vue 0 → 100644
View file @ b86fdc9d
<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">
<el-col :span="11">
<el-date-picker type="date" placeholder="选择日期" style="width: 100%;"></el-date-picker>
</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-col>
</el-form-item>
<el-form-item label="备注信息" prop="l">
<el-input type="textarea"></el-input>
</el-form-item>
</el-form>
<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 }
},
data () {
return {
// isShow: false,
editForm : {},
dialogVisible : false,
}
},
methods: {
ok(){
this.dialogVisible =false;
this.lineOkCallBack.call(this.gaodeMap,this.target);
},
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(_ => {});
}
}
}
</script>
<style lang="scss">
.notice {
background: white;
position: fixed;
top: 102px;
right: 0;
left: 0;
margin: auto;
width: 80%;
height: 80%;
border: solid 1px;
}
</style>
gassafety-web/src/main.js
View file @ b86fdc9d
......@@ -65,9 +65,10 @@ Vue.use(Element, {
Vue.config.productionTip = false
new Vue({
let vue =new Vue({
el: '#app',
router,
store,
render: h => h(App)
})
export default vue
\ No newline at end of file
gassafety-web/src/utils/gaodeMap.js
View file @ b86fdc9d
import createPop from "./createPop";
import regulatorBoxOrValveWell from "../components/PopWindow/regulatorBoxOrValveWell.vue"
import regulatorBoxOrValveWell from "../components/PopWindow/regulatorBoxOrValveWell.vue";
import pipelineView from "../components/PopWindow/pipelineView.vue";
import lineInfoWindow from "../components/PopWindow/lineInfoWindow.vue";
// import lineInfoWindow from "../components/PopWindow/lineInfoWindow.vue";
import vue from "../main";
let defaultCenter = "石家庄";
export let map;
class gaodeMap {
// 所有线的数组
polyLines = [];
// 是否开启新增
lineType = 0;
// 创建一个新的lineObj
newLineObj = null;
mouseTool = null;
//构造函数中设置中央点默认值
constructor(center) {
this.center = center?center:defaultCenter;
map = new AMap.Map('container', {
this.center = center ? center : defaultCenter;
map = new AMap.Map("container", {
//mask: addMask(result.districtList[0].boundaries),
center: [114.72995, 38.37417],
// resizeEnable: true,
disableSocket: true,
viewMode: '3D',
viewMode: "3D",
showLabel: true,
// labelzIndex: 110,
pitch: 8,
zoom: 9,
zoom: 9
//mapStyle: 'amap://styles/darkblue',
// mapStyle: 'amap://styles/3b679a15f448a4740ba2ff7524e1a4ae',
});
......@@ -26,7 +39,7 @@ class gaodeMap {
* 获取map
* @returns {AMap.Map}
*/
get getMap(){
get getMap() {
return this.map;
}
......@@ -34,7 +47,7 @@ class gaodeMap {
* 重新设置中央点
* @param value
*/
set setCenter(value){
set setCenter(value) {
this.center = value;
this.districtBoundaries();
}
......@@ -42,40 +55,41 @@ class gaodeMap {
/**
* 设置城市边界
*/
districtBoundaries(){
let that = this;
let opts = {
subdistrict: 0,
extensions: 'all',
level: 'city'
};
let district = new AMap.DistrictSearch(opts);
district.search(that.center, function (status, result) {
if(status == "complete"){
let defaultCenter = [];
defaultCenter.push(result.districtList[0].center.lng);
defaultCenter.push(result.districtList[0].center.lat);
map.setCenter(defaultCenter);
let bounds =result.districtList[0].boundaries;
for (let i = 0; i < bounds.length; i += 1) {
new AMap.Polyline({
path: bounds[i],
strokeColor: '#0088ff',
strokeWeight: 5,
strokeOpacity: 7,
map: map,
});
}
}
})
}
districtBoundaries() {
let that = this;
let opts = {
subdistrict: 0,
extensions: "all",
level: "city"
};
let district = new AMap.DistrictSearch(opts);
district.search(that.center, function(status, result) {
if (status == "complete") {
let defaultCenter = [];
defaultCenter.push(result.districtList[0].center.lng);
defaultCenter.push(result.districtList[0].center.lat);
map.setCenter(defaultCenter);
let bounds = result.districtList[0].boundaries;
for (let i = 0; i < bounds.length; i += 1) {
new AMap.Polyline({
path: bounds[i],
strokeColor: "#0088ff",
strokeWeight: 5,
strokeOpacity: 7,
map: map
});
}
}
});
}
/**
* 添加Market
* @param lnglats
*/
addMarker(lnglats){
let infoWindow = new AMap.InfoWindow({offset: new AMap.Pixel(-13, -70)});
addMarker(lnglats) {
let infoWindow = new AMap.InfoWindow({ offset: new AMap.Pixel(-13, -70) });
for (let i = 0; i < lnglats.length; i++) {
let marker = new AMap.Marker({
position: lnglats[i],
......@@ -83,24 +97,26 @@ class gaodeMap {
offset: new AMap.Pixel(-13, -30),
// 设置是否可以拖拽
draggable: true,
cursor: 'move',
cursor: "move",
// 设置拖拽效果
raiseOnDrag: true
});
marker.content = '<h4>我是第' + (i + 1) + '个XXX</h4>';
marker.content += '<h6>经度：'+lnglats[i][0]+'</h6>';
marker.content += '<h6>纬度：'+lnglats[i][1]+'</h6>';
marker.content += '<button class="btn btn-success btn-xs">历史轨迹</button>';
marker.content += '<button class="btn btn-warning btn-xs">实时跟踪 </button>';
marker.content = "<h4>我是第" + (i + 1) + "个XXX</h4>";
marker.content += "<h6>经度：" + lnglats[i][0] + "</h6>";
marker.content += "<h6>纬度：" + lnglats[i][1] + "</h6>";
marker.content +=
'<button class="btn btn-success btn-xs">历史轨迹</button>';
marker.content +=
'<button class="btn btn-warning btn-xs">实时跟踪 </button>';
marker.content += '<button class="btn btn-danger btn-xs">设置</button>';
marker.on('mouseover', infoOpen);
marker.on("mouseover", infoOpen);
//注释后打开地图时默认关闭信息窗体
//marker.emit('mouseover', {target: marker});
marker.on('mouseout', infoClose);
marker.on('click', newMAp);
marker.on('dragend', moveMarker);
marker.on("mouseout", infoClose);
marker.on("click", newMAp);
marker.on("dragend", moveMarker);
}
map.setFitView();
......@@ -108,7 +124,9 @@ class gaodeMap {
function newMAp(e) {
//map.setCenter(e.target.getPosition());
map.setZoomAndCenter(13, e.target.getPosition());
let infoWindow = new AMap.InfoWindow({offset: new AMap.Pixel(-13, -70)});
let infoWindow = new AMap.InfoWindow({
offset: new AMap.Pixel(-13, -70)
});
infoWindow.setContent(e.target.content);
infoWindow.open(map, e.target.getPosition());
}
......@@ -131,9 +149,10 @@ class gaodeMap {
* 添加折线
* @param path
*/
addPolyline(path){
let polylines = [];
for(let i = 0;i< path.length; i++){
addPolyline(path) {
console.log(path);
// this` polyLines = [];
for (let i = 0; i < path.length; i++) {
let polyline = new AMap.Polyline({
path: path[i],
strokeColor: "green",
......@@ -141,67 +160,262 @@ class gaodeMap {
strokeOpacity: 0.9,
zIndex: 50,
bubble: true,
})
polylines.push(polyline);
let polyEditor = new AMap.PolyEditor(map, polyline);
//创建右键菜单
let contextMenu = new AMap.ContextMenu();
//右键放大
contextMenu.addItem("编辑Polyline", function () {
polyEditor.setTarget(polyline);
geodesic: true,
extData: {
type: "line",
//当前line状态 0:正常状态 1:正在编辑状态
isState: 0
}
});
this.polyLines.push(polyline);
// 信息窗体
const dom = createPop(lineInfoWindow,{
obj:{a:123}
});
console.log("dom",dom.$el)
var infoWindow = new AMap.InfoWindow({
isCustom:true,
content:dom.$el,
//信息船体偏移量
offset: new AMap.Pixel(20, -20),
anchor: "left-top"
});
this.newLineAddEvent(polyline)
// // 编辑状态
// let polyEditor = new AMap.PolyEditor(map, polyline);
// //创建右键菜单
// let contextMenu = new AMap.ContextMenu();
// //菜单选择
// contextMenu.addItem(
// "编辑Polyline",
// function() {
// polyEditor.setTarget(polyline);
// polyEditor.open();
// contextMenu.close();
// },
// 0
// );
// // 结束编辑
// contextMenu.addItem(
// "结束编辑",
// function() {
// polyEditor.close();
// contextMenu.close();
// },
// 0
// );
// contextMenu.addItem(
// "保存信息",
// function() {
// console.log("折线数组", polyline.getPath());
// // polyEditor.close();
// // contextMenu.close()
// },
// 0
// );
//添加事件
polyline.on("mouseover", e => {
polyline.setOptions({ strokeColor: "red" });
infoWindow.open(map, e.lnglat);
});
polyline.on("mouseout", e => {
polyline.setOptions({ strokeColor: "green" });
infoWindow.close();
});
// polyline.on("rightclick", e => {
// console.log(this.lineType);
// // if(!this.lineFlag==0) return;
// // lineFlag 1新建 2编辑 3删除 0啥也不让干
// switch (this.lineType) {
// case 2: {
// contextMenu.open(map, e.lnglat);
// break;
// }
// default:
// break;
// }
// });
}
map.add(this.polyLines);
// 缩放地图到合适的视野级别
// map.setFitView();
}
// 创建一条新的线
createNewLine() {
this.mouseTool.polyline({
strokeWeight: 9,
strokeColor: "#80d8ff",
extData: {
type: "newLine",
//当前line状态 0:正常状态 1:正在编辑状态
isState: 0
}
//同Polyline的Option设置
});
}
// 新建line增加编辑以及右键菜单
addEditorAndMenu(obj) {
let polyEditor = new AMap.PolyEditor(map, obj);
let contextMenu = new AMap.ContextMenu();
contextMenu.addItem(
"编辑",
function() {
polyEditor.setTarget(obj);
polyEditor.open();
}, 0);
contextMenu.addItem("结束编辑", function () {
contextMenu.close();
},
0
);
contextMenu.addItem(
"结束编辑",
function() {
polyEditor.close();
}, 0);
//添加事件
polyline.on("rightclick",function (e) {
contextMenu.close();
console.log(obj.getPath());
},
0
);
contextMenu.addItem(
"保存",
() => {
polyEditor.close();
contextMenu.close();
this.addPolyline([obj.getPath()]);
map.remove(obj);
},
0
);
contextMenu.addItem(
"删除",
function() {
polyEditor.setTarget(obj);
polyEditor.open();
contextMenu.close();
},
0
);
obj.on("rightclick", e => {
if (this.lineType == 1) {
contextMenu.open(map, e.lnglat);
})
}
});
}
// 新line与老line添加点击事件
newLineAddEvent(obj) {
obj.polyEditor = new AMap.PolyEditor(map, obj);
obj.on("click", ()=> {
// 获取当前状态 0普通状态，1是正编辑状态
const { isState,type } = obj.getExtData();
// 如果不是新线的时候并且没点编辑，点击是无效的
if(type!="newLine" && this.lineType !=2) return;
if (isState == 0) {
// 如果是0，就打开编辑，变成编辑状态
obj.polyEditor.open();
let opstions = obj.getExtData();
opstions.isState = 1;
console.log(opstions);
obj.setExtData(opstions);
} else {
this.infoWindowPipelineView({obj,lineType:type});
}
});
}
// 传进组件的会调 点确认的时候调
lineOkCallBack(target){
target.polyEditor.close();
const index = this.polyLines.indexOf(target);
// 如果是老线，就要线删除原来的，然后重新包装一遍
if(index >=0){
this.polyLines.splice(index,1);
}
map.add(polylines);
// 缩放地图到合适的视野级别
map.setFitView();
this.addPolyline([target.getPath()]);
map.remove(target);
// console.log('polyLines',this.polyLines)
}
// 上传服务器用的组件
infoWindowPipelineView(options){
const notice = createPop(pipelineView, {
title: "管道",
//线是新线还是老线
lineType:options.lineType,
target:options.obj,
//把当前对象当作that传进去
gaodeMap:this,
lineOkCallBack:this.lineOkCallBack
});
notice.show();
}
/**
* 添加鼠标事件
*/
addMouseTool(){
addMouseTool() {
this.mouseTool = new AMap.MouseTool(map);
//监听draw事件可获取画好的覆盖物
this.overlays = [];
let that = this;
this.mouseTool.on('draw',function(e){
e.obj.on("click",function (aa) {
console.log(aa.target._position)
that.openInfowindow();
})
this.mouseTool.on("draw", function(e) {
console.log(e.obj, "e.obj");
if (e.obj.getExtData().type != "newLine") {
e.obj.on("click", function(aa) {
console.log(aa.target._position);
that.openInfowindow();
});
}
if (e.obj.getExtData().type == "newLine") {
console.log("挂上菜单");
that.newLineAddEvent(e.obj);
// 右键菜单
// that.addEditorAndMenu(e.obj)
}
// this.addEditorAndMenu()
// e.obj.on('rightclick',(e)=>{
// console.log(e.target.getPath());
// vue.$confirm("是否要删除该险段").then(res=>{
// console.log("确定")
// }).catch(res=>{
// console.log("取消")
// })
// // map.remove(e.target)
// })
// that.addPolyline([e.obj.getPath()])
that.overlays.push(e.obj);
// if(e.obj.getExtData().type=="line"){
// return;
// }
that.mouseTool.close();
});
}
openInfowindow(){
openInfowindow() {
const notice = createPop(regulatorBoxOrValveWell, {
title: '调压箱'
})
notice.show()
title: "调压箱",
});
console.log(notice.$el);
notice.show();
}
draw(type){
draw(type) {
let that = this;
switch(type){
case 'marker':{
switch (type) {
case "marker": {
that.mouseTool.marker({
draggable: true
});
break;
}
case 'polyline':{
case "polyline": {
that.mouseTool.polyline({
strokeWeight: 9,
strokeColor:'#80d8ff'
strokeColor: "#80d8ff"
//同Polyline的Option设置
});
break;
......@@ -212,33 +426,34 @@ class gaodeMap {
/**
* 添加地图控件
*/
addMapControl(){
AMap.plugin([
'AMap.ToolBar',
'AMap.Scale',
'AMap.HawkEye',
'AMap.MapType',
'AMap.Geolocation',
], function(){
// 在图面添加工具条控件，工具条控件集成了缩放、平移、定位等功能按钮在内的组合控件
//map.addControl(new AMap.ToolBar());
// 在图面添加比例尺控件，展示地图在当前层级和纬度下的比例尺
map.addControl(new AMap.Scale());
// 在图面添加鹰眼控件，在地图右下角显示地图的缩略图
map.addControl(new AMap.HawkEye({isOpen:true}));
// 在图面添加类别切换控件，实现默认图层与卫星图、实施交通图层之间切换的控制
map.addControl(new AMap.MapType({position :{top: '10px',left: '100px'}}));
// 在图面添加定位控件，用来获取和展示用户主机所在的经纬度位置
// map.addControl(new AMap.Geolocation());
});
}
addMapControl() {
AMap.plugin(
[
"AMap.ToolBar",
"AMap.Scale",
"AMap.HawkEye",
"AMap.MapType",
"AMap.Geolocation"
],
function() {
// 在图面添加工具条控件，工具条控件集成了缩放、平移、定位等功能按钮在内的组合控件
//map.addControl(new AMap.ToolBar());
// 在图面添加比例尺控件，展示地图在当前层级和纬度下的比例尺
map.addControl(new AMap.Scale());
// 在图面添加鹰眼控件，在地图右下角显示地图的缩略图
map.addControl(new AMap.HawkEye({ isOpen: true }));
// 在图面添加类别切换控件，实现默认图层与卫星图、实施交通图层之间切换的控制
map.addControl(
new AMap.MapType({ position: { top: "10px", left: "100px" } })
);
// 在图面添加定位控件，用来获取和展示用户主机所在的经纬度位置
// map.addControl(new AMap.Geolocation());
}
);
}
}
export default gaodeMap;
gassafety-web/src/views/enterprise/map/index.vue
View file @ b86fdc9d
<template>
<div>
<div style="width: 100vw;height: 100vh" id="container"></div>
<!-- <div class="input-card" style='width: 24rem;'>
<div style="width: 100vw; height: 100vh" id="container"></div>
<!-- <div class="input-card" style='width: 24rem;'>
<div class="input-item">
<input type="radio" name='func' value='marker'><span class="input-text">画点</span>
<input type="radio" name='func' value='polyline'><span class="input-text">画折线</span>
......@@ -16,10 +16,31 @@
<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 v-model="value" placeholder="请选择..." @change="selectDeviceType" style="position: absolute;top: 150px;left: 75%" v-if="deviceType">
<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
v-model="value"
placeholder="请选择..."
@change="selectDeviceType"
style="position: absolute; top: 150px; left: 75%"
v-if="deviceType"
>
<el-option label="管道" value="1"></el-option>
<el-option label="调压箱" value="2"></el-option>
<el-option label="阀门井" value="3"></el-option>
......@@ -27,145 +48,153 @@
<el-option label="物联网燃气表" value="5"></el-option>
<el-option label="值班人员" value="6"></el-option>
</el-select>
</div>
</template>
<script>
import gaodeMap from "utils/gaodeMap.js"
import {map} from "utils/gaodeMap.js"
export default {
data() {
return {
gaoMap : null,
deviceType : false,
value : "",
operateType : ""
};
import gaodeMap from "utils/gaodeMap.js";
import { map } from "utils/gaodeMap.js";
export default {
data() {
return {
gaoMap: null,
deviceType: false,
value: "",
operateType: "",
};
},
mounted() {
let gaoMap = new gaodeMap("石家庄");
this.gaoMap = gaoMap;
let lnglats = [
[114.497949, 38.121129],
[114.595972, 38.114511],
[114.443193, 37.990963],
[114.588419, 37.969449],
[114.522668, 38.042962],
[114.383966, 38.091548],
];
gaoMap.addMarker(lnglats);
let path = [
[
[114.436698, 38.083306],
[114.57952, 38.065468],
[114.57952, 38.002732],
[114.440131, 38.006519],
[114.436698, 38.083306],
],
[
[114.528708, 38.075198],
[114.530768, 38.00165],
],
];
gaoMap.addPolyline(path);
gaoMap.addMouseTool();
},
methods: {
addDevice() {
this.deviceType = true;
this.operationType = "add";
},
editDevice() {
this.gaoMap.lineType = 2;
this.deviceType = true;
this.operationType = "edit";
},
mounted() {
let gaoMap = new gaodeMap("石家庄");
this.gaoMap = gaoMap;
let lnglats = [
[114.497949,38.121129],
[114.595972,38.114511],
[114.443193,37.990963],
[114.588419,37.969449],
[114.522668,38.042962],
[114.383966,38.091548]
];
gaoMap.addMarker(lnglats)
let path = [
[
[114.436698,38.083306],
[114.57952,38.065468],
[114.57952,38.002732],
[114.440131,38.006519],
[114.436698,38.083306]
],
[
[114.528708,38.075198],
[114.530768,38.00165]
]
]
gaoMap.addPolyline(path);
gaoMap.addMouseTool();
deleteDevice() {
this.deviceType = true;
this.operationType = "delete";
this.gaoMap.lineType =3;
},
methods:{
addDevice(){
this.deviceType = true;
this.operationType = "add";
},
editDevice(){
this.deviceType = true;
this.operationType = "edit";
},
deleteDevice(){
this.deviceType = true;
this.operationType = "delete";
},
selectDeviceType(val){
if("add" == this.operationType){
this.gaoMap.draw("marker")
}
this.deviceType = false;
this.value = "";
selectDeviceType(val) {
if ("add" == this.operationType) {
this.gaoMap.draw("marker");
}
}
};
this.deviceType = false;
this.value = "";
// 如果选择的是新建管道
if (val == 1) {
this.gaoMap.lineType = 1;
this.gaoMap.createNewLine();
}
},
},
};
</script>
<style lang="scss" scoped>
.input-card {
display: flex;
flex-direction: column;
min-width: 0;
word-wrap: break-word;
background-color: #fff;
background-clip: border-box;
border-radius: .25rem;
width: 22rem;
border-width: 0;
border-radius: 0.4rem;
box-shadow: 0 2px 6px 0 rgba(114, 124, 245, .5);
position: fixed;
bottom: 1rem;
right: 1rem;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
padding: 0.75rem 1.25rem;
}
.input-card {
display: flex;
flex-direction: column;
min-width: 0;
word-wrap: break-word;
background-color: #fff;
background-clip: border-box;
border-radius: 0.25rem;
width: 22rem;
border-width: 0;
border-radius: 0.4rem;
box-shadow: 0 2px 6px 0 rgba(114, 124, 245, 0.5);
position: fixed;
bottom: 1rem;
right: 1rem;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
padding: 0.75rem 1.25rem;
}
.input-item {
position: relative;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-ms-flex-align: center;
align-items: center;
width: 100%;
height: 2.2rem;
}
input[type=checkbox], input[type=radio] {
box-sizing: border-box;
padding: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: 0;
margin: 0 0.5rem 0 0;
}
.btn {
display: inline-block;
font-weight: 400;
text-align: center;
white-space: nowrap;
vertical-align: middle;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
border: 1px solid transparent;
transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
background-color: transparent;
background-image: none;
color: #25A5F7;
border-color: #25A5F7;
padding: .25rem .5rem;
line-height: 1.5;
border-radius: 1rem;
-webkit-appearance: button;
cursor:pointer;
width: 6rem;
margin: 0 1rem 0 2rem;
}
.input-item {
position: relative;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-ms-flex-align: center;
align-items: center;
width: 100%;
height: 2.2rem;
}
input[type="checkbox"],
input[type="radio"] {
box-sizing: border-box;
padding: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: 0;
margin: 0 0.5rem 0 0;
}
.btn {
display: inline-block;
font-weight: 400;
text-align: center;
white-space: nowrap;
vertical-align: middle;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
border: 1px solid transparent;
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
background-color: transparent;
background-image: none;
color: #25a5f7;
border-color: #25a5f7;
padding: 0.25rem 0.5rem;
line-height: 1.5;
border-radius: 1rem;
-webkit-appearance: button;
cursor: pointer;
width: 6rem;
margin: 0 1rem 0 2rem;
}
.btn:hover {
color: #fff;
background-color: #25A5F7;
border-color: #25A5F7
}
.input-text{
width: 4rem;
margin-right:1rem;
}
.btn:hover {
color: #fff;
background-color: #25a5f7;
border-color: #25a5f7;
}
.input-text {
width: 4rem;
margin-right: 1rem;
}
</style>
gassafety-web/yarn.lock 0 → 100644
View file @ b86fdc9d
This source diff could not be displayed because it is too large. You can view the blob instead.
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