archives/src/views/using/stats.vue

<template>
    <div class="hc-page-box hc-using-stats-page">
        <hc-new-card 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 v-loading="isNativeLoading" class="body">
                                <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">
                            <HcBorderNeon align="right" neon />
                            <div class="header">档案总存储</div>
                            <div class="body num-text">
                                <span class="font-FZGongYHJW">{{ tableData[0]?.auto || 0 }}卷</span>
                                <div v-loading="isSizeLoading" class="size-data">电子文件存储量：{{ allArchiveFileSizedata }}</div>
                            </div>
                        </div>
                        <div class="hc-chart-card-box gird">
                            <HcBorderNeon align="right" />
                            <div class="header">已组案卷</div>
                            <div v-loading="isHasBeenLoading" class="body">
                                <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">
                            <HcBorderNeon align="left" />
                            <div class="header">档案年限占比</div>
                            <div v-loading="isFixedLoading" class="body">
                                <!-- <RoundPieChart ref="fixedChartRef" :datas="fixedChartData" /> -->
                                <ArrRoundChart ref="fixedChartRef" :config="fixedChartConfig" :datas="fixedChartData" />
                            </div>
                        </div>
                        <div class="hc-chart-card-box gird">
                            <HcBorderNeon align="left" neon />
                            <div class="header">已销毁案卷</div>
                            <div v-loading="isDestroyLoading" class="body">
                                <ArrRoundChart ref="destroyChartRef" :config="destroyChartConfig" :datas="destroyChartData" />
                            </div>
                        </div>
                    </el-col>
                </el-row>
            </div>

            <el-table v-loading="isLoading" :data="tableData" lazy :load="loadData" border row-key="id" :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
                <el-table-column prop="name" label="归档目录文件夹" />
                <el-table-column prop="auto" label="已组卷" align="center" width="100" />
                <el-table-column prop="deleted" label="已销毁" align="center" width="100" />
            </el-table>
        </hc-new-card>
    </div>
</template>

<script setup>
import { onMounted, ref, watch } 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 { getArrValue, getObjValue } 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()
    gettableData()

})
//监听
watch(() => [
    useAppState.getProjectId,
], ([ProjectId]) => {
    projectId.value = ProjectId
    gethasBeenChartData()
    getfixedChartData()
    getdestroyChartData()
    getnativeChartData()
    getallArchiveFileSize()
    gettableData()
})
//深度监听
watch(() => [
useAppState.getProjectInfo,
], ([ProjectInfo]) => {
   projectInfo.value = ProjectInfo
}, {
    deep: true,
})
//原生、数字化文件数量 图表配置
const nativeChartRef = ref(null)
const nativeChartConfig = {
    name: ['原生', '数字化'],
    key: ['key1', 'key2'],
    color: ['#FFBF6B', '#74F9FD'],
    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: ['#81B336', '#1040F3', '#EA9B43'],
    label: '已组案卷',
}

//已组案卷 图表数据
const isHasBeenLoading = ref(false)
const hasBeenChartData = ref({
    key1: 3210, key2: 850, key3: 1203,
})
//档案年限占比fixedChartConfig
const fixedChartConfig = {
    name: ['永久', '30年', '10年'],
    key: ['key1', 'key2', 'key3'],
    color: ['#DF868F', '#7727F5', '#74F9FD'],
    label: '档案年限占比',
}
//获取已组案卷
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) {
        let objarr = getArrValue(data)
        let obj = { key1: 0, key2: 0, key3: 0 }
        objarr.forEach((ele) => {
            if (ele.name === '永久') {
                obj['key1'] = ele.value
            } else if (ele.name === '30年') {
                obj['key2'] = ele.value
            } else if (ele.name === '31年') {
                obj['key3'] = ele.value
            }

        })

        fixedChartData.value = obj
    } else {
        fixedChartData.value = {}
    }
}

//已销毁案卷 图表配置
const destroyChartRef = ref(null)
const destroyChartConfig = {
    name: ['施工', '监理', '业主'],
    key: ['key1', 'key2', 'key3'],
    color: ['#81B336', '#1040F3', '#EA9B43'],
    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 isSizeLoading = ref(false)
const getallArchiveFileSize = async () => {
    isSizeLoading.value = true
    const { error, code, data } = await archivesStatsApi.getallArchiveSize({
        projectId: projectId.value,

    })
    if (!error && code === 200) {
        allArchiveFileSizedata.value = data
        isSizeLoading.value = false

    } else {
        allArchiveFileSizedata.value = ''
        isSizeLoading.value = false
    }

}
//初始数据获取
const isLoading = ref(false)
const tableData = ref([])
const nodeId = ref(0)
//获取归档目录文件夹getArchiveTreeAndArchiveCount
const gettableData = async () => {
    isLoading.value = true
    const { error, code, data } = await archivesStatsApi.getArchiveTreeAndArchiveCount({
        projectId: projectId.value,
        nodeId:nodeId.value,

    })
    if (!error && code === 200) {
        let resdata = getArrValue(data)
        tableData.value = resdata
        isLoading.value = false

    } else {
        tableData.value = resdata
    }
    isLoading.value = false

}
const loadData = (tree, treeNode, resolve)=>{
     archivesStatsApi.getArchiveTreeAndArchiveCount({ projectId: projectId.value, nodeId:tree.id }).then((response) => {
        console.log(response, 'response')
        let resdata = getArrValue(response.data)
        resolve(resdata)
    })
}
</script>

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

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