From a23a2c417afcf46da2f2626d4fdecddade205405 Mon Sep 17 00:00:00 2001
From: YANGDL <114714267@qq.com>
Date: 星期一, 11 一月 2021 16:39:06 +0800
Subject: [PATCH] 优化左下角业务看板展示动画
---
src/components/helpers/WmsHelper.js | 3 ++-
src/conf/MapConfig.js | 6 ++++--
src/views/MapTemplate.vue | 11 ++++++-----
src/components/LayerController/LayerController.vue | 27 +++++++++++++++++----------
4 files changed, 29 insertions(+), 18 deletions(-)
diff --git a/src/components/LayerController/LayerController.vue b/src/components/LayerController/LayerController.vue
index 743f80c..7f2fd10 100644
--- a/src/components/LayerController/LayerController.vue
+++ b/src/components/LayerController/LayerController.vue
@@ -1,7 +1,7 @@
<template>
<div class="float-panel">
- <i class="horn horn-br"></i>
- <i class="horn horn-bl"></i>
+<!-- <i class="horn horn-br"></i>-->
+<!-- <i class="horn horn-bl"></i>-->
<div class="head title-border">
<div class="title-text-border">
<div class="title-icon"></div>
@@ -14,8 +14,13 @@
</div>
<div class="body-box" id="panelContent">
<div id="panelInnerContent" :style="{ height:height }">
- <slot></slot>
+ <transition name="el-fade-in">
+ <div v-show="isShow">
+ <slot></slot>
+ </div>
+ </transition>
</div>
+
</div>
</div>
</template>
@@ -52,6 +57,7 @@
data () {
return {
height: '200px',
+ isShow: true,
icons: {
setting: iconSetting
},
@@ -84,8 +90,10 @@
this.panelSwitch.main = !this.panelSwitch.main
if (this.panelSwitch.main) {
this.height = '200px'
+ this.isShow = true
} else {
this.height = '0px'
+ this.isShow = false
}
}
}
@@ -111,7 +119,6 @@
overflow: hidden;
transition: all 0.5s linear;
}
-
.title-border {
width: 100%;
height: 28px;
@@ -159,7 +166,7 @@
height: 22px;
margin-top: 4px;
margin-left: 2px;
- background-image: url(/assets/images/map-pages/icon/setting.png);
+ background-image: url(../../assets/images/map-pages/icon/setting.png);
}
.title-text {
@@ -222,7 +229,7 @@
margin-top: 10px;
margin-right: 10px;
cursor: pointer;
- background-image: url(/assets/images/map-pages/icon/xljt1.png);
+ background-image: url(../../assets/images/map-pages/icon/xljt1.png);
transform: rotateX(0deg);
transform-origin: 50% 50%;
transition: transform 0.5s linear 0s;
@@ -251,25 +258,25 @@
}
.horn-tl {
- background-image: url(/assets/images/map-pages/cosmetics/horn_tl.png) center center no-repeat;
+ background-image: url(../../assets/images/map-pages/cosmetics/horn_tl.png) ;
left: -1px;
top: -1px;
}
.horn-tr {
- background-image: url(/assets/images/map-pages/cosmetics/horn_tr.png) center center no-repeat;
+ background-image: url(../../assets/images/map-pages/cosmetics/horn_tr.png);
right: -1px;
top: -1px;
}
.horn-bl {
- background-image: url(/assets/images/map-pages/cosmetics/horn_bl.png) center center no-repeat;
+ background-image: url(../../assets/images/map-pages/cosmetics/horn_bl.png);
left: -1px;
bottom: -1px;
}
.horn-br {
- background-image: url(/assets/images/map-pages/cosmetics/horn_br.png) center center no-repeat;
+ background-image: url(../../assets/images/map-pages/cosmetics/horn_br.png);
right: -1px;
bottom: -1px;
}
diff --git a/src/components/helpers/WmsHelper.js b/src/components/helpers/WmsHelper.js
index 057a2f1..52f7a84 100644
--- a/src/components/helpers/WmsHelper.js
+++ b/src/components/helpers/WmsHelper.js
@@ -25,7 +25,8 @@
for (var j = 0; j < filters.length; j++) {
var layer = filters[j]
var checked = layer.checked
- var code = layer.code
+ // var code = layer.code
+ var code = layer.name
if (checked) {
this.addLayer(wms, code)
}
diff --git a/src/conf/MapConfig.js b/src/conf/MapConfig.js
index 08b9b3e..03014dd 100644
--- a/src/conf/MapConfig.js
+++ b/src/conf/MapConfig.js
@@ -12,7 +12,7 @@
// service涓绘満閰嶇疆
const APP_GIS_HOST = 'http://xearth.cn:6299'
-const APP_GIS_HOST_PIPELINE = 'http://xearth.cn:6288'
+const APP_GIS_HOST_PIPELINE = 'http://xearth.cn:6289'
// 鑷畾涔変富鏈洪厤缃�
const BLUEMAP_HOST = APP_GIS_HOST // 鍏徃鍙戝竷鐨勫湴鍥炬湇鍔★紝鐢ㄤ簬娴嬭瘯鐨勫湴鍧�
@@ -222,7 +222,8 @@
icon_actived: '',
icon_deactived: '',
type: 'wms',
- url: APP_GIS_HOST_PIPELINE + '/server/ogcserver/PipeLineTest/wms?version=1.1.1',
+ // url: APP_GIS_HOST_PIPELINE + '/server/ogcserver/PipeLineTest/wms?version=1.1.1',
+ url: APP_GIS_HOST_PIPELINE + '/server/ogcserver/PipeLine/wms?version=1.1.1',
inLegend: true,
checked: true,
option: {
@@ -231,6 +232,7 @@
format: 'image/png', // WMS image format (use 'image/png' for layers with transparency).
transparent: true, // If true, the WMS service will return images with transparency.
version: '1.1.1', // Version of the WMS service to use
+ tileSize: L.point(1024, 1024),
crs: L.CRS.EPSG4326, // Coordinate Reference System to use for the WMS requests, defaults to map CRS. Don't change this if you're not sure what it means.
uppercase: false
},
diff --git a/src/views/MapTemplate.vue b/src/views/MapTemplate.vue
index e97c2ed..d628efa 100644
--- a/src/views/MapTemplate.vue
+++ b/src/views/MapTemplate.vue
@@ -3,8 +3,8 @@
<div id="map" ref="rootmap"></div>
<sgis-layer-controller :preset="'warningPreset'">
<lc-basemap></lc-basemap>
- <div class="barline"></div>
- <lc-service-layer></lc-service-layer>
+<!-- <div class="barline"></div>-->
+ <lc-service-layer class="barline"></lc-service-layer>
</sgis-layer-controller>
<lc-service-layer-filter v-show="showServiceLayerFilter" ref="serviceLayerFilter"></lc-service-layer-filter>
<monitor-panel></monitor-panel>
@@ -89,9 +89,10 @@
width: 100%;
}
.barline{
- width: 100%;
- height: 1px;
- background-color: #0661AE;
+ //width: 100%;
+ //height: 1px;
+ //background-color: #0661AE;
+ border-top: 1px solid #0661AE;
}
}
</style>>
--
Gitblit v1.8.0