基于风机发电量全寿命周期管控的研究与应用项目中，首页部分白色版本开发（电量分析栏，计划电量完成情况栏，72小时功率曲线栏按照UI设计图还原开发展示），首页72小时功率曲线接口联调；

.env.development

@@ -18,7 +18,7 @@ VUE_APP_GENERAT_URL = 'http://192.168.2.231:9002'
 VUE_APP_REPORT_URL = 'http://192.168.2.231:9001'
 # 功率预测
 # VUE_APP_BASE_URL = 'http://123.60.219.66:8086'
-VUE_APP_BASE_URL = 'http://192.168.2.231:8086'
+VUE_APP_BASE_URL = 'http://192.168.2.126:8086'
 
 # 百度地图KEY
 VUE_APP_BAIDU_MAP_KEY = ''

src/App.vue

@@ -47,11 +47,11 @@
 
         <!-- </div> -->
         <div class="mainSty">
-            <div class="elmenuSty" :style="!swichTheme ? 'background: #000;' : 'background: #1D47B0;'"
+            <div class="elmenuSty" :style="!swichTheme ? 'background: #000;' : 'background: #123081;'"
                 v-if="isShowMenu">
 
                 <el-menu :default-active="$route.path" router :unique-opened="true" :collapse="isCollapse"
-                    :collapse-transition="false" text-color="#fff" :background-color="!swichTheme ? '#000' : '#1D47B0'"
+                    :collapse-transition="false" text-color="#fff" :background-color="!swichTheme ? '#000' : '#123081'"
                     active-text-color="#fff" @select="selectMenuItem">
                     <!-- 引入组件 -->
                     <template v-for="menu in showMenuData">
@@ -541,8 +541,8 @@
                 ],
                 memuCloseTimeout: null,
                 fixed: false,
-                swichTheme: false,
-                // swichTheme: true // 默认白色版本
+                // swichTheme: false,
+                swichTheme: true // 默认白色版本
             }
         },
         watch: {
@@ -830,7 +830,7 @@
         @import "./assets/css/eleCss/el-inputB.less";
         @import "./assets/css/eleCss/el-treeB.less";
         @import "./assets/css/eleCss/el-popper.less";
-        background-image: url('@/assets/images/headerCom/headerBack_B.png');
+        background-image: url('@/assets/images/headerCom/headerBack_B1.png');
         background-repeat: no-repeat;
 
         .mainSty {
@@ -891,6 +891,8 @@
         @import "./assets/css/eleCss/el-dialogW.less";
         @import "./assets/css/eleCss/el-tableW.less";
         @import "./assets/css/eleCss/el-treeW.less";
+        background-image: url('@/assets/images/headerCom/headerBack_W.png');
+        background-repeat: no-repeat;
 
         .toolSty {
             .el-popper {
@@ -948,6 +950,7 @@
                 }
             }
         }
+
     }
 
 

src/api/gengra.js

@@ -63,4 +63,14 @@ export function apiGetExportMsg(params) {
     })
 }
 
+// 首页
+export function apiGethomeData(params) {
+    return httpRequest({
+        baseURL: process.env.VUE_APP_GENERAT_URL,
+        url: 'cockpit/bulletin',
+        method: 'get',
+        params: params
+    })
+}
+
 //******************************end*******************************************//

src/components/commonHeaders.vue

@@ -12,7 +12,7 @@
                     </div>
                     <div class="proSet">
                         <div class="settingStop">
-                            <el-switch v-model="switchTheme" @change="changSwith" style="display: none">
+                            <el-switch v-model="switchTheme" @change="changSwith">
                                 <template #active-action>
                                     <!-- <span class="custom-active-action">T</span> -->
                                     <img :src="moon_B" alt="" v-if="!switchTheme">
