增加全域地图

src/components/HeaderSection/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="headerSection">
     <div class="header-left">
-      <el-button class="custom-button" type="primary">全景地图</el-button>
+      <el-button class="custom-button" type="primary" @click="jumpGlobeMap">全景地图</el-button>
     </div>
     <div class="header-middle">
       <div class="header-title">应急指挥一张图</div>

src/components/Map/index.vue

@@ -0,0 +1,61 @@
+<template>
+  <div class="map-container">
+    <div :id="mapid"
+         class="map-container"></div>
+  </div>
+</template>
+<script>
+
+export default {
+  name: 'Map',
+  props: {
+    mapid: {
+      type: String,
+      default: 'map'
+    }
+  },
+  data() {
+    return {};
+  },
+  computed: {},
+  watch: {},
+  mounted() {
+    this.initMapEvent();
+  },
+  beforeDestroy() {},
+  methods: {
+    initMapEvent() {
+      const that = this;
+      let simple = {
+        version: 8,
+        sources: {},
+        layers: []
+      };
+      let wgs84_wgs84_mapcrs = {
+        topTileExtent: [-180, -270, 180, 90],
+        coordtransform: "none",
+        tileSize: 256
+      };
+      const map = new GeoGlobe.Map({
+        mapCRS: wgs84_wgs84_mapcrs,
+        style: simple,
+        maxZoom: 20,
+        zoom: 7,
+        minZoom: 7,
+        center: [113.272753, 23.139257],
+        container: "map"
+      });
+      map.on("style.load", function(e) {
+        that.$emit("getmap", map);
+      });
+    }
+
+  }
+};
+</script>
+<style scoped>
+.map-container {
+  width: 100%;
+  height: 100%;
+}
+</style>

src/components/ScrollTable/index.vue

@@ -7,7 +7,7 @@
         </tr>
       </thead>
       <tr class="tr">
-        <td v-for="(item, index) in dataSource" :key="index" class="td">{{ item.label }}</td>
+        <td v-for="(item, index) in dataSource" :key="index" class="td">{{ item.name }}</td>
       </tr>
     </table>
   </div>
@@ -20,6 +20,7 @@ interface Columns {
 interface Props {
   columns: Array<Columns>;
   dataSource: any[];
+  labelName: 'label';
 }
 const props = withDefaults(defineProps<Props>(), {});
 </script>

src/router/index.ts

@@ -74,7 +74,12 @@ export const constantRoutes: RouteRecordRaw[] = [
         meta: { title: '个人中心', icon: 'user' }
       }
     ]
-  }
+  },
+  {
+    path: '/index',
+    component: () => import('@/views/dashboard/index.vue'),
+    name: 'Index'
+  },
 ];
 
 // 动态路由，基于用户权限动态去加载

src/views/dashboard/LeftSection.vue

@@ -15,7 +15,21 @@
         <div>巡查消息</div>
       </div>
       <div class="card-content">
-        <ScrollTable :columns="columns" :data-source="listData" />
+        <table class="table">
+          <thead>
+            <tr class="tr">
+              <td v-for="(item, index) in columns" :key="index" class="td">{{ item.label }}</td>
+            </tr>
+          </thead>
+          <tr v-for="(item, index) in listData" :key="index" class="tr">
+            <td class="td">{{ item.name }}</td>
+            <td class="td">{{ item.type }}</td>
+            <td class="td">{{ item.address }}</td>
+            <td class="td">{{ item.time }}</td>
+            <td class="td">{{ item.result }}</td>
+            <td class="td">{{ item.img }}</td>
+          </tr>
+        </table>
       </div>
     </div>
     <div class="card">
@@ -23,7 +37,7 @@
         <div>事件接报</div>
       </div>
       <div class="card-content flex" style="height: 100%">
-        <Chart :option="option1" />
+        <!--<Chart :option="option1" />-->
       </div>
     </div>
   </div>
