From 77f7281ff7cee541aaa51339512e6443b7d89e42 Mon Sep 17 00:00:00 2001 From: YANGDL <114714267@qq.com> Date: 星期二, 05 一月 2021 12:04:25 +0800 Subject: [PATCH] 修改eslint配置增加mock配置 --- src/components/LayerController/modules/LcServiceLayer.vue | 172 +++++++++++++++++++++++++++++++++++++-------------------- 1 files changed, 111 insertions(+), 61 deletions(-) diff --git a/src/components/LayerController/modules/LcServiceLayer.vue b/src/components/LayerController/modules/LcServiceLayer.vue index d855b87..e7674d5 100644 --- a/src/components/LayerController/modules/LcServiceLayer.vue +++ b/src/components/LayerController/modules/LcServiceLayer.vue @@ -1,24 +1,36 @@ <template> <div class="inner-panel"> - <div class="tile-panel"> - <div v-for="item in serviceTileLayerList" :key="item.code"><input type="checkbox" :value="item.name" @change="swTileLayer"/></div> - </div> - <div class="wmts-panel"> - <div v-for="item in serviceWmtsLayerList" :key="item.code"><input type="checkbox" :value="item.name" @change="swWmtsLayer"/></div> - </div> - <div class="wms-panel"> - <div v-for="item in serviceWmsLayerList" :key="item.code" class="layerbox"> - <div><input type="checkbox" name="wmsLayer" :value="item.code" @change="swAllLayers"/>{{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" :value="item.code" @change="swAllLayers"/>{{itm.sname}}</div> - </div> + <div class="tile-panel"> + <div v-for="item in serviceTileLayerList" :key="item.code"><input type="checkbox" :value="item.name" + @change="swTileLayer"/></div> + </div> + <div class="wmts-panel"> + <div v-for="item in serviceWmtsLayerList" :key="item.code"><input type="checkbox" :value="item.name" + @change="swWmtsLayer"/></div> + </div> + <div class="wms-panel"> + <div v-for="item in serviceWmsLayerList" :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(itm)"/>{{ itm.sname }} + </div> </div> </div> + </div> </div> </template> <script> -import { mapState, mapMutations } from "vuex"; +import WmsHelper from "../../helpers/WmsHelper"; + + export default { name: "LcServiceLayer", components: {}, @@ -32,53 +44,83 @@ }; }, computed: { - ...mapState({ - serviceLayerHelper: (state) => { - return state.serviceLayerHelper; - }, - }), + serviceLayerHelper() { + return this.$store.state.map.serviceLayerHelper + }, + mapConfig() { + return this.$store.state.map.mapConfig + } }, mounted() { // console.log('03姝ラ锛�', this.helper) }, methods: { - ...mapMutations([]), - swAllLayers(){ + 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() + console.log(this.mapConfig) }, - swTileLayer(){ - console.log('璇ILE鏂规硶鏈疄鐜帮紒') + swTileLayer() { + console.log('璇ILE鏂规硶鏈疄鐜帮紒') }, - swWmtsLayer(){ - console.log('璇MTS鏂规硶鏈疄鐜帮紒') + swWmtsLayer() { + console.log('璇MTS鏂规硶鏈疄鐜帮紒') }, - swWmsLayer(){ - + swWmsLayer(itm) { + console.log('22222222') + itm.checked = !itm.checked + this.updateWms() }, - updateServiceLayerList(){ - // eslint-disable-next-line no-debugger - // debugger - let tileCfg = this.serviceLayerHelper.getTileLayers() - this.serviceTileLayerList = [] - for(let i = 0,len = tileCfg.length; i < len; ++i) { - if(tileCfg[i].config.inLegend){ - console.log(tileCfg[i]) - } + swFilter(item) { + this.$store.commit('setSelectedServiceLayer', item.code) + this.$store.commit('toggleServiceLayerFilter') + }, + updateServiceLayerList() { + // eslint-disable-next-line no-debugger + // debugger + let tileCfg = this.serviceLayerHelper.getTileLayers() + this.serviceTileLayerList = [] + for (let i = 0, len = tileCfg.length; i < len; ++i) { + if (tileCfg[i].config.inLegend) { + console.log(tileCfg[i]) } - let wmtsCfg = this.serviceLayerHelper.getWmtsLayers() - this.serviceWmtsLayerList = [] - for(let i = 0,len = wmtsCfg.length; i < len; ++i) { - if(wmtsCfg[i].config.inLegend){ - console.log(wmtsCfg[i]) - } + } + let wmtsCfg = this.serviceLayerHelper.getWmtsLayers() + this.serviceWmtsLayerList = [] + for (let i = 0, len = wmtsCfg.length; i < len; ++i) { + if (wmtsCfg[i].config.inLegend) { + console.log(wmtsCfg[i]) } - let wmsCfg = this.serviceLayerHelper.getWmsLayers() - this.serviceWmsLayerList = [] - for(let i = 0,len = wmsCfg.length; i < len; ++i) { - if(wmsCfg[i].config.inLegend){ - this.serviceWmsLayerList.push(wmsCfg[i].config) - } + } + let wmsCfg = this.serviceLayerHelper.getWmsLayers() + this.serviceWmsLayerList = [] + for (let i = 0, len = wmsCfg.length; i < len; ++i) { + if (wmsCfg[i].config.inLegend) { + this.serviceWmsLayerList.push(wmsCfg[i].config) } + } + }, + updateWms() { + console.log('------') + var mapConfig = this.mapConfig + var wmsHelper = new WmsHelper() + wmsHelper.initMapConfig(mapConfig) + var wmsLayersMap = wmsHelper.getWmsLayersMap() + //var filterURL = wmsHelper.getFilterURL() + console.log(wmsLayersMap) + for (var k in wmsLayersMap) { + var layers = wmsLayersMap[k] + var tileLayer = this.serviceLayerHelper.getTileLayer(k) + if (tileLayer) { + tileLayer.setParams({layers: layers.join(',')}, false) + tileLayer.setUrl(tileLayer.config.url, false) + } + } } }, watch: { @@ -97,23 +139,31 @@ justify-content: center; align-items: center; - .wms-panel{ - display:flex; - flex-flow: column; - .layerbox{ - width: 100%; - display:flex; - flex-flow: column; + .btn-filter { + cursor: pointer; + } - .layerbox-item{ - display:flex; - flex-flow: row; - .basemap-layer-item{ - width: 50%; - } - } + .wms-panel { + display: flex; + flex-flow: column; + + .layerbox { + width: 100%; + display: flex; + flex-flow: column; + + .layerbox-item { + display: flex; + flex-flow: row wrap; + margin-left: 15px; + margin-top: 5px; + + .basemap-layer-item { + width: 50%; } + } } + } } </style> -- Gitblit v1.8.0