发电能力分析增加优化建议报告，功率预测增加极端天气

.env.development

@@ -18,7 +18,7 @@ VUE_APP_LOGIN_URL = 'http://192.168.0.232:48080'
 # 马力军
 # VUE_APP_GENERAT_URL = 'http://192.168.2.45:9002'
 # 王波
-VUE_APP_GENERAT_URL = 'http://192.168.0.101:9002'
+VUE_APP_GENERAT_URL = 'http://192.168.2.232:9002'
 
 # 智能报表
 # VUE_APP_REPORT_URL = 'http://192.168.0.102:9001'

components.d.ts

@@ -20,7 +20,7 @@ declare module 'vue' {
     CalculationModelConfiguration: typeof import('./src/components/powerPredictionComponent/configPage/calculationModelConfiguration.vue')['default']
     Card1: typeof import('./src/components/coms/cards/card-1.vue')['default']
     CheckTable: typeof import('./src/components/coms/table/check-table.vue')['default']
-    Col: typeof import('./src/components/coms/grid/col.vue')['default']
+    Col: typeof import('./src/components/homeComponent/grid/col.vue')['default']
     CollapseList: typeof import('./src/components/coms/collapse/collapse-list.vue')['default']
     CollectionLineManagement: typeof import('./src/components/powerPredictionComponent/configPage/stationFlode/collectionLineManagement.vue')['default']
     CommonHeaders: typeof import('./src/components/commonHeaders.vue')['default']
@@ -154,7 +154,7 @@ declare module 'vue' {
     RoleManagement: typeof import('./src/components/powerPredictionComponent/configPage/roleManagement.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
-    Row: typeof import('./src/components/coms/grid/row.vue')['default']
+    Row: typeof import('./src/components/homeComponent/grid/row.vue')['default']
     SBQ: typeof import('./src/components/powerPredictionComponent/configPage/configDesignVue/SBQ.vue')['default']
     ScatterLineChart: typeof import('./src/components/chart/combination/scatter-line-chart.vue')['default']
     SimpleLineChart: typeof import('./src/components/chart/line/simple-line-chart.vue')['default']

src/components/powerPredictionComponent/homePageAssembly/weatherDetail.vue

@@ -7,38 +7,45 @@
                     <template #label>
                         <div class="tabLabel">
                             <p>{{item.name}}</p>
-                            <p>{{item.data[0].name}}</p>
+                            <!-- <p>{{item.data[0].name}}</p> -->
                         </div>
                     </template>
                     <div class="tabMain">
-                        <img :src="item.data[0].img" alt="">
-                        <div class="tabMain_msg">
-                            <div class="detailsMsg">{{item.data[0].msg}}</div>
-                            <div class="detailsTime">
-                                <div class="detailN">
-                                    <span>预警时间:</span>
-                                    <span>{{item.weather.update_time}};</span>
+                        <div class="extremeMsg">
+                            <div class="extremeW" :style="havePicPos(item.alertObj.alertTitle)"
+                                v-if="showColor(item.alertObj.alertTitle)"></div>
+                            <img :src="item.data[0].img" alt="" v-else>
+                            <div class="tabMain_msg">
+                                <!-- <div class="detailsMsg">{{item.data[0].msg}}</div> -->
+                                <div class="detailsTimesv">
+                                    <div class="detailN">
+                                        <span>极端天气预警:</span>
+                                        <span
+                                            :style="haveColor(item.alertObj.alertTitle)">{{item.alertObj.alertTitle}};</span>
+                                    </div>
+                                </div>
+
+                                <div class="detailsTime">
+                                    <div class="detailN">
+                                        <span>温度:</span>
+                                        <span>{{item.weatherDetail.temperature_day || item.weatherDetail.temperature}}℃;</span>
+                                    </div>
+                                    <div class="detailN">
+                                        <span>湿度:</span>
+                                        <span>{{item.weather.humidity}}%;</span>
+                                    </div>
+                                    <div class="detailN">
+                                        <span>气压:</span>
+                                        <span>{{item.weather.pressure}}kPa;</span>
+                                    </div>
+                                    <div class="detailN">
+                                        <span>风力:</span>
+                                        <span>{{item.weather.wind_power}};</span>
+                                    </div>
                                 </div>
                             </div>
                         </div>
-                    </div>
-                    <div class="detailsTime">
-                        <div class="detailN">
-                            <span>温度:</span>
-                            <span>{{item.weatherDetail.temperature_day || item.weatherDetail.temperature}}℃;</span>
-                        </div>
-                        <div class="detailN">
-                            <span>湿度:</span>
-                            <span>{{item.weather.humidity}}%;</span>
-                        </div>
-                        <div class="detailN">
-                            <span>气压:</span>
-                            <span>{{item.weather.pressure}}kPa;</span>
-                        </div>
-                        <div class="detailN">
-                            <span>风力:</span>
-                            <span>{{item.weather.wind_power}};</span>
-                        </div>
+                        <div class="detailsMsg">{{item.alertObj.alertMessage}}</div>
                     </div>
                 </el-tab-pane>
             </el-tabs>
@@ -78,6 +85,8 @@
     import rain from '@/assets/weather/rain.png'
     import snow from '@/assets/weather/snow.png'
     import thunder from '@/assets/weather/thunder.png'
+
+    import picPosJson from './weatherPicPos.json'
     export default {
         data() {
             return {
@@ -85,13 +94,36 @@
                 title: '',
                 messageAll: [],
                 activeName: '',
-                statusName: ''
+                statusName: '',
+                //天气与图片位置对应
+                weaPic: picPosJson.data
             }
         },
         methods: {
             handleClick(tab, event) {
                 console.log(tab, event);
                 this.activeName = tab.props.name
+            },
+            haveColor(title) {
+                let str = 'margin-left:5px;font-weight: 600;color:'
+                this.weaPic.forEach(it => {
+                    if (title.indexOf(it.name) != -1) {
+                        str += it.status
+                    }
+                })
+                return str
+            },
+            showColor(str) {
+                return str.indexOf("预警") !== -1
+            },
+            havePicPos(title) {
+                let str = 'background-position:'
+                this.weaPic.forEach(it => {
+                    if (title.indexOf(it.name) != -1) {
+                        str += it.position
+                    }
+                })
+                return str
             }
         }
     }
@@ -137,45 +169,66 @@
 
                         .el-tabs__content {
                             .tabMain {
-                                display: flex;
+                                padding-right: 20px;
+
+                                .extremeMsg {
+                                    display: flex;
+                                    margin-bottom: 10px;
+
+                                    .extremeW {
+                                        margin: 15px 0 0 20px;
+                                        width: 110px;
+                                        height: 100px;
+                                        background-image: url(../../../assets/weather/extremeWeather.png);
+                                        // background-position: -11px -19px;
+                                    }
 
-                                img {
-                                    width: 180px;
-                                    height: 180px;
-                                    margin: 30px 0 0 20px;
-                                }
 
-                                .tabMain_msg {
-                                    margin: 30px 0 0 20px;
+                                    .tabMain_msg {
+                                        margin: 22px 0 0 10px;
 
-                                    .detailsMsg {
-                                        height: 180px;
-                                        font-size: 18px;
-                                        line-height: 30px;
-                                        text-indent: 2em;
-                                    }
-
-                                    .detailsTime {
-                                        margin-top: 20px;
-                                        font-size: 18px;
-                                        display: flex;
-                                        justify-content: end;
+                                        .detailsTimesv {
+                                            margin-bottom: 20px;
+                                            font-size: 18px;
+                                            display: flex;
+                                            justify-content: start;
 
-                                        .detailN {
-                                            margin-right: 20px;
+                                            .detailN {
+                                                margin-right: 20px;
 
-                                            span:nth-of-type(1) {
-                                                font-weight: bold;
+                                                span:nth-of-type(1) {
+                                                    font-weight: bold;
+                                                }
                                             }
                                         }
+
                                     }
+
                                 }
+
+
+                                .detailsMsg {
+                                    overflow-y: auto;
+                                    height: 230px;
+                                    font-size: 18px;
+                                    line-height: 30px;
+                                    text-indent: 2em;
+                                    padding-left: 30px;
+                                }
+
+
+                                img {
+                                    width: 120px;
+                                    height: 120px;
+                                    margin: 30px 0 0 20px;
+                                }
+
                             }
 
                             .detailsTime {
                                 display: flex;
                                 justify-content: end;
-                                margin-top: 20px;
+                                margin-top: 10px;
                                 font-size: 18px;
 
                                 .detailN {

src/components/powerPredictionComponent/homePageAssembly/weatherPicPos.json

@@ -0,0 +1,270 @@
+{
+    "data": [
+        {
+            "name": "台风蓝色",
+            "status": "blue",
+            "position": "-11px -19px"
+        },
+        {
+            "name": "暴雨蓝色",
+            "status": "blue",
+            "position": "-134px -19px"
+        },
+        {
+            "name": "高温蓝色",
+            "status": "blue",
+            "position": "-264px -19px"
+        },
+        {
+            "name": "寒冷蓝色",
+            "status": "blue",
+            "position": "-393px -19px"
+        },
+        {
+            "name": "大雾蓝色",
+            "status": "blue",
+            "position": "-518px -19px"
+        },
+        {
+            "name": "灰霾蓝色",
+            "status": "blue",
+            "position": "-11px -145px"
+        },
+        {
+            "name": "雷雨大风蓝色",
+            "status": "blue",
+            "position": "-134px -145px"
+        },
+        {
+            "name": "冰雹蓝色",
+            "status": "blue",
+            "position": "-264px -145px"
+        },
+        {
+            "name": "道路结冰蓝色",
+            "status": "blue",
+            "position": "-393px -145px"
+        },
+        {
+            "name": "森林火灾蓝色",
+            "status": "blue",
+            "position": "-518px -145px"
+        },
+        {
+            "name": "暴雪蓝色",
+            "status": "blue",
+            "position": "-11px -280px"
+        },
+        {
+            "name": "大风蓝色",
+            "status": "blue",
+            "position": "-135px -280px"
+        },
+        {
+            "name": "雷电蓝色",
+            "status": "blue",
+            "position": "-260px -280px"
+        },
+
+
+        {
+            "name": "台风黄色",
+            "status": "yellow",
+            "position": "-11px -425px"
+        },
+        {
+            "name": "暴雨黄色",
+            "status": "yellow",
+            "position": "-134px -425px"
+        },
+        {
+            "name": "高温黄色",
+            "status": "yellow",
+            "position": "-264px -425px"
+        },
+        {
+            "name": "寒冷黄色",
+            "status": "yellow",
+            "position": "-393px -425px"
+        },
+        {
+            "name": "大雾黄色",
+            "status": "yellow",
+            "position": "-518px -425px"
+        },
+        {
+            "name": "灰霾黄色",
+            "status": "yellow",
+            "position": "-11px -552px"
+        },
+        {
+            "name": "雷雨大风黄色",
+            "status": "yellow",
+            "position": "-134px -552px"
+        },
+        {
+            "name": "冰雹黄色",
+            "status": "yellow",
+            "position": "-264px -552px"
+        },
+        {
+            "name": "道路结冰黄色",
+            "status": "yellow",
+            "position": "-393px -552px"
+        },
+        {
+            "name": "森林火灾黄色",
+            "status": "yellow",
+            "position": "-518px -552px"
+        },
+        {
+            "name": "暴雪黄色",
+            "status": "yellow",
+            "position": "-11px -690px"
+        },
+        {
+            "name": "大风黄色",
+            "status": "yellow",
+            "position": "-135px -690px"
+        },
+        {
+            "name": "雷电黄色",
+            "status": "yellow",
+            "position": "-260px -690px"
+        },
+
+
+        {
+            "name": "台风橙色",
+            "status": "orange",
+            "position": "-11px -833px"
+        },
+        {
+            "name": "暴雨橙色",
+            "status": "orange",
+            "position": "-134px -833px"
+        },
+        {
+            "name": "高温橙色",
+            "status": "orange",
+            "position": "-264px -833px"
+        },
+        {
+            "name": "寒冷橙色",
+            "status": "orange",
+            "position": "-393px -833px"
+        },
+        {
+            "name": "大雾橙色",
+            "status": "orange",
+            "position": "-518px -833px"
+        },
+        {
+            "name": "灰霾橙色",
+            "status": "orange",
+            "position": "-11px -957px"
+        },
+        {
+            "name": "雷雨大风橙色",
+            "status": "orange",
+            "position": "-134px -957px"
+        },
+        {
+            "name": "冰雹橙色",
+            "status": "orange",
+            "position": "-264px -957px"
+        },
+        {
+            "name": "道路结冰橙色",
+            "status": "orange",
+            "position": "-393px -957px"
+        },
+        {
+            "name": "森林火灾橙色",
+            "status": "orange",
+            "position": "-518px -957px"
+        },
+        {
+            "name": "暴雪橙色",
+            "status": "orange",
+            "position": "-11px -1085px"
+        },
+        {
+            "name": "大风橙色",
+            "status": "orange",
+            "position": "-135px -1085px"
+        },
+        {
+            "name": "雷电橙色",
+            "status": "orange",
+            "position": "-260px -1085px"
+        },
+
+
+        {
+            "name": "台风红色",
+            "status": "red",
+            "position": "-11px -1224px"
+        },
+        {
+            "name": "暴雨红色",
+            "status": "red",
+            "position": "-134px -1224px"
+        },
+        {
+            "name": "高温红色",
+            "status": "red",
+            "position": "-264px -1224px"
+        },
+        {
+            "name": "寒冷红色",
+            "status": "red",
+            "position": "-393px -1224px"
+        },
+        {
+            "name": "大雾红色",
+            "status": "red",
+            "position": "-518px -1224px"
+        },
+        {
+            "name": "灰霾红色",
+            "status": "red",
+            "position": "-11px -1350px"
+        },
+        {
+            "name": "雷雨大风红色",
+            "status": "red",
+            "position": "-134px -1350px"
+        },
+        {
+            "name": "冰雹红色",
+            "status": "red",
+            "position": "-264px -1350px"
+        },
+        {
+            "name": "道路结冰红色",
+            "status": "red",
+            "position": "-393px -1350px"
+        },
+        {
+            "name": "森林火灾红色",
+            "status": "red",
+            "position": "-518px -1350px"
+        },
+        {
+            "name": "暴雪红色",
+            "status": "red",
+            "position": "-11px -1470px"
+        },
+        {
+            "name": "大风红色",
+            "status": "red",
+            "position": "-135px -1470px"
+        },
+        {
+            "name": "雷电红色",
+            "status": "red",
+            "position": "-260px -1470px"
+        }
+    ]
+}

src/router/index.js

@@ -358,6 +358,15 @@ const routes = [
         component: () =>
             import("../views/generatingCapacity/jjyxReport/index.vue"),
     },
+    {
+        path: "/generatingCap/dataAnalysis/yhjyReport",
+        name: "yhjyReport",
+        meta: {
+            title: "优化建议报告",
+        },
+        component: () =>
+            import("../views/generatingCapacity/yhjyReport/index.vue"),
+    },
     // 综合报警
     // {
     //     path: "/integratedAlarm",

src/themeBlue.less

@@ -25,24 +25,25 @@
 @jbs5: linear-gradient(to right, #f1880c, #ffd179);
 @jbs6: linear-gradient(to right, #ff293d, #ff9ea7);
 
-@green          : #05bb4c;
-@gray           : #606769;
-@gray-l         : #000;
+@green : #05bb4c;
+@gray : #606769;
+@gray-l : #000;
 @picker-bg-color: fade(rgb(3, 7, 19), 95);
 
-@primary-color    : #2568c4;
-@border-color     : transparent;
-@text-color       : #fff;
+@primary-color : #2568c4;
+@border-color : transparent;
+@text-color : #fff;
 @placeholder-color: #c0c4cc;
-@disabled-color   : #c0c4cc;
-@disabled-bg      : #000;
+@disabled-color : #c0c4cc;
+@disabled-bg : #000;
 
 .blueStyle {
     #app {
         #screen {
 
             // /generatingCap/dataAnalysis/jjyxReport
-            .analysisReport {
+            .analysisReport,
+            .optimizationSuggestions {
                 .main_top {
                     background: #fff;
 
@@ -90,7 +91,7 @@
                 .el-table,
                 .custom-table.el-table {
                     background: rgb(3, 7, 19);
-                    border    : 1px solid rgba(33, 105, 195, 0.5) !important; // 包裹表格父元素边框
+                    border: 1px solid rgba(33, 105, 195, 0.5) !important; // 包裹表格父元素边框
 
                     .el-table__row {
                         background: transparent; // 表格底色，因表格上层有其他颜色遮挡所以视觉效果看起来仿佛是表格边框
@@ -128,22 +129,22 @@
 
                     tr {
                         td {
-                            color           : #000;
+                            color: #000;
                             background-color: #fff; // 表格基数行背景颜色
                         }
 
                         &:hover td {
-                            color           : #1890ff; // 表格基数行 hover 文字颜色
+                            color: #1890ff; // 表格基数行 hover 文字颜色
                             background-color: #fff !important; // 表格基数行 hover 背景颜色
                         }
                     }
 
                     td {
-                        border     : 0px; // 表格内部除了最后一行底部以外的上下左右边框
-                        padding    : 0;
-                        height     : 37px;
+                        border: 0px; // 表格内部除了最后一行底部以外的上下左右边框
+                        padding: 0;
+                        height: 37px;
                         line-height: 37px;
-                        color      : rgb(194, 225, 255);
+                        color: rgb(194, 225, 255);
 
                         &.light,
                         &.always-light {
@@ -152,14 +153,14 @@
                     }
 
                     th {
-                        border     : 0px;
-                        padding    : 0px;
-                        height     : 37px;
+                        border: 0px;
+                        padding: 0px;
+                        height: 37px;
                         line-height: 37px;
                         font-weight: normal;
-                        text-align : center;
-                        color      : rgb(85, 113, 166);
-                        cursor     : pointer;
+                        text-align: center;
+                        color: rgb(85, 113, 166);
+                        cursor: pointer;
 
                         &.is-leaf {
                             border: 0px;
@@ -174,27 +175,27 @@
                     th,
                     tr {
                         background-color: transparent;
-                        border          : 0px;
+                        border: 0px;
                     }
 
                     thead {
-                        color      : @gray-l;
+                        color: @gray-l;
                         font-weight: 500;
-                        font-size  : 14px;
-                        border     : 0px;
+                        font-size: 14px;
+                        border: 0px;
 
                         th,
                         &.is-group th {
                             &.el-table__cell {
-                                background  : rgb(31, 83, 177) !important;
+                                background: rgb(31, 83, 177) !important;
                                 border-color: transparent !important;
-                                color       : #fff;
+                                color: #fff;
                             }
                         }
                     }
 
                     .el-table__body {
-                        border   : 0px; // 表格最外侧除右边以外边框
+                        border: 0px; // 表格最外侧除右边以外边框
                         font-size: 14px;
                     }
 
@@ -204,7 +205,7 @@
                         }
 
                         &:hover td {
-                            color           : #1890ff;
+                            color: #1890ff;
                             background-color: rgb(250, 250, 250) !important; // 表格偶数行 hover 背景颜色
                         }
 
@@ -241,7 +242,7 @@
             .el-table,
             .custom-table.el-table {
                 background: #fff;
-                border    : 1px solid rgba(33, 105, 195, 0.5) !important; // 包裹表格父元素边框
+                border: 1px solid rgba(33, 105, 195, 0.5) !important; // 包裹表格父元素边框
 
                 .el-table__row {
                     background: transparent; // 表格底色，因表格上层有其他颜色遮挡所以视觉效果看起来仿佛是表格边框
@@ -271,22 +272,22 @@
 
                 tr {
                     td {
-                        color           : #000;
+                        color: #000;
                         background-color: #fff; // 表格基数行背景颜色
                     }
 
                     &:hover td {
-                        color           : #1890ff; // 表格基数行 hover 文字颜色
+                        color: #1890ff; // 表格基数行 hover 文字颜色
                         background-color: #fff !important; // 表格基数行 hover 背景颜色
                     }
                 }
 
                 td {
-                    border     : 0px; // 表格内部除了最后一行底部以外的上下左右边框
-                    padding    : 0;
-                    height     : 37px;
+                    border: 0px; // 表格内部除了最后一行底部以外的上下左右边框
+                    padding: 0;
+                    height: 37px;
                     line-height: 37px;
-                    color      : rgb(194, 225, 255);
+                    color: rgb(194, 225, 255);
 
                     &.light,
                     &.always-light {
@@ -295,14 +296,14 @@
                 }
 
                 th {
-                    border     : 0px;
-                    padding    : 0px;
-                    height     : 37px;
+                    border: 0px;
+                    padding: 0px;
+                    height: 37px;
                     line-height: 37px;
                     font-weight: normal;
-                    text-align : center;
-                    color      : rgb(85, 113, 166);
-                    cursor     : pointer;
+                    text-align: center;
+                    color: rgb(85, 113, 166);
+                    cursor: pointer;
 
                     &.is-leaf {
                         border: 0px;
@@ -317,27 +318,27 @@
                 th,
                 tr {
                     background-color: transparent;
-                    border          : 0px;
+                    border: 0px;
                 }
 
                 thead {
-                    color      : @gray-l;
+                    color: @gray-l;
                     font-weight: 500;
-                    font-size  : 14px;
-                    border     : 0px;
+                    font-size: 14px;
+                    border: 0px;
 
                     th,
                     &.is-group th {
                         &.el-table__cell {
-                            background  : rgb(31, 83, 177) !important;
+                            background: rgb(31, 83, 177) !important;
                             border-color: transparent !important;
-                            color       : #fff;
+                            color: #fff;
                         }
                     }
                 }
 
                 .el-table__body {
-                    border   : 0px; // 表格最外侧除右边以外边框
+                    border: 0px; // 表格最外侧除右边以外边框
                     font-size: 14px;
                 }
 
@@ -347,7 +348,7 @@
                     }
 
                     &:hover td {
-                        color           : #1890ff;
+                        color: #1890ff;
                         background-color: rgb(250, 250, 250) !important; // 表格偶数行 hover 背景颜色
                     }
 
@@ -385,7 +386,7 @@
         .el-dialog.windLifeDialog,
         .el-dialog {
             background: #fff;
-            border    : 1px solid rgba(31, 83, 177, 0.5);
+            border: 1px solid rgba(31, 83, 177, 0.5);
             box-shadow: 0px 8px 17px 1px rgba(31, 83, 177, 0.3);
 
             .dialog-title {
@@ -531,9 +532,9 @@
         .point-popover {
             .el-popper__arrow {
                 &:before {
-                    border-color      : var(--el-popover-border-color) !important;
+                    border-color: var(--el-popover-border-color) !important;
                     border-right-color: transparent !important;
-                    border-top-color  : transparent !important;
+                    border-top-color: transparent !important;
                 }
             }
         }

src/themeDark.less

@@ -373,7 +373,8 @@
         }
 
         // /generatingCap/dataAnalysis/jjyxReport
-        .analysisReport {
+        .analysisReport,
+        .optimizationSuggestions {
             .infoBox {
                 background: rgb(4, 12, 11);
             }

src/views/generatingCapacity/jjyxReport/index.vue

@@ -1082,7 +1082,13 @@ export default {
       httpRequest
         .get(`/MeetingReport/Analysisreport?time=${this.reportParamDate}`)
         .then((tempRes) => {
-          tempRes.data.titleYear = tempRes.data.title.year;
+            this.exportWORDChange(tempRes)
+        }).catch(() => {
+            this.exportWORDChange({ data: jsonData.reportData });
+          });
+    },
+    exportWORDChange(tempRes) {
+        tempRes.data.titleYear = tempRes.data.title.year;
           tempRes.data.titleMonth = tempRes.data.title.month;
           tempRes.data.titleName = tempRes.data.title.name;
           tempRes.data.dlcylistM = [];
@@ -1232,7 +1238,6 @@ export default {
               saveAs(out, `${tempRes.data.title.name}.docx`);
             }
           );
-        });
     },
     handleReportOp() {
       if (this.reportParamDate) {

src/views/generatingCapacity/yhjyReport/index.vue

@@ -0,0 +1,638 @@
+<template>
+    <div class="optimizationSuggestions">
+        <div class="main_top">
+            <p class="topPsty">优化建议报告</p>
+            <div class="seach">
+                <el-form class="generat-seach" :inline="true">
+                    <el-form-item label="场站">
+                        <el-select v-model="reportStation" placeholder="选择场站">
+                            <el-option v-for="item in stationList" :key="item.id" :label="item.name" :value="item.id">
+                            </el-option>
+                        </el-select>
+                    </el-form-item>
+                    <el-form-item label="报告月份" class="!mb-0">
+                        <el-date-picker style="width: 120px" v-model="reportParamDate" type="month"
+                            value-format="YYYY-MM" placeholder="请选择" />
+                    </el-form-item>
+                    <el-form-item>
+                        <el-button type="primary" @click="handleReportOp">查询</el-button>
+                        <!-- <el-button
+              style="width: 100px"
+              type="danger"
+              @click="exportPDFop"
+              :loading="loading"
+              >导出 PDF</el-button
+            > -->
+                        <el-button style="width: 100px" type="primary" @click="exportWORD" :loading="loading">导出 WORD
+                        </el-button>
+                    </el-form-item>
+                </el-form>
+            </div>
+        </div>
+        <div class="infoBox">
+            <div id="pdfDomop" :class="!theme ? 'block' : 'white'"
+                :style="!theme ? 'background-color: #040c0b' : 'background-color: #fff'">
+                <h2 style="
+            font-weight: bolder;
+            text-align: center;
+            margin-bottom: 20px;
+            text-align: center;
+          " :style="!theme ? 'color: #fff' : 'color: #000'">
+                    {{ OperationName }}
+                </h2>
+                <!-- 概述 -->
+                <h3 style="text-indent: 2em; font-weight: bolder; margin-bottom: 10px"
+                    :style="!theme ? 'color: #fff' : 'color: #000'">
+                    1.概述
+                </h3>
+                <p style="
+            text-indent: 2em;
+            font-size: 15px;
+            text-align: justify;
+            line-height: 22px;
+          ">
+                    {{ OperationGs }}
+                </p>
+                <h4 style="text-indent: 2em; font-weight: bolder; margin: 10px 0"
+                    :style="!theme ? 'color: #fff' : 'color: #000'">
+                    1.1 风电场基本信息
+                </h4>
+                <div style="text-indent: 2em;line-height: 30px;font-size: 15px;" v-for="(item, index) in basrMsgArr"
+                    :key="index">
+                    <span style="background: #fff;
+            width: 8px;
+            height: 8px;
+            border-radius: 10px;
+            display: inline-block;
+            margin: 0 15px 0 15px;" :style="!theme ? 'background: #fff' : 'background: #000'"></span>
+                    <span style="font-weight: bolder;margin-right: 10px;"
+                        :style="!theme ? 'color: #fff' : 'color: #000'">{{item.name}}: </span>
+                    <span style="
+            text-align: justify;
+            line-height: 22px;" :style="!theme ? 'color: #fff' : 'color: #000'">{{ item.value }}</span>
+                </div>
+                <!-- 筛选标准 -->
+                <h3 style="text-indent: 2em; font-weight: bolder; margin-bottom: 10px; margin-top: 10px"
+                    :style="!theme ? 'color: #fff' : 'color: #000'">
+                    2.筛选标准
+                </h3>
+                <p style="
+            text-indent: 2em;
+            font-size: 15px;
+            text-align: justify;
+            line-height: 22px;
+          ">
+                    本报告依据以下标准对风机进行筛选：
+                </p>
+                <div style="text-indent: 2em;line-height: 30px;font-size: 15px;" v-for="(item, index) in orderMsgArr"
+                    :key="index">
+                    <span style="background: #fff;
+            width: 8px;
+            height: 8px;
+            border-radius: 10px;
+            display: inline-block;
+            margin: 0 15px 0 15px;" :style="!theme ? 'background: #fff' : 'background: #000'"></span>
+                    <span style="font-weight: bolder;margin-right: 10px;"
+                        :style="!theme ? 'color: #fff' : 'color: #000'">{{item.name}}: </span>
+                    <span style="
+            text-align: justify;
+            line-height: 22px;" :style="!theme ? 'color: #fff' : 'color: #000'">{{ item.value }}</span>
+                </div>
+                <!-- 风机筛选分析 -->
+                <h3 style="text-indent: 2em; font-weight: bolder; margin-bottom: 10px; margin-top: 10px"
+                    :style="!theme ? 'color: #fff' : 'color: #000'">
+                    3.风机筛选分析
+                </h3>
+                <p style="
+            text-indent: 2em;
+            font-size: 15px;
+            text-align: justify;
+            line-height: 22px;
+          ">
+                    根据以上标准，对每台风机的运行数据及隐患问题信息进行分析，结果如下：
+                </p>
+                <div class="warn-table">
+                    <el-table class="toolSty" :data="fjsxList1" border style="width: 100%; margin: 10px 0"
+                        max-height="500" stripe :header-cell-style="{
+                padding: '4px',
+                fontSize: '14px',
+                border: '0.5px solid rgba(0,0,0,.5) !important',
+            }" :cell-style="{
+                height: '40px',
+                padding: '3px',
+                fontSize: '12px',
+                'border-top': '0px solid rgba(0,0,0,.5)',
+                'border-bottom': '1px solid rgba(0,0,0,.5)',
+                'border-right': '1px solid  rgba(0,0,0,.5)',
+                }">
+                        <el-table-column prop="turbineId" align="center" label="风机编号" width="150" />
+                        <el-table-column prop="ratedPowerKw" align="center" label="额定功率(KW)" width="90" />
+                        <el-table-column prop="actualRatedPowerKw" align="center" label="实际额定功率(KW)" width="90" />
+                        <el-table-column v-for="(item, index) in orderTableColumn" :key="index" :label="item.name"
+                            :width="item.width" align="center">
+                            <el-table-column v-for="(res, index) in item.children" :key="index" :label="res.name"
+                                align="center">
+                                <template #default="scope">
+                                    <span>
+                                        {{ scope.row[res.code] }}
+                                    </span>
+                                </template>
+                            </el-table-column>
+                        </el-table-column>
+                        <el-table-column align="center" prop="performanceIssues" label="性能问题" width="90"
+                            fixed="right" />
+                    </el-table>
+                    <!-- 温度类隐患 -->
+                    <el-table class="toolSty" :data="fjsxList2" border style="width: 100%; margin: 10px 0"
+                        max-height="500" stripe :header-cell-style="{
+                padding: '4px',
+                fontSize: '14px',
+                border: '0.5px solid rgba(0,0,0,.5) !important',
+            }" :cell-style="{
+                height: '40px',
+                padding: '3px',
+                fontSize: '12px',
+                'border-top': '0px solid rgba(0,0,0,.5)',
+                'border-bottom': '1px solid rgba(0,0,0,.5)',
+                'border-right': '1px solid rgba(0,0,0,.5)',
+                }">
+                        <el-table-column prop="turbineId" align="center" label="风机编号" width="150" fixed />
+                        <el-table-column prop="downtimeCount" align="center" label="故障停机次数" width="80" />
+                        <el-table-column v-for="(item, index) in orderTableColumn2" :key="index" :label="item.name"
+                            :width="item.width" align="center">
+                            <el-table-column v-for="(res, index) in item.children" :key="index" :label="res.name"
+                                align="center">
+                                <template #default="scope">
+                                    <span>
+                                        {{ scope.row[res.code] }}
+                                    </span>
+                                </template>
+                            </el-table-column>
+                        </el-table-column>
+                        <el-table-column prop="reliabilityIssue" align="center" label="可靠性问题" width="100"
+                            fixed="right" />
+                    </el-table>
+                </div>
+
+                <h4 style="text-indent: 2em; font-weight: bolder; margin: 10px 0"
+                    :style="!theme ? 'color: #fff' : 'color: #000'">
+                    3.1 筛选结果
+                </h4>
+                <div style="text-indent: 2em;line-height: 30px;font-size: 15px;" v-for="(item, index) in orderResultArr"
+                    :key="index">
+                    <span style="background: #fff;
+            width: 8px;
+            height: 8px;
+            border-radius: 10px;
+            display: inline-block;
+            margin: 0 15px 0 15px;" :style="!theme ? 'background: #fff' : 'background: #000'"></span>
+                    <span style="font-weight: bolder;margin-right: 10px;"
+                        :style="!theme ? 'color: #fff' : 'color: #000'">{{item.windName}}: </span>
+                    <span style="
+            text-align: justify;margin-right: 10px;
+            line-height: 22px;" :style="!theme ? 'color: #fff' : 'color: #000'">{{ item.value }}</span>
+                </div>
+
+                <!-- 风机情况说明 -->
+                <h3 style="text-indent: 2em; font-weight: bolder; margin-bottom: 10px; margin-top: 10px"
+                    :style="!theme ? 'color: #fff' : 'color: #000'">
+                    4.风机情况说明
+                </h3>
+                <div v-for="(val, key, index) in windSituationReport" :key="index">
+                    <h4 style="text-indent: 2em; font-weight: bolder; margin: 10px 0"
+                        :style="!theme ? 'color: #fff' : 'color: #000'">
+                        {{`4.${index+1} ${key}` }}
+                    </h4>
+                    <div style="text-indent: 2em;line-height: 30px;font-size: 15px;" v-for="(item, index) in val"
+                        :key="index">
+                        <span style="background: #fff;
+                width: 8px;
+                height: 8px;
+                border-radius: 10px;
+                display: inline-block;
+                margin: 0 15px 0 15px;" :style="!theme ? 'background: #fff' : 'background: #000'"></span>
+                        <!-- <span style="font-weight: bolder;margin-right: 10px;"
+                            :style="!theme ? 'color: #fff' : 'color: #000'">{{item.name}}: </span> -->
+                        <span style="
+                text-align: justify;
+                line-height: 22px;" :style="!theme ? 'color: #fff' : 'color: #000'">{{ item }}</span>
+                    </div>
+                </div>
+
+                <!-- 检修建议 -->
+                <h3 style="text-indent: 2em; font-weight: bolder; margin-bottom: 10px; margin-top: 10px"
+                    :style="!theme ? 'color: #fff' : 'color: #000'">
+                    5.检修建议
+                </h3>
+                <p style="
+            text-indent: 2em;
+            font-size: 15px;
+            text-align: justify;
+            line-height: 22px;
+          ">
+                    针对筛选出的风机，提出以下检修建议：
+                </p>
+                <div v-for="(val, key, index) in maintenanceRecommendations" :key="index">
+                    <h4 style="text-indent: 2em; font-weight: bolder; margin: 10px 0"
+                        :style="!theme ? 'color: #fff' : 'color: #000'">
+                        {{`5.${index+1} ${key}` }}
+                    </h4>
+                    <div style="text-indent: 2em;line-height: 30px;font-size: 15px;" v-for="(item, idx) in val"
+                        :key="idx">
+                        <span style="background: #fff;
+                width: 8px;
+                height: 8px;
+                border-radius: 10px;
+                display: inline-block;
+                margin: 0 15px 0 15px;" :style="!theme ? 'background: #fff' : 'background: #000'"></span>
+                        <!-- <span>{{idx+1}}</span> -->
+                        <span style="font-weight: bolder;margin-right: 10px;"
+                            :style="!theme ? 'color: #fff' : 'color: #000'">{{item.name}}: </span>
+                        <span style="
+                text-align: justify;
+                line-height: 22px;" :style="!theme ? 'color: #fff' : 'color: #000'">{{ item.value }}</span>
+                    </div>
+                </div>
+
+                <!-- 结论 -->
+                <h3 style="text-indent: 2em; font-weight: bolder; margin-bottom: 10px; margin-top: 10px"
+                    :style="!theme ? 'color: #fff' : 'color: #000'">
+                    6.结论
+                </h3>
+                <p style="
+            text-indent: 2em;
+            font-size: 15px;
+            text-align: justify;
+            line-height: 22px;
+          ">
+                    {{conclusionMsg.result}}
+                </p>
+                <div style="text-indent: 2em;line-height: 30px;font-size: 15px;"
+                    v-for="(item, idx) in conclusionMsg.resultObj" :key="idx">
+                    <span style="background: #fff;
+            width: 8px;
+            height: 8px;
+            border-radius: 10px;
+            display: inline-block;
+            margin: 0 15px 0 15px;" :style="!theme ? 'background: #fff' : 'background: #000'"></span>
+                    <!-- <span>{{idx+1}}</span> -->
+                    <span style="font-weight: bolder;margin-right: 10px;"
+                        :style="!theme ? 'color: #fff' : 'color: #000'">{{item.name}}: </span>
+                    <span style="
+            text-align: justify;
+            line-height: 22px;" :style="!theme ? 'color: #fff' : 'color: #000'">{{ item.value }}</span>
+                </div>
+
+                <div style="display: flex; margin-top: 15px">
+                    <p style="
+            text-indent: 2em;
+            font-size: 15px;
+            text-align: justify;
+            line-height: 22px;
+          ">
+                        编写人：XXX
+                    </p>
+                    <p style="
+            text-indent: 2em;
+            font-size: 15px;
+            text-align: justify;
+            line-height: 22px;
+          ">
+                        审核人：XXX
+                    </p>
+                    <p style="
+            text-indent: 2em;
+            font-size: 15px;
+            text-align: justify;
+            line-height: 22px;
+          ">
+                        日期：XXX
+                    </p>
+                </div>
+
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+    import httpRequest from "@/utils/request.js";
+    import htmlToPdf from "../report/fixGetPDF";
+    import Docxtemplater from "docxtemplater";
+    import PizZip from "pizzip";
+    import JSZipUtils from "jszip-utils";
+    import {
+        saveAs
+    } from "file-saver";
+    import dayjs from "dayjs";
+
+    import {
+        apiGetbaseStation
+    } from "@/api/gengra";
+
+    import {
+        ElMessage
+    } from "element-plus";
+
+    import jsonData from "./dataJson.json";
+    import twoxizeJson from "../report/lianggexizeJson";
+    export default {
+        name: "yhjyReport",
+        data() {
+            return {
+                stationList: [],
+                reportStation: "",
+                basrMsgArr: jsonData.basrMsgArr,
+                orderMsgArr: jsonData.orderMsgArr,
+                orderResultArr: [],
+                maintenanceRecommendations: [],
+                windSituationReport: [],
+                orderTableColumn: jsonData.orderTableColumn,
+                orderTableColumn2: jsonData.orderTableColumn2,
+                conclusionMsg: {},
+                OperationName: "",
+                OperationGs: "",
+                OperationMonth: "",
+                fjsxList1: [],
+                fjsxList2: [],
+                theme: true,
+                loading: false,
+                reportParamDate: dayjs()
+                    .startOf("month")
+                    .format("YYYY-MM"),
+            };
+        },
+
+        created() {
+            this.theme = this.$store.state.theme;
+        },
+
+        mounted() {
+            this.funGetStation()
+        },
+
+        methods: {
+            /**场站 */
+            funGetStation() {
+                let that = this;
+                apiGetbaseStation().then((res) => {
+                    if (res) {
+                        that.stationList = res.data;
+                        if (that.stationList.length) {
+                            that.reportStation = that.stationList[0].id;
+                            that.handleReportOp()
+                        }
+                    }
+                });
+            },
+            exportPDFop() {
+                this.loading = true;
+                htmlToPdf.getPdf(
+                    document.querySelector("#pdfDomop"),
+                    "经济运行分析会报告"
+                );
+                setTimeout(() => {
+                    this.loading = false;
+                    ElMessage.success("打印成功!");
+                }, 1000);
+            },
+            exportWORD() {
+                httpRequest
+                    .get(`/WarningReport/report?time=${this.reportParamDate}&wpid=${this.reportStation}`)
+                    .then((tempRes) => {
+                        this.getWordFn(tempRes)
+                    }).catch(e => {
+                        this.getWordFn({
+                            data: jsonData.data
+                        })
+                    });
+            },
+            // 导出word方法
+            getWordFn(tempRes) {
+                let temWordData = {
+                    titleName: this.OperationName,
+                    operationGs: this.OperationGs,
+                    stationName: tempRes.data.stationid.aname,
+                    windNumber: tempRes.data.stationid.jrwindQuantityLd,
+                    zzjrl: tempRes.data.stationid.windCapacity,
+                    reportTime: tempRes.data.reporttime,
+                    fjsxList1: tempRes.data.xnwtls,
+                    fjsxList2: tempRes.data.kkxwtls,
+                    orderResultArr: this.orderResultArr,
+                    windSituationReportWord: [],
+                    maintenanceRecommendationsWord: []
+                }
+
+                //4.风机情况说明
+                let qksmNum = 0
+                for (const key in tempRes.data.qksm) {
+                    if (Object.prototype.hasOwnProperty.call(tempRes.data.qksm, key)) {
+                        const element = tempRes.data.qksm[key];
+                        let eleArr = []
+                        let eleObj = {
+                            name: "",
+                            value: ""
+                        }
+                        element.forEach(it => {
+                            eleObj.name = it.split('：')[0]
+                            eleObj.value = it.split('：')[1]
+                            eleArr.push(eleObj)
+                        })
+                        let obj = {
+                            index: qksmNum++,
+                            windName: key,
+                            windValue: eleArr
+                        }
+                        temWordData.windSituationReportWord.push(obj)
+                    }
+                }
+
+                // 读取并获得模板文件的二进制内容
+                JSZipUtils.getBinaryContent(
+                    `./static/optimizationSuggestionsReport.docx`,
+                    (error, content) => {
+                        // 抛出异常
+                        if (error) throw error;
+                        // 创建一个JSZip实例，内容为模板的内容
+                        let zip = new PizZip(content);
+                        // 创建并加载docxtemplater实例对象
+                        let doc = new Docxtemplater();
+                        doc.loadZip(zip);
+                        doc.setData(temWordData);
+                        try {
+                            // 用模板变量的值替换所有模板变量
+                            doc.render();
+                        } catch (error) {
+                            // 抛出异常
+                            let e = {
+                                message: error.message,
+                                name: error.name,
+                                stack: error.stack,
+                                properties: error.properties,
+                            };
+                            console.log(JSON.stringify({
+                                error: e
+                            }));
+                            throw error;
+                        }
+                        // 生成一个代表docxtemplater对象的zip文件（不是一个真实的文件，而是在内存中的表示）
+                        let out = doc.getZip().generate({
+                            type: "blob",
+                            mimeType: "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
+                        });
+                        // 将目标文件对象保存为目标类型的文件，并命名
+                        saveAs(out, `${temWordData.titleName}.docx`);
+                    }
+                );
+            },
+            handleReportOp() {
+                if (this.reportParamDate) {
+                    this.OperationName = "";
+                    this.OperationGs = ""
+                    this.OperationMonth = "";
+
+                    httpRequest
+                        .get(`/WarningReport/report?time=${this.reportParamDate}&wpid=${this.reportStation}`)
+                        .then((res) => {
+                            this.renderReportPage(res);
+                        })
+                        .catch(() => {
+                            this.renderReportPage({
+                                data: jsonData.data
+                            });
+                        });
+                }
+            },
+
+            renderReportPage(res) {
+
+                this.OperationMonth = res.data.reporttime
+                let date = this.OperationMonth.split('-')
+                this.OperationName = date[0] + '年' + date[1] + '月' + res.data.stationid.aname + '性能及可靠性优化建议报告';
+                this.OperationGs = `本报告旨在对${res.data.stationid.aname}内的风机进行综合分析，以筛选出同时存在性能问题和可靠性隐患的风机，为后续的检修与优化提供依据。`
+
+                this.basrMsgArr.forEach(it => {
+                    if (it.nameEn === "reportDate") {
+                        it.value = date[0] + '年' + date[1] + '月'
+                    } else {
+                        it.value = res.data.stationid[it.nameEn]
+                    }
+                })
+
+                this.orderMsgArr.forEach(it => {
+                    it.value = jsonData.orderMsg[it.nameEn]
+                })
+
+                this.fjsxList1 = res.data.xnwtls;
+                this.fjsxList2 = res.data.kkxwtls;
+                // 3.1筛选结果
+                for (const key in res.data.FilterResults) {
+                    if (Object.prototype.hasOwnProperty.call(res.data.FilterResults, key)) {
+                        const element = res.data.FilterResults[key];
+                        let obj = {
+                            windName: key,
+                            value: element
+                        }
+                        this.orderResultArr.push(obj)
+                    }
+                }
+                // 4风机情况说明
+                this.windSituationReport = res.data.qksm
+
+                // this.maintenanceRecommendations = res.data.maintenanceRecommendations
+                // this.conclusionMsg = res.data.conclusion
+
+                // this.OperationData = res.data;
+            },
+        },
+
+        watch: {
+            "$store.state.theme"(bool) {
+                this.theme = bool;
+            },
+        },
+    };
+</script>
+
+<style lang="less" scoped>
+    .optimizationSuggestions {
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        justify-content: flex-start;
+        align-content: center;
+
+        .main_top {
+            height: 40px;
+            display: flex;
+            align-items: center;
+
+            .topPsty {
+                position: relative;
+                top: 5px;
+                padding: 7px 20px;
+                font-size: 12px;
+                font-weight: 600;
+                margin-left: 10px;
+                border-radius: 3px;
+            }
+
+            .seach {
+                padding: 20px 0 0 20px;
+
+                .generat-seach {
+                    .el-form-item {
+                        .el-form-item__content {
+                            .el-select {
+                                width: 130px !important;
+                            }
+                        }
+                    }
+                }
+            }
+        }
+
+        .infoBox {
+            height: calc(100% - 80px);
+            background: #fff;
+            overflow: scroll;
+
+            #pdfDomop {
+                margin: 20px;
+            }
+        }
+
+        &.themeLight {
+            .topPsty {
+                color: #2778ff;
+                background: #ffffff;
+            }
+        }
+
+        &.themeDark {
+            .topPsty {
+                color: #1c99ff;
+                background: #1e2126;
+            }
+        }
+    }
+</style>
+<style lang="less">
+    .el-overlay {
+        .el-overlay-dialog {
+            .reportDia {
+                margin-top: 0 !important;
+            }
+        }
+    }
+
+    .reportDia {
+        .repoerDateBox {
+            width: calc(100% - 40px);
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            font-size: 12px;
+        }
+    }
+</style>

src/views/home/index.vue

@@ -95,7 +95,7 @@
                 <span class="yx">{{ ztmap.yxsum }}</span>
               </div>
               <div class="info">
-                <span class="genre">检修</span>
+                <span class="genre">故障</span>
                 <span class="jx">{{ ztmap.jxsum }}</span>
               </div>
               <div class="info">
@@ -3997,7 +3997,7 @@ export default {
         }
 
         .jx {
-          color: #f7870e;
+          color: #E17D24;
         }
 
         .gz {

src/views/powerPrediction/homePageNoMap.vue

@@ -84,12 +84,18 @@
                         <div class="msgHeight">
                             <div v-for="(item, index) in messageDataxc" :key="index">
                                 <div style="display: flex">
+                                    <!-- <span class="stationSty">{{ item.name }}</span> -->
+                                    <!-- <span class="titleSty"
+                                        :style="{ color: item.data[0].color }">【{{ item.data[0].name }}】</span> -->
+                                    <!-- <span class="msgSty" @click="showDetail(item, index)">{{
+                    item.data[0].msg
+                  }}</span> -->
                                     <span class="stationSty">{{ item.name }}</span>
                                     <span class="titleSty"
-                                        :style="{ color: item.data[0].color }">【{{ item.data[0].name }}】</span>
-                                    <span class="msgSty" @click="showDetail(item, index)">{{
-                    item.data[0].msg
-                  }}</span>
+                                        :style="showColor(item.alertObj.alertTitle) ? 'color: red':'color:green'"
+                                        @click="showDetail(item, index)">【{{ item.alertObj.alertTitle }}】</span>
+                                    <span class="msgSty"
+                                        @click="showDetail(item, index)">{{item.alertObj.alertMessage}}</span>
                                 </div>
                                 <el-divider></el-divider>
                             </div>
@@ -204,6 +210,7 @@
                 planFiveMin: "",
                 currentTime: "",
                 warningData: [],
+                extremeWeather: [],
                 messageDataxc: [],
                 messageDataAll: [],
                 ExceedTimeList: [],
@@ -521,7 +528,7 @@
                 },
                 {
                     img: threeimg,
-                    name: "维护",
+                    name: "故障",
                     nameEn: "wh",
                     borderSty: "#E17D24",
                     backSty: "#694119",
@@ -585,7 +592,7 @@
                 },
                 {
                     img: threeimg1,
-                    name: "维护",
+                    name: "故障",
                     nameEn: "wh",
                     borderSty: "#F1AF74",
                     backSty: "#E17D24",
@@ -714,8 +721,8 @@
             },
         },
         mounted() {
-            // this.initPageData();
-            this.initPageFn()
+            this.initPageData();
+            // this.initPageFn()
         },
         beforeRouteLeave(to, from, next) {
             next();
@@ -831,7 +838,7 @@
                             let XaObj = {
                                 value: item,
                                 textStyle: {
-                                    width: 100,
+                                    width: 120,
                                     height: 25,
                                     backgroundColor: "#edeffb",
                                     color: "#36348e",
@@ -866,6 +873,7 @@
 
                     {
                         that.messageDataxc = [];
+                        that.extremeWeather = jsonData.weatherForecastAllTerminalData
                         jsonData.weatherForecastAllTerminalData.forEach((item) => {
                             let weatherDataFromWeb = null;
                             weatherDataFromWeb = JSON.parse(item.content);
@@ -902,8 +910,29 @@
                         }
                     });
                     that.allStatus = jsonData.unitStatusInfoAllData;
+                    console.log("extremeWeather===>>>", that.extremeWeather)
+
+                    that.messageDataxc.forEach(item => {
+                        that.extremeWeather.forEach(it => {
+                            if (item.name === it.terminalName) {
+                                let obj = {
+                                    alertTitle: it.alertTitle ? it.alertTitle : item.data[0].name,
+                                    alertMessage: it.alertMessage ? it.alertMessage : item.data[0]
+                                        .msg
+                                }
+                                item.alertObj = obj
+                            }
+                        })
+                    })
+                    console.log("messageDataxc===>>>321", that.messageDataxc)
                 }
             },
+            showColor(str) {
+                return str.indexOf("预警") !== -1
+            },
+            showTitle(item) {
+                return item.substring(0, item.indexOf('发布') + 2)
+            },
             statusSty(item) {
                 return `border: 1px solid ${item.borderSty};background: ${item.backSty}`;
             },
@@ -1045,6 +1074,7 @@
                 apiGetallWeatherInfo().then((datas) => {
                     if (datas && datas.data) {
                         that.messageDataxc = [];
+                        that.extremeWeather = datas.data
                         datas.data.forEach((item) => {
                             let weatherDataFromWeb = null;
                             weatherDataFromWeb = JSON.parse(item.content);
@@ -1055,7 +1085,7 @@
             },
             //处理每个场站天气数据
             everyStationWeather(weatherDataFromWeb, stationName) {
-                console.log("weatherDataFromWeb", weatherDataFromWeb);
+                // console.log("weatherDataFromWeb", weatherDataFromWeb);
                 let weatherTit = {
                     windBlue: 0,
                     windYellow: 0,
@@ -1269,8 +1299,19 @@
                         "N"
                     );
                 }
-                console.log("weatherTit", weatherTit);
-                console.log("messageDataxc", this.messageDataxc);
+                // console.log("weatherTit", weatherTit);
+                this.messageDataxc.forEach(item => {
+                    this.extremeWeather.forEach(it => {
+                        if (item.name === it.terminalName) {
+                            let obj = {
+                                alertTitle: it.alertTitle,
+                                alertMessage: it.alertMessage
+                            }
+                            item.alertObj = obj
+                        }
+                    })
+                })
+                console.log("messageDataxc===>>>123>", this.messageDataxc);
             },
             //获取天气预警的相关天气数据
             getOnlyWeatherData(datas, weather, obj, type) {
@@ -1842,7 +1883,7 @@
                                 let XaObj = {
                                     value: item,
                                     textStyle: {
-                                        width: 100,
+                                        width: 120,
                                         height: 25,
                                         backgroundColor: "#edeffb",
                                         color: "#36348e",

src/views/powerPrediction/weatherPage.vue

@@ -81,15 +81,48 @@
                         <div id="weatherChart" :style="linerightChartStyle"></div>
                         <div class="messageData">
                             <p style="margin-bottom: 30px">温馨提示：</p>
+                            <!-- <div class="tabMain">
+                                <div class="extremeMsg">
+                                    <div class="extremeW" :style="havePicPos(item.alertObj.alertTitle)"></div>
+                                    <div class="tabMain_msg">
+                                        <div class="detailsTimesv">
+                                            <div class="detailN">
+                                                <span>极端天气预警:</span>
+                                                <span
+                                                    :style="haveColor(item.alertObj.alertTitle)">{{item.alertObj.alertTitle}};</span>
+                                            </div>
+                                        </div>
+
+                                        <div class="detailsTime">
+                                            <div class="detailN">
+                                                <span>温度:</span>
+                                                <span>{{item.weatherDetail.temperature_day || item.weatherDetail.temperature}}℃;</span>
+                                            </div>
+                                            <div class="detailN">
+                                                <span>湿度:</span>
+                                                <span>{{item.weather.humidity}}%;</span>
+                                            </div>
+                                            <div class="detailN">
+                                                <span>气压:</span>
+                                                <span>{{item.weather.pressure}}kPa;</span>
+                                            </div>
+                                            <div class="detailN">
+                                                <span>风力:</span>
+                                                <span>{{item.weather.wind_power}};</span>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="detailsMsg">{{item.alertObj.alertMessage}}</div>
+                            </div> -->
                             <div style="display: flex">
                                 <div class="msgDiv">
-                                    <div v-for="(item, index) in showMsgData" :key="item.id">
+                                    <div v-for="item in showMsgData" :key="item.id">
                                         <div style="display: flex">
                                             <span class="titleSty"
                                                 :style="{ color: item.data[0].color }">【{{ item.data[0].name }}】</span>
-                                            <span class="msgSty" @click="clickDetail(item, index)">{{
-                        item.data[0].msg
-                      }}</span>
+                                            <!-- @click="clickDetail(item, index)" -->
+                                            <span class="msgSty">{{item.data[0].msg}}</span>
                                         </div>
                                         <el-divider></el-divider>
                                     </div>
@@ -147,6 +180,7 @@
     } from "../../api/api";
 
     import jsonData from "./component/weather.json";
+    import picPosJson from '../../components/powerPredictionComponent/homePageAssembly/weatherPicPos.json'
     export default {
         components: {
             // commonHeader
@@ -154,6 +188,9 @@
         },
         data() {
             return {
+                //天气与图片位置对应
+                weaPic: picPosJson.data,
+                extremeWeather: [],
                 windTurbines: "",
                 windName: "",
                 windFramoptions: [],
@@ -398,8 +435,8 @@
             ];
         },
         mounted() {
-            // this.initPageData();
-            this.getWindFramData();
+            this.initPageData();
+            // this.getWindFramData();
         },
         computed: {
             pageHeight() {
@@ -438,6 +475,7 @@
                 that.windTurbines = jsonData.glStationsAllData.list[0].no;
                 that.windFramoptions[0].showBac = true;
                 that.windName = jsonData.glStationsAllData.list[0].stationName;
+                that.extremeWeather = jsonData.weatherForecastData
 
                 if (jsonData.weatherForecastData.length > 1) {
                     jsonData.weatherForecastData.forEach((item) => {
@@ -670,6 +708,10 @@
                     );
                     that.init();
                 }
+
+
+                console.log("weather123321====>>>>", that.showMsgData)
+                console.log("extremeWeather55665====>>>>", that.extremeWeather)
             },
             init() {
                 this.detailWeather =
@@ -749,6 +791,24 @@
                 this.getWeatherLine1();
                 this.getWeatherLine2();
             },
+            haveColor(title) {
+                let str = 'margin-left:5px;font-weight: 600;color:'
+                this.weaPic.forEach(it => {
+                    if (title.indexOf(it.name) != -1) {
+                        str += it.status
+                    }
+                })
+                return str
+            },
+            havePicPos(title) {
+                let str = 'background-position:'
+                this.weaPic.forEach(it => {
+                    if (title.indexOf(it.name) != -1) {
+                        str += it.position
+                    }
+                })
+                return str
+            },
             // 获取风电场数据
             getWindFramData() {
                 let that = this;
@@ -777,6 +837,11 @@
                 this.detailWeather = item.data[0];
                 this.$refs.weatherDetail.dialogVisible = true;
                 this.$refs.weatherDetail.title = "天气详情";
+                let obj = {
+                    alertTitle: this.extremeWeather.alertTitle,
+                    alertMessage: this.extremeWeather.alertMessage
+                }
+                this.showMsgData.alertObj = obj
                 this.$refs.weatherDetail.messageAll = this.showMsgData;
                 this.$refs.weatherDetail.activeName = index.toString();
                 this.$refs.weatherDetail.statusName = item.data[0].name;
@@ -2000,6 +2065,77 @@
                             margin: 12px 0 15px 0;
                         }
                     }
+
+                    .tabMain {
+                        padding-right: 20px;
+
+                        .extremeMsg {
+                            display: flex;
+                            margin-bottom: 10px;
+
+                            .extremeW {
+                                margin: 15px 0 0 20px;
+                                width: 110px;
+                                height: 100px;
+                                background-image: url(../../assets/weather/extremeWeather.png);
+                            }
+
+
+                            .tabMain_msg {
+                                margin: 22px 0 0 10px;
+
+                                .detailsTimesv {
+                                    margin-bottom: 20px;
+                                    font-size: 18px;
+                                    display: flex;
+                                    justify-content: start;
+
+                                    .detailN {
+                                        margin-right: 20px;
+
+                                        span:nth-of-type(1) {
+                                            font-weight: bold;
+                                        }
+                                    }
+                                }
+
+                            }
+
+                        }
+
+
+                        .detailsMsg {
+                            overflow-y: auto;
+                            height: 230px;
+                            font-size: 18px;
+                            line-height: 30px;
+                            text-indent: 2em;
+                            padding-left: 30px;
+                        }
+
+
+                        img {
+                            width: 180px;
+                            height: 180px;
+                            margin: 30px 0 0 20px;
+                        }
+
+                    }
+
+                    .detailsTime {
+                        display: flex;
+                        justify-content: end;
+                        margin-top: 10px;
+                        font-size: 18px;
+
+                        .detailN {
+                            margin-right: 20px;
+
+                            span:nth-of-type(1) {
+                                font-weight: bold;
+                            }
+                        }
+                    }
                 }
             }
 

src/viewsCss/homePageNoMapLess.less

@@ -158,19 +158,24 @@
                     .stationSty {
                         margin-left: 5px;
                         display: inline-block;
-                        width: 50px;
+                        width: 100px;
                         font-weight: 600;
                     }
 
                     .titleSty {
                         display: inline-block;
+                        width: 140px;
                         // width: 60px;
                         font-weight: 600;
+
+                        &:hover {
+                            text-decoration-line: underline;
+                        }
                     }
 
                     .msgSty {
                         display: inline-block;
-                        width: calc(90% - 110px);
+                        width: calc(90% - 240px);
                         overflow: hidden;
                         text-overflow: ellipsis;
                         white-space: nowrap;