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

稳态治理效果分析添加时间组件

Browse Source
This commit is contained in:
stt
2025-11-07 10:32:55 +08:00
parent 0e76ab66f3
commit ad7b77ff92
5 changed files with 325 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
src/components/cockpit/governanceReport/index.vue
View File

@@ -1,7 +1,7 @@
<template>
<div>
<!--治理效果报表 -->
<TableHeader :showReset="false" v-if="fullscreen">
<TableHeader :showReset="false" datePicker @selectChange="selectChange" v-if="fullscreen">
<template v-slot:select>
<el-form-item label="治理对象">
<el-select
@@ -45,6 +45,8 @@ import { getTimeOfTheMonth } from '@/utils/formatTime'
import MyEchart from '@/components/echarts/MyEchart.vue'
import { useConfig } from '@/stores/config'
import Json from './index.json'
import { useRoute } from 'vue-router'
import { useTimeCacheStore } from '@/stores/timeCache'
const prop = defineProps({
w: { type: String },
@@ -66,6 +68,9 @@ const powerList: any = ref([
}
])
const route = useRoute()
const timeCacheStore = useTimeCacheStore()
const tableStore: any = new TableStore({
url: '/user-boot/role/selectRoleDetail?id=0',
method: 'POST',
@@ -74,8 +79,20 @@ const tableStore: any = new TableStore({
exportName: '主要监测点列表',
column: [],
beforeSearchFun: () => {
tableStore.table.params.searchBeginTime = prop.timeValue?.[0] || getTimeOfTheMonth(prop.timeKey)[0]
tableStore.table.params.searchEndTime = prop.timeValue?.[1] || getTimeOfTheMonth(prop.timeKey)[1]
// 尝试从缓存获取时间值
let beginTime, endTime
if (fullscreen.value) {
const cached = timeCacheStore.getCache(route.path)
if (cached && cached.timeValue) {
beginTime = cached.timeValue[0]
endTime = cached.timeValue[1]
}
}
// 如果缓存中没有则使用默认值
tableStore.table.params.searchBeginTime = beginTime || prop.timeValue?.[0] || getTimeOfTheMonth(prop.timeKey)[0]
tableStore.table.params.searchEndTime = endTime || prop.timeValue?.[1] || getTimeOfTheMonth(prop.timeKey)[1]
},
loadCallback: () => {}
})
@@ -103,6 +120,16 @@ onMounted(() => {
tableStore.index()
})
const selectChange = (showSelect: any, height: any, datePickerValue?: any) => {
// 如果有传入 datePicker 的值
if (datePickerValue) {
// 更新表格参数
tableStore.table.params.searchBeginTime = datePickerValue.timeValue?.[0]
tableStore.table.params.searchEndTime = datePickerValue.timeValue?.[1]
}
}
// 计算是否全屏展示
const fullscreen = computed(() => {
const w = Number(prop.w)

69
src/components/cockpit/gridSideStatistics/index.vue
View File

@@ -1,13 +1,21 @@
<template>
<div>
<!--电网侧指标越限统计 -->
<TableHeader :showReset="false" @selectChange="selectChange" datePicker v-if="fullscreen"></TableHeader>
<my-echart
class="tall"
:options="echartList"
:style="{ width: prop.width, height: `calc(${prop.height} / 2 )` }"
:style="{
width: prop.width,
height: `calc(${prop.height} / 2 - ${headerHeight / 2}px + ${fullscreen ? 0 : 28}px )`
}"
/>
<Table ref="tableRef" @cell-click="cellClickEvent" :height="`calc(${prop.height} / 2 )`" isGroup></Table>
<Table
ref="tableRef"
@cell-click="cellClickEvent"
:height="`calc(${prop.height} / 2 - ${headerHeight / 2}px + ${fullscreen ? 0 : 28}px )`"
isGroup
></Table>
<!-- 指标越限详情 -->
<OverLimitDetails ref="OverLimitDetailsRef" />
</div>
@@ -17,16 +25,48 @@ import { ref, onMounted, provide, reactive, watch, h } from 'vue'
import TableStore from '@/utils/tableStore'
import Table from '@/components/table/index.vue'
import MyEchart from '@/components/echarts/MyEchart.vue'
import { useDictData } from '@/stores/dictData'
import { ElMessage, ElMessageBox } from 'element-plus'
import { getTimeOfTheMonth } from '@/utils/formatTime'
import OverLimitDetails from '@/components/cockpit/listOfMainMonitoringPoints/components/overLimitDetails.vue'
import TableHeader from '@/components/table/header/index.vue'
import { useRoute } from 'vue-router'
import { useTimeCacheStore } from '@/stores/timeCache'
const prop = defineProps({
w: { type: String },
h: { type: String },
width: { type: String },
height: { type: String },
timeKey: { type: String },
timeValue: { type: Object }
})
const headerHeight = ref(57)
const route = useRoute()
const timeCacheStore = useTimeCacheStore()
const selectChange = (showSelect: any, height: any, datePickerValue?: any) => {
headerHeight.value = height
// 如果有传入 datePicker 的值
if (datePickerValue) {
// 更新表格参数
tableStore.table.params.searchBeginTime = datePickerValue.timeValue?.[0]
tableStore.table.params.searchEndTime = datePickerValue.timeValue?.[1]
}
}
// 计算是否全屏展示
const fullscreen = computed(() => {
const w = Number(prop.w)
const h = Number(prop.h)
if (!isNaN(w) && !isNaN(h) && w === 12 && h === 6) {
// 执行相应逻辑
return true
} else {
return false
}
})
const echartList = ref({
title: {
text: '指标越限占比'
@@ -52,7 +92,7 @@ const echartList = ref({
type: 'bar',
name: '越限占比',
data: [0, 45, 22, 0, 70],
barMaxWidth: 30,
barMaxWidth: 30
// label: {
// show: true,
@@ -140,8 +180,21 @@ const tableStore: any = new TableStore({
}
],
beforeSearchFun: () => {
tableStore.table.params.searchBeginTime = prop.timeValue?.[0] || getTimeOfTheMonth(prop.timeKey)[0]
tableStore.table.params.searchEndTime = prop.timeValue?.[1] || getTimeOfTheMonth(prop.timeKey)[1]
// 尝试从缓存获取时间值
let beginTime, endTime
if (fullscreen.value) {
const cached = timeCacheStore.getCache(route.path)
if (cached && cached.timeValue) {
beginTime = cached.timeValue[0]
endTime = cached.timeValue[1]
}
}
// 如果缓存中没有则使用默认值
tableStore.table.params.searchBeginTime = beginTime || prop.timeValue?.[0] || getTimeOfTheMonth(prop.timeKey)[0]
tableStore.table.params.searchEndTime = endTime || prop.timeValue?.[1] || getTimeOfTheMonth(prop.timeKey)[1]
},
loadCallback: () => {
tableStore.table.data = [

134
src/components/cockpit/listOfMainMonitoringPoints/components/overLimitDetails copy.vue Normal file
View File

@@ -0,0 +1,134 @@
<template>
<!-- 综合评估详情 -->
<el-dialog draggable title="指标合格率统计" v-model="dialogVisible" append-to-body width="70%">
<TableHeader datePicker showExport :showReset="false">
<template v-slot:select>
<el-form-item label="监测点名称">
<el-select
v-model="tableStore.table.params.searchValue"
placeholder="请选择监测点名称"
style="width: 240px"
>
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</el-form-item>
</template>
</TableHeader>
<Table ref="tableRef" isGroup :height="height"></Table>
</el-dialog>
</template>
<script setup lang="ts">
import { ref, provide } from 'vue'
import Table from '@/components/table/index.vue'
import TableHeader from '@/components/table/header/index.vue'
import TableStore from '@/utils/tableStore'
import { mainHeight } from '@/utils/layout'
const dialogVisible: any = ref(false)
const options = [
{
value: '35kV进线',
label: '35kV进线'
}
]
const height = mainHeight(0, 2).height as any
const loop50 = (key: string) => {
let list: any[] = []
for (let i = 2; i < 51; i++) {
list.push({
title: i + '次',
// field: key + i,
field: 'flicker',
width: '80'
})
}
return list
}
const tableStore: any = new TableStore({
url: '/user-boot/role/selectRoleDetail?id=0',
method: 'POST',
publicHeight: 30,
showPage: false,
exportName: '主要监测点列表',
column: [
{
field: 'index',
title: '序号',
width: '80',
formatter: (row: any) => {
return (tableStore.table.params.pageNum - 1) * tableStore.table.params.pageSize + row.rowIndex + 1
}
},
{
title: '日期',
field: 'time',
width: '150'
},
{
title: '名称',
field: 'name',
width: '150'
},
{
title: '闪变越限(分钟)',
field: 'flicker',
width: '80'
},
{
title: '谐波电压越限(分钟)',
children: loop50('voltage')
},
{
title: '谐波电流越限(分钟)',
children: loop50('harmonicCurrent')
},
{
title: '三相不平衡度越限(分钟)',
field: 'flicker',
width: '100'
},
{
title: '电压偏差越限(分钟)',
field: 'flicker',
width: '100'
},
{
title: '频率偏差越限(分钟)',
field: 'flicker',
width: '100'
}
],
beforeSearchFun: () => {},
loadCallback: () => {
tableStore.table.data = [
{
time: '2024-01-01 00:00:00',
name: '35kV进线',
flicker: '0',
},
{
time: '2024-01-01 00:00:00',
name: '35kV进线',
flicker: '0',
},
{
time: '2024-01-01 00:00:00',
name: '35kV进线',
flicker: '0',
},
]
}
})
tableStore.table.params.searchValue = ''
provide('tableStore', tableStore)
const open = async (row: any) => {
dialogVisible.value = true
tableStore.index()
}
defineExpose({ open })
</script>
<style lang="scss" scoped></style>

95
src/components/cockpit/monitoringPointList/index.vue
View File

@@ -1,8 +1,8 @@
<template>
<div>
<!--监测点列表 -->
<Table ref="tableRef" @cell-click="cellClickEvent" :height="`calc(${prop.height} )`"></Table>
<TableHeader :showReset="false" @selectChange="selectChange" datePicker v-if="fullscreen"></TableHeader>
<Table ref="tableRef" @cell-click="cellClickEvent" :height="`calc(${prop.height} - ${headerHeight}px + ${fullscreen ? 0 : 56}px )`"></Table>
<!-- 指标越限详情 -->
<OverLimitDetails ref="OverLimitDetailsRef" />
</div>
@@ -11,19 +11,51 @@
import { ref, onMounted, provide, reactive, watch, h } from 'vue'
import TableStore from '@/utils/tableStore'
import Table from '@/components/table/index.vue'
import TableHeader from '@/components/table/header/index.vue'
import { useDictData } from '@/stores/dictData'
import { ElMessage, ElMessageBox } from 'element-plus'
import { getTimeOfTheMonth } from '@/utils/formatTime'
import { ElTag } from 'element-plus'
import OverLimitDetails from '@/components/cockpit/listOfMainMonitoringPoints/components/overLimitDetails.vue'
import TableHeader from '@/components/table/header/index.vue'
import { useRoute } from 'vue-router'
import { useTimeCacheStore } from '@/stores/timeCache'
const prop = defineProps({
w: { type: String },
h: { type: String },
width: { type: String },
height: { type: String },
timeKey: { type: String },
timeValue: { type: Object }
})
const dictData = useDictData()
const headerHeight = ref(57)
const route = useRoute()
const timeCacheStore = useTimeCacheStore()
const selectChange = (showSelect: any, height: any, datePickerValue?: any) => {
headerHeight.value = height
// 如果有传入 datePicker 的值
if (datePickerValue) {
// 更新表格参数
tableStore.table.params.searchBeginTime = datePickerValue.timeValue?.[0]
tableStore.table.params.searchEndTime = datePickerValue.timeValue?.[1]
}
}
// 计算是否全屏展示
const fullscreen = computed(() => {
const w = Number(prop.w)
const h = Number(prop.h)
if (!isNaN(w) && !isNaN(h) && w === 12 && h === 6) {
// 执行相应逻辑
return true
} else {
return false
}
})
const OverLimitDetailsRef = ref()
const tableStore: any = new TableStore({
url: '/user-boot/role/selectRoleDetail?id=0',
@@ -63,8 +95,8 @@ const tableStore: any = new TableStore({
minWidth: '80',
render: 'customTemplate',
customTemplate: (row: any) => {
return `<span style='cursor: pointer;text-decoration: underline;' onclick="handleReportClick('${row.name}')">${row.type2}</span>`
},
return `<span style='cursor: pointer;text-decoration: underline;' onclick="handleReportClick('${row.name}')">${row.type2}</span>`
}
},
{ title: '监测点名称', field: 'type3', minWidth: '70' },
{ title: '监测类型', field: 'type4', minWidth: '60' },
@@ -80,8 +112,21 @@ const tableStore: any = new TableStore({
{ title: '最新数据时间', field: 'type6', minWidth: '140' }
],
beforeSearchFun: () => {
tableStore.table.params.searchBeginTime = prop.timeValue?.[0] || getTimeOfTheMonth(prop.timeKey)[0]
tableStore.table.params.searchEndTime = prop.timeValue?.[1] || getTimeOfTheMonth(prop.timeKey)[1]
// 尝试从缓存获取时间值
let beginTime, endTime
if (fullscreen.value) {
const cached = timeCacheStore.getCache(route.path)
if (cached && cached.timeValue) {
beginTime = cached.timeValue[0]
endTime = cached.timeValue[1]
}
}
// 如果缓存中没有则使用默认值
tableStore.table.params.searchBeginTime = beginTime || prop.timeValue?.[0] || getTimeOfTheMonth(prop.timeKey)[0]
tableStore.table.params.searchEndTime = endTime || prop.timeValue?.[1] || getTimeOfTheMonth(prop.timeKey)[1]
},
loadCallback: () => {
tableStore.table.data = [
@@ -165,21 +210,21 @@ watch(
)
const handleReportClick = (id: string) => {
const row = tableStore.table.data.find((item: any) => item.id === id)
if (row && row.type2 !== '/') {
// 示例：触发下载逻辑（根据你注释掉的代码）
// getFileZip({ eventId: id }).then(res => {
// let blob = new Blob([res], { type: 'application/zip' })
// const url = window.URL.createObjectURL(blob)
// const link = document.createElement('a')
// link.href = url
// link.download = row.wavePath?.split('/')[2] || '报告文件.zip'
// link.click()
// })
console.log('点击了报告:', row.type2)
} else {
ElMessage.warning('暂无报告可下载')
}
const row = tableStore.table.data.find((item: any) => item.id === id)
if (row && row.type2 !== '/') {
// 示例：触发下载逻辑（根据你注释掉的代码）
// getFileZip({ eventId: id }).then(res => {
// let blob = new Blob([res], { type: 'application/zip' })
// const url = window.URL.createObjectURL(blob)
// const link = document.createElement('a')
// link.href = url
// link.download = row.wavePath?.split('/')[2] || '报告文件.zip'
// link.click()
// })
console.log('点击了报告:', row.type2)
} else {
ElMessage.warning('暂无报告可下载')
}
}
// 挂载到 window 供 HTML 调用
@@ -187,7 +232,7 @@ window.handleReportClick = handleReportClick
// 组件销毁时清理全局方法
onBeforeUnmount(() => {
delete window.handleReportClick
delete window.handleReportClick
})
</script>
<style lang="scss" scoped></style>

35
src/components/cockpit/trendComparison/index.vue
View File

@@ -1,7 +1,7 @@
<template>
<div>
<!--趋势对比 -->
<TableHeader :showReset="false" @selectChange="selectChange" v-if="fullscreen">
<TableHeader :showReset="false" datePicker @selectChange="selectChange" v-if="fullscreen">
<template v-slot:select>
<el-form-item label="监测点名称">
<el-select
@@ -67,6 +67,8 @@ import { ElMessage, ElMessageBox } from 'element-plus'
import { getTimeOfTheMonth } from '@/utils/formatTime'
import MyEchart from '@/components/echarts/MyEchart.vue'
import { useConfig } from '@/stores/config'
import { useRoute } from 'vue-router'
import { useTimeCacheStore } from '@/stores/timeCache'
const prop = defineProps({
w: { type: String },
h: { type: String },
@@ -75,6 +77,9 @@ const prop = defineProps({
timeKey: { type: String },
timeValue: { type: Object }
})
const route = useRoute()
const timeCacheStore = useTimeCacheStore()
const config = useConfig()
const powerList: any = ref([
{
@@ -238,8 +243,15 @@ const echartList = ref({
}
})
const headerHeight = ref(57)
const selectChange = (showSelect: any, height: any) => {
const selectChange = (showSelect: any, height: any, datePickerValue?: any) => {
headerHeight.value = height
// 如果有传入 datePicker 的值
if (datePickerValue) {
// 更新表格参数
tableStore.table.params.searchBeginTime = datePickerValue.timeValue?.[0]
tableStore.table.params.searchEndTime = datePickerValue.timeValue?.[1]
}
}
const tableStore: any = new TableStore({
url: '/user-boot/role/selectRoleDetail?id=0',
@@ -248,9 +260,22 @@ const tableStore: any = new TableStore({
showPage: false,
exportName: '主要监测点列表',
column: [],
beforeSearchFun: () => {
tableStore.table.params.searchBeginTime = prop.timeValue?.[0] || getTimeOfTheMonth(prop.timeKey)[0]
tableStore.table.params.searchEndTime = prop.timeValue?.[1] || getTimeOfTheMonth(prop.timeKey)[1]
beforeSearchFun: () => {
// 尝试从缓存获取时间值
let beginTime, endTime
if (fullscreen.value) {
const cached = timeCacheStore.getCache(route.path)
if (cached && cached.timeValue) {
beginTime = cached.timeValue[0]
endTime = cached.timeValue[1]
}
}
// 如果缓存中没有则使用默认值
tableStore.table.params.searchBeginTime = beginTime || prop.timeValue?.[0] || getTimeOfTheMonth(prop.timeKey)[0]
tableStore.table.params.searchEndTime = endTime || prop.timeValue?.[1] || getTimeOfTheMonth(prop.timeKey)[1]
},
loadCallback: () => {
tableStore.table.height = `calc(${prop.height} - 80px)`