基于风机发电量全寿命周期管控的研究与应用项目中发电能力分析系统细化UI界面（优化左侧菜单样式，所有页面搜索条例样式，excel列表样式调整）；浆距角分析页面根据后端要求，echarts用一条线展示并网与停机用不同颜色展示

.env.production

@@ -12,24 +12,24 @@ NODE_ENV = 'production'
 VUE_APP_TITLE = '页面标题'
 
 # 登录
-VUE_APP_LOGIN_URL = 'http://123.60.219.66:48080'
-# VUE_APP_LOGIN_URL = 'http://172.16.12.103:48080'
+# VUE_APP_LOGIN_URL = 'http://123.60.219.66:48080'
+VUE_APP_LOGIN_URL = 'http://172.16.12.103:48080'
 
 # 生产环境/重写路径(公共路径)
 
 # 发电能力分析
-VUE_APP_GENERAT_URL = 'http://123.60.219.66:9002'
-# VUE_APP_GENERAT_URL = 'http://172.16.12.103:9002'
+# VUE_APP_GENERAT_URL = 'http://123.60.219.66:9002'
+VUE_APP_GENERAT_URL = 'http://172.16.12.103:9002'
 # VUE_APP_GENERAT_URL = 'http://192.168.2.12:9002'
 
 # 智能报表
-VUE_APP_REPORT_URL = 'http://123.60.219.66:9001'
-# VUE_APP_REPORT_URL = 'http://172.16.12.103:9001'
+# VUE_APP_REPORT_URL = 'http://123.60.219.66:9001'
+VUE_APP_REPORT_URL = 'http://172.16.12.103:9001'
 # VUE_APP_REPORT_URL = 'http://192.168.2.3:9001'
 
 # 功率预测
-VUE_APP_BASE_URL = 'http://123.60.219.66:8086'
-# VUE_APP_BASE_URL = 'http://172.16.12.103:8086'
+# VUE_APP_BASE_URL = 'http://123.60.219.66:8086'
+VUE_APP_BASE_URL = 'http://172.16.12.103:8086'
 
 # 百度地图KEY
 VUE_APP_BAIDU_MAP_KEY = ''

src/components/commonHeaders.vue

@@ -3,7 +3,7 @@
         <el-container>
             <el-header :class="getStyle()">
                 <div class="logoSty">
-                    <!-- <img src="../assets/logoGuo_DB.png" alt=""> -->
+                    <img src="../assets/logoGuo_DB.png" alt="">
                 </div>
                 <div class="proMenu">
                     <!-- <el-button-group>

src/components/generatingCapacityComponent/excel.vue

@@ -6,9 +6,6 @@
                 v-for="item in data" :key="item.name"
                 :style="!theme && showCC ? 'background: rgba(0,70,199,0.35)' : ''">
                 <span @click.stop="funExcelChange(item)">
-                    <!-- <el-icon>
-                        <Document />
-                    </el-icon> -->
                     <svg t="1711515837802" v-if="isshowC(item)" class="icon" viewBox="0 -120 1024 1024" version="1.1"
                         xmlns="http://www.w3.org/2000/svg" p-id="2706" width="20" height="20">
                         <path
@@ -155,6 +152,7 @@
 <style lang="less">
     .excelData {
         .excelDatahaveCheck {
+            display: flex;
             line-height: 25px;
             height: 25px;
             width: calc(100% - 10px);
@@ -175,7 +173,7 @@
             .excelName {
                 position: relative;
                 top: -2px;
-                margin-left: 3px;
+                margin-left: 6px;
             }
 
             .el-checkbox__input {
@@ -192,6 +190,7 @@
         }
 
         .excelDataNoCheck {
+            display: flex;
             line-height: 25px;
             height: 25px;
             width: calc(100% - 10px);
@@ -216,8 +215,8 @@
 
             .excelName {
                 position: relative;
-                top: -2px;
-                margin-left: 3px;
+                top: 0px;
+                margin-left: 6px;
             }
         }
 

src/views/generatingCapacity/dataAnalysis/angleAnalysis/components/current-scatter-chart.vue

@@ -51,6 +51,12 @@
                     return [];
                 },
             },
