From a00e2784e108f248b252f54370b5c3fac64e3c08 Mon Sep 17 00:00:00 2001
From: duanxiaohai <1812246227@qq.com>
Date: Tue, 12 Nov 2024 17:11:17 +0800
Subject: [PATCH 1/2] gx

---
 src/components/header.vue |  21 +-
 src/router/index.js       |  10 +
 src/utils/request.js      |   2 +-
 src/view/hd_details.vue   | 700 +++++++++++++++++++++++++++++++++++++
 src/view/js_details.vue   | 719 ++++++++++++++++++++++++++++++++++++++
 src/view/sy_table.vue     |  33 +-
 6 files changed, 1464 insertions(+), 21 deletions(-)
 create mode 100644 src/view/hd_details.vue
 create mode 100644 src/view/js_details.vue

diff --git a/src/components/header.vue b/src/components/header.vue
index 8bdcfcf..55e305c 100644
--- a/src/components/header.vue
+++ b/src/components/header.vue
@@ -11,7 +11,12 @@
         <div
           class="back"
           @click="back()"
-          v-if="routers.path == '/home/index/table/details' || routers.path == '/home/index/table/jtDetails'"
+          v-if="
+            routers.path == '/home/index/table/details' ||
+            routers.path == '/home/index/table/jtDetails' ||
+            routers.path == '/home/index/table/fitnessServices' ||
+            routers.path == '/home/index/table/afterschoolActivities'
+          "
         >
           <img src="@/assets/person/back.png" alt="" />
           <p>返回</p>
@@ -109,15 +114,15 @@ const to = (url) => {
   });
   if (url == "/home/index/map") {
     let menu = tools.data.get("menu");
-    if(menu && menu.indexOf('ggfw:ystp') != -1){ 
+    if (menu && menu.indexOf("ggfw:ystp") != -1) {
       data.nowTab = url;
       data.menushow = false;
     }
-  }else{
+  } else {
     data.nowTab = url;
     data.menushow = false;
   }
- 
+
   // data.nowTab = url;
   // data.menushow = false;
 };
@@ -198,19 +203,19 @@ const data = reactive({
   ],
   nowTab: "/home/index",
 });
-const timeT=ref(null);
+const timeT = ref(null);
 onMounted(() => {
   // 初始调用 updateClock 以立即显示时间
   updateClock();
   data.nowTab = router.currentRoute.value.fullPath;
   // 每隔一秒钟调用一次 updateClock 以更新时钟显示
-  timeT.value=setInterval(updateClock, 1000);
+  timeT.value = setInterval(updateClock, 1000);
 });
 onBeforeUnmount(() => {
   if (timeT.value) {
     clearInterval(timeT.value);
-        console.log('定时器已清除');
-      }
+    console.log("定时器已清除");
+  }
 });
 </script>
 <style lang="scss" scoped>
