公共交通

src/components/header.vue

@@ -11,7 +11,7 @@
         <div
           class="back"
           @click="back()"
-          v-if="routers.path == '/home/index/table/details'"
+          v-if="routers.path == '/home/index/table/details' || routers.path == '/home/index/table/jtDetails'"
         >
           <img src="@/assets/person/back.png" alt="" />
           <p>返回</p>

src/view/jt_details.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="module">
     <div class="jt">
-      <div class="jt_title">交通出行</div>
+      <div class="jt_title">公共交通</div>
       <div class="jt_content">
         <div class="tabelPart">
           <div class="bo">
@@ -106,7 +106,38 @@
             style="width: 100%; height: 270px"
             v-if="data['公共汽车'].tab == '0'"
           >
-            <tL :list1="data['公共汽车'].list1" :year="data['公共汽车'].times"></tL>
+            <tL
+              :list1="data['公共汽车'].list1"
+              :year="data['公共汽车'].times"
+            ></tL>
+          </div>
+          <div v-else style="width: 100%; height: 270px">
+            <el-table
+              :data="data['公共汽车'].tableData"
+              max-height="270"
+              :header-cell-style="{ background: '#008FCD' }"
+              :key="tableKey"
+            >
+              <template v-for="item in data['公共汽车'].columns">
+                <el-table-column
+                  :key="item.label"
+                  v-if="item.type === 'slot'"
+                  :show-overflow-tooltip="true"
+                  :label="item.label"
+                  :prop="item.property"
+                  align="center"
+                >
+                  <template #default="scope"> </template>
+                </el-table-column>
+                <el-table-column
+                  v-else
+                  :prop="item.property"
+                  :label="item.label"
+                  :show-overflow-tooltip="true"
+                  align="center"
+                />
+              </template>
+            </el-table>
           </div>
         </div>
         <div class="tabelPart">
@@ -146,8 +177,42 @@
               <span @click="changeTab('长途汽车', '1')">路线</span>
             </div>
           </div>
-          <div style="width: 100%; height: 270px"  v-if="data['长途汽车'].tab == '0'">
+          <div
-            <tL :list1="data['长途汽车'].list1" :year="data['长途汽车'].times"></tL>
+            style="width: 100%; height: 270px"
+            v-if="data['长途汽车'].tab == '0'"
+          >
+            <tL
+              :list1="data['长途汽车'].list1"
+              :year="data['长途汽车'].times"
+            ></tL>
+          </div>
+          <div v-else style="width: 100%; height: 270px">
+            <el-table
+              :data="data['长途汽车'].tableData"
+              max-height="270"
+              :header-cell-style="{ background: '#008FCD' }"
+              :key="tableKey"
+            >
+              <template v-for="item in data['长途汽车'].columns">
+                <el-table-column
+                  :key="item.label"
+                  v-if="item.type === 'slot'"
+                  :show-overflow-tooltip="true"
+                  :label="item.label"
+                  :prop="item.property"
+                  align="center"
+                >
+                  <template #default="scope"> </template>
+                </el-table-column>
+                <el-table-column
+                  v-else
+                  :prop="item.property"
+                  :label="item.label"
+                  :show-overflow-tooltip="true"
+                  align="center"
+                />
+              </template>
+            </el-table>
           </div>
         </div>
         <div class="tabelPart">
@@ -187,9 +252,52 @@
               <span @click="changeTab('高铁', '1')">路线</span>
             </div>
           </div>
-          <div style="width: 100%; height: 270px"  v-if="data['高铁'].tab == '0'">
+          <div
+            style="width: 100%; height: 270px"
+            v-if="data['高铁'].tab == '0'"
+          >
             <tL :list1="data['高铁'].list1" :year="data['高铁'].times"></tL>
           </div>
+          <div v-else style="width: 100%; height: 270px">
+            <el-table
+              :data="data['高铁'].tableData"
+              max-height="230"
+              :header-cell-style="{ background: '#008FCD' }"
+              :key="tableKey"
+            >
+              <template v-for="item in data['高铁'].columns">
+                <el-table-column
+                  :key="item.label"
+                  v-if="item.type === 'slot'"
+                  :show-overflow-tooltip="true"
+                  :label="item.label"
+                  :prop="item.property"
+                  align="center"
+                >
+                  <template #default="scope"> </template>
+                </el-table-column>
+                <el-table-column
+                  v-else
+                  :prop="item.property"
+                  :label="item.label"
+                  :show-overflow-tooltip="true"
+                  align="center"
+                />
+              </template>
+            </el-table>
+            <div class="pagePart">
+            <el-pagination
+              background
+              layout="prev, pager, next,total"
+              :page-size="data['高铁'].pagination.pageSize"
+              :total="data['高铁'].pagination.total"
+              prev-text="上一页"
+              next-text="下一页"
+              @current-change="handleGt"
+              v-model:current-page="data['高铁'].pagination.currentPage"
+            />
+          </div>
+          </div>
         </div>
       </div>
     </div>
