Merge branch 'master' of http://119.45.132.149:3000/security/go-view-fetch
This commit is contained in:
commit
bd6c723b54
@ -5,12 +5,25 @@ import cloneDeep from 'lodash/cloneDeep'
|
||||
import dataJson from './data.json'
|
||||
import * as echarts from 'echarts'
|
||||
|
||||
export const includes = ['title']
|
||||
// 基于准备好的dom，初始化echarts实例
|
||||
// var myChart = echarts.init(document.getElementById('main'));
|
||||
|
||||
export const includes = []
|
||||
const otherOption = {
|
||||
unit: '万kwh',
|
||||
}
|
||||
|
||||
const option = {
|
||||
...otherOption,
|
||||
dataset: dataJson,
|
||||
// 添加标题配置
|
||||
title: {
|
||||
text: '单位：' + otherOption.unit,
|
||||
left: '3%',
|
||||
top: '3%',
|
||||
textStyle: {
|
||||
fontSize: 12,
|
||||
color: 'rgba(255, 255, 255, 0.7)',
|
||||
fontWeight: 'normal'
|
||||
}
|
||||
},
|
||||
// 提示框配置
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
@ -23,7 +36,6 @@ const option = {
|
||||
color: '#ffffff'
|
||||
}
|
||||
},
|
||||
dataset: dataJson,
|
||||
// 网格配置
|
||||
grid: {
|
||||
left: '3%',
|
||||
@ -38,7 +50,7 @@ const option = {
|
||||
type: 'category',
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#eee'
|
||||
color: 'rgba(255, 255, 255, 0.1)',
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
@ -46,7 +58,7 @@ const option = {
|
||||
},
|
||||
//
|
||||
axisLabel: {
|
||||
color: '#80b0c4',
|
||||
color: '#eee',
|
||||
interval: 0,
|
||||
fontSize: 9,
|
||||
margin: 20
|
||||
@ -60,8 +72,10 @@ const option = {
|
||||
min: 0,
|
||||
interval: 25,
|
||||
axisLine: {
|
||||
show: false,
|
||||
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: 'rgba(255, 255, 255, 0.1)',
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
@ -83,22 +97,21 @@ const option = {
|
||||
|
||||
name: '能源消耗',
|
||||
type: 'bar',
|
||||
// data: values.map((value, index) => ({
|
||||
// value: value,
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
|
||||
{ offset: 0, color: '#1d7b7b' }, // 更暗的左侧颜色，增强阴影效果
|
||||
{ offset: 0.2, color: '#196b6b' }, // 左侧过渡色
|
||||
{ offset: 0.7, color: '#00cccc' }, // 中间主色
|
||||
{ offset: 0.8, color: '#33dddd' }, // 右侧过渡色
|
||||
{ offset: 1, color: '#66ffff' } // 右侧亮色，增强高光效果
|
||||
{ offset: 0, color: '#82ffff' }, // 更暗的左侧颜色，增强阴影效果
|
||||
{ offset: 0.2, color: '#00bfbf' }, // 左侧过渡色
|
||||
{ offset: 0.5, color: '#008f8f' }, // 中间主色
|
||||
{ offset: 0.8, color: '#00bfbf' }, // 右侧过渡色
|
||||
{ offset: 1, color: '#82ffff' } // 右侧亮色，增强高光效果
|
||||
]),
|
||||
opacity: 0.60,
|
||||
// 添加更强的3D效果
|
||||
shadowBlur: 20,
|
||||
shadowColor: 'rgba(0, 0, 0, 0.7)',
|
||||
shadowOffsetX: -5,
|
||||
shadowOffsetY: 5,
|
||||
borderRadius: [0, 0, 6, 6],
|
||||
borderRadius: [0, 0, 4, 4],
|
||||
borderWidth: 0,
|
||||
|
||||
},
|
||||
@ -112,20 +125,21 @@ const option = {
|
||||
},
|
||||
// })),
|
||||
|
||||
barWidth: '40%',
|
||||
barWidth: '45%',
|
||||
|
||||
// 3D圆柱体效果
|
||||
roundCap: true
|
||||
roundCap: false
|
||||
}, {
|
||||
name: '顶部圆',
|
||||
type: 'pictorialBar',
|
||||
z: 3,
|
||||
symbolSize: ['57%', '10'],
|
||||
symbolOffset: [0.1, -5],
|
||||
symbolSize: ['62%', '6'],
|
||||
symbolOffset: [0.1, -3],
|
||||
symbolPosition: "end",
|
||||
itemStyle: {
|
||||
color: "#40ECEC",
|
||||
color: "rgba(51, 221, 221, 0.8)",
|
||||
},
|
||||
// opacity: 0.1,
|
||||
emphasis: {
|
||||
itemStyle: {
|
||||
shadowColor: 'rgba(0, 255, 255, 0.8)',
|
||||
@ -137,16 +151,6 @@ const option = {
|
||||
|
||||
// 图形元素配置
|
||||
graphic: [{
|
||||
// 单位标注
|
||||
type: 'text',
|
||||
left: '3%',
|
||||
top: '3%',
|
||||
style: {
|
||||
text: '单位：' + dataJson.unit,
|
||||
fontSize: 12,
|
||||
fill: 'rgba(255, 255, 255, 0.7)',
|
||||
}
|
||||
}, {
|
||||
// 左侧阴影效果
|
||||
type: 'rect',
|
||||
left: 0,
|
||||
|
||||
@ -52,6 +52,5 @@
|
||||
"month": "12月",
|
||||
"value": 67
|
||||
}
|
||||
],
|
||||
"unit": "万kwh"
|
||||
]
|
||||
}
|
||||
@ -11,7 +11,7 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { PropType, computed, onMounted, ref } from 'vue'
|
||||
import { PropType, computed, onMounted, ref, watch } from 'vue'
|
||||
import VChart from 'vue-echarts'
|
||||
import { useCanvasInitOptions } from '@/hooks/useCanvasInitOptions.hook'
|
||||
import * as echarts from 'echarts'
|
||||
@ -48,16 +48,31 @@ use([
|
||||
|
||||
const replaceMergeArr = ref<string[]>([])
|
||||
|
||||
const updataUnit = () => {
|
||||
option.value.title.text = '单位：' + option.value.unit;
|
||||
|
||||
}
|
||||
const option = computed(() => {
|
||||
return mergeTheme(props.chartConfig.option, props.themeSetting, includes)
|
||||
})
|
||||
|
||||
watch(
|
||||
() => props.chartConfig.option.dataset,
|
||||
(newData: any) => {
|
||||
updataUnit();
|
||||
option.value.dataset = newData
|
||||
}, {
|
||||
immediate: true,
|
||||
deep: false
|
||||
}
|
||||
)
|
||||
const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
|
||||
props.chartConfig.option.dataset = newData
|
||||
})
|
||||
|
||||
onMounted(async () => {
|
||||
|
||||
// 更新显示单位
|
||||
updataUnit();
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
@ -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