@@ -42,16 +56,12 @@ const columns = [
   { label: '巡检图像', key: 'img' }
 ];
 const listData = reactive([
-  { name: '巡检任务1', type: '城市隐患巡查', address: '油城十路', time: '2024-7-11 16:00:21', result: '正常' },
-  { name: '巡检任务2', type: '城市隐患巡查', address: '油城十路', time: '2024-7-11 16:00:21', result: '正常' },
-  { name: '巡检任务3', type: '城市隐患巡查', address: '油城十路', time: '2024-7-11 16:00:21', result: '正常' },
-  { name: '巡检任务4', type: '城市隐患巡查', address: '油城十路', time: '2024-7-11 16:00:21', result: '正常' },
-  { name: '巡检任务5', type: '城市隐患巡查', address: '油城十路', time: '2024-7-11 16:00:21', result: '正常' },
-  { name: '巡检任务6', type: '城市隐患巡查', address: '油城十路', time: '2024-7-11 16:00:21', result: '正常' },
-  { name: '巡检任务7', type: '城市隐患巡查', address: '油城十路', time: '2024-7-11 16:00:21', result: '正常' },
-  { name: '巡检任务8', type: '城市隐患巡查', address: '油城十路', time: '2024-7-11 16:00:21', result: '正常' },
-  { name: '巡检任务9', type: '城市隐患巡查', address: '油城十路', time: '2024-7-11 16:00:21', result: '正常' },
-  { name: '巡检任务10', type: '城市隐患巡查', address: '油城十路', time: '2024-7-11 16:00:21', result: '正常' }
+  { name: '巡检任务1', type: '城市隐患巡查', address: '油城十路', time: '2024-7-11 16:00:21', result: '正常', img: '' },
+  { name: '巡检任务2', type: '城市隐患巡查', address: '油城十路', time: '2024-7-11 16:00:21', result: '正常', img: '' },
+  { name: '巡检任务3', type: '城市隐患巡查', address: '油城十路', time: '2024-7-11 16:00:21', result: '正常', img: '' },
+  { name: '巡检任务4', type: '城市隐患巡查', address: '油城十路', time: '2024-7-11 16:00:21', result: '正常', img: '' },
+  { name: '巡检任务5', type: '城市隐患巡查', address: '油城十路', time: '2024-7-11 16:00:21', result: '正常', img: '' },
+  { name: '巡检任务6', type: '城市隐患巡查', address: '油城十路', time: '2024-7-11 16:00:21', result: '正常', img: '' }
 ]);
 
 // 事件接报
@@ -91,6 +101,25 @@ const option1 = reactive(chartOption1);
     animation-duration: 1.5s; // 新增
   }
 }
+.table {
+  table-layout: fixed;
+  border-collapse: collapse;
+  width: 100%;
+  thead {
+    .td {
+      background-color: #fafafa;
+      border: 5px solid #ebebeb;
+    }
+  }
+  .tr {
+    .td {
+      width: auto;
+      font-size: 28px;
+      padding: 10px 5px;
+      border-bottom: 5px solid #ebebeb;
+    }
+  }
+}
 @keyframes slide {
   0% {
     transform: translateX(-100%);

src/views/dashboard/index.vue

@@ -16,15 +16,15 @@ import MiddleSection from '@/views/dashboard/MiddleSection.vue';
 import autofit from 'autofit.js';
 
 onMounted(() => {
-  autofit.init(
-    {
-      dw: 8960,
-      dh: 2520,
-      el: '#dashboard-container',
-      resize: true
-    },
-    false
-  );
+  // autofit.init(
+  //   {
+  //     dw: 8960,
+  //     dh: 2520,
+  //     el: '#dashboard-container',
+  //     resize: true
+  //   },
+  //   false
+  // );
 });
 
 onUnmounted(() => {

src/views/globalMap/index.vue

@@ -0,0 +1,9 @@
+<template>
+  <Map></Map>123
+</template>
+
+<script lang="ts" setup>
+import Map from '@/components/Map/index.vue';
+</script>
+
+<style lang="scss" scoped></style>