From fc1910a9ba5832954d79ca075526735bd5fd2d1a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=AB=98=E4=BA=91=E9=B9=8F?= <ypgaop@isoftstone.com>
Date: Fri, 20 Dec 2024 17:16:57 +0800
Subject: [PATCH] =?UTF-8?q?=E5=8D=95=E9=A3=8E=E6=9C=BA:=E8=B0=83=E6=95=B4?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E5=B8=83=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/views/backend/WindBlower/index.vue    | 152 ++++++++++++------
 1 file changed, 106 insertions(+), 46 deletions(-)

diff --git a/ui/dasadmin/src/views/backend/WindBlower/index.vue b/ui/dasadmin/src/views/backend/WindBlower/index.vue
index eb9a8b6e..e94e6056 100644
--- a/ui/dasadmin/src/views/backend/WindBlower/index.vue
+++ b/ui/dasadmin/src/views/backend/WindBlower/index.vue
@@ -59,11 +59,16 @@
                         </div>
                     </div>
 
-                    <!--功率趋势-->
-                    <div class="power">
-                        <div class="cardLabel">功率趋势</div>
-                        <div class="chartBox">
-                            <div class="power-chart" ref="powerChartRef"></div>
+                    <!--温度-->
+                    <div class="temperatureList">
+                        <div class="chartPart-item" @click="openTemperature">
+                            <div class="chartParm" ref="temperatureChartRef1"></div>
+                        </div>
+                        <div class="chartPart-item" @click="openTemperature">
+                            <div class="chartParm" ref="temperatureChartRef2"></div>
+                        </div>
+                        <div class="chartPart-item" @click="openTemperature">
+                            <div class="chartParm" ref="temperatureChartRef3"></div>
                         </div>
                     </div>
                 </div>
@@ -137,16 +142,12 @@
                             <div @click="openSubSystem(11)" class="dot index-12"></div>
                         </el-tooltip>
                     </div>
-                    <!-- 温度 -->
+                    <!-- 功率趋势 -->
                     <div class="chartPart">
-                        <div class="chartPart-item" @click="openTemperature">
-                            <div class="chartParm" ref="temperatureChartRef1"></div>
-                        </div>
-                        <div class="chartPart-item" @click="openTemperature">
-                            <div class="chartParm" ref="temperatureChartRef2"></div>
-                        </div>
-                        <div class="chartPart-item" @click="openTemperature">
-                            <div class="chartParm" ref="temperatureChartRef3"></div>
+                        <div class="power">
+                            <div class="chartBox">
+                                <div class="power-chart" ref="powerChartRef"></div>
+                            </div>
                         </div>
                         <div class="chartPart-item item_bar">
                             <div class="frequencyChart" ref="frequencyChartRef"></div>
@@ -237,12 +238,12 @@
                 <el-scrollbar>
                     <div class="PitchPart">
                         <!-- <el-row > -->
-                            <!-- <el-col :span="12"> -->
-                                <div class="Pitchitem" v-for="item in subSystemDataList" :key="item.name">
-                                    <span class="PitchitemLeft">{{ item.name }}</span>
-                                    <span class="PitchitemRight">{{ item.value }}</span>
-                                </div>
-                            <!-- </el-col> -->
+                        <!-- <el-col :span="12"> -->
+                        <div class="Pitchitem" v-for="item in subSystemDataList" :key="item.name">
+                            <span class="PitchitemLeft">{{ item.name }}</span>
+                            <span class="PitchitemRight">{{ item.value }}</span>
+                        </div>
+                        <!-- </el-col> -->
                         <!-- </el-row> -->
                     </div>
                 </el-scrollbar>
