style：修改（费用总览）样式匹配要求
This commit is contained in:
parent
f257aad52e
commit
c11e5ded59
@ -3,9 +3,44 @@ import { CreateComponentType } from '@/packages/index.d'
|
||||
import { EnergyOverviewConfig } from './index'
|
||||
import cloneDeep from 'lodash/cloneDeep'
|
||||
import { chartInitConfig } from '@/settings/designSetting'
|
||||
|
||||
//导入数据
|
||||
import costIcon from './assets/cost.svg'
|
||||
import dataJson from './data.json'
|
||||
const otherOption = {
|
||||
gridItems: [
|
||||
{
|
||||
icon: costIcon,
|
||||
label: '费用',
|
||||
field: 'cost',
|
||||
unit: '单位',
|
||||
valueClass: 'value-cost'
|
||||
},
|
||||
{
|
||||
icon: costIcon,
|
||||
label: '市电',
|
||||
field: 'mainsElectricity',
|
||||
unit: '单位',
|
||||
valueClass: 'value-electricity'
|
||||
},
|
||||
{
|
||||
icon: costIcon,
|
||||
label: '供水',
|
||||
field: 'waterSupply',
|
||||
unit: '单位',
|
||||
valueClass: 'value-water'
|
||||
},
|
||||
{
|
||||
icon: costIcon,
|
||||
label: '燃气',
|
||||
field: 'gasSupply',
|
||||
unit: '单位',
|
||||
valueClass: 'value-gas'
|
||||
}
|
||||
]
|
||||
}
|
||||
export const option = {
|
||||
...otherOption,
|
||||
dataset: dataJson
|
||||
}
|
||||
|
||||
@ -13,5 +48,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: 1000, h: 240, zIndex: 1 }
|
||||
public attr = { ...chartInitConfig, x: 0, y: 0, w: 889, h: 267, zIndex: 1 }
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"cost":1000,
|
||||
"mainsElectricity":1000,
|
||||
"waterSupply":1000,
|
||||
"gasSupply":1000
|
||||
"cost": 1000,
|
||||
"mainsElectricity": 1000,
|
||||
"waterSupply": 1000,
|
||||
"gasSupply": 1000
|
||||
}
|
||||
@ -1,59 +1,48 @@
|
||||
<template>
|
||||
<div class="go-energy-box">
|
||||
<div class="grid-container">
|
||||
<div class="grid-item">
|
||||
<div v-for="(item, index) in configOption.gridItems" :key="index" class="grid-item">
|
||||
<span class="item">
|
||||
<img class="icon " src="./assets/cost.svg" alt="">
|
||||
<img class="icon" :src="item.icon" :alt="item.label">
|
||||
</span>
|
||||
<span class="label item">费用</span>
|
||||
<span class="value item">{{ option.dataset.cost.toFixed(2) }}</span>
|
||||
<span class="unit item">单位</span>
|
||||
</div>
|
||||
|
||||
<div class="grid-item">
|
||||
<span class="item">
|
||||
<img class="icon " src="./assets/cost.svg" alt="">
|
||||
</span>
|
||||
<span class="label item">市电</span>
|
||||
<span class="value item">{{ option.dataset.mainsElectricity.toFixed(2) }}</span>
|
||||
<span class="unit item">单位</span>
|
||||
</div>
|
||||
<div class="grid-item">
|
||||
<span class="item">
|
||||
<img class="icon " src="./assets/cost.svg" alt="">
|
||||
</span>
|
||||
<span class="label item">供水</span>
|
||||
<span class="value item">{{ option.dataset.waterSupply.toFixed(2) }}</span>
|
||||
<span class="unit item">单位</span>
|
||||
</div>
|
||||
<div class="grid-item">
|
||||
<span class="item">
|
||||
<img class="icon " src="./assets/cost.svg" alt="">
|
||||
</span>
|
||||
<span class="label item">燃气</span>
|
||||
<span class="value item">{{ option.dataset.gasSupply.toFixed(2) }}</span>
|
||||
<span class="unit item">单位</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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { PropType, toRefs, shallowReactive, watch } from 'vue'
|
||||
import { PropType, shallowReactive, 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'
|
||||
|
||||
const props = defineProps({
|
||||
chartConfig: {
|
||||
type: Object as PropType<CreateComponentType>,
|
||||
required: true
|
||||
}
|
||||
})
|
||||
|
||||
const option = shallowReactive({
|
||||
dataset: configOption.dataset
|
||||
})
|
||||
|
||||
|
||||
// 获取数据值的方法
|
||||
const getDataValue = (field: string) => {
|
||||
return (option.dataset as Record<string, number>)[field] || 0
|
||||
}
|
||||
|
||||
watch(
|
||||
() => props.chartConfig.option.dataset,
|
||||
(newData: any) => {
|
||||
@ -70,7 +59,6 @@ useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
|
||||
})
|
||||
</script>
|
||||
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@include go('energy-box') {
|
||||
width: 100%;
|
||||
@ -84,63 +72,99 @@ useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
|
||||
grid-gap: 10px;
|
||||
|
||||
.grid-item {
|
||||
background-color: #043951;
|
||||
// padding: 20px;
|
||||
// background-color: #043951;
|
||||
padding: 10px 20px 5px 20px;
|
||||
font-size: 30px;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
/* 默认垂直居中对齐 */
|
||||
gap: 0px;
|
||||
|
||||
.item {
|
||||
|
||||
.item-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-family: 'CustomFont';
|
||||
// background-color: beige;
|
||||
}
|
||||
|
||||
.label {
|
||||
color: #07A1C8;
|
||||
font-size: 22px;
|
||||
flex-shrink: 0;
|
||||
flex-direction: column;
|
||||
margin-left: 20px;
|
||||
align-self: flex-start;
|
||||
margin-right: 20px;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
font-family: 'CustomFont';
|
||||
|
||||
|
||||
.value-container {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.value {
|
||||
font-size: 35px;
|
||||
letter-spacing: 3px;
|
||||
// flex-grow: 1;
|
||||
// flex-shrink: 0;
|
||||
align-self: flex-end;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
margin-right: 20px;
|
||||
// -webkit-background-clip: text;
|
||||
// background-clip: text;
|
||||
// color: transparent;
|
||||
// -webkit-text-fill-color: transparent;
|
||||
}
|
||||
|
||||
.unit {
|
||||
font-size: 18px;
|
||||
flex-shrink: 0;
|
||||
color: #eee;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.label {
|
||||
color: #07A1C8;
|
||||
font-size: 22px;
|
||||
align-self: flex-start;
|
||||
|
||||
// 使用渐变背景色
|
||||
background: linear-gradient(to right, rgba(255, 255, 255, 0.624) 0%, rgba(255, 255, 255, 1) 100%);
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
color: transparent; // 兼容性处理
|
||||
}
|
||||
|
||||
|
||||
|
||||
// 为每个value定义不同的颜色
|
||||
.value-cost {
|
||||
color: #479FFE;
|
||||
}
|
||||
|
||||
.value-electricity {
|
||||
color: #90FFAD;
|
||||
}
|
||||
|
||||
.value-water {
|
||||
color: #0DBBF4;
|
||||
}
|
||||
|
||||
.value-gas {
|
||||
color: #E5B55B;
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
.value {
|
||||
color: beige;
|
||||
font-size: 40px;
|
||||
letter-spacing: 3px;
|
||||
// 是否让value挤占单位生存空间
|
||||
flex-grow: 1;
|
||||
flex-shrink: 0;
|
||||
margin-right: 10px;
|
||||
align-self: flex-end;
|
||||
.item {}
|
||||
|
||||
background: linear-gradient(to top, #0d78bb, #ffffff);
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
|
||||
.unit {
|
||||
font-size: 20px;
|
||||
|
||||
/* 防止被压缩 */
|
||||
flex-shrink: 0;
|
||||
|
||||
/* 垂直置底 */
|
||||
align-self: flex-end;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.icon {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
flex-shrink: 0;
|
||||
object-fit: contain;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user