for_client/src/views/schedule/hc-data.vue

<template>
    <div class="hc-layout-box">
        <HcPageHeader v-if="contractInfo?.contractType === 2 || contractInfo?.contractType === 3">
            <HcNewSwitch :datas="contractTypeTab" :keys="contractTypeTabKey" size="default" @change="contractTypeTabChange" />
        </HcPageHeader>
        <div class="hc-round-chart">
            <el-row :gutter="30">
                <el-col v-for="item in processMaterialList" :span="6">
                    <div class="hc-round-chart-card-box">
                        <div class="hc-card-content-box">
                            <div class="card-title">{{ item.title }}</div>
                            <div class="card-ratio-box">
                                <div class="ratio-num">{{ item.ratio }}</div>
                                <div class="ratio-text">
                                    <div class="unit">%</div>
                                    <div class="text">完成率</div>
                                </div>
                            </div>
                            <div class="card-amount-box">
                                <div class="amount-item">
                                    <div class="text">应填(份)</div>
                                    <div class="num">{{ item.amount }}</div>
                                </div>
                                <div class="amount-divider" />
                                <div class="amount-item">
                                    <div class="text">已填(份)</div>
                                    <div class="num">{{ item.successAmount }}</div>
                                </div>
                            </div>
                        </div>
                        <div class="hc-card-chart-box">
                            <RoundChart :ratio="item.ratio" />
                            <div class="text-num">{{ item.ratio }}%</div>
                        </div>
                    </div>
                </el-col>
            </el-row>
        </div>
        <div class="hc-chart-flex">
            <el-row :gutter="30" class="h-full">
                <el-col :span="18" class="h-full">
                    <div class="hc-report-chart-card-box">
                        <div class="hc-chart-title">
                            <span class="title">报表资料审批统计</span>
                            <span class="hc-chart-text">(已审批{{ materialList }}份)</span>
                        </div>
                        <div class="hc-report-chart-box">
                            <ReportChart :datas="processMaterialStatusList" />
                        </div>
                    </div>
                </el-col>
                <el-col :span="6" class="h-full">
                    <div class="hc-media-chart-card-box">
                        <div class="hc-chart-title">
                            <span class="title">声像媒体资料统计</span>
                            <el-button round size="large" @click="toTableClick">
                                <span>WBS节点进度</span>
                                <HcIcon name="arrow-right-s" style="margin-right: 0;" ui="ml-2" />
                            </el-button>
                        </div>
                        <div class="hc-media-chart-box">
                            <div class="hc-media-pian-box">
                                <div class="item">
                                    <span class="name">总计</span>
                                    <span class="num">{{ imageClassInfo.amount }}</span>
                                </div>
                                <div class="item">
                                    <span class="name">图片</span>
                                    <span class="num c1">{{ imageClassInfo.image }}</span>
                                </div>
                                <div class="item">
                                    <span class="name">视频</span>
                                    <span class="num c2">{{ imageClassInfo.video }}</span>
                                </div>
                            </div>
                            <MediaChart :datas="contractImageClassificationList" />
                        </div>
                    </div>
                </el-col>
            </el-row>
        </div>
    </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import { useRouter } from 'vue-router'
import { useAppStore } from '~src/store'
import RoundChart from './components/echarts/RoundChart.vue'
import ReportChart from './components/echarts/ReportChart.vue'
import MediaChart from './components/echarts/MediaChart.vue'
import { getArrValue } from 'js-fast-way'
import DataApi from '~api/schedule/data'

//变量
const router = useRouter()
const useAppState = useAppStore()
const projectId = ref(useAppState.getProjectId)
const contractId = ref(useAppState.getContractId)
const contractInfo = ref(useAppState.getContractInfo)
const isCollapse = ref(useAppState.getCollapse)

//渲染完成
onMounted(() => {
    queryMaterialProgress()
    queryMaterialProgressStatus()
    queryImageClassification()
})


//结构类型tab数据和相关处理
const contractTypeTabKey = ref(2)
const contractTypeTab = ref([
    { key: '1', name: '施工数据' },
    { key: '2', name: '监理数据' },
])
const contractTypeTabChange = (item) => {
    contractTypeTabKey.value = item?.key
    queryMaterialProgress()
    queryMaterialProgressStatus()
    queryImageClassification()
}

//获取合同段类型
const getContractTypeKey = () => {
    const { contractType } = contractInfo.value
    if (contractType === 2 || contractType === 3) {
        return contractTypeTabKey.value ?? '1'
    } else {
        return null
    }
}

//查询内业资料进度
const isProcessLoading = ref(false)
const processMaterialList = ref([])
const queryMaterialProgress = async () => {
    isProcessLoading.value = true
    const classifyType = getContractTypeKey()
    const { error, code, data } = await DataApi.queryMaterialProgress({
        projectId: projectId.value,
        contractId: contractId.value,
        classifyType: classifyType,
    })
    //处理数据
    isProcessLoading.value = false
    if (!error && code === 200) {
        processMaterialList.value = getArrValue(data?.processMaterialList)
    } else {
        processMaterialList.value = []
    }
}


//报表资料审批统计
const materialList = ref(0)
const isMaterialLoading = ref(false)
const processMaterialStatusList = ref([])
const queryMaterialProgressStatus = async () => {
    isMaterialLoading.value = true
    const classifyType = getContractTypeKey()
    const { error, code, data } = await DataApi.queryMaterialProgressStatus({
        projectId: projectId.value,
        contractId: contractId.value,
        classifyType: classifyType,
    })
    //处理数据
    isMaterialLoading.value = false
    if (!error && code === 200) {
        let num = 0
        const listData = getArrValue(data?.processMaterialStatusList)
        for (let i = 0; i < listData.length; i++) {
            const Amount = listData[i]?.approvalAmount || 0
            num += Amount
        }
        materialList.value = num
        processMaterialStatusList.value = listData
    } else {
        materialList.value = 0
        processMaterialStatusList.value = []
    }
}

//声像媒体资料统计
const isImageClassLoading = ref(false)
const contractImageClassificationList = ref([])
const imageClassInfo = ref({ amount: 0, image: 0, video: 0 })
const queryImageClassification = async () => {
    isImageClassLoading.value = true
    const classifyType = getContractTypeKey()
    const { error, code, data } = await DataApi.queryImageClassification({
        projectId: projectId.value,
        contractId: contractId.value,
        classifyType: classifyType,
    })
    //处理数据
    isImageClassLoading.value = false
    if (!error && code === 200) {
        const imageClassList = getArrValue(data?.contractImageClassificationList)
        contractImageClassificationList.value = imageClassList
        //数据显示
        let AxisData = { amount: 0, image: 0, video: 0 }
        for (let i = 0; i < imageClassList.length; i++) {
            AxisData.amount = imageClassList[i].amount
            AxisData.image = imageClassList[i].imageAmount
            AxisData.video = imageClassList[i].videoAmount
        }
        imageClassInfo.value = AxisData
    } else {
        contractImageClassificationList.value = []
    }
}

//查看WBS节点进度
const toTableClick = () => {
    router.push({ path: '/schedule/table' })
}
</script>

<style lang="scss" scoped>
@import "../../styles/schedule/hc-data.scss";
</style>