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 16:32:18 +08:00
parent 1d4bc5d442
commit 1fe43e1d70
7 changed files with 533 additions and 229 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
src/components/echarts/MyEchart.vue
View File

@@ -11,10 +11,10 @@ const chartRef = ref<HTMLDivElement>()
const props = defineProps(['options']) const props = defineProps(['options'])
let chart: echarts.ECharts | any = null let chart: echarts.ECharts | any = null
const resizeHandler = () => { const resizeHandler = () => {
chart.getZr().painter.getViewportRoot().style.display = "none"; chart.getZr().painter.getViewportRoot().style.display = 'none'
requestAnimationFrame(() => { requestAnimationFrame(() => {
chart.resize() chart.resize()
chart.getZr().painter.getViewportRoot().style.display = ""; chart.getZr().painter.getViewportRoot().style.display = ''
}) })
} }
const initChart = () => { const initChart = () => {
@@ -28,7 +28,7 @@ const initChart = () => {
color: '#000', color: '#000',
fontSize: 18 fontSize: 18
}, },
...props.options.title ...(props.options.title || null)
}, },
tooltip: { tooltip: {
trigger: 'axis', trigger: 'axis',
@@ -116,7 +116,7 @@ const initChart = () => {
opacity: 0.5 opacity: 0.5
} }
}, },
...(props.options.yAxis || null), ...(props.options.yAxis || null)
} }
], ],
dataZoom: [ dataZoom: [
@@ -125,13 +125,15 @@ const initChart = () => {
height: 13, height: 13,
start: 0, start: 0,
bottom: '20px', bottom: '20px',
end: 100 end: 100,
...(props.options.dataZoom || null)
}, },
{ {
start: 0, start: 0,
height: 13, height: 13,
bottom: '20px', bottom: '20px',
end: 100 end: 100,
...(props.options.dataZoom|| null)
} }
], ],
color: [ color: [

452
src/layouts/admin/index.vue
View File

@@ -1,8 +1,8 @@
<template> <template>
<component :is='config.layout.layoutMode'></component> <component :is="config.layout.layoutMode"></component>
</template> </template>
<script setup lang='ts'> <script setup lang="ts">
import { reactive } from 'vue' import { reactive } from 'vue'
import { useConfig } from '@/stores/config' import { useConfig } from '@/stores/config'
import { useNavTabs } from '@/stores/navTabs' import { useNavTabs } from '@/stores/navTabs'
@@ -58,226 +58,240 @@ const init = async () => {
* 后台初始化请求，获取站点配置，动态路由等信息 * 后台初始化请求，获取站点配置，动态路由等信息
*/ */
getRouteMenu().then((res: any) => { getRouteMenu().then((res: any) => {
// const arr = [ const arr = [
// { {
// id: 1, id: 1,
// pid: 0, pid: 0,
// type: 'menu', type: 'menu',
// title: '控制台', title: '控制台',
// name: 'dashboard', name: 'dashboard',
// path: 'dashboard', path: 'dashboard',
// icon: 'fa fa-dashboard', icon: 'fa fa-dashboard',
// menu_type: 'tab', menu_type: 'tab',
// url: '', url: '',
// component: '/src/views/dashboard/index.vue', component: '/src/views/Event-boot/Region/overview.vue',
// keepalive: 'dashboard', keepalive: 'dashboard',
// extend: 'none', extend: 'none',
// children: [] children: []
// }, },
// { {
// id: 3, id: 3,
// pid: 0, pid: 0,
// type: 'menu', type: 'menu',
// title: '审计管理', title: '审计管理',
// name: 'test', name: 'test',
// path: 'test', path: 'test',
// icon: 'el-icon-List', icon: 'el-icon-List',
// menu_type: 'tab', menu_type: 'tab',
// url: '', url: '',
// component: '/src/views/dashboard/test.vue', component: '/src/views/dashboard/test.vue',
// keepalive: 'test', keepalive: 'test',
// extend: 'none', extend: 'none',
// children: [ children: [
// { {
// id: 1, id: 1,
// pid: 3, pid: 3,
// type: 'menu', type: 'menu',
// title: '审计列表', title: '审计列表',
// name: 'comptroller/list', name: 'comptroller/list',
// path: 'comptroller/list', path: 'comptroller/list',
// icon: 'el-icon-List', icon: 'el-icon-List',
// menu_type: 'tab', menu_type: 'tab',
// url: '', url: '',
// component: '/src/views/comptroller/list.vue', component: '/src/views/comptroller/list.vue',
// keepalive: 'auth/role', keepalive: 'auth/role',
// extend: 'none', extend: 'none',
// children: [] children: []
// } }
// ] ]
// }, },
// { {
// id: 3, id: 3,
// pid: 0, pid: 0,
// type: 'menu_dir', type: 'menu_dir',
// title: '电压暂降', title: '电压暂降',
// name: 'voltage/sags', name: 'voltage/sags',
// path: 'voltage/sags', path: 'voltage/sags',
// icon: 'el-icon-BellFilled', icon: 'el-icon-BellFilled',
// menu_type: 'tab', menu_type: 'tab',
// url: '', url: '',
// extend: 'none', extend: 'none',
// children: [ children: [
// { {
// id: 1, id: 1,
// pid: 3, pid: 3,
// type: 'menu_dir', type: 'menu_dir',
// title: '运行管理', title: '运行管理',
// name: 'voltage/sags/operationsManagement', name: 'voltage/sags/operationsManagement',
// path: 'voltage/sags/operationsManagement', path: 'voltage/sags/operationsManagement',
// icon: 'fa-solid fa-bars-progress', icon: 'fa-solid fa-bars-progress',
// menu_type: 'tab', menu_type: 'tab',
// url: '', url: '',
// extend: 'none', extend: 'none',
// children: [ children: [
// { {
// id: 1, id: 1,
// pid: 3, pid: 3,
// type: 'menu', type: 'menu',
// title: '终端运行管理', title: '终端运行管理',
// name: 'voltage/sags/operationsManagement/index', name: 'voltage/sags/operationsManagement/index',
// path: 'voltage/sags/operationsManagement/index', path: 'voltage/sags/operationsManagement/index',
// icon: 'fa-solid fa-recycle', icon: 'fa-solid fa-recycle',
// menu_type: 'tab', menu_type: 'tab',
// url: '', url: '',
// component: '/src/views/voltage/sags/operationsManagement/index.vue', component: '/src/views/voltage/sags/operationsManagement/index.vue',
// keepalive: 'voltage/sags/operationsManagement/index', keepalive: 'voltage/sags/operationsManagement/index',
// extend: 'none', extend: 'none',
// children: [] children: []
// }, },
// { {
// id: 1, id: 1,
// pid: 3, pid: 3,
// type: 'menu', type: 'menu',
// title: '终端运行统计', title: '终端运行统计',
// name: 'voltage/sags/operationsManagement/statistics', name: 'voltage/sags/operationsManagement/statistics',
// path: 'voltage/sags/operationsManagement/statistics', path: 'voltage/sags/operationsManagement/statistics',
// icon: 'fa-solid fa-chart-column', icon: 'fa-solid fa-chart-column',
// menu_type: 'tab', menu_type: 'tab',
// url: '', url: '',
// component: '/src/views/voltage/sags/operationsManagement/statistics.vue', component: '/src/views/voltage/sags/operationsManagement/statistics.vue',
// keepalive: 'voltage/sags/operationsManagement/statistics', keepalive: 'voltage/sags/operationsManagement/statistics',
// extend: 'none', extend: 'none',
// children: [] children: []
// }, },
// { {
// id: 1, id: 1,
// pid: 3, pid: 3,
// type: 'menu', type: 'menu',
// title: '监测点台账信息', title: '监测点台账信息',
// name: 'voltage/sags/operationsManagement/point', name: 'voltage/sags/operationsManagement/point',
// path: 'voltage/sags/operationsManagement/point', path: 'voltage/sags/operationsManagement/point',
// icon: 'fa-brands fa-square-pinterest', icon: 'fa-brands fa-square-pinterest',
// menu_type: 'tab', menu_type: 'tab',
// url: '', url: '',
// component: '/src/views/voltage/sags/operationsManagement/point.vue', component: '/src/views/voltage/sags/operationsManagement/point.vue',
// keepalive: 'voltage/sags/operationsManagement/point', keepalive: 'voltage/sags/operationsManagement/point',
// extend: 'none', extend: 'none',
// children: [] children: []
// } }
// ] ]
// }, },
// { {
// id: 2, id: 2,
// pid: 3, pid: 3,
// type: 'menu', type: 'menu',
// title: '区域', title: '区域',
// name: 'Event-boot/Region/distribution', name: 'Event-boot/Region/distribution',
// path: 'Event-boot/Region/distribution', path: 'Event-boot/Region/distribution',
// icon: 'el-icon-Management', icon: 'el-icon-Management',
// menu_type: 'tab', menu_type: 'tab',
// url: '', url: '',
// component: '/src/views/Event-boot/Region/distribution.vue', component: '/src/views/Event-boot/Region/distribution.vue',
// keepalive: 'Event-boot/Region/distribution', keepalive: 'Event-boot/Region/distribution',
// extend: 'none', extend: 'none',
// children: [ children: [
// { {
// id: 2, id: 2,
// pid: 3, pid: 3,
// type: 'menu', type: 'menu',
// title: '区域概览', title: '区域概览',
// name: 'Region/overview', name: 'Region/overview',
// path: 'Region/overview', path: 'Region/overview',
// icon: 'el-icon-Promotion', icon: 'el-icon-Promotion',
// menu_type: 'tab', menu_type: 'tab',
// url: '', url: '',
// component: '/src/views/dashboard/index.vue', component: '/src/views/Event-boot/Region/overview.vue',
// keepalive: 'Region/overview', keepalive: 'Region/overview',
// extend: 'none', extend: 'none',
// children: [] children: []
// }, },
// { {
// id: 1, id: 2,
// pid: 3, pid: 3,
// type: 'menu', type: 'menu',
// title: '监测网分布', title: '区域统计',
// name: 'Region/distribution', name: 'Region/statistics',
// path: 'Region/distribution', path: 'Region/statistics',
// icon: 'el-icon-Share', icon: 'el-icon-Promotion',
// menu_type: 'tab', menu_type: 'tab',
// url: '', url: '',
// component: '/src/views/Event-boot/Region/distribution.vue', component: '/src/views/Event-boot/Region/statistics.vue',
// keepalive: 'Region/distribution', keepalive: 'Region/statistics',
// extend: 'none', extend: 'none',
// children: [] children: []
// } },
// ] {
// } id: 1,
// ] pid: 3,
// }, type: 'menu',
// { title: '监测网分布',
// id: 2, name: 'Region/distribution',
// pid: 0, path: 'Region/distribution',
// type: 'menu_dir', icon: 'el-icon-Share',
// title: '权限管理', menu_type: 'tab',
// name: 'auth', url: '',
// path: 'auth', component: '/src/views/Event-boot/Region/distribution.vue',
// icon: 'fa-solid fa-layer-group', keepalive: 'Region/distribution',
// menu_type: null, extend: 'none',
// url: '', children: []
// component: '', }
// keepalive: 0, ]
// extend: 'none', }
// children: [ ]
// { },
// id: 3, {
// pid: 2, id: 2,
// type: 'menu', pid: 0,
// title: '角色管理', type: 'menu_dir',
// name: 'auth/role', title: '权限管理',
// path: 'auth/role', name: 'auth',
// icon: 'el-icon-Avatar', path: 'auth',
// menu_type: 'tab', icon: 'fa-solid fa-layer-group',
// url: '', menu_type: null,
// component: '/src/views/auth/role/index.vue', url: '',
// keepalive: 'auth/role', component: '',
// extend: 'none', keepalive: 0,
// children: [] extend: 'none',
// }, children: [
// { {
// id: 13, id: 3,
// pid: 2, pid: 2,
// type: 'menu', type: 'menu',
// title: '菜单规则管理', title: '角色管理',
// name: 'auth/menu', name: 'auth/role',
// path: 'auth/menu', path: 'auth/role',
// icon: 'el-icon-Menu', icon: 'el-icon-Avatar',
// menu_type: 'tab', menu_type: 'tab',
// url: '', url: '',
// component: '/src/views/auth/menu/index.vue', component: '/src/views/auth/role/index.vue',
// keepalive: 'auth/menu', keepalive: 'auth/role',
// extend: 'none', extend: 'none',
// children: [] children: []
// } },
// ] {
// } id: 13,
// ] pid: 2,
type: 'menu',
title: '菜单规则管理',
name: 'auth/menu',
path: 'auth/menu',
icon: 'el-icon-Menu',
menu_type: 'tab',
url: '',
component: '/src/views/auth/menu/index.vue',
keepalive: 'auth/menu',
extend: 'none',
children: []
}
]
}
]
const handlerMenu = (data: any) => { const handlerMenu = (data: any) => {
data.forEach((item: any) => { data.forEach((item: any) => {
item.path = item.routePath item.path = item.routePath
item.name = item.title item.name = item.title
item.component = item.routeName || '/src/views/dashboard/index.vue' item.component = item.routeName || '/src/views/Event-boot/Region/overview.vue'
item.type = item.children && item.children.length > 0 ? 'menu_dir' : 'menu' item.type = item.children && item.children.length > 0 ? 'menu_dir' : 'menu'
item.menu_type = item.children && item.children.length > 0 ? null : 'tab' item.menu_type = item.children && item.children.length > 0 ? null : 'tab'
if (item.children) { if (item.children) {
@@ -287,8 +301,8 @@ const init = async () => {
} }
handlerMenu(res.data) handlerMenu(res.data)
// handleAdminRoute(arr) // handleAdminRoute(arr)
handleAdminRoute(res.data) // handleAdminRoute(res.data)
// handleAdminRoute([...arr, ...res.data]) handleAdminRoute([...arr, ...res.data])
// 预跳转到上次路径 // 预跳转到上次路径
if (route.params.to) { if (route.params.to) {

0
src/views/dashboard/components/Tableabove.vue → src/views/Event-boot/Region/components/Tableabove.vue
View File

144
src/views/Event-boot/Region/components/TypeStatistics.vue Normal file
View File

@@ -0,0 +1,144 @@
<template>
<span style="color: red; font-size: 12px">注:暂降类型仅统计暂降原因为短路故障事件</span>
<div class="statistics-main">
<template v-if="flag">
<div>
<my-echart :options="descent" />
</div>
<div>
<vxe-table height="auto" auto-resize :data="descentData" v-bind="defaultAttribute">
<vxe-column field="name" title="暂降原因"></vxe-column>
<vxe-column field="value" title="暂降次数"></vxe-column>
</vxe-table>
</div>
<div>
<my-echart :options="resemble" />
</div>
<div>
<vxe-table height="auto" auto-resize :data="resembleData" v-bind="defaultAttribute">
<vxe-column field="name" title="暂降原因"></vxe-column>
<vxe-column field="value" title="暂降次数"></vxe-column>
</vxe-table>
</div>
</template>
</div>
</template>
<script setup lang="ts">
import { ref, reactive } from 'vue'
import MyEchart from '@/components/echarts/MyEchart.vue'
import { defaultAttribute } from '@/components/table/defaultAttribute'
import { mainHeight } from '@/utils/layout'
const descent = ref({})
const descentData = ref([])
const resemble = ref({})
const resembleData = ref([])
const flag = ref(true)
const info = (res: any) => {
flag.value = false
descentData.value = res.reason
resembleData.value = res.type
descent.value = {
title: {
text: '暂降原因'
},
legend: {
type: 'scroll',
orient: 'vertical',
left: 10,
top: '5%',
tooltip: {
show: true
}
},
xAxis: {
show: false
},
yAxis: {
show: false
},
dataZoom: { show: false },
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b} : {c} (次)'
},
options: {
series: [
{
name: '暂降原因',
type: 'pie',
center: ['50%', '50%'],
selectedOffset: 30,
clockwise: true,
label: {
show: false,
position: 'outside',
textStyle: {
//数值样式
}
},
data: res.reason?.filter((item: any) => item.name != '总计')
}
]
}
}
resemble.value = {
title: {
text: '暂降类型'
},
legend: {
type: 'scroll',
orient: 'vertical',
left: 10,
top: '5%'
},
tooltip: {
formatter: '{a} <br/>{b} : {c} (次)',
confine: true
},
xAxis: {
show: false
},
yAxis: {
show: false
},
dataZoom: { show: false },
options: {
series: [
{
name: '暂降类型',
type: 'pie',
center: ['50%', '50%'],
selectedOffset: 30,
clockwise: true,
label: {
show: false,
position: 'outside'
},
data: res.type?.filter((item: any) => item.name != '总计')
}
]
}
}
flag.value = true
}
defineExpose({ info })
const layout = mainHeight(170) as any
</script>
<style lang="scss" scoped>
.statistics-main {
box-sizing: border-box;
height: v-bind('layout.height');
padding: 0 10px 10px;
display: grid;
grid-template-columns: 1fr 600px;
grid-template-rows: 1fr 1fr;
grid-gap: 10px;
}
</style>

4
src/views/dashboard/components/echart.vue → src/views/Event-boot/Region/components/echart.vue
View File

@@ -35,7 +35,6 @@ const Processing = (list: any) => {
}, },
tooltip: { tooltip: {
formatter: function (params: any) { formatter: function (params: any) {
// console.log(params);
let html = '区域：' + params[0].name let html = '区域：' + params[0].name
params.forEach((item: any) => { params.forEach((item: any) => {
if (item.value == 1.1) { if (item.value == 1.1) {
@@ -105,7 +104,6 @@ const Grade = (list: any) => {
}, },
tooltip: { tooltip: {
formatter: function (params: any) { formatter: function (params: any) {
// console.log(params);
let html = '电压等级：' + params[0].name let html = '电压等级：' + params[0].name
params.forEach((item: any) => { params.forEach((item: any) => {
if (item.value == 1.1) { if (item.value == 1.1) {
@@ -139,7 +137,6 @@ const Grade = (list: any) => {
normal: { normal: {
//这里是颜色 //这里是颜色
color: function (params: any) { color: function (params: any) {
// console.log(params,'1111111111111111111111');
if (params.data == 1.1) { if (params.data == 1.1) {
return '#B3B3B3' return '#B3B3B3'
} else { } else {
@@ -241,7 +238,6 @@ const Relation = (list: any, interval: number) => {
} }
}, },
color: function (params: any) { color: function (params: any) {
// console.log(params,'1111111111111111111111');
if (params.data == 1.1) { if (params.data == 1.1) {
return '#B3B3B3' return '#B3B3B3'
} else { } else {

72
src/views/Event-boot/Region/overview.vue Normal file
View File

@@ -0,0 +1,72 @@
<template>
<div class="default-main">
<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>
<el-tab-pane label="表格" name="2"><Tableabove ref="table" /></el-tab-pane>
</el-tabs>
</div>
</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 './components/echart.vue'
import Tableabove from './components/Tableabove.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')
const list = ref([])
const echarts = ref()
const Picker = ref()
const table = ref()
const dictData = useDictData()
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)
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(() => {
tableStore.index()
})
const layout = mainHeight(123) as any
</script>
<style lang="scss" scoped>
.bars_w {
width: 100%;
height: 500px;
}
::v-deep(.el-tabs__content) {
height: v-bind('layout.height');
overflow-y: auto;
}
</style>

76
src/views/Event-boot/Region/statistics.vue Normal file
View File

@@ -0,0 +1,76 @@
<template>
<div class="default-main">
<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" @tab-click="handleClick" v-loading="tableStore.table.loading">
<el-tab-pane label="暂降原因及类型统计" name="1">
<TypeStatistics ref="Statistics" />
</el-tab-pane>
<el-tab-pane label="电压容忍度曲线兼容性统计" name="2"></el-tab-pane>
</el-tabs>
</div>
</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 TableStore from '@/utils/tableStore'
import { onMounted, reactive, ref, provide } from 'vue'
import TypeStatistics from './components/TypeStatistics.vue'
import { mainHeight } from '@/utils/layout'
defineOptions({
name: 'Region/overview'
})
const activeName = ref('1')
const Statistics = ref()
const flag = ref(true)
const dictData = useDictData()
const tableStore = new TableStore({
url: '/event-boot/areaAnalysis/getEventReason',
method: 'POST',
column: [],
loadCallback: () => {
if (activeName.value == '1') {
Statistics.value.info(tableStore.table.data)
} else {
}
}
})
provide('tableStore', tableStore)
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(() => {
tableStore.index()
})
const handleClick = async () => {
if (activeName.value == '1') {
tableStore.url = '/event-boot/areaAnalysis/getEventReason'
} else {
tableStore.url = '/event-boot/areaAnalysis/getVoltageToleranceCurve'
}
await tableStore.onTableAction('search', {})
}
const layout = mainHeight(123) as any
</script>
<style lang="scss" scoped>
.bars_w {
width: 100%;
height: 500px;
}
::v-deep(.el-tabs__content) {
height: v-bind('layout.height');
overflow-y: auto;
}
</style>