From a9270536f3bbd8495a9ae9571a8aa4f500b84238 Mon Sep 17 00:00:00 2001 From: qiwei Date: Tue, 12 Nov 2024 14:45:19 +0800 Subject: [PATCH] =?UTF-8?q?fix=20=E4=BC=98=E5=8C=96=E5=B1=9E=E6=80=A7?= =?UTF-8?q?=E9=9D=A2=E6=9D=BF=E7=BB=84=E4=BB=B6=E5=8F=82=E6=95=B0=20review?= =?UTF-8?q?=20by=20luox?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/.vuepress/config.js | 3 +- docs/zh/api/common/attribute-panel.md | 19 ++--- src/common/attribute-panel/AttributePanel.vue | 70 +++++-------------- .../__test__/AttributePanel.spec.js | 14 ++-- .../style/attribute-panel.scss | 22 +----- src/common/image/Image.vue | 2 +- src/common/image/style/image.scss | 2 +- .../layer-highlight/LayerHighlight.vue | 70 ++++++++++++------- .../LayerHighlightViewModel.ts | 10 ++- src/mapboxgl/map-popup/MapPopup.vue | 52 +++++++++++--- .../map-popup/__tests__/MapPopup.spec.js | 16 ++--- src/mapboxgl/map-popup/style/map-popup.scss | 22 +++++- 12 files changed, 153 insertions(+), 149 deletions(-) diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js index b82a7a83..d49ea0c5 100644 --- a/docs/.vuepress/config.js +++ b/docs/.vuepress/config.js @@ -192,7 +192,8 @@ module.exports = { 'common/time-slider', 'common/time-picker', 'common/attributes', - 'common/slideshow' + 'common/slideshow', + 'common/attribute-panel' ] }, { diff --git a/docs/zh/api/common/attribute-panel.md b/docs/zh/api/common/attribute-panel.md index 262f29e0..2a661c22 100644 --- a/docs/zh/api/common/attribute-panel.md +++ b/docs/zh/api/common/attribute-panel.md @@ -4,14 +4,12 @@ @@ -21,13 +19,10 @@ | 参数 | 说明 | 类型 | 可选值 | 默认值 | | :------------- | :------------------------------------------------------------------------------------- | :------ | :----- | :----- | -| showIcon | 显示分页 | boolean | - | false | -| currentIndex | 当前页索引 | number | - | 0 | -| paginationText | 自定义分页文本 | string | - | -| total | 总分页数 | number | - | - | | title | 标题 | string | - | - | -| attributes | 属性数据 | array | - | [] | -| columns | 列配置, 具体属性参考[表格列配置文档](https://1x.antdv.com/components/table-cn/#Column) | array | - | [] | +| attributes | 属性数据,格式为 [{ title: '', value: ''}] | array | - | [] | +| titleRender | 属性数据标题列渲染函数，格式为 Function(text, record, index) {} | function | - | - | +| valueRender | 属性数据值列渲染函数，格式为 Function(text, record, index) {} | function | - | - | | showBorder | 显示边框 | boolean | - | true | > 支持[主题混入参数](/zh/api/mixin/mixin.md#theme) diff --git a/src/common/attribute-panel/AttributePanel.vue b/src/common/attribute-panel/AttributePanel.vue index bad868fb..25ecb6e3 100644 --- a/src/common/attribute-panel/AttributePanel.vue +++ b/src/common/attribute-panel/AttributePanel.vue @@ -1,20 +1,8 @@ diff --git a/src/common/attribute-panel/__test__/AttributePanel.spec.js b/src/common/attribute-panel/__test__/AttributePanel.spec.js index 6ce255bc..cf0a15f0 100644 --- a/src/common/attribute-panel/__test__/AttributePanel.spec.js +++ b/src/common/attribute-panel/__test__/AttributePanel.spec.js @@ -17,16 +17,12 @@ describe('AttributePanel.vue', () => { it('render', async done => { let attr = [ { - "attribute": "video", - "alias": "sdsad", - "attributeValue": "https://www.runoob.com/try/demo_source/mov_bbb.mp4", - "slotName": "cbb14af2926911ef890f1b2f76bec1a4" + "title": "video", + "value": "https://www.runoob.com/try/demo_source/mov_bbb.mp4", }, { - "attribute": "image", - "alias": "sdsad", - "attributeValue": "http://gips2.baidu.com/it/u=195724436,3554684702&fm=3028&app=3028&f=JPEG&fmt=auto?w=1280&h=960", - "slotName": "cbb14af3926911ef890f1b2f76bec1a4" + "title": "image", + "value": "http://gips2.baidu.com/it/u=195724436,3554684702&fm=3028&app=3028&f=JPEG&fmt=auto?w=1280&h=960", } ]; wrapper = mount(SmAttributePanel, { @@ -38,8 +34,6 @@ describe('AttributePanel.vue', () => { }); await wrapper.vm.$nextTick(); expect(wrapper.vm.tablePopupProps.data).toEqual(attr); - wrapper.vm.changeIndex(1); - expect(wrapper.vm.attrIndex).toBe(1); done(); }); }); diff --git a/src/common/attribute-panel/style/attribute-panel.scss b/src/common/attribute-panel/style/attribute-panel.scss index 311eae54..96ec4c18 100644 --- a/src/common/attribute-panel/style/attribute-panel.scss +++ b/src/common/attribute-panel/style/attribute-panel.scss @@ -10,27 +10,7 @@ border: 1px solid $border-color-split; @include e(header) { width: 100%; - display: inline-flex; - align-items: center; - padding: 8px; - border-bottom: 2px solid $border-color-split; - .switchDataText { - position: absolute; - right: 10px; - display: flex; - .icon { - font-size: 16px; - } - .left-icon { - padding-right: 5px; - } - .right-icon { - padding-left: 5px; - } - .disabled { - color: $disabled-color; - } - } + border-bottom: 1px solid $border-color-split; .ellipsis { max-width: calc(100% - 80px); overflow: hidden; diff --git a/src/common/image/Image.vue b/src/common/image/Image.vue index ab1bf82c..fc28bf2c 100644 --- a/src/common/image/Image.vue +++ b/src/common/image/Image.vue @@ -88,7 +88,7 @@ export default { }, computed: { fullScreenStyle() { - return this.previewMode === 'fullScreen' + return this.previewMode === 'full' ? { dialogStyle: { backgroundColor: 'transparent', diff --git a/src/common/image/style/image.scss b/src/common/image/style/image.scss index 7297e081..54f5eda6 100644 --- a/src/common/image/style/image.scss +++ b/src/common/image/style/image.scss @@ -28,7 +28,7 @@ } } - @include e(previewFull) { + @include e(full) { width: 100% !important; padding: 0 !important; .sm-component-modal-content { diff --git a/src/mapboxgl/layer-highlight/LayerHighlight.vue b/src/mapboxgl/layer-highlight/LayerHighlight.vue index ac3cf5a8..fee2053f 100644 --- a/src/mapboxgl/layer-highlight/LayerHighlight.vue +++ b/src/mapboxgl/layer-highlight/LayerHighlight.vue @@ -10,7 +10,8 @@ :background="background" :textColor="textColor" :mapTarget="mapTarget" - :columns="tableColumns" + :titleRender="titleRender" + :valueRender="valueRender" :showHeader="false" :title="displayTitle" @change="handleChange" @@ -99,7 +100,15 @@ export default { return this.allPopupDatas[this.currentIndex] || []; }, columnStyle() { - const { autoResize, keyWidth, valueWidth, keyMaxWidth, valueMaxWidth, keyWordStyle, valueWordStyle } = this.popupStyle; + const { + autoResize, + keyWidth, + valueWidth, + keyMaxWidth, + valueMaxWidth, + keyWordStyle, + valueWordStyle + } = this.popupStyle; const style = { keyStyle: {}, valueStyle: {} }; if (!autoResize) { if (keyWidth) { @@ -129,30 +138,6 @@ export default { } return style; }, - tableColumns() { - return [ - { - dataIndex: 'attribute', - customRender: (text, record) => { - return
{record.alias || text}
; - } - }, - { - dataIndex: 'attributeValue', - customRender: (text, record) => { - const valueCustomRender = - record.slotName && - ((this.customColumnRenders || {})[record.slotName] || - (this.$parent && this.$parent.$scopedSlots[record.slotName])); - const style = this.columnStyle.valueStyle; - if (valueCustomRender) { - return
{valueCustomRender({ value: text, style })}
; - } - return
{text}
; - } - } - ]; - }, displayTitle() { return this.title || this.activeTargetName; } @@ -198,6 +183,39 @@ export default { this.clearPopupData(); }, methods: { + titleRender(text) { + return ( +
+ {text} +
+ ); + }, + valueRender(text, record) { + let targetField; + Object.keys(this.displayFieldsMap).forEach((layerID) => { + targetField = this.displayFieldsMap[layerID].find((item) => { + return item.title === record.title || item.field === record.title; + }); + }); + const slotName = targetField?.slotName; + const valueCustomRender = + slotName && + ((this.customColumnRenders || {})[slotName] || + (this.$parent && this.$parent.$scopedSlots[slotName])); + const style = this.columnStyle.valueStyle; + if (valueCustomRender) { + return ( +
+ {valueCustomRender({ value: text, style })} +
+ ); + } + return ( +
+ {text} +
+ ); + }, registerEvents() { this.viewModel.on('mapselectionchanged', e => { const features = e.features; diff --git a/src/mapboxgl/layer-highlight/LayerHighlightViewModel.ts b/src/mapboxgl/layer-highlight/LayerHighlightViewModel.ts index 605e0337..f94db0ff 100644 --- a/src/mapboxgl/layer-highlight/LayerHighlightViewModel.ts +++ b/src/mapboxgl/layer-highlight/LayerHighlightViewModel.ts @@ -50,9 +50,8 @@ type LayerClickedFeature = mapboxglTypes.MapboxGeoJSONFeature & { }; interface PopupFieldsInfo { - attribute: string; - attributeValue: string; - alias?: string; + title: string; + value: string; slotName?: string; } @@ -356,9 +355,8 @@ export default class HighlightLayer extends mapboxgl.Evented { info: displayFieldsList.reduce((list: PopupFieldsInfo[], item) => { if (Object.prototype.hasOwnProperty.call(feature.properties, item.field)) { list.push({ - attribute: item.field, - alias: item.title, - attributeValue: feature.properties[item.field], + title: item.title || item.field, + value: feature.properties[item.field], slotName: item.slotName }); } diff --git a/src/mapboxgl/map-popup/MapPopup.vue b/src/mapboxgl/map-popup/MapPopup.vue index d67b768a..1f4ad14c 100644 --- a/src/mapboxgl/map-popup/MapPopup.vue +++ b/src/mapboxgl/map-popup/MapPopup.vue @@ -1,17 +1,30 @@ @@ -23,6 +36,7 @@ import SmAttributePanel from 'vue-iclient/src/common/attribute-panel/AttributePa import MapGetter from 'vue-iclient/src/mapboxgl/_mixin/map-getter'; import MapPopupViewModel from './MapPopupViewModel'; import { setPopupArrowStyle } from 'vue-iclient/src/common/_utils/util'; +import cloneDeep from 'lodash/cloneDeep'; @Component({ name: 'SmMapPopup', @@ -65,6 +79,10 @@ class SmMapPopup extends Mixins(MapGetter, Theme) { }) columns: Array; + @Prop() titleRender: Function; + + @Prop() valueRender: Function; + @Prop({ default: true }) showHeader: Boolean; @Watch('currentCoordinate') @@ -93,6 +111,19 @@ class SmMapPopup extends Mixins(MapGetter, Theme) { return this.lnglats[this.currentIndex]; } + get filterData() { + return cloneDeep(this.data).map(propertyList => { + return propertyList.map(item => { + delete item.slotName; + return item; + }); + }); + } + + get paginationContent() { + return `${this.currentIndex + 1}/${this.lnglats.length || this.data.length}`; + } + removePopup() { this.viewModel && this.viewModel.removePopup(); } @@ -103,9 +134,12 @@ class SmMapPopup extends Mixins(MapGetter, Theme) { setPopupArrowStyle(this.tablePopupBgData); } - changeIndex(index) { - this.currentIndex = index; - this.$emit('change', index); + changeIndex(delta) { + this.currentIndex += delta; + if (this.currentIndex < 0) { + this.currentIndex = 0; + } + this.$emit('change', this.currentIndex); } } export default SmMapPopup; diff --git a/src/mapboxgl/map-popup/__tests__/MapPopup.spec.js b/src/mapboxgl/map-popup/__tests__/MapPopup.spec.js index 001303bd..65a69930 100644 --- a/src/mapboxgl/map-popup/__tests__/MapPopup.spec.js +++ b/src/mapboxgl/map-popup/__tests__/MapPopup.spec.js @@ -4,19 +4,19 @@ import SmWebMap from '../../web-map/WebMap'; import SmTablePopup from '../../../common/table-popup/TablePopup'; const columns = [ - { dataIndex: 'attribute', width: 80 }, - { dataIndex: 'attributeValue', width: 150 } + { dataIndex: 'title', width: 80 }, + { dataIndex: 'value', width: 150 } ]; const data = [ [ - { attribute: 'name', attributeValue: '福建省' }, - { attribute: 'childrenNum', attributeValue: 9 }, - { attribute: 'index', attributeValue: 25 } + { title: 'name', value: '福建省' }, + { title: 'childrenNum', value: 9 }, + { title: 'index', value: 25 } ], [ - { attribute: 'name', attributeValue: '福建省' }, - { attribute: 'childrenNum', attributeValue: 12 }, - { attribute: 'index', attributeValue: 123 } + { title: 'name', value: '福建省' }, + { title: 'childrenNum', value: 12 }, + { title: 'index', value: 123 } ] ]; describe('MapPopup.vue', () => { diff --git a/src/mapboxgl/map-popup/style/map-popup.scss b/src/mapboxgl/map-popup/style/map-popup.scss index 40455fc7..06cbda60 100644 --- a/src/mapboxgl/map-popup/style/map-popup.scss +++ b/src/mapboxgl/map-popup/style/map-popup.scss @@ -7,4 +7,24 @@ height: auto; padding: 10px; border-radius: 4px; -} \ No newline at end of file + .title { + margin: 8px 14px; + } + .switchDataText { + position: absolute; + right: 10px; + top: 18px; + .icon { + font-size: 16px; + } + .left-icon { + padding-right: 5px; + } + .right-icon { + padding-left: 5px; + } + .disabled { + color: $disabled-color; + } + } +}