hac/src/views/home/index/admin.vue

<template>
    <el-scrollbar class="hc-main-scrollbar hc-home-main">
        <div class="hc-main-row">
            <el-row :gutter="14">
                <el-col :span="4">
                    <HcCardItem ui="hac-card-item">
                        <template #header>
                            <div class="hac-card-title g">
                                年度合同指标
                            </div>
                        </template>
                        <template #extra>
                            <img class="hac-extra-img" :src="QImg" alt="">
                        </template>
                        <div class="hac-card-item-body">
                            <div class="money">
                                ￥{{ planAnnualTarget.annualContractTarget }}
                            </div>
                            <div class="text">
                                已收入：￥{{ planAnnualTarget.yearReturned }}
                            </div>
                        </div>
                    </HcCardItem>
                </el-col>
                <el-col :span="4">
                    <HcCardItem ui="hac-card-item">
                        <template #header>
                            <div class="hac-card-title g">
                                年度利润指标
                            </div>
                        </template>
                        <template #extra>
                            <img class="hac-extra-img" :src="QImg" alt="">
                        </template>
                        <div class="hac-card-item-body">
                            <div class="money">
                                ￥{{ planAnnualTarget.annualProfitTarget }}
                            </div>
                            <div class="text">
                                已盈利：￥{{ planAnnualTarget.yearProfit }}
                            </div>
                        </div>
                    </HcCardItem>
                </el-col>
                <el-col :span="16">
                    <HcCardItem ui="hac-card-item">
                        <template #header>
                            <div class="hac-card-title g">
                                进度统计
                            </div>
                        </template>
                        <div class="hac-card-item-body">
                            <div class="hac-item-progress">
                                <div class="title">
                                    年度合同指标
                                </div>
                                <div class="num">
                                    <el-progress :text-inside="true" :stroke-width="18" :percentage="planAnnualTarget.contractSchedule" color="#8978FD" />
                                </div>
                            </div>
                            <div class="hac-item-progress">
                                <div class="title">
                                    年度利润指标
                                </div>
                                <div class="num">
                                    <el-progress :text-inside="true" :stroke-width="18" :percentage="planAnnualTarget.profitSchedule" color="#73A3FE" />
                                </div>
                            </div>
                        </div>
                    </HcCardItem>
                </el-col>
            </el-row>

            <HcCardItem ui="hac-card-item mt-4">
                <template #header>
                    <div class="hac-card-title text-black">
                        年度各项费用统计
                    </div>
                </template>
                <template #extra>
                    <HcDropdown v-if="yearData.length > 0" :cur="planYear1" :datas="yearData" :all="yearData.length > 0" @change="planYear1Change" />
                </template>
                <div class="hac-card-item-body mb-2">
                    <el-row :gutter="14">
                        <el-col :span="6">
                            <HcGradientCard color="purple1">
                                <div class="hc-card-item-sub">
                                    <div class="item-sub-content">
                                        <div class="title">
                                            总合同
                                        </div>
                                        <div class="num-box">
                                            <span class="num">{{ annualCostData.yearContractMoney ?? 0 }}</span>
                                            <span class="text">元</span>
                                        </div>
                                    </div>
                                    <div class="item-sub-icon">
                                        <img class="img" :src="HeImg" alt="">
                                    </div>
                                </div>
                            </HcGradientCard>
                        </el-col>
                        <el-col :span="6">
                            <HcGradientCard color="blue1">
                                <div class="hc-card-item-sub">
                                    <div class="item-sub-content">
                                        <div class="title">
                                            总收入
                                        </div>
                                        <div class="num-box">
                                            <span class="num">{{ annualCostData.yearReturned ?? 0 }}</span>
                                            <span class="text">元</span>
                                        </div>
                                    </div>
                                    <div class="item-sub-icon">
                                        <img class="img" :src="ShouImg" alt="">
                                    </div>
                                </div>
                            </HcGradientCard>
                        </el-col>
                        <el-col :span="6">
                            <HcGradientCard color="red1">
                                <div class="hc-card-item-sub">
                                    <div class="item-sub-content">
                                        <div class="title">
                                            总实际支出
                                        </div>
                                        <div class="num-box">
                                            <span class="num">{{ annualCostData.yearStaffDisburse ?? 0 }}</span>
                                            <span class="text">元</span>
                                        </div>
                                    </div>
                                    <div class="item-sub-icon">
                                        <img class="img" :src="ZhiImg" alt="">
                                    </div>
                                </div>
                            </HcGradientCard>
                        </el-col>
                        <el-col :span="6">
                            <HcGradientCard color="purple1">
                                <div class="hc-card-item-sub">
                                    <div class="item-sub-content">
                                        <div class="title">
                                            总计划支出
                                        </div>
                                        <div class="num-box">
                                            <span class="num">{{ annualCostData.totalBudget ?? 0 }}</span>
                                            <span class="text">元</span>
                                        </div>
                                    </div>
                                    <div class="item-sub-icon">
                                        <img class="img" :src="Zhi1Img" alt="">
                                    </div>
                                </div>
                            </HcGradientCard>
                        </el-col>
                    </el-row>
                </div>
            </HcCardItem>

            <HcCardItem ui="hac-card-item mt-4">
                <template #header>
                    <div class="hac-card-title text-black">
                        年度各项目支出对比
                    </div>
                </template>
                <template #extra>
                    <HcDropdown v-if="yearData.length > 0" :cur="planYear2" :datas="yearData" @change="planYear2Change" />
                </template>
                <div class="hc-row-echarts-box" style="height: 260px">
                    <BarLabelRotation v-if="expendDatas.length > 0" is-month :datas="expendDatas" />
                    <HcNoData v-else />
                </div>
            </HcCardItem>

            <el-row :gutter="14" class="mt-4">
                <el-col :span="10">
                    <HcCardItem ui="hac-card-item">
                        <template #header>
                            <div class="hac-card-title text-black">
                                当月各部门计划安排比重
                            </div>
                        </template>
                        <template #extra>
                            <el-date-picker v-model="planTime" type="month" format="YYYY-MM" value-format="YYYY-MM" style="width: 130px;" @change="planTimeChange" />
                        </template>
                        <div class="hac-card-item-body" style="height: 410px">
                            <HcTable ui="no-border" :is-index="false" :column="tableColumn" :datas="tableData" />
                        </div>
                    </HcCardItem>
                </el-col>
                <el-col :span="14">
                    <div class="hac-card-col-item">
                        <HcCardItem ui="hac-card-item">
                            <template #header>
                                <div class="hac-card-icon-title">
                                    <HcIcon name="alarm-warning" ui="text-orange text-xl" />
                                    <el-badge :value="tableData1.length">
                                        <span class="ml-2 mr-3 text-black">影响回款的风险计划</span>
                                    </el-badge>
                                </div>
                            </template>
                            <div class="hac-card-item-body" style="height: 160px">
                                <HcTable ui="no-border" :is-index="false" :column="tableColumn1" :datas="tableData1">
                                    <template #action="{ row }">
                                        <el-button plain size="small" type="primary" @click="rowViewClick(row)">
                                            查看
                                        </el-button>
                                    </template>
                                </HcTable>
                            </div>
                        </HcCardItem>
                    </div>
                    <div class="hac-card-col-item mt-4">
                        <el-row :gutter="14">
                            <el-col :span="12">
                                <HcCardItem ui="hac-card-item">
                                    <template #header>
                                        <div class="hac-card-title text-black">
                                            各项目支出占比统计
                                        </div>
                                    </template>
                                    <template #extra>
                                        <HcDropdown v-if="yearData.length > 0" :cur="planYear3" :datas="yearData" @change="planYear3Change" />
                                    </template>
                                    <div class="hac-card-item-body" style="height: 160px">
                                        <BorderRadius v-if="expendStatisticsDatas.length > 0" :datas="expendStatisticsDatas" />
                                        <HcStatus v-else class="border-radius-status" />
                                    </div>
                                </HcCardItem>
                            </el-col>
                            <el-col :span="12">
                                <HcCardItem ui="hac-card-item">
                                    <template #header>
                                        <div class="hac-card-title text-black">
                                            各项目收入占比统计
                                        </div>
                                    </template>
                                    <template #extra>
                                        <HcDropdown v-if="yearData.length > 0" :cur="planYear4" :datas="yearData" @change="planYear4Change" />
                                    </template>
                                    <div class="hac-card-item-body" style="height: 160px">
                                        <SimpleChart v-if="incomeStatisticsDatas.length > 0" :datas="incomeStatisticsDatas" />
                                        <HcStatus v-else class="simple-chart-status" />
                                    </div>
                                </HcCardItem>
                            </el-col>
                        </el-row>
                    </div>
                </el-col>
            </el-row>

            <HcCardItem ui="hac-card-item mt-4">
                <template #header>
                    <div class="hac-card-title text-black">
                        项目服务阶段进程
                    </div>
                </template>
                <template #extra>
                    <el-select v-if="projectData.length > 0" v-model="portalProjectId" @change="portalProjectIdChange">
                        <el-option v-for="items in projectData" :key="items.projectId" :label="items.projectName" :value="items.projectId" />
                    </el-select>
                </template>
                <div class="hc-row-echarts-box pt-5 mb-1">
                    <template v-for="(item, index) in projectProcessData" v-if="projectProcessData.length > 0">
                        <ProgressChart
                            :left-title="index === 0 ? '计划执行进度' : ''"
                            :right-title="index === 0 ? '已支出成本' : ''"
                            :title="item.processName"
                            :left-ratio="item.processProgressBar"
                            :right-ratio="item.processCostProgressBar"
                            :right-text="item.processCostCount"
                        />
                    </template>
                    <HcStatus v-else class="project-process-status" />
                </div>
            </HcCardItem>
        </div>
    </el-scrollbar>
