微调 全景展示

src/components/echarts/MyEchartMap.vue

@@ -26,7 +26,7 @@ const fetchConfig = async (name: string) => {
 // fetchConfig()
 
 const emit = defineEmits(['getRegionByRegion', 'eliminate', 'clickMap'])
-onMounted(() => { })
+onMounted(() => {})
 
 const GetEchar = async (name: string) => {
     let chartDom = document.getElementById('chartMap')
@@ -187,7 +187,6 @@ const GetEchar = async (name: string) => {
             }
         }
     })
-
 }
 
 const MapReturn = (name: string) => {
@@ -213,6 +212,7 @@ const circle = () => {
 }
 const resizeHandler = () => {
     myCharts.value?.resize()
+    myCharts.value?.setOption(myCharts.value.getOption()) // 强制更新配置
 }
 onBeforeUnmount(() => {
     window.removeEventListener('resize', resizeHandler)

src/views/pqs/harmonicMonitoring/detailed/dirtyAreas/index.vue

@@ -11,6 +11,11 @@
                         <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item" />
                     </el-select>
                 </el-form-item>
+                <el-form-item label="电网标志">
+                    <el-select v-model="tableStore.table.params.powerFlag" placeholder="请选择电网标志">
+                        <el-option v-for="item in sign" :key="item.id" :label="item.label" :value="item.id" />
+                    </el-select>
+                </el-form-item>
                 <el-form-item>
                     <el-button type="primary" icon="el-icon-DataAnalysis" @click="rankingClick(null, true)">
                         排名前10监测点
@@ -21,28 +26,21 @@
         <div v-loading="tableStore.table.loading" class="pr10">
             <el-row>
                 <el-col :span="12" class="pd10" style="position: relative">
-                    <el-radio-group v-model="radio1" class="ml10 group" @change="radioChange" size="small">
+                    <div class="legend">
-                        <el-radio-button label="列表" :value="0" />
+                        <el-tag style="background: #339966" class="tag" size="small">1级</el-tag>
-                        <el-radio-button label="图形" :value="1" />
+                        <span style="color: #339966" class="text">:无污染(0,1]</span>
-                    </el-radio-group>
+                        <el-tag style="background: #3399ff" class="tag" size="small">2级</el-tag>
-                    <el-carousel
+                        <span style="color: #3399ff" class="text">:轻微污染(1,1.2]</span>
-                        ref="carouselRef"
+                        <el-tag style="background: #ffcc33" class="tag" size="small">3级</el-tag>
-                        :autoplay="false"
+                        <span style="color: #ffcc33" class="text">:轻度污染(1.2,1.6]</span>
-                        :arrow="'never'"
+                        <el-tag style="background: #ff9900" class="tag" size="small">4级</el-tag>
-                        :height="`calc(${layout.height} + 35px)`"
+                        <span style="color: #ff9900" class="text">:中度污染(1.6,2]</span>
-                    >
+                        <el-tag style="background: #cc0000" class="tag" size="small">5级</el-tag>
-                        <el-carousel-item style="padding: 0 1px">
+                        <span style="color: #cc0000" class="text">:重度污染(2,+∞)</span>
-                            <el-tag style="background: #339966" class="tag" size="small">1级</el-tag>
+                    </div>
-                            <span style="color: #339966" class="text">:无污染(0,1]</span>
+                    <el-tabs v-model="radio1" type="border-card" @tab-change="handleTabChange">
-                            <el-tag style="background: #3399ff" class="tag" size="small">2级</el-tag>
+                        <el-tab-pane label="列表" :name="0">
-                            <span style="color: #3399ff" class="text">:轻微污染(1,1.2]</span>
+                            <div :style="{ height: layout.height }" style="overflow-y: auto">
-                            <el-tag style="background: #ffcc33" class="tag" size="small">3级</el-tag>
-                            <span style="color: #ffcc33" class="text">:轻度污染(1.2,1.6]</span>
-                            <el-tag style="background: #ff9900" class="tag" size="small">4级</el-tag>
-                            <span style="color: #ff9900" class="text">:中度污染(1.6,2]</span>
-                            <el-tag style="background: #cc0000" class="tag" size="small">5级</el-tag>
-                            <span style="color: #cc0000" class="text">:重度污染(2,+∞)</span>
-                            <div :style="{ height: layout.height }" style="overflow-y: auto" class="mt10">
                                 <div class="cardBox">
                                     <el-card v-for="(item, index) in tableStore.table.data" :key="index">
                                         <template #header>
@@ -161,11 +159,18 @@
                                     </el-card>
                                 </div>
                             </div>
-                        </el-carousel-item>
+                        </el-tab-pane>
-                        <el-carousel-item>
+                        <el-tab-pane label="图形" :name="1">
-                            <MyEchartMap ref="EchartMap" :options="echartMapList" class="map" />
+                            <MyEchartMap
-                        </el-carousel-item>
+                                :style="layout"
-                    </el-carousel>
+                                style="width: 100%"
+                                id="EchartMap"
+                                ref="EchartMap"
+                                :options="echartMapList"
+                                class="map"
+                            />
+                        </el-tab-pane>
+                    </el-tabs>
                 </el-col>
                 <el-col :span="12">
                     <my-echart class="tall" :options="echartList" />
@@ -260,15 +265,16 @@ const options = dictData.getBasicData('Pollution_Statis', [
     'Plt',
     'Freq_Dev'
 ])
+const sign = ref([
+    { label: '电网侧', id: '0' },
+    { label: '用户侧', id: '1' }
+])
 const tableStore = new TableStore({
     url: '/harmonic-boot/PollutionSubstation/deptSubstationRelations',
     method: 'POST',
     column: [],
     loadCallback: () => {
-        map(tableStore.table.data)
         histogram(tableStore.table.data)
-        EchartMap.value.GetEchar(dictData.state.area[0].name)
-        header.value.areaRef.change()
     }
 })
 provide('tableStore', tableStore)
@@ -276,11 +282,16 @@ provide('tableStore', tableStore)
 tableStore.table.params.deptIndex = dictData.state.area[0].id
 tableStore.table.params.statisticalType = options[0]
 tableStore.table.params.monitorFlag = 2
-tableStore.table.params.powerFlag = 2
+tableStore.table.params.powerFlag = '2'
 tableStore.table.params.reportFlag = 3
 tableStore.table.params.serverName = 'event-boot'
-const radioChange = (val: any) => {
+const handleTabChange = (val: any) => {
-    carouselRef.value.setActiveItem(val)
+    if (val == 0) return
+    setTimeout(() => {
+        map(tableStore.table.data)
+        EchartMap.value.GetEchar(dictData.state.area[0].name)
+        // header.value.areaRef.change()
+    }, 100)
 }
 // 地图数处理
 const rankingClick = () => {
@@ -629,6 +640,7 @@ const map = (res: any) => {
             max: 2,
             left: 25,
             bottom: 40,
+            show: false,
             pieces: [
                 {
                     gt: 2,
@@ -686,7 +698,7 @@ onMounted(() => {
         tableStore.index()
     }, 10)
 })
-const layout = mainHeight(133) as any
+const layout = mainHeight(160) as any
 const layout1 = mainHeight(93) as any
 </script>
 <style lang="scss" scoped>
@@ -767,14 +779,15 @@ const layout1 = mainHeight(93) as any
 }
 .map {
     height: v-bind('layout.height');
+    width: 100%;
 }
 :deep(.el-carousel__indicators) {
     display: none;
 }
-.group {
+.legend {
     position: absolute;
-    right: 10px;
+    right: 15px;
-    top: 10px;
+    top: 17px;
     z-index: 99;
 }
 </style>

src/views/pqs/panorama/components/details/steadyState.vue

@@ -10,8 +10,11 @@
                 <div class="boxSteps">
                     <el-steps>
                         <template v-for="(item, i) in Voltage">
-                            <el-step :class="active == i ? 'highlight' : ''" :title="item.name"
+                            <el-step
-                                @click="handleClick(i)"></el-step>
+                                :class="active == i ? 'highlight' : ''"
+                                :title="item.name"
+                                @click="handleClick(i)"
+                            ></el-step>
                         </template>
                     </el-steps>
                 </div>
@@ -56,12 +59,12 @@
                 <vxe-colgroup :title="item" v-for="(item, i) in title">
                     <vxe-column title="监测点数	" field="overNum">
                         <template #default="scope">
-                            <span>{{ scope.row.list[i].overNum }}</span>
+                            <span>{{ scope.row.list == null ? '' : scope.row.list[i].overNum }}</span>
                         </template>
                     </vxe-column>
                     <vxe-column title="天数" field="overDay">
                         <template #default="scope">
-                            <span>{{ scope.row.list[i].overDay }}</span>
+                            <span>{{ scope.row.list == null ? '' : scope.row.list[i].overDay }}</span>
                         </template>
                     </vxe-column>
                 </vxe-colgroup>
@@ -108,7 +111,8 @@ const echart = (row: any) => {
 
     let chart = echarts.init(chartRef.value as HTMLDivElement)
 
-    let dataname = ['频率偏差(Hz)',
+    let dataname = [
+        '频率偏差(Hz)',
         '电压偏差(%)',
         '电压总谐波畸变率(%)',
         '三相电压不平衡度(%)',
@@ -116,7 +120,8 @@ const echart = (row: any) => {
         '谐波电压(%)',
         '谐波电流(%)',
         '间谐波电压(%)',
-        '负序电流(A)']
+        '负序电流(A)'
+    ]
     // let datamax = [100, 100, 100, 100, 100, 100]
     let indicator = []
     for (let i = 0; i < dataname.length; i++) {