光伏模块增加

public/index.html

@@ -12,6 +12,8 @@
   <!-- <link rel="shortcut icon" href="<%= BASE_URL %>favicon.ico" type="image/x-icon"> -->
   <link rel="icon" href="<%= BASE_URL %>logo.png">
   <script src="<%= BASE_URL %>cdn/babel-polyfill/polyfill_7_2_5.js"></script>
+  <!-- <script type="text/javascript" src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=z5soY0FNGbDJK7LBzfBstOyF92yB03ft"></script> -->
+  <script type="text/javascript" src="//api.map.baidu.com/api?v=1.1&ak=z5soY0FNGbDJK7LBzfBstOyF92yB03ft"></script>
   <style>
     html,
     body,

src/main.js

@@ -53,6 +53,9 @@ import '@/components/jeecg/JVxeTable/install'
 import '@/components/JVxeCells/install'
 //表单验证
 import { rules } from '@/utils/rules'
+
+import BaiduMap from 'vue-baidu-map'
+
 Vue.prototype.rules = rules
 Vue.config.productionTip = false
 // 修改框架：全局挂载方法递归树
@@ -71,6 +74,10 @@ Vue.use(JeecgComponents);
 Vue.use(UComponents);
 Vue.use(VueAreaLinkage);
 
+Vue.use(BaiduMap, {
+  ak:'z5soY0FNGbDJK7LBzfBstOyF92yB03ft' 
+})
+
 SSO.init(() => {
   main()
 })

src/views/module_ems/photovoltaic/pvDashboard/index.vue

@@ -1,173 +1,230 @@
 <template>
   <div class="page-header-index-wide">
     <a-row :gutter="24">
-      <a-col :sm="24" :md="12" :xl="18" :style="{ marginBottom: '24px' }">
+      <a-col :sm="24" :md="12" :xl="18" :style="{ marginBottom: '12px' }">
         <a-row :gutter="24">
-          <a-col :sm="24" :md="12" :xl="8" :style="{ marginBottom: '24px' }">
-            <chart-card :loading="loading" title="总销售额" total="￥126,560">
-              <a-tooltip title="指标说明" slot="action">
-                <a-icon type="info-circle-o" />
-              </a-tooltip>
-              <div>
-                <trend flag="up" style="margin-right: 16px">
-                  <span slot="term">周同比</span>
-                  12%
-                </trend>
-                <trend flag="down">
-                  <span slot="term">日同比</span>
-                  11%
-                </trend>
+          <a-col :sm="24" :md="12" :xl="8" :style="{ marginBottom: '12px', padding: '0px 0px 0px 12px' }">
+            <a-card
+              :body-style="{ padding: '10px 8px 8px' }"
+              :bordered="false"
+              style="background: linear-gradient(45deg, #8897f5, #9eaafd)"
+            >
+              <div class="chart-card-header">
+                <div class="meta">
+                  <span class="chart-card-title">电站数量</span>
+                </div>
+                <div class="total">
+                  <span>2 个</span>
+                </div>
               </div>
-              <template slot="footer">日均销售额<span>￥ 234.56</span></template>
-            </chart-card>
+            </a-card>
           </a-col>
-          <a-col :sm="24" :md="12" :xl="8" :style="{ marginBottom: '24px' }">
-            <chart-card :loading="loading" title="订单量" :total="8846 | NumberFormat">
-              <a-tooltip title="指标说明" slot="action">
-                <a-icon type="info-circle-o" />
-              </a-tooltip>
-              <div>
-                <mini-area />
+          <a-col :sm="24" :md="12" :xl="8" :style="{ marginBottom: '12px', padding: '0px 0px 0px 12px' }">
+            <a-card
+              :body-style="{ padding: '10px 8px 8px' }"
+              :bordered="false"
+              style="background: linear-gradient(45deg, #c67ffd, #d9a0fd)"
+            >
+              <div class="chart-card-header">
+                <div class="meta">
+                  <span class="chart-card-title">电站装机容量</span>
+                </div>
+                <div class="total">
+                  <span>{{elecdetail.fInstalledCapacity}} kW</span>
+                </div>
               </div>
-              <template slot="footer"
-                >日订单量<span> {{ '1234' | NumberFormat }}</span></template
-              >
-            </chart-card>
+            </a-card>
           </a-col>
