新增数据大屏页面

dyf-vue-ui/src/views/homeIndex/index.vue

@@ -0,0 +1,174 @@
+
+<style scoped>
+.dashboard-container {
+  width: 100vw;
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  overflow: hidden;
+  background: radial-gradient( 0% 0% at 0% 0%, #091B2D 0%, #0C2644 100%), #267AD0;
+}
+
+/* 全屏地图 - 背景图层 */
+.fullscreen-map {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 1;
+  pointer-events: none;
+}
+
+/* 顶部栏 */
+.top-bar {
+  position: relative;
+  z-index: 10;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 12px 20px;
+  background-color: rgba(74, 85, 104, 0.9);
+  color: #fff;
+  font-size: 14px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.top-bar h1 {
+  font-size: 18px;
+  margin: 0;
+  font-weight: 600;
+}
+
+.header-info {
+  display: flex;
+  gap: 16px;
+  align-items: center;
+}
+
+.header-info span {
+  font-size: 12px;
+}
+
+/* 悬浮模块容器 */
+.floating-modules {
+  display: flex;
+  flex-direction: column;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: calc(100% - 60px); /* 减去顶部栏高度 */
+  z-index: 5;
+  padding: 20px;
+  box-sizing: border-box;
+  pointer-events: none;
+}
+
+.left-modules,
+.right-modules {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  width: 100%;
+  flex: 1;
+  pointer-events: auto;
+}
+
+.bottom-middle-module {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  max-width: 800px;
+  pointer-events: auto;
+}
+
+.module-card {
+  background-color: rgba(107, 114, 128, 0.9);
+  border-radius: 6px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  width: 100%;
+  box-sizing: border-box;
+  overflow: hidden;
+}
+
+.module-card:hover {
+  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
+}
+
+.module-header {
+  padding: 10px 14px;
+  font-size: 14px;
+  font-weight: 600;
+  color: #fff;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
+  display: flex;
+  align-items: center;
+  background: linear-gradient(90deg, #3b82f6, #60a5fa);
+}
+
+.module-header::before {
+  content: '';
+  display: inline-block;
+  width: 8px;
+  height: 16px;
+  margin-right: 8px;
+  border-radius: 2px;
+  background-color: inherit;
+}
+
+.module-content {
+  padding: 14px;
+  color: #e5e7eb;
+  font-size: 13px;
+  height: calc(100% - 36px);
+  box-sizing: border-box;
+  overflow: auto;
+}
+
+.overview-card .module-header::before { background-color: #3b82f6; }
+.alarm-card .module-header::before { background-color: #ef4444; }
+.realtime-card .module-header::before { background-color: #f97316; }
+.module-card:nth-child(2) .module-header::before { background-color: #8b5cf6; }
+.module-card:nth-child(3) .module-header::before { background-color: #06b6d4; }
+
+@media (max-width: 1400px) {
+  .left-modules,
+  .right-modules {
+    width: 100%;
+  }
+}
+
+@media (max-width: 1200px) {
+  .left-modules,
+  .right-modules {
+    width: 100%;
+  }
+  .bottom-middle-module {
+    max-width: 600px;
+  }
+}
+
+@media (max-width: 900px) {
+  .left-modules,
+  .right-modules {
+    width: 100%;
+  }
+  .bottom-middle-module {
+    max-width: 500px;
+  }
+}
+
+@media (max-width: 768px) {
+  .left-modules,
+  .right-modules {
+    width: 100%;
+  }
+  .bottom-middle-module {
+    max-width: 100%;
+  }
+}
+</style>

src/router/index.ts

@@ -39,6 +39,12 @@ export const constantRoutes: RouteRecordRaw[] = [
     component: () => import('@/views/error/401.vue'),
     hidden: true
   },
+  {
+    path: "/homeIndex",
+    name: "HomeIndex",
+    component: () => import("@/views/homeIndex/index.vue"),
+    meta: {title: '数据大屏', icon: 'dashboard', preload: true,  keepAlive: true },
+  },
   {
     path: '',
     component: Layout,
@@ -48,10 +54,11 @@ export const constantRoutes: RouteRecordRaw[] = [
         path: '/index',
         component: () => import('@/views/index.vue'),
         name: 'Index',
-        meta: { title: '首页', icon: 'dashboard', affix: true,keepAlive: false }
+        meta: { title: '首页', icon: 'dashboard', affix: true, keepAlive: false }
       }
     ]
   },
+
   {
     path: '/user',
     component: Layout,

src/views/equipmentManagement/devices/index.vue

@@ -56,8 +56,8 @@
             </el-col>
 
             <el-col :span="1.5">
-              <el-button v-hasPermi="['equipment:devices:export']" type="warning"  plain
+              <el-button v-hasPermi="['equipment:devices:export']" type="warning" plain icon="Download"
-                icon="Download" @click="handleExport">导出</el-button>
+                @click="handleExport">导出</el-button>
             </el-col>
             <el-col :span="1.5">
               <el-button v-hasPermi="['equipment:devices:remove']" type="danger" plain :disabled="multiple"
@@ -517,7 +517,7 @@ const handleExport = () => {
     {
       ...queryParams.value
     },
-    `${new Date().getTime()}.xlsx`,
+    `设备列表${new Date().getTime()}.xlsx`,
     'get'
   );
 };
@@ -913,12 +913,19 @@ const beforeImportUpload = (file: any) => {
 const head_upload = () => getBearerToken();
 const handleImportSuccess = (response: any) => {
   if (response.code == 200) {
+    console.log('导入成功了么');
     importResult.value.isShow = true;
+  
     if (response.data) {
-      importResult.value.succeed = response.data.successCount || 0;
+      console.log(response.data,'response.data');
-      importResult.value.errorSun = response.data.failureCount || 0;
+      
+      importResult.value.succeed = response.data.successCount;
+      importResult.value.errorSun = response.data.failureCount;
       importResult.value.total = importResult.value.succeed + importResult.value.errorSun;
-      importResult.value.link = response.data.errorExcelUrl || '';
+      importResult.value.link = response.data.errorExcelUrl;
+    }
+      if (importUpload.value) {
+      importUpload.value.clearFiles();
     }
     getList(); // 初始化列表数据
   } else {

src/views/homeIndex/components/AlarmCount.vue

@@ -0,0 +1,6 @@
+<template>
+    <div></div>
+</template>
+<script setup lang="ts"> 
+</script>
+<style scoped lang="scss"></style>

src/views/homeIndex/components/AlarmEvent.vue

@@ -0,0 +1,6 @@
+<template>
+    <div></div>
+</template>
+<script setup lang="ts"> 
+</script>
+<style scoped lang="scss"></style>

src/views/homeIndex/components/AlarmOverview.vue

@@ -0,0 +1,45 @@
+<template>
+    <div>
+        <div class="alarmOvery">
+            <div class="alarm">
+                <div class="alarmIMG"></div>
+                <div class="alarmText">正在报警</div>
+            </div>
+
+            <div class="alarm">
+                <div class="alarmIMG"></div>
+                <div class="alarmText">报警总数</div>
+            </div>
+            <div class="alarm">
+                <div class="alarmIMG"></div>
+                <div class="alarmText">已处理</div>
+            </div>
+        </div>
+    </div>
+</template>
+<script setup lang="ts">
+
+</script>
+<style scoped lang="scss">
+.alarmOvery {
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+    align-items: center;
+    padding-top: 7.5vh;
+    text-align: center;
+    font-size:0.8vw;
+    color: #DEEFFF;
+}
+
+.alarmIMG {
+    width: 12vh;
+    height: 12vh;
+    background: url(@/assets/homeIndex/alarmIMG.png) no-repeat;
+    background-size: 100% 100%;
+
+}
+.alarmText{
+    padding-top: 1.5vh;
+}
+</style>

src/views/homeIndex/components/DeviceCategory.vue

@@ -0,0 +1,6 @@
+<template>
+    <div></div>
+</template>
+<script setup lang="ts"> 
+</script>
+<style scoped lang="scss"></style>

src/views/homeIndex/components/DeviceOverview.vue

@@ -0,0 +1,6 @@
+<template>
+    <div></div>
+</template>
+<script setup lang="ts"> 
+</script>
+<style scoped lang="scss"></style>

src/views/homeIndex/components/DeviceUsage.vue

@@ -0,0 +1,6 @@
+<template>
+    <div></div>
+</template>
+<script setup lang="ts"> 
+</script>
+<style scoped lang="scss"></style>

src/views/homeIndex/components/MapComponent.vue

@@ -0,0 +1,8 @@
+<template>
+    <div class="map-component">地图模块</div>
+</template>
+<script setup lang="ts"> 
+</script>
+<style scoped lang="scss">
+
+</style>

src/views/homeIndex/components/RealTimeAlarm.vue

@@ -0,0 +1,6 @@
+<template>
+    <div></div>
+</template>
+<script setup lang="ts"> 
+</script>
+<style scoped lang="scss"></style>

src/views/homeIndex/index.vue

@@ -0,0 +1,228 @@
+<template>
+  <div class="dashboard-container">
+    <!-- 顶部固定区域 -->
+    <div class="top-bar">
+      <div class="header-info">
+        <div>{{ currentTime }}</div>
+      </div>
+    </div>
+
+    <!-- 全屏地图区域（背景） -->
+    <div class="fullscreen-map">
+      <MapComponent></MapComponent>
+    </div>
+
+    <!-- 悬浮模块容器 -->
+    <div class="floating-modules">
+      <!-- 左侧模块组 -->
+      <div class="left-modules">
+        <div class="module-card overview-card">
+          <div class="module-header">设备概览</div>
+          <div class="module-content">
+            <DeviceOverview />
+          </div>
+        </div>
+
+        <div class="module-card">
+          <div class="module-header">设备类别</div>
+          <div class="module-content">
+            <DeviceCategory />
+          </div>
+        </div>
+
+        <div class="module-card">
+          <div class="module-header">设备使用频次</div>
+          <div class="module-content">
+            <DeviceUsage />
+          </div>
+        </div>
+      </div>
+
+      <!-- 右侧模块组 -->
+      <div class="right-modules">
+        <div class="module-card alarm-card">
+          <div class="module-header">报警数据</div>
+          <div class="module-content">
+            <AlarmOverview />
+          </div>
+        </div>
+
+        <div class="module-card">
+          <div class="module-header">报警事件</div>
+          <div class="module-content">
+            <AlarmEvent />
+          </div>
+        </div>
+
+        <div class="module-card">
+          <div class="module-header">报警次数</div>
+          <div class="module-content">
+            <AlarmCount />
+          </div>
+        </div>
+      </div>
+
+      <!-- 底部中间模块 -->
+      <div class="bottom-middle-module">
+        <div class="module-card realtime-card">
+          <div class="module-header">实时报警信息</div>
+          <div class="module-content">
+            <RealTimeAlarm />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import DeviceOverview from './components/DeviceOverview.vue';
+import AlarmOverview from './components/AlarmOverview.vue';
+import DeviceCategory from './components/DeviceCategory.vue';
+import DeviceUsage from './components/DeviceUsage.vue';
+import AlarmEvent from './components/AlarmEvent.vue';
+import AlarmCount from './components/AlarmCount.vue';
+import RealTimeAlarm from './components/RealTimeAlarm.vue';
+import MapComponent from './components/MapComponent.vue';
+// 实时时间实现
+const currentDate = ref(new Date());
+// 每秒更新时间
+const timer = setInterval(() => {
+  currentDate.value = new Date();
+}, 1000);
+// 组件卸载时清除定时器
+onUnmounted(() => {
+  clearInterval(timer);
+});
+
+// 格式化时间
+const currentTime = computed(() => {
+  const now = currentDate.value;
+  return `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}-${String(now.getDate()).padStart(2, '0')} ${String(now.getHours()).padStart(2, '0')}:${String(now.getMinutes()).padStart(2, '0')}:${String(now.getSeconds()).padStart(2, '0')}`;
+});
+</script>
+
+<style scoped>
+.dashboard-container {
+  width: 100vw;
+  height: 100vh;
+  position: relative;
+  overflow: hidden;
+}
+
+/* 顶部栏 */
+.top-bar {
+  position: relative;
+  z-index: 10;
+  height: 13vh;
+  background: url(@/assets/homeIndex/nav.png) no-repeat;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background-size: 100% 100%;
+
+}
+
+.header-info {
+  position: absolute;
+  right: 6vh;
+  top:3.8vh;
+  color: #fff;
+  font-size:1.8vh;
+}
+
+/* 全屏地图 */
+.fullscreen-map {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: radial-gradient(0% 0% at 0% 0%, #091B2D 0%, #0C2644 100%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* 悬浮模块容器 */
+.floating-modules {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  z-index: 5;
+  padding: 1.5vw;
+  box-sizing: border-box;
+  pointer-events: none;
+}
+
+/* 左侧模块组 */
+.left-modules {
+  position: absolute;
+  top: 8vh;
+  left: 0.5vw;
+  display: flex;
+  flex-direction: column;
+  width: 27vw;
+  height: calc(100vh - 9vh);
+  pointer-events: auto;
+}
+
+/* 右侧模块组 */
+.right-modules {
+  position: absolute;
+  top: 8vh;
+  right: 0.5vw;
+  display: flex;
+  flex-direction: column;
+  width: 27vw;
+  height: calc(100vh - 9vh);
+  pointer-events: auto;
+}
+
+/* 底部中间模块 */
+.bottom-middle-module {
+  position: absolute;
+  bottom: 0.4vw;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 44vw;
+  height: 31vh;
+  min-height: 180px;
+  pointer-events: auto;
+}
+
+/* 模块卡片样式 */
+.module-card {
+  background: url(@/assets/homeIndex/card.png) no-repeat;
+  position: relative;
+  background-size: 100% 100%;
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+/* 模块标题 */
+.module-header {
+  position: absolute;
+  font-size: 1.6vh;
+  color: #fff;
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  left: 5vh;
+  top: 3.2vh;
+
+}
+
+/* 模块内容 */
+.module-content {
+  padding: 1.5vw;
+  position: relative;
+}
+
+</style>