diff --git a/src/router/index.js b/src/router/index.js
index 608bcf6..4ebcbea 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -121,6 +121,16 @@ const router = createRouter({
           path: "/home/index/table/jtDetails",
           component: () => import("../view/jt_details.vue"),
         },
+        {
+          name: "首页表格全民健身服务详情",
+          path: "/home/index/table/fitnessServices",
+          component: () => import("../view/js_details.vue"),
+        },
+        {
+          name: "首页表格校外活动服务详情",
+          path: "/home/index/table/afterschoolActivities",
+          component: () => import("../view/hd_details.vue"),
+        },
         {
           name: "人物图",
           path: "/home/index/person",
diff --git a/src/utils/request.js b/src/utils/request.js
index 02a9252..ab56c12 100644
--- a/src/utils/request.js
+++ b/src/utils/request.js
@@ -2,7 +2,7 @@ import axios from "axios";
 import { ElMessage } from "element-plus";
 import tools from "@/utils/tools";
 import router from "../router";
-axios.defaults.baseURL = 'https://jzzf.longyou.gov.cn:998/'
+// axios.defaults.baseURL = 'https://jzzf.longyou.gov.cn:998/'
 axios.defaults.timeout = 120000;
 
 // HTTP request 拦截器
diff --git a/src/view/hd_details.vue b/src/view/hd_details.vue
new file mode 100644
index 0000000..4d411c4
--- /dev/null
+++ b/src/view/hd_details.vue
@@ -0,0 +1,700 @@
+<template>
+  <div class="module">
+    <div class="displayFlex">
+      <div class="bt_title">
+        <div class="yd_title">
+          <span>校外活动服务</span>
+          <div class="semi-circle-shadow"></div>
+          <div class="animate-border">
+            <i></i>
+            <i></i>
+          </div>
+        </div>
+        <div class="select">
+          <div class="select_item">
+            <el-date-picker
+              v-model="search1.timeDate"
+              type="daterange"
+              start-placeholder="开始时间"
+              end-placeholder="结束时间"
+              format="YYYY-MM-DD"
+              value-format="YYYY-MM-DD"
+              @change="searchT('date')"
+            />
+          </div>
+          <div class="select_item">
+            <el-input
+              v-model="search1.keyword"
+              style="width: 100%"
+              placeholder="地点查询"
+              clearable
+              class="input-with-select"
+            >
+              <template #append>
+                <!-- <el-button style="" :icon="Search" @click="searchT('name')"
+                  >搜索</el-button
+                > -->
+                <el-button
+                  type="primary"
+                  :icon="Search"
+                  @click="searchT('name')"
+                  >搜索</el-button
+                >
+              </template>
+            </el-input>
+          </div>
+        </div>
+      </div>
+
+      <div style="width: 100%; position: relative">
+        <div class="backgroundVirtual"></div>
+        <el-table
+          border
+          :data="data.tableData"
+          style="width: 100%; height: 810px; margin-bottom: 20px"
+          max-height="850px"
+          class="table_border"
+          :row-style="rowState"
+          :header-cell-style="tableHeaderColor"
+          @row-click="handleRowClick"
+        >
+          <template v-for="item in data.columns">
+            <el-table-column
+              v-if="item.type == 'slot'"
+              :label="item.label"
+              :prop="item.property"
+              :show-overflow-tooltip="item.tooltip"
+              :width="item.width || ''"
+              :align="item.align || 'left'"
+            >
+              <template #default="scope">
+                <!-- 补助类型 -->
+                <div v-if="item.property == 'bzlx'">
+                  <div v-if="scope.row.bzlx == '1'">高龄津贴</div>
+                  <div v-else>老年人综合能力评估</div>
+                </div>
+              </template>
+            </el-table-column>
+            <el-table-column
+              v-else
+              :label="item.label"
+              :width="item.width || ''"
+              :prop="item.property"
+              :align="item.align || 'left'"
+              :show-overflow-tooltip="item.tooltip"
+            />
+          </template>
+        </el-table>
+        <el-pagination
+          background
+          layout="prev, pager, next, total"
+          :page-size="pagination.pageSize"
+          :total="pagination.total"
+          prev-text="上一页"
+          next-text="下一页"
+          v-model:current-page="pagination.currentPage"
+          @current-change="handlePagination"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive, onMounted, computed } from "vue";
+import { ElMessage } from "element-plus";
+import { useRouter, useRoute } from "vue-router";
+import http from "@/utils/request.js";
+import { Search } from "@element-plus/icons-vue";
+
+const router = useRouter();
+const routers = useRoute();
+
+const data = reactive({
+  url: `/api/ggfwyth/pg/fwjgqdxq`,
+  name: "",
+  data: [],
+  columns: [
+    {
+      label: "序号",
+      property: "xh",
+      width: "150",
+      align: "center",
+    },
+    {
+      label: "服务",
+      property: "fw",
+      align: "center",
+    },
+
+    {
+      label: "时间",
+      property: "sj",
+      align: "center",
+    },
+    {
+      label: "地点",
+      property: "dd",
+      align: "center",
+    },
+    {
+      label: "主题",
+      property: "zt",
+      align: "center",
+    },
+    {
+      label: "人数",
+      property: "rs",
+      align: "center",
+    },
+  ],
+  tableData: [],
+});
+
+// 表格分页
+const pagination = reactive({
+  id: "1",
+  total: 0,
+  pageSize: 20,
+  currentPage: 1,
+});
+//表格分页切换
+const handlePagination = (current) => {
+  pagination.currentPage = current;
+  getData();
+};
+//表格样式
+const tableHeaderColor = (arg) => {
+  return {
+    // paddingLeft: "10px",
+    letterSpacing: "1px",
+    fontSize: "20px",
+    height: "79px",
+    backgroundColor: "rgba(23, 62, 115)",
+    color: "#fff",
+    border: "none",
+    textAlign: "center",
+    fontFamily: "PingFangSC, PingFang SC",
+    // boxShadow: " inset 0px 0px 56px 0px rgba(173,221,255,0.5)",
+  };
+};
+const rowState = (row) => {
+  if (row.rowIndex % 2 == 0) {
+    return {
+      letterSpacing: "1px",
+      fontSize: "19px",
+      height: "36px",
+      backgroundColor: "rgba(31, 63, 113, 1)",
+      color: "#fff",
+    };
+  } else if (row.rowIndex % 2 !== 0) {
+    return {
+      letterSpacing: "1px",
+      fontSize: "19px",
+      height: "36px",
+      backgroundColor: "rgba(43, 74, 121, 1)",
+      color: "#fff",
+    };
+  }
+};
+// 查询
+const search1 = reactive({
+  timeDate: "",
+  startTime: "",
+  endTime: "",
+  keyword: "",
+});
+const searchT = (val) => {
+  if (val == "name") {
+    getData();
+  } else {
+    [search1.startTime = "", search1.endTime = ""] = search1.timeDate || [];
+    throttle(getData, 50);
+  }
+};
+//节流
+var timer;
+const throttle = (func, limit) => {
+  if (!timer) {
+    timer = setTimeout(() => {
+      func();
+      timer = null;
+    }, limit);
+  }
+};
+
+//获取数据
+const getData = () => {
+  http
+    .get(
+      `/api/ggfwyth/pg/getXwhdfw?keyword=${search1.keyword}&startTime=${search1.startTime}&endTime=${search1.endTime}&page=${pagination.currentPage}&size=${pagination.pageSize}`
+    )
+    .then((res) => {
+      if (res.code == 200) {
+        data.tableData = res.data;
+        pagination.total = res.count;
+      } else {
+        ElMessage.warning({ message: res.message });
+      }
+    })
+    .catch((error) => {
+      console.error("请求失败", error);
+    });
+};
+onMounted(() => {
+  getData();
+});
+</script>
+
+<style lang="scss" scoped>
+.module {
+  width: 100%;
+  display: flex;
+  margin-top: 126px;
+  .select {
+    // margin-top: 16px;
+    // margin-bottom: 20px;
+    width: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    .select_item {
+      width: 41%;
+    }
+  }
+  .displayFlex {
+    width: 100%;
+    height: 100%;
+    padding: 6px 40px;
+    display: flex;
+    flex-direction: column;
+    box-sizing: border-box;
+    .bt_title {
+      // width: 585px;
+      width: 100%;
+      font-size: 24px;
+      color: #ffffff;
+      letter-spacing: 2px;
+      text-shadow: inset 0px -2px 2px rgba(255, 255, 255, 0.65);
+      text-align: left;
+      font-style: normal;
+      margin-bottom: 20px;
+      display: flex;
+      justify-content: space-between;
+    }
+    .title {
+      font-size: 28px;
+      color: #ffffff;
+      text-align: left;
+      font-style: normal;
+      font-family: YouSheBiaoTiHei;
+      text-shadow: 0px 2px 4px rgba(56, 50, 50, 0.5);
+    }
+    .lineEnd {
+      height: 3px;
+      border-top: 1px solid #fff;
+      border-bottom: 1px dashed #fff;
+      margin: 17px 0;
+    }
+    .tabPosition {
+      display: flex;
+      flex-direction: column;
+      color: #ffffff;
+      font-size: 22px;
+      font-weight: 500;
+      letter-spacing: 1px;
+
+      img {
+        width: 18px;
+        height: 18px;
+        margin-right: 10px;
+        vertical-align: middle;
+      }
+
+      .tabPositionBox {
+        display: flex;
+        align-items: center;
+        margin: 12px 0 12px 19px;
+        cursor: pointer;
+      }
+      .tabPositionminBox {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 200px;
+        height: 50px;
+
+        border-radius: 4px;
+        cursor: pointer;
+        // opacity: 0.45;
+      }
+      .tabPositionminBoxBgc {
+        background: #92bdff;
+      }
+    }
+  }
+  .backgroundVirtual {
+    position: absolute;
+    top: 0;
+    width: 100%;
+    height: 79px;
+    font-size: 20px;
+    box-shadow: inset 0px 0px 55px 0px rgba(173, 221, 255, 1);
+    z-index: 99;
+    // background: linear-gradient(
+    //   270deg,
+    //   rgba(0, 52, 131, 0.20) 0%,
+    //   rgba(0, 32, 83, 0.30) 50%,
+    //   rgba(0, 60, 131, 0.40) 100%
+    // );
+    // backdrop-filter: blur(0px);
+  }
+}
+</style>
+<style lang="scss" scoped>
+.yd_title {
+  box-sizing: border-box;
+  width: 585px;
+  height: 31px;
+  position: relative;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  span {
+    font-size: 28px;
+    font-weight: 500;
+    font-family: titleNore;
+    margin-left: 20px;
+    color: #fff;
+    position: relative;
+    z-index: 1;
+    width: 500px;
+    overflow: hidden; /* 超出一行文字自动隐藏 */
+    text-overflow: ellipsis; /*文字隐藏后添加省略号*/
+    white-space: nowrap;
+  }
+  /* 利用伪元素和两个i元素产生4条线 */
+  .animate-border {
+    position: absolute;
+    top: 0px;
+    width: 100%;
+    height: 100%;
+    &::before,
+    &::after {
+      content: "";
+      position: absolute;
+      width: 100%;
+      height: 2px;
+    }
+    i {
+      position: absolute;
+      display: inline-block;
+      height: 100%;
+      width: 2px;
+    }
+    &::before {
+      top: 0;
+      left: -100%;
+      background-image: linear-gradient(
+        90deg,
+        transparent,
+        #03e9f4,
+        transparent
+      );
+
+      animation: one 4s linear infinite;
+    }
+    i:nth-child(1) {
+      top: -100%;
+      right: 0;
+      background-image: linear-gradient(
+        180deg,
+        transparent,
+        #03e9f4,
+        transparent
+      );
+      /* 动画名称  动画持续时间  动画渲染函数 动画延迟时间 动画执行次数 */
+      animation: two 4s linear 1s infinite;
+    }
+    &::after {
+      bottom: 0;
+      right: -100%;
+      background-image: linear-gradient(
+        -90deg,
+        transparent,
+        #03e9f4,
+        transparent
+      );
+      animation: three 4s linear 2s infinite;
+    }
+    i:nth-child(2) {
+      bottom: -100%;
+      left: 0;
+      background-image: linear-gradient(
+        360deg,
+        transparent,
+        #03e9f4,
+        transparent
+      );
+      animation: four 4s linear 3s infinite;
+    }
+  }
+  .mxbRecord {
+    display: flex;
+    .text_0 {
+      font-size: 20px;
+      font-weight: 500;
+      color: #ffffff;
+      font-family: titleNore;
+      // margin-right: 20px;
+      padding: 0 10px;
+      width: 90px;
+      z-index: 2;
+      cursor: pointer;
+      background: radial-gradient(
+        circle,
+        rgba(37, 127, 173, 1) 0%,
+        rgba(37, 127, 173, 0) 100%
+      );
+    }
+    .text_2 {
+      font-size: 20px;
+      font-weight: 500;
+      color: #4787a8;
+      font-family: titleNore;
+      // margin-right: 20px;
+      padding: 0 10px;
+      width: 90px;
+      z-index: 2;
+      cursor: pointer;
+    }
+  }
+
+  .text {
+    display: flex;
+    position: absolute;
+    font-size: 16px;
+    font-family: SourceHanSansCN;
+    font-weight: bold;
+    color: #ffffff;
+    position: absolute;
+    right: 5px;
+    top: 1px;
+    align-items: center;
+  }
+  .text_1 {
+    font-size: 20px;
+    font-weight: 500;
+    color: #4787a8;
+    font-family: titleNore;
+    margin-right: 20px;
+  }
+  .gTitle {
+    position: absolute;
+    color: #acd1f1;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    left: 156px;
+  }
+
+  .c {
+    width: 130px;
+    height: 33px;
+    cursor: pointer;
+  }
+}
+.lampState {
+  position: absolute;
+  top: 0px;
+  right: 0;
+  z-index: 6;
+  img {
+    width: 30px;
+    height: 30px;
+    margin-left: 10px;
+    cursor: pointer;
+
+    // &:nth-child(3n) {
+    //   margin-right: 20px;
+    // }
+  }
+  // .selected {
+  //   border-radius: 50%;
+  //   background-color: rgba(255, 255, 255, 0.3);
+  //   box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
+  // }
+}
+.yd_title::before {
+  content: "";
+  width: 4px;
+  height: 4px;
+  background-color: rgba(0, 229, 255, 1);
+  border-radius: 50%;
+  position: absolute;
+  left: 0;
+  margin-left: 3px;
+  z-index: 2;
+}
+.yd_title::after {
+  content: "";
+  width: 90%;
+  height: 1px;
+  background: linear-gradient(to right, #257fad, rgba(37, 127, 173, 0));
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  z-index: 0;
+}
+.semi-circle-shadow {
+  position: absolute;
+  bottom: -5px;
+  left: -24px;
+  width: 30%;
+  height: 20px;
+  background: radial-gradient(
+    circle,
+    rgba(37, 127, 173, 1) 0%,
+    rgba(37, 127, 173, 0) 70%
+  );
+  border-radius: 50%;
+  z-index: 0;
+}
+
+@keyframes one {
+  0% {
+    left: -100%;
+  }
+  50%,
+  100% {
+    left: 100%;
+  }
+}
+
+@keyframes two {
+  0% {
+    top: -100%;
+  }
+  50%,
+  100% {
+    top: 100%;
+  }
+}
+
+@keyframes three {
+  0% {
+    right: -100%;
+  }
+  50%,
+  100% {
+    right: 100%;
+  }
+}
+
+@keyframes four {
+  0% {
+    bottom: -100%;
+  }
+  50%,
+  100% {
+    bottom: 100%;
+  }
+}
+// 表格
+:deep(.el-table) {
+  background: rgba(32, 64, 115, 1);
+
+  --el-table-border-color: none;
+  border: 1px solid #7aceff;
+}
+
+:deep(.el-table--enable-row-hover .el-table__body tr:hover > td) {
+  background-color: #2f4b74;
+}
+
+:deep(.el-table__empty-block) {
+  background-color: #122560;
+}
+
+:deep(.el-table .el-table__row) {
+  border-bottom: none;
+}
+// 分页
+:deep(.el-pagination > .is-last) {
+  color: #fff !important ;
+}
+:deep(.el-pagination.is-background .el-pager li) {
+  color: #fff;
+  background: rgba(255, 255, 255, 0.14);
+  border: 1px solid #6bade1;
+  margin: 0;
+}
+:deep(.el-pagination.is-background .el-pager li.is-active) {
+  background: rgba(0, 144, 255, 0.49);
+  border: 1px solid #6bade1;
+}
+:deep(.el-pagination.is-background .btn-prev:disabled) {
+  color: #fff;
+  background: rgba(255, 255, 255, 0.14);
+  border: 1px solid #6bade1;
+}
+:deep(.el-pagination.is-background .btn-next:disabled) {
+  color: #fff;
+  background: rgba(255, 255, 255, 0.14);
+  border: 1px solid #6bade1;
+}
+:deep(.el-pagination.is-background .btn-prev) {
+  color: #fff;
+  background: rgba(255, 255, 255, 0.14);
+  border: 1px solid #6bade1;
+}
+:deep(.el-pagination.is-background .btn-next) {
+  color: #fff;
+  background: rgba(255, 255, 255, 0.14);
+  border: 1px solid #6bade1;
+}
+// 分页
+.pagePart {
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  :deep(.el-pagination) {
+    --el-pagination-button-disabled-bg-color: none;
+    --el-pagination-bg-color: none;
+    --el-pagination-button-bg-color: none;
+    --el-pagination-button-color: #fff;
+    color: #fff;
+  }
+}
+:deep(.el-pagination.is-background .btn-prev) {
+  margin: 0;
+}
+:deep(.el-pagination.is-background .btn-next) {
+  margin: 0;
+}
+:deep(.el-pagination) {
+  justify-content: center;
+}
+// 日期选择
+:deep(.el-range-editor.el-input__wrapper) {
+  background: rgba(150, 194, 255, 0.14);
+}
+:deep(.el-date-editor .el-range-separator) {
+  color: rgba(255, 255, 255, 0.555);
+}
+
+:deep(.el-input-group--append > .el-input__wrapper) {
+  background: rgba(150, 194, 255, 0.14);
+}
+:deep(.el-input__inner) {
+  color: #ffffff;
+}
+
+:deep(.el-input-group__append) {
+  background: rgba(28, 171, 193, 1);
+  color: #ffffff;
+}
+</style>
diff --git a/src/view/js_details.vue b/src/view/js_details.vue
new file mode 100644
index 0000000..cd89e0a
--- /dev/null
+++ b/src/view/js_details.vue
@@ -0,0 +1,719 @@
+<template>
+  <div class="module">
+    <div class="displayFlex">
+      <div class="bt_title">
+        <div class="yd_title">
+            <span>场馆预约记录</span>
+          <div class="semi-circle-shadow"></div>
+          <div class="animate-border">
+            <i></i>
+            <i></i>
+          </div>
+        </div>
+        <div class="select">
+          <div class="select_item">
+            <el-date-picker
+              v-model="search1.timeDate"
+              type="daterange"
+              start-placeholder="预约开始时间"
+              end-placeholder="预约结束时间"
+              format="YYYY-MM-DD"
+              value-format="YYYY-MM-DD"
+              @change="searchT('date')"
+            />
+            <!-- <el-date-picker
+              style="width: 45%"
+              v-model="search1.startTime"
+              type="date"
+              placeholder="预约开始时间"
+              format="YYYY-MM-DD"
+              value-format="YYYY-MM-DD"
+              @change="searchT('date')"
+            />
+            <span class="demonstration"> - </span>
+            <el-date-picker
+              style="width: 45%"
+              v-model="search1.endTime"
+              type="date"
+              placeholder="预约结束时间"
+              format="YYYY-MM-DD"
+              value-format="YYYY-MM-DD"
+              @change="searchT('date')"
+            /> -->
+          </div>
+          <div class="select_item">
+            <el-input
+              v-model="search1.keyword"
+              style="width: 100%"
+              placeholder="预约学校查询"
+              clearable
+              class="input-with-select"
+            >
+              <template #append>
+                <!-- <el-button style="" :icon="Search" @click="searchT('name')"
+                  >搜索</el-button
+                > -->
+                <el-button type="primary"  :icon="Search" @click="searchT('name')">搜索</el-button>
+              </template>
+            </el-input>
+          </div>
+        </div>
+      </div>
+
+      <div style="width: 100%; position: relative">
+        <div class="backgroundVirtual"></div>
+        <el-table
+          border
+          :data="data.tableData"
+          style="width: 100%; height: 810px; margin-bottom: 20px"
+          max-height="850px"
+          class="table_border"
+          :row-style="rowState"
+          :header-cell-style="tableHeaderColor"
+          @row-click="handleRowClick"
+        >
+          <template v-for="item in data.columns">
+            <el-table-column
+              v-if="item.type == 'slot'"
+              :label="item.label"
+              :prop="item.property"
+              :show-overflow-tooltip="item.tooltip"
+              :width="item.width || ''"
+              :align="item.align || 'left'"
+            >
+              <template #default="scope">
+                <!-- 补助类型 -->
+                <div v-if="item.property == 'bzlx'">
+                  <div v-if="scope.row.bzlx == '1'">高龄津贴</div>
+                  <div v-else>老年人综合能力评估</div>
+                </div>
+              </template>
+            </el-table-column>
+            <el-table-column
+              v-else
+              :label="item.label"
+              :width="item.width || ''"
+              :prop="item.property"
+              :align="item.align || 'left'"
+              :show-overflow-tooltip="item.tooltip"
+            />
+          </template>
+        </el-table>
+        <el-pagination
+          background
+          layout="prev, pager, next, total"
+          :page-size="pagination.pageSize"
+          :total="pagination.total"
+          prev-text="上一页"
+          next-text="下一页"
+          v-model:current-page="pagination.currentPage"
+          @current-change="handlePagination"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive, onMounted, computed } from "vue";
+import { ElMessage } from "element-plus";
+import { useRouter, useRoute } from "vue-router";
+import http from "@/utils/request.js";
+import { Search } from "@element-plus/icons-vue";
+
+const router = useRouter();
+const routers = useRoute();
+
+const data = reactive({
+  url: `/api/ggfwyth/pg/fwjgqdxq`,
+  name: "",
+  data: [],
+  columns: [
+    {
+      label: "序号",
+      property: "xh",
+      width: "150",
+      align: "center",
+    },
+    {
+      label: "姓名",
+      property: "xm",
+      align: "center",
+    },
+
+    {
+      label: "预约学校",
+      property: "yyxx",
+      align: "center",
+    },
+    {
+      label: "预约校区",
+      property: "yyxq",
+      align: "center",
+    },
+    {
+      label: "预约场馆",
+      property: "yycg",
+      align: "center",
+    },
+    {
+      label: "预约日期",
+      property: "yyrq",
+      align: "center",
+    },
+
+    {
+      label: "预约时段",
+      property: "yysd",
+      align: "center",
+    },
+  ],
+  tableData: [],
+});
+
+// 表格分页
+const pagination = reactive({
+  id: "1",
+  total: 0,
+  pageSize: 20,
+  currentPage: 1,
+});
+//表格分页切换
+const handlePagination = (current) => {
+  pagination.currentPage = current;
+  getData();
+};
+//表格样式
+const tableHeaderColor = (arg) => {
+  return {
+    // paddingLeft: "10px",
+    letterSpacing: "1px",
+    fontSize: "20px",
+    height: "79px",
+    backgroundColor: "rgba(23, 62, 115)",
+    color: "#fff",
+    border: "none",
+    textAlign: "center",
+    fontFamily: "PingFangSC, PingFang SC",
+    // boxShadow: " inset 0px 0px 56px 0px rgba(173,221,255,0.5)",
+  };
+};
+const rowState = (row) => {
+  if (row.rowIndex % 2 == 0) {
+    return {
+      letterSpacing: "1px",
+      fontSize: "19px",
+      height: "36px",
+      backgroundColor: "rgba(31, 63, 113, 1)",
+      color: "#fff",
+    };
+  } else if (row.rowIndex % 2 !== 0) {
+    return {
+      letterSpacing: "1px",
+      fontSize: "19px",
+      height: "36px",
+      backgroundColor: "rgba(43, 74, 121, 1)",
+      color: "#fff",
+    };
+  }
+};
+// 查询
+const search1 = reactive({
+  timeDate: "",
+  startTime: "",
+  endTime: "",
+  keyword: "",
+});
+const searchT = (val) => {
+  if (val == "name") {
+    getData();
+  } else {
+    [search1.startTime = "", search1.endTime = ""] = search1.timeDate || [];
+    throttle(getData, 50);
+  }
+};
+//节流
+var timer;
+const throttle = (func, limit) => {
+  if (!timer) {
+    timer = setTimeout(() => {
+      func();
+      timer = null;
+    }, limit);
+  }
+};
+
+//获取数据
+const getData = () => {
+  http
+    .get(
+      `/api/ggfwyth/pg/getQmjsfw?keyword=${search1.keyword}&startTime=${search1.startTime}&endTime=${search1.endTime}&page=${pagination.currentPage}&size=${pagination.pageSize}`
+    )
+    .then((res) => {
+      if (res.code == 200) {
+        data.tableData = res.data;
+        pagination.total = res.count;
+      } else {
+        ElMessage.warning({ message: res.message });
+      }
+    })
+    .catch((error) => {
+      console.error("请求失败", error);
+    });
+};
+onMounted(() => {
+  getData();
+});
+</script>
+
+<style lang="scss" scoped>
+.module {
+  width: 100%;
+  display: flex;
+  margin-top: 126px;
+  .select {
+    // margin-top: 16px;
+    // margin-bottom: 20px;
+    width: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    .select_item {
+      width: 41%;
+    }
+  }
+  .displayFlex {
+    width: 100%;
+    height: 100%;
+    padding: 6px 40px;
+    display: flex;
+    flex-direction: column;
+    box-sizing: border-box;
+    .bt_title {
+      // width: 585px;
+      width: 100%;
+      font-size: 24px;
+      color: #ffffff;
+      letter-spacing: 2px;
+      text-shadow: inset 0px -2px 2px rgba(255, 255, 255, 0.65);
+      text-align: left;
+      font-style: normal;
+      margin-bottom: 20px;
+      display: flex;
+      justify-content: space-between;
+    }
+    .title {
+      font-size: 28px;
+      color: #ffffff;
+      text-align: left;
+      font-style: normal;
+      font-family: YouSheBiaoTiHei;
+      text-shadow: 0px 2px 4px rgba(56, 50, 50, 0.5);
+    }
+    .lineEnd {
+      height: 3px;
+      border-top: 1px solid #fff;
+      border-bottom: 1px dashed #fff;
+      margin: 17px 0;
+    }
+    .tabPosition {
+      display: flex;
+      flex-direction: column;
+      color: #ffffff;
+      font-size: 22px;
+      font-weight: 500;
+      letter-spacing: 1px;
+
+      img {
+        width: 18px;
+        height: 18px;
+        margin-right: 10px;
+        vertical-align: middle;
+      }
+
+      .tabPositionBox {
+        display: flex;
+        align-items: center;
+        margin: 12px 0 12px 19px;
+        cursor: pointer;
+      }
+      .tabPositionminBox {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 200px;
+        height: 50px;
+
+        border-radius: 4px;
+        cursor: pointer;
+        // opacity: 0.45;
+      }
+      .tabPositionminBoxBgc {
+        background: #92bdff;
+      }
+    }
+  }
+  .backgroundVirtual {
+    position: absolute;
+    top: 0;
+    width: 100%;
+    height: 79px;
+    font-size: 20px;
+    box-shadow: inset 0px 0px 55px 0px rgba(173, 221, 255, 1);
+    z-index: 99;
+    // background: linear-gradient(
+    //   270deg,
+    //   rgba(0, 52, 131, 0.20) 0%,
+    //   rgba(0, 32, 83, 0.30) 50%,
+    //   rgba(0, 60, 131, 0.40) 100%
+    // );
+    // backdrop-filter: blur(0px);
+  }
+}
+</style>
+<style lang="scss" scoped>
+.yd_title {
+  box-sizing: border-box;
+  width: 585px;
+  height: 31px;
+  position: relative;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  span {
+    font-size: 28px;
+    font-weight: 500;
+    font-family: titleNore;
+    margin-left: 20px;
+    color: #fff;
+    position: relative;
+    z-index: 1;
+    width: 500px;
+    overflow: hidden; /* 超出一行文字自动隐藏 */
+    text-overflow: ellipsis; /*文字隐藏后添加省略号*/
+    white-space: nowrap;
+  }
+  /* 利用伪元素和两个i元素产生4条线 */
+  .animate-border {
+    position: absolute;
+    top: 0px;
+    width: 100%;
+    height: 100%;
+    &::before,
+    &::after {
+      content: "";
+      position: absolute;
+      width: 100%;
+      height: 2px;
+    }
+    i {
+      position: absolute;
+      display: inline-block;
+      height: 100%;
+      width: 2px;
+    }
+    &::before {
+      top: 0;
+      left: -100%;
+      background-image: linear-gradient(
+        90deg,
+        transparent,
+        #03e9f4,
+        transparent
+      );
+
+      animation: one 4s linear infinite;
+    }
+    i:nth-child(1) {
+      top: -100%;
+      right: 0;
+      background-image: linear-gradient(
+        180deg,
+        transparent,
+        #03e9f4,
+        transparent
+      );
+      /* 动画名称  动画持续时间  动画渲染函数 动画延迟时间 动画执行次数 */
+      animation: two 4s linear 1s infinite;
+    }
+    &::after {
+      bottom: 0;
+      right: -100%;
+      background-image: linear-gradient(
+        -90deg,
+        transparent,
+        #03e9f4,
+        transparent
+      );
+      animation: three 4s linear 2s infinite;
+    }
+    i:nth-child(2) {
+      bottom: -100%;
+      left: 0;
+      background-image: linear-gradient(
+        360deg,
+        transparent,
+        #03e9f4,
+        transparent
+      );
+      animation: four 4s linear 3s infinite;
+    }
+  }
+  .mxbRecord {
+    display: flex;
+    .text_0 {
+      font-size: 20px;
+      font-weight: 500;
+      color: #ffffff;
+      font-family: titleNore;
+      // margin-right: 20px;
+      padding: 0 10px;
+      width: 90px;
+      z-index: 2;
+      cursor: pointer;
+      background: radial-gradient(
+        circle,
+        rgba(37, 127, 173, 1) 0%,
+        rgba(37, 127, 173, 0) 100%
+      );
+    }
+    .text_2 {
+      font-size: 20px;
+      font-weight: 500;
+      color: #4787a8;
+      font-family: titleNore;
+      // margin-right: 20px;
+      padding: 0 10px;
+      width: 90px;
+      z-index: 2;
+      cursor: pointer;
+    }
+  }
+
+  .text {
+    display: flex;
+    position: absolute;
+    font-size: 16px;
+    font-family: SourceHanSansCN;
+    font-weight: bold;
+    color: #ffffff;
+    position: absolute;
+    right: 5px;
+    top: 1px;
+    align-items: center;
+  }
+  .text_1 {
+    font-size: 20px;
+    font-weight: 500;
+    color: #4787a8;
+    font-family: titleNore;
+    margin-right: 20px;
+  }
+  .gTitle {
+    position: absolute;
+    color: #acd1f1;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    left: 156px;
+  }
+
+  .c {
+    width: 130px;
+    height: 33px;
+    cursor: pointer;
+  }
+}
+.lampState {
+  position: absolute;
+  top: 0px;
+  right: 0;
+  z-index: 6;
+  img {
+    width: 30px;
+    height: 30px;
+    margin-left: 10px;
+    cursor: pointer;
+
+    // &:nth-child(3n) {
+    //   margin-right: 20px;
+    // }
+  }
+  // .selected {
+  //   border-radius: 50%;
+  //   background-color: rgba(255, 255, 255, 0.3);
+  //   box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
+  // }
+}
+.yd_title::before {
+  content: "";
+  width: 4px;
+  height: 4px;
+  background-color: rgba(0, 229, 255, 1);
+  border-radius: 50%;
+  position: absolute;
+  left: 0;
+  margin-left: 3px;
+  z-index: 2;
+}
+.yd_title::after {
+  content: "";
+  width: 90%;
+  height: 1px;
+  background: linear-gradient(to right, #257fad, rgba(37, 127, 173, 0));
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  z-index: 0;
+}
+.semi-circle-shadow {
+  position: absolute;
+  bottom: -5px;
+  left: -24px;
+  width: 30%;
+  height: 20px;
+  background: radial-gradient(
+    circle,
+    rgba(37, 127, 173, 1) 0%,
+    rgba(37, 127, 173, 0) 70%
+  );
+  border-radius: 50%;
+  z-index: 0;
+}
+
+@keyframes one {
+  0% {
+    left: -100%;
+  }
+  50%,
+  100% {
+    left: 100%;
+  }
+}
+
+@keyframes two {
+  0% {
+    top: -100%;
+  }
+  50%,
+  100% {
+    top: 100%;
+  }
+}
+
+@keyframes three {
+  0% {
+    right: -100%;
+  }
+  50%,
+  100% {
+    right: 100%;
+  }
+}
+
+@keyframes four {
+  0% {
+    bottom: -100%;
+  }
+  50%,
+  100% {
+    bottom: 100%;
+  }
+}
+// 表格
+:deep(.el-table) {
+  background: rgba(32, 64, 115, 1);
+
+  --el-table-border-color: none;
+  border: 1px solid #7aceff;
+}
+
+:deep(.el-table--enable-row-hover .el-table__body tr:hover > td) {
+  background-color: #2f4b74;
+}
+
+:deep(.el-table__empty-block) {
+  background-color: #122560;
+}
+
+:deep(.el-table .el-table__row) {
+  border-bottom: none;
+}
+// 分页
+:deep(.el-pagination > .is-last) {
+  color: #fff !important ;
+}
+:deep(.el-pagination.is-background .el-pager li) {
+  color: #fff;
+  background: rgba(255, 255, 255, 0.14);
+  border: 1px solid #6bade1;
+  margin: 0;
+}
+:deep(.el-pagination.is-background .el-pager li.is-active) {
+  background: rgba(0, 144, 255, 0.49);
+  border: 1px solid #6bade1;
+}
+:deep(.el-pagination.is-background .btn-prev:disabled) {
+  color: #fff;
+  background: rgba(255, 255, 255, 0.14);
+  border: 1px solid #6bade1;
+}
+:deep(.el-pagination.is-background .btn-next:disabled) {
+  color: #fff;
+  background: rgba(255, 255, 255, 0.14);
+  border: 1px solid #6bade1;
+}
+:deep(.el-pagination.is-background .btn-prev) {
+  color: #fff;
+  background: rgba(255, 255, 255, 0.14);
+  border: 1px solid #6bade1;
+}
+:deep(.el-pagination.is-background .btn-next) {
+  color: #fff;
+  background: rgba(255, 255, 255, 0.14);
+  border: 1px solid #6bade1;
+}
+// 分页
+.pagePart {
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  :deep(.el-pagination) {
+    --el-pagination-button-disabled-bg-color: none;
+    --el-pagination-bg-color: none;
+    --el-pagination-button-bg-color: none;
+    --el-pagination-button-color: #fff;
+    color: #fff;
+  }
+}
+:deep(.el-pagination.is-background .btn-prev) {
+  margin: 0;
+}
+:deep(.el-pagination.is-background .btn-next) {
+  margin: 0;
+}
+:deep(.el-pagination) {
+  justify-content: center;
+}
+// 日期选择
+:deep(.el-range-editor.el-input__wrapper) {
+  background: rgba(150, 194, 255, 0.14);
+}
+:deep(.el-date-editor .el-range-separator) {
+  color: rgba(255, 255, 255, 0.555);
+}
+
+:deep(.el-input-group--append > .el-input__wrapper) {
+  background: rgba(150, 194, 255, 0.14);
+}
+:deep(.el-input__inner) {
+  color: #ffffff;
+}
+:deep(.el-input-group__append) {
+  background: rgba(28, 171, 193, 1);
+  color: #ffffff;
+}
+</style>
diff --git a/src/view/sy_table.vue b/src/view/sy_table.vue
index a93c96c..53be267 100644
--- a/src/view/sy_table.vue
+++ b/src/view/sy_table.vue
@@ -214,21 +214,30 @@ const goto = (val) => {
   // } else {
   if (val.name == "公共交通") {
     router.push({
-    path: "/home/index/table/jtDetails",
-    query: { name: val.name},
-  });
-  }else{
+      path: "/home/index/table/jtDetails",
+      query: { name: val.name },
+    });
+  } else if (val.name == "全民健身服务") {
     router.push({
-    path: "/home/index/table/details",
-    query: { name: val.name, id: val.id, xh: val.xh },
-  });
+      path: "/home/index/table/fitnessServices",
+      query: { name: val.name },
+    });
+  } else if (val.name == "校外活动服务") {
+    router.push({
+      path: "/home/index/table/afterschoolActivities",
+      query: { name: val.name },
+    });
+  } else {
+    router.push({
+      path: "/home/index/table/details",
+      query: { name: val.name, id: val.id, xh: val.xh },
+    });
   }
