From 7d37e19cdf869220dc467f6cacadab8bacdfef1e Mon Sep 17 00:00:00 2001
From: GGJ <357021191@qq.com>
Date: Thu, 30 May 2024 17:23:04 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E6=95=B0=20=E6=B7=BB?=
 =?UTF-8?q?=E5=8A=A0=E6=95=B0=E6=8D=AE=E5=AE=8C=E6=95=B4=E6=80=A7=20?=
 =?UTF-8?q?=E5=9C=A8=E7=BA=BF=E7=8E=87=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md                                     |  26 +-
 .../embed/lntegruty/components/echart.vue     | 272 ++++++++++++++++++
 .../embed/lntegruty/components/table.vue      | 218 ++++++++++++++
 .../embed/lntegruty/index.vue                 |  61 ++--
 .../embed/onlinerate/components/echart.vue    | 272 ++++++++++++++++++
 .../embed/onlinerate/components/table.vue     | 219 ++++++++++++++
 .../embed/onlinerate/index.vue                |  57 ++--
 7 files changed, 1059 insertions(+), 66 deletions(-)
 create mode 100644 src/views/pqs/harmonicMonitoring/embed/lntegruty/components/echart.vue
 create mode 100644 src/views/pqs/harmonicMonitoring/embed/lntegruty/components/table.vue
 create mode 100644 src/views/pqs/harmonicMonitoring/embed/onlinerate/components/echart.vue
 create mode 100644 src/views/pqs/harmonicMonitoring/embed/onlinerate/components/table.vue

diff --git a/README.md b/README.md
index 28ecef0b..277c63e7 100644
--- a/README.md
+++ b/README.md
@@ -1,8 +1,13 @@
 #### 介绍
-    Vue 3 + TypeScript + Vite这个模板可以帮助您开始使用Vue 3和TypeScript在Vite中进行开发。该模板使用了Vue 3的<script setup>单文件组件，请查看script setup文档了解更多信息。
+
+```
+Vue 3 + TypeScript + Vite这个模板可以帮助您开始使用Vue 3和TypeScript在Vite中进行开发。该模板使用了Vue 3的<script setup>单文件组件，请查看script setup文档了解更多信息。
+```
 
 #### 安装依赖&运行项目
+
 > node version:^18.17.0 || >=20.5.0"
+
 ```shell
 #项目使用pnpm包管理器
 npm i pnpm -g
@@ -13,12 +18,19 @@ pnpm i
 #运行项目
 npm run dev
 ```
+
 #### 页面编写-示例
-    基础页面写法请查看`src/template`下的readme.md
+
+```
+基础页面写法请查看`src/template`下的readme.md
+```
+
 #### 开发规范
+
 > 初衷：养成合理的习惯，精力留在技术调研、业务开发中。
-> 
+>
 > 常见点如下描述，更多的规范待前端开发人员有时间后，慢慢丰富。
+
 * 命名风格：所有的包（文件夹）、文件名以小驼峰的风格命名，比如xxxAaa，禁止XxxAaa或者xxx-aaa。
 * 命名语义：禁止中文命名或拼音，英文命名借用下工具，稍微准确一点，不要与实际业务相差太远。
 * 功能组件创建风格：以**功能名称**命名文件夹，每个功能下以**index.vue**作为该功能的组件入口。正确示例参考：/src/views/auth/menu/index.vue。
@@ -28,11 +40,14 @@ npm run dev
 * todo...：待后续补充。
 
 #### 开发助手
+
 ##### 1、表格系列
+
 * 页面表格以及表格页面按钮的弹出等功能参考：/views/pqs/voltageSags/sagGovern/index.vue
 * 表格中需要替换数据：
+
 ```js
-    // 通过formatter函数返回实际需要返回的值
+// 通过formatter函数返回实际需要返回的值
     {
         title: '数据来源', field: 'dataSource', minWidth: '130',
         formatter: (row: any) => {
@@ -40,8 +55,11 @@ npm run dev
         }
     }
 ```
+
 ##### 2、样式系列
+
 * 获取当前主体的高度：import { mainHeight } from '@/utils/layout'
+* 弹框内输入框长度设置  1行1个 class="form-one"  1行2个 class="form-two"
 
 #### 依赖变更记录
 
