首页样式优化

ui/dasadmin/src/views/backend/dashboard.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="default-main">
+    <div class="default-main" ref="HomeHight">
         <el-row :gutter="20">
             <el-col :span="6">
                 <div class="grid-content ep-bg-purple">
@@ -55,7 +55,7 @@
                         <el-text class="mx-1 homelabel" style="margin-bottom: 0">今日运行状态</el-text>
                         <el-row :gutter="10" class="statusrow" style="margin-bottom: 0">
                             <el-col :span="12">
-                                <div class="status-panel">
+                                <div class="status-panel toal-panel">
                                     <img class="status-panel-pic" src="~assets/dashboard/status1.png" alt="" />
                                     <div class="status-base-main">
                                         <div>
@@ -66,7 +66,7 @@
                                 </div>
                             </el-col>
                             <el-col :span="12">
-                                <div class="status-panel">
+                                <div class="status-panel toal-panel">
                                     <img class="status-panel-pic" src="~assets/dashboard/status2.png" alt="" />
                                     <div class="status-base-main">
                                         <div>
@@ -199,12 +199,10 @@
 
                     <!--功率趋势-->
                     <div class="power panelBg" style="margin-bottom: 0; padding-bottom: 10px">
-                        <el-text class="mx-1 homelabel">功率趋势</el-text>
+                        <div class="cardLabel">功率趋势</div>
-                        <el-row :gutter="10">
+                        <div class="chartBox">
-                            <el-col class="lg-mb-20" :span="24">
+                            <div class="power-chart" ref="powerChartRef"></div>
-                                <div class="power-chart" ref="powerChartRef"></div>
+                        </div>
-                            </el-col>
-                        </el-row>
                     </div>
                 </div>
             </el-col>
@@ -219,75 +217,60 @@
                 </div>
             </el-col>
             <el-col :span="6">
-                <div class="grid-content ep-bg-purple">
+                <div class="grid-content ep-bg-purple cardContentRight">
                     <!--发电量概况-->
-                    <div class="summarize panelBg">
+                    <div class="summarize">
-                        <div class="summarize-title">
+                        <div class="cardLabel">发电量概况</div>
-                            <el-text class="mx-1 homelabel">发电量概况</el-text>
+                        <div class="summarize-panel-list">
-                            <!--                            <el-text class="mx-1" style="margin-bottom: 20px;">
+                            <div class="summarize-panel">
-                                当日发电量
+                                <div class="summarize-panel-pic">
-                                <span class="content-number" style="color: #0277B3;">{{realData.attributeMap.windfarmdayprodenergy}}</span>
+                                    <img src="~assets/dashboard/fdl1.png" alt="" />
-                                kWh
+                                </div>
-                            </el-text>-->
+                                <div class="summarize-panel-base">
+                                    <div>
+                                        <span class="content-number">{{ realData.attributeMap.windfarmdayprodenergy }}</span>
+                                    </div>
+                                    <div>kWh</div>
+                                    <div>日发电量</div>
+                                </div>
+                            </div>
+                            <div class="summarize-panel">
+                                <div class="summarize-panel-pic">
+                                    <img src="~assets/dashboard/fdl2.png" alt="" />
+                                </div>
+                                <div class="summarize-panel-base">
+                                    <div>
+                                        <span class="content-number">{{ realData.attributeMap.windfarmmonthprodenergy }}</span>
+                                    </div>
+                                    <div>kWh</div>
+                                    <div>月发电量</div>
+                                </div>
+                            </div>
+                            <div class="summarize-panel">
+                                <div class="summarize-panel-pic">
+                                    <img src="~assets/dashboard/fdl3.png" alt="" />
+                                </div>
+                                <div class="summarize-panel-base">
+                                    <div>
+                                        <span class="content-number">{{ realData.attributeMap.windfarmyearprodenergy }}</span>
+                                    </div>
+                                    <div>kWh</div>
+                                    <div>年发电量</div>
+                                </div>
+                            </div>
+                            <div class="summarize-panel">
+                                <div class="summarize-panel-pic">
+                                    <img src="~assets/dashboard/fdl4.png" alt="" />
+                                </div>
+                                <div class="summarize-panel-base">
+                                    <div>
+                                        <span class="content-number">{{ realData.attributeMap.windfarmtotalprodenergy }}</span>
+                                    </div>
+                                    <div>kWh</div>
+                                    <div>总发电量</div>
+                                </div>
+                            </div>
                         </div>
