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

style【能源场景】：完善样式导入图标

Browse Source
This commit is contained in:
Free-sss 2025-09-04 19:49:33 +08:00
parent 7041453059
commit 4b02346633
10 changed files with 26 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/packages/components/Charts/IntegratedEnergy/EnergyOverview/assets/cost.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

1
src/packages/components/Charts/IntegratedEnergy/EnergyOverview/assets/cost.svg
View File

@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256" viewBox="0 0 512 512"><path fill="#dbb361" d="M512 80c0 18-14.3 34.6-38.4 48c-29.1 16.1-72.5 27.5-122.3 30.9c-3.7-1.8-7.4-3.5-11.3-5c-39.4-16.5-91.8-25.9-148-25.9c-8.3 0-16.4.2-24.5.6l-1.1-.6C142.3 114.6 128 98 128 80c0-44.2 86-80 192-80s192 35.8 192 80m-351.3 81.1c10.2-.7 20.7-1.1 31.3-1.1c62.2 0 117.4 12.3 152.5 31.4c24.8 13.5 39.5 30.3 39.5 48.6c0 4-.7 7.9-2.1 11.7c-4.6 13.2-17 25.3-35 35.5c-.1.1-.3.1-.4.2c-.3.2-.6.3-.9.5c-35 19.4-90.8 32-153.6 32c-59.6 0-112.9-11.3-148.2-29.1c-1.9-.9-3.7-1.9-5.5-2.9C14.3 274.6 0 258 0 240c0-34.8 53.4-64.5 128-75.4c10.5-1.5 21.4-2.7 32.7-3.5M416 240c0-21.9-10.6-39.9-24.1-53.4c28.3-4.4 54.2-11.4 76.2-20.5c16.3-6.8 31.5-15.2 43.9-25.5V176c0 19.3-16.5 37.1-43.8 50.9c-14.6 7.4-32.4 13.7-52.4 18.5c.1-1.8.2-3.5.2-5.3zm-32 96c0 18-14.3 34.6-38.4 48c-1.8 1-3.6 1.9-5.5 2.9C304.9 404.7 251.6 416 192 416c-62.8 0-118.6-12.6-153.6-32C14.3 370.6 0 354 0 336v-35.4c12.5 10.3 27.6 18.7 43.9 25.5C83.4 342.6 135.8 352 192 352s108.6-9.4 148.1-25.9c7.8-3.2 15.3-6.9 22.4-10.9c6.1-3.4 11.8-7.2 17.2-11.2c1.5-1.1 2.9-2.3 4.3-3.4v9.1zm32 0v-57.9c19-4.2 36.5-9.5 52.1-16c16.3-6.8 31.5-15.2 43.9-25.5V272c0 10.5-5 21-14.9 30.9c-16.3 16.3-45 29.7-81.3 38.4c.1-1.7.2-3.5.2-5.3M192 448c56.2 0 108.6-9.4 148.1-25.9c16.3-6.8 31.5-15.2 43.9-25.5V432c0 44.2-86 80-192 80S0 476.2 0 432v-35.4c12.5 10.3 27.6 18.7 43.9 25.5C83.4 438.6 135.8 448 192 448"/></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.4 KiB

BIN
src/packages/components/Charts/IntegratedEnergy/EnergyOverview/assets/gasSupply.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 13 KiB

1
src/packages/components/Charts/IntegratedEnergy/EnergyOverview/assets/gasSupply.svg
View File

