97 lines
1.8 KiB
Vue
97 lines
1.8 KiB
Vue
|
<template>
|
||
|
|
<div class="leftTop">
|
||
|
|
<Card title="智能设备">
|
||
|
|
<div class="deviceData">
|
||
|
|
<div class="deviceDataA">
|
||
|
|
<div class="num">
|
||
|
|
<i>{{ statisticsCount.devcount.ufaceDevNum || 0 }}</i>
|
||
|
|
</div>
|
||
|
|
<div class="text">实名制设备数</div>
|
||
|
|
</div>
|
||
|
|
<div class="deviceDataB">
|
||
|
|
<div class="num">
|
||
|
|
<i>{{ statisticsCount.devcount.environmentDevNum || 0 }}</i>
|
||
|
|
</div>
|
||
|
|
<div class="text">环境设备数</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</Card>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup lang="ts">
|
||
|
|
import Card from "@/components/card.vue";
|
||
|
|
import { ref, onMounted, watch } from "vue";
|
||
|
|
// ts
|
||
|
|
type Props = {
|
||
|
|
statisticsCount?: any; // 传入人员数据
|
||
|
|
};
|
||
|
|
// withDefaults 定义默认值(传入的数据类型同默认值)
|
||
|
|
const props = withDefaults(defineProps<Props>(), {
|
||
|
|
statisticsCount: {
|
||
|
|
devcount: {}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
// 人员概况数据
|
||
|
|
const statisticsCount = ref({
|
||
|
|
devcount: {}
|
||
|
|
} as any);
|
||
|
|
|
||
|
|
watch(
|
||
|
|
() => props.statisticsCount,
|
||
|
|
newVal => {
|
||
|
|
// console.log(newVal, "newVal");
|
||
|
|
if (newVal) {
|
||
|
|
// props.xData = newVal;
|
||
|
|
statisticsCount.value = newVal;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
);
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.leftTop {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
display: flex;
|
||
|
|
|
||
|
|
.deviceData {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
display: flex;
|
||
|
|
|
||
|
|
.deviceDataA {
|
||
|
|
width: 40%;
|
||
|
|
height: 85%;
|
||
|
|
background: url("@/assets/images/comprehensiveManage/project13.png") no-repeat;
|
||
|
|
background-size: 100% 100%;
|
||
|
|
margin: 4% 5%;
|
||
|
|
color: #fff;
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
.deviceDataB {
|
||
|
|
width: 40%;
|
||
|
|
height: 85%;
|
||
|
|
background: url("@/assets/images/comprehensiveManage/project13.png") no-repeat;
|
||
|
|
background-size: 100% 100%;
|
||
|
|
margin: 4% 5%;
|
||
|
|
color: #fff;
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
.num {
|
||
|
|
margin-top: 30%;
|
||
|
|
font-size: 32px;
|
||
|
|
font-weight: bold;
|
||
|
|
}
|
||
|
|
.text {
|
||
|
|
font-size: 14px;
|
||
|
|
|
||
|
|
color: #ccc;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
::v-deep .h-card .content {
|
||
|
|
height: 80%;
|
||
|
|
}
|
||
|
|
</style>
|