From 0ace25701a381cffeda6973a9459a5195058b23b Mon Sep 17 00:00:00 2001
From: YANGDL <114714267@qq.com>
Date: 星期一, 01 三月 2021 20:20:18 +0800
Subject: [PATCH] Merge remote-tracking branch 'origin/master'
---
src/conf/Constants.js | 26 ++++++++
src/views/MapTemplate.vue | 3
src/components/helpers/ServiceLayerHelper.js | 14 ++++
src/views/popup/Popup.vue | 95 ++++++++++++++++++++++++-------
4 files changed, 112 insertions(+), 26 deletions(-)
diff --git a/src/components/helpers/ServiceLayerHelper.js b/src/components/helpers/ServiceLayerHelper.js
index 96ad647..60325fb 100644
--- a/src/components/helpers/ServiceLayerHelper.js
+++ b/src/components/helpers/ServiceLayerHelper.js
@@ -17,6 +17,7 @@
this.geojsonArray = {} // 鍒濆鐨刧eojson闆�
this.layerConfig = {}
this.regex = /\{(.+?)\}/g // 鍖归厤{}
+ this.popupComp = null
}
getTileLayer (code) {
@@ -26,10 +27,11 @@
/**
* 鏍规嵁閰嶇疆鏂囦欢鍒濆鍖栦笟鍔″簳鍥�
*/
- initServiceLayers (layerConfig) {
+ initServiceLayers (layerConfig, popupComp) {
this.layerConfig = layerConfig
+ this.popupComp = popupComp
this.loadLayers(layerConfig.mapConfig.Layers.LayerSewersLine)
- // this.loadLayers(layerConfig.mapConfig.Layers.layerSewersPoint)
+ this.loadLayers(layerConfig.mapConfig.Layers.layerSewersPoint)
}
/**
@@ -116,6 +118,14 @@
})
}
}).bindPopup(function (layer) {
+ that.popupComp.setDatas(layer.feature)
+ that.popupComp.setShow()
+ return that.popupComp.$el
+ }, {
+ className: 's-map-popup',
+ minWidth: 300,
+ closeButton: false,
+ autoClose: false
}).addTo(featureGroup).bringToFront()
return featureGroup
}
diff --git a/src/conf/Constants.js b/src/conf/Constants.js
index 0c173b0..9e89a92 100644
--- a/src/conf/Constants.js
+++ b/src/conf/Constants.js
@@ -3,3 +3,29 @@
LINE: 'line',
POLYGON: 'polygon'
}
+
+export const props = {
+ pipename: '绠＄嚎鍚嶇О',
+ pipecode: '绠＄嚎缂栫爜',
+ subchaname: '鏀嚎鍚嶇О',
+ subchacode: '鏀嚎缂栫爜',
+ mediumtype: '杈撻�佷粙璐�',
+ length: '闀垮害(m)',
+ startposname: '璧风偣浣嶇疆鍚嶇О',
+ endposname: '缁堢偣浣嶇疆鍚嶇О',
+ pressureating: '璁捐鍘嬪姏锛圡Pa锛�',
+ designtranyear: '璁捐杈撻噺锛堜竾绔�/骞达級',
+ earningcapacity: '瀹為檯杈撻噺锛堜竾绔�/骞达級',
+ buriedtime: '鍩嬭鏃堕棿',
+ coatingmaterial: '闃茶厫鐘跺喌',
+ inservicetime: '鎶曚骇鏃堕棿',
+ reportname: '濉姤浜哄鍚�',
+ reportphone: '濉姤浜鸿仈绯绘柟寮�',
+ diameter: '绠″緞(mm)',
+ meterial: '鏉愯川',
+ pressuerating: '绠￠亾鍘嬪姏(Mpa)',
+ embeddingmode: '鍩嬭鏂瑰紡',
+ pipetrenchtype: '绠℃矡绫诲瀷',
+ datecollected: '鎺㈡祴鏃堕棿',
+ operationalstatus: '杩愯鐘舵��'
+}
diff --git a/src/views/MapTemplate.vue b/src/views/MapTemplate.vue
index 34f010c..ab4cb1e 100644
--- a/src/views/MapTemplate.vue
+++ b/src/views/MapTemplate.vue
@@ -77,7 +77,8 @@
this.basemapHelper.initBasemap(this.config, false) // 绗簩涓弬鏁帮紝琛ㄧず鏄惁鍐呯綉搴曞浘
this.serviceLayerHelper = Sgis.initTileLayersHelper(this.map) // 鍒濆鍖栦笟鍔″簳鍥惧姪鎵�
- this.serviceLayerHelper.initServiceLayers(this.config)
+ console.log(this.$refs.popup.$el)
+ this.serviceLayerHelper.initServiceLayers(this.config, this.$refs.popup)
this.vectorLayerHelper = Sgis.initVectorLayersHelper(this.map) // 鍒濆鍖栧姩鎬佽绱犲浘灞傚姪鎵�
this.vectorLayerHelper.initVectorLayers(this.config)
diff --git a/src/views/popup/Popup.vue b/src/views/popup/Popup.vue
index 83e359b..ac5d088 100644
--- a/src/views/popup/Popup.vue
+++ b/src/views/popup/Popup.vue
@@ -1,40 +1,83 @@
<template>
- <div v-if="isShow" class="s-map-popup-panel" >
-
- <div>
- {{ data }}
- </div>
- <div>
- {{ data }}
- </div>
- <br>
- <br>
- <div>
- {{ data }}
- </div>
- <br>
- <br>
-
- <div>
- {{ data }}
- </div>
- <el-button type="primary" @click="onClick">涓昏鎸夐挳</el-button>
+ <div id="popup" v-if="isShow" class="s-map-popup-panel">
+ <el-tabs v-model="tabsValue" type="card" @edit="handleTabsEdit">
+ <el-tab-pane
+ :key="item.name"
+ v-for="(item) in tabs"
+ :label="item.title"
+ :name="item.name"
+ >
+ <el-row v-for="(v,k) in filter" :key="k">
+ <el-col :span="12">{{k}}</el-col>
+ <el-col :span="12">{{v}}</el-col>
+ </el-row>
+ </el-tab-pane>
+ </el-tabs>
</div>
</template>
<script>
// import '@/assets/css/map/map-popup.scss'
+import { props } from '../../conf/Constants'
+
export default {
name: 'Popup',
data () {
return {
-
+ tabsValue: '1',
+ tabs: [{
+ title: '姹￠洦姘�',
+ name: '1'
+ }],
+ tabIndex: 2,
isShow: false,
- data: ''
+ properties: {},
+ props: props
}
},
-
+ computed: {
+ filter () {
+ var obj = {}
+ for (const key in this.properties) {
+ if (this.props[key]) {
+ obj[this.props[key]] = this.properties[key]
+ }
+ }
+ return obj
+ }
+ },
methods: {
+ handleTabsEdit (targetName, action) {
+ if (action === 'add') {
+ const newTabName = ++this.tabIndex + ''
+ this.editableTabs.push({
+ title: 'New Tab',
+ name: newTabName,
+ content: 'New Tab content'
+ })
+ this.editableTabsValue = newTabName
+ }
+ if (action === 'remove') {
+ const tabs = this.editableTabs
+ let activeName = this.editableTabsValue
+ if (activeName === targetName) {
+ tabs.forEach((tab, index) => {
+ if (tab.name === targetName) {
+ const nextTab = tabs[index + 1] || tabs[index - 1]
+ if (nextTab) {
+ activeName = nextTab.name
+ }
+ }
+ })
+ }
+
+ this.editableTabsValue = activeName
+ this.editableTabs = tabs.filter(tab => tab.name !== targetName)
+ }
+ },
+ setDatas (feature) {
+ this.properties = feature.properties
+ },
setShow () {
// this.style.display='auto'
this.data = 'adsfadfsadfsdafsdfsdfdsafsdafsdafa'
@@ -50,4 +93,10 @@
<style lang="less" >
@import '../../assets/css/map/map-popup.less';
+#popup{
+ .el-tabs__content{
+ max-height: 300px;
+ overflow: auto;
+ }
+}
</style>
--
Gitblit v1.8.0