同步现场电网一张图代码代码

src/api/device-boot/panorama.ts

@@ -127,24 +127,21 @@ export function getTotalOnlineRates(data: any) {
 }
 //监测点稳态指标合格率详情
 export function lineQualifiedDetail(data: any) {
-    return request({ url: '/harmonic-boot/grid/lineQualifiedDetail', method: 'post', params:data })
+    return request({ url: '/harmonic-boot/grid/lineQualifiedDetail', method: 'post', params: data })
 }
 //监测点评估
 export function getLineAssess(data: any) {
-    return request({ url: '/harmonic-boot/grid/getLineAssess', method: 'post',  params:data })
+    return request({ url: '/harmonic-boot/grid/getLineAssess', method: 'post', params: data })
 }
 //根据监测点获取暂态短时中断和暂态赞升暂降
 export function getEventDetailByLineId(data: any) {
-    return request({ url: '/event-boot/gridDiagram/getEventDetailByLineId', method: 'post',  data })
+    return request({ url: '/event-boot/gridDiagram/getEventDetailByLineId', method: 'post', data })
+}
+//区域基本信息(监测点，终端，变电站等)
+export function getGridDiagramAreaData(data: any) {
+    return request({ url: '/harmonic-boot/gridDiagram/getGridDiagramAreaData', method: 'post', data })
+}
+//监测点告警越线天数详细信息
+export function getGridDiagramTargetData(data: any) {
+    return request({ url: '/harmonic-boot/gridDiagram/getGridDiagramTargetData', method: 'post', data })
 }
-
-
-
-
-
-
-
-
-
-
-

src/components/echarts/MyEchart.vue

