@mapgis/mapgis-pan-spatial-map-widgets-config-ui 16.0.0

package/src/components/ThematicMapSetting/ThematicMapSubjectAdd/components/SubjectItems/components/SubjectStyles/Label.vue

@@ -0,0 +1,139 @@
+<template>
+  <!-- 聚合标注专题图 -->
+  <div class="cluster-label">
+    <mapgis-ui-row>
+      <mapgis-ui-col :span="12">
+        <mapgis-ui-row-flex label="最小半径" :label-width="72">
+          <mapgis-ui-input-number v-model="themeStyle.minSize" :min="1" />
+        </mapgis-ui-row-flex>
+      </mapgis-ui-col>
+      <mapgis-ui-col :span="12">
+        <mapgis-ui-row-flex label="最大半径" :label-width="72">
+          <mapgis-ui-input-number v-model="themeStyle.maxSize" :min="1" />
+        </mapgis-ui-row-flex>
+      </mapgis-ui-col>
+    </mapgis-ui-row>
+    <mapgis-ui-row>
+      <mapgis-ui-col :span="12">
+        <mapgis-ui-row-flex
+          :label-width="72"
+          label="聚合点数"
+          title="点数多于此值才会被聚合"
+        >
+          <mapgis-ui-input-number v-model="themeStyle.minPoints" :min="1" />
+        </mapgis-ui-row-flex>
+      </mapgis-ui-col>
+      <mapgis-ui-col :span="12">
+        <mapgis-ui-row-flex label="聚合级别" :label-width="72">
+          <mapgis-ui-input-number v-model="themeStyle.maxClusterZoom" :min="1" />
+        </mapgis-ui-row-flex>
+      </mapgis-ui-col>
+    </mapgis-ui-row>
+    <mapgis-ui-row>
+      <mapgis-ui-col :span="12">
+        <mapgis-ui-row-flex label="像素半径" :label-width="72">
+          <mapgis-ui-input-number v-model="themeStyle.clusterRadius" :min="1" />
+        </mapgis-ui-row-flex>
+      </mapgis-ui-col>
+      <mapgis-ui-col :span="12">
+        <mapgis-ui-row-flex
+          :label-width="72"
+          label="细腻程度"
+          title="细腻程度越高聚合后点越密集"
+        >
+          <mapgis-ui-input-number v-model="themeStyle.extent" :min="1" />
+        </mapgis-ui-row-flex>
+      </mapgis-ui-col>
+    </mapgis-ui-row>
+    <mapgis-ui-row>
+      <mapgis-ui-col :span="12">
+        <mapgis-ui-row-flex :label-width="72" label="透明度">
+          <mapgis-ui-input-number
+            v-model="themeStyle.globalAlpha"
+            :step="0.1"
+            :min="0.1"
+            :max="1"
+          />
+        </mapgis-ui-row-flex>
+      </mapgis-ui-col>
+      <mapgis-ui-col :span="12">
+        <mapgis-ui-row-flex :label-width="72" label="渐变颜色">
+          <color-picker-setting v-model="themeStyle.gradient" />
+        </mapgis-ui-row-flex>
+      </mapgis-ui-col>
+    </mapgis-ui-row>
+  </div>
+</template>
+<script lang="ts">
+import ColorPickerSetting from '../../../../common/ColorPickerSetting.vue'
+
+export default {
+  name: 'Label',
+  components: {
+    ColorPickerSetting
+  },
+  data() {
+    return {
+      defaultThemeStyle: {
+        fillStyle: 'rgba(255, 50, 0, 1.0)',
+        size: 50 / 3 / 2, // 非聚合点的半径
+        minSize: 8, // 聚合点最小半径
+        maxSize: 31, // 聚合点最大半径
+        globalAlpha: 0.8, // 透明度
+        clusterRadius: 150, // 聚合像素半径
+        maxClusterZoom: 18, // 最大聚合的级别
+        maxZoom: 19, // 最大显示级别
+        minPoints: 5, // 最少聚合点数，点数多于此值才会被聚合
+        extent: 400, // 聚合的细腻程度，越高聚合后点越密集
+        label: {
+          // 聚合文本样式
+          show: true, // 是否显示
+          fillStyle: 'white'
+        },
+        gradient: {
+          // 聚合图标渐变色
+          0: '#1876d0',
+          0.5: '#bdbd0d',
+          1.0: 'rgb(255,0,0)'
+        }
+      }
+    }
+  },
+  props: {
+    value: {
+      type: Object,
+    },
+  },
+  watch: {
+  },
+  created() {
+    if (!this.value || !this.value.themeStyle) {
+      this.emitChange(this.defaultThemeStyle)
+    }
+  },
+  computed: {
+    themeStyle: {
+      get: function () {
+        return (this.value && this.value.themeStyle) || this.defaultThemeStyle
+      },
+      set: function (nV) {
+        // this.emitChange(nV)
+      }
+    },
+  },
+  methods: {
+    emitChange(themeStyle) {
+      this.$emit('change', { themeStyle })
+    }
+  }
+}
+
+</script>
+<style lang="less" scoped>
+.cluster-label {
+  padding: 8px;
+  .mapgis-ui-row-flex {
+    margin-bottom: 8px;
+  }
+}
+</style>

