提交

src/components/echarts/MyEchartMap.vue

@@ -22,14 +22,17 @@ const fetchConfig = async (name: string) => {
 }
 // fetchConfig()
 
-const emit = defineEmits(['getRegionByRegion'])
+const emit = defineEmits(['getRegionByRegion', 'eliminate'])
 onMounted(() => {})
 
 const GetEchar = async (name: string) => {
     let chartDom = document.getElementById('chartMap')
-    myCharts.value?.resize()
+    myCharts.value?.dispose()
     myCharts.value = echarts.init(chartDom)
-    echarts.registerMap('china', await fetchConfig(name)) //注册可用的地图
+    if (name != '中国') {
+        showCircle.value = true
+    }
+    echarts.registerMap(name, await fetchConfig(name)) //注册可用的地图
     let option = {
         title: {
             left: 'center',
@@ -77,9 +80,10 @@ const GetEchar = async (name: string) => {
             '#B3B3B3'
         ],
         geo: {
-            map: 'china',
+            map: name,
-            zoom: 1,
+            zoom: 1.2,
-
+            // top: 0,
+            //    bottom: 0,
             roam: true,
             label: {
                 normal: {
@@ -124,20 +128,20 @@ const GetEchar = async (name: string) => {
                     borderWidth: 0
                 }
             },
-            regions: [
+            // regions: [
-                {
+            //     {
-                    name: '南海诸岛',
+            //         name: '南海诸岛',
-                    itemStyle: {
+            //         itemStyle: {
-                        // 隐藏地图
+            //             // 隐藏地图
-                        normal: {
+            //             normal: {
-                            opacity: 0 // 为 0 时不绘制该图形
+            //                 opacity: 0 // 为 0 时不绘制该图形
-                        }
+            //             }
-                    },
+            //         },
-                    label: {
+            //         label: {
-                        show: false // 隐藏文字
+            //             show: false // 隐藏文字
-                    }
+            //         }
-                }
+            //     }
-            ]
+            // ]
         },
         ...props.options.options
     }
@@ -149,9 +153,8 @@ const GetEchar = async (name: string) => {
     myCharts.value.off('click')
     myCharts.value.on('click', (e: any) => {
         if (name == '中国' && e.componentIndex == 0) {
-            GetEchar(e.name)
             MapReturn(e.name)
-            showCircle.value = true
+
             // console.log('🚀 ~ file: MyEchartMap.vue:156 ~ myCharts.value.on ~  MapReturn(e.name):', MapReturn(e.name))
         }
     })
@@ -160,21 +163,26 @@ const GetEchar = async (name: string) => {
 const MapReturn = (name: string) => {
     let area = dictData.state.area[0].children
     let list = {}
-    // break;
+
+    let flag = true
+
     for (let i = 0; i < area.length; i++) {
         if (area[i].name == name) {
-            list = area[i]
+            console.log(11111)
-            break
-        } else {
-            list = dictData.state.area[0]
-        }
-    }
 
+            list = area[i]
+            flag = false
             emit('getRegionByRegion', list)
+            break
+        }
+    }
+    if (flag) {
+        emit('eliminate', name)
+    }
 }
 // 返回
 const circle = () => {
-    GetEchar('中国')
+    emit('getRegionByRegion', dictData.state.area[0])
     showCircle.value = false
 }
 const resizeHandler = () => {

src/components/form/area/index.vue

@@ -3,7 +3,7 @@
 </template>
 
 <script lang="ts" setup>
-import { defineComponent, ref } from 'vue'
+import { defineComponent, ref, watch } from 'vue'
 
 defineOptions({
     name: 'Area'
@@ -27,8 +27,16 @@ const change = (e: any) => {
         areaName.value = cascader.value.getCheckedNodes()[0].pathLabels[1]
     }
 }
+// watch(
+//     () => $attrs,
+//     (newVal, oldVal) => {
+//         console.log(123)
 
-defineExpose({ areaName })
+//         // GetEchar('中国')
+//     }
+// )
+
+defineExpose({ areaName, change })
 </script>
 
 <style scoped></style>

src/views/Event-boot/Region/distribution.vue

@@ -20,13 +20,14 @@
                 <el-button type="primary" @click="onSubmit">查询</el-button>
             </el-form-item>
         </el-form>
-        <div>
+        <div v-loading="loading">
             <el-row :gutter="20">
                 <el-col :span="12">
                     <MyEchartMap
                         ref="EchartMap"
                         :options="echartMapList"
                         class="map"
+                        @eliminate="eliminate"
                         @getRegionByRegion="getRegionByRegion"
                     />
                 </el-col>
@@ -77,6 +78,7 @@ const echartList = ref({})
 const titleA = ref('')
 const distributionData = ref([])
 const area = ref()
+const loading = ref(true)
 
 const formInline = reactive({
     deptIndex: dictData.state.area[0].id,
@@ -87,15 +89,17 @@ const formInline = reactive({
 })
 
 const onSubmit = () => {
+    loading.value = true
     titleA.value = formInline.statisticalType.name
     getAreaLineDetail(formInline).then(res => {
+        area.value.change()
         // 处理地图数据
         map(res)
         tabulation(res)
         histogram(res)
 
         EchartMap.value.GetEchar(area.value.areaName)
-        console.log("🚀 ~ file: distribution.vue:98 ~ getAreaLineDetail ~ area.value.areaName:", area.value.areaName)
+        loading.value = false
     })
 }
 
@@ -104,6 +108,11 @@ const getRegionByRegion = (list: any) => {
     formInline.deptIndex = list.id
     onSubmit()
 }
+// 消除点
+const eliminate = (name: string) => {
+    echartMapList.value.options.series = []
+    EchartMap.value.GetEchar(name)
+}
 // 地图数处理
 const map = (res: any) => {
     echartMapList.value = {
@@ -233,7 +242,7 @@ const histogram = (res: any) => {
                     : titleA.value == '干扰源类型'
                     ? '干扰源类型'
                     : titleA.value == '电网拓扑'
-                    ? '区域'
+                    ? area.value.areaName
                     : '' // 给X轴加单位
         },
         tooltip: {

src/views/dashboard/index.vue

@@ -11,7 +11,7 @@
                 <el-button type="primary" @click="onSubmit">查询</el-button>
             </el-form-item>
         </el-form>
-        <el-tabs v-model="activeName" type="border-card">
+        <el-tabs v-model="activeName" type="border-card" v-loading="loading">
             <el-tab-pane label="图形" name="1">
                 <Echart :list="list" ref="echarts" />
             </el-tab-pane>
@@ -36,6 +36,7 @@ const list = ref([])
 const echarts = ref()
 const table = ref()
 const dictData = useDictData()
+const loading = ref(true)
 const formInline = reactive({
     deptInd: '',
     deptIndex: dictData.state.area[0].id,
@@ -57,12 +58,14 @@ const formInline = reactive({
 })
 // const locale=zhCn
 const onSubmit = async () => {
+    loading.value = true
     await getAreaCalculation(formInline).then(res => {
         list.value = res.data
         echarts.value.Processing(res.data.areaStatistics)
         echarts.value.Grade(res.data.voltageStatistics)
         echarts.value.Relation(res.data.monthlyStatistics)
         table.value.info(res.data)
+        loading.value = false
     })
 }