cqxqgtech/k-line
5
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: cqxqgtech:main
Branches Tags
cqxqgtech:main
cqxqgtech:vscode
cqxqgtech:develop
..
compare: cqxqgtech:develop
Branches Tags
cqxqgtech:vscode
cqxqgtech:main
cqxqgtech:develop

No commits in common. "main" and "develop" have entirely different histories.
main ... develop

15 changed files with 401 additions and 198 deletions
Show Stats Expand all files Collapse all files

33
README.md
View File

@ -1,32 +1,33 @@
![1739434163442](images/README/1739434163442.png) # asideviewts
![1739434039385](images/README/1739434039385.png) This template should help get you started developing with Vue 3 in Vite.
## 项目依赖安装 ## Recommended IDE Setup
[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur).
## Type Support for `.vue` Imports in TS
TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) to make the TypeScript language service aware of `.vue` types.
## Customize configuration
See [Vite Configuration Reference](https://vite.dev/config/).
## Project Setup
```sh ```sh
npm install npm install
``` ```
### 运行项目 ### Compile and Hot-Reload for Development
```sh ```sh
npm run dev npm run dev
``` ```
### 项目打包 ### Type-Check, Compile and Minify for Production
```sh ```sh
npm run build npm run build
``` ```
## 说明
node 版本：20.13.1
vue 版本：3.5.13
安装之前，先检查版本。
要想运行出来，还得依赖后端代码。后端代码上传到了 wance_data 仓库的 wance 分支。数据接口逻辑在 src/akshare_data/router.py 文件中。接口在 apifox 里面也有相应的说明。仅供参考。
后端代码的 python 版本选择 3.11.x 版本，不然有些库无法正常安装使用。

BIN
images/README/1739434039385.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 657 KiB

BIN
images/README/1739434163442.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 602 KiB

3
index.html
View File

@ -4,13 +4,12 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<link rel="icon" href="/favicon.ico"> <link rel="icon" href="/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>股票信息</title> <title>Vite App</title>
<style> <style>
body{ body{
margin: 0; margin: 0;
padding: 0; padding: 0;
overflow: hidden; overflow: hidden;
background-color: var(--my-common-bgc-2);
} }
</style> </style>
</head> </head>

63
src/assets/base.css
View File

@ -36,3 +36,66 @@
--my-light-fc-2: #414040; --my-light-fc-2: #414040;
} }
/* semantic color variables for this project */
/* :root {
--color-background: var(--vt-c-white);
--color-background-soft: var(--vt-c-white-soft);
--color-background-mute: var(--vt-c-white-mute);
--color-border: var(--vt-c-divider-light-2);
--color-border-hover: var(--vt-c-divider-light-1);
--color-heading: var(--vt-c-text-light-1);
--color-text: var(--vt-c-text-light-1);
--section-gap: 160px;
}
@media (prefers-color-scheme: dark) {
:root {
--color-background: var(--vt-c-black);
--color-background-soft: var(--vt-c-black-soft);
--color-background-mute: var(--vt-c-black-mute);
--color-border: var(--vt-c-divider-dark-2);
--color-border-hover: var(--vt-c-divider-dark-1);
--color-heading: var(--vt-c-text-dark-1);
--color-text: var(--vt-c-text-dark-2);
}
}
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
font-weight: normal;
}
body {
min-height: 100vh;
color: var(--color-text);
background: var(--color-background);
transition:
color 0.5s,
background-color 0.5s;
line-height: 1.6;
font-family:
Inter,
-apple-system,
BlinkMacSystemFont,
'Segoe UI',
Roboto,
Oxygen,
Ubuntu,
Cantarell,
'Fira Sans',
'Droid Sans',
'Helvetica Neue',
sans-serif;
font-size: 15px;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
} */

42
src/endnew/NewStyleDesign.vue
View File

