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-02 17:05:10 +08:00
parent cc9a30e205
commit 75fcddb6b7
9 changed files with 1405 additions and 183 deletions
Download Patch File Download Diff File Expand all files Collapse all files

344
web/src/components/ComTable.vue
View File

@@ -1,56 +1,54 @@
<template>
<div class="comtable" >
<div class="comtable">
<div class="table" ref="comtable">
<a-table
bordered
:loading="loading"
:columns="columns"
:scroll="scroll"
:data-source="data.realTableData"
:pagination="false"
:row-class-name="rowClassName"
row-key="id"
:expand-icon="expandIcon"
:row-selection="
data.newTableOpt.select
? {
selectedRowKeys: data.selectedRowKeys,
onChange: onSelectChange
}
: false
"
:expanded-row-keys="data.newTableOpt.expand?data.expandedKeys:null"
size="middle"
:indent-size="30"
@resizeColumn="handleResizeColumn"
>
<template #bodyCell="{ column, record }">
<template v-if="column.scopedSlots">
<slot
v-bind="record"
:name="column.scopedSlots ? column.scopedSlots.customRender : ''"
></slot>
</template>
</template>
<template v-if="data.newTableOpt.expand" #expandedRowRender="{ record }">
<a-table
size="small"
:columns="innerColumns"
:data-source="record.currentLimitList"
:pagination="false"
>
<template #bodyCell="{ column, record }">
<template v-if="column.key === 'type'">
<span>
{{ getType(record.type) }}
</span>
</template>
</template>
</a-table>
bordered
:loading="loading"
:columns="columns"
:scroll="scroll"
:data-source="data.realTableData"
:pagination="false"
:row-class-name="rowClassName"
row-key="id"
:expand-icon="expandIcon"
:row-selection="
data.newTableOpt.select
? {
selectedRowKeys: data.selectedRowKeys,
onChange: onSelectChange
}
: false
"
:expanded-row-keys="data.newTableOpt.expand ? data.expandedKeys : null"
size="middle"
:indent-size="30"
@resizeColumn="handleResizeColumn"
>
<template #bodyCell="{ column, record }">
<template v-if="column.scopedSlots">
<slot
v-bind="record"
:name="column.scopedSlots ? column.scopedSlots.customRender : ''"
></slot>
</template>
</a-table>
</template>
<template v-if="data.newTableOpt.expand" #expandedRowRender="{ record }">
<a-table
size="small"
:columns="innerColumns"
:data-source="record.currentLimitList"
:pagination="false"
>
<template #bodyCell="{ column, record_ }">
<template v-if="column.key === 'type'">
<span>
{{ getType(record_.type) }}
</span>
</template>
</template>
</a-table>
</template>
</a-table>
</div>
<div class="pagination" v-if="data.newTableOpt.page">
@@ -61,16 +59,20 @@
@change="onChange"
show-size-changer
show-quick-jumper
:show-total="(total) => `共 ${total} 条`"
:page-size-options="data.pageSizeOptions"
>
</a-pagination>
<div style="color: #7f8fa4; height: 30px; line-height: 30px; margin: 0 10px">
共<span style="color: aqua; font-size: 18px; margin: 0 2px">{{
data.newPageOption.total
}}</span
>页
</div>
</div>
</div>
</template>
<script setup>
// <a-select :dropdownMatchSelectWidth="false" size="small" placement="top" />
import {
nextTick,
@@ -81,13 +83,13 @@ import {
watch,
defineProps,
defineEmits,
defineExpose,
defineExpose
} from 'vue'
const comtable = ref('')
const props = defineProps({
columns: { type: Array },
tableData: { type: Array },
columns: { type: Array, default: () => [] },
tableData: { type: Array, default: () => [] },
tableOption: {
type: Object,
default: () => {
@@ -116,23 +118,22 @@ const props = defineProps({
default: () => {
return []
}
},
rowClick: {
default: () => {}
},
tableH: {
type: Number,
},
}
// rowClick: {
// default: () => {}
// },
// tableH: {
// type: Number,
// },
})
function handleResizeColumn(w, col) {
col.width = w
}
const mountedScroll = () => {
data.newColumns = [...props.columns]
data.realTableData = [...props.tableData]
// tableScoll()
// data.newColumns = [...props.columns]
// data.realTableData = [...props.tableData]
// // tableScoll()
}
const emit = defineEmits(['handlePagesizeChange'])
const data = reactive({
@@ -157,7 +158,7 @@ const data = reactive({
const loading = ref(false)
const scroll = ref({})
onMounted(async() => {
onMounted(async () => {
data.newColumns = [...props.columns]
data.realTableData = [...props.tableData]
await nextTick()
@@ -196,7 +197,7 @@ watch(
const pageH = data.newTableOpt.page ? 42 : 0
scroll.value = { y: n - pageH - 56 }
}
},
}
// { deep: true, immediate: true }
)
@@ -218,7 +219,6 @@ defineExpose({ ...toRefs(data), loading, mountedScroll, scroll: data.scroll })
</script>
<style lang="scss" scoped>
@use '../style/color.scss' as *;
.comtable {
border-radius: 8px;
font-size: 14px;
@@ -227,8 +227,8 @@ defineExpose({ ...toRefs(data), loading, mountedScroll, scroll: data.scroll })
display: flex;
flex-direction: column;
justify-content: space-between;
.table{
flex:1
.table {
flex: 1;
}
.pagination {
@@ -238,48 +238,41 @@ defineExpose({ ...toRefs(data), loading, mountedScroll, scroll: data.scroll })
// margin-bottom: 10px;
min-width: 420px;
height: 32px;
}
::v-deep .ant-table-thead > tr > th {
border-inline: 1px solid var(--theme-bg) !important;
background: var(--table-header-bg);
color: var(--theme-text-default);
border-bottom: none;
// &.ant-table-column-has-sorters{
// &::hover{
// background: var(--table-header-bg) !important;
// }
// }
&:last-child {
border-inline-end: 1.5px solid var(--table-header-bg) !important;
}
&:nth-last-child(2) {
border-inline-end: 1.5px solid var(--table-header-bg) !important;
}
:deep(.ant-table) {
border-radius:20px 20px 0 0 !important;
overflow: hidden; /* 确保圆角生效 */
}
:deep(.ant-table-container > .ant-table-content > table) {
border-inline-start: 1px solid var(--theme-bg) !important;
:deep(.ant-table-wrapper .ant-table.ant-table-bordered >.ant-table-container){
border-inline-start:none!important;
}
:deep(.ant-pagination-item-link) {
color: var(--theme-text-default) !important;
height: 100% !important;
display: block !important;
:deep(.ant-table-thead ){
background: linear-gradient(0deg, rgba(61, 254, 250, 0.2), rgba(61, 254, 250, 0.2)),
linear-gradient(
90deg,
rgba(61, 254, 250, 0) 0%,
rgba(0, 255, 251, 0.15) 50.17%,
rgba(61, 254, 250, 0) 100%
)!important;
}
:deep(.ant-table-thead > tr > th) {
border-inline: 1px solid transparent !important;
background: transparent;
color: #fff !important;
border-bottom: none !important; /* 可选：去除底部边框 */
}
}
:deep(
.ant-table-wrapper
.ant-table.ant-table-bordered
> .ant-table-container
> .ant-table-header
> table
) {
.ant-table-wrapper
.ant-table.ant-table-bordered
> .ant-table-container
> .ant-table-header
> table
) {
border-top: none !important;
border-inline-start: none !important;
}
:deep(.ant-checkbox-checked .ant-checkbox-inner) {
background-color: var(--table-header-bg) !important;
@@ -290,76 +283,80 @@ defineExpose({ ...toRefs(data), loading, mountedScroll, scroll: data.scroll })
}
:deep(.ant-pagination) {
.ant-pagination-item-link {
color: #fff !important;
height: 100% !important;
display: block !important;
}
.ant-pagination-prev,
.ant-pagination-next {
background: var(--theme-bg) !important;
color: var(--theme-text-default) !important;
background: transparent !important;
color: #fff !important;
border: 1px solid $page-border;
button {
box-sizing: border-box;
}
}
.ant-select-selector {
border: none !important;
}
.ant-select-arrow {
color: var(--theme-text-default) !important;
color: #fff !important;
}
span.ant-input-affix-wrapper,
.ant-select,
.ant-picker {
width: 110px !important;
border-radius: 8px !important;
}
.ant-select-selection-item {
color: var(--theme-text-default) !important;
color: #fff !important;
border: 1px solid $page-border;
}
.ant-select-single:not(.ant-select-customize-input) .ant-select-selector {
background-color: var(--theme-bg) !important;
border-radius: 8px !important;
background-color: transparent !important;
}
.ant-pagination-total-text,
.ant-pagination-options-quick-jumper {
color: var(--theme-text-default) !important;
color: #fff !important;
margin-inline-end: 9px !important;
}
.ant-pagination-options-quick-jumper input {
background-color: var(--theme-bg) !important;
border: none !important;
color: var(--theme-text-default) !important;
background-color: transparent !important;
// border: none !important;
color: #fff !important;
}
.ant-pagination-options .ant-pagination-options-size-changer .ant-select-selector {
color: var(--theme-text-default) !important;
background-color: var(--theme-bg) !important;
padding: 0px !important;
color: #fff !important;
background-color: transparent !important;
.ant-select-selection-item {
padding: 0 10px;
}
}
.ant-select-dropdown {
top: -210px !important;
}
.ant-pagination-item {
&:not(.ant-pagination-item-active):hover{
background: var(--theme-bg) !important;
.ant-pagination-item {
&:not(.ant-pagination-item-active):hover {
background: #1c797a !important;
}
a{
color: var(--theme-text-default) !important;
}
}
.ant-pagination-item-ellipsis {
color: var(--theme-text-default) !important;
}
.ant-pagination-item-active {
border-color: transparent !important;
font-size: 16px;
background: var(--theme-bg1) !important;
a {
color: var(--theme-text2) !important;
color: #fff;
border-radius: 2px;
background: #1c797a !important;
}
}
.ant-pagination-item-active {
border: 1px solid transparent;
color: #fff;
background: #1c797a !important;
}
}
:deep(
.ant-table.ant-table-bordered > .ant-table-container > .ant-table-header > table > thead > tr > th
) {
&:nth-last-child(2) {
border-inline-end: 1px solid var(--table-header-bg) !important;
}
:deep(.ant-table-wrapper .ant-table.ant-table-bordered >.ant-table-container >.ant-table-body >table >tbody>tr>td){
border-inline-end: none!important;
}
//表格样式
:deep(.ant-table-tbody) {
@@ -368,20 +365,18 @@ defineExpose({ ...toRefs(data), loading, mountedScroll, scroll: data.scroll })
> tr {
&:hover {
> .ant-table-cell {
background-color: var(--table-select) !important;
// background-color: red !important;
}
}
td {
border: 1px solid var(--theme-bg-default) !important; /* 第一行单元格边框为红色 */
}
}
// td.ant-table-cell.ant-table-cell-row-hover {
// // background-color: var(--table-select) !important;
// }
}
:deep(.ant-table-body) {
background: var(--theme-bg) !important;
color:#fff;
background: $table-bg !important;
border: 1px solid $table-border;
border-radius: 0px 0px 20px 20px;
.ant-table-cell {
background: var(--theme-bg) !important;
}
@@ -396,20 +391,21 @@ defineExpose({ ...toRefs(data), loading, mountedScroll, scroll: data.scroll })
padding: 8px !important;
margin: 0 !important;
}
}
:deep(.ant-table-wrapper .ant-table.ant-table-bordered > .ant-table-container) {
border-inline-start: none !important;
:deep(.ant-progress .ant-progress-text) {
color: var(--theme-text-default) !important;
.ant-empty-description{
color:#fff;
}
}
:deep(.ant-table-wrapper) {
.ant-table-cell-scrollbar,
.ant-table.ant-table-bordered > .ant-table-container {
box-shadow: none !important;
}
&>.ant-table-body >table >tbody>tr>td{
border-bottom: none !important;
}
}
}
:deep(.ant-table-wrapper .ant-table) {
@@ -417,28 +413,28 @@ defineExpose({ ...toRefs(data), loading, mountedScroll, scroll: data.scroll })
}
:deep(
.ant-table-wrapper
.ant-table.ant-table-bordered
> .ant-table-container
> .ant-table-body
> table
> tbody
> tr
> .ant-table-cell-fix-right-first::after
) {
border-inline-end: 1px solid var(--theme-bg) !important;
.ant-table-wrapper
.ant-table.ant-table-bordered
> .ant-table-container
> .ant-table-body
> table
> tbody
> tr
> .ant-table-cell-fix-right-first::after
) {
// border-inline-end: 1px solid var(--theme-bg) !important;
}
:deep(
.ant-table-wrapper
.ant-table.ant-table-bordered
> .ant-table-container
> .ant-table-header
> table
> thead
> tr
> .ant-table-cell-fix-right-first::after
) {
border-inline-end: 1px solid var(--theme-bg) !important;
.ant-table-wrapper
.ant-table.ant-table-bordered
> .ant-table-container
> .ant-table-header
> table
> thead
> tr
> .ant-table-cell-fix-right-first::after
) {
// border-inline-end: 1px solid var(--theme-bg) !important;
}
:deep(.ant-table-wrapper .ant-table-thead th.ant-table-column-has-sorters:hover) {

17
web/src/components/SearchBox.vue
View File

@@ -30,6 +30,7 @@
:show-time="{ format: 'HH:mm:ss' }"
value-format="YYYY-MM-DD HH:mm:ss"
v-model:value="formData[item.key]"
@change="$emit('onSearch', formData)"
/>
</div>
<!-- 输入框 -->
@@ -51,7 +52,7 @@
<!-- <div :class="[searchOptions.length > 4 ? 'top-right-column' : 'top-right']"> -->
<div class="top-right">
<a-button class="ant-btn-search" @click="changeData">
<!-- <a-button class="ant-btn-search" @click="changeData">
<template #icon>
<i class="iconfont icon-sousu btn-close" />
</template>
@@ -62,7 +63,7 @@
<i class="iconfont icon-chongzhi btn-close" />
</template>
重置
</a-button>
</a-button> -->
</div>
</div>
<div class="bottom">
@@ -187,6 +188,7 @@ input:-internal-autofill-selected {
color: var(--theme-text-default) !important;
}
.search {
color:#fff;
display: flex;
flex-direction: column;
justify-content: space-between;
@@ -229,6 +231,14 @@ input:-internal-autofill-selected {
.date-picker {
width: 360px;
.ant-picker{
background: transparent;
border: 1px solid #00B9D0;
.ant-picker-input >input{
color: #fff!important;
}
}
}
.ant-select,
@@ -243,8 +253,7 @@ input:-internal-autofill-selected {
}
.label {
width: 80px;
// margin-right: 20px;
width: 40px;
color: var(--theme-text-default);
}
.top-right,

450
web/src/components/statisticalAnalysis/energyEchart.vue Normal file
View File

@@ -0,0 +1,450 @@
<template>
<div class="content">
<div class="content-echarts">
<div v-for="(chart, index) in chartOptions" :key="index">
<div class="content-header">
<div class="verline"></div>
<span>{{ chart.title }}</span>
</div>
<div :ref="`chartContainer${index}`" class="chart-container"></div>
</div>
</div>
<div class="content-table">
<ComTable
:columns="columns"
:table-data="tableData"
@handlePagesizeChange="handlePagesizeChange"
ref="comTable"
:table-option="tableOption"
:page-option="pageOption"
:table-h="tableH"
></ComTable>
</div>
</div>
</template>
<script>
import {postReq} from '@/request/api'
import ComTable from '@/components/ComTable'
export default {
name: 'StatisicalAnView',
components: { ComTable },
props: {
tableInfo:{
type: Object,
default: () => ({}), // 默认空对象
required: false, // 非必须
},
columns: {
type: Array,
default: () => [], // 默认空对象
required: false // 非必须
},
chartOptions: {
type: Array,
default: () => [], // 默认空对象
required: false // 非必须
},
chartData: {
type: Object,
default: () => ({}), // 默认空对象
required: false // 非必须
}
},
data() {
return {
paramsDate: {},
tableData: [],
tableOption: {
scroll: {
x: 1500
}
},
tableH: 0,
pageOption: {
current: 1,
pageSize: 15,
total: 1
},
// chartOptions: [
// {
// title: '充放电分析',
// type: 'bar',
// dataKey: 'sales',
// infoKeys: [
// { key: 'key1', label: '日充电电量', lineColor: '#2A82E4' },
// { key: 'key2', label: '日放电电量', lineColor: '#5AABF2' }
// ]
// },
// {
// title: '运行状态分析',
// type: 'bar',
// dataKey: 'users',
// infoKeys: [
// { key: 'key1', label: '日故障次数', lineColor: '#0CDAF5' },
// { key: 'key2', label: '日充电工作时长', lineColor: '#2A82E4' },
// { 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: {
// 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: [
// { value: 40, name: 'A' },
// { value: 60, name: 'B' }
// ],
// stock: [30, 50, 80],
// yearly: [100, 120, 90, 110]
// },
chartInstances: [] // 存储 ECharts 实例
}
},
mounted() {
this.$nextTick(() => {
// 确保 DOM 完全渲染
this.initCharts()
window.addEventListener('resize', this.handleResize)
})
},
beforeUnmount() {
window.removeEventListener('resize', this.handleResize)
this.chartInstances.forEach((chart) => chart && chart.dispose())
},
methods: {
async getList() {
let that = this
this.$refs.comTable.loading = true
const query = {
...this.paramsDate,
pageSize: this.pageOption.pageSize,
pageNumber: this.pageOption.current
}
try {
const res = await postReq(query, this.tableInfo.getUrl)
if (res.code === 200) {
this.$refs.comTable.loading = false
this.tableData = res.data.records
this.pageOption = {
current: res.data.pageNumber,
pageSize: res.data.pageSize,
total: res.data.totalRow
}
this.getScrollDateFail = false
} else {
throw res
}
} catch (error) {
that.tableData = []
that.$refs.comTable.loading = false
}
},
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)
this.chartInstances.push(chart) // 存储实例
// 设置图表配置
chart.setOption({
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {
top: 20,
textStyle: {
color: '#fff'
}
},
grid: {
left: '3%',
right: '3%',
bottom: '5%',
containLabel: true
},
xAxis: {
type: 'category',
data: this.processData(option.infoKeys, option.dataKey, this.chartData[option.dataKey])
.dates,
axisLine: {
lineStyle: { type: 'dashed', color: '#435463' }
},
axisLabel: {
color: '#fff'
}
},
yAxis: {
type: 'value',
splitLine: {
lineStyle: { type: 'dashed', color: '#435463' }
},
axisLabel: {
color: '#fff'
}
},
series: option.infoKeys.map((info, i) => {
return {
name: info.label,
smooth: true,
type: option.type,
barWidth: 10,
itemStyle: {
borderRadius: [10, 10, 0, 0],
color: info.lineColor
},
emphasis: {
focus: 'series'
},
areaStyle: {
global: false,
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{ offset: 0, color: info.colorStart }, // 顶部颜色
{ offset: 1, color: info.colorEnd } // 底部颜色
]
}
},
global: false,
showSymbol: false,
data: this.processData(
option.infoKeys,
option.dataKey,
this.chartData[option.dataKey]
).values[i]
}
})
})
})
},
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)
})
const dates = data.map((item) => item.date)
const values = []
keys.forEach((item, index) => {
values[index] = data.map((dataValue) => dataValue[keys[index]])
})
console.log(dates, values, 'dates')
return {
dates,
values
}
},
handleResize() {
this.chartInstances.forEach((chart) => chart && chart.resize())
},
handlePagesizeChange(pageOption) {
this.pageOption.pageSize = pageOption.pageSize
this.pageOption.current = pageOption.current
this.getList()
}
}
}
</script>
<style lang="scss" scoped>
.content {
height: calc(100% - 38px);
overflow: scroll;
}
.content-echarts {
display: flex;
flex-wrap: wrap;
height: calc(750px - 38px);
color: #fff;
& > div {
padding: 20px 5px;
// margin-right: 10px;
background-color: rgba(33, 105, 195, 0.12);
border-radius: 2px;
width: calc(50% - 15px);
height: calc(50% - 10px);
&:nth-child(odd) {
margin-right: 10px;
}
.chart-container {
width: 100%;
height: 100%;
}
.content-header {
font-size: 12px;
display: flex;
align-items: center;
margin-left: 3%;
.verline {
margin-right: 10px;
background: linear-gradient(
180deg,
rgba(0, 230, 172, 1) 0%,
rgba(0, 210, 255, 1) 98.78%,
rgba(0, 210, 255, 1) 100%
),
rgba(1, 223, 239, 1);
width: 4px;
height: 20px;
border-radius: 6px;
}
}
}
}
.content-table {
margin-top: 20px;
min-height: 500px;
width: 100%;
padding-right: 10px;
}
</style>