北京经济技术开发区经开区虚拟城市项目-【前端】-Web
Jin Lei
2023-11-16 deccf053a8e07b82f4cd8b95b3243f4c5f1d2b86
src/components/index.vue
@@ -1,5 +1,13 @@
<template>
  <div class="mapViewer">
    <div class="cacheImage">
    <img style="display: none;" src="@assets/img/new/rightCircle-y.png" alt="" />
    <img style="display: none;" src="@assets/img/new/leftCircle-y.png" alt="" />
    <img style="display: none;" src="@assets/img/new/treeClose-y.png" alt="" />
    <img style="display: none;" src="@assets/img/new/h1.png" alt="" />
  </div>
    <div class="tooltip" :class="{ tooltiphide: !tooltipShow }">
      <span>
        {{ tooltipInfo }}
@@ -11,45 +19,33 @@
          <img class="searchBtn" src="@/assets/img/right/closeinput1.png" />
        </el-button>
      </div>
      <History />
    </div>
    <viewer1
      class="mapViewer"
      v-if="viewer1Show"
      :style="viewer1Style"
      @mousemove.native="viewer1MouseMove"
    />
    <viewer
      class="mapViewer"
      :style="viewerStyle"
      @mousemove.native="viewerMouseMove"
    />
    <div
      class="controlPanel"
      :style="{
        width: `${size}`,
        height: `${size}`,
        transform: `scale(${scale}) translate(${offset},${offset})`,
        '-webkit-transform': `scale(${scale}) translate(${offset},${offset})`,
        '-moz-transform': `scale(${scale}) translate(${offset},${offset})`,
        '-o-transform': `scale(${scale}) translate(${offset},${offset})`,
        '-ms-transform': `scale(${scale}) translate(${offset},${offset})`,
      }"
    >
      <img id="headlog" src="@/assets/img/new/topBar.png" />
    <viewer1 class="mapViewer" :key="switchKey" v-if="viewer1Show" :style="viewer1Style"
      @mousemove.native="viewer1MouseMove" />
    <viewer class="mapViewer" ref="mapViewer" :style="viewerStyle" @mousemove.native="viewerMouseMove" />
    <div class="controlPanel" :style="{
      width: `${size}`,
      height: `${size}`,
      transform: `scale(${scale}) translate(${offset},${offset})`,
      '-webkit-transform': `scale(${scale}) translate(${offset},${offset})`,
      '-moz-transform': `scale(${scale}) translate(${offset},${offset})`,
      '-o-transform': `scale(${scale}) translate(${offset},${offset})`,
      '-ms-transform': `scale(${scale}) translate(${offset},${offset})`,
    }">
      <img @click="changePwd" id="headlog" src="@/assets/img/new/topBar.png" />
      <img id="bottomBar" src="@/assets/img/new/bottomBar.png" />
      <el-slider
      <!-- <el-slider
        class="undergroundAlpha"
        v-if="openUnderGround"
        v-model="undergroundAlpha"
        :show-tooltip="false"
        @input="changeAlpha"
      ></el-slider>
      ></el-slider> -->
      <right ref="Right" />
      <leftpanel ref="Left" />
      <menupanel />
      <bottommenu />
      <bottommenu ref="bottommenu" />
      <setting v-if="showSetting" />
      <qycharts v-if="$store.state.qyEchartsShow" />
    </div>
@@ -70,7 +66,6 @@
import bottommenu from "@/components/menu/bottom-menu";
import { mapState, mapMutations } from "vuex";
import History from "@/components/map/history.vue";
export default {
  name: "index",
@@ -91,7 +86,7 @@
    return {
      date: "",
      undergroundAlpha: 50,
      openUnderGround: false,
      // openUnderGround: false,
      viewerStyle: "",
      viewer1Style: "",
      size: "100%",
@@ -99,6 +94,7 @@
      offset: "0%",
      tooltipInfo: "请稍后。。。",
      tooltipShow: false,
      switchKey: 0,
      // viewer1Show: false,
    };
  },
@@ -109,7 +105,7 @@
    this.size = size + "%";
  },
  computed: {
    ...mapState(["viewer1Show", "yqfk"]),
    ...mapState(["viewer1Show", "isLand", "yqfk"]),
    showSetting() {
      return this.$store.state.showSetting;
    },
@@ -135,6 +131,12 @@
    setMessgae(show, msg) {
      this.tooltipShow = show;
      this.tooltipInfo = msg ? msg : "";
    },
    changePwd() {
      console.log(111);
    },
    changeMode(mode){
      this.$refs.mapViewer.changeMode(mode);
    },
    detectZoom() {
      var ratio = 0,
@@ -234,12 +236,25 @@
      this.$store.commit("showHistory", false);
    },
  },
  beforeDestroy(){
    this.$refs.bottommenu.switchMenu(0);
  },
};
</script>
<style scoped>
.cacheImage{
  display: none !important;
}
.mapViewer {
  height: 100%;
}
.userinfo {
  position: absolute;
  z-index: 20;
  top: 10px;
}
#headlog {
  width: 965px;
  height: 70px;
@@ -248,6 +263,7 @@
  top: 0;
  transform: translate(-50%, 0);
}
#bottomBar {
  width: 1357px;
  height: 52px;
@@ -256,6 +272,7 @@
  bottom: 0;
  transform: translate(-50%, 0);
}
.trigger {
  pointer-events: all;
}
@@ -297,6 +314,7 @@
  border-radius: 10px;
  padding: 10px 30px;
}
.hisbox {
  position: absolute;
  z-index: 10000002;
@@ -304,11 +322,13 @@
  height: 100%;
  background-color: #fff;
}
.btnbox {
  position: absolute;
  z-index: 100000003;
  right: 30px;
}
.btnbox .el-button {
  padding: 0 !important;
  font-size: 24px;