diff --git a/src/views/pqs/harmonicMonitoring/embed/lntegruty/components/echart.vue b/src/views/pqs/harmonicMonitoring/embed/lntegruty/components/echart.vue
new file mode 100644
index 00000000..5cb1b700
--- /dev/null
+++ b/src/views/pqs/harmonicMonitoring/embed/lntegruty/components/echart.vue
@@ -0,0 +1,272 @@
+<template>
+    <TableHeader area datePicker ref="TableHeaderRef">
+        <template #select>
+            <el-form-item label="统计类型:">
+                <el-select
+                    v-model="tableStore.table.params.statisticalType"
+                    value-key="id"
+                    placeholder="请选择统计类型"
+                >
+                    <el-option
+                        v-for="item in classificationData"
+                        :key="item.id"
+                        :label="item.name"
+                        :value="item"
+                    ></el-option>
+                </el-select>
+            </el-form-item>
+
+            <el-form-item label="电压等级:">
+                <el-select
+                    v-model="tableStore.table.params.scale"
+                    multiple
+                    collapse-tags
+                    clearable
+                    value-key="id"
+                    placeholder="请选择电压等级"
+                >
+                    <el-option
+                        v-for="item in voltageleveloption"
+                        :key="item.id"
+                        :label="item.name"
+                        :value="item"
+                    ></el-option>
+                </el-select>
+            </el-form-item>
+            <el-form-item label="终端厂家:">
+                <el-select
+                    v-model="tableStore.table.params.manufacturer"
+                    multiple
+                    collapse-tags
+                    clearable
+                    value-key="id"
+                    placeholder="请选择终端厂家"
+                >
+                    <el-option
+                        v-for="item in terminaloption"
+                        :key="item.id"
+                        :label="item.name"
+                        :value="item"
+                    ></el-option>
+                </el-select>
+            </el-form-item>
+            <el-form-item label="干扰源类型:">
+                <el-select
+                    v-model="tableStore.table.params.loadType"
+                    multiple
+                    collapse-tags
+                    clearable
+                    value-key="id"
+                    placeholder="请选择干扰源类型"
+                >
+                    <el-option
+                        v-for="item in interfereoption"
+                        :key="item.id"
+                        :label="item.name"
+                        :value="item"
+                    ></el-option>
+                </el-select>
+            </el-form-item>
+        </template>
+    </TableHeader>
+    <my-echart class="mt10" :style="`height: calc(${tableStore.table.height} - 75px)`" :options="options" />
+</template>
+<script setup lang="ts">
+import { ref, onMounted, provide, nextTick } from 'vue'
+import TableStore from '@/utils/tableStore'
+import Table from '@/components/table/index.vue'
+import MyEchart from '@/components/echarts/MyEchart.vue'
+import TableHeader from '@/components/table/header/index.vue'
+import { useDictData } from '@/stores/dictData'
+import * as echarts from 'echarts/core'
+const dictData = useDictData()
+const options = ref({})
+
+const classificationData = dictData.getBasicData('Statistical_Type', ['Report_Type'])
+const voltageleveloption = dictData.getBasicData('Dev_Voltage_Stand')
+const terminaloption = dictData.getBasicData('Dev_Manufacturers')
+const interfereoption = dictData.getBasicData('Interference_Source')
+
+const TableHeaderRef = ref()
+const tableStore = new TableStore({
+    url: '/device-boot/LineIntegrityData/getIntegrityIcon',
+
+    showPage: false,
+    method: 'POST',
+    column: [],
+
+    loadCallback: () => {
+        // tableStore.table.data.type
+        options.value = {
+            title: {
+                text: tableStore.table.params.statisticalType.name
+            },
+            tooltip: {
+                formatter: function (params: any) {
+                    var tips = ''
+
+                    for (var i = 0; i < params.length; i++) {
+                        if (params[i].value == 1) {
+                            tips += params[i].name + '</br>'
+                            tips += '完整性:暂无数据'
+                        } else {
+                            tips += params[i].name + '</br>'
+                            tips += '完整性:' + params[i].value.toFixed(2)
+                        }
+                    }
+                    return tips
+                }
+            },
+            grid: {
+                top: '50px',
+                right: '80px'
+            },
+            xAxis: {
+                name: tableStore.table.params.statisticalType.name,
+                data: tableStore.table.data.map((item: any) => item.type)
+            },
+            yAxis: {
+                name: '%',
+                max: 100
+            },
+            options: {
+                series: [
+                    {
+                        name: '完整性',
+                        type: 'bar',
+                        data: tableStore.table.data.map((item: any) => item.single),
+                        itemStyle: {
+                            normal: {
+                                // 随机显示
+                                //color:function(d){return "#"+Math.floor(Math.random()*(256*256*256-1)).toString(16);}
+
+                                // 定制显示（按顺序）
+                                color: function (params: any) {
+                                    if (params.value >= 90) {
+                                        return new echarts.graphic.LinearGradient(
+                                            0,
+                                            1,
+                                            0,
+                                            0,
+                                            [
+                                                {
+                                                    offset: 1,
+                                                    color: '#339966'
+                                                }
+                                            ],
+                                            false
+                                        )
+                                    } else if (params.value >= 60 && params.value <= 90) {
+                                        return new echarts.graphic.LinearGradient(
+                                            0,
+                                            1,
+                                            0,
+                                            0,
+                                            [
+                                                {
+                                                    offset: 1,
+                                                    color: '#FFCC33'
+                                                }
+                                            ],
+                                            false
+                                        )
+                                    } else if (params.value <= 60 && params.value > 1) {
+                                        return new echarts.graphic.LinearGradient(
+                                            0,
+                                            1,
+                                            0,
+                                            0,
+                                            [
+                                                {
+                                                    offset: 1,
+                                                    color: '#CC0000'
+                                                }
+                                            ],
+                                            false
+                                        )
+                                    } else if (params.value > 0 && params.value <= 1) {
+                                        return new echarts.graphic.LinearGradient(
+                                            0,
+                                            1,
+                                            0,
+                                            0,
+                                            [
+                                                {
+                                                    offset: 1,
+                                                    color: '#ccc'
+                                                }
+                                            ],
+                                            false
+                                        )
+                                    }
+                                }
+                            }
+                        },
+                        markLine: {
+                            silent: false,
+                            symbol: 'circle',
+                            data: [
+                                {
+                                    name: '',
+                                    yAxis: 100,
+                                    lineStyle: {
+                                        color: '#339966'
+                                    },
+                                    label: {
+                                        //position: "middle",
+                                        formatter: '{b}',
+                                        textStyle: {
+                                            color: '#339966'
+                                        }
+                                    }
+                                },
+                                {
+                                    name: '',
+                                    yAxis: 90,
+                                    lineStyle: {
+                                        color: '#FFCC33'
+                                    },
+                                    label: {
+                                        // position: "middle",
+                                        formatter: '{b}',
+                                        textStyle: {
+                                            color: '#FFCC33'
+                                        }
+                                    }
+                                },
+                                {
+                                    name: '',
+                                    yAxis: 60,
+                                    lineStyle: {
+                                        color: '#CC0000'
+                                    },
+                                    label: {
+                                        //position: "middle",
+                                        formatter: '{b}',
+                                        textStyle: {
+                                            color: '#CC0000'
+                                        }
+                                    }
+                                }
+                            ]
+                        }
+                    }
+                ]
+            }
+        }
+    }
+})
+
+tableStore.table.params.statisticalType = classificationData.filter(item => item.name == '电网拓扑')[0]
+tableStore.table.params.monitorFlag = 2
+tableStore.table.params.powerFlag = 2
+tableStore.table.params.serverName = 'harmonicBoot'
+
+provide('tableStore', tableStore)
+
+onMounted(() => {
+    tableStore.index()
+})
+</script>
+
+<style scoped lang="scss"></style>
diff --git a/src/views/pqs/harmonicMonitoring/embed/lntegruty/components/table.vue b/src/views/pqs/harmonicMonitoring/embed/lntegruty/components/table.vue
new file mode 100644
index 00000000..4c4f1e21
--- /dev/null
+++ b/src/views/pqs/harmonicMonitoring/embed/lntegruty/components/table.vue
@@ -0,0 +1,218 @@
+<template>
+    <TableHeader area datePicker ref="TableHeaderRef">
+        <template #select>
+            <el-form-item label="统计类型:">
+                <el-select
+                    v-model="tableStore.table.params.statisticalType"
+                    value-key="id"
+                    placeholder="请选择统计类型"
+                >
+                    <el-option
+                        v-for="item in classificationData"
+                        :key="item.id"
+                        :label="item.name"
+                        :value="item"
+                    ></el-option>
+                </el-select>
+            </el-form-item>
+
+            <el-form-item label="电压等级:">
+                <el-select
+                    v-model="tableStore.table.params.scale"
+                    multiple
+                    collapse-tags
+                    clearable
+                    value-key="id"
+                    placeholder="请选择电压等级"
+                >
+                    <el-option
+                        v-for="item in voltageleveloption"
+                        :key="item.id"
+                        :label="item.name"
+                        :value="item"
+                    ></el-option>
+                </el-select>
+            </el-form-item>
+            <el-form-item label="终端厂家:">
+                <el-select
+                    v-model="tableStore.table.params.manufacturer"
+                    multiple
+                    collapse-tags
+                    clearable
+                    value-key="id"
+                    placeholder="请选择终端厂家"
+                >
+                    <el-option
+                        v-for="item in terminaloption"
+                        :key="item.id"
+                        :label="item.name"
+                        :value="item"
+                    ></el-option>
+                </el-select>
+            </el-form-item>
+            <el-form-item label="干扰源类型:">
+                <el-select
+                    v-model="tableStore.table.params.loadType"
+                    multiple
+                    collapse-tags
+                    clearable
+                    value-key="id"
+                    placeholder="请选择干扰源类型"
+                >
+                    <el-option
+                        v-for="item in interfereoption"
+                        :key="item.id"
+                        :label="item.name"
+                        :value="item"
+                    ></el-option>
+                </el-select>
+            </el-form-item>
+        </template>
+    </TableHeader>
+    <Table ref="tableRef" :tree-config="{ transform: true, parentField: 'pid' }" :scroll-y="{ enabled: true }" />
+</template>
+<script setup lang="ts">
+import { ref, onMounted, provide, nextTick } 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 dictData = useDictData()
+const tableRef = ref()
+
+const classificationData = dictData.getBasicData('Statistical_Type', ['Report_Type'])
+const voltageleveloption = dictData.getBasicData('Dev_Voltage_Stand')
+const terminaloption = dictData.getBasicData('Dev_Manufacturers')
+const interfereoption = dictData.getBasicData('Interference_Source')
+
+const TableHeaderRef = ref()
+const tableStore = new TableStore({
+    url: '/device-boot/LineIntegrityData/getLineIntegrityData',
+    publicHeight: 65,
+    showPage: false,
+    method: 'POST',
+    column: [
+        { field: 'name', title: '电网拓扑', minWidth: '180px', align: 'left', treeNode: true },
+        {
+            field: 'ip',
+            title: '网络参数',
+            formatter: ({ row }: any) => {
+                return row.ip || '/'
+            }
+        },
+        {
+            field: 'dataName',
+            title: '终端名称',
+            formatter: ({ row }: any) => {
+                return row.dataName || '/'
+            }
+        },
+        {
+            field: 'manufacturer',
+            title: '厂家',
+            formatter: ({ row }: any) => {
+                return row.manufacturer || '/'
+            }
+        },
+        {
+            field: 'comFlag',
+            title: '通讯状态',
+            render: 'tag',
+            custom: {
+                0: 'danger',
+                1: 'success',
+                3: 'info'
+            },
+            replaceValue: {
+                0: '禁用',
+                1: '正常',
+                3: '/'
+            }
+        },
+        {
+            field: 'updateTime',
+            title: '最新数据时间',
+            formatter: ({ row }: any) => {
+                return row.updateTime || '/'
+            }
+        },
+        {
+            field: 'integrityData',
+            title: '完整性(%)',
+            formatter: ({ row }: any) => {
+                return row.integrityData == 3.14159 ? '暂无数据' : row.integrityData.toFixed(2)
+            }
+        },
+        {
+            field: 'assess',
+            title: '评估',
+            render: 'tag',
+            custom: {
+                0: 'info',
+                1: 'danger',
+                2: 'warning',
+                3: 'success'
+            },
+            replaceValue: {
+                0: '暂无数据',
+                1: '不合格',
+                2: '合格',
+                3: '优秀'
+            }
+        }
+    ],
+    beforeSearchFun: () => {
+        tableStore.options.column[0].title = tableStore.table.params.statisticalType.name
+    },
+    loadCallback: () => {
+        let treeData = []
+        tableStore.table.data.forEach((item: any) => {
+            if (item.children.length > 0) {
+                item.id = item.children[0].pid
+            }
+        })
+
+        treeData = tree2List(tableStore.table.data,)
+        tableStore.table.data = JSON.parse(JSON.stringify(treeData))
+        console.log("🚀 ~ tableStore.table.data:", tableStore.table.data)
+
+        setTimeout(() => {
+            tableRef.value.getRef().setAllTreeExpand(true)
+        }, 0)
+    }
+})
+
+tableStore.table.params.statisticalType = classificationData.filter(item => item.name == '电网拓扑')[0]
+tableStore.table.params.monitorFlag = 2
+tableStore.table.params.powerFlag = 2
+tableStore.table.params.serverName = 'harmonicBoot'
+
+provide('tableStore', tableStore)
+const tree2List = (list: any, pid?: string) => {
+    //存储结果的数组
+    let arr: any = []
+    // 遍历 tree 数组
+    list.forEach((item: any) => {
+        item.comFlag = item.comFlag == null ? 3 : item.comFlag
+
+        item.assess = item.integrityData == 3.14159 ? 0 : item.integrityData < 60 ? 1 : item.integrityData < 90 ? 2 : 3
+        item.pid = pid
+        // 判断item是否存在children
+        if (!item.children) return arr.push(item)
+        // 函数递归，对children数组进行tree2List的转换
+        const children = tree2List(item.children, item.id)
+        // 删除item的children属性
+        delete item.children
+        // 把item和children数组添加至结果数组
+        //..children: 意思是把children数组展开
+        arr.push(item, ...children)
+    })
+    // 返回结果数组
+    return arr
+}
+onMounted(() => {
+    tableStore.index()
+})
+</script>
+
+<style scoped lang="scss"></style>
diff --git a/src/views/pqs/harmonicMonitoring/embed/lntegruty/index.vue b/src/views/pqs/harmonicMonitoring/embed/lntegruty/index.vue
index ad779af9..77bf859d 100644
--- a/src/views/pqs/harmonicMonitoring/embed/lntegruty/index.vue
+++ b/src/views/pqs/harmonicMonitoring/embed/lntegruty/index.vue
@@ -1,40 +1,37 @@
 <template>
