From 9bb9a57f904cd6d728848d436ec7eb81b04cc378 Mon Sep 17 00:00:00 2001
From: BianLzhaoMin <11485688+bianliangzhaomin123@user.noreply.gitee.com>
Date: Fri, 21 Mar 2025 16:38:15 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BA=8C=E7=BA=A7=E5=88=97=E8=A1=A8=E5=88=9D?=
 =?UTF-8?q?=E6=AD=A5=E7=BB=98=E5=88=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/card-model.vue                 |  12 +-
 .../components/chart-model-box.vue            |   8 +-
 .../components/table-model.vue                |  44 ++++
 src/views/home/equipment-supply/index.vue     | 199 +++++++++++-------
 4 files changed, 180 insertions(+), 83 deletions(-)
 create mode 100644 src/views/home/equipment-supply/components/table-model.vue

diff --git a/src/views/home/equipment-supply/components/card-model.vue b/src/views/home/equipment-supply/components/card-model.vue
index ca7b43c1..0a280a8e 100644
--- a/src/views/home/equipment-supply/components/card-model.vue
+++ b/src/views/home/equipment-supply/components/card-model.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="card-model" :style="{ backgroundColor: theme }">
+    <div class="card-model" :style="{ backgroundColor: theme }" @click="onHandleViewDetails">
         <div class="f-14">
             <svg-icon :icon-class="iconType" class="icon-box" />
             {{ cardTitle }}
@@ -25,7 +25,7 @@ export default {
         // 标题
         cardTitle: {
             type: String,
-            default: '标题'
+            default: ''
         },
         // 图标类型
         iconType: {
@@ -37,6 +37,14 @@ export default {
             type: Boolean,
             default: true
         }
+    },
+
+    methods: {
+        onHandleViewDetails() {
+            console.log('查询二级页面', this.cardTitle)
+            // 使用自定义事件 通知父组件打开二级页面
+            this.$emit('onOpenLevelTwoPages', this.cardTitle)
+        }
     }
 }
 </script>
diff --git a/src/views/home/equipment-supply/components/chart-model-box.vue b/src/views/home/equipment-supply/components/chart-model-box.vue
index 30699975..491a1504 100644
--- a/src/views/home/equipment-supply/components/chart-model-box.vue
+++ b/src/views/home/equipment-supply/components/chart-model-box.vue
@@ -3,8 +3,7 @@
         <div class="chart-title">{{ chartTitle }}</div>
         <div class="chart-content">
             <!-- <PieChart /> -->
-
-            <component :is="ChartTypeName" />
+            <component :is="ChartTypeName" :chartData="chartData" />
         </div>
     </div>
 </template>
@@ -30,6 +29,11 @@ export default {
             type: String,
             default: 'PieChart'
         }
+    },
+    data() {
+        return {
+            chartData: {}
+        }
     }
 }
 </script>