@@ -113,8 +113,8 @@
         mounted() {
             let that = this;
             if (!JSON.parse(window.sessionStorage.getItem('theme'))) {
-                window.sessionStorage.setItem('theme', false)
-                // window.sessionStorage.setItem('theme', true) // 默认白色版本
+                // window.sessionStorage.setItem('theme', false)
+                window.sessionStorage.setItem('theme', true) // 默认白色版本
             } else {
                 this.switchTheme = JSON.parse(window.sessionStorage.getItem('theme'))
                 this.$store.state.theme = this.switchTheme
@@ -459,6 +459,7 @@
     }
 
     .themeLights {
+        background: linear-gradient(90deg, #1f53b1, #6962b1) !important;
         border-bottom: 1px solid #7899ff;
 
         .proMenu {

src/components/homeComponent/echartsGauge.vue

@@ -11,6 +11,10 @@
         name: "dsah-pie",
         componentName: "dsah-pie",
         props: {
+            theme: {
+                type: Boolean,
+                default: false,
+            },
             // 宽度 默认9.722vh
             width: {
                 type: String,
@@ -73,14 +77,14 @@
                         subtext: this.title,
                         subtextStyle: {
                             fontSize: 14,
-                            color: "#8B93A6",
+                            color: !this.theme ? "#8B93A6" : "#5E6269",
                         },
                         x: "45%",
                         y: "70%",
                         z: 8,
                         textAlign: "center",
                         textStyle: {
-                            color: "#8B93A6",
+                            color: !this.theme ? "#8B93A6" : "#5E6269",
                             fontSize: 12,
                             fontWeight: "normal",
                         },
@@ -100,7 +104,8 @@
                                             (this.value < 0 ? 0 : this.value) / this.max,
                                             new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                                                     offset: 0,
-                                                    color: "rgba(28, 153, 255, .1)",
+                                                    color: !this.theme ?
+                                                        "rgba(28, 153, 255, .1)" : "#1850B3",
                                                 },
                                                 {
                                                     offset: 1,
@@ -360,7 +365,7 @@
         },
 
         watch: {
-            "$store.state.themeName"() {
+            "$store.state.theme"() {
                 this.initChart();
             },
         },

src/components/homeComponent/echartsGaugeComponent.vue

@@ -4,7 +4,7 @@
             <!-- 功率复核 PowerLoad -->
             <Col v-for="item in PowerLoad" :key="item" :span="6">
             <echarts-gauge :title="item.title" :unit="item.unit" :value="item.value" :max="item.max" height="98px"
-                width="100%" color="#1C99FF" />
+                width="100%" color="#1C99FF" :theme="theme" />
             </Col>
         </Row>
     </div>
@@ -21,7 +21,6 @@
             Col,
             echartsGauge,
         },
-
         data() {
             return {
                 // 功率复核数据
@@ -35,6 +34,10 @@
                 type: Array,
                 default: () => [],
             },
+            theme: {
+                type: Boolean,
+                default: false,
+            },
         },
 
         mounted() {

src/components/homeComponent/echartsPie.vue

@@ -11,6 +11,10 @@
         name: "percent-pie",
         componentName: "percent-pie",
         props: {
+            theme: {
+                type: Boolean,
+                default: false,
+            },
             width: {
                 type: String,
                 default: "100%",
@@ -53,7 +57,7 @@
                 var chartDom = document.getElementById('pie-chart-' + this.index);
                 var chart = echarts.init(chartDom);
                 let option = {
-                    color: ['#1C99FF', '#54575D'],
+                    color: !this.theme ? ['#1C99FF', '#54575D'] : this.colors,
                     series: [{
                         type: 'pie',
                         radius: '60%',
@@ -101,26 +105,8 @@
             this.initChart();
         },
         watch: {
-            list: {
-                handler(val) {
-                    if (val && val.length) {
-                        this.$nextTick(() => {
-                            this.$el.style.width = this.width;
-                            this.$el.style.height = this.height;
-                            this.list.forEach((value, index) => {
-                                this.initChart(value, index);
-                            });
-                            this.firstAnimation = false;
-                        });
-                    }
-                },
-                deep: true,
-                immediate: true,
-            },
-            "$store.state.themeName"() {
-                this.list.forEach((value, index) => {
-                    this.initChart(value, index);
-                });
+            '$store.state.theme'(val) {
+                this.initChart()
             },
         },
         unmounted() {

src/components/homeComponent/echartsPie2.vue

@@ -11,6 +11,10 @@
         name: "percent-pie",
         componentName: "percent-pie",
         props: {
+            theme: {
+                type: Boolean,
+                default: true,
+            },
             width: {
                 type: String,
                 default: "100%",
@@ -24,9 +28,9 @@
                 default: 1,
             },
             //  传入数据
-            list: {
-                type: Array,
-                default: () => [],
+            data: {
+                type: Object,
+                default: () => {},
             },
             colors: {
                 type: Array,
@@ -49,30 +53,34 @@
             },
         },
         methods: {
-            initChart(value, index) {
+            initChart() {
                 var chartDom = document.getElementById('pie-chart-x-' + this.index);
+                chartDom.removeAttribute("_echarts_instance_") ? chartDom.removeAttribute("_echarts_instance_") : ''
+
                 var chart = echarts.init(chartDom);
                 var option;
-
+                let titleStr = this.index === 1 ? this.data.yjhwcl + '%' : this.data.njhwcl + '%'
                 option = {
                     title: {
-                        text: '25%',
+                        text: titleStr,
                         top: 'center',
                         left: 'center',
                         textStyle: {
                             fontSize: 16,
-                            color: '#fff'
+                            color: !this.theme ? '#fff' : '#1850B3'
                         }
                     },
-                    color: ['#1C99FF', '#54575D'],
+                    color: !this.theme ? ['#1C99FF', '#54575D'] : ['#1850B3', '#B2B8CA'],
                     series: [{
                         name: 'Access From',
                         type: 'pie',
                         radius: ['60%', '70%'],
                         avoidLabelOverlap: false,
                         label: {
-                            show: false,
-                            position: 'center'
+                            normal: {
+                                show: false,
+                                formatter: '{b}: {d}%'
+                            }
                         },
                         emphasis: {
                             label: {
@@ -83,14 +91,15 @@
                             show: false
                         },
                         data: [{
-                                value: 1048,
-                                name: 'Search Engine'
-                            },
-                            {
-                                value: 735,
-                                name: 'Direct'
-                            }
-                        ]
+                            value: this.index === 1 ? this.data.yjhwcl > 100 ? 100 : this.data
+                                .yjhwcl : this.data.njhwcl > 100 ? 100 : this.data.njhwcl,
+                            name: '分'
+                        }, {
+                            value: this.index === 1 ? (100 - this.data.yjhwcl) < 1 ? 0 : (100 - this
+                                .data.yjhwcl) : (100 - this.data
+                                .njhwcl) < 1 ? 0 : (100 - this.data.njhwcl),
+                            name: '总'
+                        }]
                     }]
                 };
 
@@ -117,26 +126,11 @@
             this.initChart();
         },
         watch: {
-            list: {
-                handler(val) {
-                    if (val && val.length) {
-                        this.$nextTick(() => {
-                            this.$el.style.width = this.width;
-                            this.$el.style.height = this.height;
-                            this.list.forEach((value, index) => {
-                                this.initChart(value, index);
-                            });
-                            this.firstAnimation = false;
-                        });
-                    }
-                },
-                deep: true,
-                immediate: true,
+            data() {
+                this.initChart()
             },
-            "$store.state.themeName"() {
-                this.list.forEach((value, index) => {
-                    this.initChart(value, index);
-                });
+            '$store.state.theme'(val) {
+                this.initChart()
             },
         },
         unmounted() {

src/components/homeComponent/forecastBarComponent.vue

@@ -30,6 +30,10 @@
                 type: Number,
                 default: 150,
             },
+            theme: {
+                type: Boolean,
+                default: false,
+            },
             colors: {
                 type: Array,
                 default: () => ["#FF9B23", "#1C99FF"],
@@ -171,7 +175,7 @@
                             type: "pictorialBar",
                             itemStyle: {
                                 normal: {
-                                    color: this.$store.state.themeName === "dark" ? "#20314f" : "#000",
+                                    color: this.theme ? "#fff" : "#000",
                                 },
                             },
                             animation: this.firstAnimation,
@@ -304,7 +308,7 @@
                 deep: true,
                 immediate: true,
             },
-            "$store.state.themeName"() {
+            "$store.state.theme"() {
                 this.list.forEach((value, index) => {
                     this.initChart(value, index);
                 });

src/views/home/index.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="homePage" :class="!swichTheme ? 'themeDarkHome' : 'themeLightHome'" :style="pageHeight">
+    <div class="homePage" :class="!swichTheme ? 'themeDarkHome' : 'themeLightHome'">
         <div class="homeMain">
             <div class="leftMain">
                 <div style="height:55px"></div>
@@ -20,14 +20,14 @@
                     <div class="weatherMain">
                         <div class="weatherMain_top">
                             <div class="wetherImg">
-                                <img :src="tianqi" alt="">
+                                <img :src="!swichTheme ? tianqi : tianqiW" alt="">
                             </div>
                             <div class="wetherMsg">
-                                <span class="wetherMsg_Du">11°</span>
+                                <span class="wetherMsg_Du">{{weatherFrom.temperature}}°</span>
                                 <div class="wetherMsg_Det">
-                                    <span style="margin-left:5px">阴</span>
-                                    <span>北风</span>
-                                    <span>3-4级</span>
+                                    <span style="margin-left:5px">{{weatherFrom.weather}}</span>
+                                    <span>{{weatherFrom.wind_direction}}</span>
+                                    <span>{{weatherFrom.wind_power}}</span>
                                 </div>
                             </div>
                         </div>
@@ -66,7 +66,8 @@
                                         <span style="background-color:#FF9B23"></span>
                                         <span>{{ item[0].total }}</span>
                                     </div>
-                                    <forecast-bar-component :list="item" height="40px" width="410px" />
+                                    <forecast-bar-component :list="item" height="40px" width="410px"
+                                        :theme="swichTheme" />
                                 </div>
                             </div>
                         </div>
@@ -79,7 +80,8 @@
                                             <span style="background-color:#FF9B23"></span>
                                             <span>{{ item[0].total }}</span>
                                         </div>
-                                        <forecast-bar-component :list="item" height="40px" width="410px" />
+                                        <forecast-bar-component :list="item" height="40px" width="410px"
+                                            :theme="swichTheme" />
                                     </div>
                                 </div>
                             </div>
@@ -104,7 +106,7 @@
                         </div>
                     </div>
                     <div class="powerMain">
-                        <echarts-gauge-component :data="powerDataHome" />
+                        <echarts-gauge-component :data="powerDataHome" :theme="swichTheme" />
                     </div>
                 </div>
             </div>
@@ -158,7 +160,8 @@
                                     <span>30</span>
                                 </div>
                                 <div class="analLeftEcharts">
-                                    <echarts-pie :data="analyPieData" :index="1" />
+                                    <echarts-pie :data="analyPieData" :index="1" :theme="swichTheme"
+                                        :colors="['#1850B3', '#B2B8CA']" />
                                     <span class="echartsNum">25%</span>
                                     <span class="echartsName">提升率</span>
                                 </div>
@@ -185,16 +188,17 @@
                                     </div>
                                 </div>
                             </div>
-                            <div class="analysMain_left">
+                            <div class="analysMain_left analysMain_right">
                                 <div class="analLeftTop">
                                     <img :src="dlBot1" alt="">
-                                    <span>增发电量</span>
+                                    <span>损失电量</span>
                                     <span>30</span>
                                 </div>
                                 <div class="analLeftEcharts">
-                                    <echarts-pie :data="analyPieData" :index="2" />
-                                    <span class="echartsNum">25%</span>
-                                    <span class="echartsName">提升率</span>
+                                    <echarts-pie :data="analyPieData" :index="2" :theme="swichTheme"
+                                        :colors="['#F87909', '#B2B8CA']" />
+                                    <span class="echartsNum echartsJing">25%</span>
+                                    <span class="echartsName">降低率</span>
                                 </div>
                                 <div class="analLeftBot">
                                     <div class="analLeftBot_top">
@@ -202,7 +206,7 @@
                                         <div class="analyleftbottopAll">
                                             <div class="analyleftbottopName">及时并网增发电量</div>
                                             <div class="analyleftbottopSty">
-                                                <span>30</span>
+                                                <span class="echartsJing">30</span>
                                                 <img :src="dlBot2" alt="">
                                             </div>
                                         </div>
@@ -212,7 +216,7 @@
                                         <div class="analyleftbottopAll">
                                             <div class="analyleftbottopName">主动维护降低损失电量</div>
                                             <div class="analyleftbottopSty">
-                                                <span>30</span>
+                                                <span class="echartsJing">30</span>
                                                 <img :src="dlBot2" alt="">
                                             </div>
                                         </div>
@@ -249,17 +253,17 @@
                         <div class="planMain">
                             <div class="planMain_left">
                                 <div class="analysMain_echarts">
-                                    <echarts-pie-2 :data="powerPlanData" :index="1" />
+                                    <echarts-pie-2 :data="powerPlanData" :index="1" :theme="swichTheme" />
                                 </div>
                                 <div class="analysMain_Msg">
                                     <div class="analysMain_Msg_top">
                                         <div class="analysMain_Msg_top_flex">
                                             <span>计划</span>
-                                            <span>343</span>
+                                            <span>{{Math.floor(powerPlanData.yjhwc)}}</span>
                                         </div>
                                         <div class="analysMain_Msg_top_flex">
                                             <span>实际</span>
-                                            <span>434</span>
+                                            <span>{{Math.floor(powerPlanData.ysjwc)}}</span>
                                         </div>
                                     </div>
                                     <div class="analysMain_Msg_bot">
@@ -269,21 +273,21 @@
                             </div>
                             <div class="planMain_left">
                                 <div class="analysMain_echarts">
-                                    <echarts-pie-2 :data="powerPlanData" :index="2" />
+                                    <echarts-pie-2 :data="powerPlanData" :index="2" :theme="swichTheme" />
                                 </div>
                                 <div class="analysMain_Msg">
                                     <div class="analysMain_Msg_top">
                                         <div class="analysMain_Msg_top_flex">
                                             <span>计划</span>
-                                            <span>343</span>
+                                            <span>{{Math.floor(powerPlanData.njhwc)}}</span>
                                         </div>
                                         <div class="analysMain_Msg_top_flex">
                                             <span>实际</span>
-                                            <span>434</span>
+                                            <span>{{Math.floor(powerPlanData.nsjwc)}}</span>
                                         </div>
                                     </div>
                                     <div class="analysMain_Msg_bot">
-                                        <span>月计划完成率</span>
+                                        <span>年计划完成率</span>
                                     </div>
                                 </div>
                             </div>
@@ -310,6 +314,7 @@
     import fengjiBack from '@/assets/images/indexCom/fengjiBack.png'
     import tixing from '@/assets/images/indexCom/tixing.png'
     import tianqi from '@/assets/menuImg/power_tqyb.png'
+    import tianqiW from '@/assets/images/indexCom/weatherW.png'
 
     import dlTop1 from '@/assets/images/indexCom/dlTop1.png'
     import dlTop2 from '@/assets/images/indexCom/dlTop2.png'
@@ -329,6 +334,10 @@
     import echartsPie from "@/components/homeComponent/echartsPie.vue";
     import echartsPie2 from "@/components/homeComponent/echartsPie2.vue";
 
+    import {
+        apiGethomeData
+    } from '@/api/gengra'
+
     export default {
         components: {
             forecastBarComponent,
@@ -338,11 +347,13 @@
         },
         data() {
             return {
+                swichTheme: null,
                 fengji: fengji,
                 quan: quan,
                 fengjiBack: fengjiBack,
                 tixing: tixing,
                 tianqi: tianqi,
+                tianqiW: tianqiW,
                 wea1: wea1,
                 wea2: wea2,
                 wea3: wea3,
@@ -362,36 +373,17 @@
                 powerAnalyRadio: '日',
                 analyPieData: [],
                 powerPlanRadio: '风',
-                powerPlanData: []
+                powerPlanData: {},
+                homeDataVo: {},
+                weatherFrom: {
+                    temperature: '',
+                    weather: '',
+                    wind_direction: '',
+                    wind_power: '',
+                }
             }
         },
         created() {
-            this.weatherArr = [{
-                    name: '能见度',
-                    value: 20,
-                    img: wea1
-                },
-                {
-                    name: '湿度',
-                    value: 70.5,
-                    img: wea2
-                },
-                {
-                    name: '气压',
-                    value: 99,
-                    img: wea3
-                },
-                {
-                    name: '日出时间',
-                    value: '04:36',
-                    img: wea4
-                },
-                {
-                    name: '日落时间',
-                    value: '18:50',
-                    img: wea5
-                },
-            ]
             this.fengjiArr = [{
                     name: '繁食沟风电场',
                     left: '23%',
@@ -423,63 +415,7 @@
                     top: '50%'
                 },
             ]
-            this.dayFa = [
-                [{
-                    name: "日发电量",
-                    id: "day",
-                    value: (12548 / 10000).toFixed(2),
-                    color: '#FF9B23',
-                    total: (32548 / 10000).toFixed(2),
-                }, ],
-                [{
-                    name: "日预测电量",
-                    id: "day2",
-                    value: (12548 / 10000).toFixed(2),
-                    color: '#FF9B23',
-                    total: (32548 / 10000).toFixed(2),
-                }, ],
-            ]
-            this.monthFa = [
-                [{
-                    name: "月发电量",
-                    id: "day",
-                    value: (12548 / 10000).toFixed(2),
-                    color: '#1C99FF',
-                    total: (32548 / 10000).toFixed(2),
-                }, ],
-                [{
-                    name: "月预测电量",
-                    id: "day2",
-                    value: (12548 / 10000).toFixed(2),
-                    color: '#1C99FF',
-                    total: (32548 / 10000).toFixed(2),
-                }, ],
-            ]
-            this.powerDataHome = [{
-                    title: "风速",
-                    value: 15,
-                    max: 25,
-                    unit: "MW",
-                },
-                {
-                    title: "保证功率",
-                    value: 1254,
-                    max: 3000,
-                    unit: "MW",
-                },
-                {
-                    title: "应发功率",
-                    value: 3256,
-                    max: 4000,
-                    unit: "MW",
-                },
-                {
-                    title: "实发功率",
-                    value: 3256,
-                    max: 4000,
-                    unit: "MW",
-                },
-            ];
+
         },
         computed: {
             pageHeight() {
@@ -488,14 +424,198 @@
                 }
             }
         },
+        watch: {
+            "$store.state.theme"(newVal, oldVal) {
+                this.swichTheme = newVal
+                this.getHomeData()
+            }
+        },
         mounted() {
-            this.getPowerBar()
+            this.swichTheme = JSON.parse(window.sessionStorage.getItem('theme'))
             this.getPowerLine()
+            this.getHomeData()
         },
         methods: {
             fengjiStyFn(it) {
                 return `left:${it.left};top:${it.top}`
             },
+            getHomeData() {
+                let that = this
+                let params = {
+                    wpId: 'GJNY_SXGS_DBXNY_ZGS0'
+                }
+                apiGethomeData(params).then(res => {
+                    if (res && res.data) {
+                        if (res.data.tq) {
+
+                            //天气预报
+                            let weatherObj = JSON.parse(res.data.tq[0].content)
+                            that.weatherFrom = {
+                                temperature: weatherObj.weather.temperature,
+                                weather: weatherObj.weather.weather,
+                                wind_direction: weatherObj.weather.wind_direction,
+                                wind_power: weatherObj.weather.wind_power,
+                            }
+                            this.weatherArr = [{
+                                    name: '能见度',
+                                    value: weatherObj.weather.visibility,
+                                    img: wea1
+                                },
+                                {
+                                    name: '湿度',
+                                    value: weatherObj.weather.humidity,
+                                    img: wea2
+                                },
+                                {
+                                    name: '气压',
+                                    value: weatherObj.weather.pressure,
+                                    img: wea3
+                                },
+                                {
+                                    name: '日出时间',
+                                    value: weatherObj.feature.sunriseTime,
+                                    img: wea4
+                                },
+                                {
+                                    name: '日落时间',
+                                    value: weatherObj.feature.sunsetTime,
+                                    img: wea5
+                                },
+                            ]
+                        }
+                        //预测电量
+                        if (res.data.vo) {
+                            that.homeDataVo = res.data.vo
+                            let it = res.data.vo
+                            that.dayFa = [
+                                [{
+                                    name: "日发电量",
+                                    id: "day",
+                                    value: it.rfdl || 200,
+                                    color: '#FF9B23',
+                                    total: 1000,
+                                }, ],
+                                [{
+                                    name: "日预测电量",
+                                    id: "day2",
+                                    value: it.rycdl || 200,
+                                    color: '#FF9B23',
+                                    total: 1000,
+                                }, ],
+                            ]
+                            that.monthFa = [
+                                [{
+                                    name: "月发电量",
+                                    id: "day",
+                                    value: it.yfdl || 200,
+                                    color: '#1C99FF',
+                                    total: 100000,
+                                }, ],
+                                [{
+                                    name: "月预测电量",
+                                    id: "day2",
+                                    value: it.yycdl || 200,
+                                    color: '#1C99FF',
+                                    total: 100000,
+                                }, ],
+                            ]
+                            that.powerDataHome = [{
+                                    title: "风速",
+                                    value: it.pjfs,
+                                    max: 25,
+                                    unit: "MW",
+                                },
+                                {
+                                    title: "保证功率",
+                                    value: it.bzgl,
+                                    max: it.bzgl * 1.08,
+                                    unit: "MW",
+                                },
+                                {
+                                    title: "应发功率",
+                                    value: it.yfgl,
+                                    max: it.yfgl * 1.08,
+                                    unit: "MW",
+                                },
+                                {
+                                    title: "实发功率",
+                                    value: it.sfgl,
+                                    max: it.sfgl * 1.08,
+                                    unit: "MW",
+                                },
+                            ];
+                        }
+                        //计划电量完成情况
+                        if (res.data.jhwcl) {
+                            that.powerPlanData = res.data.jhwcl
+                        }
+                        // 月发电量
+                        if (res.data.dllist && res.data.dllist.length > 0) {
+                            let xAxis = []
+                            let seriesRF = []
+                            let seriesSW = []
+                            let seriesGW = []
+                            res.data.dllist.forEach(it => {
+                                let date = it.recordDate.substring(0, it.recordDate.indexOf(' '))
+                                xAxis.push(date)
+                                seriesRF.push(it.rfdldb / 10000)
+                                seriesSW.push(it.rswdldb / 10000)
+                                seriesGW.push(it.rgwgwdldb / 10000)
+                            })
+                            let series = [{
+                                    name: '日发电量',
+                                    data: seriesRF,
+                                    barGap: '0',
+                                    type: 'bar'
+                                },
+                                {
+                                    name: '上网电量',
+                                    data: seriesSW,
+                                    type: 'bar'
+                                },
+                                {
+                                    name: '购网电量',
+                                    data: seriesGW,
+                                    type: 'bar'
+                                }
+                            ]
+                            that.getPowerBar(xAxis, series)
+                        }
+                        // 72小时功率曲线
+                        if (res.data['72time'] && res.data['72time'].length > 0) {
+                            let xAxis = []
+                            let seriesSpeed = []
+                            let seriesGl = []
+                            res.data['72time'].forEach(it => {
+                                let date = it.time.substring(0, it.time.indexOf('T') + 3)
+                                xAxis.push(date)
+                                seriesSpeed.push(it.speed)
+                                seriesGl.push(it.gl)
+                            })
+                            let series = [{
+                                    name: '平均风速',
+                                    data: seriesSpeed,
+                                    yAxisIndex: 1,
+                                    type: 'line',
+                                    symbol: 'none'
+                                },
+                                {
+                                    name: '应发功率',
+                                    data: seriesGl,
+                                    type: 'line',
+                                    symbol: 'none'
+                                },
+                                // {
+                                //     name: '实际功率',
+                                //     data: seriesGl,
+                                //     type: 'bar'
+                                // }
+                            ]
+                            that.getPowerLine(xAxis, series)
+                        }
+                    }
+                })
+            },
             getPowerBar(xAxis, series) {
                 let option = {
                     title: {
@@ -505,7 +625,7 @@
                         textStyle: {
                             fontSize: '16',
                             fontWeight: 400,
-                            color: '#fff'
+                            color: !this.swichTheme ? '#fff' : '#1850B3'
                         }
                     },
                     color: ['#7981AF', '#1C99FF', '#E57F25'],
@@ -524,6 +644,9 @@
                     },
                     legend: {
                         right: '20',
+                        top: '20',
+                        itemWidth: 5,
+                        itemHeight: 5,
                         data: ['日发电量', '上网电量', '购网电量']
                     },
                     xAxis: [{
@@ -531,7 +654,7 @@
                         axisTick: {
                             show: false
                         },
-                        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+                        data: xAxis
                     }],
                     yAxis: [{
                         type: 'value',
@@ -543,20 +666,7 @@
                         },
                         name: '单位：万KWh'
                     }],
-                    series: [{
-                            data: [120, 200, 150, 80, 70, 110, 130],
-                            barGap: '0',
-                            type: 'bar'
-                        },
-                        {
-                            data: [120, 200, 150, 80, 70, 110, 130],
-                            type: 'bar'
-                        },
-                        {
-                            data: [120, 200, 150, 80, 70, 110, 130],
-                            type: 'bar'
-                        }
-                    ]
+                    series: series
                 };
                 if (!this.theme) {
                     option.backgroundColor = ''
@@ -570,7 +680,7 @@
                     myChart.resize()
                 })
             },
-            getPowerLine(xAxis, legend, series) {
+            getPowerLine(xAxis, series) {
                 let option = {
                     title: {
                         text: '72小时功率曲线',
@@ -579,17 +689,21 @@
                         textStyle: {
                             fontSize: '16',
                             fontWeight: 400,
-                            color: '#fff'
+                            color: !this.swichTheme ? '#fff' : '#1850B3'
                         }
                     },
                     tooltip: {
                         trigger: 'axis'
                     },
-                    color: ['#7981AF', '#1C99FF', '#E57F25'],
+                    // color: ['#7981AF', '#1C99FF', '#E57F25'],
+                    color: ['#1C99FF', '#E57F25'],
                     legend: {
-                        // width: '380',
                         right: '20',
-                        data: legend
+                        top: '20',
+                        itemWidth: 5,
+                        itemHeight: 5,
+                        // data: ['平均风速', '应发功率', '实际功率']
+                        data: ['平均风速', '应发功率']
                     },
                     grid: {
                         left: '2%',
@@ -601,23 +715,30 @@
                     xAxis: {
                         type: 'category',
                         boundaryGap: false,
-                        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+                        data: xAxis
                     },
-                    yAxis: {
-                        type: 'value',
-                        splitNumber: 3,
-                        splitLine: {
-                            lineStyle: {
-                                color: ['#393F4D']
-                            }
+                    yAxis: [{
+                            type: 'value',
+                            splitNumber: 3,
+                            splitLine: {
+                                lineStyle: {
+                                    color: ['#393F4D']
+                                }
+                            },
+                            name: '单位：万KWh'
                         },
-                        name: '单位：万KWh'
-                    },
-                    series: [{
-                        data: [820, 932, 901, 934, 1290, 1330, 1320],
-                        type: 'line',
-                        symbol: 'none'
-                    }]
+                        {
+                            type: 'value',
+                            splitNumber: 3,
+                            splitLine: {
+                                lineStyle: {
+                                    color: ['#393F4D']
+                                }
+                            },
+                            name: '单位：m/s'
+                        },
+                    ],
+                    series: series
                 };
                 if (!this.theme) {
                     option.backgroundColor = ''
@@ -678,7 +799,6 @@
                 .headerRight {
                     width: 427px;
                     height: 28px;
-                    background: #2D3138;
                     position: relative;
 
                     .headerName {
@@ -707,7 +827,6 @@
                             font-family: Microsoft YaHei;
                             font-weight: 400;
                             font-size: 12px;
-                            color: #787F8F;
                             line-height: 28px;
                             margin-right: 8px;
                         }
@@ -720,7 +839,6 @@
                         top: 22px;
                         width: 32px;
                         height: 6px;
-                        background: #0F0F0F;
 
                         .headerZsN {
                             position: relative;
@@ -729,7 +847,6 @@
                             display: inline-block;
                             width: 30px;
                             height: 4px;
-                            background: #41454C;
                         }
                     }
                 }
@@ -751,10 +868,6 @@
                             display: flex;
 
                             .wetherImg {
-                                img {
-                                    width: 48px;
-                                    height: 48px;
-                                }
 
                                 margin: 9px 0 0 25px;
                             }
@@ -766,7 +879,6 @@
                                     font-family: SourceHanSansCN;
                                     font-weight: 400;
                                     font-size: 30px;
-                                    color: #FFFFFF;
                                 }
 
                                 .wetherMsg_Det {
@@ -776,7 +888,6 @@
                                         font-family: Microsoft YaHei;
                                         font-weight: 400;
                                         font-size: 14px;
-                                        color: #FFFFFF;
                                         margin-right: 25px;
                                     }
                                 }
@@ -795,7 +906,6 @@
                                     font-family: SourceHanSansCN;
                                     font-weight: 400;
                                     font-size: 14px;
-                                    color: #FFFFFF;
                                     line-height: 28px;
                                 }
 
@@ -803,7 +913,6 @@
                                     font-family: Microsoft YaHei;
                                     font-weight: 400;
                                     font-size: 14px;
-                                    color: #8B93A6;
                                 }
                             }
                         }
@@ -834,7 +943,6 @@
                                     font-family: Microsoft YaHei;
                                     font-weight: 400;
                                     font-size: 14px;
-                                    color: #8B93A6;
                                     line-height: 28px;
                                 }
 
@@ -854,7 +962,6 @@
                                             height: 5px;
                                             border-radius: 5px;
                                             display: inline-block;
-                                            background-color: #fff;
                                             margin-right: 5px;
                                         }
 
@@ -862,7 +969,6 @@
                                             font-family: Bicubik;
                                             font-weight: 400;
                                             font-size: 12px;
-                                            color: #FFFFFF;
                                             position: relative;
                                             top: 2px;
                                         }
@@ -892,9 +998,7 @@
                     font-family: Microsoft YaHei;
                     font-weight: 400;
                     font-size: 18px;
-                    color: #A5ABB7;
                     line-height: 35px;
-                    text-shadow: 0px 1px 2px #070A11;
                 }
 
                 .dingbian {
@@ -933,7 +1037,6 @@
                             display: inline-block;
                             width: 6px;
                             height: 7px;
-                            background: #31FBFD;
                             border-radius: 50%;
                             position: absolute;
                             left: 3px;
@@ -976,16 +1079,9 @@
                         .el-radio-button {
                             .el-radio-button__inner {
                                 width: 48px;
-                                background: transparent;
-                                color: #fff;
-                                border: 1px solid #3B4C6C;
                             }
 
                         }
-
-                        .is-active {
-                            background: linear-gradient(90deg, rgba(28, 113, 255, 0), rgba(28, 113, 255, 0.6));
-                        }
                     }
                 }
 
@@ -1015,7 +1111,6 @@
                                         font-family: Microsoft YaHei;
                                         font-weight: 400;
                                         font-size: 14px;
-                                        color: #8B93A6;
                                         line-height: 28px;
                                         margin-left: 3px;
                                     }
@@ -1031,7 +1126,6 @@
                                         font-family: Bicubik;
                                         font-weight: 400;
                                         font-size: 16px;
-                                        color: #1C99FF;
                                     }
 
                                     .echartsName {
@@ -1041,7 +1135,6 @@
                                         font-family: Microsoft YaHei;
                                         font-weight: 400;
                                         font-size: 14px;
-                                        color: #8B93A6;
                                     }
                                 }
 
@@ -1063,7 +1156,6 @@
                                                 font-family: Microsoft YaHei;
                                                 font-weight: 400;
                                                 font-size: 14px;
-                                                color: #8B93A6;
                                                 line-height: 28px;
                                             }
 
@@ -1076,7 +1168,6 @@
                                                     font-family: Bicubik;
                                                     font-weight: 400;
                                                     font-size: 16px;
-                                                    color: #FFFFFF;
                                                     line-height: 28px;
                                                 }
 
@@ -1112,7 +1203,6 @@
                                 .analysMain_echarts {
                                     width: 100%;
                                     text-align: center;
-                                    border-bottom: 1px dashed #393F4D;
                                 }
 
                                 .analysMain_Msg {
@@ -1123,15 +1213,18 @@
 
                                         .analysMain_Msg_top_flex {
                                             display: flex;
-                                            justify-content: space-between;
-                                            padding: 0 20px;
-                                            width: 60px;
+                                            padding: 0 10px;
+                                            width: calc(100% - 20px);
+
+                                            span {
+                                                display: inline-block;
+                                            }
 
                                             span:nth-child(1) {
+                                                width: 30px;
                                                 font-family: Microsoft YaHei;
                                                 font-weight: 400;
                                                 font-size: 14px;
-                                                color: #8B93A6;
                                                 line-height: 28px;
                                             }
 
@@ -1139,14 +1232,12 @@
                                                 font-family: Arial;
                                                 font-weight: 400;
                                                 font-size: 14px;
-                                                color: #FFFFFF;
                                                 line-height: 28px;
                                             }
                                         }
                                     }
 
                                     .analysMain_Msg_bot {
-                                        background: #2D3138;
                                         // opacity: 0.5;
                                         text-align: center;
 
@@ -1154,7 +1245,6 @@
                                             font-family: Microsoft YaHei;
                                             font-weight: 400;
                                             font-size: 14px;
-                                            color: #8B93A6;
                                             line-height: 28px;
                                         }
                                     }
@@ -1200,6 +1290,497 @@
                 background-size: 90%;
                 background-position: center;
             }
+
+            .map {
+
+                .dingbian,
+                .jingbian {
+                    color: #A5ABB7;
+                    text-shadow: 0px 1px 2px #070A11;
+                }
+
+                .fengjiSty {
+                    .mainSv {
+                        .dianSty {
+                            background: #31FBFD;
+                        }
+                    }
+                }
+            }
+
+            .comHeader {
+                .headerRight {
+                    background: #2D3138;
+
+                    .headerNaAll {
+                        .headerNa2 {
+                            color: #787F8F;
+                        }
+                    }
+
+                    .headerZs {
+                        background: #0F0F0F;
+
+                        .headerZsN {
+                            background: #41454C;
+
+                        }
+                    }
+                }
+            }
+
+            .leftMain {
+                .weather {
+                    .weatherMain {
+                        .weatherMain_top {
+                            .wetherImg {
+                                img {
+                                    width: 48px;
+                                    height: 48px;
+                                }
+
+                            }
+
+                            .wetherMsg {
+                                .wetherMsg_Du {
+                                    color: #FFFFFF;
+                                }
+
+                                .wetherMsg_Det {
+                                    span {
+                                        color: #FFFFFF;
+                                    }
+                                }
+                            }
+                        }
+
+                        .weatherMain_bot {
+
+                            .weaMain {
+
+                                .pOne {
+                                    color: #FFFFFF;
+                                }
+
+                                .pTwo {
+                                    color: #8B93A6;
+                                }
+                            }
+                        }
+                    }
+                }
+
+                .Electric {
+
+                    .electricMain {
+
+                        .electricMain_day,
+                        .electricMain_month {
+                            .powerCharts {
+
+                                .powerName {
+                                    color: #8B93A6;
+                                }
+
+                                .powerItem {
+
+                                    .powerValue {
+
+                                        span:nth-child(1) {
+                                            background-color: #fff;
+                                        }
+
+                                        span:nth-child(2) {
+                                            color: #FFFFFF;
+                                        }
+                                    }
+                                }
+                            }
+                        }
+
+
+                    }
+                }
+            }
+
+            .rightMain {
+
+                .analysRadio {
+
+                    .el-radio-group {
+
+                        .el-radio-button {
+                            .el-radio-button__inner {
+                                color: #fff;
+                                border: 1px solid #3B4C6C;
+                                background: transparent;
+
+                            }
+
+                        }
+
+                        .is-active {
+                            background: linear-gradient(90deg, rgba(28, 113, 255, 0), rgba(28, 113, 255, 0.6));
+                        }
+                    }
+                }
+
+                .powerAnalysis {
+                    .powerAnalysisMain {
+
+
+                        .analysMain {
+
+                            .analysMain_left {
+
+                                .analLeftTop {
+
+                                    span {
+                                        color: #8B93A6;
+                                    }
+                                }
+
+                                .analLeftEcharts {
+
+                                    .echartsNum {
+                                        color: #1C99FF;
+                                    }
+
+                                    .echartsName {
+                                        color: #8B93A6;
+                                    }
+                                }
+
+                                .analLeftBot {
+                                    .analLeftBot_top {
+
+                                        .analyleftbottopAll {
+
+                                            .analyleftbottopName {
+                                                color: #8B93A6;
+                                            }
+
+                                            .analyleftbottopSty {
+
+                                                span {
+                                                    color: #FFFFFF;
+                                                }
+                                            }
+                                        }
+                                    }
+                                }
+                            }
+                        }
+                    }
+                }
+
+                .powerPlan {
+
+                    .powerPlanMain {
+                        .planMain {
+
+                            .planMain_left {
+
+                                .analysMain_echarts {
+                                    border-bottom: 1px dashed #393F4D;
+                                }
+
+                                .analysMain_Msg {
+                                    .analysMain_Msg_top {
+
+                                        .analysMain_Msg_top_flex {
+
+                                            span:nth-child(1) {
+                                                color: #8B93A6;
+                                            }
+
+                                            span:nth-child(2) {
+                                                color: #FFFFFF;
+                                            }
+                                        }
+                                    }
+
+                                    .analysMain_Msg_bot {
+                                        background: #2D3138;
+
+                                        span {
+                                            color: #8B93A6;
+                                        }
+                                    }
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+
+        .footer {
+
+            .monthPower {
+                background: rgba(41, 45, 53, 0.4);
+            }
+
+            .hover72Power {
+                background: rgba(41, 45, 53, 0.4);
+            }
+        }
+    }
+
+    .themeLightHome {
+        background-color: #e6e8f2;
+        background-image: url('@/assets/images/indexCom/backImg_W.png');
+        background-repeat: no-repeat;
+
+        .homeMain {
+
+            .map {
+                background-image: url('@/assets/images/indexCom/map_W.png');
+                background-repeat: no-repeat;
+                background-size: 90%;
+                background-position: center;
+            }
+
+            .map {
+
+                .dingbian,
+                .jingbian {
+                    color: #fff;
+                    text-shadow: 0px 1px 2px #070A11;
+                }
+
+                .fengjiSty {
+                    .mainSv {
+                        .dianSty {
+                            background: #1850B3;
+                            border: 1px solid #FFFFFF;
+                        }
+                    }
+                }
+            }
+
+            .comHeader {
+                .headerRight {
+                    background: #1850B3;
+
+                    .headerNaAll {
+                        .headerNa2 {
+                            color: #BABED3;
+                        }
+                    }
+
+                    .headerZs {
+                        background: #fff;
+
+                        .headerZsN {
+                            background: #4F70EC;
+
+                        }
+                    }
+                }
+            }
+
+            .leftMain {
+                .weather {
+                    .weatherMain {
+                        .weatherMain_top {
+                            .wetherMsg {
+                                .wetherMsg_Du {
+                                    color: #1850B3;
+                                }
+
+                                .wetherMsg_Det {
+                                    span {
+                                        color: #575A5F;
+                                    }
+                                }
+                            }
+                        }
+
+                        .weatherMain_bot {
+
+                            .weaMain {
+
+                                .pOne {
+                                    color: #575A5F;
+                                }
+
+                                .pTwo {
+                                    color: #646972;
+                                }
+                            }
+                        }
+                    }
+                }
+
+                .Electric {
+
+                    .electricMain {
+
+                        .electricMain_day,
+                        .electricMain_month {
+                            .powerCharts {
+
+                                .powerName {
+                                    color: #67666C;
+                                }
+
+                                .powerItem {
+
+                                    .powerValue {
+
+                                        span:nth-child(1) {
+                                            background-color: #fff;
+                                        }
+
+                                        span:nth-child(2) {
+                                            color: #242426;
+                                        }
+                                    }
+                                }
+                            }
+                        }
+
+
+                    }
+                }
+            }
+
+            .rightMain {
+
+                .analysRadio {
+
+                    .el-radio-group {
+
+                        .el-radio-button {
+                            .el-radio-button__inner {
+                                color: #646972;
+                            }
+
+                        }
+
+                        .is-active {
+
+                            .el-radio-button__inner {
+                                background: #1850B3 !important;
+                                color: #fff;
+
+                            }
+                        }
+                    }
+                }
+
+                .powerAnalysis {
+                    .powerAnalysisMain {
+
+
+                        .analysMain {
+
+                            .analysMain_left {
+
+                                .analLeftTop {
+
+                                    span:nth-child(1) {
+                                        color: #646972;
+                                    }
+
+                                    span:nth-child(2) {
+                                        color: #242426;
+                                    }
+                                }
+
+                                .analLeftEcharts {
+
+                                    .echartsNum {
+                                        color: #1850B3;
+                                    }
+
+                                    .echartsJing {
+                                        color: #F87909;
+                                    }
+
+                                    .echartsName {
+                                        color: #646972;
+                                    }
+                                }
+
+                                .analLeftBot {
+                                    .analLeftBot_top {
+
+                                        .analyleftbottopAll {
+
+                                            .analyleftbottopName {
+                                                color: #646972;
+                                            }
+
+                                            .analyleftbottopSty {
+
+                                                span {
+                                                    color: #1850B3;
+                                                }
+
+                                                .echartsJing {
+                                                    color: #F87909;
+                                                }
+                                            }
+                                        }
+                                    }
+                                }
+                            }
+                        }
+                    }
+                }
+
+                .powerPlan {
+
+                    .powerPlanMain {
+                        .planMain {
+
+                            .planMain_left {
+
+                                .analysMain_echarts {
+                                    border-bottom: 1px dashed #393F4D;
+                                }
+
+                                .analysMain_Msg {
+                                    .analysMain_Msg_top {
+
+                                        .analysMain_Msg_top_flex {
+
+                                            span:nth-child(1) {
+                                                color: #646972;
+                                            }
+
+                                            span:nth-child(2) {
+                                                color: #1850B3;
+                                            }
+                                        }
+                                    }
+
+                                    .analysMain_Msg_bot {
+                                        background: #ccd0de;
+
+                                        span {
+                                            color: #646972;
+                                        }
+                                    }
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+
+        .footer {
+
+            .monthPower {
+                background: rgba(255, 255, 255, 0.8);
+            }
+
+            .hover72Power {
+                background: rgba(255, 255, 255, 0.8);
+            }
         }
     }
 </style>

src/views/powerPrediction/homePageNoMap.vue

@@ -1,10 +1,13 @@
 <template>
     <div class="homePageNoMap" :class="!theme ? 'themeDark' : 'themeLight'" :style="pageHeight">
         <div class="windStstus">
-            <div class="everyOne" v-for="(item, index) in statusData" :key="index" :style="statusSty(item)">
-                <img :src="item.img" alt="">
-                <span class="statusName" :style="{color: `${item.borderSty}`}">{{item.name}}</span>
-                <span class="statusNum" :style="{border: `1px solid ${item.borderSty}`}">{{item.number}}</span>
+            <div class="everyOne" v-for="(item, index) in !theme ? statusData : statusDataW" :key="index"
+                :style="statusSty(item)">
+                <div class="everyOneImg" style="width:39px">
+                    <img :src="item.img" alt="">
+                </div>
+                <span class="statusName" :style="{color: `${!theme ? item.borderSty : '#fff'}`}">{{item.name}}</span>
+                <span class="statusNum" :style="statusNumSty(item)">{{item.number}}</span>
             </div>
         </div>
         <div class="homePage_main">
@@ -78,12 +81,15 @@
         <div class="footer">
             <div class="exitV">
                 <div class="time">
+                    <img :src="!theme ? timeImg1 : timeImg" alt="">
                     <span>服务器时间：{{currentTime}}</span>
                 </div>
                 <div class="earlywarning">
                     <div class="warningdata" v-for="item in warningData" :key="item.name">
-                        <span style="color:#fff">{{item.name}}</span>
-                        <span class="warningColor" :style="`background:${item.color}`"></span>
+                        <span>{{item.name}}</span>
+                        <!-- <span class="warningColor" :style="`background:${item.color}`"></span> -->
+                        <img :src="item.img" alt="">
+
                     </div>
                 </div>
             </div>
@@ -119,6 +125,19 @@
     import fiveimg from '@/assets/windStatusPic/xiandian.png'
     import siximg from '@/assets/windStatusPic/shoulei.png'
     import sevenimg from '@/assets/windStatusPic/guzhang.png'
+    import oneimg1 from '@/assets/windStatusPic/yunxing_W.png'
+    import twoimg1 from '@/assets/windStatusPic/daiji_W.png'
+    import threeimg1 from '@/assets/windStatusPic/weihu_W.png'
+    import fourimg1 from '@/assets/windStatusPic/tingji_W.png'
+    import fiveimg1 from '@/assets/windStatusPic/xiandian_W.png'
+    import siximg1 from '@/assets/windStatusPic/shoulei_W.png'
+    import sevenimg1 from '@/assets/windStatusPic/guzhang_W.png'
+
+    import redImg from '@/assets/windStatusPic/red.png'
+    import greenImg from '@/assets/windStatusPic/green.png'
+    import yellowImg from '@/assets/windStatusPic/yellow.png'
+    import timeImg from '@/assets/windStatusPic/time.png'
+    import timeImg1 from '@/assets/windStatusPic/time1.png'
     //大风预警图片
     import windBlue from '@/assets/weather/windBlue.png'
     import windYellow from '@/assets/weather/windYellow.png'
@@ -177,7 +196,12 @@
                 sunShow: false,
                 showpowerLegend: [],
                 echartsTheme: '',
-                theme: null
+                theme: null,
+                redImg: redImg,
+                greenImg: greenImg,
+                yellowImg: yellowImg,
+                timeImg: timeImg,
+                timeImg1: timeImg1
             }
         },
         created() {
@@ -185,27 +209,27 @@
             this.warningData = [{
                     name: '通讯预警',
                     nameEn: 'txyj',
-                    color: ''
+                    img: ''
                 },
                 {
                     name: '测风塔预警',
                     nameEn: 'cftyj',
-                    color: ''
+                    img: ''
                 },
                 {
                     name: '风机数据',
                     nameEn: 'fjsj',
-                    color: ''
+                    img: ''
                 },
                 {
                     name: '中国数值气象',
                     nameEn: 'zgszqx',
-                    color: ''
+                    img: ''
                 },
                 {
                     name: '欧洲数值气象',
                     nameEn: 'ozszqx',
-                    color: ''
+                    img: ''
                 },
             ]
             this.messageDataAll = [{
@@ -462,6 +486,7 @@
                     nameEn: 'yx',
                     borderSty: '#1C99FF',
                     backSty: '#0046C7',
+                    numBack: '#212223',
                     number: 0
                 },
                 {
@@ -470,6 +495,7 @@
                     nameEn: 'dj',
                     borderSty: '#05BB4C',
                     backSty: '#258952',
+                    numBack: '#212223',
                     number: 0
                 },
                 {
@@ -478,6 +504,7 @@
                     nameEn: 'wh',
                     borderSty: '#E17D24',
                     backSty: '#694119',
+                    numBack: '#212223',
                     number: 0
                 },
                 {
@@ -486,6 +513,7 @@
                     nameEn: 'tj',
                     borderSty: '#52595B',
                     backSty: '#272a2b',
+                    numBack: '#212223',
                     number: 0
                 },
                 {
@@ -494,6 +522,7 @@
                     nameEn: 'xd',
                     borderSty: '#C530C8',
                     backSty: '#7A277F',
+                    numBack: '#212223',
                     number: 0
                 },
                 {
@@ -502,6 +531,7 @@
                     nameEn: 'lx',
                     borderSty: '#fff',
                     backSty: '#38393B',
+                    numBack: '#212223',
                     number: 0
                 },
                 {
@@ -510,6 +540,71 @@
                     nameEn: 'jx',
                     borderSty: '#BA3237',
                     backSty: '#73262B',
+                    numBack: '#212223',
+                    number: 0
+                }
+            ]
+            this.statusDataW = [{
+                    img: oneimg1,
+                    name: '运行',
+                    nameEn: 'yx',
+                    borderSty: '#3777E8',
+                    backSty: '#1850B3',
+                    numBack: '#073484',
+                    number: 0
+                },
+                {
+                    img: twoimg1,
+                    name: '待机',
+                    nameEn: 'dj',
+                    borderSty: '#6BDB97',
+                    backSty: '#0EAC4C',
+                    numBack: '#077C35',
+                    number: 0
+                },
+                {
+                    img: threeimg1,
+                    name: '维护',
+                    nameEn: 'wh',
+                    borderSty: '#F1AF74',
+                    backSty: '#E17D24',
+                    numBack: '#A6530A',
+                    number: 0
+                },
+                {
+                    img: fourimg1,
+                    name: '停机',
+                    nameEn: 'tj',
+                    borderSty: '#CDCDCD',
+                    backSty: '#A8A8A8',
+                    numBack: '#878787',
+                    number: 0
+                },
+                {
+                    img: fiveimg1,
+                    name: '限电',
+                    nameEn: 'xd',
+                    borderSty: '#E757EA',
+                    backSty: '#C530C8',
+                    numBack: '#901193',
+                    number: 0
+                },
+                {
+                    img: siximg1,
+                    name: '离线',
+                    nameEn: 'lx',
+                    borderSty: '#595D61',
+                    backSty: '#38393B',
+                    numBack: '#151719',
+                    number: 0
+                },
+                {
+                    img: sevenimg1,
+                    name: '检修',
+                    nameEn: 'jx',
+                    borderSty: '#73262B',
+                    backSty: '#BA3237',
+                    numBack: '#881B1F',
                     number: 0
                 }
             ]
@@ -619,6 +714,9 @@
             statusSty(item) {
                 return `border: 1px solid ${item.borderSty};background: ${item.backSty}`
             },
+            statusNumSty(item) {
+                return `border: 1px solid ${item.borderSty};background:${item.numBack}`
+            },
             fromCustom(name) {
                 let that = this
                 let params = {
@@ -720,11 +818,11 @@
                                 for (let it in datas.data) {
                                     if (item.nameEn === it) {
                                         if (datas.data[it] === 1) {
-                                            item.color = '#ee6666'
+                                            item.img = that.redImg
                                         } else if (datas.data[it] === 2) {
-                                            item.color = '#91cc75'
+                                            item.img = that.greenImg
                                         } else {
-                                            item.color = '#fac858'
+                                            item.img = that.yellowImg
                                         }
                                     }
                                 }
@@ -1516,12 +1614,9 @@
 
     .themeDark {
 
-        .windStstus,
-        .homePage_main {
-            background: #040c0b;
-        }
 
         .homePage_main {
+            background: #040c0b;
 
             .mainLeft,
             .mainRight {
@@ -1581,12 +1676,45 @@
                 }
             }
         }
+
+        .footer {
+            background: #040c0b;
+
+            .exitV {
+                background: #161f1e;
+                box-shadow: 0px 1px 5px 0px rgba(159, 161, 175, 0.72);
+                position: relative;
+                top: 10px;
+                border-radius: 10px 10px 0 0;
+
+                .time {
+
+                    span {
+                        font-family: Microsoft YaHei;
+                        font-weight: 400;
+                        font-size: 14px;
+                        color: #fff;
+                        line-height: 24px;
+                        margin-left: 10px;
+                    }
+                }
+
+                .earlywarning {
+                    .warningdata {
+                        span {
+                            font-family: Microsoft YaHei;
+                            font-weight: 400;
+                            font-size: 14px;
+                            color: #fff;
+                            line-height: 24px;
+                        }
+                    }
+                }
+            }
+        }
     }
 
     .themeLight {
-        .windStstus {
-            // background: linear-gradient(0deg, transparent, #373590);
-        }
 
         .homePage_main {
             background: #edeffb;
@@ -1616,5 +1744,41 @@
                 }
             }
         }
+
+        .footer {
+            background: #edeffb;
+
+            .exitV {
+                background: #fff;
+                box-shadow: 0px 1px 5px 0px rgba(159, 161, 175, 0.72);
+                position: relative;
+                top: 10px;
+                border-radius: 10px 10px 0 0;
+
+                .time {
+
+                    span {
+                        font-family: Microsoft YaHei;
+                        font-weight: 400;
+                        font-size: 14px;
+                        color: #121212;
+                        line-height: 24px;
+                        margin-left: 10px;
+                    }
+                }
+
+                .earlywarning {
+                    .warningdata {
+                        span {
+                            font-family: Microsoft YaHei;
+                            font-weight: 400;
+                            font-size: 14px;
+                            color: #121212;
+                            line-height: 24px;
+                        }
+                    }
+                }
+            }
+        }
     }
 </style>

src/views/powerPrediction/panoramicPower.vue

@@ -1,10 +1,13 @@
 <template>
     <div class="panoramicPowerPage" :class="!theme ? 'themeDark' : 'themeLight'">
         <div class="windStstus">
-            <div class="everyOne" v-for="(item, index) in statusData" :key="index" :style="statusSty(item)">
-                <img :src="item.img" alt="">
-                <span class="statusName" :style="{color: `${item.borderSty}`}">{{item.name}}</span>
-                <span class="statusNum" :style="{border: `1px solid ${item.borderSty}`}">{{item.number}}</span>
+            <div class="everyOne" v-for="(item, index) in !theme ? statusData : statusDataW" :key="index"
+                :style="statusSty(item)">
+                <div class="everyOneImg" style="width:39px">
+                    <img :src="item.img" alt="">
+                </div>
+                <span class="statusName" :style="{color: `${!theme ? item.borderSty : '#fff'}`}">{{item.name}}</span>
+                <span class="statusNum" :style="statusNumSty(item)">{{item.number}}</span>
             </div>
             <div class="windLeft">
                 <div class="windMsg">
@@ -56,6 +59,13 @@
     import fiveimg from '@/assets/windStatusPic/xiandian.png'
     import siximg from '@/assets/windStatusPic/shoulei.png'
     import sevenimg from '@/assets/windStatusPic/guzhang.png'
+    import oneimg1 from '@/assets/windStatusPic/yunxing_W.png'
+    import twoimg1 from '@/assets/windStatusPic/daiji_W.png'
+    import threeimg1 from '@/assets/windStatusPic/weihu_W.png'
+    import fourimg1 from '@/assets/windStatusPic/tingji_W.png'
+    import fiveimg1 from '@/assets/windStatusPic/xiandian_W.png'
+    import siximg1 from '@/assets/windStatusPic/shoulei_W.png'
+    import sevenimg1 from '@/assets/windStatusPic/guzhang_W.png'
     export default {
         components: {
             panoramaDialog
@@ -63,6 +73,7 @@
         data() {
             return {
                 statusData: [],
+                statusDataW: [],
                 chartsData: [],
                 weatherDataFromApi: {},
                 pickerTime: [],
@@ -92,6 +103,7 @@
                     nameEn: 'yx',
                     borderSty: '#1C99FF',
                     backSty: '#0046C7',
+                    numBack: '#212223',
                     number: 0
                 },
                 {
@@ -100,6 +112,7 @@
                     nameEn: 'dj',
                     borderSty: '#05BB4C',
                     backSty: '#258952',
+                    numBack: '#212223',
                     number: 0
                 },
                 {
@@ -108,6 +121,7 @@
                     nameEn: 'wh',
                     borderSty: '#E17D24',
                     backSty: '#694119',
+                    numBack: '#212223',
                     number: 0
                 },
                 {
@@ -116,6 +130,7 @@
                     nameEn: 'tj',
                     borderSty: '#52595B',
                     backSty: '#272a2b',
+                    numBack: '#212223',
                     number: 0
                 },
                 {
@@ -124,6 +139,7 @@
                     nameEn: 'xd',
                     borderSty: '#C530C8',
                     backSty: '#7A277F',
+                    numBack: '#212223',
                     number: 0
                 },
                 {
@@ -132,6 +148,7 @@
                     nameEn: 'lx',
                     borderSty: '#fff',
                     backSty: '#38393B',
+                    numBack: '#212223',
                     number: 0
                 },
                 {
@@ -140,6 +157,71 @@
                     nameEn: 'jx',
                     borderSty: '#BA3237',
                     backSty: '#73262B',
+                    numBack: '#212223',
+                    number: 0
+                }
+            ]
+            this.statusDataW = [{
+                    img: oneimg1,
+                    name: '运行',
+                    nameEn: 'yx',
+                    borderSty: '#3777E8',
+                    backSty: '#1850B3',
+                    numBack: '#073484',
+                    number: 0
+                },
+                {
+                    img: twoimg1,
+                    name: '待机',
+                    nameEn: 'dj',
+                    borderSty: '#6BDB97',
+                    backSty: '#0EAC4C',
+                    numBack: '#077C35',
+                    number: 0
+                },
+                {
+                    img: threeimg1,
+                    name: '维护',
+                    nameEn: 'wh',
+                    borderSty: '#F1AF74',
+                    backSty: '#E17D24',
+                    numBack: '#A6530A',
+                    number: 0
+                },
+                {
+                    img: fourimg1,
+                    name: '停机',
+                    nameEn: 'tj',
+                    borderSty: '#CDCDCD',
+                    backSty: '#A8A8A8',
+                    numBack: '#878787',
+                    number: 0
+                },
+                {
+                    img: fiveimg1,
+                    name: '限电',
+                    nameEn: 'xd',
+                    borderSty: '#E757EA',
+                    backSty: '#C530C8',
+                    numBack: '#901193',
+                    number: 0
+                },
+                {
+                    img: siximg1,
+                    name: '离线',
+                    nameEn: 'lx',
+                    borderSty: '#595D61',
+                    backSty: '#38393B',
+                    numBack: '#151719',
+                    number: 0
+                },
+                {
+                    img: sevenimg1,
+                    name: '检修',
+                    nameEn: 'jx',
+                    borderSty: '#73262B',
+                    backSty: '#BA3237',
+                    numBack: '#881B1F',
                     number: 0
                 }
             ]
@@ -264,6 +346,9 @@
             statusSty(item) {
                 return `border: 1px solid ${item.borderSty};background: ${item.backSty}`
             },
+            statusNumSty(item) {
+                return `border: 1px solid ${item.borderSty};background:${item.numBack}`
+            },
             doubleclick(item) {
                 console.log('db', item)
                 this.$refs.panorama.dialogVisible = true
@@ -500,7 +585,6 @@
 
     .themeDark {
 
-        .windStstus,
         .homePage_main {
             background: #040c0b;
         }

src/views/powerPrediction/powerPredictionPage.vue

@@ -13,10 +13,14 @@
                 </el-scrollbar>
             </el-col>
             <el-col :span="15">
-                <div class="everyOne" v-for="(item, index) in statusData" :key="index" :style="statusSty(item)">
-                    <img :src="item.img" alt="">
-                    <span class="statusName" :style="{color: `${item.borderSty}`}">{{item.name}}</span>
-                    <span class="statusNum" :style="{border: `1px solid ${item.borderSty}`}">{{item.number}}</span>
+                <div class="everyOne" v-for="(item, index) in !theme ? statusData : statusDataW" :key="index"
+                    :style="statusSty(item)">
+                    <div class="everyOneImg" style="width:39px">
+                        <img :src="item.img" alt="">
+                    </div>
+                    <span class="statusName"
+                        :style="{color: `${!theme ? item.borderSty : '#fff'}`}">{{item.name}}</span>
+                    <span class="statusNum" :style="statusNumSty(item)">{{item.number}}</span>
                 </div>
             </el-col>
         </el-row>
@@ -106,6 +110,13 @@
     import fiveimg from '@/assets/windStatusPic/xiandian.png'
     import siximg from '@/assets/windStatusPic/shoulei.png'
     import sevenimg from '@/assets/windStatusPic/guzhang.png'
+    import oneimg1 from '@/assets/windStatusPic/yunxing_W.png'
+    import twoimg1 from '@/assets/windStatusPic/daiji_W.png'
+    import threeimg1 from '@/assets/windStatusPic/weihu_W.png'
+    import fourimg1 from '@/assets/windStatusPic/tingji_W.png'
+    import fiveimg1 from '@/assets/windStatusPic/xiandian_W.png'
+    import siximg1 from '@/assets/windStatusPic/shoulei_W.png'
+    import sevenimg1 from '@/assets/windStatusPic/guzhang_W.png'
     export default {
         components: {
             powerPredictionDialog
@@ -114,6 +125,7 @@
             return {
                 windTurbines: '',
                 statusData: [],
+                statusDataW: [],
                 stationData: [],
                 pickerTime: [],
                 pickerTimeDia: [],
@@ -151,6 +163,7 @@
                     nameEn: 'yx',
                     borderSty: '#1C99FF',
                     backSty: '#0046C7',
+                    numBack: '#212223',
                     number: 0
                 },
                 {
@@ -159,6 +172,7 @@
                     nameEn: 'dj',
                     borderSty: '#05BB4C',
                     backSty: '#258952',
+                    numBack: '#212223',
                     number: 0
                 },
                 {
@@ -167,6 +181,7 @@
                     nameEn: 'wh',
                     borderSty: '#E17D24',
                     backSty: '#694119',
+                    numBack: '#212223',
                     number: 0
                 },
                 {
@@ -175,6 +190,7 @@
                     nameEn: 'tj',
                     borderSty: '#52595B',
                     backSty: '#272a2b',
+                    numBack: '#212223',
                     number: 0
                 },
                 {
@@ -183,6 +199,7 @@
                     nameEn: 'xd',
                     borderSty: '#C530C8',
                     backSty: '#7A277F',
+                    numBack: '#212223',
                     number: 0
                 },
                 {
@@ -191,6 +208,7 @@
                     nameEn: 'lx',
                     borderSty: '#fff',
                     backSty: '#38393B',
+                    numBack: '#212223',
                     number: 0
                 },
                 {
@@ -199,6 +217,71 @@
                     nameEn: 'jx',
                     borderSty: '#BA3237',
                     backSty: '#73262B',
+                    numBack: '#212223',
+                    number: 0
+                }
+            ]
+            this.statusDataW = [{
+                    img: oneimg1,
+                    name: '运行',
+                    nameEn: 'yx',
+                    borderSty: '#3777E8',
+                    backSty: '#1850B3',
+                    numBack: '#073484',
+                    number: 0
+                },
+                {
+                    img: twoimg1,
+                    name: '待机',
+                    nameEn: 'dj',
+                    borderSty: '#6BDB97',
+                    backSty: '#0EAC4C',
+                    numBack: '#077C35',
+                    number: 0
+                },
+                {
+                    img: threeimg1,
+                    name: '维护',
+                    nameEn: 'wh',
+                    borderSty: '#F1AF74',
+                    backSty: '#E17D24',
+                    numBack: '#A6530A',
+                    number: 0
+                },
+                {
+                    img: fourimg1,
+                    name: '停机',
+                    nameEn: 'tj',
+                    borderSty: '#CDCDCD',
+                    backSty: '#A8A8A8',
+                    numBack: '#878787',
+                    number: 0
+                },
+                {
+                    img: fiveimg1,
+                    name: '限电',
+                    nameEn: 'xd',
+                    borderSty: '#E757EA',
+                    backSty: '#C530C8',
+                    numBack: '#901193',
+                    number: 0
+                },
+                {
+                    img: siximg1,
+                    name: '离线',
+                    nameEn: 'lx',
+                    borderSty: '#595D61',
+                    backSty: '#38393B',
+                    numBack: '#151719',
+                    number: 0
+                },
+                {
+                    img: sevenimg1,
+                    name: '检修',
+                    nameEn: 'jx',
+                    borderSty: '#73262B',
+                    backSty: '#BA3237',
+                    numBack: '#881B1F',
                     number: 0
                 }
             ]
@@ -351,6 +434,9 @@
             statusSty(item) {
                 return `border: 1px solid ${item.borderSty};background: ${item.backSty}`
             },
+            statusNumSty(item) {
+                return `border: 1px solid ${item.borderSty};background:${item.numBack}`
+            },
             doubleclick(name) {
                 let title = ''
                 this.stationData.forEach(item => {

src/viewsCss/homePageNoMapLess.less

@@ -11,15 +11,19 @@
         .everyOne {
             display: flex;
             align-items: center;
-            width: 160px;
+            width: 165px;
             height: 25px;
             margin-right: 10px;
             border-radius: 5px;
 
-            img {
-                width: 21px;
-                height: 21px;
-                margin-left: 18px;
+            .everyOneImg {
+                width: 39px;
+
+                img {
+                    margin-left: 18px;
+                    position: relative;
+                    top: 2px;
+                }
             }
 
             .statusName {
@@ -28,10 +32,11 @@
             }
 
             .statusNum {
-                padding: 0 18px;
+                display: inline-block;
+                width: 50px;
+                text-align: center;
                 position: relative;
                 right: -37px;
-                background: #212223;
                 height: 25px;
                 line-height: 25px;
                 border-radius: 5px;
@@ -45,7 +50,7 @@
     }
 
     .homePage_main {
-        border-radius: 10px;
+        // border-radius: 10px;
         display: flex;
         justify-content: space-between;
 
@@ -206,23 +211,28 @@
     }
 
     .footer {
-        padding: 0 10px;
-        width: calc(100% - 20px);
-        height: 40px;
-        // background: #2f5eb0;
-        // border-top: 1px solid #797979;
-        position: fixed;
-        bottom: 0;
+        width: 100%;
+        height: 50px;
 
         .exitV {
-            width: 95%;
+            width: 100%;
             display: flex;
             justify-content: space-between;
             line-height: 40px;
 
             .time {
+                display: flex;
                 margin-left: 10px;
-                color: #fff;
+                position: relative;
+                top: 7px;
+                margin-left: 27px;
+
+                img {
+                    width: 22px;
+                    height: 22px;
+                    position: relative;
+                    top: 1px;
+                }
             }
 
             .earlywarning {
@@ -232,15 +242,14 @@
                 .warningdata {
                     margin-left: 20px;
 
-                    .warningColor {
-                        width: 20px;
-                        height: 20px;
-                        line-height: 40px;
-                        display: inline-block;
-                        border-radius: 50%;
-                        margin-left: 10px;
+                    span {
+                        position: relative;
+                        top: -3px;
+                    }
+
+                    img {
                         position: relative;
-                        top: 3px;
+                        top: 7px;
                     }
                 }
             }

src/viewsCss/panoramicPowerLess.less

@@ -18,9 +18,9 @@
             border-radius: 5px;
 
             img {
-                width: 21px;
-                height: 21px;
                 margin-left: 18px;
+                position: relative;
+                top: 2px;
             }
 
             .statusName {
@@ -29,7 +29,9 @@
             }
 
             .statusNum {
-                padding: 0 18px;
+                display: inline-block;
+                width: 50px;
+                text-align: center;
                 position: relative;
                 right: -37px;
                 background: #212223;

src/viewsCss/powerPredictionPageLess.less

@@ -75,8 +75,8 @@
             border-radius: 5px;
 
             img {
-                width: 21px;
-                height: 21px;
+                position: relative;
+                top: 2px;
                 margin-left: 18px;
             }
 
@@ -86,7 +86,9 @@
             }
 
             .statusNum {
-                padding: 0 18px;
+                display: inline-block;
+                width: 50px;
+                text-align: center;
                 position: relative;
                 right: -22px;
                 background: #212223;