From 82e41eefdb46db65f7fc4a6bb1b3009b1cf3ced3 Mon Sep 17 00:00:00 2001
From: sjl <1716605279@qq.com>
Date: Thu, 11 Sep 2025 08:46:12 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B1=A1=E6=9F=93=E5=80=BC=E6=8A=A5=E8=A1=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/utils/mqtt.ts                             |   2 +-
 .../model/components/harmonicImpedance.vue    |  59 +++
 .../model/components/harmonicSources.vue      |  80 ++++
 src/views/pqs/database/model/index.vue        |  37 ++
 .../detailed/pollutionReport/index.vue        | 453 ++++++++++++++++++
 5 files changed, 630 insertions(+), 1 deletion(-)
 create mode 100644 src/views/pqs/database/model/components/harmonicImpedance.vue
 create mode 100644 src/views/pqs/database/model/components/harmonicSources.vue
 create mode 100644 src/views/pqs/database/model/index.vue
 create mode 100644 src/views/pqs/harmonicMonitoring/detailed/pollutionReport/index.vue

diff --git a/src/utils/mqtt.ts b/src/utils/mqtt.ts
index ce98b12f..a290548b 100644
--- a/src/utils/mqtt.ts
+++ b/src/utils/mqtt.ts
@@ -1,5 +1,5 @@
 import type { MqttClient, OnMessageCallback, IClientOptions, IClientSubscribeOptions } from 'mqtt'
