From c874c4b2e13dfb73e8e69c689707203ab9b504dd Mon Sep 17 00:00:00 2001
From: qianlishi <1432731663@qq.com>
Date: Fri, 10 Jan 2025 20:35:56 +0800
Subject: [PATCH] =?UTF-8?q?=E6=8A=A5=E8=A1=A8=E8=AE=BE=E8=AE=A1-=E8=A1=A8?=
 =?UTF-8?q?=E6=A0=BC=E6=8A=A5=E8=A1=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/views/report/bigScreen/index.vue      |   4 +-
 .../src/views/report/excelReport/index.vue    | 211 +++++++++++++++++-
 2 files changed, 210 insertions(+), 5 deletions(-)

diff --git a/Report-V3-TS/src/views/report/bigScreen/index.vue b/Report-V3-TS/src/views/report/bigScreen/index.vue
index e52e6496..b2400b64 100644
--- a/Report-V3-TS/src/views/report/bigScreen/index.vue
+++ b/Report-V3-TS/src/views/report/bigScreen/index.vue
@@ -18,12 +18,12 @@
           <n-grid :x-gap="12" :y-gap="8" :cols="3">
             <n-gi>
               <n-form-item label="姓名">
-                <n-input v-model:value="formModel.reportCode" placeholder="名称" />
+                <n-input v-model:value="formModel.reportName" placeholder="名称" />
               </n-form-item>
             </n-gi>
             <n-gi>
               <n-form-item label="报表编码">
-                <n-input v-model:value="formModel.reportName" placeholder="报表编码" />
+                <n-input v-model:value="formModel.reportCode" placeholder="报表编码" />
               </n-form-item>
             </n-gi>
             <n-gi>
diff --git a/Report-V3-TS/src/views/report/excelReport/index.vue b/Report-V3-TS/src/views/report/excelReport/index.vue
index fae9b160..cbb60e71 100644
--- a/Report-V3-TS/src/views/report/excelReport/index.vue
+++ b/Report-V3-TS/src/views/report/excelReport/index.vue
@@ -3,13 +3,218 @@
  * @Author: qianlishi
  * @Date: 2024-12-08 16:34:50
  * @LastEditors: qianlishi
- * @LastEditTime: 2024-12-08 16:49:51
+ * @LastEditTime: 2025-01-10 20:35:19
 -->
 <template>
-  <div>表格报表</div>
+  <div class="view-container">
+    <div class="search">
+      <n-form
+        size="small"
+        label-placement="left"
+        :model="formModel"
+        ref="formElRef"
+      >
+        <div class="search-form">
+          <n-grid :x-gap="12" :y-gap="8" :cols="3">
+            <n-gi>
+              <n-form-item label="名称">
+                <n-input v-model:value="formModel.reportName" placeholder="名称" />
+              </n-form-item>
+            </n-gi>
+            <n-gi>
+              <n-form-item label="报表编码">
+                <n-input v-model:value="formModel.reportCode" placeholder="报表编码" />
+              </n-form-item>
+            </n-gi>
+            <n-gi>
+              <n-space>
+                <n-button size="small" @click="toRestForm">重置</n-button>
+                <n-button type="primary" size="small" @click="getData">查询</n-button>
+              </n-space> 
+            </n-gi>
+          </n-grid>
+        </div>
+    </n-form>
+    </div>
+    <div class="card">
+      <n-grid x-gap="24" :cols="4">
+        <n-gi class="bg" v-for="(item, index) in list">
+          <img
+            class="bg-img"
+            :src="!item.reportImage ? requireImg('../../../assets/images/charts.jpg') : item.reportImage"
+            alt=""
+          />
+          <div class="content">
+            <header>{{ item.reportName }}</header>
+            <footer>
+              {{ item.updateTime }}
+              <div class="operation">
+                <n-button quaternary circle type="success">
+                  <template #icon>
+                    <n-icon><CashIcon /></n-icon>
+                  </template>
+                </n-button>
+                <n-button quaternary circle type="warning">
+                  <template #icon>
+                    <n-icon><CashIcon /></n-icon>
+                  </template>
+                </n-button>
+                <n-button quaternary circle type="error">
+                  <template #icon>
+                    <n-icon><CashIcon /></n-icon>
+                  </template>
+                </n-button>
+              </div>
+            </footer>
+          </div>
+        </n-gi>
+      </n-grid>
+    </div>
+    <div class="pagination">
+      <n-pagination  
+        :page-count="pages"
+        show-size-picker
+        :page-sizes="[8, 24, 64, 80]"
+        show-quick-jumper 
+        :displayOrder="['pages', 'quick-jumper', 'size-picker']"
+        @update:page="handlePage"
+        @update:page-size="handlePageSize"  
+      />
+    </div>
+  </div>
 </template>
 <script lang="ts" setup>
