<template>
|
<div class="device-number-info">
|
<div class="device-l">
|
<div class="device-t">本机设备编码</div>
|
<div class="device-b">
|
<div class="device-info">
|
{{ deviceInfo?.systemDeviceID }}
|
</div>
|
</div>
|
</div>
|
<div class="device-r">
|
<el-scrollbar always class="scroller">
|
<div class="device-t">云端设备编码</div>
|
<div class="device-b">
|
<div v-for="item in deviceInfo?.deviceList" :key="item.deviceID" class="device-info">
|
<el-popover placement="top" :width="200" trigger="click" :content="item.deviceID">
|
<template #reference>
|
<el-text truncated style="color: #fff; max-width: 100px">{{ item.deviceID }}</el-text>
|
</template>
|
</el-popover>
|
</div>
|
</div>
|
</el-scrollbar>
|
</div>
|
</div>
|
</template>
|
<script setup lang="ts">
|
import { useDevicesStore } from '@/stores/devices'
|
import { storeToRefs } from 'pinia'
|
|
const deviceStore = useDevicesStore()
|
const { deviceInfo } = storeToRefs(deviceStore)
|
</script>
|
|
<style scoped lang="scss">
|
$status-default: #2c5dbb82;
|
$status-running: #00ff00f0;
|
$status-ready: #0059ffd0;
|
$status-border: #ffffff21;
|
$status-dark-font: #efefef;
|
$status-off: red;
|
.device-number-info {
|
width: 100%;
|
height: 180px;
|
margin-top: 20px;
|
color: #fff;
|
overflow: hidden;
|
float: left;
|
text-align: center;
|
font-size: 12px;
|
background: $status-default;
|
border: 1px solid $status-border;
|
box-sizing: border-box;
|
border-radius: 4px;
|
padding: 5px 5px 5px 20px;
|
.device-l {
|
width: 100px;
|
height: 100%;
|
float: left;
|
padding-right: 10px;
|
border-right: 1px solid $status-border;
|
}
|
.device-r {
|
width: calc(100% - 120px);
|
height: 100%;
|
float: right;
|
}
|
.device-t {
|
text-align: left;
|
height: 25px;
|
line-height: 25px;
|
}
|
.device-b {
|
width: 100%;
|
height: calc(100% - 35px);
|
overflow: hidden;
|
}
|
.device-info {
|
padding: 2px 10px;
|
font-size: 14px;
|
line-height: 20px;
|
background: $status-ready;
|
color: #fff;
|
border-radius: 4px;
|
float: left;
|
margin-right: 5px;
|
margin-top: 5px;
|
}
|
}
|
</style>
|
