Merge branch 'dev' of http://120.46.213.136:9528/isoftstone/lc_frontend into dev

src/views/screen/powerMonitoring.vue

@@ -3,7 +3,11 @@
     <!-- 标题栏 -->
     <div class="screen-header">
       <h1 class="screen-title">动环监控大屏</h1>
-      <div class="screen-datetime">{{ currentDateTime }}</div>
+      <div class="screen-datetime">
+         <span style="margin-top: 6%;font-size: 0.9rem;">{{ currentDate }}</span>
+        <span style="margin-top: 6%;font-size: 0.9rem;">{{ currentWeek }}</span>
+        <span style="margin-top: 6%;font-size: 0.9rem;">{{ currentTime }}</span>
+      </div>
     </div>
 
     <!-- 主要内容区域 -->
@@ -11,7 +15,7 @@
       <!-- 第一行：统计卡片 -->
       <div class="stats-row">
         <!-- 总设备数卡片 -->
-        <div class="stat-card">
+        <div class="stat-card chart-left">
           <div class="card-title">总设备数</div>
           <div class="card-value">{{ totalDevices.toLocaleString() }}</div>
           <div class="card-trend growth">
@@ -23,7 +27,7 @@
         </div>
 
         <!-- 在线设备数卡片 -->
-        <div class="stat-card">
+        <div class="stat-card chart-right">
           <div class="card-title">在线设备数</div>
           <div class="card-value">{{ onlineDevices.toLocaleString() }}</div>
           <div class="card-trend online-rate">
@@ -35,13 +39,13 @@
       <!-- 第二行：图表 -->
       <div class="charts-row">
         <!-- 告警趋势折线图 -->
-        <div class="chart-card">
+        <div class="chart-card chart-left">
           <div class="chart-title">当月告警趋势</div>
           <div ref="alarmTrendChartRef" class="chart-container"></div>
         </div>
 
         <!-- 设备类型分布饼图 -->
-        <div class="chart-card">
+        <div class="chart-card chart-right">
           <div class="chart-title">告警设备类型分布</div>
           <div ref="deviceTypePieChartRef" class="chart-container"></div>
         </div>
@@ -151,6 +155,10 @@ interface ParkInfo {
 // 当前日期时间
 const currentDateTime = ref('');
 
+const currentDate = ref<string>('')
+const currentWeek = ref<string>('')
+const currentTime = ref<string>('')
+
 // 统计数据
 const totalDevices = ref(0);
 const onlineDevices = ref(0);
@@ -197,7 +205,12 @@ const updateDateTime = () => {
   const hours = String(now.getHours()).padStart(2, '0');
   const minutes = String(now.getMinutes()).padStart(2, '0');
   const seconds = String(now.getSeconds()).padStart(2, '0');
+  const weekdays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
+  const weekday = weekdays[now.getDay()]
   currentDateTime.value = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
+  currentDate.value = `${year}年${month}月${day}日`
+  currentWeek.value = `${weekday}`
+  currentTime.value = `${hours}:${minutes}:${seconds}`
 };
 
 // 初始化告警趋势图表
@@ -614,7 +627,9 @@ const handleResize = () => {
 .big-screen-container {
   width: 100%;
   min-height: 100vh;
-  background: linear-gradient(180deg, #0a1929 0%, #0d1e2f 100%);
+  // background: linear-gradient(180deg, #0a1929 0%, #0d1e2f 100%);
+  background: url('@/assets/images/v2_rel0n6.png');
+  color: #fff;
   padding: 20px;
   box-sizing: border-box;
   overflow: auto;
@@ -638,8 +653,12 @@ const handleResize = () => {
 
   .screen-datetime {
     font-size: 18px;
-    color: #8b9bb3;
+    // color: #8b9bb3;
     font-family: 'Courier New', monospace;
+    display: flex;
+    margin-right: 20px;
+    justify-content: end;
+    column-gap: 2vw;
   }
 }
 
@@ -666,7 +685,8 @@ const handleResize = () => {
 
   .card-title {
     font-size: 16px;
-    color: #8b9bb3;
+    // color: #8b9bb3;
+    color: #fff;
     margin-bottom: 15px;
   }
 
@@ -707,12 +727,49 @@ const handleResize = () => {
   gap: 20px;
 }
 
+.chart-left {
+background-image: url('@/assets/images/screen/left_top_img.png'),
+      url('@/assets/images/screen/left_center_img.png'),
+      url('@/assets/images/screen/left_bottom_img.png');
+      background-position: top center,
+      left center,
+      bottom center;
+  background-repeat: no-repeat, no-repeat, no-repeat;
+  background-size: 100% 90px,
+      cover,
+      100% 68px;
+}
+
+.chart-right {
+  background-image:
+          url('@/assets/images/screen/right_top_img.png'),
+          url('@/assets/images/screen/right_center_img.png'),
+          url('@/assets/images/screen/right_bottom_img.png');
+  background-position:
+          top center,
+          right center,
+          bottom center;
+  background-repeat: no-repeat, no-repeat, no-repeat;
+  background-size: 100% 90px,
+      cover,
+      100% 68px;
+    .chart-title,.card-title {
+      text-align: right;
+    }
+    .card-value {
+      text-align: right;
+    }
+}
+
 .chart-card {
-  background: linear-gradient(135deg, #1a2940 0%, #0f1e2d 100%);
-  border-radius: 12px;
+  // background: linear-gradient(135deg, #1a2940 0%, #0f1e2d 100%);
+  // padding: 0 5px;
+  
+      flex: 1;
+  // border-radius: 12px;
   padding: 20px;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
-  border: 1px solid rgba(78, 155, 248, 0.1);
+  // box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+  // border: 1px solid rgba(78, 155, 248, 0.1);
   height: 350px;
 
   .chart-title {
@@ -734,11 +791,21 @@ const handleResize = () => {
 }
 
 .table-card {
-  background: linear-gradient(135deg, #1a2940 0%, #0f1e2d 100%);
-  border-radius: 12px;
-  padding: 20px;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
-  border: 1px solid rgba(78, 155, 248, 0.1);
+  // background: linear-gradient(135deg, #1a2940 0%, #0f1e2d 100%);
+  // border-radius: 12px;
+  background-image: url('@/assets/images/screen/left_top_img.png'),
+      url('@/assets/images/screen/left_center_img.png'),
+      url('@/assets/images/screen/left_bottom_img.png');
+      background-position: top center,
+      left center,
+      bottom center;
+  background-repeat: no-repeat, no-repeat, no-repeat;
+  background-size: 100% 90px,
+      cover,
+      100% 68px;
+  padding: 20px 35px 20px 20px;
+  // box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+  // border: 1px solid rgba(78, 155, 248, 0.1);
   height: 450px;
 
   .table-title {