大屏

src/styles/view/datav.scss

@@ -46,6 +46,13 @@
             }
         }
     }
+    .hc-datav-total .hc-diy-datav-card {
+        .text {
+            position: relative;
+            margin-left: 2px;
+            top: 10px;
+        }
+    }
     .hc-datav-divider {
         position: relative;
         margin-top: 8px;

src/views/home/datav.vue

@@ -14,17 +14,20 @@
                     <div ref="searchRef" class="relative">
                         <HcDatavSelect v-model="searchForm.year" :datas="yearArr" />
                         <HcDatavSelect v-model="pageType" :datas="pageTypeArr" :clearable="false" @change="pageTypeChange" />
-                        <HcDatavSelect v-model="searchForm.month" :datas="monthArr" placeholder="选择月份" />
-                        <HcDatavSelect v-model="searchForm.lag" :datas="lagArr" />
-                        <HcDatavSelect v-model="searchForm.level" :datas="levelArr" placeholder="滞后等级" />
+                        <template v-if="pageType === '1'">
+                            <HcDatavSelect v-model="searchForm.month" :datas="monthArr" placeholder="选择月份" />
+                            <HcDatavSelect v-model="searchForm.lag" :datas="lagArr" />
+                            <HcDatavSelect v-if="searchForm.lag === '3'" v-model="searchForm.level" :datas="levelArr" placeholder="滞后等级" />
+                        </template>
                         <HcDatavSelect v-model="searchForm.stage" :datas="stageArr" placeholder="项目阶段" />
-                        <HcDatavSelect v-model="searchForm.type" :datas="typeArr" placeholder="项目类型" />
+                        <HcDatavSelect v-if="pageType === '1'" v-model="searchForm.type" :datas="typeArr" placeholder="项目类型" />
+                        <HcDatavSelect v-else v-model="searchForm.quarter" :datas="quarterArr" placeholder="选择季度" />
                     </div>
                     <div class="date flex-1">截止时间：2024年04月08日</div>
                 </div>
             </div>
             <div class="hc-datav-total relative p-[14px]">
-                <el-row :gutter="24">
+                <el-row v-if="pageType === '1'" :gutter="24">
                     <el-col :span="6">
                         <HcDatavCard title="项目总量" num="860" unit="" color="#D5DEFF" />
                     </el-col>
@@ -43,11 +46,31 @@
                         <HcDatavCard title="投资完成比例" num="58" unit="%" color="#1DC98B" />
                     </el-col>
                 </el-row>
+                <el-row v-else :gutter="24">
+                    <el-col :span="6" />
+                    <el-col :span="6">
+                        <HcDatavCard>
+                            <div class="hc-diy-datav-card hc-full hc-flex-center">
+                                <span class="num vertical-sub text-[60px] font-bold" style="color: #ECCF6D">8</span>
+                                <span class="text text-[28px] font-bold">个方面</span>
+                            </div>
+                        </HcDatavCard>
+                    </el-col>
+                    <el-col :span="6">
+                        <HcDatavCard>
+                            <div class="hc-diy-datav-card hc-full hc-flex-center">
+                                <span class="num vertical-sub text-[60px] font-bold" style="color: #0BD70E">30</span>
+                                <span class="text text-[28px] font-bold">项任务</span>
+                            </div>
+                        </HcDatavCard>
+                    </el-col>
+                    <el-col :span="6" />
+                </el-row>
             </div>
             <div class="hc-datav-divider" />
         </div>
         <div id="hc-datav-row-total-body" class="hc-datav-row-total relative p-[14px]">
-            <el-row :gutter="24" class="h-full">
+            <el-row v-if="pageType === '1'" :gutter="24" class="h-full">
                 <el-col :span="8" class="h-full">
                     <div class="hc-datav-row-column h-full">
                         <div class="title">投资数据</div>
@@ -117,7 +140,7 @@
                             </hc-row>
                         </div>
                         <div class="hc-datav-divider" />
-                        <div class="hc-datav-table relative">
+                        <div v-if="searchForm.lag !== '3'" class="hc-datav-table relative">
                             <HcDatavTable :column="tableColumn1" :datas="tableData1" is-current @row-click="tableRowClick">
                                 <template #key3="{ row }">
                                     <span style="color: #06A3FF;" class="font-bold">{{ row.key3 }}</span>
@@ -130,6 +153,19 @@
                                 </template>
                             </HcDatavTable>
                         </div>
+                        <div v-else class="hc-datav-table relative">
+                            <HcDatavTable :column="lagColumn1" :datas="lagData1" is-current @row-click="lagRowClick">
+                                <template #key3="{ row }">
+                                    <span style="color: #06A3FF;" class="font-bold">{{ row.key3 }}</span>
+                                </template>
+                                <template #key4="{ row }">
+                                    <span style="color: #10C90F;" class="font-bold">{{ row.key4 }}</span>
+                                </template>
+                                <template #key5="{ row }">
+                                    <span style="color: #D7A70D;" class="font-bold">{{ row.key5 }}</span>
+                                </template>
+                            </HcDatavTable>
+                        </div>
                     </div>
                 </el-col>
                 <el-col :span="8" class="h-full">
@@ -221,7 +257,7 @@
                             </hc-row>
                         </div>
                         <div class="hc-datav-divider" />
-                        <div class="hc-datav-table relative">
+                        <div v-if="searchForm.lag !== '3'" class="hc-datav-table relative">
                             <HcDatavTable :column="tableColumn2" :datas="tableData2">
                                 <template #key3="{ row }">
                                     <span style="color: #D8A70F;" class="font-bold">{{ row.key3 }}</span>
@@ -234,9 +270,28 @@
                                 </template>
                             </HcDatavTable>
                         </div>
+                        <div v-else class="hc-datav-table relative">
+                            <HcDatavTable :column="lagColumn2" :datas="lagData2">
+                                <template #key3="{ row }">
+                                    <span style="color: #D8A70F;" class="font-bold">{{ row.key3 }}</span>
+                                </template>
+                                <template #key4="{ row }">
+                                    <span style="color: #0BD70E;" class="font-bold">{{ row.key4 }}</span>
+                                </template>
+                                <template #key5="{ row }">
+                                    <span style="color: #FF0000;" class="font-bold">{{ row.key5 }}</span>
+                                </template>
+                            </HcDatavTable>
+                        </div>
                     </div>
                 </el-col>
             </el-row>
+            <div v-else class="hc-datav-row-column h-full">
+                <div class="title">工作要点</div>
+                <div class="hc-datav-table relative">
+                    <HcDatavTable :column="workColumn" :datas="workData" />
+                </div>
+            </div>
         </div>
         <el-tour v-model="tourOpen" @close="tourFinishClose">
             <el-tour-step :target="nameRef" title="操作提示" description="点击这里，进入数据分析工具" />
@@ -302,6 +357,7 @@ const lagArr = [{ id: '1', name: '超进度项目' }, { id: '2', 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 quarterArr = [{ id: '1', name: '一季度' }, { id: '2', name: '二季度' }, { id: '3', name: '三季度' }, { id: '4', name: '四季度' }]
 
 //页面类型改变
 const pageTypeChange = () => {
@@ -337,6 +393,21 @@ const tableRowClick = (row) => {
     console.log(row)
 }
 
+//滞后表格1
+const lagColumn1 = [
+    { key: 'key1', name: '滞后等级' }, { key: 'key2', name: '项目名称' },
+    { key: 'key3', name: '计划总投资' }, { key: 'key4', name: '实际已投资' },
+    { key: 'key5', name: '未完成投资' },
+]
+const lagData1 = ref([
+    { 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 },
+])
+const lagRowClick = (row) => {
+    console.log(row)
+}
+
 //表格2
 const tableColumn2 = [
     { key: 'key1', name: '项目阶段' }, { key: 'key2', name: '项目类型' },
@@ -350,6 +421,32 @@ const tableData2 = ref([
     { key1: '在建项目', key2: 'xx', key3: '12', key4: '12', key5: 12, key6: 12 },
 ])
 
+//滞后表格2
+const lagColumn2 = [
+    { key: 'key1', name: '滞后等级' }, { key: 'key2', name: '项目名称' },
+    { key: 'key3', name: '进度滞后季度' }, { key: 'key4', name: '进度滞后月份' },
+    { key: 'key5', name: '进度百分比' },
+]
+const lagData2 = ref([
+    { key1: '一级', key2: 'xx', key3: '一季度', key4: '1月', key5: '38%' },
+    { key1: '二级', key2: 'xx', key3: '二季度', key4: '2月', key5: '48%' },
+    { key1: '三级', key2: 'xx', key3: '三季度', key4: '3月', key5: '58%' },
+])
+
+//工作要点表格
+const workColumn = [
+    { key: 'key1', name: '滞后等级' }, { key: 'key2', name: '项目名称' },
+    { key: 'key3', name: '进度滞后季度' }, { key: 'key4', name: '进度滞后月份' },
+    { key: 'key5', name: '进度百分比' },
+]
+const workData = ref([
+    { key1: '一级', key2: 'xx', key3: '一季度', key4: '1月', key5: '38%' },
+    { key1: '二级', key2: 'xx', key3: '二季度', key4: '2月', key5: '48%' },
+    { key1: '三级', key2: 'xx', key3: '三季度', key4: '3月', key5: '58%' },
+])
+
+
+
 //跳转到首页
 const toHomePage = () => {
     router.push({ name: store.home })