zhouhui
/
lcny-vue3-antd-admin
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

修改小屏

new-map
ihzero 2022-11-21 18:53:15 +08:00
parent d408d1a397
commit 6a8af57565
3 changed files with 47 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/components/ScaleScreen/src/ScaleScreen.vue
View File

@ -186,7 +186,8 @@
const updateScale = () => { const updateScale = () => {
// 获取真实视口尺寸 // 获取真实视口尺寸
const currentWidth = document.body.clientWidth 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 realWidth = state.width || state.originalWidth
const realHeight = state.height || state.originalHeight const realHeight = state.height || state.originalHeight
@ -203,7 +204,7 @@
if (currentWidth < 3000) { if (currentWidth < 3000) {
scale = heightScale scale = heightScale
state.isScroll = true state.isScroll = true
styles.box.overflow = 'auto' styles.box['overflow-x'] = 'auto'
} else { } else {
state.isScroll = false state.isScroll = false
styles.box.overflow = 'hidden' styles.box.overflow = 'hidden'

9
src/views/visualization/components/SBYXZT.vue
View File

@ -83,21 +83,25 @@
name: 'AI智能监控', name: 'AI智能监控',
value: [0, 0, 0], value: [0, 0, 0],
img: d01, img: d01,
key: 1,
}, },
{ {
name: '水质监测', name: '水质监测',
value: [0, 0, 0], value: [0, 0, 0],
img: d02, img: d02,
key: 3,
}, },
{ {
name: '土壤监测', name: '土壤监测',
value: [0, 0, 0], value: [0, 0, 0],
img: d03, img: d03,
key: 2,
}, },
{ {
name: '气象监测', name: '气象监测',
value: [0, 0, 0], value: [0, 0, 0],
img: d04, img: d04,
key: 4,
}, },
] ]
@ -159,8 +163,9 @@
base_id: props.baseId ?? (Data.currentTab == -99 ? null : Data.currentTab), base_id: props.baseId ?? (Data.currentTab == -99 ? null : Data.currentTab),
parent: visualizationStore.getAddresId, parent: visualizationStore.getAddresId,
}) })
Object.keys(resData).map((e, index) => { Object.keys(resData).map((e) => {
Data.list[index].value = resData[e].slice(1) const zindex = Data.list.findIndex(({ key }: any) => key == e)
Data.list[zindex].value = resData[e].slice(1)
}) })
} }
let timerTabIndex = 1 let timerTabIndex = 1

52
src/views/visualization/index.vue
View File

@ -10,36 +10,36 @@
></canvas> ></canvas>
<div class="flex flex-col h-full w-full z-100"> <div class="flex flex-col h-full w-full z-100">
<Head /> <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="flex">
<div class="grid grid-cols-2 gap-x-10px gap-y-10px"> <div class="grid grid-cols-2 gap-x-10px gap-y-10px">
<DXJG width="440px" height="353px" /> <DXJG :width="`${addW + 440}px`" height="353px" />
<DXCY width="440px" height="353px" /> <DXCY :width="`${addW + 440}px`" height="353px" />
<DXLX width="440px" height="353px" /> <DXLX :width="`${addW + 440}px`" height="353px" />
<DZWZ width="440px" height="353px" /> <DZWZ :width="`${addW + 440}px`" height="353px" />
</div> </div>
</div> </div>
<div class="flex-1 flex ml-15px justify-between bg-[#03293f] bg-opacity-55"> <div class="flex-1 flex mx-10px justify-between bg-[#03293f] bg-opacity-55">
<div class="bg-gradient-to-l from-transparent to-[#10272f50]"> <div class="bg-gradient-to-l from-transparent to-[#10272f50] px-10px">
<NYQK /> <NYQK />
<NCZQS class="mt-20px" /> <NCZQS class="mt-20px" />
</div> </div>
<div class="flex-1"> <div class="flex-1">
<Map /> <Map />
</div> </div>
<div class="bg-gradient-to-r from-transparent to-[#10272f50]"> <div class="bg-gradient-to-r from-transparent to-[#10272f50] px-10px">
<CZNYCY /> <CZNYCY />
</div> </div>
</div> </div>
<div class="flex"> <div class="flex">
<div class="mx-16px"> <div class="mr-10px">
<JK width="440px" height="387px" /> <JK :width="`${addW + 440}px`" height="390px" />
<SBYXZT class="mt-16px" width="440px" height="310px" /> <SBYXZT class="mt-10px" :width="`${addW + 440}px`" height="314px" />
</div> </div>
<div class=""> <div class="">
<QXSZ width="440px" height="200px" /> <QXSZ :width="`${addW + 440}px`" height="204px" />
<SZJCSJ class="mt-11px" width="440px" height="245px" /> <SZJCSJ class="mt-10px" :width="`${addW + 440}px`" height="245px" />
<TRJCSJ class="mt-11px" width="440px" height="245px" /> <TRJCSJ class="mt-10px" :width="`${addW + 440}px`" height="245px" />
</div> </div>
</div> </div>
</div> </div>
@ -90,6 +90,8 @@
import dayjs from 'dayjs' import dayjs from 'dayjs'
import { getWarningLogs } from '/@/api/sys/user' import { getWarningLogs } from '/@/api/sys/user'
import { notification } from 'ant-design-vue' import { notification } from 'ant-design-vue'
import { debounce } from 'lodash-es'
import { computed } from '@vue/reactivity'
// import Am from './components/Star' // import Am from './components/Star'
const initTime = dayjs().format('YYYY-MM-DD HH:mm:ss') const initTime = dayjs().format('YYYY-MM-DD HH:mm:ss')
localStorage.removeItem('warning_id') localStorage.removeItem('warning_id')
@ -116,7 +118,7 @@
}, },
setup() { setup() {
const cavsRef = ref<HTMLDivElement | null>(null) const cavsRef = ref<HTMLDivElement | null>(null)
const isScroll = ref(false)
const vEmitter = mitt() const vEmitter = mitt()
const obj = reactive({ const obj = reactive({
@ -124,6 +126,8 @@
baseData: reactive({}), baseData: reactive({}),
}) })
const addW = computed(() => (isScroll.value ? 10 : 0))
async function getWarning() { async function getWarning() {
const ids = localStorage.getItem('warning_id')?.split(',') ?? [] const ids = localStorage.getItem('warning_id')?.split(',') ?? []
const { data } = await getWarningLogs({ per_page: 10, page: 1, start_time: initTime }) 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({ createVContext({
rootEmitter: vEmitter, rootEmitter: vEmitter,
}) })
@ -169,6 +186,9 @@
const visibleMapModal = ref<boolean>(false) const visibleMapModal = ref<boolean>(false)
onMounted(() => { onMounted(() => {
updateSize()
window.addEventListener('resize', onResize)
timer1 = setInterval(() => { timer1 = setInterval(() => {
getWarning() getWarning()
vEmitter.emit('interval:auto') vEmitter.emit('interval:auto')
@ -200,6 +220,8 @@
return { return {
cavsRef, cavsRef,
...toRefs(obj), ...toRefs(obj),
addW,
isScroll,
visibleMapModal, visibleMapModal,
} }
}, },