From 7b2f20f1299306f087d89aa202b52708df7ec4e6 Mon Sep 17 00:00:00 2001 From: chenyabin <Chenab123!> Date: 星期三, 07 四月 2021 09:14:44 +0800 Subject: [PATCH] 统一样式修改部分完成。 --- src/components/LayerController/modules/LcServiceLayer.vue | 241 +++++++++++++++++++++++------------------------ 1 files changed, 119 insertions(+), 122 deletions(-) diff --git a/src/components/LayerController/modules/LcServiceLayer.vue b/src/components/LayerController/modules/LcServiceLayer.vue index 4b9aa25..4cb5d8b 100644 --- a/src/components/LayerController/modules/LcServiceLayer.vue +++ b/src/components/LayerController/modules/LcServiceLayer.vue @@ -1,134 +1,131 @@ <template> <div class="inner-panel"> -<!-- <div class="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)"--> -<!-- 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(item.url,itm)"/>{{--> -<!-- itm.name }}--> -<!-- </div>--> -<!-- </div>--> -<!-- </div>--> -<!-- </div>--> -<!-- <lc-service-layer-filter v-if="layerFilterVisible" ref="serviceLayerFilter"></lc-service-layer-filter>--> + <div class="title"> + 鍥惧眰鎺у埗 + </div> + <div class="wms-panel"> + <el-scrollbar class="wms-panel-scrollbar"> + <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 }} + </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 }} + </div> + </div> + </div> + </el-scrollbar> + </div> + <lc-service-layer-filter v-if="layerFilterVisible" ref="serviceLayerFilter"></lc-service-layer-filter> </div> </template> -<!--<script>--> -<!--import WfsHelper from '../../helpers/WfsHelper'--> -<!--import LcServiceLayerFilter from '@components/LayerController/modules/LcServiceLayerFilter'--> -<!--import AjaxUtils from '../../../utils/AjaxUtils'--> +<script> +import WfsHelper from '../../helpers/WfsHelper' +import LcServiceLayerFilter from '@components/LayerController/modules/LcServiceLayerFilter' +import AjaxUtils from '../../../utils/AjaxUtils' -<!--export default {--> -<!-- name: 'LcServiceLayer',--> -<!-- components: { LcServiceLayerFilter },--> -<!-- data () {--> -<!-- return {--> -<!-- layerFilterVisible: false--> -<!-- }--> -<!-- },--> -<!-- computed: {--> -<!-- serviceLayers () {--> -<!-- return this.$store.state.map.serviceLayers.LayerSewersLine--> -<!-- }--> -<!-- },--> -<!-- mounted () {--> -<!-- // console.log('03姝ラ锛�', this.helper)--> -<!-- this.updateServiceLayerList()--> -<!-- },--> -<!-- methods: {--> -<!-- swAllLayers (item) {--> -<!-- // eslint-disable-next-line no-debugger--> -<!-- item.checked = !item.checked--> -<!-- for (let i = 0, len = item.layers.length; i < len; ++i) {--> -<!-- item.layers[i].checked = item.checked--> -<!-- }--> -<!-- this.updateWms()--> -<!-- },--> -<!-- loadWfs () {--> -<!-- var wfsHelper = new WfsHelper()--> -<!-- wfsHelper.addTypeName('绠$嚎鐐�')--> -<!-- wfsHelper.addEquals('pipename', '鐮旂┒闄�01璺痀S000001')--> +export default { + name: 'LcServiceLayer', + components: { LcServiceLayerFilter }, + data () { + return { + layerFilterVisible: false + } + }, + computed: { + serviceLayers () { + return this.$store.state.map.serviceLayers.LayerSewersLine + } + }, + mounted () { + // console.log('03姝ラ锛�', this.helper) + this.updateServiceLayerList() + }, + methods: { + swAllLayers (item) { + // eslint-disable-next-line no-debugger + item.checked = !item.checked + for (let i = 0, len = item.layers.length; i < len; ++i) { + item.layers[i].checked = item.checked + } + this.updateWms() + }, + loadWfs () { + var wfsHelper = new WfsHelper() + wfsHelper.addTypeName('绠$嚎鐐�') + wfsHelper.addEquals('pipename', '鐮旂┒闄�01璺痀S000001') -<!-- AjaxUtils.GetDataAsynByUrl(wfsHelper.getUrl(), {}, (res) => {--> -<!-- console.log(res)--> -<!-- })--> -<!-- },--> -<!-- swWmsLayer (url, itm) {--> -<!-- itm.checked = !itm.checked--> -<!-- if (itm.checked) {--> -<!-- window.serviceLayerHelper.loadGeojsonLayer(url, itm)--> -<!-- } else {--> -<!-- window.serviceLayerHelper.removeLayer(itm)--> -<!-- }--> -<!-- // this.updateWms()--> -<!-- },--> -<!-- swFilter (item) {--> -<!-- this.layerFilterVisible = !this.layerFilterVisible--> -<!-- },--> -<!-- updateServiceLayerList () {--> + AjaxUtils.GetDataAsynByUrl(wfsHelper.getUrl(), {}, (res) => { + console.log(res) + }) + }, + swWmsLayer (itm) { + itm.checked = !itm.checked + if (itm.checked) { + window.layerFactory.show(itm) + } else { + window.layerFactory.hide(itm) + } + // this.updateWms() + }, + swFilter (item) { + this.layerFilterVisible = !this.layerFilterVisible + }, + updateServiceLayerList () { -<!-- },--> -<!-- updateWms () {--> -<!-- var mapConfig = this.mapConfig--> -<!-- var wmsHelper = new WfsHelper()--> -<!-- wmsHelper.initMapConfig(mapConfig)--> -<!-- var wmsLayersMap = wmsHelper.getWmsLayersMap()--> -<!-- for (var k in wmsLayersMap) {--> -<!-- var layers = wmsLayersMap[k]--> -<!-- var tileLayer = window.serviceLayerHelper.getTileLayer(k)--> -<!-- if (tileLayer) {--> -<!-- tileLayer.setParams({ layers: layers.join(',') }, false)--> -<!-- tileLayer.setUrl(tileLayer.config.url, false)--> -<!-- }--> -<!-- }--> -<!-- }--> -<!-- }--> -<!--}--> -<!--</script>--> + }, + updateWms () { + var mapConfig = this.mapConfig + var wmsHelper = new WfsHelper() + wmsHelper.initMapConfig(mapConfig) + var wmsLayersMap = wmsHelper.getWmsLayersMap() + for (var k in wmsLayersMap) { + var layers = wmsLayersMap[k] + var tileLayer = window.serviceLayerHelper.getTileLayer(k) + if (tileLayer) { + tileLayer.setParams({ layers: layers.join(',') }, false) + tileLayer.setUrl(tileLayer.config.url, false) + } + } + } + } +} +</script> -<!--<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;--> -<!-- }--> +<style scoped lang="less"> + .inner-panel { + .title{ + color: @color-title; + font-size: 18px; + margin: 10px; + text-align: center; + } + .wms-panel { -<!-- .wms-panel {--> -<!-- width: 250px;--> + .wms-panel-scrollbar{ + height: 50vh; + width: 100%; + } + .layerbox { + width: 100%; + .layerbox-item { + display: flex; + flex-flow: row wrap; + margin-left: 15px; + margin-top: 5px; -<!-- .layerbox {--> -<!-- width: 100%;--> + .basemap-layer-item { + width: 50%; + } + } + } + } + } -<!-- .layerbox-item {--> -<!-- display: flex;--> -<!-- flex-flow: row wrap;--> -<!-- margin-left: 15px;--> -<!-- margin-top: 5px;--> - -<!-- .basemap-layer-item {--> -<!-- width: 50%;--> -<!-- }--> -<!-- }--> -<!-- }--> -<!-- }--> -<!-- }--> - -<!--</style>--> +</style> -- Gitblit v1.8.0