Skip to content

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

与jzl

parents dbb92d2d b86fdc9d
Hide whitespace changes
Inline Side-by-side
Showing with 10269 additions and 405 deletions
gassafety-web/src/assets/styles/gassafety.scss
View file @ f59905ec
/** /**
* 通用css样式布局处理 * 通用css样式布局处理
* Copyright (c) 2019 gassafety * Copyright (c) 2019 gassafety
*/ */
/** 基础通用 **/ /** 基础通用 **/
.pt5 { .pt5 {
padding-top: 5px; padding-top: 5px;
} }
.pr5 { .pr5 {
padding-right: 5px; padding-right: 5px;
} }
.pb5 { .pb5 {
padding-bottom: 5px; padding-bottom: 5px;
} }
.mt5 { .mt5 {
margin-top: 5px; margin-top: 5px;
} }
.mr5 { .mr5 {
margin-right: 5px; margin-right: 5px;
} }
.mb5 { .mb5 {
margin-bottom: 5px; margin-bottom: 5px;
} }
.mb8 { .mb8 {
margin-bottom: 8px; margin-bottom: 8px;
} }
.ml5 { .ml5 {
margin-left: 5px; margin-left: 5px;
} }
.mt10 { .mt10 {
margin-top: 10px; margin-top: 10px;
} }
.mr10 { .mr10 {
margin-right: 10px; margin-right: 10px;
} }
.mb10 { .mb10 {
margin-bottom: 10px; margin-bottom: 10px;
} }
.ml0 { .ml0 {
margin-left: 10px; margin-left: 10px;
} }
.mt20 { .mt20 {
margin-top: 20px; margin-top: 20px;
} }
.mr20 { .mr20 {
margin-right: 20px; margin-right: 20px;
} }
.mb20 { .mb20 {
margin-bottom: 20px; margin-bottom: 20px;
} }
.m20 { .m20 {
margin-left: 20px; margin-left: 20px;
} }
.el-dialog:not(.is-fullscreen){ .el-dialog:not(.is-fullscreen) {
margin-top: 6vh !important; margin-top: 6vh !important;
} }
.el-table { .el-table {
.el-table__header-wrapper, .el-table__fixed-header-wrapper { .el-table__header-wrapper,
th { .el-table__fixed-header-wrapper {
word-break: break-word; th {
background-color: #f8f8f9; word-break: break-word;
color: #515a6e; background-color: #053b6a;
height: 40px; color: #fff;
font-size: 13px; height: 40px;
} font-size: 13px;
} }
.el-table__body-wrapper { }
.el-button [class*="el-icon-"] + span { .el-table__body-wrapper {
margin-left: 1px; .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 { .form-header {
font-size:15px; font-size: 15px;
color:#6379bb; color: #6379bb;
border-bottom:1px solid #ddd; border-bottom: 1px solid #ddd;
margin:8px 10px 25px 10px; margin: 8px 10px 25px 10px;
padding-bottom:5px padding-bottom: 5px;
} }
/** 表格布局 **/ /** 表格布局 **/
.pagination-container { .pagination-container {
position: relative; position: relative;
height: 25px; height: 25px;
margin-bottom: 10px; margin-bottom: 10px;
margin-top: 15px; margin-top: 15px;
padding: 10px 20px !important; padding: 10px 20px !important;
} }
/* tree border */ /* tree border */
.tree-border { .tree-border {
margin-top: 5px; margin-top: 5px;
border: 1px solid #e5e6e7; border: 1px solid #e5e6e7;
background: #FFFFFF none; background: #ffffff none;
border-radius:4px; border-radius: 4px;
} }
.pagination-container .el-pagination { .pagination-container .el-pagination {
right: 0; right: 0;
position: absolute; position: absolute;
} }
.el-table .fixed-width .el-button--mini { .el-table .fixed-width .el-button--mini {
padding-left: 0; padding-left: 0;
padding-right: 0; padding-right: 0;
width: inherit; width: inherit;
} }
.el-tree-node__content > .el-checkbox { .el-tree-node__content > .el-checkbox {
margin-right: 8px; margin-right: 8px;
} }
.list-group-striped > .list-group-item { .list-group-striped > .list-group-item {
border-left: 0; border-left: 0;
border-right: 0; border-right: 0;
border-radius: 0; border-radius: 0;
padding-left: 0; padding-left: 0;
padding-right: 0; padding-right: 0;
} }
.list-group { .list-group {
padding-left: 0px; padding-left: 0px;
list-style: none; list-style: none;
} }
.list-group-item { .list-group-item {
border-bottom: 1px solid #e7eaec; border-bottom: 1px solid #e7eaec;
border-top: 1px solid #e7eaec; border-top: 1px solid #e7eaec;
margin-bottom: -1px; margin-bottom: -1px;
padding: 11px 0px; padding: 11px 0px;
font-size: 13px; font-size: 13px;
} }
.pull-right { .pull-right {
float: right !important; float: right !important;
} }
.el-card__header { .el-card__header {
padding: 14px 15px 7px; padding: 14px 15px 7px;
min-height: 40px; min-height: 40px;
} }
.el-card__body { .el-card__body {
padding: 15px 20px 20px 20px; padding: 15px 20px 20px 20px;
} }
.card-box { .card-box {
padding-right: 15px; padding-right: 15px;
padding-left: 15px; padding-left: 15px;
margin-bottom: 10px; margin-bottom: 10px;
} }
/* button color */ /* button color */
.el-button--cyan.is-active, .el-button--cyan.is-active,
.el-button--cyan:active { .el-button--cyan:active {
background: #20B2AA; background: #20b2aa;
border-color: #20B2AA; border-color: #20b2aa;
color: #FFFFFF; color: #ffffff;
} }
.el-button--cyan:focus, .el-button--cyan:focus,
.el-button--cyan:hover { .el-button--cyan:hover {
background: #48D1CC; background: #48d1cc;
border-color: #48D1CC; border-color: #48d1cc;
color: #FFFFFF; color: #ffffff;
} }
.el-button--cyan { .el-button--cyan {
background-color: #20B2AA; background-color: #20b2aa;
border-color: #20B2AA; border-color: #20b2aa;
color: #FFFFFF; color: #ffffff;
} }
/* text color */ /* text color */
.text-navy { .text-navy {
color: #1ab394; color: #1ab394;
} }
.text-primary { .text-primary {
color: inherit; color: inherit;
} }
.text-success { .text-success {
color: #1c84c6; color: #1c84c6;
} }
.text-info { .text-info {
color: #23c6c8; color: #23c6c8;
} }
.text-warning { .text-warning {
color: #f8ac59; color: #f8ac59;
} }
.text-danger { .text-danger {
color: #ed5565; color: #ed5565;
} }
.text-muted { .text-muted {
color: #888888; color: #888888;
} }
/* image */ /* image */
.img-circle { .img-circle {
border-radius: 50%; border-radius: 50%;
} }
.img-lg { .img-lg {
width: 120px; width: 120px;
height: 120px; height: 120px;
} }
.avatar-upload-preview { .avatar-upload-preview {
position: absolute; position: absolute;
top: 50%; top: 50%;
transform: translate(50%, -50%); transform: translate(50%, -50%);
width: 200px; width: 200px;
height: 200px; height: 200px;
border-radius: 50%; border-radius: 50%;
box-shadow: 0 0 4px #ccc; box-shadow: 0 0 4px #ccc;
overflow: hidden; overflow: hidden;
} }
/* 拖拽列样式 */ /* 拖拽列样式 */
.sortable-ghost{ .sortable-ghost {
opacity: .8; opacity: 0.8;
color: #fff!important; color: #fff !important;
background: #42b983!important; background: #42b983 !important;
} }
.top-right-btn { .top-right-btn {
position: relative; position: relative;
float: right; float: right;
} }
gassafety-web/src/components/PopWindow/lineInfoWindow.vue 0 → 100644
View file @ f59905ec
<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 @ f59905ec
<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 @ f59905ec
...@@ -65,9 +65,10 @@ Vue.use(Element, { ...@@ -65,9 +65,10 @@ Vue.use(Element, {
Vue.config.productionTip = false Vue.config.productionTip = false
new Vue({ let vue =new Vue({
el: '#app', el: '#app',
router, router,
store, store,
render: h => h(App) render: h => h(App)
}) })
export default vue
\ No newline at end of file
gassafety-web/src/utils/gaodeMap.js
View file @ f59905ec
import createPop from "./createPop"; import createPop from "./createPop";
import regulatorBox from "../components/PopWindow/regulatorBox.vue" import regulatorBox from "../components/PopWindow/regulatorBox.vue";
import valveWell from "../components/PopWindow/valveWell.vue" import valveWell from "../components/PopWindow/valveWell.vue";
import flowMeter from "../components/PopWindow/flowMeter.vue" import flowMeter from "../components/PopWindow/flowMeter.vue";
import dutyPerson from "../components/PopWindow/dutyPerson.vue" import dutyPerson from "../components/PopWindow/dutyPerson.vue";
// import regulatorBoxOrValveWell from "../components/PopWindow/regulatorBoxOrValveWell.vue";
import pipelineView from "../components/PopWindow/pipelineView.vue";
import lineInfoWindow from "../components/PopWindow/lineInfoWindow.vue";
import vue from "../main";
let defaultCenter = "石家庄"; let defaultCenter = "石家庄";
export let map; export let map;
export const DEVICE_TYPE = { export const DEVICE_TYPE = {
PIPEPLINE : "1", PIPEPLINE: "1",
REGEULATORBOX : "2", REGEULATORBOX: "2",
VALUEWELL : "3", VALUEWELL: "3",
FLOWMETER : "4", FLOWMETER: "4",
DUTYPERSON : "5" DUTYPERSON: "5"
} };
class gaodeMap { class gaodeMap {
// 所有线的数组
polyLines = [];
// 是否开启新增
lineType = 0;
// 创建一个新的lineObj
newLineObj = null;
mouseTool = null;
//构造函数中设置中央点默认值 //构造函数中设置中央点默认值
constructor(center) { constructor(center) {
this.markers = []; this.markers = [];
this.center = center?center:defaultCenter; this.center = center ? center : defaultCenter;
map = new AMap.Map('container', { map = new AMap.Map("container", {
//mask: addMask(result.districtList[0].boundaries), //mask: addMask(result.districtList[0].boundaries),
center: [114.72995, 38.37417], center: [114.72995, 38.37417],
// resizeEnable: true, // resizeEnable: true,
disableSocket: true, disableSocket: true,
viewMode: '3D', viewMode: "3D",
showLabel: true, showLabel: true,
// labelzIndex: 110, // labelzIndex: 110,
pitch: 8, pitch: 8,
zoom: 9, zoom: 9
//mapStyle: 'amap://styles/darkblue', //mapStyle: 'amap://styles/darkblue',
// mapStyle: 'amap://styles/3b679a15f448a4740ba2ff7524e1a4ae', // mapStyle: 'amap://styles/3b679a15f448a4740ba2ff7524e1a4ae',
}); });
...@@ -37,7 +49,7 @@ export const DEVICE_TYPE = { ...@@ -37,7 +49,7 @@ export const DEVICE_TYPE = {
* 获取map * 获取map
* @returns {AMap.Map} * @returns {AMap.Map}
*/ */
get getMap(){ get getMap() {
return this.map; return this.map;
} }
...@@ -45,7 +57,7 @@ export const DEVICE_TYPE = { ...@@ -45,7 +57,7 @@ export const DEVICE_TYPE = {
* 重新设置中央点 * 重新设置中央点
* @param value * @param value
*/ */
set setCenter(value){ set setCenter(value) {
this.center = value; this.center = value;
this.districtBoundaries(); this.districtBoundaries();
} }
...@@ -53,76 +65,78 @@ export const DEVICE_TYPE = { ...@@ -53,76 +65,78 @@ export const DEVICE_TYPE = {
/** /**
* 设置城市边界 * 设置城市边界
*/ */
districtBoundaries(){
let that = this; districtBoundaries() {
let opts = { let that = this;
subdistrict: 0, let opts = {
extensions: 'all', subdistrict: 0,
level: 'city' extensions: "all",
}; level: "city"
let district = new AMap.DistrictSearch(opts); };
district.search(that.center, function (status, result) { let district = new AMap.DistrictSearch(opts);
if(status == "complete"){ district.search(that.center, function(status, result) {
let defaultCenter = []; if (status == "complete") {
defaultCenter.push(result.districtList[0].center.lng); let defaultCenter = [];
defaultCenter.push(result.districtList[0].center.lat); defaultCenter.push(result.districtList[0].center.lng);
map.setCenter(defaultCenter); defaultCenter.push(result.districtList[0].center.lat);
let bounds =result.districtList[0].boundaries; map.setCenter(defaultCenter);
for (let i = 0; i < bounds.length; i += 1) { let bounds = result.districtList[0].boundaries;
new AMap.Polyline({ for (let i = 0; i < bounds.length; i += 1) {
path: bounds[i], new AMap.Polyline({
strokeColor: '#0088ff', path: bounds[i],
strokeWeight: 5, strokeColor: "#0088ff",
strokeOpacity: 7, strokeWeight: 5,
map: map, strokeOpacity: 7,
}); map: map
} });
} }
}) }
} });
}
/** /**
* 添加Market * 添加Market
* @param markerType * @param markerType
* @param lnglats * @param lnglats
*/ */
addMarker(markerType,lnglats){ addMarker(markerType, lnglats) {
let that = this; let that = this;
that.markerType = markerType; that.markerType = markerType;
let infoWindow = new AMap.InfoWindow({offset: new AMap.Pixel(-13, -70)}); let infoWindow = new AMap.InfoWindow({ offset: new AMap.Pixel(-13, -70) });
for (let i = 0; i < lnglats.length; i++) { for (let i = 0; i < lnglats.length; i++) {
let marker = new AMap.Marker({ let marker = new AMap.Marker({
position: lnglats[i], position: lnglats[i],
map: map, map: map,
offset: new AMap.Pixel(-13, -30), offset: new AMap.Pixel(-13, -30),
cursor: 'move', cursor: "move",
// 设置拖拽效果 // 设置拖拽效果
raiseOnDrag: true raiseOnDrag: true
}); });
marker.content = this.getMarketContent("data"); marker.content = this.getMarketContent("data");
marker.on('mouseover', infoOpen); marker.on("mouseover", infoOpen);
marker.on('mouseout', infoClose); marker.on("mouseout", infoClose);
that.deviceType = markerType; that.deviceType = markerType;
let editWindow = that.createInfowindow(); let editWindow = that.createInfowindow();
marker.on('click', function(e){ marker.on("click", function(e) {
if("edit" == that.mapOperateType){ if ("edit" == that.mapOperateType) {
editWindow.show(); editWindow.show();
}else if("delete" == that.mapOperateType){ } else if ("delete" == that.mapOperateType) {
if(confirm("确认删除")== true){ if (confirm("确认删除") == true) {
map.remove(marker); map.remove(marker);
} }
} else {
}else{
map.setZoomAndCenter(13, 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.setContent(e.target.content);
infoWindow.open(map, e.target.getPosition()); infoWindow.open(map, e.target.getPosition());
} }
}); });
marker.on('dragend', function (e) { marker.on("dragend", function(e) {
editWindow.editForm.longitude = e.lnglat.lng; editWindow.editForm.longitude = e.lnglat.lng;
editWindow.editForm.latitude = e.lnglat.lat; editWindow.editForm.latitude = e.lnglat.lat;
console.log(e.lnglat,"rrrr===="); console.log(e.lnglat, "rrrr====");
}); });
this.markers.push(marker); this.markers.push(marker);
} }
...@@ -136,14 +150,13 @@ export const DEVICE_TYPE = { ...@@ -136,14 +150,13 @@ export const DEVICE_TYPE = {
infoWindow.setContent(e.target.content); infoWindow.setContent(e.target.content);
infoWindow.open(map, e.target.getPosition()); infoWindow.open(map, e.target.getPosition());
} }
} }
/** /**
* marker添加拖拽事件 * marker添加拖拽事件
*/ */
addMarkerDragg(){ addMarkerDragg() {
for(var i = 0; i < this.markers.length; i++){ for (var i = 0; i < this.markers.length; i++) {
this.markers[i].setDraggable(true); this.markers[i].setDraggable(true);
} }
} }
...@@ -151,47 +164,46 @@ export const DEVICE_TYPE = { ...@@ -151,47 +164,46 @@ export const DEVICE_TYPE = {
/** /**
* marker移除拖拽事件 * marker移除拖拽事件
*/ */
removeMarkerDragg(){ removeMarkerDragg() {
for(var i = 0; i < this.markers.length; i++){ for (var i = 0; i < this.markers.length; i++) {
this.markers[i].setDraggable(false); this.markers[i].setDraggable(false);
} }
} }
/**
* 添加marker信息
/** * @param data
* 添加marker信息 * @returns {string}
* @param data */
* @returns {string} getMarketContent(data) {
*/ let html =
getMarketContent(data){ "<div>" +
let html = "<div>" + "<table>" +
"<table>" + "<tr>" +
"<tr>" + "<td>所属燃气公司</td>" +
"<td>所属燃气公司</td>" + "<td>正元</td>" +
"<td>正元</td>" + "</tr>" +
"</tr>" + "<tr>" +
"<tr>" + "<td>名称</td>" +
"<td>名称</td>" + "<td>1234</td>" +
"<td>1234</td>" + "</tr>" +
"</tr>" + "<tr>" +
"<tr>" + "<td>地址</td>" +
"<td>地址</td>" + "<td>石家庄市新华区</td>" +
"<td>石家庄市新华区</td>" + "</tr>" +
"</tr>" + "</table>" +
"</table>" +
"</div>"; "</div>";
switch (this.markerType){ switch (this.markerType) {
case DEVICE_TYPE.REGEULATORBOX :{ case DEVICE_TYPE.REGEULATORBOX: {
return html; return html;
} }
case DEVICE_TYPE.VALUEWELL :{ case DEVICE_TYPE.VALUEWELL: {
return html; return html;
} }
case DEVICE_TYPE.FLOWMETER :{ case DEVICE_TYPE.FLOWMETER: {
return html; return html;
} }
case DEVICE_TYPE.DUTYPERSON :{ case DEVICE_TYPE.DUTYPERSON: {
return html; return html;
} }
} }
...@@ -201,9 +213,10 @@ export const DEVICE_TYPE = { ...@@ -201,9 +213,10 @@ export const DEVICE_TYPE = {
* 添加折线 * 添加折线
* @param path * @param path
*/ */
addPolyline(path){ addPolyline(path) {
let polylines = []; console.log(path);
for(let i = 0;i< path.length; i++){ // this` polyLines = [];
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: "green",
...@@ -211,46 +224,226 @@ export const DEVICE_TYPE = { ...@@ -211,46 +224,226 @@ export const DEVICE_TYPE = {
strokeOpacity: 0.9, strokeOpacity: 0.9,
zIndex: 50, zIndex: 50,
bubble: true, bubble: true,
}) geodesic: true,
polylines.push(polyline); extData: {
let polyEditor = new AMap.PolyEditor(map, polyline); type: "line",
//创建右键菜单 //当前line状态 0:正常状态 1:正在编辑状态
let contextMenu = new AMap.ContextMenu(); isState: 0
//右键放大 }
contextMenu.addItem("编辑Polyline", function () { });
polyEditor.setTarget(polyline); 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(); polyEditor.open();
}, 0); contextMenu.close();
contextMenu.addItem("结束编辑", function () { },
0
);
contextMenu.addItem(
"结束编辑",
function() {
polyEditor.close(); polyEditor.close();
}, 0); contextMenu.close();
//添加事件 console.log(obj.getPath());
polyline.on("rightclick",function (e) { },
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); 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); this.addPolyline([target.getPath()]);
// 缩放地图到合适的视野级别 map.remove(target);
map.setFitView(); // 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); this.mouseTool = new AMap.MouseTool(map);
//监听draw事件可获取画好的覆盖物 //监听draw事件可获取画好的覆盖物
this.overlays = []; this.overlays = [];
let that = this; let that = this;
this.mouseTool.on('draw',function(e){ this.mouseTool.on("draw", function(e) {
const device = that.createInfowindow(); if (e.obj.getExtData().type != "newLine") {
e.obj.on("click",function (aa) { const device = that.createInfowindow();
let postion = aa.target._position; e.obj.on("click", function(aa) {
device.editForm.longitude = postion.lng; let postion = aa.target._position;
device.editForm.latitude = postion.lat; device.editForm.longitude = postion.lng;
device.show(); device.editForm.latitude = postion.lat;
}) device.show();
});
}
if (e.obj.getExtData().type == "newLine") {
console.log("挂上菜单");
that.newLineAddEvent(e.obj);
// 右键菜单
// that.addEditorAndMenu(e.obj)
}
that.overlays.push(e.obj); that.overlays.push(e.obj);
// if(e.obj.getExtData().type=="line"){
// return;
// }
that.mouseTool.close(); that.mouseTool.close();
}); });
} }
...@@ -258,51 +451,55 @@ export const DEVICE_TYPE = { ...@@ -258,51 +451,55 @@ export const DEVICE_TYPE = {
/** /**
* 创建弹框事件 * 创建弹框事件
*/ */
createInfowindow(){ createInfowindow() {
switch (this.deviceType){ switch (this.deviceType) {
case DEVICE_TYPE.PIPEPLINE :{ case DEVICE_TYPE.PIPEPLINE: {
break; break;
} }
case DEVICE_TYPE.REGEULATORBOX :{ case DEVICE_TYPE.REGEULATORBOX: {
return createPop(regulatorBox, { return createPop(regulatorBox, {
title: '调压箱' title: "调压箱"
}); });
} }
case DEVICE_TYPE.VALUEWELL :{ case DEVICE_TYPE.VALUEWELL: {
return createPop(valveWell, { return createPop(valveWell, {
title: '阀门井' title: "阀门井"
}); });
} }
case DEVICE_TYPE.FLOWMETER :{ case DEVICE_TYPE.FLOWMETER: {
return createPop(flowMeter, { return createPop(flowMeter, {
title: '流量计' title: "流量计"
}); });
} }
case DEVICE_TYPE.DUTYPERSON :{ case DEVICE_TYPE.DUTYPERSON: {
return createPop(dutyPerson, { return createPop(dutyPerson, {
title: '值班人员' title: "值班人员"
}); });
} }
} }
} }
/** /**
* 鼠标画图事件 * 鼠标画图事件
* @param deviceType 设备类型 * @param deviceType 设备类型
*/ */
draw(deviceType){ draw(deviceType) {
let that = this; let that = this;
that.deviceType = deviceType; that.deviceType = deviceType;
if(DEVICE_TYPE.REGEULATORBOX == deviceType || DEVICE_TYPE.VALUEWELL == deviceType || DEVICE_TYPE.FLOWMETER == deviceType || DEVICE_TYPE.DUTYPERSON == deviceType){ if (
DEVICE_TYPE.REGEULATORBOX == deviceType ||
DEVICE_TYPE.VALUEWELL == deviceType ||
DEVICE_TYPE.FLOWMETER == deviceType ||
DEVICE_TYPE.DUTYPERSON == deviceType
) {
that.mouseTool.marker({ that.mouseTool.marker({
draggable: true draggable: true
}); });
} }
if(DEVICE_TYPE.PIPEPLINE == deviceType){ if (DEVICE_TYPE.PIPEPLINE == deviceType) {
that.mouseTool.polyline({ that.mouseTool.polyline({
strokeWeight: 9, strokeWeight: 9,
strokeColor:'#80d8ff' strokeColor: "#80d8ff"
//同Polyline的Option设置 //同Polyline的Option设置
}); });
} }
...@@ -311,33 +508,34 @@ export const DEVICE_TYPE = { ...@@ -311,33 +508,34 @@ export const DEVICE_TYPE = {
/** /**
* 添加地图控件 * 添加地图控件
*/ */
addMapControl(){ addMapControl() {
AMap.plugin([ AMap.plugin(
'AMap.ToolBar', [
'AMap.Scale', "AMap.ToolBar",
'AMap.HawkEye', "AMap.Scale",
'AMap.MapType', "AMap.HawkEye",
'AMap.Geolocation', "AMap.MapType",
], function(){ "AMap.Geolocation"
// 在图面添加工具条控件，工具条控件集成了缩放、平移、定位等功能按钮在内的组合控件 ],
//map.addControl(new AMap.ToolBar()); function() {
// 在图面添加工具条控件，工具条控件集成了缩放、平移、定位等功能按钮在内的组合控件
//map.addControl(new AMap.ToolBar());
// 在图面添加比例尺控件，展示地图在当前层级和纬度下的比例尺 // 在图面添加比例尺控件，展示地图在当前层级和纬度下的比例尺
map.addControl(new AMap.Scale()); map.addControl(new AMap.Scale());
// 在图面添加鹰眼控件，在地图右下角显示地图的缩略图 // 在图面添加鹰眼控件，在地图右下角显示地图的缩略图
map.addControl(new AMap.HawkEye({isOpen:true})); map.addControl(new AMap.HawkEye({ isOpen: true }));
// 在图面添加类别切换控件，实现默认图层与卫星图、实施交通图层之间切换的控制 // 在图面添加类别切换控件，实现默认图层与卫星图、实施交通图层之间切换的控制
map.addControl(new AMap.MapType({position :{top: '10px',left: '100px'}})); map.addControl(
new AMap.MapType({ position: { top: "10px", left: "100px" } })
);
// 在图面添加定位控件，用来获取和展示用户主机所在的经纬度位置 // 在图面添加定位控件，用来获取和展示用户主机所在的经纬度位置
// map.addControl(new AMap.Geolocation()); // map.addControl(new AMap.Geolocation());
}); }
);
} }
} }
export default gaodeMap; export default gaodeMap;
gassafety-web/src/views/enterprise/map/index.vue
View file @ f59905ec
<template> <template>
<div> <div>
<div style="width: 100vw;height: 100vh" id="container"></div> <div style="width: 100vw; height: 100vh" id="container"></div>
<!-- <div class="input-card" style='width: 24rem;'> <!-- <div class="input-card" style='width: 24rem;'>
<div class="input-item"> <div class="input-item">
<input type="radio" name='func' value='marker'><span class="input-text">画点</span> <input type="radio" name='func' value='marker'><span class="input-text">画点</span>
<input type="radio" name='func' value='polyline'><span class="input-text">画折线</span> <input type="radio" name='func' value='polyline'><span class="input-text">画折线</span>
...@@ -16,158 +16,186 @@ ...@@ -16,158 +16,186 @@
<input id="close" type="button" class="btn" value="关闭绘图" /> <input id="close" type="button" class="btn" value="关闭绘图" />
</div> </div>
</div>--> </div>-->
<el-button type="primary" style="position: absolute;top: 100px;left: 75%" @click="addDevice">新增</el-button> <el-button
<el-button type="primary" style="position: absolute;top: 100px;left: 82%" @click="editDevice">编辑</el-button> type="primary"
<el-button type="primary" style="position: absolute;top: 100px;left: 90%" @click="deleteDevice">删除</el-button> style="position: absolute; top: 100px; left: 75%"
<el-select v-model="value" placeholder="请选择..." @change="selectDeviceType" style="position: absolute;top: 150px;left: 75%" v-if="deviceType"> @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="1"></el-option>
<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-option label="值班人员" value="5"></el-option> <el-option label="值班人员" value="5"></el-option>
</el-select> </el-select>
</div> </div>
</template> </template>
<script> <script>
import gaodeMap from "utils/gaodeMap.js" import gaodeMap from "utils/gaodeMap.js";
import {map, DEVICE_TYPE, mapOperateType} from "utils/gaodeMap.js" import { map, DEVICE_TYPE, mapOperateType } from "utils/gaodeMap.js";
export default { export default {
data() { data() {
return { return {
gaoMap : null, gaoMap: null,
deviceType : false, deviceType: false,
value : "", value: "",
operateType : "" 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(DEVICE_TYPE.REGEULATORBOX, 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.gaoMap.mapOperateType = "add";
this.gaoMap.removeMarkerDragg();
},
editDevice() {
this.deviceType = false;
this.gaoMap.lineType =2;
this.gaoMap.mapOperateType = "edit";
this.gaoMap.addMarkerDragg();
}, },
mounted() { deleteDevice() {
let gaoMap = new gaodeMap("石家庄"); this.deviceType = false;
this.gaoMap = gaoMap; this.gaoMap.mapOperateType = "delete";
let lnglats = [ this.gaoMap.removeMarkerDragg();
[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(DEVICE_TYPE.REGEULATORBOX,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:{ selectDeviceType(val) {
addDevice(){ // if("add" == this.operationType){
this.deviceType = true; this.gaoMap.draw(val);
this.gaoMap.mapOperateType = "add"; // }
this.gaoMap.removeMarkerDragg(); this.deviceType = false;
}, this.value = "";
editDevice(){ // 如果选择的是新建管道
this.deviceType = false; if (val == 1) {
this.gaoMap.mapOperateType = "edit"; this.gaoMap.lineType = 1;
this.gaoMap.addMarkerDragg(); this.gaoMap.createNewLine();
},
deleteDevice(){
this.deviceType = false;
this.gaoMap.mapOperateType = "delete";
this.gaoMap.removeMarkerDragg();
},
selectDeviceType(val){
// if("add" == this.operationType){
this.gaoMap.draw(val)
// }
this.deviceType = false;
this.value = "";
} }
} },
}; },
};
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.input-card { .input-card {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
min-width: 0; min-width: 0;
word-wrap: break-word; word-wrap: break-word;
background-color: #fff; background-color: #fff;
background-clip: border-box; background-clip: border-box;
border-radius: .25rem; border-radius: 0.25rem;
width: 22rem; width: 22rem;
border-width: 0; border-width: 0;
border-radius: 0.4rem; border-radius: 0.4rem;
box-shadow: 0 2px 6px 0 rgba(114, 124, 245, .5); box-shadow: 0 2px 6px 0 rgba(114, 124, 245, 0.5);
position: fixed; position: fixed;
bottom: 1rem; bottom: 1rem;
right: 1rem; right: 1rem;
-ms-flex: 1 1 auto; -ms-flex: 1 1 auto;
flex: 1 1 auto; flex: 1 1 auto;
padding: 0.75rem 1.25rem; padding: 0.75rem 1.25rem;
} }
.input-item { .input-item {
position: relative; position: relative;
display: -ms-flexbox; display: -ms-flexbox;
display: flex; display: flex;
-ms-flex-wrap: wrap; -ms-flex-wrap: wrap;
flex-wrap: wrap; flex-wrap: wrap;
-ms-flex-align: center; -ms-flex-align: center;
align-items: center; align-items: center;
width: 100%; width: 100%;
height: 2.2rem; height: 2.2rem;
} }
input[type=checkbox], input[type=radio] { input[type="checkbox"],
box-sizing: border-box; input[type="radio"] {
padding: 0; box-sizing: border-box;
-webkit-box-sizing: border-box; padding: 0;
box-sizing: border-box; -webkit-box-sizing: border-box;
padding: 0; box-sizing: border-box;
margin: 0 0.5rem 0 0; padding: 0;
} margin: 0 0.5rem 0 0;
.btn { }
display: inline-block; .btn {
font-weight: 400; display: inline-block;
text-align: center; font-weight: 400;
white-space: nowrap; text-align: center;
vertical-align: middle; white-space: nowrap;
-webkit-user-select: none; vertical-align: middle;
-moz-user-select: none; -webkit-user-select: none;
-ms-user-select: none; -moz-user-select: none;
user-select: none; -ms-user-select: none;
border: 1px solid transparent; user-select: none;
transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out; border: 1px solid transparent;
background-color: transparent; transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
background-image: none; border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
color: #25A5F7; background-color: transparent;
border-color: #25A5F7; background-image: none;
padding: .25rem .5rem; color: #25a5f7;
line-height: 1.5; border-color: #25a5f7;
border-radius: 1rem; padding: 0.25rem 0.5rem;
-webkit-appearance: button; line-height: 1.5;
cursor:pointer; border-radius: 1rem;
width: 6rem; -webkit-appearance: button;
margin: 0 1rem 0 2rem; cursor: pointer;
} width: 6rem;
margin: 0 1rem 0 2rem;
}
.btn:hover { .btn:hover {
color: #fff; color: #fff;
background-color: #25A5F7; background-color: #25a5f7;
border-color: #25A5F7 border-color: #25a5f7;
} }
.input-text{ .input-text {
width: 4rem; width: 4rem;
margin-right:1rem; margin-right: 1rem;
} }
</style> </style>
gassafety-web/yarn.lock 0 → 100644
View file @ f59905ec
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