disinfector_vue/src/components/setting/Device.vue

<script lang="ts" setup>
import { useDeviceStore } from 'stores/deviceStore'
import { ref } from 'vue'

const deviceStore = useDeviceStore()
const deviceInfo = ref(deviceStore.deviceInfo)
const screenInfo = {
  width: window.innerWidth, // 屏幕宽度（逻辑像素）
  height: window.innerHeight, // 屏幕高度（逻辑像素）
  availWidth: window.screen.availWidth, // 可用宽度（排除任务栏等）
  availHeight: window.screen.availHeight, // 可用高度
  pixelRatio: window.devicePixelRatio, // 设备像素比（物理像素/逻辑像素）
  colorDepth: window.screen.colorDepth, // 颜色深度
}
const width = Math.floor(screenInfo.width * screenInfo.pixelRatio)
const height = Math.floor(screenInfo.height * screenInfo.pixelRatio)
const screenWidth = ref(width)
const screenHeight = ref(height)
</script>

<template>
  <div>
    <div class="device-ul">
      <div>设备ID：{{ deviceInfo.deviceId }}</div>
    </div>
    <div class="device-ul">
      <div>设备类型：{{ deviceInfo.deviceType }}</div>
    </div>
    <div class="device-ul">
      <div>IP地址：{{ deviceInfo.ip }}</div>
    </div>
    <div class="device-ul">
      <div>初始化状态：{{ deviceInfo.deviceTypeInited ? '已初始化' : '未初始化' }}</div>
    </div>
    <div class="device-ul">
      <div>设备屏幕尺寸：{{ screenWidth }} x {{ screenHeight }}</div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.device-ul{
  background: #F6FAFE;
  height: 4rem;
  display: flex;
  align-items: center;
  width: 100%;
  border-radius: 10px;
  margin-top: 1rem;
  padding-left: 2rem;
  font-size: 1.5rem;
}
</style>