</template>

<script setup>
import { onActivated, onMounted, ref } from 'vue'
import { useRouter } from 'vue-router'
import QImg from '~src/assets/images/q.png'
import HeImg from '~src/assets/images/he.png'
import ShouImg from '~src/assets/images/shou.png'
import ZhiImg from '~src/assets/images/zhi.png'
import Zhi1Img from '~src/assets/images/zhi1.png'
import BarLabelRotation from '~com/echarts/BarLabelRotation.vue'
import BorderRadius from '~com/echarts/BorderRadius.vue'
import SimpleChart from '~com/echarts/SimpleChart.vue'
import ProgressChart from '~com/echarts/ProgressChart.vue'
import mainApi from '~api/home/index'
import { getProjectList } from '~api/other'

//时间类
import dayjs from 'dayjs'
import 'dayjs/locale/zh-cn'
import { getArrValue, getObjValue } from 'js-fast-way'
dayjs.locale('zh-cn')
//初始组合式
const router = useRouter()
//年份
const planYear = dayjs().format('YYYY') + '年'
const planDate = dayjs().format('YYYY-MM')

//页面首次渲染完成时
onMounted(async () => {
    await getYearList()
    getYearDataApi()
})

//缓存页面被激活时
onActivated(() => {
    getPlanAnnualTarget()
    getYearDataApi()
    getTableData1()
    getTableData()
    getProjectData()
})

