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

修改角色管理页面

Browse Source
This commit is contained in:
guanj
2026-01-09 08:47:07 +08:00
parent 6c3037f19b
commit ab891e6125
12 changed files with 709 additions and 339 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
src/api/process-boot/reportForms.ts
View File

@@ -1,10 +1,18 @@
import createAxios from '@/utils/request'
export function exportModel(data: any) {
return createAxios({
url: '/harmonic-boot/exportmodel/exportModel',
method: 'post',
data: data,
responseType: 'blob'
})
}
import createAxios from '@/utils/request'
export function exportModel(data: any) {
return createAxios({
url: '/harmonic-boot/exportmodel/exportModel',
method: 'post',
data: data,
responseType: 'blob'
})
}
export function areaHarmonicReport(data: any) {
return createAxios({
url: '/harmonic-boot/areaHarmonicReport/areaHarmonicReport',
method: 'post',
data: data,
responseType: 'blob'
})
}

BIN
src/assets/img/region.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 263 KiB

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

@@ -52,7 +52,7 @@
<el-button
@click="onExport"
v-if="showExport"
:loading="tableStore.table.loading"
:loading="tableStore.table.exportLoading"
type="primary"
icon="el-icon-Download"
>

150
src/components/tree/pqs/areaTree.vue Normal file
View File

@@ -0,0 +1,150 @@
<template>
<div class="point-tree">
<div style="flex: 1; overflow: hidden">
<Tree ref="treeRef" :data="tree" style="width: 100%; height: 100%" :canExpand="false" v-bind="$attrs" />
</div>
</div>
</template>
<script lang="ts" setup>
import { nextTick, onMounted, ref, useAttrs } from 'vue'
import Tree from '../index.vue'
import { useAdminInfo } from '@/stores/adminInfo'
import { useDictData } from '@/stores/dictData'
import { getTerminalTreeForFive } from '@/api/device-boot/terminalTree'
import { useConfig } from '@/stores/config'
import { getAreaList } from '@/api/common'
const VITE_FLAG = import.meta.env.VITE_NAME == 'qujing'
defineOptions({
name: 'pms/pointTree'
})
interface Props {
showSelect?: boolean
}
const props = withDefaults(defineProps<Props>(), {
showSelect: true
})
const emit = defineEmits(['init'])
const attrs = useAttrs()
const adminInfo = useAdminInfo()
const dictData = useDictData()
const config = useConfig()
const tree = ref()
const treeRef = ref()
const loadData = () => {
let nodeKey = ''
getAreaList().then(res => {
processTreeData(res.data, res.data[0].level)
let firstLevel6Node = getDeepestFirstChildData(res.data)
nodeKey = firstLevel6Node.id
emit('init', firstLevel6Node)
tree.value = res.data
if (nodeKey) {
nextTick(() => {
treeRef.value.treeRef.setCurrentKey(nodeKey)
// treeRef.value.treeRef.setExpandedKeys(nodeKey)
})
}
})
}
const scrollToNode = (id: string) => {
// 树滚动
treeRef.value.scrollToNode(id)
}
// 定义不同层级对应的图标配置（可根据实际需求调整）
const levelIconMap = {
'-1': 'el-icon-HomeFilled',
0: 'el-icon-CollectionTag',
1: 'el-icon-CollectionTag',
2: 'el-icon-Flag',
3: 'el-icon-OfficeBuilding',
4: 'el-icon-DataAnalysis',
5: 'el-icon-DataAnalysis',
7: 'el-icon-DataAnalysis',
6: 'fa-solid fa-location-dot'
}
/**
* 递归处理树形数据，为不同层级节点设置图标和颜色
* @param data 树形数据数组
* @param level 当前层级（默认从1开始）
*/
function processTreeData(data: any[], level: number = -1, alias: string = '') {
// 空值判断，避免数组为空或undefined时报错
if (!Array.isArray(data) || data.length === 0) return
data.forEach(item => {
// 1. 设置基础图标（根据层级匹配）
item.icon = levelIconMap[level] || ''
item.alias = alias + `${item.name}`
// 2. 设置基础颜色
item.color = config.getColorVal('elementUiPrimary')
// 3. 第6层特殊处理：根据comFlag调整颜色
if (level === 6 && item.hasOwnProperty('comFlag')) {
switch (item.comFlag) {
case 0:
item.color = 'red !important'
break
case 1:
item.color = '#00f93b !important'
break
case 2:
item.color = '#8c8c8c !important'
break
// 默认值：保持原有基础颜色
default:
item.color = config.getColorVal('elementUiPrimary')
}
}
// 4. 递归处理子节点，层级+1
if (item.children && item.children.length > 0) {
processTreeData(item.children, item.children[0].level, level == '-1' ? '' : item.alias + '>')
}
})
}
/**
* 递归获取树形结构中一直向下的第一个children的最后一组有效数据
* @param {Array} treeData - 原始递归树形数据
* @returns {Object|null} 路径最后一组有效数据，无有效数据时返回null
*/
function getDeepestFirstChildData(treeData) {
// 递归辅助函数：逐层查找第一个children
function findDeepestNode(currentNode) {
// 检查当前节点是否有有效的children数组
if (currentNode && Array.isArray(currentNode.children) && currentNode.children.length > 0) {
// 有下一级children，继续递归查找下一级第一个元素
return findDeepestNode(currentNode.children[0])
}
// 没有下一级children，返回当前节点（递归终止）
return currentNode
}
// 边界处理：原始数据非数组/空数组时返回null
if (!Array.isArray(treeData) || treeData.length === 0) {
return null
}
// 从根节点第一个元素开始递归查找
return findDeepestNode(treeData[0])
}
defineExpose({ treeRef, scrollToNode, tree })
loadData()
</script>
<style lang="scss">
.point-tree {
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
background: #fff;
border: 1px solid var(--el-border-color);
}
</style>

