Files
admin-govern/src/views/dashboard/index.vue
2023-12-27 15:06:23 +08:00

73 lines
2.1 KiB
Vue

<template>
<el-form :inline="true" :model="formInline" class="demo-form-inline">
<el-form-item label="区域">
<el-input v-model="formInline.deptInd" placeholder="请选择区域" clearable />
</el-form-item>
<el-form-item label="时间">
<el-date-picker v-model="formInline.searchBeginTime" type="date" placeholder="请选择时间" />
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">查询</el-button>
</el-form-item>
</el-form>
<el-tabs v-model="activeName" type="border-card">
<el-tab-pane label="图形" name="1">
<Echart :list="list" ref="echarts" />
</el-tab-pane>
<el-tab-pane label="表格" name="2">Config</el-tab-pane>
</el-tabs>
</template>
<script setup lang="ts">
import { onMounted, reactive, ref, onBeforeMount } from 'vue'
const activeName = ref('1')
import Echart from '@/views/dashboard/components/echart.vue'
import { getAreaCalculation } from '@/api/test'
const list = ref([])
const echarts = ref()
const formInline = reactive({
deptInd: '',
deptIndex: '5699e5916a18a6381e1ac92da5bd2628',
monitorFlag: 2,
powerFlag: 2,
serverName: 'event-boot',
searchBeginTime: '2023-12-01',
searchEndTime: '2023-12-26',
statisticalType: {
name: '电网拓扑',
id: 'cc28974d259ad22642f6a1bff708f967',
code: 'Power_Network',
value: 'cc28974d259ad22642f6a1bff708f967',
gvalue: null,
label: '电网拓扑',
sort: 0
},
timeFlag: 1
})
// const locale=zhCn
const onSubmit = async () => {
await getAreaCalculation(formInline).then(res => {
list.value = res.data
echarts.value.Processing(res.data.areaStatistics)
echarts.value.Grade(res.data.voltageStatistics)
echarts.value.Relation(res.data.monthlyStatistics)
})
}
onMounted(() => {
onSubmit()
})
</script>
<style lang="scss" scoped>
.bars_w {
width: 100%;
height: 500px;
}
::v-deep(.el-tabs__content) {
height: calc(100vh - 161px);
overflow-y: auto;
}
</style>