修改页面样式

src/views/dashboard/index.vue

@@ -1,17 +1,13 @@
 <template>
     <div class="default-main">
-        <el-form :inline="true" :model="formInline" class="demo-form-inline">
-            <el-form-item label="区域">
-                <Area v-model="formInline.deptIndex" />
-            </el-form-item>
-            <el-form-item label="时间">
-                <DatePicker ref="Picker" />
-            </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" v-loading="loading">
+        <TableHeader date-picker>
+            <template v-slot:select>
+                <el-form-item label="区域">
+                    <Area v-model="tableStore.table.params.deptIndex" />
+                </el-form-item>
+            </template>
+        </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>
@@ -21,56 +17,47 @@
 </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/dashboard/components/echart.vue'
 import Tableabove from '@/views/dashboard/components/Tableabove.vue'
-import DatePicker from '@/components/form/datePicker/index.vue'
-import { onMounted, reactive, ref, onBeforeMount } from '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')
-import { getAreaCalculation } from '@/api/test'
 const list = ref([])
 const echarts = ref()
 const Picker = ref()
 const table = ref()
 const dictData = useDictData()
-const loading = ref(true)
-const formInline = reactive({
-    deptInd: '',
-    deptIndex: dictData.state.area[0].id,
-    monitorFlag: 2,
-    powerFlag: 2,
-    serverName: 'event-boot',
-    searchBeginTime: '',
-    searchEndTime: '',
-    statisticalType: dictData.getBasicData('Statistical_Type', ['Load_Type'])[3],
-    timeFlag: 1
+
+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)
 
-// const locale=zhCn
-const onSubmit = async () => {
-    loading.value = true
-    formInline.searchBeginTime = Picker.value.timeValue[0]
-    formInline.searchEndTime = Picker.value.timeValue[1]
-    formInline.timeFlag = Picker.value.timeFlag
-    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,Picker.value.interval)
-        table.value.info(res.data)
-        loading.value = false
-    })
-}
-
+tableStore.table.params.deptIndex = dictData.state.area[0].id
+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(() => {
-    onSubmit()
+    tableStore.index()
 })
-const layout = mainHeight(113) as any
+const layout = mainHeight(123) as any
 </script>
 
 <style lang="scss" scoped>