diff --git a/src/views/home/equipment-supply/components/table-model.vue b/src/views/home/equipment-supply/components/table-model.vue
new file mode 100644
index 00000000..41ae4502
--- /dev/null
+++ b/src/views/home/equipment-supply/components/table-model.vue
@@ -0,0 +1,44 @@
+<template>
+    <div class="table-container">
+        <PageHeader :pageContent="levelTwoTitle" @goBack="goBack" />
+        <el-table>
+            <el-table-column type="index" width="55" />
+            <el-table-column align="center" label="占位1" prop="maCode" />
+            <el-table-column align="center" label="占位2" prop="maCode" />
+            <el-table-column align="center" label="占位3" prop="maCode" />
+            <el-table-column align="center" label="占位4" prop="maCode" />
+            <el-table-column align="center" label="占位5" prop="maCode" />
+            <el-table-column align="center" label="占位6" prop="maCode" />
+            <el-table-column align="center" label="占位7" prop="maCode" />
+            <el-table-column align="center" label="占位8" prop="maCode" />
+        </el-table>
+    </div>
+</template>
+
+<script>
+import PageHeader from '@/components/pageHeader'
+export default {
+    components: {
+        PageHeader
+    },
+    props: {
+        levelTwoTitle: {
+            type: String,
+            default: '详情'
+        }
+    },
+    data() {
+        return {}
+    },
+    methods: {
+        goBack() {
+            this.$emit('onCloseLevelTwoPages')
+        }
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+.table-container {
+}
+</style>
diff --git a/src/views/home/equipment-supply/index.vue b/src/views/home/equipment-supply/index.vue
index 6cd60fb8..42e6cec1 100644
--- a/src/views/home/equipment-supply/index.vue
+++ b/src/views/home/equipment-supply/index.vue
@@ -1,104 +1,135 @@
 <template>
     <div class="app-container">
-        <!-- 机具供应展示 -->
-        <el-form size="small" :model="queryParams">
-            <el-row>
-                <el-col :span="6">
-                    <el-form-item>
-                        <el-date-picker
-                            v-model="queryDate"
-                            type="monthrange"
-                            range-separator="至"
-                            start-placeholder="开始日期"
-                            end-placeholder="结束日期"
-                            value-format="yyyy-M"
+        <template v-if="!isHome">
+            <!-- 机具供应展示 -->
+            <el-form size="small" :model="queryParams" ref="queryFormRef">
+                <el-row>
+                    <el-col :span="6">
+                        <el-form-item>
+                            <el-date-picker
+                                v-model="queryDate"
+                                type="monthrange"
+                                range-separator="至"
+                                start-placeholder="开始日期"
+                                end-placeholder="结束日期"
+                                value-format="yyyy-M"
+                            />
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="6">
+                        <el-form-item prop="company">
+                            <el-select
+                                clearable
+                                filterable
+                                style="width: 95%"
+                                placeholder="选择公司"
+                                v-model="queryParams.company"
+                            >
+                                <el-option label="全部" value="1" />
+                            </el-select>
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="6">
+                        <el-form-item prop="project">
+                            <el-select
+                                clearable
+                                filterable
+                                style="width: 95%"
+                                placeholder="选择工程"
+                                v-model="queryParams.project"
+                            >
+                                <el-option label="全部" value="1" />
+                            </el-select>
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="6">
+                        <el-form-item>
+                            <el-button type="primary" icon="el-icon-search" @click="onHandleSearch">查询</el-button>
+                            <el-button icon="el-icon-refresh" @click="onHandleReset">重置</el-button>
+                        </el-form-item>
+                    </el-col>
+                </el-row>
+            </el-form>
+
+            <!-- 卡片区域 -->
+            <div class="card-box">
+                <div class="title">需求供应</div>
+                <div class="card-box-content-1">
+                    <div v-for="(card, index) in cardList_1" :key="index">
+                        <CardModel
+                            :theme="card.theme"
+                            :cardTitle="card.title"
+                            :iconType="card.icon"
+                            :isReduce="card.isReduce"
+                            @onOpenLevelTwoPages="onOpenLevelTwoPages"
                         />
-                    </el-form-item>
-                </el-col>
-                <el-col :span="6">
-                    <el-form-item>
-                        <el-select placeholder="选择公司" style="width: 95%">
-                            <el-option label="全部" value="1" />
-                        </el-select>
-                    </el-form-item>
-                </el-col>
-                <el-col :span="6">
-                    <el-form-item>
-                        <el-select placeholder="选择工程" style="width: 95%">
-                            <el-option label="全部" value="1" />
-                        </el-select>
-                    </el-form-item>
-                </el-col>
-                <el-col :span="6">
-                    <el-form-item>
-                        <el-button type="primary" icon="el-icon-search" @click="onHandleSearch">查询</el-button>
-                        <el-button icon="el-icon-refresh" @click="onHandleReset">重置</el-button>
-                    </el-form-item>
-                </el-col>
-            </el-row>
-        </el-form>
-
-        <!-- 卡片区域 -->
-        <div class="card-box">
-            <div class="title">需求供应</div>
-            <div class="card-box-content-1">
-                <div v-for="(card, index) in cardList_1" :key="index">
-                    <CardModel
-                        :theme="card.theme"
-                        :cardTitle="card.title"
-                        :iconType="card.icon"
-                        :isReduce="card.isReduce"
-                    />
-                </div>
-                <div class="card-box-space-last">
-                    <CardModelSpace
-                        :key="index"
-                        :theme="card.theme"
-                        :cardTitle="card.title"
-                        :iconType="card.icon"
-                        v-for="(card, index) in cardList_3"
-                    />
+                    </div>
+                    <div class="card-box-space-last">
+                        <CardModelSpace
+                            :key="index"
+                            :theme="card.theme"
+                            :cardTitle="card.title"
+                            :iconType="card.icon"
+                            v-for="(card, index) in cardList_3"
+                        />
+                    </div>
                 </div>
             </div>
-        </div>
-        <div class="card-box">
-            <div class="title">仓储状态</div>
-            <div class="card-box-content">
-                <div v-for="(card, index) in cardList_2" :key="index">
-                    <CardModel
-                        :theme="card.theme"
-                        :cardTitle="card.title"
-                        :iconType="card.icon"
-                        :isReduce="card.isReduce"
-                    />
+            <div class="card-box">
+                <div class="title">仓储状态</div>
+                <div class="card-box-content">
+                    <div v-for="(card, index) in cardList_2" :key="index">
+                        <CardModel
+                            :theme="card.theme"
+                            :cardTitle="card.title"
+                            :iconType="card.icon"
+                            :isReduce="card.isReduce"
+                            @onOpenLevelTwoPages="onOpenLevelTwoPages"
+                        />
+                    </div>
                 </div>
             </div>
-        </div>
 
-        <!-- 图表区域 -->
+            <!-- 图表区域 -->
 
-        <div class="chart-box">
-            <div :key="index" v-for="(chart, index) in chartList">
-                <ChartModelBox :chartTitle="chart.title" :ChartTypeName="chart.type" />
+            <div class="chart-box">
+                <div :key="index" v-for="(chart, index) in chartList">
+                    <ChartModelBox :chartTitle="chart.title" :ChartTypeName="chart.type" />
+                </div>
             </div>
-        </div>
+        </template>
+
+        <template v-else>
+            <TableModel @onCloseLevelTwoPages="onCloseLevelTwoPages" :levelTwoTitle="levelTwoTitle" />
+        </template>
     </div>
 </template>
 
 <script>
-import CardModel from './components/card-model'
-import CardModelSpace from './components/card-model-space'
-import ChartModelBox from './components/chart-model-box'
+import CardModel from './components/card-model' // 卡片组件
+import CardModelSpace from './components/card-model-space' // 第一行右侧小卡片组件
+import ChartModelBox from './components/chart-model-box' // 图表组件
+import TableModel from './components/table-model' // 二级页面列表组件
 export default {
     components: {
         CardModel,
         CardModelSpace,
-        ChartModelBox
+        ChartModelBox,
+        TableModel
     },
     data() {
         return {
+            // 是否二级页面
+            isHome: false,
+            // 二级页面标题
+            levelTwoTitle: '',
             // 表单查询条件
-            queryParams: {},
+            queryParams: {
+                startTime: '',
+                endTime: '',
+                company: '',
+                project: ''
+            },
             // 日期查询条件
             queryDate: [],
             cardList_1: [
@@ -198,6 +229,16 @@ export default {
         // 重置
         onHandleReset() {
             this.queryDate = []
+            this.$refs.queryFormRef.resetFields()
+        },
+        // 自定义事件 打开二级页面
+        onOpenLevelTwoPages(title) {
+            this.levelTwoTitle = title
+            this.isHome = true
+        },
+        // 自定义事件 关闭二级页面
+        onCloseLevelTwoPages() {
+            this.isHome = false
         }
     }
 }