analysis/src/views/home/datav.vue

<template>
    <div class="hc-datav-main hc-full">
        <img class="hc-datav-bg" :src="bgPng" alt="bg">
        <div class="hc-datav-header">
            <img id="datav-header-bg" :src="png2" alt="头部图">
            <div class="header-title hc-flex-center w-full">
                <div class="name hc-flex" @click="toHomePage">
                    <i class="i-solar-graph-outline" />
                    项目数据看板
                </div>
            </div>
            <div class="hc-datav-search-select hc-flex w-full">
                <HcDatavSelect v-model="searchForm.year" :datas="yearArr" />
                <HcDatavSelect v-model="searchForm.quarter" :datas="quarterArr" />
                <HcDatavSelect v-model="searchForm.level" :datas="levelArr" />
                <HcDatavSelect v-model="searchForm.stage" :datas="stageArr" />
                <HcDatavSelect v-model="searchForm.type" :datas="typeArr" />
            </div>
        </div>
        <div class="hc-datav-total relative p-4">
            <el-row :gutter="24">
                <el-col :span="6">
                    <HcDatavCard title="项目总量" num="860" unit="" color="#D5DEFF" />
                </el-col>
                <el-col :span="6">
                    <HcDatavCard title="计划总投资额" num="1590" unit="亿" color="#EEB500" />
                </el-col>
                <el-col :span="6">
                    <HcDatavCard title="目前实际完成投资额" num="590" unit="亿" color="#0DD70C" />
                </el-col>
                <el-col :span="6">
                    <HcDatavCard title="未完成投资额" num="1000" unit="亿" color="#FF0000" />
                </el-col>
            </el-row>
        </div>
        <div class="hc-datav-divider" />
        <div class="hc-datav-row-total relative p-4">
            <el-row :gutter="24" class="h-full">
                <el-col :span="8" class="h-full">
                    <div class="hc-datav-row-column h-full">
                        <div class="title">投资数据</div>
                        <div class="notes">
                            <span>(已完成/</span>
                            <span class="red">未完成</span>
                            <span>)</span>
                        </div>
                        <div class="gird-card-box relative mt-4">
                            <hc-row :gutter="20">
                                <hc-col :span="12">
                                    <div class="gird-card hc-flex p-[14px]">
                                        <div class="upper-num a1 hc-flex-center h-[52px] w-[52px] text-[30px]">Ⅰ</div>
                                        <div class="content relative ml-[12px] h-[52px] flex-1">
                                            <div class="name mb-[10] ml-[20] text-left text-[16px]">一季度</div>
                                            <div class="data text-right text-[24px]">
                                                <span class="num font-bold">130</span>
                                                <span class="line">/</span>
                                                <span class="red font-bold">60</span>
                                                <span class="unit ml-[5px] text-[14px]">(亿)</span>
                                            </div>
                                        </div>
                                    </div>
                                </hc-col>
                                <hc-col :span="12">
                                    <div class="gird-card hc-flex p-[14px]">
                                        <div class="upper-num a2 hc-flex-center h-[52px] w-[52px] text-[30px]">Ⅱ</div>
                                        <div class="content relative ml-[12px] h-[52px] flex-1">
                                            <div class="name mb-[10] ml-[20] text-left text-[16px]">二季度</div>
                                            <div class="data text-right text-[24px]">
                                                <span class="num font-bold">130</span>
                                                <span class="line">/</span>
                                                <span class="red font-bold">60</span>
                                                <span class="unit ml-[5px] text-[14px]">(亿)</span>
                                            </div>
                                        </div>
                                    </div>
                                </hc-col>
                                <hc-col :span="12">
                                    <div class="gird-card hc-flex p-[14px]">
                                        <div class="upper-num a3 hc-flex-center h-[52px] w-[52px] text-[30px]">Ⅲ</div>
                                        <div class="content relative ml-[12px] h-[52px] flex-1">
                                            <div class="name mb-[10] ml-[20] text-left text-[16px]">三季度</div>
                                            <div class="data text-right text-[24px]">
                                                <span class="num font-bold">130</span>
                                                <span class="line">/</span>
                                                <span class="red font-bold">60</span>
                                                <span class="unit ml-[5px] text-[14px]">(亿)</span>
                                            </div>
                                        </div>
                                    </div>
                                </hc-col>
                                <hc-col :span="12">
                                    <div class="gird-card hc-flex p-[14px]">
                                        <div class="upper-num a4 hc-flex-center h-[52px] w-[52px] text-[30px]">Ⅳ</div>
                                        <div class="content relative ml-[12px] h-[52px] flex-1">
                                            <div class="name mb-[10] ml-[20] text-left text-[16px]">四季度</div>
                                            <div class="data text-right text-[24px]">
                                                <span class="num font-bold">130</span>
                                                <span class="line">/</span>
                                                <span class="red font-bold">60</span>
                                                <span class="unit ml-[5px] text-[14px]">(亿)</span>
                                            </div>
                                        </div>
                                    </div>
                                </hc-col>
                            </hc-row>
                        </div>
                    </div>
                </el-col>
                <el-col :span="8" class="h-full">
                    <div class="hc-datav-row-charts relative text-center">
                        <div class="row-charts relative inline-block h-[335px] w-[520px]">
                            <div class="title-box a1">
                                <span>常规项目</span>
                                <span class="num">122</span>
                            </div>
                            <div class="title-box a2">
                                <span>超进度项目</span>
                                <span class="num">333</span>
                            </div>
                            <div class="title-box a3">
                                <span>滞后项目</span>
                                <span class="num">21</span>
                            </div>
                        </div>
                    </div>
                    <div class="hc-datav-row-line">
                        222
                    </div>
                </el-col>
                <el-col :span="8" class="h-full">
                    <div class="hc-datav-row-column h-full">
                        <div class="title">进度数据</div>
                        3333
                    </div>
                </el-col>
            </el-row>
        </div>
    </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import router from '~src/router/index'
import { useAppStore } from '~src/store'
import bgPng from '~src/assets/images/datav-bg.png'
import png2 from '~src/assets/images/datav-2.png'
import HcDatavSelect from './modules/select.vue'
import HcDatavCard from './modules/card.vue'

const store = useAppStore()

onMounted(() => {

})

//搜索表单
const searchForm = ref({ year: '2024', quarter: '1', level: '0', stage: '1', type: '1' })
const yearArr = [{ id: '2024', name: '2024年' }, { id: '2023', name: '2023年' }, { id: '2022', name: '2022年' }]
const quarterArr = [{ id: '1', name: '一季度' }, { id: '2', name: '二季度' }, { id: '3', name: '三季度' }, { id: '4', name: '四季度' }, { id: '0', name: '所有' }]
const levelArr = [{ id: '1', name: '一级' }, { id: '2', name: '二级' }, { id: '3', name: '三级' }, { id: '0', name: '所有' }]
const stageArr = [{ id: '1', name: '项目阶段' }, { id: '2', name: '在建项目' }, { id: '3', name: '新开工项目' }, { id: '4', name: '建成项目' }]
const typeArr = [{ id: '1', name: '公路' }, { id: '2', name: '水利' }, { id: '3', name: '房建' }, { id: '4', name: '铁路' }]

//跳转到首页
const toHomePage = () => {
    router.push({ name: store.home })
}
</script>

<style lang="scss">
@import '~src/styles/view/datav';
</style>