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

package/src/components/LegendSetting/LegendSetting.vue

@@ -0,0 +1,85 @@
+<template>
+  <div class="dialog">
+    <mapgis-ui-form layout="horizontal" :labelCol="{span:2}" :wrapperCol="{span:22}">
+      <mapgis-ui-form-item label="节点名称">
+        <mapgis-ui-input
+          v-model="widgetConfig.name"
+        />
+      </mapgis-ui-form-item>
+      <mapgis-ui-form-item label="图例">
+        <mapgis-ui-input
+          v-model="widgetConfig.path"
+          placeholder="请上传图例"
+          disabled
+        >
+          <mapgis-ui-upload
+            slot="suffix"
+            :action="imagesUploadApi"
+            :showUploadList="false"
+            :withCredentials="true"
+            accept=".bmp, .dib, .pcp, .dif, .wmf, .gif, .jpg, .tif, .eps, .psd, .cdr, .iff, .tga, .pcd, .mpt, .png, .jpeg"
+            @change="imgUploadChange"
+          >
+            <mapgis-ui-button type="link" icon="cloud-upload">
+              <!-- <mapgis-ui-iconfont type="mapgis-tujiatupian"/> -->
+              上传图片
+            </mapgis-ui-button>
+          </mapgis-ui-upload>
+        </mapgis-ui-input>
+        <img
+          class="image"
+          :src="baseApi + widgetConfig.path"
+        />
+      </mapgis-ui-form-item>
+    </mapgis-ui-form>
+  </div>
+</template>
+
+<script>
+const baseUrl =
+  process.env.VUE_APP_BASE_API === '/' ? '' : process.env.VUE_APP_BASE_API
+
+import WidgetSettingMixin from '../WidgetSetting/widget-setting-mixin'
+export default {
+  name: 'LegendSetting',
+  mixins: [WidgetSettingMixin],
+  data() {
+    return {
+      baseApi: baseUrl,
+      imagesUploadApi: baseUrl + '/api/local-storage/pictures',
+    }
+  },
+  methods: {
+    imgUploadChange (result) {
+      if (result.file.status === 'done') {
+        this.widgetConfig.path = result.file.response.url
+        this.$forceUpdate()
+      }
+    },
+    /**
+     * 验证当前widgetConfig是否合法，返回false则不合法，不可保存
+     */
+    checkConfig() {
+      let result = true
+      if (this.widgetConfig.name === '' || this.widgetConfig.path === '') {
+        result = false
+        this.$message.error('表单项不能为空！')
+      }
+      return result
+    }
+  }
+}
+</script>
+
+<style scoped>
+.dialog {
+  margin: 16px 0;
+}
+.image {
+  height: 250px;
+  object-fit: scale-down;
+}
+.mapgis-ui-btn:focus, .mapgis-ui-btn:hover {
+  background-color: #fff0;
+}
+</style>

package/src/components/MapDataVSetting/MapDataVSetting.vue

@@ -0,0 +1,41 @@
+<template>
+  <div class="dialog">
+    <mapgis-ui-form layout="horizontal" :labelCol="{span:2}" :wrapperCol="{span:22}">
+      <mapgis-ui-form-item label="url">
+        <mapgis-ui-input
+          v-model="widgetConfig.url"
+        />
+      </mapgis-ui-form-item>
+    </mapgis-ui-form>
+  </div>
+</template>
+
+<script>
+import WidgetSettingMixin from '../WidgetSetting/widget-setting-mixin'
+export default {
+  name: 'MapDataVSetting',
+  mixins: [WidgetSettingMixin],
+  data() {
+    return {}
+  },
+  methods: {
+    /**
+     * 验证当前widgetConfig是否合法，返回false则不合法，不可保存
+     */
+    checkConfig() {
+      let result = true
+      if (this.widgetConfig.url === '') {
+        result = false
+        this.$message.error('表单项不能为空！')
+      }
+      return result
+    }
+  }
+}
+</script>
+
+<style scoped>
+.dialog {
+  margin: 16px 0;
+}
+</style>

package/src/components/OverlayManagerSetting/OverlayManagerSetting.vue

@@ -0,0 +1,248 @@
+<template>
+  <div class="dialog">
+    <mapgis-ui-button class="button" @click="addCat" :disabled="showDelIcon"
+      >添加分类</mapgis-ui-button
+    >
+    <mapgis-ui-button
+      class="button"
+      :style="{
+        marginLeft: '20px',
+      }"
+      @click="delCat"
+      >{{ showDelIcon ? "删除完成" : "删除分类" }}</mapgis-ui-button
+    >
+    <mapgis-ui-tabs @change="callback" v-model="currentTag">
+      <mapgis-ui-tab-pane v-for="(item, index) in modelConfig" :key="index">
+        <span slot="tab" v-if="showDelIcon">
+          <mapgis-ui-iconfont type="mapgis-delete" class="editable-cell-icon" />
+          {{ index }}
+        </span>
+        <span slot="tab" v-else>
+          {{ index }}
+        </span>
+        <multi-img-with-form
+          ref="multiImgWithForm"
+          :config="item"
+          TitleLabel="name"
+          ImgLabel="img"
+          :baseApi="baseApi"
+          :imgWidth="120"
+          :imgHeight="120"
+          @editItem="editItem"
+          @addItem="addItem"
+      /></mapgis-ui-tab-pane>
+    </mapgis-ui-tabs>
+    <mapgis-ui-modal
+      v-model="showModal"
+      :title="modalTitle"
+      :width="700"
+      :dialog-style="{ top: '192px' }"
+      okText="确定"
+      cancelText="取消"
+      @ok="handleOk"
+    >
+      <mapgis-ui-form
+        layout="horizontal"
+        :labelCol="{ span: 4 }"
+        :wrapperCol="{ span: 20 }"
+      >
+        <mapgis-ui-form-item label="名称">
+          <mapgis-ui-input v-model="item.name" />
+        </mapgis-ui-form-item>
+        <mapgis-ui-form-item label="比例">
+          <mapgis-ui-input v-model="item.scale" />
+        </mapgis-ui-form-item>
+        <mapgis-ui-form-item label="模型">
+          <mapgis-ui-input v-model="item.model">
+            <mapgis-ui-upload
+              slot="suffix"
+              :headers="headers"
+              :before-upload="beforeUpload"
+              :action="fileUploadApi"
+              :showUploadList="false"
+              :withCredentials="true"
+              @change="glfUploadChange"
+            >
+              <mapgis-ui-button type="link" icon="cloud-upload">
+                上传模型
+              </mapgis-ui-button>
+            </mapgis-ui-upload>
+          </mapgis-ui-input>
+        </mapgis-ui-form-item>
+        <mapgis-ui-form-item label="缩略图">
+          <mapgis-ui-input
+            v-model="item.img"
+            placeholder="请上传缩略图"
+            disabled
+          >
+            <mapgis-ui-upload
+              slot="suffix"
+              :action="imagesUploadApi"
+              :showUploadList="false"
+              :withCredentials="true"
+              accept=".bmp, .dib, .pcp, .dif, .wmf, .gif, .jpg, .tif, .eps, .psd, .cdr, .iff, .tga, .pcd, .mpt, .png, .jpeg"
+              @change="imgUploadChange"
+            >
+              <mapgis-ui-button type="link" icon="cloud-upload">
+                <!-- <mapgis-ui-iconfont type="mapgis-tujiatupian"/> -->
+                上传图片
+              </mapgis-ui-button>
+            </mapgis-ui-upload>
+          </mapgis-ui-input>
+          <img
+            v-show="item.image !== ''"
+            class="image"
+            :src="baseApi + item.img"
+          />
+        </mapgis-ui-form-item>
+      </mapgis-ui-form>
+    </mapgis-ui-modal>
+    <mapgis-ui-modal
+      v-model="showAddCatModal"
+      title="添加分类"
+      :width="450"
+      :dialog-style="{ top: '100px' }"
+      okText="确定"
+      cancelText="取消"
+      @ok="handleCatOk"
+    >
+      <mapgis-ui-form
+        layout="horizontal"
+        :labelCol="{ span: 4 }"
+        :wrapperCol="{ span: 20 }"
+      >
+        <mapgis-ui-form-item label="名称">
+          <mapgis-ui-input v-model="addCatName" />
+        </mapgis-ui-form-item>
+      </mapgis-ui-form>
+    </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 MultiImgWithForm from "../CommonComponents/MultiImgWithForm/MultiImgWithForm";
+import reqwest from "reqwest";
+import { getToken } from "@/utils/auth";
+
+export default {
+  name: "OverlayManagerSetting",
+  mixins: [WidgetSettingMixin],
+  props: {},
+  components: { MultiImgWithForm },
+  data() {
+    return {
+      headers: { Authorization: getToken() },
+      baseApi: baseUrl,
+      modelConfig: "",
+      editIndex: -1,
+      modalTitle: "编辑节点",
+      showModal: false,
+      showDelIcon: false,
+      addCatName: "",
+      showAddCatModal: false,
+      fileList: [],
+      currentTag: Object.keys(this.widgetConfig.models)[0],
+      imagesUploadApi: baseUrl + "/api/local-storage/pictures",
+      fileUploadApi: baseUrl + "/api/local-storage",
+      item: {
+        name: "",
+        model: "",
+        scale: "",
+        img: "/upload/fire.png",
+      },
+    };
+  },
+  methods: {
+    handleRemove() {},
+    beforeUpload(file) {
+      this.item.model = file.name;
+      return true;
+    },
+    delCat() {
+      this.showDelIcon = !this.showDelIcon;
+      this.$forceUpdate();
+    },
+    callback(key) {
+      if (this.showDelIcon) {
+        this.currentTag = this.recordTag;
+        delete this.widgetConfig.models[key];
+        this.$forceUpdate();
+      }
+      if (!this.showDelIcon) {
+        this.currentTag = key;
+        this.recordTag = `${key}`;
+      }
+    },
+    getSingleModel() {
+      this.modelConfig = this.widgetConfig.models;
+    },
+    addCat() {
+      this.showAddCatModal = true;
+    },
+    handleCatOk() {
+      const name = this.addCatName;
+      this.$set(this.widgetConfig.models, name, []);
+      this.$forceUpdate();
+      this.showAddCatModal = false;
+    },
+    imgUploadChange(result) {
+      if (result.file.status === "done") {
+        this.item.img = result.file.response.url;
+      }
+    },
+    glfUploadChange(result) {
+      if (result.file.status === "done") {
+        this.item.model = result.file.response.url;
+      }
+    },
+    addItem() {
+      this.showModal = true;
+      this.modalTitle = "添加节点";
+      this.mode = "add";
+      this.item = {
+        name: "",
+        model: "",
+        scale: "",
+        img: "/upload/fire.png",
+      };
+    },
+    editItem(index) {
+      this.showModal = true;
+      this.modalTitle = "编辑节点";
+      this.mode = "edit";
+      this.editIndex = index;
+      this.item = JSON.parse(
+        JSON.stringify(this.modelConfig[this.currentTag][index])
+      );
+    },
+    handleOk() {
+      if (this.mode === "edit") {
+        this.widgetConfig["models"][this.currentTag][this.editIndex] =
+          this.item;
+      } else {
+        this.widgetConfig["models"][this.currentTag].push(this.item);
+      }
+      this.$forceUpdate();
+      this.showModal = false;
+    },
+  },
+  created() {
+    this.getSingleModel();
+  },
+};
+</script>
+<style scoped>
+.dialog {
+  margin: 16px 0;
+}
+.image {
+  height: 250px;
+  object-fit: scale-down;
+}
+.mapgis-ui-btn:focus,
+.mapgis-ui-btn:hover {
+  background-color: #fff0;
+}
+</style>

