基于风机发电量全寿命周期管控的研究与应用项目中首页部分黑色版本开发（天气预测栏，预测电量栏，实际功率栏按照UI设计图还原开发展示）；

.env.development

@@ -7,15 +7,18 @@ VUE_APP_TITLE = '页面标题'
 # 开发环境/重写路径(公共路径)
 
 # 登录
-VUE_APP_LOGIN_URL = 'http://123.60.219.66:48080'
+# VUE_APP_LOGIN_URL = 'http://123.60.219.66:48080'
+VUE_APP_LOGIN_URL = 'http://192.168.2.231:48080'
+
 # 发电能力分析
-VUE_APP_GENERAT_URL = 'http://123.60.219.66:9002'
-# VUE_APP_GENERAT_URL = 'http://192.168.2.12:9002'
+# VUE_APP_GENERAT_URL = 'http://123.60.219.66:9002'
+VUE_APP_GENERAT_URL = 'http://192.168.2.231:9002'
 # 智能报表
-VUE_APP_REPORT_URL = 'http://123.60.219.66:9001'
-# VUE_APP_REPORT_URL = 'http://192.168.2.3:9001'
+# VUE_APP_REPORT_URL = 'http://123.60.219.66:9001'
+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://123.60.219.66:8086'
+VUE_APP_BASE_URL = 'http://192.168.2.231:8086'
 
 # 百度地图KEY
 VUE_APP_BAIDU_MAP_KEY = ''

components.d.ts

