基于风机发电量全寿命周期管控的研究与应用项目中首页部分黑色版本开发（月发电量栏，72小时功率曲线栏按照UI设计图还原开发展示，电量分析栏按照UI设计图更换图标）；发电能力分析系统修改浆距角分析页面曲线展示功能，微观选址分析优化风机展示问题；

.env.production

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

components.d.ts

@@ -18,6 +18,7 @@ declare module 'vue' {
     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']
+    EchartsPie2: typeof import('./src/components/homeComponent/echartsPie2.vue')['default']
     ElButton: typeof import('element-plus/es')['ElButton']
     ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
     ElCheckboxGroup: typeof import('element-plus/es')['ElCheckboxGroup']
@@ -26,6 +27,9 @@ 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']
@@ -39,6 +43,7 @@ declare module 'vue' {
     ElOption: typeof import('element-plus/es')['ElOption']
     ElProgress: typeof import('element-plus/es')['ElProgress']
     ElRadio: typeof import('element-plus/es')['ElRadio']
+    ElRadioButton: typeof import('element-plus/es')['ElRadioButton']
     ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
     ElRow: typeof import('element-plus/es')['ElRow']
     ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
@@ -51,6 +56,7 @@ 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']

package.json

@@ -19,6 +19,7 @@
     "js-cookie": "^3.0.5",
     "jspdf": "^2.5.1",
     "leaflet": "^1.9.4",
+    "leaflet-canvas-marker": "^0.2.0",
     "leaflet-contextmenu": "^1.4.0",
     "leaflet-tilelayer-wmts": "^1.0.0",
     "leaflet.wmts": "^1.0.2",

src/components/commonHeaders.vue

@@ -12,7 +12,7 @@
                     </div>
                     <div class="proSet">
                         <div class="settingStop">
-                            <el-switch v-model="switchTheme" @change="changSwith">
+                            <el-switch v-model="switchTheme" @change="changSwith" style="display: none">
                                 <template #active-action>
                                     <!-- <span class="custom-active-action">T</span> -->
                                     <img :src="moon_B" alt="" v-if="!switchTheme">

src/components/generatingCapacityComponent/tree.vue

@@ -10,12 +10,12 @@
             <div class="treeMainTit">
                 <span>数据</span>
             </div>
-            <div v-for="node in data" :key="node.id" class="treeMainMsg">
+            <!-- <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
+            </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 }">
@@ -45,7 +45,7 @@
                         <p class="nodataText">暂无数据，敬请期待</p>
                     </div>
                 </template>
-            </el-tree> -->
+            </el-tree>
         </div>
     </div>
 </template>

src/components/homeComponent/echartsPie.vue

@@ -1,6 +1,6 @@
 <template>
     <div>
-        <div class="chart" :id="id + index"></div>
+        <div class="chart" :id="'pie-chart-' + index" style="width:50%;height: 120px"></div>
     </div>
 </template>
 
@@ -19,6 +19,10 @@
                 type: String,
                 default: "18.519vh",
             },