-import mqtt from 'mqtt'
+//import mqtt from 'mqtt'
 
 interface MQTTOptions {
     protocolId?: string
diff --git a/src/views/pqs/database/model/components/harmonicImpedance.vue b/src/views/pqs/database/model/components/harmonicImpedance.vue
new file mode 100644
index 00000000..7cc6537d
--- /dev/null
+++ b/src/views/pqs/database/model/components/harmonicImpedance.vue
@@ -0,0 +1,59 @@
+<template>
+    <div class="default-main">
+        <TableHeader>
+            <template v-slot:select>
+                <el-form-item label="筛选数据">
+                    <el-input
+                        v-model="tableStore.table.params.searchValue"
+                        placeholder="根据名称，容量查询"
+                    />
+                </el-form-item>
+            </template>
+
+        </TableHeader>
+        <Table ref="tableRef" />
+    </div>
+</template>
+<script setup lang="tsx">
+import { ref, onMounted, provide, reactive } 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'
+
+const tableRef = ref()
+const tableStore = new TableStore({
+    url: '/event-boot/report/getEventReport',
+    method: 'POST',
+    column: [
+        // 第一层：主标题（跨列）
+        {
+            title: '典型设备',
+            width: 300,
+            children: [
+                { field: 'gdName', title: '名称' },
+                { field: 'subName', title: '电压等级' },
+                { field: 'ip', title: '容量' }
+            ]
+        },
+        {
+            title: '各次谐波阻抗 (Ω)',
+            width: 1800, // 根据实际列数调整
+            children: Array.from({ length: 24 }, (_, i) => ({
+                field: `harm${i + 2}`,
+                title: `${i + 2}次`
+            }))
+        }
+    ],
+     resetCallback: () => {
+        
+    }
+})
+
+
+provide('tableStore', tableStore)
+
+onMounted(() => {
+    tableStore.index()
+})
+</script>
diff --git a/src/views/pqs/database/model/components/harmonicSources.vue b/src/views/pqs/database/model/components/harmonicSources.vue
new file mode 100644
index 00000000..bcc8afd6
--- /dev/null
+++ b/src/views/pqs/database/model/components/harmonicSources.vue
@@ -0,0 +1,80 @@
+<template>
+    <div class="default-main">
+        <TableHeader>
+            <template v-slot:select>
+                <el-form-item label="筛选数据">
+                    <el-input
+                        v-model="tableStore.table.params.searchValue"
+                        placeholder="根据名称，容量查询"
+                    />
+                </el-form-item>
+            </template>
+
+        </TableHeader>
+        <Table ref="tableRef" />
+    </div>
+</template>
+<script setup lang="tsx">
+import { ref, onMounted, provide, reactive } 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'
+
+const tableRef = ref()
+const tableStore = new TableStore({
+    url: '',
+    method: 'POST',
+    column: [
+        // 第一层：主标题（跨列）
+        {
+            title: '谐波源',
+            width: 300,
+            children: [
+                { field: 'gdName', title: '名称' },
+                { field: 'subName', title: '电压等级' },
+                { field: 'ip', title: '容量' }
+            ]
+        },
+        {
+            title: '各次谐波电流含量（%）',
+            width: 1800, // 根据实际列数调整
+            children: Array.from({ length: 24 }, (_, i) => ({
+                field: `harm${i + 2}`,
+                title: `${i + 2}次`
+            }))
+        }
+    ],
+})
+
+
+provide('tableStore', tableStore)
+
+const mockData = [
+  {
+    gdName: '变压器A',
+    subName: '10kV',
+    ip: '1000kVA',
+    ...Array.from({ length: 24 }, (_, i) => ({ [`harm${i + 2}`]: (Math.random() * 10).toFixed(2) }))
+      .reduce((acc, cur) => ({ ...acc, ...cur }), {})
+  },
+  {
+    gdName: '电机B',
+    subName: '35kV',
+    ip: '2000kVA',
+    ...Array.from({ length: 24 }, (_, i) => ({ [`harm${i + 2}`]: (Math.random() * 10).toFixed(2) }))
+      .reduce((acc, cur) => ({ ...acc, ...cur }), {})
+  },
+  {
+    gdName: '整流器C',
+    subName: '110kV',
+    ip: '5000kVA',
+    ...Array.from({ length: 24 }, (_, i) => ({ [`harm${i + 2}`]: (Math.random() * 10).toFixed(2) }))
+      .reduce((acc, cur) => ({ ...acc, ...cur }), {})
+  }
+]
+
+onMounted(() => {
+    tableStore.index()
+})
+</script>
diff --git a/src/views/pqs/database/model/index.vue b/src/views/pqs/database/model/index.vue
new file mode 100644
index 00000000..c4413a8c
--- /dev/null
+++ b/src/views/pqs/database/model/index.vue
@@ -0,0 +1,37 @@
+<template>
+    <div class="default-main">
+        <el-tabs v-model="activeName" type="border-card">
+            <el-tab-pane label="谐波阻抗数据库" name="1">
+                <HarmonicImpedanceTable />
+            </el-tab-pane>
+            <el-tab-pane label="谐波源数据库" name="2">
+                <HarmonicSourcesTable />
+            </el-tab-pane>
+        </el-tabs>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { onMounted, reactive, ref, provide } from 'vue'
+
+import { mainHeight } from '@/utils/layout'
+import HarmonicSourcesTable from './components/harmonicSources.vue'
+import HarmonicImpedanceTable from './components/harmonicImpedance.vue'
+defineOptions({
+    name: 'database/model'
+})
+const activeName = ref('1')
+
+const layout = mainHeight(63) as any
+</script>
+
+<style lang="scss" scoped>
+.bars_w {
+    width: 100%;
+    height: 500px;
+}
+:deep(.el-tabs__content) {
+    height: v-bind('layout.height');
+    overflow-y: auto;
+}
+</style>
diff --git a/src/views/pqs/harmonicMonitoring/detailed/pollutionReport/index.vue b/src/views/pqs/harmonicMonitoring/detailed/pollutionReport/index.vue
new file mode 100644
index 00000000..6ad2198e
--- /dev/null
+++ b/src/views/pqs/harmonicMonitoring/detailed/pollutionReport/index.vue
@@ -0,0 +1,453 @@
+<template>
+  <div class="default-main full-height">
+    <TableHeader datePicker  ref="TableHeaderRef">
+      <template #select>
+       
+        <el-form-item label="区域">
+           <el-cascader 
+            v-bind="$attrs" 
+            :options="areOptions" 
+            :props="cascaderProps" 
+            v-model="selectedArea"
+            @change="handleFilterChange"
+            />
+        </el-form-item>
+        <el-form-item label="统计类型">
+          <el-select
+            v-model="tableStore.table.params.statisticalType"
+            value-key="id"
+            placeholder="请选择统计类型"
+            @change="handleStatisticalTypeChange"
+          >
+            <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="电网标志">
+          <el-select 
+            v-model="tableStore.table.params.powerFlag" 
+            placeholder="请选择电网标志"
+            @change="handleFilterChange"
+          >
+            <el-option label="全部" value="0"></el-option>
+            <el-option label="电网侧" value="1"></el-option>
+            <el-option label="非电网侧" value="2"></el-option>
+          </el-select>
+        </el-form-item>
+        <!-- 添加其他前端过滤条件 -->
+        <el-form-item label="变电站">
+          <el-input 
+            v-model="localFilters.subStationName" 
+            placeholder="请输入变电站名称"
+            clearable
+            @input="handleFilterChange"
+          />
+        </el-form-item>
+        <el-form-item label="终端名称">
+          <el-input 
+            v-model="localFilters.devName" 
+            placeholder="请输入终端名称"
+            clearable
+            @input="handleFilterChange"
+          />
+        </el-form-item>
+        <el-form-item label="监测点名称">
+          <el-input 
+            v-model="localFilters.lineName" 
+            placeholder="请输入监测点名称"
+            clearable
+            @input="handleFilterChange"
+          />
+        </el-form-item>
+      </template>
+      <template #operation>
+        <el-button icon="el-icon-Download" type="primary" @click="exportEvent">导出</el-button>
+      </template>
+    </TableHeader>
+      
+        <div v-loading="tableStore.table.loading" class="table-container">
+            <vxe-table
+                class="full-height-table"
+                ref="positioningtableRef"
+                auto-resize
+                :data="tableStore.table.data"
+                v-bind="defaultAttribute"
+                :height="tableHeight"
+            >
+                <vxe-column title="序号" width="80" type="seq" align="center"></vxe-column>
+                <vxe-column field="gdName" title="供电公司" align="center"></vxe-column>
+                <vxe-column field="subStationName" :show-overflow="true" title="变电站" align="center" width="230"></vxe-column>
+                <vxe-column field="devName" title="终端名称" align="center"></vxe-column>
+                <vxe-column field="devType" title="终端型号" align="center" width="200"></vxe-column>
+                <vxe-column field="loginTime" title="投运时间" align="center"></vxe-column>
+                <vxe-column field="lineName" title="监测点名称" align="center"></vxe-column>
+                <vxe-column field="powerFlag" title="监测位置" align="center"></vxe-column>
+                <vxe-column field="lineVoltage" title="监测点电压等级" align="center"></vxe-column>
+                <vxe-column field="loadType" title="干扰源类型" align="center"></vxe-column>
+                <vxe-column field="objName" title="监测对象名称" align="center" width="200"></vxe-column>
+                <vxe-column field="onlineRate" title="在线率" align="center"></vxe-column>
+                <vxe-column field="integrity" title="完整率" align="center"></vxe-column>
+                <vxe-column field="harmonicValue" title="谐波电压污染值" align="center"></vxe-column>
+                <vxe-column field="upCounts" title="暂升次数(次)" align="center"></vxe-column>
+                <vxe-column field="downCounts" title="电压暂降(次)" align="center"></vxe-column>
+                <vxe-column field="breakCounts" title="短时中断(次)" align="center"></vxe-column>
+                <vxe-column field="monitorId" title="一类监测点" align="center" :formatter="formatMonitorId"></vxe-column>
+            </vxe-table>
+            <!-- 修改分页控件 -->
+            <div class="pagination-container">
+                <el-pagination
+                    :current-page="tableStore.table.params.pageNum"
+                    :page-size="tableStore.table.params.pageSize"
+                    :page-sizes="[10, 20, 50, 100]"
+                    background
+                    layout="sizes, total, prev, pager, next, jumper"
+                    :total="tableStore.table.total"
+                    @size-change="handleSizeChange"
+                    @current-change="handleCurrentChange"
+                ></el-pagination>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, provide, onBeforeUnmount, computed, reactive, watch } from 'vue'
+import TableStore from '@/utils/tableStore'
+import TableHeader from '@/components/table/header/index.vue'
+import { defaultAttribute } from '@/components/table/defaultAttribute'
+import { useDictData } from '@/stores/dictData'
+import { debounce } from 'lodash-es'
+
+defineOptions({
+    name: 'harmonic-boot/qydetailedAnalysis/pollutionReport'
+})
+
+const dictData = useDictData()
+const options = dictData.getBasicData('Pollution_Calc')
+const tableHeight = ref(500) // 默认高度
+const positioningtableRef = ref()
+// 添加区域选择的响应式变量
+const selectedArea = ref()
+const areOptions:any = dictData.state.area
+const allData = ref<PollutionItem[]>([])
+const TableHeaderRef = ref()
+
+const cascaderProps = {
+    label: 'name',
+    value: 'id',
+    checkStrictly: true,
+    emitPath: false
+}
+
+// 存储所有数据
+interface PollutionItem {
+  gdName?: string
+  subStationName?: string
+  devName?: string
+  lineName?: string
+  powerFlag?: string
+}
+
+// 格式化一类监测点字段
+const formatMonitorId = (row: any) => {
+  return row.row.monitorId || '/'
+}
+// 本地过滤参数
+const localFilters = reactive({
+  gdName: '',
+  subStationName: '',
+  devName: '',
+  lineName: '',
+  powerFlag: '0' // 本地存储电网标志值
+})
+
+
+// 计算表格高度
+const calculateTableHeight = () => {
+    const windowHeight = window.innerHeight
+    const headerHeight = 120
+    const paginationHeight = 50
+    const padding = 20
+    tableHeight.value = windowHeight - headerHeight - paginationHeight - padding
+}
+
+// 防抖处理窗口大小变化
+const debouncedCalculateTableHeight = debounce(() => {
+    calculateTableHeight()
+}, 300)
+
+// 计算过滤后的数据
+const filteredData = computed(() => {
+  let result = [...allData.value]
+
+  // 区域过滤
+  if (selectedArea.value) {
+    // 查找匹配的区域名称
+    let areaName = ''
+    let areaLevel = -1
+    const findAreaName = (areas: any[]) => {
+      for (const area of areas) {
+        
+        if (area.id === selectedArea.value) {
+          areaName = area.name
+          areaLevel = area.level !== undefined ? area.level : -1
+          break
+        }
+        if (area.children && area.children.length > 0) {
+          findAreaName(area.children)
+        }
+      }
+    }
+    findAreaName(areOptions)
+    
+    // 根据区域名称过滤数据，但只有当层级大于1时才过滤
+     if (areaName && areaLevel > 1) {
+        result = result.filter(item => item.gdName && item.gdName.includes(areaName))
+    }
+  }
+
+  // 电网标志过滤
+  if (localFilters.powerFlag === '1') {
+    // 电网侧
+    result = result.filter(item => item.powerFlag && !item.powerFlag.includes('非'))
+  } else if (localFilters.powerFlag === '2') {
+    // 非电网侧
+    result = result.filter(item => item.powerFlag && item.powerFlag.includes('非'))
+  }
+  // '0' 表示全部，不过滤
+  
+  // 变电站过滤
+  if (localFilters.subStationName) {
+    result = result.filter(item => item.subStationName && item.subStationName.includes(localFilters.subStationName))
+  }
+  
+  // 终端名称过滤
+  if (localFilters.devName) {
+    result = result.filter(item => item.devName && item.devName.includes(localFilters.devName))
+  }
+  
+  // 监测点名称过滤
+  if (localFilters.lineName) {
+    result = result.filter(item => item.lineName && item.lineName.includes(localFilters.lineName))
+  }
+  
+  return result
+})
+
+// 计算当前页数据
+const currentPageData = computed(() => {
+  const pageSize = tableStore.table.params.pageSize
+  const pageNum = tableStore.table.params.pageNum
+  const start = (pageNum - 1) * pageSize
+  const end = start + pageSize
+  return filteredData.value.slice(start, end)
+})
+
+// 更新总条数
+const updateTotal = computed(() => {
+  return filteredData.value.length
+})
+
+const tableStore = new TableStore({
+    url: '/harmonic-boot/PollutionSubstation/downPollutionLineCalc',
+    method: 'POST',
+    column: [],
+    beforeSearchFun: () => {
+        //delete tableStore.table.params.statisticalType
+        delete tableStore.table.params.deptIndex
+        delete tableStore.table.params.interval
+        delete tableStore.table.params.searchEndTime
+        delete tableStore.table.params.searchBeginTime
+        delete tableStore.table.params.timeFlag
+    },
+    loadCallback: () => {
+        // 将所有数据存储到 allData 中
+        allData.value = tableStore.table.data || []
+        // 更新总条数
+        tableStore.table.total = updateTotal.value
+        // 更新当前页数据
+        tableStore.table.data = currentPageData.value
+    }
+})
+
+provide('tableStore', tableStore)
+
+// 监听区域选项变化，设置默认值
+watch(
+  () => areOptions,
+  (newOptions) => {
+    if (newOptions && newOptions.length > 0) {
+      // 设置默认选中第一项
+      selectedArea.value = newOptions[0].id
+      tableStore.table.params.id = newOptions[0].id
+    }
+  },
+  { immediate: true }
+)
+
+// 初始化统计类型
+watch(
+  () => options,
+  (newOptions) => {
+    if (newOptions && newOptions.length > 0) {
+      // 检查是否已经设置了统计类型
+      if (!tableStore.table.params.statisticalType) {
+        tableStore.table.params.statisticalType = newOptions[0]
+        tableStore.table.params.ids = [newOptions[0].id]
+      }
+    }
+  },
+  { immediate: true }
+)
+
+
+tableStore.table.params.powerFlag = "0"
+tableStore.table.params.isUpToGrid = 0
+tableStore.table.params.type = 1
+
+// 监听统计类型变化，同步更新ids
+const handleStatisticalTypeChange = (newVal: { id: any }) => {
+  if (newVal) {
+    tableStore.table.params.ids = [newVal.id]
+  }
+  // 重新调用接口
+  tableStore.index()
+}
+
+// 处理过滤条件变化
+const handleFilterChange = () => {
+  // 更新本地电网标志值
+  localFilters.powerFlag = tableStore.table.params.powerFlag
+  // 重置分页到第一页
+  tableStore.table.params.pageNum = 1
+  // 更新数据和总条数
+  tableStore.table.data = currentPageData.value
+  tableStore.table.total = updateTotal.value
+}
+
+// 分页事件处理
+const handleSizeChange = (val: number) => {
+  tableStore.table.params.pageSize = val
+  tableStore.table.params.pageNum = 1
+  tableStore.table.data = currentPageData.value
+  tableStore.table.total = updateTotal.value
+}
+
+const handleCurrentChange = (val: number) => {
+  tableStore.table.params.pageNum = val
+  tableStore.table.data = currentPageData.value
+  tableStore.table.total = updateTotal.value
+}
+
+// 导出
+const exportEvent = () => {
+  // 获取当前过滤后的所有数据
+  const allFilteredData = filteredData.value;
+  
+  // 使用 vxe-table 的导出功能
+  positioningtableRef.value.exportData({
+    filename: '谐波电压污染报告',
+    sheetName: 'Sheet1',
+    type: 'xlsx',
+    useStyle: true,
+    data: allFilteredData,
+    columnFilterMethod: function (column, $columnIndex) {
+      return !(column.$columnIndex === 0)
+    }
+  })
+}
+
+onMounted(() => {
+  tableStore.index()
+  TableHeaderRef.value?.setDatePicker([
+    { label: '年份', value: 1 },
+    { label: '季度', value: 2 },
+    { label: '月份', value: 3 },
+    { label: '周', value: 4 }
+  ])
+
+  calculateTableHeight()
+  window.addEventListener('resize', debouncedCalculateTableHeight)
+})
+
+onBeforeUnmount(() => {
+  window.removeEventListener('resize', debouncedCalculateTableHeight)
+})
+</script>
+<style scoped lang="scss">
+.full-height {
+    /* 使用视口高度确保占满整个屏幕 */
+    height: 91vh;
+    display: flex;
+    flex-direction: column;
+}
+
+.table-container {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    /* 关键：隐藏容器的滚动条 */
+    overflow: hidden;
+}
+
+.full-height-table {
+    flex: 1;
+    /* 关键：只允许表格内容滚动 */
+    overflow: hidden;
+}
+
+:deep .vxe-table {
+    /* 确保表格组件本身可以滚动 */
+    height: 100% !important;
+    overflow: hidden !important;
+}
+
+:deep .vxe-table--body-wrapper {
+    /* 关键：确保表格主体可以滚动 */
+    overflow: auto !important;
+}
+
+.pagination-container {
+    display: flex;
+    justify-content: space-between; /* 左右分布 */
+    align-items: center;
+    min-height: 60px; /* 使用最小高度而不是固定高度 */
+    padding: 10px 20px; /* 增加左右内边距 */
+}
+
+:deep .el-pagination {
+    display: flex;
+    align-items: center;
+    width: 100%; /* 占满容器宽度 */
+    
+    .el-pagination__sizes {
+        .el-select {
+            min-width: 128px;
+        }
+    }
+    
+    .el-pagination__total {
+        margin-right: 10px;
+    }
+    
+    /* 将除了 sizes 和 total 之外的所有元素都推到最右边 */
+    .btn-prev, 
+    .btn-pager, 
+    .btn-next, 
+    .el-pagination__jump {
+        margin-left: auto;
+    }
+    
+    /* 确保这些元素之间有适当的间距 */
+    .btn-prev {
+        margin-right: 5px;
+    }
+    
+    .btn-next {
+        margin-left: 5px;
+    }
+    
+    .el-pagination__jump {
+        margin-left: 10px;
+    }
+}
+</style>
\ No newline at end of file