@@ -238,15 +346,426 @@ const data = reactive({
     tab: 0,
     list1: [],
     times: [],
+    tableData: [
+      {
+        lm: "1路",
+        smz: "客运中心—士元",
+        xjsbsj: "6:00",
+        xjmbsj: "17:05",
+        djsbsj: "6:00",
+        djmbsj: "17:05",
+        cc: "24",
+      },
+      {
+        lm: "2路",
+        smz: "客运中心—东日农批",
+        xjsbsj: "6:30",
+        xjmbsj: "17:40",
+        djsbsj: "6:30",
+        djmbsj: "17:20",
+        cc: "36",
+      },
+      {
+        lm: "3路",
+        smz: "龙三中—东日农批",
+        xjsbsj: "6:30",
+        xjmbsj: "17:40",
+        djsbsj: "6:30",
+        djmbsj: "17:20",
+        cc: "30",
+      },
+      {
+        lm: "4路",
+        smz: "客运中心—后方",
+        xjsbsj: "6:30",
+        xjmbsj: "16:30",
+        djsbsj: "6:30",
+        djmbsj: "16:30",
+        cc: "8",
+      },
+      {
+        lm: "5路",
+        smz: "客运中心—城南首末站",
+        xjsbsj: "6:40",
+        xjmbsj: "17:40",
+        djsbsj: "6:40",
+        djmbsj: "17:20",
+        cc: "18",
+      },
+      {
+        lm: "6路",
+        smz: "客运中心—姜席堰",
+        xjsbsj: "6:55",
+        xjmbsj: "16:30",
+        djsbsj: "6:55",
+        djmbsj: "16:30",
+        cc: "7",
+      },
+      {
+        lm: "7路",
+        smz: "客运中心—汽车北站",
+        xjsbsj: "6:10",
+        xjmbsj: "17:40",
+        djsbsj: "6:00",
+        djmbsj: "17:20",
+        cc: "49",
+      },
+      {
+        lm: "8路",
+        smz: "客运中心—年年红",
+        xjsbsj: "6:35",
+        xjmbsj: "17:05",
+        djsbsj: "6:35",
+        djmbsj: "17:05",
+        cc: "15",
+      },
+      {
+        lm: "9路",
+        smz: "夜班环线（A线：客运中心—太平路—客运中心，B线：客运中心—荣昌路—客运中心）",
+        xjsbsj: "A线18:20 B线19:40",
+        xjmbsj: "A线18:40 B线20:00",
+        djsbsj: "A线18:20 B线19:40",
+        djmbsj: "A线18:40 B线20:00",
+        cc: "6",
+      },
+      {
+        lm: "10路",
+        smz: "客运中心—孝福",
+        xjsbsj: "6:30",
+        xjmbsj: "16:30",
+        djsbsj: "6:30",
+        djmbsj: "16:30",
+        cc: "8",
+      },
+      {
+        lm: "11路",
+        smz: "詹家—城东（人民医院）",
+        xjsbsj: "",
+        xjmbsj: "",
+        djsbsj: "6:30",
+        djmbsj: "16:50",
+        cc: "12",
+      },
+      {
+        lm: "12路",
+        smz: "客运中心—城东新城-士元",
+        xjsbsj: "6:30",
+        xjmbsj: "17:35",
+        djsbsj: "6:30",
+        djmbsj: "17:20",
+        cc: "8",
+      },
+      {
+        lm: "16路",
+        smz: "客运中心—城东新城-东华街道",
+        xjsbsj: "6:20",
+        xjmbsj: "17:20",
+        djsbsj: "6:20",
+        djmbsj: "17:10",
+        cc: "18",
+      },
+      {
+        lm: "旅游专线",
+        smz: "龙游客运中心-衢州旅游集散中心",
+        xjsbsj: "",
+        xjmbsj: "",
+        djsbsj: "7:00",
+        djmbsj: "14:00",
+        cc: "2",
+      },
+      {
+        lm: "201A",
+        smz: "龙游—湖镇",
+        xjsbsj: "6:10",
+        xjmbsj: "17:40",
+        djsbsj: "6:20",
+        djmbsj: "17:20",
+        cc: "44",
+      },
+      {
+        lm: "201B",
+        smz: "龙游—城东新城—湖镇",
+        xjsbsj: "7:00",
+        xjmbsj: "17:10",
+        djsbsj: "7:00",
+        djmbsj: "17:00",
+        cc: "8",
+      },
+      {
+        lm: "202",
+        smz: "龙游—周家",
+        xjsbsj: "6:40",
+        xjmbsj: "16:20",
+        djsbsj: "6:40",
+        djmbsj: "16:20",
+        cc: "4",
+      },
+      {
+        lm: "203",
+        smz: "龙游—地圩—湖镇",
+        xjsbsj: "",
+        xjmbsj: "",
+        djsbsj: "9:00",
+        djmbsj: "16:30",
+        cc: "3",
+      },
+      {
+        lm: "204",
+        smz: "龙游—社阳",
+        xjsbsj: "6:20",
+        xjmbsj: "16:00",
+        djsbsj: "6:20",
+        djmbsj: "16:00",
+        cc: "15",
+      },
+      {
+        lm: "205",
+        smz: "龙游—上堤",
+        xjsbsj: "6:25",
+        xjmbsj: "14:30",
+        djsbsj: "6:25",
+        djmbsj: "14:30",
+        cc: "3",
+      },
+      {
+        lm: "206",
+        smz: "龙游—源头",
+        xjsbsj: "6:40",
+        xjmbsj: "14:40",
+        djsbsj: "6:40",
+        djmbsj: "14:15",
+        cc: "3",
+      },
+      {
+        lm: "221",
+        smz: "龙游—溪口",
+        xjsbsj: "6:00",
+        xjmbsj: "17:40",
+        djsbsj: "6:20",
+        djmbsj: "17:20",
+        cc: "68",
+      },
+      {
+        lm: "222",
+        smz: "龙游—官潭—溪口",
+        xjsbsj: "6:40",
+        xjmbsj: "16:40",
+        djsbsj: "6:40",
+        djmbsj: "16:40",
+        cc: "12（11趟至溪口，1趟次溪口—石角调头）",
+      },
+      {
+        lm: "223",
+        smz: "龙游—马戍口",
+        xjsbsj: "6:15",
+        xjmbsj: "16:30",
+        djsbsj: "6:20",
+        djmbsj: "16:30",
+        cc: "12",
+      },
+      {
+        lm: "224",
+        smz: "龙游—芰塘金—岭根",
+        xjsbsj: "6:10",
+        xjmbsj: "15:50",
+        djsbsj: "6:10",
+        djmbsj: "15:50",
+        cc: "8",
+      },
+      {
+        lm: "225",
+        smz: "龙游—姜家（廖家）",
+        xjsbsj: "7:05",
+        xjmbsj: "16:45",
+        djsbsj: "6:40",
+        djmbsj: "16:45",
+        cc: "8",
+      },
+      {
+        lm: "226",
+        smz: "龙游—六春湖",
+        xjsbsj: "6:30",
+        xjmbsj: "14:20",
+        djsbsj: "6:30",
+        djmbsj: "14:20",
+        cc: "6",
+      },
+      {
+        lm: "301",
+        smz: "龙游—金村",
+        xjsbsj: "7:30",
+        xjmbsj: "14:30",
+        djsbsj: "7:30",
+        djmbsj: "14:30",
+        cc: "6",
+      },
+      {
+        lm: "302",
+        smz: "龙游—南溪",
+        xjsbsj: "6:50",
+        xjmbsj: "14:40",
+        djsbsj: "6:50",
+        djmbsj: "14:40",
+        cc: "6",
+      },
+      {
+        lm: "303",
+        smz: "龙游—徐坞",
+        xjsbsj: "6:50",
+        xjmbsj: "14:50",
+        djsbsj: "6:50",
+        djmbsj: "14:50",
+        cc: "6",
+      },
+    ],
+    columns: [
+      {
+        label: "路码",
+        property: "lm",
+      },
+      {
+        label: "首末站",
+        property: "smz",
+      },
+      {
+        label: "首站夏季首班时间",
+        property: "xjsbsj",
+      },
+      {
+        label: "首站夏季末班时间",
+        property: "xjmbsj",
+      },
+      {
+        label: "首站冬季首班时间",
+        property: "djsbsj",
+      },
+      {
+        label: "首站冬季末班时间",
+        property: "djmbsj",
+      },
+      {
+        label: "日总班次",
+        property: "cc",
+      },
+    ],
+  },
+  长途汽车: {
+    tab: 0,
+    list1: [],
+    times: [],
+    tableData: [
+      {
+        xl: "杭州普客定制线",
+        fcsj: "7:10",
+      },
+      {
+        xl: "杭州定制线",
+        fcsj: "8:20",
+      },
+      {
+        xl: "杭州线",
+        fcsj: "14:05",
+      },
+      {
+        xl: "宁波定制线",
+        fcsj: "8:40",
+      },
+      {
+        xl: "宁波线",
+        fcsj: "14:00",
+      },
+      {
+        xl: "德兴线",
+        fcsj: "12:20",
+      },
+      {
+        xl: "路桥线",
+        fcsj: "9:30",
+      },
+      {
+        xl: "富阳线",
+        fcsj: "9:40",
+      },
+      {
+        xl: "遂昌线",
+        fcsj: "9:50  15:40",
+      },
+      {
+        xl: "石浦线",
+        fcsj: "10:00",
+      },
+      {
+        xl: "瑞安线",
+        fcsj: "10:05",
+      },
+      {
+        xl: "慈溪线",
+        fcsj: "10:20",
+      },
+      {
+        xl: "普陀线",
+        fcsj: "10:50",
+      },
+    ],
+    columns: [
+      {
+        label: "线路名称",
+        property: "xl",
+      },
+      {
+        label: "发车时间",
+        property: "fcsj",
+      },
+    ],
+  },
+  高铁: {
+    tab: 0,
+    list1: [],
+    times: [],
+    tableData: [],
+    columns: [
+      {
+        label: "班次",
+        property: "cc",
+      },
+      {
+        label: "始发站-终点站",
+        property: "qqz",
+      },
+      {
+        label: "到达龙游站时间",
+        property: "dd",
+      },
+    ],
+    pagination: {
+      total: 100,
+      pageSize: 10,
+      currentPage: 1,
+    },
   },
-  长途汽车: { tab: 0, list1: [], times: [] },
-  高铁: { tab: 0, list1: [], times: [] },
 });
 const changeTab = (name, index) => {
   data[name].tab = index;
 };
