real3d-portalsite/src/components/Combinations/LayerManage/LayerManageSplit.vue

<template>
  <div class="sm-panel" v-if="LayerManageShow">
    <div class="sm-panel-header">
      <span>{{ Resource.LayerManage }}</span>
      <span class="closeBtn" @click="toggleVisibility">&times;</span>
    </div>
    <Tabs value="">
      <TabPane :label="Resource.Resource" name="zyml">
        <div class="zyml" :class="$props.splitId ? `zymlsplit` : ''">
          <el-input
            :placeholder="Resource.InputPlaceholder"
            prefix-icon="el-icon-search"
            v-model="treeSearchText"
            size="small"
          >
          </el-input>
          <div class="treeDiv">
            <el-tree
              @check="handleCheckChange"
              class="filter-tree"
              :data="TreeDatas"
              show-checkbox
              :props="defaultProps"
              :filter-node-method="filterNode"
              :default-checked-keys="checkedKeys"
              node-key="id"
              ref="tree"
            >
              <span class="custom-tree-node" slot-scope="{ node, data }">
                <span>{{ node.label }}</span>
                <span>
                  <Icon
                    :type="!data.favorite ? 'ios-star-outline' : 'ios-star'"
                    color="green"
                    size="18"
                    class="opBtn"
                    :title="
                      data.favorite ? Resource.DelCollect : Resource.AddCollect
                    "
                    @click="favoriteHandle(data)"
                    v-if="data.url != ''"
                  />
                </span>
              </span>
            </el-tree>
          </div>
        </div>
      </TabPane>
      <TabPane
        :label="Resource.LayerOptions"
        name="tckz"
        v-if="!$props.splitId"
      >
        <div class="tckz">
          <List split size="large">
            <ListItem v-for="(item, index) in addlayerdata" :key="index">
              {{ item.title }}
              <div class="listBtn">
                <i-switch
                  v-model="item.visible"
                  size="small"
                  @on-change="visibleChange(item, $event)"
                >
                  <template #open>
                    <span></span>
                  </template>
                  <template #close>
                    <span></span>
                  </template>
                </i-switch>
                <Icon
                  type="md-arrow-round-up"
                  color="green"
                  size="18"
                  class="opBtn"
                  :title="Resource.MoveUpOneLevel"
                  @click="raise(item)"
                  v-if="
                    index > 0 && (item.type == 'Vector' || item.type == 'IMG')
                  "
                />
                <Icon
                  type="md-arrow-round-down"
                  color="green"
                  size="18"
                  class="opBtn"
                  :title="Resource.MoveDownOneLevel"
                  @click="lower(item)"
                  v-if="
                    index < addlayerdata.length - 1 &&
                    (item.type == 'Vector' || item.type == 'IMG')
                  "
                />
                <Icon
                  type="md-locate"
                  color="green"
                  size="18"
                  class="opBtn"
                  :title="Resource.location"
                  @click="location(item)"
                />
              </div>
              <div class="sliderBtn" v-if="item.type != 'Terrain'">
                <Slider
                  v-model="item.trans"
                  @on-change="transSliderChange(item, $event)"
                ></Slider>
              </div>
            </ListItem>
          </List>
        </div>
      </TabPane>
      <TabPane :label="Resource.Favorite" name="collect">
        <div class="collect" :class="$props.splitId ? `collectsplit` : ''">
          <List split>
            <ListItem
              v-for="(item, index) in favoriteLayerList"
              :key="index"
              class="layerlist"
            >
              <Checkbox @on-change="checkboxChange(item, $event)">{{
                item.title
              }}</Checkbox>
              <div class="listBtn">
                <Icon
                  type="ios-star"
                  color="green"
                  size="18"
                  class="opBtn"
                  :title="Resource.DelCollect"
                  @click="favoriteHandle(item)"
                />
              </div>
            </ListItem>
          </List>
        </div>
      </TabPane>
    </Tabs>
  </div>
</template>