+            index: {
+                type: Number,
+                default: 1,
+            },
             //  传入数据
             list: {
                 type: Array,
@@ -45,37 +49,25 @@
             },
         },
         methods: {
-            initChart(value, index) {
-                var chartDom = document.getElementById(this.id + (index + 1));
+            initChart(value) {
+                var chartDom = document.getElementById('pie-chart-' + this.index);
                 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'
-                    },
+                let option = {
+                    color: ['#1C99FF', '#54575D'],
                     series: [{
-                        name: 'Access From',
                         type: 'pie',
-                        radius: '50%',
+                        radius: '60%',
+                        left: -40,
                         data: [{
                                 value: 1048,
-                                name: 'Search Engine'
                             },
                             {
                                 value: 735,
-                                name: 'Direct'
                             }
                         ],
+                        label: {
+                            show: false
+                        },
                         emphasis: {
                             itemStyle: {
                                 shadowBlur: 10,
@@ -86,15 +78,16 @@
                     }]
                 };
 
+
+
+                chart.clear();
+                chart.setOption(option);
                 chart.dispatchAction({
                     type: 'highlight',
                     seriesIndex: 0,
                     dataIndex: 0 // 这里的数字代表你想一直显示hover效果的饼图部分的索引
                 });
 
-                chart.clear();
-                chart.setOption(option);
-
                 this.resize = function () {
                     chart.resize();
                 };
@@ -104,8 +97,8 @@
             },
             handleElectricDetail() {},
         },
-        created() {
-            this.id = "pie-chart-" + util.newGUID();
+        mounted() {
+            this.initChart();
         },
         watch: {
             list: {

src/components/homeComponent/echartsPie2.vue

@@ -1,6 +1,6 @@
 <template>
     <div>
-        <div class="chart" :id="id + index"></div>
+        <div class="chart" :id="'pie-chart-x-' + index" style="width:50%;height: 120px"></div>
     </div>
 </template>
 
@@ -19,6 +19,10 @@
                 type: String,
                 default: "18.519vh",
             },
+            index: {
+                type: Number,
+                default: 1,
+            },
             //  传入数据
             list: {
                 type: Array,
@@ -46,22 +50,25 @@
         },
         methods: {
             initChart(value, index) {
-                var chartDom = document.getElementById(this.id + (index + 1));
+                var chartDom = document.getElementById('pie-chart-x-' + this.index);
                 var chart = echarts.init(chartDom);
                 var option;
 
                 option = {
-                    tooltip: {
-                        trigger: 'item'
-                    },
-                    legend: {
-                        top: '5%',
-                        left: 'center'
+                    title: {
+                        text: '25%',
+                        top: 'center',
+                        left: 'center',
+                        textStyle: {
+                            fontSize: 16,
+                            color: '#fff'
+                        }
                     },
+                    color: ['#1C99FF', '#54575D'],
                     series: [{
                         name: 'Access From',
                         type: 'pie',
-                        radius: ['55%', '70%'],
+                        radius: ['60%', '70%'],
                         avoidLabelOverlap: false,
                         label: {
                             show: false,
@@ -69,9 +76,7 @@
                         },
                         emphasis: {
                             label: {
-                                show: true,
-                                fontSize: 40,
-                                fontWeight: 'bold'
+                                show: false,
                             }
                         },
                         labelLine: {
@@ -89,15 +94,16 @@
                     }]
                 };
 
+
+
+                chart.clear();
+                chart.setOption(option);
                 chart.dispatchAction({
                     type: 'highlight',
                     seriesIndex: 0,
                     dataIndex: 0 // 这里的数字代表你想一直显示hover效果的饼图部分的索引
                 });
 
-                chart.clear();
-                chart.setOption(option);
-
                 this.resize = function () {
                     chart.resize();
                 };
@@ -107,8 +113,8 @@
             },
             handleElectricDetail() {},
         },
-        created() {
-            this.id = "pie-chart-" + util.newGUID();
+        mounted() {
+            this.initChart();
         },
         watch: {
             list: {

src/main.js

@@ -17,9 +17,11 @@ import 'element-plus/dist/index.css'
 import * as ElementPlusIconsVue from '@element-plus/icons-vue'
 import * as echarts from 'echarts'
 
+
 import L from "leaflet"
 import "leaflet/dist/leaflet.css"
 import "leaflet-contextmenu"
+import "leaflet-canvas-marker"
 import icon from "leaflet/dist/images/marker-icon.png" // 引入leaflet默认图标
 
 import './permission' // permission control

src/permission.js

@@ -36,13 +36,14 @@ router.beforeEach((to, from, next) => {
         }
   } else {
     // 没有token
-    if (whiteList.indexOf(to.path) !== -1) {
-      // 在免登录白名单，直接进入
+    // if (whiteList.indexOf(to.path) !== -1) {
+    //   // 在免登录白名单，直接进入
+    //   next()
+    // } else {
+    //   next(`/login?redirect=${to.fullPath}`) // 否则全部重定向到登录页
+    //   NProgress.done()
+      // }
       next()
-    } else {
-      next(`/login?redirect=${to.fullPath}`) // 否则全部重定向到登录页
-      NProgress.done()
-    }
   }
 })
 

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

@@ -158,7 +158,7 @@
                         top: 4,
                         textStyle: {
                             fontSize: 14,
-                            color: that.echartsTheme === "dark" ? partten.getColor("grayl") : "#000",
+                            // color: that.echartsTheme === "dark" ? partten.getColor("grayl") : "#000",
                         },
                     },
                     // backgroundColor:
@@ -166,32 +166,33 @@
                     //     ? "rgba(0,0,0,0.4)"
                     //     : "rgba(255,255,255,0.5)",
                     //工具箱
-                    color: [
-                        "#cda819",
-                        "rgb(255,0,0)",
-                        "#0098d9",
-                        "#a9e3f199",
-                        "#a9e3f199",
-                        "#005eaa",
-                        "#0a4468",
-                        "#32a487"
-                    ],
+                    // color: [
+                    //     "#cda819",
+                    //     "rgb(255,0,0)",
+                    //     "#0098d9",
+                    //     "#a9e3f199",
+                    //     "#a9e3f199",
+                    //     "#005eaa",
+                    //     "#0a4468",
+                    //     "#32a487"
+                    // ],
+                    color: ['#7981AF', '#1C99FF', '#E57F25'],
                     toolbox: {
                         show: false,
                         x: "right",
                         position: [10, 10],
                         // backgroundColor:'rgba(0,0,0,0.4)',
-                        borderColor: partten.getColor("gray"),
+                        // borderColor: partten.getColor("gray"),
                         textStyle: {
                             fontSize: util.vh(16),
-                            color: partten.getColor("gray")
+                            // color: partten.getColor("gray")
                         },
                         iconStyle: {
-                            borderColor: partten.getColor("gray")
+                            // borderColor: partten.getColor("gray")
                         },
                         emphasis: {
                             iconStyle: {
-                                borderColor: partten.getColor("gray")
+                                // borderColor: partten.getColor("gray")
                             },
                         },
                     },
@@ -206,13 +207,13 @@
                         //   fontSize: util.vh(16),
                         //   color: partten.getColor("gray"),
                         // },
-                        formatter(params) {
-                            let str = that.getToolTipFn(params)
-                            return str
-                            // return params.value ? .x ?
-                            //     `${params.seriesName}<br />风速：${params.value.x}m/s<br />功率：${params.value.y}kW` :
-                            //     `${params.name}`;
-                        },
+                        // formatter(params) {
+                        //     let str = that.getToolTipFn(params)
+                        //     return str
+                        //     // return params.value ? .x ?
+                        //     //     `${params.seriesName}<br />风速：${params.value.x}m/s<br />功率：${params.value.y}kW` :
+                        //     //     `${params.name}`;
+                        // },
                     },
                     brush: {
                         seriesIndex: [2, 3],
@@ -247,13 +248,13 @@
                         fontSize: util.vh(16),
                         color: that.echartsTheme === "dark" ? "#fff" : "#000",
                     },
-                    visualMap: {
-                        type: "piecewise",
-                        show: false,
-                        dimension: 0,
-                        seriesIndex: 0,
-                        pieces: that.getColorFn()
-                    },
+                    // visualMap: {
+                    //     type: "piecewise",
+                    //     show: false,
+                    //     dimension: 0,
+                    //     seriesIndex: 0,
+                    //     // pieces: that.getColorFn()
+                    // },
                     //图例-每一条数据的名字
                     legend: {
                         show: that.showLegend,
@@ -263,11 +264,11 @@
                         top: "5",
                         // icon: "circle",
                         itemWidth: 6,
-                        inactiveColor: that.echartsTheme === "dark" ?
-                            partten.getColor("gray") : "#000",
+                        // inactiveColor: that.echartsTheme === "dark" ?
+                        //     partten.getColor("gray") : "#000",
                         textStyle: {
-                            color: that.echartsTheme === "dark" ?
-                                partten.getColor("grayl") : "#000",
+                            // color: that.echartsTheme === "dark" ?
+                            //     partten.getColor("grayl") : "#000",
                             fontSize: 12,
                         },
 
@@ -295,8 +296,8 @@
                         },
                         smooth: true,
                         textStyle: {
-                            color: that.echartsTheme === "dark" ?
-                                partten.getColor("gray") : "#000",
+                            // color: that.echartsTheme === "dark" ?
+                            //     partten.getColor("gray") : "#000",
                         },
                     }, ],
                     //y轴没有显式设置，根据值自动生成y轴

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

@@ -154,19 +154,32 @@
 
         let exTime = []
         let yp1 = [],
-            yp2 = []
+            yp2 = [],
+            yp3 = []
         res.data.bw.forEach(it => {
             exTime.push(it.time)
-            yp1.push(it.value)
+            yp1.push(it.yp1)
+            yp2.push(it.yp2)
+            yp3.push(it.yp3)
         })
         seriesAllData.value = res.data.bw
-        res.data.tj.forEach(it => {
-            yp2.push(it.value)
-        })
+        // res.data.bw.forEach(it => {
+        //     yp2.push(it.yp2)
+        // })
         xAxisData.value = exTime
 
-        seriesData.value = [{
-                name: "并网(绿)/停机(红)",
+        seriesData.value = [
+            // {
+            //     name: "并网(绿)/停机(红)",
+            //     type: "line",
+            //     symbol: "line", //设定为实心点
+            //     symbolSize: 0, //设定实心点的大小
+            //     smooth: false, //这个是把线变成曲线
+            //     data: yp1,
+            //     xAxisIndex: 0,
+            // },
+            {
+                name: "叶片1",
                 type: "line",
                 symbol: "line", //设定为实心点
                 symbolSize: 0, //设定实心点的大小
@@ -174,15 +187,24 @@
                 data: yp1,
                 xAxisIndex: 0,
             },
-            // {
-            //     name: "停机",
-            //     type: "line",
-            //     symbol: "line", //设定为实心点
-            //     symbolSize: 0, //设定实心点的大小
-            //     smooth: false, //这个是把线变成曲线
-            //     data: yp2,
-            //     xAxisIndex: 0,
-            // }
+            {
+                name: "叶片2",
+                type: "line",
+                symbol: "line", //设定为实心点
+                symbolSize: 0, //设定实心点的大小
+                smooth: false, //这个是把线变成曲线
+                data: yp2,
+                xAxisIndex: 0,
+            },
+            {
+                name: "叶片3",
+                type: "line",
+                symbol: "line", //设定为实心点
+                symbolSize: 0, //设定实心点的大小
+                smooth: false, //这个是把线变成曲线
+                data: yp3,
+                xAxisIndex: 0,
+            }
         ]
     }
     /**created */

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

@@ -5,6 +5,7 @@
 </template>
 <script>
     import httpRequest from '@/utils/request.js'
+    import './leaflet.canvas-markers.js'
     export default {
         props: {
             ids: {
@@ -29,15 +30,13 @@
                 rightObj: {},
                 areaLayer: null,
                 tilsUrl: "./static/kMapTiles/{z}/{x}/{y}.jpg",
+                ciLayer: null
             }
         },
         watch: {
             ids(val) {
 
-                if (this.layers.length > 0) {
-                    this.map.removeLayer(this.layerGroup)
-                    // this.layerGroup.clearLayers();
-                }
+
                 this.funStationPos(val)
             },
         },
@@ -45,83 +44,6 @@
             this.initMap();
         },
         methods: {
-            async funStationPos(ids) {
-                let res = null
-                if (ids.length > 0) {
-                    res = await httpRequest.get('/base/location', {
-                        params: {
-                            ids: this.ids.join(","),
-                        },
-                    })
-                } else {
-                    res = await httpRequest.get('/base/station', {
-                        params: {},
-                    })
-                }
-                if (res.code === 200) {
-                    if (res.data && res.data.length) {
-
-                        this.layers = []
-
-                        for (let i = 0; i < res.data.length; i++) {
-                            let item = res.data[i]
-
-                            let DefaultIcon1 = L.icon({
-                                html: item.name,
-                                iconUrl: this.icoName,
-                                //  图标的大小    【值1，值2】 为具体你自定义图标的尺寸，比如我图标尺寸是32×52，表示该图标：宽度32像素，高度：52像素，那么值1:就是32，值2：就是52
-                                // iconSize: [24, 41],
-                                //  影子的大小    【值1，值2】 为具体你自定义阴影图标的尺寸，比如我图标尺寸是41×41，表示该图标：宽度41像素，高度：41像素，那么值1:就是41，值2：就是41
-                                // shadowSize: [41, 41],
-                                //  图标将对应标记点的位置 这个是重点， 【值1，值2】，值1：为图标坐标第一个值(即32)的一半，值2：为图标坐标第二个值(即52)
-                                iconAnchor: [24, 41],
-                                // shadowAnchor: [4, 62], // 相同的影子
-                                // 该点是相对于iconAnchor弹出信息的位置  这个是我手动调出来的，文档默认原始值是[-1，-76]，我是去一半值，取一半值调出来的
-                                // popupAnchor: [1, -24]
-                            })
-
-                            let iconLabel = L.divIcon({
-                                html: item.aname,
-                                className: 'iconLabel',
-                                // iconSize: 50
-                            })
-
-                            var marker = null
-                            var marker1 = null
-                            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)
-
-                            let that = this
-                            marker.on('mousemove', function (e) {
-                                console.log('map', item)
-                                that.rightObj = item
-                            })
-
-                            marker1 = new L.marker([Number(item.latitude), Number(item.longitude)], {
-                                icon: iconLabel,
-                            }).addTo(this.map)
-
-                            this.map.panTo({
-                                lat: Number(item.latitude),
-                                lng: Number(item.longitude)
-                            });
-                            this.layers.push(marker)
-                            this.layers.push(marker1)
-                        }
-                        this.layerGroup = L.layerGroup(this.layers)
-                        this.map.addLayer(this.layerGroup)
-                    }
-                }
-            },
-            cesss(e) {
-                console.log('11000001222', e)
-            },
-
             initMap() {
                 this.map = L.map("map", {
                     // center: [40.02404009136253, 116.50641060224784], // 地图中心--北京
@@ -132,6 +54,7 @@
                     zoomControl: false, //禁用 + - 按钮
                     doubleClickZoom: true, // 禁用双击放大
                     attributionControl: false, // 移除右下角leaflet标识
+                    preferCanvas: true,
                     contextmenu: true,
                     contextmenuWidth: 140,
                     contextmenuItems: [{
@@ -157,11 +80,74 @@
                 this.setAreaLayer('jb', true)
 
             },
+            async funStationPos(ids) {
+                let res = null
+                if (ids.length > 0) {
+                    res = await httpRequest.get('/base/location', {
+                        params: {
+                            ids: this.ids.join(","),
+                        },
+                    })
+                } else {
+                    res = await httpRequest.get('/base/station', {
+                        params: {},
+                    })
+                }
+                if (res.code === 200) {
+                    if (res.data && res.data.length) {
+
+                        this.layers = []
+                        if (this.ciLayer !== null) {
+                            this.ciLayer.clearLayers();
+                            this.ciLayer = L.canvasIconLayer({}).addTo(this.map)
+                        } else {
+                            this.ciLayer = L.canvasIconLayer({}).addTo(this.map)
+                        }
+
+                        let iconUrl = require(`@/assets/images/indexCom/fengji.png`)
+
+                        for (let i = 0; i < res.data.length; i++) {
+                            let item = res.data[i]
+
+                            let marker = L.marker([Number(item.latitude), Number(item.longitude)], {
+                                // title: item.name,
+                                icon: L.divIcon({
+                                    // html: `<div style="position:relative;top:40px;left:5px">${item.aname}</div>`,
+                                    className: 'iconSty',
+                                    iconUrl: iconUrl,
+                                    iconSize: [30, 39],
+                                    iconAnchor: [15, 12.5]
+                                }),
+                                data: item
+                            }).bindTooltip(`
+                                <div class="tip-box-top">
+                                    <div class="item">${item.name}</div>
+                                    <div class="item">经度：${item.latitude}°</div>
+                                    <div class="item">纬度：${item.longitude}°</div>
+                                    <div class="item">海拔高度:${item.altitude}km</div>
+                                </div>`).addTo(this.map);
+
+                            this.ciLayer.addLayer(marker)
+                            this.layers.push(marker)
+
+                            let that = this
+                            marker.on('mouseover', function onmouseover(e) {
+                                console.log('map', item)
+                                that.rightObj = item
+                            })
+
+                        }
+                        let center = this.map.getCenter()
+                        this.map.panTo([center.lat, center.lng], {
+                            animate: true
+                        })
+                        this.map.setView(this.layers[0].getLatLng(), 13);
+
+                    }
+                }
+            },
+
             setAreaLayer(jsonName, isBounds) {
-                // if (this.areaLayer) {
-                //     this.map.removeLayer(this.areaLayer)
-                // }
-                // const wfAllGeoJson = require(`./static/geoJson/${jsonName}.json`)
                 const wfAllGeoJson = require(`@/assets/${jsonName}.json`)
                 this.areaLayer = L.geoJSON(wfAllGeoJson, {
                     style: feature => {
@@ -190,7 +176,8 @@
                     this.layers.forEach(item => {
                         if (item.options.data) {
                             if (item.options.data.name.indexOf('风电场') === -1) {
-                                if (item.options.data.latitude === this.rightObj.latitude && item.options.data
+                                if (item.options.data.latitude === this.rightObj.latitude && item
+                                    .options.data
                                     .longitude === this.rightObj.longitude) {
                                     this.$emit('rightClick', {
                                         menuIndex: 0,
@@ -219,7 +206,8 @@
                     this.layers.forEach(item => {
                         if (item.options.data) {
                             if (item.options.data.name.indexOf('风电场') === -1) {
-                                if (item.options.data.latitude === this.rightObj.latitude && item.options.data
+                                if (item.options.data.latitude === this.rightObj.latitude && item
+                                    .options.data
                                     .longitude === this.rightObj.longitude) {
                                     this.$emit('rightClick', {
                                         menuIndex: 1,
@@ -249,6 +237,15 @@
         .iconLabel {
             width: 80px !important;
         }
+
+        .iconSty {
+            .iconStyClass {
+                width: 50px;
+                height: 100px;
+                position: relative;
+                top: 40px;
+            }
+        }
     }
 
 
@@ -258,6 +255,8 @@
         height: 100%;
     }
 
+
+
     .lmap-image {
         width: 32px;
         height: 32px;

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

@@ -158,18 +158,8 @@
         })
         debugger
         const checkIds = []
-        // 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]
+        if (checkedNodes.length) {
+            let checkArr = checkedNodes
             checkArr.forEach(it => {
                 if (it.childs && it.childs.length) {
                     it.childs.forEach(iv => {
@@ -178,6 +168,16 @@
                 }
             })
         }
+        // if (checkedNodes) {
+        //     let checkArr = [checkedNodes]
+        //     checkArr.forEach(it => {
+        //         if (it.childs && it.childs.length) {
+        //             it.childs.forEach(iv => {
+        //                 checkIds.push(iv.id)
+        //             })
+        //         }
+        //     })
+        // }
         excelCheckIds.value = checkIds
     }
 

src/views/home/index.vue

@@ -125,6 +125,7 @@
             </div>
             <div class="rightMain">
                 <div style="height:55px"></div>
+                <!-- 电量分析 -->
                 <div class="powerAnalysis">
                     <div class="comHeader">
                         <div class="headerLeft">
@@ -142,15 +143,161 @@
                         </div>
                     </div>
                     <div class="powerAnalysisMain">
-                        <!-- <echarts-gauge-component :data="powerDataHome" /> -->
+                        <div class="analysRadio">
+                            <el-radio-group v-model="powerAnalyRadio">
+                                <el-radio-button label="日" value="日" />
+                                <el-radio-button label="月" value="月" />
+                                <el-radio-button label="年" value="年" />
+                            </el-radio-group>
+                        </div>
+                        <div class="analysMain">
+                            <div class="analysMain_left">
+                                <div class="analLeftTop">
+                                    <img :src="dlTop1" alt="">
+                                    <span>增发电量</span>
+                                    <span>30</span>
+                                </div>
+                                <div class="analLeftEcharts">
+                                    <echarts-pie :data="analyPieData" :index="1" />
+                                    <span class="echartsNum">25%</span>
+                                    <span class="echartsName">提升率</span>
+                                </div>
+                                <div class="analLeftBot">
+                                    <div class="analLeftBot_top">
+                                        <img :src="zengfa" class="leftImg">
+                                        <div class="analyleftbottopAll">
+                                            <div class="analyleftbottopName">及时并网增发电量</div>
+                                            <div class="analyleftbottopSty">
+                                                <span>30</span>
+                                                <img :src="dlTop2" alt="">
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <div class="analLeftBot_top">
+                                        <img :src="zengfa" class="leftImg">
+                                        <div class="analyleftbottopAll">
+                                            <div class="analyleftbottopName">主动维护降低损失电量</div>
+                                            <div class="analyleftbottopSty">
+                                                <span>30</span>
+                                                <img :src="dlTop2" alt="">
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="analysMain_left">
+                                <div class="analLeftTop">
+                                    <img :src="dlBot1" alt="">
+                                    <span>增发电量</span>
+                                    <span>30</span>
+                                </div>
+                                <div class="analLeftEcharts">
+                                    <echarts-pie :data="analyPieData" :index="2" />
+                                    <span class="echartsNum">25%</span>
+                                    <span class="echartsName">提升率</span>
+                                </div>
+                                <div class="analLeftBot">
+                                    <div class="analLeftBot_top">
+                                        <img :src="sunshi" class="leftImg">
+                                        <div class="analyleftbottopAll">
+                                            <div class="analyleftbottopName">及时并网增发电量</div>
+                                            <div class="analyleftbottopSty">
+                                                <span>30</span>
+                                                <img :src="dlBot2" alt="">
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <div class="analLeftBot_top">
+                                        <img :src="sunshi" class="leftImg">
+                                        <div class="analyleftbottopAll">
+                                            <div class="analyleftbottopName">主动维护降低损失电量</div>
+                                            <div class="analyleftbottopSty">
+                                                <span>30</span>
+                                                <img :src="dlBot2" alt="">
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <!-- 计划电量 -->
+                <div class="powerPlan">
+                    <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>
+                            </div>
+                            <span class="headerZs">
+                                <span class="headerZsN"></span>
+                            </span>
+                        </div>
+                    </div>
+                    <div class="powerPlanMain">
+                        <div class="analysRadio">
+                            <el-radio-group v-model="powerPlanRadio">
+                                <el-radio-button label="风" value="风" />
+                                <el-radio-button label="光" value="光" disabled />
+                                <el-radio-button label="总" value="总" disabled />
+                            </el-radio-group>
+                        </div>
+                        <div class="planMain">
+                            <div class="planMain_left">
+                                <div class="analysMain_echarts">
+                                    <echarts-pie-2 :data="powerPlanData" :index="1" />
+                                </div>
+                                <div class="analysMain_Msg">
+                                    <div class="analysMain_Msg_top">
+                                        <div class="analysMain_Msg_top_flex">
+                                            <span>计划</span>
+                                            <span>343</span>
+                                        </div>
+                                        <div class="analysMain_Msg_top_flex">
+                                            <span>实际</span>
+                                            <span>434</span>
+                                        </div>
+                                    </div>
+                                    <div class="analysMain_Msg_bot">
+                                        <span>月计划完成率</span>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="planMain_left">
+                                <div class="analysMain_echarts">
+                                    <echarts-pie-2 :data="powerPlanData" :index="2" />
+                                </div>
+                                <div class="analysMain_Msg">
+                                    <div class="analysMain_Msg_top">
+                                        <div class="analysMain_Msg_top_flex">
+                                            <span>计划</span>
+                                            <span>343</span>
+                                        </div>
+                                        <div class="analysMain_Msg_top_flex">
+                                            <span>实际</span>
+                                            <span>434</span>
+                                        </div>
+                                    </div>
+                                    <div class="analysMain_Msg_bot">
+                                        <span>月计划完成率</span>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
                     </div>
                 </div>
             </div>
         </div>
         <div class="footer">
-            <div class="exitV">
-                <div class="time">
-                </div>
+            <div class="monthPower">
+                <div id="monthPowers" style="width:100%;height:100%"></div>
+            </div>
+            <div class="hover72Power">
+                <div id="hover72Powers" style="width:100%;height:100%"></div>
             </div>
         </div>
     </div>
@@ -164,6 +311,13 @@
     import tixing from '@/assets/images/indexCom/tixing.png'
     import tianqi from '@/assets/menuImg/power_tqyb.png'
 
+    import dlTop1 from '@/assets/images/indexCom/dlTop1.png'
+    import dlTop2 from '@/assets/images/indexCom/dlTop2.png'
+    import dlBot1 from '@/assets/images/indexCom/dlBot1.png'
+    import dlBot2 from '@/assets/images/indexCom/dlBot2.png'
+    import zengfa from '@/assets/images/indexCom/zengfa.png'
+    import sunshi from '@/assets/images/indexCom/sunshi.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'
@@ -173,12 +327,14 @@
     import forecastBarComponent from "@/components/homeComponent/forecastBarComponent.vue";
     import echartsGaugeComponent from "@/components/homeComponent/echartsGaugeComponent.vue";
     import echartsPie from "@/components/homeComponent/echartsPie.vue";
+    import echartsPie2 from "@/components/homeComponent/echartsPie2.vue";
 
     export default {
         components: {
             forecastBarComponent,
             echartsGaugeComponent,
-            echartsPie
+            echartsPie,
+            echartsPie2,
         },
         data() {
             return {
@@ -192,11 +348,21 @@
                 wea3: wea3,
                 wea4: wea4,
                 wea5: wea5,
+                dlTop1: dlTop1,
+                dlTop2: dlTop2,
+                dlBot1: dlBot1,
+                dlBot2: dlBot2,
+                zengfa: zengfa,
+                sunshi: sunshi,
                 weatherArr: [],
                 fengjiArr: [],
                 dayFa: [],
                 monthFa: [],
-                powerDataHome: []
+                powerDataHome: [],
+                powerAnalyRadio: '日',
+                analyPieData: [],
+                powerPlanRadio: '风',
+                powerPlanData: []
             }
         },
         created() {
@@ -323,12 +489,148 @@
             }
         },
         mounted() {
-
+            this.getPowerBar()
+            this.getPowerLine()
         },
         methods: {
             fengjiStyFn(it) {
                 return `left:${it.left};top:${it.top}`
             },
+            getPowerBar(xAxis, series) {
+                let option = {
+                    title: {
+                        text: '月发电量',
+                        left: '10px',
+                        top: '20px',
+                        textStyle: {
+                            fontSize: '16',
+                            fontWeight: 400,
+                            color: '#fff'
+                        }
+                    },
+                    color: ['#7981AF', '#1C99FF', '#E57F25'],
+                    tooltip: {
+                        trigger: 'axis',
+                        axisPointer: {
+                            type: 'shadow'
+                        }
+                    },
+                    grid: {
+                        left: '2%',
+                        right: '2%',
+                        bottom: '5%',
+                        height: '90px',
+                        containLabel: true
+                    },
+                    legend: {
+                        right: '20',
+                        data: ['日发电量', '上网电量', '购网电量']
+                    },
+                    xAxis: [{
+                        type: 'category',
+                        axisTick: {
+                            show: false
+                        },
+                        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+                    }],
+                    yAxis: [{
+                        type: 'value',
+                        splitNumber: 3.5,
+                        splitLine: {
+                            lineStyle: {
+                                color: ['#393F4D']
+                            }
+                        },
+                        name: '单位：万KWh'
+                    }],
+                    series: [{
+                            data: [120, 200, 150, 80, 70, 110, 130],
+                            barGap: '0',
+                            type: 'bar'
+                        },
+                        {
+                            data: [120, 200, 150, 80, 70, 110, 130],
+                            type: 'bar'
+                        },
+                        {
+                            data: [120, 200, 150, 80, 70, 110, 130],
+                            type: 'bar'
+                        }
+                    ]
+                };
+                if (!this.theme) {
+                    option.backgroundColor = ''
+                }
+                // 基于准备好的dom，初始化echarts实例
+                let dom = document.getElementById('monthPowers');
+                dom.removeAttribute("_echarts_instance_") ? dom.removeAttribute("_echarts_instance_") : ''
+                let myChart = this.$echarts.init(dom);
+                myChart.setOption(option);
+                window.addEventListener("resize", function () {
+                    myChart.resize()
+                })
+            },
+            getPowerLine(xAxis, legend, series) {
+                let option = {
+                    title: {
+                        text: '72小时功率曲线',
+                        left: '10px',
+                        top: '20px',
+                        textStyle: {
+                            fontSize: '16',
+                            fontWeight: 400,
+                            color: '#fff'
+                        }
+                    },
+                    tooltip: {
+                        trigger: 'axis'
+                    },
+                    color: ['#7981AF', '#1C99FF', '#E57F25'],
+                    legend: {
+                        // width: '380',
+                        right: '20',
+                        data: legend
+                    },
+                    grid: {
+                        left: '2%',
+                        right: '2%',
+                        bottom: '5%',
+                        height: '90px',
+                        containLabel: true
+                    },
+                    xAxis: {
+                        type: 'category',
+                        boundaryGap: false,
+                        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+                    },
+                    yAxis: {
+                        type: 'value',
+                        splitNumber: 3,
+                        splitLine: {
+                            lineStyle: {
+                                color: ['#393F4D']
+                            }
+                        },
+                        name: '单位：万KWh'
+                    },
+                    series: [{
+                        data: [820, 932, 901, 934, 1290, 1330, 1320],
+                        type: 'line',
+                        symbol: 'none'
+                    }]
+                };
+                if (!this.theme) {
+                    option.backgroundColor = ''
+                }
+                // 基于准备好的dom，初始化echarts实例
+                let dom = document.getElementById('hover72Powers');
+                dom.removeAttribute("_echarts_instance_") ? dom.removeAttribute("_echarts_instance_") : ''
+                let myChart = this.$echarts.init(dom);
+                myChart.setOption(option);
+                window.addEventListener("resize", function () {
+                    myChart.resize()
+                })
+            },
         }
     }
 </script>
@@ -340,7 +642,7 @@
         .homeMain {
             display: flex;
             width: 100%;
-            height: 75vh;
+            height: 74vh;
 
             .comHeader {
                 height: 28px;
@@ -665,16 +967,223 @@
                 width: 25%;
                 height: 100%;
 
+                .analysRadio {
+                    margin: 16px 0 7px 20px;
+
+                    .el-radio-group {
+                        height: 28px;
+
+                        .el-radio-button {
+                            .el-radio-button__inner {
+                                width: 48px;
+                                background: transparent;
+                                color: #fff;
+                                border: 1px solid #3B4C6C;
+                            }
+
+                        }
+
+                        .is-active {
+                            background: linear-gradient(90deg, rgba(28, 113, 255, 0), rgba(28, 113, 255, 0.6));
+                        }
+                    }
+                }
+
                 .powerAnalysis {
-                    position: relative;
+                    .powerAnalysisMain {
+
+
+                        .analysMain {
+                            margin-left: 20px;
+                            width: 100%;
+                            display: flex;
+
+                            .analysMain_left {
+                                width: 50%;
+
+                                .analLeftTop {
+                                    display: flex;
+
+                                    img {
+                                        width: 14px;
+                                        height: 14px;
+                                        position: relative;
+                                        top: 5px;
+                                    }
+
+                                    span {
+                                        font-family: Microsoft YaHei;
+                                        font-weight: 400;
+                                        font-size: 14px;
+                                        color: #8B93A6;
+                                        line-height: 28px;
+                                        margin-left: 3px;
+                                    }
+                                }
+
+                                .analLeftEcharts {
+                                    position: relative;
+
+                                    .echartsNum {
+                                        position: absolute;
+                                        top: 30%;
+                                        left: 38%;
+                                        font-family: Bicubik;
+                                        font-weight: 400;
+                                        font-size: 16px;
+                                        color: #1C99FF;
+                                    }
+
+                                    .echartsName {
+                                        position: absolute;
+                                        top: 50%;
+                                        left: 38%;
+                                        font-family: Microsoft YaHei;
+                                        font-weight: 400;
+                                        font-size: 14px;
+                                        color: #8B93A6;
+                                    }
+                                }
+
+                                .analLeftBot {
+                                    .analLeftBot_top {
+                                        display: flex;
+
+                                        .leftImg {
+                                            width: 36px;
+                                            height: 36px;
+                                        }
+
+                                        .analyleftbottopAll {
+                                            margin-left: 2px;
+
+                                            .analyleftbottopName {
+                                                position: relative;
+                                                top: -5px;
+                                                font-family: Microsoft YaHei;
+                                                font-weight: 400;
+                                                font-size: 14px;
+                                                color: #8B93A6;
+                                                line-height: 28px;
+                                            }
+
+                                            .analyleftbottopSty {
+                                                display: flex;
+                                                position: relative;
+                                                top: -13px;
 
+                                                span {
+                                                    font-family: Bicubik;
+                                                    font-weight: 400;
+                                                    font-size: 16px;
+                                                    color: #FFFFFF;
+                                                    line-height: 28px;
+                                                }
+
+                                                img {
+                                                    width: 12px;
+                                                    height: 12px;
+                                                    position: relative;
+                                                    top: 8px;
+                                                    left: 8px;
+                                                }
+                                            }
+                                        }
+                                    }
+                                }
+                            }
+                        }
+                    }
+                }
+
+                .powerPlan {
+                    margin-top: 30px;
+
+                    .powerPlanMain {
+                        .planMain {
+                            width: calc(100% - 20px);
+                            display: flex;
+                            justify-content: space-around;
+
+                            .planMain_left {
+                                padding: 0 20px;
+                                width: calc(50% - 40px);
+
+                                .analysMain_echarts {
+                                    width: 100%;
+                                    text-align: center;
+                                    border-bottom: 1px dashed #393F4D;
+                                }
+
+                                .analysMain_Msg {
+                                    .analysMain_Msg_top {
+                                        display: flex;
+                                        justify-content: space-between;
+                                        width: 100%;
+
+                                        .analysMain_Msg_top_flex {
+                                            display: flex;
+                                            justify-content: space-between;
+                                            padding: 0 20px;
+                                            width: 60px;
+
+                                            span:nth-child(1) {
+                                                font-family: Microsoft YaHei;
+                                                font-weight: 400;
+                                                font-size: 14px;
+                                                color: #8B93A6;
+                                                line-height: 28px;
+                                            }
+
+                                            span:nth-child(2) {
+                                                font-family: Arial;
+                                                font-weight: 400;
+                                                font-size: 14px;
+                                                color: #FFFFFF;
+                                                line-height: 28px;
+                                            }
+                                        }
+                                    }
+
+                                    .analysMain_Msg_bot {
+                                        background: #2D3138;
+                                        // opacity: 0.5;
+                                        text-align: center;
+
+                                        span {
+                                            font-family: Microsoft YaHei;
+                                            font-weight: 400;
+                                            font-size: 14px;
+                                            color: #8B93A6;
+                                            line-height: 28px;
+                                        }
+                                    }
+                                }
+                            }
+                        }
+                    }
                 }
             }
         }
 
         .footer {
-            width: 100%;
-            height: 25vh;
+            display: flex;
+            justify-content: space-between;
+            padding: 0 36px;
+            width: calc(100% - 72px);
+            height: 19vh;
+
+            .monthPower {
+                width: calc(50% - 10px);
+                background: rgba(41, 45, 53, 0.4);
+                border-radius: 6px;
+            }
+
+            .hover72Power {
+                width: calc(50% - 10px);
+                background: rgba(41, 45, 53, 0.4);
+                border-radius: 6px;
+            }
         }
     }