| | |
| | | <template> |
| | | <div class="mapViewer"> |
| | | <leftpanel |
| | | ref="Left" |
| | | v-show="false" |
| | | /> |
| | | <bottommenu /> |
| | | <left-menu v-if="queryShow"></left-menu> |
| | | <leftpanel ref="Left" v-show="false" /> |
| | | <viewer class="mapViewer" /> |
| | | <!-- <img id="headlog" src="@/assets/img/new/logo.png" /> --> |
| | | </div> |
| | | </template> |
| | | |
| | | <script> |
| | | import viewer from "@/components/map/viewer"; |
| | | import leftpanel from "@/components/left/index"; |
| | | import bottommenu from "@/components/menu/bottom-menu"; |
| | | import leftMenu from "@/components/menu/leftMenu.vue"; |
| | | import vueEvents from '@/utils/vueEvent.js' |
| | | // import bottommenu from "@/components/menu/bottom-menu"; |
| | | |
| | | export default { |
| | | name: "index", |
| | | components: { |
| | | viewer, |
| | | leftpanel, |
| | | bottommenu, |
| | | leftMenu |
| | | // bottommenu, |
| | | }, |
| | | data() { |
| | | return { |
| | |
| | | offset: "0%", |
| | | tooltipInfo: "请稍后。。。", |
| | | tooltipShow: false, |
| | | queryShow: false, |
| | | }; |
| | | }, |
| | | mounted() { |
| | |
| | | this.scale = (100 / size).toFixed(2); |
| | | this.offset = "-" + ((size - 100) / 2).toFixed(2) + "%"; |
| | | this.size = size + "%"; |
| | | // this.queryShow = rpc.isShow; |
| | | vueEvents.$on('queryLayer', (res) => { |
| | | this.queryShow = res |
| | | }) |
| | | }, |
| | | methods: { |
| | | queryShow(res) { |
| | | this.queryShow = res; |
| | | } |
| | | }, |
| | | watch: { |
| | | }, |
| | | |
| | | watch: {}, |
| | | methods: { |
| | | detectZoom() { |
| | | var ratio = 0, |
| | |
| | | height: 100%; |
| | | } |
| | | #headlog { |
| | | width: 965px; |
| | | height: 70px; |
| | | width: 500px; |
| | | position: absolute; |
| | | left: 50%; |
| | | top: 0; |
| | | transform: translate(-50%, 0); |
| | | } |
| | | #bottomBar { |
| | | width: 1357px; |
| | | height: 52px; |
| | | position: absolute; |
| | | left: 50%; |
| | | bottom: 0; |
| | | transform: translate(-50%, 0); |
| | | } |
| | | .trigger { |
| | | pointer-events: all; |
| | | } |
| | | |
| | | .controlPanel { |
| | | position: absolute; |
| | | left: 0px; |
| | | top: 0px; |
| | | pointer-events: none; |
| | | } |
| | | |
| | | .tooltip { |
| | | position: absolute; |
| | | z-index: 999999; |
| | | color: white; |
| | | width: 100%; |
| | | top: 30px; |
| | | margin: 0 auto; |
| | | font-size: 24px; |
| | | pointer-events: none; |
| | | text-align: center; |
| | | height: 60px; |
| | | transition: all 0.2s linear; |
| | | } |
| | | |
| | | .tooltiphide { |
| | | opacity: 0; |
| | | height: 0px !important; |
| | | } |
| | | |
| | | .tooltip span { |
| | | background-color: rgba(0, 0, 0, 0.6); |
| | | border-radius: 10px; |
| | | padding: 10px 30px; |
| | | } |
| | | .hisbox { |
| | | position: absolute; |
| | | z-index: 10000002; |
| | | width: 100%; |
| | | height: 100%; |
| | | background-color: #fff; |
| | | } |
| | | .btnbox { |
| | | position: absolute; |
| | | z-index: 100000003; |
| | | right: 30px; |
| | | } |
| | | .btnbox .el-button { |
| | | padding: 0 !important; |
| | | font-size: 24px; |
| | | border: unset; |
| | | float: unset; |
| | | display: block; |
| | | background: transparent; |
| | | width: 48px; |
| | | height: 48px; |
| | | border-radius: 50%; |
| | | margin: 1px; |
| | | margin: 20px 0; |
| | | } |
| | | |
| | | .searchBtn { |
| | | width: 40px; |
| | | left: 20px; |
| | | top: 20px; |
| | | } |
| | | </style> |