zS/go-viee-fetch-Demo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat【能源场景】: 统一尺寸并添加背景组件

Browse Source
This commit is contained in:
Free-sss 2025-09-05 14:27:29 +08:00
parent 10128c3498
commit f423901fae
12 changed files with 188 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
src/packages/components/Charts/IntegratedEnergy/AirSupplySystem/config.ts
View File

@ -4,11 +4,28 @@ import { CreateComponentType } from '@/packages/index.d'
import cloneDeep from 'lodash/cloneDeep'
import dataJson from './data.json'
import * as echarts from 'echarts'
import { chartInitConfig } from '@/settings/designSetting'
export const includes = []
const otherOption = {
sceneCode: '',
unit: dataJson.unit,
titleText: '供风系统',
selectOptionMode: 4, // 0 无 1 平行按钮 2 下拉菜单 3 容器右上角按钮 4 下拉菜单和 容器右上角
selectOptions: {
selectedValue: 'electricsupply',
dataset: [
{ label: '空压机站1', value: 'electricsupply' },
{ label: '空压机站2', value: 'watersupply' },
{ label: '数据数据', value: 'gassupply' }
]
},
inSelectOptions: {
selectedValue: 'kyjxx',
dataset: [
{ label: '空压机XX', value: 'kyjxx' },
{ label: '供风总量', value: 'airsupplySum' },
]
}
}
export const option = {
...otherOption,
@ -182,4 +199,5 @@ export default class Config extends PublicConfigClass implements CreateComponent
public chartConfig = cloneDeep(AirSupplySystemConfig)
// 图表配置项
public option = echartOptionProfixHandle(option, includes)
public attr = { ...chartInitConfig, x: 0, y: 0, w: 450, h: 320, zIndex: 1 }
}

39
src/packages/components/Charts/IntegratedEnergy/AirSupplySystem/index.vue
View File

