From 66b967e097c6a3c62efbf424646d93f9708db5f4 Mon Sep 17 00:00:00 2001
From: yaoyuhao <yaoyuhao@ydool.com>
Date: Tue, 29 Oct 2024 17:08:31 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BA=A4=E9=80=9A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/router/index.js     |   5 +
 src/view/jt_details.vue | 420 ++++++++++++++++++++++++++++++++++++++++
 src/view/sy_table.vue   |  10 +-
 3 files changed, 434 insertions(+), 1 deletion(-)
 create mode 100644 src/view/jt_details.vue

diff --git a/src/router/index.js b/src/router/index.js
index 71e8da3..2c6980e 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -110,6 +110,11 @@ const router = createRouter({
           path: "/home/index/table/details",
           component: () => import("../view/sy_details.vue"),
         },
+        {
+          name: "首页表格交通便利详情",
+          path: "/home/index/table/jtDetails",
+          component: () => import("../view/jt_details.vue"),
+        },
         {
           name: "人物图",
           path: "/home/index/person",
diff --git a/src/view/jt_details.vue b/src/view/jt_details.vue
new file mode 100644
index 0000000..10ba06c
--- /dev/null
+++ b/src/view/jt_details.vue
@@ -0,0 +1,420 @@
+<template>
+  <div class="module">
+    <div class="jt">
+      <div class="jt_title">交通出行</div>
+      <div class="jt_content">
+        <div class="tabelPart">
+          <div class="bo">
+            <div class="title">
+              <div class="title_top">
+                <img
+                  src="@/assets/images/table_l.png"
+                  alt=""
+                  style="margin-right: 10px"
+                />
+                <div class="name">公共自行车详情</div>
+                <img
+                  src="@/assets/images/table_r.png"
+                  alt=""
+                  style="margin-left: 10px"
+                />
+              </div>
+              <img
+                class="title_botton"
+                src="@/assets/images/table_c.png"
+                alt=""
+              />
+            </div>
+          </div>
+          <div style="width: 100%; height: 280px; margin-top: 30px">
+            <eL
+              :list1="data['公共自行车'].list1"
+              :list2="data['公共自行车'].list2"
+              :year="data['公共自行车'].times"
+            ></eL>
+          </div>
+        </div>
+        <div class="tabelPart">
+          <div class="bo">
+            <div class="title">
+              <div class="title_top">
+                <img
+                  src="@/assets/images/table_l.png"
+                  alt=""
+                  style="margin-right: 10px"
+                />
+                <div class="name">电动单车详情</div>
+                <img
+                  src="@/assets/images/table_r.png"
+                  alt=""
+                  style="margin-left: 10px"
+                />
+              </div>
+              <img
+                class="title_botton"
+                src="@/assets/images/table_c.png"
+                alt=""
+              />
+            </div>
+          </div>
+          <div style="width: 100%; height: 280px; margin-top: 30px">
+            <eL
+              :list1="data['电动单车'].list1"
+              :list2="data['电动单车'].list2"
+              :year="data['电动单车'].times"
+            ></eL>
+          </div>
+        </div>
+        <div class="tabelPart">
+          <div class="bo">
+            <div class="title">
+              <div class="title_top">
+                <img
+                  src="@/assets/images/table_l.png"
+                  alt=""
+                  style="margin-right: 10px"
+                />
+                <div class="name">公共汽车详情</div>
+                <img
+                  src="@/assets/images/table_r.png"
+                  alt=""
+                  style="margin-left: 10px"
+                />
+              </div>
+              <img
+                class="title_botton"
+                src="@/assets/images/table_c.png"
+                alt=""
+              />
+            </div>
+          </div>
+          <div class="tabChoose">
+            <div
+              :class="data['公共汽车'].tab == '0' ? 'choosed' : 'tabs'"
+              style="margin-left: -35px"
+            >
+              <span @click="changeTab('公共汽车', '0')">乘坐人次趋势</span>
+            </div>
+            <div
+              :class="data['公共汽车'].tab == '1' ? 'choosed' : 'tabs'"
+              style="margin-right: -35px"
+            >
+              <span @click="changeTab('公共汽车', '1')">路线</span>
+            </div>
+          </div>
+          <div
+            style="width: 100%; height: 280px"
+            v-if="data['公共汽车'].tab == '0'"
+          >
+            <tL :list1="data['公共汽车'].list1" :year="data['公共汽车'].times"></tL>
+          </div>
+        </div>
+        <div class="tabelPart">
+          <div class="bo">
+            <div class="title">
+              <div class="title_top">
+                <img
+                  src="@/assets/images/table_l.png"
+                  alt=""
+                  style="margin-right: 10px"
+                />
+                <div class="name">长途汽车详情</div>
+                <img
+                  src="@/assets/images/table_r.png"
+                  alt=""
+                  style="margin-left: 10px"
+                />
+              </div>
+              <img
+                class="title_botton"
+                src="@/assets/images/table_c.png"
+                alt=""
+              />
+            </div>
+          </div>
+          <div class="tabChoose">
+            <div
+              :class="data['长途汽车'].tab == '0' ? 'choosed' : 'tabs'"
+              style="margin-left: -35px"
+            >
+              <span @click="changeTab('长途汽车', '0')">乘坐人次趋势</span>
+            </div>
+            <div
+              :class="data['长途汽车'].tab == '1' ? 'choosed' : 'tabs'"
+              style="margin-right: -35px"
+            >
+              <span @click="changeTab('长途汽车', '1')">路线</span>
+            </div>
+          </div>
+          <div style="width: 100%; height: 280px"  v-if="data['长途汽车'].tab == '0'">
+            <tL :list1="data['长途汽车'].list1" :year="data['长途汽车'].times"></tL>
+          </div>
+        </div>
+        <div class="tabelPart">
+          <div class="bo">
+            <div class="title">
+              <div class="title_top">
+                <img
+                  src="@/assets/images/table_l.png"
+                  alt=""
+                  style="margin-right: 10px"
+                />
+                <div class="name">高铁详情</div>
+                <img
+                  src="@/assets/images/table_r.png"
+                  alt=""
+                  style="margin-left: 10px"
+                />
+              </div>
+              <img
+                class="title_botton"
+                src="@/assets/images/table_c.png"
+                alt=""
+              />
+            </div>
+          </div>
+          <div class="tabChoose">
+            <div
+              :class="data['高铁'].tab == '0' ? 'choosed' : 'tabs'"
+              style="margin-left: -35px"
+            >
+              <span @click="changeTab('高铁', '0')">乘坐人次趋势</span>
+            </div>
+            <div
+              :class="data['高铁'].tab == '1' ? 'choosed' : 'tabs'"
+              style="margin-right: -35px"
+            >
+              <span @click="changeTab('高铁', '1')">路线</span>
+            </div>
+          </div>
+          <div style="width: 100%; height: 280px"  v-if="data['高铁'].tab == '0'">
+            <tL :list1="data['高铁'].list1" :year="data['高铁'].times"></tL>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive, onMounted, computed } from "vue";
+import http from "@/utils/request.js";
+import eL from "./dialog/echarts/echartLine.vue";
+import tL from "./dialog/echarts/tabLine.vue";
+const data = reactive({
+  公共自行车: {
+    list1: [
+      602, 1314, 3697, 4474, 4285, 4400, 4251, 4406, 4324, 4123, 3774, 3491,
+      4074, 4546, 4287,
+    ],
+    list2: [
+      695, 892, 1265, 1178, 1246, 1206, 1361, 1323, 1231, 893, 1032, 1196, 1411,
+      1232, 1232,
+    ],
+    times: [
+      "09",
+      "10",
+      "11",
+      "12",
+      "13",
+      "14",
+      "15",
+      "16",
+      "17",
+      "18",
+      "19",
+      "20",
+      "21",
+      "22",
+      "23",
+    ],
+  },
+  电动单车: {
+    list1: [],
+    list2: [],
+    times: [],
+  },
+  公共汽车: {
+    tab: 0,
+    list1: [],
+    times: [],
+  },
+  长途汽车: { tab: 0, list1: [], times: [] },
+  高铁: { tab: 0, list1: [], times: [] },
+});
+const changeTab = (name, index) => {
+  data[name].tab = index;
+};
+//获取数据
+const getData = () => {
+  http.get("/api/ggfwyth/ddcList").then((res) => {
+    if (res.code == 200) {
+      data["电动单车"].list1 = res.data.qxcs;
+      data["电动单车"].list2 = res.data.qxsc.map((str) => parseInt(str));
+      data["电动单车"].times = res.data.times;
+    }
+  });
+  http.get(`/api/ggfwyth/bus`).then((res) => {
+    if (res.code == 200) {
+      data["公共汽车"].list1 = res.data.data;
+      data["公共汽车"].times = res.data.times;
+    }
+  });
+  http.get(`/api/ggfwyth/longDistanceBus`).then((res) => {
+    if (res.code == 200) {
+      data["长途汽车"].list1 = res.data.data;
+      data["长途汽车"].times = res.data.times;
+    }
+  });
+  http.get(`/api/ggfwyth/lckll`).then((res) => {
+    if (res.code == 200) {
+      data["高铁"].list1 = res.data.data;
+      data["高铁"].times = res.data.times;
+    }
+  });
+};
+onMounted(() => {
+  getData();
+});
+</script>
+
+<style lang="scss" scoped>
+.module {
+  width: 100%;
+  display: flex;
+  margin-top: 112px;
+  .jt {
+    box-sizing: border-box;
+    margin: 5px auto;
+    width: 95%;
+    height: 900px;
+    // background: #fff;
+    overflow: hidden;
+    .jt_title {
+      font-size: 20px;
+      font-weight: bold;
+      margin: 20px;
+      color: #fff;
+    }
+    .jt_content {
+      display: flex;
+
+      padding: 10px;
+      flex-wrap: wrap;
+    }
+  }
+}
+.tabelPart {
+  box-sizing: border-box;
+  margin-bottom: 30px;
+  margin-right: 23px;
+  width: 32%;
+  padding: 16px;
+  padding-top: 3px;
+  height: 400px;
+  background: linear-gradient(
+      270deg,
+      rgba(0, 77, 131, 0.69) 0%,
+      rgba(0, 51, 83, 0.77) 50%,
+      rgba(0, 77, 131, 0.74) 100%
+    ),
+    radial-gradient(
+      66% 40% at 50% 0%,
+      rgba(1, 150, 243, 0.55) 0%,
+      rgba(0, 116, 255, 0) 100%
+    );
+  box-shadow: inset 0px 0px 56px 0px rgba(100, 191, 255, 0.5);
+  border: 2px solid;
+  border-image: linear-gradient(
+      180deg,
+      rgba(21, 150, 255, 1),
+      rgba(0, 157, 227, 0)
+    )
+    2 2;
+
+  :deep(.el-table) {
+    --el-table-bg-color: none;
+    --el-table-tr-bg-color: none;
+    --el-table-header-bg-color: none;
+    background: none;
+    border: none;
+    --el-table-text-color: #fff;
+    --el-table-header-text-color: #fff;
+  }
+}
+.bo {
+  width: 100%;
+  display: flex;
+}
+
+.title {
+  margin: 3px auto;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  &_top {
+    display: flex;
+    align-items: end;
+
+    img {
+      height: 23px;
+      width: 23px;
+    }
+
+    .name {
+      font-family: PangMenZhengDao, PangMenZhengDao;
+      font-weight: 600;
+      font-size: 20px;
+      color: #ffffff;
+      line-height: 30px;
+      text-align: center;
+      font-style: normal;
+      letter-spacing: 2px;
+      background: linear-gradient(180deg, #ffffff 0%, #51ffef 100%);
+      -webkit-background-clip: text;
+      /*将设置的背景颜色限制在文字中*/
+      -webkit-text-fill-color: transparent;
+      /*给文字设置成透明*/
+    }
+  }
+
+  &_botton {
+    margin-top: 5px;
+    height: 19px;
+  }
+}
+.tabChoose {
+  width: 100%;
+  margin-bottom: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  span {
+    font-size: 16px;
+    line-height: 30px;
+    cursor: pointer;
+  }
+  .tabs {
+    width: 252px;
+    text-align: center;
+    font-size: 16px;
+    color: rgba(255, 255, 255, 0.7);
+    line-height: 25px;
+    letter-spacing: 2px;
+    text-shadow: 0px 2px 4px #00405f;
+  }
+  .choosed {
+    width: 252px;
+    text-align: center;
+    font-size: 16px;
+    color: #fff;
+    line-height: 25px;
+    letter-spacing: 2px;
+    text-shadow: 0px 2px 4px #00405f,
+      inset 0px -2px 2px rgba(255, 255, 255, 0.65);
+    background-image: url(@/assets/dialogTab.png);
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+  }
+}
+</style>
diff --git a/src/view/sy_table.vue b/src/view/sy_table.vue
index 9a597b9..eecb625 100644
--- a/src/view/sy_table.vue
+++ b/src/view/sy_table.vue
@@ -212,10 +212,18 @@ const goto = (val) => {
   //     query: { name: val.name, id: val.id },
   //   });
   // } else {
-  router.push({
+  if (val.name == "公共交通") {
+    router.push({
+    path: "/home/index/table/jtDetails",
+    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}暂无数据!`,