修改波形样式

src/components/cockpit/F47Curve/index.vue

@@ -19,10 +19,10 @@
             }"
             @chart-click="handleChartClick"
         />
-        <el-dialog v-model="isWaveCharts" draggable :title="dialogTitle" append-to-body width="70%">
+        <el-dialog v-model="isWaveCharts" v-if="isWaveCharts" draggable :title="dialogTitle" append-to-body width="70%">
             <waveFormAnalysis
                 v-loading="loading"
-                v-if="isWaveCharts"
+              
                 ref="waveFormAnalysisRef"
                 @handleHideCharts="isWaveCharts = false"
                 :wp="wp"
@@ -37,7 +37,7 @@ import MyEchart from '@/components/echarts/MyEchart.vue'
 import waveFormAnalysis from '@/views/govern/device/control/tabs/components/waveFormAnalysis.vue'
 import TableHeader from '@/components/table/header/index.vue'
 import { analyseWave } from '@/api/common'
-
+import { ElMessage } from 'element-plus'
 const prop = defineProps({
     w: { type: [String, Number] },
     h: { type: [String, Number] },
@@ -420,15 +420,14 @@ const handleChartClick = (params: any) => {
 
 // 可容忍事件点击处理函数
 const handleTolerableEventClick = async (row: any) => {
-    isWaveCharts.value = true
     loading.value = true
-    isWaveCharts.value = true
     nextTick(() => {
         if (waveFormAnalysisRef.value) {
             //waveFormAnalysisRef.value.setHeight(false, 360)
             waveFormAnalysisRef.value.setHeight(999, 130, 1.6666666)
         }
     })
+   const messageInstance = ElMessage.info(`正在加载，请稍等...`)
     await analyseWave(row.value[3]) //eventId
         .then(res => {
             row.loading1 = false
@@ -442,9 +441,12 @@ const handleTolerableEventClick = async (row: any) => {
                 boxoList.value.systemType = 'YPT'
                 wp.value = res.data
             }
+
+            isWaveCharts.value = true
             loading.value = false
         })
         .catch(() => {
+            messageInstance.close()
             row.loading1 = false
             loading.value = false
         })

src/components/cockpit/governanceReport/index1.vue

@@ -1,238 +0,0 @@
-<template>
-    <div>
-        <!--治理效果报表 -->
-        <TableHeader :showReset="false" datePicker @selectChange="selectChange" v-if="fullscreen">
-            <template v-slot:select>
-                <el-form-item label="监测对象">
-                    <el-select
-                        v-model="tableStore.table.params.power"
-                        placeholder="请选择监测对象"
-                        clearable
-                        style="width: 130px"
-                    >
-                        <el-option
-                            v-for="item in powerList"
-                            :key="item.value"
-                            :label="item.label"
-                            :value="item.value"
-                        />
-                    </el-select>
-                </el-form-item>
-            </template>
-            <template v-slot:operation>
-                <el-button @click="downloadExcel" class="" type="primary" icon="el-icon-Download">导出excel</el-button>
-            </template>
-        </TableHeader>
-
-        <!-- 左右布局展示治理前后报表 -->
-        <div class="report-container">
-            <!-- 治理前报表 -->
-            <div class="report-panel before">
-                <div class="panel-header">治理前报表</div>
-                <div
-                    id="luckysheet-before"
-                    :style="{
-                        width: '100%',
-                        height: `calc(${prop.height} - ${fullscreen ? '114px' : '57px'} + ${fullscreen ? 0 : 56}px)`
-                    }"
-                ></div>
-            </div>
-
-            <!-- 治理后报表 -->
-            <div class="report-panel after">
-                <div class="panel-header">治理后报表</div>
-                <div
-                    id="luckysheet-after"
-                    :style="{
-                        width: '100%',
-                        height: `calc(${prop.height} - ${fullscreen ? '114px' : '57px'} + ${fullscreen ? 0 : 56}px)`
-                    }"
-                ></div>
-            </div>
-        </div>
-    </div>
-</template>
-
-<script setup lang="ts">
-import { ref, onMounted, provide, watch, computed } from 'vue'
-import TableStore from '@/utils/tableStore'
-import { exportExcel } from '@/views/govern/reportForms/export.js'
-import TableHeader from '@/components/table/header/index.vue'
-import Json from './index.json'
-import JsonAfter from './index1.json'
-
-const prop = defineProps({
-    w: { type: [String, Number] },
-    h: { type: [String, Number] },
-    width: { type: [String, Number] },
-    height: { type: [String, Number] },
-    timeKey: { type: [String, Number] },
-    timeValue: { type: Object }
-})
-
-const powerList: any = ref([
-    {
-        label: '1#变压器',
-        value: '1'
-    },
-    {
-        label: '2#变压器',
-        value: '2'
-    }
-])
-
-const tableStore: any = new TableStore({
-    url: '/user-boot/role/selectRoleDetail?id=0',
-    method: 'POST',
-    showPage: false,
-    exportName: '治理效果报表',
-    column: [],
-    beforeSearchFun: () => {
-        tableStore.table.params.searchBeginTime = tableStore.table.params.searchBeginTime || prop.timeValue?.[0]
-        tableStore.table.params.searchEndTime = tableStore.table.params.searchEndTime || prop.timeValue?.[1]
-    },
-    loadCallback: () => {}
-})
-
-const tableRef = ref()
-provide('tableRef', tableRef)
-tableStore.table.params.power = '1'
-
-provide('tableStore', tableStore)
-
-// 下载表格
-const downloadExcel = () => {
-    // 可以选择导出治理前、治理后或两个报表
-    const beforeSheets = luckysheetBefore.getAllSheets()
-    const afterSheets = luckysheetAfter.getAllSheets()
-    exportExcel([...beforeSheets, ...afterSheets], '治理效果对比报表')
-}
-
-// 治理前和治理后的Luckysheet实例
-let luckysheetBefore: any
-let luckysheetAfter: any
-
-onMounted(() => {
-    // 创建治理前报表
-    luckysheetBefore = luckysheet.create({
-        container: 'luckysheet-before',
-        title: '治理前',
-        lang: 'zh',
-        showtoolbar: false,
-        showinfobar: false,
-        showsheetbar: true,
-        allowEdit: false,
-        data: Json
-    })
-
-    // 创建治理后报表
-    luckysheetAfter = luckysheet.create({
-        container: 'luckysheet-after',
-        title: '治理后',
-        lang: 'zh',
-        showtoolbar: false,
-        showinfobar: false,
-        showsheetbar: true,
-        allowEdit: false,
-        data: JsonAfter // 使用治理后的数据
-    })
-
-    tableStore.index()
-})
-
-const selectChange = (showSelect: any, height: any, datePickerValue?: any) => {
-    if (datePickerValue && datePickerValue.timeValue) {
-        // 更新时间参数
-        tableStore.table.params.searchBeginTime = datePickerValue.timeValue[0]
-        tableStore.table.params.searchEndTime = datePickerValue.timeValue[1]
-
-        // 可以在这里更新报表数据
-        updateReportData()
-    }
-}
-
-// 更新报表数据的方法
-const updateReportData = () => {
-    // 这里可以根据时间参数更新治理前后的报表数据
-    // 示例：重新加载数据或更新现有数据
-    console.log('更新报表数据:', {
-        beginTime: tableStore.table.params.searchBeginTime,
-        endTime: tableStore.table.params.searchEndTime
-    })
-}
-
-// 计算是否全屏展示
-const fullscreen = computed(() => {
-    const w = Number(prop.w)
-    const h = Number(prop.h)
-    if (!isNaN(w) && !isNaN(h) && w === 12 && h === 6) {
-        return true
-    } else {
-        return false
-    }
-})
-
-watch(
-    () => prop.timeKey,
-    val => {
-        tableStore.index()
-        updateReportData()
-    }
-)
-
-watch(
-    () => prop.timeValue,
-    (newVal, oldVal) => {
-        // 当外部时间值变化时，更新表格的时间参数
-        if (newVal && (!oldVal || newVal[0] !== oldVal[0] || newVal[1] !== oldVal[1])) {
-            tableStore.table.params.searchBeginTime = newVal[0]
-            tableStore.table.params.searchEndTime = newVal[1]
-            tableStore.index()
-            updateReportData()
-        }
-    },
-    {
-        deep: true
-    }
-)
-</script>
-
-<style lang="scss" scoped>
-.report-container {
-    display: flex;
-    height: calc(100% - 57px);
-
-    .report-panel {
-        flex: 1;
-        display: flex;
-        flex-direction: column;
-        border: 1px solid var(--el-border-color);
-
-        &.before {
-            margin-right: 5px;
-        }
-
-        &.after {
-            margin-left: 5px;
-        }
-
-        .panel-header {
-            padding: 10px 15px;
-            background-color: var(--el-color-primary-light-9);
-            font-weight: bold;
-            border-bottom: 1px solid var(--el-border-color);
-            text-align: center;
-        }
-
-        // 确保Luckysheet容器占满剩余空间
-        :deep(#luckysheet-before),
-        :deep(#luckysheet-after) {
-            flex: 1;
-        }
-    }
-}
-
-:deep(.el-select) {
-    min-width: 80px;
-}
-</style>

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

@@ -24,12 +24,12 @@
             draggable
             title="波形分析"
             append-to-body
+            v-if="isWaveCharts"
             width="70%"
             @close="handleHideCharts"
         >
             <waveFormAnalysis
                 v-loading="loading"
-                v-if="isWaveCharts"
                 ref="waveFormAnalysisRef"
                 @handleHideCharts="handleHideCharts"
                 :wp="wp"
@@ -85,27 +85,27 @@ const tableStore: any = new TableStore({
         {
             title: '暂态时间',
             field: 'startTime',
-            minWidth: '150'
+            minWidth: '180'
         },
         {
             title: '测点名称',
             field: 'lineName',
-            width: '150'
+            minWidth: '150'
         },
         {
             title: '暂态类型',
             field: 'tag',
-            width: '100'
+            minWidth: '100'
         },
         {
             title: '特征幅值(%)',
             field: 'amplitude',
-            width: '100'
+            minWidth: '100'
         },
         {
             title: '暂降深度(%)',
             field: 'depth',
-            width: '100',
+            minWidth: '100',
             formatter: (row: any) => {
                 // 当暂态类型不是电压暂升时，计算暂降深度 = 100 - 特征幅值
                 if (row.row.tag !== '电压暂升') {
@@ -123,12 +123,12 @@ const tableStore: any = new TableStore({
         {
             title: '持续时间(S)',
             field: 'persistTime',
-            width: '100'
+            minWidth: '100'
         },
         {
             title: '严重度',
             field: 'severity',
-            width: '80'
+            minWidth: '80'
         },
         {
             title: '波形',