|
|
|
@ -3,11 +3,11 @@
|
|
|
|
<div class="panel-title panel-title-between">
|
|
|
|
<div class="panel-title panel-title-between">
|
|
|
|
<div class="panel-title-left">
|
|
|
|
<div class="panel-title-left">
|
|
|
|
<span class="title-dot"></span>
|
|
|
|
<span class="title-dot"></span>
|
|
|
|
<span>能耗监测</span>
|
|
|
|
<span>{{ t('Dashboard1.energyMonitor.title') }}</span>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="tabs">
|
|
|
|
<div class="tabs">
|
|
|
|
<el-select
|
|
|
|
<el-select
|
|
|
|
v-model="selectedEnergyTypeId" placeholder="请选择" style="width: 120px" size="small"
|
|
|
|
v-model="selectedEnergyTypeId" :placeholder="t('Dashboard1.energyMonitor.selectPlaceholder')" style="width: 120px" size="small"
|
|
|
|
@change="getChartData">
|
|
|
|
@change="getChartData">
|
|
|
|
<el-option v-for="item in energyTypes" :key="item.id" :label="item.name" :value="item.id" />
|
|
|
|
<el-option v-for="item in energyTypes" :key="item.id" :label="item.name" :value="item.id" />
|
|
|
|
</el-select>
|
|
|
|
</el-select>
|
|
|
|
@ -20,15 +20,19 @@ v-model="selectedEnergyTypeId" placeholder="请选择" style="width: 120px" size
|
|
|
|
</template>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
|
|
<script setup lang="ts">
|
|
|
|
<script setup lang="ts">
|
|
|
|
import { onMounted, onUnmounted, ref } from 'vue'
|
|
|
|
import { onMounted, onUnmounted, ref, watch } from 'vue'
|
|
|
|
import { useRoute } from 'vue-router'
|
|
|
|
import { useRoute } from 'vue-router'
|
|
|
|
import * as echarts from 'echarts'
|
|
|
|
import * as echarts from 'echarts'
|
|
|
|
import { colors, style } from '../utils'
|
|
|
|
import { colors, style } from '../utils'
|
|
|
|
import { EnergyTypeApi, EnergyTypeVO } from '@/api/mes/energytype'
|
|
|
|
import { EnergyTypeApi, EnergyTypeVO } from '@/api/mes/energytype'
|
|
|
|
import { EnergyDeviceApi } from '@/api/mes/energydevice'
|
|
|
|
import { EnergyDeviceApi } from '@/api/mes/energydevice'
|
|
|
|
|
|
|
|
import { useI18n } from '@/hooks/web/useI18n'
|
|
|
|
|
|
|
|
import { useLocaleStore } from '@/store/modules/locale'
|
|
|
|
|
|
|
|
|
|
|
|
const route = useRoute()
|
|
|
|
const route = useRoute()
|
|
|
|
const orgId = route.query.orgId
|
|
|
|
const orgId = route.query.orgId
|
|
|
|
|
|
|
|
const { t } = useI18n('ReportDashboard')
|
|
|
|
|
|
|
|
const localeStore = useLocaleStore()
|
|
|
|
|
|
|
|
|
|
|
|
const energyTypes = ref<EnergyTypeVO[]>([])
|
|
|
|
const energyTypes = ref<EnergyTypeVO[]>([])
|
|
|
|
const selectedEnergyTypeId = ref<number | undefined>(undefined)
|
|
|
|
const selectedEnergyTypeId = ref<number | undefined>(undefined)
|
|
|
|
@ -62,6 +66,31 @@ const getChartData = async () => {
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const buildOption = (x: string[], y: number[]) => {
|
|
|
|
|
|
|
|
return {
|
|
|
|
|
|
|
|
backgroundColor: 'transparent',
|
|
|
|
|
|
|
|
tooltip: { trigger: 'axis' },
|
|
|
|
|
|
|
|
grid: { top: '18%', left: '6%', right: '4%', bottom: '12%', containLabel: true },
|
|
|
|
|
|
|
|
xAxis: { type: 'category', data: x, axisLine: style.axisLine, axisLabel: { ...style.axisLabel, fontSize: 10, rotate: 40 } },
|
|
|
|
|
|
|
|
yAxis: { type: 'value', axisLine: { show: false }, axisLabel: { ...style.axisLabel, fontSize: 10 }, splitLine: style.splitLine },
|
|
|
|
|
|
|
|
series: [
|
|
|
|
|
|
|
|
{
|
|
|
|
|
|
|
|
name: t('Dashboard1.energyMonitor.seriesEnergy'),
|
|
|
|
|
|
|
|
type: 'bar',
|
|
|
|
|
|
|
|
barWidth: 12,
|
|
|
|
|
|
|
|
itemStyle: {
|
|
|
|
|
|
|
|
borderRadius: [6, 6, 0, 0],
|
|
|
|
|
|
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
|
|
|
|
|
|
{ offset: 0, color: colors.blue },
|
|
|
|
|
|
|
|
{ offset: 1, color: 'rgba(30,144,255,0.10)' }
|
|
|
|
|
|
|
|
])
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
data: y
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
]
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
const render = (data: any = []) => {
|
|
|
|
const render = (data: any = []) => {
|
|
|
|
if (!chart) return
|
|
|
|
if (!chart) return
|
|
|
|
|
|
|
|
|
|
|
|
@ -89,27 +118,7 @@ const render = (data: any = []) => {
|
|
|
|
y = []
|
|
|
|
y = []
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
chart.setOption({
|
|
|
|
chart.setOption(buildOption(x, y))
|
|
|
|
backgroundColor: 'transparent',
|
|
|
|
|
|
|
|
tooltip: { trigger: 'axis' },
|
|
|
|
|
|
|
|
grid: { top: '18%', left: '6%', right: '4%', bottom: '12%', containLabel: true },
|
|
|
|
|
|
|
|
xAxis: { type: 'category', data: x, axisLine: style.axisLine, axisLabel: { ...style.axisLabel, fontSize: 10, rotate: 40 } },
|
|
|
|
|
|
|
|
yAxis: { type: 'value', axisLine: { show: false }, axisLabel: { ...style.axisLabel, fontSize: 10 }, splitLine: style.splitLine },
|
|
|
|
|
|
|
|
series: [
|
|
|
|
|
|
|
|
{
|
|
|
|
|
|
|
|
type: 'bar',
|
|
|
|
|
|
|
|
barWidth: 12,
|
|
|
|
|
|
|
|
itemStyle: {
|
|
|
|
|
|
|
|
borderRadius: [6, 6, 0, 0],
|
|
|
|
|
|
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
|
|
|
|
|
|
{ offset: 0, color: colors.blue },
|
|
|
|
|
|
|
|
{ offset: 1, color: 'rgba(30,144,255,0.10)' }
|
|
|
|
|
|
|
|
])
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
data: y
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
]
|
|
|
|
|
|
|
|
})
|
|
|
|
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
const resize = () => {
|
|
|
|
const resize = () => {
|
|
|
|
@ -119,13 +128,19 @@ const resize = () => {
|
|
|
|
onMounted(() => {
|
|
|
|
onMounted(() => {
|
|
|
|
if (!chartRef.value) return
|
|
|
|
if (!chartRef.value) return
|
|
|
|
chart = echarts.init(chartRef.value, 'dark', { renderer: 'canvas' })
|
|
|
|
chart = echarts.init(chartRef.value, 'dark', { renderer: 'canvas' })
|
|
|
|
// 先初始化一个空图表
|
|
|
|
chart.setOption(buildOption([], []))
|
|
|
|
render([])
|
|
|
|
|
|
|
|
// 获取下拉选项并加载数据
|
|
|
|
// 获取下拉选项并加载数据
|
|
|
|
getEnergyTypes()
|
|
|
|
getEnergyTypes()
|
|
|
|
window.addEventListener('resize', resize)
|
|
|
|
window.addEventListener('resize', resize)
|
|
|
|
})
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
watch(
|
|
|
|
|
|
|
|
() => localeStore.getCurrentLocale.lang,
|
|
|
|
|
|
|
|
() => {
|
|
|
|
|
|
|
|
getChartData()
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
)
|
|
|
|
|
|
|
|
|
|
|
|
onUnmounted(() => {
|
|
|
|
onUnmounted(() => {
|
|
|
|
window.removeEventListener('resize', resize)
|
|
|
|
window.removeEventListener('resize', resize)
|
|
|
|
chart?.dispose()
|
|
|
|
chart?.dispose()
|
|
|
|
|
