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

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

@@ -0,0 +1,226 @@
+<template>
+  <div class="thematic-map-subject-add">
+    <div class="subject-add-content">
+      <!-- 基础配置 -->
+      <base-items
+        v-model="subjectNodeBase"
+        :subjectClassify="subjectClassify"
+        @handleChangeSubjectType="handleChangeSubjectType"
+        @input="changeBaseItems"/>
+      <!-- 主题配置 -->
+      <subject-items
+        v-show="subjectType"
+        v-model="subjectNodeConfig"
+        :subject-type="subjectType"
+        @input="changeSubjectItems"
+      />
+    </div>
+    <!-- 取消\保存按钮 -->
+    <!-- <div class="subject-add-save-btn">
+      <mapgis-ui-button @click="onCancel">取消</mapgis-ui-button>
+      <mapgis-ui-button type="primary" @click="onSave">保存</mapgis-ui-button>
+    </div> -->
+  </div>
+</template>
+<script lang="ts">
+// import { UUID } from '@mapgis/web-app-framework'
+// import _uniqBy from 'lodash/uniqBy'
+// import {
+//   mapGetters,
+//   mapMutations,
+//   ModuleType,
+//   ISubjectType,
+//   INewSubjectConfig,
+//   ISubjectConfigNode
+// } from '../store'
+import BaseItems from './components/BaseItems'
+import SubjectItems from './components/SubjectItems'
+// import dep from './store/dep'
+
+export default {
+  name: 'ThematicMapSubjectAdd',
+  components: {
+    BaseItems,
+    SubjectItems,
+  },
+  data() {
+    return {
+      subjectNodeBase: {},
+      subjectNodeConfig: [],
+    }
+  },
+  props: {
+    node: {
+      type: Object,
+      default: () => {}
+    },
+    subjectClassify: {
+      type: String,
+      default: ''
+    },
+  },
+  watch: {
+    node: {
+      handler({ config, ...others }) {
+        this.subjectNodeBase = others
+        this.subjectNodeConfig = config
+      },
+      deep: true,
+      immediate: true,
+    },
+  },
+  computed: {
+    // ...mapGetters(['isVisible', 'subjectConfig']),
+    // visible: {
+    //   get: function () {
+    //     return this.isVisible(ModuleType.CREATE)
+    //   },
+    //   set: function (nV) {
+    //     if (!nV) {
+    //       this.resetVisible(ModuleType.CREATE)
+    //     }
+    //   }
+    // },
+    // parentTitle () {
+    //   return this.subjectNodeBase.parentTitle
+    // },
+    subjectType () {
+      return this.subjectNodeBase.type
+    }
+  },
+  methods: {
+    /**
+     * 基础配置实时更新
+     */
+    changeBaseItems(item) {
+      this.node.id = item.id
+      this.node.title = item.title
+      this.node.type = item.type
+    },
+    /**
+     * 专题项配置实时更新
+     */
+    changeSubjectItems(config) {
+      this.node.config = config
+    },
+
+    /**
+     * 切换专题图类型的回调
+     */
+    handleChangeSubjectType() {
+      this.node.config.forEach(item => {
+        this.$delete(item, 'themeStyle')
+        this.$delete(item, 'graphType')
+      })
+    },
+    
+    // ...mapMutations(['resetVisible', 'updateSubjectConfig']),
+    
+    // /**
+    //  * 添加节点
+    //  */
+    // addNodeToTreeNode(tree, node) {
+    //   return tree.map(item => {
+    //     if (item.id === node.parentId) {
+    //       if (item.children && item.children.length) {
+    //         const index = item.children.findIndex(({ id }) => id === node.id)
+    //         if (index !== -1) {
+    //           item.children.splice(index, 1, node)
+    //         } else {
+    //           item.children.push(node)
+    //         }
+    //       } else {
+    //         item.children = [node]
+    //       }
+    //     } else if (item.children && item.children.length) {
+    //       this.addNodeToTreeNode(item.children, node)
+    //     }
+    //     return item
+    //   })
+    // },
+
+    // /**
+    //  * 添加根级节点
+    //  */
+    // addNodeToTreeRoot(tree, node) {
+    //   const parentId = `root-${UUID.uuid()}`
+    //   const rootNode = {
+    //     id: parentId,
+    //     title: node.parentTitle,
+    //     nodeType: 'panel',
+    //     visible: true,
+    //     children: [{ ...node, parentId }]
+    //   }
+    //   return [...tree, rootNode]
+    // },
+
+    // /**
+    //  * 创建专题节点
+    //  * 如果没有指定的parentId，则自创建一个分类节点并挂载新建的专题图;
+    //  * 如果指定parentId， 则直接挂载至指定的节点
+    //  */
+    // createSubjectConfigNode(node) {
+    //   let config = this.subjectConfig
+    //   if (!node.parentId) {
+    //     config = this.addNodeToTreeRoot(config, node)
+    //   } else {
+    //     config = this.addNodeToTreeNode(config, node)
+    //   }
+    //   this.updateSubjectConfig(config)
+    //     .then(() => {
+    //       this.$message.success('保存成功')
+    //       this.onCancel()
+    //     })
+    //     .catch(err => {
+    //       this.$message.error('保存失败')
+    //     })
+    // },
+
+    /**
+     * 取消
+     */
+    onCancel() {
+      this.subjectNodeBase = {}
+      this.subjectNodeConfig = []
+    },
+
+    /**
+     * 保存
+     */
+    onSave() {
+      // if (!this.parentTitle) {
+      //   this.$message.warning('请填写或选择专题分类')
+      // } else if (!this.subjectType) {
+      //   this.$message.warning('请选择专题类型')
+      // } else if (!this.subjectNodeConfig.length) {
+      //   this.$message.warning('请填写专题配置')
+      // } else {
+      //   const subjectStyleComps = dep.getSub() // 获取专题图样式配置组件
+      //   let configs = _uniqBy(this.subjectNodeConfig, ({ time }) => time)
+      //   const { type } = this.subjectNodeBase
+      //   if (type === 'SubSectionMap' || type === 'StatisticLabel') {
+      //     // 分段专题图\等级符号专题图
+      //     if (subjectStyleComps.length >= configs.length) {
+      //       configs = configs.map((c, i) => ({
+      //         ...c,
+      //         themeStyle: {
+      //           styleGroups: subjectStyleComps[i].getFormResult().themeStyle[
+      //             subjectStyleComps[i].id
+      //           ] // 获取样式配置结果
+      //         }
+      //       }))
+      //     }
+      //   }
+      //   this.createSubjectConfigNode({
+      //     ...this.subjectNodeBase,
+      //     config: configs
+      //   })
+      // }
+    },
+  },
+}
+
+</script>
+<style lang="less">
+@import './index.less';
+</style>

