左侧伸缩

wulitaotao

2023-02-17 28c88717416f2018c2c79310df72a05749967472

左侧伸缩

 src/components/Screen/left.vue

@@ -60,12 +60,15 @@
      this.ProjectreeDisplay = false;
      this.leftMessage = "init";
      this.OpenLeftInitChart();
      this.$parent.ChangeWidth("leftView");

    },
    //打开工程树
    OpenLeftProjectTree() {
      this.ChartDisplay = false;
      this.ProjectreeDisplay = true;
      this.leftMessage = "projectree";
      this.$parent.ChangeWidth("leftTree");
    },
    //大屏界面图表
    OpenLeftInitChart() {

 src/views/Thematic/index.vue

@@ -3,12 +3,13 @@
    <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>
  </div>
    <right class="mapright" :style="{ width: rightWidth }" ref="mapright"></right>
    <bottom class="mapbottom" ref="mapbottom"></bottom>
</div>
</template>

<script>

import mapsdk from "@/components/Screen/mapsdk.vue"
import top from "../../components/Screen/top.vue"
import left from "@/components/Screen/left.vue"
@@ -24,8 +25,8 @@
      rightWidth: "20%",
    }
  },
  mounted() {},
  created() {},
  mounted() { },
  created() { },
  methods: {
    //修改左侧宽度
    ChangeWidth(parm) {
@@ -36,6 +37,11 @@
          this.leftWidth = "20%"
        }
      }
      debugger;
      if (parm == "leftView" || parm == "leftTree") { this.leftWidth = "20%" }



      if (parm == "right") {
        if (this.rightWidth == "20%") {
          this.rightWidth = "36px"
@@ -55,6 +61,7 @@
  position: absolute;
  display: flex;
}

.title {
  position: absolute;
  top: 0;
@@ -63,6 +70,7 @@
  width: 100%;
  z-index: 999;
}

.mapleft {
  position: absolute;
  top: 90px;
@@ -71,6 +79,7 @@
  height: calc(100% - 180px);
  z-index: 999;
}

.mapright {
  position: absolute;
  top: 90px;
@@ -79,6 +88,7 @@
  height: calc(100% - 180px);
  z-index: 999;
}

.mapbottom {
  position: absolute;
  left: 0;
@@ -86,5 +96,4 @@
  height: 90px;
  width: 100%;
  z-index: 999;
}
</style>
}</style>