基于风机发电量全寿命周期管控的研究与应用项目中，首页部分白色版本开发（电量分析栏，计划电量完成情况栏，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/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;