@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256" viewBox="0 0 512 512"><path fill="#dbb361" d="M512 80c0 18-14.3 34.6-38.4 48c-29.1 16.1-72.5 27.5-122.3 30.9c-3.7-1.8-7.4-3.5-11.3-5c-39.4-16.5-91.8-25.9-148-25.9c-8.3 0-16.4.2-24.5.6l-1.1-.6C142.3 114.6 128 98 128 80c0-44.2 86-80 192-80s192 35.8 192 80m-351.3 81.1c10.2-.7 20.7-1.1 31.3-1.1c62.2 0 117.4 12.3 152.5 31.4c24.8 13.5 39.5 30.3 39.5 48.6c0 4-.7 7.9-2.1 11.7c-4.6 13.2-17 25.3-35 35.5c-.1.1-.3.1-.4.2c-.3.2-.6.3-.9.5c-35 19.4-90.8 32-153.6 32c-59.6 0-112.9-11.3-148.2-29.1c-1.9-.9-3.7-1.9-5.5-2.9C14.3 274.6 0 258 0 240c0-34.8 53.4-64.5 128-75.4c10.5-1.5 21.4-2.7 32.7-3.5M416 240c0-21.9-10.6-39.9-24.1-53.4c28.3-4.4 54.2-11.4 76.2-20.5c16.3-6.8 31.5-15.2 43.9-25.5V176c0 19.3-16.5 37.1-43.8 50.9c-14.6 7.4-32.4 13.7-52.4 18.5c.1-1.8.2-3.5.2-5.3zm-32 96c0 18-14.3 34.6-38.4 48c-1.8 1-3.6 1.9-5.5 2.9C304.9 404.7 251.6 416 192 416c-62.8 0-118.6-12.6-153.6-32C14.3 370.6 0 354 0 336v-35.4c12.5 10.3 27.6 18.7 43.9 25.5C83.4 342.6 135.8 352 192 352s108.6-9.4 148.1-25.9c7.8-3.2 15.3-6.9 22.4-10.9c6.1-3.4 11.8-7.2 17.2-11.2c1.5-1.1 2.9-2.3 4.3-3.4v9.1zm32 0v-57.9c19-4.2 36.5-9.5 52.1-16c16.3-6.8 31.5-15.2 43.9-25.5V272c0 10.5-5 21-14.9 30.9c-16.3 16.3-45 29.7-81.3 38.4c.1-1.7.2-3.5.2-5.3M192 448c56.2 0 108.6-9.4 148.1-25.9c16.3-6.8 31.5-15.2 43.9-25.5V432c0 44.2-86 80-192 80S0 476.2 0 432v-35.4c12.5 10.3 27.6 18.7 43.9 25.5C83.4 438.6 135.8 448 192 448"/></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.4 KiB

BIN
src/packages/components/Charts/IntegratedEnergy/EnergyOverview/assets/mainsElectricity.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

1
src/packages/components/Charts/IntegratedEnergy/EnergyOverview/assets/mainsElectricity.svg
View File

@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256" viewBox="0 0 512 512"><path fill="#dbb361" d="M512 80c0 18-14.3 34.6-38.4 48c-29.1 16.1-72.5 27.5-122.3 30.9c-3.7-1.8-7.4-3.5-11.3-5c-39.4-16.5-91.8-25.9-148-25.9c-8.3 0-16.4.2-24.5.6l-1.1-.6C142.3 114.6 128 98 128 80c0-44.2 86-80 192-80s192 35.8 192 80m-351.3 81.1c10.2-.7 20.7-1.1 31.3-1.1c62.2 0 117.4 12.3 152.5 31.4c24.8 13.5 39.5 30.3 39.5 48.6c0 4-.7 7.9-2.1 11.7c-4.6 13.2-17 25.3-35 35.5c-.1.1-.3.1-.4.2c-.3.2-.6.3-.9.5c-35 19.4-90.8 32-153.6 32c-59.6 0-112.9-11.3-148.2-29.1c-1.9-.9-3.7-1.9-5.5-2.9C14.3 274.6 0 258 0 240c0-34.8 53.4-64.5 128-75.4c10.5-1.5 21.4-2.7 32.7-3.5M416 240c0-21.9-10.6-39.9-24.1-53.4c28.3-4.4 54.2-11.4 76.2-20.5c16.3-6.8 31.5-15.2 43.9-25.5V176c0 19.3-16.5 37.1-43.8 50.9c-14.6 7.4-32.4 13.7-52.4 18.5c.1-1.8.2-3.5.2-5.3zm-32 96c0 18-14.3 34.6-38.4 48c-1.8 1-3.6 1.9-5.5 2.9C304.9 404.7 251.6 416 192 416c-62.8 0-118.6-12.6-153.6-32C14.3 370.6 0 354 0 336v-35.4c12.5 10.3 27.6 18.7 43.9 25.5C83.4 342.6 135.8 352 192 352s108.6-9.4 148.1-25.9c7.8-3.2 15.3-6.9 22.4-10.9c6.1-3.4 11.8-7.2 17.2-11.2c1.5-1.1 2.9-2.3 4.3-3.4v9.1zm32 0v-57.9c19-4.2 36.5-9.5 52.1-16c16.3-6.8 31.5-15.2 43.9-25.5V272c0 10.5-5 21-14.9 30.9c-16.3 16.3-45 29.7-81.3 38.4c.1-1.7.2-3.5.2-5.3M192 448c56.2 0 108.6-9.4 148.1-25.9c16.3-6.8 31.5-15.2 43.9-25.5V432c0 44.2-86 80-192 80S0 476.2 0 432v-35.4c12.5 10.3 27.6 18.7 43.9 25.5C83.4 438.6 135.8 448 192 448"/></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.4 KiB

