|
|
@@ -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>
|
dongjh
