代码更新

surprise

2024-05-09 e897fc3d35f8e5dfa56d5f0c80a655ccf99202cf

 src/views/Thematic/index.vue

@@ -1,14 +1,20 @@
<template>
  <div class="themaic">
    <mapsdk></mapsdk>
    <top class="title" ref="title"></top>
    <left class="mapleft" :style="{ width: leftWidth }" ref="mapleft"></left>
    <right
      class="mapright"
      :style="{ width: rightWidth }"
      ref="mapright"
    ></right>
    <bottom class="mapbottom" ref="mapbottom"></bottom>
    <top class="title"
         ref="title"></top>
    <left class="mapleft"
          :style="{ width: leftWidth, left: leftWidth == '22%' ? '-19px' : '0' }"
          ref="mapleft"></left>

    <project-tree class="project-tree"
                  v-show="ProjectreeDisplay"></project-tree>

    <right class="mapright"
           :style="{ width: rightWidth }"
           ref="mapright"></right>
    <bottom class="mapbottom"
            ref="mapbottom"></bottom>
  </div>
</template>

@@ -18,37 +24,54 @@
import left from "@/components/Screen/left.vue"
import right from "../../components/Screen/right.vue"
import bottom from "../../components/Screen/bottom.vue"

import ProjectTree from "../../components/Screen/ProjectTree.vue"
import axios from "axios"
export default {
  components: { mapsdk, top, left, right, bottom },
  data() {
  components: { mapsdk,top,left,right,bottom,ProjectTree },
  data () {
    return {
      leftWidth: "20%",
      rightWidth: "20%",
      leftWidth: "22%",
      rightWidth: "22%",
      leftTree: false,
      currTree: false,
      ProjectreeDisplay: false,
    }
  },
  mounted() {},
  created() {},
  mounted () {

  },
  created () {
    this.$bus.$on("changeTree",key => {
      this.ProjectreeDisplay=key
    })
  },
  methods: {
    //修改左侧宽度
    ChangeWidth(parm) {
      if (parm == "left") {
        if (this.leftWidth == "20%") {
          this.leftWidth = "36px"
    ChangeWidth (parm) {
      if(parm=="left") {
        if(this.leftWidth=="22%") {
          this.leftWidth="8px"
        } else {
          this.leftWidth = "20%"
          this.leftWidth="22%"
        }
      }
      if (parm == "leftView" || parm == "leftTree") {
        this.leftWidth = "20%"
      }

      if (parm == "right") {
        if (this.rightWidth == "20%") {
          this.rightWidth = "36px"
      if(parm=="leftView"||parm=="leftTree") {
        this.leftWidth="22%"
        this.rightWidth="22%"
      }
      // if (parm == "leftView") {
      //   this.leftTree = false
      // }
      // if (parm == "leftTree") {
      //   this.leftTree = true
      // }

      if(parm=="right") {
        if(this.rightWidth=="22%") {
          this.rightWidth="45px"
        } else {
          this.rightWidth = "20%"
          this.rightWidth="22%"
        }
      }
    },
@@ -85,7 +108,7 @@
.mapright {
  position: absolute;
  top: 90px;
  right: 0px;
  right: -20px;
  // width: 20%;
  height: calc(100% - 180px);
  z-index: 999;
@@ -99,6 +122,14 @@
  width: 100%;
  z-index: 999;
}
.project-tree {
  position: absolute;
  top: 90px;
  right: 22%;
  width: 15%;
  height: calc(100% - 180px);
  z-index: 999;
}
</style>

<style lang="less">