@@ -154,7 +154,7 @@ const handlerYAxis = () => {
         splitLine: {
             lineStyle: {
                 // 使用深浅的间隔色
-                color: ['#000'],
+                color: ['#ccc'],
                 type: 'dashed',
                 opacity: 0.5
             }

src/utils/request.ts

@@ -61,7 +61,14 @@ function createAxios<Data = any, T = ApiPromise<Data>>(
             // }
             // 取消重复请求
 
-            if (config.url != '/system-boot/file/upload') removePending(config)
+            if (
+                !(
+                    config.url == '/system-boot/file/upload' ||
+                    config.url == '/harmonic-boot/grid/getAssessOverview' ||
+                    config.url == '/harmonic-boot/gridDiagram/getGridDiagramAreaData'
+                )
+            )
+                removePending(config)
 
             options.CancelDuplicateRequest && addPending(config)
             // 创建loading实例

src/views/pqs/qualityInspeection/panorama/components/cityMapL.vue

@@ -17,11 +17,15 @@
                 <div class="title">
                     <span>监测终端状态</span>
                 </div>
-
                 <div style="display: flex" class="mt2">
                     <img src="@/assets/img/FGX.png" />
                 </div>
-                <MyEChart :style="tabHeight" :options="terminalCharts" />
+                <div class="TJTop">
+                    <img src="@/assets/img/TJ.png" />
+                    终端在线率：
+                    <span>{{ onlineRate }}%</span>
+                </div>
+                <MyEChart :style="`height: calc(${tabHeight.height} - 27px)`" :options="terminalCharts" />
             </div>
             <!-- 监测点 -->
             <div :style="boxHeight">
@@ -46,16 +50,19 @@
 
 <script setup lang="ts">
 import { onMounted, reactive, ref, provide } from 'vue'
+
 import MyEChart from '@/components/echarts/MyEchart.vue'
 import { useDictData } from '@/stores/dictData'
 import { mainHeight } from '@/utils/layout'
 
 import { getPracticalRunDeviceInfo, getGridDiagramCityDev, getGridDiagramLineData } from '@/api/device-boot/panorama'
-
+import { useConfig } from '@/stores/config'
+const config = useConfig()
 const dictData = useDictData()
 const height = mainHeight(30)
 const boxHeight = mainHeight(40, 3)
 const tabHeight: any = mainHeight(150, 3)
+const onlineRate = ref(0)
 const show = ref(false)
 const formRow: any = ref({})
 const terminalCharts: any = ref({})
@@ -84,7 +91,7 @@ const info = (row: any) => {
             tooltip: {},
             yAxis: {
                 type: 'value',
-                name:'个'
+                name: '个'
             },
 
             xAxis: {
@@ -124,60 +131,72 @@ const info = (row: any) => {
     })
     // 终端
     getGridDiagramCityDev({ ...form, deviceInfoParam: form, pageNum: 1, pageSize: 1000 }).then(res => {
+        onlineRate.value = res.data[1]
+        let data = [
+            {
+                name: '运行',
+                value: res.data[0] - 0
+            },
+            {
+                name: '检修',
+                value: res.data[2] - 0
+            },
+            {
+                name: '退役',
+                value: res.data[4] - 0
+            }
+        ]
+
         terminalCharts.value = {
             title: {
-                text: ''
+                text: data[0].value + data[1].value + data[2].value,
+                left: '26%',
+                top: '40%',
+                textStyle: {
+                    fontWeight: 600,
+                    fontSize: 16
+                },
+                subtext: '总数',
+                subtextStyle: {
+                    fontWeight: 550,
+                    fontSize: 14
+                }
+            },
+
+            tooltip: {
+                trigger: 'item'
             },
             legend: {
-                show: true,
+                orient: 'vertical',
-                right: 90
+                top: 'center',
+                right: '10%',
+                formatter: function (e: any) {
+                    return e + '   ' + data.filter(item => item.name == e)[0].value + '台'
+                }
             },
             xAxis: {
-                data: ['运行', '检修', '退运']
+                show: false
             },
-            yAxis: [
+            yAxis: {
-                {
+                show: false
-                    name: '个',
-                    type: 'value'
-                },
-                {
-                    type: 'value',
-                    name: '%',
-                    splitLine: {
-                        show: false
-                    },
-                    max: 100
-                }
-            ],
-            grid: {
-                top: '35px',
-                left: '20px',
-                right: '20px'
             },
+            color: [config.layout.elementUiPrimary[0], '#FFBF00', '#FF9100'],
             options: {
                 dataZoom: null,
                 series: [
                     {
-                        name: '终端个数',
+                        type: 'pie',
-                        type: 'bar',
+                        center: ['30%', '50%'],
+                        radius: ['40%', '60%'],
+                        label: {
+                            show: false,
+                            position: 'outside',
+                            textStyle: {
+                                //数值样式
+                            }
+                        },
 
-                        data: [res.data[0], res.data[2], res.data[4]],
+                        data: data
-                        label: {
-                            show: true,
-                            position: 'top',
-                            fontSize: 10
-                        }
-                    },
-                    {
-                        name: '在线率',
-                        type: 'bar',
-                        yAxisIndex: 1,
-                        data: [res.data[1]],
-                        label: {
-                            show: true,
-                            position: 'top',
-                            fontSize: 10
-                        }
                     }
                 ]
             }
@@ -295,4 +314,16 @@ defineExpose({ info, show })
 :deep(.el-table thead) {
     color: #000;
 }
+.TJTop {
+    margin-top: 10px;
+    display: flex;
+    img {
+        height: 1.2rem;
+        width: 1.2rem;
+        margin-right: 5px;
+    }
+    span {
+        color: #2dcd28;
+    }
+}
 </style>

src/views/pqs/qualityInspeection/panorama/components/cityMapR.vue

@@ -32,9 +32,18 @@
                 </div>
                 <div>
                     <div class="monitoringPoints">
-                        <div>在线监测点数：{{ monitorList.onlineNum }}</div>
+                        <div>
-                        <div>超标监测点数：{{ monitorList.overNum }}</div>
+                            <span class="line"></span>
-                        <div>超标监测点占比：{{ monitorList.overRatio }}</div>
+                            在线监测点数：{{ monitorList.onlineNum }}
+                        </div>
+                        <div>
+                            <span class="line"></span>
+                            超标监测点数：{{ monitorList.overNum }}
+                        </div>
+                        <div>
+                            <span class="line"></span>
+                            超标监测点占比：{{ monitorList.overRatio }}
+                        </div>
                     </div>
 
                     <MyEChart :style="`height:calc(${EchHeight.height} + 10px)`" :options="exceededCharts" />
@@ -137,7 +146,8 @@ const exceededRef = ref()
 const formRow: any = ref({})
 const monitorList: any = ref({})
 const statisticsCharts: any = ref({})
-
+import { useConfig } from '@/stores/config'
+const config = useConfig()
 const passingCharts = ref()
 const exceededCharts = ref()
 
@@ -324,8 +334,9 @@ const info = (row: any) => {
         monitorList.value = res.data[0]
         exceededCharts.value = {
             tooltip: {},
+            color: [config.layout.elementUiPrimary[0], '#FFBF00'],
             yAxis: {
-                name: '%',
+                name: '',
                 type: 'value',
                 max: 100
             },
@@ -387,36 +398,70 @@ const info = (row: any) => {
     // 稳态电能质量指标水平评估
 
     getGeneralSituation({ ...form, monitorFlag: form.isUpToGrid == 0 ? 2 : 1 }).then(res => {
+        let data = [
+            {
+                name: '电压暂升',
+                value: res.data[0].upCount - 0
+            },
+            {
+                name: '电压暂降',
+                value: res.data[0].sagsCount - 0
+            },
+            {
+                name: '短时中断',
+                value: res.data[0].breakCount - 0
+            }
+        ]
         statisticsCharts.value = {
-            tooltip: {},
+            title: {
-            yAxis: {
+                text: data[0].value + data[1].value + data[2].value,
-                type: 'value'
+                left: '26%',
-            },
+                top: '40%',
-            legend: {
+                textStyle: {
-                show: false
+                    fontWeight: 600,
-            },
+                    fontSize: 16
-            xAxis: {
+                },
-                type: 'category',
+                subtext: '总数',
-                data: ['电压暂升', '电压暂降', '短时中断']
+                subtextStyle: {
-            },
+                    fontWeight: 550,
-            grid: {
+                    fontSize: 14
-                top: '30px',
+                }
-                left: '10px',
-                right: '20px'
             },
 
+            tooltip: {
+                trigger: 'item'
+            },
+            legend: {
+                orient: 'vertical',
+                top: 'center',
+                right: '10%',
+                formatter: function (e: any) {
+                    return e + '   ' + data.filter(item => item.name == e)[0].value + '条'
+                }
+            },
+            xAxis: {
+                show: false
+            },
+            yAxis: {
+                show: false
+            },
+            color: [config.layout.elementUiPrimary[0], '#FFBF00', '#FF9100'],
             options: {
                 dataZoom: null,
                 series: [
                     {
-                        name: '暂态个数',
+                        type: 'pie',
-                        type: 'bar',
+                        center: ['30%', '50%'],
-                        data: [res.data[0].upCount, res.data[0].sagsCount, res.data[0].breakCount],
+                        radius: ['50%', '70%'],
                         label: {
-                            show: true,
+                            show: false,
-                            position: 'top',
+                            position: 'outside',
-                            fontSize: 10
+                            textStyle: {
-                        }
+                                //数值样式
+                            }
+                        },
+
+                        data: data
                     }
                 ]
             }
@@ -553,5 +598,14 @@ defineExpose({ info, show })
     grid-template-columns: 1fr 1fr 1fr;
     margin-top: 10px;
     margin-bottom: 10px;
+    .line {
+        display: inline-block;
+        width: 0.5rem;
+        height: 0.5rem;
+        border-radius: 0.25rem;
+        background: var(--el-color-primary);
+        margin-right: 2px;
+        margin-bottom: 1px;
+    }
 }
 </style>

src/views/pqs/qualityInspeection/panorama/components/line/info.vue

@@ -13,20 +13,59 @@
                     台账信息
                 </h3>
                 <el-descriptions title="" border :column="2">
-                    <el-descriptions-item label="监测点名称">{{ dropList.lineName }}</el-descriptions-item>
+                    <el-descriptions-item label="监测点名称" width="140px">
+                        {{ dropList.lineName }}
+                    </el-descriptions-item>
                     <el-descriptions-item label="所属厂家">{{ dropList.manufacturer }}</el-descriptions-item>
                     <el-descriptions-item label="电压等级">{{ dropList.scale }}</el-descriptions-item>
                     <el-descriptions-item label="投运日期">{{ dropList.loginTime }}</el-descriptions-item>
                     <el-descriptions-item label="PT">{{ dropList.pt }}</el-descriptions-item>
                     <el-descriptions-item label="CT">{{ dropList.ct }}</el-descriptions-item>
                     <el-descriptions-item label="干扰源类型">{{ dropList.loadType }}</el-descriptions-item>
-                    <el-descriptions-item label="通讯状态">
+                    <el-descriptions-item label="通讯状态" width="140px">
                         <el-tag size="small" :type="dropList.comFlag == '正常' ? 'success' : 'danger'" effect="dark">
                             {{ dropList.comFlag }}
                         </el-tag>
                     </el-descriptions-item>
                 </el-descriptions>
             </el-col>
+            <el-col :span="8">
+                <h3 class="mb10 iconBox">
+                    <span></span>
+                    告警明细
+                </h3>
+                <el-descriptions title="" border :column="2" size="small">
+                    <el-descriptions-item width="140px" label="告警原因">
+                        <span
+                            style="font-weight: 550"
+                            :style="TargetData.info == 0 ? 'color: #0e8780;' : 'color: #ff0000;'"
+                        >
+                            {{
+                                TargetData.info == 1
+                                    ? '超标告警'
+                                    : TargetData.info == 2
+                                    ? '完整性告警'
+                                    : TargetData.info == 0
+                                    ? '无告警'
+                                    : ''
+                            }}
+                        </span>
+                    </el-descriptions-item>
+                    <el-descriptions-item label="频率偏差">{{ TargetData.flickerAllTime }}</el-descriptions-item>
+                    <el-descriptions-item label="电压偏差">{{ TargetData.freqDevOvertime }}</el-descriptions-item>
+                    <el-descriptions-item label="谐波电流">{{ TargetData.iharmOvertime }}</el-descriptions-item>
+                    <el-descriptions-item label="负序电流">{{ TargetData.inegOvertime }}</el-descriptions-item>
+                    <el-descriptions-item label="间谐波电压">{{ TargetData.inuharmOvertime }}</el-descriptions-item>
+                    <el-descriptions-item label="电压总谐波畸变率">
+                        {{ TargetData.uaberranceOvertime }}
+                    </el-descriptions-item>
+                    <el-descriptions-item label="闪变">{{ TargetData.ubalanceOvertime }}</el-descriptions-item>
+                    <el-descriptions-item label="谐波电压">{{ TargetData.uharmOvertime }}</el-descriptions-item>
+                    <el-descriptions-item width="140px" label="三相电压不平衡度">
+                        {{ TargetData.voltageDevOvertime }}
+                    </el-descriptions-item>
+                </el-descriptions>
+            </el-col>
             <el-col :span="8">
                 <h3 class="mb10 iconBox">
                     <span></span>
@@ -41,13 +80,6 @@
                     />
                 </div>
             </el-col>
-            <el-col :span="8">
-                <h3 class="mb10 iconBox">
-                    <span></span>
-                    暂态事件统计
-                </h3>
-                <MyEChart :style="`height: calc(${rowHeight} - 31px)`" :options="incidentCharts" />
-            </el-col>
         </el-row>
         <el-row :gutter="20" class="mt10" :style="`height:${rowHeight}`">
             <el-col :span="8">
@@ -91,6 +123,14 @@
                 </h3>
                 <div :style="`height: calc(${rowHeight} - 31px)`" ref="chartRef"></div>
             </el-col>
+            <el-col :span="8">
+                <h3 class="mb10 iconBox">
+                    <span></span>
+                    暂态事件统计
+                </h3>
+
+                <MyEChart :style="`height: calc(${rowHeight} - 31px)`" :options="incidentCharts" />
+            </el-col>
         </el-row>
         <el-row :gutter="20" class="mt10" :style="`height:${rowHeight}`">
             <el-col :span="24">
@@ -121,11 +161,13 @@ import {
     getTotalOnlineRates,
     lineQualifiedDetail,
     getLineAssess,
-    getEventDetailByLineId
+    getEventDetailByLineId,
+    getGridDiagramTargetData
 } from '@/api/device-boot/panorama'
 
 const emit = defineEmits(['back'])
 const dropList: any = ref({})
+const TargetData: any = ref({})
 const evaluationData: any = ref([])
 const incidentCharts: any = ref({})
 const ComCharts: any = ref({})
@@ -133,6 +175,7 @@ const onLineCharts: any = ref({})
 const datePickerRef = ref()
 const chartRef = ref<HTMLDivElement>()
 const historyRef = ref()
+const IntegrityNum = ref(0)
 const url: any = [
     new URL(`@/assets/img/PLPC.png`, import.meta.url),
     new URL(`@/assets/img/DYPC.png`, import.meta.url),
@@ -159,9 +202,11 @@ const open = async (id: string) => {
     const { data } = await getLineDetailData({ id: id })
     dropList.value = data
     // 运行状态
+
     // 完整性
     getTotalIntegrityByLineIds(form).then((res: any) => {
         let num = (res.data || 0) / 100
+        IntegrityNum.value = num
         ComCharts.value = {
             title: {
                 text: '完整性',
@@ -429,41 +474,31 @@ const open = async (id: string) => {
                 ]
             }
         }
-        // incidentCharts.value = {
+    })
-        //     title: {
-        //         text: ''
-        //     },
-        //     legend: {
-        //         show: true,
-        //         right: 90
-        //     },
-        //     xAxis: {
-        //         data: ['电压暂升', '电压暂降', '电压中断']
-        //     },
-        //     yAxis: {
-        //         name: '条'
-        //     },
-        //     grid: {
-        //         top: '35px',
-        //         left: '20px',
-        //         right: '20px'
-        //     },
-        //     options: {
-        //         dataZoom: null,
-        //         series: [
-        //             {
-        //                 type: 'bar',
 
-        //                 data: [res.data?.swellTimes, res.data?.sagTimes, res.data?.interruptTimes],
+    // 告警明细
-        //                 label: {
+    getGridDiagramTargetData({ ...form, id: id, type: 3 }).then(res => {
-        //                     show: true,
+        TargetData.value = res.data
-        //                     position: 'top',
+        let num = 0
-        //                     fontSize: 12
+        let flag = 0
-        //                 }
+        for (let k in res.data) {
-        //             }
+            if (k != 'lineId') {
-        //         ]
+                flag += res.data[k]
-        //     }
+            }
-        // }
+        }
+        console.log('🚀 ~ getGridDiagramTargetData ~ flag:', flag)
+
+        if (IntegrityNum.value <= 0) {
+            num = 2 //完整性告警
+        } else {
+            if (flag > 0) {
+                num = 1 //超标告警
+            } else {
+                num = 0 //无告警
+            }
+        }
+
+        TargetData.value.info = num
     })
 }
 const echart = (row: any) => {
@@ -573,12 +608,13 @@ const echart = (row: any) => {
 // 跳转
 const Integrity = () => {
     router.push({
-        name:'harmonic-boot/harmonic/getIntegrityData'
+        name: 'harmonic-boot/harmonic/getIntegrityData'
     })
 }
 const OnlineRate = () => {
     router.push({
-    name:'harmonic-boot/area/OnlineRate'})
+        name: 'harmonic-boot/area/OnlineRate'
+    })
 }
 
 onMounted(() => {

src/views/pqs/qualityInspeection/panorama/components/map.vue

@@ -2,6 +2,54 @@
     <DatePicker ref="datePickerRef" 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">
@@ -11,6 +59,8 @@ 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'])
@@ -19,38 +69,62 @@ const prop = defineProps({
         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(0)
+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)
-narimap.Require(
+const popupOffsets = ref({
-    ['PSRMap', 'Thematic', 'Components.Query', 'Components.RegionSelector', 'Components.DeviceTreeGW'],
+    top: [0, 0],
-    () => {
+    'top-left': [0, 0],
-        if (narimap.Config.examples.notlogin) {
+    'top-right': [0, 0],
-            initMap(narimap.Config.styles.sjDark)
+    bottom: [0, -10],
-        } else {
+    'bottom-left': [25, -35],
-            //电网GIS地图服务登录
+    'bottom-right': [-25, -35],
-            narimap.SGAuth.login()
+    left: [10, -10],
-                .then((result: any) => {
+    right: [-10, -10]
-                    if (result.success) {
+})
-                        console.log('登录成功')
+const mapList: any = ref([])
-                    } else {
+const flag = ref(true)
-                        console.log('登录失败', result)
+import { getAssessOverview } from '@/api/device-boot/panorama'
-                    }
+
-                    //默认打开电网GIS影像图
+narimap.Require(['PSRMap', 'Thematic', 'Components.Query', 'Components.RegionSelector'], () => {
-                    initMap(narimap.Config.styles.sjDark)
+    if (narimap.Config.examples.notlogin) {
-                })
+        initMap(narimap.Config.styles.sjDark)
-                .catch((err: any) => {
+    } else {
-                    console.log('错误', err)
+        //电网GIS地图服务登录
-                })
+        narimap.SGAuth.login()
-        }
+            .then((result: any) => {
+                if (result.success) {
+                    console.log('登录成功')
+                } else {
+                    console.log('登录失败', result)
+                }
+                //默认打开电网GIS影像图
+                initMap(narimap.Config.styles.sjDark)
+            })
+            .catch((err: any) => {
+                console.log('错误', err)
+            })
     }
-)
+})
 function initMap(styleurl: any) {
     map.value = new narimap.Map({
         container: 'map',
@@ -63,11 +137,11 @@ function initMap(styleurl: any) {
         localIdeographFontFamily: 'Microsoft YoHei'
     })
     map.value.on('load', () => {
+        DeviceQuery.value = new narimap.ResourceQuery.DeviceQuery()
         addLayer()
 
         nextTick(() => {
             // 添加图层
-
             Query()
         })
     })
@@ -119,7 +193,7 @@ const Query = () => {
             levels: {
                 city: {
                     // minzoom: 10,
-                    maxzoom: 13
+                    maxzoom: 9
                 }
             }
         },
@@ -129,18 +203,22 @@ const Query = () => {
             cascade: true
         }
     )
+    powerManageGridMap.value.on('load', function () {
+        powerLoad()
+    })
 
     setTimeout(() => {
         addLine()
-        const query = new narimap.Components.Query(map.value)
+        // const query = new narimap.Components.Query(map.value)
-        query.init(map.value.getContainer())
+        // query.init(map.value.getContainer())
-        query.setQueryOrgId(orgId.value)
+        // query.setQueryOrgId(orgId.value)
 
         setTimeout(() => {
             locatePositions({ data: dictData.state.area[0] })
         }, 500)
     }, 500)
 }
+
 // 添加变电站线路
 const addLine = () => {
     //添加电网图层
@@ -148,21 +226,17 @@ const addLine = () => {
         orgId: orgId.value == '1100F3DE20806FADE050007F01006CBE' ? '' : orgId.value
     })
     psrmap.addPSR()
+    psrmap.filterByDomain(1)
     initDeviceCard()
-    const devTree = new narimap.Components.DeviceTreeGW(map.value)
 
-    devTree.init({ orgId: orgId.value })
-
-    //添加电网要素点击事件
-    // device-tree-gw__button
-    document.querySelectorAll('.device-tree-gw__button')[0].onclick = function (v: any) {
-        emit('show', true)
-    }
     //添加电网要素点击事件
     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()
@@ -195,6 +269,86 @@ const initDeviceCard = () => {
     })
     //
 }
+
+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: [],
+            fill: {
+                color: '#339966'
+            }
+        },
+        {
+            orgIds: [],
+            fill: {
+                color: '#3399ff'
+            }
+        },
+        {
+            orgIds: [],
+            fill: {
+                color: '#ffcc33'
+            }
+        },
+        {
+            orgIds: [],
+            fill: {
+                color: '#ff9900'
+            }
+        },
+        {
+            orgIds: [],
+            fill: {
+                color: '#cc0000'
+            }
+        }
+    ]
+
+    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(
@@ -219,8 +373,8 @@ const addLayer = () => {
                     // 为图层设置引用的图片ID
                     'icon-image': 'poi1',
                     'icon-size': 0.7,
-                    'icon-ignore-placement': true,
+                    'icon-ignore-placement': false,
-                    'icon-allow-overlap': true
+                    'icon-allow-overlap': false
                 }
             })
             map.value.addLayer({
@@ -238,7 +392,7 @@ const addLayer = () => {
                     // 为图层设置引用的图片ID
 
                     'text-field': '{name}',
-                    'icon-ignore-placement': true,
+                    'icon-ignore-placement': false,
                     'text-ignore-placement': true,
                     'text-size': 12,
                     'text-max-width': 8,
@@ -278,19 +432,9 @@ const addLayer = () => {
                     'icon-image': 'poi2',
                     'icon-size': 0.7,
                     // 'text-field': '{name}',
-                    'icon-ignore-placement': true,
+                    'icon-ignore-placement': false,
-                    'icon-allow-overlap': true
+                    'icon-allow-overlap': false
-                    // 'text-ignore-placement': false,
-                    // 'text-size': 12,
-                    // 'text-max-width': 8,
-                    // 'text-offset': [0, 2],
-                    // 'text-font': ['Microsoft YaHei Regular']
                 }
-                // paint: {
-                //     'text-color': '#ccc',
-                //     // 'text-halo-color': '#FFFFFF',
-                //     'text-halo-width': 1.33333
-                // }
             })
         }
     )
@@ -316,8 +460,8 @@ const addLayer = () => {
                     // 为图层设置引用的图片ID
                     'icon-image': 'poi3',
                     'icon-size': 0.6,
-                    'icon-ignore-placement': true,
+                    'icon-ignore-placement': false,
-                    'icon-allow-overlap': true
+                    'icon-allow-overlap': false
                 },
                 Paint: {
                     'icon-opacity': 10
@@ -325,10 +469,41 @@ const addLayer = () => {
             })
         }
     )
+    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']
+            layers: ['spotImg-ZY', 'spotImg-TY', 'spotImg-GJ', 'spotImg-DW']
         })
 
         if (features.length > 0) {
@@ -337,45 +512,35 @@ const addLayer = () => {
                 deviceCard.value.popup && deviceCard.value.popup.remove()
             }, 10)
             let data = JSON.parse(features[0].properties.list)
-            let markerHeight = 20
-            let markerRadius = 10
-            let linearOffset = 25
-            let popupOffsets = {
-                top: [0, 0],
-                'top-left': [0, 0],
-                'top-right': [0, 0],
-                bottom: [0, -markerHeight + 10],
-                'bottom-left': [linearOffset, (markerHeight - markerRadius + linearOffset) * -1],
-                'bottom-right': [-linearOffset, (markerHeight - markerRadius + linearOffset) * -1],
-                left: [markerRadius, (markerHeight - markerRadius) * -1],
-                right: [-markerRadius, (markerHeight - markerRadius) * -1]
-            }
 
-            popup.value = new narimap.Popup({ offset: popupOffsets, className: 'my-popup' })
+            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">
+                    ` <div class="popup-box">
-                  <img src="${data.imageUrl}"/>
+                        <div class="popup_content">
-                  <div>
+                            <img src="${data.imageUrl}" />
-                      <div style="display: flex">
+                            <div>
-                          <span class="title">${data.lineName}</span>
+                                <div style="display: flex">
-                          <span class="state" style="background-color: ${data.comFlag == 0 ? '#ff0000' : '#3ab34a'};">${
+                                    <span class="title">${data.lineName}</span>
-                        data.comFlag == 0 ? '停运' : '在运'
+                                    <span
-                    }</span>
+                                        class="state"
-                          </div>
+                                        style="background-color: ${data.comFlag == 0 ? '#ff0000' : '#3ab34a'};"
-                          <div class="info">
+                                    >
-                           <span>${data.subName} </span>
+                                        ${data.comFlag == 0 ? '停运' : '在运'}
-                           <span>${data.voltageName}</span>
+                                    </span>
-                          </div>
+                                </div>
-
+                                <div class="info">
-                   </div>
+                                    <span>${data.subName} </span>
-                  </div>
+                                    <span>${data.voltageName}</span>
-                  <div class="popup_footer">
+                                </div>
-                      <span id="ids" data-sid="${data.lineId}">查看详情</span>
+                            </div>
-                  </div>
+                        </div>
-                  </div>
+                        <div class="popup_footer">
-
+                            <span id="ids" data-sid="${data.lineId}">
-                  `
+                                查看详情
+                            </span>
+                        </div>
+                    </div>`
                 )
                 .addTo(map.value)
             document.getElementById('ids').onclick = function (v: any) {
@@ -384,10 +549,22 @@ const addLayer = () => {
             }
         }
     })
+
+    // 监听地图缩放完成事件
+    map.value.on('zoomend', (e: any) => {
+        // console.log(123, map.value.getCenter())
+
+        if (map.value.getZoom() > 8 || map.value.getZoom() < 6) {
+            // rPopList.value.remove()
+            rPopList.value.map((item: any) => item.remove())
+            rPopList.value = []
+        } else {
+            if (mapList.value.length > 0) radiusPop()
+        }
+    })
 }
 //添加多个监测点
 const addMarkers = async (row?: any, key?: any) => {
-    console.log('🚀 ~ addMarkers ~ key:', key)
     if (map.value == null) return
     let params = {
         deptIndex: deptIndex.value,
@@ -399,7 +576,9 @@ const addMarkers = async (row?: any, key?: any) => {
         statisticalType: {},
         ...row
     }
+
     let { data } = await getAreaLineInfo(params)
+
     let r = 0.0035
     let tempFeatureZ: any = []
     let tempFeatureT: any = []
@@ -431,7 +610,7 @@ const addMarkers = async (row?: any, key?: any) => {
                     list: val
                 }
             }
-            if (key == 0) {
+            if (key == 1) {
                 switch (val.type) {
                     case 0:
                         tempFeatureZ.push(tempFeature)
@@ -454,90 +633,185 @@ const addMarkers = async (row?: any, key?: any) => {
         })
     })
 
+    if (flag.value) {
+        linList.value = [...tempFeatureZ, ...tempFeatureT]
+
+        flag.value = false
+    }
+    //    清除图层图片
     map.value.getSource('spotImg-ZY').setData({
         type: 'FeatureCollection',
-        features: tempFeatureZ
+        features: []
     })
-  
+    map.value.getSource('spotImg-TY').setData({
-    map.value.setLayerZoomRange('spotImg-GJ', key != undefined ? 0 : 8)
+        type: 'FeatureCollection',
-    map.value.setLayerZoomRange('spotImg-TY', key != undefined ? 0 : 8)
+        features: []
-    map.value.setLayerZoomRange('spotImg-ZY', key != undefined ? 0 : 8)
+    })
-    if (key == 0) {
+    map.value.getSource('spotImg-GJ').setData({
-        map.value.getSource('spotImg-GJ').setData({
+        type: 'FeatureCollection',
+        features: []
+    })
+    map.value.getSource('spotImg-DW').setData({
+        type: 'FeatureCollection',
+        features: []
+    })
+    if (key != undefined) map.value.easeTo({ zoom: 8.1 })
+
+    if (key == undefined) {
+        map.value.getSource('spotImg-DW').setData({
             type: 'FeatureCollection',
-            features: tempFeatureT
+            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: []
+            features: tempFeatureT
         })
     } else {
-        map.value.getSource('spotImg-GJ').setData({
+        map.value.getSource('spotImg-ZY').setData({
             type: 'FeatureCollection',
-            features: []
+            features: [...tempFeatureZ, ...tempFeatureT]
-        })
-        map.value.getSource('spotImg-TY').setData({
-            type: 'FeatureCollection',
-            features: 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 = () => {
+    let List = [
+        {
+            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]
+        }
+    ]
 
-onMounted(() => {
+    List.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 = '#33996696'
+                } else if (y.score > 4) {
+                    item.background = '#3399ff96'
+                } else if (y.score > 3) {
+                    item.background = '#ffcc3396'
+                } else if (y.score > 2) {
+                    item.background = '#ff990096'
+                } else if (y.score > 0) {
+                    item.background = '#cc000096'
+                }
+            }
+        })
+
+        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) => {
+        let infoText = ''
+        if (PopKey.value == 0) {
+            // 监测点
+            infoText = `<img src="${new URL(`@/assets/img/JCD-ZS.png`, import.meta.url)}" />
+                        <div class="infoBox">
+                            <div>总数<p>${item.lineNum} 个</p></div>
+                            <div>在线<p>${item.onlineNum} 个</p></div>
+                            <div>告警<p>${item.alarm} 个</p></div>
+                        </div>`
+        } else if (PopKey.value == 1) {
+            // 变电站
+            infoText = `<img src="${new URL(`@/assets/img/BDZ-ZS.png`, import.meta.url)}" />
+                        <div class="infoBox">
+                            <div>总数<p>${item.subNum} 个</p></div>                           
+                            <div>告警<p>${item.alarmSubNum} 个</p></div>
+                        </div>`
+        } else if (PopKey.value == 2) {
+            // 终端
+            infoText = `<img src="${new URL(`@/assets/img/ZD-ZS.png`, import.meta.url)}" />
+                        <div class="infoBox">
+                            <div>总数<p>${item.deviceNum} 个</p></div>                           
+                            <div>在运<p>${item.onDevice} 个</p></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)
+    })
+}
 
 const locatePositions = (e: any) => {
-    // let mapList = [
-    //     {
-    //         code: '1100F3DE20806FADE050007F01006CBE', //冀北
-    //         centralCoordinate: [117.14740482, 40.5478448705],
-    //         zoom: 6
-    //     },
-    //     {
-    //         code: '1100F3DE246A6FADE050007F01006CBE', //超高压
-    //         centralCoordinate: [117.14740482, 40.5478448705],
-    //         zoom: 6
-    //     },
-
-    //     {
-    //         code: '1100F3DE22316FADE050007F01006CBE', //"唐山"
-    //         centralCoordinate: [118.335849137, 39.7213593355],
-    //         zoom: 7
-    //     },
-    //     {
-    //         code: '1100F3DE20816FADE050007F01006CBE', //张家口
-    //         centralCoordinate: [115.032504679, 40.8651549951],
-    //         zoom: 7
-    //     },
-    //     {
-    //         code: '1100F3DE23F96FADE050007F01006CBE', //秦皇岛
-    //         centralCoordinate: [119.185113833, 40.0879119754],
-    //         zoom: 7
-    //     },
-    //     {
-    //         code: '1100F3DE23466FADE050007F01006CBE', //承德
-    //         centralCoordinate: [117.548498365, 41.3475890632],
-    //         zoom: 7
-    //     },
-    //     {
-    //         code: '1100F3DE218D6FADE050007F01006CBE', //廊坊
-    //         centralCoordinate: [116.628004129, 39.2589378611],
-    //         zoom: 7
-    //     }
-    // ]
-    // let data: any = []
-    // data = mapList.filter(item => item.code == e.data.code) || []
-
     if (map.value != null) {
         deptIndex.value = e.data.id
         // 加载点
         addMarkers()
+
         powerManageGridMap.value.drillDown({
             // 判断超高压
             orgId: e.data.code == '1100F3DE246A6FADE050007F01006CBE' ? '1100F3DE20806FADE050007F01006CBE' : e.data.code,
@@ -545,131 +819,92 @@ const locatePositions = (e: any) => {
         })
     }
 }
-defineExpose({ locatePositions, addMarkers })
+// 电网查询功能
+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 // 地图视图移动速度
+    })
+}
+
+defineExpose({ locatePositions, addMarkers, grids, DeviceQ, radiusPop, flyTo })
 const height = mainHeight(20)
 </script>
 
 <style lang="scss" scoped>
-:deep(.query-box-wrap) {
+@use '@/views/pqs/qualityInspeection/panorama/components/style/map.scss';
-    position: absolute;
-    top: 10px;
-    left: calc(50% - 345px);
-    .query-box {
-        border-radius: 8px 0 0 8px;
-    }
-}
-:deep(.device-tree-gw__button) {
-    position: absolute;
-    top: 10px;
-    border-radius: 0 8px 8px 0;
-    left: calc(50% - 15px);
-    z-index: 0 !important;
-}
-
-:deep(.province-selector) {
-    position: absolute;
-    top: 10px;
-    left: 50%;
-    .distribution__body {
-        height: auto;
-    }
-    .province-selector__options {
-        height: auto;
-    }
-    .province-op {
-        width: 48%;
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-    }
-    .province-selector__button {
-        width: 100px;
-        padding: 4px 12px;
-        span {
-            display: block;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            white-space: nowrap;
-        }
-    }
-    .province-selector__options {
-        z-index: 1;
-    }
-}
-:deep(.sgmap-canvas) {
-    width: 100% !important;
-}
-:deep(.my-popup) {
-    max-width: 400px !important;
-    .popup-box {
-        width: 300px;
-        height: 70px;
-        .popup_content {
-            display: grid;
-            grid-template-columns: 50px 1fr;
-            img {
-                width: 42px;
-                height: 42px;
-            }
-            .title {
-                font-weight: 550;
-            }
-            .state {
-                width: 45px;
-                margin-left: 5px;
-                text-align: center;
-                border-radius: 3px;
-                color: #fff;
-            }
-            .info {
-                color: #18181b99;
-                margin: 5px 0;
-                span {
-                    display: inline-block;
-                    width: 120px;
-                    height: 14px;
-                    line-height: 14px;
-                    overflow: hidden;
-                    text-overflow: ellipsis;
-                    white-space: nowrap;
-                    -webkit-box-orient: vertical;
-                    &::after {
-                        display: inline-block;
-                        margin: 0 3px;
-                        content: ' ';
-                        width: 2px;
-                        height: 11px;
-                        background: #e5e6eb73;
-                        vertical-align: middle;
-                    }
-                }
-            }
-        }
-        .popup_footer {
-            padding: 5px 5px;
-            border-top: 1px solid #e5e6eb;
-            color: var(--el-color-primary);
-            span {
-                margin-right: 8px;
-                cursor: pointer;
-            }
-        }
-    }
-    .sgmap-popup-content {
-        padding: 15px 10px 10px !important;
-    }
-    .sgmap-popup-close-button {
-        position: absolute;
-        right: 5px;
-        top: 5px;
-        font-size: 16px;
-    }
-}
-#nrDeviceCard {
-    position: absolute;
-    top: 11px;
-    right: 70px;
-    width: 450px;
-    z-index: 0;
-}
 </style>

src/views/pqs/qualityInspeection/panorama/components/mapL.vue

@@ -3,7 +3,13 @@
         <div class="boxLeft" :style="height">
             <div v-for="(item, i) in list" :style="boxHeight">
                 <div class="title">
-                    <span>{{ item.title }}</span>
+                    <span @click="GridDiagram(i)">
+                        {{ item.title }}
+                        <span class="ratio">
+                            {{item.ratioTitle}}:
+                            {{ item.ratio }}%
+                        </span>
+                    </span>
                     <span class="info" @click="open(i)">
                         详情
                         <ArrowRight style="width: 12px" />
@@ -16,28 +22,36 @@
 
                 <div class="cardBox">
                     <div class="card" style="width: 98%">
-                        <el-row :gutter="20">
+                        <div class="cor">
-                            <el-col :span="12" class="cor">
+                            <img :src="item.img[0]" />
-                                <img :src="item.img[0]" />
+                            {{ item.titleT[0] }}：
-                                {{ item.titleT[0] }}：
+                            <span
-                                <span
+                                :style="`color: ${item.color[0]}; cursor: pointer;`"
-                                    :style="`color: ${item.color[0]}; cursor: pointer;`"
+                                @click="LookMap(item.list[4].numOneList, item.list[4].numTwoList, i)"
-                                    @click="LookMap(item.list[4].numOneList, item.list[4].numTwoList, i)"
+                            >
-                                >
+                                {{ item.list[4].numOne }}
-                                    {{ item.list[4].numOne }}
+                            </span>
-                                </span>
+                        </div>
-                            </el-col>
+                        <div class="cor">
-                            <el-col :span="12" class="cor">
+                            <img :src="item.img[1]" />
-                                <img :src="item.img[1]" />
+                            {{ item.titleT[1] }}：
-                                {{ item.titleT[1] }}：
+                            <span
-                                <span
+                                :style="`color: ${item.color[1]}; cursor: pointer;`"
-                                    :style="`color: ${item.color[1]}; cursor: pointer;`"
+                                @click="LookMap([], item.list[4].numTwoList, i)"
-                                    @click="LookMap([], item.list[4].numTwoList, i)"
+                            >
-                                >
+                                {{ item.list[4].numTwo }}
-                                    {{ item.list[4].numTwo }}
+                            </span>
-                                </span>
+                        </div>
-                            </el-col>
+                        <div class="cor" v-if="i == 0">
-                        </el-row>
+                            <img :src="item.img[2]" />
+                            {{ item.titleT[2] }}：
+                            <span
+                                :style="`color: ${item.color[2]}; cursor: pointer;`"
+                                @click="LookMap([], item.list[5].numOneList, 1)"
+                            >
+                                {{ item.list[5].numOne }}
+                            </span>
+                        </div>
                     </div>
                     <div :style="`height:calc(${boxHeight.height} - 90px);width: 100%;overflow-y: auto;`" class="BoxA">
                         <div class="card-Box">
@@ -132,18 +146,73 @@ import { ArrowRight } from '@element-plus/icons-vue'
 import stand from './details/stand.vue'
 import terminal from './details/terminal.vue'
 import point from './details/point.vue'
-import { getSubLineGiveAnAlarm, getGridDiagramMonitor, getGridDiagramDev } from '@/api/device-boot/panorama'
+import {
-const emit = defineEmits(['LookMap'])
+    getSubLineGiveAnAlarm,
+    getGridDiagramMonitor,
+    getGridDiagramDev,
+    getGridDiagramAreaData
+} from '@/api/device-boot/panorama'
+const emit = defineEmits(['LookMap', 'GridDiagram'])
 const dictData = useDictData()
 const show = ref(false)
 const standRef = ref()
 const terminalRef = ref()
 const pointRef = ref()
 const list: any = ref([
+    {
+        title: '监测点',
+        img: [
+            new URL(`@/assets/img/JCD-ZS.png`, import.meta.url),
+            new URL(`@/assets/img/JCD-ZX.png`, import.meta.url),
+            new URL(`@/assets/img/JCD-GJ.png`, import.meta.url)
+        ],
+        ratioTitle:'告警率',
+        ratio: 0,
+        titleT: ['总数', '在线', '告警'],
+        color: ['#000', '#2dcd28', '#bd3124'],
+        list: [
+            {
+                numOne: 0,
+                numTwo: 0,
+                numOneList: [],
+                numTwoList: []
+            },
+            {
+                numOne: 0,
+                numTwo: 0,
+                numOneList: [],
+                numTwoList: []
+            },
+            {
+                numOne: 0,
+                numTwo: 0,
+                numOneList: [],
+                numTwoList: []
+            },
+            {
+                numOne: 0,
+                numTwo: 0,
+                numOneList: [],
+                numTwoList: []
+            },
+            {
+                numOne: 0,
+                numTwo: 0,
+                numOneList: [],
+                numTwoList: []
+            },
+            {
+                numOne: 0,
+                numOneList: []
+            }
+        ]
+    },
     {
         title: '变电站',
         img: [new URL(`@/assets/img/BDZ-ZS.png`, import.meta.url), new URL(`@/assets/img/BDZ-GJ.png`, import.meta.url)],
         color: ['#000', '#bd3124'],
+        ratioTitle:'告警率',
+        ratio: 0,
         titleT: ['总数', '告警'],
         list: [
             {
@@ -181,45 +250,9 @@ const list: any = ref([
     {
         title: '终端',
         img: [new URL(`@/assets/img/ZD-ZS.png`, import.meta.url), new URL(`@/assets/img/ZD-ZX.png`, import.meta.url)],
-        titleT: ['总数', '在线'],
+        titleT: ['总数', '在运'],
-        color: ['#000', '#2dcd28'],
+        ratioTitle:'在运率',
-        list: [
+        ratio: 0,
-            {
-                numOne: 0,
-                numTwo: 0,
-                numOneList: [],
-                numTwoList: []
-            },
-            {
-                numOne: 0,
-                numTwo: 0,
-                numOneList: [],
-                numTwoList: []
-            },
-            {
-                numOne: 0,
-                numTwo: 0,
-                numOneList: [],
-                numTwoList: []
-            },
-            {
-                numOne: 0,
-                numTwo: 0,
-                numOneList: [],
-                numTwoList: []
-            },
-            {
-                numOne: 0,
-                numTwo: 0,
-                numOneList: [],
-                numTwoList: []
-            }
-        ]
-    },
-    {
-        title: '监测点',
-        img: [new URL(`@/assets/img/JCD-ZS.png`, import.meta.url), new URL(`@/assets/img/JCD-ZX.png`, import.meta.url)],
-        titleT: ['总数', '在线'],
         color: ['#000', '#2dcd28'],
         list: [
             {
@@ -269,7 +302,7 @@ const open = (e: any) => {
         pointRef.value.open(formRow.value)
     }
 }
-const info = (row: any) => {
+const info = async (row: any) => {
     let form = {
         ...row,
         id: row.orgNo,
@@ -281,21 +314,11 @@ const info = (row: any) => {
         monitorFlag: row.isUpToGrid == 0 ? null : row.isUpToGrid
     }
     formRow.value = form
-    // 变电站
-    getSubLineGiveAnAlarm(form).then(res => {
-        let data = row.isUpToGrid == 1 ? res.data.gwInfo : res.data.info
-        list.value[0].list = data[0].data
-    })
-    // 终端
-    getGridDiagramDev(form).then(res => {
-        let data = row.isUpToGrid == 1 ? res.data.gwInfo : res.data.info
-        list.value[1].list = data[0].data
-    })
     // 监测点
-    getGridDiagramMonitor(form).then(res => {
+    await getGridDiagramMonitor(form).then(res => {
         let data = row.isUpToGrid == 1 ? res.data.gwInfo : res.data.info
 
-        list.value[2].list = data[0].data.map((item: any) => {
+        list.value[0].list = data[0].data.map((item: any) => {
             return {
                 numOne: item.num,
                 numTwo: item.onLineNum,
@@ -303,6 +326,39 @@ const info = (row: any) => {
                 numTwoList: item.onLineNumList
             }
         })
+
+        list.value[0].list.push({
+            numOne: 0,
+            numOneList: []
+        })
+    })
+    getGridDiagramAreaData(form).then((res: any) => {
+        let numOne = 0
+        let numOneList: any = []
+
+        res.data.forEach((item: any) => {
+            numOne = numOne + item.alarm
+            numOneList.push(...item.alarmList)
+        })
+
+        list.value[0].list[5] = {
+            numOne: numOne,
+            numOneList: numOneList
+        }
+        list.value[0].ratio = ((list.value[0].list[5].numOne / list.value[0].list[4].numOne) * 100).toFixed(2)
+    })
+    // 变电站
+    getSubLineGiveAnAlarm(form).then(res => {
+        let data = row.isUpToGrid == 1 ? res.data.gwInfo : res.data.info
+        list.value[1].list = data[0].data
+     
+        list.value[1].ratio = ((list.value[1].list[4].numTwo / list.value[1].list[4].numOne) * 100).toFixed(2)
+    })
+    // 终端
+    getGridDiagramDev(form).then(res => {
+        let data = row.isUpToGrid == 1 ? res.data.gwInfo : res.data.info
+        list.value[2].list = data[0].data
+        list.value[2].ratio = ((list.value[2].list[4].numTwo / list.value[2].list[4].numOne) * 100).toFixed(2)
     })
 }
 // 点击
@@ -314,6 +370,9 @@ const LookMap = (coutList: object, alarmList: object, key?: any) => {
     }
     emit('LookMap', form, key)
 }
+const GridDiagram = (k: any) => {
+    emit('GridDiagram', k)
+}
 onMounted(() => {})
 defineExpose({ info, show })
 </script>
@@ -336,8 +395,9 @@ defineExpose({ info, show })
         margin-top: 10px;
         width: 48%;
         margin-right: 2%;
-
+        display: flex;
         .cor {
+            flex: 1;
             display: flex;
             align-items: center;
             font-size: 12px;
@@ -405,6 +465,9 @@ defineExpose({ info, show })
     width: 100%;
     font-weight: 550;
 
+    span:nth-child(1) {
+        cursor: pointer;
+    }
     .info {
         font-weight: normal;
         display: flex;
@@ -412,6 +475,11 @@ defineExpose({ info, show })
         cursor: pointer;
         color: #757575;
     }
+    .ratio {
+        font-weight: 500;
+        font-size: 12px;
+        line-height: 12px;
+    }
 }
 
 .imgL {

src/views/pqs/qualityInspeection/panorama/components/mapR.vue

@@ -16,22 +16,26 @@
                 <div class="mt10 TJTop">
                     <img src="@/assets/img/TJ.png" />
                     综合评估得分：
-                    <span :style="{
+                    <span
-                                color:
+                        :style="{
-                                   assessList.score == 3.14159
+                            color:
-                                        ? ''
+                                assessList.score == 3.14159
-                                        :assessList.score > 4.5
+                                    ? ''
-                                        ? '#339966'
+                                    : assessList.score > 4.5
-                                        :assessList.score > 4
+                                    ? '#339966'
-                                        ? '#3399ff'
+                                    : assessList.score > 4
-                                        :assessList.score > 3
+                                    ? '#3399ff'
-                                        ? '#ffcc33'
+                                    : assessList.score > 3
-                                        :assessList.score > 2
+                                    ? '#ffcc33'
-                                        ? '#ff9900'
+                                    : assessList.score > 2
-                                        :assessList.score > 0
+                                    ? '#ff9900'
-                                        ? '#cc0000'
+                                    : assessList.score > 0
-                                        : ''
+                                    ? '#cc0000'
-                            }">{{assessList.score}}</span>
+                                    : ''
+                        }"
+                    >
+                        {{ assessList.score }}
+                    </span>
                 </div>
                 <div class="evaluate">
                     <div v-for="item in assessList.children" style="min-width: 50px">
@@ -79,7 +83,7 @@
                     <div class="top">
                         <div class="TJTop">
                             <img src="@/assets/img/TJ.png" />
-                            监测点越限占比:
+                            监测点越限占比：
                             <span class="num">
                                 {{ harmonicLineRatio == 3.14159 ? '0' : harmonicLineRatio + '%' }}
                             </span>
@@ -120,8 +124,10 @@
                         <div class="TJTop">
                             <img src="@/assets/img/TJ.png" />
                             <span>
-                                暂态事件严重度：
+                                严重度　90%:
-                                <span class="num">{{ transientNum }}%</span>
+                                <span class="num">{{ transientNum[0] }}</span>
+                                　 50%:
+                                <span class="num">{{ transientNum[1] }}</span>
                             </span>
                         </div>
                         <el-select v-model="value" style="width: 120px" size="small" @change="transientChange">
@@ -230,6 +236,7 @@ const steadyStateRef = ref()
 const formRow: any = ref({})
 const temporaryStateRef = ref()
 const techniqueRef = ref()
+const mun = ref(0)
 const options = ref([
     {
         label: '全指标',
@@ -257,7 +264,7 @@ const options = ref([
     }
 ])
 const harmonicType = ref('0')
-const transientNum = ref(0)
+const transientNum = ref([0, 0])
 const options1: any = dictData.getBasicData('Event_Statis').filter(item => {
     if (item.code == 'Voltage_Dip' || item.code == 'Voltage_Rise' || item.code == 'Short_Interruptions') {
         return item
@@ -326,109 +333,25 @@ const harmonicChange = () => {
             item.ratio = item.ratio == 3.14159 ? 0 : item.ratio
             return item
         })
-
-        // harmonicList.value = {
-        //     tooltip: {
-        //         formatter: function (params: any) {
-        //             return params[0].name + ':' + (params[0].value == 3.14159 ? '暂无数据' : params[0].value) + '%<br/>'
-        //         }
-        //     },
-        //     xAxis: {
-        //         name: '%',
-        //         type: 'value',
-        //         max: 100
-        //     },
-        //     legend: {
-        //         show: false
-        //     },
-        //     yAxis: {
-        //         type: 'category',
-        //         data: res.data.childrenList.map((item: any) => item.deptName)
-        //     },
-        //     grid: {
-        //         top: '10px',
-        //         left: '30px',
-        //         right: '30px',
-        //         bottom: '0px'
-        //     },
-
-        //     options: {
-        //         dataZoom: null,
-        //         series: [
-        //             {
-        //                 name: '占比',
-        //                 type: 'bar',
-        //                 data: res.data.childrenList.map((item: any) => item.ratio),
-        //                 label: {
-        //                     show: true,
-        //                     position: 'right',
-        //                     fontSize: 12,
-        //                     formatter: function (params: any) {
-        //                         return `${params.value == 3.14159 ? '' : params.value}`
-        //                     }
-        //                 }
-        //             }
-        //         ]
-        //     }
-        // }
     })
 }
 const transientChange = () => {
     getEventLevelEvaluation({ ...formRow.value, ids: [value.value] }).then(res => {
         let data = []
-        transientNum.value = 0
+        transientNum.value = [0, 0]
         if (formRow.value.isUpToGrid == 0) {
             data = res.data.info
-            transientNum.value = res.data.data.toFixed(2)
+            transientNum.value = res.data.data
         } else {
-            transientNum.value = res.data.gwData.toFixed(2)
+            transientNum.value = res.data.gwData
             data = res.data.gwInfo
         }
+        WTList.value = []
+        mun.value = Math.max(...data.map((item: any) => item.count)) - 0
+        data.forEach((item: any) => {
+            item.count = item.count == 0 ? 0 : Number(((item.count / mun.value) * 100).toFixed(2))
+        })
         WTList.value = data
-        // WTList.value = {
-        //     tooltip: {
-        //         formatter: function (params: any) {
-        //             return params[0].name + ':' + (params[0].value == 3.14159 ? '暂无数据' : params[0].value) + '%<br/>'
-        //         }
-        //     },
-        //     xAxis: {
-        //         name: '%',
-        //         type: 'value',
-        //         max: 100
-        //     },
-        //     legend: {
-        //         show: false
-        //     },
-        //     yAxis: {
-        //         type: 'category',
-        //         data: data.map((item: any) => item.orgName)
-        //     },
-        //     grid: {
-        //         top: '10px',
-        //         left: '30px',
-        //         right: '30px',
-        //         bottom: '0px'
-        //     },
-
-        //     options: {
-        //         dataZoom: null,
-        //         series: [
-        //             {
-        //                 name: '占比',
-        //                 type: 'bar',
-        //                 data: data.map((item: any) => item.count),
-        //                 label: {
-        //                     show: true,
-        //                     position: 'right',
-        //                     fontSize: 12,
-        //                     formatter: function (params: any) {
-        //                         return `${params.value}`
-        //                     }
-        //                 }
-        //             }
-        //         ]
-        //     }
-        // }
     })
 }
 defineExpose({ info, show })

src/views/pqs/qualityInspeection/panorama/components/style/map.scss

@@ -0,0 +1,196 @@
+.query-box-wrap {
+    position: absolute;
+    top: 10px;
+    left: calc(50% - 305px);
+    border-radius: 8px;
+    overflow: hidden;
+    .Icon {
+        width: 30px;
+        height: 30px;
+        background-image: url('@/assets/icons/国网.svg');
+    }
+    .el-input__icon {
+        font-size: 20px;
+        color: #000;
+        cursor: pointer;
+    }
+    .el-input {
+        font-size: 16px;
+    }
+}
+.collapse {
+    top: 65px;
+    .collapse_none {
+        height: 44px;
+        width: 334px;
+        text-align: center;
+        line-height: 44px;
+        background-color: #fff;
+    }
+    .collapseBox {
+        max-height: 240px;
+        overflow-y: auto;
+        .group-list__item {
+            height: 55px;
+            padding: 5px 12px;
+            border-bottom: 1px solid #e4e7ed;
+            display: grid;
+            grid-auto-rows: 1fr 1fr;
+            cursor: pointer;
+            p:nth-child(1) {
+                font-weight: 600;
+                font-size: 14px;
+                display: inline-block;
+                width: 300px;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+                -webkit-box-orient: vertical;
+            }
+            p:nth-child(2) {
+                font-size: 12px;
+            }
+            &:hover {
+                background-color: #009ea81a;
+            }
+        }
+    }
+}
+:deep(.el-collapse-item__header) {
+    height: 32px;
+    border-bottom: 1px solid #e4e7ed;
+    background-color: #f7fafd;
+    padding-left: 10px;
+    font-weight: 600;
+}
+
+:deep(.province-selector) {
+    position: absolute;
+    top: 10px;
+    left: 50%;
+    .distribution__body {
+        height: auto;
+    }
+    .province-selector__options {
+        height: auto;
+    }
+    .province-op {
+        width: 48%;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+    .province-selector__button {
+        width: 100px;
+        padding: 4px 12px;
+        span {
+            display: block;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
+    }
+    .province-selector__options {
+        z-index: 1;
+    }
+}
+:deep(.sgmap-canvas) {
+    width: 100% !important;
+}
+:deep(.my-popup) {
+    max-width: 400px !important;
+    .popup-box {
+        width: 300px;
+        height: 70px;
+        .popup_content {
+            display: grid;
+            grid-template-columns: 50px 1fr;
+            img {
+                width: 42px;
+                height: 42px;
+            }
+            .title {
+                font-weight: 550;
+            }
+            .state {
+                width: 45px;
+                margin-left: 5px;
+                text-align: center;
+                border-radius: 3px;
+                color: #fff;
+            }
+            .info {
+                color: #18181b99;
+                margin: 5px 0;
+                span {
+                    display: inline-block;
+                    width: 120px;
+                    height: 14px;
+                    line-height: 14px;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    white-space: nowrap;
+                    -webkit-box-orient: vertical;
+                    &::after {
+                        display: inline-block;
+                        margin: 0 3px;
+                        content: ' ';
+                        width: 2px;
+                        height: 11px;
+                        background: #e5e6eb73;
+                        vertical-align: middle;
+                    }
+                }
+            }
+        }
+        .popup_footer {
+            padding: 5px 5px;
+            border-top: 1px solid #e5e6eb;
+            color: var(--el-color-primary);
+            span {
+                margin-right: 8px;
+                cursor: pointer;
+            }
+        }
+    }
+    .sgmap-popup-content {
+        padding: 15px 10px 10px !important;
+    }
+    .sgmap-popup-close-button {
+        position: absolute;
+        right: 5px;
+        top: 5px;
+        font-size: 16px;
+    }
+}
+:deep(.my-radiusPop) {
+    .sgmap-popup-tip {
+        display: none;
+    }
+    .sgmap-popup-content {
+        width: 200px;
+        height: 50px;
+        border-radius: 5px;
+        padding: 5px 5px !important;
+        background-color: #00000000;
+        color: #fff;
+    }
+    img {
+        height: 40px;
+        margin-right: 10px;
+    }
+    .infoBox {
+        flex: 1;
+        display: flex;
+        justify-content: space-around;
+        text-align: center;
+    }
+}
+
+#nrDeviceCard {
+    position: absolute;
+    top: 11px;
+    right: 70px;
+    width: 450px;
+    z-index: 0;
+}

src/views/pqs/qualityInspeection/panorama/index.vue

@@ -19,7 +19,7 @@
                 </el-form-item>
                 <el-form-item>
                     <div class="Icon" @click="reset">
-                        <Icon name="fa fa-refresh"  />
+                        <Icon name="fa fa-refresh" />
                     </div>
                 </el-form-item>
             </el-form>
@@ -30,7 +30,7 @@
         <div v-show="lineInfo">
             <!-- 省级 -->
             <div v-show="control == 1">
-                <mapL ref="mapLRef" class="mapL" @LookMap="LookMap" />
+                <mapL ref="mapLRef" class="mapL" @LookMap="LookMap" @GridDiagram="GridDiagram" />
                 <mapR ref="mapRRef" class="mapR" />
             </div>
             <!-- 市级 -->
@@ -48,7 +48,7 @@
 <script setup lang="ts">
 import { onMounted, nextTick, ref, provide } from 'vue'
 import Area from '@/components/form/area/index.vue'
-// import Map from './components/map.vue'
+import Map from './components/map.vue'
 import { useDictData } from '@/stores/dictData'
 import { mainHeight } from '@/utils/layout'
 import { Search, Refresh } from '@element-plus/icons-vue'
@@ -120,17 +120,20 @@ const infoShow = (e: boolean) => {
 const LookMap = (row: any, key?: any) => {
     // mapRef.value.addMarkers({ ...row, type: 1 }, key)
 }
+//区域统计展示切换
+const GridDiagram = (k?: number) => {
+    // mapRef.value.radiusPop(k)
+    // mapRef.value.flyTo({ coordinate: [116.84428600000001, 40.57707185292256] }, 6.709267680647425)
+}
 const info = () => {
     form.value.startTime = datePickerRef.value.timeValue[0]
     form.value.searchBeginTime = datePickerRef.value.timeValue[0]
     form.value.endTime = datePickerRef.value.timeValue[1]
     form.value.searchEndTime = datePickerRef.value.timeValue[1]
-    // form.value.startTime = `2023-01-01`
+
-    // form.value.searchBeginTime = `2023-01-01`
-    // form.value.endTime = `2024-07-30`
-    // form.value.searchEndTime = `2024-07-30`
     form.value.type = datePickerRef.value.interval
-    // mapRef.value.addMarkers()
+
+    // mapRef.value.grids(form.value)
     if (control.value == 1) {
         mapLRef.value.info(form.value)
         mapRRef.value.info(form.value)

src/views/pqs/supervise/harmonicSurvey/components/planAdd.vue

@@ -83,7 +83,7 @@
             ></el-input>
         </div> -->
         <template #footer v-if="title != '查看计划'">
-            <div class="dialog-footer ">
+            <div class="dialog-footer">
                 <el-button type="primary" @click="submitFn">提交</el-button>
                 <el-button @click="cancelFn">取消</el-button>
             </div>
@@ -139,28 +139,20 @@ const submitFn = () => {
         if (valid) {
             let filePath = ''
             formdata.value.subIds = treeRef.value.treeRef.getCheckedKeys(false)
-            for (let i = 0; i < formdata.value.fileList.length; i++) {
+            if (formdata.value.fileList.length == 0) {
-                if (formdata.value.fileList[i].raw) {
+                audit(filePath)
-                    await uploadFile(formdata.value.fileList[i].raw, 'supervision/').then(res => {
+            } else {
-                        filePath = filePath + res.data.name + ','
+                for (let i = 0; i < formdata.value.fileList.length; i++) {
-                    })
+                    if (formdata.value.fileList[i].raw) {
-                } else {
+                        await uploadFile(formdata.value.fileList[i].raw, 'supervision/').then(res => {
-                    filePath = filePath + formdata.value.fileList[i].supervision + ','
+                            filePath = filePath + res.data.name + ','
-                }
+                        })
+                    } else {
+                        filePath = filePath + formdata.value.fileList[i].supervision + ','
+                    }
 
-                if (i == formdata.value.fileList.length - 1) {
+                    if (i == formdata.value.fileList.length - 1) {
-                    if (title.value == '普测计划新增') {
+                        audit(filePath)
-                        await addSurvey({ ...formdata.value, filePath: filePath }).then((res: any) => {
-                            ElMessage.success('新增成功!')
-                            cancelFn()
-                            emit('onsubmit')
-                        })
-                    } else if (title.value == '重新发起计划') {
-                        await auditSurvey({ ...formdata.value, filePath: filePath }).then((res: any) => {
-                            ElMessage.success('重新发起计划成功!')
-                            cancelFn()
-                            emit('onsubmit')
-                        })
                     }
                 }
             }
@@ -168,6 +160,21 @@ const submitFn = () => {
     })
 }
 
+const audit = (filePath: any) => {
+    if (title.value == '普测计划新增') {
+        addSurvey({ ...formdata.value, filePath: filePath }).then((res: any) => {
+            ElMessage.success('新增成功!')
+            cancelFn()
+            emit('onsubmit')
+        })
+    } else if (title.value == '重新发起计划') {
+        auditSurvey({ ...formdata.value, filePath: filePath }).then((res: any) => {
+            ElMessage.success('重新发起计划成功!')
+            cancelFn()
+            emit('onsubmit')
+        })
+    }
+}
 // 上传文件
 // 文件数超出提示
 const handleExceed: UploadProps['onExceed'] = (): void => {