二级列表初步绘制

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>

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" :chartData="chartData" />
-            <component :is="ChartTypeName" />
         </div>
     </div>
 </template>
@@ -30,6 +29,11 @@ export default {
             type: String,
             default: 'PieChart'
         }
+    },
+    data() {
+        return {
+            chartData: {}
+        }
     }
 }
 </script>

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>

src/views/home/equipment-supply/index.vue

@@ -1,7 +1,8 @@
 <template>
     <div class="app-container">
+        <template v-if="!isHome">
             <!-- 机具供应展示 -->
-        <el-form size="small" :model="queryParams">
+            <el-form size="small" :model="queryParams" ref="queryFormRef">
                 <el-row>
                     <el-col :span="6">
                         <el-form-item>
@@ -16,15 +17,27 @@
                         </el-form-item>
                     </el-col>
                     <el-col :span="6">
-                    <el-form-item>
+                        <el-form-item prop="company">
-                        <el-select placeholder="选择公司" style="width: 95%">
+                            <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>
+                        <el-form-item prop="project">
-                        <el-select placeholder="选择工程" style="width: 95%">
+                            <el-select
+                                clearable
+                                filterable
+                                style="width: 95%"
+                                placeholder="选择工程"
+                                v-model="queryParams.project"
+                            >
                                 <el-option label="全部" value="1" />
                             </el-select>
                         </el-form-item>
@@ -48,6 +61,7 @@
                             :cardTitle="card.title"
                             :iconType="card.icon"
                             :isReduce="card.isReduce"
+                            @onOpenLevelTwoPages="onOpenLevelTwoPages"
                         />
                     </div>
                     <div class="card-box-space-last">
@@ -70,6 +84,7 @@
                             :cardTitle="card.title"
                             :iconType="card.icon"
                             :isReduce="card.isReduce"
+                            @onOpenLevelTwoPages="onOpenLevelTwoPages"
                         />
                     </div>
                 </div>
@@ -82,23 +97,39 @@
                     <ChartModelBox :chartTitle="chart.title" :ChartTypeName="chart.type" />
                 </div>
             </div>
+        </template>
+
+        <template v-else>
+            <TableModel @onCloseLevelTwoPages="onCloseLevelTwoPages" :levelTwoTitle="levelTwoTitle" />
+        </template>
     </div>
 </template>
 
 <script>
-import CardModel from './components/card-model'
+import CardModel from './components/card-model' // 卡片组件
-import CardModelSpace from './components/card-model-space'
+import CardModelSpace from './components/card-model-space' // 第一行右侧小卡片组件
-import ChartModelBox from './components/chart-model-box'
+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
         }
     }
 }