From 8c7e57d3b839cd07fe8b532ee7080aa3e8d627da Mon Sep 17 00:00:00 2001
From: fengrong <Hi84805353>
Date: Wed, 13 Nov 2024 17:28:29 +0800
Subject: [PATCH] =?UTF-8?q?=E9=A6=96=E9=A1=B5=EF=BC=9A=E7=BB=91=E5=AE=9A?=
 =?UTF-8?q?=E5=8F=B6=E8=BD=AE=E8=BD=AC=E9=80=9F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ui/dasadmin/src/views/backend/dashboard.vue   | 57 ++++++++++++-------
 .../src/views/backend/home/windMatrix.vue     | 41 +++++++++----
 2 files changed, 69 insertions(+), 29 deletions(-)

diff --git a/ui/dasadmin/src/views/backend/dashboard.vue b/ui/dasadmin/src/views/backend/dashboard.vue
index 413c6bb8..fa9750f4 100644
--- a/ui/dasadmin/src/views/backend/dashboard.vue
+++ b/ui/dasadmin/src/views/backend/dashboard.vue
@@ -17,7 +17,7 @@
                                         <div>功率</div>
                                     </div>
                                 </div>
-                                <div :sm="24" :lg="6" class="small-panel">
+                                <div :sm="24" :lg="6" class="small-panel windtitle">
                                     <img class="small-panel-pic" src="~assets/dashboard/viewW.png" alt="" />
                                     <div class="small-base">
                                         <div>
@@ -504,6 +504,7 @@ const StatusListData = () => {
                         ikwhthisday: item.attributeMap.ikwhthisday,
                         iturbineoperationmode: state,
                         locked: item.attributeMap.locked,
+                        irotorspeed:item.attributeMap.irotorspeed,
                     },
                 }
             })
