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

<template>
    <el-scrollbar class="hc-main-scrollbar">
        <div class="hc-main-row">
            <el-row :gutter="14">
                <el-col :span="6">
                    <HcGradientCard color="green1">
                        <div class="hc-card-item-sub">
                            <div class="item-sub-icon">
                                <HcIcon name="calendar-todo"/>
                            </div>
                            <div class="item-sub-content">
                                <div class="num">{{planOverview.totalPlan ?? 0}}条</div>
                                <div class="title">您的任务总计划</div>
                            </div>
                        </div>
                    </HcGradientCard>
                </el-col>
                <el-col :span="6">
                    <HcGradientCard color="blue2">
                        <div class="hc-card-item-sub">
                            <div class="item-sub-icon">
                                <HcIcon name="calendar-check"/>
                            </div>
                            <div class="item-sub-content">
                                <div class="num">{{planOverview.finishedPlan ?? 0}}条</div>
                                <div class="title">已完成计划</div>
                            </div>
                        </div>
                    </HcGradientCard>
                </el-col>
                <el-col :span="6">
                    <HcGradientCard color="pink1">
                        <div class="hc-card-item-sub">
                            <div class="item-sub-icon">
                                <HcIcon name="alert" fill/>
                            </div>
                            <div class="item-sub-content">
                                <div class="num">{{planOverview.riskPlan ?? 0}}条</div>
                                <div class="title">风险计划</div>
                            </div>
                        </div>
                    </HcGradientCard>
                </el-col>
                <el-col :span="6">
                    <HcGradientCard color="purple1">
                        <div class="hc-card-item-sub">
                            <div class="item-sub-icon">
                                <HcIcon name="time"/>
                            </div>
                            <div class="item-sub-content">
                                <div class="num">{{planOverview.postponePlan ?? 0}}条</div>
                                <div class="title">延期计划</div>
                            </div>
                        </div>
                    </HcGradientCard>
                </el-col>
            </el-row>

            <el-row :gutter="14" class="mt-8">
                <el-col :span="12">
                    <HcCardItem ui="hac-card-item">
                        <template #header>
                            <div class="hac-card-title">最新预警信息</div>
                        </template>
                        <div class="hac-card-item-table">
                            <HcTable ui="no-border" indexName="编号" :column="tableColumn" :datas="tableData"/>
                        </div>
                    </HcCardItem>
                </el-col>
                <el-col :span="12">
                    <HcCardItem ui="hac-card-item">
                        <template #header>
                            <div class="hac-card-title">通知</div>
                        </template>
                        <div class="hac-card-item-table">
                            <el-scrollbar v-if="userInformData.length > 0">
                                <div v-for="item in userInformData" class="hac-home-notice-item">
                                    <div class="line-clamp-2 title">{{item.informDetails}}</div>
                                    <div class="time">{{item.informDate}}</div>
                                </div>
                            </el-scrollbar>
                            <HcNoData v-else/>
                        </div>
                    </HcCardItem>
                </el-col>
            </el-row>

            <HcCardItem ui="hac-card-item mt-4">
                <template #header>
                    <div class="hac-card-title">任务统计</div>
                </template>
                <template #extra>
                    <el-date-picker type="month" v-model="planTime" format="YYYY-MM" value-format="YYYY-MM" style="width: 130px;" @change="planTimeChange"/>
                </template>
                <div class="hac-card-item-body">
                    <el-row :gutter="14">
                        <el-col :span="4">
                            <div class="hac-row-total-item">
                                <div class="num">{{monthPlan.totalPlan ?? 0}}</div>
                                <div class="text">累计任务总数</div>
                            </div>
                        </el-col>
                        <el-col :span="4">
                            <div class="hac-row-total-item">
                                <div class="num">{{monthPlan.unfinishedPlan ?? 0}}</div>
                                <div class="text">累计未完成任务</div>
                            </div>
                        </el-col>
                        <el-col :span="4">
                            <div class="hac-row-total-item">
                                <div class="num">{{monthPlan.cancelPlan ?? 0}}</div>
                                <div class="text">累计取消任务</div>
                            </div>
                        </el-col>
                        <el-col :span="4">
                            <div class="hac-row-total-item">
                                <div class="num">{{monthPlan.postponePlan ?? 0}}</div>
                                <div class="text">累计延期任务</div>
                            </div>
                        </el-col>
                        <el-col :span="4">
                            <div class="hac-row-total-item">
                                <div class="num">{{monthPlan.transferPlan ?? 0}}</div>
                                <div class="text">累计转移任务</div>
                            </div>
                        </el-col>
                        <el-col :span="4">
                            <div class="hac-row-total-item">
                                <div class="num">{{monthPlan.notFilledLog ?? 0}}</div>
                                <div class="text">累计未填写日志</div>
                            </div>
                        </el-col>
                    </el-row>
                </div>
            </HcCardItem>

            <HcCardItem ui="hac-card-item mt-4">
                <template #header>
                    <div class="hac-card-title">计划统计图</div>
                </template>
                <div class="hac-card-item-body">
                    <div class="hc-row-echarts-box">
                        <BarLabelRotation isMonth :datas="planDatas" :legend="{show:false,   }" v-if="planDatas.length > 0"/>
                        <HcStatus class="hc-home-bar-label-rotation-status" v-else/>
                    </div>
                </div>
            </HcCardItem>
        </div>
    </el-scrollbar>
