diff --git a/src/App.vue b/src/App.vue
index 52ccd6e..a9268fb 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -6,7 +6,7 @@
 import useMenuStore from '@/store/modules/menu'
 
 const settingsStore = useSettingsStore()
-
+const $router = useRouter()
 const buttonConfig = ref({
   autoInsertSpace: true,
 })
@@ -81,14 +81,40 @@
 })
 
 onMounted(() => {
+  // // 浏览器访问当前位置
+  // if ('geolocation' in navigator) {
+  //   navigator.geolocation.getCurrentPosition(function (position) {
+  //     // 允许
+  //     console.log('纬度: ', position.coords.latitude)
+  //     console.log('经度: ', position.coords.longitude)
+  //   }, function (error) {
+  //     // 拒绝
+  //     console.error("Error Code = " + error.code + " - " + error.message);
+  //   })
+  // } else {
+  //   console.error("Geolocation is not supported by this browser.")
+  // }
   settingsStore.setMode(document.documentElement.clientWidth)
   window.onresize = () => {
     settingsStore.setMode(document.documentElement.clientWidth)
+    // 监听浏览器类型变化 刷新浏览器
+    const userAgent = navigator.userAgent || navigator.vendor || window.opera
+    const isMobile = /android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(userAgent)
+    if (`${isMobile ? 'mobile' : 'pc'}` !== window.localStorage.getItem('browser-type-bj-well')) {
+      // if (!window.localStorage.getItem('browser-type-bj-well')) { return }
+      console.log(`浏览器类型发生变化，由${window.localStorage.getItem('browser-type-bj-well')}变为${isMobile ? 'mobile' : 'pc'}`)
+      window.localStorage.setItem('browser-type-bj-well', `${isMobile ? 'mobile' : 'pc'}`)
+      $router.push('/')
+      setTimeout(() => {
+        window.location.reload()
+      }, 1000)
+    }
   }
   hotkeys('alt+i', () => {
     eventBus.emit('global-system-info-toggle')
   })
 })
+const browserType = window.localStorage.getItem('browser-type-bj-well') // mobile || pc
 </script>
 
 <template>
@@ -99,6 +125,6 @@
         '--g-sub-sidebar-actual-width': subSidebarActualWidth,
       }"
     />
-    <system-info />
+    <system-info v-if="browserType !== 'mobile'" />
   </el-config-provider>
 </template>

diff --git a/src/App.vue b/src/App.vue
index 52ccd6e..a9268fb 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -6,7 +6,7 @@
 import useMenuStore from '@/store/modules/menu'
 
 const settingsStore = useSettingsStore()
-
+const $router = useRouter()
 const buttonConfig = ref({
   autoInsertSpace: true,
 })
@@ -81,14 +81,40 @@
 })
 
 onMounted(() => {
+  // // 浏览器访问当前位置
+  // if ('geolocation' in navigator) {
+  //   navigator.geolocation.getCurrentPosition(function (position) {
+  //     // 允许
+  //     console.log('纬度: ', position.coords.latitude)
+  //     console.log('经度: ', position.coords.longitude)
+  //   }, function (error) {
+  //     // 拒绝
+  //     console.error("Error Code = " + error.code + " - " + error.message);
+  //   })
+  // } else {
+  //   console.error("Geolocation is not supported by this browser.")
+  // }
   settingsStore.setMode(document.documentElement.clientWidth)
   window.onresize = () => {
     settingsStore.setMode(document.documentElement.clientWidth)
+    // 监听浏览器类型变化 刷新浏览器
+    const userAgent = navigator.userAgent || navigator.vendor || window.opera
+    const isMobile = /android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(userAgent)
+    if (`${isMobile ? 'mobile' : 'pc'}` !== window.localStorage.getItem('browser-type-bj-well')) {
+      // if (!window.localStorage.getItem('browser-type-bj-well')) { return }
+      console.log(`浏览器类型发生变化，由${window.localStorage.getItem('browser-type-bj-well')}变为${isMobile ? 'mobile' : 'pc'}`)
+      window.localStorage.setItem('browser-type-bj-well', `${isMobile ? 'mobile' : 'pc'}`)
+      $router.push('/')
+      setTimeout(() => {
+        window.location.reload()
+      }, 1000)
+    }
   }
   hotkeys('alt+i', () => {
     eventBus.emit('global-system-info-toggle')
   })
 })
+const browserType = window.localStorage.getItem('browser-type-bj-well') // mobile || pc
 </script>
 
 <template>
@@ -99,6 +125,6 @@
         '--g-sub-sidebar-actual-width': subSidebarActualWidth,
       }"
     />
-    <system-info />
+    <system-info v-if="browserType !== 'mobile'" />
   </el-config-provider>
 </template>
diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue
index e247e28..de24f71 100644
--- a/src/components/NormalTable/index.vue
+++ b/src/components/NormalTable/index.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup name="NormalTable">
 import type { Ref } from 'vue'
-import { ElTable } from 'element-plus'
+import { ElMessage, ElTable } from 'element-plus'
 import { defineExpose, ref } from 'vue'
 import type { TableColumn } from './table_interface'
 import TableColumnCom from './tableColumn.vue'
@@ -84,7 +84,11 @@
     type: String,
     default: 'default',
   }, // 表格大小，默认，small,mini等，与el-table条件相同
-  // 想要展示成链接的数据
+  // 是否要右击菜单
+  needContextmenu: {
+    type: Boolean,
+    default: false,
+  },
 })
 const emit = defineEmits(['change', 'selectionChange', 'rowClick', 'rowDbClick', 'multiSelect', 'filterChange', 'rowDisabled', 'handleClickFollowLink'])
 // -------定义数据--------------
@@ -148,8 +152,10 @@
 //   changeColumns()
 // })
 // 多选
+const multiSelectData = ref([])
 const handleSelectionChange = (val: any) => {
   // console.log(val)
+  multiSelectData.value = val
   emit('multiSelect', val)
 }
 // 单选选中
@@ -214,27 +220,87 @@
 const handleClickFollowLink = (row: any, title: string) => {
   emit('handleClickFollowLink', row, title)
 }
+
+// 右击当前行操作
+const clickIndex = ref(-1)
+const contextmenu = (row: any, column: any, event: Event, index: number) => {
+  if (!props.needContextmenu) { return }
+  // 阻止默认的右键菜单
+  event.preventDefault()
+  clickIndex.value = props.data.findIndex(item => item === row)
+  console.log('右击', clickIndex.value)
+  // 获取自定义菜单元素
+  var menu = document.getElementById('custom-menu')
+  // 设置自定义菜单的位置并显示
+  let positionX = event.pageX
+  let positionY = event.pageY
+  if (document.documentElement.clientHeight - event.pageY < 204) {
+    positionY = document.documentElement.clientHeight - 204 + 102
+  }
+  if (document.documentElement.clientWidth - event.pageX < 146) {
+    positionX = document.documentElement.clientWidth - 146
+  }
+  menu.style.top = `${positionY - 102}px`
+  menu.style.left = `${positionX}px`
+  menu.style.display = 'block'
+}
+// 点击其他位置隐藏自定义菜单
+document.addEventListener('click', () => {
+  document.getElementById('custom-menu').style.display = 'none'
+})
+// 添加行
+const costomAddRow = (type: string) => {
+  if (type === 'current-pre') {
+    // 当前行前方插入
+    props.data.splice(clickIndex.value, 0, JSON.parse(JSON.stringify(props.data[clickIndex.value])))
+  }
+  else if (type === 'current-next') {
+    // 当前行后方方插入
+    props.data.splice(clickIndex.value + 1, 0, JSON.parse(JSON.stringify(props.data[clickIndex.value])))
+  }
+  else if (type === 'list-head') {
+    // 列表头行插入
+    props.data.splice(0, 0, JSON.parse(JSON.stringify(props.data[clickIndex.value])))
+  }
+  else if (type === 'list-tail') {
+    // 列表尾行插入
+    props.data.splice(props.data.length, 0, JSON.parse(JSON.stringify(props.data[clickIndex.value])))
+  }
+  else if (type === 'select-pre') {
+    // 选中行前方插入
+    if (!multiSelectData.value.length) {
+      ElMessage.warning('未选择数据')
+      return
+    }
+    multiSelectData.value.forEach((item, index) => {
+      const dataIndex = props.data.findIndex(citem => item === citem)
+      props.data.splice(dataIndex, 0, JSON.parse(JSON.stringify(item)))
+    })
+    table.value!.clearSelection()
+  }
+  else if (type === 'select-next') {
+    // 选中行后方插入
+    if (!multiSelectData.value.length) {
+      ElMessage.warning('未选择数据')
+      return
+    }
+    multiSelectData.value.forEach((item, index) => {
+      const dataIndex = props.data.findIndex(citem => item === citem)
+      props.data.splice(dataIndex + 1, 0, JSON.parse(JSON.stringify(item)))
+    })
+    table.value!.clearSelection()
+  }
+  clickIndex.value = -1
+}
 </script>
 
 <template>
   <div id="normal-table-com">
     <el-table
-      id="print"
-      ref="table"
-      v-loading="listLoading"
-      :data="data"
-      :height="height"
-      border
-      stripe
-      :size="size"
-      style="width: 100%;"
-      :row-key="(row) => { return row.id || row.index }"
-      :span-method="mergeTableRow"
-      @selection-change="handleSelectionChange"
-      @select="selectClick"
-      @row-click="rowClick"
-      @row-dblclick="rowDbClick"
-      @filter-change="filterChange"
+      id="print" ref="table" v-loading="listLoading" :data="data" :height="height" border stripe :size="size"
+      style="width: 100%;" :row-key="(row) => { return row.id || row.index }" :span-method="mergeTableRow"
+      @selection-change="handleSelectionChange" @select="selectClick" @row-click="rowClick" @row-dblclick="rowDbClick"
+      @filter-change="filterChange" @row-contextmenu="contextmenu"
     >
       <slot name="preColumns" />
 
@@ -243,45 +309,48 @@
           <el-radio v-model="singleChecked" :label="scope.row.id" class="radio" @change="radioChange" />
         </template>
       </el-table-column>
-      <el-table-column v-if="isShowmultiSelect && isMulti" :reserve-selection="true" type="selection" width="38" :selectable="selectable" fixed="left" />
+      <el-table-column
+        v-if="isShowmultiSelect && isMulti" :reserve-selection="true" type="selection" width="38"
+        :selectable="selectable" fixed="left"
+      />
       <template v-for="column of columns" :key="column.value">
         <el-table-column
-          v-if="!column.isFilters"
-          :label="column.text"
-          :prop="column.value"
-          :width="column.width"
-          :align="column.align"
-          :show-overflow-tooltip="column.showOverflow ? column.showOverflow : true"
+          v-if="!column.isFilters" :label="column.text" :prop="column.value" :width="column.width"
+          :align="column.align" :show-overflow-tooltip="column.showOverflow ? column.showOverflow : true"
           :fixed="column.fixed"
         >
           <template #default="scope">
-            <span v-if="!column.filter && !column.isLink" :style="column.styleFilter ? column.styleFilter(scope.row) : ''">{{ scope.row[column.value] }}</span>
-            <span v-if="column.filter && !column.isLink" :style="column.styleFilter ? column.styleFilter(scope.row) : ''">{{ column.filter(scope.row) }}</span>
+            <span
+              v-if="!column.filter && !column.isLink"
+              :style="column.styleFilter ? column.styleFilter(scope.row) : ''"
+            >{{ scope.row[column.value] }}</span>
+            <span
+              v-if="column.filter && !column.isLink"
+              :style="column.styleFilter ? column.styleFilter(scope.row) : ''"
+            >{{ column.filter(scope.row) }}</span>
             <div v-if="column.isLink">
               <show-photo v-for="(item, index) in scope.row.fileArr" :key="index" :minio-file-name="item" /><br>
             </div>
             <div v-if="column.followLink">
-              <div v-for="(item, index) in scope.row.followLinkArr" :key="index" @click="handleClickFollowLink(scope.row, item)">
+              <div
+                v-for="(item, index) in scope.row.followLinkArr" :key="index"
+                @click="handleClickFollowLink(scope.row, item)"
+              >
                 <span :class="item !== '/' ? 'follow-link' : ''">{{ item }}</span>
               </div>
             </div>
           </template>
         </el-table-column>
         <el-table-column
-          v-if="column.isFilters"
-          :label="column.text"
-          :prop="column.value"
-          :width="column.width"
-          :align="column.align"
-          :show-overflow-tooltip="column.showOverflow ? column.showOverflow : true"
-          :fixed="column.fixed"
-          :column-key="column.value"
-          :filters="column.filters"
-          :filter-multiple="false"
+          v-if="column.isFilters" :label="column.text" :prop="column.value" :width="column.width"
+          :align="column.align" :show-overflow-tooltip="column.showOverflow ? column.showOverflow : true"
+          :fixed="column.fixed" :column-key="column.value" :filters="column.filters" :filter-multiple="false"
         >
           <template #default="scope">
-            <span v-if="!column.filter" :style="column.styleFilter ? column.styleFilter(scope.row) : ''">{{ scope.row[column.value] }}</span>
-            <span v-else :style="column.styleFilter ? column.styleFilter(scope.row) : ''">{{ column.filter(scope.row) }}</span>
+            <span v-if="!column.filter" :style="column.styleFilter ? column.styleFilter(scope.row) : ''">{{
+              scope.row[column.value] }}</span>
+            <span v-else :style="column.styleFilter ? column.styleFilter(scope.row) : ''">{{ column.filter(scope.row)
+            }}</span>
           </template>
         </el-table-column>
       </template>
@@ -290,19 +359,67 @@
     </el-table>
     <div v-if="props.pagination" style="width: 100%;margin-top: 10px;">
       <el-pagination
-        :current-page="props.query.offset"
-        :page-sizes="props.pageSizes as number[]"
-        :page-size="props.query.limit"
-        :total="props.total"
-        layout="total, sizes, prev, pager, next"
-        @size-change="handleSizeChange"
-        @current-change="handleCurrentChange"
+        :current-page="props.query.offset" :page-sizes="props.pageSizes as number[]"
+        :page-size="props.query.limit" :total="props.total" layout="total, sizes, prev, pager, next"
+        @size-change="handleSizeChange" @current-change="handleCurrentChange"
       />
     </div>
+    <!-- 自定义菜单 -->
+    <div id="custom-menu">
+      <p class="menu-item" @click="costomAddRow('current-pre')">
+        当前行前方插入
+      </p>
+      <p class="menu-item" @click="costomAddRow('current-next')">
+        当前行后方插入
+      </p>
+      <p class="menu-item" @click="costomAddRow('list-head')">
+        列表头行插入
+      </p>
+      <p class="menu-item" @click="costomAddRow('list-tail')">
+        列表尾行插入
+      </p>
+      <p v-if="isShowmultiSelect && isMulti" class="menu-item" @click="costomAddRow('select-pre')">
+        选中行前方插入
+      </p>
+      <!--  -->
+      <p v-if="isShowmultiSelect && isMulti" class="menu-item" @click="costomAddRow('select-next')">
+        选中行后方插入
+      </p>
+    </div>
   </div>
 </template>
 
 <style lang="scss" scoped>
+#custom-menu {
+  display: none;
+  position: fixed;
+  background-color: #fff;
+  border-radius: 5px;
+  padding: 5px 0;
+  z-index: 1000;
+  border: 1px solid #c8c9cc;
+  box-shadow: 0 0 12px rgb(0 0 0 / 12%);
+
+  .menu-item {
+    display: flex;
+    align-items: center;
+    white-space: nowrap;
+    list-style: none;
+    line-height: 22px;
+    padding: 5px 16px;
+    margin: 0;
+    // font-size: var(--el-font-size-base);
+    color: #606266;
+    cursor: pointer;
+    outline: none;
+
+    &:hover {
+      background-color: #ecf5ff;
+      color: #409eff;
+    }
+  }
+}
+
 #normal-table-com {
   width: 100%;
 }

diff --git a/src/App.vue b/src/App.vue
index 52ccd6e..a9268fb 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -6,7 +6,7 @@
 import useMenuStore from '@/store/modules/menu'
 
 const settingsStore = useSettingsStore()
-
+const $router = useRouter()
 const buttonConfig = ref({
   autoInsertSpace: true,
 })
@@ -81,14 +81,40 @@
 })
 
 onMounted(() => {
+  // // 浏览器访问当前位置
+  // if ('geolocation' in navigator) {
+  //   navigator.geolocation.getCurrentPosition(function (position) {
+  //     // 允许
+  //     console.log('纬度: ', position.coords.latitude)
+  //     console.log('经度: ', position.coords.longitude)
+  //   }, function (error) {
+  //     // 拒绝
+  //     console.error("Error Code = " + error.code + " - " + error.message);
+  //   })
+  // } else {
+  //   console.error("Geolocation is not supported by this browser.")
+  // }
   settingsStore.setMode(document.documentElement.clientWidth)
   window.onresize = () => {
     settingsStore.setMode(document.documentElement.clientWidth)
+    // 监听浏览器类型变化 刷新浏览器
+    const userAgent = navigator.userAgent || navigator.vendor || window.opera
+    const isMobile = /android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(userAgent)
+    if (`${isMobile ? 'mobile' : 'pc'}` !== window.localStorage.getItem('browser-type-bj-well')) {
+      // if (!window.localStorage.getItem('browser-type-bj-well')) { return }
+      console.log(`浏览器类型发生变化，由${window.localStorage.getItem('browser-type-bj-well')}变为${isMobile ? 'mobile' : 'pc'}`)
+      window.localStorage.setItem('browser-type-bj-well', `${isMobile ? 'mobile' : 'pc'}`)
+      $router.push('/')
+      setTimeout(() => {
+        window.location.reload()
+      }, 1000)
+    }
   }
   hotkeys('alt+i', () => {
     eventBus.emit('global-system-info-toggle')
   })
 })
+const browserType = window.localStorage.getItem('browser-type-bj-well') // mobile || pc
 </script>
 
 <template>
@@ -99,6 +125,6 @@
         '--g-sub-sidebar-actual-width': subSidebarActualWidth,
       }"
     />
-    <system-info />
+    <system-info v-if="browserType !== 'mobile'" />
   </el-config-provider>
 </template>
diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue
index e247e28..de24f71 100644
--- a/src/components/NormalTable/index.vue
+++ b/src/components/NormalTable/index.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup name="NormalTable">
 import type { Ref } from 'vue'
-import { ElTable } from 'element-plus'
+import { ElMessage, ElTable } from 'element-plus'
 import { defineExpose, ref } from 'vue'
 import type { TableColumn } from './table_interface'
 import TableColumnCom from './tableColumn.vue'
@@ -84,7 +84,11 @@
     type: String,
     default: 'default',
   }, // 表格大小，默认，small,mini等，与el-table条件相同
-  // 想要展示成链接的数据
+  // 是否要右击菜单
+  needContextmenu: {
+    type: Boolean,
+    default: false,
+  },
 })
 const emit = defineEmits(['change', 'selectionChange', 'rowClick', 'rowDbClick', 'multiSelect', 'filterChange', 'rowDisabled', 'handleClickFollowLink'])
 // -------定义数据--------------
@@ -148,8 +152,10 @@
 //   changeColumns()
 // })
 // 多选
+const multiSelectData = ref([])
 const handleSelectionChange = (val: any) => {
   // console.log(val)
+  multiSelectData.value = val
   emit('multiSelect', val)
 }
 // 单选选中
@@ -214,27 +220,87 @@
 const handleClickFollowLink = (row: any, title: string) => {
   emit('handleClickFollowLink', row, title)
 }
+
+// 右击当前行操作
+const clickIndex = ref(-1)
+const contextmenu = (row: any, column: any, event: Event, index: number) => {
+  if (!props.needContextmenu) { return }
+  // 阻止默认的右键菜单
+  event.preventDefault()
+  clickIndex.value = props.data.findIndex(item => item === row)
+  console.log('右击', clickIndex.value)
+  // 获取自定义菜单元素
+  var menu = document.getElementById('custom-menu')
+  // 设置自定义菜单的位置并显示
+  let positionX = event.pageX
+  let positionY = event.pageY
+  if (document.documentElement.clientHeight - event.pageY < 204) {
+    positionY = document.documentElement.clientHeight - 204 + 102
+  }
+  if (document.documentElement.clientWidth - event.pageX < 146) {
+    positionX = document.documentElement.clientWidth - 146
+  }
+  menu.style.top = `${positionY - 102}px`
+  menu.style.left = `${positionX}px`
+  menu.style.display = 'block'
+}
+// 点击其他位置隐藏自定义菜单
+document.addEventListener('click', () => {
+  document.getElementById('custom-menu').style.display = 'none'
+})
+// 添加行
+const costomAddRow = (type: string) => {
+  if (type === 'current-pre') {
+    // 当前行前方插入
+    props.data.splice(clickIndex.value, 0, JSON.parse(JSON.stringify(props.data[clickIndex.value])))
+  }
+  else if (type === 'current-next') {
+    // 当前行后方方插入
+    props.data.splice(clickIndex.value + 1, 0, JSON.parse(JSON.stringify(props.data[clickIndex.value])))
+  }
+  else if (type === 'list-head') {
+    // 列表头行插入
+    props.data.splice(0, 0, JSON.parse(JSON.stringify(props.data[clickIndex.value])))
+  }
+  else if (type === 'list-tail') {
+    // 列表尾行插入
+    props.data.splice(props.data.length, 0, JSON.parse(JSON.stringify(props.data[clickIndex.value])))
+  }
+  else if (type === 'select-pre') {
+    // 选中行前方插入
+    if (!multiSelectData.value.length) {
+      ElMessage.warning('未选择数据')
+      return
+    }
+    multiSelectData.value.forEach((item, index) => {
+      const dataIndex = props.data.findIndex(citem => item === citem)
+      props.data.splice(dataIndex, 0, JSON.parse(JSON.stringify(item)))
+    })
+    table.value!.clearSelection()
+  }
+  else if (type === 'select-next') {
+    // 选中行后方插入
+    if (!multiSelectData.value.length) {
+      ElMessage.warning('未选择数据')
+      return
+    }
+    multiSelectData.value.forEach((item, index) => {
+      const dataIndex = props.data.findIndex(citem => item === citem)
+      props.data.splice(dataIndex + 1, 0, JSON.parse(JSON.stringify(item)))
+    })
+    table.value!.clearSelection()
+  }
+  clickIndex.value = -1
+}
 </script>
 
 <template>
   <div id="normal-table-com">
     <el-table
-      id="print"
-      ref="table"
-      v-loading="listLoading"
-      :data="data"
-      :height="height"
-      border
-      stripe
-      :size="size"
-      style="width: 100%;"
-      :row-key="(row) => { return row.id || row.index }"
-      :span-method="mergeTableRow"
-      @selection-change="handleSelectionChange"
-      @select="selectClick"
-      @row-click="rowClick"
-      @row-dblclick="rowDbClick"
-      @filter-change="filterChange"
+      id="print" ref="table" v-loading="listLoading" :data="data" :height="height" border stripe :size="size"
+      style="width: 100%;" :row-key="(row) => { return row.id || row.index }" :span-method="mergeTableRow"
+      @selection-change="handleSelectionChange" @select="selectClick" @row-click="rowClick" @row-dblclick="rowDbClick"
+      @filter-change="filterChange" @row-contextmenu="contextmenu"
     >
       <slot name="preColumns" />
 
@@ -243,45 +309,48 @@
           <el-radio v-model="singleChecked" :label="scope.row.id" class="radio" @change="radioChange" />
         </template>
       </el-table-column>
-      <el-table-column v-if="isShowmultiSelect && isMulti" :reserve-selection="true" type="selection" width="38" :selectable="selectable" fixed="left" />
+      <el-table-column
+        v-if="isShowmultiSelect && isMulti" :reserve-selection="true" type="selection" width="38"
+        :selectable="selectable" fixed="left"
+      />
       <template v-for="column of columns" :key="column.value">
         <el-table-column
-          v-if="!column.isFilters"
-          :label="column.text"
-          :prop="column.value"
-          :width="column.width"
-          :align="column.align"
-          :show-overflow-tooltip="column.showOverflow ? column.showOverflow : true"
+          v-if="!column.isFilters" :label="column.text" :prop="column.value" :width="column.width"
+          :align="column.align" :show-overflow-tooltip="column.showOverflow ? column.showOverflow : true"
           :fixed="column.fixed"
         >
           <template #default="scope">
-            <span v-if="!column.filter && !column.isLink" :style="column.styleFilter ? column.styleFilter(scope.row) : ''">{{ scope.row[column.value] }}</span>
-            <span v-if="column.filter && !column.isLink" :style="column.styleFilter ? column.styleFilter(scope.row) : ''">{{ column.filter(scope.row) }}</span>
+            <span
+              v-if="!column.filter && !column.isLink"
+              :style="column.styleFilter ? column.styleFilter(scope.row) : ''"
+            >{{ scope.row[column.value] }}</span>
+            <span
+              v-if="column.filter && !column.isLink"
+              :style="column.styleFilter ? column.styleFilter(scope.row) : ''"
+            >{{ column.filter(scope.row) }}</span>
             <div v-if="column.isLink">
               <show-photo v-for="(item, index) in scope.row.fileArr" :key="index" :minio-file-name="item" /><br>
             </div>
             <div v-if="column.followLink">
-              <div v-for="(item, index) in scope.row.followLinkArr" :key="index" @click="handleClickFollowLink(scope.row, item)">
+              <div
+                v-for="(item, index) in scope.row.followLinkArr" :key="index"
+                @click="handleClickFollowLink(scope.row, item)"
+              >
                 <span :class="item !== '/' ? 'follow-link' : ''">{{ item }}</span>
               </div>
             </div>
           </template>
         </el-table-column>
         <el-table-column
-          v-if="column.isFilters"
-          :label="column.text"
-          :prop="column.value"
-          :width="column.width"
-          :align="column.align"
-          :show-overflow-tooltip="column.showOverflow ? column.showOverflow : true"
-          :fixed="column.fixed"
-          :column-key="column.value"
-          :filters="column.filters"
-          :filter-multiple="false"
+          v-if="column.isFilters" :label="column.text" :prop="column.value" :width="column.width"
+          :align="column.align" :show-overflow-tooltip="column.showOverflow ? column.showOverflow : true"
+          :fixed="column.fixed" :column-key="column.value" :filters="column.filters" :filter-multiple="false"
         >
           <template #default="scope">
-            <span v-if="!column.filter" :style="column.styleFilter ? column.styleFilter(scope.row) : ''">{{ scope.row[column.value] }}</span>
-            <span v-else :style="column.styleFilter ? column.styleFilter(scope.row) : ''">{{ column.filter(scope.row) }}</span>
+            <span v-if="!column.filter" :style="column.styleFilter ? column.styleFilter(scope.row) : ''">{{
+              scope.row[column.value] }}</span>
+            <span v-else :style="column.styleFilter ? column.styleFilter(scope.row) : ''">{{ column.filter(scope.row)
+            }}</span>
           </template>
         </el-table-column>
       </template>
@@ -290,19 +359,67 @@
     </el-table>
     <div v-if="props.pagination" style="width: 100%;margin-top: 10px;">
       <el-pagination
-        :current-page="props.query.offset"
-        :page-sizes="props.pageSizes as number[]"
-        :page-size="props.query.limit"
-        :total="props.total"
-        layout="total, sizes, prev, pager, next"
-        @size-change="handleSizeChange"
-        @current-change="handleCurrentChange"
+        :current-page="props.query.offset" :page-sizes="props.pageSizes as number[]"
+        :page-size="props.query.limit" :total="props.total" layout="total, sizes, prev, pager, next"
+        @size-change="handleSizeChange" @current-change="handleCurrentChange"
       />
     </div>
+    <!-- 自定义菜单 -->
+    <div id="custom-menu">
+      <p class="menu-item" @click="costomAddRow('current-pre')">
+        当前行前方插入
+      </p>
+      <p class="menu-item" @click="costomAddRow('current-next')">
+        当前行后方插入
+      </p>
+      <p class="menu-item" @click="costomAddRow('list-head')">
+        列表头行插入
+      </p>
+      <p class="menu-item" @click="costomAddRow('list-tail')">
+        列表尾行插入
+      </p>
+      <p v-if="isShowmultiSelect && isMulti" class="menu-item" @click="costomAddRow('select-pre')">
+        选中行前方插入
+      </p>
+      <!--  -->
+      <p v-if="isShowmultiSelect && isMulti" class="menu-item" @click="costomAddRow('select-next')">
+        选中行后方插入
+      </p>
+    </div>
   </div>
 </template>
 
 <style lang="scss" scoped>
+#custom-menu {
+  display: none;
+  position: fixed;
+  background-color: #fff;
+  border-radius: 5px;
+  padding: 5px 0;
+  z-index: 1000;
+  border: 1px solid #c8c9cc;
+  box-shadow: 0 0 12px rgb(0 0 0 / 12%);
+
+  .menu-item {
+    display: flex;
+    align-items: center;
+    white-space: nowrap;
+    list-style: none;
+    line-height: 22px;
+    padding: 5px 16px;
+    margin: 0;
+    // font-size: var(--el-font-size-base);
+    color: #606266;
+    cursor: pointer;
+    outline: none;
+
+    &:hover {
+      background-color: #ecf5ff;
+      color: #409eff;
+    }
+  }
+}
+
 #normal-table-com {
   width: 100%;
 }
diff --git a/src/components/TableContainer/index.vue b/src/components/TableContainer/index.vue
index 0c07be6..87b1567 100644
--- a/src/components/TableContainer/index.vue
+++ b/src/components/TableContainer/index.vue
@@ -71,16 +71,18 @@
   <config-dialog ref="configRef" @confirm="confirmColumns" />
   <div class="table-container">
     <div class="button-area">
-      <div v-if="titleShow" :class="props.isCenter ? 'title-center' : 'title-left'">
-        <el-icon v-if="isConfig" :size="21" class="icon-menu" @click="config">
-          <menu />
-        </el-icon>
-        <span>
-          {{ title }}
-        </span>
-      </div>
-      <div class="button-left">
-        <slot name="btns-left" />
+      <div style="display: flex;align-items: center;">
+        <div v-if="titleShow" :class="props.isCenter ? 'title-center' : 'title-left'">
+          <el-icon v-if="isConfig" :size="21" class="icon-menu" @click="config">
+            <menu />
+          </el-icon>
+          <span>
+            {{ title }}
+          </span>
+        </div>
+        <div class="button-left">
+          <slot name="btns-left" />
+        </div>
       </div>
       <div class="button-right">
         <slot name="btns-right" />

diff --git a/src/App.vue b/src/App.vue
index 52ccd6e..a9268fb 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -6,7 +6,7 @@
 import useMenuStore from '@/store/modules/menu'
 
 const settingsStore = useSettingsStore()
-
+const $router = useRouter()
 const buttonConfig = ref({
   autoInsertSpace: true,
 })
@@ -81,14 +81,40 @@
 })
 
 onMounted(() => {
+  // // 浏览器访问当前位置
+  // if ('geolocation' in navigator) {
+  //   navigator.geolocation.getCurrentPosition(function (position) {
+  //     // 允许
+  //     console.log('纬度: ', position.coords.latitude)
+  //     console.log('经度: ', position.coords.longitude)
+  //   }, function (error) {
+  //     // 拒绝
+  //     console.error("Error Code = " + error.code + " - " + error.message);
+  //   })
+  // } else {
+  //   console.error("Geolocation is not supported by this browser.")
+  // }
   settingsStore.setMode(document.documentElement.clientWidth)
   window.onresize = () => {
     settingsStore.setMode(document.documentElement.clientWidth)
+    // 监听浏览器类型变化 刷新浏览器
+    const userAgent = navigator.userAgent || navigator.vendor || window.opera
+    const isMobile = /android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(userAgent)
+    if (`${isMobile ? 'mobile' : 'pc'}` !== window.localStorage.getItem('browser-type-bj-well')) {
+      // if (!window.localStorage.getItem('browser-type-bj-well')) { return }
+      console.log(`浏览器类型发生变化，由${window.localStorage.getItem('browser-type-bj-well')}变为${isMobile ? 'mobile' : 'pc'}`)
+      window.localStorage.setItem('browser-type-bj-well', `${isMobile ? 'mobile' : 'pc'}`)
+      $router.push('/')
+      setTimeout(() => {
+        window.location.reload()
+      }, 1000)
+    }
   }
   hotkeys('alt+i', () => {
     eventBus.emit('global-system-info-toggle')
   })
 })
+const browserType = window.localStorage.getItem('browser-type-bj-well') // mobile || pc
 </script>
 
 <template>
@@ -99,6 +125,6 @@
         '--g-sub-sidebar-actual-width': subSidebarActualWidth,
       }"
     />
-    <system-info />
+    <system-info v-if="browserType !== 'mobile'" />
   </el-config-provider>
 </template>
diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue
index e247e28..de24f71 100644
--- a/src/components/NormalTable/index.vue
+++ b/src/components/NormalTable/index.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup name="NormalTable">
 import type { Ref } from 'vue'
-import { ElTable } from 'element-plus'
+import { ElMessage, ElTable } from 'element-plus'
 import { defineExpose, ref } from 'vue'
 import type { TableColumn } from './table_interface'
 import TableColumnCom from './tableColumn.vue'
@@ -84,7 +84,11 @@
     type: String,
     default: 'default',
   }, // 表格大小，默认，small,mini等，与el-table条件相同
-  // 想要展示成链接的数据
+  // 是否要右击菜单
+  needContextmenu: {
+    type: Boolean,
+    default: false,
+  },
 })
 const emit = defineEmits(['change', 'selectionChange', 'rowClick', 'rowDbClick', 'multiSelect', 'filterChange', 'rowDisabled', 'handleClickFollowLink'])
 // -------定义数据--------------
@@ -148,8 +152,10 @@
 //   changeColumns()
 // })
 // 多选
+const multiSelectData = ref([])
 const handleSelectionChange = (val: any) => {
   // console.log(val)
+  multiSelectData.value = val
   emit('multiSelect', val)
 }
 // 单选选中
@@ -214,27 +220,87 @@
 const handleClickFollowLink = (row: any, title: string) => {
   emit('handleClickFollowLink', row, title)
 }
+
+// 右击当前行操作
+const clickIndex = ref(-1)
+const contextmenu = (row: any, column: any, event: Event, index: number) => {
+  if (!props.needContextmenu) { return }
+  // 阻止默认的右键菜单
+  event.preventDefault()
+  clickIndex.value = props.data.findIndex(item => item === row)
+  console.log('右击', clickIndex.value)
+  // 获取自定义菜单元素
+  var menu = document.getElementById('custom-menu')
+  // 设置自定义菜单的位置并显示
+  let positionX = event.pageX
+  let positionY = event.pageY
+  if (document.documentElement.clientHeight - event.pageY < 204) {
+    positionY = document.documentElement.clientHeight - 204 + 102
+  }
+  if (document.documentElement.clientWidth - event.pageX < 146) {
+    positionX = document.documentElement.clientWidth - 146
+  }
+  menu.style.top = `${positionY - 102}px`
+  menu.style.left = `${positionX}px`
+  menu.style.display = 'block'
+}
+// 点击其他位置隐藏自定义菜单
+document.addEventListener('click', () => {
+  document.getElementById('custom-menu').style.display = 'none'
+})
+// 添加行
+const costomAddRow = (type: string) => {
+  if (type === 'current-pre') {
+    // 当前行前方插入
+    props.data.splice(clickIndex.value, 0, JSON.parse(JSON.stringify(props.data[clickIndex.value])))
+  }
+  else if (type === 'current-next') {
+    // 当前行后方方插入
+    props.data.splice(clickIndex.value + 1, 0, JSON.parse(JSON.stringify(props.data[clickIndex.value])))
+  }
+  else if (type === 'list-head') {
+    // 列表头行插入
+    props.data.splice(0, 0, JSON.parse(JSON.stringify(props.data[clickIndex.value])))
+  }
+  else if (type === 'list-tail') {
+    // 列表尾行插入
+    props.data.splice(props.data.length, 0, JSON.parse(JSON.stringify(props.data[clickIndex.value])))
+  }
+  else if (type === 'select-pre') {
+    // 选中行前方插入
+    if (!multiSelectData.value.length) {
+      ElMessage.warning('未选择数据')
+      return
+    }
+    multiSelectData.value.forEach((item, index) => {
+      const dataIndex = props.data.findIndex(citem => item === citem)
+      props.data.splice(dataIndex, 0, JSON.parse(JSON.stringify(item)))
+    })
+    table.value!.clearSelection()
+  }
+  else if (type === 'select-next') {
+    // 选中行后方插入
+    if (!multiSelectData.value.length) {
+      ElMessage.warning('未选择数据')
+      return
+    }
+    multiSelectData.value.forEach((item, index) => {
+      const dataIndex = props.data.findIndex(citem => item === citem)
+      props.data.splice(dataIndex + 1, 0, JSON.parse(JSON.stringify(item)))
+    })
+    table.value!.clearSelection()
+  }
+  clickIndex.value = -1
+}
 </script>
 
 <template>
   <div id="normal-table-com">
     <el-table
-      id="print"
-      ref="table"
-      v-loading="listLoading"
-      :data="data"
-      :height="height"
-      border
-      stripe
-      :size="size"
-      style="width: 100%;"
-      :row-key="(row) => { return row.id || row.index }"
-      :span-method="mergeTableRow"
-      @selection-change="handleSelectionChange"
-      @select="selectClick"
-      @row-click="rowClick"
-      @row-dblclick="rowDbClick"
-      @filter-change="filterChange"
+      id="print" ref="table" v-loading="listLoading" :data="data" :height="height" border stripe :size="size"
+      style="width: 100%;" :row-key="(row) => { return row.id || row.index }" :span-method="mergeTableRow"
+      @selection-change="handleSelectionChange" @select="selectClick" @row-click="rowClick" @row-dblclick="rowDbClick"
+      @filter-change="filterChange" @row-contextmenu="contextmenu"
     >
       <slot name="preColumns" />
 
@@ -243,45 +309,48 @@
           <el-radio v-model="singleChecked" :label="scope.row.id" class="radio" @change="radioChange" />
         </template>
       </el-table-column>
-      <el-table-column v-if="isShowmultiSelect && isMulti" :reserve-selection="true" type="selection" width="38" :selectable="selectable" fixed="left" />
+      <el-table-column
+        v-if="isShowmultiSelect && isMulti" :reserve-selection="true" type="selection" width="38"
+        :selectable="selectable" fixed="left"
+      />
       <template v-for="column of columns" :key="column.value">
         <el-table-column
-          v-if="!column.isFilters"
-          :label="column.text"
-          :prop="column.value"
-          :width="column.width"
-          :align="column.align"
-          :show-overflow-tooltip="column.showOverflow ? column.showOverflow : true"
+          v-if="!column.isFilters" :label="column.text" :prop="column.value" :width="column.width"
+          :align="column.align" :show-overflow-tooltip="column.showOverflow ? column.showOverflow : true"
           :fixed="column.fixed"
         >
           <template #default="scope">
-            <span v-if="!column.filter && !column.isLink" :style="column.styleFilter ? column.styleFilter(scope.row) : ''">{{ scope.row[column.value] }}</span>
-            <span v-if="column.filter && !column.isLink" :style="column.styleFilter ? column.styleFilter(scope.row) : ''">{{ column.filter(scope.row) }}</span>
+            <span
+              v-if="!column.filter && !column.isLink"
+              :style="column.styleFilter ? column.styleFilter(scope.row) : ''"
+            >{{ scope.row[column.value] }}</span>
+            <span
+              v-if="column.filter && !column.isLink"
+              :style="column.styleFilter ? column.styleFilter(scope.row) : ''"
+            >{{ column.filter(scope.row) }}</span>
             <div v-if="column.isLink">
               <show-photo v-for="(item, index) in scope.row.fileArr" :key="index" :minio-file-name="item" /><br>
             </div>
             <div v-if="column.followLink">
-              <div v-for="(item, index) in scope.row.followLinkArr" :key="index" @click="handleClickFollowLink(scope.row, item)">
+              <div
+                v-for="(item, index) in scope.row.followLinkArr" :key="index"
+                @click="handleClickFollowLink(scope.row, item)"
+              >
                 <span :class="item !== '/' ? 'follow-link' : ''">{{ item }}</span>
               </div>
             </div>
           </template>
         </el-table-column>
         <el-table-column
-          v-if="column.isFilters"
-          :label="column.text"
-          :prop="column.value"
-          :width="column.width"
-          :align="column.align"
-          :show-overflow-tooltip="column.showOverflow ? column.showOverflow : true"
-          :fixed="column.fixed"
-          :column-key="column.value"
-          :filters="column.filters"
-          :filter-multiple="false"
+          v-if="column.isFilters" :label="column.text" :prop="column.value" :width="column.width"
+          :align="column.align" :show-overflow-tooltip="column.showOverflow ? column.showOverflow : true"
+          :fixed="column.fixed" :column-key="column.value" :filters="column.filters" :filter-multiple="false"
         >
           <template #default="scope">
-            <span v-if="!column.filter" :style="column.styleFilter ? column.styleFilter(scope.row) : ''">{{ scope.row[column.value] }}</span>
-            <span v-else :style="column.styleFilter ? column.styleFilter(scope.row) : ''">{{ column.filter(scope.row) }}</span>
+            <span v-if="!column.filter" :style="column.styleFilter ? column.styleFilter(scope.row) : ''">{{
+              scope.row[column.value] }}</span>
+            <span v-else :style="column.styleFilter ? column.styleFilter(scope.row) : ''">{{ column.filter(scope.row)
+            }}</span>
           </template>
         </el-table-column>
       </template>
@@ -290,19 +359,67 @@
     </el-table>
     <div v-if="props.pagination" style="width: 100%;margin-top: 10px;">
       <el-pagination
-        :current-page="props.query.offset"
-        :page-sizes="props.pageSizes as number[]"
-        :page-size="props.query.limit"
-        :total="props.total"
-        layout="total, sizes, prev, pager, next"
-        @size-change="handleSizeChange"
-        @current-change="handleCurrentChange"
+        :current-page="props.query.offset" :page-sizes="props.pageSizes as number[]"
+        :page-size="props.query.limit" :total="props.total" layout="total, sizes, prev, pager, next"
+        @size-change="handleSizeChange" @current-change="handleCurrentChange"
       />
     </div>
+    <!-- 自定义菜单 -->
+    <div id="custom-menu">
+      <p class="menu-item" @click="costomAddRow('current-pre')">
+        当前行前方插入
+      </p>
+      <p class="menu-item" @click="costomAddRow('current-next')">
+        当前行后方插入
+      </p>
+      <p class="menu-item" @click="costomAddRow('list-head')">
+        列表头行插入
+      </p>
+      <p class="menu-item" @click="costomAddRow('list-tail')">
+        列表尾行插入
+      </p>
+      <p v-if="isShowmultiSelect && isMulti" class="menu-item" @click="costomAddRow('select-pre')">
+        选中行前方插入
+      </p>
+      <!--  -->
+      <p v-if="isShowmultiSelect && isMulti" class="menu-item" @click="costomAddRow('select-next')">
+        选中行后方插入
+      </p>
+    </div>
   </div>
 </template>
 
 <style lang="scss" scoped>
+#custom-menu {
+  display: none;
+  position: fixed;
+  background-color: #fff;
+  border-radius: 5px;
+  padding: 5px 0;
+  z-index: 1000;
+  border: 1px solid #c8c9cc;
+  box-shadow: 0 0 12px rgb(0 0 0 / 12%);
+
+  .menu-item {
+    display: flex;
+    align-items: center;
+    white-space: nowrap;
+    list-style: none;
+    line-height: 22px;
+    padding: 5px 16px;
+    margin: 0;
+    // font-size: var(--el-font-size-base);
+    color: #606266;
+    cursor: pointer;
+    outline: none;
+
+    &:hover {
+      background-color: #ecf5ff;
+      color: #409eff;
+    }
+  }
+}
+
 #normal-table-com {
   width: 100%;
 }
diff --git a/src/components/TableContainer/index.vue b/src/components/TableContainer/index.vue
index 0c07be6..87b1567 100644
--- a/src/components/TableContainer/index.vue
+++ b/src/components/TableContainer/index.vue
@@ -71,16 +71,18 @@
   <config-dialog ref="configRef" @confirm="confirmColumns" />
   <div class="table-container">
     <div class="button-area">
-      <div v-if="titleShow" :class="props.isCenter ? 'title-center' : 'title-left'">
-        <el-icon v-if="isConfig" :size="21" class="icon-menu" @click="config">
-          <menu />
-        </el-icon>
-        <span>
-          {{ title }}
-        </span>
-      </div>
-      <div class="button-left">
-        <slot name="btns-left" />
+      <div style="display: flex;align-items: center;">
+        <div v-if="titleShow" :class="props.isCenter ? 'title-center' : 'title-left'">
+          <el-icon v-if="isConfig" :size="21" class="icon-menu" @click="config">
+            <menu />
+          </el-icon>
+          <span>
+            {{ title }}
+          </span>
+        </div>
+        <div class="button-left">
+          <slot name="btns-left" />
+        </div>
       </div>
       <div class="button-right">
         <slot name="btns-right" />
diff --git a/src/components/map/index.vue b/src/components/map/index.vue
index 55e37da..620c813 100644
--- a/src/components/map/index.vue
+++ b/src/components/map/index.vue
@@ -8,7 +8,7 @@
 import { styleType } from 'element-plus/es/components/table-v2/src/common'
 
 const $props = defineProps({
-  // 初始图层 normal satellite
+  // 初始图层 normal satellite dark
   layer: {
     type: String,
     default: 'normal',
@@ -35,8 +35,8 @@
 const layer = ref()
 // 图层标识
 const layerFlag = ref('normal')
-// const publicPath = import.meta.env.BASE_URL
-// console.log(publicPath, 'publicPath')
+const publicPath = import.meta.env.BASE_URL
+console.log(publicPath, 'publicPath')
 // -------------------------------------初始化地图--------------------------------------------------
 const initMap = () => {
   AMapLoader.load({
@@ -61,18 +61,22 @@
         map.value.setFeatures(['bg', 'building'])
         layerFlag.value = 'satellite'
       }
+      else if ($props.layer === 'dark') {
+        // 深色图层
+        map.value.setMapStyle('amap://styles/darkblue')
+      }
       // 地图图块加载完成后触发
       map.value.on('complete', () => {
         //  修改loading状态
         console.log('地图加载完成')
-        $emits('complete')
+        $emits('complete', AMap.value)
         loading.value = false
       })
       // 地图绑定右击事件
       map.value.on('mousedown', clickHandler)
     })
     .catch((e) => {
-      console.log('地图加载失败')
+      console.log(e, '地图加载失败')
     })
 }
 // ------------------------------------------------------------------------------------------------
@@ -156,7 +160,7 @@
 }
 // ------------------------------------------------------------------------------------------------
 
-// -------------------------------------标记本文操作--------------------------------------------------
+// -------------------------------------标记文本操作--------------------------------------------------
 // 标记文本数组
 const textAllList = ref<any>([])
 // 添加标记文字
@@ -282,6 +286,35 @@
   lineAllList.value = []
 }
 // ------------------------------------------------------------------------------------------------
+
+// -----------------------------------海量点标记操作------------------------------------------------
+// 点标记(海量点)数组
+const massMarksAllList = ref<any>([])
+// 添加点标记(海量点)
+const addMassMarks = (data: any) => {
+  /**
+     * data
+     * path: 折线点位数据  [{lnglat: [116.402394,39.937182],name: "南锣鼓巷", style: 1,}, ]
+     * style 样式
+     * zooms: 在指定地图缩放级别范围内展示海量点图层
+     * zIndex: 海量点图层叠加的顺序
+      */
+  var massMarks = new AMap.value.MassMarks(data.path, {
+    zIndex: data.zIndex, // 海量点图层叠加的顺序
+    zooms: data.zooms, // 在指定地图缩放级别范围内展示海量点图层
+    style: data.style, // 设置样式对象
+  })
+  massMarksAllList.value.push(massMarks)
+  massMarks.setMap(map)
+}
+// 移除点标记(海量点)
+const removeMassMarks = () => {
+  massMarksAllList.value.forEach((item: any) => {
+    item.setMap(null)
+  })
+  massMarksAllList.value = []
+}
+// ------------------------------------------------------------------------------------------------
 onMounted(() => {
   loading.value = true
   initMap()
@@ -302,6 +335,8 @@
   removeMarker, // 移除点标记 (一般点标记)
   addPolyline, // 添加折线
   removePolyline, // 移除折线
+  addMassMarks, // 添加点标记(海量点)
+  removeMassMarks, // 移除点标记(海量点)
 })
 </script>
 

diff --git a/src/App.vue b/src/App.vue
index 52ccd6e..a9268fb 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -6,7 +6,7 @@
 import useMenuStore from '@/store/modules/menu'
 
 const settingsStore = useSettingsStore()
-
+const $router = useRouter()
 const buttonConfig = ref({
   autoInsertSpace: true,
 })
@@ -81,14 +81,40 @@
 })
 
 onMounted(() => {
+  // // 浏览器访问当前位置
+  // if ('geolocation' in navigator) {
+  //   navigator.geolocation.getCurrentPosition(function (position) {
+  //     // 允许
+  //     console.log('纬度: ', position.coords.latitude)
+  //     console.log('经度: ', position.coords.longitude)
+  //   }, function (error) {
+  //     // 拒绝
+  //     console.error("Error Code = " + error.code + " - " + error.message);
+  //   })
+  // } else {
+  //   console.error("Geolocation is not supported by this browser.")
+  // }
   settingsStore.setMode(document.documentElement.clientWidth)
   window.onresize = () => {
     settingsStore.setMode(document.documentElement.clientWidth)
+    // 监听浏览器类型变化 刷新浏览器
+    const userAgent = navigator.userAgent || navigator.vendor || window.opera
+    const isMobile = /android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(userAgent)
+    if (`${isMobile ? 'mobile' : 'pc'}` !== window.localStorage.getItem('browser-type-bj-well')) {
+      // if (!window.localStorage.getItem('browser-type-bj-well')) { return }
+      console.log(`浏览器类型发生变化，由${window.localStorage.getItem('browser-type-bj-well')}变为${isMobile ? 'mobile' : 'pc'}`)
+      window.localStorage.setItem('browser-type-bj-well', `${isMobile ? 'mobile' : 'pc'}`)
+      $router.push('/')
+      setTimeout(() => {
+        window.location.reload()
+      }, 1000)
+    }
   }
   hotkeys('alt+i', () => {
     eventBus.emit('global-system-info-toggle')
   })
 })
+const browserType = window.localStorage.getItem('browser-type-bj-well') // mobile || pc
 </script>
 
 <template>
@@ -99,6 +125,6 @@
         '--g-sub-sidebar-actual-width': subSidebarActualWidth,
       }"
     />
-    <system-info />
+    <system-info v-if="browserType !== 'mobile'" />
   </el-config-provider>
 </template>
diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue
index e247e28..de24f71 100644
--- a/src/components/NormalTable/index.vue
+++ b/src/components/NormalTable/index.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup name="NormalTable">
 import type { Ref } from 'vue'
-import { ElTable } from 'element-plus'
+import { ElMessage, ElTable } from 'element-plus'
 import { defineExpose, ref } from 'vue'
 import type { TableColumn } from './table_interface'
 import TableColumnCom from './tableColumn.vue'
@@ -84,7 +84,11 @@
     type: String,
     default: 'default',
   }, // 表格大小，默认，small,mini等，与el-table条件相同
-  // 想要展示成链接的数据
+  // 是否要右击菜单
+  needContextmenu: {
+    type: Boolean,
+    default: false,
+  },
 })
 const emit = defineEmits(['change', 'selectionChange', 'rowClick', 'rowDbClick', 'multiSelect', 'filterChange', 'rowDisabled', 'handleClickFollowLink'])
 // -------定义数据--------------
@@ -148,8 +152,10 @@
 //   changeColumns()
 // })
 // 多选
+const multiSelectData = ref([])
 const handleSelectionChange = (val: any) => {
   // console.log(val)
+  multiSelectData.value = val
   emit('multiSelect', val)
 }
 // 单选选中
@@ -214,27 +220,87 @@
 const handleClickFollowLink = (row: any, title: string) => {
   emit('handleClickFollowLink', row, title)
 }
+
+// 右击当前行操作
+const clickIndex = ref(-1)
+const contextmenu = (row: any, column: any, event: Event, index: number) => {
+  if (!props.needContextmenu) { return }
+  // 阻止默认的右键菜单
+  event.preventDefault()
+  clickIndex.value = props.data.findIndex(item => item === row)
+  console.log('右击', clickIndex.value)
+  // 获取自定义菜单元素
+  var menu = document.getElementById('custom-menu')
+  // 设置自定义菜单的位置并显示
+  let positionX = event.pageX
+  let positionY = event.pageY
+  if (document.documentElement.clientHeight - event.pageY < 204) {
+    positionY = document.documentElement.clientHeight - 204 + 102
+  }
+  if (document.documentElement.clientWidth - event.pageX < 146) {
+    positionX = document.documentElement.clientWidth - 146
+  }
+  menu.style.top = `${positionY - 102}px`
+  menu.style.left = `${positionX}px`
+  menu.style.display = 'block'
+}
+// 点击其他位置隐藏自定义菜单
+document.addEventListener('click', () => {
+  document.getElementById('custom-menu').style.display = 'none'
+})
+// 添加行
+const costomAddRow = (type: string) => {
+  if (type === 'current-pre') {
+    // 当前行前方插入
+    props.data.splice(clickIndex.value, 0, JSON.parse(JSON.stringify(props.data[clickIndex.value])))
+  }
+  else if (type === 'current-next') {
+    // 当前行后方方插入
+    props.data.splice(clickIndex.value + 1, 0, JSON.parse(JSON.stringify(props.data[clickIndex.value])))
+  }
+  else if (type === 'list-head') {
+    // 列表头行插入
+    props.data.splice(0, 0, JSON.parse(JSON.stringify(props.data[clickIndex.value])))
+  }
+  else if (type === 'list-tail') {
+    // 列表尾行插入
+    props.data.splice(props.data.length, 0, JSON.parse(JSON.stringify(props.data[clickIndex.value])))
+  }
+  else if (type === 'select-pre') {
+    // 选中行前方插入
+    if (!multiSelectData.value.length) {
+      ElMessage.warning('未选择数据')
+      return
+    }
+    multiSelectData.value.forEach((item, index) => {
+      const dataIndex = props.data.findIndex(citem => item === citem)
+      props.data.splice(dataIndex, 0, JSON.parse(JSON.stringify(item)))
+    })
+    table.value!.clearSelection()
+  }
+  else if (type === 'select-next') {
+    // 选中行后方插入
+    if (!multiSelectData.value.length) {
+      ElMessage.warning('未选择数据')
+      return
+    }
+    multiSelectData.value.forEach((item, index) => {
+      const dataIndex = props.data.findIndex(citem => item === citem)
+      props.data.splice(dataIndex + 1, 0, JSON.parse(JSON.stringify(item)))
+    })
+    table.value!.clearSelection()
+  }
+  clickIndex.value = -1
+}
 </script>
 
 <template>
   <div id="normal-table-com">
     <el-table
-      id="print"
-      ref="table"
-      v-loading="listLoading"
-      :data="data"
-      :height="height"
-      border
-      stripe
-      :size="size"
-      style="width: 100%;"
-      :row-key="(row) => { return row.id || row.index }"
-      :span-method="mergeTableRow"
-      @selection-change="handleSelectionChange"
-      @select="selectClick"
-      @row-click="rowClick"
-      @row-dblclick="rowDbClick"
-      @filter-change="filterChange"
+      id="print" ref="table" v-loading="listLoading" :data="data" :height="height" border stripe :size="size"
+      style="width: 100%;" :row-key="(row) => { return row.id || row.index }" :span-method="mergeTableRow"
+      @selection-change="handleSelectionChange" @select="selectClick" @row-click="rowClick" @row-dblclick="rowDbClick"
+      @filter-change="filterChange" @row-contextmenu="contextmenu"
     >
       <slot name="preColumns" />
 
@@ -243,45 +309,48 @@
           <el-radio v-model="singleChecked" :label="scope.row.id" class="radio" @change="radioChange" />
         </template>
       </el-table-column>
-      <el-table-column v-if="isShowmultiSelect && isMulti" :reserve-selection="true" type="selection" width="38" :selectable="selectable" fixed="left" />
+      <el-table-column
+        v-if="isShowmultiSelect && isMulti" :reserve-selection="true" type="selection" width="38"
+        :selectable="selectable" fixed="left"
+      />
       <template v-for="column of columns" :key="column.value">
         <el-table-column
-          v-if="!column.isFilters"
-          :label="column.text"
-          :prop="column.value"
-          :width="column.width"
-          :align="column.align"
-          :show-overflow-tooltip="column.showOverflow ? column.showOverflow : true"
+          v-if="!column.isFilters" :label="column.text" :prop="column.value" :width="column.width"
+          :align="column.align" :show-overflow-tooltip="column.showOverflow ? column.showOverflow : true"
           :fixed="column.fixed"
         >
           <template #default="scope">
-            <span v-if="!column.filter && !column.isLink" :style="column.styleFilter ? column.styleFilter(scope.row) : ''">{{ scope.row[column.value] }}</span>
-            <span v-if="column.filter && !column.isLink" :style="column.styleFilter ? column.styleFilter(scope.row) : ''">{{ column.filter(scope.row) }}</span>
+            <span
+              v-if="!column.filter && !column.isLink"
+              :style="column.styleFilter ? column.styleFilter(scope.row) : ''"
+            >{{ scope.row[column.value] }}</span>
+            <span
+              v-if="column.filter && !column.isLink"
+              :style="column.styleFilter ? column.styleFilter(scope.row) : ''"
+            >{{ column.filter(scope.row) }}</span>
             <div v-if="column.isLink">
               <show-photo v-for="(item, index) in scope.row.fileArr" :key="index" :minio-file-name="item" /><br>
             </div>
             <div v-if="column.followLink">
-              <div v-for="(item, index) in scope.row.followLinkArr" :key="index" @click="handleClickFollowLink(scope.row, item)">
+              <div
+                v-for="(item, index) in scope.row.followLinkArr" :key="index"
+                @click="handleClickFollowLink(scope.row, item)"
+              >
                 <span :class="item !== '/' ? 'follow-link' : ''">{{ item }}</span>
               </div>
             </div>
           </template>
         </el-table-column>
         <el-table-column
-          v-if="column.isFilters"
-          :label="column.text"
-          :prop="column.value"
-          :width="column.width"
-          :align="column.align"
-          :show-overflow-tooltip="column.showOverflow ? column.showOverflow : true"
-          :fixed="column.fixed"
-          :column-key="column.value"
-          :filters="column.filters"
-          :filter-multiple="false"
+          v-if="column.isFilters" :label="column.text" :prop="column.value" :width="column.width"
+          :align="column.align" :show-overflow-tooltip="column.showOverflow ? column.showOverflow : true"
+          :fixed="column.fixed" :column-key="column.value" :filters="column.filters" :filter-multiple="false"
         >
           <template #default="scope">
-            <span v-if="!column.filter" :style="column.styleFilter ? column.styleFilter(scope.row) : ''">{{ scope.row[column.value] }}</span>
-            <span v-else :style="column.styleFilter ? column.styleFilter(scope.row) : ''">{{ column.filter(scope.row) }}</span>
+            <span v-if="!column.filter" :style="column.styleFilter ? column.styleFilter(scope.row) : ''">{{
+              scope.row[column.value] }}</span>
+            <span v-else :style="column.styleFilter ? column.styleFilter(scope.row) : ''">{{ column.filter(scope.row)
+            }}</span>
           </template>
         </el-table-column>
       </template>
@@ -290,19 +359,67 @@
     </el-table>
     <div v-if="props.pagination" style="width: 100%;margin-top: 10px;">
       <el-pagination
-        :current-page="props.query.offset"
-        :page-sizes="props.pageSizes as number[]"
-        :page-size="props.query.limit"
-        :total="props.total"
-        layout="total, sizes, prev, pager, next"
-        @size-change="handleSizeChange"
-        @current-change="handleCurrentChange"
+        :current-page="props.query.offset" :page-sizes="props.pageSizes as number[]"
+        :page-size="props.query.limit" :total="props.total" layout="total, sizes, prev, pager, next"
+        @size-change="handleSizeChange" @current-change="handleCurrentChange"
       />
     </div>
+    <!-- 自定义菜单 -->
+    <div id="custom-menu">
+      <p class="menu-item" @click="costomAddRow('current-pre')">
+        当前行前方插入
+      </p>
+      <p class="menu-item" @click="costomAddRow('current-next')">
+        当前行后方插入
+      </p>
+      <p class="menu-item" @click="costomAddRow('list-head')">
+        列表头行插入
+      </p>
+      <p class="menu-item" @click="costomAddRow('list-tail')">
+        列表尾行插入
+      </p>
+      <p v-if="isShowmultiSelect && isMulti" class="menu-item" @click="costomAddRow('select-pre')">
+        选中行前方插入
+      </p>
+      <!--  -->
+      <p v-if="isShowmultiSelect && isMulti" class="menu-item" @click="costomAddRow('select-next')">
+        选中行后方插入
+      </p>
+    </div>
   </div>
 </template>
 
 <style lang="scss" scoped>
+#custom-menu {
+  display: none;
+  position: fixed;
+  background-color: #fff;
+  border-radius: 5px;
+  padding: 5px 0;
+  z-index: 1000;
+  border: 1px solid #c8c9cc;
+  box-shadow: 0 0 12px rgb(0 0 0 / 12%);
+
+  .menu-item {
+    display: flex;
+    align-items: center;
+    white-space: nowrap;
+    list-style: none;
+    line-height: 22px;
+    padding: 5px 16px;
+    margin: 0;
+    // font-size: var(--el-font-size-base);
+    color: #606266;
+    cursor: pointer;
+    outline: none;
+
+    &:hover {
+      background-color: #ecf5ff;
+      color: #409eff;
+    }
+  }
+}
+
 #normal-table-com {
   width: 100%;
 }
diff --git a/src/components/TableContainer/index.vue b/src/components/TableContainer/index.vue
index 0c07be6..87b1567 100644
--- a/src/components/TableContainer/index.vue
+++ b/src/components/TableContainer/index.vue
@@ -71,16 +71,18 @@
   <config-dialog ref="configRef" @confirm="confirmColumns" />
   <div class="table-container">
     <div class="button-area">
-      <div v-if="titleShow" :class="props.isCenter ? 'title-center' : 'title-left'">
-        <el-icon v-if="isConfig" :size="21" class="icon-menu" @click="config">
-          <menu />
-        </el-icon>
-        <span>
-          {{ title }}
-        </span>
-      </div>
-      <div class="button-left">
-        <slot name="btns-left" />
+      <div style="display: flex;align-items: center;">
+        <div v-if="titleShow" :class="props.isCenter ? 'title-center' : 'title-left'">
+          <el-icon v-if="isConfig" :size="21" class="icon-menu" @click="config">
+            <menu />
+          </el-icon>
+          <span>
+            {{ title }}
+          </span>
+        </div>
+        <div class="button-left">
+          <slot name="btns-left" />
+        </div>
       </div>
       <div class="button-right">
         <slot name="btns-right" />
diff --git a/src/components/map/index.vue b/src/components/map/index.vue
index 55e37da..620c813 100644
--- a/src/components/map/index.vue
+++ b/src/components/map/index.vue
@@ -8,7 +8,7 @@
 import { styleType } from 'element-plus/es/components/table-v2/src/common'
 
 const $props = defineProps({
-  // 初始图层 normal satellite
+  // 初始图层 normal satellite dark
   layer: {
     type: String,
     default: 'normal',
@@ -35,8 +35,8 @@
 const layer = ref()
 // 图层标识
 const layerFlag = ref('normal')
-// const publicPath = import.meta.env.BASE_URL
-// console.log(publicPath, 'publicPath')
+const publicPath = import.meta.env.BASE_URL
+console.log(publicPath, 'publicPath')
 // -------------------------------------初始化地图--------------------------------------------------
 const initMap = () => {
   AMapLoader.load({
@@ -61,18 +61,22 @@
         map.value.setFeatures(['bg', 'building'])
         layerFlag.value = 'satellite'
       }
+      else if ($props.layer === 'dark') {
+        // 深色图层
+        map.value.setMapStyle('amap://styles/darkblue')
+      }
       // 地图图块加载完成后触发
       map.value.on('complete', () => {
         //  修改loading状态
         console.log('地图加载完成')
-        $emits('complete')
+        $emits('complete', AMap.value)
         loading.value = false
       })
       // 地图绑定右击事件
       map.value.on('mousedown', clickHandler)
     })
     .catch((e) => {
-      console.log('地图加载失败')
+      console.log(e, '地图加载失败')
     })
 }
 // ------------------------------------------------------------------------------------------------
@@ -156,7 +160,7 @@
 }
 // ------------------------------------------------------------------------------------------------
 
-// -------------------------------------标记本文操作--------------------------------------------------
+// -------------------------------------标记文本操作--------------------------------------------------
 // 标记文本数组
 const textAllList = ref<any>([])
 // 添加标记文字
@@ -282,6 +286,35 @@
   lineAllList.value = []
 }
 // ------------------------------------------------------------------------------------------------
+
+// -----------------------------------海量点标记操作------------------------------------------------
+// 点标记(海量点)数组
+const massMarksAllList = ref<any>([])
+// 添加点标记(海量点)
+const addMassMarks = (data: any) => {
+  /**
+     * data
+     * path: 折线点位数据  [{lnglat: [116.402394,39.937182],name: "南锣鼓巷", style: 1,}, ]
+     * style 样式
+     * zooms: 在指定地图缩放级别范围内展示海量点图层
+     * zIndex: 海量点图层叠加的顺序
+      */
+  var massMarks = new AMap.value.MassMarks(data.path, {
+    zIndex: data.zIndex, // 海量点图层叠加的顺序
+    zooms: data.zooms, // 在指定地图缩放级别范围内展示海量点图层
+    style: data.style, // 设置样式对象
+  })
+  massMarksAllList.value.push(massMarks)
+  massMarks.setMap(map)
+}
+// 移除点标记(海量点)
+const removeMassMarks = () => {
+  massMarksAllList.value.forEach((item: any) => {
+    item.setMap(null)
+  })
+  massMarksAllList.value = []
+}
+// ------------------------------------------------------------------------------------------------
 onMounted(() => {
   loading.value = true
   initMap()
@@ -302,6 +335,8 @@
   removeMarker, // 移除点标记 (一般点标记)
   addPolyline, // 添加折线
   removePolyline, // 移除折线
+  addMassMarks, // 添加点标记(海量点)
+  removeMassMarks, // 移除点标记(海量点)
 })
 </script>
 
diff --git a/src/layouts/components/Header/mobile.vue b/src/layouts/components/Header/mobile.vue
new file mode 100644
index 0000000..a27de4b
--- /dev/null
+++ b/src/layouts/components/Header/mobile.vue
@@ -0,0 +1,53 @@
+<!-- 移动端头部 -->
+<script lang="ts" setup name="HeaderMobile">
+import { ArrowLeftBold, House } from '@element-plus/icons-vue'
+const route = useRoute()
+const router = useRouter()
+const goBack = (type: 'back' | 'home') => {
+  if (type === 'back') {
+    router.go(-1)
+  }
+  else if (type === 'home') {
+    router.push('/')
+  }
+}
+</script>
+
+<template>
+  <div>
+    <div v-if="route.meta.isHeader" class="header-mobile">
+      <div v-if="route.meta.isBack">
+        <el-icon :size="25" @click="goBack('back')">
+          <arrow-left-bold />
+        </el-icon>
+      </div>
+      <div v-else style="width: 25px;" />
+      <div> {{ route.meta.title }}</div>
+      <el-icon v-if="route.meta.isHome" :size="25" @click="goBack('home')">
+        <house />
+      </el-icon>
+      <div v-else style="width: 25px;" />
+    </div>
+    <div v-if="route.meta.isHeader" class="occupying" />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.header-mobile {
+  width: 100%;
+  background-color: #70b4ff;
+  height: 35px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 10px;
+  position: fixed;
+  top: 0;
+}
+
+.occupying {
+  height: 35px;
+  background-color: transparent;
+  width: 100%;
+}
+</style>

diff --git a/src/App.vue b/src/App.vue
index 52ccd6e..a9268fb 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -6,7 +6,7 @@
 import useMenuStore from '@/store/modules/menu'
 
 const settingsStore = useSettingsStore()
-
+const $router = useRouter()
 const buttonConfig = ref({
   autoInsertSpace: true,
 })
@@ -81,14 +81,40 @@
 })
 
 onMounted(() => {
+  // // 浏览器访问当前位置
+  // if ('geolocation' in navigator) {
+  //   navigator.geolocation.getCurrentPosition(function (position) {
+  //     // 允许
+  //     console.log('纬度: ', position.coords.latitude)
+  //     console.log('经度: ', position.coords.longitude)
+  //   }, function (error) {
+  //     // 拒绝
+  //     console.error("Error Code = " + error.code + " - " + error.message);
+  //   })
+  // } else {
+  //   console.error("Geolocation is not supported by this browser.")
+  // }
   settingsStore.setMode(document.documentElement.clientWidth)
   window.onresize = () => {
     settingsStore.setMode(document.documentElement.clientWidth)
+    // 监听浏览器类型变化 刷新浏览器
+    const userAgent = navigator.userAgent || navigator.vendor || window.opera
+    const isMobile = /android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(userAgent)
+    if (`${isMobile ? 'mobile' : 'pc'}` !== window.localStorage.getItem('browser-type-bj-well')) {
+      // if (!window.localStorage.getItem('browser-type-bj-well')) { return }
+      console.log(`浏览器类型发生变化，由${window.localStorage.getItem('browser-type-bj-well')}变为${isMobile ? 'mobile' : 'pc'}`)
+      window.localStorage.setItem('browser-type-bj-well', `${isMobile ? 'mobile' : 'pc'}`)
+      $router.push('/')
+      setTimeout(() => {
+        window.location.reload()
+      }, 1000)
+    }
   }
   hotkeys('alt+i', () => {
     eventBus.emit('global-system-info-toggle')
   })
 })
+const browserType = window.localStorage.getItem('browser-type-bj-well') // mobile || pc
 </script>
 
 <template>
@@ -99,6 +125,6 @@
         '--g-sub-sidebar-actual-width': subSidebarActualWidth,
       }"
     />
-    <system-info />
+    <system-info v-if="browserType !== 'mobile'" />
   </el-config-provider>
 </template>
diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue
index e247e28..de24f71 100644
--- a/src/components/NormalTable/index.vue
+++ b/src/components/NormalTable/index.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup name="NormalTable">
 import type { Ref } from 'vue'
-import { ElTable } from 'element-plus'
+import { ElMessage, ElTable } from 'element-plus'
 import { defineExpose, ref } from 'vue'
 import type { TableColumn } from './table_interface'
 import TableColumnCom from './tableColumn.vue'
@@ -84,7 +84,11 @@
     type: String,
     default: 'default',
   }, // 表格大小，默认，small,mini等，与el-table条件相同
-  // 想要展示成链接的数据
+  // 是否要右击菜单
+  needContextmenu: {
+    type: Boolean,
+    default: false,
+  },
 })
 const emit = defineEmits(['change', 'selectionChange', 'rowClick', 'rowDbClick', 'multiSelect', 'filterChange', 'rowDisabled', 'handleClickFollowLink'])
 // -------定义数据--------------
@@ -148,8 +152,10 @@
 //   changeColumns()
 // })
 // 多选
+const multiSelectData = ref([])
 const handleSelectionChange = (val: any) => {
   // console.log(val)
+  multiSelectData.value = val
   emit('multiSelect', val)
 }
 // 单选选中
@@ -214,27 +220,87 @@
 const handleClickFollowLink = (row: any, title: string) => {
   emit('handleClickFollowLink', row, title)
 }
+
+// 右击当前行操作
+const clickIndex = ref(-1)
+const contextmenu = (row: any, column: any, event: Event, index: number) => {
+  if (!props.needContextmenu) { return }
+  // 阻止默认的右键菜单
+  event.preventDefault()
+  clickIndex.value = props.data.findIndex(item => item === row)
+  console.log('右击', clickIndex.value)
+  // 获取自定义菜单元素
+  var menu = document.getElementById('custom-menu')
+  // 设置自定义菜单的位置并显示
+  let positionX = event.pageX
+  let positionY = event.pageY
+  if (document.documentElement.clientHeight - event.pageY < 204) {
+    positionY = document.documentElement.clientHeight - 204 + 102
+  }
+  if (document.documentElement.clientWidth - event.pageX < 146) {
+    positionX = document.documentElement.clientWidth - 146
+  }
+  menu.style.top = `${positionY - 102}px`
+  menu.style.left = `${positionX}px`
+  menu.style.display = 'block'
+}
+// 点击其他位置隐藏自定义菜单
+document.addEventListener('click', () => {
+  document.getElementById('custom-menu').style.display = 'none'
+})
+// 添加行
+const costomAddRow = (type: string) => {
+  if (type === 'current-pre') {
+    // 当前行前方插入
+    props.data.splice(clickIndex.value, 0, JSON.parse(JSON.stringify(props.data[clickIndex.value])))
+  }
+  else if (type === 'current-next') {
+    // 当前行后方方插入
+    props.data.splice(clickIndex.value + 1, 0, JSON.parse(JSON.stringify(props.data[clickIndex.value])))
+  }
+  else if (type === 'list-head') {
+    // 列表头行插入
+    props.data.splice(0, 0, JSON.parse(JSON.stringify(props.data[clickIndex.value])))
+  }
+  else if (type === 'list-tail') {
+    // 列表尾行插入
+    props.data.splice(props.data.length, 0, JSON.parse(JSON.stringify(props.data[clickIndex.value])))
+  }
+  else if (type === 'select-pre') {
+    // 选中行前方插入
+    if (!multiSelectData.value.length) {
+      ElMessage.warning('未选择数据')
+      return
+    }
+    multiSelectData.value.forEach((item, index) => {
+      const dataIndex = props.data.findIndex(citem => item === citem)
+      props.data.splice(dataIndex, 0, JSON.parse(JSON.stringify(item)))
+    })
+    table.value!.clearSelection()
+  }
+  else if (type === 'select-next') {
+    // 选中行后方插入
+    if (!multiSelectData.value.length) {
+      ElMessage.warning('未选择数据')
+      return
+    }
+    multiSelectData.value.forEach((item, index) => {
+      const dataIndex = props.data.findIndex(citem => item === citem)
+      props.data.splice(dataIndex + 1, 0, JSON.parse(JSON.stringify(item)))
+    })
+    table.value!.clearSelection()
+  }
+  clickIndex.value = -1
+}
 </script>
 
 <template>
   <div id="normal-table-com">
     <el-table
-      id="print"
-      ref="table"
-      v-loading="listLoading"
-      :data="data"
-      :height="height"
-      border
-      stripe
-      :size="size"
-      style="width: 100%;"
-      :row-key="(row) => { return row.id || row.index }"
-      :span-method="mergeTableRow"
-      @selection-change="handleSelectionChange"
-      @select="selectClick"
-      @row-click="rowClick"
-      @row-dblclick="rowDbClick"
-      @filter-change="filterChange"
+      id="print" ref="table" v-loading="listLoading" :data="data" :height="height" border stripe :size="size"
+      style="width: 100%;" :row-key="(row) => { return row.id || row.index }" :span-method="mergeTableRow"
+      @selection-change="handleSelectionChange" @select="selectClick" @row-click="rowClick" @row-dblclick="rowDbClick"
+      @filter-change="filterChange" @row-contextmenu="contextmenu"
     >
       <slot name="preColumns" />
 
@@ -243,45 +309,48 @@
           <el-radio v-model="singleChecked" :label="scope.row.id" class="radio" @change="radioChange" />
         </template>
       </el-table-column>
-      <el-table-column v-if="isShowmultiSelect && isMulti" :reserve-selection="true" type="selection" width="38" :selectable="selectable" fixed="left" />
+      <el-table-column
+        v-if="isShowmultiSelect && isMulti" :reserve-selection="true" type="selection" width="38"
+        :selectable="selectable" fixed="left"
+      />
       <template v-for="column of columns" :key="column.value">
         <el-table-column
-          v-if="!column.isFilters"
-          :label="column.text"
-          :prop="column.value"
-          :width="column.width"
-          :align="column.align"
-          :show-overflow-tooltip="column.showOverflow ? column.showOverflow : true"
+          v-if="!column.isFilters" :label="column.text" :prop="column.value" :width="column.width"
+          :align="column.align" :show-overflow-tooltip="column.showOverflow ? column.showOverflow : true"
           :fixed="column.fixed"
         >
           <template #default="scope">
-            <span v-if="!column.filter && !column.isLink" :style="column.styleFilter ? column.styleFilter(scope.row) : ''">{{ scope.row[column.value] }}</span>
-            <span v-if="column.filter && !column.isLink" :style="column.styleFilter ? column.styleFilter(scope.row) : ''">{{ column.filter(scope.row) }}</span>
+            <span
+              v-if="!column.filter && !column.isLink"
+              :style="column.styleFilter ? column.styleFilter(scope.row) : ''"
+            >{{ scope.row[column.value] }}</span>
+            <span
+              v-if="column.filter && !column.isLink"
+              :style="column.styleFilter ? column.styleFilter(scope.row) : ''"
+            >{{ column.filter(scope.row) }}</span>
             <div v-if="column.isLink">
               <show-photo v-for="(item, index) in scope.row.fileArr" :key="index" :minio-file-name="item" /><br>
             </div>
             <div v-if="column.followLink">
-              <div v-for="(item, index) in scope.row.followLinkArr" :key="index" @click="handleClickFollowLink(scope.row, item)">
+              <div
+                v-for="(item, index) in scope.row.followLinkArr" :key="index"
+                @click="handleClickFollowLink(scope.row, item)"
+              >
                 <span :class="item !== '/' ? 'follow-link' : ''">{{ item }}</span>
               </div>
             </div>
           </template>
         </el-table-column>
         <el-table-column
-          v-if="column.isFilters"
-          :label="column.text"
-          :prop="column.value"
-          :width="column.width"
-          :align="column.align"
-          :show-overflow-tooltip="column.showOverflow ? column.showOverflow : true"
-          :fixed="column.fixed"
-          :column-key="column.value"
-          :filters="column.filters"
-          :filter-multiple="false"
+          v-if="column.isFilters" :label="column.text" :prop="column.value" :width="column.width"
+          :align="column.align" :show-overflow-tooltip="column.showOverflow ? column.showOverflow : true"
+          :fixed="column.fixed" :column-key="column.value" :filters="column.filters" :filter-multiple="false"
         >
           <template #default="scope">
-            <span v-if="!column.filter" :style="column.styleFilter ? column.styleFilter(scope.row) : ''">{{ scope.row[column.value] }}</span>
-            <span v-else :style="column.styleFilter ? column.styleFilter(scope.row) : ''">{{ column.filter(scope.row) }}</span>
+            <span v-if="!column.filter" :style="column.styleFilter ? column.styleFilter(scope.row) : ''">{{
+              scope.row[column.value] }}</span>
+            <span v-else :style="column.styleFilter ? column.styleFilter(scope.row) : ''">{{ column.filter(scope.row)
+            }}</span>
           </template>
         </el-table-column>
       </template>
@@ -290,19 +359,67 @@
     </el-table>
     <div v-if="props.pagination" style="width: 100%;margin-top: 10px;">
       <el-pagination
-        :current-page="props.query.offset"
-        :page-sizes="props.pageSizes as number[]"
-        :page-size="props.query.limit"
-        :total="props.total"
-        layout="total, sizes, prev, pager, next"
-        @size-change="handleSizeChange"
-        @current-change="handleCurrentChange"
+        :current-page="props.query.offset" :page-sizes="props.pageSizes as number[]"
+        :page-size="props.query.limit" :total="props.total" layout="total, sizes, prev, pager, next"
+        @size-change="handleSizeChange" @current-change="handleCurrentChange"
       />
     </div>
+    <!-- 自定义菜单 -->
+    <div id="custom-menu">
+      <p class="menu-item" @click="costomAddRow('current-pre')">
+        当前行前方插入
+      </p>
+      <p class="menu-item" @click="costomAddRow('current-next')">
+        当前行后方插入
+      </p>
+      <p class="menu-item" @click="costomAddRow('list-head')">
+        列表头行插入
+      </p>
+      <p class="menu-item" @click="costomAddRow('list-tail')">
+        列表尾行插入
+      </p>
+      <p v-if="isShowmultiSelect && isMulti" class="menu-item" @click="costomAddRow('select-pre')">
+        选中行前方插入
+      </p>
+      <!--  -->
+      <p v-if="isShowmultiSelect && isMulti" class="menu-item" @click="costomAddRow('select-next')">
+        选中行后方插入
+      </p>
+    </div>
   </div>
 </template>
 
 <style lang="scss" scoped>
+#custom-menu {
+  display: none;
+  position: fixed;
+  background-color: #fff;
+  border-radius: 5px;
+  padding: 5px 0;
+  z-index: 1000;
+  border: 1px solid #c8c9cc;
+  box-shadow: 0 0 12px rgb(0 0 0 / 12%);
+
+  .menu-item {
+    display: flex;
+    align-items: center;
+    white-space: nowrap;
+    list-style: none;
+    line-height: 22px;
+    padding: 5px 16px;
+    margin: 0;
+    // font-size: var(--el-font-size-base);
+    color: #606266;
+    cursor: pointer;
+    outline: none;
+
+    &:hover {
+      background-color: #ecf5ff;
+      color: #409eff;
+    }
+  }
+}
+
 #normal-table-com {
   width: 100%;
 }
diff --git a/src/components/TableContainer/index.vue b/src/components/TableContainer/index.vue
index 0c07be6..87b1567 100644
--- a/src/components/TableContainer/index.vue
+++ b/src/components/TableContainer/index.vue
@@ -71,16 +71,18 @@
   <config-dialog ref="configRef" @confirm="confirmColumns" />
   <div class="table-container">
     <div class="button-area">
-      <div v-if="titleShow" :class="props.isCenter ? 'title-center' : 'title-left'">
-        <el-icon v-if="isConfig" :size="21" class="icon-menu" @click="config">
-          <menu />
-        </el-icon>
-        <span>
-          {{ title }}
-        </span>
-      </div>
-      <div class="button-left">
-        <slot name="btns-left" />
+      <div style="display: flex;align-items: center;">
+        <div v-if="titleShow" :class="props.isCenter ? 'title-center' : 'title-left'">
+          <el-icon v-if="isConfig" :size="21" class="icon-menu" @click="config">
+            <menu />
+          </el-icon>
+          <span>
+            {{ title }}
+          </span>
+        </div>
+        <div class="button-left">
+          <slot name="btns-left" />
+        </div>
       </div>
       <div class="button-right">
         <slot name="btns-right" />
diff --git a/src/components/map/index.vue b/src/components/map/index.vue
index 55e37da..620c813 100644
--- a/src/components/map/index.vue
+++ b/src/components/map/index.vue
@@ -8,7 +8,7 @@
 import { styleType } from 'element-plus/es/components/table-v2/src/common'
 
 const $props = defineProps({
-  // 初始图层 normal satellite
+  // 初始图层 normal satellite dark
   layer: {
     type: String,
     default: 'normal',
@@ -35,8 +35,8 @@
 const layer = ref()
 // 图层标识
 const layerFlag = ref('normal')
-// const publicPath = import.meta.env.BASE_URL
-// console.log(publicPath, 'publicPath')
+const publicPath = import.meta.env.BASE_URL
+console.log(publicPath, 'publicPath')
 // -------------------------------------初始化地图--------------------------------------------------
 const initMap = () => {
   AMapLoader.load({
@@ -61,18 +61,22 @@
         map.value.setFeatures(['bg', 'building'])
         layerFlag.value = 'satellite'
       }
+      else if ($props.layer === 'dark') {
+        // 深色图层
+        map.value.setMapStyle('amap://styles/darkblue')
+      }
       // 地图图块加载完成后触发
       map.value.on('complete', () => {
         //  修改loading状态
         console.log('地图加载完成')
-        $emits('complete')
+        $emits('complete', AMap.value)
         loading.value = false
       })
       // 地图绑定右击事件
       map.value.on('mousedown', clickHandler)
     })
     .catch((e) => {
-      console.log('地图加载失败')
+      console.log(e, '地图加载失败')
     })
 }
 // ------------------------------------------------------------------------------------------------
@@ -156,7 +160,7 @@
 }
 // ------------------------------------------------------------------------------------------------
 
-// -------------------------------------标记本文操作--------------------------------------------------
+// -------------------------------------标记文本操作--------------------------------------------------
 // 标记文本数组
 const textAllList = ref<any>([])
 // 添加标记文字
@@ -282,6 +286,35 @@
   lineAllList.value = []
 }
 // ------------------------------------------------------------------------------------------------
+
+// -----------------------------------海量点标记操作------------------------------------------------
+// 点标记(海量点)数组
+const massMarksAllList = ref<any>([])
+// 添加点标记(海量点)
+const addMassMarks = (data: any) => {
+  /**
+     * data
+     * path: 折线点位数据  [{lnglat: [116.402394,39.937182],name: "南锣鼓巷", style: 1,}, ]
+     * style 样式
+     * zooms: 在指定地图缩放级别范围内展示海量点图层
+     * zIndex: 海量点图层叠加的顺序
+      */
+  var massMarks = new AMap.value.MassMarks(data.path, {
+    zIndex: data.zIndex, // 海量点图层叠加的顺序
+    zooms: data.zooms, // 在指定地图缩放级别范围内展示海量点图层
+    style: data.style, // 设置样式对象
+  })
+  massMarksAllList.value.push(massMarks)
+  massMarks.setMap(map)
+}
+// 移除点标记(海量点)
+const removeMassMarks = () => {
+  massMarksAllList.value.forEach((item: any) => {
+    item.setMap(null)
+  })
+  massMarksAllList.value = []
+}
+// ------------------------------------------------------------------------------------------------
 onMounted(() => {
   loading.value = true
   initMap()
@@ -302,6 +335,8 @@
   removeMarker, // 移除点标记 (一般点标记)
   addPolyline, // 添加折线
   removePolyline, // 移除折线
+  addMassMarks, // 添加点标记(海量点)
+  removeMassMarks, // 移除点标记(海量点)
 })
 </script>
 
diff --git a/src/layouts/components/Header/mobile.vue b/src/layouts/components/Header/mobile.vue
new file mode 100644
index 0000000..a27de4b
--- /dev/null
+++ b/src/layouts/components/Header/mobile.vue
@@ -0,0 +1,53 @@
+<!-- 移动端头部 -->
+<script lang="ts" setup name="HeaderMobile">
+import { ArrowLeftBold, House } from '@element-plus/icons-vue'
+const route = useRoute()
+const router = useRouter()
+const goBack = (type: 'back' | 'home') => {
+  if (type === 'back') {
+    router.go(-1)
+  }
+  else if (type === 'home') {
+    router.push('/')
+  }
+}
+</script>
+
+<template>
+  <div>
+    <div v-if="route.meta.isHeader" class="header-mobile">
+      <div v-if="route.meta.isBack">
+        <el-icon :size="25" @click="goBack('back')">
+          <arrow-left-bold />
+        </el-icon>
+      </div>
+      <div v-else style="width: 25px;" />
+      <div> {{ route.meta.title }}</div>
+      <el-icon v-if="route.meta.isHome" :size="25" @click="goBack('home')">
+        <house />
+      </el-icon>
+      <div v-else style="width: 25px;" />
+    </div>
+    <div v-if="route.meta.isHeader" class="occupying" />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.header-mobile {
+  width: 100%;
+  background-color: #70b4ff;
+  height: 35px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 10px;
+  position: fixed;
+  top: 0;
+}
+
+.occupying {
+  height: 35px;
+  background-color: transparent;
+  width: 100%;
+}
+</style>
diff --git a/src/layouts/mobile.vue b/src/layouts/mobile.vue
new file mode 100644
index 0000000..c6235a4
--- /dev/null
+++ b/src/layouts/mobile.vue
@@ -0,0 +1,47 @@
+<!-- 移动端基础布局组件 -->
+<script lang="ts" setup name="LayoutMobile">
+import headerMobile from './components/Header/mobile.vue'
+import useKeepAliveStore from '@/store/modules/keepAlive'
+const keepAliveStore = useKeepAliveStore()
+const routeInfo = useRoute()
+</script>
+
+<template>
+  <div class="layout">
+    <div id="app-main">
+      <!-- 头部 -->
+      <header-mobile />
+      <div class="wrapper">
+        <div class="main-container">
+          <div class="main">
+            <router-view v-slot="{ Component, route }">
+              <transition name="main" mode appear>
+                <keep-alive :include="keepAliveStore.list">
+                  <component :is="Component" :key="route.fullPath" />
+                </keep-alive>
+              </transition>
+            </router-view>
+          </div>
+          <copyright />
+        </div>
+      </div>
+      <el-backtop :right="20" :bottom="20" title="回到顶部" />
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.main {
+  overflow-x: hidden;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+
+  // firefox隐藏滚动条
+  scrollbar-width: none;
+
+  // chrome隐藏滚动条
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}
+</style>

diff --git a/src/App.vue b/src/App.vue
index 52ccd6e..a9268fb 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -6,7 +6,7 @@
 import useMenuStore from '@/store/modules/menu'
 
 const settingsStore = useSettingsStore()
-
+const $router = useRouter()
 const buttonConfig = ref({
   autoInsertSpace: true,
 })
@@ -81,14 +81,40 @@
 })
 
 onMounted(() => {
+  // // 浏览器访问当前位置
+  // if ('geolocation' in navigator) {
+  //   navigator.geolocation.getCurrentPosition(function (position) {
+  //     // 允许
+  //     console.log('纬度: ', position.coords.latitude)
+  //     console.log('经度: ', position.coords.longitude)
+  //   }, function (error) {
+  //     // 拒绝
+  //     console.error("Error Code = " + error.code + " - " + error.message);
+  //   })
+  // } else {
+  //   console.error("Geolocation is not supported by this browser.")
+  // }
   settingsStore.setMode(document.documentElement.clientWidth)
   window.onresize = () => {
     settingsStore.setMode(document.documentElement.clientWidth)
+    // 监听浏览器类型变化 刷新浏览器
+    const userAgent = navigator.userAgent || navigator.vendor || window.opera
+    const isMobile = /android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(userAgent)
+    if (`${isMobile ? 'mobile' : 'pc'}` !== window.localStorage.getItem('browser-type-bj-well')) {
+      // if (!window.localStorage.getItem('browser-type-bj-well')) { return }
+      console.log(`浏览器类型发生变化，由${window.localStorage.getItem('browser-type-bj-well')}变为${isMobile ? 'mobile' : 'pc'}`)
+      window.localStorage.setItem('browser-type-bj-well', `${isMobile ? 'mobile' : 'pc'}`)
+      $router.push('/')
+      setTimeout(() => {
+        window.location.reload()
+      }, 1000)
+    }
   }
   hotkeys('alt+i', () => {
     eventBus.emit('global-system-info-toggle')
   })
 })
+const browserType = window.localStorage.getItem('browser-type-bj-well') // mobile || pc
 </script>
 
 <template>
@@ -99,6 +125,6 @@
         '--g-sub-sidebar-actual-width': subSidebarActualWidth,
       }"
     />
-    <system-info />
+    <system-info v-if="browserType !== 'mobile'" />
   </el-config-provider>
 </template>
diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue
index e247e28..de24f71 100644
--- a/src/components/NormalTable/index.vue
+++ b/src/components/NormalTable/index.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup name="NormalTable">
 import type { Ref } from 'vue'
-import { ElTable } from 'element-plus'
+import { ElMessage, ElTable } from 'element-plus'
 import { defineExpose, ref } from 'vue'
 import type { TableColumn } from './table_interface'
 import TableColumnCom from './tableColumn.vue'
@@ -84,7 +84,11 @@
     type: String,
     default: 'default',
   }, // 表格大小，默认，small,mini等，与el-table条件相同
-  // 想要展示成链接的数据
+  // 是否要右击菜单
+  needContextmenu: {
+    type: Boolean,
+    default: false,
+  },
 })
 const emit = defineEmits(['change', 'selectionChange', 'rowClick', 'rowDbClick', 'multiSelect', 'filterChange', 'rowDisabled', 'handleClickFollowLink'])
 // -------定义数据--------------
@@ -148,8 +152,10 @@
 //   changeColumns()
 // })
 // 多选
+const multiSelectData = ref([])
 const handleSelectionChange = (val: any) => {
   // console.log(val)
+  multiSelectData.value = val
   emit('multiSelect', val)
 }
 // 单选选中
@@ -214,27 +220,87 @@
 const handleClickFollowLink = (row: any, title: string) => {
   emit('handleClickFollowLink', row, title)
 }
+
+// 右击当前行操作
+const clickIndex = ref(-1)
+const contextmenu = (row: any, column: any, event: Event, index: number) => {
+  if (!props.needContextmenu) { return }
+  // 阻止默认的右键菜单
+  event.preventDefault()
+  clickIndex.value = props.data.findIndex(item => item === row)
+  console.log('右击', clickIndex.value)
+  // 获取自定义菜单元素
+  var menu = document.getElementById('custom-menu')
+  // 设置自定义菜单的位置并显示
+  let positionX = event.pageX
+  let positionY = event.pageY
+  if (document.documentElement.clientHeight - event.pageY < 204) {
+    positionY = document.documentElement.clientHeight - 204 + 102
+  }
+  if (document.documentElement.clientWidth - event.pageX < 146) {
+    positionX = document.documentElement.clientWidth - 146
+  }
+  menu.style.top = `${positionY - 102}px`
+  menu.style.left = `${positionX}px`
+  menu.style.display = 'block'
+}
+// 点击其他位置隐藏自定义菜单
+document.addEventListener('click', () => {
+  document.getElementById('custom-menu').style.display = 'none'
+})
+// 添加行
+const costomAddRow = (type: string) => {
+  if (type === 'current-pre') {
+    // 当前行前方插入
+    props.data.splice(clickIndex.value, 0, JSON.parse(JSON.stringify(props.data[clickIndex.value])))
+  }
+  else if (type === 'current-next') {
+    // 当前行后方方插入
+    props.data.splice(clickIndex.value + 1, 0, JSON.parse(JSON.stringify(props.data[clickIndex.value])))
+  }
+  else if (type === 'list-head') {
+    // 列表头行插入
+    props.data.splice(0, 0, JSON.parse(JSON.stringify(props.data[clickIndex.value])))
+  }
+  else if (type === 'list-tail') {
+    // 列表尾行插入
+    props.data.splice(props.data.length, 0, JSON.parse(JSON.stringify(props.data[clickIndex.value])))
+  }
+  else if (type === 'select-pre') {
+    // 选中行前方插入
+    if (!multiSelectData.value.length) {
+      ElMessage.warning('未选择数据')
+      return
+    }
+    multiSelectData.value.forEach((item, index) => {
+      const dataIndex = props.data.findIndex(citem => item === citem)
+      props.data.splice(dataIndex, 0, JSON.parse(JSON.stringify(item)))
+    })
+    table.value!.clearSelection()
+  }
+  else if (type === 'select-next') {
+    // 选中行后方插入
+    if (!multiSelectData.value.length) {
+      ElMessage.warning('未选择数据')
+      return
+    }
+    multiSelectData.value.forEach((item, index) => {
+      const dataIndex = props.data.findIndex(citem => item === citem)
+      props.data.splice(dataIndex + 1, 0, JSON.parse(JSON.stringify(item)))
+    })
+    table.value!.clearSelection()
+  }
+  clickIndex.value = -1
+}
 </script>
 
 <template>
   <div id="normal-table-com">
     <el-table
-      id="print"
-      ref="table"
-      v-loading="listLoading"
-      :data="data"
-      :height="height"
-      border
-      stripe
-      :size="size"
-      style="width: 100%;"
-      :row-key="(row) => { return row.id || row.index }"
-      :span-method="mergeTableRow"
-      @selection-change="handleSelectionChange"
-      @select="selectClick"
-      @row-click="rowClick"
-      @row-dblclick="rowDbClick"
-      @filter-change="filterChange"
+      id="print" ref="table" v-loading="listLoading" :data="data" :height="height" border stripe :size="size"
+      style="width: 100%;" :row-key="(row) => { return row.id || row.index }" :span-method="mergeTableRow"
+      @selection-change="handleSelectionChange" @select="selectClick" @row-click="rowClick" @row-dblclick="rowDbClick"
+      @filter-change="filterChange" @row-contextmenu="contextmenu"
     >
       <slot name="preColumns" />
 
@@ -243,45 +309,48 @@
           <el-radio v-model="singleChecked" :label="scope.row.id" class="radio" @change="radioChange" />
         </template>
       </el-table-column>
-      <el-table-column v-if="isShowmultiSelect && isMulti" :reserve-selection="true" type="selection" width="38" :selectable="selectable" fixed="left" />
+      <el-table-column
+        v-if="isShowmultiSelect && isMulti" :reserve-selection="true" type="selection" width="38"
+        :selectable="selectable" fixed="left"
+      />
       <template v-for="column of columns" :key="column.value">
         <el-table-column
-          v-if="!column.isFilters"
-          :label="column.text"
-          :prop="column.value"
-          :width="column.width"
-          :align="column.align"
-          :show-overflow-tooltip="column.showOverflow ? column.showOverflow : true"
+          v-if="!column.isFilters" :label="column.text" :prop="column.value" :width="column.width"
+          :align="column.align" :show-overflow-tooltip="column.showOverflow ? column.showOverflow : true"
           :fixed="column.fixed"
         >
           <template #default="scope">
-            <span v-if="!column.filter && !column.isLink" :style="column.styleFilter ? column.styleFilter(scope.row) : ''">{{ scope.row[column.value] }}</span>
-            <span v-if="column.filter && !column.isLink" :style="column.styleFilter ? column.styleFilter(scope.row) : ''">{{ column.filter(scope.row) }}</span>
+            <span
+              v-if="!column.filter && !column.isLink"
+              :style="column.styleFilter ? column.styleFilter(scope.row) : ''"
+            >{{ scope.row[column.value] }}</span>
+            <span
+              v-if="column.filter && !column.isLink"
+              :style="column.styleFilter ? column.styleFilter(scope.row) : ''"
+            >{{ column.filter(scope.row) }}</span>
             <div v-if="column.isLink">
               <show-photo v-for="(item, index) in scope.row.fileArr" :key="index" :minio-file-name="item" /><br>
             </div>
             <div v-if="column.followLink">
-              <div v-for="(item, index) in scope.row.followLinkArr" :key="index" @click="handleClickFollowLink(scope.row, item)">
+              <div
+                v-for="(item, index) in scope.row.followLinkArr" :key="index"
+                @click="handleClickFollowLink(scope.row, item)"
+              >
                 <span :class="item !== '/' ? 'follow-link' : ''">{{ item }}</span>
               </div>
             </div>
           </template>
         </el-table-column>
         <el-table-column
-          v-if="column.isFilters"
-          :label="column.text"
-          :prop="column.value"
-          :width="column.width"
-          :align="column.align"
-          :show-overflow-tooltip="column.showOverflow ? column.showOverflow : true"
-          :fixed="column.fixed"
-          :column-key="column.value"
-          :filters="column.filters"
-          :filter-multiple="false"
+          v-if="column.isFilters" :label="column.text" :prop="column.value" :width="column.width"
+          :align="column.align" :show-overflow-tooltip="column.showOverflow ? column.showOverflow : true"
+          :fixed="column.fixed" :column-key="column.value" :filters="column.filters" :filter-multiple="false"
         >
           <template #default="scope">
-            <span v-if="!column.filter" :style="column.styleFilter ? column.styleFilter(scope.row) : ''">{{ scope.row[column.value] }}</span>
-            <span v-else :style="column.styleFilter ? column.styleFilter(scope.row) : ''">{{ column.filter(scope.row) }}</span>
+            <span v-if="!column.filter" :style="column.styleFilter ? column.styleFilter(scope.row) : ''">{{
+              scope.row[column.value] }}</span>
+            <span v-else :style="column.styleFilter ? column.styleFilter(scope.row) : ''">{{ column.filter(scope.row)
+            }}</span>
           </template>
         </el-table-column>
       </template>
@@ -290,19 +359,67 @@
     </el-table>
     <div v-if="props.pagination" style="width: 100%;margin-top: 10px;">
       <el-pagination
-        :current-page="props.query.offset"
-        :page-sizes="props.pageSizes as number[]"
-        :page-size="props.query.limit"
-        :total="props.total"
-        layout="total, sizes, prev, pager, next"
-        @size-change="handleSizeChange"
-        @current-change="handleCurrentChange"
+        :current-page="props.query.offset" :page-sizes="props.pageSizes as number[]"
+        :page-size="props.query.limit" :total="props.total" layout="total, sizes, prev, pager, next"
+        @size-change="handleSizeChange" @current-change="handleCurrentChange"
       />
     </div>
+    <!-- 自定义菜单 -->
+    <div id="custom-menu">
+      <p class="menu-item" @click="costomAddRow('current-pre')">
+        当前行前方插入
+      </p>
+      <p class="menu-item" @click="costomAddRow('current-next')">
+        当前行后方插入
+      </p>
+      <p class="menu-item" @click="costomAddRow('list-head')">
+        列表头行插入
+      </p>
+      <p class="menu-item" @click="costomAddRow('list-tail')">
+        列表尾行插入
+      </p>
+      <p v-if="isShowmultiSelect && isMulti" class="menu-item" @click="costomAddRow('select-pre')">
+        选中行前方插入
+      </p>
+      <!--  -->
+      <p v-if="isShowmultiSelect && isMulti" class="menu-item" @click="costomAddRow('select-next')">
+        选中行后方插入
+      </p>
+    </div>
   </div>
 </template>
 
 <style lang="scss" scoped>
+#custom-menu {
+  display: none;
+  position: fixed;
+  background-color: #fff;
+  border-radius: 5px;
+  padding: 5px 0;
+  z-index: 1000;
+  border: 1px solid #c8c9cc;
+  box-shadow: 0 0 12px rgb(0 0 0 / 12%);
+
+  .menu-item {
+    display: flex;
+    align-items: center;
+    white-space: nowrap;
+    list-style: none;
+    line-height: 22px;
+    padding: 5px 16px;
+    margin: 0;
+    // font-size: var(--el-font-size-base);
+    color: #606266;
+    cursor: pointer;
+    outline: none;
+
+    &:hover {
+      background-color: #ecf5ff;
+      color: #409eff;
+    }
+  }
+}
+
 #normal-table-com {
   width: 100%;
 }
diff --git a/src/components/TableContainer/index.vue b/src/components/TableContainer/index.vue
index 0c07be6..87b1567 100644
--- a/src/components/TableContainer/index.vue
+++ b/src/components/TableContainer/index.vue
@@ -71,16 +71,18 @@
   <config-dialog ref="configRef" @confirm="confirmColumns" />
   <div class="table-container">
     <div class="button-area">
-      <div v-if="titleShow" :class="props.isCenter ? 'title-center' : 'title-left'">
-        <el-icon v-if="isConfig" :size="21" class="icon-menu" @click="config">
-          <menu />
-        </el-icon>
-        <span>
-          {{ title }}
-        </span>
-      </div>
-      <div class="button-left">
-        <slot name="btns-left" />
+      <div style="display: flex;align-items: center;">
+        <div v-if="titleShow" :class="props.isCenter ? 'title-center' : 'title-left'">
+          <el-icon v-if="isConfig" :size="21" class="icon-menu" @click="config">
+            <menu />
+          </el-icon>
+          <span>
+            {{ title }}
+          </span>
+        </div>
+        <div class="button-left">
+          <slot name="btns-left" />
+        </div>
       </div>
       <div class="button-right">
         <slot name="btns-right" />
diff --git a/src/components/map/index.vue b/src/components/map/index.vue
index 55e37da..620c813 100644
--- a/src/components/map/index.vue
+++ b/src/components/map/index.vue
@@ -8,7 +8,7 @@
 import { styleType } from 'element-plus/es/components/table-v2/src/common'
 
 const $props = defineProps({
-  // 初始图层 normal satellite
+  // 初始图层 normal satellite dark
   layer: {
     type: String,
     default: 'normal',
@@ -35,8 +35,8 @@
 const layer = ref()
 // 图层标识
 const layerFlag = ref('normal')
-// const publicPath = import.meta.env.BASE_URL
-// console.log(publicPath, 'publicPath')
+const publicPath = import.meta.env.BASE_URL
+console.log(publicPath, 'publicPath')
 // -------------------------------------初始化地图--------------------------------------------------
 const initMap = () => {
   AMapLoader.load({
@@ -61,18 +61,22 @@
         map.value.setFeatures(['bg', 'building'])
         layerFlag.value = 'satellite'
       }
+      else if ($props.layer === 'dark') {
+        // 深色图层
+        map.value.setMapStyle('amap://styles/darkblue')
+      }
       // 地图图块加载完成后触发
       map.value.on('complete', () => {
         //  修改loading状态
         console.log('地图加载完成')
-        $emits('complete')
+        $emits('complete', AMap.value)
         loading.value = false
       })
       // 地图绑定右击事件
       map.value.on('mousedown', clickHandler)
     })
     .catch((e) => {
-      console.log('地图加载失败')
+      console.log(e, '地图加载失败')
     })
 }
 // ------------------------------------------------------------------------------------------------
@@ -156,7 +160,7 @@
 }
 // ------------------------------------------------------------------------------------------------
 
-// -------------------------------------标记本文操作--------------------------------------------------
+// -------------------------------------标记文本操作--------------------------------------------------
 // 标记文本数组
 const textAllList = ref<any>([])
 // 添加标记文字
@@ -282,6 +286,35 @@
   lineAllList.value = []
 }
 // ------------------------------------------------------------------------------------------------
+
+// -----------------------------------海量点标记操作------------------------------------------------
+// 点标记(海量点)数组
+const massMarksAllList = ref<any>([])
+// 添加点标记(海量点)
+const addMassMarks = (data: any) => {
+  /**
+     * data
+     * path: 折线点位数据  [{lnglat: [116.402394,39.937182],name: "南锣鼓巷", style: 1,}, ]
+     * style 样式
+     * zooms: 在指定地图缩放级别范围内展示海量点图层
+     * zIndex: 海量点图层叠加的顺序
+      */
+  var massMarks = new AMap.value.MassMarks(data.path, {
+    zIndex: data.zIndex, // 海量点图层叠加的顺序
+    zooms: data.zooms, // 在指定地图缩放级别范围内展示海量点图层
+    style: data.style, // 设置样式对象
+  })
+  massMarksAllList.value.push(massMarks)
+  massMarks.setMap(map)
+}
+// 移除点标记(海量点)
+const removeMassMarks = () => {
+  massMarksAllList.value.forEach((item: any) => {
+    item.setMap(null)
+  })
+  massMarksAllList.value = []
+}
+// ------------------------------------------------------------------------------------------------
 onMounted(() => {
   loading.value = true
   initMap()
@@ -302,6 +335,8 @@
   removeMarker, // 移除点标记 (一般点标记)
   addPolyline, // 添加折线
   removePolyline, // 移除折线
+  addMassMarks, // 添加点标记(海量点)
+  removeMassMarks, // 移除点标记(海量点)
 })
 </script>
 
diff --git a/src/layouts/components/Header/mobile.vue b/src/layouts/components/Header/mobile.vue
new file mode 100644
index 0000000..a27de4b
--- /dev/null
+++ b/src/layouts/components/Header/mobile.vue
@@ -0,0 +1,53 @@
+<!-- 移动端头部 -->
+<script lang="ts" setup name="HeaderMobile">
+import { ArrowLeftBold, House } from '@element-plus/icons-vue'
+const route = useRoute()
+const router = useRouter()
+const goBack = (type: 'back' | 'home') => {
+  if (type === 'back') {
+    router.go(-1)
+  }
+  else if (type === 'home') {
+    router.push('/')
+  }
+}
+</script>
+
+<template>
+  <div>
+    <div v-if="route.meta.isHeader" class="header-mobile">
+      <div v-if="route.meta.isBack">
+        <el-icon :size="25" @click="goBack('back')">
+          <arrow-left-bold />
+        </el-icon>
+      </div>
+      <div v-else style="width: 25px;" />
+      <div> {{ route.meta.title }}</div>
+      <el-icon v-if="route.meta.isHome" :size="25" @click="goBack('home')">
+        <house />
+      </el-icon>
+      <div v-else style="width: 25px;" />
+    </div>
+    <div v-if="route.meta.isHeader" class="occupying" />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.header-mobile {
+  width: 100%;
+  background-color: #70b4ff;
+  height: 35px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 10px;
+  position: fixed;
+  top: 0;
+}
+
+.occupying {
+  height: 35px;
+  background-color: transparent;
+  width: 100%;
+}
+</style>
diff --git a/src/layouts/mobile.vue b/src/layouts/mobile.vue
new file mode 100644
index 0000000..c6235a4
--- /dev/null
+++ b/src/layouts/mobile.vue
@@ -0,0 +1,47 @@
+<!-- 移动端基础布局组件 -->
+<script lang="ts" setup name="LayoutMobile">
+import headerMobile from './components/Header/mobile.vue'
+import useKeepAliveStore from '@/store/modules/keepAlive'
+const keepAliveStore = useKeepAliveStore()
+const routeInfo = useRoute()
+</script>
+
+<template>
+  <div class="layout">
+    <div id="app-main">
+      <!-- 头部 -->
+      <header-mobile />
+      <div class="wrapper">
+        <div class="main-container">
+          <div class="main">
+            <router-view v-slot="{ Component, route }">
+              <transition name="main" mode appear>
+                <keep-alive :include="keepAliveStore.list">
+                  <component :is="Component" :key="route.fullPath" />
+                </keep-alive>
+              </transition>
+            </router-view>
+          </div>
+          <copyright />
+        </div>
+      </div>
+      <el-backtop :right="20" :bottom="20" title="回到顶部" />
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.main {
+  overflow-x: hidden;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+
+  // firefox隐藏滚动条
+  scrollbar-width: none;
+
+  // chrome隐藏滚动条
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}
+</style>
diff --git a/src/main.ts b/src/main.ts
index 07c50a2..cb80c5d 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -19,35 +19,35 @@
 import { downloadAndInstall } from '@/iconify-ep'
 import { hasPermission } from '@/utils/composables/permission'
 import buttonPerm from '@/utils/buttonPerm'
-// 引入打印插件
 if (useSettingsStore().app.iconifyOfflineUse) {
   downloadAndInstall()
 }
-const app = createApp(App)
-app.config.globalProperties.hasPerm = hasPermission
-app.config.globalProperties.buttonPerm = buttonPerm
-app.config.globalProperties.dayjs = dayjs
-app.use(print)
-app.use(ElementPlus)
-app.use(pinia)
-app.use(router)
-for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
-  app.component(key, component)
-}
-directive(app)
 
 axios.get('./config/config.json', {
   headers: {
     'Cache-Control': 'no-cache',
   },
 }).then((result) => {
+  const app = createApp(App)
   console.log('get config')
+  console.log(window.localStorage.getItem('browser-type-bj-well'), 'mian中获取浏览器类型')
   console.log(result)
   window.localStorage.setItem('url-bj-well', result.data.baseUrl)
   window.localStorage.setItem('securityJsCode', result.data.securityJsCode)
   window.localStorage.setItem('JsKey', result.data.JsKey)
   request.defaults.baseURL = result.data.baseUrl // 设置默认请求网址
   app.config.globalProperties.config = result.data
+  app.config.globalProperties.hasPerm = hasPermission
+  app.config.globalProperties.buttonPerm = buttonPerm
+  app.config.globalProperties.dayjs = dayjs
+  app.use(print)
+  app.use(ElementPlus)
+  app.use(pinia)
+  app.use(router)
+  for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
+    app.component(key, component)
+  }
+  directive(app)
   app.mount('#app')
 }).catch((error) => {
   console.error(`get baseConfig error...${error}`)

diff --git a/src/App.vue b/src/App.vue
index 52ccd6e..a9268fb 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -6,7 +6,7 @@
 import useMenuStore from '@/store/modules/menu'
 
 const settingsStore = useSettingsStore()
-
+const $router = useRouter()
 const buttonConfig = ref({
   autoInsertSpace: true,
 })
@@ -81,14 +81,40 @@
 })
 
 onMounted(() => {
+  // // 浏览器访问当前位置
+  // if ('geolocation' in navigator) {
+  //   navigator.geolocation.getCurrentPosition(function (position) {
+  //     // 允许
+  //     console.log('纬度: ', position.coords.latitude)
+  //     console.log('经度: ', position.coords.longitude)
+  //   }, function (error) {
+  //     // 拒绝
+  //     console.error("Error Code = " + error.code + " - " + error.message);
+  //   })
+  // } else {
+  //   console.error("Geolocation is not supported by this browser.")
+  // }
   settingsStore.setMode(document.documentElement.clientWidth)
   window.onresize = () => {
     settingsStore.setMode(document.documentElement.clientWidth)
+    // 监听浏览器类型变化 刷新浏览器
+    const userAgent = navigator.userAgent || navigator.vendor || window.opera
+    const isMobile = /android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(userAgent)
+    if (`${isMobile ? 'mobile' : 'pc'}` !== window.localStorage.getItem('browser-type-bj-well')) {
+      // if (!window.localStorage.getItem('browser-type-bj-well')) { return }
+      console.log(`浏览器类型发生变化，由${window.localStorage.getItem('browser-type-bj-well')}变为${isMobile ? 'mobile' : 'pc'}`)
+      window.localStorage.setItem('browser-type-bj-well', `${isMobile ? 'mobile' : 'pc'}`)
+      $router.push('/')
+      setTimeout(() => {
+        window.location.reload()
+      }, 1000)
+    }
   }
   hotkeys('alt+i', () => {
     eventBus.emit('global-system-info-toggle')
   })
 })
+const browserType = window.localStorage.getItem('browser-type-bj-well') // mobile || pc
 </script>
 
 <template>
@@ -99,6 +125,6 @@
         '--g-sub-sidebar-actual-width': subSidebarActualWidth,
       }"
     />
-    <system-info />
+    <system-info v-if="browserType !== 'mobile'" />
   </el-config-provider>
 </template>
diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue
index e247e28..de24f71 100644
--- a/src/components/NormalTable/index.vue
+++ b/src/components/NormalTable/index.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup name="NormalTable">
 import type { Ref } from 'vue'
-import { ElTable } from 'element-plus'
+import { ElMessage, ElTable } from 'element-plus'
 import { defineExpose, ref } from 'vue'
 import type { TableColumn } from './table_interface'
 import TableColumnCom from './tableColumn.vue'
@@ -84,7 +84,11 @@
     type: String,
     default: 'default',
   }, // 表格大小，默认，small,mini等，与el-table条件相同
-  // 想要展示成链接的数据
+  // 是否要右击菜单
+  needContextmenu: {
+    type: Boolean,
+    default: false,
+  },
 })
 const emit = defineEmits(['change', 'selectionChange', 'rowClick', 'rowDbClick', 'multiSelect', 'filterChange', 'rowDisabled', 'handleClickFollowLink'])
 // -------定义数据--------------
@@ -148,8 +152,10 @@
 //   changeColumns()
 // })
 // 多选
+const multiSelectData = ref([])
 const handleSelectionChange = (val: any) => {
   // console.log(val)
+  multiSelectData.value = val
   emit('multiSelect', val)
 }
 // 单选选中
@@ -214,27 +220,87 @@
 const handleClickFollowLink = (row: any, title: string) => {
   emit('handleClickFollowLink', row, title)
 }
+
+// 右击当前行操作
+const clickIndex = ref(-1)
+const contextmenu = (row: any, column: any, event: Event, index: number) => {
+  if (!props.needContextmenu) { return }
+  // 阻止默认的右键菜单
+  event.preventDefault()
+  clickIndex.value = props.data.findIndex(item => item === row)
+  console.log('右击', clickIndex.value)
+  // 获取自定义菜单元素
+  var menu = document.getElementById('custom-menu')
+  // 设置自定义菜单的位置并显示
+  let positionX = event.pageX
+  let positionY = event.pageY
+  if (document.documentElement.clientHeight - event.pageY < 204) {
+    positionY = document.documentElement.clientHeight - 204 + 102
+  }
+  if (document.documentElement.clientWidth - event.pageX < 146) {
+    positionX = document.documentElement.clientWidth - 146
+  }
+  menu.style.top = `${positionY - 102}px`
+  menu.style.left = `${positionX}px`
+  menu.style.display = 'block'
+}
+// 点击其他位置隐藏自定义菜单
+document.addEventListener('click', () => {
+  document.getElementById('custom-menu').style.display = 'none'
+})
+// 添加行
+const costomAddRow = (type: string) => {
+  if (type === 'current-pre') {
+    // 当前行前方插入
+    props.data.splice(clickIndex.value, 0, JSON.parse(JSON.stringify(props.data[clickIndex.value])))
+  }
+  else if (type === 'current-next') {
+    // 当前行后方方插入
+    props.data.splice(clickIndex.value + 1, 0, JSON.parse(JSON.stringify(props.data[clickIndex.value])))
+  }
+  else if (type === 'list-head') {
+    // 列表头行插入
+    props.data.splice(0, 0, JSON.parse(JSON.stringify(props.data[clickIndex.value])))
+  }
+  else if (type === 'list-tail') {
+    // 列表尾行插入
+    props.data.splice(props.data.length, 0, JSON.parse(JSON.stringify(props.data[clickIndex.value])))
+  }
+  else if (type === 'select-pre') {
+    // 选中行前方插入
+    if (!multiSelectData.value.length) {
+      ElMessage.warning('未选择数据')
+      return
+    }
+    multiSelectData.value.forEach((item, index) => {
+      const dataIndex = props.data.findIndex(citem => item === citem)
+      props.data.splice(dataIndex, 0, JSON.parse(JSON.stringify(item)))
+    })
+    table.value!.clearSelection()
+  }
+  else if (type === 'select-next') {
+    // 选中行后方插入
+    if (!multiSelectData.value.length) {
+      ElMessage.warning('未选择数据')
+      return
+    }
+    multiSelectData.value.forEach((item, index) => {
+      const dataIndex = props.data.findIndex(citem => item === citem)
+      props.data.splice(dataIndex + 1, 0, JSON.parse(JSON.stringify(item)))
+    })
+    table.value!.clearSelection()
+  }
+  clickIndex.value = -1
+}
 </script>
 
 <template>
   <div id="normal-table-com">
     <el-table
-      id="print"
-      ref="table"
-      v-loading="listLoading"
-      :data="data"
-      :height="height"
-      border
-      stripe
-      :size="size"
-      style="width: 100%;"
-      :row-key="(row) => { return row.id || row.index }"
-      :span-method="mergeTableRow"
-      @selection-change="handleSelectionChange"
-      @select="selectClick"
-      @row-click="rowClick"
-      @row-dblclick="rowDbClick"
-      @filter-change="filterChange"
+      id="print" ref="table" v-loading="listLoading" :data="data" :height="height" border stripe :size="size"
+      style="width: 100%;" :row-key="(row) => { return row.id || row.index }" :span-method="mergeTableRow"
+      @selection-change="handleSelectionChange" @select="selectClick" @row-click="rowClick" @row-dblclick="rowDbClick"
+      @filter-change="filterChange" @row-contextmenu="contextmenu"
     >
       <slot name="preColumns" />
 
@@ -243,45 +309,48 @@
           <el-radio v-model="singleChecked" :label="scope.row.id" class="radio" @change="radioChange" />
         </template>
       </el-table-column>
-      <el-table-column v-if="isShowmultiSelect && isMulti" :reserve-selection="true" type="selection" width="38" :selectable="selectable" fixed="left" />
+      <el-table-column
+        v-if="isShowmultiSelect && isMulti" :reserve-selection="true" type="selection" width="38"
+        :selectable="selectable" fixed="left"
+      />
       <template v-for="column of columns" :key="column.value">
         <el-table-column
-          v-if="!column.isFilters"
-          :label="column.text"
-          :prop="column.value"
-          :width="column.width"
-          :align="column.align"
-          :show-overflow-tooltip="column.showOverflow ? column.showOverflow : true"
+          v-if="!column.isFilters" :label="column.text" :prop="column.value" :width="column.width"
+          :align="column.align" :show-overflow-tooltip="column.showOverflow ? column.showOverflow : true"
           :fixed="column.fixed"
         >
           <template #default="scope">
-            <span v-if="!column.filter && !column.isLink" :style="column.styleFilter ? column.styleFilter(scope.row) : ''">{{ scope.row[column.value] }}</span>
-            <span v-if="column.filter && !column.isLink" :style="column.styleFilter ? column.styleFilter(scope.row) : ''">{{ column.filter(scope.row) }}</span>
+            <span
+              v-if="!column.filter && !column.isLink"
+              :style="column.styleFilter ? column.styleFilter(scope.row) : ''"
+            >{{ scope.row[column.value] }}</span>
+            <span
+              v-if="column.filter && !column.isLink"
+              :style="column.styleFilter ? column.styleFilter(scope.row) : ''"
+            >{{ column.filter(scope.row) }}</span>
             <div v-if="column.isLink">
               <show-photo v-for="(item, index) in scope.row.fileArr" :key="index" :minio-file-name="item" /><br>
             </div>
             <div v-if="column.followLink">
-              <div v-for="(item, index) in scope.row.followLinkArr" :key="index" @click="handleClickFollowLink(scope.row, item)">
+              <div
+                v-for="(item, index) in scope.row.followLinkArr" :key="index"
+                @click="handleClickFollowLink(scope.row, item)"
+              >
                 <span :class="item !== '/' ? 'follow-link' : ''">{{ item }}</span>
               </div>
             </div>
           </template>
         </el-table-column>
         <el-table-column
-          v-if="column.isFilters"
-          :label="column.text"
-          :prop="column.value"
-          :width="column.width"
-          :align="column.align"
-          :show-overflow-tooltip="column.showOverflow ? column.showOverflow : true"
-          :fixed="column.fixed"
-          :column-key="column.value"
-          :filters="column.filters"
-          :filter-multiple="false"
+          v-if="column.isFilters" :label="column.text" :prop="column.value" :width="column.width"
+          :align="column.align" :show-overflow-tooltip="column.showOverflow ? column.showOverflow : true"
+          :fixed="column.fixed" :column-key="column.value" :filters="column.filters" :filter-multiple="false"
         >
           <template #default="scope">
-            <span v-if="!column.filter" :style="column.styleFilter ? column.styleFilter(scope.row) : ''">{{ scope.row[column.value] }}</span>
-            <span v-else :style="column.styleFilter ? column.styleFilter(scope.row) : ''">{{ column.filter(scope.row) }}</span>
+            <span v-if="!column.filter" :style="column.styleFilter ? column.styleFilter(scope.row) : ''">{{
+              scope.row[column.value] }}</span>
+            <span v-else :style="column.styleFilter ? column.styleFilter(scope.row) : ''">{{ column.filter(scope.row)
+            }}</span>
           </template>
         </el-table-column>
       </template>
@@ -290,19 +359,67 @@
     </el-table>
     <div v-if="props.pagination" style="width: 100%;margin-top: 10px;">
       <el-pagination
-        :current-page="props.query.offset"
-        :page-sizes="props.pageSizes as number[]"
-        :page-size="props.query.limit"
-        :total="props.total"
-        layout="total, sizes, prev, pager, next"
-        @size-change="handleSizeChange"
-        @current-change="handleCurrentChange"
+        :current-page="props.query.offset" :page-sizes="props.pageSizes as number[]"
+        :page-size="props.query.limit" :total="props.total" layout="total, sizes, prev, pager, next"
+        @size-change="handleSizeChange" @current-change="handleCurrentChange"
       />
     </div>
+    <!-- 自定义菜单 -->
+    <div id="custom-menu">
+      <p class="menu-item" @click="costomAddRow('current-pre')">
+        当前行前方插入
+      </p>
+      <p class="menu-item" @click="costomAddRow('current-next')">
+        当前行后方插入
+      </p>
+      <p class="menu-item" @click="costomAddRow('list-head')">
+        列表头行插入
+      </p>
+      <p class="menu-item" @click="costomAddRow('list-tail')">
+        列表尾行插入
+      </p>
+      <p v-if="isShowmultiSelect && isMulti" class="menu-item" @click="costomAddRow('select-pre')">
+        选中行前方插入
+      </p>
+      <!--  -->
+      <p v-if="isShowmultiSelect && isMulti" class="menu-item" @click="costomAddRow('select-next')">
+        选中行后方插入
+      </p>
+    </div>
   </div>
 </template>
 
 <style lang="scss" scoped>
+#custom-menu {
+  display: none;
+  position: fixed;
+  background-color: #fff;
+  border-radius: 5px;
+  padding: 5px 0;
+  z-index: 1000;
+  border: 1px solid #c8c9cc;
+  box-shadow: 0 0 12px rgb(0 0 0 / 12%);
+
+  .menu-item {
+    display: flex;
+    align-items: center;
+    white-space: nowrap;
+    list-style: none;
+    line-height: 22px;
+    padding: 5px 16px;
+    margin: 0;
+    // font-size: var(--el-font-size-base);
+    color: #606266;
+    cursor: pointer;
+    outline: none;
+
+    &:hover {
+      background-color: #ecf5ff;
+      color: #409eff;
+    }
+  }
+}
+
 #normal-table-com {
   width: 100%;
 }
diff --git a/src/components/TableContainer/index.vue b/src/components/TableContainer/index.vue
index 0c07be6..87b1567 100644
--- a/src/components/TableContainer/index.vue
+++ b/src/components/TableContainer/index.vue
@@ -71,16 +71,18 @@
   <config-dialog ref="configRef" @confirm="confirmColumns" />
   <div class="table-container">
     <div class="button-area">
-      <div v-if="titleShow" :class="props.isCenter ? 'title-center' : 'title-left'">
-        <el-icon v-if="isConfig" :size="21" class="icon-menu" @click="config">
-          <menu />
-        </el-icon>
-        <span>
-          {{ title }}
-        </span>
-      </div>
-      <div class="button-left">
-        <slot name="btns-left" />
+      <div style="display: flex;align-items: center;">
+        <div v-if="titleShow" :class="props.isCenter ? 'title-center' : 'title-left'">
+          <el-icon v-if="isConfig" :size="21" class="icon-menu" @click="config">
+            <menu />
+          </el-icon>
+          <span>
+            {{ title }}
+          </span>
+        </div>
+        <div class="button-left">
+          <slot name="btns-left" />
+        </div>
       </div>
       <div class="button-right">
         <slot name="btns-right" />
diff --git a/src/components/map/index.vue b/src/components/map/index.vue
index 55e37da..620c813 100644
--- a/src/components/map/index.vue
+++ b/src/components/map/index.vue
@@ -8,7 +8,7 @@
 import { styleType } from 'element-plus/es/components/table-v2/src/common'
 
 const $props = defineProps({
-  // 初始图层 normal satellite
+  // 初始图层 normal satellite dark
   layer: {
     type: String,
     default: 'normal',
@@ -35,8 +35,8 @@
 const layer = ref()
 // 图层标识
 const layerFlag = ref('normal')
-// const publicPath = import.meta.env.BASE_URL
-// console.log(publicPath, 'publicPath')
+const publicPath = import.meta.env.BASE_URL
+console.log(publicPath, 'publicPath')
 // -------------------------------------初始化地图--------------------------------------------------
 const initMap = () => {
   AMapLoader.load({
@@ -61,18 +61,22 @@
         map.value.setFeatures(['bg', 'building'])
         layerFlag.value = 'satellite'
       }
+      else if ($props.layer === 'dark') {
+        // 深色图层
+        map.value.setMapStyle('amap://styles/darkblue')
+      }
       // 地图图块加载完成后触发
       map.value.on('complete', () => {
         //  修改loading状态
         console.log('地图加载完成')
-        $emits('complete')
+        $emits('complete', AMap.value)
         loading.value = false
       })
       // 地图绑定右击事件
       map.value.on('mousedown', clickHandler)
     })
     .catch((e) => {
-      console.log('地图加载失败')
+      console.log(e, '地图加载失败')
     })
 }
 // ------------------------------------------------------------------------------------------------
@@ -156,7 +160,7 @@
 }
 // ------------------------------------------------------------------------------------------------
 
-// -------------------------------------标记本文操作--------------------------------------------------
+// -------------------------------------标记文本操作--------------------------------------------------
 // 标记文本数组
 const textAllList = ref<any>([])
 // 添加标记文字
@@ -282,6 +286,35 @@
   lineAllList.value = []
 }
 // ------------------------------------------------------------------------------------------------
+
+// -----------------------------------海量点标记操作------------------------------------------------
+// 点标记(海量点)数组
+const massMarksAllList = ref<any>([])
+// 添加点标记(海量点)
+const addMassMarks = (data: any) => {
+  /**
+     * data
+     * path: 折线点位数据  [{lnglat: [116.402394,39.937182],name: "南锣鼓巷", style: 1,}, ]
+     * style 样式
+     * zooms: 在指定地图缩放级别范围内展示海量点图层
+     * zIndex: 海量点图层叠加的顺序
+      */
+  var massMarks = new AMap.value.MassMarks(data.path, {
+    zIndex: data.zIndex, // 海量点图层叠加的顺序
+    zooms: data.zooms, // 在指定地图缩放级别范围内展示海量点图层
+    style: data.style, // 设置样式对象
+  })
+  massMarksAllList.value.push(massMarks)
+  massMarks.setMap(map)
+}
+// 移除点标记(海量点)
+const removeMassMarks = () => {
+  massMarksAllList.value.forEach((item: any) => {
+    item.setMap(null)
+  })
+  massMarksAllList.value = []
+}
+// ------------------------------------------------------------------------------------------------
 onMounted(() => {
   loading.value = true
   initMap()
@@ -302,6 +335,8 @@
   removeMarker, // 移除点标记 (一般点标记)
   addPolyline, // 添加折线
   removePolyline, // 移除折线
+  addMassMarks, // 添加点标记(海量点)
+  removeMassMarks, // 移除点标记(海量点)
 })
 </script>
 
diff --git a/src/layouts/components/Header/mobile.vue b/src/layouts/components/Header/mobile.vue
new file mode 100644
index 0000000..a27de4b
--- /dev/null
+++ b/src/layouts/components/Header/mobile.vue
@@ -0,0 +1,53 @@
+<!-- 移动端头部 -->
+<script lang="ts" setup name="HeaderMobile">
+import { ArrowLeftBold, House } from '@element-plus/icons-vue'
+const route = useRoute()
+const router = useRouter()
+const goBack = (type: 'back' | 'home') => {
+  if (type === 'back') {
+    router.go(-1)
+  }
+  else if (type === 'home') {
+    router.push('/')
+  }
+}
+</script>
+
+<template>
+  <div>
+    <div v-if="route.meta.isHeader" class="header-mobile">
+      <div v-if="route.meta.isBack">
+        <el-icon :size="25" @click="goBack('back')">
+          <arrow-left-bold />
+        </el-icon>
+      </div>
+      <div v-else style="width: 25px;" />
+      <div> {{ route.meta.title }}</div>
+      <el-icon v-if="route.meta.isHome" :size="25" @click="goBack('home')">
+        <house />
+      </el-icon>
+      <div v-else style="width: 25px;" />
+    </div>
+    <div v-if="route.meta.isHeader" class="occupying" />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.header-mobile {
+  width: 100%;
+  background-color: #70b4ff;
+  height: 35px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 10px;
+  position: fixed;
+  top: 0;
+}
+
+.occupying {
+  height: 35px;
+  background-color: transparent;
+  width: 100%;
+}
+</style>
diff --git a/src/layouts/mobile.vue b/src/layouts/mobile.vue
new file mode 100644
index 0000000..c6235a4
--- /dev/null
+++ b/src/layouts/mobile.vue
@@ -0,0 +1,47 @@
+<!-- 移动端基础布局组件 -->
+<script lang="ts" setup name="LayoutMobile">
+import headerMobile from './components/Header/mobile.vue'
+import useKeepAliveStore from '@/store/modules/keepAlive'
+const keepAliveStore = useKeepAliveStore()
+const routeInfo = useRoute()
+</script>
+
+<template>
+  <div class="layout">
+    <div id="app-main">
+      <!-- 头部 -->
+      <header-mobile />
+      <div class="wrapper">
+        <div class="main-container">
+          <div class="main">
+            <router-view v-slot="{ Component, route }">
+              <transition name="main" mode appear>
+                <keep-alive :include="keepAliveStore.list">
+                  <component :is="Component" :key="route.fullPath" />
+                </keep-alive>
+              </transition>
+            </router-view>
+          </div>
+          <copyright />
+        </div>
+      </div>
+      <el-backtop :right="20" :bottom="20" title="回到顶部" />
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.main {
+  overflow-x: hidden;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+
+  // firefox隐藏滚动条
+  scrollbar-width: none;
+
+  // chrome隐藏滚动条
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}
+</style>
diff --git a/src/main.ts b/src/main.ts
index 07c50a2..cb80c5d 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -19,35 +19,35 @@
 import { downloadAndInstall } from '@/iconify-ep'
 import { hasPermission } from '@/utils/composables/permission'
 import buttonPerm from '@/utils/buttonPerm'
-// 引入打印插件
 if (useSettingsStore().app.iconifyOfflineUse) {
   downloadAndInstall()
 }
-const app = createApp(App)
-app.config.globalProperties.hasPerm = hasPermission
-app.config.globalProperties.buttonPerm = buttonPerm
-app.config.globalProperties.dayjs = dayjs
-app.use(print)
-app.use(ElementPlus)
-app.use(pinia)
-app.use(router)
-for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
-  app.component(key, component)
-}
-directive(app)
 
 axios.get('./config/config.json', {
   headers: {
     'Cache-Control': 'no-cache',
   },
 }).then((result) => {
+  const app = createApp(App)
   console.log('get config')
+  console.log(window.localStorage.getItem('browser-type-bj-well'), 'mian中获取浏览器类型')
   console.log(result)
   window.localStorage.setItem('url-bj-well', result.data.baseUrl)
   window.localStorage.setItem('securityJsCode', result.data.securityJsCode)
   window.localStorage.setItem('JsKey', result.data.JsKey)
   request.defaults.baseURL = result.data.baseUrl // 设置默认请求网址
   app.config.globalProperties.config = result.data
+  app.config.globalProperties.hasPerm = hasPermission
+  app.config.globalProperties.buttonPerm = buttonPerm
+  app.config.globalProperties.dayjs = dayjs
+  app.use(print)
+  app.use(ElementPlus)
+  app.use(pinia)
+  app.use(router)
+  for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
+    app.component(key, component)
+  }
+  directive(app)
   app.mount('#app')
 }).catch((error) => {
   console.error(`get baseConfig error...${error}`)
diff --git a/src/router/modules/mobile.ts b/src/router/modules/mobile.ts
new file mode 100644
index 0000000..77618c1
--- /dev/null
+++ b/src/router/modules/mobile.ts
@@ -0,0 +1,31 @@
+// 移动端路由
+import type { Route } from '@/global'
+
+const Layout = () => import('@/layouts/mobile.vue')
+
+const routes: Route.recordRaw[] = [
+  {
+    path: '/home',
+    component: Layout,
+    redirect: '/home/index',
+    name: 'Home',
+    meta: {
+      title: '首页',
+    },
+    children: [
+      {
+        path: 'index',
+        component: () => import('@/views/mobile/example1/index.vue'),
+        name: 'HomeIndex',
+        meta: {
+          title: '首页',
+          isHeader: true, // 是否需要头部
+          isBack: true, // 是否需要返回按钮
+          isHome: false, // 是否需要回到首页按钮
+        },
+      },
+    ],
+  },
+]
+
+export default routes

diff --git a/src/App.vue b/src/App.vue
index 52ccd6e..a9268fb 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -6,7 +6,7 @@
 import useMenuStore from '@/store/modules/menu'
 
 const settingsStore = useSettingsStore()
-
+const $router = useRouter()
 const buttonConfig = ref({
   autoInsertSpace: true,
 })
@@ -81,14 +81,40 @@
 })
 
 onMounted(() => {
+  // // 浏览器访问当前位置
+  // if ('geolocation' in navigator) {
+  //   navigator.geolocation.getCurrentPosition(function (position) {
+  //     // 允许
+  //     console.log('纬度: ', position.coords.latitude)
+  //     console.log('经度: ', position.coords.longitude)
+  //   }, function (error) {
+  //     // 拒绝
+  //     console.error("Error Code = " + error.code + " - " + error.message);
+  //   })
+  // } else {
+  //   console.error("Geolocation is not supported by this browser.")
+  // }
   settingsStore.setMode(document.documentElement.clientWidth)
   window.onresize = () => {
     settingsStore.setMode(document.documentElement.clientWidth)
+    // 监听浏览器类型变化 刷新浏览器
+    const userAgent = navigator.userAgent || navigator.vendor || window.opera
+    const isMobile = /android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(userAgent)
+    if (`${isMobile ? 'mobile' : 'pc'}` !== window.localStorage.getItem('browser-type-bj-well')) {
+      // if (!window.localStorage.getItem('browser-type-bj-well')) { return }
+      console.log(`浏览器类型发生变化，由${window.localStorage.getItem('browser-type-bj-well')}变为${isMobile ? 'mobile' : 'pc'}`)
+      window.localStorage.setItem('browser-type-bj-well', `${isMobile ? 'mobile' : 'pc'}`)
+      $router.push('/')
+      setTimeout(() => {
+        window.location.reload()
+      }, 1000)
+    }
   }
   hotkeys('alt+i', () => {
     eventBus.emit('global-system-info-toggle')
   })
 })
+const browserType = window.localStorage.getItem('browser-type-bj-well') // mobile || pc
 </script>
 
 <template>
@@ -99,6 +125,6 @@
         '--g-sub-sidebar-actual-width': subSidebarActualWidth,
       }"
     />
-    <system-info />
+    <system-info v-if="browserType !== 'mobile'" />
   </el-config-provider>
 </template>
diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue
index e247e28..de24f71 100644
--- a/src/components/NormalTable/index.vue
+++ b/src/components/NormalTable/index.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup name="NormalTable">
 import type { Ref } from 'vue'
-import { ElTable } from 'element-plus'
+import { ElMessage, ElTable } from 'element-plus'
 import { defineExpose, ref } from 'vue'
 import type { TableColumn } from './table_interface'
 import TableColumnCom from './tableColumn.vue'
@@ -84,7 +84,11 @@
     type: String,
     default: 'default',
   }, // 表格大小，默认，small,mini等，与el-table条件相同
-  // 想要展示成链接的数据
+  // 是否要右击菜单
+  needContextmenu: {
+    type: Boolean,
+    default: false,
+  },
 })
 const emit = defineEmits(['change', 'selectionChange', 'rowClick', 'rowDbClick', 'multiSelect', 'filterChange', 'rowDisabled', 'handleClickFollowLink'])
 // -------定义数据--------------
@@ -148,8 +152,10 @@
 //   changeColumns()
 // })
 // 多选
+const multiSelectData = ref([])
 const handleSelectionChange = (val: any) => {
   // console.log(val)
+  multiSelectData.value = val
   emit('multiSelect', val)
 }
 // 单选选中
@@ -214,27 +220,87 @@
 const handleClickFollowLink = (row: any, title: string) => {
   emit('handleClickFollowLink', row, title)
 }
+
+// 右击当前行操作
+const clickIndex = ref(-1)
+const contextmenu = (row: any, column: any, event: Event, index: number) => {
+  if (!props.needContextmenu) { return }
+  // 阻止默认的右键菜单
+  event.preventDefault()
+  clickIndex.value = props.data.findIndex(item => item === row)
+  console.log('右击', clickIndex.value)
+  // 获取自定义菜单元素
+  var menu = document.getElementById('custom-menu')
+  // 设置自定义菜单的位置并显示
+  let positionX = event.pageX
+  let positionY = event.pageY
+  if (document.documentElement.clientHeight - event.pageY < 204) {
+    positionY = document.documentElement.clientHeight - 204 + 102
+  }
+  if (document.documentElement.clientWidth - event.pageX < 146) {
+    positionX = document.documentElement.clientWidth - 146
+  }
+  menu.style.top = `${positionY - 102}px`
+  menu.style.left = `${positionX}px`
+  menu.style.display = 'block'
+}
+// 点击其他位置隐藏自定义菜单
+document.addEventListener('click', () => {
+  document.getElementById('custom-menu').style.display = 'none'
+})
+// 添加行
+const costomAddRow = (type: string) => {
+  if (type === 'current-pre') {
+    // 当前行前方插入
+    props.data.splice(clickIndex.value, 0, JSON.parse(JSON.stringify(props.data[clickIndex.value])))
+  }
+  else if (type === 'current-next') {
+    // 当前行后方方插入
+    props.data.splice(clickIndex.value + 1, 0, JSON.parse(JSON.stringify(props.data[clickIndex.value])))
+  }
+  else if (type === 'list-head') {
+    // 列表头行插入
+    props.data.splice(0, 0, JSON.parse(JSON.stringify(props.data[clickIndex.value])))
+  }
+  else if (type === 'list-tail') {
+    // 列表尾行插入
+    props.data.splice(props.data.length, 0, JSON.parse(JSON.stringify(props.data[clickIndex.value])))
+  }
+  else if (type === 'select-pre') {
+    // 选中行前方插入
+    if (!multiSelectData.value.length) {
+      ElMessage.warning('未选择数据')
+      return
+    }
+    multiSelectData.value.forEach((item, index) => {
+      const dataIndex = props.data.findIndex(citem => item === citem)
+      props.data.splice(dataIndex, 0, JSON.parse(JSON.stringify(item)))
+    })
+    table.value!.clearSelection()
+  }
+  else if (type === 'select-next') {
+    // 选中行后方插入
+    if (!multiSelectData.value.length) {
+      ElMessage.warning('未选择数据')
+      return
+    }
+    multiSelectData.value.forEach((item, index) => {
+      const dataIndex = props.data.findIndex(citem => item === citem)
+      props.data.splice(dataIndex + 1, 0, JSON.parse(JSON.stringify(item)))
+    })
+    table.value!.clearSelection()
+  }
+  clickIndex.value = -1
+}
 </script>
 
 <template>
   <div id="normal-table-com">
     <el-table
-      id="print"
-      ref="table"
-      v-loading="listLoading"
-      :data="data"
-      :height="height"
-      border
-      stripe
-      :size="size"
-      style="width: 100%;"
-      :row-key="(row) => { return row.id || row.index }"
-      :span-method="mergeTableRow"
-      @selection-change="handleSelectionChange"
-      @select="selectClick"
-      @row-click="rowClick"
-      @row-dblclick="rowDbClick"
-      @filter-change="filterChange"
+      id="print" ref="table" v-loading="listLoading" :data="data" :height="height" border stripe :size="size"
+      style="width: 100%;" :row-key="(row) => { return row.id || row.index }" :span-method="mergeTableRow"
+      @selection-change="handleSelectionChange" @select="selectClick" @row-click="rowClick" @row-dblclick="rowDbClick"
+      @filter-change="filterChange" @row-contextmenu="contextmenu"
     >
       <slot name="preColumns" />
 
@@ -243,45 +309,48 @@
           <el-radio v-model="singleChecked" :label="scope.row.id" class="radio" @change="radioChange" />
         </template>
       </el-table-column>
-      <el-table-column v-if="isShowmultiSelect && isMulti" :reserve-selection="true" type="selection" width="38" :selectable="selectable" fixed="left" />
+      <el-table-column
+        v-if="isShowmultiSelect && isMulti" :reserve-selection="true" type="selection" width="38"
+        :selectable="selectable" fixed="left"
+      />
       <template v-for="column of columns" :key="column.value">
         <el-table-column
-          v-if="!column.isFilters"
-          :label="column.text"
-          :prop="column.value"
-          :width="column.width"
-          :align="column.align"
-          :show-overflow-tooltip="column.showOverflow ? column.showOverflow : true"
+          v-if="!column.isFilters" :label="column.text" :prop="column.value" :width="column.width"
+          :align="column.align" :show-overflow-tooltip="column.showOverflow ? column.showOverflow : true"
           :fixed="column.fixed"
         >
           <template #default="scope">
-            <span v-if="!column.filter && !column.isLink" :style="column.styleFilter ? column.styleFilter(scope.row) : ''">{{ scope.row[column.value] }}</span>
-            <span v-if="column.filter && !column.isLink" :style="column.styleFilter ? column.styleFilter(scope.row) : ''">{{ column.filter(scope.row) }}</span>
+            <span
+              v-if="!column.filter && !column.isLink"
+              :style="column.styleFilter ? column.styleFilter(scope.row) : ''"
+            >{{ scope.row[column.value] }}</span>
+            <span
+              v-if="column.filter && !column.isLink"
+              :style="column.styleFilter ? column.styleFilter(scope.row) : ''"
+            >{{ column.filter(scope.row) }}</span>
             <div v-if="column.isLink">
               <show-photo v-for="(item, index) in scope.row.fileArr" :key="index" :minio-file-name="item" /><br>
             </div>
             <div v-if="column.followLink">
-              <div v-for="(item, index) in scope.row.followLinkArr" :key="index" @click="handleClickFollowLink(scope.row, item)">
+              <div
+                v-for="(item, index) in scope.row.followLinkArr" :key="index"
+                @click="handleClickFollowLink(scope.row, item)"
+              >
                 <span :class="item !== '/' ? 'follow-link' : ''">{{ item }}</span>
               </div>
             </div>
           </template>
         </el-table-column>
         <el-table-column
-          v-if="column.isFilters"
-          :label="column.text"
-          :prop="column.value"
-          :width="column.width"
-          :align="column.align"
-          :show-overflow-tooltip="column.showOverflow ? column.showOverflow : true"
-          :fixed="column.fixed"
-          :column-key="column.value"
-          :filters="column.filters"
-          :filter-multiple="false"
+          v-if="column.isFilters" :label="column.text" :prop="column.value" :width="column.width"
+          :align="column.align" :show-overflow-tooltip="column.showOverflow ? column.showOverflow : true"
+          :fixed="column.fixed" :column-key="column.value" :filters="column.filters" :filter-multiple="false"
         >
           <template #default="scope">
-            <span v-if="!column.filter" :style="column.styleFilter ? column.styleFilter(scope.row) : ''">{{ scope.row[column.value] }}</span>
-            <span v-else :style="column.styleFilter ? column.styleFilter(scope.row) : ''">{{ column.filter(scope.row) }}</span>
+            <span v-if="!column.filter" :style="column.styleFilter ? column.styleFilter(scope.row) : ''">{{
+              scope.row[column.value] }}</span>
+            <span v-else :style="column.styleFilter ? column.styleFilter(scope.row) : ''">{{ column.filter(scope.row)
+            }}</span>
           </template>
         </el-table-column>
       </template>
@@ -290,19 +359,67 @@
     </el-table>
     <div v-if="props.pagination" style="width: 100%;margin-top: 10px;">
       <el-pagination
-        :current-page="props.query.offset"
-        :page-sizes="props.pageSizes as number[]"
-        :page-size="props.query.limit"
-        :total="props.total"
-        layout="total, sizes, prev, pager, next"
-        @size-change="handleSizeChange"
-        @current-change="handleCurrentChange"
+        :current-page="props.query.offset" :page-sizes="props.pageSizes as number[]"
+        :page-size="props.query.limit" :total="props.total" layout="total, sizes, prev, pager, next"
+        @size-change="handleSizeChange" @current-change="handleCurrentChange"
       />
     </div>
+    <!-- 自定义菜单 -->
+    <div id="custom-menu">
+      <p class="menu-item" @click="costomAddRow('current-pre')">
+        当前行前方插入
+      </p>
+      <p class="menu-item" @click="costomAddRow('current-next')">
+        当前行后方插入
+      </p>
+      <p class="menu-item" @click="costomAddRow('list-head')">
+        列表头行插入
+      </p>
+      <p class="menu-item" @click="costomAddRow('list-tail')">
+        列表尾行插入
+      </p>
+      <p v-if="isShowmultiSelect && isMulti" class="menu-item" @click="costomAddRow('select-pre')">
+        选中行前方插入
+      </p>
+      <!--  -->
+      <p v-if="isShowmultiSelect && isMulti" class="menu-item" @click="costomAddRow('select-next')">
+        选中行后方插入
+      </p>
+    </div>
   </div>
 </template>
 
 <style lang="scss" scoped>
+#custom-menu {
+  display: none;
+  position: fixed;
+  background-color: #fff;
+  border-radius: 5px;
+  padding: 5px 0;
+  z-index: 1000;
+  border: 1px solid #c8c9cc;
+  box-shadow: 0 0 12px rgb(0 0 0 / 12%);
+
+  .menu-item {
+    display: flex;
+    align-items: center;
+    white-space: nowrap;
+    list-style: none;
+    line-height: 22px;
+    padding: 5px 16px;
+    margin: 0;
+    // font-size: var(--el-font-size-base);
+    color: #606266;
+    cursor: pointer;
+    outline: none;
+
+    &:hover {
+      background-color: #ecf5ff;
+      color: #409eff;
+    }
+  }
+}
+
 #normal-table-com {
   width: 100%;
 }
diff --git a/src/components/TableContainer/index.vue b/src/components/TableContainer/index.vue
index 0c07be6..87b1567 100644
--- a/src/components/TableContainer/index.vue
+++ b/src/components/TableContainer/index.vue
@@ -71,16 +71,18 @@
   <config-dialog ref="configRef" @confirm="confirmColumns" />
   <div class="table-container">
     <div class="button-area">
-      <div v-if="titleShow" :class="props.isCenter ? 'title-center' : 'title-left'">
-        <el-icon v-if="isConfig" :size="21" class="icon-menu" @click="config">
-          <menu />
-        </el-icon>
-        <span>
-          {{ title }}
-        </span>
-      </div>
-      <div class="button-left">
-        <slot name="btns-left" />
+      <div style="display: flex;align-items: center;">
+        <div v-if="titleShow" :class="props.isCenter ? 'title-center' : 'title-left'">
+          <el-icon v-if="isConfig" :size="21" class="icon-menu" @click="config">
+            <menu />
+          </el-icon>
+          <span>
+            {{ title }}
+          </span>
+        </div>
+        <div class="button-left">
+          <slot name="btns-left" />
+        </div>
       </div>
       <div class="button-right">
         <slot name="btns-right" />
diff --git a/src/components/map/index.vue b/src/components/map/index.vue
index 55e37da..620c813 100644
--- a/src/components/map/index.vue
+++ b/src/components/map/index.vue
@@ -8,7 +8,7 @@
 import { styleType } from 'element-plus/es/components/table-v2/src/common'
 
 const $props = defineProps({
-  // 初始图层 normal satellite
+  // 初始图层 normal satellite dark
   layer: {
     type: String,
     default: 'normal',
@@ -35,8 +35,8 @@
 const layer = ref()
 // 图层标识
 const layerFlag = ref('normal')
-// const publicPath = import.meta.env.BASE_URL
-// console.log(publicPath, 'publicPath')
+const publicPath = import.meta.env.BASE_URL
+console.log(publicPath, 'publicPath')
 // -------------------------------------初始化地图--------------------------------------------------
 const initMap = () => {
   AMapLoader.load({
@@ -61,18 +61,22 @@
         map.value.setFeatures(['bg', 'building'])
         layerFlag.value = 'satellite'
       }
+      else if ($props.layer === 'dark') {
+        // 深色图层
+        map.value.setMapStyle('amap://styles/darkblue')
+      }
       // 地图图块加载完成后触发
       map.value.on('complete', () => {
         //  修改loading状态
         console.log('地图加载完成')
-        $emits('complete')
+        $emits('complete', AMap.value)
         loading.value = false
       })
       // 地图绑定右击事件
       map.value.on('mousedown', clickHandler)
     })
     .catch((e) => {
-      console.log('地图加载失败')
+      console.log(e, '地图加载失败')
     })
 }
 // ------------------------------------------------------------------------------------------------
@@ -156,7 +160,7 @@
 }
 // ------------------------------------------------------------------------------------------------
 
-// -------------------------------------标记本文操作--------------------------------------------------
+// -------------------------------------标记文本操作--------------------------------------------------
 // 标记文本数组
 const textAllList = ref<any>([])
 // 添加标记文字
@@ -282,6 +286,35 @@
   lineAllList.value = []
 }
 // ------------------------------------------------------------------------------------------------
+
+// -----------------------------------海量点标记操作------------------------------------------------
+// 点标记(海量点)数组
+const massMarksAllList = ref<any>([])
+// 添加点标记(海量点)
+const addMassMarks = (data: any) => {
+  /**
+     * data
+     * path: 折线点位数据  [{lnglat: [116.402394,39.937182],name: "南锣鼓巷", style: 1,}, ]
+     * style 样式
+     * zooms: 在指定地图缩放级别范围内展示海量点图层
+     * zIndex: 海量点图层叠加的顺序
+      */
+  var massMarks = new AMap.value.MassMarks(data.path, {
+    zIndex: data.zIndex, // 海量点图层叠加的顺序
+    zooms: data.zooms, // 在指定地图缩放级别范围内展示海量点图层
+    style: data.style, // 设置样式对象
+  })
+  massMarksAllList.value.push(massMarks)
+  massMarks.setMap(map)
+}
+// 移除点标记(海量点)
+const removeMassMarks = () => {
+  massMarksAllList.value.forEach((item: any) => {
+    item.setMap(null)
+  })
+  massMarksAllList.value = []
+}
+// ------------------------------------------------------------------------------------------------
 onMounted(() => {
   loading.value = true
   initMap()
@@ -302,6 +335,8 @@
   removeMarker, // 移除点标记 (一般点标记)
   addPolyline, // 添加折线
   removePolyline, // 移除折线
+  addMassMarks, // 添加点标记(海量点)
+  removeMassMarks, // 移除点标记(海量点)
 })
 </script>
 
diff --git a/src/layouts/components/Header/mobile.vue b/src/layouts/components/Header/mobile.vue
new file mode 100644
index 0000000..a27de4b
--- /dev/null
+++ b/src/layouts/components/Header/mobile.vue
@@ -0,0 +1,53 @@
+<!-- 移动端头部 -->
+<script lang="ts" setup name="HeaderMobile">
+import { ArrowLeftBold, House } from '@element-plus/icons-vue'
+const route = useRoute()
+const router = useRouter()
+const goBack = (type: 'back' | 'home') => {
+  if (type === 'back') {
+    router.go(-1)
+  }
+  else if (type === 'home') {
+    router.push('/')
+  }
+}
+</script>
+
+<template>
+  <div>
+    <div v-if="route.meta.isHeader" class="header-mobile">
+      <div v-if="route.meta.isBack">
+        <el-icon :size="25" @click="goBack('back')">
+          <arrow-left-bold />
+        </el-icon>
+      </div>
+      <div v-else style="width: 25px;" />
+      <div> {{ route.meta.title }}</div>
+      <el-icon v-if="route.meta.isHome" :size="25" @click="goBack('home')">
+        <house />
+      </el-icon>
+      <div v-else style="width: 25px;" />
+    </div>
+    <div v-if="route.meta.isHeader" class="occupying" />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.header-mobile {
+  width: 100%;
+  background-color: #70b4ff;
+  height: 35px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 10px;
+  position: fixed;
+  top: 0;
+}
+
+.occupying {
+  height: 35px;
+  background-color: transparent;
+  width: 100%;
+}
+</style>
diff --git a/src/layouts/mobile.vue b/src/layouts/mobile.vue
new file mode 100644
index 0000000..c6235a4
--- /dev/null
+++ b/src/layouts/mobile.vue
@@ -0,0 +1,47 @@
+<!-- 移动端基础布局组件 -->
+<script lang="ts" setup name="LayoutMobile">
+import headerMobile from './components/Header/mobile.vue'
+import useKeepAliveStore from '@/store/modules/keepAlive'
+const keepAliveStore = useKeepAliveStore()
+const routeInfo = useRoute()
+</script>
+
+<template>
+  <div class="layout">
+    <div id="app-main">
+      <!-- 头部 -->
+      <header-mobile />
+      <div class="wrapper">
+        <div class="main-container">
+          <div class="main">
+            <router-view v-slot="{ Component, route }">
+              <transition name="main" mode appear>
+                <keep-alive :include="keepAliveStore.list">
+                  <component :is="Component" :key="route.fullPath" />
+                </keep-alive>
+              </transition>
+            </router-view>
+          </div>
+          <copyright />
+        </div>
+      </div>
+      <el-backtop :right="20" :bottom="20" title="回到顶部" />
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.main {
+  overflow-x: hidden;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+
+  // firefox隐藏滚动条
+  scrollbar-width: none;
+
+  // chrome隐藏滚动条
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}
+</style>
diff --git a/src/main.ts b/src/main.ts
index 07c50a2..cb80c5d 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -19,35 +19,35 @@
 import { downloadAndInstall } from '@/iconify-ep'
 import { hasPermission } from '@/utils/composables/permission'
 import buttonPerm from '@/utils/buttonPerm'
-// 引入打印插件
 if (useSettingsStore().app.iconifyOfflineUse) {
   downloadAndInstall()
 }
-const app = createApp(App)
-app.config.globalProperties.hasPerm = hasPermission
-app.config.globalProperties.buttonPerm = buttonPerm
-app.config.globalProperties.dayjs = dayjs
-app.use(print)
-app.use(ElementPlus)
-app.use(pinia)
-app.use(router)
-for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
-  app.component(key, component)
-}
-directive(app)
 
 axios.get('./config/config.json', {
   headers: {
     'Cache-Control': 'no-cache',
   },
 }).then((result) => {
+  const app = createApp(App)
   console.log('get config')
+  console.log(window.localStorage.getItem('browser-type-bj-well'), 'mian中获取浏览器类型')
   console.log(result)
   window.localStorage.setItem('url-bj-well', result.data.baseUrl)
   window.localStorage.setItem('securityJsCode', result.data.securityJsCode)
   window.localStorage.setItem('JsKey', result.data.JsKey)
   request.defaults.baseURL = result.data.baseUrl // 设置默认请求网址
   app.config.globalProperties.config = result.data
+  app.config.globalProperties.hasPerm = hasPermission
+  app.config.globalProperties.buttonPerm = buttonPerm
+  app.config.globalProperties.dayjs = dayjs
+  app.use(print)
+  app.use(ElementPlus)
+  app.use(pinia)
+  app.use(router)
+  for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
+    app.component(key, component)
+  }
+  directive(app)
   app.mount('#app')
 }).catch((error) => {
   console.error(`get baseConfig error...${error}`)
diff --git a/src/router/modules/mobile.ts b/src/router/modules/mobile.ts
new file mode 100644
index 0000000..77618c1
--- /dev/null
+++ b/src/router/modules/mobile.ts
@@ -0,0 +1,31 @@
+// 移动端路由
+import type { Route } from '@/global'
+
+const Layout = () => import('@/layouts/mobile.vue')
+
+const routes: Route.recordRaw[] = [
+  {
+    path: '/home',
+    component: Layout,
+    redirect: '/home/index',
+    name: 'Home',
+    meta: {
+      title: '首页',
+    },
+    children: [
+      {
+        path: 'index',
+        component: () => import('@/views/mobile/example1/index.vue'),
+        name: 'HomeIndex',
+        meta: {
+          title: '首页',
+          isHeader: true, // 是否需要头部
+          isBack: true, // 是否需要返回按钮
+          isHome: false, // 是否需要回到首页按钮
+        },
+      },
+    ],
+  },
+]
+
+export default routes
diff --git a/src/router/routes.ts b/src/router/routes.ts
index ae91d6e..b1fdc27 100644
--- a/src/router/routes.ts
+++ b/src/router/routes.ts
@@ -2,6 +2,7 @@
 import generatedRoutes from 'virtual:generated-pages'
 // import commonRoute from './modules/system'
 import homeRoute from './modules/home'
+import mobileRoute from './modules/mobile'
 import type { Route } from '@/global'
 import useSettingsStore from '@/store/modules/settings'
 
@@ -31,12 +32,15 @@
     },
   },
 ]
-
+const userAgent = navigator.userAgent || navigator.vendor || window.opera
+const isMobile = /android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(userAgent)
+window.localStorage.setItem('browser-type-bj-well', `${isMobile ? 'mobile' : 'pc'}`)
+console.log(window.localStorage.getItem('browser-type-bj-well'), '路由中获取浏览器类型')
 // 系统路由
 const systemRoutes: Route.recordRaw[] = [
   {
     path: '/dashboard',
-    component: () => import('@/layouts/index.vue'),
+    component: isMobile ? null : () => import('@/layouts/index.vue'),
     meta: {
       title: () => useSettingsStore().dashboard.title,
       breadcrumb: false,
@@ -101,19 +105,27 @@
     ],
   },
 ]
-
 // 动态路由（异步路由、导航栏路由）
-const asyncRoutes: Route.recordMainRaw[] = [
-  {
-    meta: {
-      title: '',
-      icon: '',
+const asyncRoutes: Route.recordMainRaw[] = isMobile
+  ? [{ // 移动端路由
+      meta: {
+        title: '',
+        icon: '',
+      },
+      children: [
+        ...mobileRoute,
+      ],
+    }]
+  : [{ // pc端路由
+      meta: {
+        title: '',
+        icon: '',
+      },
+      children: [
+        ...homeRoute,
+      ],
     },
-    children: [
-      ...homeRoute,
-    ],
-  },
-]
+    ]
 
 const constantRoutesByFilesystem = generatedRoutes.filter((item) => {
   return item.meta?.enabled !== false && item.meta?.constant === true

diff --git a/src/App.vue b/src/App.vue
index 52ccd6e..a9268fb 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -6,7 +6,7 @@
 import useMenuStore from '@/store/modules/menu'
 
 const settingsStore = useSettingsStore()
-
+const $router = useRouter()
 const buttonConfig = ref({
   autoInsertSpace: true,
 })
@@ -81,14 +81,40 @@
 })
 
 onMounted(() => {
+  // // 浏览器访问当前位置
+  // if ('geolocation' in navigator) {
+  //   navigator.geolocation.getCurrentPosition(function (position) {
+  //     // 允许
+  //     console.log('纬度: ', position.coords.latitude)
+  //     console.log('经度: ', position.coords.longitude)
+  //   }, function (error) {
+  //     // 拒绝
+  //     console.error("Error Code = " + error.code + " - " + error.message);
+  //   })
+  // } else {
+  //   console.error("Geolocation is not supported by this browser.")
+  // }
   settingsStore.setMode(document.documentElement.clientWidth)
   window.onresize = () => {
     settingsStore.setMode(document.documentElement.clientWidth)
+    // 监听浏览器类型变化 刷新浏览器
+    const userAgent = navigator.userAgent || navigator.vendor || window.opera
+    const isMobile = /android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(userAgent)
+    if (`${isMobile ? 'mobile' : 'pc'}` !== window.localStorage.getItem('browser-type-bj-well')) {
+      // if (!window.localStorage.getItem('browser-type-bj-well')) { return }
+      console.log(`浏览器类型发生变化，由${window.localStorage.getItem('browser-type-bj-well')}变为${isMobile ? 'mobile' : 'pc'}`)
+      window.localStorage.setItem('browser-type-bj-well', `${isMobile ? 'mobile' : 'pc'}`)
+      $router.push('/')
+      setTimeout(() => {
+        window.location.reload()
+      }, 1000)
+    }
   }
   hotkeys('alt+i', () => {
     eventBus.emit('global-system-info-toggle')
   })
 })
+const browserType = window.localStorage.getItem('browser-type-bj-well') // mobile || pc
 </script>
 
 <template>
@@ -99,6 +125,6 @@
         '--g-sub-sidebar-actual-width': subSidebarActualWidth,
       }"
     />
-    <system-info />
+    <system-info v-if="browserType !== 'mobile'" />
   </el-config-provider>
 </template>
diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue
index e247e28..de24f71 100644
--- a/src/components/NormalTable/index.vue
+++ b/src/components/NormalTable/index.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup name="NormalTable">
 import type { Ref } from 'vue'
-import { ElTable } from 'element-plus'
+import { ElMessage, ElTable } from 'element-plus'
 import { defineExpose, ref } from 'vue'
 import type { TableColumn } from './table_interface'
 import TableColumnCom from './tableColumn.vue'
@@ -84,7 +84,11 @@
     type: String,
     default: 'default',
   }, // 表格大小，默认，small,mini等，与el-table条件相同
-  // 想要展示成链接的数据
+  // 是否要右击菜单
+  needContextmenu: {
+    type: Boolean,
+    default: false,
+  },
 })
 const emit = defineEmits(['change', 'selectionChange', 'rowClick', 'rowDbClick', 'multiSelect', 'filterChange', 'rowDisabled', 'handleClickFollowLink'])
 // -------定义数据--------------
@@ -148,8 +152,10 @@
 //   changeColumns()
 // })
 // 多选
+const multiSelectData = ref([])
 const handleSelectionChange = (val: any) => {
   // console.log(val)
+  multiSelectData.value = val
   emit('multiSelect', val)
 }
 // 单选选中
@@ -214,27 +220,87 @@
 const handleClickFollowLink = (row: any, title: string) => {
   emit('handleClickFollowLink', row, title)
 }
+
+// 右击当前行操作
+const clickIndex = ref(-1)
+const contextmenu = (row: any, column: any, event: Event, index: number) => {
+  if (!props.needContextmenu) { return }
+  // 阻止默认的右键菜单
+  event.preventDefault()
+  clickIndex.value = props.data.findIndex(item => item === row)
+  console.log('右击', clickIndex.value)
+  // 获取自定义菜单元素
+  var menu = document.getElementById('custom-menu')
+  // 设置自定义菜单的位置并显示
+  let positionX = event.pageX
+  let positionY = event.pageY
+  if (document.documentElement.clientHeight - event.pageY < 204) {
+    positionY = document.documentElement.clientHeight - 204 + 102
+  }
+  if (document.documentElement.clientWidth - event.pageX < 146) {
+    positionX = document.documentElement.clientWidth - 146
+  }
+  menu.style.top = `${positionY - 102}px`
+  menu.style.left = `${positionX}px`
+  menu.style.display = 'block'
+}
+// 点击其他位置隐藏自定义菜单
+document.addEventListener('click', () => {
+  document.getElementById('custom-menu').style.display = 'none'
+})
+// 添加行
+const costomAddRow = (type: string) => {
+  if (type === 'current-pre') {
+    // 当前行前方插入
+    props.data.splice(clickIndex.value, 0, JSON.parse(JSON.stringify(props.data[clickIndex.value])))
+  }
+  else if (type === 'current-next') {
+    // 当前行后方方插入
+    props.data.splice(clickIndex.value + 1, 0, JSON.parse(JSON.stringify(props.data[clickIndex.value])))
+  }
+  else if (type === 'list-head') {
+    // 列表头行插入
+    props.data.splice(0, 0, JSON.parse(JSON.stringify(props.data[clickIndex.value])))
+  }
+  else if (type === 'list-tail') {
+    // 列表尾行插入
+    props.data.splice(props.data.length, 0, JSON.parse(JSON.stringify(props.data[clickIndex.value])))
+  }
+  else if (type === 'select-pre') {
+    // 选中行前方插入
+    if (!multiSelectData.value.length) {
+      ElMessage.warning('未选择数据')
+      return
+    }
+    multiSelectData.value.forEach((item, index) => {
+      const dataIndex = props.data.findIndex(citem => item === citem)
+      props.data.splice(dataIndex, 0, JSON.parse(JSON.stringify(item)))
+    })
+    table.value!.clearSelection()
+  }
+  else if (type === 'select-next') {
+    // 选中行后方插入
+    if (!multiSelectData.value.length) {
+      ElMessage.warning('未选择数据')
+      return
+    }
+    multiSelectData.value.forEach((item, index) => {
+      const dataIndex = props.data.findIndex(citem => item === citem)
+      props.data.splice(dataIndex + 1, 0, JSON.parse(JSON.stringify(item)))
+    })
+    table.value!.clearSelection()
+  }
+  clickIndex.value = -1
+}
 </script>
 
 <template>
   <div id="normal-table-com">
     <el-table
-      id="print"
-      ref="table"
-      v-loading="listLoading"
-      :data="data"
-      :height="height"
-      border
-      stripe
-      :size="size"
-      style="width: 100%;"
-      :row-key="(row) => { return row.id || row.index }"
-      :span-method="mergeTableRow"
-      @selection-change="handleSelectionChange"
-      @select="selectClick"
-      @row-click="rowClick"
-      @row-dblclick="rowDbClick"
-      @filter-change="filterChange"
+      id="print" ref="table" v-loading="listLoading" :data="data" :height="height" border stripe :size="size"
+      style="width: 100%;" :row-key="(row) => { return row.id || row.index }" :span-method="mergeTableRow"
+      @selection-change="handleSelectionChange" @select="selectClick" @row-click="rowClick" @row-dblclick="rowDbClick"
+      @filter-change="filterChange" @row-contextmenu="contextmenu"
     >
       <slot name="preColumns" />
 
@@ -243,45 +309,48 @@
           <el-radio v-model="singleChecked" :label="scope.row.id" class="radio" @change="radioChange" />
         </template>
       </el-table-column>
-      <el-table-column v-if="isShowmultiSelect && isMulti" :reserve-selection="true" type="selection" width="38" :selectable="selectable" fixed="left" />
+      <el-table-column
+        v-if="isShowmultiSelect && isMulti" :reserve-selection="true" type="selection" width="38"
+        :selectable="selectable" fixed="left"
+      />
       <template v-for="column of columns" :key="column.value">
         <el-table-column
-          v-if="!column.isFilters"
-          :label="column.text"
-          :prop="column.value"
-          :width="column.width"
-          :align="column.align"
-          :show-overflow-tooltip="column.showOverflow ? column.showOverflow : true"
+          v-if="!column.isFilters" :label="column.text" :prop="column.value" :width="column.width"
+          :align="column.align" :show-overflow-tooltip="column.showOverflow ? column.showOverflow : true"
           :fixed="column.fixed"
         >
           <template #default="scope">
-            <span v-if="!column.filter && !column.isLink" :style="column.styleFilter ? column.styleFilter(scope.row) : ''">{{ scope.row[column.value] }}</span>
-            <span v-if="column.filter && !column.isLink" :style="column.styleFilter ? column.styleFilter(scope.row) : ''">{{ column.filter(scope.row) }}</span>
+            <span
+              v-if="!column.filter && !column.isLink"
+              :style="column.styleFilter ? column.styleFilter(scope.row) : ''"
+            >{{ scope.row[column.value] }}</span>
+            <span
+              v-if="column.filter && !column.isLink"
+              :style="column.styleFilter ? column.styleFilter(scope.row) : ''"
+            >{{ column.filter(scope.row) }}</span>
             <div v-if="column.isLink">
               <show-photo v-for="(item, index) in scope.row.fileArr" :key="index" :minio-file-name="item" /><br>
             </div>
             <div v-if="column.followLink">
-              <div v-for="(item, index) in scope.row.followLinkArr" :key="index" @click="handleClickFollowLink(scope.row, item)">
+              <div
+                v-for="(item, index) in scope.row.followLinkArr" :key="index"
+                @click="handleClickFollowLink(scope.row, item)"
+              >
                 <span :class="item !== '/' ? 'follow-link' : ''">{{ item }}</span>
               </div>
             </div>
           </template>
         </el-table-column>
         <el-table-column
-          v-if="column.isFilters"
-          :label="column.text"
-          :prop="column.value"
-          :width="column.width"
-          :align="column.align"
-          :show-overflow-tooltip="column.showOverflow ? column.showOverflow : true"
-          :fixed="column.fixed"
-          :column-key="column.value"
-          :filters="column.filters"
-          :filter-multiple="false"
+          v-if="column.isFilters" :label="column.text" :prop="column.value" :width="column.width"
+          :align="column.align" :show-overflow-tooltip="column.showOverflow ? column.showOverflow : true"
+          :fixed="column.fixed" :column-key="column.value" :filters="column.filters" :filter-multiple="false"
         >
           <template #default="scope">
-            <span v-if="!column.filter" :style="column.styleFilter ? column.styleFilter(scope.row) : ''">{{ scope.row[column.value] }}</span>
-            <span v-else :style="column.styleFilter ? column.styleFilter(scope.row) : ''">{{ column.filter(scope.row) }}</span>
+            <span v-if="!column.filter" :style="column.styleFilter ? column.styleFilter(scope.row) : ''">{{
+              scope.row[column.value] }}</span>
+            <span v-else :style="column.styleFilter ? column.styleFilter(scope.row) : ''">{{ column.filter(scope.row)
+            }}</span>
           </template>
         </el-table-column>
       </template>
@@ -290,19 +359,67 @@
     </el-table>
     <div v-if="props.pagination" style="width: 100%;margin-top: 10px;">
       <el-pagination
-        :current-page="props.query.offset"
-        :page-sizes="props.pageSizes as number[]"
-        :page-size="props.query.limit"
-        :total="props.total"
-        layout="total, sizes, prev, pager, next"
-        @size-change="handleSizeChange"
-        @current-change="handleCurrentChange"
+        :current-page="props.query.offset" :page-sizes="props.pageSizes as number[]"
+        :page-size="props.query.limit" :total="props.total" layout="total, sizes, prev, pager, next"
+        @size-change="handleSizeChange" @current-change="handleCurrentChange"
       />
     </div>
+    <!-- 自定义菜单 -->
+    <div id="custom-menu">
+      <p class="menu-item" @click="costomAddRow('current-pre')">
+        当前行前方插入
+      </p>
+      <p class="menu-item" @click="costomAddRow('current-next')">
+        当前行后方插入
+      </p>
+      <p class="menu-item" @click="costomAddRow('list-head')">
+        列表头行插入
+      </p>
+      <p class="menu-item" @click="costomAddRow('list-tail')">
+        列表尾行插入
+      </p>
+      <p v-if="isShowmultiSelect && isMulti" class="menu-item" @click="costomAddRow('select-pre')">
+        选中行前方插入
+      </p>
+      <!--  -->
+      <p v-if="isShowmultiSelect && isMulti" class="menu-item" @click="costomAddRow('select-next')">
+        选中行后方插入
+      </p>
+    </div>
   </div>
 </template>
 
 <style lang="scss" scoped>
+#custom-menu {
+  display: none;
+  position: fixed;
+  background-color: #fff;
+  border-radius: 5px;
+  padding: 5px 0;
+  z-index: 1000;
+  border: 1px solid #c8c9cc;
+  box-shadow: 0 0 12px rgb(0 0 0 / 12%);
+
+  .menu-item {
+    display: flex;
+    align-items: center;
+    white-space: nowrap;
+    list-style: none;
+    line-height: 22px;
+    padding: 5px 16px;
+    margin: 0;
+    // font-size: var(--el-font-size-base);
+    color: #606266;
+    cursor: pointer;
+    outline: none;
+
+    &:hover {
+      background-color: #ecf5ff;
+      color: #409eff;
+    }
+  }
+}
+
 #normal-table-com {
   width: 100%;
 }
diff --git a/src/components/TableContainer/index.vue b/src/components/TableContainer/index.vue
index 0c07be6..87b1567 100644
--- a/src/components/TableContainer/index.vue
+++ b/src/components/TableContainer/index.vue
@@ -71,16 +71,18 @@
   <config-dialog ref="configRef" @confirm="confirmColumns" />
   <div class="table-container">
     <div class="button-area">
-      <div v-if="titleShow" :class="props.isCenter ? 'title-center' : 'title-left'">
-        <el-icon v-if="isConfig" :size="21" class="icon-menu" @click="config">
-          <menu />
-        </el-icon>
-        <span>
-          {{ title }}
-        </span>
-      </div>
-      <div class="button-left">
-        <slot name="btns-left" />
+      <div style="display: flex;align-items: center;">
+        <div v-if="titleShow" :class="props.isCenter ? 'title-center' : 'title-left'">
+          <el-icon v-if="isConfig" :size="21" class="icon-menu" @click="config">
+            <menu />
+          </el-icon>
+          <span>
+            {{ title }}
+          </span>
+        </div>
+        <div class="button-left">
+          <slot name="btns-left" />
+        </div>
       </div>
       <div class="button-right">
         <slot name="btns-right" />
diff --git a/src/components/map/index.vue b/src/components/map/index.vue
index 55e37da..620c813 100644
--- a/src/components/map/index.vue
+++ b/src/components/map/index.vue
@@ -8,7 +8,7 @@
 import { styleType } from 'element-plus/es/components/table-v2/src/common'
 
 const $props = defineProps({
-  // 初始图层 normal satellite
+  // 初始图层 normal satellite dark
   layer: {
     type: String,
     default: 'normal',
@@ -35,8 +35,8 @@
 const layer = ref()
 // 图层标识
 const layerFlag = ref('normal')
-// const publicPath = import.meta.env.BASE_URL
-// console.log(publicPath, 'publicPath')
+const publicPath = import.meta.env.BASE_URL
+console.log(publicPath, 'publicPath')
 // -------------------------------------初始化地图--------------------------------------------------
 const initMap = () => {
   AMapLoader.load({
@@ -61,18 +61,22 @@
         map.value.setFeatures(['bg', 'building'])
         layerFlag.value = 'satellite'
       }
+      else if ($props.layer === 'dark') {
+        // 深色图层
+        map.value.setMapStyle('amap://styles/darkblue')
+      }
       // 地图图块加载完成后触发
       map.value.on('complete', () => {
         //  修改loading状态
         console.log('地图加载完成')
-        $emits('complete')
+        $emits('complete', AMap.value)
         loading.value = false
       })
       // 地图绑定右击事件
       map.value.on('mousedown', clickHandler)
     })
     .catch((e) => {
-      console.log('地图加载失败')
+      console.log(e, '地图加载失败')
     })
 }
 // ------------------------------------------------------------------------------------------------
@@ -156,7 +160,7 @@
 }
 // ------------------------------------------------------------------------------------------------
 
-// -------------------------------------标记本文操作--------------------------------------------------
+// -------------------------------------标记文本操作--------------------------------------------------
 // 标记文本数组
 const textAllList = ref<any>([])
 // 添加标记文字
@@ -282,6 +286,35 @@
   lineAllList.value = []
 }
 // ------------------------------------------------------------------------------------------------
+
+// -----------------------------------海量点标记操作------------------------------------------------
+// 点标记(海量点)数组
+const massMarksAllList = ref<any>([])
+// 添加点标记(海量点)
+const addMassMarks = (data: any) => {
+  /**
+     * data
+     * path: 折线点位数据  [{lnglat: [116.402394,39.937182],name: "南锣鼓巷", style: 1,}, ]
+     * style 样式
+     * zooms: 在指定地图缩放级别范围内展示海量点图层
+     * zIndex: 海量点图层叠加的顺序
+      */
+  var massMarks = new AMap.value.MassMarks(data.path, {
+    zIndex: data.zIndex, // 海量点图层叠加的顺序
+    zooms: data.zooms, // 在指定地图缩放级别范围内展示海量点图层
+    style: data.style, // 设置样式对象
+  })
+  massMarksAllList.value.push(massMarks)
+  massMarks.setMap(map)
+}
+// 移除点标记(海量点)
+const removeMassMarks = () => {
+  massMarksAllList.value.forEach((item: any) => {
+    item.setMap(null)
+  })
+  massMarksAllList.value = []
+}
+// ------------------------------------------------------------------------------------------------
 onMounted(() => {
   loading.value = true
   initMap()
@@ -302,6 +335,8 @@
   removeMarker, // 移除点标记 (一般点标记)
   addPolyline, // 添加折线
   removePolyline, // 移除折线
+  addMassMarks, // 添加点标记(海量点)
+  removeMassMarks, // 移除点标记(海量点)
 })
 </script>
 
diff --git a/src/layouts/components/Header/mobile.vue b/src/layouts/components/Header/mobile.vue
new file mode 100644
index 0000000..a27de4b
--- /dev/null
+++ b/src/layouts/components/Header/mobile.vue
@@ -0,0 +1,53 @@
+<!-- 移动端头部 -->
+<script lang="ts" setup name="HeaderMobile">
+import { ArrowLeftBold, House } from '@element-plus/icons-vue'
+const route = useRoute()
+const router = useRouter()
+const goBack = (type: 'back' | 'home') => {
+  if (type === 'back') {
+    router.go(-1)
+  }
+  else if (type === 'home') {
+    router.push('/')
+  }
+}
+</script>
+
+<template>
+  <div>
+    <div v-if="route.meta.isHeader" class="header-mobile">
+      <div v-if="route.meta.isBack">
+        <el-icon :size="25" @click="goBack('back')">
+          <arrow-left-bold />
+        </el-icon>
+      </div>
+      <div v-else style="width: 25px;" />
+      <div> {{ route.meta.title }}</div>
+      <el-icon v-if="route.meta.isHome" :size="25" @click="goBack('home')">
+        <house />
+      </el-icon>
+      <div v-else style="width: 25px;" />
+    </div>
+    <div v-if="route.meta.isHeader" class="occupying" />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.header-mobile {
+  width: 100%;
+  background-color: #70b4ff;
+  height: 35px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 10px;
+  position: fixed;
+  top: 0;
+}
+
+.occupying {
+  height: 35px;
+  background-color: transparent;
+  width: 100%;
+}
+</style>
diff --git a/src/layouts/mobile.vue b/src/layouts/mobile.vue
new file mode 100644
index 0000000..c6235a4
--- /dev/null
+++ b/src/layouts/mobile.vue
@@ -0,0 +1,47 @@
+<!-- 移动端基础布局组件 -->
+<script lang="ts" setup name="LayoutMobile">
+import headerMobile from './components/Header/mobile.vue'
+import useKeepAliveStore from '@/store/modules/keepAlive'
+const keepAliveStore = useKeepAliveStore()
+const routeInfo = useRoute()
+</script>
+
+<template>
+  <div class="layout">
+    <div id="app-main">
+      <!-- 头部 -->
+      <header-mobile />
+      <div class="wrapper">
+        <div class="main-container">
+          <div class="main">
+            <router-view v-slot="{ Component, route }">
+              <transition name="main" mode appear>
+                <keep-alive :include="keepAliveStore.list">
+                  <component :is="Component" :key="route.fullPath" />
+                </keep-alive>
+              </transition>
+            </router-view>
+          </div>
+          <copyright />
+        </div>
+      </div>
+      <el-backtop :right="20" :bottom="20" title="回到顶部" />
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.main {
+  overflow-x: hidden;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+
+  // firefox隐藏滚动条
+  scrollbar-width: none;
+
+  // chrome隐藏滚动条
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}
+</style>
diff --git a/src/main.ts b/src/main.ts
index 07c50a2..cb80c5d 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -19,35 +19,35 @@
 import { downloadAndInstall } from '@/iconify-ep'
 import { hasPermission } from '@/utils/composables/permission'
 import buttonPerm from '@/utils/buttonPerm'
-// 引入打印插件
 if (useSettingsStore().app.iconifyOfflineUse) {
   downloadAndInstall()
 }
-const app = createApp(App)
-app.config.globalProperties.hasPerm = hasPermission
-app.config.globalProperties.buttonPerm = buttonPerm
-app.config.globalProperties.dayjs = dayjs
-app.use(print)
-app.use(ElementPlus)
-app.use(pinia)
-app.use(router)
-for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
-  app.component(key, component)
-}
-directive(app)
 
 axios.get('./config/config.json', {
   headers: {
     'Cache-Control': 'no-cache',
   },
 }).then((result) => {
+  const app = createApp(App)
   console.log('get config')
+  console.log(window.localStorage.getItem('browser-type-bj-well'), 'mian中获取浏览器类型')
   console.log(result)
   window.localStorage.setItem('url-bj-well', result.data.baseUrl)
   window.localStorage.setItem('securityJsCode', result.data.securityJsCode)
   window.localStorage.setItem('JsKey', result.data.JsKey)
   request.defaults.baseURL = result.data.baseUrl // 设置默认请求网址
   app.config.globalProperties.config = result.data
+  app.config.globalProperties.hasPerm = hasPermission
+  app.config.globalProperties.buttonPerm = buttonPerm
+  app.config.globalProperties.dayjs = dayjs
+  app.use(print)
+  app.use(ElementPlus)
+  app.use(pinia)
+  app.use(router)
+  for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
+    app.component(key, component)
+  }
+  directive(app)
   app.mount('#app')
 }).catch((error) => {
   console.error(`get baseConfig error...${error}`)
diff --git a/src/router/modules/mobile.ts b/src/router/modules/mobile.ts
new file mode 100644
index 0000000..77618c1
--- /dev/null
+++ b/src/router/modules/mobile.ts
@@ -0,0 +1,31 @@
+// 移动端路由
+import type { Route } from '@/global'
+
+const Layout = () => import('@/layouts/mobile.vue')
+
+const routes: Route.recordRaw[] = [
+  {
+    path: '/home',
+    component: Layout,
+    redirect: '/home/index',
+    name: 'Home',
+    meta: {
+      title: '首页',
+    },
+    children: [
+      {
+        path: 'index',
+        component: () => import('@/views/mobile/example1/index.vue'),
+        name: 'HomeIndex',
+        meta: {
+          title: '首页',
+          isHeader: true, // 是否需要头部
+          isBack: true, // 是否需要返回按钮
+          isHome: false, // 是否需要回到首页按钮
+        },
+      },
+    ],
+  },
+]
+
+export default routes
diff --git a/src/router/routes.ts b/src/router/routes.ts
index ae91d6e..b1fdc27 100644
--- a/src/router/routes.ts
+++ b/src/router/routes.ts
@@ -2,6 +2,7 @@
 import generatedRoutes from 'virtual:generated-pages'
 // import commonRoute from './modules/system'
 import homeRoute from './modules/home'
+import mobileRoute from './modules/mobile'
 import type { Route } from '@/global'
 import useSettingsStore from '@/store/modules/settings'
 
@@ -31,12 +32,15 @@
     },
   },
 ]
-
+const userAgent = navigator.userAgent || navigator.vendor || window.opera
+const isMobile = /android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(userAgent)
+window.localStorage.setItem('browser-type-bj-well', `${isMobile ? 'mobile' : 'pc'}`)
+console.log(window.localStorage.getItem('browser-type-bj-well'), '路由中获取浏览器类型')
 // 系统路由
 const systemRoutes: Route.recordRaw[] = [
   {
     path: '/dashboard',
-    component: () => import('@/layouts/index.vue'),
+    component: isMobile ? null : () => import('@/layouts/index.vue'),
     meta: {
       title: () => useSettingsStore().dashboard.title,
       breadcrumb: false,
@@ -101,19 +105,27 @@
     ],
   },
 ]
-
 // 动态路由（异步路由、导航栏路由）
-const asyncRoutes: Route.recordMainRaw[] = [
-  {
-    meta: {
-      title: '',
-      icon: '',
+const asyncRoutes: Route.recordMainRaw[] = isMobile
+  ? [{ // 移动端路由
+      meta: {
+        title: '',
+        icon: '',
+      },
+      children: [
+        ...mobileRoute,
+      ],
+    }]
+  : [{ // pc端路由
+      meta: {
+        title: '',
+        icon: '',
+      },
+      children: [
+        ...homeRoute,
+      ],
     },
-    children: [
-      ...homeRoute,
-    ],
-  },
-]
+    ]
 
 const constantRoutesByFilesystem = generatedRoutes.filter((item) => {
   return item.meta?.enabled !== false && item.meta?.constant === true
diff --git "a/src/views/\133...all\135.vue" "b/src/views/\133...all\135.vue"
index 91af7e1..98ca1f9 100644
--- "a/src/views/\133...all\135.vue"
+++ "b/src/views/\133...all\135.vue"
@@ -51,30 +51,65 @@
 </template>
 
 <style lang="scss" scoped>
-.notfound {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  width: 700px;
+@media (min-width: 700px) {
+  .notfound {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 700px;
 
-  @include position-center(xy);
+    @include position-center(xy);
 
-  .icon {
-    width: 400px;
-    height: 400px;
-  }
-
-  .content {
-    h1 {
-      margin: 0;
-      font-size: 72px;
-      color: var(--el-text-color-primary);
+    .icon {
+      width: 400px;
+      height: 400px;
     }
 
-    .desc {
-      margin: 20px 0 30px;
-      font-size: 20px;
-      color: var(--el-text-color-secondary);
+    .content {
+      h1 {
+        margin: 0;
+        font-size: 72px;
+        color: var(--el-text-color-primary);
+      }
+
+      .desc {
+        margin: 20px 0 30px;
+        font-size: 20px;
+        color: var(--el-text-color-secondary);
+      }
+    }
+  }
+}
+
+@media (max-width: 700px) {
+  .notfound {
+    // display: flex;
+    // align-items: center;
+    // justify-content: space-between;
+    // width: 700px;
+    overflow: hidden;
+
+    @include position-center(xy);
+
+    .icon {
+      width: 350px;
+      height: 350px;
+    }
+
+    .content {
+      text-align: center !important;
+
+      h1 {
+        margin: 0;
+        font-size: 72px;
+        color: var(--el-text-color-primary);
+      }
+
+      .desc {
+        margin: 20px 0 30px;
+        font-size: 20px;
+        color: var(--el-text-color-secondary);
+      }
     }
   }
 }

diff --git a/src/App.vue b/src/App.vue
index 52ccd6e..a9268fb 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -6,7 +6,7 @@
 import useMenuStore from '@/store/modules/menu'
 
 const settingsStore = useSettingsStore()
-
+const $router = useRouter()
 const buttonConfig = ref({
   autoInsertSpace: true,
 })
@@ -81,14 +81,40 @@
 })
 
 onMounted(() => {
+  // // 浏览器访问当前位置
+  // if ('geolocation' in navigator) {
+  //   navigator.geolocation.getCurrentPosition(function (position) {
+  //     // 允许
+  //     console.log('纬度: ', position.coords.latitude)
+  //     console.log('经度: ', position.coords.longitude)
+  //   }, function (error) {
+  //     // 拒绝
+  //     console.error("Error Code = " + error.code + " - " + error.message);
+  //   })
+  // } else {
+  //   console.error("Geolocation is not supported by this browser.")
+  // }
   settingsStore.setMode(document.documentElement.clientWidth)
   window.onresize = () => {
     settingsStore.setMode(document.documentElement.clientWidth)
+    // 监听浏览器类型变化 刷新浏览器
+    const userAgent = navigator.userAgent || navigator.vendor || window.opera
+    const isMobile = /android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(userAgent)
+    if (`${isMobile ? 'mobile' : 'pc'}` !== window.localStorage.getItem('browser-type-bj-well')) {
+      // if (!window.localStorage.getItem('browser-type-bj-well')) { return }
+      console.log(`浏览器类型发生变化，由${window.localStorage.getItem('browser-type-bj-well')}变为${isMobile ? 'mobile' : 'pc'}`)
+      window.localStorage.setItem('browser-type-bj-well', `${isMobile ? 'mobile' : 'pc'}`)
+      $router.push('/')
+      setTimeout(() => {
+        window.location.reload()
+      }, 1000)
+    }
   }
   hotkeys('alt+i', () => {
     eventBus.emit('global-system-info-toggle')
   })
 })
+const browserType = window.localStorage.getItem('browser-type-bj-well') // mobile || pc
 </script>
 
 <template>
@@ -99,6 +125,6 @@
         '--g-sub-sidebar-actual-width': subSidebarActualWidth,
       }"
     />
-    <system-info />
+    <system-info v-if="browserType !== 'mobile'" />
   </el-config-provider>
 </template>
diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue
index e247e28..de24f71 100644
--- a/src/components/NormalTable/index.vue
+++ b/src/components/NormalTable/index.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup name="NormalTable">
 import type { Ref } from 'vue'
-import { ElTable } from 'element-plus'
+import { ElMessage, ElTable } from 'element-plus'
 import { defineExpose, ref } from 'vue'
 import type { TableColumn } from './table_interface'
 import TableColumnCom from './tableColumn.vue'
@@ -84,7 +84,11 @@
     type: String,
     default: 'default',
   }, // 表格大小，默认，small,mini等，与el-table条件相同
-  // 想要展示成链接的数据
+  // 是否要右击菜单
+  needContextmenu: {
+    type: Boolean,
+    default: false,
+  },
 })
 const emit = defineEmits(['change', 'selectionChange', 'rowClick', 'rowDbClick', 'multiSelect', 'filterChange', 'rowDisabled', 'handleClickFollowLink'])
 // -------定义数据--------------
@@ -148,8 +152,10 @@
 //   changeColumns()
 // })
 // 多选
+const multiSelectData = ref([])
 const handleSelectionChange = (val: any) => {
   // console.log(val)
+  multiSelectData.value = val
   emit('multiSelect', val)
 }
 // 单选选中
@@ -214,27 +220,87 @@
 const handleClickFollowLink = (row: any, title: string) => {
   emit('handleClickFollowLink', row, title)
 }
+
+// 右击当前行操作
+const clickIndex = ref(-1)
+const contextmenu = (row: any, column: any, event: Event, index: number) => {
+  if (!props.needContextmenu) { return }
+  // 阻止默认的右键菜单
+  event.preventDefault()
+  clickIndex.value = props.data.findIndex(item => item === row)
+  console.log('右击', clickIndex.value)
+  // 获取自定义菜单元素
+  var menu = document.getElementById('custom-menu')
+  // 设置自定义菜单的位置并显示
+  let positionX = event.pageX
+  let positionY = event.pageY
+  if (document.documentElement.clientHeight - event.pageY < 204) {
+    positionY = document.documentElement.clientHeight - 204 + 102
+  }
+  if (document.documentElement.clientWidth - event.pageX < 146) {
+    positionX = document.documentElement.clientWidth - 146
+  }
+  menu.style.top = `${positionY - 102}px`
+  menu.style.left = `${positionX}px`
+  menu.style.display = 'block'
+}
+// 点击其他位置隐藏自定义菜单
+document.addEventListener('click', () => {
+  document.getElementById('custom-menu').style.display = 'none'
+})
+// 添加行
+const costomAddRow = (type: string) => {
+  if (type === 'current-pre') {
+    // 当前行前方插入
+    props.data.splice(clickIndex.value, 0, JSON.parse(JSON.stringify(props.data[clickIndex.value])))
+  }
+  else if (type === 'current-next') {
+    // 当前行后方方插入
+    props.data.splice(clickIndex.value + 1, 0, JSON.parse(JSON.stringify(props.data[clickIndex.value])))
+  }
+  else if (type === 'list-head') {
+    // 列表头行插入
+    props.data.splice(0, 0, JSON.parse(JSON.stringify(props.data[clickIndex.value])))
+  }
+  else if (type === 'list-tail') {
+    // 列表尾行插入
+    props.data.splice(props.data.length, 0, JSON.parse(JSON.stringify(props.data[clickIndex.value])))
+  }
+  else if (type === 'select-pre') {
+    // 选中行前方插入
+    if (!multiSelectData.value.length) {
+      ElMessage.warning('未选择数据')
+      return
+    }
+    multiSelectData.value.forEach((item, index) => {
+      const dataIndex = props.data.findIndex(citem => item === citem)
+      props.data.splice(dataIndex, 0, JSON.parse(JSON.stringify(item)))
+    })
+    table.value!.clearSelection()
+  }
+  else if (type === 'select-next') {
+    // 选中行后方插入
+    if (!multiSelectData.value.length) {
+      ElMessage.warning('未选择数据')
+      return
+    }
+    multiSelectData.value.forEach((item, index) => {
+      const dataIndex = props.data.findIndex(citem => item === citem)
+      props.data.splice(dataIndex + 1, 0, JSON.parse(JSON.stringify(item)))
+    })
+    table.value!.clearSelection()
+  }
+  clickIndex.value = -1
+}
 </script>
 
 <template>
   <div id="normal-table-com">
     <el-table
-      id="print"
-      ref="table"
-      v-loading="listLoading"
-      :data="data"
-      :height="height"
-      border
-      stripe
-      :size="size"
-      style="width: 100%;"
-      :row-key="(row) => { return row.id || row.index }"
-      :span-method="mergeTableRow"
-      @selection-change="handleSelectionChange"
-      @select="selectClick"
-      @row-click="rowClick"
-      @row-dblclick="rowDbClick"
-      @filter-change="filterChange"
+      id="print" ref="table" v-loading="listLoading" :data="data" :height="height" border stripe :size="size"
+      style="width: 100%;" :row-key="(row) => { return row.id || row.index }" :span-method="mergeTableRow"
+      @selection-change="handleSelectionChange" @select="selectClick" @row-click="rowClick" @row-dblclick="rowDbClick"
+      @filter-change="filterChange" @row-contextmenu="contextmenu"
     >
       <slot name="preColumns" />
 
@@ -243,45 +309,48 @@
           <el-radio v-model="singleChecked" :label="scope.row.id" class="radio" @change="radioChange" />
         </template>
       </el-table-column>
-      <el-table-column v-if="isShowmultiSelect && isMulti" :reserve-selection="true" type="selection" width="38" :selectable="selectable" fixed="left" />
+      <el-table-column
+        v-if="isShowmultiSelect && isMulti" :reserve-selection="true" type="selection" width="38"
+        :selectable="selectable" fixed="left"
+      />
       <template v-for="column of columns" :key="column.value">
         <el-table-column
-          v-if="!column.isFilters"
-          :label="column.text"
-          :prop="column.value"
-          :width="column.width"
-          :align="column.align"
-          :show-overflow-tooltip="column.showOverflow ? column.showOverflow : true"
+          v-if="!column.isFilters" :label="column.text" :prop="column.value" :width="column.width"
+          :align="column.align" :show-overflow-tooltip="column.showOverflow ? column.showOverflow : true"
           :fixed="column.fixed"
         >
           <template #default="scope">
-            <span v-if="!column.filter && !column.isLink" :style="column.styleFilter ? column.styleFilter(scope.row) : ''">{{ scope.row[column.value] }}</span>
-            <span v-if="column.filter && !column.isLink" :style="column.styleFilter ? column.styleFilter(scope.row) : ''">{{ column.filter(scope.row) }}</span>
+            <span
+              v-if="!column.filter && !column.isLink"
+              :style="column.styleFilter ? column.styleFilter(scope.row) : ''"
+            >{{ scope.row[column.value] }}</span>
+            <span
+              v-if="column.filter && !column.isLink"
+              :style="column.styleFilter ? column.styleFilter(scope.row) : ''"
+            >{{ column.filter(scope.row) }}</span>
             <div v-if="column.isLink">
               <show-photo v-for="(item, index) in scope.row.fileArr" :key="index" :minio-file-name="item" /><br>
             </div>
             <div v-if="column.followLink">
-              <div v-for="(item, index) in scope.row.followLinkArr" :key="index" @click="handleClickFollowLink(scope.row, item)">
+              <div
+                v-for="(item, index) in scope.row.followLinkArr" :key="index"
+                @click="handleClickFollowLink(scope.row, item)"
+              >
                 <span :class="item !== '/' ? 'follow-link' : ''">{{ item }}</span>
               </div>
             </div>
           </template>
         </el-table-column>
         <el-table-column
-          v-if="column.isFilters"
-          :label="column.text"
-          :prop="column.value"
-          :width="column.width"
-          :align="column.align"
-          :show-overflow-tooltip="column.showOverflow ? column.showOverflow : true"
-          :fixed="column.fixed"
-          :column-key="column.value"
-          :filters="column.filters"
-          :filter-multiple="false"
+          v-if="column.isFilters" :label="column.text" :prop="column.value" :width="column.width"
+          :align="column.align" :show-overflow-tooltip="column.showOverflow ? column.showOverflow : true"
+          :fixed="column.fixed" :column-key="column.value" :filters="column.filters" :filter-multiple="false"
         >
           <template #default="scope">
-            <span v-if="!column.filter" :style="column.styleFilter ? column.styleFilter(scope.row) : ''">{{ scope.row[column.value] }}</span>
-            <span v-else :style="column.styleFilter ? column.styleFilter(scope.row) : ''">{{ column.filter(scope.row) }}</span>
+            <span v-if="!column.filter" :style="column.styleFilter ? column.styleFilter(scope.row) : ''">{{
+              scope.row[column.value] }}</span>
+            <span v-else :style="column.styleFilter ? column.styleFilter(scope.row) : ''">{{ column.filter(scope.row)
+            }}</span>
           </template>
         </el-table-column>
       </template>
@@ -290,19 +359,67 @@
     </el-table>
     <div v-if="props.pagination" style="width: 100%;margin-top: 10px;">
       <el-pagination
-        :current-page="props.query.offset"
-        :page-sizes="props.pageSizes as number[]"
-        :page-size="props.query.limit"
-        :total="props.total"
-        layout="total, sizes, prev, pager, next"
-        @size-change="handleSizeChange"
-        @current-change="handleCurrentChange"
+        :current-page="props.query.offset" :page-sizes="props.pageSizes as number[]"
+        :page-size="props.query.limit" :total="props.total" layout="total, sizes, prev, pager, next"
+        @size-change="handleSizeChange" @current-change="handleCurrentChange"
       />
     </div>
+    <!-- 自定义菜单 -->
+    <div id="custom-menu">
+      <p class="menu-item" @click="costomAddRow('current-pre')">
+        当前行前方插入
+      </p>
+      <p class="menu-item" @click="costomAddRow('current-next')">
+        当前行后方插入
+      </p>
+      <p class="menu-item" @click="costomAddRow('list-head')">
+        列表头行插入
+      </p>
+      <p class="menu-item" @click="costomAddRow('list-tail')">
+        列表尾行插入
+      </p>
+      <p v-if="isShowmultiSelect && isMulti" class="menu-item" @click="costomAddRow('select-pre')">
+        选中行前方插入
+      </p>
+      <!--  -->
+      <p v-if="isShowmultiSelect && isMulti" class="menu-item" @click="costomAddRow('select-next')">
+        选中行后方插入
+      </p>
+    </div>
   </div>
 </template>
 
 <style lang="scss" scoped>
+#custom-menu {
+  display: none;
+  position: fixed;
+  background-color: #fff;
+  border-radius: 5px;
+  padding: 5px 0;
+  z-index: 1000;
+  border: 1px solid #c8c9cc;
+  box-shadow: 0 0 12px rgb(0 0 0 / 12%);
+
+  .menu-item {
+    display: flex;
+    align-items: center;
+    white-space: nowrap;
+    list-style: none;
+    line-height: 22px;
+    padding: 5px 16px;
+    margin: 0;
+    // font-size: var(--el-font-size-base);
+    color: #606266;
+    cursor: pointer;
+    outline: none;
+
+    &:hover {
+      background-color: #ecf5ff;
+      color: #409eff;
+    }
+  }
+}
+
 #normal-table-com {
   width: 100%;
 }
diff --git a/src/components/TableContainer/index.vue b/src/components/TableContainer/index.vue
index 0c07be6..87b1567 100644
--- a/src/components/TableContainer/index.vue
+++ b/src/components/TableContainer/index.vue
@@ -71,16 +71,18 @@
   <config-dialog ref="configRef" @confirm="confirmColumns" />
   <div class="table-container">
     <div class="button-area">
-      <div v-if="titleShow" :class="props.isCenter ? 'title-center' : 'title-left'">
-        <el-icon v-if="isConfig" :size="21" class="icon-menu" @click="config">
-          <menu />
-        </el-icon>
-        <span>
-          {{ title }}
-        </span>
-      </div>
-      <div class="button-left">
-        <slot name="btns-left" />
+      <div style="display: flex;align-items: center;">
+        <div v-if="titleShow" :class="props.isCenter ? 'title-center' : 'title-left'">
+          <el-icon v-if="isConfig" :size="21" class="icon-menu" @click="config">
+            <menu />
+          </el-icon>
+          <span>
+            {{ title }}
+          </span>
+        </div>
+        <div class="button-left">
+          <slot name="btns-left" />
+        </div>
       </div>
       <div class="button-right">
         <slot name="btns-right" />
diff --git a/src/components/map/index.vue b/src/components/map/index.vue
index 55e37da..620c813 100644
--- a/src/components/map/index.vue
+++ b/src/components/map/index.vue
@@ -8,7 +8,7 @@
 import { styleType } from 'element-plus/es/components/table-v2/src/common'
 
 const $props = defineProps({
-  // 初始图层 normal satellite
+  // 初始图层 normal satellite dark
   layer: {
     type: String,
     default: 'normal',
@@ -35,8 +35,8 @@
 const layer = ref()
 // 图层标识
 const layerFlag = ref('normal')
-// const publicPath = import.meta.env.BASE_URL
-// console.log(publicPath, 'publicPath')
+const publicPath = import.meta.env.BASE_URL
+console.log(publicPath, 'publicPath')
 // -------------------------------------初始化地图--------------------------------------------------
 const initMap = () => {
   AMapLoader.load({
@@ -61,18 +61,22 @@
         map.value.setFeatures(['bg', 'building'])
         layerFlag.value = 'satellite'
       }
+      else if ($props.layer === 'dark') {
+        // 深色图层
+        map.value.setMapStyle('amap://styles/darkblue')
+      }
       // 地图图块加载完成后触发
       map.value.on('complete', () => {
         //  修改loading状态
         console.log('地图加载完成')
-        $emits('complete')
+        $emits('complete', AMap.value)
         loading.value = false
       })
       // 地图绑定右击事件
       map.value.on('mousedown', clickHandler)
     })
     .catch((e) => {
-      console.log('地图加载失败')
+      console.log(e, '地图加载失败')
     })
 }
 // ------------------------------------------------------------------------------------------------
@@ -156,7 +160,7 @@
 }
 // ------------------------------------------------------------------------------------------------
 
-// -------------------------------------标记本文操作--------------------------------------------------
+// -------------------------------------标记文本操作--------------------------------------------------
 // 标记文本数组
 const textAllList = ref<any>([])
 // 添加标记文字
@@ -282,6 +286,35 @@
   lineAllList.value = []
 }
 // ------------------------------------------------------------------------------------------------
+
+// -----------------------------------海量点标记操作------------------------------------------------
+// 点标记(海量点)数组
+const massMarksAllList = ref<any>([])
+// 添加点标记(海量点)
+const addMassMarks = (data: any) => {
+  /**
+     * data
+     * path: 折线点位数据  [{lnglat: [116.402394,39.937182],name: "南锣鼓巷", style: 1,}, ]
+     * style 样式
+     * zooms: 在指定地图缩放级别范围内展示海量点图层
+     * zIndex: 海量点图层叠加的顺序
+      */
+  var massMarks = new AMap.value.MassMarks(data.path, {
+    zIndex: data.zIndex, // 海量点图层叠加的顺序
+    zooms: data.zooms, // 在指定地图缩放级别范围内展示海量点图层
+    style: data.style, // 设置样式对象
+  })
+  massMarksAllList.value.push(massMarks)
+  massMarks.setMap(map)
+}
+// 移除点标记(海量点)
+const removeMassMarks = () => {
+  massMarksAllList.value.forEach((item: any) => {
+    item.setMap(null)
+  })
+  massMarksAllList.value = []
+}
+// ------------------------------------------------------------------------------------------------
 onMounted(() => {
   loading.value = true
   initMap()
@@ -302,6 +335,8 @@
   removeMarker, // 移除点标记 (一般点标记)
   addPolyline, // 添加折线
   removePolyline, // 移除折线
+  addMassMarks, // 添加点标记(海量点)
+  removeMassMarks, // 移除点标记(海量点)
 })
 </script>
 
diff --git a/src/layouts/components/Header/mobile.vue b/src/layouts/components/Header/mobile.vue
new file mode 100644
index 0000000..a27de4b
--- /dev/null
+++ b/src/layouts/components/Header/mobile.vue
@@ -0,0 +1,53 @@
+<!-- 移动端头部 -->
+<script lang="ts" setup name="HeaderMobile">
+import { ArrowLeftBold, House } from '@element-plus/icons-vue'
+const route = useRoute()
+const router = useRouter()
+const goBack = (type: 'back' | 'home') => {
+  if (type === 'back') {
+    router.go(-1)
+  }
+  else if (type === 'home') {
+    router.push('/')
+  }
+}
+</script>
+
+<template>
+  <div>
+    <div v-if="route.meta.isHeader" class="header-mobile">
+      <div v-if="route.meta.isBack">
+        <el-icon :size="25" @click="goBack('back')">
+          <arrow-left-bold />
+        </el-icon>
+      </div>
+      <div v-else style="width: 25px;" />
+      <div> {{ route.meta.title }}</div>
+      <el-icon v-if="route.meta.isHome" :size="25" @click="goBack('home')">
+        <house />
+      </el-icon>
+      <div v-else style="width: 25px;" />
+    </div>
+    <div v-if="route.meta.isHeader" class="occupying" />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.header-mobile {
+  width: 100%;
+  background-color: #70b4ff;
+  height: 35px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 10px;
+  position: fixed;
+  top: 0;
+}
+
+.occupying {
+  height: 35px;
+  background-color: transparent;
+  width: 100%;
+}
+</style>
diff --git a/src/layouts/mobile.vue b/src/layouts/mobile.vue
new file mode 100644
index 0000000..c6235a4
--- /dev/null
+++ b/src/layouts/mobile.vue
@@ -0,0 +1,47 @@
+<!-- 移动端基础布局组件 -->
+<script lang="ts" setup name="LayoutMobile">
+import headerMobile from './components/Header/mobile.vue'
+import useKeepAliveStore from '@/store/modules/keepAlive'
+const keepAliveStore = useKeepAliveStore()
+const routeInfo = useRoute()
+</script>
+
+<template>
+  <div class="layout">
+    <div id="app-main">
+      <!-- 头部 -->
+      <header-mobile />
+      <div class="wrapper">
+        <div class="main-container">
+          <div class="main">
+            <router-view v-slot="{ Component, route }">
+              <transition name="main" mode appear>
+                <keep-alive :include="keepAliveStore.list">
+                  <component :is="Component" :key="route.fullPath" />
+                </keep-alive>
+              </transition>
+            </router-view>
+          </div>
+          <copyright />
+        </div>
+      </div>
+      <el-backtop :right="20" :bottom="20" title="回到顶部" />
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.main {
+  overflow-x: hidden;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+
+  // firefox隐藏滚动条
+  scrollbar-width: none;
+
+  // chrome隐藏滚动条
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}
+</style>
diff --git a/src/main.ts b/src/main.ts
index 07c50a2..cb80c5d 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -19,35 +19,35 @@
 import { downloadAndInstall } from '@/iconify-ep'
 import { hasPermission } from '@/utils/composables/permission'
 import buttonPerm from '@/utils/buttonPerm'
-// 引入打印插件
 if (useSettingsStore().app.iconifyOfflineUse) {
   downloadAndInstall()
 }
-const app = createApp(App)
-app.config.globalProperties.hasPerm = hasPermission
-app.config.globalProperties.buttonPerm = buttonPerm
-app.config.globalProperties.dayjs = dayjs
-app.use(print)
-app.use(ElementPlus)
-app.use(pinia)
-app.use(router)
-for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
-  app.component(key, component)
-}
-directive(app)
 
 axios.get('./config/config.json', {
   headers: {
     'Cache-Control': 'no-cache',
   },
 }).then((result) => {
+  const app = createApp(App)
   console.log('get config')
+  console.log(window.localStorage.getItem('browser-type-bj-well'), 'mian中获取浏览器类型')
   console.log(result)
   window.localStorage.setItem('url-bj-well', result.data.baseUrl)
   window.localStorage.setItem('securityJsCode', result.data.securityJsCode)
   window.localStorage.setItem('JsKey', result.data.JsKey)
   request.defaults.baseURL = result.data.baseUrl // 设置默认请求网址
   app.config.globalProperties.config = result.data
+  app.config.globalProperties.hasPerm = hasPermission
+  app.config.globalProperties.buttonPerm = buttonPerm
+  app.config.globalProperties.dayjs = dayjs
+  app.use(print)
+  app.use(ElementPlus)
+  app.use(pinia)
+  app.use(router)
+  for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
+    app.component(key, component)
+  }
+  directive(app)
   app.mount('#app')
 }).catch((error) => {
   console.error(`get baseConfig error...${error}`)
diff --git a/src/router/modules/mobile.ts b/src/router/modules/mobile.ts
new file mode 100644
index 0000000..77618c1
--- /dev/null
+++ b/src/router/modules/mobile.ts
@@ -0,0 +1,31 @@
+// 移动端路由
+import type { Route } from '@/global'
+
+const Layout = () => import('@/layouts/mobile.vue')
+
+const routes: Route.recordRaw[] = [
+  {
+    path: '/home',
+    component: Layout,
+    redirect: '/home/index',
+    name: 'Home',
+    meta: {
+      title: '首页',
+    },
+    children: [
+      {
+        path: 'index',
+        component: () => import('@/views/mobile/example1/index.vue'),
+        name: 'HomeIndex',
+        meta: {
+          title: '首页',
+          isHeader: true, // 是否需要头部
+          isBack: true, // 是否需要返回按钮
+          isHome: false, // 是否需要回到首页按钮
+        },
+      },
+    ],
+  },
+]
+
+export default routes
diff --git a/src/router/routes.ts b/src/router/routes.ts
index ae91d6e..b1fdc27 100644
--- a/src/router/routes.ts
+++ b/src/router/routes.ts
@@ -2,6 +2,7 @@
 import generatedRoutes from 'virtual:generated-pages'
 // import commonRoute from './modules/system'
 import homeRoute from './modules/home'
+import mobileRoute from './modules/mobile'
 import type { Route } from '@/global'
 import useSettingsStore from '@/store/modules/settings'
 
@@ -31,12 +32,15 @@
     },
   },
 ]
-
+const userAgent = navigator.userAgent || navigator.vendor || window.opera
+const isMobile = /android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(userAgent)
+window.localStorage.setItem('browser-type-bj-well', `${isMobile ? 'mobile' : 'pc'}`)
+console.log(window.localStorage.getItem('browser-type-bj-well'), '路由中获取浏览器类型')
 // 系统路由
 const systemRoutes: Route.recordRaw[] = [
   {
     path: '/dashboard',
-    component: () => import('@/layouts/index.vue'),
+    component: isMobile ? null : () => import('@/layouts/index.vue'),
     meta: {
       title: () => useSettingsStore().dashboard.title,
       breadcrumb: false,
@@ -101,19 +105,27 @@
     ],
   },
 ]
-
 // 动态路由（异步路由、导航栏路由）
-const asyncRoutes: Route.recordMainRaw[] = [
-  {
-    meta: {
-      title: '',
-      icon: '',
+const asyncRoutes: Route.recordMainRaw[] = isMobile
+  ? [{ // 移动端路由
+      meta: {
+        title: '',
+        icon: '',
+      },
+      children: [
+        ...mobileRoute,
+      ],
+    }]
+  : [{ // pc端路由
+      meta: {
+        title: '',
+        icon: '',
+      },
+      children: [
+        ...homeRoute,
+      ],
     },
-    children: [
-      ...homeRoute,
-    ],
-  },
-]
+    ]
 
 const constantRoutesByFilesystem = generatedRoutes.filter((item) => {
   return item.meta?.enabled !== false && item.meta?.constant === true
diff --git "a/src/views/\133...all\135.vue" "b/src/views/\133...all\135.vue"
index 91af7e1..98ca1f9 100644
--- "a/src/views/\133...all\135.vue"
+++ "b/src/views/\133...all\135.vue"
@@ -51,30 +51,65 @@
 </template>
 
 <style lang="scss" scoped>
-.notfound {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  width: 700px;
+@media (min-width: 700px) {
+  .notfound {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 700px;
 
-  @include position-center(xy);
+    @include position-center(xy);
 
-  .icon {
-    width: 400px;
-    height: 400px;
-  }
-
-  .content {
-    h1 {
-      margin: 0;
-      font-size: 72px;
-      color: var(--el-text-color-primary);
+    .icon {
+      width: 400px;
+      height: 400px;
     }
 
-    .desc {
-      margin: 20px 0 30px;
-      font-size: 20px;
-      color: var(--el-text-color-secondary);
+    .content {
+      h1 {
+        margin: 0;
+        font-size: 72px;
+        color: var(--el-text-color-primary);
+      }
+
+      .desc {
+        margin: 20px 0 30px;
+        font-size: 20px;
+        color: var(--el-text-color-secondary);
+      }
+    }
+  }
+}
+
+@media (max-width: 700px) {
+  .notfound {
+    // display: flex;
+    // align-items: center;
+    // justify-content: space-between;
+    // width: 700px;
+    overflow: hidden;
+
+    @include position-center(xy);
+
+    .icon {
+      width: 350px;
+      height: 350px;
+    }
+
+    .content {
+      text-align: center !important;
+
+      h1 {
+        margin: 0;
+        font-size: 72px;
+        color: var(--el-text-color-primary);
+      }
+
+      .desc {
+        margin: 20px 0 30px;
+        font-size: 20px;
+        color: var(--el-text-color-secondary);
+      }
     }
   }
 }
diff --git a/src/views/home/dashboard/index.vue b/src/views/home/dashboard/index.vue
index 3fc5cec..a4b5f57 100644
--- a/src/views/home/dashboard/index.vue
+++ b/src/views/home/dashboard/index.vue
@@ -206,10 +206,10 @@
           <el-scrollbar height="200px">
             <div class="message-container">
               <div v-for="item in messageData" :key="item" class="message-item">
-                <span class="left">
+                <div class="left">
                   <span class="type">【{{ item.alarmTypeName }}】</span>
                   <span class="content">{{ item.alarmContent }}</span>
-                </span>
+                </div>
                 <span class="time">{{ item.alarmTime }}</span>
               </div>
             </div>
@@ -325,6 +325,9 @@
           flex-direction: column;
           text-align: center;
           width: 60%;
+          overflow: hidden;
+          white-space: nowrap;
+          text-overflow: ellipsis;
         }
       }
     }
@@ -341,24 +344,30 @@
         display: flex;
         justify-content: space-between;
         padding: 0 10px;
+        width: 100%;
 
         .left {
-          display: inline;
           width: 75%;
+          display: flex;
+          align-items: center;
+          overflow: hidden;
+          white-space: nowrap;
+          text-overflow: ellipsis;
         }
 
         .content {
           display: inline-block;
           padding-left: 10px;
           width: 65%;
-          // overflow: hidden;
-          // white-space: nowrap;
-          // text-overflow: ellipsis;
+          overflow: hidden;
+          white-space: nowrap;
+          text-overflow: ellipsis;
         }
 
         .time {
           font-size: 16px;
           color: #7c7777;
+          white-space: nowrap;
         }
       }
     }

diff --git a/src/App.vue b/src/App.vue
index 52ccd6e..a9268fb 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -6,7 +6,7 @@
 import useMenuStore from '@/store/modules/menu'
 
 const settingsStore = useSettingsStore()
-
+const $router = useRouter()
 const buttonConfig = ref({
   autoInsertSpace: true,
 })
@@ -81,14 +81,40 @@
 })
 
 onMounted(() => {
+  // // 浏览器访问当前位置
+  // if ('geolocation' in navigator) {
+  //   navigator.geolocation.getCurrentPosition(function (position) {
+  //     // 允许
+  //     console.log('纬度: ', position.coords.latitude)
+  //     console.log('经度: ', position.coords.longitude)
+  //   }, function (error) {
+  //     // 拒绝
+  //     console.error("Error Code = " + error.code + " - " + error.message);
+  //   })
+  // } else {
+  //   console.error("Geolocation is not supported by this browser.")
+  // }
   settingsStore.setMode(document.documentElement.clientWidth)
   window.onresize = () => {
     settingsStore.setMode(document.documentElement.clientWidth)
+    // 监听浏览器类型变化 刷新浏览器
+    const userAgent = navigator.userAgent || navigator.vendor || window.opera
+    const isMobile = /android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(userAgent)
+    if (`${isMobile ? 'mobile' : 'pc'}` !== window.localStorage.getItem('browser-type-bj-well')) {
+      // if (!window.localStorage.getItem('browser-type-bj-well')) { return }
+      console.log(`浏览器类型发生变化，由${window.localStorage.getItem('browser-type-bj-well')}变为${isMobile ? 'mobile' : 'pc'}`)
+      window.localStorage.setItem('browser-type-bj-well', `${isMobile ? 'mobile' : 'pc'}`)
+      $router.push('/')
+      setTimeout(() => {
+        window.location.reload()
+      }, 1000)
+    }
   }
   hotkeys('alt+i', () => {
     eventBus.emit('global-system-info-toggle')
   })
 })
+const browserType = window.localStorage.getItem('browser-type-bj-well') // mobile || pc
 </script>
 
 <template>
@@ -99,6 +125,6 @@
         '--g-sub-sidebar-actual-width': subSidebarActualWidth,
       }"
     />
-    <system-info />
+    <system-info v-if="browserType !== 'mobile'" />
   </el-config-provider>
 </template>
diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue
index e247e28..de24f71 100644
--- a/src/components/NormalTable/index.vue
+++ b/src/components/NormalTable/index.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup name="NormalTable">
 import type { Ref } from 'vue'
-import { ElTable } from 'element-plus'
+import { ElMessage, ElTable } from 'element-plus'
 import { defineExpose, ref } from 'vue'
 import type { TableColumn } from './table_interface'
 import TableColumnCom from './tableColumn.vue'
@@ -84,7 +84,11 @@
     type: String,
     default: 'default',
   }, // 表格大小，默认，small,mini等，与el-table条件相同
-  // 想要展示成链接的数据
+  // 是否要右击菜单
+  needContextmenu: {
+    type: Boolean,
+    default: false,
+  },
 })
 const emit = defineEmits(['change', 'selectionChange', 'rowClick', 'rowDbClick', 'multiSelect', 'filterChange', 'rowDisabled', 'handleClickFollowLink'])
 // -------定义数据--------------
@@ -148,8 +152,10 @@
 //   changeColumns()
 // })
 // 多选
+const multiSelectData = ref([])
 const handleSelectionChange = (val: any) => {
   // console.log(val)
+  multiSelectData.value = val
   emit('multiSelect', val)
 }
 // 单选选中
@@ -214,27 +220,87 @@
 const handleClickFollowLink = (row: any, title: string) => {
   emit('handleClickFollowLink', row, title)
 }
+
+// 右击当前行操作
+const clickIndex = ref(-1)
+const contextmenu = (row: any, column: any, event: Event, index: number) => {
+  if (!props.needContextmenu) { return }
+  // 阻止默认的右键菜单
+  event.preventDefault()
+  clickIndex.value = props.data.findIndex(item => item === row)
+  console.log('右击', clickIndex.value)
+  // 获取自定义菜单元素
+  var menu = document.getElementById('custom-menu')
+  // 设置自定义菜单的位置并显示
+  let positionX = event.pageX
+  let positionY = event.pageY
+  if (document.documentElement.clientHeight - event.pageY < 204) {
+    positionY = document.documentElement.clientHeight - 204 + 102
+  }
+  if (document.documentElement.clientWidth - event.pageX < 146) {
+    positionX = document.documentElement.clientWidth - 146
+  }
+  menu.style.top = `${positionY - 102}px`
+  menu.style.left = `${positionX}px`
+  menu.style.display = 'block'
+}
+// 点击其他位置隐藏自定义菜单
+document.addEventListener('click', () => {
+  document.getElementById('custom-menu').style.display = 'none'
+})
+// 添加行
+const costomAddRow = (type: string) => {
+  if (type === 'current-pre') {
+    // 当前行前方插入
+    props.data.splice(clickIndex.value, 0, JSON.parse(JSON.stringify(props.data[clickIndex.value])))
+  }
+  else if (type === 'current-next') {
+    // 当前行后方方插入
+    props.data.splice(clickIndex.value + 1, 0, JSON.parse(JSON.stringify(props.data[clickIndex.value])))
+  }
+  else if (type === 'list-head') {
+    // 列表头行插入
+    props.data.splice(0, 0, JSON.parse(JSON.stringify(props.data[clickIndex.value])))
+  }
+  else if (type === 'list-tail') {
+    // 列表尾行插入
+    props.data.splice(props.data.length, 0, JSON.parse(JSON.stringify(props.data[clickIndex.value])))
+  }
+  else if (type === 'select-pre') {
+    // 选中行前方插入
+    if (!multiSelectData.value.length) {
+      ElMessage.warning('未选择数据')
+      return
+    }
+    multiSelectData.value.forEach((item, index) => {
+      const dataIndex = props.data.findIndex(citem => item === citem)
+      props.data.splice(dataIndex, 0, JSON.parse(JSON.stringify(item)))
+    })
+    table.value!.clearSelection()
+  }
+  else if (type === 'select-next') {
+    // 选中行后方插入
+    if (!multiSelectData.value.length) {
+      ElMessage.warning('未选择数据')
+      return
+    }
+    multiSelectData.value.forEach((item, index) => {
+      const dataIndex = props.data.findIndex(citem => item === citem)
+      props.data.splice(dataIndex + 1, 0, JSON.parse(JSON.stringify(item)))
+    })
+    table.value!.clearSelection()
+  }
+  clickIndex.value = -1
+}
 </script>
 
 <template>
   <div id="normal-table-com">
     <el-table
-      id="print"
-      ref="table"
-      v-loading="listLoading"
-      :data="data"
-      :height="height"
-      border
-      stripe
-      :size="size"
-      style="width: 100%;"
-      :row-key="(row) => { return row.id || row.index }"
-      :span-method="mergeTableRow"
-      @selection-change="handleSelectionChange"
-      @select="selectClick"
-      @row-click="rowClick"
-      @row-dblclick="rowDbClick"
-      @filter-change="filterChange"
+      id="print" ref="table" v-loading="listLoading" :data="data" :height="height" border stripe :size="size"
+      style="width: 100%;" :row-key="(row) => { return row.id || row.index }" :span-method="mergeTableRow"
+      @selection-change="handleSelectionChange" @select="selectClick" @row-click="rowClick" @row-dblclick="rowDbClick"
+      @filter-change="filterChange" @row-contextmenu="contextmenu"
     >
       <slot name="preColumns" />
 
@@ -243,45 +309,48 @@
           <el-radio v-model="singleChecked" :label="scope.row.id" class="radio" @change="radioChange" />
         </template>
       </el-table-column>
-      <el-table-column v-if="isShowmultiSelect && isMulti" :reserve-selection="true" type="selection" width="38" :selectable="selectable" fixed="left" />
+      <el-table-column
+        v-if="isShowmultiSelect && isMulti" :reserve-selection="true" type="selection" width="38"
+        :selectable="selectable" fixed="left"
+      />
       <template v-for="column of columns" :key="column.value">
         <el-table-column
-          v-if="!column.isFilters"
-          :label="column.text"
-          :prop="column.value"
-          :width="column.width"
-          :align="column.align"
-          :show-overflow-tooltip="column.showOverflow ? column.showOverflow : true"
+          v-if="!column.isFilters" :label="column.text" :prop="column.value" :width="column.width"
+          :align="column.align" :show-overflow-tooltip="column.showOverflow ? column.showOverflow : true"
           :fixed="column.fixed"
         >
           <template #default="scope">
-            <span v-if="!column.filter && !column.isLink" :style="column.styleFilter ? column.styleFilter(scope.row) : ''">{{ scope.row[column.value] }}</span>
-            <span v-if="column.filter && !column.isLink" :style="column.styleFilter ? column.styleFilter(scope.row) : ''">{{ column.filter(scope.row) }}</span>
+            <span
+              v-if="!column.filter && !column.isLink"
+              :style="column.styleFilter ? column.styleFilter(scope.row) : ''"
+            >{{ scope.row[column.value] }}</span>
+            <span
+              v-if="column.filter && !column.isLink"
+              :style="column.styleFilter ? column.styleFilter(scope.row) : ''"
+            >{{ column.filter(scope.row) }}</span>
             <div v-if="column.isLink">
               <show-photo v-for="(item, index) in scope.row.fileArr" :key="index" :minio-file-name="item" /><br>
             </div>
             <div v-if="column.followLink">
-              <div v-for="(item, index) in scope.row.followLinkArr" :key="index" @click="handleClickFollowLink(scope.row, item)">
+              <div
+                v-for="(item, index) in scope.row.followLinkArr" :key="index"
+                @click="handleClickFollowLink(scope.row, item)"
+              >
                 <span :class="item !== '/' ? 'follow-link' : ''">{{ item }}</span>
               </div>
             </div>
           </template>
         </el-table-column>
         <el-table-column
-          v-if="column.isFilters"
-          :label="column.text"
-          :prop="column.value"
-          :width="column.width"
-          :align="column.align"
-          :show-overflow-tooltip="column.showOverflow ? column.showOverflow : true"
-          :fixed="column.fixed"
-          :column-key="column.value"
-          :filters="column.filters"
-          :filter-multiple="false"
+          v-if="column.isFilters" :label="column.text" :prop="column.value" :width="column.width"
+          :align="column.align" :show-overflow-tooltip="column.showOverflow ? column.showOverflow : true"
+          :fixed="column.fixed" :column-key="column.value" :filters="column.filters" :filter-multiple="false"
         >
           <template #default="scope">
-            <span v-if="!column.filter" :style="column.styleFilter ? column.styleFilter(scope.row) : ''">{{ scope.row[column.value] }}</span>
-            <span v-else :style="column.styleFilter ? column.styleFilter(scope.row) : ''">{{ column.filter(scope.row) }}</span>
+            <span v-if="!column.filter" :style="column.styleFilter ? column.styleFilter(scope.row) : ''">{{
+              scope.row[column.value] }}</span>
+            <span v-else :style="column.styleFilter ? column.styleFilter(scope.row) : ''">{{ column.filter(scope.row)
+            }}</span>
           </template>
         </el-table-column>
       </template>
@@ -290,19 +359,67 @@
     </el-table>
     <div v-if="props.pagination" style="width: 100%;margin-top: 10px;">
       <el-pagination
-        :current-page="props.query.offset"
-        :page-sizes="props.pageSizes as number[]"
-        :page-size="props.query.limit"
-        :total="props.total"
-        layout="total, sizes, prev, pager, next"
-        @size-change="handleSizeChange"
-        @current-change="handleCurrentChange"
+        :current-page="props.query.offset" :page-sizes="props.pageSizes as number[]"
+        :page-size="props.query.limit" :total="props.total" layout="total, sizes, prev, pager, next"
+        @size-change="handleSizeChange" @current-change="handleCurrentChange"
       />
     </div>
+    <!-- 自定义菜单 -->
+    <div id="custom-menu">
+      <p class="menu-item" @click="costomAddRow('current-pre')">
+        当前行前方插入
+      </p>
+      <p class="menu-item" @click="costomAddRow('current-next')">
+        当前行后方插入
+      </p>
+      <p class="menu-item" @click="costomAddRow('list-head')">
+        列表头行插入
+      </p>
+      <p class="menu-item" @click="costomAddRow('list-tail')">
+        列表尾行插入
+      </p>
+      <p v-if="isShowmultiSelect && isMulti" class="menu-item" @click="costomAddRow('select-pre')">
+        选中行前方插入
+      </p>
+      <!--  -->
+      <p v-if="isShowmultiSelect && isMulti" class="menu-item" @click="costomAddRow('select-next')">
+        选中行后方插入
+      </p>
+    </div>
   </div>
 </template>
 
 <style lang="scss" scoped>
+#custom-menu {
+  display: none;
+  position: fixed;
+  background-color: #fff;
+  border-radius: 5px;
+  padding: 5px 0;
+  z-index: 1000;
+  border: 1px solid #c8c9cc;
+  box-shadow: 0 0 12px rgb(0 0 0 / 12%);
+
+  .menu-item {
+    display: flex;
+    align-items: center;
+    white-space: nowrap;
+    list-style: none;
+    line-height: 22px;
+    padding: 5px 16px;
+    margin: 0;
+    // font-size: var(--el-font-size-base);
+    color: #606266;
+    cursor: pointer;
+    outline: none;
+
+    &:hover {
+      background-color: #ecf5ff;
+      color: #409eff;
+    }
+  }
+}
+
 #normal-table-com {
   width: 100%;
 }
diff --git a/src/components/TableContainer/index.vue b/src/components/TableContainer/index.vue
index 0c07be6..87b1567 100644
--- a/src/components/TableContainer/index.vue
+++ b/src/components/TableContainer/index.vue
@@ -71,16 +71,18 @@
   <config-dialog ref="configRef" @confirm="confirmColumns" />
   <div class="table-container">
     <div class="button-area">
-      <div v-if="titleShow" :class="props.isCenter ? 'title-center' : 'title-left'">
-        <el-icon v-if="isConfig" :size="21" class="icon-menu" @click="config">
-          <menu />
-        </el-icon>
-        <span>
-          {{ title }}
-        </span>
-      </div>
-      <div class="button-left">
-        <slot name="btns-left" />
+      <div style="display: flex;align-items: center;">
+        <div v-if="titleShow" :class="props.isCenter ? 'title-center' : 'title-left'">
+          <el-icon v-if="isConfig" :size="21" class="icon-menu" @click="config">
+            <menu />
+          </el-icon>
+          <span>
+            {{ title }}
+          </span>
+        </div>
+        <div class="button-left">
+          <slot name="btns-left" />
+        </div>
       </div>
       <div class="button-right">
         <slot name="btns-right" />
diff --git a/src/components/map/index.vue b/src/components/map/index.vue
index 55e37da..620c813 100644
--- a/src/components/map/index.vue
+++ b/src/components/map/index.vue
@@ -8,7 +8,7 @@
 import { styleType } from 'element-plus/es/components/table-v2/src/common'
 
 const $props = defineProps({
-  // 初始图层 normal satellite
+  // 初始图层 normal satellite dark
   layer: {
     type: String,
     default: 'normal',
@@ -35,8 +35,8 @@
 const layer = ref()
 // 图层标识
 const layerFlag = ref('normal')
-// const publicPath = import.meta.env.BASE_URL
-// console.log(publicPath, 'publicPath')
+const publicPath = import.meta.env.BASE_URL
+console.log(publicPath, 'publicPath')
 // -------------------------------------初始化地图--------------------------------------------------
 const initMap = () => {
   AMapLoader.load({
@@ -61,18 +61,22 @@
         map.value.setFeatures(['bg', 'building'])
         layerFlag.value = 'satellite'
       }
+      else if ($props.layer === 'dark') {
+        // 深色图层
+        map.value.setMapStyle('amap://styles/darkblue')
+      }
       // 地图图块加载完成后触发
       map.value.on('complete', () => {
         //  修改loading状态
         console.log('地图加载完成')
-        $emits('complete')
+        $emits('complete', AMap.value)
         loading.value = false
       })
       // 地图绑定右击事件
       map.value.on('mousedown', clickHandler)
     })
     .catch((e) => {
-      console.log('地图加载失败')
+      console.log(e, '地图加载失败')
     })
 }
 // ------------------------------------------------------------------------------------------------
@@ -156,7 +160,7 @@
 }
 // ------------------------------------------------------------------------------------------------
 
-// -------------------------------------标记本文操作--------------------------------------------------
+// -------------------------------------标记文本操作--------------------------------------------------
 // 标记文本数组
 const textAllList = ref<any>([])
 // 添加标记文字
@@ -282,6 +286,35 @@
   lineAllList.value = []
 }
 // ------------------------------------------------------------------------------------------------
+
+// -----------------------------------海量点标记操作------------------------------------------------
+// 点标记(海量点)数组
+const massMarksAllList = ref<any>([])
+// 添加点标记(海量点)
+const addMassMarks = (data: any) => {
+  /**
+     * data
+     * path: 折线点位数据  [{lnglat: [116.402394,39.937182],name: "南锣鼓巷", style: 1,}, ]
+     * style 样式
+     * zooms: 在指定地图缩放级别范围内展示海量点图层
+     * zIndex: 海量点图层叠加的顺序
+      */
+  var massMarks = new AMap.value.MassMarks(data.path, {
+    zIndex: data.zIndex, // 海量点图层叠加的顺序
+    zooms: data.zooms, // 在指定地图缩放级别范围内展示海量点图层
+    style: data.style, // 设置样式对象
+  })
+  massMarksAllList.value.push(massMarks)
+  massMarks.setMap(map)
+}
+// 移除点标记(海量点)
+const removeMassMarks = () => {
+  massMarksAllList.value.forEach((item: any) => {
+    item.setMap(null)
+  })
+  massMarksAllList.value = []
+}
+// ------------------------------------------------------------------------------------------------
 onMounted(() => {
   loading.value = true
   initMap()
@@ -302,6 +335,8 @@
   removeMarker, // 移除点标记 (一般点标记)
   addPolyline, // 添加折线
   removePolyline, // 移除折线
+  addMassMarks, // 添加点标记(海量点)
+  removeMassMarks, // 移除点标记(海量点)
 })
 </script>
 
diff --git a/src/layouts/components/Header/mobile.vue b/src/layouts/components/Header/mobile.vue
new file mode 100644
index 0000000..a27de4b
--- /dev/null
+++ b/src/layouts/components/Header/mobile.vue
@@ -0,0 +1,53 @@
+<!-- 移动端头部 -->
+<script lang="ts" setup name="HeaderMobile">
+import { ArrowLeftBold, House } from '@element-plus/icons-vue'
+const route = useRoute()
+const router = useRouter()
+const goBack = (type: 'back' | 'home') => {
+  if (type === 'back') {
+    router.go(-1)
+  }
+  else if (type === 'home') {
+    router.push('/')
+  }
+}
+</script>
+
+<template>
+  <div>
+    <div v-if="route.meta.isHeader" class="header-mobile">
+      <div v-if="route.meta.isBack">
+        <el-icon :size="25" @click="goBack('back')">
+          <arrow-left-bold />
+        </el-icon>
+      </div>
+      <div v-else style="width: 25px;" />
+      <div> {{ route.meta.title }}</div>
+      <el-icon v-if="route.meta.isHome" :size="25" @click="goBack('home')">
+        <house />
+      </el-icon>
+      <div v-else style="width: 25px;" />
+    </div>
+    <div v-if="route.meta.isHeader" class="occupying" />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.header-mobile {
+  width: 100%;
+  background-color: #70b4ff;
+  height: 35px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 10px;
+  position: fixed;
+  top: 0;
+}
+
+.occupying {
+  height: 35px;
+  background-color: transparent;
+  width: 100%;
+}
+</style>
diff --git a/src/layouts/mobile.vue b/src/layouts/mobile.vue
new file mode 100644
index 0000000..c6235a4
--- /dev/null
+++ b/src/layouts/mobile.vue
@@ -0,0 +1,47 @@
+<!-- 移动端基础布局组件 -->
+<script lang="ts" setup name="LayoutMobile">
+import headerMobile from './components/Header/mobile.vue'
+import useKeepAliveStore from '@/store/modules/keepAlive'
+const keepAliveStore = useKeepAliveStore()
+const routeInfo = useRoute()
+</script>
+
+<template>
+  <div class="layout">
+    <div id="app-main">
+      <!-- 头部 -->
+      <header-mobile />
+      <div class="wrapper">
+        <div class="main-container">
+          <div class="main">
+            <router-view v-slot="{ Component, route }">
+              <transition name="main" mode appear>
+                <keep-alive :include="keepAliveStore.list">
+                  <component :is="Component" :key="route.fullPath" />
+                </keep-alive>
+              </transition>
+            </router-view>
+          </div>
+          <copyright />
+        </div>
+      </div>
+      <el-backtop :right="20" :bottom="20" title="回到顶部" />
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.main {
+  overflow-x: hidden;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+
+  // firefox隐藏滚动条
+  scrollbar-width: none;
+
+  // chrome隐藏滚动条
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}
+</style>
diff --git a/src/main.ts b/src/main.ts
index 07c50a2..cb80c5d 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -19,35 +19,35 @@
 import { downloadAndInstall } from '@/iconify-ep'
 import { hasPermission } from '@/utils/composables/permission'
 import buttonPerm from '@/utils/buttonPerm'
-// 引入打印插件
 if (useSettingsStore().app.iconifyOfflineUse) {
   downloadAndInstall()
 }
-const app = createApp(App)
-app.config.globalProperties.hasPerm = hasPermission
-app.config.globalProperties.buttonPerm = buttonPerm
-app.config.globalProperties.dayjs = dayjs
-app.use(print)
-app.use(ElementPlus)
-app.use(pinia)
-app.use(router)
-for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
-  app.component(key, component)
-}
-directive(app)
 
 axios.get('./config/config.json', {
   headers: {
     'Cache-Control': 'no-cache',
   },
 }).then((result) => {
+  const app = createApp(App)
   console.log('get config')
+  console.log(window.localStorage.getItem('browser-type-bj-well'), 'mian中获取浏览器类型')
   console.log(result)
   window.localStorage.setItem('url-bj-well', result.data.baseUrl)
   window.localStorage.setItem('securityJsCode', result.data.securityJsCode)
   window.localStorage.setItem('JsKey', result.data.JsKey)
   request.defaults.baseURL = result.data.baseUrl // 设置默认请求网址
   app.config.globalProperties.config = result.data
+  app.config.globalProperties.hasPerm = hasPermission
+  app.config.globalProperties.buttonPerm = buttonPerm
+  app.config.globalProperties.dayjs = dayjs
+  app.use(print)
+  app.use(ElementPlus)
+  app.use(pinia)
+  app.use(router)
+  for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
+    app.component(key, component)
+  }
+  directive(app)
   app.mount('#app')
 }).catch((error) => {
   console.error(`get baseConfig error...${error}`)
diff --git a/src/router/modules/mobile.ts b/src/router/modules/mobile.ts
new file mode 100644
index 0000000..77618c1
--- /dev/null
+++ b/src/router/modules/mobile.ts
@@ -0,0 +1,31 @@
+// 移动端路由
+import type { Route } from '@/global'
+
+const Layout = () => import('@/layouts/mobile.vue')
+
+const routes: Route.recordRaw[] = [
+  {
+    path: '/home',
+    component: Layout,
+    redirect: '/home/index',
+    name: 'Home',
+    meta: {
+      title: '首页',
+    },
+    children: [
+      {
+        path: 'index',
+        component: () => import('@/views/mobile/example1/index.vue'),
+        name: 'HomeIndex',
+        meta: {
+          title: '首页',
+          isHeader: true, // 是否需要头部
+          isBack: true, // 是否需要返回按钮
+          isHome: false, // 是否需要回到首页按钮
+        },
+      },
+    ],
+  },
+]
+
+export default routes
diff --git a/src/router/routes.ts b/src/router/routes.ts
index ae91d6e..b1fdc27 100644
--- a/src/router/routes.ts
+++ b/src/router/routes.ts
@@ -2,6 +2,7 @@
 import generatedRoutes from 'virtual:generated-pages'
 // import commonRoute from './modules/system'
 import homeRoute from './modules/home'
+import mobileRoute from './modules/mobile'
 import type { Route } from '@/global'
 import useSettingsStore from '@/store/modules/settings'
 
@@ -31,12 +32,15 @@
     },
   },
 ]
-
+const userAgent = navigator.userAgent || navigator.vendor || window.opera
+const isMobile = /android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(userAgent)
+window.localStorage.setItem('browser-type-bj-well', `${isMobile ? 'mobile' : 'pc'}`)
+console.log(window.localStorage.getItem('browser-type-bj-well'), '路由中获取浏览器类型')
 // 系统路由
 const systemRoutes: Route.recordRaw[] = [
   {
     path: '/dashboard',
-    component: () => import('@/layouts/index.vue'),
+    component: isMobile ? null : () => import('@/layouts/index.vue'),
     meta: {
       title: () => useSettingsStore().dashboard.title,
       breadcrumb: false,
@@ -101,19 +105,27 @@
     ],
   },
 ]
-
 // 动态路由（异步路由、导航栏路由）
-const asyncRoutes: Route.recordMainRaw[] = [
-  {
-    meta: {
-      title: '',
-      icon: '',
+const asyncRoutes: Route.recordMainRaw[] = isMobile
+  ? [{ // 移动端路由
+      meta: {
+        title: '',
+        icon: '',
+      },
+      children: [
+        ...mobileRoute,
+      ],
+    }]
+  : [{ // pc端路由
+      meta: {
+        title: '',
+        icon: '',
+      },
+      children: [
+        ...homeRoute,
+      ],
     },
-    children: [
-      ...homeRoute,
-    ],
-  },
-]
+    ]
 
 const constantRoutesByFilesystem = generatedRoutes.filter((item) => {
   return item.meta?.enabled !== false && item.meta?.constant === true
diff --git "a/src/views/\133...all\135.vue" "b/src/views/\133...all\135.vue"
index 91af7e1..98ca1f9 100644
--- "a/src/views/\133...all\135.vue"
+++ "b/src/views/\133...all\135.vue"
@@ -51,30 +51,65 @@
 </template>
 
 <style lang="scss" scoped>
-.notfound {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  width: 700px;
+@media (min-width: 700px) {
+  .notfound {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 700px;
 
-  @include position-center(xy);
+    @include position-center(xy);
 
-  .icon {
-    width: 400px;
-    height: 400px;
-  }
-
-  .content {
-    h1 {
-      margin: 0;
-      font-size: 72px;
-      color: var(--el-text-color-primary);
+    .icon {
+      width: 400px;
+      height: 400px;
     }
 
-    .desc {
-      margin: 20px 0 30px;
-      font-size: 20px;
-      color: var(--el-text-color-secondary);
+    .content {
+      h1 {
+        margin: 0;
+        font-size: 72px;
+        color: var(--el-text-color-primary);
+      }
+
+      .desc {
+        margin: 20px 0 30px;
+        font-size: 20px;
+        color: var(--el-text-color-secondary);
+      }
+    }
+  }
+}
+
+@media (max-width: 700px) {
+  .notfound {
+    // display: flex;
+    // align-items: center;
+    // justify-content: space-between;
+    // width: 700px;
+    overflow: hidden;
+
+    @include position-center(xy);
+
+    .icon {
+      width: 350px;
+      height: 350px;
+    }
+
+    .content {
+      text-align: center !important;
+
+      h1 {
+        margin: 0;
+        font-size: 72px;
+        color: var(--el-text-color-primary);
+      }
+
+      .desc {
+        margin: 20px 0 30px;
+        font-size: 20px;
+        color: var(--el-text-color-secondary);
+      }
     }
   }
 }
diff --git a/src/views/home/dashboard/index.vue b/src/views/home/dashboard/index.vue
index 3fc5cec..a4b5f57 100644
--- a/src/views/home/dashboard/index.vue
+++ b/src/views/home/dashboard/index.vue
@@ -206,10 +206,10 @@
           <el-scrollbar height="200px">
             <div class="message-container">
               <div v-for="item in messageData" :key="item" class="message-item">
-                <span class="left">
+                <div class="left">
                   <span class="type">【{{ item.alarmTypeName }}】</span>
                   <span class="content">{{ item.alarmContent }}</span>
-                </span>
+                </div>
                 <span class="time">{{ item.alarmTime }}</span>
               </div>
             </div>
@@ -325,6 +325,9 @@
           flex-direction: column;
           text-align: center;
           width: 60%;
+          overflow: hidden;
+          white-space: nowrap;
+          text-overflow: ellipsis;
         }
       }
     }
@@ -341,24 +344,30 @@
         display: flex;
         justify-content: space-between;
         padding: 0 10px;
+        width: 100%;
 
         .left {
-          display: inline;
           width: 75%;
+          display: flex;
+          align-items: center;
+          overflow: hidden;
+          white-space: nowrap;
+          text-overflow: ellipsis;
         }
 
         .content {
           display: inline-block;
           padding-left: 10px;
           width: 65%;
-          // overflow: hidden;
-          // white-space: nowrap;
-          // text-overflow: ellipsis;
+          overflow: hidden;
+          white-space: nowrap;
+          text-overflow: ellipsis;
         }
 
         .time {
           font-size: 16px;
           color: #7c7777;
+          white-space: nowrap;
         }
       }
     }
diff --git a/src/views/home/device/type/index.vue b/src/views/home/device/type/index.vue
index ab687f7..c83bbc6 100644
--- a/src/views/home/device/type/index.vue
+++ b/src/views/home/device/type/index.vue
@@ -1,3 +1,142 @@
+<!--
+  Description: 设备管理-设备类型管理
+  Author: 李亚光
+  Date: 2023-07-15
+ -->
+<script lang="ts" setup name="DeviceTypeManage">
+// 表格数据
+const list = ref([
+  {
+    deviceType: '11',
+    deviceTypeName: '燃气智能监测终端',
+    desc: '燃气智能监测终端',
+    monitor: '井下燃气浓度',
+    alarmLimit: '是',
+    alarmLow: '是',
+    isEnable: '是',
+    time: '',
+  },
+  {
+    deviceType: '11',
+    deviceTypeName: '燃气智能监测终端',
+    desc: '燃气智能监测终端',
+    monitor: '井下燃气浓度',
+    alarmLimit: '是',
+    alarmLow: '是',
+    isEnable: '是',
+    time: '',
+  },
+  {
+    deviceType: '12',
+    deviceTypeName: '场站监测云台',
+    desc: '场站监测云台',
+    monitor: '场站内视频、燃气浓度',
+    alarmLimit: '是',
+    alarmLow: '是',
+    isEnable: '是',
+    time: '',
+  },
+])
+const total = ref(0)
+// 初始展示列
+const columns = ref<any>([
+  { text: '设备类型代号', value: 'deviceType', align: 'center' },
+  { text: '设备类型', value: 'deviceTypeName', align: 'center' },
+  { text: '描述', value: 'desc', align: 'center' },
+  { text: '监控内容', value: 'monitor', align: 'center' },
+  { text: '是否需要报警上限', value: 'alarmLimit', align: 'center' },
+  { text: '是否需要报警下限', value: 'alarmLow', align: 'center' },
+  { text: '是否启用', value: 'isEnable', align: 'center' },
+  { text: '最新操作时间', value: 'time', align: 'center' },
+])
+// 最终展示列
+const columnsConfig = ref([])
+// 修改列
+const editColumns = (data: any) => {
+  columnsConfig.value = data
+}
+const loadingTable = ref(true)
+//  查询条件
+const listQuery = ref({
+  limit: 20,
+  offset: 1,
+})
+// 查询数据
+const fetchData = () => {
+  setTimeout(() => {
+    loadingTable.value = false
+  })
+}
+// 重置查询条件f
+const reset = () => {
+
+}
+// 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
+const changePage = (val: { size: number; page: number }) => {
+  if (val && val.size) {
+    listQuery.value.limit = val.size
+  }
+  if (val && val.page) {
+    listQuery.value.offset = val.page
+  }
+  fetchData()
+}
+
+onMounted(() => {
+  fetchData()
+})
+</script>
+
 <template>
-  设备类型管理
+  <!-- 布局 -->
+  <app-container>
+    <!-- 筛选条件 -->
+    <search-area :need-clear="true" @search="fetchData" @clear="reset">
+      <search-item>
+        <el-select v-model="listQuery.keywords" placeholder="设备类型" clearable />
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.keywords" placeholder="是否启用" clearable />
+      </search-item>
+    </search-area>
+    <!-- 表头标题 -->
+    <table-container
+      :is-config="true" config-title="device-type" :columns="columns" :config-columns="columnsConfig"
+      :edit="editColumns"
+    >
+      <template #btns-right>
+        <!-- 操作 -->
+        <div>
+          <el-button type="primary">
+            新建
+          </el-button>
+        </div>
+      </template>
+      <!-- 查询结果Table显示 -->
+      <normal-table
+        :data="list" :total="total" :columns="columnsConfig" :query="listQuery" :list-loading="loadingTable"
+        @change="changePage"
+      >
+        <template #preColumns>
+          <el-table-column label="序号" width="55" align="center">
+            <template #default="scope">
+              {{ (listQuery.offset - 1) * listQuery.limit + scope.$index + 1 }}
+            </template>
+          </el-table-column>
+        </template>
+        <template #columns>
+          <el-table-column label="操作" align="center" width="120">
+            <template #default="scope">
+              <el-button type="primary" link size="small">
+                编辑 {{ scope.$index }}
+              </el-button>
+              <el-button type="danger" link size="small">
+                删除 {{ scope.$index }}
+              </el-button>
+            </template>
+          </el-table-column>
+        </template>
+      </normal-table>
+    </table-container>
+  </app-container>
 </template>

diff --git a/src/App.vue b/src/App.vue
index 52ccd6e..a9268fb 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -6,7 +6,7 @@
 import useMenuStore from '@/store/modules/menu'
 
 const settingsStore = useSettingsStore()
-
+const $router = useRouter()
 const buttonConfig = ref({
   autoInsertSpace: true,
 })
@@ -81,14 +81,40 @@
 })
 
 onMounted(() => {
+  // // 浏览器访问当前位置
+  // if ('geolocation' in navigator) {
+  //   navigator.geolocation.getCurrentPosition(function (position) {
+  //     // 允许
+  //     console.log('纬度: ', position.coords.latitude)
+  //     console.log('经度: ', position.coords.longitude)
+  //   }, function (error) {
+  //     // 拒绝
+  //     console.error("Error Code = " + error.code + " - " + error.message);
+  //   })
+  // } else {
+  //   console.error("Geolocation is not supported by this browser.")
+  // }
   settingsStore.setMode(document.documentElement.clientWidth)
   window.onresize = () => {
     settingsStore.setMode(document.documentElement.clientWidth)
+    // 监听浏览器类型变化 刷新浏览器
+    const userAgent = navigator.userAgent || navigator.vendor || window.opera
+    const isMobile = /android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(userAgent)
+    if (`${isMobile ? 'mobile' : 'pc'}` !== window.localStorage.getItem('browser-type-bj-well')) {
+      // if (!window.localStorage.getItem('browser-type-bj-well')) { return }
+      console.log(`浏览器类型发生变化，由${window.localStorage.getItem('browser-type-bj-well')}变为${isMobile ? 'mobile' : 'pc'}`)
+      window.localStorage.setItem('browser-type-bj-well', `${isMobile ? 'mobile' : 'pc'}`)
+      $router.push('/')
+      setTimeout(() => {
+        window.location.reload()
+      }, 1000)
+    }
   }
   hotkeys('alt+i', () => {
     eventBus.emit('global-system-info-toggle')
   })
 })
+const browserType = window.localStorage.getItem('browser-type-bj-well') // mobile || pc
 </script>
 
 <template>
@@ -99,6 +125,6 @@
         '--g-sub-sidebar-actual-width': subSidebarActualWidth,
       }"
     />
-    <system-info />
+    <system-info v-if="browserType !== 'mobile'" />
   </el-config-provider>
 </template>
diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue
index e247e28..de24f71 100644
--- a/src/components/NormalTable/index.vue
+++ b/src/components/NormalTable/index.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup name="NormalTable">
 import type { Ref } from 'vue'
-import { ElTable } from 'element-plus'
+import { ElMessage, ElTable } from 'element-plus'
 import { defineExpose, ref } from 'vue'
 import type { TableColumn } from './table_interface'
 import TableColumnCom from './tableColumn.vue'
@@ -84,7 +84,11 @@
     type: String,
     default: 'default',
   }, // 表格大小，默认，small,mini等，与el-table条件相同
-  // 想要展示成链接的数据
+  // 是否要右击菜单
+  needContextmenu: {
+    type: Boolean,
+    default: false,
+  },
 })
 const emit = defineEmits(['change', 'selectionChange', 'rowClick', 'rowDbClick', 'multiSelect', 'filterChange', 'rowDisabled', 'handleClickFollowLink'])
 // -------定义数据--------------
@@ -148,8 +152,10 @@
 //   changeColumns()
 // })
 // 多选
+const multiSelectData = ref([])
 const handleSelectionChange = (val: any) => {
   // console.log(val)
+  multiSelectData.value = val
   emit('multiSelect', val)
 }
 // 单选选中
@@ -214,27 +220,87 @@
 const handleClickFollowLink = (row: any, title: string) => {
   emit('handleClickFollowLink', row, title)
 }
+
+// 右击当前行操作
+const clickIndex = ref(-1)
+const contextmenu = (row: any, column: any, event: Event, index: number) => {
+  if (!props.needContextmenu) { return }
+  // 阻止默认的右键菜单
+  event.preventDefault()
+  clickIndex.value = props.data.findIndex(item => item === row)
+  console.log('右击', clickIndex.value)
+  // 获取自定义菜单元素
+  var menu = document.getElementById('custom-menu')
+  // 设置自定义菜单的位置并显示
+  let positionX = event.pageX
+  let positionY = event.pageY
+  if (document.documentElement.clientHeight - event.pageY < 204) {
+    positionY = document.documentElement.clientHeight - 204 + 102
+  }
+  if (document.documentElement.clientWidth - event.pageX < 146) {
+    positionX = document.documentElement.clientWidth - 146
+  }
+  menu.style.top = `${positionY - 102}px`
+  menu.style.left = `${positionX}px`
+  menu.style.display = 'block'
+}
+// 点击其他位置隐藏自定义菜单
+document.addEventListener('click', () => {
+  document.getElementById('custom-menu').style.display = 'none'
+})
+// 添加行
+const costomAddRow = (type: string) => {
+  if (type === 'current-pre') {
+    // 当前行前方插入
+    props.data.splice(clickIndex.value, 0, JSON.parse(JSON.stringify(props.data[clickIndex.value])))
+  }
+  else if (type === 'current-next') {
+    // 当前行后方方插入
+    props.data.splice(clickIndex.value + 1, 0, JSON.parse(JSON.stringify(props.data[clickIndex.value])))
+  }
+  else if (type === 'list-head') {
+    // 列表头行插入
+    props.data.splice(0, 0, JSON.parse(JSON.stringify(props.data[clickIndex.value])))
+  }
+  else if (type === 'list-tail') {
+    // 列表尾行插入
+    props.data.splice(props.data.length, 0, JSON.parse(JSON.stringify(props.data[clickIndex.value])))
+  }
+  else if (type === 'select-pre') {
+    // 选中行前方插入
+    if (!multiSelectData.value.length) {
+      ElMessage.warning('未选择数据')
+      return
+    }
+    multiSelectData.value.forEach((item, index) => {
+      const dataIndex = props.data.findIndex(citem => item === citem)
+      props.data.splice(dataIndex, 0, JSON.parse(JSON.stringify(item)))
+    })
+    table.value!.clearSelection()
+  }
+  else if (type === 'select-next') {
+    // 选中行后方插入
+    if (!multiSelectData.value.length) {
+      ElMessage.warning('未选择数据')
+      return
+    }
+    multiSelectData.value.forEach((item, index) => {
+      const dataIndex = props.data.findIndex(citem => item === citem)
+      props.data.splice(dataIndex + 1, 0, JSON.parse(JSON.stringify(item)))
+    })
+    table.value!.clearSelection()
+  }
+  clickIndex.value = -1
+}
 </script>
 
 <template>
   <div id="normal-table-com">
     <el-table
-      id="print"
-      ref="table"
-      v-loading="listLoading"
-      :data="data"
-      :height="height"
-      border
-      stripe
-      :size="size"
-      style="width: 100%;"
-      :row-key="(row) => { return row.id || row.index }"
-      :span-method="mergeTableRow"
-      @selection-change="handleSelectionChange"
-      @select="selectClick"
-      @row-click="rowClick"
-      @row-dblclick="rowDbClick"
-      @filter-change="filterChange"
+      id="print" ref="table" v-loading="listLoading" :data="data" :height="height" border stripe :size="size"
+      style="width: 100%;" :row-key="(row) => { return row.id || row.index }" :span-method="mergeTableRow"
+      @selection-change="handleSelectionChange" @select="selectClick" @row-click="rowClick" @row-dblclick="rowDbClick"
+      @filter-change="filterChange" @row-contextmenu="contextmenu"
     >
       <slot name="preColumns" />
 
@@ -243,45 +309,48 @@
           <el-radio v-model="singleChecked" :label="scope.row.id" class="radio" @change="radioChange" />
         </template>
       </el-table-column>
-      <el-table-column v-if="isShowmultiSelect && isMulti" :reserve-selection="true" type="selection" width="38" :selectable="selectable" fixed="left" />
+      <el-table-column
+        v-if="isShowmultiSelect && isMulti" :reserve-selection="true" type="selection" width="38"
+        :selectable="selectable" fixed="left"
+      />
       <template v-for="column of columns" :key="column.value">
         <el-table-column
-          v-if="!column.isFilters"
-          :label="column.text"
-          :prop="column.value"
-          :width="column.width"
-          :align="column.align"
-          :show-overflow-tooltip="column.showOverflow ? column.showOverflow : true"
+          v-if="!column.isFilters" :label="column.text" :prop="column.value" :width="column.width"
+          :align="column.align" :show-overflow-tooltip="column.showOverflow ? column.showOverflow : true"
           :fixed="column.fixed"
         >
           <template #default="scope">
-            <span v-if="!column.filter && !column.isLink" :style="column.styleFilter ? column.styleFilter(scope.row) : ''">{{ scope.row[column.value] }}</span>
-            <span v-if="column.filter && !column.isLink" :style="column.styleFilter ? column.styleFilter(scope.row) : ''">{{ column.filter(scope.row) }}</span>
+            <span
+              v-if="!column.filter && !column.isLink"
+              :style="column.styleFilter ? column.styleFilter(scope.row) : ''"
+            >{{ scope.row[column.value] }}</span>
+            <span
+              v-if="column.filter && !column.isLink"
+              :style="column.styleFilter ? column.styleFilter(scope.row) : ''"
+            >{{ column.filter(scope.row) }}</span>
             <div v-if="column.isLink">
               <show-photo v-for="(item, index) in scope.row.fileArr" :key="index" :minio-file-name="item" /><br>
             </div>
             <div v-if="column.followLink">
-              <div v-for="(item, index) in scope.row.followLinkArr" :key="index" @click="handleClickFollowLink(scope.row, item)">
+              <div
+                v-for="(item, index) in scope.row.followLinkArr" :key="index"
+                @click="handleClickFollowLink(scope.row, item)"
+              >
                 <span :class="item !== '/' ? 'follow-link' : ''">{{ item }}</span>
               </div>
             </div>
           </template>
         </el-table-column>
         <el-table-column
-          v-if="column.isFilters"
-          :label="column.text"
-          :prop="column.value"
-          :width="column.width"
-          :align="column.align"
-          :show-overflow-tooltip="column.showOverflow ? column.showOverflow : true"
-          :fixed="column.fixed"
-          :column-key="column.value"
-          :filters="column.filters"
-          :filter-multiple="false"
+          v-if="column.isFilters" :label="column.text" :prop="column.value" :width="column.width"
+          :align="column.align" :show-overflow-tooltip="column.showOverflow ? column.showOverflow : true"
+          :fixed="column.fixed" :column-key="column.value" :filters="column.filters" :filter-multiple="false"
         >
           <template #default="scope">
-            <span v-if="!column.filter" :style="column.styleFilter ? column.styleFilter(scope.row) : ''">{{ scope.row[column.value] }}</span>
-            <span v-else :style="column.styleFilter ? column.styleFilter(scope.row) : ''">{{ column.filter(scope.row) }}</span>
+            <span v-if="!column.filter" :style="column.styleFilter ? column.styleFilter(scope.row) : ''">{{
+              scope.row[column.value] }}</span>
+            <span v-else :style="column.styleFilter ? column.styleFilter(scope.row) : ''">{{ column.filter(scope.row)
+            }}</span>
           </template>
         </el-table-column>
       </template>
@@ -290,19 +359,67 @@
     </el-table>
     <div v-if="props.pagination" style="width: 100%;margin-top: 10px;">
       <el-pagination
-        :current-page="props.query.offset"
-        :page-sizes="props.pageSizes as number[]"
-        :page-size="props.query.limit"
-        :total="props.total"
-        layout="total, sizes, prev, pager, next"
-        @size-change="handleSizeChange"
-        @current-change="handleCurrentChange"
+        :current-page="props.query.offset" :page-sizes="props.pageSizes as number[]"
+        :page-size="props.query.limit" :total="props.total" layout="total, sizes, prev, pager, next"
+        @size-change="handleSizeChange" @current-change="handleCurrentChange"
       />
     </div>
+    <!-- 自定义菜单 -->
+    <div id="custom-menu">
+      <p class="menu-item" @click="costomAddRow('current-pre')">
+        当前行前方插入
+      </p>
+      <p class="menu-item" @click="costomAddRow('current-next')">
+        当前行后方插入
+      </p>
+      <p class="menu-item" @click="costomAddRow('list-head')">
+        列表头行插入
+      </p>
+      <p class="menu-item" @click="costomAddRow('list-tail')">
+        列表尾行插入
+      </p>
+      <p v-if="isShowmultiSelect && isMulti" class="menu-item" @click="costomAddRow('select-pre')">
+        选中行前方插入
+      </p>
+      <!--  -->
+      <p v-if="isShowmultiSelect && isMulti" class="menu-item" @click="costomAddRow('select-next')">
+        选中行后方插入
+      </p>
+    </div>
   </div>
 </template>
 
 <style lang="scss" scoped>
+#custom-menu {
+  display: none;
+  position: fixed;
+  background-color: #fff;
+  border-radius: 5px;
+  padding: 5px 0;
+  z-index: 1000;
+  border: 1px solid #c8c9cc;
+  box-shadow: 0 0 12px rgb(0 0 0 / 12%);
+
+  .menu-item {
+    display: flex;
+    align-items: center;
+    white-space: nowrap;
+    list-style: none;
+    line-height: 22px;
+    padding: 5px 16px;
+    margin: 0;
+    // font-size: var(--el-font-size-base);
+    color: #606266;
+    cursor: pointer;
+    outline: none;
+
+    &:hover {
+      background-color: #ecf5ff;
+      color: #409eff;
+    }
+  }
+}
+
 #normal-table-com {
   width: 100%;
 }
diff --git a/src/components/TableContainer/index.vue b/src/components/TableContainer/index.vue
index 0c07be6..87b1567 100644
--- a/src/components/TableContainer/index.vue
+++ b/src/components/TableContainer/index.vue
@@ -71,16 +71,18 @@
   <config-dialog ref="configRef" @confirm="confirmColumns" />
   <div class="table-container">
     <div class="button-area">
-      <div v-if="titleShow" :class="props.isCenter ? 'title-center' : 'title-left'">
-        <el-icon v-if="isConfig" :size="21" class="icon-menu" @click="config">
-          <menu />
-        </el-icon>
-        <span>
-          {{ title }}
-        </span>
-      </div>
-      <div class="button-left">
-        <slot name="btns-left" />
+      <div style="display: flex;align-items: center;">
+        <div v-if="titleShow" :class="props.isCenter ? 'title-center' : 'title-left'">
+          <el-icon v-if="isConfig" :size="21" class="icon-menu" @click="config">
+            <menu />
+          </el-icon>
+          <span>
+            {{ title }}
+          </span>
+        </div>
+        <div class="button-left">
+          <slot name="btns-left" />
+        </div>
       </div>
       <div class="button-right">
         <slot name="btns-right" />
diff --git a/src/components/map/index.vue b/src/components/map/index.vue
index 55e37da..620c813 100644
--- a/src/components/map/index.vue
+++ b/src/components/map/index.vue
@@ -8,7 +8,7 @@
 import { styleType } from 'element-plus/es/components/table-v2/src/common'
 
 const $props = defineProps({
-  // 初始图层 normal satellite
+  // 初始图层 normal satellite dark
   layer: {
     type: String,
     default: 'normal',
@@ -35,8 +35,8 @@
 const layer = ref()
 // 图层标识
 const layerFlag = ref('normal')
-// const publicPath = import.meta.env.BASE_URL
-// console.log(publicPath, 'publicPath')
+const publicPath = import.meta.env.BASE_URL
+console.log(publicPath, 'publicPath')
 // -------------------------------------初始化地图--------------------------------------------------
 const initMap = () => {
   AMapLoader.load({
@@ -61,18 +61,22 @@
         map.value.setFeatures(['bg', 'building'])
         layerFlag.value = 'satellite'
       }
+      else if ($props.layer === 'dark') {
+        // 深色图层
+        map.value.setMapStyle('amap://styles/darkblue')
+      }
       // 地图图块加载完成后触发
       map.value.on('complete', () => {
         //  修改loading状态
         console.log('地图加载完成')
-        $emits('complete')
+        $emits('complete', AMap.value)
         loading.value = false
       })
       // 地图绑定右击事件
       map.value.on('mousedown', clickHandler)
     })
     .catch((e) => {
-      console.log('地图加载失败')
+      console.log(e, '地图加载失败')
     })
 }
 // ------------------------------------------------------------------------------------------------
@@ -156,7 +160,7 @@
 }
 // ------------------------------------------------------------------------------------------------
 
-// -------------------------------------标记本文操作--------------------------------------------------
+// -------------------------------------标记文本操作--------------------------------------------------
 // 标记文本数组
 const textAllList = ref<any>([])
 // 添加标记文字
@@ -282,6 +286,35 @@
   lineAllList.value = []
 }
 // ------------------------------------------------------------------------------------------------
+
+// -----------------------------------海量点标记操作------------------------------------------------
+// 点标记(海量点)数组
+const massMarksAllList = ref<any>([])
+// 添加点标记(海量点)
+const addMassMarks = (data: any) => {
+  /**
+     * data
+     * path: 折线点位数据  [{lnglat: [116.402394,39.937182],name: "南锣鼓巷", style: 1,}, ]
+     * style 样式
+     * zooms: 在指定地图缩放级别范围内展示海量点图层
+     * zIndex: 海量点图层叠加的顺序
+      */
+  var massMarks = new AMap.value.MassMarks(data.path, {
+    zIndex: data.zIndex, // 海量点图层叠加的顺序
+    zooms: data.zooms, // 在指定地图缩放级别范围内展示海量点图层
+    style: data.style, // 设置样式对象
+  })
+  massMarksAllList.value.push(massMarks)
+  massMarks.setMap(map)
+}
+// 移除点标记(海量点)
+const removeMassMarks = () => {
+  massMarksAllList.value.forEach((item: any) => {
+    item.setMap(null)
+  })
+  massMarksAllList.value = []
+}
+// ------------------------------------------------------------------------------------------------
 onMounted(() => {
   loading.value = true
   initMap()
@@ -302,6 +335,8 @@
   removeMarker, // 移除点标记 (一般点标记)
   addPolyline, // 添加折线
   removePolyline, // 移除折线
+  addMassMarks, // 添加点标记(海量点)
+  removeMassMarks, // 移除点标记(海量点)
 })
 </script>
 
diff --git a/src/layouts/components/Header/mobile.vue b/src/layouts/components/Header/mobile.vue
new file mode 100644
index 0000000..a27de4b
--- /dev/null
+++ b/src/layouts/components/Header/mobile.vue
@@ -0,0 +1,53 @@
+<!-- 移动端头部 -->
+<script lang="ts" setup name="HeaderMobile">
+import { ArrowLeftBold, House } from '@element-plus/icons-vue'
+const route = useRoute()
+const router = useRouter()
+const goBack = (type: 'back' | 'home') => {
+  if (type === 'back') {
+    router.go(-1)
+  }
+  else if (type === 'home') {
+    router.push('/')
+  }
+}
+</script>
+
+<template>
+  <div>
+    <div v-if="route.meta.isHeader" class="header-mobile">
+      <div v-if="route.meta.isBack">
+        <el-icon :size="25" @click="goBack('back')">
+          <arrow-left-bold />
+        </el-icon>
+      </div>
+      <div v-else style="width: 25px;" />
+      <div> {{ route.meta.title }}</div>
+      <el-icon v-if="route.meta.isHome" :size="25" @click="goBack('home')">
+        <house />
+      </el-icon>
+      <div v-else style="width: 25px;" />
+    </div>
+    <div v-if="route.meta.isHeader" class="occupying" />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.header-mobile {
+  width: 100%;
+  background-color: #70b4ff;
+  height: 35px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 10px;
+  position: fixed;
+  top: 0;
+}
+
+.occupying {
+  height: 35px;
+  background-color: transparent;
+  width: 100%;
+}
+</style>
diff --git a/src/layouts/mobile.vue b/src/layouts/mobile.vue
new file mode 100644
index 0000000..c6235a4
--- /dev/null
+++ b/src/layouts/mobile.vue
@@ -0,0 +1,47 @@
+<!-- 移动端基础布局组件 -->
+<script lang="ts" setup name="LayoutMobile">
+import headerMobile from './components/Header/mobile.vue'
+import useKeepAliveStore from '@/store/modules/keepAlive'
+const keepAliveStore = useKeepAliveStore()
+const routeInfo = useRoute()
+</script>
+
+<template>
+  <div class="layout">
+    <div id="app-main">
+      <!-- 头部 -->
+      <header-mobile />
+      <div class="wrapper">
+        <div class="main-container">
+          <div class="main">
+            <router-view v-slot="{ Component, route }">
+              <transition name="main" mode appear>
+                <keep-alive :include="keepAliveStore.list">
+                  <component :is="Component" :key="route.fullPath" />
+                </keep-alive>
+              </transition>
+            </router-view>
+          </div>
+          <copyright />
+        </div>
+      </div>
+      <el-backtop :right="20" :bottom="20" title="回到顶部" />
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.main {
+  overflow-x: hidden;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+
+  // firefox隐藏滚动条
+  scrollbar-width: none;
+
+  // chrome隐藏滚动条
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}
+</style>
diff --git a/src/main.ts b/src/main.ts
index 07c50a2..cb80c5d 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -19,35 +19,35 @@
 import { downloadAndInstall } from '@/iconify-ep'
 import { hasPermission } from '@/utils/composables/permission'
 import buttonPerm from '@/utils/buttonPerm'
-// 引入打印插件
 if (useSettingsStore().app.iconifyOfflineUse) {
   downloadAndInstall()
 }
-const app = createApp(App)
-app.config.globalProperties.hasPerm = hasPermission
-app.config.globalProperties.buttonPerm = buttonPerm
-app.config.globalProperties.dayjs = dayjs
-app.use(print)
-app.use(ElementPlus)
-app.use(pinia)
-app.use(router)
-for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
-  app.component(key, component)
-}
-directive(app)
 
 axios.get('./config/config.json', {
   headers: {
     'Cache-Control': 'no-cache',
   },
 }).then((result) => {
+  const app = createApp(App)
   console.log('get config')
+  console.log(window.localStorage.getItem('browser-type-bj-well'), 'mian中获取浏览器类型')
   console.log(result)
   window.localStorage.setItem('url-bj-well', result.data.baseUrl)
   window.localStorage.setItem('securityJsCode', result.data.securityJsCode)
   window.localStorage.setItem('JsKey', result.data.JsKey)
   request.defaults.baseURL = result.data.baseUrl // 设置默认请求网址
   app.config.globalProperties.config = result.data
+  app.config.globalProperties.hasPerm = hasPermission
+  app.config.globalProperties.buttonPerm = buttonPerm
+  app.config.globalProperties.dayjs = dayjs
+  app.use(print)
+  app.use(ElementPlus)
+  app.use(pinia)
+  app.use(router)
+  for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
+    app.component(key, component)
+  }
+  directive(app)
   app.mount('#app')
 }).catch((error) => {
   console.error(`get baseConfig error...${error}`)
diff --git a/src/router/modules/mobile.ts b/src/router/modules/mobile.ts
new file mode 100644
index 0000000..77618c1
--- /dev/null
+++ b/src/router/modules/mobile.ts
@@ -0,0 +1,31 @@
+// 移动端路由
+import type { Route } from '@/global'
+
+const Layout = () => import('@/layouts/mobile.vue')
+
+const routes: Route.recordRaw[] = [
+  {
+    path: '/home',
+    component: Layout,
+    redirect: '/home/index',
+    name: 'Home',
+    meta: {
+      title: '首页',
+    },
+    children: [
+      {
+        path: 'index',
+        component: () => import('@/views/mobile/example1/index.vue'),
+        name: 'HomeIndex',
+        meta: {
+          title: '首页',
+          isHeader: true, // 是否需要头部
+          isBack: true, // 是否需要返回按钮
+          isHome: false, // 是否需要回到首页按钮
+        },
+      },
+    ],
+  },
+]
+
+export default routes
diff --git a/src/router/routes.ts b/src/router/routes.ts
index ae91d6e..b1fdc27 100644
--- a/src/router/routes.ts
+++ b/src/router/routes.ts
@@ -2,6 +2,7 @@
 import generatedRoutes from 'virtual:generated-pages'
 // import commonRoute from './modules/system'
 import homeRoute from './modules/home'
+import mobileRoute from './modules/mobile'
 import type { Route } from '@/global'
 import useSettingsStore from '@/store/modules/settings'
 
@@ -31,12 +32,15 @@
     },
   },
 ]
-
+const userAgent = navigator.userAgent || navigator.vendor || window.opera
+const isMobile = /android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(userAgent)
+window.localStorage.setItem('browser-type-bj-well', `${isMobile ? 'mobile' : 'pc'}`)
+console.log(window.localStorage.getItem('browser-type-bj-well'), '路由中获取浏览器类型')
 // 系统路由
 const systemRoutes: Route.recordRaw[] = [
   {
     path: '/dashboard',
-    component: () => import('@/layouts/index.vue'),
+    component: isMobile ? null : () => import('@/layouts/index.vue'),
     meta: {
       title: () => useSettingsStore().dashboard.title,
       breadcrumb: false,
@@ -101,19 +105,27 @@
     ],
   },
 ]
-
 // 动态路由（异步路由、导航栏路由）
-const asyncRoutes: Route.recordMainRaw[] = [
-  {
-    meta: {
-      title: '',
-      icon: '',
+const asyncRoutes: Route.recordMainRaw[] = isMobile
+  ? [{ // 移动端路由
+      meta: {
+        title: '',
+        icon: '',
+      },
+      children: [
+        ...mobileRoute,
+      ],
+    }]
+  : [{ // pc端路由
+      meta: {
+        title: '',
+        icon: '',
+      },
+      children: [
+        ...homeRoute,
+      ],
     },
-    children: [
-      ...homeRoute,
-    ],
-  },
-]
+    ]
 
 const constantRoutesByFilesystem = generatedRoutes.filter((item) => {
   return item.meta?.enabled !== false && item.meta?.constant === true
diff --git "a/src/views/\133...all\135.vue" "b/src/views/\133...all\135.vue"
index 91af7e1..98ca1f9 100644
--- "a/src/views/\133...all\135.vue"
+++ "b/src/views/\133...all\135.vue"
@@ -51,30 +51,65 @@
 </template>
 
 <style lang="scss" scoped>
-.notfound {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  width: 700px;
+@media (min-width: 700px) {
+  .notfound {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 700px;
 
-  @include position-center(xy);
+    @include position-center(xy);
 
-  .icon {
-    width: 400px;
-    height: 400px;
-  }
-
-  .content {
-    h1 {
-      margin: 0;
-      font-size: 72px;
-      color: var(--el-text-color-primary);
+    .icon {
+      width: 400px;
+      height: 400px;
     }
 
-    .desc {
-      margin: 20px 0 30px;
-      font-size: 20px;
-      color: var(--el-text-color-secondary);
+    .content {
+      h1 {
+        margin: 0;
+        font-size: 72px;
+        color: var(--el-text-color-primary);
+      }
+
+      .desc {
+        margin: 20px 0 30px;
+        font-size: 20px;
+        color: var(--el-text-color-secondary);
+      }
+    }
+  }
+}
+
+@media (max-width: 700px) {
+  .notfound {
+    // display: flex;
+    // align-items: center;
+    // justify-content: space-between;
+    // width: 700px;
+    overflow: hidden;
+
+    @include position-center(xy);
+
+    .icon {
+      width: 350px;
+      height: 350px;
+    }
+
+    .content {
+      text-align: center !important;
+
+      h1 {
+        margin: 0;
+        font-size: 72px;
+        color: var(--el-text-color-primary);
+      }
+
+      .desc {
+        margin: 20px 0 30px;
+        font-size: 20px;
+        color: var(--el-text-color-secondary);
+      }
     }
   }
 }
diff --git a/src/views/home/dashboard/index.vue b/src/views/home/dashboard/index.vue
index 3fc5cec..a4b5f57 100644
--- a/src/views/home/dashboard/index.vue
+++ b/src/views/home/dashboard/index.vue
@@ -206,10 +206,10 @@
           <el-scrollbar height="200px">
             <div class="message-container">
               <div v-for="item in messageData" :key="item" class="message-item">
-                <span class="left">
+                <div class="left">
                   <span class="type">【{{ item.alarmTypeName }}】</span>
                   <span class="content">{{ item.alarmContent }}</span>
-                </span>
+                </div>
                 <span class="time">{{ item.alarmTime }}</span>
               </div>
             </div>
@@ -325,6 +325,9 @@
           flex-direction: column;
           text-align: center;
           width: 60%;
+          overflow: hidden;
+          white-space: nowrap;
+          text-overflow: ellipsis;
         }
       }
     }
@@ -341,24 +344,30 @@
         display: flex;
         justify-content: space-between;
         padding: 0 10px;
+        width: 100%;
 
         .left {
-          display: inline;
           width: 75%;
+          display: flex;
+          align-items: center;
+          overflow: hidden;
+          white-space: nowrap;
+          text-overflow: ellipsis;
         }
 
         .content {
           display: inline-block;
           padding-left: 10px;
           width: 65%;
-          // overflow: hidden;
-          // white-space: nowrap;
-          // text-overflow: ellipsis;
+          overflow: hidden;
+          white-space: nowrap;
+          text-overflow: ellipsis;
         }
 
         .time {
           font-size: 16px;
           color: #7c7777;
+          white-space: nowrap;
         }
       }
     }
diff --git a/src/views/home/device/type/index.vue b/src/views/home/device/type/index.vue
index ab687f7..c83bbc6 100644
--- a/src/views/home/device/type/index.vue
+++ b/src/views/home/device/type/index.vue
@@ -1,3 +1,142 @@
+<!--
+  Description: 设备管理-设备类型管理
+  Author: 李亚光
+  Date: 2023-07-15
+ -->
+<script lang="ts" setup name="DeviceTypeManage">
+// 表格数据
+const list = ref([
+  {
+    deviceType: '11',
+    deviceTypeName: '燃气智能监测终端',
+    desc: '燃气智能监测终端',
+    monitor: '井下燃气浓度',
+    alarmLimit: '是',
+    alarmLow: '是',
+    isEnable: '是',
+    time: '',
+  },
+  {
+    deviceType: '11',
+    deviceTypeName: '燃气智能监测终端',
+    desc: '燃气智能监测终端',
+    monitor: '井下燃气浓度',
+    alarmLimit: '是',
+    alarmLow: '是',
+    isEnable: '是',
+    time: '',
+  },
+  {
+    deviceType: '12',
+    deviceTypeName: '场站监测云台',
+    desc: '场站监测云台',
+    monitor: '场站内视频、燃气浓度',
+    alarmLimit: '是',
+    alarmLow: '是',
+    isEnable: '是',
+    time: '',
+  },
+])
+const total = ref(0)
+// 初始展示列
+const columns = ref<any>([
+  { text: '设备类型代号', value: 'deviceType', align: 'center' },
+  { text: '设备类型', value: 'deviceTypeName', align: 'center' },
+  { text: '描述', value: 'desc', align: 'center' },
+  { text: '监控内容', value: 'monitor', align: 'center' },
+  { text: '是否需要报警上限', value: 'alarmLimit', align: 'center' },
+  { text: '是否需要报警下限', value: 'alarmLow', align: 'center' },
+  { text: '是否启用', value: 'isEnable', align: 'center' },
+  { text: '最新操作时间', value: 'time', align: 'center' },
+])
+// 最终展示列
+const columnsConfig = ref([])
+// 修改列
+const editColumns = (data: any) => {
+  columnsConfig.value = data
+}
+const loadingTable = ref(true)
+//  查询条件
+const listQuery = ref({
+  limit: 20,
+  offset: 1,
+})
+// 查询数据
+const fetchData = () => {
+  setTimeout(() => {
+    loadingTable.value = false
+  })
+}
+// 重置查询条件f
+const reset = () => {
+
+}
+// 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
+const changePage = (val: { size: number; page: number }) => {
+  if (val && val.size) {
+    listQuery.value.limit = val.size
+  }
+  if (val && val.page) {
+    listQuery.value.offset = val.page
+  }
+  fetchData()
+}
+
+onMounted(() => {
+  fetchData()
+})
+</script>
+
 <template>
-  设备类型管理
+  <!-- 布局 -->
+  <app-container>
+    <!-- 筛选条件 -->
+    <search-area :need-clear="true" @search="fetchData" @clear="reset">
+      <search-item>
+        <el-select v-model="listQuery.keywords" placeholder="设备类型" clearable />
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.keywords" placeholder="是否启用" clearable />
+      </search-item>
+    </search-area>
+    <!-- 表头标题 -->
+    <table-container
+      :is-config="true" config-title="device-type" :columns="columns" :config-columns="columnsConfig"
+      :edit="editColumns"
+    >
+      <template #btns-right>
+        <!-- 操作 -->
+        <div>
+          <el-button type="primary">
+            新建
+          </el-button>
+        </div>
+      </template>
+      <!-- 查询结果Table显示 -->
+      <normal-table
+        :data="list" :total="total" :columns="columnsConfig" :query="listQuery" :list-loading="loadingTable"
+        @change="changePage"
+      >
+        <template #preColumns>
+          <el-table-column label="序号" width="55" align="center">
+            <template #default="scope">
+              {{ (listQuery.offset - 1) * listQuery.limit + scope.$index + 1 }}
+            </template>
+          </el-table-column>
+        </template>
+        <template #columns>
+          <el-table-column label="操作" align="center" width="120">
+            <template #default="scope">
+              <el-button type="primary" link size="small">
+                编辑 {{ scope.$index }}
+              </el-button>
+              <el-button type="danger" link size="small">
+                删除 {{ scope.$index }}
+              </el-button>
+            </template>
+          </el-table-column>
+        </template>
+      </normal-table>
+    </table-container>
+  </app-container>
 </template>
diff --git a/src/views/home/well/components/map.vue b/src/views/home/well/components/map.vue
new file mode 100644
index 0000000..5913db3
--- /dev/null
+++ b/src/views/home/well/components/map.vue
@@ -0,0 +1,26 @@
+<!--
+  Description: 闸井监测-地图
+  Author: 李亚光
+  Date: 2023-07-08
+ -->
+<script lang="ts" setup name="AlarmMap">
+import AMap from '@/components/map/index.vue'
+const $props = defineProps({
+  height: {
+    type: Number,
+    default: 0,
+  },
+})
+</script>
+
+<template>
+  <div :style="`height: ${$props.height}px`" class="map-container">
+    <a-map />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.map-container {
+  width: 100%;
+}
+</style>

diff --git a/src/App.vue b/src/App.vue
index 52ccd6e..a9268fb 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -6,7 +6,7 @@
 import useMenuStore from '@/store/modules/menu'
 
 const settingsStore = useSettingsStore()
-
+const $router = useRouter()
 const buttonConfig = ref({
   autoInsertSpace: true,
 })
@@ -81,14 +81,40 @@
 })
 
 onMounted(() => {
+  // // 浏览器访问当前位置
+  // if ('geolocation' in navigator) {
+  //   navigator.geolocation.getCurrentPosition(function (position) {
+  //     // 允许
+  //     console.log('纬度: ', position.coords.latitude)
+  //     console.log('经度: ', position.coords.longitude)
+  //   }, function (error) {
+  //     // 拒绝
+  //     console.error("Error Code = " + error.code + " - " + error.message);
+  //   })
+  // } else {
+  //   console.error("Geolocation is not supported by this browser.")
+  // }
   settingsStore.setMode(document.documentElement.clientWidth)
   window.onresize = () => {
     settingsStore.setMode(document.documentElement.clientWidth)
+    // 监听浏览器类型变化 刷新浏览器
+    const userAgent = navigator.userAgent || navigator.vendor || window.opera
+    const isMobile = /android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(userAgent)
+    if (`${isMobile ? 'mobile' : 'pc'}` !== window.localStorage.getItem('browser-type-bj-well')) {
+      // if (!window.localStorage.getItem('browser-type-bj-well')) { return }
+      console.log(`浏览器类型发生变化，由${window.localStorage.getItem('browser-type-bj-well')}变为${isMobile ? 'mobile' : 'pc'}`)
+      window.localStorage.setItem('browser-type-bj-well', `${isMobile ? 'mobile' : 'pc'}`)
+      $router.push('/')
+      setTimeout(() => {
+        window.location.reload()
+      }, 1000)
+    }
   }
   hotkeys('alt+i', () => {
     eventBus.emit('global-system-info-toggle')
   })
 })
+const browserType = window.localStorage.getItem('browser-type-bj-well') // mobile || pc
 </script>
 
 <template>
@@ -99,6 +125,6 @@
         '--g-sub-sidebar-actual-width': subSidebarActualWidth,
       }"
     />
-    <system-info />
+    <system-info v-if="browserType !== 'mobile'" />
   </el-config-provider>
 </template>
diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue
index e247e28..de24f71 100644
--- a/src/components/NormalTable/index.vue
+++ b/src/components/NormalTable/index.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup name="NormalTable">
 import type { Ref } from 'vue'
-import { ElTable } from 'element-plus'
+import { ElMessage, ElTable } from 'element-plus'
 import { defineExpose, ref } from 'vue'
 import type { TableColumn } from './table_interface'
 import TableColumnCom from './tableColumn.vue'
@@ -84,7 +84,11 @@
     type: String,
     default: 'default',
   }, // 表格大小，默认，small,mini等，与el-table条件相同
-  // 想要展示成链接的数据
+  // 是否要右击菜单
+  needContextmenu: {
+    type: Boolean,
+    default: false,
+  },
 })
 const emit = defineEmits(['change', 'selectionChange', 'rowClick', 'rowDbClick', 'multiSelect', 'filterChange', 'rowDisabled', 'handleClickFollowLink'])
 // -------定义数据--------------
@@ -148,8 +152,10 @@
 //   changeColumns()
 // })
 // 多选
+const multiSelectData = ref([])
 const handleSelectionChange = (val: any) => {
   // console.log(val)
+  multiSelectData.value = val
   emit('multiSelect', val)
 }
 // 单选选中
@@ -214,27 +220,87 @@
 const handleClickFollowLink = (row: any, title: string) => {
   emit('handleClickFollowLink', row, title)
 }
+
+// 右击当前行操作
+const clickIndex = ref(-1)
+const contextmenu = (row: any, column: any, event: Event, index: number) => {
+  if (!props.needContextmenu) { return }
+  // 阻止默认的右键菜单
+  event.preventDefault()
+  clickIndex.value = props.data.findIndex(item => item === row)
+  console.log('右击', clickIndex.value)
+  // 获取自定义菜单元素
+  var menu = document.getElementById('custom-menu')
+  // 设置自定义菜单的位置并显示
+  let positionX = event.pageX
+  let positionY = event.pageY
+  if (document.documentElement.clientHeight - event.pageY < 204) {
+    positionY = document.documentElement.clientHeight - 204 + 102
+  }
+  if (document.documentElement.clientWidth - event.pageX < 146) {
+    positionX = document.documentElement.clientWidth - 146
+  }
+  menu.style.top = `${positionY - 102}px`
+  menu.style.left = `${positionX}px`
+  menu.style.display = 'block'
+}
+// 点击其他位置隐藏自定义菜单
+document.addEventListener('click', () => {
+  document.getElementById('custom-menu').style.display = 'none'
+})
+// 添加行
+const costomAddRow = (type: string) => {
+  if (type === 'current-pre') {
+    // 当前行前方插入
+    props.data.splice(clickIndex.value, 0, JSON.parse(JSON.stringify(props.data[clickIndex.value])))
+  }
+  else if (type === 'current-next') {
+    // 当前行后方方插入
+    props.data.splice(clickIndex.value + 1, 0, JSON.parse(JSON.stringify(props.data[clickIndex.value])))
+  }
+  else if (type === 'list-head') {
+    // 列表头行插入
+    props.data.splice(0, 0, JSON.parse(JSON.stringify(props.data[clickIndex.value])))
+  }
+  else if (type === 'list-tail') {
+    // 列表尾行插入
+    props.data.splice(props.data.length, 0, JSON.parse(JSON.stringify(props.data[clickIndex.value])))
+  }
+  else if (type === 'select-pre') {
+    // 选中行前方插入
+    if (!multiSelectData.value.length) {
+      ElMessage.warning('未选择数据')
+      return
+    }
+    multiSelectData.value.forEach((item, index) => {
+      const dataIndex = props.data.findIndex(citem => item === citem)
+      props.data.splice(dataIndex, 0, JSON.parse(JSON.stringify(item)))
+    })
+    table.value!.clearSelection()
+  }
+  else if (type === 'select-next') {
+    // 选中行后方插入
+    if (!multiSelectData.value.length) {
+      ElMessage.warning('未选择数据')
+      return
+    }
+    multiSelectData.value.forEach((item, index) => {
+      const dataIndex = props.data.findIndex(citem => item === citem)
+      props.data.splice(dataIndex + 1, 0, JSON.parse(JSON.stringify(item)))
+    })
+    table.value!.clearSelection()
+  }
+  clickIndex.value = -1
+}
 </script>
 
 <template>
   <div id="normal-table-com">
     <el-table
-      id="print"
-      ref="table"
-      v-loading="listLoading"
-      :data="data"
-      :height="height"
-      border
-      stripe
-      :size="size"
-      style="width: 100%;"
-      :row-key="(row) => { return row.id || row.index }"
-      :span-method="mergeTableRow"
-      @selection-change="handleSelectionChange"
-      @select="selectClick"
-      @row-click="rowClick"
-      @row-dblclick="rowDbClick"
-      @filter-change="filterChange"
+      id="print" ref="table" v-loading="listLoading" :data="data" :height="height" border stripe :size="size"
+      style="width: 100%;" :row-key="(row) => { return row.id || row.index }" :span-method="mergeTableRow"
+      @selection-change="handleSelectionChange" @select="selectClick" @row-click="rowClick" @row-dblclick="rowDbClick"
+      @filter-change="filterChange" @row-contextmenu="contextmenu"
     >
       <slot name="preColumns" />
 
@@ -243,45 +309,48 @@
           <el-radio v-model="singleChecked" :label="scope.row.id" class="radio" @change="radioChange" />
         </template>
       </el-table-column>
-      <el-table-column v-if="isShowmultiSelect && isMulti" :reserve-selection="true" type="selection" width="38" :selectable="selectable" fixed="left" />
+      <el-table-column
+        v-if="isShowmultiSelect && isMulti" :reserve-selection="true" type="selection" width="38"
+        :selectable="selectable" fixed="left"
+      />
       <template v-for="column of columns" :key="column.value">
         <el-table-column
-          v-if="!column.isFilters"
-          :label="column.text"
-          :prop="column.value"
-          :width="column.width"
-          :align="column.align"
-          :show-overflow-tooltip="column.showOverflow ? column.showOverflow : true"
+          v-if="!column.isFilters" :label="column.text" :prop="column.value" :width="column.width"
+          :align="column.align" :show-overflow-tooltip="column.showOverflow ? column.showOverflow : true"
           :fixed="column.fixed"
         >
           <template #default="scope">
-            <span v-if="!column.filter && !column.isLink" :style="column.styleFilter ? column.styleFilter(scope.row) : ''">{{ scope.row[column.value] }}</span>
-            <span v-if="column.filter && !column.isLink" :style="column.styleFilter ? column.styleFilter(scope.row) : ''">{{ column.filter(scope.row) }}</span>
+            <span
+              v-if="!column.filter && !column.isLink"
+              :style="column.styleFilter ? column.styleFilter(scope.row) : ''"
+            >{{ scope.row[column.value] }}</span>
+            <span
+              v-if="column.filter && !column.isLink"
+              :style="column.styleFilter ? column.styleFilter(scope.row) : ''"
+            >{{ column.filter(scope.row) }}</span>
             <div v-if="column.isLink">
               <show-photo v-for="(item, index) in scope.row.fileArr" :key="index" :minio-file-name="item" /><br>
             </div>
             <div v-if="column.followLink">
-              <div v-for="(item, index) in scope.row.followLinkArr" :key="index" @click="handleClickFollowLink(scope.row, item)">
+              <div
+                v-for="(item, index) in scope.row.followLinkArr" :key="index"
+                @click="handleClickFollowLink(scope.row, item)"
+              >
                 <span :class="item !== '/' ? 'follow-link' : ''">{{ item }}</span>
               </div>
             </div>
           </template>
         </el-table-column>
         <el-table-column
-          v-if="column.isFilters"
-          :label="column.text"
-          :prop="column.value"
-          :width="column.width"
-          :align="column.align"
-          :show-overflow-tooltip="column.showOverflow ? column.showOverflow : true"
-          :fixed="column.fixed"
-          :column-key="column.value"
-          :filters="column.filters"
-          :filter-multiple="false"
+          v-if="column.isFilters" :label="column.text" :prop="column.value" :width="column.width"
+          :align="column.align" :show-overflow-tooltip="column.showOverflow ? column.showOverflow : true"
+          :fixed="column.fixed" :column-key="column.value" :filters="column.filters" :filter-multiple="false"
         >
           <template #default="scope">
-            <span v-if="!column.filter" :style="column.styleFilter ? column.styleFilter(scope.row) : ''">{{ scope.row[column.value] }}</span>
-            <span v-else :style="column.styleFilter ? column.styleFilter(scope.row) : ''">{{ column.filter(scope.row) }}</span>
+            <span v-if="!column.filter" :style="column.styleFilter ? column.styleFilter(scope.row) : ''">{{
+              scope.row[column.value] }}</span>
+            <span v-else :style="column.styleFilter ? column.styleFilter(scope.row) : ''">{{ column.filter(scope.row)
+            }}</span>
           </template>
         </el-table-column>
       </template>
@@ -290,19 +359,67 @@
     </el-table>
     <div v-if="props.pagination" style="width: 100%;margin-top: 10px;">
       <el-pagination
-        :current-page="props.query.offset"
-        :page-sizes="props.pageSizes as number[]"
-        :page-size="props.query.limit"
-        :total="props.total"
-        layout="total, sizes, prev, pager, next"
-        @size-change="handleSizeChange"
-        @current-change="handleCurrentChange"
+        :current-page="props.query.offset" :page-sizes="props.pageSizes as number[]"
+        :page-size="props.query.limit" :total="props.total" layout="total, sizes, prev, pager, next"
+        @size-change="handleSizeChange" @current-change="handleCurrentChange"
       />
     </div>
+    <!-- 自定义菜单 -->
+    <div id="custom-menu">
+      <p class="menu-item" @click="costomAddRow('current-pre')">
+        当前行前方插入
+      </p>
+      <p class="menu-item" @click="costomAddRow('current-next')">
+        当前行后方插入
+      </p>
+      <p class="menu-item" @click="costomAddRow('list-head')">
+        列表头行插入
+      </p>
+      <p class="menu-item" @click="costomAddRow('list-tail')">
+        列表尾行插入
+      </p>
+      <p v-if="isShowmultiSelect && isMulti" class="menu-item" @click="costomAddRow('select-pre')">
+        选中行前方插入
+      </p>
+      <!--  -->
+      <p v-if="isShowmultiSelect && isMulti" class="menu-item" @click="costomAddRow('select-next')">
+        选中行后方插入
+      </p>
+    </div>
   </div>
 </template>
 
 <style lang="scss" scoped>
+#custom-menu {
+  display: none;
+  position: fixed;
+  background-color: #fff;
+  border-radius: 5px;
+  padding: 5px 0;
+  z-index: 1000;
+  border: 1px solid #c8c9cc;
+  box-shadow: 0 0 12px rgb(0 0 0 / 12%);
+
+  .menu-item {
+    display: flex;
+    align-items: center;
+    white-space: nowrap;
+    list-style: none;
+    line-height: 22px;
+    padding: 5px 16px;
+    margin: 0;
+    // font-size: var(--el-font-size-base);
+    color: #606266;
+    cursor: pointer;
+    outline: none;
+
+    &:hover {
+      background-color: #ecf5ff;
+      color: #409eff;
+    }
+  }
+}
+
 #normal-table-com {
   width: 100%;
 }
diff --git a/src/components/TableContainer/index.vue b/src/components/TableContainer/index.vue
index 0c07be6..87b1567 100644
--- a/src/components/TableContainer/index.vue
+++ b/src/components/TableContainer/index.vue
@@ -71,16 +71,18 @@
   <config-dialog ref="configRef" @confirm="confirmColumns" />
   <div class="table-container">
     <div class="button-area">
-      <div v-if="titleShow" :class="props.isCenter ? 'title-center' : 'title-left'">
-        <el-icon v-if="isConfig" :size="21" class="icon-menu" @click="config">
-          <menu />
-        </el-icon>
-        <span>
-          {{ title }}
-        </span>
-      </div>
-      <div class="button-left">
-        <slot name="btns-left" />
+      <div style="display: flex;align-items: center;">
+        <div v-if="titleShow" :class="props.isCenter ? 'title-center' : 'title-left'">
+          <el-icon v-if="isConfig" :size="21" class="icon-menu" @click="config">
+            <menu />
+          </el-icon>
+          <span>
+            {{ title }}
+          </span>
+        </div>
+        <div class="button-left">
+          <slot name="btns-left" />
+        </div>
       </div>
       <div class="button-right">
         <slot name="btns-right" />
diff --git a/src/components/map/index.vue b/src/components/map/index.vue
index 55e37da..620c813 100644
--- a/src/components/map/index.vue
+++ b/src/components/map/index.vue
@@ -8,7 +8,7 @@
 import { styleType } from 'element-plus/es/components/table-v2/src/common'
 
 const $props = defineProps({
-  // 初始图层 normal satellite
+  // 初始图层 normal satellite dark
   layer: {
     type: String,
     default: 'normal',
@@ -35,8 +35,8 @@
 const layer = ref()
 // 图层标识
 const layerFlag = ref('normal')
-// const publicPath = import.meta.env.BASE_URL
-// console.log(publicPath, 'publicPath')
+const publicPath = import.meta.env.BASE_URL
+console.log(publicPath, 'publicPath')
 // -------------------------------------初始化地图--------------------------------------------------
 const initMap = () => {
   AMapLoader.load({
@@ -61,18 +61,22 @@
         map.value.setFeatures(['bg', 'building'])
         layerFlag.value = 'satellite'
       }
+      else if ($props.layer === 'dark') {
+        // 深色图层
+        map.value.setMapStyle('amap://styles/darkblue')
+      }
       // 地图图块加载完成后触发
       map.value.on('complete', () => {
         //  修改loading状态
         console.log('地图加载完成')
-        $emits('complete')
+        $emits('complete', AMap.value)
         loading.value = false
       })
       // 地图绑定右击事件
       map.value.on('mousedown', clickHandler)
     })
     .catch((e) => {
-      console.log('地图加载失败')
+      console.log(e, '地图加载失败')
     })
 }
 // ------------------------------------------------------------------------------------------------
@@ -156,7 +160,7 @@
 }
 // ------------------------------------------------------------------------------------------------
 
-// -------------------------------------标记本文操作--------------------------------------------------
+// -------------------------------------标记文本操作--------------------------------------------------
 // 标记文本数组
 const textAllList = ref<any>([])
 // 添加标记文字
@@ -282,6 +286,35 @@
   lineAllList.value = []
 }
 // ------------------------------------------------------------------------------------------------
+
+// -----------------------------------海量点标记操作------------------------------------------------
+// 点标记(海量点)数组
+const massMarksAllList = ref<any>([])
+// 添加点标记(海量点)
+const addMassMarks = (data: any) => {
+  /**
+     * data
+     * path: 折线点位数据  [{lnglat: [116.402394,39.937182],name: "南锣鼓巷", style: 1,}, ]
+     * style 样式
+     * zooms: 在指定地图缩放级别范围内展示海量点图层
+     * zIndex: 海量点图层叠加的顺序
+      */
+  var massMarks = new AMap.value.MassMarks(data.path, {
+    zIndex: data.zIndex, // 海量点图层叠加的顺序
+    zooms: data.zooms, // 在指定地图缩放级别范围内展示海量点图层
+    style: data.style, // 设置样式对象
+  })
+  massMarksAllList.value.push(massMarks)
+  massMarks.setMap(map)
+}
+// 移除点标记(海量点)
+const removeMassMarks = () => {
+  massMarksAllList.value.forEach((item: any) => {
+    item.setMap(null)
+  })
+  massMarksAllList.value = []
+}
+// ------------------------------------------------------------------------------------------------
 onMounted(() => {
   loading.value = true
   initMap()
@@ -302,6 +335,8 @@
   removeMarker, // 移除点标记 (一般点标记)
   addPolyline, // 添加折线
   removePolyline, // 移除折线
+  addMassMarks, // 添加点标记(海量点)
+  removeMassMarks, // 移除点标记(海量点)
 })
 </script>
 
diff --git a/src/layouts/components/Header/mobile.vue b/src/layouts/components/Header/mobile.vue
new file mode 100644
index 0000000..a27de4b
--- /dev/null
+++ b/src/layouts/components/Header/mobile.vue
@@ -0,0 +1,53 @@
+<!-- 移动端头部 -->
+<script lang="ts" setup name="HeaderMobile">
+import { ArrowLeftBold, House } from '@element-plus/icons-vue'
+const route = useRoute()
+const router = useRouter()
+const goBack = (type: 'back' | 'home') => {
+  if (type === 'back') {
+    router.go(-1)
+  }
+  else if (type === 'home') {
+    router.push('/')
+  }
+}
+</script>
+
+<template>
+  <div>
+    <div v-if="route.meta.isHeader" class="header-mobile">
+      <div v-if="route.meta.isBack">
+        <el-icon :size="25" @click="goBack('back')">
+          <arrow-left-bold />
+        </el-icon>
+      </div>
+      <div v-else style="width: 25px;" />
+      <div> {{ route.meta.title }}</div>
+      <el-icon v-if="route.meta.isHome" :size="25" @click="goBack('home')">
+        <house />
+      </el-icon>
+      <div v-else style="width: 25px;" />
+    </div>
+    <div v-if="route.meta.isHeader" class="occupying" />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.header-mobile {
+  width: 100%;
+  background-color: #70b4ff;
+  height: 35px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 10px;
+  position: fixed;
+  top: 0;
+}
+
+.occupying {
+  height: 35px;
+  background-color: transparent;
+  width: 100%;
+}
+</style>
diff --git a/src/layouts/mobile.vue b/src/layouts/mobile.vue
new file mode 100644
index 0000000..c6235a4
--- /dev/null
+++ b/src/layouts/mobile.vue
@@ -0,0 +1,47 @@
+<!-- 移动端基础布局组件 -->
+<script lang="ts" setup name="LayoutMobile">
+import headerMobile from './components/Header/mobile.vue'
+import useKeepAliveStore from '@/store/modules/keepAlive'
+const keepAliveStore = useKeepAliveStore()
+const routeInfo = useRoute()
+</script>
+
+<template>
+  <div class="layout">
+    <div id="app-main">
+      <!-- 头部 -->
+      <header-mobile />
+      <div class="wrapper">
+        <div class="main-container">
+          <div class="main">
+            <router-view v-slot="{ Component, route }">
+              <transition name="main" mode appear>
+                <keep-alive :include="keepAliveStore.list">
+                  <component :is="Component" :key="route.fullPath" />
+                </keep-alive>
+              </transition>
+            </router-view>
+          </div>
+          <copyright />
+        </div>
+      </div>
+      <el-backtop :right="20" :bottom="20" title="回到顶部" />
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.main {
+  overflow-x: hidden;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+
+  // firefox隐藏滚动条
+  scrollbar-width: none;
+
+  // chrome隐藏滚动条
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}
+</style>
diff --git a/src/main.ts b/src/main.ts
index 07c50a2..cb80c5d 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -19,35 +19,35 @@
 import { downloadAndInstall } from '@/iconify-ep'
 import { hasPermission } from '@/utils/composables/permission'
 import buttonPerm from '@/utils/buttonPerm'
-// 引入打印插件
 if (useSettingsStore().app.iconifyOfflineUse) {
   downloadAndInstall()
 }
-const app = createApp(App)
-app.config.globalProperties.hasPerm = hasPermission
-app.config.globalProperties.buttonPerm = buttonPerm
-app.config.globalProperties.dayjs = dayjs
-app.use(print)
-app.use(ElementPlus)
-app.use(pinia)
-app.use(router)
-for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
-  app.component(key, component)
-}
-directive(app)
 
 axios.get('./config/config.json', {
   headers: {
     'Cache-Control': 'no-cache',
   },
 }).then((result) => {
+  const app = createApp(App)
   console.log('get config')
+  console.log(window.localStorage.getItem('browser-type-bj-well'), 'mian中获取浏览器类型')
   console.log(result)
   window.localStorage.setItem('url-bj-well', result.data.baseUrl)
   window.localStorage.setItem('securityJsCode', result.data.securityJsCode)
   window.localStorage.setItem('JsKey', result.data.JsKey)
   request.defaults.baseURL = result.data.baseUrl // 设置默认请求网址
   app.config.globalProperties.config = result.data
+  app.config.globalProperties.hasPerm = hasPermission
+  app.config.globalProperties.buttonPerm = buttonPerm
+  app.config.globalProperties.dayjs = dayjs
+  app.use(print)
+  app.use(ElementPlus)
+  app.use(pinia)
+  app.use(router)
+  for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
+    app.component(key, component)
+  }
+  directive(app)
   app.mount('#app')
 }).catch((error) => {
   console.error(`get baseConfig error...${error}`)
diff --git a/src/router/modules/mobile.ts b/src/router/modules/mobile.ts
new file mode 100644
index 0000000..77618c1
--- /dev/null
+++ b/src/router/modules/mobile.ts
@@ -0,0 +1,31 @@
+// 移动端路由
+import type { Route } from '@/global'
+
+const Layout = () => import('@/layouts/mobile.vue')
+
+const routes: Route.recordRaw[] = [
+  {
+    path: '/home',
+    component: Layout,
+    redirect: '/home/index',
+    name: 'Home',
+    meta: {
+      title: '首页',
+    },
+    children: [
+      {
+        path: 'index',
+        component: () => import('@/views/mobile/example1/index.vue'),
+        name: 'HomeIndex',
+        meta: {
+          title: '首页',
+          isHeader: true, // 是否需要头部
+          isBack: true, // 是否需要返回按钮
+          isHome: false, // 是否需要回到首页按钮
+        },
+      },
+    ],
+  },
+]
+
+export default routes
diff --git a/src/router/routes.ts b/src/router/routes.ts
index ae91d6e..b1fdc27 100644
--- a/src/router/routes.ts
+++ b/src/router/routes.ts
@@ -2,6 +2,7 @@
 import generatedRoutes from 'virtual:generated-pages'
 // import commonRoute from './modules/system'
 import homeRoute from './modules/home'
+import mobileRoute from './modules/mobile'
 import type { Route } from '@/global'
 import useSettingsStore from '@/store/modules/settings'
 
@@ -31,12 +32,15 @@
     },
   },
 ]
-
+const userAgent = navigator.userAgent || navigator.vendor || window.opera
+const isMobile = /android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(userAgent)
+window.localStorage.setItem('browser-type-bj-well', `${isMobile ? 'mobile' : 'pc'}`)
+console.log(window.localStorage.getItem('browser-type-bj-well'), '路由中获取浏览器类型')
 // 系统路由
 const systemRoutes: Route.recordRaw[] = [
   {
     path: '/dashboard',
-    component: () => import('@/layouts/index.vue'),
+    component: isMobile ? null : () => import('@/layouts/index.vue'),
     meta: {
       title: () => useSettingsStore().dashboard.title,
       breadcrumb: false,
@@ -101,19 +105,27 @@
     ],
   },
 ]
-
 // 动态路由（异步路由、导航栏路由）
-const asyncRoutes: Route.recordMainRaw[] = [
-  {
-    meta: {
-      title: '',
-      icon: '',
+const asyncRoutes: Route.recordMainRaw[] = isMobile
+  ? [{ // 移动端路由
+      meta: {
+        title: '',
+        icon: '',
+      },
+      children: [
+        ...mobileRoute,
+      ],
+    }]
+  : [{ // pc端路由
+      meta: {
+        title: '',
+        icon: '',
+      },
+      children: [
+        ...homeRoute,
+      ],
     },
-    children: [
-      ...homeRoute,
-    ],
-  },
-]
+    ]
 
 const constantRoutesByFilesystem = generatedRoutes.filter((item) => {
   return item.meta?.enabled !== false && item.meta?.constant === true
diff --git "a/src/views/\133...all\135.vue" "b/src/views/\133...all\135.vue"
index 91af7e1..98ca1f9 100644
--- "a/src/views/\133...all\135.vue"
+++ "b/src/views/\133...all\135.vue"
@@ -51,30 +51,65 @@
 </template>
 
 <style lang="scss" scoped>
-.notfound {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  width: 700px;
+@media (min-width: 700px) {
+  .notfound {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 700px;
 
-  @include position-center(xy);
+    @include position-center(xy);
 
-  .icon {
-    width: 400px;
-    height: 400px;
-  }
-
-  .content {
-    h1 {
-      margin: 0;
-      font-size: 72px;
-      color: var(--el-text-color-primary);
+    .icon {
+      width: 400px;
+      height: 400px;
     }
 
-    .desc {
-      margin: 20px 0 30px;
-      font-size: 20px;
-      color: var(--el-text-color-secondary);
+    .content {
+      h1 {
+        margin: 0;
+        font-size: 72px;
+        color: var(--el-text-color-primary);
+      }
+
+      .desc {
+        margin: 20px 0 30px;
+        font-size: 20px;
+        color: var(--el-text-color-secondary);
+      }
+    }
+  }
+}
+
+@media (max-width: 700px) {
+  .notfound {
+    // display: flex;
+    // align-items: center;
+    // justify-content: space-between;
+    // width: 700px;
+    overflow: hidden;
+
+    @include position-center(xy);
+
+    .icon {
+      width: 350px;
+      height: 350px;
+    }
+
+    .content {
+      text-align: center !important;
+
+      h1 {
+        margin: 0;
+        font-size: 72px;
+        color: var(--el-text-color-primary);
+      }
+
+      .desc {
+        margin: 20px 0 30px;
+        font-size: 20px;
+        color: var(--el-text-color-secondary);
+      }
     }
   }
 }
diff --git a/src/views/home/dashboard/index.vue b/src/views/home/dashboard/index.vue
index 3fc5cec..a4b5f57 100644
--- a/src/views/home/dashboard/index.vue
+++ b/src/views/home/dashboard/index.vue
@@ -206,10 +206,10 @@
           <el-scrollbar height="200px">
             <div class="message-container">
               <div v-for="item in messageData" :key="item" class="message-item">
-                <span class="left">
+                <div class="left">
                   <span class="type">【{{ item.alarmTypeName }}】</span>
                   <span class="content">{{ item.alarmContent }}</span>
-                </span>
+                </div>
                 <span class="time">{{ item.alarmTime }}</span>
               </div>
             </div>
@@ -325,6 +325,9 @@
           flex-direction: column;
           text-align: center;
           width: 60%;
+          overflow: hidden;
+          white-space: nowrap;
+          text-overflow: ellipsis;
         }
       }
     }
@@ -341,24 +344,30 @@
         display: flex;
         justify-content: space-between;
         padding: 0 10px;
+        width: 100%;
 
         .left {
-          display: inline;
           width: 75%;
+          display: flex;
+          align-items: center;
+          overflow: hidden;
+          white-space: nowrap;
+          text-overflow: ellipsis;
         }
 
         .content {
           display: inline-block;
           padding-left: 10px;
           width: 65%;
-          // overflow: hidden;
-          // white-space: nowrap;
-          // text-overflow: ellipsis;
+          overflow: hidden;
+          white-space: nowrap;
+          text-overflow: ellipsis;
         }
 
         .time {
           font-size: 16px;
           color: #7c7777;
+          white-space: nowrap;
         }
       }
     }
diff --git a/src/views/home/device/type/index.vue b/src/views/home/device/type/index.vue
index ab687f7..c83bbc6 100644
--- a/src/views/home/device/type/index.vue
+++ b/src/views/home/device/type/index.vue
@@ -1,3 +1,142 @@
+<!--
+  Description: 设备管理-设备类型管理
+  Author: 李亚光
+  Date: 2023-07-15
+ -->
+<script lang="ts" setup name="DeviceTypeManage">
+// 表格数据
+const list = ref([
+  {
+    deviceType: '11',
+    deviceTypeName: '燃气智能监测终端',
+    desc: '燃气智能监测终端',
+    monitor: '井下燃气浓度',
+    alarmLimit: '是',
+    alarmLow: '是',
+    isEnable: '是',
+    time: '',
+  },
+  {
+    deviceType: '11',
+    deviceTypeName: '燃气智能监测终端',
+    desc: '燃气智能监测终端',
+    monitor: '井下燃气浓度',
+    alarmLimit: '是',
+    alarmLow: '是',
+    isEnable: '是',
+    time: '',
+  },
+  {
+    deviceType: '12',
+    deviceTypeName: '场站监测云台',
+    desc: '场站监测云台',
+    monitor: '场站内视频、燃气浓度',
+    alarmLimit: '是',
+    alarmLow: '是',
+    isEnable: '是',
+    time: '',
+  },
+])
+const total = ref(0)
+// 初始展示列
+const columns = ref<any>([
+  { text: '设备类型代号', value: 'deviceType', align: 'center' },
+  { text: '设备类型', value: 'deviceTypeName', align: 'center' },
+  { text: '描述', value: 'desc', align: 'center' },
+  { text: '监控内容', value: 'monitor', align: 'center' },
+  { text: '是否需要报警上限', value: 'alarmLimit', align: 'center' },
+  { text: '是否需要报警下限', value: 'alarmLow', align: 'center' },
+  { text: '是否启用', value: 'isEnable', align: 'center' },
+  { text: '最新操作时间', value: 'time', align: 'center' },
+])
+// 最终展示列
+const columnsConfig = ref([])
+// 修改列
+const editColumns = (data: any) => {
+  columnsConfig.value = data
+}
+const loadingTable = ref(true)
+//  查询条件
+const listQuery = ref({
+  limit: 20,
+  offset: 1,
+})
+// 查询数据
+const fetchData = () => {
+  setTimeout(() => {
+    loadingTable.value = false
+  })
+}
+// 重置查询条件f
+const reset = () => {
+
+}
+// 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
+const changePage = (val: { size: number; page: number }) => {
+  if (val && val.size) {
+    listQuery.value.limit = val.size
+  }
+  if (val && val.page) {
+    listQuery.value.offset = val.page
+  }
+  fetchData()
+}
+
+onMounted(() => {
+  fetchData()
+})
+</script>
+
 <template>
-  设备类型管理
+  <!-- 布局 -->
+  <app-container>
+    <!-- 筛选条件 -->
+    <search-area :need-clear="true" @search="fetchData" @clear="reset">
+      <search-item>
+        <el-select v-model="listQuery.keywords" placeholder="设备类型" clearable />
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.keywords" placeholder="是否启用" clearable />
+      </search-item>
+    </search-area>
+    <!-- 表头标题 -->
+    <table-container
+      :is-config="true" config-title="device-type" :columns="columns" :config-columns="columnsConfig"
+      :edit="editColumns"
+    >
+      <template #btns-right>
+        <!-- 操作 -->
+        <div>
+          <el-button type="primary">
+            新建
+          </el-button>
+        </div>
+      </template>
+      <!-- 查询结果Table显示 -->
+      <normal-table
+        :data="list" :total="total" :columns="columnsConfig" :query="listQuery" :list-loading="loadingTable"
+        @change="changePage"
+      >
+        <template #preColumns>
+          <el-table-column label="序号" width="55" align="center">
+            <template #default="scope">
+              {{ (listQuery.offset - 1) * listQuery.limit + scope.$index + 1 }}
+            </template>
+          </el-table-column>
+        </template>
+        <template #columns>
+          <el-table-column label="操作" align="center" width="120">
+            <template #default="scope">
+              <el-button type="primary" link size="small">
+                编辑 {{ scope.$index }}
+              </el-button>
+              <el-button type="danger" link size="small">
+                删除 {{ scope.$index }}
+              </el-button>
+            </template>
+          </el-table-column>
+        </template>
+      </normal-table>
+    </table-container>
+  </app-container>
 </template>
diff --git a/src/views/home/well/components/map.vue b/src/views/home/well/components/map.vue
new file mode 100644
index 0000000..5913db3
--- /dev/null
+++ b/src/views/home/well/components/map.vue
@@ -0,0 +1,26 @@
+<!--
+  Description: 闸井监测-地图
+  Author: 李亚光
+  Date: 2023-07-08
+ -->
+<script lang="ts" setup name="AlarmMap">
+import AMap from '@/components/map/index.vue'
+const $props = defineProps({
+  height: {
+    type: Number,
+    default: 0,
+  },
+})
+</script>
+
+<template>
+  <div :style="`height: ${$props.height}px`" class="map-container">
+    <a-map />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.map-container {
+  width: 100%;
+}
+</style>
diff --git a/src/views/home/well/index.vue b/src/views/home/well/index.vue
index 439816e..cc2059b 100644
--- a/src/views/home/well/index.vue
+++ b/src/views/home/well/index.vue
@@ -1,3 +1,230 @@
+<!--
+  Description: 闸井监测
+  Author: 李亚光
+  Date: 2023-07-12
+ -->
+<script lang="ts" setup name="WellMonitor">
+import { ElMessage } from 'element-plus'
+import { ArrowUpBold } from '@element-plus/icons-vue'
+import MapCom from './components/map.vue'
+// 表格数据
+const list = ref([
+  {
+    wellId: 'N57X508',
+    wellNo: '01110200745927',
+    name: '中压A闸1',
+    dept: '第一分公司/运维1所/1班',
+    property: '富源里小区',
+    manage: '自管',
+    use: '投用',
+    defence: '布防',
+    status: '正常',
+    device: '1',
+    tag: '',
+  },
+  {
+    wellId: 'N57X508',
+    wellNo: '01110200745927',
+    name: '中压A闸1',
+    dept: '第一分公司/运维1所/1班',
+    property: '富源里小区',
+    manage: '自管',
+    use: '停用',
+    defence: '撤防',
+    status: '正常',
+    device: '1',
+    tag: '',
+  },
+])
+const total = ref(0)
+// 初始展示列
+const columns = ref<any>([
+  { text: '闸井位号', value: 'wellId', align: 'center' },
+  { text: '闸井编号', value: 'wellNo', align: 'center' },
+  { text: '闸井名称', value: 'name', align: 'center' },
+  { text: '管理单位', value: 'dept', align: 'center' },
+  { text: '产权单位', value: 'property', align: 'center' },
+  { text: '管理方式', value: 'manage', align: 'center' },
+  { text: '使用状态', value: 'use', align: 'center' },
+  { text: '布防状态', value: 'defence', align: 'center' },
+  { text: '状态', value: 'status', align: 'center' },
+  { text: '感知设备', value: 'device', align: 'center' },
+  { text: '标签', value: 'tag', align: 'center' },
+])
+// 最终展示列
+const columnsConfig = ref([])
+// 修改列
+const editColumns = (data: any) => {
+  columnsConfig.value = data
+}
+const loadingTable = ref(true)
+//  查询条件
+const listQuery = ref({
+  limit: 20,
+  offset: 1,
+})
+// 开始结束时间
+const datetimerange = ref()
+watch(() => datetimerange.value, (newVal) => {
+  // listQuery.createTimeStart = ''
+  // listQuery.createTimeEnd = ''
+  if (Array.isArray(newVal)) {
+    if (newVal.length) {
+      // listQuery.createTimeStart = `${newVal[0]} 00:00:00`
+      // listQuery.createTimeEnd = `${newVal[1]} 23:59:59`
+    }
+  }
+})
+// 查询数据
+const fetchData = () => {
+  setTimeout(() => {
+    loadingTable.value = false
+  })
+}
+// 重置查询条件f
+const reset = () => {
+
+}
+// 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
+const changePage = (val: { size: number; page: number }) => {
+  if (val && val.size) {
+    listQuery.value.limit = val.size
+  }
+  if (val && val.page) {
+    listQuery.value.offset = val.page
+  }
+  fetchData()
+}
+
+onMounted(() => {
+  fetchData()
+})
+
+// 表格标识  地图或普通
+const tableFlag = ref('normal')
+const switchMode = (type: string) => {
+  if (!list.value.length) {
+    ElMessage.warning('暂无数据')
+    return
+  }
+  tableFlag.value = type
+}
+</script>
+
 <template>
-  闸井监测
+  <!-- 布局 -->
+  <app-container>
+    <!-- 地图 -->
+    <map-com v-if="tableFlag === 'map'" :height="350" />
+    <div v-if="tableFlag === 'map'" class="icon" @click="switchMode('normal')">
+      <el-icon :size="25">
+        <arrow-up-bold />
+      </el-icon>
+    </div>
+    <!-- 筛选条件 -->
+    <search-area :need-clear="true" @search="fetchData" @clear="reset">
+      <search-item>
+        <el-input v-model.trim="listQuery.keywords" placeholder="闸井位号" clearable />
+      </search-item>
+      <search-item>
+        <el-input v-model.trim="listQuery.keywords" placeholder="闸井编号" clearable />
+      </search-item>
+      <search-item>
+        <el-input v-model.trim="listQuery.keywords" placeholder="闸井编号" clearable />
+      </search-item>
+      <search-item>
+        <dept-select v-model="listQuery.keywords" placeholder="管理单位" :clearable="true" />
+      </search-item>
+      <search-item>
+        <el-input v-model.trim="listQuery.keywords" placeholder="产权单位" clearable />
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.keywords" placeholder="管理方式" clearable />
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.keywords" placeholder="使用状态" clearable />
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.keywords" placeholder="布防状态" clearable />
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.keywords" placeholder="监控状态" clearable />
+      </search-item>
+      <search-item>
+        <el-input v-model.trim="listQuery.keywords" placeholder="标签" clearable />
+      </search-item>
+    </search-area>
+    <!-- 表头标题 -->
+    <table-container
+      :is-config="true" config-title="well-monitor" :columns="columns" :config-columns="columnsConfig"
+      :edit="editColumns"
+    >
+      <template #btns-left>
+        <!-- 操作 -->
+        <div v-if="tableFlag === 'normal'" style="margin-left: 15px;">
+          <el-button type="primary" plain @click="switchMode('map')">
+            切换地图模式
+          </el-button>
+        </div>
+      </template>
+      <template #btns-right>
+        <!-- 操作 -->
+        <div>
+          <el-button type="primary">
+            导出
+          </el-button>
+        </div>
+      </template>
+      <!-- 查询结果Table显示 -->
+      <normal-table
+        :data="list" :total="total" :columns="columnsConfig" :query="listQuery" :list-loading="loadingTable"
+        @change="changePage"
+      >
+        <template #preColumns>
+          <!-- <el-table-column label="选择" width="55" align="center">
+              <template #default="scope">
+                <el-radio v-model="select" :label="scope.$index + 1" class="radio" />
+              </template>
+  </el-table-column> -->
+          <el-table-column label="序号" width="55" align="center">
+            <template #default="scope">
+              {{ (listQuery.offset - 1) * listQuery.limit + scope.$index + 1 }}
+            </template>
+          </el-table-column>
+        </template>
+        <template #columns>
+          <el-table-column label="布/撤防" align="center" width="80">
+            <template #default="scope">
+              <el-button type="primary" link size="small">
+                布防 {{ scope.$index }}
+              </el-button>
+            </template>
+          </el-table-column>
+          <el-table-column label="操作" align="center" width="120">
+            <template #default="scope">
+              <el-button type="primary" link size="small">
+                查看 {{ scope.$index }}
+              </el-button>
+              <el-button type="primary" link size="small">
+                编辑 {{ scope.$index }}
+              </el-button>
+            </template>
+          </el-table-column>
+        </template>
+      </normal-table>
+    </table-container>
+  </app-container>
 </template>
+
+<style lang="scss" scoped>
+.icon {
+  position: absolute;
+  top: 344px;
+  left: 50%;
+  transform: translateX(-50%);
+
+  &:hover {
+    cursor: pointer;
+  }
+}
+</style>

diff --git a/src/App.vue b/src/App.vue
index 52ccd6e..a9268fb 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -6,7 +6,7 @@
 import useMenuStore from '@/store/modules/menu'
 
 const settingsStore = useSettingsStore()
-
+const $router = useRouter()
 const buttonConfig = ref({
   autoInsertSpace: true,
 })
@@ -81,14 +81,40 @@
 })
 
 onMounted(() => {
+  // // 浏览器访问当前位置
+  // if ('geolocation' in navigator) {
+  //   navigator.geolocation.getCurrentPosition(function (position) {
+  //     // 允许
+  //     console.log('纬度: ', position.coords.latitude)
+  //     console.log('经度: ', position.coords.longitude)
+  //   }, function (error) {
+  //     // 拒绝
+  //     console.error("Error Code = " + error.code + " - " + error.message);
+  //   })
+  // } else {
+  //   console.error("Geolocation is not supported by this browser.")
+  // }
   settingsStore.setMode(document.documentElement.clientWidth)
   window.onresize = () => {
     settingsStore.setMode(document.documentElement.clientWidth)
+    // 监听浏览器类型变化 刷新浏览器
+    const userAgent = navigator.userAgent || navigator.vendor || window.opera
+    const isMobile = /android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(userAgent)
+    if (`${isMobile ? 'mobile' : 'pc'}` !== window.localStorage.getItem('browser-type-bj-well')) {
+      // if (!window.localStorage.getItem('browser-type-bj-well')) { return }
+      console.log(`浏览器类型发生变化，由${window.localStorage.getItem('browser-type-bj-well')}变为${isMobile ? 'mobile' : 'pc'}`)
+      window.localStorage.setItem('browser-type-bj-well', `${isMobile ? 'mobile' : 'pc'}`)
+      $router.push('/')
+      setTimeout(() => {
+        window.location.reload()
+      }, 1000)
+    }
   }
   hotkeys('alt+i', () => {
     eventBus.emit('global-system-info-toggle')
   })
 })
+const browserType = window.localStorage.getItem('browser-type-bj-well') // mobile || pc
 </script>
 
 <template>
@@ -99,6 +125,6 @@
         '--g-sub-sidebar-actual-width': subSidebarActualWidth,
       }"
     />
-    <system-info />
+    <system-info v-if="browserType !== 'mobile'" />
   </el-config-provider>
 </template>
diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue
index e247e28..de24f71 100644
--- a/src/components/NormalTable/index.vue
+++ b/src/components/NormalTable/index.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup name="NormalTable">
 import type { Ref } from 'vue'
-import { ElTable } from 'element-plus'
+import { ElMessage, ElTable } from 'element-plus'
 import { defineExpose, ref } from 'vue'
 import type { TableColumn } from './table_interface'
 import TableColumnCom from './tableColumn.vue'
@@ -84,7 +84,11 @@
     type: String,
     default: 'default',
   }, // 表格大小，默认，small,mini等，与el-table条件相同
-  // 想要展示成链接的数据
+  // 是否要右击菜单
+  needContextmenu: {
+    type: Boolean,
+    default: false,
+  },
 })
 const emit = defineEmits(['change', 'selectionChange', 'rowClick', 'rowDbClick', 'multiSelect', 'filterChange', 'rowDisabled', 'handleClickFollowLink'])
 // -------定义数据--------------
@@ -148,8 +152,10 @@
 //   changeColumns()
 // })
 // 多选
+const multiSelectData = ref([])
 const handleSelectionChange = (val: any) => {
   // console.log(val)
+  multiSelectData.value = val
   emit('multiSelect', val)
 }
 // 单选选中
@@ -214,27 +220,87 @@
 const handleClickFollowLink = (row: any, title: string) => {
   emit('handleClickFollowLink', row, title)
 }
+
+// 右击当前行操作
+const clickIndex = ref(-1)
+const contextmenu = (row: any, column: any, event: Event, index: number) => {
+  if (!props.needContextmenu) { return }
+  // 阻止默认的右键菜单
+  event.preventDefault()
+  clickIndex.value = props.data.findIndex(item => item === row)
+  console.log('右击', clickIndex.value)
+  // 获取自定义菜单元素
+  var menu = document.getElementById('custom-menu')
+  // 设置自定义菜单的位置并显示
+  let positionX = event.pageX
+  let positionY = event.pageY
+  if (document.documentElement.clientHeight - event.pageY < 204) {
+    positionY = document.documentElement.clientHeight - 204 + 102
+  }
+  if (document.documentElement.clientWidth - event.pageX < 146) {
+    positionX = document.documentElement.clientWidth - 146
+  }
+  menu.style.top = `${positionY - 102}px`
+  menu.style.left = `${positionX}px`
+  menu.style.display = 'block'
+}
+// 点击其他位置隐藏自定义菜单
+document.addEventListener('click', () => {
+  document.getElementById('custom-menu').style.display = 'none'
+})
+// 添加行
+const costomAddRow = (type: string) => {
+  if (type === 'current-pre') {
+    // 当前行前方插入
+    props.data.splice(clickIndex.value, 0, JSON.parse(JSON.stringify(props.data[clickIndex.value])))
+  }
+  else if (type === 'current-next') {
+    // 当前行后方方插入
+    props.data.splice(clickIndex.value + 1, 0, JSON.parse(JSON.stringify(props.data[clickIndex.value])))
+  }
+  else if (type === 'list-head') {
+    // 列表头行插入
+    props.data.splice(0, 0, JSON.parse(JSON.stringify(props.data[clickIndex.value])))
+  }
+  else if (type === 'list-tail') {
+    // 列表尾行插入
+    props.data.splice(props.data.length, 0, JSON.parse(JSON.stringify(props.data[clickIndex.value])))
+  }
+  else if (type === 'select-pre') {
+    // 选中行前方插入
+    if (!multiSelectData.value.length) {
+      ElMessage.warning('未选择数据')
+      return
+    }
+    multiSelectData.value.forEach((item, index) => {
+      const dataIndex = props.data.findIndex(citem => item === citem)
+      props.data.splice(dataIndex, 0, JSON.parse(JSON.stringify(item)))
+    })
+    table.value!.clearSelection()
+  }
+  else if (type === 'select-next') {
+    // 选中行后方插入
+    if (!multiSelectData.value.length) {
+      ElMessage.warning('未选择数据')
+      return
+    }
+    multiSelectData.value.forEach((item, index) => {
+      const dataIndex = props.data.findIndex(citem => item === citem)
+      props.data.splice(dataIndex + 1, 0, JSON.parse(JSON.stringify(item)))
+    })
+    table.value!.clearSelection()
+  }
+  clickIndex.value = -1
+}
 </script>
 
 <template>
   <div id="normal-table-com">
     <el-table
-      id="print"
-      ref="table"
-      v-loading="listLoading"
-      :data="data"
-      :height="height"
-      border
-      stripe
-      :size="size"
-      style="width: 100%;"
-      :row-key="(row) => { return row.id || row.index }"
-      :span-method="mergeTableRow"
-      @selection-change="handleSelectionChange"
-      @select="selectClick"
-      @row-click="rowClick"
-      @row-dblclick="rowDbClick"
-      @filter-change="filterChange"
+      id="print" ref="table" v-loading="listLoading" :data="data" :height="height" border stripe :size="size"
+      style="width: 100%;" :row-key="(row) => { return row.id || row.index }" :span-method="mergeTableRow"
+      @selection-change="handleSelectionChange" @select="selectClick" @row-click="rowClick" @row-dblclick="rowDbClick"
+      @filter-change="filterChange" @row-contextmenu="contextmenu"
     >
       <slot name="preColumns" />
 
@@ -243,45 +309,48 @@
           <el-radio v-model="singleChecked" :label="scope.row.id" class="radio" @change="radioChange" />
         </template>
       </el-table-column>
-      <el-table-column v-if="isShowmultiSelect && isMulti" :reserve-selection="true" type="selection" width="38" :selectable="selectable" fixed="left" />
+      <el-table-column
+        v-if="isShowmultiSelect && isMulti" :reserve-selection="true" type="selection" width="38"
+        :selectable="selectable" fixed="left"
+      />
       <template v-for="column of columns" :key="column.value">
         <el-table-column
-          v-if="!column.isFilters"
-          :label="column.text"
-          :prop="column.value"
-          :width="column.width"
-          :align="column.align"
-          :show-overflow-tooltip="column.showOverflow ? column.showOverflow : true"
+          v-if="!column.isFilters" :label="column.text" :prop="column.value" :width="column.width"
+          :align="column.align" :show-overflow-tooltip="column.showOverflow ? column.showOverflow : true"
           :fixed="column.fixed"
         >
           <template #default="scope">
-            <span v-if="!column.filter && !column.isLink" :style="column.styleFilter ? column.styleFilter(scope.row) : ''">{{ scope.row[column.value] }}</span>
-            <span v-if="column.filter && !column.isLink" :style="column.styleFilter ? column.styleFilter(scope.row) : ''">{{ column.filter(scope.row) }}</span>
+            <span
+              v-if="!column.filter && !column.isLink"
+              :style="column.styleFilter ? column.styleFilter(scope.row) : ''"
+            >{{ scope.row[column.value] }}</span>
+            <span
+              v-if="column.filter && !column.isLink"
+              :style="column.styleFilter ? column.styleFilter(scope.row) : ''"
+            >{{ column.filter(scope.row) }}</span>
             <div v-if="column.isLink">
               <show-photo v-for="(item, index) in scope.row.fileArr" :key="index" :minio-file-name="item" /><br>
             </div>
             <div v-if="column.followLink">
-              <div v-for="(item, index) in scope.row.followLinkArr" :key="index" @click="handleClickFollowLink(scope.row, item)">
+              <div
+                v-for="(item, index) in scope.row.followLinkArr" :key="index"
+                @click="handleClickFollowLink(scope.row, item)"
+              >
                 <span :class="item !== '/' ? 'follow-link' : ''">{{ item }}</span>
               </div>
             </div>
           </template>
         </el-table-column>
         <el-table-column
-          v-if="column.isFilters"
-          :label="column.text"
-          :prop="column.value"
-          :width="column.width"
-          :align="column.align"
-          :show-overflow-tooltip="column.showOverflow ? column.showOverflow : true"
-          :fixed="column.fixed"
-          :column-key="column.value"
-          :filters="column.filters"
-          :filter-multiple="false"
+          v-if="column.isFilters" :label="column.text" :prop="column.value" :width="column.width"
+          :align="column.align" :show-overflow-tooltip="column.showOverflow ? column.showOverflow : true"
+          :fixed="column.fixed" :column-key="column.value" :filters="column.filters" :filter-multiple="false"
         >
           <template #default="scope">
-            <span v-if="!column.filter" :style="column.styleFilter ? column.styleFilter(scope.row) : ''">{{ scope.row[column.value] }}</span>
-            <span v-else :style="column.styleFilter ? column.styleFilter(scope.row) : ''">{{ column.filter(scope.row) }}</span>
+            <span v-if="!column.filter" :style="column.styleFilter ? column.styleFilter(scope.row) : ''">{{
+              scope.row[column.value] }}</span>
+            <span v-else :style="column.styleFilter ? column.styleFilter(scope.row) : ''">{{ column.filter(scope.row)
+            }}</span>
           </template>
         </el-table-column>
       </template>
@@ -290,19 +359,67 @@
     </el-table>
     <div v-if="props.pagination" style="width: 100%;margin-top: 10px;">
       <el-pagination
-        :current-page="props.query.offset"
-        :page-sizes="props.pageSizes as number[]"
-        :page-size="props.query.limit"
-        :total="props.total"
-        layout="total, sizes, prev, pager, next"
-        @size-change="handleSizeChange"
-        @current-change="handleCurrentChange"
+        :current-page="props.query.offset" :page-sizes="props.pageSizes as number[]"
+        :page-size="props.query.limit" :total="props.total" layout="total, sizes, prev, pager, next"
+        @size-change="handleSizeChange" @current-change="handleCurrentChange"
       />
     </div>
+    <!-- 自定义菜单 -->
+    <div id="custom-menu">
+      <p class="menu-item" @click="costomAddRow('current-pre')">
+        当前行前方插入
+      </p>
+      <p class="menu-item" @click="costomAddRow('current-next')">
+        当前行后方插入
+      </p>
+      <p class="menu-item" @click="costomAddRow('list-head')">
+        列表头行插入
+      </p>
+      <p class="menu-item" @click="costomAddRow('list-tail')">
+        列表尾行插入
+      </p>
+      <p v-if="isShowmultiSelect && isMulti" class="menu-item" @click="costomAddRow('select-pre')">
+        选中行前方插入
+      </p>
+      <!--  -->
+      <p v-if="isShowmultiSelect && isMulti" class="menu-item" @click="costomAddRow('select-next')">
+        选中行后方插入
+      </p>
+    </div>
   </div>
 </template>
 
 <style lang="scss" scoped>
+#custom-menu {
+  display: none;
+  position: fixed;
+  background-color: #fff;
+  border-radius: 5px;
+  padding: 5px 0;
+  z-index: 1000;
+  border: 1px solid #c8c9cc;
+  box-shadow: 0 0 12px rgb(0 0 0 / 12%);
+
+  .menu-item {
+    display: flex;
+    align-items: center;
+    white-space: nowrap;
+    list-style: none;
+    line-height: 22px;
+    padding: 5px 16px;
+    margin: 0;
+    // font-size: var(--el-font-size-base);
+    color: #606266;
+    cursor: pointer;
+    outline: none;
+
+    &:hover {
+      background-color: #ecf5ff;
+      color: #409eff;
+    }
+  }
+}
+
 #normal-table-com {
   width: 100%;
 }
diff --git a/src/components/TableContainer/index.vue b/src/components/TableContainer/index.vue
index 0c07be6..87b1567 100644
--- a/src/components/TableContainer/index.vue
+++ b/src/components/TableContainer/index.vue
@@ -71,16 +71,18 @@
   <config-dialog ref="configRef" @confirm="confirmColumns" />
   <div class="table-container">
     <div class="button-area">
-      <div v-if="titleShow" :class="props.isCenter ? 'title-center' : 'title-left'">
-        <el-icon v-if="isConfig" :size="21" class="icon-menu" @click="config">
-          <menu />
-        </el-icon>
-        <span>
-          {{ title }}
-        </span>
-      </div>
-      <div class="button-left">
-        <slot name="btns-left" />
+      <div style="display: flex;align-items: center;">
+        <div v-if="titleShow" :class="props.isCenter ? 'title-center' : 'title-left'">
+          <el-icon v-if="isConfig" :size="21" class="icon-menu" @click="config">
+            <menu />
+          </el-icon>
+          <span>
+            {{ title }}
+          </span>
+        </div>
+        <div class="button-left">
+          <slot name="btns-left" />
+        </div>
       </div>
       <div class="button-right">
         <slot name="btns-right" />
diff --git a/src/components/map/index.vue b/src/components/map/index.vue
index 55e37da..620c813 100644
--- a/src/components/map/index.vue
+++ b/src/components/map/index.vue
@@ -8,7 +8,7 @@
 import { styleType } from 'element-plus/es/components/table-v2/src/common'
 
 const $props = defineProps({
-  // 初始图层 normal satellite
+  // 初始图层 normal satellite dark
   layer: {
     type: String,
     default: 'normal',
@@ -35,8 +35,8 @@
 const layer = ref()
 // 图层标识
 const layerFlag = ref('normal')
-// const publicPath = import.meta.env.BASE_URL
-// console.log(publicPath, 'publicPath')
+const publicPath = import.meta.env.BASE_URL
+console.log(publicPath, 'publicPath')
 // -------------------------------------初始化地图--------------------------------------------------
 const initMap = () => {
   AMapLoader.load({
@@ -61,18 +61,22 @@
         map.value.setFeatures(['bg', 'building'])
         layerFlag.value = 'satellite'
       }
+      else if ($props.layer === 'dark') {
+        // 深色图层
+        map.value.setMapStyle('amap://styles/darkblue')
+      }
       // 地图图块加载完成后触发
       map.value.on('complete', () => {
         //  修改loading状态
         console.log('地图加载完成')
-        $emits('complete')
+        $emits('complete', AMap.value)
         loading.value = false
       })
       // 地图绑定右击事件
       map.value.on('mousedown', clickHandler)
     })
     .catch((e) => {
-      console.log('地图加载失败')
+      console.log(e, '地图加载失败')
     })
 }
 // ------------------------------------------------------------------------------------------------
@@ -156,7 +160,7 @@
 }
 // ------------------------------------------------------------------------------------------------
 
-// -------------------------------------标记本文操作--------------------------------------------------
+// -------------------------------------标记文本操作--------------------------------------------------
 // 标记文本数组
 const textAllList = ref<any>([])
 // 添加标记文字
@@ -282,6 +286,35 @@
   lineAllList.value = []
 }
 // ------------------------------------------------------------------------------------------------
+
+// -----------------------------------海量点标记操作------------------------------------------------
+// 点标记(海量点)数组
+const massMarksAllList = ref<any>([])
+// 添加点标记(海量点)
+const addMassMarks = (data: any) => {
+  /**
+     * data
+     * path: 折线点位数据  [{lnglat: [116.402394,39.937182],name: "南锣鼓巷", style: 1,}, ]
+     * style 样式
+     * zooms: 在指定地图缩放级别范围内展示海量点图层
+     * zIndex: 海量点图层叠加的顺序
+      */
+  var massMarks = new AMap.value.MassMarks(data.path, {
+    zIndex: data.zIndex, // 海量点图层叠加的顺序
+    zooms: data.zooms, // 在指定地图缩放级别范围内展示海量点图层
+    style: data.style, // 设置样式对象
+  })
+  massMarksAllList.value.push(massMarks)
+  massMarks.setMap(map)
+}
+// 移除点标记(海量点)
+const removeMassMarks = () => {
+  massMarksAllList.value.forEach((item: any) => {
+    item.setMap(null)
+  })
+  massMarksAllList.value = []
+}
+// ------------------------------------------------------------------------------------------------
 onMounted(() => {
   loading.value = true
   initMap()
@@ -302,6 +335,8 @@
   removeMarker, // 移除点标记 (一般点标记)
   addPolyline, // 添加折线
   removePolyline, // 移除折线
+  addMassMarks, // 添加点标记(海量点)
+  removeMassMarks, // 移除点标记(海量点)
 })
 </script>
 
diff --git a/src/layouts/components/Header/mobile.vue b/src/layouts/components/Header/mobile.vue
new file mode 100644
index 0000000..a27de4b
--- /dev/null
+++ b/src/layouts/components/Header/mobile.vue
@@ -0,0 +1,53 @@
+<!-- 移动端头部 -->
+<script lang="ts" setup name="HeaderMobile">
+import { ArrowLeftBold, House } from '@element-plus/icons-vue'
+const route = useRoute()
+const router = useRouter()
+const goBack = (type: 'back' | 'home') => {
+  if (type === 'back') {
+    router.go(-1)
+  }
+  else if (type === 'home') {
+    router.push('/')
+  }
+}
+</script>
+
+<template>
+  <div>
+    <div v-if="route.meta.isHeader" class="header-mobile">
+      <div v-if="route.meta.isBack">
+        <el-icon :size="25" @click="goBack('back')">
+          <arrow-left-bold />
+        </el-icon>
+      </div>
+      <div v-else style="width: 25px;" />
+      <div> {{ route.meta.title }}</div>
+      <el-icon v-if="route.meta.isHome" :size="25" @click="goBack('home')">
+        <house />
+      </el-icon>
+      <div v-else style="width: 25px;" />
+    </div>
+    <div v-if="route.meta.isHeader" class="occupying" />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.header-mobile {
+  width: 100%;
+  background-color: #70b4ff;
+  height: 35px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 10px;
+  position: fixed;
+  top: 0;
+}
+
+.occupying {
+  height: 35px;
+  background-color: transparent;
+  width: 100%;
+}
+</style>
diff --git a/src/layouts/mobile.vue b/src/layouts/mobile.vue
new file mode 100644
index 0000000..c6235a4
--- /dev/null
+++ b/src/layouts/mobile.vue
@@ -0,0 +1,47 @@
+<!-- 移动端基础布局组件 -->
+<script lang="ts" setup name="LayoutMobile">
+import headerMobile from './components/Header/mobile.vue'
+import useKeepAliveStore from '@/store/modules/keepAlive'
+const keepAliveStore = useKeepAliveStore()
+const routeInfo = useRoute()
+</script>
+
+<template>
+  <div class="layout">
+    <div id="app-main">
+      <!-- 头部 -->
+      <header-mobile />
+      <div class="wrapper">
+        <div class="main-container">
+          <div class="main">
+            <router-view v-slot="{ Component, route }">
+              <transition name="main" mode appear>
+                <keep-alive :include="keepAliveStore.list">
+                  <component :is="Component" :key="route.fullPath" />
+                </keep-alive>
+              </transition>
+            </router-view>
+          </div>
+          <copyright />
+        </div>
+      </div>
+      <el-backtop :right="20" :bottom="20" title="回到顶部" />
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.main {
+  overflow-x: hidden;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+
+  // firefox隐藏滚动条
+  scrollbar-width: none;
+
+  // chrome隐藏滚动条
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}
+</style>
diff --git a/src/main.ts b/src/main.ts
index 07c50a2..cb80c5d 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -19,35 +19,35 @@
 import { downloadAndInstall } from '@/iconify-ep'
 import { hasPermission } from '@/utils/composables/permission'
 import buttonPerm from '@/utils/buttonPerm'
-// 引入打印插件
 if (useSettingsStore().app.iconifyOfflineUse) {
   downloadAndInstall()
 }
-const app = createApp(App)
-app.config.globalProperties.hasPerm = hasPermission
-app.config.globalProperties.buttonPerm = buttonPerm
-app.config.globalProperties.dayjs = dayjs
-app.use(print)
-app.use(ElementPlus)
-app.use(pinia)
-app.use(router)
-for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
-  app.component(key, component)
-}
-directive(app)
 
 axios.get('./config/config.json', {
   headers: {
     'Cache-Control': 'no-cache',
   },
 }).then((result) => {
+  const app = createApp(App)
   console.log('get config')
+  console.log(window.localStorage.getItem('browser-type-bj-well'), 'mian中获取浏览器类型')
   console.log(result)
   window.localStorage.setItem('url-bj-well', result.data.baseUrl)
   window.localStorage.setItem('securityJsCode', result.data.securityJsCode)
   window.localStorage.setItem('JsKey', result.data.JsKey)
   request.defaults.baseURL = result.data.baseUrl // 设置默认请求网址
   app.config.globalProperties.config = result.data
+  app.config.globalProperties.hasPerm = hasPermission
+  app.config.globalProperties.buttonPerm = buttonPerm
+  app.config.globalProperties.dayjs = dayjs
+  app.use(print)
+  app.use(ElementPlus)
+  app.use(pinia)
+  app.use(router)
+  for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
+    app.component(key, component)
+  }
+  directive(app)
   app.mount('#app')
 }).catch((error) => {
   console.error(`get baseConfig error...${error}`)
diff --git a/src/router/modules/mobile.ts b/src/router/modules/mobile.ts
new file mode 100644
index 0000000..77618c1
--- /dev/null
+++ b/src/router/modules/mobile.ts
@@ -0,0 +1,31 @@
+// 移动端路由
+import type { Route } from '@/global'
+
+const Layout = () => import('@/layouts/mobile.vue')
+
+const routes: Route.recordRaw[] = [
+  {
+    path: '/home',
+    component: Layout,
+    redirect: '/home/index',
+    name: 'Home',
+    meta: {
+      title: '首页',
+    },
+    children: [
+      {
+        path: 'index',
+        component: () => import('@/views/mobile/example1/index.vue'),
+        name: 'HomeIndex',
+        meta: {
+          title: '首页',
+          isHeader: true, // 是否需要头部
+          isBack: true, // 是否需要返回按钮
+          isHome: false, // 是否需要回到首页按钮
+        },
+      },
+    ],
+  },
+]
+
+export default routes
diff --git a/src/router/routes.ts b/src/router/routes.ts
index ae91d6e..b1fdc27 100644
--- a/src/router/routes.ts
+++ b/src/router/routes.ts
@@ -2,6 +2,7 @@
 import generatedRoutes from 'virtual:generated-pages'
 // import commonRoute from './modules/system'
 import homeRoute from './modules/home'
+import mobileRoute from './modules/mobile'
 import type { Route } from '@/global'
 import useSettingsStore from '@/store/modules/settings'
 
@@ -31,12 +32,15 @@
     },
   },
 ]
-
+const userAgent = navigator.userAgent || navigator.vendor || window.opera
+const isMobile = /android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(userAgent)
+window.localStorage.setItem('browser-type-bj-well', `${isMobile ? 'mobile' : 'pc'}`)
+console.log(window.localStorage.getItem('browser-type-bj-well'), '路由中获取浏览器类型')
 // 系统路由
 const systemRoutes: Route.recordRaw[] = [
   {
     path: '/dashboard',
-    component: () => import('@/layouts/index.vue'),
+    component: isMobile ? null : () => import('@/layouts/index.vue'),
     meta: {
       title: () => useSettingsStore().dashboard.title,
       breadcrumb: false,
@@ -101,19 +105,27 @@
     ],
   },
 ]
-
 // 动态路由（异步路由、导航栏路由）
-const asyncRoutes: Route.recordMainRaw[] = [
-  {
-    meta: {
-      title: '',
-      icon: '',
+const asyncRoutes: Route.recordMainRaw[] = isMobile
+  ? [{ // 移动端路由
+      meta: {
+        title: '',
+        icon: '',
+      },
+      children: [
+        ...mobileRoute,
+      ],
+    }]
+  : [{ // pc端路由
+      meta: {
+        title: '',
+        icon: '',
+      },
+      children: [
+        ...homeRoute,
+      ],
     },
-    children: [
-      ...homeRoute,
-    ],
-  },
-]
+    ]
 
 const constantRoutesByFilesystem = generatedRoutes.filter((item) => {
   return item.meta?.enabled !== false && item.meta?.constant === true
diff --git "a/src/views/\133...all\135.vue" "b/src/views/\133...all\135.vue"
index 91af7e1..98ca1f9 100644
--- "a/src/views/\133...all\135.vue"
+++ "b/src/views/\133...all\135.vue"
@@ -51,30 +51,65 @@
 </template>
 
 <style lang="scss" scoped>
-.notfound {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  width: 700px;
+@media (min-width: 700px) {
+  .notfound {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 700px;
 
-  @include position-center(xy);
+    @include position-center(xy);
 
-  .icon {
-    width: 400px;
-    height: 400px;
-  }
-
-  .content {
-    h1 {
-      margin: 0;
-      font-size: 72px;
-      color: var(--el-text-color-primary);
+    .icon {
+      width: 400px;
+      height: 400px;
     }
 
-    .desc {
-      margin: 20px 0 30px;
-      font-size: 20px;
-      color: var(--el-text-color-secondary);
+    .content {
+      h1 {
+        margin: 0;
+        font-size: 72px;
+        color: var(--el-text-color-primary);
+      }
+
+      .desc {
+        margin: 20px 0 30px;
+        font-size: 20px;
+        color: var(--el-text-color-secondary);
+      }
+    }
+  }
+}
+
+@media (max-width: 700px) {
+  .notfound {
+    // display: flex;
+    // align-items: center;
+    // justify-content: space-between;
+    // width: 700px;
+    overflow: hidden;
+
+    @include position-center(xy);
+
+    .icon {
+      width: 350px;
+      height: 350px;
+    }
+
+    .content {
+      text-align: center !important;
+
+      h1 {
+        margin: 0;
+        font-size: 72px;
+        color: var(--el-text-color-primary);
+      }
+
+      .desc {
+        margin: 20px 0 30px;
+        font-size: 20px;
+        color: var(--el-text-color-secondary);
+      }
     }
   }
 }
diff --git a/src/views/home/dashboard/index.vue b/src/views/home/dashboard/index.vue
index 3fc5cec..a4b5f57 100644
--- a/src/views/home/dashboard/index.vue
+++ b/src/views/home/dashboard/index.vue
@@ -206,10 +206,10 @@
           <el-scrollbar height="200px">
             <div class="message-container">
               <div v-for="item in messageData" :key="item" class="message-item">
-                <span class="left">
+                <div class="left">
                   <span class="type">【{{ item.alarmTypeName }}】</span>
                   <span class="content">{{ item.alarmContent }}</span>
-                </span>
+                </div>
                 <span class="time">{{ item.alarmTime }}</span>
               </div>
             </div>
@@ -325,6 +325,9 @@
           flex-direction: column;
           text-align: center;
           width: 60%;
+          overflow: hidden;
+          white-space: nowrap;
+          text-overflow: ellipsis;
         }
       }
     }
@@ -341,24 +344,30 @@
         display: flex;
         justify-content: space-between;
         padding: 0 10px;
+        width: 100%;
 
         .left {
-          display: inline;
           width: 75%;
+          display: flex;
+          align-items: center;
+          overflow: hidden;
+          white-space: nowrap;
+          text-overflow: ellipsis;
         }
 
         .content {
           display: inline-block;
           padding-left: 10px;
           width: 65%;
-          // overflow: hidden;
-          // white-space: nowrap;
-          // text-overflow: ellipsis;
+          overflow: hidden;
+          white-space: nowrap;
+          text-overflow: ellipsis;
         }
 
         .time {
           font-size: 16px;
           color: #7c7777;
+          white-space: nowrap;
         }
       }
     }
diff --git a/src/views/home/device/type/index.vue b/src/views/home/device/type/index.vue
index ab687f7..c83bbc6 100644
--- a/src/views/home/device/type/index.vue
+++ b/src/views/home/device/type/index.vue
@@ -1,3 +1,142 @@
+<!--
+  Description: 设备管理-设备类型管理
+  Author: 李亚光
+  Date: 2023-07-15
+ -->
+<script lang="ts" setup name="DeviceTypeManage">
+// 表格数据
+const list = ref([
+  {
+    deviceType: '11',
+    deviceTypeName: '燃气智能监测终端',
+    desc: '燃气智能监测终端',
+    monitor: '井下燃气浓度',
+    alarmLimit: '是',
+    alarmLow: '是',
+    isEnable: '是',
+    time: '',
+  },
+  {
+    deviceType: '11',
+    deviceTypeName: '燃气智能监测终端',
+    desc: '燃气智能监测终端',
+    monitor: '井下燃气浓度',
+    alarmLimit: '是',
+    alarmLow: '是',
+    isEnable: '是',
+    time: '',
+  },
+  {
+    deviceType: '12',
+    deviceTypeName: '场站监测云台',
+    desc: '场站监测云台',
+    monitor: '场站内视频、燃气浓度',
+    alarmLimit: '是',
+    alarmLow: '是',
+    isEnable: '是',
+    time: '',
+  },
+])
+const total = ref(0)
+// 初始展示列
+const columns = ref<any>([
+  { text: '设备类型代号', value: 'deviceType', align: 'center' },
+  { text: '设备类型', value: 'deviceTypeName', align: 'center' },
+  { text: '描述', value: 'desc', align: 'center' },
+  { text: '监控内容', value: 'monitor', align: 'center' },
+  { text: '是否需要报警上限', value: 'alarmLimit', align: 'center' },
+  { text: '是否需要报警下限', value: 'alarmLow', align: 'center' },
+  { text: '是否启用', value: 'isEnable', align: 'center' },
+  { text: '最新操作时间', value: 'time', align: 'center' },
+])
+// 最终展示列
+const columnsConfig = ref([])
+// 修改列
+const editColumns = (data: any) => {
+  columnsConfig.value = data
+}
+const loadingTable = ref(true)
+//  查询条件
+const listQuery = ref({
+  limit: 20,
+  offset: 1,
+})
+// 查询数据
+const fetchData = () => {
+  setTimeout(() => {
+    loadingTable.value = false
+  })
+}
+// 重置查询条件f
+const reset = () => {
+
+}
+// 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
+const changePage = (val: { size: number; page: number }) => {
+  if (val && val.size) {
+    listQuery.value.limit = val.size
+  }
+  if (val && val.page) {
+    listQuery.value.offset = val.page
+  }
+  fetchData()
+}
+
+onMounted(() => {
+  fetchData()
+})
+</script>
+
 <template>
-  设备类型管理
+  <!-- 布局 -->
+  <app-container>
+    <!-- 筛选条件 -->
+    <search-area :need-clear="true" @search="fetchData" @clear="reset">
+      <search-item>
+        <el-select v-model="listQuery.keywords" placeholder="设备类型" clearable />
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.keywords" placeholder="是否启用" clearable />
+      </search-item>
+    </search-area>
+    <!-- 表头标题 -->
+    <table-container
+      :is-config="true" config-title="device-type" :columns="columns" :config-columns="columnsConfig"
+      :edit="editColumns"
+    >
+      <template #btns-right>
+        <!-- 操作 -->
+        <div>
+          <el-button type="primary">
+            新建
+          </el-button>
+        </div>
+      </template>
+      <!-- 查询结果Table显示 -->
+      <normal-table
+        :data="list" :total="total" :columns="columnsConfig" :query="listQuery" :list-loading="loadingTable"
+        @change="changePage"
+      >
+        <template #preColumns>
+          <el-table-column label="序号" width="55" align="center">
+            <template #default="scope">
+              {{ (listQuery.offset - 1) * listQuery.limit + scope.$index + 1 }}
+            </template>
+          </el-table-column>
+        </template>
+        <template #columns>
+          <el-table-column label="操作" align="center" width="120">
+            <template #default="scope">
+              <el-button type="primary" link size="small">
+                编辑 {{ scope.$index }}
+              </el-button>
+              <el-button type="danger" link size="small">
+                删除 {{ scope.$index }}
+              </el-button>
+            </template>
+          </el-table-column>
+        </template>
+      </normal-table>
+    </table-container>
+  </app-container>
 </template>
diff --git a/src/views/home/well/components/map.vue b/src/views/home/well/components/map.vue
new file mode 100644
index 0000000..5913db3
--- /dev/null
+++ b/src/views/home/well/components/map.vue
@@ -0,0 +1,26 @@
+<!--
+  Description: 闸井监测-地图
+  Author: 李亚光
+  Date: 2023-07-08
+ -->
+<script lang="ts" setup name="AlarmMap">
+import AMap from '@/components/map/index.vue'
+const $props = defineProps({
+  height: {
+    type: Number,
+    default: 0,
+  },
+})
+</script>
+
+<template>
+  <div :style="`height: ${$props.height}px`" class="map-container">
+    <a-map />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.map-container {
+  width: 100%;
+}
+</style>
diff --git a/src/views/home/well/index.vue b/src/views/home/well/index.vue
index 439816e..cc2059b 100644
--- a/src/views/home/well/index.vue
+++ b/src/views/home/well/index.vue
@@ -1,3 +1,230 @@
+<!--
+  Description: 闸井监测
+  Author: 李亚光
+  Date: 2023-07-12
+ -->
+<script lang="ts" setup name="WellMonitor">
+import { ElMessage } from 'element-plus'
+import { ArrowUpBold } from '@element-plus/icons-vue'
+import MapCom from './components/map.vue'
+// 表格数据
+const list = ref([
+  {
+    wellId: 'N57X508',
+    wellNo: '01110200745927',
+    name: '中压A闸1',
+    dept: '第一分公司/运维1所/1班',
+    property: '富源里小区',
+    manage: '自管',
+    use: '投用',
+    defence: '布防',
+    status: '正常',
+    device: '1',
+    tag: '',
+  },
+  {
+    wellId: 'N57X508',
+    wellNo: '01110200745927',
+    name: '中压A闸1',
+    dept: '第一分公司/运维1所/1班',
+    property: '富源里小区',
+    manage: '自管',
+    use: '停用',
+    defence: '撤防',
+    status: '正常',
+    device: '1',
+    tag: '',
+  },
+])
+const total = ref(0)
+// 初始展示列
+const columns = ref<any>([
+  { text: '闸井位号', value: 'wellId', align: 'center' },
+  { text: '闸井编号', value: 'wellNo', align: 'center' },
+  { text: '闸井名称', value: 'name', align: 'center' },
+  { text: '管理单位', value: 'dept', align: 'center' },
+  { text: '产权单位', value: 'property', align: 'center' },
+  { text: '管理方式', value: 'manage', align: 'center' },
+  { text: '使用状态', value: 'use', align: 'center' },
+  { text: '布防状态', value: 'defence', align: 'center' },
+  { text: '状态', value: 'status', align: 'center' },
+  { text: '感知设备', value: 'device', align: 'center' },
+  { text: '标签', value: 'tag', align: 'center' },
+])
+// 最终展示列
+const columnsConfig = ref([])
+// 修改列
+const editColumns = (data: any) => {
+  columnsConfig.value = data
+}
+const loadingTable = ref(true)
+//  查询条件
+const listQuery = ref({
+  limit: 20,
+  offset: 1,
+})
+// 开始结束时间
+const datetimerange = ref()
+watch(() => datetimerange.value, (newVal) => {
+  // listQuery.createTimeStart = ''
+  // listQuery.createTimeEnd = ''
+  if (Array.isArray(newVal)) {
+    if (newVal.length) {
+      // listQuery.createTimeStart = `${newVal[0]} 00:00:00`
+      // listQuery.createTimeEnd = `${newVal[1]} 23:59:59`
+    }
+  }
+})
+// 查询数据
+const fetchData = () => {
+  setTimeout(() => {
+    loadingTable.value = false
+  })
+}
+// 重置查询条件f
+const reset = () => {
+
+}
+// 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
+const changePage = (val: { size: number; page: number }) => {
+  if (val && val.size) {
+    listQuery.value.limit = val.size
+  }
+  if (val && val.page) {
+    listQuery.value.offset = val.page
+  }
+  fetchData()
+}
+
+onMounted(() => {
+  fetchData()
+})
+
+// 表格标识  地图或普通
+const tableFlag = ref('normal')
+const switchMode = (type: string) => {
+  if (!list.value.length) {
+    ElMessage.warning('暂无数据')
+    return
+  }
+  tableFlag.value = type
+}
+</script>
+
 <template>
-  闸井监测
+  <!-- 布局 -->
+  <app-container>
+    <!-- 地图 -->
+    <map-com v-if="tableFlag === 'map'" :height="350" />
+    <div v-if="tableFlag === 'map'" class="icon" @click="switchMode('normal')">
+      <el-icon :size="25">
+        <arrow-up-bold />
+      </el-icon>
+    </div>
+    <!-- 筛选条件 -->
+    <search-area :need-clear="true" @search="fetchData" @clear="reset">
+      <search-item>
+        <el-input v-model.trim="listQuery.keywords" placeholder="闸井位号" clearable />
+      </search-item>
+      <search-item>
+        <el-input v-model.trim="listQuery.keywords" placeholder="闸井编号" clearable />
+      </search-item>
+      <search-item>
+        <el-input v-model.trim="listQuery.keywords" placeholder="闸井编号" clearable />
+      </search-item>
+      <search-item>
+        <dept-select v-model="listQuery.keywords" placeholder="管理单位" :clearable="true" />
+      </search-item>
+      <search-item>
+        <el-input v-model.trim="listQuery.keywords" placeholder="产权单位" clearable />
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.keywords" placeholder="管理方式" clearable />
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.keywords" placeholder="使用状态" clearable />
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.keywords" placeholder="布防状态" clearable />
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.keywords" placeholder="监控状态" clearable />
+      </search-item>
+      <search-item>
+        <el-input v-model.trim="listQuery.keywords" placeholder="标签" clearable />
+      </search-item>
+    </search-area>
+    <!-- 表头标题 -->
+    <table-container
+      :is-config="true" config-title="well-monitor" :columns="columns" :config-columns="columnsConfig"
+      :edit="editColumns"
+    >
+      <template #btns-left>
+        <!-- 操作 -->
+        <div v-if="tableFlag === 'normal'" style="margin-left: 15px;">
+          <el-button type="primary" plain @click="switchMode('map')">
+            切换地图模式
+          </el-button>
+        </div>
+      </template>
+      <template #btns-right>
+        <!-- 操作 -->
+        <div>
+          <el-button type="primary">
+            导出
+          </el-button>
+        </div>
+      </template>
+      <!-- 查询结果Table显示 -->
+      <normal-table
+        :data="list" :total="total" :columns="columnsConfig" :query="listQuery" :list-loading="loadingTable"
+        @change="changePage"
+      >
+        <template #preColumns>
+          <!-- <el-table-column label="选择" width="55" align="center">
+              <template #default="scope">
+                <el-radio v-model="select" :label="scope.$index + 1" class="radio" />
+              </template>
+  </el-table-column> -->
+          <el-table-column label="序号" width="55" align="center">
+            <template #default="scope">
+              {{ (listQuery.offset - 1) * listQuery.limit + scope.$index + 1 }}
+            </template>
+          </el-table-column>
+        </template>
+        <template #columns>
+          <el-table-column label="布/撤防" align="center" width="80">
+            <template #default="scope">
+              <el-button type="primary" link size="small">
+                布防 {{ scope.$index }}
+              </el-button>
+            </template>
+          </el-table-column>
+          <el-table-column label="操作" align="center" width="120">
+            <template #default="scope">
+              <el-button type="primary" link size="small">
+                查看 {{ scope.$index }}
+              </el-button>
+              <el-button type="primary" link size="small">
+                编辑 {{ scope.$index }}
+              </el-button>
+            </template>
+          </el-table-column>
+        </template>
+      </normal-table>
+    </table-container>
+  </app-container>
 </template>
+
+<style lang="scss" scoped>
+.icon {
+  position: absolute;
+  top: 344px;
+  left: 50%;
+  transform: translateX(-50%);
+
+  &:hover {
+    cursor: pointer;
+  }
+}
+</style>
diff --git a/src/views/login-mobile.vue b/src/views/login-mobile.vue
new file mode 100644
index 0000000..b2eef7e
--- /dev/null
+++ b/src/views/login-mobile.vue
@@ -0,0 +1,19 @@
+<!-- 移动端登陆页面  -- elementplus -->
+<script lang="ts" setup name="Loginmobile">
+const route = useRoute()
+const router = useRouter()
+
+const handleLogin = () => {
+  router.push('/')
+}
+</script>
+
+<template>
+  <div>
+    移动端登陆页面
+  </div>
+
+  <el-button type="primary" size="large" @click="handleLogin">
+    基础测试
+  </el-button>
+</template>

diff --git a/src/App.vue b/src/App.vue
index 52ccd6e..a9268fb 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -6,7 +6,7 @@
 import useMenuStore from '@/store/modules/menu'
 
 const settingsStore = useSettingsStore()
-
+const $router = useRouter()
 const buttonConfig = ref({
   autoInsertSpace: true,
 })
@@ -81,14 +81,40 @@
 })
 
 onMounted(() => {
+  // // 浏览器访问当前位置
+  // if ('geolocation' in navigator) {
+  //   navigator.geolocation.getCurrentPosition(function (position) {
+  //     // 允许
+  //     console.log('纬度: ', position.coords.latitude)
+  //     console.log('经度: ', position.coords.longitude)
+  //   }, function (error) {
+  //     // 拒绝
+  //     console.error("Error Code = " + error.code + " - " + error.message);
+  //   })
+  // } else {
+  //   console.error("Geolocation is not supported by this browser.")
+  // }
   settingsStore.setMode(document.documentElement.clientWidth)
   window.onresize = () => {
     settingsStore.setMode(document.documentElement.clientWidth)
+    // 监听浏览器类型变化 刷新浏览器
+    const userAgent = navigator.userAgent || navigator.vendor || window.opera
+    const isMobile = /android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(userAgent)
+    if (`${isMobile ? 'mobile' : 'pc'}` !== window.localStorage.getItem('browser-type-bj-well')) {
+      // if (!window.localStorage.getItem('browser-type-bj-well')) { return }
+      console.log(`浏览器类型发生变化，由${window.localStorage.getItem('browser-type-bj-well')}变为${isMobile ? 'mobile' : 'pc'}`)
+      window.localStorage.setItem('browser-type-bj-well', `${isMobile ? 'mobile' : 'pc'}`)
+      $router.push('/')
+      setTimeout(() => {
+        window.location.reload()
+      }, 1000)
+    }
   }
   hotkeys('alt+i', () => {
     eventBus.emit('global-system-info-toggle')
   })
 })
+const browserType = window.localStorage.getItem('browser-type-bj-well') // mobile || pc
 </script>
 
 <template>
@@ -99,6 +125,6 @@
         '--g-sub-sidebar-actual-width': subSidebarActualWidth,
       }"
     />
-    <system-info />
+    <system-info v-if="browserType !== 'mobile'" />
   </el-config-provider>
 </template>
diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue
index e247e28..de24f71 100644
--- a/src/components/NormalTable/index.vue
+++ b/src/components/NormalTable/index.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup name="NormalTable">
 import type { Ref } from 'vue'
-import { ElTable } from 'element-plus'
+import { ElMessage, ElTable } from 'element-plus'
 import { defineExpose, ref } from 'vue'
 import type { TableColumn } from './table_interface'
 import TableColumnCom from './tableColumn.vue'
@@ -84,7 +84,11 @@
     type: String,
     default: 'default',
   }, // 表格大小，默认，small,mini等，与el-table条件相同
-  // 想要展示成链接的数据
+  // 是否要右击菜单
+  needContextmenu: {
+    type: Boolean,
+    default: false,
+  },
 })
 const emit = defineEmits(['change', 'selectionChange', 'rowClick', 'rowDbClick', 'multiSelect', 'filterChange', 'rowDisabled', 'handleClickFollowLink'])
 // -------定义数据--------------
@@ -148,8 +152,10 @@
 //   changeColumns()
 // })
 // 多选
+const multiSelectData = ref([])
 const handleSelectionChange = (val: any) => {
   // console.log(val)
+  multiSelectData.value = val
   emit('multiSelect', val)
 }
 // 单选选中
@@ -214,27 +220,87 @@
 const handleClickFollowLink = (row: any, title: string) => {
   emit('handleClickFollowLink', row, title)
 }
+
+// 右击当前行操作
+const clickIndex = ref(-1)
+const contextmenu = (row: any, column: any, event: Event, index: number) => {
+  if (!props.needContextmenu) { return }
+  // 阻止默认的右键菜单
+  event.preventDefault()
+  clickIndex.value = props.data.findIndex(item => item === row)
+  console.log('右击', clickIndex.value)
+  // 获取自定义菜单元素
+  var menu = document.getElementById('custom-menu')
+  // 设置自定义菜单的位置并显示
+  let positionX = event.pageX
+  let positionY = event.pageY
+  if (document.documentElement.clientHeight - event.pageY < 204) {
+    positionY = document.documentElement.clientHeight - 204 + 102
+  }
+  if (document.documentElement.clientWidth - event.pageX < 146) {
+    positionX = document.documentElement.clientWidth - 146
+  }
+  menu.style.top = `${positionY - 102}px`
+  menu.style.left = `${positionX}px`
+  menu.style.display = 'block'
+}
+// 点击其他位置隐藏自定义菜单
+document.addEventListener('click', () => {
+  document.getElementById('custom-menu').style.display = 'none'
+})
+// 添加行
+const costomAddRow = (type: string) => {
+  if (type === 'current-pre') {
+    // 当前行前方插入
+    props.data.splice(clickIndex.value, 0, JSON.parse(JSON.stringify(props.data[clickIndex.value])))
+  }
+  else if (type === 'current-next') {
+    // 当前行后方方插入
+    props.data.splice(clickIndex.value + 1, 0, JSON.parse(JSON.stringify(props.data[clickIndex.value])))
+  }
+  else if (type === 'list-head') {
+    // 列表头行插入
+    props.data.splice(0, 0, JSON.parse(JSON.stringify(props.data[clickIndex.value])))
+  }
+  else if (type === 'list-tail') {
+    // 列表尾行插入
+    props.data.splice(props.data.length, 0, JSON.parse(JSON.stringify(props.data[clickIndex.value])))
+  }
+  else if (type === 'select-pre') {
+    // 选中行前方插入
+    if (!multiSelectData.value.length) {
+      ElMessage.warning('未选择数据')
+      return
+    }
+    multiSelectData.value.forEach((item, index) => {
+      const dataIndex = props.data.findIndex(citem => item === citem)
+      props.data.splice(dataIndex, 0, JSON.parse(JSON.stringify(item)))
+    })
+    table.value!.clearSelection()
+  }
+  else if (type === 'select-next') {
+    // 选中行后方插入
+    if (!multiSelectData.value.length) {
+      ElMessage.warning('未选择数据')
+      return
+    }
+    multiSelectData.value.forEach((item, index) => {
+      const dataIndex = props.data.findIndex(citem => item === citem)
+      props.data.splice(dataIndex + 1, 0, JSON.parse(JSON.stringify(item)))
+    })
+    table.value!.clearSelection()
+  }
+  clickIndex.value = -1
+}
 </script>
 
 <template>
   <div id="normal-table-com">
     <el-table
-      id="print"
-      ref="table"
-      v-loading="listLoading"
-      :data="data"
-      :height="height"
-      border
-      stripe
-      :size="size"
-      style="width: 100%;"
-      :row-key="(row) => { return row.id || row.index }"
-      :span-method="mergeTableRow"
-      @selection-change="handleSelectionChange"
-      @select="selectClick"
-      @row-click="rowClick"
-      @row-dblclick="rowDbClick"
-      @filter-change="filterChange"
+      id="print" ref="table" v-loading="listLoading" :data="data" :height="height" border stripe :size="size"
+      style="width: 100%;" :row-key="(row) => { return row.id || row.index }" :span-method="mergeTableRow"
+      @selection-change="handleSelectionChange" @select="selectClick" @row-click="rowClick" @row-dblclick="rowDbClick"
+      @filter-change="filterChange" @row-contextmenu="contextmenu"
     >
       <slot name="preColumns" />
 
@@ -243,45 +309,48 @@
           <el-radio v-model="singleChecked" :label="scope.row.id" class="radio" @change="radioChange" />
         </template>
       </el-table-column>
-      <el-table-column v-if="isShowmultiSelect && isMulti" :reserve-selection="true" type="selection" width="38" :selectable="selectable" fixed="left" />
+      <el-table-column
+        v-if="isShowmultiSelect && isMulti" :reserve-selection="true" type="selection" width="38"
+        :selectable="selectable" fixed="left"
+      />
       <template v-for="column of columns" :key="column.value">
         <el-table-column
-          v-if="!column.isFilters"
-          :label="column.text"
-          :prop="column.value"
-          :width="column.width"
-          :align="column.align"
-          :show-overflow-tooltip="column.showOverflow ? column.showOverflow : true"
+          v-if="!column.isFilters" :label="column.text" :prop="column.value" :width="column.width"
+          :align="column.align" :show-overflow-tooltip="column.showOverflow ? column.showOverflow : true"
           :fixed="column.fixed"
         >
           <template #default="scope">
-            <span v-if="!column.filter && !column.isLink" :style="column.styleFilter ? column.styleFilter(scope.row) : ''">{{ scope.row[column.value] }}</span>
-            <span v-if="column.filter && !column.isLink" :style="column.styleFilter ? column.styleFilter(scope.row) : ''">{{ column.filter(scope.row) }}</span>
+            <span
+              v-if="!column.filter && !column.isLink"
+              :style="column.styleFilter ? column.styleFilter(scope.row) : ''"
+            >{{ scope.row[column.value] }}</span>
+            <span
+              v-if="column.filter && !column.isLink"
+              :style="column.styleFilter ? column.styleFilter(scope.row) : ''"
+            >{{ column.filter(scope.row) }}</span>
             <div v-if="column.isLink">
               <show-photo v-for="(item, index) in scope.row.fileArr" :key="index" :minio-file-name="item" /><br>
             </div>
             <div v-if="column.followLink">
-              <div v-for="(item, index) in scope.row.followLinkArr" :key="index" @click="handleClickFollowLink(scope.row, item)">
+              <div
+                v-for="(item, index) in scope.row.followLinkArr" :key="index"
+                @click="handleClickFollowLink(scope.row, item)"
+              >
                 <span :class="item !== '/' ? 'follow-link' : ''">{{ item }}</span>
               </div>
             </div>
           </template>
         </el-table-column>
         <el-table-column
-          v-if="column.isFilters"
-          :label="column.text"
-          :prop="column.value"
-          :width="column.width"
-          :align="column.align"
-          :show-overflow-tooltip="column.showOverflow ? column.showOverflow : true"
-          :fixed="column.fixed"
-          :column-key="column.value"
-          :filters="column.filters"
-          :filter-multiple="false"
+          v-if="column.isFilters" :label="column.text" :prop="column.value" :width="column.width"
+          :align="column.align" :show-overflow-tooltip="column.showOverflow ? column.showOverflow : true"
+          :fixed="column.fixed" :column-key="column.value" :filters="column.filters" :filter-multiple="false"
         >
           <template #default="scope">
-            <span v-if="!column.filter" :style="column.styleFilter ? column.styleFilter(scope.row) : ''">{{ scope.row[column.value] }}</span>
-            <span v-else :style="column.styleFilter ? column.styleFilter(scope.row) : ''">{{ column.filter(scope.row) }}</span>
+            <span v-if="!column.filter" :style="column.styleFilter ? column.styleFilter(scope.row) : ''">{{
+              scope.row[column.value] }}</span>
+            <span v-else :style="column.styleFilter ? column.styleFilter(scope.row) : ''">{{ column.filter(scope.row)
+            }}</span>
           </template>
         </el-table-column>
       </template>
@@ -290,19 +359,67 @@
     </el-table>
     <div v-if="props.pagination" style="width: 100%;margin-top: 10px;">
       <el-pagination
-        :current-page="props.query.offset"
-        :page-sizes="props.pageSizes as number[]"
-        :page-size="props.query.limit"
-        :total="props.total"
-        layout="total, sizes, prev, pager, next"
-        @size-change="handleSizeChange"
-        @current-change="handleCurrentChange"
+        :current-page="props.query.offset" :page-sizes="props.pageSizes as number[]"
+        :page-size="props.query.limit" :total="props.total" layout="total, sizes, prev, pager, next"
+        @size-change="handleSizeChange" @current-change="handleCurrentChange"
       />
     </div>
+    <!-- 自定义菜单 -->
+    <div id="custom-menu">
+      <p class="menu-item" @click="costomAddRow('current-pre')">
+        当前行前方插入
+      </p>
+      <p class="menu-item" @click="costomAddRow('current-next')">
+        当前行后方插入
+      </p>
+      <p class="menu-item" @click="costomAddRow('list-head')">
+        列表头行插入
+      </p>
+      <p class="menu-item" @click="costomAddRow('list-tail')">
+        列表尾行插入
+      </p>
+      <p v-if="isShowmultiSelect && isMulti" class="menu-item" @click="costomAddRow('select-pre')">
+        选中行前方插入
+      </p>
+      <!--  -->
+      <p v-if="isShowmultiSelect && isMulti" class="menu-item" @click="costomAddRow('select-next')">
+        选中行后方插入
+      </p>
+    </div>
   </div>
 </template>
 
 <style lang="scss" scoped>
+#custom-menu {
+  display: none;
+  position: fixed;
+  background-color: #fff;
+  border-radius: 5px;
+  padding: 5px 0;
+  z-index: 1000;
+  border: 1px solid #c8c9cc;
+  box-shadow: 0 0 12px rgb(0 0 0 / 12%);
+
+  .menu-item {
+    display: flex;
+    align-items: center;
+    white-space: nowrap;
+    list-style: none;
+    line-height: 22px;
+    padding: 5px 16px;
+    margin: 0;
+    // font-size: var(--el-font-size-base);
+    color: #606266;
+    cursor: pointer;
+    outline: none;
+
+    &:hover {
+      background-color: #ecf5ff;
+      color: #409eff;
+    }
+  }
+}
+
 #normal-table-com {
   width: 100%;
 }
diff --git a/src/components/TableContainer/index.vue b/src/components/TableContainer/index.vue
index 0c07be6..87b1567 100644
--- a/src/components/TableContainer/index.vue
+++ b/src/components/TableContainer/index.vue
@@ -71,16 +71,18 @@
   <config-dialog ref="configRef" @confirm="confirmColumns" />
   <div class="table-container">
     <div class="button-area">
-      <div v-if="titleShow" :class="props.isCenter ? 'title-center' : 'title-left'">
-        <el-icon v-if="isConfig" :size="21" class="icon-menu" @click="config">
-          <menu />
-        </el-icon>
-        <span>
-          {{ title }}
-        </span>
-      </div>
-      <div class="button-left">
-        <slot name="btns-left" />
+      <div style="display: flex;align-items: center;">
+        <div v-if="titleShow" :class="props.isCenter ? 'title-center' : 'title-left'">
+          <el-icon v-if="isConfig" :size="21" class="icon-menu" @click="config">
+            <menu />
+          </el-icon>
+          <span>
+            {{ title }}
+          </span>
+        </div>
+        <div class="button-left">
+          <slot name="btns-left" />
+        </div>
       </div>
       <div class="button-right">
         <slot name="btns-right" />
diff --git a/src/components/map/index.vue b/src/components/map/index.vue
index 55e37da..620c813 100644
--- a/src/components/map/index.vue
+++ b/src/components/map/index.vue
@@ -8,7 +8,7 @@
 import { styleType } from 'element-plus/es/components/table-v2/src/common'
 
 const $props = defineProps({
-  // 初始图层 normal satellite
+  // 初始图层 normal satellite dark
   layer: {
     type: String,
     default: 'normal',
@@ -35,8 +35,8 @@
 const layer = ref()
 // 图层标识
 const layerFlag = ref('normal')
-// const publicPath = import.meta.env.BASE_URL
-// console.log(publicPath, 'publicPath')
+const publicPath = import.meta.env.BASE_URL
+console.log(publicPath, 'publicPath')
 // -------------------------------------初始化地图--------------------------------------------------
 const initMap = () => {
   AMapLoader.load({
@@ -61,18 +61,22 @@
         map.value.setFeatures(['bg', 'building'])
         layerFlag.value = 'satellite'
       }
+      else if ($props.layer === 'dark') {
+        // 深色图层
+        map.value.setMapStyle('amap://styles/darkblue')
+      }
       // 地图图块加载完成后触发
       map.value.on('complete', () => {
         //  修改loading状态
         console.log('地图加载完成')
-        $emits('complete')
+        $emits('complete', AMap.value)
         loading.value = false
       })
       // 地图绑定右击事件
       map.value.on('mousedown', clickHandler)
     })
     .catch((e) => {
-      console.log('地图加载失败')
+      console.log(e, '地图加载失败')
     })
 }
 // ------------------------------------------------------------------------------------------------
@@ -156,7 +160,7 @@
 }
 // ------------------------------------------------------------------------------------------------
 
-// -------------------------------------标记本文操作--------------------------------------------------
+// -------------------------------------标记文本操作--------------------------------------------------
 // 标记文本数组
 const textAllList = ref<any>([])
 // 添加标记文字
@@ -282,6 +286,35 @@
   lineAllList.value = []
 }
 // ------------------------------------------------------------------------------------------------
+
+// -----------------------------------海量点标记操作------------------------------------------------
+// 点标记(海量点)数组
+const massMarksAllList = ref<any>([])
+// 添加点标记(海量点)
+const addMassMarks = (data: any) => {
+  /**
+     * data
+     * path: 折线点位数据  [{lnglat: [116.402394,39.937182],name: "南锣鼓巷", style: 1,}, ]
+     * style 样式
+     * zooms: 在指定地图缩放级别范围内展示海量点图层
+     * zIndex: 海量点图层叠加的顺序
+      */
+  var massMarks = new AMap.value.MassMarks(data.path, {
+    zIndex: data.zIndex, // 海量点图层叠加的顺序
+    zooms: data.zooms, // 在指定地图缩放级别范围内展示海量点图层
+    style: data.style, // 设置样式对象
+  })
+  massMarksAllList.value.push(massMarks)
+  massMarks.setMap(map)
+}
+// 移除点标记(海量点)
+const removeMassMarks = () => {
+  massMarksAllList.value.forEach((item: any) => {
+    item.setMap(null)
+  })
+  massMarksAllList.value = []
+}
+// ------------------------------------------------------------------------------------------------
 onMounted(() => {
   loading.value = true
   initMap()
@@ -302,6 +335,8 @@
   removeMarker, // 移除点标记 (一般点标记)
   addPolyline, // 添加折线
   removePolyline, // 移除折线
+  addMassMarks, // 添加点标记(海量点)
+  removeMassMarks, // 移除点标记(海量点)
 })
 </script>
 
diff --git a/src/layouts/components/Header/mobile.vue b/src/layouts/components/Header/mobile.vue
new file mode 100644
index 0000000..a27de4b
--- /dev/null
+++ b/src/layouts/components/Header/mobile.vue
@@ -0,0 +1,53 @@
+<!-- 移动端头部 -->
+<script lang="ts" setup name="HeaderMobile">
+import { ArrowLeftBold, House } from '@element-plus/icons-vue'
+const route = useRoute()
+const router = useRouter()
+const goBack = (type: 'back' | 'home') => {
+  if (type === 'back') {
+    router.go(-1)
+  }
+  else if (type === 'home') {
+    router.push('/')
+  }
+}
+</script>
+
+<template>
+  <div>
+    <div v-if="route.meta.isHeader" class="header-mobile">
+      <div v-if="route.meta.isBack">
+        <el-icon :size="25" @click="goBack('back')">
+          <arrow-left-bold />
+        </el-icon>
+      </div>
+      <div v-else style="width: 25px;" />
+      <div> {{ route.meta.title }}</div>
+      <el-icon v-if="route.meta.isHome" :size="25" @click="goBack('home')">
+        <house />
+      </el-icon>
+      <div v-else style="width: 25px;" />
+    </div>
+    <div v-if="route.meta.isHeader" class="occupying" />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.header-mobile {
+  width: 100%;
+  background-color: #70b4ff;
+  height: 35px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 10px;
+  position: fixed;
+  top: 0;
+}
+
+.occupying {
+  height: 35px;
+  background-color: transparent;
+  width: 100%;
+}
+</style>
diff --git a/src/layouts/mobile.vue b/src/layouts/mobile.vue
new file mode 100644
index 0000000..c6235a4
--- /dev/null
+++ b/src/layouts/mobile.vue
@@ -0,0 +1,47 @@
+<!-- 移动端基础布局组件 -->
+<script lang="ts" setup name="LayoutMobile">
+import headerMobile from './components/Header/mobile.vue'
+import useKeepAliveStore from '@/store/modules/keepAlive'
+const keepAliveStore = useKeepAliveStore()
+const routeInfo = useRoute()
+</script>
+
+<template>
+  <div class="layout">
+    <div id="app-main">
+      <!-- 头部 -->
+      <header-mobile />
+      <div class="wrapper">
+        <div class="main-container">
+          <div class="main">
+            <router-view v-slot="{ Component, route }">
+              <transition name="main" mode appear>
+                <keep-alive :include="keepAliveStore.list">
+                  <component :is="Component" :key="route.fullPath" />
+                </keep-alive>
+              </transition>
+            </router-view>
+          </div>
+          <copyright />
+        </div>
+      </div>
+      <el-backtop :right="20" :bottom="20" title="回到顶部" />
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.main {
+  overflow-x: hidden;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+
+  // firefox隐藏滚动条
+  scrollbar-width: none;
+
+  // chrome隐藏滚动条
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}
+</style>
diff --git a/src/main.ts b/src/main.ts
index 07c50a2..cb80c5d 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -19,35 +19,35 @@
 import { downloadAndInstall } from '@/iconify-ep'
 import { hasPermission } from '@/utils/composables/permission'
 import buttonPerm from '@/utils/buttonPerm'
-// 引入打印插件
 if (useSettingsStore().app.iconifyOfflineUse) {
   downloadAndInstall()
 }
-const app = createApp(App)
-app.config.globalProperties.hasPerm = hasPermission
-app.config.globalProperties.buttonPerm = buttonPerm
-app.config.globalProperties.dayjs = dayjs
-app.use(print)
-app.use(ElementPlus)
-app.use(pinia)
-app.use(router)
-for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
-  app.component(key, component)
-}
-directive(app)
 
 axios.get('./config/config.json', {
   headers: {
     'Cache-Control': 'no-cache',
   },
 }).then((result) => {
+  const app = createApp(App)
   console.log('get config')
+  console.log(window.localStorage.getItem('browser-type-bj-well'), 'mian中获取浏览器类型')
   console.log(result)
   window.localStorage.setItem('url-bj-well', result.data.baseUrl)
   window.localStorage.setItem('securityJsCode', result.data.securityJsCode)
   window.localStorage.setItem('JsKey', result.data.JsKey)
   request.defaults.baseURL = result.data.baseUrl // 设置默认请求网址
   app.config.globalProperties.config = result.data
+  app.config.globalProperties.hasPerm = hasPermission
+  app.config.globalProperties.buttonPerm = buttonPerm
+  app.config.globalProperties.dayjs = dayjs
+  app.use(print)
+  app.use(ElementPlus)
+  app.use(pinia)
+  app.use(router)
+  for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
+    app.component(key, component)
+  }
+  directive(app)
   app.mount('#app')
 }).catch((error) => {
   console.error(`get baseConfig error...${error}`)
diff --git a/src/router/modules/mobile.ts b/src/router/modules/mobile.ts
new file mode 100644
index 0000000..77618c1
--- /dev/null
+++ b/src/router/modules/mobile.ts
@@ -0,0 +1,31 @@
+// 移动端路由
+import type { Route } from '@/global'
+
+const Layout = () => import('@/layouts/mobile.vue')
+
+const routes: Route.recordRaw[] = [
+  {
+    path: '/home',
+    component: Layout,
+    redirect: '/home/index',
+    name: 'Home',
+    meta: {
+      title: '首页',
+    },
+    children: [
+      {
+        path: 'index',
+        component: () => import('@/views/mobile/example1/index.vue'),
+        name: 'HomeIndex',
+        meta: {
+          title: '首页',
+          isHeader: true, // 是否需要头部
+          isBack: true, // 是否需要返回按钮
+          isHome: false, // 是否需要回到首页按钮
+        },
+      },
+    ],
+  },
+]
+
+export default routes
diff --git a/src/router/routes.ts b/src/router/routes.ts
index ae91d6e..b1fdc27 100644
--- a/src/router/routes.ts
+++ b/src/router/routes.ts
@@ -2,6 +2,7 @@
 import generatedRoutes from 'virtual:generated-pages'
 // import commonRoute from './modules/system'
 import homeRoute from './modules/home'
+import mobileRoute from './modules/mobile'
 import type { Route } from '@/global'
 import useSettingsStore from '@/store/modules/settings'
 
@@ -31,12 +32,15 @@
     },
   },
 ]
-
+const userAgent = navigator.userAgent || navigator.vendor || window.opera
+const isMobile = /android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(userAgent)
+window.localStorage.setItem('browser-type-bj-well', `${isMobile ? 'mobile' : 'pc'}`)
+console.log(window.localStorage.getItem('browser-type-bj-well'), '路由中获取浏览器类型')
 // 系统路由
 const systemRoutes: Route.recordRaw[] = [
   {
     path: '/dashboard',
-    component: () => import('@/layouts/index.vue'),
+    component: isMobile ? null : () => import('@/layouts/index.vue'),
     meta: {
       title: () => useSettingsStore().dashboard.title,
       breadcrumb: false,
@@ -101,19 +105,27 @@
     ],
   },
 ]
-
 // 动态路由（异步路由、导航栏路由）
-const asyncRoutes: Route.recordMainRaw[] = [
-  {
-    meta: {
-      title: '',
-      icon: '',
+const asyncRoutes: Route.recordMainRaw[] = isMobile
+  ? [{ // 移动端路由
+      meta: {
+        title: '',
+        icon: '',
+      },
+      children: [
+        ...mobileRoute,
+      ],
+    }]
+  : [{ // pc端路由
+      meta: {
+        title: '',
+        icon: '',
+      },
+      children: [
+        ...homeRoute,
+      ],
     },
-    children: [
-      ...homeRoute,
-    ],
-  },
-]
+    ]
 
 const constantRoutesByFilesystem = generatedRoutes.filter((item) => {
   return item.meta?.enabled !== false && item.meta?.constant === true
diff --git "a/src/views/\133...all\135.vue" "b/src/views/\133...all\135.vue"
index 91af7e1..98ca1f9 100644
--- "a/src/views/\133...all\135.vue"
+++ "b/src/views/\133...all\135.vue"
@@ -51,30 +51,65 @@
 </template>
 
 <style lang="scss" scoped>
-.notfound {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  width: 700px;
+@media (min-width: 700px) {
+  .notfound {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 700px;
 
-  @include position-center(xy);
+    @include position-center(xy);
 
-  .icon {
-    width: 400px;
-    height: 400px;
-  }
-
-  .content {
-    h1 {
-      margin: 0;
-      font-size: 72px;
-      color: var(--el-text-color-primary);
+    .icon {
+      width: 400px;
+      height: 400px;
     }
 
-    .desc {
-      margin: 20px 0 30px;
-      font-size: 20px;
-      color: var(--el-text-color-secondary);
+    .content {
+      h1 {
+        margin: 0;
+        font-size: 72px;
+        color: var(--el-text-color-primary);
+      }
+
+      .desc {
+        margin: 20px 0 30px;
+        font-size: 20px;
+        color: var(--el-text-color-secondary);
+      }
+    }
+  }
+}
+
+@media (max-width: 700px) {
+  .notfound {
+    // display: flex;
+    // align-items: center;
+    // justify-content: space-between;
+    // width: 700px;
+    overflow: hidden;
+
+    @include position-center(xy);
+
+    .icon {
+      width: 350px;
+      height: 350px;
+    }
+
+    .content {
+      text-align: center !important;
+
+      h1 {
+        margin: 0;
+        font-size: 72px;
+        color: var(--el-text-color-primary);
+      }
+
+      .desc {
+        margin: 20px 0 30px;
+        font-size: 20px;
+        color: var(--el-text-color-secondary);
+      }
     }
   }
 }
diff --git a/src/views/home/dashboard/index.vue b/src/views/home/dashboard/index.vue
index 3fc5cec..a4b5f57 100644
--- a/src/views/home/dashboard/index.vue
+++ b/src/views/home/dashboard/index.vue
@@ -206,10 +206,10 @@
           <el-scrollbar height="200px">
             <div class="message-container">
               <div v-for="item in messageData" :key="item" class="message-item">
-                <span class="left">
+                <div class="left">
                   <span class="type">【{{ item.alarmTypeName }}】</span>
                   <span class="content">{{ item.alarmContent }}</span>
-                </span>
+                </div>
                 <span class="time">{{ item.alarmTime }}</span>
               </div>
             </div>
@@ -325,6 +325,9 @@
           flex-direction: column;
           text-align: center;
           width: 60%;
+          overflow: hidden;
+          white-space: nowrap;
+          text-overflow: ellipsis;
         }
       }
     }
@@ -341,24 +344,30 @@
         display: flex;
         justify-content: space-between;
         padding: 0 10px;
+        width: 100%;
 
         .left {
-          display: inline;
           width: 75%;
+          display: flex;
+          align-items: center;
+          overflow: hidden;
+          white-space: nowrap;
+          text-overflow: ellipsis;
         }
 
         .content {
           display: inline-block;
           padding-left: 10px;
           width: 65%;
-          // overflow: hidden;
-          // white-space: nowrap;
-          // text-overflow: ellipsis;
+          overflow: hidden;
+          white-space: nowrap;
+          text-overflow: ellipsis;
         }
 
         .time {
           font-size: 16px;
           color: #7c7777;
+          white-space: nowrap;
         }
       }
     }
diff --git a/src/views/home/device/type/index.vue b/src/views/home/device/type/index.vue
index ab687f7..c83bbc6 100644
--- a/src/views/home/device/type/index.vue
+++ b/src/views/home/device/type/index.vue
@@ -1,3 +1,142 @@
+<!--
+  Description: 设备管理-设备类型管理
+  Author: 李亚光
+  Date: 2023-07-15
+ -->
+<script lang="ts" setup name="DeviceTypeManage">
+// 表格数据
+const list = ref([
+  {
+    deviceType: '11',
+    deviceTypeName: '燃气智能监测终端',
+    desc: '燃气智能监测终端',
+    monitor: '井下燃气浓度',
+    alarmLimit: '是',
+    alarmLow: '是',
+    isEnable: '是',
+    time: '',
+  },
+  {
+    deviceType: '11',
+    deviceTypeName: '燃气智能监测终端',
+    desc: '燃气智能监测终端',
+    monitor: '井下燃气浓度',
+    alarmLimit: '是',
+    alarmLow: '是',
+    isEnable: '是',
+    time: '',
+  },
+  {
+    deviceType: '12',
+    deviceTypeName: '场站监测云台',
+    desc: '场站监测云台',
+    monitor: '场站内视频、燃气浓度',
+    alarmLimit: '是',
+    alarmLow: '是',
+    isEnable: '是',
+    time: '',
+  },
+])
+const total = ref(0)
+// 初始展示列
+const columns = ref<any>([
+  { text: '设备类型代号', value: 'deviceType', align: 'center' },
+  { text: '设备类型', value: 'deviceTypeName', align: 'center' },
+  { text: '描述', value: 'desc', align: 'center' },
+  { text: '监控内容', value: 'monitor', align: 'center' },
+  { text: '是否需要报警上限', value: 'alarmLimit', align: 'center' },
+  { text: '是否需要报警下限', value: 'alarmLow', align: 'center' },
+  { text: '是否启用', value: 'isEnable', align: 'center' },
+  { text: '最新操作时间', value: 'time', align: 'center' },
+])
+// 最终展示列
+const columnsConfig = ref([])
+// 修改列
+const editColumns = (data: any) => {
+  columnsConfig.value = data
+}
+const loadingTable = ref(true)
+//  查询条件
+const listQuery = ref({
+  limit: 20,
+  offset: 1,
+})
+// 查询数据
+const fetchData = () => {
+  setTimeout(() => {
+    loadingTable.value = false
+  })
+}
+// 重置查询条件f
+const reset = () => {
+
+}
+// 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
+const changePage = (val: { size: number; page: number }) => {
+  if (val && val.size) {
+    listQuery.value.limit = val.size
+  }
+  if (val && val.page) {
+    listQuery.value.offset = val.page
+  }
+  fetchData()
+}
+
+onMounted(() => {
+  fetchData()
+})
+</script>
+
 <template>
-  设备类型管理
+  <!-- 布局 -->
+  <app-container>
+    <!-- 筛选条件 -->
+    <search-area :need-clear="true" @search="fetchData" @clear="reset">
+      <search-item>
+        <el-select v-model="listQuery.keywords" placeholder="设备类型" clearable />
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.keywords" placeholder="是否启用" clearable />
+      </search-item>
+    </search-area>
+    <!-- 表头标题 -->
+    <table-container
+      :is-config="true" config-title="device-type" :columns="columns" :config-columns="columnsConfig"
+      :edit="editColumns"
+    >
+      <template #btns-right>
+        <!-- 操作 -->
+        <div>
+          <el-button type="primary">
+            新建
+          </el-button>
+        </div>
+      </template>
+      <!-- 查询结果Table显示 -->
+      <normal-table
+        :data="list" :total="total" :columns="columnsConfig" :query="listQuery" :list-loading="loadingTable"
+        @change="changePage"
+      >
+        <template #preColumns>
+          <el-table-column label="序号" width="55" align="center">
+            <template #default="scope">
+              {{ (listQuery.offset - 1) * listQuery.limit + scope.$index + 1 }}
+            </template>
+          </el-table-column>
+        </template>
+        <template #columns>
+          <el-table-column label="操作" align="center" width="120">
+            <template #default="scope">
+              <el-button type="primary" link size="small">
+                编辑 {{ scope.$index }}
+              </el-button>
+              <el-button type="danger" link size="small">
+                删除 {{ scope.$index }}
+              </el-button>
+            </template>
+          </el-table-column>
+        </template>
+      </normal-table>
+    </table-container>
+  </app-container>
 </template>
diff --git a/src/views/home/well/components/map.vue b/src/views/home/well/components/map.vue
new file mode 100644
index 0000000..5913db3
--- /dev/null
+++ b/src/views/home/well/components/map.vue
@@ -0,0 +1,26 @@
+<!--
+  Description: 闸井监测-地图
+  Author: 李亚光
+  Date: 2023-07-08
+ -->
+<script lang="ts" setup name="AlarmMap">
+import AMap from '@/components/map/index.vue'
+const $props = defineProps({
+  height: {
+    type: Number,
+    default: 0,
+  },
+})
+</script>
+
+<template>
+  <div :style="`height: ${$props.height}px`" class="map-container">
+    <a-map />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.map-container {
+  width: 100%;
+}
+</style>
diff --git a/src/views/home/well/index.vue b/src/views/home/well/index.vue
index 439816e..cc2059b 100644
--- a/src/views/home/well/index.vue
+++ b/src/views/home/well/index.vue
@@ -1,3 +1,230 @@
+<!--
+  Description: 闸井监测
+  Author: 李亚光
+  Date: 2023-07-12
+ -->
+<script lang="ts" setup name="WellMonitor">
+import { ElMessage } from 'element-plus'
+import { ArrowUpBold } from '@element-plus/icons-vue'
+import MapCom from './components/map.vue'
+// 表格数据
+const list = ref([
+  {
+    wellId: 'N57X508',
+    wellNo: '01110200745927',
+    name: '中压A闸1',
+    dept: '第一分公司/运维1所/1班',
+    property: '富源里小区',
+    manage: '自管',
+    use: '投用',
+    defence: '布防',
+    status: '正常',
+    device: '1',
+    tag: '',
+  },
+  {
+    wellId: 'N57X508',
+    wellNo: '01110200745927',
+    name: '中压A闸1',
+    dept: '第一分公司/运维1所/1班',
+    property: '富源里小区',
+    manage: '自管',
+    use: '停用',
+    defence: '撤防',
+    status: '正常',
+    device: '1',
+    tag: '',
+  },
+])
+const total = ref(0)
+// 初始展示列
+const columns = ref<any>([
+  { text: '闸井位号', value: 'wellId', align: 'center' },
+  { text: '闸井编号', value: 'wellNo', align: 'center' },
+  { text: '闸井名称', value: 'name', align: 'center' },
+  { text: '管理单位', value: 'dept', align: 'center' },
+  { text: '产权单位', value: 'property', align: 'center' },
+  { text: '管理方式', value: 'manage', align: 'center' },
+  { text: '使用状态', value: 'use', align: 'center' },
+  { text: '布防状态', value: 'defence', align: 'center' },
+  { text: '状态', value: 'status', align: 'center' },
+  { text: '感知设备', value: 'device', align: 'center' },
+  { text: '标签', value: 'tag', align: 'center' },
+])
+// 最终展示列
+const columnsConfig = ref([])
+// 修改列
+const editColumns = (data: any) => {
+  columnsConfig.value = data
+}
+const loadingTable = ref(true)
+//  查询条件
+const listQuery = ref({
+  limit: 20,
+  offset: 1,
+})
+// 开始结束时间
+const datetimerange = ref()
+watch(() => datetimerange.value, (newVal) => {
+  // listQuery.createTimeStart = ''
+  // listQuery.createTimeEnd = ''
+  if (Array.isArray(newVal)) {
+    if (newVal.length) {
+      // listQuery.createTimeStart = `${newVal[0]} 00:00:00`
+      // listQuery.createTimeEnd = `${newVal[1]} 23:59:59`
+    }
+  }
+})
+// 查询数据
+const fetchData = () => {
+  setTimeout(() => {
+    loadingTable.value = false
+  })
+}
+// 重置查询条件f
+const reset = () => {
+
+}
+// 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
+const changePage = (val: { size: number; page: number }) => {
+  if (val && val.size) {
+    listQuery.value.limit = val.size
+  }
+  if (val && val.page) {
+    listQuery.value.offset = val.page
+  }
+  fetchData()
+}
+
+onMounted(() => {
+  fetchData()
+})
+
+// 表格标识  地图或普通
+const tableFlag = ref('normal')
+const switchMode = (type: string) => {
+  if (!list.value.length) {
+    ElMessage.warning('暂无数据')
+    return
+  }
+  tableFlag.value = type
+}
+</script>
+
 <template>
-  闸井监测
+  <!-- 布局 -->
+  <app-container>
+    <!-- 地图 -->
+    <map-com v-if="tableFlag === 'map'" :height="350" />
+    <div v-if="tableFlag === 'map'" class="icon" @click="switchMode('normal')">
+      <el-icon :size="25">
+        <arrow-up-bold />
+      </el-icon>
+    </div>
+    <!-- 筛选条件 -->
+    <search-area :need-clear="true" @search="fetchData" @clear="reset">
+      <search-item>
+        <el-input v-model.trim="listQuery.keywords" placeholder="闸井位号" clearable />
+      </search-item>
+      <search-item>
+        <el-input v-model.trim="listQuery.keywords" placeholder="闸井编号" clearable />
+      </search-item>
+      <search-item>
+        <el-input v-model.trim="listQuery.keywords" placeholder="闸井编号" clearable />
+      </search-item>
+      <search-item>
+        <dept-select v-model="listQuery.keywords" placeholder="管理单位" :clearable="true" />
+      </search-item>
+      <search-item>
+        <el-input v-model.trim="listQuery.keywords" placeholder="产权单位" clearable />
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.keywords" placeholder="管理方式" clearable />
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.keywords" placeholder="使用状态" clearable />
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.keywords" placeholder="布防状态" clearable />
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.keywords" placeholder="监控状态" clearable />
+      </search-item>
+      <search-item>
+        <el-input v-model.trim="listQuery.keywords" placeholder="标签" clearable />
+      </search-item>
+    </search-area>
+    <!-- 表头标题 -->
+    <table-container
+      :is-config="true" config-title="well-monitor" :columns="columns" :config-columns="columnsConfig"
+      :edit="editColumns"
+    >
+      <template #btns-left>
+        <!-- 操作 -->
+        <div v-if="tableFlag === 'normal'" style="margin-left: 15px;">
+          <el-button type="primary" plain @click="switchMode('map')">
+            切换地图模式
+          </el-button>
+        </div>
+      </template>
+      <template #btns-right>
+        <!-- 操作 -->
+        <div>
+          <el-button type="primary">
+            导出
+          </el-button>
+        </div>
+      </template>
+      <!-- 查询结果Table显示 -->
+      <normal-table
+        :data="list" :total="total" :columns="columnsConfig" :query="listQuery" :list-loading="loadingTable"
+        @change="changePage"
+      >
+        <template #preColumns>
+          <!-- <el-table-column label="选择" width="55" align="center">
+              <template #default="scope">
+                <el-radio v-model="select" :label="scope.$index + 1" class="radio" />
+              </template>
+  </el-table-column> -->
+          <el-table-column label="序号" width="55" align="center">
+            <template #default="scope">
+              {{ (listQuery.offset - 1) * listQuery.limit + scope.$index + 1 }}
+            </template>
+          </el-table-column>
+        </template>
+        <template #columns>
+          <el-table-column label="布/撤防" align="center" width="80">
+            <template #default="scope">
+              <el-button type="primary" link size="small">
+                布防 {{ scope.$index }}
+              </el-button>
+            </template>
+          </el-table-column>
+          <el-table-column label="操作" align="center" width="120">
+            <template #default="scope">
+              <el-button type="primary" link size="small">
+                查看 {{ scope.$index }}
+              </el-button>
+              <el-button type="primary" link size="small">
+                编辑 {{ scope.$index }}
+              </el-button>
+            </template>
+          </el-table-column>
+        </template>
+      </normal-table>
+    </table-container>
+  </app-container>
 </template>
+
+<style lang="scss" scoped>
+.icon {
+  position: absolute;
+  top: 344px;
+  left: 50%;
+  transform: translateX(-50%);
+
+  &:hover {
+    cursor: pointer;
+  }
+}
+</style>
diff --git a/src/views/login-mobile.vue b/src/views/login-mobile.vue
new file mode 100644
index 0000000..b2eef7e
--- /dev/null
+++ b/src/views/login-mobile.vue
@@ -0,0 +1,19 @@
+<!-- 移动端登陆页面  -- elementplus -->
+<script lang="ts" setup name="Loginmobile">
+const route = useRoute()
+const router = useRouter()
+
+const handleLogin = () => {
+  router.push('/')
+}
+</script>
+
+<template>
+  <div>
+    移动端登陆页面
+  </div>
+
+  <el-button type="primary" size="large" @click="handleLogin">
+    基础测试
+  </el-button>
+</template>
diff --git a/src/views/login-pc.vue b/src/views/login-pc.vue
new file mode 100644
index 0000000..4cb3c1a
--- /dev/null
+++ b/src/views/login-pc.vue
@@ -0,0 +1,459 @@
+<route lang="yaml">
+meta:
+  title: 登录
+  constant: true
+  layout: false
+  </route>
+
+<script lang="ts" setup name="LoginPc">
+import type { FormInstance, FormRules } from 'element-plus'
+import { ElMessage } from 'element-plus'
+import useUserStore from '@/store/modules/user'
+import { RSAencrypt } from '@/utils/security'
+const route = useRoute()
+const router = useRouter()
+
+const userStore = useUserStore()
+
+const banner = new URL('../assets/images/login-banner.png', import.meta.url)
+  .href
+const title = import.meta.env.VITE_APP_TITLE
+
+// 表单类型，login 登录，reset 重置密码
+const formType = ref('login')
+// 加载状态
+const loading = ref(false)
+// 密码类型：password 密码
+const passwordType = ref('password')
+// 重定向路径
+const redirect = ref(route.query.redirect?.toString() ?? '/')
+// 是否需要验证码
+const showKaptcha = ref(false)
+// 公钥
+const publicKey = ref('')
+// sid
+const sid = ref('')
+
+// 获取系统基础配置： 公钥，是否开启验证码
+function getBaseConfig() {
+  userStore.getBaseConfig().then((res) => {
+    showKaptcha.value = res.kaptcha
+    publicKey.value = res.publicKey
+    sid.value = res.sid
+    ElMessage({
+      message: '连接服务器成功',
+      type: 'success',
+    })
+  })
+}
+
+// 登录
+const loginFormRef = ref<FormInstance>()
+const loginPasswordRef = ref<HTMLElement>()
+const loginForm = ref({
+  username: '',
+  password: '',
+  kaptcha: '',
+  remember: !!localStorage.login_username_bjwell,
+})
+const loginRules = ref<FormRules>({
+  username: [{ required: true, trigger: 'blur', message: '请输入用户名' }],
+  password: [
+    { required: true, trigger: 'blur', message: '请输入密码' },
+    { min: 6, max: 18, trigger: 'blur', message: '密码长度为6到18位' },
+  ],
+})
+
+// 处理登录
+function handleLogin() {
+  loginFormRef.value
+    && loginFormRef.value.validate(async (valid) => {
+      if (valid) {
+        loading.value = true
+        // 表单对象
+        const finalForm = {
+          sid: sid.value,
+          username: loginForm.value.username,
+          password: '',
+          kaptcha: loginForm.value.kaptcha,
+        }
+        // 加密
+        finalForm.password = await RSAencrypt(loginForm.value.password)
+        userStore
+          .login(finalForm)
+          .then(() => {
+            ElMessage({
+              message: '登录成功',
+              type: 'success',
+            })
+            loading.value = false
+            if (loginForm.value.remember) {
+              localStorage.setItem('login_username_bjwell', loginForm.value.username)
+            }
+            else {
+              localStorage.removeItem('login_username_bjwel')
+            }
+            router.push(redirect.value)
+          })
+          .catch(() => {
+            loading.value = false
+          })
+      }
+    })
+}
+// 注册
+const registerFormRef = ref<FormInstance>()
+const registerPasswordRef = ref<HTMLElement>()
+const registerCheckPasswordRef = ref<HTMLElement>()
+const registerForm = ref({
+  username: '',
+  captcha: '',
+  password: '',
+  checkPassword: '',
+})
+const registerRules = ref<FormRules>({
+  username: [{ required: true, trigger: 'blur', message: '请输入用户名' }],
+  captcha: [{ required: true, trigger: 'blur', message: '请输入验证码' }],
+  password: [
+    { required: true, trigger: 'blur', message: '请输入密码' },
+    { min: 6, max: 18, trigger: 'blur', message: '密码长度为6到18位' },
+  ],
+  checkPassword: [
+    { required: true, trigger: 'blur', message: '请再次输入密码' },
+    {
+      validator: (rule, value, callback) => {
+        if (value !== registerForm.value.password) {
+          callback(new Error('两次输入的密码不一致'))
+        }
+        else {
+          callback()
+        }
+      },
+    },
+  ],
+})
+function handleRegister() {
+  ElMessage({
+    message: '注册模块仅提供界面演示，无实际功能，需开发者自行扩展',
+    type: 'warning',
+  })
+  registerFormRef.value
+    && registerFormRef.value.validate((valid) => {
+      if (valid) {
+        // 这里编写业务代码
+      }
+    })
+}
+
+// 重置密码
+const resetFormRef = ref<FormInstance>()
+const resetNewPasswordRef = ref<HTMLElement>()
+const resetForm = ref({
+  username: localStorage.login_username || '',
+  captcha: '',
+  newPassword: '',
+})
+const resetRules = ref<FormRules>({
+  username: [{ required: true, trigger: 'blur', message: '请输入用户名' }],
+  captcha: [{ required: true, trigger: 'blur', message: '请输入验证码' }],
+  newPassword: [
+    { required: true, trigger: 'blur', message: '请输入新密码' },
+    { min: 6, max: 18, trigger: 'blur', message: '密码长度为6到18位' },
+  ],
+})
+function handleReset() {
+  ElMessage({
+    message: '重置密码模块仅提供界面演示，无实际功能，需开发者自行扩展',
+    type: 'warning',
+  })
+  resetFormRef.value
+    && resetFormRef.value.validate((valid) => {
+      if (valid) {
+        // 这里编写业务代码
+      }
+    })
+}
+
+function showPassword(passwordEl: HTMLElement | undefined) {
+  passwordType.value = passwordType.value === 'password' ? '' : 'password'
+  nextTick(() => {
+    passwordEl?.focus()
+  })
+}
+
+function testusername(username: string) {
+  loginForm.value.username = username
+  loginForm.value.password = '111111'
+  handleLogin()
+}
+onBeforeMount(() => {
+  loginForm.value.username = localStorage.login_username_bjwell || ''
+  getBaseConfig()
+})
+</script>
+
+<template>
+  <div>
+    <div class="bg-top-banner">
+      燃气物联感知平台
+    </div>
+    <div class="bg-banner" />
+    <div id="login-box">
+      <el-form
+        v-show="formType === 'login'" ref="loginFormRef" :model="loginForm" :rules="loginRules"
+        class="login-form" autocomplete="on"
+      >
+        <div class="title-container">
+          <h3 class="title">
+            用户登录
+          </h3>
+        </div>
+        <div>
+          <el-form-item prop="username">
+            <el-input ref="name" v-model="loginForm.username" placeholder="用户名" text tabindex="1" autocomplete="on">
+              <template #prefix>
+                <el-icon>
+                  <svg-icon name="ep:user" />
+                </el-icon>
+              </template>
+            </el-input>
+          </el-form-item>
+          <el-form-item prop="password">
+            <el-input
+              ref="loginPasswordRef" v-model="loginForm.password" :type="passwordType" placeholder="密码"
+              tabindex="2" autocomplete="on" @keyup.enter="handleLogin"
+            >
+              <template #prefix>
+                <el-icon>
+                  <svg-icon name="ep:lock" />
+                </el-icon>
+              </template>
+              <template #suffix>
+                <el-icon>
+                  <svg-icon
+                    :name="passwordType === 'password' ? 'eye' : 'eye-open'"
+                    @click="showPassword(loginPasswordRef)"
+                  />
+                </el-icon>
+              </template>
+            </el-input>
+          </el-form-item>
+        </div>
+        <div class="flex-bar">
+          <el-checkbox v-model="loginForm.remember">
+            记住我
+          </el-checkbox>
+        </div>
+        <el-button :loading="loading" type="primary" size="large" style="width: 100%;" @click.prevent="handleLogin">
+          登录
+        </el-button>
+        <div v-if="showKaptcha" style="margin-top: 20px; margin-bottom: -20px; text-align: center;">
+          <el-divider>演示账号一键登录</el-divider>
+          <el-button type="primary" size="small" plain @click="testusername('admin')">
+            admin
+          </el-button>
+          <el-button size="small" plain @click="testusername('test')">
+            test
+          </el-button>
+        </div>
+      </el-form>
+    </div>
+    <copyright />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+[data-mode="mobile"] {
+  #login-box {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    top: inherit;
+    left: inherit;
+    transform: translateX(0) translateY(0);
+    flex-direction: column;
+    justify-content: start;
+    border-radius: 0;
+    box-shadow: none;
+
+    .login-banner {
+      width: 100%;
+      padding: 20px 0;
+
+      .banner {
+        position: relative;
+        right: inherit;
+        width: 100%;
+        max-width: 375px;
+        margin: 0 auto;
+        display: inherit;
+        top: inherit;
+        transform: translateY(0);
+      }
+    }
+
+    .login-form {
+      width: 100%;
+      min-height: auto;
+      padding: 30px;
+    }
+  }
+
+  .copyright {
+    position: relative;
+    bottom: 0;
+    padding-bottom: 10px;
+  }
+}
+
+:deep(input[type="password"]::-ms-reveal) {
+  display: none;
+}
+
+.bg-top-banner {
+  position: fixed;
+  top: 0;
+  width: 100%;
+  height: 17vh;
+  z-index: 999;
+  line-height: 10vh;
+  text-align: center;
+  font-size: 30px;
+  color: #fff;
+  background: url("../assets/images/login-image/banner.png") no-repeat center / cover;
+}
+
+.bg-banner {
+  position: fixed;
+  z-index: 0;
+  width: 100%;
+  height: 100%;
+  // background: radial-gradient(circle at center, var(--el-fill-color-lighter), var(--el-bg-color-page));
+  background: url("../assets/images/login-image/bg.png") no-repeat center / cover;
+}
+
+#login-box {
+  display: flex;
+  justify-content: space-between;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translateX(-50%) translateY(-50%);
+  // background-color: var(--el-bg-color);
+
+  border-radius: 10px;
+  overflow: hidden;
+  box-shadow: var(--el-box-shadow);
+
+  .login-banner {
+    position: relative;
+    width: 450px;
+    background-color: var(--el-fill-color-light);
+    overflow: hidden;
+
+    .banner {
+      width: 100%;
+
+      @include position-center(y);
+    }
+
+    .logo {
+      position: absolute;
+      top: 20px;
+      left: 20px;
+      width: 30px;
+      height: 30px;
+      border-radius: 4px;
+      background: url("../assets/images/logo.png") no-repeat;
+      background-size: contain;
+      box-shadow: var(--el-box-shadow-light);
+    }
+  }
+
+  .login-form {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    min-height: 500px;
+    width: 500px;
+    padding: 50px;
+    background: url("../assets/images/login-image/frame.png") no-repeat center / cover;
+    overflow: hidden;
+
+    .title-container {
+      position: relative;
+
+      .title {
+        font-size: 1.3em;
+        color: #fff;
+        margin: 0 auto 30px;
+        text-align: center;
+        font-weight: bold;
+      }
+    }
+  }
+
+  .el-form-item {
+    margin-bottom: 24px;
+
+    :deep(.el-input) {
+      height: 48px;
+      line-height: inherit;
+      width: 100%;
+
+      input {
+        height: 48px;
+      }
+
+      .el-input__prefix,
+      .el-input__suffix {
+        display: flex;
+        align-items: center;
+      }
+
+      .el-input__prefix {
+        left: 10px;
+      }
+
+      .el-input__suffix {
+        right: 10px;
+      }
+    }
+  }
+
+  .flex-bar {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 20px;
+  }
+
+  .sub-link {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-top: 20px;
+    font-size: 14px;
+    color: var(--el-text-color-secondary);
+
+    .text {
+      margin-right: 10px;
+    }
+  }
+}
+
+.copyright {
+  position: absolute;
+  bottom: 30px;
+  width: 100%;
+  margin: 0;
+}
+
+:deep .el-input__wrapper {
+  background-color: transparent !important;
+}
+
+:deep .el-input__inner {
+  color: #fff !important;
+}
+</style>

diff --git a/src/App.vue b/src/App.vue
index 52ccd6e..a9268fb 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -6,7 +6,7 @@
 import useMenuStore from '@/store/modules/menu'
 
 const settingsStore = useSettingsStore()
-
+const $router = useRouter()
 const buttonConfig = ref({
   autoInsertSpace: true,
 })
@@ -81,14 +81,40 @@
 })
 
 onMounted(() => {
+  // // 浏览器访问当前位置
+  // if ('geolocation' in navigator) {
+  //   navigator.geolocation.getCurrentPosition(function (position) {
+  //     // 允许
+  //     console.log('纬度: ', position.coords.latitude)
+  //     console.log('经度: ', position.coords.longitude)
+  //   }, function (error) {
+  //     // 拒绝
+  //     console.error("Error Code = " + error.code + " - " + error.message);
+  //   })
+  // } else {
+  //   console.error("Geolocation is not supported by this browser.")
+  // }
   settingsStore.setMode(document.documentElement.clientWidth)
   window.onresize = () => {
     settingsStore.setMode(document.documentElement.clientWidth)
+    // 监听浏览器类型变化 刷新浏览器
+    const userAgent = navigator.userAgent || navigator.vendor || window.opera
+    const isMobile = /android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(userAgent)
+    if (`${isMobile ? 'mobile' : 'pc'}` !== window.localStorage.getItem('browser-type-bj-well')) {
+      // if (!window.localStorage.getItem('browser-type-bj-well')) { return }
+      console.log(`浏览器类型发生变化，由${window.localStorage.getItem('browser-type-bj-well')}变为${isMobile ? 'mobile' : 'pc'}`)
+      window.localStorage.setItem('browser-type-bj-well', `${isMobile ? 'mobile' : 'pc'}`)
+      $router.push('/')
+      setTimeout(() => {
+        window.location.reload()
+      }, 1000)
+    }
   }
   hotkeys('alt+i', () => {
     eventBus.emit('global-system-info-toggle')
   })
 })
+const browserType = window.localStorage.getItem('browser-type-bj-well') // mobile || pc
 </script>
 
 <template>
@@ -99,6 +125,6 @@
         '--g-sub-sidebar-actual-width': subSidebarActualWidth,
       }"
     />
-    <system-info />
+    <system-info v-if="browserType !== 'mobile'" />
   </el-config-provider>
 </template>
diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue
index e247e28..de24f71 100644
--- a/src/components/NormalTable/index.vue
+++ b/src/components/NormalTable/index.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup name="NormalTable">
 import type { Ref } from 'vue'
-import { ElTable } from 'element-plus'
+import { ElMessage, ElTable } from 'element-plus'
 import { defineExpose, ref } from 'vue'
 import type { TableColumn } from './table_interface'
 import TableColumnCom from './tableColumn.vue'
@@ -84,7 +84,11 @@
     type: String,
     default: 'default',
   }, // 表格大小，默认，small,mini等，与el-table条件相同
-  // 想要展示成链接的数据
+  // 是否要右击菜单
+  needContextmenu: {
+    type: Boolean,
+    default: false,
+  },
 })
 const emit = defineEmits(['change', 'selectionChange', 'rowClick', 'rowDbClick', 'multiSelect', 'filterChange', 'rowDisabled', 'handleClickFollowLink'])
 // -------定义数据--------------
@@ -148,8 +152,10 @@
 //   changeColumns()
 // })
 // 多选
+const multiSelectData = ref([])
 const handleSelectionChange = (val: any) => {
   // console.log(val)
+  multiSelectData.value = val
   emit('multiSelect', val)
 }
 // 单选选中
@@ -214,27 +220,87 @@
 const handleClickFollowLink = (row: any, title: string) => {
   emit('handleClickFollowLink', row, title)
 }
+
+// 右击当前行操作
+const clickIndex = ref(-1)
+const contextmenu = (row: any, column: any, event: Event, index: number) => {
+  if (!props.needContextmenu) { return }
+  // 阻止默认的右键菜单
+  event.preventDefault()
+  clickIndex.value = props.data.findIndex(item => item === row)
+  console.log('右击', clickIndex.value)
+  // 获取自定义菜单元素
+  var menu = document.getElementById('custom-menu')
+  // 设置自定义菜单的位置并显示
+  let positionX = event.pageX
+  let positionY = event.pageY
+  if (document.documentElement.clientHeight - event.pageY < 204) {
+    positionY = document.documentElement.clientHeight - 204 + 102
+  }
+  if (document.documentElement.clientWidth - event.pageX < 146) {
+    positionX = document.documentElement.clientWidth - 146
+  }
+  menu.style.top = `${positionY - 102}px`
+  menu.style.left = `${positionX}px`
+  menu.style.display = 'block'
+}
+// 点击其他位置隐藏自定义菜单
+document.addEventListener('click', () => {
+  document.getElementById('custom-menu').style.display = 'none'
+})
+// 添加行
+const costomAddRow = (type: string) => {
+  if (type === 'current-pre') {
+    // 当前行前方插入
+    props.data.splice(clickIndex.value, 0, JSON.parse(JSON.stringify(props.data[clickIndex.value])))
+  }
+  else if (type === 'current-next') {
+    // 当前行后方方插入
+    props.data.splice(clickIndex.value + 1, 0, JSON.parse(JSON.stringify(props.data[clickIndex.value])))
+  }
+  else if (type === 'list-head') {
+    // 列表头行插入
+    props.data.splice(0, 0, JSON.parse(JSON.stringify(props.data[clickIndex.value])))
+  }
+  else if (type === 'list-tail') {
+    // 列表尾行插入
+    props.data.splice(props.data.length, 0, JSON.parse(JSON.stringify(props.data[clickIndex.value])))
+  }
+  else if (type === 'select-pre') {
+    // 选中行前方插入
+    if (!multiSelectData.value.length) {
+      ElMessage.warning('未选择数据')
+      return
+    }
+    multiSelectData.value.forEach((item, index) => {
+      const dataIndex = props.data.findIndex(citem => item === citem)
+      props.data.splice(dataIndex, 0, JSON.parse(JSON.stringify(item)))
+    })
+    table.value!.clearSelection()
+  }
+  else if (type === 'select-next') {
+    // 选中行后方插入
+    if (!multiSelectData.value.length) {
+      ElMessage.warning('未选择数据')
+      return
+    }
+    multiSelectData.value.forEach((item, index) => {
+      const dataIndex = props.data.findIndex(citem => item === citem)
+      props.data.splice(dataIndex + 1, 0, JSON.parse(JSON.stringify(item)))
+    })
+    table.value!.clearSelection()
+  }
+  clickIndex.value = -1
+}
 </script>
 
 <template>
   <div id="normal-table-com">
     <el-table
-      id="print"
-      ref="table"
-      v-loading="listLoading"
-      :data="data"
-      :height="height"
-      border
-      stripe
-      :size="size"
-      style="width: 100%;"
-      :row-key="(row) => { return row.id || row.index }"
-      :span-method="mergeTableRow"
-      @selection-change="handleSelectionChange"
-      @select="selectClick"
-      @row-click="rowClick"
-      @row-dblclick="rowDbClick"
-      @filter-change="filterChange"
+      id="print" ref="table" v-loading="listLoading" :data="data" :height="height" border stripe :size="size"
+      style="width: 100%;" :row-key="(row) => { return row.id || row.index }" :span-method="mergeTableRow"
+      @selection-change="handleSelectionChange" @select="selectClick" @row-click="rowClick" @row-dblclick="rowDbClick"
+      @filter-change="filterChange" @row-contextmenu="contextmenu"
     >
       <slot name="preColumns" />
 
@@ -243,45 +309,48 @@
           <el-radio v-model="singleChecked" :label="scope.row.id" class="radio" @change="radioChange" />
         </template>
       </el-table-column>
-      <el-table-column v-if="isShowmultiSelect && isMulti" :reserve-selection="true" type="selection" width="38" :selectable="selectable" fixed="left" />
+      <el-table-column
+        v-if="isShowmultiSelect && isMulti" :reserve-selection="true" type="selection" width="38"
+        :selectable="selectable" fixed="left"
+      />
       <template v-for="column of columns" :key="column.value">
         <el-table-column
-          v-if="!column.isFilters"
-          :label="column.text"
-          :prop="column.value"
-          :width="column.width"
-          :align="column.align"
-          :show-overflow-tooltip="column.showOverflow ? column.showOverflow : true"
+          v-if="!column.isFilters" :label="column.text" :prop="column.value" :width="column.width"
+          :align="column.align" :show-overflow-tooltip="column.showOverflow ? column.showOverflow : true"
           :fixed="column.fixed"
         >
           <template #default="scope">
-            <span v-if="!column.filter && !column.isLink" :style="column.styleFilter ? column.styleFilter(scope.row) : ''">{{ scope.row[column.value] }}</span>
-            <span v-if="column.filter && !column.isLink" :style="column.styleFilter ? column.styleFilter(scope.row) : ''">{{ column.filter(scope.row) }}</span>
+            <span
+              v-if="!column.filter && !column.isLink"
+              :style="column.styleFilter ? column.styleFilter(scope.row) : ''"
+            >{{ scope.row[column.value] }}</span>
+            <span
+              v-if="column.filter && !column.isLink"
+              :style="column.styleFilter ? column.styleFilter(scope.row) : ''"
+            >{{ column.filter(scope.row) }}</span>
             <div v-if="column.isLink">
               <show-photo v-for="(item, index) in scope.row.fileArr" :key="index" :minio-file-name="item" /><br>
             </div>
             <div v-if="column.followLink">
-              <div v-for="(item, index) in scope.row.followLinkArr" :key="index" @click="handleClickFollowLink(scope.row, item)">
+              <div
+                v-for="(item, index) in scope.row.followLinkArr" :key="index"
+                @click="handleClickFollowLink(scope.row, item)"
+              >
                 <span :class="item !== '/' ? 'follow-link' : ''">{{ item }}</span>
               </div>
             </div>
           </template>
         </el-table-column>
         <el-table-column
-          v-if="column.isFilters"
-          :label="column.text"
-          :prop="column.value"
-          :width="column.width"
-          :align="column.align"
-          :show-overflow-tooltip="column.showOverflow ? column.showOverflow : true"
-          :fixed="column.fixed"
-          :column-key="column.value"
-          :filters="column.filters"
-          :filter-multiple="false"
+          v-if="column.isFilters" :label="column.text" :prop="column.value" :width="column.width"
+          :align="column.align" :show-overflow-tooltip="column.showOverflow ? column.showOverflow : true"
+          :fixed="column.fixed" :column-key="column.value" :filters="column.filters" :filter-multiple="false"
         >
           <template #default="scope">
-            <span v-if="!column.filter" :style="column.styleFilter ? column.styleFilter(scope.row) : ''">{{ scope.row[column.value] }}</span>
-            <span v-else :style="column.styleFilter ? column.styleFilter(scope.row) : ''">{{ column.filter(scope.row) }}</span>
+            <span v-if="!column.filter" :style="column.styleFilter ? column.styleFilter(scope.row) : ''">{{
+              scope.row[column.value] }}</span>
+            <span v-else :style="column.styleFilter ? column.styleFilter(scope.row) : ''">{{ column.filter(scope.row)
+            }}</span>
           </template>
         </el-table-column>
       </template>
@@ -290,19 +359,67 @@
     </el-table>
     <div v-if="props.pagination" style="width: 100%;margin-top: 10px;">
       <el-pagination
-        :current-page="props.query.offset"
-        :page-sizes="props.pageSizes as number[]"
-        :page-size="props.query.limit"
-        :total="props.total"
-        layout="total, sizes, prev, pager, next"
-        @size-change="handleSizeChange"
-        @current-change="handleCurrentChange"
+        :current-page="props.query.offset" :page-sizes="props.pageSizes as number[]"
+        :page-size="props.query.limit" :total="props.total" layout="total, sizes, prev, pager, next"
+        @size-change="handleSizeChange" @current-change="handleCurrentChange"
       />
     </div>
+    <!-- 自定义菜单 -->
+    <div id="custom-menu">
+      <p class="menu-item" @click="costomAddRow('current-pre')">
+        当前行前方插入
+      </p>
+      <p class="menu-item" @click="costomAddRow('current-next')">
+        当前行后方插入
+      </p>
+      <p class="menu-item" @click="costomAddRow('list-head')">
+        列表头行插入
+      </p>
+      <p class="menu-item" @click="costomAddRow('list-tail')">
+        列表尾行插入
+      </p>
+      <p v-if="isShowmultiSelect && isMulti" class="menu-item" @click="costomAddRow('select-pre')">
+        选中行前方插入
+      </p>
+      <!--  -->
+      <p v-if="isShowmultiSelect && isMulti" class="menu-item" @click="costomAddRow('select-next')">
+        选中行后方插入
+      </p>
+    </div>
   </div>
 </template>
 
 <style lang="scss" scoped>
+#custom-menu {
+  display: none;
+  position: fixed;
+  background-color: #fff;
+  border-radius: 5px;
+  padding: 5px 0;
+  z-index: 1000;
+  border: 1px solid #c8c9cc;
+  box-shadow: 0 0 12px rgb(0 0 0 / 12%);
+
+  .menu-item {
+    display: flex;
+    align-items: center;
+    white-space: nowrap;
+    list-style: none;
+    line-height: 22px;
+    padding: 5px 16px;
+    margin: 0;
+    // font-size: var(--el-font-size-base);
+    color: #606266;
+    cursor: pointer;
+    outline: none;
+
+    &:hover {
+      background-color: #ecf5ff;
+      color: #409eff;
+    }
+  }
+}
+
 #normal-table-com {
   width: 100%;
 }
diff --git a/src/components/TableContainer/index.vue b/src/components/TableContainer/index.vue
index 0c07be6..87b1567 100644
--- a/src/components/TableContainer/index.vue
+++ b/src/components/TableContainer/index.vue
@@ -71,16 +71,18 @@
   <config-dialog ref="configRef" @confirm="confirmColumns" />
   <div class="table-container">
     <div class="button-area">
-      <div v-if="titleShow" :class="props.isCenter ? 'title-center' : 'title-left'">
-        <el-icon v-if="isConfig" :size="21" class="icon-menu" @click="config">
-          <menu />
-        </el-icon>
-        <span>
-          {{ title }}
-        </span>
-      </div>
-      <div class="button-left">
-        <slot name="btns-left" />
+      <div style="display: flex;align-items: center;">
+        <div v-if="titleShow" :class="props.isCenter ? 'title-center' : 'title-left'">
+          <el-icon v-if="isConfig" :size="21" class="icon-menu" @click="config">
+            <menu />
+          </el-icon>
+          <span>
+            {{ title }}
+          </span>
+        </div>
+        <div class="button-left">
+          <slot name="btns-left" />
+        </div>
       </div>
       <div class="button-right">
         <slot name="btns-right" />
diff --git a/src/components/map/index.vue b/src/components/map/index.vue
index 55e37da..620c813 100644
--- a/src/components/map/index.vue
+++ b/src/components/map/index.vue
@@ -8,7 +8,7 @@
 import { styleType } from 'element-plus/es/components/table-v2/src/common'
 
 const $props = defineProps({
-  // 初始图层 normal satellite
+  // 初始图层 normal satellite dark
   layer: {
     type: String,
     default: 'normal',
@@ -35,8 +35,8 @@
 const layer = ref()
 // 图层标识
 const layerFlag = ref('normal')
-// const publicPath = import.meta.env.BASE_URL
-// console.log(publicPath, 'publicPath')
+const publicPath = import.meta.env.BASE_URL
+console.log(publicPath, 'publicPath')
 // -------------------------------------初始化地图--------------------------------------------------
 const initMap = () => {
   AMapLoader.load({
@@ -61,18 +61,22 @@
         map.value.setFeatures(['bg', 'building'])
         layerFlag.value = 'satellite'
       }
+      else if ($props.layer === 'dark') {
+        // 深色图层
+        map.value.setMapStyle('amap://styles/darkblue')
+      }
       // 地图图块加载完成后触发
       map.value.on('complete', () => {
         //  修改loading状态
         console.log('地图加载完成')
-        $emits('complete')
+        $emits('complete', AMap.value)
         loading.value = false
       })
       // 地图绑定右击事件
       map.value.on('mousedown', clickHandler)
     })
     .catch((e) => {
-      console.log('地图加载失败')
+      console.log(e, '地图加载失败')
     })
 }
 // ------------------------------------------------------------------------------------------------
@@ -156,7 +160,7 @@
 }
 // ------------------------------------------------------------------------------------------------
 
-// -------------------------------------标记本文操作--------------------------------------------------
+// -------------------------------------标记文本操作--------------------------------------------------
 // 标记文本数组
 const textAllList = ref<any>([])
 // 添加标记文字
@@ -282,6 +286,35 @@
   lineAllList.value = []
 }
 // ------------------------------------------------------------------------------------------------
+
+// -----------------------------------海量点标记操作------------------------------------------------
+// 点标记(海量点)数组
+const massMarksAllList = ref<any>([])
+// 添加点标记(海量点)
+const addMassMarks = (data: any) => {
+  /**
+     * data
+     * path: 折线点位数据  [{lnglat: [116.402394,39.937182],name: "南锣鼓巷", style: 1,}, ]
+     * style 样式
+     * zooms: 在指定地图缩放级别范围内展示海量点图层
+     * zIndex: 海量点图层叠加的顺序
+      */
+  var massMarks = new AMap.value.MassMarks(data.path, {
+    zIndex: data.zIndex, // 海量点图层叠加的顺序
+    zooms: data.zooms, // 在指定地图缩放级别范围内展示海量点图层
+    style: data.style, // 设置样式对象
+  })
+  massMarksAllList.value.push(massMarks)
+  massMarks.setMap(map)
+}
+// 移除点标记(海量点)
+const removeMassMarks = () => {
+  massMarksAllList.value.forEach((item: any) => {
+    item.setMap(null)
+  })
+  massMarksAllList.value = []
+}
+// ------------------------------------------------------------------------------------------------
 onMounted(() => {
   loading.value = true
   initMap()
@@ -302,6 +335,8 @@
   removeMarker, // 移除点标记 (一般点标记)
   addPolyline, // 添加折线
   removePolyline, // 移除折线
+  addMassMarks, // 添加点标记(海量点)
+  removeMassMarks, // 移除点标记(海量点)
 })
 </script>
 
diff --git a/src/layouts/components/Header/mobile.vue b/src/layouts/components/Header/mobile.vue
new file mode 100644
index 0000000..a27de4b
--- /dev/null
+++ b/src/layouts/components/Header/mobile.vue
@@ -0,0 +1,53 @@
+<!-- 移动端头部 -->
+<script lang="ts" setup name="HeaderMobile">
+import { ArrowLeftBold, House } from '@element-plus/icons-vue'
+const route = useRoute()
+const router = useRouter()
+const goBack = (type: 'back' | 'home') => {
+  if (type === 'back') {
+    router.go(-1)
+  }
+  else if (type === 'home') {
+    router.push('/')
+  }
+}
+</script>
+
+<template>
+  <div>
+    <div v-if="route.meta.isHeader" class="header-mobile">
+      <div v-if="route.meta.isBack">
+        <el-icon :size="25" @click="goBack('back')">
+          <arrow-left-bold />
+        </el-icon>
+      </div>
+      <div v-else style="width: 25px;" />
+      <div> {{ route.meta.title }}</div>
+      <el-icon v-if="route.meta.isHome" :size="25" @click="goBack('home')">
+        <house />
+      </el-icon>
+      <div v-else style="width: 25px;" />
+    </div>
+    <div v-if="route.meta.isHeader" class="occupying" />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.header-mobile {
+  width: 100%;
+  background-color: #70b4ff;
+  height: 35px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 10px;
+  position: fixed;
+  top: 0;
+}
+
+.occupying {
+  height: 35px;
+  background-color: transparent;
+  width: 100%;
+}
+</style>
diff --git a/src/layouts/mobile.vue b/src/layouts/mobile.vue
new file mode 100644
index 0000000..c6235a4
--- /dev/null
+++ b/src/layouts/mobile.vue
@@ -0,0 +1,47 @@
+<!-- 移动端基础布局组件 -->
+<script lang="ts" setup name="LayoutMobile">
+import headerMobile from './components/Header/mobile.vue'
+import useKeepAliveStore from '@/store/modules/keepAlive'
+const keepAliveStore = useKeepAliveStore()
+const routeInfo = useRoute()
+</script>
+
+<template>
+  <div class="layout">
+    <div id="app-main">
+      <!-- 头部 -->
+      <header-mobile />
+      <div class="wrapper">
+        <div class="main-container">
+          <div class="main">
+            <router-view v-slot="{ Component, route }">
+              <transition name="main" mode appear>
+                <keep-alive :include="keepAliveStore.list">
+                  <component :is="Component" :key="route.fullPath" />
+                </keep-alive>
+              </transition>
+            </router-view>
+          </div>
+          <copyright />
+        </div>
+      </div>
+      <el-backtop :right="20" :bottom="20" title="回到顶部" />
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.main {
+  overflow-x: hidden;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+
+  // firefox隐藏滚动条
+  scrollbar-width: none;
+
+  // chrome隐藏滚动条
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}
+</style>
diff --git a/src/main.ts b/src/main.ts
index 07c50a2..cb80c5d 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -19,35 +19,35 @@
 import { downloadAndInstall } from '@/iconify-ep'
 import { hasPermission } from '@/utils/composables/permission'
 import buttonPerm from '@/utils/buttonPerm'
-// 引入打印插件
 if (useSettingsStore().app.iconifyOfflineUse) {
   downloadAndInstall()
 }
-const app = createApp(App)
-app.config.globalProperties.hasPerm = hasPermission
-app.config.globalProperties.buttonPerm = buttonPerm
-app.config.globalProperties.dayjs = dayjs
-app.use(print)
-app.use(ElementPlus)
-app.use(pinia)
-app.use(router)
-for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
-  app.component(key, component)
-}
-directive(app)
 
 axios.get('./config/config.json', {
   headers: {
     'Cache-Control': 'no-cache',
   },
 }).then((result) => {
+  const app = createApp(App)
   console.log('get config')
+  console.log(window.localStorage.getItem('browser-type-bj-well'), 'mian中获取浏览器类型')
   console.log(result)
   window.localStorage.setItem('url-bj-well', result.data.baseUrl)
   window.localStorage.setItem('securityJsCode', result.data.securityJsCode)
   window.localStorage.setItem('JsKey', result.data.JsKey)
   request.defaults.baseURL = result.data.baseUrl // 设置默认请求网址
   app.config.globalProperties.config = result.data
+  app.config.globalProperties.hasPerm = hasPermission
+  app.config.globalProperties.buttonPerm = buttonPerm
+  app.config.globalProperties.dayjs = dayjs
+  app.use(print)
+  app.use(ElementPlus)
+  app.use(pinia)
+  app.use(router)
+  for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
+    app.component(key, component)
+  }
+  directive(app)
   app.mount('#app')
 }).catch((error) => {
   console.error(`get baseConfig error...${error}`)
diff --git a/src/router/modules/mobile.ts b/src/router/modules/mobile.ts
new file mode 100644
index 0000000..77618c1
--- /dev/null
+++ b/src/router/modules/mobile.ts
@@ -0,0 +1,31 @@
+// 移动端路由
+import type { Route } from '@/global'
+
+const Layout = () => import('@/layouts/mobile.vue')
+
+const routes: Route.recordRaw[] = [
+  {
+    path: '/home',
+    component: Layout,
+    redirect: '/home/index',
+    name: 'Home',
+    meta: {
+      title: '首页',
+    },
+    children: [
+      {
+        path: 'index',
+        component: () => import('@/views/mobile/example1/index.vue'),
+        name: 'HomeIndex',
+        meta: {
+          title: '首页',
+          isHeader: true, // 是否需要头部
+          isBack: true, // 是否需要返回按钮
+          isHome: false, // 是否需要回到首页按钮
+        },
+      },
+    ],
+  },
+]
+
+export default routes
diff --git a/src/router/routes.ts b/src/router/routes.ts
index ae91d6e..b1fdc27 100644
--- a/src/router/routes.ts
+++ b/src/router/routes.ts
@@ -2,6 +2,7 @@
 import generatedRoutes from 'virtual:generated-pages'
 // import commonRoute from './modules/system'
 import homeRoute from './modules/home'
+import mobileRoute from './modules/mobile'
 import type { Route } from '@/global'
 import useSettingsStore from '@/store/modules/settings'
 
@@ -31,12 +32,15 @@
     },
   },
 ]
-
+const userAgent = navigator.userAgent || navigator.vendor || window.opera
+const isMobile = /android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(userAgent)
+window.localStorage.setItem('browser-type-bj-well', `${isMobile ? 'mobile' : 'pc'}`)
+console.log(window.localStorage.getItem('browser-type-bj-well'), '路由中获取浏览器类型')
 // 系统路由
 const systemRoutes: Route.recordRaw[] = [
   {
     path: '/dashboard',
-    component: () => import('@/layouts/index.vue'),
+    component: isMobile ? null : () => import('@/layouts/index.vue'),
     meta: {
       title: () => useSettingsStore().dashboard.title,
       breadcrumb: false,
@@ -101,19 +105,27 @@
     ],
   },
 ]
-
 // 动态路由（异步路由、导航栏路由）
-const asyncRoutes: Route.recordMainRaw[] = [
-  {
-    meta: {
-      title: '',
-      icon: '',
+const asyncRoutes: Route.recordMainRaw[] = isMobile
+  ? [{ // 移动端路由
+      meta: {
+        title: '',
+        icon: '',
+      },
+      children: [
+        ...mobileRoute,
+      ],
+    }]
+  : [{ // pc端路由
+      meta: {
+        title: '',
+        icon: '',
+      },
+      children: [
+        ...homeRoute,
+      ],
     },
-    children: [
-      ...homeRoute,
-    ],
-  },
-]
+    ]
 
 const constantRoutesByFilesystem = generatedRoutes.filter((item) => {
   return item.meta?.enabled !== false && item.meta?.constant === true
diff --git "a/src/views/\133...all\135.vue" "b/src/views/\133...all\135.vue"
index 91af7e1..98ca1f9 100644
--- "a/src/views/\133...all\135.vue"
+++ "b/src/views/\133...all\135.vue"
@@ -51,30 +51,65 @@
 </template>
 
 <style lang="scss" scoped>
-.notfound {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  width: 700px;
+@media (min-width: 700px) {
+  .notfound {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 700px;
 
-  @include position-center(xy);
+    @include position-center(xy);
 
-  .icon {
-    width: 400px;
-    height: 400px;
-  }
-
-  .content {
-    h1 {
-      margin: 0;
-      font-size: 72px;
-      color: var(--el-text-color-primary);
+    .icon {
+      width: 400px;
+      height: 400px;
     }
 
-    .desc {
-      margin: 20px 0 30px;
-      font-size: 20px;
-      color: var(--el-text-color-secondary);
+    .content {
+      h1 {
+        margin: 0;
+        font-size: 72px;
+        color: var(--el-text-color-primary);
+      }
+
+      .desc {
+        margin: 20px 0 30px;
+        font-size: 20px;
+        color: var(--el-text-color-secondary);
+      }
+    }
+  }
+}
+
+@media (max-width: 700px) {
+  .notfound {
+    // display: flex;
+    // align-items: center;
+    // justify-content: space-between;
+    // width: 700px;
+    overflow: hidden;
+
+    @include position-center(xy);
+
+    .icon {
+      width: 350px;
+      height: 350px;
+    }
+
+    .content {
+      text-align: center !important;
+
+      h1 {
+        margin: 0;
+        font-size: 72px;
+        color: var(--el-text-color-primary);
+      }
+
+      .desc {
+        margin: 20px 0 30px;
+        font-size: 20px;
+        color: var(--el-text-color-secondary);
+      }
     }
   }
 }
diff --git a/src/views/home/dashboard/index.vue b/src/views/home/dashboard/index.vue
index 3fc5cec..a4b5f57 100644
--- a/src/views/home/dashboard/index.vue
+++ b/src/views/home/dashboard/index.vue
@@ -206,10 +206,10 @@
           <el-scrollbar height="200px">
             <div class="message-container">
               <div v-for="item in messageData" :key="item" class="message-item">
-                <span class="left">
+                <div class="left">
                   <span class="type">【{{ item.alarmTypeName }}】</span>
                   <span class="content">{{ item.alarmContent }}</span>
-                </span>
+                </div>
                 <span class="time">{{ item.alarmTime }}</span>
               </div>
             </div>
@@ -325,6 +325,9 @@
           flex-direction: column;
           text-align: center;
           width: 60%;
+          overflow: hidden;
+          white-space: nowrap;
+          text-overflow: ellipsis;
         }
       }
     }
@@ -341,24 +344,30 @@
         display: flex;
         justify-content: space-between;
         padding: 0 10px;
+        width: 100%;
 
         .left {
-          display: inline;
           width: 75%;
+          display: flex;
+          align-items: center;
+          overflow: hidden;
+          white-space: nowrap;
+          text-overflow: ellipsis;
         }
 
         .content {
           display: inline-block;
           padding-left: 10px;
           width: 65%;
-          // overflow: hidden;
-          // white-space: nowrap;
-          // text-overflow: ellipsis;
+          overflow: hidden;
+          white-space: nowrap;
+          text-overflow: ellipsis;
         }
 
         .time {
           font-size: 16px;
           color: #7c7777;
+          white-space: nowrap;
         }
       }
     }
diff --git a/src/views/home/device/type/index.vue b/src/views/home/device/type/index.vue
index ab687f7..c83bbc6 100644
--- a/src/views/home/device/type/index.vue
+++ b/src/views/home/device/type/index.vue
@@ -1,3 +1,142 @@
+<!--
+  Description: 设备管理-设备类型管理
+  Author: 李亚光
+  Date: 2023-07-15
+ -->
+<script lang="ts" setup name="DeviceTypeManage">
+// 表格数据
+const list = ref([
+  {
+    deviceType: '11',
+    deviceTypeName: '燃气智能监测终端',
+    desc: '燃气智能监测终端',
+    monitor: '井下燃气浓度',
+    alarmLimit: '是',
+    alarmLow: '是',
+    isEnable: '是',
+    time: '',
+  },
+  {
+    deviceType: '11',
+    deviceTypeName: '燃气智能监测终端',
+    desc: '燃气智能监测终端',
+    monitor: '井下燃气浓度',
+    alarmLimit: '是',
+    alarmLow: '是',
+    isEnable: '是',
+    time: '',
+  },
+  {
+    deviceType: '12',
+    deviceTypeName: '场站监测云台',
+    desc: '场站监测云台',
+    monitor: '场站内视频、燃气浓度',
+    alarmLimit: '是',
+    alarmLow: '是',
+    isEnable: '是',
+    time: '',
+  },
+])
+const total = ref(0)
+// 初始展示列
+const columns = ref<any>([
+  { text: '设备类型代号', value: 'deviceType', align: 'center' },
+  { text: '设备类型', value: 'deviceTypeName', align: 'center' },
+  { text: '描述', value: 'desc', align: 'center' },
+  { text: '监控内容', value: 'monitor', align: 'center' },
+  { text: '是否需要报警上限', value: 'alarmLimit', align: 'center' },
+  { text: '是否需要报警下限', value: 'alarmLow', align: 'center' },
+  { text: '是否启用', value: 'isEnable', align: 'center' },
+  { text: '最新操作时间', value: 'time', align: 'center' },
+])
+// 最终展示列
+const columnsConfig = ref([])
+// 修改列
+const editColumns = (data: any) => {
+  columnsConfig.value = data
+}
+const loadingTable = ref(true)
+//  查询条件
+const listQuery = ref({
+  limit: 20,
+  offset: 1,
+})
+// 查询数据
+const fetchData = () => {
+  setTimeout(() => {
+    loadingTable.value = false
+  })
+}
+// 重置查询条件f
+const reset = () => {
+
+}
+// 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
+const changePage = (val: { size: number; page: number }) => {
+  if (val && val.size) {
+    listQuery.value.limit = val.size
+  }
+  if (val && val.page) {
+    listQuery.value.offset = val.page
+  }
+  fetchData()
+}
+
+onMounted(() => {
+  fetchData()
+})
+</script>
+
 <template>
-  设备类型管理
+  <!-- 布局 -->
+  <app-container>
+    <!-- 筛选条件 -->
+    <search-area :need-clear="true" @search="fetchData" @clear="reset">
+      <search-item>
+        <el-select v-model="listQuery.keywords" placeholder="设备类型" clearable />
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.keywords" placeholder="是否启用" clearable />
+      </search-item>
+    </search-area>
+    <!-- 表头标题 -->
+    <table-container
+      :is-config="true" config-title="device-type" :columns="columns" :config-columns="columnsConfig"
+      :edit="editColumns"
+    >
+      <template #btns-right>
+        <!-- 操作 -->
+        <div>
+          <el-button type="primary">
+            新建
+          </el-button>
+        </div>
+      </template>
+      <!-- 查询结果Table显示 -->
+      <normal-table
+        :data="list" :total="total" :columns="columnsConfig" :query="listQuery" :list-loading="loadingTable"
+        @change="changePage"
+      >
+        <template #preColumns>
+          <el-table-column label="序号" width="55" align="center">
+            <template #default="scope">
+              {{ (listQuery.offset - 1) * listQuery.limit + scope.$index + 1 }}
+            </template>
+          </el-table-column>
+        </template>
+        <template #columns>
+          <el-table-column label="操作" align="center" width="120">
+            <template #default="scope">
+              <el-button type="primary" link size="small">
+                编辑 {{ scope.$index }}
+              </el-button>
+              <el-button type="danger" link size="small">
+                删除 {{ scope.$index }}
+              </el-button>
+            </template>
+          </el-table-column>
+        </template>
+      </normal-table>
+    </table-container>
+  </app-container>
 </template>
diff --git a/src/views/home/well/components/map.vue b/src/views/home/well/components/map.vue
new file mode 100644
index 0000000..5913db3
--- /dev/null
+++ b/src/views/home/well/components/map.vue
@@ -0,0 +1,26 @@
+<!--
+  Description: 闸井监测-地图
+  Author: 李亚光
+  Date: 2023-07-08
+ -->
+<script lang="ts" setup name="AlarmMap">
+import AMap from '@/components/map/index.vue'
+const $props = defineProps({
+  height: {
+    type: Number,
+    default: 0,
+  },
+})
+</script>
+
+<template>
+  <div :style="`height: ${$props.height}px`" class="map-container">
+    <a-map />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.map-container {
+  width: 100%;
+}
+</style>
diff --git a/src/views/home/well/index.vue b/src/views/home/well/index.vue
index 439816e..cc2059b 100644
--- a/src/views/home/well/index.vue
+++ b/src/views/home/well/index.vue
@@ -1,3 +1,230 @@
+<!--
+  Description: 闸井监测
+  Author: 李亚光
+  Date: 2023-07-12
+ -->
+<script lang="ts" setup name="WellMonitor">
+import { ElMessage } from 'element-plus'
+import { ArrowUpBold } from '@element-plus/icons-vue'
+import MapCom from './components/map.vue'
+// 表格数据
+const list = ref([
+  {
+    wellId: 'N57X508',
+    wellNo: '01110200745927',
+    name: '中压A闸1',
+    dept: '第一分公司/运维1所/1班',
+    property: '富源里小区',
+    manage: '自管',
+    use: '投用',
+    defence: '布防',
+    status: '正常',
+    device: '1',
+    tag: '',
+  },
+  {
+    wellId: 'N57X508',
+    wellNo: '01110200745927',
+    name: '中压A闸1',
+    dept: '第一分公司/运维1所/1班',
+    property: '富源里小区',
+    manage: '自管',
+    use: '停用',
+    defence: '撤防',
+    status: '正常',
+    device: '1',
+    tag: '',
+  },
+])
+const total = ref(0)
+// 初始展示列
+const columns = ref<any>([
+  { text: '闸井位号', value: 'wellId', align: 'center' },
+  { text: '闸井编号', value: 'wellNo', align: 'center' },
+  { text: '闸井名称', value: 'name', align: 'center' },
+  { text: '管理单位', value: 'dept', align: 'center' },
+  { text: '产权单位', value: 'property', align: 'center' },
+  { text: '管理方式', value: 'manage', align: 'center' },
+  { text: '使用状态', value: 'use', align: 'center' },
+  { text: '布防状态', value: 'defence', align: 'center' },
+  { text: '状态', value: 'status', align: 'center' },
+  { text: '感知设备', value: 'device', align: 'center' },
+  { text: '标签', value: 'tag', align: 'center' },
+])
+// 最终展示列
+const columnsConfig = ref([])
+// 修改列
+const editColumns = (data: any) => {
+  columnsConfig.value = data
+}
+const loadingTable = ref(true)
+//  查询条件
+const listQuery = ref({
+  limit: 20,
+  offset: 1,
+})
+// 开始结束时间
+const datetimerange = ref()
+watch(() => datetimerange.value, (newVal) => {
+  // listQuery.createTimeStart = ''
+  // listQuery.createTimeEnd = ''
+  if (Array.isArray(newVal)) {
+    if (newVal.length) {
+      // listQuery.createTimeStart = `${newVal[0]} 00:00:00`
+      // listQuery.createTimeEnd = `${newVal[1]} 23:59:59`
+    }
+  }
+})
+// 查询数据
+const fetchData = () => {
+  setTimeout(() => {
+    loadingTable.value = false
+  })
+}
+// 重置查询条件f
+const reset = () => {
+
+}
+// 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
+const changePage = (val: { size: number; page: number }) => {
+  if (val && val.size) {
+    listQuery.value.limit = val.size
+  }
+  if (val && val.page) {
+    listQuery.value.offset = val.page
+  }
+  fetchData()
+}
+
+onMounted(() => {
+  fetchData()
+})
+
+// 表格标识  地图或普通
+const tableFlag = ref('normal')
+const switchMode = (type: string) => {
+  if (!list.value.length) {
+    ElMessage.warning('暂无数据')
+    return
+  }
+  tableFlag.value = type
+}
+</script>
+
 <template>
-  闸井监测
+  <!-- 布局 -->
+  <app-container>
+    <!-- 地图 -->
+    <map-com v-if="tableFlag === 'map'" :height="350" />
+    <div v-if="tableFlag === 'map'" class="icon" @click="switchMode('normal')">
+      <el-icon :size="25">
+        <arrow-up-bold />
+      </el-icon>
+    </div>
+    <!-- 筛选条件 -->
+    <search-area :need-clear="true" @search="fetchData" @clear="reset">
+      <search-item>
+        <el-input v-model.trim="listQuery.keywords" placeholder="闸井位号" clearable />
+      </search-item>
+      <search-item>
+        <el-input v-model.trim="listQuery.keywords" placeholder="闸井编号" clearable />
+      </search-item>
+      <search-item>
+        <el-input v-model.trim="listQuery.keywords" placeholder="闸井编号" clearable />
+      </search-item>
+      <search-item>
+        <dept-select v-model="listQuery.keywords" placeholder="管理单位" :clearable="true" />
+      </search-item>
+      <search-item>
+        <el-input v-model.trim="listQuery.keywords" placeholder="产权单位" clearable />
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.keywords" placeholder="管理方式" clearable />
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.keywords" placeholder="使用状态" clearable />
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.keywords" placeholder="布防状态" clearable />
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.keywords" placeholder="监控状态" clearable />
+      </search-item>
+      <search-item>
+        <el-input v-model.trim="listQuery.keywords" placeholder="标签" clearable />
+      </search-item>
+    </search-area>
+    <!-- 表头标题 -->
+    <table-container
+      :is-config="true" config-title="well-monitor" :columns="columns" :config-columns="columnsConfig"
+      :edit="editColumns"
+    >
+      <template #btns-left>
+        <!-- 操作 -->
+        <div v-if="tableFlag === 'normal'" style="margin-left: 15px;">
+          <el-button type="primary" plain @click="switchMode('map')">
+            切换地图模式
+          </el-button>
+        </div>
+      </template>
+      <template #btns-right>
+        <!-- 操作 -->
+        <div>
+          <el-button type="primary">
+            导出
+          </el-button>
+        </div>
+      </template>
+      <!-- 查询结果Table显示 -->
+      <normal-table
+        :data="list" :total="total" :columns="columnsConfig" :query="listQuery" :list-loading="loadingTable"
+        @change="changePage"
+      >
+        <template #preColumns>
+          <!-- <el-table-column label="选择" width="55" align="center">
+              <template #default="scope">
+                <el-radio v-model="select" :label="scope.$index + 1" class="radio" />
+              </template>
+  </el-table-column> -->
+          <el-table-column label="序号" width="55" align="center">
+            <template #default="scope">
+              {{ (listQuery.offset - 1) * listQuery.limit + scope.$index + 1 }}
+            </template>
+          </el-table-column>
+        </template>
+        <template #columns>
+          <el-table-column label="布/撤防" align="center" width="80">
+            <template #default="scope">
+              <el-button type="primary" link size="small">
+                布防 {{ scope.$index }}
+              </el-button>
+            </template>
+          </el-table-column>
+          <el-table-column label="操作" align="center" width="120">
+            <template #default="scope">
+              <el-button type="primary" link size="small">
+                查看 {{ scope.$index }}
+              </el-button>
+              <el-button type="primary" link size="small">
+                编辑 {{ scope.$index }}
+              </el-button>
+            </template>
+          </el-table-column>
+        </template>
+      </normal-table>
+    </table-container>
+  </app-container>
 </template>
+
+<style lang="scss" scoped>
+.icon {
+  position: absolute;
+  top: 344px;
+  left: 50%;
+  transform: translateX(-50%);
+
+  &:hover {
+    cursor: pointer;
+  }
+}
+</style>
diff --git a/src/views/login-mobile.vue b/src/views/login-mobile.vue
new file mode 100644
index 0000000..b2eef7e
--- /dev/null
+++ b/src/views/login-mobile.vue
@@ -0,0 +1,19 @@
+<!-- 移动端登陆页面  -- elementplus -->
+<script lang="ts" setup name="Loginmobile">
+const route = useRoute()
+const router = useRouter()
+
+const handleLogin = () => {
+  router.push('/')
+}
+</script>
+
+<template>
+  <div>
+    移动端登陆页面
+  </div>
+
+  <el-button type="primary" size="large" @click="handleLogin">
+    基础测试
+  </el-button>
+</template>
diff --git a/src/views/login-pc.vue b/src/views/login-pc.vue
new file mode 100644
index 0000000..4cb3c1a
--- /dev/null
+++ b/src/views/login-pc.vue
@@ -0,0 +1,459 @@
+<route lang="yaml">
+meta:
+  title: 登录
+  constant: true
+  layout: false
+  </route>
+
+<script lang="ts" setup name="LoginPc">
+import type { FormInstance, FormRules } from 'element-plus'
+import { ElMessage } from 'element-plus'
+import useUserStore from '@/store/modules/user'
+import { RSAencrypt } from '@/utils/security'
+const route = useRoute()
+const router = useRouter()
+
+const userStore = useUserStore()
+
+const banner = new URL('../assets/images/login-banner.png', import.meta.url)
+  .href
+const title = import.meta.env.VITE_APP_TITLE
+
+// 表单类型，login 登录，reset 重置密码
+const formType = ref('login')
+// 加载状态
+const loading = ref(false)
+// 密码类型：password 密码
+const passwordType = ref('password')
+// 重定向路径
+const redirect = ref(route.query.redirect?.toString() ?? '/')
+// 是否需要验证码
+const showKaptcha = ref(false)
+// 公钥
+const publicKey = ref('')
+// sid
+const sid = ref('')
+
+// 获取系统基础配置： 公钥，是否开启验证码
+function getBaseConfig() {
+  userStore.getBaseConfig().then((res) => {
+    showKaptcha.value = res.kaptcha
+    publicKey.value = res.publicKey
+    sid.value = res.sid
+    ElMessage({
+      message: '连接服务器成功',
+      type: 'success',
+    })
+  })
+}
+
+// 登录
+const loginFormRef = ref<FormInstance>()
+const loginPasswordRef = ref<HTMLElement>()
+const loginForm = ref({
+  username: '',
+  password: '',
+  kaptcha: '',
+  remember: !!localStorage.login_username_bjwell,
+})
+const loginRules = ref<FormRules>({
+  username: [{ required: true, trigger: 'blur', message: '请输入用户名' }],
+  password: [
+    { required: true, trigger: 'blur', message: '请输入密码' },
+    { min: 6, max: 18, trigger: 'blur', message: '密码长度为6到18位' },
+  ],
+})
+
+// 处理登录
+function handleLogin() {
+  loginFormRef.value
+    && loginFormRef.value.validate(async (valid) => {
+      if (valid) {
+        loading.value = true
+        // 表单对象
+        const finalForm = {
+          sid: sid.value,
+          username: loginForm.value.username,
+          password: '',
+          kaptcha: loginForm.value.kaptcha,
+        }
+        // 加密
+        finalForm.password = await RSAencrypt(loginForm.value.password)
+        userStore
+          .login(finalForm)
+          .then(() => {
+            ElMessage({
+              message: '登录成功',
+              type: 'success',
+            })
+            loading.value = false
+            if (loginForm.value.remember) {
+              localStorage.setItem('login_username_bjwell', loginForm.value.username)
+            }
+            else {
+              localStorage.removeItem('login_username_bjwel')
+            }
+            router.push(redirect.value)
+          })
+          .catch(() => {
+            loading.value = false
+          })
+      }
+    })
+}
+// 注册
+const registerFormRef = ref<FormInstance>()
+const registerPasswordRef = ref<HTMLElement>()
+const registerCheckPasswordRef = ref<HTMLElement>()
+const registerForm = ref({
+  username: '',
+  captcha: '',
+  password: '',
+  checkPassword: '',
+})
+const registerRules = ref<FormRules>({
+  username: [{ required: true, trigger: 'blur', message: '请输入用户名' }],
+  captcha: [{ required: true, trigger: 'blur', message: '请输入验证码' }],
+  password: [
+    { required: true, trigger: 'blur', message: '请输入密码' },
+    { min: 6, max: 18, trigger: 'blur', message: '密码长度为6到18位' },
+  ],
+  checkPassword: [
+    { required: true, trigger: 'blur', message: '请再次输入密码' },
+    {
+      validator: (rule, value, callback) => {
+        if (value !== registerForm.value.password) {
+          callback(new Error('两次输入的密码不一致'))
+        }
+        else {
+          callback()
+        }
+      },
+    },
+  ],
+})
+function handleRegister() {
+  ElMessage({
+    message: '注册模块仅提供界面演示，无实际功能，需开发者自行扩展',
+    type: 'warning',
+  })
+  registerFormRef.value
+    && registerFormRef.value.validate((valid) => {
+      if (valid) {
+        // 这里编写业务代码
+      }
+    })
+}
+
+// 重置密码
+const resetFormRef = ref<FormInstance>()
+const resetNewPasswordRef = ref<HTMLElement>()
+const resetForm = ref({
+  username: localStorage.login_username || '',
+  captcha: '',
+  newPassword: '',
+})
+const resetRules = ref<FormRules>({
+  username: [{ required: true, trigger: 'blur', message: '请输入用户名' }],
+  captcha: [{ required: true, trigger: 'blur', message: '请输入验证码' }],
+  newPassword: [
+    { required: true, trigger: 'blur', message: '请输入新密码' },
+    { min: 6, max: 18, trigger: 'blur', message: '密码长度为6到18位' },
+  ],
+})
+function handleReset() {
+  ElMessage({
+    message: '重置密码模块仅提供界面演示，无实际功能，需开发者自行扩展',
+    type: 'warning',
+  })
+  resetFormRef.value
+    && resetFormRef.value.validate((valid) => {
+      if (valid) {
+        // 这里编写业务代码
+      }
+    })
+}
+
+function showPassword(passwordEl: HTMLElement | undefined) {
+  passwordType.value = passwordType.value === 'password' ? '' : 'password'
+  nextTick(() => {
+    passwordEl?.focus()
+  })
+}
+
+function testusername(username: string) {
+  loginForm.value.username = username
+  loginForm.value.password = '111111'
+  handleLogin()
+}
+onBeforeMount(() => {
+  loginForm.value.username = localStorage.login_username_bjwell || ''
+  getBaseConfig()
+})
+</script>
+
+<template>
+  <div>
+    <div class="bg-top-banner">
+      燃气物联感知平台
+    </div>
+    <div class="bg-banner" />
+    <div id="login-box">
+      <el-form
+        v-show="formType === 'login'" ref="loginFormRef" :model="loginForm" :rules="loginRules"
+        class="login-form" autocomplete="on"
+      >
+        <div class="title-container">
+          <h3 class="title">
+            用户登录
+          </h3>
+        </div>
+        <div>
+          <el-form-item prop="username">
+            <el-input ref="name" v-model="loginForm.username" placeholder="用户名" text tabindex="1" autocomplete="on">
+              <template #prefix>
+                <el-icon>
+                  <svg-icon name="ep:user" />
+                </el-icon>
+              </template>
+            </el-input>
+          </el-form-item>
+          <el-form-item prop="password">
+            <el-input
+              ref="loginPasswordRef" v-model="loginForm.password" :type="passwordType" placeholder="密码"
+              tabindex="2" autocomplete="on" @keyup.enter="handleLogin"
+            >
+              <template #prefix>
+                <el-icon>
+                  <svg-icon name="ep:lock" />
+                </el-icon>
+              </template>
+              <template #suffix>
+                <el-icon>
+                  <svg-icon
+                    :name="passwordType === 'password' ? 'eye' : 'eye-open'"
+                    @click="showPassword(loginPasswordRef)"
+                  />
+                </el-icon>
+              </template>
+            </el-input>
+          </el-form-item>
+        </div>
+        <div class="flex-bar">
+          <el-checkbox v-model="loginForm.remember">
+            记住我
+          </el-checkbox>
+        </div>
+        <el-button :loading="loading" type="primary" size="large" style="width: 100%;" @click.prevent="handleLogin">
+          登录
+        </el-button>
+        <div v-if="showKaptcha" style="margin-top: 20px; margin-bottom: -20px; text-align: center;">
+          <el-divider>演示账号一键登录</el-divider>
+          <el-button type="primary" size="small" plain @click="testusername('admin')">
+            admin
+          </el-button>
+          <el-button size="small" plain @click="testusername('test')">
+            test
+          </el-button>
+        </div>
+      </el-form>
+    </div>
+    <copyright />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+[data-mode="mobile"] {
+  #login-box {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    top: inherit;
+    left: inherit;
+    transform: translateX(0) translateY(0);
+    flex-direction: column;
+    justify-content: start;
+    border-radius: 0;
+    box-shadow: none;
+
+    .login-banner {
+      width: 100%;
+      padding: 20px 0;
+
+      .banner {
+        position: relative;
+        right: inherit;
+        width: 100%;
+        max-width: 375px;
+        margin: 0 auto;
+        display: inherit;
+        top: inherit;
+        transform: translateY(0);
+      }
+    }
+
+    .login-form {
+      width: 100%;
+      min-height: auto;
+      padding: 30px;
+    }
+  }
+
+  .copyright {
+    position: relative;
+    bottom: 0;
+    padding-bottom: 10px;
+  }
+}
+
+:deep(input[type="password"]::-ms-reveal) {
+  display: none;
+}
+
+.bg-top-banner {
+  position: fixed;
+  top: 0;
+  width: 100%;
+  height: 17vh;
+  z-index: 999;
+  line-height: 10vh;
+  text-align: center;
+  font-size: 30px;
+  color: #fff;
+  background: url("../assets/images/login-image/banner.png") no-repeat center / cover;
+}
+
+.bg-banner {
+  position: fixed;
+  z-index: 0;
+  width: 100%;
+  height: 100%;
+  // background: radial-gradient(circle at center, var(--el-fill-color-lighter), var(--el-bg-color-page));
+  background: url("../assets/images/login-image/bg.png") no-repeat center / cover;
+}
+
+#login-box {
+  display: flex;
+  justify-content: space-between;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translateX(-50%) translateY(-50%);
+  // background-color: var(--el-bg-color);
+
+  border-radius: 10px;
+  overflow: hidden;
+  box-shadow: var(--el-box-shadow);
+
+  .login-banner {
+    position: relative;
+    width: 450px;
+    background-color: var(--el-fill-color-light);
+    overflow: hidden;
+
+    .banner {
+      width: 100%;
+
+      @include position-center(y);
+    }
+
+    .logo {
+      position: absolute;
+      top: 20px;
+      left: 20px;
+      width: 30px;
+      height: 30px;
+      border-radius: 4px;
+      background: url("../assets/images/logo.png") no-repeat;
+      background-size: contain;
+      box-shadow: var(--el-box-shadow-light);
+    }
+  }
+
+  .login-form {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    min-height: 500px;
+    width: 500px;
+    padding: 50px;
+    background: url("../assets/images/login-image/frame.png") no-repeat center / cover;
+    overflow: hidden;
+
+    .title-container {
+      position: relative;
+
+      .title {
+        font-size: 1.3em;
+        color: #fff;
+        margin: 0 auto 30px;
+        text-align: center;
+        font-weight: bold;
+      }
+    }
+  }
+
+  .el-form-item {
+    margin-bottom: 24px;
+
+    :deep(.el-input) {
+      height: 48px;
+      line-height: inherit;
+      width: 100%;
+
+      input {
+        height: 48px;
+      }
+
+      .el-input__prefix,
+      .el-input__suffix {
+        display: flex;
+        align-items: center;
+      }
+
+      .el-input__prefix {
+        left: 10px;
+      }
+
+      .el-input__suffix {
+        right: 10px;
+      }
+    }
+  }
+
+  .flex-bar {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 20px;
+  }
+
+  .sub-link {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-top: 20px;
+    font-size: 14px;
+    color: var(--el-text-color-secondary);
+
+    .text {
+      margin-right: 10px;
+    }
+  }
+}
+
+.copyright {
+  position: absolute;
+  bottom: 30px;
+  width: 100%;
+  margin: 0;
+}
+
+:deep .el-input__wrapper {
+  background-color: transparent !important;
+}
+
+:deep .el-input__inner {
+  color: #fff !important;
+}
+</style>
diff --git a/src/views/login.vue b/src/views/login.vue
index cdc09f6..2334631 100644
--- a/src/views/login.vue
+++ b/src/views/login.vue
@@ -1,456 +1,13 @@
-<route lang="yaml">
-  meta:
-    title: 登录
-    constant: true
-    layout: false
-  </route>
-
+<!-- 登陆页面 -->
 <script lang="ts" setup name="Login">
-import type { FormInstance, FormRules } from 'element-plus'
-import { ElMessage } from 'element-plus'
-import useUserStore from '@/store/modules/user'
-import { RSAencrypt } from '@/utils/security'
-const route = useRoute()
-const router = useRouter()
-
-const userStore = useUserStore()
-
-const banner = new URL('../assets/images/login-banner.png', import.meta.url)
-  .href
-const title = import.meta.env.VITE_APP_TITLE
-
-// 表单类型，login 登录，reset 重置密码
-const formType = ref('login')
-// 加载状态
-const loading = ref(false)
-// 密码类型：password 密码
-const passwordType = ref('password')
-// 重定向路径
-const redirect = ref(route.query.redirect?.toString() ?? '/')
-// 是否需要验证码
-const showKaptcha = ref(false)
-// 公钥
-const publicKey = ref('')
-// sid
-const sid = ref('')
-
-// 获取系统基础配置： 公钥，是否开启验证码
-function getBaseConfig() {
-  userStore.getBaseConfig().then((res) => {
-    showKaptcha.value = res.kaptcha
-    publicKey.value = res.publicKey
-    sid.value = res.sid
-    ElMessage({
-      message: '连接服务器成功',
-      type: 'success',
-    })
-  })
-}
-
-// 登录
-const loginFormRef = ref<FormInstance>()
-const loginPasswordRef = ref<HTMLElement>()
-const loginForm = ref({
-  username: '',
-  password: '',
-  kaptcha: '',
-  remember: !!localStorage.login_username_bjwell,
-})
-const loginRules = ref<FormRules>({
-  username: [{ required: true, trigger: 'blur', message: '请输入用户名' }],
-  password: [
-    { required: true, trigger: 'blur', message: '请输入密码' },
-    { min: 6, max: 18, trigger: 'blur', message: '密码长度为6到18位' },
-  ],
-})
-
-// 处理登录
-function handleLogin() {
-  loginFormRef.value
-    && loginFormRef.value.validate(async (valid) => {
-      if (valid) {
-        loading.value = true
-        // 表单对象
-        const finalForm = {
-          sid: sid.value,
-          username: loginForm.value.username,
-          password: '',
-          kaptcha: loginForm.value.kaptcha,
-        }
-        // 加密
-        finalForm.password = await RSAencrypt(loginForm.value.password)
-        userStore
-          .login(finalForm)
-          .then(() => {
-            ElMessage({
-              message: '登录成功',
-              type: 'success',
-            })
-            loading.value = false
-            if (loginForm.value.remember) {
-              localStorage.setItem('login_username_bjwell', loginForm.value.username)
-            }
-            else {
-              localStorage.removeItem('login_username_bjwel')
-            }
-            router.push(redirect.value)
-          })
-          .catch(() => {
-            loading.value = false
-          })
-      }
-    })
-}
-// 注册
-const registerFormRef = ref<FormInstance>()
-const registerPasswordRef = ref<HTMLElement>()
-const registerCheckPasswordRef = ref<HTMLElement>()
-const registerForm = ref({
-  username: '',
-  captcha: '',
-  password: '',
-  checkPassword: '',
-})
-const registerRules = ref<FormRules>({
-  username: [{ required: true, trigger: 'blur', message: '请输入用户名' }],
-  captcha: [{ required: true, trigger: 'blur', message: '请输入验证码' }],
-  password: [
-    { required: true, trigger: 'blur', message: '请输入密码' },
-    { min: 6, max: 18, trigger: 'blur', message: '密码长度为6到18位' },
-  ],
-  checkPassword: [
-    { required: true, trigger: 'blur', message: '请再次输入密码' },
-    {
-      validator: (rule, value, callback) => {
-        if (value !== registerForm.value.password) {
-          callback(new Error('两次输入的密码不一致'))
-        }
-        else {
-          callback()
-        }
-      },
-    },
-  ],
-})
-function handleRegister() {
-  ElMessage({
-    message: '注册模块仅提供界面演示，无实际功能，需开发者自行扩展',
-    type: 'warning',
-  })
-  registerFormRef.value
-    && registerFormRef.value.validate((valid) => {
-      if (valid) {
-        // 这里编写业务代码
-      }
-    })
-}
-
-// 重置密码
-const resetFormRef = ref<FormInstance>()
-const resetNewPasswordRef = ref<HTMLElement>()
-const resetForm = ref({
-  username: localStorage.login_username || '',
-  captcha: '',
-  newPassword: '',
-})
-const resetRules = ref<FormRules>({
-  username: [{ required: true, trigger: 'blur', message: '请输入用户名' }],
-  captcha: [{ required: true, trigger: 'blur', message: '请输入验证码' }],
-  newPassword: [
-    { required: true, trigger: 'blur', message: '请输入新密码' },
-    { min: 6, max: 18, trigger: 'blur', message: '密码长度为6到18位' },
-  ],
-})
-function handleReset() {
-  ElMessage({
-    message: '重置密码模块仅提供界面演示，无实际功能，需开发者自行扩展',
-    type: 'warning',
-  })
-  resetFormRef.value
-    && resetFormRef.value.validate((valid) => {
-      if (valid) {
-        // 这里编写业务代码
-      }
-    })
-}
-
-function showPassword(passwordEl: HTMLElement | undefined) {
-  passwordType.value = passwordType.value === 'password' ? '' : 'password'
-  nextTick(() => {
-    passwordEl?.focus()
-  })
-}
-
-function testusername(username: string) {
-  loginForm.value.username = username
-  loginForm.value.password = '111111'
-  handleLogin()
-}
-onBeforeMount(() => {
-  loginForm.value.username = localStorage.login_username_bjwell || ''
-  getBaseConfig()
-})
+import loginPc from './login-pc.vue'
+import loginMobile from './login-mobile.vue'
+const browserType = window.localStorage.getItem('browser-type-bj-well') // mobile || pc
 </script>
 
 <template>
-  <div>
-    <div class="bg-top-banner">
-      燃气物联感知平台
-    </div>
-    <div class="bg-banner" />
-    <div id="login-box">
-      <el-form v-show="formType === 'login'" ref="loginFormRef" :model="loginForm" :rules="loginRules"
-        class="login-form" autocomplete="on">
-        <div class="title-container">
-          <h3 class="title">
-            用户登录
-          </h3>
-        </div>
-        <div>
-          <el-form-item prop="username">
-            <el-input ref="name" v-model="loginForm.username" placeholder="用户名" text tabindex="1" autocomplete="on">
-              <template #prefix>
-                <el-icon>
-                  <svg-icon name="ep:user" />
-                </el-icon>
-              </template>
-            </el-input>
-          </el-form-item>
-          <el-form-item prop="password">
-            <el-input ref="loginPasswordRef" v-model="loginForm.password" :type="passwordType" placeholder="密码"
-              tabindex="2" autocomplete="on" @keyup.enter="handleLogin">
-              <template #prefix>
-                <el-icon>
-                  <svg-icon name="ep:lock" />
-                </el-icon>
-              </template>
-              <template #suffix>
-                <el-icon>
-                  <svg-icon :name="passwordType === 'password' ? 'eye' : 'eye-open'"
-                    @click="showPassword(loginPasswordRef)" />
-                </el-icon>
-              </template>
-            </el-input>
-          </el-form-item>
-        </div>
-        <div class="flex-bar">
-          <el-checkbox v-model="loginForm.remember">
-            记住我
-          </el-checkbox>
-        </div>
-        <el-button :loading="loading" type="primary" size="large" style="width: 100%;" @click.prevent="handleLogin">
-          登录
-        </el-button>
-        <div v-if="showKaptcha" style="margin-top: 20px; margin-bottom: -20px; text-align: center;">
-          <el-divider>演示账号一键登录</el-divider>
-          <el-button type="primary" size="small" plain @click="testusername('admin')">
-            admin
-          </el-button>
-          <el-button size="small" plain @click="testusername('test')">
-            test
-          </el-button>
-        </div>
-      </el-form>
-    </div>
-    <copyright />
-  </div>
+  <!-- pc端 -->
+  <login-pc v-if="browserType === 'pc'" />
+  <!-- 移动端 -->
+  <login-mobile v-if="browserType === 'mobile'" />
 </template>
-
-<style lang="scss" scoped>
-[data-mode="mobile"] {
-  #login-box {
-    position: relative;
-    width: 100%;
-    height: 100%;
-    top: inherit;
-    left: inherit;
-    transform: translateX(0) translateY(0);
-    flex-direction: column;
-    justify-content: start;
-    border-radius: 0;
-    box-shadow: none;
-
-    .login-banner {
-      width: 100%;
-      padding: 20px 0;
-
-      .banner {
-        position: relative;
-        right: inherit;
-        width: 100%;
-        max-width: 375px;
-        margin: 0 auto;
-        display: inherit;
-        top: inherit;
-        transform: translateY(0);
-      }
-    }
-
-    .login-form {
-      width: 100%;
-      min-height: auto;
-      padding: 30px;
-    }
-  }
-
-  .copyright {
-    position: relative;
-    bottom: 0;
-    padding-bottom: 10px;
-  }
-}
-
-:deep(input[type="password"]::-ms-reveal) {
-  display: none;
-}
-
-.bg-top-banner {
-  position: fixed;
-  top: 0;
-  width: 100%;
-  height: 17vh;
-  z-index: 999;
-  line-height: 10vh;
-  text-align: center;
-  font-size: 30px;
-  color: #fff;
-  background:
-    url("../assets/images/login-image/banner.png") no-repeat center / cover;
-}
-
-.bg-banner {
-  position: fixed;
-  z-index: 0;
-  width: 100%;
-  height: 100%;
-  // background: radial-gradient(circle at center, var(--el-fill-color-lighter), var(--el-bg-color-page));
-  background:
-    url("../assets/images/login-image/bg.png") no-repeat center / cover;
-}
-
-#login-box {
-  display: flex;
-  justify-content: space-between;
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translateX(-50%) translateY(-50%);
-  // background-color: var(--el-bg-color);
-
-  border-radius: 10px;
-  overflow: hidden;
-  box-shadow: var(--el-box-shadow);
-
-  .login-banner {
-    position: relative;
-    width: 450px;
-    background-color: var(--el-fill-color-light);
-    overflow: hidden;
-
-    .banner {
-      width: 100%;
-
-      @include position-center(y);
-    }
-
-    .logo {
-      position: absolute;
-      top: 20px;
-      left: 20px;
-      width: 30px;
-      height: 30px;
-      border-radius: 4px;
-      background: url("../assets/images/logo.png") no-repeat;
-      background-size: contain;
-      box-shadow: var(--el-box-shadow-light);
-    }
-  }
-
-  .login-form {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    min-height: 500px;
-    width: 500px;
-    padding: 50px;
-    background:
-      url("../assets/images/login-image/frame.png") no-repeat center / cover;
-    overflow: hidden;
-
-    .title-container {
-      position: relative;
-
-      .title {
-        font-size: 1.3em;
-        color: #fff;
-        margin: 0 auto 30px;
-        text-align: center;
-        font-weight: bold;
-      }
-    }
-  }
-
-  .el-form-item {
-    margin-bottom: 24px;
-
-    :deep(.el-input) {
-      height: 48px;
-      line-height: inherit;
-      width: 100%;
-
-      input {
-        height: 48px;
-      }
-
-      .el-input__prefix,
-      .el-input__suffix {
-        display: flex;
-        align-items: center;
-      }
-
-      .el-input__prefix {
-        left: 10px;
-      }
-
-      .el-input__suffix {
-        right: 10px;
-      }
-    }
-  }
-
-  .flex-bar {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    margin-bottom: 20px;
-  }
-
-  .sub-link {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    margin-top: 20px;
-    font-size: 14px;
-    color: var(--el-text-color-secondary);
-
-    .text {
-      margin-right: 10px;
-    }
-  }
-}
-
-.copyright {
-  position: absolute;
-  bottom: 30px;
-  width: 100%;
-  margin: 0;
-}
-
-:deep .el-input__wrapper {
-  background-color: transparent !important;
-}
-
-:deep .el-input__inner {
-  color: #fff !important;
-}
-</style>

diff --git a/src/App.vue b/src/App.vue
index 52ccd6e..a9268fb 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -6,7 +6,7 @@
 import useMenuStore from '@/store/modules/menu'
 
 const settingsStore = useSettingsStore()
-
+const $router = useRouter()
 const buttonConfig = ref({
   autoInsertSpace: true,
 })
@@ -81,14 +81,40 @@
 })
 
 onMounted(() => {
+  // // 浏览器访问当前位置
+  // if ('geolocation' in navigator) {
+  //   navigator.geolocation.getCurrentPosition(function (position) {
+  //     // 允许
+  //     console.log('纬度: ', position.coords.latitude)
+  //     console.log('经度: ', position.coords.longitude)
+  //   }, function (error) {
+  //     // 拒绝
+  //     console.error("Error Code = " + error.code + " - " + error.message);
+  //   })
+  // } else {
+  //   console.error("Geolocation is not supported by this browser.")
+  // }
   settingsStore.setMode(document.documentElement.clientWidth)
   window.onresize = () => {
     settingsStore.setMode(document.documentElement.clientWidth)
+    // 监听浏览器类型变化 刷新浏览器
+    const userAgent = navigator.userAgent || navigator.vendor || window.opera
+    const isMobile = /android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(userAgent)
+    if (`${isMobile ? 'mobile' : 'pc'}` !== window.localStorage.getItem('browser-type-bj-well')) {
+      // if (!window.localStorage.getItem('browser-type-bj-well')) { return }
+      console.log(`浏览器类型发生变化，由${window.localStorage.getItem('browser-type-bj-well')}变为${isMobile ? 'mobile' : 'pc'}`)
+      window.localStorage.setItem('browser-type-bj-well', `${isMobile ? 'mobile' : 'pc'}`)
+      $router.push('/')
+      setTimeout(() => {
+        window.location.reload()
+      }, 1000)
+    }
   }
   hotkeys('alt+i', () => {
     eventBus.emit('global-system-info-toggle')
   })
 })
+const browserType = window.localStorage.getItem('browser-type-bj-well') // mobile || pc
 </script>
 
 <template>
@@ -99,6 +125,6 @@
         '--g-sub-sidebar-actual-width': subSidebarActualWidth,
       }"
     />
-    <system-info />
+    <system-info v-if="browserType !== 'mobile'" />
   </el-config-provider>
 </template>
diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue
index e247e28..de24f71 100644
--- a/src/components/NormalTable/index.vue
+++ b/src/components/NormalTable/index.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup name="NormalTable">
 import type { Ref } from 'vue'
-import { ElTable } from 'element-plus'
+import { ElMessage, ElTable } from 'element-plus'
 import { defineExpose, ref } from 'vue'
 import type { TableColumn } from './table_interface'
 import TableColumnCom from './tableColumn.vue'
@@ -84,7 +84,11 @@
     type: String,
     default: 'default',
   }, // 表格大小，默认，small,mini等，与el-table条件相同
-  // 想要展示成链接的数据
+  // 是否要右击菜单
+  needContextmenu: {
+    type: Boolean,
+    default: false,
+  },
 })
 const emit = defineEmits(['change', 'selectionChange', 'rowClick', 'rowDbClick', 'multiSelect', 'filterChange', 'rowDisabled', 'handleClickFollowLink'])
 // -------定义数据--------------
@@ -148,8 +152,10 @@
 //   changeColumns()
 // })
 // 多选
+const multiSelectData = ref([])
 const handleSelectionChange = (val: any) => {
   // console.log(val)
+  multiSelectData.value = val
   emit('multiSelect', val)
 }
 // 单选选中
@@ -214,27 +220,87 @@
 const handleClickFollowLink = (row: any, title: string) => {
   emit('handleClickFollowLink', row, title)
 }
+
+// 右击当前行操作
+const clickIndex = ref(-1)
+const contextmenu = (row: any, column: any, event: Event, index: number) => {
+  if (!props.needContextmenu) { return }
+  // 阻止默认的右键菜单
+  event.preventDefault()
+  clickIndex.value = props.data.findIndex(item => item === row)
+  console.log('右击', clickIndex.value)
+  // 获取自定义菜单元素
+  var menu = document.getElementById('custom-menu')
+  // 设置自定义菜单的位置并显示
+  let positionX = event.pageX
+  let positionY = event.pageY
+  if (document.documentElement.clientHeight - event.pageY < 204) {
+    positionY = document.documentElement.clientHeight - 204 + 102
+  }
+  if (document.documentElement.clientWidth - event.pageX < 146) {
+    positionX = document.documentElement.clientWidth - 146
+  }
+  menu.style.top = `${positionY - 102}px`
+  menu.style.left = `${positionX}px`
+  menu.style.display = 'block'
+}
+// 点击其他位置隐藏自定义菜单
+document.addEventListener('click', () => {
+  document.getElementById('custom-menu').style.display = 'none'
+})
+// 添加行
+const costomAddRow = (type: string) => {
+  if (type === 'current-pre') {
+    // 当前行前方插入
+    props.data.splice(clickIndex.value, 0, JSON.parse(JSON.stringify(props.data[clickIndex.value])))
+  }
+  else if (type === 'current-next') {
+    // 当前行后方方插入
+    props.data.splice(clickIndex.value + 1, 0, JSON.parse(JSON.stringify(props.data[clickIndex.value])))
+  }
+  else if (type === 'list-head') {
+    // 列表头行插入
+    props.data.splice(0, 0, JSON.parse(JSON.stringify(props.data[clickIndex.value])))
+  }
+  else if (type === 'list-tail') {
+    // 列表尾行插入
+    props.data.splice(props.data.length, 0, JSON.parse(JSON.stringify(props.data[clickIndex.value])))
+  }
+  else if (type === 'select-pre') {
+    // 选中行前方插入
+    if (!multiSelectData.value.length) {
+      ElMessage.warning('未选择数据')
+      return
+    }
+    multiSelectData.value.forEach((item, index) => {
+      const dataIndex = props.data.findIndex(citem => item === citem)
+      props.data.splice(dataIndex, 0, JSON.parse(JSON.stringify(item)))
+    })
+    table.value!.clearSelection()
+  }
+  else if (type === 'select-next') {
+    // 选中行后方插入
+    if (!multiSelectData.value.length) {
+      ElMessage.warning('未选择数据')
+      return
+    }
+    multiSelectData.value.forEach((item, index) => {
+      const dataIndex = props.data.findIndex(citem => item === citem)
+      props.data.splice(dataIndex + 1, 0, JSON.parse(JSON.stringify(item)))
+    })
+    table.value!.clearSelection()
+  }
+  clickIndex.value = -1
+}
 </script>
 
 <template>
   <div id="normal-table-com">
     <el-table
-      id="print"
-      ref="table"
-      v-loading="listLoading"
-      :data="data"
-      :height="height"
-      border
-      stripe
-      :size="size"
-      style="width: 100%;"
-      :row-key="(row) => { return row.id || row.index }"
-      :span-method="mergeTableRow"
-      @selection-change="handleSelectionChange"
-      @select="selectClick"
-      @row-click="rowClick"
-      @row-dblclick="rowDbClick"
-      @filter-change="filterChange"
+      id="print" ref="table" v-loading="listLoading" :data="data" :height="height" border stripe :size="size"
+      style="width: 100%;" :row-key="(row) => { return row.id || row.index }" :span-method="mergeTableRow"
+      @selection-change="handleSelectionChange" @select="selectClick" @row-click="rowClick" @row-dblclick="rowDbClick"
+      @filter-change="filterChange" @row-contextmenu="contextmenu"
     >
       <slot name="preColumns" />
 
@@ -243,45 +309,48 @@
           <el-radio v-model="singleChecked" :label="scope.row.id" class="radio" @change="radioChange" />
         </template>
       </el-table-column>
-      <el-table-column v-if="isShowmultiSelect && isMulti" :reserve-selection="true" type="selection" width="38" :selectable="selectable" fixed="left" />
+      <el-table-column
+        v-if="isShowmultiSelect && isMulti" :reserve-selection="true" type="selection" width="38"
+        :selectable="selectable" fixed="left"
+      />
       <template v-for="column of columns" :key="column.value">
         <el-table-column
-          v-if="!column.isFilters"
-          :label="column.text"
-          :prop="column.value"
-          :width="column.width"
-          :align="column.align"
-          :show-overflow-tooltip="column.showOverflow ? column.showOverflow : true"
+          v-if="!column.isFilters" :label="column.text" :prop="column.value" :width="column.width"
+          :align="column.align" :show-overflow-tooltip="column.showOverflow ? column.showOverflow : true"
           :fixed="column.fixed"
         >
           <template #default="scope">
-            <span v-if="!column.filter && !column.isLink" :style="column.styleFilter ? column.styleFilter(scope.row) : ''">{{ scope.row[column.value] }}</span>
-            <span v-if="column.filter && !column.isLink" :style="column.styleFilter ? column.styleFilter(scope.row) : ''">{{ column.filter(scope.row) }}</span>
+            <span
+              v-if="!column.filter && !column.isLink"
+              :style="column.styleFilter ? column.styleFilter(scope.row) : ''"
+            >{{ scope.row[column.value] }}</span>
+            <span
+              v-if="column.filter && !column.isLink"
+              :style="column.styleFilter ? column.styleFilter(scope.row) : ''"
+            >{{ column.filter(scope.row) }}</span>
             <div v-if="column.isLink">
               <show-photo v-for="(item, index) in scope.row.fileArr" :key="index" :minio-file-name="item" /><br>
             </div>
             <div v-if="column.followLink">
-              <div v-for="(item, index) in scope.row.followLinkArr" :key="index" @click="handleClickFollowLink(scope.row, item)">
+              <div
+                v-for="(item, index) in scope.row.followLinkArr" :key="index"
+                @click="handleClickFollowLink(scope.row, item)"
+              >
                 <span :class="item !== '/' ? 'follow-link' : ''">{{ item }}</span>
               </div>
             </div>
           </template>
         </el-table-column>
         <el-table-column
-          v-if="column.isFilters"
-          :label="column.text"
-          :prop="column.value"
-          :width="column.width"
-          :align="column.align"
-          :show-overflow-tooltip="column.showOverflow ? column.showOverflow : true"
-          :fixed="column.fixed"
-          :column-key="column.value"
-          :filters="column.filters"
-          :filter-multiple="false"
+          v-if="column.isFilters" :label="column.text" :prop="column.value" :width="column.width"
+          :align="column.align" :show-overflow-tooltip="column.showOverflow ? column.showOverflow : true"
+          :fixed="column.fixed" :column-key="column.value" :filters="column.filters" :filter-multiple="false"
         >
           <template #default="scope">
-            <span v-if="!column.filter" :style="column.styleFilter ? column.styleFilter(scope.row) : ''">{{ scope.row[column.value] }}</span>
-            <span v-else :style="column.styleFilter ? column.styleFilter(scope.row) : ''">{{ column.filter(scope.row) }}</span>
+            <span v-if="!column.filter" :style="column.styleFilter ? column.styleFilter(scope.row) : ''">{{
+              scope.row[column.value] }}</span>
+            <span v-else :style="column.styleFilter ? column.styleFilter(scope.row) : ''">{{ column.filter(scope.row)
+            }}</span>
           </template>
         </el-table-column>
       </template>
@@ -290,19 +359,67 @@
     </el-table>
     <div v-if="props.pagination" style="width: 100%;margin-top: 10px;">
       <el-pagination
-        :current-page="props.query.offset"
-        :page-sizes="props.pageSizes as number[]"
-        :page-size="props.query.limit"
-        :total="props.total"
-        layout="total, sizes, prev, pager, next"
-        @size-change="handleSizeChange"
-        @current-change="handleCurrentChange"
+        :current-page="props.query.offset" :page-sizes="props.pageSizes as number[]"
+        :page-size="props.query.limit" :total="props.total" layout="total, sizes, prev, pager, next"
+        @size-change="handleSizeChange" @current-change="handleCurrentChange"
       />
     </div>
+    <!-- 自定义菜单 -->
+    <div id="custom-menu">
+      <p class="menu-item" @click="costomAddRow('current-pre')">
+        当前行前方插入
+      </p>
+      <p class="menu-item" @click="costomAddRow('current-next')">
+        当前行后方插入
+      </p>
+      <p class="menu-item" @click="costomAddRow('list-head')">
+        列表头行插入
+      </p>
+      <p class="menu-item" @click="costomAddRow('list-tail')">
+        列表尾行插入
+      </p>
+      <p v-if="isShowmultiSelect && isMulti" class="menu-item" @click="costomAddRow('select-pre')">
+        选中行前方插入
+      </p>
+      <!--  -->
+      <p v-if="isShowmultiSelect && isMulti" class="menu-item" @click="costomAddRow('select-next')">
+        选中行后方插入
+      </p>
+    </div>
   </div>
 </template>
 
 <style lang="scss" scoped>
+#custom-menu {
+  display: none;
+  position: fixed;
+  background-color: #fff;
+  border-radius: 5px;
+  padding: 5px 0;
+  z-index: 1000;
+  border: 1px solid #c8c9cc;
+  box-shadow: 0 0 12px rgb(0 0 0 / 12%);
+
+  .menu-item {
+    display: flex;
+    align-items: center;
+    white-space: nowrap;
+    list-style: none;
+    line-height: 22px;
+    padding: 5px 16px;
+    margin: 0;
+    // font-size: var(--el-font-size-base);
+    color: #606266;
+    cursor: pointer;
+    outline: none;
+
+    &:hover {
+      background-color: #ecf5ff;
+      color: #409eff;
+    }
+  }
+}
+
 #normal-table-com {
   width: 100%;
 }
diff --git a/src/components/TableContainer/index.vue b/src/components/TableContainer/index.vue
index 0c07be6..87b1567 100644
--- a/src/components/TableContainer/index.vue
+++ b/src/components/TableContainer/index.vue
@@ -71,16 +71,18 @@
   <config-dialog ref="configRef" @confirm="confirmColumns" />
   <div class="table-container">
     <div class="button-area">
-      <div v-if="titleShow" :class="props.isCenter ? 'title-center' : 'title-left'">
-        <el-icon v-if="isConfig" :size="21" class="icon-menu" @click="config">
-          <menu />
-        </el-icon>
-        <span>
-          {{ title }}
-        </span>
-      </div>
-      <div class="button-left">
-        <slot name="btns-left" />
+      <div style="display: flex;align-items: center;">
+        <div v-if="titleShow" :class="props.isCenter ? 'title-center' : 'title-left'">
+          <el-icon v-if="isConfig" :size="21" class="icon-menu" @click="config">
+            <menu />
+          </el-icon>
+          <span>
+            {{ title }}
+          </span>
+        </div>
+        <div class="button-left">
+          <slot name="btns-left" />
+        </div>
       </div>
       <div class="button-right">
         <slot name="btns-right" />
diff --git a/src/components/map/index.vue b/src/components/map/index.vue
index 55e37da..620c813 100644
--- a/src/components/map/index.vue
+++ b/src/components/map/index.vue
@@ -8,7 +8,7 @@
 import { styleType } from 'element-plus/es/components/table-v2/src/common'
 
 const $props = defineProps({
-  // 初始图层 normal satellite
+  // 初始图层 normal satellite dark
   layer: {
     type: String,
     default: 'normal',
@@ -35,8 +35,8 @@
 const layer = ref()
 // 图层标识
 const layerFlag = ref('normal')
-// const publicPath = import.meta.env.BASE_URL
-// console.log(publicPath, 'publicPath')
+const publicPath = import.meta.env.BASE_URL
+console.log(publicPath, 'publicPath')
 // -------------------------------------初始化地图--------------------------------------------------
 const initMap = () => {
   AMapLoader.load({
@@ -61,18 +61,22 @@
         map.value.setFeatures(['bg', 'building'])
         layerFlag.value = 'satellite'
       }
+      else if ($props.layer === 'dark') {
+        // 深色图层
+        map.value.setMapStyle('amap://styles/darkblue')
+      }
       // 地图图块加载完成后触发
       map.value.on('complete', () => {
         //  修改loading状态
         console.log('地图加载完成')
-        $emits('complete')
+        $emits('complete', AMap.value)
         loading.value = false
       })
       // 地图绑定右击事件
       map.value.on('mousedown', clickHandler)
     })
     .catch((e) => {
-      console.log('地图加载失败')
+      console.log(e, '地图加载失败')
     })
 }
 // ------------------------------------------------------------------------------------------------
@@ -156,7 +160,7 @@
 }
 // ------------------------------------------------------------------------------------------------
 
-// -------------------------------------标记本文操作--------------------------------------------------
+// -------------------------------------标记文本操作--------------------------------------------------
 // 标记文本数组
 const textAllList = ref<any>([])
 // 添加标记文字
@@ -282,6 +286,35 @@
   lineAllList.value = []
 }
 // ------------------------------------------------------------------------------------------------
+
+// -----------------------------------海量点标记操作------------------------------------------------
+// 点标记(海量点)数组
+const massMarksAllList = ref<any>([])
+// 添加点标记(海量点)
+const addMassMarks = (data: any) => {
+  /**
+     * data
+     * path: 折线点位数据  [{lnglat: [116.402394,39.937182],name: "南锣鼓巷", style: 1,}, ]
+     * style 样式
+     * zooms: 在指定地图缩放级别范围内展示海量点图层
+     * zIndex: 海量点图层叠加的顺序
+      */
+  var massMarks = new AMap.value.MassMarks(data.path, {
+    zIndex: data.zIndex, // 海量点图层叠加的顺序
+    zooms: data.zooms, // 在指定地图缩放级别范围内展示海量点图层
+    style: data.style, // 设置样式对象
+  })
+  massMarksAllList.value.push(massMarks)
+  massMarks.setMap(map)
+}
+// 移除点标记(海量点)
+const removeMassMarks = () => {
+  massMarksAllList.value.forEach((item: any) => {
+    item.setMap(null)
+  })
+  massMarksAllList.value = []
+}
+// ------------------------------------------------------------------------------------------------
 onMounted(() => {
   loading.value = true
   initMap()
@@ -302,6 +335,8 @@
   removeMarker, // 移除点标记 (一般点标记)
   addPolyline, // 添加折线
   removePolyline, // 移除折线
+  addMassMarks, // 添加点标记(海量点)
+  removeMassMarks, // 移除点标记(海量点)
 })
 </script>
 
diff --git a/src/layouts/components/Header/mobile.vue b/src/layouts/components/Header/mobile.vue
new file mode 100644
index 0000000..a27de4b
--- /dev/null
+++ b/src/layouts/components/Header/mobile.vue
@@ -0,0 +1,53 @@
+<!-- 移动端头部 -->
+<script lang="ts" setup name="HeaderMobile">
+import { ArrowLeftBold, House } from '@element-plus/icons-vue'
+const route = useRoute()
+const router = useRouter()
+const goBack = (type: 'back' | 'home') => {
+  if (type === 'back') {
+    router.go(-1)
+  }
+  else if (type === 'home') {
+    router.push('/')
+  }
+}
+</script>
+
+<template>
+  <div>
+    <div v-if="route.meta.isHeader" class="header-mobile">
+      <div v-if="route.meta.isBack">
+        <el-icon :size="25" @click="goBack('back')">
+          <arrow-left-bold />
+        </el-icon>
+      </div>
+      <div v-else style="width: 25px;" />
+      <div> {{ route.meta.title }}</div>
+      <el-icon v-if="route.meta.isHome" :size="25" @click="goBack('home')">
+        <house />
+      </el-icon>
+      <div v-else style="width: 25px;" />
+    </div>
+    <div v-if="route.meta.isHeader" class="occupying" />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.header-mobile {
+  width: 100%;
+  background-color: #70b4ff;
+  height: 35px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 10px;
+  position: fixed;
+  top: 0;
+}
+
+.occupying {
+  height: 35px;
+  background-color: transparent;
+  width: 100%;
+}
+</style>
diff --git a/src/layouts/mobile.vue b/src/layouts/mobile.vue
new file mode 100644
index 0000000..c6235a4
--- /dev/null
+++ b/src/layouts/mobile.vue
@@ -0,0 +1,47 @@
+<!-- 移动端基础布局组件 -->
+<script lang="ts" setup name="LayoutMobile">
+import headerMobile from './components/Header/mobile.vue'
+import useKeepAliveStore from '@/store/modules/keepAlive'
+const keepAliveStore = useKeepAliveStore()
+const routeInfo = useRoute()
+</script>
+
+<template>
+  <div class="layout">
+    <div id="app-main">
+      <!-- 头部 -->
+      <header-mobile />
+      <div class="wrapper">
+        <div class="main-container">
+          <div class="main">
+            <router-view v-slot="{ Component, route }">
+              <transition name="main" mode appear>
+                <keep-alive :include="keepAliveStore.list">
+                  <component :is="Component" :key="route.fullPath" />
+                </keep-alive>
+              </transition>
+            </router-view>
+          </div>
+          <copyright />
+        </div>
+      </div>
+      <el-backtop :right="20" :bottom="20" title="回到顶部" />
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.main {
+  overflow-x: hidden;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+
+  // firefox隐藏滚动条
+  scrollbar-width: none;
+
+  // chrome隐藏滚动条
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}
+</style>
diff --git a/src/main.ts b/src/main.ts
index 07c50a2..cb80c5d 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -19,35 +19,35 @@
 import { downloadAndInstall } from '@/iconify-ep'
 import { hasPermission } from '@/utils/composables/permission'
 import buttonPerm from '@/utils/buttonPerm'
-// 引入打印插件
 if (useSettingsStore().app.iconifyOfflineUse) {
   downloadAndInstall()
 }
-const app = createApp(App)
-app.config.globalProperties.hasPerm = hasPermission
-app.config.globalProperties.buttonPerm = buttonPerm
-app.config.globalProperties.dayjs = dayjs
-app.use(print)
-app.use(ElementPlus)
-app.use(pinia)
-app.use(router)
-for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
-  app.component(key, component)
-}
-directive(app)
 
 axios.get('./config/config.json', {
   headers: {
     'Cache-Control': 'no-cache',
   },
 }).then((result) => {
+  const app = createApp(App)
   console.log('get config')
+  console.log(window.localStorage.getItem('browser-type-bj-well'), 'mian中获取浏览器类型')
   console.log(result)
   window.localStorage.setItem('url-bj-well', result.data.baseUrl)
   window.localStorage.setItem('securityJsCode', result.data.securityJsCode)
   window.localStorage.setItem('JsKey', result.data.JsKey)
   request.defaults.baseURL = result.data.baseUrl // 设置默认请求网址
   app.config.globalProperties.config = result.data
+  app.config.globalProperties.hasPerm = hasPermission
+  app.config.globalProperties.buttonPerm = buttonPerm
+  app.config.globalProperties.dayjs = dayjs
+  app.use(print)
+  app.use(ElementPlus)
+  app.use(pinia)
+  app.use(router)
+  for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
+    app.component(key, component)
+  }
+  directive(app)
   app.mount('#app')
 }).catch((error) => {
   console.error(`get baseConfig error...${error}`)
diff --git a/src/router/modules/mobile.ts b/src/router/modules/mobile.ts
new file mode 100644
index 0000000..77618c1
--- /dev/null
+++ b/src/router/modules/mobile.ts
@@ -0,0 +1,31 @@
+// 移动端路由
+import type { Route } from '@/global'
+
+const Layout = () => import('@/layouts/mobile.vue')
+
+const routes: Route.recordRaw[] = [
+  {
+    path: '/home',
+    component: Layout,
+    redirect: '/home/index',
+    name: 'Home',
+    meta: {
+      title: '首页',
+    },
+    children: [
+      {
+        path: 'index',
+        component: () => import('@/views/mobile/example1/index.vue'),
+        name: 'HomeIndex',
+        meta: {
+          title: '首页',
+          isHeader: true, // 是否需要头部
+          isBack: true, // 是否需要返回按钮
+          isHome: false, // 是否需要回到首页按钮
+        },
+      },
+    ],
+  },
+]
+
+export default routes
diff --git a/src/router/routes.ts b/src/router/routes.ts
index ae91d6e..b1fdc27 100644
--- a/src/router/routes.ts
+++ b/src/router/routes.ts
@@ -2,6 +2,7 @@
 import generatedRoutes from 'virtual:generated-pages'
 // import commonRoute from './modules/system'
 import homeRoute from './modules/home'
+import mobileRoute from './modules/mobile'
 import type { Route } from '@/global'
 import useSettingsStore from '@/store/modules/settings'
 
@@ -31,12 +32,15 @@
     },
   },
 ]
-
+const userAgent = navigator.userAgent || navigator.vendor || window.opera
+const isMobile = /android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(userAgent)
+window.localStorage.setItem('browser-type-bj-well', `${isMobile ? 'mobile' : 'pc'}`)
+console.log(window.localStorage.getItem('browser-type-bj-well'), '路由中获取浏览器类型')
 // 系统路由
 const systemRoutes: Route.recordRaw[] = [
   {
     path: '/dashboard',
-    component: () => import('@/layouts/index.vue'),
+    component: isMobile ? null : () => import('@/layouts/index.vue'),
     meta: {
       title: () => useSettingsStore().dashboard.title,
       breadcrumb: false,
@@ -101,19 +105,27 @@
     ],
   },
 ]
-
 // 动态路由（异步路由、导航栏路由）
-const asyncRoutes: Route.recordMainRaw[] = [
-  {
-    meta: {
-      title: '',
-      icon: '',
+const asyncRoutes: Route.recordMainRaw[] = isMobile
+  ? [{ // 移动端路由
+      meta: {
+        title: '',
+        icon: '',
+      },
+      children: [
+        ...mobileRoute,
+      ],
+    }]
+  : [{ // pc端路由
+      meta: {
+        title: '',
+        icon: '',
+      },
+      children: [
+        ...homeRoute,
+      ],
     },
-    children: [
-      ...homeRoute,
-    ],
-  },
-]
+    ]
 
 const constantRoutesByFilesystem = generatedRoutes.filter((item) => {
   return item.meta?.enabled !== false && item.meta?.constant === true
diff --git "a/src/views/\133...all\135.vue" "b/src/views/\133...all\135.vue"
index 91af7e1..98ca1f9 100644
--- "a/src/views/\133...all\135.vue"
+++ "b/src/views/\133...all\135.vue"
@@ -51,30 +51,65 @@
 </template>
 
 <style lang="scss" scoped>
-.notfound {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  width: 700px;
+@media (min-width: 700px) {
+  .notfound {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 700px;
 
-  @include position-center(xy);
+    @include position-center(xy);
 
-  .icon {
-    width: 400px;
-    height: 400px;
-  }
-
-  .content {
-    h1 {
-      margin: 0;
-      font-size: 72px;
-      color: var(--el-text-color-primary);
+    .icon {
+      width: 400px;
+      height: 400px;
     }
 
-    .desc {
-      margin: 20px 0 30px;
-      font-size: 20px;
-      color: var(--el-text-color-secondary);
+    .content {
+      h1 {
+        margin: 0;
+        font-size: 72px;
+        color: var(--el-text-color-primary);
+      }
+
+      .desc {
+        margin: 20px 0 30px;
+        font-size: 20px;
+        color: var(--el-text-color-secondary);
+      }
+    }
+  }
+}
+
+@media (max-width: 700px) {
+  .notfound {
+    // display: flex;
+    // align-items: center;
+    // justify-content: space-between;
+    // width: 700px;
+    overflow: hidden;
+
+    @include position-center(xy);
+
+    .icon {
+      width: 350px;
+      height: 350px;
+    }
+
+    .content {
+      text-align: center !important;
+
+      h1 {
+        margin: 0;
+        font-size: 72px;
+        color: var(--el-text-color-primary);
+      }
+
+      .desc {
+        margin: 20px 0 30px;
+        font-size: 20px;
+        color: var(--el-text-color-secondary);
+      }
     }
   }
 }
diff --git a/src/views/home/dashboard/index.vue b/src/views/home/dashboard/index.vue
index 3fc5cec..a4b5f57 100644
--- a/src/views/home/dashboard/index.vue
+++ b/src/views/home/dashboard/index.vue
@@ -206,10 +206,10 @@
           <el-scrollbar height="200px">
             <div class="message-container">
               <div v-for="item in messageData" :key="item" class="message-item">
-                <span class="left">
+                <div class="left">
                   <span class="type">【{{ item.alarmTypeName }}】</span>
                   <span class="content">{{ item.alarmContent }}</span>
-                </span>
+                </div>
                 <span class="time">{{ item.alarmTime }}</span>
               </div>
             </div>
@@ -325,6 +325,9 @@
           flex-direction: column;
           text-align: center;
           width: 60%;
+          overflow: hidden;
+          white-space: nowrap;
+          text-overflow: ellipsis;
         }
       }
     }
@@ -341,24 +344,30 @@
         display: flex;
         justify-content: space-between;
         padding: 0 10px;
+        width: 100%;
 
         .left {
-          display: inline;
           width: 75%;
+          display: flex;
+          align-items: center;
+          overflow: hidden;
+          white-space: nowrap;
+          text-overflow: ellipsis;
         }
 
         .content {
           display: inline-block;
           padding-left: 10px;
           width: 65%;
-          // overflow: hidden;
-          // white-space: nowrap;
-          // text-overflow: ellipsis;
+          overflow: hidden;
+          white-space: nowrap;
+          text-overflow: ellipsis;
         }
 
         .time {
           font-size: 16px;
           color: #7c7777;
+          white-space: nowrap;
         }
       }
     }
diff --git a/src/views/home/device/type/index.vue b/src/views/home/device/type/index.vue
index ab687f7..c83bbc6 100644
--- a/src/views/home/device/type/index.vue
+++ b/src/views/home/device/type/index.vue
@@ -1,3 +1,142 @@
+<!--
+  Description: 设备管理-设备类型管理
+  Author: 李亚光
+  Date: 2023-07-15
+ -->
+<script lang="ts" setup name="DeviceTypeManage">
+// 表格数据
+const list = ref([
+  {
+    deviceType: '11',
+    deviceTypeName: '燃气智能监测终端',
+    desc: '燃气智能监测终端',
+    monitor: '井下燃气浓度',
+    alarmLimit: '是',
+    alarmLow: '是',
+    isEnable: '是',
+    time: '',
+  },
+  {
+    deviceType: '11',
+    deviceTypeName: '燃气智能监测终端',
+    desc: '燃气智能监测终端',
+    monitor: '井下燃气浓度',
+    alarmLimit: '是',
+    alarmLow: '是',
+    isEnable: '是',
+    time: '',
+  },
+  {
+    deviceType: '12',
+    deviceTypeName: '场站监测云台',
+    desc: '场站监测云台',
+    monitor: '场站内视频、燃气浓度',
+    alarmLimit: '是',
+    alarmLow: '是',
+    isEnable: '是',
+    time: '',
+  },
+])
+const total = ref(0)
+// 初始展示列
+const columns = ref<any>([
+  { text: '设备类型代号', value: 'deviceType', align: 'center' },
+  { text: '设备类型', value: 'deviceTypeName', align: 'center' },
+  { text: '描述', value: 'desc', align: 'center' },
+  { text: '监控内容', value: 'monitor', align: 'center' },
+  { text: '是否需要报警上限', value: 'alarmLimit', align: 'center' },
+  { text: '是否需要报警下限', value: 'alarmLow', align: 'center' },
+  { text: '是否启用', value: 'isEnable', align: 'center' },
+  { text: '最新操作时间', value: 'time', align: 'center' },
+])
+// 最终展示列
+const columnsConfig = ref([])
+// 修改列
+const editColumns = (data: any) => {
+  columnsConfig.value = data
+}
+const loadingTable = ref(true)
+//  查询条件
+const listQuery = ref({
+  limit: 20,
+  offset: 1,
+})
+// 查询数据
+const fetchData = () => {
+  setTimeout(() => {
+    loadingTable.value = false
+  })
+}
+// 重置查询条件f
+const reset = () => {
+
+}
+// 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
+const changePage = (val: { size: number; page: number }) => {
+  if (val && val.size) {
+    listQuery.value.limit = val.size
+  }
+  if (val && val.page) {
+    listQuery.value.offset = val.page
+  }
+  fetchData()
+}
+
+onMounted(() => {
+  fetchData()
+})
+</script>
+
 <template>
-  设备类型管理
+  <!-- 布局 -->
+  <app-container>
+    <!-- 筛选条件 -->
+    <search-area :need-clear="true" @search="fetchData" @clear="reset">
+      <search-item>
+        <el-select v-model="listQuery.keywords" placeholder="设备类型" clearable />
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.keywords" placeholder="是否启用" clearable />
+      </search-item>
+    </search-area>
+    <!-- 表头标题 -->
+    <table-container
+      :is-config="true" config-title="device-type" :columns="columns" :config-columns="columnsConfig"
+      :edit="editColumns"
+    >
+      <template #btns-right>
+        <!-- 操作 -->
+        <div>
+          <el-button type="primary">
+            新建
+          </el-button>
+        </div>
+      </template>
+      <!-- 查询结果Table显示 -->
+      <normal-table
+        :data="list" :total="total" :columns="columnsConfig" :query="listQuery" :list-loading="loadingTable"
+        @change="changePage"
+      >
+        <template #preColumns>
+          <el-table-column label="序号" width="55" align="center">
+            <template #default="scope">
+              {{ (listQuery.offset - 1) * listQuery.limit + scope.$index + 1 }}
+            </template>
+          </el-table-column>
+        </template>
+        <template #columns>
+          <el-table-column label="操作" align="center" width="120">
+            <template #default="scope">
+              <el-button type="primary" link size="small">
+                编辑 {{ scope.$index }}
+              </el-button>
+              <el-button type="danger" link size="small">
+                删除 {{ scope.$index }}
+              </el-button>
+            </template>
+          </el-table-column>
+        </template>
+      </normal-table>
+    </table-container>
+  </app-container>
 </template>
diff --git a/src/views/home/well/components/map.vue b/src/views/home/well/components/map.vue
new file mode 100644
index 0000000..5913db3
--- /dev/null
+++ b/src/views/home/well/components/map.vue
@@ -0,0 +1,26 @@
+<!--
+  Description: 闸井监测-地图
+  Author: 李亚光
+  Date: 2023-07-08
+ -->
+<script lang="ts" setup name="AlarmMap">
+import AMap from '@/components/map/index.vue'
+const $props = defineProps({
+  height: {
+    type: Number,
+    default: 0,
+  },
+})
+</script>
+
+<template>
+  <div :style="`height: ${$props.height}px`" class="map-container">
+    <a-map />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.map-container {
+  width: 100%;
+}
+</style>
diff --git a/src/views/home/well/index.vue b/src/views/home/well/index.vue
index 439816e..cc2059b 100644
--- a/src/views/home/well/index.vue
+++ b/src/views/home/well/index.vue
@@ -1,3 +1,230 @@
+<!--
+  Description: 闸井监测
+  Author: 李亚光
+  Date: 2023-07-12
+ -->
+<script lang="ts" setup name="WellMonitor">
+import { ElMessage } from 'element-plus'
+import { ArrowUpBold } from '@element-plus/icons-vue'
+import MapCom from './components/map.vue'
+// 表格数据
+const list = ref([
+  {
+    wellId: 'N57X508',
+    wellNo: '01110200745927',
+    name: '中压A闸1',
+    dept: '第一分公司/运维1所/1班',
+    property: '富源里小区',
+    manage: '自管',
+    use: '投用',
+    defence: '布防',
+    status: '正常',
+    device: '1',
+    tag: '',
+  },
+  {
+    wellId: 'N57X508',
+    wellNo: '01110200745927',
+    name: '中压A闸1',
+    dept: '第一分公司/运维1所/1班',
+    property: '富源里小区',
+    manage: '自管',
+    use: '停用',
+    defence: '撤防',
+    status: '正常',
+    device: '1',
+    tag: '',
+  },
+])
+const total = ref(0)
+// 初始展示列
+const columns = ref<any>([
+  { text: '闸井位号', value: 'wellId', align: 'center' },
+  { text: '闸井编号', value: 'wellNo', align: 'center' },
+  { text: '闸井名称', value: 'name', align: 'center' },
+  { text: '管理单位', value: 'dept', align: 'center' },
+  { text: '产权单位', value: 'property', align: 'center' },
+  { text: '管理方式', value: 'manage', align: 'center' },
+  { text: '使用状态', value: 'use', align: 'center' },
+  { text: '布防状态', value: 'defence', align: 'center' },
+  { text: '状态', value: 'status', align: 'center' },
+  { text: '感知设备', value: 'device', align: 'center' },
+  { text: '标签', value: 'tag', align: 'center' },
+])
+// 最终展示列
+const columnsConfig = ref([])
+// 修改列
+const editColumns = (data: any) => {
+  columnsConfig.value = data
+}
+const loadingTable = ref(true)
+//  查询条件
+const listQuery = ref({
+  limit: 20,
+  offset: 1,
+})
+// 开始结束时间
+const datetimerange = ref()
+watch(() => datetimerange.value, (newVal) => {
+  // listQuery.createTimeStart = ''
+  // listQuery.createTimeEnd = ''
+  if (Array.isArray(newVal)) {
+    if (newVal.length) {
+      // listQuery.createTimeStart = `${newVal[0]} 00:00:00`
+      // listQuery.createTimeEnd = `${newVal[1]} 23:59:59`
+    }
+  }
+})
+// 查询数据
+const fetchData = () => {
+  setTimeout(() => {
+    loadingTable.value = false
+  })
+}
+// 重置查询条件f
+const reset = () => {
+
+}
+// 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
+const changePage = (val: { size: number; page: number }) => {
+  if (val && val.size) {
+    listQuery.value.limit = val.size
+  }
+  if (val && val.page) {
+    listQuery.value.offset = val.page
+  }
+  fetchData()
+}
+
+onMounted(() => {
+  fetchData()
+})
+
+// 表格标识  地图或普通
+const tableFlag = ref('normal')
+const switchMode = (type: string) => {
+  if (!list.value.length) {
+    ElMessage.warning('暂无数据')
+    return
+  }
+  tableFlag.value = type
+}
+</script>
+
 <template>
-  闸井监测
+  <!-- 布局 -->
+  <app-container>
+    <!-- 地图 -->
+    <map-com v-if="tableFlag === 'map'" :height="350" />
+    <div v-if="tableFlag === 'map'" class="icon" @click="switchMode('normal')">
+      <el-icon :size="25">
+        <arrow-up-bold />
+      </el-icon>
+    </div>
+    <!-- 筛选条件 -->
+    <search-area :need-clear="true" @search="fetchData" @clear="reset">
+      <search-item>
+        <el-input v-model.trim="listQuery.keywords" placeholder="闸井位号" clearable />
+      </search-item>
+      <search-item>
+        <el-input v-model.trim="listQuery.keywords" placeholder="闸井编号" clearable />
+      </search-item>
+      <search-item>
+        <el-input v-model.trim="listQuery.keywords" placeholder="闸井编号" clearable />
+      </search-item>
+      <search-item>
+        <dept-select v-model="listQuery.keywords" placeholder="管理单位" :clearable="true" />
+      </search-item>
+      <search-item>
+        <el-input v-model.trim="listQuery.keywords" placeholder="产权单位" clearable />
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.keywords" placeholder="管理方式" clearable />
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.keywords" placeholder="使用状态" clearable />
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.keywords" placeholder="布防状态" clearable />
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.keywords" placeholder="监控状态" clearable />
+      </search-item>
+      <search-item>
+        <el-input v-model.trim="listQuery.keywords" placeholder="标签" clearable />
+      </search-item>
+    </search-area>
+    <!-- 表头标题 -->
+    <table-container
+      :is-config="true" config-title="well-monitor" :columns="columns" :config-columns="columnsConfig"
+      :edit="editColumns"
+    >
+      <template #btns-left>
+        <!-- 操作 -->
+        <div v-if="tableFlag === 'normal'" style="margin-left: 15px;">
+          <el-button type="primary" plain @click="switchMode('map')">
+            切换地图模式
+          </el-button>
+        </div>
+      </template>
+      <template #btns-right>
+        <!-- 操作 -->
+        <div>
+          <el-button type="primary">
+            导出
+          </el-button>
+        </div>
+      </template>
+      <!-- 查询结果Table显示 -->
+      <normal-table
+        :data="list" :total="total" :columns="columnsConfig" :query="listQuery" :list-loading="loadingTable"
+        @change="changePage"
+      >
+        <template #preColumns>
+          <!-- <el-table-column label="选择" width="55" align="center">
+              <template #default="scope">
+                <el-radio v-model="select" :label="scope.$index + 1" class="radio" />
+              </template>
+  </el-table-column> -->
+          <el-table-column label="序号" width="55" align="center">
+            <template #default="scope">
+              {{ (listQuery.offset - 1) * listQuery.limit + scope.$index + 1 }}
+            </template>
+          </el-table-column>
+        </template>
+        <template #columns>
+          <el-table-column label="布/撤防" align="center" width="80">
+            <template #default="scope">
+              <el-button type="primary" link size="small">
+                布防 {{ scope.$index }}
+              </el-button>
+            </template>
+          </el-table-column>
+          <el-table-column label="操作" align="center" width="120">
+            <template #default="scope">
+              <el-button type="primary" link size="small">
+                查看 {{ scope.$index }}
+              </el-button>
+              <el-button type="primary" link size="small">
+                编辑 {{ scope.$index }}
+              </el-button>
+            </template>
+          </el-table-column>
+        </template>
+      </normal-table>
+    </table-container>
+  </app-container>
 </template>
+
+<style lang="scss" scoped>
+.icon {
+  position: absolute;
+  top: 344px;
+  left: 50%;
+  transform: translateX(-50%);
+
+  &:hover {
+    cursor: pointer;
+  }
+}
+</style>
diff --git a/src/views/login-mobile.vue b/src/views/login-mobile.vue
new file mode 100644
index 0000000..b2eef7e
--- /dev/null
+++ b/src/views/login-mobile.vue
@@ -0,0 +1,19 @@
+<!-- 移动端登陆页面  -- elementplus -->
+<script lang="ts" setup name="Loginmobile">
+const route = useRoute()
+const router = useRouter()
+
+const handleLogin = () => {
+  router.push('/')
+}
+</script>
+
+<template>
+  <div>
+    移动端登陆页面
+  </div>
+
+  <el-button type="primary" size="large" @click="handleLogin">
+    基础测试
+  </el-button>
+</template>
diff --git a/src/views/login-pc.vue b/src/views/login-pc.vue
new file mode 100644
index 0000000..4cb3c1a
--- /dev/null
+++ b/src/views/login-pc.vue
@@ -0,0 +1,459 @@
+<route lang="yaml">
+meta:
+  title: 登录
+  constant: true
+  layout: false
+  </route>
+
+<script lang="ts" setup name="LoginPc">
+import type { FormInstance, FormRules } from 'element-plus'
+import { ElMessage } from 'element-plus'
+import useUserStore from '@/store/modules/user'
+import { RSAencrypt } from '@/utils/security'
+const route = useRoute()
+const router = useRouter()
+
+const userStore = useUserStore()
+
+const banner = new URL('../assets/images/login-banner.png', import.meta.url)
+  .href
+const title = import.meta.env.VITE_APP_TITLE
+
+// 表单类型，login 登录，reset 重置密码
+const formType = ref('login')
+// 加载状态
+const loading = ref(false)
+// 密码类型：password 密码
+const passwordType = ref('password')
+// 重定向路径
+const redirect = ref(route.query.redirect?.toString() ?? '/')
+// 是否需要验证码
+const showKaptcha = ref(false)
+// 公钥
+const publicKey = ref('')
+// sid
+const sid = ref('')
+
+// 获取系统基础配置： 公钥，是否开启验证码
+function getBaseConfig() {
+  userStore.getBaseConfig().then((res) => {
+    showKaptcha.value = res.kaptcha
+    publicKey.value = res.publicKey
+    sid.value = res.sid
+    ElMessage({
+      message: '连接服务器成功',
+      type: 'success',
+    })
+  })
+}
+
+// 登录
+const loginFormRef = ref<FormInstance>()
+const loginPasswordRef = ref<HTMLElement>()
+const loginForm = ref({
+  username: '',
+  password: '',
+  kaptcha: '',
+  remember: !!localStorage.login_username_bjwell,
+})
+const loginRules = ref<FormRules>({
+  username: [{ required: true, trigger: 'blur', message: '请输入用户名' }],
+  password: [
+    { required: true, trigger: 'blur', message: '请输入密码' },
+    { min: 6, max: 18, trigger: 'blur', message: '密码长度为6到18位' },
+  ],
+})
+
+// 处理登录
+function handleLogin() {
+  loginFormRef.value
+    && loginFormRef.value.validate(async (valid) => {
+      if (valid) {
+        loading.value = true
+        // 表单对象
+        const finalForm = {
+          sid: sid.value,
+          username: loginForm.value.username,
+          password: '',
+          kaptcha: loginForm.value.kaptcha,
+        }
+        // 加密
+        finalForm.password = await RSAencrypt(loginForm.value.password)
+        userStore
+          .login(finalForm)
+          .then(() => {
+            ElMessage({
+              message: '登录成功',
+              type: 'success',
+            })
+            loading.value = false
+            if (loginForm.value.remember) {
+              localStorage.setItem('login_username_bjwell', loginForm.value.username)
+            }
+            else {
+              localStorage.removeItem('login_username_bjwel')
+            }
+            router.push(redirect.value)
+          })
+          .catch(() => {
+            loading.value = false
+          })
+      }
+    })
+}
+// 注册
+const registerFormRef = ref<FormInstance>()
+const registerPasswordRef = ref<HTMLElement>()
+const registerCheckPasswordRef = ref<HTMLElement>()
+const registerForm = ref({
+  username: '',
+  captcha: '',
+  password: '',
+  checkPassword: '',
+})
+const registerRules = ref<FormRules>({
+  username: [{ required: true, trigger: 'blur', message: '请输入用户名' }],
+  captcha: [{ required: true, trigger: 'blur', message: '请输入验证码' }],
+  password: [
+    { required: true, trigger: 'blur', message: '请输入密码' },
+    { min: 6, max: 18, trigger: 'blur', message: '密码长度为6到18位' },
+  ],
+  checkPassword: [
+    { required: true, trigger: 'blur', message: '请再次输入密码' },
+    {
+      validator: (rule, value, callback) => {
+        if (value !== registerForm.value.password) {
+          callback(new Error('两次输入的密码不一致'))
+        }
+        else {
+          callback()
+        }
+      },
+    },
+  ],
+})
+function handleRegister() {
+  ElMessage({
+    message: '注册模块仅提供界面演示，无实际功能，需开发者自行扩展',
+    type: 'warning',
+  })
+  registerFormRef.value
+    && registerFormRef.value.validate((valid) => {
+      if (valid) {
+        // 这里编写业务代码
+      }
+    })
+}
+
+// 重置密码
+const resetFormRef = ref<FormInstance>()
+const resetNewPasswordRef = ref<HTMLElement>()
+const resetForm = ref({
+  username: localStorage.login_username || '',
+  captcha: '',
+  newPassword: '',
+})
+const resetRules = ref<FormRules>({
+  username: [{ required: true, trigger: 'blur', message: '请输入用户名' }],
+  captcha: [{ required: true, trigger: 'blur', message: '请输入验证码' }],
+  newPassword: [
+    { required: true, trigger: 'blur', message: '请输入新密码' },
+    { min: 6, max: 18, trigger: 'blur', message: '密码长度为6到18位' },
+  ],
+})
+function handleReset() {
+  ElMessage({
+    message: '重置密码模块仅提供界面演示，无实际功能，需开发者自行扩展',
+    type: 'warning',
+  })
+  resetFormRef.value
+    && resetFormRef.value.validate((valid) => {
+      if (valid) {
+        // 这里编写业务代码
+      }
+    })
+}
+
+function showPassword(passwordEl: HTMLElement | undefined) {
+  passwordType.value = passwordType.value === 'password' ? '' : 'password'
+  nextTick(() => {
+    passwordEl?.focus()
+  })
+}
+
+function testusername(username: string) {
+  loginForm.value.username = username
+  loginForm.value.password = '111111'
+  handleLogin()
+}
+onBeforeMount(() => {
+  loginForm.value.username = localStorage.login_username_bjwell || ''
+  getBaseConfig()
+})
+</script>
+
+<template>
+  <div>
+    <div class="bg-top-banner">
+      燃气物联感知平台
+    </div>
+    <div class="bg-banner" />
+    <div id="login-box">
+      <el-form
+        v-show="formType === 'login'" ref="loginFormRef" :model="loginForm" :rules="loginRules"
+        class="login-form" autocomplete="on"
+      >
+        <div class="title-container">
+          <h3 class="title">
+            用户登录
+          </h3>
+        </div>
+        <div>
+          <el-form-item prop="username">
+            <el-input ref="name" v-model="loginForm.username" placeholder="用户名" text tabindex="1" autocomplete="on">
+              <template #prefix>
+                <el-icon>
+                  <svg-icon name="ep:user" />
+                </el-icon>
+              </template>
+            </el-input>
+          </el-form-item>
+          <el-form-item prop="password">
+            <el-input
+              ref="loginPasswordRef" v-model="loginForm.password" :type="passwordType" placeholder="密码"
+              tabindex="2" autocomplete="on" @keyup.enter="handleLogin"
+            >
+              <template #prefix>
+                <el-icon>
+                  <svg-icon name="ep:lock" />
+                </el-icon>
+              </template>
+              <template #suffix>
+                <el-icon>
+                  <svg-icon
+                    :name="passwordType === 'password' ? 'eye' : 'eye-open'"
+                    @click="showPassword(loginPasswordRef)"
+                  />
+                </el-icon>
+              </template>
+            </el-input>
+          </el-form-item>
+        </div>
+        <div class="flex-bar">
+          <el-checkbox v-model="loginForm.remember">
+            记住我
+          </el-checkbox>
+        </div>
+        <el-button :loading="loading" type="primary" size="large" style="width: 100%;" @click.prevent="handleLogin">
+          登录
+        </el-button>
+        <div v-if="showKaptcha" style="margin-top: 20px; margin-bottom: -20px; text-align: center;">
+          <el-divider>演示账号一键登录</el-divider>
+          <el-button type="primary" size="small" plain @click="testusername('admin')">
+            admin
+          </el-button>
+          <el-button size="small" plain @click="testusername('test')">
+            test
+          </el-button>
+        </div>
+      </el-form>
+    </div>
+    <copyright />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+[data-mode="mobile"] {
+  #login-box {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    top: inherit;
+    left: inherit;
+    transform: translateX(0) translateY(0);
+    flex-direction: column;
+    justify-content: start;
+    border-radius: 0;
+    box-shadow: none;
+
+    .login-banner {
+      width: 100%;
+      padding: 20px 0;
+
+      .banner {
+        position: relative;
+        right: inherit;
+        width: 100%;
+        max-width: 375px;
+        margin: 0 auto;
+        display: inherit;
+        top: inherit;
+        transform: translateY(0);
+      }
+    }
+
+    .login-form {
+      width: 100%;
+      min-height: auto;
+      padding: 30px;
+    }
+  }
+
+  .copyright {
+    position: relative;
+    bottom: 0;
+    padding-bottom: 10px;
+  }
+}
+
+:deep(input[type="password"]::-ms-reveal) {
+  display: none;
+}
+
+.bg-top-banner {
+  position: fixed;
+  top: 0;
+  width: 100%;
+  height: 17vh;
+  z-index: 999;
+  line-height: 10vh;
+  text-align: center;
+  font-size: 30px;
+  color: #fff;
+  background: url("../assets/images/login-image/banner.png") no-repeat center / cover;
+}
+
+.bg-banner {
+  position: fixed;
+  z-index: 0;
+  width: 100%;
+  height: 100%;
+  // background: radial-gradient(circle at center, var(--el-fill-color-lighter), var(--el-bg-color-page));
+  background: url("../assets/images/login-image/bg.png") no-repeat center / cover;
+}
+
+#login-box {
+  display: flex;
+  justify-content: space-between;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translateX(-50%) translateY(-50%);
+  // background-color: var(--el-bg-color);
+
+  border-radius: 10px;
+  overflow: hidden;
+  box-shadow: var(--el-box-shadow);
+
+  .login-banner {
+    position: relative;
+    width: 450px;
+    background-color: var(--el-fill-color-light);
+    overflow: hidden;
+
+    .banner {
+      width: 100%;
+
+      @include position-center(y);
+    }
+
+    .logo {
+      position: absolute;
+      top: 20px;
+      left: 20px;
+      width: 30px;
+      height: 30px;
+      border-radius: 4px;
+      background: url("../assets/images/logo.png") no-repeat;
+      background-size: contain;
+      box-shadow: var(--el-box-shadow-light);
+    }
+  }
+
+  .login-form {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    min-height: 500px;
+    width: 500px;
+    padding: 50px;
+    background: url("../assets/images/login-image/frame.png") no-repeat center / cover;
+    overflow: hidden;
+
+    .title-container {
+      position: relative;
+
+      .title {
+        font-size: 1.3em;
+        color: #fff;
+        margin: 0 auto 30px;
+        text-align: center;
+        font-weight: bold;
+      }
+    }
+  }
+
+  .el-form-item {
+    margin-bottom: 24px;
+
+    :deep(.el-input) {
+      height: 48px;
+      line-height: inherit;
+      width: 100%;
+
+      input {
+        height: 48px;
+      }
+
+      .el-input__prefix,
+      .el-input__suffix {
+        display: flex;
+        align-items: center;
+      }
+
+      .el-input__prefix {
+        left: 10px;
+      }
+
+      .el-input__suffix {
+        right: 10px;
+      }
+    }
+  }
+
+  .flex-bar {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 20px;
+  }
+
+  .sub-link {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-top: 20px;
+    font-size: 14px;
+    color: var(--el-text-color-secondary);
+
+    .text {
+      margin-right: 10px;
+    }
+  }
+}
+
+.copyright {
+  position: absolute;
+  bottom: 30px;
+  width: 100%;
+  margin: 0;
+}
+
+:deep .el-input__wrapper {
+  background-color: transparent !important;
+}
+
+:deep .el-input__inner {
+  color: #fff !important;
+}
+</style>
diff --git a/src/views/login.vue b/src/views/login.vue
index cdc09f6..2334631 100644
--- a/src/views/login.vue
+++ b/src/views/login.vue
@@ -1,456 +1,13 @@
-<route lang="yaml">
-  meta:
-    title: 登录
-    constant: true
-    layout: false
-  </route>
-
+<!-- 登陆页面 -->
 <script lang="ts" setup name="Login">
-import type { FormInstance, FormRules } from 'element-plus'
-import { ElMessage } from 'element-plus'
-import useUserStore from '@/store/modules/user'
-import { RSAencrypt } from '@/utils/security'
-const route = useRoute()
-const router = useRouter()
-
-const userStore = useUserStore()
-
-const banner = new URL('../assets/images/login-banner.png', import.meta.url)
-  .href
-const title = import.meta.env.VITE_APP_TITLE
-
-// 表单类型，login 登录，reset 重置密码
-const formType = ref('login')
-// 加载状态
-const loading = ref(false)
-// 密码类型：password 密码
-const passwordType = ref('password')
-// 重定向路径
-const redirect = ref(route.query.redirect?.toString() ?? '/')
-// 是否需要验证码
-const showKaptcha = ref(false)
-// 公钥
-const publicKey = ref('')
-// sid
-const sid = ref('')
-
-// 获取系统基础配置： 公钥，是否开启验证码
-function getBaseConfig() {
-  userStore.getBaseConfig().then((res) => {
-    showKaptcha.value = res.kaptcha
-    publicKey.value = res.publicKey
-    sid.value = res.sid
-    ElMessage({
-      message: '连接服务器成功',
-      type: 'success',
-    })
-  })
-}
-
-// 登录
-const loginFormRef = ref<FormInstance>()
-const loginPasswordRef = ref<HTMLElement>()
-const loginForm = ref({
-  username: '',
-  password: '',
-  kaptcha: '',
-  remember: !!localStorage.login_username_bjwell,
-})
-const loginRules = ref<FormRules>({
-  username: [{ required: true, trigger: 'blur', message: '请输入用户名' }],
-  password: [
-    { required: true, trigger: 'blur', message: '请输入密码' },
-    { min: 6, max: 18, trigger: 'blur', message: '密码长度为6到18位' },
-  ],
-})
-
-// 处理登录
-function handleLogin() {
-  loginFormRef.value
-    && loginFormRef.value.validate(async (valid) => {
-      if (valid) {
-        loading.value = true
-        // 表单对象
-        const finalForm = {
-          sid: sid.value,
-          username: loginForm.value.username,
-          password: '',
-          kaptcha: loginForm.value.kaptcha,
-        }
-        // 加密
-        finalForm.password = await RSAencrypt(loginForm.value.password)
-        userStore
-          .login(finalForm)
-          .then(() => {
-            ElMessage({
-              message: '登录成功',
-              type: 'success',
-            })
-            loading.value = false
-            if (loginForm.value.remember) {
-              localStorage.setItem('login_username_bjwell', loginForm.value.username)
-            }
-            else {
-              localStorage.removeItem('login_username_bjwel')
-            }
-            router.push(redirect.value)
-          })
-          .catch(() => {
-            loading.value = false
-          })
-      }
-    })
-}
-// 注册
-const registerFormRef = ref<FormInstance>()
-const registerPasswordRef = ref<HTMLElement>()
-const registerCheckPasswordRef = ref<HTMLElement>()
-const registerForm = ref({
-  username: '',
-  captcha: '',
-  password: '',
-  checkPassword: '',
-})
-const registerRules = ref<FormRules>({
-  username: [{ required: true, trigger: 'blur', message: '请输入用户名' }],
-  captcha: [{ required: true, trigger: 'blur', message: '请输入验证码' }],
-  password: [
-    { required: true, trigger: 'blur', message: '请输入密码' },
-    { min: 6, max: 18, trigger: 'blur', message: '密码长度为6到18位' },
-  ],
-  checkPassword: [
-    { required: true, trigger: 'blur', message: '请再次输入密码' },
-    {
-      validator: (rule, value, callback) => {
-        if (value !== registerForm.value.password) {
-          callback(new Error('两次输入的密码不一致'))
-        }
-        else {
-          callback()
-        }
-      },
-    },
-  ],
-})
-function handleRegister() {
-  ElMessage({
-    message: '注册模块仅提供界面演示，无实际功能，需开发者自行扩展',
-    type: 'warning',
-  })
-  registerFormRef.value
-    && registerFormRef.value.validate((valid) => {
-      if (valid) {
-        // 这里编写业务代码
-      }
-    })
-}
-
-// 重置密码
-const resetFormRef = ref<FormInstance>()
-const resetNewPasswordRef = ref<HTMLElement>()
-const resetForm = ref({
-  username: localStorage.login_username || '',
-  captcha: '',
-  newPassword: '',
-})
-const resetRules = ref<FormRules>({
-  username: [{ required: true, trigger: 'blur', message: '请输入用户名' }],
-  captcha: [{ required: true, trigger: 'blur', message: '请输入验证码' }],
-  newPassword: [
-    { required: true, trigger: 'blur', message: '请输入新密码' },
-    { min: 6, max: 18, trigger: 'blur', message: '密码长度为6到18位' },
-  ],
-})
-function handleReset() {
-  ElMessage({
-    message: '重置密码模块仅提供界面演示，无实际功能，需开发者自行扩展',
-    type: 'warning',
-  })
-  resetFormRef.value
-    && resetFormRef.value.validate((valid) => {
-      if (valid) {
-        // 这里编写业务代码
-      }
-    })
-}
-
-function showPassword(passwordEl: HTMLElement | undefined) {
-  passwordType.value = passwordType.value === 'password' ? '' : 'password'
-  nextTick(() => {
-    passwordEl?.focus()
-  })
-}
-
-function testusername(username: string) {
-  loginForm.value.username = username
-  loginForm.value.password = '111111'
-  handleLogin()
-}
-onBeforeMount(() => {
-  loginForm.value.username = localStorage.login_username_bjwell || ''
-  getBaseConfig()
-})
+import loginPc from './login-pc.vue'
+import loginMobile from './login-mobile.vue'
+const browserType = window.localStorage.getItem('browser-type-bj-well') // mobile || pc
 </script>
 
 <template>
-  <div>
-    <div class="bg-top-banner">
-      燃气物联感知平台
-    </div>
-    <div class="bg-banner" />
-    <div id="login-box">
-      <el-form v-show="formType === 'login'" ref="loginFormRef" :model="loginForm" :rules="loginRules"
-        class="login-form" autocomplete="on">
-        <div class="title-container">
-          <h3 class="title">
-            用户登录
-          </h3>
-        </div>
-        <div>
-          <el-form-item prop="username">
-            <el-input ref="name" v-model="loginForm.username" placeholder="用户名" text tabindex="1" autocomplete="on">
-              <template #prefix>
-                <el-icon>
-                  <svg-icon name="ep:user" />
-                </el-icon>
-              </template>
-            </el-input>
-          </el-form-item>
-          <el-form-item prop="password">
-            <el-input ref="loginPasswordRef" v-model="loginForm.password" :type="passwordType" placeholder="密码"
-              tabindex="2" autocomplete="on" @keyup.enter="handleLogin">
-              <template #prefix>
-                <el-icon>
-                  <svg-icon name="ep:lock" />
-                </el-icon>
-              </template>
-              <template #suffix>
-                <el-icon>
-                  <svg-icon :name="passwordType === 'password' ? 'eye' : 'eye-open'"
-                    @click="showPassword(loginPasswordRef)" />
-                </el-icon>
-              </template>
-            </el-input>
-          </el-form-item>
-        </div>
-        <div class="flex-bar">
-          <el-checkbox v-model="loginForm.remember">
-            记住我
-          </el-checkbox>
-        </div>
-        <el-button :loading="loading" type="primary" size="large" style="width: 100%;" @click.prevent="handleLogin">
-          登录
-        </el-button>
-        <div v-if="showKaptcha" style="margin-top: 20px; margin-bottom: -20px; text-align: center;">
-          <el-divider>演示账号一键登录</el-divider>
-          <el-button type="primary" size="small" plain @click="testusername('admin')">
-            admin
-          </el-button>
-          <el-button size="small" plain @click="testusername('test')">
-            test
-          </el-button>
-        </div>
-      </el-form>
-    </div>
-    <copyright />
-  </div>
+  <!-- pc端 -->
+  <login-pc v-if="browserType === 'pc'" />
+  <!-- 移动端 -->
+  <login-mobile v-if="browserType === 'mobile'" />
 </template>
-
-<style lang="scss" scoped>
-[data-mode="mobile"] {
-  #login-box {
-    position: relative;
-    width: 100%;
-    height: 100%;
-    top: inherit;
-    left: inherit;
-    transform: translateX(0) translateY(0);
-    flex-direction: column;
-    justify-content: start;
-    border-radius: 0;
-    box-shadow: none;
-
-    .login-banner {
-      width: 100%;
-      padding: 20px 0;
-
-      .banner {
-        position: relative;
-        right: inherit;
-        width: 100%;
-        max-width: 375px;
-        margin: 0 auto;
-        display: inherit;
-        top: inherit;
-        transform: translateY(0);
-      }
-    }
-
-    .login-form {
-      width: 100%;
-      min-height: auto;
-      padding: 30px;
-    }
-  }
-
-  .copyright {
-    position: relative;
-    bottom: 0;
-    padding-bottom: 10px;
-  }
-}
-
-:deep(input[type="password"]::-ms-reveal) {
-  display: none;
-}
-
-.bg-top-banner {
-  position: fixed;
-  top: 0;
-  width: 100%;
-  height: 17vh;
-  z-index: 999;
-  line-height: 10vh;
-  text-align: center;
-  font-size: 30px;
-  color: #fff;
-  background:
-    url("../assets/images/login-image/banner.png") no-repeat center / cover;
-}
-
-.bg-banner {
-  position: fixed;
-  z-index: 0;
-  width: 100%;
-  height: 100%;
-  // background: radial-gradient(circle at center, var(--el-fill-color-lighter), var(--el-bg-color-page));
-  background:
-    url("../assets/images/login-image/bg.png") no-repeat center / cover;
-}
-
-#login-box {
-  display: flex;
-  justify-content: space-between;
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translateX(-50%) translateY(-50%);
-  // background-color: var(--el-bg-color);
-
-  border-radius: 10px;
-  overflow: hidden;
-  box-shadow: var(--el-box-shadow);
-
-  .login-banner {
-    position: relative;
-    width: 450px;
-    background-color: var(--el-fill-color-light);
-    overflow: hidden;
-
-    .banner {
-      width: 100%;
-
-      @include position-center(y);
-    }
-
-    .logo {
-      position: absolute;
-      top: 20px;
-      left: 20px;
-      width: 30px;
-      height: 30px;
-      border-radius: 4px;
-      background: url("../assets/images/logo.png") no-repeat;
-      background-size: contain;
-      box-shadow: var(--el-box-shadow-light);
-    }
-  }
-
-  .login-form {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    min-height: 500px;
-    width: 500px;
-    padding: 50px;
-    background:
-      url("../assets/images/login-image/frame.png") no-repeat center / cover;
-    overflow: hidden;
-
-    .title-container {
-      position: relative;
-
-      .title {
-        font-size: 1.3em;
-        color: #fff;
-        margin: 0 auto 30px;
-        text-align: center;
-        font-weight: bold;
-      }
-    }
-  }
-
-  .el-form-item {
-    margin-bottom: 24px;
-
-    :deep(.el-input) {
-      height: 48px;
-      line-height: inherit;
-      width: 100%;
-
-      input {
-        height: 48px;
-      }
-
-      .el-input__prefix,
-      .el-input__suffix {
-        display: flex;
-        align-items: center;
-      }
-
-      .el-input__prefix {
-        left: 10px;
-      }
-
-      .el-input__suffix {
-        right: 10px;
-      }
-    }
-  }
-
-  .flex-bar {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    margin-bottom: 20px;
-  }
-
-  .sub-link {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    margin-top: 20px;
-    font-size: 14px;
-    color: var(--el-text-color-secondary);
-
-    .text {
-      margin-right: 10px;
-    }
-  }
-}
-
-.copyright {
-  position: absolute;
-  bottom: 30px;
-  width: 100%;
-  margin: 0;
-}
-
-:deep .el-input__wrapper {
-  background-color: transparent !important;
-}
-
-:deep .el-input__inner {
-  color: #fff !important;
-}
-</style>
diff --git a/src/views/mobile/example1/index.vue b/src/views/mobile/example1/index.vue
new file mode 100644
index 0000000..e3254f6
--- /dev/null
+++ b/src/views/mobile/example1/index.vue
@@ -0,0 +1,33 @@
+<template>
+  <h1>路由跳转测试1页面</h1>
+  <h1>路由跳转测试1页面</h1>
+  <h1>路由跳转测试1页面</h1>
+  <h1>路由跳转测试1页面</h1>
+  <h1>路由跳转测试1页面</h1>
+  <h1>路由跳转测试1页面</h1>
+  <h1>路由跳转测试1页面</h1>
+  <h1>路由跳转测试1页面</h1>
+  <h1>路由跳转测试1页面</h1>
+  <h1>路由跳转测试1页面</h1>
+  <h1>路由跳转测试1页面</h1>
+  <h1>路由跳转测试1页面</h1>
+  <h1>路由跳转测试1页面</h1>
+  <h1>路由跳转测试1页面</h1>
+  <h1>路由跳转测试1页面</h1>
+  <h1>路由跳转测试1页面</h1>
+  <h1>路由跳转测试1页面</h1>
+  <h1>路由跳转测试1页面</h1>
+  <h1>路由跳转测试1页面</h1>
+  <h1>路由跳转测试1页面</h1>
+  <h1>路由跳转测试1页面</h1>
+  <h1>路由跳转测试1页面</h1>
+  <h1>路由跳转测试1页面</h1>
+  <h1>路由跳转测试1页面</h1>
+  <h1>路由跳转测试1页面</h1>
+  <h1>路由跳转测试1页面</h1>
+  <h1>路由跳转测试1页面</h1>
+  <h1>路由跳转测试1页面</h1>
+  <h1>路由跳转测试1页面</h1>
+  <h1>路由跳转测试1页面</h1>
+  <h1>路由跳转测试1页面</h1>
+</template>

diff --git a/src/App.vue b/src/App.vue
index 52ccd6e..a9268fb 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -6,7 +6,7 @@
 import useMenuStore from '@/store/modules/menu'
 
 const settingsStore = useSettingsStore()
-
+const $router = useRouter()
 const buttonConfig = ref({
   autoInsertSpace: true,
 })
@@ -81,14 +81,40 @@
 })
 
 onMounted(() => {
+  // // 浏览器访问当前位置
+  // if ('geolocation' in navigator) {
+  //   navigator.geolocation.getCurrentPosition(function (position) {
+  //     // 允许
+  //     console.log('纬度: ', position.coords.latitude)
+  //     console.log('经度: ', position.coords.longitude)
+  //   }, function (error) {
+  //     // 拒绝
+  //     console.error("Error Code = " + error.code + " - " + error.message);
+  //   })
+  // } else {
+  //   console.error("Geolocation is not supported by this browser.")
+  // }
   settingsStore.setMode(document.documentElement.clientWidth)
   window.onresize = () => {
     settingsStore.setMode(document.documentElement.clientWidth)
+    // 监听浏览器类型变化 刷新浏览器
+    const userAgent = navigator.userAgent || navigator.vendor || window.opera
+    const isMobile = /android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(userAgent)
+    if (`${isMobile ? 'mobile' : 'pc'}` !== window.localStorage.getItem('browser-type-bj-well')) {
+      // if (!window.localStorage.getItem('browser-type-bj-well')) { return }
+      console.log(`浏览器类型发生变化，由${window.localStorage.getItem('browser-type-bj-well')}变为${isMobile ? 'mobile' : 'pc'}`)
+      window.localStorage.setItem('browser-type-bj-well', `${isMobile ? 'mobile' : 'pc'}`)
+      $router.push('/')
+      setTimeout(() => {
+        window.location.reload()
+      }, 1000)
+    }
   }
   hotkeys('alt+i', () => {
     eventBus.emit('global-system-info-toggle')
   })
 })
+const browserType = window.localStorage.getItem('browser-type-bj-well') // mobile || pc
 </script>
 
 <template>
@@ -99,6 +125,6 @@
         '--g-sub-sidebar-actual-width': subSidebarActualWidth,
       }"
     />
-    <system-info />
+    <system-info v-if="browserType !== 'mobile'" />
   </el-config-provider>
 </template>
diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue
index e247e28..de24f71 100644
--- a/src/components/NormalTable/index.vue
+++ b/src/components/NormalTable/index.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup name="NormalTable">
 import type { Ref } from 'vue'
-import { ElTable } from 'element-plus'
+import { ElMessage, ElTable } from 'element-plus'
 import { defineExpose, ref } from 'vue'
 import type { TableColumn } from './table_interface'
 import TableColumnCom from './tableColumn.vue'
@@ -84,7 +84,11 @@
     type: String,
     default: 'default',
   }, // 表格大小，默认，small,mini等，与el-table条件相同
-  // 想要展示成链接的数据
+  // 是否要右击菜单
+  needContextmenu: {
+    type: Boolean,
+    default: false,
+  },
 })
 const emit = defineEmits(['change', 'selectionChange', 'rowClick', 'rowDbClick', 'multiSelect', 'filterChange', 'rowDisabled', 'handleClickFollowLink'])
 // -------定义数据--------------
@@ -148,8 +152,10 @@
 //   changeColumns()
 // })
 // 多选
+const multiSelectData = ref([])
 const handleSelectionChange = (val: any) => {
   // console.log(val)
+  multiSelectData.value = val
   emit('multiSelect', val)
 }
 // 单选选中
@@ -214,27 +220,87 @@
 const handleClickFollowLink = (row: any, title: string) => {
   emit('handleClickFollowLink', row, title)
 }
+
+// 右击当前行操作
+const clickIndex = ref(-1)
+const contextmenu = (row: any, column: any, event: Event, index: number) => {
+  if (!props.needContextmenu) { return }
+  // 阻止默认的右键菜单
+  event.preventDefault()
+  clickIndex.value = props.data.findIndex(item => item === row)
+  console.log('右击', clickIndex.value)
+  // 获取自定义菜单元素
+  var menu = document.getElementById('custom-menu')
+  // 设置自定义菜单的位置并显示
+  let positionX = event.pageX
+  let positionY = event.pageY
+  if (document.documentElement.clientHeight - event.pageY < 204) {
+    positionY = document.documentElement.clientHeight - 204 + 102
+  }
+  if (document.documentElement.clientWidth - event.pageX < 146) {
+    positionX = document.documentElement.clientWidth - 146
+  }
+  menu.style.top = `${positionY - 102}px`
+  menu.style.left = `${positionX}px`
+  menu.style.display = 'block'
+}
+// 点击其他位置隐藏自定义菜单
+document.addEventListener('click', () => {
+  document.getElementById('custom-menu').style.display = 'none'
+})
+// 添加行
+const costomAddRow = (type: string) => {
+  if (type === 'current-pre') {
+    // 当前行前方插入
+    props.data.splice(clickIndex.value, 0, JSON.parse(JSON.stringify(props.data[clickIndex.value])))
+  }
+  else if (type === 'current-next') {
+    // 当前行后方方插入
+    props.data.splice(clickIndex.value + 1, 0, JSON.parse(JSON.stringify(props.data[clickIndex.value])))
+  }
+  else if (type === 'list-head') {
+    // 列表头行插入
+    props.data.splice(0, 0, JSON.parse(JSON.stringify(props.data[clickIndex.value])))
+  }
+  else if (type === 'list-tail') {
+    // 列表尾行插入
+    props.data.splice(props.data.length, 0, JSON.parse(JSON.stringify(props.data[clickIndex.value])))
+  }
+  else if (type === 'select-pre') {
+    // 选中行前方插入
+    if (!multiSelectData.value.length) {
+      ElMessage.warning('未选择数据')
+      return
+    }
+    multiSelectData.value.forEach((item, index) => {
+      const dataIndex = props.data.findIndex(citem => item === citem)
+      props.data.splice(dataIndex, 0, JSON.parse(JSON.stringify(item)))
+    })
+    table.value!.clearSelection()
+  }
+  else if (type === 'select-next') {
+    // 选中行后方插入
+    if (!multiSelectData.value.length) {
+      ElMessage.warning('未选择数据')
+      return
+    }
+    multiSelectData.value.forEach((item, index) => {
+      const dataIndex = props.data.findIndex(citem => item === citem)
+      props.data.splice(dataIndex + 1, 0, JSON.parse(JSON.stringify(item)))
+    })
+    table.value!.clearSelection()
+  }
+  clickIndex.value = -1
+}
 </script>
 
 <template>
   <div id="normal-table-com">
     <el-table
-      id="print"
-      ref="table"
-      v-loading="listLoading"
-      :data="data"
-      :height="height"
-      border
-      stripe
-      :size="size"
-      style="width: 100%;"
-      :row-key="(row) => { return row.id || row.index }"
-      :span-method="mergeTableRow"
-      @selection-change="handleSelectionChange"
-      @select="selectClick"
-      @row-click="rowClick"
-      @row-dblclick="rowDbClick"
-      @filter-change="filterChange"
+      id="print" ref="table" v-loading="listLoading" :data="data" :height="height" border stripe :size="size"
+      style="width: 100%;" :row-key="(row) => { return row.id || row.index }" :span-method="mergeTableRow"
+      @selection-change="handleSelectionChange" @select="selectClick" @row-click="rowClick" @row-dblclick="rowDbClick"
+      @filter-change="filterChange" @row-contextmenu="contextmenu"
     >
       <slot name="preColumns" />
 
@@ -243,45 +309,48 @@
           <el-radio v-model="singleChecked" :label="scope.row.id" class="radio" @change="radioChange" />
         </template>
       </el-table-column>
-      <el-table-column v-if="isShowmultiSelect && isMulti" :reserve-selection="true" type="selection" width="38" :selectable="selectable" fixed="left" />
+      <el-table-column
+        v-if="isShowmultiSelect && isMulti" :reserve-selection="true" type="selection" width="38"
+        :selectable="selectable" fixed="left"
+      />
       <template v-for="column of columns" :key="column.value">
         <el-table-column
-          v-if="!column.isFilters"
-          :label="column.text"
-          :prop="column.value"
-          :width="column.width"
-          :align="column.align"
-          :show-overflow-tooltip="column.showOverflow ? column.showOverflow : true"
+          v-if="!column.isFilters" :label="column.text" :prop="column.value" :width="column.width"
+          :align="column.align" :show-overflow-tooltip="column.showOverflow ? column.showOverflow : true"
           :fixed="column.fixed"
         >
           <template #default="scope">
-            <span v-if="!column.filter && !column.isLink" :style="column.styleFilter ? column.styleFilter(scope.row) : ''">{{ scope.row[column.value] }}</span>
-            <span v-if="column.filter && !column.isLink" :style="column.styleFilter ? column.styleFilter(scope.row) : ''">{{ column.filter(scope.row) }}</span>
+            <span
+              v-if="!column.filter && !column.isLink"
+              :style="column.styleFilter ? column.styleFilter(scope.row) : ''"
+            >{{ scope.row[column.value] }}</span>
+            <span
+              v-if="column.filter && !column.isLink"
+              :style="column.styleFilter ? column.styleFilter(scope.row) : ''"
+            >{{ column.filter(scope.row) }}</span>
             <div v-if="column.isLink">
               <show-photo v-for="(item, index) in scope.row.fileArr" :key="index" :minio-file-name="item" /><br>
             </div>
             <div v-if="column.followLink">
-              <div v-for="(item, index) in scope.row.followLinkArr" :key="index" @click="handleClickFollowLink(scope.row, item)">
+              <div
+                v-for="(item, index) in scope.row.followLinkArr" :key="index"
+                @click="handleClickFollowLink(scope.row, item)"
+              >
                 <span :class="item !== '/' ? 'follow-link' : ''">{{ item }}</span>
               </div>
             </div>
           </template>
         </el-table-column>
         <el-table-column
-          v-if="column.isFilters"
-          :label="column.text"
-          :prop="column.value"
-          :width="column.width"
-          :align="column.align"
-          :show-overflow-tooltip="column.showOverflow ? column.showOverflow : true"
-          :fixed="column.fixed"
-          :column-key="column.value"
-          :filters="column.filters"
-          :filter-multiple="false"
+          v-if="column.isFilters" :label="column.text" :prop="column.value" :width="column.width"
+          :align="column.align" :show-overflow-tooltip="column.showOverflow ? column.showOverflow : true"
+          :fixed="column.fixed" :column-key="column.value" :filters="column.filters" :filter-multiple="false"
         >
           <template #default="scope">
-            <span v-if="!column.filter" :style="column.styleFilter ? column.styleFilter(scope.row) : ''">{{ scope.row[column.value] }}</span>
-            <span v-else :style="column.styleFilter ? column.styleFilter(scope.row) : ''">{{ column.filter(scope.row) }}</span>
+            <span v-if="!column.filter" :style="column.styleFilter ? column.styleFilter(scope.row) : ''">{{
+              scope.row[column.value] }}</span>
+            <span v-else :style="column.styleFilter ? column.styleFilter(scope.row) : ''">{{ column.filter(scope.row)
+            }}</span>
           </template>
         </el-table-column>
       </template>
@@ -290,19 +359,67 @@
     </el-table>
     <div v-if="props.pagination" style="width: 100%;margin-top: 10px;">
       <el-pagination
-        :current-page="props.query.offset"
-        :page-sizes="props.pageSizes as number[]"
-        :page-size="props.query.limit"
-        :total="props.total"
-        layout="total, sizes, prev, pager, next"
-        @size-change="handleSizeChange"
-        @current-change="handleCurrentChange"
+        :current-page="props.query.offset" :page-sizes="props.pageSizes as number[]"
+        :page-size="props.query.limit" :total="props.total" layout="total, sizes, prev, pager, next"
+        @size-change="handleSizeChange" @current-change="handleCurrentChange"
       />
     </div>
+    <!-- 自定义菜单 -->
+    <div id="custom-menu">
+      <p class="menu-item" @click="costomAddRow('current-pre')">
+        当前行前方插入
+      </p>
+      <p class="menu-item" @click="costomAddRow('current-next')">
+        当前行后方插入
+      </p>
+      <p class="menu-item" @click="costomAddRow('list-head')">
+        列表头行插入
+      </p>
+      <p class="menu-item" @click="costomAddRow('list-tail')">
+        列表尾行插入
+      </p>
+      <p v-if="isShowmultiSelect && isMulti" class="menu-item" @click="costomAddRow('select-pre')">
+        选中行前方插入
+      </p>
+      <!--  -->
+      <p v-if="isShowmultiSelect && isMulti" class="menu-item" @click="costomAddRow('select-next')">
+        选中行后方插入
+      </p>
+    </div>
   </div>
 </template>
 
 <style lang="scss" scoped>
+#custom-menu {
+  display: none;
+  position: fixed;
+  background-color: #fff;
+  border-radius: 5px;
+  padding: 5px 0;
+  z-index: 1000;
+  border: 1px solid #c8c9cc;
+  box-shadow: 0 0 12px rgb(0 0 0 / 12%);
+
+  .menu-item {
+    display: flex;
+    align-items: center;
+    white-space: nowrap;
+    list-style: none;
+    line-height: 22px;
+    padding: 5px 16px;
+    margin: 0;
+    // font-size: var(--el-font-size-base);
+    color: #606266;
+    cursor: pointer;
+    outline: none;
+
+    &:hover {
+      background-color: #ecf5ff;
+      color: #409eff;
+    }
+  }
+}
+
 #normal-table-com {
   width: 100%;
 }
diff --git a/src/components/TableContainer/index.vue b/src/components/TableContainer/index.vue
index 0c07be6..87b1567 100644
--- a/src/components/TableContainer/index.vue
+++ b/src/components/TableContainer/index.vue
@@ -71,16 +71,18 @@
   <config-dialog ref="configRef" @confirm="confirmColumns" />
   <div class="table-container">
     <div class="button-area">
-      <div v-if="titleShow" :class="props.isCenter ? 'title-center' : 'title-left'">
-        <el-icon v-if="isConfig" :size="21" class="icon-menu" @click="config">
-          <menu />
-        </el-icon>
-        <span>
-          {{ title }}
-        </span>
-      </div>
-      <div class="button-left">
-        <slot name="btns-left" />
+      <div style="display: flex;align-items: center;">
+        <div v-if="titleShow" :class="props.isCenter ? 'title-center' : 'title-left'">
+          <el-icon v-if="isConfig" :size="21" class="icon-menu" @click="config">
+            <menu />
+          </el-icon>
+          <span>
+            {{ title }}
+          </span>
+        </div>
+        <div class="button-left">
+          <slot name="btns-left" />
+        </div>
       </div>
       <div class="button-right">
         <slot name="btns-right" />
diff --git a/src/components/map/index.vue b/src/components/map/index.vue
index 55e37da..620c813 100644
--- a/src/components/map/index.vue
+++ b/src/components/map/index.vue
@@ -8,7 +8,7 @@
 import { styleType } from 'element-plus/es/components/table-v2/src/common'
 
 const $props = defineProps({
-  // 初始图层 normal satellite
+  // 初始图层 normal satellite dark
   layer: {
     type: String,
     default: 'normal',
@@ -35,8 +35,8 @@
 const layer = ref()
 // 图层标识
 const layerFlag = ref('normal')
-// const publicPath = import.meta.env.BASE_URL
-// console.log(publicPath, 'publicPath')
+const publicPath = import.meta.env.BASE_URL
+console.log(publicPath, 'publicPath')
 // -------------------------------------初始化地图--------------------------------------------------
 const initMap = () => {
   AMapLoader.load({
@@ -61,18 +61,22 @@
         map.value.setFeatures(['bg', 'building'])
         layerFlag.value = 'satellite'
       }
+      else if ($props.layer === 'dark') {
+        // 深色图层
+        map.value.setMapStyle('amap://styles/darkblue')
+      }
       // 地图图块加载完成后触发
       map.value.on('complete', () => {
         //  修改loading状态
         console.log('地图加载完成')
-        $emits('complete')
+        $emits('complete', AMap.value)
         loading.value = false
       })
       // 地图绑定右击事件
       map.value.on('mousedown', clickHandler)
     })
     .catch((e) => {
-      console.log('地图加载失败')
+      console.log(e, '地图加载失败')
     })
 }
 // ------------------------------------------------------------------------------------------------
@@ -156,7 +160,7 @@
 }
 // ------------------------------------------------------------------------------------------------
 
-// -------------------------------------标记本文操作--------------------------------------------------
+// -------------------------------------标记文本操作--------------------------------------------------
 // 标记文本数组
 const textAllList = ref<any>([])
 // 添加标记文字
@@ -282,6 +286,35 @@
   lineAllList.value = []
 }
 // ------------------------------------------------------------------------------------------------
+
+// -----------------------------------海量点标记操作------------------------------------------------
+// 点标记(海量点)数组
+const massMarksAllList = ref<any>([])
+// 添加点标记(海量点)
+const addMassMarks = (data: any) => {
+  /**
+     * data
+     * path: 折线点位数据  [{lnglat: [116.402394,39.937182],name: "南锣鼓巷", style: 1,}, ]
+     * style 样式
+     * zooms: 在指定地图缩放级别范围内展示海量点图层
+     * zIndex: 海量点图层叠加的顺序
+      */
+  var massMarks = new AMap.value.MassMarks(data.path, {
+    zIndex: data.zIndex, // 海量点图层叠加的顺序
+    zooms: data.zooms, // 在指定地图缩放级别范围内展示海量点图层
+    style: data.style, // 设置样式对象
+  })
+  massMarksAllList.value.push(massMarks)
+  massMarks.setMap(map)
+}
+// 移除点标记(海量点)
+const removeMassMarks = () => {
+  massMarksAllList.value.forEach((item: any) => {
+    item.setMap(null)
+  })
+  massMarksAllList.value = []
+}
+// ------------------------------------------------------------------------------------------------
 onMounted(() => {
   loading.value = true
   initMap()
@@ -302,6 +335,8 @@
   removeMarker, // 移除点标记 (一般点标记)
   addPolyline, // 添加折线
   removePolyline, // 移除折线
+  addMassMarks, // 添加点标记(海量点)
+  removeMassMarks, // 移除点标记(海量点)
 })
 </script>
 
diff --git a/src/layouts/components/Header/mobile.vue b/src/layouts/components/Header/mobile.vue
new file mode 100644
index 0000000..a27de4b
--- /dev/null
+++ b/src/layouts/components/Header/mobile.vue
@@ -0,0 +1,53 @@
+<!-- 移动端头部 -->
+<script lang="ts" setup name="HeaderMobile">
+import { ArrowLeftBold, House } from '@element-plus/icons-vue'
+const route = useRoute()
+const router = useRouter()
+const goBack = (type: 'back' | 'home') => {
+  if (type === 'back') {
+    router.go(-1)
+  }
+  else if (type === 'home') {
+    router.push('/')
+  }
+}
+</script>
+
+<template>
+  <div>
+    <div v-if="route.meta.isHeader" class="header-mobile">
+      <div v-if="route.meta.isBack">
+        <el-icon :size="25" @click="goBack('back')">
+          <arrow-left-bold />
+        </el-icon>
+      </div>
+      <div v-else style="width: 25px;" />
+      <div> {{ route.meta.title }}</div>
+      <el-icon v-if="route.meta.isHome" :size="25" @click="goBack('home')">
+        <house />
+      </el-icon>
+      <div v-else style="width: 25px;" />
+    </div>
+    <div v-if="route.meta.isHeader" class="occupying" />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.header-mobile {
+  width: 100%;
+  background-color: #70b4ff;
+  height: 35px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 10px;
+  position: fixed;
+  top: 0;
+}
+
+.occupying {
+  height: 35px;
+  background-color: transparent;
+  width: 100%;
+}
+</style>
diff --git a/src/layouts/mobile.vue b/src/layouts/mobile.vue
new file mode 100644
index 0000000..c6235a4
--- /dev/null
+++ b/src/layouts/mobile.vue
@@ -0,0 +1,47 @@
+<!-- 移动端基础布局组件 -->
+<script lang="ts" setup name="LayoutMobile">
+import headerMobile from './components/Header/mobile.vue'
+import useKeepAliveStore from '@/store/modules/keepAlive'
+const keepAliveStore = useKeepAliveStore()
+const routeInfo = useRoute()
+</script>
+
+<template>
+  <div class="layout">
+    <div id="app-main">
+      <!-- 头部 -->
+      <header-mobile />
+      <div class="wrapper">
+        <div class="main-container">
+          <div class="main">
+            <router-view v-slot="{ Component, route }">
+              <transition name="main" mode appear>
+                <keep-alive :include="keepAliveStore.list">
+                  <component :is="Component" :key="route.fullPath" />
+                </keep-alive>
+              </transition>
+            </router-view>
+          </div>
+          <copyright />
+        </div>
+      </div>
+      <el-backtop :right="20" :bottom="20" title="回到顶部" />
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.main {
+  overflow-x: hidden;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+
+  // firefox隐藏滚动条
+  scrollbar-width: none;
+
+  // chrome隐藏滚动条
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}
+</style>
diff --git a/src/main.ts b/src/main.ts
index 07c50a2..cb80c5d 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -19,35 +19,35 @@
 import { downloadAndInstall } from '@/iconify-ep'
 import { hasPermission } from '@/utils/composables/permission'
 import buttonPerm from '@/utils/buttonPerm'
-// 引入打印插件
 if (useSettingsStore().app.iconifyOfflineUse) {
   downloadAndInstall()
 }
-const app = createApp(App)
-app.config.globalProperties.hasPerm = hasPermission
-app.config.globalProperties.buttonPerm = buttonPerm
-app.config.globalProperties.dayjs = dayjs
-app.use(print)
-app.use(ElementPlus)
-app.use(pinia)
-app.use(router)
-for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
-  app.component(key, component)
-}
-directive(app)
 
 axios.get('./config/config.json', {
   headers: {
     'Cache-Control': 'no-cache',
   },
 }).then((result) => {
+  const app = createApp(App)
   console.log('get config')
+  console.log(window.localStorage.getItem('browser-type-bj-well'), 'mian中获取浏览器类型')
   console.log(result)
   window.localStorage.setItem('url-bj-well', result.data.baseUrl)
   window.localStorage.setItem('securityJsCode', result.data.securityJsCode)
   window.localStorage.setItem('JsKey', result.data.JsKey)
   request.defaults.baseURL = result.data.baseUrl // 设置默认请求网址
   app.config.globalProperties.config = result.data
+  app.config.globalProperties.hasPerm = hasPermission
+  app.config.globalProperties.buttonPerm = buttonPerm
+  app.config.globalProperties.dayjs = dayjs
+  app.use(print)
+  app.use(ElementPlus)
+  app.use(pinia)
+  app.use(router)
+  for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
+    app.component(key, component)
+  }
+  directive(app)
   app.mount('#app')
 }).catch((error) => {
   console.error(`get baseConfig error...${error}`)
diff --git a/src/router/modules/mobile.ts b/src/router/modules/mobile.ts
new file mode 100644
index 0000000..77618c1
--- /dev/null
+++ b/src/router/modules/mobile.ts
@@ -0,0 +1,31 @@
+// 移动端路由
+import type { Route } from '@/global'
+
+const Layout = () => import('@/layouts/mobile.vue')
+
+const routes: Route.recordRaw[] = [
+  {
+    path: '/home',
+    component: Layout,
+    redirect: '/home/index',
+    name: 'Home',
+    meta: {
+      title: '首页',
+    },
+    children: [
+      {
+        path: 'index',
+        component: () => import('@/views/mobile/example1/index.vue'),
+        name: 'HomeIndex',
+        meta: {
+          title: '首页',
+          isHeader: true, // 是否需要头部
+          isBack: true, // 是否需要返回按钮
+          isHome: false, // 是否需要回到首页按钮
+        },
+      },
+    ],
+  },
+]
+
+export default routes
diff --git a/src/router/routes.ts b/src/router/routes.ts
index ae91d6e..b1fdc27 100644
--- a/src/router/routes.ts
+++ b/src/router/routes.ts
@@ -2,6 +2,7 @@
 import generatedRoutes from 'virtual:generated-pages'
 // import commonRoute from './modules/system'
 import homeRoute from './modules/home'
+import mobileRoute from './modules/mobile'
 import type { Route } from '@/global'
 import useSettingsStore from '@/store/modules/settings'
 
@@ -31,12 +32,15 @@
     },
   },
 ]
-
+const userAgent = navigator.userAgent || navigator.vendor || window.opera
+const isMobile = /android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(userAgent)
+window.localStorage.setItem('browser-type-bj-well', `${isMobile ? 'mobile' : 'pc'}`)
+console.log(window.localStorage.getItem('browser-type-bj-well'), '路由中获取浏览器类型')
 // 系统路由
 const systemRoutes: Route.recordRaw[] = [
   {
     path: '/dashboard',
-    component: () => import('@/layouts/index.vue'),
+    component: isMobile ? null : () => import('@/layouts/index.vue'),
     meta: {
       title: () => useSettingsStore().dashboard.title,
       breadcrumb: false,
@@ -101,19 +105,27 @@
     ],
   },
 ]
-
 // 动态路由（异步路由、导航栏路由）
-const asyncRoutes: Route.recordMainRaw[] = [
-  {
-    meta: {
-      title: '',
-      icon: '',
+const asyncRoutes: Route.recordMainRaw[] = isMobile
+  ? [{ // 移动端路由
+      meta: {
+        title: '',
+        icon: '',
+      },
+      children: [
+        ...mobileRoute,
+      ],
+    }]
+  : [{ // pc端路由
+      meta: {
+        title: '',
+        icon: '',
+      },
+      children: [
+        ...homeRoute,
+      ],
     },
-    children: [
-      ...homeRoute,
-    ],
-  },
-]
+    ]
 
 const constantRoutesByFilesystem = generatedRoutes.filter((item) => {
   return item.meta?.enabled !== false && item.meta?.constant === true
diff --git "a/src/views/\133...all\135.vue" "b/src/views/\133...all\135.vue"
index 91af7e1..98ca1f9 100644
--- "a/src/views/\133...all\135.vue"
+++ "b/src/views/\133...all\135.vue"
@@ -51,30 +51,65 @@
 </template>
 
 <style lang="scss" scoped>
-.notfound {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  width: 700px;
+@media (min-width: 700px) {
+  .notfound {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 700px;
 
-  @include position-center(xy);
+    @include position-center(xy);
 
-  .icon {
-    width: 400px;
-    height: 400px;
-  }
-
-  .content {
-    h1 {
-      margin: 0;
-      font-size: 72px;
-      color: var(--el-text-color-primary);
+    .icon {
+      width: 400px;
+      height: 400px;
     }
 
-    .desc {
-      margin: 20px 0 30px;
-      font-size: 20px;
-      color: var(--el-text-color-secondary);
+    .content {
+      h1 {
+        margin: 0;
+        font-size: 72px;
+        color: var(--el-text-color-primary);
+      }
+
+      .desc {
+        margin: 20px 0 30px;
+        font-size: 20px;
+        color: var(--el-text-color-secondary);
+      }
+    }
+  }
+}
+
+@media (max-width: 700px) {
+  .notfound {
+    // display: flex;
+    // align-items: center;
+    // justify-content: space-between;
+    // width: 700px;
+    overflow: hidden;
+
+    @include position-center(xy);
+
+    .icon {
+      width: 350px;
+      height: 350px;
+    }
+
+    .content {
+      text-align: center !important;
+
+      h1 {
+        margin: 0;
+        font-size: 72px;
+        color: var(--el-text-color-primary);
+      }
+
+      .desc {
+        margin: 20px 0 30px;
+        font-size: 20px;
+        color: var(--el-text-color-secondary);
+      }
     }
   }
 }
diff --git a/src/views/home/dashboard/index.vue b/src/views/home/dashboard/index.vue
index 3fc5cec..a4b5f57 100644
--- a/src/views/home/dashboard/index.vue
+++ b/src/views/home/dashboard/index.vue
@@ -206,10 +206,10 @@
           <el-scrollbar height="200px">
             <div class="message-container">
               <div v-for="item in messageData" :key="item" class="message-item">
-                <span class="left">
+                <div class="left">
                   <span class="type">【{{ item.alarmTypeName }}】</span>
                   <span class="content">{{ item.alarmContent }}</span>
-                </span>
+                </div>
                 <span class="time">{{ item.alarmTime }}</span>
               </div>
             </div>
@@ -325,6 +325,9 @@
           flex-direction: column;
           text-align: center;
           width: 60%;
+          overflow: hidden;
+          white-space: nowrap;
+          text-overflow: ellipsis;
         }
       }
     }
@@ -341,24 +344,30 @@
         display: flex;
         justify-content: space-between;
         padding: 0 10px;
+        width: 100%;
 
         .left {
-          display: inline;
           width: 75%;
+          display: flex;
+          align-items: center;
+          overflow: hidden;
+          white-space: nowrap;
+          text-overflow: ellipsis;
         }
 
         .content {
           display: inline-block;
           padding-left: 10px;
           width: 65%;
-          // overflow: hidden;
-          // white-space: nowrap;
-          // text-overflow: ellipsis;
+          overflow: hidden;
+          white-space: nowrap;
+          text-overflow: ellipsis;
         }
 
         .time {
           font-size: 16px;
           color: #7c7777;
+          white-space: nowrap;
         }
       }
     }
diff --git a/src/views/home/device/type/index.vue b/src/views/home/device/type/index.vue
index ab687f7..c83bbc6 100644
--- a/src/views/home/device/type/index.vue
+++ b/src/views/home/device/type/index.vue
@@ -1,3 +1,142 @@
+<!--
+  Description: 设备管理-设备类型管理
+  Author: 李亚光
+  Date: 2023-07-15
+ -->
+<script lang="ts" setup name="DeviceTypeManage">
+// 表格数据
+const list = ref([
+  {
+    deviceType: '11',
+    deviceTypeName: '燃气智能监测终端',
+    desc: '燃气智能监测终端',
+    monitor: '井下燃气浓度',
+    alarmLimit: '是',
+    alarmLow: '是',
+    isEnable: '是',
+    time: '',
+  },
+  {
+    deviceType: '11',
+    deviceTypeName: '燃气智能监测终端',
+    desc: '燃气智能监测终端',
+    monitor: '井下燃气浓度',
+    alarmLimit: '是',
+    alarmLow: '是',
+    isEnable: '是',
+    time: '',
+  },
+  {
+    deviceType: '12',
+    deviceTypeName: '场站监测云台',
+    desc: '场站监测云台',
+    monitor: '场站内视频、燃气浓度',
+    alarmLimit: '是',
+    alarmLow: '是',
+    isEnable: '是',
+    time: '',
+  },
+])
+const total = ref(0)
+// 初始展示列
+const columns = ref<any>([
+  { text: '设备类型代号', value: 'deviceType', align: 'center' },
+  { text: '设备类型', value: 'deviceTypeName', align: 'center' },
+  { text: '描述', value: 'desc', align: 'center' },
+  { text: '监控内容', value: 'monitor', align: 'center' },
+  { text: '是否需要报警上限', value: 'alarmLimit', align: 'center' },
+  { text: '是否需要报警下限', value: 'alarmLow', align: 'center' },
+  { text: '是否启用', value: 'isEnable', align: 'center' },
+  { text: '最新操作时间', value: 'time', align: 'center' },
+])
+// 最终展示列
+const columnsConfig = ref([])
+// 修改列
+const editColumns = (data: any) => {
+  columnsConfig.value = data
+}
+const loadingTable = ref(true)
+//  查询条件
+const listQuery = ref({
+  limit: 20,
+  offset: 1,
+})
+// 查询数据
+const fetchData = () => {
+  setTimeout(() => {
+    loadingTable.value = false
+  })
+}
+// 重置查询条件f
+const reset = () => {
+
+}
+// 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
+const changePage = (val: { size: number; page: number }) => {
+  if (val && val.size) {
+    listQuery.value.limit = val.size
+  }
+  if (val && val.page) {
+    listQuery.value.offset = val.page
+  }
+  fetchData()
+}
+
+onMounted(() => {
+  fetchData()
+})
+</script>
+
 <template>
-  设备类型管理
+  <!-- 布局 -->
+  <app-container>
+    <!-- 筛选条件 -->
+    <search-area :need-clear="true" @search="fetchData" @clear="reset">
+      <search-item>
+        <el-select v-model="listQuery.keywords" placeholder="设备类型" clearable />
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.keywords" placeholder="是否启用" clearable />
+      </search-item>
+    </search-area>
+    <!-- 表头标题 -->
+    <table-container
+      :is-config="true" config-title="device-type" :columns="columns" :config-columns="columnsConfig"
+      :edit="editColumns"
+    >
+      <template #btns-right>
+        <!-- 操作 -->
+        <div>
+          <el-button type="primary">
+            新建
+          </el-button>
+        </div>
+      </template>
+      <!-- 查询结果Table显示 -->
+      <normal-table
+        :data="list" :total="total" :columns="columnsConfig" :query="listQuery" :list-loading="loadingTable"
+        @change="changePage"
+      >
+        <template #preColumns>
+          <el-table-column label="序号" width="55" align="center">
+            <template #default="scope">
+              {{ (listQuery.offset - 1) * listQuery.limit + scope.$index + 1 }}
+            </template>
+          </el-table-column>
+        </template>
+        <template #columns>
+          <el-table-column label="操作" align="center" width="120">
+            <template #default="scope">
+              <el-button type="primary" link size="small">
+                编辑 {{ scope.$index }}
+              </el-button>
+              <el-button type="danger" link size="small">
+                删除 {{ scope.$index }}
+              </el-button>
+            </template>
+          </el-table-column>
+        </template>
+      </normal-table>
+    </table-container>
+  </app-container>
 </template>
diff --git a/src/views/home/well/components/map.vue b/src/views/home/well/components/map.vue
new file mode 100644
index 0000000..5913db3
--- /dev/null
+++ b/src/views/home/well/components/map.vue
@@ -0,0 +1,26 @@
+<!--
+  Description: 闸井监测-地图
+  Author: 李亚光
+  Date: 2023-07-08
+ -->
+<script lang="ts" setup name="AlarmMap">
+import AMap from '@/components/map/index.vue'
+const $props = defineProps({
+  height: {
+    type: Number,
+    default: 0,
+  },
+})
+</script>
+
+<template>
+  <div :style="`height: ${$props.height}px`" class="map-container">
+    <a-map />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.map-container {
+  width: 100%;
+}
+</style>
diff --git a/src/views/home/well/index.vue b/src/views/home/well/index.vue
index 439816e..cc2059b 100644
--- a/src/views/home/well/index.vue
+++ b/src/views/home/well/index.vue
@@ -1,3 +1,230 @@
+<!--
+  Description: 闸井监测
+  Author: 李亚光
+  Date: 2023-07-12
+ -->
+<script lang="ts" setup name="WellMonitor">
+import { ElMessage } from 'element-plus'
+import { ArrowUpBold } from '@element-plus/icons-vue'
+import MapCom from './components/map.vue'
+// 表格数据
+const list = ref([
+  {
+    wellId: 'N57X508',
+    wellNo: '01110200745927',
+    name: '中压A闸1',
+    dept: '第一分公司/运维1所/1班',
+    property: '富源里小区',
+    manage: '自管',
+    use: '投用',
+    defence: '布防',
+    status: '正常',
+    device: '1',
+    tag: '',
+  },
+  {
+    wellId: 'N57X508',
+    wellNo: '01110200745927',
+    name: '中压A闸1',
+    dept: '第一分公司/运维1所/1班',
+    property: '富源里小区',
+    manage: '自管',
+    use: '停用',
+    defence: '撤防',
+    status: '正常',
+    device: '1',
+    tag: '',
+  },
+])
+const total = ref(0)
+// 初始展示列
+const columns = ref<any>([
+  { text: '闸井位号', value: 'wellId', align: 'center' },
+  { text: '闸井编号', value: 'wellNo', align: 'center' },
+  { text: '闸井名称', value: 'name', align: 'center' },
+  { text: '管理单位', value: 'dept', align: 'center' },
+  { text: '产权单位', value: 'property', align: 'center' },
+  { text: '管理方式', value: 'manage', align: 'center' },
+  { text: '使用状态', value: 'use', align: 'center' },
+  { text: '布防状态', value: 'defence', align: 'center' },
+  { text: '状态', value: 'status', align: 'center' },
+  { text: '感知设备', value: 'device', align: 'center' },
+  { text: '标签', value: 'tag', align: 'center' },
+])
+// 最终展示列
+const columnsConfig = ref([])
+// 修改列
+const editColumns = (data: any) => {
+  columnsConfig.value = data
+}
+const loadingTable = ref(true)
+//  查询条件
+const listQuery = ref({
+  limit: 20,
+  offset: 1,
+})
+// 开始结束时间
+const datetimerange = ref()
+watch(() => datetimerange.value, (newVal) => {
+  // listQuery.createTimeStart = ''
+  // listQuery.createTimeEnd = ''
+  if (Array.isArray(newVal)) {
+    if (newVal.length) {
+      // listQuery.createTimeStart = `${newVal[0]} 00:00:00`
+      // listQuery.createTimeEnd = `${newVal[1]} 23:59:59`
+    }
+  }
+})
+// 查询数据
+const fetchData = () => {
+  setTimeout(() => {
+    loadingTable.value = false
+  })
+}
+// 重置查询条件f
+const reset = () => {
+
+}
+// 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
+const changePage = (val: { size: number; page: number }) => {
+  if (val && val.size) {
+    listQuery.value.limit = val.size
+  }
+  if (val && val.page) {
+    listQuery.value.offset = val.page
+  }
+  fetchData()
+}
+
+onMounted(() => {
+  fetchData()
+})
+
+// 表格标识  地图或普通
+const tableFlag = ref('normal')
+const switchMode = (type: string) => {
+  if (!list.value.length) {
+    ElMessage.warning('暂无数据')
+    return
+  }
+  tableFlag.value = type
+}
+</script>
+
 <template>
-  闸井监测
+  <!-- 布局 -->
+  <app-container>
+    <!-- 地图 -->
+    <map-com v-if="tableFlag === 'map'" :height="350" />
+    <div v-if="tableFlag === 'map'" class="icon" @click="switchMode('normal')">
+      <el-icon :size="25">
+        <arrow-up-bold />
+      </el-icon>
+    </div>
+    <!-- 筛选条件 -->
+    <search-area :need-clear="true" @search="fetchData" @clear="reset">
+      <search-item>
+        <el-input v-model.trim="listQuery.keywords" placeholder="闸井位号" clearable />
+      </search-item>
+      <search-item>
+        <el-input v-model.trim="listQuery.keywords" placeholder="闸井编号" clearable />
+      </search-item>
+      <search-item>
+        <el-input v-model.trim="listQuery.keywords" placeholder="闸井编号" clearable />
+      </search-item>
+      <search-item>
+        <dept-select v-model="listQuery.keywords" placeholder="管理单位" :clearable="true" />
+      </search-item>
+      <search-item>
+        <el-input v-model.trim="listQuery.keywords" placeholder="产权单位" clearable />
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.keywords" placeholder="管理方式" clearable />
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.keywords" placeholder="使用状态" clearable />
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.keywords" placeholder="布防状态" clearable />
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.keywords" placeholder="监控状态" clearable />
+      </search-item>
+      <search-item>
+        <el-input v-model.trim="listQuery.keywords" placeholder="标签" clearable />
+      </search-item>
+    </search-area>
+    <!-- 表头标题 -->
+    <table-container
+      :is-config="true" config-title="well-monitor" :columns="columns" :config-columns="columnsConfig"
+      :edit="editColumns"
+    >
+      <template #btns-left>
+        <!-- 操作 -->
+        <div v-if="tableFlag === 'normal'" style="margin-left: 15px;">
+          <el-button type="primary" plain @click="switchMode('map')">
+            切换地图模式
+          </el-button>
+        </div>
+      </template>
+      <template #btns-right>
+        <!-- 操作 -->
+        <div>
+          <el-button type="primary">
+            导出
+          </el-button>
+        </div>
+      </template>
+      <!-- 查询结果Table显示 -->
+      <normal-table
+        :data="list" :total="total" :columns="columnsConfig" :query="listQuery" :list-loading="loadingTable"
+        @change="changePage"
+      >
+        <template #preColumns>
+          <!-- <el-table-column label="选择" width="55" align="center">
+              <template #default="scope">
+                <el-radio v-model="select" :label="scope.$index + 1" class="radio" />
+              </template>
+  </el-table-column> -->
+          <el-table-column label="序号" width="55" align="center">
+            <template #default="scope">
+              {{ (listQuery.offset - 1) * listQuery.limit + scope.$index + 1 }}
+            </template>
+          </el-table-column>
+        </template>
+        <template #columns>
+          <el-table-column label="布/撤防" align="center" width="80">
+            <template #default="scope">
+              <el-button type="primary" link size="small">
+                布防 {{ scope.$index }}
+              </el-button>
+            </template>
+          </el-table-column>
+          <el-table-column label="操作" align="center" width="120">
+            <template #default="scope">
+              <el-button type="primary" link size="small">
+                查看 {{ scope.$index }}
+              </el-button>
+              <el-button type="primary" link size="small">
+                编辑 {{ scope.$index }}
+              </el-button>
+            </template>
+          </el-table-column>
+        </template>
+      </normal-table>
+    </table-container>
+  </app-container>
 </template>
+
+<style lang="scss" scoped>
+.icon {
+  position: absolute;
+  top: 344px;
+  left: 50%;
+  transform: translateX(-50%);
+
+  &:hover {
+    cursor: pointer;
+  }
+}
+</style>
diff --git a/src/views/login-mobile.vue b/src/views/login-mobile.vue
new file mode 100644
index 0000000..b2eef7e
--- /dev/null
+++ b/src/views/login-mobile.vue
@@ -0,0 +1,19 @@
+<!-- 移动端登陆页面  -- elementplus -->
+<script lang="ts" setup name="Loginmobile">
+const route = useRoute()
+const router = useRouter()
+
+const handleLogin = () => {
+  router.push('/')
+}
+</script>
+
+<template>
+  <div>
+    移动端登陆页面
+  </div>
+
+  <el-button type="primary" size="large" @click="handleLogin">
+    基础测试
+  </el-button>
+</template>
diff --git a/src/views/login-pc.vue b/src/views/login-pc.vue
new file mode 100644
index 0000000..4cb3c1a
--- /dev/null
+++ b/src/views/login-pc.vue
@@ -0,0 +1,459 @@
+<route lang="yaml">
+meta:
+  title: 登录
+  constant: true
+  layout: false
+  </route>
+
+<script lang="ts" setup name="LoginPc">
+import type { FormInstance, FormRules } from 'element-plus'
+import { ElMessage } from 'element-plus'
+import useUserStore from '@/store/modules/user'
+import { RSAencrypt } from '@/utils/security'
+const route = useRoute()
+const router = useRouter()
+
+const userStore = useUserStore()
+
+const banner = new URL('../assets/images/login-banner.png', import.meta.url)
+  .href
+const title = import.meta.env.VITE_APP_TITLE
+
+// 表单类型，login 登录，reset 重置密码
+const formType = ref('login')
+// 加载状态
+const loading = ref(false)
+// 密码类型：password 密码
+const passwordType = ref('password')
+// 重定向路径
+const redirect = ref(route.query.redirect?.toString() ?? '/')
+// 是否需要验证码
+const showKaptcha = ref(false)
+// 公钥
+const publicKey = ref('')
+// sid
+const sid = ref('')
+
+// 获取系统基础配置： 公钥，是否开启验证码
+function getBaseConfig() {
+  userStore.getBaseConfig().then((res) => {
+    showKaptcha.value = res.kaptcha
+    publicKey.value = res.publicKey
+    sid.value = res.sid
+    ElMessage({
+      message: '连接服务器成功',
+      type: 'success',
+    })
+  })
+}
+
+// 登录
+const loginFormRef = ref<FormInstance>()
+const loginPasswordRef = ref<HTMLElement>()
+const loginForm = ref({
+  username: '',
+  password: '',
+  kaptcha: '',
+  remember: !!localStorage.login_username_bjwell,
+})
+const loginRules = ref<FormRules>({
+  username: [{ required: true, trigger: 'blur', message: '请输入用户名' }],
+  password: [
+    { required: true, trigger: 'blur', message: '请输入密码' },
+    { min: 6, max: 18, trigger: 'blur', message: '密码长度为6到18位' },
+  ],
+})
+
+// 处理登录
+function handleLogin() {
+  loginFormRef.value
+    && loginFormRef.value.validate(async (valid) => {
+      if (valid) {
+        loading.value = true
+        // 表单对象
+        const finalForm = {
+          sid: sid.value,
+          username: loginForm.value.username,
+          password: '',
+          kaptcha: loginForm.value.kaptcha,
+        }
+        // 加密
+        finalForm.password = await RSAencrypt(loginForm.value.password)
+        userStore
+          .login(finalForm)
+          .then(() => {
+            ElMessage({
+              message: '登录成功',
+              type: 'success',
+            })
+            loading.value = false
+            if (loginForm.value.remember) {
+              localStorage.setItem('login_username_bjwell', loginForm.value.username)
+            }
+            else {
+              localStorage.removeItem('login_username_bjwel')
+            }
+            router.push(redirect.value)
+          })
+          .catch(() => {
+            loading.value = false
+          })
+      }
+    })
+}
+// 注册
+const registerFormRef = ref<FormInstance>()
+const registerPasswordRef = ref<HTMLElement>()
+const registerCheckPasswordRef = ref<HTMLElement>()
+const registerForm = ref({
+  username: '',
+  captcha: '',
+  password: '',
+  checkPassword: '',
+})
+const registerRules = ref<FormRules>({
+  username: [{ required: true, trigger: 'blur', message: '请输入用户名' }],
+  captcha: [{ required: true, trigger: 'blur', message: '请输入验证码' }],
+  password: [
+    { required: true, trigger: 'blur', message: '请输入密码' },
+    { min: 6, max: 18, trigger: 'blur', message: '密码长度为6到18位' },
+  ],
+  checkPassword: [
+    { required: true, trigger: 'blur', message: '请再次输入密码' },
+    {
+      validator: (rule, value, callback) => {
+        if (value !== registerForm.value.password) {
+          callback(new Error('两次输入的密码不一致'))
+        }
+        else {
+          callback()
+        }
+      },
+    },
+  ],
+})
+function handleRegister() {
+  ElMessage({
+    message: '注册模块仅提供界面演示，无实际功能，需开发者自行扩展',
+    type: 'warning',
+  })
+  registerFormRef.value
+    && registerFormRef.value.validate((valid) => {
+      if (valid) {
+        // 这里编写业务代码
+      }
+    })
+}
+
+// 重置密码
+const resetFormRef = ref<FormInstance>()
+const resetNewPasswordRef = ref<HTMLElement>()
+const resetForm = ref({
+  username: localStorage.login_username || '',
+  captcha: '',
+  newPassword: '',
+})
+const resetRules = ref<FormRules>({
+  username: [{ required: true, trigger: 'blur', message: '请输入用户名' }],
+  captcha: [{ required: true, trigger: 'blur', message: '请输入验证码' }],
+  newPassword: [
+    { required: true, trigger: 'blur', message: '请输入新密码' },
+    { min: 6, max: 18, trigger: 'blur', message: '密码长度为6到18位' },
+  ],
+})
+function handleReset() {
+  ElMessage({
+    message: '重置密码模块仅提供界面演示，无实际功能，需开发者自行扩展',
+    type: 'warning',
+  })
+  resetFormRef.value
+    && resetFormRef.value.validate((valid) => {
+      if (valid) {
+        // 这里编写业务代码
+      }
+    })
+}
+
+function showPassword(passwordEl: HTMLElement | undefined) {
+  passwordType.value = passwordType.value === 'password' ? '' : 'password'
+  nextTick(() => {
+    passwordEl?.focus()
+  })
+}
+
+function testusername(username: string) {
+  loginForm.value.username = username
+  loginForm.value.password = '111111'
+  handleLogin()
+}
+onBeforeMount(() => {
+  loginForm.value.username = localStorage.login_username_bjwell || ''
+  getBaseConfig()
+})
+</script>
+
+<template>
+  <div>
+    <div class="bg-top-banner">
+      燃气物联感知平台
+    </div>
+    <div class="bg-banner" />
+    <div id="login-box">
+      <el-form
+        v-show="formType === 'login'" ref="loginFormRef" :model="loginForm" :rules="loginRules"
+        class="login-form" autocomplete="on"
+      >
+        <div class="title-container">
+          <h3 class="title">
+            用户登录
+          </h3>
+        </div>
+        <div>
+          <el-form-item prop="username">
+            <el-input ref="name" v-model="loginForm.username" placeholder="用户名" text tabindex="1" autocomplete="on">
+              <template #prefix>
+                <el-icon>
+                  <svg-icon name="ep:user" />
+                </el-icon>
+              </template>
+            </el-input>
+          </el-form-item>
+          <el-form-item prop="password">
+            <el-input
+              ref="loginPasswordRef" v-model="loginForm.password" :type="passwordType" placeholder="密码"
+              tabindex="2" autocomplete="on" @keyup.enter="handleLogin"
+            >
+              <template #prefix>
+                <el-icon>
+                  <svg-icon name="ep:lock" />
+                </el-icon>
+              </template>
+              <template #suffix>
+                <el-icon>
+                  <svg-icon
+                    :name="passwordType === 'password' ? 'eye' : 'eye-open'"
+                    @click="showPassword(loginPasswordRef)"
+                  />
+                </el-icon>
+              </template>
+            </el-input>
+          </el-form-item>
+        </div>
+        <div class="flex-bar">
+          <el-checkbox v-model="loginForm.remember">
+            记住我
+          </el-checkbox>
+        </div>
+        <el-button :loading="loading" type="primary" size="large" style="width: 100%;" @click.prevent="handleLogin">
+          登录
+        </el-button>
+        <div v-if="showKaptcha" style="margin-top: 20px; margin-bottom: -20px; text-align: center;">
+          <el-divider>演示账号一键登录</el-divider>
+          <el-button type="primary" size="small" plain @click="testusername('admin')">
+            admin
+          </el-button>
+          <el-button size="small" plain @click="testusername('test')">
+            test
+          </el-button>
+        </div>
+      </el-form>
+    </div>
+    <copyright />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+[data-mode="mobile"] {
+  #login-box {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    top: inherit;
+    left: inherit;
+    transform: translateX(0) translateY(0);
+    flex-direction: column;
+    justify-content: start;
+    border-radius: 0;
+    box-shadow: none;
+
+    .login-banner {
+      width: 100%;
+      padding: 20px 0;
+
+      .banner {
+        position: relative;
+        right: inherit;
+        width: 100%;
+        max-width: 375px;
+        margin: 0 auto;
+        display: inherit;
+        top: inherit;
+        transform: translateY(0);
+      }
+    }
+
+    .login-form {
+      width: 100%;
+      min-height: auto;
+      padding: 30px;
+    }
+  }
+
+  .copyright {
+    position: relative;
+    bottom: 0;
+    padding-bottom: 10px;
+  }
+}
+
+:deep(input[type="password"]::-ms-reveal) {
+  display: none;
+}
+
+.bg-top-banner {
+  position: fixed;
+  top: 0;
+  width: 100%;
+  height: 17vh;
+  z-index: 999;
+  line-height: 10vh;
+  text-align: center;
+  font-size: 30px;
+  color: #fff;
+  background: url("../assets/images/login-image/banner.png") no-repeat center / cover;
+}
+
+.bg-banner {
+  position: fixed;
+  z-index: 0;
+  width: 100%;
+  height: 100%;
+  // background: radial-gradient(circle at center, var(--el-fill-color-lighter), var(--el-bg-color-page));
+  background: url("../assets/images/login-image/bg.png") no-repeat center / cover;
+}
+
+#login-box {
+  display: flex;
+  justify-content: space-between;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translateX(-50%) translateY(-50%);
+  // background-color: var(--el-bg-color);
+
+  border-radius: 10px;
+  overflow: hidden;
+  box-shadow: var(--el-box-shadow);
+
+  .login-banner {
+    position: relative;
+    width: 450px;
+    background-color: var(--el-fill-color-light);
+    overflow: hidden;
+
+    .banner {
+      width: 100%;
+
+      @include position-center(y);
+    }
+
+    .logo {
+      position: absolute;
+      top: 20px;
+      left: 20px;
+      width: 30px;
+      height: 30px;
+      border-radius: 4px;
+      background: url("../assets/images/logo.png") no-repeat;
+      background-size: contain;
+      box-shadow: var(--el-box-shadow-light);
+    }
+  }
+
+  .login-form {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    min-height: 500px;
+    width: 500px;
+    padding: 50px;
+    background: url("../assets/images/login-image/frame.png") no-repeat center / cover;
+    overflow: hidden;
+
+    .title-container {
+      position: relative;
+
+      .title {
+        font-size: 1.3em;
+        color: #fff;
+        margin: 0 auto 30px;
+        text-align: center;
+        font-weight: bold;
+      }
+    }
+  }
+
+  .el-form-item {
+    margin-bottom: 24px;
+
+    :deep(.el-input) {
+      height: 48px;
+      line-height: inherit;
+      width: 100%;
+
+      input {
+        height: 48px;
+      }
+
+      .el-input__prefix,
+      .el-input__suffix {
+        display: flex;
+        align-items: center;
+      }
+
+      .el-input__prefix {
+        left: 10px;
+      }
+
+      .el-input__suffix {
+        right: 10px;
+      }
+    }
+  }
+
+  .flex-bar {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 20px;
+  }
+
+  .sub-link {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-top: 20px;
+    font-size: 14px;
+    color: var(--el-text-color-secondary);
+
+    .text {
+      margin-right: 10px;
+    }
+  }
+}
+
+.copyright {
+  position: absolute;
+  bottom: 30px;
+  width: 100%;
+  margin: 0;
+}
+
+:deep .el-input__wrapper {
+  background-color: transparent !important;
+}
+
+:deep .el-input__inner {
+  color: #fff !important;
+}
+</style>
diff --git a/src/views/login.vue b/src/views/login.vue
index cdc09f6..2334631 100644
--- a/src/views/login.vue
+++ b/src/views/login.vue
@@ -1,456 +1,13 @@
-<route lang="yaml">
-  meta:
-    title: 登录
-    constant: true
-    layout: false
-  </route>
-
+<!-- 登陆页面 -->
 <script lang="ts" setup name="Login">
-import type { FormInstance, FormRules } from 'element-plus'
-import { ElMessage } from 'element-plus'
-import useUserStore from '@/store/modules/user'
-import { RSAencrypt } from '@/utils/security'
-const route = useRoute()
-const router = useRouter()
-
-const userStore = useUserStore()
-
-const banner = new URL('../assets/images/login-banner.png', import.meta.url)
-  .href
-const title = import.meta.env.VITE_APP_TITLE
-
-// 表单类型，login 登录，reset 重置密码
-const formType = ref('login')
-// 加载状态
-const loading = ref(false)
-// 密码类型：password 密码
-const passwordType = ref('password')
-// 重定向路径
-const redirect = ref(route.query.redirect?.toString() ?? '/')
-// 是否需要验证码
-const showKaptcha = ref(false)
-// 公钥
-const publicKey = ref('')
-// sid
-const sid = ref('')
-
-// 获取系统基础配置： 公钥，是否开启验证码
-function getBaseConfig() {
-  userStore.getBaseConfig().then((res) => {
-    showKaptcha.value = res.kaptcha
-    publicKey.value = res.publicKey
-    sid.value = res.sid
-    ElMessage({
-      message: '连接服务器成功',
-      type: 'success',
-    })
-  })
-}
-
-// 登录
-const loginFormRef = ref<FormInstance>()
-const loginPasswordRef = ref<HTMLElement>()
-const loginForm = ref({
-  username: '',
-  password: '',
-  kaptcha: '',
-  remember: !!localStorage.login_username_bjwell,
-})
-const loginRules = ref<FormRules>({
-  username: [{ required: true, trigger: 'blur', message: '请输入用户名' }],
-  password: [
-    { required: true, trigger: 'blur', message: '请输入密码' },
-    { min: 6, max: 18, trigger: 'blur', message: '密码长度为6到18位' },
-  ],
-})
-
-// 处理登录
-function handleLogin() {
-  loginFormRef.value
-    && loginFormRef.value.validate(async (valid) => {
-      if (valid) {
-        loading.value = true
-        // 表单对象
-        const finalForm = {
-          sid: sid.value,
-          username: loginForm.value.username,
-          password: '',
-          kaptcha: loginForm.value.kaptcha,
-        }
-        // 加密
-        finalForm.password = await RSAencrypt(loginForm.value.password)
-        userStore
-          .login(finalForm)
-          .then(() => {
-            ElMessage({
-              message: '登录成功',
-              type: 'success',
-            })
-            loading.value = false
-            if (loginForm.value.remember) {
-              localStorage.setItem('login_username_bjwell', loginForm.value.username)
-            }
-            else {
-              localStorage.removeItem('login_username_bjwel')
-            }
-            router.push(redirect.value)
-          })
-          .catch(() => {
-            loading.value = false
-          })
-      }
-    })
-}
-// 注册
-const registerFormRef = ref<FormInstance>()
-const registerPasswordRef = ref<HTMLElement>()
-const registerCheckPasswordRef = ref<HTMLElement>()
-const registerForm = ref({
-  username: '',
-  captcha: '',
-  password: '',
-  checkPassword: '',
-})
-const registerRules = ref<FormRules>({
-  username: [{ required: true, trigger: 'blur', message: '请输入用户名' }],
-  captcha: [{ required: true, trigger: 'blur', message: '请输入验证码' }],
-  password: [
-    { required: true, trigger: 'blur', message: '请输入密码' },
-    { min: 6, max: 18, trigger: 'blur', message: '密码长度为6到18位' },
-  ],
-  checkPassword: [
-    { required: true, trigger: 'blur', message: '请再次输入密码' },
-    {
-      validator: (rule, value, callback) => {
-        if (value !== registerForm.value.password) {
-          callback(new Error('两次输入的密码不一致'))
-        }
-        else {
-          callback()
-        }
-      },
-    },
-  ],
-})
-function handleRegister() {
-  ElMessage({
-    message: '注册模块仅提供界面演示，无实际功能，需开发者自行扩展',
-    type: 'warning',
-  })
-  registerFormRef.value
-    && registerFormRef.value.validate((valid) => {
-      if (valid) {
-        // 这里编写业务代码
-      }
-    })
-}
-
-// 重置密码
-const resetFormRef = ref<FormInstance>()
-const resetNewPasswordRef = ref<HTMLElement>()
-const resetForm = ref({
-  username: localStorage.login_username || '',
-  captcha: '',
-  newPassword: '',
-})
-const resetRules = ref<FormRules>({
-  username: [{ required: true, trigger: 'blur', message: '请输入用户名' }],
-  captcha: [{ required: true, trigger: 'blur', message: '请输入验证码' }],
-  newPassword: [
-    { required: true, trigger: 'blur', message: '请输入新密码' },
-    { min: 6, max: 18, trigger: 'blur', message: '密码长度为6到18位' },
-  ],
-})
-function handleReset() {
-  ElMessage({
-    message: '重置密码模块仅提供界面演示，无实际功能，需开发者自行扩展',
-    type: 'warning',
-  })
-  resetFormRef.value
-    && resetFormRef.value.validate((valid) => {
-      if (valid) {
-        // 这里编写业务代码
-      }
-    })
-}
-
-function showPassword(passwordEl: HTMLElement | undefined) {
-  passwordType.value = passwordType.value === 'password' ? '' : 'password'
-  nextTick(() => {
-    passwordEl?.focus()
-  })
-}
-
-function testusername(username: string) {
-  loginForm.value.username = username
-  loginForm.value.password = '111111'
-  handleLogin()
-}
-onBeforeMount(() => {
-  loginForm.value.username = localStorage.login_username_bjwell || ''
-  getBaseConfig()
-})
+import loginPc from './login-pc.vue'
+import loginMobile from './login-mobile.vue'
+const browserType = window.localStorage.getItem('browser-type-bj-well') // mobile || pc
 </script>
 
 <template>
-  <div>
-    <div class="bg-top-banner">
-      燃气物联感知平台
-    </div>
-    <div class="bg-banner" />
-    <div id="login-box">
-      <el-form v-show="formType === 'login'" ref="loginFormRef" :model="loginForm" :rules="loginRules"
-        class="login-form" autocomplete="on">
-        <div class="title-container">
-          <h3 class="title">
-            用户登录
-          </h3>
-        </div>
-        <div>
-          <el-form-item prop="username">
-            <el-input ref="name" v-model="loginForm.username" placeholder="用户名" text tabindex="1" autocomplete="on">
-              <template #prefix>
-                <el-icon>
-                  <svg-icon name="ep:user" />
-                </el-icon>
-              </template>
-            </el-input>
-          </el-form-item>
-          <el-form-item prop="password">
-            <el-input ref="loginPasswordRef" v-model="loginForm.password" :type="passwordType" placeholder="密码"
-              tabindex="2" autocomplete="on" @keyup.enter="handleLogin">
-              <template #prefix>
-                <el-icon>
-                  <svg-icon name="ep:lock" />
-                </el-icon>
-              </template>
-              <template #suffix>
-                <el-icon>
-                  <svg-icon :name="passwordType === 'password' ? 'eye' : 'eye-open'"
-                    @click="showPassword(loginPasswordRef)" />
-                </el-icon>
-              </template>
-            </el-input>
-          </el-form-item>
-        </div>
-        <div class="flex-bar">
-          <el-checkbox v-model="loginForm.remember">
-            记住我
-          </el-checkbox>
-        </div>
-        <el-button :loading="loading" type="primary" size="large" style="width: 100%;" @click.prevent="handleLogin">
-          登录
-        </el-button>
-        <div v-if="showKaptcha" style="margin-top: 20px; margin-bottom: -20px; text-align: center;">
-          <el-divider>演示账号一键登录</el-divider>
-          <el-button type="primary" size="small" plain @click="testusername('admin')">
-            admin
-          </el-button>
-          <el-button size="small" plain @click="testusername('test')">
-            test
-          </el-button>
-        </div>
-      </el-form>
-    </div>
-    <copyright />
-  </div>
+  <!-- pc端 -->
+  <login-pc v-if="browserType === 'pc'" />
+  <!-- 移动端 -->
+  <login-mobile v-if="browserType === 'mobile'" />
 </template>
-
-<style lang="scss" scoped>
-[data-mode="mobile"] {
-  #login-box {
-    position: relative;
-    width: 100%;
-    height: 100%;
-    top: inherit;
-    left: inherit;
-    transform: translateX(0) translateY(0);
-    flex-direction: column;
-    justify-content: start;
-    border-radius: 0;
-    box-shadow: none;
-
-    .login-banner {
-      width: 100%;
-      padding: 20px 0;
-
-      .banner {
-        position: relative;
-        right: inherit;
-        width: 100%;
-        max-width: 375px;
-        margin: 0 auto;
-        display: inherit;
-        top: inherit;
-        transform: translateY(0);
-      }
-    }
-
-    .login-form {
-      width: 100%;
-      min-height: auto;
-      padding: 30px;
-    }
-  }
-
-  .copyright {
-    position: relative;
-    bottom: 0;
-    padding-bottom: 10px;
-  }
-}
-
-:deep(input[type="password"]::-ms-reveal) {
-  display: none;
-}
-
-.bg-top-banner {
-  position: fixed;
-  top: 0;
-  width: 100%;
-  height: 17vh;
-  z-index: 999;
-  line-height: 10vh;
-  text-align: center;
-  font-size: 30px;
-  color: #fff;
-  background:
-    url("../assets/images/login-image/banner.png") no-repeat center / cover;
-}
-
-.bg-banner {
-  position: fixed;
-  z-index: 0;
-  width: 100%;
-  height: 100%;
-  // background: radial-gradient(circle at center, var(--el-fill-color-lighter), var(--el-bg-color-page));
-  background:
-    url("../assets/images/login-image/bg.png") no-repeat center / cover;
-}
-
-#login-box {
-  display: flex;
-  justify-content: space-between;
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translateX(-50%) translateY(-50%);
-  // background-color: var(--el-bg-color);
-
-  border-radius: 10px;
-  overflow: hidden;
-  box-shadow: var(--el-box-shadow);
-
-  .login-banner {
-    position: relative;
-    width: 450px;
-    background-color: var(--el-fill-color-light);
-    overflow: hidden;
-
-    .banner {
-      width: 100%;
-
-      @include position-center(y);
-    }
-
-    .logo {
-      position: absolute;
-      top: 20px;
-      left: 20px;
-      width: 30px;
-      height: 30px;
-      border-radius: 4px;
-      background: url("../assets/images/logo.png") no-repeat;
-      background-size: contain;
-      box-shadow: var(--el-box-shadow-light);
-    }
-  }
-
-  .login-form {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    min-height: 500px;
-    width: 500px;
-    padding: 50px;
-    background:
-      url("../assets/images/login-image/frame.png") no-repeat center / cover;
-    overflow: hidden;
-
-    .title-container {
-      position: relative;
-
-      .title {
-        font-size: 1.3em;
-        color: #fff;
-        margin: 0 auto 30px;
-        text-align: center;
-        font-weight: bold;
-      }
-    }
-  }
-
-  .el-form-item {
-    margin-bottom: 24px;
-
-    :deep(.el-input) {
-      height: 48px;
-      line-height: inherit;
-      width: 100%;
-
-      input {
-        height: 48px;
-      }
-
-      .el-input__prefix,
-      .el-input__suffix {
-        display: flex;
-        align-items: center;
-      }
-
-      .el-input__prefix {
-        left: 10px;
-      }
-
-      .el-input__suffix {
-        right: 10px;
-      }
-    }
-  }
-
-  .flex-bar {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    margin-bottom: 20px;
-  }
-
-  .sub-link {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    margin-top: 20px;
-    font-size: 14px;
-    color: var(--el-text-color-secondary);
-
-    .text {
-      margin-right: 10px;
-    }
-  }
-}
-
-.copyright {
-  position: absolute;
-  bottom: 30px;
-  width: 100%;
-  margin: 0;
-}
-
-:deep .el-input__wrapper {
-  background-color: transparent !important;
-}
-
-:deep .el-input__inner {
-  color: #fff !important;
-}
-</style>
diff --git a/src/views/mobile/example1/index.vue b/src/views/mobile/example1/index.vue
new file mode 100644
index 0000000..e3254f6
--- /dev/null
+++ b/src/views/mobile/example1/index.vue
@@ -0,0 +1,33 @@
+<template>
+  <h1>路由跳转测试1页面</h1>
+  <h1>路由跳转测试1页面</h1>
+  <h1>路由跳转测试1页面</h1>
+  <h1>路由跳转测试1页面</h1>
+  <h1>路由跳转测试1页面</h1>
+  <h1>路由跳转测试1页面</h1>
+  <h1>路由跳转测试1页面</h1>
+  <h1>路由跳转测试1页面</h1>
+  <h1>路由跳转测试1页面</h1>
+  <h1>路由跳转测试1页面</h1>
+  <h1>路由跳转测试1页面</h1>
+  <h1>路由跳转测试1页面</h1>
+  <h1>路由跳转测试1页面</h1>
+  <h1>路由跳转测试1页面</h1>
+  <h1>路由跳转测试1页面</h1>
+  <h1>路由跳转测试1页面</h1>
+  <h1>路由跳转测试1页面</h1>
+  <h1>路由跳转测试1页面</h1>
+  <h1>路由跳转测试1页面</h1>
+  <h1>路由跳转测试1页面</h1>
+  <h1>路由跳转测试1页面</h1>
+  <h1>路由跳转测试1页面</h1>
+  <h1>路由跳转测试1页面</h1>
+  <h1>路由跳转测试1页面</h1>
+  <h1>路由跳转测试1页面</h1>
+  <h1>路由跳转测试1页面</h1>
+  <h1>路由跳转测试1页面</h1>
+  <h1>路由跳转测试1页面</h1>
+  <h1>路由跳转测试1页面</h1>
+  <h1>路由跳转测试1页面</h1>
+  <h1>路由跳转测试1页面</h1>
+</template>
diff --git a/src/views/mobile/example2/index.vue b/src/views/mobile/example2/index.vue
new file mode 100644
index 0000000..2b97b29
--- /dev/null
+++ b/src/views/mobile/example2/index.vue
@@ -0,0 +1,3 @@
+<template>
+  路由跳转测试2页面
+</template>