dzhh-frontend/.svn/pristine/7d/7d57d6c87efe3630fc226cdd507560c214f9625b.svn-base

<template>
  <div ref="ResCatalog" v-drag="'.resCatalog .ant-card-head'" class="resCatalog ol-unselectable">
    <a-card v-show='value' title="专题图层" style=" box-shadow: 0 0 5px #357ee5;">
      <a-icon slot="extra" type="close" style='cursor: pointer; color: #FFFFFF;' @click="$emit('input',false)"/>
      <a-collapse  style='overflow-y: auto; max-height: 70vh;'>
        <a-collapse-panel v-for="(item,index) in this.baseMap.list" :key="item.id" :header="item.name">
          <template v-for="(itemA,index) in item.layers" >
            <li style="margin: 15px" v-if="!itemA.layers"  :key='itemA.name'>
              <div>
                <a-checkbox v-model='itemA.visible' ref="checkbox" @change='layerSwitch(itemA)'>
                  <img v-show="itemA.visible&&[itemA.children]==''" :src="`${baseUrl}/${itemA.legend}`"/>
                  <span>{{ itemA.alias }}</span>
                </a-checkbox>
                <a-slider style='display: inline-block;' ref="slider" class="slider" :min="0" :max="1"
                          :step="0.01" :default-value="1" :tooltip-visible="false" :disabled='!itemA.visible'
                          @change='changeOpacity($event,itemA.name)'></a-slider>
              </div>
              <template v-if="[itemA.categories]!=''&&itemA.visible">
                <p v-for="item in itemA.categories">
                  <img :src="`${baseUrl}/${item.img}`"/>
                  {{ item.name }}
                </p>
              </template>
            </li>
            <a-collapse v-else style='overflow-y: auto; max-height: 90vh;'>
              <a-collapse-panel :key="itemA.name" :header="itemA.name">
                <ul style="margin: 10px;padding: 0;margin-left: 25px">
                  <li v-for="(layer,i) in itemA.layers" :key='layer.name'>
                    <div>
                      <a-checkbox v-model='layer.visible' ref="checkbox" @change='layerSwitch(layer)'>
                        <img v-show="layer.visible&&[layer.children]==''" :src="`${baseUrl}/${layer.legend}`"/>
                        <span>{{ layer.alias }}</span>
                      </a-checkbox>
                      <a-slider style='display: inline-block;' ref="slider" class="slider" :min="0" :max="1"
                                :step="0.01" :default-value="1" :tooltip-visible="false" :disabled='!layer.visible'
                                @change='changeOpacity($event,layer.name)'></a-slider>
                    </div>
                    <template v-if="[layer.categories]!=''&&layer.visible">
                      <p v-for="item in layer.categories">
                        <img :src="`${baseUrl}/${item.img}`"/>
                        {{ item.name }}
                      </p>
                    </template>
                  </li>
                </ul>
              </a-collapse-panel>
            </a-collapse>
          </template>
        </a-collapse-panel>
      </a-collapse>
    </a-card>
  </div>
</template>

<script>
import 'ol/ol.css'
import * as bussLayerFn from '@/utils/oneMap/bussLayer';


export default {
  name: "ResCatalog",
  props: {
    value: {
      type: Boolean,
      default: false,
      required: true
    }
  },
  components: {},
  data: function () {
    return {
      baseUrl:'',
      list:[],
      map:{}
    }
  },
  inject: ['baseMap','splitScreen'],
  created() {
    this.baseUrl=window._CONFIG['domianURL'];
  },
  mounted() {
    /*if(this.splitScreen){
      this.list=this.baseMap.list2;
    }else {
      this.list=this.baseMap.list;
    }*/
  },
  methods: {
    layerSwitch(layer) {
      if(this.splitScreen){
      this.map=this.baseMap.map2;
    }else {
      this.map=this.baseMap.map;
    }
      let checked = layer.visible;
      let m_layer = this.getLayerByName(layer.name);
      if (!m_layer) {
        m_layer=bussLayerFn.loadBussLayer(this.map, layer.url, layer.name,layer.alias, layer.sourceName,
          layer.zIndex,
          layer.visible);
      }
      m_layer.setVisible(checked);
    },
    changeOpacity(value, layerName) {
      let m_layer = this.getLayerByName(layerName);
      if (!m_layer) {
        return;
      }
      m_layer.setOpacity(value);
    },
    getLayerByName(layerName) {
      var map = this.map;
      if (!map) {
        return;
      }
      let layer = null;
      let layers = map.getLayers();
      let layerCount = layers.getLength();
      for (let i = 0; i < layerCount; i++) {
        let name = layers.item(i).get('name');
        if (name === layerName) {
          layer = layers.item(i);
          return layer;
        }
      }
      return layer;
    }
  },

}
</script>

<style scoped>
.ant-checkbox-wrapper{
  display: flex;
  align-items: center;
  max-width: 140px;
}
.resCatalog {
  border-radius: 4px;
  box-shadow: 0 0 5px #357ee5;
  min-width: 275px;
  height: auto;
}

.ant-slider {
  margin: 2px 1px 1px;
  width: 40%;
}

li > div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

p {
  padding-left: 40px;
}

img {
  width: 20px;
  /*height: 20px;*/
  display: inline-block;
}
</style>