修改页面样式

2024-01-05 13:56:33 +08:00
parent b2c3df56dc
commit b65691e062
11 changed files with 135 additions and 154 deletions
--- a/src/api/Region/index.ts
+++ b/src/api/Region/index.ts
@@ -1,10 +0,0 @@
-import createAxios from '@/utils/request'
-
-//监测网分布查询
-export function getAreaLineDetail(data:any) {
-    return createAxios({
-        url: '/event-boot/area/getAreaLineDetail',
-        method: 'post',
-        data
-    })
-}
--- a/src/api/test.ts
+++ b/src/api/test.ts
@@ -1,11 +0,0 @@
-import createAxios from '@/utils/request'
-
-//测试页面
-export function getAreaCalculation(data: anyObj) {
-  return createAxios({
-      url: '/event-boot/areaStatistics/getAreaCalculation',
-      method: 'post',
-      data
-  })
-}
- 
--- a/src/components/table/header/index.vue
+++ b/src/components/table/header/index.vue
@@ -1,42 +1,41 @@
 <template>
-    <div ref='tableHeader' class='cn-table-header'>
+    <div ref="tableHeader" class="cn-table-header">
        <!-- 通用搜索 -->
-        <transition name='el-zoom-in-bottom' mode='out-in'>
-            <div id='table-com-search1' class='table-com-search' v-show='showSelect'>
-            </div>
+        <transition name="el-zoom-in-bottom" mode="out-in">
+            <div id="table-com-search1" class="table-com-search" v-show="showSelect"></div>
        </transition>
-        <div class='table-header ba-scroll-style'>
-            <div id='table-com-search2' style='flex: 1; height: 32px; overflow: hidden; margin-right: 20px'>
+        <div class="table-header ba-scroll-style">
+            <div id="table-com-search2" style="flex: 1; height: 32px; overflow: hidden; margin-right: 20px">
                <el-form
-                    id='header-form'
-                    @submit.prevent=''
-                    @keyup.enter='onComSearch'
-                    label-position='left'
-                    :inline='true'
-                    class='table-com-search-form'
-                    :label-width='90'
+                    id="header-form"
+                    @submit.prevent=""
+                    @keyup.enter="onComSearch"
+                    label-position="left"
+                    :inline="true"
+                    class="table-com-search-form"
+                    :label-width="90"
                >
-                    <el-form-item label='日期' v-if='datePicker' style='grid-column: span 2; max-width: unset'>
-                        <DatePicker ref='Picker'></DatePicker>
+                    <el-form-item label="日期" v-if="datePicker" style="grid-column: span 2; max-width: unset">
+                        <DatePicker ref="Picker"></DatePicker>
                    </el-form-item>
-                    <slot name='select'></slot>
+                    <slot name="select"></slot>
                </el-form>
            </div>
-            <template v-if='$slots.select'>
-                <el-button @click='onComSearch' type='primary'>查询</el-button>
-                <el-button @click='onResetForm'>重置</el-button>
-                <div class='table-search-button-group' v-if='showUnfoldButton'>
-                    <el-button class='table-search-button-item' color='#dcdfe6' plain @click='showSelectChange'>
-                        <Icon size='14' name='el-icon-Search' />
+            <template v-if="$slots.select">
+                <el-button @click="onComSearch" type="primary">查询</el-button>
+                <el-button @click="onResetForm">重置</el-button>
+                <div class="table-search-button-group" v-if="showUnfoldButton">
+                    <el-button class="table-search-button-item" color="#dcdfe6" plain @click="showSelectChange">
+                        <Icon size="14" name="el-icon-Search" />
                    </el-button>
                </div>
            </template>
-            <slot name='operation'></slot>
+            <slot name="operation"></slot>
        </div>
    </div>
 </template>

-<script setup lang='ts'>
+<script setup lang="ts">
 import { inject, ref, onMounted, nextTick, onUnmounted } from 'vue'
 import type TableStore from '@/utils/tableStore'
 import DatePicker from '@/components/form/datePicker/index.vue'
