From 3bc191973a0a67cbc8c0d77d92ea1a807555aa6a Mon Sep 17 00:00:00 2001 From: zhangshuaibao <15731629597@163.com> Date: 星期四, 08 四月 2021 17:52:39 +0800 Subject: [PATCH] Merge branch 'develop' of http://xearth.cn:6600/r/wuyushui/SewerAndRainNetwork into develop --- src/components/LayerController/modules/LcServiceLayer.vue | 105 ++++++++++++++++++++++++++++++++-------------------- 1 files changed, 64 insertions(+), 41 deletions(-) diff --git a/src/components/LayerController/modules/LcServiceLayer.vue b/src/components/LayerController/modules/LcServiceLayer.vue index 87ea4a7..b404bc8 100644 --- a/src/components/LayerController/modules/LcServiceLayer.vue +++ b/src/components/LayerController/modules/LcServiceLayer.vue @@ -1,25 +1,39 @@ <template> <div class="inner-panel"> - <div class="title"> - 鍥惧眰鎺у埗 - </div> + <div class="panel-title"> 鍥惧眰鎺у埗 </div> <div class="wms-panel"> - <div v-for="item in serviceLayers" :key="item.code" class="layerbox"> - <div><input type="checkbox" :name="'wmsLayer_'+item.code" :checked="item.checked" :value="item.code" - @change="swAllLayers(item)"/>{{ item.name }} <span @click="swFilter(item)" v-if="item.childLayer" - class="btn-filter">杩囨护</span> - </div> - <div class="layerbox-item"> - <div class="basemap-layer-item" v-for="itm in item.layers" :key="itm.code"><input type="checkbox" - :name="'wmsSublayers_'+item.code+'_'+itm.code" - :checked="itm.checked" - :value="itm.code" - @change="swWmsLayer(itm)"/>{{ itm.name }} + <el-scrollbar class="wms-panel-scrollbar"> + <div v-for="item in serviceLayers" :key="item.code" class="layerbox"> + <i class="downUp el-icon-caret-bottom" @click="item.isShow=!item.isShow" :class="item.isShow?'':'active'" ></i><!-- el-icon-arrow-down --> + <!-- 涓�绾у浘灞傞亶鍘� --> + <div style="padding-left:25px;padding-top:10px;color:#fff"> + <input type="checkbox" :name="'wmsLayer_'+item.code" :checked="item.checked" :value="item.code" @change="swAllLayers(item)"/>{{ item.name }} + </div> + <div class="layerbox-item" v-show="item.isShow"> + <!-- 浜岀骇鍥惧眰閬嶅巻 --> + <div class="basemap-layer-item" v-for="itm in item.layers" :key="itm.code"> + <input type="checkbox" + :name="'wmsSublayers_'+item.code+'_'+itm.code" + :checked="itm.checked" + :value="itm.code" + @change="swWmsLayer(itm)"/>{{ itm.name }} + <!-- 涓夌骇鍥惧眰閬嶅巻 --> + <div class="layerbox-item-3"> + <div class="basemap-layer-item" v-for="layer in itm.layers" :key="layer.code"> + <input type="checkbox" + :name="'wmsSublayers_'+item.code+'_'+layer.code" + :checked="layer.checked" + :value="layer.code" + @change="swWmsLayer(layer)"/> + <span :style="'color:'+layer.color">{{ layer.name }}</span> + </div> + </div> + </div> </div> </div> - </div> + </el-scrollbar> </div> - <lc-service-layer-filter v-if="layerFilterVisible" ref="serviceLayerFilter"></lc-service-layer-filter> + <lc-service-layer-filter ref="serviceLayerFilter"></lc-service-layer-filter> </div> </template> @@ -31,11 +45,6 @@ export default { name: 'LcServiceLayer', components: { LcServiceLayerFilter }, - data () { - return { - layerFilterVisible: false - } - }, computed: { serviceLayers () { return this.$store.state.map.serviceLayers.LayerSewersLine @@ -66,14 +75,11 @@ swWmsLayer (itm) { itm.checked = !itm.checked if (itm.checked) { - window.layerFactory.show(itm.code) + window.layerFactory.show(itm) } else { - window.layerFactory.hide(itm.code) + window.layerFactory.hide(itm) } // this.updateWms() - }, - swFilter (item) { - this.layerFilterVisible = !this.layerFilterVisible }, updateServiceLayerList () { @@ -98,34 +104,51 @@ <style scoped lang="less"> .inner-panel { - .title{ - color: #ffffff; - font-size: 16px; - font-weight: 600; - margin: 10px; - text-align: center; - } .btn-filter { cursor: pointer; color: #ffffff; } .wms-panel { - width: 250px; + .wms-panel-scrollbar{ + height: 457px; + width: 100%; + font-size: 14px; + } .layerbox { width: 100%; - + position: relative; + .downUp{ + position: absolute; + top:3px; + left: -2px; + height: 30px; + width: 30px; + text-align: center; + line-height: 30px; + cursor: pointer; + font-size: 20px; + transition: all 1.5s; + } + .downUp.active{ + transform: rotate(-90deg); + } + .downUp:hover{font-size: 26px;font-weight: 900} .layerbox-item { - display: flex; - flex-flow: row wrap; - margin-left: 15px; - margin-top: 5px; - + padding-left: 30px; + padding-top: 5px; .basemap-layer-item { - width: 50%; + margin-bottom: 5px; } } + .layerbox-item-3{ + padding-left: 20px; + padding-top: 5px; + display: flex; + flex-wrap: wrap; + .basemap-layer-item{width: 50%} + } } } } -- Gitblit v1.8.0