@ -1,12 +1,16 @@
<template>
<div class="go-energy-box">
<div class="content">
<v-chart ref="vChartRef" :init-options="initOptions" :theme="themeColor" :option="option" :update-options="{
replaceMerge: replaceMergeArr
}" autoresize>
</v-chart>
<Background :title-text="titleText" :select-option-mode="selectOptionMode" :select-options="selectOptions"
:in-select-options="inSelectOptions" @mode1-2-select="handleHeaderSelectChange" @mode3-select="handleInSelect">
<div class="go-energy-box">
<div class="content">
<v-chart ref="vChartRef" :init-options="initOptions" :theme="themeColor" :option="option" :update-options="{
replaceMerge: replaceMergeArr
}" autoresize>
</v-chart>
</div>
</div>
</div>
</Background>
</template>
@ -23,6 +27,7 @@ import config, { includes } from './config'
import { mergeTheme } from '@/packages/public/chart'
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
import { useChartDataFetch } from '@/hooks'
import Background from '../Background/index.vue'
const props = defineProps({
themeSetting: {
type: Object,
@ -39,6 +44,7 @@ const props = defineProps({
})
const initOptions = useCanvasInitOptions(props.chartConfig.option, props.themeSetting)
use([
CanvasRenderer,
BarChart,
@ -55,6 +61,18 @@ const option = computed(() => {
return mergeTheme(props.chartConfig.option, props.themeSetting, includes)
})
const titleText = computed(() => {
return props.chartConfig.option.titleText;
});
const selectOptionMode = computed(() => {
return props.chartConfig.option.selectOptionMode;
});
const selectOptions = computed(() => {
return props.chartConfig.option.selectOptions;
});
const inSelectOptions = computed(() => {
return props.chartConfig.option.inSelectOptions;
});
watch(
() => props.chartConfig.option.dataset,
(newData: any) => {
@ -68,6 +86,13 @@ watch(
const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
props.chartConfig.option.dataset = newData
})
const handleHeaderSelectChange = (value: string) => {
console.log('模式1/2选中值：', value);
}
const handleInSelect = (value: string) => {
console.log('模式3选中值：', value);
}
onMounted(async () => {
// 更新显示单位

15
src/packages/components/Charts/IntegratedEnergy/EnergyConsumptionTrend/config.ts
View File

@ -4,14 +4,22 @@ import { CreateComponentType } from '@/packages/index.d'
import cloneDeep from 'lodash/cloneDeep'
import dataJson from './data.json'
import * as echarts from 'echarts'
import { chartInitConfig } from '@/settings/designSetting'
export const includes = []
const otherOption = {
sceneCode: '',
titleText:'能源趋势',
titleText: '能耗趋势',
unit: dataJson.unit,
selectOptionMode: 1, // 0 无 1 平行按钮 2 下拉菜单 3 容器右上角按钮 4 下拉菜单和 容器右上角
selectOptions: {
selectedValue: 'electricsupply',
dataset: [
{ label: '电力', value: 'electricsupply' },
{ label: '供水', value: 'watersupply' },
{ label: '燃气', value: 'gassupply' }
]
}
}
const option = {
...otherOption,
dataset: dataJson,
@ -187,6 +195,7 @@ const option = {
export default class Config extends PublicConfigClass implements CreateComponentType {
public key: string = EnergyConsumptionTrendConfig.key
public chartConfig = cloneDeep(EnergyConsumptionTrendConfig)
public attr = { ...chartInitConfig, x: 0, y: 0, w: 450, h: 320, zIndex: 1 }
// 图表配置项
public option = echartOptionProfixHandle(option, includes)
}

36
src/packages/components/Charts/IntegratedEnergy/EnergyConsumptionTrend/index.vue
View File

@ -1,12 +1,16 @@
<template>
<div class="go-energy-box">
<div class="content">
<v-chart ref="vChartRef" :init-options="initOptions" :theme="themeColor" :option="option" :update-options="{
replaceMerge: replaceMergeArr
}" autoresize>
</v-chart>
<Background :title-text="titleText" :select-option-mode="selectOptionMode" :select-options="selectOptions"
:in-select-options="inSelectOptions" @mode1-2-select="handleHeaderSelectChange">
<div class="go-energy-box">
<div class="content">
<v-chart ref="vChartRef" :init-options="initOptions" :theme="themeColor" :option="option" :update-options="{
replaceMerge: replaceMergeArr
}" autoresize>
</v-chart>
</div>
</div>
</div>
</Background>
</template>
@ -23,6 +27,7 @@ import config, { includes } from './config'
import { mergeTheme } from '@/packages/public/chart'
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
import { useChartDataFetch } from '@/hooks'
import Background from '../Background/index.vue'
const props = defineProps({
themeSetting: {
type: Object,
@ -39,6 +44,7 @@ const props = defineProps({
})
const initOptions = useCanvasInitOptions(props.chartConfig.option, props.themeSetting)
use([
CanvasRenderer,
BarChart,
@ -50,12 +56,23 @@ const replaceMergeArr = ref<string[]>([])
const updataUnit = () => {
option.value.title.text = '单位：' + option.value.unit;
}
const option = computed(() => {
return mergeTheme(props.chartConfig.option, props.themeSetting, includes)
})
const titleText = computed(() => {
return props.chartConfig.option.titleText;
})
const selectOptionMode = computed(() => {
return props.chartConfig.option.selectOptionMode;
});
const selectOptions = computed(() => {
return props.chartConfig.option.selectOptions;
});
const inSelectOptions = computed(() => {
return props.chartConfig.option.inSelectOptions;
});
watch(
() => props.chartConfig.option.dataset,
(newData: any) => {
@ -69,6 +86,9 @@ watch(
const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
props.chartConfig.option.dataset = newData
})
const handleHeaderSelectChange = (value: string) => {
console.log('模式1/2选中值：', value);
}
onMounted(async () => {
// 更新显示单位

1
src/packages/components/Charts/IntegratedEnergy/EnergyOverview/config.ts
View File

@ -13,6 +13,7 @@ import dataJson from './data.json'
const otherOption = {
sceneCode: '',
titleText: '能源总览',
gridItems: [
{
icon: costIcon,

41
src/packages/components/Charts/IntegratedEnergy/EnergyOverview/index.vue
View File

@ -1,22 +1,27 @@
<template>
<div class="go-energy-box">
<div class="grid-container">
<div v-for="(item, index) in chartConfig.option.gridItems" :key="index" class="grid-item">
<span class="item">
<img class="icon" :src="item.icon" :alt="item.label">
</span>
<div class="item-container item">
<span class="label">{{ item.label }}</span>
<div class="value-container">
<div class="value" :class="item.valueClass">
{{ getDataValue(item.field).toFixed(2) }}
<Background :title-text="chartConfig.option.titleText">
<div class="grid-container">
<div v-for="(item, index) in chartConfig.option.gridItems" :key="index" class="grid-item">
<span class="item">
<img class="icon" :src="item.icon" :alt="item.label">
</span>
<div class="item-container item">
<span class="label">{{ item.label }}</span>
<div class="value-container">
<div class="value" :class="item.valueClass">
{{ getDataValue(item.field).toFixed(2) }}
</div>
<span class="unit">{{ item.unit }}</span>
</div>
<span class="unit">{{ item.unit }}</span>
</div>
</div>
</div>
</div>
</Background>
</div>
</template>
<script lang="ts" setup>
@ -25,7 +30,7 @@ import { CreateComponentType } from '@/packages/index.d'
import { useChartDataFetch } from '@/hooks'
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
// import { option as configOption } from './config'
import Background from '../Background/index.vue'
const props = defineProps({
chartConfig: {
type: Object as PropType<CreateComponentType>,
@ -63,18 +68,24 @@ useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
@include go('energy-box') {
width: 100%;
height: 100%;
// padding-top: 15px;
.grid-container {
height: 100%;
// background-color: #90FFAD;
height: 90%;
width: 100%;
display: grid;
grid-template-columns: repeat(2, 1fr);
// margin-top: 20px;
grid-gap: 10px;
padding: 0 10px;
// box-sizing: content-box;
.grid-item {
// background-color: #043951;
padding: 10px 20px 5px 20px;
// padding: 10px 20px 5px 20px;
padding-left: 20px;
box-sizing: content-box;
font-size: 30px;
display: flex;
align-items: center;

11
src/packages/components/Charts/IntegratedEnergy/GasSystem/config.ts
View File

@ -4,12 +4,22 @@ import { CreateComponentType } from '@/packages/index.d'
import cloneDeep from 'lodash/cloneDeep'
import * as echarts from 'echarts'
import dataJson from './data.json'
import { chartInitConfig } from '@/settings/designSetting'
export const includes = []
const otherOption = {
sceneCode: '',
titleText: '燃气系统',
unit: dataJson.unit,
selectOptionMode: 3,
inSelectOptions: {
selectedValue: 'consumption',
dataset: [
{ label: '消耗量', value: 'consumption' },
{ label: '费用', value: 'cost' },
{ label: '最大流量', value: 'maximumFlow' }
]
}
}
const option = {
@ -152,6 +162,7 @@ const option = {
export default class Config extends PublicConfigClass implements CreateComponentType {
public key: string = GasSystemConfig.key
public chartConfig = cloneDeep(GasSystemConfig)
public attr = { ...chartInitConfig, x: 0, y: 0, w: 450, h: 320, zIndex: 1 }
// 图表配置项
public option = echartOptionProfixHandle(option, includes)
}

34
src/packages/components/Charts/IntegratedEnergy/GasSystem/index.vue
View File

@ -1,12 +1,15 @@
<template>
<div class="go-energy-box">
<div class="content">
<v-chart ref="vChartRef" :init-options="initOptions" :theme="themeColor" :option="option" :update-options="{
replaceMerge: replaceMergeArr
}" autoresize>
</v-chart>
<Background :title-text="titleText" :select-option-mode="selectOptionMode" :in-select-options="inSelectOptions"
@mode3-select="handleInSelect">
<div class="go-energy-box">
<div class="content">
<v-chart ref="vChartRef" :init-options="initOptions" :theme="themeColor" :option="option" :update-options="{
replaceMerge: replaceMergeArr
}" autoresize>
</v-chart>
</div>
</div>
</div>
</Background>
</template>
@ -24,6 +27,8 @@ import { mergeTheme } from '@/packages/public/chart'
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
import { useChartDataFetch } from '@/hooks'
import dataJson from './data.json'
import Background from '../Background/index.vue'
const props = defineProps({
themeSetting: {
type: Object,
@ -48,11 +53,22 @@ use([
])
const replaceMergeArr = ref<string[]>([])
const titleText = computed(() => {
return props.chartConfig.option.titleText;
});
const selectOptionMode = computed(() => {
return props.chartConfig.option.selectOptionMode;
});
const inSelectOptions = computed(() => {
return props.chartConfig.option.inSelectOptions;
});
const option = computed(() => {
return mergeTheme(props.chartConfig.option, props.themeSetting, includes)
})
const handleInSelect = (value: string) => {
console.log('模式3选中值：', value);
}
const updataUnit = () => {
option.value.title.text = '单位：' + option.value.unit;

4
src/packages/components/Charts/IntegratedEnergy/PowerSupplySystem/config.ts
View File

@ -4,10 +4,11 @@ import { CreateComponentType } from '@/packages/index.d'
import cloneDeep from 'lodash/cloneDeep'
import dataJson from './data.json'
import * as echarts from 'echarts'
import { chartInitConfig } from '@/settings/designSetting'
export const includes = []
const otherOption = {
sceneCode: '',
titleText: '供电系统',
unit: dataJson.unit,
}
@ -206,4 +207,5 @@ export default class Config extends PublicConfigClass implements CreateComponent
public chartConfig = cloneDeep(PowerSupplySystemConfig)
// 图表配置项
public option = echartOptionProfixHandle(option, includes)
public attr = { ...chartInitConfig, x: 0, y: 0, w: 450, h: 320, zIndex: 1 }
}

21
src/packages/components/Charts/IntegratedEnergy/PowerSupplySystem/index.vue
View File

@ -1,12 +1,14 @@
<template>
<div class="go-energy-box">
<div class="content">
<v-chart ref="vChartRef" :init-options="initOptions" :theme="themeColor" :option="option" :update-options="{
replaceMerge: replaceMergeArr
}" autoresize>
</v-chart>
<Background :title-text="titleText">
<div class="go-energy-box">
<div class="content">
<v-chart ref="vChartRef" :init-options="initOptions" :theme="themeColor" :option="option" :update-options="{
replaceMerge: replaceMergeArr
}" autoresize>
</v-chart>
</div>
</div>
</div>
</Background>
</template>
@ -23,6 +25,7 @@ import config, { includes } from './config'
import { mergeTheme } from '@/packages/public/chart'
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
import { useChartDataFetch } from '@/hooks'
import Background from '../Background/index.vue'
const props = defineProps({
themeSetting: {
type: Object,
@ -38,7 +41,9 @@ const props = defineProps({
}
})
const initOptions = useCanvasInitOptions(props.chartConfig.option, props.themeSetting)
const titleText = computed(() => {
return props.chartConfig.option.titleText;
})
use([
CanvasRenderer,
BarChart,

6
src/packages/components/Charts/IntegratedEnergy/WaterSupplySystem/config.ts
View File

@ -4,7 +4,7 @@ import { CreateComponentType } from '@/packages/index.d'
import cloneDeep from 'lodash/cloneDeep'
import dataJson from './data.json'
import * as echarts from 'echarts'
import { chartInitConfig } from '@/settings/designSetting'
export const includes = ['title']
const wid = 12;
const w1 = Math.sin(Math.PI / 6) * wid; //4
@ -13,7 +13,8 @@ const snapHeight = wid / 2;
const otherOption = {
wid, w1, w2, snapHeight,
unit: dataJson.unit,
sceneCode:''
sceneCode: '',
titleText: '供水系统'
}
export const option = {
...otherOption,
@ -287,6 +288,7 @@ export function createCubeShapes() {
export default class Config extends PublicConfigClass implements CreateComponentType {
public key: string = WaterSupplySystemConfig.key
public chartConfig = cloneDeep(WaterSupplySystemConfig)
public attr = { ...chartInitConfig, x: 0, y: 0, w: 450, h: 320, zIndex: 1 }
// 图表配置项
public option = echartOptionProfixHandle(option, includes)
}

22
src/packages/components/Charts/IntegratedEnergy/WaterSupplySystem/index.vue
View File

@ -1,12 +1,14 @@
<template>
<div class="go-energy-box">
<div class="content">
<v-chart ref="vChartRef" :init-options="initOptions" :theme="themeColor" :option="option" :update-options="{
replaceMerge: replaceMergeArr
}" autoresize>
</v-chart>
<Background :title-text="titleText">
<div class="go-energy-box">
<div class="content">
<v-chart ref="vChartRef" :init-options="initOptions" :theme="themeColor" :option="option" :update-options="{
replaceMerge: replaceMergeArr
}" autoresize>
</v-chart>
</div>
</div>
</div>
</Background>
</template>
@ -23,6 +25,8 @@ import config, { includes, createCubeShapes, createRenderItemFunction } from './
import { mergeTheme } from '@/packages/public/chart'
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
import { useChartDataFetch } from '@/hooks'
import Background from '../Background/index.vue'
const props = defineProps({
themeSetting: {
type: Object,
@ -39,7 +43,9 @@ const props = defineProps({
})
const { CubeLeft, CubeRight, CubeTop } = createCubeShapes();
const initOptions = useCanvasInitOptions(props.chartConfig.option, props.themeSetting)
const titleText = computed(() => {
return props.chartConfig.option.titleText;
})
use([
CanvasRenderer,
BarChart,