fhrons-mobile-next 2.0.0 → 2.0.2

package/packages/mindMap/index.vue

@@ -0,0 +1,437 @@
+<template>
+	<div id="MindMap" class="">
+		<div id="mountNode" ref="mountNode" />
+	</div>
+</template>
+
+<script>
+import F6 from "@antv/f6";
+import TreeGraph from "@antv/f6/dist/extends/graph/treeGraph";
+import { wrapTextAndCountNewlines } from "../../assets/js/func";
+
+function getSimpleData(data, textKey, childrenKey) {
+	const result = {};
+	result.text = data[textKey];
+	if (data[childrenKey] && data[childrenKey].length) {
+		result.children = data[childrenKey].map((item) => {
+			return getSimpleData(item, textKey, childrenKey);
+		});
+	}
+	return result;
+}
+
+export default {
+	name: "MindMap",
+	props: {
+		mindData: {
+			type: Object,
+		},
+		keyOptions: {
+			type: Object,
+		},
+	},
+	data() {
+		return {
+			canvas: null,
+			ctx: null, // 延迟获取的2d context
+			renderer: "", // mini、mini-native等，F6需要，标记环境
+			isCanvasInit: false, // canvas是否准备好了
+			graph: null,
+			width: "",
+			height: "",
+			pixelRatio: 2,
+			colorList: [
+				// 预设的颜色列表
+				{
+					mainColor: "#ED92D5",
+					subColor: "#FDD5EC",
+				},
+				{
+					mainColor: "#7D6597",
+					subColor: "#E2D5FD",
+				},
+				{
+					mainColor: "#479EEB",
+					subColor: "#D5EAFD",
+				},
+				{
+					mainColor: "#7EB5A0",
+					subColor: "#DFF5E6",
+				},
+				{
+					mainColor: "#FD777C",
+					subColor: "#FEEAEC",
+				},
+				{
+					mainColor: "#FEAA66",
+					subColor: "#FEEEE5",
+				},
+				{
+					mainColor: "#44C2D9",
+					subColor: "#D2F7F7",
+				},
+				{
+					mainColor: "#FFC266",
+					subColor: "#FEF6D8",
+				},
+				{
+					mainColor: "#8A86F6",
+					subColor: "#E4E3FF",
+				},
+				{
+					mainColor: "#F988A4",
+					subColor: "#FFD9E2",
+				},
+			],
+			startX: null,
+			startY: null,
+		};
+	},
+	created() {
+		const { innerWidth, innerHeight } = window;
+		this.width = innerWidth;
+		this.height = innerHeight;
+	},
+	mounted() {
+		const _this = this;
+		F6.registerGraph("TreeGraph", TreeGraph);
+		const { textKey = "text", childrenKey = "children" } = this.keyOptions;
+		const data = getSimpleData(this.mindData, textKey, childrenKey);
+		console.log(data);
+		function setColorList(data) {
+			data.children.forEach((item) => {
+				Object.assign(item, { mainColor: data.mainColor, subColor: data.subColor });
+				if (item.children && item.children.length) {
+					setColorList(item);
+				}
+			});
+		}
+		function initData(data) {
+			const { wrappedText = "", newlineCount = 0 } = wrapTextAndCountNewlines(data.text, 20);
+			Object.assign(data, { wrappedText, newlineCount });
+			if (data.children && data.children.length) {
+				data.children.forEach((item) => {
+					initData(item);
+				});
+			}
+		}
+		const fontSize = 16;
+		const lineHeight = 24;
+		// 创建自定义节点
+		F6.registerNode("indentTree-node", {
+			draw: function draw(cfg, group) {
+				let keyShape;
+				// 根节点
+				if (cfg.depth === 0) {
+					cfg.mainColor = "#555661";
+					keyShape = group.addShape("rect", {
+						attrs: {
+							x: 10,
+							y: -12,
+							fill: cfg.mainColor,
+							radius: 8,
+						},
+						labelCfg: {
+							style: {
+								fontSize,
+							},
+						},
+					});
+					cfg.children.forEach((item, index) => {
+						Object.assign(cfg.children[index], _this.colorList[index > 10 ? index % 10 : index]);
+					});
+					initData(cfg);
+				}
+				// 二级子节点
+				else if (cfg.depth === 1) {
+					// console.log(cfg, group);
+					keyShape = group.addShape("rect", {
+						attrs: {
+							x: 10,
+							y: -11,
+							fill: cfg.mainColor,
+							radius: 8,
+							padding: [8, 8, 8, 8],
+						},
+						labelCfg: {
+							style: {
+								fill: "#ffffff",
+								fontSize,
+							},
+						},
+					});
+					setColorList(cfg);
+					// 三级子节点
+				} else if (cfg.depth === 2) {
+					keyShape = group.addShape("rect", {
+						attrs: {
+							x: 10,
+							y: -12,
+							fill: "#ffffff",
+							stroke: cfg.mainColor,
+							radius: 8,
+						},
+						labelCfg: {
+							style: {
+								fill: "#000000",
+								fontSize,
+							},
+							background: {
+								fill: "#ffffff",
+								radius: 8,
+							},
+						},
+					});
+				} else {
+					keyShape = group.addShape("rect", {
+						attrs: {
+							x: 10,
+							y: -12,
+							fill: cfg.subColor,
+							radius: 8,
+						},
+					});
+				}
+				let isLeaf = false;
+				if (cfg.collapsed) {
+					group.addShape("marker", {
+						attrs: {
+							symbol: "triangle",
+							x: 4,
+							y: -2,
+							r: 4,
+							fill: "#666",
+						},
+						name: "marker-shape",
+					});
+				} else if (cfg.children && cfg.children.length > 0) {
+					group.addShape("marker", {
+						attrs: {
+							symbol: "triangle-down",
+							x: 4,
+							y: -2,
+							r: 4,
+							fill: "#666",
+						},
+						name: "marker-shape",
+					});
+				} else {
+					isLeaf = true;
+				}
+				const shape = group.addShape("text", {
+					attrs: {
+						x: 32,
+						y: 16 + 24 * cfg.newlineCount,
+						text: cfg.wrappedText,
+						fill: cfg.depth === 0 || cfg.depth === 1 ? "#fff" : cfg.depth === 2 ? "000" : "rgba(0, 0, 0, 0.70)",
+						fontSize,
+						lineHeight,
+						textAlign: "left",
+						fontFamily: typeof window !== "undefined" ? window.getComputedStyle(document.body, null).getPropertyValue("font-family") || "Arial, sans-serif" : "Arial, sans-serif",
+					},
+					name: "text-shape",
+				});
+				const bbox = shape.getBBox();
+				let backRectW = bbox.width + 45;
+				let backRectX = keyShape.attr("x");
+				cfg.rectHeight = bbox.height + lineHeight * (cfg.newlineCount + 1);
+				keyShape.attr({
+					width: backRectW,
+					height: bbox.height + lineHeight,
+					x: backRectX,
+				});
+				return keyShape;
+			},
+		});
+
+		// registerEdge  创建自定义连接线
+		F6.registerEdge(
+			"step-line",
+			{
+				/**
+				 * 绘制边，包含文本
+				 * @param  {Object} cfg 边的配置项
+				 * @param  {G.Group} group 图形分组，边中的图形对象的容器
+				 * @return {G.Shape} 绘制的图形，通过 node.get('keyShape') 可以获取到
+				 */
+				draw(cfg, group) {
+					const { startPoint, endPoint } = cfg;
+					const model = cfg.source._cfg.model; // 获取源节点的模型
+					// console.log(model, cfg);
+					const radius = 10; // 圆角半径
+					const path = [
+						["M", startPoint.x, startPoint.y],
+						["L", startPoint.x, endPoint.y - radius],
+						["A", radius, radius, 0, 0, 0, startPoint.x + radius, endPoint.y],
+						["L", endPoint.x, endPoint.y],
+					];
+					const keyShape = group.addShape("path", {
+						attrs: {
+							stroke: model.mainColor,
+							path,
+							lineWidth: 1,
+						},
+					});
+					return keyShape;
+				},
+				getControlPoints(cfg) {
+					const { startPoint } = cfg;
+					const { endPoint } = cfg;
+					return [
+						startPoint,
+						{
+							x: startPoint.x,
+							y: endPoint.y,
+						},
+						endPoint,
+					];
+				},
+			},
+			"polyline"
+		);
+		const chartContainer = this.$refs.mountNode;
+		this.graph = new F6.TreeGraph({
+			container: chartContainer, // String | HTMLElement，必须，在 Step 1 中创建的容器 id 或容器本身,如果为小程序，则传null或者不传
+			width: chartContainer.clientWidth, // Number，必须，图的宽度
+			height: 600, // Number，必须，图的高度
+			fitView: true,
+			fitViewPadding: [20, 40, 50, 20], // 视口边缘留白
+			defaultZoom: 0.8, // 设置初始缩放比例，调整为合适的值
+			animate: true,
+			modes: {
+				default: [
+					{
+						type: "collapse-expand",
+						onChange: function onChange(item, collapsed) {
+							const model = item.getModel();
+							model.collapsed = collapsed;
+							return true;
+						},
+					},
+					{
+						type: "drag-canvas",
+						direction: "both",
+					},
+					{
+						type: "zoom-canvas",
+						direction: "both",
+						zoomKey: "shift",
+					},
+					"customeBehavior",
+				],
+			},
+			defaultNode: {
+				type: "indentTree-node",
+				size: 26,
+				anchorPoints: [
+					[0, 0.5],
+					[1, 0.5],
+				],
+			},
+			defaultEdge: {
+				type: "cubic-horizontal",
+			},
+			layout: {
+				type: "indented",
+				isHorizontal: true,
+				direction: "LR",
+				indent: 30,
+				// getId: function getId(d) {
+				// 	return d.id;
+				// },
+				getHeight: function getHeight(cfg) {
+					const { newlineCount = 0 } = wrapTextAndCountNewlines(cfg.text, 20);
+
+					// console.log(cfg.id, newlineCount, "getHeight参数");
+					return 16 + lineHeight * (newlineCount + 1);
+				},
+				getWidth: function getWidth() {
+					// console.log(arguments, "getWidth参数");
+					return 20;
+				},
+				getVGap: function getVGap() {
+					return 20;
+				},
+				getHGap: function getHGap() {
+					return 100;
+				},
+			},
+			nodeStateStyles: {
+				expand: {
+					icon: {
+						show: true,
+					},
+				},
+			},
+		});
+		this.graph.on("canvas:tap", (ev) => {
+			const shape = ev.target;
+			const item = ev.item;
+			let type;
+			if (item) {
+				type = item.getType();
+			}
+			console.log("shape,item,type", shape, item, type);
+		});
+		this.graph.edge(() => {
+			return {
+				type: "step-line",
+			};
+		});
+		this.graph.data(data); // 读取 Step 2 中的数据源到图上
+		this.graph.render(); // 渲染图
+
+		// 计算合适的缩放比例
+		const canvasWidth = this.graph.get("width");
+		const canvasHeight = this.graph.get("height");
+
+		// 设置缩放比例和中心位置
+		this.graph.zoom(0.3, { x: canvasWidth / 2, y: canvasHeight / 1 });
+		this.graph.moveTo(200, 300);
+		this.registPCEvent(chartContainer);
+	},
+	methods: {
+		registPCEvent(container) {
+			// pc端拖动事件
+			container.onmousedown = (event) => {
+				this.startX = event.clientX;
+				this.startY = event.clientY;
+				container.addEventListener("mousemove", this.draggingEvent);
+			};
+			container.onmouseup = (event) => {
+				container.removeEventListener("mousemove", this.draggingEvent);
+			};
+			container.onmouseleave = (event) => {
+				container.removeEventListener("mousemove", this.draggingEvent);
+			};
+
+			container.addEventListener("touchstart", this.preventDefault);
+			container.addEventListener("touchmove", this.preventDefault);
+		},
+		destoryPCEvent(container) {
+			container.removeEventListener("touchstart", this.preventDefault);
+			container.removeEventListener("touchmove", this.preventDefault);
+		},
+		draggingEvent(event) {
+			const dx = event.clientX - this.startX;
+			const dy = event.clientY - this.startY;
+			let matrix = this.graph.getGroup().getMatrix().slice().slice();
+			if (!matrix) {
+				matrix = [1, 0, 0, 1, 0, 0, 0, 0, 1]; // 默认矩阵
+			}
+			matrix[6] += dx;
+			matrix[7] += dy;
+
+			this.graph.getGroup().setMatrix(matrix);
+
+			this.startX = event.clientX;
+			this.startY = event.clientY;
+		},
+		preventDefault(event) {
+			event.preventDefault();
+		},
+	},
+	beforeDestroy() {},
+};
+</script>
+<style lang="less" scoped></style>

