admin-govern/src/views/dashboard/index.vue

<template>
    <div class="default-main">
        <TableHeader date-picker area></TableHeader>
        <el-tabs v-model="activeName" type="border-card" v-loading="tableStore.table.loading">
            <el-tab-pane label="图形" name="1">
                <Echart :list="list" ref="echarts" />
            </el-tab-pane>
            <el-tab-pane label="表格" name="2"><Tableabove ref="table" /></el-tab-pane>
        </el-tabs>
    </div>
</template>

<script setup lang="ts">
import TableHeader from '@/components/table/header/index.vue'
import Area from '@/components/form/area/index.vue'
import { useDictData } from '@/stores/dictData'
import Echart from '@/views/Event-boot/Region/components/echart.vue'
import Tableabove from '@/views/Event-boot/Region/components/Tableabove.vue'
import TableStore from '@/utils/tableStore'
import { onMounted, reactive, ref, provide } from 'vue'
import { mainHeight } from '@/utils/layout'
defineOptions({
    name: 'Region/overview'
})
const activeName = ref('1')
const list = ref([])
const echarts = ref()
const Picker = ref()
const table = ref()
const dictData = useDictData()

const tableStore = new TableStore({
    url: '/event-boot/areaStatistics/getAreaCalculation',
    method: 'POST',
    column: [],
    loadCallback: () => {
        list.value = tableStore.table.data
        echarts.value.Processing(tableStore.table.data.areaStatistics)
        echarts.value.Grade(tableStore.table.data.voltageStatistics)
        echarts.value.Relation(tableStore.table.data.monthlyStatistics)
        table.value.info(tableStore.table.data)
    }
})
provide('tableStore', tableStore)

tableStore.table.params.statisticalType = dictData.getBasicData('Statistical_Type', ['Load_Type'])[3]
tableStore.table.params.monitorFlag = 2
tableStore.table.params.powerFlag = 2
tableStore.table.params.serverName = 'event-boot'
onMounted(() => {
    tableStore.index()
})
const layout = mainHeight(123) as any
</script>

<style lang="scss" scoped>
.bars_w {
    width: 100%;
    height: 500px;
}
::v-deep(.el-tabs__content) {
    height: v-bind('layout.height');
    overflow-y: auto;
}
</style>