初始提交

pages/portal/components/HCustomeCharts/charts.vue

@@ -0,0 +1,120 @@
+<template>
+	<view class="charts-v">
+		<view class="charts-box">
+			<qiun-data-charts :type="config.appOption.type" :chartData="config.appOption.chartData" :ontouch="true"
+				:opts="config.appOption.opts"
+				:style="{'background-color':config.appOption.bgColor?config.appOption.bgColor:''}"
+				:connectNulls="true" />
+		</view>
+	</view>
+</template>
+<script>
+	export default {
+		props: {
+			config: {
+				type: Object,
+				default: () => {}
+			},
+		},
+		data() {
+			return {}
+		},
+		methods: {
+			complete(e) {
+				this.$emit('complete', e)
+			},
+			getIndex(e) {
+				return this.$emit('getIndex', e)
+			},
+		}
+	}
+</script>
+
+
+<style lang="scss">
+	.charts-v {
+		background-color: #fff;
+		box-sizing: border-box;
+		position: relative;
+	}
+
+	.qiun-title-bar {
+		width: 100%;
+		z-index: 9;
+		text-align: center;
+		position: absolute;
+		top: 40rpx;
+		margin: 20rpx 0;
+
+		.titleBox {
+			.tit {
+				// margin-bottom: 10rpx;
+			}
+		}
+	}
+
+	.regionStep {
+		max-width: 100%;
+		max-height: 100%;
+		margin-bottom: 60rpx;
+		position: absolute;
+		top: 0rpx;
+		z-index: 9999;
+
+		.icon {
+			margin: 0 8rpx;
+		}
+	}
+
+	.charts-box {
+		width: 100%;
+		height: 660rpx;
+		// margin: 0px auto 20rpx;
+		position: relative;
+
+		.charts-legend {
+			position: absolute;
+			bottom: 0px;
+			left: 20rpx;
+			font-size: 20rpx;
+
+			.legend-item {
+				display: inline-block;
+				width: 30rpx;
+				height: 20rpx;
+				margin-right: 10rpx;
+				background-color: #0D9FD8;
+			}
+		}
+
+		.points-box {
+			position: absolute;
+			width: 20rpx;
+			height: 20rpx;
+			border-radius: 50%;
+			background-color: #0D9FD8;
+			animation: warn 1.5s ease-out 0s infinite;
+		}
+
+		.points-box2 {
+			position: absolute;
+			box-shadow: 0 0 24rpx 28rpx rgba(13, 159, 261, 0.3);
+		}
+	}
+
+	@keyframes warn {
+		0% {
+			transform: scale(0.5);
+			opacity: 1;
+		}
+
+		30% {
+			opacity: 1;
+		}
+
+		100% {
+			transform: scale(1.4);
+			opacity: 0.3;
+		}
+	}
+</style>

pages/portal/components/HCustomeCharts/index.vue

@@ -0,0 +1,66 @@
+<template>
+	<view class="charts" v-if="show">
+		<charts :config="config" :key="key" ref="charts"></charts>
+	</view>
+</template>
+<script>
+	import charts from './charts.vue'
+	import {
+		getDataInterfaceRes
+	} from '@/api/common'
+	export default {
+		components: {
+			charts
+		},
+		props: {
+			config: {
+				type: Object,
+				default: () => {}
+			}
+		},
+		data() {
+			return {
+				key: +new Date(),
+				show: false
+			}
+		},
+		created() {
+			this.init()
+		},
+		methods: {
+			async init() {
+				// 提取视图初始化逻辑
+				const initializeView = () => {
+					this.show = true;
+					this.key = Date.now();
+				};
+				if (this.config.appDataType === 'dynamic') {
+					if (!this.config.appPropsApi) return;
+					try {
+						const res = await getDataInterfaceRes(
+							this.config.appPropsApi, {
+								paramList: this.config.appTemplateJson
+							}
+						);
+						this.config.appOption = Object.assign({},
+							this.config.appOption,
+							res.data
+						);
+						initializeView();
+					} catch (error) {
+						console.error('Failed to fetch app props:', error);
+					}
+				}
+				// 静态数据类型的处理
+				else {
+					initializeView();
+				}
+			}
+		}
+	}
+</script>
+<style lang="scss">
+	.charts {
+		padding: 20rpx;
+	}
+</style>