180 lines
5.0 KiB
Vue
180 lines
5.0 KiB
Vue
<template>
|
|
<ScaleScreen :boxStyle="{ background: '#020603' }" :width="3120" :height="760" :autoScale="true">
|
|
<!-- <div class="overflow-y-scroll"> -->
|
|
<!-- w-3120px h-760px -->
|
|
<div class="flex flex-col h-full bg-img relative">
|
|
<canvas
|
|
class="absolute left-0 top-0 w-full h-full overflow-hidden"
|
|
ref="cavsRef"
|
|
id="canv"
|
|
></canvas>
|
|
<div class="flex flex-col h-full w-full z-100">
|
|
<Head />
|
|
<div class="flex-1 flex justify-between px-20px">
|
|
<div class="flex">
|
|
<div class="grid grid-cols-2 gap-x-10px gap-y-10px">
|
|
<DXJG width="440px" height="353px" />
|
|
<DXCY width="440px" height="353px" />
|
|
<DXLX width="440px" height="353px" />
|
|
<DZWZ width="440px" height="353px" />
|
|
</div>
|
|
</div>
|
|
<div class="flex-1 flex ml-15px justify-between bg-[#03293f] bg-opacity-55">
|
|
<div class="bg-gradient-to-l from-transparent to-[#10272f50]">
|
|
<NYQK />
|
|
<NCZQS class="mt-20px" />
|
|
</div>
|
|
<div class="flex-1">
|
|
<Map />
|
|
</div>
|
|
<div class="bg-gradient-to-r from-transparent to-[#10272f50]">
|
|
<CZNYCY />
|
|
</div>
|
|
</div>
|
|
<div class="flex">
|
|
<div class="mx-16px">
|
|
<JK width="440px" height="387px" />
|
|
<SBYXZT class="mt-16px" width="440px" height="310px" />
|
|
</div>
|
|
<div class="">
|
|
<QXSZ width="440px" height="200px" />
|
|
<SZJCSJ class="mt-11px" width="440px" height="245px" />
|
|
<TRJCSJ class="mt-11px" width="440px" height="245px" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<Footer />
|
|
</div>
|
|
</div>
|
|
<MapModal
|
|
v-model:visible="visibleMapModal"
|
|
:footer="null"
|
|
:baseId="baseId"
|
|
:baseData="baseData"
|
|
/>
|
|
<!-- </div> -->
|
|
</ScaleScreen>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import {
|
|
defineComponent,
|
|
ref,
|
|
onBeforeMount,
|
|
reactive,
|
|
toRefs,
|
|
onMounted,
|
|
onBeforeUnmount,
|
|
} from 'vue'
|
|
import Map from './components/Map.vue'
|
|
import ScaleScreen from '/@/components/ScaleScreen'
|
|
import DXJG from './components/DXJG.vue'
|
|
import DXCY from './components/DXCY.vue'
|
|
import DZWZ from './components/DZWZ.vue'
|
|
import DXLX from './components/DXLX.vue'
|
|
import Head from './components/Head.vue'
|
|
import Footer from './components/Footer.vue'
|
|
import NYQK from './components/NYQK.vue'
|
|
import NCZQS from './components/NCZQS.vue'
|
|
import CZNYCY from './components/CZNYCY.vue'
|
|
import JK from './components/JK.vue'
|
|
import SBYXZT from './components/SBYXZT.vue'
|
|
import QXSZ from './components/QXSZ.vue'
|
|
import SZJCSJ from './components/SZJCSJ.vue'
|
|
import TRJCSJ from './components/TRJCSJ.vue'
|
|
import { Modal } from 'ant-design-vue'
|
|
import MapModal from './MapModal.vue'
|
|
import { createVContext } from './useVContext'
|
|
import mitt from '/@/utils/mitt'
|
|
import Build from './components/cavas'
|
|
// import Am from './components/Star'
|
|
|
|
export default defineComponent({
|
|
components: {
|
|
[Modal.name]: Modal,
|
|
Map,
|
|
ScaleScreen,
|
|
DXJG,
|
|
DXCY,
|
|
DZWZ,
|
|
DXLX,
|
|
NYQK,
|
|
NCZQS,
|
|
CZNYCY,
|
|
JK,
|
|
SBYXZT,
|
|
QXSZ,
|
|
SZJCSJ,
|
|
TRJCSJ,
|
|
Head,
|
|
Footer,
|
|
MapModal,
|
|
},
|
|
setup() {
|
|
const cavsRef = ref<HTMLDivElement | null>(null)
|
|
|
|
const vEmitter = mitt()
|
|
|
|
const obj = reactive({
|
|
baseId: ref(''),
|
|
baseData: reactive({}),
|
|
})
|
|
|
|
createVContext({
|
|
rootEmitter: vEmitter,
|
|
})
|
|
|
|
let timer1: any = null
|
|
let timer2: any = null
|
|
let timer3: any = null
|
|
|
|
const visibleMapModal = ref<boolean>(false)
|
|
onMounted(() => {
|
|
timer1 = setInterval(() => vEmitter.emit('interval:auto'), 1000 * 60)
|
|
timer2 = setInterval(() => vEmitter.emit('interval:tab'), 1000 * 30)
|
|
timer3 = setInterval(() => vEmitter.emit('interval:tab1'), 1000 * 10)
|
|
new Build(cavsRef).run()
|
|
// Am(unref(cavsRef))
|
|
})
|
|
onBeforeMount(() => {
|
|
vEmitter.on('map:click', () => {
|
|
// visibleMapModal.value = true
|
|
})
|
|
vEmitter.on('base:click', (e) => {
|
|
obj.baseId = e.id
|
|
obj.baseData = e
|
|
visibleMapModal.value = true
|
|
})
|
|
})
|
|
|
|
onBeforeUnmount(() => {
|
|
timer1 && clearInterval(timer1)
|
|
timer2 && clearInterval(timer2)
|
|
timer3 && clearInterval(timer3)
|
|
})
|
|
|
|
return {
|
|
cavsRef,
|
|
...toRefs(obj),
|
|
visibleMapModal,
|
|
}
|
|
},
|
|
})
|
|
</script>
|
|
|
|
<style scoped lang="less">
|
|
.bg-img {
|
|
// background-image: url('../../assets/images/map-bg.png') no-repeat;
|
|
// background-position: center;
|
|
background: url('../../assets/images/map-bg.png') no-repeat, #020603;
|
|
background-position: center center;
|
|
background-attachment: scroll;
|
|
background-size: auto 100%;
|
|
}
|
|
|
|
// .bg {
|
|
// background: linear-gradient(90deg, #658eb4 1%, #658eb4 100%);
|
|
// opacity: 0.2;
|
|
// }
|
|
</style>
|