37
src/utils/tableStore.ts
View File

@@ -19,7 +19,7 @@ interface TableStoreParams {
publicHeight?: number //计算高度
resetCallback?: () => void // 重置
loadCallback?: () => void // 接口调用后的回调
exportProcessingData?:() => void //导出处理数据
exportProcessingData?: () => void //导出处理数据
beforeSearchFun?: () => void // 接口调用前的回调
}
@@ -45,8 +45,9 @@ export default class TableStore {
pageNum: 1,
pageSize: 20
},
filename:null,
filename: null,
loading: true,
exportLoading: false,
column: [],
loadCallback: null,
exportProcessingData: null,
@@ -65,7 +66,7 @@ export default class TableStore {
this.table.filename = options.filename || null
this.table.column = options.column
this.showPage = options.showPage !== false
this.table.publicHeight = options.publicHeight || 0
this.table.resetCallback = options.resetCallback || null
this.table.loadCallback = options.loadCallback || null
@@ -84,13 +85,11 @@ export default class TableStore {
this.initData = JSON.parse(JSON.stringify(this.table.params))
}
if (!this.timeAll) {
delete this.table.params.startTime;
delete this.table.params.endTime;
delete this.table.params.searchBeginTime;
delete this.table.params.searchEndTime;
delete this.table.params.timeFlag;
delete this.table.params.startTime
delete this.table.params.endTime
delete this.table.params.searchBeginTime
delete this.table.params.searchEndTime
delete this.table.params.timeFlag
}
createAxios(
Object.assign(
@@ -130,7 +129,6 @@ export default class TableStore {
* @param data 携带数据
*/
onTableAction = (event: string, data: anyObj) => {
const actionFun = new Map([
[
'search',
@@ -202,6 +200,7 @@ export default class TableStore {
[
'export',
() => {
this.table.exportLoading = true
// this.index()
console.log('export')
let params = { ...this.table.params, pageNum: 1, pageSize: this.table.total }
@@ -213,12 +212,16 @@ export default class TableStore {
},
requestPayload(this.method, params, this.paramsPOST)
)
).then(res => {
this.table.allData = filtration(res.data.records || res.data)
console.log('11111',this.table)
this.table.exportProcessingData && this.table.exportProcessingData()
this.table.allFlag = data.showAllFlag || true
})
)
.then(res => {
this.table.allData = filtration(res.data.records || res.data)
this.table.exportProcessingData && this.table.exportProcessingData()
this.table.allFlag = data.showAllFlag || true
this.table.exportLoading = false
})
.catch(() => {
this.table.exportLoading = false
})
}
]
])

81
src/views/pqs/harmonicMonitoring/detailed/regionalStatistics/index.vue
View File

@@ -144,7 +144,15 @@ const tableStore = new TableStore({
},
{
field: 'frequencyBiLi',
title: '超标占比(%)',
title: '累计占比(%)',
minWidth: '100px',
formatter: (row: any) => {
return row.cellValue == -1 ? '/' : row.cellValue
}
},
{
field: 'frequencyDayAvgBiLi',
title: '日均占比(%)',
minWidth: '100px',
formatter: (row: any) => {
return row.cellValue == -1 ? '/' : row.cellValue
@@ -173,7 +181,15 @@ const tableStore = new TableStore({
},
{
field: 'voltageBiLi',
title: '超标占比(%)',
title: '累计占比(%)',
minWidth: '100px',
formatter: (row: any) => {
return row.cellValue == -1 ? '/' : row.cellValue
}
},
{
field: 'voltageDayAvgBiLi',
title: '日均占比(%)',
minWidth: '100px',
formatter: (row: any) => {
return row.cellValue == -1 ? '/' : row.cellValue
@@ -200,9 +216,18 @@ const tableStore = new TableStore({
return row.cellValue == -1 ? '/' : row.cellValue
}
},
{
field: 'harmonicVoltageBiLi',
title: '超标占比(%)',
title: '累计占比(%)',
minWidth: '100px',
formatter: (row: any) => {
return row.cellValue == -1 ? '/' : row.cellValue
}
},
{
field: 'harmonicVoltageDayAvgBiLi',
title: '日均占比(%)',
minWidth: '100px',
formatter: (row: any) => {
return row.cellValue == -1 ? '/' : row.cellValue
@@ -231,7 +256,15 @@ const tableStore = new TableStore({
},
{
field: 'harmonicCurrentBiLi',
title: '超标占比(%)',
title: '累计占比(%)',
minWidth: '100px',
formatter: (row: any) => {
return row.cellValue == -1 ? '/' : row.cellValue
}
},
{
field: 'harmonicCurrentDayAvgBiLi',
title: '日均占比(%)',
minWidth: '100px',
formatter: (row: any) => {
return row.cellValue == -1 ? '/' : row.cellValue
@@ -260,7 +293,15 @@ const tableStore = new TableStore({
},
{
field: 'threePhaseVoltageBiLi',
title: '超标占比(%)',
title: '累计占比(%)',
minWidth: '100px',
formatter: (row: any) => {
return row.cellValue == -1 ? '/' : row.cellValue
}
},
{
field: 'threePhaseVoltageDayAvgBiLi',
title: '日均占比(%)',
minWidth: '100px',
formatter: (row: any) => {
return row.cellValue == -1 ? '/' : row.cellValue
@@ -289,7 +330,15 @@ const tableStore = new TableStore({
},
{
field: 'flickerBiLi',
title: '超标占比(%)',
title: '累计占比(%)',
minWidth: '100px',
formatter: (row: any) => {
return row.cellValue == -1 ? '/' : row.cellValue
}
},
{
field: 'flickerDayAvgBiLi',
title: '日均占比(%)',
minWidth: '100px',
formatter: (row: any) => {
return row.cellValue == -1 ? '/' : row.cellValue
@@ -318,7 +367,15 @@ const tableStore = new TableStore({
},
{
field: 'negativeBiLi',
title: '超标占比(%)',
title: '累计占比(%)',
minWidth: '100px',
formatter: (row: any) => {
return row.cellValue == -1 ? '/' : row.cellValue
}
},
{
field: 'negativeDayAvgBiLi',
title: '日均占比(%)',
minWidth: '100px',
formatter: (row: any) => {
return row.cellValue == -1 ? '/' : row.cellValue
@@ -347,7 +404,15 @@ const tableStore = new TableStore({
},
{
field: 'interHarmonicBiLi',
title: '超标占比(%)',
title: '累计占比(%)',
minWidth: '100px',
formatter: (row: any) => {
return row.cellValue == -1 ? '/' : row.cellValue
}
},
{
field: 'interHarmonicDayAvgBiLi',
title: '日均占比(%)',
minWidth: '100px',
formatter: (row: any) => {
return row.cellValue == -1 ? '/' : row.cellValue

108
src/views/pqs/harmonicMonitoring/reportForms/region/index.vue Normal file
View File

@@ -0,0 +1,108 @@
<template>
<div class="default-main" :style="height">
<splitpanes style="height: 100%" class="default-theme" id="navigation-splitpanes">
<pane :size="size">
<PointTree
:default-expand-all="false"
@node-click="handleNodeClick"
@init="handleNodeClick"
></PointTree>
</pane>
<pane style="background: #fff" :style="height">
<TableHeader ref="TableHeaderRef" datePicker :show-search="false">
<template #operation>
<el-button icon="el-icon-Download" type="primary" @click="exportEvent">生成</el-button>
</template>
</TableHeader>
<div class="box">
<div id="luckysheet">
<img
width="100%"
:style="`height: calc(${tableStore.table.height} + 40px)`"
src="@/assets/img/region.png"
/>
</div>
</div>
</pane>
</splitpanes>
</div>
</template>
<script setup lang="ts">
import { onMounted, ref, provide } from 'vue'
import 'splitpanes/dist/splitpanes.css'
import { Splitpanes, Pane } from 'splitpanes'
import TableStore from '@/utils/tableStore'
import PointTree from '@/components/tree/pqs/areaTree.vue'
import TableHeader from '@/components/table/header/index.vue'
import { useDictData } from '@/stores/dictData'
import { mainHeight } from '@/utils/layout'
import { areaHarmonicReport } from '@/api/process-boot/reportForms'
import { genFileId, ElMessage, ElNotification } from 'element-plus'
import type { UploadProps, UploadUserFile } from 'element-plus'
import dayjs from 'dayjs'
defineOptions({
name: 'harmonic-boot/region/word'
})
const height = mainHeight(20)
const size = ref(19)
const dictData = useDictData()
const TableHeaderRef = ref()
const dotList: any = ref({})
const Template: any = ref({})
const tableStore = new TableStore({
url: '',
method: 'POST',
column: [],
beforeSearchFun: () => {},
loadCallback: () => {}
})
provide('tableStore', tableStore)
onMounted(() => {
const dom = document.getElementById('navigation-splitpanes')
if (dom) {
size.value = Math.round((180 / dom.offsetHeight) * 120)
}
})
const handleNodeClick = (data: any, node: any) => {
dotList.value = data
}
// 生成
const exportEvent = () => {
ElMessage('生成报告中...')
areaHarmonicReport({
deptId: dotList.value.id,
areaReportFlag: 1,
startTime: TableHeaderRef.value.datePickerRef.timeValue[0],
endTime: TableHeaderRef.value.datePickerRef.timeValue[1]
}).then((res: any) => {
let blob = new Blob([res], {
type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document;charset=UTF-8'
})
// createObjectURL(blob); //创建下载的链接
const url = window.URL.createObjectURL(blob)
const link = document.createElement('a') // 创建a标签
link.href = url
link.download = dotList.value.name + '区域稳态报告' + dayjs().format('YYYYMMDD') // 设置下载的文件名
document.body.appendChild(link)
link.click() //执行下载
document.body.removeChild(link)
})
}
</script>
<style lang="scss">
.splitpanes.default-theme .splitpanes__pane {
background: #eaeef1;
}
.box {
padding: 10px;
}
</style>

4
src/views/pqs/harmonicMonitoring/reportForms/word/index.vue
View File

@@ -72,7 +72,7 @@ import { mainHeight } from '@/utils/layout'
import { exportModel } from '@/api/process-boot/reportForms'
import { genFileId, ElMessage, ElNotification } from 'element-plus'
import type { UploadProps, UploadUserFile } from 'element-plus'
import dayjs from 'dayjs'
defineOptions({
// name: 'harmonic-boot/report/word'
})
@@ -152,7 +152,7 @@ const exportEvent = () => {
const url = window.URL.createObjectURL(blob)
const link = document.createElement('a') // 创建a标签
link.href = url
link.download = dotList.value.name // 设置下载的文件名
link.download = dotList.value.name+ dayjs().format('YYYYMMDD') // 设置下载的文件名
document.body.appendChild(link)
link.click() //执行下载
document.body.removeChild(link)

1
src/views/pqs/runManage/assessment/components/assess/index.vue
View File

@@ -73,7 +73,6 @@ import Outcome from './outcome.vue'
import { exportResult, downloadAssessTemplate, assessResult, userGetInfo } from '@/api/advance-boot/assess'
import { Loading } from '@element-plus/icons-vue'
import AssessTemplate from './assessTemplate.vue'
import { fa, tr } from 'element-plus/es/locale'
defineOptions({
// name: 'harmonic-boot/report/word'

3
src/views/pqs/voltageSags/report/monitoringPointReport/index.vue
View File

@@ -140,6 +140,7 @@ import { mainHeight } from '@/utils/layout'
import { getLineExport, getList, selectReleation } from '@/api/event-boot/report'
import { useMonitoringPoint } from '@/stores/monitoringPoint'
import { ElMessage } from 'element-plus'
import dayjs from 'dayjs'
defineOptions({
name: 'TransientReport/monitoringpointReport'
})
@@ -257,7 +258,7 @@ const exportEvent = () => {
const url = window.URL.createObjectURL(blob)
const link = document.createElement('a') // 创建a标签
link.href = url
link.download = '监测点报告' // 设置下载的文件名
link.download = dotList.value.name+'监测点报告'+ dayjs().format('YYYYMMDD') // 设置下载的文件名
document.body.appendChild(link)
link.click() //执行下载
document.body.removeChild(link)

631
src/views/pqs/voltageSags/report/regionalReports/index.vue
View File

@@ -1,298 +1,333 @@
<template>
<div class="default-main">
<TableHeader ref="TableHeaderRef" date-picker area :show-search="false">
<template v-slot:select>
<el-form-item label="报告类型">
<el-select v-model="tableStore.table.params.waveType" placeholder="请选择" clearable>
<el-option
v-for="item in waveTypeList"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
</el-form-item>
<el-form-item label=" 模板策略">
<el-select v-model="value" placeholder="请选择" @change="changeFn" clearable>
<el-option
v-for="item in templatePolicy"
:key="item.id"
:label="item.name"
:value="item.id"
></el-option>
</el-select>
</el-form-item>
</template>
<template #operation>
<el-button icon="el-icon-Download" type="primary" @click="exportEvent">生成报告</el-button>
</template>
</TableHeader>
<div class="box" :style="`height: calc(${tableStore.table.height} + 45px)`">
<el-row>
<el-col :span="12">
<div class="grid-content">
<div class="divBox">监测网分布</div>
</div>
</el-col>
<el-col :span="12">
<el-checkbox v-model="formInline.monitorDistributeChart">图形</el-checkbox>
</el-col>
</el-row>
<el-divider></el-divider>
<el-row>
<el-col :span="12">
<div class="grid-content">
<div class="divBox">暂降事件统计</div>
</div>
</el-col>
<el-col :span="12">
<el-checkbox v-model="formInline.eventCountTable">表格</el-checkbox>
<el-checkbox v-model="formInline.eventCountChart">图形</el-checkbox>
</el-col>
</el-row>
<el-divider></el-divider>
<el-row>
<el-col :span="12">
<div class="grid-content">
<div class="divBox">暂降密度</div>
</div>
</el-col>
<el-col :span="12">
<el-checkbox v-model="formInline.densityTable">表格</el-checkbox>
<el-checkbox v-model="formInline.densityChart">图形</el-checkbox>
</el-col>
</el-row>
<el-divider></el-divider>
<el-row>
<el-col :span="12">
<div class="grid-content">
<div class="divBox">暂降事件点</div>
</div>
</el-col>
<el-col :span="12">
<el-checkbox v-model="formInline.itic">ITIC</el-checkbox>
<el-checkbox v-model="formInline.f47">F47</el-checkbox>
</el-col>
</el-row>
<el-divider></el-divider>
<el-row>
<el-col :span="12">
<div class="grid-content">
<div class="divBox">概率分布</div>
</div>
</el-col>
<el-col :span="12">
<el-checkbox v-model="formInline.sagAmplitude">暂降幅值</el-checkbox>
<el-checkbox v-model="formInline.duration">持续时间</el-checkbox>
</el-col>
</el-row>
<el-divider></el-divider>
<el-row>
<el-col :span="12">
<div class="grid-content">
<div class="divBox">事件关联统计</div>
</div>
</el-col>
<el-col :span="12">
<el-checkbox v-model="formInline.eventRelevanceCountTable">表格</el-checkbox>
</el-col>
</el-row>
<el-divider></el-divider>
<el-row>
<el-col :span="12">
<div class="grid-content">
<div class="divBox">暂降原因</div>
</div>
</el-col>
<el-col :span="12">
<el-checkbox v-model="formInline.eventReasonTable">表格</el-checkbox>
<el-checkbox v-model="formInline.eventReasonChart">图形</el-checkbox>
</el-col>
</el-row>
<el-divider></el-divider>
<el-row>
<el-col :span="12">
<div class="grid-content">
<div class="divBox">暂降类型</div>
</div>
</el-col>
<el-col :span="12">
<el-checkbox v-model="formInline.eventTypeTable">表格</el-checkbox>
<el-checkbox v-model="formInline.eventTypeChart">图形</el-checkbox>
</el-col>
</el-row>
<el-divider></el-divider>
<el-row>
<el-col :span="12">
<div class="grid-content">
<div class="divBox">暂降热力图</div>
</div>
</el-col>
<el-col :span="12">
<el-checkbox v-model="formInline.thermodynamicChart">图形</el-checkbox>
</el-col>
</el-row>
<el-divider></el-divider>
</div>
</div>
</template>
<script setup lang="tsx">
import { ref, onMounted, provide, reactive } from 'vue'
import TableStore from '@/utils/tableStore'
import TableHeader from '@/components/table/header/index.vue'
import { useDictData } from '@/stores/dictData'
import { getAreaReport, getList, selectReleation } from '@/api/event-boot/report'
import { ElMessage } from 'element-plus'
defineOptions({
name: 'TransientReport/regionalreports'
})
const dictData = useDictData()
const waveTypeList = ref([
{
value: 0,
label: '暂态'
},
{
value: 1,
label: '暂降'
}
])
const templatePolicy: any = ref([])
const value = ref<string>('')
const tableStore = new TableStore({
url: '',
method: 'post',
column: []
})
const formInline: any = ref({
monitorDistributeChart: false,
eventCountTable: false,
eventCountChart: false,
densityTable: false,
densityChart: false,
itic: false,
f47: false,
sagAmplitude: false,
duration: false,
eventRelevanceCountTable: false,
eventReasonTable: false,
eventReasonChart: false,
eventTypeTable: false,
eventTypeChart: false,
thermodynamicChart: false
})
tableStore.table.params.waveType = 0
provide('tableStore', tableStore)
onMounted(() => {
// tableStore.index()
})
const TableHeaderRef = ref()
getList({
pageNum: 1,
pageSize: 100,
type: 1
}).then(res => {
templatePolicy.value = res.data.records
// 默认选中第一个
if (res.data.records && res.data.records.length > 0) {
value.value = res.data.records[0].id
// 触发 change 事件，加载对应的配置
changeFn(res.data.records[0].id)
}
})
// 模板策略变化
const changeFn = (val: any) => {
formInline.value = {
monitorDistributeChart: false,
eventCountTable: false,
eventCountChart: false,
densityTable: false,
densityChart: false,
itic: false,
f47: false,
sagAmplitude: false,
duration: false,
eventRelevanceCountTable: false,
eventReasonTable: false,
eventReasonChart: false,
eventTypeTable: false,
eventTypeChart: false,
thermodynamicChart: false
}
let data = {
id: val
}
selectReleation(data).then(res => {
res.data.forEach((item: any) => {
for (let k in formInline.value) {
if (item.name == k) {
formInline.value[k] = true
return
}
}
})
})
}
const exportEvent = () => {
formInline.value.statisticalType = dictData.getBasicData('Statistical_Type', [
'Report_Type',
'Manufacturer',
'Voltage_Level',
'Load_Type'
])[0]
formInline.value.monitorFlag = 2
formInline.value.powerFlag = 2
formInline.value.searchBeginTime = TableHeaderRef.value.datePickerRef.timeValue[0]
formInline.value.searchEndTime = TableHeaderRef.value.datePickerRef.timeValue[1]
formInline.value.deptIndex = tableStore.table.params.deptIndex
formInline.value.monitorFlag = 2
formInline.value.powerFlag = 2
formInline.value.waveType = tableStore.table.params.waveType
formInline.value.interval = tableStore.table.params.timeFlag
ElMessage('生成报告中,请稍等!')
getAreaReport(formInline.value).then((res: any) => {
let blob = new Blob([res], {
type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document;charset=UTF-8'
})
const url = window.URL.createObjectURL(blob)
const link = document.createElement('a') // 创建a标签
link.href = url
// link.download = "电压暂降事件分析报告"; // 设置下载的文件名
link.download = '区域报告' // 设置下载的文件名
document.body.appendChild(link)
link.click() //执行下载
document.body.removeChild(link)
})
}
</script>
<style lang="scss" scoped>
.el-select-dropdown__item.selected {
font-weight: normal;
}
.grid-content {
text-align: center;
}
.divBox {
width: 250px;
height: 31px;
margin: auto;
line-height: 32px;
border: 1px solid #c9c9c9;
&:hover {
border: 1px solid #002255;
}
}
.box {
padding: 10px;
margin-top: 10px;
overflow-y: auto;
border: 1px solid var(--el-border-color);
}
.el-divider--horizontal {
margin: 10px 0;
}
</style>
<template>
<div class="default-main" :style="height">
<splitpanes style="height: 100%" class="default-theme" id="navigation-splitpanes">
<pane :size="size">
<PointTree
:default-expand-all="false"
@node-click="handleNodeClick"
@init="handleNodeClick"
></PointTree>
</pane>
<pane style="background: #fff" :style="height">
<TableHeader ref="TableHeaderRef" date-picker :show-search="false">
<template v-slot:select>
<el-form-item label="报告类型">
<el-select v-model="tableStore.table.params.waveType" placeholder="请选择" clearable>
<el-option
v-for="item in waveTypeList"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
</el-form-item>
<!-- <el-form-item label=" 模板策略">
<el-select v-model="value" placeholder="请选择" @change="changeFn" clearable>
<el-option
v-for="item in templatePolicy"
:key="item.id"
:label="item.name"
:value="item.id"
></el-option>
</el-select>
</el-form-item> -->
</template>
<template #operation>
<el-button icon="el-icon-Download" type="primary" @click="exportEvent">生成报告</el-button>
</template>
</TableHeader>
<div class="box" :style="`height: calc(${tableStore.table.height} + 45px)`">
<el-row>
<el-col :span="12">
<div class="grid-content">
<div class="divBox">监测网分布</div>
</div>
</el-col>
<el-col :span="12">
<el-checkbox v-model="formInline.monitorDistributeChart">图形</el-checkbox>
</el-col>
</el-row>
<el-divider></el-divider>
<el-row>
<el-col :span="12">
<div class="grid-content">
<div class="divBox">暂降事件统计</div>
</div>
</el-col>
<el-col :span="12">
<el-checkbox v-model="formInline.eventCountTable">表格</el-checkbox>
<el-checkbox v-model="formInline.eventCountChart">图形</el-checkbox>
</el-col>
</el-row>
<el-divider></el-divider>
<el-row>
<el-col :span="12">
<div class="grid-content">
<div class="divBox">暂降密度</div>
</div>
</el-col>
<el-col :span="12">
<el-checkbox v-model="formInline.densityTable">表格</el-checkbox>
<el-checkbox v-model="formInline.densityChart">图形</el-checkbox>
</el-col>
</el-row>
<el-divider></el-divider>
<el-row>
<el-col :span="12">
<div class="grid-content">
<div class="divBox">暂降事件点</div>
</div>
</el-col>
<el-col :span="12">
<el-checkbox v-model="formInline.itic">ITIC</el-checkbox>
<el-checkbox v-model="formInline.f47">F47</el-checkbox>
</el-col>
</el-row>
<el-divider></el-divider>
<el-row>
<el-col :span="12">
<div class="grid-content">
<div class="divBox">概率分布</div>
</div>
</el-col>
<el-col :span="12">
<el-checkbox v-model="formInline.sagAmplitude">暂降幅值</el-checkbox>
<el-checkbox v-model="formInline.duration">持续时间</el-checkbox>
</el-col>
</el-row>
<el-divider></el-divider>
<el-row>
<el-col :span="12">
<div class="grid-content">
<div class="divBox">事件关联统计</div>
</div>
</el-col>
<el-col :span="12">
<el-checkbox v-model="formInline.eventRelevanceCountTable">表格</el-checkbox>
</el-col>
</el-row>
<el-divider></el-divider>
<el-row>
<el-col :span="12">
<div class="grid-content">
<div class="divBox">暂降原因</div>
</div>
</el-col>
<el-col :span="12">
<el-checkbox v-model="formInline.eventReasonTable">表格</el-checkbox>
<el-checkbox v-model="formInline.eventReasonChart">图形</el-checkbox>
</el-col>
</el-row>
<el-divider></el-divider>
<el-row>
<el-col :span="12">
<div class="grid-content">
<div class="divBox">暂降类型</div>
</div>
</el-col>
<el-col :span="12">
<el-checkbox v-model="formInline.eventTypeTable">表格</el-checkbox>
<el-checkbox v-model="formInline.eventTypeChart">图形</el-checkbox>
</el-col>
</el-row>
<el-divider></el-divider>
<el-row>
<el-col :span="12">
<div class="grid-content">
<div class="divBox">暂降热力图</div>
</div>
</el-col>
<el-col :span="12">
<el-checkbox v-model="formInline.thermodynamicChart">图形</el-checkbox>
</el-col>
</el-row>
<el-divider></el-divider>
</div>
</pane>
</splitpanes>
</div>
</template>
<script setup lang="tsx">
import { ref, onMounted, provide, reactive } from 'vue'
import TableStore from '@/utils/tableStore'
import 'splitpanes/dist/splitpanes.css'
import { Splitpanes, Pane } from 'splitpanes'
import TableHeader from '@/components/table/header/index.vue'
import { useDictData } from '@/stores/dictData'
import { getAreaReport, getList, selectReleation } from '@/api/event-boot/report'
import { ElMessage } from 'element-plus'
import PointTree from '@/components/tree/pqs/areaTree.vue'
import { mainHeight } from '@/utils/layout'
import dayjs from 'dayjs'
defineOptions({
name: 'TransientReport/regionalreports'
})
const height = mainHeight(20)
const size = ref(19)
const dotList:any = ref({})
const dictData = useDictData()
const waveTypeList = ref([
{
value: 0,
label: '暂态'
},
{
value: 1,
label: '暂降'
}
])
const templatePolicy: any = ref([])
const value = ref<string>('')
const tableStore = new TableStore({
url: '',
method: 'post',
column: []
})
const formInline: any = ref({
monitorDistributeChart: false,
eventCountTable: false,
eventCountChart: false,
densityTable: false,
densityChart: false,
itic: false,
f47: false,
sagAmplitude: false,
duration: false,
eventRelevanceCountTable: false,
eventReasonTable: false,
eventReasonChart: false,
eventTypeTable: false,
eventTypeChart: false,
thermodynamicChart: false
})
tableStore.table.params.waveType = 0
provide('tableStore', tableStore)
onMounted(() => {
const dom = document.getElementById('navigation-splitpanes')
if (dom) {
size.value = Math.round((180 / dom.offsetHeight) * 120)
}
// tableStore.index()
})
const handleNodeClick = (data: any, node: any) => {
dotList.value = data
}
const TableHeaderRef = ref()
getList({
pageNum: 1,
pageSize: 100,
type: 1
}).then(res => {
templatePolicy.value = res.data.records
// 默认选中第一个
if (res.data.records && res.data.records.length > 0) {
value.value = res.data.records[0].id
// 触发 change 事件，加载对应的配置
changeFn(res.data.records[0].id)
}
})
// 模板策略变化
const changeFn = (val: any) => {
formInline.value = {
monitorDistributeChart: false,
eventCountTable: false,
eventCountChart: false,
densityTable: false,
densityChart: false,
itic: false,
f47: false,
sagAmplitude: false,
duration: false,
eventRelevanceCountTable: false,
eventReasonTable: false,
eventReasonChart: false,
eventTypeTable: false,
eventTypeChart: false,
thermodynamicChart: false
}
let data = {
id: val
}
selectReleation(data).then(res => {
res.data.forEach((item: any) => {
for (let k in formInline.value) {
if (item.name == k) {
formInline.value[k] = true
return
}
}
})
})
}
const exportEvent = () => {
formInline.value.statisticalType = dictData.getBasicData('Statistical_Type', [
'Report_Type',
'Manufacturer',
'Voltage_Level',
'Load_Type'
])[0]
formInline.value.monitorFlag = 2
formInline.value.powerFlag = 2
formInline.value.searchBeginTime = TableHeaderRef.value.datePickerRef.timeValue[0]
formInline.value.searchEndTime = TableHeaderRef.value.datePickerRef.timeValue[1]
formInline.value.deptIndex = dotList.value.id
formInline.value.monitorFlag = 2
formInline.value.powerFlag = 2
formInline.value.waveType = tableStore.table.params.waveType
formInline.value.interval = tableStore.table.params.timeFlag
ElMessage('生成报告中,请稍等!')
getAreaReport(formInline.value).then((res: any) => {
let blob = new Blob([res], {
type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document;charset=UTF-8'
})
const url = window.URL.createObjectURL(blob)
const link = document.createElement('a') // 创建a标签
link.href = url
// link.download = "电压暂降事件分析报告"; // 设置下载的文件名
link.download = dotList.value.name +'区域报告' + dayjs().format('YYYYMMDD') // 设置下载的文件名
document.body.appendChild(link)
link.click() //执行下载
document.body.removeChild(link)
})
}
</script>
<style lang="scss" scoped>
.el-select-dropdown__item.selected {
font-weight: normal;
}
.grid-content {
text-align: center;
}
.divBox {
width: 250px;
height: 31px;
margin: auto;
line-height: 32px;
border: 1px solid #c9c9c9;
&:hover {
border: 1px solid #002255;
}
}
.box {
padding: 10px;
margin-top: 10px;
overflow-y: auto;
border: 1px solid var(--el-border-color);
}
.el-divider--horizontal {
margin: 10px 0;
}
.splitpanes.default-theme .splitpanes__pane {
background: #eaeef1;
}
.box {
padding: 10px;
}
</style>

3
types/table.d.ts vendored
View File

@@ -15,6 +15,7 @@ declare global {
webPagingData: TableRow[][]
// 表格加载状态
loading: boolean
exportLoading: boolean
// 当前选中行
selection: TableRow[]
// 表格列定义
@@ -84,7 +85,7 @@ declare global {
) => string
children?: TableColumn[]
property?: string
clickable?: boolean // 是否可点击
clickable?: boolean // 是否可点击
}
/* 表格右侧操作按钮 */