暂态电能质量分析页面添加各个列表详情弹框

2025-10-27 08:50:03 +08:00
parent 8f8f2aad6e
commit 608be23687
4 changed files with 460 additions and 31 deletions
--- a/src/components/cockpit/exceedanceLevel/components/dailyTrendChart.vue
+++ b/src/components/cockpit/exceedanceLevel/components/dailyTrendChart.vue
@@ -0,0 +1,151 @@
+<template>
+    <!-- 指标日趋势图 -->
+    <el-dialog draggable title="指标日趋势图" v-model="dialogVisible" append-to-body width="70%">
+        <my-echart
+            class="tall"
+            :options="echartList"
+            style="width: 98%; height: 320px"
+        />
+    </el-dialog>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, provide, reactive, watch, h } from 'vue'
+import TableStore from '@/utils/tableStore'
+import TableHeader from '@/components/table/header/index.vue'
+import { getTimeOfTheMonth } from '@/utils/formatTime'
+import MyEchart from '@/components/echarts/MyEchart.vue'
+import { useConfig } from '@/stores/config'
+const prop = defineProps({
+    width: { type: String },
+    height: { type: String },
+    timeKey: { type: String },
+    timeValue: { type: Object }
+})
+
+const dialogVisible: any = ref(false)
+
+
+const config = useConfig()
+
+const echartList = ref({
+    title: {
+        text: '35kV进线谐波含有率',
+    },
+
+    xAxis: {
+        type: 'time',
+        axisLabel: {
+            formatter: {
+                day: '{MM}-{dd}',
+                month: '{MM}',
+                year: '{yyyy}'
+            }
+        }
+    },
+
+    yAxis: [{}, {}],
+    grid: {
+        left: '10px',
+        right: '20px'
+    },
+    options: {
+        series: [
+            {
+                //   name: '暂降次数',
+                type: 'bar',
+                name: '有功功率',
+                data: [
+                    ['2025-10-16 07:00:00', 10],
+                    ['2025-10-16 07:15:00', 10],
+                    ['2025-10-16 07:30:00', 10],
+                    ['2025-10-16 07:45:00', 10],
+                    ['2025-10-16 08:00:00', 30],
+                    ['2025-10-16 08:15:00', 50],
+                    ['2025-10-16 08:30:00', 60],
+                    ['2025-10-16 08:45:00', 70],
+                    ['2025-10-16 09:00:00', 100],
+                    ['2025-10-16 09:15:00', 120],
+                    ['2025-10-16 09:30:00', 130],
+                    ['2025-10-16 09:45:00', 140],
+                    ['2025-10-16 10:00:00', 160],
+                    ['2025-10-16 10:15:00', 160],
+                    ['2025-10-16 10:30:00', 130],
+                    ['2025-10-16 10:45:00', 120],
+                    ['2025-10-16 11:00:00', 140],
+                    ['2025-10-16 11:15:00', 80],
+                    ['2025-10-16 11:30:00', 70],
+                    ['2025-10-16 11:45:00', 90],
+                    ['2025-10-16 12:00:00', 60],
+                    ['2025-10-16 12:15:00', 60],
+                    ['2025-10-16 12:30:00', 60],
+                    ['2025-10-16 12:45:00', 60]
+                ],
+                itemStyle: {
+                    normal: {
+                        //这里是颜色
+                        color: function (params: any) {
+                            if (params.value[1] == 0 || params.value[1] == 3.14159) {
+                                return '#ccc'
+                            } else {
+                                return config.layout.elementUiPrimary[0]
+                            }
+                        }
+                    }
+                },
+                yAxisIndex: 0
+            },
+            {
+                name: '谐波总畸变率',
+                type: 'line',
+                showSymbol: false,
+                smooth: true,
+                data: [
+                    ['2025-10-16 07:00:00', 0],
+                    ['2025-10-16 07:15:00', 0],
+                    ['2025-10-16 07:30:00', 0],
+                    ['2025-10-16 07:45:00', 0],
+                    ['2025-10-16 08:00:00', 0],
+                    ['2025-10-16 08:15:00', 0.1],
+                    ['2025-10-16 08:30:00', 0.1],
+                    ['2025-10-16 08:45:00', 0.1],
+                    ['2025-10-16 09:00:00', 1],
+                    ['2025-10-16 09:15:00', 1],
+                    ['2025-10-16 09:30:00', 1],
+                    ['2025-10-16 09:45:00', 1],
+                    ['2025-10-16 10:00:00', 0.8],
+                    ['2025-10-16 10:15:00', 0.8],
+                    ['2025-10-16 10:30:00', 0.8],
+                    ['2025-10-16 10:45:00', 0.8],
+                    ['2025-10-16 11:00:00', 0.8],
+                    ['2025-10-16 11:15:00', 0.1],
+                    ['2025-10-16 11:30:00', 0.1],
+                    ['2025-10-16 11:45:00', 0.1],
+                    ['2025-10-16 12:00:00', 0],
+                    ['2025-10-16 12:15:00', 0],
+                    ['2025-10-16 12:30:00', 0],
+                    ['2025-10-16 12:45:00', 0]
+                ],
+                yAxisIndex: 1
+            }
+        ]
+    }
+})
+
+
+onMounted(() => {
+    
+})
+
+
+const open = async (row: any) => {
+    dialogVisible.value = true
+}
+
+defineExpose({ open })
+</script>
+<style lang="scss" scoped>
+:deep(.el-select) {
+    min-width: 80px;
+}
+</style>
--- a/src/components/cockpit/exceedanceLevel/index.vue
+++ b/src/components/cockpit/exceedanceLevel/index.vue
@@ -7,8 +7,8 @@
            :style="{ width: prop.width, height: `calc(${prop.height} / 2 )` }"
        />
        <Table ref="tableRef" @cell-click="cellClickEvent" :height="`calc(${prop.height} / 2 )`" isGroup></Table>
