Skip to content

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

gis地图样式

parent 18cceaa1
Hide whitespace changes
Inline Side-by-side
Showing with 423 additions and 193 deletions
gassafety-web/public/index.html
View file @ 7f826775
......@@ -8,7 +8,7 @@
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= webpackConfig.name %></title>
<!--[if lt IE 11]><script>window.location.href='/html/ie.html';</script><![endif]-->
<script src="https://webapi.amap.com/maps?v=2.0&key=eed7ca3167f765467aa377fa78e61ece&plugin=Map3D,AMap.DistrictSearch,AMap.Scale,AMap.OverView,AMap.ToolBar,AMap.MouseTool,AMap.ControlBar,AMap.CircleEditor,AMap.PolyEditor"></script>
<script src="https://webapi.amap.com/maps?v=2.0&key=49fcb156d466062435d7d33437099582&plugin=Map3D,AMap.DistrictSearch,AMap.Scale,AMap.OverView,AMap.ToolBar,AMap.MouseTool,AMap.ControlBar,AMap.CircleEditor,AMap.PolyEditor"></script>
<style>
html,
body,
......
gassafety-web/src/assets/styles/element-ui.scss
View file @ 7f826775
......@@ -78,19 +78,7 @@
display: inline-flex !important;
}
// gis地图里抽屉的搜索样式
.search-input {
.el-input__inner {
height: 28px;
min-height: 28px;
outline: #053b6a;
&:focus {
// outline: #053b6a;
border-color: #053b6a;
}
}
}
// to fix el-date-picker css style
.el-range-separator {
box-sizing: content-box;
......
gassafety-web/src/assets/styles/gassafety.scss
View file @ 7f826775
......@@ -103,61 +103,95 @@
}
}
// gis地图中底部table样式
.right-bottom-data-left {
.el-table {
background-color: rgba(0, 0, 0, 0) !important;
&::before {
height: 0px !important;
}
td {
border-bottom: none !important;
}
.el-table__header-wrapper,
.el-table__fixed-header-wrapper {
tr {
background-color: #213b5260 !important;
}
th {
word-break: break-word;
background-color: #fff;
color: #525252;
background-color: #213b5260 !important;
color: rgba(123, 248, 244, 1);
height: 30px;
font-size: 13px;
padding: 0;
&.is-leaf {
border-bottom: none;
}
}
}
.el-table__body-wrapper {
.el-table__row:nth-child(2n + 1) {
background-color: #e6e6e6;
// background-color: #e6e6e6;
background-color: #213b5260;
// &:hover {
// td {
// background-color: #f4f4f4;
// }
// }
&:hover td {
background-color: #7bf8f430 !important;
}
td {
.cell {
color: #525252;
// color: #525252;
color: rgba(123, 248, 244, 1);
}
}
}
.el-table__row:nth-child(2n) {
background-color: #f4f4f4;
// background-color: #213b52;
background-color: #06315760;
// &:hover {
// td {
// background-color: #e6e6e6;
// }
// }
&:hover td {
background-color: #7bf8f430 !important;
}
td {
.cell {
color: #053b6a;
// color: #053b6a;
color: #fff;
}
}
}
}
.el-table__body-wrapper {
.el-button [class*="el-icon-"] + span {
margin-left: 1px;
// margin-left: 1px;
}
}
}
}
// gis地图里抽屉的搜索样式
.search-input {
.el-input__inner {
height: 28px;
min-height: 28px;
outline: #053b6a;
background: none !important;
color: #fff;
&:focus {
// outline: #053b6a;
border-color: #fff;
}
}
}
/** 表单布局 **/
.form-header {
font-size: 15px;
......@@ -346,3 +380,10 @@
}
// background-color: ;
}
// gis地图内的bottom列表，如果隐藏在出现会有一个bug，这样可以解决
.el-bottom {
.el-table__body-wrapper {
height: 140px !important;
}
}
gassafety-web/src/assets/styles/gassafety1.scss
View file @ 7f826775
/**
/**
* 通用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: #f8f8f9;
color: #515a6e;
height: 40px;
font-size: 13px;
}
}
.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/mapDialog/checkPipeLineLocation.vue
View file @ 7f826775
......@@ -16,6 +16,7 @@
<el-button size="small" @click="$emit('dialogcancelFun')">取消</el-button>
</el-row>
</el-dialog>
</template>
<script>
......
gassafety-web/src/utils/gaodeMapView.js
View file @ 7f826775
......@@ -69,9 +69,9 @@ class gaodeMap {
showLabel: true,
// labelzIndex: 110,
pitch: 8,
zoom: 9
zoom: 9,
//mapStyle: 'amap://styles/darkblue',
// mapStyle: 'amap://styles/3b679a15f448a4740ba2ff7524e1a4ae',
mapStyle: 'amap://styles/1c84d2203793b0f622df2cda53db1afd',
});
this.myMap = map;
this.myMap.on("mousedown", e => {
......@@ -216,7 +216,7 @@ class gaodeMap {
options.scrollWheel = true;
map.setStatus(options);
});
this.infoWindowMove(infoWindow);
// this.infoWindowMove(infoWindow);
let marker = new AMap.Marker({
position: [data.longitude, data.latitude],
......@@ -955,7 +955,7 @@ class gaodeMap {
boxCollision(infowindowDom) {
// gis地图页面的bottomdata组件
const {
RightBototmData: { $el: pageDom }
Bottom: { $el: pageDom }
} = this.view.$refs;
let {
offsetTop: ay,
......@@ -1015,22 +1015,26 @@ class gaodeMap {
}
// infoWindow的拖拽
infoWindowMove(infoWindow) {
let disX, disY,dom;
let disX, disY, dom;
infoWindow.on("mousedown", e => {
dom = e.target.dom;
// const a = dom.offsetTop + 20;
// dom.style.top = a + "px";
// console.log(dom.offsetTop);
// console.log(e.originEvent.clientY);
// console.log(dom.offsetLeft);
// console.log(e.originEvent.clientX);
disX = dom.offsetTop - e.originEvent.clientX;
disY = dom.offsetLeft - e.originEvent.clientY;
window.addEventListener("mousemove",(e)=>{
})
disX = e.originEvent.clientX - dom.offsetLeft;
disY = e.originEvent.clientY - dom.offsetTop;
console.log(disX,disY);
window.addEventListener("mousemove", windowMove);
});
const windowMove = e => {
const mouseX = e.clientX;
const mouseY = e.clientY
const domTop = mouseY -disY;
const domLeft = mouseX- disX;
// console.log(domTop,domLeft)
dom.style.top = domTop + "px";
dom.style.left = domLeft + "px";
};
infoWindow.on("mouseup", () => {
window.removeEventListener("mousemove", windowMove);
});
}
// 关闭转化到vue的dom
removeCloneDom() {
......
gassafety-web/src/views/enterprise/mapView/components/RightBototmData.vue → gassafety-web/src/views/enterprise/mapView/components/Bottom.vue
View file @ 7f826775
......@@ -2,14 +2,14 @@
<div class="wrapper">
<div class="left">
<div class="top">
<span>设备报警最新记录</span>
<span class="title">设备报警最新记录</span>
<span @click="repeatClick" class="repeat">刷新</span>
<transition name="fade">
<span v-show="repeatFinshed" class="repeat2"> 数据刷新成功</span>
</transition>
<span @click="moreClick" class="more">更多>></span>
<span @click="moreClick" class="more">更多</span>
</div>
<div class="bottom right-bottom-data-left">
......@@ -22,11 +22,13 @@
</div> -->
<!-- <div class="one">设备编号:<span>1123123123</span></div>
<div class="two">报警时间:<span>34523452345</span></div> -->
<el-table
size="mini"
:data="tableData"
style="width: 100%"
height="170"
:height="tableHeight"
class="el-bottom"
>
<el-table-column prop="deviceCode" label="设备编号" width="100">
</el-table-column>
......@@ -56,7 +58,7 @@
</div>
</div>
<div class="right">
<!-- <div class="right">
<template v-for="(item, index) in list">
<div
class="right-content"
......@@ -77,7 +79,7 @@
</div>
</div>
</template>
</div>
</div> -->
</div>
</template>
......@@ -108,7 +110,7 @@ export default {
4: "icon-ylbgs",
99: "icon-gdcd",
},
tableHeight: 170,
tableData: [
{
deviceCode: "2016-05-03",
......@@ -226,43 +228,62 @@ export default {
position: fixed;
right: 10px;
bottom: 10px;
overflow: hidden;
// background-color: #fff;
display: flex;
justify-content: space-between;
& > div {
}
.left {
width: 680px;
width: 716px;
height: 198px;
margin-right: 12px;
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.16);
// background-color: #fff;
// color: #fff;
font-size: 14px;
font-weight: 400;
background-image: url(../../../../assets/images/bottomBg.png);
.el-table__body-wrappe {
height: 140px !important;
}
.top {
height: 32px;
background-color: #053b6a;
height: 19px;
// background-color: #053b6a;
color: #fff;
line-height: 32px;
padding-left: 12px;
// position: relative;
// line-height: 32px;
// padding-left: 12px;
position: relative;
span {
display: inline-block;
.title{
position: absolute;
left:50%;
margin-left:-92px;
top:-5px;
}
.repeat {
margin-left: 20px;
position: absolute;
top:-5px;
right: 160px;
color: #fff;
cursor: pointer;
&:hover {
color: #2788ea;
}
}
.repeat2 {
margin-left: 20px;
position: absolute;
right: 206px;
color: #67c23a;
}
.more {
position: absolute;
right: 38px;
top: -5px;
color: #fff;
float: right;
margin-right: 20px;
cursor: pointer;
......@@ -272,15 +293,8 @@ export default {
}
}
.bottom {
.table-top {
// background-color: red;
// display: flex;
// justify-content: space-between;
// div {
// width: 100%;
// text-align: center;
// }
}
width: 680px;
margin: 0 auto;
}
}
.right {
......
gassafety-web/src/views/enterprise/mapView/components/Right.vue 0 → 100644
View file @ 7f826775
<template>
<div class="wrapper">
<!-- <img src="/static/img/rightWrapperBg.25536016.png" alt=""> -->
<div class="right">
<template v-for="(item, index) in list">
<div
class="right-content"
:class="{ three: index == 2 }"
:key="item.type"
>
<div class="text-icon">
<i
class="iconfont"
:class="[iconClass(item), { iconFontSize: item.type == 4 }]"
></i>
</div>
<div class="text">
<div class="top">{{ typeName[item.type] }}</div>
<div class="bottom">
{{ item.number }}{{ item.type == 99 ? "M" : "个" }}
</div>
</div>
</div>
</template>
</div>
</div>
</template>
<script>
import { listDeviceAlarm } from "@/api/dataMonitoring/deviceAlarm";
export default {
props: {
list: {
type: Array,
},
},
data() {
return {
timer: null,
repeatFinshed: false,
typeName: {
1: "调压箱",
2: "阀门井",
3: "流量计",
4: "压力表",
99: "管线长度",
},
iconList: {
1: "icon-tyxgs",
2: "icon-fmjgs",
3: "icon-lljgs",
4: "icon-ylbgs",
99: "icon-gdcd",
},
};
},
created() {},
methods: {
iconClass(item) {
return this.iconList[item.type];
},
},
};
</script>
<style lang="scss" scoped>
.wrapper {
width: 300px;
height: 800px;
position: absolute;
top: 80px;
right: 0;
overflow-x: hidden;
// right: 10px;
// top: 131px;
background-image: url(/static/img/rightWrapperBg.25536016.png);
background-position-x: -72px;
background-position-y: center;
background-size: 193% 137%;
background-repeat: no-repeat;
img {
// width: 300px;
// height: 800px;
// position: absolute;
// top:0;
// left:0;
}
& > div {
}
.right {
position: absolute;
right: 10px;
top: 51px;
& > .right-content {
// background-color: #fff;
width: 247px;
height: 104px;
margin-bottom: 29px;
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.16);
background-image: url(../../../../assets/images/listBg.png);
margin-right: 10px;
display: flex;
&.three {
margin-right: 0px;
}
// align-items: center;
.text-icon {
line-height: 102px;
padding-left: 28px;
margin-right: 22px;
margin-left: 30px;
i {
color: #7bf8f4;
font-size: 60px;
}
}
.text {
font-size: 14px;
padding-top: 16px;
.top {
color: #fff;
margin-top: 7px;
margin-bottom: 10px;
font-weight: 600;
}
.bottom {
color: #7bf8f4;
}
}
}
}
// 单独调整下最后一个icon的大小
.iconFontSize {
font-size: 50px !important;
}
.fade-enter-to,
.fade-leave {
opacity: 1;
}
.fade-leave-active {
transition: opacity 0.5s;
}
.fade-enter-active {
transition: opacity 0s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
opacity: 0;
}
}
</style>
\ No newline at end of file
gassafety-web/src/views/enterprise/mapView/index.vue
View file @ 7f826775
......@@ -65,11 +65,16 @@
</el-collapse-transition>
</div>
</div>
<RightBototmData
<Right
v-show="rightDataShow"
:class="{ classShow: !rightDataShow }"
ref="Right"
:list="rightBototmData"
/>
<Bottom
v-show="bottomDataShow"
:class="{ classShow: !bottomDataShow }"
ref="RightBototmData"
ref="Bottom"
:list="rightBototmData"
/>
<!-- 报警工单 -->
......@@ -278,16 +283,18 @@ import gaodeMap, {
import { selectAlarmDevice } from "@/api/dataMonitoring/deviceAlarm.js";
import { getAllDeviceInfo, countDeviceByType } from "@/api/device/deviceInfo";
import { getMapHiddenTroublelist } from "@/api/riskManagement/hiddenTrouble";
import RightBototmData from "./components/RightBototmData.vue";
import Bottom from "./components/Bottom.vue";
import Right from "./components/Right.vue";
import CreateWork from "./components/CreateWork.vue";
import CreateWorkTrouble from "./components/CreateWorkTrouble.vue";
import { getInspectorLocations } from "@/api/inspectorLocation/location";
export default {
components: {
RightBototmData,
Bottom,
CreateWork,
CreateWorkTrouble,
Right,
},
data() {
return {
......@@ -377,6 +384,7 @@ export default {
// 右下角的数据data
rightBototmData: [],
bottomDataShow: true,
rightDataShow: true,
// 是否显示生成工单弹框
createWorkOpen: false,
//隐患工单
......@@ -1603,7 +1611,8 @@ input[type="radio"] {
left: 0;
width: 348px;
transition: 0.2s linear;
background: #fff;
// background: #fff;
background: #061d3360;
// background: red;
opacity: 0;
// 优化抽屉出来回去
......@@ -1627,6 +1636,7 @@ input[type="radio"] {
top: 14px;
left: 39px;
width: 236px;
// background-color: red !important;
.icon-search {
line-height: 28px;
cursor: pointer;
......@@ -1688,9 +1698,11 @@ input[type="radio"] {
color: #1d1d1d;
&:hover {
box-sizing: border-box;
border-bottom: 1px solid #053b6a;
color: #053b6a;
border-bottom: 1px solid #7fc0f8;
font-weight: 600;
> div {
color: #7fc0f8;
}
}
&.topActive {
// border-top: 1px solid #cccccc;
......@@ -1707,6 +1719,7 @@ input[type="radio"] {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: #fff;
// border-right: 1px solid #cccccc;
}
}
......@@ -1732,6 +1745,11 @@ input[type="radio"] {
}
&:hover {
border-bottom: 1px solid red;
.no,
.name,
.code {
color: red !important;
}
}
}
}
......@@ -1740,7 +1758,7 @@ input[type="radio"] {
height: 48px;
padding-left: 20px;
display: flex;
background-color: #ffffff;
// background-color: #ffffff;
box-sizing: border-box;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
cursor: pointer;
......@@ -1755,15 +1773,23 @@ input[type="radio"] {
}
&:hover {
box-sizing: border-box;
background-color: rgba(5, 59, 106, 0.1);
// background-color: rgba(5, 59, 106, 0.1);
background-color: #053b6a;
border-bottom: none !important;
.upPic {
color: #31EAEA;
}
.left,
.right {
color: #31EAEA !important;
}
}
.upPic {
display: inline-block;
margin-left: 40px;
line-height: 48px;
font-size: 16px;
color: #053b6a;
color: #fff;
}
> i.ju {
position: absolute;
......@@ -1787,6 +1813,7 @@ input[type="radio"] {
color: #fff;
}
> i.arrow-right {
color: #fff !important;
position: absolute;
right: 32px;
top: 16px;
......@@ -1797,16 +1824,16 @@ input[type="radio"] {
}
&.active {
// background-color: #053b6a;
.left,
.right {
color: #053b6a;
}
// .left,
// .right {
// color: #fff;
// }
> i {
color: #053b6a;
color: #31EAEA;
}
}
.left {
color: #053b6a;
color: #fff;
line-height: 48px;
margin-left: 28px;
.iconfont {
......@@ -1814,7 +1841,7 @@ input[type="radio"] {
}
}
.right {
color: #1d1d1d;
color: #fff;
line-height: 48px;
font-size: 16px;
margin-left: 4px;
......@@ -1835,6 +1862,7 @@ input[type="radio"] {
padding-bottom: 2px;
.btn {
border-radius: 50%;
background:none;
// width: 14px;
// height: 14px;
padding: 2px;
......
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