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) {