Compare commits
No commits in common. "d7bef0e20c0751f00c383d8998c3c2798d6182a1" and "df0d957e8e8ff18ce6583fca904fd90e4e672f8e" have entirely different histories.
d7bef0e20c
...
df0d957e8e
|
|
@ -110,11 +110,6 @@ 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",
|
||||||
|
|
|
||||||
|
|
@ -1,420 +0,0 @@
|
||||||
<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,18 +212,10 @@ const goto = (val) => {
|
||||||
// query: { name: val.name, id: val.id },
|
// query: { name: val.name, id: val.id },
|
||||||
// });
|
// });
|
||||||
// } else {
|
// } else {
|
||||||
if (val.name == "公共交通") {
|
router.push({
|
||||||
router.push({
|
|
||||||
path: "/home/index/table/jtDetails",
|
|
||||||
query: { name: val.name},
|
|
||||||
});
|
|
||||||
}else{
|
|
||||||
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