From c91b6734877a929cab8ed4cd6da41a40d5ce1cfd Mon Sep 17 00:00:00 2001 From: jiangAB Date: Fri, 26 Dec 2025 16:26:50 +0800 Subject: [PATCH] update --- public/map/components/CompanyShorePower.vue | 41 +- public/map/components/ShipShorePower.vue | 14 +- public/map/components/ShorePowerUsage.vue | 144 +++++- .../components/ShorePowerUsageSingleData.vue | 223 ++++++--- public/map/components/ShowData.vue | 141 +++++- public/map/components/cesiumMap.vue | 445 +----------------- .../components/charts/ComparisonBarChart.vue | 226 +++------ public/map/index.vue | 162 ++++++- src/api/shorepower/map/index.ts | 8 +- src/types/shorepower.d.ts | 36 ++ 10 files changed, 734 insertions(+), 706 deletions(-) diff --git a/public/map/components/CompanyShorePower.vue b/public/map/components/CompanyShorePower.vue index 65a4b7b..d77acdc 100644 --- a/public/map/components/CompanyShorePower.vue +++ b/public/map/components/CompanyShorePower.vue @@ -146,7 +146,8 @@ @click.stop="() => handleTimeRangeChange(company.id, option.value)"> {{ option.label }} -
总量: {{ handGetDeviceData(company.shorePowerIds) }}
+
总量: {{ handGetDeviceData(company.shorePowerIds, + getCompanyTimeRange(company.id)) }}
@@ -158,7 +159,7 @@
{{ - handGetDeviceData(shorePower.totalPowerDeviceId) || 0 }}
+ handGetDeviceData(shorePower.totalPowerDeviceId, getCompanyTimeRange(company.id)) || 0 }}
{{ shorePower.name }}
@@ -211,6 +212,9 @@ interface Props { realtimeDeviceDataTime: string; shorePowerList: ShorePowerBerth[]; handleGoBack: () => void; + yearData: any[]; + monthData: any[]; + dayData: any[]; } const props = defineProps() @@ -381,23 +385,46 @@ const deviceDataMap = computed(() => { return map; }); -const handGetDeviceData = (deviceId: number | number[]) => { +const handGetDeviceData = (deviceId: number | number[], range: 'realtime' | 'day' | 'month' | 'year') => { let totalValue = 0; + let rangData: RealtimeDeviceData[] = [] + if (range === 'realtime') { + rangData = props.realtimeDeviceData + } else if (range === 'day') { + rangData = props.dayData + } else if (range === 'month') { + rangData = props.monthData + } else if (range === 'year') { + rangData = props.yearData + } if (Array.isArray(deviceId)) { - // If deviceId is an array, sum all the measure values + // If deviceId is an array, sum all the measure values and subtract start values + deviceId.forEach(id => { const deviceData = deviceDataMap.value.get(id); + const startData = rangData.find(item => item.deviceId === id) + if (deviceData?.measureValue) { totalValue += deviceData.measureValue; } + + // For non-realtime ranges, subtract the start value + if (range !== 'realtime' && startData?.measureValue) { + totalValue -= startData.measureValue; + } }); } else { // If deviceId is a single number, get its measure value const deviceData = deviceDataMap.value.get(deviceId); + const startData = rangData.find(item => item.deviceId === deviceId) + console.log(deviceData, startData) if (deviceData?.measureValue) { totalValue = deviceData.measureValue; } + if (range !== 'realtime' && startData?.measureValue) { + totalValue -= startData.measureValue + } } return totalValue.toFixed(2); @@ -589,8 +616,8 @@ onMounted(() => { } .company-berth-count { - font-size: 16px; - color: #aaa; + font-size: 18px; + color: #eee; margin-top: 4px; } @@ -605,7 +632,7 @@ onMounted(() => { .data-update-time { margin-left: 6px; - font-size: 16px; + font-size: 24px; color: #aaa; white-space: nowrap; } diff --git a/public/map/components/ShipShorePower.vue b/public/map/components/ShipShorePower.vue index e9b3608..99f8d62 100644 --- a/public/map/components/ShipShorePower.vue +++ b/public/map/components/ShipShorePower.vue @@ -446,16 +446,16 @@ - - {{ selectedShip.usageRecordInfo?.overPowerSupplyOperator || '-' }} + + {{ selectedShip.usageRecordInfo?.beginPowerUsageOperator || '-' }} - - {{ selectedShip.usageRecordInfo?.beginPowerUsageOperator || '-' }} + + {{ selectedShip.usageRecordInfo?.overPowerSupplyOperator || '-' }} @@ -769,7 +769,6 @@ const formatDateTime = (timestamp: string | number | Date | undefined) => { } // 显示船舶详情 const showDetail = (row: ShipRespVo) => { - console.log('first') selectedShip.value = row detailDialogVisible.value = true } @@ -779,7 +778,6 @@ onMounted(async () => { berthIdAndNameList.value = await BERTH_DISTRICT() dockIdAndNameList.value = await DOCK_DISTRICT() harborDistrictIdAndNameList.value = await HARBOR_DISTRICT() - console.log('props.shipData', props.shipData) localShipData.value = props.shipData }) @@ -1112,8 +1110,8 @@ onMounted(async () => { } .time-range-item { - margin-left: 10px; - font-size: 16px; + margin-left: 24px; + font-size: 24px; font-weight: 600; font-weight: bold; color: rgba(255, 255, 255, 0.7); diff --git a/public/map/components/ShorePowerUsage.vue b/public/map/components/ShorePowerUsage.vue index 1a11540..ad1d887 100644 --- a/public/map/components/ShorePowerUsage.vue +++ b/public/map/components/ShorePowerUsage.vue @@ -135,15 +135,30 @@ {{ card.title }}
- - - +
+
+ 开始时间: + + + +
+
+ 结束时间: + + + +
+
-->
- {{timeRangeOptions.find(option => option.value === timeRange)?.label || - ''}}量: -
{{ chartData[timeRange][card.value] }}
+ 区间量 +
{{ historyData[card.value] }}
@@ -288,6 +302,11 @@ interface CardInfo { value: string; } +interface RawItem { + measureValue: number; + measureTime: Date; +} + interface ShorePowerUsageData { totalPower: number; // 累计用电（千瓦时） fuelReduction: number; // 减少燃油（吨） @@ -348,6 +367,8 @@ export interface deviceData { const pageType = ref<'realtime' | 'history'>('realtime') const dateRange = ref([]) +const startDate = ref('') +const endDate = ref('') const totalPower = ref('0') const fuelReduction = ref('0') const co2Reduction = ref('0') @@ -395,23 +416,25 @@ const startTimeDisplay = computed(() => { // 计算日期选择器选中的时间范围显示 const selectedDateRangeDisplay = computed(() => { - if (!dateRange.value || dateRange.value.length !== 2) { + /* if (!dateRange.value || dateRange.value.length !== 2) { return ''; - } + } */ - const [startDate, endDate] = dateRange.value; + // const [startDate, endDate] = dateRange.value; + // const startDate = startDate.value + // const endDate = endDate.value // 根据不同的时间粒度格式化日期 switch (historyTimeGranularity.value) { case 'year': // 年格式: YYYY - return `${startDate} - ${endDate}`; + return `${startDate.value} - ${endDate.value}`; case 'month': // 月格式: YYYY-MM - return `${startDate} - ${endDate}`; + return `${startDate.value} - ${endDate.value}`; default: // 日格式: YYYY-MM-DD - return `${startDate} - ${endDate}`; + return `${startDate.value} - ${endDate.value}`; } }); @@ -540,6 +563,64 @@ const calculateTotalDiff = (data) => { }, 0); } +// 处理开始日期变化 +const handleStartDateChange = (date: string | null) => { + if (date) { + startDate.value = date + // 如果结束日期为空，自动设置一个合理的结束日期 + if (!endDate.value) { + const start = new Date(date) + let end = new Date(date) + + switch (historyTimeGranularity.value) { + case 'year': + end.setFullYear(start.getFullYear() + 1) + break + case 'month': + end.setMonth(start.getMonth() + 1) + break + default: + end.setDate(start.getDate() + 7) // 默认设置一周后 + break + } + + // 格式化结束日期 + const formatEndDate = (date: Date) => { + const year = date.getFullYear() + const month = String(date.getMonth() + 1).padStart(2, '0') + const day = String(date.getDate()).padStart(2, '0') + + switch (historyTimeGranularity.value) { + case 'year': + return year.toString() + case 'month': + return `${year}-${month}` + default: + return `${year}-${month}-${day}` + } + } + + endDate.value = formatEndDate(end) + } + + // 只有当开始和结束日期都设置时才触发查询 + if (startDate.value && endDate.value) { + handleSelectDate([startDate.value, endDate.value]) + } + } +} + +// 处理结束日期变化 +const handleEndDateChange = (date: string | null) => { + if (date) { + endDate.value = date + // 只有当开始和结束日期都设置时才触发查询 + if (startDate.value && endDate.value) { + handleSelectDate([startDate.value, endDate.value]) + } + } +} + const handleSelectDate = async (range: string[] | null) => { if (!range || range.length !== 2) { // 清空逻辑 @@ -952,10 +1033,10 @@ onMounted(() => { handleGetRealTimeAllData(props.realtimeDeviceData) // 添加卡片选择事件监听器 - cardSelectedHandler = (event: CustomEvent) => { + /* cardSelectedHandler = (event: CustomEvent) => { selectedCard.value = event.detail } - window.addEventListener('cardSelected', cardSelectedHandler) + window.addEventListener('cardSelected', cardSelectedHandler) */ }) // 监听 activeHeadGroup 变化，当组件变为可见时触发 resize @@ -1077,13 +1158,34 @@ onBeforeUnmount(() => { } .time-range-item { - font-size: 16px; + font-size: 24px; font-weight: 600; font-weight: bold; color: rgba(255, 255, 255, 0.7); } +.separate-date-pickers { + display: flex; + align-items: center; + gap: 12px; +} +.date-picker-group { + display: flex; + align-items: center; + gap: 8px; +} + +.date-label { + font-size: 14px; + font-weight: 500; + color: rgba(255, 255, 255, 0.8); + white-space: nowrap; +} + +.date-picker { + width: 140px; +} .right { /* gap: 0 */ diff --git a/public/map/components/ShorePowerUsageSingleData.vue b/public/map/components/ShorePowerUsageSingleData.vue index d267493..5500b33 100644 --- a/public/map/components/ShorePowerUsageSingleData.vue +++ b/public/map/components/ShorePowerUsageSingleData.vue @@ -12,8 +12,7 @@ {{ card.title }}
-
起始时间: {{ startTimeDisplay }}
-
更新时间: {{ realtimeDeviceDataTime }}
+
{{ startTimeDisplay }} 至 {{ realtimeDeviceDataTime }}
{{timeRangeOptions.find(option => option.value === timeRange)?.label || ''}}量:
{{ chartData[timeRange][card.value] }}
@@ -34,9 +33,14 @@
年环比 + + {{ getYearlyData[0].growthRate >= 0 ? '↑' : '↓' }} + {{ (getYearlyData[0].growthRate * 100).toFixed(1) }}% +
-
@@ -45,10 +49,15 @@
月环比 + + {{ getMonthlyData[0].growthRate >= 0 ? '↑' : '↓' }} + {{ (getMonthlyData[0].growthRate * 100).toFixed(1) }}% +
- +
@@ -56,9 +65,14 @@
日环比 + + {{ getDailyData[0].growthRate >= 0 ? '↑' : '↓' }} + {{ (getDailyData[0].growthRate * 100).toFixed(1) }}% +
-
@@ -252,7 +266,7 @@ import WaveLineChart from './charts/WaveLineChart.vue' import { MapApi } from "@/api/shorepower/map"; import dayjs from 'dayjs'; import ComparisonBarChart from './charts/ComparisonBarChart.vue' -import { RealtimeDeviceData } from '@/types/shorepower'; +import { ComparativeData, RealtimeDeviceData } from '@/types/shorepower'; import { formatTimestamp, parseRangeToTimestamp } from './utils'; @@ -261,8 +275,11 @@ interface Props { activeHeadGroup?: number; handleGoBack: () => void; realtimeDeviceDataTime: string; + comparativeData: ComparativeData; } + + const props = defineProps() // 定义组件属性 interface ChartDataItem { @@ -346,23 +363,38 @@ const pm25Reduction = ref('0') const noxReduction = ref('0') const so2Reduction = ref('0') -// 年度对比数据 (今年 vs 去年) -const yearlyData = [ - { name: '本期上期对比', currentValue: 1200, previousValue: 1100 }, - // { name: '2025', currentValue: 1300, previousValue: 1250 }, -] - -// 月度对比数据 (今月 vs 上月) -const monthlyData = [ - { name: '本期上期对比', currentValue: 450, previousValue: 420 }, - // { name: '上月', currentValue: 480, previousValue: 460 }, -] - -// 日度对比数据 (今日 vs 昨天) -const dailyData = [ - { name: '本期上期对比', currentValue: 20, previousValue: 18 }, - // { name: '昨日', currentValue: 15, previousValue: 14 }, -] +// const yearlyData = ref({}) + +const getDailyData = computed(() => { + return [{ + name: '本期上期对比', + growthRate: props.comparativeData.day.growthRate, + currentValue: convertPowerUsage(props.comparativeData.day.current.value, selectedCard.value), + previousValue: convertPowerUsage(props.comparativeData.day.previous.value, selectedCard.value), + currentPeriod: props.comparativeData.day.current.period, + previousPeriod: props.comparativeData.day.previous.period, + }] +}) +const getMonthlyData = computed(() => { + return [{ + name: '本期上期对比', + growthRate: props.comparativeData.month.growthRate, + currentValue: convertPowerUsage(props.comparativeData.month.current.value, selectedCard.value), + previousValue: convertPowerUsage(props.comparativeData.month.previous.value, selectedCard.value), + currentPeriod: props.comparativeData.month.current.period, + previousPeriod: props.comparativeData.month.previous.period, + }] +}) +const getYearlyData = computed(() => { + return [{ + name: '本期上期对比', + growthRate: props.comparativeData.year.growthRate, + currentValue: convertPowerUsage(props.comparativeData.year.current.value, selectedCard.value), + previousValue: convertPowerUsage(props.comparativeData.year.previous.value, selectedCard.value), + currentPeriod: props.comparativeData.year.current.period, + previousPeriod: props.comparativeData.year.previous.period, + }] +}) // 根据时间范围计算起始时间 const startTimeDisplay = computed(() => { @@ -617,27 +649,27 @@ const handleSelectDate = async (range: string[] | null) => { historyData.value = { - totalPower: Number(totalDiff.toFixed(2)), - fuel: Number((totalDiff * 0.22 / 1).toFixed(2)), // 转化为千克 - co2: Number((totalDiff * 670 / 1000).toFixed(2)), // 克转化为千克 - pm25: Number((totalDiff * 1.46 / 1000).toFixed(2)), // 克转化为千克 - nox: Number((totalDiff * 18.1 / 1000).toFixed(2)), // 克转化为千克 - so2: Number((totalDiff * 10.5 / 1000).toFixed(2)), // 克转化为千克 + totalPower: convertPowerUsage(totalDiff, 'totalPower'), + fuel: convertPowerUsage(totalDiff, 'fuel'), + co2: convertPowerUsage(totalDiff, 'co2'), + pm25: convertPowerUsage(totalDiff, 'pm25'), + nox: convertPowerUsage(totalDiff, 'nox'), + so2: convertPowerUsage(totalDiff, 'so2'), } const chartData = aggregateByIndex(array); - const fuelChartData = chartData.map(item => ({ name: item.name, value: Number((item.value * 0.22 / 1).toFixed(2)) })) + const fuelChartData = chartData.map(item => ({ name: item.name, value: convertPowerUsage(item.value, 'fuel') })) h_fuelReductionChartData.value = fuelChartData; - const co2ChartData = chartData.map(item => ({ name: item.name, value: Number((item.value * 670 / 1000).toFixed(2)) })) + const co2ChartData = chartData.map(item => ({ name: item.name, value: convertPowerUsage(item.value, 'co2') })) h_co2ReductionChartData.value = co2ChartData; - const pm25ChartData = chartData.map(item => ({ name: item.name, value: Number((item.value * 1.46 / 1000).toFixed(2)) })) + const pm25ChartData = chartData.map(item => ({ name: item.name, value: convertPowerUsage(item.value, 'pm25') })) h_pm25ReductionChartData.value = pm25ChartData; - const noxChartData = chartData.map(item => ({ name: item.name, value: Number((item.value * 18.1 / 1000).toFixed(2)) })) + const noxChartData = chartData.map(item => ({ name: item.name, value: convertPowerUsage(item.value, 'nox') })) h_noxReductionChartData.value = noxChartData; - const so2ChartData = chartData.map(item => ({ name: item.name, value: Number((item.value * 10.5 / 1000).toFixed(2)) })) + const so2ChartData = chartData.map(item => ({ name: item.name, value: convertPowerUsage(item.value, 'so2') })) h_so2ReductionChartData.value = so2ChartData; }; @@ -726,8 +758,31 @@ const handleDateRangeConfirm = () => { // 可以调用API获取选中日期范围内的数据 } +// 通用数据转换函数 +const convertPowerUsage = (powerUsage: number, type: string): number => { + const conversionFactors: Record = { + totalPower: 1, // 直接使用原值 + fuel: 0.22 / 1, // 转化为千克 + co2: 670 / 1000, // 克转化为千克 + pm25: 1.46 / 1000, // 克转化为千克 + nox: 18.1 / 1000, // 克转化为千克 + so2: 10.5 / 1000 // 克转化为千克 + }; + + const factor = conversionFactors[type] || 1; + return Number((powerUsage * factor).toFixed(2)); +}; + // 定义卡片信息 const cards = ref([ + { + id: 'totalPower', + title: '用电量（千瓦时）', + type: 'chart', + unit: 'kWh', + color: '#1890FF', // 绿色 - 代表节能、清洁能源 + value: 'totalPower' + }, { id: 'fuel', title: '减少燃油（吨）', @@ -852,46 +907,46 @@ const handleGetRealTimeAllData = async (realtimeDeviceData: RealtimeDeviceData[] chartData.value.realtime = { - totalPower: Number(realTimeSum.toFixed(2)), - fuel: Number((realTimeSum * 0.22 / 1).toFixed(2)), // 转化为千克 - co2: Number((realTimeSum * 670 / 1000).toFixed(2)), // 克转化为千克 - pm25: Number((realTimeSum * 1.46 / 1000).toFixed(2)), // 克转化为千克 - nox: Number((realTimeSum * 18.1 / 1000).toFixed(2)), // 克转化为千克 - so2: Number((realTimeSum * 10.5 / 1000).toFixed(2)), // 克转化为千克 + totalPower: convertPowerUsage(realTimeSum, 'totalPower'), + fuel: convertPowerUsage(realTimeSum, 'fuel'), + co2: convertPowerUsage(realTimeSum, 'co2'), + pm25: convertPowerUsage(realTimeSum, 'pm25'), + nox: convertPowerUsage(realTimeSum, 'nox'), + so2: convertPowerUsage(realTimeSum, 'so2'), } chartData.value.day = { - totalPower: Number(daySum.toFixed(2)), - fuel: Number((daySum * 0.22 / 1).toFixed(2)), // 转化为千克 - co2: Number((daySum * 670 / 1000).toFixed(2)), // 克转化为千克 - pm25: Number((daySum * 1.46 / 1000).toFixed(2)), // 克转化为千克 - nox: Number((daySum * 18.1 / 1000).toFixed(2)), // 克转化为千克 - so2: Number((daySum * 10.5 / 1000).toFixed(2)), // 克转化为千克 + totalPower: convertPowerUsage(daySum, 'totalPower'), + fuel: convertPowerUsage(daySum, 'fuel'), + co2: convertPowerUsage(daySum, 'co2'), + pm25: convertPowerUsage(daySum, 'pm25'), + nox: convertPowerUsage(daySum, 'nox'), + so2: convertPowerUsage(daySum, 'so2'), } chartData.value.week = { - totalPower: Number(weekSum.toFixed(2)), - fuel: Number((weekSum * 0.22 / 1).toFixed(2)), // 转化为吨 - co2: Number((weekSum * 670 / 1000).toFixed(2)), // 克转化为千克 - pm25: Number((weekSum * 1.46 / 1000).toFixed(2)), // 克转化为千克 - nox: Number((weekSum * 18.1 / 1000).toFixed(2)), // 克转化为千克 - so2: Number((weekSum * 10.5 / 1000).toFixed(2)), // 克转化为千克 + totalPower: convertPowerUsage(weekSum, 'totalPower'), + fuel: convertPowerUsage(weekSum, 'fuel'), + co2: convertPowerUsage(weekSum, 'co2'), + pm25: convertPowerUsage(weekSum, 'pm25'), + nox: convertPowerUsage(weekSum, 'nox'), + so2: convertPowerUsage(weekSum, 'so2'), } chartData.value.month = { - totalPower: Number(monthSum.toFixed(2)), - fuel: Number((monthSum * 0.22 / 1).toFixed(2)), // 转化为吨 - co2: Number((monthSum * 670 / 1000).toFixed(2)), // 克转化为千克 - pm25: Number((monthSum * 1.46 / 1000).toFixed(2)), // 克转化为千克 - nox: Number((monthSum * 18.1 / 1000).toFixed(2)), // 克转化为千克 - so2: Number((monthSum * 10.5 / 1000).toFixed(2)), // 克转化为千克 + totalPower: convertPowerUsage(monthSum, 'totalPower'), + fuel: convertPowerUsage(monthSum, 'fuel'), + co2: convertPowerUsage(monthSum, 'co2'), + pm25: convertPowerUsage(monthSum, 'pm25'), + nox: convertPowerUsage(monthSum, 'nox'), + so2: convertPowerUsage(monthSum, 'so2'), } chartData.value.year = { - totalPower: Number(yearSum.toFixed(2)), - fuel: Number((yearSum * 0.22 / 1).toFixed(2)), // 转化为千克 - co2: Number((yearSum * 670 / 1000).toFixed(2)), // 克转化为千克 - pm25: Number((yearSum * 1.46 / 1000).toFixed(2)), // 克转化为千克 - nox: Number((yearSum * 18.1 / 1000).toFixed(2)), // 克转化为千克 - so2: Number((yearSum * 10.5 / 1000).toFixed(2)), // 克转化为千克 + totalPower: convertPowerUsage(yearSum, 'totalPower'), + fuel: convertPowerUsage(yearSum, 'fuel'), + co2: convertPowerUsage(yearSum, 'co2'), + pm25: convertPowerUsage(yearSum, 'pm25'), + nox: convertPowerUsage(yearSum, 'nox'), + so2: convertPowerUsage(yearSum, 'so2'), } @@ -900,12 +955,12 @@ const handleGetRealTimeAllData = async (realtimeDeviceData: RealtimeDeviceData[] const timestamp = now.toLocaleTimeString() // 计算各指标值（转换为合适的单位）并保留两位小数 - const totalPowerValue = Number(incrementRealTimeSum.toFixed(2)) - const co2Value = Number((incrementRealTimeSum * 670 / 1000).toFixed(2)) // 克转化为千克 - const so2Value = Number((incrementRealTimeSum * 10.5 / 1000).toFixed(2)) // 克转化为千克 - const noxValue = Number((incrementRealTimeSum * 18.1 / 1000).toFixed(2)) // 克转化为千克 - const pm25Value = Number((incrementRealTimeSum * 1.46 / 1000).toFixed(2)) // 克转化为千克 - const fuelValue = Number((incrementRealTimeSum * 0.22 / 1).toFixed(2)) // 转化为千克 + const totalPowerValue = convertPowerUsage(incrementRealTimeSum, 'totalPower') + const co2Value = convertPowerUsage(incrementRealTimeSum, 'co2') + const so2Value = convertPowerUsage(incrementRealTimeSum, 'so2') + const noxValue = convertPowerUsage(incrementRealTimeSum, 'nox') + const pm25Value = convertPowerUsage(incrementRealTimeSum, 'pm25') + const fuelValue = convertPowerUsage(incrementRealTimeSum, 'fuel') // 添加到各图表数据数组 totalPowerChartData.value.push({ name: timestamp, value: totalPowerValue }) @@ -1022,7 +1077,7 @@ onBeforeUnmount(() => { .big { height: 100%; - width: calc(100% - 500px); + width: calc(55%); .card { height: 100%; @@ -1038,7 +1093,7 @@ onBeforeUnmount(() => { } .right-row { - width: 500px; + width: calc(45% - 8px); height: 100%; display: flex; flex-direction: column; @@ -1097,13 +1152,33 @@ onBeforeUnmount(() => { } .time-range-item { - font-size: 16px; + font-size: 24px; font-weight: 600; font-weight: bold; color: rgba(255, 255, 255, 0.7); } +.growth-rate { + flex: 1; + text-align: right; + margin-left: 10px; + font-weight: bold; + padding: 2px 8px; + border-radius: 4px; + font-size: 32px; +} + +.growth-up { + color: #52C41A; +} + +.growth-down { + color: #F5222D; +} +.growth-icon { + margin-right: 4px; +} .right { /* gap: 0 */ diff --git a/public/map/components/ShowData.vue b/public/map/components/ShowData.vue index 8523731..ae4c783 100644 --- a/public/map/components/ShowData.vue +++ b/public/map/components/ShowData.vue @@ -1,7 +1,8 @@