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

package/src/components/DataCatalogSetting/components/component/DataSourceSetting.vue

@@ -0,0 +1,929 @@
+<template>
+  <div class="data-source-setting-wrapper">
+    <div
+      style="height: unset; margin-bottom: 25px; margin-left: 15px"
+      class="setting-header"
+    >
+      <mapgis-ui-dropdown>
+        <mapgis-ui-button type="primary" class="setting-item">
+          添加父节点<i class="el-icon-arrow-down el-icon--right" />
+        </mapgis-ui-button>
+        <mapgis-ui-menu slot="overlay" trigger="hover">
+          <mapgis-ui-menu-item @click.native="addNode('normal')">
+            普通节点
+          </mapgis-ui-menu-item>
+          <mapgis-ui-menu-item @click.native="addNode('server')">
+            二维节点
+          </mapgis-ui-menu-item>
+          <mapgis-ui-menu-item @click.native="addNode('globe')">
+            三维节点
+          </mapgis-ui-menu-item>
+          <mapgis-ui-menu-item @click.native="addNode('data')">
+            非空间数据节点
+          </mapgis-ui-menu-item>
+        </mapgis-ui-menu>
+      </mapgis-ui-dropdown>
+      <label
+        :for="randomInputId"
+        style="display: inline-block; cursor: pointer"
+      >
+        <mapgis-ui-button
+          type="vertical-align-bottom"
+          icon="vertical-align-bottom"
+          class="import-cover setting-item"
+        >
+          导入
+        </mapgis-ui-button>
+      </label>
+      <input
+        :id="randomInputId"
+        type="file"
+        @change="importData($event)"
+        accept="application/json"
+        style="visibility: hidden; width: 0"
+      />
+      <mapgis-ui-popconfirm
+        title="确定清空节点吗？"
+        @confirm="clearData"
+        placement="bottom"
+        ok-text="确认"
+        cancel-text="取消"
+      >
+        <mapgis-ui-button
+          :disabled="isDataEmpty"
+          type="danger"
+          icon="delete"
+          class="icon-danger setting-item"
+        >
+          清空
+        </mapgis-ui-button>
+      </mapgis-ui-popconfirm>
+      <mapgis-ui-button
+        type="vertical-align-top"
+        icon="vertical-align-top"
+        @click="exportData"
+        class="icon-warning setting-item"
+      >
+        导出
+      </mapgis-ui-button>
+    </div>
+    <div class="setting-content" style="margin-left: 15px">
+      <mapgis-ui-input-search
+        v-model="searchStr"
+        placeholder="输入搜索项"
+        style="width: 200px; margin-bottom: 7px"
+        @change="onSearch"
+      ></mapgis-ui-input-search>
+      <mapgis-ui-tree
+        ref="treeData"
+        :tree-data="config.treeConfig.treeData"
+        :replace-fields="{ key: 'label', title: 'label', children: 'children' }"
+        show-icon
+        draggable
+        :expandedKeys="expandedKeys"
+        autoExpandParent
+        @expand="onExpand"
+        @select="onSelect"
+        @rightClick="onRightClick"
+        @drop="onDrop"
+      >
+        <template v-slot:title="nodeData">
+          <span>
+            <img :src="computedIcon(nodeData)" class="tree-data-icon" />
+            <span>{{ nodeData.label }}</span>
+          </span>
+          <mapgis-ui-button-group style="float: right">
+            <mapgis-ui-button
+              type="text"
+              size="small"
+              title="编辑"
+              @click="editNode(nodeData.dataRef, nodeData)"
+              ><i class="el-icon-edit-outline"
+            /></mapgis-ui-button>
+            <mapgis-ui-button
+              type="text"
+              size="small"
+              title="删除"
+              @click.stop="deleteNode(nodeData)"
+              ><i class="el-icon-delete"
+            /></mapgis-ui-button>
+          </mapgis-ui-button-group>
+        </template>
+      </mapgis-ui-tree>
+      <v-contextmenu ref="contextmenu">
+        <v-contextmenu-item @click="addNode('normal', rightClickNode)"
+          >添加普通节点</v-contextmenu-item
+        >
+        <v-contextmenu-item @click="addNode('server', rightClickNode)"
+          >添加二维节点</v-contextmenu-item
+        >
+        <v-contextmenu-item @click="addNode('globe', rightClickNode)"
+          >添加三维节点</v-contextmenu-item
+        >
+        <v-contextmenu-item @click="addNode('data', rightClickNode)"
+          >添加非空间数据节点</v-contextmenu-item
+        >
+      </v-contextmenu>
+    </div>
+    <mapgis-ui-modal
+      :visible.sync="nodeInfoVisible"
+      width="500px"
+      append-to-body
+      :close-on-click-modal="false"
+      :close-on-press-escape="false"
+      @cancel="cancleModal"
+    >
+      <div slot="title" class="header-title">
+        <span class="title-name">
+          <!-- <mapgis-ui-tooltip effect="dark" placement="right">
+            <div slot="content" style="max-width: 450px">
+              SceneServer服务请直接输入服务地址，G3D服务既可以通过ip、port、服务
+              名配置，也可以直接输入服务地址！
+            </div>
+            <i
+              class="el-icon-warning"
+              style="color: #e6a23c; margin-right: 10px"
+            ></i>
+          </mapgis-ui-tooltip> -->
+          <mapgis-ui-tooltip
+            placement="topLeft"
+            :overlayStyle="{ maxWidth: '450px' }"
+            class="tooltip-inner"
+          >
+            <template slot="title">
+              <div style="max-width: 450px">
+                SceneServer服务请直接输入服务地址，G3D服务既可以通过ip、port、服务
+                名配置，也可以直接输入服务地址！
+              </div>
+            </template>
+            <mapgis-ui-iconfont
+              v-if="nodeInfoTitle === '添加节点'"
+              type="mapgis-info-circle"
+              :style="{ color: '#d89614' }"
+            ></mapgis-ui-iconfont>
+            {{ nodeInfoTitle === "添加节点" ? nodeInfoTitle : "" }}
+          </mapgis-ui-tooltip>
+        </span>
+
+        <span class="title-age" v-if="nodeInfoTitle !== '添加节点'"
+          >修改节点</span
+        >
+      </div>
+      <node-data-setting
+        @change-node-data="changeNodeData"
+        :base-config="baseConfig"
+        :node-data="newData"
+        :server-types="serverTypes"
+        :add-node-type="addNodeType"
+        :right-click-node="rightClickNode"
+        :right-click-data="rightClickData"
+        :current-edit-node="currentEditNode"
+      />
+      <span slot="footer">
+        <mapgis-ui-button type="primary" @click="addNodeCallBack"
+          >确 定</mapgis-ui-button
+        >
+      </span>
+    </mapgis-ui-modal>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from "vuex";
+import NodeDataSetting from "./NodeDataSetting";
+import { uuid } from "@/utils/uuid";
+
+export default {
+  components: { NodeDataSetting },
+  props: {
+    config: {
+      type: [Object, Array],
+    },
+    baseConfig: {
+      type: Object,
+    },
+  },
+  data() {
+    if (!this.config.treeConfig.treeData) {
+      this.$set(this.config.treeConfig, "treeData", []);
+    }
+
+    return {
+      searchStr: "",
+      randomInputId: +new Date(),
+      defaultProps: {
+        key: "label",
+        label: "label",
+        children: "children",
+      },
+      addEditNode: {},
+      treeMenuVisible: false,
+      nodeInfoVisible: false,
+      addNodeType: "normal",
+      rightClickNode: {},
+      rightClickData: {},
+      currentEditNode: {},
+      newData: {},
+      addParent: true,
+      nodeType: "",
+      nodeInfoTitle: "",
+      deleteDialog: false,
+      expandedKeys: [],
+      autoExpandParent: true,
+      defaultExpandAll: true,
+      backupsExpandedKeys: [],
+      serverTypes: [
+        {
+          name: "MapGIS 矢量地图服务",
+          value: "IGSIMAGE",
+          type: "server",
+        },
+        {
+          name: "MapGIS瓦片地图服务",
+          value: "IGSTILED",
+          type: "server",
+        },
+        {
+          name: "MapGIS 图层地图服务",
+          value: "IGSVECTOR",
+          type: "server",
+        },
+        {
+          name: "MapGIS 矢量瓦片服务",
+          value: "VTTILES",
+          type: "server",
+        },
+        {
+          name: "IGSPanoramic 服务",
+          value: "IGSPanoramic",
+          type: "server",
+        },
+        {
+          name: "Plot 标绘服务",
+          value: "Plot",
+          type: "server",
+        },
+        {
+          name: "MapGIS 场景服务",
+          value: "IGSScene",
+          type: "globe",
+        },
+        {
+          name: "MapGIS 数据流服务",
+          value: "DataFlow",
+          type: "server",
+        },
+        {
+          name: "3DTiles服务",
+          value: "TILE3D",
+          type: "globe",
+        },
+        {
+          name: "MapGIS M3D模型缓存服务",
+          value: "ModelCache",
+          type: "globe",
+        },
+        {
+          name: "STK地形",
+          value: "STKTerrain",
+          type: "globe",
+        },
+        // {
+        //   name: 'GEOJSON',
+        //   value: 'GEOJSON',
+        //   type: 'globe'
+        // },
+        {
+          name: "KML",
+          value: "KML",
+          type: "globe",
+        },
+        {
+          name: "KMZ",
+          value: "KMZ",
+          type: "globe",
+        },
+        {
+          name: "CZML",
+          value: "CZML",
+          type: "globe",
+        },
+        {
+          name: "ArcGIS 地图服务",
+          value: "IMAGEARCGIS",
+          type: "server",
+        },
+        {
+          name: "ArcGIS 瓦片服务",
+          value: "TILEARCGIS",
+          type: "server",
+        },
+        {
+          name: "OGC WMS 服务",
+          value: "WMS",
+          type: "server",
+        },
+        // {
+        //   name: 'OGC WFS 服务',
+        //   value: 'WFS',
+        //   type: 'server'
+        // },
+        {
+          name: "OGC WMTS 服务",
+          value: "WMTS",
+          type: "server",
+        },
+      ],
+      preEditData: undefined,
+    };
+  },
+  computed: {
+    ...mapGetters(["baseApi"]),
+    isDataEmpty() {
+      return (
+        !this.config.treeConfig.treeData ||
+        this.config.treeConfig.treeData.length === 0
+      );
+    },
+  },
+  created() {},
+
+  methods: {
+    cancleModal() {
+      this.nodeInfoVisible = false;
+    },
+    // 计算图标
+    computedIcon(nodeData) {
+      let iconUrl;
+      const iconLength = nodeData.pos.split("-").length - 1;
+      iconUrl = this.baseApi + this.config.iconConfig[iconLength];
+
+      return iconUrl;
+    },
+    // 解决受控参数变化后展开失效
+    onExpand(expandedKeys) {
+      this.expandedKeys = expandedKeys;
+      this.autoExpandParent = false;
+    },
+    // 点击搜索进行模糊筛选
+    onSearch() {
+      const _this = this;
+      _this.searchValue = _this.searchStr;
+      if (_this.searchValue === "") {
+        _this.expandedKeys = [];
+      } else {
+        _this.expandedKeys = [];
+        _this.backupsExpandedKeys = [];
+        let candidateKeysList = _this.getkeyList(
+          _this.searchValue,
+          _this.config.treeConfig.treeData,
+          []
+        );
+        candidateKeysList.map((item) => {
+          let key = _this.getParentKey(item, _this.config.treeConfig.treeData);
+          if (key && !_this.backupsExpandedKeys.some((item) => item === key)) {
+            _this.backupsExpandedKeys.push(key);
+          }
+        });
+        let length = _this.backupsExpandedKeys.length;
+        for (let i = 0; i < length; i++) {
+          _this.getAllParentKey(
+            _this.backupsExpandedKeys[i],
+            _this.config.treeConfig.treeData
+          );
+        }
+        if (_this.backupsExpandedKeys.slice.length > 0) {
+          _this.expandedKeys = _this.backupsExpandedKeys.slice();
+        } else {
+          _this.expandedKeys = [];
+        }
+        _this.autoExpandParent = true;
+      }
+    },
+    // 获取节点中含有value的所有key集合
+    getkeyList(value, tree, keyList) {
+      for (let i = 0; i < tree.length; i++) {
+        let node = tree[i];
+        node.scopedSlots = { title: "label" };
+        if (node.label.indexOf(value) > -1) {
+          keyList.push(node.label);
+        }
+        if (node.children) {
+          this.getkeyList(value, node.children, keyList);
+        }
+      }
+      return keyList;
+    },
+
+    // 该递归主要用于获取key的父亲节点的key值
+    getParentKey(key, tree) {
+      let parentKey;
+      for (let i = 0; i < tree.length; i++) {
+        const node = tree[i];
+        if (node.children) {
+          if (node.children.some((item) => item.label === key)) {
+            parentKey = node.label;
+          } else if (this.getParentKey(key, node.children)) {
+            parentKey = this.getParentKey(key, node.children);
+          }
+        }
+      }
+      return parentKey;
+    },
+    // 获取该节点的所有祖先节点
+    getAllParentKey(key, tree) {
+      let parentKey;
+      if (key) {
+        parentKey = this.getParentKey(key, tree);
+        if (parentKey) {
+          if (!this.backupsExpandedKeys.some((item) => item === parentKey)) {
+            this.backupsExpandedKeys.push(parentKey);
+          }
+          this.getAllParentKey(parentKey, tree);
+        }
+      }
+    },
+    // 拖拽
+    onDrop(info) {
+      const dropKey = info.node.eventKey;
+      const dragLabel = info.dragNode.dataRef.label;
+      const dragKey = info.dragNode.eventKey;
+      const dropLabel = info.node.dataRef.label;
+      const dropPos = info.node.pos.split("-");
+      const dropPosition =
+        info.dropPosition - Number(dropPos[dropPos.length - 1]);
+      const loop = (data, key, callback) => {
+        data.forEach((item, index, arr) => {
+          if (item.label === key) {
+            return callback(item, index, arr);
+          }
+          if (item.children) {
+            return loop(item.children, key, callback);
+          }
+        });
+      };
+      const data = [...this.config.treeConfig.treeData];
+
+      // Find dragObject
+      let dragObj;
+      loop(data, dragLabel, (item, index, arr) => {
+        arr.splice(index, 1);
+        dragObj = item;
+      });
+      if (!info.dropToGap) {
+        // Drop on the content
+        loop(data, dropLabel, (item) => {
+          item.children = item.children || [];
+          // where to insert 示例添加到尾部，可以是随意位置
+          item.children.push(dragObj);
+        });
+      } else if (
+        (info.node.children || []).length > 0 && // Has children
+        info.node.expanded && // Is expanded
+        dropPosition === 1 // On the bottom gap
+      ) {
+        loop(data, dropLabel, (item) => {
+          item.children = item.children || [];
+          // where to insert 示例添加到尾部，可以是随意位置
+          item.children.unshift(dragObj);
+        });
+      } else {
+        let ar;
+        let i;
+        loop(data, dropLabel, (item, index, arr) => {
+          ar = arr;
+          i = index;
+        });
+        if (dropPosition === -1) {
+          ar.splice(i, 0, dragObj);
+        } else {
+          ar.splice(i + 1, 0, dragObj);
+        }
+      }
+      this.config.treeConfig.treeData = data;
+    },
+    //   右键点击显示菜单
+    onRightClick({ event, node }) {
+      this.addEditNode = node;
+      const answer = node._props.dataRef.anwer;
+      if (answer) {
+        this.$refs.contextmenu.hide();
+        this.answer = answer;
+        return;
+      }
+      this.NodeTreeItem = {
+        id: node._props.eventKey,
+        title: node._props.title,
+        parentId: node._props.dataRef.parentId || null,
+      };
+      const x = event.clientX;
+      const y = event.clientY;
+      const postition = {
+        top: y,
+        left: x,
+      };
+      this.$refs.contextmenu.show(postition);
+    },
+    // 拖拽事件 参数依次为：被拖拽节点对应的 Node、结束拖拽时最后进入的节点、被拖拽节点的放置位置（before、after、inner）、event
+    async handleDrop(draggingNode, dropNode, dropType, ev) {
+      var paramData = [];
+      // 当拖拽类型不为inner,说明只是同级或者跨级排序，只需要寻找目标节点的父ID，获取其对象以及所有的子节点，并为子节点设置当前对象的ID为父ID即可
+      // 当拖拽类型为inner，说明拖拽节点成为了目标节点的子节点，只需要获取目标节点对象即可
+      var data = dropType !== "inner" ? dropNode.parent.data : dropNode.data;
+      var nodeData =
+        dropNode.level === 1 && dropType !== "inner" ? data : data.children;
+      // 设置父ID,当level为1说明在第一级，pid为空
+      nodeData.forEach((element) => {
+        element.pid = data.id;
+      });
+      nodeData.forEach((element, i) => {
+        var dept = {
+          deptId: element.id,
+          parentDeptId: element.pid,
+          order: i,
+        };
+        paramData.push(dept);
+      });
+
+      this.loading = true;
+    },
+
+    changeNodeData(val) {
+      this.newData["name"] = val;
+    },
+    importData(e) {
+      // 利用fileReader对象获取file
+      const file = e.target.files[0];
+      const reader = new FileReader();
+      reader.readAsText(file);
+      reader.onload = (e) => {
+        this.$set(
+          this.config.treeConfig,
+          "treeData",
+          JSON.parse(e.target.result)
+        );
+      };
+    },
+    clearData() {
+      this.config.treeConfig.treeData = [];
+    },
+    onSelect(data, node) {
+      console.log(data, node.halfCheckedKeys);
+    },
+    exportData() {
+      const eleLink = document.createElement("a");
+      eleLink.download = "配置数据.json";
+      eleLink.style.display = "none";
+      // 字符内容转变成blob地址
+      const blob = new Blob([JSON.stringify(this.config.treeConfig.treeData)]);
+      eleLink.href = URL.createObjectURL(blob);
+      // 触发点击
+      document.body.appendChild(eleLink);
+      eleLink.click();
+      // 然后移除
+      document.body.removeChild(eleLink);
+    },
+    addNode(type, node) {
+      this.treeMenuVisible = false;
+      this.currentEditNode = null;
+      this.addNodeType = type;
+      let data = {};
+      if (type === "normal") {
+        data = {
+          label: "",
+          describe: "",
+        };
+      } else if (type === "globe") {
+        data = {
+          label: "",
+          describe: "",
+          ip: "",
+          port: "",
+          layerServiceType: "IGSScene",
+          name: "",
+          searchName: "",
+          serverUrl: "",
+          model: "surface",
+          guid: "",
+        };
+      } else if (type === "server") {
+        data = {
+          label: "",
+          describe: "",
+          ip: "",
+          port: "",
+          layerServiceType: "IGSIMAGE",
+          name: "",
+          searchName: "",
+          serverUrl: "",
+          tokenKey: "",
+          token: "",
+          wfsUrl: "",
+          extent: "",
+          guid: "",
+        };
+      } else if (type === "data") {
+        data = {
+          label: "",
+          describe: this.config.otherConfig.nonSpatial,
+          data: "",
+        };
+      }
+      this.newData = data;
+      this.nodeInfoVisible = true;
+      if (node) {
+        this.addParent = false;
+      } else {
+        this.addParent = true;
+      }
+      this.nodeInfoTitle = "添加节点";
+    },
+    // nodeContextmenu(event, obj, data, tree) {
+    //   this.treeMenuVisible = true;
+    //   this.rightClickData = data.data;
+    //   this.rightClickNode = data;
+    //   const menu = document.querySelector("#treeDataMenu");
+    //   const bodyHeight = document.getElementsByTagName("body")[0].clientHeight;
+    //   const menuHeight = 154; // menu.clientHeight的高度
+    //   /* 菜单定位基于鼠标点击位置 */
+    //   menu.style.left = `${event.clientX}px`;
+    //   if (event.clientY + menuHeight > bodyHeight) {
+    //     // 如果鼠标点击高度和右键菜单高度加起来比整个页面高度大，那么右键菜单就向
+
+    //     上显示;
+    //     menu.style.top = ``;
+    //     menu.style.bottom = `${bodyHeight - event.clientY}px`;
+    //   } else {
+    //     menu.style.bottom = ``;
+    //     menu.style.top = `${event.clientY}px`;
+    //   }
+    //   if (
+    //     Object.prototype.hasOwnProperty.call(
+    //       this.rightClickData,
+    //       "layerServiceType"
+    //     )
+    //   ) {
+    //     if (
+    //       Object.prototype.hasOwnProperty.call(this.rightClickData, "model")
+    //     ) {
+    //       this.nodeType = "globe";
+    //     } else {
+    //       this.nodeType = "server";
+    //     }
+    //   } else if (
+    //     Object.prototype.hasOwnProperty.call(this.rightClickData, "data")
+    //   ) {
+    //     this.nodeType = "data";
+    //   } else {
+    //     this.nodeType = "normal";
+    //   }
+    // },
+    selectTreeNode(data, node, tree) {
+      this.treeMenuVisible = false;
+    },
+    editNode(data, node) {
+      this.rightClickNode = null;
+      this.currentEditNode = node;
+      this.newData = data;
+      this.preEditData = JSON.parse(JSON.stringify(data));
+      this.nodeInfoVisible = true;
+      this.nodeInfoTitle = "修改节点";
+      if (Object.prototype.hasOwnProperty.call(data, "model")) {
+        this.addNodeType = "globe";
+      } else if (
+        Object.prototype.hasOwnProperty.call(data, "layerServiceType")
+      ) {
+        this.addNodeType = "server";
+      } else if (Object.prototype.hasOwnProperty.call(data, "data")) {
+        this.addNodeType = "data";
+      } else {
+        this.addNodeType = "normal";
+      }
+    },
+    deleteNode(node) {
+      const vm = this;
+      const modal = this.$confirm({
+        title: "提示",
+        content: "是否删除该节点?",
+        okText: "确认",
+        cancelText: "取消",
+        onOk(e) {
+          return new Promise((resolve, reject) => {
+            try {
+              const treeData = vm.config.treeConfig.treeData;
+              vm.config.treeConfig.treeData = vm.deleteParentNode(
+                treeData,
+                node.label
+              );
+              vm.$message.success("删除成功! ");
+            } catch (error) {
+              vm.$message.error("删除失败! ");
+            } finally {
+              resolve();
+            }
+          });
+        },
+      });
+    },
+    deleteParentNode(data, key) {
+      const ret = [];
+      const vm = this;
+      data.forEach((ele) => {
+        if (ele.label !== key) {
+          if (ele.children) {
+            ele.children = vm.deleteParentNode(ele.children, key);
+          }
+          ret.push(ele);
+        }
+      });
+      return ret;
+    },
+    addNodeCallBack() {
+      const data = this.newData;
+      if (
+        data.label === "" ||
+        (Object.prototype.hasOwnProperty.call(data, "name") &&
+          data.name === "" &&
+          data.serverUrl === "")
+      ) {
+        this.$message.error("参数错误！");
+      } else {
+        let flag = true;
+        let msg = "";
+        // const datas = this.filtTreeData('label', data.label)
+        const nonSpatial = this.config.treeConfig.useLocalData
+          ? this.config.defaultNonSpatial
+          : this.config.otherConfig.nonSpatial;
+        const clickData =
+          this.currentEditNode && Object.keys(this.currentEditNode).length > 0
+            ? this.currentEditNode.parent.data
+            : this.rightClickData;
+        const clickDataChildren =
+          clickData && clickData.children ? clickData.children : undefined;
+        const datas = this.filtNodeData("label", data.label, clickDataChildren);
+        if (
+          data.label !== nonSpatial &&
+          ((this.currentEditNode && datas.length > 1) ||
+            (!this.currentEditNode && datas.length > 0))
+        ) {
+          // 只要保证同级没有相同名称的节点即可
+          flag = false;
+          msg = "已存在相同名称的节点";
+          if (this.currentEditNode) {
+            // 编辑的时候如果存在相同值，则恢复之前的值
+            this.newData = { ...this.preEditData };
+            this.currentEditNode.data = { ...this.preEditData };
+            this.restoreTreeData(this.currentEditNode);
+          }
+        }
+        if (flag) {
+          if (
+            Object.prototype.hasOwnProperty.call(data, "guid") &&
+            data.guid === ""
+          ) {
+            data.guid = uuid();
+          }
+          if (this.currentEditNode) {
+            this.currentEditNode.setData(data);
+          } else {
+            if (!this.addParent) {
+              if (this.addEditNode.dataRef.children) {
+                this.addEditNode.dataRef.children.push(data);
+              } else {
+                this.addEditNode.dataRef.children = [];
+                this.addEditNode.dataRef.children.push(data);
+              }
+            } else {
+              this.config.treeConfig.treeData.push(data);
+            }
+          }
+          this.nodeInfoVisible = false;
+        } else {
+          this.$message.error(msg);
+        }
+      }
+    },
+    filtNodeData(key, value, data, array) {
+      if (!array) {
+        array = [];
+      }
+      if (!data) {
+        data = this.config.treeConfig.treeData;
+      }
+      for (let i = 0; i < data.length; i++) {
+        if (data[i][key] === value) {
+          array.push(data[i]);
+        }
+      }
+      return array;
+    },
+    /**
+     * 恢复基础目录树数据
+     */
+    restoreTreeData(node) {
+      if (node.parent) {
+        const children = [];
+        const { childNodes } = node.parent;
+        for (let i = 0; i < childNodes.length; i++) {
+          children.push(childNodes[i].data);
+        }
+        node.parent.data.children = [...children];
+        this.restoreTreeData(node.parent);
+      } else {
+        this.treeData = { ...node.data };
+      }
+    },
+    filtTreeData(key, value, data, array) {
+      if (!array) {
+        array = [];
+      }
+      if (!data) {
+        data = this.config.treeConfig.treeData;
+      }
+      for (let i = 0; i < data.length; i++) {
+        if (data[i][key] === value) {
+          array.push(data[i]);
+        }
+        if (data[i].children) {
+          this.filtTreeData(key, value, data[i].children, array);
+        }
+      }
+      return array;
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.data-source-setting-wrapper {
+  .import-cover {
+    pointer-events: none;
+    color: #fff;
+    background-color: #49aa19;
+    border: #49aa19;
+  }
+  .icon-danger {
+    color: #fff;
+    background-color: #a61d24;
+    border: #a61d24;
+  }
+  .icon-warning {
+    color: #fff;
+    background-color: #d89614;
+    border: #d89614;
+  }
+  #treeDataMenu {
+    position: fixed;
+    z-index: 10000;
+    padding: 0;
+    margin: 0;
+    border-radius: 2px;
+    box-shadow: 0 2px 12px 0 hsla(0, 0%, 60%, 0.15);
+    .el-menu-item {
+      height: 36px;
+      line-height: 36px;
+      &.is-active {
+        color: unset;
+      }
+    }
+  }
+  .tree-data-icon {
+    width: 18px;
+    height: 18px;
+    vertical-align: middle;
+  }
+}
+</style>
+
+<style lang="scss">
+.mapgis-ui-popover {
+  background: unset;
+}
+.mapgis-ui-btn-sm {
+  border: unset;
+}
+.data-source-setting-wrapper {
+  .setting-header {
+    .setting-item {
+      margin-right: 8px;
+    }
+  }
+  .setting-content {
+    .mapgis-ui-tooltip-arrow::before {
+      background-color: "#141414";
+    }
+    .tooltip-inner {
+      background-color: "#141414";
+    }
+    .node-actions {
+      display: none;
+      .mapgis-ui-btn-text {
+        border: unset;
+      }
+    }
+    .el-tree-node__content:hover .node-actions {
+      display: unset;
+    }
+  }
+}
+</style>