zzkj/smart_storage_web
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

冲突文件处理

Browse Source
This commit is contained in:
huangjp
2026-04-22 09:59:22 +08:00
parent d2eb9e71d0
commit c9727d0355
1 changed files with 65 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

85
src/views/dashboardtest/components/bottom-left/standard-215.vue
View File

@ -1,6 +1,6 @@
<template>
<div class="bottom-left-wrapper">
<ItemBox :title=" $t('dashboard.chargingDischarging') ">
<ItemBox :title=" $t('dashboard.chargingDischarging')">
<div slot="header">
<div class="header-right-box">
<div class="header-title" :class="{'active':currentType === 'day'}" @click="selectTime('day')">{{ $t('dashboard.sevenDay') }}</div>
@ -15,7 +15,7 @@
</template>
<script>
import * as echarts from 'echarts'
// import * as echarts from 'echarts'
import { GetPCSElecData } from '@/api/home-page/index'
export default {
@ -78,16 +78,26 @@ export default {
this.powerOptions = {
grid: {
top: '25%',
left: '10%',
left: '5%',
right: '10%',
bottom: '5%',
containLabel: true
},
legend: {},
legend: {
icon: 'circle',
itemWidth: 10,
itemHeight: 10,
top: 10,
right: 10,
data: [
{ name: `${this.$t('dashboard.charging')}`, itemStyle: { color: '#0091DB' }},
{ name: `${this.$t('dashboard.disCharging')}`, itemStyle: { color: '#FFFFFF' }}
]
},
tooltip: {
trigger: 'axis',
backgroundColor: 'rgba(0,0,0,0,)',
borderColor: 'rgba(0,0,0,0,);',
backgroundColor: 'rgba(0,0,0,0)',
borderColor: 'rgba(0,0,0,0)',
borderWidth: 0,
textStyle: {
width: 160,
@ -101,9 +111,17 @@ export default {
// 获取xAxis data中的数据
let dataStr = `<div><p style="font-weight:bold;margin:0 8px 15px;">${params[0].name}</p></div>`
params.forEach(item => {
let gradientStyle = ''
if (item.seriesName === this.$t('dashboard.charging')) {
// 充电：深蓝渐变
gradientStyle = 'background: #0091DB'
} else {
// 放电：白色渐变
gradientStyle = 'background: #FFFFFF'
}
dataStr += `<div>
<div style="margin: 0 8px;">
<span style="display:inline-block;margin-right:5px;width:10px;height:10px;background-color:${this.color[item.componentIndex]};"></span>
<span style="display:inline-block;margin-right:5px;width:10px;height:10px;${gradientStyle};"></span>
<span>${item.seriesName}</span>
<span style="float:right;color:#00C8FF;margin-left:20px;">${item.data}</span>
</div>
@ -127,9 +145,8 @@ box-shadow: inset 0px 2px 16px 0px rgba(0, 148, 255, 0.4);' >${dataStr}</div>`
},
axisLabel: {
show: true,
color: '#CEEBFF'
color: '#00AEFF'
},
axisTick: {
show: false
}
@ -138,7 +155,8 @@ box-shadow: inset 0px 2px 16px 0px rgba(0, 148, 255, 0.4);' >${dataStr}</div>`
yAxis: [
{
type: 'value',
name: `${this.$t('dashboard.chargingandDischarging')}(kWh)`,
// name: `${this.$t('dashboard.chargingandDischarging')}(kWh)`,
name: `kWh`,
nameTextStyle: {
color: ' rgba(255, 255, 255, 0.5)'
},
@ -165,12 +183,24 @@ box-shadow: inset 0px 2px 16px 0px rgba(0, 148, 255, 0.4);' >${dataStr}</div>`
// data: [219, 215, 216, 219, 220, 215, 214],
data: charge_data,
// barWidth: 14, // 柱状图的宽度
color: '#00C8FF',
color: 'rgb(0, 145, 219)',
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: 'rgba(0,200,255,0.90)' },
{ offset: 1, color: 'rgba(0, 200, 255, 0.0)' }
])
borderWidth: 1,
borderColor: '#0091DB',
borderType: 'solid',
color: {
type: 'linear', // 线性渐变
x: 0, y: 0, x2: 0, y2: 1, // 从上到下渐变
colorStops: [{
offset: 0, color: 'rgba(0, 145, 219, 0.5)'// 渐变起点颜色
}, {
offset: 1, color: 'rgba(0, 145, 219, 0.0)'// 渐变终点颜色
}]
}
// color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
// { offset: 0, color: 'rgba(0, 145, 219, 0.5)' },
// { offset: 1, color: 'rgba(0, 145, 219, 0.0)' }
// ])
}
},
{
@ -179,12 +209,24 @@ box-shadow: inset 0px 2px 16px 0px rgba(0, 148, 255, 0.4);' >${dataStr}</div>`
data: discharge_data,
// data: [206, 203, 204, 206, 210, 205, 206],
// barWidth: 14, // 柱状图的宽度
color: '#CEEBFF',
color: 'rgb(255, 255, 255)',
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: 'rgba(255, 184, 0,0.90)' },
{ offset: 1, color: 'rgba(255, 184, 0,0.00)' }
])
borderWidth: 1,
borderColor: '#FFFFFF',
borderType: 'solid',
color: {
type: 'linear', // 线性渐变
x: 0, y: 0, x2: 0, y2: 1, // 从上到下渐变
colorStops: [{
offset: 0, color: 'rgba(255, 255, 255, 0.5)'// 渐变起点颜色
}, {
offset: 1, color: 'rgba(255, 255, 255, 0.0)'// 渐变终点颜色
}]
}
// color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
// { offset: 0, color: 'rgba(255, 255, 255,0.5)' },
// { offset: 1, color: 'rgba(255, 255, 255,0.00)' }
// ])
}
}
@ -195,6 +237,9 @@ box-shadow: inset 0px 2px 16px 0px rgba(0, 148, 255, 0.4);' >${dataStr}</div>`
}
</script>
<style lang="scss" scoped>
.clor{
color: rgb(255, 255, 255);
}
.bottom-left-wrapper {
width: 100%;
height: 100%;