</template>

<script setup>
import {onActivated, onMounted, ref} from "vue";
import mainApi from "~api/home/index";
import BarLabelRotation from "~com/echarts/BarLabelRotation.vue";
import {getArrValue, getObjValue} from "js-fast-way";

//时间类
import dayjs from "dayjs"
import 'dayjs/locale/zh-cn'
dayjs.locale('zh-cn')

//获取当前年月
onMounted(() => {
    planTime.value = dayjs().format('YYYY-MM')
})

//缓存页面被激活时
onActivated(() => {
    getApi()
})

const getApi = () => {
    getPlanOverview()
    getTableData()
    getUserInform()
    getMonthPlanOverview()
    getMonthOfYearPlanOverview()
}

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

//最新预警信息
const tableColumn = [
    {key: 'planTaskDesc', name: '任务名称', align: 'left'},
    {key: 'projectName', name: '关联项目', align: 'left'},
    {key: 'planEndTime', name: '完成时间', align: 'left'}
]
const tableData = ref([])
const getTableData = async () => {
    const {error, code, data} = await mainApi.postponePlan()
    //判断状态
    if (!error && code === 200) {
        tableData.value = getArrValue(data)
    } else {
        tableData.value = []
    }
}

//通知数据
const userInformData = ref([])
const getUserInform = async () => {
    const {error, code, data} = await mainApi.getUserInform()
    //判断状态
    if (!error && code === 200) {
        userInformData.value = getArrValue(data)
    } else {
        userInformData.value = []
    }
}

//选择日期时间
const planTime = ref('2023-02')
const planTimeChange = () => {
    getMonthPlanOverview()
}

//门户普通权限单月计划统计
const monthPlan = ref({})
const getMonthPlanOverview = async () => {
    const {error, code, data} = await mainApi.monthPlanOverview({
        planDate: planTime.value
    })
    //判断状态
    if (!error && code === 200) {
        monthPlan.value = getObjValue(data)
    } else {
        monthPlan.value = {}
    }
}

//计划统计图
const initPlanData = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
const planDatas = ref([
    {name: '总计划', value: initPlanData},
    {name: '已完成', value: initPlanData},
    {name: '未完成', value: initPlanData},
])
const getMonthOfYearPlanOverview = async () => {
    const {error, code, data} = await mainApi.monthOfYearPlanOverview()
    //判断状态
    if (!error && code === 200) {
        planDatas.value = [] //先清空数据
        const arr = getArrValue(data)
        //判断是否存在数据
        if (arr.length > 0) {
            planDatas.value = arr
        } else {
            //接口没有返回数据，显示全部默认为0的数据
            planDatas.value = [
                {name: '总计划', value: initPlanData},
                {name: '已完成', value: initPlanData},
                {name: '未完成', value: initPlanData},
            ]
        }
    } else {
        //接口没有返回数据（报错或异常时），显示全部默认为0的数据
        planDatas.value = [
            {name: '总计划', value: initPlanData},
            {name: '已完成', value: initPlanData},
            {name: '未完成', value: initPlanData},
        ]
    }
}
</script>

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

<style lang="scss">
.hc-home-bar-label-rotation-status.hc-page-status-box {
    .page-status {
        top: -10px;
        margin-bottom: 14px;
        .page-status-img {
            width: 290px;
        }
        .page-status-text {
            font-size: 16px;
        }
    }
}
</style>