+            seriesAllData: {
+                type: Array,
+                default: () => {
+                    return [];
+                },
+            },
             // 是否显示图表图例
             showLegend: {
                 type: Boolean,
@@ -107,6 +113,36 @@
         },
         methods: {
             resize() {},
+            getColorFn() {
+                let arr = []
+                this.seriesAllData.forEach((item, index) => {
+                    let obj = {
+                        gt: index,
+                        lt: index + 1
+                    }
+                    if (item.tag === 'tj') {
+                        obj.color = "#FF5378"
+                    } else {
+                        obj.color = "#05BB4C"
+                    }
+                    arr.push(obj)
+                })
+                return arr
+            },
+            getToolTipFn(params) {
+                let tit = ''
+                this.seriesAllData.forEach((item, index) => {
+                    if (params[0].axisValue === item.time && params[0].data === item.value) {
+                        tit = item.tag === 'tj' ? '停机' : '并网'
+                    }
+                })
+                let str = `<span style="display:inline-block;margin-bottom: 5px">${params[0].axisValue}</span></br>`
+                let str2 = `<div style="margin-bottom: 5px">
+                    <span style="display:inline-block;margin-right:4px;margin-top:3px;border-radius:10px;width:10px;height:10px;background-color:${params[0].color};\"></span>&nbsp;
+                    <span style="display:inline-block;">${tit}:</span>&nbsp;&nbsp;<span>${params[0].value}</span>
+                        </div>`
+                return str + str2
+            },
             initChart() {
                 const that = this;
                 echarts.registerTheme('chartTheme', chartTheme)
@@ -170,11 +206,13 @@
                         //   fontSize: util.vh(16),
                         //   color: partten.getColor("gray"),
                         // },
-                        // formatter(params) {
-                        //   return params.value?.x
-                        //     ? `${params.seriesName}<br />风速：${params.value.x}m/s<br />功率：${params.value.y}kW`
-                        //     : `${params.name}`;
-                        // },
+                        formatter(params) {
+                            let str = that.getToolTipFn(params)
+                            return str
+                            // return params.value ? .x ?
+                            //     `${params.seriesName}<br />风速：${params.value.x}m/s<br />功率：${params.value.y}kW` :
+                            //     `${params.name}`;
+                        },
                     },
                     brush: {
                         seriesIndex: [2, 3],
@@ -209,6 +247,13 @@
                         fontSize: util.vh(16),
                         color: that.echartsTheme === "dark" ? "#fff" : "#000",
                     },
+                    visualMap: {
+                        type: "piecewise",
+                        show: false,
+                        dimension: 0,
+                        seriesIndex: 0,
+                        pieces: that.getColorFn()
+                    },
                     //图例-每一条数据的名字
                     legend: {
                         show: that.showLegend,

src/views/generatingCapacity/dataAnalysis/angleAnalysis/index.vue

@@ -18,8 +18,9 @@
                     <div class="px-[10px] shadow rounded-[6px] shadow-blue-500 ">
                         <CurrentScatterChart ref="chartRef" width="100%" :height="`calc( ${tableHeight})`"
                             :chartTitle="''" :xAxisData="xAxisData" :yAxisData="{ splitLine: { show: false } }"
-                            :seriesData="seriesData" :showLegend="true" :brushSelected="false" :dataSet="dataSet"
-                            :theme="theme" :echartsTheme="echartsTheme" @getSelected="funChartSelect" />
+                            :seriesData="seriesData" :seriesAllData="seriesAllData" :showLegend="true"
+                            :brushSelected="false" :dataSet="dataSet" :theme="theme" :echartsTheme="echartsTheme"
+                            @getSelected="funChartSelect" />
                     </div>
                 </div>
             </div>
@@ -137,6 +138,7 @@
     const xAxisData = ref([])
     const chartRef = ref() //chart 的ref
     const seriesData = ref([])
+    const seriesAllData = ref([])
     const dataSet = ref('')
     const funChartSelect = async (batch) => {
         return false
@@ -157,13 +159,14 @@
             exTime.push(it.time)
             yp1.push(it.value)
         })
+        seriesAllData.value = res.data.bw
         res.data.tj.forEach(it => {
             yp2.push(it.value)
         })
         xAxisData.value = exTime
 
         seriesData.value = [{
-                name: "并网",
+                name: "并网(绿)/停机(红)",
                 type: "line",
                 symbol: "line", //设定为实心点
                 symbolSize: 0, //设定实心点的大小
@@ -171,15 +174,15 @@
                 data: yp1,
                 xAxisIndex: 0,
             },
-            {
-                name: "停机",
-                type: "line",
-                symbol: "line", //设定为实心点
-                symbolSize: 0, //设定实心点的大小
-                smooth: false, //这个是把线变成曲线
-                data: yp2,
-                xAxisIndex: 0,
-            }
+            // {
+            //     name: "停机",
+            //     type: "line",
+            //     symbol: "line", //设定为实心点
+            //     symbolSize: 0, //设定实心点的大小
+            //     smooth: false, //这个是把线变成曲线
+            //     data: yp2,
+            //     xAxisIndex: 0,
+            // }
         ]
     }
     /**created */

