|
@@ -15,10 +15,10 @@
|
|
</div>
|
|
</div>
|
|
</CusModule>
|
|
</CusModule>
|
|
<CusModule class="module-top" title="上网收益">
|
|
<CusModule class="module-top" title="上网收益">
|
|
- <BaseChart height="300px" width="100%" :option="barOptions" />
|
|
|
|
|
|
+ <BaseChart height="300px" width="100%" :option="barOptions"/>
|
|
</CusModule>
|
|
</CusModule>
|
|
<CusModule class="module-top" title="今年购电费用">
|
|
<CusModule class="module-top" title="今年购电费用">
|
|
- <BaseChart height="300px" width="100%" :option="lineOptions" />
|
|
|
|
|
|
+ <BaseChart height="300px" width="100%" :option="lineOptions"/>
|
|
</CusModule>
|
|
</CusModule>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</template>
|
|
@@ -26,32 +26,32 @@
|
|
import CusModule from '../components/CusModule.vue';
|
|
import CusModule from '../components/CusModule.vue';
|
|
import BaseChart from '@/components/BaseChart/index.vue'
|
|
import BaseChart from '@/components/BaseChart/index.vue'
|
|
import vueSeamlessScroll from 'vue-seamless-scroll'
|
|
import vueSeamlessScroll from 'vue-seamless-scroll'
|
|
-import {dateFormat} from '@/utils';
|
|
|
|
|
|
+import {array2Map} from '@/utils';
|
|
import * as echarts from 'echarts'
|
|
import * as echarts from 'echarts'
|
|
import {mapState} from 'vuex';
|
|
import {mapState} from 'vuex';
|
|
|
|
+import {getPvPriceConfig} from "@/api/basecfg/elecPvPrice";
|
|
|
|
+import {pgSupplyMonthTotalPg, pgSupplyMonthTotalPv} from "@/api/screen";
|
|
|
|
+import {DateTool} from "@/utils/DateTool";
|
|
|
|
+
|
|
export default {
|
|
export default {
|
|
name: 'NetRight',
|
|
name: 'NetRight',
|
|
- data () {
|
|
|
|
|
|
+ data() {
|
|
return {
|
|
return {
|
|
priceList: [
|
|
priceList: [
|
|
{
|
|
{
|
|
name: "余电上网电价",
|
|
name: "余电上网电价",
|
|
- value: 0.92,
|
|
|
|
unit: "元/度",
|
|
unit: "元/度",
|
|
},
|
|
},
|
|
{
|
|
{
|
|
name: "脱硫煤电价",
|
|
name: "脱硫煤电价",
|
|
- value: 0.378,
|
|
|
|
unit: "元/度",
|
|
unit: "元/度",
|
|
},
|
|
},
|
|
{
|
|
{
|
|
name: "国家补贴",
|
|
name: "国家补贴",
|
|
- value: 0.42,
|
|
|
|
unit: "元/度",
|
|
unit: "元/度",
|
|
},
|
|
},
|
|
{
|
|
{
|
|
name: "地方补贴",
|
|
name: "地方补贴",
|
|
- value: 0.12,
|
|
|
|
unit: "元/度",
|
|
unit: "元/度",
|
|
},
|
|
},
|
|
],
|
|
],
|
|
@@ -66,7 +66,7 @@ export default {
|
|
},
|
|
},
|
|
computed: {
|
|
computed: {
|
|
...mapState('userState', ['areaType']),
|
|
...mapState('userState', ['areaType']),
|
|
- barOptions () {
|
|
|
|
|
|
+ barOptions() {
|
|
const xData = this.barData.map(item => item.xData)
|
|
const xData = this.barData.map(item => item.xData)
|
|
const line = this.barData.map(item => item.yData);
|
|
const line = this.barData.map(item => item.yData);
|
|
return {
|
|
return {
|
|
@@ -86,7 +86,6 @@ export default {
|
|
xAxis: {
|
|
xAxis: {
|
|
data: xData,
|
|
data: xData,
|
|
axisLabel: {
|
|
axisLabel: {
|
|
- interval: 0,
|
|
|
|
margin: 10, //刻度标签与轴线之间的距离。
|
|
margin: 10, //刻度标签与轴线之间的距离。
|
|
},
|
|
},
|
|
axisLine: {
|
|
axisLine: {
|
|
@@ -133,16 +132,15 @@ export default {
|
|
offset: 0,
|
|
offset: 0,
|
|
color: "rgba(89,211,255,1)"
|
|
color: "rgba(89,211,255,1)"
|
|
},
|
|
},
|
|
- {
|
|
|
|
- offset: 1,
|
|
|
|
- color: "rgba(23,237,194,1)"
|
|
|
|
- }
|
|
|
|
|
|
+ {
|
|
|
|
+ offset: 1,
|
|
|
|
+ color: "rgba(23,237,194,1)"
|
|
|
|
+ }
|
|
])
|
|
])
|
|
}
|
|
}
|
|
},
|
|
},
|
|
data: line
|
|
data: line
|
|
},
|
|
},
|
|
-
|
|
|
|
//柱体
|
|
//柱体
|
|
{
|
|
{
|
|
name: '',
|
|
name: '',
|
|
@@ -182,16 +180,16 @@ export default {
|
|
itemStyle: {
|
|
itemStyle: {
|
|
normal: {
|
|
normal: {
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1,
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1,
|
|
- [{
|
|
|
|
- offset: 0,
|
|
|
|
- color: "rgba(89,211,255,1)"
|
|
|
|
- },
|
|
|
|
- {
|
|
|
|
- offset: 1,
|
|
|
|
- color: "rgba(23,237,194,1)"
|
|
|
|
- }
|
|
|
|
- ],
|
|
|
|
- false
|
|
|
|
|
|
+ [{
|
|
|
|
+ offset: 0,
|
|
|
|
+ color: "rgba(89,211,255,1)"
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ offset: 1,
|
|
|
|
+ color: "rgba(23,237,194,1)"
|
|
|
|
+ }
|
|
|
|
+ ],
|
|
|
|
+ false
|
|
),
|
|
),
|
|
}
|
|
}
|
|
},
|
|
},
|
|
@@ -200,7 +198,7 @@ export default {
|
|
]
|
|
]
|
|
};
|
|
};
|
|
},
|
|
},
|
|
- lineOptions () {
|
|
|
|
|
|
+ lineOptions() {
|
|
return {
|
|
return {
|
|
legend: {
|
|
legend: {
|
|
show: false,
|
|
show: false,
|
|
@@ -221,9 +219,6 @@ export default {
|
|
},
|
|
},
|
|
},
|
|
},
|
|
xAxis: {
|
|
xAxis: {
|
|
- axisLabel: {
|
|
|
|
- interval: 0,
|
|
|
|
- },
|
|
|
|
splitLine: {
|
|
splitLine: {
|
|
show: false,
|
|
show: false,
|
|
},
|
|
},
|
|
@@ -251,10 +246,10 @@ export default {
|
|
offset: 0,
|
|
offset: 0,
|
|
color: "rgba(81, 139, 152,0.8)"
|
|
color: "rgba(81, 139, 152,0.8)"
|
|
},
|
|
},
|
|
- {
|
|
|
|
- offset: 1,
|
|
|
|
- color: "rgba(81, 139, 152, 0)"
|
|
|
|
- }
|
|
|
|
|
|
+ {
|
|
|
|
+ offset: 1,
|
|
|
|
+ color: "rgba(81, 139, 152, 0)"
|
|
|
|
+ }
|
|
], false),
|
|
], false),
|
|
shadowColor: 'rgba(81, 139, 152, 0.5)', //阴影颜色
|
|
shadowColor: 'rgba(81, 139, 152, 0.5)', //阴影颜色
|
|
shadowBlur: 20 //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
|
|
shadowBlur: 20 //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
|
|
@@ -268,31 +263,67 @@ export default {
|
|
}
|
|
}
|
|
},
|
|
},
|
|
watch: {
|
|
watch: {
|
|
- areaType () {
|
|
|
|
|
|
+ areaType() {
|
|
this.getNetData()
|
|
this.getNetData()
|
|
}
|
|
}
|
|
},
|
|
},
|
|
- mounted () {
|
|
|
|
|
|
+ mounted() {
|
|
this.getNetData()
|
|
this.getNetData()
|
|
},
|
|
},
|
|
methods: {
|
|
methods: {
|
|
- getMonthsOfLastTenMonths () {
|
|
|
|
- var months = [];
|
|
|
|
- var today = new Date();
|
|
|
|
- for (var i = 0; i < 10; i++) {
|
|
|
|
- var pastMonth = new Date(today);
|
|
|
|
- pastMonth.setMonth(today.getMonth() - i); // 减去i个月
|
|
|
|
- var formattedMonth = `${dateFormat(pastMonth, 'M')}月`;
|
|
|
|
- months.push(formattedMonth);
|
|
|
|
|
|
+ getNetData() {
|
|
|
|
+ this.pgSupplyMonthTotalPv()
|
|
|
|
+ this.pgSupplyMonthTotalPg()
|
|
|
|
+ this.qryGwPriceConfig()
|
|
|
|
+ },
|
|
|
|
+ async qryGwPriceConfig() {
|
|
|
|
+ const {data} = await getPvPriceConfig(1)
|
|
|
|
+ if (!data) {
|
|
|
|
+ return;
|
|
}
|
|
}
|
|
- return months.reverse().map(item => ({
|
|
|
|
- xData: item,
|
|
|
|
- yData: parseFloat(((Math.random() * 100)).toFixed(1)),
|
|
|
|
- }));
|
|
|
|
|
|
+ const [lessPrice, oriPrice, state, local] = this.priceList
|
|
|
|
+ lessPrice.value = data.objPrice + data.stateSubsidy + data.localSubsidy
|
|
|
|
+ oriPrice.value = data.objPrice
|
|
|
|
+ state.value = data.stateSubsidy
|
|
|
|
+ local.value = data.localSubsidy
|
|
|
|
+ this.priceList = [lessPrice, oriPrice, state, local]
|
|
},
|
|
},
|
|
- getNetData () {
|
|
|
|
- this.barData = this.getMonthsOfLastTenMonths()
|
|
|
|
- this.lineData = this.getMonthsOfLastTenMonths()
|
|
|
|
|
|
+ async pgSupplyMonthTotalPv() {
|
|
|
|
+ const {data} = await pgSupplyMonthTotalPv({
|
|
|
|
+ startRecTime: DateTool.nearYearStartDay(),
|
|
|
|
+ endRecTime: DateTool.now(),
|
|
|
|
+ areaCode: this.areaType,
|
|
|
|
+ })
|
|
|
|
+ if (!data) {
|
|
|
|
+ return;
|
|
|
|
+ }
|
|
|
|
+ const month = DateTool.getMonthsOfYearAgo()
|
|
|
|
+ const indexMap = array2Map(data, "startRecTime")
|
|
|
|
+ this.barData = month.map(item => (
|
|
|
|
+ {
|
|
|
|
+ xData: item.substring(2),
|
|
|
|
+ yData: indexMap[item] ? (indexMap[item].upElecEarn / 10000).toFixed(1) : 0
|
|
|
|
+ }
|
|
|
|
+ ))
|
|
|
|
+ },
|
|
|
|
+ async pgSupplyMonthTotalPg() {
|
|
|
|
+ const thisThisYearStart = `${DateTool.now(DateTool.DateFormat.YYYY)}-01-01`
|
|
|
|
+ const {data} = await pgSupplyMonthTotalPg({
|
|
|
|
+ startRecTime: thisThisYearStart,
|
|
|
|
+ endRecTime: DateTool.now(),
|
|
|
|
+ areaCode: this.areaType,
|
|
|
|
+ })
|
|
|
|
+ if (!data) {
|
|
|
|
+ return;
|
|
|
|
+ }
|
|
|
|
+ const month = DateTool.getMonthsOfYearAgo()
|
|
|
|
+ const indexMap = array2Map(data, "startRecTime")
|
|
|
|
+ this.lineData = month.map(item => (
|
|
|
|
+ {
|
|
|
|
+ xData: item.substring(2),
|
|
|
|
+ yData: indexMap[item] ? (indexMap[item].useElecCost / 10000).toFixed(1) : 0
|
|
|
|
+ }
|
|
|
|
+ ))
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
@@ -359,7 +390,7 @@ export default {
|
|
padding: 5px 13px;
|
|
padding: 5px 13px;
|
|
font-size: 14px;
|
|
font-size: 14px;
|
|
|
|
|
|
- >div:first-of-type {
|
|
|
|
|
|
+ > div:first-of-type {
|
|
span:first-of-type {
|
|
span:first-of-type {
|
|
font-size: 18px;
|
|
font-size: 18px;
|
|
font-weight: bold;
|
|
font-weight: bold;
|
|
@@ -385,12 +416,12 @@ export default {
|
|
background: #1B4A64;
|
|
background: #1B4A64;
|
|
font-size: 16px;
|
|
font-size: 16px;
|
|
|
|
|
|
- >div:first-of-type,
|
|
|
|
- >div:last-of-type {
|
|
|
|
|
|
+ > div:first-of-type,
|
|
|
|
+ > div:last-of-type {
|
|
flex-basis: 35%;
|
|
flex-basis: 35%;
|
|
}
|
|
}
|
|
|
|
|
|
- >div {
|
|
|
|
|
|
+ > div {
|
|
text-align: center;
|
|
text-align: center;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
@@ -409,12 +440,12 @@ export default {
|
|
background: #000;
|
|
background: #000;
|
|
}
|
|
}
|
|
|
|
|
|
- >div:first-of-type,
|
|
|
|
- >div:last-of-type {
|
|
|
|
|
|
+ > div:first-of-type,
|
|
|
|
+ > div:last-of-type {
|
|
flex-basis: 38%;
|
|
flex-basis: 38%;
|
|
}
|
|
}
|
|
|
|
|
|
- >div {
|
|
|
|
|
|
+ > div {
|
|
text-align: center;
|
|
text-align: center;
|
|
font-size: 13px;
|
|
font-size: 13px;
|
|
}
|
|
}
|