[Style 0000] 项目矿山信息、地图样式优化

src/layouts/default/feature/SimpleMap.vue

@@ -1,21 +1,30 @@
 <template>
   <div ref="mapContainer" class="map-container"></div>
-  <div v-if="appStore.getSimpleMapParams.mineCode" class="map-reset-btn">
+  <div v-if="!isTopLevel" class="map-reset-btn">
     <Button type="primary" @click="reset">重置</Button>
   </div>
 </template>
 
 <script lang="ts" setup>
-  import { ref, onMounted, onUnmounted } from 'vue';
+  import { ref, onMounted, onUnmounted, computed } from 'vue';
   import L from 'leaflet';
   import 'leaflet/dist/leaflet.css';
   import { Button } from 'ant-design-vue';
   import { getGoafAlarmLevel, getMarkers } from '/@/api/sys/map';
   import { DEFAULT_LAYER_ID, regionColorMap, tileLayerConfigs, generatePopupContent, getRootMarkerIcon } from './simpleMap.data';
   import { useAppStore } from '/@/store/modules/app';
+  import { isEmpty } from '/@/utils/is';
+  import { useRoute } from 'vue-router';
+  import { PageEnum } from '/@/enums/pageEnum';
 
   const appStore = useAppStore();
+  const route = useRoute();
   const mapContainer = ref(null);
+
+  const isTopLevel = computed(() => {
+    return isEmpty(appStore.getSimpleMapParams);
+  });
+
   let map: L.Map | null = null;
 
   // 图层组 Map（基于所有区域编码初始化）
@@ -56,8 +65,11 @@
     });
 
     initTileLayers();
-    await initMarkers();
-    await initGeoJSON();
+
+    if (route.path === PageEnum.BASE_HOME) {
+      await initMarkers();
+      await initGeoJSON();
+    }
 
     layerMap.get(DEFAULT_LAYER_ID)?.addTo(map);
   });

src/layouts/default/feature/simpleMap.data.ts