@@ -382,8 +383,18 @@ const initpowerChart = () => {
     const powerChart = state.charts.powerChart ?? echarts.init(powerChartRef.value as unknown as HTMLElement)
 
     const option = {
+        title: {
+            show: true,
+            text: '功率趋势',
+            textStyle: {
+                color: '#4E5969',
+                fontSize: 14,
+                fontFamily: 'PingFangSC-Semibold',
+            },
+            padding: 10,
+        },
         grid: {
-            top: 50,
+            top: 70,
             right: 23,
             bottom: 10,
             left: 18,
@@ -485,6 +496,7 @@ const initpowerChart = () => {
             textStyle: {
                 color: '#73767a',
             },
+            top: 20,
         },
         series: [
             {
@@ -715,17 +727,21 @@ const initTemperatureChart = () => {
         const option = {
             grid: {
                 top: 30,
-                //right: 100,
+                right: 5,
                 bottom: 0,
                 left: -100,
                 containLabel: true,
             },
             xAxis: {
-                type: 'category',
+                // type: 'category',
+                type: 'value',
+
                 show: false,
             },
             yAxis: {
-                type: 'value',
+                // type: 'value',
+                type: 'category',
+
                 show: false,
             },
             series: [
@@ -735,8 +751,9 @@ const initTemperatureChart = () => {
                     type: 'bar',
                     label: {
                         show: true,
-                        align: 'center',
-                        formatter: `{a|{c}}\n{b|{a}}`,
+                        align: 'left',
+                        // verticalAlign:'top',
+                        formatter: `{b|{a}}  {a|{c}}`,
                         rich: {
                             a: {
                                 color: '#333333',
@@ -747,12 +764,14 @@ const initTemperatureChart = () => {
                                 fontSize: 14,
                             },
                         },
-                        position: 'insideBottom',
-                        offset: [62, 0],
+                        width: 100,
+                        height: 22,
+                        position: 'insideLeft',
+                        offset: [85, -22],
                     },
                     itemStyle: {
                         color: '#048bd2',
-                        borderRadius: [0, 0, 4, 4],
+                        borderRadius: [0, 4, 4, 0],
                     },
                     barWidth: 20,
                 },
@@ -835,7 +854,7 @@ const initFrequencyChart = () => {
                     fontSize: 14,
                     fontFamily: 'PingFangSC-Semibold',
                 },
-                padding: 15,
+                padding: 10,
             },
         ],
         polar: {
@@ -1241,8 +1260,9 @@ const getThisDayChartDataForMinute = () => {
 const getAllChartData = (type: ('power' | 'trend' | 'frequency')[] = ['power', 'trend', 'frequency']) => {
     if (type.includes('power')) {
         getThisDayChartData().then(() => {
-            initpowerChart()
-            // initTemperatureChart()
+            nextTick(() => {
+                initpowerChart()
+            })
         })
     }
     // if (type.includes('trend')) {
@@ -1254,7 +1274,9 @@ const getAllChartData = (type: ('power' | 'trend' | 'frequency')[] = ['power', '
     // }
     if (type.includes('frequency')) {
         getThisDayChartDataForMinute().then((res) => {
-            initFrequencyChart()
+            nextTick(() => {
+                initFrequencyChart()
+            })
         })
     }
 }
@@ -1609,23 +1631,50 @@ $labelHeight: 24px;
                 }
             }
         }
-        .power {
+        .temperatureList {
             @include cardDefaultStyle;
             @include cardlabel;
+            display: flex;
+            flex-direction: column;
+            justify-content: space-around;
             margin: 10px 0;
             width: 100%;
             height: calc(40% - 20px);
-            // min-height: 285px;
-            // height: v-bind('computedHeight.powerHeight');
-            .chartBox {
+            .chartPart-item {
+                // margin: 5px 0;
                 width: 100%;
-                height: calc(100% - $labelHeight);
-                .power-chart {
+                height: calc(33.3% - 10px);
+                background: #f0f6ff;
+                border-radius: 8px;
+                // text-align: center;
+                color: #4e5969;
+                .chartParm {
+                    width: 100%;
+                    height: 100%;
+                }
+                .frequencyChart {
                     width: 100%;
                     height: 100%;
                 }
             }
         }
+        // .power {
+        //     @include cardDefaultStyle;
+        //     @include cardlabel;
+        //     margin: 10px 0;
+        //     width: 100%;
+        //     height: calc(40% - 20px);
+        //     // min-height: 285px;
+        //     // height: v-bind('computedHeight.powerHeight');
+        //     .chartBox {
+        //         width: 100%;
+        //         height: calc(100% - $labelHeight);
+        //         .power-chart {
+        //             width: 100%;
+        //             height: 100%;
+        //         }
+        //     }
+        // }
     }
     .cardContentCenter {
         @include cardDefaultStyle;
@@ -1846,18 +1895,29 @@ $labelHeight: 24px;
             &:hover {
                 cursor: pointer;
             }
+            .power {
+                margin-bottom: 5px;
+                width: 60%;
+                height: 100%;
+                background-color: #f0f6ff;
+                border-radius: 8px;
+                .chartBox {
+                    width: 100%;
+                    height: 100%;
+                    .power-chart {
+                        width: 100%;
+                        height: 100%;
+                    }
+                }
+            }
+
             .chartPart-item {
-                margin: 5px;
-                width: 25%;
+                margin: 0 0 5px 5px;
+                // width: 25%;
                 height: 100%;
                 background: #f0f6ff;
                 border-radius: 8px;
-                // text-align: center;
                 color: #4e5969;
-                .chartParm {
-                    width: 100%;
-                    height: 100%;
-                }
                 .frequencyChart {
                     width: 100%;
                     height: 100%;