From 047637f2325730e200a9eaa1544206357b9a9480 Mon Sep 17 00:00:00 2001
From: YANGDL <114714267@qq.com>
Date: 星期一, 22 二月 2021 14:54:26 +0800
Subject: [PATCH] Merge remote-tracking branch 'origin/master'
---
src/components/panel/RightSearchPanel.vue | 873 +++++++++++++++++++------------------
src/components/helpers/WmsHelper.js | 2
src/components/LayerController/modules/LcServiceLayerFilter.vue | 166 +++---
src/views/MapTemplate.vue | 78 +-
src/components/helpers/ServiceLayerHelper.js | 76 ++
src/components/LayerController/modules/LcServiceLayer.vue | 163 ++----
src/Sgis.js | 5
src/store/modules/map.js | 4
8 files changed, 685 insertions(+), 682 deletions(-)
diff --git a/src/Sgis.js b/src/Sgis.js
index eec70ab..264422a 100644
--- a/src/Sgis.js
+++ b/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
}
/**
diff --git a/src/components/LayerController/modules/LcServiceLayer.vue b/src/components/LayerController/modules/LcServiceLayer.vue
index dcf9fcd..cb9a7e8 100644
--- a/src/components/LayerController/modules/LcServiceLayer.vue
+++ b/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('璇ILE鏂规硶鏈疄鐜帮紒')
- },
- swWmtsLayer () {
- console.log('璇MTS鏂规硶鏈疄鐜帮紒')
+ 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>
diff --git a/src/components/LayerController/modules/LcServiceLayerFilter.vue b/src/components/LayerController/modules/LcServiceLayerFilter.vue
index a185123..cd5fb45 100644
--- a/src/components/LayerController/modules/LcServiceLayerFilter.vue
+++ b/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>
diff --git a/src/components/helpers/ServiceLayerHelper.js b/src/components/helpers/ServiceLayerHelper.js
index c85d32b..2ff5042 100644
--- a/src/components/helpers/ServiceLayerHelper.js
+++ b/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 = [] // 鍒濆鐨刉MTS闆�
+ this.tileLayersTileArray = [] // 鍒濆鐨凾ile闆�
+ this.tileLayersWMSArray = [] // 鍒濆鐨刉MS闆�
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鏈嶅姟閰嶇疆鐨刢ode
*/
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]
}
}
diff --git a/src/components/helpers/WmsHelper.js b/src/components/helpers/WmsHelper.js
index 52f7a84..af18c6c 100644
--- a/src/components/helpers/WmsHelper.js
+++ b/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
diff --git a/src/components/panel/RightSearchPanel.vue b/src/components/panel/RightSearchPanel.vue
index 4a59e18..f0c186f 100644
--- a/src/components/panel/RightSearchPanel.vue
+++ b/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>鎵� 杩� 鍟嗭細</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>鎵� 杩� 鍟嗭細</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>
diff --git a/src/store/modules/map.js b/src/store/modules/map.js
index a9d9fc5..2a1bff6 100644
--- a/src/store/modules/map.js
+++ b/src/store/modules/map.js
@@ -13,6 +13,7 @@
showServiceLayerFilter: false, // Service鍥惧眰杩囨护鍣�
selectedServiceLayer: '', // 浣跨敤杩囨护鍣ㄦ椂锛岃鎵撳紑鐨刉MS鏈嶅姟鐨凜ODE
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
},
diff --git a/src/views/MapTemplate.vue b/src/views/MapTemplate.vue
index bde308c..6354a8c 100644
--- a/src/views/MapTemplate.vue
+++ b/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>>
--
Gitblit v1.8.0