diff --git a/src/api/harmonic-boot/area.ts b/src/api/harmonic-boot/area.ts
new file mode 100644
index 00000000..65aa3148
--- /dev/null
+++ b/src/api/harmonic-boot/area.ts
@@ -0,0 +1,49 @@
+import request from '@/utils/request'
+
+export function getTypeIdData(data: any) {
+    return request({
+        url: '/system-boot/dictData/getTypeIdData',
+        method: 'post',
+        data: data
+    })
+}
+export function getOnlineRateData2(data:any) {
+    return request({
+        url: '/harmonic-boot/onlineRateData/getOnlineRateData',
+        method: 'post',
+        data: data
+    })
+}
+export function getAreaDept() {
+    return request({
+        url: '/user-boot/dept/loginDeptTree',
+        method: 'post'
+    })
+}
+export function getOnlineRateDataCensus(data:any) {
+    return request({
+        url: '/device-boot/terminalOnlineRateData/getOnlineRateDataCensus',
+        method: 'post',
+        data: data
+    })
+}
+export function IntegrityIcon(data:any) {
+    return request({
+        url: '/harmonic-boot/integrity/getIntegrityIcon',
+        method: 'post',
+        data: data
+    })
+}
+export function getDeptIdAreaTree() {
+    return request({
+        url: '/system-boot/area/getDeptIdAreaTree',
+        method: 'post'
+    })
+}
+export function getOnlineRateData(data:any) {
+    return request({
+        url: '/device-boot/terminalOnlineRateData/getOnlineRateData',
+        method: 'post',
+        data: data
+    })
+}
diff --git a/src/components/UploadFile/src/UploadFile.vue b/src/components/UploadFile/src/UploadFile.vue
index eb228d90..d08dca1c 100644
--- a/src/components/UploadFile/src/UploadFile.vue
+++ b/src/components/UploadFile/src/UploadFile.vue
@@ -61,7 +61,7 @@ import type { UploadInstance, UploadProps, UploadRawFile, UploadUserFile } from
 import { isString } from '@/utils/is'
 import { useUpload } from '@/components/UploadFile/src/useUpload'
 import { UploadFile } from 'element-plus/es/components/upload/src/upload'
-
+import { useMessage } from '@/hooks/web/useMessage'
 defineOptions({ name: 'UploadFile' })
 
 const message = useMessage() // 消息弹窗
diff --git a/src/components/UploadFile/src/UploadImgs.vue b/src/components/UploadFile/src/UploadImgs.vue
index 87d3c2c5..4ccc3411 100644
--- a/src/components/UploadFile/src/UploadImgs.vue
+++ b/src/components/UploadFile/src/UploadImgs.vue
@@ -53,7 +53,7 @@ import { ElNotification } from 'element-plus'
 import { propTypes } from '@/utils/propTypes'
 import { useUpload } from '@/components/UploadFile/src/useUpload'
 import { Plus, Edit, ZoomIn, Delete } from '@element-plus/icons-vue'
-
+import { useMessage } from '@/hooks/web/useMessage'
 defineOptions({ name: 'UploadImgs' })
 
 const message = useMessage() // 消息弹窗
