同步现场代码修改电网一张图页面

2024-05-29 13:39:46 +08:00
parent f6f015cf4b
commit 3d0bd8f644
11 changed files with 226 additions and 166 deletions
--- a/src/views/pqs/harmonicMonitoring/embed/liabiiyty/inex.vue
+++ b/src/views/pqs/harmonicMonitoring/embed/liabiiyty/inex.vue
@@ -20,7 +20,6 @@ const height = mainHeight(20)

 const num = ref(0)
 const loading = ref(true)
-// console.log("🚀 ~ num:", window.location.origin)
 const iframeRef: any = ref(null)
 // const iframeSrc = 'http://www.jibei1.com:8088/#/harmonic-boot/detailedAnalysis/responsibilityqr'
 const iframeSrc = window.location.origin + '/jbv2/#/harmonic-boot/detailedAnalysis/responsibilityqr'
@@ -28,10 +27,12 @@ const iframeSrc = window.location.origin + '/jbv2/#/harmonic-boot/detailedAnalys
 onMounted(() => {
    iframeRef.value.onload = () => {
        iframeRef.value.contentWindow.postMessage({ info: window.localStorage.getItem('adminInfo') }, '*')
-        // setTimeout(() => {
-        //     num.value++
+        setTimeout(() => {
+            if (loading.value) {
+            }
+            ++num.value
            loading.value = false
-        // }, 0)
+        }, 0)
    }
 })
 </script>
--- a/src/views/pqs/harmonicMonitoring/embed/lntegruty/index.vue
+++ b/src/views/pqs/harmonicMonitoring/embed/lntegruty/index.vue
@@ -21,7 +21,6 @@ const height = mainHeight(20)

 const num = ref(0)
 const loading = ref(true)
-// console.log("🚀 ~ num:", window.location.origin)
 const iframeRef: any = ref(null)
 // const iframeSrc = 'http://www.jibei1.com:8088/#/harmonic-boot/detailedAnalysis/responsibilityqr'
 const iframeSrc = window.location.origin + '/jbv2/#/harmonic-boot/harmonic/getIntegrityDataqr'
@@ -29,10 +28,12 @@ const iframeSrc = window.location.origin + '/jbv2/#/harmonic-boot/harmonic/getIn
 onMounted(() => {
    iframeRef.value.onload = () => {
        iframeRef.value.contentWindow.postMessage({ info: window.localStorage.getItem('adminInfo') }, '*')
-        // setTimeout(() => {
-        //     num.value++
+        setTimeout(() => {
+            if (loading.value) {
+            }
+            ++num.value
            loading.value = false
-        // }, 0)
+        }, 0)
    }
 })
 </script>
--- a/src/views/pqs/harmonicMonitoring/embed/onlinerate/index.vue
+++ b/src/views/pqs/harmonicMonitoring/embed/onlinerate/index.vue
@@ -21,7 +21,6 @@ const height = mainHeight(20)

 const num = ref(0)
 const loading = ref(true)
-// console.log("🚀 ~ num:", window.location.origin)
 const iframeRef: any = ref(null)
 // const iframeSrc = 'http://www.jibei1.com:8088/#/harmonic-boot/detailedAnalysis/responsibilityqr'
 const iframeSrc = window.location.origin + '/jbv2/#/harmonic-boot/area/OnlineRateqr'
@@ -29,10 +28,12 @@ const iframeSrc = window.location.origin + '/jbv2/#/harmonic-boot/area/OnlineRat
 onMounted(() => {
    iframeRef.value.onload = () => {
        iframeRef.value.contentWindow.postMessage({ info: window.localStorage.getItem('adminInfo') }, '*')
-        // setTimeout(() => {
-        //     num.value++
+        setTimeout(() => {
+            if (loading.value) {
+            }
+            ++num.value
            loading.value = false
-        // }, 0)
+        }, 0)
    }
 })
 </script>