package/src/components/ThematicMapSetting/ThematicMapSubjectAdd/mixins/subject-styles-mixin.js

@@ -0,0 +1,138 @@
+import { uuid } from '../../../../utils/uuid'
+import dep from '../store/dep'
+// import fieldInstance from '../store/fields'
+const mockData = {
+  type: 'FeatureCollection',
+  dataCount: 2,
+  features: [
+    {
+      type: 'Feature',
+      properties: {
+        fid: 1,
+        AREA: 0,
+      }
+    },
+    {
+      type: 'Feature',
+      properties: {
+        fid: 2,
+        AREA: 1,
+      }
+    },
+  ],
+}
+// 初始化gradient、radius
+const gradient = '#D53E4F,#FB8D59,#FEE08B,#FFFFBF,#E6F598,#99D594,#3288BD'
+const radius = 4
+
+export default {
+  name: 'SubjectStylesMixin',
+  data() {
+    return {
+      id: uuid(),
+      customFormRef: null, // 主组件赋值
+      dataSource: null,
+      gradient,
+      radius
+    }
+  },
+  props: {
+    value:{
+      type: Object,
+    }
+  },
+  watch: {
+    field: {
+      handler(nV) {
+        if (!this.themeStyle || !this.themeStyle.styleGroups || this.themeStyle.styleGroups.length<=0) {
+          this.dataSource = mockData
+          this.$nextTick(()=>{
+            this.formChanged()
+          })
+        }
+        // this.dataSource = mockData // 目前field变化不做任何操作；后期改为发请求获取的话就不需要mockData了
+        // todo：待补充：field变化时，重新发请求获取数值列表
+        // fieldInstance
+        //   .getFieldGeoJson({
+        //     fields: nV,
+        //     ...this.value
+        //   })
+        //   .then(geojson => (this.dataSource = geojson))
+      },
+      // immediate: true
+    },
+    themeStyle: {
+      handler(nV) {
+        if (nV && nV.styleGroups && nV.styleGroups.length > 0) {
+          this.setGradient(nV.styleGroups)
+        }
+      },
+      immediate: true
+    },
+  },
+  mounted() {
+    dep.addSub(this)
+  },
+
+  computed: {
+    field() {
+      return this.value.field
+    },
+    themeStyle() {
+      return this.value.themeStyle
+    },
+    // themeStyle: {
+    //   get: function () {
+    //     return this.value.themeStyle
+    //   },
+    //   set: function (nV) {
+    //     this.$emit('change', {'themeStyle': nV})
+    //   }
+    // },
+  },
+  methods: {
+    /**
+     * 保存时获取配置数据
+     * @param {string} [key='themeStyle'] key 保存的字段名
+     */
+    getFormResult(key = 'themeStyle') {
+      if (this.customFormRef) {
+        const result = {
+          [key]: {
+            'styleGroups': this.customFormRef.$_getForm()[this.id]
+          }
+        }
+
+        return result
+      }
+      return {}
+    },
+
+    /**
+     * 将现有的颜色、区间传给组件
+     * @param {*} styleGroups 
+     */
+    setGradient(styleGroups) {
+      this.gradient = ''
+      this.radius = []
+      this.dataSource = []
+      styleGroups.forEach(item => {
+        this.dataSource.push(item.end)
+        this.gradient = this.gradient + item.style.color + ','
+        this.radius.push(item.style.radius)
+      })
+      this.gradient = this.gradient.slice(0, -1)
+    },
+
+    /**
+     * 改变时的回调
+     */
+    formChanged() {
+      this.$emit('change', this.getFormResult())
+    }
+  },
+  beforeDestroy() {
+    dep.removeSub(this)
+  }
+}
+

