This commit is contained in:
duanxiaohai 2024-10-31 15:55:18 +08:00
commit 9fab544136
4 changed files with 610 additions and 19 deletions

View File

@ -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>

View File

@ -49,7 +49,7 @@ const getOption = () => {
show: false,
},
grid: {
top: "10%",
top: "11%",
left: "5%",
right: "5%",
bottom: "3%",

View File

@ -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">
@ -26,7 +26,7 @@
/>
</div>
</div>
<div style="width: 100%; height: 280px; margin-top: 30px">
<div style="width: 100%; height: 270px; margin-top: 30px">
<eL
:list1="data['公共自行车'].list1"
:list2="data['公共自行车'].list2"
@ -57,7 +57,7 @@
/>
</div>
</div>
<div style="width: 100%; height: 280px; margin-top: 30px">
<div style="width: 100%; height: 270px; margin-top: 30px">
<eL
:list1="data['电动单车'].list1"
:list2="data['电动单车'].list2"
@ -103,10 +103,41 @@
</div>
</div>
<div
style="width: 100%; height: 280px"
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: 280px" v-if="data['长途汽车'].tab == '0'">
<tL :list1="data['长途汽车'].list1" :year="data['长途汽车'].times"></tL>
<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="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: 280px" 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: "1211趟至溪口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>

View File

@ -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>