-  
 
-    // ElMessage.warning({
-    //   message: `${val.name}暂无数据!`,
-    //   offset: 100, // 距离窗口顶部的偏移量
-    // });
+  // ElMessage.warning({
+  //   message: `${val.name}暂无数据!`,
+  //   offset: 100, // 距离窗口顶部的偏移量
+  // });
   // }
 };
 

From abf7531d5a7f89f4e2df8e78136691d6aaf216bb Mon Sep 17 00:00:00 2001
From: duanxiaohai <1812246227@qq.com>
Date: Tue, 12 Nov 2024 17:17:29 +0800
Subject: [PATCH 2/2] gx

---
 src/view/sy_details.vue | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/view/sy_details.vue b/src/view/sy_details.vue
index 6ed50f9..984ed2c 100644
--- a/src/view/sy_details.vue
+++ b/src/view/sy_details.vue
@@ -322,7 +322,7 @@ const data = reactive({
     {
       label: "姓名",
       property: "xm",
-      width: "100",
+      width: "110",
       align: "center",
     },
     {
@@ -370,7 +370,7 @@ const data = reactive({
     {
       label: "姓名",
       property: "xm",
-      width: "100",
+      width: "110",
       type: "slot",
       align: "center",
     },
@@ -400,6 +400,7 @@ const data = reactive({
     {
       label: "完成途径",
       property: "operatesDeng",
+      align: "center",
       type: "slot",
     },
     // {
@@ -475,7 +476,7 @@ const lampScreen = (val) => {
       {
         label: "姓名",
         property: "xm",
-        width: "100",
+        width: "110",
         align: "center",
         type: "slot",
       },
@@ -515,7 +516,7 @@ const lampScreen = (val) => {
       {
         label: "姓名",
         property: "xm",
-        width: "100",
+        width: "110",
         align: "center",
         type: "slot",
       },
@@ -545,6 +546,7 @@ const lampScreen = (val) => {
       {
         label: "完成途径",
         property: "operatesDeng",
+        align: "center",
         type: "slot",
       },
     ];