49 lines
1.0 KiB
Vue
49 lines
1.0 KiB
Vue
|
<script setup lang="ts">
|
||
|
|
const items = [{
|
||
|
|
title: '人员统计',
|
||
|
|
value: 'people',
|
||
|
|
}, {
|
||
|
|
title: '设备统计',
|
||
|
|
value: 'equipment',
|
||
|
|
}, {
|
||
|
|
title: '能耗统计',
|
||
|
|
value: 'energy',
|
||
|
|
}]
|
||
|
|
|
||
|
|
const selected = ref(0)
|
||
|
|
|
||
|
|
function change(value: number) {
|
||
|
|
selected.value = value
|
||
|
|
}
|
||
|
|
|
||
|
|
const digital = [
|
||
|
|
{
|
||
|
|
title: '员工',
|
||
|
|
value: 245,
|
||
|
|
icon: 'solar:adhesive-plaster-line-duotone',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: '安保',
|
||
|
|
value: 245,
|
||
|
|
icon: 'solar:adhesive-plaster-line-duotone',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: '访客',
|
||
|
|
value: 245,
|
||
|
|
icon: 'solar:adhesive-plaster-line-duotone',
|
||
|
|
},
|
||
|
|
]
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<FrameV1 title="人测统计">
|
||
|
|
<div class="space-y-4 ">
|
||
|
|
<TabsV2 v-model:model-value="selected" :items="items" :selected="selected" :change="change" />
|
||
|
|
<DigitalV4 title="园区现有总人数" :value="4555" unit="人" icon="solar:adhesive-plaster-line-duotone" />
|
||
|
|
<div class="flex justify-between">
|
||
|
|
<DigitalV5 v-for="item in digital" :key="item.title" v-bind="item" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</FrameV1>
|
||
|
|
</template>
|