mirror of
https://gitee.com/js-yhsec/energy_storage.git
synced 2026-05-27 18:59:26 +08:00
统计分析模块储能设备开发
This commit is contained in:
ym1026
@@ -1,5 +1,6 @@
|
||||
<template>
|
||||
<a-config-provider
|
||||
:locale="locale"
|
||||
:theme="{
|
||||
token: {
|
||||
colorPrimary: '#143d7d'
|
||||
@@ -9,6 +10,12 @@
|
||||
<router-view />
|
||||
</a-config-provider>
|
||||
</template>
|
||||
<script setup>
|
||||
import {ref} from 'vue'
|
||||
import zhCN from 'ant-design-vue/es/locale/zh_CN'
|
||||
const locale = ref(zhCN)
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
#app {
|
||||
|
||||
@@ -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) {
|
||||
|
||||
@@ -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
450
web/src/components/statisticalAnalysis/energyEchart.vue
Normal 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>
|
||||
@@ -26,6 +26,12 @@ export const routes = [
|
||||
title: '运行监控',
|
||||
component: () => import(/* webpackChunkName: "monitor" */ '@/views/monitor.vue')
|
||||
},
|
||||
{
|
||||
path: 'statisticalAnalysis',
|
||||
name: 'statisticalAnalysis',
|
||||
title: '统计分析',
|
||||
component: () => import(/* webpackChunkName: "monitor" */ '@/views/statisticalAnalysis.vue')
|
||||
},
|
||||
{
|
||||
path: 'system',
|
||||
name: 'system',
|
||||
|
||||
@@ -1,5 +1,12 @@
|
||||
$bg1-color:#052f4d;
|
||||
$bg2-color:#2169c31f;
|
||||
$bg3-color:#00d2ff1f;
|
||||
$bg1-color: #052f4d;
|
||||
$bg2-color: #2169c31f;
|
||||
$bg3-color: #00d2ff1f;
|
||||
|
||||
$text-color:#A6B8DD
|
||||
$text-color: #a6b8dd;
|
||||
|
||||
$green: #27a188;
|
||||
$tab-border: #1489c0;
|
||||
|
||||
$table-border: #1c797a;
|
||||
$table-bg: #072e4a;
|
||||
$page-border: #cad2dd;
|
||||
|
||||
39
web/src/utils/config.js
Normal file
39
web/src/utils/config.js
Normal file
@@ -0,0 +1,39 @@
|
||||
const copyRight =
|
||||
'Copyright © 2016-2024 Jiangsu YuHong.All Rights Reserved.江苏禹弘科技有限公司 版权所有'
|
||||
const companyName1 = '江苏禹弘科技有限公司'
|
||||
const copyRight1 = 'Copyright © 2016 - 2024'
|
||||
const themeColor = {
|
||||
'--theme-bg-default': { light: '#fff', dark: '#111111' },
|
||||
'--theme-bg': { light: '#eceff4', dark: '#2c2c2c' },
|
||||
'--theme-bg1': { light: '#065758', dark: '#065758' },
|
||||
'--theme-bg2': { light: '#0657584d', dark: '#CDDDDE' },
|
||||
'--theme-bg3': { light: '#00968826', dark: '#00968826' },
|
||||
'--theme-bg4': { light: 'rgba(6, 87, 88, 0.75)', dark: 'rgba(6, 87, 88, 0.75)' },
|
||||
|
||||
// 字体颜色
|
||||
'--theme-text-default': { light: '#000000', dark: '#ffffff' },
|
||||
'--theme-text': { light: '#065758', dark: '#065758' },
|
||||
'--theme-text1': { light: 'rgba(0,0,0,0.5)', dark: '#040909FF' },
|
||||
'--theme-text2': { light: '#ffffff', dark: '#ffffff' },
|
||||
'--theme-text3': { light: 'rgba(0,0,0,0.5)', dark: 'rgba(255,255,255,0.5)' },
|
||||
'--theme-text4': { light: 'rgba(0,0,0,0.75)', dark: 'rgba(255,255,255,0.75)' },
|
||||
'--theme-text5': { light: 'rgba(0,0,0,0.65)', dark: 'rgba(255,255,255,0.65)' },
|
||||
'--theme-text6': { light: 'rgba(0,0,0,0.3)', dark: 'rgba(255,255,255,0.3)' }, // placeholder颜色
|
||||
|
||||
// 按钮颜色
|
||||
'--theme-btn1': { light: '#FF921B', dark: '#FF921B' },
|
||||
'--theme-btn2': { light: '#ca4d2a', dark: '#ca4d2a' },
|
||||
'--theme-btn3': { light: '#065758', dark: '#065758' },
|
||||
|
||||
// 阴影颜色
|
||||
'--shadow-color1': { light: '#0657584d', dark: '#065758a6' },
|
||||
'--shadow-color': { light: 'rgba(0, 0, 0, 0.25)', dark: 'rgba(255, 255, 255, 0.25)' },
|
||||
|
||||
// 表格颜色
|
||||
'--table-header-bg': { light: '#5d9292', dark: '#065253' }, // 65%
|
||||
'--table-tag': { light: '#D6DEEB', dark: '#D6DEEB' },
|
||||
'--theme-opert-bg': { light: '#FFFFFF', dark: '#2c2c2c' },
|
||||
'--table-select': { light: '#c4d4d9', dark: '#384846' }
|
||||
}
|
||||
|
||||
export { copyRight, copyRight1, themeColor, companyName1 }
|
||||
@@ -51,7 +51,11 @@ export default {
|
||||
},
|
||||
{
|
||||
name: '运行监控',
|
||||
path: '/monitor'
|
||||
path: '/main/monitor'
|
||||
},
|
||||
{
|
||||
name: '统计分析',
|
||||
path: '/main/statisticalAnalysis'
|
||||
},
|
||||
{
|
||||
name: '系统管理',
|
||||
|
||||
704
web/src/views/statisticalAnalysis.vue
Normal file
704
web/src/views/statisticalAnalysis.vue
Normal file
@@ -0,0 +1,704 @@
|
||||
<template>
|
||||
<div class="statisicalAn">
|
||||
<div style="display: flex; justify-content: space-between">
|
||||
<div class="tab-header">
|
||||
<div v-for="item in tabList" :key="item.key" class="tab">
|
||||
<span
|
||||
:class="[activeKey == item.key ? 'actived' : 'uactived']"
|
||||
@click="activeKey = item.key"
|
||||
>{{ item.name }}</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<searchBox
|
||||
class="searchBox"
|
||||
ref="searchBox"
|
||||
:btn-option-list="[]"
|
||||
:search-options="searchOptions"
|
||||
:title-option="{ title: '', info: '' }"
|
||||
@onSearch="onSearch"
|
||||
>
|
||||
</searchBox>
|
||||
</div>
|
||||
<div class="content">
|
||||
<energyEchart
|
||||
:chart-options="echartsInfo[activeKey].chartOptions"
|
||||
:chart-data="echartsInfo[activeKey].chartData"
|
||||
:columns="tableList[activeKey].columns"
|
||||
:table-info="tableList[activeKey].tableInfo"
|
||||
></energyEchart>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import energyEchart from '@/components/statisticalAnalysis/energyEchart.vue'
|
||||
import searchBox from '@/components/SearchBox.vue'
|
||||
export default {
|
||||
name: 'StatisicalAnView',
|
||||
components: { energyEchart, searchBox },
|
||||
|
||||
data() {
|
||||
return {
|
||||
paramsDate: {},
|
||||
|
||||
searchOptions: [
|
||||
{
|
||||
label: '日期',
|
||||
type: 'datePick',
|
||||
value: [],
|
||||
key: 'time'
|
||||
}
|
||||
],
|
||||
echartsInfo: {
|
||||
0: {
|
||||
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: [
|
||||
{
|
||||
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
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
activeKey: '0',
|
||||
tabList: [
|
||||
{
|
||||
key: '0',
|
||||
name: '储能设备'
|
||||
},
|
||||
{
|
||||
key: '1',
|
||||
name: '光伏设备'
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
name: '充电设备'
|
||||
}
|
||||
],
|
||||
tableList: {
|
||||
0: {
|
||||
columns: [
|
||||
{
|
||||
title: '设备ID',
|
||||
dataIndex: 'key1',
|
||||
key: 'key1',
|
||||
width: 120,
|
||||
ellipsis: true
|
||||
},
|
||||
{
|
||||
title: '设备名称',
|
||||
dataIndex: 'key2',
|
||||
key: 'key2',
|
||||
width: 120,
|
||||
ellipsis: true
|
||||
},
|
||||
{
|
||||
title: '设备类型',
|
||||
dataIndex: 'key3',
|
||||
key: 'key3',
|
||||
width: 120,
|
||||
ellipsis: true
|
||||
},
|
||||
{
|
||||
title: '充电电量',
|
||||
dataIndex: 'key4',
|
||||
key: 'key4',
|
||||
width: 120,
|
||||
ellipsis: true
|
||||
},
|
||||
{
|
||||
title: '充电时长',
|
||||
dataIndex: 'key5',
|
||||
key: 'key5',
|
||||
width: 120,
|
||||
ellipsis: true
|
||||
},
|
||||
{
|
||||
title: '放电时长',
|
||||
dataIndex: 'key6',
|
||||
key: 'key6',
|
||||
width: 120,
|
||||
ellipsis: true
|
||||
},
|
||||
{
|
||||
title: '放电电量',
|
||||
dataIndex: 'key7',
|
||||
key: 'key7',
|
||||
width: 120,
|
||||
ellipsis: true
|
||||
},
|
||||
{
|
||||
title: '故障次数',
|
||||
dataIndex: 'key8',
|
||||
key: 'key8',
|
||||
width: 120,
|
||||
ellipsis: true
|
||||
},
|
||||
{
|
||||
title: '日期',
|
||||
dataIndex: 'key9',
|
||||
key: 'key9',
|
||||
width: 120,
|
||||
ellipsis: true
|
||||
}
|
||||
],
|
||||
tableInfo: {
|
||||
tableId: '',
|
||||
geturl: ''
|
||||
}
|
||||
|
||||
// tableData:[
|
||||
// {
|
||||
// key1:'1515151515',
|
||||
// key2:'设备1111',
|
||||
// key3:'类型',
|
||||
// key4:'电量',
|
||||
// key5:'时长',
|
||||
// key6:'时长',
|
||||
// key7:'dianl',
|
||||
// key8:'时长',
|
||||
// key9:'时长11',
|
||||
// },
|
||||
// {
|
||||
// key1:'1515151515',
|
||||
// key2:'设备1111',
|
||||
// key3:'类型',
|
||||
// key4:'电量',
|
||||
// key5:'时长',
|
||||
// key6:'时长',
|
||||
// key7:'dianl',
|
||||
// key8:'时长',
|
||||
// key9:'时长11',
|
||||
// },
|
||||
// {
|
||||
// key1:'1515151515',
|
||||
// key2:'设备1111',
|
||||
// key3:'类型',
|
||||
// key4:'电量',
|
||||
// key5:'时长',
|
||||
// key6:'时长',
|
||||
// key7:'dianl',
|
||||
// key8:'时长',
|
||||
// key9:'时长11',
|
||||
// },
|
||||
// {
|
||||
// key1:'1515151515',
|
||||
// key2:'设备1111',
|
||||
// key3:'类型',
|
||||
// key4:'电量',
|
||||
// key5:'时长',
|
||||
// key6:'时长',
|
||||
// key7:'dianl',
|
||||
// key8:'时长',
|
||||
// key9:'时长11',
|
||||
// },
|
||||
// ]
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {},
|
||||
beforeUnmount() {},
|
||||
methods: {
|
||||
onSearch(data) {
|
||||
this.paramsDate.startTime = data.time ? data.time[0] : ''
|
||||
this.paramsDate.endTime = data.time ? data.time[1] : ''
|
||||
this.pageOption.current = 1
|
||||
this.getList()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import url(@/style/color.scss);
|
||||
.statisicalAn {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 20px;
|
||||
background: $bg1-color;
|
||||
border-radius: 15px;
|
||||
.tab-header {
|
||||
display: flex;
|
||||
|
||||
.tab {
|
||||
& > span {
|
||||
font-size: 14px;
|
||||
margin-right: 15px;
|
||||
display: inline-block;
|
||||
padding: 10px 50px;
|
||||
cursor: pointer;
|
||||
border: 1px solid $tab-border;
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.actived {
|
||||
color: #ffffff;
|
||||
|
||||
background-color: $green;
|
||||
}
|
||||
.uactived {
|
||||
color: #a6b8dd;
|
||||
background-color: $bg2-color;
|
||||
}
|
||||
}
|
||||
.content {
|
||||
overflow: scroll;
|
||||
height: calc(100% - 15px);
|
||||
margin-top: 10px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user