101 lines
2.2 KiB
Vue
101 lines
2.2 KiB
Vue
<script lang="ts" name="AreaDevices" setup>
|
|
import {ref} from 'vue';
|
|
import {ElProgress} from 'element-plus';
|
|
|
|
|
|
const props = defineProps<{
|
|
total: number,
|
|
items: Array<{ count: number, name: string, percent: number }>
|
|
}>()
|
|
const list = computed(() => {
|
|
return props.items.map(item => {
|
|
return {
|
|
areaName: item.name,
|
|
num: item.count,
|
|
percent: item.percent,
|
|
}
|
|
})
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div class="Box">
|
|
<div class="NavBox">
|
|
<div class="TypeNavBox">区域设备分布</div>
|
|
<div class="subTypeNavBox">共 {{ props.total }} 台在线设备</div>
|
|
</div>
|
|
<div class="ChartBox">
|
|
<div v-for="(item,index) in list" :key="index" style="margin-bottom: 18px">
|
|
<div class="flex justify-between progressInfo">
|
|
<div>{{ item.areaName }}</div>
|
|
<div class="flex">
|
|
<div class="num">{{ item.num }}台</div>
|
|
<div class="percent">{{ item.percent }}%</div>
|
|
</div>
|
|
</div>
|
|
<el-progress :percentage="item.percent" :show-text="false"/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
.Box {
|
|
padding: 25px;
|
|
height: 372px;
|
|
border-radius: 16px 16px 16px 16px;
|
|
border: 1px solid rgba(238, 240, 243, 1);
|
|
|
|
.NavBox {
|
|
height: 36px;
|
|
margin-bottom: 20px;
|
|
|
|
.TypeNavBox {
|
|
height: 22px;
|
|
line-height: 22px;
|
|
border-radius: 0;
|
|
background-color: rgba(0, 0, 0, 0);
|
|
color: rgba(17, 24, 39, 1);
|
|
font-size: 16px;
|
|
}
|
|
|
|
.subTypeNavBox {
|
|
height: 16px;
|
|
line-height: 16px;
|
|
border-radius: 0;
|
|
background-color: rgba(0, 0, 0, 0);
|
|
color: rgba(156, 163, 175, 1);
|
|
font-size: 12px;
|
|
}
|
|
}
|
|
|
|
.ChartBox {
|
|
height: 310px;
|
|
overflow-y: auto;
|
|
|
|
.progressInfo {
|
|
margin-bottom: 8px;
|
|
|
|
.num {
|
|
height: 16px;
|
|
line-height: 16px;
|
|
border-radius: 0;
|
|
background-color: rgba(0, 0, 0, 0);
|
|
color: rgba(156, 163, 175, 1);
|
|
font-size: 13px;
|
|
text-align: left;
|
|
}
|
|
|
|
.percent {
|
|
margin-left: 12px;
|
|
height: 16px;
|
|
line-height: 16px;
|
|
background-color: rgba(0, 0, 0, 0);
|
|
color: rgba(17, 24, 39, 1);
|
|
font-size: 13px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|