Merge remote-tracking branch 'origin/master'

YANGDL

2021-02-22 047637f2325730e200a9eaa1544206357b9a9480

Merge remote-tracking branch 'origin/master'

# Conflicts:
#	src/conf/MapConfig.js

 src/Sgis.js

@@ -34,7 +34,7 @@
  })

  window.map = map

  initTileLayersHelper(map)
  return map
}

@@ -53,7 +53,8 @@
 * @param L
 */
const initTileLayersHelper = (map) => {
  return new ServiceLayerHelper({ map })
  var serviceLayerHelper = new ServiceLayerHelper({ map })
  return serviceLayerHelper
}

/**

 src/components/LayerController/modules/LcServiceLayer.vue

@@ -1,57 +1,46 @@
<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 class="inner-panel">
        <div class="wms-panel">
            <div v-for="item in mapConfig.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(itm)"/>{{ itm.sname }}
                    </div>
                </div>
            </div>
        </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>
        <lc-service-layer-filter v-if="layerFilterVisible" ref="serviceLayerFilter"></lc-service-layer-filter>
    </div>
  </div>
</template>

<script>
import WmsHelper from '../../helpers/WmsHelper'
import AjaxUtils from '@/utils/AjaxUtils'
import LcServiceLayerFilter from '@components/LayerController/modules/LcServiceLayerFilter'

export default {
  name: 'LcServiceLayer',
  components: {},
  components: { LcServiceLayerFilter },
  data () {
    return {
      selectedLineLayer: [], // 选中的管线图层
      selectedSubsidiaryLayer: [], // 选中的附属要素
      serviceTileLayerList: [], // Tile图层列表
      serviceWmtsLayerList: [], // Wmts图层列表
      serviceWmsLayerList: [] // 图层列表
      layerFilterVisible: false
    }
  },
  computed: {
    serviceLayerHelper () {
      return this.$store.state.map.serviceLayerHelper
    },
    mapConfig () {
      return this.$store.state.map.mapConfig
      return this.$store.state.map.mapConfig.mapConfig
    }
  },
  mounted () {
    // console.log('03步骤：', this.helper)
    this.updateServiceLayerList()
  },
  methods: {
    swAllLayers (item) {
@@ -61,71 +50,34 @@
        item.layers[i].checked = item.checked
      }
      this.updateWms()

      console.log(this.mapConfig)
    },
    swTileLayer () {
      console.log('该TILE方法未实现！')
    },
    swWmtsLayer () {
      console.log('该WMTS方法未实现！')
    loadWfs () {
      AjaxUtils.GetDataAsynByUrl('http://xearth.cn:6289/server/ogcserver/PipeLineTest/wfs?version=1.0.0&TYPENAME=pipeline&REQUEST=getfeature&OUTPUTFORMAT=json&maxFeatures=20000', {}, (res) => {
        window.L.geoJSON(res).addTo(window.map)
      })
    },
    swWmsLayer (itm) {
      console.log('22222222')
      itm.checked = !itm.checked
      this.updateWms()
    },
    swFilter (item) {
      this.$store.commit('setSelectedServiceLayer', item.code)
      this.$store.commit('toggleServiceLayerFilter')
      this.layerFilterVisible = !this.layerFilterVisible
    },
    updateServiceLayerList () {
      // eslint-disable-next-line no-debugger
      // debugger
      const 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])
        }
      }
      const 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])
        }
      }
      const 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)
        var tileLayer = window.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()
      }
    }
  }
@@ -133,36 +85,37 @@
</script>

<style scoped lang="less">
.inner-panel {
  display: flex;
  justify-content: center;
  align-items: center;

  .btn-filter {
    cursor: pointer;
  }

  .wms-panel {
    display: flex;
    flex-flow: column;

    .layerbox {
      width: 100%;
      display: flex;
      flex-flow: column;

      .layerbox-item {
    .inner-panel {
        display: flex;
        flex-flow: row wrap;
        margin-left: 15px;
        margin-top: 5px;
        justify-content: center;
        align-items: center;

        .basemap-layer-item {
          width: 50%;
        .btn-filter {
            cursor: pointer;
            color: #ffffff;
        }
      }

        .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>

 src/components/LayerController/modules/LcServiceLayerFilter.vue

@@ -1,20 +1,23 @@
<template>
  <div class="inner-panel">
      <div class="filter-group">
          <div v-for="item in filterConfig" :key="item.code" class="filter-item">
              <div class="title"><input type="checkbox" :value="item.code" :checked="item.checked" @change="swAllSubFilter(item)">{{item.name}}</div>
              <div class="content">
                  <div v-for="filter in item.filters" :key="filter.code">
                    <input type="checkbox" :value="filter.code" :checked="filter.checked"><label :title="filter.name">{{filter.sname}}</label>
                  </div>
              </div>
          </div>
      </div>
  </div>
    <div class="inner-panel">
        <div class="filter-group">
            <div v-for="item in pointLayers" :key="item.code" class="filter-item">
                <div class="title"><input type="checkbox" :value="item.code" :checked="item.checked"
                                          @change="swAllSubFilter(item)">{{item.name}}
                </div>
                <div class="content">
                    <div v-for="filter in item.filters" :key="filter.code">
                        <input type="checkbox" :value="filter.code" :checked="filter.checked"><label
                            :title="filter.name">{{filter.sname}}</label>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
import { mapMutations } from 'vuex'
import WmsHelper from '../../helpers/WmsHelper'

export default {
@@ -22,46 +25,44 @@
  components: {},
  data () {
    return {
      visible: {},
      filterConfig: [] // 附属要素
    }
  },
  computed: {
    ...mapState({
      serviceLayerHelper: (state) => {
        return state.serviceLayerHelper
      },
      selectedServiceLayer: (state) => {
        return state.selectedServiceLayer
      },
      serviceLayerFilters: (state) => {
        return state.serviceLayerFilters
      },
      mapConfig: (state) => {
        return state.mapConfig
      }
    })
    mapConfig () {
      return this.$store.state.map.mapConfig.mapConfig
    },
    pointLayers () {
      // 根据线图层选中情况，显示或隐藏点图层面板
      var config = this.mapConfig
      var checkedLayers = window.serviceLayerHelper.getCheckedLayers(config)
      var pointLayers = config.PointLayers
      return pointLayers.filter(function (layer) {
        var code = layer.code
        for (var i = 0; i < checkedLayers.length; i++) {
          var checkedLayer = checkedLayers[i]
          if (checkedLayer.childLayer.indexOf(code) >= 0) {
            return checkedLayer
          }
        }
      })
    }
  },
  mounted () {

    // this.filterConfig = window.serviceLayerHelper.getWMSConfig().filtersGroup
  },
  methods: {
    ...mapMutations([]),
    getFilterConfig () {
      return this.filterConfig
    },
    swAllSubFilter (item) {
      item.checked = !item.checked
      for (let i = 0, len = item.filters.length; i < len; ++i) {
        item.filters[i].checked = item.checked
      }

      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)
@@ -71,66 +72,63 @@
        }
      }
    }
  },
  watch: {
    selectedServiceLayer (newVal) {
      this.filterConfig = this.serviceLayerHelper.getWMSConfig(newVal).filtersGroup
    }
  }
}
</script>

<style scoped lang="less">
.inner-panel {
    color:#90c8e0;
    font-size: 13px;
    .inner-panel {
        color: #90c8e0;
        font-size: 13px;

    position: absolute;
    left: 250px;
    bottom: 10px;
    z-index: 1000;
    height: 220px;
    width: 500px;
        position: absolute;
        left: 250px;
        bottom: 10px;
        z-index: 1000;
        height: 220px;

    .filter-group{
        display: flex;
        flex-flow: row;
        .filter-group {
            display: flex;
            flex-flow: row;

        .filter-item{
            width: 120px;
            height: 100%;
            margin-right: 5px;
            .filter-item {
                width: 120px;
                height: 100%;
                margin-right: 5px;

            .title{
                height: '25px';
                background-color: #091331;
                border: 1px solid #10488c;
            }
            .content{
                background-color: rgba(44,62,80, 0.6);
                border: 1px solid #10488c;
                max-height: 200px;
                overflow-y: auto;
            }
                .title {
                    height: '25px';
                    background-color: #091331;
                    border: 1px solid #10488c;
                }

            ::-webkit-scrollbar{
                width: 7px;
                height: 5px !important;
            }
            ::-webkit-scrollbar-thumb {
                /*滚动条里面小方块*/
                border-radius: 10px;
                box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
                background   : #0661AE;
                border: 1px solid transparent;
            }
            ::-webkit-scrollbar-track {
                /*滚动条里面轨道*/
                // box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
                border-radius: 0px;
                background   : #0E3565;
                .content {
                    background-color: rgba(44, 62, 80, 0.6);
                    border: 1px solid #10488c;
                    max-height: 200px;
                    overflow-y: auto;
                }

                ::-webkit-scrollbar {
                    width: 7px;
                    height: 5px !important;
                }

                ::-webkit-scrollbar-thumb {
                    /*滚动条里面小方块*/
                    border-radius: 10px;
                    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
                    background: #0661AE;
                    border: 1px solid transparent;
                }

                ::-webkit-scrollbar-track {
                    /*滚动条里面轨道*/
                    // box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
                    border-radius: 0px;
                    background: #0E3565;
                }
            }
        }
    }
}
</style>

 src/components/helpers/ServiceLayerHelper.js

