修改echarts

src/api/Region/index.ts

@@ -0,0 +1,10 @@
+import createAxios from '@/utils/request'
+
+//监测网分布查询
+export function getAreaLineDetail(data:any) {
+    return createAxios({
+        url: '/event-boot/area/getAreaLineDetail',
+        method: 'post',
+        data
+    })
+}

src/api/auth.ts

@@ -6,3 +6,9 @@ export function getRouteMenu() {
         url: '/user-boot/function/getRouteMenu'
     })
 }
+//获取字典
+export function dictDataCache() {
+    return createAxios({
+        url: '/system-boot/dictType/dictDataCache'
+    })
+}

src/components/echarts/MyEchart.vue

@@ -50,19 +50,16 @@ const initChart = () => {
         },
         legend: {
             ...(props.options.xAxis.legend || null),
-            right: 80,
+            right: 20,
             top: 0,
-            itemGap: 28,
+            itemGap: 10,
             itemStyle: {},
             textStyle: {
-                rich: {
+                fontSize: 12,
-                    a: {
-                        verticalAlign: 'middle'
-                    }
-                },
-
                 padding: [2, 0, 0, 0] //[上、右、下、左]
-            }
+            },
+            itemWidth: 15,
+            itemHeight: 10
         },
 
         grid: {

src/layouts/admin/index.vue

@@ -7,6 +7,7 @@ import { reactive } from 'vue'
 import { useConfig } from '@/stores/config'
 import { useNavTabs } from '@/stores/navTabs'
 import { useAdminInfo } from '@/stores/adminInfo'
+import { useDictData } from '@/stores/dictData'
 import { useRoute } from 'vue-router'
 import Default from '@/layouts/admin/container/default.vue'
 import Classic from '@/layouts/admin/container/classic.vue'
@@ -19,7 +20,7 @@ import { useEventListener } from '@vueuse/core'
 import { isEmpty } from 'lodash-es'
 import { setNavTabsWidth } from '@/utils/layout'
 import { adminBaseRoutePath } from '@/router/static'
-import { getRouteMenu } from '@/api/auth'
+import { getRouteMenu, dictDataCache } from '@/api/auth'
 
 defineOptions({
     components: { Default, Classic, Streamline, Double }
@@ -29,7 +30,7 @@ const navTabs = useNavTabs()
 const config = useConfig()
 const route = useRoute()
 const adminInfo = useAdminInfo()
-
+const DictData = useDictData()
 const state = reactive({
     autoMenuCollapseLock: false
 })
@@ -125,6 +126,21 @@ const init = () => {
                     keepalive: 'voltage/sags/operationsManagement',
                     extend: 'none',
                     children: []
+                },
+                {
+                    id: 2,
+                    pid: 3,
+                    type: 'menu',
+                    title: '区域',
+                    name: 'Event-boot/Region/distribution',
+                    path: 'Event-boot/Region/distribution',
+                    icon: 'el-icon-Management',
+                    menu_type: 'tab',
+                    url: '',
+                    component: '/src/views/Event-boot/Region/distribution.vue',
+                    keepalive: 'Event-boot/Region/distribution',
+                    extend: 'none',
+                    children: []
                 }
             ]
         },
@@ -207,6 +223,9 @@ const init = () => {
         console.log(firstRoute)
         if (firstRoute) routePush(firstRoute.path)
     })
+    dictDataCache().then(res => {
+        DictData.setBasicData(res.data)
+    })
 }
 
 const onAdaptiveLayout = () => {

src/styles/element.scss

@@ -1,5 +1,6 @@
 /* 修复 Chrome 浏览器输入框内选中字符行高异常的bug-s */
 .el-input .el-input__inner {
+    height: 30px;
     line-height: calc(var(--el-input-height, 40px) - 4px);
 }
 /* 修复 Chrome 浏览器输入框内选中字符行高异常的bug-e */

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

@@ -0,0 +1,64 @@
+<template>
+    <div class="default-main">
+        <el-form :inline="true" :model="formInline" class="demo-form-inline">
+            <el-form-item label="区域">
+                <el-input v-model="deptIndex" placeholder="请选择区域" clearable />
+            </el-form-item>
+            <el-form-item label="统计类型:">
+                <el-select
+                    v-model="formInline.statisticalType"
+                    value-key="id"
+                    placeholder="请选择统计类型"
+                    size="large"
+                >
+                    <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item" />
+                </el-select>
+                <!-- <el-input v-model="formInline.statisticalType" placeholder="请选择区域" clearable /> -->
+            </el-form-item>
+
+            <el-form-item>
+                <el-button type="primary" @click="onSubmit">查询</el-button>
+            </el-form-item>
+        </el-form>
+        <div>
+            <el-row :gutter="20">
+                <el-col :span="12">
+                    <MyEchartMap :id="'LearnMap'" :datas="[]"/>
+                </el-col>
+                <el-col :span="12">1231</el-col>
+            </el-row>
+        </div>
+    </div>
+</template>
+<script setup lang="ts">
+import { getAreaLineDetail } from '@/api/Region'
+import { useDictData } from '@/stores/dictData'
+import MyEchartMap from '@/components/echarts/MyEchartMap.vue'
+import { ref, reactive, onMounted, provide } from 'vue'
+const options = ref<object[]>([])
+const deptIndex = ref<string>('')
+const DictData = useDictData()
+const formInline = reactive({
+    deptIndex: '5699e5916a18a6381e1ac92da5bd2628',
+    monitorFlag: 2,
+    powerFlag: 2,
+    serverName: 'event-boot',
+    statisticalType: {}
+})
+const info = () => {
+    options.value = DictData.getBasicData('Statistical_Type')
+    formInline.statisticalType = options.value[0]
+}
+
+const onSubmit = () => {
+    getAreaLineDetail(formInline)
+        .then(res => {})
+        .catch(err => {})
+}
+
+onMounted(() => {
+    info()
+    onSubmit()
+})
+</script>
+<style lang="scss" scoped></style>