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>
|
<template>
|
||||||
<a-config-provider
|
<a-config-provider
|
||||||
|
:locale="locale"
|
||||||
:theme="{
|
:theme="{
|
||||||
token: {
|
token: {
|
||||||
colorPrimary: '#143d7d'
|
colorPrimary: '#143d7d'
|
||||||
@@ -9,6 +10,12 @@
|
|||||||
<router-view />
|
<router-view />
|
||||||
</a-config-provider>
|
</a-config-provider>
|
||||||
</template>
|
</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">
|
<style lang="scss">
|
||||||
#app {
|
#app {
|
||||||
|
|||||||
@@ -1,56 +1,54 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="comtable" >
|
<div class="comtable">
|
||||||
<div class="table" ref="comtable">
|
<div class="table" ref="comtable">
|
||||||
<a-table
|
<a-table
|
||||||
bordered
|
bordered
|
||||||
:loading="loading"
|
:loading="loading"
|
||||||
:columns="columns"
|
:columns="columns"
|
||||||
:scroll="scroll"
|
:scroll="scroll"
|
||||||
:data-source="data.realTableData"
|
:data-source="data.realTableData"
|
||||||
:pagination="false"
|
:pagination="false"
|
||||||
:row-class-name="rowClassName"
|
:row-class-name="rowClassName"
|
||||||
row-key="id"
|
row-key="id"
|
||||||
:expand-icon="expandIcon"
|
:expand-icon="expandIcon"
|
||||||
:row-selection="
|
:row-selection="
|
||||||
data.newTableOpt.select
|
data.newTableOpt.select
|
||||||
? {
|
? {
|
||||||
selectedRowKeys: data.selectedRowKeys,
|
selectedRowKeys: data.selectedRowKeys,
|
||||||
onChange: onSelectChange
|
onChange: onSelectChange
|
||||||
}
|
}
|
||||||
: false
|
: false
|
||||||
"
|
"
|
||||||
:expanded-row-keys="data.newTableOpt.expand?data.expandedKeys:null"
|
:expanded-row-keys="data.newTableOpt.expand ? data.expandedKeys : null"
|
||||||
size="middle"
|
size="middle"
|
||||||
:indent-size="30"
|
:indent-size="30"
|
||||||
@resizeColumn="handleResizeColumn"
|
@resizeColumn="handleResizeColumn"
|
||||||
>
|
>
|
||||||
<template #bodyCell="{ column, record }">
|
<template #bodyCell="{ column, record }">
|
||||||
<template v-if="column.scopedSlots">
|
<template v-if="column.scopedSlots">
|
||||||
<slot
|
<slot
|
||||||
v-bind="record"
|
v-bind="record"
|
||||||
:name="column.scopedSlots ? column.scopedSlots.customRender : ''"
|
:name="column.scopedSlots ? column.scopedSlots.customRender : ''"
|
||||||
></slot>
|
></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>
|
|
||||||
</template>
|
</template>
|
||||||
|
</template>
|
||||||
</a-table>
|
<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>
|
||||||
|
|
||||||
<div class="pagination" v-if="data.newTableOpt.page">
|
<div class="pagination" v-if="data.newTableOpt.page">
|
||||||
@@ -61,16 +59,20 @@
|
|||||||
@change="onChange"
|
@change="onChange"
|
||||||
show-size-changer
|
show-size-changer
|
||||||
show-quick-jumper
|
show-quick-jumper
|
||||||
:show-total="(total) => `共 ${total} 条`"
|
|
||||||
:page-size-options="data.pageSizeOptions"
|
:page-size-options="data.pageSizeOptions"
|
||||||
>
|
>
|
||||||
</a-pagination>
|
</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>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
|
|
||||||
// <a-select :dropdownMatchSelectWidth="false" size="small" placement="top" />
|
// <a-select :dropdownMatchSelectWidth="false" size="small" placement="top" />
|
||||||
import {
|
import {
|
||||||
nextTick,
|
nextTick,
|
||||||
@@ -81,13 +83,13 @@ import {
|
|||||||
watch,
|
watch,
|
||||||
defineProps,
|
defineProps,
|
||||||
defineEmits,
|
defineEmits,
|
||||||
defineExpose,
|
defineExpose
|
||||||
} from 'vue'
|
} from 'vue'
|
||||||
|
|
||||||
const comtable = ref('')
|
const comtable = ref('')
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
columns: { type: Array },
|
columns: { type: Array, default: () => [] },
|
||||||
tableData: { type: Array },
|
tableData: { type: Array, default: () => [] },
|
||||||
tableOption: {
|
tableOption: {
|
||||||
type: Object,
|
type: Object,
|
||||||
default: () => {
|
default: () => {
|
||||||
@@ -116,23 +118,22 @@ const props = defineProps({
|
|||||||
default: () => {
|
default: () => {
|
||||||
return []
|
return []
|
||||||
}
|
}
|
||||||
},
|
}
|
||||||
rowClick: {
|
// rowClick: {
|
||||||
default: () => {}
|
// default: () => {}
|
||||||
},
|
// },
|
||||||
tableH: {
|
// tableH: {
|
||||||
type: Number,
|
// type: Number,
|
||||||
|
|
||||||
},
|
|
||||||
|
|
||||||
|
// },
|
||||||
})
|
})
|
||||||
function handleResizeColumn(w, col) {
|
function handleResizeColumn(w, col) {
|
||||||
col.width = w
|
col.width = w
|
||||||
}
|
}
|
||||||
const mountedScroll = () => {
|
const mountedScroll = () => {
|
||||||
data.newColumns = [...props.columns]
|
// data.newColumns = [...props.columns]
|
||||||
data.realTableData = [...props.tableData]
|
// data.realTableData = [...props.tableData]
|
||||||
// tableScoll()
|
// // tableScoll()
|
||||||
}
|
}
|
||||||
const emit = defineEmits(['handlePagesizeChange'])
|
const emit = defineEmits(['handlePagesizeChange'])
|
||||||
const data = reactive({
|
const data = reactive({
|
||||||
@@ -157,7 +158,7 @@ const data = reactive({
|
|||||||
const loading = ref(false)
|
const loading = ref(false)
|
||||||
const scroll = ref({})
|
const scroll = ref({})
|
||||||
|
|
||||||
onMounted(async() => {
|
onMounted(async () => {
|
||||||
data.newColumns = [...props.columns]
|
data.newColumns = [...props.columns]
|
||||||
data.realTableData = [...props.tableData]
|
data.realTableData = [...props.tableData]
|
||||||
await nextTick()
|
await nextTick()
|
||||||
@@ -196,7 +197,7 @@ watch(
|
|||||||
const pageH = data.newTableOpt.page ? 42 : 0
|
const pageH = data.newTableOpt.page ? 42 : 0
|
||||||
scroll.value = { y: n - pageH - 56 }
|
scroll.value = { y: n - pageH - 56 }
|
||||||
}
|
}
|
||||||
},
|
}
|
||||||
// { deep: true, immediate: true }
|
// { deep: true, immediate: true }
|
||||||
)
|
)
|
||||||
|
|
||||||
@@ -218,7 +219,6 @@ defineExpose({ ...toRefs(data), loading, mountedScroll, scroll: data.scroll })
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
@use '../style/color.scss' as *;
|
|
||||||
.comtable {
|
.comtable {
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
@@ -227,8 +227,8 @@ defineExpose({ ...toRefs(data), loading, mountedScroll, scroll: data.scroll })
|
|||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
.table{
|
.table {
|
||||||
flex:1
|
flex: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pagination {
|
.pagination {
|
||||||
@@ -238,48 +238,41 @@ defineExpose({ ...toRefs(data), loading, mountedScroll, scroll: data.scroll })
|
|||||||
// margin-bottom: 10px;
|
// margin-bottom: 10px;
|
||||||
min-width: 420px;
|
min-width: 420px;
|
||||||
height: 32px;
|
height: 32px;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
::v-deep .ant-table-thead > tr > th {
|
:deep(.ant-table) {
|
||||||
border-inline: 1px solid var(--theme-bg) !important;
|
border-radius:20px 20px 0 0 !important;
|
||||||
background: var(--table-header-bg);
|
overflow: hidden; /* 确保圆角生效 */
|
||||||
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-wrapper .ant-table.ant-table-bordered >.ant-table-container){
|
||||||
:deep(.ant-table-container > .ant-table-content > table) {
|
border-inline-start:none!important;
|
||||||
border-inline-start: 1px solid var(--theme-bg) !important;
|
|
||||||
}
|
}
|
||||||
:deep(.ant-pagination-item-link) {
|
:deep(.ant-table-thead ){
|
||||||
color: var(--theme-text-default) !important;
|
background: linear-gradient(0deg, rgba(61, 254, 250, 0.2), rgba(61, 254, 250, 0.2)),
|
||||||
|
linear-gradient(
|
||||||
height: 100% !important;
|
90deg,
|
||||||
display: block !important;
|
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(
|
:deep(
|
||||||
.ant-table-wrapper
|
.ant-table-wrapper
|
||||||
.ant-table.ant-table-bordered
|
.ant-table.ant-table-bordered
|
||||||
> .ant-table-container
|
> .ant-table-container
|
||||||
> .ant-table-header
|
> .ant-table-header
|
||||||
> table
|
> table
|
||||||
) {
|
) {
|
||||||
border-top: none !important;
|
border-top: none !important;
|
||||||
|
border-inline-start: none !important;
|
||||||
}
|
}
|
||||||
:deep(.ant-checkbox-checked .ant-checkbox-inner) {
|
:deep(.ant-checkbox-checked .ant-checkbox-inner) {
|
||||||
background-color: var(--table-header-bg) !important;
|
background-color: var(--table-header-bg) !important;
|
||||||
@@ -290,76 +283,80 @@ defineExpose({ ...toRefs(data), loading, mountedScroll, scroll: data.scroll })
|
|||||||
}
|
}
|
||||||
|
|
||||||
:deep(.ant-pagination) {
|
:deep(.ant-pagination) {
|
||||||
|
.ant-pagination-item-link {
|
||||||
|
color: #fff !important;
|
||||||
|
height: 100% !important;
|
||||||
|
display: block !important;
|
||||||
|
}
|
||||||
.ant-pagination-prev,
|
.ant-pagination-prev,
|
||||||
.ant-pagination-next {
|
.ant-pagination-next {
|
||||||
background: var(--theme-bg) !important;
|
background: transparent !important;
|
||||||
color: var(--theme-text-default) !important;
|
color: #fff !important;
|
||||||
|
border: 1px solid $page-border;
|
||||||
|
button {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
.ant-select-selector {
|
.ant-select-selector {
|
||||||
border: none !important;
|
border: none !important;
|
||||||
}
|
}
|
||||||
.ant-select-arrow {
|
.ant-select-arrow {
|
||||||
color: var(--theme-text-default) !important;
|
color: #fff !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
span.ant-input-affix-wrapper,
|
span.ant-input-affix-wrapper,
|
||||||
.ant-select,
|
.ant-select,
|
||||||
.ant-picker {
|
.ant-picker {
|
||||||
width: 110px !important;
|
width: 110px !important;
|
||||||
border-radius: 8px !important;
|
|
||||||
}
|
}
|
||||||
.ant-select-selection-item {
|
.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 {
|
.ant-select-single:not(.ant-select-customize-input) .ant-select-selector {
|
||||||
background-color: var(--theme-bg) !important;
|
background-color: transparent !important;
|
||||||
border-radius: 8px !important;
|
|
||||||
}
|
}
|
||||||
.ant-pagination-total-text,
|
.ant-pagination-total-text,
|
||||||
.ant-pagination-options-quick-jumper {
|
.ant-pagination-options-quick-jumper {
|
||||||
color: var(--theme-text-default) !important;
|
color: #fff !important;
|
||||||
margin-inline-end: 9px !important;
|
margin-inline-end: 9px !important;
|
||||||
}
|
}
|
||||||
.ant-pagination-options-quick-jumper input {
|
.ant-pagination-options-quick-jumper input {
|
||||||
background-color: var(--theme-bg) !important;
|
background-color: transparent !important;
|
||||||
border: none !important;
|
// border: none !important;
|
||||||
color: var(--theme-text-default) !important;
|
color: #fff !important;
|
||||||
}
|
}
|
||||||
.ant-pagination-options .ant-pagination-options-size-changer .ant-select-selector {
|
.ant-pagination-options .ant-pagination-options-size-changer .ant-select-selector {
|
||||||
color: var(--theme-text-default) !important;
|
padding: 0px !important;
|
||||||
background-color: var(--theme-bg) !important;
|
color: #fff !important;
|
||||||
|
background-color: transparent !important;
|
||||||
|
|
||||||
|
.ant-select-selection-item {
|
||||||
|
padding: 0 10px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
.ant-select-dropdown {
|
.ant-select-dropdown {
|
||||||
top: -210px !important;
|
top: -210px !important;
|
||||||
}
|
}
|
||||||
.ant-pagination-item {
|
.ant-pagination-item {
|
||||||
&:not(.ant-pagination-item-active):hover{
|
&:not(.ant-pagination-item-active):hover {
|
||||||
background: var(--theme-bg) !important;
|
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 {
|
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(
|
:deep(.ant-table-wrapper .ant-table.ant-table-bordered >.ant-table-container >.ant-table-body >table >tbody>tr>td){
|
||||||
.ant-table.ant-table-bordered > .ant-table-container > .ant-table-header > table > thead > tr > th
|
border-inline-end: none!important;
|
||||||
) {
|
|
||||||
&:nth-last-child(2) {
|
|
||||||
border-inline-end: 1px solid var(--table-header-bg) !important;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
//表格样式
|
//表格样式
|
||||||
:deep(.ant-table-tbody) {
|
:deep(.ant-table-tbody) {
|
||||||
@@ -368,20 +365,18 @@ defineExpose({ ...toRefs(data), loading, mountedScroll, scroll: data.scroll })
|
|||||||
> tr {
|
> tr {
|
||||||
&:hover {
|
&:hover {
|
||||||
> .ant-table-cell {
|
> .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) {
|
: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 {
|
.ant-table-cell {
|
||||||
background: var(--theme-bg) !important;
|
background: var(--theme-bg) !important;
|
||||||
}
|
}
|
||||||
@@ -396,20 +391,21 @@ defineExpose({ ...toRefs(data), loading, mountedScroll, scroll: data.scroll })
|
|||||||
padding: 8px !important;
|
padding: 8px !important;
|
||||||
margin: 0 !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) {
|
.ant-empty-description{
|
||||||
color: var(--theme-text-default) !important;
|
color:#fff;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
:deep(.ant-table-wrapper) {
|
:deep(.ant-table-wrapper) {
|
||||||
.ant-table-cell-scrollbar,
|
.ant-table-cell-scrollbar,
|
||||||
.ant-table.ant-table-bordered > .ant-table-container {
|
.ant-table.ant-table-bordered > .ant-table-container {
|
||||||
box-shadow: none !important;
|
box-shadow: none !important;
|
||||||
}
|
|
||||||
|
|
||||||
|
&>.ant-table-body >table >tbody>tr>td{
|
||||||
|
border-bottom: none !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
:deep(.ant-table-wrapper .ant-table) {
|
:deep(.ant-table-wrapper .ant-table) {
|
||||||
@@ -417,28 +413,28 @@ defineExpose({ ...toRefs(data), loading, mountedScroll, scroll: data.scroll })
|
|||||||
}
|
}
|
||||||
|
|
||||||
:deep(
|
:deep(
|
||||||
.ant-table-wrapper
|
.ant-table-wrapper
|
||||||
.ant-table.ant-table-bordered
|
.ant-table.ant-table-bordered
|
||||||
> .ant-table-container
|
> .ant-table-container
|
||||||
> .ant-table-body
|
> .ant-table-body
|
||||||
> table
|
> table
|
||||||
> tbody
|
> tbody
|
||||||
> tr
|
> tr
|
||||||
> .ant-table-cell-fix-right-first::after
|
> .ant-table-cell-fix-right-first::after
|
||||||
) {
|
) {
|
||||||
border-inline-end: 1px solid var(--theme-bg) !important;
|
// border-inline-end: 1px solid var(--theme-bg) !important;
|
||||||
}
|
}
|
||||||
:deep(
|
:deep(
|
||||||
.ant-table-wrapper
|
.ant-table-wrapper
|
||||||
.ant-table.ant-table-bordered
|
.ant-table.ant-table-bordered
|
||||||
> .ant-table-container
|
> .ant-table-container
|
||||||
> .ant-table-header
|
> .ant-table-header
|
||||||
> table
|
> table
|
||||||
> thead
|
> thead
|
||||||
> tr
|
> tr
|
||||||
> .ant-table-cell-fix-right-first::after
|
> .ant-table-cell-fix-right-first::after
|
||||||
) {
|
) {
|
||||||
border-inline-end: 1px solid var(--theme-bg) !important;
|
// border-inline-end: 1px solid var(--theme-bg) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
:deep(.ant-table-wrapper .ant-table-thead th.ant-table-column-has-sorters:hover) {
|
:deep(.ant-table-wrapper .ant-table-thead th.ant-table-column-has-sorters:hover) {
|
||||||
|
|||||||
@@ -30,6 +30,7 @@
|
|||||||
:show-time="{ format: 'HH:mm:ss' }"
|
:show-time="{ format: 'HH:mm:ss' }"
|
||||||
value-format="YYYY-MM-DD HH:mm:ss"
|
value-format="YYYY-MM-DD HH:mm:ss"
|
||||||
v-model:value="formData[item.key]"
|
v-model:value="formData[item.key]"
|
||||||
|
@change="$emit('onSearch', formData)"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<!-- 输入框 -->
|
<!-- 输入框 -->
|
||||||
@@ -51,7 +52,7 @@
|
|||||||
|
|
||||||
<!-- <div :class="[searchOptions.length > 4 ? 'top-right-column' : 'top-right']"> -->
|
<!-- <div :class="[searchOptions.length > 4 ? 'top-right-column' : 'top-right']"> -->
|
||||||
<div class="top-right">
|
<div class="top-right">
|
||||||
<a-button class="ant-btn-search" @click="changeData">
|
<!-- <a-button class="ant-btn-search" @click="changeData">
|
||||||
<template #icon>
|
<template #icon>
|
||||||
<i class="iconfont icon-sousu btn-close" />
|
<i class="iconfont icon-sousu btn-close" />
|
||||||
</template>
|
</template>
|
||||||
@@ -62,7 +63,7 @@
|
|||||||
<i class="iconfont icon-chongzhi btn-close" />
|
<i class="iconfont icon-chongzhi btn-close" />
|
||||||
</template>
|
</template>
|
||||||
重置
|
重置
|
||||||
</a-button>
|
</a-button> -->
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="bottom">
|
<div class="bottom">
|
||||||
@@ -187,6 +188,7 @@ input:-internal-autofill-selected {
|
|||||||
color: var(--theme-text-default) !important;
|
color: var(--theme-text-default) !important;
|
||||||
}
|
}
|
||||||
.search {
|
.search {
|
||||||
|
color:#fff;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
@@ -229,6 +231,14 @@ input:-internal-autofill-selected {
|
|||||||
|
|
||||||
.date-picker {
|
.date-picker {
|
||||||
width: 360px;
|
width: 360px;
|
||||||
|
|
||||||
|
.ant-picker{
|
||||||
|
background: transparent;
|
||||||
|
border: 1px solid #00B9D0;
|
||||||
|
.ant-picker-input >input{
|
||||||
|
color: #fff!important;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.ant-select,
|
.ant-select,
|
||||||
@@ -243,8 +253,7 @@ input:-internal-autofill-selected {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.label {
|
.label {
|
||||||
width: 80px;
|
width: 40px;
|
||||||
// margin-right: 20px;
|
|
||||||
color: var(--theme-text-default);
|
color: var(--theme-text-default);
|
||||||
}
|
}
|
||||||
.top-right,
|
.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: '运行监控',
|
title: '运行监控',
|
||||||
component: () => import(/* webpackChunkName: "monitor" */ '@/views/monitor.vue')
|
component: () => import(/* webpackChunkName: "monitor" */ '@/views/monitor.vue')
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
path: 'statisticalAnalysis',
|
||||||
|
name: 'statisticalAnalysis',
|
||||||
|
title: '统计分析',
|
||||||
|
component: () => import(/* webpackChunkName: "monitor" */ '@/views/statisticalAnalysis.vue')
|
||||||
|
},
|
||||||
{
|
{
|
||||||
path: 'system',
|
path: 'system',
|
||||||
name: 'system',
|
name: 'system',
|
||||||
|
|||||||
@@ -1,5 +1,12 @@
|
|||||||
$bg1-color:#052f4d;
|
$bg1-color: #052f4d;
|
||||||
$bg2-color:#2169c31f;
|
$bg2-color: #2169c31f;
|
||||||
$bg3-color:#00d2ff1f;
|
$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: '运行监控',
|
name: '运行监控',
|
||||||
path: '/monitor'
|
path: '/main/monitor'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '统计分析',
|
||||||
|
path: '/main/statisticalAnalysis'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: '系统管理',
|
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