BIN
src/packages/components/Charts/IntegratedEnergy/EnergyOverview/assets/waterSupply.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 13 KiB

1
src/packages/components/Charts/IntegratedEnergy/EnergyOverview/assets/waterSupply.svg
View File

@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256" viewBox="0 0 512 512"><path fill="#dbb361" d="M512 80c0 18-14.3 34.6-38.4 48c-29.1 16.1-72.5 27.5-122.3 30.9c-3.7-1.8-7.4-3.5-11.3-5c-39.4-16.5-91.8-25.9-148-25.9c-8.3 0-16.4.2-24.5.6l-1.1-.6C142.3 114.6 128 98 128 80c0-44.2 86-80 192-80s192 35.8 192 80m-351.3 81.1c10.2-.7 20.7-1.1 31.3-1.1c62.2 0 117.4 12.3 152.5 31.4c24.8 13.5 39.5 30.3 39.5 48.6c0 4-.7 7.9-2.1 11.7c-4.6 13.2-17 25.3-35 35.5c-.1.1-.3.1-.4.2c-.3.2-.6.3-.9.5c-35 19.4-90.8 32-153.6 32c-59.6 0-112.9-11.3-148.2-29.1c-1.9-.9-3.7-1.9-5.5-2.9C14.3 274.6 0 258 0 240c0-34.8 53.4-64.5 128-75.4c10.5-1.5 21.4-2.7 32.7-3.5M416 240c0-21.9-10.6-39.9-24.1-53.4c28.3-4.4 54.2-11.4 76.2-20.5c16.3-6.8 31.5-15.2 43.9-25.5V176c0 19.3-16.5 37.1-43.8 50.9c-14.6 7.4-32.4 13.7-52.4 18.5c.1-1.8.2-3.5.2-5.3zm-32 96c0 18-14.3 34.6-38.4 48c-1.8 1-3.6 1.9-5.5 2.9C304.9 404.7 251.6 416 192 416c-62.8 0-118.6-12.6-153.6-32C14.3 370.6 0 354 0 336v-35.4c12.5 10.3 27.6 18.7 43.9 25.5C83.4 342.6 135.8 352 192 352s108.6-9.4 148.1-25.9c7.8-3.2 15.3-6.9 22.4-10.9c6.1-3.4 11.8-7.2 17.2-11.2c1.5-1.1 2.9-2.3 4.3-3.4v9.1zm32 0v-57.9c19-4.2 36.5-9.5 52.1-16c16.3-6.8 31.5-15.2 43.9-25.5V272c0 10.5-5 21-14.9 30.9c-16.3 16.3-45 29.7-81.3 38.4c.1-1.7.2-3.5.2-5.3M192 448c56.2 0 108.6-9.4 148.1-25.9c16.3-6.8 31.5-15.2 43.9-25.5V432c0 44.2-86 80-192 80S0 476.2 0 432v-35.4c12.5 10.3 27.6 18.7 43.9 25.5C83.4 438.6 135.8 448 192 448"/></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.4 KiB

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

