From a73203e9cfb7c0f20bd2212fdae05fd2a0d2300a Mon Sep 17 00:00:00 2001
From: zhujiyan <17812234322@163.com>
Date: Wed, 7 Aug 2024 14:26:09 +0800
Subject: [PATCH] =?UTF-8?q?=E7=BB=88=E7=AB=AF=E5=9C=A8=E7=BA=BF=E7=8E=87?=
 =?UTF-8?q?=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../area/onlinerate/components/charts.vue     | 248 ++++++++++++
 .../onlinerate/components/onlineCharts.vue    | 305 --------------
 .../onlinerate/components/onlineratetable.vue | 377 ------------------
 .../area/onlinerate/index.vue                 |  52 +--
 4 files changed, 254 insertions(+), 728 deletions(-)
 create mode 100644 src/views/pqs/harmonicMonitoring/area/onlinerate/components/charts.vue
 delete mode 100644 src/views/pqs/harmonicMonitoring/area/onlinerate/components/onlineCharts.vue
 delete mode 100644 src/views/pqs/harmonicMonitoring/area/onlinerate/components/onlineratetable.vue

diff --git a/src/views/pqs/harmonicMonitoring/area/onlinerate/components/charts.vue b/src/views/pqs/harmonicMonitoring/area/onlinerate/components/charts.vue
new file mode 100644
index 00000000..e4a1b00e
--- /dev/null
+++ b/src/views/pqs/harmonicMonitoring/area/onlinerate/components/charts.vue
@@ -0,0 +1,248 @@
+<template>
+    <my-echart
+        v-loading="loading"
+        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 tableStoreParams: any = ref({})
+const loading = ref(false)
+const getTableStoreParams = async(val: any) => {
+    tableStoreParams.value = val
+    loading.value = true
+    setTimeout( () => {
+         tableStore.index()
+    }, 2000)
+}
+const tableStore = new TableStore({
+    url: '/device-boot/terminalOnlineRateData/getOnlineRateDataCensus',
+    showPage: false,
+    method: 'POST',
+    column: [],
+    beforeSearchFun: () => {
+        tableStore.table.params = tableStoreParams.value
+    },
+    loadCallback: () => {
+        // tableStore.table.data.type
+        let code = tableStore.table.params.statisticalType.code
+        let title = '',
+            titleX = ''
+        if (code == 'Power_Network') {
+            title = '区域'
+            titleX = '区域'
+        } else if (code == 'Manufacturer') {
+            title = '终端厂家'
+            titleX = '终端\n厂家'
+        } else if (code == 'Voltage_Level') {
+            title = '电压等级'
+            titleX = '电压\n等级'
+        } else if (code == 'Load_Type') {
+            title = '干扰源类型'
+            titleX = '干扰\n源类型'
+        } else if (code == 'Report_Type') {
+            title = '上报类型'
+            titleX = '上报\n类型'
+        }
+        options.value = {
+            title: {
+                text: title
+            },
+            toolbox: {
+                show: true,
+                feature: {
+                    saveAsImage: {
+                        // bottom: '10px',
+                        show: true,
+                        title: '保存'
+                        // yAxisIndex: 'none'
+                    }
+                },
+                right: 0,
+                top: -5
+            },
+            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', // 等价于 y: '16%'
+                left: '10px',
+                right: '10px',
+                bottom: '50px'
+            },
+            xAxis: {
+                name: titleX,
+                data: tableStore.table.data.type
+            },
+            yAxis: {
+                name: '%',
+                max: 100
+            },
+            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'
+                                    }
+                                }
+                            }
+                        ]
+                    }
+                }
+            ]
+        }
+
+        loading.value = false
+    }
+})
+// 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'
+// tableStore.table.params.deptIndex = '5699e5916a18a6381e1ac92da5bd2628'
+
+provide('tableStore', tableStore)
+
+onMounted(() => {})
+defineExpose({ getTableStoreParams })
+</script>
+<style scoped lang="scss"></style>
diff --git a/src/views/pqs/harmonicMonitoring/area/onlinerate/components/onlineCharts.vue b/src/views/pqs/harmonicMonitoring/area/onlinerate/components/onlineCharts.vue
deleted file mode 100644
index 1bb34330..00000000
--- a/src/views/pqs/harmonicMonitoring/area/onlinerate/components/onlineCharts.vue
+++ /dev/null
@@ -1,305 +0,0 @@
-<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
-        v-loading="loading"
-        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 tableStoreParams: any = ref({})
-const loading = ref(false)
-const getTableStoreParams = async (val: any) => {
-    tableStoreParams.value = val
-    loading.value = true
-    setTimeout(() => {
-        loading.value = false
-        tableStore.index()
-    }, 2000)
-}
-const tableStore = new TableStore({
-    url: '/device-boot/terminalOnlineRateData/getOnlineRateDataCensus',
-    showPage: false,
-    method: 'POST',
-    column: [],
-    beforeSearchFun: () => {
-        tableStore.table.params = tableStoreParams.value
-    },
-    loadCallback: () => {
-        // tableStore.table.data.type
-        let code = tableStore.table.params.statisticalType.code
-        let title = '',
-            titleX = ''
-        if (code == 'Power_Network') {
-            title = '区域'
-            titleX = '区域'
-        } else if (code == 'Manufacturer') {
-            title = '终端厂家'
-            titleX = '终端\n厂家'
-        } else if (code == 'Voltage_Level') {
-            title = '电压等级'
-            titleX = '电压\n等级'
-        } else if (code == 'Load_Type') {
-            title = '干扰源类型'
-            titleX = '干扰\n源类型'
-        } else if (code == 'Report_Type') {
-            title = '上报类型'
-            titleX = '上报\n类型'
-        }
-        options.value = {
-            title: {
-                text: title
-            },
-            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: titleX,
-                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'
-// tableStore.table.params.deptIndex = '5699e5916a18a6381e1ac92da5bd2628'
-
-provide('tableStore', tableStore)
-
-onMounted(() => {})
-defineExpose({ getTableStoreParams })
-</script>
-<style scoped lang="scss"></style>
diff --git a/src/views/pqs/harmonicMonitoring/area/onlinerate/components/onlineratetable.vue b/src/views/pqs/harmonicMonitoring/area/onlinerate/components/onlineratetable.vue
deleted file mode 100644
index 53dc50d6..00000000
--- a/src/views/pqs/harmonicMonitoring/area/onlinerate/components/onlineratetable.vue
+++ /dev/null
@@ -1,377 +0,0 @@
-<template>
-    <div>
-        <!-- 过滤筛选: <el-input v-model="search" clearable size="small" style="width: 250px" placeholder="筛选数据"/>
-     <el-button @click="exportExcel" style="float:right;margin-bottom:10px" size="small" type="primary">导出Excel文件</el-button>
-    <el-button @click="exporeCSV(tables)" size="small" type="primary" style="float:right;margin-right:10px;margin-bottom:10px">导出CSV文件</el-button> -->
-        <el-select
-            v-show="false"
-            v-model="ExpandedNum"
-            @change="handleExpandNumChange"
-            placeholder="选择展开级别"
-            size="mini"
-            style="width: 100px; left: 0px"
-        >
-            <el-option label="不展开" :value="0"></el-option>
-            <el-option label="展开1" :value="1"></el-option>
-            <el-option label="展开2" :value="2"></el-option>
-            <el-option label="展开3" :value="3"></el-option>
-        </el-select>
-        <u-table
-            stripe
-            class="xshou"
-            ref="plTreeTable"
-            header-cell-class-name="table_header"
-            fixed-columns-roll
-            :data="tableData"
-            :row-height="rowHeight"
-            :height="vth"
-            :treeConfig="{
-                children: 'children',
-                iconClose: 'el-icon-arrow-right',
-                iconOpen: 'el-icon-arrow-down',
-                expandAll: true
-            }"
-            @toggle-tree-expand="toggleTreeExpand"
-            use-virtual
-            row-id="id"
-            border
-        >
-            <u-table-column
-                min-width="200"
-                prop="name"
-                :label="typedata"
-                :treeNode="true"
-                :showOverflowTooltip="true"
-                :show-overflow-tooltip="true"
-            ></u-table-column>
-            <!-- <u-table-column min-width='150' align="center" prop="voltageLevel" v-if="dydj" label="电压等级" sortable >
-                                   <template slot-scope="scope">
-                                      <span v-if="(scope.row.voltageLevel==null)" type="primary" size="small">/</span>
-                                      <span v-if="(scope.row.voltageLevel!=null)" type="primary" size="small">{{scope.row.voltageLevel}}</span>
-                                    </template>
-                                </u-table-column> -->
-            <u-table-column min-width="120" align="center" prop="ip" label="网络参数">
-                <template slot-scope="scope">
-                    <span v-if="scope.row.ip == null" type="primary" size="small">/</span>
-                    <span v-if="scope.row.ip != null" type="primary" size="small">{{ scope.row.ip }}</span>
-                </template>
-            </u-table-column>
-            <u-table-column
-                min-width="80"
-                align="center"
-                prop="dataName"
-                :show-overflow-tooltip="true"
-                label="终端名称"
-            >
-                <template slot-scope="scope">
-                    <span v-if="scope.row.dataName == null" type="primary" size="small">/</span>
-                    <span v-if="scope.row.dataName != null" type="primary" size="small">{{ scope.row.dataName }}</span>
-                </template>
-            </u-table-column>
-            <u-table-column min-width="80" align="center" prop="manufacturer" label="厂家">
-                <template slot-scope="scope">
-                    <span v-if="scope.row.manufacturer == null" type="primary" size="small">/</span>
-                    <span v-if="scope.row.manufacturer != null" type="primary" size="small">
-                        {{ scope.row.manufacturer }}
-                    </span>
-                </template>
-            </u-table-column>
-            <!-- <u-table-column min-width='150' align="center" prop="deviceName" label="终端名称" sortable >
-                                    <template slot-scope="scope">
-                                      <span v-if="(scope.row.deviceName==null)" type="primary" size="small">/</span>
-                                      <span v-if="(scope.row.deviceName!=null)" type="primary" size="small">{{scope.row.deviceName}}</span>
-                                     
-                                    </template>
-                                </u-table-column> -->
-            <u-table-column min-width="80" align="center" prop="state" label="通讯状态" sortable>
-                <template slot-scope="scope">
-                    <span type="primary" v-if="scope.row.comFlag == null" size="small">/</span>
-                    <el-tag
-                        type="primary"
-                        v-if="scope.row.comFlag == 0"
-                        style="background: #cc0000; color: #fff"
-                        size="small"
-                    >
-                        中断
-                    </el-tag>
-                    <el-tag
-                        type="primary"
-                        v-if="scope.row.comFlag == 1"
-                        style="background: #339966; color: #fff"
-                        size="small"
-                    >
-                        正常
-                    </el-tag>
-                </template>
-            </u-table-column>
-            <u-table-column
-                min-width="120"
-                align="center"
-                prop="updateTime"
-                label="最新数据时间"
-                :show-overflow-tooltip="true"
-                sortable
-            >
-                <template slot-scope="scope">
-                    <span v-if="scope.row.updateTime == null" type="primary" size="small">/</span>
-                    <span v-if="scope.row.updateTime != null" type="primary" size="small">
-                        {{ scope.row.updateTime }}
-                    </span>
-                </template>
-            </u-table-column>
-            <u-table-column min-width="80" align="center" prop="onlineRate" label="在线率(%)" sortable>
-                <template slot-scope="scope">
-                    <span v-if="scope.row.onlineRate == 3.14159" type="primary" size="small">暂无数据</span>
-                    <span v-if="scope.row.onlineRate != 3.14159" type="primary" size="small">
-                        {{ scope.row.onlineRate.toFixed(2) }}
-                    </span>
-                </template>
-            </u-table-column>
-            <u-table-column min-width="80" align="center" prop="valueOver" label="评估" sortable>
-                <template slot-scope="scope">
-                    <el-tag
-                        v-if="scope.row.onlineRate == 3.14159"
-                        type="primary"
-                        size="small"
-                        style="background: #cccccc; color: #fff"
-                    >
-                        暂无评估
-                    </el-tag>
-                    <el-tag
-                        v-if="scope.row.onlineRate >= 90 && scope.row.onlineRate != 3.14159"
-                        type="primary"
-                        size="small"
-                        style="background: #339966; color: #fff"
-                    >
-                        优秀
-                    </el-tag>
-                    <el-tag
-                        v-if="
-                            60 <= scope.row.onlineRate && scope.row.onlineRate < 90 && scope.row.onlineRate != 3.14159
-                        "
-                        type="primary"
-                        size="small"
-                        style="background: #ffcc33; color: #fff"
-                    >
-                        合格
-                    </el-tag>
-                    <el-tag
-                        v-if="scope.row.onlineRate < 60 && scope.row.onlineRate != 3.14159"
-                        type="primary"
-                        size="small"
-                        style="background: #cc0000; color: #fff"
-                    >
-                        不合格
-                    </el-tag>
-                </template>
-            </u-table-column>
-        </u-table>
-        <!-- <pagination :pageData="pageData" @changePageNum="changePageNum" @changePageSize="changePageSize"></pagination> -->
-    </div>
-</template>
-<script>
-// import {getheight} from '../../assets/commjs/common'
-// import pagination from '../components/pagination/index'
-import FileSaver from 'file-saver'
-import XLSX from 'xlsx'
-import json2csv from 'json2csv'
-export default {
-    computed: {
-        // 实时监听表格
-        // tables: function() {
-        //     const search = this.search
-        //     if (search) {
-        //         return this.tableData.filter(dataNews => {
-        //             return Object.keys(dataNews).some(key => {
-        //                 return String(dataNews[key]).toLowerCase().indexOf(search) > -1
-        //             })
-        //         })
-        //     }
-        //     return this.tableData
-        // }
-    },
-    data() {
-        return {
-            vth: null,
-            rowKey: 0,
-            ExpandedNum: 3,
-            rowHeight: 20,
-            expandID: [],
-            search: '',
-            typedata: '电网拓扑',
-            dydj: false,
-            tableheight: undefined,
-            pageData: {
-                pageNum: 3,
-                pageSize: 15,
-                total: 100
-            }
-        }
-    },
-    props: {
-        classvalue: {
-            type: String,
-            default: undefined
-        },
-        tableData: {
-            type: Array,
-            default: []
-        },
-        loading: {
-            type: Boolean,
-            default: false
-        }
-    },
-    watch: {
-        classvalue: function (a, b) {
-            if (a == 'Power_Network') {
-                this.typedata = '电网拓扑'
-            } else if (a == 'Manufacturer') {
-                this.typedata = '终端厂家'
-            } else if (a == 'Voltage_Level') {
-                this.typedata = '电压等级'
-            } else if (a == 'Load_Type') {
-                this.typedata = '干扰源类型'
-            }
-        },
-        tableData: function (a, b) {
-            if (a.length > 0) {
-                this.tableData = a
-                //this.expandID=[]
-                this.handleExpandNumChange()
-            }
-        }
-    },
-
-    components: {
-        // pagination
-    },
-    created() {},
-    mounted() {
-        this.setHeight()
-        window.addEventListener('resize', this.setHeight)
-        this.handleExpandNumChange()
-    },
-    beforeDestroy() {
-        window.removeEventListener('resize', this.setHeight)
-    },
-    methods: {
-        setHeight() {
-            this.vth = window.sessionStorage.getItem('appheight') - 115 + 'px'
-        },
-        //判断需要展开层级
-        handleExpandNumChange() {
-            if (this.ExpandedNum > 0) {
-                this.setExpandKeys(this.tableData)
-            }
-        },
-        //层级展开递归方法
-        setExpandKeys(dataList, n) {
-            if (!n) n = 1
-            for (let i = 0; i < dataList.length; i++) {
-                if (n <= this.ExpandedNum) {
-                    //this.expandID=[]
-                    this.expandID.push(`${dataList[i].id}`)
-                    if (dataList[i].hasOwnProperty('children')) {
-                        const children = dataList[i].children
-                        this.setExpandKeys(children, n + 1)
-                    }
-                }
-            }
-        },
-        toggleTreeExpand() {},
-        // 判断是否IE浏览器
-        MyBrowserIsIE() {
-            let isIE = false
-            if (navigator.userAgent.indexOf('compatible') > -1 && navigator.userAgent.indexOf('MSIE') > -1) {
-                // ie浏览器
-                isIE = true
-            }
-            if (navigator.userAgent.indexOf('Trident') > -1) {
-                // edge 浏览器
-                isIE = true
-            }
-            return isIE
-        },
-        //创建a标签下载
-        createDownLoadClick(content, fileName) {
-            const link = document.createElement('a')
-            link.href = encodeURI(content)
-            link.download = fileName
-            document.body.appendChild(link)
-            link.click()
-            document.body.removeChild(link)
-        },
-        exporeCSV(rows) {
-            try {
-                const result = json2csv.parse(rows, {
-                    // fields: fields,
-                    excelStrings: true
-                })
-                if (this.MyBrowserIsIE()) {
-                    // IE10以及Edge浏览器
-                    var BOM = '\uFEFF'
-                    // 文件转Blob格式
-                    var csvData = new Blob([BOM + result], { type: 'text/csv' })
-                    navigator.msSaveBlob(csvData, `导出数据.csv`)
-                } else {
-                    let csvContent = 'data:text/csv;charset=utf-8,\uFEFF' + result
-                    // 非ie 浏览器
-                    this.createDownLoadClick(csvContent, `导出数据.csv`)
-                }
-            } catch (err) {
-                alert(err)
-            }
-        },
-        exportExcel() {
-            /* generate workbook object from table */
-            let wb = XLSX.utils.table_to_book(document.querySelector('#rebateSetTable'))
-            /* get binary string as output */
-            let wbout = XLSX.write(wb, {
-                bookType: 'xlsx',
-                bookSST: true,
-                type: 'array'
-            })
-            try {
-                FileSaver.saveAs(new Blob([wbout], { type: 'application/octet-stream' }), '数据表.xlsx')
-            } catch (e) {
-                if (typeof console !== 'undefined') {
-                } //console.log(e, wbout);
-            }
-            return wbout
-        },
-        changePageNum(data) {
-            this.pageData.pageNum = data
-            alert('父组件当前页' + this.pageData.pageNum)
-        },
-        changePageSize(data) {
-            this.pageData.pageSize = data
-            alert('父组件当前条数' + this.pageData.pageSize)
-        }
-    }
-}
-</script>
-<style lang="scss" scoped>
-.xshou {
-    cursor: pointer;
-}
-// ::v-deep .u-table__body-wrapper {
-//     height: calc(100% - 30px) !important;
-//     //overflow-x: scroll !important;
-// }
-// ::v-deep.plTableBox
-//   .el-table--striped
-//   .el-table__body
-//   tr.el-table__row--striped
-//   td {
-//   background-color: $whirt !important;
-// }
-// ::v-deep.plTableBox
-//   .el-table--striped
-//   .el-table__body
-//   tr.el-table__row--striped.current-row
-//   td {
-//   background-color: $current-blue !important;
-//   color: #fff !important;
-// }
-</style>
diff --git a/src/views/pqs/harmonicMonitoring/area/onlinerate/index.vue b/src/views/pqs/harmonicMonitoring/area/onlinerate/index.vue
index f67fca6a..272f08fb 100644
--- a/src/views/pqs/harmonicMonitoring/area/onlinerate/index.vue
+++ b/src/views/pqs/harmonicMonitoring/area/onlinerate/index.vue
@@ -116,7 +116,7 @@
                     />
                 </el-tab-pane>
                 <el-tab-pane :name="1" label="终端在线率图表">
-                    <onlineCharts ref="onlineChartsRef" />
+                    <charts ref="chartsRef" />
                 </el-tab-pane>
             </el-tabs>
         </div>
@@ -130,9 +130,9 @@ import { getAreaDept } from '@/api/harmonic-boot/area'
 import TableHeader from '@/components/table/header/index.vue'
 import TableStore from '@/utils/tableStore'
 import Table from '@/components/table/index.vue'
-import onlineCharts from './components/onlineCharts.vue'
+import charts from './components/charts.vue'
 const tableRef = ref()
-const onlineChartsRef = ref()
+const chartsRef = ref()
 const dictData = useDictData()
 //字典获取电压等级
 const voltageleveloption = dictData.getBasicData('Dev_Voltage_Stand')
@@ -141,7 +141,7 @@ const terminaloption = dictData.getBasicData('Dev_Manufacturers')
 //字典获取干扰源类型
 const interfereoption = dictData.getBasicData('Interference_Source')
 //字典获取统计类型
-const classificationData = dictData.getBasicData('Statistical_Type')
+const classificationData = dictData.getBasicData('Statistical_Type', ['Report_Type'])
 //调用区域接口获取区域
 const treeData = ref([])
 const idArr = ref([])
@@ -174,10 +174,10 @@ const defaultProps = ref({
     emitPath: false,
     expandTrigger: 'click' as const
 })
-const handleClick = (tab: any, e: any) => {
-    // console.log(tab,e,"??????????");
+const handleClick =  (tab: any, e: any) => {
     // if(activeName.value===1){
     tableStore.index()
+    chartsRef.value.getTableStoreParams(tableStore.table.params)
     // }
 }
 
@@ -271,45 +271,6 @@ const tableStore = new TableStore({
                 3: '不合格'
             }
         }
-        // {
-        //     title: '操作',
-        //     align: 'center',
-        //     width: '180',
-        //     render: 'buttons',
-        //     buttons: [
-        //         {
-        //             name: 'edit',
-        //             text: '新增',
-        //             type: 'primary',
-        //             icon: 'el-icon-Plus',
-        //             render: 'basicButton'
-        //         },
-        //         {
-        //             name: 'edit',
-        //             text: '编辑',
-        //             type: 'primary',
-        //             icon: 'el-icon-EditPen',
-        //             render: 'basicButton'
-        //         },
-        //         {
-        //             name: 'del',
-        //             text: '删除',
-        //             type: 'danger',
-        //             icon: 'el-icon-Delete',
-        //             render: 'basicButton'
-        //         },
-        //         {
-        //             name: 'edit',
-        //             text: '绑定监测点',
-        //             type: 'primary',
-        //             icon: 'el-icon-Plus',
-        //             render: 'basicButton',
-        //             disabled: (row: any) => {
-        //                 return row.children.length > 0
-        //             }
-        //         }
-        //     ]
-        // }
     ],
     beforeSearchFun: () => {
         tableStore.table.params.deptIndex = formData.value.deptIndex
@@ -323,7 +284,6 @@ const tableStore = new TableStore({
         delete tableStore.table.params.endTime
         delete tableStore.table.params.pageNum
         delete tableStore.table.params.pageSize
-        onlineChartsRef.value.getTableStoreParams(tableStore.table.params)
         // tableStore.table.params.searchBeginTime =  tableHeaderRef.value.datePickerRef.timeValue[0]
         // tableStore.table.params.searchEndTime =  tableHeaderRef.value.datePickerRef.timeValue[1]
     },