package/src/components/ThematicMapSetting/ThematicMapSubjectAdd/components/SubjectItems/components/SubjectStyles/StatisticLabel.vue

@@ -0,0 +1,43 @@
+<template>
+  <!-- 等级符号专题图 -->
+  <mapgis-ui-custom-panel ref="staticLabelForm" :options="options" @formChanged="formChanged"/>
+</template>
+<script lang="ts">
+import SubjectStylesMixin from '../../../../mixins/subject-styles-mixin'
+
+export default {
+  name: 'StatisticLabel',
+  mixins: [SubjectStylesMixin],
+  data() {
+    return {
+    }
+  },
+  mounted() {
+    this.customFormRef = this.$refs.staticLabelForm
+  },
+  computed: {
+    options() {
+      return [
+        {
+          id: this.id,
+          type: 'MapgisUiThemeListSymbol',
+          props: {
+            size: 'small',
+            field: this.field,
+            dataSource: this.dataSource,
+            gradient: this.gradient,
+            radius: this.radius
+          },
+          customProps: {
+            showBorder: false
+          }
+        }
+      ]
+    }
+  },
+  methods: {
+    
+  }
+}
+
+</script>

package/src/components/ThematicMapSetting/ThematicMapSubjectAdd/components/SubjectItems/components/SubjectStyles/SubSectionMap.vue

@@ -0,0 +1,42 @@
+<template>
+  <!-- 分段专题图配置 -->
+  <mapgis-ui-custom-panel ref="rangeForm" :options="options" @formChanged="formChanged"/>
+</template>
+<script lang="ts">
+import SubjectStylesMixin from '../../../../mixins/subject-styles-mixin'
+
+export default {
+  name: 'SubSectionMap',
+  mixins: [SubjectStylesMixin],
+  data() {
+    return {
+    }
+  },
+  mounted() {
+    this.customFormRef = this.$refs.rangeForm
+  },
+  computed: {
+    options() {
+      return [
+        {
+          id: this.id,
+          type: 'MapgisUiThemeList',
+          props: {
+            size: 'small',
+            field: this.field,
+            dataSource: this.dataSource,
+            gradient: this.gradient
+          },
+          customProps: {
+            showBorder: false
+          }
+        }
+      ]
+    }
+  },
+  methods: {
+    
+  }
+}
+
+</script>

package/src/components/ThematicMapSetting/ThematicMapSubjectAdd/components/SubjectItems/components/SubjectStyles/index.vue

@@ -0,0 +1,56 @@
+<template>
+  <component :is="subjectType" v-model="subject" @change="onChange"/>
+</template>
+<script lang="ts">
+import SubSectionMap from './SubSectionMap.vue' // 分段专题图
+import BaseMapWithGraph from './BaseMapWithGraph.vue' // 统计专题图
+import StatisticLabel from './StatisticLabel.vue' // 等级符号专题图
+import Label from './Label.vue' // 聚合标注专题图
+import HeatMap from './HeatMap.vue' // 热力图
+import HexBin from './HexBin.vue' // 蜂窝图
+
+export default {
+  name: 'SubjectStyles',
+  components: {
+    BaseMapWithGraph,
+    HeatMap,
+    HexBin,
+    Label,
+    StatisticLabel,
+    SubSectionMap
+  },
+  data() {
+    return {
+    }
+  },
+  props: {
+    subjectType: {
+      type: String,
+    },
+    subjectConfig: {
+      type: Object,
+      default: () => {}
+    },
+  },
+  watch: {
+  },
+  computed: {
+    subject: {
+      get: function () {
+        return this.subjectConfig
+      },
+      set: function (nV) {
+        this.$emit('change', nV)
+      }
+    },
+  },
+  methods: {
+    onChange(data) {
+      console.warn('尝试发送', data)
+      this.$emit('change', data)
+    }
+  }
+}
+
+</script>
+<style lang="less" scoped></style>

package/src/components/ThematicMapSetting/ThematicMapSubjectAdd/components/SubjectItems/index.less

