初次提交

pages/tabbar/components/dischargeChart/index.vue

@@ -0,0 +1,244 @@
+<template>
+	<view class="warp">
+		<zero-loading v-if="chartLoading" position="absolute"></zero-loading>
+		<charts v-else :id="'pcChart'" :options="charge_option"></charts>
+	</view>
+</template>
+<script>
+	import charts from "@/components/charts/index";
+	export default {
+		components: {
+			charts
+		},
+		data() {
+			return {
+				charge_option: {},
+				stationId: null,
+				chartLoading: false
+			}
+		},
+		props: {
+			activeTime: {
+				type: String,
+				default: 'day'
+			}
+		},
+		computed: {
+			currentStation() {
+				return this.vuex_currentStation;
+			},
+
+		},
+		watch: {
+			currentStation: {
+				handler(val) {
+					if (val && val.id) {
+						this.stationId = val.id
+						this.GetChargeChart()
+					}
+				},
+				deep: true,
+				immediate: true
+			},
+			activeTime: {
+				handler(val) {
+					if (val && this.stationId) {
+						this.GetChargeChart()
+					}
+				},
+				deep: true,
+				immediate: true
+			}
+		},
+
+		methods: {
+			getData() {
+				this.GetChargeChart()
+			},
+			async GetChargeChart() {
+				this.chartLoading = true
+				//充放电曲线
+				let self = this;
+				return new Promise((resolve, reject) => {
+					self.$u.api.homePageData
+						.GetKJYElecData({
+							stationId: this.stationId,
+							type: this.activeTime,
+						})
+						.then((res) => {
+							self.chartLoading = false
+							self.initChargeChart(res.data);
+							resolve();
+						})
+						.catch((err) => {
+							reject("错误");
+						});
+				});
+			},
+			initChargeChart(val) {
+				let x_data = [];
+				let charge_data = [];
+				let discharge_data = [];
+				let pv_data = [];
+				let benefit_data = [];
+				if (val && val.length > 0) {
+					val.forEach((item) => {
+						x_data.push(item.date);
+						charge_data.push(item.chargeElec);
+						discharge_data.push(item.dischargeElec);
+						pv_data.push(item.pvChargeElec);
+						benefit_data.push(item.income);
+					});
+				} else {
+					x_data = [0, 0, 0, 0, 0, 0, 0];
+					charge_data = [0, 0, 0, 0, 0, 0, 0];
+					discharge_data = [0, 0, 0, 0, 0, 0, 0];
+					pv_data = [0, 0, 0, 0, 0, 0, 0];
+					benefit_data = [0, 0, 0, 0, 0, 0, 0];
+				}
+				//充放电图表
+				this.charge_option = {
+					tooltip: {
+						trigger: "axis",
+						textStyle: {
+							textShadowBlur: 10, // 重点
+							textShadowColor: 'transparent', // 重点
+						},
+						axisPointer: {},
+						confine: true,
+						position: function(point, params, dom, rect, size) {
+							// 鼠标坐标和提示框位置的参考坐标系是：以外层div的左上角那一点为原点，x轴向右，y轴向下
+							// 提示框位置
+							var x = 0; // x坐标位置
+							var y = 0; // y坐标位置
+
+							// 当前鼠标位置
+							var pointX = point[0];
+							var pointY = point[1];
+
+							// 外层div大小
+							// var viewWidth = size.viewSize[0];
+							// var viewHeight = size.viewSize[1];
+
+							// 提示框大小
+							var boxWidth = size.contentSize[0];
+							var boxHeight = size.contentSize[1];
+
+							// boxWidth > pointX 说明鼠标左边放不下提示框
+							if (boxWidth > pointX) {
+								x = 5; // 自己定个x坐标值，以防出屏
+								y -= 15; // 防止点被覆盖住，可根据情况自行调节
+							} else {
+								// 左边放的下
+								x = pointX - boxWidth - 15;
+							}
+
+							// boxHeight > pointY 说明鼠标上边放不下提示框
+							if (boxHeight + 20 > pointY) {
+								y = pointY + 15;
+							} else if (boxHeight > pointY) {
+								y = 5;
+							} else {
+								// 上边放得下
+								y += pointY - boxHeight;
+							}
+							return [x, y];
+						},
+					},
+					color: ["#009C77", "#BFE49F", "#3977B1"],
+					legend: {
+						animation: false,
+						right: "0",
+						top: "0",
+						icon: "rect",
+						itemWidth: 10,
+						itemHeight: 10,
+						data: [this.$t('homePage.home.charge'), this.$t('homePage.home.disCharge'), this.$t(
+							'homePage.home.photovoltaicCharge')],
+					},
+					grid: {
+						left: "15%",
+						right: "5%",
+						bottom: "12%",
+						top: "18%",
+					},
+					xAxis: {
+						type: "category",
+						data: x_data,
+						axisLabel: {
+							show: true,
+							color: "#A3A3A3",
+							formatter: function(params) {
+								let newParamsName = "";
+								const paramsNameNumber = params.length; // 文字总长度
+								const provideNumber = 11; //一行显示几个字
+								const rowNumber = Math.ceil(paramsNameNumber / provideNumber);
+								if (paramsNameNumber > provideNumber) {
+									for (let p = 0; p < rowNumber; p++) {
+										const start = p * provideNumber;
+										const end = start + provideNumber;
+										const tempStr =
+											p === rowNumber - 1 ?
+											params.substring(start, paramsNameNumber) :
+											params.substring(start, end) + "\n";
+										newParamsName += tempStr;
+									}
+								} else {
+									newParamsName = params;
+								}
+								return newParamsName;
+							},
+						},
+						axisLine: {
+							lineStyle: {
+								color: "#A3A3A3",
+							},
+						},
+					},
+					yAxis: {
+						name: this.$t('homePage.home.chargingandDischarging'),
+						nameTextStyle: {
+							fontSize: 12,
+							padding: [0, 0, 0, 20],
+						},
+						type: "value",
+						axisLabel: {
+							color: "#A3A3A3",
+						},
+						axisLine: {
+							show: false,
+							lineStyle: {
+								color: "#A3A3A3",
+							},
+						},
+					},
+					series: [{
+							data: charge_data,
+							type: "bar",
+							name: this.$t('homePage.home.charge'),
+						},
+						{
+							data: discharge_data,
+							type: "bar",
+							name: this.$t('homePage.home.disCharge'),
+						},
+						{
+							data: pv_data,
+							type: "bar",
+							name: this.$t('homePage.home.photovoltaicCharge'),
+						},
+
+					],
+				};
+			},
+		},
+	}
+</script>
+<style lang="scss" scoped>
+	.warp {
+		width: 650rpx;
+		height: 500rpx;
+		margin-top: 20rpx;
+		position: relative;
+	}
+</style>