Skip to content

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

第一次提交

parent d39acaf5
Expand all 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样式布局处理 * 通用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 @ 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, { ...@@ -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 @ b86fdc9d
This diff is collapsed.
gassafety-web/src/views/enterprise/map/index.vue
View file @ b86fdc9d
<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,10 +16,31 @@ ...@@ -16,10 +16,31 @@
<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>
...@@ -27,145 +48,153 @@ ...@@ -27,145 +48,153 @@
<el-option label="物联网燃气表" value="5"></el-option> <el-option label="物联网燃气表" value="5"></el-option>
<el-option label="值班人员" value="6"></el-option> <el-option label="值班人员" value="6"></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} from "utils/gaodeMap.js" import { map } 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(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() { deleteDevice() {
let gaoMap = new gaodeMap("石家庄"); this.deviceType = true;
this.gaoMap = gaoMap; this.operationType = "delete";
let lnglats = [ this.gaoMap.lineType =3;
[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:{ selectDeviceType(val) {
addDevice(){ if ("add" == this.operationType) {
this.deviceType = true; this.gaoMap.draw("marker");
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 = "";
} }
} this.deviceType = false;
}; this.value = "";
// 如果选择的是新建管道
if (val == 1) {
this.gaoMap.lineType = 1;
this.gaoMap.createNewLine();
}
},
},
};
</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 @ b86fdc9d
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