-    <!-- 完整性 -->
-    <div class="default-main" :style="height" v-loading="loading">
-        <iframe
-            :key="num"
-            :src="iframeSrc"
-            id="frame1"
-            ref="iframeRef"
-            frameborder="0"
-            style="width: 100%; height: 100%; border: 0px solid"
-        />
-    </div> 
+    <div class="default-main">
+        <el-tabs v-model="activeName" type="border-card">
+            <el-tab-pane label="数据完整性列表" name="1">
+                <Table />
+            </el-tab-pane>
+            <el-tab-pane label="数据完整性图表" name="2">
+                <Echart />
+            </el-tab-pane>
+        </el-tabs>
+    </div>
 </template>
+
 <script setup lang="ts">
-import { onMounted, ref, nextTick } from 'vue'
+import { onMounted, reactive, ref, provide } from 'vue'
+
 import { mainHeight } from '@/utils/layout'
+import Table from './components/table.vue'
+import Echart from './components/echart.vue'
 defineOptions({
-    name: 'harmonic-boot/harmonic/getIntegrityData'
+    name: 'harmonic-boot/area/OnlineRate'
 })
-const height = mainHeight(20)
+const activeName = ref('1')
 
-const num = ref(0)
-const loading = ref(true)
-const iframeRef: any = ref(null)
-// const iframeSrc = 'http://www.jibei1.com:8088/#/harmonic-boot/detailedAnalysis/responsibilityqr'
-const iframeSrc = window.location.origin + '/jbv2/#/harmonic-boot/harmonic/getIntegrityDataqr'
-
-onMounted(() => {
-    iframeRef.value.onload = () => {
-        iframeRef.value.contentWindow.postMessage({ info: window.localStorage.getItem('adminInfo') }, '*')
-        setTimeout(() => {
-            if (loading.value) {
-            }
-            ++num.value
-            loading.value = false
-        }, 0)
-    }
-})
+const layout = mainHeight(63) as any
 </script>
