linweidong
/
besure_web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

能耗概览的中英文切换

Browse Source
mvm
liutao 6 days ago
parent 3745ef5bbc
commit 9b82f41b37
3 changed files with 120 additions and 36 deletions
Show Stats Download Patch File Download Diff File

34
src/locales/en.ts
Unescape Escape View File

@ -4722,5 +4722,39 @@ export default {
warningNoPlanData: 'No plan data to save',
saveSuccess: 'Schedule saved successfully'
}
},
EnergyOverview: {
filters: {
org: 'Region',
orgPlaceholder: 'Please select region',
energyType: 'Energy Type',
energyTypePlaceholder: 'Please select energy type',
timeRange: 'Time Range'
},
panels: {
trend: 'Energy Usage Trend',
region: 'Regional Energy Share',
top5: 'Top 5 Energy Consumers',
detail: 'Energy Details'
},
table: {
rank: 'Rank',
name: 'Name',
region: 'Region',
usage: 'Usage',
meterName: 'Meter Name',
energyType: 'Energy Type',
energyUsage: 'Energy Usage',
startTime: 'Start Time',
endTime: 'End Time'
},
chart: {
usage: 'Usage',
time: 'Time',
regionEnergy: 'Regional Energy',
totalUsage: 'Total Usage'
},
empty: 'Please configure energy types first',
exportSuccess: 'Export started'
}
}

34
src/locales/zh-CN.ts
Unescape Escape View File

@ -4933,5 +4933,39 @@ export default {
warningNoPlanData: '暂无可保存的计划数据',
saveSuccess: '排产计划保存成功'
}
},
EnergyOverview: {
filters: {
org: '所属区域',
orgPlaceholder: '请选择所属区域',
energyType: '能源类型',
energyTypePlaceholder: '请选择能源类型',
timeRange: '时间范围'
},
panels: {
trend: '能源用量趋势',
region: '区域能耗占比',
top5: '能耗排行 TOP5',
detail: '能源明细表'
},
table: {
rank: '排名',
name: '名称',
region: '所属区域',
usage: '用量',
meterName: '表名称',
energyType: '能源类型',
energyUsage: '能源用量',
startTime: '开始时间',
endTime: '结束时间'
},
chart: {
usage: '用量',
time: '时间',
regionEnergy: '区域能耗',
totalUsage: '总用量'
},
empty: '请先配置能源类型',
exportSuccess: '导出已发起'
}
}

88
src/views/mes/energyOverview/index.vue
Unescape Escape View File

