| | |
| | | <div style="padding-left:25px;padding-top:10px;color:#fff;font-size: 16px;"> |
| | | <input type="checkbox" :class="item.type==1?'active':''" :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="layerbox-item" v-show="item.isShow" > |
| | | <!-- 二级图层遍历 --> |
| | | <div class="basemap-layer-item" v-for="(itm,index2) in item.layers" :key="index2"> |
| | | <div class="basemap-layer-item" v-for="(itm,index2) in item.layers" :key="index2" :class="!itm.layers?'felxs':''" > |
| | | <input type="checkbox" :class="itm.type==1?'active':''" :name="'wmsSublayers_'+item.code+'_'+itm.code" :checked="itm.checked" :value="itm.code" @change="swAllLayers(itm)"/>{{ itm.name }} |
| | | <!-- 三级图层遍历 --> |
| | | <div class="layerbox-item-3"> |
| | | <div class="layerbox-item-3" v-show="itm.layers"> |
| | | <div class="basemap-layer-item" v-for="(layer,index3) in itm.layers" :key="index3"> |
| | | <input type="checkbox" |
| | | :class="layer.type==1?'active':''" |
| | |
| | | export default { |
| | | name: 'LcServiceLayer', |
| | | components: { LcServiceLayerFilter }, |
| | | data () { |
| | | return { |
| | | changeList: [] |
| | | } |
| | | }, |
| | | computed: { |
| | | serviceLayers () { |
| | | return this.$store.state.map.serviceLayers.LayerSewersLine |
| | |
| | | swAllLayers (item) { |
| | | // eslint-disable-next-line no-debugger |
| | | item.checked = !item.checked |
| | | this.toggleLayer(item) |
| | | this.swLayers(item.layers, item.checked) |
| | | // this.toggleLayer(item) |
| | | if (item.layers && item.layers.length > 0) { |
| | | this.swLayers(item.layers, item.checked) |
| | | if (item.checked) { |
| | | window.layerFactory.showAll(this.changeList) |
| | | } else { |
| | | window.layerFactory.hideAll(this.changeList) |
| | | } |
| | | this.changeList = [] |
| | | } else { |
| | | this.toggleLayer(item) |
| | | } |
| | | this.serviceLayers.forEach(function (item1, index1) { |
| | | if (item1.layers) { |
| | | item1.istrue = 0 |
| | |
| | | } else { |
| | | item1.type = 1 // 半选 |
| | | } |
| | | if (item1.name === '企业应急') { |
| | | console.log(item1) |
| | | bus.$emit('changeSearchBar', item1) |
| | | } |
| | | // console.log(item1.layers.length, item1.istrue, item1.isfalse, item1.type) |
| | | } |
| | | }) |
| | | // console.log(this.serviceLayers) |
| | | }, |
| | | swLayers (layers, checked) { |
| | | if (layers) { |
| | | for (let i = 0, len = layers.length; i < len; ++i) { |
| | | var layer = layers[i] |
| | | layer.checked = checked |
| | | this.toggleLayer(layer) |
| | | if (layer.layers) { |
| | | this.swLayers(layer.layers, checked) |
| | | swLayers (configs, checked) { |
| | | if (configs) { |
| | | for (let i = 0, len = configs.length; i < len; ++i) { |
| | | var config = configs[i] |
| | | config.checked = checked |
| | | this.changeList.push(config) |
| | | if (config.layers) { |
| | | this.swLayers(config.layers, checked) |
| | | } |
| | | } |
| | | } |
| | |
| | | .btn-filter { |
| | | cursor: pointer; |
| | | color: #ffffff; |
| | | } |
| | | .felxs{ |
| | | display: flex; |
| | | flex-wrap:wrap; |
| | | width: 50% !important; |
| | | } |
| | | |
| | | .wms-panel { |
| | |
| | | } |
| | | .downUp:hover{font-size: 26px;font-weight: 900} |
| | | .layerbox-item { |
| | | padding-left: 0.1rem; |
| | | padding-left: 25px; |
| | | padding-top: 5px; |
| | | display: flex; |
| | | flex-wrap:wrap; |
| | | .basemap-layer-item {margin-bottom: 5px; |
| | | width: 100%; |
| | | input[type="checkbox"]{width:10px;height:10px;display: inline-block;text-align: center;vertical-align: middle; line-height: 10px;position: relative;} |
| | | input[type="checkbox"]::before{content: "";position: absolute;top: 0;left: 0;background: #fff;width: 100%;height: 100%;border: 1px solid #d9d9d9} |
| | | input[type="checkbox"]:checked::before{content: "\2713";background-color: @color-highlight;position: absolute;top: 0;left: 0;width:100%;border: 1px solid #fff700; |