src/views/generatingCapacity/dataAnalysis/lineAnalysis/index.vue

@@ -152,7 +152,8 @@
                 })
                 if (treeCopRef.value && treeCopRef.value.data) {
                     treeCopRef.value.$refs.tree.setCheckedKeys([actTreeNode.value.id], true)
-                    excelCheckIds.value = actTreeNode.value.childs.map(o => o.id)
+                    // excelCheckIds.value = actTreeNode.value.childs.map(o => o.id)
+                    excelCheckIds.value = [actTreeNode.value.childs[0].id]
                     funSubmit()
                 }
             }

src/views/generatingCapacity/dataAnalysis/posAnalysis/components/leafletMap.vue

@@ -181,14 +181,14 @@
                         }
                     ]
                 });
-                let name = L.tileLayer(
-                    "http://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x={x}&y={y}&z={z}",
-                ).addTo(this.map)
+                // let name = L.tileLayer(
+                //     "http://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x={x}&y={y}&z={z}",
+                // ).addTo(this.map)
 
-                // let name = L.tileLayer(this.tilsUrl, {
-                //     minZoom: 1,
-                //     maxZoom: 16
-                // }).addTo(this.map)
+                let name = L.tileLayer(this.tilsUrl, {
+                    minZoom: 1,
+                    maxZoom: 16
+                }).addTo(this.map)
 
                 this.setAreaLayer('db', true)
                 this.setAreaLayer('jb', true)

src/views/powerPrediction/homePageNoMap.vue

@@ -1,15 +1,15 @@
 <template>
     <div class="homePageNoMap" :class="!theme ? 'themeDark' : 'themeLight'" :style="pageHeight">
         <div class="windStstus">
-            <div class="everyOne" v-for="(item, index) in statusData" :key="index">
+            <div class="everyOne" v-for="(item, index) in statusData" :key="index" :style="statusSty(item)">
                 <img :src="item.img" alt="">
-                <span class="statusName">{{item.name}}</span>
-                <span class="statusNum">{{item.number}}</span>
+                <span class="statusName" :style="{color: `${item.borderSty}`}">{{item.name}}</span>
+                <span class="statusNum" :style="{border: `1px solid ${item.borderSty}`}">{{item.number}}</span>
             </div>
         </div>
         <div class="homePage_main">
             <div class="mainLeft">
-                <div class="lineStyle" v-on:dblclick="doubleclick('全域功率预测')">
+                <div class="lineStyle" v-on:dblclick="doubleclick('全域功率预测')" style="position: relative">
                     <div style="display: flex;float: right;justify-content: end;margin-right: 53px;">
                         <div v-for="item in showpowerLegend" :key="item.name">
                             <span class="lineColor" :style="{'background': item.color}"></span>
@@ -18,9 +18,17 @@
                                 style="font-size: 12px;margin-left: 12px;position: relative;top: 1px;">{{item.name}}</span>
                         </div>
                     </div>
+                    <div class="chart-name">
+                        <div class="point point-left bottom"></div>
+                        <div class="point point-right bottom"></div>
+                    </div>
                     <div id="lineChart" :style="lineChartStyle"></div>
                 </div>
                 <div class="lineStyle" v-on:dblclick="doubleclick('全域风速预测')" style="position: relative">
