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

package/src/components/PlotManagerSetting/PlotManagerSetting.vue

@@ -0,0 +1,229 @@
+<template>
+  <div class="dialog" style="height: 516px;">
+    <div>
+      <div class="mapgis-ui-svg-manager-file">
+        <mapgis-ui-plot-symbol
+            style="height: 516px;max-height: 516px;"
+            :format="true"
+            :data="widgetConfig.symbolUrl"
+            :baseUrl="baseUrl"
+            @click="clickIcon"
+            @chooseFolder="chooseFolder"
+        ></mapgis-ui-plot-symbol>
+        <div class="mapgis-ui-svg-manager-file-right">
+          <mapgis-ui-row class="mapgis-ui-svg-manager-file-right-row">
+            <input style="display: none" type="file" accept=".svg"/>
+            <mapgis-ui-button @click="importSVG">新增符号</mapgis-ui-button>
+          </mapgis-ui-row>
+          <mapgis-ui-row class="mapgis-ui-svg-manager-file-right-row">
+            <mapgis-ui-button @click="changeSVG">覆盖符号</mapgis-ui-button>
+          </mapgis-ui-row>
+          <mapgis-ui-row class="mapgis-ui-svg-manager-file-right-row">
+            <mapgis-ui-button @click="editSVG">编辑本地符号</mapgis-ui-button>
+          </mapgis-ui-row>
+          <mapgis-ui-row class="mapgis-ui-svg-manager-file-right-row">
+            <mapgis-ui-button @click="deleteSVG">删除符号</mapgis-ui-button>
+          </mapgis-ui-row>
+        </div>
+      </div>
+      <input style="display: none;" type="file" id="testFile"/>
+      <mapgis-ui-svg-setting-panel
+          style="position: absolute;right: 20px;top: 66px;"
+          :url="svgUrl"
+          :svgXML="svgXML"
+          :baseUrl="baseUrl"
+          :name="SVGName"
+      ></mapgis-ui-svg-setting-panel>
+    </div>
+    <mapgis-ui-modal
+        v-model="showModal"
+        :title="title"
+        :width="700"
+        :dialog-style="{ top: '192px' }"
+        okText="确定"
+        cancelText="取消"
+        @ok="handleOk"
+    >
+      <mapgis-ui-input
+          placeholder="请上传缩略图"
+          disabled
+      >
+        <mapgis-ui-upload
+            slot="suffix"
+            :action="imagesUploadApi"
+            :showUploadList="false"
+            :withCredentials="true"
+            @change="imgUploadChange"
+        >
+          <mapgis-ui-button type="link" icon="cloud-upload">
+            上传图片
+          </mapgis-ui-button>
+        </mapgis-ui-upload>
+      </mapgis-ui-input>
+    </mapgis-ui-modal>
+  </div>
+</template>
+
+<script>
+const baseUrl =
+    process.env.VUE_APP_BASE_API === "" ? "" : process.env.VUE_APP_BASE_API + "/";
+import WidgetSettingMixin from '../WidgetSetting/widget-setting-mixin'
+import normalRequest from '../../utils/normal-request'
+
+export default {
+  name: 'PlotManagerSetting',
+  mixins: [WidgetSettingMixin],
+  data() {
+    return {
+      imagesUploadApi: baseUrl + "/api/local-storage" + "?name=",
+      showModal: false,
+      svgUrl: undefined,
+      currentFolderId: undefined,
+      baseUrl: baseUrl,
+      title: "上传SVG",
+      currentIconID: undefined,
+      operationType: "add",
+      svgXML: undefined,
+      SVGName: undefined
+    }
+  },
+  methods: {
+    deleteSVG() {
+      const that = this;
+      normalRequest
+          .delete(this.baseUrl + "/api/local-storage", {
+            data: [this.currentIconID],
+            headers: {
+              'Content-Type': 'application/json'
+            }
+          })
+          .then(function() {
+            const {symbolUrl} = that.widgetConfig;
+            const {symbols} = symbolUrl;
+            for (let i = 0; i < symbols.length; i++) {
+              const {items} = symbols[i];
+              for (let j = 0; j < items.length; j++) {
+                for (let k = 0; k < items[j].items.length; k++) {
+                  if (items[j].items[k].id === that.currentIconID) {
+                    items[j].items.splice(k, 1);
+                    that.$message.success("SVG删除完成!");
+                    break;
+                  }
+                }
+              }
+            }
+          })
+    },
+    editSVG() {
+      const that = this;
+      const ipt = document.getElementById("testFile");
+      ipt.click();
+      ipt.onchange = function () {
+        const File = ipt.files[0];
+        that.SVGName = File.name;
+        that.SVGName = that.SVGName.split(".")[0];
+        const reader = new FileReader();
+        reader.readAsText(File, "UTF-8");
+        reader.onload = function (evt) {
+          const fileString = evt.target.result;
+          that.svgXML = fileString;
+        }
+      }
+    },
+    handleOk() {
+      this.showModal = false;
+    },
+    clickIcon(data) {
+      this.currentIconID = data.icon.id;
+      this.svgUrl = data.icon.src;
+      this.SVGName = data.icon.name;
+    },
+    chooseFolder(id) {
+      this.currentFolderId = id;
+    },
+    imgUploadChange(result) {
+      if (result.file.status === "done") {
+        let name = result.file.name;
+        if(name.indexOf(".") > -1) {
+          name = name.split(".")[0];
+        }
+        const {symbolUrl} = this.widgetConfig;
+        const {symbols} = symbolUrl;
+        for (let i = 0; i < symbols.length; i++) {
+          const {items} = symbols[i];
+          for (let j = 0; j < items.length; j++) {
+            if (this.operationType === "add") {
+              if (items[j].id === this.currentFolderId) {
+                items[j].items.push({
+                  "id": Number(parseInt(Math.random() * 1000000)),
+                  //名称
+                  "name": name,
+                  //类型
+                  "type": "simplepoint",
+                  //相对路径
+                  "path": result.file.response.url.substring(1, result.file.response.url.length)
+                });
+                this.$message.success("SVG上传完成!");
+                break;
+              }
+            } else {
+              for (let k = 0; k < items[j].items.length; k++) {
+                if (items[j].items[k].id === this.currentIconID) {
+                  items[j].items[k].path = result.file.response.url;
+                  this.$message.success("SVG覆盖完成!");
+                  break;
+                }
+              }
+            }
+          }
+        }
+        this.showModal = false;
+      }
+    },
+    importSVG() {
+      if(!this.currentFolderId){
+        this.$message.error("请选择一个上传文件夹!");
+      }else {
+        this.showModal = true;
+        this.operationType = "add";
+      }
+    },
+    changeSVG() {
+      if (this.currentIconID) {
+        this.operationType = "change";
+        this.showModal = true;
+      }
+    }
+  },
+}
+</script>
+
+<style scoped>
+.dialog {
+  margin: 16px 0;
+}
+
+.editable-add-btn {
+  margin-bottom: 8px;
+}
+
+.mapgis-ui-svg-manager-file {
+  position: relative;
+  width: 450px;
+  height: 510px;
+}
+
+.mapgis-ui-svg-manager-file-right {
+  position: absolute;
+  right: 0;
+  top: 0;
+  width: 130px;
+  height: 510px;
+}
+
+.mapgis-ui-svg-manager-file-right-row {
+  height: 50px;
+  text-align: center;
+  line-height: 50px;
+}
+</style>

