Compare commits
2 Commits
df0d957e8e
...
d7bef0e20c
| Author | SHA1 | Date |
|---|---|---|
 姚宇浩
|
d7bef0e20c | |
|
姚宇浩
|
66b967e097 |
|
|
@ -110,6 +110,11 @@ const router = createRouter({
|
||||||
path: "/home/index/table/details",
|
path: "/home/index/table/details",
|
||||||
component: () => import("../view/sy_details.vue"),
|
component: () => import("../view/sy_details.vue"),
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
name: "首页表格交通便利详情",
|
||||||
|
path: "/home/index/table/jtDetails",
|
||||||
|
component: () => import("../view/jt_details.vue"),
|
||||||
|
},
|
||||||
{
|
{
|
||||||
name: "人物图",
|
name: "人物图",
|
||||||
path: "/home/index/person",
|
path: "/home/index/person",
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -212,10 +212,18 @@ const goto = (val) => {
|
||||||
// query: { name: val.name, id: val.id },
|
// query: { name: val.name, id: val.id },
|
||||||
// });
|
// });
|
||||||
// } else {
|
// } else {
|
||||||
|
if (val.name == "公共交通") {
|
||||||
|
router.push({
|
||||||
|
path: "/home/index/table/jtDetails",
|
||||||
|
query: { name: val.name},
|
||||||
|
});
|
||||||
|
}else{
|
||||||
router.push({
|
router.push({
|
||||||
path: "/home/index/table/details",
|
path: "/home/index/table/details",
|
||||||
query: { name: val.name, id: val.id, xh: val.xh },
|
query: { name: val.name, id: val.id, xh: val.xh },
|
||||||
});
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
// ElMessage.warning({
|
// ElMessage.warning({
|
||||||
// message: `${val.name}暂无数据!`,
|
// message: `${val.name}暂无数据!`,
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue