first commit

src/views/dashboard1/index.vue

@@ -0,0 +1,89 @@
+<script lang="ts" setup>
+import { computed, ref, type Component } from "vue";
+import SwitchPageBtn from "./components/btn";
+import backgroundVideo from "./assets/循环背景动画.mp4";
+import AlarmManagementPage from "./pages/AlarmManagementPage.vue";
+import DataReportPage from "./pages/DataReportPage.vue";
+import EquipmentManagementPage from "./pages/EquipmentManagementPage.vue";
+import IntegratedCenterPage from "./pages/IntegratedCenterPage.vue";
+import PatrolPlanPage from "./pages/PatrolPlanPage.vue";
+import VideoCenterPage from "./pages/VideoCenterPage.vue";
+
+const currentTab = ref<number>(1);
+
+const tabs = {
+  left: [
+    { id: 1, text: "监管中心" },
+    { id: 2, text: "设备管理" },
+    { id: 3, text: "视频中心" },
+  ],
+  right: [
+    { id: 4, text: "告警管理" },
+    { id: 5, text: "巡检记录" },
+    { id: 6, text: "统计分析" },
+  ],
+};
+
+const pageComponents: Record<number, Component> = {
+  1: IntegratedCenterPage,
+  2: EquipmentManagementPage,
+  3: VideoCenterPage,
+  4: AlarmManagementPage,
+  5: PatrolPlanPage,
+  6: DataReportPage,
+};
+
+const currentViewComponent = computed<Component>(
+  () => pageComponents[currentTab.value] ?? IntegratedCenterPage,
+);
+
+function switchPage(tab: number) {
+  currentTab.value = tab;
+}
+</script>
+
+<template>
+  <div class="dashboard">
+    <video
+      autoplay
+      class="background"
+      loop
+      muted
+      preload="auto"
+      :src="backgroundVideo"
+    ></video>
+    <div class="main">
+      <div class="btn-group">
+        <div class="left">
+          <SwitchPageBtn
+            v-for="tab in tabs.left"
+            :key="tab.id"
+            :active="currentTab === tab.id"
+            :text="tab.text"
+            direction="left"
+            @click="switchPage(tab.id)"
+          />
+        </div>
+        <div class="right">
+          <SwitchPageBtn
+            v-for="tab in tabs.right"
+            :key="tab.id"
+            :active="currentTab === tab.id"
+            :text="tab.text"
+            direction="right"
+            @click="switchPage(tab.id)"
+          />
+        </div>
+      </div>
+      <div class="content-stage">
+        <KeepAlive>
+          <component :is="currentViewComponent" />
+        </KeepAlive>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="less">
+@import "./index";
+</style>