<template>
|
<dv-full-screen-container>
|
<div class="eqpBox">
|
<div class="eqpRow">
|
<div class="eqpImage" :style="{ 'background-position': position + 'px' }">
|
<eqp-split :num="eqpNum"></eqp-split>
|
<div style="width: 10px"></div>
|
<eqp-split :num="eqpNum2"></eqp-split>
|
|
</div>
|
</div>
|
</div>
|
</dv-full-screen-container>
|
</template>
|
|
<script setup lang="ts">
|
import { useFullscreen } from '@vueuse/core'
|
import { router } from '/@/router'
|
import { onMounted, ref, onUnmounted } from 'vue'
|
|
import { dryEquipment } from '../dataDefine/DryEquipment.data'
|
import EqpSplit from "/@/views/dry/bigScreen/EqpSplit.vue";
|
|
|
const domRef = ref<Nullable<HTMLElement>>(null)
|
const { enter, toggle, exit, isFullscreen } = useFullscreen()
|
|
const { toggle: toggleDom } = useFullscreen(domRef)
|
const position = ref(1)
|
const Timer2 = ref()
|
|
|
console.log(`output->router.currentRoute.value.params.num `, router.currentRoute.value.query)
|
const eqp = ref({} as dryEquipment)
|
const eqpNum = ref(router.currentRoute.value.query.num || 0)
|
const eqpNum2 = ref(parseInt(router.currentRoute.value.query.num) + 1 || 1)
|
|
|
|
var move = true
|
function moveImage() {
|
if (move) {
|
position.value -= 0.3
|
} else {
|
position.value += 0.3
|
}
|
if (position.value < -240) {
|
move = false
|
}
|
if (position.value > -1) {
|
move = true
|
}
|
}
|
|
function back() {
|
router.back()
|
}
|
//queryEqp()
|
// DOM挂载完成后渲染图表
|
onMounted(() => {
|
|
Timer2.value = setInterval(moveImage, 50)
|
})
|
|
onUnmounted(() => {
|
|
clearInterval(Timer2.value)
|
|
Timer2.value = null
|
})
|
</script>
|
|
<style scoped>
|
.eqpBox {
|
height: 100%;
|
}
|
.eqpRow {
|
}
|
.eqpImage {
|
height: 1080px;
|
width: 1920px;
|
background-image: url(/src/assets/images/dry/bg.png);
|
background-repeat: no-repeat;
|
color: white;
|
/*background-position: 160px 280px; */
|
/* background-color: red; */
|
background-size: 120%;
|
padding: 10px;
|
display: flex;
|
flex-wrap: wrap;
|
align-content: flex-start;
|
}
|
|
</style>
|
