pms-iot-vue/src/views/pms/stat/rykb.vue

<script setup lang="ts">
import { DESIGN_HEIGHT, DESIGN_WIDTH } from '@/utils/kb'
import rysummary from './rykb/rysummary.vue'
import safeday from './rykb/safeday.vue'
import rydeviceStatus from './rykb/rydeviceStatus.vue'
import zjStatsSwitch from './rykb/zjStatsSwitch.vue'
import xjwork from './rykb/xjwork.vue'
import rydeviceList from './rykb/rydeviceList.vue'
import ryProductionBriefs from './rykb/ryProductionBriefs.vue'
import rydeviceType from './rykb/rydeviceType.vue'

defineOptions({
  name: 'IotRyStatt'
})

const company = ref('瑞鹰')

const wrapperRef = ref<HTMLDivElement>()
const scale = ref(1)

let resizeObserver: ResizeObserver | null = null
let resizeRaf = 0

provide('ryKbScale', scale)

const targetWrapperStyle = computed(() => ({
  width: `${DESIGN_WIDTH * scale.value}px`,
  height: `${DESIGN_HEIGHT * scale.value}px`
}))

const targetAreaStyle = computed(() => {
  return {
    '--kb-scale': scale.value,
    width: `${DESIGN_WIDTH * scale.value}px`,
    height: `${DESIGN_HEIGHT * scale.value}px`
  }
})

function updateScale() {
  cancelAnimationFrame(resizeRaf)

  resizeRaf = requestAnimationFrame(() => {
    const wrapper = wrapperRef.value
    if (!wrapper) return

    const { clientWidth, clientHeight } = wrapper
    if (!clientWidth || !clientHeight) return

    scale.value = Math.min(clientWidth / DESIGN_WIDTH, clientHeight / DESIGN_HEIGHT)
    nextTick(() => {
      window.dispatchEvent(new Event('rykb:resize'))
    })
  })
}

onMounted(() => {
  nextTick(updateScale)
  resizeObserver = new ResizeObserver(updateScale)
  if (wrapperRef.value) {
    resizeObserver.observe(wrapperRef.value)
  }
  window.addEventListener('resize', updateScale)
})

onUnmounted(() => {
  resizeObserver?.disconnect()
  window.removeEventListener('resize', updateScale)
  cancelAnimationFrame(resizeRaf)
})
</script>

<template>
  <div ref="wrapperRef" class="bg absolute top-0 left-0 size-full z-10">
    <div class="mx-a overflow-hidden" :style="targetWrapperStyle">
      <div class="bg kb-screen" :style="targetAreaStyle">
        <header class="header">{{ company }}</header>
        <div class="kb-content">
          <rysummary class="kb-stage-card kb-stage-card--1" />
          <div class="kb-chart-grid">
            <rydeviceStatus class="kb-stage-card kb-stage-card--2" />
            <rydeviceType class="kb-stage-card kb-stage-card--6" />
            <rydeviceList class="kb-stage-card kb-stage-card--4 kb-stage-card--list" />
            <safeday class="kb-stage-card kb-stage-card--3" />
            <zjStatsSwitch class="kb-stage-card kb-stage-card--5" />
            <xjwork class="kb-stage-card kb-stage-card--7" />
          </div>
          <ryProductionBriefs class="kb-stage-card kb-stage-card--8 kb-stage-card--list" />
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
@import url('@/styles/kb.scss');

.kb-screen {
  overflow: hidden;
}

.kb-content {
  padding: calc(12px * var(--kb-scale)) calc(20px * var(--kb-scale)) 0;
}

.kb-chart-grid {
  display: grid;
  width: 100%;
  height: calc(592px * var(--kb-scale));
  margin-top: calc(12px * var(--kb-scale));
  gap: calc(12px * var(--kb-scale));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
</style>