@@ -10,10 +10,14 @@ declare module 'vue' {
     '2.5dEcharts': typeof import('./src/components/powerPredictionComponent/homePageAssembly/2.5dEcharts.vue')['default']
     AllStationSettingPage: typeof import('./src/components/powerPredictionComponent/configPage/stationFlode/allStationSettingPage.vue')['default']
     CalculationModelConfiguration: typeof import('./src/components/powerPredictionComponent/configPage/calculationModelConfiguration.vue')['default']
+    Col: typeof import('./src/components/homeComponent/grid/col.vue')['default']
     CollectionLineManagement: typeof import('./src/components/powerPredictionComponent/configPage/stationFlode/collectionLineManagement.vue')['default']
     CommonHeaders: typeof import('./src/components/commonHeaders.vue')['default']
     ConfigurationDesign: typeof import('./src/components/powerPredictionComponent/configPage/configurationDesign.vue')['default']
     DayBatterDialog: typeof import('./src/components/powerPredictionComponent/batteryDivinerDialog/dayBatterDialog.vue')['default']
+    EchartsGauge: typeof import('./src/components/homeComponent/echartsGauge.vue')['default']
+    EchartsGaugeComponent: typeof import('./src/components/homeComponent/echartsGaugeComponent.vue')['default']
+    EchartsPie: typeof import('./src/components/homeComponent/echartsPie.vue')['default']
     ElButton: typeof import('element-plus/es')['ElButton']
     ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
     ElCheckboxGroup: typeof import('element-plus/es')['ElCheckboxGroup']
@@ -22,9 +26,6 @@ declare module 'vue' {
     ElDatePicker: typeof import('element-plus/es')['ElDatePicker']
     ElDialog: typeof import('element-plus/es')['ElDialog']
     ElDivider: typeof import('element-plus/es')['ElDivider']
-    ElDropdown: typeof import('element-plus/es')['ElDropdown']
-    ElDropdownItem: typeof import('element-plus/es')['ElDropdownItem']
-    ElDropdownMenu: typeof import('element-plus/es')['ElDropdownMenu']
     ElEmpty: typeof import('element-plus/es')['ElEmpty']
     ElForm: typeof import('element-plus/es')['ElForm']
     ElFormItem: typeof import('element-plus/es')['ElFormItem']
@@ -50,8 +51,8 @@ declare module 'vue' {
     ElTabs: typeof import('element-plus/es')['ElTabs']
     ElTimeSelect: typeof import('element-plus/es')['ElTimeSelect']
     ElTooltip: typeof import('element-plus/es')['ElTooltip']
-    ElTree: typeof import('element-plus/es')['ElTree']
     Excel: typeof import('./src/components/generatingCapacityComponent/excel.vue')['default']
+    ForecastBarComponent: typeof import('./src/components/homeComponent/forecastBarComponent.vue')['default']
     ForecastReporting: typeof import('./src/components/powerPredictionComponent/configPage/forecastReporting.vue')['default']
     GenerationPlan: typeof import('./src/components/powerPredictionComponent/configPage/generationPlan.vue')['default']
     GlobalDialogPage: typeof import('./src/components/powerPredictionComponent/homePageAssembly/globalDialogPage.vue')['default']
@@ -78,6 +79,7 @@ declare module 'vue' {
     RoleManagement: typeof import('./src/components/powerPredictionComponent/configPage/roleManagement.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
+    Row: typeof import('./src/components/homeComponent/grid/row.vue')['default']
     SBQ: typeof import('./src/components/powerPredictionComponent/configPage/configDesignVue/SBQ.vue')['default']
     SLiu: typeof import('./src/components/powerPredictionComponent/configPage/configDesignVue/SLiu.vue')['default']
     StandardizeTheManagement: typeof import('./src/components/powerPredictionComponent/configPage/standardizeTheManagement.vue')['default']
@@ -88,6 +90,7 @@ declare module 'vue' {
     SvgPageShow: typeof import('./src/components/powerPredictionComponent/powerControlSvg/svgPageShow.vue')['default']
     Table: typeof import('./src/components/generatingCapacityComponent/table.vue')['default']
     Tree: typeof import('./src/components/generatingCapacityComponent/tree.vue')['default']
+    TreeStyle: typeof import('./src/components/generatingCapacityComponent/treeStyle.vue')['default']
     UnitManagement: typeof import('./src/components/powerPredictionComponent/configPage/unitManagement.vue')['default']
     UnitMeasurementPoint: typeof import('./src/components/powerPredictionComponent/configPage/unitMeasurementPoint.vue')['default']
     WeatherDetail: typeof import('./src/components/powerPredictionComponent/homePageAssembly/weatherDetail.vue')['default']

src/assets/css/eleCss/el-tableB.less

@@ -1,5 +1,11 @@
 .warn-table {
     .el-table {
+        .caret-wrapper {
+            display: none !important;
+        }
+    }
+
+    .el-table {
 
         .el-table__header {
             thead {

src/assets/css/eleCss/el-tableW.less

@@ -1,4 +1,11 @@
 .warn-table {
+
+    .el-table {
+        .caret-wrapper {
+            display: none !important;
+        }
+    }
+
     .el-table {
         .el-table__header {
             thead {

src/components/commonHeaders.vue

@@ -6,20 +6,24 @@
                     <img src="../assets/logoGuo_DB.png" alt="">
                 </div>
                 <div class="proMenu">
-                    <!-- <el-button-group>
-                        <el-button type="primary" v-for="(item,index) in menuData" :key="index"
-                            :class="getColor(item.showBac)" @click="changeRoute(item)">
-                            {{item.name}}
-                        </el-button>
-                    </el-button-group> -->
                     <div class="proButton">
                         <div class="buttonItem" v-for="(item,index) in menuData" :key="index"
                             :class="getColor(item.showBac)" @click="changeRoute(item)">{{item.name}}</div>
                     </div>
                     <div class="proSet">
                         <div class="settingStop">
-                            <el-switch v-model="switchTheme" :active-action-icon="SunnyIcon"
-                                :inactive-action-icon="MoonIcon" @change="changSwith" />
+                            <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">
+                                    <img :src="sun_W" alt="" v-else>
+                                </template>
+                                <template #inactive-action>
+                                    <!-- <span class="custom-inactive-action">F</span> -->
+                                    <img :src="moon_B" alt="" v-if="!switchTheme">
+                                    <img :src="sun_B" alt="" v-else>
+                                </template>
+                            </el-switch>
 
                             <el-tooltip class="box-item" effect="light" content="自动填报工具">
                                 <a href="http://172.16.12.103:9001/script/download">
@@ -30,7 +34,7 @@
                                 <img :src="header_shezhi" class="Settingitem">
                             </el-tooltip>
                             <el-tooltip class="box-item" effect="light" content="退出">
-                                <img :src="header_dianyuan" class="Settingitem" @click="backLogin">
+                                <img :src="header_dianyuan" class="Settingitem rightIm" @click="backLogin">
                             </el-tooltip>
                         </div>
 
@@ -43,9 +47,13 @@
 
 <script>
     import httpRequest from '@/utils/request.js'
-    import header_wendang from '@/assets/menuImg/header_wendang.png'
-    import header_shezhi from '@/assets/menuImg/header_shezhi.png'
-    import header_dianyuan from '@/assets/menuImg/header_dianyuan.png'
+    import header_wendang from '@/assets/images/headerCom/zidongtianbao.png'
+    import header_shezhi from '@/assets/images/headerCom/shezhi.png'
+    import header_dianyuan from '@/assets/images/headerCom/guanji.png'
+    import sun_W from '@/assets/images/headerCom/sun_W.png'
+    import moon_B from '@/assets/images/headerCom/moon_B.png'
+    import sun_B from '@/assets/images/headerCom/sun_B.png'
+    import moon_W from '@/assets/images/headerCom/moon_W.png'
     import {
         Sunny,
         Moon
@@ -62,6 +70,10 @@
             return {
                 SunnyIcon: Sunny,
                 MoonIcon: Moon,
+                sun_W: sun_W,
+                sun_B: sun_B,
+                moon_B: moon_B,
+                moon_W: moon_W,
                 header_wendang: header_wendang,
                 header_shezhi: header_shezhi,
                 header_dianyuan: header_dianyuan,
@@ -75,20 +87,19 @@
             }
         },
         created() {
-            this.menuData = [
-                // {
-                //     index: '/home',
-                //     icon: 'Menu',
-                //     name: '首页',
-                //     showBac: true
-                // },
+            this.menuData = [{
+                    index: '/home',
+                    icon: 'Menu',
+                    name: '首页',
+                    showBac: true
+                },
                 {
                     index: '/generatingCap/dataFilter/prepare',
                     icon: 'Histogram',
                     name: '发电能力分析'
                 },
                 {
-                    index: '/intelligentReport/reporting',
+                    index: '/intelligentReport/gkjlb?name=xinzhuang',
                     icon: 'PictureFilled',
                     name: '智能报表'
                 },
@@ -102,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
@@ -287,7 +298,7 @@
         // top: 0;
         width: 100%;
         z-index: 1999;
-        height: 55px;
+        height: 50px;
 
         .weatherSty {
             background: rgb(74, 87, 100);
@@ -300,11 +311,11 @@
             // background: rgb(13, 104, 188);
             // background: rgba(96,103,105,.75);
             color: #fff;
-            line-height: 55px;
-            height: 55px !important;
+            line-height: 50px;
+            height: 50px !important;
 
             .logoSty {
-                padding: 10px 0 0 0;
+                padding: 8px 0 0 0;
 
                 img {
                     width: 310px;
@@ -328,47 +339,65 @@
                 .proSet {
                     display: flex;
                     justify-content: center;
-                    width: 260px;
+                    // width: 260px;
 
                     .settingStop {
                         display: flex;
-                        width: 260px;
+                        // width: 260px;
                         align-items: center;
                         justify-content: center;
 
                         .el-switch {
-                            margin-left: 10px;
+                            margin-left: 26px;
+                            width: 88px;
+                            height: 25px;
+
+                            .el-switch__input {
+                                width: 88px;
+                                height: 25px;
+                            }
 
                             .el-switch__core {
-                                min-width: 50px;
-                                height: 20px;
+                                width: 88px;
+                                height: 25px;
+                                border-radius: 13px;
+
 
                                 .el-switch__action {
-                                    width: 25px;
-                                    height: 16px;
-                                    border-radius: 10px;
+                                    width: 41px;
+                                    height: 21px;
+                                    border-radius: 11px;
+
+                                    img {
+                                        width: 15px;
+                                        height: 15px;
+                                    }
                                 }
                             }
                         }
 
                         .el-switch--small.is-checked .el-switch__core .el-switch__action {
-                            width: 25px;
-                            height: 16px;
+                            width: 41px;
+                            height: 21px;
                             border-radius: 10px;
-                            left: calc(100% - 25px) !important;
+                            left: calc(100% - 41px) !important;
                         }
 
                         .Settingitem {
                             color: #fff;
-                            margin-left: 20px;
+                            margin-left: 30px;
                             width: 25px;
                             height: 25px;
                             cursor: pointer;
                         }
 
+                        .rightIm {
+                            margin-right: 30px;
+                        }
+
                         .downItem {
                             position: relative;
-                            top: 5px;
+                            top: 7px;
                         }
                     }
                 }
@@ -414,13 +443,13 @@
 
                 .el-switch__core {
                     background: #000;
+                    background-image: url('@/assets/images/headerCom/sun_B.png');
+                    background-repeat: no-repeat;
+                    background-position: 58px 2px;
+                    background-size: 20px;
 
                     .el-switch__action {
-                        .el-icon {
-                            // background: #1C99FF;
-                            // border-radius: 5px;
-                            color: #000;
-                        }
+                        background: #1C99FF;
                     }
                 }
             }
@@ -463,13 +492,14 @@
 
             .el-switch {
                 .el-switch__core {
-                    background: #373590;
+                    background: #1E3F9A;
+                    background-image: url('@/assets/images/headerCom/moon_W.png');
+                    background-repeat: no-repeat;
+                    background-position: 8px 2px;
+                    background-size: 20px;
 
                     .el-switch__action {
-                        .el-icon {
-                            // background: #373590;
-                            color: #373590;
-                        }
+                        background: #fff;
                     }
                 }
             }

src/components/generatingCapacityComponent/table.vue

@@ -84,6 +84,7 @@
 <style lang="less" scoped>
     .warn-table {
 
+
         .tableData_tit {
             display: flex;
 

src/components/generatingCapacityComponent/tree.vue

@@ -8,10 +8,14 @@
         </div>
         <div class="treeMain">
             <div class="treeMainTit">
-                <!-- <span>{{data[0].label ? data[0].label : '数据'}}</span> -->
                 <span>数据</span>
             </div>
-            <el-tree :data="data" :props="defaultProps" default-expand-all highlight-current
+            <div v-for="node in data" :key="node.id" class="treeMainMsg">
+                <span>{{node.label}}</span>
+                <tree-node :node="node.children" :data="data" :show-checkbox="showCheckbox">
+                </tree-node>
+            </div>
+            <!-- <el-tree :data="data" :props="defaultProps" default-expand-all highlight-current
                 :filter-node-method="filterNode" ref="tree" @node-click="funCurrentChange" :show-checkbox="showCheckbox"
                 @check="funCheckChange" node-key="id" :expand-on-click-node="false" :current-node-key="''">
                 <template #default="{ node, data }">
@@ -19,10 +23,6 @@
                         style="margin-right: 30px"
                         :class="!node.expanded || (node.isLeaf && !node.isCurrent) ? '' : 'eldropdownCla'">
                         <span class="el-dropdown-link">
-                            <!-- <el-icon class="mr-[4px] !text-[#E6A23C]">
-                                <Folder v-if="!node.expanded || (node.isLeaf && !node.isCurrent)" />
-                                <FolderOpened v-else />
-                            </el-icon> -->
                             {{ node.label }}
                         </span>
                         <template #dropdown>
@@ -45,7 +45,7 @@
                         <p class="nodataText">暂无数据，敬请期待</p>
                     </div>
                 </template>
-            </el-tree>
+            </el-tree> -->
         </div>
     </div>
 </template>
@@ -53,6 +53,7 @@
     import httpRequest from '@/utils/request.js'
     import tree_shuaxing from '@/assets/menuImg/tree_shuaxing.png'
     import nodata from '@/assets/images/noData.png'
+    import TreeNode from './treeStyle.vue'
     import {
         Search
     } from '@element-plus/icons-vue'
@@ -66,6 +67,9 @@
         DebugCameraPrimitive
     } from 'cesium'
     export default {
+        components: {
+            TreeNode
+        },
         props: {
             data: {
                 type: Array,
@@ -309,6 +313,16 @@
                 padding: 8px 0 0 10px;
             }
 
+            .treeMainMsg {
+                span {
+                    font-family: Microsoft YaHei;
+                    font-weight: 400;
+                    font-size: 14px;
+                    color: #121212;
+                    line-height: 30px;
+                }
+            }
+
             .el-tree {
                 background: #161f1e;
                 color: #fff;

src/components/generatingCapacityComponent/treeStyle.vue

@@ -0,0 +1,198 @@
+<template>
+    <div>
+        <div v-for="(child, index) in node" :key="child.id" style="margin-left: 20px" class="treeStyle">
+            <div style="display: flex" :id="child.id">
+                <div class="dashedSty">
+                    <span class="hasMore_shu" :style="index+1 !== node.length ? 'height: 30px' : 'height: 18px'"></span>
+                    <span class="hasMore_heng"></span>
+                </div>
+                <div style="display: flex;cursor:pointer">
+                    <div v-if="showCheckbox">
+                        <div class="changeradio" v-if="child.showCheck" @click.stop="funCheckChange(child, node)">
+                            <el-icon><Select /></el-icon>
+                        </div>
+                        <div class="radio" v-else @click.stop="funCheckChange(child, node)"></div>
+                    </div>
+                    <span :class="child.showSpan ? 'changenodeLabel' : 'nodeLabel'"
+                        @click.stop="funCurrentChange(child, node)">{{child.label}}</span>
+                </div>
+            </div>
+            <tree-node :node="child.children" :data="node" v-if="child.children.length>0" :show-checkbox="showCheckbox">
+            </tree-node>
+        </div>
+
+    </div>
+</template>
+
+<script>
+    export default {
+        name: 'treeNode',
+        props: {
+            node: {
+                type: Array,
+                default: () => {
+                    return [];
+                },
+            },
+            data: {
+                type: Object,
+                default: () => {
+                    return {};
+                },
+            },
+            showCheckbox: {
+                type: Boolean,
+                default: () => {
+                    return false;
+                },
+            },
+        },
+        data() {
+            return {};
+        },
+        methods: {
+            funCurrentChange(current, node) {
+                if (current && node && node.length > 0) {
+                    node.forEach(it => {
+                        it.showSpan = false
+                        if (it.id === current.id) {
+                            it.showSpan = !it.showSpan
+                        }
+
+                        function childFn(it) {
+                            if (it.children && it.children.length > 0) {
+                                it.children.forEach(iv => {
+                                    iv.showSpan = false
+                                    childFn(iv)
+                                })
+                            }
+                        }
+                        childFn(it)
+                    })
+                }
+                if (this.data && this.data.length > 0) {
+                    this.data.map(o => {
+                        o.showSpan = false
+                    })
+                }
+                this.$parent.funCurrentChange(current, null)
+            },
+            funCheckChange(current, node) {
+                if (current && node && node.length > 0) {
+                    node.forEach(it => {
+                        it.showCheck = false
+                        if (it.id === current.id) {
+                            it.showCheck = !it.showCheck
+                        }
+
+                        function childFn(it) {
+                            if (it.children && it.children.length > 0) {
+                                it.children.forEach(iv => {
+                                    iv.showCheck = false
+                                    childFn(iv)
+                                })
+                            }
+                        }
+                        childFn(it)
+                    })
+                }
+                if (this.data && this.data.length > 0) {
+                    this.data.map(o => {
+                        o.showCheck = false
+                    })
+                }
+                this.$parent.funCheckChange(current, current)
+            }
+        }
+    };
+</script>
+<style lang="less">
+    .treeStyle {
+        height: 30px;
+
+        .radio {
+            position: relative;
+            top: 10px;
+            width: 14px;
+            height: 14px;
+            background: #CBCCD1;
+            border-radius: 3px;
+            border: 1px solid #7C808C;
+            margin-right: 10px;
+        }
+
+        .changeradio {
+            position: relative;
+            top: 10px;
+            width: 15px;
+            height: 15px;
+            background: #5473E8;
+            border-radius: 3px;
+            margin-right: 10px;
+
+            .el-icon {
+                position: absolute;
+                top: 4px;
+                left: 2px;
+                color: #fff;
+                width: 10px;
+                height: 8px;
+            }
+        }
+
+        .nodeLabel {
+            position: relative;
+            top: 2px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            font-size: 14px;
+            color: #121212;
+            line-height: 30px;
+        }
+
+        .changenodeLabel {
+            position: relative;
+            top: 2px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            font-size: 14px;
+            color: #5473E8;
+            line-height: 30px;
+            padding: 0 10px 0 0;
+            background: #FFFFFF;
+            box-shadow: 0px 0px 3px 0px rgba(83, 86, 94, 0.23);
+            border-radius: 5px;
+            border: 1px solid rgba(84, 115, 232, 0.3);
+        }
+
+        img {
+            width: 30px;
+            height: 30px;
+        }
+
+        .dashedSty {
+            width: 20px;
+            height: 30px;
+            position: relative;
+
+            .hasMore_shu {
+                position: absolute;
+                top: 0;
+                left: 5px;
+                display: inline-block;
+                width: 1px;
+                height: 30px;
+                border-left: 1px dashed #565D70;
+            }
+
+            .hasMore_heng {
+                width: 10px;
+                height: 1px;
+                position: absolute;
+                top: 17px;
+                left: 7px;
+                border-top: 1px dashed #565D70;
+            }
+        }
+    }
+</style>

src/components/homeComponent/echartsGauge.vue

@@ -0,0 +1,377 @@
+<template>
+    <div class="chart" :id="id"></div>
+</template>
+
+<script>
+    import util from "@/helper/util.js";
+    import partten from "@/helper/partten.js";
+    import * as echarts from "echarts";
+
+    export default {
+        name: "dsah-pie",
+        componentName: "dsah-pie",
+        props: {
+            // 宽度 默认9.722vh
+            width: {
+                type: String,
+                default: "85%",
+            },
+            // 高度 默认9.722vh
+            height: {
+                type: String,
+                default: "7.4074vh",
+            },
+            // 标题
+            title: {
+                type: String,
+                default: "标题",
+            },
+            unit: {
+                type: String,
+                default: "",
+            },
+            // 值
+            value: {
+                type: Number,
+                default: 0,
+            },
+            // 最小值
+            min: {
+                type: Number,
+                default: 0,
+            },
+            // 最大值
+            max: {
+                type: Number,
+                default: 100,
+            },
+            // 颜色 传入 green yellow等 (partten中支持的颜色)
+            color: {
+                type: String,
+                default: "green",
+            },
+        },
+        data() {
+            return {
+                id: "",
+                chart: null,
+            };
+        },
+        computed: {
+            colorValue() {
+                return partten.getColor(this.color);
+            },
+        },
+        methods: {
+            resize() {},
+            initChart() {
+                let chart = echarts.init(this.$el);
+                let option = {
+                    title: {
+                        show: true,
+                        text: '',
+                        subtext: this.title,
+                        subtextStyle: {
+                            fontSize: 14,
+                            color: "#8B93A6",
+                        },
+                        x: "45%",
+                        y: "70%",
+                        z: 8,
+                        textAlign: "center",
+                        textStyle: {
+                            color: "#8B93A6",
+                            fontSize: 12,
+                            fontWeight: "normal",
+                        },
+                    },
+                    series: [
+                        // 进度条
+                        {
+                            z: 1,
+                            name: "内部（环形）进度条",
+                            type: "gauge",
+                            radius: "75%",
+                            splitNumber: 5,
+                            axisLine: {
+                                lineStyle: {
+                                    color: [
+                                        [
+                                            (this.value < 0 ? 0 : this.value) / this.max,
+                                            new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
+                                                    offset: 0,
+                                                    color: "rgba(28, 153, 255, .1)",
+                                                },
+                                                {
+                                                    offset: 1,
+                                                    color: this.color,
+                                                },
+                                            ]),
+                                        ],
+                                        [1, "transparent"],
+                                    ],
+                                    width: 10,
+                                },
+                            },
+                            axisLabel: {
+                                show: false,
+                            },
+                            axisTick: {
+                                show: false,
+                            },
+                            splitLine: {
+                                show: false,
+                            },
+                            pointer: {
+                                show: false,
+                            },
+                        },
+                        // 指针
+                        {
+                            name: "指针",
+                            type: "gauge",
+                            z: 2,
+                            min: this.min,
+                            max: this.max,
+                            radius: "80%",
+                            axisLine: {
+                                show: false,
+                            },
+                            tooltip: {
+                                show: false,
+                            },
+                            axisLabel: {
+                                show: false,
+                            },
+                            axisTick: {
+                                show: false,
+                            },
+                            splitLine: {
+                                show: false,
+                            },
+                            detail: {
+                                show: false,
+                            },
+                            title: {
+                                //标题
+                                show: false,
+                            },
+                            data: [{
+                                value: this.value < 0 ? 0 : this.value,
+                            }, ],
+                            itemStyle: {
+                                normal: {
+                                    color: "#fff",
+                                },
+                            },
+                            pointer: {
+                                show: true,
+                                length: "35%",
+                                radius: "20%",
+                                width: 1, //指针粗细
+                                offsetCenter: ["0%", "-40%"],
+                            },
+                            animationDuration: 0,
+                        },
+                        // 刻度
+                        {
+                            name: "外部刻度",
+                            type: "gauge",
+                            center: ["50%", "49.5%"],
+                            radius: "80%",
+                            min: this.min, //最小刻度
+                            max: this.max, //最大刻度
+                            splitNumber: 10, //刻度数量
+                            startAngle: 225,
+                            endAngle: -45,
+                            axisLine: {
+                                show: true,
+                                // 仪表盘刻度线
+                                lineStyle: {
+                                    width: 1,
+                                    color: [
+                                        [
+                                            1,
+                                            this.color
+                                        ],
+                                    ],
+                                },
+                            },
+                            //仪表盘文字
+                            axisLabel: {
+                                show: false,
+                            },
+                            //刻度标签。
+                            axisTick: {
+                                show: true,
+                                distance: 6,
+                                splitNumber: 2,
+                                lineStyle: {
+                                    color: this.color, //用颜色渐变函数不起作用
+                                    width: 1,
+                                },
+                                length: 4,
+                            }, //刻度样式
+                            splitLine: {
+                                show: false,
+                            }, //分隔线样式
+                            detail: {
+                                show: false,
+                            },
+                            pointer: {
+                                show: false,
+                            },
+                        },
+                        // 显示数字
+                        {
+                            type: "pie",
+                            radius: ["0", "40%"],
+                            center: ["50%", "49.5%"],
+                            z: 8,
+                            animation: false,
+                            hoverAnimation: false,
+                            data: [{
+                                value: this.value < 0 ? 0 : this.value,
+                                itemStyle: {
+                                    normal: {
+                                        color: "transition",
+                                    },
+                                },
+                                label: {
+                                    normal: {
+                                        formatter: function (params) {
+                                            return params.value;
+                                        },
+                                        color: this.color,
+                                        fontSize: 12,
+                                        fontWeight: "bold",
+                                        position: "center",
+                                        show: true,
+                                    },
+                                },
+                                labelLine: {
+                                    show: false,
+                                },
+                            }, ],
+                        },
+                        {
+                            name: "内部阴影",
+                            type: "gauge",
+                            radius: "85%",
+                            splitNumber: 10,
+                            axisLine: {
+                                lineStyle: {
+                                    color: [
+                                        // [
+                                        //   1,
+                                        //   new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                                        //     {
+                                        //       offset: 0,
+                                        //       color: "rgba(45,230,150,0)",
+                                        //     },
+                                        //     {
+                                        //       offset: 0.5,
+                                        //       color: "rgba(45,230,150,0.2)",
+                                        //     },
+                                        //     {
+                                        //       offset: 1,
+                                        //       color: "rgba(45,230,150,1)",
+                                        //     },
+                                        //   ]),
+                                        // ],
+                                        [
+                                            1,
+                                            this.color == "green" ?
+                                            "rgba(45,230,150,0.1)" :
+                                            "rgba(255, 131, 0, 0.1)",
+                                        ],
+                                        // [1, "rgba(45,230,150,0)"],
+                                    ],
+                                    width: 3,
+                                },
+                            },
+                            axisLabel: {
+                                show: false,
+                            },
+                            axisTick: {
+                                show: false,
+                            },
+                            splitLine: {
+                                show: false,
+                            },
+                            itemStyle: {
+                                show: false,
+                            },
+                        },
+                        // 光环
+                        {
+                            type: "pie",
+                            radius: "40%",
+                            center: ["50%", "49.5%"],
+                            animationType: "scale",
+                            animation: false,
+                            label: {
+                                show: false,
+                            },
+                            labelLine: {
+                                show: false,
+                            },
+                            emphasis: {
+                                scale: false,
+                            },
+                            data: [{
+                                value: 1,
+                                itemStyle: {
+                                    color: "transparent",
+                                    borderColor: this.color,
+                                    opacity: 0.3,
+                                    shadowColor: this.color,
+                                    shadowBlur: 20,
+                                },
+                            }, ],
+                        },
+                    ],
+                };
+
+                chart.clear();
+                chart.setOption(option);
+
+                this.resize = function () {
+                    chart.resize();
+                };
+
+                window.removeEventListener("resize", this.resize);
+                window.addEventListener("resize", this.resize);
+            },
+        },
+        created() {
+            this.id = "pie-chart-" + util.newGUID();
+        },
+        mounted() {
+            this.$el.style.width = this.width;
+            this.$el.style.height = this.height;
+            this.initChart();
+        },
+        updated() {
+            this.initChart();
+        },
+        unmounted() {
+            window.removeEventListener("resize", this.resize);
+        },
+
+        watch: {
+            "$store.state.themeName"() {
+                this.initChart();
+            },
+        },
+    };
+</script>
+
+<style lang="less" scoped>
+    .chart {
+        width: 100%;
+        height: 100%;
+        display: block;
+        margin: auto;
+    }
+</style>

src/components/homeComponent/echartsGaugeComponent.vue

@@ -0,0 +1,64 @@
+<template>
+    <div class="power-review">
+        <Row type="flex" justify="space-between" :align="'middle'">
+            <!-- 功率复核 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" />
+            </Col>
+        </Row>
+    </div>
+</template>
+
+<script>
+    import Col from "@/components/homeComponent/grid/col.vue";
+    import Row from "@/components/homeComponent/grid/row.vue";
+    import echartsGauge from "@/components/homeComponent/echartsGauge.vue";
+    import dayjs from "dayjs";
+    export default {
+        components: {
+            Row,
+            Col,
+            echartsGauge,
+        },
+
+        data() {
+            return {
+                // 功率复核数据
+                PowerLoad: [],
+
+            };
+        },
+
+        props: {
+            data: {
+                type: Array,
+                default: () => [],
+            },
+        },
+
+        mounted() {
+            this.PowerLoad = this.data;
+        },
+
+        methods: {
+
+        },
+
+        watch: {
+            data(res) {
+                this.PowerLoad = res;
+            },
+        },
+    };
+</script>
+
+<style lang="less" scoped>
+    .power-review {
+        padding: 15px 10px 10px 10px;
+    }
+
+    .col+.col {
+        margin-left: 0px;
+    }
+</style>

src/components/homeComponent/echartsPie.vue

@@ -0,0 +1,146 @@
+<template>
+    <div>
+        <div class="chart" :id="id + index"></div>
+    </div>
+</template>
+
+<script>
+    import * as echarts from "echarts";
+
+    export default {
+        name: "percent-pie",
+        componentName: "percent-pie",
+        props: {
+            width: {
+                type: String,
+                default: "100%",
+            },
+            height: {
+                type: String,
+                default: "18.519vh",
+            },
+            //  传入数据
+            list: {
+                type: Array,
+                default: () => [],
+            },
+            colors: {
+                type: Array,
+                default: () => ["#FF9B23", "#1C99FF"],
+            },
+        },
+        data() {
+            return {
+                id: "",
+                chart: null,
+                firstAnimation: true,
+            };
+        },
+
+        computed: {
+            datas() {
+                return this.list.map((t) => {
+                    return t.value;
+                });
+            },
+        },
+        methods: {
+            initChart(value, index) {
+                var chartDom = document.getElementById(this.id + (index + 1));
+                var chart = echarts.init(chartDom);
+                var option;
+
+                option = {
+                    title: {
+                        text: 'Referer of a Website',
+                        subtext: 'Fake Data',
+                        left: 'center'
+                    },
+                    tooltip: {
+                        trigger: 'item'
+                    },
+                    legend: {
+                        orient: 'vertical',
+                        left: 'left'
+                    },
+                    series: [{
+                        name: 'Access From',
+                        type: 'pie',
+                        radius: '50%',
+                        data: [{
+                                value: 1048,
+                                name: 'Search Engine'
+                            },
+                            {
+                                value: 735,
+                                name: 'Direct'
+                            }
+                        ],
+                        emphasis: {
+                            itemStyle: {
+                                shadowBlur: 10,
+                                shadowOffsetX: 0,
+                                shadowColor: 'rgba(0, 0, 0, 0.5)'
+                            }
+                        }
+                    }]
+                };
+
+                chart.dispatchAction({
+                    type: 'highlight',
+                    seriesIndex: 0,
+                    dataIndex: 0 // 这里的数字代表你想一直显示hover效果的饼图部分的索引
+                });
+
+                chart.clear();
+                chart.setOption(option);
+
+                this.resize = function () {
+                    chart.resize();
+                };
+
+                window.removeEventListener("resize", this.resize);
+                window.addEventListener("resize", this.resize);
+            },
+            handleElectricDetail() {},
+        },
+        created() {
+            this.id = "pie-chart-" + util.newGUID();
+        },
+        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);
+                });
+            },
+        },
+        unmounted() {
+            window.removeEventListener("resize", this.resize);
+        },
+    };
+</script>
+
+<style lang="less">
+    .chart {
+        width: 100%;
+        height: 100%;
+        display: inline-block;
+        cursor: default;
+    }
+</style>

src/components/homeComponent/echartsPie2.vue

@@ -0,0 +1,149 @@
+<template>
+    <div>
+        <div class="chart" :id="id + index"></div>
+    </div>
+</template>
+
+<script>
+    import * as echarts from "echarts";
+
+    export default {
+        name: "percent-pie",
+        componentName: "percent-pie",
+        props: {
+            width: {
+                type: String,
+                default: "100%",
+            },
+            height: {
+                type: String,
+                default: "18.519vh",
+            },
+            //  传入数据
+            list: {
+                type: Array,
+                default: () => [],
+            },
+            colors: {
+                type: Array,
+                default: () => ["#FF9B23", "#1C99FF"],
+            },
+        },
+        data() {
+            return {
+                id: "",
+                chart: null,
+                firstAnimation: true,
+            };
+        },
+
+        computed: {
+            datas() {
+                return this.list.map((t) => {
+                    return t.value;
+                });
+            },
+        },
+        methods: {
+            initChart(value, index) {
+                var chartDom = document.getElementById(this.id + (index + 1));
+                var chart = echarts.init(chartDom);
+                var option;
+
+                option = {
+                    tooltip: {
+                        trigger: 'item'
+                    },
+                    legend: {
+                        top: '5%',
+                        left: 'center'
+                    },
+                    series: [{
+                        name: 'Access From',
+                        type: 'pie',
+                        radius: ['55%', '70%'],
+                        avoidLabelOverlap: false,
+                        label: {
+                            show: false,
+                            position: 'center'
+                        },
+                        emphasis: {
+                            label: {
+                                show: true,
+                                fontSize: 40,
+                                fontWeight: 'bold'
+                            }
+                        },
+                        labelLine: {
+                            show: false
+                        },
+                        data: [{
+                                value: 1048,
+                                name: 'Search Engine'
+                            },
+                            {
+                                value: 735,
+                                name: 'Direct'
+                            }
+                        ]
+                    }]
+                };
+
+                chart.dispatchAction({
+                    type: 'highlight',
+                    seriesIndex: 0,
+                    dataIndex: 0 // 这里的数字代表你想一直显示hover效果的饼图部分的索引
+                });
+
+                chart.clear();
+                chart.setOption(option);
+
+                this.resize = function () {
+                    chart.resize();
+                };
+
+                window.removeEventListener("resize", this.resize);
+                window.addEventListener("resize", this.resize);
+            },
+            handleElectricDetail() {},
+        },
+        created() {
+            this.id = "pie-chart-" + util.newGUID();
+        },
+        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);
+                });
+            },
+        },
+        unmounted() {
+            window.removeEventListener("resize", this.resize);
+        },
+    };
+</script>
+
+<style lang="less">
+    .chart {
+        width: 100%;
+        height: 100%;
+        display: inline-block;
+        cursor: default;
+    }
+</style>

src/components/homeComponent/forecastBarComponent.vue

@@ -0,0 +1,326 @@
+<template>
+    <div>
+        <div class="chart" v-for="index of list.length" :key="index" :id="id + index"></div>
+    </div>
+</template>
+
+<script>
+    import util from "@/helper/util.js";
+    import partten from "@/helper/partten.js";
+    import * as echarts from "echarts";
+
+    export default {
+        name: "percent-pie",
+        componentName: "percent-pie",
+        props: {
+            width: {
+                type: String,
+                default: "100%",
+            },
+            height: {
+                type: String,
+                default: "18.519vh",
+            },
+            //  传入数据
+            list: {
+                type: Array,
+                default: () => [],
+            },
+            total: {
+                type: Number,
+                default: 150,
+            },
+            colors: {
+                type: Array,
+                default: () => ["#FF9B23", "#1C99FF"],
+            },
+        },
+        data() {
+            return {
+                id: "",
+                chart: null,
+                firstAnimation: true,
+            };
+        },
+
+        computed: {
+            datas() {
+                return this.list.map((t) => {
+                    return t.value;
+                });
+            },
+        },
+        methods: {
+            resize() {},
+            initChart(value, index) {
+                var currColor = value.color;
+                var $dom = document.getElementById(this.id + (index + 1));
+                $dom.style.width = this.width;
+                $dom.style.height = `calc(${this.height} / ${this.list.length} - 4px)`;
+                let chart = echarts.init($dom);
+                let option = {
+                    xAxis: {
+                        //   max: value.total,
+                        splitLine: {
+                            show: false,
+                        },
+                        axisLine: {
+                            show: false,
+                        },
+                        axisLabel: {
+                            show: false,
+                        },
+                        axisTick: {
+                            show: false,
+                        },
+                    },
+                    grid: {
+                        left: 16,
+                        top: 20, // 设置条形图的边s距
+                        right: 0,
+                        bottom: 0,
+                        containLabel: true,
+                    },
+                    yAxis: [{
+                        type: "category",
+                        inverse: true,
+                        data: [value],
+                        axisLine: {
+                            show: false,
+                        },
+                        axisTick: {
+                            show: false,
+                        },
+                        axisLabel: {
+                            show: false,
+                        },
+                    }, ],
+                    series: [
+                        // 内
+                        {
+                            type: "bar",
+                            barWidth: 6,
+                            animation: this.firstAnimation,
+                            // legendHoverLink: false,
+                            // silent: true,
+                            itemStyle: {
+                                normal: {
+                                    color: function (params) {
+                                        return {
+                                            type: "linear",
+                                            x: 100,
+                                            y: 10,
+                                            x2: 1,
+                                            y2: 0,
+                                            colorStops: [{
+                                                    offset: 0,
+                                                    color: currColor, // 0% 处的颜色
+                                                },
+                                                {
+                                                    offset: 1,
+                                                    color: currColor, // 100% 处的颜色
+                                                },
+                                            ],
+                                        };
+                                    },
+                                    shadowBlur: 10,
+                                    shadowColor: "rgba(255, 255, 255, 0.30)",
+                                },
+                            },
+                            label: {
+                                normal: {
+                                    show: false,
+                                    position: [0, -20],
+                                    formatter: function (param) {
+                                        return param.data.value;
+                                    },
+                                    textStyle: {
+                                        color: currColor,
+                                        // this.$store.state.themeName === "dark" ? "#ffffff" : "#000",
+                                        fontSize: 12,
+                                    },
+                                },
+                            },
+                            data: [value],
+                            z: 1,
+                            animationEasing: "elasticOut",
+                        },
+                        // 三角
+                        {
+                            type: "pictorialBar",
+                            symbolPosition: "end",
+                            animation: this.firstAnimation,
+                            data: [value.value],
+                            symbol: "triangle",
+                            symbolOffset: [0, -10],
+                            symbolSize: [5, 5],
+                            symbolRotate: 180,
+                            itemStyle: {
+                                normal: {
+                                    borderWidth: 0,
+                                    color: function (params) {
+                                        return currColor;
+                                    },
+                                    // shadowBlur: 2,
+                                    // shadowColor: "rgba(255, 255, 255, 0.80)",
+                                },
+                            },
+                        },
+                        // 分隔
+                        {
+                            type: "pictorialBar",
+                            itemStyle: {
+                                normal: {
+                                    color: this.$store.state.themeName === "dark" ? "#20314f" : "#000",
+                                },
+                            },
+                            animation: this.firstAnimation,
+                            symbolRepeat: "fixed",
+                            symbolMargin: 4,
+                            symbol: "rect",
+                            symbolClip: true,
+                            symbolSize: [1, 8],
+                            symbolPosition: "start",
+                            symbolOffset: [8, -1],
+                            symbolBoundingData: value.total,
+                            symbolRotate: -15,
+                            data: [value],
+                            z: 2,
+                            animationEasing: "elasticOut",
+                        },
+                        // 外边框
+                        {
+                            type: "pictorialBar",
+                            animation: this.firstAnimation,
+                            symbol: "rect",
+                            symbolBoundingData: value.total,
+                            itemStyle: {
+                                normal: {
+                                    color: "none",
+                                },
+                            },
+                            label: {
+                                normal: {
+                                    formatter: (params) => {
+                                        return "{gm|}{f|  " + params.data + "}";
+                                    },
+                                    rich: {
+                                        f: {
+                                            color: this.$store.state.themeName === "dark" ? "#fff" : "#000",
+                                            fontSize: 14,
+                                            lineHeight: 20,
+                                            fontFamily: "Bicubik",
+                                        },
+                                        gm: {
+                                            backgroundColor: currColor,
+                                            width: 4,
+                                            height: 4,
+                                            lineHeight: 20,
+                                            verticalAlign: "middle",
+                                            borderRadius: [50, 50, 50, 50],
+                                        },
+                                    },
+                                    position: "right",
+                                    distance: 8, // 向右偏移位置
+                                    show: true,
+                                },
+                            },
+                            // data: [+value.total],
+                        },
+                        // 外框
+                        {
+                            type: "bar",
+                            animation: this.firstAnimation,
+                            name: "外框",
+                            barGap: "-120%", // 设置外框粗细
+                            data: [{
+                                value: value.total,
+                                itemStyle: {
+                                    normal: {
+                                        color: "transparent",
+                                        borderColor: currColor, // [, "#333"],
+                                        borderWidth: 1, // 边框宽度
+                                        // barBorderRadius: 0, //圆角半径
+                                        opacity: 0.5,
+                                        label: {
+                                            // 标签显示位置
+                                            show: false,
+                                            position: "top", // insideTop 或者横向的 insideLeft
+                                        },
+                                    },
+                                },
+                            }, ],
+                            barWidth: 9,
+                        },
+                    ],
+                };
+
+                chart.clear();
+                chart.setOption(option);
+
+                this.resize = function () {
+                    chart.resize();
+                };
+
+                window.removeEventListener("resize", this.resize);
+                window.addEventListener("resize", this.resize);
+            },
+            handleElectricDetail() {},
+        },
+        created() {
+            this.id = "pie-chart-" + util.newGUID();
+        },
+        mounted() {
+            // 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;
+            // });
+        },
+        //   updated() {
+        //     this.$nextTick(() => {
+        //       this.list.forEach((value, index) => {
+        //         this.initChart(value, index);
+        //       });
+        //     });
+        //   },
+        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);
+                });
+            },
+        },
+        unmounted() {
+            window.removeEventListener("resize", this.resize);
+        },
+    };
+</script>
+
+<style lang="less">
+    .chart {
+        width: 100%;
+        height: 100%;
+        display: inline-block;
+        cursor: default;
+    }
+</style>

src/components/homeComponent/grid/row.vue

@@ -0,0 +1,81 @@
+<template>
+  <div :style="style" :class="classList"><slot></slot></div>
+</template>
+<script>
+export default {
+  name: "Row",
+  componentName: "Row",
+  props: {
+    gutter: Number,
+    type: { type: String, default: "flex" },
+    justify: { type: String, default: "start" },
+    align: { type: String, default: "top" },
+  },
+  computed: {
+    style() {
+      const ret = {};
+      if (this.gutter) {
+        ret.marginLeft = `-${this.gutter / 2}px`;
+        ret.marginRight = ret.marginLeft;
+      }
+      return ret;
+    },
+    classList() {
+      return ["row", this.justify !== "start" ? `is-justify-${this.justify}` : "", this.align !== "top" ? `is-align-${this.align}` : "", { "row--flex": this.type === "flex" }];
+    },
+  },
+  // render() {
+  //   return h(
+  //     this.tag,
+  //     {
+  //       class: ["row", this.justify !== "start" ? `is-justify-${this.justify}` : "", this.align !== "top" ? `is-align-${this.align}` : "", { "row--flex": this.type === "flex" }],
+  //       style: this.style,
+  //     },
+  //     this.$slots.default
+  //   );
+  // },
+};
+</script>
+
+<style>
+.row {
+  position: relative;
+  box-sizing: border-box;
+}
+.row + .row {
+  margin-top: 1vh;
+}
+.row:after,
+.row:before {
+  display: table;
+  content: "";
+}
+.row:after {
+  clear: both;
+}
+.row--flex {
+  display: flex;
+}
+.row--flex:after,
+.row--flex:before {
+  display: none;
+}
+.row--flex.is-justify-center {
+  justify-content: center;
+}
+.row--flex.is-justify-end {
+  justify-content: flex-end;
+}
+.row--flex.is-justify-space-between {
+  justify-content: space-between;
+}
+.row--flex.isz-justify-space-around {
+  justify-content: space-around;
+}
+.row--flex.is-align-middle {
+  align-items: center;
+}
+.row--flex.is-align-bottom {
+  align-items: flex-end;
+}
+</style>

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

@@ -66,7 +66,6 @@
                         for (let i = 0; i < res.data.length; i++) {
                             let item = res.data[i]
 
-
                             let DefaultIcon1 = L.icon({
                                 html: item.name,
                                 iconUrl: this.icoName,
@@ -89,57 +88,21 @@
 
                             var marker = null
                             var marker1 = null
-                            marker = L.marker([item.latitude, item.longitude], {
-                                title: item.name,
+                            let htmlStr =
+                                `${item.name}(经度：${item.latitude}°,纬度：${item.longitude}°,海拔高度:${item.altitude}km`
+                            marker = L.marker([Number(item.latitude), Number(item.longitude)], {
+                                title: htmlStr,
                                 icon: DefaultIcon1,
                                 data: item
                             }).addTo(this.map)
 
-
-                            // marker.on('mousemove', function (e) {
-                            //     console.log('2323', e)
-                            //     let data = e.target.options.data
-                            //     // var buttonDiv = document.createElement('div');
-                            //     // var commitButton = document.createElement('input');
-                            //     // commitButton.type = 'button';
-                            //     // commitButton.value = "功率曲线拟合";
-                            //     // commitButton.onclick = function () {
-                            //     //     console.log('功率曲线拟合', data)
-                            //     //     e.target.closePopup()
-                            //     //     marker(e.latlng, {
-                            //     //         title: item.name,
-                            //     //         icon: DefaultIcon1,
-                            //     //         data: item
-                            //     //     }).addTo(this.map)
-                            //     // };
-                            //     // buttonDiv.appendChild(commitButton);
-
-                            //     // var deleteButton = document.createElement('input');
-                            //     // deleteButton.type = 'button';
-                            //     // deleteButton.value = "对风偏差分析";
-                            //     // deleteButton.onclick = function () {
-                            //     //     console.log('对风偏差分析', data)
-                            //     // };
-                            //     // buttonDiv.appendChild(deleteButton);
-
-                            //     // var parentDiv = document.createElement('div');
-                            //     // var commentDiv = document.createElement('div');
-                            //     // // 区域名称
-                            //     let name = e.target.options.data.name
-                            //     // var nameSpan = document.createTextNode(name + ':');
-                            //     // commentDiv.appendChild(nameSpan);
-                            //     // parentDiv.appendChild(commentDiv);
-                            //     // parentDiv.appendChild(buttonDiv);
-                            //     // e.target.bindPopup(e.latlng, parentDiv).openPopup();
-                            //     e.target.bindPopup(name).openPopup();
-                            // })
                             let that = this
                             marker.on('mousemove', function (e) {
                                 console.log('map', item)
                                 that.rightObj = item
                             })
 
-                            marker1 = new L.marker([item.latitude, item.longitude], {
+                            marker1 = new L.marker([Number(item.latitude), Number(item.longitude)], {
                                 icon: iconLabel,
                             }).addTo(this.map)
 
@@ -181,14 +144,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)
@@ -217,6 +180,7 @@
             },
             powerLine(e) {
                 console.log('2221111', this.layers)
+                console.log('ceeeee', e)
                 if (!this.rightObj.latitude && !this.rightObj.longitude) {
                     this.$message({
                         message: '该坐标系下暂无功率曲线拟合',

src/views/generatingCapacity/dataAnalysis/rateAnalysis/components/chart.vue

@@ -119,9 +119,10 @@
                         fontSize: util.vh(10)
                     },
                     top: 'middle',
-                    data: ['0-2.5', '2.5-5', '5-7.5', '7.5-10', '10-12.5', '12.5-15', '15-17.5', '17.5-20',
-                        '20-22.5', '22.5-25', '25-inf'
-                    ]
+                    // data: ['0-2.5', '2.5-5', '5-7.5', '7.5-10', '10-12.5', '12.5-15', '15-17.5', '17.5-20',
+                    //     '20-22.5', '22.5-25', '25-inf'
+                    // ]
+                    data: ['0-3', '3-5', '5-10', '10-12', '12-25', '25-inf']
                 }
             }
         },

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

@@ -236,37 +236,55 @@
     const funText = (index) => {
         let str = ''
         switch (index) {
+            // case 0:
+            //     str = '0-2.5'
+            //     break
+            // case 1:
+            //     str = '2.5-5'
+            //     break
+            // case 2:
+            //     str = '5-7.5'
+            //     break
+            // case 3:
+            //     str = '7.5-10'
+            //     break
+            // case 4:
+            //     str = '10-12.5'
+            //     break
+            // case 5:
+            //     str = '12.5-15'
+            //     break
+            // case 6:
+            //     str = '15-17.5'
+            //     break
+            // case 7:
+            //     str = '17.5-20'
+            //     break
+            // case 8:
+            //     str = '20-22.5'
+            //     break
+            // case 9:
+            //     str = '22.5-25'
+            //     break
+            // case 10:
+            //     str = '25-inf'
+            //     break
             case 0:
-                str = '0-2.5'
+                str = '0-3'
                 break
             case 1:
-                str = '2.5-5'
+                str = '3-5'
                 break
             case 2:
-                str = '5-7.5'
+                str = '5-10'
                 break
             case 3:
-                str = '7.5-10'
+                str = '10-12'
                 break
             case 4:
-                str = '10-12.5'
+                str = '12-25'
                 break
             case 5:
-                str = '12.5-15'
-                break
-            case 6:
-                str = '15-17.5'
-                break
-            case 7:
-                str = '17.5-20'
-                break
-            case 8:
-                str = '20-22.5'
-                break
-            case 9:
-                str = '22.5-25'
-                break
-            case 10:
                 str = '25-inf'
                 break
         }

src/views/generatingCapacity/dataFilter/process/index.vue

@@ -156,9 +156,20 @@
             current,
             currentNode: ''
         })
+        debugger
         const checkIds = []
-        if (checkedNodes.checkedNodes.length) {
-            let checkArr = checkedNodes.checkedNodes
+        // if (checkedNodes.length) {
+        //     let checkArr = checkedNodes
+        //     checkArr.forEach(it => {
+        //         if (it.childs && it.childs.length) {
+        //             it.childs.forEach(iv => {
+        //                 checkIds.push(iv.id)
+        //             })
+        //         }
+        //     })
+        // }
+        if (checkedNodes) {
+            let checkArr = [checkedNodes]
             checkArr.forEach(it => {
                 if (it.childs && it.childs.length) {
                     it.childs.forEach(iv => {

src/views/home/index.vue

@@ -1,121 +1,695 @@
 <template>
-    <div class="homePage" :style="pageHeight">
+    <div class="homePage" :class="!swichTheme ? 'themeDarkHome' : 'themeLightHome'" :style="pageHeight">
+        <div class="homeMain">
+            <div class="leftMain">
+                <div style="height:55px"></div>
+                <!-- 天气预测 -->
+                <div class="weather">
+                    <div class="comHeader">
+                        <div class="headerLeft">
+                            <span class="gray"></span>
+                            <span class="blue"></span>
+                        </div>
+                        <div class="headerRight">
+                            <span class="headerName">天气预测</span>
+                            <span class="headerZs">
+                                <span class="headerZsN"></span>
+                            </span>
+                        </div>
+                    </div>
+                    <div class="weatherMain">
+                        <div class="weatherMain_top">
+                            <div class="wetherImg">
+                                <img :src="tianqi" alt="">
+                            </div>
+                            <div class="wetherMsg">
+                                <span class="wetherMsg_Du">11°</span>
+                                <div class="wetherMsg_Det">
+                                    <span style="margin-left:5px">阴</span>
+                                    <span>北风</span>
+                                    <span>3-4级</span>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="weatherMain_bot">
+                            <div class="weaMain" v-for="it in weatherArr" :key="it.name">
+                                <img :src="it.img" alt="">
+                                <p class="pOne">{{it.value}}</p>
+                                <p class="pTwo">{{it.name}}</p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <!-- 预测电量 -->
+                <div class="Electric">
+                    <div class="comHeader">
+                        <div class="headerLeft">
+                            <span class="gray"></span>
+                            <span class="blue"></span>
+                        </div>
+                        <div class="headerRight">
+                            <div class="headerNaAll">
+                                <span class="headerNa">预测电量</span>
+                                <span class="headerNa2">单位：万kWh</span>
+                            </div>
+                            <span class="headerZs">
+                                <span class="headerZsN"></span>
+                            </span>
+                        </div>
+                    </div>
+                    <div class="electricMain">
+                        <div v-for="(item, index) in dayFa" :key="index" class="electricMain_day">
+                            <div class="powerCharts">
+                                <div class="powerName">{{ item[0].name }}</div>
+                                <div class="powerItem">
+                                    <div class="powerValue">
+                                        <span style="background-color:#FF9B23"></span>
+                                        <span>{{ item[0].total }}</span>
+                                    </div>
+                                    <forecast-bar-component :list="item" height="40px" width="410px" />
+                                </div>
+                            </div>
+                        </div>
+                        <div style="margin-top: 20px">
+                            <div v-for="(item, index) in monthFa" :key="index" class="electricMain_month">
+                                <div class="powerCharts">
+                                    <div class="powerName">{{ item[0].name }}</div>
+                                    <div class="powerItem">
+                                        <div class="powerValue">
+                                            <span style="background-color:#FF9B23"></span>
+                                            <span>{{ item[0].total }}</span>
+                                        </div>
+                                        <forecast-bar-component :list="item" height="40px" width="410px" />
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <!-- 实际功率 -->
+                <div class="power">
+                    <div class="comHeader">
+                        <div class="headerLeft">
+                            <span class="gray"></span>
+                            <span class="blue"></span>
+                        </div>
+                        <div class="headerRight">
+                            <div class="headerNaAll">
+                                <span class="headerNa">实际功率</span>
+                                <span class="headerNa2">单位：万kWh</span>
+                            </div>
+                            <span class="headerZs">
+                                <span class="headerZsN"></span>
+                            </span>
+                        </div>
+                    </div>
+                    <div class="powerMain">
+                        <echarts-gauge-component :data="powerDataHome" />
+                    </div>
+                </div>
+            </div>
+            <div class="map">
+                <p class="dingbian">定边县</p>
+                <p class="jingbian">靖边县</p>
+                <div class="fengjiSty" v-for="it in fengjiArr" :key="it" :style="fengjiStyFn(it)">
+                    <div class="mainSv">
+                        <img :src="fengji" class="fengjiImg">
+                        <img :src="quan" class="quanImg">
+                        <img :src="fengjiBack" class="fengjiBackImg">
+                        <span class="dianSty"></span>
+                    </div>
+                    <div class="mainMsg">
+                        <span>{{it.name}}</span>
+                    </div>
+                </div>
+            </div>
+            <div class="rightMain">
+                <div style="height:55px"></div>
+                <div class="powerAnalysis">
+                    <div class="comHeader">
+                        <div class="headerLeft">
+                            <span class="gray"></span>
+                            <span class="blue"></span>
+                        </div>
+                        <div class="headerRight">
+                            <div class="headerNaAll">
+                                <span class="headerNa">电量分析</span>
+                                <span class="headerNa2">单位：万kWh</span>
+                            </div>
+                            <span class="headerZs">
+                                <span class="headerZsN"></span>
+                            </span>
+                        </div>
+                    </div>
+                    <div class="powerAnalysisMain">
+                        <!-- <echarts-gauge-component :data="powerDataHome" /> -->
+                    </div>
+                </div>
+            </div>
+        </div>
         <div class="footer">
             <div class="exitV">
                 <div class="time">
-                    <span>服务器时间：{{currentTime}}</span>
                 </div>
             </div>
         </div>
     </div>
+
 </template>
 
 <script>
+    import fengji from '@/assets/images/indexCom/fengji.png'
+    import quan from '@/assets/images/indexCom/quan.png'
+    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 wea1 from '@/assets/images/indexCom/wea_1.png'
+    import wea2 from '@/assets/images/indexCom/wea_2.png'
+    import wea3 from '@/assets/images/indexCom/wea_3.png'
+    import wea4 from '@/assets/images/indexCom/wea_4.png'
+    import wea5 from '@/assets/images/indexCom/wea_5.png'
+
+    import forecastBarComponent from "@/components/homeComponent/forecastBarComponent.vue";
+    import echartsGaugeComponent from "@/components/homeComponent/echartsGaugeComponent.vue";
+    import echartsPie from "@/components/homeComponent/echartsPie.vue";
+
     export default {
+        components: {
+            forecastBarComponent,
+            echartsGaugeComponent,
+            echartsPie
+        },
         data() {
             return {
-                statusTimer: '',
-                currentTime: '',
-                bodyHeight: document.documentElement.clientHeight - 60 + 'px',
+                fengji: fengji,
+                quan: quan,
+                fengjiBack: fengjiBack,
+                tixing: tixing,
+                tianqi: tianqi,
+                wea1: wea1,
+                wea2: wea2,
+                wea3: wea3,
+                wea4: wea4,
+                wea5: wea5,
+                weatherArr: [],
+                fengjiArr: [],
+                dayFa: [],
+                monthFa: [],
+                powerDataHome: []
             }
         },
         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%',
+                    top: '43%'
+                },
+                {
+                    name: '新庄风电场',
+                    left: '35%',
+                    top: '31%'
+                },
+                {
+                    name: '草山梁风电场',
+                    left: '45%',
+                    top: '41%'
+                },
+                {
+                    name: '雷家山风电场',
+                    left: '52%',
+                    top: '28%'
+                },
+                {
+                    name: '吉山梁风电场',
+                    left: '58%',
+                    top: '42%'
+                },
+                {
+                    name: '左庄风电场',
+                    left: '64%',
+                    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() {
                 return {
-                    'height': document.documentElement.clientHeight - 115 + 'px'
+                    'height': document.documentElement.clientHeight - 50 + 'px'
                 }
             }
         },
         mounted() {
-            let that = this
-            that.statusTimer = setInterval(function () {
-                that.currentTime = that.changeDate(new Date())
-            }, 1000)
-        },
-        beforeRouteLeave(to, from, next) {
-            next()
-            if (this.statusTimer) {
-                clearInterval(this.statusTimer);
-                this.statusTimer = null;
-            }
+
         },
         methods: {
-            changeDate(date) {
-                var y = date.getFullYear();
-                var m = date.getMonth() + 1;
-                m = m < 10 ? ('0' + m) : m;
-                var d = date.getDate();
-                d = d < 10 ? ('0' + d) : d;
-                var h = date.getHours();
-                h = h < 10 ? ('0' + h) : h;
-                var minute = date.getMinutes();
-                minute = minute < 10 ? ('0' + minute) : minute;
-                var second = date.getSeconds();
-                second = second < 10 ? ('0' + second) : second;
-                return y + '-' + m + '-' + d + ' ' + h + ':' + minute + ':' + second
-            }
+            fengjiStyFn(it) {
+                return `left:${it.left};top:${it.top}`
+            },
         }
     }
 </script>
 
 <style lang="less">
     .homePage {
-        .windStstus {
+        height: 100%;
+
+        .homeMain {
             display: flex;
-            align-items: center;
-            background: #000;
-            margin: 0 10px;
-            border: 1px solid #7674d8;
-            border-radius: 10px 10px 0 0;
-            border-bottom: none;
-            height: 40px;
-
-            .everyOne {
+            width: 100%;
+            height: 75vh;
+
+            .comHeader {
+                height: 28px;
                 display: flex;
-                align-items: center;
 
-                img {
-                    width: 21px;
-                    height: 21px;
-                    margin-left: 18px;
-                }
+                .headerLeft {
+                    height: 28px;
+                    width: 20px;
+                    position: relative;
+
+                    .gray {
+                        position: absolute;
+                        left: 5px;
+                        top: 3px;
+                        display: inline-block;
+                        width: 5px;
+                        height: 5px;
+                        background: #CBD2E2;
+                    }
 
-                .statusName {
-                    margin-left: 10px;
-                    font-size: 14px;
+                    .blue {
+                        position: absolute;
+                        left: 5px;
+                        top: 20px;
+                        display: inline-block;
+                        width: 5px;
+                        height: 5px;
+                        background: #1C99FF;
+                        transform: rotate(45deg);
+                    }
                 }
 
-                .statusNum {
-                    padding: 0 18px;
+                .headerRight {
+                    width: 427px;
+                    height: 28px;
+                    background: #2D3138;
                     position: relative;
-                    border-right: 1px dashed #fff;
+
+                    .headerName {
+                        font-family: Microsoft YaHei;
+                        font-weight: 400;
+                        font-size: 16px;
+                        color: #FFFFFF;
+                        line-height: 28px;
+                        margin-left: 10px;
+                    }
+
+                    .headerNaAll {
+                        display: flex;
+                        justify-content: space-between;
+
+                        .headerNa {
+                            font-family: Microsoft YaHei;
+                            font-weight: 400;
+                            font-size: 16px;
+                            color: #FFFFFF;
+                            line-height: 28px;
+                            margin-left: 10px;
+                        }
+
+                        .headerNa2 {
+                            font-family: Microsoft YaHei;
+                            font-weight: 400;
+                            font-size: 12px;
+                            color: #787F8F;
+                            line-height: 28px;
+                            margin-right: 8px;
+                        }
+                    }
+
+                    .headerZs {
+                        display: inline-block;
+                        position: absolute;
+                        right: 0;
+                        top: 22px;
+                        width: 32px;
+                        height: 6px;
+                        background: #0F0F0F;
+
+                        .headerZsN {
+                            position: relative;
+                            top: -8px;
+                            left: 2px;
+                            display: inline-block;
+                            width: 30px;
+                            height: 4px;
+                            background: #41454C;
+                        }
+                    }
+                }
+            }
+
+            .leftMain {
+                width: 25%;
+                height: 100%;
+                margin-left: 37px;
+
+
+                .weather {
+                    margin-bottom: 30px;
+
+                    .weatherMain {
+                        margin-top: 15px;
+
+                        .weatherMain_top {
+                            display: flex;
+
+                            .wetherImg {
+                                img {
+                                    width: 48px;
+                                    height: 48px;
+                                }
+
+                                margin: 9px 0 0 25px;
+                            }
+
+                            .wetherMsg {
+                                margin-left: 21px;
+
+                                .wetherMsg_Du {
+                                    font-family: SourceHanSansCN;
+                                    font-weight: 400;
+                                    font-size: 30px;
+                                    color: #FFFFFF;
+                                }
+
+                                .wetherMsg_Det {
+                                    display: flex;
+
+                                    span {
+                                        font-family: Microsoft YaHei;
+                                        font-weight: 400;
+                                        font-size: 14px;
+                                        color: #FFFFFF;
+                                        margin-right: 25px;
+                                    }
+                                }
+                            }
+                        }
+
+                        .weatherMain_bot {
+                            display: flex;
+                            justify-content: space-around;
+                            margin-top: 18px;
+
+                            .weaMain {
+                                text-align: center;
+
+                                .pOne {
+                                    font-family: SourceHanSansCN;
+                                    font-weight: 400;
+                                    font-size: 14px;
+                                    color: #FFFFFF;
+                                    line-height: 28px;
+                                }
+
+                                .pTwo {
+                                    font-family: Microsoft YaHei;
+                                    font-weight: 400;
+                                    font-size: 14px;
+                                    color: #8B93A6;
+                                }
+                            }
+                        }
+                    }
+                }
+
+                .Electric {
+                    margin-bottom: 30px;
+
+                    .electricMain {
+                        padding-top: 20px;
+
+                        .electricMain_day,
+                        .electricMain_month {
+                            .powerCharts {
+                                position: relative;
+                                display: flex;
+                                flex-direction: row;
+                                align-items: flex-end;
+                                width: 100%;
+                                margin-top: 5px;
+                                margin-left: 10px;
+
+                                .powerName {
+                                    position: absolute;
+                                    left: 15px;
+                                    top: -8px;
+                                    font-family: Microsoft YaHei;
+                                    font-weight: 400;
+                                    font-size: 14px;
+                                    color: #8B93A6;
+                                    line-height: 28px;
+                                }
+
+                                .powerItem {
+                                    display: flex;
+                                    position: relative;
+
+                                    .powerValue {
+                                        font-size: 12px;
+                                        font-family: Bicubik;
+                                        position: absolute;
+                                        right: -12px;
+                                        top: 17px;
+
+                                        span:nth-child(1) {
+                                            width: 5px;
+                                            height: 5px;
+                                            border-radius: 5px;
+                                            display: inline-block;
+                                            background-color: #fff;
+                                            margin-right: 5px;
+                                        }
+
+                                        span:nth-child(2) {
+                                            font-family: Bicubik;
+                                            font-weight: 400;
+                                            font-size: 12px;
+                                            color: #FFFFFF;
+                                            position: relative;
+                                            top: 2px;
+                                        }
+                                    }
+                                }
+                            }
+                        }
+
+
+                    }
                 }
 
-                span {
-                    color: #fff;
+                .power {
+                    .powerMain {
+                        margin-top: 10px;
+                    }
+                }
+            }
+
+            .map {
+                width: 50%;
+                height: 100%;
+                position: relative;
+
+                .dingbian,
+                .jingbian {
+                    font-family: Microsoft YaHei;
+                    font-weight: 400;
+                    font-size: 18px;
+                    color: #A5ABB7;
+                    line-height: 35px;
+                    text-shadow: 0px 1px 2px #070A11;
+                }
+
+                .dingbian {
+                    position: absolute;
+                    top: 68%;
+                    left: 15%;
+                }
+
+                .jingbian {
+                    position: absolute;
+                    top: 30%;
+                    left: 67%;
+                }
+
+                .fengjiSty {
+                    position: absolute;
+                    width: 40px;
+
+                    .mainSv {
+                        position: relative;
+                        width: 40px;
+
+                        .quanImg {
+                            position: absolute;
+                            left: 5px;
+                            bottom: -2px;
+                        }
+
+                        .fengjiBackImg {
+                            position: absolute;
+                            bottom: -2px;
+                            left: -5px;
+                        }
+
+                        .dianSty {
+                            display: inline-block;
+                            width: 6px;
+                            height: 7px;
+                            background: #31FBFD;
+                            border-radius: 50%;
+                            position: absolute;
+                            left: 3px;
+                        }
+                    }
+
+                    .mainMsg {
+                        width: 105px;
+                        height: 30px;
+                        background-image: url('@/assets/images/indexCom/tixing.png');
+                        background-repeat: no-repeat;
+                        position: absolute;
+                        bottom: -7px;
+                        left: -98px;
+
+                        span {
+                            font-family: Microsoft YaHei;
+                            font-weight: 400;
+                            font-size: 14px;
+                            color: #FFFFFF;
+                            line-height: 23px;
+                            position: relative;
+                            left: 6px;
+                            top: 2px;
+                        }
+                    }
+                }
+            }
+
+            .rightMain {
+                width: 25%;
+                height: 100%;
+
+                .powerAnalysis {
+                    position: relative;
+
                 }
             }
         }
 
         .footer {
-            padding: 0 10px;
             width: 100%;
-            height: 40px;
-            position: fixed;
-            bottom: 0;
+            height: 25vh;
+        }
+    }
 
-            .exitV {
-                display: flex;
-                justify-content: space-between;
-                line-height: 40px;
+    .themeDarkHome {
+        background-color: #0F0F0F;
+        background-image: url('@/assets/images/indexCom/backImg_B.png');
+        background-repeat: no-repeat;
 
-                .time {
-                    margin-left: 10px;
-                    color: #fff;
-                }
+        .homeMain {
+
+            .map {
+                background-image: url('@/assets/images/indexCom/map_B.png');
+                background-repeat: no-repeat;
+                background-size: 90%;
+                background-position: center;
             }
         }
     }

src/views/login/index.vue

@@ -140,8 +140,8 @@
                     if (datas && datas.code === 0) {
                         setToken(datas.data.accessToken)
                         that.$router.push({
-                            // path: "/home"
-                            path: "/generatingCap/dataFilter/prepare"
+                            path: "/home"
+                            // path: "/generatingCap/dataFilter/prepare"
                         })
                     } else {
                         ElMessage.error(datas.msg);