diff --git a/src/components/ScaleScreen/src/ScaleScreen.vue b/src/components/ScaleScreen/src/ScaleScreen.vue index 7ea8bfbf..8cabbae8 100644 --- a/src/components/ScaleScreen/src/ScaleScreen.vue +++ b/src/components/ScaleScreen/src/ScaleScreen.vue @@ -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' diff --git a/src/views/visualization/components/SBYXZT.vue b/src/views/visualization/components/SBYXZT.vue index f9721126..383e4bc1 100644 --- a/src/views/visualization/components/SBYXZT.vue +++ b/src/views/visualization/components/SBYXZT.vue @@ -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 diff --git a/src/views/visualization/index.vue b/src/views/visualization/index.vue index e89f81ce..77274ea4 100644 --- a/src/views/visualization/index.vue +++ b/src/views/visualization/index.vue @@ -10,36 +10,36 @@ >
-
+
- - - - + + + +
-
-
+
+
-
+
-
- - +
+ +
- - - + + +
@@ -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(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(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, } },