-<style lang="scss" scoped></style>
+
+<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/embed/onlinerate/components/echart.vue b/src/views/pqs/harmonicMonitoring/embed/onlinerate/components/echart.vue
new file mode 100644
index 00000000..774dc496
--- /dev/null
+++ b/src/views/pqs/harmonicMonitoring/embed/onlinerate/components/echart.vue
@@ -0,0 +1,272 @@
+<template>
+    <TableHeader area datePicker ref="TableHeaderRef">
+        <template #select>
+            <el-form-item label="统计类型:">
+                <el-select
+                    v-model="tableStore.table.params.statisticalType"
+                    value-key="id"
+                    placeholder="请选择统计类型"
+                >
+                    <el-option
+                        v-for="item in classificationData"
+                        :key="item.id"
+                        :label="item.name"
+                        :value="item"
+                    ></el-option>
+                </el-select>
+            </el-form-item>
+
+            <el-form-item label="电压等级:">
+                <el-select
+                    v-model="tableStore.table.params.scale"
+                    multiple
+                    collapse-tags
+                    clearable
+                    value-key="id"
+                    placeholder="请选择电压等级"
+                >
+                    <el-option
+                        v-for="item in voltageleveloption"
+                        :key="item.id"
+                        :label="item.name"
+                        :value="item"
+                    ></el-option>
+                </el-select>
+            </el-form-item>
+            <el-form-item label="终端厂家:">
+                <el-select
+                    v-model="tableStore.table.params.manufacturer"
+                    multiple
+                    collapse-tags
+                    clearable
+                    value-key="id"
+                    placeholder="请选择终端厂家"
+                >
+                    <el-option
+                        v-for="item in terminaloption"
+                        :key="item.id"
+                        :label="item.name"
+                        :value="item"
+                    ></el-option>
+                </el-select>
+            </el-form-item>
+            <el-form-item label="干扰源类型:">
+                <el-select
+                    v-model="tableStore.table.params.loadType"
+                    multiple
+                    collapse-tags
+                    clearable
+                    value-key="id"
+                    placeholder="请选择干扰源类型"
+                >
+                    <el-option
+                        v-for="item in interfereoption"
+                        :key="item.id"
+                        :label="item.name"
+                        :value="item"
+                    ></el-option>
+                </el-select>
+            </el-form-item>
+        </template>
+    </TableHeader>
+    <my-echart class="mt10" :style="`height: calc(${tableStore.table.height} - 75px)`" :options="options" />
+</template>
+<script setup lang="ts">
+import { ref, onMounted, provide, nextTick } from 'vue'
+import TableStore from '@/utils/tableStore'
+import Table from '@/components/table/index.vue'
+import MyEchart from '@/components/echarts/MyEchart.vue'
+import TableHeader from '@/components/table/header/index.vue'
+import { useDictData } from '@/stores/dictData'
+import * as echarts from 'echarts/core'
+const dictData = useDictData()
+const options = ref({})
+
+const classificationData = dictData.getBasicData('Statistical_Type', ['Report_Type'])
+const voltageleveloption = dictData.getBasicData('Dev_Voltage_Stand')
+const terminaloption = dictData.getBasicData('Dev_Manufacturers')
+const interfereoption = dictData.getBasicData('Interference_Source')
+
+const TableHeaderRef = ref()
+const tableStore = new TableStore({
+    url: '/device-boot/terminalOnlineRateData/getOnlineRateDataCensus',
+
+    showPage: false,
+    method: 'POST',
+    column: [],
+
+    loadCallback: () => {
+        // tableStore.table.data.type
+        options.value = {
+            title: {
+                text: tableStore.table.params.statisticalType.name
+            },
+            tooltip: {
+                formatter: function (params: any) {
+                    var tips = ''
+
+                    for (var i = 0; i < params.length; i++) {
+                        if (params[i].value == 1) {
+                            tips += params[i].name + '</br>'
+                            tips += '在线率:暂无数据'
+                        } else {
+                            tips += params[i].name + '</br>'
+                            tips += '在线率:' + params[i].value.toFixed(2)
+                        }
+                    }
+                    return tips
+                }
+            },
+            grid: {
+                top: '50px',
+                right: '80px'
+            },
+            xAxis: {
+                name: tableStore.table.params.statisticalType.name,
+                data: tableStore.table.data.type
+            },
+            yAxis: {
+                name: '%',
+                max: 100
+            },
+            options: {
+                series: [
+                    {
+                        name: '在线率',
+                        type: 'bar',
+                        data: tableStore.table.data.single,
+                        itemStyle: {
+                            normal: {
+                                // 随机显示
+                                //color:function(d){return "#"+Math.floor(Math.random()*(256*256*256-1)).toString(16);}
+
+                                // 定制显示（按顺序）
+                                color: function (params: any) {
+                                    if (params.value >= 90) {
+                                        return new echarts.graphic.LinearGradient(
+                                            0,
+                                            1,
+                                            0,
+                                            0,
+                                            [
+                                                {
+                                                    offset: 1,
+                                                    color: '#339966'
+                                                }
+                                            ],
+                                            false
+                                        )
+                                    } else if (params.value >= 60 && params.value <= 90) {
+                                        return new echarts.graphic.LinearGradient(
+                                            0,
+                                            1,
+                                            0,
+                                            0,
+                                            [
+                                                {
+                                                    offset: 1,
+                                                    color: '#FFCC33'
+                                                }
+                                            ],
+                                            false
+                                        )
+                                    } else if (params.value <= 60 && params.value > 1) {
+                                        return new echarts.graphic.LinearGradient(
+                                            0,
+                                            1,
+                                            0,
+                                            0,
+                                            [
+                                                {
+                                                    offset: 1,
+                                                    color: '#CC0000'
+                                                }
+                                            ],
+                                            false
+                                        )
+                                    } else if (params.value > 0 && params.value <= 1) {
+                                        return new echarts.graphic.LinearGradient(
+                                            0,
+                                            1,
+                                            0,
+                                            0,
+                                            [
+                                                {
+                                                    offset: 1,
+                                                    color: '#ccc'
+                                                }
+                                            ],
+                                            false
+                                        )
+                                    }
+                                }
+                            }
+                        },
+                        markLine: {
+                            silent: false,
+                            symbol: 'circle',
+                            data: [
+                                {
+                                    name: '',
+                                    yAxis: 100,
+                                    lineStyle: {
+                                        color: '#339966'
+                                    },
+                                    label: {
+                                        //position: "middle",
+                                        formatter: '{b}',
+                                        textStyle: {
+                                            color: '#339966'
+                                        }
+                                    }
+                                },
+                                {
+                                    name: '',
+                                    yAxis: 90,
+                                    lineStyle: {
+                                        color: '#FFCC33'
+                                    },
+                                    label: {
+                                        // position: "middle",
+                                        formatter: '{b}',
+                                        textStyle: {
+                                            color: '#FFCC33'
+                                        }
+                                    }
+                                },
+                                {
+                                    name: '',
+                                    yAxis: 60,
+                                    lineStyle: {
+                                        color: '#CC0000'
+                                    },
+                                    label: {
+                                        //position: "middle",
+                                        formatter: '{b}',
+                                        textStyle: {
+                                            color: '#CC0000'
+                                        }
+                                    }
+                                }
+                            ]
+                        }
+                    }
+                ]
+            }
+        }
+    }
+})
+
+tableStore.table.params.statisticalType = classificationData.filter(item => item.name == '电网拓扑')[0]
+tableStore.table.params.monitorFlag = 2
+tableStore.table.params.powerFlag = 2
+tableStore.table.params.serverName = 'harmonicBoot'
+
+provide('tableStore', tableStore)
+
+onMounted(() => {
+    tableStore.index()
+})
+</script>
+
+<style scoped lang="scss"></style>
diff --git a/src/views/pqs/harmonicMonitoring/embed/onlinerate/components/table.vue b/src/views/pqs/harmonicMonitoring/embed/onlinerate/components/table.vue
new file mode 100644
index 00000000..a0232044
--- /dev/null
+++ b/src/views/pqs/harmonicMonitoring/embed/onlinerate/components/table.vue
@@ -0,0 +1,219 @@
+<template>
+    <TableHeader area datePicker ref="TableHeaderRef">
+        <template #select>
+            <el-form-item label="统计类型:">
+                <el-select
+                    v-model="tableStore.table.params.statisticalType"
+                    value-key="id"
+                    placeholder="请选择统计类型"
+                >
+                    <el-option
+                        v-for="item in classificationData"
+                        :key="item.id"
+                        :label="item.name"
+                        :value="item"
+                    ></el-option>
+                </el-select>
+            </el-form-item>
+
+            <el-form-item label="电压等级:">
+                <el-select
+                    v-model="tableStore.table.params.scale"
+                    multiple
+                    collapse-tags
+                    clearable
+                    value-key="id"
+                    placeholder="请选择电压等级"
+                >
+                    <el-option
+                        v-for="item in voltageleveloption"
+                        :key="item.id"
+                        :label="item.name"
+                        :value="item"
+                    ></el-option>
+                </el-select>
+            </el-form-item>
+            <el-form-item label="终端厂家:">
+                <el-select
+                    v-model="tableStore.table.params.manufacturer"
+                    multiple
+                    collapse-tags
+                    clearable
+                    value-key="id"
+                    placeholder="请选择终端厂家"
+                >
+                    <el-option
+                        v-for="item in terminaloption"
+                        :key="item.id"
+                        :label="item.name"
+                        :value="item"
+                    ></el-option>
+                </el-select>
+            </el-form-item>
+            <el-form-item label="干扰源类型:">
+                <el-select
+                    v-model="tableStore.table.params.loadType"
+                    multiple
+                    collapse-tags
+                    clearable
+                    value-key="id"
+                    placeholder="请选择干扰源类型"
+                >
+                    <el-option
+                        v-for="item in interfereoption"
+                        :key="item.id"
+                        :label="item.name"
+                        :value="item"
+                    ></el-option>
+                </el-select>
+            </el-form-item>
+        </template>
+    </TableHeader>
+    <Table ref="tableRef" :tree-config="{ transform: true, parentField: 'pid' }" :scroll-y="{ enabled: true }" />
+</template>
+<script setup lang="ts">
+import { ref, onMounted, provide, nextTick } 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 dictData = useDictData()
+const tableRef = ref()
+
+const classificationData = dictData.getBasicData('Statistical_Type', ['Report_Type'])
+const voltageleveloption = dictData.getBasicData('Dev_Voltage_Stand')
+const terminaloption = dictData.getBasicData('Dev_Manufacturers')
+const interfereoption = dictData.getBasicData('Interference_Source')
+
+const TableHeaderRef = ref()
+const tableStore = new TableStore({
+    url: '/device-boot/terminalOnlineRateData/getOnlineRateData',
+    publicHeight: 65,
+    showPage: false,
+    method: 'POST',
+    column: [
+        { field: 'name', title: '电网拓扑', minWidth: '180px', align: 'left', treeNode: true },
+        {
+            field: 'ip',
+            title: '网络参数',
+            formatter: ({ row }: any) => {
+                return row.ip || '/'
+            }
+        },
+        {
+            field: 'dataName',
+            title: '终端名称',
+            formatter: ({ row }: any) => {
+                return row.dataName || '/'
+            }
+        },
+        {
+            field: 'manufacturer',
+            title: '厂家',
+            formatter: ({ row }: any) => {
+                return row.manufacturer || '/'
+            }
+        },
+        {
+            field: 'comFlag',
+            title: '通讯状态',
+            render: 'tag',
+            custom: {
+                0: 'danger',
+                1: 'success',
+                3: 'info'
+            },
+            replaceValue: {
+                0: '禁用',
+                1: '正常',
+                3: '/'
+            }
+            // formatter: ({ row }: any) => {
+            //     return row.comFlag || '/'
+            // }
+        },
+        {
+            field: 'updateTime',
+            title: '最新数据时间',
+            formatter: ({ row }: any) => {
+                return row.updateTime || '/'
+            }
+        },
+        {
+            field: 'onlineRate',
+            title: '在线率(%)',
+            formatter: ({ row }: any) => {
+                return row.onlineRate == 3.14159 ? '暂无数据' : row.onlineRate.toFixed(2)
+            }
+        },
+        {
+            field: 'assess',
+            title: '评估',
+            render: 'tag',
+            custom: {
+                0: 'info',
+                1: 'danger',
+                2: 'warning',
+                3: 'success'
+            },
+            replaceValue: {
+                0: '暂无数据',
+                1: '不合格',
+                2: '合格',
+                3: '优秀'
+            }
+        }
+    ],
+    beforeSearchFun: () => {
+        tableStore.options.column[0].title = tableStore.table.params.statisticalType.name
+    },
+    loadCallback: () => {
+        let treeData = []
+        tableStore.table.data.forEach((item: any) => {
+            if (item.children.length > 0) {
+                item.id = item.children[0].pid
+            }
+        })
+        treeData = tree2List(tableStore.table.data)
+        tableStore.table.data = JSON.parse(JSON.stringify(treeData))
+
+        setTimeout(() => {
+            tableRef.value.getRef().setAllTreeExpand(true)
+        }, 0)
+    }
+})
+
+tableStore.table.params.statisticalType = classificationData.filter(item => item.name == '电网拓扑')[0]
+tableStore.table.params.monitorFlag = 2
+tableStore.table.params.powerFlag = 2
+tableStore.table.params.serverName = 'harmonicBoot'
+
+provide('tableStore', tableStore)
+const tree2List = (list: any) => {
+    //存储结果的数组
+    let arr: any = []
+    // 遍历 tree 数组
+    list.forEach((item: any) => {
+        item.comFlag = item.comFlag == null ? 3 : item.comFlag
+        console.log('🚀 ~ list.forEach ~ item:', item)
+
+        item.assess = item.onlineRate == 3.14159 ? 0 : item.onlineRate < 60 ? 1 : item.onlineRate < 90 ? 2 : 3
+        // 判断item是否存在children
+        if (!item.children) return arr.push(item)
+        // 函数递归，对children数组进行tree2List的转换
+        const children = tree2List(item.children)
+        // 删除item的children属性
+        delete item.children
+        // 把item和children数组添加至结果数组
+        //..children: 意思是把children数组展开
+        arr.push(item, ...children)
+    })
+    // 返回结果数组
+    return arr
+}
+onMounted(() => {
+    tableStore.index()
+})
+</script>
+
+<style scoped lang="scss"></style>
diff --git a/src/views/pqs/harmonicMonitoring/embed/onlinerate/index.vue b/src/views/pqs/harmonicMonitoring/embed/onlinerate/index.vue
index bdacb119..866b11c7 100644
--- a/src/views/pqs/harmonicMonitoring/embed/onlinerate/index.vue
+++ b/src/views/pqs/harmonicMonitoring/embed/onlinerate/index.vue
@@ -1,40 +1,37 @@
 <template>
