Commit f59905ec authored by 纪泽龙's avatar 纪泽龙

与jzl

parents dbb92d2d 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;
}
<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
<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>
......@@ -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
This diff is collapsed.
<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,158 +16,186 @@
<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>
<el-option label="流量计" value="4"></el-option>
<el-option label="值班人员" value="5"></el-option>
</el-select>
</div>
</template>
<script>
import gaodeMap from "utils/gaodeMap.js"
import {map, DEVICE_TYPE, mapOperateType} from "utils/gaodeMap.js"
export default {
data() {
return {
gaoMap : null,
deviceType : false,
value : "",
operateType : ""
};
import gaodeMap from "utils/gaodeMap.js";
import { map, DEVICE_TYPE, mapOperateType } 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(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() {
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();
deleteDevice() {
this.deviceType = false;
this.gaoMap.mapOperateType = "delete";
this.gaoMap.removeMarkerDragg();
},
methods:{
addDevice(){
this.deviceType = true;
this.gaoMap.mapOperateType = "add";
this.gaoMap.removeMarkerDragg();
},
editDevice(){
this.deviceType = false;
this.gaoMap.mapOperateType = "edit";
this.gaoMap.addMarkerDragg();
},
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 = "";
selectDeviceType(val) {
// if("add" == this.operationType){
this.gaoMap.draw(val);
// }
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>
This diff is collapsed.
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