forked from TALL/tall3-pc-keti
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
93 lines
3.0 KiB
93 lines
3.0 KiB
<template>
|
|
<el-card class="pb-4" shadow="hover">
|
|
<el-row :gutter="20">
|
|
<el-col :span="12">
|
|
<div class="text-sm text-gray-400">设备总数</div>
|
|
<div class="text-gray-500 text-4xl mt-1 mb-3">{{ count.total }}</div>
|
|
<div class="line-wrap bg-blue-50">
|
|
<div :style="{ width: `${countPercent.total}` }" class="line bg-blue-300"></div>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<div class="text-sm text-gray-400">正常数量</div>
|
|
<div class="text-gray-500 text-4xl mt-1 mb-3">{{ count.normal }}</div>
|
|
<div class="line-wrap bg-lime-50">
|
|
<div :style="{ width: `${countPercent.normal}` }" class="line bg-lime-300"></div>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="12" class="mt-10">
|
|
<div class="text-sm text-gray-400">离线数量</div>
|
|
<div class="text-gray-500 text-4xl mt-1 mb-3">{{ count.offline }}</div>
|
|
<div class="line-wrap bg-gray-50">
|
|
<div :style="{ width: `${countPercent.offline}` }" class="line bg-gray-300"></div>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="12" class="mt-10">
|
|
<div class="text-sm text-gray-400">报警数量</div>
|
|
<div class="text-gray-500 text-4xl mt-1 mb-3">{{ count.warning }}</div>
|
|
<div class="line-wrap bg-yellow-50">
|
|
<div :style="{ width: `${countPercent.warning}` }" class="line bg-yellow-300"></div>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="12" class="mt-10">
|
|
<div class="text-sm text-gray-400">在线数量</div>
|
|
<div class="text-gray-500 text-4xl mt-1 mb-3">{{ count.online }}</div>
|
|
<div class="line-wrap bg-green-50">
|
|
<div :style="{ width: `${countPercent.online}` }" class="line bg-green-300"></div>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="12" class="mt-10">
|
|
<div class="text-sm text-gray-400">故障数量</div>
|
|
<div class="text-gray-500 text-4xl mt-1 mb-3">{{ count.fault }}</div>
|
|
<div class="line-wrap bg-red-50">
|
|
<div :style="{ width: `${countPercent.fault}` }" class="line bg-red-300"></div>
|
|
</div>
|
|
</el-col>
|
|
</el-row>
|
|
</el-card>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { computed } from 'vue';
|
|
import { useStore } from 'vuex';
|
|
|
|
const store = useStore();
|
|
const count = computed(() => store.state.device.count);
|
|
const countPercent = computed(() => {
|
|
return {
|
|
online: computeWidth(count.value.online),
|
|
offline: computeWidth(count.value.offline),
|
|
warning: computeWidth(count.value.warning),
|
|
fault: computeWidth(count.value.fault),
|
|
total: computeWidth(count.value.total),
|
|
normal: computeWidth(count.value.normal),
|
|
};
|
|
});
|
|
|
|
/**
|
|
* 计算宽度百分比
|
|
* @param {number} itemCount
|
|
* @returns {string}
|
|
*/
|
|
function computeWidth(itemCount) {
|
|
const percent = (itemCount * 100) / count.value.total;
|
|
return `${percent}%`;
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.line-wrap {
|
|
position: relative;
|
|
width: 60%;
|
|
height: 10px;
|
|
border-radius: 5px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.line {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
height: 100%;
|
|
}
|
|
</style>
|
|
|