package/src/components/ThematicMapSetting/BaseConfigSetting.vue

@@ -0,0 +1,76 @@
+<template>
+  <multi-type-form
+    class="main-config"
+    :layout="layout"
+    :labelCol="labelCol"
+    :wrapperCol="wrapperCol"
+    :DataModel="baseConfigModel"
+    :DataSource="widgetConfig.baseConfig"
+  />
+</template>
+
+<script lang="ts">
+import MultiTypeForm from '../CommonComponents/MultiTypeForm/MultiTypeForm'
+
+const baseConfigModel = [
+    {
+      name: 'baseIp',
+      label: '服务IP',
+      paramType: 'STRING', // ENUM、NUMBER、STRING、BOOLEAN
+    },
+    {
+      name: 'basePort',
+      label: '端口',
+      paramType: 'STRING',
+    },
+    {
+      name: 'isOverlay',
+      label: '图层是否叠加',
+      paramType: 'BOOLEAN',
+    },
+    {
+      name: 'isLocation',
+      label: '图层是否定位',
+      paramType: 'BOOLEAN',
+    },
+    {
+      name: 'startZindex',
+      label: '初始 index 级别',
+      paramType: 'NUMBER',
+    },
+  ]
+
+export default {
+  name: 'BaseConfigSetting',
+  components: {
+    MultiTypeForm,
+  },
+  props: {
+    widgetConfig: {
+      type: [Object, Array]
+    }
+  },
+  data() {
+    return {
+      layout: 'horizontal',
+      labelCol: { span: 3 },
+      wrapperCol: { span: 21 },
+      baseConfigModel,
+    }
+  },
+  watch: {
+  },
+  computed: {
+  },
+  methods: {
+    
+  }
+}
+</script>
+
+<style scoped>
+.main-config {
+  height: calc(75vh - 186px);
+  overflow-y: auto;
+}
+</style>

