Compare commits
2 Commits
df0d957e8e
...
d7bef0e20c
| Author | SHA1 | Date |
|---|---|---|
 姚宇浩
|
d7bef0e20c | |
|
姚宇浩
|
66b967e097 |
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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 },
|
||||
// });
|
||||
// } 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}暂无数据!`,
|
||||
|
|
|
|||
Loading…
Reference in New Issue