1111

src/styles/app/element.scss

@@ -0,0 +1,3 @@
+.el-tour__content {
+    outline: none;
+}

src/styles/view/datav.scss

@@ -88,16 +88,16 @@
                 .upper-num {
                     border-radius: 50%;
                     &.a1 {
-                        background: #2E7EDC;
+                        background: #FFD9C8;
                     }
                     &.a2 {
-                        background: #FE9C06;
+                        background: #FFD219;
                     }
                     &.a3 {
-                        background: #25E196;
+                        background: #5BD4D9;
                     }
                     &.a4 {
-                        background: #B641FD;
+                        background: #FE692A;
                     }
                 }
                 .content .data {
@@ -203,6 +203,15 @@
             border-image-slice: 100 80 80 80 fill;
             border-image-width: 30px 20px 20px 20px;
             transition: all linear 0.1s;
+            .title {
+                position: absolute;
+                color: #21CFFC;
+                top: -39px;
+                width: 100%;
+                font-size: 22px;
+                text-align: center;
+                font-weight: bold;
+            }
         }
     }
 }

src/views/home/datav.vue

@@ -4,17 +4,19 @@
         <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">
+                <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">
-                <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 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">
@@ -128,7 +130,10 @@
                         </div>
                     </div>
                     <div class="hc-datav-row-line relative">
-                        222
+                        <div class="title">项目数据</div>
+                        <div class="hc-full relative">
+                            <HcDatavCharts />
+                        </div>
                     </div>
                 </el-col>
                 <el-col :span="8" class="h-full">
@@ -203,11 +208,15 @@
                 </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 { nextTick, onMounted, ref } from 'vue'
 import router from '~src/router/index'
 import { useAppStore } from '~src/store'
 import bgPng from '~src/assets/images/datav-bg.png'
@@ -216,13 +225,26 @@ 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'
 
 const store = useAppStore()
 
-onMounted(() => {
+//引导
+const nameRef = ref(null)
+const searchRef = ref(null)
+const tourOpen = ref(false)
 
+onMounted(() => {
+    setTimeout(() => {
+        tourOpen.value = true
+    }, 500)
 })
 
+//关闭引导提示
+const tourFinishClose = () => {
+    console.log('关闭引导提示')
+}
+
 //搜索表单
 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年' }]

src/views/home/modules/charts.vue

@@ -0,0 +1,77 @@
+<template>
+    <hc-charts ref="charts" :option="chartsOption" dark />
+</template>
+
+<script setup>
+import { onMounted, ref, watch } from 'vue'
+
+const props = defineProps({
+    datas: {
+        type: Array,
+        default: () => ([]),
+    },
+})
+
+//渲染完成
+onMounted(() => {
+    setClassifyChartsOption(props.datas)
+})
+
+//监听值变化
+watch(() => props.datas, (val) => {
+    setClassifyChartsOption(val)
+})
+
+//处理数据
+const charts = ref(null)
+const chartsOption = ref({})
+const setClassifyChartsOption = (data) => {
+    const colors = ['#BE8368', '#08818E', '#C1484A']
+    chartsOption.value = {
+        backgroundColor: '',
+        color: colors,
+        tooltip: {
+            trigger: 'axis',
+        },
+        legend: {
+            top: '6',
+            data: ['超进度项目', '常规项目', '滞后项目'],
+        },
+        grid: {
+            top: '50',
+            left: '10',
+            right: '20',
+            bottom: '5',
+            containLabel: true,
+        },
+        xAxis: {
+            type: 'category',
+            boundaryGap: false,
+            data: ['一季度', '二季度', '三季度', '四季度'],
+        },
+        yAxis: {
+            type: 'value',
+        },
+        series: [
+            {
+                name: '超进度项目',
+                type: 'line',
+                smooth: true,
+                data: [120, 234, 101, 101],
+            },
+            {
+                name: '常规项目',
+                type: 'line',
+                smooth: true,
+                data: [220, 134, 191, 101],
+            },
+            {
+                name: '滞后项目',
+                type: 'line',
+                smooth: true,
+                data: [150, 154, 201, 101],
+            },
+        ],
+    }
+}
+</script>