-                        <el-row :gutter="5">
-                            <el-col :span="6">
-                                <div class="summarize-panel">
-                                    <div class="summarize-panel-pic">
-                                        <img src="~assets/dashboard/fdl1.png" alt="" />
-                                    </div>
-                                    <div class="summarize-panel-base">
-                                        <div>
-                                            <span class="content-number">{{ realData.attributeMap.windfarmdayprodenergy }}</span>
-                                        </div>
-                                        <div><span>kWh</span></div>
-                                        <div><span>日发电量</span></div>
-                                    </div>
-                                </div>
-                            </el-col>
-                            <el-col :span="6">
-                                <div class="summarize-panel">
-                                    <div class="summarize-panel-pic">
-                                        <img src="~assets/dashboard/fdl2.png" alt="" />
-                                    </div>
-                                    <div class="summarize-panel-base">
-                                        <div>
-                                            <span class="content-number">{{ realData.attributeMap.windfarmmonthprodenergy }}</span>
-                                        </div>
-                                        <div><span>kWh</span></div>
-                                        <div><span>月发电量</span></div>
-                                    </div>
-                                </div>
-                            </el-col>
-                            <el-col :span="6">
-                                <div class="summarize-panel">
-                                    <div class="summarize-panel-pic">
-                                        <img src="~assets/dashboard/fdl3.png" alt="" />
-                                    </div>
-                                    <div class="summarize-panel-base">
-                                        <div>
-                                            <span class="content-number">{{ realData.attributeMap.windfarmyearprodenergy }}</span>
-                                        </div>
-                                        <div><span>kWh</span></div>
-                                        <div><span>年发电量</span></div>
-                                    </div>
-                                </div>
-                            </el-col>
-                            <el-col :span="6">
-                                <div class="summarize-panel">
-                                    <div class="summarize-panel-pic">
-                                        <img src="~assets/dashboard/fdl4.png" alt="" />
-                                    </div>
-                                    <div class="summarize-panel-base">
-                                        <div>
-                                            <span class="content-number">{{ realData.attributeMap.windfarmtotalprodenergy }}</span>
-                                        </div>
-                                        <div><span>kWh</span></div>
-                                        <div><span>总发电量</span></div>
-                                    </div>
-                                </div>
-                            </el-col>
-                        </el-row>
                     </div>
 
                     <!--发电量趋势-->
@@ -749,7 +732,7 @@ const inittrendChart = (type: 'day' | 'month') => {
         grid: {
             top: 30,
             right: 10,
-            bottom: 20,
+            bottom: 30,
             left: 25,
             borderColor: '#dadada',
         },
@@ -1138,24 +1121,6 @@ const tabhandleClick = () => {
         inittrendChart(trendChartType.value)
     })
 }
-
-onMounted(() => {
-    getAllChartData()
-    createScroll()
-    overviewList()
-    StatusListData()
-    autoUpdate()
-
-    equipList({ objectType: 10002 }).then((res) => {
-        res.data.map((item: any) => {
-            deviceCode.value.push(item.name)
-        })
-
-        getTableData(deviceCode.value)
-    })
-    useEventListener(window, 'resize', echartsResize)
-})
-
 const activeName = ref('first')
 //let autoUpdateTimer: any = null
 let autoUpdateForSecondTimer: any = null
@@ -1181,8 +1146,44 @@ const autoUpdate = () => {
         }, 60000 * 30)
     }
 }
