deepChartVueApp/pages/deepExploration/MainForceActions.vue

<template>
	<view class="main">
		<!-- 顶部状态栏占位 -->
		<view class="top" :style="{height:iSMT+'px'}"></view>
		<deepExploration_header></deepExploration_header>

		<view class="search">
			<input v-model="searchName" class="searchInput" type="text" placeholder="请输入股票名称、股票代码"
				placeholder-style="color: #A6A6A6; font-size: 22rpx;" />
			<image @click="searchStock" class="seachIcon" src="/static/deepExploration-images/search.png"
				mode="aspectFill"></image>
		</view>

		<view class="content">
			<view class="select">
				<image class="img" :src="navItems[currentIndex].icon" mode=""></image>
				<view v-for="(item, index) in navItems" :key="index" class="selectItem"
					:class="{ active: currentIndex === index }" @click="handleModel(index)">
					<button class="btn"></button>
				</view>
			</view>

			<view class="graphAndTxt">
				<view class="graph">
					<view class="graph_header">
						<view class="left">TESA</view>
						<view class="center">
							<image class="last" src="/static/deepExploration-images/last.png" mode="aspectFill"></image>
							<text>Taewlkj.sejssssssssf</text>
							<image class="next" src="/static/deepExploration-images/next.png" mode="aspectFill"></image>
						</view>
						<view class="right">2025/10/26</view>
					</view>
					<view class="graph_data">
						<text>435.900</text>
						<text>22.410</text>
						<text>5.120%</text>
					</view>
					<view class="graph_content">
						<view class="charts-box">
							<!-- uCharts 蜡烛图组件 -->
							<qiun-data-charts type="candle" :opts="opts" :chartData="chartData" :disableScroll="true"
								:ontouch="true" :onzoom="true" />
						</view>
					</view>
				</view>
				<view class="txt">
					<view class="txtHeader">
						<image src="/static/deepExploration-images/plus.png" mode="aspectFill"></image>
						<text>{{navItems[currentIndex].name}}</text>
					</view>
					<view class="txtContent">
						<view v-if="loading" class="loading">加载中...</view>
						<rich-text :nodes="htmlContent"></rich-text>
					</view>
				</view>
			</view>
		</view>

		<!-- 底部切换栏 -->
		<footerBar class="static-footer" :type="type"></footerBar>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue'
	import deepExploration_header from '@/components/deepExploration_header.vue'
	import footerBar from '@/components/footerBar.vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		getModel1First,
		getModel1Second,
		getModel2First,
		getModel2Second,
		getModel3First,
		getModel3Second,
		getModel4First,
		getModel4Second,
		getModeldefault,
		getData
	} from '/api/deepExploration/deepExploration.js'
	import marked from 'marked'; // 引入 marked 库
	import hljs from 'highlight.js';
	import 'highlight.js/styles/atom-one-dark.css'; // 可替换为其他主题

	// 响应式变量定义
	const type = ref('deepExploration')
	const iSMT = ref(0)
	const currentIndex = ref(0)
	const navItems = ref([{
			name: '主力追踪',
			icon: '/static/deepExploration-images/1.png'
		},
		{
			name: '主力雷达',
			icon: '/static/deepExploration-images/2.png'
		},
		{
			name: '主力解码',
			icon: '/static/deepExploration-images/3.png'
		},
		{
			name: '主力资金流',
			icon: '/static/deepExploration-images/4.png'
		},
	])

	//搜索股票
	const searchStock = () => {
		htmlContent.value = ''
		console.log('搜索参数：', stockName.value);
		if (currentIndex.value ) {
		handleModels()
		getServerData()
		} else {
			uni.showToast({
				title: '请选择模块',
				icon: 'none',
				duration: 2000
			})
		}

	}
	//点击四大模块
	const handleModel = async(index) => {
		htmlContent.value = ''
		currentIndex.value = index
		await handleModels()
	}

	const stockName = ref('')
	const searchName = ref('')
	const stockCode = ref('')
	const language = ref('')
	const recordId = ref('')
	const parentId = ref('')
	const stockId = ref('')
	const market = ref('')

	const loading = ref(true);
	const error = ref('');
	const htmlContent = ref('');
	const markdownContent = ref('');


	const renderer = new marked.Renderer();
	renderer.heading = function(text, level) {
		return `<p>${text}</p>`;
	};
	// 初始化 marked 配置（支持代码高亮）
	marked.setOptions({
		highlight: (code, lang) => {
			if (lang && hljs.getLanguage(lang)) {
				return hljs.highlight(code, {
					language: lang
				}).value;
			}
			return hljs.highlightAuto(code).value;
		},
		renderer,
		breaks: true, // 换行转<br>
		gfm: true, // 支持GitHub flavored Markdown
		sanitize: false, // 保留HTML标签（如<span style>）
	});

	//获取模型数据
	const handleModels = async () => {
		try {
			// markdownContent.value = '\n## 📊 主力追踪分析：\n\n### 🕵️ 主力行为\n\t1. 📊 该股庄家中长期筹码成本价格为 360.249，短期资金成本价格为 412.577。该股筹码分散，当日筹码成本价格为 444.330。\n\t2. 🔍 近日没有出现主力集中吸筹。\n\t3. 📈 近期主力持仓比例大于散户持仓比例。 当日主力持仓增加。 当日散户持仓减少。\n\n### 📊 空间维度:\n\t- 📉 预测低一值: <font color=\"#13c2c2\">443.092</font>  \n    - 📈 预测高一值: <font color=\"#ff4d4f\">466.458</font>\n\t- 📉 预测低二值: <font color=\"#13c2c2\">447.354</font>\n\t- 📈 预测高二值: <font color=\"#ff4d4f\">462.514</font>\n\t<font color=\"#722ed1\">AI智能均线空头排列，当前卖盘小于买盘</font>\n\n### 综合作战\n\t\t\t<font color=\"#fa8c16\">当前股票处于安全区，牵牛绳为红色，出现蓝色推进K线。</font>\n\t\t\t<font color=\"#eb2f96\">该股整体趋势相对较强，个股正处于推进上涨的关键阶段。若当前持有该股票，建议继续持有，进行持续跟踪。若当前无该股票，建议持续跟踪，等待适当时机再进行介入。</font>\n\n---\n<font color=\"#8c8c8c\">*该内容由AI生成，仅供参考，投资有风险，请注意甄别。*</font>\n    '
			// htmlContent.value = marked.parse(markdownContent.value);
			loading.value = true;
			if (searchName.value == '') {
				console.log('没有搜索',searchName.value);
			const rresult = await handleDefault()
			
			// markdownContent.value = res.data.markdown
			htmlContent.value = marked.parse(markdownContent.value);
			}else{
					console.log('搜索',searchName.value);
				const result = await getModel1First({
					content: searchName.value,
					language: "cn",
					marketList: "hk,cn,usa,my,sg,vi,in,gb",
					model: currentIndex.value+1
				})
				console.log('result', result);
				if (result.code == 200) {
					stockCode.value = result.data.code
					stockName.value = result.data.name
					recordId.value = result.data.recordId
					parentId.value = result.data.parentId
					stockId.value = result.data.stockId
					language.value = result.data.language
					market.value = result.data.market 
				} else {
					return
				}
				
				
				const res = await getModel1Second({
					language: language.value,
					recordId: recordId.value,
					parentId: parentId.value,
					stockId: stockId.value,
					token: 'pCtw6AYK0EHAaIexoFHsbZjtsfEAIhcmwkCFm6uKko8VPfMvyDiODL9v9c0veic9fIpQbvT8zN4sH/Si6Q'
				})
				if (res.code == 200) {
					const rawMarkdown = res.data.markdown;
					const adaptedMarkdown = rawMarkdown.replace(/^### /gm, ''); // 全局替换行首的###
					markdownContent.value = adaptedMarkdown;
					// markdownContent.value = res.data.markdown
					htmlContent.value = marked.parse(markdownContent.value);
				}
				console.log('res', res);
			}
			

		} catch {
			error.value = e.message || '加载失败，请重试';
		} finally {
			loading.value = false;
		}
	}

	const handleDefault = async () => {
		 const result = await getModeldefault({
			token: "pCtw6AYK0EHAaIexoFHsbZjtsfEAIhcmwkCFm6uKko8VPfMvyDiODL9v9c0veic9fIpQbvT8zN4sH/Si6Q",
			model: currentIndex.value+1
		})
		
		const rawMarkdown = result.data.markdown;
		const adaptedMarkdown = rawMarkdown.replace(/^### /gm, ''); // 全局替换行首的###
		markdownContent.value = adaptedMarkdown;
		htmlContent.value = marked.parse(markdownContent.value);
	}
	
	 const getServerData = async() =>{
		 const result = await getData({
			  market: market.value || '',
			   code: searchName || '',
			   language: "cn",
			   brainPrivilegeState: 1,
			   marketList: "usa.sg.my.hk.cn.can.vi.th.in.gb"
		 })
		 
		 console.log('k线数据',result);
	 }

	// 1. K线图配置
	const opts = ref({
		rotate: false,
		rotateLock: false,
		color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4", "#ea7ccc"],
		padding: [15, 15, 0, 15],
		dataLabel: false,
		enableScroll: true,
		enableMarkLine: false,
		legend: {},
		xAxis: {
			labelCount: 4,
			itemCount: 30,
			disableGrid: true,
			gridColor: "#CCCCCC",
			gridType: "solid",
			dashLength: 4,
			scrollShow: false,
			scrollAlign: "left",
			scrollColor: "#A6A6A6",
			scrollBackgroundColor: "#EFEBEF",
			labelColor: "#8C8C8C",
			fontSize: 9
		},
		yAxis: {
			labelColor: "#8C8C8C",
			fontSize: 9
		},
		extra: {
			candle: {
				color: {
					upLine: "#f04864",
					upFill: "#f04864",
					downLine: "#2fc25b",
					downFill: "#2fc25b"
				},
				average: {
					show: false,
					name: ["MA5", "MA10", "MA30"],
					day: [5, 10, 20],
					color: ["#1890ff", "#2fc25b", "#facc14"]
				}
			},
			markLine: {
				type: "dash",
				dashLength: 5,
				data: [{
						value: 2150,
						lineColor: "#f04864",
						showLabel: false
					},
					{
						value: 2350,
						lineColor: "#f04864",
						showLabel: false
					}
				]
			},
			tooltip: {
				showCategory: true
			}
		}
	})

	// 2. K线图数据（响应式定义）
	const chartData = ref({})

	// 获取K线数据函数（直接定义，无需methods）
	// const getServerData = () => {
	// 	// 模拟服务器请求延时
	// 	setTimeout(() => {
	// 		const res = {
	// 			"categories": [
	// 				"2025/08/25",
	// 				"2025/08/26",
	// 				"2025/08/27",
	// 				"2025/08/28",
	// 				"2025/08/29",
	// 				"2025/09/01",
	// 				"2025/09/02",
	// 				"2025/09/03",
	// 				"2025/09/04",
	// 				"2025/09/05",
	// 				"2025/09/08",
	// 				"2025/09/09",
	// 				"2025/09/10",
	// 				"2025/09/11",
	// 				"2025/09/12",
	// 				"2025/09/15",
	// 				"2025/09/16",
	// 				"2025/09/17",
	// 				"2025/09/18",
	// 				"2025/09/19",
	// 				"2025/09/22",
	// 				"2025/09/23",
	// 				"2025/09/24",
	// 				"2025/09/25",
	// 				"2025/09/26",
	// 				"2025/09/29",
	// 				"2025/09/30",
	// 				"2025/10/09",
	// 				"2025/10/10",
	// 				"2025/10/13",
	// 				"2025/10/14",
	// 				"2025/10/15",
	// 				"2025/10/16",
	// 				"2025/10/17",
	// 				"2025/10/20",
	// 				"2025/10/21",
	// 				"2025/10/22",
	// 				"2025/10/23",
	// 				"2025/10/24",
	// 				"2025/10/27"
	// 			],
	// 			series: [{
	// 				"name": "贵州茅台",
	// 				"data": [
	// 					[
	// 						1470.01,
	// 						1496.0,
	// 						1466.0,
	// 						1499.33
	// 					],
	// 					[
	// 						1490.32,
	// 						1474.23,
	// 						1480.01,
	// 						1481.61
	// 					],
	// 					[
	// 						1481.88,
	// 						1484.93,
	// 						1448.0,
	// 						1448.0
	// 					],
	// 					[
	// 						1447.97,
	// 						1456.1,
	// 						1438.77,
	// 						1446.1
	// 					],
	// 					[
	// 						1453.0,
	// 						1482.58,
	// 						1452.0,
	// 						1480.0
	// 					],
	// 					[
	// 						1482.2,
	// 						1488.0,
	// 						1465.7,
	// 						1476.1
	// 					],
	// 					[
	// 						1478.66,
	// 						1509.0,
	// 						1478.0,
	// 						1491.3
	// 					],
	// 					[
	// 						1491.0,
	// 						1503.5,
	// 						1466.0,
	// 						1480.55
	// 					],
	// 					[
	// 						1472.0,
	// 						1479.3,
	// 						1460.47,
	// 						1480.66
	// 					],
	// 					[
	// 						1471.0,
	// 						1486.97,
	// 						1464.0,
	// 						1483.0
	// 					],
	// 					[
	// 						1483.0,
	// 						1506.44,
	// 						1477.5,
	// 						1501.23
	// 					],
	// 					[
	// 						1505.0,
	// 						1509.95,
	// 						1493.42,
	// 						1505.0
	// 					],
	// 					[
	// 						1506.66,
	// 						1529.95,
	// 						1496.0,
	// 						1522.01
	// 					],
	// 					[
	// 						1522.01,
	// 						1526.02,
	// 						1508.5,
	// 						1523.5
	// 					],
	// 					[
	// 						1526.0,
	// 						1538.02,
	// 						1510.53,
	// 						1516.0
	// 					],
	// 					[
	// 						1515.87,
	// 						1517.48,
	// 						1501.5,
	// 						1515.1
	// 					],
	// 					[
	// 						1515.1,
	// 						1520.99,
	// 						1496.21,
	// 						1499.98
	// 					],
	// 					[
	// 						1499.99,
	// 						1510.28,
	// 						1490.01,
	// 						1493.0
	// 					],
	// 					[
	// 						1492.0,
	// 						1497.8,
	// 						1463.5,
	// 						1467.96
	// 					],
	// 					[
	// 						1467.99,
	// 						1475.5,
	// 						1457.01,
	// 						1467.97
	// 					],
	// 					[
	// 						1465.09,
	// 						1467.97,
	// 						1450.01,
	// 						1453.35
	// 					],
	// 					[
	// 						1450.5,
	// 						1457.5,
	// 						1440.0,
	// 						1447.42
	// 					],
	// 					[
	// 						1434.07,
	// 						1456.78,
	// 						1434.07,
	// 						1442.0
	// 					],
	// 					[
	// 						1442.83,
	// 						1445.21,
	// 						1436.0,
	// 						1439.0
	// 					],
	// 					[
	// 						1441.18,
	// 						1447.11,
	// 						1428.01,
	// 						1435.0
	// 					],
	// 					[
	// 						1439.38,
	// 						1469.99,
	// 						1435.0,
	// 						1460.86
	// 					],
	// 					[
	// 						1460.0,
	// 						1460.76,
	// 						1440.0,
	// 						1443.99
	// 					],
	// 					[
	// 						1436.0,
	// 						1439.38,
	// 						1420.0,
	// 						1436.78
	// 					],
	// 					[
	// 						1437.6,
	// 						1439.94,
	// 						1427.5,
	// 						1430.0
	// 					],
	// 					[
	// 						1415.7,
	// 						1422.85,
	// 						1415.12,
	// 						1419.2
	// 					],
	// 					[
	// 						1429.99,
	// 						1464.0,
	// 						1429.99,
	// 						1451.02
	// 					],
	// 					[
	// 						1450.98,
	// 						1463.0,
	// 						1445.08,
	// 						1462.0
	// 					],
	// 					[
	// 						1461.92,
	// 						1484.95,
	// 						1458.88,
	// 						1484.91
	// 					],
	// 					[
	// 						1483.1,
	// 						1488.0,
	// 						1454.03,
	// 						1455.0
	// 					],
	// 					[
	// 						1455.0,
	// 						1469.5,
	// 						1454.88,
	// 						1457.93
	// 					],
	// 					[
	// 						1459.0,
	// 						1469.94,
	// 						1455.5,
	// 						1462.26
	// 					],
	// 					[
	// 						1462.08,
	// 						1465.73,
	// 						1456.0,
	// 						1458.7
	// 					],
	// 					[
	// 						1455.0,
	// 						1468.8,
	// 						1447.2,
	// 						1467.98
	// 					],
	// 					[
	// 						1467.95,
	// 						1478.88,
	// 						1449.34,
	// 						1450.0
	// 					],
	// 					[
	// 						1440.0,
	// 						1452.49,
	// 						1435.99,
	// 						1440.41
	// 					]
	// 				],
	// 			}]
	// 		}
	// 		// 给响应式变量赋值（需修改.value）
	// 		chartData.value = JSON.parse(JSON.stringify(res))
	// 	}, 500)
	// }

	// 生命周期钩子：组件挂载后执行（替代onReady）
	onMounted(() => {
		iSMT.value = uni.getSystemInfoSync().statusBarHeight
		getServerData() // 调用数据获取函数
	})

	// 页面加载时执行
	onLoad((e) => {
		if (e.index) {
			currentIndex.value = e.index - 1
			console.log('模块：', currentIndex.value)
		}
		if (e.stockName) {
			stockName.value = e.stockName
			console.log('股票名称：', stockName.value)
		}
	})
</script>

<style scoped lang="scss">
	.main {
		width: 100%;
		min-height: 100vh;
		background-color: #fff;
		padding-bottom: 120rpx;

		.search {
			position: relative;
			display: flex;
			align-items: center;
			background-color: #F3F3F3;
			width: calc(100% - 60rpx);
			height: 80rpx;
			border-radius: 50rpx;
			box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
			padding: 0 40rpx;
			margin: 15rpx 30rpx 0 30rpx;

			.seachIcon {
				position: absolute;
				right: 50rpx;
				width: 32rpx;
				height: 32rpx;
			}

			.searchInput {
				color: #111;
			}
		}

		.content {
			margin-top: 30rpx;
			padding-top: 30rpx;
			background-color: rgb(248, 248, 248);

			.select {
				position: relative;
				margin-bottom: -5rpx;

				.img {
					width: 750rpx;
					height: 198rpx;
				}

				.selectItem {
					.btn {
						position: absolute;
						width: 120rpx;
						height: 150rpx;
						background-color: transparent;

						&::after {
							border: none;
						}
					}

					&:nth-of-type(1) .btn {
						top: 30rpx;
						left: 60rpx;
					}

					&:nth-of-type(2) .btn {
						top: 30rpx;
						left: 230rpx;
					}

					&:nth-of-type(3) .btn {
						top: 30rpx;
						left: 400rpx;
					}

					&:nth-of-type(4) .btn {
						top: 30rpx;
						left: 570rpx;
					}
				}
			}

			.graphAndTxt {
				background-color: #fff;
				border-radius: 50rpx 50rpx 0 0;
				padding: 68.6rpx 36.5rpx 0 36.5rpx;

				.graph {
					border: 1rpx solid #e2e2e2;
					border-radius: 30rpx 30rpx 0 0;

					.graph_header {
						padding: 32rpx 20.5rpx 0 24rpx;
						display: flex;
						align-items: center;

						.left {
							color: #333333;
							font-family: "PingFang SC";
							font-size: 15px;
							font-style: normal;
							font-weight: 400;
							line-height: 15px;
						}

						.center {
							margin-left: 105rpx;
							display: flex;
							align-items: center;

							text {
								width: 160rpx;
								height: 36rpx;
								padding-left: 10rpx;
								color: #000000;
								white-space: nowrap;
								overflow: hidden;
								text-overflow: ellipsis;
								text-align: center;
								font-family: "PingFang SC";
								font-size: 18px;
								font-style: normal;
								font-weight: 500;
								line-height: 18px;
							}

							.last {
								width: 15rpx;
								height: 20rpx;
								margin-right: 30rpx;
							}

							.next {
								width: 15rpx;
								height: 20rpx;
								margin-left: 30rpx;
							}
						}

						.right {
							margin-left: 50rpx;
							color: #6a6a6a;
							font-family: "PingFang SC";
							font-size: 13px;
							font-style: normal;
							font-weight: 400;
							line-height: 15px;
						}
					}

					.graph_data {
						display: flex;
						padding: 48rpx 24rpx;

						text {
							display: flex;
							color: #25ba5d;
							font-family: "PingFang SC";
							font-size: 17px;
							line-height: 17px;
						}

						text:nth-child(2) {
							margin-left: 120rpx;
						}

						text:nth-child(3) {
							margin-left: 150rpx;
						}
					}

					.graph_content {
						.charts-box {
							width: 100%;
							height: 100%;
						}
					}
				}

				.txt {
					background-color: #F3F3F3;
					margin-top: 48rpx;
					border-radius: 30rpx;

					.txtHeader {
						padding: 30rpx 24rpx;

						image {
							width: 20rpx;
							height: 20rpx;
						}

						text {
							background-color: #FFFFFF;
							color: #000000;
							padding: 0 22rpx;
							border-radius: 22rpx;
							font-size: 28rpx;
							font-weight: 400;
							line-height: 37rpx;
						}
					}

					.txtContent {
						min-height: 200rpx;
						padding: 20rpx 30rpx;
						margin-bottom: 100rpx;

						::v-deep * {
							box-sizing: border-box;
							width: 100% !important; // 强制所有解析后的标签占满容器宽度
							white-space: normal !important; // 取消强制不换行
							word-wrap: break-word !important; // 长词/长数字自动换行
						}

						// 标题样式（确保换行）
						::v-deep h2 {
							font-size: 32rpx;
							color: #333;
							margin: 25rpx 0 15rpx;
							line-height: 1.5;
						}

						// 段落样式（核心换行控制）
						::v-deep p {
							font-size: 26rpx;
							color: #666;
							margin: 15rpx 0;
							line-height: 1.8; // 增加行高，提升可读性
							text-align: justify; // 两端对齐，避免单侧参差不齐
						}

						// 列表样式（纵向排列）
						::v-deep ul,
						::v-deep ol {
							margin: 15rpx 0 15rpx 30rpx;
						}

						::v-deep li {
							margin: 10rpx 0;
							line-height: 1.6;
						}

						// 加载状态样式
						.loading {
							text-align: center;
							padding: 50rpx 0;
							color: #666;
							font-size: 26rpx;
						}
					}
				}
			}
		}

		.static-footer {
			position: fixed;
			bottom: 0;
			width: 100%;
		}
	}

	* {
		box-sizing: border-box;
	}
</style>