package/src/components/ThematicMapSetting/ThematicMapSubjectAdd/store/dep.js

@@ -0,0 +1,21 @@
+class Dep {
+  constructor(subs = []) {
+    this.subs = subs
+  }
+
+  getSub() {
+    return [...this.subs]
+  }
+
+  addSub(sub) {
+    this.subs.push(sub)
+  }
+
+  removeSub(sub) {
+    this.subs.splice(this.subs.indexOf(sub), 1)
+  }
+}
+
+const dep = new Dep()
+
+export default dep

package/src/components/ThematicMapSetting/ThematicMapSubjectAdd/store/fields.ts

@@ -0,0 +1,111 @@
+import { FeatureFormatType, featureQueryFn } from '../../../store'
+
+interface QueryParams {
+  ip: string;
+  port: string;
+  gdbp: string;
+  docName: string;
+  layerName: string;
+  layerIndex: string;
+  fields?: string;
+}
+
+interface FieldInfosItem {
+  type: string;
+  alias: string;
+  value: string;
+}
+
+class Fields {
+  private isFetched = false
+
+  private fields: FieldInfosItem[] = []
+
+  /**
+   * 获取指定属性的GeoJSON数据
+   * @param {object} params 查询参数
+   * @returns GeoJSON | undefined
+   */
+  async getFieldGeoJson({
+    ip,
+    port,
+    gdbp,
+    docName,
+    layerName,
+    layerIndex,
+    fields
+  }: QueryParams) {
+    if (!fields) return
+    const geojson = await featureQueryFn({
+      ip,
+      port,
+      gdbp,
+      docName,
+      layerName,
+      layerIndex,
+      fields
+    })
+    return geojson
+  }
+
+  /**
+   * 获取属性列表数据
+   * @param {object} param0 查询参数
+   * @returns
+   */
+  async getFields(subjectConfig) {
+    if (!this.isFetched) {
+      this.fields = await this.fetchFields(subjectConfig)
+      this.isFetched = true
+    }
+    return this.fields
+  }
+
+  /**
+   * 请求属性列表数据
+   * @param {object} param0 查询参数
+   * @returns
+   */
+  async fetchFields({
+    ip,
+    port,
+    gdbp,
+    docName,
+    layerName,
+    layerIndex
+  }: QueryParams) {
+    const igsJson = await featureQueryFn(
+      {
+        ip,
+        port,
+        gdbp,
+        docName,
+        layerName,
+        layerIndex,
+        IncludeAttribute: false,
+        IncludeGeometry: false,
+        IncludeWebGraphic: false
+      },
+      FeatureFormatType.json
+    )
+    if (igsJson) {
+      const { FldName, FldType, FldAlias } = igsJson.AttStruct
+      return FldName.map((v: string, i: number) => ({
+        type: FldType[i],
+        alias: FldAlias[i] || v,
+        value: v
+      }))
+    }
+    return []
+  }
+
+  /**
+   * 清除缓存
+   */
+  clearFields() {
+    this.isFetched = false
+    this.fields = []
+  }
+}
+
+export default new Fields()

package/src/components/ThematicMapSetting/ThematicMapSubjectList/index.vue