-          <a-col :sm="24" :md="12" :xl="8" :style="{ marginBottom: '24px' }">
-            <chart-card :loading="loading" title="支付笔数" :total="6560 | NumberFormat">
-              <a-tooltip title="指标说明" slot="action">
-                <a-icon type="info-circle-o" />
-              </a-tooltip>
-              <div>
-                <mini-bar :height="40" />
+          <a-col :sm="24" :md="12" :xl="8" :style="{ marginBottom: '12px' }">
+            <a-card
+              :body-style="{ padding: '10px 8px 8px' }"
+              :bordered="false"
+              style="background: linear-gradient(45deg, #07b59d, #09d5b8)"
+            >
+              <div class="chart-card-header">
+                <div class="meta">
+                  <span class="chart-card-title">当前发电功率</span>
+                </div>
+                <div class="total">
+                  <span>{{elecdetail.realGeneratingPower}} kwh</span>
+                </div>
               </div>
-              <template slot="footer">转化率 <span>60%</span></template>
-            </chart-card>
+            </a-card>
           </a-col>
         </a-row>
-        <a-row :gutter="24"> </a-row>
-      </a-col>
-
-      <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
-        <a-row>
-          <bar title="销售额趋势" :dataSource="barData" />
+        <a-row :gutter="24">
+          <a-col :sm="24" :md="12" :xl="24">
+            <div id="map" style="width: 100%; height: 775px"></div>
+          </a-col>
         </a-row>
+      </a-col>
 
+      <a-col :sm="24" :md="12" :xl="6" :style="{ padding: '0px 12px 0px 0px' }">
         <a-row>
           <a-col :span="24">
-            <a-card :loading="loading" :bordered="false" title="最近一周访问量统计" :style="{ marginTop: '24px' }">
+            <a-card :loading="loading" :body-style="{ padding: '10px 8px 8px' }" :bordered="false">
+              <span class="head-title">发电量信息</span>
               <a-row>
-                <a-col :span="6">
-                  <head-info title="今日IP" :content="loginfo.todayIp"></head-info>
+                <a-col :span="8">
+                  <div class="head-info" :class="center && 'center'">
+                    <span>日发电量</span>
+                    <p>{{elecdetail.powerByDay}} kW·h</p>
+                  </div>
                 </a-col>
-                <a-col :span="2">
-                  <a-spin class="circle-cust">
-                    <a-icon slot="indicator" type="environment" style="font-size: 24px" />
-                  </a-spin>
+                <a-col :span="8">
+                  <div class="head-info" :class="center && 'center'">
+                    <span>月发电量</span>
+                    <p>{{elecdetail.powerByMonth}} kW·h</p>
+                  </div>
                 </a-col>
-                <a-col :span="6">
-                  <head-info title="今日访问" :content="loginfo.todayVisitCount"></head-info>
+                <a-col :span="8">
+                  <div class="head-info" :class="center && 'center'">
+                    <span>年发电量</span>
+                    <p>{{elecdetail.powerByYear}} kW·h</p>
+                  </div>
                 </a-col>
-                <a-col :span="2">
-                  <a-spin class="circle-cust">
-                    <a-icon slot="indicator" type="team" style="font-size: 24px" />
-                  </a-spin>
+              </a-row>
+              <a-divider style="margin: 8px 0" />
+              <span class="head-title">收益信息</span>
+              <a-row>
+                <a-col :span="8">
+                  <div class="head-info" :class="center && 'center'">
+                    <span>日收益</span>
+                    <p>{{elecdetail.powerByDayProfit}} 元</p>
+                  </div>
                 </a-col>
-                <a-col :span="6">
-                  <head-info title="总访问量" :content="loginfo.totalVisitCount"></head-info>
+                <a-col :span="8">
+                  <div class="head-info" :class="center && 'center'">
+                    <span>日收益</span>
+                    <p>{{elecdetail.powerByMonthProfit}} 元</p>
+                  </div>
                 </a-col>
-                <a-col :span="2">
-                  <a-spin class="circle-cust">
-                    <a-icon slot="indicator" type="rise" style="font-size: 24px" />
-                  </a-spin>
+                <a-col :span="8">
+                  <div class="head-info" :class="center && 'center'">
+                    <span>年收益</span>
+                    <p>{{elecdetail.powerByYearProfit}} 元</p>
+                  </div>
                 </a-col>
               </a-row>
-              <line-chart-multid :fields="visitFields" :dataSource="visitInfo"></line-chart-multid>
             </a-card>
           </a-col>
         </a-row>
