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

<template>
  <div
    :class="$props.type == 'share' ? '' : 'sm-panel'"
    v-show="LayerManageShow"
    v-drag
  >
    <div class="sm-panel-header" v-if="$props.type != 'share'">
      <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 >= 0 ? `zymlsplit` : ''">
          <div :class="$props.type == 'share' ? 'headerSearch' : 'searchDiv'">
            <el-date-picker
              placeholder="数据年份"
              v-model="treeYearText"
              type="year"
              format="yyyy"
              value-format="yyyy"
              popper-class="myDatePicker"
              v-if="$props.type == 'share'"
              size="small"
            ></el-date-picker>
            <el-input
              :placeholder="Resource.InputPlaceholder"
              prefix-icon="el-icon-search"
              v-model="treeSearchText"
              size="small"
            >
            </el-input>
            <div
              class="eicon"
              :class="isshowNum ? 'eyes' : 'close_eyes'"
              @click="isshowNum = !isshowNum"
            ></div>
          </div>
          <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>{{
                  !isshowNum && !data.url && node.label
                    ? node.label.replace(/\[.*$/, "")
                    : node.label
                }}</span>
                <span>
                  <i
                    class="el-icon-share"
                    v-if="data.url != '' && $props.type == 'share'"
                    @click="showDetail(data)"
                  ></i>
                  <Icon
                    :type="!data.favorite ? 'ios-star-outline' : 'ios-star'"
                    color="green"
                    size="18"
                    class="ivu-icon"
                    :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 == -1 || $props.type == 'share'"
      >
        <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" v-if="$props.type != 'share'">
        <div class="collect" :class="$props.splitId >= 0 ? `collectsplit` : ''">
          <List split>
            <ListItem
              v-for="(item, index) in favoriteLayerList"
              :key="index"
              class="layerlist"
            >
              <Checkbox
                @on-change="checkboxChange(item, $event)"
                v-model="item.checked"
                >{{ 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,
  GetShareTree,
  GetMyCollect,
} from "@/api/map";
import { Getservicetype } from "@/views/ResourceShare/myApplication/config.js";
export default {
  name: "LayerManageSplit",
  props: {
    type: {
      type: String,
    },
    splitId: {
      type: Number,
      default: -1,
    },
    isshow: {
      type: Boolean,
      default: false,
    },
    checkedKeys: {
      type: Object,
    },
    addlayerdata: {
      type: Array,
    },
  },
  data() {
    return {
      addlayerdata: [], //用于双向绑定
      defaultProps: {
        children: "children",
        label: "label",
      },
      treeSearchText: "",
      treeYearText:"",
      favoriteLayerList: [],
      sharedState: store.state,
      TreeDatas: [
        {
          title: Resource.layerList,
          expand: true,
          //   selected: true,
          //   contextmenu: true,
          children: [],
          type: "ROOT",
        },
      ],
      isshowNum: false,
    };
  },
  computed: {
    LayerManageShow: function () {
      return this.$props.splitId != -1
        ? this.$props.isshow
        : this.sharedState.toolBar[0];
    },
  },

  methods: {
    async showDetail(data) {
      console.log(data, "woshidata");
      let serverTypeList = await Getservicetype();
      serverTypeList.forEach((ty) => {
        if (data.type == ty.dictValue) {
          data.type = ty.dictLabel;
        }
      });
      console.log(data.serverType, "data.serverType");
      this.$emit("updateParent", "isShowService", true);
      this.$emit("updateParent", "detailObj", data);
    },
    toggleVisibility() {
      this.$props.splitId != -1
        ? 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) >= 0 && addjudge;
    },
    favoriteHandle(data) {
      if (data.favorite) {
        data.favorite = false;
        for (let i = 0; i < this.favoriteLayerList.length; i++) {
          if (this.favoriteLayerList[i].id == data.id) {
            this.favoriteLayerList.splice(i, 1);
          }
        }
      } else {
        data.favorite = true;
        this.favoriteLayerList.push(data);
      }
      Collect(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;
      //将收藏中被勾选的数据在资源目录中勾选
      let arrData = [];
      for (let i = 0; i < this.favoriteLayerList.length; i++) {
        if (this.favoriteLayerList[i].checked) {
          arrData.push(this.favoriteLayerList[i].id);
        }
      }
      this.$refs.tree.setCheckedKeys(arrData);
      this.handleCheckChange(obj, checked);
    },
    visibleChange(obj, visible, a) {
      this.$emit("visibleChange", obj, visible, a);
    },
    transSliderChange(obj, v, a) {
      this.$emit("transSliderChange", obj, v, a);
    },
    getCheckedNodes() {
      if (this.$props.splitId < 0) {
        //是否只是叶子节点
        let checks = this.$refs.tree.getCheckedNodes(true);
        store.setcheckedTreeNode(checks);
      }
    },
    // 复选框改变
    handleCheckChange(obj, checked) {
      this.getCheckedNodes();
      if (typeof checked == "boolean") {
        obj.checked = checked;
        //添加资源目录与个人收藏来回勾选的状态判断
      } else if (obj.checked && checked.checkedKeys.indexOf(obj.id) >= 0) {
        obj.checked = obj.checked;
      } else {
        obj.checked = !obj.checked;
      }
      //资源目录树选中状态改变,修改个人收藏中的目录页
      this.favoriteLayerList.forEach((item) => {
        if (item.id == obj.id) {
          item.checked = obj.checked;
        }
      });
      this.$emit("handleCheckChange", obj, checked, this.$props.splitId);
    },
    setDisabledIfChildrenExist(node) {
      if (node.children && node.children.length > 0) {
        node.disabled = true;
      }

      // 递归遍历子节点
      if (node.children) {
        node.children.forEach((child) => {
          this.setDisabledIfChildrenExist(child);
        });
      }
    },
    //获取后台资源目录树结构
    getResourceTree() {
      if (this.$props.type == "share") {
        this.getShareTree();
      } else {
        GetResourceTree().then((res) => {
          if (res.statuscode == 200) {
            // 从根节点开始递归
            res.data.forEach((rootNode) => {
              this.setDisabledIfChildrenExist(rootNode);
            });
            this.TreeDatas = res.data;
            store.state.tempResourceTree = res.data;
          } else {
            console.log(res);
          }
        });
      }
    },
    getShareTree() {
      GetShareTree().then((res) => {
        if (res.statuscode == 200) {
          // 从根节点开始递归
          res.data.forEach((rootNode) => {
            this.setDisabledIfChildrenExist(rootNode);
          });
          this.TreeDatas = res.data;
          store.state.tempResourceTree = res.data;
        } else {
          console.log(res);
        }
      });
    },

    //获取后台资源目录树结构
    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.getShareTree();
    this.getFavoriteLayers();
  },

  watch: {
    treeSearchText(val) {
      this.$refs.tree.filter(val);
    },
    treeYearText(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,
    },
    addlayerdata(val) {
      this.addlayerdata = val;
    },
  },
};
</script>

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

.searchDiv {
  display: flex;
  justify-content: space-between;
  margin-right: 10px;

  .el-input {
    width: calc(100% - 30px);
  }
}
.headerSearch {
  display: flex;
  justify-content: space-between;
  margin-right: 10px;

  .el-input {
    width: 48%;
  }
  /deep/ .el-input--small .el-input__inner {
    color: white !important;
    background: rgba(100, 218, 255, 0.1);
    border-radius: 2px 10px 2px 10px;
    border-color: #5ecef09a;
  }
}
// .headerSearch {
//   /deep/ .el-form-item{
//   //   display: flex;
//   // justify-content: space-between;
//   margin-bottom: 0px;
//   }
//   /deep/ .el-input{
//     width: 90%;
//   }
//   /deep/ .el-date-picker .el-picker-panel__body .el-year-table td{
//     color: #fff !important;
//   }
//   /deep/ .el-year-table td .cell{
//     color: #fff !important;
//   }
//   /deep/ .el-date-picker__header-label{
//     color: #fff !important;
//   }
//   /deep/ .el-picker-panel__icon-btn{
//     color: #fff !important;
//   }
// }
</style>