package/packages/pdfViewer/index.js

@@ -0,0 +1,12 @@
+import { loadJavaScript } from "../../assets/js/func";
+if (!window.pdfjsLib) {
+	loadJavaScript("https://dop-pro-1251973116.file.myqcloud.com/upload/jsfile/funzg/pdf.min.js").then((res) => {
+		console.log(window.pdfjsLib);
+	});
+}
+import PDFViewer from "./index.vue";
+
+PDFViewer.install = (Vue) => {
+	Vue.component(PDFViewer.name, PDFViewer);
+};
+export default PDFViewer;

package/packages/pdfViewer/index.vue

@@ -0,0 +1,131 @@
+
+<template>
+    <div
+        id="PDFViewer"
+        ref="pdfContainer"
+        class="pdf-container"
+        :style="customStyle"
+    >
+        <div ref="pdf-pages" class="pdf-pages" />
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'PDFViewer',
+    props: {
+        src: {
+            type: String,
+            required: true,
+            default: ''
+        },
+        height: {
+            type: String || Number,
+            default: '100vh'
+        },
+        scale: {
+            type: Number,
+            default: 2
+        },
+        marginBottom: {
+            type: Number,
+            default: 24
+        },
+        customStyle: {
+            type: Object,
+            default: () => {
+                return {
+                    height: '100vh',
+                    background: '#c8c9cc',
+                    padding: '24px 0'
+                };
+            }
+        }
+    },
+    data() {
+        return {
+            pdf: null,
+            visiblePages: [], // 可视区域内的页面索引
+            renderedPages: [], // 已渲染的页面索引
+            totalPages: 0
+        };
+    },
+    mounted() {
+        this.renderPdf();
+    },
+    methods: {
+        async renderPdf() {
+            const container = this.$refs.pdfContainer;
+            const loadingTask = pdfjsLib.getDocument({
+                url: this.src, cMapUrl: 'https://dop-pro-1251973116.file.myqcloud.com/upload/jsfile/funzg/pdfjs-dist@2.10.377/cmaps/',
+                cMapPacked: true
+            });
+
+            try {
+                this.pdf = await loadingTask.promise;
+                this.totalPages = this.pdf.numPages;
+                await this.getVisiblePages(container);
+                await this.renderVisiblePages();
+            } catch (error) {
+                console.error('Error rendering PDF:', error);
+            }
+        },
+        async renderVisiblePages() {
+            this.visiblePages.forEach((pageNum, index) => {
+                if (pageNum > this.totalPages) return;
+                // 如果已渲染的列表里找不到新传进来的可见列表则不执行
+                this.renderPage(pageNum, 'append');
+            });
+        },
+        async getVisiblePages(container) {
+            this.visiblePages = Array.from({ length: this.totalPages }, (_, index) => index + 1);
+        },
+        async renderPage(pageNum, type) {
+            const page = await this.pdf.getPage(pageNum);
+            const viewport = page.getViewport({ scale: this.scale });
+
+            // 调整canvas尺寸以适应页面宽度
+            const canvasContainer = document.createElement('div');
+            canvasContainer.setAttribute('id', 'pdf-canvas-' + pageNum);
+            canvasContainer.setAttribute('class', 'pdf-page');
+            canvasContainer.style.marginBottom = this.marginBottom + 'px';
+            const canvas = document.createElement('canvas');
+            canvas.setAttribute('id', `canvas-${pageNum}`);
+            const context = canvas.getContext('2d');
+            canvas.width = viewport.width;
+            canvas.height = viewport.height;
+
+            canvas.style.width = '100%';
+            canvas.style.height = 'auto';
+            const renderContext = {
+                canvasContext: context,
+                viewport: viewport,
+                renderingIntent: 'high-quality'
+            };
+
+            await page.render(renderContext);
+            canvasContainer.appendChild(canvas);
+            const homeContainer = this.$refs['pdf-pages'];
+            if (type === 'append') {
+                homeContainer.appendChild(canvasContainer);
+            } else {
+                homeContainer.insertBefore(canvasContainer, homeContainer.firstChild);
+            }
+        }
+    }
+};
+</script>
+
+<style scoped lang="less">
+#PDFViewer {
+	overflow: scroll;
+	box-sizing: border-box;
+	.pdf-container {
+		width: 100%;
+		overflow-y: scroll;
+	}
+	.pdf-page {
+		margin-bottom: 20px;
+	}
+}
+</style>