修改小屏
parent
d408d1a397
commit
6a8af57565
|
|
@ -186,7 +186,8 @@
|
|||
const updateScale = () => {
|
||||
// 获取真实视口尺寸
|
||||
const currentWidth = document.body.clientWidth
|
||||
const currentHeight = document.body.clientHeight
|
||||
let currentHeight = document.body.clientHeight
|
||||
if (currentWidth < 3000) currentHeight = currentHeight - 10
|
||||
// 获取大屏最终的宽高
|
||||
const realWidth = state.width || state.originalWidth
|
||||
const realHeight = state.height || state.originalHeight
|
||||
|
|
@ -203,7 +204,7 @@
|
|||
if (currentWidth < 3000) {
|
||||
scale = heightScale
|
||||
state.isScroll = true
|
||||
styles.box.overflow = 'auto'
|
||||
styles.box['overflow-x'] = 'auto'
|
||||
} else {
|
||||
state.isScroll = false
|
||||
styles.box.overflow = 'hidden'
|
||||
|
|
|
|||
|
|
@ -83,21 +83,25 @@
|
|||
name: 'AI智能监控',
|
||||
value: [0, 0, 0],
|
||||
img: d01,
|
||||
key: 1,
|
||||
},
|
||||
{
|
||||
name: '水质监测',
|
||||
value: [0, 0, 0],
|
||||
img: d02,
|
||||
key: 3,
|
||||
},
|
||||
{
|
||||
name: '土壤监测',
|
||||
value: [0, 0, 0],
|
||||
img: d03,
|
||||
key: 2,
|
||||
},
|
||||
{
|
||||
name: '气象监测',
|
||||
value: [0, 0, 0],
|
||||
img: d04,
|
||||
key: 4,
|
||||
},
|
||||
]
|
||||
|
||||
|
|
@ -159,8 +163,9 @@
|
|||
base_id: props.baseId ?? (Data.currentTab == -99 ? null : Data.currentTab),
|
||||
parent: visualizationStore.getAddresId,
|
||||
})
|
||||
Object.keys(resData).map((e, index) => {
|
||||
Data.list[index].value = resData[e].slice(1)
|
||||
Object.keys(resData).map((e) => {
|
||||
const zindex = Data.list.findIndex(({ key }: any) => key == e)
|
||||
Data.list[zindex].value = resData[e].slice(1)
|
||||
})
|
||||
}
|
||||
let timerTabIndex = 1
|
||||
|
|
|
|||
|
|
@ -10,36 +10,36 @@
|
|||
></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-1 flex justify-between" :class="isScroll ? 'px-14px' : 'px-10px'">
|
||||
<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" />
|
||||
<DXJG :width="`${addW + 440}px`" height="353px" />
|
||||
<DXCY :width="`${addW + 440}px`" height="353px" />
|
||||
<DXLX :width="`${addW + 440}px`" height="353px" />
|
||||
<DZWZ :width="`${addW + 440}px`" 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]">
|
||||
<div class="flex-1 flex mx-10px justify-between bg-[#03293f] bg-opacity-55">
|
||||
<div class="bg-gradient-to-l from-transparent to-[#10272f50] px-10px">
|
||||
<NYQK />
|
||||
<NCZQS class="mt-20px" />
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<Map />
|
||||
</div>
|
||||
<div class="bg-gradient-to-r from-transparent to-[#10272f50]">
|
||||
<div class="bg-gradient-to-r from-transparent to-[#10272f50] px-10px">
|
||||
<CZNYCY />
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex">
|
||||
<div class="mx-16px">
|
||||
<JK width="440px" height="387px" />
|
||||
<SBYXZT class="mt-16px" width="440px" height="310px" />
|
||||
<div class="mr-10px">
|
||||
<JK :width="`${addW + 440}px`" height="390px" />
|
||||
<SBYXZT class="mt-10px" :width="`${addW + 440}px`" height="314px" />
|
||||
</div>
|
||||
<div class="">
|
||||
<QXSZ width="440px" height="200px" />
|
||||
<SZJCSJ class="mt-11px" width="440px" height="245px" />
|
||||
<TRJCSJ class="mt-11px" width="440px" height="245px" />
|
||||
<QXSZ :width="`${addW + 440}px`" height="204px" />
|
||||
<SZJCSJ class="mt-10px" :width="`${addW + 440}px`" height="245px" />
|
||||
<TRJCSJ class="mt-10px" :width="`${addW + 440}px`" height="245px" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -90,6 +90,8 @@
|
|||
import dayjs from 'dayjs'
|
||||
import { getWarningLogs } from '/@/api/sys/user'
|
||||
import { notification } from 'ant-design-vue'
|
||||
import { debounce } from 'lodash-es'
|
||||
import { computed } from '@vue/reactivity'
|
||||
// import Am from './components/Star'
|
||||
const initTime = dayjs().format('YYYY-MM-DD HH:mm:ss')
|
||||
localStorage.removeItem('warning_id')
|
||||
|
|
@ -116,7 +118,7 @@
|
|||
},
|
||||
setup() {
|
||||
const cavsRef = ref<HTMLDivElement | null>(null)
|
||||
|
||||
const isScroll = ref(false)
|
||||
const vEmitter = mitt()
|
||||
|
||||
const obj = reactive({
|
||||
|
|
@ -124,6 +126,8 @@
|
|||
baseData: reactive({}),
|
||||
})
|
||||
|
||||
const addW = computed(() => (isScroll.value ? 10 : 0))
|
||||
|
||||
async function getWarning() {
|
||||
const ids = localStorage.getItem('warning_id')?.split(',') ?? []
|
||||
const { data } = await getWarningLogs({ per_page: 10, page: 1, start_time: initTime })
|
||||
|
|
@ -159,6 +163,19 @@
|
|||
})
|
||||
}
|
||||
|
||||
const updateSize = () => {
|
||||
const currentWidth = document.body.clientWidth
|
||||
if (currentWidth < 3000) {
|
||||
isScroll.value = true
|
||||
} else {
|
||||
isScroll.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const onResize = debounce(() => {
|
||||
updateSize()
|
||||
}, 500)
|
||||
|
||||
createVContext({
|
||||
rootEmitter: vEmitter,
|
||||
})
|
||||
|
|
@ -169,6 +186,9 @@
|
|||
|
||||
const visibleMapModal = ref<boolean>(false)
|
||||
onMounted(() => {
|
||||
updateSize()
|
||||
window.addEventListener('resize', onResize)
|
||||
|
||||
timer1 = setInterval(() => {
|
||||
getWarning()
|
||||
vEmitter.emit('interval:auto')
|
||||
|
|
@ -200,6 +220,8 @@
|
|||
return {
|
||||
cavsRef,
|
||||
...toRefs(obj),
|
||||
addW,
|
||||
isScroll,
|
||||
visibleMapModal,
|
||||
}
|
||||
},
|
||||
|
|
|
|||
Loading…
Reference in New Issue