gs-bim-air 3.0.3 → 3.0.5

package/src/viewerWrapper/panels/property/panes/propertyPanel.vue

@@ -1,971 +0,0 @@
-<template>
-  <div class="PropertyPanel">
-    <div class="property-box">
-      <!-- <gs-divider margin="8px" stroke="1px" /> -->
-      <div v-if="viewer.selectionManager.selectedObject === null && propertiesTreeData.length === 0" class="tips">
-        请选择一个构件, 以查看对应属性
-      </div>
-
-      <div style="height: 100%" v-else>
-        <!-- <div class="top-toolbar">
-          <div class="property-button-wrapper">
-            <el-button
-              type="text"
-              size="small"
-              class="property-button"
-              style=""
-              title="导入"
-              @click.stop="importPropertyClick()">
-              <i class="GSBimAir icon-daoru1"></i>
-            </el-button>
-
-            <el-button
-              type="text"
-              size="small"
-              class="property-button"
-              title="开启编辑状态"
-              @click.stop="openEditAllPropertyClick()"
-              v-if="!isPropertyEditing">
-              <i class="el-icon-edit"></i>
-            </el-button>
-
-            <span v-else>
-              <el-button
-                type="text"
-                size="small"
-                class="property-button"
-                title="添加属性组"
-                @click.stop="addGroupClick()">
-                <i class="el-icon-plus"></i>
-              </el-button>
-              <el-button
-                type="text"
-                size="small"
-                class="property-button"
-                title="确定"
-                @click.stop.prevent="editAllPropertyConfirm()">
-                <i class="el-icon-check"></i>
-              </el-button>
-              <el-button
-                type="text"
-                size="small"
-                class="property-button"
-                title="取消"
-                @click.stop.prevent="editAllPropertyCancel()">
-                <i class="el-icon-close"></i>
-              </el-button>
-            </span>
-          </div>
-        </div> -->
-        <div style="width: 100%; max-height: 600px; overflow: auto" class="el-scrollbar">
-          <gs-tree :data="propertiesTreeData" class="gs-tree" ref="gsTree">
-            <div
-              slot="tree-node"
-              slot-scope="{ node, parent }"
-              style="position: relative; display: flex; justify-content: space-between"
-              @click.stop="leafNodeClick(node, parent, 'name')">
-              <el-input
-                v-if="nodeName !== null && activeNodeKey === node.key"
-                v-model="node.name"
-                @change="leafNodeNameChange(node, parent)"
-                @blur="leafNodeBlur(node, 'name')"
-                size="mini"></el-input>
-              <span v-else>{{ node.name }}</span>
-
-              <div v-if="isPropertyEditing" class="property-node-button-wrapper">
-                <!-- <el-button
-                  type="text"
-                  size="mini"
-                  class="tree-node-button"
-                  title="添加属性组"
-                  @click.stop="addPropertyNodeClick(node, 'addGroup')">
-                  <i class="el-icon-plus"></i>
-                </el-button> -->
-                <el-button
-                  type="text"
-                  size="mini"
-                  class="tree-node-button"
-                  title="添加属性"
-                  @click.stop="addPropertyNodeClick(node, parent)">
-                  <i class="el-icon-plus"></i>
-                </el-button>
-                <el-button
-                  type="text"
-                  size="mini"
-                  class="property-button"
-                  title="删除"
-                  @click.stop="deletePropertyNodeClick(node, parent)">
-                  <i class="el-icon-delete"></i>
-                </el-button>
-              </div>
-            </div>
-            <div slot="leaf-node" slot-scope="{ node, parent, level }" class="property-leaf-node">
-              <div
-                class="left"
-                @click="leafNodeClick(node, parent, 'name')"
-                :style="{
-                  paddingLeft: level * 20 + 'px',
-                }">
-                <el-input
-                  v-if="nodeName !== null && activeNodeKey === node.key"
-                  v-model="node.name"
-                  @change="leafNodeNameChange(node, parent)"
-                  @blur="leafNodeBlur(node, 'name')"
-                  size="mini"></el-input>
-                <span v-else>{{ node.name }}:</span>
-                <!-- <span>:</span> -->
-              </div>
-              <div class="right" @click="leafNodeClick(node, parent, 'value')">
-                <el-input
-                  v-if="nodeValue !== null && activeNodeKey === node.key"
-                  v-model="node.value"
-                  @blur="leafNodeBlur(node, 'value')"
-                  size="mini"></el-input>
-                <span v-else>{{ node.value }}</span>
-              </div>
-
-              <div
-                v-if="isPropertyEditing && node.name !== 'Id' && node.name !== 'ElementType'"
-                class="property-node-button-wrapper">
-                <el-button
-                  type="text"
-                  size="mini"
-                  class="property-button"
-                  title="删除"
-                  @click.stop="deletePropertyNodeClick(node, parent)">
-                  <i class="el-icon-delete"></i>
-                </el-button>
-              </div>
-            </div>
-          </gs-tree>
-        </div>
-      </div>
-    </div>
-
-    <!-- <gs-dialog
-      title="导入属性"
-      v-model="importPropertyVisible"
-      @confirm="importPropertyConfirm"
-      width="800px"
-      type="dark"
-    >
-      <div class="import-property-wrapper">
-        <div>
-          <div style="padding: 5px 10px; font-size: 16px; color: #aaa">
-            导入模型构件（可多选）
-          </div>
-          <div class="el-scrollbar tree-scrollbar" style="overflow: auto">
-            <el-tree
-              style="width: 300px"
-              ref="structureTree"
-              :props="treeProps"
-              :data="modelObjects"
-              node-key="key"
-              @node-click="treeNodeClick"
-              :expand-on-click-node="false"
-              :default-checked-keys="checkKeys"
-              :default-expanded-keys="expandedKeys"
-              :filter-node-method="filterNode"
-              show-checkbox
-              highlight-current
-              check-strictly
-            >
-              <span class="custom-tree-node" slot-scope="{ data }">
-                {{ data.name }}
-              </span>
-            </el-tree>
-          </div>
-        </div>
-        <div
-          class="import-property"
-          style="border-left: 1px solid #aaa; margin-left: 1px"
-        >
-          <div style="border-bottom: 1px solid #aaa; padding-bottom: 8px">
-            <el-button
-              size="small"
-              type="text"
-              @click="importDictPropertyVisible = true"
-              ><i class="el-icon-plus"></i>属性字典添加
-            </el-button>
-            <el-button size="small" type="text"
-              ><i class="el-icon-plus"></i>自定义添加
-            </el-button>
-            <el-button size="small" type="text" @click="$refs.upload.click()"
-              ><i class="el-icon-plus"></i>本地导入
-              <input
-                type="file"
-                ref="upload"
-                :accept="acceptFileType"
-                v-show="false"
-                @change="uploadFileChange()"
-              />
-            </el-button>
-          </div>
-        </div>
-      </div>
-    </gs-dialog> -->
-
-    <!-- <gs-dialog
-      title="属性字典导入"
-      v-model="importDictPropertyVisible"
-      @confirm="importDictPropertyConfirm"
-      width="800px"
-      type="dark"
-    >
-    </gs-dialog> -->
-
-    <!-- <gs-dialog
-      title="本地导入"
-      v-model="importLocalPropertyVisible"
-      @confirm="importLocalPropertyConfirm"
-    >
-    </gs-dialog> -->
-  </div>
-</template>
-
-<script lang="ts">
-import * as Longan from "gs-longan";
-import { Component, Inject, Prop, Vue, Watch } from "vue-property-decorator";
-import GsDialog from "../../../../components/gs/gsDialog/gs-dialog.vue";
-import GsTree from "../../../../components/gs/gsTree/gs-property-tree.vue";
-import GsTreeNode from "../../../../components/gs/gsTreeNode/gs-property-tree-node.vue";
-import { OpType } from "gs-bim-air-core/gsDevFx/managers/propertyManager";
-import store from "../../../../store";
-import fileType from "../../../../utils/fileType";
-
-import { Button, Input, TabPane, Tabs } from "element-ui";
-import Tree from "../../../../components/el/tree";
-import { Viewer } from "gs-bim-air-core/gsDevFx/viewer";
-Vue.use(Tree);
-Vue.use(Tabs);
-Vue.use(TabPane);
-Vue.use(Button);
-Vue.use(Input);
-
-@Component({
-  components: { GsDialog, GsTree, GsTreeNode },
-})
-export default class InterfacePropertyPanel extends Vue {
-  @Prop() componentData;
-  @Inject() getViewer;
-
-  activeName = "first";
-  columnCount = 25;
-  isPropertyEditing = false;
-  nodeName = null;
-  nodeValue = null;
-  maxKey = 1;
-  activeNodeKey = null;
-  propertiesTreeData = [];
-  propertiesTreeDataClone;
-  importPropertyVisible = false;
-  importDictPropertyVisible = false;
-  importLocalPropertyVisible = false;
-  acceptFileType = "." + fileType.excel.replace(/-/g, ",.");
-
-  // ------树的属性
-  expandedKeys = [];
-  checkKeys = [];
-  treeCheckedNos = [];
-  modelObjects = [];
-  treeProps = {
-    label: "name",
-    children: "items",
-  };
-  currentHeightNodeKey = null;
-
-  // properties = [];
-
-  // ---------
-  store = store;
-  // options = options;
-
-  get viewer(): Viewer {
-    return this.getViewer();
-  }
-
-  get properties() {
-    // let properties = store.state.properties;
-    return this.componentData || [];
-  }
-
-  get property() {
-    let tabs = this.viewer.options.components.property.tabs;
-    return tabs;
-  }
-
-  // get currentNode() {
-  //   console.log("this.viewer.selectionManager.selectedObject", this.viewer.selectionManager.selectedObject);
-  //   return this.viewer.selectionManager.selectedObject;
-  // }
-
-  @Watch("properties")
-  onPropertiesChange() {
-    this.maxKey = 1;
-    if (this.properties) {
-      let propertiesTreeData = [...this.properties];
-      this.propertiesAddKey(propertiesTreeData);
-      Vue.set(this, "propertiesTreeData", propertiesTreeData);
-    }
-    if (this.properties.length === 0) {
-      this.editAllPropertyCancel();
-      Vue.set(this, "propertiesTreeData", []);
-    }
-    console.log(
-      "onPropertiesChange",
-      this.properties,
-      this.viewer.selectionManager.selectedObject,
-      // this.currentNode,
-      this.propertiesTreeData
-    );
-  }
-
-  propertiesAddKey(properties) {
-    for (let i = 0; i < properties.length; i++) {
-      let node = properties[i];
-      // node.parent = properties;
-      if (!node.key) {
-        node.key = this.maxKey;
-        this.maxKey++;
-      } else {
-        this.maxKey = this.maxKey > node.key ? this.maxKey : node.key + 1;
-      }
-
-      if (node.items && node.items.length > 0) {
-        this.propertiesAddKey(node.items);
-      }
-    }
-  }
-
-  // // 属性按columnCount一列分列
-  // propertiesColumn(column) {
-  //   let len = Object.keys(this.properties).length;
-  //   console.log(this.properties);
-
-  //   let endNum = 0;
-  //   if (column * this.columnCount > len) {
-  //     endNum = len;
-  //   } else {
-  //     endNum = column * this.columnCount;
-  //   }
-  //   return Object.keys(this.properties).slice(
-  //     (column - 1) * this.columnCount,
-  //     endNum
-  //   );
-  // }
-
-  importPropertyClick() {
-    this.importPropertyVisible = true;
-    // let heighlightKeysLength = this.viewer.highlightManager.highlightKey;
-    //   this.viewer.selectionManager._highLightKeys.length;
-    // if (heighlightKeysLength > 0) {
-    //   this.currentHeightNodeKey =
-    //     this.viewer.selectionManager._highLightKeys[
-    //       heighlightKeysLength - 1
-    //     ];
-    // }
-
-    this.expandedKeys = [this.currentHeightNodeKey];
-    this.checkKeys.push(this.currentHeightNodeKey);
-    // // this.viewer.selectionManager.clearAllSelectionAndHighlight();
-    this.viewer.updateDisplay();
-    this.getModelObjects();
-    this.$nextTick().then(() => {
-      (this.$refs.structureTree as any).setCurrentKey(this.currentHeightNodeKey);
-    });
-  }
-
-  importPropertyConfirm() {
-    this.importPropertyVisible = false;
-  }
-
-  importDictPropertyConfirm() {}
-
-  importLocalPropertyConfirm() {}
-
-  openEditAllPropertyClick() {
-    // this.modelObjectsClone = [...this.modelObjects];
-    this.isPropertyEditing = true;
-    this.propertiesTreeDataClone = JSON.stringify(this.propertiesTreeData);
-    // this.propertyManager = new PropertyManager(this.propertiesTreeData)
-    // setTimeout(() => {
-    //   this.expandedKeys.push(data.items[0].key);
-    //   this.treeNodeHoverKey = data.items[0].key;
-    // }, 100);
-  }
-  checkPropertiesTreeData(arr) {
-    // 检查该 GROUP 名称是否重复
-    const groupNames = new Set();
-    for (const item of arr) {
-      if (item.type === "GROUP") {
-        if (groupNames.has(item.name)) {
-          // this.editAllPropertyCancel();
-          this.$message.warning("属性组名称->" + " '" + item.name + "'" + " 发生重复");
-          return false;
-        }
-        groupNames.add(item.name);
-        // 检查该 GROUP 中的 ITEM 名称是否重复
-        const itemNames = new Set();
-        for (const subItem of item.items) {
-          if (subItem.type === "ITEM") {
-            if (itemNames.has(subItem.name)) {
-              // this.editAllPropertyCancel();
-              this.$message.warning(
-                "属性组名称->" + "'" + item.name + "' 中" + " 属性名称->" + "'" + subItem.name + "'" + "  发生重复"
-              );
-              return false;
-            }
-            itemNames.add(subItem.name);
-          }
-        }
-      }
-    }
-    return true;
-  }
-
-  editAllPropertyConfirm() {
-    if (this.checkPropertiesTreeData(this.propertiesTreeData)) {
-      this.isPropertyEditing = false;
-
-      this.nodeName = null;
-      this.nodeValue = null;
-
-      this.viewer.propertyManager.confirm().then((res) => {
-        //更新属性
-        store.commit("propertiesChange", res);
-      });
-    } else {
-      return;
-    }
-  }
-
-  editAllPropertyCancel() {
-    if (this.propertiesTreeDataClone !== undefined) {
-      this.propertiesTreeData = JSON.parse(this.propertiesTreeDataClone);
-    }
-
-    this.isPropertyEditing = false;
-
-    this.nodeName = null;
-    this.nodeValue = null;
-  }
-
-  leafNodeNameChange(node, parent) {
-    let sameNameCount = 0;
-    let items = parent.items ? parent.items : parent;
-    (items as any[]).forEach((item) => {
-      if (item.name === node.name) {
-        sameNameCount++;
-      }
-    });
-    if (sameNameCount >= 2) {
-      this.$message.warning("不允许有同名属性");
-      node.name = node.name + " copy";
-      return;
-    }
-  }
-
-  leafNodeClick(node, parent, type) {
-    if (!this.isPropertyEditing) {
-      return;
-    }
-
-    this.nodeName = null;
-    this.nodeValue = null;
-    // console.log("leafNodeClick", node);
-    this.activeNodeKey = node.key;
-    if (type === "name") {
-      this.nodeName = node.name;
-    } else if (type === "value") {
-      this.nodeValue = node.value;
-    }
-  }
-
-  leafNodeBlur(node, type) {
-    // console.log(node, "node");
-    // console.log(type, "type");
-    // console.log(this.nodeName, "this.nodeName");
-
-    if (node.parentGroup.length === 0) {
-      this.viewer.propertyManager.push({
-        group: [],
-        operationType: OpType.RenameGroup,
-        name: this.nodeName,
-        arg: node.name,
-      });
-    } else {
-      if (type === "name") {
-        this.viewer.propertyManager.push({
-          group: node.parentGroup,
-          operationType: OpType.RenameItem,
-          name: this.nodeName,
-          arg: node.name,
-        });
-      } else if (type === "value") {
-        this.viewer.propertyManager.push({
-          group: node.parentGroup,
-          operationType: OpType.UpdateItem,
-          name: node.name,
-          arg: node.value,
-        });
-      }
-    }
-
-    // console.log(this.viewer.propertyManager.opGroup, "PropertyManager.propertyOpList.opGroup");
-  }
-
-  addPropertyNodeClick(node, parent) {
-    // console.log(node, "node");
-    // console.log(parent, "parent");
-    // console.log(node.parentGroup, "node.parentGroup");
-    // console.log(this.propertiesTreeData, "propertiesTreeData");
-    let parentGroup = [...node.parentGroup].concat([node.name]);
-    // if (parent === "addGroup") {
-    //   this.$set(node.items, node.items.length, {
-    //     items: [],
-    //     key: this.maxKey,
-    //     parentGroup: parentGroup,
-    //     type: "GROUP",
-    //     name: "",
-    //   });
-    //   this.viewer.propertyManager.push({
-    //     group: parentGroup,
-    //     operationType: OpType.AddGroup,
-    //     name: "",
-    //   });
-    // } else {
-    this.$set(node.items, node.items.length, {
-      name: "",
-      value: " ",
-      key: this.maxKey,
-      parentGroup: parentGroup,
-    });
-    this.viewer.propertyManager.push({
-      group: parentGroup,
-      operationType: OpType.AddItem,
-      name: "",
-      arg: "",
-    });
-    // }
-
-    this.activeNodeKey = this.maxKey;
-    this.maxKey++;
-    this.nodeName = "1";
-    this.nodeValue = "1";
-
-    // console.log(this.viewer.propertyManager.opGroup, " this.viewer.propertyManager");
-  }
-
-  addGroupClick() {
-    let parentGroup = [];
-    this.propertiesTreeData.push({
-      items: [],
-      key: this.maxKey,
-      parentGroup: parentGroup,
-      type: "GROUP",
-      name: "",
-    });
-    this.activeNodeKey = this.maxKey;
-    this.maxKey++;
-    this.nodeName = "1";
-    this.nodeValue = "1";
-    this.viewer.propertyManager.push({
-      group: parentGroup,
-      operationType: OpType.AddGroup,
-      name: "",
-    });
-  }
-
-  deletePropertyNodeClick(node, parent) {
-    // console.log(node, "node");
-    // console.log(node.parentGroup, "node.parentGroup");
-    if (parent.items) {
-      let index = parent.items.indexOf(node);
-      parent.items.splice(index, 1);
-    } else {
-      let index = parent.indexOf(node);
-      parent.splice(index, 1);
-    }
-    if (node.type === "GROUP") {
-      this.viewer.propertyManager.push({
-        group: node.parentGroup.length > 0 ? node.parentGroup : [],
-        operationType: OpType.RemoveGroup,
-        name: node.name,
-      });
-    } else {
-      this.viewer.propertyManager.push({
-        group: node.parentGroup,
-        operationType: OpType.RemoveItem,
-        name: node.name,
-      });
-    }
-  }
-
-  // ------------树的方法
-
-  findRoVisible(insObj: any, checkedNos: number[]) {
-    if (insObj.ro.visible) {
-      checkedNos.push(insObj.no);
-    }
-    for (let i = 0; i < insObj.items.length; i++) {
-      this.findRoVisible(insObj.items[i], checkedNos);
-    }
-  }
-
-  getModelObjects() {
-    if (this.viewer && this.viewer.instanceObject) {
-      let insObj = this.viewer.instanceObject;
-      let treeCheckedNos = [];
-      this.findRoVisible(insObj, treeCheckedNos);
-      this.treeCheckedNos = treeCheckedNos;
-
-      if (Longan.TypeHelper.typeName(insObj.renderObject) === "LightModel") {
-        // let treeModelStructure = (
-        //   insObj.ro as Longan.LightModel
-        // ).getStructure();
-        // 设置默认选中的key
-        // this.checkKeys.push(treeModelStructure.key);
-        // console.log(treeModelStructure);
-        // this.modelObjects = [treeModelStructure];
-        // console.log("this.modelObjects", this.modelObjects);
-      } else {
-        this.modelObjects = [];
-      }
-    } else {
-      this.treeCheckedNos = [];
-      this.modelObjects = [];
-    }
-  }
-
-  treeNodeClick() {}
-
-  filterNode(value, data) {
-    if (!value) {
-      return true;
-    }
-    return data.text.indexOf(value) !== -1;
-  }
-
-  // ---------------------
-
-  setData() {
-    this.$emit("setData", {
-      title: "属性面板",
-      top: "10px",
-      right: "10px",
-      height: "500px",
-      width: "400px",
-    });
-  }
-
-  // getProperty() {
-  //   let segObj = this.viewer.selectionManager.selectedObject;
-  //   if (segObj && PropertyPanel.instance.visible) {
-  //     this.viewer.propertyManager.getProperty(segObj).then((data) => {
-  //       this.properties = data;
-  //     });
-  //   }
-  // }
-
-  mounted() {
-    this.setData();
-    this.activeName = "first";
-
-    // this.$nextTick(() => {
-    //   let componentSelector = this.viewer.operatorManager.find(
-    //     "ComponentSelector"
-    //   ) as ComponentSelector;
-
-    //   componentSelector.lButtonDown.add(this.getProperty);
-    // });
-  }
-
-  beforeDestroy() {
-    // let componentSelector = this.viewer.operatorManager.find(
-    //   "ComponentSelector"
-    // ) as ComponentSelector;
-    // componentSelector.lButtonDown.remove(this.getProperty);
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-@import "../../../../assets/scss/site";
-@import "../../../../assets/scss/gs-tree-dark";
-@import "../../../../assets/theme/handle.scss";
-// $border-color: #292b36;
-
-.PropertyPanel {
-  color: white;
-  // background-color: $model-theme-light;
-  // background: $gs-primary-background2;
-  height: auto;
-  // position: absolute;
-  // top: 0;
-  // bottom: 0;
-  // left: 0;
-  // right: 0;
-  border-radius: 0 0 4px 4px;
-  height: 100%;
-
-  .property-box {
-    text-align: left;
-    height: 100%;
-    // padding: 20px 0;
-    // position: absolute;
-    // top: 0;
-    // bottom: 0;
-    // left: 0;
-    // right: 0;
-
-    .tips {
-      // margin-top: 40px;
-      font-size: 14px;
-      font-weight: 300;
-      color: $gs-primary-fontColor;
-      line-height: 27px;
-      opacity: 0.5;
-      text-align: center;
-    }
-
-    ::v-deep .el-scrollbar {
-      // position: absolute;
-      // top: 40px;
-      // bottom: 0;
-      // left: 0;
-      // right: 0;
-
-      .el-scrollbar__wrap {
-        margin-bottom: 0 !important;
-      }
-    }
-  }
-}
-
-:deep(.el-tabs) {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  .el-tabs__nav-scroll {
-    background: $gs-primary-background2;
-  }
-
-  .el-tabs__content {
-    // top: 0;
-    // position: absolute;
-    // left: 0;
-    // right: 0;
-    // bottom: 0;
-  }
-
-  .el-tabs__header {
-    margin: 0;
-    background: #333640;
-
-    .el-tabs__nav {
-      display: flex;
-      float: unset;
-      margin: 0 8px;
-
-      .el-tabs__active-bar {
-        height: 2px;
-        background: $gs-primary-checkboxColor;
-        border-radius: 0;
-        width: 80px;
-      }
-
-      .el-tabs__item {
-        height: 48px;
-        color: unset;
-        font-size: 16px;
-        width: 100px;
-        padding: 0;
-        flex: 1;
-        border-bottom: 2px solid #aaa;
-      }
-
-      .el-tabs__item.is-active {
-        color: $gs-primary-checkboxColor;
-      }
-    }
-
-    .el-tabs__nav-wrap::after {
-      height: unset;
-    }
-  }
-}
-
-.property-box {
-  text-align: left;
-  // padding: 20px 0;
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-
-  .tips {
-    // margin-top: 40px;
-    font-size: 14px;
-    font-weight: 300;
-    color: #ffffff;
-    line-height: 27px;
-    opacity: 0.3;
-    text-align: center;
-  }
-
-  :deep(.el-scrollbar) {
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-
-    .el-scrollbar__wrap {
-      margin-bottom: 0 !important;
-    }
-  }
-}
-
-.top-toolbar {
-  //border-bottom: 2px solid $border-color;
-}
-
-.property-button-wrapper {
-  text-align: right;
-  right: 10px;
-  top: 0;
-  // background: $gs-primary-background;
-  height: 40px;
-  line-height: 40px;
-  padding-right: 15px;
-  .el-button {
-    color: $gs-primary-el-buttonColor;
-    margin: auto 5px;
-  }
-
-  i {
-    font-size: 12px;
-  }
-}
-
-ul {
-  padding: 0;
-  margin: 0;
-  width: auto;
-
-  li {
-    list-style: none;
-    font-size: 13px;
-    padding: 3px 0;
-  }
-}
-
-.gs-tree {
-  // border-top: 1px solid $gs-primary-borderColor;
-}
-
-.tree-node {
-  position: relative;
-  display: flex;
-  div {
-    vertical-align: middle;
-    // flex: 1;
-  }
-}
-
-.property-leaf-node {
-  color: $gs-primary-fontColor;
-  display: flex;
-  position: relative;
-  font-size: 14px;
-
-  div {
-    min-height: 26px;
-    line-height: 26px;
-    vertical-align: middle;
-    // padding: 0 10px;
-  }
-
-  .left {
-    flex: 2;
-    border: 1px solid $gs-primary-borderColor;
-    border-bottom: none;
-    border-left: none;
-    width: 100px;
-    word-wrap: break-word;
-    word-break: break-all;
-  }
-
-  .right {
-    flex: 3;
-    border: 1px solid $gs-primary-borderColor;
-    //border-right: none;
-    border-right: none;
-    border-bottom: none;
-    border-radius: unset;
-    margin-left: -1px;
-    // color: $gs-primary-el-buttonColor;
-    padding-left: 10px;
-    word-wrap: break-word;
-    word-break: break-all;
-  }
-}
-
-.property-node-button-wrapper {
-  padding: 0 5px;
-  // position: absolute;
-  // right: 10px;
-  // top: 0;
-  // background: #3d579b;
-  background: transparent;
-  // border-radius: 10px;
-  height: 26px;
-
-  .el-button {
-    color: white;
-  }
-}
-
-.import-property-wrapper {
-  // border: 1px solid #d5dbe6;
-  height: 600px;
-  display: flex;
-
-  .tree-scrollbar {
-    height: 580px;
-    width: 300px;
-    // border-right: 1px solid #d5dbe6;
-  }
-
-  .import-property {
-    padding: 0px 0 0px 10px;
-    flex: 1;
-
-    i {
-      padding-right: 10px;
-    }
-  }
-}
-.el-button--text {
-  color: $gs-primary-checkboxColor;
-}
-:deep(.el-checkbox) {
-  .el-checkbox__inner {
-    background: transparent;
-    border: 1px solid #aaa;
-  }
-  .el-checkbox__input.is-checked .el-checkbox__inner {
-    background: $gs-primary-checkboxColor;
-    border-color: $gs-primary-checkboxColor;
-  }
-}
-:deep(.el-input__inner) {
-  background: transparent;
-  border: 1px solid #aaa;
-  border-radius: 4px;
-  color: $gs-primary-el-inputColor;
-}
-</style>