@@ -122,7 +122,7 @@ export function getRootMarkerIcon(size: number, count: number, color: string) {
           y="${size / 2}"
           text-anchor="middle"
           dominant-baseline="middle"
-          fill="gray"
+          fill="#ddd"
           font-size="16"
           font-weight="bold"
           font-family="Arial, sans-serif"

src/views/dashboard/basicInfo/minesInfo/index.vue

@@ -1,6 +1,6 @@
 <!-- eslint-disable vue/multi-word-component-names -->
 <template>
-  <BasicTable style="padding: 0" @register="registerRealtimeTable">
+  <BasicTable @register="registerRealtimeTable">
     <template #resetBefore>
       <a-button type="default" class="ml-8px" preIcon="mdi:download" @click="onExportXls"> 导出 </a-button>
     </template>
@@ -19,148 +19,148 @@
 </template>
 
 <script setup lang="ts">
-import { ref, nextTick, computed, onMounted } from 'vue';
-import { useRouter } from 'vue-router';
-import { BasicTable } from '/@/components/Table';
-import { SvgIcon } from '/@/components/Icon';
-import { message } from 'ant-design-vue';
-// 引入动态列/表单配置函数 + 类型
-import { getColumns, getSearchFormSchema, type ProductionStatusMap } from './minesInfo.data';
-import { getMineData } from '../basicInfo.api';
-// 引入字典获取方法
-import { getDictItemsByCode } from '/@/utils/dict';
-import { useListPage } from '/@/hooks/system/useListPage';
-import { useIntervalFn } from '@vueuse/core';
-import { useModal } from '/@/components/Modal';
-
-// 路由实例
-const router = useRouter();
-
-// ========== 动态生产状态配置 ==========
-// 1. 响应式存储动态状态映射（key: 状态值，value: 配置）
-const dynamicProductionStatusMap = ref<ProductionStatusMap>({});
-// 2. 响应式存储动态下拉选项（供搜索表单使用）
-const dynamicProductionStatusOptions = ref<{ label: string; value: string | number }[]>([]);
-
-// 3. 生产状态颜色分配规则（和dataQuality保持一致）
-const getStatusColor = (statusText: string) => {
-  if (statusText.includes('正常生产')) return 'green';
-  if (statusText.includes('拟建矿井')) return 'blue';
-  return 'red'; // 其他状态统一红色
-};
-
-// 4. 从接口获取生产状态字典，生成动态映射/选项
-const fetchProductionStatus = async () => {
-  try {
-    const statusList = await getDictItemsByCode('mineProStatus');
-    if (!Array.isArray(statusList)) return;
-
-    const statusMap: ProductionStatusMap = {};
-    const statusOptions: { label: string; value: string | number }[] = [];
-
-    statusList.forEach((item) => {
-      const value = item.value;
-      const label = item.text || item.label;
-      const color = getStatusColor(label);
-
-      statusMap[value] = { label, value, color };
-      statusOptions.push({ label, value });
-    });
-
-    // 赋值到响应式变量
-    dynamicProductionStatusMap.value = statusMap;
-    dynamicProductionStatusOptions.value = statusOptions;
-
-    // 刷新表格（使用最新的状态映射）
-    await safeReloadTable();
-  } catch (error) {
-    console.error('获取生产状态字典失败:', error);
-    message.error('生产状态数据加载失败');
-  }
-};
-
-// 5. 生成动态列和搜索表单（computed响应式更新）
-const columns = computed(() => getColumns(dynamicProductionStatusMap));
-const searchFormSchema = computed(() => getSearchFormSchema(dynamicProductionStatusOptions));
-// ========== 表格注册 ==========
-const { tableContext: ctxRealtime, onExportXls } = useListPage({
-  tableProps: {
-    api: getMineData, // 数据统计接口
-    columns, // 绑定动态列
-    formConfig: {
-      labelWidth: 120,
-      schemas: searchFormSchema.value, // 绑定动态搜索表单
-      showAdvancedButton: false,
-      schemaGroupNames: ['常规查询'],
+  import { ref, nextTick, computed, onMounted } from 'vue';
+  import { useRouter } from 'vue-router';
+  import { BasicTable } from '/@/components/Table';
+  import { SvgIcon } from '/@/components/Icon';
+  import { message } from 'ant-design-vue';
+  // 引入动态列/表单配置函数 + 类型
+  import { getColumns, getSearchFormSchema, type ProductionStatusMap } from './minesInfo.data';
+  import { getMineData } from '../basicInfo.api';
+  // 引入字典获取方法
+  import { getDictItemsByCode } from '/@/utils/dict';
+  import { useListPage } from '/@/hooks/system/useListPage';
+  import { useIntervalFn } from '@vueuse/core';
+  import { useModal } from '/@/components/Modal';
+
+  // 路由实例
+  const router = useRouter();
+
+  // ========== 动态生产状态配置 ==========
+  // 1. 响应式存储动态状态映射（key: 状态值，value: 配置）
+  const dynamicProductionStatusMap = ref<ProductionStatusMap>({});
+  // 2. 响应式存储动态下拉选项（供搜索表单使用）
+  const dynamicProductionStatusOptions = ref<{ label: string; value: string | number }[]>([]);
+
+  // 3. 生产状态颜色分配规则（和dataQuality保持一致）
+  const getStatusColor = (statusText: string) => {
+    if (statusText.includes('正常生产')) return 'green';
+    if (statusText.includes('拟建矿井')) return 'blue';
+    return 'red'; // 其他状态统一红色
+  };
+
+  // 4. 从接口获取生产状态字典，生成动态映射/选项
+  const fetchProductionStatus = async () => {
+    try {
+      const statusList = await getDictItemsByCode('mineProStatus');
+      if (!Array.isArray(statusList)) return;
+
+      const statusMap: ProductionStatusMap = {};
+      const statusOptions: { label: string; value: string | number }[] = [];
+
+      statusList.forEach((item) => {
+        const value = item.value;
+        const label = item.text || item.label;
+        const color = getStatusColor(label);
+
+        statusMap[value] = { label, value, color };
+        statusOptions.push({ label, value });
+      });
+
+      // 赋值到响应式变量
+      dynamicProductionStatusMap.value = statusMap;
+      dynamicProductionStatusOptions.value = statusOptions;
+
+      // 刷新表格（使用最新的状态映射）
+      await safeReloadTable();
+    } catch (error) {
+      console.error('获取生产状态字典失败:', error);
+      message.error('生产状态数据加载失败');
+    }
+  };
+
+  // 5. 生成动态列和搜索表单（computed响应式更新）
+  const columns = computed(() => getColumns(dynamicProductionStatusMap));
+  const searchFormSchema = computed(() => getSearchFormSchema(dynamicProductionStatusOptions));
+  // ========== 表格注册 ==========
+  const { tableContext: ctxRealtime, onExportXls } = useListPage({
+    tableProps: {
+      api: getMineData, // 数据统计接口
+      columns, // 绑定动态列
+      formConfig: {
+        labelWidth: 120,
+        schemas: searchFormSchema.value, // 绑定动态搜索表单
+        showAdvancedButton: false,
+        schemaGroupNames: ['常规查询'],
+      },
+      showIndexColumn: false,
+      scroll: { x: 'max-content' },
+    },
+    exportConfig: {
+      url: '/ventanaly-province/province/mineData/exportMineData',
+      name: '矿山信息',
+      params: {},
     },
-    showIndexColumn: false,
-    scroll: { x: 'max-content' },
-  },
-  exportConfig: {
-    url: '/ventanaly-province/province/mineData/exportMineData',
-    name: '矿山信息',
-    params: {},
-  },
-});
-const [registerRealtimeTable, realtimeTable] = ctxRealtime;
-const { pause, resume } = useIntervalFn(() => realtimeTable.reload({ silence: true }), 10000);
-
-// ========== 辅助方法 ==========
-// 安全刷新表格（避免表格未初始化导致的报错）
-async function safeReloadTable() {
-  await nextTick();
-  try {
-    await reloadTable();
-  } catch (e) {
-    console.warn('矿山信息表格重载失败:', e);
-  }
-}
-
-/**
- * 通用页面跳转方法
- * @param record 当前行数据
- * @param path 目标路径
- */
-function handleGoToPage(record: any, path: string) {
-  router.push({
-    path,
   });
-}
+  const [registerRealtimeTable, realtimeTable] = ctxRealtime;
+  const { pause, resume } = useIntervalFn(() => realtimeTable.reload({ silence: true }), 10000);
+
+  // ========== 辅助方法 ==========
+  // 安全刷新表格（避免表格未初始化导致的报错）
+  async function safeReloadTable() {
+    await nextTick();
+    try {
+      await reloadTable();
+    } catch (e) {
+      console.warn('矿山信息表格重载失败:', e);
+    }
+  }
 
-function handleGoToPageQuery(record: any, path: string) {
-  const mineCode = record.mineCode;
-  router.push({
-    path,
-    query: { mineCode },
+  /**
+   * 通用页面跳转方法
+   * @param record 当前行数据
+   * @param path 目标路径
+   */
+  function handleGoToPage(record: any, path: string) {
+    router.push({
+      path,
+    });
+  }
+
+  function handleGoToPageQuery(record: any, path: string) {
+    const mineCode = record.mineCode;
+    router.push({
+      path,
+      query: { mineCode },
+    });
+  }
+  const [registerRealtimeModal, { openModal: openRealtimeModal }] = useModal();
+
+  const openModal = (record) => {
+    openRealtimeModal(true, record);
+    // if (type === 'realtime') {
+    //   // 可向实时弹窗传递当前记录数据
+    // } else {
+    //   // 可向历史弹窗传递当前记录数据
+    //   openHistoryModal(true, record);
+    // }
+    pause();
+  };
+  // ========== 初始化 ==========
+  onMounted(async () => {
+    // 先获取生产状态字典，再加载表格
+    await fetchProductionStatus();
   });
-}
-const [registerRealtimeModal, { openModal: openRealtimeModal }] = useModal();
-
-const openModal = (record) => {
-  openRealtimeModal(true, record);
-  // if (type === 'realtime') {
-  //   // 可向实时弹窗传递当前记录数据
-  // } else {
-  //   // 可向历史弹窗传递当前记录数据
-  //   openHistoryModal(true, record);
-  // }
-  pause();
-};
-// ========== 初始化 ==========
-onMounted(async () => {
-  // 先获取生产状态字典，再加载表格
-  await fetchProductionStatus();
-});
 </script>
 
 <style lang="less" scoped>
-.action-btn {
-  height: 30px;
-  cursor: pointer;
-  margin-right: 10px;
-
-  &:last-child {
-    margin-right: 0;
+  .action-btn {
+    height: 30px;
+    cursor: pointer;
+    margin-right: 10px;
+
+    &:last-child {
+      margin-right: 0;
+    }
   }
-}
 </style>