const getYearDataApi = () => {
    if (yearData.value.length > 0) {
        getPortalAnnualCost()
        getExpendDatas()
        getExpendStatisticsData()
        getIncomeStatisticsData()
    }
}


//项目类型
const planAnnualTarget = ref({})
const getPlanAnnualTarget = async () => {
    const { error, code, data } = await mainApi.portalAnnualTarget()
    //判断状态
    if (!error && code === 200) {
        planAnnualTarget.value = getObjValue(data)
    } else {
        planAnnualTarget.value = {}
    }
}

//获取年度列表
const yearData = ref([])
const getYearList = async () => {
    const { error, code, data } = await mainApi.yearList()
    //判断状态
    if (!error && code === 200) {
        const arr = getArrValue(data)
        //判断当前年份是否在列表中
        if (arr.indexOf(planYear) > -1) {
            planYear1.value = planYear
        } else {
            planYear1.value = arr[0]
        }
        yearData.value = arr
    } else {
        yearData.value = []
        planYear1.value = ''
        annualCostData.value = {
            yearContractMoney: 0,
            yearReturned: 0,
            yearStaffDisburse: 0,
            totalBudget: 0,
        }
    }
}

//年度各项费用统计
const planYear1 = ref(planYear)
const planYear1Change = (val) => {
    planYear1.value = val
    getPortalAnnualCost()
}

//获取数据
const annualCostData = ref({
    yearContractMoney: 0, yearReturned: 0, yearStaffDisburse: 0, totalBudget: 0,
})
const getPortalAnnualCost = async () => {
    const { error, code, data } = await mainApi.portalAnnualCost({
        year: planYear1.value,
    })
    //判断状态
    if (!error && code === 200) {
        annualCostData.value = getObjValue(data)
    } else {
        annualCostData.value = {
            yearContractMoney: 0,
            yearReturned: 0,
            yearStaffDisburse: 0,
            totalBudget: 0,
        }
    }
}


//年度各项目支出对比
const planYear2 = ref(planYear)
const planYear2Change = (val) => {
    planYear2.value = val
    getExpendDatas()
}
//年度各项目支出对比
const expendDatas = ref([])
const getExpendDatas = async () => {
    expendDatas.value = []
    const { error, code, data } = await mainApi.portalAnnualProjectCost({
        year: planYear2.value,
    })
    //判断状态
    if (!error && code === 200) {
        expendDatas.value = getArrValue(data)
    } else {
        expendDatas.value = []
    }
}

