jsyhsec/energy_storage
7
0
Fork 0
mirror of https://gitee.com/js-yhsec/energy_storage.git synced 2026-05-27 18:59:26 +08:00
Code Issues Packages Projects Releases Wiki Activity

系统总览字段修改

Browse Source
This commit is contained in:
ym1026
2025-09-03 13:53:00 +08:00
parent 6d6d05e18f
commit 1568677c8e
12 changed files with 499 additions and 291 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
web/src/components/Home/Alarm.vue
View File

@@ -15,6 +15,10 @@
export default {
name: '',
props: {
total:{
type:Object,
default:()=>{}
},
deviceInfo: {
type: Array,
default: () => []
@@ -27,7 +31,7 @@ export default {
name: '日光伏设备告警',
key: 'key1',
lineColor: '#22E4FF',
value: 0,
value: 1111,
d: ''
},
{
@@ -62,11 +66,28 @@ export default {
watch: {
deviceInfo: {
handler(n) {
let that=this
this.$nextTick(() => {
this.drawLineChart()
})
}
// immediate: true
},
total:{
handler(n){
if(n){
let that=this
that.curList.forEach((item)=>{
item.value=that.total[item.key]
})
}
},
deep: true, // 深度监听
immediate: true,
}
},
mounted() {},
@@ -166,7 +187,6 @@ export default {
series: this.lineChartData.ydata
}
option && faultChart.setOption(option)
console.log(this.lineChartData, 'this.lineChartData')
window.addEventListener('resize', this.handleResize)
}
}

80
web/src/components/Home/Charge.vue
View File

@@ -1,13 +1,10 @@
<template>
<div class="charge">
<div class="text_Cur">
<div v-for="item in curList" :key="item.key">
<div v-for="item in curList" :key="item.key">
<div>{{ item.name }}</div>
<span class="mark">{{
item.value?item.value: 0
}}</span
>
<span class="d">{{ item.d }}</span>
<span class="mark">{{ item.value ? item.value : 0 }}</span>
<span class="d">{{ item.d }}</span>
</div>
</div>
<div id="charge-chart"></div>
@@ -18,6 +15,10 @@
export default {
name: '',
props: {
total: {
type: Object,
default: () => {}
},
deviceInfo: {
type: Array,
default: () => []
@@ -28,52 +29,63 @@ export default {
curList: [
{
name: '日充电电量',
key: 'key1',
key: 'chargeElect',
lineColor: '#00BBA3',
colorStart: ' rgba(10, 250, 106, 0.15)',
colorEnd: ' rgba(171, 255, 249, 0.3)',
value:0,
d:'kW·h'
value: 0,
d: 'kW·h'
},
{
name: '日充电次数',
key: 'key2',
key: 'chargeNum',
lineColor: '#3F80F2',
colorStart: ' rgba(99, 151, 235, 0.3)',
colorEnd: ' rgba(24, 109, 245, 0.3)',
value:0,
d:''
value: 0,
d: ''
}
],
curListEcharts: [
{
name: '日充电电量',
key: 'key1',
key: 'chargeElect',
lineColor: '#00BBA3',
colorStart: ' rgba(10, 250, 106, 0.15)',
colorEnd: ' rgba(171, 255, 249, 0.3)',
value:0,
d:'kW·h'
value: 0,
d: 'kW·h'
},
{
name: '日充电收益',
key: 'key2',
key: 'incomeCharge',
lineColor: '#3F80F2',
colorStart: ' rgba(99, 151, 235, 0.3)',
colorEnd: ' rgba(24, 109, 245, 0.3)',
value:0,
d:''
value: 0,
d: ''
}
],
chargeChart: null,
lineChartData: {
ydata: [],
xdata: []
},
}
}
},
watch: {
total: {
handler(n) {
if (n) {
let that = this
that.curList.forEach((item) => {
item.value = that.total[item.key]
})
}
},
deep: true, // 深度监听
immediate: true
},
deviceInfo: {
handler(n) {
this.$nextTick(() => {
@@ -94,25 +106,23 @@ export default {
this.chargeChart.resize()
},
processData(data, keys) {
console.log(data, 'dddddddddddddddddddddddddddd')
data.sort((a, b) => {
return new Date(a.date) - new Date(b.date)
})
const dates = data.map((item) => item.date)
const values=[]
keys.forEach((item,index)=>{
values[index]= data.map((dataValue)=>dataValue[keys[index]])
const values = []
keys.forEach((item, index) => {
values[index] = data.map((dataValue) => dataValue[keys[index]])
})
return {
dates,
values,
values
}
},
getChargeData() {
const arr=this.curListEcharts
const keyList=this.curListEcharts.map((item)=>item.key)
const arr = this.curListEcharts
const keyList = this.curListEcharts.map((item) => item.key)
const result = this.processData(this.deviceInfo, keyList)
this.lineChartData.xdata = result.dates
@@ -139,14 +149,13 @@ export default {
y2: 1,
colorStops: [
{ offset: 0, color: JSON.parse(JSON.stringify(item)).colorStart }, // 顶部颜色
{ offset: 1, color: JSON.parse(JSON.stringify(item)).colorEnd }, // 底部颜色
{ offset: 1, color: JSON.parse(JSON.stringify(item)).colorEnd } // 底部颜色
]
}
},
global: false,
showSymbol: false,
data:result.values[index]
data: result.values[index]
}
})
},
@@ -197,7 +206,6 @@ export default {
series: this.lineChartData.ydata
}
option && chargeChart.setOption(option)
console.log(this.lineChartData, 'this.lineChartData')
window.addEventListener('resize', this.handleResize)
}
}
@@ -224,12 +232,12 @@ export default {
display: flex;
justify-content: space-between;
align-items: center;
& > div:last-child{
& > div:last-child {
display: flex;
flex-direction: column;
justify-content: center;
align-items: end;
}
}
.mark {
font-size: 16px;
margin-right: 2px;
@@ -241,7 +249,7 @@ export default {
rgba(61, 254, 250, 0.15) 49.2%,
rgba(61, 254, 250, 0) 100%
);
.d{
.d {
margin-left: 1px;
font-size: 12px;
}

24
web/src/components/Home/Energy.vue
View File

@@ -17,6 +17,10 @@
export default {
name: '',
props: {
total:{
type:Object,
default:()=>{}
},
deviceInfo: {
type: Array,
default: () => []
@@ -27,14 +31,14 @@ export default {
curList: [
{
name: '日充电电量',
key: 'key1',
key: 'storageElectIn',
lineColor: '#22E4FF',
value: 0,
d: 'kW·h'
},
{
name: '日放电电量',
key: 'key2',
key: 'storageElectOut',
lineColor: '#0E68E4',
value: 0,
d: 'kW·h'
@@ -48,6 +52,20 @@ export default {
}
},
watch: {
total:{
handler(n){
if(n){
let that=this
that.curList.forEach((item)=>{
item.value=that.total[item.key]
})
}
},
deep: true, // 深度监听
immediate: true,
},
deviceInfo: {
handler(n) {
this.$nextTick(() => {
@@ -68,7 +86,6 @@ export default {
this.faultChart.resize()
},
processData(data, keys) {
console.log(data, 'dddddddddddddddddddddddddddd')
data.sort((a, b) => {
return new Date(a.date) - new Date(b.date)
})
@@ -155,7 +172,6 @@ export default {
series: this.lineChartData.ydata
}
option && faultChart.setOption(option)
console.log(this.lineChartData, 'this.lineChartData')
window.addEventListener('resize', this.handleResize)
}
}

11
web/src/components/Home/Map.vue
View File

@@ -1,7 +1,7 @@
<template>
<div class="map">
<div>
<div class="icon1" @click="showModal()"></div>
<div class="icon1" @click="showModal(testVal)"></div>
<div class="icon"></div>
</div>
<div ref="mapContent"></div>
@@ -42,16 +42,21 @@ export default {
testVal: {
name: '场站211',
id: '124563'
}
},
changeStationId:''
}
},
mounted() {},
methods: {
async showModal(currentVal) {
this.changeStationId=currentVal.id
this.$emit('changeStation',this.changeStationId)
console.log(currentVal, 'cccccccccccccccccccccc')
this.showCtrModal = true
try {
const query = {}
const query = {
// station_id:this.changeStationId
}
const res = await postReq(query, '')
if (res.code == 200) {
this.modalInfo = res.data.records

2
web/src/components/Home/Modal/DisCharge.vue
View File

@@ -61,7 +61,6 @@ export default {
this.disChargeChart.resize()
},
processData(data, keys) {
console.log(data, 'dddddddddddddddddddddddddddd')
data.sort((a, b) => {
return new Date(a.date) - new Date(b.date)
})
@@ -151,7 +150,6 @@ export default {
series: this.lineChartData.ydata
}
option && disChargeChart.setOption(option)
console.log(this.lineChartData, 'this.lineChartData')
window.addEventListener('resize', this.handleResize)
}
}

2
web/src/components/Home/Modal/Revenue.vue
View File

@@ -57,7 +57,6 @@ export default {
this.revenueChart.resize()
},
processData(data, keys) {
console.log(data, 'dddddddddddddddddddddddddddd')
data.sort((a, b) => {
return new Date(a.date) - new Date(b.date)
})
@@ -160,7 +159,6 @@ export default {
series: this.lineChartData.ydata
}
option && revenueChart.setOption(option)
console.log(this.lineChartData, 'this.lineChartData')
window.addEventListener('resize', this.handleResize)
}
}

2
web/src/components/Home/Modal/Utilization.vue
View File

@@ -55,7 +55,6 @@ export default {
this.utilizationChart.resize()
},
processData(data, keys) {
console.log(data, 'dddddddddddddddddddddddddddd')
data.sort((a, b) => {
return new Date(a.date) - new Date(b.date)
})
@@ -145,7 +144,6 @@ export default {
series: this.lineChartData.ydata
}
option && utilizationChart.setOption(option)
console.log(this.lineChartData, 'this.lineChartData')
window.addEventListener('resize', this.handleResize)
}
}

29
web/src/components/Home/Operational.vue
View File

@@ -2,12 +2,12 @@
<div class="Operational">
<div class="oper-bg">{{ currentHoverNumber }}%</div>
<div class="oper-right">
<div v-for="item in list" :key="item.key" class="oper-item" @mouseover="changeNumber(item)">
<div v-for="item in curList" :key="item.key" class="oper-item" @mouseover="changeNumber(item)">
<div style="display: flex">
<div :style="`background:${item.lineColor}`" class="item-icon"></div>
<span class="item-name">{{ item.name }}</span>
</div>
<span class="item-value">{{ item.value }}</span>
<span class="item-value">{{ item.value?item.value:0 }}</span>
</div>
</div>
</div>
@@ -17,6 +17,10 @@
export default {
name: '',
props: {
total:{
type:Object,
default:()=>{}
},
deviceInfo: {
type: Array,
default: () => []
@@ -25,10 +29,10 @@ export default {
data() {
return {
currentHoverNumber: 58,
list: [
curList: [
{
name: '收益',
key: 'connector_online',
key: 'incomeTotal',
percentKey: 'connector_online_percent',
lineColor: 'linear-gradient(90deg, rgba(13, 87, 144, 1) 0%, rgba(21, 153, 253, 1) 100%);',
value: 0
@@ -44,7 +48,22 @@ export default {
]
}
},
watch: {},
watch: {
total:{
handler(n){
if(n){
let that=this
that.curList.forEach((item)=>{
item.value=that.total[item.key]
})
}
},
deep: true, // 深度监听
immediate: true,
}
},
mounted() {},
methods: {

22
web/src/components/Home/Pv.vue
View File

@@ -17,6 +17,10 @@
export default {
name: '',
props: {
total: {
type: Object,
default: () => {}
},
deviceInfo: {
type: Array,
default: () => []
@@ -27,14 +31,14 @@ export default {
curList: [
{
name: '日发电量',
key: 'key1',
key: 'solarElectGen',
lineColor: '#22E4FF',
value: 0,
d: 'kW·h'
},
{
name: '日入网电量',
key: 'key2',
key: 'solarElectGrid',
lineColor: '#0E68E4',
value: 0,
d: 'kW·h'
@@ -53,6 +57,18 @@ export default {
}
},
watch: {
total: {
handler(n) {
if (n) {
let that = this
that.curList.forEach((item) => {
item.value = that.total[item.key]
})
}
},
deep: true, // 深度监听
immediate: true
},
deviceInfo: {
handler(n) {
this.$nextTick(() => {
@@ -73,7 +89,6 @@ export default {
this.faultChart.resize()
},
processData(data, keys) {
console.log(data, 'dddddddddddddddddddddddddddd')
data.sort((a, b) => {
return new Date(a.date) - new Date(b.date)
})
@@ -160,7 +175,6 @@ export default {
series: this.lineChartData.ydata
}
option && faultChart.setOption(option)
console.log(this.lineChartData, 'this.lineChartData')
window.addEventListener('resize', this.handleResize)
}
}

12
web/src/components/Home/onLine.vue
View File

@@ -29,42 +29,42 @@ export default {
return {
list: [
{
key: 'tianshu',
key: 'launchDate',
value: 20,
d: '天',
label: '系统运行天数',
class: 'item-1'
},
{
key: 'shouyi',
key: 'incomeTotal',
value: 10,
d: '万元',
label: '累计收益',
class: 'item-2'
},
{
key: 'shuliang',
key: 'solarDeviceNum',
value: 20,
d: '',
label: '光伏设备数量',
class: 'item-3'
},
{
key: 'shuliang',
key: '"stationNum',
value: 20,
d: '',
label: '储能预制舱数量',
class: 'item-4'
},
{
key: 'fadianliang',
key: 'solarElectGen',
value: 20,
d: '',
label: '光伏设备累计发电量',
class: 'item-5'
},
{
key: 'rongliang',
key: 'capacityTotal',
value: 20,
d: '',
label: '储能总容量',

4
web/src/components/statisticalAnalysis/energyEchart.vue
View File

@@ -274,9 +274,7 @@ export default {
},
initCharts() {
this.chartOptions.forEach((option, index) => {
// Vue 2 的 $refs 在 v-for 中是数组，需要取 [0]
const dom = this.$refs[`chartContainer${index}`][0]
console.log(dom, 'ddddddddddddddd')
if (!dom) return
const chart = this.$echarts.init(dom)
@@ -363,7 +361,6 @@ export default {
},
processData(keysList, dataKey, data) {
const keys = keysList.map((item) => item.key)
console.log(keys, dataKey, data, 'dddddddddddddddddddddddddddd')
data.sort((a, b) => {
return new Date(a.date) - new Date(b.date)
})
@@ -373,7 +370,6 @@ export default {
keys.forEach((item, index) => {
values[index] = data.map((dataValue) => dataValue[keys[index]])
})
console.log(dates, values, 'dates')
return {
dates,
values