init排水系统

src/views/Screen/index.vue

@@ -4,10 +4,15 @@
       v-if="showMenu === 0"
       style="position: absolute; top: 0; left: 0; right: 0; bottom: 0"
     ></home>
+    <psxt
+      v-if="showMenu === 3"
+      style="position: absolute; top: 0; left: 0; right: 0; bottom: 0"
+    ></psxt>
     <v-scale-screen
       ref="scale-screen"
       width="1920"
       height="1080"
+      class="psxt-bg"
       :fullScreen="true"
     >
       <div class="container">
@@ -30,7 +35,12 @@
             >
               <p>环境监测</p>
             </div>
-            <div class="sub-item" key="" :class="showMenu == 1 ? 'active' : ''">
+            <div
+              class="sub-item"
+              @click="changeMenu(3)"
+              key=""
+              :class="showMenu == 3 ? 'active' : ''"
+            >
               <p>排水系统</p>
             </div>
           </div>
@@ -64,6 +74,7 @@
 import screenfull from "screenfull";
 import rydw from "./items/rydw.vue";
 import hjjc from "./items/hjjc.vue";
+import psxt from "./items/psxt.vue";
 import home from "./items/home.vue";
 export default {
   name: "cockpit",
@@ -71,6 +82,7 @@ export default {
     home,
     rydw,
     hjjc,
+    psxt,
   },
   data() {
     return {
@@ -369,6 +381,9 @@ export default {
 .poa {
   position: absolute;
 }
+.psxt-bg {
+  background: url("~@/assets/images/screen/psxt/bg.png") no-repeat center;
+}
 /* 基础容器 */
 .container {
   width: 100%;

src/views/Screen/items/hjjc.vue

@@ -143,7 +143,6 @@
         </div>
       </div>
     </div>
-    <!-- 弹窗内容 -->
   </div>
 </template>
 <script>
@@ -698,8 +697,6 @@ export default {
         color: #fdfeff;
         font-size: 16px;
         font-weight: 500;
-        &.is-checked {
-        }
       }
     }
   }

src/views/Screen/items/home.vue

@@ -12,7 +12,8 @@ export default {
   created() {
     var that = this;
     this.$nextTick(() => {
-      Cesium.Ion.defaultAccessToken = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI2ZmY5ZWUyZS00MjQwLTQzZjUtYTBjZi02ZWZiYzJhMmY2NTYiLCJpZCI6MTMxMzY5LCJpYXQiOjE3NDE2NzY4Mzh9.QD-8cQI_VqPG2t-S8KxLyMFux0R429lfTdhQWrdeWhE";
+      Cesium.Ion.defaultAccessToken =
+        "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI2ZmY5ZWUyZS00MjQwLTQzZjUtYTBjZi02ZWZiYzJhMmY2NTYiLCJpZCI6MTMxMzY5LCJpYXQiOjE3NDE2NzY4Mzh9.QD-8cQI_VqPG2t-S8KxLyMFux0R429lfTdhQWrdeWhE";
       const viewer = new Cesium.Viewer("cesiumContainer", {
         homeButton: false,
         sceneModePicker: false,
@@ -38,7 +39,9 @@ export default {
           // 调整模型高度
           var heightOffset = -330.0; // 调整这个值以匹配地形高度
           var boundingSphere = tileset.boundingSphere;
-          var cartographic = Cesium.Cartographic.fromCartesian(boundingSphere.center);
+          var cartographic = Cesium.Cartographic.fromCartesian(
+            boundingSphere.center
+          );
 
           var surface = Cesium.Cartesian3.fromRadians(
             cartographic.longitude,
@@ -60,7 +63,7 @@ export default {
 
           tileset.modelMatrix = Cesium.Matrix4.fromTranslation(translation);
 
-          tileset.maximumMemoryUsage = 1024 * 1024 ;
+          tileset.maximumMemoryUsage = 1024 * 1024;
           tileset.maximumScreenSpaceError = 4;
 
           // 开启地形深度检测

src/views/Screen/items/psxt.vue

+<template>
+  <div class="app-container home">
+    <div id="cesiumContainer"></div>
+  </div>
+</template>
+<script>
+export default {
+  name: "cesium",
+  data() {
+    return {};
+  },
+  created() {},
+  methods: {},
+};
+</script>
+
+<style scoped lang="scss">
+.home {
+  width: 100%;
+  height: 100%;
+  background: url("~@/assets/images/screen/psxt/bg.png") no-repeat center;
+  display: flex;
+  justify-content: center;
+  padding-top: 155px;
+  #cesiumContainer {
+    width: 1800px;
+    height: 745px;
+    background: url("~@/assets/images/screen/psxt/gd.png") no-repeat center;
+    background-size: 1800px 745px;
+  }
+}
+</style>