@ -5,7 +5,10 @@ import cloneDeep from 'lodash/cloneDeep'
import { chartInitConfig } from '@/settings/designSetting'
//导入数据
import costIcon from './assets/cost.svg'
import costIcon from './assets/cost.png'
import gasIcon from './assets/gasSupply.png'
import EleIcon from './assets/mainsElectricity.png'
import watIcon from './assets/waterSupply.png'
import dataJson from './data.json'
const otherOption = {
sceneCode: '',
@ -19,21 +22,21 @@ const otherOption = {
valueClass: 'value-cost'
},
{
icon: costIcon,
icon: EleIcon,
label: '市电',
field: 'mainsElectricity',
unit: '单位',
valueClass: 'value-electricity'
},
{
icon: costIcon,
icon: watIcon,
label: '供水',
field: 'waterSupply',
unit: '单位',
valueClass: 'value-water'
},
{
icon: costIcon,
icon: gasIcon,
label: '燃气',
field: 'gasSupply',
unit: '单位',
@ -50,5 +53,5 @@ export default class Config extends PublicConfigClass implements CreateComponent
public key = EnergyOverviewConfig.key
public chartConfig = cloneDeep(EnergyOverviewConfig)
public option = cloneDeep(option)
public attr = { ...chartInitConfig, x: 0, y: 0, w: 889, h: 267, zIndex: 1 }
public attr = { ...chartInitConfig, x: 0, y: 0, w: 900, h: 310, zIndex: 1 }
}

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

@ -1,7 +1,7 @@
<template>
<div class="go-energy-box">
<div class="grid-container">
<div v-for="(item, index) in configOption.gridItems" :key="index" class="grid-item">
<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>
@ -20,11 +20,11 @@
</template>
<script lang="ts" setup>
import { PropType, shallowReactive, watch } from 'vue'
import { PropType, reactive, watch } from 'vue'
import { CreateComponentType } from '@/packages/index.d'
import { useChartDataFetch } from '@/hooks'
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
import { option as configOption } from './config'
// import { option as configOption } from './config'
const props = defineProps({
chartConfig: {
@ -33,8 +33,8 @@ const props = defineProps({
}
})
const option = shallowReactive({
dataset: configOption.dataset
const option = reactive({
dataset: props.chartConfig.option.dataset
})
@ -70,6 +70,7 @@ useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 10px;
padding: 0 10px;
.grid-item {
// background-color: #043951;
@ -83,7 +84,7 @@ useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
.item-container {
display: flex;
flex-direction: column;
margin-left: 20px;
margin-left: 5px;
margin-right: 20px;
width: 100%;
height: auto;
@ -96,9 +97,12 @@ useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
overflow: hidden;
width: 100%;
height: 100%;
margin-bottom: 5px;
.value {
font-size: 35px;
//使用庞门正道标题体
font-size: 30px;
letter-spacing: 3px;
// flex-grow: 1;
// flex-shrink: 0;
@ -122,11 +126,12 @@ useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
.label {
color: #07A1C8;
font-size: 22px;
font-size: 20px;
align-self: flex-start;
// 使用思源黑体
font-family: 'Source Han Sans CN';
// 使用渐变背景色
background: linear-gradient(to right, rgba(255, 255, 255, 0.624) 0%, rgba(255, 255, 255, 1) 100%);
background: linear-gradient(to right, rgba(255, 255, 255, 0.796) 0%, rgba(255, 255, 255, 1) 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
@ -161,8 +166,9 @@ useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
.icon {
width: 60px;
height: 60px;
// background-color: #07A1C8;
width: 100px;
height: 100px;
flex-shrink: 0;
object-fit: contain;
}