diff --git a/src/views/pqs/harmonicMonitoring/area/harmonicdistortionrate.vue b/src/views/pqs/harmonicMonitoring/area/harmonicdistortionrate.vue
new file mode 100644
index 00000000..963832af
--- /dev/null
+++ b/src/views/pqs/harmonicMonitoring/area/harmonicdistortionrate.vue
@@ -0,0 +1,672 @@
+<template>
+    <div class="pd10" v-loading="loading" element-loading-text="数据加载中">
+        <!-- <transition appear>       
+            <div v-show="animation" class="dhys">
+              <timepicker style="margin-left:-1.8%"
+            :id="id"
+            @querfromdata="querfromdata"
+            :interval="interval"
+            :treenode="treenode"
+            :tablename="tablename"
+            :name="name"
+            :path="path"
+            :dataTree="dataTree"
+          ></timepicker>
+            </div>
+          </transition> -->
+
+        <el-form :inline="true" :model="formInline" class="demo-form-inline">
+            <!-- <div style="display: flex;"> -->
+            <el-form-item v-if="this.quyunames != undefined">
+                <el-switch
+                    class="tableScopeSwitch"
+                    :active-value="2"
+                    :inactive-value="1"
+                    @change="handleStatusChange"
+                    :active-text="quyuname"
+                    :inactive-text="quyunames"
+                    inactive-color="#007878"
+                    active-color="#666666"
+                    v-model="this.formData.monitorFlag"
+                ></el-switch>
+            </el-form-item>
+            <!-- <div style="display: flex;justify-content: space-between;flex-grow:1;"> -->
+            <el-form-item>
+                <timepicker
+                    :id="id"
+                    ref="timejb"
+                    :interval="interval"
+                    :treenode="treenode"
+                    :tablename="tablename"
+                    :name="name"
+                    :path="path"
+                    :dataTree="dataTree"
+                ></timepicker>
+                <!-- <el-button class="el-icon-d-arrow-right"  type="primary" round @click="timechange">时间选择</el-button> -->
+            </el-form-item>
+            <el-form-item>
+                <el-button @click="querfromdata" type="primary" icon="el-icon-search">查询</el-button>
+            </el-form-item>
+            <el-form-item>
+                <el-button type="text" @click="closeHandle">
+                    条件筛选
+                    <i :class="!view ? 'el-icon-arrow-down' : 'el-icon-arrow-right'"></i>
+                </el-button>
+            </el-form-item>
+            <!-- </div> -->
+            <!-- </div> -->
+        </el-form>
+
+        <div class="container" id="container">
+            <i @click="closeHandle" class="el-icon-circle-close coles"></i>
+            <el-form :inline="true" :model="formData" label-width="90px" class="">
+                <el-form-item label="统计类型:">
+                    <el-select
+                        v-model="formData.statisticalType"
+                        @change="changeclasss"
+                        placeholder="请选择统计类型"
+                        style="width: 100%"
+                    >
+                        <el-option
+                            v-for="item in classificationData"
+                            :key="item.id"
+                            :label="item.name"
+                            :value="{
+                                label: item.name,
+                                value: item.id,
+                                name: item.name,
+                                id: item.id,
+                                code: item.code,
+                                sort: item.sort
+                            }"
+                        ></el-option>
+                    </el-select>
+                </el-form-item>
+                <el-form-item label="区域选择:">
+                    <el-select ref="select1" v-model="deptName" placeholder="请选择所属部门区域" style="width: 100%">
+                        <el-option :value="deptIndex" style="height: auto">
+                            <el-tree
+                                ref="tree"
+                                :data="treeData"
+                                node-key="id"
+                                accordion
+                                :default-expanded-keys="idArr"
+                                :props="defaultProps"
+                                @node-click="handleNodeClick"
+                            >
+                                <span class="span-ellipsis" slot-scope="{ node, data }">
+                                    <span :title="data.name">{{ data.name }}</span>
+                                </span>
+                            </el-tree>
+                        </el-option>
+                    </el-select>
+                </el-form-item>
+                <el-form-item label="电压等级:">
+                    <el-select
+                        v-model="formData.scale"
+                        multiple
+                        collapse-tags
+                        clearable
+                        placeholder="请选择电压等级"
+                        style="width: 100%"
+                    >
+                        <el-option
+                            v-for="item in voltageleveloption"
+                            :key="item.id"
+                            :label="item.name"
+                            :value="{
+                                label: item.name,
+                                value: item.id,
+                                code: item.code,
+                                name: item.name,
+                                id: item.id,
+                                sort: item.sort
+                            }"
+                        ></el-option>
+                    </el-select>
+                </el-form-item>
+                <el-form-item label="终端厂家:">
+                    <el-select
+                        v-model="formData.manufacturer"
+                        multiple
+                        collapse-tags
+                        clearable
+                        placeholder="请选择终端厂家"
+                        style="width: 100%"
+                    >
+                        <el-option
+                            v-for="item in terminaloption"
+                            :key="item.id"
+                            :label="item.name"
+                            :value="{
+                                label: item.name,
+                                value: item.id,
+                                code: item.code,
+                                name: item.name,
+                                id: item.id,
+                                sort: item.sort
+                            }"
+                        ></el-option>
+                    </el-select>
+                </el-form-item>
+                <el-form-item label="干扰源类型:">
+                    <el-select
+                        v-model="formData.loadType"
+                        multiple
+                        collapse-tags
+                        clearable
+                        placeholder="请选择干扰源类型"
+                        style="width: 100%"
+                    >
+                        <el-option
+                            v-for="item in interfereoption"
+                            :key="item.id"
+                            :label="item.name"
+                            :value="{
+                                label: item.name,
+                                value: item.id,
+                                code: item.code,
+                                name: item.name,
+                                id: item.id,
+                                sort: item.sort
+                            }"
+                        ></el-option>
+                    </el-select>
+                </el-form-item>
+            </el-form>
+        </div>
+
+        <el-row :gutter="20">
+            <el-col :span="24">
+                <el-tabs :style="'height:' + vh" type="border-card" v-model="activeName" @tab-click="handleClick">
+                    <el-tab-pane label="谐波畸变率统计表" name="tab1">
+                        <harmonicdistortiontable
+                            :classvalue="classt"
+                            :tableData="tableData"
+                            :loading="loading"
+                        ></harmonicdistortiontable>
+                    </el-tab-pane>
+                    <el-tab-pane label="谐波畸变率统计图" name="tab2">
+                        <!-- <span style="font-weight: bold;color:#333;position: absolute;right: 10px;"><span style="color:red">注意:</span>{{'畸变合格率<60%'}}&nbsp&nbsp&nbsp<span style="color:#00CC33">绿色</span>&nbsp&nbsp&nbsp{{'60%≤畸变合格率<90%'}}&nbsp&nbsp&nbsp<span style="color:#FFCC00">黄色</span>&nbsp&nbsp&nbsp{{ '畸变合格率≥90%' }}&nbsp&nbsp&nbsp<span style="color:red"> 红色</span></span> -->
+                        <harmonicdistortionechart
+                            v-show="eacjartflag && activeName == 'tab2'"
+                            :classvalue="classt"
+                            :timeValue="time"
+                            :timehuanbiValue="ping"
+                            :xdata="xdata"
+                            :ydata1="ydata1"
+                            :ydata2="ydata2"
+                            :ydata3="ydata3"
+                            :ydata4="ydata4"
+                            :ydata5="ydata5"
+                            :ydata6="ydata6"
+                            :ydata7="ydata7"
+                            :ydata8="ydata8"
+                            :mindata="mindata"
+                            ref="harm"
+                        ></harmonicdistortionechart>
+                    </el-tab-pane>
+                </el-tabs>
+            </el-col>
+        </el-row>
+    </div>
+</template>
+<script>
+import api1 from '@/api/pollution/pollution'
+import { dicData } from '../../../assets/commjs/dictypeData'
+import api from '../../../api/integraliy/integraliy'
+import timepicker from '../../components/TimePicker/index4'
+import harmonicdistortiontable from '../../components/harmonicdistortiontable'
+import harmonicdistortionechart from '../../components/echarts/harmonicdistortionechart'
+export default {
+    name: 'distortionratestatistics',
+    components: {
+        timepicker,
+        harmonicdistortiontable,
+        harmonicdistortionechart
+    },
+    watch: {
+        $route: {
+            handler: function (val, oldVal) {
+                if (val.params.mapid2 != undefined && val.params.mapName2 != undefined) {
+                    this.$nextTick(() => {
+                        this.RoutingChanges(val.params.mapid2, val.params.mapName2)
+                    })
+                }
+            },
+            // 深度观察监听
+            deep: true
+        }
+    },
+    computed: {},
+    data() {
+        return {
+            cu: '',
+            quyuname: undefined,
+            quyunames: undefined,
+            formInline: {},
+            animation: false,
+            asideheight: undefined,
+            view: false,
+            id: 1,
+            loading: true,
+            tablename: 'tab1',
+            eacjartflag: true,
+            interval: 3,
+            title: '电网拓扑',
+            xdata: [],
+            ydata1: [],
+            ydata2: [],
+            ydata3: [],
+            ydata4: [],
+            ydata5: [],
+            ydata6: [],
+            ydata7: [],
+            ydata8: [],
+            activeName: 'tab1',
+            treenode: '',
+            dataTree: '',
+            name: 'sjwzx',
+            path: '/harmonic-boot/harmonic/getIntegrityData',
+            formData: {
+                //后面需要修改
+                deptIndex: '',
+                monitorFlag: 2,
+                powerFlag: 2,
+                loadType: [],
+                manufacturer: [],
+                searchBeginTime: '',
+                searchEndTime: '',
+                serverName: '',
+                statisticalType: '',
+                scale: []
+            },
+            deptId: '',
+            deptName: '',
+            deptIndex: '',
+            treeData: [],
+            idArr: [],
+            defaultProps: {
+                children: 'children',
+                label: 'name'
+            },
+            //统计类型
+            classificationData: [],
+            //电压等级
+            voltageleveloption: [],
+            //终端厂家
+            terminaloption: [],
+            //干扰源类型
+            interfereoption: [],
+            classt: 'Power_Network',
+            tableData: [],
+            ping: '',
+            time: '',
+            vh: null,
+            mindata: null
+        }
+    },
+    created() {
+      this.setHeight()
+        window.addEventListener('resize', this.setHeight)
+        let data = window.sessionStorage.getItem('sysData')
+        let yudata = eval('(' + data + ')')
+        let str = yudata.dataReport.split('，')
+        this.quyuname = str[0]
+        this.quyunames = str[1]
+        var info = window.sessionStorage.getItem('Info')
+        info = eval('(' + info + ')')
+        this.formData.deptIndex = info.deptId
+        this.getAreaDept()
+        this.getclassificationData()
+        this.getVoltage()
+        this.getManufacturer()
+        this.getLoadType()
+    },
+    mounted() {
+   
+        if (this.$route.params.mapid2 != undefined && this.$route.params.mapName2 != undefined) {
+            setTimeout(() => {
+                this.RoutingChanges(this.$route.params.mapid2, this.$route.params.mapName2)
+            }, 500)
+        } else {
+            this.querfromdata()
+        }
+    },
+    beforeDestroy() {
+        window.removeEventListener('resize', this.setHeight)
+    },
+    methods: {
+        setHeight() {
+            this.vh = window.sessionStorage.getItem('appheight') - 55 + 'px'
+        },
+        RoutingChanges(id, name) {
+            this.deptName = name
+            this.$refs.select1.blur()
+            this.deptId = id
+            this.formData.deptIndex = id
+
+            this.querfromdata()
+        },
+        timechange() {
+            this.animation = true
+        },
+        closeHandle() {
+            if (this.view) {
+                this.view = false
+            } else {
+                this.view = true
+            }
+            const dom = document.getElementById('container')
+            const closeDom = document.getElementsByClassName('close')[0]
+            if (!dom.className.match(/(?:^|\s)expend(?!\S)/)) {
+                dom.className = 'container expend'
+            } else {
+                dom.className = 'container close-container'
+            }
+        },
+        //切换统计类型
+        changeclasss(val) {
+            this.cu = val.code
+        },
+        //开关触发
+        handleStatusChange(val) {
+            this.formData.monitorFlag = val
+            //this.fiveTreeData()
+        },
+        //时间格式转化
+        dateFormat(dateData1, dateData2) {
+            var timearr = []
+            var date = new Date(dateData1)
+            var y = date.getFullYear()
+            var m = date.getMonth() + 1
+            m = m < 10 ? '0' + m : m
+            var d = date.getDate()
+            d = d < 10 ? '0' + d : d
+            var h = date.getHours()
+            h = h < 10 ? '0' + h : h
+            var f = date.getMinutes()
+            f = f < 10 ? '0' + f : f
+            var s = date.getSeconds()
+            s = s < 10 ? '0' + s : s
+            this.formData.searchBeginTime = y + '-' + m + '-' + d
+            timearr.push(this.formData.startTime)
+            var date = new Date(dateData2)
+            var y = date.getFullYear()
+            var m = date.getMonth() + 1
+            m = m < 10 ? '0' + m : m
+            var d = date.getDate()
+            d = d < 10 ? '0' + d : d
+            var h = date.getHours()
+            h = h < 10 ? '0' + h : h
+            var f = date.getMinutes()
+            f = f < 10 ? '0' + f : f
+            var s = date.getSeconds()
+            s = s < 10 ? '0' + s : s
+            this.formData.searchEndTime = y + '-' + m + '-' + d
+            timearr.push(this.formData.endTime)
+            return timearr
+        },
+        //时间校验
+        formatDate(date) {
+            // date = new Date();
+            date = new Date(Date.parse(date.replace(/-/g, '/'))) //转换成Data();
+
+            var y = date.getFullYear()
+
+            var m = date.getMonth() + 1
+            m = m < 10 ? '0' + m : m
+            var d = date.getDate()
+            d = d < 10 ? '0' + d : d
+            return y + '-' + m + '-' + d
+        },
+        //2次组件触发事件
+        querfromdata() {
+            this.classt = this.cu
+            //this.closeHandle()
+            this.animation = false
+            this.interval = this.$refs.timejb.intervald
+            this.loading = true
+            this.timeValue = this.$refs.timejb.timeValue
+            // this.timeValue = data;
+
+            // this.timehuanbiValue = timehbValue;
+
+            // this.periodBeginTime = this.timehuanbiValue[0];
+            // this.periodEndTime = this.timehuanbiValue[1];
+
+            // this.ping = this.periodBeginTime + "至" + this.periodEndTime;
+            this.dateFormat(this.timeValue[0], this.timeValue[1])
+            this.time = this.formData.searchBeginTime + '至' + this.formData.searchEndTime
+            api.getTHDistortionData(this.formData).then(res => {
+                if (res.code == 'A0000') {
+                    if (res.code == 'A0000') {
+                        if (res.data.length == 0) {
+                            this.tableData = []
+                        } else {
+                            if (
+                                res.data[0].children[0].children[0].children[0].children !== [] &&
+                                res.data[0].children[0].children[0].children[0].children !== null
+                            ) {
+                                res.data.forEach(m => {
+                                    m.id = this.guid()
+                                    m.children.forEach(n => {
+                                        n.id = this.guid()
+                                        n.children.forEach(d => {
+                                            d.id = this.guid()
+                                            d.children.forEach(p => {
+                                                p.id = this.guid()
+                                                p.children.forEach(h => {
+                                                    h.id = this.guid()
+                                                })
+                                            })
+                                        })
+                                    })
+                                })
+                            } else {
+                                res.data.forEach(m => {
+                                    m.id = this.guid()
+                                    m.children.forEach(n => {
+                                        n.id = this.guid()
+                                        n.children.forEach(d => {
+                                            d.id = this.guid()
+                                            d.children.forEach(p => {
+                                                p.id = this.guid()
+                                            })
+                                        })
+                                    })
+                                })
+                            }
+                            this.tableData = res.data
+                        }
+                        this.gettubiao()
+                    }
+                }
+            })
+        },
+        gettubiao() {
+            api.getTHDistortionCensus(this.formData).then(res => {
+                this.eacjartflag = true
+                if (res.code == 'A0000') {
+                    if (res.data.type.length == 0 && res.data.single.length == 0) {
+                        this.xdata = res.data.type
+                        this.ydata1 = res.data.single
+                    } else {
+                        this.xdata = res.data.type
+                        var arr = []
+                        if (res.data.single) {
+                            for (var j = 0; j < res.data.single.length - 1; j++) {
+                                for (var i = 0; i < res.data.single.length - 1 - j; i++) {
+                                    // 判断，如果数组中的当前一个比后一个大，那么两个交换一下位置
+                                    if (arr[i] > arr[i + 1]) {
+                                        var tmp = arr[i]
+                                        res.data.single[i] = arr[i + 1]
+                                        res.data.single[i + 1] = tmp
+                                    }
+                                }
+                            }
+                            arr = res.data.single
+                            for (var i = 0; i < arr.length; i++) {
+                                if (arr[i] == 0 || arr[i] == 3.14159) {
+                                    arr[i] = arr[arr.length - 1] * 0.03
+                                    this.mindata = arr[arr.length - 1] * 0.03
+                                }
+                            }
+                            this.ydata1 = arr
+                        }
+
+                        this.$nextTick(() => {
+                            this.$refs.harm.qualifiedechart()
+                            setTimeout(() => {
+                                this.loading = false
+                            }, 1000)
+                        })
+                    }
+                }
+            })
+        },
+        guid() {
+            return 'xxxxxxxxxxxx4xxxyxxxxxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
+                let r = (Math.random() * 16) | 0,
+                    v = c === 'x' ? r : (r & 0x3) | 0x8
+                return v.toString(16)
+            })
+        },
+        //标签切换
+        handleClick(tab, event) {
+            this.tablename = tab.name
+            this.activeName = tab.name
+            if (tab.name == 'tab1') {
+                this.eacjartflag = false
+
+                this.$nextTick(() => {
+                    this.$refs.harm.qualifiedechart()
+                })
+            } else if (tab.name == 'tab2') {
+                this.eacjartflag = true
+                this.$nextTick(() => {
+                    this.$refs.harm.qualifiedechart()
+                })
+            }
+        },
+
+        //部门绑定区域触发区域树节点
+        handleNodeClick(data, node) {
+            this.deptName = data.name
+            this.$refs.select1.blur()
+            this.deptId = data.id
+            this.formData.deptIndex = data.id
+        },
+        //查询触发方法
+        queryDataInfo() {
+            api.getLineLedger(this.formData).then(res => {
+                if (res.code == 'A0000') {
+                    this.tableData = res.data
+                }
+            })
+        },
+        //获取区域
+        getAreaDept() {
+            api.getAreaDept().then(res => {
+                if (res.code == 'A0000') {
+                    var data = res.data
+                    this.deptName = res.data[0].name
+                    data.forEach(element => {
+                        this.idArr.push(element.id)
+                    })
+                    this.treeData = data
+                }
+            })
+        },
+        //字典获取数据电压等级
+        getVoltage() {
+            var code = 'Dev_Voltage_Stand'
+            this.voltageleveloption = dicData(code, [])
+            this.formData.scale = this.voltageleveloption
+        },
+        //字典获取数据终端厂家
+        getManufacturer() {
+            var code = 'Dev_Manufacturers'
+            this.terminaloption = dicData(code, [])
+            this.formData.manufacturer = this.terminaloption
+        },
+        //字典获取数据干扰源类型
+        getLoadType() {
+            var code = 'Interference_Source'
+            this.interfereoption = dicData(code, [])
+            this.formData.loadType = this.interfereoption
+        },
+        //获取统计类型
+        getclassificationData() {
+            var code = 'Statistical_Type'
+            this.classificationData = dicData(code, ['Report_Type'])
+            this.formData.statisticalType = this.classificationData[0]
+        },
+        rest() {
+            this.deptName = '全国'
+            this.formData = {
+                deptIndex: '',
+                monitorFlag: 2,
+                loadType: [],
+                manufacturer: [],
+                searchBeginTime: '',
+                searchEndTime: '',
+                statisticalType: '',
+                scale: []
+            }
+        }
+    }
+}
+</script>
+<style lang="less" scoped>
+@import url('../../../styles/comStyle.less');
+.container {
+    /* margin: auto; */
+    top: 0px;
+    right: 0;
+    width: 40%;
+    height: 0px;
+    z-index: 2000;
+    position: absolute;
+    background-color: #e4e7ebb9;
+    overflow: auto;
+    scroll-behavior: smooth;
+    -radius: 20px;
+}
+/* 隐藏滚动条 */
+::-webkit-scrollbar {
+    display: block;
+}
+.expend {
+    animation: expend ease 5s forwards;
+}
+.close-container {
+    animation: no-expend ease 1s forwards;
+}
+@keyframes expend {
+    from {
+        top: 0px;
+        height: auto;
+    }
+    to {
+        height: auto;
+        top: 0px;
+    }
+}
+@keyframes no-expend {
+    from {
+        height: 10%;
+        top: 0px;
+    }
+    to {
+        top: 0px;
+        height: 0px;
+    }
+}
+.coles {
+    position: absolute;
+    right: 0;
+    font-size: 20px;
+    cursor: pointer;
+}
+</style>
diff --git a/src/views/pqs/harmonicMonitoring/area/integralitytable.vue b/src/views/pqs/harmonicMonitoring/area/integralitytable.vue
new file mode 100644
index 00000000..8887530d
--- /dev/null
+++ b/src/views/pqs/harmonicMonitoring/area/integralitytable.vue
@@ -0,0 +1,718 @@
+<template>
+  <div class="pd10" element-loading-text="数据加载中" v-loading="loading">
+    <!-- <transition appear>       
+        <div v-show="dd" class="dhys">
+          
+          </div>
+          </transition> -->
+    <div class="container" id="container">
+      <i @click="closeHandle" class="el-icon-circle-close coles"></i>
+      <el-form :inline="true" :model="formData" label-width="90px" class="">
+        <!-- <div style="display: flex;"> -->
+        <el-form-item v-if="this.quyunames != undefined">
+          <el-switch
+            class="tableScopeSwitch"
+            :active-value="2"
+            :inactive-value="1"
+            @change="handleStatusChange"
+            :active-text="quyuname"
+            :inactive-text="quyunames"
+            inactive-color="#007878"
+            active-color="#666666"
+            v-model="formData.monitorFlag"
+          >
+          </el-switch>
+        </el-form-item>
+        <el-form-item label="统计类型:">
+          <el-select
+            v-model="formData.statisticalType"
+            @change="changeclasss"
+            placeholder="请选择统计类型"
+            style="width: 100%"
+          >
+            <el-option
+              v-for="item in classificationData"
+              :key="item.id"
+              :label="item.name"
+              :value="{
+                label: item.name,
+                value: item.id,
+                name: item.name,
+                id: item.id,
+                code: item.code,
+                sort: item.sort,
+              }"
+            >
+            </el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="区域选择:">
+          <el-select
+            ref="select1"
+            v-model="deptName"
+            placeholder="请选择所属部门区域"
+            style="width: 100%"
+          >
+            <el-option :value="deptIndex" style="height: auto">
+              <el-tree
+                ref="tree"
+                :data="treeData"
+                node-key="id"
+                accordion
+                :default-expanded-keys="idArr"
+                :props="defaultProps"
+                @node-click="handleNodeClick"
+              >
+                <span class="span-ellipsis" slot-scope="{ node, data }">
+                  <span :title="data.name">{{ data.name }}</span>
+                </span>
+              </el-tree>
+            </el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="电压等级:">
+          <el-select
+            v-model="formData.scale"
+            multiple
+            collapse-tags
+            clearable
+            placeholder="请选择电压等级"
+            style="width: 100%"
+          >
+            <el-option
+              v-for="item in voltageleveloption"
+              :key="item.id"
+              :label="item.name"
+              :value="{
+                label: item.name,
+                value: item.id,
+                code: item.code,
+                name: item.name,
+                id: item.id,
+                sort: item.sort,
+              }"
+            >
+            </el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="终端厂家:">
+          <el-select
+            v-model="formData.manufacturer"
+            multiple
+            collapse-tags
+            clearable
+            placeholder="请选择终端厂家"
+            style="width: 100%"
+          >
+            <el-option
+              v-for="item in terminaloption"
+              :key="item.id"
+              :label="item.name"
+              :value="{
+                label: item.name,
+                value: item.id,
+                code: item.code,
+                name: item.name,
+                id: item.id,
+                sort: item.sort,
+              }"
+            >
+            </el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="干扰源类型:">
+          <el-select
+            v-model="formData.loadType"
+            multiple
+            collapse-tags
+            clearable
+            placeholder="请选择干扰源类型"
+            style="width: 100%"
+          >
+            <el-option
+              v-for="item in interfereoption"
+              :key="item.id"
+              :label="item.name"
+              :value="{
+                label: item.name,
+                value: item.id,
+                code: item.code,
+                name: item.name,
+                id: item.id,
+                sort: item.sort,
+              }"
+            >
+            </el-option>
+          </el-select>
+        </el-form-item>
+      </el-form>
+    </div>
+    <!-- <div style="display: flex;justify-content: space-between;flex-grow:1;"> -->
+    <el-row v-show="falg">
+      <el-form :inline="true" class="demo-form-inline">
+        <el-form-item>
+          <timepicker
+            ref="timepk"
+            :id="id"
+            :interval="interval"
+            :treenode="treenode"
+            :tablename="tablename"
+            :name="name"
+            :path="path"
+            :dataTree="dataTree"
+          ></timepicker>
+        </el-form-item>
+        <el-form-item>
+          <el-button @click="querfromdata" type="primary" icon="el-icon-search"
+            >查询</el-button
+          >
+        </el-form-item>
+        <el-form-item>
+          <el-button type="text" @click="closeHandle"
+            >条件筛选<i
+              :class="!view ? 'el-icon-arrow-down' : 'el-icon-arrow-right'"
+            ></i
+          ></el-button>
+        </el-form-item>
+      </el-form>
+    </el-row>
+    <!-- </div> -->
+    <!-- </div> -->
+
+    <el-row :gutter="20">
+      <el-col :span="24">
+        <el-tabs
+          :style="'height:' + vh"
+          type="border-card"
+          v-model="activeName"
+          @tab-click="handleClick"
+        >
+          <el-tab-pane :lazy="false" label="数据完整性列表" name="tab1">
+            <dataintegrity
+              :classvalue="classt"
+              :tableData="tableData"
+              :loading="loading"
+            ></dataintegrity>
+          </el-tab-pane>
+          <el-tab-pane :lazy="false" label="数据完整性图表" name="tab2">
+            <!-- <span style="font-weight: bold;position: absolute;right: 100px;top: 25px;"><span >注意:</span><span style="color:#CC0000">{{'数据完整性<60%'}}红色</span><span style="color:#FFCC33">&nbsp&nbsp&nbsp{{'60%≤数据完整性<90%'}}黄色</span><span style="color:#339966">&nbsp&nbsp&nbsp{{ '数据完整性≥90%' }}绿色</span></span> -->
+            <dataintegrityechart
+              v-show="eacjartflag && activeName == 'tab2'"
+              :classvalue="classt"
+              :timeValue="time"
+              :timehuanbiValue="ping"
+              :xdata="xdata"
+              :ydata="ydata"
+              :ydata1="ydata1"
+              ref="child"
+            ></dataintegrityechart>
+          </el-tab-pane>
+        </el-tabs>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+<script>
+import api1 from "@/api/pollution/pollution";
+import { dicData } from "@/assets/commjs/dictypeData";
+import api from "../../../api/integraliy/integraliy";
+import timepicker from "../../components/TimePicker/index4";
+import dataintegrity from "../../components/dataintegrity";
+import dataintegrityechart from "../../components/dataintegrityechart";
+export default {
+  name: "dataintegritydd",
+  components: {
+    timepicker,
+    dataintegrity,
+    dataintegrityechart,
+  },
+  watch: {
+    $route: {
+      handler: function (val, oldVal) {
+        if (
+          val.params.mapid1 != undefined &&
+          val.params.mapName1 != undefined
+        ) {
+          this.$nextTick(() => {
+            this.RoutingChanges(val.params.mapid1, val.params.mapName1);
+          });
+        }
+      },
+      // 深度观察监听
+      deep: true,
+    },
+  },
+  computed: {},
+  data() {
+    return {
+      cu: "",
+      view: false,
+      falg: true,
+      quyuname: undefined,
+      quyunames: undefined,
+      dd: false,
+      formInline: {},
+      loading: true,
+      classt: "Power_Network",
+      tablename: "tab1",
+      thb: false,
+      eacjartflag: true,
+      interval: 3,
+      treeData: [],
+      idArr: [],
+      defaultProps: {
+        children: "children",
+        label: "name",
+      },
+      deptName: "",
+      deptIndex: "",
+      name: "sjwzx",
+      path: "/harmonic-boot/harmonic/getIntegrityData",
+      asideheight: undefined,
+      id: 1,
+      title: "区域",
+      xdata: [],
+      ydata: [],
+      ydata1: [],
+      classvalue: 0,
+      activeName: "tab1",
+      treenode: "",
+      dataTree: "",
+      voltageleve1: "",
+      //电压等级
+      voltageleveloption: [],
+      terminal: "",
+      terminaloption: [],
+      interfere: "",
+      interfereoption: [],
+      classificationData: [],
+      dictypeData: undefined,
+      deptIndex: "",
+      formData: {
+        //后面需要修改
+        deptIndex: "",
+        monitorFlag: 2,
+        powerFlag: 2,
+        loadType: null,
+        manufacturer: null,
+        searchBeginTime: "",
+        searchEndTime: "",
+        statisticalType: "",
+        scale: null,
+      },
+      periodBeginTime: "",
+      periodEndTime: "",
+      timehuanbiValue: [],
+      tableData: [],
+      ping: "",
+      time: "",
+      quyuname: undefined,
+      vh: null,
+    };
+  },
+  created() {
+  
+    this.setHeight()
+        window.addEventListener('resize', this.setHeight)
+  
+    let data = window.sessionStorage.getItem("sysData");
+    let yudata = eval("(" + data + ")");
+    let str = yudata.dataReport.split("，");
+    this.quyuname = str[0];
+    this.quyunames = str[1];
+    var info = window.sessionStorage.getItem("Info");
+    info = eval("(" + info + ")");
+    this.formData.deptIndex = info.deptId;
+    this.getAreaDept();
+    this.getclassificationData();
+    this.getVoltage();
+    this.getManufacturer();
+    this.getLoadType();
+  },
+  mounted() {
+    if (
+      this.$route.params.mapid1 != undefined &&
+      this.$route.params.mapName1 != undefined
+    ) {
+      setTimeout(() => {
+        this.RoutingChanges(
+          this.$route.params.mapid1,
+          this.$route.params.mapName1
+        );
+      }, 500);
+    } else {
+      this.querfromdata();
+    }
+  },
+  beforeDestroy() {
+        window.removeEventListener('resize', this.setHeight)
+    },
+    methods: {
+        setHeight() {
+          this.vh = window.sessionStorage.getItem("appheight") - 55 + "px";
+          
+        },
+    RoutingChanges(id, name) {
+      this.deptName = name;
+      this.$refs.select1.blur();
+      this.deptId = id;
+      this.formData.deptIndex = id;
+
+      this.querfromdata();
+    },
+    timechange() {
+      this.dd = true;
+    },
+    closeHandle() {
+      if (this.view) {
+        this.view = false;
+      } else {
+        this.view = true;
+      }
+      //console.log('关闭和展开');
+      const dom = document.getElementById("container");
+      const closeDom = document.getElementsByClassName("close")[0];
+      if (!dom.className.match(/(?:^|\s)expend(?!\S)/)) {
+        dom.className = "container expend";
+      } else {
+        dom.className = "container close-container";
+      }
+    },
+    //切换统计类型
+    changeclasss(val) {
+      this.cu = val.code;
+    },
+    //时间格式转化
+    dateFormat(dateData1, dateData2) {
+      var timearr = [];
+      var date = new Date(dateData1);
+      var y = date.getFullYear();
+      var m = date.getMonth() + 1;
+      m = m < 10 ? "0" + m : m;
+      var d = date.getDate();
+      d = d < 10 ? "0" + d : d;
+      var h = date.getHours();
+      h = h < 10 ? "0" + h : h;
+      var f = date.getMinutes();
+      f = f < 10 ? "0" + f : f;
+      var s = date.getSeconds();
+      s = s < 10 ? "0" + s : s;
+      this.formData.searchBeginTime = y + "-" + m + "-" + d;
+      timearr.push(this.formData.startTime);
+      var date = new Date(dateData2);
+      var y = date.getFullYear();
+      var m = date.getMonth() + 1;
+      m = m < 10 ? "0" + m : m;
+      var d = date.getDate();
+      d = d < 10 ? "0" + d : d;
+      var h = date.getHours();
+      h = h < 10 ? "0" + h : h;
+      var f = date.getMinutes();
+      f = f < 10 ? "0" + f : f;
+      var s = date.getSeconds();
+      s = s < 10 ? "0" + s : s;
+      this.formData.searchEndTime = y + "-" + m + "-" + d;
+      timearr.push(this.formData.endTime);
+      return timearr;
+    },
+    //部门绑定区域触发区域树节点
+    handleNodeClick(data, node) {
+      this.deptName = data.name;
+      this.$refs.select1.blur();
+      this.deptId = data.id;
+      this.formData.deptIndex = data.id;
+    },
+    formatDate(date) {
+      date = new Date(Date.parse(date.replace(/-/g, "/"))); //转换成Data();
+
+      var y = date.getFullYear();
+
+      var m = date.getMonth() + 1;
+      m = m < 10 ? "0" + m : m;
+      var d = date.getDate();
+      d = d < 10 ? "0" + d : d;
+      return y + "-" + m + "-" + d;
+    },
+    //2次组件触发事件
+
+    querfromdata() {
+      this.classt = this.cu;
+      this.dd = false;
+      this.interval = this.$refs.timepk.intervald;
+      this.loading = true;
+      this.timeValue = this.$refs.timepk.timeValue;
+      //this.timehuanbiValue = timehbValue;
+      // this.periodBeginTime = this.timehuanbiValue[0];
+      // this.periodEndTime = this.timehuanbiValue[1];
+      // this.ping = this.periodBeginTime + "至" + this.periodEndTime;
+      this.dateFormat(this.timeValue[0], this.timeValue[1]);
+      this.time =
+        this.formData.searchBeginTime + "至" + this.formData.searchEndTime;
+      api.integrityData(this.formData).then((res) => {
+        if (res.code == "A0000") {
+          if (res.data.length == 0) {
+            this.tableData = [];
+          } else {
+            if (
+              res.data[0].children[0].children[0].children[0].children !== [] &&
+              res.data[0].children[0].children[0].children[0].children !== null
+            ) {
+              res.data.forEach((m) => {
+                m.id = this.guid();
+                m.children.forEach((n) => {
+                  n.id = this.guid();
+                  n.children.forEach((d) => {
+                    d.id = this.guid();
+                    d.children.forEach((p) => {
+                      p.id = this.guid();
+                      p.children.forEach((h) => {
+                        h.id = this.guid();
+                      });
+                    });
+                  });
+                });
+              });
+            } else {
+              res.data.forEach((m) => {
+                m.id = this.guid();
+                m.children.forEach((n) => {
+                  n.id = this.guid();
+                  n.children.forEach((d) => {
+                    d.id = this.guid();
+                    d.children.forEach((p) => {
+                      p.id = this.guid();
+                    });
+                  });
+                });
+              });
+            }
+            this.tableData = res.data;
+          }
+          this.gettubiao();
+        }
+      });
+    },
+    gettubiao() {
+      var data = {
+        deptIndex: this.formData.deptIndex,
+        loadType: this.formData.loadType,
+        monitorFlag: this.formData.monitorFlag,
+        manufacturer: this.formData.manufacturer,
+        searchBeginTime: this.formData.searchBeginTime,
+        searchEndTime: this.formData.searchEndTime,
+        statisticalType: this.formData.statisticalType,
+        scale: this.formData.scale,
+        powerFlag: 2,
+        periodBeginTime: this.periodBeginTime,
+        periodEndTime: this.periodEndTime,
+      };
+      this.ydata = [];
+      this.ydata1 = [];
+      api.IntegrityIcon(data).then((res) => {
+        this.eacjartflag = true;
+        //this.loading = true;
+        if (res.code == "A0000") {
+          let arr = [];
+          let arry = [];
+          res.data.forEach((item) => {
+            arr.push(item.type);
+            if (item.single == 0 || item.single == 3.14159) {
+              arry.push(1);
+            } else {
+              arry.push(item.single);
+            }
+            if (item.ratio !== null) {
+              this.ydata1.push(item.ratio);
+            }
+            this.xdata = arr;
+            this.ydata = arry;
+          });
+          //
+          this.$nextTick(() => {
+            this.$refs.child.dataintegrityecharts();
+            setTimeout(() => {
+              this.loading = false;
+            }, 0);
+          });
+        }
+      });
+    },
+    //标签切换
+    handleClick(tab, event) {
+      this.tablename = tab.name;
+      this.activeName = tab.name;
+      if (tab.name == "tab1") {
+        this.thb = false;
+        this.eacjartflag = false;
+        this.$nextTick(() => {
+          this.$refs.child.dataintegrityecharts();
+        });
+      } else if (tab.name == "tab2") {
+        this.thb = true;
+        this.eacjartflag = true;
+        this.$nextTick(() => {
+          this.$refs.child.dataintegrityecharts();
+        });
+      }
+    },
+    //开关触发
+    handleStatusChange(val) {
+      this.formData.monitorFlag = val;
+      //this.fiveTreeData()
+    },
+    //获取区域
+    getAreaDept() {
+      api.getAreaDept().then((res) => {
+        if (res.code == "A0000") {
+          var data = res.data;
+          this.deptName = res.data[0].name;
+          data.forEach((element) => {
+            this.idArr.push(element.id);
+          });
+          this.treeData = data;
+        }
+      });
+    },
+    //字典获取数据电压等级
+    getVoltage() {
+      // debugger
+      var code = "Dev_Voltage_Stand";
+      this.voltageleveloption = dicData(code, []);
+      this.formData.scale = this.voltageleveloption;
+    },
+    //字典获取数据终端厂家
+    getManufacturer() {
+      //debugger
+      var code = "Dev_Manufacturers";
+      this.terminaloption = dicData(code, []);
+      this.formData.manufacturer = this.terminaloption;
+    },
+    //字典获取数据干扰源类型
+    getLoadType() {
+      //debugger
+      var code = "Interference_Source";
+      this.interfereoption = dicData(code, []);
+      this.formData.loadType = this.interfereoption;
+    },
+    //获取统计类型
+    getclassificationData() {
+      //debugger
+      var code = "Statistical_Type";
+      this.classificationData = dicData(code, ["Report_Type"]);
+      this.formData.statisticalType = this.classificationData[0];
+    },
+
+    //获取数据完整性列表数据
+    getQueryData() {
+      var data = {
+        area: "0",
+        comparison: 0,
+        interference: [],
+        manufacturer: [],
+        searchBeginTime: "",
+        searchEndTime: "",
+        statisticalType: 0,
+        voltageLevel: [],
+      };
+    },
+    guid() {
+      return "xxxxxxxxxxxx4xxxyxxxxxxxxxxxxxxx".replace(/[xy]/g, function (c) {
+        var r = (Math.random() * 16) | 0,
+          v = c === "x" ? r : (r & 0x3) | 0x8;
+        return v.toString(16);
+      });
+    },
+    //导出文件
+    exportExcel() {
+      api.getExportIntegrityData(this.formData).then((res) => {
+        if (res.code == "A0000") {
+          var path = res.data;
+          //window.location.href=('/api/harmonic-boot/integrity/exportIntegrityDataExcel?filePath='+path)
+          this.getpath(path);
+        }
+      });
+    },
+    getpath(path) {
+      var fileName = path.substring(path.lastIndexOf("/") + 1, path.length); //获取文件名
+      api.getExportIntegrityDataExcel(path).then((res) => {
+        var blob = new Blob([res], {
+          type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
+        }); //response是返回的数据对象
+        var downloadElement = document.createElement("a");
+        var href = window.URL.createObjectURL(blob); //创建下载的链接
+        downloadElement.href = href;
+        downloadElement.setAttribute("download", fileName);
+        document.body.appendChild(downloadElement);
+        downloadElement.click(); //点击下载
+        document.body.removeChild(downloadElement); //下载完成移除元素
+        window.URL.revokeObjectURL(href); //释放掉blob对象
+      });
+    },
+    rest() {
+      this.deptName = "全国";
+      this.formData = {
+        deptIndex: "",
+        monitorFlag: 2,
+        loadType: null,
+        manufacturer: null,
+        searchBeginTime: "",
+        searchEndTime: "",
+        statisticalType: "",
+        scale: null,
+      };
+    },
+  },
+};
+</script>
+<style lang="less" scoped>
+@import url("../../../styles/comStyle.less");
+.container {
+  /* margin: auto; */
+  top: 0px;
+  right: 0;
+  width: 50%;
+  height: 0px;
+  z-index: 2000;
+  position: absolute;
+  background-color: #e4e7ebb9;
+  overflow: auto;
+  scroll-behavior: smooth;
+  -radius: 20px;
+}
+/* 隐藏滚动条 */
+::-webkit-scrollbar {
+  display: block;
+}
+.expend {
+  animation: expend ease 5s forwards;
+}
+.close-container {
+  animation: no-expend ease 1s forwards;
+}
+@keyframes expend {
+  from {
+    top: 0px;
+    height: auto;
+  }
+  to {
+    height: auto;
+    top: 0px;
+  }
+}
+@keyframes no-expend {
+  from {
+    height: 20%;
+    top: 0px;
+  }
+  to {
+    top: 0px;
+    height: 0px;
+  }
+}
+.coles {
+  position: absolute;
+  right: 0;
+  font-size: 20px;
+  cursor: pointer;
+}
+</style>
diff --git a/src/views/pqs/harmonicMonitoring/area/onlinerate/components/onlineCharts.vue b/src/views/pqs/harmonicMonitoring/area/onlinerate/components/onlineCharts.vue
new file mode 100644
index 00000000..1bb34330
--- /dev/null
+++ b/src/views/pqs/harmonicMonitoring/area/onlinerate/components/onlineCharts.vue
@@ -0,0 +1,305 @@
+<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
new file mode 100644
index 00000000..53dc50d6
--- /dev/null
+++ b/src/views/pqs/harmonicMonitoring/area/onlinerate/components/onlineratetable.vue
@@ -0,0 +1,377 @@
+<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
new file mode 100644
index 00000000..f67fca6a
--- /dev/null
+++ b/src/views/pqs/harmonicMonitoring/area/onlinerate/index.vue
@@ -0,0 +1,401 @@
+<template>
+    <div class="default-main online">
+        <div class="online_header">
+            <TableHeader date-picker ref="tableHeaderRef">
+                <template #select>
+                    <el-form-item label="统计类型:">
+                        <el-select
+                            v-model="formData.statisticalType"
+                            placeholder="请选择统计类型"
+                            value-key="id"
+                            style="width: 100%"
+                        >
+                            <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 ref="select1" v-model="deptName" placeholder="请选择所属部门区域" style="width: 100%">
+                    <el-option :value="formData.deptIndex" style="height: auto"> -->
+                        <!-- {{ formData.deptIndex }} -->
+                        <el-cascader
+                            v-model="formData.deptIndex"
+                            :props="defaultProps"
+                            :options="treeData"
+                            clearable
+                            filterable
+                            collapse-tags
+                            placeholder="请选择区域"
+                        />
+                        <!-- <el-tree
+                            ref="tree"
+                            v-model="formData.deptName"
+                            :data="treeData"
+                            node-key="id"
+                            accordion
+                            :default-expanded-keys="idArr"
+                            :props="defaultProps"
+                            @node-click="handleNodeClick"
+                        >
+                            <template #default="{ node, data }">
+                                <span :title="data.name">{{ data?.name }}</span>
+                            </template>
+                        </el-tree> -->
+                        <!-- </el-option>
+                </el-select> -->
+                    </el-form-item>
+                    <el-form-item label="电压等级:">
+                        <el-select
+                            v-model="formData.scale"
+                            multiple
+                            collapse-tags
+                            clearable
+                            placeholder="请选择电压等级"
+                            style="width: 100%"
+                            value-key="id"
+                        >
+                            <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="formData.manufacturer"
+                            multiple
+                            collapse-tags
+                            clearable
+                            placeholder="请选择终端厂家"
+                            style="width: 100%"
+                            value-key="id"
+                        >
+                            <el-option
+                                v-for="(item, index) in terminaloption"
+                                :key="index"
+                                :label="item.name"
+                                :value="item"
+                            ></el-option>
+                        </el-select>
+                    </el-form-item>
+                    <el-form-item label="干扰源类型:">
+                        <el-select
+                            v-model="formData.loadType"
+                            multiple
+                            collapse-tags
+                            clearable
+                            placeholder="请选择干扰源类型"
+                            style="width: 100%"
+                            value-key="id"
+                        >
+                            <el-option
+                                v-for="(item, index) in interfereoption"
+                                :key="index"
+                                :label="item.name"
+                                :value="item"
+                            ></el-option>
+                        </el-select>
+                    </el-form-item>
+                </template>
+            </TableHeader>
+        </div>
+        <div class="online_main">
+            <el-tabs v-model="activeName" type="border-card" @tab-click="handleClick">
+                <el-tab-pane :name="0" label="终端在线率列表">
+                    <Table
+                        ref="tableRef"
+                        :tree-config="{ transform: true, parentField: 'pid' }"
+                        :scroll-y="{ enabled: true }"
+                        v-if="activeName == 0"
+                    />
+                </el-tab-pane>
+                <el-tab-pane :name="1" label="终端在线率图表">
+                    <onlineCharts ref="onlineChartsRef" />
+                </el-tab-pane>
+            </el-tabs>
+        </div>
+    </div>
+</template>
+<script lang="ts" setup>
+import { ref, onMounted, watch } from 'vue'
+import { useDictData } from '@/stores/dictData'
+import DatePicker from '@/components/form/datePicker/index.vue'
+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'
+const tableRef = ref()
+const onlineChartsRef = ref()
+const dictData = useDictData()
+//字典获取电压等级
+const voltageleveloption = dictData.getBasicData('Dev_Voltage_Stand')
+//字典获取终端厂家
+const terminaloption = dictData.getBasicData('Dev_Manufacturers')
+//字典获取干扰源类型
+const interfereoption = dictData.getBasicData('Interference_Source')
+//字典获取统计类型
+const classificationData = dictData.getBasicData('Statistical_Type')
+//调用区域接口获取区域
+const treeData = ref([])
+const idArr = ref([])
+const activeName = ref(0)
+const getTreeData = async () => {
+    await getAreaDept().then(res => {
+        var data = res.data
+        data.forEach(element => {
+            idArr.value.push(element.id)
+        })
+        treeData.value = JSON.parse(JSON.stringify(res.data))
+    })
+}
+getTreeData()
+
+const formData = ref({
+    statisticalType: classificationData[0], //统计类型
+    deptIndex: treeData.value[0]?.id, //区域选择
+    scale: voltageleveloption, //电压等级
+    manufacturer: terminaloption, //终端厂家
+    loadType: interfereoption //干扰源类型
+    // searchBeginTime: '',
+    // searchEndTime: ''
+})
+formData.value.deptIndex = treeData.value[0]?.id
+const defaultProps = ref({
+    label: 'name',
+    value: 'id',
+    checkStrictly: true,
+    emitPath: false,
+    expandTrigger: 'click' as const
+})
+const handleClick = (tab: any, e: any) => {
+    // console.log(tab,e,"??????????");
+    // if(activeName.value===1){
+    tableStore.index()
+    // }
+}
+
+// const datePickerRef = ref()
+const tableHeaderRef = ref()
+const tableStore = new TableStore({
+    // publicHeight: 60,
+    showPage: false,
+    url: '/device-boot/terminalOnlineRateData/getOnlineRateData',
+    method: 'POST',
+    column: [
+        {
+            title: '名称',
+            field: 'name',
+            align: 'left',
+            treeNode: true
+        },
+        {
+            title: '网络参数',
+            field: 'ip',
+            align: 'center',
+            formatter: function (row) {
+                return row.cellValue ? row.cellValue : '/'
+            }
+        },
+        {
+            title: '终端名称',
+            field: 'dataName',
+            align: 'center',
+            formatter: function (row) {
+                return row.cellValue ? row.cellValue : '/'
+            }
+        },
+        {
+            title: '厂家',
+            field: 'manufacturer',
+            align: 'center',
+            formatter: function (row) {
+                return row.cellValue ? row.cellValue : '/'
+            }
+        },
+        {
+            title: '通讯状态',
+            field: 'comFlag',
+            align: 'center',
+            render: 'tag',
+            custom: {
+                null: 'primary',
+                0: 'danger',
+                1: 'success'
+            },
+            replaceValue: {
+                null: '/',
+                0: '中断',
+                1: '正常'
+            }
+        },
+        {
+            title: '最新数据时间',
+            field: 'updateTime',
+            align: 'center',
+            formatter: function (row) {
+                return row.cellValue ? row.cellValue : '/'
+            }
+        },
+        {
+            title: '在线率(%)',
+            field: 'onlineRate',
+            align: 'center',
+            formatter: function (row) {
+                return row.cellValue == 3.14159 ? '暂无数据' : row.cellValue.toFixed(2)
+            }
+        },
+        {
+            title: '评估',
+            field: 'valueOver',
+            align: 'center',
+            render: 'tag',
+            custom: {
+                null: 'danger',
+                0: 'danger',
+                1: 'success',
+                2: 'primary',
+                3: 'danger'
+            },
+            replaceValue: {
+                null: '暂无评估',
+                0: '暂无评估',
+                1: '优秀',
+                2: '合格',
+                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
+        tableStore.table.params.statisticalType = formData.value.statisticalType
+        tableStore.table.params.scale = formData.value.scale
+        tableStore.table.params.manufacturer = formData.value.manufacturer
+        tableStore.table.params.loadType = formData.value.loadType
+        tableStore.table.params.serverName = 'harmonicBoot'
+        delete tableStore.table.params.timeFlag
+        delete tableStore.table.params.startTime
+        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]
+    },
+    loadCallback: () => {
+        let treeData = []
+
+        treeData = tree2List(tableStore.table.data)
+        tableStore.table.data = JSON.parse(JSON.stringify(treeData))
+        setTimeout(() => {
+            activeName.value == 0 && tableRef.value && tableRef.value.getRef().setAllTreeExpand(true)
+        }, 0)
+    }
+})
+const handleSearch = () => {
+    formData.value.searchBeginTime = datePickerRef.value.timeValue[0]
+    formData.value.searchEndTime = datePickerRef.value.timeValue[1]
+}
+tableStore.table.params.deptIndex = ''
+tableStore.table.params.statisticalType = []
+tableStore.table.params.scale = []
+tableStore.table.params.manufacturer = []
+tableStore.table.params.loadType = []
+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.valueOver == 3.14159 ? 0 : item.valueOver >= 90 ? 1 : item.valueOver && item.valueOver < 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(() => {})
+
+watch(
+    () => treeData.value,
+    (val, oldVal) => {
+        if (val && val.length != 0) {
+            formData.value.deptIndex = val[0].id
+            tableStore.index()
+        }
+    },
+    {
+        immediate: true,
+        deep: true
+    }
+)
+</script>
+<style lang="scss" scoped>
+.online {
+    width: 100%;
+    height: 100%;
+    .online_header {
+        width: 100%;
+        max-height: 140px;
+        padding: 10px;
+        box-sizing: border-box;
+    }
+    .online_main {
+        padding: 0 10px;
+    }
+}
+</style>
diff --git a/src/views/pqs/harmonicMonitoring/area/powerassessment.vue b/src/views/pqs/harmonicMonitoring/area/powerassessment.vue
new file mode 100644
index 00000000..bec96e5c
--- /dev/null
+++ b/src/views/pqs/harmonicMonitoring/area/powerassessment.vue
@@ -0,0 +1,414 @@
+<template>
+  <el-container :style="'height:' + asideheight">
+    <el-main class="main">
+      <el-row :gutter="20">
+        <el-col :span="6">
+          <span style="font-size: 14px">统计类型:</span>
+          <el-select
+            v-model="formData.statisticalType"
+            @change="changeclasss"
+            placeholder="请选择统计类型"
+            style="width: 35%"
+          >
+            <el-option
+              v-for="item in classificationData"
+              :key="item.id"
+              :label="item.name"
+              :value="{
+                label: item.name,
+                value: item.id,
+                name: item.name,
+                id: item.id,
+                code: item.code,
+                sort: item.sort,
+              }"
+            >
+            </el-option>
+          </el-select>
+
+          <span style="font-size: 14px">区域:</span>
+          <el-select
+            v-model="deptName"
+            placeholder="请选择所属部门区域"
+            style="width: 35%"
+          >
+            <el-option :value="deptIndex" style="height: auto">
+              <el-tree
+                ref="tree"
+                :data="treeData"
+                node-key="id"
+                accordion
+                :default-expanded-keys="idArr"
+                :props="defaultProps"
+                @node-click="handleNodeClick"
+              >
+                <span class="span-ellipsis" slot-scope="{ node, data }">
+                  <span :title="data.name">{{ data.name }}</span>
+                </span>
+              </el-tree>
+            </el-option>
+          </el-select>
+        </el-col>
+        <el-col :span="18">
+          <timepicker
+            @querfromdata="querfromdata"
+            :interval="interval"
+            :falg="true"
+            :tablename="tablename"
+          ></timepicker>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="24">
+          <el-tabs type="border-card" v-model="activeName">
+            <el-tab-pane :lazy="false" label="综合评估" name="tab1">
+              <el-row :gutter="10">
+                <el-col :span="12">
+                  <comprehensivemap
+                    v-if="'tab1' == activeName"
+                    :dataList="dataList"
+                    :title="'电能质量综合评估'"
+                    ref="child2"
+                  ></comprehensivemap>
+                </el-col>
+                <el-col :span="12">
+                  <el-row>
+                    <el-col :span="24">
+                      <evaluation
+                        v-if="'tab1' == activeName"
+                        :xdata="xdata"
+                        :ydata="ydata"
+                        :title="title"
+                        ref="child"
+                      >
+                      </evaluation>
+                    </el-col>
+                    <el-col :span="24">
+                      <el-table
+                        stripe
+                        :data="tableData"
+                        border
+                        v-loading="loading"
+                        highlight-current-row
+                        :height="rightheight"
+                        style="width: 100%"
+                      >
+                        <el-table-column
+                          align="center"
+                          prop="name"
+                          label="区域"
+                        ></el-table-column>
+                        <el-table-column
+                          align="center"
+                          prop="data"
+                          label="综合评估"
+                        >
+                          <template slot-scope="scope">
+                            <span v-if="scope.row.data == 0.2">暂无数据</span>
+                            <span v-if="scope.row.data !== 0.2">{{
+                              scope.row.data
+                            }}</span>
+                          </template>
+                        </el-table-column>
+                        <el-table-column
+                          align="center"
+                          prop="level"
+                          label="等级"
+                        ></el-table-column>
+                      </el-table>
+                    </el-col>
+                  </el-row>
+                </el-col>
+              </el-row>
+            </el-tab-pane>
+          </el-tabs>
+        </el-col>
+      </el-row>
+    </el-main>
+  </el-container>
+</template>
+<script>
+import { guanzhou } from "@/assets/commjs/token";
+import api1 from "@/api/pollution/pollution";
+import timepicker from "../../components/TimePicker/index4";
+import { dicData } from "../../../assets/commjs/dictypeData";
+import api from "../../../api/integraliy/integraliy";
+import dataintegrity from "../../components/dataintegrity";
+
+export default {
+  components: {
+    timepicker,
+    
+  },
+  data() {
+    return {
+      classt: "Power_Network",
+      loading: true,
+      tablename: "tab1",
+      eacjartflag: true,
+      interval: 3,
+      treeData: [],
+      idArr: [],
+      defaultProps: {
+        children: "children",
+        label: "name",
+      },
+      deptName: "",
+      deptIndex: "",
+      name: "sjwzx",
+      path: "/harmonic-boot/harmonic/getIntegrityData",
+      asideheight: undefined,
+      asideheight: undefined,
+      rightheight: undefined,
+      id: 1,
+      title: "区域",
+      xdata: [],
+      ydata: [],
+      dataList: [
+        { name: "南海诸岛", value: 54 },
+        { name: "北京", value: 5.4 },
+        { name: "天津", value: 5.3 },
+        { name: "上海", value: 4.0 },
+        { name: "重庆", value: 5.5 },
+        { name: "河北", value: 5.3 },
+        { name: "河南", value: 5.3 },
+        { name: "云南", value: 4.1 },
+        { name: "辽宁", value: 0.2 },
+        { name: "黑龙江", value: 5.5 },
+        { name: "湖南", value: 5.2 },
+        { name: "安徽", value: 5.0 },
+        { name: "山东", value: 3.9 },
+        { name: "新疆", value: 2.5 },
+        { name: "江苏", value: 3.1 },
+        { name: "浙江", value: 5.0 },
+        { name: "江西", value: 2.2 },
+        { name: "湖北", value: 3.8 },
+        { name: "广西", value: 3.3 },
+        { name: "甘肃", value: 0.2 },
+        { name: "山西", value: 3.9 },
+        { name: "陕西", value: 5.2 },
+        { name: "吉林", value: 3.0 },
+        { name: "福建", value: 1.8 },
+        { name: "贵州", value: 3.5 },
+        { name: "广东", value: 1.3 },
+        { name: "青海", value: 4.5 },
+        { name: "西藏", value: 5.0 },
+        { name: "四川", value: 5.4 },
+        { name: "宁夏", value: 3.0 },
+        { name: "海南", value: 2.2 },
+        { name: "台湾", value: 5.0 },
+        { name: "香港", value: 0.2 },
+        { name: "澳门", value: 0.2 },
+      ],
+      classvalue: 0,
+      activeName: "tab1",
+      panindexOptions: [],
+      classificationData: [],
+      tableData: [],
+      deptIndex: "",
+      formData: {
+        //后面需要修改
+        deptIndex: "",
+        monitorFlag: 2,
+        powerFlag: 2,
+        loadType: [
+          {
+            code: "",
+            id: "",
+            name: "",
+            sort: 0,
+          },
+        ],
+        manufacturer: [
+          {
+            code: "",
+            id: "",
+            name: "",
+            sort: 0,
+          },
+        ],
+        searchBeginTime: "",
+        searchEndTime: "",
+        serverName: "",
+        statisticalType: "",
+        scale: [
+          {
+            code: "",
+            id: "",
+            name: "",
+            sort: 0,
+          },
+        ],
+      },
+      timeValue: [],
+    };
+  },
+  created() {
+    // this.guanzhou()
+    var info = window.sessionStorage.getItem("Info");
+    info = eval("(" + info + ")");
+    this.formData.deptIndex = info.deptId;
+    this.getAreaDept();
+    this.getclassificationData();
+    //this.getVoltage()
+    //this.getManufacturer()
+    // this.getLoadType()
+  },
+  mounted() {
+    // this.asideheight = getappheight()
+    // this.rightheight=gettwoechartsheight()
+  },
+  methods: {
+    guanzhou() {
+      var data = {
+        token: this.$route.query.token,
+      };
+      api1.guanzhou(data).then((res) => {
+        if (res.code == "A0000") {
+          return;
+        } else {
+          this.$router.push("/error/massege/403");
+        }
+      });
+    },
+    //切换统计类型
+    changeclasss(val) {
+      this.classt = val.code;
+    },
+    //字典获取数据电压等级
+    getVoltage() {
+      var code = "Dev_Voltage_Stand";
+      this.voltageleveloption = dicData(code, []);
+      this.formData.scale = this.voltageleveloption;
+    },
+    //字典获取数据终端厂家
+    getManufacturer() {
+      var code = "Dev_Manufacturers";
+      this.terminaloption = dicData(code, []);
+      this.formData.manufacturer = this.terminaloption;
+    },
+    //字典获取数据干扰源类型
+    getLoadType() {
+      var code = "Interference_Source";
+      this.interfereoption = dicData(code, []);
+      this.formData.loadType = this.interfereoption;
+    },
+    //部门绑定区域触发区域树节点
+    handleNodeClick(data, node) {
+      this.deptName = data.name;
+      this.deptId = data.id;
+      this.formData.deptIndex = data.id;
+    },
+    //时间格式转化
+    dateFormat(dateData1, dateData2) {
+      var timearr = [];
+      var date = new Date(dateData1);
+      var y = date.getFullYear();
+      var m = date.getMonth() + 1;
+      m = m < 10 ? "0" + m : m;
+      var d = date.getDate();
+      d = d < 10 ? "0" + d : d;
+      var h = date.getHours();
+      h = h < 10 ? "0" + h : h;
+      var f = date.getMinutes();
+      f = f < 10 ? "0" + f : f;
+      var s = date.getSeconds();
+      s = s < 10 ? "0" + s : s;
+      this.formData.searchBeginTime = y + "-" + m + "-" + d;
+      timearr.push(this.formData.startTime);
+      var date = new Date(dateData2);
+      var y = date.getFullYear();
+      var m = date.getMonth() + 1;
+      m = m < 10 ? "0" + m : m;
+      var d = date.getDate();
+      d = d < 10 ? "0" + d : d;
+      var h = date.getHours();
+      h = h < 10 ? "0" + h : h;
+      var f = date.getMinutes();
+      f = f < 10 ? "0" + f : f;
+      var s = date.getSeconds();
+      s = s < 10 ? "0" + s : s;
+      this.formData.searchEndTime = y + "-" + m + "-" + d;
+      timearr.push(this.formData.endTime);
+      return timearr;
+    },
+    //获取区域
+    getAreaDept() {
+      api.getAreaDept().then((res) => {
+        if (res.code == "A0000") {
+          var data = res.data;
+          this.deptName = res.data[0].name;
+          data.forEach((element) => {
+            this.idArr.push(element.id);
+          });
+          this.treeData = data;
+        }
+      });
+    },
+    //获取统计类型
+    getclassificationData() {
+      var code = "Statistical_Type";
+      this.classificationData = dicData(code, ["Report_Type"]);
+      this.formData.statisticalType = this.classificationData[0];
+    },
+    //2次组件触发事件
+    querfromdata(data, timehbValue, interval) {
+      this.interval = interval;
+      this.timeValue = data;
+      this.dateFormat(this.timeValue[0], this.timeValue[1]);
+      api.getComAccessData(this.formData).then((res) => {
+        if (res.code == "A0000") {
+          this.tableData = res.data;
+          var xdata = [];
+          var ydata = [];
+          var arr = [];
+          this.loading = false;
+          for (var i = 0; i < res.data.length; i++) {
+            if (res.data[i].data == 3.14159) {
+              res.data[i].data = 0.2;
+              var p = {
+                name: res.data[i].name.substr(0, 2),
+                value: res.data[i].data,
+              };
+              arr.push(p);
+              ydata.push(res.data[i].data);
+            } else {
+              ydata.push(res.data[i].data);
+            }
+            xdata.push(res.data[i].name);
+          }
+          this.dataList = arr;
+          this.xdata = xdata;
+          this.ydata = ydata;
+          this.$nextTick(() => {
+            this.$refs.child2.compmapcharts();
+            this.$refs.child.evaluation();
+          });
+        }
+      });
+    },
+  },
+};
+</script>
+<style lang="less" scoped>
+@import url("../../../styles/common.less");
+.main {
+  overflow: hidden;
+  padding: 10px;
+}
+::v-deep .el-tabs--border-card > .el-tabs__content {
+  padding: 10px;
+}
+::-webkit-scrollbar {
+  width: 5px;
+  height: 0px;
+}
+::v-deep .el-select-dropdown__item,
+.el-select-dropdown__item {
+  background-color: #fff;
+  padding: 0 5px !important;
+}
+::v-deep .el-table__body-wrapper::-webkit-scrollbar-track {
+  background-color: #79878769;
+}
+</style>
diff --git a/src/views/pqs/harmonicMonitoring/area/qualifiedRate.vue b/src/views/pqs/harmonicMonitoring/area/qualifiedRate.vue
new file mode 100644
index 00000000..68b1fab5
--- /dev/null
+++ b/src/views/pqs/harmonicMonitoring/area/qualifiedRate.vue
@@ -0,0 +1,620 @@
+<template>
+    <div class="pd10" v-loading="loading" element-loading-text="数据加载中">
+        <div class="container" id="container">
+            <i @click="closeHandle" class="el-icon-circle-close coles"></i>
+            <el-form :inline="true" :model="formInline" label-width="90px" class="">
+                <!-- <div style="display: flex;"> -->
+                <el-form-item v-if="this.quyunames != undefined">
+                    <el-switch
+                        class="tableScopeSwitch"
+                        :active-value="2"
+                        :inactive-value="1"
+                        @change="handleStatusChange"
+                        :active-text="quyuname"
+                        :inactive-text="quyunames"
+                        inactive-color="#007878"
+                        active-color="#666666"
+                        v-model="this.formData.monitorFlag"
+                    ></el-switch>
+                </el-form-item>
+                <el-form-item label="统计类型:">
+                    <el-select
+                        v-model="formData.statisticalType"
+                        @change="changeclasss"
+                        placeholder="请选择统计类型"
+                        style="width: 100%"
+                    >
+                        <el-option
+                            v-for="item in classificationData"
+                            :key="item.id"
+                            :label="item.name"
+                            :value="{
+                                label: item.name,
+                                value: item.id,
+                                name: item.name,
+                                id: item.id,
+                                code: item.code,
+                                sort: item.sort
+                            }"
+                        ></el-option>
+                    </el-select>
+                </el-form-item>
+                <el-form-item>
+                    <Area ref="Area" @click="handleNodeClick"></Area>
+                </el-form-item>
+                <el-form-item label="电压等级:">
+                    <el-select
+                        v-model="formData.scale"
+                        multiple
+                        collapse-tags
+                        clearable
+                        placeholder="请选择电压等级"
+                        style="width: 100%"
+                    >
+                        <el-option
+                            v-for="item in voltageleveloption"
+                            :key="item.id"
+                            :label="item.name"
+                            :value="{
+                                label: item.name,
+                                value: item.id,
+                                code: item.code,
+                                name: item.name,
+                                id: item.id,
+                                sort: item.sort
+                            }"
+                        ></el-option>
+                    </el-select>
+                </el-form-item>
+                <el-form-item label="终端厂家:">
+                    <el-select
+                        v-model="formData.manufacturer"
+                        multiple
+                        collapse-tags
+                        clearable
+                        placeholder="请选择终端厂家"
+                        style="width: 100%"
+                    >
+                        <el-option
+                            v-for="item in terminaloption"
+                            :key="item.id"
+                            :label="item.name"
+                            :value="{
+                                label: item.name,
+                                value: item.id,
+                                code: item.code,
+                                name: item.name,
+                                id: item.id,
+                                sort: item.sort
+                            }"
+                        ></el-option>
+                    </el-select>
+                </el-form-item>
+                <el-form-item label="干扰源类型:">
+                    <el-select
+                        v-model="formData.loadType"
+                        multiple
+                        collapse-tags
+                        clearable
+                        placeholder="请选择干扰源类型"
+                        style="width: 100%"
+                    >
+                        <el-option
+                            v-for="item in interfereoption"
+                            :key="item.id"
+                            :label="item.name"
+                            :value="{
+                                label: item.name,
+                                value: item.id,
+                                code: item.code,
+                                name: item.name,
+                                id: item.id,
+                                sort: item.sort
+                            }"
+                        ></el-option>
+                    </el-select>
+                </el-form-item>
+            </el-form>
+        </div>
+        <el-row v-show="falg">
+            <el-form :inline="true" class="demo-form-inline">
+                <el-form-item>
+                    <timepicker
+                        ref="timehg"
+                        :id="id"
+                        :interval="interval"
+                        :treenode="treenode"
+                        :tablename="tablename"
+                        :name="name"
+                        :path="path"
+                        :dataTree="dataTree"
+                    ></timepicker>
+                    <!-- <el-button class="el-icon-d-arrow-right"  type="primary" round @click="timechange">时间选择</el-button> -->
+                </el-form-item>
+                <el-form-item>
+                    <el-button @click="querfromdata" type="primary" icon="el-icon-search">查询</el-button>
+                </el-form-item>
+                <el-form-item>
+                    <el-button type="text" @click="closeHandle">
+                        条件筛选
+                        <i :class="!view ? 'el-icon-arrow-down' : 'el-icon-arrow-right'"></i>
+                    </el-button>
+                </el-form-item>
+            </el-form>
+        </el-row>
+        <el-row :gutter="20">
+            <el-col :span="24">
+                <el-tabs :style="'height:' + vh" type="border-card" v-model="activeName" @tab-click="handleClick">
+                    <el-tab-pane label="稳态合格率表格" name="tab1">
+                        <qualifiedataintegrity
+                            :classvalue="classt"
+                            :tableData="tableData"
+                            :loading="loading"
+                        ></qualifiedataintegrity>
+                    </el-tab-pane>
+                    <el-tab-pane label="稳态合格率图表" name="tab2" id="hgceshi">
+                        <!-- <span style="font-weight: bold;color:#333;position: absolute;right: 100px;top: 25px;">注意:<span style="color:#CC0000">{{'合格率<60%'}}红色</span><span style="color:#FFCC33">&nbsp&nbsp&nbsp{{'60%≤合格率<90%'}}黄色</span><span style="color:#339966"> &nbsp&nbsp&nbsp{{ '合格率≥90%' }}绿色</span></span> -->
+                        <qualifiedechart
+                            :loading="loading"
+                            :title="title"
+                            :classvalue="classt"
+                            :xdata="xdata"
+                            :ydata1="ydata1"
+                            :ydata2="ydata2"
+                            :ydata3="ydata3"
+                            :ydata4="ydata4"
+                            :ydata5="ydata5"
+                            :ydata6="ydata6"
+                            :ydata7="ydata7"
+                            :ydata8="ydata8"
+                            v-show="'tab2' == activeName"
+                            ref="child"
+                        ></qualifiedechart>
+                    </el-tab-pane>
+                </el-tabs>
+            </el-col>
+        </el-row>
+    </div>
+</template>
+<script>
+import { dicData } from '../../../assets/commjs/dictypeData'
+import api from '../../../api/integraliy/integraliy'
+import timepicker from '../../components/TimePicker/index4'
+import qualifiedataintegrity from '../../components/qualifiedataintegrity'
+import qualifiedechart from '../../components/echarts/qualifiedechart'
+import Area from '@/views/components/Area/Area.vue'
+
+export default {
+    name: 'qualificationratestatistics',
+    components: {
+        Area,
+        timepicker,
+        qualifiedataintegrity,
+        qualifiedechart
+    },
+    computed: {},
+    data() {
+        return {
+            view: false,
+            falg: true,
+            quyuname: undefined,
+            quyunames: undefined,
+            dd: false,
+            formInline: {},
+
+            xdata: [],
+            ydata1: [],
+            ydata2: [],
+            ydata3: [],
+            ydata4: [],
+            ydata5: [],
+            ydata6: [],
+            ydata7: [],
+            ydata8: [],
+            classt: 'Power_Network',
+            tablename: 'tab1',
+            eacjartflag: true,
+            interval: 3,
+            treeData: [],
+            defaultProps: {
+                children: 'children',
+                label: 'name'
+            },
+            deptName: '',
+            deptIndex: '',
+            name: 'sjwzx',
+            path: '/harmonic-boot/harmonic/getIntegrityData',
+            asideheight: undefined,
+            id: 1,
+            title: '电网拓扑',
+            xdata: [],
+            ydata: [],
+            ydata1: [],
+            classvalue: 0,
+            activeName: 'tab1',
+            treenode: '',
+            dataTree: '',
+            voltageleve1: '',
+            //电压等级
+            voltageleveloption: [],
+            terminal: '',
+            terminaloption: [],
+            interfere: '',
+            interfereoption: [],
+            classificationData: [],
+            dictypeData: undefined,
+            deptIndex: '',
+            formData: {
+                //后面需要修改
+                deptIndex: '',
+                monitorFlag: 2,
+                powerFlag: 2,
+                loadType: [],
+                manufacturer: [],
+                searchBeginTime: '',
+                searchEndTime: '',
+                statisticalType: '',
+                scale: []
+            },
+            periodBeginTime: '',
+            periodEndTime: '',
+            timehuanbiValue: [],
+            tableData: [],
+            ping: '',
+            time: '',
+            loading: true,
+            vh: null,
+            cu: ''
+        }
+    },
+    created() {
+        this.setHeight()
+        window.addEventListener('resize', this.setHeight)
+
+        let data = window.sessionStorage.getItem('sysData')
+        let yudata = eval('(' + data + ')')
+        let str = yudata.dataReport.split('，')
+        this.quyuname = str[0]
+        this.quyunames = str[1]
+        var info = window.sessionStorage.getItem('Info')
+        info = eval('(' + info + ')')
+        this.formData.deptIndex = info.deptId
+        this.getclassificationData()
+        this.getVoltage()
+        this.getManufacturer()
+        this.getLoadType()
+    },
+    mounted() {
+        if (this.$route.params.mapid0 != undefined && this.$route.params.mapName0 != undefined) {
+            setTimeout(() => {
+                this.RoutingChanges(this.$route.params.mapid0, this.$route.params.mapName0)
+            }, 500)
+        } else {
+            this.querfromdata()
+        }
+    },
+    beforeDestroy() {
+        window.removeEventListener('resize', this.setHeight)
+    },
+    methods: {
+        setHeight() {
+            this.vh = window.sessionStorage.getItem('appheight') - 55 + 'px'
+        },
+        timechange() {
+            this.dd = true
+        },
+        closeHandle() {
+            if (this.view) {
+                this.view = false
+            } else {
+                this.view = true
+            }
+            //console.log('关闭和展开');
+            const dom = document.getElementById('container')
+            const closeDom = document.getElementsByClassName('close')[0]
+            if (!dom.className.match(/(?:^|\s)expend(?!\S)/)) {
+                dom.className = 'container expend'
+            } else {
+                dom.className = 'container close-container'
+            }
+        },
+
+        //切换统计类型
+        changeclasss(val) {
+            this.cu = val.code
+        },
+        //时间格式转化
+        dateFormat(dateData1, dateData2) {
+            var timearr = []
+            var date = new Date(dateData1)
+            var y = date.getFullYear()
+            var m = date.getMonth() + 1
+            m = m < 10 ? '0' + m : m
+            var d = date.getDate()
+            d = d < 10 ? '0' + d : d
+            var h = date.getHours()
+            h = h < 10 ? '0' + h : h
+            var f = date.getMinutes()
+            f = f < 10 ? '0' + f : f
+            var s = date.getSeconds()
+            s = s < 10 ? '0' + s : s
+            this.formData.searchBeginTime = y + '-' + m + '-' + d
+            timearr.push(this.formData.startTime)
+            var date = new Date(dateData2)
+            var y = date.getFullYear()
+            var m = date.getMonth() + 1
+            m = m < 10 ? '0' + m : m
+            var d = date.getDate()
+            d = d < 10 ? '0' + d : d
+            var h = date.getHours()
+            h = h < 10 ? '0' + h : h
+            var f = date.getMinutes()
+            f = f < 10 ? '0' + f : f
+            var s = date.getSeconds()
+            s = s < 10 ? '0' + s : s
+            this.formData.searchEndTime = y + '-' + m + '-' + d
+            timearr.push(this.formData.endTime)
+            return timearr
+        },
+        //部门绑定区域触发区域树节点
+        handleNodeClick(data, node) {
+            this.deptId = data.id
+            this.formData.deptIndex = data.id
+        },
+        formatDate(date) {
+            // date = new Date();
+            date = new Date(Date.parse(date.replace(/-/g, '/'))) //转换成Data();
+
+            var y = date.getFullYear()
+
+            var m = date.getMonth() + 1
+            m = m < 10 ? '0' + m : m
+            var d = date.getDate()
+            d = d < 10 ? '0' + d : d
+            return y + '-' + m + '-' + d
+        },
+        //2次组件触发事件
+        querfromdata() {
+            this.classt = this.cu
+            //this.closeHandle()
+            this.dd = false
+            this.interval = this.$refs.timehg.intervald
+            this.loading = true
+            this.timeValue = this.$refs.timehg.timeValue
+            // this.timeValue = data;
+            // this.timehuanbiValue = timehbValue;
+            // this.periodBeginTime = this.timehuanbiValue[0];
+            // this.periodEndTime = this.timehuanbiValue[1];
+            // this.ping = this.periodBeginTime + "至" + this.periodEndTime;
+            this.dateFormat(this.timeValue[0], this.timeValue[1])
+            this.time = this.formData.searchBeginTime + '至' + this.formData.searchEndTime
+            api.getSteadyQualifyData(this.formData).then(res => {
+                if (res.code == 'A0000') {
+                    if (res.data.length == 0) {
+                        this.tableData = []
+                    } else {
+                        if (
+                            res.data[0].children[0].children[0].children[0].children !== [] &&
+                            res.data[0].children[0].children[0].children[0].children !== null
+                        ) {
+                            res.data.forEach(m => {
+                                m.id = this.guid()
+                                m.children.forEach(n => {
+                                    n.id = this.guid()
+                                    n.children.forEach(d => {
+                                        d.id = this.guid()
+                                        d.children.forEach(p => {
+                                            p.id = this.guid()
+                                            p.children.forEach(h => {
+                                                h.id = this.guid()
+                                            })
+                                        })
+                                    })
+                                })
+                            })
+                        } else {
+                            res.data.forEach(m => {
+                                m.id = this.guid()
+                                m.children.forEach(n => {
+                                    n.id = this.guid()
+                                    n.children.forEach(d => {
+                                        d.id = this.guid()
+                                        d.children.forEach(p => {
+                                            p.id = this.guid()
+                                        })
+                                    })
+                                })
+                            })
+                        }
+                        this.tableData = res.data
+                    }
+                    this.gettubiao()
+                }
+            })
+        },
+        gettubiao() {
+            this.loading = true
+            var data = {
+                deptIndex: this.formData.deptIndex,
+                loadType: this.formData.loadType,
+                monitorFlag: this.formData.monitorFlag,
+                powerFlag: 2,
+                manufacturer: this.formData.manufacturer,
+                searchBeginTime: this.formData.searchBeginTime,
+                searchEndTime: this.formData.searchEndTime,
+                statisticalType: this.formData.statisticalType,
+                scale: this.formData.scale,
+                periodBeginTime: this.periodBeginTime,
+                periodEndTime: this.periodEndTime
+            }
+            this.ydata = []
+            this.ydata1 = []
+            this.ydata2 = []
+            this.ydata3 = []
+            this.ydata4 = []
+            this.ydata5 = []
+            this.ydata6 = []
+            this.ydata7 = []
+            this.ydata8 = []
+            api.getSteadyQualifyCensus(data).then(res => {
+                this.eacjartflag = true
+
+                if (res.code == 'A0000') {
+                    this.xdata = res.data.type
+                    this.ydata1 = res.data.freqOffset
+                    this.ydata2 = res.data.flicker
+                    this.ydata3 = res.data.voltageUnbalance
+                    this.ydata4 = res.data.harmonicVoltage
+                    this.ydata5 = res.data.voltageOffset
+                    this.ydata6 = res.data.harmonicCurrent
+                    this.ydata7 = res.data.negativeCurrent
+                    this.ydata8 = res.data.interHarmonic
+                    this.loading = false
+                    this.$nextTick(() => {
+                        this.$refs.child.qualifiedechart()
+                    })
+                }
+            })
+        },
+        //标签切换
+        handleClick(tab, event) {
+            this.activeName = tab.name
+            if (tab.name == 'tab1') {
+                this.eacjartflag = false
+                this.$nextTick(() => {
+                    this.$refs.child.qualifiedechart()
+                })
+            } else if (tab.name == 'tab2') {
+                // this.gettubiao();
+                this.$nextTick(() => {
+                    // this.$refs.child.qualifiedechart();
+                })
+            }
+        },
+
+        //开关触发
+        handleStatusChange(val) {
+            this.formData.monitorFlag = val
+        },
+
+        //字典获取数据电压等级
+        getVoltage() {
+            var code = 'Dev_Voltage_Stand'
+            this.voltageleveloption = dicData(code, [])
+            this.formData.scale = this.voltageleveloption
+        },
+        //字典获取数据终端厂家
+        getManufacturer() {
+            var code = 'Dev_Manufacturers'
+            this.terminaloption = dicData(code, [])
+            this.formData.manufacturer = this.terminaloption
+        },
+        //字典获取数据干扰源类型
+        getLoadType() {
+            var code = 'Interference_Source'
+            this.interfereoption = dicData(code, [])
+            this.formData.loadType = this.interfereoption
+        },
+        //获取统计类型
+        getclassificationData() {
+            var code = 'Statistical_Type'
+            this.classificationData = dicData(code, ['Report_Type'])
+            this.formData.statisticalType = this.classificationData[0]
+        },
+
+        //获取数据完整性列表数据
+        getQueryData() {
+            let data = {
+                area: '0',
+                comparison: 0,
+                interference: [],
+                manufacturer: [],
+                searchBeginTime: '',
+                searchEndTime: '',
+                statisticalType: 0,
+                voltageLevel: []
+            }
+        },
+        guid() {
+            return 'xxxxxxxxxxxx4xxxyxxxxxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
+                let r = (Math.random() * 16) | 0,
+                    v = c === 'x' ? r : (r & 0x3) | 0x8
+                return v.toString(16)
+            })
+        },
+        rest() {},
+        RoutingChanges(id, name) {
+            this.deptId = id
+            this.formData.deptIndex = id
+            this.$refs.Area.form.valueTitle = name
+            this.querfromdata()
+        }
+    },
+    watch: {
+        $route: {
+            handler: function (val, oldVal) {
+                if (val.params.mapid0 != undefined && val.params.mapName0 != undefined) {
+                    this.$nextTick(() => {
+                        this.RoutingChanges(val.params.mapid0, val.params.mapName0)
+                    })
+                }
+            },
+            // 深度观察监听
+            deep: true
+        }
+    }
+}
+</script>
+<style lang="less" scoped>
+@import url('../../../styles/comStyle.less');
+
+.container {
+    /* margin: auto; */
+    top: 0px;
+    right: 0;
+    width: 50%;
+    height: 0px;
+    z-index: 2000;
+    position: absolute;
+    background-color: #e4e7ebb9;
+    overflow: auto;
+    scroll-behavior: smooth;
+    -radius: 20px;
+}
+/* 隐藏滚动条 */
+::-webkit-scrollbar {
+    display: block;
+}
+.expend {
+    animation: expend ease 5s forwards;
+}
+.close-container {
+    animation: no-expend ease 1s forwards;
+}
+@keyframes expend {
+    from {
+        top: 0px;
+        height: auto;
+    }
+    to {
+        height: auto;
+        top: 0px;
+    }
+}
+@keyframes no-expend {
+    from {
+        height: 20%;
+        top: 0px;
+    }
+    to {
+        top: 0px;
+        height: 0px;
+    }
+}
+.coles {
+    position: absolute;
+    right: 0;
+    font-size: 20px;
+    cursor: pointer;
+}
+</style>
diff --git a/src/views/pqs/harmonicMonitoring/area/qypowerment.vue b/src/views/pqs/harmonicMonitoring/area/qypowerment.vue
new file mode 100644
index 00000000..6fa34b76
--- /dev/null
+++ b/src/views/pqs/harmonicMonitoring/area/qypowerment.vue
@@ -0,0 +1,884 @@
+<template>
+    <div class="pd10" v-loading="konzhi" element-loading-text="数据加载中">
+        <el-form :inline="true" :model="formData" class="demo-form-inline">
+            <el-form-item>
+                <timepicker :id="id" ref="timepg" :interval="interval" :name="name" :path="path"></timepicker>
+            </el-form-item>
+            <el-form-item>
+                <el-button @click="querfromdata" type="primary" icon="el-icon-search">查询</el-button>
+            </el-form-item>
+        </el-form>
+        <el-row :gutter="20">
+            <el-col :span="24">
+                <el-row :gutter="10">
+                    <el-col :span="12">
+                        <!-- <span class="wr h3">综合评估:</span> -->
+                        <!-- <el-tag class="ws" circle style="color:#fff;background:#999999">无</el-tag><span class="h3" style="color:#999999;font-weight:bold">:无数据</span> -->
+                        <el-tag class="wd" circle style="color: #fff; background: #339966" size="mini">5级</el-tag>
+                        <span class="h3" style="color: #339966; font-weight: bold">:优秀--(4.5,5]</span>
+                        <el-tag class="qw" circle style="color: #fff; background: #3399ff" size="mini">4级</el-tag>
+                        <span class="h3" style="color: #3399ff; font-weight: bold">:良好--(4,4.5]</span>
+                        <el-tag class="qd" circle style="color: #fff; background: #ffcc33" size="mini">3级</el-tag>
+                        <span class="h3" style="color: #ffcc33; font-weight: bold">:合格--(3,4]</span>
+                        <el-tag class="zzd" circle style="color: #fff; background: #ff9900" size="mini">2级</el-tag>
+                        <span class="h3" style="color: #ff9900; font-weight: bold">:较差--(2,3]</span>
+                        <el-tag class="zd" circle style="color: #fff; background: #cc0000" size="mini">1级</el-tag>
+                        <span class="h3" style="color: #cc0000; font-weight: bold">:极差--[1,2]</span>
+
+                        <div :style="`height:${vh};overflow-y:auto;overflow-x:hidden;cursor:pointer;`">
+                            <el-row :gutter="5">
+                                <el-col
+                                    v-for="(item, index) in listcard"
+                                    :key="index"
+                                    :span="8"
+                                    style="margin-top: 5px"
+                                    class="qwe"
+                                >
+                                    <el-card
+                                        class="box-card3"
+                                        :style="
+                                            'height:25vh;color:#fff;opacity:0.8;background-image:linear-gradient(' +
+                                            settings.themeColor +
+                                            ',#ccc);'
+                                        "
+                                    >
+                                        <div
+                                            slot="header"
+                                            class="clearfix"
+                                            :style="
+                                                'height:30px;background:' +
+                                                settings.themeColor +
+                                                ';padding:2%;cursor: pointer;'
+                                            "
+                                        >
+                                            <span
+                                                style="
+                                                    line-height: 15px;
+                                                    color: #fff;
+                                                    font-weight: bold;
+                                                    float: right;
+                                                    font-size: 14px;
+                                                "
+                                            >
+                                                {{ item.name }}
+                                            </span>
+                                            <el-tag
+                                                size="mini"
+                                                v-if="item.data == 3.14159 || item.data == 0"
+                                                style="
+                                                    line-height: 10px;
+                                                    padding: 1.5%;
+                                                    float: left;
+                                                    color: #fff;
+                                                    background: #999999;
+                                                "
+                                                type=""
+                                                circle
+                                            >
+                                                无
+                                            </el-tag>
+                                            <el-tag
+                                                size="mini"
+                                                v-if="4.5 < item.data && item.data <= 5 && item.data !== 3.14159"
+                                                style="
+                                                    line-height: 10px;
+                                                    padding: 1.5%;
+                                                    float: left;
+                                                    color: #fff;
+                                                    background: #339966;
+                                                "
+                                                type=""
+                                                circle
+                                            >
+                                                5级
+                                            </el-tag>
+                                            <el-tag
+                                                size="mini"
+                                                v-if="4 < item.data && item.data <= 4.5 && item.data !== 3.14159"
+                                                style="
+                                                    line-height: 10px;
+                                                    padding: 1.5%;
+                                                    float: left;
+                                                    color: #fff;
+                                                    background: #3399ff;
+                                                "
+                                                type=""
+                                                circle
+                                            >
+                                                4级
+                                            </el-tag>
+                                            <el-tag
+                                                size="mini"
+                                                v-if="3 < item.data && item.data <= 4 && item.data !== 3.14159"
+                                                style="
+                                                    line-height: 10px;
+                                                    padding: 1.5%;
+                                                    float: left;
+                                                    color: #fff;
+                                                    background: #ffcc33;
+                                                "
+                                                type=""
+                                                circle
+                                            >
+                                                3级
+                                            </el-tag>
+                                            <el-tag
+                                                size="mini"
+                                                v-if="2 < item.data && item.data <= 3 && item.data !== 3.14159"
+                                                style="
+                                                    line-height: 10px;
+                                                    padding: 1.5%;
+                                                    float: left;
+                                                    color: #fff;
+                                                    background: #ff9900;
+                                                "
+                                                type=""
+                                                circle
+                                            >
+                                                2级
+                                            </el-tag>
+                                            <el-tag
+                                                size="mini"
+                                                v-if="1 <= item.data && item.data <= 2 && item.data !== 3.14159"
+                                                style="
+                                                    line-height: 10px;
+                                                    padding: 1.5%;
+                                                    float: left;
+                                                    color: #fff;
+                                                    background: #cc0000;
+                                                "
+                                                type=""
+                                                circle
+                                            >
+                                                1级
+                                            </el-tag>
+                                        </div>
+                                        <div style="height: 20vh; overflow-y: auto; overflow-x: hidden">
+                                            <el-col
+                                                :span="12"
+                                                v-for="(item1, index1) in item.children"
+                                                :key="index1"
+                                                style="height: 5vh"
+                                            >
+                                                <div
+                                                    style="height: 0.3%; background: ; margin-top: 1%; cursor: pointer"
+                                                >
+                                                    <el-tag
+                                                        size="mini"
+                                                        v-if="item1.data == 3.14159 || item1.data == 0"
+                                                        style="'float: left;color:#fff;background:#999999"
+                                                        type=""
+                                                        icon=""
+                                                        circle
+                                                    >
+                                                        无
+                                                    </el-tag>
+                                                    <el-tag
+                                                        size="mini"
+                                                        v-if="
+                                                            4.5 <= item1.data &&
+                                                            item1.data < 5 &&
+                                                            item1.data !== 3.14159
+                                                        "
+                                                        style="'float: left;color:#fff;background:#339966"
+                                                        type=""
+                                                        icon=""
+                                                        circle
+                                                    >
+                                                        5级
+                                                    </el-tag>
+                                                    <el-tag
+                                                        size="mini"
+                                                        v-if="
+                                                            4 < item1.data && item1.data < 4.5 && item1.data !== 3.14159
+                                                        "
+                                                        style="'float: left;color:#fff;background:#3399FF"
+                                                        type=""
+                                                        icon=""
+                                                        circle
+                                                    >
+                                                        4级
+                                                    </el-tag>
+                                                    <el-tag
+                                                        size="mini"
+                                                        v-if="
+                                                            3 < item1.data && item1.data <= 4 && item1.data !== 3.14159
+                                                        "
+                                                        style="'float: left;color:#fff;background:#FFCC33"
+                                                        type=""
+                                                        icon=""
+                                                        circle
+                                                    >
+                                                        3级
+                                                    </el-tag>
+                                                    <el-tag
+                                                        size="mini"
+                                                        v-if="
+                                                            2 < item1.data && item1.data <= 3 && item1.data !== 3.14159
+                                                        "
+                                                        style="'float: left;color:#fff;background:#FF9900"
+                                                        type=""
+                                                        icon=""
+                                                        circle
+                                                    >
+                                                        2级
+                                                    </el-tag>
+                                                    <el-tag
+                                                        size="mini"
+                                                        v-if="
+                                                            1 <= item1.data && item1.data <= 2 && item1.data !== 3.14159
+                                                        "
+                                                        style="'float: left;color:#fff;background:#CC0000"
+                                                        type=""
+                                                        icon=""
+                                                        circle
+                                                    >
+                                                        1级
+                                                    </el-tag>
+                                                    <span
+                                                        style="
+                                                            line-height: 0.6rem;
+                                                            color: #000;
+                                                            font-weight: bold;
+                                                            margin-left: 2%;
+                                                            font-size: 12px;
+                                                        "
+                                                    >
+                                                        <el-tooltip
+                                                            class="item"
+                                                            effect="light"
+                                                            :content="item1.name"
+                                                            :open-delay="500"
+                                                            popper-class="atooltip"
+                                                            placement="bottom-start"
+                                                            :visible-arrow="false"
+                                                        >
+                                                            <el-button
+                                                                class="h3"
+                                                                size="mini"
+                                                                type="text"
+                                                                style="color: #000; font-weight: bold"
+                                                            >
+                                                                {{ item1.name.substr(0, 6) }}
+                                                            </el-button>
+                                                        </el-tooltip>
+                                                    </span>
+                                                </div>
+                                            </el-col>
+                                        </div>
+                                    </el-card>
+                                </el-col>
+                            </el-row>
+                        </div>
+                    </el-col>
+                    <el-col :span="12">
+                        <el-row>
+                            <el-col :span="24" id="pgcshi" :style="`height:${vhh};overflow: hidden;`">
+                                <qypower :xdata="xdata" :ydata="ydata" :title="title" ref="child"></qypower>
+                            </el-col>
+                            <el-col :span="24">
+                                <el-table
+                                    stripe
+                                    :data="tableData"
+                                    border
+                                    class="xshou mt10"
+                                    highlight-current-row
+                                    header-cell-class-name="table_header"
+                                    :header-cell-style="{
+                                        height: '25px',
+                                        padding: '0px'
+                                    }"
+                                    :row-style="{ height: '28px' }"
+                                    :cell-style="{ padding: '0px' }"
+                                    :height="vvh"
+                                >
+                                    <el-table-column align="center" prop="name" label="名称"></el-table-column>
+                                    <el-table-column sortable align="center" prop="data" label="综合评估值">
+                                        <template slot-scope="scope">
+                                            <span v-if="scope.row.data == 3.14159" type="primary" size="small">
+                                                暂无数据
+                                            </span>
+                                            <span
+                                                v-if="scope.row.data !== 3.14159 && scope.row.data !== 0"
+                                                type="primary"
+                                                size="small"
+                                            >
+                                                {{ scope.row.data }}
+                                            </span>
+                                            <span v-if="scope.row.data == 0" type="primary" size="small">/</span>
+                                        </template>
+                                    </el-table-column>
+                                    <el-table-column
+                                        align="center"
+                                        prop="monitors"
+                                        label="监测点个数(个)"
+                                        sortable
+                                    ></el-table-column>
+                                    <el-table-column
+                                        align="center"
+                                        prop="level"
+                                        label="评估等级"
+                                        sortable
+                                    ></el-table-column>
+                                </el-table>
+                            </el-col>
+                        </el-row>
+                    </el-col>
+                </el-row>
+
+                <!--变电站-->
+                <el-dialog
+                    :close-on-click-modal="false"
+                    :title="stationNmae + '详情'"
+                    width="70%"
+                    :visible.sync="dialogTableVisible"
+                >
+                    <el-table
+                        stripe
+                        :data="stationData"
+                        border
+                        height="60vh"
+                        v-loading="konzhi"
+                        element-loading-text="数据加载中"
+                        style="width: 100%"
+                    >
+                        <el-table-column align="center" property="name" label="名称"></el-table-column>
+                        <el-table-column
+                            align="center"
+                            property="voltageLevel"
+                            v-if="flag"
+                            :label="zdname"
+                        ></el-table-column>
+                        <el-table-column align="center" property="data" :label="changeName">
+                            <template slot-scope="scope">
+                                <span v-if="scope.row.data == -1" type="primary" size="small">暂无数据</span>
+                                <span v-if="scope.row.data !== -1" type="primary" size="small">
+                                    {{ scope.row.data }}
+                                </span>
+                            </template>
+                        </el-table-column>
+                        <el-table-column align="center" property="data" label="评估">
+                            <template slot-scope="scope">
+                                <span v-if="scope.row.data == -1" type="primary" size="small">暂无评估</span>
+                                <span v-if="0 <= scope.row.data && scope.row.data < 1" type="primary" size="small">
+                                    无污染
+                                </span>
+                                <span v-if="1 <= scope.row.data && scope.row.data < 1.2" type="success" size="small">
+                                    轻微污染
+                                </span>
+                                <span v-if="1.2 <= scope.row.data && scope.row.data < 1.6" type="primary" size="small">
+                                    轻度污染
+                                </span>
+                                <span v-if="1.6 <= scope.row.data && scope.row.data < 2" type="success" size="small">
+                                    中度污染
+                                </span>
+                                <span v-if="2 <= scope.row.data && scope.row.data" type="primary" size="small">
+                                    重度污染
+                                </span>
+                            </template>
+                        </el-table-column>
+                    </el-table>
+                </el-dialog>
+                <!--监测点-->
+                <el-dialog
+                    :close-on-click-modal="false"
+                    :title="lineName + '所属监测点详情'"
+                    width="70%"
+                    :visible.sync="dialogTableVisible1"
+                >
+                    <el-table
+                        stripe
+                        :data="lineData"
+                        v-loading="konzhi"
+                        element-loading-text="拼命加载中"
+                        border
+                        height="60vh"
+                        style="width: 100%"
+                    >
+                        <el-table-column align="center" property="name" label="名称"></el-table-column>
+                        <el-table-column align="center" property="powerCompany" label="供电公司"></el-table-column>
+                        <el-table-column
+                            align="center"
+                            property="substation"
+                            label="变电站"
+                            :show-overflow-tooltip="true"
+                        ></el-table-column>
+                        <el-table-column align="center" property="busBar" label="母线"></el-table-column>
+                        <el-table-column align="center" property="data" :label="changeName">
+                            <template slot-scope="scope">
+                                <span v-if="scope.row.data == -1" type="primary" size="small">暂无数据</span>
+                                <span v-if="scope.row.data !== -1" type="primary" size="small">
+                                    {{ scope.row.data }}
+                                </span>
+                            </template>
+                        </el-table-column>
+                        <el-table-column align="center" property="data" label="评估">
+                            <template slot-scope="scope">
+                                <span v-if="scope.row.data == -1" type="primary" size="small">暂无评估</span>
+                                <span v-if="0 <= scope.row.data && scope.row.data < 1" type="primary" size="small">
+                                    无污染
+                                </span>
+                                <span v-if="1 <= scope.row.data && scope.row.data < 1.2" type="success" size="small">
+                                    轻微污染
+                                </span>
+                                <span v-if="1.2 <= scope.row.data && scope.row.data < 1.6" type="primary" size="small">
+                                    轻度污染
+                                </span>
+                                <span v-if="1.6 <= scope.row.data && scope.row.data < 2" type="success" size="small">
+                                    中度污染
+                                </span>
+                                <span v-if="2 <= scope.row.data && scope.row.data" type="primary" size="small">
+                                    重度污染
+                                </span>
+                            </template>
+                        </el-table-column>
+                    </el-table>
+                </el-dialog>
+                <!--排名前十监测点-->
+                <el-dialog
+                    :close-on-click-modal="false"
+                    title="排名前10的监测点"
+                    width="70%"
+                    :visible.sync="dialogTableVisible2"
+                >
+                    <div id="tenlineechart" :style="'width:100%;height:calc(100vh - 400px);zoom:' + device"></div>
+                </el-dialog>
+            </el-col>
+        </el-row>
+    </div>
+</template>
+<script>
+import api from '../../../api/integraliy/integraliy'
+import api1 from '@/api/pollution/pollution'
+import { mapActions } from 'vuex'
+import store from '@/store'
+import defaultSettings from '@/settings'
+import { dicData } from '../../../assets/commjs/dictypeData'
+import timepicker from '../../components/TimePicker/index4'
+import qypower from '../../components/echarts/qypower'
+
+import { color } from 'echarts'
+export default {
+    name: 'qualityestimate',
+    components: {
+        timepicker,
+        qypower
+    },
+    computed: {
+        settings() {
+            return this.$store.state.settings
+        }
+        // ...mapActions({
+        //   changeSetting: 'settings/changeSetting'
+        // }),
+    },
+    watch: {},
+    data() {
+        return {
+            color: window.localStorage.CUSTOM_SETTINGS.themeColor,
+            h: undefined,
+            vh: null,
+            vhh: null,
+            vvh: null,
+            tvh: '',
+            zoom: '',
+            loading: true,
+            echartsheight: undefined,
+            tenheight: undefined,
+            konzhi: true,
+            pickerOptions: {
+                shortcuts: [
+                    {
+                        text: '最近一周',
+                        onClick(picker) {
+                            const end = new Date()
+                            const start = new Date()
+                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
+                            picker.$emit('pick', [start, end])
+                        }
+                    },
+                    {
+                        text: '最近一个月',
+                        onClick(picker) {
+                            const end = new Date()
+                            const start = new Date()
+                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
+                            picker.$emit('pick', [start, end])
+                        }
+                    },
+                    {
+                        text: '最近三个月',
+                        onClick(picker) {
+                            const end = new Date()
+                            const start = new Date()
+                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
+                            picker.$emit('pick', [start, end])
+                        }
+                    }
+                ]
+            },
+            timevalue: [],
+            zdname: '',
+            Indextype: undefined,
+            interval: 3,
+            stationData: [],
+            lineData: [],
+            //  tenlineData:[],
+            dialogTableVisible: false,
+            dialogTableVisible1: false,
+            dialogTableVisible2: false,
+            path: '/harmonic-boot/qydetailedAnalysis/pollutionqy',
+            name: 'wtzhpg',
+            asideheight: undefined,
+            rightheight: undefined,
+            tableheight: undefined,
+            changeName: '谐波电压(%)',
+            voltage: 0,
+            voltageoption: [],
+            fanwei: 0,
+            fanweioption: [],
+            copent: 0,
+            copentoption: [],
+            id: 1,
+            title: '部门',
+            xdata: [],
+            ydata: [],
+            dataList: [],
+            activeName: 'tab1',
+            panindexOptions: [],
+            classvalue: '',
+            classificationData: [],
+            flag: false,
+            stationNmae: '',
+            lineName: '',
+            formData: {
+                deptIndex: '',
+                id: '',
+                //loadType:null,
+                //manufacturer:null,
+                monitorFlag: 2,
+                powerFlag: 2,
+                //scale:null,
+                searchBeginTime: '',
+                searchEndTime: '',
+                //serverName:'',
+                statisticalType: {}
+            },
+            device: 1,
+            listcard: [],
+            tableData: [],
+            eachartfalg: false,
+            xdata1: [],
+            ydata1: []
+        }
+    },
+    created() {
+        var data = window.sessionStorage.getItem('Info')
+        data = eval('(' + data + ')')
+        this.formData.deptIndex = data.deptId
+    },
+    mounted() {
+        this.setHeight()
+        window.addEventListener('resize', this.setHeight)
+        this.querfromdata()
+    },
+    methods: {
+        ...mapActions({
+            changeSetting: 'settings/changeSetting'
+        }),
+        setHeight() {
+            this.vh = window.sessionStorage.getItem('appheight') - 80 + 'px'
+            this.vvh = window.sessionStorage.getItem('appheight') / 2 - 25 + 'px'
+            this.vhh = (window.sessionStorage.getItem('appheight') - 80) / 2 + 'px'
+            if (this.myChartes) {
+                this.myChartes.resize()
+            }
+        },
+        //切换指标类型
+        //字典获取数据指标类型
+        getIndexType() {
+            var code = 'Indicator_Type'
+            this.classificationData = dicData(code, ['PLPC', 'DYPC', 'SXDYBPHD', 'CSSB', 'FXDL', 'JXBDY'])
+            this.formData.statisticalType = this.classificationData[0]
+        },
+
+        //时间格式转化
+        dateFormat(dateData1, dateData2) {
+            var timearr = []
+            var date = new Date(dateData1)
+            var y = date.getFullYear()
+            var m = date.getMonth() + 1
+            m = m < 10 ? '0' + m : m
+            var d = date.getDate()
+            d = d < 10 ? '0' + d : d
+            var h = date.getHours()
+            h = h < 10 ? '0' + h : h
+            var f = date.getMinutes()
+            f = f < 10 ? '0' + f : f
+            var s = date.getSeconds()
+            s = s < 10 ? '0' + s : s
+            this.formData.searchBeginTime = y + '-' + m + '-' + d
+            timearr.push(this.formData.searchBeginTime)
+            var date = new Date(dateData2)
+            var y = date.getFullYear()
+            var m = date.getMonth() + 1
+            m = m < 10 ? '0' + m : m
+            var d = date.getDate()
+            d = d < 10 ? '0' + d : d
+            var h = date.getHours()
+            h = h < 10 ? '0' + h : h
+            var f = date.getMinutes()
+            f = f < 10 ? '0' + f : f
+            var s = date.getSeconds()
+            s = s < 10 ? '0' + s : s
+            this.formData.searchEndTime = y + '-' + m + '-' + d
+            timearr.push(this.formData.searchEndTime)
+            return timearr
+        },
+        //查询触发//获取部门变电站数据
+        querfromdata() {
+            this.interval = this.$refs.timepg.intervald
+            if (this.$refs.timepg.intervald == 3) {
+                let timedate = this.$refs.timepg.timeValue[1]
+                let timedate1 = timedate.split('-')
+                if (timedate1[2] == '01' || timedate1[2] == '02' || timedate1[2] == '03') {
+                    let strTime = this.$refs.timepg.timeValue[0]
+                    let strTime1 = this.$refs.timepg.timeValue[1]
+                    let str1 = strTime.split('-')
+                    let str2 = strTime1.split('-')
+                    var now = new Date()
+                    let month = now.getMonth()
+                    if (month == 0) {
+                        month = 12
+                        str1[0] = str1[0] - 1
+                        str2[0] = str2[0] - 1
+                    }
+                    if (month < 10) {
+                        month = '0' + month
+                    }
+                    this.formData.searchBeginTime = str1[0] + '-' + month + '-' + str1[2]
+                    if (
+                        month == 1 ||
+                        month == 3 ||
+                        month == 5 ||
+                        month == 7 ||
+                        month == 8 ||
+                        month == 10 ||
+                        month == 12
+                    ) {
+                        this.formData.searchEndTime = str2[0] + '-' + month + '-31'
+                    } else {
+                        this.formData.searchEndTime = str2[0] + '-' + month + '-30'
+                    }
+                } else {
+                    this.formData.searchBeginTime = this.$refs.timepg.timeValue[0]
+                    this.formData.searchEndTime = this.$refs.timepg.timeValue[1]
+                }
+            } else if (this.$refs.timepg.intervald == 4) {
+                let timedate = this.$refs.timepg.timeValue[1]
+                let timedate1 = timedate.split('-')
+                if (timedate1[2] == '01' || timedate1[2] == '02' || timedate1[2] == '03') {
+                    // 获取前七天的日期
+                    var previousDates = []
+                    for (var i = 6; i >= 0; i--) {
+                        //var previousDate = new Date(currentDate);
+                        let strTime = this.$refs.timepg.timeValue[0]
+                        var currentDate = new Date(strTime)
+                        let previousDate = new Date(Date.parse(strTime.replace(/-/g, '/')))
+                        previousDate.setDate(currentDate.getDate() - i)
+                        previousDates.push(previousDate)
+                    }
+                    // 格式化日期
+                    var formattedDates = previousDates.map(function (date) {
+                        var year = date.getFullYear()
+                        var month = (date.getMonth() + 1).toString().padStart(2, '0')
+                        var day = date.getDate().toString().padStart(2, '0')
+
+                        let d = year + '-' + month + '-' + day
+                        // console.log("+++++++++++",d)
+                        // 输出前七天的日期数组
+                        return d
+                    })
+                    this.formData.searchBeginTime = formattedDates[0]
+                    this.formData.searchEndTime = formattedDates[formattedDates.length - 1]
+                    //console.log(formattedDates);
+                } else {
+                    this.formData.searchBeginTime = this.$refs.timepg.timeValue[0]
+                    this.formData.searchEndTime = this.$refs.timepg.timeValue[1]
+                }
+            } else if (this.$refs.timepg.intervald == 5) {
+                let timedate = this.$refs.timepg.timeValue[1]
+                let timedate1 = timedate.split('-')
+                if (timedate1[2] == '01' || timedate1[2] == '02' || timedate1[2] == '03') {
+                    let strTime = this.$refs.timepg.timeValue[0]
+                    let currentDate = new Date(Date.parse(strTime.replace(/-/g, '/')))
+                    // console.log('当前日期（中国标准时间）：', currentDate);
+                    //  console.log("++++",currentDate)
+
+                    // 向前推一天
+                    currentDate.setDate(currentDate.getDate() - 1)
+
+                    // 格式化日期字符串
+                    const formatDate = date => {
+                        const year = date.getFullYear()
+                        const month = String(date.getMonth() + 1).padStart(2, '0')
+                        const day = String(date.getDate()).padStart(2, '0')
+                        return `${year}-${month}-${day}`
+                    }
+                    let strTime2 = this.$refs.timepg.timeValue[1]
+                    let currentDate2 = new Date(Date.parse(strTime2.replace(/-/g, '/')))
+                    // console.log('当前日期（中国标准时间）：', currentDate);
+                    //  console.log("++++",currentDate)
+
+                    // 向前推一天
+                    currentDate.setDate(currentDate.getDate() - 1)
+
+                    // 格式化日期字符串
+                    const formatDate2 = date => {
+                        const year = date.getFullYear()
+                        const month = String(date.getMonth() + 1).padStart(2, '0')
+                        const day = String(date.getDate()).padStart(2, '0')
+                        return `${year}-${month}-${day}`
+                    }
+                    // console.log('当前日期：', formatDate(new Date())); // 当前日期
+                    //  console.log('向前推一天：', formatDate(currentDate)); // 一天前的日期
+                    this.formData.searchBeginTime = formatDate(currentDate)
+                    this.formData.searchEndTime = formatDate(currentDate2)
+                } else {
+                    this.formData.searchBeginTime = this.$refs.timepg.timeValue[0]
+                    this.formData.searchEndTime = this.$refs.timepg.timeValue[1]
+                }
+
+                //let estr = this.$refs.fff.timeValue[1]
+            } else {
+                this.formData.searchBeginTime = this.$refs.timepg.timeValue[0]
+                this.formData.searchEndTime = this.$refs.timepg.timeValue[1]
+            }
+
+            this.konzhi = true
+            this.tableData = []
+            // this.timeValue = this.$refs.timepg.timeValue;
+            // this.dateFormat(this.timeValue[0], this.timeValue[1]);
+
+            var data = window.sessionStorage.getItem('Info')
+            data = eval('(' + data + ')')
+            this.formData.deptIndex = data.deptId
+            //this.eachartfalg = false
+            //this.formData.type = this.Indextype
+            api.getComAccessData(this.formData).then(res => {
+                if (res.code == 'A0000') {
+                    this.listcard = res.data
+                    this.tableData = res.data
+                    this.konzhi = false
+                    var xarr = []
+                    var yarr = []
+                    res.data.forEach(element => {
+                        let name = element.name + '\n(' + element.monitors + ')'
+                        xarr.push(name)
+
+                        yarr.push(element.data)
+                    })
+                    this.xdata = xarr
+
+                    for (var i = 0; i < yarr.length; i++) {
+                        if (yarr[i] == 3.14159 || yarr[i] == 0) {
+                            yarr[i] = 0.2
+                        }
+                    }
+                    this.ydata = yarr
+
+                    // this.eachartfalg = true
+                }
+                this.$nextTick(() => {
+                    this.$refs.child.evaluation()
+                })
+            })
+
+            //alert('父组件条件查询触发方法'+ data)
+        },
+        handleClick(tab, event) {}
+    }
+}
+</script>
+<style lang="less" scoped>
+@import url('../../../styles/comStyle.less');
+::v-deep .el-card__header {
+    padding: 0px 0px;
+    border-bottom: 1px solid #ebeef5;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+}
+.wr {
+    margin-left: 0%;
+    font-weight: bold;
+    font-size: 14px;
+}
+.zd {
+    background: #cc0000;
+    color: #fff;
+}
+.zzd {
+    background: #ff9900;
+    color: #fff;
+}
+.qd {
+    background: #ffcc33;
+    color: #fff;
+}
+.qw {
+    background: #3399ff;
+    color: #fff;
+}
+.wd {
+    background: #339966;
+    color: #fff;
+}
+.ws {
+    background: #999999;
+    color: #fff;
+}
+
+.main {
+    overflow: hidden;
+}
+.conent {
+}
+.qwe {
+    margin-top: 5px;
+}
+.bg-purple-dark {
+    background: #d3dce6;
+}
+.bg-purple {
+    background: #d3dce6;
+}
+.grid-content {
+    border-radius: 4px;
+    min-height: 36px;
+}
+
+.el-card__header {
+    padding: 0px 0px;
+    border-bottom: 1px solid #ebeef5;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+}
+
+::-webkit-scrollbar {
+    display: block;
+    width: 8px !important;
+    height: 14px;
+}
+</style>
+<style lang="less" scoped>
+::v-deep .el-table__body-wrapper::-webkit-scrollbar-track {
+    background-color: #79878769;
+}
+::v-deep .el-tabs--border-card > .el-tabs__content {
+    padding: 10px;
+}
+.is-leaf {
+    visibility: hidden !important;
+}
+</style>
+<style></style>
diff --git a/src/views/pqs/harmonicMonitoring/area/steadystate.vue b/src/views/pqs/harmonicMonitoring/area/steadystate.vue
new file mode 100644
index 00000000..566e7b25
--- /dev/null
+++ b/src/views/pqs/harmonicMonitoring/area/steadystate.vue
@@ -0,0 +1,671 @@
+<template>
+    <div class="pd10" v-loading="loading" element-loading-text="数据加载中">
+        <el-form :inline="true" :model="formInline" class="demo-form-inline">
+            <!-- <div style="display: flex;"> -->
+            <el-form-item v-if="this.quyunames != undefined">
+                <el-switch
+                    class="tableScopeSwitch"
+                    :active-value="2"
+                    :inactive-value="1"
+                    @change="handleStatusChange"
+                    :active-text="quyuname"
+                    :inactive-text="quyunames"
+                    inactive-color="#007878"
+                    active-color="#666666"
+                    v-model="this.formData.monitorFlag"
+                ></el-switch>
+            </el-form-item>
+
+            <el-form-item>
+                <timepicker
+                    :id="id"
+                    ref="timewt"
+                    :interval="interval"
+                    :treenode="treenode"
+                    :tablename="tablename"
+                    :name="name"
+                    :path="path"
+                    :dataTree="dataTree"
+                ></timepicker>
+            </el-form-item>
+            <el-form-item>
+                <el-button @click="querfromdata" type="primary" icon="el-icon-search">查询</el-button>
+            </el-form-item>
+            <el-form-item>
+                <el-button type="text" @click="closeHandle">
+                    条件筛选
+                    <i :class="!view ? 'el-icon-arrow-down' : 'el-icon-arrow-right'"></i>
+                </el-button>
+            </el-form-item>
+        </el-form>
+        <div class="container" id="container">
+            <i @click="closeHandle" class="el-icon-circle-close coles"></i>
+            <el-form :inline="true" :model="formData" label-width="90px" class="">
+                <el-form-item label="统计类型:">
+                    <el-select
+                        v-model="formData.statisticalType"
+                        @change="changeclasss"
+                        placeholder="请选择统计类型"
+                        style="width: 100%"
+                    >
+                        <el-option
+                            v-for="item in classificationData"
+                            :key="item.id"
+                            :label="item.name"
+                            :value="{
+                                label: item.name,
+                                value: item.id,
+                                name: item.name,
+                                id: item.id,
+                                code: item.code,
+                                sort: item.sort
+                            }"
+                        ></el-option>
+                    </el-select>
+                </el-form-item>
+                <el-form-item label="区域选择:">
+                    <el-select ref="selet1" v-model="deptName" placeholder="请选择所属部门区域" style="width: 100%">
+                        <el-option :value="deptIndex" style="height: auto">
+                            <el-tree
+                                ref="tree"
+                                :data="treeData"
+                                node-key="id"
+                                accordion
+                                :default-expanded-keys="idArr"
+                                :props="defaultProps"
+                                @node-click="handleNodeClick"
+                            >
+                                <span class="span-ellipsis" slot-scope="{ node, data }">
+                                    <span :title="data.name">{{ data.name }}</span>
+                                </span>
+                            </el-tree>
+                        </el-option>
+                    </el-select>
+                </el-form-item>
+                <el-form-item label="电压等级:">
+                    <el-select
+                        v-model="formData.scale"
+                        multiple
+                        collapse-tags
+                        clearable
+                        placeholder="请选择电压等级"
+                        style="width: 100%"
+                    >
+                        <el-option
+                            v-for="item in voltageleveloption"
+                            :key="item.id"
+                            :label="item.name"
+                            :value="{
+                                label: item.name,
+                                value: item.id,
+                                code: item.code,
+                                name: item.name,
+                                id: item.id,
+                                sort: item.sort
+                            }"
+                        ></el-option>
+                    </el-select>
+                </el-form-item>
+                <el-form-item label="终端厂家:">
+                    <el-select
+                        v-model="formData.manufacturer"
+                        multiple
+                        collapse-tags
+                        clearable
+                        placeholder="请选择终端厂家"
+                        style="width: 100%"
+                    >
+                        <el-option
+                            v-for="item in terminaloption"
+                            :key="item.id"
+                            :label="item.name"
+                            :value="{
+                                label: item.name,
+                                value: item.id,
+                                code: item.code,
+                                name: item.name,
+                                id: item.id,
+                                sort: item.sort
+                            }"
+                        ></el-option>
+                    </el-select>
+                </el-form-item>
+                <el-form-item label="干扰源类型:">
+                    <el-select
+                        v-model="formData.loadType"
+                        multiple
+                        collapse-tags
+                        clearable
+                        placeholder="请选择干扰源类型"
+                        style="width: 100%"
+                    >
+                        <el-option
+                            v-for="item in interfereoption"
+                            :key="item.id"
+                            :label="item.name"
+                            :value="{
+                                label: item.name,
+                                value: item.id,
+                                code: item.code,
+                                name: item.name,
+                                id: item.id,
+                                sort: item.sort
+                            }"
+                        ></el-option>
+                    </el-select>
+                </el-form-item>
+            </el-form>
+        </div>
+
+        <el-row :gutter="20">
+            <el-col :span="24">
+                <el-tabs :style="'height:' + vh" type="border-card" v-model="activeName" @tab-click="handleClick">
+                    <el-tab-pane :lazy="false" label="稳态指标符合性占比表格" name="tab1">
+                        <steadystatetable
+                            :classvalue="classt"
+                            :tableData="tableData"
+                            :loading="loading"
+                        ></steadystatetable>
+                    </el-tab-pane>
+                    <el-tab-pane :lazy="false" label="稳态指标符合性占比图表" name="tab2">
+                        <steadystateechart
+                            ref="wtcbzb"
+                            v-show="eacjartflag && activeName == 'tab2'"
+                            :loading="loading"
+                            :title="title"
+                            :classvalue="classt"
+                            :xdata="xdata"
+                            :ydata="ydata"
+                            :valueData="valueData"
+                        ></steadystateechart>
+                    </el-tab-pane>
+                </el-tabs>
+            </el-col>
+        </el-row>
+    </div>
+</template>
+<script>
+import api1 from '@/api/pollution/pollution'
+import { dicData } from '../../../assets/commjs/dictypeData'
+import api from '../../../api/integraliy/integraliy'
+import timepicker from '../../components/TimePicker/index4'
+import steadystatetable from '../../components/steadystatetable'
+import steadystateechart from '../../components/echarts/steadystateechart'
+export default {
+    name: 'exceedingstandards',
+    components: {
+        timepicker,
+        steadystatetable,
+        steadystateechart
+    },
+    watch: {},
+    computed: {},
+    data() {
+        return {
+            cu: '',
+            quyuname: undefined,
+            quyunames: undefined,
+            timeValue: [],
+            dd: false,
+            formInline: {},
+            view: false,
+            xdata: [],
+            ydata1: [],
+            ydata8: [],
+            classt: 'Power_Network',
+            tablename: 'tab1',
+            eacjartflag: true,
+            interval: 3,
+            falg: true,
+            treeData: [],
+            idArr: [],
+            defaultProps: {
+                children: 'children',
+                label: 'name'
+            },
+            deptName: '',
+            deptIndex: '',
+            name: 'sjwzx',
+            path: '/harmonic-boot/harmonic/getIntegrityData',
+            asideheight: undefined,
+            id: 1,
+            title: '电网拓扑',
+            xdata: [],
+            ydata: [],
+            centerdata: [],
+            valueData: [],
+            ydata1: [],
+            classvalue: 0,
+            activeName: 'tab1',
+            treenode: '',
+            dataTree: '',
+            voltageleve1: '',
+            //电压等级
+            voltageleveloption: [],
+            terminal: '',
+            terminaloption: [],
+            interfere: '',
+            interfereoption: [],
+            classificationData: [],
+            dictypeData: undefined,
+            deptIndex: '',
+            formData: {
+                //后面需要修改
+                deptIndex: '',
+                monitorFlag: 2,
+                powerFlag: 2,
+                loadType: [],
+                manufacturer: [],
+                searchBeginTime: '',
+                searchEndTime: '',
+                statisticalType: '',
+                scale: [],
+                timeFlag: 1
+            },
+            periodBeginTime: '',
+            periodEndTime: '',
+            timehuanbiValue: [],
+            tableData: [],
+            ping: '',
+            time: '',
+            loading: true
+        }
+    },
+    created() {
+        this.setHeight()
+        window.addEventListener('resize', this.setHeight)
+
+        let data = window.sessionStorage.getItem('sysData')
+        let yudata = eval('(' + data + ')')
+        let str = yudata.dataReport.split('，')
+        this.quyuname = str[0]
+        this.quyunames = str[1]
+        var info = window.sessionStorage.getItem('Info')
+        info = eval('(' + info + ')')
+        this.formData.deptIndex = info.deptId
+        this.getAreaDept()
+        this.getclassificationData()
+        this.getVoltage()
+        this.getManufacturer()
+        this.getLoadType()
+    },
+    mounted() {
+        this.querfromdata()
+    },
+    beforeDestroy() {
+        window.removeEventListener('resize', this.setHeight)
+    },
+    methods: {
+        setHeight() {
+            this.vh = window.sessionStorage.getItem('appheight') - 55 + 'px'
+        },
+        timechange() {
+            this.dd = true
+        },
+        closeHandle() {
+            if (this.view) {
+                this.view = false
+            } else {
+                this.view = true
+            }
+            //console.log('关闭和展开');
+            const dom = document.getElementById('container')
+            const closeDom = document.getElementsByClassName('close')[0]
+            if (!dom.className.match(/(?:^|\s)expend(?!\S)/)) {
+                dom.className = 'container expend'
+            } else {
+                dom.className = 'container close-container'
+            }
+        },
+        //切换统计类型
+        changeclasss(val) {
+            this.cu = val.code
+        },
+        //时间格式转化
+        dateFormat(dateData1, dateData2) {
+            var timearr = []
+            var date = new Date(dateData1)
+            var y = date.getFullYear()
+            var m = date.getMonth() + 1
+            m = m < 10 ? '0' + m : m
+            var d = date.getDate()
+            d = d < 10 ? '0' + d : d
+            var h = date.getHours()
+            h = h < 10 ? '0' + h : h
+            var f = date.getMinutes()
+            f = f < 10 ? '0' + f : f
+            var s = date.getSeconds()
+            s = s < 10 ? '0' + s : s
+            this.formData.searchBeginTime = y + '-' + m + '-' + d
+            timearr.push(this.formData.startTime)
+            var date = new Date(dateData2)
+            var y = date.getFullYear()
+            var m = date.getMonth() + 1
+            m = m < 10 ? '0' + m : m
+            var d = date.getDate()
+            d = d < 10 ? '0' + d : d
+            var h = date.getHours()
+            h = h < 10 ? '0' + h : h
+            var f = date.getMinutes()
+            f = f < 10 ? '0' + f : f
+            var s = date.getSeconds()
+            s = s < 10 ? '0' + s : s
+            this.formData.searchEndTime = y + '-' + m + '-' + d
+            timearr.push(this.formData.endTime)
+            return timearr
+        },
+        //部门绑定区域触发区域树节点
+        handleNodeClick(data, node) {
+            this.deptName = data.name
+            this.$refs.selet1.blur()
+            this.deptId = data.id
+            this.formData.deptIndex = data.id
+        },
+        formatDate(date) {
+            date = new Date(Date.parse(date.replace(/-/g, '/'))) //转换成Data();
+
+            var y = date.getFullYear()
+
+            var m = date.getMonth() + 1
+            m = m < 10 ? '0' + m : m
+            var d = date.getDate()
+            d = d < 10 ? '0' + d : d
+            return y + '-' + m + '-' + d
+        },
+        //2次组件触发事件
+        querfromdata() {
+            this.classt = this.cu
+            this.dd = false
+            this.interval = this.$refs.timewt.intervald
+            if (this.interval == 1 || this.interval == 2) {
+                this.formData.timeFlag = 0
+            } else if (this.interval == 3 || this.interval == 4 || this.interval == 5) {
+                this.formData.timeFlag = 1
+            }
+            this.loading = true
+            this.timeValue = this.$refs.timewt.timeValue
+            // this.timehuanbiValue = timehbValue;
+            // this.periodBeginTime = this.timehuanbiValue[0];
+            // this.periodEndTime = this.timehuanbiValue[1];
+            // this.ping = this.periodBeginTime + "至" + this.periodEndTime;
+            this.dateFormat(this.timeValue[0], this.timeValue[1])
+            this.time = this.formData.searchBeginTime + '至' + this.formData.searchEndTime
+            api.getSteadyExceedRateData(this.formData).then(res => {
+                if (res.code == 'A0000') {
+                    if (res.data.length == 0) {
+                        this.tableData = []
+                    } else {
+                        if (
+                            res.data[0].children[0].children[0].children[0].children !== [] &&
+                            res.data[0].children[0].children[0].children[0].children !== null
+                        ) {
+                            res.data.forEach(m => {
+                                m.id = this.guid()
+                                m.children.forEach(n => {
+                                    n.id = this.guid()
+                                    n.children.forEach(d => {
+                                        d.id = this.guid()
+                                        d.children.forEach(p => {
+                                            p.id = this.guid()
+                                            p.children.forEach(h => {
+                                                h.id = this.guid()
+                                            })
+                                        })
+                                    })
+                                })
+                            })
+                        } else {
+                            res.data.forEach(m => {
+                                m.id = this.guid()
+                                m.children.forEach(n => {
+                                    n.id = this.guid()
+                                    n.children.forEach(d => {
+                                        d.id = this.guid()
+                                        d.children.forEach(p => {
+                                            p.id = this.guid()
+                                        })
+                                    })
+                                })
+                            })
+                        }
+                        this.tableData = res.data
+                    }
+                    this.gettubiao()
+                }
+            })
+        },
+        gettubiao() {
+            var data = {
+                deptIndex: this.formData.deptIndex,
+                loadType: this.formData.loadType,
+                monitorFlag: this.formData.monitorFlag,
+                manufacturer: this.formData.manufacturer,
+                searchBeginTime: this.formData.searchBeginTime,
+                searchEndTime: this.formData.searchEndTime,
+                statisticalType: this.formData.statisticalType,
+                powerFlag: this.formData.powerFlag,
+                scale: this.formData.scale,
+                periodBeginTime: this.periodBeginTime,
+                periodEndTime: this.periodEndTime,
+                timeFlag: this.formData.timeFlag
+            }
+            this.ydata = []
+            this.ydata1 = []
+            api.getSteadyExceedRateCensus(data).then(res => {
+                this.eacjartflag = true
+                if (res.code == 'A0000') {
+                    var ydata = res.data.type
+                    this.ydata = ydata
+                    //this.ydata = ['江苏省', '浙江省', '福建省','江西省', '安徽省', '河北省', '海南省','上海市']
+                    // var xdata = res.data.time;
+                    let time = res.data.time
+                    for (var i = 0; i < time.length; i++) {
+                        if (i != 0) {
+                            i
+                            time[i] = time[i].slice(5)
+                        } else if (i == 0) {
+                            let date = time[i].slice(5)
+                            let t = time[i].slice(0, 4)
+                            time[i] = date + '\n' + '(' + t + ')'
+                        }
+                    }
+                    this.xdata = time
+
+                    // this.xdata = ['1月', '2月', '3月', '4月', '5月', '6月','7月', '8月', '9月','10月','11月','12月']
+                    var data = res.data.steadyExceedRate
+
+                    //  this.centerdata = [[56,28,57,39,60,86,95,''],[36,18,67,59,80,66,95,45],[76,78,47,69,90,56,25,''],[66,88,67,89,90,86,95,80],
+                    //  [96,58,57,39,90,86,95,89],[46,68,87,99,80,76,55,70,''],[26,53,57,59,90,86,85,90],[66,98,77,89,60,66,95,''],
+                    //  [86,68,67,89,90,96,55,90],[56,58,67,89,90,86,65,''],[76,78,67,89,30,66,75,''],[46,88,87,89,90,86,95,17],
+                    //  ]
+                    var arr = []
+                    for (var i = 0; i < data.length; i++) {
+                        for (var j = 0; j < data[i].length; j++) {
+                            if (data[i][j] == 3.14159 || data[i][j] == 0) {
+                                arr.push([i, j, 0])
+                            } else if (data[i][j] == 3.1415) {
+                                arr.push([i, j, '/'])
+                            } else {
+                                arr.push([i, j, data[i][j]])
+                            }
+                        }
+                    }
+                    this.valueData = arr
+                    this.$nextTick(() => {
+                        this.$refs.wtcbzb.steadyqualified()
+                        setTimeout(() => {
+                            this.loading = false
+                        }, 1000)
+                    })
+                }
+            })
+        },
+        //标签切换
+        handleClick(tab, event) {
+            this.tablename = tab.name
+            if (tab.name == 'tab1') {
+                //this.thb = false
+                this.eacjartflag = false
+                this.$nextTick(() => {
+                    this.$refs.wtcbzb.steadyqualified()
+                })
+            } else if (tab.name == 'tab2') {
+                //this.thb = true
+                this.eacjartflag = true
+
+                this.$nextTick(() => {
+                    this.$refs.wtcbzb.steadyqualified()
+                })
+            }
+        },
+        //开关触发
+        handleStatusChange(val) {
+            this.formData.monitorFlag = val
+            //this.fiveTreeData()
+        },
+        //获取区域
+        getAreaDept() {
+            api.getAreaDept().then(res => {
+                if (res.code == 'A0000') {
+                    var data = res.data
+                    this.deptName = res.data[0].name
+                    data.forEach(element => {
+                        this.idArr.push(element.id)
+                    })
+                    this.treeData = data
+                }
+            })
+        },
+        //字典获取数据电压等级
+        getVoltage() {
+            var code = 'Dev_Voltage_Stand'
+            this.voltageleveloption = dicData(code, [])
+            this.formData.scale = this.voltageleveloption
+        },
+        //字典获取数据终端厂家
+        getManufacturer() {
+            var code = 'Dev_Manufacturers'
+            this.terminaloption = dicData(code, [])
+            this.formData.manufacturer = this.terminaloption
+        },
+        //字典获取数据干扰源类型
+        getLoadType() {
+            var code = 'Interference_Source'
+            this.interfereoption = dicData(code, [])
+            this.formData.loadType = this.interfereoption
+        },
+        //获取统计类型
+        getclassificationData() {
+            var code = 'Statistical_Type'
+            this.classificationData = dicData(code, ['Report_Type'])
+            this.formData.statisticalType = this.classificationData[0]
+        },
+
+        //获取数据完整性列表数据
+        getQueryData() {
+            let data = {
+                area: '0',
+                comparison: 0,
+                interference: [],
+                manufacturer: [],
+                searchBeginTime: '',
+                searchEndTime: '',
+                statisticalType: 0,
+                voltageLevel: []
+            }
+        },
+        guid() {
+            return 'xxxxxxxxxxxx4xxxyxxxxxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
+                let r = (Math.random() * 16) | 0,
+                    v = c === 'x' ? r : (r & 0x3) | 0x8
+                return v.toString(16)
+            })
+        },
+        changePageNum(data) {
+            this.pageData.pageNum = data
+            alert('父组件当前页' + this.pageData.pageNum)
+        },
+        changePageSize(data) {
+            this.pageData.pageSize = data
+            alert('父组件当前条数' + this.pageData.pageSize)
+        },
+        rest() {}
+    }
+}
+</script>
+<style lang="less" scoped>
+@import url('../../../styles/comStyle.less');
+// .dhys {
+//   background:rgb(244, 246, 247);
+//   width:36.5%;
+//   height:33px;
+//   position: absolute;
+//   right :0;
+//   z-index: 2000000;}
+// //展示标签时激活
+// .v-enter-active{
+// 		animation: atguigu 0.5s linear;
+// 	}
+// 	//不展示标签时激活
+// 	.v-leave-active{
+// 		animation: atguigu 0.5s linear reverse;
+// 	}
+
+// 	@keyframes atguigu {
+// 		from{
+// 			transform: translateX(-100%);
+// 		}
+// 		to{
+// 			transform: translateX(0px);
+// 		}
+// 	}
+.container {
+    /* margin: auto; */
+    top: 0px;
+    right: 0;
+    width: 40%;
+    height: 0px;
+    z-index: 2000;
+    position: absolute;
+    background-color: #e4e7ebb9;
+    overflow: auto;
+    scroll-behavior: smooth;
+    -radius: 20px;
+}
+/* 隐藏滚动条 */
+::-webkit-scrollbar {
+    display: block;
+}
+.expend {
+    animation: expend ease 5s forwards;
+}
+.close-container {
+    animation: no-expend ease 1s forwards;
+}
+@keyframes expend {
+    from {
+        top: 0px;
+        height: auto;
+    }
+    to {
+        height: auto;
+        top: 0px;
+    }
+}
+@keyframes no-expend {
+    from {
+        height: 10%;
+        top: 0px;
+    }
+    to {
+        top: 0px;
+        height: 0px;
+    }
+}
+.coles {
+    position: absolute;
+    right: 0;
+    font-size: 20px;
+    cursor: pointer;
+}
+</style>
diff --git a/src/views/pqs/harmonicMonitoring/area/terminalonlinerate.vue b/src/views/pqs/harmonicMonitoring/area/terminalonlinerate.vue
new file mode 100644
index 00000000..cb84685a
--- /dev/null
+++ b/src/views/pqs/harmonicMonitoring/area/terminalonlinerate.vue
@@ -0,0 +1,618 @@
+<template>
+  <div class="pd10" v-loading="loading" element-loading-text="数据加载中">
+    <!-- <transition appear>       
+        <div v-show="dd" class="dhys">
+          <timepicker style="right:0;margin-left: -0.5%;"
+            :id="id"
+            @querfromdata="querfromdata"
+            :interval="interval"
+            :treenode="treenode"
+            :tablename="tablename"
+            :name="name"
+            :path="path"
+            :dataTree="dataTree"
+          ></timepicker>      
+        </div>
+          </transition>
+           -->
+        <el-form :inline="true" :model="formInline" class="demo-form-inline">
+          <!-- <div style="display: flex;"> -->
+          
+          <!-- <div style="display: flex;justify-content: space-between;flex-grow:1;"> -->
+          <el-form-item>
+            <timepicker 
+            :id="id" ref="timezd"
+            :interval="interval"
+            :treenode="treenode"
+            :tablename="tablename"
+            :name="name"
+            :path="path"
+            :dataTree="dataTree"
+          ></timepicker>  
+            <!-- <el-button class="el-icon-d-arrow-right"  type="primary" round @click="timechange">时间选择</el-button> -->
+          </el-form-item>
+          <el-form-item>
+              <el-button  @click="querfromdata" type="primary"  icon="el-icon-search" >查询</el-button>
+            </el-form-item> 
+          <el-form-item>
+             <el-button type="text"  @click="closeHandle">条件筛选<i :class="!view?'el-icon-arrow-down':'el-icon-arrow-right'"></i></el-button>
+           </el-form-item>
+
+        <!-- </div>
+          </div> -->
+        </el-form>
+        
+        <div  class='container' id='container'>
+          <i @click="closeHandle" class="el-icon-circle-close coles"></i>
+          <el-form :inline="true" :model="formData" label-width="90px" class="">
+            <el-form-item v-if="this.quyunames != undefined">
+            <el-switch
+              class="tableScopeSwitch"
+              :active-value="2"
+              :inactive-value="1"
+              @change="handleStatusChange"
+              :active-text="quyuname"
+                :inactive-text="quyunames"
+                inactive-color="#007878"
+                active-color="#666666"
+              v-model="this.formData.monitorFlag"
+            >
+          </el-switch>
+          </el-form-item>
+          <el-form-item label="统计类型:">
+            <el-select
+              v-model="formData.statisticalType"
+              @change="changeclasss"
+              placeholder="请选择统计类型"
+              style="width: 100%"
+            >
+              <el-option
+                v-for="item in classificationData"
+                :key="item.id"
+                :label="item.name"
+                :value="{
+                  label: item.name,
+                  value: item.id,
+                  name: item.name,
+                  id: item.id,
+                  code: item.code,
+                  sort: item.sort,
+                }"
+              >
+              </el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="区域选择:">
+            <el-select
+              ref="select1"
+              v-model="deptName"
+              placeholder="请选择所属部门区域"
+              style="width: 100%"
+            >
+              <el-option :value="deptIndex" style="height: auto">
+                <el-tree
+                  ref="tree"
+                  :data="treeData"
+                  node-key="id"
+                  accordion
+                  :default-expanded-keys="idArr"
+                  :props="defaultProps"
+                  @node-click="handleNodeClick"
+                >
+                  <span class="span-ellipsis" slot-scope="{ node, data }">
+                    <span :title="data.name">{{ data.name }}</span>
+                  </span>
+                </el-tree>
+              </el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="终端厂家:" >
+            <el-select
+              v-model="formData.manufacturer"
+              multiple
+              collapse-tags
+              clearable
+              placeholder="请选择终端厂家"
+              style="width: 100%"
+            >
+              <el-option
+                v-for="item in terminaloption"
+                :key="item.id"
+                :label="item.name"
+                :value="{
+                  label: item.name,
+                  value: item.id,
+                  code: item.code,
+                  name: item.name,
+                  id: item.id,
+                  sort: item.sort,
+                }"
+              >
+              </el-option>
+            </el-select>
+          </el-form-item>
+            
+         </el-form>
+          </div>
+     
+      <el-row :gutter="10">
+        <el-col :span="24" style="margin-top: 0%">
+          <el-tabs  :style="'height:'+vh"
+            type="border-card"
+            v-model="activeName"
+            @tab-click="handleClick"
+          >
+            <el-tab-pane label="终端状态统计表" name="tab1">
+              
+              <terminalonlineratetable
+                v-if="activeName == 'tab1'"
+                :classvalue="classt"
+                :tableData="tableData"
+                :loading="loading"
+              ></terminalonlineratetable>
+            </el-tab-pane>
+            <el-tab-pane label="终端状态统计图" name="tab2">
+             
+              <!-- <span style="font-weight: bold;color:#333;position: absolute;right: 100px;top: 25px;"><span>注意:</span><span style="color:#CC0000">{{'在线率<60%'}}红色</span><span style="color:#FFCC33">&nbsp&nbsp&nbsp{{'60%≤在线率<90%'}}黄色</span><span style="color:#339966"> &nbsp&nbsp&nbsp{{ '在线率≥90%' }}绿色</span></span> -->
+              <terminalonlinerateechart 
+                v-show="eacjartflag && activeName == 'tab2'"
+                :loading="loading"
+                :classvalue="classt"
+                :timeValue="time"
+                :timehuanbiValue="ping"
+                :xdata="xdata"
+                :ydata1="ydata1"
+                :ydata2="ydata2"
+                :ydata3="ydata3"
+                :ydata4="ydata4"
+                ref="trem"
+              ></terminalonlinerateechart>
+            </el-tab-pane>
+          </el-tabs>
+        </el-col>
+      </el-row>
+  </div>
+</template>
+<script>
+import api1 from "@/api/pollution/pollution";
+import timepicker from "../../components/TimePicker/index4";
+import { dicData } from "../../../assets/commjs/dictypeData";
+import api from "../../../api/integraliy/integraliy";
+import terminalonlineratetable from "../../components/terminalonlineratetable";
+import terminalonlinerateechart from "../../components/echarts/terminalonlinerateechart";
+export default {
+  name:'terminalstatusstatistics',
+  components: {
+    timepicker,
+    terminalonlineratetable,
+    terminalonlinerateechart,
+  },
+  watch: {},
+  computed: {},
+  data() {
+    return {
+      cu:'',
+      quyuname: undefined,
+      quyunames: undefined,
+      dd:false,
+      formInline: {},
+      loading: true,
+      asideheight: undefined,
+    
+      eacjartflag: false,
+      classt: "Power_Network",
+      tablename: "tab1",
+      deptIndex: "",
+      interval: 3,
+      treeData: [],
+      idArr: [],
+      treenode: "",
+      dataTree: "",
+      name: "sjwzx",
+      path: "/harmonic-boot/harmonic/getIntegrityData",
+      defaultProps: {
+        children: "children",
+        label: "name",
+      },
+      deptName: "",
+      formData: {
+        //后面需要修改
+        deptIndex: "",
+        monitorFlag: 2,
+        powerFlag: 2,
+        loadType: [],
+        manufacturer: [],
+        searchBeginTime: "",
+        searchEndTime: "",
+        statisticalType: "",
+        scale: [],
+      },
+      id: 1,
+      title: "电网拓扑",
+      xdata: [],
+      ydata1: [],
+      ydata2: [],
+      ydata3: [],
+      ydata4: [],
+      classvalue: 0,
+      activeName: "tab1",
+      panindexOptions: [],
+      classificationData: [],
+      voltageleve1: [],
+      terminal: [],
+      interfere: [],
+      voltageleveloption: [],
+      terminaloption: [],
+      interfereoption: [],
+      periodBeginTime: "",
+      periodEndTime: "",
+      timehuanbiValue: [],
+      tableData: [],
+      ping: "",
+      time: "",
+      vh:null,
+      view:false
+    };
+  },
+  created() {
+    this.setHeight()
+        window.addEventListener('resize', this.setHeight)
+   
+   let data = window.sessionStorage.getItem("sysData");
+    let yudata = eval("(" + data + ")");
+    let str = yudata.dataReport.split("，");
+    this.quyuname = str[0];
+    this.quyunames = str[1];
+    var info = window.sessionStorage.getItem("Info");
+    info = eval("(" + info + ")");
+    this.formData.deptIndex = info.deptId;
+    this.getAreaDept();
+    this.getclassificationData();
+    this.getVoltage();
+    this.getManufacturer();
+    this.getLoadType();
+  },
+  mounted() {
+   this.querfromdata()
+    
+  },
+  beforeDestroy() {
+        window.removeEventListener('resize', this.setHeight)
+    },
+  methods: {
+    setHeight() {
+      this.vh = window.sessionStorage.getItem('appheight') -55+'px';
+     
+        },
+    closeHandle(){
+      if(this.view){
+        this.view = false
+      }else{
+        this.view = true
+      }
+      //console.log('关闭和展开');
+            const dom = document.getElementById('container');
+            const closeDom = document.getElementsByClassName('close')[0];
+            if (!dom.className.match(/(?:^|\s)expend(?!\S)/)) {
+                dom.className = "container expend";
+            } else {
+                dom.className = "container close-container";
+            }
+     
+    },
+
+    timechange(){
+      this.dd = true
+    },
+    //切换统计类型
+    changeclasss(val) {
+      this.cu = val.code;
+    },
+    //标签切换
+    handleClick(tab, event) {
+      // this.tablename = tab.name
+      this.activeName = tab.name;
+      if (tab.name == "tab1") {
+        this.eacjartflag = false;
+        this.$nextTick(() => {
+          this.$refs.trem.terminalonlinerateechart();
+        });
+      } else if (tab.name == "tab2") {
+        this.eacjartflag = true;
+        this.$nextTick(() => {
+          this.$refs.trem.terminalonlinerateechart();
+        });
+      }
+    },
+    //部门绑定区域触发区域树节点
+    handleNodeClick(data, node) {
+      this.deptName = data.name;
+      this.$refs.select1.blur();
+      this.deptId = data.id;
+      this.formData.deptIndex = data.id;
+    },
+    //时间格式转化
+    dateFormat(dateData1, dateData2) {
+      var timearr = [];
+      var date = new Date(dateData1);
+      var y = date.getFullYear();
+      var m = date.getMonth() + 1;
+      m = m < 10 ? "0" + m : m;
+      var d = date.getDate();
+      d = d < 10 ? "0" + d : d;
+      var h = date.getHours();
+      h = h < 10 ? "0" + h : h;
+      var f = date.getMinutes();
+      f = f < 10 ? "0" + f : f;
+      var s = date.getSeconds();
+      s = s < 10 ? "0" + s : s;
+      this.formData.searchBeginTime = y + "-" + m + "-" + d;
+      timearr.push(this.formData.startTime);
+      var date = new Date(dateData2);
+      var y = date.getFullYear();
+      var m = date.getMonth() + 1;
+      m = m < 10 ? "0" + m : m;
+      var d = date.getDate();
+      d = d < 10 ? "0" + d : d;
+      var h = date.getHours();
+      h = h < 10 ? "0" + h : h;
+      var f = date.getMinutes();
+      f = f < 10 ? "0" + f : f;
+      var s = date.getSeconds();
+      s = s < 10 ? "0" + s : s;
+      this.formData.searchEndTime = y + "-" + m + "-" + d;
+      timearr.push(this.formData.endTime);
+      return timearr;
+    },
+    //时间格式转化
+    formatDate(date) {
+      date = new Date(Date.parse(date.replace(/-/g, "/"))); //转换成Data();
+
+      var y = date.getFullYear();
+
+      var m = date.getMonth() + 1;
+      m = m < 10 ? "0" + m : m;
+      var d = date.getDate();
+      d = d < 10 ? "0" + d : d;
+      return y + "-" + m + "-" + d;
+    },
+    //2次组件触发事件
+ querfromdata() {
+  this.classt = this.cu
+    //this.closeHandle()
+      this.dd = false
+      this.interval = this.$refs.timezd.intervald;
+      this.loading = true;
+      this.timeValue = this.$refs.timezd.timeValue;
+      // this.timehuanbiValue = timehbValue;
+
+      // this.periodBeginTime = this.timehuanbiValue[0];
+      // this.periodEndTime = this.timehuanbiValue[1];
+
+      // this.ping = this.periodBeginTime + "至" + this.periodEndTime;
+      this.dateFormat(this.timeValue[0], this.timeValue[1]);
+      this.time =
+        this.formData.searchBeginTime + "至" + this.formData.searchEndTime;
+      var data = {
+        deptIndex: this.formData.deptIndex,
+        loadType: this.formData.loadType,
+        monitorFlag: this.formData.monitorFlag,
+        powerFlag: 2,
+        manufacturer: this.formData.manufacturer,
+        searchBeginTime: this.formData.searchBeginTime,
+        searchEndTime: this.formData.searchEndTime,
+        statisticalType: this.formData.statisticalType,
+        scale: this.formData.scale,
+        periodBeginTime: this.periodBeginTime,
+        periodEndTime: this.periodEndTime,
+      };
+     api.getTerminalData(data).then((res) => {
+        this.eacjartflag = true;
+        if (res.code == "A0000") {
+          res.data.forEach((m) => {
+            m.id = this.guid();
+            m.children.forEach((n) => {
+              n.id = this.guid();
+              n.children.forEach((d) => {
+                d.id = this.guid();
+              });
+            });
+          });
+          this.tableData = res.data;
+          this.loading = false;
+        }
+        this.gettubiao()
+      });
+   
+    },
+    gettubiao(){
+      var data = {
+        deptIndex: this.formData.deptIndex,
+        loadType: this.formData.loadType,
+        monitorFlag: this.formData.monitorFlag,
+        powerFlag: 2,
+        manufacturer: this.formData.manufacturer,
+        searchBeginTime: this.formData.searchBeginTime,
+        searchEndTime: this.formData.searchEndTime,
+        statisticalType: this.formData.statisticalType,
+        scale: this.formData.scale,
+        periodBeginTime: this.periodBeginTime,
+        periodEndTime: this.periodEndTime,
+      };
+      (this.xdata = []),
+        (this.ydata1 = []),
+        (this.ydata2 = []),
+        (this.ydata3 = []),
+        (this.ydata4 = []);
+     api.getTerminalDataCensus(data).then((res) => {
+        this.eacjartflag = true;
+        if (res.code == "A0000") {
+          var data = res.data;
+          var single = [];
+          if (data.single !== null) {
+            for (var i = 0; i < data.single.length; i++) {
+              if (data.single[i] == 3.14159) {
+                data.single[i] = 0.5;
+              }
+              single.push(data.single[i].toFixed(2));
+            }
+
+            this.xdata = res.data.type;
+            this.ydata1 = res.data.runFlag;
+            this.ydata2 = res.data.reaFlag;
+            this.ydata3 = res.data.stopFlag;
+            this.ydata4 = single;
+            this.$nextTick(() => {
+              this.$refs.trem.terminalonlinerateechart();
+            });
+          }
+        }
+      });
+    },
+    //开关触发
+    handleStatusChange(val) {
+      this.formData.monitorFlag = val;
+      //this.fiveTreeData()
+    },
+    guid() {
+      return "xxxxxxxxxxxx4xxxyxxxxxxxxxxxxxxx".replace(/[xy]/g, function (c) {
+        let r = (Math.random() * 16) | 0,
+          v = c === "x" ? r : (r & 0x3) | 0x8;
+        return v.toString(16);
+      });
+    },
+    //获取区域
+   async getAreaDept() {
+     await api.getAreaDept().then((res) => {
+        if (res.code == "A0000") {
+          var data = res.data;
+          this.deptName =res.data[0].name
+          data.forEach((element) => {
+            this.idArr.push(element.id);
+          });
+          this.treeData = data;
+        }
+      });
+    },
+    //字典获取数据电压等级
+    getVoltage() {
+      var code = "Dev_Voltage_Stand";
+      this.voltageleveloption = dicData(code, []);
+      this.formData.scale = this.voltageleveloption;
+    },
+    //字典获取数据终端厂家
+    getManufacturer() {
+      var code = "Dev_Manufacturers";
+      this.terminaloption = dicData(code, []);
+      this.formData.manufacturer = this.terminaloption;
+    },
+    //字典获取数据干扰源类型
+    getLoadType() {
+      var code = "Interference_Source";
+      this.interfereoption = dicData(code, []);
+      this.formData.loadType = this.interfereoption;
+    },
+    //获取统计类型
+    getclassificationData() {
+      var code = "Statistical_Type";
+      this.classificationData = dicData(code, [
+        "Report_Type",
+        "Voltage_Level",
+        "Load_Type",
+      ]);
+      this.formData.statisticalType = this.classificationData[0];
+    },
+    rest() {
+      this.deptName = "全国";
+      this.formData = {
+        deptIndex: "",
+        monitorFlag: 2,
+        loadType: [],
+        manufacturer: [],
+        searchBeginTime: "",
+        searchEndTime: "",
+        statisticalType: "",
+        scale: [],
+      };
+    },
+  },
+};
+</script>
+<style lang="less" scoped>
+@import url("../../../styles/comStyle.less");
+// .dhys {
+//   background:rgb(244, 246, 247);
+//   width:36.5%;
+//   height:33px;
+//   position: absolute;
+//   right :0;
+//   z-index: 2000000;
+// }
+// //展示标签时激活
+// .v-enter-active{
+// 		animation: atguigu 0.5s linear;
+// 	}
+// 	//不展示标签时激活
+// 	.v-leave-active{
+// 		animation: atguigu 0.5s linear reverse;
+// 	}
+
+// 	@keyframes atguigu {
+// 		from{
+// 			transform: translateX(-100%);
+// 		}
+// 		to{
+// 			transform: translateX(0px);
+// 		}
+// 	}
+
+.container {
+            /* margin: auto; */
+            top: 0px;
+            right: 0;
+            width:40%;
+            height:0px;
+            z-index:2000;
+            position: absolute;
+            background-color: #e4e7ebb9;
+            overflow: auto; 
+            scroll-behavior: smooth;
+            -radius: 20px;
+        }
+        /* 隐藏滚动条 */
+ ::-webkit-scrollbar {
+     display: block;
+  }
+  .expend {
+    animation: expend ease 5s forwards;
+        }
+ .close-container {
+            animation: no-expend ease 1s forwards;
+        }
+ @keyframes expend {
+            from {
+                top: 0px;
+                height: auto;
+            }
+            to {
+                height: auto;
+                top: 0px;
+            }
+        }
+ @keyframes no-expend {
+            from {
+                height: 10%;
+                top: 0px;
+            }
+            to {
+                top: 0px;
+                height: 0px;
+            }
+        }
+ .coles{
+         position:absolute;
+         right:0;
+         font-size:20px;
+         cursor:pointer;
+        }
+</style>
diff --git a/src/views/pqs/harmonicMonitoring/area/transienteventlist.vue b/src/views/pqs/harmonicMonitoring/area/transienteventlist.vue
new file mode 100644
index 00000000..052ec010
--- /dev/null
+++ b/src/views/pqs/harmonicMonitoring/area/transienteventlist.vue
@@ -0,0 +1,1073 @@
+<template>
+    <div class="pd10" v-loading="loading" element-loading-text="数据加载中">
+        <div v-show="view">
+            <el-form :inline="true" :model="formInline" class="demo-form-inline">
+                <el-form-item>
+                    <el-switch
+                        v-if="this.quyunames != undefined"
+                        class="tableScopeSwitch"
+                        :active-value="2"
+                        :inactive-value="1"
+                        @change="handleStatusChange"
+                        :active-text="quyuname"
+                        :inactive-text="quyunames"
+                        inactive-color="#007878"
+                        active-color="#666666"
+                        v-model="formData.monitorFlag"
+                    ></el-switch>
+                </el-form-item>
+                <!-- <div style="display: flex;justify-content: space-between;flex-grow:1;"> -->
+                <el-form-item>
+                    <timepicker ref="timelist" :interval="interval"></timepicker>
+                    <!-- <el-button class="el-icon-d-arrow-right"  type="primary" round @click="timechange">时间选择</el-button> -->
+                </el-form-item>
+                <el-form-item>
+                    <el-button @click="querfromdata" type="primary" icon="el-icon-search">查询</el-button>
+                </el-form-item>
+                <el-form-item v-show="falg1">
+                    <el-button type="primary" :disabled="bxfalg" class="el-icon-download" @click="download">
+                        波形文件
+                    </el-button>
+                </el-form-item>
+                <el-form-item>
+                    <el-button type="text" @click="closeHandle">
+                        条件筛选
+                        <i :class="!view3 ? 'el-icon-arrow-down' : 'el-icon-arrow-right'"></i>
+                    </el-button>
+                </el-form-item>
+                <!-- </div> -->
+                <!-- </div> -->
+                <!-- <el-form-item style="margin-left:-2.6%">
+                    
+                     <el-button type="primary">波形下载</el-button>
+                  </el-form-item> -->
+            </el-form>
+            <div class="container" id="container">
+                <i @click="closeHandle" class="el-icon-circle-close coles"></i>
+                <el-form :inline="true" :model="formData" label-width="90px" class="">
+                    <!-- <div style="display: flex;"> -->
+                    <el-form-item label="统计类型:">
+                        <el-select
+                            v-model="formData.statisticalType"
+                            @change="changeclasss"
+                            placeholder="请选择统计类型"
+                            style="width: 100%"
+                        >
+                            <el-option
+                                v-for="item in classificationData"
+                                :key="item.id"
+                                :label="item.name"
+                                :value="{
+                                    label: item.name,
+                                    value: item.id,
+                                    name: item.name,
+                                    id: item.id,
+                                    code: item.code,
+                                    sort: item.sort
+                                }"
+                            ></el-option>
+                        </el-select>
+                    </el-form-item>
+                    <el-form-item label="区域选择:">
+                        <el-select v-model="deptName" placeholder="请选择所属部门区域" style="width: 100%">
+                            <el-option :value="deptIndex" style="height: auto">
+                                <el-tree
+                                    ref="tree"
+                                    :data="treeData"
+                                    node-key="id"
+                                    accordion
+                                    :default-expanded-keys="idArr"
+                                    :props="defaultProps"
+                                    @node-click="handleNodeClick"
+                                >
+                                    <span class="span-ellipsis" slot-scope="{ node, data }">
+                                        <span :title="data.name">{{ data.name }}</span>
+                                    </span>
+                                </el-tree>
+                            </el-option>
+                        </el-select>
+                    </el-form-item>
+                    <el-form-item label="电压等级:">
+                        <el-select
+                            v-model="formData.scale"
+                            multiple
+                            collapse-tags
+                            clearable
+                            placeholder="请选择电压等级"
+                            style="width: 100%"
+                        >
+                            <el-option
+                                v-for="item in voltageleveloption"
+                                :key="item.id"
+                                :label="item.name"
+                                :value="{
+                                    label: item.name,
+                                    value: item.id,
+                                    code: item.code,
+                                    name: item.name,
+                                    id: item.id,
+                                    sort: item.sort
+                                }"
+                            ></el-option>
+                        </el-select>
+                    </el-form-item>
+                    <el-form-item label="终端厂家:">
+                        <el-select
+                            v-model="formData.manufacturer"
+                            multiple
+                            collapse-tags
+                            clearable
+                            placeholder="请选择终端厂家"
+                            style="width: 100%"
+                        >
+                            <el-option
+                                v-for="item in terminaloption"
+                                :key="item.id"
+                                :label="item.name"
+                                :value="{
+                                    label: item.name,
+                                    value: item.id,
+                                    code: item.code,
+                                    name: item.name,
+                                    id: item.id,
+                                    sort: item.sort
+                                }"
+                            ></el-option>
+                        </el-select>
+                    </el-form-item>
+                    <el-form-item label="干扰源类型:">
+                        <el-select
+                            v-model="formData.loadType"
+                            multiple
+                            collapse-tags
+                            clearable
+                            placeholder="请选择干扰源类型"
+                            style="width: 100%"
+                        >
+                            <el-option
+                                v-for="item in interfereoption"
+                                :key="item.id"
+                                :label="item.name"
+                                :value="{
+                                    label: item.name,
+                                    value: item.id,
+                                    code: item.code,
+                                    name: item.name,
+                                    id: item.id,
+                                    sort: item.sort
+                                }"
+                            ></el-option>
+                        </el-select>
+                    </el-form-item>
+                    <el-form-item label="数据筛选:">
+                        <el-input
+                            style="width: 100%"
+                            v-model="formData.searchValue"
+                            clearable
+                            placeholder="根据监测点，IP/MAC地址等信息查询"
+                        ></el-input>
+                    </el-form-item>
+                </el-form>
+            </div>
+            <!-- <el-form :inline="true" class="demo-form-inline">
+                 
+                </el-form> -->
+            <el-row :gutter="20">
+                <el-col :span="24">
+                    <el-table
+                        stripe
+                        id="rebateSetTable"
+                        ref="multipleTable"
+                        highlight-current-row
+                        :style="'height:' + vh"
+                        :height="`${vth}`"
+                        :data="tableData"
+                        class="xshou"
+                        header-cell-class-name="table_header"
+                        @selection-change="handleSelectionChange"
+                        border
+                        @sort-change="sortchange"
+                    >
+                        <el-table-column align="center" type="selection" width="62"></el-table-column>
+                        <!-- <el-table-column align="center" sortable  prop="sort"  label="序号"  width="120"  ></el-table-column> -->
+                        <el-table-column
+                            align="center"
+                            sortable
+                            prop="startTime"
+                            label="暂降发生时刻"
+                            :show-overflow-tooltip="true"
+                            min-width="210"
+                            fixed="left"
+                            column-key="date"
+                        ></el-table-column>
+                        <el-table-column
+                            align="center"
+                            sortable
+                            prop="lineName"
+                            label="监测点名称"
+                            :show-overflow-tooltip="true"
+                            min-width="180"
+                        ></el-table-column>
+                        <el-table-column
+                            align="center"
+                            sortable
+                            prop="gdName"
+                            label="供电公司"
+                            min-width="160"
+                            :show-overflow-tooltip="true"
+                        ></el-table-column>
+                        <el-table-column
+                            align="center"
+                            sortable
+                            prop="subName"
+                            label="变电站"
+                            :show-overflow-tooltip="true"
+                            width="180"
+                        ></el-table-column>
+                        <el-table-column
+                            align="center"
+                            sortable
+                            prop="ip"
+                            label="网络参数"
+                            :show-overflow-tooltip="true"
+                            min-width="180"
+                        ></el-table-column>
+                        <el-table-column
+                            align="center"
+                            sortable
+                            prop="scale"
+                            label="电压等级"
+                            min-width="110"
+                            :show-overflow-tooltip="true"
+                        ></el-table-column>
+                        <el-table-column
+                            align="center"
+                            sortable
+                            prop="advanceType"
+                            label="暂降类型"
+                            min-width="120"
+                        ></el-table-column>
+                        <el-table-column
+                            align="center"
+                            sortable
+                            prop="advanceReason"
+                            label="暂降原因"
+                            min-width="120"
+                        ></el-table-column>
+                        <el-table-column
+                            align="center"
+                            sortable
+                            prop="eventType"
+                            :formatter="formFilter"
+                            label="暂态统计类型"
+                            min-width="150"
+                        ></el-table-column>
+                        <el-table-column
+                            align="center"
+                            prop="featureAmplitude"
+                            label="暂降幅值(%)"
+                            fixed="right"
+                            min-width="90"
+                        >
+                            <template slot-scope="scope">
+                                <span>{{ (scope.row.featureAmplitude * 100).toFixed(2) }}</span>
+                            </template>
+                        </el-table-column>
+                        <el-table-column
+                            align="center"
+                            prop="eventDescribe"
+                            label="暂降深度(%)"
+                            fixed="right"
+                            width="80"
+                            :show-overflow-tooltip="true"
+                        >
+                            <template slot-scope="scope">
+                                <span v-if="(100 - scope.row.featureAmplitude * 100).toFixed(2) >= 0">
+                                    {{ (100 - scope.row.featureAmplitude * 100).toFixed(2) }}
+                                </span>
+                                <span v-if="(100 - scope.row.featureAmplitude * 100).toFixed(2) < 0">/</span>
+                            </template>
+                        </el-table-column>
+                        <el-table-column align="center" fixed="right" prop="duration" label="持续时间(s)" width="80">
+                            <!-- <template slot-scope="scope">
+                <span>{{ (scope.row.duration / 100).toFixed(2) }}</span>
+              </template> -->
+                        </el-table-column>
+                        <el-table-column align="center" prop="severity" label="严重度">
+                            <template slot-scope="scope">
+                                <span>{{ scope.row.severity < 0 ? '/' : scope.row.severity }}</span>
+                            </template>
+                        </el-table-column>
+                        <el-table-column align="center" fixed="right" label="操作" width="150">
+                            <template slot-scope="scope">
+                                <el-button
+                                    v-if="scope.row.fileFlag == 0"
+                                    type="primary"
+                                    style="color: #000; background: #ccc !important"
+                                    size="mini"
+                                    icon="el-icon-share"
+                                >
+                                    暂无波形
+                                </el-button>
+                                <el-button
+                                    v-if="scope.row.fileFlag == 1"
+                                    @click="handleClicktransient(scope.row)"
+                                    v-loading.fullscreen.lock="fullscreenLoading"
+                                    type="primary"
+                                    icon="el-icon-share"
+                                    size="mini"
+                                >
+                                    波形分析
+                                </el-button>
+                            </template>
+                        </el-table-column>
+                    </el-table>
+                    <el-pagination
+                        background
+                        align="right"
+                        class="mt10"
+                        @size-change="changePageSize"
+                        @current-change="changePageNum"
+                        :current-page="pageData.pageNum"
+                        :page-sizes="[20, 30, 50, 100, 200]"
+                        :page-size="pageData.pageSize"
+                        layout="total, sizes, prev, pager, next, jumper"
+                        :total="pageData.total"
+                    ></el-pagination>
+                </el-col>
+            </el-row>
+        </div>
+        <el-row>
+            <el-row>
+                <el-col :span="12">
+                    <span v-if="view2" style="font-size: 14px; font-weight: ; line-height: 30px">值类型选择:</span>
+                    <el-select v-if="view2" @change="changeView" v-model="value" placeholder="请选择值类型">
+                        <el-option
+                            v-for="item in options"
+                            :key="item.value"
+                            :label="item.label"
+                            :value="item.value"
+                        ></el-option>
+                    </el-select>
+                </el-col>
+                <el-col :span="12">
+                    <el-button
+                        v-if="view2"
+                        @click="backbxlb"
+                        type="primary"
+                        class="el-icon-refresh-right"
+                        style="float: right"
+                    >
+                        返回
+                    </el-button>
+                </el-col>
+            </el-row>
+            <el-tabs v-if="view2" v-model="bxactiveName" @tab-click="bxhandleClick">
+                <el-tab-pane label="瞬时波形" name="ssbx" :style="'height:' + bxecharts + ';overflow-y: scroll;'">
+                    <shushiboxi
+                        v-if="bxactiveName == 'ssbx' && showBoxi"
+                        :value="value"
+                        :boxoList="boxoList"
+                        :wp="wp"
+                    ></shushiboxi>
+                </el-tab-pane>
+                <el-tab-pane label="RMS波形" name="rmsbx" :style="'height:' + bxecharts + ';overflow-y: scroll;'">
+                    <rmsboxi
+                        v-if="bxactiveName == 'rmsbx' && showBoxi"
+                        :value="value"
+                        :boxoList="boxoList"
+                        :wp="wp"
+                    ></rmsboxi>
+                </el-tab-pane>
+            </el-tabs>
+            <!-- <xiebofenxi  ref="child"  :bxshuju="bxshuju" @backfh="back"></xiebofenxi>  -->
+        </el-row>
+
+        <el-dialog
+            :close-on-click-modal="false"
+            title="条件查询配置"
+            :visible.sync="dialogVisible"
+            width="30%"
+            :before-close="handleClose"
+        >
+            <el-form :inline="true" :model="formInline" label-width="120px" class="demo-ruleForm">
+                <el-form-item label="暂态幅值(%):">
+                    <el-input v-model="formInline.ztfz1" placeholder="0" style="width: 160px"></el-input>
+                    <span>幅值</span>
+                    <el-input v-model="formInline.ztfz2" placeholder="200" style="width: 160px"></el-input>
+                </el-form-item>
+                <el-form-item label="暂态持续时间:">
+                    <el-input v-model="formInline.cxsj1" placeholder="X毫秒" style="width: 160px"></el-input>
+                    <span><时间<</span>
+                    <el-input v-model="formInline.cxsj2" placeholder="X毫秒" style="width: 160px"></el-input>
+                </el-form-item>
+                <el-form-item label="事件严重度:">
+                    <el-input v-model="formInline.yzd1" placeholder="正负数" style="width: 160px"></el-input>
+                    <span><程度<</span>
+                    <el-input v-model="formInline.yzd2" placeholder="正负数" style="width: 160px"></el-input>
+                </el-form-item>
+                <el-form-item label="触发类型:">
+                    <el-select
+                        v-model="formInline.trigger"
+                        multiple
+                        collapse-tags
+                        style="width: 370px"
+                        placeholder="请选择"
+                    >
+                        <el-option
+                            v-for="item in triggeroptions"
+                            :key="item.value"
+                            :label="item.label"
+                            :value="item.value"
+                        ></el-option>
+                    </el-select>
+                </el-form-item>
+                <el-form-item label="是否存在波形:">
+                    <el-select v-model="formInline.waveform" style="width: 370px" placeholder="请选择是否存在波形">
+                        <el-option
+                            v-for="item in waveformoptions"
+                            :key="item.value"
+                            :label="item.label"
+                            :value="item.value"
+                        ></el-option>
+                    </el-select>
+                </el-form-item>
+            </el-form>
+            <span slot="footer" class="dialog-footer">
+                <el-button @click="dialogVisible = false">取 消</el-button>
+                <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
+            </span>
+        </el-dialog>
+    </div>
+</template>
+<script>
+import { dicData } from '@/assets/commjs/dictypeData'
+// import transienteventechart from "@/views/components/echarts/transienteventechart";
+import xiebofenxi from '@/views/components/echarts/xieBoFenxi'
+import api2 from '@/api/harmonic/harmonic'
+import timepicker from '../../components/TimePicker/index4'
+import api from '../../../api/integraliy/integraliy'
+import rmsboxi from '@/views/Event-boot/components/echarts/rmsboxi'
+import shushiboxi from '@/views/Event-boot/components/echarts/shushiboxi'
+export default {
+    name: 'transienteventlist',
+    components: {
+        // transienteventechart,
+        xiebofenxi,
+        timepicker,
+        rmsboxi,
+        shushiboxi
+    },
+    data() {
+        return {
+            value: 1,
+            options: [
+                {
+                    value: 1,
+                    label: '一次值'
+                },
+                {
+                    value: 2,
+                    label: '二次值'
+                }
+            ],
+            wp: {},
+            boxoList: {},
+            bxecharts: null,
+            quyuname: undefined,
+            quyunames: undefined,
+            bxactiveName: 'ssbx',
+            dd: false,
+            vh: null,
+            showBoxi: true,
+            view: true,
+            view2: false,
+            bxfalg: true,
+            falg3: false,
+            falg1: true,
+            fullscreenLoading: false,
+            asideheight: undefined,
+            tableheight: undefined,
+            dialogVisible: false,
+            height: undefined,
+            device: 1,
+            input: '',
+            formInline: {
+                ztfz1: '',
+                ztfz2: '',
+                cxsj1: '',
+                cxsj2: '',
+                yzd1: '',
+                yzd2: '',
+                trigger: [],
+                waveform: undefined
+            },
+            triggeroptions: [
+                {
+                    value: 1,
+                    label: '其他'
+                },
+                {
+                    value: 2,
+                    label: '扰动'
+                },
+                {
+                    value: 3,
+                    label: '暂降'
+                },
+                {
+                    value: 4,
+                    label: '暂升'
+                },
+                {
+                    value: 5,
+                    label: '中断'
+                },
+                {
+                    value: 6,
+                    label: '录波'
+                }
+            ],
+            waveformoptions: [
+                {
+                    value: 1,
+                    label: '是'
+                },
+                {
+                    value: 2,
+                    label: '否'
+                }
+            ],
+            falg: true,
+            falg2: false,
+            bxshuju: undefined,
+            id: 1,
+            title: '电网拓扑',
+            xdata: [],
+            ydata: [],
+            classvalue: 0,
+            activeName: 'tab1',
+            panindexOptions: [],
+            classificationData: [],
+            terminal: [],
+            terminaloption: [],
+            date: [],
+            row: undefined,
+            pageData: {
+                pageNum: 1,
+                pageSize: 20,
+                total: 0
+            },
+            loading: true,
+            tableData: [],
+            asideheight: undefined,
+            timeValue: [],
+            id: 1,
+            copent: 0,
+            classt: 'Power_Network',
+            tablename: 'tab1',
+            treeData: [],
+            idArr: [],
+            defaultProps: {
+                children: 'children',
+                label: 'name'
+            },
+            deptName: '',
+            deptIndex: '',
+            voltageleveloption: [],
+            terminal: '',
+            terminaloption: [],
+            interfere: '',
+            interfereoption: [],
+            classificationData: [],
+            dictypeData: undefined,
+            deptIndex: '',
+            formData: {
+                //后面需要修改
+                deptIndex: '',
+                monitorFlag: 2,
+                powerFlag: 2,
+                loadType: [],
+                manufacturer: [],
+                searchBeginTime: '',
+                searchEndTime: '',
+                statisticalType: '',
+                isType: 0,
+                scale: [],
+                serverName: '',
+                searchValue: '',
+                statFlag: true
+            },
+            tableheight: undefined,
+            interval: 3,
+            multipleSelection: [],
+            lineIds: [],
+            timeIds: [],
+            EventStatislist: [],
+            view3: false,
+            vth: null
+        }
+    },
+    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
+        // }
+        // vth() {
+        //   return window.sessionStorage.getItem("appheight") - 95;
+        // },
+    },
+    created() {
+        let data = window.sessionStorage.getItem('sysData')
+        let yudata = eval('(' + data + ')')
+        let str = yudata.dataReport.split('，')
+        this.quyuname = str[1]
+        var info = window.sessionStorage.getItem('Info')
+        info = eval('(' + info + ')')
+        this.formData.deptIndex = info.deptId
+        this.getAreaDept()
+        this.getclassificationData()
+        this.getVoltage()
+        this.getManufacturer()
+        this.getLoadType()
+    },
+    mounted() {
+        this.setHeight()
+        window.addEventListener('resize', this.setHeight)
+
+        let data = window.sessionStorage.getItem('sysData')
+        let yudata = eval('(' + data + ')')
+        let str = yudata.dataReport.split('，')
+        this.quyuname = str[0]
+        this.quyunames = str[1]
+
+        // this.vth = window.sessionStorage.getItem("appheight") - 95;
+
+        this.querfromdata()
+    },
+
+    beforeDestroy() {
+        window.removeEventListener('resize', this.setHeight)
+    },
+    methods: {
+        setHeight() {
+            this.vh = window.sessionStorage.getItem('appheight') - 95 + 'px'
+            this.bxecharts = window.sessionStorage.getItem('appheight') - 160 + 'px'
+            this.vth = window.sessionStorage.getItem('appheight') - 95
+        },
+        changeView() {
+            this.showBoxi = false
+            setTimeout(() => {
+                this.showBoxi = true
+            }, 0)
+        },
+        timechange() {
+            this.dd = true
+        },
+        closeHandle() {
+            if (this.view3) {
+                this.view3 = false
+            } else {
+                this.view3 = true
+            }
+            //console.log('关闭和展开');
+            const dom = document.getElementById('container')
+            const closeDom = document.getElementsByClassName('close')[0]
+            if (!dom.className.match(/(?:^|\s)expend(?!\S)/)) {
+                dom.className = 'container expend'
+            } else {
+                dom.className = 'container close-container'
+            }
+        },
+        // 数据过滤
+        formFilter(row, column) {
+            if (column.property == 'eventType') {
+                let title = ''
+                dicData('Event_Statis', []).forEach(item => {
+                    if (item.id == row.eventType) {
+                        title = item.name
+                    }
+                })
+                return title
+            }
+        },
+        multipleconditions() {
+            this.formInline = {}
+            this.dialogVisible = true
+        },
+        handleClose() {
+            //
+            this.dialogVisible = false
+        },
+        transientevent(data) {
+            this.row = data
+            this.falg = false
+            this.falg1 = false
+            this.falg3 = false
+            this.falg2 = true
+            // alert("父组件单行列表触发方法" + this.row);
+        },
+        back() {
+            this.falg2 = false
+            this.falg = true
+            this.falg1 = true
+            this.falg3 = false
+        },
+        //里层波形tab标签页触发事件
+        bxhandleClick(tab, event) {
+            if (tab.name == 'ssbx') {
+                this.bxactiveName = 'ssbx'
+            } else if (tab.name == 'rmsbx') {
+                this.bxactiveName = 'rmsbx'
+            }
+            //  console.log(tab, event);
+        },
+        //返回触发事件
+        backbxlb() {
+            this.view = true
+            this.view2 = false
+        },
+        //部门绑定区域触发区域树节点
+        handleNodeClick(data, node) {
+            this.deptName = data.name
+            this.deptId = data.id
+            this.formData.deptIndex = data.id
+        },
+        //时间格式转化
+        dateFormat(dateData1, dateData2) {
+            var timearr = []
+            var date = new Date(dateData1)
+            var y = date.getFullYear()
+            var m = date.getMonth() + 1
+            m = m < 10 ? '0' + m : m
+            var d = date.getDate()
+            d = d < 10 ? '0' + d : d
+            var h = date.getHours()
+            h = h < 10 ? '0' + h : h
+            var f = date.getMinutes()
+            f = f < 10 ? '0' + f : f
+            var s = date.getSeconds()
+            s = s < 10 ? '0' + s : s
+            this.formData.searchBeginTime = y + '-' + m + '-' + d
+            timearr.push(this.formData.startTime)
+            var date = new Date(dateData2)
+            var y = date.getFullYear()
+            var m = date.getMonth() + 1
+            m = m < 10 ? '0' + m : m
+            var d = date.getDate()
+            d = d < 10 ? '0' + d : d
+            var h = date.getHours()
+            h = h < 10 ? '0' + h : h
+            var f = date.getMinutes()
+            f = f < 10 ? '0' + f : f
+            var s = date.getSeconds()
+            s = s < 10 ? '0' + s : s
+            this.formData.searchEndTime = y + '-' + m + '-' + d
+            timearr.push(this.formData.endTime)
+            return timearr
+        },
+        queryData() {
+            //this.closeHandle()
+            this.loading = true
+            this.dateFormat(this.timeValue[0], this.timeValue[1])
+            this.formData.pageSize = this.pageData.pageSize
+            this.formData.pageNum = this.pageData.pageNum
+            if (this.formData.searchValue !== '') {
+                this.formData.pageNum = 1
+            } else {
+                this.formData.pageNum = this.pageData.pageNum
+            }
+            api2.getTransientData(this.formData).then(res => {
+                if (res.code == 'A0000') {
+                    this.pageData.total = res.data.total
+                    let data = res.data.records
+                    this.tableData = data
+                    this.loading = false
+                }
+            })
+        },
+        //2次组件触发事件
+        querfromdata() {
+            //this.closeHandle()
+            this.dd = false
+            this.interval = this.$refs.timelist.intervald
+
+            this.loading = true
+            this.timeValue = this.$refs.timelist.timeValue
+            this.dateFormat(this.timeValue[0], this.timeValue[1])
+            this.formData.pageSize = this.pageData.pageSize
+            if (this.formData.searchValue !== '') {
+                this.formData.pageNum = 1
+            } else {
+                this.formData.pageNum = this.pageData.pageNum
+            }
+            this.formData.pageNum = this.pageData.pageNum
+            api2.getTransientData(this.formData).then(res => {
+                if (res.code == 'A0000') {
+                    if (res.data.total > 0 && res.data.records.length == 0) {
+                        this.punmData()
+                    } else {
+                        this.pageData.total = res.data.total
+                        let data = res.data.records
+                        this.tableData = data
+                        this.loading = false
+                    }
+                }
+            })
+        },
+        punmData() {
+            this.formData.pageNum = 1
+            this.pageData.pageNum = 1
+            this.dd = false
+            this.interval = this.$refs.timelist.intervald
+            this.loading = true
+            this.timeValue = this.$refs.timelist.timeValue
+            this.dateFormat(this.timeValue[0], this.timeValue[1])
+            this.formData.pageSize = this.pageData.pageSize
+            api2.getTransientData(this.formData).then(res => {
+                if (res.code == 'A0000') {
+                    this.pageData.total = res.data.total
+                    let data = res.data.records
+                    this.tableData = data
+                    this.loading = false
+                }
+            })
+        },
+        changePageNum(data) {
+            this.pageData.pageNum = data
+            this.queryData()
+        },
+        changePageSize(data) {
+            this.pageData.pageSize = data
+            this.queryData()
+        },
+        //开关触发
+        handleStatusChange(val) {
+            this.formData.monitorFlag = val
+            //this.fiveTreeData()
+        },
+        //获取区域
+        getAreaDept() {
+            api.getAreaDept().then(res => {
+                if (res.code == 'A0000') {
+                    var data = res.data
+                    this.deptName = res.data[0].name
+                    data.forEach(element => {
+                        this.idArr.push(element.id)
+                    })
+                    this.treeData = data
+                }
+            })
+        },
+        //字典暂降指标类型
+        getEventStatis() {
+            var code = 'Event_Statis'
+            this.EventStatislist = dicData(code, [])
+            /// this.formData.scale = this.voltageleveloption
+        },
+        //字典获取数据电压等级
+        getVoltage() {
+            var code = 'Dev_Voltage_Stand'
+            this.voltageleveloption = dicData(code, [])
+            this.formData.scale = this.voltageleveloption
+        },
+        //字典获取数据终端厂家
+        getManufacturer() {
+            var code = 'Dev_Manufacturers'
+            this.terminaloption = dicData(code, [])
+            this.formData.manufacturer = this.terminaloption
+        },
+        //字典获取数据干扰源类型
+        getLoadType() {
+            var code = 'Interference_Source'
+            this.interfereoption = dicData(code, [])
+            this.formData.loadType = this.interfereoption
+        },
+        //获取统计类型
+        getclassificationData() {
+            var code = 'Statistical_Type'
+            this.classificationData = dicData(code, ['Report_Type'])
+            this.formData.statisticalType = this.classificationData[0]
+        },
+        //导出
+        exportExcel() {},
+        //排序触发
+        sortchange() {},
+        //切换统计类型
+        changeclasss(val) {
+            this.classt = val.code
+        },
+
+        //波形下载
+        download() {
+            let data = {
+                lineId: this.lineIds
+                // timeId: this.timeIds,
+            }
+            api.downloadWaveFile(data).then(response => {
+                let blob = new Blob([response], { type: 'application/zip' })
+
+                const url = window.URL.createObjectURL(blob)
+                const link = document.createElement('a') // 创建a标签
+                link.href = url
+                link.download = '波形分析下载' // 设置下载的文件名
+                document.body.appendChild(link)
+                link.click() //执行下载
+                document.body.removeChild(link) //释放标签
+            })
+        },
+        //多选
+        handleSelectionChange(val) {
+            if (val.length > 0) {
+                this.bxfalg = false
+                this.falg3 = true
+                //this.falg = false
+                this.falg1 = true
+            } else {
+                this.bxfalg = true
+                this.falg3 = true
+                // this.falg = true
+                this.falg1 = true
+            }
+            this.multipleSelection = []
+            this.lineIds = []
+            this.timeIds = []
+            val.forEach(item => {
+                this.lineIds.push(item.eventId)
+                this.timeIds.push(item.startTime)
+            })
+            this.multipleSelection = val
+        },
+        //波形
+        async handleClicktransient(row) {
+            let data = {
+                id: row.eventId,
+                systemType: 0,
+                type: 0
+            }
+            await api.getTransientAnalyseWave(data).then(res => {
+                if (res != undefined) {
+                    this.wp = res.data
+                    this.boxoList = row
+                    this.view = false
+                    this.view2 = true
+                }
+            })
+
+            // this.$refs.child.getRmsBoXinFenXi()
+        }
+    }
+}
+</script>
+<style lang="less" scoped>
+@import url('../../../styles/comStyle.less');
+.xshou {
+    cursor: pointer;
+}
+.container {
+    /* margin: auto; */
+    top: 0px;
+    right: 0;
+    width: 40%;
+    height: 0px;
+    z-index: 2000;
+    position: absolute;
+    background-color: #e4e7ebb9;
+    overflow: auto;
+    scroll-behavior: smooth;
+    -radius: 20px;
+}
+/* 隐藏滚动条 */
+::-webkit-scrollbar {
+    display: block;
+}
+.expend {
+    animation: expend ease 5s forwards;
+}
+.close-container {
+    animation: no-expend ease 1s forwards;
+}
+@keyframes expend {
+    from {
+        top: 0px;
+        height: auto;
+    }
+    to {
+        height: auto;
+        top: 0px;
+    }
+}
+@keyframes no-expend {
+    from {
+        height: 20%;
+        top: 0px;
+    }
+    to {
+        top: 0px;
+        height: 0px;
+    }
+}
+.coles {
+    position: absolute;
+    right: 0;
+    font-size: 20px;
+    cursor: pointer;
+}
+</style>
+<style lang="scss" scoped>
+::v-deep.el-table__fixed {
+    // 左固定列
+    height: auto !important;
+    bottom: 10px; // 改为自动高度后，设置与父容器的底部距离，高度会动态改变，值可以设置比滚动条的高度稍微大一些
+    right: 10px;
+}
+::v-deep .el-table__fixed-right {
+    // 右固定列
+    height: auto !important;
+    bottom: 10px; // 改为自动高度后，设置与父容器的底部距离，高度会动态改变，值可以设置比滚动条的高度稍微大一些
+    margin-right: 4px;
+}
+
+::v-deep .el-table__fixed,
+.el-table__fixed-right {
+    height: calc(100% - 10px) !important;
+}
+::v-deep.el-table__fixed-body-wrapper {
+    height: 100% !important;
+}
+
+::v-deep.el-table__fixed-body-wrapper .el-table__body {
+    /*滚动条高度*/
+    padding-bottom: 50px !important;
+}
+//::v-deep .el-table__fixed-right {
+//top: 0;
+//left: auto;
+//right: 0;
+//margin-right: 8px;
+//}
+
+// // 提升两侧固定列的优先级（只有内容，不包含滚动条）
+// ::v-deep .el-table__fixed {
+//   .el-table__fixed-body-wrapper{
+//     z-index: 900;
+//   }
+// }
+// ::v-deep.el-table__fixed-right {
+//   .el-table__fixed-body-wrapper{
+//     z-index: 900;
+//   }
+// }
+// // 提升table组件中间内容区域的优先级（包含滚动条，滚动时不会被遮挡）
+// ::v-deep.el-table__body-wrapper{
+//   z-index: 800;
+// }
+</style>
diff --git a/src/views/pqs/supervise/testRun/index.vue b/src/views/pqs/supervise/testRun/index.vue
index 3db864e3..33c38699 100644
--- a/src/views/pqs/supervise/testRun/index.vue
+++ b/src/views/pqs/supervise/testRun/index.vue
@@ -317,6 +317,7 @@ const startRunTest = () => {
 // 下载报告
 const downloadTheReport = (url: string) => {
     getFileNameAndFilePath({ filePath: url }).then((res: any) => {
+        console.log(res.data.url,"res");
         const link = document.createElement('a')
         link.href = res.data.url
         link.download = res.data.name