-    <!-- 在线率 -->
-    <div class="default-main" :style="height" v-loading="loading">
-        <iframe
-            :key="num"
-            :src="iframeSrc"
-            id="frame1"
-            ref="iframeRef"
-            frameborder="0"
-            style="width: 100%; height: 100%; border: 0px solid"
-        />
+    <div class="default-main">
+        <el-tabs v-model="activeName" type="border-card">
+            <el-tab-pane label="终端在线率列表" name="1">
+                <Table />
+            </el-tab-pane>
+            <el-tab-pane label="终端在线率图表" name="2">
+                <Echart />
+            </el-tab-pane>
+        </el-tabs>
     </div>
 </template>
+
 <script setup lang="ts">
-import { onMounted, ref, nextTick } from 'vue'
+import { onMounted, reactive, ref, provide } from 'vue'
+
 import { mainHeight } from '@/utils/layout'
+import Table from './components/table.vue'
+import Echart from './components/echart.vue'
 defineOptions({
     name: 'harmonic-boot/area/OnlineRate'
 })
-const height = mainHeight(20)
+const activeName = ref('1')
 
-const num = ref(0)
-const loading = ref(true)
-const iframeRef: any = ref(null)
-// const iframeSrc = 'http://www.jibei1.com:8088/#/harmonic-boot/detailedAnalysis/responsibilityqr'
-const iframeSrc = window.location.origin + '/jbv2/#/harmonic-boot/area/OnlineRateqr'
-
-onMounted(() => {
-    iframeRef.value.onload = () => {
-        iframeRef.value.contentWindow.postMessage({ info: window.localStorage.getItem('adminInfo') }, '*')
-        setTimeout(() => {
-            if (loading.value) {
-            }
-            ++num.value
-            loading.value = false
-        }, 0)
-    }
-})
+const layout = mainHeight(63) as any
 </script>
-<style lang="scss" scoped></style>
+
+<style lang="scss" scoped>
+.bars_w {
+    width: 100%;
+    height: 500px;
+}
+:deep(.el-tabs__content) {
+    height: v-bind('layout.height');
+    overflow-y: auto;
+}
+</style>