From 90bd41135b97f97f284da2716cec475a7ae8d657 Mon Sep 17 00:00:00 2001 From: wangqi <magical1908@outlook.com> Date: 星期四, 25 三月 2021 11:03:53 +0800 Subject: [PATCH] 修改表格箭头 --- src/components/LayerController/modules/LcServiceLayer.vue | 278 ++++++++++++++++++++++++------------------------------- 1 files changed, 120 insertions(+), 158 deletions(-) diff --git a/src/components/LayerController/modules/LcServiceLayer.vue b/src/components/LayerController/modules/LcServiceLayer.vue index 9b9a706..4b9aa25 100644 --- a/src/components/LayerController/modules/LcServiceLayer.vue +++ b/src/components/LayerController/modules/LcServiceLayer.vue @@ -1,172 +1,134 @@ <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_'+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 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> </template> -<script> - import {mapState, mapMutations} from "vuex"; - import WmsHelper from "../../helpers/WmsHelper"; +<!--<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: {}, - data() { - return { - selectedLineLayer: [], // 閫変腑鐨勭绾垮浘灞� - selectedSubsidiaryLayer: [], // 閫変腑鐨勯檮灞炶绱� - serviceTileLayerList: [], // Tile鍥惧眰鍒楄〃 - serviceWmtsLayerList: [], // Wmts鍥惧眰鍒楄〃 - serviceWmsLayerList: [] // 鍥惧眰鍒楄〃 - }; - }, - computed: { - ...mapState({ - serviceLayerHelper: (state) => { - return state.serviceLayerHelper - }, - mapConfig: (state) => { - return state.mapConfig - } - }), - }, - mounted() { - // console.log('03姝ラ锛�', this.helper) - }, - methods: { - ...mapMutations(['setSelectedServiceLayer', 'toggleServiceLayerFilter']), - 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() +<!-- 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 () {--> - console.log(this.mapConfig) - }, - swTileLayer() { - console.log('璇ILE鏂规硶鏈疄鐜帮紒') - }, - swWmtsLayer() { - console.log('璇MTS鏂规硶鏈疄鐜帮紒') - }, - swWmsLayer(itm) { - console.log('22222222') - itm.checked = !itm.checked - this.updateWms() - }, - 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 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: { - serviceLayerHelper(newVal) { - if (newVal != null) { - this.updateServiceLayerList(); - } - }, - }, - }; -</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 { - display: flex; - justify-content: center; - align-items: center; +<!--<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;--> +<!-- }--> - .btn-filter { - cursor: pointer; - } +<!-- .wms-panel {--> +<!-- width: 250px;--> - .wms-panel { - display: flex; - flex-flow: column; +<!-- .layerbox {--> +<!-- width: 100%;--> - .layerbox { - width: 100%; - display: flex; - flex-flow: column; +<!-- .layerbox-item {--> +<!-- display: flex;--> +<!-- flex-flow: row wrap;--> +<!-- margin-left: 15px;--> +<!-- margin-top: 5px;--> - .layerbox-item { - display: flex; - flex-flow: row wrap; - margin-left: 15px; - margin-top: 5px; +<!-- .basemap-layer-item {--> +<!-- width: 50%;--> +<!-- }--> +<!-- }--> +<!-- }--> +<!-- }--> +<!-- }--> - .basemap-layer-item { - width: 50%; - } - } - } - } - } - -</style> +<!--</style>--> -- Gitblit v1.8.0