新增 “应用场景”

.idea/.gitignore

+# Default ignored files
+/shelf/
+/workspace.xml
+# Editor-based HTTP Client requests
+/httpRequests/
+# Datasource local storage ignored files
+/dataSources/
+/dataSources.local.xml

.idea/iot-web.iml

+<?xml version="1.0" encoding="UTF-8"?>
+<module type="JAVA_MODULE" version="4">
+  <component name="NewModuleRootManager" inherit-compiler-output="true">
+    <exclude-output />
+    <content url="file://$MODULE_DIR$" />
+    <orderEntry type="inheritedJdk" />
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+</module>
\ No newline at end of file

.idea/misc.xml

+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectRootManager" version="2" languageLevel="JDK_17" default="true" project-jdk-name="17" project-jdk-type="JavaSDK">
+    <output url="file://$PROJECT_DIR$/out" />
+  </component>
+</project>
\ No newline at end of file

.idea/modules.xml

+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectModuleManager">
+    <modules>
+      <module fileurl="file://$PROJECT_DIR$/.idea/iot-web.iml" filepath="$PROJECT_DIR$/.idea/iot-web.iml" />
+    </modules>
+  </component>
+</project>
\ No newline at end of file

.idea/vcs.xml

+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings">
+    <mapping directory="" vcs="Git" />
+  </component>
+</project>
\ No newline at end of file

src/layout/main.vue

@@ -114,11 +114,12 @@ var officeTree = ref([
 function handleOfficeChange(val: any) {
   console.log(val);
   //触发场景变化事件在选择机构后，弹出场景弹窗
-  eventBus.emit("sceneChange", val);
+  eventBus.emit("officeChange", val);
 }
 
 function handleSceneChange(val: any) {
   console.log(val);
+  eventBus.emit("sceneChange", val);
 }
 </script>
 

src/views/Home.vue

@@ -98,6 +98,70 @@
         </ContainerWrap>
       </div> -->
     </div>
+    <el-dialog
+      v-model="dialogVisible"
+      :modal="false"
+      width="80%"
+      :show-close="false"
+      class="h-[70%]"
+    >
+      <template #header>
+        <div class="dialog-header flex justify-between items-center">
+          <div class="flex flex-col">
+            <span class="text-white text-[14px]">场景联动 - 智慧园区(20)</span>
+            <img
+              src="@/assets/imgs/title-bt-icon.png"
+              class="w-10 h-1"
+              alt=""
+            />
+          </div>
+          <div @click="dialogVisible = false">
+            <el-icon :size="20"><CircleCloseFilled /></el-icon>
+          </div>
+        </div>
+      </template>
+
+      <div class="grid grid-cols-8">
+        <!-- for 循环一行两列 -->
+        <div
+          v-for="(item, index) in sysClassificationList"
+          :key="index"
+          class="bg-container flex flex-col flex-1 2xl:w-[150px] 2xl:h-[105px] xl:w-[105px] xl:h-[80px] 2xl:ml-3 2xl:mr-3 2xl:mt-5 xl:mt-3 xl:ml-2 xl:mr-2"
+          mt-3
+        >
+          <div
+            class="flex 2xl:text-[11px] xl:text-[9px] items-center justify-center 2xl:pt-2 xl:pt-2"
+          >
+            在线/离线
+            <div
+              class="text-[#00FF66] 2xl:text-[11px] xl:text-[9px] 2xl:pl-2 xl:pl-1"
+            >
+              {{ item.online }}
+            </div>
+            <div class="text-white 2xl:text-[11px] xl:text-[9px]">/</div>
+            <div class="text-[#F01111] 2xl:text-[11px] xl:text-[9px]">
+              {{ item.offline }}
+            </div>
+          </div>
+          <div
+            class="text-[#66FFFF] xl:text-[16px] 2xl:text-[20px] justify-center flex 2xl:mt-2 xl:mt-1"
+          >
+            {{ item.number }}个
+          </div>
+
+          <div
+            class="text-white xl:text-[13px] 2xl:text-[16px] justify-center flex 2xl:mt-3 xl:mt-2"
+          >
+            {{ item.name }}
+          </div>
+          <!-- <div class="text-white text-xl font-bold mb-2">
+          系统分类 {{ index + 1 }}
+        </div>
+        <div class="text-white text-3xl font-extrabold">1234</div>
+        <div class="text-white text-sm font-medium">个</div> -->
+        </div>
+      </div>
+    </el-dialog>
   </div>
 </template>
 <script setup lang="ts">
@@ -112,7 +176,7 @@ import Map from "./components/Map.vue";
 
 import { ref, onMounted, onUnmounted } from "vue";
 import { eventBus } from "@/eventBus";
-
+const dialogVisible = ref(false);
 const selectedOffice = ref([]);
 const officeTree = ref([
   {
@@ -184,14 +248,52 @@ const officeTree = ref([
     ],
   },
 ]);
-
+const sysClassificationList = ref([
+  {
+    name: "智慧隧道",
+    number: 100,
+    online: 150,
+    offline: 10,
+  },
+  {
+    name: "幸福小镇",
+    number: 110,
+    online: 100,
+    offline: 20,
+  },
+  {
+    name: "智慧园区",
+    number: 234,
+    online: 50,
+    offline: 30,
+  },
+  {
+    name: "拌合站",
+    number: 455,
+    online: 200,
+    offline: 50,
+  },
+  {
+    name: "视频监控",
+    number: 231,
+    online: 100,
+    offline: 0,
+  },
+  {
+    name: "钢筋场",
+    number: 432,
+    online: 30,
+    offline: 11,
+  },
+]);
 onMounted(() => {
+  // 监听场景变化事件
   eventBus.on("sceneChange", (scene) => {
-    console.log("收到场景变化:", scene);
-    // ElMessageBox.alert(`当前场景已切换为: ${scene}`, "提示", {
-    //   confirmButtonText: "确定",
-    // });
+    dialogVisible.value = true;
   });
+
+  // 监听机构变化事件
+  eventBus.on("officeChange", (office) => {});
 });
 
 onUnmounted(() => {
@@ -206,6 +308,18 @@ onUnmounted(() => {
     height: 100%;
   }
 
+  .bg-container {
+    background: url("@/assets/imgs/sys-class-bg.png") no-repeat center center;
+    background-size: 100% 100%;
+  }
+
+  ::v-deep(.el-dialog) {
+    background-color: #002266 !important;
+  }
+  ::v-deep(.el-dialog__header) {
+    border-bottom: 0px solid #004499;
+  }
+
   .layer-control {
     width: 100%;
     height: 100%;

src/views/components/SysClassification.vue

@@ -41,7 +41,6 @@
         <div class="text-white text-sm font-medium">个</div> -->
       </div>
     </div>
-    <div class="grid grid-cols-2 gap-4 p-4"></div>
   </div>
 </template>
 <script setup lang="ts">