稳态、暂态电能质量，稳态质量效果各个弹框

src/components/cockpit/transientDetails/components/transientList.vue

@@ -0,0 +1,131 @@
+<template>
+    <div>
+        <!-- 暂态事件列表 -->
+        <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>
+    </div>
+</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 harmonicRatio‌Ref: any = ref(null)
+const options = [
+    {
+        value: '35kV进线',
+        label: '35kV进线'
+    }
+]
+const height = mainHeight(0, 2).height as any
+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',
+        },
+        {
+            title: '测点名称',
+            field: 'name',
+            width: '150'
+        },
+        {
+            title: '暂态类型',
+            field: 'flicker',
+            width: '100',
+        },
+        {
+            title: '特征幅值(%)',
+            field: 'flicker',
+            width: '100'
+        },
+        {
+            title: '暂降深度(%)',
+            field: 'flicker',
+            width: '100'
+        },
+        {
+            title: '持续时间(S)',
+            field: 'flicker',
+            width: '100'
+        },
+         {
+            title: '严重度',
+            field: 'flicker',
+            width: '80'
+        },
+    ],
+    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()
+}
+
+// 点击行
+const cellClickEvent = ({ row, column }: any) => {
+    if (column.field != 'name') {
+        harmonicRatio‌Ref.value.openDialog(row)
+    }
+}
+
+
+defineExpose({ open })
+</script>
+<style lang="scss" scoped></style>

src/components/cockpit/transientDetails/index.vue

@@ -23,10 +23,11 @@
                             </div>
                         </template>
                         <div
+                            style="text-decoration: underline"
                             :style="{ height: `calc(${prop.height} / 5 - 47px)`, overflow: 'auto' }"
                             v-for="item in list?.filter(item => item.time == data.day)"
                         >
-                            <div>电压暂降:{{ item.type || '' }}</div>
+                            <div  @click="descentClick">电压暂降:{{ item.type || '' }}</div>
                             <div>电压中断:{{ item.type1 || '' }}</div>
                             <div>电压暂升:{{ item.type2 || '' }}</div>
                         </div>
@@ -34,6 +35,8 @@
                 </div>
             </template>
         </el-calendar>
+        <!-- 暂态事件列表  -->
+        <TransientList ref="transientListRef"  />
     </div>
 </template>
 <script setup lang="ts">
@@ -45,6 +48,7 @@ import { ElMessage, ElMessageBox } from 'element-plus'
 import { getTimeOfTheMonth } from '@/utils/formatTime'
 import { overflow } from 'html2canvas/dist/types/css/property-descriptors/overflow'
 import { dayjs } from 'element-plus'
+import TransientList from './components/transientList.vue'
 
 dayjs.en.weekStart = 1 //设置日历的周起始日为星期一
 const value = ref(new Date())
@@ -54,6 +58,8 @@ const prop = defineProps({
     timeKey: { type: String },
     timeValue: { type: Object }
 })
+
+const transientListRef = ref()
 const list = ref([
     {
         time: '2025-10-01',
@@ -154,7 +160,12 @@ watch(
     }
 )
 
-const addMenu = () => {}
+// 电压暂降点击事件
+const descentClick = () => {
+    transientListRef.value.open()
+}
+
+
 </script>
 <style lang="scss" scoped>
 :deep(.el-calendar) {