--- a/src/views/pqs/qualityInspeection/panorama/components/cityMapL.vue
+++ b/src/views/pqs/qualityInspeection/panorama/components/cityMapL.vue
@@ -55,7 +55,7 @@ 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 { getGridDiagramAreaData, getGridDiagramCityDev, getGridDiagramLineData } from '@/api/device-boot/panorama'
 import { useConfig } from '@/stores/config'
 const config = useConfig()
 const dictData = useDictData()
@@ -86,7 +86,7 @@ const info = (row: any) => {

    formRow.value = form
    // 变电站
-    getPracticalRunDeviceInfo(form).then(res => {
+    getGridDiagramAreaData(form).then(res => {
        onlineCharts.value = {
            tooltip: {},
            yAxis: {
@@ -115,9 +115,9 @@ const info = (row: any) => {
                        name: '个数',
                        type: 'bar',
                        data: [
-                            res.data[0].subIndexes.length,
-                            res.data[0].deviceIndexes.length,
-                            res.data[0].lineIndexes.length
+                            res.data[0].subNum,
+                            res.data[0].deviceNum,
+                            res.data[0].lineNum
                        ],
                        label: {
                            show: true,
@@ -212,13 +212,18 @@ const info = (row: any) => {
            // str.replace(/\(\d+\)/, "\n$&");
            xAxis: {
                data: res.data.map((item: any) => {
-                    return item.orgName.length > 4
-                        ? item.orgName.slice(0, 4) + '\n ' + item.orgName.slice(4)
-                        : item.orgName
+                    let title = item.orgName.replace(/\(\d+\)/g, '')
+                    // return title.length > 5
+                    return title.length > 6
+                        ? title.length > 11
+                            ? title.slice(0, 5) + '\n ' + title.slice(5, 10) + '\n ' + title.slice(10)
+                            : title.slice(0, 5) + '\n ' + title.slice(5)
+                        : title
                }),
                axisLabel: {
                    color: '#000',
-                    fontSize: 12
+                    fontSize: 12,
+                    interval: 0
                }
            },
            yAxis: {
@@ -229,7 +234,8 @@ const info = (row: any) => {
            grid: {
                top: '30px',
                left: '0px',
-                right: '20px'
+                right: '20px',
+                bottom: 0
            },
            options: {
                dataZoom: null,
--- a/src/views/pqs/qualityInspeection/panorama/components/cityMapR.vue
+++ b/src/views/pqs/qualityInspeection/panorama/components/cityMapR.vue
@@ -197,32 +197,36 @@ const info = (row: any) => {
            {
                name:
                    '电压偏差：' +
-                    (res.data[0].vdevQualifyData == 3.14159 ? '暂无数据' : res.data[0].vdevQualifyData + '%'),
-                value: res.data[0].vdevQualifyData == 3.14159 ? '暂无数据' : res.data[0].vdevQualifyData
+                    (res.data[0]?.vdevQualifyData == 3.14159 ? '暂无数据' : res.data[0]?.vdevQualifyData || 0 + '%'),
+                value: res.data[0]?.vdevQualifyData == 3.14159 ? '暂无数据' : res.data[0]?.vdevQualifyData
            },
            {
                name:
                    '频率偏差：' +
-                    (res.data[0].freqQualifyData == 3.14159 ? '暂无数据' : res.data[0].freqQualifyData + '%'),
-                value: res.data[0].freqQualifyData == 3.14159 ? '暂无数据' : res.data[0].freqQualifyData
+                    (res.data[0]?.freqQualifyData == 3.14159 ? '暂无数据' : res.data[0]?.freqQualifyData || 0 + '%'),
+                value: res.data[0]?.freqQualifyData == 3.14159 ? '暂无数据' : res.data[0]?.freqQualifyData
            },
            {
                name:
                    '电压总谐波畸变率：' +
-                    (res.data[0].harmQualifyData == 3.14159 ? '暂无数据' : res.data[0].harmQualifyData + '%'),
-                value: res.data[0].harmQualifyData == 3.14159 ? '暂无数据' : res.data[0].harmQualifyData
+                    (res.data[0]?.harmQualifyData == 3.14159 ? '暂无数据' : res.data[0]?.harmQualifyData || 0 + '%'),
+                value: res.data[0]?.harmQualifyData == 3.14159 ? '暂无数据' : res.data[0]?.harmQualifyData
            },
            {
                name:
                    '闪变：' +
-                    (res.data[0].flickerQualifyData == 3.14159 ? '暂无数据' : res.data[0].flickerQualifyData + '%'),
-                value: res.data[0].flickerQualifyData == 3.14159 ? '暂无数据' : res.data[0].flickerQualifyData
+                    (res.data[0]?.flickerQualifyData == 3.14159
+                        ? '暂无数据'
+                        : res.data[0]?.flickerQualifyData || 0 + '%'),
+                value: res.data[0]?.flickerQualifyData == 3.14159 ? '暂无数据' : res.data[0]?.flickerQualifyData
            },
            {
                name:
                    '三相电压不平衡度：' +
-                    (res.data[0].unbalanceQualifyData == 3.14159 ? '暂无数据' : res.data[0].unbalanceQualifyData + '%'),
-                value: res.data[0].unbalanceQualifyData == 3.14159 ? '暂无数据' : res.data[0].unbalanceQualifyData
+                    (res.data[0]?.unbalanceQualifyData == 3.14159
+                        ? '暂无数据'
+                        : res.data[0]?.unbalanceQualifyData || 0 + '%'),
+                value: res.data[0]?.unbalanceQualifyData == 3.14159 ? '暂无数据' : res.data[0]?.unbalanceQualifyData
            }
        ]

@@ -265,7 +269,7 @@ const info = (row: any) => {
        function getData(data: any) {
            var res: any = {
                series: [],
-                yAxis: []
+            
            }
            for (let i = 0; i < data.length; i++) {
                res.series.push({
@@ -280,11 +284,11 @@ const info = (row: any) => {

                    data: [
                        {
-                            value: data[i].value,
+                            value: data[i].value || 0,
                            name: data[i].name
                        },
                        {
-                            value: 100 - data[i].value,
+                            value:  100 - (data[i].value||0),
                            name: '',
                            itemStyle: {
                                color: 'rgba(0,0,0,0)',
--- a/src/views/pqs/qualityInspeection/panorama/components/map.vue
+++ b/src/views/pqs/qualityInspeection/panorama/components/map.vue
@@ -545,7 +545,9 @@ const addLayer = () => {
                    </div>`
                )
                .addTo(map.value)
-            document.getElementById('ids').onclick = function (v: any) {
+            let html = document.getElementById('ids')
+            if (html)
+                html.onclick = function (v: any) {
                    // console.log(e.target.dataset.sid)
                    emit('drop', v.target.dataset.sid)
                }
@@ -556,8 +558,8 @@ 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()
+        if (map.value.getZoom() > 8.5 || map.value.getZoom() < 6) {
+        
            rPopList.value.map((item: any) => item.remove())
            rPopList.value = []
        } else {
@@ -697,6 +699,7 @@ const addMarkers = async (row?: any, key?: any) => {
        features: [...tempFeatureT, ...tempFeatureZ]
    })
 }
+// 统计弹框数据
 const GridDiagramArea = () => {
    let List = [
        {
@@ -759,29 +762,43 @@ const radiusPop = (k?: number) => {
        rPopList.value = []
    }

-    mapList.value.forEach((item: any) => {
+    mapList.value.forEach((item: any, i: number) => {
        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   id="clickZs${i}" data-line="${item.lineList}" data-alarm="${
+                item.alarmList
+            }" data-key="0">总数<br/>${item.lineNum}</div>
+                            <div id="clickZx${i}"  data-alarm="${item.onlineList}" data-key="0">在线<br/>${
+                item.onlineNum
+            }</div>
+                            <div id="clickGj${i}" data-line="" data-alarm="${item.alarmList}" data-key="1">告警<br/>${
+                item.alarm
+            }</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 id="clickZs${i}" data-line="${item.lineList}" data-alarm="${
+                item.alarmSubList
+            }" data-key="1">总数<br/>${item.subNum}</div>
+                            <div id="clickGj${i}" data-line="" data-alarm="${item.alarmSubList}" data-key="1">告警<br/>${
+                item.alarmSubNum
+            }</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 id="clickZs${i}" data-line="${item.lineList}" data-alarm="${
+                item.onlineList
+            }" data-key="2">总数<br/>${item.deviceNum}</div>
+                            <div id="clickGj${i}" data-line="" data-alarm="${item.onlineList}" data-key="2">在运<br/>${
+                item.onDevice
+            }</div>
                        </div>`
        }

@@ -793,11 +810,7 @@ const radiusPop = (k?: number) => {
        })
            .setLngLat(item.LngLat)
            .setHTML(
-                ` <div class="sgmap-popup-content" style="background-color: ${item.background};">
-
-
-
-
+                `<div class="sgmap-popup-content" style="background-color: ${item.background};">
                    <div style="display: flex;">` +
                    infoText +
                    ` </div>
@@ -805,8 +818,35 @@ const radiusPop = (k?: number) => {
            )
            .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)
+            }
+        if (html1)
+            html1.onclick = function (v: any) {
+                popMarkers([], v.target.dataset.alarm?.split(','), v.target.dataset.key)
+            }
+        if (html2)
+            html2.onclick = function (v: any) {
+                
+                popMarkers([], v.target.dataset.alarm?.split(','), v.target.dataset.key)
+            }
    })
 }
+// 点击弹框调用点加载
+const popMarkers = (coutList: any, alarmList: any, key: any) => {
+    addMarkers(
+        {
+            coutList: coutList,
+            alarmList: alarmList,
+            type: 1
+        },
+        key
+    )
+}

 const locatePositions = (e: any) => {
    if (map.value != null) {
@@ -814,11 +854,17 @@ const locatePositions = (e: any) => {
        // 加载点
        addMarkers()

-        powerManageGridMap.value.drillDown({
+        powerManageGridMap.value.drillDown(
+            {
                // 判断超高压
-            orgId: e.data.code == '1100F3DE246A6FADE050007F01006CBE' ? '1100F3DE20806FADE050007F01006CBE' : e.data.code,
+                orgId:
+                    e.data.code == '1100F3DE246A6FADE050007F01006CBE'
+                        ? '1100F3DE20806FADE050007F01006CBE'
+                        : e.data.code,
                onlyDisplay: true
-        })
+            },
+           
+        )
    }
 }
 // 电网查询功能
--- a/src/views/pqs/qualityInspeection/panorama/components/mapL.vue
+++ b/src/views/pqs/qualityInspeection/panorama/components/mapL.vue
@@ -29,7 +29,7 @@
                                {{ item.list[4].numOne }}
                            </span>
                        </div>
-                        <div class="cor">
+                        <div class="cor" :style="i == 0 ? 'flex:1.2;' : ''">
                            <img :src="item.img[1]" />
                            {{ item.titleT[1] }}：
                            <span
@@ -165,7 +165,7 @@ const list: any = ref([
        ],
        ratioTitle: '告警率',
        ratio: 0,
-        titleT: ['总数', '在线', '告警'],
+        titleT: ['总数', '当前在线', '告警'],
        color: ['#000', '#2dcd28', '#bd3124'],
        list: [
            {
--- a/src/views/pqs/qualityInspeection/panorama/components/mapR.vue
+++ b/src/views/pqs/qualityInspeection/panorama/components/mapR.vue
@@ -379,7 +379,7 @@ const transientChange = () => {
        WTList.value = data
    })
 }
-const format = (percentage: any) => Math.round(percentage * mun.value) / 100 + '条'
+const format = (percentage: any) => (Math.round(percentage * mun.value) / 100).toFixed(0) + '条'

 defineExpose({ info, show })
 </script>
@@ -459,9 +459,11 @@ defineExpose({ info, show })

    .harmonic {
        display: grid;
+        overflow-y: auto;
        .progress {
            display: flex;
            align-items: center;
+ 
            .text {
                width: 50px;
                font-size: 12px;
--- a/src/views/pqs/qualityInspeection/panorama/components/style/map.scss
+++ b/src/views/pqs/qualityInspeection/panorama/components/style/map.scss
@@ -184,6 +184,9 @@
        display: flex;
        justify-content: space-around;
        text-align: center;
+        div{
+            cursor: pointer;
+        }
    }
 }

--- a/src/views/pqs/qualityInspeection/panorama/index.vue
+++ b/src/views/pqs/qualityInspeection/panorama/index.vue
@@ -94,7 +94,7 @@ const form: any = ref({
 const height = mainHeight(10)
 // 获取区域名称
 const changeValue = (e: any) => {
-    // mapRef.value.locatePositions(e)
+    //mapRef.value.locatePositions(e)
    form.value.orgNo = e.data.id //list.filter((item: any) => item.code == e.orgId)[0]?.id || dictData.state.area[0].id
    options.value[0].name = e.data.areaName

@@ -118,12 +118,12 @@ const infoShow = (e: boolean) => {
 }
 // 地图控制图层
 const LookMap = (row: any, key?: any) => {
-    // mapRef.value.addMarkers({ ...row, type: 1 }, key)
+    //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)
+    //mapRef.value.radiusPop(k)
+    //mapRef.value.flyTo({ coordinate: [116.84428600000001, 40.57707185292256] }, 6.709267680647425)
 }
 const info = () => {
    form.value.startTime = datePickerRef.value.timeValue[0]
@@ -133,7 +133,7 @@ const info = () => {

    form.value.type = datePickerRef.value.interval

-    // mapRef.value.grids(form.value)
+    //mapRef.value.grids(form.value)
    if (control.value == 1) {
        mapLRef.value.info(form.value)
        mapRRef.value.info(form.value)
--- a/src/views/system/auth/userList/popupEdit.vue
+++ b/src/views/system/auth/userList/popupEdit.vue
@@ -1,7 +1,6 @@
 <template>
    <el-dialog draggable class="cn-operate-dialog" v-model="dialogVisible" :title="title">
-        <el-scrollbar>
-            <el-form :inline="true" :model="form" label-width="120px" :rules="rules">
+        <el-form :model="form" class="form-two" label-width="auto" :rules="rules">
            <el-form-item label="用户名" prop="name">
                <el-input v-model="form.name" placeholder="请输入昵称" />
            </el-form-item>
@@ -57,8 +56,8 @@
            <el-form-item label="结束IP" prop="limitIpEnd">
                <el-input v-model="form.limitIpEnd" placeholder="请输入描述" />
            </el-form-item>
-                <el-form-item label="时间段" prop="limitTime">
-                    <el-slider v-model="form.limitTime" range show-stops :max="24" />
+            <el-form-item label="时间段" prop="limitTime" >
+                <el-slider v-model="form.limitTime" range style="width: 80%" show-stops :max="24" />
            </el-form-item>
            <el-form-item label="短信通知" prop="smsNotice">
                <el-radio-group v-model="form.smsNotice">
@@ -89,13 +88,10 @@
                </div>
            </el-form-item>
        </el-form>
-        </el-scrollbar>

        <template #footer>
-            <span class="dialog-footer">
            <el-button @click="dialogVisible = false">取消</el-button>
            <el-button type="primary" @click="submit">确认</el-button>
-            </span>
        </template>
    </el-dialog>
 </template>
@@ -229,7 +225,7 @@ const open = (text: string, data?: anyObj) => {
            form[key] = ''
        }
        form.casualUser = 1
-        form.limitTime = [0, 23]
+        form.limitTime = [0, 24]
        form.role = []
        form.smsNotice = 0
        form.emailNotice = 0