xiangshan
/
ggfwjsc
22
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Compare commits

base: xiangshan:d7bef0e20c0751f00c383d8998c3c2798d6182a1
Branches Tags
xiangshan:main
..
compare: xiangshan:df0d957e8e8ff18ce6583fca904fd90e4e672f8e
Branches Tags
xiangshan:main

No commits in common. "d7bef0e20c0751f00c383d8998c3c2798d6182a1" and "df0d957e8e8ff18ce6583fca904fd90e4e672f8e" have entirely different histories.
d7bef0e20c ... df0d957e8e

3 changed files with 1 additions and 434 deletions
Show Stats Expand all files Collapse all files

5
src/router/index.js
View File

@ -110,11 +110,6 @@ 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",

420
src/view/jt_details.vue
View File

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

10
src/view/sy_table.vue
View File

@ -212,18 +212,10 @@ const goto = (val) => {
// query: { name: val.name, id: val.id },
// });
// } 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",
query: { name: val.name, id: val.id, xh: val.xh },
});
}
// ElMessage.warning({
// message: `${val.name}暂无数据!`,