TCM_CharacterLibrary.git

			@@ -3,7 +3,7 @@
			<headNav idIndex="1" text="中医人物数据库" />
			<!-- 高级搜索 -->
			<view style="margin: .35rem 0 .16rem 0; ">
			<advancedSearch @onSearch="onSearch" :from="From" placehold="输入姓名/别名/朝代/传主职业搜索" />
			<advancedSearch @onSearch="onSearch" @onSubmit="onSubmit" :from="From" placehold="输入姓名/别名/朝代/传主职业搜索" />
			</view>
			<!-- 热门搜索 -->
			<view class="flex flex-center hotSearch">
			@@ -14,6 +14,7 @@
			</li>
			</ul>
			</view>
			<view class="" style="margin-left: .2rem;">书中最常提到的100位人物</view>
			<!-- 关系表地图 -->
			<view id="relation" style="margin-top: .2rem; height: 70vh;width: 100%;"></view>
			<!-- 朝代 -->
			@@ -38,14 +39,19 @@
			import {
			getDataStatistics,
			getHotSearch,
			getFuzzySearch
			getFuzzySearch,
			getAdvanceSearch,
			getPDataStatistics
			} from '@/api/index.js'
			import * as echarts from 'echarts';
			export default {
			data() {
			return {
			// echarts数据
			nodes: ['李时珍'],
			nodes: [{
			name: '李时珍',
			id: 23
			}],
			// echarts两者的关系
			relationships: [{
			source: '李时珍',
			@@ -82,39 +88,60 @@
			name: 'alias',
			value: ''
			}, {
			type: 'number',
			label: 'inst',
			name: 'inst',
			value: ''
			}, {
			type: 'input',
			label: 'location',
			label: '籍贯',
			name: 'location',
			value: ''
			}, {
			type: 'select',
			label: '职业',
			name: 'sdId',
			value: '',
			options: [{
			label: '未指明',
			value: 'UNKNOWN'
			}, ]
			}, {
			type: 'input',
			label: 'office',
			label: '官职',
			name: 'office',
			value: ''
			}, {
			type: 'number',
			label: 'page',
			name: 'page',
			value: ''
			}, {
			type: 'number',
			label: 'pageSize',
			name: 'pageSize',
			value: ''
			type: 'select',
			label: '性别',
			value: '',
			name: 'genderTypeEO',
			options: [{
			label: '未指明',
			value: 'UNKNOWN'
			}, {
			label: '男',
			value: 'MALE'
			},
			{
			label: '女',
			value: 'WOMAN'
			}
			]
			}, {
			type: 'input',
			label: 'period',
			label: '时间',
			name: 'period',
			value: ''
			}, {
			type: 'input',
			label: 'sdId',
			name: 'sdId',
			label: '机构',
			name: 'inst',
			value: ''
			}, {
			type: 'number',
			label: '页码',
			name: 'page',
			value: ''
			}, {
			type: 'number',
			label: '页大小',
			name: 'pageSize',
			value: ''
			}, ]
			},
			@@ -219,7 +246,6 @@
			},

			methods: {

			// 关系图谱
			relation() {
			var chartDom = document.getElementById('relation');
			@@ -251,60 +277,73 @@
			}
			// 根据关系数据生成连接线
			var links = [];
			relationships.forEach(function(relationship) {
			var sourceIndex = nodes.indexOf(relationship.source);
			var targetIndex = nodes.indexOf(relationship.target);
			// console.log(sourceIndex, targetIndex);
			if (sourceIndex !== -1 && targetIndex !== -1) {
			links.push({
			source: sourceIndex,
			target: targetIndex,
			label: {
			show: true,
			formatter: function(params) { // 使用函数动态生成标签内容
			return relationships.find(rel => rel.source === nodes[params.data
			.source] && rel.target === nodes[params.data.target])
			.relation;
			}, // 设置关系标签内容为"Child-Parent"
			color: '#2C2C2C',
			fontSize: FontSize - 2,
			backgroundColor: 'rgba(255, 255, 255, 1)',
			padding: [3, 8],
			borderRadius: 30,
			position: 'middle', // 设置标签文本在线的中间位置上居中显示
			// bottom: -(FontSize+10),
			z: 10, // 设置标签的z轴高度，使其比连接线更高
			// offset: [0, 15] ,// 往下移动 10 像素
			distance: -(Distance + 1), // 将标签放置在连接线上
			}
			});
			relationships.forEach((relationship, i) => {
			// 靳
			var sourceIndex = nodes.findIndex((node) => node.name === relationship.source);
			var targetIndex = nodes.findIndex((node) => node.name === relationship.target);
			if (relationship.relation) {
			if (sourceIndex !== -1 && targetIndex !== -1) {
			console.log(relationship.source, relationship.target);
			links.push({
			source: sourceIndex,
			target: targetIndex,
			label: {
			show: true,
			formatter: function(params) { // 使用函数动态生成标签内容
			// console.log(params, 'paramsparamsparamsparamsparams');
			// return relationships.find(rel => rel.source === nodes[params.data
			// .source] && rel.target === nodes[params.data.target])
			// .relation;
			return relationship.relation;
			}, // 设置关系标签内容为"Child-Parent"
			color: '#2C2C2C',
			fontSize: FontSize - 2,
			backgroundColor: 'rgba(255, 255, 255, 1)',
			padding: [3, 8],
			borderRadius: 30,
			position: 'middle', // 设置标签文本在线的中间位置上居中显示
			// bottom: -(FontSize+10),
			z: 10, // 设置标签的z轴高度，使其比连接线更高
			// offset: [0, 15] ,// 往下移动 10 像素
			distance: -(Distance + 1), // 将标签放置在连接线上
			}
			});
			}
			}

			});
			console.log(links);
			// 根据nodes动态生成节点数据
			var nodeData = nodes.map(function(node, index) {
			return {
			name: node,
			name: node.name,
			id: node.id,
			x: Math.random() * 2000, // 设置随机x坐标位置
			y: Math.random() * 600, // 设置随机y坐标位置
			itemStyle: {
			color: getColorByIndex(index), // 可以根据索引设置不同的颜色
			color: getColorByIndex(), // 可以根据索引设置不同的颜色
			borderWidth: BorderWidth,
			borderColor: getColorByIndex(index + 1)
			borderColor: getColorByIndex()
			}
			};
			});
			// 设置颜色
			function getColorByIndex(index) {
			var colors = ['#ecf4ff', '#dd9795', '#f1edbe', '#ecf4ff', '#c5dbd8']; // 可以根据实际情况设置颜色数组
			return colors[index % colors.length];
			function getColorByIndex() {
			// 生成随机的 R、G、B 分量值，限制在更高的范围内
			var r = Math.floor(Math.random() * 106) + 150; // 150 到 255 之间的随机数
			var g = Math.floor(Math.random() * 106) + 150; // 150 到 255 之间的随机数
			var b = Math.floor(Math.random() * 106) + 150; // 150 到 255 之间的随机数
			// 将 R、G、B 分量值转换为十六进制，并确保每个分量值都是两位数
			var hexR = r.toString(16).padStart(2, '0'); // 使用 padStart 方法确保生成的十六进制数为两位
			var hexG = g.toString(16).padStart(2, '0');
			var hexB = b.toString(16).padStart(2, '0');
			// 拼接十六进制颜色值
			var color = '#' + hexR + hexG + hexB;
			return color;
			}
			var option;
			option = {
			title: {
			// text: '书中最常提到的100位人物',
			subtext: '书中最常提到的100位人物',
			// subtext: '',
			left: 'center',
			top: FontSize + 10,
			// textStyle: {
			@@ -345,11 +384,8 @@
			}
			}]
			};

			// 将生成的连接线添加到echarts图表的option中
			option.series[0].links = links;


			// 设置点击事件监听
			myChart.on('click', (params) => {
			// menuNav2 = !menuNav1
			@@ -365,13 +401,13 @@
			})
			option && myChart.setOption(option);
			},
			// 关系图
			// 关系图点击里面的元素
			spaceTimeArr(Arr) {
			// 关系图的数据
			console.log(Arr);
			// uni.navigateTo({
			// url: '/pages/repository/repository'
			// })
			uni.navigateTo({
			url: '/pages/repository/repository'
			})
			},
			// 获取朝代echarts的数据
			async echartsArr() {
			@@ -387,59 +423,141 @@
			})
			console.log(this.dynasty, 'sdfsfd');
			})

			},
			// 热门搜索
			async hotSearch() {
			await getHotSearch().then(res => {
			console.log(res, 'saaadfds');
			this.hot= Object.keys(res.object).map(key => {
			return { id: parseInt(key), name: res.object[key] };
			this.hot = Object.keys(res.object).map(key => {
			return {
			id: parseInt(key),
			name: res.object[key]
			};
			})
			// this.hot = res.list
			})
			},
			// 基础搜索
			async onSearch(val) {
			console.log(val);
			await getFuzzySearch(val.text).then(res => {
			console.log(res, 'jieko');
			if (res.list) {
			this.nodes = []
			this.nodes[0] = res.list[0].name1
			this.nodes[1] = res.list[0].name2
			for (let i = 1; i < res.list.length; i++) {
			this.nodes.push(res.list[i].name2);
			}
			this.nodes = [...new Set(this.nodes)]
			this.relationships = this.nodes.slice(1).map(item => {
			return {
			source: this.nodes[0],
			target: item,
			relation: ''
			};
			this.relationships = []
			res.list.forEach((item, index) => {
			let exists1 = this.nodes.some(node => (node.id === item.identifier1 && node
			.name === item.name1));
			let exists2 = this.nodes.some(node => (node.id === item.identifier2 && node
			.name === item.name2));
			// 证明不存在
			if (exists1 !== true) {
			this.nodes.push({
			name: item.name1,
			id: item.identifier1
			})
			}
			if (exists2 !== true) {
			this.nodes.push({
			name: item.name2,
			id: item.identifier2
			})
			}
			let obj = {
			source: item.name1,
			target: item.name2,
			relation: item.relationName \|\|
			'' // 如果存在 relationName 字段则使用，否则为空字符串
			}
			// 只有当 item.relationName 存在时，才向 obj 对象中添加 relation 字段
			if (item.relationName) {
			obj.relation = item.relationName;
			}
			this.relationships.push(obj)

			});

			// this.nodes = []
			// this.nodes[0] = {
			// name: res.list[0].name1,
			// id: res.list[0].identifier1
			// }
			// this.nodes[1] = {
			// name: res.list[1].name1,
			// id: res.list[1].identifier1
			// }
			// for (let i = 1; i < res.list.length; i++) {
			// let node1 = {
			// name: res.list[i].name1,
			// id: res.list[i].identifier1
			// }
			// this.nodes.push(node1);
			// // console.log(i);
			// }
			// this.nodes = [...new Set(this.nodes.map(node => JSON.stringify(node)))].map(node =>
			// JSON.parse(node));
			// console.log(this.nodes,'nodesnodesnodesnodes');
			// this.relationships = this.nodes.slice(1).map((item, index) => {
			// console.log(item,res.list[index].relationName, 'iiiiiiiiiiiiisdfdsf');
			// return {
			// source: this.nodes[0].name,
			// target: item.name,
			// relation: res.list[index].relationName
			// };
			// });
			} else {
			alert('没有搜索到数据')
			// alert('没有搜索到数据')
			}
			this.relation()
			console.log(res);
			})
			this.relation()

			})

			},
			// 高级搜索
			async onSubmit(val) {
			console.log(val);
			await getAdvanceSearch(val).then(res => {
			console.log(res, '接口调用成功');
			})
			},
			// 点击下面的朝代按钮
			dynastyBottomClick(item) {

			this.dynastyColor = item.id
			this.onSearch({
			text: item.name
			})
			},
			// 高级搜索里面职业的下拉菜单
			async innt() {
			await getPDataStatistics().then(res => {
			const professionIndex = this.From.from.findIndex(field => field.label === '职业');
			// 如果找到了职业字段
			if (professionIndex !== -1) {
			// 将 profession.list 转换为 options 格式
			const options = res.object.occupationStatistic.details.map(item => ({
			label: item.tagName,
			value: item.tagId.toString() // 将 id 转换为字符串，确保与 value 类型一致
			}));
			// 更新职业字段的 options 属性
			this.$set(this.From.from[professionIndex], 'options', options);
			}
			})
			}
			},
			mounted() {
			// 关系图谱
			this.relation()
			this.echartsArr()
			this.hotSearch()
			this.onSearch({
			text: ''
			})
			// 监听窗口大小变化
			window.addEventListener('resize', this.relation);


			this.innt()
			}
			}
			</script>