@@ -0,0 +1,101 @@
+@white: var(--white);
+.subject-items {
+  display: flex;
+  flex-flow: column nowrap;
+  border: 1px solid var(--border-color-base);
+
+  &-time {
+    border: none;
+    &:hover,
+    &:focus {
+      box-shadow: none;
+    }
+  }
+
+  &-head {
+    border-bottom: 1px solid var(--border-color-base);
+    padding: 0 2px 0 8px;
+  }
+
+  &-content {
+    flex: 1;
+    min-height: 260px;
+    max-height: 520px;
+    overflow-y: auto;
+    // .scrollbar(2px);
+  }
+
+  &-empty {
+    padding: 32px 0;
+  }
+
+  &-collapse.mapgis-ui-collapse {
+    border: none;
+    background-color: transparent;
+    .mapgis-ui-collapse-header,
+    .mapgis-ui-collapse-item {
+      border-radius: 0;
+    }
+    .mapgis-ui-collapse-arrow {
+      left: 8px !important;
+    }
+    .mapgis-ui-collapse-item {
+      .mapgis-ui-collapse-header {
+        border-left: 0px !important;
+        color: var(--text-color-secondary);
+        height: 25px;
+        line-height: 25px;
+        padding: 0 4px;
+        padding-left: 22px;
+      }
+      .mapgis-ui-collapse-content {
+        border-radius: 0;
+      }
+      .mapgis-ui-collapse-content-box {
+        max-height: 460px;
+        overflow-y: auto;
+        padding: 8px;
+        // background: #f0f2f5;
+        // .scrollbar(2px);
+      }
+      &.mapgis-ui-collapse-item-active:last-of-type {
+        border-bottom: none;
+      }
+    }
+  }
+  &-card.mapgis-ui-tabs.mapgis-ui-tabs-card {
+    .mapgis-ui-tabs-bar {
+      margin-bottom: 0;
+      // border-color: @white;
+    }
+
+    .mapgis-ui-tabs-content {
+      min-height: 48px;
+      max-height: 208px;
+      overflow: auto;
+      // background: @white;
+      // .scrollbar(2px);
+    }
+
+    .mapgis-ui-tabs-tab {
+      border-color: transparent;
+      background: transparent;
+      &-active {
+        border-color: @white;
+        background: @white;
+      }
+    }
+
+    .mapgis-ui-tabs-nav-container,
+    .mapgis-ui-tabs-tab,
+    .mapgis-ui-tabs-tab-active {
+      height: 30px !important;
+      line-height: 30px !important;
+    }
+
+    .mapgis-ui-tabs-tab,
+    .mapgis-ui-tabs-tab-active {
+      padding: 0 4px !important;
+    }
+  }
+}

package/src/components/ThematicMapSetting/ThematicMapSubjectAdd/components/SubjectItems/index.vue