@@ -0,0 +1,76 @@
+<template>
+  <div>
+    <mapgis-ui-form layout="horizontal" labelAlign="left" :labelCol="{span:6}" :wrapperCol="{span:18}">
+      <mapgis-ui-form-item label="所属类别">
+        <mapgis-ui-input
+          :value="subjectClassify || '<根节点>'"
+          disabled
+        />
+      </mapgis-ui-form-item>
+      <mapgis-ui-form-item :label="modifyType==='SubjectList'?'专题类别名称':'专题图名称'">
+        <mapgis-ui-input
+          v-model="title"
+        />
+      </mapgis-ui-form-item>
+    </mapgis-ui-form>
+    <!-- 取消\保存按钮 -->
+    <div class="subject-add-save-btn">
+      <mapgis-ui-button @click="onCancel">取消</mapgis-ui-button>
+      <mapgis-ui-button type="primary" @click="onSave">保存</mapgis-ui-button>
+    </div>
+  </div>
+</template>
+<script lang="ts">
+
+export default {
+  name: 'ThematicMapSubjectList',
+  components: {
+  },
+  data() {
+    return {
+      title: this.nodeTitle
+    }
+  },
+  props: {
+    subjectClassify: {
+      type: String,
+      default: ''
+    },
+    nodeTitle: {
+      type: String,
+      default: ''
+    },
+    modifyType: {
+      type: String,
+      default: 'SubjectList'
+    },
+  },
+  watch: {
+    nodeTitle(next) {
+      this.title = next
+    }
+  },
+  computed: {
+  },
+  methods: {
+    onSave() {
+      this.$emit('changeSubjectListTitle', this.title)
+    },
+    onCancel() {
+      this.$emit('closeSubjectList')
+    }
+  },
+  
+}
+
+</script>
+<style scoped lang="less">
+.subject-add-save-btn {
+  border-top: 1px solid var(--border-color-split);
+  padding: 12px 0;
+  text-align: center;
+  button {
+    margin: 0 6px;
+  }
+}
+</style>

package/src/components/ThematicMapSetting/store/index.js

@@ -0,0 +1,19 @@
+// import thematicMapStore, { mapGetters, mapMutations } from './module'
+
+
+// 专题图类型集合
+const subjectTypeList = [
+  { value: 'SubSectionMap', label: '分段专题图' },
+  { value: 'BaseMapWithGraph', label: '统计专题图' },
+  { value: 'StatisticLabel', label: '等级符号专题图' },
+  { value: 'Label', label: '聚合标注专题图' },
+  { value: 'HeatMap', label: '热力图' },
+  { value: 'HexBin', label: '蜂窝图' }
+]
+
+export {
+  subjectTypeList,
+  // thematicMapStore,
+  // mapGetters,
+  // mapMutations,
+}

package/src/components/ThematicMapSetting/store/module/getters.js

@@ -0,0 +1,28 @@
+import Vue from 'vue'
+
+const getters = {
+  // // 获取某个功能模块的开关状态
+  // isVisible: ({ modules }) => (t) => modules.includes(t),
+  // // 加载
+  // loading: (state) => state.loading,
+  // // 获取要素查询当前页数据
+  // pageGeojson: (state) => state.pageGeojson,
+  // // 获取选中专题对应年度的专题数据
+  // subjectData: (state) => state.subjectData,
+  // // 获取选中的专题
+  // selectedSubject: (state) => state.selectedSubject,
+  // // 获取选中的专题集合
+  // selectedSubjectList: (state) => state.selectedSubjectList,
+  // // 获取时间轴已选中的年度
+  // selectedSubjectTime: (state) => state.selectedSubjectTime,
+  // // 获取选中专题的年度列表
+  // selectedSubjectTimeList: (state) => state.selectedSubjectTimeList,
+  // 基础配置
+  baseConfig: (state) => state.baseConfig,
+  // 专题配置
+  subjectConfig: (state) => state.subjectConfig,
+  // // 图属联动项
+  // linkageFid: (state) => state.linkageFid
+}
+
+export default Vue.observable(getters)

package/src/components/ThematicMapSetting/store/module/index.js

@@ -0,0 +1,53 @@
+import stateMap from './state'
+import gettersMap from './getters'
+import mutationsMap from './mutations'
+
+class Store {
+  constructor({ state, getters, mutations }) {
+    this.state = state
+    this.getters = getters
+    this.mutations = mutations
+  }
+
+  commit = (funName, payload) => {
+    if (funName) {
+      this.mutations[funName](this, payload)
+    } else {
+      return false
+    }
+  }
+
+  // dispatch = (fun, params) => {}
+}
+
+const store = new Store({
+  state: stateMap,
+  getters: gettersMap,
+  mutations: mutationsMap
+})
+
+export const mapGetters = (arr) => {
+  return Object.entries(store.getters).reduce(
+    (obj, [fnName, fn]) => {
+      if (arr.includes(fnName)) {
+        obj[fnName] = () => fn(store.state)
+      }
+      return obj
+    },
+    {}
+  )
+}
+
+export const mapMutations = (arr) => {
+  return Object.entries(store.mutations).reduce(
+    (obj, [fnName, fn]) => {
+      if (arr.includes(fnName)) {
+        obj[fnName] = (payload) => fn(store, payload)
+      }
+      return obj
+    },
+    {}
+  )
+}
+
+export default store