@@ -69,8 +68,11 @@ const resizeObserver = new ResizeObserver(entries => {
 })
 const showUnfoldButton = ref(false)
 onMounted(() => {
+    if (props.datePicker) {
        tableStore.table.params.searchBeginTime = Picker.value.timeValue[0]
        tableStore.table.params.searchEndTime = Picker.value.timeValue[1]
+        tableStore.table.params.timeFlag = Picker.value.timeFlag
+    }
    nextTick(() => {
        resizeObserver.observe(tableHeader.value)
        const dom = document.getElementById('header-form') as HTMLElement
@@ -102,10 +104,12 @@ const showSelectChange = () => {
    }
 }
 const onComSearch = async () => {
-    console.log('时间1233123')
-
+    if (props.datePicker) {
        tableStore.table.params.searchBeginTime = Picker.value.timeValue[0]
        tableStore.table.params.searchEndTime = Picker.value.timeValue[1]
+        tableStore.table.params.timeFlag = Picker.value.timeFlag
+    }
+
    await tableStore.onTableAction('search', {})
 }
 const onResetForm = () => {
@@ -117,7 +121,7 @@ const dateChange = () => {
 }
 </script>

-<style scoped lang='scss'>
+<style scoped lang="scss">
 .table-header {
    position: relative;
    overflow-x: auto;
@@ -148,7 +152,7 @@ const dateChange = () => {
    font-size: 14px;
 }

-.table-com-search-form{
+.table-com-search-form {
    display: grid;
    grid-gap: 20px;
    grid-template-columns: repeat(5, 1fr);
--- a/src/styles/app.scss
+++ b/src/styles/app.scss
@@ -45,6 +45,7 @@ body,
 }

 .default-main {
+    background: #fff;
    margin: var(--ba-main-space) var(--ba-main-space) 0px var(--ba-main-space);
 }
 .zoom-handle {
@@ -120,7 +121,7 @@ body,
    padding-top: 20px;
    padding-bottom: 52px;
 }
-.ba-operate-dialog .el-dialog__body  .el-scrollbar{
+.ba-operate-dialog .el-dialog__body .el-scrollbar {
    padding-right: 60px;
 }
 .ba-operate-dialog .el-dialog__footer {
--- a/src/styles/element.scss
+++ b/src/styles/element.scss
@@ -91,3 +91,4 @@
    background: var(--el-color-primary);
    color: var(--el-color-white);
 }
+
--- a/src/styles/vxeTable.scss
+++ b/src/styles/vxeTable.scss
@@ -1,16 +1,11 @@
 .vxe-table--body-wrapper::-webkit-scrollbar {
-    width:10px;
+    width: 10px;
+    height: 10px;
 }

 .vxe-table--body-wrapper::-webkit-scrollbar-thumb {
    border-radius: 5px;
    height: 3px;
-    background-color: #059f95 !important;
+    background-color: var(--el-color-primary) !important;
    border-radius: 30px !important;
 }
-
-.vxe-table--body-wrapper::-webkit-scrollbar-track {
-    box-shadow: inset 0 0 5px rgb(174, 173, 173);
-    border-radius: 2px;
-    background: rgb(235, 233, 233);
-}
--- a/src/views/Event-boot/Region/distribution.vue
+++ b/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>
--- a/src/views/dashboard/components/Tableabove.vue
+++ b/src/views/dashboard/components/Tableabove.vue
@@ -47,9 +47,9 @@ import { ref, reactive, defineExpose, computed } from 'vue'
 import { defaultAttribute } from '@/components/table/defaultAttribute'
 import { mainHeight } from '@/utils/layout'

-const areaData = ref([])
-const levelData = ref([])
-const shareData = ref([])
+const areaData:any = ref([])
+const levelData:any = ref([])
+const shareData:any = ref([])

 const tableHeaderAera = ref<any[]>([
    { prop: 'areaName', label: '区域名称', width: '120px' },
@@ -105,8 +105,8 @@ const formatter = (row: any) => {
    }
 }
 defineExpose({ info })
-const layout = mainHeight(175) as any
-const defaultMain = mainHeight(185) as any
+const layout = mainHeight(185) as any
+const defaultMain = mainHeight(195) as any
 </script>
 <style lang="scss" scoped>
 ::v-deep(.el-tabs--left, ) {
--- a/src/views/dashboard/components/echart.vue
+++ b/src/views/dashboard/components/echart.vue
@@ -192,7 +192,7 @@ const Relation = (list: any, interval: number) => {
    })
    monthlyStatistics.value = {
        title: {
-            text: interval == 1 ? '年份' : interval == 2 ? '季度' : interval == 3 ? '月份' : ''
+            text: '时间'
        },
        tooltip: {
            formatter: function (params: any) {
@@ -283,7 +283,7 @@ const Relation = (list: any, interval: number) => {
 }
 // Processing()
 defineExpose({ Processing, Grade, Relation })
-const layout = mainHeight(140) as any
+const layout = mainHeight(150) as any
 </script>

 <style lang="scss" scoped>
--- a/src/views/dashboard/index.vue
+++ b/src/views/dashboard/index.vue
@@ -1,17 +1,13 @@
 <template>
    <div class="default-main">
-        <el-form :inline="true" :model="formInline" class="demo-form-inline">
+        <TableHeader date-picker>
+            <template v-slot:select>
                <el-form-item label="区域">
-                <Area v-model="formInline.deptIndex" />
+                    <Area v-model="tableStore.table.params.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">
+            </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>
--- a/src/views/voltage/sags/operationsManagement/statistics.vue
+++ b/src/views/voltage/sags/operationsManagement/statistics.vue
@@ -411,6 +411,6 @@ const layout = mainHeight(104) as any
    grid-template-columns: 1fr 600px;
    grid-template-rows: 1fr 1fr;
    grid-gap: 10px;
-    background: #fff;
+ 
 }
 </style>