绘制二级评估页面

This commit is contained in:
GGJ
2025-03-31 14:33:05 +08:00
parent 4e40779a0e
commit d29b9c819d
12 changed files with 1095 additions and 24 deletions

View File

@@ -4,7 +4,7 @@ export const defaultAttribute: VxeTableProps = {
align: 'center', align: 'center',
headerCellClassName: 'table-header-cell', headerCellClassName: 'table-header-cell',
border: true, border: true,
stripe: true, // stripe: true,
size: 'small', size: 'small',
columnConfig: { resizable: true }, columnConfig: { resizable: true },
rowConfig: { isCurrent: true, isHover: true }, rowConfig: { isCurrent: true, isHover: true },

View File

@@ -0,0 +1,97 @@
<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 { defineProps } from 'vue'
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 classificationData = dictData.getBasicData('Statistical_Type', ['Report_Type'])
const tree = ref()
const treeRef = ref()
const formData = ref({
deptIndex: adminInfo.$state.deptIndex,
monitorFlag: 2,
powerFlag: 2,
loadType: null,
manufacturer: null,
serverName: 'event-boot',
statisticalType: classificationData[0].id,
scale: null
})
const loadData = () => {
let obj = classificationData.find(function (i) {
return i.id === formData.value.statisticalType
}) || { code: '' }
let form = JSON.parse(JSON.stringify(formData.value))
form.statisticalType = classificationData.find((item: any) => item.id == form.statisticalType)
let nodeKey = ''
getTerminalTreeForFive(form).then(res => {
console.log(res)
res.data = [
{
name: '国网xx供电公司',
level: -1,
id: 0,
children: [
{
name: '特种钢厂',
level: 1,
id: 2
},
{
name: '体育中心',
level: 1,
id: 3
}
]
}
]
nodeKey = res.data[0].children[0]
emit('init', res.data[0].children[0])
tree.value = res.data
if (nodeKey) {
nextTick(() => {
treeRef.value.treeRef.setCurrentKey(nodeKey)
// treeRef.value.treeRef.setExpandedKeys(nodeKey)
})
}
})
}
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>

View File

@@ -73,4 +73,12 @@
.vxe-modal--wrapper { .vxe-modal--wrapper {
z-index: 5000 !important; z-index: 5000 !important;
} }
.vxe-table--body .vxe-body--row:nth-child(even) {
background-color: #f9f9f9;
// background-color: var(--el-color-primary-light-9);
}
.vxe-table--body .vxe-body--row:nth-child(odd) {
background-color: #ffffff;
}

View File

@@ -0,0 +1,93 @@
<template>
<div :style="height">
<splitpanes style="height: 100%" class="default-theme" id="navigation-splitpanes">
<pane :size="size">
<AssessTree
:default-expand-all="false"
@node-click="handleNodeClick"
@init="handleNodeClick"
></AssessTree>
</pane>
<pane style="background: #fff">
<div class="actionButtons mb10">
<el-button type="primary" icon="el-icon-Upload">导入数据背景</el-button>
<el-button type="primary" icon="el-icon-Memo" @click="assess">评估</el-button>
<el-button type="primary" icon="el-icon-Download">导出报告</el-button>
</div>
<div :style="collapseHeight" style="overflow-y: auto">
<el-collapse v-model="collapseName">
<el-collapse-item title="基本信息" :name="1">
<information />
</el-collapse-item>
<el-collapse-item title="评估结果信息" :name="2">
<Outcome />
</el-collapse-item>
</el-collapse>
</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 AssessTree from '@/components/tree/pqs/assessTree.vue'
import TableHeader from '@/components/table/header/index.vue'
import { mainHeight } from '@/utils/layout'
import information from './information.vue'
import Outcome from './outcome.vue'
defineOptions({
// name: 'harmonic-boot/report/word'
})
const collapseName = ref([1, 2])
const height = mainHeight(80)
const collapseHeight = mainHeight(125)
const size = ref(0)
const dotList: any = ref({})
const tableStore = new TableStore({
url: '',
method: 'POST',
column: [],
beforeSearchFun: () => {},
loadCallback: () => {}
})
provide('tableStore', tableStore)
// 评估
const assess = () => {
collapseName.value = [2]
}
onMounted(() => {
const dom = document.getElementById('navigation-splitpanes')
setTimeout(() => {
if (dom) {
size.value = Math.round((180 / dom.offsetHeight) * 100)
}
}, 100)
})
const handleNodeClick = (data: any, node: any) => {
dotList.value = data
}
</script>
<style lang="scss" scoped>
.splitpanes.default-theme .splitpanes__pane {
background: #eaeef1;
}
:deep(.el-collapse-item__header) {
font-family: AlimamaDongFangDaKai;
font-size: 20px;
}
.actionButtons {
display: flex;
justify-content: end;
}
</style>

View File

@@ -0,0 +1,259 @@
<template>
<div>
<el-collapse v-model="activeNames">
<el-collapse v-model="activeNames">
<el-collapse-item title="用户参数维护" :name="1">
<el-descriptions :column="4" border>
<el-descriptions-item label="所在地市">张家口</el-descriptions-item>
<el-descriptions-item label="用户名称">名称1</el-descriptions-item>
<el-descriptions-item label="用户协议容量(MVA)">100</el-descriptions-item>
<el-descriptions-item label="是否包含电容器"></el-descriptions-item>
<el-descriptions-item label="风电场装机容量"></el-descriptions-item>
</el-descriptions>
</el-collapse-item>
<el-collapse-item title="系统参数维护" :name="2">
<el-descriptions :column="4" border>
<el-descriptions-item label="接入变电站">变电站1</el-descriptions-item>
<el-descriptions-item label="变电站电压等级">220V</el-descriptions-item>
<el-descriptions-item label="接入母线">母线1</el-descriptions-item>
<el-descriptions-item label="母线电压等级">220V</el-descriptions-item>
<el-descriptions-item label="供电设备容量(MVA)">100</el-descriptions-item>
<el-descriptions-item label="最小短路容量(MVA)">10</el-descriptions-item>
<el-descriptions-item label="PCC点名称">名称1</el-descriptions-item>
<el-descriptions-item label="PCC点电网电阻">20</el-descriptions-item>
<el-descriptions-item label="长度">30</el-descriptions-item>
<el-descriptions-item label="回路数">2</el-descriptions-item>
<el-descriptions-item label="导线类型"></el-descriptions-item>
</el-descriptions>
</el-collapse-item>
<el-collapse-item :title="item.name" v-for="(item, index) in column" :name="index + 3">
<div style="height: 200px">
<vxe-table height="auto" :data="form[item.key]" v-bind="defaultAttribute">
<vxe-column type="checkbox" width="60"></vxe-column>
<vxe-column type="seq" title="序号" width="60px"></vxe-column>
<vxe-column
v-for="(k, index) in item.child"
:key="index"
:field="k.field"
:title="k.title"
></vxe-column>
</vxe-table>
</div>
</el-collapse-item>
</el-collapse>
</el-collapse>
</div>
</template>
<script setup lang="ts">
import { ref, reactive } from 'vue'
import { defaultAttribute } from '@/components/table/defaultAttribute'
const activeNames = ref([1, 2, 3, 4, 5, 6, 7])
const form: any = ref({
city: '',
windFarms: '',
transformer: [
{
name: '变压器1',
name1: '变压器型号1',
name2: '100'
},
{
name: '变压器2',
name1: '变压器型号2',
name2: '100'
}
], //变压器
capacitor: [
{
name: '电容器1',
name1: '20',
name2: '100',
name3: '72.73',
name4: '400V'
},
{
name: '电容器2',
name1: '20',
name2: '100',
name3: '72.73',
name4: '400V'
}
], //电容器
windPower: [
{
name: '风机1',
name1: '0.1',
name2: '100'
},
{
name: '风机2',
name1: '0.1',
name2: '100'
}
], //风电
load: [], //用户负荷
impact: [] //冲击性负荷
})
const column: any = ref([
{
name: '变压器参数维护',
key: 'transformer',
child: [
{
title: '用户变压器名称',
field: 'name'
},
{
title: '变压器型号',
field: 'name1'
},
{
title: '变压器台数',
field: 'name2'
}
]
},
{
name: '电容器组参数维护',
key: 'capacitor',
child: [
{
title: '用户电容器名称',
field: 'name'
},
{
title: '电容器组数量',
field: 'name1'
},
{
title: '单组容量(kVar)',
field: 'name2'
},
{
title: '电抗率(%)',
field: 'name3'
},
{
title: '电压等级',
field: 'name4'
}
]
},
{
name: '风电参数',
key: 'windPower',
child: [
{
title: '风机名称',
field: 'name'
},
{
title: '风机闪变系数',
field: 'name1'
},
{
title: '风机额定视在功率',
field: 'name2'
}
]
},
{
name: '用户负荷',
key: 'load',
child: [
{
title: '配电窒名称',
field: 'name'
},
{
title: '进线电压',
field: 'name1'
},
{
title: '配变容量(kVA)',
field: 'name2'
},
{
title: '配电变压器阻抗(%)',
field: 'name3'
},
{
title: '谐波源特性',
field: 'name4'
},
{
title: '配变低压侧电压',
field: 'name5'
},
{
title: '非线性负荷功率(kW)',
field: 'name6'
},
{
title: '功率因素',
field: 'name7'
}
]
},
{
name: '冲击性负荷',
key: 'impact',
child: [
{
title: '冲击负荷类型',
field: 'name'
},
{
title: '冲击负荷功率(MVA)',
field: 'name1'
},
{
title: '数量',
field: 'name2'
},
{
title: '启动方式',
field: 'name3'
},
{
title: '启动容量倍数',
field: 'name4'
},
{
title: '冲击负荷高压侧电压',
field: 'name5'
},
{
title: '有无隔离变',
field: 'name6'
},
{
title: '隔离变阻抗(%)',
field: 'name7'
},
{
title: '低压侧电压',
field: 'name8'
},
{
title: '负荷频度选择',
field: 'name9'
},
{
title: '闪变叠加系数',
field: 'name10'
}
]
}
])
</script>
<style lang="scss" scoped>
:deep(.el-collapse-item__header) {
padding-left: 20px;
font-size: 16px !important;
}
:deep(.el-descriptions__cell) {
width: 12.5%;
}
</style>

View File

@@ -0,0 +1,11 @@
<template>
<div>123 </div>
</template>
<script setup lang='ts'>
import { ref, reactive } from 'vue'
</script>
<style lang="scss" scoped>
</style>

View File

@@ -0,0 +1,53 @@
<template>
<el-dialog draggable width="800px" v-model="dialogVisible" :title="title">
<el-scrollbar>
<el-form :inline="false" :model="form" label-width="auto" class="form-two">
<el-form-item v-for="(item, index) in child" :key="index" :label="item.title">
<el-input v-model="form[item.field]" placeholder="请输入菜单名称" />
</el-form-item>
</el-form>
</el-scrollbar>
<template #footer>
<span class="dialog-footer">
<el-button @click="dialogVisible = false">取消</el-button>
<el-button type="primary" @click="submit">确认</el-button>
</span>
</template>
</el-dialog>
</template>
<script lang="ts" setup>
import { ref, inject } from 'vue'
import { reactive } from 'vue'
const emits = defineEmits<{
(e: 'init'): void
}>()
const child: any = ref([])
const form: any = reactive({})
const dialogVisible = ref(false)
const title = ref('新增菜单')
const open = (row: any) => {
title.value = row.title + `_${row.item.name}`
child.value = row.item.child
if (row.title == '新增') {
row.item.child.forEach((item: any) => {
form[item.field] = ''
})
} else {
row.item.child.forEach((item: any) => {
form[item.field] = row.row[item.field]
})
}
dialogVisible.value = true
}
const submit = async () => {
emits('init')
dialogVisible.value = false
}
defineExpose({ open })
</script>

View File

@@ -1,36 +1,407 @@
<template> <template>
<div class="default-main pd10"> <div class="default-main pd10">
<div class="actionButtons"> <div class="actionButtons">
<el-button type="primary" icon="el-icon-Check">保存</el-button> <el-button type="primary" icon="el-icon-Check" class="md8">保存</el-button>
<back-component style="margin: 8px" /> <back-component style="margin: 8px" />
</div> </div>
<div :style="pageHeight" style="overflow-y: auto"> <div :style="pageHeight" style="overflow-y: auto">
<el-collapse v-model="activeNames"> <el-collapse v-model="activeNames">
<el-collapse-item title="用户参数维护" name="1"> <el-collapse-item title="用户参数维护" :name="1">
<el-form :inline="true" :model="form" class="form-four" label-width="auto">
<el-form-item label="所在地市">
<el-select v-model="form.city" clearable placeholder="请选择所在地市">
<el-option
v-for="item in areaOptionList"
:key="item.id"
:label="item.name"
:value="item.id"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="用户名称">
<el-input v-model="form.city" placeholder="用户名称" clearable />
</el-form-item>
<el-form-item label="用户协议容量">
<el-input v-model="form.city" placeholder="用户协议容量" clearable>
<template #append>MVA</template>
</el-input>
</el-form-item>
<el-form-item label="是否包含电容器">
<el-select v-model="form.windFarms" placeholder="是否包含电容器" clearable>
<el-option label="是" value="1" />
<el-option label="否" value="0" />
</el-select>
</el-form-item>
<el-form-item label="是否包含风电场">
<el-select v-model="form.windFarms" placeholder="是否包含风电场" clearable>
<el-option label="是" value="1" />
<el-option label="否" value="0" />
</el-select>
</el-form-item>
<el-form-item label="风电场装机容量">
<el-input v-model="form.city" placeholder="风电场装机容量" clearable />
</el-form-item>
</el-form>
</el-collapse-item> </el-collapse-item>
<el-collapse-item title="系统参数维护" name="4"></el-collapse-item> <el-collapse-item title="系统参数维护" :name="2">
<el-collapse-item title="用户变压器参数维护" name="2"></el-collapse-item> <el-form :inline="true" :model="form" class="form-four" label-width="auto">
<el-collapse-item title="用户电容器组参数维护" name="3"></el-collapse-item> <el-form-item label="接入变电站">
<el-select v-model="form.city" clearable placeholder="请选择接入变电站">
<el-option
v-for="item in areaOptionList"
:key="item.id"
:label="item.name"
:value="item.id"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="变电站电压等级">
<el-input v-model="form.city" placeholder="变电站电压等级" clearable />
</el-form-item>
<el-form-item label="接入母线">
<el-input v-model="form.city" placeholder="接入母线" clearable></el-input>
</el-form-item>
<el-form-item label="母线电压等级">
<el-select v-model="form.windFarms" placeholder="母线电压等级" clearable>
<el-option label="是" value="1" />
<el-option label="否" value="0" />
</el-select>
</el-form-item>
<el-form-item label="供电设备容量">
<el-input v-model="form.city" placeholder="供电设备容量" clearable>
<template #append>MVA</template>
</el-input>
</el-form-item>
<el-form-item label="最小短路容量">
<el-input v-model="form.city" placeholder="最小短路容量" clearable>
<template #append>MVA</template>
</el-input>
</el-form-item>
<el-form-item label="PCC点名称">
<el-select v-model="form.windFarms" placeholder="PCC点名称" clearable>
<el-option label="是" value="1" />
<el-option label="否" value="0" />
</el-select>
</el-form-item>
<el-form-item label="PCC点电网电阻">
<el-input v-model="form.city" placeholder="PCC点电网电阻" clearable />
</el-form-item>
<el-form-item label="长度">
<el-input v-model="form.city" placeholder="长度" clearable />
</el-form-item>
<el-form-item label="回路数">
<el-select v-model="form.windFarms" placeholder="回路数" clearable>
<el-option label="是" value="1" />
<el-option label="否" value="0" />
</el-select>
</el-form-item>
<el-form-item label="导线类型">
<el-select v-model="form.windFarms" placeholder="导线类型" clearable>
<el-option label="是" value="1" />
<el-option label="否" value="0" />
</el-select>
</el-form-item>
</el-form>
</el-collapse-item>
<el-collapse-item :title="item.name" v-for="(item, index) in column" :name="index + 3">
<div class="mb10">
<el-button type="primary" size="small" icon="el-icon-Plus" @click="addFform(item)">
新增
</el-button>
<el-button type="primary" size="small" icon="el-icon-Delete">删除</el-button>
<el-button type="primary" size="small" icon="el-icon-Download">导出</el-button>
</div>
<div style="height: 300px">
<vxe-table height="auto" :data="form[item.key]" v-bind="defaultAttribute">
<vxe-column type="checkbox" width="60"></vxe-column>
<vxe-column type="seq" title="序号" width="60px"></vxe-column>
<vxe-column
v-for="(k, index) in item.child"
:key="index"
:field="k.field"
:title="k.title"
></vxe-column>
<vxe-column title="操作" width="150px">
<template #default="{ row }">
<el-button type="text" @click="edit(item,row)">编辑</el-button>
</template>
</vxe-column>
</vxe-table>
</div>
</el-collapse-item>
<!-- <el-collapse-item title="变压器参数维护" name="3">
</el-collapse-item>
<el-collapse-item title="电容器组参数维护" name="4"></el-collapse-item>
<el-collapse-item title="风电参数" name="5"></el-collapse-item> <el-collapse-item title="风电参数" name="5"></el-collapse-item>
<el-collapse-item title="用户负荷" name="6"></el-collapse-item> <el-collapse-item title="用户负荷" name="6"></el-collapse-item>
<el-collapse-item title="冲击性负荷" name="7"></el-collapse-item> <el-collapse-item title="冲击性负荷" name="7"></el-collapse-item> -->
</el-collapse> </el-collapse>
<!-- 新增 -->
<addform ref="addformRef" />
</div> </div>
</div> </div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { ref, reactive } from 'vue' import { ref, reactive } from 'vue'
import BackComponent from '@/components/icon/back/index.vue' import BackComponent from '@/components/icon/back/index.vue'
const activeNames = ref(['1', '2', '3', '4', '5', '6', '7']) import { useDictData } from '@/stores/dictData'
import { mainHeight } from '@/utils/layout' import { mainHeight } from '@/utils/layout'
import { defaultAttribute } from '@/components/table/defaultAttribute'
import addform from './addform.vue'
const activeNames = ref([1, 2, 3, 4, 5, 6, 7])
const dictData = useDictData()
const pageHeight = mainHeight(90) const pageHeight = mainHeight(90)
const areaOptionList = dictData.getBasicData('jibei_area')
const addformRef = ref()
const form: any = ref({
city: '',
windFarms: '',
transformer: [
{
name: '变压器1',
name1: '变压器型号1',
name2: '100'
},
{
name: '变压器2',
name1: '变压器型号2',
name2: '100'
}
], //变压器
capacitor: [
{
name: '电容器1',
name1: '20',
name2: '100',
name3: '72.73',
name4: '400V'
},
{
name: '电容器2',
name1: '20',
name2: '100',
name3: '72.73',
name4: '400V'
}
], //电容器
windPower: [
{
name: '风机1',
name1: '0.1',
name2: '100'
},
{
name: '风机2',
name1: '0.1',
name2: '100'
}
], //风电
load: [], //用户负荷
impact: [] //冲击性负荷
})
const column: any = ref([
{
name: '变压器参数维护',
key: 'transformer',
child: [
{
title: '用户变压器名称',
field: 'name'
},
{
title: '变压器型号',
field: 'name1'
},
{
title: '变压器台数',
field: 'name2'
}
]
},
{
name: '电容器组参数维护',
key: 'capacitor',
child: [
{
title: '用户电容器名称',
field: 'name'
},
{
title: '电容器组数量',
field: 'name1'
},
{
title: '单组容量(kVar)',
field: 'name2'
},
{
title: '电抗率(%)',
field: 'name3'
},
{
title: '电压等级',
field: 'name4'
}
]
},
{
name: '风电参数',
key: 'windPower',
child: [
{
title: '风机名称',
field: 'name'
},
{
title: '风机闪变系数',
field: 'name1'
},
{
title: '风机额定视在功率',
field: 'name2'
}
]
},
{
name: '用户负荷',
key: 'load',
child: [
{
title: '配电窒名称',
field: 'name'
},
{
title: '进线电压',
field: 'name1'
},
{
title: '配变容量(kVA)',
field: 'name2'
},
{
title: '配电变压器阻抗(%)',
field: 'name3'
},
{
title: '谐波源特性',
field: 'name4'
},
{
title: '配变低压侧电压',
field: 'name5'
},
{
title: '非线性负荷功率(kW)',
field: 'name6'
},
{
title: '功率因素',
field: 'name7'
}
]
},
{
name: '冲击性负荷',
key: 'impact',
child: [
{
title: '冲击负荷类型',
field: 'name'
},
{
title: '冲击负荷功率(MVA)',
field: 'name1'
},
{
title: '数量',
field: 'name2'
},
{
title: '启动方式',
field: 'name3'
},
{
title: '启动容量倍数',
field: 'name4'
},
{
title: '冲击负荷高压侧电压',
field: 'name5'
},
{
title: '有无隔离变',
field: 'name6'
},
{
title: '隔离变阻抗(%)',
field: 'name7'
},
{
title: '低压侧电压',
field: 'name8'
},
{
title: '负荷频度选择',
field: 'name9'
},
{
title: '闪变叠加系数',
field: 'name10'
}
]
}
])
// 新增
const addFform = (item: any) => {
addformRef.value.open({
title: '新增' ,
item: item
})
}
// 编辑
const edit = (item: any,row: any) => {
addformRef.value.open({
title: '编辑',
item: item,
row:row
})
}
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.actionButtons { .actionButtons {
display: flex; display: flex;
justify-content: end; justify-content: end;
} }
:deep(.el-collapse-item__header) {
font-family: AlimamaDongFangDaKai;
font-size: 20px;
}
.el-collapse-item__content {
padding-bottom: 10px;
}
.form-four {
display: flex;
flex-wrap: wrap;
.el-form-item {
display: flex;
width: 22%;
.el-form-item__content {
flex: 1;
.el-select,
.el-cascader,
.el-input__inner,
.el-date-editor {
width: 100%;
}
}
}
}
</style> </style>

View File

@@ -1,19 +1,19 @@
<template> <template>
<div class="default-main"> <div class="default-main">
<el-tabs type="border-card"> <el-tabs type="border-card" v-model="activeName">
<el-tab-pane label="评估用户维护"><User /></el-tab-pane> <el-tab-pane label="评估用户维护" name="1"><User v-if="activeName == '1'"/></el-tab-pane>
<el-tab-pane label="用户二级评估">用户二级评估</el-tab-pane> <el-tab-pane label="用户二级评估" name="2"><Assess v-if="activeName == '2'"/></el-tab-pane>
<el-tab-pane label="参数字典维护">参数字典维护</el-tab-pane> <el-tab-pane label="参数字典维护" name="3">参数字典维护</el-tab-pane>
</el-tabs> </el-tabs>
</div> </div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { yMethod } from '@/utils/echartMethod' import { ref, reactive } from 'vue'
import User from '@/views/pqs/runManage/assessment/components/uese/index.vue'
import Assess from '@/views/pqs/runManage/assessment/components/assess/index.vue'
defineOptions({ defineOptions({
name: 'runManage/assessment' name: 'runManage/assessment'
}) })
import User from '@/views/pqs/runManage/assessment/components/uese/index.vue' const activeName = ref('2')
import { ref, reactive } from 'vue'
console.log("🚀 ~ reactive:", yMethod([3.2,3.2]))
</script> </script>
<style lang="scss" scoped></style> <style lang="scss" scoped></style>

View File

@@ -119,7 +119,7 @@
<Table ref="tableRef"></Table> <Table ref="tableRef"></Table>
</el-card> </el-card>
</div> </div>
<anomalyDetails ref="anomalyDetailsRef" /> <alarmDetails ref="alarmDetailsRef" />
</div> </div>
</template> </template>
@@ -134,10 +134,10 @@ import { ElMessage } from 'element-plus'
import { CaretRight } from '@element-plus/icons-vue' import { CaretRight } from '@element-plus/icons-vue'
import { mainHeight } from '@/utils/layout' import { mainHeight } from '@/utils/layout'
import MyEchart from '@/components/echarts/MyEchart.vue' import MyEchart from '@/components/echarts/MyEchart.vue'
import anomalyDetails from './anomalyDetails.vue' import alarmDetails from './alarmDetails.vue'
import { useConfig } from '@/stores/config' import { useConfig } from '@/stores/config'
const config = useConfig() const config = useConfig()
const anomalyDetailsRef = ref() const alarmDetailsRef = ref()
const dictData = useDictData() const dictData = useDictData()
//字典获取监督对象类型 //字典获取监督对象类型
const supvObjTypeList = dictData.getBasicData('supv_obj_type') const supvObjTypeList = dictData.getBasicData('supv_obj_type')
@@ -687,7 +687,7 @@ tableStore.table.params.alarm = 5
tableStore.table.params.earlyWarning = 1 tableStore.table.params.earlyWarning = 1
const quantityClick = (e: any) => { const quantityClick = (e: any) => {
anomalyDetailsRef.value.open(e) alarmDetailsRef.value.open(e)
} }
onMounted(() => { onMounted(() => {
// 加载数据 // 加载数据

View File

@@ -0,0 +1,179 @@
<template>
<el-dialog draggable width="1300px" class="cn-operate-dialog" v-model="dialogVisible" :title="title">
<div style="display: flex">
<el-tabs v-model="activeName" type="border-card" class="mr10" style="width: 450px">
<el-tab-pane label="告警监测点详情" name="first">
<div :style="height">
<vxe-table height="auto" :data="TableData" v-bind="defaultAttribute">
<vxe-column type="seq" title="序号" width="60px"></vxe-column>
<vxe-column field="time" title="日期">
<template #default="{ row }">
<span class="time">{{ row.time }}</span>
</template>
</vxe-column>
<vxe-column field="name" title="监测点名称" width="120px"></vxe-column>
<vxe-column field="fz" title="告警时间(分钟)" width="80px"></vxe-column>
</vxe-table>
</div>
</el-tab-pane>
</el-tabs>
<el-tabs v-model="activeName" type="border-card" style="width: 820px">
<el-tab-pane :label="`变电站1 > 测试监测点1_告警指标详情`" name="first">
<div :style="height">
<vxe-table height="auto" :data="TableData1" v-bind="defaultAttribute">
<vxe-column type="seq" title="序号" width="60px"></vxe-column>
<vxe-column field="time" title="时间" min-width="120px"></vxe-column>
<vxe-column field="indexType" title="指标类型" min-width="100px"></vxe-column>
<vxe-column field="phase" title="相别" width="60px"></vxe-column>
<vxe-column field="range" title="合理范围" min-width="60px"></vxe-column>
<vxe-column field="max" title="最大" width="60px"></vxe-column>
<vxe-column field="min" title="最小" width="60px"></vxe-column>
<vxe-column field="average" title="平均" width="60px"></vxe-column>
<vxe-column field="cp95" title="CP95" width="60px"></vxe-column>
</vxe-table>
</div>
</el-tab-pane>
</el-tabs>
</div>
</el-dialog>
</template>
<script lang="ts" setup>
import { ref, inject } from 'vue'
import { reactive } from 'vue'
import { defaultAttribute } from '@/components/table/defaultAttribute'
import { ElMessage } from 'element-plus'
import TableStore from '@/utils/tableStore' // 若不是列表页面弹框可删除
import { mainHeight } from '@/utils/layout'
const dialogVisible = ref(false)
const height = mainHeight(10, 2)
const title = ref('')
const activeName = 'first'
const TableData = ref([
{
time: '2025-01-01',
name: '测试监测点1',
fz: 100
},
{
time: '2025-01-01',
name: '测试监测点2',
fz: 100
},
{
time: '2025-01-01',
name: '测试监测点3',
fz: 100
},
{
time: '2025-01-01',
name: '测试监测点4',
fz: 100
}
])
const TableData1 = ref([
{
num: 1,
time: '2025/01/01 11:10:00',
indexType: '频率',
phase: 'T',
range: '42.5~57.5',
max: '/',
min: '/',
average: 60,
cp95: '/'
},
{
num: 2,
time: '2025/01/01 11:20:00',
indexType: '频率',
phase: 'T',
range: '42.5~57.5',
max: '/',
min: '/',
average: 60,
cp95: '/'
},
{
num: 3,
time: '2025/01/01 11:30:00',
indexType: '频率',
phase: 'T',
range: '42.5~57.5',
max: 65,
min: 60,
average: 62,
cp95: 61
},
{
num: 4,
time: '2025/01/01 11:40:00',
indexType: '频率',
phase: 'T',
range: '42.5~57.5',
max: 65,
min: 60,
average: 62,
cp95: 61
},
{
num: 5,
time: '2025/01/01 11:50:00',
indexType: '相电压',
phase: 'A',
range: '42.5~57.5',
max: '/',
min: 290,
average: '/',
cp95: '/'
},
{
num: 6,
time: '2025/01/01 12:10:00',
indexType: '相电压',
phase: 'B',
range: '42.5~57.5',
max: 220,
min: 290,
average: 220,
cp95: 220
},
{
num: 7,
time: '2025/01/01 12:20:00',
indexType: '相电压',
phase: 'C',
range: '42.5~57.5',
max: '/',
min: 290,
average: '/',
cp95: '/'
},
{
num: 8,
time: '2025/01/01 12:30:00',
indexType: '相电压',
phase: 'A',
range: '42.5~57.5',
max: 220,
min: 290,
average: 220,
cp95: 220
}
])
const open = (data: anyObj) => {
title.value = data.name + '_告警详情展示'
dialogVisible.value = true
}
defineExpose({ open })
</script>
<style lang="scss" scoped>
.time {
color: var(--el-color-primary);
cursor: pointer;
text-decoration: underline;
text-underline-offset: 4px;
}
</style>

View File

@@ -1046,7 +1046,7 @@ onUnmounted(() => {
::v-deep .el-collapse-item__header { ::v-deep .el-collapse-item__header {
font-family: AlimamaDongFangDaKai; font-family: AlimamaDongFangDaKai;
font-size: 23px; font-size: 20px;
} }
::v-deep .el-descriptions__header { ::v-deep .el-descriptions__header {