+//Tab切换分页
+const handleGt = (current) => {
+  data['高铁'].pagination.currentPage = current;
+  getTableTab("/api/ggfwyth/lyzlcskList", '高铁');
+};
+//获取交通事业-公交，高铁，大巴数据
+const getTableTab = (url, name) => {
+  http
+    .get(`${url}?page=${data[name].pagination.currentPage}&size=${data[name].pagination.pageSize}`)
+    .then((res) => {
+      if (res.code == 200) {
+        data[name].tableData = res.data;
+        data[name].pagination.total = res.count;
+      }
+    });
+};
 //获取数据
 const getData = () => {
+  //echart图数据
   http.get("/api/ggfwyth/ddcList").then((res) => {
     if (res.code == 200) {
       data["电动单车"].list1 = res.data.qxcs;
@@ -272,6 +791,8 @@ const getData = () => {
       data["高铁"].times = res.data.times;
     }
   });
+  //表格数据
+  getTableTab("/api/ggfwyth/lyzlcskList", '高铁');
 };
 onMounted(() => {
   getData();
@@ -311,7 +832,7 @@ onMounted(() => {
   width: 32%;
   padding: 16px;
   padding-top: 3px;
-//   height: 400px;
+  //   height: 400px;
   background: linear-gradient(
       270deg,
       rgba(0, 77, 131, 0.69) 0%,
@@ -417,4 +938,79 @@ onMounted(() => {
     background-size: 100% 100%;
   }
 }
+.pagePart {
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-top: 5px;
+  :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 button:disabled) {
+    background-color: rgba(0, 116, 255, 0) !important;
+  }
+  :deep(.el-pagination > .is-last) {
+    color: #ffffff;
+  }
+}
+: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;
+}
+</style>
+<style lang="scss" scoped>
+// 分页
+: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;
+}
 </style>

src/view/sy.vue

@@ -618,12 +618,7 @@
       @handle="handlePaginationTab"
       @close="close"
     >
-      <template #dd="{ currentCol, currentData }">
+ 
-        <div>
-          <!-- {{ currentData.dd.substring(0, currentData.dd.indexOf(".")) }} -->
-          {{ currentData.dd }}
-        </div>
-      </template>
     </DialogTab>
   </div>
 </template>