qimaohong
/
deepChartVueApp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
194 Commits
10 Branches
0 Tags
30 MiB
 
 
 
 
 
Tree: 26f9d15952
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from '26f9d15952'
${ noResults }
deepChartVueApp/pages/deepExploration/MainForceActions.vue

900 lines
18 KiB
Raw Blame History

<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
} 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 = () => {
console.log('搜索参数：', stockName.value);
if (currentIndex.value == 0) {
handleModel(0)
} else if (currentIndex.value == 1) {
console.log(index);
handleModel(1)
} else if (currentIndex.value == 2) {
console.log(index);
handleModel(2)
} else if (currentIndex.value == 3) {
console.log(index);
handleModel(3)
} else {
uni.showToast({
title: '请选择模块',
icon: 'none',
duration: 2000
})
}
}
//点击四大模块
const handleModel = (index) => {
currentIndex.value = index
if (currentIndex.value == 0) {
console.log(index);
handleTrack()
} else if (currentIndex.value == 1) {
console.log(index);
handleRadar()
} else if (currentIndex.value == 2) {
console.log(index);
handleDecode()
} else if (currentIndex.value == 3) {
console.log(index);
handleCapitalFlow()
}
}
const stockName = ref('')
const searchName = ref('')
const stockCode = ref('')
const language = ref('')
const recordId = ref('')
const parentId = ref('')
const stockId = 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({
renderer: new marked.Renderer(),
highlight: null, // 如果需要代码高亮，可以设置适当的函数
langPrefix: "language-",
pedantic: false,
gfm: true,
breaks: false,
sanitize: false,
smartLists: true,
smartypants: false,
xhtml: false,
});
//点击主力追踪
const handleTrack = 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){
// }
// const result = await getModel1First({
// content: searchName.value,
// language: "cn",
// marketList: "hk,cn,usa,my,sg,vi,in,gb",
// model: 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
// }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 handleRadar = () => {
}
//点击主力解码
const handleDecode = () => {
}
//点击主力资金流
const handleCapitalFlow = () => {
}
const handleDefault = async()=>{
}
// 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>