+
@@ -151,6 +155,10 @@ interface ParkInfo {
// 当前日期时间
const currentDateTime = ref('');
+const currentDate = ref
('')
+const currentWeek = ref('')
+const currentTime = ref('')
+
// 统计数据
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,53 @@ 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-title,.card-title {
+ padding: 20px;
+ }
+}
+
+.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 {
+ // text-align: right;
+ padding-left: 20px;
+ }
+}
+
.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 +795,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 {