+import { CashOutline as CashIcon } from '@vicons/ionicons5'
+  import { reactive, onMounted, ref } from 'vue'
+  import { getPageList } from '@/api/report/bigScreen'
+
+  interface formProps {
+    reportCode: string;
+    reportName: string;
+    reportType: string;
+    pageNumber: number;
+    pageSize: number;
+    order: 'DESC' | 'ASC';
+    sort: string
+  }
+
+  const formModel = reactive<formProps>({
+    reportCode: "",
+    reportName: "",
+    reportType: "report_excel",
+    pageNumber: 1,
+    pageSize: 8,
+    order: "DESC",
+    sort: "update_time"
+  })
+  const pages = ref<number>(0)
+  const list = ref<Recordable[]>()
+
+  const getParams = () => {
+    return formModel
+  }
+
+  const getData = async () => {
+    const params = getParams()
+    const { code, data } = await getPageList(params)
+    if(code != 200) return
+    list.value = data.records
+    pages.value = data.pages
+    console.log(data)
+  }
+
+  const toRestForm = () => {
+    formModel.pageNumber = 1
+    formModel.pageSize = 8
+    formModel.reportCode = ''
+    formModel.reportName = ''
+  }
+
+  const handlePage = (page: number) => {
+    formModel.pageNumber = page
+    getData()
+  }
+
+  // 分页条数
+  const handlePageSize = (pageSizes: number) => {
+    formModel.pageNumber = 1
+    formModel.pageSize = pageSizes
+    getData()
+  }
+
+  const requireImg = (name: string) => {
+    return new URL(`${name}`, import.meta.url).href
+  }
+  onMounted(() => {
+    getData()
+  })
 
 </script>
-<style lang="less" scoped></style>
+<style lang="less" scoped>
+.view-container {
+  width: 100%;
+  height: calc(100vh - 118px);
+  background: #fff;
+  padding: 20px 10px;
+  margin-left: 6px;
+  .card {
+    height: calc(100vh - 250px);
+    overflow-y: auto;
+  }
+  .search {
+    border-bottom: 1px solid #dbdde3;
+  }
+  .bg {
+    width: 100%;
+    height: 200px;
+    position: relative;
+    overflow: hidden;
+    margin: 10px 0;
+    border: 12px solid white;
+  }
+
+  .bg .bg-img {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    filter: blur(6px);
+    z-index: 2;
+  }
+  header {
+    font-size: 24px;
+    text-align: center;
+    line-height: 80px;
+  }
+  .content {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    color: #fff;
+    left: 0;
+    top: 0;
+    z-index: 3;
+  }
+  footer {
+    width: 100%;
+    font-size: 14px;
+    padding: 16px;
+    line-height: 30px;
+    position: absolute;
+    z-index: 3;
+    bottom: 0;
+    .operation {
+      float: right;
+      .view,
+      .edit {
+        color: #fff;
+        font-size: 14px;
+      }
+    }
+  }
+  .pagination {
+    margin-top: 20px;
+  }
+}
+</style>
+