@@ -7,16 +7,16 @@
  constructor (options) {
    this.map = options.map
    this.L = window.L
    this.tileLayersMap = new Map()
    this.tileLayersWMSArray = []
    this.loadedLayersMap = new Map()
    this.tileLayerWmslayerGroup = this.L.layerGroup().addTo(this.map)
    this.tileLayersWMTSArray = []
    this.tileLayersTileArray = []
    this.tileLayersWMTSArray = [] // 初始的WMTS集
    this.tileLayersTileArray = [] // 初始的Tile集
    this.tileLayersWMSArray = [] // 初始的WMS集
    this.mapConfig = {}
  }

  getTileLayer (code) {
    return this.tileLayersMap.get(code)
    return this.loadedLayersMap.get(code)
  }

  /**
@@ -36,13 +36,25 @@
    console.debug('ServiceLayerHelper加载参数：', mapConfig)
    for (let i = 0, len = mapConfig.mapConfig.ServiceLayers.length; i < len; ++i) {
      const opt = mapConfig.mapConfig.ServiceLayers[i]
      this.setArray(opt)
      if (opt.type === 'wmts') {
        this.loadWmtsLayer(opt, isAddToMap, mapConfig.mapConfig.ServiceLayers[i])
        opt.checked && this.loadWmtsLayer(opt, isAddToMap, mapConfig.mapConfig.ServiceLayers[i])
      } else if (opt.type === 'wms') {
        this.loadWmsLayer(opt, isAddToMap, mapConfig.mapConfig.ServiceLayers[i])
        opt.checked && this.loadWmsLayer(opt, isAddToMap, mapConfig.mapConfig.ServiceLayers[i])
      } else if (opt.type === 'tile') {
        this.loadTileLayer(opt, isAddToMap, mapConfig.mapConfig.ServiceLayers[i])
        opt.checked && this.loadTileLayer(opt, isAddToMap, mapConfig.mapConfig.ServiceLayers[i])
      }
    }
  }

  setArray (opt) {
    var type = opt.type
    if (type === 'wmts') {
      this.tileLayersWMTSArray.push(opt)
    } else if (type === 'wms') {
      this.tileLayersWMSArray.push(opt)
    } else if (type === 'tile') {
      this.tileLayersTileArray.push(opt)
    }
  }

@@ -58,8 +70,7 @@
    if (isAddToMap) {
      layer.addTo(this.map)
    }
    this.tileLayersMap.set(options.code, layer)
    this.tileLayersWMTSArray.push(layer)
    this.loadedLayersMap.set(options.code, layer)
  }

  /**
@@ -74,8 +85,7 @@
    if (isAddToMap) {
      layer.addTo(this.tileLayerWmslayerGroup)
    }
    this.tileLayersMap.set(options.code, layer)
    this.tileLayersWMSArray.push(layer)
    this.loadedLayersMap.set(options.code, layer)
  }

  /**
@@ -98,8 +108,7 @@
    if (isAddToMap) {
      layer.addTo(this.map)
    }
    this.tileLayersMap.set(options.code, layer)
    this.tileLayersTileArray.push(layer)
    this.loadedLayersMap.set(options.code, layer)
  }

  /**
@@ -107,8 +116,8 @@
     * @param {*} name
     */
  hideTileLayer (code) {
    if (this.tileLayersMap) {
      const tileLayer = this.tileLayersMap.get(code)
    if (this.loadedLayersMap) {
      const tileLayer = this.loadedLayersMap.get(code)
      this.map.removeLayer(tileLayer)
    }
  }
@@ -118,10 +127,32 @@
     * @param {*} name
     */
  showTileLayer (code) {
    if (this.tileLayersMap) {
      const tileLayer = this.tileLayersMap.get(code)
    if (this.loadedLayersMap) {
      const tileLayer = this.loadedLayersMap.get(code)
      this.map.addLayer(tileLayer)
    }
  }

  /**
   * 得到选中的图层列表
   * @param mapConfig
   * @returns {[]}
   */
  getCheckedLayers (mapConfig) {
    var checkedLayers = []
    var serviceLayers = mapConfig.ServiceLayers
    for (var i = 0; i < serviceLayers.length; i++) {
      var serviceLayer = serviceLayers[i]
      var layers = serviceLayer.layers
      for (var j = 0; j < layers.length; j++) {
        var layer = layers[j]
        var checked = layer.checked
        if (checked) {
          checkedLayers.push(layer)
        }
      }
    }
    return checkedLayers
  }

  /**
@@ -146,13 +177,20 @@
  }

  /**
   * 根据线的选择，得到点的可选择图层数据
   */
  getFiltersGroup () {

  }

  /**
     * 通过code查找WMS的服务配置
     * @param {} code wms服务配置的code
     */
  getWMSConfig (code) {
    const mc = this.mapConfig
    for (let i = 0, len = mc.mapConfig.ServiceLayers.length; i < len; ++i) {
      if (code === mc.mapConfig.ServiceLayers[i].code && mc.mapConfig.ServiceLayers[i].type === 'wms') {
      if (code === mc.mapConfig.ServiceLayers[i].code || mc.mapConfig.ServiceLayers[i].type === 'wms') {
        return mc.mapConfig.ServiceLayers[i]
      }
    }

 src/components/helpers/WmsHelper.js

@@ -6,7 +6,7 @@
  this.wmsLayersMap = {}

  this.initMapConfig = (mapConfig) => {
    var serviceLayers = mapConfig.mapConfig.ServiceLayers
    var serviceLayers = mapConfig.ServiceLayers
    for (var i = 0; i < serviceLayers.length; i++) {
      var service = serviceLayers[i]
      var checked = service.checked

 src/components/panel/RightSearchPanel.vue

@@ -1,122 +1,123 @@
<template>
  <div id="right-panel">
    <div class="panel-tab">
      <div class="btn-stretch" @click="toggleMonitorPanel"></div>
      <div class="tab-gd" @click="handleGd" :class="{'B-TMT-tab-waybill-isActive': isWaybillHover}"></div>
      <div class="tab-hb" @click="handleHb" :class="{'B-TMT-tab-route-isActive': isRouteHover}"></div>
      <div class="tab-pk" @click="handlePk" :class="{'B-TMT-tab-route-isActive': isRouteHover}"></div>
    </div>
    <div class="right-control">
      <div class="el-message-box__header panel_header">
        <div class="el-message-box__title panel_title"><!----><span>{{ title }}</span>
    <div id="right-panel">
        <div class="panel-tab">
            <div class="btn-stretch" @click="toggleMonitorPanel"></div>
            <div class="tab-gd" @click="handleGd" :class="{'B-TMT-tab-waybill-isActive': isWaybillHover}"></div>
            <div class="tab-hb" @click="handleHb" :class="{'B-TMT-tab-route-isActive': isRouteHover}"></div>
            <div class="tab-pk" @click="handlePk" :class="{'B-TMT-tab-route-isActive': isRouteHover}"></div>
        </div>
      </div>
      <div class="el-message-box__content" style="padding:6px;font-size: 13px;">
        <div class="monitor1" v-if="gdVisible">
          <div>
            <el-card class="search-panel">
              <el-form ref="form" :model="form" label-width="90px" class="search-form">
                <el-form-item label="类型：">
                  <el-select v-model="form.pipelineType" @change="handlePipelineType">
                    <el-option
                        v-for="item in pipelineTypeOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="数据类型：">
                  <el-select v-model="form.dataType">
                    <el-option
                        v-for="item in dataTypeOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="模糊搜索：">
                  <el-input v-model="form.key" size="mini"
                            placeholder="在此输入关键字"></el-input>
                </el-form-item>
                <el-form-item>
                  <input type="button" class="btn-ok" @click="handleSearch" value="查询">
                  <input type="button" class="btn-reset" @click="handleSearch" value="重置">
                </el-form-item>
              </el-form>
            </el-card>
            <el-card class="search-result" style="height:271px;">
              <div class="B-TMD-table-list" v-for="(item,index) in list" :key="index">
                <div class="B-TMD-table-list-title">
                  <div class="B-TMD-table-list-head">
                    <div class="B-TMD-table-list-title-y"
                         :class="['B-TMD-table-list-title-y-nam', { 'warning': item.vehicleStatus==='910003' }, { 'offline': item.vehicleStatus==='910001' }]">
                      <span>运单号：</span>
                      <span id="waybillNumber" class="B-TMD-table-list-title-y-num"
                            :title="item.transNo">
        <div class="right-control">
            <div class="el-message-box__header panel_header">
                <div class="el-message-box__title panel_title"><!----><span>{{ title }}</span>
                </div>
            </div>
            <div class="el-message-box__content" style="padding:6px;font-size: 13px;">
                <div class="monitor1" v-if="gdVisible">
                    <div>
                        <el-card class="search-panel">
                            <el-form ref="form" :model="form" label-width="90px" class="search-form">
                                <el-form-item label="类型：">
                                    <el-select v-model="form.pipelineType" @change="handlePipelineType">
                                        <el-option
                                                v-for="item in pipelineTypeOptions"
                                                :key="item.value"
                                                :label="item.label"
                                                :value="item.value">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="数据类型：">
                                    <el-select v-model="form.dataType">
                                        <el-option
                                                v-for="item in dataTypeOptions"
                                                :key="item.value"
                                                :label="item.label"
                                                :value="item.value">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="模糊搜索：">
                                    <el-input v-model="form.key" size="mini"
                                              placeholder="在此输入关键字"></el-input>
                                </el-form-item>
                                <el-form-item>
                                    <input type="button" class="btn-ok" @click="handleSearch" value="查询">
                                    <input type="button" class="btn-reset" @click="handleSearch" value="重置">
                                </el-form-item>
                            </el-form>
                        </el-card>
                        <el-card class="search-result" style="height:271px;">
                            <div class="B-TMD-table-list" v-for="(item,index) in list" :key="index">
                                <div class="B-TMD-table-list-title">
                                    <div class="B-TMD-table-list-head">
                                        <div class="B-TMD-table-list-title-y"
                                             :class="['B-TMD-table-list-title-y-nam', { 'warning': item.vehicleStatus==='910003' }, { 'offline': item.vehicleStatus==='910001' }]">
                                            <span>运单号：</span>
                                            <span id="waybillNumber" class="B-TMD-table-list-title-y-num"
                                                  :title="item.transNo">
                                                <span class="B-TMD-table-list-title-y-alarm">{{ item.transNo }}</span>
                                            </span>
                    </div>
                    <div class="B-TMD-table-list-title-c">
                      载具号：
                      <span id="plateNumber_p">
                                        </div>
                                        <div class="B-TMD-table-list-title-c">
                                            载具号：
                                            <span id="plateNumber_p">
                                                <span id="plateNumber_n"><a href="#">{{ item.vehicleNo }}</a></span>
                                            </span>
                    </div>
                  </div>
                  <div class="B-TMD-table-icons" style="float:right">
                    <ul>
                      <li class="B-TMD-table-list-title-y-adress"
                          @click="handleLocation(item)"></li>
                      <li :class="[{'B-TMD-table-list-title-y-car': item.vehicleStatus ==='910002', 'B-TMD-table-list-title-y-car-offline': item.vehicleStatus ==='910001','B-TMD-table-list-title-y-car-warning': item.vehicleStatus==='910003' }]"></li>
                    </ul>
                  </div>
                </div>
                <div class="B-TMD-table-list-content">
                  <div>
                    <span>发货企业：</span>
                    <span id="b_twe_consignment" :title="item.outWarehouseName">{{
                                        </div>
                                    </div>
                                    <div class="B-TMD-table-icons" style="float:right">
                                        <ul>
                                            <li class="B-TMD-table-list-title-y-adress"
                                                @click="handleLocation(item)"></li>
                                            <li :class="[{'B-TMD-table-list-title-y-car': item.vehicleStatus ==='910002', 'B-TMD-table-list-title-y-car-offline': item.vehicleStatus ==='910001','B-TMD-table-list-title-y-car-warning': item.vehicleStatus==='910003' }]"></li>
                                        </ul>
                                    </div>
                                </div>
                                <div class="B-TMD-table-list-content">
                                    <div>
                                        <span>发货企业：</span>
                                        <span id="b_twe_consignment" :title="item.outWarehouseName">{{
                        item.outWarehouseName == null ? "暂无" : item.outWarehouseName
                      }}</span>
                  </div>
                  <div>
                    <span>承&nbsp;&nbsp;运&nbsp;&nbsp;商：</span>
                    <span id="b_twe_loan" :title="item.carrierName">{{ item.carrierName }}</span>
                  </div>
                  <div><span>收货企业：</span> <span
                      id="b_twe_loan1" :title="item.recvWarehouseName">{{ item.recvWarehouseName }}</span></div>
                </div>
                <div class="B-TMD-table-list-bottom">
                  <div class="B-TMD-table-list-bottom-name">
                    货物名称：<span :title="item.materialName">{{ item.materialName }}</span></div>
                </div>
              </div>
            </el-card>
                                    </div>
                                    <div>
                                        <span>承&nbsp;&nbsp;运&nbsp;&nbsp;商：</span>
                                        <span id="b_twe_loan" :title="item.carrierName">{{ item.carrierName }}</span>
                                    </div>
                                    <div><span>收货企业：</span> <span
                                            id="b_twe_loan1" :title="item.recvWarehouseName">{{ item.recvWarehouseName }}</span>
                                    </div>
                                </div>
                                <div class="B-TMD-table-list-bottom">
                                    <div class="B-TMD-table-list-bottom-name">
                                        货物名称：<span :title="item.materialName">{{ item.materialName }}</span></div>
                                </div>
                            </div>
                        </el-card>

            <el-card class="footer-page" v-if="total > 10">
              <el-pagination
                  small
                  @current-change="handlePage"
                  :page-size=pageSize
                  layout="prev, pager, next"
                  :total=total
                  :current-page=current
                  class="warnPagination"
              >
              </el-pagination>
            </el-card>
          </div>
                        <el-card class="footer-page" v-if="total > 10">
                            <el-pagination
                                    small
                                    @current-change="handlePage"
                                    :page-size=pageSize
                                    layout="prev, pager, next"
                                    :total=total
                                    :current-page=current
                                    class="warnPagination"
                            >
                            </el-pagination>
                        </el-card>
                    </div>
                </div>
                <div class="monitor2" v-if="hbVisible">
                    <env-protect-search></env-protect-search>
                </div>
                <div class="monitor2" v-if="pkVisible">
                    <discharge-search></discharge-search>
                </div>
            </div>
        </div>
        <div class="monitor2" v-if="hbVisible">
          <env-protect-search></env-protect-search>
        </div>
        <div class="monitor2" v-if="pkVisible">
          <discharge-search></discharge-search>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
@@ -135,6 +136,7 @@
      pkVisible: false,
      toggleMonitorStyle: 'right:0px',
      list: [],
      total: 0,
      title: '管道信息查询',
      pipelineTypeOptions: [{
        value: '1',
@@ -212,6 +214,9 @@
    handleClose (done) {
      console.log(done)
    },
    handleSearch () {

    },
    handlePipelineType (item) {
      console.log(item)
      if (item === '2') {
@@ -272,370 +277,370 @@
</script>

<style lang="less">
#right-panel {
  width: 322px;
  height: 573px;
  position: absolute;
  right: 10px;
  top: 10px;
    #right-panel {
        width: 322px;
        height: 573px;
        position: absolute;
        right: 10px;
        top: 10px;

  .el-card__body {
    padding: 7px;
  }
        .el-card__body {
            padding: 7px;
        }

  .el-form-item__content {
    color: rgb(52, 224, 255);
  }
        .el-form-item__content {
            color: rgb(52, 224, 255);
        }

  .el-picker-panel {
    background-color: #061e51 !important;
  }
        .el-picker-panel {
            background-color: #061e51 !important;
        }

  .el-input__inner {
    border-radius: 0 !important;
    background-color: #061e51 !important;
    border: solid 1px #0e639e !important;
  }
        .el-input__inner {
            border-radius: 0 !important;
            background-color: #061e51 !important;
            border: solid 1px #0e639e !important;
        }

  .el-form-item__label {
    color: rgb(52, 224, 255);
  }
        .el-form-item__label {
            color: rgb(52, 224, 255);
        }

  .el-input__inner::placeholder {
    color: #9a9494;
  }
        .el-input__inner::placeholder {
            color: #9a9494;
        }

  /* 谷歌 */
        /* 谷歌 */

  .el-input__inner::-webkit-input-placeholder {
    color: #9a9494;
  }
        .el-input__inner::-webkit-input-placeholder {
            color: #9a9494;
        }

  /* 火狐 */
        /* 火狐 */

  .el-input__inner:-moz-placeholder {
    color: #9a9494;
  }
        .el-input__inner:-moz-placeholder {
            color: #9a9494;
        }

  /*ie*/
        /*ie*/

  .el-input__inner:-ms-input-placeholder {
    color: #9a9494;
  }
        .el-input__inner:-ms-input-placeholder {
            color: #9a9494;
        }

  .warning {
    color: #dcc805;
  }
        .warning {
            color: #dcc805;
        }

  #plateNumber_n a {
    color: rgb(52, 224, 255);
  }
        #plateNumber_n a {
            color: rgb(52, 224, 255);
        }

  .offline {
    color: #9a9494;
  }
        .offline {
            color: #9a9494;
        }

  .customInput {
    width: 118px;
  }
        .customInput {
            width: 118px;
        }

  .btn-ok {
    margin-right: 10px;
    width: 4rem;
    background-color: #0B89B5;
    color: white;
    border: 0;
  }
        .btn-ok {
            margin-right: 10px;
            width: 4rem;
            background-color: #0B89B5;
            color: white;
            border: 0;
        }

  .btn-reset {
    margin-right: 10px;
    width: 4rem;
    background-color: orange;
    color: white;
    border: 0;
  }
        .btn-reset {
            margin-right: 10px;
            width: 4rem;
            background-color: orange;
            color: white;
            border: 0;
        }

  .component-fade-enter-active, .component-fade-leave-active {
    transition: opacity .5s ease;
  }
        .component-fade-enter-active, .component-fade-leave-active {
            transition: opacity .5s ease;
        }

  .component-fade-enter, .component-fade-leave-to
    /* .component-fade-leave-active for below version 2.1.8 */ {
    opacity: 0;
  }
        .component-fade-enter, .component-fade-leave-to
            /* .component-fade-leave-active for below version 2.1.8 */ {
            opacity: 0;
        }

  .B-TMD-table-icons ul li {
    float: left;
    margin: 10px;
    list-style: none;
  }
        .B-TMD-table-icons ul li {
            float: left;
            margin: 10px;
            list-style: none;
        }

  .B-TMD-table-list {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
        .B-TMD-table-list {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

  .B-TMD-table-list-title {
    width: 100%;
    height: 50px;
  }
        .B-TMD-table-list-title {
            width: 100%;
            height: 50px;
        }

  .B-TMD-table-list-head {
    width: 160px;
    float: left;
    padding-left: 5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
        .B-TMD-table-list-head {
            width: 160px;
            float: left;
            padding-left: 5px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

  .btn-stretch {
    width: 15px;
    height: 28px;
    background: url('../../assets/images/map-pages/icon/icon.png') no-repeat -408px 0;
    margin-left: 10px;
    margin-top: 3px;
    cursor: pointer;
        .btn-stretch {
            width: 15px;
            height: 28px;
            background: url('../../assets/images/map-pages/icon/icon.png') no-repeat -408px 0;
            margin-left: 10px;
            margin-top: 3px;
            cursor: pointer;

    transform: rotateY(180deg);
    transform-origin: 50% 50%;
    transition: transform 1s linear;
  }
            transform: rotateY(180deg);
            transform-origin: 50% 50%;
            transition: transform 1s linear;
        }

  .tab-gd {
    width: 32px;
    height: 30px;
    background-color: #0B3B6D;
  }
        .tab-gd {
            width: 32px;
            height: 30px;
            background-color: #0B3B6D;
        }

  .tab-hb {
    width: 32px;
    height: 30px;
    background-color: #545454;
  }
        .tab-hb {
            width: 32px;
            height: 30px;
            background-color: #545454;
        }

  .tab-pk {
    width: 32px;
    height: 30px;
    background-color: #83a6c4;
  }
        .tab-pk {
            width: 32px;
            height: 30px;
            background-color: #83a6c4;
        }

  .panel-tab {
    position: absolute;
    left: 0;
    height: 120px;
    top: 0;
    width: 32px;
    z-index: 500;
    background: url('../../assets/images/map-pages/icon/caidan.png') no-repeat;
  }
        .panel-tab {
            position: absolute;
            left: 0;
            height: 120px;
            top: 0;
            width: 32px;
            z-index: 500;
            background: url('../../assets/images/map-pages/icon/caidan.png') no-repeat;
        }

  .right-control {
    width: 290px;
    height: 573px;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 999;
    background: url('../../assets/images/map-pages/icon/bgc.png') no-repeat;
  }
        .right-control {
            width: 290px;
            height: 573px;
            position: absolute;
            top: 0;
            right: 0;
            z-index: 999;
            background: url('../../assets/images/map-pages/icon/bgc.png') no-repeat;
        }

  .panel_searchTotal {
    font-size: 12px;
    float: right;
  }
        .panel_searchTotal {
            font-size: 12px;
            float: right;
        }

  .panel_header {
    // background-color: #030D2E;
    padding: 7px 15px 3px 20px;
  }
        .panel_header {
            // background-color: #030D2E;
            padding: 7px 15px 3px 20px;
        }

  .panel_title {
    font-size: 12px;
    margin: 0px;
    padding: 0px;
    color: #78c4ff;
    font-weight: bold;
  }
        .panel_title {
            font-size: 12px;
            margin: 0px;
            padding: 0px;
            color: #78c4ff;
            font-weight: bold;
        }

  .el-message-box__content {
    background-color: transparent;
  }
        .el-message-box__content {
            background-color: transparent;
        }

  .search-form .el-form-item {
    margin: 0px;
  }
        .search-form .el-form-item {
            margin: 0px;
        }

  .search-form .el-icon-search {
    display: grid;
    line-height: 30px;
    font-size: 18px;
  }
        .search-form .el-icon-search {
            display: grid;
            line-height: 30px;
            font-size: 18px;
        }

  .search-panel {
    border: #07325B;
    background-color: #07325B !important;
    margin-top: 0px;
        .search-panel {
            border: #07325B;
            background-color: #07325B !important;
            margin-top: 0px;

    .el-input__inner {
      border-radius: 0px !important;
      background-color: #061e51 !important;
            .el-input__inner {
                border-radius: 0px !important;
                background-color: #061e51 !important;
            }
        }

        input::-webkit-input-placeholder {
            color: #569ee1;
        }

        input::-moz-placeholder {
            color: #569ee1;
        }

        input::-ms-input-placeholder {
            color: #569ee1;
        }

        input[type=text]:focus {
            outline: 1px solid #17e4f6;
            // box-shadow:  1px 0px 3px 0px #17e4f6;
            box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
        }

        .search-result {
            margin: 5px 0px 0px 0px;
            padding: 0px;
            border: #051842;
            height: 290px;
            overflow-y: scroll;
            background-color: transparent !important;
            margin-bottom: -8px !important;
        }

        .offline {
            color: #64778B;
        }

        .B-TMD-table-list {
            margin-top: 10px;
            text-align: left;
            padding-left: 10px;
            //color: #64778B;
            color: #34e0ff;
            width: 100%;
            line-height: 25px;
            background: url('../../assets/images/map-pages/icon/dd.png') no-repeat;
        }

        .B-TMD-inp-button {
            width: 46px;
            height: 52px;
            position: absolute;
            bottom: 8px;
            right: 16px;
            background: url('../../assets/images/map-pages/icon/icon.png') no-repeat -481px 0;
            cursor: pointer;
        }

        .footer-page {
            position: absolute;
            background-color: transparent !important;
            bottom: 10px !important;
            margin-left: 0px;
            border: none;

            .warnPagination {
                .btn-quicknext, .btn-quickprev {
                    color: #e4e8f1 !important;
                    background-color: transparent;
                    // border: 1px solid #25AECD;
                    border-left: 1px solid #25AECD;
                    border-bottom: 1px solid #25AECD;
                    border-top: 1px solid #25AECD;
                    color: #e4e8f1;
                }

                .el-pager li {
                    color: #e4e8f1;
                    background: transparent;
                    // border: 1px solid #25AECD;
                    border-left: 1px solid #25AECD;
                    border-bottom: 1px solid #25AECD;
                    border-top: 1px solid #25AECD;
                }

                .el-pager li.active {
                    border-color: #25AECD;
                    background-color: rgba(38, 222, 253, 0.3);
                    color: #e4e8f1;
                }

                .el-pager li:hover {
                    border-color: #25AECD;
                    background-color: rgba(38, 222, 253, 0.3);
                    color: #34e0ff;
                }

                .btn-prev {
                    background-color: transparent;
                    // border: 1px solid #25AECD;
                    border-left: 1px solid #25AECD;
                    border-bottom: 1px solid #25AECD;
                    border-top: 1px solid #25AECD;
                    color: #e4e8f1;
                }

                .btn-next {
                    background-color: transparent;
                    border: 1px solid #25AECD;
                    color: #e4e8f1;
                }
            }
        }

        ::-webkit-scrollbar {
            width: 7px;
            height: 5px !important;
        }

        ::-webkit-scrollbar-thumb {
            /*滚动条里面小方块*/
            border-radius: 10px;
            box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
            background: #0661AE;
            border: 1px solid transparent;
        }

        ::-webkit-scrollbar-track {
            /*滚动条里面轨道*/
            // box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
            border-radius: 0px;
            background: #0E3565;
        }

        .selectFrom {
            color: #061e51;
            border: 1px solid #061e51 !important;
            background: #dcc805 !important;

            .el-select-dropdown__list {
                background: #061e51 !important;
            }

            .el-select-dropdown__item {
                color: #949494;
                background: #061e51 !important;
            }

            .el-select-dropdown__item.hover,
            .el-select-dropdown__item:hover {
                color: #fff;
                background: #061e51 !important;
            }

            .popper__arrow {
                background-color: #061e51 !important;
            }
        }
    }
  }

  input::-webkit-input-placeholder {
    color: #569ee1;
  }

  input::-moz-placeholder {
    color: #569ee1;
  }

  input::-ms-input-placeholder {
    color: #569ee1;
  }

  input[type=text]:focus {
    outline: 1px solid #17e4f6;
    // box-shadow:  1px 0px 3px 0px #17e4f6;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
  }

  .search-result {
    margin: 5px 0px 0px 0px;
    padding: 0px;
    border: #051842;
    height: 290px;
    overflow-y: scroll;
    background-color: transparent !important;
    margin-bottom: -8px !important;
  }

  .offline {
    color: #64778B;
  }

  .B-TMD-table-list {
    margin-top: 10px;
    text-align: left;
    padding-left: 10px;
    //color: #64778B;
    color: #34e0ff;
    width: 100%;
    line-height: 25px;
    background: url('../../assets/images/map-pages/icon/dd.png') no-repeat;
  }

  .B-TMD-inp-button {
    width: 46px;
    height: 52px;
    position: absolute;
    bottom: 8px;
    right: 16px;
    background: url('../../assets/images/map-pages/icon/icon.png') no-repeat -481px 0;
    cursor: pointer;
  }

  .footer-page {
    position: absolute;
    background-color: transparent !important;
    bottom: 10px !important;
    margin-left: 0px;
    border: none;

    .warnPagination {
      .btn-quicknext, .btn-quickprev {
        color: #e4e8f1 !important;
        background-color: transparent;
        // border: 1px solid #25AECD;
        border-left: 1px solid #25AECD;
        border-bottom: 1px solid #25AECD;
        border-top: 1px solid #25AECD;
        color: #e4e8f1;
      }

      .el-pager li {
        color: #e4e8f1;
        background: transparent;
        // border: 1px solid #25AECD;
        border-left: 1px solid #25AECD;
        border-bottom: 1px solid #25AECD;
        border-top: 1px solid #25AECD;
      }

      .el-pager li.active {
        border-color: #25AECD;
        background-color: rgba(38, 222, 253, 0.3);
        color: #e4e8f1;
      }

      .el-pager li:hover {
        border-color: #25AECD;
        background-color: rgba(38, 222, 253, 0.3);
        color: #34e0ff;
      }

      .btn-prev {
        background-color: transparent;
        // border: 1px solid #25AECD;
        border-left: 1px solid #25AECD;
        border-bottom: 1px solid #25AECD;
        border-top: 1px solid #25AECD;
        color: #e4e8f1;
      }

      .btn-next {
        background-color: transparent;
        border: 1px solid #25AECD;
        color: #e4e8f1;
      }
    }
  }

  ::-webkit-scrollbar {
    width: 7px;
    height: 5px !important;
  }

  ::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius: 10px;
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    background: #0661AE;
    border: 1px solid transparent;
  }

  ::-webkit-scrollbar-track {
    /*滚动条里面轨道*/
    // box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
    border-radius: 0px;
    background: #0E3565;
  }

  .selectFrom {
    color: #061e51;
    border: 1px solid #061e51 !important;
    background: #dcc805 !important;

    .el-select-dropdown__list {
      background: #061e51 !important;
    }

    .el-select-dropdown__item {
      color: #949494;
      background: #061e51 !important;
    }

    .el-select-dropdown__item.hover,
    .el-select-dropdown__item:hover {
      color: #fff;
      background: #061e51 !important;
    }

    .popper__arrow {
      background-color: #061e51 !important;
    }
  }
}
</style>

 src/store/modules/map.js

@@ -13,6 +13,7 @@
  showServiceLayerFilter: false, // Service图层过滤器
  selectedServiceLayer: '', // 使用过滤器时，被打开的WMS服务的CODE
  serviceLayerFilters: {}, // 服务图层控制过滤配置
  checkedLayers: {}, // 选中图层对象
  mapConfig: mapConfig
}
const mutations = {
@@ -22,6 +23,9 @@
  setBasemapHelper (state, layerHelper) {
    state.basemapHelper = layerHelper
  },
  setCheckedLayers (state, checkedLayers) {
    state.checkedLayers = checkedLayers
  },
  setServiceLayerHelper (state, layerHelper) {
    state.serviceLayerHelper = layerHelper
  },

 src/views/MapTemplate.vue

@@ -1,18 +1,17 @@
<template>
  <div class="full-screen">
    <popup ref="popup" @callPopup="callPopup"></popup>
    <div id="map" ref="rootmap">
    <div class="full-screen">
        <popup ref="popup" @callPopup="callPopup"></popup>
        <div id="map" ref="rootmap">
        </div>
        <sgis-layer-controller :preset="'warningPreset'">
            <lc-basemap></lc-basemap>
            <!--            <div class="barline"></div>-->
            <lc-service-layer class="barline" v-if="lcServiceLayerVisible"></lc-service-layer>
        </sgis-layer-controller>
        <monitor-panel></monitor-panel>
        <top-enterprise-panel></top-enterprise-panel>
        <tool-box-panel></tool-box-panel>
    </div>
    <sgis-layer-controller :preset="'warningPreset'">
      <lc-basemap></lc-basemap>
      <!--            <div class="barline"></div>-->
      <lc-service-layer class="barline"></lc-service-layer>
    </sgis-layer-controller>
    <lc-service-layer-filter v-show="showServiceLayerFilter" ref="serviceLayerFilter"></lc-service-layer-filter>
    <monitor-panel></monitor-panel>
    <top-enterprise-panel></top-enterprise-panel>
    <tool-box-panel></tool-box-panel>
  </div>
</template>

<script>
@@ -22,11 +21,11 @@
import SgisLayerController from '@components/LayerController/LayerController'
import LcBasemap from '@components/LayerController/modules/LcBaseMap'
import LcServiceLayer from '@components/LayerController/modules/LcServiceLayer'
import LcServiceLayerFilter from '@components/LayerController/modules/LcServiceLayerFilter'
import MonitorPanel from '@components/panel/RightSearchPanel'
import TopEnterprisePanel from '@components/panel/TopEnterprisePanel'
import ToolBoxPanel from '@components/panel/ToolBoxPanel'
import Popup from '@views/popup/Popup'

export default {
  name: 'MapTemplate',
  components: {
@@ -36,21 +35,18 @@
    MonitorPanel,
    LcBasemap,
    LcServiceLayer,
    LcServiceLayerFilter,
    Popup
  },
  data () {
    return {
      map: null,
      lcServiceLayerVisible: false,
      basemapHelper: {},
      serviceLayerHelper: {},
      vectorLayerHelper: {}
    }
  },
  computed: {
    showServiceLayerFilter () {
      return this.$store.state.map.showServiceLayerFilter
    },
    mapConfig () {
      return this.$store.state.map.mapConfig
    }
@@ -62,10 +58,13 @@
  },
  methods: {
    saveMapStatus () {
      window.serviceLayerHelper = this.serviceLayerHelper
      this.$store.commit('setMapObj', this.map)
      this.$store.commit('setBasemapHelper', this.basemapHelper)
      this.$store.commit('setServiceLayerHelper', this.serviceLayerHelper)
      // this.$store.commit('setServiceLayerHelper', this.serviceLayerHelper)
      this.$store.commit('setVectorLayerHelper', this.vectorLayerHelper)

      this.lcServiceLayerVisible = true
    },
    init () {
      const mapcontainer = this.$refs.rootmap
@@ -100,7 +99,12 @@
      var marker = L.marker([32.2221, 118.7843], {
        icon: icon
      }).addTo(this.map)
        .bindPopup(() => this.$refs.popup.$el, { className: 's-map-popup', minWidth: 300, closeButton: false, autoClose: false })
        .bindPopup(() => this.$refs.popup.$el, {
          className: 's-map-popup',
          minWidth: 300,
          closeButton: false,
          autoClose: false
        })
        .bindTooltip('字体光晕效果t.', {
          // permanent : true,
          offset: [0, 0], // 偏移
@@ -123,23 +127,23 @@

<style lang="less">

.full-screen {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  position: absolute;
    .full-screen {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        position: absolute;

  #map {
    height: 100%;
    width: 100%;
  }
        #map {
            height: 100%;
            width: 100%;
        }

  .barline {
    //width: 100%;
    //height: 1px;
    //background-color: #0661AE;
    border-top: 1px solid #0661AE;
  }
}
        .barline {
            //width: 100%;
            //height: 1px;
            //background-color: #0661AE;
            border-top: 1px solid #0661AE;
        }
    }
</style>>