//当月各部门计划安排比重
const planTime = ref(planDate)
const planTimeChange = () => {
    getTableData()
}
const tableColumn = [
    { key: 'projectName', name: '项目名称' },
    { key: 'businessRatio', name: '实施投入', align: 'center' },
    { key: 'devRatio', name: '研发投入', align: 'center' },
    { key: 'maintainRatio', name: '维护投入', align: 'center' },
]
const tableData = ref([])
const getTableData = async () => {
    tableData.value = []
    const { error, code, data } = await mainApi.portalDeptMonthPlanRatio({
        date: planTime.value,
    })
    //判断状态
    if (!error && code === 200) {
        tableData.value = getArrValue(data)
    } else {
        tableData.value = []
    }
}


//影响回款的风险计划
const tableColumn1 = [
    { key: 'projectName', name: '项目名称' },
    { key: 'costTypeValue', name: '风险部门', align: 'center' },
    { key: 'timeOutPlanTotal', name: '延期计划条数', align: 'center' },
    { key: 'action', name: '操作', align: 'center' },
]
const tableData1 = ref([])
const getTableData1 = async () => {
    tableData1.value = []
    const { error, code, data } = await mainApi.portalRiskPlan()
    //判断状态
    if (!error && code === 200) {
        tableData1.value = getArrValue(data)
    } else {
        tableData1.value = []
    }
}
//查看
const rowViewClick = (row) => {
    router.push({ name: 'program-section' })
}


//各项目支出占比统计
const planYear3 = ref(planYear)
const planYear3Change = (val) => {
    planYear3.value = val
    getExpendStatisticsData()
}
const expendStatisticsDatas = ref([])
const getExpendStatisticsData = async () => {
    expendStatisticsDatas.value = []
    const { error, code, data } = await mainApi.portalProjectCostRatio(planYear3.value)
    //判断状态
    if (!error && code === 200) {
        const arr = getArrValue(data)
        arr.forEach(item => {
            item.name = item.projectName
            item.value = item.projectCost
        })
        expendStatisticsDatas.value = arr
    } else {
        expendStatisticsDatas.value = []
    }
}


//各项目收入占比统计
const planYear4 = ref(planYear)
const planYear4Change = (val) => {
    planYear4.value = val
    getIncomeStatisticsData()
}
const incomeStatisticsDatas = ref([
    { value: 1048, name: '奉建路' },
    { value: 735, name: '西环线' },
    { value: 580, name: '陈油路' },
    { value: 484, name: '宝北路' },
])
const getIncomeStatisticsData = async () => {
    incomeStatisticsDatas.value = []
    const { error, code, data } = await mainApi.portalProjectIncomeRatio(planYear4.value)
    //判断状态
    if (!error && code === 200) {
        const arr = getArrValue(data)
        arr.forEach(item => {
            item.name = item.projectName
            item.value = item.projectIncome
        })
        incomeStatisticsDatas.value = arr
    } else {
        incomeStatisticsDatas.value = []
    }
}

//获取项目数据
const portalProjectId = ref('')
const projectData = ref([])
const getProjectData = async () => {
    const { error, code, data } = await getProjectList()
    //判断状态
    if (!error && code === 200) {
        const arr = getArrValue(data)
        portalProjectId.value = arr.length > 0 ? arr[0].projectId : ''
        projectData.value = arr
        getPortalProjectProcess().then()
    } else {
        portalProjectId.value = ''
        projectData.value = []
        projectProcessData.value = []
    }
}
const portalProjectIdChange = () => {
    getPortalProjectProcess()
}

//获取数据
const projectProcessData = ref([])
const getPortalProjectProcess = async () => {
    projectProcessData.value = []
    const { error, code, data } = await mainApi.portalProjectProcess(portalProjectId.value)
    //判断状态
    if (!error && code === 200) {
        projectProcessData.value = getArrValue(data)
    } else {
        projectProcessData.value = []
    }
}
</script>

<style lang="scss" scoped>
@import "~src/styles/home/admin.scss";
</style>

<style lang="scss">
.hac-item-progress .num .el-progress .el-progress-bar .el-progress-bar__outer,
.hac-item-progress .num .el-progress .el-progress-bar .el-progress-bar__inner {
    border-radius: 3px;
}
.hc-home-main .hc-row-echarts-box .hc-no-data-box .no-data-c {
    position: relative;
    width: 200px;
    top: -15px;
}
.hc-home-main .hac-card-col-item .hac-card-item {
    .border-radius-status, .simple-chart-status {
        .page-status {
            top: -10px;
            .page-status-img {
                width: 160px;
            }
            .page-status-text {
                font-size: 14px;
                margin-top: -10px;
            }
        }
    }
}
.hc-home-main .hac-card-item .hc-row-echarts-box .project-process-status {
    .page-status {
        top: -15px;
        margin-bottom: 14px;
        .page-status-text {
            font-size: 16px;
        }
    }
}
</style>