+                    <div class="chart-name">
+                        <div class="point point-left bottom"></div>
+                        <div class="point point-right bottom"></div>
+                    </div>
                     <div class="styleData">
                         <span :class="windShow ? 'changeStyle' : 'defaultSty'" @click="getWindorSunDate('风速')">风速</span>
                         <span :class="sunShow ? 'changeStyle' : 'defaultSty'"
@@ -30,15 +38,23 @@
                 </div>
             </div>
             <div class="mainRight">
-                <div class="lineStyle">
+                <div class="lineStyle" style="position: relative">
+                    <div class="chart-name">
+                        <div class="point point-left bottom"></div>
+                        <div class="point point-right bottom"></div>
+                    </div>
                     <div id="barChart" :style="barChartStyle"></div>
                 </div>
-                <div class="lineStyle">
+                <div class="lineStyle" style="position: relative">
                     <div class="styleData">
                         <span :class="dayShow ? 'changeStyle' : 'defaultSty'" @click="getbarDate('日')">日</span>
                         <span :class="monthShow ? 'changeStyle' : 'defaultSty'" @click="getbarDate('月')">月</span>
                         <span :class="yearShow ? 'changeStyle' : 'defaultSty'" @click="getbarDate('年')">年</span>
                     </div>
+                    <div class="chart-name">
+                        <div class="point point-left bottom"></div>
+                        <div class="point point-right bottom"></div>
+                    </div>
                     <div id="barChart1" :style="barChartStyle"></div>
                 </div>
                 <div class="messageData">
@@ -96,13 +112,13 @@
     import globalDialog from '@/components/powerPredictionComponent/homePageAssembly/globalDialogPage.vue'
     import weatherDetail from '@/components/powerPredictionComponent/homePageAssembly/weatherDetail.vue'
     //状态图片
-    import oneimg from '@/assets/windStatusPic/000.png'
-    import twoimg from '@/assets/windStatusPic/001.png'
-    import threeimg from '@/assets/windStatusPic/002.png'
-    import fourimg from '@/assets/windStatusPic/003.png'
-    import fiveimg from '@/assets/windStatusPic/004.png'
-    import siximg from '@/assets/windStatusPic/005.png'
-    import sevenimg from '@/assets/windStatusPic/006.png'
+    import oneimg from '@/assets/windStatusPic/yunxing.png'
+    import twoimg from '@/assets/windStatusPic/daiji.png'
+    import threeimg from '@/assets/windStatusPic/weihu.png'
+    import fourimg from '@/assets/windStatusPic/tingji.png'
+    import fiveimg from '@/assets/windStatusPic/xiandian.png'
+    import siximg from '@/assets/windStatusPic/shoulei.png'
+    import sevenimg from '@/assets/windStatusPic/guzhang.png'
     //大风预警图片
     import windBlue from '@/assets/weather/windBlue.png'
     import windYellow from '@/assets/weather/windYellow.png'
@@ -444,42 +460,56 @@
                     img: oneimg,
                     name: '运行',
                     nameEn: 'yx',
+                    borderSty: '#1C99FF',
+                    backSty: '#0046C7',
                     number: 0
                 },
                 {
                     img: twoimg,
                     name: '待机',
                     nameEn: 'dj',
+                    borderSty: '#05BB4C',
+                    backSty: '#258952',
                     number: 0
                 },
                 {
                     img: threeimg,
                     name: '维护',
                     nameEn: 'wh',
+                    borderSty: '#E17D24',
+                    backSty: '#694119',
                     number: 0
                 },
                 {
                     img: fourimg,
                     name: '停机',
                     nameEn: 'tj',
+                    borderSty: '#52595B',
+                    backSty: '#272a2b',
                     number: 0
                 },
                 {
                     img: fiveimg,
                     name: '限电',
                     nameEn: 'xd',
+                    borderSty: '#C530C8',
+                    backSty: '#7A277F',
                     number: 0
                 },
                 {
                     img: siximg,
                     name: '离线',
                     nameEn: 'lx',
+                    borderSty: '#fff',
+                    backSty: '#38393B',
                     number: 0
                 },
                 {
                     img: sevenimg,
                     name: '检修',
                     nameEn: 'jx',
+                    borderSty: '#BA3237',
+                    backSty: '#73262B',
                     number: 0
                 }
             ]