@@ -1157,8 +1158,8 @@ const computedHeight = reactive({
 const sizeChange = () => {
     const rect = HomeHight.value?.getBoundingClientRect()
     if (!rect) return
-    computedHeight.powerHeight = rect.height - 636 + 'px'
-    computedHeight.alarmHeight = rect.height - 580 + 'px'
+    computedHeight.powerHeight = rect.height - 630 + 'px'
+    computedHeight.alarmHeight = rect.height - 578 + 'px'
     computedHeight.centerHeight = rect.height - 0 + 'px'
     if (window.screen.width < 1360) {
         computedHeight.alarmHeight = '200px'
@@ -1211,7 +1212,6 @@ $labelHeight: 38px;
         width: 100%;
         height: $labelHeight;
         font-size: 18px;
-        line-height: 18px;
         font-weight: 600;
         color: #4e5969;
         line-height: 38px;
@@ -1220,13 +1220,18 @@ $labelHeight: 38px;
 }
 .default-main {
     width: 100%;
-    // height: 100%;
-    // min-height: 920px;
+    height: 100%;
+    min-height: 920px;
     padding: 0;
     margin: 0;
     color: #4e5969;
     background-color: #f2f3f5;
-    overflow: hidden;
+    .el-row{
+        width: calc(100% - 0px);
+        .el-col{
+            height: calc(100% - 10px);
+        }
+    }
     .content-number {
         color: #333333;
         font-size: 20px;
@@ -1315,7 +1320,7 @@ $labelHeight: 38px;
             @include cardDefaultStyle;
             @include cardlabel;
             width: 100%;
-            min-height: 298px;
+            min-height: 290px;
             height: v-bind('computedHeight.powerHeight');
             .chartBox {
                 height: calc(100% - $labelHeight);
@@ -1326,14 +1331,15 @@ $labelHeight: 38px;
             }
         }
         .matrix {
-            /* @include cardDefaultStyle;
-            @include cardlabel;*/
             background: url('/@/assets/dashboard/bg1.png') no-repeat #ffffff;
             background-size: 100% 100%;
             min-height: 900px;
             width: 100%;
             height: v-bind('computedHeight.centerHeight');
             margin-bottom: 0;
+            .el-scrollbar{
+                height: calc(100% - 20px);
+            }
         }
         .summarize {
             padding: 10px;
@@ -1341,7 +1347,6 @@ $labelHeight: 38px;
             background-color: #fff;
             margin-bottom: 20px;
             word-break: keep-all;
-            /*@include cardDefaultStyle;*/
             @include cardlabel;
             min-height: 224px;
             .summarize-panel-list {
@@ -1375,14 +1380,8 @@ $labelHeight: 38px;
                 }
             }
         }
-        .cardContentRight {
-            width: 100%;
-            height: 100%;
-        }
 
         .trend {
-            /* @include cardDefaultStyle;
-            @include cardlabel;*/
             min-height: 300px;
             height: 335px;
             overflow: hidden;
@@ -1428,12 +1427,13 @@ $labelHeight: 38px;
             /* @include cardDefaultStyle;
             @include cardlabel;*/
             /*height: 370px;*/
-            min-height: 350px;
+            min-height: 340px;
             height: v-bind('computedHeight.alarmHeight');
         }
     }
 }
 
+
 @media screen and (max-width: 1920px) {
     .default-main {
         .trend {
@@ -1443,20 +1443,36 @@ $labelHeight: 38px;
 }
 @media screen and (max-width: 1280px) {
     .default-main {
+        /*height: auto !important;*/
         overflow: none;
+        .windtitle{
+            margin-bottom: 10px;
+        }
         .summarize {
             .summarize-panel {
                 margin: 2px !important;
+                .summarize-panel-base {
+                    white-space: normal !important;
+                }
             }
         }
     }
 }
+@media screen and (max-width: 1366px) {
+    .default-main {
+        .summarize {
+            word-break: break-all !important;
+        }
+    }
+}
 @media screen and (max-width: 1360px) {
     .default-main {
+        font-size: 11px !important;
         .overview {
             .small-panel {
                 .small-base {
                     margin-left: 0px !important;
+                    font-size: 11px !important;
                 }
             }
         }
@@ -1491,6 +1507,9 @@ $labelHeight: 38px;
             margin-bottom: 10px !important;
         }
         .grid-content {
+            .cardLabel{
+                font-size: 16px !important;
+            }
             .panelBg {
                 /* padding: 10px !important;*/
                 margin-bottom: 10px !important;
@@ -1507,7 +1526,7 @@ $labelHeight: 38px;
             padding: 0 !important;
         }
         .matrix {
-            height: 908px !important;
+            height: 900px !important;
         }
         :deep(.el-tabs__header) {
             margin-top: -33px !important;
diff --git a/ui/dasadmin/src/views/backend/home/windMatrix.vue b/ui/dasadmin/src/views/backend/home/windMatrix.vue
index e5c5c52f..6f509c0d 100644
--- a/ui/dasadmin/src/views/backend/home/windMatrix.vue
+++ b/ui/dasadmin/src/views/backend/home/windMatrix.vue
@@ -28,7 +28,7 @@
                                     <div class="fanlist-pic">
                                         <div class="mask">
                                             <div class="heart"><img src="~assets/dashboard/leaf2.png" alt=""></div>
-                                            <div class="leafs" :style="animationDuration">
+                                            <div class="leafs" :style="getAnimationStyle(item)">
                                                 <div class="leaf_1"> <img src="~assets/dashboard/leaf1.png" alt=""></div>
                                                 <div class="leaf_2"><img src="~assets/dashboard/leaf1.png" alt=""></div>
                                                 <div class="leaf_3"><img src="~assets/dashboard/leaf1.png" alt=""></div>
@@ -68,7 +68,7 @@
 </template>
 
 <script setup lang="ts">
-import {ref,reactive,defineProps, defineEmits} from 'vue'
+import {defineProps, defineEmits,onMounted,onUnmounted} from 'vue'
 import { useRouter } from 'vue-router'
 import { adminBaseRoutePath } from '/@/router/static/adminBase'
 
@@ -79,11 +79,19 @@ const props = defineProps({
         default: () => []
     }
 })
-const emit = defineEmits(['StatusListData'])
-const rotationspeed = 4;
-const animationDuration=reactive({
-    'animation-duration': rotationspeed+'s',
-})
+
+
+const getAnimationStyle = (item) => {
+    const irotorspeed = item.attributeMap?.irotorspeed ?? 0;
+    const animationDuration = 1 / irotorspeed * 10;
+    return {
+        'animation-duration': `${animationDuration}s`,
+        'animation-timing-function': 'linear',
+        'animation-iteration-count': 'infinite',
+        'animation-direction': 'normaL',
+    };
+};
+
 const handleDoubleClick = (row) => {
     if (!router.hasRoute('windTurbine')) {
         router.addRoute('admin', {
@@ -108,7 +116,6 @@ const handleDoubleClick = (row) => {
     })
 }
 
-
 </script>
 
 <style scoped lang="scss">
@@ -241,8 +248,8 @@ const handleDoubleClick = (row) => {
                             height: 46px;
                             /*animation-duration: 1s;*/
                             animation-name: leafRotate;
-                            animation-iteration-count: infinite;
-                            animation-timing-function: linear;
+                            /*animation-iteration-count: infinite;
+                            animation-timing-function: linear;*/
                             .leaf_1 {
                                 width: 9px;
                                 height: 19px;
@@ -299,4 +306,18 @@ const handleDoubleClick = (row) => {
         }
     }
 
+@media screen and (max-width: 1680px) {
+    .FanList-content{
+        .FanList-panel{
+            .fanlist-text{
+                font-size: 12px !important;
+                .content-number{
+                    font-size: 16px !important;
+                }
+            }
+
+        }
+    }
+}
+
 </style>