mirror of
https://gitee.com/js-yhsec/energy_storage.git
synced 2026-05-27 18:59:26 +08:00
合并冲突
This commit is contained in:
@@ -147,7 +147,7 @@ export default {
|
||||
.subMenu {
|
||||
display: flex;
|
||||
color: #fff;
|
||||
margin-left: 10px;
|
||||
// margin-left: 10px;
|
||||
padding-bottom: 20px;
|
||||
.subItem {
|
||||
width: 96px;
|
||||
|
||||
@@ -22,6 +22,7 @@
|
||||
</div>
|
||||
<div class="main_content">
|
||||
<energyEchart
|
||||
:key="activeKey"
|
||||
:chart-options="echartsInfo[activeKey].chartOptions"
|
||||
:chart-data="echartsInfo[activeKey].chartData"
|
||||
:columns="tableList[activeKey].columns"
|
||||
@@ -29,6 +30,7 @@
|
||||
:table-data="tableList[activeKey].tableData"
|
||||
@pagesizeChange="pagesizeChange()"
|
||||
></energyEchart>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -36,7 +38,9 @@
|
||||
<script>
|
||||
import energyEchart from '@/components/statisticalAnalysis/energyEchart.vue'
|
||||
import searchBox from '@/components/SearchBox.vue'
|
||||
import { postReq } from '@/request/api'
|
||||
import { postReq, getReq } from '@/request/api'
|
||||
import { getRunDays, getDateDaysAgo } from '@/utils/dealWithData'
|
||||
|
||||
export default {
|
||||
name: 'StatisicalAnView',
|
||||
components: { energyEchart, searchBox },
|
||||
@@ -64,7 +68,7 @@ export default {
|
||||
searchOptions: [
|
||||
{
|
||||
label: '日期',
|
||||
type: 'datePick',
|
||||
type: 'datePick1',
|
||||
value: [],
|
||||
key: 'time'
|
||||
}
|
||||
@@ -77,8 +81,8 @@ export default {
|
||||
type: 'bar',
|
||||
dataKey: 'sales',
|
||||
infoKeys: [
|
||||
{ key: 'key1', label: '日充电电量', lineColor: '#2A82E4' },
|
||||
{ key: 'key2', label: '日放电电量', lineColor: '#5AABF2' }
|
||||
{ key: 'storage_elect_in', label: '日充电电量', lineColor: '#2A82E4' },
|
||||
{ key: 'storage_elect_out', label: '日放电电量', lineColor: '#5AABF2' }
|
||||
]
|
||||
},
|
||||
{
|
||||
@@ -86,7 +90,7 @@ export default {
|
||||
type: 'bar',
|
||||
dataKey: 'users',
|
||||
infoKeys: [
|
||||
{ key: 'key1', label: '日故障次数', lineColor: '#0CDAF5' },
|
||||
{ key: 'storage_num_err', label: '日故障次数', lineColor: '#0CDAF5' },
|
||||
{ key: 'key2', label: '日充电工作时长', lineColor: '#2A82E4' },
|
||||
{ key: 'key3', label: '日放电工作时长', lineColor: '#5AABF2' }
|
||||
]
|
||||
@@ -128,20 +132,135 @@ export default {
|
||||
}
|
||||
],
|
||||
chartData: {}
|
||||
},
|
||||
1: {
|
||||
chartOptions: [
|
||||
{
|
||||
title: '发电电量分析',
|
||||
type: 'bar',
|
||||
dataKey: 'sales',
|
||||
infoKeys: [
|
||||
{ key: 'storage_elect_in', label: '日发电电量', lineColor: '#2A82E4' },
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '运行状态分析',
|
||||
type: 'bar',
|
||||
dataKey: 'users',
|
||||
infoKeys: [
|
||||
{ key: 'storage_num_err', label: '日故障次数', lineColor: '#0CDAF5' },
|
||||
{ key: 'key3', label: '日发电时长', lineColor: '#5AABF2' }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '电压与电流分析',
|
||||
type: 'line',
|
||||
dataKey: 'stock',
|
||||
infoKeys: [
|
||||
{
|
||||
key: 'key1',
|
||||
label: '电压',
|
||||
lineColor: '#3F80F2',
|
||||
colorStart: ' rgba(10, 250, 106, 0.15)',
|
||||
colorEnd: ' rgba(171, 255, 249, 0.3)'
|
||||
},
|
||||
{
|
||||
key: 'key2',
|
||||
label: '电流',
|
||||
lineColor: '#A9A6FF',
|
||||
colorStart: ' rgba(10, 250, 106, 0.15)',
|
||||
colorEnd: ' rgba(171, 255, 249, 0.3)'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '功率分析',
|
||||
type: 'line',
|
||||
dataKey: 'yearly',
|
||||
infoKeys: [
|
||||
{
|
||||
key: 'key1',
|
||||
label: '功率',
|
||||
lineColor: '#00FFFB',
|
||||
colorStart: ' rgba(10, 250, 106, 0.15)',
|
||||
colorEnd: ' rgba(171, 255, 249, 0.3)'
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
chartData: {}
|
||||
},
|
||||
2: {
|
||||
chartOptions: [
|
||||
{
|
||||
title: '充电分析',
|
||||
type: 'bar',
|
||||
dataKey: 'sales',
|
||||
infoKeys: [
|
||||
{ key: 'storage_elect_in', label: '日充电电量', lineColor: '#2A82E4' },
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '运行状态分析',
|
||||
type: 'bar',
|
||||
dataKey: 'users',
|
||||
infoKeys: [
|
||||
{ key: 'storage_num_err', label: '日充电次数', lineColor: '#0CDAF5' },
|
||||
{ key: 'key3', label: '日故障次数', lineColor: '#5AABF2' },
|
||||
{ key: 'key3', label: '日充电时长', lineColor: '#5AABF2' }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '电压与电流分析',
|
||||
type: 'line',
|
||||
dataKey: 'stock',
|
||||
infoKeys: [
|
||||
{
|
||||
key: 'key1',
|
||||
label: '电压',
|
||||
lineColor: '#3F80F2',
|
||||
colorStart: ' rgba(10, 250, 106, 0.15)',
|
||||
colorEnd: ' rgba(171, 255, 249, 0.3)'
|
||||
},
|
||||
{
|
||||
key: 'key2',
|
||||
label: '电流',
|
||||
lineColor: '#A9A6FF',
|
||||
colorStart: ' rgba(10, 250, 106, 0.15)',
|
||||
colorEnd: ' rgba(171, 255, 249, 0.3)'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '功率分析',
|
||||
type: 'line',
|
||||
dataKey: 'yearly',
|
||||
infoKeys: [
|
||||
{
|
||||
key: 'key1',
|
||||
label: '功率',
|
||||
lineColor: '#00FFFB',
|
||||
colorStart: ' rgba(10, 250, 106, 0.15)',
|
||||
colorEnd: ' rgba(171, 255, 249, 0.3)'
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
chartData: {}
|
||||
}
|
||||
},
|
||||
activeKey: 0,
|
||||
tabList: [
|
||||
{
|
||||
key: '0',
|
||||
key: 0,
|
||||
name: '储能设备'
|
||||
},
|
||||
{
|
||||
key: '1',
|
||||
key: 1,
|
||||
name: '光伏设备'
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
key: 2,
|
||||
name: '充电设备'
|
||||
}
|
||||
],
|
||||
@@ -150,8 +269,8 @@ export default {
|
||||
columns: [
|
||||
{
|
||||
title: '设备ID',
|
||||
dataIndex: 'key1',
|
||||
key: 'key1',
|
||||
dataIndex: 'ID',
|
||||
key: 'ID',
|
||||
width: 120,
|
||||
ellipsis: true
|
||||
},
|
||||
@@ -171,8 +290,8 @@ export default {
|
||||
},
|
||||
{
|
||||
title: '充电电量',
|
||||
dataIndex: 'key4',
|
||||
key: 'key4',
|
||||
dataIndex: 'storage_elect_in',
|
||||
key: 'storage_elect_in',
|
||||
width: 120,
|
||||
ellipsis: true
|
||||
},
|
||||
@@ -192,22 +311,22 @@ export default {
|
||||
},
|
||||
{
|
||||
title: '放电电量',
|
||||
dataIndex: 'key7',
|
||||
key: 'key7',
|
||||
dataIndex: 'storage_elect_out',
|
||||
key: 'storage_elect_out',
|
||||
width: 120,
|
||||
ellipsis: true
|
||||
},
|
||||
{
|
||||
title: '故障次数',
|
||||
dataIndex: 'key8',
|
||||
key: 'key8',
|
||||
dataIndex: 'storage_num_err',
|
||||
key: 'storage_num_err',
|
||||
width: 120,
|
||||
ellipsis: true
|
||||
},
|
||||
{
|
||||
title: '日期',
|
||||
dataIndex: 'key9',
|
||||
key: 'key9',
|
||||
dataIndex: 'dt',
|
||||
key: 'dt',
|
||||
width: 120,
|
||||
ellipsis: true
|
||||
}
|
||||
@@ -215,33 +334,173 @@ export default {
|
||||
geturl: '',
|
||||
tableData: [],
|
||||
pageOption: {
|
||||
current: 1,
|
||||
page: 1,
|
||||
pageSize: 10,
|
||||
total: 1
|
||||
count: 1
|
||||
}
|
||||
},
|
||||
1: {
|
||||
columns: [
|
||||
{
|
||||
title: '设备ID',
|
||||
dataIndex: 'ID',
|
||||
key: 'ID',
|
||||
width: 120,
|
||||
ellipsis: true
|
||||
},
|
||||
{
|
||||
title: '设备名称',
|
||||
dataIndex: 'key2',
|
||||
key: 'key2',
|
||||
width: 120,
|
||||
ellipsis: true
|
||||
},
|
||||
{
|
||||
title: '设备类型',
|
||||
dataIndex: 'key3',
|
||||
key: 'key3',
|
||||
width: 120,
|
||||
ellipsis: true
|
||||
},
|
||||
{
|
||||
title: '发电电量',
|
||||
dataIndex: 'storage_elect_in',
|
||||
key: 'storage_elect_in',
|
||||
width: 120,
|
||||
ellipsis: true
|
||||
},
|
||||
{
|
||||
title: '发电时长',
|
||||
dataIndex: 'key5',
|
||||
key: 'key5',
|
||||
width: 120,
|
||||
ellipsis: true
|
||||
},
|
||||
{
|
||||
title: '故障次数',
|
||||
dataIndex: 'key6',
|
||||
key: 'key6',
|
||||
width: 120,
|
||||
ellipsis: true
|
||||
},
|
||||
|
||||
{
|
||||
title: '日期',
|
||||
dataIndex: 'dt',
|
||||
key: 'dt',
|
||||
width: 120,
|
||||
ellipsis: true
|
||||
}
|
||||
],
|
||||
geturl: '',
|
||||
tableData: [],
|
||||
pageOption: {
|
||||
page: 1,
|
||||
pageSize: 10,
|
||||
count: 1
|
||||
}
|
||||
},
|
||||
2: {
|
||||
columns: [
|
||||
{
|
||||
title: '设备ID',
|
||||
dataIndex: 'ID',
|
||||
key: 'ID',
|
||||
width: 120,
|
||||
ellipsis: true
|
||||
},
|
||||
{
|
||||
title: '设备名称',
|
||||
dataIndex: 'key2',
|
||||
key: 'key2',
|
||||
width: 120,
|
||||
ellipsis: true
|
||||
},
|
||||
{
|
||||
title: '设备类型',
|
||||
dataIndex: 'key3',
|
||||
key: 'key3',
|
||||
width: 120,
|
||||
ellipsis: true
|
||||
},
|
||||
{
|
||||
title: '充电电量',
|
||||
dataIndex: 'storage_elect_in',
|
||||
key: 'storage_elect_in',
|
||||
width: 120,
|
||||
ellipsis: true
|
||||
},
|
||||
{
|
||||
title: '充电时长',
|
||||
dataIndex: 'key5',
|
||||
key: 'key5',
|
||||
width: 120,
|
||||
ellipsis: true
|
||||
},
|
||||
{
|
||||
title: '充电次数',
|
||||
dataIndex: 'key6',
|
||||
key: 'key6',
|
||||
width: 120,
|
||||
ellipsis: true
|
||||
},
|
||||
{
|
||||
title: '故障次数',
|
||||
dataIndex: 'key6',
|
||||
key: 'key6',
|
||||
width: 120,
|
||||
ellipsis: true
|
||||
},
|
||||
{
|
||||
title: '日期',
|
||||
dataIndex: 'dt',
|
||||
key: 'dt',
|
||||
width: 120,
|
||||
ellipsis: true
|
||||
}
|
||||
],
|
||||
geturl: '',
|
||||
tableData: [],
|
||||
pageOption: {
|
||||
page: 1,
|
||||
pageSize: 10,
|
||||
count: 1
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
watch:{
|
||||
activeKey(newVal, oldVal) {
|
||||
console.log(newVal, oldVal,"activeKey")
|
||||
// 清空旧数据(可选)
|
||||
if( this.echartsInfo[oldVal]){
|
||||
this.echartsInfo[oldVal].chartData = {};
|
||||
this.tableList[oldVal].tableData = [];
|
||||
// // 重新加载数据
|
||||
this.getTableList()
|
||||
this.getEchartsList()
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
},
|
||||
async mounted() {
|
||||
await Promise.all([
|
||||
this.getTableList(),
|
||||
this.getEchartsList()
|
||||
])
|
||||
await Promise.all([this.getTableList(), this.getEchartsList()])
|
||||
},
|
||||
beforeUnmount() {},
|
||||
methods: {
|
||||
pagesizeChange(e) {
|
||||
console.log(e, 'eeeeeeeeeeeeeee')
|
||||
|
||||
this.tableList[this.activeKey].pageOption.pageSize = e.pageSize
|
||||
this.tableList[this.activeKey].pageOption.current = e.current
|
||||
this.tableList[this.activeKey].pageOption.page = e.page
|
||||
this.getTableList()
|
||||
},
|
||||
onSearch(data) {
|
||||
this.paramsDate.startTime = data.time ? data.time[0] : ''
|
||||
this.paramsDate.endTime = data.time ? data.time[1] : ''
|
||||
this.pageOption.current = 1
|
||||
this.paramsDate.start_date = data.time ? data.time[0] : ''
|
||||
this.paramsDate.end_date = data.time ? data.time[1] : ''
|
||||
|
||||
this.tableList[this.activeKey].pageOption.page = 1
|
||||
|
||||
this.getTableList()
|
||||
this.getEchartsList()
|
||||
@@ -251,419 +510,23 @@ export default {
|
||||
|
||||
const query = {
|
||||
...this.paramsDate,
|
||||
category: this.categoryArr.map((item) => item.label == this.activeKey)[0].type
|
||||
category: this.categoryArr.map((item) => item.label == this.activeKey)[0].type,
|
||||
// start_date: getDateDaysAgo(7 - 1),
|
||||
// end_date: getDateDaysAgo(0)
|
||||
}
|
||||
try {
|
||||
const res = await postReq(query, '')
|
||||
if (res.code === 200) {
|
||||
this.echartsInfo[this.activeKey].chartData= res.data
|
||||
|
||||
const res = await getReq('/api/queryStatDayList', query)
|
||||
if (res.errcode === 0) {
|
||||
this.echartsInfo[this.activeKey].chartData = res.data
|
||||
console.log(
|
||||
this.echartsInfo[this.activeKey].chartData,
|
||||
' this.echartsInfo[this.activeKey].chartData'
|
||||
)
|
||||
} else {
|
||||
throw res
|
||||
}
|
||||
} catch (error) {
|
||||
this.echartsInfo[this.activeKey].chartData = {
|
||||
sales: [
|
||||
{
|
||||
date: '2025-08-30',
|
||||
key1: 10,
|
||||
key2: 0,
|
||||
key3: 15,
|
||||
key4: 5
|
||||
},
|
||||
{
|
||||
date: '2025-08-29',
|
||||
key1: 8,
|
||||
key2: 5,
|
||||
key3: 5,
|
||||
key4: 7
|
||||
},
|
||||
{
|
||||
date: '2025-08-28',
|
||||
key1: 0,
|
||||
key2: 10,
|
||||
key3: 20,
|
||||
key4: 4
|
||||
},
|
||||
{
|
||||
date: '2025-08-27',
|
||||
key1: 10,
|
||||
key2: 0,
|
||||
key3: 15,
|
||||
key4: 5
|
||||
},
|
||||
{
|
||||
date: '2025-08-26',
|
||||
key1: 10,
|
||||
key2: 0,
|
||||
key3: 15,
|
||||
key4: 5
|
||||
},
|
||||
{
|
||||
date: '2025-08-25',
|
||||
key1: 10,
|
||||
key2: 0,
|
||||
key3: 15,
|
||||
key4: 5
|
||||
},
|
||||
{
|
||||
date: '2025-08-24',
|
||||
key1: 10,
|
||||
key2: 0,
|
||||
key3: 15,
|
||||
key4: 5
|
||||
},
|
||||
{
|
||||
date: '2025-08-23',
|
||||
key1: 10,
|
||||
key2: 0,
|
||||
key3: 15,
|
||||
key4: 5
|
||||
},
|
||||
{
|
||||
date: '2025-08-22',
|
||||
key1: 10,
|
||||
key2: 0,
|
||||
key3: 15,
|
||||
key4: 5
|
||||
},
|
||||
{
|
||||
date: '2025-08-21',
|
||||
key1: 10,
|
||||
key2: 0,
|
||||
key3: 15,
|
||||
key4: 5
|
||||
},
|
||||
{
|
||||
date: '2025-08-20',
|
||||
key1: 10,
|
||||
key2: 0,
|
||||
key3: 15,
|
||||
key4: 5
|
||||
},
|
||||
{
|
||||
date: '2025-08-19',
|
||||
key1: 10,
|
||||
key2: 0,
|
||||
key3: 15,
|
||||
key4: 5
|
||||
},
|
||||
{
|
||||
date: '2025-08-18',
|
||||
key1: 10,
|
||||
key2: 0,
|
||||
key3: 15,
|
||||
key4: 5
|
||||
},
|
||||
{
|
||||
date: '2025-08-17',
|
||||
key1: 10,
|
||||
key2: 0,
|
||||
key3: 15,
|
||||
key4: 5
|
||||
}
|
||||
],
|
||||
users: [
|
||||
{
|
||||
date: '2025-08-30',
|
||||
key1: 10,
|
||||
key2: 0,
|
||||
key3: 15,
|
||||
key4: 5
|
||||
},
|
||||
{
|
||||
date: '2025-08-29',
|
||||
key1: 8,
|
||||
key2: 5,
|
||||
key3: 5,
|
||||
key4: 7
|
||||
},
|
||||
{
|
||||
date: '2025-08-28',
|
||||
key1: 0,
|
||||
key2: 10,
|
||||
key3: 20,
|
||||
key4: 4
|
||||
},
|
||||
{
|
||||
date: '2025-08-27',
|
||||
key1: 10,
|
||||
key2: 0,
|
||||
key3: 15,
|
||||
key4: 5
|
||||
},
|
||||
{
|
||||
date: '2025-08-26',
|
||||
key1: 10,
|
||||
key2: 0,
|
||||
key3: 15,
|
||||
key4: 5
|
||||
},
|
||||
{
|
||||
date: '2025-08-25',
|
||||
key1: 10,
|
||||
key2: 0,
|
||||
key3: 15,
|
||||
key4: 5
|
||||
},
|
||||
{
|
||||
date: '2025-08-24',
|
||||
key1: 10,
|
||||
key2: 0,
|
||||
key3: 15,
|
||||
key4: 5
|
||||
},
|
||||
{
|
||||
date: '2025-08-23',
|
||||
key1: 10,
|
||||
key2: 0,
|
||||
key3: 15,
|
||||
key4: 5
|
||||
},
|
||||
{
|
||||
date: '2025-08-22',
|
||||
key1: 10,
|
||||
key2: 0,
|
||||
key3: 15,
|
||||
key4: 5
|
||||
},
|
||||
{
|
||||
date: '2025-08-21',
|
||||
key1: 10,
|
||||
key2: 0,
|
||||
key3: 15,
|
||||
key4: 5
|
||||
},
|
||||
{
|
||||
date: '2025-08-20',
|
||||
key1: 10,
|
||||
key2: 0,
|
||||
key3: 15,
|
||||
key4: 5
|
||||
},
|
||||
{
|
||||
date: '2025-08-19',
|
||||
key1: 10,
|
||||
key2: 0,
|
||||
key3: 15,
|
||||
key4: 5
|
||||
},
|
||||
{
|
||||
date: '2025-08-18',
|
||||
key1: 10,
|
||||
key2: 0,
|
||||
key3: 15,
|
||||
key4: 5
|
||||
},
|
||||
{
|
||||
date: '2025-08-17',
|
||||
key1: 10,
|
||||
key2: 0,
|
||||
key3: 15,
|
||||
key4: 5
|
||||
}
|
||||
],
|
||||
stock: [
|
||||
{
|
||||
date: '2025-08-30',
|
||||
key1: 10,
|
||||
key2: 0,
|
||||
key3: 15,
|
||||
key4: 5
|
||||
},
|
||||
{
|
||||
date: '2025-08-29',
|
||||
key1: 8,
|
||||
key2: 5,
|
||||
key3: 5,
|
||||
key4: 7
|
||||
},
|
||||
{
|
||||
date: '2025-08-28',
|
||||
key1: 0,
|
||||
key2: 10,
|
||||
key3: 20,
|
||||
key4: 4
|
||||
},
|
||||
{
|
||||
date: '2025-08-27',
|
||||
key1: 10,
|
||||
key2: 0,
|
||||
key3: 15,
|
||||
key4: 5
|
||||
},
|
||||
{
|
||||
date: '2025-08-26',
|
||||
key1: 10,
|
||||
key2: 0,
|
||||
key3: 15,
|
||||
key4: 5
|
||||
},
|
||||
{
|
||||
date: '2025-08-25',
|
||||
key1: 10,
|
||||
key2: 0,
|
||||
key3: 15,
|
||||
key4: 5
|
||||
},
|
||||
{
|
||||
date: '2025-08-24',
|
||||
key1: 10,
|
||||
key2: 0,
|
||||
key3: 15,
|
||||
key4: 5
|
||||
},
|
||||
{
|
||||
date: '2025-08-23',
|
||||
key1: 10,
|
||||
key2: 0,
|
||||
key3: 15,
|
||||
key4: 5
|
||||
},
|
||||
{
|
||||
date: '2025-08-22',
|
||||
key1: 10,
|
||||
key2: 0,
|
||||
key3: 15,
|
||||
key4: 5
|
||||
},
|
||||
{
|
||||
date: '2025-08-21',
|
||||
key1: 10,
|
||||
key2: 0,
|
||||
key3: 15,
|
||||
key4: 5
|
||||
},
|
||||
{
|
||||
date: '2025-08-20',
|
||||
key1: 10,
|
||||
key2: 0,
|
||||
key3: 15,
|
||||
key4: 5
|
||||
},
|
||||
{
|
||||
date: '2025-08-19',
|
||||
key1: 10,
|
||||
key2: 0,
|
||||
key3: 15,
|
||||
key4: 5
|
||||
},
|
||||
{
|
||||
date: '2025-08-18',
|
||||
key1: 10,
|
||||
key2: 0,
|
||||
key3: 15,
|
||||
key4: 5
|
||||
},
|
||||
{
|
||||
date: '2025-08-17',
|
||||
key1: 10,
|
||||
key2: 0,
|
||||
key3: 15,
|
||||
key4: 5
|
||||
}
|
||||
],
|
||||
yearly: [
|
||||
{
|
||||
date: '2025-08-30',
|
||||
key1: 10,
|
||||
key2: 0,
|
||||
key3: 15,
|
||||
key4: 5
|
||||
},
|
||||
{
|
||||
date: '2025-08-29',
|
||||
key1: 8,
|
||||
key2: 5,
|
||||
key3: 5,
|
||||
key4: 7
|
||||
},
|
||||
{
|
||||
date: '2025-08-28',
|
||||
key1: 0,
|
||||
key2: 10,
|
||||
key3: 20,
|
||||
key4: 4
|
||||
},
|
||||
{
|
||||
date: '2025-08-27',
|
||||
key1: 10,
|
||||
key2: 0,
|
||||
key3: 15,
|
||||
key4: 5
|
||||
},
|
||||
{
|
||||
date: '2025-08-26',
|
||||
key1: 10,
|
||||
key2: 0,
|
||||
key3: 15,
|
||||
key4: 5
|
||||
},
|
||||
{
|
||||
date: '2025-08-25',
|
||||
key1: 10,
|
||||
key2: 0,
|
||||
key3: 15,
|
||||
key4: 5
|
||||
},
|
||||
{
|
||||
date: '2025-08-24',
|
||||
key1: 10,
|
||||
key2: 0,
|
||||
key3: 15,
|
||||
key4: 5
|
||||
},
|
||||
{
|
||||
date: '2025-08-23',
|
||||
key1: 10,
|
||||
key2: 0,
|
||||
key3: 15,
|
||||
key4: 5
|
||||
},
|
||||
{
|
||||
date: '2025-08-22',
|
||||
key1: 10,
|
||||
key2: 0,
|
||||
key3: 15,
|
||||
key4: 5
|
||||
},
|
||||
{
|
||||
date: '2025-08-21',
|
||||
key1: 10,
|
||||
key2: 0,
|
||||
key3: 15,
|
||||
key4: 5
|
||||
},
|
||||
{
|
||||
date: '2025-08-20',
|
||||
key1: 10,
|
||||
key2: 0,
|
||||
key3: 15,
|
||||
key4: 5
|
||||
},
|
||||
{
|
||||
date: '2025-08-19',
|
||||
key1: 10,
|
||||
key2: 0,
|
||||
key3: 15,
|
||||
key4: 5
|
||||
},
|
||||
{
|
||||
date: '2025-08-18',
|
||||
key1: 10,
|
||||
key2: 0,
|
||||
key3: 15,
|
||||
key4: 5
|
||||
},
|
||||
{
|
||||
date: '2025-08-17',
|
||||
key1: 10,
|
||||
key2: 0,
|
||||
key3: 15,
|
||||
key4: 5
|
||||
}
|
||||
]
|
||||
}
|
||||
this.echartsInfo[this.activeKey].chartData = {}
|
||||
}
|
||||
},
|
||||
|
||||
@@ -672,23 +535,23 @@ export default {
|
||||
const query = {
|
||||
...this.paramsDate,
|
||||
category: this.categoryArr.map((item) => item.label == this.activeKey)[0].type,
|
||||
pageSize: currentInfo.pageOption.pageSize,
|
||||
pageNumber: currentInfo.pageOption.current
|
||||
page_size: currentInfo.pageOption.pageSize,
|
||||
pageNumber: currentInfo.pageOption.page
|
||||
}
|
||||
try {
|
||||
const res = await postReq(query, currentInfo.getUrl)
|
||||
if (res.code === 200) {
|
||||
currentInfo.tableData = res.data.records
|
||||
const res = await getReq('/api/queryStatDayList', query)
|
||||
if (res.errcode === 0) {
|
||||
currentInfo.tableData = res.data
|
||||
currentInfo.pageOption = {
|
||||
current: res.data.pageNumber,
|
||||
pageSize: res.data.pageSize,
|
||||
total: res.data.totalRow
|
||||
page: res.data.page,
|
||||
pageSize: res.data.page_size,
|
||||
count: res.data.count
|
||||
}
|
||||
} else {
|
||||
throw res
|
||||
}
|
||||
} catch (error) {
|
||||
this.tableList[this.activeKey].tableData = [
|
||||
currentInfo.tableData = [
|
||||
{
|
||||
key1: '1515151515',
|
||||
key2: '设备1111',
|
||||
|
||||
@@ -1,12 +1,7 @@
|
||||
<template>
|
||||
<div class="Home">
|
||||
<div class="content-left">
|
||||
<div
|
||||
v-for="item in leftList"
|
||||
:key="item.componentId"
|
||||
:class="`grid-item ${item.class}`"
|
||||
|
||||
>
|
||||
<div v-for="item in leftList" :key="item.componentId" :class="`grid-item ${item.class}`">
|
||||
<div class="tool">
|
||||
<div class="title">
|
||||
<i class="iconfont icon-hebing linear-text"></i>
|
||||
@@ -26,12 +21,7 @@
|
||||
<Map @changeStation="getCurrentStation"></Map>
|
||||
</div>
|
||||
<div class="content-right">
|
||||
<div
|
||||
v-for="item in rightList"
|
||||
:key="item.componentId"
|
||||
:class="`grid-item ${item.class}`"
|
||||
|
||||
>
|
||||
<div v-for="item in rightList" :key="item.componentId" :class="`grid-item ${item.class}`">
|
||||
<div class="tool">
|
||||
<div class="title">
|
||||
<i class="iconfont icon-hebing linear-text"></i>
|
||||
@@ -57,6 +47,8 @@ import Pv from '@/components/Home/Pv.vue'
|
||||
import Alarm from '@/components/Home/Alarm.vue'
|
||||
import Map from '@/components/Home/Map.vue'
|
||||
import { getReq, postReq } from '@/request/api'
|
||||
import { getRunDays, getDateDaysAgo } from '@/utils/dealWithData'
|
||||
|
||||
export default {
|
||||
name: 'Home',
|
||||
components: { Map },
|
||||
@@ -120,220 +112,6 @@ export default {
|
||||
},
|
||||
async mounted() {
|
||||
await Promise.all([
|
||||
// (this.deviceInfo = {
|
||||
// alarm: [
|
||||
// {
|
||||
// date: '2025-08-30',
|
||||
// key1: 10,
|
||||
// key2: 0,
|
||||
// key3: 15,
|
||||
// key4: 5
|
||||
// },
|
||||
// {
|
||||
// date: '2025-08-29',
|
||||
// key1: 8,
|
||||
// key2: 5,
|
||||
// key3: 5,
|
||||
// key4: 7
|
||||
// },
|
||||
// {
|
||||
// date: '2025-08-28',
|
||||
// key1: 0,
|
||||
// key2: 10,
|
||||
// key3: 20,
|
||||
// key4: 4
|
||||
// },
|
||||
// {
|
||||
// date: '2025-08-27',
|
||||
// key1: 10,
|
||||
// key2: 0,
|
||||
// key3: 15,
|
||||
// key4: 5
|
||||
// },
|
||||
// {
|
||||
// date: '2025-08-26',
|
||||
// key1: 10,
|
||||
// key2: 0,
|
||||
// key3: 15,
|
||||
// key4: 5
|
||||
// },
|
||||
// {
|
||||
// date: '2025-08-25',
|
||||
// key1: 10,
|
||||
// key2: 0,
|
||||
// key3: 15,
|
||||
// key4: 5
|
||||
// },
|
||||
// {
|
||||
// date: '2025-08-24',
|
||||
// key1: 10,
|
||||
// key2: 0,
|
||||
// key3: 15,
|
||||
// key4: 5
|
||||
// },
|
||||
// {
|
||||
// date: '2025-08-23',
|
||||
// key1: 10,
|
||||
// key2: 0,
|
||||
// key3: 15,
|
||||
// key4: 5
|
||||
// },
|
||||
// {
|
||||
// date: '2025-08-22',
|
||||
// key1: 10,
|
||||
// key2: 0,
|
||||
// key3: 15,
|
||||
// key4: 5
|
||||
// },
|
||||
// {
|
||||
// date: '2025-08-21',
|
||||
// key1: 10,
|
||||
// key2: 0,
|
||||
// key3: 15,
|
||||
// key4: 5
|
||||
// },
|
||||
// {
|
||||
// date: '2025-08-20',
|
||||
// key1: 10,
|
||||
// key2: 0,
|
||||
// key3: 15,
|
||||
// key4: 5
|
||||
// },
|
||||
// {
|
||||
// date: '2025-08-19',
|
||||
// key1: 10,
|
||||
// key2: 0,
|
||||
// key3: 15,
|
||||
// key4: 5
|
||||
// },
|
||||
// {
|
||||
// date: '2025-08-18',
|
||||
// key1: 10,
|
||||
// key2: 0,
|
||||
// key3: 15,
|
||||
// key4: 5
|
||||
// },
|
||||
// {
|
||||
// date: '2025-08-17',
|
||||
// key1: 10,
|
||||
// key2: 0,
|
||||
// key3: 15,
|
||||
// key4: 5
|
||||
// }
|
||||
// ],
|
||||
// energy: [
|
||||
// {
|
||||
// date: '2025-08-30',
|
||||
// key1: '2',
|
||||
// key2: '2'
|
||||
// },
|
||||
// {
|
||||
// date: '2025-08-29',
|
||||
// key1: '2',
|
||||
// key2: '2'
|
||||
// },
|
||||
// {
|
||||
// date: '2025-08-28',
|
||||
// key1: '2',
|
||||
// key2: '2'
|
||||
// },
|
||||
// {
|
||||
// date: '2025-08-27',
|
||||
// key1: '2',
|
||||
// key2: '2'
|
||||
// },
|
||||
// {
|
||||
// date: '2025-08-26',
|
||||
// key1: '2',
|
||||
// key2: '2'
|
||||
// },
|
||||
// {
|
||||
// date: '2025-08-25',
|
||||
// key1: '2',
|
||||
// key2: '2'
|
||||
// },
|
||||
// {
|
||||
// date: '2025-08-24',
|
||||
// key1: '2',
|
||||
// key2: '2'
|
||||
// }
|
||||
// ],
|
||||
// charge: [
|
||||
// {
|
||||
// date: '2025-08-30',
|
||||
// key1: '2',
|
||||
// key2: '2'
|
||||
// },
|
||||
// {
|
||||
// date: '2025-08-29',
|
||||
// key1: '2',
|
||||
// key2: '2'
|
||||
// },
|
||||
// {
|
||||
// date: '2025-08-28',
|
||||
// key1: '2',
|
||||
// key2: '2'
|
||||
// },
|
||||
// {
|
||||
// date: '2025-08-27',
|
||||
// key1: '2',
|
||||
// key2: '2'
|
||||
// },
|
||||
// {
|
||||
// date: '2025-08-26',
|
||||
// key1: '2',
|
||||
// key2: '2'
|
||||
// },
|
||||
// {
|
||||
// date: '2025-08-25',
|
||||
// key1: '2',
|
||||
// key2: '2'
|
||||
// },
|
||||
// {
|
||||
// date: '2025-08-24',
|
||||
// key1: '2',
|
||||
// key2: '2'
|
||||
// }
|
||||
// ],
|
||||
// pv: [
|
||||
// {
|
||||
// date: '2025-08-30',
|
||||
// key1: '2',
|
||||
// key2: '2'
|
||||
// },
|
||||
// {
|
||||
// date: '2025-08-29',
|
||||
// key1: '2',
|
||||
// key2: '2'
|
||||
// },
|
||||
// {
|
||||
// date: '2025-08-28',
|
||||
// key1: '2',
|
||||
// key2: '2'
|
||||
// },
|
||||
// {
|
||||
// date: '2025-08-27',
|
||||
// key1: '2',
|
||||
// key2: '2'
|
||||
// },
|
||||
// {
|
||||
// date: '2025-08-26',
|
||||
// key1: '2',
|
||||
// key2: '2'
|
||||
// },
|
||||
// {
|
||||
// date: '2025-08-25',
|
||||
// key1: '2',
|
||||
// key2: '2'
|
||||
// },
|
||||
// {
|
||||
// date: '2025-08-24',
|
||||
// key1: '2',
|
||||
// key2: '2'
|
||||
// }
|
||||
// ],
|
||||
// allTotal: {}
|
||||
// }),
|
||||
this.getOnLineList(),
|
||||
this.getStatTotalList(),
|
||||
this.getStatDayList(1),
|
||||
@@ -355,7 +133,7 @@ export default {
|
||||
const res = await getReq('/api/queryStatSystem')
|
||||
if (res.errcode === 0) {
|
||||
this.deviceInfo.onLine = JSON.parse(JSON.stringify(res.data))
|
||||
this.deviceInfo.onLine.runDays = this.getRunDays(res.data.launch_date)
|
||||
this.deviceInfo.onLine.runDays = getRunDays(res.data.launch_date)
|
||||
console.log(JSON.parse(JSON.stringify(res.data)), this.deviceInfo.onLine, '111111111111')
|
||||
} else {
|
||||
throw res
|
||||
@@ -364,17 +142,7 @@ export default {
|
||||
this.deviceInfo.onLine = {}
|
||||
}
|
||||
},
|
||||
getRunDays(date) {
|
||||
const launchDate = new Date(date)
|
||||
const today = new Date() // 替换为当前日期
|
||||
|
||||
const timeDiff = today - launchDate // 毫秒差
|
||||
const daysRun = Math.ceil(timeDiff / (1000 * 60 * 60 * 24)) // 转换为天数
|
||||
|
||||
console.log(`从 2023-01-01 到今天已经运行了 ${daysRun} 天`)
|
||||
|
||||
return daysRun
|
||||
},
|
||||
// 查询系统累计统计信息
|
||||
async getStatTotalList() {
|
||||
try {
|
||||
@@ -417,16 +185,6 @@ export default {
|
||||
this.deviceInfo.allTotal.incomeCharge + this.deviceInfo.allTotal.incomeElect
|
||||
}
|
||||
},
|
||||
getDateDaysAgo(daysAgo) {
|
||||
const date = new Date()
|
||||
date.setDate(date.getDate() - daysAgo)
|
||||
|
||||
const year = date.getFullYear()
|
||||
const month = String(date.getMonth() + 1).padStart(2, '0')
|
||||
const day = String(date.getDate()).padStart(2, '0')
|
||||
|
||||
return `${year}-${month}-${day}`
|
||||
},
|
||||
|
||||
// 示例:获取7天前的日期
|
||||
// 查询场站日统计信息
|
||||
@@ -439,14 +197,26 @@ export default {
|
||||
const query = {
|
||||
stationId: this.stationId,
|
||||
category,
|
||||
start_date: this.getDateDaysAgo(7 - 1),
|
||||
end_date: this.getDateDaysAgo(0)
|
||||
start_date: getDateDaysAgo(7 - 1),
|
||||
end_date: getDateDaysAgo(0)
|
||||
}
|
||||
const arr = { 1: 'energy', 2: 'charge', 3: 'pv' }
|
||||
const res = await getReq('/api/queryStatDayList', query)
|
||||
if (res.errcode === 0) {
|
||||
this.list.forEach((item) => {
|
||||
this.deviceInfo[arr[category]] = res.data
|
||||
if (
|
||||
this.deviceInfo.energy.length &&
|
||||
this.deviceInfo.charge.length &&
|
||||
this.deviceInfo.pv.length
|
||||
) {
|
||||
const newArr = this.mergedArray(
|
||||
this.deviceInfo.energy,
|
||||
this.deviceInfo.charge,
|
||||
this.deviceInfo.pv
|
||||
)
|
||||
this.deviceInfo.alarm = newArr
|
||||
}
|
||||
})
|
||||
} else {
|
||||
throw res
|
||||
@@ -454,6 +224,24 @@ export default {
|
||||
} catch (error) {
|
||||
console.log(error)
|
||||
}
|
||||
},
|
||||
// 整合三个数组
|
||||
mergedArray(arr1, arr2, arr3) {
|
||||
const newArr = []
|
||||
arr1.forEach((item1, index) => {
|
||||
// 获取对应索引的 arr2 和 arr3 的对象
|
||||
const item2 = arr2[index] || {}
|
||||
const item3 = arr3[index] || {}
|
||||
|
||||
// 返回整合后的对象
|
||||
newArr.push({
|
||||
storage_num_err: item1.storage_num_err || '',
|
||||
solar_num_err: item2.solar_num_err || '',
|
||||
charge_num_err: item3.charge_num_err || '',
|
||||
dt: item1.dt
|
||||
})
|
||||
})
|
||||
return newArr
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,30 +1,196 @@
|
||||
<template>
|
||||
<div >
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template>
|
||||
<div class="user">
|
||||
<searchBox
|
||||
:btn-option-list="btnOptionList"
|
||||
@onSearch="onSearch"
|
||||
:search-options="searchOptions"
|
||||
@operateForm="operateForm"
|
||||
></searchBox>
|
||||
|
||||
<div class="content-table">
|
||||
<ComTable
|
||||
:columns="columns"
|
||||
:table-data="tableData"
|
||||
@handlePagesizeChange="handlePagesizeChange"
|
||||
ref="comTable"
|
||||
:table-option="tableOption"
|
||||
:page-option="pageOption"
|
||||
:table-h="tableH"
|
||||
>
|
||||
<template #gender="record">
|
||||
<!-- 0:女; 1:男 -->
|
||||
<span>{{ ['女', '男'][record.gender] }}</span>
|
||||
</template>
|
||||
|
||||
<template #action="record">
|
||||
<OperateCom :record="record" :operate-list="operateList" @operateForm="operateForm" />
|
||||
</template>
|
||||
</ComTable>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { columnList } from '../../../public/config/columnList'
|
||||
import { mapState } from 'vuex'
|
||||
import { getReq, postReq } from '@/request/api.js'
|
||||
import ComTable from '@/components/ComTable'
|
||||
import OperateCom from '@/components/OperateCom'
|
||||
|
||||
import searchBox from '@/components/SearchBox.vue'
|
||||
export default {
|
||||
name: '',
|
||||
components:{
|
||||
components: {
|
||||
searchBox,
|
||||
ComTable,
|
||||
OperateCom
|
||||
},
|
||||
props: {
|
||||
|
||||
},
|
||||
data() {
|
||||
props: {},
|
||||
data() {
|
||||
return {
|
||||
|
||||
pageOption:{},
|
||||
btnOptionList: [],
|
||||
paramsDate:{
|
||||
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState(['page', 'detailType', 'type'])
|
||||
},
|
||||
created() {
|
||||
let info = []
|
||||
let col = columnList.find((i) => i.page == 'user').columns
|
||||
if (col.length) {
|
||||
col.forEach((item) => {
|
||||
info.push(this.$setWidth(item))
|
||||
})
|
||||
}
|
||||
this.columns = info
|
||||
},
|
||||
|
||||
mounted() {
|
||||
|
||||
},
|
||||
methods:{
|
||||
|
||||
this.operateList = this.$getBtns(['查看', '编辑', '删除'])
|
||||
this.btnOptionList = this.$getBtns(['新增', '批量删除'])
|
||||
this.getList()
|
||||
},
|
||||
|
||||
methods: {
|
||||
async getList() {
|
||||
this.$refs.comTable.loading = true
|
||||
|
||||
const { page, pageSize } = this.pageOption
|
||||
|
||||
const params = {
|
||||
...this.paramsDate,
|
||||
page_size: pageSize,
|
||||
page
|
||||
}
|
||||
|
||||
try {
|
||||
const res = await getReq('/api/queryUserList',params)
|
||||
if (res.errcode === 0) {
|
||||
this.$refs.comTable.loading = false
|
||||
|
||||
this.tableData = res.data
|
||||
|
||||
this.pageOption = {
|
||||
page: res.page,
|
||||
pageSize: res.page_size,
|
||||
count: res.count
|
||||
}
|
||||
} else {
|
||||
const err = { tip: res.errmsg }
|
||||
throw err
|
||||
}
|
||||
} catch (error) {
|
||||
//统一处理报错提示
|
||||
}
|
||||
},
|
||||
operateForm(type, record = {}) {
|
||||
switch (type) {
|
||||
case 'detail':
|
||||
this.$store.commit('updateState', {
|
||||
detailType: 'edit', //edit or view
|
||||
page: 'detail',
|
||||
title: '查看',
|
||||
type: 'user'
|
||||
})
|
||||
|
||||
|
||||
|
||||
this.getRuleFormInfo(record)
|
||||
break
|
||||
|
||||
case 'back':
|
||||
this.$store.commit('updateState', {
|
||||
page: 'main'
|
||||
})
|
||||
this.isShowFlag = false
|
||||
this.getList()
|
||||
break
|
||||
|
||||
default:
|
||||
break
|
||||
}
|
||||
},
|
||||
async getRuleFormInfo(record) {
|
||||
function getInfo(data, url) {
|
||||
return new Promise((reslove, reject) => {
|
||||
getReq(data, url).then((res) => {
|
||||
reslove(res.data)
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
let row = {}
|
||||
if (record.id) {
|
||||
row = await getInfo({ id: record.id }, this.apiMethods[0].get)
|
||||
this.record = row
|
||||
this.$store.commit('updateState', {
|
||||
// 配电柜-集中器-查看
|
||||
title:
|
||||
(row.cabinetName ? row.cabinetName + '-' : '') +
|
||||
(row.name.split('集中器')[0] ? row.name.split('集中器')[0] : '') +
|
||||
'集中器-查看'
|
||||
})
|
||||
}
|
||||
let connectorType
|
||||
cabinetOptions.forEach((e, index) => {
|
||||
e.list.forEach((i) => {
|
||||
if (index == 1) {
|
||||
// 集中器状态
|
||||
if (i.key == 'ctrMode' || i.key == 'powerStatus') {
|
||||
e.ruleForm[i.key] = row.deviceStatus.lightStatus[i.key]
|
||||
} else {
|
||||
e.ruleForm[i.key] = row.deviceStatus[i.key]
|
||||
}
|
||||
} else if (i.key == 'connectorType') {
|
||||
connectorType = row.deviceExtend[i.key]
|
||||
e.ruleForm[i.key] = row.deviceExtend[i.key]
|
||||
} else {
|
||||
e.ruleForm[i.key] = row ? row[i.key] : ''
|
||||
e.ruleForm.id = row.id
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
// C型控制器,手自动状态和故障状态显示为“无”
|
||||
if (connectorType == 1) {
|
||||
cabinetOptions[1].ruleForm.status = 5
|
||||
cabinetOptions[1].ruleForm.ctrMode = 5
|
||||
}
|
||||
this.isShowFlag = true
|
||||
},
|
||||
handlePagesizeChange(pageOption) {
|
||||
this.pageOption.pageSize = pageOption.pageSize
|
||||
this.pageOption.page = pageOption.page
|
||||
|
||||
this.getList()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
|
||||
Reference in New Issue
Block a user