@@ -586,6 +616,9 @@
             }
         },
         methods: {
+            statusSty(item) {
+                return `border: 1px solid ${item.borderSty};background: ${item.backSty}`
+            },
             fromCustom(name) {
                 let that = this
                 let params = {
@@ -1494,6 +1527,39 @@
             .mainRight {
                 .lineStyle {
                     background: #161f1e;
+
+                    .chart-name {
+                        display: flex;
+                        align-items: center;
+                        position: absolute;
+                        top: 0;
+                        height: 39px;
+                        width: 96%;
+                        border-bottom: 1px solid rgba(153, 153, 153, 0.5);
+
+                        .point {
+                            width: 6px;
+                            height: 1px;
+                            background-color: #ffffff;
+                            position: absolute;
+
+                            &.point-left {
+                                left: 0;
+                            }
+
+                            &.point-right {
+                                right: 0;
+                            }
+
+                            &.top {
+                                top: -1px;
+                            }
+
+                            &.bottom {
+                                bottom: -1px;
+                            }
+                        }
+                    }
                 }
             }
 
@@ -1519,7 +1585,7 @@
 
     .themeLight {
         .windStstus {
-            background: linear-gradient(0deg, transparent, #373590);
+            // background: linear-gradient(0deg, transparent, #373590);
         }
 
         .homePage_main {

src/views/powerPrediction/panoramicPower.vue

@@ -1,10 +1,10 @@
 <template>
     <div class="panoramicPowerPage" :class="!theme ? 'themeDark' : 'themeLight'">
         <div class="windStstus">
-            <div class="everyOne" v-for="(item, index) in statusData" :key="index">
+            <div class="everyOne" v-for="(item, index) in statusData" :key="index" :style="statusSty(item)">
                 <img :src="item.img" alt="">
-                <span class="statusName">{{item.name}}</span>
-                <span class="statusNum">{{item.number}}</span>
+                <span class="statusName" :style="{color: `${item.borderSty}`}">{{item.name}}</span>
+                <span class="statusNum" :style="{border: `1px solid ${item.borderSty}`}">{{item.number}}</span>
             </div>
             <div class="windLeft">
                 <div class="windMsg">
@@ -20,7 +20,7 @@
         <div class="lineMain" :style="pageHeight" v-loading="loading">
             <el-row>
                 <el-col :span="8" v-for="(item,index) in chartsData" :key="index">
-                    <div class="lineStyle" v-on:dblclick="doubleclick(item)">
+                    <div class="lineStyle" v-on:dblclick="doubleclick(item)" style="position: relative">
                         <div style="display: flex;float: right;justify-content: end;margin-right: 53px;">
                             <div v-for="it in item.showpowerLegend" :key="it.name">
                                 <span class="lineColor" :style="{'background': it.color}"></span>
@@ -29,6 +29,10 @@
                                     style="font-size: 12px;margin-left: 12px;position: relative;top: 1px;">{{it.name}}</span>
                             </div>
                         </div>
+                        <div class="chart-name">
+                            <div class="point point-left bottom"></div>
+                            <div class="point point-right bottom"></div>
+                        </div>
                         <div :id="'lineChart' + Number(index+1)" :style="lineChartStyle"></div>
                     </div>
                 </el-col>
@@ -45,13 +49,13 @@
         apiGetpanoramicPowerCharts,
         apiGetStatusInfoAll
     } from '../../api/api'
-    import oneimg from '../../assets/windStatusPic/000.png'
-    import twoimg from '../../assets/windStatusPic/001.png'
-    import threeimg from '../../assets/windStatusPic/002.png'
-    import fourimg from '../../assets/windStatusPic/003.png'
-    import fiveimg from '../../assets/windStatusPic/004.png'
-    import siximg from '../../assets/windStatusPic/005.png'
-    import sevenimg from '../../assets/windStatusPic/006.png'
+    import oneimg from '@/assets/windStatusPic/yunxing.png'
+    import twoimg from '@/assets/windStatusPic/daiji.png'
+    import threeimg from '@/assets/windStatusPic/weihu.png'
+    import fourimg from '@/assets/windStatusPic/tingji.png'
+    import fiveimg from '@/assets/windStatusPic/xiandian.png'
+    import siximg from '@/assets/windStatusPic/shoulei.png'
+    import sevenimg from '@/assets/windStatusPic/guzhang.png'
     export default {
         components: {
             panoramaDialog
@@ -86,42 +90,56 @@
                     img: oneimg,
                     name: '运行',
                     nameEn: 'yx',
+                    borderSty: '#1C99FF',
+                    backSty: '#0046C7',
                     number: 0
                 },
                 {
                     img: twoimg,
                     name: '待机',
                     nameEn: 'dj',
+                    borderSty: '#05BB4C',
+                    backSty: '#258952',
                     number: 0
                 },
                 {
                     img: threeimg,
                     name: '维护',
                     nameEn: 'wh',
+                    borderSty: '#E17D24',
+                    backSty: '#694119',
                     number: 0
                 },
                 {
                     img: fourimg,
                     name: '停机',
                     nameEn: 'tj',
+                    borderSty: '#52595B',
+                    backSty: '#272a2b',
                     number: 0
                 },
                 {
                     img: fiveimg,
                     name: '限电',
                     nameEn: 'xd',
+                    borderSty: '#C530C8',
+                    backSty: '#7A277F',
                     number: 0
                 },
                 {
                     img: siximg,
                     name: '离线',
                     nameEn: 'lx',
+                    borderSty: '#fff',
+                    backSty: '#38393B',
                     number: 0
                 },
                 {
                     img: sevenimg,
                     name: '检修',
                     nameEn: 'jx',
+                    borderSty: '#BA3237',
+                    backSty: '#73262B',
                     number: 0
                 }
             ]
@@ -243,6 +261,9 @@
             }
         },
         methods: {
+            statusSty(item) {
+                return `border: 1px solid ${item.borderSty};background: ${item.backSty}`
+            },
             doubleclick(item) {
                 console.log('db', item)
                 this.$refs.panorama.dialogVisible = true
@@ -489,13 +510,46 @@
 
             .lineStyle {
                 background: #161f1e;
+
+                .chart-name {
+                    display: flex;
+                    align-items: center;
+                    position: absolute;
+                    top: 0;
+                    height: 39px;
+                    width: 96%;
+                    border-bottom: 1px solid rgba(153, 153, 153, 0.5);
+
+                    .point {
+                        width: 6px;
+                        height: 1px;
+                        background-color: #ffffff;
+                        position: absolute;
+
+                        &.point-left {
+                            left: 0;
+                        }
+
+                        &.point-right {
+                            right: 0;
+                        }
+
+                        &.top {
+                            top: -1px;
+                        }
+
+                        &.bottom {
+                            bottom: -1px;
+                        }
+                    }
+                }
             }
         }
     }
 
     .themeLight {
         .windStstus {
-            background: linear-gradient(0deg, transparent, #373590);
+            // background: linear-gradient(0deg, transparent, #373590);
         }
 
         .lineMain {

src/views/powerPrediction/powerPredictionPage.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="powerPredictionPage" :class="!theme ? 'themeDark' : 'themeLight'">
         <el-row class="windStstus">
-            <el-col :span="11" class="scrollbar">
+            <el-col :span="8" class="scrollbar">
                 <!-- <span class="scrollbarName">场站名称：</span> -->
                 <el-scrollbar>
                     <div class="scrollbar-flex-content">
@@ -12,18 +12,18 @@
                     </div>
                 </el-scrollbar>
             </el-col>
-            <el-col :span="13">
-                <div class="everyOne" v-for="(item, index) in statusData" :key="index">
+            <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">{{item.name}}</span>
-                    <span class="statusNum">{{item.number}}</span>
+                    <span class="statusName" :style="{color: `${item.borderSty}`}">{{item.name}}</span>
+                    <span class="statusNum" :style="{border: `1px solid ${item.borderSty}`}">{{item.number}}</span>
                 </div>
             </el-col>
         </el-row>
         <div class="lineMain" :style="pageHeight">
             <el-row>
                 <el-col :span="14">
-                    <div class="lineStyle" v-on:dblclick="doubleclick('功率预测')">
+                    <div class="lineStyle" v-on:dblclick="doubleclick('功率预测')" style="position: relative">
                         <div style="display: flex;float: right;justify-content: end;margin-right: 23px;">
                             <div v-for="item in showpowerLegend" :key="item.name">
                                 <span class="lineColor" :style="{'background': item.color}"></span>
@@ -32,17 +32,33 @@
                                     style="font-size: 12px;margin-left: 12px;position: relative;top: 1px;">{{item.name}}</span>
                             </div>
                         </div>
+                        <div class="chart-name">
+                            <div class="point point-left bottom"></div>
+                            <div class="point point-right bottom"></div>
+                        </div>
                         <div id="powerChart" :style="chartStyle"></div>
                     </div>
-                    <div class="lineStyle" v-on:dblclick="doubleclick('风速预测')">
+                    <div class="lineStyle" v-on:dblclick="doubleclick('风速预测')" style="position: relative">
+                        <div class="chart-name">
+                            <div class="point point-left bottom"></div>
+                            <div class="point point-right bottom"></div>
+                        </div>
                         <div id="windChart" :style="chartStyle"></div>
                     </div>
-                    <div class="lineStyle">
+                    <div class="lineStyle" style="position: relative">
+                        <div class="chart-name">
+                            <div class="point point-left bottom"></div>
+                            <div class="point point-right bottom"></div>
+                        </div>
                         <div id="assessmentChart" :style="chartStyle"></div>
                     </div>
                 </el-col>
                 <el-col :span="10">
-                    <div class="lineStyle1">
+                    <div class="lineStyle1" style="position: relative">
+                        <div class="chart-name">
+                            <div class="point point-left bottom"></div>
+                            <div class="point point-right bottom"></div>
+                        </div>
                         <div id="installChart" :style="messageStyle"></div>
                     </div>
                     <div class="lineStyle1" :style="messageStylexc">
@@ -83,13 +99,13 @@
         apiGetwindRosetteChart,
         apiGetUnitStatusInfoByStationNo
     } from '../../api/api'
-    import oneimg from '../../assets/windStatusPic/000.png'
-    import twoimg from '../../assets/windStatusPic/001.png'
-    import threeimg from '../../assets/windStatusPic/002.png'
-    import fourimg from '../../assets/windStatusPic/003.png'
-    import fiveimg from '../../assets/windStatusPic/004.png'
-    import siximg from '../../assets/windStatusPic/005.png'
-    import sevenimg from '../../assets/windStatusPic/006.png'
+    import oneimg from '@/assets/windStatusPic/yunxing.png'
+    import twoimg from '@/assets/windStatusPic/daiji.png'
+    import threeimg from '@/assets/windStatusPic/weihu.png'
+    import fourimg from '@/assets/windStatusPic/tingji.png'
+    import fiveimg from '@/assets/windStatusPic/xiandian.png'
+    import siximg from '@/assets/windStatusPic/shoulei.png'
+    import sevenimg from '@/assets/windStatusPic/guzhang.png'
     export default {
         components: {
             powerPredictionDialog
@@ -133,42 +149,56 @@
                     img: oneimg,
                     name: '运行',
                     nameEn: 'yx',
+                    borderSty: '#1C99FF',
+                    backSty: '#0046C7',
                     number: 0
                 },
                 {
                     img: twoimg,
                     name: '待机',
                     nameEn: 'dj',
+                    borderSty: '#05BB4C',
+                    backSty: '#258952',
                     number: 0
                 },
                 {
                     img: threeimg,
                     name: '维护',
                     nameEn: 'wh',
+                    borderSty: '#E17D24',
+                    backSty: '#694119',
                     number: 0
                 },
                 {
                     img: fourimg,
                     name: '停机',
                     nameEn: 'tj',
+                    borderSty: '#52595B',
+                    backSty: '#272a2b',
                     number: 0
                 },
                 {
                     img: fiveimg,
                     name: '限电',
                     nameEn: 'xd',
+                    borderSty: '#C530C8',
+                    backSty: '#7A277F',
                     number: 0
                 },
                 {
                     img: siximg,
                     name: '离线',
                     nameEn: 'lx',
+                    borderSty: '#fff',
+                    backSty: '#38393B',
                     number: 0
                 },
                 {
                     img: sevenimg,
                     name: '检修',
                     nameEn: 'jx',
+                    borderSty: '#BA3237',
+                    backSty: '#73262B',
                     number: 0
                 }
             ]
@@ -318,6 +348,9 @@
             }
         },
         methods: {
+            statusSty(item) {
+                return `border: 1px solid ${item.borderSty};background: ${item.backSty}`
+            },
             doubleclick(name) {
                 let title = ''
                 this.stationData.forEach(item => {
@@ -1040,7 +1073,41 @@
             .lineStyle,
             .lineStyle1 {
                 background: #161f1e;
+
+                .chart-name {
+                    display: flex;
+                    align-items: center;
+                    position: absolute;
+                    top: 0;
+                    height: 39px;
+                    width: 96%;
+                    border-bottom: 1px solid rgba(153, 153, 153, 0.5);
+
+                    .point {
+                        width: 6px;
+                        height: 1px;
+                        background-color: #ffffff;
+                        position: absolute;
+
+                        &.point-left {
+                            left: 0;
+                        }
+
+                        &.point-right {
+                            right: 0;
+                        }
+
+                        &.top {
+                            top: -1px;
+                        }
+
+                        &.bottom {
+                            bottom: -1px;
+                        }
+                    }
+                }
             }
+
         }
 
 
@@ -1048,7 +1115,7 @@
 
     .themeLight {
         .windStstus {
-            background: linear-gradient(0deg, transparent, #373590);
+            // background: linear-gradient(0deg, transparent, #373590);
         }
 
         .lineMain {

src/viewsCss/homePageNoMapLess.less

@@ -3,14 +3,18 @@
         display: flex;
         align-items: center;
         margin: 0 10px;
-        border: 1px solid #7674d8;
-        border-radius: 10px 10px 0 0;
+        // border: 1px solid #7674d8;
+        // border-radius: 10px 10px 0 0;
         border-bottom: none;
         height: 40px;
 
         .everyOne {
             display: flex;
             align-items: center;
+            width: 160px;
+            height: 25px;
+            margin-right: 10px;
+            border-radius: 5px;
 
             img {
                 width: 21px;
@@ -26,7 +30,12 @@
             .statusNum {
                 padding: 0 18px;
                 position: relative;
-                border-right: 1px dashed #fff;
+                right: -37px;
+                background: #212223;
+                height: 25px;
+                line-height: 25px;
+                border-radius: 5px;
+                // border-right: 1px dashed #fff;
             }
 
             span {

src/viewsCss/panoramicPowerLess.less

@@ -4,14 +4,18 @@
         display: flex;
         align-items: center;
         margin: 0 10px;
-        border: 1px solid #7674d8;
-        border-radius: 10px 10px 0 0;
+        // border: 1px solid #7674d8;
+        // border-radius: 10px 10px 0 0;
         border-bottom: none;
         height: 40px;
 
         .everyOne {
             display: flex;
             align-items: center;
+            width: 160px;
+            height: 25px;
+            margin-right: 10px;
+            border-radius: 5px;
 
             img {
                 width: 21px;
@@ -27,7 +31,12 @@
             .statusNum {
                 padding: 0 18px;
                 position: relative;
-                border-right: 1px dashed #fff;
+                right: -37px;
+                background: #212223;
+                height: 25px;
+                line-height: 25px;
+                border-radius: 5px;
+                // border-right: 1px dashed #fff;
             }
 
             span {

src/viewsCss/powerPredictionPageLess.less

@@ -4,8 +4,8 @@
         justify-content: space-around;
         align-items: center;
         margin: 0 10px;
-        border: 1px solid #7674d8;
-        border-radius: 10px 10px 0 0;
+        // border: 1px solid #7674d8;
+        // border-radius: 10px 10px 0 0;
         border-bottom: none;
         height: 40px;
 
@@ -69,6 +69,10 @@
         .everyOne {
             display: flex;
             align-items: center;
+            width: 150px;
+            height: 25px;
+            margin-right: 10px;
+            border-radius: 5px;
 
             img {
                 width: 21px;
@@ -84,7 +88,11 @@
             .statusNum {
                 padding: 0 18px;
                 position: relative;
-                border-right: 1px dashed #fff;
+                right: -22px;
+                background: #212223;
+                height: 25px;
+                line-height: 25px;
+                border-radius: 5px;
             }
 
             span {