archives/src/views/using/stats.vue

<template>
    <div class="hc-page-box">
        <HcCard scrollbar>
            <template #header>
                <div class="hc-project-box">
                    <HcIcon name="stack" class="project-icon"/>
                    <span class="project-alias">{{projectInfo['projectAlias']}}</span>
                </div>
            </template>
            <div class="hc-chart-flex">
                <el-row :gutter="20" class="h-full">
                    <el-col :span="8" class="h-full">
                        <div class="hc-chart-card-box">
                            <div class="header">原生、数字化文件数量（份）</div>
                            <div class="body" v-loading="isNativeLoading">
                                <BarChart ref="nativeChartRef" :config="nativeChartConfig" :datas="nativeChartData"/>
                            </div>
                        </div>
                    </el-col>
                    <el-col :span="8" class="h-full">
                        <div class="hc-chart-card-box gird">
                            <div class="header">档案总存储</div>
                            <div class="body font-FZGongYHJW num-text">
                                {{ allArchiveFileSizedata }}
                            </div>
                        </div>
                        <div class="hc-chart-card-box gird">
                            <div class="header">已组案卷</div>
                            <div class="body" v-loading="isHasBeenLoading">
                                <ArrRoundChart ref="hasBeenChartRef" :config="hasBeenChartConfig" :datas="hasBeenChartData"/>
                            </div>
                        </div>
                    </el-col>
                    <el-col :span="8" class="h-full">
                        <div class="hc-chart-card-box gird">
                            <div class="header">档案年限占比</div>
                            <div class="body" v-loading="isFixedLoading">
                                <RoundPieChart ref="fixedChartRef" :datas="fixedChartData"/>
                            </div>
                        </div>
                        <div class="hc-chart-card-box gird">
                            <div class="header">已销毁案卷</div>
                            <div class="body" v-loading="isDestroyLoading">
                                <ArrRoundChart ref="destroyChartRef" :config="destroyChartConfig" :datas="destroyChartData"/>
                            </div>
                        </div>
                    </el-col>
                </el-row>
            </div>

            <el-table :data="tableData" lazy :load="loadData" v-loading="isLoading" border row-key="primaryKeyId">
                <el-table-column prop="title" label="归档目录文件夹"></el-table-column>
                <el-table-column prop="hasBeen" label="已组卷" align="center" width="100"></el-table-column>
                <el-table-column prop="destroy" label="已销毁" align="center" width="100"></el-table-column>
            </el-table>

        </HcCard>
    </div>
</template>

<script setup>
import {ref, onMounted} from "vue";
import {useAppStore} from "~src/store";
import BarChart from "./components/echarts/BarChart.vue"
import ArrRoundChart from "./components/echarts/ArrRoundChart.vue"
import RoundPieChart from "./components/echarts/RoundPieChart.vue"
import archivesStatsApi from "~api/using/stats.js";
import {getObjValue,getArrValue} from "js-fast-way"

//变量
const useAppState = useAppStore()
const projectId = ref(useAppState.getProjectId);
const contractId = ref(useAppState.getContractId);
const projectInfo = ref(useAppState.getProjectInfo);

//渲染完成
onMounted(() => {
    gethasBeenChartData()
    getfixedChartData()
    getdestroyChartData()
    getnativeChartData()
    getallArchiveFileSize()

})

//原生、数字化文件数量 图表配置
const nativeChartRef = ref(null)
const nativeChartConfig = {
    name: ['原生', '数字化'],
    key: ['key1', 'key2'],
    color: ['#3187FF', '#1ACC96'],
    label: '',
}

//原生、数字化文件数量 图表数据
const isNativeLoading = ref(false)
const nativeChartData = ref([
    {title: '施工', key1: 100, key2: 50},
    {title: '监理', key1: 60, key2: 80},
    {title: '业主', key1: 4, key2: 30},
])
//获取原生文件数量
const getnativeChartData = async () => {
    const { error, code, data } = await archivesStatsApi.getallnativeChartData({
        projectId: projectId.value,
       
    });
    if (!error && code === 200) {
        nativeChartData.value = getArrValue(data);
    } else {
        nativeChartData.value = [];
    }
}

//已组案卷 图表配置
const hasBeenChartRef = ref(null)
const hasBeenChartConfig = {
    name: ['施工', '监理', '业主'],
    key: ['key1', 'key2', 'key3'],
    color: ['#3187FF', '#FF8F3E', '#1ACC96'],
    label: '已组案卷',
}

//已组案卷 图表数据
const isHasBeenLoading = ref(false)
const hasBeenChartData = ref({
    key1: 3210, key2: 850, key3: 1203
})
//获取已组案卷
const gethasBeenChartData = async () => {
  
    const { error, code, data } = await archivesStatsApi.getallArchiveByContractType({
        projectId: projectId.value,
       
    });
    if (!error && code === 200) {
        hasBeenChartData.value = getObjValue(data);
    } else {
        hasBeenChartData.value = {};
    }
}

//档案年限占比 图表数据
const fixedChartRef = ref(null)
const isFixedLoading = ref(false)
const fixedChartData = ref([
    { value: 1048, name: '永久' },
    { value: 735, name: '30年' },
    { value: 580, name: '20年' },
    { value: 484, name: '10年' },
    { value: 300, name: '5年' }
])
//获取档案年限
const getfixedChartData = async () => {
    const { error, code, data } = await archivesStatsApi.getallArchiveAge({
        projectId: projectId.value,
       
    });
    if (!error && code === 200) {
        console.log(data,'data');
        fixedChartData.value = getArrValue(data);
    } else {
        fixedChartData.value = [];
    }
}

//已销毁案卷 图表配置
const destroyChartRef = ref(null)
const destroyChartConfig = {
    name: ['施工', '监理', '业主'],
    key: ['key1', 'key2', 'key3'],
    color: ['#63686E', '#999FA6', '#42494F'],
    label: '已销毁案卷',
}

//已销毁案卷 图表数据
const isDestroyLoading = ref(false)
const destroyChartData = ref({
    key1: 202, key2: 150, key3: 100
})
//获取已销毁案卷
const getdestroyChartData = async () => {
    const { error, code, data } = await archivesStatsApi.getallArchiveDestory({
        projectId: projectId.value,
       
    });
    if (!error && code === 200) {
        destroyChartData.value = getObjValue(data);
        console.log(data,'已销毁');
    } else {
        destroyChartData.value = [];
    }
}
//获取总存储数据
const allArchiveFileSizedata = ref('')
const getallArchiveFileSize = async () => {
    const { error, code, data } = await archivesStatsApi.getallArchiveSize({
        projectId: projectId.value,
       
    });
    if (!error && code === 200) {
        allArchiveFileSizedata.value = data;
    
    } else {
        allArchiveFileSizedata.value = '';
    }
}
//初始数据获取
const isLoading = ref(false)
const tableData = ref([])

const loadData = async () => {
    isLoading.value=true
    const { error, code, data } = await archivesStatsApi.getallArchiveDestory({
        projectId: projectId.value,
       
    });
    if (!error && code === 200) {
        // tableData.value = getObjValue(data);
        console.log(data,'已销毁');
    } else {
        tableData.value = [];
    }
}


</script>

<style lang="scss" scoped>
@import '~style/using/scoped/stats.scss';
</style>