diff --git a/src/App.vue b/src/App.vue
index e6c8d178..ab119aff 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,23 +1,25 @@
-<template>
-    <el-config-provider :locale="zhCn">
-        <router-view></router-view>
-    </el-config-provider>
-</template>
-
-<script lang="ts" setup>
-import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
-import useSetTheme from '@/utils/setTheme'
-import { onMounted } from 'vue'
-useSetTheme()
-onMounted(async () => {
-    const response = await fetch('/')
-    const WebSocketUrl:any = response.headers.get('X-WebSocket-Url')
-    const MqttUrl:any = response.headers.get('X-MqttUrl-Url')
-    localStorage.setItem('WebSocketUrl', WebSocketUrl)
-    localStorage.setItem('MqttUrl', MqttUrl)
-})
-</script>
-
-<style lang="scss">
-/* Your SCSS styles here */
-</style>
+<template>
+    <el-config-provider :locale="zhCn">
+        <router-view></router-view>
+    </el-config-provider>
+</template>
+
+<script lang="ts" setup>
+import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
+import useSetTheme from '@/utils/setTheme'
+import { onMounted } from 'vue'
+useSetTheme()
+onMounted(async () => {
+    const response = await fetch('/')
+    const WebSocketUrl:any = response.headers.get('X-WebSocket-Url')
+    const WebSocketUrl2:any = response.headers.get('X-WebSocket-Url2')
+    const MqttUrl:any = response.headers.get('X-MqttUrl-Url')
+    localStorage.setItem('WebSocketUrl2', WebSocketUrl2)
+    localStorage.setItem('WebSocketUrl', WebSocketUrl)
+    localStorage.setItem('MqttUrl', MqttUrl)
+})
+</script>
+
+<style lang="scss">
+/* Your SCSS styles here */
+</style>
diff --git a/src/utils/webSocketClient.ts b/src/utils/webSocketClient.ts
index d641d8b0..93d42dc6 100644
--- a/src/utils/webSocketClient.ts
+++ b/src/utils/webSocketClient.ts
@@ -1,200 +1,205 @@
-import { ElMessage, EVENT_CODE } from 'element-plus'
-
-// 定义消息类型，用于类型检查
-type MessageType = {
-    [key: string]: any
-}
-
-export default class SocketService {
-    // 单例模式实例
-    private static instance: SocketService | null = null
-    // 和服务端连接的socket对象
-    private ws: WebSocket | null = null
-    // 存储回调函数
-    private callBackMapping: { [key: string]: ((message: MessageType) => void) | null } = {}
-    // 标识是否连接成功
-    private connected: boolean = false
-    // 记录重试的次数
-    private sendRetryCount: number = 0
-    // 重新连接尝试的次数
-    private connectRetryCount: number = 0
-    // Web Worker 实例
-    private work: Worker | null = null
-    // 临时的 Blob URL
-    private workerBlobUrl: string | null = null
-    // 上次活动时间戳
-    private lastActivityTime: number = 0
-    // 最后一次收到心跳回复时间
-    private lastResponseHeartTime: number = Date.now()
-    // 重新连接延迟，单位毫秒
-    private reconnectDelay: number = 5000
-
-    // 单例模式获取实例
-    public static get Instance(): SocketService {
-        if (!this.instance) {
-            this.instance = new SocketService()
-        }
-        return this.instance
-    }
-
-    // 定义连接服务器的方法
-    public async connect(id: string) {
-        if (!window.WebSocket) {
-            console.log('您的浏览器不支持WebSocket')
-            return
-        }
-
-        setTimeout(() => {
-            // ws://192.168.1.69:10407/mgtt/api/pushMessage/
-            const url = (localStorage.getItem('WebSocketUrl') || 'ws://192.168.1.68:10407/api/pushMessage/') + id
-            this.ws = new WebSocket(url)
-
-            this.ws.onopen = () => this.handleOpen()
-            this.ws.onclose = () => this.handleClose()
-            this.ws.onerror = () => this.handleError()
-            this.ws.onmessage = event => this.handleMessage(event)
-        }, 0)
-    }
-
-    // 处理连接成功事件
-    private handleOpen(): void {
-        ElMessage.success('webSocket连接服务端成功了')
-        console.log('连接服务端成功了')
-        this.connected = true
-        this.connectRetryCount = 0
-        this.updateLastActivityTime()
-        this.startHeartbeat()
-    }
-
-    // 处理连接关闭事件
-    private handleClose(): void {
-        console.log('连接webSocket服务端关闭')
-        this.connected = false
-        this.connectRetryCount++
-        this.clearHeartbeat()
-        // 可根据需要添加重连逻辑
-        // setTimeout(() => this.connect(), 500 * this.connectRetryCount);
-    }
-
-    // 处理连接错误事件
-    private handleError(): void {
-        ElMessage.error('webSocket连接异常！')
-    }
-
-    // 处理服务端发送过来的数据
-    private handleMessage(event: MessageEvent): void {
-        // console.log('🚀 ~ SocketService ~ handleMessage ~ event.data:', event.data)
-
-        if (event.data == '连接成功') {
-            this.sendHeartbeat()
-        } else if (event.data.length > 10) {
-            let message: MessageType
-            try {
-                // console.log('Received message:', event.data)
-                message = JSON.parse(event.data)
-            } catch (e) {
-                console.error('消息解析失败', event.data, e)
-                return
-            }
-            // console.log("🚀 ~ SocketService ~ handleMessage ~ message:", message)
-
-            // 通过接受服务端发送的type字段来回调函数
-            if (message.key && this.callBackMapping['message']) {
-                this.callBackMapping['message']!(message)
-            } else {
-                console.log('抛弃====>')
-                // console.log(event.data)
-                // 丢弃或继续写你的逻辑
-            }
-        } else {
-            ElMessage.error(event.data)
-        }
-    }
-
-    // 启动心跳检测
-    private startHeartbeat(): void {
-        this.lastResponseHeartTime = Date.now()
-        const url = window.URL.createObjectURL(
-            new Blob(['(function(e){setInterval(function(){this.postMessage(null)},30000)})()'])
-        )
-        this.workerBlobUrl = url
-        this.work = new Worker(url)
-        this.work.onmessage = e => this.handleWorkerMessage(e)
-    }
-
-    // 处理 Web Worker 消息
-    private handleWorkerMessage(e: MessageEvent): void {
-        // if (this.lastActivityTime - this.lastResponseHeartTime > 30000) {
-        //     // 说明已经三轮心跳没收到回复了，关闭检测，提示用户。
-        //     // ElMessage.error('业务主体模块发生未知异常，请尝试重新启动！')
-        //     this.clearHeartbeat()
-        //     return
-        // }
-        // console.log(123);
-
-        this.sendHeartbeat()
-    }
-
-    // 发送心跳消息
-    private sendHeartbeat(): void {
-        // console.log(new Date() + '进入心跳消息发送。。。。。。。。。。。。。')
-        if (this.ws) {
-            this.ws.send('alive')
-            this.updateLastActivityTime()
-        }
-    }
-
-    // 更新活动时间
-    private updateLastActivityTime(): void {
-        this.lastActivityTime = Date.now()
-    }
-
-    // 清除心跳检测
-    private clearHeartbeat(): void {
-        if (this.work) {
-            this.work.terminate()
-            this.work = null
-        }
-        if (this.workerBlobUrl) {
-            window.URL.revokeObjectURL(this.workerBlobUrl)
-            this.workerBlobUrl = null
-        }
-    }
-
-    // 回调函数的注册
-    public registerCallBack(socketType: string, callBack: (message: MessageType) => void): void {
-        this.callBackMapping[socketType] = callBack
-    }
-
-    // 取消某一个回调函数
-    public unRegisterCallBack(socketType: string): void {
-        this.callBackMapping[socketType] = null
-    }
-
-    // 发送数据的方法
-    public send(data: any): void {
-        if (this.connected) {
-            this.sendRetryCount = 0
-            try {
-                if (this.ws) {
-                    this.ws.send(JSON.stringify(data))
-                }
-            } catch (e) {
-                if (this.ws) {
-                    this.ws.send(data)
-                }
-            }
-        } else {
-            this.sendRetryCount++
-            setTimeout(() => this.send(data), this.sendRetryCount * 500)
-        }
-    }
-
-    // 断开方法
-    public closeWs(): void {
-        if (this.connected && this.ws) {
-            this.ws.close()
-        }
-        console.log('执行WS关闭命令..')
-    }
-}
+import { ElMessage, EVENT_CODE } from 'element-plus'
+
+// 定义消息类型，用于类型检查
+type MessageType = {
+    [key: string]: any
+}
+
+export default class SocketService {
+    // 单例模式实例
+    private static instance: SocketService | null = null
+    // 和服务端连接的socket对象
+    private ws: WebSocket | null = null
+    // 存储回调函数
+    private callBackMapping: { [key: string]: ((message: MessageType) => void) | null } = {}
+    // 标识是否连接成功
+    private connected: boolean = false
+    // 记录重试的次数
+    private sendRetryCount: number = 0
+    // 重新连接尝试的次数
+    private connectRetryCount: number = 0
+    // Web Worker 实例
+    private work: Worker | null = null
+    // 临时的 Blob URL
+    private workerBlobUrl: string | null = null
+    // 上次活动时间戳
+    private lastActivityTime: number = 0
+    // 最后一次收到心跳回复时间
+    private lastResponseHeartTime: number = Date.now()
+    // 重新连接延迟，单位毫秒
+    private reconnectDelay: number = 5000
+
+    // 单例模式获取实例
+    public static get Instance(): SocketService {
+        if (!this.instance) {
+            this.instance = new SocketService()
+        }
+        return this.instance
+    }
+
+    // 定义连接服务器的方法
+    public async connect(url: string) {
+        if (!window.WebSocket) {
+            console.log('您的浏览器不支持WebSocket')
+            return
+        }
+
+        setTimeout(() => {
+            // ws://192.168.1.69:10407/mgtt
+            // const url =
+            //     (localStorage.getItem('WebSocketUrl') == 'null'
+            //         ? 'ws://192.168.1.130:10405'
+            //         : localStorage.getItem('WebSocketUrl')) + id
+            this.ws = new WebSocket(url)
+
+            this.ws.onopen = () => this.handleOpen()
+            this.ws.onclose = () => this.handleClose()
+            this.ws.onerror = () => this.handleError()
+            this.ws.onmessage = event => this.handleMessage(event)
+        }, 0)
+    }
+
+    // 处理连接成功事件
+    private handleOpen(): void {
+        ElMessage.success('webSocket连接服务端成功了')
+        console.log('连接服务端成功了')
+        this.connected = true
+        this.connectRetryCount = 0
+        this.updateLastActivityTime()
+        this.startHeartbeat()
+    }
+
+    // 处理连接关闭事件
+    private handleClose(): void {
+        console.log('连接webSocket服务端关闭')
+        this.connected = false
+        this.connectRetryCount++
+        this.clearHeartbeat()
+        // 可根据需要添加重连逻辑
+        // setTimeout(() => this.connect(), 500 * this.connectRetryCount);
+    }
+
+    // 处理连接错误事件
+    private handleError(): void {
+        ElMessage.error('webSocket连接异常！')
+    }
+
+    // 处理服务端发送过来的数据
+    private handleMessage(event: MessageEvent): void {
+        // console.log('🚀 ~ SocketService ~ handleMessage ~ event.data:', event.data)
+
+        if (event.data == '连接成功') {
+            this.sendHeartbeat()
+        } else if (event.data == 'connect') {
+        } else if (event.data.length > 10) {
+            let message: MessageType
+            try {
+                // console.log('Received message:', event.data)
+                message = JSON.parse(event.data)
+            } catch (e) {
+                console.error('消息解析失败', event.data, e)
+                return
+            }
+            // console.log("🚀 ~ SocketService ~ handleMessage ~ message:", message)
+
+            // 通过接受服务端发送的type字段来回调函数
+
+            if ((message.key || message.code) && this.callBackMapping['message']) {
+                this.callBackMapping['message']!(message)
+            } else {
+                console.log('抛弃====>')
+                // console.log(event.data)
+                // 丢弃或继续写你的逻辑
+            }
+        } else {
+            ElMessage.error(event.data)
+        }
+    }
+
+    // 启动心跳检测
+    private startHeartbeat(): void {
+        this.lastResponseHeartTime = Date.now()
+        const url = window.URL.createObjectURL(
+            new Blob(['(function(e){setInterval(function(){this.postMessage(null)},30000)})()'])
+        )
+        this.workerBlobUrl = url
+        this.work = new Worker(url)
+        this.work.onmessage = e => this.handleWorkerMessage(e)
+    }
+
+    // 处理 Web Worker 消息
+    private handleWorkerMessage(e: MessageEvent): void {
+        // if (this.lastActivityTime - this.lastResponseHeartTime > 30000) {
+        //     // 说明已经三轮心跳没收到回复了，关闭检测，提示用户。
+        //     // ElMessage.error('业务主体模块发生未知异常，请尝试重新启动！')
+        //     this.clearHeartbeat()
+        //     return
+        // }
+        // console.log(123);
+
+        this.sendHeartbeat()
+    }
+
+    // 发送心跳消息
+    private sendHeartbeat(): void {
+        // console.log(new Date() + '进入心跳消息发送。。。。。。。。。。。。。')
+        if (this.ws) {
+            this.ws.send('alive')
+            this.updateLastActivityTime()
+        }
+    }
+
+    // 更新活动时间
+    private updateLastActivityTime(): void {
+        this.lastActivityTime = Date.now()
+    }
+
+    // 清除心跳检测
+    private clearHeartbeat(): void {
+        if (this.work) {
+            this.work.terminate()
+            this.work = null
+        }
+        if (this.workerBlobUrl) {
+            window.URL.revokeObjectURL(this.workerBlobUrl)
+            this.workerBlobUrl = null
+        }
+    }
+
+    // 回调函数的注册
+    public registerCallBack(socketType: string, callBack: (message: MessageType) => void): void {
+        this.callBackMapping[socketType] = callBack
+    }
+
+    // 取消某一个回调函数
+    public unRegisterCallBack(socketType: string): void {
+        this.callBackMapping[socketType] = null
+    }
+
+    // 发送数据的方法
+    public send(data: any): void {
+        if (this.connected) {
+            this.sendRetryCount = 0
+            try {
+                if (this.ws) {
+                    this.ws.send(JSON.stringify(data))
+                }
+            } catch (e) {
+                if (this.ws) {
+                    this.ws.send(data)
+                }
+            }
+        } else {
+            this.sendRetryCount++
+            setTimeout(() => this.send(data), this.sendRetryCount * 500)
+        }
+    }
+
+    // 断开方法
+    public closeWs(): void {
+        if (this.connected && this.ws) {
+            this.ws.close()
+        }
+        console.log('执行WS关闭命令..')
+    }
+}
diff --git a/src/views/pqs/bearingCapacity/evaluationList/components/charge.vue b/src/views/pqs/bearingCapacity/evaluationList/components/charge.vue
index df00c0a2..f7991547 100644
--- a/src/views/pqs/bearingCapacity/evaluationList/components/charge.vue
+++ b/src/views/pqs/bearingCapacity/evaluationList/components/charge.vue
@@ -1,508 +1,522 @@
-<template>
-    <div v-loading="loading">
-        <div class="card-container mb10">
-            <el-card style="width: 700px">
-                <template #header>
-                    <div class="card-header">
-                        <span style="line-height: 32px">公共连接点参数</span>
-                    </div>
-                </template>
-                <div :style="`height: calc(${height} - 380px);overflow-y: auto;max-height:350px`">
-                    <el-form
-                        ref="formRef"
-                        :model="form"
-                        label-width="150px"
-                        :rules="rules"
-                        :disabled="props.rowList.id != undefined"
-                        style="max-width: 500px; margin: auto"
-                    >
-                        <el-form-item label="用户模式" prop="userMode">
-                            <el-select v-model="form.userMode" placeholder="请选择用户模式">
-                                <el-option
-                                    v-for="item in ModeList"
-                                    :key="item.id"
-                                    :label="item.name"
-                                    :value="item.id"
-                                />
-                            </el-select>
-                        </el-form-item>
-                        <el-form-item label="接线类型" prop="ptType">
-                            <el-select
-                                v-model="form.ptType"
-                                @change="form.connectionMode = ''"
-                                placeholder="请选择接线类型"
-                            >
-                                <el-option
-                                    v-for="item in connection"
-                                    :key="item.value"
-                                    :label="item.name"
-                                    :value="item.value"
-                                />
-                            </el-select>
-                        </el-form-item>
-                        <el-form-item label="连接方式" v-if="form.ptType == 0" prop="connectionMode">
-                            <el-select v-model="form.connectionMode" clearable placeholder="请选择连接方式">
-                                <el-option v-for="item in method" :key="item.id" :label="item.name" :value="item.id" />
-                            </el-select>
-                        </el-form-item>
-                        <el-form-item label="功率因数" prop="k">
-                            <el-select v-model="form.k" clearable placeholder="请选择功率因数">
-                                <el-option v-for="item in factor" :key="item.id" :label="item.name" :value="item.id" />
-                            </el-select>
-                        </el-form-item>
-                        <el-form-item label="电压等级" prop="scale">
-                            <el-select v-model="form.scale" clearable placeholder="请选择电压等级">
-                                <el-option
-                                    v-for="item in levelList"
-                                    :key="item.id"
-                                    :label="item.name"
-                                    :value="item.id"
-                                />
-                            </el-select>
-                        </el-form-item>
-                        <el-form-item label="供电终端容量(MVA)" prop="deviceCapacity">
-                            <el-input-number
-                                v-model="form.deviceCapacity"
-                                style="width: 100%"
-                                :min="0.000001"
-                                placeholder="请填入供电终端容量"
-                            />
-                        </el-form-item>
-                        <el-form-item label="最小短路容量(MVA)" prop="shortCapacity">
-                            <el-input-number
-                                v-model="form.shortCapacity"
-                                style="width: 100%"
-                                :min="0.000001"
-                                placeholder="请填入最小短路容量"
-                            />
-                        </el-form-item>
-                    </el-form>
-                </div>
-            </el-card>
-
-            <el-card class="ml10" style="flex: 1">
-                <template #header>
-                    <div>
-                        <span>干扰源用户：</span>
-                        <el-select
-                            v-model="userId"
-                            placeholder="请选择用户"
-                            size="small"
-                            style="width: 240px"
-                            :disabled="props.rowList.id != undefined"
-                            @change="selChange"
-                        >
-                            <el-option
-                                v-for="item in userData"
-                                :key="item.userId"
-                                :label="item.userName"
-                                :value="item.userId"
-                            />
-                        </el-select>
-                    </div>
-                </template>
-                <div :style="`height: calc(${height} - 380px);overflow-y: auto;max-height:350px`">
-                    <vxe-table v-bind="defaultAttribute" ref="vxeRef" height="auto" :data="equipmentList">
-                        <vxe-column field="devName" title="终端名称"></vxe-column>
-                        <vxe-column field="devScale" title="电压等级" :formatter="formatter"></vxe-column>
-                        <vxe-column field="protocolCapacity" title="终端容量(MVA)"></vxe-column>
-                    </vxe-table>
-                </div>
-            </el-card>
-        </div>
-
-        <div class="bottomBox pt1" id="exportId">
-            <div v-if="showFlag">
-                <el-divider content-position="left">一级评估</el-divider>
-                <div style="height: 40px" class="pl30">
-                    结果: {{ outcome.firstResult }}%
-                    {{ outcome.firstResult > 0.1 ? '>' : (outcome.firstResult = 0.1 ? '=' : '<') }} 0.1%
-
-                    <el-tag v-if="outcome.firstResult < 0.1" type="success" effect="dark">满足</el-tag>
-                    <el-tag v-else type="warning" effect="dark">不满足</el-tag>
-                </div>
-                <div style="height: 220px" v-if="!(outcome.firstResult < 0.1)" class="mb10">
-                    <el-divider content-position="left">二级评估</el-divider>
-                    <div class="evaluateTheResults">
-                        <div style="height: 200px; flex: 1">
-                            <vxe-table style="flex: 1.5" v-bind="defaultAttribute" height="auto" :data="level2Data">
-                                <vxe-column field="name" title="谐波次数" width="180"></vxe-column>
-                                <vxe-column v-for="item in column" :field="item.field" :title="item.title">
-                                    <template #default="row">
-                                        <span v-if="row.row.name == '是否允许值'">
-                                            <Select v-if="row.row[row.column.field]" class="SelectIcon" />
-                                            <CloseBold v-else class="SelectIcon" style="color: #f38d07" />
-                                        </span>
-                                        <span v-else>{{ row.row[row.column.field] }}</span>
-                                    </template>
-                                </vxe-column>
-                            </vxe-table>
-                        </div>
-                        <div style="height: 200px; width: 350px">
-                            <MyEChart style="flex: 1" :options="pieCharts" />
-                        </div>
-                    </div>
-                </div>
-            </div>
-            <div class="button-group">
-                <el-button
-                    type="primary"
-                    icon="el-icon-VideoPlay"
-                    @click="assess"
-                    class="mt10"
-                    v-if="props.rowList.id == undefined"
-                >
-                    启动评估
-                </el-button>
-                <el-button type="primary" icon="el-icon-Download" @click="onExport" class="mt10" v-if="showFlag">
-                    导出结果
-                </el-button>
-            </div>
-        </div>
-
-        <el-dialog draggable v-model="dialogVisible" title="新增干扰源类型" width="70%">
-            <vxe-table v-bind="defaultAttribute" height="400px" ref="xTable" :data="userData">
-                <vxe-column type="checkbox" width="60"></vxe-column>
-                <vxe-column field="userName" title="用户名称"></vxe-column>
-                <vxe-column field="userType" title="用户类型" :formatter="formatter"></vxe-column>
-                <vxe-column field="voltage" title="电压等级(V)" :formatter="formatter"></vxe-column>
-                <vxe-column field="protocolCapacity" title="用户协议容量(MVA)"></vxe-column>
-            </vxe-table>
-            <template #footer>
-                <div class="dialog-footer">
-                    <el-button @click="dialogVisible = false">取消</el-button>
-                    <el-button type="primary" @click="addUse">确定</el-button>
-                </div>
-            </template>
-        </el-dialog>
-    </div>
-</template>
-<script setup lang="ts">
-import { ref, reactive, onMounted } from 'vue'
-import { defaultAttribute } from '@/components/table/defaultAttribute'
-import MyEChart from '@/components/echarts/MyEchart.vue'
-import { useDictData } from '@/stores/dictData'
-import { mainHeight } from '@/utils/layout'
-import html2canvas from 'html2canvas'
-import { Select, CloseBold } from '@element-plus/icons-vue'
-import { ElMessage } from 'element-plus'
-import { queyDetailUser, carryCapacityEvaluate, queyDeviceList } from '@/api/advance-boot/bearingCapacity'
-const props = defineProps(['rowList'])
-const dictData = useDictData()
-const height = mainHeight(80).height
-const levelList = dictData.getBasicData('Dev_Voltage_Stand')
-const connection: any = dictData.getBasicData('Dev_Connect')
-const method = dictData.getBasicData('carry_capcity_connection_mode')
-const ModeList = dictData.getBasicData('carry_capcity_user_mode')
-const uesrList = dictData.getBasicData('CARRY_CAPCITY_USER_TYPE', ['Power_Station_Users'])
-const xTable = ref()
-const formRef = ref()
-const vxeRef = ref()
-const loading = ref(false)
-const outcome: any = ref([])
-const factor = [
-    {
-        name: 0.95,
-        id: 0.95
-    },
-
-    {
-        name: 0.96,
-        id: 0.96
-    },
-    {
-        name: 0.97,
-        id: 0.97
-    },
-    {
-        name: 0.98,
-        id: 0.98
-    },
-    {
-        name: 0.99,
-        id: 0.99
-    },
-    {
-        name: 1.0,
-        id: 1.0
-    }
-]
-
-const dialogVisible = ref(false)
-const showFlag = ref(false)
-const tableData = ref([])
-const equipmentList: any = ref([])
-const userId = ref('')
-const level2Data = ref([
-    {
-        name: '谐波电流幅值(A)'
-    },
-    {
-        name: '国标限值(A)'
-    },
-    {
-        name: '是否允许值'
-    }
-])
-
-const column: any = ref([])
-const userData: any = ref([])
-const form: any = ref({
-    ptType: '0',
-    connectionMode: '',
-    userMode: '',
-    k: '1',
-    scale: '',
-    shortCapacity: 1,
-    deviceCapacity: 1,
-    userList: []
-})
-const rules = {
-    userMode: [{ required: true, message: '请选用户', trigger: 'change' }],
-    ptType: [{ required: true, message: '请选择接线类型', trigger: 'change' }],
-    connectionMode: [{ required: true, message: '请选择连接方式', trigger: 'change' }],
-    k: [{ required: true, message: '请选择功率因数', trigger: 'change' }],
-    scale: [{ required: true, message: '请选择电压等级', trigger: 'change' }],
-    shortCapacity: [{ required: true, message: '请填入供电终端容量', trigger: 'blur' }],
-    deviceCapacity: [{ required: true, message: '请填入最小短路容量', trigger: 'blur' }]
-}
-const pieCharts = ref({})
-
-// 查询用户
-const getUser = () => {
-    queyDetailUser({ pageNum: 1, pageSize: 10000, userTypeList: uesrList.map(item => item.id) }).then(res => {
-        userData.value = res.data.records
-    })
-}
-
-// 添加用户
-const addUse = () => {
-    tableData.value = []
-    tableData.value.push(...xTable.value.getCheckboxRecords())
-    // const res = new Map()
-    // tableData.value = tableData.value.filter((arr: any) => !res.has(arr.userId) && res.set(arr.userId, 1))
-    dialogVisible.value = false
-}
-// 查看终端
-const equipment = (row: any) => {}
-// 承载能力评估
-const assess = () => {
-    // vxeRef.value.getRadioRecord()
-
-    if (equipmentList.value.length == null) {
-        return ElMessage.warning('请选择用户')
-    }
-    loading.value = true
-    formRef.value.validate((valid: any) => {
-        if (valid) {
-            form.value.devList = equipmentList.value
-            carryCapacityEvaluate(form.value).then(res => {
-                rendering(res.data)
-                loading.value = false
-            })
-        }
-    })
-}
-// 设置图
-const rendering = (row: any) => {
-    column.value = []
-    let ChartsList = [
-        {
-            name: '安全',
-            value: 0
-        },
-        {
-            name: 'III级预警',
-            value: 0
-        },
-        {
-            name: 'II级预警',
-            value: 0
-        },
-        {
-            name: 'I级预警',
-            value: 0
-        },
-        {
-            name: '禁止接入',
-            value: 0
-        },
-        {
-            name: '允许接入',
-            value: 0
-        }
-    ]
-    outcome.value = row
-    row.iresultList.forEach((item: any) => {
-        column.value.push({
-            title: item.time + '次',
-            field: 'num' + item.time
-        })
-
-        level2Data.value[0]['num' + item.time] = item.i.toFixed(3)
-        level2Data.value[1]['num' + item.time] = item.i_limit.toFixed(3)
-        level2Data.value[2]['num' + item.time] = item.i < item.i_limit ? true : false
-    })
-    showFlag.value = true
-    row.reslutLevel == null ? '' : (ChartsList[row.reslutLevel - 1].value = 1)
-    pieCharts.value = {
-        // title: {
-        //     text: '评估结果',
-        //     x: 'center',
-
-        //     textStyle: {
-        //         fontWeight: 'normal'
-        //     }
-        // },
-        legend: {
-            type: 'scroll',
-            orient: 'vertical',
-            right: '10px',
-            selectedMode: false // 是否允许点击
-        },
-        toolbox: { show: false },
-        xAxis: {
-            show: false
-        },
-        yAxis: {
-            show: false
-        },
-        color: ['#2E7D32', '#0288D1', '#F57C00', '#E64A19', '#C62828', '#00897B'],
-        dataZoom: { show: false },
-        series: [
-            {
-                type: 'pie',
-                center: ['40%', '55%'],
-                radius: ['55%', '68%'],
-                label: {
-                    normal: {
-                        show: false
-                    }
-                },
-                data: ChartsList
-            }
-        ],
-        options: {
-            title: [
-                {
-                    text: '评估结果',
-                    left: '27%'
-                },
-                {
-                    text:
-                        row.reslutLevel == 6
-                            ? '允许接入'
-                            : row.reslutLevel == 5
-                            ? '禁止接入'
-                            : row.reslutLevel == 4
-                            ? 'I级预警'
-                            : row.reslutLevel == 3
-                            ? 'II级预警'
-                            : row.reslutLevel == 2
-                            ? 'III级预警'
-                            : row.reslutLevel == 1
-                            ? '安全'
-                            : '',
-                    left: row.reslutLevel == 1 ? '33%' : '29%',
-                    top: '48%',
-                    textStyle: {
-                        color:
-                            row.reslutLevel == 6
-                                ? '#00897B'
-                                : row.reslutLevel == 5
-                                ? '#C62828'
-                                : row.reslutLevel == 4
-                                ? '#E64A19'
-                                : row.reslutLevel == 3
-                                ? '#F57C00'
-                                : row.reslutLevel == 2
-                                ? '#0288D1'
-                                : '#2E7D32',
-                        foontWeight: '500'
-                    }
-                }
-            ]
-        }
-    }
-}
-
-// 过滤数据
-const formatter = (row: any) => {
-    if (row.column.field == 'userType') {
-        return uesrList.filter(item => item.id == row.cellValue)[0].name
-    } else if (row.column.field == 'devScale') {
-        return levelList.filter(item => item.id == row.cellValue)[0].name
-    } else if (row.column.field == 'voltage') {
-        return levelList.filter(item => item.id == row.cellValue)[0].name
-    } else {
-        return row.cellValue
-    }
-}
-// 查询终端
-const selChange = async (e: any) => {
-    loading.value = true
-    await queyDeviceList({
-        userId: e
-    }).then(res => {
-        equipmentList.value = res.data
-    })
-    loading.value = false
-}
-// 导出
-const onExport = () => {
-    // 转换成canvas
-    html2canvas(document.getElementById('exportId'), {
-        scale: 2
-    }).then(function (canvas) {
-        // 创建a标签，实现下载
-        let creatIMg = document.createElement('a')
-        creatIMg.download = '光伏电站承载能力评估结果.png' // 设置下载的文件名，
-        creatIMg.href = canvas.toDataURL() // 下载url
-        creatIMg.click()
-        creatIMg.remove() // 下载之后把创建的元素删除
-    })
-}
-
-onMounted(() => {
-    getUser()
-    formRef.value?.resetFields()
-    // 查看
-
-    if (props.rowList.userId != undefined) {
-        form.value = props.rowList
-        userId.value = props.rowList.userId
-        selChange(props.rowList.userId)
-        rendering(props.rowList)
-    }
-})
-</script>
-<style lang="scss" scoped>
-.bottomBox {
-    position: relative;
-    .button-group {
-        position: absolute;
-        top: 0px;
-        right: 10px;
-    }
-}
-// .card-header {
-//     font-weight: 600;
-// }
-.SelectIcon {
-    height: 18px;
-    margin-top: 5px;
-    color: blue;
-}
-:deep(.el-select__placeholder) {
-    span {
-        font-size: 14px;
-        font-weight: 500;
-    }
-}
-.card-container {
-    display: flex;
-}
-.evaluateTheResults {
-    display: flex;
-}
-</style>
+<template>
+    <div v-loading="loading">
+        <div class="card-container mb10">
+            <el-card style="width: 700px">
+                <template #header>
+                    <div class="card-header">
+                        <span style="line-height: 32px">公共连接点参数</span>
+                    </div>
+                </template>
+                <div :style="`height: calc(${height} - 420px);overflow-y: auto;max-height:350px`">
+                    <el-form
+                        ref="formRef"
+                        :model="form"
+                        label-width="150px"
+                        :rules="rules"
+                        :disabled="props.rowList.id != undefined"
+                        style="max-width: 500px; margin: auto"
+                    >
+                        <el-form-item label="用户模式" prop="userMode">
+                            <el-select v-model="form.userMode" placeholder="请选择用户模式">
+                                <el-option
+                                    v-for="item in ModeList"
+                                    :key="item.id"
+                                    :label="item.name"
+                                    :value="item.id"
+                                />
+                            </el-select>
+                        </el-form-item>
+                        <el-form-item label="接线类型" prop="ptType">
+                            <el-select
+                                v-model="form.ptType"
+                                @change="form.connectionMode = ''"
+                                placeholder="请选择接线类型"
+                            >
+                                <el-option
+                                    v-for="item in connection"
+                                    :key="item.value"
+                                    :label="item.name"
+                                    :value="item.value"
+                                />
+                            </el-select>
+                        </el-form-item>
+                        <el-form-item label="连接方式" v-if="form.ptType == 0" prop="connectionMode">
+                            <el-select v-model="form.connectionMode" clearable placeholder="请选择连接方式">
+                                <el-option v-for="item in method" :key="item.id" :label="item.name" :value="item.id" />
+                            </el-select>
+                        </el-form-item>
+                        <el-form-item label="功率因数" prop="k">
+                            <el-select v-model="form.k" clearable placeholder="请选择功率因数">
+                                <el-option v-for="item in factor" :key="item.id" :label="item.name" :value="item.id" />
+                            </el-select>
+                        </el-form-item>
+                        <el-form-item label="电压等级" prop="scale">
+                            <el-select v-model="form.scale" clearable placeholder="请选择电压等级">
+                                <el-option
+                                    v-for="item in levelList"
+                                    :key="item.id"
+                                    :label="item.name"
+                                    :value="item.id"
+                                />
+                            </el-select>
+                        </el-form-item>
+                        <el-form-item label="供电终端容量(MVA)" prop="deviceCapacity">
+                            <el-input-number
+                                v-model="form.deviceCapacity"
+                                style="width: 100%"
+                                :min="0.000001"
+                                placeholder="请填入供电终端容量"
+                            />
+                        </el-form-item>
+                        <el-form-item label="最小短路容量(MVA)" prop="shortCapacity">
+                            <el-input-number
+                                v-model="form.shortCapacity"
+                                style="width: 100%"
+                                :min="0.000001"
+                                placeholder="请填入最小短路容量"
+                            />
+                        </el-form-item>
+                    </el-form>
+                </div>
+            </el-card>
+
+            <el-card class="ml10" style="flex: 1">
+                <template #header>
+                    <div>
+                        <span>干扰源用户：</span>
+                        <el-select
+                            v-model="userId"
+                            placeholder="请选择用户"
+                            size="small"
+                            style="width: 240px"
+                            :disabled="props.rowList.id != undefined"
+                            @change="selChange"
+                        >
+                            <el-option
+                                v-for="item in userData"
+                                :key="item.userId"
+                                :label="item.userName"
+                                :value="item.userId"
+                            />
+                        </el-select>
+                    </div>
+                </template>
+                <div :style="`height: calc(${height} - 420px);overflow-y: auto;max-height:350px`">
+                    <vxe-table v-bind="defaultAttribute" ref="vxeRef" height="auto" :data="equipmentList">
+                        <vxe-column field="devName" title="终端名称"></vxe-column>
+                        <vxe-column field="devScale" title="电压等级" :formatter="formatter"></vxe-column>
+                        <vxe-column field="protocolCapacity" title="终端容量(MVA)"></vxe-column>
+                    </vxe-table>
+                </div>
+            </el-card>
+            <div class="button-group">
+                <el-button
+                    type="primary"
+                    icon="el-icon-VideoPlay"
+                    @click="assess"
+                    class="mt10"
+                    v-if="props.rowList.id == undefined"
+                >
+                    启动评估
+                </el-button>
+                <el-button type="primary" icon="el-icon-Download" @click="onExport" class="mt10" v-if="showFlag">
+                    导出结果
+                </el-button>
+            </div>
+        </div>
+
+        <div class="bottomBox pt1 mt40" id="exportId">
+            <div v-if="showFlag">
+                <el-divider content-position="left">一级评估</el-divider>
+                <div style="height: 40px" class="pl30">
+                    结果: {{ outcome.firstResult }}%
+                    {{ outcome.firstResult > 0.1 ? '>' : (outcome.firstResult = 0.1 ? '=' : '<') }} 0.1% 
+
+                    <el-tag v-if="outcome.firstResult < 0.1" type="success" effect="dark">满足</el-tag>
+                    <el-tag v-else type="warning" effect="dark">不满足</el-tag>
+                </div>
+                <div style="height: 220px" v-if="!(outcome.firstResult < 0.1)" class="mb10">
+                    <el-divider content-position="left">二级评估</el-divider>
+                    <div class="evaluateTheResults">
+                        <div style="height: 200px; width: calc(100% - 350px)">
+                            <vxe-table v-bind="defaultAttribute" height="auto" :data="level2Data">
+                                <vxe-column field="name" title="谐波次数" width="180"></vxe-column>
+                                <vxe-column v-for="item in column" :field="item.field" :title="item.title">
+                                    <template #default="row">
+                                        <span v-if="row.row.name == '是否允许值'">
+                                            <Select v-if="row.row[row.column.field]" class="SelectIcon" />
+                                            <CloseBold v-else class="SelectIcon" style="color: #f38d07" />
+                                        </span>
+                                        <span v-else>{{ row.row[row.column.field] }}</span>
+                                    </template>
+                                </vxe-column>
+                            </vxe-table>
+                        </div>
+                        <div style="height: 200px; width: 350px">
+                            <MyEChart :options="pieCharts" />
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <el-dialog draggable v-model="dialogVisible" title="新增干扰源类型" width="70%">
+            <vxe-table v-bind="defaultAttribute" height="400px" ref="xTable" :data="userData">
+                <vxe-column type="checkbox" width="60"></vxe-column>
+                <vxe-column field="userName" title="用户名称"></vxe-column>
+                <vxe-column field="userType" title="用户类型" :formatter="formatter"></vxe-column>
+                <vxe-column field="voltage" title="电压等级(V)" :formatter="formatter"></vxe-column>
+                <vxe-column field="protocolCapacity" title="用户协议容量(MVA)"></vxe-column>
+            </vxe-table>
+            <template #footer>
+                <div class="dialog-footer">
+                    <el-button @click="dialogVisible = false">取消</el-button>
+                    <el-button type="primary" @click="addUse">确定</el-button>
+                </div>
+            </template>
+        </el-dialog>
+    </div>
+</template>
+<script setup lang="ts">
+import { ref, reactive, onMounted } from 'vue'
+import { defaultAttribute } from '@/components/table/defaultAttribute'
+import MyEChart from '@/components/echarts/MyEchart.vue'
+import { useDictData } from '@/stores/dictData'
+import { mainHeight } from '@/utils/layout'
+import html2canvas from 'html2canvas'
+import { Select, CloseBold } from '@element-plus/icons-vue'
+import { ElMessage } from 'element-plus'
+import { queyDetailUser, carryCapacityEvaluate, queyDeviceList } from '@/api/advance-boot/bearingCapacity'
+const props = defineProps(['rowList'])
+const dictData = useDictData()
+const height = mainHeight(80).height
+const levelList = dictData.getBasicData('Dev_Voltage_Stand')
+const connection: any = dictData.getBasicData('Dev_Connect')
+const method = dictData.getBasicData('carry_capcity_connection_mode')
+const ModeList = dictData.getBasicData('carry_capcity_user_mode')
+const uesrList = dictData.getBasicData('CARRY_CAPCITY_USER_TYPE', ['Power_Station_Users'])
+const xTable = ref()
+const formRef = ref()
+const vxeRef = ref()
+const loading = ref(false)
+const outcome: any = ref([])
+const factor = [
+    {
+        name: 0.95,
+        id: 0.95
+    },
+
+    {
+        name: 0.96,
+        id: 0.96
+    },
+    {
+        name: 0.97,
+        id: 0.97
+    },
+    {
+        name: 0.98,
+        id: 0.98
+    },
+    {
+        name: 0.99,
+        id: 0.99
+    },
+    {
+        name: 1.0,
+        id: 1.0
+    }
+]
+
+const dialogVisible = ref(false)
+const showFlag = ref(false)
+const tableData = ref([])
+const equipmentList: any = ref([])
+const userId = ref('')
+const level2Data = ref([
+    {
+        name: '谐波电流幅值(A)'
+    },
+    {
+        name: '国标限值(A)'
+    },
+    {
+        name: '是否允许值'
+    }
+])
+
+const column: any = ref([])
+const userData: any = ref([])
+const form: any = ref({
+    ptType: '0',
+    connectionMode: '',
+    userMode: '',
+    k: '1',
+    scale: '',
+    shortCapacity: 1,
+    deviceCapacity: 1,
+    userList: []
+})
+const rules = {
+    userMode: [{ required: true, message: '请选用户', trigger: 'change' }],
+    ptType: [{ required: true, message: '请选择接线类型', trigger: 'change' }],
+    connectionMode: [{ required: true, message: '请选择连接方式', trigger: 'change' }],
+    k: [{ required: true, message: '请选择功率因数', trigger: 'change' }],
+    scale: [{ required: true, message: '请选择电压等级', trigger: 'change' }],
+    shortCapacity: [{ required: true, message: '请填入供电终端容量', trigger: 'blur' }],
+    deviceCapacity: [{ required: true, message: '请填入最小短路容量', trigger: 'blur' }]
+}
+const pieCharts = ref({})
+
+// 查询用户
+const getUser = () => {
+    queyDetailUser({ pageNum: 1, pageSize: 10000, userTypeList: uesrList.map(item => item.id) }).then(res => {
+        userData.value = res.data.records
+    })
+}
+
+// 添加用户
+const addUse = () => {
+    tableData.value = []
+    tableData.value.push(...xTable.value.getCheckboxRecords())
+    // const res = new Map()
+    // tableData.value = tableData.value.filter((arr: any) => !res.has(arr.userId) && res.set(arr.userId, 1))
+    dialogVisible.value = false
+}
+// 查看终端
+const equipment = (row: any) => {}
+// 承载能力评估
+const assess = () => {
+    // vxeRef.value.getRadioRecord()
+
+    if (equipmentList.value.length == null) {
+        return ElMessage.warning('请选择用户')
+    }
+    loading.value = true
+    formRef.value.validate((valid: any) => {
+        if (valid) {
+            form.value.devList = equipmentList.value
+            carryCapacityEvaluate(form.value).then(res => {
+                rendering(res.data)
+                loading.value = false
+            })
+        }
+    })
+}
+// 设置图
+const rendering = (row: any) => {
+    column.value = []
+    let ChartsList = [
+        {
+            name: '安全',
+            value: 0
+        },
+        {
+            name: 'III级预警',
+            value: 0
+        },
+        {
+            name: 'II级预警',
+            value: 0
+        },
+        {
+            name: 'I级预警',
+            value: 0
+        },
+        {
+            name: '禁止接入',
+            value: 0
+        },
+        {
+            name: '允许接入',
+            value: 0
+        }
+    ]
+    outcome.value = row
+    row.iresultList.forEach((item: any) => {
+        column.value.push({
+            title: item.time + '次',
+            field: 'num' + item.time
+        })
+
+        level2Data.value[0]['num' + item.time] = item.i.toFixed(3)
+        level2Data.value[1]['num' + item.time] = item.i_limit.toFixed(3)
+        level2Data.value[2]['num' + item.time] = item.i < item.i_limit ? true : false
+    })
+    showFlag.value = true
+    row.reslutLevel == null ? '' : (ChartsList[row.reslutLevel - 1].value = 1)
+    pieCharts.value = {
+        // title: {
+        //     text: '评估结果',
+        //     x: 'center',
+
+        //     textStyle: {
+        //         fontWeight: 'normal'
+        //     }
+        // },
+        legend: {
+            type: 'scroll',
+            orient: 'vertical',
+            right: '10px',
+            selectedMode: false // 是否允许点击
+        },
+        toolbox: { show: false },
+        xAxis: {
+            show: false
+        },
+        yAxis: {
+            show: false
+        },
+        color: ['#2E7D32', '#0288D1', '#F57C00', '#E64A19', '#C62828', '#00897B'],
+        dataZoom: { show: false },
+        series: [
+            {
+                type: 'pie',
+                center: ['40%', '55%'],
+                radius: ['55%', '68%'],
+                label: {
+                    normal: {
+                        show: false
+                    }
+                },
+                data: ChartsList
+            }
+        ],
+        options: {
+            title: [
+                {
+                    text: '评估结果',
+                    left: '27%'
+                },
+                {
+                    text:
+                        row.reslutLevel == 6
+                            ? '允许接入'
+                            : row.reslutLevel == 5
+                            ? '禁止接入'
+                            : row.reslutLevel == 4
+                            ? 'I级预警'
+                            : row.reslutLevel == 3
+                            ? 'II级预警'
+                            : row.reslutLevel == 2
+                            ? 'III级预警'
+                            : row.reslutLevel == 1
+                            ? '安全'
+                            : '',
+                    left: row.reslutLevel == 1 ? '33%' : '29%',
+                    top: '48%',
+                    textStyle: {
+                        color:
+                            row.reslutLevel == 6
+                                ? '#00897B'
+                                : row.reslutLevel == 5
+                                ? '#C62828'
+                                : row.reslutLevel == 4
+                                ? '#E64A19'
+                                : row.reslutLevel == 3
+                                ? '#F57C00'
+                                : row.reslutLevel == 2
+                                ? '#0288D1'
+                                : '#2E7D32',
+                        foontWeight: '500'
+                    }
+                }
+            ]
+        }
+    }
+}
+
+// 过滤数据
+const formatter = (row: any) => {
+    if (row.column.field == 'userType') {
+        return uesrList.filter(item => item.id == row.cellValue)[0].name
+    } else if (row.column.field == 'devScale') {
+        return levelList.filter(item => item.id == row.cellValue)[0].name
+    } else if (row.column.field == 'voltage') {
+        return levelList.filter(item => item.id == row.cellValue)[0].name
+    } else {
+        return row.cellValue
+    }
+}
+// 查询终端
+const selChange = async (e: any) => {
+    loading.value = true
+    await queyDeviceList({
+        userId: e
+    }).then(res => {
+        equipmentList.value = res.data
+    })
+    loading.value = false
+}
+// 导出
+const onExport = () => {
+    console.log("🚀 ~ onExport ~ document.getElementById('exportId'):", document.getElementById('exportId'))
+
+    // 转换成canvas
+    html2canvas(document.getElementById('exportId'), {
+        useCORS: true, // 允许跨域图片
+        allowTaint: true, // 允许污染的画布
+        logging: false, // 关闭日志
+        scale: 2 // 提高缩放比例以获得更清晰的截图
+    }).then(function (canvas) {
+        console.log('🚀 ~ onExport ~ canvas:', canvas)
+        // 创建a标签，实现下载
+        let creatIMg = document.createElement('a')
+        creatIMg.download = '光伏电站承载能力评估结果.png' // 设置下载的文件名，
+
+        creatIMg.href = canvas.toDataURL() // 下载url
+        creatIMg.click()
+        creatIMg.remove() // 下载之后把创建的元素删除
+    })
+}
+
+onMounted(() => {
+    getUser()
+    formRef.value?.resetFields()
+    // 查看
+
+    if (props.rowList.userId != undefined) {
+        form.value = props.rowList
+        userId.value = props.rowList.userId
+        selChange(props.rowList.userId)
+        rendering(props.rowList)
+    }
+})
+</script>
+<style lang="scss" scoped>
+.button-group {
+    position: absolute;
+    bottom: -45px;
+    right: 10px;
+}
+// .card-header {
+//     font-weight: 600;
+// }
+.SelectIcon {
+    height: 18px;
+    margin-top: 5px;
+    color: blue;
+}
+:deep(.el-select__placeholder) {
+    span {
+        font-size: 14px;
+        font-weight: 500;
+    }
+}
+.card-container {
+    display: flex;
+    position: relative;
+}
+.evaluateTheResults {
+    display: flex;
+}
+:deep(.el-tag) {
+    display: inline-block;
+    width: 55px;
+    height: 24px;
+    .el-tag__content{
+        line-height: 23px;
+    }
+    
+}
+</style>
diff --git a/src/views/pqs/bearingCapacity/evaluationList/components/photovoltaic.vue b/src/views/pqs/bearingCapacity/evaluationList/components/photovoltaic.vue
index d1a35742..eb5723a6 100644
--- a/src/views/pqs/bearingCapacity/evaluationList/components/photovoltaic.vue
+++ b/src/views/pqs/bearingCapacity/evaluationList/components/photovoltaic.vue
@@ -1,905 +1,901 @@
-<template>
-    <div>
-        <splitpanes :style="{ height: height }" class="default-theme" id="navigation-splitpanes">
-            <pane :size="size">
-                <bearingTree
-                    ref="TreeRef"
-                    :default-expand-all="false"
-                    :default-expanded-keys="monitoringPoint.state.lineId ? [monitoringPoint.state.lineId] : []"
-                    :current-node-key="monitoringPoint.state.lineId"
-                    @node-click="handleNodeClick"
-                    @init="handleNodeClick"
-                ></bearingTree>
-            </pane>
-            <pane style="background: #fff">
-                <TableHeader :showSearch="false" v-show="props.rowList.id == undefined">
-                    <template #select>
-                        <el-form-item label="时间">
-                            <DatePicker ref="datePickerRef"></DatePicker>
-                        </el-form-item>
-                    </template>
-                    <template #operation>
-                        <el-button type="primary" icon="el-icon-Search" @click="onSubmit">查询</el-button>
-                        <el-button type="primary" icon="el-icon-Download" @click="exportTemplate">导出模板</el-button>
-                        <el-upload
-                            action=""
-                            accept=".xlsx"
-                            :show-file-list="false"
-                            :auto-upload="false"
-                            :on-change="choose"
-                        >
-                            <el-button type="primary" class="ml10" icon="el-icon-Upload">离线导入</el-button>
-                        </el-upload>
-                    </template>
-                </TableHeader>
-
-                <div v-loading="loading" class="pt5">
-                    <el-divider content-position="left">基础数据</el-divider>
-                    <el-descriptions class="mb10" :column="4" size="" border>
-                        <el-descriptions-item label="用户名称" label-align="center" width="20%">
-                            <el-select
-                                v-model="user"
-                                placeholder="请选择用户名称"
-                                size="small"
-                                filterable
-                                v-if="props.rowList.id == undefined"
-                                style="width: 100%"
-                                value-key="userId"
-                                @change="userChange"
-                            >
-                                <el-option v-for="item in userList" :key="item" :label="item.userName" :value="item" />
-                            </el-select>
-                            <span v-else>{{ props.rowList.userName }}</span>
-                        </el-descriptions-item>
-                        <el-descriptions-item label="拟接入光伏容量" label-align="center" width="10%">
-                            {{ userData?.protocolCapacity }}MVA
-                        </el-descriptions-item>
-                        <el-descriptions-item label="电压等级" label-align="center" width="10%">
-                            {{ voltageLevelArr.filter(item => item.id === userData?.voltage)[0]?.name }}
-                        </el-descriptions-item>
-                        <el-descriptions-item label="额定容量" label-align="center" width="10%">
-                            {{ lineList?.standardCapacity }}MVA
-                        </el-descriptions-item>
-                    </el-descriptions>
-                    <div :style="`height: calc(${tabsHeight} - ${props.rowList.id == undefined ? '256px' : '188px'})`">
-                        <el-tabs
-                            v-model="activeName"
-                            class="mb10"
-                            v-if="showTabs"
-                            @tab-change="tabChange"
-                            :style="`height: calc(${tabsHeight} - ${
-                                props.rowList.id == undefined ? '256px' : '188px'
-                            })`"
-                        >
-                            <el-tab-pane label="有功功率" name="1" class="mt10">
-                                <MyEChart :options="options1" />
-                            </el-tab-pane>
-                            <el-tab-pane label="无功功率" name="2" class="mt10">
-                                <MyEChart :options="options" />
-                            </el-tab-pane>
-                            <el-tab-pane label="谐波电流幅值" name="3" class="mt10" style="position: relative">
-                                <div style="position: absolute; z-index: 99; top: 10px; right: 200px; width: 80px">
-                                    <el-select
-                                        v-model="harmonicValue"
-                                        placeholder="请选择谐波"
-                                        @change="amplitudeQuery"
-                                    >
-                                        <el-option
-                                            v-for="item in harmonic"
-                                            :key="item.value"
-                                            :label="item.label"
-                                            :value="item.value"
-                                        ></el-option>
-                                    </el-select>
-                                </div>
-
-                                <MyEChart :options="options" v-loading="currentLod" />
-                            </el-tab-pane>
-                            <el-tab-pane label="首端电压模型参数" name="4">
-                                <vxe-table height="auto" v-bind="defaultAttribute" :data="voltageList">
-                                    <vxe-colgroup field="group0" title="模型参数">
-                                        <vxe-column field="name" width="180" title="相别"></vxe-column>
-                                    </vxe-colgroup>
-
-                                    <vxe-column field="a" title="a"></vxe-column>
-                                    <vxe-column field="b" title="b"></vxe-column>
-                                    <vxe-column field="c" title="c"></vxe-column>
-                                </vxe-table>
-                            </el-tab-pane>
-                        </el-tabs>
-                    </div>
-
-                    <el-divider content-position="left" v-show="showBtn">评估结果</el-divider>
-                    <div class="bottomBox">
-                        <div class="evaluateTheResults" id="evaluateTheResults" v-if="showAssess">
-                            <div style="height: 250px; flex: 1">
-                                <vxe-table
-                                    style="flex: 1.5"
-                                    v-bind="defaultAttribute"
-                                    height="auto"
-                                    ref="xTable"
-                                    :data="tableData"
-                                >
-                                    <vxe-colgroup field="group0" title="等级">
-                                        <vxe-column field="name" width="180" title="结果"></vxe-column>
-                                    </vxe-colgroup>
-                                    <vxe-column field="level1" title="安全">
-                                        <template #default="{ row }">
-                                            <Select v-if="row.level1 == 1" class="SelectIcon" style="color: #2E7D32" />
-                                            <span v-else>{{ row.level1 }}</span>
-                                        </template>
-                                    </vxe-column>
-                                    <vxe-column field="level2" title="III级预警">
-                                        <template #default="{ row }">
-                                            <Select v-if="row.level2 == 1" class="SelectIcon" style="color: #0288D1" />
-                                            <span v-else>{{ row.level2 }}</span>
-                                        </template>
-                                    </vxe-column>
-                                    <vxe-column field="level3" title="II级预警">
-                                        <template #default="{ row }">
-                                            <Select v-if="row.level3 == 1" class="SelectIcon" style="color: #F57C00" />
-                                            <span v-else>{{ row.level3 }}</span>
-                                        </template>
-                                    </vxe-column>
-                                    <vxe-column field="level4" title="I级预警">
-                                        <template #default="{ row }">
-                                            <Select v-if="row.level4 == 1" class="SelectIcon" style="color: #C62828" />
-                                            <span v-else>{{ row.level4 }}</span>
-                                        </template>
-                                    </vxe-column>
-                                </vxe-table>
-                            </div>
-                            <div style="height: 250px; width: 350px">
-                                <MyEChart style="flex: 1" :options="pieCharts" />
-                            </div>
-                        </div>
-
-                        <el-button
-                            type="primary"
-                            icon="el-icon-VideoPlay"
-                            @click="assess"
-                            v-if="showBtn && props.rowList.id == undefined && !showAssess"
-                        >
-                            启动评估
-                        </el-button>
-                        <el-button type="primary" icon="el-icon-Download" @click="onExport" v-if="showAssess">
-                            导出结果
-                        </el-button>
-                    </div>
-                </div>
-            </pane>
-        </splitpanes>
-    </div>
-</template>
-
-<script setup lang="ts">
-import { onMounted, ref, provide } from 'vue'
-import 'splitpanes/dist/splitpanes.css'
-import { Splitpanes, Pane } from 'splitpanes'
-import bearingTree from '@/components/tree/pqs/bearingTree.vue'
-import DatePicker from '@/components/form/datePicker/index.vue'
-import { mainHeight } from '@/utils/layout'
-import TableHeader from '@/components/table/header/index.vue'
-import MyEChart from '@/components/echarts/MyEchart.vue'
-import { useMonitoringPoint } from '@/stores/monitoringPoint'
-import { defaultAttribute } from '@/components/table/defaultAttribute'
-import { harmonicOptions } from '@/utils/dictionary'
-import { Select } from '@element-plus/icons-vue'
-import { ElMessage } from 'element-plus'
-import {
-    queryCarryCapacityData,
-    uploadExcel,
-    queyDetailUser,
-    queryCarryCapacityQData,
-    queryCarryCapacityIData,
-    carryCapacityCal,
-    getExcelTemplate,
-    getLineDetailData,
-    modelTraining,
-    queryResultbyCondition
-} from '@/api/advance-boot/bearingCapacity'
-import html2canvas from 'html2canvas'
-import { yMethod } from '@/utils/echartMethod'
-import { useDictData } from '@/stores/dictData'
-const props = defineProps(['rowList'])
-const harmonic = harmonicOptions.filter(item => item.value < 26)
-const currentLod = ref(false)
-const monitoringPoint = useMonitoringPoint()
-const size = ref(0)
-const dictData = useDictData()
-const datePickerRef = ref()
-const height = mainHeight(80).height
-const tabsHeight = mainHeight(260).height
-const voltageLevelArr = dictData.getBasicData('Dev_Voltage_Stand')
-const tableData: any = ref([
-    {
-        name: '配变首端电压',
-        level1: '/',
-        level2: '/',
-        level3: '/',
-        level4: '/'
-    },
-    {
-        name: '配变功率因素',
-        level1: '/',
-        level2: '/',
-        level3: '/',
-        level4: '/'
-    },
-    {
-        name: '等效负载率最小值',
-        level1: '/',
-        level2: '/',
-        level3: '/',
-        level4: '/'
-    },
-    {
-        name: '各次谐波电流幅值',
-        level1: '/',
-        level2: '/',
-        level3: '/',
-        level4: '/'
-    }
-])
-const harmonicValue = ref(2)
-const TreeRef = ref()
-const voltageList: any = ref([])
-const showAssess = ref(false)
-const showBtn = ref(false)
-const flag = ref(true)
-const loading = ref(false)
-const user = ref('')
-const userList: any = ref([])
-const lineList: any = ref([])
-const options = ref({})
-const options1 = ref({})
-const options2 = ref({})
-const options3 = ref({})
-const pieCharts = ref({})
-const showTabs = ref(false)
-
-const activeName = ref('1')
-const userData: any = ref({})
-const stringMap: any = ref({})
-const p_βminMap: any = ref({})
-const i_βmax: any = ref({})
-const q_βminMap: any = ref({})
-const dotList: any = ref({
-    name: monitoringPoint.state.lineName.split('>')[3],
-    id: monitoringPoint.state.lineId,
-    level: 6
-})
-onMounted(() => {
-    const dom = document.getElementById('navigation-splitpanes')
-
-    if (dom) {
-        size.value = Math.round((180 / (dom.offsetHeight + 60)) * 100)
-    }
-    datePickerRef.value.setTimeOptions([{ label: '周', value: 4 }])
-    datePickerRef.value.setTheDate(4)
-    info()
-})
-const info = () => {
-    queyDetailUser({
-        pageNum: 1,
-        pageSize: 1000,
-        userType: dictData.getBasicData('CARRY_CAPCITY_USER_TYPE', [
-            'Electrified_Rail_Users',
-            'Charging_Station_Users',
-            'Electric_Heating_Load_Users'
-        ])[0]?.id
-    }).then(res => {
-        userList.value = res.data.records
-
-        if (props.rowList.id != undefined) {
-            user.value = userList.value.filter(item => item.userId == props.rowList.userId)[0]
-            userChange(user.value)
-        } else {
-            user.value = userList.value[0] || {}
-            userData.value = res.data.records[0] || {}
-        }
-    })
-}
-
-// 查询
-const onSubmit = async () => {
-    activeName.value = '1'
-
-    if (dotList.value.level != 6) {
-        return ElMessage.warning('请选择线路')
-    }
-    showAssess.value = false
-    showTabs.value = false
-    loading.value = true
-
-    let form = {
-        endTime: props.rowList.endTime || datePickerRef.value.timeValue[1],
-        lineId: props.rowList.lineId || dotList.value.id,
-        startTime: props.rowList.startTime || datePickerRef.value.timeValue[0],
-        userId: dictData.state.area[0].id,
-        time: harmonicValue.value
-    }
-    initEchart(1, '有功功率')
-    initEchart(2, '无功功率')
-    initEchart(3, '谐波电流幅值')
-    voltageList.value = []
-    showBtn.value = false
-    if (props.rowList.id != undefined) {
-        // user.value = props.rowList
-
-        rendering(props.rowList)
-    }
-
-    try {
-        // 显示加载状态
-
-        // 获取有功功率数据
-        const res1 = await queryCarryCapacityData(form)
-        stringMap.value = res1.data.stringMap
-        p_βminMap.value = res1.data.p_βminMap
-
-        // 处理电压列表数据
-        voltageList.value = Object.entries(res1.data.stringMap).map(([k, values]) => ({
-            name: k,
-            c: values[0],
-            a: values[1],
-            b: values[2]
-        }))
-
-        // 设置有功功率图表
-        setEChart(1, res1.data.data, '有功功率', 'w')
-
-        // 获取无功功率数据并设置图表
-        const res2 = await queryCarryCapacityQData(form)
-        q_βminMap.value = res2.data.q_βminMap
-        setEChart(2, res2.data.data, '无功功率', 'Var')
-
-        // 获取谐波电流数据并设置图表
-        const res3 = await queryCarryCapacityIData(form)
-        i_βmax.value = res3.data.i_βmax
-        setEChart(3, res3.data.data, '谐波电流幅值', 'A')
-
-        // 显示结果和按钮
-        showTabs.value = true
-        showBtn.value = true
-        currentLod.value = false
-        // 如果没有rowList.id，查询结果
-        if (props.rowList.id === undefined) {
-            const res4 = await queryResultbyCondition({ ...form, userId: user.value.userId })
-            rendering(res4.data)
-        }
-    } catch (err) {
-        console.error('请求出错:', err)
-    } finally {
-        // 无论成功失败，都关闭加载状态
-        loading.value = false
-    }
-
-    // Promise.all([queryCarryCapacityData(form), queryCarryCapacityQData(form), queryCarryCapacityIData(form)])
-    //     .then(res => {
-    //         // 有功功率
-
-    //         stringMap.value = res[0].data.stringMap
-    //         p_βminMap.value = res[0].data.p_βminMap
-    //         q_βminMap.value = res[1].data.q_βminMap
-    //         i_βmax.value = res[2].data.i_βmax
-    //         for (let k in res[0].data.stringMap) {
-    //             voltageList.value.push({
-    //                 name: k,
-    //                 c: res[0].data.stringMap[k][0],
-    //                 a: res[0].data.stringMap[k][1],
-    //                 b: res[0].data.stringMap[k][2]
-    //             })
-    //         }
-    //         setEChart(1, res[0].data.data, '有功功率', 'w')
-    //         setEChart(2, res[1].data.data, '无功功率', 'Var')
-    //         setEChart(3, res[2].data.data, '谐波电流幅值', 'A')
-    //         showBtn.value = true
-    //         loading.value = false
-    //         // props.rowList.id != undefined
-    //     })
-    //     .catch(err => {
-    //         loading.value = false
-    //     })
-}
-// 谐波次数变化
-const amplitudeQuery = async (e: any) => {
-    currentLod.value = true
-    let form = {
-        endTime: props.rowList.endTime || datePickerRef.value.timeValue[1],
-        lineId: props.rowList.lineId || dotList.value.id,
-        startTime: props.rowList.startTime || datePickerRef.value.timeValue[0],
-        userId: dictData.state.area[0].id,
-        time: harmonicValue.value
-    }
-    const res3 = await queryCarryCapacityIData(form)
-    i_βmax.value = res3.data.i_βmax
-    setEChart(3, res3.data.data, '谐波电流幅值', 'A')
-    options.value=options3.value
-    currentLod.value = false
-}
-// 用户变化
-const userChange = (e: any) => {
-    userData.value = e
-}
-// 模型训练
-const modelTrain = () => {
-    modelTraining({
-        endTime: datePickerRef.value.timeValue[1],
-        lineId: dotList.value.id,
-        startTime: datePickerRef.value.timeValue[0],
-        time: 0,
-        userId: dictData.state.area[0].id
-    }).then(res => {})
-}
-
-const setEChart = (val: any, data: any, text: string, name: string) => {
-    // console.log("🚀 ~ setEChart ~ data:", data.map(item => item.value))
-    let [min, max] = yMethod(data.map(item => item.value))
-    let options = {
-        title: {
-            text: text,
-            x: 'center'
-            // textStyle: {
-            //     fontWeight: 'normal'
-            // }
-        },
-        tooltip: {
-            axisPointer: {
-                type: 'cross',
-                label: {
-                    color: '#fff',
-                    fontSize: 16
-                }
-            },
-            textStyle: {
-                color: '#fff',
-                fontStyle: 'normal',
-                opacity: 0.35,
-                fontSize: 14
-            },
-            backgroundColor: 'rgba(0,0,0,0.55)',
-            borderWidth: 0,
-            formatter(params: any) {
-                const xname = params[0].value[0]
-                let str = `${xname}<br>`
-                params.forEach((el: any, index: any) => {
-                    str += `${el.marker}${el.seriesName.split('(')[0]}：${
-                        el.value[1] ? el.value[1] + ' ' + (el.value[2] || '') : '-'
-                    }<br>`
-                })
-                return str
-            }
-        },
-
-        xAxis: {
-            // data: data.filter(item => item.phaseType == 'A').map(item => item.time),
-            name: '时间',
-            type: 'time',
-
-            axisLabel: {
-                formatter: {
-                    day: '{MM}-{dd}',
-                    month: '{MM}',
-                    year: '{yyyy}'
-                }
-            }
-        },
-        yAxis: {
-            type: 'value',
-            name: name,
-            max: max,
-            min: min
-        },
-
-        color: ['#DAA520', '#2E8B57', '#A52a2a'],
-        series: [
-            {
-                name: 'A相',
-                type: 'line',
-                // smooth: true,
-                symbol: 'none',
-                data: data
-                    .filter(item => item.phaseType == 'A')
-                    .map(item => (item.value == 3.1415926 ? '' : [item.time, item.value.toFixed(2)]))
-            },
-            {
-                name: 'B相',
-                type: 'line',
-                // smooth: true,
-                symbol: 'none',
-                data: data
-                    .filter(item => item.phaseType == 'B')
-                    .map(item => (item.value == 3.1415926 ? '' : [item.time, item.value.toFixed(2)]))
-            },
-            {
-                name: 'C相',
-                type: 'line',
-                // smooth: true,
-                symbol: 'none',
-                data: data
-                    .filter(item => item.phaseType == 'C')
-                    .map(item => (item.value == 3.1415926 ? '' : [item.time, item.value.toFixed(2)]))
-            }
-        ],
-        options: {
-            dataZoom: [
-                {
-                    type: 'inside',
-                    height: 13,
-                    start: 0,
-                    bottom: '20px',
-                    end: 10
-                },
-                {
-                    start: 0,
-                    height: 13,
-                    bottom: '20px',
-                    end: 10
-                }
-            ]
-        }
-    }
-    val == 1
-        ? (options1.value = options)
-        : val == 2
-        ? (options2.value = options)
-        : val == 3
-        ? (options3.value = options)
-        : ''
-}
-
-// 承载能力评估
-const assess = () => {
-    if (dotList.value.level != 6) {
-        return ElMessage.warning('请选择线路')
-    }
-
-    carryCapacityCal({
-        endTime: datePickerRef.value.timeValue[1],
-        lineId: dotList.value.id,
-        startTime: datePickerRef.value.timeValue[0],
-        userId: userData.value.userId, //dictData.state.area[0].id,
-        i_βmax: i_βmax.value,
-        p_βminMap: p_βminMap.value,
-        q_βminMap: q_βminMap.value,
-        s_T: lineList.value.standardCapacity,
-        s_pv: userData.value.protocolCapacity,
-        scale: userData.value.voltage,
-        stringMap: stringMap.value
-    }).then((res: any) => {
-        rendering(res.data)
-    })
-}
-const rendering = (data: any) => {
-    tableData.value = [
-        {
-            name: '配变首端电压',
-            level1: '/',
-            level2: '/',
-            level3: '/',
-            level4: '/'
-        },
-        {
-            name: '配变功率因素',
-            level1: '/',
-            level2: '/',
-            level3: '/',
-            level4: '/'
-        },
-        {
-            name: '等效负载率最小值',
-            level1: '/',
-            level2: '/',
-            level3: '/',
-            level4: '/'
-        },
-        {
-            name: '各次谐波电流幅值',
-            level1: '/',
-            level2: '/',
-            level3: '/',
-            level4: '/'
-        }
-    ]
-    let ChartsList = [
-        {
-            name: '安全',
-            value: 0
-        },
-        {
-            name: 'III级预警',
-            value: 0
-        },
-        {
-            name: 'II级预警',
-            value: 0
-        },
-        {
-            name: 'I级预警',
-            value: 0
-        },
-        {
-            name: '禁止接入',
-            value: 0
-        }
-    ]
-    tableData.value[0][`level` + data.utlevel] = 1
-    tableData.value[1][`level` + data.pfTLevel] = 1
-    tableData.value[2][`level` + data.btlevel] = 1
-    tableData.value[3][`level` + data.ilevel] = 1
-    ChartsList[data.reslutLevel - 1].value = 1
-
-    showAssess.value = true
-    pieCharts.value = {
-        legend: {
-            type: 'scroll',
-            orient: 'vertical',
-            right: '10px',
-            top: '40px',
-            selectedMode: false // 是否允许点击
-        },
-        toolbox: { show: false },
-        xAxis: {
-            show: false
-        },
-        yAxis: {
-            show: false
-        },
-        color: ['#2E7D32', '#0288D1', '#F57C00', '#F57C00', '#C62828'],
-        dataZoom: { show: false },
-        series: [
-            {
-                type: 'pie',
-                center: ['40%', '50%'],
-                radius: ['45%', '58%'],
-                label: {
-                    normal: {
-                        show: false
-                    }
-                },
-                data: ChartsList
-            }
-        ],
-        options: {
-            title: [
-                {
-                    text: '评估结果',
-                    left: '25%'
-                    // left: '25%'
-                },
-                {
-                    text:
-                        data.reslutLevel == 5
-                            ? '禁止接入'
-                            : data.reslutLevel == 4
-                            ? 'I级预警'
-                            : data.reslutLevel == 3
-                            ? 'II级预警'
-                            : data.reslutLevel == 2
-                            ? 'III级预警'
-                            : data.reslutLevel == 1
-                            ? '安全'
-                            : '',
-                    left: data.reslutLevel == 1 ? '33%' : '29%',
-                    top: '45%',
-                    textStyle: {
-                        color:
-                            data.reslutLevel == 5
-                                ? '#C62828'
-                                : data.reslutLevel == 4
-                                ? '#F57C00'
-                                : data.reslutLevel == 3
-                                ? '#F57C00'
-                                : data.reslutLevel == 2
-                                ? '#0288D1'
-                                : '#2E7D32',
-                        foontWeight: '500'
-                    }
-                }
-            ]
-        }
-    }
-}
-// 下载模版
-const exportTemplate = () => {
-    getExcelTemplate().then((res: any) => {
-        let blob = new Blob([res], {
-            type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
-        })
-
-        const url = window.URL.createObjectURL(blob)
-        const link = document.createElement('a') // 创建a标签
-        link.href = url
-        // link.download = "电压暂降事件分析报告"; // 设置下载的文件名
-        link.download = '数据模版' // 设置下载的文件名
-        document.body.appendChild(link)
-        link.click() //执行下载
-        document.body.removeChild(link)
-    })
-}
-// 离线导入
-const choose = (e: any) => {
-    if (dotList.value.level != 6) {
-        return ElMessage.warning('请选择线路')
-    }
-    let form = {
-        endTime: datePickerRef.value.timeValue[1],
-        lineId: dotList.value.id,
-        startTime: datePickerRef.value.timeValue[0]
-    }
-    if (e.raw.type != 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet') {
-        return ElMessage.warning('请选择Excel文件!')
-    }
-
-    uploadExcel(e.raw, form).then(res => {
-        ElMessage.success('导入成功')
-    })
-}
-const tabChange = (e: any) => {
-    nextTick(() => {
-        e == 2 ? (options.value = options2.value) : e == 3 ? (options.value = options3.value) : ''
-    })
-}
-const handleNodeClick = (data: any, node: any) => {
-    if (flag.value) {
-        lineList.value = {}
-        dotList.value = data
-
-        if (data.level == 6) {
-            getLineDetailData({ id: data.id }).then((res: any) => {
-                lineList.value = res.data
-            })
-        }
-    }
-
-    if (props.rowList.userId != undefined && flag.value) {
-        TreeRef.value.setKey(props.rowList.lineId)
-        onSubmit()
-        flag.value = false
-    }
-}
-// 初始化 echart 默认值
-const initEchart = (val: number, text: string) => {
-    let list = {
-        title: {
-            text: text,
-            x: 'center'
-        },
-
-        xAxis: {
-            name: '时间',
-            type: 'time',
-            axisLabel: {
-                formatter: {
-                    day: '{MM}-{dd}',
-                    month: '{MM}',
-                    year: '{yyyy}'
-                }
-            }
-        },
-        yAxis: {
-            type: 'value',
-            name: name
-        },
-
-        color: ['#DAA520', '#2E8B57', '#A52a2a'],
-        series: [
-            {
-                name: 'A相',
-                type: 'line',
-                // smooth: true,
-                symbol: 'none',
-                data: []
-            },
-            {
-                name: 'B相',
-                type: 'line',
-                // smooth: true,
-                symbol: 'none',
-                data: []
-            },
-            {
-                name: 'C相',
-                type: 'line',
-                symbol: 'none',
-                data: []
-            }
-        ]
-    }
-    val == 1 ? (options1.value = list) : val == 2 ? (options2.value = list) : val == 3 ? (options3.value = list) : ''
-}
-// 导出
-const onExport = () => {
-    // 转换成canvas
-    html2canvas(document.getElementById('evaluateTheResults'), {
-        scale: 2
-    }).then(function (canvas) {
-        // 创建a标签，实现下载
-        let creatIMg = document.createElement('a')
-        creatIMg.download = '光伏电站承载能力评估结果.png' // 设置下载的文件名，
-        creatIMg.href = canvas.toDataURL() // 下载url
-        creatIMg.click()
-        creatIMg.remove() // 下载之后把创建的元素删除
-    })
-}
-onMounted(() => {
-    initEchart(1, '有功功率')
-    initEchart(2, '无功功率')
-    initEchart(3, '谐波电流幅值')
-})
-</script>
-<style lang="scss" scoped>
-.splitpanes.default-theme .splitpanes__pane {
-    background: #eaeef1;
-}
-
-.grid-content {
-    text-align: center;
-}
-
-.bottomBox {
-    position: relative;
-
-    .el-button {
-        position: absolute;
-        top: 0;
-        z-index: 1;
-        right: 10px;
-        top: -10px;
-    }
-}
-
-:deep(.vxe-table--header thead tr:first-of-type th:first-of-type) {
-    // background: var(--vxe-table-header-background-color);
-    background-image: linear-gradient(var(--vxe-table-border-color), var(--vxe-table-border-color)),
-        linear-gradient(#e8eaec00, #e8eaec00);
-}
-
-:deep(.vxe-table--header thead tr:first-of-type th:first-of-type:before) {
-    content: '';
-    position: absolute;
-    width: 1px;
-    height: 98px;
-    /*这里需要自己调整，根据td的宽度和高度*/
-    top: 0;
-    left: 0;
-    background-color: grey;
-    opacity: 0.3;
-    display: block;
-    transform: rotate(-66deg);
-    /*这里需要自己调整，根据线的位置*/
-    transform-origin: top;
-}
-
-:deep(.vxe-table--header thead tr:last-of-type th:first-of-type:before) {
-    content: '';
-    position: absolute;
-    width: 1px;
-    height: 98px;
-    /*这里需要自己调整，根据td的宽度和高度*/
-    bottom: 0;
-    right: 0;
-    background-color: grey;
-    opacity: 0.3;
-    display: block;
-    transform: rotate(-66deg);
-    /*这里需要自己调整，根据线的位置*/
-    transform-origin: bottom;
-}
-
-.SelectIcon {
-    height: 18px;
-    margin-top: 5px;
-}
-
-.el-select {
-    min-width: 80px;
-}
-:deep(.el-descriptions__body .el-descriptions__table .el-descriptions__cell.is-center) {
-    width: 80px !important;
-}
-.evaluateTheResults {
-    display: flex;
-}
-</style>
+<template>
+    <div>
+        <splitpanes :style="{ height: height }" class="default-theme" id="navigation-splitpanes">
+            <pane :size="size">
+                <bearingTree
+                    ref="TreeRef"
+                    :default-expand-all="false"
+                    :default-expanded-keys="monitoringPoint.state.lineId ? [monitoringPoint.state.lineId] : []"
+                    :current-node-key="monitoringPoint.state.lineId"
+                    @node-click="handleNodeClick"
+                    @init="handleNodeClick"
+                ></bearingTree>
+            </pane>
+            <pane style="background: #fff">
+                <TableHeader :showSearch="false" v-show="props.rowList.id == undefined">
+                    <template #select>
+                        <el-form-item label="时间">
+                            <DatePicker ref="datePickerRef"></DatePicker>
+                        </el-form-item>
+                    </template>
+                    <template #operation>
+                        <el-button type="primary" icon="el-icon-Search" @click="onSubmit">查询</el-button>
+                        <el-button type="primary" icon="el-icon-Download" @click="exportTemplate">导出模板</el-button>
+                        <el-upload
+                            action=""
+                            accept=".xlsx"
+                            :show-file-list="false"
+                            :auto-upload="false"
+                            :on-change="choose"
+                        >
+                            <el-button type="primary" class="ml10" icon="el-icon-Upload">离线导入</el-button>
+                        </el-upload>
+                    </template>
+                </TableHeader>
+
+                <div v-loading="loading" class="pt5">
+                    <el-divider content-position="left">基础数据</el-divider>
+                    <el-descriptions class="mb10" :column="4" size="" border>
+                        <el-descriptions-item label="用户名称" label-align="center" width="20%">
+                            <el-select
+                                v-model="user"
+                                placeholder="请选择用户名称"
+                                size="small"
+                                filterable
+                                v-if="props.rowList.id == undefined"
+                                style="width: 100%"
+                                value-key="userId"
+                                @change="userChange"
+                            >
+                                <el-option v-for="item in userList" :key="item" :label="item.userName" :value="item" />
+                            </el-select>
+                            <span v-else>{{ props.rowList.userName }}</span>
+                        </el-descriptions-item>
+                        <el-descriptions-item label="拟接入光伏容量" label-align="center" width="10%">
+                            {{ userData?.protocolCapacity }}MVA
+                        </el-descriptions-item>
+                        <el-descriptions-item label="电压等级" label-align="center" width="10%">
+                            {{ voltageLevelArr.filter(item => item.id === userData?.voltage)[0]?.name }}
+                        </el-descriptions-item>
+                        <el-descriptions-item label="额定容量" label-align="center" width="10%">
+                            {{ lineList?.standardCapacity }}MVA
+                        </el-descriptions-item>
+                    </el-descriptions>
+                    <div :style="`height: calc(${tabsHeight} - ${props.rowList.id == undefined ? '256px' : '188px'})`">
+                        <el-tabs
+                            v-model="activeName"
+                            class="mb10"
+                            v-if="showTabs"
+                            @tab-change="tabChange"
+                            :style="`height: calc(${tabsHeight} - ${
+                                props.rowList.id == undefined ? '256px' : '188px'
+                            })`"
+                        >
+                            <el-tab-pane label="有功功率" name="1" class="mt10">
+                                <MyEChart :options="options1" />
+                            </el-tab-pane>
+                            <el-tab-pane label="无功功率" name="2" class="mt10">
+                                <MyEChart :options="options" />
+                            </el-tab-pane>
+                            <el-tab-pane label="谐波电流幅值" name="3" class="mt10" style="position: relative">
+                                <div style="position: absolute; z-index: 99; top: 10px; right: 200px; width: 80px">
+                                    <el-select
+                                        v-model="harmonicValue"
+                                        placeholder="请选择谐波"
+                                        @change="amplitudeQuery"
+                                    >
+                                        <el-option
+                                            v-for="item in harmonic"
+                                            :key="item.value"
+                                            :label="item.label"
+                                            :value="item.value"
+                                        ></el-option>
+                                    </el-select>
+                                </div>
+
+                                <MyEChart :options="options" v-loading="currentLod" />
+                            </el-tab-pane>
+                            <el-tab-pane label="首端电压模型参数" name="4">
+                                <vxe-table height="auto" v-bind="defaultAttribute" :data="voltageList">
+                                    <vxe-colgroup field="group0" title="模型参数">
+                                        <vxe-column field="name" width="180" title="相别"></vxe-column>
+                                    </vxe-colgroup>
+
+                                    <vxe-column field="a" title="a"></vxe-column>
+                                    <vxe-column field="b" title="b"></vxe-column>
+                                    <vxe-column field="c" title="c"></vxe-column>
+                                </vxe-table>
+                            </el-tab-pane>
+                        </el-tabs>
+                    </div>
+                    <div class="btnBox mt10 mr10">
+                        <el-button
+                            type="primary"
+                            icon="el-icon-VideoPlay"
+                            @click="assess"
+                            v-if="showBtn && props.rowList.id == undefined && !showAssess"
+                        >
+                            启动评估
+                        </el-button>
+                        <el-button type="primary" icon="el-icon-Download" @click="onExport" v-if="showAssess">
+                            导出结果
+                        </el-button>
+                    </div>
+                    <div class="bottomBox pt1" id="evaluateTheResults">
+                        <el-divider content-position="left" v-show="showBtn">评估结果</el-divider>
+                        <div class="evaluateTheResults" v-if="showAssess">
+                            <div style="height: 250px; flex: 1">
+                                <vxe-table
+                                    style="flex: 1.5"
+                                    v-bind="defaultAttribute"
+                                    height="auto"
+                                    ref="xTable"
+                                    :data="tableData"
+                                >
+                                    <vxe-colgroup field="group0" title="等级">
+                                        <vxe-column field="name" width="180" title="结果"></vxe-column>
+                                    </vxe-colgroup>
+                                    <vxe-column field="level1" title="安全">
+                                        <template #default="{ row }">
+                                            <Select v-if="row.level1 == 1" class="SelectIcon" style="color: #2e7d32" />
+                                            <span v-else>{{ row.level1 }}</span>
+                                        </template>
+                                    </vxe-column>
+                                    <vxe-column field="level2" title="III级预警">
+                                        <template #default="{ row }">
+                                            <Select v-if="row.level2 == 1" class="SelectIcon" style="color: #0288d1" />
+                                            <span v-else>{{ row.level2 }}</span>
+                                        </template>
+                                    </vxe-column>
+                                    <vxe-column field="level3" title="II级预警">
+                                        <template #default="{ row }">
+                                            <Select v-if="row.level3 == 1" class="SelectIcon" style="color: #f57c00" />
+                                            <span v-else>{{ row.level3 }}</span>
+                                        </template>
+                                    </vxe-column>
+                                    <vxe-column field="level4" title="I级预警">
+                                        <template #default="{ row }">
+                                            <Select v-if="row.level4 == 1" class="SelectIcon" style="color: #c62828" />
+                                            <span v-else>{{ row.level4 }}</span>
+                                        </template>
+                                    </vxe-column>
+                                </vxe-table>
+                            </div>
+                            <div style="height: 250px; width: 350px">
+                                <MyEChart style="flex: 1" :options="pieCharts" />
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </pane>
+        </splitpanes>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { onMounted, ref, provide } from 'vue'
+import 'splitpanes/dist/splitpanes.css'
+import { Splitpanes, Pane } from 'splitpanes'
+import bearingTree from '@/components/tree/pqs/bearingTree.vue'
+import DatePicker from '@/components/form/datePicker/index.vue'
+import { mainHeight } from '@/utils/layout'
+import TableHeader from '@/components/table/header/index.vue'
+import MyEChart from '@/components/echarts/MyEchart.vue'
+import { useMonitoringPoint } from '@/stores/monitoringPoint'
+import { defaultAttribute } from '@/components/table/defaultAttribute'
+import { harmonicOptions } from '@/utils/dictionary'
+import { Select } from '@element-plus/icons-vue'
+import { ElMessage } from 'element-plus'
+import {
+    queryCarryCapacityData,
+    uploadExcel,
+    queyDetailUser,
+    queryCarryCapacityQData,
+    queryCarryCapacityIData,
+    carryCapacityCal,
+    getExcelTemplate,
+    getLineDetailData,
+    modelTraining,
+    queryResultbyCondition
+} from '@/api/advance-boot/bearingCapacity'
+import html2canvas from 'html2canvas'
+import { yMethod } from '@/utils/echartMethod'
+import { useDictData } from '@/stores/dictData'
+const props = defineProps(['rowList'])
+const harmonic = harmonicOptions.filter(item => item.value < 26)
+const currentLod = ref(false)
+const monitoringPoint = useMonitoringPoint()
+const size = ref(0)
+const dictData = useDictData()
+const datePickerRef = ref()
+const height = mainHeight(80).height
+const tabsHeight = mainHeight(300).height
+const voltageLevelArr = dictData.getBasicData('Dev_Voltage_Stand')
+const tableData: any = ref([
+    {
+        name: '配变首端电压',
+        level1: '/',
+        level2: '/',
+        level3: '/',
+        level4: '/'
+    },
+    {
+        name: '配变功率因素',
+        level1: '/',
+        level2: '/',
+        level3: '/',
+        level4: '/'
+    },
+    {
+        name: '等效负载率最小值',
+        level1: '/',
+        level2: '/',
+        level3: '/',
+        level4: '/'
+    },
+    {
+        name: '各次谐波电流幅值',
+        level1: '/',
+        level2: '/',
+        level3: '/',
+        level4: '/'
+    }
+])
+const harmonicValue = ref(2)
+const TreeRef = ref()
+const voltageList: any = ref([])
+const showAssess = ref(false)
+const showBtn = ref(false)
+const flag = ref(true)
+const loading = ref(false)
+const user = ref('')
+const userList: any = ref([])
+const lineList: any = ref([])
+const options = ref({})
+const options1 = ref({})
+const options2 = ref({})
+const options3 = ref({})
+const pieCharts = ref({})
+const showTabs = ref(false)
+
+const activeName = ref('1')
+const userData: any = ref({})
+const stringMap: any = ref({})
+const p_βminMap: any = ref({})
+const i_βmax: any = ref({})
+const q_βminMap: any = ref({})
+const dotList: any = ref({
+    name: monitoringPoint.state.lineName.split('>')[3],
+    id: monitoringPoint.state.lineId,
+    level: 6
+})
+onMounted(() => {
+    const dom = document.getElementById('navigation-splitpanes')
+
+    if (dom) {
+        size.value = Math.round((180 / (dom.offsetHeight + 60)) * 100)
+    }
+    datePickerRef.value.setTimeOptions([{ label: '周', value: 4 }])
+    datePickerRef.value.setTheDate(4)
+    info()
+})
+const info = () => {
+    queyDetailUser({
+        pageNum: 1,
+        pageSize: 1000,
+        userType: dictData.getBasicData('CARRY_CAPCITY_USER_TYPE', [
+            'Electrified_Rail_Users',
+            'Charging_Station_Users',
+            'Electric_Heating_Load_Users'
+        ])[0]?.id
+    }).then(res => {
+        userList.value = res.data.records
+
+        if (props.rowList.id != undefined) {
+            user.value = userList.value.filter(item => item.userId == props.rowList.userId)[0]
+            userChange(user.value)
+        } else {
+            user.value = userList.value[0] || {}
+            userData.value = res.data.records[0] || {}
+        }
+    })
+}
+
+// 查询
+const onSubmit = async () => {
+    activeName.value = '1'
+
+    if (dotList.value.level != 6) {
+        return ElMessage.warning('请选择线路')
+    }
+    showAssess.value = false
+    showTabs.value = false
+    loading.value = true
+
+    let form = {
+        endTime: props.rowList.endTime || datePickerRef.value.timeValue[1],
+        lineId: props.rowList.lineId || dotList.value.id,
+        startTime: props.rowList.startTime || datePickerRef.value.timeValue[0],
+        userId: dictData.state.area[0].id,
+        time: harmonicValue.value
+    }
+    initEchart(1, '有功功率')
+    initEchart(2, '无功功率')
+    initEchart(3, '谐波电流幅值')
+    voltageList.value = []
+    showBtn.value = false
+    if (props.rowList.id != undefined) {
+        // user.value = props.rowList
+
+        rendering(props.rowList)
+    }
+
+    try {
+        // 显示加载状态
+
+        // 获取有功功率数据
+        const res1 = await queryCarryCapacityData(form)
+        stringMap.value = res1.data.stringMap
+        p_βminMap.value = res1.data.p_βminMap
+
+        // 处理电压列表数据
+        voltageList.value = Object.entries(res1.data.stringMap).map(([k, values]) => ({
+            name: k,
+            c: values[0],
+            a: values[1],
+            b: values[2]
+        }))
+
+        // 设置有功功率图表
+        setEChart(1, res1.data.data, '有功功率', 'kW')
+
+        // 获取无功功率数据并设置图表
+        const res2 = await queryCarryCapacityQData(form)
+        q_βminMap.value = res2.data.q_βminMap
+        setEChart(2, res2.data.data, '无功功率', 'kVar')
+
+        // 获取谐波电流数据并设置图表
+        const res3 = await queryCarryCapacityIData(form)
+        i_βmax.value = res3.data.i_βmax
+        setEChart(3, res3.data.data, '谐波电流幅值', 'A')
+
+        // 显示结果和按钮
+        showTabs.value = true
+        showBtn.value = true
+        currentLod.value = false
+        // 如果没有rowList.id，查询结果
+        if (props.rowList.id === undefined) {
+            const res4 = await queryResultbyCondition({ ...form, userId: user.value.userId })
+            rendering(res4.data)
+        }
+    } catch (err) {
+        console.error('请求出错:', err)
+    } finally {
+        // 无论成功失败，都关闭加载状态
+        loading.value = false
+    }
+
+    // Promise.all([queryCarryCapacityData(form), queryCarryCapacityQData(form), queryCarryCapacityIData(form)])
+    //     .then(res => {
+    //         // 有功功率
+
+    //         stringMap.value = res[0].data.stringMap
+    //         p_βminMap.value = res[0].data.p_βminMap
+    //         q_βminMap.value = res[1].data.q_βminMap
+    //         i_βmax.value = res[2].data.i_βmax
+    //         for (let k in res[0].data.stringMap) {
+    //             voltageList.value.push({
+    //                 name: k,
+    //                 c: res[0].data.stringMap[k][0],
+    //                 a: res[0].data.stringMap[k][1],
+    //                 b: res[0].data.stringMap[k][2]
+    //             })
+    //         }
+    //         setEChart(1, res[0].data.data, '有功功率', 'w')
+    //         setEChart(2, res[1].data.data, '无功功率', 'Var')
+    //         setEChart(3, res[2].data.data, '谐波电流幅值', 'A')
+    //         showBtn.value = true
+    //         loading.value = false
+    //         // props.rowList.id != undefined
+    //     })
+    //     .catch(err => {
+    //         loading.value = false
+    //     })
+}
+// 谐波次数变化
+const amplitudeQuery = async (e: any) => {
+    currentLod.value = true
+    let form = {
+        endTime: props.rowList.endTime || datePickerRef.value.timeValue[1],
+        lineId: props.rowList.lineId || dotList.value.id,
+        startTime: props.rowList.startTime || datePickerRef.value.timeValue[0],
+        userId: dictData.state.area[0].id,
+        time: harmonicValue.value
+    }
+    const res3 = await queryCarryCapacityIData(form)
+    i_βmax.value = res3.data.i_βmax
+    setEChart(3, res3.data.data, '谐波电流幅值', 'A')
+    options.value = options3.value
+    currentLod.value = false
+}
+// 用户变化
+const userChange = (e: any) => {
+    userData.value = e
+}
+// 模型训练
+const modelTrain = () => {
+    modelTraining({
+        endTime: datePickerRef.value.timeValue[1],
+        lineId: dotList.value.id,
+        startTime: datePickerRef.value.timeValue[0],
+        time: 0,
+        userId: dictData.state.area[0].id
+    }).then(res => {})
+}
+
+const setEChart = (val: any, data: any, text: string, name: string) => {
+    // console.log("🚀 ~ setEChart ~ data:", data.map(item => item.value))
+    let [min, max] = yMethod(data.map(item => item.value))
+    let options = {
+        title: {
+            text: text,
+            x: 'center'
+            // textStyle: {
+            //     fontWeight: 'normal'
+            // }
+        },
+        tooltip: {
+            axisPointer: {
+                type: 'cross',
+                label: {
+                    color: '#fff',
+                    fontSize: 16
+                }
+            },
+            textStyle: {
+                color: '#fff',
+                fontStyle: 'normal',
+                opacity: 0.35,
+                fontSize: 14
+            },
+            backgroundColor: 'rgba(0,0,0,0.55)',
+            borderWidth: 0,
+            formatter(params: any) {
+                const xname = params[0].value[0]
+                let str = `${xname}<br>`
+                params.forEach((el: any, index: any) => {
+                    str += `${el.marker}${el.seriesName.split('(')[0]}：${
+                        el.value[1] ? el.value[1] + ' ' + (el.value[2] || '') : '-'
+                    }<br>`
+                })
+                return str
+            }
+        },
+
+        xAxis: {
+            // data: data.filter(item => item.phaseType == 'A').map(item => item.time),
+            name: '时间',
+            type: 'time',
+
+            axisLabel: {
+                formatter: {
+                    day: '{MM}-{dd}',
+                    month: '{MM}',
+                    year: '{yyyy}'
+                }
+            }
+        },
+        yAxis: {
+            type: 'value',
+            name: name,
+            max: max,
+            min: min
+        },
+
+        color: ['#DAA520', '#2E8B57', '#A52a2a'],
+        series: [
+            {
+                name: 'A相',
+                type: 'line',
+                // smooth: true,
+                symbol: 'none',
+                data: data
+                    .filter(item => item.phaseType == 'A')
+                    .map(item => (item.value == 3.1415926 ? '' : [item.time, item.value.toFixed(2)]))
+            },
+            {
+                name: 'B相',
+                type: 'line',
+                // smooth: true,
+                symbol: 'none',
+                data: data
+                    .filter(item => item.phaseType == 'B')
+                    .map(item => (item.value == 3.1415926 ? '' : [item.time, item.value.toFixed(2)]))
+            },
+            {
+                name: 'C相',
+                type: 'line',
+                // smooth: true,
+                symbol: 'none',
+                data: data
+                    .filter(item => item.phaseType == 'C')
+                    .map(item => (item.value == 3.1415926 ? '' : [item.time, item.value.toFixed(2)]))
+            }
+        ],
+        options: {
+            dataZoom: [
+                {
+                    type: 'inside',
+                    height: 13,
+                    start: 0,
+                    bottom: '20px',
+                    end: 10
+                },
+                {
+                    start: 0,
+                    height: 13,
+                    bottom: '20px',
+                    end: 10
+                }
+            ]
+        }
+    }
+    val == 1
+        ? (options1.value = options)
+        : val == 2
+        ? (options2.value = options)
+        : val == 3
+        ? (options3.value = options)
+        : ''
+}
+
+// 承载能力评估
+const assess = () => {
+    if (dotList.value.level != 6) {
+        return ElMessage.warning('请选择线路')
+    }
+
+    carryCapacityCal({
+        endTime: datePickerRef.value.timeValue[1],
+        lineId: dotList.value.id,
+        startTime: datePickerRef.value.timeValue[0],
+        userId: userData.value.userId, //dictData.state.area[0].id,
+        i_βmax: i_βmax.value,
+        p_βminMap: p_βminMap.value,
+        q_βminMap: q_βminMap.value,
+        s_T: lineList.value.standardCapacity,
+        s_pv: userData.value.protocolCapacity,
+        scale: userData.value.voltage,
+        stringMap: stringMap.value
+    }).then((res: any) => {
+        rendering(res.data)
+    })
+}
+const rendering = (data: any) => {
+    tableData.value = [
+        {
+            name: '配变首端电压',
+            level1: '/',
+            level2: '/',
+            level3: '/',
+            level4: '/'
+        },
+        {
+            name: '配变功率因素',
+            level1: '/',
+            level2: '/',
+            level3: '/',
+            level4: '/'
+        },
+        {
+            name: '等效负载率最小值',
+            level1: '/',
+            level2: '/',
+            level3: '/',
+            level4: '/'
+        },
+        {
+            name: '各次谐波电流幅值',
+            level1: '/',
+            level2: '/',
+            level3: '/',
+            level4: '/'
+        }
+    ]
+    let ChartsList = [
+        {
+            name: '安全',
+            value: 0
+        },
+        {
+            name: 'III级预警',
+            value: 0
+        },
+        {
+            name: 'II级预警',
+            value: 0
+        },
+        {
+            name: 'I级预警',
+            value: 0
+        },
+        {
+            name: '禁止接入',
+            value: 0
+        }
+    ]
+    tableData.value[0][`level` + data.utlevel] = 1
+    tableData.value[1][`level` + data.pfTLevel] = 1
+    tableData.value[2][`level` + data.btlevel] = 1
+    tableData.value[3][`level` + data.ilevel] = 1
+    ChartsList[data.reslutLevel - 1].value = 1
+
+    showAssess.value = true
+    pieCharts.value = {
+        legend: {
+            type: 'scroll',
+            orient: 'vertical',
+            right: '10px',
+            top: '40px',
+            selectedMode: false // 是否允许点击
+        },
+        toolbox: { show: false },
+        xAxis: {
+            show: false
+        },
+        yAxis: {
+            show: false
+        },
+        color: ['#2E7D32', '#0288D1', '#F57C00', '#F57C00', '#C62828'],
+        dataZoom: { show: false },
+        series: [
+            {
+                type: 'pie',
+                center: ['40%', '50%'],
+                radius: ['45%', '58%'],
+                label: {
+                    normal: {
+                        show: false
+                    }
+                },
+                data: ChartsList
+            }
+        ],
+        options: {
+            title: [
+                {
+                    text: '评估结果',
+                    left: '25%'
+                    // left: '25%'
+                },
+                {
+                    text:
+                        data.reslutLevel == 5
+                            ? '禁止接入'
+                            : data.reslutLevel == 4
+                            ? 'I级预警'
+                            : data.reslutLevel == 3
+                            ? 'II级预警'
+                            : data.reslutLevel == 2
+                            ? 'III级预警'
+                            : data.reslutLevel == 1
+                            ? '安全'
+                            : '',
+                    left: data.reslutLevel == 1 ? '33%' : '29%',
+                    top: '45%',
+                    textStyle: {
+                        color:
+                            data.reslutLevel == 5
+                                ? '#C62828'
+                                : data.reslutLevel == 4
+                                ? '#F57C00'
+                                : data.reslutLevel == 3
+                                ? '#F57C00'
+                                : data.reslutLevel == 2
+                                ? '#0288D1'
+                                : '#2E7D32',
+                        foontWeight: '500'
+                    }
+                }
+            ]
+        }
+    }
+}
+// 下载模版
+const exportTemplate = () => {
+    getExcelTemplate().then((res: any) => {
+        let blob = new Blob([res], {
+            type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
+        })
+
+        const url = window.URL.createObjectURL(blob)
+        const link = document.createElement('a') // 创建a标签
+        link.href = url
+        // link.download = "电压暂降事件分析报告"; // 设置下载的文件名
+        link.download = '数据模版' // 设置下载的文件名
+        document.body.appendChild(link)
+        link.click() //执行下载
+        document.body.removeChild(link)
+    })
+}
+// 离线导入
+const choose = (e: any) => {
+    if (dotList.value.level != 6) {
+        return ElMessage.warning('请选择线路')
+    }
+    let form = {
+        endTime: datePickerRef.value.timeValue[1],
+        lineId: dotList.value.id,
+        startTime: datePickerRef.value.timeValue[0]
+    }
+    if (e.raw.type != 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet') {
+        return ElMessage.warning('请选择Excel文件!')
+    }
+
+    uploadExcel(e.raw, form).then(res => {
+        ElMessage.success('导入成功')
+    })
+}
+const tabChange = (e: any) => {
+    nextTick(() => {
+        e == 2 ? (options.value = options2.value) : e == 3 ? (options.value = options3.value) : ''
+    })
+}
+const handleNodeClick = (data: any, node: any) => {
+    if (flag.value) {
+        lineList.value = {}
+        dotList.value = data
+
+        if (data.level == 6) {
+            getLineDetailData({ id: data.id }).then((res: any) => {
+                lineList.value = res.data
+            })
+        }
+    }
+
+    if (props.rowList.userId != undefined && flag.value) {
+        TreeRef.value.setKey(props.rowList.lineId)
+        onSubmit()
+        flag.value = false
+    }
+}
+// 初始化 echart 默认值
+const initEchart = (val: number, text: string) => {
+    let list = {
+        title: {
+            text: text,
+            x: 'center'
+        },
+
+        xAxis: {
+            name: '时间',
+            type: 'time',
+            axisLabel: {
+                formatter: {
+                    day: '{MM}-{dd}',
+                    month: '{MM}',
+                    year: '{yyyy}'
+                }
+            }
+        },
+        yAxis: {
+            type: 'value',
+            name: name
+        },
+
+        color: ['#DAA520', '#2E8B57', '#A52a2a'],
+        series: [
+            {
+                name: 'A相',
+                type: 'line',
+                // smooth: true,
+                symbol: 'none',
+                data: []
+            },
+            {
+                name: 'B相',
+                type: 'line',
+                // smooth: true,
+                symbol: 'none',
+                data: []
+            },
+            {
+                name: 'C相',
+                type: 'line',
+                symbol: 'none',
+                data: []
+            }
+        ]
+    }
+    val == 1 ? (options1.value = list) : val == 2 ? (options2.value = list) : val == 3 ? (options3.value = list) : ''
+}
+// 导出
+const onExport = () => {
+    // 转换成canvas
+    html2canvas(document.getElementById('evaluateTheResults'), {
+        scale: 2
+    }).then(function (canvas) {
+        // 创建a标签，实现下载
+        let creatIMg = document.createElement('a')
+        creatIMg.download = '光伏电站承载能力评估结果.png' // 设置下载的文件名，
+        creatIMg.href = canvas.toDataURL() // 下载url
+        creatIMg.click()
+        creatIMg.remove() // 下载之后把创建的元素删除
+    })
+}
+onMounted(() => {
+    initEchart(1, '有功功率')
+    initEchart(2, '无功功率')
+    initEchart(3, '谐波电流幅值')
+})
+</script>
+<style lang="scss" scoped>
+.splitpanes.default-theme .splitpanes__pane {
+    background: #eaeef1;
+}
+
+.grid-content {
+    text-align: center;
+}
+
+.bottomBox {
+    margin-top: -3px;
+}
+.btnBox {
+    display: flex;
+    justify-content: end;
+}
+
+:deep(.vxe-table--header thead tr:first-of-type th:first-of-type) {
+    // background: var(--vxe-table-header-background-color);
+    background-image: linear-gradient(var(--vxe-table-border-color), var(--vxe-table-border-color)),
+        linear-gradient(#e8eaec00, #e8eaec00);
+}
+
+:deep(.vxe-table--header thead tr:first-of-type th:first-of-type:before) {
+    content: '';
+    position: absolute;
+    width: 1px;
+    height: 98px;
+    /*这里需要自己调整，根据td的宽度和高度*/
+    top: 0;
+    left: 0;
+    background-color: grey;
+    opacity: 0.3;
+    display: block;
+    transform: rotate(-66deg);
+    /*这里需要自己调整，根据线的位置*/
+    transform-origin: top;
+}
+
+:deep(.vxe-table--header thead tr:last-of-type th:first-of-type:before) {
+    content: '';
+    position: absolute;
+    width: 1px;
+    height: 98px;
+    /*这里需要自己调整，根据td的宽度和高度*/
+    bottom: 0;
+    right: 0;
+    background-color: grey;
+    opacity: 0.3;
+    display: block;
+    transform: rotate(-66deg);
+    /*这里需要自己调整，根据线的位置*/
+    transform-origin: bottom;
+}
+
+.SelectIcon {
+    height: 18px;
+    margin-top: 5px;
+}
+
+.el-select {
+    min-width: 80px;
+}
+:deep(.el-descriptions__body .el-descriptions__table .el-descriptions__cell.is-center) {
+    width: 80px !important;
+}
+.evaluateTheResults {
+    display: flex;
+}
+</style>
diff --git a/src/views/pqs/bearingCapacity/evaluationList/components/policy.vue b/src/views/pqs/bearingCapacity/evaluationList/components/policy.vue
index d4cd7b94..4359c615 100644
--- a/src/views/pqs/bearingCapacity/evaluationList/components/policy.vue
+++ b/src/views/pqs/bearingCapacity/evaluationList/components/policy.vue
@@ -1,346 +1,346 @@
-<template>
-    <el-dialog v-model="Views" draggable title="评估策略配置" width="1000" :before-close="handleClose">
-        <div style="display: flex; justify-content: end">
-            <el-button icon="el-icon-Refresh" type="primary" @click="restores">一键还原</el-button>
-        </div>
-        <el-divider content-position="left">光伏电站评估策略配置</el-divider>
-        <vxe-table v-bind="defaultAttribute" :loading="loading" :data="photovoltaicData" :span-method="mergeRowMethod">
-            <vxe-colgroup field="group0" title="等级">
-                <vxe-column field="name" width="180" title="结果"></vxe-column>
-            </vxe-colgroup>
-            <vxe-column field="comparisonOperators1" title="安全(个)">
-                <template #default="row">
-                    <div class="cellBox" @click="cells(row, row.row.comparisonOperators1, row.row.count1, 0)">
-                        {{ symbolJudgment(row.row.comparisonOperators1)
-                        }}{{ row.row.comparisonOperators1 == '/' ? '' : row.row.count1 }}
-                    </div>
-                </template>
-            </vxe-column>
-            <vxe-column field="comparisonOperators2" title="III级预警(个)">
-                <template #default="row">
-                    <div class="cellBox" @click="cells(row, row.row.comparisonOperators2, row.row.count2, 0)">
-                        {{ symbolJudgment(row.row.comparisonOperators2)
-                        }}{{ row.row.comparisonOperators2 == '/' ? '' : row.row.count2 }}
-                    </div>
-                </template>
-            </vxe-column>
-            <vxe-column field="comparisonOperators3" title="II级预警(个)">
-                <template #default="row">
-                    <div class="cellBox" @click="cells(row, row.row.comparisonOperators3, row.row.count3, 0)">
-                        {{ symbolJudgment(row.row.comparisonOperators3)
-                        }}{{ row.row.comparisonOperators3 == '/' ? '' : row.row.count3 }}
-                    </div>
-                </template>
-            </vxe-column>
-            <vxe-column field="comparisonOperators4" title="I级预警(个)">
-                <template #default="row">
-                    <div class="cellBox" @click="cells(row, row.row.comparisonOperators4, row.row.count4, 0)">
-                        {{ symbolJudgment(row.row.comparisonOperators4)
-                        }}{{ row.row.comparisonOperators4 == '/' ? '' : row.row.count4 }}
-                    </div>
-                </template>
-            </vxe-column>
-        </vxe-table>
-        <el-divider content-position="left">充电站、电加热负荷、电气化铁路评估策略配置</el-divider>
-        <vxe-table v-bind="defaultAttribute" ref="xTable" :loading="loading" :data="tableData">
-            <vxe-colgroup field="group0" title="等级">
-                <vxe-column field="name" width="180" title="结果"></vxe-column>
-            </vxe-colgroup>
-
-            <vxe-column field="comparisonOperators1" title="THD(%)">
-                <template #default="row">
-                    <div class="cellBox" @click="cells(row, row.row.comparisonOperators1, row.row.count1, 1)">
-                        {{ symbolJudgment(row.row.comparisonOperators1)
-                        }}{{ row.row.comparisonOperators1 == '/' ? '' : row.row.count1 }}
-                    </div>
-                </template>
-            </vxe-column>
-
-            <vxe-column field="comparisonOperators2" title="2~25次谐波合格个数">
-                <template #default="row">
-                    <div class="cellBox" @click="cells(row, row.row.comparisonOperators2, row.row.count2, 2)">
-                        {{ symbolJudgment(row.row.comparisonOperators2)
-                        }}{{ row.row.comparisonOperators2 == '/' ? '' : row.row.count2 }}
-                    </div>
-                </template>
-            </vxe-column>
-            <vxe-column field="comparisonOperators3" title="畸次谐波合格个数">
-                <template #default="row">
-                    <div class="cellBox" @click="cells(row, row.row.comparisonOperators3, row.row.count3, 3)">
-                        {{ symbolJudgment(row.row.comparisonOperators3)
-                        }}{{ row.row.comparisonOperators3 == '/' ? '' : row.row.count3 }}
-                    </div>
-                </template>
-            </vxe-column>
-            <vxe-column field="comparisonOperators4" title="偶次谐波合格个数">
-                <template #default="row">
-                    <div class="cellBox" @click="cells(row, row.row.comparisonOperators4, row.row.count4, 4)">
-                        {{ symbolJudgment(row.row.comparisonOperators4)
-                        }}{{ row.row.comparisonOperators4 == '/' ? '' : row.row.count4 }}
-                    </div>
-                </template>
-            </vxe-column>
-        </vxe-table>
-        <!-- 修改 -->
-
-        <el-dialog class="dialogBox" draggable v-model="dialogVisible" title="安全等级配置" width="500">
-            <el-form :model="form" label-width="auto">
-                <el-form-item label="运算符号：">
-                    <el-radio-group v-model="form.comparisonOperators" @change="groupChang">
-                        <el-radio v-for="item in sign" :label="item.name">{{ item.name }}</el-radio>
-                    </el-radio-group>
-                </el-form-item>
-                <el-form-item label="数量：">
-                    <el-input-number
-                        v-model="form.count"
-                        :disabled="disabled"
-                        :min="0"
-                        :precision="0"
-                        :max="10000000"
-                        style="width: 200px"
-                    />
-                </el-form-item>
-            </el-form>
-            <template #footer>
-                <div class="dialog-footer">
-                    <el-button @click="dialogVisible = false">取消</el-button>
-                    <el-button type="primary" @click="add">确定</el-button>
-                </div>
-            </template>
-        </el-dialog>
-    </el-dialog>
-</template>
-<script setup lang="ts">
-import { ref, onMounted, provide, reactive } from 'vue'
-import { defaultAttribute } from '@/components/table/defaultAttribute'
-import { mainHeight } from '@/utils/layout'
-import { queyDetail, addCarryc, restore, queyDetailDhl, adddhl } from '@/api/advance-boot/bearingCapacity'
-import { ElMessage, ElMessageBox } from 'element-plus'
-import { VxeTablePropTypes } from 'vxe-table'
-defineOptions({
-    name: 'Advancedanalysis/eventcorrelation'
-})
-const emit = defineEmits(['View'])
-
-const Views = ref(true)
-
-const xTable = ref()
-const loading = ref(false)
-const photovoltaicData: any = ref([])
-const sum = ref(0)
-const tableData: any = ref([])
-const list: any = ref({})
-const form: any = ref({
-    comparisonOperators: '',
-    count: ''
-})
-const sign = ref([
-    {
-        name: '>'
-    },
-    {
-        name: '<'
-    },
-    {
-        name: '>='
-    },
-    {
-        name: '<='
-    },
-    {
-        name: '=='
-    },
-    {
-        name: '/'
-    }
-])
-const dialogVisible = ref(false)
-const disabled = ref(false)
-const info = () => {
-    // 光伏
-    queyDetail().then(res => {
-        photovoltaicData.value = []
-        let title = ['安全', 'III级预警', 'II级预警', 'I级预警']
-        let p = 0
-        res.data.forEach((item: any, i: any) => {
-            item.capacityStrategysingleVOList.forEach((item1: any, i1: any) => {
-                photovoltaicData.value.push({
-                    name: title[i],
-                    id: item1.id,
-                    result: item.result
-                })
-                p++
-                item1.carryCapacityStrategyIndexVOList.forEach((item2: any) => {
-                    photovoltaicData.value[p - 1]['comparisonOperators' + item2.indexResult] = item2.comparisonOperators
-                    photovoltaicData.value[p - 1]['count' + item2.indexResult] = item2.count
-                })
-            })
-        })
-        console.log('🚀 ~ queyDetail ~ photovoltaicData.value:', photovoltaicData.value)
-    })
-    // 电弧炉
-    queyDetailDhl().then(res => {
-        tableData.value = res.data
-        tableData.value[0].name = '电弧炉'
-        tableData.value[1].name = '充电桩'
-        tableData.value[2].name = '电气化铁路'
-    })
-}
-
-// <span @click="cells(row,comparisonOperators2,count2)">
-const cells = (row: any, comparisonOperators: any, count: any, num: number) => {
-    form.value = {
-        comparisonOperators: comparisonOperators,
-        count: count,
-        result: row.row.result,
-        id: row.row.id,
-        indexResult: row.columnIndex
-    }
-    sum.value = num
-    if (num != 0) {
-        list.value = JSON.parse(JSON.stringify(row.row))
-    }
-
-    groupChang(comparisonOperators)
-    dialogVisible.value = true
-}
-// 运算符变化
-const groupChang = e => {
-    if (e == '/') {
-        form.value.count = 0
-        disabled.value = true
-    } else {
-        disabled.value = false
-    }
-}
-// 安全等级配置确认
-const add = () => {
-    if (sum.value == 0) {
-        addCarryc(form.value).then(res => {
-            ElMessage.success('修改成功!')
-            dialogVisible.value = false
-            info()
-        })
-    } else {
-        // sum.value = num
-        // list.value = row
-        list.value['comparisonOperators' + sum.value] = form.value.comparisonOperators
-        list.value['count' + sum.value] = form.value.count
-        list.value.userFlag = 0
-        list.value.protoFlag = 0
-        adddhl(list.value).then(res => {
-            ElMessage.success('修改成功!')
-            dialogVisible.value = false
-            info()
-        })
-    }
-}
-// 还原
-const restores = () => {
-    restore().then(res => {
-        ElMessage.success('还原成功!')
-        info()
-    })
-}
-// 通用行合并函数（将相同多列数据合并为一行）
-const mergeRowMethod = ({ row, _rowIndex, column, visibleData }) => {
-    const fields = ['name']
-    const cellValue = row[column.field]
-    if (cellValue && fields.includes(column.field)) {
-        const prevRow = visibleData[_rowIndex - 1]
-        let nextRow = visibleData[_rowIndex + 1]
-        if (prevRow && prevRow[column.field] === cellValue) {
-            return { rowspan: 0, colspan: 0 }
-        } else {
-            let countRowspan = 1
-            while (nextRow && nextRow[column.field] === cellValue) {
-                nextRow = visibleData[++countRowspan + _rowIndex]
-            }
-            if (countRowspan > 1) {
-                return { rowspan: countRowspan, colspan: 1 }
-            }
-        }
-    }
-}
-const symbolJudgment = (value: string) => {
-    if (value == '==') {
-        return '='
-    } else {
-        return value
-    }
-}
-onMounted(() => {
-    info()
-})
-// 取消
-const handleClose = () => {
-    emit('View')
-}
-</script>
-
-<style lang="scss" scoped>
-:deep(.vxe-table--header thead tr:first-of-type th:first-of-type) {
-    // background: var(--vxe-table-header-background-color);
-    background-image: linear-gradient(var(--vxe-table-border-color), var(--vxe-table-border-color)),
-        linear-gradient(#e8eaec00, #e8eaec00);
-}
-:deep(.vxe-table--header thead tr:first-of-type th:first-of-type:before) {
-    content: '';
-    position: absolute;
-    width: 1px;
-    height: 98px; /*这里需要自己调整，根据td的宽度和高度*/
-    top: 0;
-    left: 0;
-    background-color: grey;
-    opacity: 0.3;
-    display: block;
-    transform: rotate(-66deg); /*这里需要自己调整，根据线的位置*/
-    transform-origin: top;
-}
-:deep(.vxe-table--header thead tr:last-of-type th:first-of-type:before) {
-    content: '';
-    position: absolute;
-    width: 1px;
-    height: 98px; /*这里需要自己调整，根据td的宽度和高度*/
-    bottom: 0;
-    right: 0;
-    background-color: grey;
-    opacity: 0.3;
-    display: block;
-    transform: rotate(-66deg); /*这里需要自己调整，根据线的位置*/
-    transform-origin: bottom;
-}
-.cellBox {
-    cursor: pointer;
-    color: var(--el-color-primary);
-    font-weight: 600;
-    text-decoration: underline;
-}
-</style>
-<style lang="scss">
-.el-dialog__body {
-    max-height: none !important;
-}
-.dialogBox {
-    margin-top: calc(15vh + 200px) !important;
-}
-/* 确保对话框在页面居中 */
-// .el-dialog {
-//     display: flex;
-//     flex-direction: column;
-//     margin: 0 !important;
-//     position: absolute;
-//     top: 50%;
-//     left: 50%;
-//     transform: translate(-50%, -50%);
-//     max-height: calc(100% - 30px);
-//     max-width: calc(100% - 30px);
-// }
-
-// /* 确保遮罩层全屏显示 */
-// .el-dialog__wrapper {
-//     display: flex;
-//     align-items: center;
-//     justify-content: center;
-// }
-</style>
+<template>
+    <el-dialog v-model="Views" draggable title="评估策略配置" width="1000" :before-close="handleClose">
+        <div style="display: flex; justify-content: end">
+            <el-button icon="el-icon-Refresh" type="primary" @click="restores">一键还原</el-button>
+        </div>
+        <el-divider content-position="left">光伏电站评估策略配置</el-divider>
+        <vxe-table v-bind="defaultAttribute" :loading="loading" :data="photovoltaicData" :span-method="mergeRowMethod">
+            <vxe-colgroup field="group0" title="等级">
+                <vxe-column field="name" width="180" title="结果"></vxe-column>
+            </vxe-colgroup>
+            <vxe-column field="comparisonOperators1" title="安全(个)">
+                <template #default="row">
+                    <div class="cellBox" @click="cells(row, row.row.comparisonOperators1, row.row.count1, 0)">
+                        {{ symbolJudgment(row.row.comparisonOperators1)
+                        }}{{ row.row.comparisonOperators1 == '/' ? '' : row.row.count1 }}
+                    </div>
+                </template>
+            </vxe-column>
+            <vxe-column field="comparisonOperators2" title="III级预警(个)">
+                <template #default="row">
+                    <div class="cellBox" @click="cells(row, row.row.comparisonOperators2, row.row.count2, 0)">
+                        {{ symbolJudgment(row.row.comparisonOperators2)
+                        }}{{ row.row.comparisonOperators2 == '/' ? '' : row.row.count2 }}
+                    </div>
+                </template>
+            </vxe-column>
+            <vxe-column field="comparisonOperators3" title="II级预警(个)">
+                <template #default="row">
+                    <div class="cellBox" @click="cells(row, row.row.comparisonOperators3, row.row.count3, 0)">
+                        {{ symbolJudgment(row.row.comparisonOperators3)
+                        }}{{ row.row.comparisonOperators3 == '/' ? '' : row.row.count3 }}
+                    </div>
+                </template>
+            </vxe-column>
+            <vxe-column field="comparisonOperators4" title="I级预警(个)">
+                <template #default="row">
+                    <div class="cellBox" @click="cells(row, row.row.comparisonOperators4, row.row.count4, 0)">
+                        {{ symbolJudgment(row.row.comparisonOperators4)
+                        }}{{ row.row.comparisonOperators4 == '/' ? '' : row.row.count4 }}
+                    </div>
+                </template>
+            </vxe-column>
+        </vxe-table>
+        <el-divider content-position="left">充电站、电加热负荷、电气化铁路评估策略配置</el-divider>
+        <vxe-table v-bind="defaultAttribute" ref="xTable" :loading="loading" :data="tableData">
+            <vxe-colgroup field="group0" title="等级">
+                <vxe-column field="name" width="180" title="结果"></vxe-column>
+            </vxe-colgroup>
+
+            <vxe-column field="comparisonOperators1" title="THD(%)">
+                <template #default="row">
+                    <div class="cellBox" @click="cells(row, row.row.comparisonOperators1, row.row.count1, 1)">
+                        {{ symbolJudgment(row.row.comparisonOperators1)
+                        }}{{ row.row.comparisonOperators1 == '/' ? '' : row.row.count1 }}
+                    </div>
+                </template>
+            </vxe-column>
+
+            <vxe-column field="comparisonOperators2" title="2~25次谐波合格个数">
+                <template #default="row">
+                    <div class="cellBox" @click="cells(row, row.row.comparisonOperators2, row.row.count2, 2)">
+                        {{ symbolJudgment(row.row.comparisonOperators2)
+                        }}{{ row.row.comparisonOperators2 == '/' ? '' : row.row.count2 }}
+                    </div>
+                </template>
+            </vxe-column>
+            <vxe-column field="comparisonOperators3" title="奇次谐波合格个数">
+                <template #default="row">
+                    <div class="cellBox" @click="cells(row, row.row.comparisonOperators3, row.row.count3, 3)">
+                        {{ symbolJudgment(row.row.comparisonOperators3)
+                        }}{{ row.row.comparisonOperators3 == '/' ? '' : row.row.count3 }}
+                    </div>
+                </template>
+            </vxe-column>
+            <vxe-column field="comparisonOperators4" title="偶次谐波合格个数">
+                <template #default="row">
+                    <div class="cellBox" @click="cells(row, row.row.comparisonOperators4, row.row.count4, 4)">
+                        {{ symbolJudgment(row.row.comparisonOperators4)
+                        }}{{ row.row.comparisonOperators4 == '/' ? '' : row.row.count4 }}
+                    </div>
+                </template>
+            </vxe-column>
+        </vxe-table>
+        <!-- 修改 -->
+
+        <el-dialog class="dialogBox" draggable v-model="dialogVisible" title="安全等级配置" width="500">
+            <el-form :model="form" label-width="auto">
+                <el-form-item label="运算符号：">
+                    <el-radio-group v-model="form.comparisonOperators" @change="groupChang">
+                        <el-radio v-for="item in sign" :label="item.name">{{ item.name }}</el-radio>
+                    </el-radio-group>
+                </el-form-item>
+                <el-form-item label="数量：">
+                    <el-input-number
+                        v-model="form.count"
+                        :disabled="disabled"
+                        :min="0"
+                        :precision="0"
+                        :max="10000000"
+                        style="width: 200px"
+                    />
+                </el-form-item>
+            </el-form>
+            <template #footer>
+                <div class="dialog-footer">
+                    <el-button @click="dialogVisible = false">取消</el-button>
+                    <el-button type="primary" @click="add">确定</el-button>
+                </div>
+            </template>
+        </el-dialog>
+    </el-dialog>
+</template>
+<script setup lang="ts">
+import { ref, onMounted, provide, reactive } from 'vue'
+import { defaultAttribute } from '@/components/table/defaultAttribute'
+import { mainHeight } from '@/utils/layout'
+import { queyDetail, addCarryc, restore, queyDetailDhl, adddhl } from '@/api/advance-boot/bearingCapacity'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { VxeTablePropTypes } from 'vxe-table'
+defineOptions({
+    name: 'Advancedanalysis/eventcorrelation'
+})
+const emit = defineEmits(['View'])
+
+const Views = ref(true)
+
+const xTable = ref()
+const loading = ref(false)
+const photovoltaicData: any = ref([])
+const sum = ref(0)
+const tableData: any = ref([])
+const list: any = ref({})
+const form: any = ref({
+    comparisonOperators: '',
+    count: ''
+})
+const sign = ref([
+    {
+        name: '>'
+    },
+    {
+        name: '<'
+    },
+    {
+        name: '>='
+    },
+    {
+        name: '<='
+    },
+    {
+        name: '=='
+    },
+    {
+        name: '/'
+    }
+])
+const dialogVisible = ref(false)
+const disabled = ref(false)
+const info = () => {
+    // 光伏
+    queyDetail().then(res => {
+        photovoltaicData.value = []
+        let title = ['安全', 'III级预警', 'II级预警', 'I级预警']
+        let p = 0
+        res.data.forEach((item: any, i: any) => {
+            item.capacityStrategysingleVOList.forEach((item1: any, i1: any) => {
+                photovoltaicData.value.push({
+                    name: title[i],
+                    id: item1.id,
+                    result: item.result
+                })
+                p++
+                item1.carryCapacityStrategyIndexVOList.forEach((item2: any) => {
+                    photovoltaicData.value[p - 1]['comparisonOperators' + item2.indexResult] = item2.comparisonOperators
+                    photovoltaicData.value[p - 1]['count' + item2.indexResult] = item2.count
+                })
+            })
+        })
+        console.log('🚀 ~ queyDetail ~ photovoltaicData.value:', photovoltaicData.value)
+    })
+    // 电弧炉
+    queyDetailDhl().then(res => {
+        tableData.value = res.data
+        tableData.value[0].name = '电弧炉'
+        tableData.value[1].name = '充电桩'
+        tableData.value[2].name = '电气化铁路'
+    })
+}
+
+// <span @click="cells(row,comparisonOperators2,count2)">
+const cells = (row: any, comparisonOperators: any, count: any, num: number) => {
+    form.value = {
+        comparisonOperators: comparisonOperators,
+        count: count,
+        result: row.row.result,
+        id: row.row.id,
+        indexResult: row.columnIndex
+    }
+    sum.value = num
+    if (num != 0) {
+        list.value = JSON.parse(JSON.stringify(row.row))
+    }
+
+    groupChang(comparisonOperators)
+    dialogVisible.value = true
+}
+// 运算符变化
+const groupChang = e => {
+    if (e == '/') {
+        form.value.count = 0
+        disabled.value = true
+    } else {
+        disabled.value = false
+    }
+}
+// 安全等级配置确认
+const add = () => {
+    if (sum.value == 0) {
+        addCarryc(form.value).then(res => {
+            ElMessage.success('修改成功!')
+            dialogVisible.value = false
+            info()
+        })
+    } else {
+        // sum.value = num
+        // list.value = row
+        list.value['comparisonOperators' + sum.value] = form.value.comparisonOperators
+        list.value['count' + sum.value] = form.value.count
+        list.value.userFlag = 0
+        list.value.protoFlag = 0
+        adddhl(list.value).then(res => {
+            ElMessage.success('修改成功!')
+            dialogVisible.value = false
+            info()
+        })
+    }
+}
+// 还原
+const restores = () => {
+    restore().then(res => {
+        ElMessage.success('还原成功!')
+        info()
+    })
+}
+// 通用行合并函数（将相同多列数据合并为一行）
+const mergeRowMethod = ({ row, _rowIndex, column, visibleData }) => {
+    const fields = ['name']
+    const cellValue = row[column.field]
+    if (cellValue && fields.includes(column.field)) {
+        const prevRow = visibleData[_rowIndex - 1]
+        let nextRow = visibleData[_rowIndex + 1]
+        if (prevRow && prevRow[column.field] === cellValue) {
+            return { rowspan: 0, colspan: 0 }
+        } else {
+            let countRowspan = 1
+            while (nextRow && nextRow[column.field] === cellValue) {
+                nextRow = visibleData[++countRowspan + _rowIndex]
+            }
+            if (countRowspan > 1) {
+                return { rowspan: countRowspan, colspan: 1 }
+            }
+        }
+    }
+}
+const symbolJudgment = (value: string) => {
+    if (value == '==') {
+        return '='
+    } else {
+        return value
+    }
+}
+onMounted(() => {
+    info()
+})
+// 取消
+const handleClose = () => {
+    emit('View')
+}
+</script>
+
+<style lang="scss" scoped>
+:deep(.vxe-table--header thead tr:first-of-type th:first-of-type) {
+    // background: var(--vxe-table-header-background-color);
+    background-image: linear-gradient(var(--vxe-table-border-color), var(--vxe-table-border-color)),
+        linear-gradient(#e8eaec00, #e8eaec00);
+}
+:deep(.vxe-table--header thead tr:first-of-type th:first-of-type:before) {
+    content: '';
+    position: absolute;
+    width: 1px;
+    height: 98px; /*这里需要自己调整，根据td的宽度和高度*/
+    top: 0;
+    left: 0;
+    background-color: grey;
+    opacity: 0.3;
+    display: block;
+    transform: rotate(-66deg); /*这里需要自己调整，根据线的位置*/
+    transform-origin: top;
+}
+:deep(.vxe-table--header thead tr:last-of-type th:first-of-type:before) {
+    content: '';
+    position: absolute;
+    width: 1px;
+    height: 98px; /*这里需要自己调整，根据td的宽度和高度*/
+    bottom: 0;
+    right: 0;
+    background-color: grey;
+    opacity: 0.3;
+    display: block;
+    transform: rotate(-66deg); /*这里需要自己调整，根据线的位置*/
+    transform-origin: bottom;
+}
+.cellBox {
+    cursor: pointer;
+    color: var(--el-color-primary);
+    font-weight: 600;
+    text-decoration: underline;
+}
+</style>
+<style lang="scss">
+.el-dialog__body {
+    max-height: none !important;
+}
+.dialogBox {
+    margin-top: calc(15vh + 200px) !important;
+}
+/* 确保对话框在页面居中 */
+// .el-dialog {
+//     display: flex;
+//     flex-direction: column;
+//     margin: 0 !important;
+//     position: absolute;
+//     top: 50%;
+//     left: 50%;
+//     transform: translate(-50%, -50%);
+//     max-height: calc(100% - 30px);
+//     max-width: calc(100% - 30px);
+// }
+
+// /* 确保遮罩层全屏显示 */
+// .el-dialog__wrapper {
+//     display: flex;
+//     align-items: center;
+//     justify-content: center;
+// }
+</style>
diff --git a/src/views/pqs/bearingCapacity/evaluationList/index.vue b/src/views/pqs/bearingCapacity/evaluationList/index.vue
index 9151ad8c..6369d2ad 100644
--- a/src/views/pqs/bearingCapacity/evaluationList/index.vue
+++ b/src/views/pqs/bearingCapacity/evaluationList/index.vue
@@ -1,211 +1,211 @@
-<template>
-    <div class="default-main">
-        <div v-show="addedShow">
-            <TableHeader datePicker showExport ref="TableHeaderRef">
-                <template #select>
-                    <el-form-item label="评估类型">
-                        <el-select
-                            v-model="tableStore.table.params.evaluateType"
-                            clearable
-                            placeholder="请选择评估类型"
-                        >
-                            <el-option v-for="item in uesrList" :key="item.id" :label="item.name" :value="item.id" />
-                        </el-select>
-                    </el-form-item>
-                </template>
-                <template #operation>
-                    <el-button icon="el-icon-Setting" type="primary" @click="configuration">评估策略配置</el-button>
-                    <el-button icon="el-icon-Plus" type="primary" @click="addAssess">新增评估</el-button>
-                </template>
-            </TableHeader>
-            <Table ref="tableRef" />
-
-            <policy v-if="policyView" @View="policyView = false" />
-        </div>
-        <!-- <Added v-if="!addedShow" @quit="addedShow = true" /> -->
-        <div v-if="!addedShow" style="position: relative">
-            <el-tabs v-model="activeName" type="border-card" :style="{ height: height }">
-                <el-tab-pane label="光伏电站承载能力评估" name="1" v-if="code == null || code == 1">
-                    <photovoltaic :rowList="rowList" />
-                </el-tab-pane>
-                <el-tab-pane
-                    label="充电站、电加热负荷、电气化铁路承载能力评估"
-                    name="2"
-                    v-if="code == null || code == 2"
-                >
-                    <charge :rowList="rowList" />
-                </el-tab-pane>
-            </el-tabs>
-            <el-button class="quit" icon="el-icon-Back" @click="quit">返回</el-button>
-        </div>
-    </div>
-</template>
-<script setup lang="ts">
-import { ref, onMounted, provide, reactive } from 'vue'
-import TableStore from '@/utils/tableStore'
-import Table from '@/components/table/index.vue'
-import TableHeader from '@/components/table/header/index.vue'
-import Area from '@/components/form/area/index.vue'
-import { ElMessage, ElMessageBox } from 'element-plus'
-import policy from './components/policy.vue'
-import photovoltaic from './components/photovoltaic.vue'
-import charge from './components/charge.vue'
-import { remove } from '@/api/advance-boot/bearingCapacity'
-import { mainHeight } from '@/utils/layout'
-import { useDictData } from '@/stores/dictData'
-defineOptions({
-    name: 'estimate/evaluationList'
-})
-const height = mainHeight(20).height
-const dictData = useDictData()
-const levelList = dictData.getBasicData('Dev_Voltage_Stand')
-const uesrList = dictData.getBasicData('CARRY_CAPCITY_USER_TYPE')
-const activeName = ref('1')
-
-const policyView = ref(false)
-const addedShow = ref(true)
-const code = ref(null)
-const rowList = ref({})
-const TableHeaderRef = ref()
-
-const tableStore: any = new TableStore({
-    url: '/advance-boot/result/queryResultList',
-    method: 'POST',
-    column: [
-        {
-            title: '序号',
-            width: '80',
-            formatter: (row: any) => {
-                return (tableStore.table.params.pageNum - 1) * tableStore.table.params.pageSize + row.rowIndex + 1
-            }
-        },
-        { field: 'userName', title: '用户名称' },
-        {
-            field: 'evaluateType',
-            title: '评估类型',
-            formatter: (row: any) => {
-                return uesrList.filter(item => item.id == row.cellValue)[0].name
-            }
-        },
-        {
-            field: 'lineName',
-            title: '配变台区',
-            width: '500',
-            formatter: (row: any) => {
-                return row.cellValue ? row.cellValue : '/'
-            }
-        },
-
-        {
-            field: 'reslutLevel',
-            title: '评估结果',
-            type: 'html',
-            formatter: (row: any) => {
-                // 1-安全，2-III级预警，3-II级预警，4-I 级预警,5-禁止接入
-                return `<span style="color: ${
-                    row.cellValue == 1
-                        ? '#2E7D32' // 深绿色 - 安全
-                        : row.cellValue == 2
-                        ? '#0288D1' // 深蓝色 - III级预警
-                        : row.cellValue == 3
-                        ? '#F57C00' // 橙色 - II级预警
-                        : row.cellValue == 4
-                        ? '#E64A19' // 深橙色 - I级预警
-                        : row.cellValue == 5
-                        ? '#C62828' // 深红色 - 禁止接入
-                        : row.cellValue == 6
-                        ? '#00897B' // 深青色 - 允许接入
-                        : ''
-                }">${
-                    row.cellValue == 1
-                        ? '安全'
-                        : row.cellValue == 2
-                        ? 'III级预警'
-                        : row.cellValue == 3
-                        ? 'II级预警'
-                        : row.cellValue == 4
-                        ? 'I 级预警'
-                        : row.cellValue == 5
-                        ? '禁止接入'
-                        : row.cellValue == 6
-                        ? '允许接入'
-                        : ''
-                }</span>`
-            }
-        },
-        { field: 'evaluateDate', title: '评估日期' },
-
-        {
-            title: '操作',
-            width: '180',
-            render: 'buttons',
-            buttons: [
-                {
-                    name: 'edit',
-                    title: '查看',
-                    type: 'primary',
-                    icon: 'el-icon-Plus',
-                    render: 'basicButton',
-                    click: row => {
-                        rowList.value = row
-                        let data = uesrList.filter(item => item.id == row.evaluateType)[0].code
-                        data == 'Power_Station_Users'
-                            ? ((code.value = 1), (activeName.value = '1'))
-                            : ((code.value = 2), (activeName.value = '2'))
-                        addedShow.value = false
-                    }
-                },
-                {
-                    name: 'del',
-                    text: '禁止接入',
-                    type: 'danger',
-                    icon: 'el-icon-Delete',
-                    render: 'confirmButton',
-                    popconfirm: {
-                        confirmButtonText: '确认',
-                        cancelButtonText: '取消',
-                        confirmButtonType: 'danger',
-                        title: '确定删除？'
-                    },
-                    click: row => {
-                        remove({ ids: row.id }).then(() => {
-                            ElMessage.success('删除成功')
-                            tableStore.index()
-                        })
-                    }
-                }
-            ]
-        }
-    ],
-
-    loadCallback: () => {}
-})
-tableStore.table.params.evaluateType = ''
-tableStore.table.params.id = dictData.state.area[0].id
-
-provide('tableStore', tableStore)
-const quit = () => {
-    addedShow.value = true
-    tableStore.index()
-    rowList.value = {}
-}
-onMounted(() => {
-    tableStore.index()
-})
-const addAssess = () => {
-    addedShow.value = false
-    code.value = null
-    activeName.value = '1'
-}
-// 配置
-const configuration = () => {
-    policyView.value = true
-}
-</script>
-<style lang="scss" scoped>
-.quit {
-    position: absolute;
-    top: 5px;
-    right: 10px;
-}
-</style>
+<template>
+    <div class="default-main">
+        <div v-show="addedShow">
+            <TableHeader datePicker showExport ref="TableHeaderRef">
+                <template #select>
+                    <el-form-item label="评估类型">
+                        <el-select
+                            v-model="tableStore.table.params.evaluateType"
+                            clearable
+                            placeholder="请选择评估类型"
+                        >
+                            <el-option v-for="item in uesrList" :key="item.id" :label="item.name" :value="item.id" />
+                        </el-select>
+                    </el-form-item>
+                </template>
+                <template #operation>
+                    <el-button icon="el-icon-Setting" type="primary" @click="configuration">评估策略配置</el-button>
+                    <el-button icon="el-icon-Plus" type="primary" @click="addAssess">新增评估</el-button>
+                </template>
+            </TableHeader>
+            <Table ref="tableRef" />
+
+            <policy v-if="policyView" @View="policyView = false" />
+        </div>
+        <!-- <Added v-if="!addedShow" @quit="addedShow = true" /> -->
+        <div v-if="!addedShow" style="position: relative">
+            <el-tabs v-model="activeName" type="border-card" :style="{ height: height }">
+                <el-tab-pane label="光伏电站承载能力评估" name="1" v-if="code == null || code == 1">
+                    <photovoltaic :rowList="rowList" />
+                </el-tab-pane>
+                <el-tab-pane
+                    label="充电站、电加热负荷、电气化铁路承载能力评估"
+                    name="2"
+                    v-if="code == null || code == 2"
+                >
+                    <charge :rowList="rowList" />
+                </el-tab-pane>
+            </el-tabs>
+            <el-button class="quit" icon="el-icon-Back" @click="quit">返回</el-button>
+        </div>
+    </div>
+</template>
+<script setup lang="ts">
+import { ref, onMounted, provide, reactive } from 'vue'
+import TableStore from '@/utils/tableStore'
+import Table from '@/components/table/index.vue'
+import TableHeader from '@/components/table/header/index.vue'
+import Area from '@/components/form/area/index.vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import policy from './components/policy.vue'
+import photovoltaic from './components/photovoltaic.vue'
+import charge from './components/charge.vue'
+import { remove } from '@/api/advance-boot/bearingCapacity'
+import { mainHeight } from '@/utils/layout'
+import { useDictData } from '@/stores/dictData'
+defineOptions({
+    name: 'estimate/evaluationList'
+})
+const height = mainHeight(20).height
+const dictData = useDictData()
+const levelList = dictData.getBasicData('Dev_Voltage_Stand')
+const uesrList = dictData.getBasicData('CARRY_CAPCITY_USER_TYPE')
+const activeName = ref('1')
+
+const policyView = ref(false)
+const addedShow = ref(true)
+const code = ref(null)
+const rowList = ref({})
+const TableHeaderRef = ref()
+
+const tableStore: any = new TableStore({
+    url: '/advance-boot/result/queryResultList',
+    method: 'POST',
+    column: [
+        {
+            title: '序号',
+            width: '80',
+            formatter: (row: any) => {
+                return (tableStore.table.params.pageNum - 1) * tableStore.table.params.pageSize + row.rowIndex + 1
+            }
+        },
+        { field: 'userName', title: '用户名称' },
+        {
+            field: 'evaluateType',
+            title: '评估类型',
+            formatter: (row: any) => {
+                return uesrList.filter(item => item.id == row.cellValue)[0].name
+            }
+        },
+        {
+            field: 'lineName',
+            title: '配变台区',
+            width: '500',
+            formatter: (row: any) => {
+                return row.cellValue ? row.cellValue : '/'
+            }
+        },
+
+        {
+            field: 'reslutLevel',
+            title: '评估结果',
+            type: 'html',
+            formatter: (row: any) => {
+                // 1-安全，2-III级预警，3-II级预警，4-I 级预警,5-禁止接入
+                return `<span style="color: ${
+                    row.cellValue == 1
+                        ? '#2E7D32' // 深绿色 - 安全
+                        : row.cellValue == 2
+                        ? '#0288D1' // 深蓝色 - III级预警
+                        : row.cellValue == 3
+                        ? '#F57C00' // 橙色 - II级预警
+                        : row.cellValue == 4
+                        ? '#E64A19' // 深橙色 - I级预警
+                        : row.cellValue == 5
+                        ? '#C62828' // 深红色 - 禁止接入
+                        : row.cellValue == 6
+                        ? '#00897B' // 深青色 - 允许接入
+                        : ''
+                }">${
+                    row.cellValue == 1
+                        ? '安全'
+                        : row.cellValue == 2
+                        ? 'III级预警'
+                        : row.cellValue == 3
+                        ? 'II级预警'
+                        : row.cellValue == 4
+                        ? 'I 级预警'
+                        : row.cellValue == 5
+                        ? '禁止接入'
+                        : row.cellValue == 6
+                        ? '允许接入'
+                        : ''
+                }</span>`
+            }
+        },
+        { field: 'evaluateDate', title: '评估日期' },
+
+        {
+            title: '操作',
+            width: '180',
+            render: 'buttons',
+            buttons: [
+                {
+                    name: 'edit',
+                    title: '查看',
+                    type: 'primary',
+                    icon: 'el-icon-Plus',
+                    render: 'basicButton',
+                    click: row => {
+                        rowList.value = row
+                        let data = uesrList.filter(item => item.id == row.evaluateType)[0].code
+                        data == 'Power_Station_Users'
+                            ? ((code.value = 1), (activeName.value = '1'))
+                            : ((code.value = 2), (activeName.value = '2'))
+                        addedShow.value = false
+                    }
+                },
+                {
+                    name: 'del',
+                    text: '禁止接入',
+                    type: 'danger',
+                    icon: 'el-icon-Delete',
+                    render: 'confirmButton',
+                    popconfirm: {
+                        confirmButtonText: '确认',
+                        cancelButtonText: '取消',
+                        confirmButtonType: 'danger',
+                        title: '确定禁止接入？'
+                    },
+                    click: row => {
+                        remove({ ids: row.id }).then(() => {
+                            ElMessage.success('禁止接入成功')
+                            tableStore.index()
+                        })
+                    }
+                }
+            ]
+        }
+    ],
+
+    loadCallback: () => {}
+})
+tableStore.table.params.evaluateType = ''
+tableStore.table.params.id = dictData.state.area[0].id
+
+provide('tableStore', tableStore)
+const quit = () => {
+    addedShow.value = true
+    tableStore.index()
+    rowList.value = {}
+}
+onMounted(() => {
+    tableStore.index()
+})
+const addAssess = () => {
+    addedShow.value = false
+    code.value = null
+    activeName.value = '1'
+}
+// 配置
+const configuration = () => {
+    policyView.value = true
+}
+</script>
+<style lang="scss" scoped>
+.quit {
+    position: absolute;
+    top: 5px;
+    right: 10px;
+}
+</style>
diff --git a/src/views/pqs/business/terminal/FrontManagement/index.vue b/src/views/pqs/business/terminal/FrontManagement/index.vue
index 70516727..fcbddbc6 100644
--- a/src/views/pqs/business/terminal/FrontManagement/index.vue
+++ b/src/views/pqs/business/terminal/FrontManagement/index.vue
@@ -1,525 +1,525 @@
-<template>
-    <div class="default-main">
-        <div class="default">
-            <div style="flex: 1">
-                <TableHeader>
-                    <template v-slot:select>
-                        <el-form-item label="前置等级">
-                            <el-select
-                                v-model="tableStore.table.params.nodeGrade"
-                                clearable
-                                placeholder="请选择前置等级"
-                            >
-                                <el-option
-                                    v-for="item in fontdveoption"
-                                    :key="item.id"
-                                    :label="item.name"
-                                    :value="item.id"
-                                />
-                            </el-select>
-                        </el-form-item>
-                        <el-form-item label="状态">
-                            <el-select v-model="tableStore.table.params.searchState" clearable placeholder="请选择状态">
-                                <el-option
-                                    v-for="item in statusoption"
-                                    :key="item.id"
-                                    :label="item.name"
-                                    :value="item.id"
-                                />
-                            </el-select>
-                        </el-form-item>
-                    </template>
-                    <template v-slot:operation>
-                        <el-button type="primary" class="ml10" @click="add" icon="el-icon-Plus">新增</el-button>
-                    </template>
-                </TableHeader>
-                <Table
-                    ref="tableRef"
-                    :row-config="{ isCurrent: true, isHover: true }"
-                    @current-change="currentChangeEvent"
-                ></Table>
-            </div>
-            <div class="pd10" style="width: 400px" v-loading="loading">
-                <el-input v-model="filterText" placeholder="请输入内容" clearable show-word-limit @input="change">
-                    <template #prefix>
-                        <Icon name="el-icon-Search" style="font-size: 16px" />
-                    </template>
-                </el-input>
-                <el-tree
-                    :style="height"
-                    style="overflow-y: auto"
-                    :data="dataSource"
-                    node-key="id"
-                    ref="treeRef"
-                    default-expand-all
-                    :props="defaultProps"
-                    :filter-node-method="filterNode"
-                >
-                    <template #default="{ node, data }">
-                        <div class="custom-tree-node">
-                            <span>
-                                <span v-if="data.processState != null">
-                                    {{ node.label }}
-                                </span>
-                                <span v-else>{{ data.subName }}_{{ data.name }}</span>
-                                <span
-                                    v-if="data.processState != null"
-                                    class="iconSpan"
-                                    :style="{ background: data.processState == 0 ? '#ff0000' : '#00b07d' }"
-                                ></span>
-                            </span>
-                            <div>
-                                <!-- <el-button type="primary" v-if="data.id == undefined" link icon="el-icon-Plus" ></el-button> -->
-                                <el-button
-                                    style="margin-left: 4px"
-                                    icon="el-icon-Edit"
-                                    v-if="data.id"
-                                    type="primary"
-                                    @click="edit(data)"
-                                    link
-                                ></el-button>
-                            </div>
-                        </div>
-                    </template>
-                </el-tree>
-            </div>
-        </div>
-        <el-dialog
-            draggable
-            :title="dialogTitle"
-            v-model="dialogFormVisible"
-            :close-on-click-modal="false"
-            width="700px"
-            :before-close="resetForm"
-        >
-            <el-form :model="formData" label-width="120px" :rules="rules" ref="ruleFormRef">
-                <el-form-item label="名称:" prop="name">
-                    <el-input v-model="formData.name" placeholder="请输入名称" maxlength="32" show-word-limit @input="handleInput"></el-input>
-                </el-form-item>
-                <el-form-item label="IP:" prop="ip" class="top">
-                    <el-input v-model="formData.ip" placeholder="请输入Ip"></el-input>
-                </el-form-item>
-                <el-form-item label="等级:" prop="nodeGrade" class="top">
-                    <el-select v-model="formData.nodeGrade" placeholder="请选择等级" style="width: 100%">
-                        <el-option
-                            v-for="item in fontdveoption"
-                            :key="item.id"
-                            :label="item.name"
-                            :value="item.id"
-                        ></el-option>
-                    </el-select>
-                </el-form-item>
-                <el-form-item label="最大终端数:" prop="nodeDevNum" class="top">
-                    <el-input
-                        v-model="formData.nodeDevNum"
-                        onkeyup="value = value.replace(/[^0-9]/g,'')"
-                        maxlength="5"
-                        placeholder="请输入最大终端数"
-                    ></el-input>
-                </el-form-item>
-                <el-form-item label="最大进程数:" prop="maxProcessNum" class="top">
-                    <el-input
-                        v-model="formData.maxProcessNum"
-                        onkeyup="value = value.replace(/[^0-9]/g,'')"
-                        maxlength="5"
-                        placeholder="请输入最大进程数"
-                    ></el-input>
-                    <!-- <el-select v-model="formData.maxProcessNum" placeholder="请选择等级" style="width: 100%">
-                        <el-option
-                            v-for="item in NumList"
-                            :key="item.id"
-                            :label="item.name"
-                            :value="item.id"
-                        ></el-option>
-                    </el-select> -->
-                </el-form-item>
-                <el-form-item label="排序:" prop="sort" class="top">
-                    <el-input v-model="formData.sort" placeholder="请输入排序"></el-input>
-                </el-form-item>
-                <el-form-item label="描述:" prop="remark" class="top">
-                    <el-input
-                        v-model="formData.remark"
-                        :autosize="{ minRows: 2, maxRows: 4 }"
-                        type="textarea"
-                        placeholder="请输入描述"
-                    ></el-input>
-                </el-form-item>
-            </el-form>
-            <template #footer>
-                <el-button @click="resetForm">取 消</el-button>
-                <el-button type="primary" @click="onSubmit">确 定</el-button>
-            </template>
-        </el-dialog>
-
-        <!-- 绑定监测点 -->
-        <Bind ref="bindRef" />
-        <!-- 绑定进程号 -->
-        <el-dialog draggable title="绑定进程号" v-model="popUps" :close-on-click-modal="false" width="400px">
-            <el-select v-model="processNo" placeholder="请选择进程号" style="width: 100%">
-                <el-option
-                    v-for="item in dataSource"
-                    :key="item.name"
-                    :label="item.name"
-                    :value="item.name"
-                ></el-option>
-            </el-select>
-
-            <template #footer>
-                <el-button @click="popUps = false">取 消</el-button>
-                <el-button type="primary" @click="bindTheProcess">确 定</el-button>
-            </template>
-        </el-dialog>
-    </div>
-</template>
-<script setup lang="ts">
-import { ref, onMounted, provide, reactive, nextTick } from 'vue'
-import { addNode, delNode, updateNode, nodeDeviceTree, updateDeviceProcess } from '@/api/device-boot/Business'
-import TableStore from '@/utils/tableStore'
-import Table from '@/components/table/index.vue'
-import TableHeader from '@/components/table/header/index.vue'
-import { ElMessage, ElMessageBox } from 'element-plus'
-import { ElButton } from 'element-plus'
-import { mainHeight } from '@/utils/layout'
-import Bind from './bind.vue'
-defineOptions({
-    name: 'BusinessAdministrator/TerminalManagement/FrontManagement'
-})
-const filterText = ref('')
-const fontdveoption: any = ref([
-    { id: 0, name: '极重要' },
-    { id: 1, name: '普通' },
-    { id: 2, name: '备用' }
-])
-const statusoption: any = ref([
-    { id: 0, name: '未启用' },
-    { id: 1, name: '启用' }
-])
-const height = mainHeight(70)
-const bindRef = ref()
-const loading = ref(false)
-const popUps = ref(false)
-const tableRef = ref()
-const processNo = ref('')
-const ruleFormRef = ref()
-const dataSource: any = ref([])
-const defaultProps = {
-    children: 'deviceInfoList',
-    label: 'name'
-}
-const formData: any = ref({
-    name: '',
-    ip: '',
-    nodeGrade: '',
-    nodeDevNum: '',
-    sort: '',
-    remark: '',
-    maxProcessNum: ''
-})
-const rules = reactive({
-    name: [{ required: true, message: '名称不可为空', trigger: 'blur' }],
-    ip: [{ required: true, message: 'ip不可为空', trigger: 'blur' }],
-    nodeGrade: [{ required: true, message: '等级不可为空', trigger: 'blur' }],
-    nodeDevNum: [{ required: true, message: '最大终端数不可为空', trigger: 'blur' }],
-    maxProcessNum: [{ required: true, message: '最大进程数不可为空', trigger: 'blur' }],
-    sort: [{ required: true, message: '排序不可为空', trigger: 'blur' }],
-    remark: [{ required: true, message: '描述不可为空', trigger: 'blur' }]
-})
-const dialogFormVisible = ref(false)
-
-const dialogTitle = ref('新增前置机')
-const processId = ref('')
-const tableStore = new TableStore({
-    url: '/device-boot/node/nodeList',
-    method: 'POST',
-    column: [
-        { title: '名称', field: 'name' },
-        { title: 'IP', field: 'ip' },
-        {
-            title: '等级',
-            field: 'nodeGrade',
-            render: 'tag',
-            custom: {
-                0: 'success',
-                1: 'warning',
-                2: 'info'
-            },
-            replaceValue: {
-                0: '极重要',
-                1: '普通',
-                2: '备用'
-            }
-        },
-        {
-            title: '最大监测点数量',
-            field: 'nodeDevNum'
-        },
-        {
-            title: '最大进程数',
-            field: 'maxProcessNum'
-        },
-        {
-            title: '排序',
-            field: 'sort'
-        },
-        {
-            title: '状态',
-            field: 'state',
-            render: 'tag',
-            custom: {
-                0: 'warning',
-                1: 'success'
-            },
-            replaceValue: {
-                0: '未启用',
-                1: '启用'
-            }
-        },
-        { title: '描述', field: 'remark' },
-
-        {
-            title: '操作',
-            align: 'center',
-            width: '180',
-            render: 'buttons',
-            buttons: [
-                {
-                    name: 'edit',
-                    title: '编辑',
-                    type: 'primary',
-                    icon: 'el-icon-EditPen',
-                    render: 'basicButton',
-
-                    click: async row => {
-                        dialogFormVisible.value = true
-                        dialogTitle.value = '前置机修改'
-                        formData.value = JSON.parse(JSON.stringify(row))
-                    }
-                },
-
-                {
-                    name: 'del',
-                    title: '删除',
-                    type: 'danger',
-                    icon: 'el-icon-Delete',
-                    render: 'confirmButton',
-                    popconfirm: {
-                        confirmButtonText: '确认',
-                        cancelButtonText: '取消',
-                        confirmButtonType: 'danger',
-                        title: '确定删除吗？'
-                    },
-                    click: row => {
-                        delNode(row.id).then(res => {
-                            ElMessage.success('删除成功')
-                            tableStore.index()
-                        })
-                    }
-                }
-            ]
-        }
-    ],
-    beforeSearchFun: () => {
-        for (let key in tableStore.table.params) {
-            if (tableStore.table.params[key] === '' && key !== 'nodeGrade' && key !== 'searchState') {
-                delete tableStore.table.params[key]
-            }
-        }
-    },
-    loadCallback: () => {
-        tableRef.value.getRef().setCurrentRow(tableStore.table.data[0])
-        currentChangeEvent()
-    }
-})
-// 点击行
-const currentChangeEvent = () => {
-      // 确保 tableRef 和当前记录存在
-    if (!tableRef.value || !tableRef.value.getRef().getCurrentRecord()) {
-        loading.value = false;
-        dataSource.value = [];
-        return;
-    }
-
-    loading.value = true
-    dataSource.value = []
-    nodeDeviceTree({
-        nodeId: tableRef.value.getRef().getCurrentRecord().id
-    }).then(res => {
-        // 检查返回的数据是否存在且不为空
-        if (res.data && res.data.processDeviceList) {
-            dataSource.value = res.data.processDeviceList.filter(item => (item.name = item.processNo + ''))
-        } else {
-            dataSource.value = []
-        }
-        loading.value = false
-    }).catch(() => {
-        // 添加错误处理，确保 loading 状态也能关闭
-        dataSource.value = []
-        loading.value = false
-    })
-    
-    // const row = tableRef.value.getRef().getCurrentRecord()
-}
-const treeRef = ref()
-// 树过滤
-const change = val => {
-    treeRef.value!.filter(filterText.value)
-}
-const edit = (data: any) => {
-    // console.log('🚀 ~ edit ~ data:', data)
-    processNo.value = data.processNo
-    processId.value = data.id
-    popUps.value = true
-}
-// 更新进程号
-const bindTheProcess = () => {
-    updateDeviceProcess({
-        id: processId.value,
-        processNo: processNo.value
-    }).then(res => {
-        ElMessage.success('修改成功！')
-        popUps.value = false
-        currentChangeEvent()
-    })
-}
-const filterNode = (value: string, data: any, node: any) => {
-    if (!value) return true
-    // return data.name.includes(value)
-    if (data.name) {
-        return chooseNode(value, data, node)
-    }
-}
-
-// 过滤父节点 / 子节点 (如果输入的参数是父节点且能匹配，则返回该节点以及其下的所有子节点；如果参数是子节点，则返回该节点的父节点。name是中文字符，enName是英文字符.
-const chooseNode = (value: string, data: any, node: any) => {
-    if (data.name.indexOf(value) !== -1) {
-        return true
-    }
-    const level = node.level
-    // 如果传入的节点本身就是一级节点就不用校验了
-    if (level === 1) {
-        return false
-    }
-    // 先取当前节点的父节点
-    let parentData = node.parent
-    // 遍历当前节点的父节点
-    let index = 0
-    while (index < level - 1) {
-        // 如果匹配到直接返回，此处name值是中文字符，enName是英文字符。判断匹配中英文过滤
-        if (parentData.data.name.indexOf(value) !== -1) {
-            return true
-        }
-        // 否则的话再往上一层做匹配
-        parentData = parentData.parent
-        index++
-    }
-    // 没匹配到返回false
-    return false
-}
-const bind = () => {}
-
-tableStore.table.params.orderBy = 'desc'
-tableStore.table.params.nodeGrade = ''
-tableStore.table.params.searchState = ''
-provide('tableStore', tableStore)
-
-// 新增
-const add = () => {
-    dialogFormVisible.value = true
-    dialogTitle.value = '新增前置机'
-}
-
-// 确认
-const onSubmit = () => {
-    ruleFormRef.value.validate((valid: any) => {
-        if (valid) {
-            if (dialogTitle.value == '新增前置机') {
-                addNode(formData.value).then(res => {
-                    ElMessage.success('新增前置机')
-                    resetForm()
-                    tableStore.onTableAction('search', {})
-                })
-            } else {
-                updateNode(formData.value).then(res => {
-                    ElMessage.success('修改成功')
-                    resetForm()
-                    tableStore.onTableAction('search', {})
-                })
-            }
-        }
-    })
-}
-// 清空表格
-const resetForm = () => {
-    dialogFormVisible.value = false
-    formData.value = {
-        name: '',
-        ip: '',
-        nodeGrade: '',
-        nodeDevNum: '',
-        sort: '',
-        remark: ''
-    }
-}
-
-const handleInput = (val: string) => {
-    formData.value.name = val.replace(/\s+/g, '')
-}
-
-onMounted(() => {
-    setTimeout(() => {
-        tableStore.index()
-    }, 100)
-})
-
-const addMenu = () => {}
-</script>
-<style lang="scss" scoped>
-.qrcode-label {
-    position: absolute;
-    top: 0;
-    right: 0;
-    z-index: -99;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 180px;
-    height: 180px;
-    padding: 10px;
-    background: #fff;
-    flex-direction: column;
-
-    .qrcode-label-title {
-        margin-bottom: 10px;
-        font-size: 14px;
-        font-weight: bold;
-    }
-
-    .qrcode-label-img {
-        width: 140px;
-        height: 140px;
-    }
-}
-:deep(.default) {
-    display: flex;
-    .row--current {
-        background-color: var(--el-color-primary-light-8) !important;
-    }
-}
-.custom-tree-node {
-    flex: 1;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    font-size: 14px;
-    padding-right: 8px;
-    width: 300px;
-}
-.iconSpan {
-    display: inline-block;
-    width: 8px;
-    height: 8px;
-    margin-left: 3px;
-    border-radius: 50%;
-    margin-bottom: 2px;
-}
-</style>
+<template>
+    <div class="default-main">
+        <div class="default">
+            <div style="flex: 1">
+                <TableHeader>
+                    <template v-slot:select>
+                        <el-form-item label="前置等级">
+                            <el-select
+                                v-model="tableStore.table.params.nodeGrade"
+                                clearable
+                                placeholder="请选择前置等级"
+                            >
+                                <el-option
+                                    v-for="item in fontdveoption"
+                                    :key="item.id"
+                                    :label="item.name"
+                                    :value="item.id"
+                                />
+                            </el-select>
+                        </el-form-item>
+                        <el-form-item label="状态">
+                            <el-select v-model="tableStore.table.params.searchState" clearable placeholder="请选择状态">
+                                <el-option
+                                    v-for="item in statusoption"
+                                    :key="item.id"
+                                    :label="item.name"
+                                    :value="item.id"
+                                />
+                            </el-select>
+                        </el-form-item>
+                    </template>
+                    <template v-slot:operation>
+                        <el-button type="primary" class="ml10" @click="add" icon="el-icon-Plus">新增</el-button>
+                    </template>
+                </TableHeader>
+                <Table
+                    ref="tableRef"
+                    :row-config="{ isCurrent: true, isHover: true }"
+                    @current-change="currentChangeEvent"
+                ></Table>
+            </div>
+            <div class="pd10" style="width: 400px" v-loading="loading">
+                <el-input v-model="filterText" placeholder="请输入内容" clearable show-word-limit @input="change">
+                    <template #prefix>
+                        <Icon name="el-icon-Search" style="font-size: 16px" />
+                    </template>
+                </el-input>
+                <el-tree
+                    :style="height"
+                    style="overflow-y: auto"
+                    :data="dataSource"
+                    node-key="id"
+                    ref="treeRef"
+                    default-expand-all
+                    :props="defaultProps"
+                    :filter-node-method="filterNode"
+                >
+                    <template #default="{ node, data }">
+                        <div class="custom-tree-node">
+                            <span>
+                                <span v-if="data.processState != null">
+                                    {{ node.label }}
+                                </span>
+                                <span v-else>{{ data.subName }}_{{ data.name }}</span>
+                                <span
+                                    v-if="data.processState != null"
+                                    class="iconSpan"
+                                    :style="{ background: data.processState == 0 ? '#ff0000' : '#00b07d' }"
+                                ></span>
+                            </span>
+                            <div>
+                                <!-- <el-button type="primary" v-if="data.id == undefined" link icon="el-icon-Plus" ></el-button> -->
+                                <el-button
+                                    style="margin-left: 4px"
+                                    icon="el-icon-Edit"
+                                    v-if="data.id"
+                                    type="primary"
+                                    @click="edit(data)"
+                                    link
+                                ></el-button>
+                            </div>
+                        </div>
+                    </template>
+                </el-tree>
+            </div>
+        </div>
+        <el-dialog
+            draggable
+            :title="dialogTitle"
+            v-model="dialogFormVisible"
+            :close-on-click-modal="false"
+            width="700px"
+            :before-close="resetForm"
+        >
+            <el-form :model="formData" label-width="120px" :rules="rules" ref="ruleFormRef">
+                <el-form-item label="名称:" prop="name">
+                    <el-input v-model="formData.name" placeholder="请输入名称" maxlength="32" show-word-limit @input="handleInput"></el-input>
+                </el-form-item>
+                <el-form-item label="IP:" prop="ip" class="top">
+                    <el-input v-model="formData.ip" placeholder="请输入Ip"></el-input>
+                </el-form-item>
+                <el-form-item label="等级:" prop="nodeGrade" class="top">
+                    <el-select v-model="formData.nodeGrade" placeholder="请选择等级" style="width: 100%">
+                        <el-option
+                            v-for="item in fontdveoption"
+                            :key="item.id"
+                            :label="item.name"
+                            :value="item.id"
+                        ></el-option>
+                    </el-select>
+                </el-form-item>
+                <el-form-item label="最大终端数:" prop="nodeDevNum" class="top">
+                    <el-input
+                        v-model="formData.nodeDevNum"
+                        onkeyup="value = value.replace(/[^0-9]/g,'')"
+                        maxlength="5"
+                        placeholder="请输入最大终端数"
+                    ></el-input>
+                </el-form-item>
+                <el-form-item label="最大进程数:" prop="maxProcessNum" class="top">
+                    <el-input
+                        v-model="formData.maxProcessNum"
+                        onkeyup="value = value.replace(/[^0-9]/g,'')"
+                        maxlength="5"
+                        placeholder="请根据监测点规模填写合适进程数（1个进程最大可承载200个监测点）"
+                    ></el-input>
+                    <!-- <el-select v-model="formData.maxProcessNum" placeholder="请选择等级" style="width: 100%">
+                        <el-option
+                            v-for="item in NumList"
+                            :key="item.id"
+                            :label="item.name"
+                            :value="item.id"
+                        ></el-option>
+                    </el-select> -->
+                </el-form-item>
+                <el-form-item label="排序:" prop="sort" class="top">
+                    <el-input v-model="formData.sort" placeholder="请输入排序"></el-input>
+                </el-form-item>
+                <el-form-item label="描述:" prop="remark" class="top">
+                    <el-input
+                        v-model="formData.remark"
+                        :autosize="{ minRows: 2, maxRows: 4 }"
+                        type="textarea"
+                        placeholder="请输入描述"
+                    ></el-input>
+                </el-form-item>
+            </el-form>
+            <template #footer>
+                <el-button @click="resetForm">取 消</el-button>
+                <el-button type="primary" @click="onSubmit">确 定</el-button>
+            </template>
+        </el-dialog>
+
+        <!-- 绑定监测点 -->
+        <Bind ref="bindRef" />
+        <!-- 绑定进程号 -->
+        <el-dialog draggable title="绑定进程号" v-model="popUps" :close-on-click-modal="false" width="400px">
+            <el-select v-model="processNo" placeholder="请选择进程号" style="width: 100%">
+                <el-option
+                    v-for="item in dataSource"
+                    :key="item.name"
+                    :label="item.name"
+                    :value="item.name"
+                ></el-option>
+            </el-select>
+
+            <template #footer>
+                <el-button @click="popUps = false">取 消</el-button>
+                <el-button type="primary" @click="bindTheProcess">确 定</el-button>
+            </template>
+        </el-dialog>
+    </div>
+</template>
+<script setup lang="ts">
+import { ref, onMounted, provide, reactive, nextTick } from 'vue'
+import { addNode, delNode, updateNode, nodeDeviceTree, updateDeviceProcess } from '@/api/device-boot/Business'
+import TableStore from '@/utils/tableStore'
+import Table from '@/components/table/index.vue'
+import TableHeader from '@/components/table/header/index.vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { ElButton } from 'element-plus'
+import { mainHeight } from '@/utils/layout'
+import Bind from './bind.vue'
+defineOptions({
+    name: 'BusinessAdministrator/TerminalManagement/FrontManagement'
+})
+const filterText = ref('')
+const fontdveoption: any = ref([
+    { id: 0, name: '极重要' },
+    { id: 1, name: '普通' },
+    { id: 2, name: '备用' }
+])
+const statusoption: any = ref([
+    { id: 0, name: '未启用' },
+    { id: 1, name: '启用' }
+])
+const height = mainHeight(70)
+const bindRef = ref()
+const loading = ref(false)
+const popUps = ref(false)
+const tableRef = ref()
+const processNo = ref('')
+const ruleFormRef = ref()
+const dataSource: any = ref([])
+const defaultProps = {
+    children: 'deviceInfoList',
+    label: 'name'
+}
+const formData: any = ref({
+    name: '',
+    ip: '',
+    nodeGrade: '',
+    nodeDevNum: '',
+    sort: '',
+    remark: '',
+    maxProcessNum: ''
+})
+const rules = reactive({
+    name: [{ required: true, message: '名称不可为空', trigger: 'blur' }],
+    ip: [{ required: true, message: 'ip不可为空', trigger: 'blur' }],
+    nodeGrade: [{ required: true, message: '等级不可为空', trigger: 'blur' }],
+    nodeDevNum: [{ required: true, message: '最大终端数不可为空', trigger: 'blur' }],
+    maxProcessNum: [{ required: true, message: '最大进程数不可为空', trigger: 'blur' }],
+    sort: [{ required: true, message: '排序不可为空', trigger: 'blur' }],
+    remark: [{ required: true, message: '描述不可为空', trigger: 'blur' }]
+})
+const dialogFormVisible = ref(false)
+
+const dialogTitle = ref('新增前置机')
+const processId = ref('')
+const tableStore = new TableStore({
+    url: '/device-boot/node/nodeList',
+    method: 'POST',
+    column: [
+        { title: '名称', field: 'name' },
+        { title: 'IP', field: 'ip' },
+        {
+            title: '等级',
+            field: 'nodeGrade',
+            render: 'tag',
+            custom: {
+                0: 'success',
+                1: 'warning',
+                2: 'info'
+            },
+            replaceValue: {
+                0: '极重要',
+                1: '普通',
+                2: '备用'
+            }
+        },
+        {
+            title: '最大监测点数量',
+            field: 'nodeDevNum'
+        },
+        {
+            title: '最大进程数',
+            field: 'maxProcessNum'
+        },
+        {
+            title: '排序',
+            field: 'sort'
+        },
+        {
+            title: '状态',
+            field: 'state',
+            render: 'tag',
+            custom: {
+                0: 'warning',
+                1: 'success'
+            },
+            replaceValue: {
+                0: '未启用',
+                1: '启用'
+            }
+        },
+        { title: '描述', field: 'remark' },
+
+        {
+            title: '操作',
+            align: 'center',
+            width: '180',
+            render: 'buttons',
+            buttons: [
+                {
+                    name: 'edit',
+                    title: '编辑',
+                    type: 'primary',
+                    icon: 'el-icon-EditPen',
+                    render: 'basicButton',
+
+                    click: async row => {
+                        dialogFormVisible.value = true
+                        dialogTitle.value = '前置机修改'
+                        formData.value = JSON.parse(JSON.stringify(row))
+                    }
+                },
+
+                {
+                    name: 'del',
+                    title: '删除',
+                    type: 'danger',
+                    icon: 'el-icon-Delete',
+                    render: 'confirmButton',
+                    popconfirm: {
+                        confirmButtonText: '确认',
+                        cancelButtonText: '取消',
+                        confirmButtonType: 'danger',
+                        title: '确定删除吗？'
+                    },
+                    click: row => {
+                        delNode(row.id).then(res => {
+                            ElMessage.success('删除成功')
+                            tableStore.index()
+                        })
+                    }
+                }
+            ]
+        }
+    ],
+    beforeSearchFun: () => {
+        for (let key in tableStore.table.params) {
+            if (tableStore.table.params[key] === '' && key !== 'nodeGrade' && key !== 'searchState') {
+                delete tableStore.table.params[key]
+            }
+        }
+    },
+    loadCallback: () => {
+        tableRef.value.getRef().setCurrentRow(tableStore.table.data[0])
+        currentChangeEvent()
+    }
+})
+// 点击行
+const currentChangeEvent = () => {
+      // 确保 tableRef 和当前记录存在
+    if (!tableRef.value || !tableRef.value.getRef().getCurrentRecord()) {
+        loading.value = false;
+        dataSource.value = [];
+        return;
+    }
+
+    loading.value = true
+    dataSource.value = []
+    nodeDeviceTree({
+        nodeId: tableRef.value.getRef().getCurrentRecord().id
+    }).then(res => {
+        // 检查返回的数据是否存在且不为空
+        if (res.data && res.data.processDeviceList) {
+            dataSource.value = res.data.processDeviceList.filter(item => (item.name = item.processNo + ''))
+        } else {
+            dataSource.value = []
+        }
+        loading.value = false
+    }).catch(() => {
+        // 添加错误处理，确保 loading 状态也能关闭
+        dataSource.value = []
+        loading.value = false
+    })
+    
+    // const row = tableRef.value.getRef().getCurrentRecord()
+}
+const treeRef = ref()
+// 树过滤
+const change = val => {
+    treeRef.value!.filter(filterText.value)
+}
+const edit = (data: any) => {
+    // console.log('🚀 ~ edit ~ data:', data)
+    processNo.value = data.processNo
+    processId.value = data.id
+    popUps.value = true
+}
+// 更新进程号
+const bindTheProcess = () => {
+    updateDeviceProcess({
+        id: processId.value,
+        processNo: processNo.value
+    }).then(res => {
+        ElMessage.success('修改成功！')
+        popUps.value = false
+        currentChangeEvent()
+    })
+}
+const filterNode = (value: string, data: any, node: any) => {
+    if (!value) return true
+    // return data.name.includes(value)
+    if (data.name) {
+        return chooseNode(value, data, node)
+    }
+}
+
+// 过滤父节点 / 子节点 (如果输入的参数是父节点且能匹配，则返回该节点以及其下的所有子节点；如果参数是子节点，则返回该节点的父节点。name是中文字符，enName是英文字符.
+const chooseNode = (value: string, data: any, node: any) => {
+    if (data.name.indexOf(value) !== -1) {
+        return true
+    }
+    const level = node.level
+    // 如果传入的节点本身就是一级节点就不用校验了
+    if (level === 1) {
+        return false
+    }
+    // 先取当前节点的父节点
+    let parentData = node.parent
+    // 遍历当前节点的父节点
+    let index = 0
+    while (index < level - 1) {
+        // 如果匹配到直接返回，此处name值是中文字符，enName是英文字符。判断匹配中英文过滤
+        if (parentData.data.name.indexOf(value) !== -1) {
+            return true
+        }
+        // 否则的话再往上一层做匹配
+        parentData = parentData.parent
+        index++
+    }
+    // 没匹配到返回false
+    return false
+}
+const bind = () => {}
+
+tableStore.table.params.orderBy = 'desc'
+tableStore.table.params.nodeGrade = ''
+tableStore.table.params.searchState = ''
+provide('tableStore', tableStore)
+
+// 新增
+const add = () => {
+    dialogFormVisible.value = true
+    dialogTitle.value = '新增前置机'
+}
+
+// 确认
+const onSubmit = () => {
+    ruleFormRef.value.validate((valid: any) => {
+        if (valid) {
+            if (dialogTitle.value == '新增前置机') {
+                addNode(formData.value).then(res => {
+                    ElMessage.success('新增前置机')
+                    resetForm()
+                    tableStore.onTableAction('search', {})
+                })
+            } else {
+                updateNode(formData.value).then(res => {
+                    ElMessage.success('修改成功')
+                    resetForm()
+                    tableStore.onTableAction('search', {})
+                })
+            }
+        }
+    })
+}
+// 清空表格
+const resetForm = () => {
+    dialogFormVisible.value = false
+    formData.value = {
+        name: '',
+        ip: '',
+        nodeGrade: '',
+        nodeDevNum: '',
+        sort: '',
+        remark: ''
+    }
+}
+
+const handleInput = (val: string) => {
+    formData.value.name = val.replace(/\s+/g, '')
+}
+
+onMounted(() => {
+    setTimeout(() => {
+        tableStore.index()
+    }, 100)
+})
+
+const addMenu = () => {}
+</script>
+<style lang="scss" scoped>
+.qrcode-label {
+    position: absolute;
+    top: 0;
+    right: 0;
+    z-index: -99;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 180px;
+    height: 180px;
+    padding: 10px;
+    background: #fff;
+    flex-direction: column;
+
+    .qrcode-label-title {
+        margin-bottom: 10px;
+        font-size: 14px;
+        font-weight: bold;
+    }
+
+    .qrcode-label-img {
+        width: 140px;
+        height: 140px;
+    }
+}
+:deep(.default) {
+    display: flex;
+    .row--current {
+        background-color: var(--el-color-primary-light-8) !important;
+    }
+}
+.custom-tree-node {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    font-size: 14px;
+    padding-right: 8px;
+    width: 300px;
+}
+.iconSpan {
+    display: inline-block;
+    width: 8px;
+    height: 8px;
+    margin-left: 3px;
+    border-radius: 50%;
+    margin-bottom: 2px;
+}
+</style>
diff --git a/src/views/pqs/harmonicMonitoring/area/getIntegrityData/index.vue b/src/views/pqs/harmonicMonitoring/area/getIntegrityData/index.vue
index 56f1e543..53ec95f9 100644
--- a/src/views/pqs/harmonicMonitoring/area/getIntegrityData/index.vue
+++ b/src/views/pqs/harmonicMonitoring/area/getIntegrityData/index.vue
@@ -1,544 +1,539 @@
-<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"
-                            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>
-                <template #operation>
-                    <el-button type="primary" icon="el-icon-Tickets" @click="makeUp">补招</el-button>
-                </template>
-            </TableHeader>
-        </div>
-        <div class="online_main">
-            <el-tabs v-model="activeName" type="border-card" @tab-click="handleClick">
-                <el-tab-pane :name="0" :lazy="true" label="数据完整性列表">
-                    <Table
-                        ref="tableRef"
-                        :tree-config="{ transform: true, parentField: 'uPid', rowField: 'uId' }"
-                        :checkbox-config="{ labelField: 'name', checkMethod: ({ row }) => true }"
-                        :scroll-y="{ enabled: true }"
-                        v-if="activeName == 0"
-                    />
-                </el-tab-pane>
-                <el-tab-pane :name="1" :lazy="true" label="数据完整性图表">
-                    <charts v-if="activeName == 1" ref="chartsRef" />
-                </el-tab-pane>
-            </el-tabs>
-        </div>
-        <el-dialog v-model="dialogVisible" draggable title="补招" width="500">
-            补招时间：
-            <el-date-picker
-                v-model="timeData"
-                type="datetimerange"
-                format="YYYY-MM-DD HH:mm:00"
-                value-format="YYYY-MM-DD HH:mm:00"
-                range-separator="至"
-                date-format="YYYY-MM-DD"
-                time-format="HH:mm:00"
-                start-placeholder="开始日期"
-                end-placeholder="结束日期"
-                style="width: 400px"
-                :disabledDate="disabledDate"
-            />
-            <template #footer>
-                <div class="dialog-footer">
-                    <el-button @click="dialogVisible = false">取消</el-button>
-                    <el-button type="primary" @click="makeUpSubmit">确认</el-button>
-                </div>
-            </template>
-        </el-dialog>
-    </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, FullRecall } 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 charts from './components/charts.vue'
-import { ElMessage, ElMessageBox } from 'element-plus'
-import { el, fa, tr } from 'element-plus/es/locale'
-defineOptions({
-    name: 'harmonic-boot/harmonic/getIntegrityData'
-})
-const tableRef = ref()
-const chartsRef = ref()
-const dictData = useDictData()
-const dialogVisible = ref(false)
-//字典获取电压等级
-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', ['Report_Type'])
-//调用区域接口获取区域
-const treeData = ref([])
-const idArr = ref([])
-const timeData = 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) => {
-    // if(activeName.value===1){
-    tableStore.index()
-    // }
-}
-
-const tableHeaderRef = ref()
-const tableStore = new TableStore({
-    publicHeight: 60,
-    showPage: false,
-    url: '/device-boot/LineIntegrityData/getLineIntegrityData',
-    method: 'POST',
-    column: [
-        {
-            title: formData.value.statisticalType.name,
-            field: 'name',
-            align: 'left',
-            type: 'checkbox',
-            treeNode: true,
-            width: 350,
-            formatter: function (row) {
-                return row.cellValue ? row.cellValue : '/'
-            }
-        },
-        {
-            title: '网络参数',
-            field: 'ip',
-            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: 'deviceName',
-            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: 'integrityData',
-            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: '不合格'
-            }
-        }
-    ],
-    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
-        // tableStore.table.params.searchBeginTime =  tableHeaderRef.value.datePickerRef.timeValue[0]
-        // tableStore.table.params.searchEndTime =  tableHeaderRef.value.datePickerRef.timeValue[1]
-    },
-    loadCallback: () => {
-        tableStore.table.data = tree2List(tableStore.table.data, Math.random() * 1000)
-        tableStore.table.column[0].title = formData.value.statisticalType.name
-
-        chartsRef.value && chartsRef.value.getTableStoreParams(tableStore.table.params)
-        setTimeout(() => {
-            activeName.value == 0 && tableRef.value && tableRef.value.getRef().setAllTreeExpand(true)
-        }, 0)
-    },
-    resetCallback: () => {
-        // 重置表单数据到默认值
-        formData.value.statisticalType = classificationData[0]
-        formData.value.deptIndex = treeData.value[0]?.id
-        formData.value.scale = voltageleveloption
-        formData.value.manufacturer = terminaloption
-        formData.value.loadType = interfereoption
-    }
-})
-
-tableStore.table.params.deptIndex = ''
-tableStore.table.params.filterName = ''
-tableStore.table.params.statisticalType = []
-tableStore.table.params.scale = []
-tableStore.table.params.manufacturer = []
-tableStore.table.params.loadType = []
-provide('tableStore', tableStore)
-const tree2List = (list: any, id?: string) => {
-    //存储结果的数组
-    let arr: any = []
-    // 遍历 tree 数组
-    list.forEach((item: any) => {
-        item.uPid = id
-        item.uId = Math.random() * 1000
-        item.valueOver =
-            item.integrityData == 3.14159
-                ? 0
-                : item.integrityData >= 90
-                ? 1
-                : item.integrityData >= 60 && item.integrityData < 90
-                ? 2
-                : 3
-        // 判断item是否存在children
-        if (!item.children) return arr.push(item)
-        // 函数递归，对children数组进行tree2List的转换
-        const children = tree2List(item.children, item.uId)
-        // 删除item的children属性
-        delete item.children
-        // 把item和children数组添加至结果数组
-        //..children: 意思是把children数组展开
-        arr.push(item, ...children)
-    })
-    // 返回结果数组
-    return arr
-}
-
-// 禁用超过当前日期的选择
-const disabledDate = (date: Date) => {
-    return date > new Date() // 如果日期大于当前日期，则禁用
-}
-onMounted(() => {})
-// 补招
-const makeUp = () => {
-    // tableRef.value && tableRef.value.getRef().getCheckboxRecords()
-    let list =
-        tableRef.value
-            .getRef()
-            .getCheckboxRecords()
-            .find((item: any) => item.level == '6') || []
-
-    if (list.length == 0) {
-        return ElMessage({
-            message: '请选择监测点',
-            type: 'warning'
-        })
-    }
-    dialogVisible.value = true
-}
-// 补招提交
-const makeUpSubmit = () => {
-    if (timeData.value.length == 0) {
-        return ElMessage({
-            message: '请选择补招时间',
-            type: 'warning'
-        })
-    }
-
-    FullRecall({
-        monitorId: tableRef.value
-            .getRef()
-            .getCheckboxRecords()
-            .filter(item => item.level == 6)
-            .map(item => item.id),
-        reCallEndTime: timeData.value[1],
-        reCallStartTime: timeData.value[0]
-    }).then(res => {
-        ElMessage({
-            message: '补招命令下发成功',
-            type: 'success'
-        })
-        dialogVisible.value = false
-    })
-}
-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;
-//     }
-// }
-
-// 修复VXE表格树表checkbox的样式问题
-:deep(.vxe-table--main-wrapper) {
-    .vxe-table--body-wrapper {
-        .vxe-body--row {
-            .vxe-cell--checkbox {
-                .vxe-checkbox--icon {
-                    color: var(--el-color-primary-light-3);
-                }
-            }
-        }
-    }
-}
-
-// 确保空数据状态下没有灰色遮罩层
-:deep(.vxe-table--empty-block) {
-    background: transparent;
-
-    .vxe-table--empty-content {
-        color: #909399;
-    }
-}
-
-// 修复树表header的样式
-:deep(.vxe-table--header-wrapper) {
-    .vxe-header--row {
-        .vxe-cell--checkbox {
-            .vxe-checkbox--icon {
-                color: var(--el-color-primary-light-3);
-            }
-        }
-    }
-}
-
-// 精确修复checkbox的disabled状态样式
-:deep(.vxe-checkbox.is--disabled) {
-    .vxe-checkbox--icon {
-        color: var(--el-color-primary-light-3) !important;
-    }
-}
-
-// 确保树表节点没有灰色背景，但保留边框
-:deep(.vxe-tree-cell) {
-    background: transparent;
-}
-
-// 精确修复空数据状态下的灰色背景
-:deep(.vxe-table--empty-block) {
-    background: transparent;
-}
-
-// 修复checkbox在空数据状态下的样式
-:deep(.vxe-table--body-wrapper:empty) {
-    .vxe-cell--checkbox {
-        background: transparent;
-
-        .vxe-checkbox--icon {
-            color: var(--el-color-primary-light-3);
-        }
-    }
-}
-
-// 专门修复checkbox和treeNode组合的样式问题
-:deep(.vxe-cell--checkbox) {
-    background: transparent !important;
-
-    .vxe-checkbox--icon {
-        color: var(--el-color-primary-light-3) !important;
-    }
-}
-
-// 修复树表checkbox的特殊样式
-:deep(.vxe-tree-cell .vxe-cell--checkbox) {
-    background: transparent !important;
-
-    .vxe-checkbox--icon {
-        color: var(--el-color-primary-light-3) !important;
-    }
-}
-
-// 确保checkbox在树表中的正确显示
-:deep(.vxe-body--row .vxe-cell--checkbox) {
-    background: transparent !important;
-
-    .vxe-checkbox--icon {
-        color: var(--el-color-primary-light-3) !important;
-    }
-}
-</style>
+<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" 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>
+                <template #operation>
+                    <el-button type="primary" icon="el-icon-Tickets" @click="makeUp">补招</el-button>
+                </template>
+            </TableHeader>
+        </div>
+        <div class="online_main">
+            <el-tabs v-model="activeName" type="border-card" @tab-click="handleClick">
+                <el-tab-pane :name="0" :lazy="true" label="数据完整性列表">
+                    <Table ref="tableRef" :tree-config="{ transform: true, parentField: 'uPid', rowField: 'uId' }"
+                        :checkbox-config="{ labelField: 'name', checkMethod: ({ row }) => true }"
+                        :scroll-y="{ enabled: true }" v-if="activeName == 0" />
+                </el-tab-pane>
+                <el-tab-pane :name="1" :lazy="true" label="数据完整性图表">
+                    <charts v-if="activeName == 1" ref="chartsRef" />
+                </el-tab-pane>
+            </el-tabs>
+        </div>
+        <el-dialog v-model="timePopUp" draggable title="补招" width="500">
+            补招时间：
+            <el-date-picker v-model="timeData" type="datetimerange" format="YYYY-MM-DD HH:mm:00"
+                value-format="YYYY-MM-DD HH:mm:00" range-separator="至" date-format="YYYY-MM-DD" time-format="HH:mm:00"
+                start-placeholder="开始日期" end-placeholder="结束日期" style="width: 400px" :disabledDate="disabledDate" />
+            <template #footer>
+                <div class="dialog-footer">
+                    <el-button @click="timePopUp = false">取消</el-button>
+                    <el-button type="primary" @click="makeUpSubmit">确认</el-button>
+                </div>
+            </template>
+        </el-dialog>
+        <el-dialog v-model="logPopUp" draggable title="补招日志" width="800" @close="close">
+            <div class="logList" ref="logRef">
+                <p v-for="item in logList" :style="{
+                    color: item.type === 'error' ? '#F56C6C' : ''
+                }">
+                <div style="width: 150px;"> {{ item.time }}</div>
+                <div style="flex: 1;">{{ item.name }}</div>
+                </p>
+            </div>
+        </el-dialog>
+    </div>
+</template>
+<script lang="ts" setup>
+import { ref, onMounted, watch, nextTick } from 'vue'
+import { useDictData } from '@/stores/dictData'
+import DatePicker from '@/components/form/datePicker/index.vue'
+import { getAreaDept, FullRecall } 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 charts from './components/charts.vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import socketClient from '@/utils/webSocketClient'
+import { formatDate } from '@/utils/formatTime'
+import { useAdminInfo } from '@/stores/adminInfo'
+const adminInfo = useAdminInfo()
+defineOptions({
+    name: 'harmonic-boot/harmonic/getIntegrityData'
+})
+const logRef = ref()
+const tableRef = ref()
+const chartsRef = ref()
+const dictData = useDictData()
+const timePopUp = ref(false)
+const logPopUp = ref(false)
+//开始创建webSocket客户端
+const dataSocket = reactive({
+    socketServe: socketClient.Instance
+})
+//字典获取电压等级
+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', ['Report_Type'])
+//调用区域接口获取区域
+const treeData = ref([])
+const idArr = ref([])
+const timeData = ref([])
+const logList: any = 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) => {
+    // if(activeName.value===1){
+    tableStore.index()
+    // }
+}
+
+const tableHeaderRef = ref()
+const tableStore = new TableStore({
+    publicHeight: 60,
+    showPage: false,
+    url: '/device-boot/LineIntegrityData/getLineIntegrityData',
+    method: 'POST',
+    column: [
+        {
+            title: formData.value.statisticalType.name,
+            field: 'name',
+            align: 'left',
+            type: 'checkbox',
+            treeNode: true,
+            width: 350,
+            formatter: function (row) {
+                return row.cellValue ? row.cellValue : '/'
+            }
+        },
+        {
+            title: '网络参数',
+            field: 'ip',
+            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: 'deviceName',
+            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: 'integrityData',
+            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: '不合格'
+            }
+        }
+    ],
+    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
+        // tableStore.table.params.searchBeginTime =  tableHeaderRef.value.datePickerRef.timeValue[0]
+        // tableStore.table.params.searchEndTime =  tableHeaderRef.value.datePickerRef.timeValue[1]
+    },
+    loadCallback: () => {
+        tableStore.table.data = tree2List(tableStore.table.data, Math.random() * 1000)
+        tableStore.table.column[0].title = formData.value.statisticalType.name
+
+        chartsRef.value && chartsRef.value.getTableStoreParams(tableStore.table.params)
+        setTimeout(() => {
+            activeName.value == 0 && tableRef.value && tableRef.value.getRef().setAllTreeExpand(true)
+        }, 0)
+    },
+    resetCallback: () => {
+        // 重置表单数据到默认值
+        formData.value.statisticalType = classificationData[0]
+        formData.value.deptIndex = treeData.value[0]?.id
+        formData.value.scale = voltageleveloption
+        formData.value.manufacturer = terminaloption
+        formData.value.loadType = interfereoption
+    }
+})
+
+tableStore.table.params.deptIndex = ''
+tableStore.table.params.filterName = ''
+tableStore.table.params.statisticalType = []
+tableStore.table.params.scale = []
+tableStore.table.params.manufacturer = []
+tableStore.table.params.loadType = []
+provide('tableStore', tableStore)
+const tree2List = (list: any, id?: string) => {
+    //存储结果的数组
+    let arr: any = []
+    // 遍历 tree 数组
+    list.forEach((item: any) => {
+        item.uPid = id
+        item.uId = Math.random() * 1000
+        item.valueOver =
+            item.integrityData == 3.14159
+                ? 0
+                : item.integrityData >= 90
+                    ? 1
+                    : item.integrityData >= 60 && item.integrityData < 90
+                        ? 2
+                        : 3
+        // 判断item是否存在children
+        if (!item.children) return arr.push(item)
+        // 函数递归，对children数组进行tree2List的转换
+        const children = tree2List(item.children, item.uId)
+        // 删除item的children属性
+        delete item.children
+        // 把item和children数组添加至结果数组
+        //..children: 意思是把children数组展开
+        arr.push(item, ...children)
+    })
+    // 返回结果数组
+    return arr
+}
+
+// 禁用超过当前日期的选择
+const disabledDate = (date: Date) => {
+    return date > new Date() // 如果日期大于当前日期，则禁用
+}
+onMounted(() => { })
+// 补招
+const makeUp = () => {
+    // tableRef.value && tableRef.value.getRef().getCheckboxRecords()
+    let list =
+        tableRef.value
+            .getRef()
+            .getCheckboxRecords()
+            .find((item: any) => item.level == '6') || []
+
+    if (list.length == 0) {
+        return ElMessage({
+            message: '请选择监测点',
+            type: 'warning'
+        })
+    }
+    timeData.value = []
+    timePopUp.value = true
+}
+// 补招提交
+const makeUpSubmit = () => {
+    if (timeData.value.length == 0) {
+        return ElMessage({
+            message: '请选择补招时间',
+            type: 'warning'
+        })
+    }
+    let form = {
+        monitorId: tableRef.value
+            .getRef()
+            .getCheckboxRecords()
+            .filter(item => item.level == 6)
+            .map(item => item.id),
+        reCallEndTime: timeData.value[1],
+        reCallStartTime: timeData.value[0]
+    }
+
+    socket(form)
+    timePopUp.value = false
+    logPopUp.value = true
+}
+const socket = async (form: any) => {
+    const url = (localStorage.getItem('WebSocketUrl2') || 'ws://192.168.1.67:10405/api/recell/')
+    logList.value = []
+    await dataSocket.socketServe.connect(`${url}${adminInfo.id}`)
+    await dataSocket.socketServe.send(form)
+    logList.value.push({
+        type: '',
+        time: formatDate(new Date(), 'YYYY-MM-DD hh:mm:ss'),
+        name: '开始补召,请稍等...',
+    })
+    await dataSocket.socketServe.registerCallBack('message', (res: any) => {
+        logList.value.push({
+            type: res.code == 500 ? 'error' : '',
+            time: formatDate(new Date(), 'YYYY-MM-DD hh:mm:ss'),
+            name: res.message
+        })
+
+        setTimeout(() => {
+            logRef.value && (logRef.value.scrollTop = (logRef.value.scrollHeight + 30))
+        }, 10)
+    })
+}
+const close = () => {
+    dataSocket.socketServe?.closeWs()
+}
+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;
+//     }
+// }
+
+// 修复VXE表格树表checkbox的样式问题
+:deep(.vxe-table--main-wrapper) {
+    .vxe-table--body-wrapper {
+        .vxe-body--row {
+            .vxe-cell--checkbox {
+                .vxe-checkbox--icon {
+                    color: var(--el-color-primary-light-3);
+                }
+            }
+        }
+    }
+}
+
+// 确保空数据状态下没有灰色遮罩层
+:deep(.vxe-table--empty-block) {
+    background: transparent;
+
+    .vxe-table--empty-content {
+        color: #909399;
+    }
+}
+
+// 修复树表header的样式
+:deep(.vxe-table--header-wrapper) {
+    .vxe-header--row {
+        .vxe-cell--checkbox {
+            .vxe-checkbox--icon {
+                color: var(--el-color-primary-light-3);
+            }
+        }
+    }
+}
+
+// 精确修复checkbox的disabled状态样式
+:deep(.vxe-checkbox.is--disabled) {
+    .vxe-checkbox--icon {
+        color: var(--el-color-primary-light-3) !important;
+    }
+}
+
+// 确保树表节点没有灰色背景，但保留边框
+:deep(.vxe-tree-cell) {
+    background: transparent;
+}
+
+// 精确修复空数据状态下的灰色背景
+:deep(.vxe-table--empty-block) {
+    background: transparent;
+}
+
+// 修复checkbox在空数据状态下的样式
+:deep(.vxe-table--body-wrapper:empty) {
+    .vxe-cell--checkbox {
+        background: transparent;
+
+        .vxe-checkbox--icon {
+            color: var(--el-color-primary-light-3);
+        }
+    }
+}
+
+// 专门修复checkbox和treeNode组合的样式问题
+:deep(.vxe-cell--checkbox) {
+    background: transparent !important;
+
+    .vxe-checkbox--icon {
+        color: var(--el-color-primary-light-3) !important;
+    }
+}
+
+// 修复树表checkbox的特殊样式
+:deep(.vxe-tree-cell .vxe-cell--checkbox) {
+    background: transparent !important;
+
+    .vxe-checkbox--icon {
+        color: var(--el-color-primary-light-3) !important;
+    }
+}
+
+// 确保checkbox在树表中的正确显示
+:deep(.vxe-body--row .vxe-cell--checkbox) {
+    background: transparent !important;
+
+    .vxe-checkbox--icon {
+        color: var(--el-color-primary-light-3) !important;
+    }
+}
+
+.logList {
+    height: 300px;
+    overflow-y: auto;
+
+    p {
+        margin-bottom: 10px;
+        display: flex;
+    }
+}
+</style>
diff --git a/src/views/pqs/harmonicMonitoring/monitoringPoint/online/shishishuju/index.vue b/src/views/pqs/harmonicMonitoring/monitoringPoint/online/shishishuju/index.vue
index 37a7634a..cdd3b83e 100644
--- a/src/views/pqs/harmonicMonitoring/monitoringPoint/online/shishishuju/index.vue
+++ b/src/views/pqs/harmonicMonitoring/monitoringPoint/online/shishishuju/index.vue
@@ -1,1145 +1,1148 @@
-<template>
-    <div class="view" v-loading="loading">
-        <h3 class="view_title">最新时刻:{{ timeFormat(time) }}</h3>
-        <div v-show="view == 1">
-            <div class="view_btn" v-if="time">
-                <el-button type="primary" :icon="DataLine" @click="view = 2">谐波频谱</el-button>
-                <el-button type="primary" :icon="TrendCharts" @click="view = 3">实时趋势</el-button>
-                <el-button type="primary" :icon="Download" @click="downloadTxt">下载数据</el-button>
-            </div>
-            <el-collapse v-model.trim="activeNames" @change="handleChange">
-                <el-collapse-item title="基础数据" name="1">
-                    <div class="view_top">
-                        <!-- 左侧仪表盘 -->
-                        <div class="view_top_left">
-                            <div class="left_charts_title">电压有效值(kV)</div>
-                            <div class="left_charts">
-                                <MyEchart :pieInterVal="true" ref="pieChart1" :options="echartsDataV1"></MyEchart>
-                            </div>
-                            <div class="left_charts">
-                                <MyEchart :pieInterVal="true" ref="pieChart2" :options="echartsDataV2"></MyEchart>
-                            </div>
-                            <div class="left_charts">
-                                <MyEchart :pieInterVal="true" ref="pieChart3" :options="echartsDataV3"></MyEchart>
-                            </div>
-                        </div>
-                        <div class="view_top_mid">
-                            <div class="mid_charts_title">基波电压/电流幅值(相位)</div>
-                            <div class="mid_charts">
-                                <MyEchart :pieInterVal="true" :options="echartsData1"></MyEchart>
-                                <div class="mid_charts_text">
-                                    <div>电压</div>
-                                    <div>
-                                        A相:
-                                        <span style="color: #DAA520">
-                                            {{ echartsData1?.options?.series[1].data[0].value }}
-                                        </span>
-                                    </div>
-                                    <div>
-                                        B相:
-                                        <span style="color: #2E8B57">
-                                            {{ echartsData1?.options?.series[1].data[1].value }}
-                                        </span>
-                                    </div>
-                                    <div>
-                                        C相:
-                                        <span style="color: #A52a2a">
-                                            {{ echartsData1?.options?.series[1].data[2].value }}
-                                        </span>
-                                    </div>
-                                    <div style="margin-top: 10px">电流</div>
-                                    <div>
-                                        A相:
-                                        <span style="color: #DAA520">
-                                            {{ echartsData1?.options?.series[0].data[0].value }}
-                                        </span>
-                                    </div>
-                                    <div>
-                                        B相:
-                                        <span style="color: #2E8B57">
-                                            {{ echartsData1?.options?.series[0].data[1].value }}
-                                        </span>
-                                    </div>
-                                    <div>
-                                        C相:
-                                        <span style="color: #A52a2a">
-                                            {{ echartsData1?.options?.series[0].data[2].value }}
-                                        </span>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                        <!-- 右侧仪表盘 -->
-                        <div class="view_top_right">
-                            <div class="right_charts_title">电流有效值(A)</div>
-                            <div class="right_charts">
-                                <MyEchart :pieInterVal="true" ref="pieChart4" :options="echartsDataA1"></MyEchart>
-                            </div>
-                            <div class="right_charts">
-                                <MyEchart :pieInterVal="true" ref="pieChart5" :options="echartsDataA2"></MyEchart>
-                            </div>
-                            <div class="right_charts">
-                                <MyEchart :pieInterVal="true" ref="pieChart6" :options="echartsDataA3"></MyEchart>
-                            </div>
-                        </div>
-                    </div>
-                </el-collapse-item>
-            </el-collapse>
-
-            <div class="view_bot" :style="height">
-                <vxe-table border :data="webMsgSend" :tooltip-config="{ enterable: true }">
-                    <vxe-colgroup align="center" title="电压有效值(kV)">
-                        <vxe-column
-                            align="center"
-                            field="vRmsA"
-                            :title="ptName == 'star' ? 'A相' : 'AB相'"
-                            :formatter="formatter"
-                        />
-                        <vxe-column
-                            align="center"
-                            field="vRmsB"
-                            :title="ptName == 'star' ? 'B相' : 'BC相'"
-                            :formatter="formatter"
-                        />
-                        <vxe-column
-                            align="center"
-                            field="vRmsC"
-                            :title="ptName == 'star' ? 'C相' : 'CA相'"
-                            :formatter="formatter"
-                        />
-                    </vxe-colgroup>
-                    <vxe-colgroup align="center" title="电流有效值(A)">
-                        <vxe-column align="center" field="iRmsA" title="A相" :formatter="formatter" />
-                        <vxe-column align="center" field="iRmsB" title="B相" :formatter="formatter" />
-                        <vxe-column align="center" field="iRmsC" title="C相" :formatter="formatter" />
-                    </vxe-colgroup>
-                    <vxe-colgroup align="center" title="基波电压相位(°)">
-                        <vxe-column
-                            align="center"
-                            field="v1AngA"
-                            :title="ptName == 'star' ? 'A相' : 'AB相'"
-                            :formatter="formatter"
-                        />
-                        <vxe-column
-                            align="center"
-                            field="v1AngB"
-                            :title="ptName == 'star' ? 'B相' : 'BC相'"
-                            :formatter="formatter"
-                        />
-                        <vxe-column
-                            align="center"
-                            field="v1AngC"
-                            :title="ptName == 'star' ? 'C相' : 'CA相'"
-                            :formatter="formatter"
-                        />
-                    </vxe-colgroup>
-                    <vxe-colgroup align="center" title="基波电流相位(°)">
-                        <vxe-column align="center" field="i1AngA" title="A相" :formatter="formatter" />
-                        <vxe-column align="center" field="i1AngB" title="B相" :formatter="formatter" />
-                        <vxe-column align="center" field="i1AngC" title="C相" :formatter="formatter" />
-                    </vxe-colgroup>
-                </vxe-table>
-                <br />
-                <vxe-table border :data="webMsgSend" :tooltip-config="{ enterable: true }">
-                    <vxe-column align="center" field="freq" width="140" title="频率(Hz)" :formatter="formatter" />
-                    <vxe-column
-                        align="center"
-                        field="freqDev"
-                        width="120"
-                        title="频率偏差(Hz)"
-                        :formatter="formatter"
-                    />
-                    <vxe-column
-                        align="center"
-                        width="180"
-                        field="vUnbalance"
-                        title="电压不平衡度(%)"
-                        :formatter="formatter"
-                    />
-                    <vxe-column
-                        align="center"
-                        width="180"
-                        field="iUnbalance"
-                        title="电流不平衡度(%)"
-                        :formatter="formatter"
-                    />
-                    <vxe-colgroup align="center" title="基波电压幅值(kV)">
-                        <vxe-column
-                            align="center"
-                            field="v1A"
-                            :title="ptName == 'star' ? 'A相' : 'AB相'"
-                            :formatter="formatter"
-                        />
-                        <vxe-column
-                            align="center"
-                            field="v1B"
-                            :title="ptName == 'star' ? 'B相' : 'BC相'"
-                            :formatter="formatter"
-                        />
-                        <vxe-column
-                            align="center"
-                            field="v1C"
-                            :title="ptName == 'star' ? 'C相' : 'CA相'"
-                            :formatter="formatter"
-                        />
-                    </vxe-colgroup>
-                    <vxe-colgroup align="center" title="基波电流幅值(A)">
-                        <vxe-column align="center" field="i1A" title="A相" :formatter="formatter" />
-                        <vxe-column align="center" field="i1B" title="B相" :formatter="formatter" />
-                        <vxe-column align="center" field="i1C" title="C相" :formatter="formatter" />
-                    </vxe-colgroup>
-                </vxe-table>
-                <br />
-                <vxe-table border :data="webMsgSend" :tooltip-config="{ enterable: true }">
-                    <vxe-colgroup align="center" title="电压偏差(%)">
-                        <vxe-column
-                            align="center"
-                            field="vDevA"
-                            :title="ptName == 'star' ? 'A相' : 'AB相'"
-                            :formatter="formatter"
-                        />
-                        <vxe-column
-                            align="center"
-                            field="vDevB"
-                            :title="ptName == 'star' ? 'B相' : 'BC相'"
-                            :formatter="formatter"
-                        />
-                        <vxe-column
-                            align="center"
-                            field="vDevC"
-                            :title="ptName == 'star' ? 'C相' : 'CA相'"
-                            :formatter="formatter"
-                        />
-                    </vxe-colgroup>
-                    <vxe-colgroup align="center" title="电压总谐波畸变率(%)">
-                        <vxe-column
-                            align="center"
-                            field="vThdA"
-                            :title="ptName == 'star' ? 'A相' : 'AB相'"
-                            :formatter="formatter"
-                        />
-                        <vxe-column
-                            align="center"
-                            field="vThdB"
-                            :title="ptName == 'star' ? 'B相' : 'BC相'"
-                            :formatter="formatter"
-                        />
-                        <vxe-column
-                            align="center"
-                            field="vThdC"
-                            :title="ptName == 'star' ? 'C相' : 'CA相'"
-                            :formatter="formatter"
-                        />
-                    </vxe-colgroup>
-                    <vxe-colgroup align="center" title="电流总谐波畸变率(%)">
-                        <vxe-column align="center" field="iThdA" title="A相" :formatter="formatter" />
-                        <vxe-column align="center" field="iThdB" title="B相" :formatter="formatter" />
-                        <vxe-column align="center" field="iThdC" title="C相" :formatter="formatter" />
-                    </vxe-colgroup>
-                    <vxe-colgroup align="center" title="有功功率(kW)">
-                        <vxe-column
-                            v-if="ptName == 'star'"
-                            align="center"
-                            field="pA"
-                            title="A相"
-                            :formatter="formatter"
-                        />
-                        <vxe-column
-                            v-if="ptName == 'star'"
-                            align="center"
-                            field="pB"
-                            title="B相"
-                            :formatter="formatter"
-                        />
-                        <vxe-column
-                            v-if="ptName == 'star'"
-                            align="center"
-                            field="pC"
-                            title="C相"
-                            :formatter="formatter"
-                        />
-                        <vxe-column align="center" field="pTot" title="总" :formatter="formatter" />
-                    </vxe-colgroup>
-                </vxe-table>
-                <br />
-                <vxe-table border :data="webMsgSend" :tooltip-config="{ enterable: true }">
-                    <vxe-colgroup align="center" title="无功功率(kVar)">
-                        <vxe-column
-                            v-if="ptName == 'star'"
-                            align="center"
-                            field="qA"
-                            title="A相"
-                            :formatter="formatter"
-                        />
-                        <vxe-column
-                            v-if="ptName == 'star'"
-                            align="center"
-                            field="qB"
-                            title="B相"
-                            :formatter="formatter"
-                        />
-                        <vxe-column
-                            v-if="ptName == 'star'"
-                            align="center"
-                            field="qC"
-                            title="C相"
-                            :formatter="formatter"
-                        />
-                        <vxe-column align="center" field="qTot" title="总" :formatter="formatter" />
-                    </vxe-colgroup>
-                    <vxe-colgroup align="center" title="视在功率(kVA)">
-                        <vxe-column
-                            v-if="ptName == 'star'"
-                            align="center"
-                            field="sA"
-                            title="A相"
-                            :formatter="formatter"
-                        />
-                        <vxe-column
-                            v-if="ptName == 'star'"
-                            align="center"
-                            field="sB"
-                            title="B相"
-                            :formatter="formatter"
-                        />
-                        <vxe-column
-                            v-if="ptName == 'star'"
-                            align="center"
-                            field="sC"
-                            title="C相"
-                            :formatter="formatter"
-                        />
-                        <vxe-column align="center" field="sTot" title="总" :formatter="formatter" />
-                    </vxe-colgroup>
-                    <vxe-colgroup align="center" title="功率因数">
-                        <vxe-column align="center" field="pfA" title="A相" :formatter="formatter" />
-                        <vxe-column align="center" field="pfB" title="B相" :formatter="formatter" />
-                        <vxe-column align="center" field="pfC" title="C相" :formatter="formatter" />
-                        <vxe-column align="center" field="pfTot" title="总" :formatter="formatter" />
-                    </vxe-colgroup>
-                    <vxe-colgroup align="center" title="基波功率因数">
-                        <vxe-column align="center" field="dpfA" title="A相" :formatter="formatter" />
-                        <vxe-column align="center" field="dpfB" title="B相" :formatter="formatter" />
-                        <vxe-column align="center" field="dpfC" title="C相" :formatter="formatter" />
-                        <vxe-column align="center" field="dpfTot" title="总" :formatter="formatter" />
-                    </vxe-colgroup>
-                </vxe-table>
-            </div>
-        </div>
-        <!-- 谐波频谱 -->
-        <spectrum v-if="view == 2" ref="spectrumRef" @shutDown="view = 1" />
-        <!-- 实时趋势 -->
-        <trend v-if="view == 3" ref="trendRef" :ptName="ptName" @shutDown="view = 1" />
-    </div>
-</template>
-<script lang="ts" setup>
-import { ref, onMounted, onBeforeUnmount } from 'vue'
-import MyEchart from '@/components/echarts/MyEchart.vue'
-import socketClient from '@/utils/webSocketClient'
-import { useMonitoringPoint } from '@/stores/monitoringPoint'
-import { useDictData } from '@/stores/dictData'
-import { timeFormat } from '@/utils/common'
-import { useAdminInfo } from '@/stores/adminInfo'
-import { TrendCharts, DataLine, Download } from '@element-plus/icons-vue'
-import spectrum from './spectrum.vue'
-import trend from './trend.vue'
-import { getLineDetail } from '@/api/device-boot/communicate'
-import { mainHeight } from '@/utils/layout'
-import { ElMessage } from 'element-plus'
-// import { getRealTimeTableList } from '@/api/cs-device-boot/EquipmentDelivery'
-const height = ref(mainHeight(580))
-const monitoringPoint = useMonitoringPoint()
-const dictData = useDictData()
-const adminInfo = useAdminInfo()
-const pieChartRef: any = ref()
-const spectrumRef = ref()
-const trendRef = ref()
-const connection: any = dictData.getBasicData('Dev_Connect')
-const ptName = ref('star') //star:星型接线,Star_Triangle:星三角 ,Open_Delta:开口三角
-const view = ref(1) //1:实时数据，2:谐波频谱 3:实时趋势
-const time: any = ref('')
-const webMsgSend: any = ref([])
-const activeNames = ref(['1'])
-const pieChart1: any = ref()
-const pieChart2: any = ref()
-const pieChart3: any = ref()
-const pieChart4: any = ref()
-const pieChart5: any = ref()
-const pieChart6: any = ref()
-const echartsData: any = ref({})
-const echartsData1: any = ref({})
-//电压有效值
-const echartsDataV1: any = ref({})
-const echartsDataV2: any = ref({})
-const echartsDataV3: any = ref({})
-//电流有效值
-const echartsDataA1: any = ref({})
-const echartsDataA2: any = ref({})
-const echartsDataA3: any = ref({})
-//开始创建webSocket客户端
-const dataSocket = reactive({
-    socketServe: socketClient.Instance
-})
-const handleChange = () => {
-    height.value = mainHeight(activeNames.value.length == 0 ? 160 : 580)
-}
-const txtContent = ref('')
-//渲染中间相角图
-const initRadioCharts = () => {
-    echartsData1.value = {
-        options: {
-            grid: {
-                top: 0
-            },
-            title: {
-                text: '',
-                x: 'center'
-            },
-            tooltip: {
-                formatter: '{a} <br/>{b} {c}°'
-            },
-
-            toolbox: {
-                show: false
-            },
-            legend: {
-                show: false
-            },
-            series: [
-                // 外圈电压 内圈电流
-                {
-                    zlevel: 2,
-                    name: '基波电流相位',
-                    type: 'gauge',
-                    // 表盘最小值
-                    min: 180,
-                    // 表盘最大值
-                    max: -180,
-                    // 表盘分割数
-                    splitNumber: 6,
-                    // 圆心位置
-                    center: ['50%', '50%'],
-                    // 半径
-                    radius: '54%',
-                    // startAngle: 180,
-                    // endAngle: -179.99,
-                    startAngle: 90,
-                    endAngle: -179.99,
-                    // 指针方向
-                    clockWise: true,
-                    title: false,
-                    // 表盘外框
-                    axisLine: {
-                        show: true,
-                        lineStyle: {
-                            color: [
-                                [0.25, '#9D322D'],
-                                [0.5, '#9D322D'],
-                                [0.75, '#9D322D'],
-                                [1, '#9D322D']
-                            ],
-                            width: 2
-                        }
-                    },
-                    // 表盘细分数
-                    axisTick: {
-                        show: true,
-                        splitNumber: 5,
-                        length: 4,
-                        lineStyle: {
-                            color: '#9D322D',
-                            width: 1,
-                            type: 'solid'
-                        }
-                    },
-                    // 分割线
-                    splitLine: {
-                        show: true,
-                        length: 10,
-                        lineStyle: {
-                            color: '#9D322D',
-                            width: 2,
-                            type: 'solid'
-                        }
-                    },
-                    // 分割线标识
-                    axisLabel: {
-                        show: true,
-                        distance: 5,
-                        formatter: function (v) {
-                            switch (v + '') {
-                                case '-180':
-                                    return ''
-                                default:
-                                    return v
-                            }
-                        }
-                    },
-
-                    // 指针设置
-                    pointer: {
-                        icon: 'path://m368.01136,209.80637l173.00807,-193.72679c19.14653,-21.43943 50.16392,-21.43943 69.31045,0l172.93149,193.72679c1.22537,1.37213 1.22537,3.51607 0,4.8882l-47.63657,53.34133c-1.22538,1.37213 -3.14003,1.37213 -4.36541,0l-113.65381,-127.26452c-1.91465,-2.14395 -5.20785,-0.60031 -5.20785,2.40122l0,731.94254c0,1.88667 -1.37855,3.43031 -3.06345,3.43031l-67.39579,0c-1.6849,0 -3.06345,-1.54364 -3.06345,-3.43031l0,-731.94254c0,-3.08728 -3.2932,-4.54517 -5.20785,-2.40122l-113.65381,127.26452c-1.22538,1.37213 -3.14003,1.37213 -4.36541,0l-47.63657,-53.34133c-1.22537,-1.37213 -1.22537,-3.51607 0,-4.88819l0,-0.00001M539,861.23064h73v800h-73z',
-                        length: '90%',
-                        width: 15,
-                        opacity: 1
-                    },
-                    detail: {
-                        show: false
-                    },
-                    //数值位置
-
-                    data: [
-                        {
-                            value: 0,
-                            name: 'A相',
-                            itemStyle: {
-                                color: '#DAA520'
-                            }
-                        },
-                        {
-                            value: 0,
-                            name: 'B相',
-                            itemStyle: {
-                                color: '#2E8B57'
-                            }
-                        },
-                        {
-                            value: 0,
-                            name: 'C相',
-                            itemStyle: {
-                                color: '#A52a2a'
-                            }
-                        }
-                    ]
-                },
-                {
-                    zlevel: 1,
-                    name: '基波电压相位',
-                    type: 'gauge',
-                    // 表盘最小值
-                    min: 180,
-                    // 表盘最大值
-                    max: -180,
-                    // 表盘分割数
-                    splitNumber: 6,
-                    // 圆心位置
-                    center: ['50%', '50%'],
-                    // 半径
-                    radius: '84%',
-                    // startAngle: 180,
-                    // endAngle: -179.99,
-                    startAngle: 90,
-                    endAngle: -179.99,
-                    // 指针方向
-                    clockWise: true,
-                    title: false,
-                    // 表盘外框
-                    axisLine: {
-                        show: true,
-                        lineStyle: {
-                            color: [
-                                [0.25, '#9D322D'],
-                                [0.5, '#9D322D'],
-                                [0.75, '#9D322D'],
-                                [1, '#9D322D']
-                            ],
-                            width: 1.5
-                        }
-                    },
-                    // 表盘细分数
-                    axisTick: {
-                        show: true,
-                        splitNumber: 5,
-                        length: 6,
-                        lineStyle: {
-                            color: '#9D322D',
-                            width: 1,
-                            type: 'solid'
-                        }
-                    },
-                    // 分割线
-                    splitLine: {
-                        show: true,
-                        length: 10,
-                        lineStyle: {
-                            color: '#9D322D',
-                            width: 2,
-                            type: 'solid'
-                        }
-                    },
-                    // 分割线标识
-                    axisLabel: {
-                        show: true,
-                        distance: 5,
-                        formatter: function (v) {
-                            switch (v + '') {
-                                case '-180':
-                                    return ''
-                                default:
-                                    return v
-                            }
-                        }
-                    },
-
-                    // 指针设置
-                    pointer: {
-                        icon: 'path://m368.01136,209.80637l173.00807,-193.72679c19.14653,-21.43943 50.16392,-21.43943 69.31045,0l172.93149,193.72679c1.22537,1.37213 1.22537,3.51607 0,4.8882l-47.63657,53.34133c-1.22538,1.37213 -3.14003,1.37213 -4.36541,0l-113.65381,-127.26452c-1.91465,-2.14395 -5.20785,-0.60031 -5.20785,2.40122l0,731.94254c0,1.88667 -1.37855,3.43031 -3.06345,3.43031l-67.39579,0c-1.6849,0 -3.06345,-1.54364 -3.06345,-3.43031l0,-731.94254c0,-3.08728 -3.2932,-4.54517 -5.20785,-2.40122l-113.65381,127.26452c-1.22538,1.37213 -3.14003,1.37213 -4.36541,0l-47.63657,-53.34133c-1.22537,-1.37213 -1.22537,-3.51607 0,-4.88819l0,-0.00001M539,861.23064h73v800h-73z',
-                        length: '90%',
-                        width: 15,
-                        opacity: 1
-                    },
-                    detail: {
-                        show: false
-                    },
-                    data: [
-                        {
-                            value: 0,
-                            name: ptName.value == 'star' ? 'A相' : 'AB相', //'A相',
-                            itemStyle: {
-                                color: '#DAA520'
-                            }
-                        },
-                        {
-                            value: 0,
-                            name: ptName.value == 'star' ? 'B相' : 'BC相', //'B相',
-                            itemStyle: {
-                                color: '#2E8B57'
-                            }
-                        },
-                        {
-                            value: 0,
-                            name: ptName.value == 'star' ? 'C相' : 'CA相', //'C相',
-                            itemStyle: {
-                                color: '#A52a2a'
-                            }
-                        }
-                    ]
-                }
-            ]
-        }
-    }
-    //电流相角
-    echartsData1.value.options.series[0].data.map((item: any) => {
-        iRadioList.value.map((vv: any) => {
-            if (item.name.includes(vv.phase)) {
-                item.value = vv.statisticalData
-            }
-        })
-    })
-    //电压相角
-    echartsData1.value.options.series[1].data.map((item: any) => {
-        vRadioList.value.map((vv: any) => {
-            if (item.name.includes(vv.phase)) {
-                item.value = vv.statisticalData
-            }
-        })
-    })
-
-    //新的实时数据
-    // 电流相角
-    echartsData1.value.options.series[0].data[0].value = Math.floor(webMsgSend.value[0]?.i1AngA * 100) / 100 || 0
-    echartsData1.value.options.series[0].data[1].value = Math.floor(webMsgSend.value[0]?.i1AngB * 100) / 100 || 0
-    echartsData1.value.options.series[0].data[2].value = Math.floor(webMsgSend.value[0]?.i1AngC * 100) / 100 || 0
-    // 电压相角
-    echartsData1.value.options.series[1].data[0].value = Math.floor(webMsgSend.value[0]?.v1AngA * 100) / 100 || 0
-    echartsData1.value.options.series[1].data[1].value = Math.floor(webMsgSend.value[0]?.v1AngB * 100) / 100 || 0
-    echartsData1.value.options.series[1].data[2].value = Math.floor(webMsgSend.value[0]?.v1AngC * 100) / 100 || 0
-
-    for (var i = 0; i < echartsData1.value.options.series.length; i++) {
-        echartsData1.value.options.series[i].type = 'gauge'
-        echartsData1.value.options.series[i].startAngle = 180
-        echartsData1.value.options.series[i].endAngle = -360
-        echartsData1.value.options.series[i].center = ['50%', '50%']
-    }
-}
-const initEcharts = (color: string, key: number) => {
-    return {
-        options: {
-            tooltip: {},
-            toolbox: {
-                show: false
-            },
-            series: [
-                {
-                    type: 'gauge',
-                    startAngle: key == 0 ? 180 : 90,
-                    endAngle: key == 0 ? 90 : 0,
-                    min: 0,
-                    max: key == 0 ? 12 : 400,
-                    radius: '180%',
-                    center: key == 0 ? ['70%', '95%'] : ['30%', '95%'],
-                    splitNumber: 2, //刻度数量
-                    axisLine: {
-                        show: true,
-                        lineStyle: {
-                            width: 5,
-                            color: [
-                                [0.3, color],
-                                [0.7, color],
-                                [1, color]
-                            ]
-                        }
-                    },
-                    color: color,
-                    // 表盘细分数
-                    axisTick: {
-                        show: true,
-                        distance: -5,
-                        length: 12,
-                        lineStyle: {
-                            color: color,
-                            width: 2,
-                            type: 'solid'
-                        }
-                    },
-                    axisLabel: {
-                        textStyle: {
-                            color: color,
-                            fontSize: '12'
-                        }
-                    },
-                    splitLine: {
-                        show: true,
-                        distance: -5,
-                        length: 20,
-                        lineStyle: {
-                            color: color,
-                            width: 3,
-                            type: 'solid'
-                        }
-                    },
-                    //标题位置
-                    title: {
-                        fontWeight: 'bolder',
-                        fontSize: 12,
-                        offsetCenter: key == 0 ? ['-130%', '-20%'] : ['130%', '-20%']
-                    },
-                    //数值位置
-                    detail: {
-                        fontSize: 14,
-                        valueAnimation: true,
-                        formatter: '{value}',
-                        offsetCenter: key == 0 ? ['30%', '-35%'] : ['-35%', '-35%'],
-                        color: color
-                    },
-
-                    // 指针设置
-                    pointer: {
-                        length: '80%',
-                        width: 3
-                    },
-                    data: [
-                        {
-                            value: 0,
-                            name: 'A相',
-                            itemStyle: {
-                                color: color
-                            }
-                        }
-                    ]
-                }
-            ]
-        }
-    }
-}
-//渲染echarts
-const init = () => {
-    echartsDataV1.value = initEcharts('#DAA520', 0)
-    echartsDataV2.value = initEcharts('#2E8B57', 0)
-    echartsDataV3.value = initEcharts('#A52a2a', 0)
-
-    echartsDataA1.value = initEcharts('#DAA520', 1)
-    echartsDataA2.value = initEcharts('#2E8B57', 1)
-    echartsDataA3.value = initEcharts('#A52a2a', 1)
-
-    if (!dataSocket.socketServe) {
-        console.error('WebSocket 客户端实例不存在')
-        return
-    }
-    if (monitoringPoint.state.comFlag == 0) {
-        return ElMessage({
-            message: '所选监测点离线!',
-            type: 'warning'
-        })
-    }
-    let pids = monitoringPoint.state.pid.split(',')
-    dataSocket.socketServe.connect(`${adminInfo.id},${monitoringPoint.state.lineId},${pids[pids.length - 2]}`)
-    dataSocket.socketServe.registerCallBack('message', (res: any) => {
-        txtContent.value = res.value
-        let data = JSON.parse(res.value)
-        time.value = data.TIME - 0
-        webMsgSend.value = [
-            {
-                vRmsA: ptName.value == 'star' ? data.V.A.VRMS : data.V.A.VRMS_LVR, //A相电压
-                vRmsB: ptName.value == 'star' ? data.V.B.VRMS : data.V.B.VRMS_LVR, //B相电压
-                vRmsC: ptName.value == 'star' ? data.V.C.VRMS : data.V.C.VRMS_LVR, //C相电压
-                iRmsA: data.I.A?.IRMS, //A相电流
-                iRmsB: data.I.B?.IRMS, //B相电流
-                iRmsC: data.I.C?.IRMS, //C相电流
-                v1AngA: data.V.A?.VFUND_ANGLE, //A相基波电压相位
-                v1AngB: data.V.B?.VFUND_ANGLE, //B相基波电压相位
-                v1AngC: data.V.C?.VFUND_ANGLE, //C相基波电压相位
-                i1AngA: data.I.A?.I_ANGLE, //A相基波电流相位
-                i1AngB: data.I.B?.I_ANGLE, //B相基波电流相位
-                i1AngC: data.I.C?.I_ANGLE, //C相基波电流相位
-                freq: data.V.T?.FREQ, //频率
-                freqDev: data.V.T?.DELTA_FREQ, //频率偏差
-                vUnbalance: data.V.T?.V_UNBAN, //电压不平衡度
-                iUnbalance: data.I.T?.I_UNBAN, //电流不平衡度
-                v1A: data.V.A?.V1, //A相基波电压幅值
-                v1B: data.V.B?.V1, //A相基波电压幅值
-                v1C: data.V.C?.V1, //A相基波电压幅值
-                i1A: data.I.A?.I1, //A相基波电流相位
-                i1B: data.I.B?.I1, //A相基波电流相位
-                i1C: data.I.C?.I1, //A相基波电流相位
-                vDevA: data.V.A?.DELTA_V, //A相电压偏差
-                vDevB: data.V.B?.DELTA_V, //B相电压偏差
-                vDevC: data.V.C?.DELTA_V, //C相电压偏差
-                vThdA: data.V.A?.VTHD, //A相电压总谐波畸变率
-                vThdB: data.V.B?.VTHD, //B相电压总谐波畸变率
-                vThdC: data.V.C?.VTHD, //C相电压总谐波畸变率
-                iThdA: data.I.A?.ITHD, //A相电流总谐波畸变率
-                iThdB: data.I.B?.ITHD, //B相电流总谐波畸变率
-                iThdC: data.I.C?.ITHD, //C相电流总谐波畸变率
-                pA: data.PQ.A?.P, //A相有功功率
-                pB: data.PQ.B?.P, //B相有功功率
-                pC: data.PQ.C?.P, //C相有功功率
-                pTot: data.PQ.T?.P, //总有功功率
-                qA: data.PQ.A?.Q, //A相无功功率
-                qB: data.PQ.B?.Q, //B相无功功率
-                qC: data.PQ.C?.Q, //C相无功功率
-                qTot: data.PQ.T?.Q, //总无功功率
-                sA: data.PQ.A?.S, //A相视在功率
-                sB: data.PQ.B?.S, //B相视在功率
-                sC: data.PQ.C?.S, //C相视在功率
-                sTot: data.PQ.T?.S, //总视在功率
-                pfA: data.PQ.A?.PF, //A相功率因数
-                pfB: data.PQ.B?.PF, //B相功率因数
-                pfC: data.PQ.C?.PF, //C相功率因数
-                pfTot: data.PQ.T?.PF, //总功率因数
-                dpfA: data.PQ.A?.DF, //A相基波功率因数
-                dpfB: data.PQ.B?.DF, //B相基波功率因数
-                dpfC: data.PQ.C?.DF, //C相基波功率因数
-                dpfTot: data.PQ.T?.DF //总基波功率因数
-            }
-        ]
-        spectrumRef.value?.init(data)
-        trendRef.value?.init(data)
-
-        // console.log('🚀 ~ dataSocket.socketServe.registerCallBack ~ webMsgSend.value:', data)
-        setRealData()
-    })
-}
-// 下载txt
-const downloadTxt = () => {
-    const content = txtContent.value // 文件内容
-    const blob = new Blob([content], { type: 'text/plain' }) // 创建 Blob 对象
-    const url = URL.createObjectURL(blob) // 生成下载链接
-
-    // 创建 <a> 标签并触发下载
-    const link = document.createElement('a')
-    link.href = url
-    link.download = '实时数据.txt' // 文件名
-    link.click()
-
-    // 释放 URL 对象
-    URL.revokeObjectURL(url)
-}
-//接收父组件传递的table数据
-
-const loading = ref(false)
-
-const formatter = (row: any) => {
-    return row.cellValue == undefined ? '/' : Math.floor(row.cellValue * 100) / 100
-}
-//电流相角数组&电压相角数组
-const iRadioList: any = ref([])
-const vRadioList: any = ref([])
-
-const setRealData = () => {
-    initRadioCharts()
-    //新的
-    // echartsDataV1.value.options.series[0].max =
-    //     webMsgSend.value[0].vRmsA == 0 ? 1 : Math.ceil(webMsgSend.value[0].vRmsA)
-    // echartsDataV2.value.options.series[0].max =
-    //     webMsgSend.value[0].vRmsB == 0 ? 1 : Math.ceil(webMsgSend.value[0].vRmsB)
-    // echartsDataV3.value.options.series[0].max =
-    //     webMsgSend.value[0].vRmsC == 0 ? 1 : Math.ceil(webMsgSend.value[0].vRmsC)
-    echartsDataV1.value.options.series[0].data = [
-        {
-            name: ptName.value == 'star' ? 'A相' : 'AB相', //A相
-            value: Math.floor(webMsgSend.value[0].vRmsA * 100) / 100 || 0
-        }
-    ]
-    pieChart1.value.initChart()
-    echartsDataV2.value.options.series[0].data = [
-        {
-            name: ptName.value == 'star' ? 'B相' : 'BC相', // 'B相',
-            value: Math.floor(webMsgSend.value[0].vRmsB * 100) / 100 || 0
-        }
-    ]
-    pieChart2.value.initChart()
-    echartsDataV3.value.options.series[0].data = [
-        {
-            name: ptName.value == 'star' ? 'C相' : 'CA相', //'C相',
-            value: Math.floor(webMsgSend.value[0].vRmsC * 100) / 100 || 0
-        }
-    ]
-    pieChart3.value.initChart()
-    //新的电流有效值
-    // echartsDataA1.value.options.series[0].max =
-    //     webMsgSend.value[0].iRmsA == 0 ? 1 : Math.ceil(webMsgSend.value[0].iRmsA)
-    // echartsDataA2.value.options.series[0].max =
-    //     webMsgSend.value[0].iRmsB == 0 ? 1 : Math.ceil(webMsgSend.value[0].iRmsB)
-    // echartsDataA3.value.options.series[0].max =
-    //     webMsgSend.value[0].iRmsC == 0 ? 1 : Math.ceil(webMsgSend.value[0].iRmsC)
-    echartsDataA1.value.options.series[0].data = [
-        {
-            name: 'A相',
-            value: Math.floor(webMsgSend.value[0].iRmsA * 100) / 100 || 0
-        }
-    ]
-    pieChart4.value.initChart()
-    echartsDataA2.value.options.series[0].data = [
-        {
-            name: 'B相',
-            value: Math.floor(webMsgSend.value[0].iRmsB * 100) / 100 || 0
-        }
-    ]
-    pieChart5.value.initChart()
-    echartsDataA3.value.options.series[0].data = [
-        {
-            name: 'C相',
-            value: Math.floor(webMsgSend.value[0].iRmsC * 100) / 100 || 0
-        }
-    ]
-    pieChart6.value.initChart()
-}
-defineExpose({ setRealData })
-onMounted(() => {
-    init()
-    initRadioCharts()
-    getLineDetail({ id: monitoringPoint.state.lineId }).then(res => {
-        ptName.value = connection.filter(item => item.value == res.data.ptType)[0].code || ''
-    })
-})
-onBeforeUnmount(() => {
-    dataSocket.socketServe?.closeWs()
-})
-</script>
-<style lang="scss" scoped>
-.view {
-    width: 100%;
-    height: 100%;
-    box-sizing: border-box;
-    display: flex;
-    flex-direction: column;
-    position: relative;
-    .view_title {
-        position: absolute;
-        left: 50%;
-        top: 15px;
-        transform: translateX(-50%);
-    }
-    .view_btn {
-        position: absolute;
-        right: 50px;
-        top: 10px;
-    }
-    .view_top {
-        width: 100%;
-        height: 400px !important;
-        display: flex;
-        justify-content: space-between;
-        //border: 1px solid #eee;
-        // padding: 10px;
-        margin-top: 10px;
-
-        .view_top_left,
-        .view_top_right {
-            // width: 300px;
-            flex: 1;
-            height: 100%;
-            // padding: 10px;
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            border: 1px solid #eee;
-
-            .left_charts,
-            .right_charts {
-                flex: none;
-                width: 100%;
-                height: 115px;
-                // margin-bottom: 16px;
-                // padding: 10px;
-                margin-bottom: 8px;
-            }
-        }
-
-        .view_top_mid {
-            // flex: 1;
-            width: 40%;
-            border: 1px solid #eee;
-            margin: 0 10px;
-            // padding: 10px;
-            position: relative;
-
-            .mid_charts {
-                width: 100%;
-                height: 370px;
-                position: relative;
-                // top: 20%;
-                // bottom: 10px;
-                .mid_charts_text {
-                    position: absolute;
-                    bottom: 10px;
-                    right: 10px;
-                    font-size: 12px;
-                    font-weight: 600;
-                    line-height: 16px;
-                    span {
-                        font-size: 14px;
-                        font-weight: 600;
-                    }
-                }
-            }
-        }
-
-        .left_charts_title,
-        .mid_charts_title,
-        .right_charts_title {
-            width: 100%;
-            height: 20px;
-            text-align: left;
-            font-weight: 800;
-            font-weight: 16px;
-            line-height: 20px;
-            margin: 10px 0 0 10px;
-            padding-left: 5px;
-            box-sizing: border-box;
-        }
-    }
-
-    .view_bot {
-        // min-height: 300px;
-        margin: 10px 0 0 0;
-        overflow: auto !important;
-        flex: 1 !important;
-        // padding-bottom: 200px !important;
-        box-sizing: border-box !important;
-
-        .view_bot_tables {
-            margin-bottom: 10px;
-            height: auto;
-            min-height: 120px;
-        }
-    }
-}
-
-.view::-webkit-scrollbar {
-    display: none;
-}
-
-.table_container {
-    width: 100%;
-    height: auto;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    .table {
-        flex: 1;
-
-        .table_info {
-            width: 100%;
-            height: 120px;
-            // border: 1px solid #eee;
-            border-bottom: 2px solid #eee;
-            margin-bottom: 20px;
-            display: flex;
-            flex-direction: column;
-        }
-
-        .thead {
-            width: 100%;
-            height: auto;
-            background: #f4f6f9;
-            text-align: center;
-            display: flex;
-            flex-direction: column;
-
-            .thead_top {
-                width: 100%;
-                height: 40px;
-                line-height: 40px;
-                border: 1px solid #eee;
-                color: #111;
-                font-size: 14px;
-                font-weight: 800;
-            }
-
-            .thead_bot {
-                width: 100%;
-                height: 40px;
-                line-height: 40px;
-                display: flex;
-                color: #111;
-                font-size: 14px;
-                font-weight: 800;
-
-                .thead_bot_cell {
-                    flex: 1;
-                    border: 1px solid #eee;
-                }
-            }
-        }
-
-        .tbody {
-            flex: 1;
-            display: flex;
-            text-align: center;
-
-            .tbody_cell {
-                flex: 1;
-                text-align: center;
-                line-height: 40px;
-                border: 1px solid #eee;
-                border-bottom: 0;
-            }
-        }
-
-        .tbody:hover {
-            background: #f4f6f9;
-        }
-    }
-}
-
-.table_container:hover {
-    .table {
-        .tbody {
-            background: #f4f6f9;
-        }
-    }
-}
-
-:deep(.view_bot) {
-    .vxe-table--render-default .vxe-body--column:not(.col--ellipsis),
-    .vxe-table--render-default .vxe-footer--column:not(.col--ellipsis),
-    .vxe-table--render-default .vxe-header--column:not(.col--ellipsis) {
-        padding: 5px !important;
-    }
-
-    .vxe-table--body-wrapper {
-        min-height: 32px !important;
-    }
-}
-
-::v-deep .el-collapse-item__header {
-    font-size: 16px !important;
-    font-weight: 800 !important;
-}
-::v-deep .el-collapse-item__content {
-    padding-bottom: 10px;
-}
-</style>
+<template>
+    <div class="view" v-loading="loading">
+        <h3 class="view_title">最新时刻:{{ timeFormat(time) }}</h3>
+        <div v-show="view == 1">
+            <div class="view_btn" v-if="time">
+                <el-button type="primary" :icon="DataLine" @click="view = 2">谐波频谱</el-button>
+                <el-button type="primary" :icon="TrendCharts" @click="view = 3">实时趋势</el-button>
+                <el-button type="primary" :icon="Download" @click="downloadTxt">下载数据</el-button>
+            </div>
+            <el-collapse v-model.trim="activeNames" @change="handleChange">
+                <el-collapse-item title="基础数据" name="1">
+                    <div class="view_top">
+                        <!-- 左侧仪表盘 -->
+                        <div class="view_top_left">
+                            <div class="left_charts_title">电压有效值(kV)</div>
+                            <div class="left_charts">
+                                <MyEchart :pieInterVal="true" ref="pieChart1" :options="echartsDataV1"></MyEchart>
+                            </div>
+                            <div class="left_charts">
+                                <MyEchart :pieInterVal="true" ref="pieChart2" :options="echartsDataV2"></MyEchart>
+                            </div>
+                            <div class="left_charts">
+                                <MyEchart :pieInterVal="true" ref="pieChart3" :options="echartsDataV3"></MyEchart>
+                            </div>
+                        </div>
+                        <div class="view_top_mid">
+                            <div class="mid_charts_title">基波电压/电流幅值(相位)</div>
+                            <div class="mid_charts">
+                                <MyEchart :pieInterVal="true" :options="echartsData1"></MyEchart>
+                                <div class="mid_charts_text">
+                                    <div>电压</div>
+                                    <div>
+                                        A相:
+                                        <span style="color: #daa520">
+                                            {{ echartsData1?.options?.series[1].data[0].value }}
+                                        </span>
+                                    </div>
+                                    <div>
+                                        B相:
+                                        <span style="color: #2e8b57">
+                                            {{ echartsData1?.options?.series[1].data[1].value }}
+                                        </span>
+                                    </div>
+                                    <div>
+                                        C相:
+                                        <span style="color: #a52a2a">
+                                            {{ echartsData1?.options?.series[1].data[2].value }}
+                                        </span>
+                                    </div>
+                                    <div style="margin-top: 10px">电流</div>
+                                    <div>
+                                        A相:
+                                        <span style="color: #daa520">
+                                            {{ echartsData1?.options?.series[0].data[0].value }}
+                                        </span>
+                                    </div>
+                                    <div>
+                                        B相:
+                                        <span style="color: #2e8b57">
+                                            {{ echartsData1?.options?.series[0].data[1].value }}
+                                        </span>
+                                    </div>
+                                    <div>
+                                        C相:
+                                        <span style="color: #a52a2a">
+                                            {{ echartsData1?.options?.series[0].data[2].value }}
+                                        </span>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        <!-- 右侧仪表盘 -->
+                        <div class="view_top_right">
+                            <div class="right_charts_title">电流有效值(A)</div>
+                            <div class="right_charts">
+                                <MyEchart :pieInterVal="true" ref="pieChart4" :options="echartsDataA1"></MyEchart>
+                            </div>
+                            <div class="right_charts">
+                                <MyEchart :pieInterVal="true" ref="pieChart5" :options="echartsDataA2"></MyEchart>
+                            </div>
+                            <div class="right_charts">
+                                <MyEchart :pieInterVal="true" ref="pieChart6" :options="echartsDataA3"></MyEchart>
+                            </div>
+                        </div>
+                    </div>
+                </el-collapse-item>
+            </el-collapse>
+
+            <div class="view_bot" :style="height">
+                <vxe-table border :data="webMsgSend" :tooltip-config="{ enterable: true }">
+                    <vxe-colgroup align="center" title="电压有效值(kV)">
+                        <vxe-column
+                            align="center"
+                            field="vRmsA"
+                            :title="ptName == 'star' ? 'A相' : 'AB相'"
+                            :formatter="formatter"
+                        />
+                        <vxe-column
+                            align="center"
+                            field="vRmsB"
+                            :title="ptName == 'star' ? 'B相' : 'BC相'"
+                            :formatter="formatter"
+                        />
+                        <vxe-column
+                            align="center"
+                            field="vRmsC"
+                            :title="ptName == 'star' ? 'C相' : 'CA相'"
+                            :formatter="formatter"
+                        />
+                    </vxe-colgroup>
+                    <vxe-colgroup align="center" title="电流有效值(A)">
+                        <vxe-column align="center" field="iRmsA" title="A相" :formatter="formatter" />
+                        <vxe-column align="center" field="iRmsB" title="B相" :formatter="formatter" />
+                        <vxe-column align="center" field="iRmsC" title="C相" :formatter="formatter" />
+                    </vxe-colgroup>
+                    <vxe-colgroup align="center" title="基波电压相位(°)">
+                        <vxe-column
+                            align="center"
+                            field="v1AngA"
+                            :title="ptName == 'star' ? 'A相' : 'AB相'"
+                            :formatter="formatter"
+                        />
+                        <vxe-column
+                            align="center"
+                            field="v1AngB"
+                            :title="ptName == 'star' ? 'B相' : 'BC相'"
+                            :formatter="formatter"
+                        />
+                        <vxe-column
+                            align="center"
+                            field="v1AngC"
+                            :title="ptName == 'star' ? 'C相' : 'CA相'"
+                            :formatter="formatter"
+                        />
+                    </vxe-colgroup>
+                    <vxe-colgroup align="center" title="基波电流相位(°)">
+                        <vxe-column align="center" field="i1AngA" title="A相" :formatter="formatter" />
+                        <vxe-column align="center" field="i1AngB" title="B相" :formatter="formatter" />
+                        <vxe-column align="center" field="i1AngC" title="C相" :formatter="formatter" />
+                    </vxe-colgroup>
+                </vxe-table>
+                <br />
+                <vxe-table border :data="webMsgSend" :tooltip-config="{ enterable: true }">
+                    <vxe-column align="center" field="freq" width="140" title="频率(Hz)" :formatter="formatter" />
+                    <vxe-column
+                        align="center"
+                        field="freqDev"
+                        width="120"
+                        title="频率偏差(Hz)"
+                        :formatter="formatter"
+                    />
+                    <vxe-column
+                        align="center"
+                        width="180"
+                        field="vUnbalance"
+                        title="电压不平衡度(%)"
+                        :formatter="formatter"
+                    />
+                    <vxe-column
+                        align="center"
+                        width="180"
+                        field="iUnbalance"
+                        title="电流不平衡度(%)"
+                        :formatter="formatter"
+                    />
+                    <vxe-colgroup align="center" title="基波电压幅值(kV)">
+                        <vxe-column
+                            align="center"
+                            field="v1A"
+                            :title="ptName == 'star' ? 'A相' : 'AB相'"
+                            :formatter="formatter"
+                        />
+                        <vxe-column
+                            align="center"
+                            field="v1B"
+                            :title="ptName == 'star' ? 'B相' : 'BC相'"
+                            :formatter="formatter"
+                        />
+                        <vxe-column
+                            align="center"
+                            field="v1C"
+                            :title="ptName == 'star' ? 'C相' : 'CA相'"
+                            :formatter="formatter"
+                        />
+                    </vxe-colgroup>
+                    <vxe-colgroup align="center" title="基波电流幅值(A)">
+                        <vxe-column align="center" field="i1A" title="A相" :formatter="formatter" />
+                        <vxe-column align="center" field="i1B" title="B相" :formatter="formatter" />
+                        <vxe-column align="center" field="i1C" title="C相" :formatter="formatter" />
+                    </vxe-colgroup>
+                </vxe-table>
+                <br />
+                <vxe-table border :data="webMsgSend" :tooltip-config="{ enterable: true }">
+                    <vxe-colgroup align="center" title="电压偏差(%)">
+                        <vxe-column
+                            align="center"
+                            field="vDevA"
+                            :title="ptName == 'star' ? 'A相' : 'AB相'"
+                            :formatter="formatter"
+                        />
+                        <vxe-column
+                            align="center"
+                            field="vDevB"
+                            :title="ptName == 'star' ? 'B相' : 'BC相'"
+                            :formatter="formatter"
+                        />
+                        <vxe-column
+                            align="center"
+                            field="vDevC"
+                            :title="ptName == 'star' ? 'C相' : 'CA相'"
+                            :formatter="formatter"
+                        />
+                    </vxe-colgroup>
+                    <vxe-colgroup align="center" title="电压总谐波畸变率(%)">
+                        <vxe-column
+                            align="center"
+                            field="vThdA"
+                            :title="ptName == 'star' ? 'A相' : 'AB相'"
+                            :formatter="formatter"
+                        />
+                        <vxe-column
+                            align="center"
+                            field="vThdB"
+                            :title="ptName == 'star' ? 'B相' : 'BC相'"
+                            :formatter="formatter"
+                        />
+                        <vxe-column
+                            align="center"
+                            field="vThdC"
+                            :title="ptName == 'star' ? 'C相' : 'CA相'"
+                            :formatter="formatter"
+                        />
+                    </vxe-colgroup>
+                    <vxe-colgroup align="center" title="电流总谐波畸变率(%)">
+                        <vxe-column align="center" field="iThdA" title="A相" :formatter="formatter" />
+                        <vxe-column align="center" field="iThdB" title="B相" :formatter="formatter" />
+                        <vxe-column align="center" field="iThdC" title="C相" :formatter="formatter" />
+                    </vxe-colgroup>
+                    <vxe-colgroup align="center" title="有功功率(kW)">
+                        <vxe-column
+                            v-if="ptName == 'star'"
+                            align="center"
+                            field="pA"
+                            title="A相"
+                            :formatter="formatter"
+                        />
+                        <vxe-column
+                            v-if="ptName == 'star'"
+                            align="center"
+                            field="pB"
+                            title="B相"
+                            :formatter="formatter"
+                        />
+                        <vxe-column
+                            v-if="ptName == 'star'"
+                            align="center"
+                            field="pC"
+                            title="C相"
+                            :formatter="formatter"
+                        />
+                        <vxe-column align="center" field="pTot" title="总" :formatter="formatter" />
+                    </vxe-colgroup>
+                </vxe-table>
+                <br />
+                <vxe-table border :data="webMsgSend" :tooltip-config="{ enterable: true }">
+                    <vxe-colgroup align="center" title="无功功率(kVar)">
+                        <vxe-column
+                            v-if="ptName == 'star'"
+                            align="center"
+                            field="qA"
+                            title="A相"
+                            :formatter="formatter"
+                        />
+                        <vxe-column
+                            v-if="ptName == 'star'"
+                            align="center"
+                            field="qB"
+                            title="B相"
+                            :formatter="formatter"
+                        />
+                        <vxe-column
+                            v-if="ptName == 'star'"
+                            align="center"
+                            field="qC"
+                            title="C相"
+                            :formatter="formatter"
+                        />
+                        <vxe-column align="center" field="qTot" title="总" :formatter="formatter" />
+                    </vxe-colgroup>
+                    <vxe-colgroup align="center" title="视在功率(kVA)">
+                        <vxe-column
+                            v-if="ptName == 'star'"
+                            align="center"
+                            field="sA"
+                            title="A相"
+                            :formatter="formatter"
+                        />
+                        <vxe-column
+                            v-if="ptName == 'star'"
+                            align="center"
+                            field="sB"
+                            title="B相"
+                            :formatter="formatter"
+                        />
+                        <vxe-column
+                            v-if="ptName == 'star'"
+                            align="center"
+                            field="sC"
+                            title="C相"
+                            :formatter="formatter"
+                        />
+                        <vxe-column align="center" field="sTot" title="总" :formatter="formatter" />
+                    </vxe-colgroup>
+                    <vxe-colgroup align="center" title="功率因数">
+                        <vxe-column align="center" field="pfA" title="A相" :formatter="formatter" />
+                        <vxe-column align="center" field="pfB" title="B相" :formatter="formatter" />
+                        <vxe-column align="center" field="pfC" title="C相" :formatter="formatter" />
+                        <vxe-column align="center" field="pfTot" title="总" :formatter="formatter" />
+                    </vxe-colgroup>
+                    <vxe-colgroup align="center" title="基波功率因数">
+                        <vxe-column align="center" field="dpfA" title="A相" :formatter="formatter" />
+                        <vxe-column align="center" field="dpfB" title="B相" :formatter="formatter" />
+                        <vxe-column align="center" field="dpfC" title="C相" :formatter="formatter" />
+                        <vxe-column align="center" field="dpfTot" title="总" :formatter="formatter" />
+                    </vxe-colgroup>
+                </vxe-table>
+            </div>
+        </div>
+        <!-- 谐波频谱 -->
+        <spectrum v-if="view == 2" ref="spectrumRef" @shutDown="view = 1" />
+        <!-- 实时趋势 -->
+        <trend v-if="view == 3" ref="trendRef" :ptName="ptName" @shutDown="view = 1" />
+    </div>
+</template>
+<script lang="ts" setup>
+import { ref, onMounted, onBeforeUnmount } from 'vue'
+import MyEchart from '@/components/echarts/MyEchart.vue'
+import socketClient from '@/utils/webSocketClient'
+import { useMonitoringPoint } from '@/stores/monitoringPoint'
+import { useDictData } from '@/stores/dictData'
+import { timeFormat } from '@/utils/common'
+import { useAdminInfo } from '@/stores/adminInfo'
+import { TrendCharts, DataLine, Download } from '@element-plus/icons-vue'
+import spectrum from './spectrum.vue'
+import trend from './trend.vue'
+import { getLineDetail } from '@/api/device-boot/communicate'
+import { mainHeight } from '@/utils/layout'
+import { ElMessage } from 'element-plus'
+// import { getRealTimeTableList } from '@/api/cs-device-boot/EquipmentDelivery'
+const height = ref(mainHeight(580))
+const monitoringPoint = useMonitoringPoint()
+const dictData = useDictData()
+const adminInfo = useAdminInfo()
+const pieChartRef: any = ref()
+const spectrumRef = ref()
+const trendRef = ref()
+const connection: any = dictData.getBasicData('Dev_Connect')
+const ptName = ref('star') //star:星型接线,Star_Triangle:星三角 ,Open_Delta:开口三角
+const view = ref(1) //1:实时数据，2:谐波频谱 3:实时趋势
+const time: any = ref('')
+const webMsgSend: any = ref([])
+const activeNames = ref(['1'])
+const pieChart1: any = ref()
+const pieChart2: any = ref()
+const pieChart3: any = ref()
+const pieChart4: any = ref()
+const pieChart5: any = ref()
+const pieChart6: any = ref()
+const echartsData: any = ref({})
+const echartsData1: any = ref({})
+//电压有效值
+const echartsDataV1: any = ref({})
+const echartsDataV2: any = ref({})
+const echartsDataV3: any = ref({})
+//电流有效值
+const echartsDataA1: any = ref({})
+const echartsDataA2: any = ref({})
+const echartsDataA3: any = ref({})
+//开始创建webSocket客户端
+const dataSocket = reactive({
+    socketServe: socketClient.Instance
+})
+const handleChange = () => {
+    height.value = mainHeight(activeNames.value.length == 0 ? 160 : 580)
+}
+const txtContent = ref('')
+//渲染中间相角图
+const initRadioCharts = () => {
+    echartsData1.value = {
+        options: {
+            grid: {
+                top: 0
+            },
+            title: {
+                text: '',
+                x: 'center'
+            },
+            tooltip: {
+                formatter: '{a} <br/>{b} {c}°'
+            },
+
+            toolbox: {
+                show: false
+            },
+            legend: {
+                show: false
+            },
+            series: [
+                // 外圈电压 内圈电流
+                {
+                    zlevel: 2,
+                    name: '基波电流相位',
+                    type: 'gauge',
+                    // 表盘最小值
+                    min: 180,
+                    // 表盘最大值
+                    max: -180,
+                    // 表盘分割数
+                    splitNumber: 6,
+                    // 圆心位置
+                    center: ['50%', '50%'],
+                    // 半径
+                    radius: '54%',
+                    // startAngle: 180,
+                    // endAngle: -179.99,
+                    startAngle: 90,
+                    endAngle: -179.99,
+                    // 指针方向
+                    clockWise: true,
+                    title: false,
+                    // 表盘外框
+                    axisLine: {
+                        show: true,
+                        lineStyle: {
+                            color: [
+                                [0.25, '#9D322D'],
+                                [0.5, '#9D322D'],
+                                [0.75, '#9D322D'],
+                                [1, '#9D322D']
+                            ],
+                            width: 2
+                        }
+                    },
+                    // 表盘细分数
+                    axisTick: {
+                        show: true,
+                        splitNumber: 5,
+                        length: 4,
+                        lineStyle: {
+                            color: '#9D322D',
+                            width: 1,
+                            type: 'solid'
+                        }
+                    },
+                    // 分割线
+                    splitLine: {
+                        show: true,
+                        length: 10,
+                        lineStyle: {
+                            color: '#9D322D',
+                            width: 2,
+                            type: 'solid'
+                        }
+                    },
+                    // 分割线标识
+                    axisLabel: {
+                        show: true,
+                        distance: 5,
+                        formatter: function (v) {
+                            switch (v + '') {
+                                case '-180':
+                                    return ''
+                                default:
+                                    return v
+                            }
+                        }
+                    },
+
+                    // 指针设置
+                    pointer: {
+                        icon: 'path://m368.01136,209.80637l173.00807,-193.72679c19.14653,-21.43943 50.16392,-21.43943 69.31045,0l172.93149,193.72679c1.22537,1.37213 1.22537,3.51607 0,4.8882l-47.63657,53.34133c-1.22538,1.37213 -3.14003,1.37213 -4.36541,0l-113.65381,-127.26452c-1.91465,-2.14395 -5.20785,-0.60031 -5.20785,2.40122l0,731.94254c0,1.88667 -1.37855,3.43031 -3.06345,3.43031l-67.39579,0c-1.6849,0 -3.06345,-1.54364 -3.06345,-3.43031l0,-731.94254c0,-3.08728 -3.2932,-4.54517 -5.20785,-2.40122l-113.65381,127.26452c-1.22538,1.37213 -3.14003,1.37213 -4.36541,0l-47.63657,-53.34133c-1.22537,-1.37213 -1.22537,-3.51607 0,-4.88819l0,-0.00001M539,861.23064h73v800h-73z',
+                        length: '90%',
+                        width: 15,
+                        opacity: 1
+                    },
+                    detail: {
+                        show: false
+                    },
+                    //数值位置
+
+                    data: [
+                        {
+                            value: 0,
+                            name: 'A相',
+                            itemStyle: {
+                                color: '#DAA520'
+                            }
+                        },
+                        {
+                            value: 0,
+                            name: 'B相',
+                            itemStyle: {
+                                color: '#2E8B57'
+                            }
+                        },
+                        {
+                            value: 0,
+                            name: 'C相',
+                            itemStyle: {
+                                color: '#A52a2a'
+                            }
+                        }
+                    ]
+                },
+                {
+                    zlevel: 1,
+                    name: '基波电压相位',
+                    type: 'gauge',
+                    // 表盘最小值
+                    min: 180,
+                    // 表盘最大值
+                    max: -180,
+                    // 表盘分割数
+                    splitNumber: 6,
+                    // 圆心位置
+                    center: ['50%', '50%'],
+                    // 半径
+                    radius: '84%',
+                    // startAngle: 180,
+                    // endAngle: -179.99,
+                    startAngle: 90,
+                    endAngle: -179.99,
+                    // 指针方向
+                    clockWise: true,
+                    title: false,
+                    // 表盘外框
+                    axisLine: {
+                        show: true,
+                        lineStyle: {
+                            color: [
+                                [0.25, '#9D322D'],
+                                [0.5, '#9D322D'],
+                                [0.75, '#9D322D'],
+                                [1, '#9D322D']
+                            ],
+                            width: 1.5
+                        }
+                    },
+                    // 表盘细分数
+                    axisTick: {
+                        show: true,
+                        splitNumber: 5,
+                        length: 6,
+                        lineStyle: {
+                            color: '#9D322D',
+                            width: 1,
+                            type: 'solid'
+                        }
+                    },
+                    // 分割线
+                    splitLine: {
+                        show: true,
+                        length: 10,
+                        lineStyle: {
+                            color: '#9D322D',
+                            width: 2,
+                            type: 'solid'
+                        }
+                    },
+                    // 分割线标识
+                    axisLabel: {
+                        show: true,
+                        distance: 5,
+                        formatter: function (v) {
+                            switch (v + '') {
+                                case '-180':
+                                    return ''
+                                default:
+                                    return v
+                            }
+                        }
+                    },
+
+                    // 指针设置
+                    pointer: {
+                        icon: 'path://m368.01136,209.80637l173.00807,-193.72679c19.14653,-21.43943 50.16392,-21.43943 69.31045,0l172.93149,193.72679c1.22537,1.37213 1.22537,3.51607 0,4.8882l-47.63657,53.34133c-1.22538,1.37213 -3.14003,1.37213 -4.36541,0l-113.65381,-127.26452c-1.91465,-2.14395 -5.20785,-0.60031 -5.20785,2.40122l0,731.94254c0,1.88667 -1.37855,3.43031 -3.06345,3.43031l-67.39579,0c-1.6849,0 -3.06345,-1.54364 -3.06345,-3.43031l0,-731.94254c0,-3.08728 -3.2932,-4.54517 -5.20785,-2.40122l-113.65381,127.26452c-1.22538,1.37213 -3.14003,1.37213 -4.36541,0l-47.63657,-53.34133c-1.22537,-1.37213 -1.22537,-3.51607 0,-4.88819l0,-0.00001M539,861.23064h73v800h-73z',
+                        length: '90%',
+                        width: 15,
+                        opacity: 1
+                    },
+                    detail: {
+                        show: false
+                    },
+                    data: [
+                        {
+                            value: 0,
+                            name: ptName.value == 'star' ? 'A相' : 'AB相', //'A相',
+                            itemStyle: {
+                                color: '#DAA520'
+                            }
+                        },
+                        {
+                            value: 0,
+                            name: ptName.value == 'star' ? 'B相' : 'BC相', //'B相',
+                            itemStyle: {
+                                color: '#2E8B57'
+                            }
+                        },
+                        {
+                            value: 0,
+                            name: ptName.value == 'star' ? 'C相' : 'CA相', //'C相',
+                            itemStyle: {
+                                color: '#A52a2a'
+                            }
+                        }
+                    ]
+                }
+            ]
+        }
+    }
+    //电流相角
+    echartsData1.value.options.series[0].data.map((item: any) => {
+        iRadioList.value.map((vv: any) => {
+            if (item.name.includes(vv.phase)) {
+                item.value = vv.statisticalData
+            }
+        })
+    })
+    //电压相角
+    echartsData1.value.options.series[1].data.map((item: any) => {
+        vRadioList.value.map((vv: any) => {
+            if (item.name.includes(vv.phase)) {
+                item.value = vv.statisticalData
+            }
+        })
+    })
+
+    //新的实时数据
+    // 电流相角
+    echartsData1.value.options.series[0].data[0].value = Math.floor(webMsgSend.value[0]?.i1AngA * 100) / 100 || 0
+    echartsData1.value.options.series[0].data[1].value = Math.floor(webMsgSend.value[0]?.i1AngB * 100) / 100 || 0
+    echartsData1.value.options.series[0].data[2].value = Math.floor(webMsgSend.value[0]?.i1AngC * 100) / 100 || 0
+    // 电压相角
+    echartsData1.value.options.series[1].data[0].value = Math.floor(webMsgSend.value[0]?.v1AngA * 100) / 100 || 0
+    echartsData1.value.options.series[1].data[1].value = Math.floor(webMsgSend.value[0]?.v1AngB * 100) / 100 || 0
+    echartsData1.value.options.series[1].data[2].value = Math.floor(webMsgSend.value[0]?.v1AngC * 100) / 100 || 0
+
+    for (var i = 0; i < echartsData1.value.options.series.length; i++) {
+        echartsData1.value.options.series[i].type = 'gauge'
+        echartsData1.value.options.series[i].startAngle = 180
+        echartsData1.value.options.series[i].endAngle = -360
+        echartsData1.value.options.series[i].center = ['50%', '50%']
+    }
+}
+const initEcharts = (color: string, key: number) => {
+    return {
+        options: {
+            tooltip: {},
+            toolbox: {
+                show: false
+            },
+            series: [
+                {
+                    type: 'gauge',
+                    startAngle: key == 0 ? 180 : 90,
+                    endAngle: key == 0 ? 90 : 0,
+                    min: 0,
+                    max: key == 0 ? 12 : 400,
+                    radius: '180%',
+                    center: key == 0 ? ['70%', '95%'] : ['30%', '95%'],
+                    splitNumber: 2, //刻度数量
+                    axisLine: {
+                        show: true,
+                        lineStyle: {
+                            width: 5,
+                            color: [
+                                [0.3, color],
+                                [0.7, color],
+                                [1, color]
+                            ]
+                        }
+                    },
+                    color: color,
+                    // 表盘细分数
+                    axisTick: {
+                        show: true,
+                        distance: -5,
+                        length: 12,
+                        lineStyle: {
+                            color: color,
+                            width: 2,
+                            type: 'solid'
+                        }
+                    },
+                    axisLabel: {
+                        textStyle: {
+                            color: color,
+                            fontSize: '12'
+                        }
+                    },
+                    splitLine: {
+                        show: true,
+                        distance: -5,
+                        length: 20,
+                        lineStyle: {
+                            color: color,
+                            width: 3,
+                            type: 'solid'
+                        }
+                    },
+                    //标题位置
+                    title: {
+                        fontWeight: 'bolder',
+                        fontSize: 12,
+                        offsetCenter: key == 0 ? ['-130%', '-20%'] : ['130%', '-20%']
+                    },
+                    //数值位置
+                    detail: {
+                        fontSize: 14,
+                        valueAnimation: true,
+                        formatter: '{value}',
+                        offsetCenter: key == 0 ? ['30%', '-35%'] : ['-35%', '-35%'],
+                        color: color
+                    },
+
+                    // 指针设置
+                    pointer: {
+                        length: '80%',
+                        width: 3
+                    },
+                    data: [
+                        {
+                            value: 0,
+                            name: 'A相',
+                            itemStyle: {
+                                color: color
+                            }
+                        }
+                    ]
+                }
+            ]
+        }
+    }
+}
+//渲染echarts
+const init = () => {
+const url = (localStorage.getItem('WebSocketUrl') || 'ws://192.168.1.68:10407/api/pushMessage/') 
+    echartsDataV1.value = initEcharts('#DAA520', 0)
+    echartsDataV2.value = initEcharts('#2E8B57', 0)
+    echartsDataV3.value = initEcharts('#A52a2a', 0)
+
+    echartsDataA1.value = initEcharts('#DAA520', 1)
+    echartsDataA2.value = initEcharts('#2E8B57', 1)
+    echartsDataA3.value = initEcharts('#A52a2a', 1)
+
+    if (!dataSocket.socketServe) {
+        console.error('WebSocket 客户端实例不存在')
+        return
+    }
+    if (monitoringPoint.state.comFlag == 0) {
+        return ElMessage({
+            message: '所选监测点离线!',
+            type: 'warning'
+        })
+    }
+    let pids = monitoringPoint.state.pid.split(',')
+    dataSocket.socketServe.connect(
+        `${url}${adminInfo.id},${monitoringPoint.state.lineId},${pids[pids.length - 2]}`
+    )
+    dataSocket.socketServe.registerCallBack('message', (res: any) => {
+        txtContent.value = res.value
+        let data = JSON.parse(res.value)
+        time.value = data.TIME - 0
+        webMsgSend.value = [
+            {
+                vRmsA: ptName.value == 'star' ? data.V.A.VRMS : data.V.A.VRMS_LVR, //A相电压
+                vRmsB: ptName.value == 'star' ? data.V.B.VRMS : data.V.B.VRMS_LVR, //B相电压
+                vRmsC: ptName.value == 'star' ? data.V.C.VRMS : data.V.C.VRMS_LVR, //C相电压
+                iRmsA: data.I.A?.IRMS, //A相电流
+                iRmsB: data.I.B?.IRMS, //B相电流
+                iRmsC: data.I.C?.IRMS, //C相电流
+                v1AngA: data.V.A?.VFUND_ANGLE, //A相基波电压相位
+                v1AngB: data.V.B?.VFUND_ANGLE, //B相基波电压相位
+                v1AngC: data.V.C?.VFUND_ANGLE, //C相基波电压相位
+                i1AngA: data.I.A?.I_ANGLE, //A相基波电流相位
+                i1AngB: data.I.B?.I_ANGLE, //B相基波电流相位
+                i1AngC: data.I.C?.I_ANGLE, //C相基波电流相位
+                freq: data.V.T?.FREQ, //频率
+                freqDev: data.V.T?.DELTA_FREQ, //频率偏差
+                vUnbalance: data.V.T?.V_UNBAN, //电压不平衡度
+                iUnbalance: data.I.T?.I_UNBAN, //电流不平衡度
+                v1A: data.V.A?.V1, //A相基波电压幅值
+                v1B: data.V.B?.V1, //A相基波电压幅值
+                v1C: data.V.C?.V1, //A相基波电压幅值
+                i1A: data.I.A?.I1, //A相基波电流相位
+                i1B: data.I.B?.I1, //A相基波电流相位
+                i1C: data.I.C?.I1, //A相基波电流相位
+                vDevA: data.V.A?.DELTA_V, //A相电压偏差
+                vDevB: data.V.B?.DELTA_V, //B相电压偏差
+                vDevC: data.V.C?.DELTA_V, //C相电压偏差
+                vThdA: data.V.A?.VTHD, //A相电压总谐波畸变率
+                vThdB: data.V.B?.VTHD, //B相电压总谐波畸变率
+                vThdC: data.V.C?.VTHD, //C相电压总谐波畸变率
+                iThdA: data.I.A?.ITHD, //A相电流总谐波畸变率
+                iThdB: data.I.B?.ITHD, //B相电流总谐波畸变率
+                iThdC: data.I.C?.ITHD, //C相电流总谐波畸变率
+                pA: data.PQ.A?.P, //A相有功功率
+                pB: data.PQ.B?.P, //B相有功功率
+                pC: data.PQ.C?.P, //C相有功功率
+                pTot: data.PQ.T?.P, //总有功功率
+                qA: data.PQ.A?.Q, //A相无功功率
+                qB: data.PQ.B?.Q, //B相无功功率
+                qC: data.PQ.C?.Q, //C相无功功率
+                qTot: data.PQ.T?.Q, //总无功功率
+                sA: data.PQ.A?.S, //A相视在功率
+                sB: data.PQ.B?.S, //B相视在功率
+                sC: data.PQ.C?.S, //C相视在功率
+                sTot: data.PQ.T?.S, //总视在功率
+                pfA: data.PQ.A?.PF, //A相功率因数
+                pfB: data.PQ.B?.PF, //B相功率因数
+                pfC: data.PQ.C?.PF, //C相功率因数
+                pfTot: data.PQ.T?.PF, //总功率因数
+                dpfA: data.PQ.A?.DF, //A相基波功率因数
+                dpfB: data.PQ.B?.DF, //B相基波功率因数
+                dpfC: data.PQ.C?.DF, //C相基波功率因数
+                dpfTot: data.PQ.T?.DF //总基波功率因数
+            }
+        ]
+        spectrumRef.value?.init(data)
+        trendRef.value?.init(data)
+
+        // console.log('🚀 ~ dataSocket.socketServe.registerCallBack ~ webMsgSend.value:', data)
+        setRealData()
+    })
+}
+// 下载txt
+const downloadTxt = () => {
+    const content = txtContent.value // 文件内容
+    const blob = new Blob([content], { type: 'text/plain' }) // 创建 Blob 对象
+    const url = URL.createObjectURL(blob) // 生成下载链接
+
+    // 创建 <a> 标签并触发下载
+    const link = document.createElement('a')
+    link.href = url
+    link.download = '实时数据.txt' // 文件名
+    link.click()
+
+    // 释放 URL 对象
+    URL.revokeObjectURL(url)
+}
+//接收父组件传递的table数据
+
+const loading = ref(false)
+
+const formatter = (row: any) => {
+    return row.cellValue == undefined ? '/' : Math.floor(row.cellValue * 100) / 100
+}
+//电流相角数组&电压相角数组
+const iRadioList: any = ref([])
+const vRadioList: any = ref([])
+
+const setRealData = () => {
+    initRadioCharts()
+    //新的
+    // echartsDataV1.value.options.series[0].max =
+    //     webMsgSend.value[0].vRmsA == 0 ? 1 : Math.ceil(webMsgSend.value[0].vRmsA)
+    // echartsDataV2.value.options.series[0].max =
+    //     webMsgSend.value[0].vRmsB == 0 ? 1 : Math.ceil(webMsgSend.value[0].vRmsB)
+    // echartsDataV3.value.options.series[0].max =
+    //     webMsgSend.value[0].vRmsC == 0 ? 1 : Math.ceil(webMsgSend.value[0].vRmsC)
+    echartsDataV1.value.options.series[0].data = [
+        {
+            name: ptName.value == 'star' ? 'A相' : 'AB相', //A相
+            value: Math.floor(webMsgSend.value[0].vRmsA * 100) / 100 || 0
+        }
+    ]
+    pieChart1.value.initChart()
+    echartsDataV2.value.options.series[0].data = [
+        {
+            name: ptName.value == 'star' ? 'B相' : 'BC相', // 'B相',
+            value: Math.floor(webMsgSend.value[0].vRmsB * 100) / 100 || 0
+        }
+    ]
+    pieChart2.value.initChart()
+    echartsDataV3.value.options.series[0].data = [
+        {
+            name: ptName.value == 'star' ? 'C相' : 'CA相', //'C相',
+            value: Math.floor(webMsgSend.value[0].vRmsC * 100) / 100 || 0
+        }
+    ]
+    pieChart3.value.initChart()
+    //新的电流有效值
+    // echartsDataA1.value.options.series[0].max =
+    //     webMsgSend.value[0].iRmsA == 0 ? 1 : Math.ceil(webMsgSend.value[0].iRmsA)
+    // echartsDataA2.value.options.series[0].max =
+    //     webMsgSend.value[0].iRmsB == 0 ? 1 : Math.ceil(webMsgSend.value[0].iRmsB)
+    // echartsDataA3.value.options.series[0].max =
+    //     webMsgSend.value[0].iRmsC == 0 ? 1 : Math.ceil(webMsgSend.value[0].iRmsC)
+    echartsDataA1.value.options.series[0].data = [
+        {
+            name: 'A相',
+            value: Math.floor(webMsgSend.value[0].iRmsA * 100) / 100 || 0
+        }
+    ]
+    pieChart4.value.initChart()
+    echartsDataA2.value.options.series[0].data = [
+        {
+            name: 'B相',
+            value: Math.floor(webMsgSend.value[0].iRmsB * 100) / 100 || 0
+        }
+    ]
+    pieChart5.value.initChart()
+    echartsDataA3.value.options.series[0].data = [
+        {
+            name: 'C相',
+            value: Math.floor(webMsgSend.value[0].iRmsC * 100) / 100 || 0
+        }
+    ]
+    pieChart6.value.initChart()
+}
+defineExpose({ setRealData })
+onMounted(() => {
+    init()
+    initRadioCharts()
+    getLineDetail({ id: monitoringPoint.state.lineId }).then(res => {
+        ptName.value = connection.filter(item => item.value == res.data.ptType)[0].code || ''
+    })
+})
+onBeforeUnmount(() => {
+    dataSocket.socketServe?.closeWs()
+})
+</script>
+<style lang="scss" scoped>
+.view {
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    position: relative;
+    .view_title {
+        position: absolute;
+        left: 50%;
+        top: 15px;
+        transform: translateX(-50%);
+    }
+    .view_btn {
+        position: absolute;
+        right: 50px;
+        top: 10px;
+    }
+    .view_top {
+        width: 100%;
+        height: 400px !important;
+        display: flex;
+        justify-content: space-between;
+        //border: 1px solid #eee;
+        // padding: 10px;
+        margin-top: 10px;
+
+        .view_top_left,
+        .view_top_right {
+            // width: 300px;
+            flex: 1;
+            height: 100%;
+            // padding: 10px;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            border: 1px solid #eee;
+
+            .left_charts,
+            .right_charts {
+                flex: none;
+                width: 100%;
+                height: 115px;
+                // margin-bottom: 16px;
+                // padding: 10px;
+                margin-bottom: 8px;
+            }
+        }
+
+        .view_top_mid {
+            // flex: 1;
+            width: 40%;
+            border: 1px solid #eee;
+            margin: 0 10px;
+            // padding: 10px;
+            position: relative;
+
+            .mid_charts {
+                width: 100%;
+                height: 370px;
+                position: relative;
+                // top: 20%;
+                // bottom: 10px;
+                .mid_charts_text {
+                    position: absolute;
+                    bottom: 10px;
+                    right: 10px;
+                    font-size: 12px;
+                    font-weight: 600;
+                    line-height: 16px;
+                    span {
+                        font-size: 14px;
+                        font-weight: 600;
+                    }
+                }
+            }
+        }
+
+        .left_charts_title,
+        .mid_charts_title,
+        .right_charts_title {
+            width: 100%;
+            height: 20px;
+            text-align: left;
+            font-weight: 800;
+            font-weight: 16px;
+            line-height: 20px;
+            margin: 10px 0 0 10px;
+            padding-left: 5px;
+            box-sizing: border-box;
+        }
+    }
+
+    .view_bot {
+        // min-height: 300px;
+        margin: 10px 0 0 0;
+        overflow: auto !important;
+        flex: 1 !important;
+        // padding-bottom: 200px !important;
+        box-sizing: border-box !important;
+
+        .view_bot_tables {
+            margin-bottom: 10px;
+            height: auto;
+            min-height: 120px;
+        }
+    }
+}
+
+.view::-webkit-scrollbar {
+    display: none;
+}
+
+.table_container {
+    width: 100%;
+    height: auto;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    .table {
+        flex: 1;
+
+        .table_info {
+            width: 100%;
+            height: 120px;
+            // border: 1px solid #eee;
+            border-bottom: 2px solid #eee;
+            margin-bottom: 20px;
+            display: flex;
+            flex-direction: column;
+        }
+
+        .thead {
+            width: 100%;
+            height: auto;
+            background: #f4f6f9;
+            text-align: center;
+            display: flex;
+            flex-direction: column;
+
+            .thead_top {
+                width: 100%;
+                height: 40px;
+                line-height: 40px;
+                border: 1px solid #eee;
+                color: #111;
+                font-size: 14px;
+                font-weight: 800;
+            }
+
+            .thead_bot {
+                width: 100%;
+                height: 40px;
+                line-height: 40px;
+                display: flex;
+                color: #111;
+                font-size: 14px;
+                font-weight: 800;
+
+                .thead_bot_cell {
+                    flex: 1;
+                    border: 1px solid #eee;
+                }
+            }
+        }
+
+        .tbody {
+            flex: 1;
+            display: flex;
+            text-align: center;
+
+            .tbody_cell {
+                flex: 1;
+                text-align: center;
+                line-height: 40px;
+                border: 1px solid #eee;
+                border-bottom: 0;
+            }
+        }
+
+        .tbody:hover {
+            background: #f4f6f9;
+        }
+    }
+}
+
+.table_container:hover {
+    .table {
+        .tbody {
+            background: #f4f6f9;
+        }
+    }
+}
+
+:deep(.view_bot) {
+    .vxe-table--render-default .vxe-body--column:not(.col--ellipsis),
+    .vxe-table--render-default .vxe-footer--column:not(.col--ellipsis),
+    .vxe-table--render-default .vxe-header--column:not(.col--ellipsis) {
+        padding: 5px !important;
+    }
+
+    .vxe-table--body-wrapper {
+        min-height: 32px !important;
+    }
+}
+
+::v-deep .el-collapse-item__header {
+    font-size: 16px !important;
+    font-weight: 800 !important;
+}
+::v-deep .el-collapse-item__content {
+    padding-bottom: 10px;
+}
+</style>
diff --git a/src/views/pqs/qualityInspeection/panorama/components/map.vue b/src/views/pqs/qualityInspeection/panorama/components/map.vue
index ac9e2db9..a60a890e 100644
--- a/src/views/pqs/qualityInspeection/panorama/components/map.vue
+++ b/src/views/pqs/qualityInspeection/panorama/components/map.vue
@@ -1,1009 +1,1009 @@
-<template>
-    <DatePicker ref="datePickerRef" theCurrentTime style="display: none" />
-    <div id="map" style="width: 100%; height: 100%" v-show="prop.lineInfo"></div>
-    <div id="nrDeviceCard"></div>
-    <!-- 搜索框 -->
-    <div class="query-box-wrap">
-        <el-input
-            v-model.trim="inputQuery"
-            style="height: 46px; width: 334px"
-            @keyup.enter="DeviceQ"
-            placeholder="请输入终端名称"
-        >
-            <template #prefix>
-                <div class="Icon"></div>
-            </template>
-
-            <template #suffix>
-                <el-icon @click="DeviceQ" class="el-input__icon"><Search /></el-icon>
-            </template>
-        </el-input>
-    </div>
-    <!-- 搜索内容展示 -->
-    <div class="query-box-wrap collapse" v-show="showWrap">
-        <div v-if="QueryList.length == 0" class="collapse_none">查询无结果</div>
-        <el-collapse v-if="QueryList.length > 0 && showCollapse" v-model="activeName" accordion>
-            <el-collapse-item v-for="(item, i) in QueryList" :name="i">
-                <template #title>
-                    {{ item.psrName }}
-                    <span class="ml10" style="color: #0d867f">{{ item.count }}</span>
-                </template>
-                <div class="collapseBox">
-                    <div
-                        class="group-list__item"
-                        :style="colorKey == k.coordinate ? 'background-color: #009ea81a;' : ''"
-                        v-for="k in item.psrList"
-                        @click="flyTo(k)"
-                    >
-                        <p>{{ k.psrName }}</p>
-                        <p>{{ k.vlevelName }}|{{ k.maintOrgName }}</p>
-                    </div>
-                </div>
-            </el-collapse-item>
-        </el-collapse>
-        <div
-            v-if="QueryList.length > 0 && !showCollapse"
-            class="collapse_none"
-            style="color: #009ea8"
-            @click="showCollapse = true"
-        >
-            展开搜索结果
-        </div>
-    </div>
-</template>
-
-<script setup lang="ts">
-import { onMounted, reactive, ref, nextTick } from 'vue'
-import { mainHeight } from '@/utils/layout'
-import { useDictData } from '@/stores/dictData'
-// import { devicesDemo } from '@/assets/panorama/devicesDemo.js'
-import { getAreaLineInfo } from '@/api/event-boot/areaInfo'
-import DatePicker from '@/components/form/datePicker/index.vue'
-import { getGridDiagramAreaData } from '@/api/device-boot/panorama'
-import { Search } from '@element-plus/icons-vue'
-import '@/assets/panorama/narimap.css'
-import '@/assets/panorama/nrgisCommon.css'
-const emit = defineEmits(['changeValue', 'drop', 'show'])
-const prop = defineProps({
-    lineInfo: {
-        type: Boolean
-    }
-})
-const inputQuery: any = ref('')
-const activeName: any = ref(0)
-const narimap = window?.narimap
-const dictData = useDictData()
-const datePickerRef = ref()
-const form: any = ref({})
-const colorKey = ref('')
-const PopKey = ref(2)
-const assessList: any = ref([])
-const linList: any = ref([])
-const QueryList: any = ref([])
-const AreaData: any = ref([])
-const map: any = ref(null)
-const showCollapse: any = ref(true)
-const showWrap: any = ref(false)
-const deviceCard: any = ref(null)
-const popup: any = ref(null)
-const DeviceQuery: any = ref(null)
-const rPopList: any = ref([])
-const powerManageGridMap: any = ref(null)
-const orgId = ref(dictData.state.area[0].code)
-const deptIndex = ref(dictData.state.area[0].id)
-const popupOffsets = ref({
-    top: [0, 0],
-    'top-left': [0, 0],
-    'top-right': [0, 0],
-    bottom: [0, -10],
-    'bottom-left': [25, -35],
-    'bottom-right': [-25, -35],
-    left: [10, -10],
-    right: [-10, -10]
-})
-const mapList: any = ref([])
-const flag = ref(true)
-const LngLat = [
-    {
-        name: '唐山',
-        LngLat: [118.335849137, 39.7513593355]
-    },
-    {
-        name: '张家口',
-        LngLat: [115.032504679, 40.8951549951]
-    },
-    {
-        name: '秦皇岛',
-        LngLat: [119.185113833, 40.1179119754]
-    },
-    {
-        name: '承德',
-        LngLat: [117.548498365, 41.3775890632]
-    },
-    {
-        name: '廊坊',
-        LngLat: [116.628004129, 39.0589378611]
-    }
-]
-import { getAssessOverview } from '@/api/device-boot/panorama'
-
-narimap.Require(['PSRMap', 'Thematic', 'Components.Query','Components.MapSelector', 'Components.RegionSelector'], () => {
-    if (narimap.Config.examples.notlogin) {
-        initMap(narimap.Config.styles.sjRaster)
-    } else {
-        //电网GIS地图服务登录
-        narimap.SGAuth.login()
-            .then((result: any) => {
-                if (result.success) {
-                    console.log('登录成功')
-                } else {
-                    console.log('登录失败', result)
-                }
-
-                //默认打开电网GIS影像图
-                initMap(narimap.Config.styles.sjRaster)
-            })
-            .catch((err: any) => {
-                console.log('错误', err)
-            })
-    }
-})
-function initMap(styleurl: any) {
-    map.value = new narimap.Map({
-        container: 'map',
-        style: styleurl,
-        zoom: 6,
-        center: [116.478935, 39.997761],
-        controls: false,
-        country: true,
-        // 地图默认字体
-        localIdeographFontFamily: 'Microsoft YoHei'
-    })
-    map.value.on('load', () => {
-        createMapSelectorComponent()
-        DeviceQuery.value = new narimap.ResourceQuery.DeviceQuery()
-        addLayer()
-
-        nextTick(() => {
-            // 添加图层
-            Query()
-        })
-    })
-}
-
-const Query = () => {
-    // 添加行政区划
-    powerManageGridMap.value = new narimap.ManageGrid.PowerManageGridMap(map.value)
-    powerManageGridMap.value.init(
-        {
-            base: {
-                outline: {
-                    paint: {
-                        'line-color': '#0D867F',
-                        'line-width': 1,
-                        'line-opacity': 1
-                    }
-                },
-                fill: {
-                    paint: {
-                        'fill-color': '#0D867F',
-                        'fill-opacity': 0.3
-                    }
-                },
-                label: {
-                    paint: {
-                        'text-color': '#063094',
-                        'text-halo-color': '#ffffff',
-                        'text-halo-width': 1
-                    }
-                },
-                hover: {
-                    type: 'all',
-                    fill: {
-                        paint: {
-                            'fill-color': 'rgba(1,1,1,0)',
-                            'fill-opacity': 0
-                        }
-                    },
-                    outline: {
-                        paint: {
-                            'line-color': '#0D867F',
-                            'line-width': 4,
-                            'line-opacity': 1
-                        }
-                    }
-                }
-            },
-            levels: {
-                city: {
-                    // minzoom: 10,
-                    maxzoom: 9
-                }
-            }
-        },
-        {
-            initOrgIds: [orgId.value],
-            //是否联级，包含下属全部子部门，即同样显示编码对应的所属下级
-            cascade: true
-        }
-    )
-    powerManageGridMap.value.on('load', function () {
-        powerLoad()
-    })
-
-    setTimeout(() => {
-        addLine()
-        // const query = new narimap.Components.Query(map.value)
-        // query.init(map.value.getContainer())
-        // query.setQueryOrgId(orgId.value)
-
-        setTimeout(() => {
-            locatePositions({ data: dictData.state.area[0] })
-        }, 500)
-    }, 500)
-}
-
-// 添加变电站线路
-const addLine = () => {
-    //添加电网图层
-    let psrmap = new narimap.PSRMap(map.value, {
-        orgId: orgId.value == '1100F3DE20806FADE050007F01006CBE' ? '' : orgId.value
-    })
-    psrmap.addPSR()
-
-    initDeviceCard()
-    setTimeout(() => {
-        psrmap.filterByDomain(1)
-    }, 0)
-    //添加电网要素点击事件
-    psrmap.on('click', (features: any) => {
-        console.log(features)
-        showCollapse.value = false
-        if (inputQuery.value.length == 0) showWrap.value = false
-    })
-}
-
-// 添加变电站弹框
-const initDeviceCard = () => {
-    deviceCard.value && deviceCard.value.close()
-
-    let options = {
-        map: map.value, // map实例
-        container: 'nrDeviceCard', // details容器id，为用户自定义的容器名
-        narimap: narimap, //nariMap实例
-        //用户自定义功能
-        customButtons: {
-            popupButtons: {
-                buttons: []
-            },
-            detailsButtons: {
-                buttons: []
-            }
-        }
-    }
-
-    deviceCard.value = new nrgisCommon.EquipmentAccount.DeviceCard(options)
-    deviceCard.value.on('click', (res: any) => {
-        if (res.button.id == 'nariPopupViewDetail') {
-            emit('show', true)
-        }
-        setTimeout(() => {
-            document.querySelectorAll('.nari-tabs__close')[0].onclick = function (v: any) {
-                emit('show', false)
-            }
-        }, 10)
-    })
-    //
-}
-
-const grids = (row: any) => {
-    form.value = {
-        ...row,
-        id: row.orgNo,
-        deptIndex: row.orgNo,
-        orgId: row.orgNo,
-        ids: [],
-        statisticalType: dictData.getBasicData('Statistical_Type', ['Report_Type'])[0],
-        isUpToGrid: row.isUpToGrid,
-        monitorFlag: row.isUpToGrid == 0 ? null : row.isUpToGrid
-    }
-
-    // 综合评估
-    getAssessOverview(form.value).then(res => {
-        assessList.value = res.data?.children
-
-        getGridDiagramAreaData({ ...form.value, deptIndex: deptIndex.value }).then((res: any) => {
-            AreaData.value = res.data
-            GridDiagramArea()
-        })
-        if (powerManageGridMap.value) powerLoad()
-    })
-}
-
-// 加载行政区划
-const powerLoad = () => {
-    // dictData.state.area[0]
-
-    let colors: any = [
-        {
-            orgIds: [],
-            outline: {
-                color: '#fff'
-            },
-            fill: {
-                color: '#00b07d'
-            }
-        },
-        {
-            orgIds: [],
-            outline: {
-                color: '#fff'
-            },
-            fill: {
-                color: '#3399ff'
-            }
-        },
-        {
-            orgIds: [],
-            outline: {
-                color: '#fff'
-            },
-            fill: {
-                color: '#ffcc33'
-            }
-        },
-        {
-            orgIds: [],
-            outline: {
-                color: '#fff'
-            },
-            fill: {
-                color: '#db0887'
-            }
-        },
-        {
-            orgIds: [],
-            outline: {
-                color: '#fff'
-            },
-            fill: {
-                color: '#ff0000'
-            }
-        }
-    ]
-
-    assessList.value.forEach((item: any) => {
-        if (item.score == 3.14159) {
-        } else if (item.score > 4.5) {
-            colors[0].orgIds.push(item.code)
-        } else if (item.score > 4) {
-            colors[1].orgIds.push(item.code)
-        } else if (item.score > 3) {
-            colors[2].orgIds.push(item.code)
-        } else if (item.score > 2) {
-            colors[3].orgIds.push(item.code)
-        } else if (item.score > 0) {
-            colors[4].orgIds.push(item.code)
-        }
-    })
-
-    powerManageGridMap.value.setColorByOrgId({
-        orgIdColors: colors
-    })
-}
-// 添加图层
-const addLayer = () => {
-    map.value.loadImage(
-        new URL('@/assets/txzcwzj.png', import.meta.url).href, // 图片地址
-        (error: any, image: any) => {
-            if (error) throw error
-
-            //添加图片到map，第一个参数为图片设置id
-            map.value.addImage('poi1', image)
-            map.value.addLayer({
-                id: 'spotImg-ZY',
-                type: 'symbol',
-                minzoom: 8,
-                source: {
-                    type: 'geojson',
-                    data: {
-                        type: 'FeatureCollection',
-                        features: []
-                    }
-                },
-                layout: {
-                    // 为图层设置引用的图片ID
-                    'icon-image': 'poi1',
-                    'icon-size': 0.7,
-                    'icon-ignore-placement': false,
-                    'icon-allow-overlap': false
-                }
-            })
-            map.value.addLayer({
-                id: 'spotName',
-                type: 'symbol',
-                minzoom: 10,
-                source: {
-                    type: 'geojson',
-                    data: {
-                        type: 'FeatureCollection',
-                        features: []
-                    }
-                },
-                layout: {
-                    // 为图层设置引用的图片ID
-
-                    'text-field': '{name}',
-                    'icon-ignore-placement': false,
-                    'text-ignore-placement': true,
-                    'text-size': 12,
-                    'text-max-width': 8,
-                    'text-offset': [0, 2],
-                    'text-font': ['Microsoft YaHei Regular']
-                },
-                paint: {
-                    'text-color': '#ccc',
-
-                    'text-halo-width': 1.33333
-                }
-            })
-        }
-    )
-
-    map.value.loadImage(
-        new URL('@/assets/txzdwzj.png', import.meta.url).href, // 图片地址
-        (error: any, image: any) => {
-            if (error) throw error
-
-            //添加图片到map，第一个参数为图片设置id
-            map.value.addImage('poi2', image)
-            map.value.addLayer({
-                id: 'spotImg-TY',
-                type: 'symbol',
-                minzoom: 8,
-                source: {
-                    type: 'geojson',
-
-                    data: {
-                        type: 'FeatureCollection',
-                        features: []
-                    }
-                },
-                layout: {
-                    // 为图层设置引用的图片ID
-                    'icon-image': 'poi2',
-                    'icon-size': 0.7,
-                    // 'text-field': '{name}',
-                    'icon-ignore-placement': false,
-                    'icon-allow-overlap': false
-                }
-            })
-        }
-    )
-    map.value.loadImage(
-        new URL('@/assets/point.png', import.meta.url).href, // 图片地址
-        (error: any, image: any) => {
-            if (error) throw error
-
-            //添加图片到map，第一个参数为图片设置id
-            map.value.addImage('poi3', image)
-            map.value.addLayer({
-                id: 'spotImg-GJ',
-                type: 'symbol',
-                minzoom: 8,
-                source: {
-                    type: 'geojson',
-                    data: {
-                        type: 'FeatureCollection',
-                        features: []
-                    }
-                },
-                layout: {
-                    // 为图层设置引用的图片ID
-                    'icon-image': 'poi3',
-                    'icon-size': 0.6,
-                    'icon-ignore-placement': false,
-                    'icon-allow-overlap': false
-                },
-                Paint: {
-                    'icon-opacity': 10
-                }
-            })
-        }
-    )
-    map.value.loadImage(
-        new URL('@/assets/dw.png', import.meta.url).href, // 图片地址
-        (error: any, image: any) => {
-            if (error) throw error
-
-            //添加图片到map，第一个参数为图片设置id
-            map.value.addImage('poi4', image)
-            map.value.addLayer({
-                id: 'spotImg-DW',
-                type: 'symbol',
-                minzoom: 8,
-                zIndex: 9999,
-                source: {
-                    type: 'geojson',
-
-                    data: {
-                        type: 'FeatureCollection',
-                        features: []
-                    }
-                },
-                layout: {
-                    // 为图层设置引用的图片ID
-                    'icon-image': 'poi4',
-                    'icon-size': 0.35,
-                    // 'text-field': '{name}',
-                    'icon-ignore-placement': false,
-                    'icon-allow-overlap': false
-                }
-            })
-        }
-    )
-    // 添加地图弹框
-    map.value.on('click', (e: any) => {
-        const features = map.value.queryRenderedFeatures(e.point, {
-            layers: ['spotImg-ZY', 'spotImg-TY', 'spotImg-GJ', 'spotImg-DW']
-        })
-
-        if (features.length > 0) {
-            popup.value && popup.value.remove()
-            setTimeout(() => {
-                deviceCard.value.popup && deviceCard.value.popup.remove()
-            }, 10)
-            let data = JSON.parse(features[0].properties.list)
-
-            popup.value = new narimap.Popup({ offset: popupOffsets.value, className: 'my-popup' })
-                .setLngLat([data.lng, data.lat])
-                .setHTML(
-                    ` <div class="popup-box">
-                        <div class="popup_content">
-                            <img src="${data.imageUrl}" />
-                            <div>
-                                <div style="display: flex">
-                                    <span class="title">${data.lineName}</span>
-                                    <span
-                                        class="state"
-                                        style="background-color: ${data.comFlag == 0 ? '#ff0000' : '#3ab34a'};"
-                                    >
-                                        ${data.comFlag == 0 ? '中断' : '在线'}
-                                    </span>
-                                </div>
-                                <div class="info">
-                                    <span>${data.subName} </span>
-                                    <span>${data.voltageName}</span>
-                                </div>
-                            </div>
-                        </div>
-                        <div class="popup_footer">
-                            <span id="ids" data-sid="${data.lineId}">
-                                查看详情
-                            </span>
-                        </div>
-                    </div>`
-                )
-                .addTo(map.value)
-            let html = document.getElementById('ids')
-            if (html)
-                html.onclick = function (v: any) {
-                    // console.log(e.target.dataset.sid)
-                    emit('drop', v.target.dataset.sid)
-                }
-        }
-    })
-
-    // 监听地图缩放完成事件
-    map.value.on('zoomend', (e: any) => {
-        // console.log(123, map.value.getCenter())
-
-        if (map.value.getZoom() > 8.5 || map.value.getZoom() < 6) {
-            rPopList.value.map((item: any) => item.remove())
-            rPopList.value = []
-        } else {
-            if (mapList.value.length > 0) radiusPop()
-        }
-    })
-}
-//添加多个监测点
-const addMarkers = async (row?: any, key?: any, num?: any) => {
-    if (map.value == null) return
-    let params = {
-        deptIndex: deptIndex.value,
-        monitorFlag: 2,
-        powerFlag: 2,
-        searchBeginTime: datePickerRef.value.timeValue[0],
-        searchEndTime: datePickerRef.value.timeValue[1],
-        serverName: 'event-boot',
-        statisticalType: {},
-        ...row
-    }
-
-    let { data } = await getAreaLineInfo(params)
-
-    let r = 0.0035
-    let tempFeatureZ: any = []
-    let tempFeatureT: any = []
-    data.forEach((item: any) => {
-        if (item.children.length > 10 && item.children.length < 100) {
-            r = 0.0055
-        } else if (item.children.length >= 100) {
-            r = 0.01055
-        }
-
-        item.children.forEach((val: any, i: number) => {
-            val.lng = item.lng + r * Math.cos((2 * Math.PI * i) / item.children.length)
-            val.lat = item.lat + r * Math.sin((2 * Math.PI * i) / item.children.length)
-            val.imageUrl =
-                val.comFlag == 0
-                    ? new URL('@/assets/txzdwzj.png', import.meta.url).href
-                    : new URL('@/assets/txzcwzj.png', import.meta.url).href
-            // // 监测点图标
-
-            let tempFeature = {
-                type: 'Feature',
-
-                geometry: {
-                    type: 'Point',
-                    coordinates: [val.lng, val.lat]
-                },
-                properties: {
-                    name: val.lineName,
-                    list: val
-                }
-            }
-            if (key == 1) {
-                switch (val.type) {
-                    case 0:
-                        tempFeatureZ.push(tempFeature)
-
-                        break
-                    case 1:
-                        tempFeatureT.push(tempFeature)
-                        break
-                }
-            } else {
-                switch (val.comFlag) {
-                    case 0:
-                        tempFeatureT.push(tempFeature)
-                        break
-                    case 1:
-                        tempFeatureZ.push(tempFeature)
-                        break
-                }
-            }
-        })
-    })
-
-    if (flag.value) {
-        linList.value = [...tempFeatureZ, ...tempFeatureT]
-
-        flag.value = false
-    }
-    //    清除图层图片
-    map.value.getSource('spotImg-ZY').setData({
-        type: 'FeatureCollection',
-        features: []
-    })
-    map.value.getSource('spotImg-TY').setData({
-        type: 'FeatureCollection',
-        features: []
-    })
-    map.value.getSource('spotImg-GJ').setData({
-        type: 'FeatureCollection',
-        features: []
-    })
-    map.value.getSource('spotImg-DW').setData({
-        type: 'FeatureCollection',
-        features: []
-    })
-    if (key != undefined && num == undefined) map.value.easeTo({ zoom: 8.1 })
-
-    if (key == undefined) {
-        map.value.getSource('spotImg-DW').setData({
-            type: 'FeatureCollection',
-            features: [...tempFeatureT, ...tempFeatureZ]
-        })
-    } else if (key == 1) {
-        map.value.getSource('spotImg-ZY').setData({
-            type: 'FeatureCollection',
-            features: tempFeatureZ
-        })
-        map.value.getSource('spotImg-TY').setData({
-            type: 'FeatureCollection',
-            features: tempFeatureT
-        })
-    } else {
-        map.value.getSource('spotImg-ZY').setData({
-            type: 'FeatureCollection',
-            features: [...tempFeatureZ, ...tempFeatureT]
-        })
-        // map.value.getSource('spotImg-TY').setData({
-        //     type: 'FeatureCollection',
-        //     features: tempFeatureT
-        // })
-    }
-
-    // console.log('🚀 ~ addMarkers ~  map.value.getStyle().layers:', map.value.getStyle().layers)
-    const layers = map.value.getStyle().layers
-    const topLayer = layers[layers.length - 1]
-    map.value.moveLayer('spotImg-DW', topLayer.id)
-    map.value.moveLayer('spotImg-ZY', topLayer.id)
-    map.value.moveLayer('spotImg-TY', topLayer.id)
-    map.value.moveLayer('spotImg-GJ', topLayer.id)
-
-    map.value.getSource('spotName').setData({
-        type: 'FeatureCollection',
-        features: [...tempFeatureT, ...tempFeatureZ]
-    })
-}
-// 统计弹框数据
-const GridDiagramArea = () => {
-    LngLat.forEach((item: any) => {
-        assessList.value.forEach((y: any) => {
-            if (item.name == y.name) {
-                if (y.score == 3.14159) {
-                } else if (y.score > 4.5) {
-                    item.background = '#33996699'
-                } else if (y.score > 4) {
-                    item.background = '#3399ff99'
-                } else if (y.score > 3) {
-                    item.background = '#ffcc3399'
-                } else if (y.score > 2) {
-                    item.background = '#db088799'
-                } else if (y.score > 0) {
-                    item.background = '#ff000099'
-                }
-            }
-        })
-
-        AreaData.value.forEach((k: any, i: any) => {
-            if (item.name == k.orgName) {
-                k.LngLat = item.LngLat
-                k.background = item.background
-            }
-        })
-    })
-    mapList.value = AreaData.value.filter((item: any) => item.orgName != '超高压' && item.orgName != '风光储')
-    setTimeout(() => {
-        radiusPop()
-    }, 0)
-}
-// 添加统计弹框
-const radiusPop = (k?: number) => {
-    if (k != undefined) PopKey.value = k
-    if (rPopList.value.length > 0) {
-        rPopList.value.map((item: any) => item.remove())
-        rPopList.value = []
-    }
-
-    mapList.value.forEach((item: any, i: number) => {
-        let infoText = ''
-
-        if (PopKey.value == 2) {
-            // 监测点
-            infoText = `<img src="${new URL(`@/assets/img/JCD-ZS.png`, import.meta.url)}" />
-                        <div class="infoBox">
-                            <div   id="clickZs${i}" data-line="${item.lineList}" data-alarm="${
-                item.alarmList
-            }" data-key="0" data-LngLat="${item.LngLat}">总数<br/>${item.lineNum}</div>
-                            <div id="clickZx${i}"  data-alarm="${item.onlineList}" data-key="0" data-LngLat="${
-                item.LngLat
-            }">在线<br/>${item.onlineNum}</div>
-                            <div id="clickGj${i}" data-line="" data-alarm="${
-                item.alarmList
-            }" data-key="1" data-LngLat="${item.LngLat}">告警<br/>${item.alarm}</div>
-                        </div>`
-        } else if (PopKey.value == 0) {
-            // 变电站
-            infoText = `<img src="${new URL(`@/assets/img/BDZ-ZS.png`, import.meta.url)}" />
-                        <div class="infoBox">
-                            <div id="clickZs${i}" data-line="${item.lineList}" data-alarm="${
-                item.alarmSubList
-            }" data-key="1" data-LngLat="${item.LngLat}">总数<br/>${item.subNum}</div>
-                            <div id="clickGj${i}" data-line="" data-alarm="${
-                item.alarmSubList
-            }" data-key="1" data-LngLat="${item.LngLat}">告警<br/>${item.alarmSubNum}</div>
-                        </div>`
-        } else if (PopKey.value == 1) {
-            // 终端
-            infoText = `<img src="${new URL(`@/assets/img/ZD-ZS.png`, import.meta.url)}" />
-                        <div class="infoBox">
-                            <div id="clickZs${i}" data-line="${item.lineList}" data-alarm="${
-                item.onlineList
-            }" data-key="2" data-LngLat="${item.LngLat}">总数<br/>${item.deviceNum}</div>
-                            <div id="clickGj${i}" data-line="" data-alarm="${
-                item.onlineList
-            }" data-key="2" data-LngLat="${item.LngLat}">在运<br/>${item.onDevice}</div>
-                        </div>`
-        }
-
-        let pop = new narimap.Popup({
-            offset: popupOffsets.value,
-            className: 'my-radiusPop',
-            closeButton: false,
-            closeOnClick: false
-        })
-            .setLngLat(item.LngLat)
-            .setHTML(
-                `<div class="sgmap-popup-content" style="background-color: ${item.background};">
-                    <div style="display: flex;">` +
-                    infoText +
-                    ` </div>
-                </div>`
-            )
-            .addTo(map.value)
-        rPopList.value.push(pop)
-        let html: any = document.getElementById(`clickZs${i}`)
-        let html1: any = document.getElementById(`clickZx${i}`)
-        let html2: any = document.getElementById(`clickGj${i}`)
-        if (html)
-            html.onclick = function (v: any) {
-                popMarkers(
-                    v.target.dataset.line?.split(','),
-                    v.target.dataset.alarm?.split(','),
-                    v.target.dataset.key,
-                    v.target.dataset.lnglat?.split(',')
-                )
-            }
-        if (html1)
-            html1.onclick = function (v: any) {
-                popMarkers(
-                    [],
-                    v.target.dataset.alarm?.split(','),
-                    v.target.dataset.key,
-                    v.target.dataset.lnglat?.split(',')
-                )
-            }
-        if (html2)
-            html2.onclick = function (v: any) {
-                popMarkers(
-                    [],
-                    v.target.dataset.alarm?.split(','),
-                    v.target.dataset.key,
-                    v.target.dataset.lnglat?.split(',')
-                )
-            }
-    })
-}
-// 点击弹框调用点加载
-const popMarkers = (coutList: any, alarmList: any, key: any, LngLat: any) => {
-    addMarkers(
-        {
-            coutList: coutList,
-            alarmList: alarmList,
-            type: 1
-        },
-        key,
-        0
-    )
-
-    flyTo(
-        {
-            coordinate: LngLat
-        },
-        8.1
-    )
-}
-
-const locatePositions = (e: any) => {
-    if (map.value != null) {
-        deptIndex.value = e.data.id
-        // 加载点
-        addMarkers()
-
-        powerManageGridMap.value.drillDown({
-            // 判断超高压
-            orgId: e.data.code == '1100F3DE246A6FADE050007F01006CBE' ? '1100F3DE20806FADE050007F01006CBE' : e.data.code,
-            onlyDisplay: true
-        })
-    }
-}
-// 电网查询功能
-const DeviceQ = () => {
-    showCollapse.value = true
-    if (inputQuery.value.length == 0) return
-
-    let list = []
-    // linList.value
-    DeviceQuery.value.queryDeviceByName(
-        {
-            orgId: orgId.value,
-            maxRecord: 9999,
-            keyword: inputQuery.value,
-            devTypes: [
-                {
-                    devType: 'zf05',
-                    distribution: 1
-                },
-                {
-                    devType: 'zf01',
-                    distribution: 1
-                },
-                {
-                    devType: 'zf02',
-                    distribution: 1
-                },
-                {
-                    devType: 'zf03',
-                    distribution: 1
-                },
-                {
-                    devType: 'zf04',
-                    distribution: 1
-                }
-            ]
-        },
-        (res: any) => {
-            list = res.result.psrDataList.map((item: any) => {
-                item.psrName = item.psrList[0].psrTypeName
-                return item
-            })
-            let regex = new RegExp(inputQuery.value, 'i')
-            let data = linList.value
-                .filter((item: any) => regex.test(item.properties.name))
-                .map((item: any) => {
-                    return {
-                        psrName: item.properties.name,
-                        vlevelName: item.properties.list.voltageScale,
-                        maintOrgName: item.properties.list.gdName,
-                        coordinate: [item.properties.list.lng, item.properties.list.lat]
-                    }
-                })
-            // data.replace(//s/g,',')
-
-            // data
-            if (data.length > 0) {
-                list.push({
-                    count: data.length,
-                    psrList: data,
-                    psrName: '监测点'
-                })
-            }
-            QueryList.value = list
-            showWrap.value = true
-        }
-    )
-}
-// 搜索信息定位
-const flyTo = (row: any, zoom?: number) => {
-    if (!map.value) return
-    colorKey.value = row.coordinate
-    map.value.flyTo({
-        center:
-            typeof row.coordinate === 'string'
-                ? narimap.Projection.mercatorToWgs84(row.coordinate.split(' ').map(Number))
-                : row.coordinate, // 位置，飞行后的地图中心点
-        zoom: zoom || 16, // 飞行后的地图缩放级别
-        bearing: 0, // 地图的旋转角度，0-360之间的数字，0表示正北，90表示正东
-        pitch: 0, // 地图的倾斜角，介于0-60之间的数字，0表示俯视视图，60表示垂直视图
-        speed: 2 // 地图视图移动速度
-    })
-}
-
-// 添加地图选择
-const createMapSelectorComponent = () => {
-    const mapSelector = new narimap.Components.MapSelector();
-
-    mapSelector.init(
-        map.value,
-        // ['sjBase', 'sjDark'],
-        // [
-        //     {
-        //         styleKey: 'sjRaster',
-        //         styleName: '影像图',
-        //         styleUrl: narimap.Config.styles.sjRaster,
-        //         // styleIcon: WebGIS.Config.apiRoot + 'libs/webgis/images/map/map_sjRasterStyle.png'
-        //     }
-        // ]
-    )
-}
-
-defineExpose({ locatePositions, addMarkers, grids, DeviceQ, radiusPop, flyTo })
-const height = mainHeight(20)
-</script>
-
-<style lang="scss" scoped>
-@use '@/views/pqs/qualityInspeection/panorama/components/style/map.scss';
-</style>
+<template>
+    <DatePicker ref="datePickerRef" theCurrentTime style="display: none" />
+    <div id="map" style="width: 100%; height: 100%" v-show="prop.lineInfo"></div>
+    <div id="nrDeviceCard"></div>
+    <!-- 搜索框 -->
+    <div class="query-box-wrap">
+        <el-input
+            v-model.trim="inputQuery"
+            style="height: 46px; width: 334px"
+            @keyup.enter="DeviceQ"
+            placeholder="请输入终端名称"
+        >
+            <template #prefix>
+                <div class="Icon"></div>
+            </template>
+
+            <template #suffix>
+                <el-icon @click="DeviceQ" class="el-input__icon"><Search /></el-icon>
+            </template>
+        </el-input>
+    </div>
+    <!-- 搜索内容展示 -->
+    <div class="query-box-wrap collapse" v-show="showWrap">
+        <div v-if="QueryList.length == 0" class="collapse_none">查询无结果</div>
+        <el-collapse v-if="QueryList.length > 0 && showCollapse" v-model="activeName" accordion>
+            <el-collapse-item v-for="(item, i) in QueryList" :name="i">
+                <template #title>
+                    {{ item.psrName }}
+                    <span class="ml10" style="color: #0d867f">{{ item.count }}</span>
+                </template>
+                <div class="collapseBox">
+                    <div
+                        class="group-list__item"
+                        :style="colorKey == k.coordinate ? 'background-color: #009ea81a;' : ''"
+                        v-for="k in item.psrList"
+                        @click="flyTo(k)"
+                    >
+                        <p>{{ k.psrName }}</p>
+                        <p>{{ k.vlevelName }}|{{ k.maintOrgName }}</p>
+                    </div>
+                </div>
+            </el-collapse-item>
+        </el-collapse>
+        <div
+            v-if="QueryList.length > 0 && !showCollapse"
+            class="collapse_none"
+            style="color: #009ea8"
+            @click="showCollapse = true"
+        >
+            展开搜索结果
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { onMounted, reactive, ref, nextTick } from 'vue'
+import { mainHeight } from '@/utils/layout'
+import { useDictData } from '@/stores/dictData'
+// import { devicesDemo } from '@/assets/panorama/devicesDemo.js'
+import { getAreaLineInfo } from '@/api/event-boot/areaInfo'
+import DatePicker from '@/components/form/datePicker/index.vue'
+import { getGridDiagramAreaData } from '@/api/device-boot/panorama'
+import { Search } from '@element-plus/icons-vue'
+import '@/assets/panorama/narimap.css'
+import '@/assets/panorama/nrgisCommon.css'
+const emit = defineEmits(['changeValue', 'drop', 'show'])
+const prop = defineProps({
+    lineInfo: {
+        type: Boolean
+    }
+})
+const inputQuery: any = ref('')
+const activeName: any = ref(0)
+const narimap = window?.narimap
+const dictData = useDictData()
+const datePickerRef = ref()
+const form: any = ref({})
+const colorKey = ref('')
+const PopKey = ref(2)
+const assessList: any = ref([])
+const linList: any = ref([])
+const QueryList: any = ref([])
+const AreaData: any = ref([])
+const map: any = ref(null)
+const showCollapse: any = ref(true)
+const showWrap: any = ref(false)
+const deviceCard: any = ref(null)
+const popup: any = ref(null)
+const DeviceQuery: any = ref(null)
+const rPopList: any = ref([])
+const powerManageGridMap: any = ref(null)
+const orgId = ref(dictData.state.area[0].code)
+const deptIndex = ref(dictData.state.area[0].id)
+const popupOffsets = ref({
+    top: [0, 0],
+    'top-left': [0, 0],
+    'top-right': [0, 0],
+    bottom: [0, -10],
+    'bottom-left': [25, -35],
+    'bottom-right': [-25, -35],
+    left: [10, -10],
+    right: [-10, -10]
+})
+const mapList: any = ref([])
+const flag = ref(true)
+const LngLat = [
+    {
+        name: '唐山',
+        LngLat: [118.335849137, 39.7513593355]
+    },
+    {
+        name: '张家口',
+        LngLat: [115.032504679, 40.8951549951]
+    },
+    {
+        name: '秦皇岛',
+        LngLat: [119.185113833, 40.1179119754]
+    },
+    {
+        name: '承德',
+        LngLat: [117.548498365, 41.3775890632]
+    },
+    {
+        name: '廊坊',
+        LngLat: [116.628004129, 39.0589378611]
+    }
+]
+import { getAssessOverview } from '@/api/device-boot/panorama'
+
+narimap.Require(['PSRMap', 'Thematic','ManageGrid', 'Components.Query','Components.MapSelector', 'Components.RegionSelector'], () => {
+    if (narimap.Config.examples.notlogin) {
+        initMap(narimap.Config.styles.sjRaster)
+    } else {
+        //电网GIS地图服务登录
+        narimap.SGAuth.login()
+            .then((result: any) => {
+                if (result.success) {
+                    console.log('登录成功')
+                } else {
+                    console.log('登录失败', result)
+                }
+
+                //默认打开电网GIS影像图
+                initMap(narimap.Config.styles.sjRaster)
+            })
+            .catch((err: any) => {
+                console.log('错误', err)
+            })
+    }
+})
+function initMap(styleurl: any) {
+    map.value = new narimap.Map({
+        container: 'map',
+        style: styleurl,
+        zoom: 6,
+        center: [116.478935, 39.997761],
+        controls: false,
+        country: true,
+        // 地图默认字体
+        localIdeographFontFamily: 'Microsoft YoHei'
+    })
+    map.value.on('load', () => {
+        createMapSelectorComponent()
+        DeviceQuery.value = new narimap.ResourceQuery.DeviceQuery()
+        addLayer()
+
+        nextTick(() => {
+            // 添加图层
+            Query()
+        })
+    })
+}
+
+const Query = () => {
+    // 添加行政区划
+    powerManageGridMap.value = new narimap.ManageGrid.PowerManageGridMap(map.value)
+    powerManageGridMap.value.init(
+        {
+            base: {
+                outline: {
+                    paint: {
+                        'line-color': '#0D867F',
+                        'line-width': 1,
+                        'line-opacity': 1
+                    }
+                },
+                fill: {
+                    paint: {
+                        'fill-color': '#0D867F',
+                        'fill-opacity': 0.3
+                    }
+                },
+                label: {
+                    paint: {
+                        'text-color': '#063094',
+                        'text-halo-color': '#ffffff',
+                        'text-halo-width': 1
+                    }
+                },
+                hover: {
+                    type: 'all',
+                    fill: {
+                        paint: {
+                            'fill-color': 'rgba(1,1,1,0)',
+                            'fill-opacity': 0
+                        }
+                    },
+                    outline: {
+                        paint: {
+                            'line-color': '#0D867F',
+                            'line-width': 4,
+                            'line-opacity': 1
+                        }
+                    }
+                }
+            },
+            levels: {
+                city: {
+                    // minzoom: 10,
+                    maxzoom: 9
+                }
+            }
+        },
+        {
+            initOrgIds: [orgId.value],
+            //是否联级，包含下属全部子部门，即同样显示编码对应的所属下级
+            cascade: true
+        }
+    )
+    powerManageGridMap.value.on('load', function () {
+        powerLoad()
+    })
+
+    setTimeout(() => {
+        addLine()
+        // const query = new narimap.Components.Query(map.value)
+        // query.init(map.value.getContainer())
+        // query.setQueryOrgId(orgId.value)
+
+        setTimeout(() => {
+            locatePositions({ data: dictData.state.area[0] })
+        }, 500)
+    }, 500)
+}
+
+// 添加变电站线路
+const addLine = () => {
+    //添加电网图层
+    let psrmap = new narimap.PSRMap(map.value, {
+        orgId: orgId.value == '1100F3DE20806FADE050007F01006CBE' ? '' : orgId.value
+    })
+    psrmap.addPSR()
+
+    initDeviceCard()
+    setTimeout(() => {
+        psrmap.filterByDomain(1)
+    }, 0)
+    //添加电网要素点击事件
+    psrmap.on('click', (features: any) => {
+        console.log(features)
+        showCollapse.value = false
+        if (inputQuery.value.length == 0) showWrap.value = false
+    })
+}
+
+// 添加变电站弹框
+const initDeviceCard = () => {
+    deviceCard.value && deviceCard.value.close()
+
+    let options = {
+        map: map.value, // map实例
+        container: 'nrDeviceCard', // details容器id，为用户自定义的容器名
+        narimap: narimap, //nariMap实例
+        //用户自定义功能
+        customButtons: {
+            popupButtons: {
+                buttons: []
+            },
+            detailsButtons: {
+                buttons: []
+            }
+        }
+    }
+
+    deviceCard.value = new nrgisCommon.EquipmentAccount.DeviceCard(options)
+    deviceCard.value.on('click', (res: any) => {
+        if (res.button.id == 'nariPopupViewDetail') {
+            emit('show', true)
+        }
+        setTimeout(() => {
+            document.querySelectorAll('.nari-tabs__close')[0].onclick = function (v: any) {
+                emit('show', false)
+            }
+        }, 10)
+    })
+    //
+}
+
+const grids = (row: any) => {
+    form.value = {
+        ...row,
+        id: row.orgNo,
+        deptIndex: row.orgNo,
+        orgId: row.orgNo,
+        ids: [],
+        statisticalType: dictData.getBasicData('Statistical_Type', ['Report_Type'])[0],
+        isUpToGrid: row.isUpToGrid,
+        monitorFlag: row.isUpToGrid == 0 ? null : row.isUpToGrid
+    }
+
+    // 综合评估
+    getAssessOverview(form.value).then(res => {
+        assessList.value = res.data?.children
+
+        getGridDiagramAreaData({ ...form.value, deptIndex: deptIndex.value }).then((res: any) => {
+            AreaData.value = res.data
+            GridDiagramArea()
+        })
+        if (powerManageGridMap.value) powerLoad()
+    })
+}
+
+// 加载行政区划
+const powerLoad = () => {
+    // dictData.state.area[0]
+
+    let colors: any = [
+        {
+            orgIds: [],
+            outline: {
+                color: '#fff'
+            },
+            fill: {
+                color: '#00b07d'
+            }
+        },
+        {
+            orgIds: [],
+            outline: {
+                color: '#fff'
+            },
+            fill: {
+                color: '#3399ff'
+            }
+        },
+        {
+            orgIds: [],
+            outline: {
+                color: '#fff'
+            },
+            fill: {
+                color: '#ffcc33'
+            }
+        },
+        {
+            orgIds: [],
+            outline: {
+                color: '#fff'
+            },
+            fill: {
+                color: '#db0887'
+            }
+        },
+        {
+            orgIds: [],
+            outline: {
+                color: '#fff'
+            },
+            fill: {
+                color: '#ff0000'
+            }
+        }
+    ]
+
+    assessList.value.forEach((item: any) => {
+        if (item.score == 3.14159) {
+        } else if (item.score > 4.5) {
+            colors[0].orgIds.push(item.code)
+        } else if (item.score > 4) {
+            colors[1].orgIds.push(item.code)
+        } else if (item.score > 3) {
+            colors[2].orgIds.push(item.code)
+        } else if (item.score > 2) {
+            colors[3].orgIds.push(item.code)
+        } else if (item.score > 0) {
+            colors[4].orgIds.push(item.code)
+        }
+    })
+
+    powerManageGridMap.value.setColorByOrgId({
+        orgIdColors: colors
+    })
+}
+// 添加图层
+const addLayer = () => {
+    map.value.loadImage(
+        new URL('@/assets/txzcwzj.png', import.meta.url).href, // 图片地址
+        (error: any, image: any) => {
+            if (error) throw error
+
+            //添加图片到map，第一个参数为图片设置id
+            map.value.addImage('poi1', image)
+            map.value.addLayer({
+                id: 'spotImg-ZY',
+                type: 'symbol',
+                minzoom: 8,
+                source: {
+                    type: 'geojson',
+                    data: {
+                        type: 'FeatureCollection',
+                        features: []
+                    }
+                },
+                layout: {
+                    // 为图层设置引用的图片ID
+                    'icon-image': 'poi1',
+                    'icon-size': 0.7,
+                    'icon-ignore-placement': false,
+                    'icon-allow-overlap': false
+                }
+            })
+            map.value.addLayer({
+                id: 'spotName',
+                type: 'symbol',
+                minzoom: 10,
+                source: {
+                    type: 'geojson',
+                    data: {
+                        type: 'FeatureCollection',
+                        features: []
+                    }
+                },
+                layout: {
+                    // 为图层设置引用的图片ID
+
+                    'text-field': '{name}',
+                    'icon-ignore-placement': false,
+                    'text-ignore-placement': true,
+                    'text-size': 12,
+                    'text-max-width': 8,
+                    'text-offset': [0, 2],
+                    'text-font': ['Microsoft YaHei Regular']
+                },
+                paint: {
+                    'text-color': '#ccc',
+
+                    'text-halo-width': 1.33333
+                }
+            })
+        }
+    )
+
+    map.value.loadImage(
+        new URL('@/assets/txzdwzj.png', import.meta.url).href, // 图片地址
+        (error: any, image: any) => {
+            if (error) throw error
+
+            //添加图片到map，第一个参数为图片设置id
+            map.value.addImage('poi2', image)
+            map.value.addLayer({
+                id: 'spotImg-TY',
+                type: 'symbol',
+                minzoom: 8,
+                source: {
+                    type: 'geojson',
+
+                    data: {
+                        type: 'FeatureCollection',
+                        features: []
+                    }
+                },
+                layout: {
+                    // 为图层设置引用的图片ID
+                    'icon-image': 'poi2',
+                    'icon-size': 0.7,
+                    // 'text-field': '{name}',
+                    'icon-ignore-placement': false,
+                    'icon-allow-overlap': false
+                }
+            })
+        }
+    )
+    map.value.loadImage(
+        new URL('@/assets/point.png', import.meta.url).href, // 图片地址
+        (error: any, image: any) => {
+            if (error) throw error
+
+            //添加图片到map，第一个参数为图片设置id
+            map.value.addImage('poi3', image)
+            map.value.addLayer({
+                id: 'spotImg-GJ',
+                type: 'symbol',
+                minzoom: 8,
+                source: {
+                    type: 'geojson',
+                    data: {
+                        type: 'FeatureCollection',
+                        features: []
+                    }
+                },
+                layout: {
+                    // 为图层设置引用的图片ID
+                    'icon-image': 'poi3',
+                    'icon-size': 0.6,
+                    'icon-ignore-placement': false,
+                    'icon-allow-overlap': false
+                },
+                Paint: {
+                    'icon-opacity': 10
+                }
+            })
+        }
+    )
+    map.value.loadImage(
+        new URL('@/assets/dw.png', import.meta.url).href, // 图片地址
+        (error: any, image: any) => {
+            if (error) throw error
+
+            //添加图片到map，第一个参数为图片设置id
+            map.value.addImage('poi4', image)
+            map.value.addLayer({
+                id: 'spotImg-DW',
+                type: 'symbol',
+                minzoom: 8,
+                zIndex: 9999,
+                source: {
+                    type: 'geojson',
+
+                    data: {
+                        type: 'FeatureCollection',
+                        features: []
+                    }
+                },
+                layout: {
+                    // 为图层设置引用的图片ID
+                    'icon-image': 'poi4',
+                    'icon-size': 0.35,
+                    // 'text-field': '{name}',
+                    'icon-ignore-placement': false,
+                    'icon-allow-overlap': false
+                }
+            })
+        }
+    )
+    // 添加地图弹框
+    map.value.on('click', (e: any) => {
+        const features = map.value.queryRenderedFeatures(e.point, {
+            layers: ['spotImg-ZY', 'spotImg-TY', 'spotImg-GJ', 'spotImg-DW']
+        })
+
+        if (features.length > 0) {
+            popup.value && popup.value.remove()
+            setTimeout(() => {
+                deviceCard.value.popup && deviceCard.value.popup.remove()
+            }, 10)
+            let data = JSON.parse(features[0].properties.list)
+
+            popup.value = new narimap.Popup({ offset: popupOffsets.value, className: 'my-popup' })
+                .setLngLat([data.lng, data.lat])
+                .setHTML(
+                    ` <div class="popup-box">
+                        <div class="popup_content">
+                            <img src="${data.imageUrl}" />
+                            <div>
+                                <div style="display: flex">
+                                    <span class="title">${data.lineName}</span>
+                                    <span
+                                        class="state"
+                                        style="background-color: ${data.comFlag == 0 ? '#ff0000' : '#3ab34a'};"
+                                    >
+                                        ${data.comFlag == 0 ? '中断' : '在线'}
+                                    </span>
+                                </div>
+                                <div class="info">
+                                    <span>${data.subName} </span>
+                                    <span>${data.voltageName}</span>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="popup_footer">
+                            <span id="ids" data-sid="${data.lineId}">
+                                查看详情
+                            </span>
+                        </div>
+                    </div>`
+                )
+                .addTo(map.value)
+            let html = document.getElementById('ids')
+            if (html)
+                html.onclick = function (v: any) {
+                    // console.log(e.target.dataset.sid)
+                    emit('drop', v.target.dataset.sid)
+                }
+        }
+    })
+
+    // 监听地图缩放完成事件
+    map.value.on('zoomend', (e: any) => {
+        // console.log(123, map.value.getCenter())
+
+        if (map.value.getZoom() > 8.5 || map.value.getZoom() < 6) {
+            rPopList.value.map((item: any) => item.remove())
+            rPopList.value = []
+        } else {
+            if (mapList.value.length > 0) radiusPop()
+        }
+    })
+}
+//添加多个监测点
+const addMarkers = async (row?: any, key?: any, num?: any) => {
+    if (map.value == null) return
+    let params = {
+        deptIndex: deptIndex.value,
+        monitorFlag: 2,
+        powerFlag: 2,
+        searchBeginTime: datePickerRef.value.timeValue[0],
+        searchEndTime: datePickerRef.value.timeValue[1],
+        serverName: 'event-boot',
+        statisticalType: {},
+        ...row
+    }
+
+    let { data } = await getAreaLineInfo(params)
+
+    let r = 0.0035
+    let tempFeatureZ: any = []
+    let tempFeatureT: any = []
+    data.forEach((item: any) => {
+        if (item.children.length > 10 && item.children.length < 100) {
+            r = 0.0055
+        } else if (item.children.length >= 100) {
+            r = 0.01055
+        }
+
+        item.children.forEach((val: any, i: number) => {
+            val.lng = item.lng + r * Math.cos((2 * Math.PI * i) / item.children.length)
+            val.lat = item.lat + r * Math.sin((2 * Math.PI * i) / item.children.length)
+            val.imageUrl =
+                val.comFlag == 0
+                    ? new URL('@/assets/txzdwzj.png', import.meta.url).href
+                    : new URL('@/assets/txzcwzj.png', import.meta.url).href
+            // // 监测点图标
+
+            let tempFeature = {
+                type: 'Feature',
+
+                geometry: {
+                    type: 'Point',
+                    coordinates: [val.lng, val.lat]
+                },
+                properties: {
+                    name: val.lineName,
+                    list: val
+                }
+            }
+            if (key == 1) {
+                switch (val.type) {
+                    case 0:
+                        tempFeatureZ.push(tempFeature)
+
+                        break
+                    case 1:
+                        tempFeatureT.push(tempFeature)
+                        break
+                }
+            } else {
+                switch (val.comFlag) {
+                    case 0:
+                        tempFeatureT.push(tempFeature)
+                        break
+                    case 1:
+                        tempFeatureZ.push(tempFeature)
+                        break
+                }
+            }
+        })
+    })
+
+    if (flag.value) {
+        linList.value = [...tempFeatureZ, ...tempFeatureT]
+
+        flag.value = false
+    }
+    //    清除图层图片
+    map.value.getSource('spotImg-ZY').setData({
+        type: 'FeatureCollection',
+        features: []
+    })
+    map.value.getSource('spotImg-TY').setData({
+        type: 'FeatureCollection',
+        features: []
+    })
+    map.value.getSource('spotImg-GJ').setData({
+        type: 'FeatureCollection',
+        features: []
+    })
+    map.value.getSource('spotImg-DW').setData({
+        type: 'FeatureCollection',
+        features: []
+    })
+    if (key != undefined && num == undefined) map.value.easeTo({ zoom: 8.1 })
+
+    if (key == undefined) {
+        map.value.getSource('spotImg-DW').setData({
+            type: 'FeatureCollection',
+            features: [...tempFeatureT, ...tempFeatureZ]
+        })
+    } else if (key == 1) {
+        map.value.getSource('spotImg-ZY').setData({
+            type: 'FeatureCollection',
+            features: tempFeatureZ
+        })
+        map.value.getSource('spotImg-TY').setData({
+            type: 'FeatureCollection',
+            features: tempFeatureT
+        })
+    } else {
+        map.value.getSource('spotImg-ZY').setData({
+            type: 'FeatureCollection',
+            features: [...tempFeatureZ, ...tempFeatureT]
+        })
+        // map.value.getSource('spotImg-TY').setData({
+        //     type: 'FeatureCollection',
+        //     features: tempFeatureT
+        // })
+    }
+
+    // console.log('🚀 ~ addMarkers ~  map.value.getStyle().layers:', map.value.getStyle().layers)
+    const layers = map.value.getStyle().layers
+    const topLayer = layers[layers.length - 1]
+    map.value.moveLayer('spotImg-DW', topLayer.id)
+    map.value.moveLayer('spotImg-ZY', topLayer.id)
+    map.value.moveLayer('spotImg-TY', topLayer.id)
+    map.value.moveLayer('spotImg-GJ', topLayer.id)
+
+    map.value.getSource('spotName').setData({
+        type: 'FeatureCollection',
+        features: [...tempFeatureT, ...tempFeatureZ]
+    })
+}
+// 统计弹框数据
+const GridDiagramArea = () => {
+    LngLat.forEach((item: any) => {
+        assessList.value.forEach((y: any) => {
+            if (item.name == y.name) {
+                if (y.score == 3.14159) {
+                } else if (y.score > 4.5) {
+                    item.background = '#33996699'
+                } else if (y.score > 4) {
+                    item.background = '#3399ff99'
+                } else if (y.score > 3) {
+                    item.background = '#ffcc3399'
+                } else if (y.score > 2) {
+                    item.background = '#db088799'
+                } else if (y.score > 0) {
+                    item.background = '#ff000099'
+                }
+            }
+        })
+
+        AreaData.value.forEach((k: any, i: any) => {
+            if (item.name == k.orgName) {
+                k.LngLat = item.LngLat
+                k.background = item.background
+            }
+        })
+    })
+    mapList.value = AreaData.value.filter((item: any) => item.orgName != '超高压' && item.orgName != '风光储')
+    setTimeout(() => {
+        radiusPop()
+    }, 0)
+}
+// 添加统计弹框
+const radiusPop = (k?: number) => {
+    if (k != undefined) PopKey.value = k
+    if (rPopList.value.length > 0) {
+        rPopList.value.map((item: any) => item.remove())
+        rPopList.value = []
+    }
+
+    mapList.value.forEach((item: any, i: number) => {
+        let infoText = ''
+
+        if (PopKey.value == 2) {
+            // 监测点
+            infoText = `<img src="${new URL(`@/assets/img/JCD-ZS.png`, import.meta.url)}" />
+                        <div class="infoBox">
+                            <div   id="clickZs${i}" data-line="${item.lineList}" data-alarm="${
+                item.alarmList
+            }" data-key="0" data-LngLat="${item.LngLat}">总数<br/>${item.lineNum}</div>
+                            <div id="clickZx${i}"  data-alarm="${item.onlineList}" data-key="0" data-LngLat="${
+                item.LngLat
+            }">在线<br/>${item.onlineNum}</div>
+                            <div id="clickGj${i}" data-line="" data-alarm="${
+                item.alarmList
+            }" data-key="1" data-LngLat="${item.LngLat}">告警<br/>${item.alarm}</div>
+                        </div>`
+        } else if (PopKey.value == 0) {
+            // 变电站
+            infoText = `<img src="${new URL(`@/assets/img/BDZ-ZS.png`, import.meta.url)}" />
+                        <div class="infoBox">
+                            <div id="clickZs${i}" data-line="${item.lineList}" data-alarm="${
+                item.alarmSubList
+            }" data-key="1" data-LngLat="${item.LngLat}">总数<br/>${item.subNum}</div>
+                            <div id="clickGj${i}" data-line="" data-alarm="${
+                item.alarmSubList
+            }" data-key="1" data-LngLat="${item.LngLat}">告警<br/>${item.alarmSubNum}</div>
+                        </div>`
+        } else if (PopKey.value == 1) {
+            // 终端
+            infoText = `<img src="${new URL(`@/assets/img/ZD-ZS.png`, import.meta.url)}" />
+                        <div class="infoBox">
+                            <div id="clickZs${i}" data-line="${item.lineList}" data-alarm="${
+                item.onlineList
+            }" data-key="2" data-LngLat="${item.LngLat}">总数<br/>${item.deviceNum}</div>
+                            <div id="clickGj${i}" data-line="" data-alarm="${
+                item.onlineList
+            }" data-key="2" data-LngLat="${item.LngLat}">在运<br/>${item.onDevice}</div>
+                        </div>`
+        }
+
+        let pop = new narimap.Popup({
+            offset: popupOffsets.value,
+            className: 'my-radiusPop',
+            closeButton: false,
+            closeOnClick: false
+        })
+            .setLngLat(item.LngLat)
+            .setHTML(
+                `<div class="sgmap-popup-content" style="background-color: ${item.background};">
+                    <div style="display: flex;">` +
+                    infoText +
+                    ` </div>
+                </div>`
+            )
+            .addTo(map.value)
+        rPopList.value.push(pop)
+        let html: any = document.getElementById(`clickZs${i}`)
+        let html1: any = document.getElementById(`clickZx${i}`)
+        let html2: any = document.getElementById(`clickGj${i}`)
+        if (html)
+            html.onclick = function (v: any) {
+                popMarkers(
+                    v.target.dataset.line?.split(','),
+                    v.target.dataset.alarm?.split(','),
+                    v.target.dataset.key,
+                    v.target.dataset.lnglat?.split(',')
+                )
+            }
+        if (html1)
+            html1.onclick = function (v: any) {
+                popMarkers(
+                    [],
+                    v.target.dataset.alarm?.split(','),
+                    v.target.dataset.key,
+                    v.target.dataset.lnglat?.split(',')
+                )
+            }
+        if (html2)
+            html2.onclick = function (v: any) {
+                popMarkers(
+                    [],
+                    v.target.dataset.alarm?.split(','),
+                    v.target.dataset.key,
+                    v.target.dataset.lnglat?.split(',')
+                )
+            }
+    })
+}
+// 点击弹框调用点加载
+const popMarkers = (coutList: any, alarmList: any, key: any, LngLat: any) => {
+    addMarkers(
+        {
+            coutList: coutList,
+            alarmList: alarmList,
+            type: 1
+        },
+        key,
+        0
+    )
+
+    flyTo(
+        {
+            coordinate: LngLat
+        },
+        8.1
+    )
+}
+
+const locatePositions = (e: any) => {
+    if (map.value != null) {
+        deptIndex.value = e.data.id
+        // 加载点
+        addMarkers()
+
+        powerManageGridMap.value.drillDown({
+            // 判断超高压
+            orgId: e.data.code == '1100F3DE246A6FADE050007F01006CBE' ? '1100F3DE20806FADE050007F01006CBE' : e.data.code,
+            onlyDisplay: true
+        })
+    }
+}
+// 电网查询功能
+const DeviceQ = () => {
+    showCollapse.value = true
+    if (inputQuery.value.length == 0) return
+
+    let list = []
+    // linList.value
+    DeviceQuery.value.queryDeviceByName(
+        {
+            orgId: orgId.value,
+            maxRecord: 9999,
+            keyword: inputQuery.value,
+            devTypes: [
+                {
+                    devType: 'zf05',
+                    distribution: 1
+                },
+                {
+                    devType: 'zf01',
+                    distribution: 1
+                },
+                {
+                    devType: 'zf02',
+                    distribution: 1
+                },
+                {
+                    devType: 'zf03',
+                    distribution: 1
+                },
+                {
+                    devType: 'zf04',
+                    distribution: 1
+                }
+            ]
+        },
+        (res: any) => {
+            list = res.result.psrDataList.map((item: any) => {
+                item.psrName = item.psrList[0].psrTypeName
+                return item
+            })
+            let regex = new RegExp(inputQuery.value, 'i')
+            let data = linList.value
+                .filter((item: any) => regex.test(item.properties.name))
+                .map((item: any) => {
+                    return {
+                        psrName: item.properties.name,
+                        vlevelName: item.properties.list.voltageScale,
+                        maintOrgName: item.properties.list.gdName,
+                        coordinate: [item.properties.list.lng, item.properties.list.lat]
+                    }
+                })
+            // data.replace(//s/g,',')
+
+            // data
+            if (data.length > 0) {
+                list.push({
+                    count: data.length,
+                    psrList: data,
+                    psrName: '监测点'
+                })
+            }
+            QueryList.value = list
+            showWrap.value = true
+        }
+    )
+}
+// 搜索信息定位
+const flyTo = (row: any, zoom?: number) => {
+    if (!map.value) return
+    colorKey.value = row.coordinate
+    map.value.flyTo({
+        center:
+            typeof row.coordinate === 'string'
+                ? narimap.Projection.mercatorToWgs84(row.coordinate.split(' ').map(Number))
+                : row.coordinate, // 位置，飞行后的地图中心点
+        zoom: zoom || 16, // 飞行后的地图缩放级别
+        bearing: 0, // 地图的旋转角度，0-360之间的数字，0表示正北，90表示正东
+        pitch: 0, // 地图的倾斜角，介于0-60之间的数字，0表示俯视视图，60表示垂直视图
+        speed: 2 // 地图视图移动速度
+    })
+}
+
+// 添加地图选择
+const createMapSelectorComponent = () => {
+    const mapSelector = new narimap.Components.MapSelector();
+
+    mapSelector.init(
+        map.value,
+        // ['sjBase', 'sjDark'],
+        // [
+        //     {
+        //         styleKey: 'sjRaster',
+        //         styleName: '影像图',
+        //         styleUrl: narimap.Config.styles.sjRaster,
+        //         // styleIcon: WebGIS.Config.apiRoot + 'libs/webgis/images/map/map_sjRasterStyle.png'
+        //     }
+        // ]
+    )
+}
+
+defineExpose({ locatePositions, addMarkers, grids, DeviceQ, radiusPop, flyTo })
+const height = mainHeight(20)
+</script>
+
+<style lang="scss" scoped>
+@use '@/views/pqs/qualityInspeection/panorama/components/style/map.scss';
+</style>