+const HomeHight = ref()
+const computedHeight = reactive({
+    powerHeight: '298px',
+    centerHeight: '1100px',
+    alarmHeight: '350px',
+})
+const sizeChange = () => {
+    const rect = HomeHight.value?.getBoundingClientRect()
+    if (!rect) return
+    computedHeight.powerHeight = rect.height - 636 + 'px'
+    computedHeight.alarmHeight = rect.height - 580 + 'px'
+    computedHeight.centerHeight = rect.height - 0 + 'px'
+}
+
+onMounted(() => {
+    window.addEventListener('resize', sizeChange)
+    sizeChange()
+    getAllChartData()
+    createScroll()
+    overviewList()
+    StatusListData()
+    autoUpdate()
+
+    equipList({ objectType: 10002 }).then((res) => {
+        res.data.map((item: any) => {
+            deviceCode.value.push(item.name)
+        })
+
+        getTableData(deviceCode.value)
+    })
+    useEventListener(window, 'resize', echartsResize)
+
+})
+
+
 
 onUnmounted(() => {
+    window.removeEventListener('resize', sizeChange)
     clearInterval(timer)
     autoUpdateForSecondTimer && clearInterval(autoUpdateForSecondTimer)
     const chartKeys = Object.keys(state.charts) as Array<keyof typeof state.charts>
@@ -1193,32 +1194,37 @@ onUnmounted(() => {
 </script>
 
 <style scoped lang="scss">
-@media screen and (max-width: 1910px) {
+
-    .default-main {
+$marginNum: 10px;
-        .content-number {
+$labelHeight: 38px;
-            font-size: 16px !important;
+@mixin cardDefaultStyle {
-        }
+    margin-top: $marginNum;
-        .homelabel {
+    margin-bottom: $marginNum;
-            font-size: 16px !important;
+    padding: 10px;
-        }
+    border-radius: 10px;
-        .grid-content {
+    background-color: #fff;
-            .panelBg {
+}
-                padding: 10px !important;
+@mixin cardlabel {
-                margin-bottom: 10px !important;
+    .cardLabel {
-            }
+        width: 100%;
-        }
+        height: $labelHeight;
-        .col-center {
+        font-size: 18px;
-            padding: 0px !important;
+        line-height: 18px;
-        }
+        font-weight: 600;
+        color: #4e5969;
+        line-height: 38px;
+        padding-left: 10px;
     }
 }
 .default-main {
+    width: 100%;
     height: 100%;
+    min-height: 920px;
     padding: 0;
     margin: 0;
     color: #4e5969;
     background-color: #f2f3f5;
-    overflow-x: hidden;
+    overflow: hidden;
     .content-number {
         color: #333333;
         font-size: 20px;
@@ -1234,6 +1240,7 @@ onUnmounted(() => {
         display: block;
     }
     .grid-content {
+       /* overflow-x: hidden;*/
         width: 100%;
         height: 100%;
         .panelBg {
@@ -1243,6 +1250,9 @@ onUnmounted(() => {
             margin-bottom: 20px;
         }
         .overview {
+           /* @include cardDefaultStyle;
+            @include cardlabel;*/
+            min-height: 216px;
             .small-panel {
                 display: flex;
                 border: 1px solid #e1edf6;
@@ -1253,12 +1263,16 @@ onUnmounted(() => {
                     height: 36px;
                 }
                 .small-base {
+                    word-break: keep-all;
                     margin-left: 10px;
                     color: #2c3f5d;
                 }
             }
         }
         .status {
+           /* @include cardDefaultStyle;
+            @include cardlabel;*/
+            min-height: 374px;
             .statusrow {
                 margin-bottom: 10px;
             }
@@ -1276,6 +1290,7 @@ onUnmounted(() => {
                     height: 60px;
                 }
                 .status-base-main {
+                    word-break: keep-all;
                     margin-left: 10px;
                     line-height: 23px;
                     padding-top: 6px;
@@ -1295,46 +1310,82 @@ onUnmounted(() => {
             }
         }
         .power {
-            .power-chart {
+            @include cardDefaultStyle;
-                width: 100%;
+            @include cardlabel;
-                height: 288px;
+            width: 100%;
-            }
+            min-height: 298px;
-            @media screen and (max-width: 1920px) {
+            height: v-bind('computedHeight.powerHeight');
+            .chartBox{
+                height: calc(100% - $labelHeight);
                 .power-chart {
-                    height: 230px;
+                    width: 100%;
-                }
+                    height: 100%;
-            }
-            @media screen and (max-width: 1910px) {
-                .power-chart {
-                    height: 230px;
                 }
             }
+
+
         }
         .matrix {
+           /* @include cardDefaultStyle;
+            @include cardlabel;*/
             background: url('/@/assets/dashboard/bg1.png') no-repeat #ffffff;
             background-size: 100% 100%;
-            height: 100%;
+            min-height: 900px;
+            width: 100%;
+            height: v-bind('computedHeight.centerHeight');
+            margin-bottom: 0;
         }
         .summarize {
-            .summarize-title {
+            padding: 10px;
+            border-radius: 10px;
+            background-color: #fff;
+            margin-bottom: 20px;
+            word-break: keep-all;
+            /*@include cardDefaultStyle;*/
+            @include cardlabel;
+            min-height: 224px;
+            .summarize-panel-list {
+                width: 100%;
                 display: flex;
                 justify-content: space-between;
             }
             .summarize-panel {
-                background: #f0f6ff;
-                border-radius: 10px;
                 margin: 5px;
-                padding: 10px;
+                width: 25%;
-                .summarize-panel-pic {
+                display: flex;
-                    text-align: center;
+                padding: 20px 0;
-                }
+                flex-direction: column;
+                align-items: center;
+                background-color: #f0f6ff;
+                border-radius: 10px;
                 .summarize-panel-base {
-                    text-align: center;
+                    width: 100%;
+                    flex-direction: column;
+                    align-items: center;
+                    div {
+                        display: flex;
+                        justify-content: center;
+                        font-size: 14px;
+                        color: rgb(78, 89, 105);
+                        .content-number {
+                            color: #333333;
+                            font-size: 20px;
+                        }
+                    }
                 }
             }
         }
+        .cardContentRight {
+            width: 100%;
+            height: 100%;
+
+        }
+
         .trend {
-            height: 370px;
+           /* @include cardDefaultStyle;
+            @include cardlabel;*/
+            min-height: 300px;
+            height: 335px;
             overflow: hidden;
             .trend-tabs {
                 :deep(.el-tabs__item) {
@@ -1375,40 +1426,101 @@ onUnmounted(() => {
             }
         }
         .realPart {
-            height: 370px;
+           /* @include cardDefaultStyle;
-        }
+            @include cardlabel;*/
-        @media screen and (max-width: 1920px) {
+            /*height: 370px;*/
-           /* .matrix {
+            min-height: 350px;
-                height: 928px;
+            height: v-bind('computedHeight.alarmHeight');
-            }*/
-            .realPart {
-                height: 349px;
-            }
-            .trend {
-                height: 315px;
-            }
-        }
-        @media screen and (max-width: 1910px) {
-            .matrix {
-                height: 875px;
-            }
-            .realPart {
-                height: 343px;
-            }
-            .trend {
-                height: 315px;
-            }
         }
     }
 }
-@media screen and (max-width: 1910px) {
+
-    .default-main {
-        height: 878px;
-    }
-}
 @media screen and (max-width: 1920px) {
     .default-main {
-        height: 928px;
+            .trend {
+                height: 315px !important;
+            }
+        }
+}
+@media screen and (max-width: 1280px) {
+    .default-main {
+        .summarize {
+            .summarize-panel{
+                margin: 2px !important;
+            }
+        }
+    }
+}
+@media screen and (max-width: 1360px) {
+    .default-main {
+        .overview{
+            .small-panel{
+                .small-base {
+                    margin-left: 0px !important;
+                }
+            }
+        }
+    }
+}
+@media screen and (max-width: 1480px) {
+    .default-main {
+        font-size: 12px !important;
+        .overview{
+            .small-panel{
+                padding: 13px 0px !important;
+            }
+        }
+        .status {
+            .status-panel {
+                .status-base-main{
+                    margin-left: 5px !important;
+                }
+            }
+
+        }
+
+    }
+}
+@media screen and (max-width: 1680px) {
+    .default-main {
+        /*font-size: 12px !important;*/
+        .content-number {
+            font-size: 16px !important;
+        }
+
+        .homelabel {
+            font-size: 16px !important;
+            margin-bottom: 10px !important;
+        }
+        .grid-content {
+            .panelBg {
+                /* padding: 10px !important;*/
+                margin-bottom: 10px !important;
+            }
+            .summarize{
+                margin-bottom: 10px !important;
+            }
+        }
+        .toal-panel{
+            padding: 0 !important;
+            padding-bottom: 10px !important;
+        }
+        .col-center {
+            padding: 0 !important;
+        }
+        .matrix{
+            height: 908px !important;
+        }
+        :deep(.el-tabs__header) {
+            margin-top: -33px !important;
+        }
+        .overview{
+            .small-panel{
+                .small-base {
+                    margin-left: 5px !important;
+                }
+            }
+        }
     }
 }
 </style>

ui/dasadmin/src/views/backend/home/windMatrix.vue

@@ -148,7 +148,7 @@ const handleDoubleClick = (row) => {
         justify-content: center;
         align-items: center;
         width: 40px;
-        height: 40px;
+        height: 30px;
         vertical-align: middle;
     }
 
@@ -164,7 +164,7 @@ const handleDoubleClick = (row) => {
             justify-content: center;
             align-items: center;
             width: 40px;
-            height: 40px;
+            height: 30px;
             vertical-align: middle;
         }
         .fanlist-name{