<script>
import { Collect, GetResourceTree, GetMyCollect } from "@/api/map";
export default {
  name: "LayerManageSplit",
  props: {
    type: {
      type: String,
    },
    splitId: {
      type: Number,
      default: false,
    },
    isshow: {
      type: Boolean,
      default: false,
    },
    checkedKeys: {
      type: Object,
    },
  },
  data() {
    return {
      defaultProps: {
        children: "children",
        label: "label",
      },
      treeSearchText: "",
      addlayerdata: [],
      favoriteLayerList: [],
      sharedState: store.state,
      TreeDatas: [
        {
          title: Resource.layerList,
          expand: true,
          //   selected: true,
          //   contextmenu: true,
          children: [],
          type: "ROOT",
        },
      ],
    };
  },
  computed: {
    LayerManageShow: function () {
      return this.$props.splitId
        ? this.$props.isshow
        : this.sharedState.toolBar[0];
    },
  },

  methods: {
    toggleVisibility() {
      this.$props.splitId ? this.$emit("close") : store.setToolBarAction(0);
    },
    setCheckedKeys(keys) {
      this.$refs.tree.setCheckedKeys(keys);
    },
    filterNode(value, data) {
      let addjudge = true;
      if (this.$props.type == "split") {
        addjudge = data.type !== "Terrain";
      } else if (this.$props.type == "roller") {
        addjudge = data.type == "IMG" || data.type == "Vector";
      }
      if (!value) return addjudge;
      return data.label.indexOf(value) !== -1 && addjudge;
    },
    favoriteHandle(data) {
      // this.$emit("favoriteHandle", data);
      if (data.favorite) {
        data.favorite = null;
        for (let i = 0; i < this.favoriteLayerList.length; i++) {
          if (this.favoriteLayerList[i].id == data.id) {
            this.favoriteLayerList.splice(i, 1);
          }
        }
      } else {
        data.favorite = this.username;
        this.favoriteLayerList.push(data);
      }
      Collect(this.username, data.id).then((res) => {
        if (res.statuscode == 200) {
          this.$message({
            message: "操作成功",
            type: "success",
          });
        } else {
          this.$message.error(res.message);
        }
      });
    },
    favorite(data) {
      console.log(data);
    },
    checkboxChange(obj, checked, a) {
      obj.checked = checked;
      this.handleCheckChange(obj, checked);
    },
    visibleChange(obj, visible, a) {
      this.$emit("visibleChange", obj, visible, a);
    },
    transSliderChange(obj, v, a) {
      this.$emit("transSliderChange", obj, v, a);
    },
    // 复选框改变
    handleCheckChange(obj, checked) {
      console.log(obj, checked);
      if (typeof checked == "boolean") {
        obj.checked = checked;
      } else {
        obj.checked = !obj.checked;
      }
      this.$emit("handleCheckChange", obj, checked, this.$props.splitId);
    },

    //获取后台资源目录树结构
    getResourceTree() {
      GetResourceTree().then((res) => {
        if (res.statuscode == 200) {
          this.TreeDatas = res.data;
          store.state.tempResourceTree = res.data;
        } else {
          console.log(e);
        }
      });
    },

    //获取后台资源目录树结构
    getFavoriteLayers() {
      GetMyCollect().then((res) => {
        if (res.statuscode == 200) {
          this.favoriteLayerList = res.data;
        } else {
          console.log(e);
        }
      });
    },
    //图层定位
    location(obj) {
      this.$emit("location", obj);
    },
    //影像图层操作
    raise(obj) {
      this.$emit("raise", obj);
    },
    lower(obj) {
      this.$emit("lower", obj);
    },
  },

  mounted() {
    this.getResourceTree();
    this.getFavoriteLayers();
  },

  watch: {
    treeSearchText(val) {
      this.$refs.tree.filter(val);
    },
    LayerManageShow: {
      handler() {
        if (this.LayerManageShow && this.$props.type) {
          setTimeout(() => {
            if (this.$refs.tree) this.$refs.tree.filter("");
          }, 500);
          // this.$nextTick(() => {
          //   if (this.$refs.tree) this.$refs.tree.filter("");
          // });
        }
      },
      immediate: true,
    },
  },
};
</script>

<style lang="scss">
@import "./LayerManage.scss";
</style>