package/src/components/ParticleEffectsSetting/ParticleEffectsSetting.vue

@@ -0,0 +1,166 @@
+<template>
+  <div class="dialog">
+    <multi-img-with-form
+      ref="multiImgWithForm"
+      :config="widgetConfig.symbolList"
+      TitleLabel="name"
+      :baseApi="baseApi"
+      :imgWidth="120"
+      :imgHeight="120"
+      @editItem="editItem"
+      @addItem="addItem"
+    />
+    <mapgis-ui-modal
+      v-model="showModal"
+      :title="modalTitle"
+      :width="700"
+      :dialog-style="{ top: '192px' }"
+      okText="确定"
+      cancelText="取消"
+      @ok="handleOk"
+    >
+      <mapgis-ui-form
+        layout="horizontal"
+        :labelCol="{ span: 4 }"
+        :wrapperCol="{ span: 20 }"
+      >
+        <mapgis-ui-form-item label="名称">
+          <mapgis-ui-input v-model="item.name" />
+        </mapgis-ui-form-item>
+        <mapgis-ui-form-item label="数据源">
+          <mapgis-ui-input v-model="item.image">
+            <mapgis-ui-upload
+              slot="suffix"
+              :action="imagesUploadApi"
+              :showUploadList="false"
+              :withCredentials="true"
+              accept=".bmp, .dib, .pcp, .dif, .wmf, .gif, .jpg, .tif, .eps, .psd, .cdr, .iff, .tga, .pcd, .mpt, .png, .jpeg"
+              @change="imgUploadChange"
+            >
+              <mapgis-ui-button type="link" icon="cloud-upload">
+                <!-- <mapgis-ui-iconfont type="mapgis-tujiatupian"/> -->
+                上传图片
+              </mapgis-ui-button>
+            </mapgis-ui-upload>
+          </mapgis-ui-input>
+          <img
+            v-show="item.image !== ''"
+            class="image"
+            :src="baseApi + item.image"
+          />
+        </mapgis-ui-form-item>
+        <mapgis-ui-form-item label="图标">
+          <mapgis-ui-input v-model="item.iconUrl"> </mapgis-ui-input>
+          <mapgis-ui-iconfont
+            v-if="item.iconUrl"
+            :type="item.iconUrl"
+            :style="{ width: '80px', fontSize: '80px' }"
+          />
+        </mapgis-ui-form-item>
+        <mapgis-ui-form-item label="基础配置">
+          <!-- <mapgis-ui-input v-model="item.iconUrl"> -->
+
+          <widget-json-config
+            :widget-config="item.config"
+            ref="widgetJsonConfig"
+          ></widget-json-config>
+          <!-- </mapgis-ui-input> -->
+        </mapgis-ui-form-item>
+      </mapgis-ui-form>
+    </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 MultiImgWithForm from "../CommonComponents/MultiImgWithForm/MultiImgWithForm";
+import WidgetJsonConfig from "../WidgetSetting/WidgetJsonConfig";
+
+export default {
+  name: "ParticleEffectsSetting",
+  mixins: [WidgetSettingMixin],
+  components: {
+    MultiImgWithForm,
+    WidgetJsonConfig,
+  },
+  props: {},
+  created() {
+    console.log(this.widgetConfig);
+  },
+  data() {
+    return {
+      baseApi: baseUrl,
+      showModal: false,
+      imagesUploadApi: baseUrl + "/api/local-storage/pictures",
+      editIndex: -1,
+      modalTitle: "编辑节点",
+      item: {
+        name: "",
+        iconUrl: "",
+        image: "/upload/fire.png",
+        config: {},
+      },
+    };
+  },
+  methods: {
+    addItem() {
+      this.showModal = true;
+      this.modalTitle = "添加节点";
+      this.mode = "add";
+      this.item = {
+        name: "",
+        iconUrl: "",
+        image: "/upload/fire.png",
+        config: {},
+      };
+    },
+    editItem(index) {
+      console.log(index);
+      this.showModal = true;
+      this.modalTitle = "编辑节点";
+      this.mode = "edit";
+      this.editIndex = index;
+      console.log(this.widgetConfig.symbolList[index]);
+      this.item = JSON.parse(
+        JSON.stringify(this.widgetConfig.symbolList[index])
+      );
+    },
+    imgUploadChange(result) {
+      if (result.file.status === "done") {
+        this.item.image = result.file.response.url;
+      }
+    },
+    handleOk() {
+      if (this.mode === "edit") {
+        this.widgetConfig.symbolList[this.editIndex] = this.item;
+        let config = this.$refs.widgetJsonConfig.getConfig();
+        if (typeof config === "string") {
+          config = JSON.parse(config);
+        }
+        this.widgetConfig.symbolList[this.editIndex].config = config;
+
+        // this.widgetConfig[this.editIndex] = this.item;
+      } else {
+        this.widgetConfig.symbolList.push(this.item);
+        // this.widgetConfig.push(this.item);
+      }
+      this.showModal = false;
+      //   this.$refs.multiImgWithForm.forceUpdate();
+    },
+  },
+};
+</script>
+<style scoped>
+.dialog {
+  margin: 16px 0;
+}
+.image {
+  height: 100px;
+  object-fit: scale-down;
+}
+.mapgis-ui-btn:focus,
+.mapgis-ui-btn:hover {
+  background-color: #fff0;
+}
+</style>

