【feature】新增属性面板组件，修改mapPopup组件

SuperMap · Oct 8, 2024 · f8f8e2f · f8f8e2f
1 parent 1c548b3
commit f8f8e2f
Show file tree

Hide file tree

Showing 9 changed files with 226 additions and 74 deletions.
diff --git a/src/common/attribute-panel/AttributePanel.vue b/src/common/attribute-panel/AttributePanel.vue
@@ -0,0 +1,114 @@
+<template>
+  <div class="sm-component-attribute-panel" :style="[getTextColorStyle]">
+    <div v-if="title">{{ title }}</div>
+    <div v-show="showIcon" class="sm-component-attribute-panel__header">
+      <sm-icon
+        :class="['icon', 'left-icon', currentIndex === 0 && 'disabled']"
+        type="caret-left"
+        @click="changeIndex(-1)"
+      />
+      <span class="ellipsis" :title="paginationContent">{{ paginationContent }}</span>
+      <sm-icon
+        type="caret-right"
+        :class="['icon', 'right-icon', currentIndex === total - 1 && 'disabled']"
+        @click="changeIndex(1)"
+      />
+    </div>
+    <div class="sm-component-attribute-panel__content">
+      <slot></slot>
+      <div v-if="$scopedSlots && Object.keys($scopedSlots).length && attributes">
+        <ul>
+          <li v-for="(value, key, index) in attributes" :key="index" class="content">
+            <div class="left ellipsis" :title="key" style="{width: 110}">{{ key }}</div>
+            <div class="right ellipsis" :title="value.value || value" style="{width: 170}">
+              <slot v-if="fieldsMap[key]" :name="fieldsMap[key]" :value="value"></slot>
+              <span v-else>{{ value }}</span>
+            </div>
+          </li>
+        </ul>
+      </div>
+      <sm-table-popup v-if="!$slots.default && !($scopedSlots && Object.keys($scopedSlots).length) && attributes" v-bind="tablePopupProps" class="sm-component-attribute-panel__self-content" />
+      <sm-empty v-if="!$slots.default && !attributes" />
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Prop, Watch, Mixins } from 'vue-property-decorator';
+import Theme from 'vue-iclient/src/common/_mixin/Theme';
+import SmTablePopup from 'vue-iclient/src/common/table-popup/TablePopup.vue';
+import SmEmpty from 'vue-iclient/src/common/empty/Empty.vue';
+
+@Component({
+  name: 'SmAttributePanel',
+  components: { SmTablePopup, SmEmpty }
+})
+class SmAttributePanel extends Mixins(Theme) {
+  currentIndex = 0;
+
+  @Prop({ default: false }) showIcon: Boolean;
+
+  @Prop({ default: 0 }) defaultIndex: number;
+
+  @Prop() paginationText: String;
+
+  @Prop() total: number;
+
+  @Prop() title: String;
+
+  @Prop({
+    default: () => {
+      return [];
+    }
+  })
+  fields: Array<Object>;
+
+  @Prop({
+    default: () => {
+      return {};
+    }
+  })
+  attributes: Object;
+
+  @Prop({
+    default: () => {
+      return [];
+    }
+  })
+  columns: Array<Object>;
+
+  @Watch('defaultIndex')
+  defaultIndexChanged() {
+    this.currentIndex = this.defaultIndex;
+  }
+
+  get fieldsMap() {
+    const attributeMap = {};
+    this.fields.forEach((field) => {
+      // @ts-ignore
+      attributeMap[field.field] = field.slotName;
+    });
+    return attributeMap;
+  }
+
+  get paginationContent() {
+    if (this.paginationText) {
+      return this.paginationText;
+    }
+    return `${this.currentIndex + 1}/${this.total}`;
+  }
+
+  get tablePopupProps() {
+    return { data: [this.attributes], columns: this.columns };
+  }
+
+  changeIndex(val) {
+    this.currentIndex += val;
+    if (this.currentIndex < 0) {
+      this.currentIndex = 0;
+    }
+    this.$emit('change', this.currentIndex);
+  }
+}
+export default SmAttributePanel;
+</script>
diff --git a/src/common/attribute-panel/index.js b/src/common/attribute-panel/index.js
@@ -0,0 +1,9 @@
+import AttributePanel from './AttributePanel';
+import init from 'vue-iclient/src/init';
+
+AttributePanel.install = function(Vue, opts) {
+  init(Vue, opts);
+  Vue.component(AttributePanel.options ? AttributePanel.options.name : AttributePanel.name, AttributePanel);
+};
+
+export default AttributePanel;
diff --git a/src/common/attribute-panel/style/attribute-panel.scss b/src/common/attribute-panel/style/attribute-panel.scss
@@ -0,0 +1,77 @@
+@import '../../../common/_utils/style/mixins/mixins.scss';
+@import '../../../common/_utils/style/theme/theme.scss';
+
+@include b(attribute-panel) {
+  min-width: 200px;
+  height: auto;
+  padding: 10px;
+  border-radius: 4px;
+  @include e(header) {
+    width: 100%;
+    display: inline-flex;
+    align-items: center;
+    padding: 0px 15px 8px ;
+    border-bottom: 1px solid $border-color-split;
+    & .icon {
+      font-size: 16px;
+    }
+    & .left-icon {
+      padding-right: 5px;
+    }
+    & .right-icon {
+      padding-left: 5px;
+    }
+    & .disabled {
+      color: $disabled-color;
+    }
+    & .ellipsis {
+      max-width: calc(100% - 50px);
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+  }
+  @include e(content) {
+    width: 100%;
+    height: auto;
+    padding-top: 5px;
+    div > {
+      ul {
+        list-style: none;
+        margin: 0;
+        padding: 0;
+        overflow: auto;
+        font-size: 14px;
+        max-height: 200px;
+        background: transparent;
+        li {
+          > div {
+            padding: 4px 16px;
+          }
+        }
+        border-collapse: separate;
+        .content {
+          display: table-row;
+          color: white;
+          .left {
+            display: table-cell;
+          }
+          .right {
+            display: table-cell;
+          }
+        }
+        .content .ellipsis {
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+      }
+    }
+
+    @include e(self-content) {
+      & .sm-component-table-thead {
+        display: none;
+      }
+    }
+  }
+}
diff --git a/src/common/attribute-panel/style/index.js b/src/common/attribute-panel/style/index.js
@@ -0,0 +1,4 @@
+import 'vue-iclient/src/common/_assets/iconfont/icon-sm-components.css';
+import 'vue-iclient/src/common/_utils/style/common/common.scss';
+
+import './attribute-panel.scss';
diff --git a/src/mapboxgl/components.ts b/src/mapboxgl/components.ts
@@ -51,6 +51,7 @@ import { default as Transfer } from 'vue-iclient/src/common/transfer/index.js';
 import { default as Tree } from 'vue-iclient/src/common/tree/index.js';
 import { default as TreeSelect } from 'vue-iclient/src/common/tree-select/index.js';
 import { default as VideoPlayer } from 'vue-iclient/src/common/video-player/index.js';
+import { default as AttributePanel } from 'vue-iclient/src/common/attribute-panel/index.js';
 
 /** layer */
 import { default as AnimateMarkerLayer } from 'vue-iclient/src/mapboxgl/web-map/layer/animate-marker/index.js';
@@ -123,6 +124,7 @@ const components = {
   DatePicker,
   Dropdown,
   Empty,
+  AttributePanel,
   Icon,
   Iframe,
   Image,
@@ -253,6 +255,7 @@ export {
   DatePicker,
   Dropdown,
   Empty,
+  AttributePanel,
   Icon,
   Iframe,
   Image,

diff --git a/src/mapboxgl/map-popup/MapPopup.vue b/src/mapboxgl/map-popup/MapPopup.vue
@@ -1,38 +1,31 @@
 <template>
   <div v-show="false" class="sm-component-map-popup" ref="Popup" :style="[tablePopupBgStyle, getTextColorStyle]">
-    <div v-show="showIcon || title" class="sm-component-map-popup__header">
-      <sm-icon
-        v-show="showIcon"
-        :class="['icon', 'left-icon', currentIndex === 0 && 'disabled']"
-        type="caret-left"
-        @click="changeIndex(-1)"
-      />
-      <span class="ellipsis" :title="headerTitle">{{ headerTitle }}</span>
-      <sm-icon
-        v-show="showIcon"
-        type="caret-right"
-        :class="['icon', 'right-icon', currentIndex === lnglats.length - 1 && 'disabled']"
-        @click="changeIndex(1)"
-      />
-    </div>
-    <div class="sm-component-map-popup__content">
-      <slot v-if="contentSlot" :name="contentSlot"></slot>
-      <sm-table-popup v-else v-bind="tablePopupProps" class="sm-component-map-popup__self-content" />
-    </div>
+    <sm-attribute-panel
+      :showIcon="showIcon"
+      :paginationText="title"
+      :total="lnglats.length || data.length"
+      :defaultIndex="defaultIndex"
+      :contentSlot="contentSlot"
+      :data="data"
+      :columns="columns"
+      @change="changeIndex"
+    >
+      <slot></slot>
+    </sm-attribute-panel>
   </div>
 </template>
 
 <script lang="ts">
 import { Component, Prop, Watch, Mixins } from 'vue-property-decorator';
 import Theme from 'vue-iclient/src/common/_mixin/Theme';
-import SmTablePopup from 'vue-iclient/src/common/table-popup/TablePopup.vue';
+import SmAttributePanel from 'vue-iclient/src/common/attribute-panel/AttributePanel.vue';
 import MapGetter from 'vue-iclient/src/mapboxgl/_mixin/map-getter';
 import MapPopupViewModel from './MapPopupViewModel';
 import { setPopupArrowStyle } from 'vue-iclient/src/common/_utils/util';
 
 @Component({
   name: 'SmMapPopup',
-  components: { SmTablePopup },
+  components: { SmAttributePanel },
   loaded() {
     this.viewModel = new MapPopupViewModel(this.map);
   },
@@ -90,17 +83,6 @@ class SmMapPopup extends Mixins(MapGetter, Theme) {
     return this.lnglats[this.currentIndex];
   }
 
-  get tablePopupProps() {
-    return { data: this.data[this.currentIndex], columns: this.columns };
-  }
-
-  get headerTitle() {
-    if (this.title) {
-      return this.title;
-    }
-    return `${this.currentIndex + 1}/${this.lnglats.length}`;
-  }
-
   removePopup() {
     this.viewModel && this.viewModel.removePopup();
   }
@@ -111,12 +93,9 @@ class SmMapPopup extends Mixins(MapGetter, Theme) {
     setPopupArrowStyle(this.tablePopupBgData);
   }
 
-  changeIndex(val) {
-    this.currentIndex += val;
-    if (this.currentIndex < 0) {
-      this.currentIndex = 0;
-    }
-    this.$emit('change', this.currentIndex);
+  changeIndex(index) {
+    this.currentIndex = index;
+    this.$emit('change', index);
   }
 }
 export default SmMapPopup;

diff --git a/src/mapboxgl/map-popup/style/map-popup.scss b/src/mapboxgl/map-popup/style/map-popup.scss
@@ -6,39 +6,4 @@
   height: auto;
   padding: 10px;
   border-radius: 4px;
-  @include e(header) {
-    width: 100%;
-    display: inline-flex;
-    align-items: center;
-    padding: 0px 15px 8px ;
-    border-bottom: 1px solid $border-color-split;
-    & .icon {
-      font-size: 16px;
-    }
-    & .left-icon {
-      padding-right: 5px;
-    }
-    & .right-icon {
-      padding-left: 5px;
-    }
-    & .disabled {
-      color: $disabled-color;
-    }
-    & .ellipsis {
-      max-width: calc(100% - 50px);
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-    }
-  }
-  @include e(content) {
-    width: 100%;
-    height: auto;
-    padding-top: 5px;
-    @include e(self-content) {
-      & .sm-component-table-thead {
-        display: none;
-      }
-    }
-  }
 }
diff --git a/src/mapboxgl/style.scss b/src/mapboxgl/style.scss
@@ -47,6 +47,7 @@
 @import '../common/tree-select/style/tree-select.scss';
 @import '../common/dropdown/style/dropdown.scss';
 @import '../common/slideshow/style/slideshow.scss';
+@import '../common/attribute-panel/style/attribute-panel.scss';
 
 /** control */
 @import './web-map/control/scale/style/scale.scss';

diff --git a/src/mapboxgl/web-map/control/identify/Identify.vue b/src/mapboxgl/web-map/control/identify/Identify.vue
@@ -11,7 +11,7 @@
     :mapTarget="mapTarget"
     @change="handleChange"
   >
-    <div slot="identify" >
+    <div>
       <ul
         :class="[
           autoResize ? 'sm-component-identify__auto' : 'sm-component-identify__custom',