Web/admin-govern
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修改页面样式

Browse Source
This commit is contained in:
GGJ
2024-01-05 13:56:33 +08:00
parent b2c3df56dc
commit b65691e062
11 changed files with 135 additions and 154 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/api/Region/index.ts
View File

@@ -1,10 +0,0 @@
import createAxios from '@/utils/request'
//监测网分布查询
export function getAreaLineDetail(data:any) {
return createAxios({
url: '/event-boot/area/getAreaLineDetail',
method: 'post',
data
})
}

11
src/api/test.ts
View File

@@ -1,11 +0,0 @@
import createAxios from '@/utils/request'
//测试页面
export function getAreaCalculation(data: anyObj) {
return createAxios({
url: '/event-boot/areaStatistics/getAreaCalculation',
method: 'post',
data
})
}

66
src/components/table/header/index.vue
View File

@@ -1,42 +1,41 @@
<template> <template>
<div ref='tableHeader' class='cn-table-header'> <div ref="tableHeader" class="cn-table-header">
<!-- 通用搜索 --> <!-- 通用搜索 -->
<transition name='el-zoom-in-bottom' mode='out-in'> <transition name="el-zoom-in-bottom" mode="out-in">
<div id='table-com-search1' class='table-com-search' v-show='showSelect'> <div id="table-com-search1" class="table-com-search" v-show="showSelect"></div>
</div>
</transition> </transition>
<div class='table-header ba-scroll-style'> <div class="table-header ba-scroll-style">
<div id='table-com-search2' style='flex: 1; height: 32px; overflow: hidden; margin-right: 20px'> <div id="table-com-search2" style="flex: 1; height: 32px; overflow: hidden; margin-right: 20px">
<el-form <el-form
id='header-form' id="header-form"
@submit.prevent='' @submit.prevent=""
@keyup.enter='onComSearch' @keyup.enter="onComSearch"
label-position='left' label-position="left"
:inline='true' :inline="true"
class='table-com-search-form' class="table-com-search-form"
:label-width='90' :label-width="90"
> >
<el-form-item label='日期' v-if='datePicker' style='grid-column: span 2; max-width: unset'> <el-form-item label="日期" v-if="datePicker" style="grid-column: span 2; max-width: unset">
<DatePicker ref='Picker'></DatePicker> <DatePicker ref="Picker"></DatePicker>
</el-form-item> </el-form-item>
<slot name='select'></slot> <slot name="select"></slot>
</el-form> </el-form>
</div> </div>
<template v-if='$slots.select'> <template v-if="$slots.select">
<el-button @click='onComSearch' type='primary'>查询</el-button> <el-button @click="onComSearch" type="primary">查询</el-button>
<el-button @click='onResetForm'>重置</el-button> <el-button @click="onResetForm">重置</el-button>
<div class='table-search-button-group' v-if='showUnfoldButton'> <div class="table-search-button-group" v-if="showUnfoldButton">
<el-button class='table-search-button-item' color='#dcdfe6' plain @click='showSelectChange'> <el-button class="table-search-button-item" color="#dcdfe6" plain @click="showSelectChange">
<Icon size='14' name='el-icon-Search' /> <Icon size="14" name="el-icon-Search" />
</el-button> </el-button>
</div> </div>
</template> </template>
<slot name='operation'></slot> <slot name="operation"></slot>
</div> </div>
</div> </div>
</template> </template>
<script setup lang='ts'> <script setup lang="ts">
import { inject, ref, onMounted, nextTick, onUnmounted } from 'vue' import { inject, ref, onMounted, nextTick, onUnmounted } from 'vue'
import type TableStore from '@/utils/tableStore' import type TableStore from '@/utils/tableStore'
import DatePicker from '@/components/form/datePicker/index.vue' import DatePicker from '@/components/form/datePicker/index.vue'
@@ -69,8 +68,11 @@ const resizeObserver = new ResizeObserver(entries => {
}) })
const showUnfoldButton = ref(false) const showUnfoldButton = ref(false)
onMounted(() => { onMounted(() => {
tableStore.table.params.searchBeginTime = Picker.value.timeValue[0] if (props.datePicker) {
tableStore.table.params.searchEndTime = Picker.value.timeValue[1] tableStore.table.params.searchBeginTime = Picker.value.timeValue[0]
tableStore.table.params.searchEndTime = Picker.value.timeValue[1]
tableStore.table.params.timeFlag = Picker.value.timeFlag
}
nextTick(() => { nextTick(() => {
resizeObserver.observe(tableHeader.value) resizeObserver.observe(tableHeader.value)
const dom = document.getElementById('header-form') as HTMLElement const dom = document.getElementById('header-form') as HTMLElement
@@ -102,10 +104,12 @@ const showSelectChange = () => {
} }
} }
const onComSearch = async () => { 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
}
tableStore.table.params.searchBeginTime = Picker.value.timeValue[0]
tableStore.table.params.searchEndTime = Picker.value.timeValue[1]
await tableStore.onTableAction('search', {}) await tableStore.onTableAction('search', {})
} }
const onResetForm = () => { const onResetForm = () => {
@@ -117,7 +121,7 @@ const dateChange = () => {
} }
</script> </script>
<style scoped lang='scss'> <style scoped lang="scss">
.table-header { .table-header {
position: relative; position: relative;
overflow-x: auto; overflow-x: auto;
@@ -148,7 +152,7 @@ const dateChange = () => {
font-size: 14px; font-size: 14px;
} }
.table-com-search-form{ .table-com-search-form {
display: grid; display: grid;
grid-gap: 20px; grid-gap: 20px;
grid-template-columns: repeat(5, 1fr); grid-template-columns: repeat(5, 1fr);

3
src/styles/app.scss
View File

@@ -45,6 +45,7 @@ body,
} }
.default-main { .default-main {
background: #fff;
margin: var(--ba-main-space) var(--ba-main-space) 0px var(--ba-main-space); margin: var(--ba-main-space) var(--ba-main-space) 0px var(--ba-main-space);
} }
.zoom-handle { .zoom-handle {
@@ -120,7 +121,7 @@ body,
padding-top: 20px; padding-top: 20px;
padding-bottom: 52px; padding-bottom: 52px;
} }
.ba-operate-dialog .el-dialog__body .el-scrollbar{ .ba-operate-dialog .el-dialog__body .el-scrollbar {
padding-right: 60px; padding-right: 60px;
} }
.ba-operate-dialog .el-dialog__footer { .ba-operate-dialog .el-dialog__footer {

1
src/styles/element.scss
View File

@@ -91,3 +91,4 @@
background: var(--el-color-primary); background: var(--el-color-primary);
color: var(--el-color-white); color: var(--el-color-white);
} }

11
src/styles/vxeTable.scss
View File

@@ -1,16 +1,11 @@
.vxe-table--body-wrapper::-webkit-scrollbar { .vxe-table--body-wrapper::-webkit-scrollbar {
width:10px; width: 10px;
height: 10px;
} }
.vxe-table--body-wrapper::-webkit-scrollbar-thumb { .vxe-table--body-wrapper::-webkit-scrollbar-thumb {
border-radius: 5px; border-radius: 5px;
height: 3px; height: 3px;
background-color: #059f95 !important; background-color: var(--el-color-primary) !important;
border-radius: 30px !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);
}

96
src/views/Event-boot/Region/distribution.vue
View File

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

10
src/views/dashboard/components/Tableabove.vue
View File

@@ -47,9 +47,9 @@ import { ref, reactive, defineExpose, computed } from 'vue'
import { defaultAttribute } from '@/components/table/defaultAttribute' import { defaultAttribute } from '@/components/table/defaultAttribute'
import { mainHeight } from '@/utils/layout' import { mainHeight } from '@/utils/layout'
const areaData = ref([]) const areaData:any = ref([])
const levelData = ref([]) const levelData:any = ref([])
const shareData = ref([]) const shareData:any = ref([])
const tableHeaderAera = ref<any[]>([ const tableHeaderAera = ref<any[]>([
{ prop: 'areaName', label: '区域名称', width: '120px' }, { prop: 'areaName', label: '区域名称', width: '120px' },
@@ -105,8 +105,8 @@ const formatter = (row: any) => {
} }
} }
defineExpose({ info }) defineExpose({ info })
const layout = mainHeight(175) as any const layout = mainHeight(185) as any
const defaultMain = mainHeight(185) as any const defaultMain = mainHeight(195) as any
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
::v-deep(.el-tabs--left, ) { ::v-deep(.el-tabs--left, ) {

4
src/views/dashboard/components/echart.vue
View File

@@ -192,7 +192,7 @@ const Relation = (list: any, interval: number) => {
}) })
monthlyStatistics.value = { monthlyStatistics.value = {
title: { title: {
text: interval == 1 ? '年份' : interval == 2 ? '季度' : interval == 3 ? '月份' : '' text: '时间'
}, },
tooltip: { tooltip: {
formatter: function (params: any) { formatter: function (params: any) {
@@ -283,7 +283,7 @@ const Relation = (list: any, interval: number) => {
} }
// Processing() // Processing()
defineExpose({ Processing, Grade, Relation }) defineExpose({ Processing, Grade, Relation })
const layout = mainHeight(140) as any const layout = mainHeight(150) as any
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>

75
src/views/dashboard/index.vue
View File

@@ -1,17 +1,13 @@
<template> <template>
<div class="default-main"> <div class="default-main">
<el-form :inline="true" :model="formInline" class="demo-form-inline"> <TableHeader date-picker>
<el-form-item label="区域"> <template v-slot:select>
<Area v-model="formInline.deptIndex" /> <el-form-item label="区域">
</el-form-item> <Area v-model="tableStore.table.params.deptIndex" />
<el-form-item label="时间"> </el-form-item>
<DatePicker ref="Picker" /> </template>
</el-form-item> </TableHeader>
<el-form-item> <el-tabs v-model="activeName" type="border-card" v-loading="tableStore.table.loading">
<el-button type="primary" @click="onSubmit">查询</el-button>
</el-form-item>
</el-form>
<el-tabs v-model="activeName" type="border-card" v-loading="loading">
<el-tab-pane label="图形" name="1"> <el-tab-pane label="图形" name="1">
<Echart :list="list" ref="echarts" /> <Echart :list="list" ref="echarts" />
</el-tab-pane> </el-tab-pane>
@@ -21,56 +17,47 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import TableHeader from '@/components/table/header/index.vue'
import Area from '@/components/form/area/index.vue' import Area from '@/components/form/area/index.vue'
import { useDictData } from '@/stores/dictData' import { useDictData } from '@/stores/dictData'
import Echart from '@/views/dashboard/components/echart.vue' import Echart from '@/views/dashboard/components/echart.vue'
import Tableabove from '@/views/dashboard/components/Tableabove.vue' import Tableabove from '@/views/dashboard/components/Tableabove.vue'
import DatePicker from '@/components/form/datePicker/index.vue' import TableStore from '@/utils/tableStore'
import { onMounted, reactive, ref, onBeforeMount } from 'vue' import { onMounted, reactive, ref, provide } from 'vue'
import { mainHeight } from '@/utils/layout' import { mainHeight } from '@/utils/layout'
defineOptions({ defineOptions({
name: 'Region/overview' name: 'Region/overview'
}) })
const activeName = ref('1') const activeName = ref('1')
import { getAreaCalculation } from '@/api/test'
const list = ref([]) const list = ref([])
const echarts = ref() const echarts = ref()
const Picker = ref() const Picker = ref()
const table = ref() const table = ref()
const dictData = useDictData() const dictData = useDictData()
const loading = ref(true)
const formInline = reactive({ const tableStore = new TableStore({
deptInd: '', url: '/event-boot/areaStatistics/getAreaCalculation',
deptIndex: dictData.state.area[0].id, method: 'POST',
monitorFlag: 2, column: [],
powerFlag: 2, loadCallback: () => {
serverName: 'event-boot', list.value = tableStore.table.data
searchBeginTime: '', echarts.value.Processing(tableStore.table.data.areaStatistics)
searchEndTime: '', echarts.value.Grade(tableStore.table.data.voltageStatistics)
statisticalType: dictData.getBasicData('Statistical_Type', ['Load_Type'])[3], echarts.value.Relation(tableStore.table.data.monthlyStatistics)
timeFlag: 1 table.value.info(tableStore.table.data)
}
}) })
provide('tableStore', tableStore)
// const locale=zhCn tableStore.table.params.deptIndex = dictData.state.area[0].id
const onSubmit = async () => { tableStore.table.params.statisticalType = dictData.getBasicData('Statistical_Type', ['Load_Type'])[3]
loading.value = true tableStore.table.params.monitorFlag = 2
formInline.searchBeginTime = Picker.value.timeValue[0] tableStore.table.params.powerFlag = 2
formInline.searchEndTime = Picker.value.timeValue[1] tableStore.table.params.serverName = 'event-boot'
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
})
}
onMounted(() => { onMounted(() => {
onSubmit() tableStore.index()
}) })
const layout = mainHeight(113) as any const layout = mainHeight(123) as any
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>

2
src/views/voltage/sags/operationsManagement/statistics.vue
View File

@@ -411,6 +411,6 @@ const layout = mainHeight(104) as any
grid-template-columns: 1fr 600px; grid-template-columns: 1fr 600px;
grid-template-rows: 1fr 1fr; grid-template-rows: 1fr 1fr;
grid-gap: 10px; grid-gap: 10px;
background: #fff;
} }
</style> </style>