| | |
| | | <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 }} |
| | |
| | | <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})`, |
| | | }" |
| | | > |
| | | <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 |
| | |
| | | :show-tooltip="false" |
| | | @input="changeAlpha" |
| | | ></el-slider> --> |
| | | |
| | | <lefttop ref="lefttop" /> |
| | | <right ref="Right" /> |
| | | <leftpanel ref="Left" /> |
| | | <menupanel /> |
| | | <bottommenu /> |
| | | <bottommenu ref="bottommenu" /> |
| | | <setting v-if="showSetting" /> |
| | | <qycharts v-if="$store.state.qyEchartsShow" /> |
| | | </div> |
| | |
| | | import viewer from "@/components/map/viewer"; |
| | | import viewer1 from "@/components/map/viewer1"; |
| | | // import left from "@/components/left/left"; |
| | | import lefttop from "@/components/left/lefttop"; |
| | | import leftpanel from "@/components/left/index"; |
| | | import right from "@/components/right/right"; |
| | | // import bottom from "@/components/bottom/bottom"; |
| | |
| | | |
| | | import bottommenu from "@/components/menu/bottom-menu"; |
| | | import { mapState, mapMutations } from "vuex"; |
| | | import History from "@/components/map/history.vue"; |
| | | |
| | | export default { |
| | | name: "index", |
| | |
| | | leftpanel, |
| | | right, |
| | | // bottom, |
| | | lefttop, |
| | | yqfk, |
| | | menupanel, |
| | | bottommenu, |
| | |
| | | offset: "0%", |
| | | tooltipInfo: "请稍后。。。", |
| | | tooltipShow: false, |
| | | switchKey: 0, |
| | | // viewer1Show: false, |
| | | }; |
| | | }, |
| | |
| | | this.size = size + "%"; |
| | | }, |
| | | computed: { |
| | | ...mapState(["viewer1Show", "yqfk"]), |
| | | ...mapState(["viewer1Show", "isLand", "yqfk"]), |
| | | showSetting() { |
| | | return this.$store.state.showSetting; |
| | | }, |
| | |
| | | }, |
| | | changePwd() { |
| | | console.log(111); |
| | | }, |
| | | changeMode(mode){ |
| | | this.$refs.mapViewer.changeMode(mode); |
| | | }, |
| | | detectZoom() { |
| | | var ratio = 0, |
| | |
| | | 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; |
| | |
| | | top: 0; |
| | | transform: translate(-50%, 0); |
| | | } |
| | | |
| | | #bottomBar { |
| | | width: 1357px; |
| | | height: 52px; |
| | |
| | | bottom: 0; |
| | | transform: translate(-50%, 0); |
| | | } |
| | | |
| | | .trigger { |
| | | pointer-events: all; |
| | | } |
| | |
| | | border-radius: 10px; |
| | | padding: 10px 30px; |
| | | } |
| | | |
| | | .hisbox { |
| | | position: absolute; |
| | | z-index: 10000002; |
| | |
| | | height: 100%; |
| | | background-color: #fff; |
| | | } |
| | | |
| | | .btnbox { |
| | | position: absolute; |
| | | z-index: 100000003; |
| | | right: 30px; |
| | | } |
| | | |
| | | .btnbox .el-button { |
| | | padding: 0 !important; |
| | | font-size: 24px; |