对接 Traffic7 重大活动接口,修复图表 symbol 图片加载与生产环境 API 配置。
Co-authored-by: Cursor <cursoragent@cursor.com>main
parent
35440a9493
commit
ea43f6261a
|
|
@ -1,2 +1,2 @@
|
||||||
# 生产环境配置
|
# 生产环境配置 目前是配置代理的方式
|
||||||
VITE_API_BASE_URL=http://10.104.10.151:8888
|
VITE_API_BASE_URL=/juntech-ysdp
|
||||||
|
|
|
||||||
|
|
@ -15,7 +15,7 @@ const props = defineProps({
|
||||||
// 光晕图片路径
|
// 光晕图片路径
|
||||||
glowImage: {
|
glowImage: {
|
||||||
type: String,
|
type: String,
|
||||||
default: '/imgs/guangyun.png'
|
default: './imgs/guangyun.png'
|
||||||
},
|
},
|
||||||
// 是否显示虚线光圈
|
// 是否显示虚线光圈
|
||||||
showRing: {
|
showRing: {
|
||||||
|
|
|
||||||
|
|
@ -188,6 +188,14 @@ var server = {
|
||||||
return ysdpPost('/api/traffic/getStationsByLine/v1', { lineId })
|
return ysdpPost('/api/traffic/getStationsByLine/v1', { lineId })
|
||||||
},
|
},
|
||||||
|
|
||||||
|
getBigActivityList({ metroLine, metroStation, activityMonth }) {
|
||||||
|
return ysdpPost('/api/traffic/getBigActivityList/v1', {
|
||||||
|
metroLine,
|
||||||
|
metroStation,
|
||||||
|
activityMonth
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
cleanTrafficCache() {
|
cleanTrafficCache() {
|
||||||
return ysdpPost('/api/traffic/cleanCache')
|
return ysdpPost('/api/traffic/cleanCache')
|
||||||
},
|
},
|
||||||
|
|
|
||||||
|
|
@ -47,6 +47,39 @@ export function toWanRen(value) {
|
||||||
return (num / 10000).toFixed(2)
|
return (num / 10000).toFixed(2)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const ACTIVITY_STATUS_TYPE_MAP = {
|
||||||
|
进行中: 'active',
|
||||||
|
已结束: 'ended',
|
||||||
|
未开始: 'pending'
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 活动月份格式化为 YYYY-MM */
|
||||||
|
export function formatActivityMonth(month) {
|
||||||
|
if (!month) return ''
|
||||||
|
const [year, monthValue] = String(month).split('-')
|
||||||
|
if (!year || !monthValue) return ''
|
||||||
|
return `${year}-${String(monthValue).padStart(2, '0')}`
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 将重大活动清单接口数据映射为 Traffic7 所需结构 */
|
||||||
|
export function processBigActivityList(data) {
|
||||||
|
if (!Array.isArray(data)) return []
|
||||||
|
|
||||||
|
return data.map(item => {
|
||||||
|
const startDate = item.startDate ? item.startDate.replace(/-/g, '/') : ''
|
||||||
|
const endDate = item.endDate ? item.endDate.replace(/-/g, '/') : ''
|
||||||
|
|
||||||
|
return {
|
||||||
|
id: item.id,
|
||||||
|
name: item.activityName || '',
|
||||||
|
time: startDate && endDate ? `${startDate}--${endDate}` : startDate || endDate,
|
||||||
|
venue: item.venue || '',
|
||||||
|
status: item.status || '',
|
||||||
|
statusType: ACTIVITY_STATUS_TYPE_MAP[item.status] || 'pending'
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
/** 将站点排名接口数据映射为 TrafficRankRow 所需结构 */
|
/** 将站点排名接口数据映射为 TrafficRankRow 所需结构 */
|
||||||
export function mapStationRankList(data, type = '进出站') {
|
export function mapStationRankList(data, type = '进出站') {
|
||||||
if (!Array.isArray(data) || !data.length) return []
|
if (!Array.isArray(data) || !data.length) return []
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,8 @@
|
||||||
import axios from 'axios'
|
import axios from 'axios'
|
||||||
|
|
||||||
|
// 开发环境留空时默认 /juntech-ysdp(走 vite proxy);生产环境 VITE_API_BASE_URL 已含此前缀,不再重复拼接
|
||||||
const ysdpRequest = axios.create({
|
const ysdpRequest = axios.create({
|
||||||
baseURL: `${import.meta.env.VITE_API_BASE_URL || ''}/juntech-ysdp`,
|
baseURL: import.meta.env.VITE_API_BASE_URL || '/juntech-ysdp',
|
||||||
timeout: 30000
|
timeout: 30000
|
||||||
})
|
})
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -3,12 +3,12 @@
|
||||||
<!-- <div class="module-title">模块一</div> -->
|
<!-- <div class="module-title">模块一</div> -->
|
||||||
<div class="module-body">
|
<div class="module-body">
|
||||||
<div class="pyramid-3d-wrapper">
|
<div class="pyramid-3d-wrapper">
|
||||||
<Pyramid3D :show-glow="true" :show-ring="true" glow-image="/imgs/guangyun.png" color="#00d4ff" :scale="1.77"
|
<Pyramid3D :show-glow="true" :show-ring="true" glow-image="./imgs/guangyun.png" color="#00d4ff" :scale="1.77"
|
||||||
:rotation-speed="0.2" :auto-rotate="true" :width="252" :height="166" @loaded="onPyramidLoaded"
|
:rotation-speed="0.2" :auto-rotate="true" :width="252" :height="166" @loaded="onPyramidLoaded"
|
||||||
@error="onPyramidError" />
|
@error="onPyramidError" />
|
||||||
</div>
|
</div>
|
||||||
<div class="pyramid-3d-wrapper2">
|
<div class="pyramid-3d-wrapper2">
|
||||||
<Pyramid3D :show-glow="true" :show-ring="true" glow-image="/imgs/guangyun.png" color="#00d4ff" :scale="1.77"
|
<Pyramid3D :show-glow="true" :show-ring="true" glow-image="./imgs/guangyun.png" color="#00d4ff" :scale="1.77"
|
||||||
:rotation-speed="0.2" :auto-rotate="true" :width="252" :height="166" @loaded="onPyramidLoaded"
|
:rotation-speed="0.2" :auto-rotate="true" :width="252" :height="166" @loaded="onPyramidLoaded"
|
||||||
@error="onPyramidError" />
|
@error="onPyramidError" />
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -37,9 +37,10 @@ import 'odometer/themes/odometer-theme-default.css'
|
||||||
import { METRO_LINES } from '@/utils/const'
|
import { METRO_LINES } from '@/utils/const'
|
||||||
import server from '@/utils/service'
|
import server from '@/utils/service'
|
||||||
import { processYunyingInfo } from '@/utils/yunying'
|
import { processYunyingInfo } from '@/utils/yunying'
|
||||||
|
import { pointGlowSymbolBase64 } from '../assets/4-item.base64.js'
|
||||||
|
|
||||||
const hours = ['5', '7', '9', '11', '13', '15', '17', '19', '21', '23']
|
const hours = ['5', '7', '9', '11', '13', '15', '17', '19', '21', '23']
|
||||||
const pointGlowSymbol = 'image:///imgs/traffic/4-item.png'
|
const pointGlowSymbol = `image://${pointGlowSymbolBase64}`
|
||||||
|
|
||||||
const lineCards = ref([])
|
const lineCards = ref([])
|
||||||
const compareDate = ref('')
|
const compareDate = ref('')
|
||||||
|
|
|
||||||
|
|
@ -14,13 +14,15 @@ import VChart from 'vue-echarts'
|
||||||
import * as echarts from 'echarts'
|
import * as echarts from 'echarts'
|
||||||
import server from '@/utils/service'
|
import server from '@/utils/service'
|
||||||
import { processStationPassengerFlow, calcChartYAxisMax } from '@/utils/traffic'
|
import { processStationPassengerFlow, calcChartYAxisMax } from '@/utils/traffic'
|
||||||
|
import { pointGlowSymbolBase64 } from '../assets/4-item.base64.js'
|
||||||
|
import { pointGlowSymbol1Base64 } from '../assets/4-item1.base64.js'
|
||||||
|
|
||||||
const selectedLine = ref('3')
|
const selectedLine = ref('3')
|
||||||
const selectedStation = ref('0313')
|
const selectedStation = ref('0313')
|
||||||
|
|
||||||
const hours = ['5', '7', '9', '11', '13', '15', '17', '19', '21', '23']
|
const hours = ['5', '7', '9', '11', '13', '15', '17', '19', '21', '23']
|
||||||
const pointGlowSymbol = 'image:///imgs/traffic/4-item.png'
|
const pointGlowSymbol = `image://${pointGlowSymbolBase64}`
|
||||||
const pointGlowSymbol1 = 'image:///imgs/traffic/4-item1.png'
|
const pointGlowSymbol1 = `image://${pointGlowSymbol1Base64}`
|
||||||
|
|
||||||
const topActual = ref([])
|
const topActual = ref([])
|
||||||
const topCompare = ref([])
|
const topCompare = ref([])
|
||||||
|
|
|
||||||
|
|
@ -8,8 +8,7 @@
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<div class="activity-list">
|
<div class="activity-list">
|
||||||
|
<article v-for="activity in activityList" :key="activity.id" class="activity-card">
|
||||||
<article v-for="activity in activityList" :key="activity.name" class="activity-card">
|
|
||||||
<div class="activity-status" :class="`activity-status--${activity.statusType}`">
|
<div class="activity-status" :class="`activity-status--${activity.statusType}`">
|
||||||
{{ activity.status }}
|
{{ activity.status }}
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -31,58 +30,62 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { ref } from 'vue'
|
import { onMounted, ref, watch } from 'vue'
|
||||||
|
import dayjs from 'dayjs'
|
||||||
import StationTimeFilter from './StationTimeFilter.vue'
|
import StationTimeFilter from './StationTimeFilter.vue'
|
||||||
|
import server from '@/utils/service'
|
||||||
|
import { formatActivityMonth, processBigActivityList } from '@/utils/traffic'
|
||||||
|
|
||||||
const selectedLine = ref('7')
|
const selectedLine = ref('7')
|
||||||
const selectedStation = ref('0753')
|
const selectedStation = ref('0753')
|
||||||
const selectedMonth = ref('2026-5')
|
const selectedMonth = ref(dayjs().format('YYYY-M'))
|
||||||
|
const activityList = ref([])
|
||||||
|
const lineApiIdMap = ref({})
|
||||||
|
|
||||||
const activityList = [
|
const loadLineApiIdMap = async () => {
|
||||||
{
|
try {
|
||||||
name: 'CBE中国美容博览会',
|
const response = await server.getLineList()
|
||||||
time: '2026/05/12--2026/05/14',
|
if (response.data.success && response.data.data?.length) {
|
||||||
venue: '新国际博览中心',
|
lineApiIdMap.value = Object.fromEntries(
|
||||||
status: '进行中',
|
response.data.data.map(item => [String(item.lineId), String(item.id)])
|
||||||
statusType: 'active'
|
)
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '上海插画艺术节',
|
|
||||||
time: '2026/05/01--2026/05/03',
|
|
||||||
status: '已结束',
|
|
||||||
statusType: 'ended'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '中国国际自行车展览会/中国国际电动车及零配件展览会/中国国际摩托车及零配件展览会/上海国际户外骑行装备展览会',
|
|
||||||
time: '2026/05/05--2026/05/08',
|
|
||||||
status: '已结束',
|
|
||||||
statusType: 'ended'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'SIAL 西雅国际食品展览会(上海)',
|
|
||||||
time: '2026/05/18--2026/05/20',
|
|
||||||
status: '未开始',
|
|
||||||
statusType: 'pending'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '亚洲国际有机产品博览会',
|
|
||||||
time: '2026/05/18--2026/05/20',
|
|
||||||
status: '未开始',
|
|
||||||
statusType: 'pending'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '上海网络安全博览会暨高峰论坛',
|
|
||||||
time: '2026/05/26--2026/05/28',
|
|
||||||
status: '未开始',
|
|
||||||
statusType: 'pending'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '中国国际厨房、卫浴设施展览会',
|
|
||||||
time: '2026/05/26--2026/05/29',
|
|
||||||
status: '未开始',
|
|
||||||
statusType: 'pending'
|
|
||||||
}
|
}
|
||||||
]
|
} catch (error) {
|
||||||
|
console.error('获取线路列表失败:', error)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const fetchActivityList = async () => {
|
||||||
|
const metroLine = lineApiIdMap.value[selectedLine.value]
|
||||||
|
if (!metroLine || !selectedStation.value || !selectedMonth.value) {
|
||||||
|
activityList.value = []
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
const response = await server.getBigActivityList({
|
||||||
|
metroLine,
|
||||||
|
metroStation: selectedStation.value,
|
||||||
|
activityMonth: formatActivityMonth(selectedMonth.value)
|
||||||
|
})
|
||||||
|
|
||||||
|
if (response.data.success) {
|
||||||
|
activityList.value = processBigActivityList(response.data.data)
|
||||||
|
} else {
|
||||||
|
activityList.value = []
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('获取重大活动清单失败:', error)
|
||||||
|
activityList.value = []
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
watch([selectedLine, selectedStation, selectedMonth], fetchActivityList)
|
||||||
|
|
||||||
|
onMounted(async () => {
|
||||||
|
await loadLineApiIdMap()
|
||||||
|
await fetchActivityList()
|
||||||
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
|
|
|
||||||
|
|
@ -58,8 +58,7 @@ const rankingList = [
|
||||||
{ rank: 1, lineId: 3, count: 20 },
|
{ rank: 1, lineId: 3, count: 20 },
|
||||||
{ rank: 2, lineId: 4, count: 2 },
|
{ rank: 2, lineId: 4, count: 2 },
|
||||||
{ rank: 3, lineId: 7, count: 11 },
|
{ rank: 3, lineId: 7, count: 11 },
|
||||||
{ rank: 4, lineId: 41, count: 11 },
|
{ rank: 4, lineId: 11, count: 11 }
|
||||||
{ rank: 5, lineId: 51, count: 11 }
|
|
||||||
]
|
]
|
||||||
|
|
||||||
const getLineTheme = lineId => {
|
const getLineTheme = lineId => {
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue