63 lines
1.7 KiB
Vue
63 lines
1.7 KiB
Vue
<template>
|
|
<ChartCard :loading="loading" margin="30rpx 0 0 0" padding="20rpx 10rpx 80rpx 10rpx" bg-color="linear-gradient(#1e5ca3, #3094ff)">
|
|
<view class="project" @click="router.push('/pages/index/dataSummary/index')">
|
|
<view class="project-col">
|
|
<text class="project-col-num">{{ projectInfoData?.BeUnderConstructionNum || 0 }}</text>
|
|
<text class="project-col-lab u-margin-top-10">在建项目</text>
|
|
</view>
|
|
<view class="project-col">
|
|
<text class="project-col-num">{{ projectInfoData?.ShutdownNum || 0 }}</text>
|
|
<text class="project-col-lab u-margin-top-10">停工项目</text>
|
|
</view>
|
|
<view class="project-col">
|
|
<text class="project-col-num">{{ projectInfoData?.JoinConstructionPersonNum || 0 }}</text>
|
|
<text class="project-col-lab u-margin-top-10">参建人数</text>
|
|
</view>
|
|
<view class="project-col">
|
|
<text class="project-col-num">{{ projectInfoData?.MajorProjectsUnderConstructionNum || 0 }}</text>
|
|
<text class="project-col-lab u-margin-top-10">在施危大工程</text>
|
|
</view>
|
|
</view>
|
|
</ChartCard>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref } from 'vue';
|
|
import { router } from '@/utils';
|
|
import ChartCard from '@/components/chartCard.vue';
|
|
const loading = ref(false);
|
|
defineProps({
|
|
projectInfoData: {
|
|
type: Object,
|
|
default: () => ({})
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.project {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 25%);
|
|
|
|
&-col {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
&-num {
|
|
text-align: center;
|
|
overflow-wrap: break-word;
|
|
width: 100%;
|
|
color: #ffffff;
|
|
font-size: 40rpx;
|
|
}
|
|
|
|
&-lab {
|
|
color: #ffffff;
|
|
font-size: 24rpx;
|
|
}
|
|
}
|
|
}
|
|
</style>
|