@ -8,35 +8,35 @@
:inline="true"
label-width="auto"
>
<el-form-item label="所属区域" prop="orgId">
<el-form-item :label="t('EnergyOverview.filters.org')" prop="orgId">
<el-select
v-model="queryParams.orgId"
clearable
filterable
placeholder="请选择所属区域"
:placeholder="t('EnergyOverview.filters.orgPlaceholder')"
class="!w-220px"
>
<el-option v-for="item in orgOptions" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</el-form-item>
<el-form-item label="能源类型" prop="energyTypeId">
<el-form-item :label="t('EnergyOverview.filters.energyType')" prop="energyTypeId">
<el-select
v-model="queryParams.energyTypeId"
:disabled="!hasEnergyTypes"
placeholder="请选择能源类型"
:placeholder="t('EnergyOverview.filters.energyTypePlaceholder')"
class="!w-220px"
>
<el-option v-for="item in energyTypeOptions" :key="item.id" :label="item.name" :value="item.id" />
</el-select>
</el-form-item>
<el-form-item label="时间范围" prop="timeRange">
<el-form-item :label="t('EnergyOverview.filters.timeRange')" prop="timeRange">
<el-date-picker
v-model="queryParams.timeRange"
type="datetimerange"
value-format="YYYY-MM-DD HH:mm:ss"
format="YYYY-MM-DD HH:mm:ss"
start-placeholder="开始时间"
end-placeholder="结束时间"
:start-placeholder="t('common.startTimeText')"
:end-placeholder="t('common.endTimeText')"
range-separator="~"
:default-time="[new Date('2000-01-01 00:00:00'), new Date('2000-01-01 23:59:59')]"
class="!w-420px"
@ -45,15 +45,15 @@
<el-form-item>
<el-button type="primary" @click="handleQuery">
<Icon icon="ep:search" class="mr-5px" />
查询
{{ t('common.query') }}
</el-button>
<el-button @click="resetQuery">
<Icon icon="ep:refresh" class="mr-5px" />
重置
{{ t('common.reset') }}
</el-button>
<el-button type="success" plain @click="handleExport">
<Icon icon="ep:download" class="mr-5px" />
导出
{{ t('action.export') }}
</el-button>
</el-form-item>
</el-form>
@ -88,7 +88,7 @@
<ContentWrap class="overview-panel">
<div class="panel-header">
<div class="panel-title">
能源用量趋势
{{ t('EnergyOverview.panels.trend') }}
<Icon icon="ep:info-filled" class="panel-info" />
</div>
</div>
@ -99,7 +99,7 @@
<ContentWrap class="overview-panel">
<div class="panel-header">
<div class="panel-title">
区域能耗占比
{{ t('EnergyOverview.panels.region') }}
<Icon icon="ep:info-filled" class="panel-info" />
</div>
</div>
@ -113,19 +113,24 @@
<ContentWrap class="overview-panel">
<div class="panel-header">
<div class="panel-title">
能耗排行 TOP5
{{ t('EnergyOverview.panels.top5') }}
<Icon icon="ep:info-filled" class="panel-info" />
</div>
</div>
<el-table :data="rankList" :stripe="true" :show-overflow-tooltip="true">
<el-table-column label="排名" align="center" width="70">
<el-table-column :label="t('EnergyOverview.table.rank')" align="center" width="70">
<template #default="scope">
<span class="rank-index" :class="`rank-${scope.$index + 1}`">{{ scope.$index + 1 }}</span>
</template>
</el-table-column>
<el-table-column label="名称" prop="name" min-width="150" />
<el-table-column label="所属区域" prop="region" width="110" />
<el-table-column :label="`用量 (${selectedEnergyUnit})`" prop="value" align="right" width="120" />
<el-table-column :label="t('EnergyOverview.table.name')" prop="name" min-width="150" />
<el-table-column :label="t('EnergyOverview.table.region')" prop="region" width="110" />
<el-table-column
:label="`${t('EnergyOverview.table.usage')} (${selectedEnergyUnit})`"
prop="value"
align="right"
width="120"
/>
</el-table>
</ContentWrap>
</el-col>
@ -133,17 +138,22 @@
<ContentWrap class="overview-panel">
<div class="panel-header">
<div class="panel-title">
能源明细表
{{ t('EnergyOverview.panels.detail') }}
<Icon icon="ep:info-filled" class="panel-info" />
</div>
</div>
<el-table v-loading="loading" :data="pageDetailList" :stripe="true" :show-overflow-tooltip="true">
<el-table-column label="表名称" prop="name" min-width="170" />
<el-table-column label="能源类型" prop="energyType" align="center" width="100" />
<el-table-column label="所属区域" prop="region" align="center" width="120" />
<el-table-column :label="`能源用量 (${selectedEnergyUnit})`" prop="value" align="right" width="150" />
<el-table-column label="开始时间" prop="startTime" align="center" width="180" />
<el-table-column label="结束时间" prop="endTime" align="center" width="180" />
<el-table-column :label="t('EnergyOverview.table.meterName')" prop="name" min-width="170" />
<el-table-column :label="t('EnergyOverview.table.energyType')" prop="energyType" align="center" width="100" />
<el-table-column :label="t('EnergyOverview.table.region')" prop="region" align="center" width="120" />
<el-table-column
:label="`${t('EnergyOverview.table.energyUsage')} (${selectedEnergyUnit})`"
prop="value"
align="right"
width="150"
/>
<el-table-column :label="t('EnergyOverview.table.startTime')" prop="startTime" align="center" width="180" />
<el-table-column :label="t('EnergyOverview.table.endTime')" prop="endTime" align="center" width="180" />
</el-table>
<Pagination
:total="total"
@ -157,7 +167,7 @@
</template>
<ContentWrap v-else class="empty-panel">
<el-empty description="请先配置能源类型" :image-size="120" />
<el-empty :description="t('EnergyOverview.empty')" :image-size="120" />
</ContentWrap>
</div>
</template>
@ -173,7 +183,7 @@ import {
EnergyOverviewRankVO,
EnergyOverviewRespVO
} from '@/api/mes/energydevice'
import {OrganizationApi, OrganizationVO} from "@/api/mes/organization";
import { OrganizationApi, OrganizationVO } from '@/api/mes/organization'
defineOptions({ name: 'EnergyOverview' })
@ -192,6 +202,7 @@ interface MetricCard {
type DetailRow = EnergyOverviewDetailVO
const { t } = useI18n()
const message = useMessage()
const defaultTimeRange = ['2026-05-04 00:00:00', '2026-05-05 23:59:59']
@ -230,12 +241,12 @@ const trendChartOptions = reactive<EChartsOption>({
trigger: 'axis',
formatter: (params: any) => {
const item = params?.[0]
return `${item?.axisValue || ''}<br />用量：${item?.data || 0} ${selectedEnergyUnit.value}`
return `${item?.axisValue || ''}<br />${t('EnergyOverview.chart.usage')}：${item?.data || 0} ${selectedEnergyUnit.value}`
}
},
legend: {
top: 4,
data: ['用量']
data: [t('EnergyOverview.chart.usage')]
},
grid: {
left: 24,
@ -247,7 +258,7 @@ const trendChartOptions = reactive<EChartsOption>({
xAxis: {
type: 'category',
boundaryGap: false,
name: '时间',
name: t('EnergyOverview.chart.time'),
nameLocation: 'middle',
nameGap: 28,
data: trendXAxis.value,
@ -263,7 +274,7 @@ const trendChartOptions = reactive<EChartsOption>({
},
series: [
{
name: '用量',
name: t('EnergyOverview.chart.usage'),
type: 'line',
smooth: true,
symbol: 'circle',
@ -308,7 +319,7 @@ const regionPieOptions = reactive<EChartsOption>({
},
series: [
{
name: '区域能耗',
name: t('EnergyOverview.chart.regionEnergy'),
type: 'pie',
radius: ['58%', '76%'],
center: ['34%', '50%'],
@ -316,7 +327,7 @@ const regionPieOptions = reactive<EChartsOption>({
label: {
show: true,
position: 'center',
formatter: `总用量\n{total|${regionTotal.value} ${selectedEnergyUnit.value}}`,
formatter: `${t('EnergyOverview.chart.totalUsage')}\n{total|${regionTotal.value} ${selectedEnergyUnit.value}}`,
color: '#303133',
rich: {
total: {
@ -368,20 +379,26 @@ const updateCharts = (data: EnergyOverviewRespVO) => {
trendChartOptions.xAxis = {
...(trendChartOptions.xAxis as any),
data: trendXAxis.value
data: trendXAxis.value,
name: t('EnergyOverview.chart.time')
}
trendChartOptions.yAxis = {
...(trendChartOptions.yAxis as any),
name: selectedEnergyUnit.value
}
if (Array.isArray(trendChartOptions.legend?.data)) {
trendChartOptions.legend.data = [t('EnergyOverview.chart.usage')]
}
if (Array.isArray(trendChartOptions.series) && trendChartOptions.series[0]) {
;(trendChartOptions.series[0] as any).name = t('EnergyOverview.chart.usage')
;(trendChartOptions.series[0] as any).data = trendSeries.value
}
if (Array.isArray(regionPieOptions.series) && regionPieOptions.series[0]) {
;(regionPieOptions.series[0] as any).name = t('EnergyOverview.chart.regionEnergy')
;(regionPieOptions.series[0] as any).data = regionItems.value
;(regionPieOptions.series[0] as any).label = {
...(regionPieOptions.series[0] as any).label,
formatter: `总用量\n{total|${regionTotal.value} ${selectedEnergyUnit.value}}`
formatter: `${t('EnergyOverview.chart.totalUsage')}\n{total|${regionTotal.value} ${selectedEnergyUnit.value}}`
}
}
}
@ -463,7 +480,7 @@ const handleExport = async () => {
startTime: timeRange[0],
endTime: timeRange[1]
})
message.success('导出已发起')
message.success(t('EnergyOverview.exportSuccess'))
}
const loadOrgOptions = async () => {
@ -475,7 +492,6 @@ const loadOrgOptions = async () => {
.map((r) => ({ label: r.name, value: r.id, raw: r }))
}
onMounted(async () => {
await loadOrgOptions()
await getEnergyTypes()

Write Preview
Loading…
Cancel
Save