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 ref="nameRef" class="name hc-flex" @click="toHomePage">
                    <i class="i-solar-graph-outline" />
                    项目数据看板
                </div>
            </div>
            <div class="hc-datav-search-select hc-flex w-full">
                <div ref="searchRef" class="relative">
                    <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>
        <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-[10px] text-center text-[16px]">一季度</div>
                                            <div class="data text-center 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-[10px] text-center text-[16px]">二季度</div>
                                            <div class="data text-center 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-[10px] text-center text-[16px]">三季度</div>
                                            <div class="data text-center 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-[10px] text-center text-[16px]">四季度</div>
                                            <div class="data text-center 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 class="hc-datav-divider" />
                        <div class="hc-datav-table relative">
                            <HcDatavTable1 :datas="tableData1" />
                        </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 relative">
                        <div class="title">项目数据</div>
                        <div class="hc-full relative">
                            <HcDatavCharts />
                        </div>
                    </div>
                </el-col>
                <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-[10px] text-center text-[16px]">一季度</div>
                                            <div class="data text-center text-[24px]">
                                                <span class="num font-bold">130</span>
                                                <span class="line">/</span>
                                                <span class="red font-bold">60</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-[10px] text-center text-[16px]">二季度</div>
                                            <div class="data text-center text-[24px]">
                                                <span class="num font-bold">130</span>
                                                <span class="line">/</span>
                                                <span class="red font-bold">60</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-[10px] text-center text-[16px]">三季度</div>
                                            <div class="data text-center text-[24px]">
                                                <span class="num font-bold">130</span>
                                                <span class="line">/</span>
                                                <span class="red font-bold">60</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-[10px] text-center text-[16px]">四季度</div>
                                            <div class="data text-center text-[24px]">
                                                <span class="num font-bold">130</span>
                                                <span class="line">/</span>
                                                <span class="red font-bold">60</span>
                                            </div>
                                        </div>
                                    </div>
                                </hc-col>
                            </hc-row>
                        </div>
                        <div class="hc-datav-divider" />
                        <div class="hc-datav-table relative">
                            <HcDatavTable2 :datas="tableData2" />
                        </div>
                    </div>
                </el-col>
            </el-row>
        </div>
        <el-tour v-model="tourOpen" @close="tourFinishClose">
            <el-tour-step :target="nameRef" title="操作提示" description="点击这里，进入数据分析工具" />
            <el-tour-step :target="searchRef" title="操作提示" description="这里进行数据筛选查询" />
        </el-tour>
    </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import router from '~src/router/index'
import { useAppStore } from '~src/store'
import { getStore, setStore } from 'hc-vue3-ui'
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'
import HcDatavTable1 from './modules/table1.vue'
import HcDatavTable2 from './modules/table2.vue'
import HcDatavCharts from './modules/charts.vue'
import { isNullES } from 'js-fast-way'

const store = useAppStore()

//引导
const nameRef = ref(null)
const searchRef = ref(null)
const tourOpen = ref(false)

onMounted(() => {
    const isTourOpen = getStore('isTourOpen')
    if (isNullES(isTourOpen)) {
        setTimeout(() => {
            tourOpen.value = true
        }, 500)
    }
})

//关闭引导提示
const tourFinishClose = () => {
    console.log('关闭引导提示')
    setStore('isTourOpen', true)
}

//搜索表单
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: '铁路' }]

//表格1
const tableData1 = ref([
    { key1: '在建项目', key2: '铁路', key3: '12000', key4: '12000', key5: 2000 },
    { key1: '在建项目', key2: '民航', key3: '12000', key4: '12000', key5: 2000 },
    { key1: '在建项目', key2: 'xx', key3: '12000', key4: '12000', key5: 2000 },
    { key1: '在建项目', key2: 'xx', key3: '12000', key4: '12000', key5: 2000 },
    { key1: '在建项目', key2: 'xx', key3: '12000', key4: '12000', key5: 2000 },
    { key1: '在建项目', key2: 'xx', key3: '12000', key4: '12000', key5: 2000 },
    { key1: '在建项目', key2: 'xx', key3: '12000', key4: '12000', key5: 2000 },
    { key1: '在建项目', key2: 'xx', key3: '12000', key4: '12000', key5: 2000 },
    { key1: '在建项目', key2: 'xx', key3: '12000', key4: '12000', key5: 2000 },
    { key1: '在建项目', key2: 'xx', key3: '12000', key4: '12000', key5: 2000 },
    { key1: '在建项目', key2: 'xx', key3: '12000', key4: '12000', key5: 2000 },
    { key1: '在建项目', key2: 'xx', key3: '12000', key4: '12000', key5: 2000 },
    { key1: '在建项目', key2: 'xx', key3: '12000', key4: '12000', key5: 2000 },
    { key1: '在建项目', key2: 'xx', key3: '12000', key4: '12000', key5: 2000 },
    { key1: '在建项目', key2: 'xx', key3: '12000', key4: '12000', key5: 2000 },
])

//表格2
const tableData2 = ref([
    { key1: '在建项目', key2: '铁路', key3: '12', key4: '12', key5: 12, key6: 12 },
    { key1: '在建项目', key2: '民航', key3: '12', key4: '12', key5: 12, key6: 12 },
    { key1: '在建项目', key2: 'xx', key3: '12', key4: '12', key5: 12, key6: 12 },
    { key1: '在建项目', key2: 'xx', key3: '12', key4: '12', key5: 12, key6: 12 },
])

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

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