feat: 修改样式

src/components/LowDesign/src/LowTable/components/ColumnConfigDialog.vue

@@ -76,6 +76,7 @@ interface ColumnConfig {
 interface Props {
   modelValue: boolean
   columns: Record<string, any>
+  fieldList?: any[] // fieldList 数据，用于获取 exportEntity.isExport
 }
 
 const props = defineProps<Props>()
@@ -97,16 +98,36 @@ const initColumnConfig = () => {
   columnConfigList.value = Object.keys(props.columns)
     .map(key => {
       const column = props.columns[key]
+      const prop = column.prop || key
+      
+      // 如果 IndexedDB 没有记录（isExport === undefined），则从 fieldList 中获取 exportEntity.isExport
+      let isExport = column.isExport
+      debugger
+      if (isExport === undefined) {
+        // 查找 fieldList 中对应的字段
+        if (props.fieldList && Array.isArray(props.fieldList)) {
+          const field = props.fieldList.find((f: any) => f.fieldCode === prop)
+          if (field && field.exportEntity && field.exportEntity.isExport === 'Y') {
+            isExport = 'Y'
+          } else {
+            // 如果 fieldList 中没有找到或不是 'Y'，默认导出
+            isExport = 'N'
+          }
+        } else {
+          // 如果没有 fieldList，默认导出
+          isExport = 'Y'
+        }
+      }
+      
       return {
-        prop: column.prop || key,
+        prop,
         label: column.label || key,
         hide: column.hide || false,
         fixed: column.fixed || false,
         sortable: column.sortable || false,
         showColumn: column.showColumn !== false,
         sortNum: column.sortNum,
-        // 默认全部勾选导出，如果已有配置则使用配置值
-        isExport: column.isExport !== undefined ? column.isExport : 'Y'
+        isExport
       }
     })
     .sort((a, b) => {

src/components/LowDesign/src/LowTable/index.vue

@@ -41,7 +41,7 @@
       </div>
        <!-- 列配置抽屉 -->
        <ColumnConfigDialog v-if="props.model === 'default'" v-model="showColumnConfigDrawer"
-         :columns="tableOption.column" @confirm="handleColumnConfigConfirm" />
+         :columns="tableOption.column" :field-list="fieldListRef" @confirm="handleColumnConfigConfirm" />
       <div class="flex-1 w-100%" :class="{ 'table-content': tableInfo.tableType == 'treeAround' }" v-if="isInit">
         <!-- 主体表格 -->
         <avue-crud ref="crudRef" v-model="tableForm" v-model:search="tableSearch" v-bind="crudBind"

src/views/screen/powerMonitoring.vue

@@ -2,8 +2,13 @@
   <div class="big-screen-container">
     <!-- 标题栏 -->
     <div class="screen-header">
-      <h1 class="screen-title">动环监控大屏</h1>
-      <div class="screen-datetime">{{ currentDateTime }}</div>
+      <div class=" screen screen-left"></div>
+      <h1 class="screen screen-title">动环监控大屏</h1>
+      <div class="screen 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 +16,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 +28,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 +40,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 +156,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 +206,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 +628,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;
@@ -627,19 +643,26 @@ const handleResize = () => {
   align-items: center;
   margin-bottom: 20px;
   padding: 0 10px;
-
+  .screen {
+    width: 33.3%;
+  }
   .screen-title {
     font-size: 32px;
     font-weight: bold;
     color: #ffffff;
     margin: 0;
     letter-spacing: 2px;
+    text-align: center;
   }
 
   .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 +689,8 @@ const handleResize = () => {
 
   .card-title {
     font-size: 16px;
-    color: #8b9bb3;
+    // color: #8b9bb3;
+    color: #fff;
     margin-bottom: 15px;
   }
 
@@ -707,12 +731,62 @@ const handleResize = () => {
   gap: 20px;
 }
 
-.chart-card {
-  background: linear-gradient(135deg, #1a2940 0%, #0f1e2d 100%);
-  border-radius: 12px;
+.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-title,.card-title {
     padding: 20px;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
-  border: 1px solid rgba(78, 155, 248, 0.1);
+   }
+   .card-value {
+      // text-align: right;
+      padding-left: 20px;
+    }
+    .chart-title {
+      padding-left: 30px;
+    }
+}
+
+.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 {
+     padding: 20px;
+    }
+    .card-value {
+      padding-left: 20px;
+    }
+    .chart-title {
+      padding-left: 30px;
+    }
+}
+
+.chart-card {
+  // 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);
   height: 350px;
 
   .chart-title {
@@ -734,11 +808,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 {
@@ -866,6 +950,12 @@ const handleResize = () => {
       font-size: 16px;
     }
   }
+  .chart-left,.chart-right {
+    .chart-title {
+          padding-left: 25px;
+      }
+  }
+  
 
   .stat-card {
     padding: 25px;
@@ -894,6 +984,11 @@ const handleResize = () => {
       font-size: 15px;
     }
   }
+  .chart-left,.chart-right {
+    .chart-title {
+          padding-left: 20px;
+      }
+  }
 
   .stat-card {
     padding: 20px;