package/src/components/ThematicMapSetting/SubjectConfigSetting.vue

@@ -0,0 +1,346 @@
+<template>
+  <mapgis-ui-row>
+    <mapgis-ui-col :span="8" class="main-config">
+      <mapgis-ui-button class="editable-add-btn" icon="plus" @click="modifySubjectList('add')" size="small">
+        新建专题分类
+      </mapgis-ui-button>
+      <mapgis-ui-tree
+        defaultExpandAll
+        :selectedKeys="selectedKeys"
+        :tree-data="widgetConfig.subjectConfig"
+        :replace-fields="{ key: 'id' }"
+      >
+        <template #title="node">
+          <mapgis-ui-dropdown :trigger="['contextmenu']">
+            <span>
+              <mapgis-ui-iconfont type="mapgis-image" v-if="node.nodeType==='subject'"/>
+              <mapgis-ui-iconfont type="mapgis-unorderedlist" v-else/>
+              {{ node.title }}
+              <mapgis-ui-iconfont title="编辑" type="mapgis-edit-square" class="node-btn" @click="onTreeNodeEditBtnClick($event, node)"/>
+              <mapgis-ui-iconfont title="删除" type="mapgis-shanchu_dianji" class="node-btn" @click="onTreeNodeDeleteBtnClick($event, node)"/>
+            </span>
+            <mapgis-ui-menu slot="overlay" @click="onTreeNodeMenuClick($event, node)">
+              <mapgis-ui-menu-item
+                v-show="node.nodeType==='panel'||node.nodeType==='list'"
+                key='CREATELIST'
+                >新建专题分类</mapgis-ui-menu-item
+              >
+              <mapgis-ui-menu-item
+                v-show="node.nodeType==='panel'||node.nodeType==='list'"
+                key='CREATESUBJECT'
+                >新建专题图</mapgis-ui-menu-item
+              >
+              <mapgis-ui-menu-item
+                key='EDIT'
+                >编辑</mapgis-ui-menu-item
+              >
+              <mapgis-ui-menu-item
+                key='REMOVE'
+                >删除</mapgis-ui-menu-item
+              >
+            </mapgis-ui-menu>
+          </mapgis-ui-dropdown>
+        </template>
+      </mapgis-ui-tree>
+    </mapgis-ui-col>
+    <mapgis-ui-col :span="16">
+      <mapgis-ui-divider type="vertical" class="main-divider"/>
+      <div style="paddingLeft:17px">
+        <thematic-map-subject-list
+          v-if="showSubjectList"
+          :nodeTitle="nodeTitle"
+          :modifyType="modifyType"
+          :subjectClassify="subjectClassify"
+          @changeSubjectListTitle="changeSubjectListTitle"
+          @closeSubjectList="closeSubjectList"
+        />
+        <thematic-map-subject-add
+          v-if="showSubjectAdd"
+          :node="currentThematicMapNode"
+          :subjectClassify="subjectClassify" />
+      </div>
+    </mapgis-ui-col>
+  </mapgis-ui-row>
+</template>
+
+<script lang="ts">
+import ThematicMapSubjectAdd from './ThematicMapSubjectAdd'
+import ThematicMapSubjectList from './ThematicMapSubjectList'
+import { uuid } from '../../utils/uuid'
+import _cloneDeep from 'lodash/cloneDeep'
+
+
+export default {
+  name: 'SubjectConfigSetting',
+  components: {
+    ThematicMapSubjectAdd,
+    ThematicMapSubjectList,
+  },
+  props: {
+    widgetConfig: {
+      type: [Object, Array]
+    }
+  },
+  data() {
+    return {
+      thematicMapTree: [],
+      showSubjectList: false,
+      showSubjectAdd: false,
+      nodeTitle: '',
+      nodeData: {},
+      mode: '',
+      checkedThematicMapNodes: [],
+      currentThematicMapNode: {},
+      modifyType: 'SubjectList',
+      subjectClassify: '',
+      selectedKeys: [],
+    }
+  },
+  computed: {
+    // ...mapGetters(['subjectConfig']),
+    checkedThematicMapKeys() {
+      return this.checkedThematicMapNodes.map(({ id }) => id)
+    },
+  },
+  watch: {
+    // subjectConfig: {
+    //   handler(nV) {
+    //     this.thematicMapTree = _cloneDeep(nV)
+    //   },
+    //   deep: true,
+    //   immediate: true,
+    // },
+  },
+  methods: {
+    // ...mapMutations([
+    //   'updateSubjectConfig',
+    // ]),
+
+    /**
+     * 编辑/添加 专题分类/专题图
+     * @mode 'add'/'edit'
+     * @nodeData 当前节点
+     * @type 'SubjectList'/'ThematicMap'
+     */
+    modifySubjectList(mode, nodeData, type = 'SubjectList') {
+      this.showSubjectAdd = false
+      this.showSubjectList = false
+      this.$nextTick(() => {
+        this.showSubjectList = true
+      })
+
+      this.modifyType = type
+      this.subjectClassify = this.getSubjectClassify(mode, nodeData) // 获取所属类别
+      this.nodeData = nodeData
+      this.mode = mode
+      if (mode === 'add') {
+        this.nodeTitle = ''
+        if (!nodeData) this.selectedKeys = []
+      } else if (mode === 'edit') {
+        this.nodeTitle = nodeData.title
+      }
+    },
+
+    /**
+     * 编辑/添加专题图
+     */
+    modifyThematicMap(nodeData) {
+      this.showSubjectList = false
+      this.showSubjectAdd = false
+      this.$nextTick(() => {
+        this.showSubjectAdd = true
+      })
+
+      this.subjectClassify = this.getSubjectClassify('edit', nodeData)
+      if (nodeData.nodeType === 'subject') {
+        this.currentThematicMapNode = nodeData
+      }
+    },
+
+    onTreeNodeEditBtnClick(evene, { dataRef }) {
+      event.stopPropagation()
+      this.selectedKeys = [dataRef.id]
+      this.onTreeNodeEdit(dataRef)
+    },
+    onTreeNodeDeleteBtnClick(evene, { dataRef }) {
+      event.stopPropagation()
+      this.selectedKeys = [dataRef.id]
+      this.onTreeNodeRemove(dataRef)
+    },
+
+    /**
+     * 节点下拉菜单点击
+     * @param key ThematicMapNodeHandles
+     * @param dataRef 节点数据
+     */
+    onTreeNodeMenuClick({ key }, { dataRef }) {
+      this.selectedKeys = [dataRef.id]
+      switch (key) {
+        case 'CREATELIST':
+          this.modifySubjectList('add', dataRef)
+          break
+        case 'CREATESUBJECT':
+          // this.modifyThematicMap(dataRef)
+          this.modifySubjectList('add', dataRef, 'ThematicMap')
+          break
+        case 'EDIT':
+          this.onTreeNodeEdit(dataRef)
+          break
+        case 'REMOVE':
+          this.onTreeNodeRemove(dataRef)
+          break
+        default:
+          break
+      }
+    },
+
+    /**
+     * todo 编辑节点
+     */
+    onTreeNodeEdit(nodeData) {
+      if (nodeData.nodeType === 'panel' || nodeData.nodeType === 'list') {
+        // 编辑专题分类
+        this.modifySubjectList('edit', nodeData)
+      } else {
+        // 编辑专题图
+        this.modifyThematicMap(nodeData)
+      }
+    },
+
+    /**
+     * 修改专题分类名称
+     */
+    changeSubjectListTitle(title) {
+      if (!title) {
+        this.$message.warn('请输入名称')
+        return
+      }
+      this.closeSubjectList()
+      if (this.mode === 'edit') {
+        this.nodeData.title = title
+        return
+      }
+      if (this.mode === 'add') {
+        if (this.modifyType === 'ThematicMap') {
+          const subject = {
+            id: `subject-${uuid()}`,
+            title: title,
+            visible: true,
+            nodeType: 'subject',
+            type: "SubSectionMap", // 默认分段专题图
+            config: []
+          }
+          this.nodeData.children.push(subject)
+          this.selectedKeys = [subject.id]
+          this.modifyThematicMap(subject)
+        } else {
+          if (this.nodeData) {
+            const list = {
+              id: uuid(),
+              title: title,
+              visible: true,
+              nodeType: 'list',
+              children: []
+            }
+            this.nodeData.children.unshift(list)
+          } else {
+            const panel = {
+              id: uuid(),
+              title: title,
+              visible: true,
+              nodeType: 'panel',
+              children: []
+            }
+            this.widgetConfig.subjectConfig.push(panel)
+          }
+        }
+        
+      }
+      
+    },
+
+    /**
+     * 关闭编辑专题分类界面
+     */
+    closeSubjectList() {
+      this.showSubjectList = false
+    },
+
+    /**
+     * 移除节点
+     */
+    onTreeNodeRemove(nodeData) {
+      this.showSubjectList = false
+      this.showSubjectAdd = false
+
+      const vm = this
+      const recursion = (tree, node) => {
+        for (let i = 0; i < tree.length; i++) {
+          const n = tree[i]
+          if (n.id === node.id) {
+            tree.splice(
+              tree.findIndex(({ id }) => id === node.id),
+              1
+            )
+            i--
+          } else if (n.children && n.children.length) {
+            recursion(n.children, node)
+          }
+        }
+        return tree
+      }
+      this.$confirm({
+        title: "提示",
+        content: "是否删除该节点?",
+        okText: "确认",
+        cancelText: "取消",
+        onOk() {
+          recursion(vm.widgetConfig.subjectConfig, nodeData)
+          
+        },
+      })
+    },
+
+    /**
+     * 获取当前节点所属类别
+     */
+    getSubjectClassify(mode, nodeData) {
+      if (!nodeData) return ''
+      if (mode === 'add') {
+        return nodeData.title
+      } else if (mode === 'edit') {
+        // debugger
+        const recursion = (tree, node, result) => {
+          for (let i = 0; i < tree.length; i++) {
+            const n = tree[i]
+            if (n.id === node.id) {
+              return result
+            } else if (n.children && n.children.length) {
+              const res = recursion(n.children, node, n.title)
+              if (res) {
+                return res
+              }
+            }
+          }
+        }
+        return recursion(this.widgetConfig.subjectConfig, nodeData, '')
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.main-config {
+  height: calc(75vh - 186px);
+  overflow-y: auto;
+}
+.main-divider {
+  height: calc(75vh - 186px);
+  position: absolute;
+}
+.node-btn {
+  margin: 0px 4px;
+  padding-top: 5px;
+}
+</style>

package/src/components/ThematicMapSetting/ThematicMapSetting.vue

@@ -0,0 +1,44 @@
+<template>
+  <div class="dialog">
+    <mapgis-ui-tabs>
+      <mapgis-ui-tab-pane key="1" tab="基础配置">
+        <base-config-setting :widgetConfig="widgetConfig"/>
+      </mapgis-ui-tab-pane>
+      <mapgis-ui-tab-pane key="2" tab="专题配置" force-render>
+        <subject-config-setting :widgetConfig="widgetConfig"/>
+      </mapgis-ui-tab-pane>
+    </mapgis-ui-tabs>
+  </div>
+</template>
+
+<script lang="ts">
+import WidgetSettingMixin from '../WidgetSetting/widget-setting-mixin'
+import BaseConfigSetting from './BaseConfigSetting'
+import SubjectConfigSetting from './SubjectConfigSetting'
+
+export default {
+  name: 'ThematicMapSetting',
+  mixins: [WidgetSettingMixin],
+  components: {
+    BaseConfigSetting,
+    SubjectConfigSetting,
+  },
+  data() {
+    return {
+    }
+  },
+  watch: {
+  },
+  computed: {
+  },
+  methods: {
+    
+  }
+}
+</script>
+
+<style scoped>
+.dialog {
+  margin: 16px 0;
+}
+</style>