修改页面样式

src/views/Event-boot/Region/distribution.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="default-main">
-        <el-form :inline="true" :model="formInline" class="demo-form-inline">
+        <!-- <el-form :inline="true" :model="formInline" class="demo-form-inline">
             <el-form-item label="区域">
                 <Area v-model="formInline.deptIndex" ref="area" />
             </el-form-item>
@@ -13,14 +13,29 @@
                 >
                     <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item" />
                 </el-select>
-                <!-- <el-input v-model="formInline.statisticalType" placeholder="请选择区域" clearable /> -->
             </el-form-item>
-
             <el-form-item>
                 <el-button type="primary" @click="onSubmit">查询</el-button>
             </el-form-item>
-        </el-form>
-        <div v-loading="loading">
+        </el-form> -->
+        <TableHeader>
+            <template v-slot:select>
+                <el-form-item label="区域">
+                    <Area ref="area" v-model="tableStore.table.params.deptIndex" />
+                </el-form-item>
+                <el-form-item label="统计类型">
+                    <el-select
+                        v-model="tableStore.table.params.statisticalType"
+                        value-key="id"
+                        placeholder="请选择统计类型"
+                        size="large"
+                    >
+                        <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item" />
+                    </el-select>
+                </el-form-item>
+            </template>
+        </TableHeader>
+        <div v-loading="tableStore.table.loading">
             <el-row :gutter="10">
                 <el-col :span="12">
                     <MyEchartMap
@@ -62,13 +77,14 @@
     </div>
 </template>
 <script setup lang="ts">
+import TableHeader from '@/components/table/header/index.vue'
 import Area from '@/components/form/area/index.vue'
-import { getAreaLineDetail } from '@/api/Region'
 import { useDictData } from '@/stores/dictData'
 import { defaultAttribute } from '@/components/table/defaultAttribute'
 import MyEchartMap from '@/components/echarts/MyEchartMap.vue'
 import MyEchart from '@/components/echarts/MyEchart.vue'
-import { ref, reactive, onMounted, provide } from 'vue'
+import TableStore from '@/utils/tableStore'
+import { ref, onMounted, provide } from 'vue'
 import { mainHeight } from '@/utils/layout'
 defineOptions({
     name: 'Region/distribution'
@@ -79,37 +95,34 @@ const options = dictData.getBasicData('Statistical_Type', ['Report_Type'])
 const echartMapList = ref({})
 const echartList = ref({})
 const titleA = ref('')
-const distributionData = ref([])
+const distributionData: any = ref([])
 const area = ref()
-const loading = ref(true)
-
-const formInline = reactive({
-    deptIndex: dictData.state.area[0].id,
-    monitorFlag: 2,
-    powerFlag: 2,
-    serverName: 'event-boot',
-    statisticalType: dictData.getBasicData('Statistical_Type', ['Report_Type'])[0]
-})
-
-const onSubmit = () => {
-    loading.value = true
-    titleA.value = formInline.statisticalType.name
-    getAreaLineDetail(formInline).then(res => {
+const tableStore = new TableStore({
+    url: '/event-boot/area/getAreaLineDetail',
+    method: 'POST',
+    column: [],
+    loadCallback: () => {
+        titleA.value = tableStore.table.params.statisticalType.name
         area.value.change()
         // 处理地图数据
-        map(res)
-        tabulation(res)
-        histogram(res)
-
+        map(tableStore.table.data)
+        tabulation(tableStore.table.data)
+        histogram(tableStore.table.data)
         EchartMap.value.GetEchar(area.value.areaName)
-        loading.value = false
-    })
-}
+    }
+})
+provide('tableStore', tableStore)
+
+tableStore.table.params.deptIndex = dictData.state.area[0].id
+tableStore.table.params.statisticalType = dictData.getBasicData('Statistical_Type', ['Report_Type'])[0]
+tableStore.table.params.monitorFlag = 2
+tableStore.table.params.powerFlag = 2
+tableStore.table.params.serverName = 'event-boot'
 
 // 地图点击事件
 const getRegionByRegion = (list: any) => {
-    formInline.deptIndex = list.id
-    onSubmit()
+    tableStore.table.params.deptIndex = list.id
+    tableStore.onTableAction('search', {})
 }
 // 消除点
 const eliminate = (name: string) => {
@@ -158,8 +171,8 @@ const map = (res: any) => {
         }
     }
     let mapList = [[], [], []]
-    if (res.data.substationDetailVOList != null) {
-        res.data.substationDetailVOList.forEach((item: any) => {
+    if (res.substationDetailVOList != null) {
+        res.substationDetailVOList.forEach((item: any) => {
             if (item.color == 'green') {
                 mapList[0].push(item)
             } else if (item.color == 'red') {
@@ -225,12 +238,12 @@ const map = (res: any) => {
 // 表格数据处理
 const tabulation = (res: any) => {
     distributionData.value = []
-    for (var i = 0; i < res.data.areaValue.length; i++) {
+    for (var i = 0; i < res.areaValue.length; i++) {
         distributionData.value.push({
-            qy: res.data.areaValue[i][0],
-            jcd: res.data.areaValue[i][1],
-            zc: res.data.areaValue[i][2],
-            zd: res.data.areaValue[i][3]
+            qy: res.areaValue[i][0],
+            jcd: res.areaValue[i][1],
+            zc: res.areaValue[i][2],
+            zd: res.areaValue[i][3]
         })
     }
 }
@@ -305,15 +318,16 @@ const histogram = (res: any) => {
 }
 
 onMounted(() => {
-    onSubmit()
+    tableStore.index()
 })
-const layout = mainHeight(73) as any
+const layout = mainHeight(83) as any
+const layout1 = mainHeight(93) as any
 </script>
 <style lang="scss" scoped>
 .map {
     height: v-bind('layout.height');
 }
 .tall {
-    height: calc(v-bind('layout.height') / 2);
+    height: calc(v-bind('layout1.height') / 2);
 }
 </style>