package/src/components/PlotManagerSetting/EditableCell.vue

@@ -0,0 +1,103 @@
+<template>
+  <div class="editable-cell">
+    <div v-if="editable" class="editable-cell-input-wrapper">
+        <mapgis-ui-input size="small" placeholder="请输入数据源url" :value="value" @change="handleChange" @pressEnter="check" />
+        <mapgis-ui-iconfont
+          type="mapgis-check"
+          class="editable-cell-icon-check"
+          @click="check"
+        />
+    </div>
+    <div v-else class="editable-cell-text-wrapper">
+        {{ value || ' ' }}
+        <mapgis-ui-iconfont type="mapgis-bianji" class="editable-cell-icon" @click="edit" />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'EditableCell',
+  props: {
+    text: String,
+  },
+  data() {
+    return {
+      value: this.text,
+      editable: false,
+    };
+  },
+  watch: {
+    text: {
+      handler(next) {
+        if (next === '') {
+          this.editable = true
+          this.$emit('changeEdit', this.editable)
+        }
+      },
+      immediate: true
+    }
+  },
+  methods: {
+    handleChange(e) {
+      const value = e.target.value
+      this.value = value
+    },
+    check() {
+      if (this.value !== '') {
+        this.editable = false
+        this.$emit('change', this.value)
+        this.$emit('changeEdit', this.editable)
+      } else {
+        this.$message.error('数据源url不能为空！')
+      }
+    },
+    edit() {
+      this.editable = true
+      this.$emit('changeEdit', this.editable)
+    },
+  },
+}
+</script>
+
+<style scoped>
+.editable-cell {
+  position: relative;
+}
+
+.editable-cell-input-wrapper,
+.editable-cell-text-wrapper {
+  padding-right: 24px;
+}
+
+.editable-cell-text-wrapper {
+  padding: 1px 24px 2px 5px;
+}
+
+.editable-cell-icon,
+.editable-cell-icon-check {
+  position: absolute;
+  right: 0;
+  width: 20px;
+  cursor: pointer;
+}
+
+.editable-cell-icon {
+  top: 4px;
+  line-height: 18px;
+  display: none;
+}
+
+.editable-cell-icon-check {
+  line-height: 28px;
+}
+
+.editable-cell:hover .editable-cell-icon {
+  display: inline-block;
+}
+
+.editable-cell-icon:hover,
+.editable-cell-icon-check:hover {
+  color: #108ee9;
+}
+</style>