上传文件至 'src/views'

报表集成样例

Signed-off-by: neymar_Zhang <1390574090@qq.com>

src/views/test.vue

@@ -1,21 +1,109 @@
-<template>
+<template>
-    <div>
+	<div>
-        <base-drag-ball @handlepaly="handleaudioplay" style="cursor:pointer"></base-drag-ball>
+		<el-button @click="saveData">保存</el-button>
-    </div>
+		<div id="container" style="width: 100%; height: 100%"></div>
-</template>
+		<!-- <base-drag-ball @handlepaly="handleaudioplay" style="cursor:pointer"></base-drag-ball> -->
-<script>
+	</div>
-import baseDragBall from '@/components/base/baseDragBall'
+</template>
-
+<script>
-export default {
+	// import baseDragBall from '@/components/base/baseDragBall'
-    components: { baseDragBall },
+	import "@/assets/XZReportDesigner/xzreportdesigner.js";
-    methods: {
+	import "@/assets/XZReportDesigner/xzreportdesigner.css";
-        handleaudioplay() {
+	export default {
-        }
+		data() {
-    }
+			return {
-};
+				sheetDesigner: null
+			}
+		},
+		// components: { baseDragBall },
+		methods: {
+			onUpdateDatasetList(){
+				// let results = [{
+				// 	name: "商品销售",
+				// 	id: "商品销售id",
+				// 	type: 4,
+				// 	columns: [{
+				// 			name: "商品名称", //这些name：可以是中文？
+				// 			data_type: 3
+				// 		},
+				// 		{
+				// 			name: "区域名称",
+				// 			data_type: 3
+				// 		},
+				// 		{
+				// 			name: "销售额",
+				// 			data_type: 2
+				// 		},
+				// 	],
+				// }]
+				return new Promise((resolve, reject) => {
+					// resolve的数据格式
+					let results = [{
+						name: "数据表名称",
+						id: "数据表id",
+						columns: [], // 数据表中字段 字段的数据结构 {name:"字段名称",data_type:"字段类型"} data_type => 1日期 2数字 3字符串
+						params: [], // 数据表中参数 参数耳朵数据结构 {name:"参数名称",data_type:"参数类型"} data_type => 1日期 2数字 3字符串
+					}]
+					console.log(results)
+					resolve(results)
+				})
+			},
+			initPage(){
+
+				let option = {
+					dataset: [ //数据集按钮的方式 
+						{
+							id: 1,
+							value: "新建Json数据集"
+						},
+						{
+							id: 3,
+							value: "API服务数据集"
+						},
+						{
+							id: 4,
+							value: "外部数据集"
+						}
+					],
+					onUpdateDatasetList:this.onUpdateDatasetList
+				}
+				console.log(option)
+				this.sheetDesigner = XZReportDesigner("#container", option);
+			},
+			saveData() {
+				// config 为报表配置 ， data为 数据配置
+				let reportTemplateInstance = this.sheetDesigner.getData();
+			
+				console.log(reportTemplateInstance)
+				console.log(reportTemplateInstance.config)
+				console.log(reportTemplateInstance.data);
+			}
+			// handleaudioplay() {}
+		},
+
+		watch:{
+			"dataset-edited":function(dataset) {
+			 console.log(dataset)
+			},
+			
+		},
+
+		mounted() {
+			this.initPage()
+			// const onUpdateDatasetList = () => {
+			// 	return new Promise((resolve, reject) => {
+			// 		console.log(resolve,reject,123)
+			// 		// resolve的数据格式
+			// 		let results = [{
+			// 			name: "数据表名称",
+			// 			id: "数据表id",
+			// 			columns: [], // 数据表中字段 字段的数据结构 {name:"字段名称",data_type:"字段类型"} data_type => 1日期 2数字 3字符串
+			// 			params: [], // 数据表中参数 参数耳朵数据结构 {name:"参数名称",data_type:"参数类型"} data_type => 1日期 2数字 3字符串
+			// 		}]
+			// 		resolve(results)
+			// 	})
+			// }
+
+		}
+	};
 </script>
-
-
-
-
-