代码优化

components.d.ts

@@ -0,0 +1,18 @@
+/* eslint-disable */
+// @ts-nocheck
+// Generated by unplugin-vue-components
+// Read more: https://github.com/vuejs/core/pull/3399
+// biome-ignore lint: disable
+export {}
+
+/* prettier-ignore */
+declare module 'vue' {
+  export interface GlobalComponents {
+    HelloWorld: typeof import('./src/components/HelloWorld.vue')['default']
+    Legend: typeof import('./src/components/Legend/index.vue')['default']
+    MapContainer: typeof import('./src/components/MapContainer/index.vue')['default']
+    MyModal: typeof import('./src/components/MyModal.vue')['default']
+    RouterLink: typeof import('vue-router')['RouterLink']
+    RouterView: typeof import('vue-router')['RouterView']
+  }
+}

src/components/MapContainer/index.vue

@@ -36,7 +36,7 @@ import {
 const emit = defineEmits(['checkWarring', 'showModal']);
 // const emit1 = defineEmits(['showModal']);
 const layerGroups = reactive<Record<string, { iconLayer: any; textLayer: any; }>>({});
-interface LayerConfig {
+export interface LayerConfig {
   id: string;
   type:
   | 'warn'
@@ -121,7 +121,7 @@ const initL7Map = async () => {
         .shape('square')
         .color('backgoundColor')
         .size(50);
-      scene.value.addLayer(layer);
+      scene.value?.addLayer(layer);
 
       const textLayer = new PointLayer({})
         .source(pointData.features, {
@@ -145,7 +145,7 @@ const initL7Map = async () => {
           fontFamily: 'Times New Roman',
           textAllowOverlap: true,
         });
-        scene.value.addLayer(textLayer);
+        scene.value?.addLayer(textLayer);
       
       // const lineLayer = new LineLayer({
       //   name: 'lineLayer',
@@ -190,7 +190,7 @@ const initL7Map = async () => {
 
     // 2. 事件图层
     if (props.warnLayer) {
-      await scene.value.addImage(
+      await scene.value?.addImage(
         'warn-icon',
         new URL('@/assets/highScore/eventLanyer.png', import.meta.url).href,
       );
@@ -220,7 +220,7 @@ const initL7Map = async () => {
 
     // 3. 设备图层
     if (props.equipmentLayer) {
-      await scene.value.addImage(
+      await scene.value?.addImage(
         'equipmentLayer-icon',
         new URL('@/assets/highScore/equipmentLanyer.png', import.meta.url).href,
       );
@@ -248,7 +248,7 @@ const initL7Map = async () => {
 
     // 4. 车辆图层
     if (props.carLayer) {
-      await scene.value.addImage(
+      await scene.value?.addImage(
         'car-icon',
         new URL('@/assets/highScore/carLanyer.png', import.meta.url).href,
       );
@@ -279,7 +279,7 @@ const initL7Map = async () => {
 
     // 5. 应急措施图层
     if (props.emergencyLayer) {
-      await scene.value.addImage(
+      await scene.value?.addImage(
         'emergency-icon',
         new URL('@/assets/highScore/emergencyLanyer.png', import.meta.url).href,
       );
@@ -343,9 +343,9 @@ onBeforeUnmount(() => {
 
 <style lang="less" scoped>
 .map-container1 {
-  position: absolute;
+  position: fixed;
   top: -2%;
-  left: 7%;
+  left: 4%;
   width: 6000px;
   height: 2500px;
   border-radius: 15% / 50%;

src/main.ts

@@ -4,14 +4,23 @@ import { renderWithQiankun, qiankunWindow } from 'vite-plugin-qiankun/dist/helpe
 import router from './router/index';
 import Antd from 'ant-design-vue';
 import 'ant-design-vue/dist/reset.css'; // 引入样式
-let app = null
+let app: any = null;
 
-const render = (props = {}) => {
+interface MountProps {
-  const { container } = props
+  container?: HTMLElement | Document | ShadowRoot | string;
-  app = createApp(App)
+}
+
+const render = (props: MountProps = {}) => {
+  const { container } = props;
+  app = createApp(App);
   app.use(Antd);
   app.use(router);
-  app.mount(container ? container.querySelector('#app') : '#app')
+  
+  const mountTarget = typeof container === 'string' 
+    ? document.querySelector(container) 
+    : container;
+  
+  app.mount(mountTarget ? mountTarget.querySelector('#app') || '#app' : '#app');
 }
 
 renderWithQiankun({

src/router/index.ts

@@ -1,6 +1,6 @@
 import { createRouter, createWebHashHistory, createWebHistory } from 'vue-router';
 import { qiankunWindow } from 'vite-plugin-qiankun/dist/helper';
-
+import highScoreVisualization from '@/views/highScore/dailyMonitoring/index.vue'
 const router = createRouter({
   history: createWebHashHistory(qiankunWindow.__POWERED_BY_QIANKUN__ ? '/highScoreVisualization' : '/'),
   routes: [
@@ -11,7 +11,7 @@ const router = createRouter({
     {
       path: '/highScoreVisualization',
       name: 'highScoreVisualization',
-      component: () => import('../views/highScore/dailyMonitoring/index.vue')
+      component: highScoreVisualization
     }
   ]
 });

src/views/highScore/chargeMonitoring/container/containerLeft.vue

@@ -96,7 +96,7 @@
   const optionShow = ref(false);
   const searchValue = ref();
   const selectedId = ref<string | null>('all');
-  const selectIcon = (id) => {
+  const selectIcon = (id: string) => {
     selectedId.value = id;
   };
   const dataSource = [
@@ -194,6 +194,7 @@
 
 <style lang="less" scoped>
   .watch {
+    width:1400px;
     .search {
       position: relative;
       .searchText {
@@ -272,7 +273,7 @@
         padding: 2% 0 0 2%;
         display: flex;
         margin-left: 7%;
-        width: 100%;
+        width: 80%;
         height: 280px;
         background: url('/src/assets/highScore/charge/chargeListBg.png') no-repeat 0 0/100% 100%;
         .pic {

src/views/highScore/dailyMonitoring/container/bottom.vue

@@ -68,7 +68,7 @@
     }
   });
 
-  const selectIcon = (id) => {
+  const selectIcon = (id:string) => {
     selectedIcon.value = id;
     emit('iconSelected', id);
   };

src/views/highScore/dailyMonitoring/container/containerLeft.vue

@@ -260,7 +260,7 @@
         .dispose {
           position: absolute;
           top: 13%;
-          left: 41%;
+          left: 45%;
           .dispose-text {
             font-weight: 400;
             font-size: 38px;
@@ -279,7 +279,7 @@
         .finish {
           position: absolute;
           top: 35%;
-          left: 63%;
+          left: 68%;
           .finish-text {
             font-weight: 400;
             font-size: 38px;

src/views/highScore/dailyMonitoring/index.vue

@@ -10,7 +10,7 @@
       </div>
       <div class="watch-mode" v-show="chooseBot != 'tunnel'">
         <div class="watch-left">
-          <component :is="componentLeft[chooseBot]" />
+          <component :is="componentLeft[chooseBot as ComponentKey]" />
         </div>
         <div class="watch-center">
           <div class="map-select" v-show="chooseBot != 'surveillance'">
@@ -62,8 +62,8 @@
             </div>
           </div>
         </div>
-        <div class="watch-right" style="padding-left: 10%; box-sizing: border-box; padding-top: 1%">
+        <div class="watch-right" style="padding-left: 8%; box-sizing: border-box; padding-top: 1%">
-          <component :is="componentRight[chooseBot]" />
+          <component :is="componentRight[chooseBot as ComponentKey]" />
         </div>
       </div>
 
@@ -110,8 +110,6 @@ import tunnel from '../tunnelMonitoring/container/index.vue';
 import bottom from './container/bottom.vue';
 import legend1 from '../../../components/Legend/index.vue';
 import {
-  pointData,
-  responseData,
   chargeAddLayer1,
   chargeAddLayer2,
   chargeAddLayer3,
@@ -121,15 +119,25 @@ import {
   dailyAddLayer3,
   dailyAddLayer4,
 } from './test';
+import {
+  LayerConfig
+} from '@/components/MapContainer/index.vue';
 const scene = ref();
 const chooseBot = ref('monitoring');
 const visible = ref<boolean>(false);
 const imageLayerRef = ref(null);
-const isImageAdded = ref<boolean>(false); // 标记图片资源是否已添加
+// const isImageAdded = ref<boolean>(false); // 标记图片资源是否已添加
 const showMapInfo = ref<boolean>(false);
 const time = ref('');
 let timer;
-const action = ref<'map' | 'watch'>('map');
+// const action = ref<'map' | 'watch'>('map');
+type ComponentKey = 
+  | 'response' 
+  | 'monitoring' 
+  | 'charge' 
+  | 'holidays' 
+  | 'dataChart' 
+  | 'surveillance';
 const componentLeft = {
   response: resPonseLeftList,
   monitoring: LeftList,
@@ -146,9 +154,9 @@ const componentRight = {
   dataChart: dataVisualizationrightList,
   surveillance: surveillancerightList,
 };
-const getImageUrl = imagePath => {
+// const getImageUrl = imagePath => {
-  return new URL(`/src/${imagePath}`, import.meta.url).href;
+//   return new URL(`/src/${imagePath}`, import.meta.url).href;
-};
+// };
 function getDate() {
   const weeks = ['天', '一', '二', '三', '四', '五', '六'];
   const now = new Date();
@@ -185,7 +193,7 @@ const changeModal = () => {
   visible.value = false;
 };
 
-const handleshowModal = (e) => {
+const handleshowModal = (e: boolean) => {
   visible.value = e;
 };
 const mapRef = ref();
@@ -194,14 +202,13 @@ const handleLayerToggle = ({ layerName, show }: { layerName: string; show: boole
 };
 
 // 底部导航栏
-const handleIconSelected = (id) => {
+const handleIconSelected = (id:string) => {
   changeModal();
   chooseBot.value = id;
   console.log('Received ID:', chooseBot);
 };
 
-// 事件图层配置
+const warnLayerConfig: LayerConfig = {
-const warnLayerConfig = {
   id: 'warn-layer',
   type: 'warn',
   data: dailyAddLayer1,
@@ -209,10 +216,10 @@ const warnLayerConfig = {
     size: 120,
     zIndex: 2,
   },
-};
+} as const;
 
 // 设备图层配置
-const equipmentLayerConfig = {
+const equipmentLayerConfig: LayerConfig = {
   id: 'equipment-layer',
   type: 'equipment',
   data: dailyAddLayer2,
@@ -223,7 +230,7 @@ const equipmentLayerConfig = {
 };
 
 // 车辆图层配置
-const carLayerConfig = {
+const carLayerConfig: LayerConfig = {
   id: 'car-layer',
   type: 'car',
   data: dailyAddLayer3,
@@ -234,7 +241,7 @@ const carLayerConfig = {
 };
 
 // 应急措施图层配置
-const emergencyLayerConfig = {
+const emergencyLayerConfig: LayerConfig = {
   id: 'emergency-layer',
   type: 'emergency',
   data: dailyAddLayer4,
@@ -336,39 +343,39 @@ const chargeAddLayer = {
 };
 
 //应急处理图层
-const responseAdddLayer = () => {
+// const responseAdddLayer = () => {
-  if (!isImageAdded.value) {
+//   if (!isImageAdded.value) {
-    scene.value.addImage('response', new URL('@/assets/highScore/record/event.png', import.meta.url).href);
+//     scene.value.addImage('response', new URL('@/assets/highScore/record/event.png', import.meta.url).href);
-    isImageAdded.value = true;
+//     isImageAdded.value = true;
-  }
+//   }
-  if (imageLayerRef.value) {
+//   if (imageLayerRef.value) {
-    scene.value.removeLayer(imageLayerRef.value);
+//     scene.value.removeLayer(imageLayerRef.value);
-  }
+//   }
-
+
-  imageLayerRef.value = new PointLayer({
+//   imageLayerRef.value = new PointLayer({
-    name: 'responseLayer',
+//     name: 'responseLayer',
-    zIndex: 1,
+//     zIndex: 1,
-  })
+//   })
-    .source(responseData, {
+//     .source(responseData, {
-      parser: {
+//       parser: {
-        type: 'json',
+//         type: 'json',
-        x: 'lng',
+//         x: 'lng',
-        y: 'lat',
+//         y: 'lat',
-      },
+//       },
-    })
+//     })
-    .shape('response')
+//     .shape('response')
-    .size(80)
+//     .size(80)
-    .style({
+//     .style({
-      offsets: [0, 20],
+//       offsets: [0, 20],
-      raisingHeight: 10,
+//       raisingHeight: 10,
-    })
+//     })
-    .on('click', (e) => {
+//     .on('click', (e) => {
-      console.log('事件图层', e);
+//       console.log('事件图层', e);
-      showModal();
+//       showModal();
-    });
+//     });
-  console.log('2222');
+//   console.log('2222');
-  scene.value.addLayer(imageLayerRef.value);
+//   scene.value.addLayer(imageLayerRef.value);
-};
+// };
 
 const removeImageLayer = () => {
   if (imageLayerRef.value) {
@@ -492,7 +499,6 @@ onMounted(() => {
     justify-content: space-evenly;
     align-items: center;
     z-index: 999;
-    background: url(/src/assets/coordinated/tcBg1.png) no-repeat 0 0 / 100% 100%;
   }
 
   .control {
@@ -506,7 +512,6 @@ onMounted(() => {
     justify-content: space-evenly;
     align-items: center;
     z-index: 999;
-    background: url('@/assets/coordinated/tcBg.png') no-repeat 0 0/100% 100%;
 
     .layer {
       margin: 0 10px;
@@ -623,7 +628,6 @@ onMounted(() => {
             font-weight: 500;
             font-size: 20px;
             text-align: center;
-            background: url('@/assets/images/watch/circle-bg.png') no-repeat 0 0/100% 100%;
           }
 
           .data-name {
@@ -647,7 +651,6 @@ onMounted(() => {
         padding: 0 10px;
         font-weight: 700;
         color: #84caff;
-        background: url('@/assets/images/watch/title-bg.png') no-repeat 0 0/100% 100%;
       }
 
       .content {

src/views/highScore/dataVisualization/container/containerLeft.vue

@@ -88,9 +88,9 @@
   const optionShow = ref(false);
   const searchValue = ref();
   const selectedId = ref<string | null>('trafficVolume');
-  const selectIcon = (id) => {
+  // const selectIcon = (id) => {
-    selectedId.value = id;
+  //   selectedId.value = id;
-  };
+  // };
   const dataSource = [
     {
       key: '1',

src/views/highScore/holidays/container/containerLeft.vue

@@ -52,7 +52,7 @@ import { LineChart } from 'echarts/charts';
   const optionShow = ref(false);
   const searchValue = ref();
   const selectedId = ref<string | null>('trafficVolume');
-  const selectIcon = (id) => {
+  const selectIcon = (id:any) => {
     selectedId.value = id;
   };
   // 注册必要组件

src/views/highScore/tunnelMonitoring/container/index.vue

@@ -239,7 +239,7 @@
 
 <script lang="ts" setup>
 
-const getImageUrl = imagePath => {
+const getImageUrl = (imagePath:any) => {
     return new URL(`/src/${imagePath}`, import.meta.url).href;
 };
 </script>

src/views/highScore/video/container/containerLeft.vue

@@ -36,7 +36,8 @@
 </template>
 
 <script lang="ts" setup name="">
-  import { ref, onMounted, onBeforeUnmount, reactive } from 'vue';
+import { ref, onMounted, onBeforeUnmount, reactive } from 'vue';
+import type { TreeProps } from 'ant-design-vue';
   const optionShow = ref(false);
   const searchValue = ref();
   const selectedId = ref<string | null>('trafficVolume');

tsconfig.tsbuildinfo

@@ -0,0 +1 @@
+{"root":["./src/main.ts","./src/shims-vue.d.ts","./src/router/index.ts","./src/store/user.ts","./src/views/highscore/dailymonitoring/test.ts","./src/app.vue","./src/components/helloworld.vue","./src/components/mymodal.vue","./src/components/legend/index.vue","./src/components/mapcontainer/index.vue","./src/views/components/modal.vue","./src/views/highscore/chargemonitoring/container/containerleft.vue","./src/views/highscore/chargemonitoring/container/containerright.vue","./src/views/highscore/chargemonitoring/container/showmodal.vue","./src/views/highscore/dailymonitoring/index.vue","./src/views/highscore/dailymonitoring/container/bottom.vue","./src/views/highscore/dailymonitoring/container/containerleft.vue","./src/views/highscore/dailymonitoring/container/containerright.vue","./src/views/highscore/datavisualization/container/containerleft.vue","./src/views/highscore/datavisualization/container/containerright.vue","./src/views/highscore/emergencyresponse/container/containerleft.vue","./src/views/highscore/emergencyresponse/container/containerright.vue","./src/views/highscore/emergencyresponse/container/showmodal.vue","./src/views/highscore/holidays/container/containerleft.vue","./src/views/highscore/holidays/container/containerright.vue","./src/views/highscore/tunnelmonitoring/container/index.vue","./src/views/highscore/video/container/containerleft.vue","./src/views/highscore/video/container/containerright.vue","./src/views/highscore/video/container/index.vue"],"version":"5.8.3"}

types/components.d.ts

@@ -0,0 +1,24 @@
+/* eslint-disable */
+// @ts-nocheck
+// Generated by unplugin-vue-components
+// Read more: https://github.com/vuejs/core/pull/3399
+// biome-ignore lint: disable
+export {}
+
+/* prettier-ignore */
+declare module 'vue' {
+  export interface GlobalComponents {
+    AInput: typeof import('ant-design-vue/es')['Input']
+    AModal: typeof import('ant-design-vue/es')['Modal']
+    AProgress: typeof import('ant-design-vue/es')['Progress']
+    ATable: typeof import('ant-design-vue/es')['Table']
+    ATree: typeof import('ant-design-vue/es')['Tree']
+    HelloWorld: typeof import('./../src/components/HelloWorld.vue')['default']
+    Legend: typeof import('./../src/components/Legend/index.vue')['default']
+    MapContainer: typeof import('./../src/components/MapContainer/index.vue')['default']
+    Modal: typeof import('./../src/views/components/modal.vue')['default']
+    MyModal: typeof import('./../src/components/MyModal.vue')['default']
+    RouterLink: typeof import('vue-router')['RouterLink']
+    RouterView: typeof import('vue-router')['RouterView']
+  }
+}

vite.config.ts

@@ -2,13 +2,44 @@ import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
 import qiankun from 'vite-plugin-qiankun'
 import { resolve } from 'path'
+import Components from 'unplugin-vue-components/vite'
+import { AntDesignVueResolver } from 'unplugin-vue-components/resolvers';
 export default defineConfig({
   plugins: [
     vue(),
     qiankun('high-score-visualization', { // 子应用名称，与主应用注册时一致
       useDevMode: true
-    })
+    }),
+    Components({
+      resolvers: [
+          AntDesignVueResolver({
+              importStyle: false, // css in js
+          }),
       ],
+      // 指定自定义组件位置(默认:src/components)
+      dirs: ['src/components', 'src/**/components'],
+      // 导入组件类型声明文件路径 (false:关闭自动生成)
+      // dts: false,
+      dts: 'types/components.d.ts',
+  }),
+    
+  ],
+  build: {
+    rollupOptions: {
+      output: {
+        // 自定义打包后的文件名
+        chunkFileNames: 'assets/js/[name]-[hash].js',
+        entryFileNames: 'assets/js/[name]-[hash].js',
+        
+        // 确保Vue组件不会被当作入口点
+        manualChunks(id) {
+          if (id.includes('node_modules')) {
+            return 'vendor'
+          }
+        }
+      }
+    }
+  },
   server: {
     port: 7101, // 指定子应用端口
     cors: true,