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' import createAxios from '@/utils/request'
export function exportModel(data: any) { export function exportModel(data: any) {
return createAxios({ return createAxios({
url: '/harmonic-boot/exportmodel/exportModel', url: '/harmonic-boot/exportmodel/exportModel',
method: 'post', method: 'post',
data: data, data: data,
responseType: 'blob' 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 <el-button
@click="onExport" @click="onExport"
v-if="showExport" v-if="showExport"
:loading="tableStore.table.loading" :loading="tableStore.table.exportLoading"
type="primary" type="primary"
icon="el-icon-Download" 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 //计算高度 publicHeight?: number //计算高度
resetCallback?: () => void // 重置 resetCallback?: () => void // 重置
loadCallback?: () => void // 接口调用后的回调 loadCallback?: () => void // 接口调用后的回调
exportProcessingData?:() => void //导出处理数据 exportProcessingData?: () => void //导出处理数据
beforeSearchFun?: () => void // 接口调用前的回调 beforeSearchFun?: () => void // 接口调用前的回调
} }
@@ -45,8 +45,9 @@ export default class TableStore {
pageNum: 1, pageNum: 1,
pageSize: 20 pageSize: 20
}, },
filename:null, filename: null,
loading: true, loading: true,
exportLoading: false,
column: [], column: [],
loadCallback: null, loadCallback: null,
exportProcessingData: null, exportProcessingData: null,
@@ -65,7 +66,7 @@ export default class TableStore {
this.table.filename = options.filename || null this.table.filename = options.filename || null
this.table.column = options.column this.table.column = options.column
this.showPage = options.showPage !== false this.showPage = options.showPage !== false
this.table.publicHeight = options.publicHeight || 0 this.table.publicHeight = options.publicHeight || 0
this.table.resetCallback = options.resetCallback || null this.table.resetCallback = options.resetCallback || null
this.table.loadCallback = options.loadCallback || null this.table.loadCallback = options.loadCallback || null
@@ -84,13 +85,11 @@ export default class TableStore {
this.initData = JSON.parse(JSON.stringify(this.table.params)) this.initData = JSON.parse(JSON.stringify(this.table.params))
} }
if (!this.timeAll) { if (!this.timeAll) {
delete this.table.params.startTime; delete this.table.params.startTime
delete this.table.params.endTime; delete this.table.params.endTime
delete this.table.params.searchBeginTime; delete this.table.params.searchBeginTime
delete this.table.params.searchEndTime; delete this.table.params.searchEndTime
delete this.table.params.timeFlag; delete this.table.params.timeFlag
} }
createAxios( createAxios(
Object.assign( Object.assign(
@@ -130,7 +129,6 @@ export default class TableStore {
* @param data 携带数据 * @param data 携带数据
*/ */
onTableAction = (event: string, data: anyObj) => { onTableAction = (event: string, data: anyObj) => {
const actionFun = new Map([ const actionFun = new Map([
[ [
'search', 'search',
@@ -202,6 +200,7 @@ export default class TableStore {
[ [
'export', 'export',
() => { () => {
this.table.exportLoading = true
// this.index() // this.index()
console.log('export') console.log('export')
let params = { ...this.table.params, pageNum: 1, pageSize: this.table.total } 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) requestPayload(this.method, params, this.paramsPOST)
) )
).then(res => { )
this.table.allData = filtration(res.data.records || res.data) .then(res => {
console.log('11111',this.table) this.table.allData = filtration(res.data.records || res.data)
this.table.exportProcessingData && this.table.exportProcessingData() this.table.exportProcessingData && this.table.exportProcessingData()
this.table.allFlag = data.showAllFlag || true 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', field: 'frequencyBiLi',
title: '超标占比(%)', title: '累计占比(%)',
minWidth: '100px',
formatter: (row: any) => {
return row.cellValue == -1 ? '/' : row.cellValue
}
},
{
field: 'frequencyDayAvgBiLi',
title: '日均占比(%)',
minWidth: '100px', minWidth: '100px',
formatter: (row: any) => { formatter: (row: any) => {
return row.cellValue == -1 ? '/' : row.cellValue return row.cellValue == -1 ? '/' : row.cellValue
@@ -173,7 +181,15 @@ const tableStore = new TableStore({
}, },
{ {
field: 'voltageBiLi', field: 'voltageBiLi',
title: '超标占比(%)', title: '累计占比(%)',
minWidth: '100px',
formatter: (row: any) => {
return row.cellValue == -1 ? '/' : row.cellValue
}
},
{
field: 'voltageDayAvgBiLi',
title: '日均占比(%)',
minWidth: '100px', minWidth: '100px',
formatter: (row: any) => { formatter: (row: any) => {
return row.cellValue == -1 ? '/' : row.cellValue return row.cellValue == -1 ? '/' : row.cellValue
@@ -200,9 +216,18 @@ const tableStore = new TableStore({
return row.cellValue == -1 ? '/' : row.cellValue return row.cellValue == -1 ? '/' : row.cellValue
} }
}, },
{ {
field: 'harmonicVoltageBiLi', field: 'harmonicVoltageBiLi',
title: '超标占比(%)', title: '累计占比(%)',
minWidth: '100px',
formatter: (row: any) => {
return row.cellValue == -1 ? '/' : row.cellValue
}
},
{
field: 'harmonicVoltageDayAvgBiLi',
title: '日均占比(%)',
minWidth: '100px', minWidth: '100px',
formatter: (row: any) => { formatter: (row: any) => {
return row.cellValue == -1 ? '/' : row.cellValue return row.cellValue == -1 ? '/' : row.cellValue
@@ -231,7 +256,15 @@ const tableStore = new TableStore({
}, },
{ {
field: 'harmonicCurrentBiLi', field: 'harmonicCurrentBiLi',
title: '超标占比(%)', title: '累计占比(%)',
minWidth: '100px',
formatter: (row: any) => {
return row.cellValue == -1 ? '/' : row.cellValue
}
},
{
field: 'harmonicCurrentDayAvgBiLi',
title: '日均占比(%)',
minWidth: '100px', minWidth: '100px',
formatter: (row: any) => { formatter: (row: any) => {
return row.cellValue == -1 ? '/' : row.cellValue return row.cellValue == -1 ? '/' : row.cellValue
@@ -260,7 +293,15 @@ const tableStore = new TableStore({
}, },
{ {
field: 'threePhaseVoltageBiLi', field: 'threePhaseVoltageBiLi',
title: '超标占比(%)', title: '累计占比(%)',
minWidth: '100px',
formatter: (row: any) => {
return row.cellValue == -1 ? '/' : row.cellValue
}
},
{
field: 'threePhaseVoltageDayAvgBiLi',
title: '日均占比(%)',
minWidth: '100px', minWidth: '100px',
formatter: (row: any) => { formatter: (row: any) => {
return row.cellValue == -1 ? '/' : row.cellValue return row.cellValue == -1 ? '/' : row.cellValue
@@ -289,7 +330,15 @@ const tableStore = new TableStore({
}, },
{ {
field: 'flickerBiLi', field: 'flickerBiLi',
title: '超标占比(%)', title: '累计占比(%)',
minWidth: '100px',
formatter: (row: any) => {
return row.cellValue == -1 ? '/' : row.cellValue
}
},
{
field: 'flickerDayAvgBiLi',
title: '日均占比(%)',
minWidth: '100px', minWidth: '100px',
formatter: (row: any) => { formatter: (row: any) => {
return row.cellValue == -1 ? '/' : row.cellValue return row.cellValue == -1 ? '/' : row.cellValue
@@ -318,7 +367,15 @@ const tableStore = new TableStore({
}, },
{ {
field: 'negativeBiLi', field: 'negativeBiLi',
title: '超标占比(%)', title: '累计占比(%)',
minWidth: '100px',
formatter: (row: any) => {
return row.cellValue == -1 ? '/' : row.cellValue
}
},
{
field: 'negativeDayAvgBiLi',
title: '日均占比(%)',
minWidth: '100px', minWidth: '100px',
formatter: (row: any) => { formatter: (row: any) => {
return row.cellValue == -1 ? '/' : row.cellValue return row.cellValue == -1 ? '/' : row.cellValue
@@ -347,7 +404,15 @@ const tableStore = new TableStore({
}, },
{ {
field: 'interHarmonicBiLi', field: 'interHarmonicBiLi',
title: '超标占比(%)', title: '累计占比(%)',
minWidth: '100px',
formatter: (row: any) => {
return row.cellValue == -1 ? '/' : row.cellValue
}
},
{
field: 'interHarmonicDayAvgBiLi',
title: '日均占比(%)',
minWidth: '100px', minWidth: '100px',
formatter: (row: any) => { formatter: (row: any) => {
return row.cellValue == -1 ? '/' : row.cellValue 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 { exportModel } from '@/api/process-boot/reportForms'
import { genFileId, ElMessage, ElNotification } from 'element-plus' import { genFileId, ElMessage, ElNotification } from 'element-plus'
import type { UploadProps, UploadUserFile } from 'element-plus' import type { UploadProps, UploadUserFile } from 'element-plus'
import dayjs from 'dayjs'
defineOptions({ defineOptions({
// name: 'harmonic-boot/report/word' // name: 'harmonic-boot/report/word'
}) })
@@ -152,7 +152,7 @@ const exportEvent = () => {
const url = window.URL.createObjectURL(blob) const url = window.URL.createObjectURL(blob)
const link = document.createElement('a') // 创建a标签 const link = document.createElement('a') // 创建a标签
link.href = url link.href = url
link.download = dotList.value.name // 设置下载的文件名 link.download = dotList.value.name+ dayjs().format('YYYYMMDD') // 设置下载的文件名
document.body.appendChild(link) document.body.appendChild(link)
link.click() //执行下载 link.click() //执行下载
document.body.removeChild(link) 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 { exportResult, downloadAssessTemplate, assessResult, userGetInfo } from '@/api/advance-boot/assess'
import { Loading } from '@element-plus/icons-vue' import { Loading } from '@element-plus/icons-vue'
import AssessTemplate from './assessTemplate.vue' import AssessTemplate from './assessTemplate.vue'
import { fa, tr } from 'element-plus/es/locale'
defineOptions({ defineOptions({
// name: 'harmonic-boot/report/word' // 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 { getLineExport, getList, selectReleation } from '@/api/event-boot/report'
import { useMonitoringPoint } from '@/stores/monitoringPoint' import { useMonitoringPoint } from '@/stores/monitoringPoint'
import { ElMessage } from 'element-plus' import { ElMessage } from 'element-plus'
import dayjs from 'dayjs'
defineOptions({ defineOptions({
name: 'TransientReport/monitoringpointReport' name: 'TransientReport/monitoringpointReport'
}) })
@@ -257,7 +258,7 @@ const exportEvent = () => {
const url = window.URL.createObjectURL(blob) const url = window.URL.createObjectURL(blob)
const link = document.createElement('a') // 创建a标签 const link = document.createElement('a') // 创建a标签
link.href = url link.href = url
link.download = '监测点报告' // 设置下载的文件名 link.download = dotList.value.name+'监测点报告'+ dayjs().format('YYYYMMDD') // 设置下载的文件名
document.body.appendChild(link) document.body.appendChild(link)
link.click() //执行下载 link.click() //执行下载
document.body.removeChild(link) document.body.removeChild(link)

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

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