webp上传成功，剩余问题:

1. mock数据编写
2. 顶部、两侧看板的mock
3. 中间地图图片

components/DeviceRun.vue

@@ -103,19 +103,19 @@ export default {
       .monitor-point-icon {
         width: 173px;
         height: 172px;
-        .bg("~/assets/peakCoalImages/right/monitor-point-icon.png")
+        .bg("~/assets/peakCoalImages/right/monitor-point-icon.webp")
       }
 
       .microsite-icon {
         width: 172px;
         height: 173px;
-        .bg("~/assets/peakCoalImages/right/microsite-icon.png")
+        .bg("~/assets/peakCoalImages/right/microsite-icon.webp")
       }
 
       .tester-icon {
         width: 173px;
         height: 173px;
-        .bg("~/assets/peakCoalImages/right/tester-icon.png")
+        .bg("~/assets/peakCoalImages/right/tester-icon.webp")
       }
 
       .data-value-info {

components/EnergyUse.vue

@@ -157,7 +157,7 @@ export default {
         .electricity-icon {
           width: 132px;
           height: 159px;
-          .bg("~/assets/peakCoalImages/right/electricity-icon.png");
+          .bg("~/assets/peakCoalImages/right/electricity-icon.webp");
         }
 
         .electricity-info {
@@ -171,7 +171,7 @@ export default {
         .water-icon {
           width: 132px;
           height: 159px;
-          .bg("~/assets/peakCoalImages/right/water-icon.png");
+          .bg("~/assets/peakCoalImages/right/water-icon.webp");
         }
 
         .water-info {

components/EnterpriseOperations.vue

@@ -174,7 +174,7 @@ export default {
           bottom: -20px;
           width: 252px;
           height: 67px;
-          .bg("~/assets/peakCoalImages/right/operational-icon.png");
+          .bg("~/assets/peakCoalImages/right/operational-icon.webp");
         }
       }
     }

components/OverviewPollutants.vue

@@ -192,6 +192,7 @@ export default {
       padding-left: 20px;
 
       .pollutant-values {
+        cursor: pointer;
         width: 463px;
         height: 133px;
         .bg("~/assets/peakCoalImages/left/pollutant-values-bg.png");

components/PollutantTrends.vue

@@ -162,7 +162,6 @@ export default {
       line-height: 59px;
       text-shadow: 0 0 11px #0091FF;
       font-weight: 400;
-      cursor: pointer;
     }
 
     .active-tab {

pages/autovisual/index.vue

@@ -1,85 +0,0 @@
-<!--
-* @description:
-* @component: index
-* @author: wangzhigang11
-* @date: 2023/8/21 19:30
--->
-<template>
-  <div class="index">
-    <div :style="autoStyle" class="iframe-container">
-      <iframe
-          ref="iframe"
-          :src="src"
-          frameborder="0"
-          height="100%"
-          width="100%"
-          marginheight="0"
-          marginwidth="0"
-          scrolling="auto"
-          allowfullscreen="true"
-          webkitallowfullscreen="true"
-          mozallowfullscreen="true"
-      />
-    </div>
-  </div>
-</template>
-
-<script>
-import screenScaleMixin from '@/mixins/screen-scale-mixin';
-import {urlJoin} from '@/utils/url'
-
-export default {
-  name: 'Index',
-  components: {
-  },
-  mixins: [
-    screenScaleMixin
-  ],
-  props: {},
-  data() {
-    return {
-    }
-  },
-  computed: {
-    src() {
-      return urlJoin('/visual/PeakCoalView')
-    }
-  },
-  watch: {},
-  created() {
-  },
-  beforeDestroy() {
-  },
-  mounted() {
-  },
-  methods: {
-  },
-}
-</script>
-<style>
-#overviewBody {
-  height: 100vh;
-}
-</style>
-<style lang='less' scoped>
-.index {
-  width: 100vw;
-  height: 100vh;
-  overflow: hidden;
-  background-color: #000;
-  position: relative;
-
-  .iframe-container {
-    position: absolute;
-
-    > iframe {
-      background-color: transparent;
-    }
-  }
-
-  .basin-dialog {
-    position: absolute;
-  }
-
-}
-</style>

pages/index.vue

@@ -1,9 +1,85 @@
+<!--
+* @description:
+* @component: index
+* @author: wangzhigang11
+* @date: 2023/8/21 19:30
+-->
 <template>
-  <div>
+  <div class="index">
-    <Map />
+    <div :style="autoStyle" class="iframe-container">
+      <iframe
+        ref="iframe"
+        :src="src"
+        frameborder="0"
+        height="100%"
+        width="100%"
+        marginheight="0"
+        marginwidth="0"
+        scrolling="auto"
+        allowfullscreen="true"
+        webkitallowfullscreen="true"
+        mozallowfullscreen="true"
+      />
+    </div>
   </div>
 </template>
 
 <script>
-  export default {}
+import screenScaleMixin from '@/mixins/screen-scale-mixin';
+import {urlJoin} from '@/utils/url'
+
+export default {
+  name: 'Index',
+  components: {
+  },
+  mixins: [
+    screenScaleMixin
+  ],
+  props: {},
+  data() {
+    return {
+    }
+  },
+  computed: {
+    src() {
+      return urlJoin('/visual/PeakCoalView')
+    }
+  },
+  watch: {},
+  created() {
+  },
+  beforeDestroy() {
+  },
+  mounted() {
+  },
+  methods: {
+  },
+}
 </script>
+<style>
+#overviewBody {
+  height: 100vh;
+}
+</style>
+<style lang='less' scoped>
+.index {
+  width: 100vw;
+  height: 100vh;
+  overflow: hidden;
+  background-color: #000;
+  position: relative;
+
+  .iframe-container {
+    position: absolute;
+
+    > iframe {
+      background-color: transparent;
+    }
+  }
+
+  .basin-dialog {
+    position: absolute;
+  }
+
+}
+</style>

pages/test/index.vue

@@ -1,13 +0,0 @@
-<template>
-
-</template>
-
-<script>
-export default {
-  name: "index"
-}
-</script>
-
-<style scoped>
-
-</style>

pages/visual/PeakCoalView.vue

@@ -277,7 +277,7 @@ body, html, #__nuxt, #__layout {
     bottom: -44px;
     width: 100%;
     height: 220px;
-    .bg("~/assets/peakCoalImages/footer/footer-bg.png", center, center);
+    .bg("~/assets/peakCoalImages/footer/footer-bg.webp", center, center);
     z-index: 2;
     .footer-btn {
       cursor: pointer;