@ -182,6 +182,7 @@ let chartConfigs = ref([
name: 'MACD', name: 'MACD',
type: 'bar', type: 'bar',
barWidth: '1', barWidth: '1',
// symbol: 'none',
data: [], data: [],
}, },
], ],
@ -218,6 +219,7 @@ let chartConfigs = ref([
}, },
yAxis: { yAxis: {
type: 'value', type: 'value',
// splitNumber: 3 ,
interval: 10, interval: 10,
}, },
series: [ series: [
@ -269,6 +271,15 @@ let chartConfigs = ref([
data: [], data: [],
symbol: 'none', symbol: 'none',
smooth: true, smooth: true,
// lineStyle: {
// width: 1,
// },
// areaStyle: {
// opacity: 0.5,
// },
// itemStyle: {
// color: 'rgba(0,128,255,1)',
// },
}, },
{ {
name: 'D', name: 'D',
@ -276,6 +287,15 @@ let chartConfigs = ref([
data: [], data: [],
symbol: 'none', symbol: 'none',
smooth: true, smooth: true,
// lineStyle: {
// width: 1,
// },
// areaStyle: {
// opacity: 0.5,
// },
// itemStyle: {
// color: 'rgba(0,128,255,1)',
// },
}, },
{ {
name: 'J', name: 'J',
@ -283,6 +303,15 @@ let chartConfigs = ref([
data: [], data: [],
symbol: 'none', symbol: 'none',
smooth: true, smooth: true,
// lineStyle: {
// width: 1,
// },
// areaStyle: {
// opacity: 0.5,
// },
// itemStyle: {
// color: 'rgba(0,128,255,1)',
// },
}, },
], ],
}, },
@ -1668,6 +1697,17 @@ onBeforeUnmount(() => {
></div> ></div>
</div> </div>
</div> </div>
<!-- 底部的各个图表选项信息 -->
<!-- <ul class="typelist">
<li
v-for="(item, index) in chartConfigs"
:key="index"
@click="addChart(item)"
>
{{ item.name }}
</li>
</ul> -->
</div> </div>
</template> </template>
@ -1689,7 +1729,7 @@ onBeforeUnmount(() => {
} }
.newk{ .newk{
flex: 2; flex: 2;
border-bottom: 1px solid rgb(190, 187, 187); border: 1px solid rgb(190, 187, 187);
} }
.newd{ .newd{
flex: 2; flex: 2;

59
src/router/index.ts
View File

@ -1,4 +1,7 @@
import { createRouter, createWebHashHistory } from 'vue-router' import { createRouter, createWebHashHistory } from 'vue-router';
// const route = useRoute();
const router = createRouter({ const router = createRouter({
history: createWebHashHistory(import.meta.env.BASE_URL), history: createWebHashHistory(import.meta.env.BASE_URL),
@ -6,8 +9,8 @@ const router = createRouter({
{ {
path: '/', path: '/',
name: 'root', name: 'root',
redirect: '/thenew', redirect: '/thenew', // 默认重定向到 /thenew
component: () => import('@/views/TheNewView.vue'), component: () => import('@/views/TheNewView.vue'), // 顶级路由组件
children: [ children: [
{ {
path: 'thenew', path: 'thenew',
@ -18,63 +21,43 @@ const router = createRouter({
{ {
path: 'hour-line', path: 'hour-line',
name: 'hour-line', name: 'hour-line',
component: () => import('@/end/NewDesign.vue'), component: () => import('@/end/NewDesign.vue') // 嵌套子路由
}, },
{ {
path: 'hour-line2', path: 'hour-line2',
name: 'hour-line2', name: 'hour-line2',
component: () => import('@/endnew/NewStyleDesign.vue'), component: () => import('@/endnew/NewStyleDesign.vue') // 嵌套子路由
}, },
{ {
path: 'day-line', path: 'day-line',
name: 'day-line', name: 'day-line',
component: () => import('@/end/NodataView.vue'), component: () => import('@/end/NodataView.vue') // 嵌套子路由
},
{
path: 'day-line2',
name: 'day-line2',
component: () => import('@/end/NodataView.vue'),
}, },
{ {
path: 'week-line', path: 'week-line',
name: 'week-line', name: 'week-line',
component: () => import('@/end/NodataView.vue'), component: () => import('@/end/NodataView.vue') // 嵌套子路由
},
{
path: 'week-line2',
name: 'week-line2',
component: () => import('@/end/NodataView.vue'),
}, },
{ {
path: 'month-line', path: 'month-line',
name: 'month-line', name: 'month-line',
component: () => import('@/end/NodataView.vue'), component: () => import('@/end/NodataView.vue') // 嵌套子路由
},
{
path: 'month-line2',
name: 'month-line2',
component: () => import('@/end/NodataView.vue'),
}, },
{ {
path: 'year-line', path: 'year-line',
name: 'year-line', name: 'year-line',
component: () => import('@/end/NodataView.vue'), component: () => import('@/end/NodataView.vue') // 嵌套子路由
},
{
path: 'year-line2',
name: 'year-line2',
component: () => import('@/end/NodataView.vue'),
}, },
{ {
path: 'nodata', path: 'nodata',
name: 'nodata', name: 'nodata',
component: () => import('@/end/NodataView.vue'), component: () => import('@/end/NodataView.vue') // 嵌套子路由
}, }
], ]
}, }
], ]
}, }
], ]
}) });
export default router export default router;

5
src/store/index.ts Normal file
View File

@ -0,0 +1,5 @@
import { createPinia } from "pinia";
const pinia = createPinia()
export default pinia

0
src/store/usestylestore.ts Normal file
View File

20
src/store/usethemestore.ts
View File

@ -1,12 +1,30 @@
import { defineStore } from 'pinia' import { defineStore } from 'pinia'
//数组处理
const useTheme = defineStore("Theme", { const useTheme = defineStore("Theme", {
state: () => ({ state: () => ({
theme: false, theme: false,
fontcolor:'#fff', fontcolor:'#fff',
style:'vertical' style:'vertical'
}), }),
actions: { } actions: {
toggleFontcolor(){
if(this.theme){
this.fontcolor = '#000'
}else{
this.fontcolor = '#fff'
}
},
toggleDarkTheme(){
this.theme = false
},
optionConfigData () {
}
}
}) })
export default useTheme export default useTheme

2
src/uilts/vscode.ts Normal file
View File

@ -0,0 +1,2 @@
// @ts-ignore
// export const vscode= window.acquireVsCodeApi();

2
src/utils/vscode.ts Normal file
View File

@ -0,0 +1,2 @@
// @ts-ignore
// export const vscode= window.acquireVsCodeApi();

46
src/views/HomeView.vue
View File

@ -55,13 +55,7 @@ const gridFunc = () => {
onMounted(() => { onMounted(() => {
watch(() => props.message, (news,old) => { watch(() => props.message, (news,old) => {
routerViewKey.value = routerViewKey.value + 1 routerViewKey.value = routerViewKey.value + 1
if(style.value === 'vertical'){ router.push(`/thenew/hour-line`)
router.push(`/thenew/hour-line`)
}
if(style.value === 'grid'){
router.push(`/thenew/hour-line2`)
}
activeIndex.value = 0 activeIndex.value = 0
}) })
}) })
@ -72,6 +66,15 @@ const headerData = ref([
'月K', '月K',
'季K', '季K',
'年K', '年K',
// '1分',
// '3分',
// '5分',
// '15分',
// '30分',
// '1小时',
// '2小时',
// '3小时',
// '4小时',
]) ])
// 模拟路由数据 // 模拟路由数据
let routerList = [ let routerList = [
@ -81,29 +84,14 @@ let routerList = [
'month-line', 'month-line',
'year-line', 'year-line',
] ]
// 模拟路由数据
let routerLists = [
'hour-line2',
'day-line2',
'week-line2',
'month-line2',
'year-line2',
]
// 定义一个响应式变量来存储当前激活的项的索引 // 定义一个响应式变量来存储当前激活的项的索引
const activeIndex = ref(0) const activeIndex = ref(0)
// 定义一个处理点击事件的函数 // 定义一个处理点击事件的函数
function handleClick(index) { function handleClick(index) {
// 更新当前激活的项的索引 // 更新当前激活的项的索引
activeIndex.value = index activeIndex.value = index
if(style.value === 'vertical'){ // 跳转路由
// 跳转路由 router.push(`/thenew/${routerList[index]}`)
router.push(`/thenew/${routerList[index]}`)
}
if(style.value === 'grid'){
// 跳转路由
router.push(`/thenew/${routerLists[index]}`)
}
} }
</script> </script>
@ -128,6 +116,7 @@ function handleClick(index) {
<div v-else> <div v-else>
<svg t="1739345471358" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7366" width="16" height="16"><path d="M85.333333 128h853.333334v768H85.333333V128z m85.333334 85.333333v597.333334h682.666666V384h-341.333333V213.333333H170.666667z" p-id="7367" fill="#ffffff"></path></svg> <svg t="1739345471358" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7366" width="16" height="16"><path d="M85.333333 128h853.333334v768H85.333333V128z m85.333334 85.333333v597.333334h682.666666V384h-341.333333V213.333333H170.666667z" p-id="7367" fill="#ffffff"></path></svg>
</div> </div>
<!-- <svg t="1737685184492" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1032" width="16" height="16"><path d="M831.085714 896h-612.571428V437.028571l-118.857143-118.857142 201.142857-201.142858 10.057143 10.057143c113.371429 113.371429 298.057143 113.371429 412.342857 0l10.057143-10.057143L950.857143 334.628571l-118.857143 118.857143V896z m-585.142857-27.428571h557.714286V441.6l106.971428-106.971429L732.342857 155.428571C610.742857 266.971429 423.314286 266.971429 301.714286 155.428571L138.057143 318.171429l106.971428 106.971428V868.571429z" fill="#2c2c2c" p-id="1033"></path></svg> -->
</span> </span>
<template #dropdown> <template #dropdown>
<el-dropdown-menu> <el-dropdown-menu>
@ -168,6 +157,7 @@ function handleClick(index) {
<div v-else> <div v-else>
<svg t="1737685184492" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1032" width="16" height="16"><path d="M831.085714 896h-612.571428V437.028571l-118.857143-118.857142 201.142857-201.142858 10.057143 10.057143c113.371429 113.371429 298.057143 113.371429 412.342857 0l10.057143-10.057143L950.857143 334.628571l-118.857143 118.857143V896z m-585.142857-27.428571h557.714286V441.6l106.971428-106.971429L732.342857 155.428571C610.742857 266.971429 423.314286 266.971429 301.714286 155.428571L138.057143 318.171429l106.971428 106.971428V868.571429z" fill="#ffffff" p-id="1033"></path></svg> <svg t="1737685184492" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1032" width="16" height="16"><path d="M831.085714 896h-612.571428V437.028571l-118.857143-118.857142 201.142857-201.142858 10.057143 10.057143c113.371429 113.371429 298.057143 113.371429 412.342857 0l10.057143-10.057143L950.857143 334.628571l-118.857143 118.857143V896z m-585.142857-27.428571h557.714286V441.6l106.971428-106.971429L732.342857 155.428571C610.742857 266.971429 423.314286 266.971429 301.714286 155.428571L138.057143 318.171429l106.971428 106.971428V868.571429z" fill="#ffffff" p-id="1033"></path></svg>
</div> </div>
<!-- <svg t="1737685184492" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1032" width="16" height="16"><path d="M831.085714 896h-612.571428V437.028571l-118.857143-118.857142 201.142857-201.142858 10.057143 10.057143c113.371429 113.371429 298.057143 113.371429 412.342857 0l10.057143-10.057143L950.857143 334.628571l-118.857143 118.857143V896z m-585.142857-27.428571h557.714286V441.6l106.971428-106.971429L732.342857 155.428571C610.742857 266.971429 423.314286 266.971429 301.714286 155.428571L138.057143 318.171429l106.971428 106.971428V868.571429z" fill="#2c2c2c" p-id="1033"></path></svg> -->
</span> </span>
<template #dropdown> <template #dropdown>
<el-dropdown-menu> <el-dropdown-menu>
@ -176,7 +166,7 @@ function handleClick(index) {
<el-tooltip <el-tooltip
class="box-item" class="box-item"
effect="light" effect="light"
content="明亮" content="Light"
placement="left" placement="left"
> >
<svg t="1737685432082" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3218" width="16" height="16"><path d="M504.832 144h24.08c6.608 0 11.952 4.48 11.952 9.984v80.208c0 5.504-5.344 9.984-11.952 9.984h-24.08c-6.608 0-11.968-4.48-11.968-9.984V153.984c0-5.52 5.36-9.984 11.968-9.984z m10.304 541.92c96.432 0 174.608-78.176 174.608-174.608 0-96.448-78.176-174.624-174.608-174.624S340.528 414.88 340.528 511.312c0 96.432 78.176 174.608 174.608 174.608z m0 48c-122.944 0-222.608-99.68-222.608-222.608 0-122.944 99.664-222.624 222.608-222.624s222.608 99.68 222.608 222.624c0 122.928-99.68 222.608-222.608 222.608z m-10.24-355.792a9.52 9.52 0 0 1 10.24 9.488v247.2a9.696 9.696 0 0 1-10.448 9.648 133.584 133.584 0 0 1 0.208-266.336z m263.184-135.056l17.024 17.024c4.672 4.672 5.28 11.632 1.376 15.536L729.6 332.512c-3.904 3.904-10.864 3.296-15.52-1.376l-17.04-17.024c-4.672-4.672-5.28-11.632-1.376-15.552l56.88-56.864c3.904-3.92 10.864-3.296 15.52 1.376z m110.528 261.76v24.08c0 6.608-4.48 11.952-9.984 11.952h-80.208c-5.504 0-9.984-5.344-9.984-11.952v-24.08c0-6.608 4.48-11.968 9.984-11.968h80.208c5.52 0 9.984 5.36 9.984 11.968z m-93.504 257.68l-17.024 17.024c-4.672 4.672-11.632 5.28-15.536 1.376l-56.88-56.864c-3.904-3.92-3.296-10.88 1.376-15.536l17.024-17.04c4.672-4.672 11.632-5.28 15.536-1.376l56.88 56.88c3.92 3.904 3.296 10.88-1.376 15.536z m-256.192 116.096h-24.08c-6.608 0-11.968-4.48-11.968-9.984v-80.208c0-5.504 5.36-9.984 11.968-9.984h24.08c6.608 0 11.952 4.48 11.952 9.984v80.208c0 5.52-5.344 9.984-11.952 9.984z m-268.528-100.448l-14.272-14.272a10.016 10.016 0 0 1 0-14.16l56.88-56.88a10.016 10.016 0 0 1 14.16 0l14.272 14.272a10.016 10.016 0 0 1 0 14.176l-56.864 56.864a10.016 10.016 0 0 1-14.176 0zM144 528.912v-24.08c0-6.608 4.48-11.968 9.984-11.968h80.208c5.504 0 9.984 5.36 9.984 11.968v24.08c0 6.608-4.48 11.952-9.984 11.952H153.984c-5.52 0-9.984-5.344-9.984-11.952z m104.64-268.8l17.024-17.04c4.672-4.672 11.632-5.28 15.536-1.376l56.88 56.864c3.904 3.92 3.296 10.88-1.376 15.552l-17.04 17.024c-4.672 4.672-11.616 5.28-15.52 1.376l-56.88-56.88c-3.92-3.904-3.296-10.88 1.36-15.52z" fill="#2c2c2c" p-id="3219"></path></svg> <svg t="1737685432082" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3218" width="16" height="16"><path d="M504.832 144h24.08c6.608 0 11.952 4.48 11.952 9.984v80.208c0 5.504-5.344 9.984-11.952 9.984h-24.08c-6.608 0-11.968-4.48-11.968-9.984V153.984c0-5.52 5.36-9.984 11.968-9.984z m10.304 541.92c96.432 0 174.608-78.176 174.608-174.608 0-96.448-78.176-174.624-174.608-174.624S340.528 414.88 340.528 511.312c0 96.432 78.176 174.608 174.608 174.608z m0 48c-122.944 0-222.608-99.68-222.608-222.608 0-122.944 99.664-222.624 222.608-222.624s222.608 99.68 222.608 222.624c0 122.928-99.68 222.608-222.608 222.608z m-10.24-355.792a9.52 9.52 0 0 1 10.24 9.488v247.2a9.696 9.696 0 0 1-10.448 9.648 133.584 133.584 0 0 1 0.208-266.336z m263.184-135.056l17.024 17.024c4.672 4.672 5.28 11.632 1.376 15.536L729.6 332.512c-3.904 3.904-10.864 3.296-15.52-1.376l-17.04-17.024c-4.672-4.672-5.28-11.632-1.376-15.552l56.88-56.864c3.904-3.92 10.864-3.296 15.52 1.376z m110.528 261.76v24.08c0 6.608-4.48 11.952-9.984 11.952h-80.208c-5.504 0-9.984-5.344-9.984-11.952v-24.08c0-6.608 4.48-11.968 9.984-11.968h80.208c5.52 0 9.984 5.36 9.984 11.968z m-93.504 257.68l-17.024 17.024c-4.672 4.672-11.632 5.28-15.536 1.376l-56.88-56.864c-3.904-3.92-3.296-10.88 1.376-15.536l17.024-17.04c4.672-4.672 11.632-5.28 15.536-1.376l56.88 56.88c3.92 3.904 3.296 10.88-1.376 15.536z m-256.192 116.096h-24.08c-6.608 0-11.968-4.48-11.968-9.984v-80.208c0-5.504 5.36-9.984 11.968-9.984h24.08c6.608 0 11.952 4.48 11.952 9.984v80.208c0 5.52-5.344 9.984-11.952 9.984z m-268.528-100.448l-14.272-14.272a10.016 10.016 0 0 1 0-14.16l56.88-56.88a10.016 10.016 0 0 1 14.16 0l14.272 14.272a10.016 10.016 0 0 1 0 14.176l-56.864 56.864a10.016 10.016 0 0 1-14.176 0zM144 528.912v-24.08c0-6.608 4.48-11.968 9.984-11.968h80.208c5.504 0 9.984 5.36 9.984 11.968v24.08c0 6.608-4.48 11.952-9.984 11.952H153.984c-5.52 0-9.984-5.344-9.984-11.952z m104.64-268.8l17.024-17.04c4.672-4.672 11.632-5.28 15.536-1.376l56.88 56.864c3.904 3.92 3.296 10.88-1.376 15.552l-17.04 17.024c-4.672 4.672-11.616 5.28-15.52 1.376l-56.88-56.88c-3.92-3.904-3.296-10.88 1.36-15.52z" fill="#2c2c2c" p-id="3219"></path></svg>
@ -188,7 +178,7 @@ function handleClick(index) {
<el-tooltip <el-tooltip
class="box-item" class="box-item"
effect="light" effect="light"
content="黑暗" content="Dark"
placement="left" placement="left"
> >
<svg t="1737685471806" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3524" width="16" height="16"><path d="M504.832 144h24.08c6.608 0 11.952 4.48 11.952 9.984v80.208c0 5.504-5.344 9.984-11.952 9.984h-24.08c-6.608 0-11.968-4.48-11.968-9.984V153.984c0-5.52 5.36-9.984 11.968-9.984z m263.248 99.072l17.024 17.024c4.672 4.672 5.28 11.632 1.376 15.536L729.6 332.512c-3.904 3.904-10.864 3.296-15.52-1.376l-17.04-17.024c-4.672-4.672-5.28-11.632-1.376-15.552l56.88-56.864c3.904-3.92 10.864-3.296 15.52 1.376z m110.528 261.76v24.08c0 6.608-4.48 11.952-9.984 11.952h-80.208c-5.504 0-9.984-5.344-9.984-11.952v-24.08c0-6.608 4.48-11.968 9.984-11.968h80.208c5.52 0 9.984 5.36 9.984 11.968z m-93.504 257.68l-17.024 17.024c-4.672 4.672-11.632 5.28-15.536 1.376l-56.88-56.864c-3.904-3.92-3.296-10.88 1.376-15.536l17.024-17.04c4.672-4.672 11.632-5.28 15.536-1.376l56.88 56.88c3.92 3.904 3.296 10.88-1.376 15.536z m-256.192 116.096h-24.08c-6.608 0-11.968-4.48-11.968-9.984v-80.208c0-5.504 5.36-9.984 11.968-9.984h24.08c6.608 0 11.952 4.48 11.952 9.984v80.208c0 5.52-5.344 9.984-11.952 9.984z m-268.528-100.448l-14.272-14.272a10.016 10.016 0 0 1 0-14.16l56.88-56.88a10.016 10.016 0 0 1 14.16 0l14.272 14.272a10.016 10.016 0 0 1 0 14.176l-56.864 56.864a10.016 10.016 0 0 1-14.176 0zM144 528.912v-24.08c0-6.608 4.48-11.968 9.984-11.968h80.208c5.504 0 9.984 5.36 9.984 11.968v24.08c0 6.608-4.48 11.952-9.984 11.952H153.984c-5.52 0-9.984-5.344-9.984-11.952z m104.64-268.8l17.024-17.04c4.672-4.672 11.632-5.28 15.536-1.376l56.88 56.864c3.904 3.92 3.296 10.88-1.376 15.552l-17.04 17.024c-4.672 4.672-11.616 5.28-15.52 1.376l-56.88-56.88c-3.92-3.904-3.296-10.88 1.36-15.52zM515.12 685.92c96.432 0 174.608-78.176 174.608-174.608 0-96.448-78.176-174.624-174.608-174.624S340.528 414.88 340.528 511.312c0 96.432 78.176 174.608 174.608 174.608z m0 48c-122.944 0-222.608-99.68-222.608-222.608 0-122.944 99.664-222.624 222.608-222.624s222.608 99.68 222.608 222.624c0 122.928-99.68 222.608-222.608 222.608zM478.288 427.52a82.8 82.8 0 0 0-1.68 16.64c0 43.936 34.32 79.552 76.64 79.552a74.624 74.624 0 0 0 48.544-17.984c4.544-3.872 14.72-2.4 15.392 3.184 0.592 4.848 0.896 9.792 0.896 14.8 0 64.224-50.144 116.272-112 116.272s-112-52.048-112-116.272c0-48.064 28.096-89.312 68.176-107.024 6.976-3.088 17.312 4.576 16.032 10.832z" fill="#2c2c2c" p-id="3525"></path></svg> <svg t="1737685471806" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3524" width="16" height="16"><path d="M504.832 144h24.08c6.608 0 11.952 4.48 11.952 9.984v80.208c0 5.504-5.344 9.984-11.952 9.984h-24.08c-6.608 0-11.968-4.48-11.968-9.984V153.984c0-5.52 5.36-9.984 11.968-9.984z m263.248 99.072l17.024 17.024c4.672 4.672 5.28 11.632 1.376 15.536L729.6 332.512c-3.904 3.904-10.864 3.296-15.52-1.376l-17.04-17.024c-4.672-4.672-5.28-11.632-1.376-15.552l56.88-56.864c3.904-3.92 10.864-3.296 15.52 1.376z m110.528 261.76v24.08c0 6.608-4.48 11.952-9.984 11.952h-80.208c-5.504 0-9.984-5.344-9.984-11.952v-24.08c0-6.608 4.48-11.968 9.984-11.968h80.208c5.52 0 9.984 5.36 9.984 11.968z m-93.504 257.68l-17.024 17.024c-4.672 4.672-11.632 5.28-15.536 1.376l-56.88-56.864c-3.904-3.92-3.296-10.88 1.376-15.536l17.024-17.04c4.672-4.672 11.632-5.28 15.536-1.376l56.88 56.88c3.92 3.904 3.296 10.88-1.376 15.536z m-256.192 116.096h-24.08c-6.608 0-11.968-4.48-11.968-9.984v-80.208c0-5.504 5.36-9.984 11.968-9.984h24.08c6.608 0 11.952 4.48 11.952 9.984v80.208c0 5.52-5.344 9.984-11.952 9.984z m-268.528-100.448l-14.272-14.272a10.016 10.016 0 0 1 0-14.16l56.88-56.88a10.016 10.016 0 0 1 14.16 0l14.272 14.272a10.016 10.016 0 0 1 0 14.176l-56.864 56.864a10.016 10.016 0 0 1-14.176 0zM144 528.912v-24.08c0-6.608 4.48-11.968 9.984-11.968h80.208c5.504 0 9.984 5.36 9.984 11.968v24.08c0 6.608-4.48 11.952-9.984 11.952H153.984c-5.52 0-9.984-5.344-9.984-11.952z m104.64-268.8l17.024-17.04c4.672-4.672 11.632-5.28 15.536-1.376l56.88 56.864c3.904 3.92 3.296 10.88-1.376 15.552l-17.04 17.024c-4.672 4.672-11.616 5.28-15.52 1.376l-56.88-56.88c-3.92-3.904-3.296-10.88 1.36-15.52zM515.12 685.92c96.432 0 174.608-78.176 174.608-174.608 0-96.448-78.176-174.624-174.608-174.624S340.528 414.88 340.528 511.312c0 96.432 78.176 174.608 174.608 174.608z m0 48c-122.944 0-222.608-99.68-222.608-222.608 0-122.944 99.664-222.624 222.608-222.624s222.608 99.68 222.608 222.624c0 122.928-99.68 222.608-222.608 222.608zM478.288 427.52a82.8 82.8 0 0 0-1.68 16.64c0 43.936 34.32 79.552 76.64 79.552a74.624 74.624 0 0 0 48.544-17.984c4.544-3.872 14.72-2.4 15.392 3.184 0.592 4.848 0.896 9.792 0.896 14.8 0 64.224-50.144 116.272-112 116.272s-112-52.048-112-116.272c0-48.064 28.096-89.312 68.176-107.024 6.976-3.088 17.312 4.576 16.032 10.832z" fill="#2c2c2c" p-id="3525"></path></svg>
@ -208,13 +198,16 @@ function handleClick(index) {
<style scoped> <style scoped>
.content { .content {
/* width: 100vw; */
height: 100vh; height: 100vh;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
box-sizing: border-box; box-sizing: border-box;
} }
.timelist { .timelist {
/* background-color: white; */
background-color: var(--my-common-bgc-2) !important; background-color: var(--my-common-bgc-2) !important;
/* color: #414040; */
color: var(--my-common-fc-1); color: var(--my-common-fc-1);
font-size: 13px; font-size: 13px;
display: flex; display: flex;
@ -231,6 +224,7 @@ function handleClick(index) {
} }
.timelist > li:nth-child(6){ .timelist > li:nth-child(6){
margin-left: auto; margin-left: auto;
/* margin-right: 10px; */
} }
.active { .active {

322
src/views/TheNewView.vue
View File

@ -5,21 +5,15 @@ import { Edit, Plus, Delete, View, Hide,Operation } from '@element-plus/icons-vu
import { ElMessageBox, ElTable, ElMessage, ElLoading } from 'element-plus' import { ElMessageBox, ElTable, ElMessage, ElLoading } from 'element-plus'
import type { CollapseModelValue } from 'element-plus' import type { CollapseModelValue } from 'element-plus'
import axios from 'axios' import axios from 'axios'
// import { vscode } from './uilts/vscode'
import { RouterView } from 'vue-router'
import HomeView from './HomeView.vue' import HomeView from './HomeView.vue'
const message = ref(''); // 用于存储要发送的消息 const message = ref(''); // 用于存储要发送的消息
const klineIframe = ref<HTMLIFrameElement | null>(null); // 引用 iframe 元素
// --------------------后台数据-------------- // --------------------后台数据--------------
/**
* 请求后端接口数据，侧边栏的信息，当前是获取指定用户的信息。与万策页面是关联的，用户登录过后，可在
* 万策页面进行保存筛选条件（保存的是一个请求参数），可在数据库的user_strategy表中查看。
* 通过https://wance.cqxqg.tech/api/v1/strategy/getStockPageList接口发送请求得到相关股票数据。
* 后端的逻辑处理可在src/akshare_data/router.py文件中查看。
* 由于user_strategy表中的信息仅仅是请求参数，对我在后续中对分组管理操作无法对接，所以我将请求返回来的数据进行存储在
* 新的一个数据库表中，名为new_user_strategy的数据库表中。
* 最后通过新的接口，得到股票数据，显示在侧边栏中。
* 下面代码的逻辑大致就是这样。
*/
axios({ axios({
url: 'http://127.0.0.1:8012/akshare/userstrategy', url: 'http://127.0.0.1:8012/akshare/userstrategy',
method: 'get', method: 'get',
@ -59,7 +53,7 @@ axios({
} }
) )
.then((res) => { .then((res) => {
// console.log(res.data.data.list) console.log(res.data.data.list)
let nowdata = res.data.data.list let nowdata = res.data.data.list
let opt = [] let opt = []
@ -127,6 +121,9 @@ axios({
}) })
const activeNames = ref(['0']) const activeNames = ref(['0'])
const handleChange = (val: string[]) => {
console.log(val)
}
const showChangeVisible = ref(true) const showChangeVisible = ref(true)
@ -143,17 +140,14 @@ const handleClose = (done: () => void) => {
.then(() => { .then(() => {
done() done()
}) })
.catch(() => {}) .catch(() => {
// catch error
})
} }
// -------------------股票信息------------------------------- // -------------------股票信息-------------------------------
/**
* 股票信息，通过axios请求后端接口，得到股票信息，并保存在stocktypes.value中。
* stocktypes.value是一个数组，数组中的每个元素都是一个对象，对象中包含股票的信息，
* 包括股票的id、label、value、state、info等属性。
* stocktypes.value是一个数组，数组中的每个元素都是一个对象，对象中包含股票的信息，
* 包括股票的id、label、value、state、info等属性。
*/
interface StockType { interface StockType {
id?: string id?: string
label: string label: string
@ -165,11 +159,6 @@ interface StockType {
let cacheinfo = ref<Equity[]>([]) let cacheinfo = ref<Equity[]>([])
/**
* 固定分类，始终有港股、美股、沪深等分类。
* stocktypes.value是一个数组，数组中的每个元素都是一个对象，对象中包含股票的信息，
* 包括股票的id、label、value、state、info等属性。
*/
let stocktypes = ref<StockType[]>([ let stocktypes = ref<StockType[]>([
{ {
id: '1', id: '1',
@ -193,36 +182,36 @@ let stocktypes = ref<StockType[]>([
info: [], info: [],
} }
]) ])
axios({
const fetchData = async () => { url: 'http://127.0.0.1:8012/akshare/ganggudata',
const urls = [ method: 'get',
'http://127.0.0.1:8012/akshare/ganggudata', }).then((res) => {
'http://127.0.0.1:8012/akshare/meigudata', stocktypes.value[0].info = res.data
'http://127.0.0.1:8012/akshare/hushendata' cacheinfo.value.push(res.data)
]; })
axios({
try { url: 'http://127.0.0.1:8012/akshare/meigudata',
const responses = await Promise.all(urls.map(url => axios.get(url))); method: 'get',
responses.forEach((res, index) => { }).then((res) => {
stocktypes.value[index].info = res.data; stocktypes.value[1].info = res.data
cacheinfo.value.push(res.data); cacheinfo.value.push(res.data)
}); })
} catch (error) { axios({
console.error('Error fetching data:', error); url: 'http://127.0.0.1:8012/akshare/hushendata',
} method: 'get',
}; }).then((res) => {
stocktypes.value[2].info = res.data
fetchData(); cacheinfo.value.push(res.data)
})
// --------------------切换是否可见-------------------------- // --------------------切换是否可见--------------------------
const changestate = (item: any) => { const changestate = (item: any) => {
item.state = !item.state item.state = !item.state
// console.log(item.state)
} }
let asideshow = computed(() => { let asideshow = computed(() => {
// console.log(stocktypes.value)
return stocktypes.value.filter((item) => item.state) return stocktypes.value.filter((item) => item.state)
}) })
@ -240,7 +229,7 @@ interface Equity {
// ---------------------往info数组里面加股票数据------------------- // ---------------------往info数组里面加股票数据-------------------
const inputhandle = ref('') const inputhandle = ref('')
const filterTableData = computed(() =>{ const filterTableData = computed(() =>{
let newarr = cacheinfo.value.flat(); let newarr = cacheinfo.value.flat(); // 使用 flat 方法将多维数组展平
return newarr.filter( return newarr.filter(
(data) => (data) =>
!inputhandle.value || !inputhandle.value ||
@ -250,9 +239,13 @@ const filterTableData = computed(() =>{
}) })
// 添加新股票完成 // 添加新股票完成
const handleEdit = (index: number, row: Equity) => { const handleEdit = (index: number, row: Equity) => {
console.log(index, row)
stocklog.value?.info.push(row) stocklog.value?.info.push(row)
// 添加后移除，也可以不移除 // 添加后移除，也可以不移除
// tableData2.value = tableData2.value.filter((data) => data.code !== row.code) // tableData2.value = tableData2.value.filter((data) => data.code !== row.code)
let mes = myitems.value[index] || '' let mes = myitems.value[index] || ''
// 存在自己的数据库表中 // 存在自己的数据库表中
let newpostparam = { let newpostparam = {
@ -261,6 +254,7 @@ const handleEdit = (index: number, row: Equity) => {
message: [mes], message: [mes],
info: showdata.value, info: showdata.value,
} }
axios.post('http://127.0.0.1:8012/akshare/newupdata', newpostparam) axios.post('http://127.0.0.1:8012/akshare/newupdata', newpostparam)
} }
@ -517,41 +511,65 @@ let kindofstock = ref()
const clickTypeState = (val: CollapseModelValue) => { const clickTypeState = (val: CollapseModelValue) => {
kindofstock.value = val kindofstock.value = val
} }
// 定义一个URL映射对象
const stockUrls = {
'港股': 'http://127.0.0.1:8012/akshare/ganggudataK',
'美股': 'http://127.0.0.1:8012/akshare/meigudataK',
'沪深': 'http://127.0.0.1:8012/akshare/hushendataK'
} as any;
// 定义一个通用的发送请求的函数
const fetchStockData = (url: string, symbol: string, startDate: string, endDate: string) => {
axios({
url: url,
method: 'get',
params: {
symbol: symbol,
start_date: startDate,
end_date: endDate
},
}).then((res) => {
console.log('数据传输成功');
}).catch(error => {
console.error('请求失败，请检查URL是否正确或稍后重试。', error);
});
};
const chioseStock = (item: any) => { const chioseStock = (item: any) => {
message.value = item.code; // 设置消息内容
const stockType = kindofstock.value;
const url = stockUrls[stockType];
if (url) { // vscode.postMessage({
fetchStockData(url, item.code, '2023-01-01', getDate()); // command: 'showkline',
} else { // text: item.code,
console.error('未找到对应的股票类型'); // })
// window.postMessage(item.code,'*'); // 发送消息
// 如果需要与 iframe 中的内容交互，可以通过 postMessage 发送消息
// if (klineIframe.value && klineIframe.value.contentWindow) {
// klineIframe.value.contentWindow.postMessage(
// { type: 'SHOW_KLINE', data: item.code },
// '*' // 目标 origin，设置为 '*' 表示不限制
// );
// }
message.value = item.code; // 设置消息内容
if(kindofstock.value == '港股'){
axios({
url: 'http://127.0.0.1:8012/akshare/ganggudataK',
method: 'get',
params: {
symbol: item.code,
start_date: '2023-01-01',
end_date: getDate()
},
}).then((res) => {
console.log('数据传输成功')
})
} }
}; else if(kindofstock.value == '美股'){
axios({
url: 'http://127.0.0.1:8012/akshare/meigudataK',
method: 'get',
params: {
symbol: item.code,
start_date: '2023-01-01',
end_date: getDate()
},
}).then((res) => {
console.log('数据传输成功')
})
}
else if(kindofstock.value == '沪深'){
axios({
url: 'http://127.0.0.1:8012/akshare/hushendataK',
method: 'get',
params: {
symbol: item.code,
start_date: '2023-01-01',
end_date: getDate()
},
}).then((res) => {
console.log('数据传输成功')
})
}
}
// --------------------------------------------- // ---------------------------------------------
// -------------------------------更新日期----------------------------------------- // -------------------------------更新日期-----------------------------------------
const getDate = () => { const getDate = () => {
@ -563,47 +581,106 @@ const getDate = () => {
return formattedDate return formattedDate
} }
// 定义一个URL映射对象 const sendmessage = (content: any) => {
const urls = {
hs300: 'http://127.0.0.1:8012/akshare/stock',
zz500: 'http://127.0.0.1:8012/akshare/stock',
sse: 'http://127.0.0.1:8012/akshare/stock',
szse: 'http://127.0.0.1:8012/akshare/stock',
zz1000: 'http://127.0.0.1:8012/akshare/stock',
gz2000: 'http://127.0.0.1:8012/akshare/stock',
ganggu: 'http://127.0.0.1:8012/akshare/ganggudataK',
meigu: 'http://127.0.0.1:8012/akshare/meigudataK',
hushen: 'http://127.0.0.1:8012/akshare/hushendataK'
} as any;
const sendmessage = (content: any, url: string) => {
axios({ axios({
url: url, url: 'http://127.0.0.1:8012/akshare/stock',
method: 'get', method: 'get',
params: { params: {
symbol: content.type === 'ganggu' || content.type === 'meigu' || content.type === 'hushen' ? content.code : 'sz' + content.code, symbol: 'sz' + content.code,
start_date: '2023-01-01', start_date: '2023-01-01',
end_date: getDate() end_date: getDate()
}, },
}).then((res) => { }).then((res) => {
console.log('数据传输成功'); console.log('数据传输成功')
}).catch(error => { }).catch(error => {
console.error('请求失败，请检查URL是否正确或稍后重试。', error); console.error(error);
}); });
}; }
const showkline = (content: any) => { const showkline = (content: any) => {
message.value = content.code; // 设置消息内容
// console.log(content);
const url = urls[content.type] || urls['ganggu']; // 默认使用 'ganggu' URL
if (url) { // vscode.postMessage({
sendmessage(content, url); // command: 'showkline',
} else { // text: content.code,
console.error('未找到对应的URL类型'); // })
// window.postMessage(content.code,'*'); // 发送消息
// 如果需要与 iframe 中的内容交互，可以通过 postMessage 发送消息
// if (klineIframe.value && klineIframe.value.contentWindow) {
// klineIframe.value.contentWindow.postMessage(
// { type: 'SHOW_KLINE', data: content.code },
// '*' // 目标 origin，设置为 '*' 表示不限制
// );
// }
message.value = content.code; // 设置消息内容
console.log(content);
if(content.type == "hs300"){
sendmessage(content)
} }
}; if(content.type == "zz500"){
sendmessage(content)
}
if(content.type == "sse"){
sendmessage(content)
}
if(content.type == "szse"){
sendmessage(content)
}
if(content.type == "zz1000"){
sendmessage(content)
}
if(content.type == "gz2000"){
sendmessage(content)
}
if(content.type == "other"){
sendmessage(content)
}
if(content.type == "ganggu"){
axios({
url: 'http://127.0.0.1:8012/akshare/ganggudataK',
method: 'get',
params: {
symbol: content.code,
start_date: '2023-01-01',
end_date: getDate()
},
}).then((res) => {
console.log('数据传输成功')
})
}
if(content.type == "meigu"){
axios({
url: 'http://127.0.0.1:8012/akshare/meigudataK',
method: 'get',
params: {
symbol: content.code,
start_date: '2023-01-01',
end_date: getDate()
},
}).then((res) => {
console.log('数据传输成功')
})
}
if(content.type == "hushen"){
axios({
url: 'http://127.0.0.1:8012/akshare/hushendataK',
method: 'get',
params: {
symbol: content.code,
start_date: '2023-01-01',
end_date: getDate()
},
}).then((res) => {
console.log('数据传输成功')
})
}
}
</script> </script>
<template> <template>
@ -617,6 +694,7 @@ const showkline = (content: any) => {
<div class="all"> <div class="all">
<div class="showchange" @click="handleTitleClick">全部</div> <div class="showchange" @click="handleTitleClick">全部</div>
<div plain @click="dialogVisible = true"> <div plain @click="dialogVisible = true">
<!-- <el-icon><Plus /></el-icon> -->
<el-icon><Operation /></el-icon> <el-icon><Operation /></el-icon>
</div> </div>
@ -905,7 +983,6 @@ const showkline = (content: any) => {
background-color: var(--my-common-bgc-2); background-color: var(--my-common-bgc-2);
position: relative; position: relative;
border-right: 1px solid var(--my-light-br-1); border-right: 1px solid var(--my-light-br-1);
border-left: 1px solid var(--my-light-br-1);
} }
.shape{ .shape{
@ -1056,7 +1133,6 @@ iframe{
:deep(.el-collapse-item__header){ :deep(.el-collapse-item__header){
background-color: var(--my-common-bgc-2) !important; background-color: var(--my-common-bgc-2) !important;
color: var(--my-common-bgc-1); color: var(--my-common-bgc-1);
padding-left: 12px;
} }
.stock1 { .stock1 {
@ -1067,6 +1143,7 @@ iframe{
cursor: pointer; cursor: pointer;
} }
.stock2 { .stock2 {
/* border: 1px solid red; */
flex: 1; flex: 1;
display: flex; display: flex;
justify-content: left; justify-content: left;
@ -1090,6 +1167,7 @@ iframe{
border-radius: 4px; border-radius: 4px;
width: 50px; width: 50px;
text-align: center; text-align: center;
/* padding: 2px; */
} }
.downcolor { .downcolor {
color: rgb(80, 165, 72); color: rgb(80, 165, 72);
@ -1110,13 +1188,31 @@ iframe{
color: var(--my-common-fc-1); color: var(--my-common-fc-1);
} }
:deep(.el-collapse-item__content)::-webkit-scrollbar { :deep(.el-collapse-item__content)::-webkit-scrollbar {
width: 0 !important; width: 0;
} }
/* :deep(.el-collapse-item__content)::-webkit-scrollbar {
width: 5px;
}
:deep(.el-collapse-item__content)::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 6px;
}
:deep(.el-collapse-item__content)::-webkit-scrollbar-thumb {
background: rgba(204, 42, 42,.2);
border-radius: 6px;
} */
:deep(.demo-collapse) { :deep(.demo-collapse) {
padding-left: 0; padding-left: 12px;
} }
.fixed { .fixed {

2
vite.config.ts
View File

@ -17,7 +17,7 @@ export default defineConfig({
}, },
}, },
server: { server: {
open: false, open: true,
proxy: { proxy: {
"/api/v1": { "/api/v1": {
// target: "http://10.1.5.188:8011/", // target: "http://10.1.5.188:8011/",