+        <a-row>
+          <a-card
+            :loading="loading"
+            :body-style="{ padding: '10px 8px 8px' }"
+            :bordered="false"
+            title="当年社会效益"
+            style="margin-top: 12px"
+          >
+            <div class="chart-card-header">
+              <div class="societyTree">
+                <div class="societyTreeFont Cleft">
+                  <span class="treeF">节约标煤</span><br />
+                  <span class="treeF2">{{elecdetail.coalAmount}} t</span>
+                </div>
+                <div class="societyTreeFont Cright">
+                  <span class="treeF">减少二氧化碳排放</span><br />
+                  <span class="treeF2">{{elecdetail.co2Amount}} t</span>
+                </div>
+              </div>
+            </div>
+          </a-card>
+        </a-row>
+        <a-row>
+          <a-card
+            :body-style="{ padding: '0px 8px 8px' }"
+            :bordered="false"
+            title="年发电量"
+            style="margin-top: 12px;height:300px;"
+          >
+            <div class="totalEle-trend" ref="yearElec"></div>
+          </a-card>
+        </a-row>
       </a-col>
     </a-row>
   </div>
 </template>
 
 <script>
-import ChartCard from '@/components/ChartCard'
-import ACol from 'ant-design-vue/es/grid/Col'
-import ATooltip from 'ant-design-vue/es/tooltip/Tooltip'
-import MiniArea from '@/components/chart/MiniArea'
-import MiniBar from '@/components/chart/MiniBar'
-import MiniProgress from '@/components/chart/MiniProgress'
-import RankList from '@/components/chart/RankList'
-import Bar from '@/components/chart/Bar'
-import LineChartMultid from '@/components/chart/LineChartMultid'
-import HeadInfo from '@/components/tools/HeadInfo.vue'
-
-import Trend from '@/components/Trend'
-import { getLoginfo, getVisitInfo } from '@/api/api'
-
-const rankList = []
-for (let i = 0; i < 7; i++) {
-  rankList.push({
-    name: '白鹭岛 ' + (i + 1) + ' 号店',
-    total: 1234.56 - i * 100,
-  })
-}
-const barData = []
-for (let i = 0; i < 12; i += 1) {
-  barData.push({
-    x: `${i + 1}月`,
-    y: Math.floor(Math.random() * 1000) + 200,
-  })
-}
+import * as echarts from 'echarts'
+import { httpAction, getAction } from '@/api/manage'
+import { pvdata } from '../pvdata';
+
 export default {
   name: 'IndexChart',
-  components: {
-    ATooltip,
-    ACol,
-    ChartCard,
-    MiniArea,
-    MiniBar,
-    MiniProgress,
-    RankList,
-    Bar,
-    Trend,
-    LineChartMultid,
-    HeadInfo,
-  },
+  components: {},
   data() {
     return {
       loading: true,
       center: null,
-      rankList,
-      barData,
-      loginfo: {},
-      visitFields: ['ip', 'visit'],
-      visitInfo: [],
-      indicator: <a-icon type="loading" style="font-size: 24px" spin />,
+      elecdetail: {},
+      yearElecList: {}
     }
   },
   created() {
     setTimeout(() => {
       this.loading = !this.loading
     }, 1000)
-    this.initLogInfo()
+  },
+  mounted() {
+    this.initMap()
+    this.$nextTick(() => {
+    setTimeout(() => {
+      this.getTest();
+    }, 1000)
+      // this.getEnergyoverview()
+    })
   },
   methods: {
-    initLogInfo() {
-      getLoginfo(null).then((res) => {
-        if (res.success) {
-          Object.keys(res.result).forEach((key) => {
-            res.result[key] = res.result[key] + ''
-          })
-          this.loginfo = res.result
-        }
-      })
-      getVisitInfo().then((res) => {
-        if (res.success) {
-          this.visitInfo = res.result
-        }
+    getTest() {
+      var listData = pvdata.pvDashboardData;
+      console.log(listData)
+      this.elecdetail = listData.elecdetail;
+      this.yearElecList = listData.yearElecList;
+      
+      this.initChart();
+    },
+    initMap() {
+      // 百度地图API功能
+      var map = new BMap.Map('map') // 创建Map实例
+      map.centerAndZoom(new BMap.Point(121.455333, 37.471718), 15) // 初始化地图,设置中心点坐标和地图级别
+      //添加地图类型控件
+      map.addControl(
+        new BMap.MapTypeControl({
+          mapTypes: [BMAP_NORMAL_MAP],
+        })
+      )
+      map.setCurrentCity('烟台') // 设置地图显示的城市 此项是必须设置的
+      map.enableScrollWheelZoom(true) //开启鼠标滚轮缩放
+    },
+    initChart() {
+      var _this = this;
+      var chartDom = _this.$refs.yearElec;
+      var myChart = echarts.init(chartDom);
+      var option
+
+      option = {
+        xAxis: {
+          type: 'category',
+          data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
+        },
+        yAxis: {
+          type: 'value',
+          name: '电量(kW·h)',
+        },
+        series: [
+          {
+            data: _this.yearElecList,
+            type: 'bar',
+          },
+        ],
+      }
+
+      option && myChart.setOption(option);
+      
+      window.addEventListener('resize', function () {
+        myChart.resize()
       })
     },
   },
@@ -175,6 +232,74 @@ export default {
 </script>
 
 <style lang="less" scoped>
+.chart-card-header {
+  position: relative;
+  overflow: hidden;
+  width: 100%;
+  height: 50px;
+
+  .meta {
+    position: relative;
+    overflow: hidden;
+    //   width: 100%;
+    color: #ffffff;
+    font-size: 20px;
+    line-height: 38px;
+    float: left;
+  }
+}
+
+.chart-card-action {
+  cursor: pointer;
+  position: absolute;
+  top: 0;
+  right: 0;
+}
+
+.chart-card-footer {
+  border-top: 1px solid #e8e8e8;
+  padding-top: 9px;
+  margin-top: 8px;
+
+  > * {
+    position: relative;
+  }
+
+  .field {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    margin: 0;
+  }
+}
+
+.chart-card-content {
+  margin-bottom: 12px;
+  position: relative;
+  height: 46px;
+  width: 100%;
+
+  .content-fix {
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    width: 100%;
+  }
+}
+
+.total {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  word-break: break-all;
+  white-space: nowrap;
+  color: #ffffff;
+  // margin-top: 4px;
+  margin-bottom: 0;
+  font-size: 30px;
+  line-height: 38px;
+  height: 38px;
+  float: right;
+}
 .circle-cust {
   position: relative;
   top: 28px;
@@ -197,7 +322,7 @@ export default {
 /* 首页访问量统计 */
 .head-info {
   position: relative;
-  text-align: left;
+  text-align: center;
   padding: 0 32px 0 0;
   min-width: 125px;
 
@@ -221,5 +346,44 @@ export default {
       font-size: 1rem;
     }
   }
+  .bm-view {
+    width: 100%;
+    height: 300px;
+  }
+}
+.head-title {
+  font-size: 18px;
+}
+.societyTree {
+  background-image: url(../../../../assets/societyTree_light.png);
+  background-repeat: no-repeat;
+  background-size: 75%;
+  height: 190px;
+  background-position: 50% 0;
+
+  .societyTreeFont {
+    position: absolute;
+    font-size: small;
+    text-align: center;
+    .treeF {
+      color: #989c9f !important;
+    }
+    .treeF2 {
+      color: #333 !important;
+    }
+  }
+  .Cleft {
+    top: 74%;
+    left: 22%;
+  }
+  .Cright {
+    top: 62%;
+    left: 46%;
+    font-size: 14px;
+  }
+}
+
+.totalEle-trend {
+  height: 260px;
 }
 </style>

src/views/module_ems/photovoltaic/pvdata.json

@@ -1,4 +1,29 @@
 {
+    "pvDashboardData": {
+        "elecdetail": {
+            "powerByDay": 37.47,
+            "powerByMonth": 5960.57,
+            "powerByYear": 5960.57,
+            "epiByDay": 0,
+            "epiByMonth": 0,
+            "epiByYear": 0,
+            "epiByLastDay": 0,
+            "epiByLastMonth": 0,
+            "epiByLastYear": 0,
+            "powerByDayProfit": 29.7212,
+            "powerByMonthProfit": 4801.287,
+            "powerByYearProfit": 4801.287,
+            "co2": 0.000581,
+            "latestUpdateTime": "2024-01-30",
+            "coalAmount": 1.8,
+            "co2Amount": 3.4,
+            "realGeneratingPower": 0.02,
+            "realGeneratingPowerTime": "2024-01-30 17:15:30",
+            "fInstalledCapacity": 121,
+            "effectiveHours": 49.27
+        },
+        "yearElecList": [7166.1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
+    },
     "CurveAnalysisData": [
         {
             "meterName": "PV0",