-        <!-- 指标越限详情 -->
-        <OverLimitDetails ref="OverLimitDetailsRef" />
+        <!-- 指标日趋势图 -->
+        <DailyTrendChart ref="dailyTrendChartRef" />
    </div>
 </template>
 <script setup lang="ts">
@@ -19,7 +19,7 @@ import MyEchart from '@/components/echarts/MyEchart.vue'
 import { useDictData } from '@/stores/dictData'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import { getTimeOfTheMonth } from '@/utils/formatTime'
-import OverLimitDetails from '@/components/cockpit/listOfMainMonitoringPoints/components/overLimitDetails.vue'
+import DailyTrendChart from '@/components/cockpit/exceedanceLevel/components/dailyTrendChart.vue'
 const prop = defineProps({
    width: { type: String },
    height: { type: String },
@@ -66,7 +66,7 @@ const echartList = ref({
        ]
    }
 })
-const OverLimitDetailsRef = ref()
+const dailyTrendChartRef = ref()
 const tableStore: any = new TableStore({
    url: '/user-boot/dept/deptTree',
    method: 'POST',
@@ -178,7 +178,7 @@ provide('tableStore', tableStore)
 const cellClickEvent = ({ row, column }: any) => {
    if (column.field != 'name') {
        console.log(row)
-        OverLimitDetailsRef.value.open(row)
+        dailyTrendChartRef.value.open(row)
    }
 }

--- a/src/components/cockpit/listOfMainMonitoringPoints/components/harmonicRatio‌.vue
+++ b/src/components/cockpit/listOfMainMonitoringPoints/components/harmonicRatio‌.vue
@@ -0,0 +1,254 @@
+<template>
+    <!-- 总体指标占比详情谐波含有率 -->
+    <el-dialog draggable title="谐波电压/电流含有率" v-model="dialogVisible" append-to-body width="70%">
+        <TableHeader datePicker showExport :showReset="false" @selectChange="selectChange">
+            <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>
+                <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>
+        <my-echart
+            class="tall"
+            :options="echartList"
+            style="width: 98%; height: 320px"
+        />
+    </el-dialog>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, provide, reactive, watch, h } from 'vue'
+import TableStore from '@/utils/tableStore'
+import TableHeader from '@/components/table/header/index.vue'
+import { getTimeOfTheMonth } from '@/utils/formatTime'
+import MyEchart from '@/components/echarts/MyEchart.vue'
+import { useConfig } from '@/stores/config'
+const prop = defineProps({
+    width: { type: String },
+    height: { type: String },
+    timeKey: { type: String },
+    timeValue: { type: Object }
+})
+
+const dialogVisible: any = ref(false)
+
+const options = [
+    {
+        value: '35kV进线',
+        label: '35kV进线'
+    }
+]
+
+const config = useConfig()
+const powerList: any = ref([
+    {
+        label: '三相总有功功率',
+        value: '1'
+    },
+    {
+        label: '三相总无功功率',
+        value: '2'
+    }
+])
+const exceedingTheLimitList: any = ref([
+    {
+        label: '越限',
+        value: '1'
+    },
+    {
+        label: '不越限',
+        value: '0'
+    }
+])
+const indicatorList: any = ref([
+    {
+        label: '谐波电压总畸变率',
+        value: '1'
+    },
+    {
+        label: '各次谐波电压',
+        value: '2'
+    },
+    {
+        label: '各次谐波电压',
+        value: '3'
+    },
+    {
+        label: '三相电压不平衡',
+        value: '4'
+    }
+])
+const echartList = ref({
+    title: {
+        text: '35kV进线谐波含有率',
+    },
+
+    xAxis: {
+        type: 'time',
+        axisLabel: {
+            formatter: {
+                day: '{MM}-{dd}',
+                month: '{MM}',
+                year: '{yyyy}'
+            }
+        }
+    },
+
+    yAxis: [{}, {}],
+    grid: {
+        left: '10px',
+        right: '20px'
+    },
+    options: {
+        series: [
+            {
+                //   name: '暂降次数',
+                type: 'bar',
+                name: '有功功率',
+                data: [
+                    ['2025-10-16 07:00:00', 10],
+                    ['2025-10-16 07:15:00', 10],
+                    ['2025-10-16 07:30:00', 10],
+                    ['2025-10-16 07:45:00', 10],
+                    ['2025-10-16 08:00:00', 30],
+                    ['2025-10-16 08:15:00', 50],
+                    ['2025-10-16 08:30:00', 60],
+                    ['2025-10-16 08:45:00', 70],
+                    ['2025-10-16 09:00:00', 100],
+                    ['2025-10-16 09:15:00', 120],
+                    ['2025-10-16 09:30:00', 130],
+                    ['2025-10-16 09:45:00', 140],
+                    ['2025-10-16 10:00:00', 160],
+                    ['2025-10-16 10:15:00', 160],
+                    ['2025-10-16 10:30:00', 130],
+                    ['2025-10-16 10:45:00', 120],
+                    ['2025-10-16 11:00:00', 140],
+                    ['2025-10-16 11:15:00', 80],
+                    ['2025-10-16 11:30:00', 70],
+                    ['2025-10-16 11:45:00', 90],
+                    ['2025-10-16 12:00:00', 60],
+                    ['2025-10-16 12:15:00', 60],
+                    ['2025-10-16 12:30:00', 60],
+                    ['2025-10-16 12:45:00', 60]
+                ],
+                itemStyle: {
+                    normal: {
+                        //这里是颜色
+                        color: function (params: any) {
+                            if (params.value[1] == 0 || params.value[1] == 3.14159) {
+                                return '#ccc'
+                            } else {
+                                return config.layout.elementUiPrimary[0]
+                            }
+                        }
+                    }
+                },
+                yAxisIndex: 0
+            },
+            {
+                name: '谐波总畸变率',
+                type: 'line',
+                showSymbol: false,
+                smooth: true,
+                data: [
+                    ['2025-10-16 07:00:00', 0],
+                    ['2025-10-16 07:15:00', 0],
+                    ['2025-10-16 07:30:00', 0],
+                    ['2025-10-16 07:45:00', 0],
+                    ['2025-10-16 08:00:00', 0],
+                    ['2025-10-16 08:15:00', 0.1],
+                    ['2025-10-16 08:30:00', 0.1],
+                    ['2025-10-16 08:45:00', 0.1],
+                    ['2025-10-16 09:00:00', 1],
+                    ['2025-10-16 09:15:00', 1],
+                    ['2025-10-16 09:30:00', 1],
+                    ['2025-10-16 09:45:00', 1],
+                    ['2025-10-16 10:00:00', 0.8],
+                    ['2025-10-16 10:15:00', 0.8],
+                    ['2025-10-16 10:30:00', 0.8],
+                    ['2025-10-16 10:45:00', 0.8],
+                    ['2025-10-16 11:00:00', 0.8],
+                    ['2025-10-16 11:15:00', 0.1],
+                    ['2025-10-16 11:30:00', 0.1],
+                    ['2025-10-16 11:45:00', 0.1],
+                    ['2025-10-16 12:00:00', 0],
+                    ['2025-10-16 12:15:00', 0],
+                    ['2025-10-16 12:30:00', 0],
+                    ['2025-10-16 12:45:00', 0]
+                ],
+                yAxisIndex: 1
+            }
+        ]
+    }
+})
+const headerHeight = ref(57)
+const selectChange = (showSelect: any, height: any) => {
+    headerHeight.value = height
+}
+const tableStore: any = new TableStore({
+    url: '/user-boot/role/selectRoleDetail?id=0',
+    method: 'POST',
+
+    showPage: false,
+    exportName: '主要监测点列表',
+    column: [],
+    beforeSearchFun: () => {},
+    loadCallback: () => {
+        tableStore.table.height = `calc(${prop.height} - 80px)`
+    }
+})
+
+const tableRef = ref()
+provide('tableRef', tableRef)
+tableStore.table.params.power = '1'
+tableStore.table.params.indicator = '1'
+tableStore.table.params.exceedingTheLimit = '1'
+tableStore.table.params.searchValue = ''
+provide('tableStore', tableStore)
+
+onMounted(() => {
+    tableStore.index()
+})
+watch(
+    () => prop.timeKey,
+    val => {
+        tableStore.index()
+    }
+)
+watch(
+    () => prop.timeValue, // 监听的目标（函数形式避免直接传递 props 导致的警告）
+    (newVal, oldVal) => {
+        tableStore.index()
+    },
+    {
+        deep: true // 若 timeValue 是对象/数组，需开启深度监听
+    }
+)
+
+const openDialog = async (row: any) => {
+    dialogVisible.value = true
+    tableStore.index()
+}
+
+defineExpose({ openDialog })
+</script>
+<style lang="scss" scoped>
+:deep(.el-select) {
+    min-width: 80px;
+}
+</style>
--- a/src/components/cockpit/listOfMainMonitoringPoints/components/overLimitDetails.vue
+++ b/src/components/cockpit/listOfMainMonitoringPoints/components/overLimitDetails.vue
@@ -1,21 +1,30 @@
 <template>
-    <!-- 综合评估详情 -->
-    <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>
+        <!-- 综合评估详情 -->
+        <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" @cell-click="cellClickEvent" isGroup :height="height"></Table>
+        </el-dialog>
+        <!-- 谐波电流、谐波电压占有率 -->
+        <HarmonicRatio‌ ref="harmonicRatio‌Ref" />
+    </div>
 </template>
 <script setup lang="ts">
 import { ref, provide } from 'vue'
@@ -23,7 +32,9 @@ 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'
+import HarmonicRatio‌ from '@/components/cockpit/listOfMainMonitoringPoints/components/harmonicRatio‌.vue'
 const dialogVisible: any = ref(false)
+const harmonicRatio‌Ref: any = ref(null)
 const options = [
    {
        value: '35kV进线',
@@ -38,7 +49,11 @@ const loop50 = (key: string) => {
            title: i + '次',
            // field: key + i,
            field: 'flicker',
-            width: '80'
+            width: '80',
+            render: 'customTemplate',
+            customTemplate: (row: any) => {
+                return `<span style='cursor: pointer;text-decoration: underline;'>${row.flicker}</span>`
+            }
        })
    }
    return list
@@ -71,7 +86,11 @@ const tableStore: any = new TableStore({
        {
            title: '闪变越限(分钟)',
            field: 'flicker',
-            width: '80'
+            width: '80',
+            render: 'customTemplate',
+            customTemplate: (row: any) => {
+                return `<span style='cursor: pointer;text-decoration: underline;'>${row.flicker}</span>`
+            }
        },
        {
            title: '谐波电压越限(分钟)',
@@ -103,21 +122,18 @@ const tableStore: any = new TableStore({
            {
                time: '2024-01-01 00:00:00',
                name: '35kV进线',
-                flicker: '0',
-              
+                flicker: '0'
            },
            {
                time: '2024-01-01 00:00:00',
                name: '35kV进线',
-                flicker: '0',
-              
+                flicker: '0'
            },
            {
                time: '2024-01-01 00:00:00',
                name: '35kV进线',
-                flicker: '0',
-              
-            },
+                flicker: '0'
+            }
        ]
    }
 })
@@ -129,6 +145,14 @@ const open = async (row: any) => {
    tableStore.index()
 }

+// 点击行
+const cellClickEvent = ({ row, column }: any) => {
+    if (column.field != 'name' && column.field != 'time') {
+        harmonicRatio‌Ref.value.openDialog(row)
+    }
+}
+
+
 defineExpose({ open })
 </script>
 <style lang="scss" scoped></style>