驾驶舱页面绘制

绘制2、稳态电能质量分析、稳态治理效果分析、暂态电能质量分析页面
2025-10-20 13:25:30 +08:00
parent 177e50de75
commit 676bb37bbe
52 changed files with 12265 additions and 3807 deletions
--- a/src/components/cockpit/monitoringPointList/index.vue
+++ b/src/components/cockpit/monitoringPointList/index.vue
@@ -0,0 +1,169 @@
+<template>
+    <div>
+        <!--监测点列表 -->
+
+        <Table ref="tableRef" @cell-click="cellClickEvent" :height="`calc(${prop.height}  )`"></Table>
+        <!-- 指标越限详情 -->
+        <OverLimitDetails ref="OverLimitDetailsRef" />
+    </div>
+</template>
+<script setup lang="ts">
+import { ref, onMounted, provide, reactive, watch, h } from 'vue'
+import TableStore from '@/utils/tableStore'
+import Table from '@/components/table/index.vue'
+import TableHeader from '@/components/table/header/index.vue'
+import { useDictData } from '@/stores/dictData'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { getTimeOfTheMonth } from '@/utils/formatTime'
+import { ElTag } from 'element-plus'
+import OverLimitDetails from '@/components/cockpit/listOfMainMonitoringPoints/components/overLimitDetails.vue'
+const prop = defineProps({
+    width: { type: String },
+    height: { type: String },
+    timeKey: { type: String },
+    timeValue: { type: Object }
+})
+const dictData = useDictData()
+const OverLimitDetailsRef = ref()
+const tableStore: any = new TableStore({
+    url: '/user-boot/role/selectRoleDetail?id=0',
+    method: 'POST',
+
+    showPage: false,
+    exportName: '主要监测点列表',
+    column: [
+        {
+            field: 'index',
+            title: '序号',
+            width: '60',
+            formatter: (row: any) => {
+                return (tableStore.table.params.pageNum - 1) * tableStore.table.params.pageSize + row.rowIndex + 1
+            }
+        },
+        {
+            title: '治理对象名称',
+            field: 'name',
+            minWidth: '80'
+        },
+
+        {
+            title: '电压等级',
+            field: 'type',
+            minWidth: '70'
+        },
+        {
+            title: '治理设备详情',
+            field: 'type1',
+            minWidth: '70'
+        },
+
+        {
+            title: '治理前报告',
+            field: 'type2',
+            minWidth: '80',
+            render: 'customTemplate',
+            customTemplate: (row: any) => {
+                return `<span style='cursor: pointer;text-decoration: underline;'>${row.type2}</span>`
+            }
+        },
+        { title: '监测点名称', field: 'type3', minWidth: '70' },
+        { title: '监测类型', field: 'type4', minWidth: '60' },
+        {
+            title: '监测点状态',
+            field: 'type5',
+            minWidth: '60',
+            render: 'customTemplate',
+            customTemplate: (row: any) => {
+                return `<span style='color: ${row.type5 === '中断' ? '#FF0000' : ''}'>${row.type5}</span>`
+            }
+        },
+        { title: '最新数据时间', field: 'type6', minWidth: '140' }
+    ],
+    beforeSearchFun: () => {
+        tableStore.table.params.searchBeginTime = prop.timeValue?.[0] || getTimeOfTheMonth(prop.timeKey)[0]
+        tableStore.table.params.searchEndTime = prop.timeValue?.[1] || getTimeOfTheMonth(prop.timeKey)[1]
+    },
+    loadCallback: () => {
+        tableStore.table.data = [
+            {
+                name: '1#变压器',
+                type: '0.38kV',
+                type1: '250A APF',
+                type2: '报告.doc',
+                type3: '1#变压器 电网侧',
+                type4: '电网侧',
+                type5: '运行',
+                type6: '2025-04-11 18:16:00'
+            },
+            {
+                name: '1#变压器',
+                type: '0.38kV',
+                type1: '250A APF',
+                type2: '报告.doc',
+                type3: '1#变压器 负载侧',
+                type4: '负载侧',
+                type5: '运行',
+                type6: '2025-04-11 18:16:00'
+            },
+            {
+                name: '2#变压器',
+                type: '0.38kV',
+                type1: '100A SVG',
+                type2: '/',
+                type3: '1#变压器 电网侧',
+                type4: '电网侧',
+                type5: '运行',
+                type6: '2025-04-11 18:16:00'
+            },
+            {
+                name: '2#变压器',
+                type: '0.38kV',
+                type1: '100A SVG',
+                type2: '/',
+                type3: '1#变压器 负载侧',
+                type4: '负载侧',
+                type5: '中断',
+                type6: '2025-04-11 18:16:00'
+            }
+        ]
+
+        tableStore.table.height = `calc(${prop.height} - 80px)`
+    }
+})
+
+const tableRef = ref()
+provide('tableRef', tableRef)
+tableStore.table.params.type = ''
+tableStore.table.params.searchValue = ''
+provide('tableStore', tableStore)
+
+// 点击行
+const cellClickEvent = ({ row, column }: any) => {
+    if (column.field == 'name') {
+        console.log(row)
+        OverLimitDetailsRef.value.open(row)
+    }
+}
+
+onMounted(() => {
+    tableStore.index()
+})
+watch(
+    () => prop.timeKey,
+    val => {
+        tableStore.index()
+    }
+)
+watch(
+    () => prop.timeValue, // 监听的目标（函数形式避免直接传递 props 导致的警告）
+    (newVal, oldVal) => {
+        tableStore.index()
+    },
+    {
+        deep: true // 若 timeValue 是对象/数组，需开启深度监听
+    }
+)
+
+const addMenu = () => {}
+</script>
+<style lang="scss" scoped></style>