@@ -0,0 +1,236 @@
+<template>
+  <div class="subject-items">
+    <!-- 设置面板头部 -->
+    <mapgis-ui-toolbar :bordered="false" class="subject-items-head">
+      <mapgis-ui-toolbar-title :has-padding="false">
+        专题图设置
+      </mapgis-ui-toolbar-title>
+      <mapgis-ui-toolbar-command-group>
+        <mapgis-ui-toolbar-command @click="add" title="新增" icon="mapgis-plus" />
+        <template v-if="configList.length">
+          <template v-if="!showCheckbox">
+            <mapgis-ui-toolbar-command @click="edit" title="编辑" icon="mapgis-edit-square" />
+          </template>
+          <template v-else>
+            <mapgis-ui-toolbar-command @click="remove" title="删除" icon="mapgis-delete" />
+            <mapgis-ui-toolbar-command @click="cancel" title="取消" icon="mapgis-close" />
+          </template>
+        </template>
+      </mapgis-ui-toolbar-command-group>
+    </mapgis-ui-toolbar>
+    <!-- 设置面板内容 -->
+    <div class="subject-items-content">
+      <mapgis-ui-empty class="subject-items-empty" v-if="!configList.length" />
+      <mapgis-ui-collapse
+        v-else
+        :defaultActiveKey="activePanel"
+        :accordion="true"
+        class="subject-items-collapse"
+      >
+        <mapgis-ui-collapse-panel v-for="(config, i) in configList" :key="i">
+          <!-- 年度/时间 -->
+          <mapgis-ui-row-flex
+            slot="header"
+            :span="panelHeaderSpan"
+            justify="space-between"
+          >
+            <mapgis-ui-input
+              slot="label"
+              @click.stop
+              @blur="timeBlur(config.time)"
+              v-model="config.time"
+              size="small"
+              placeholder="请输入年度/时间"
+              class="subject-items-time"
+            />
+            <mapgis-ui-checkbox
+              @click.stop
+              @change="checked($event, config, i)"
+              v-show="showCheckbox"
+              :checked="config._checked"
+            />
+          </mapgis-ui-row-flex>
+          <!-- 服务设置等公共设置项 -->
+          <common
+            @change="configChange($event, config)"
+            :subject-config="config"
+          />
+          <!-- 样式、属性表、统计表、弹框配置 -->
+          <mapgis-ui-tabs type="card" size="small" class="subject-items-card">
+            <mapgis-ui-tab-pane
+              v-for="{ key, tab } in configTabList"
+              :key="key"
+              :tab="tab"
+            >
+              <component
+                @change="configChange($event, config)"
+                :subject-config="config"
+                :subject-type="subjectType"
+                :is="key"
+              />
+            </mapgis-ui-tab-pane>
+          </mapgis-ui-tabs>
+        </mapgis-ui-collapse-panel>
+      </mapgis-ui-collapse>
+    </div>
+  </div>
+</template>
+<script lang="ts">
+import Common from './components/Common.vue'
+import SubjectStyles from './components/SubjectStyles'
+import AttributeTable from './components/AttributeTable.vue'
+import StatisticGragh from './components/StatisticGragh.vue'
+import Popup from './components/Popup.vue'
+
+export default {
+  name: 'SubjectItems',
+  components: {
+    Common,
+    SubjectStyles,
+    AttributeTable,
+    StatisticGragh,
+    Popup
+  },
+  props: {
+    subjectType: {
+      type: String
+    },
+    value:{
+      type: Array,
+      default: () => []
+    }
+  },
+  data() {
+    return {
+      activePanel: '0',
+      showCheckbox: false,
+      checkedPanels: [],
+      configTabList: [
+        {
+          key: 'SubjectStyles',
+          tab: '样式配置'
+        },
+        {
+          key: 'AttributeTable',
+          tab: '表格配置'
+        },
+        {
+          key: 'StatisticGragh',
+          tab: '统计图配置'
+        },
+        {
+          key: 'Popup',
+          tab: '弹框配置'
+        }
+      ],
+    }
+  },
+  watch: {
+  },
+  computed: {
+    panelHeaderSpan() {
+      return this.showCheckbox ? [23, 1] : [24, 0]
+    },
+    configList: {
+      get: function () {
+        return this.value
+      },
+      set: function (config) {
+        this.$emit('input', config)
+      }
+    },
+  },
+  methods: {
+    /**
+     * 更新属性
+     */
+    setProperties(source, target) {
+      for (const key in source) {
+        this.$set(target, key, source[key])
+      }
+    },
+
+    /**
+     * 面板change
+     */
+    panelChange(key) {
+      this.activePanel = key
+    },
+
+    /**
+     * 专题配置change
+     */
+    configChange(newConfig, config) {
+      this.setProperties(newConfig, config)
+      console.log('配置数据', { ...config })
+    },
+
+    /**
+     * 专题图年度输入失焦
+     */
+    timeBlur(time) {
+      if (this.configList.filter(c => time && c.time === time).length > 1) {
+        this.$message.warning(
+          `存在相同的年度"${time}"， 若继续保存，将会保存最新配置的年度`
+        )
+      }
+    },
+
+    /**
+     * 新增年度
+     */
+    add() {
+      const node = {
+        time: '',
+        _checked: false
+      }
+      this.configList = this.configList.concat(node)
+      this.showCheckbox = false
+    },
+
+    /**
+     * 编辑
+     */
+    edit() {
+      this.showCheckbox = !this.showCheckbox
+    },
+
+    /**
+     * 移除年度
+     */
+    remove() {
+      if (!this.checkedPanels.length) {
+        this.$message.warning('请选择需要删除的年度')
+        return
+      }
+      this.checkedPanels.forEach(index => this.configList.splice(index, 1))
+    },
+
+    /**
+     * 选中年度
+     */
+    checked(e, config, index) {
+      e.stopPropagation()
+      const { checked } = e.target
+      this.$set(config, '_checked', checked)
+      if (checked) {
+        this.checkedPanels.push(index)
+      } else {
+        this.checkedPanels.splice(index, 1)
+      }
+    },
+
+    /**
+     * 取消选中年度
+     */
+    cancel() {
+      this.showCheckbox = false
+      this.checkedPanels = []
+      this.configList.forEach(v => this.$set(v, '_checked', false))
+    },
+  }
+}
+</script>
+<style lang="less">
+@import './index.less';
+</style>

package/src/components/ThematicMapSetting/ThematicMapSubjectAdd/index.less

@@ -0,0 +1,22 @@
+.thematic-map-subject-add {
+  // width: 500px;
+  height: calc(75vh - 186px);
+  overflow-y: auto;
+  display: flex;
+  flex-flow: column nowrap;
+  .subject-add-content {
+    flex: 1;
+    padding: 12px;
+  }
+  .subject-add-save-btn {
+    border-top: 1px solid var(--border-color-split);
+    padding: 12px 0;
+    text-align: center;
+    button {
+      margin: 0 6px;
+    }
+  }
+  .ant-select {
+    width: 100%;
+  }
+}