代码优化整理

README.md

@@ -1,33 +1,25 @@
-# asideviewts
+## 项目依赖安装
-
-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
 npm install
 ```
 
-### Compile and Hot-Reload for Development
+### 运行项目
 
 ```sh
 npm run dev
 ```
 
-### Type-Check, Compile and Minify for Production
+### 项目打包
 
 ```sh
 npm run build
 ```
+
+## 说明
+
+node版本：20.13.1
+
+vue版本：3.5.13
+
+项目无法运行，检查版本。

index.html

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

src/assets/base.css

@@ -36,66 +36,3 @@
   --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;
-} */

src/endnew/NewStyleDesign.vue

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

src/router/index.ts

@@ -1,8 +1,5 @@
 import { createRouter, createWebHashHistory } from 'vue-router';
 
-// const route = useRoute();
-
-
 const router = createRouter({
   history: createWebHashHistory(import.meta.env.BASE_URL),
   routes: [

src/views/TheNewView.vue

@@ -5,15 +5,21 @@ import { Edit, Plus, Delete, View, Hide,Operation } from '@element-plus/icons-vu
 import { ElMessageBox, ElTable, ElMessage, ElLoading } from 'element-plus'
 import type { CollapseModelValue } from 'element-plus'
 import axios from 'axios'
-// import { vscode } from './uilts/vscode'
-import {  RouterView } from 'vue-router'
 
 import HomeView from './HomeView.vue'
 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({
   url: 'http://127.0.0.1:8012/akshare/userstrategy',
   method: 'get',
@@ -53,7 +59,7 @@ axios({
             }
           )
           .then((res) => {
-            console.log(res.data.data.list)
+            // console.log(res.data.data.list)
             let nowdata = res.data.data.list
 
             let opt = []
@@ -121,9 +127,6 @@ axios({
   })
 
 const activeNames = ref(['0'])
-const handleChange = (val: string[]) => {
-  console.log(val)
-}
 
 const showChangeVisible = ref(true)
 
@@ -140,14 +143,17 @@ const handleClose = (done: () => void) => {
     .then(() => {
       done()
     })
-    .catch(() => {
+    .catch(() => {})
-      // catch error
-    })
 }
 
 // -------------------股票信息-------------------------------
-
+/**
-
+ * 股票信息，通过axios请求后端接口，得到股票信息，并保存在stocktypes.value中。
+ * stocktypes.value是一个数组，数组中的每个元素都是一个对象，对象中包含股票的信息，
+ * 包括股票的id、label、value、state、info等属性。
+ * stocktypes.value是一个数组，数组中的每个元素都是一个对象，对象中包含股票的信息，
+ * 包括股票的id、label、value、state、info等属性。
+ */
 interface StockType {
   id?: string
   label: string
@@ -159,6 +165,11 @@ interface StockType {
 
 let cacheinfo = ref<Equity[]>([])
 
+/**
+ * 固定分类，始终有港股、美股、沪深等分类。
+ * stocktypes.value是一个数组，数组中的每个元素都是一个对象，对象中包含股票的信息，
+ * 包括股票的id、label、value、state、info等属性。
+ */
 let stocktypes = ref<StockType[]>([
   {
     id: '1',
@@ -206,12 +217,9 @@ axios({
 // --------------------切换是否可见--------------------------
 const changestate = (item: any) => {
   item.state = !item.state
-  // console.log(item.state)
 }
 
 let asideshow = computed(() => {
-  // console.log(stocktypes.value)
-
   return stocktypes.value.filter((item) => item.state)
 })
 
@@ -229,7 +237,7 @@ interface Equity {
 // ---------------------往info数组里面加股票数据-------------------
 const inputhandle = ref('')
 const filterTableData = computed(() =>{
-  let newarr = cacheinfo.value.flat(); // 使用 flat 方法将多维数组展平
+  let newarr = cacheinfo.value.flat(); 
   return newarr.filter(
     (data) =>
       !inputhandle.value ||
@@ -239,13 +247,9 @@ const filterTableData = computed(() =>{
 })
 // 添加新股票完成
 const handleEdit = (index: number, row: Equity) => {
-  console.log(index, row)
-
   stocklog.value?.info.push(row)
-
   // 添加后移除，也可以不移除
   // tableData2.value = tableData2.value.filter((data) => data.code !== row.code)
-
   let mes = myitems.value[index] || ''
   // 存在自己的数据库表中
   let newpostparam = {
@@ -254,7 +258,6 @@ const handleEdit = (index: number, row: Equity) => {
     message: [mes],
     info: showdata.value,
   }
-
   axios.post('http://127.0.0.1:8012/akshare/newupdata', newpostparam)
 }
 
@@ -511,65 +514,41 @@ let kindofstock = ref()
 const clickTypeState = (val: CollapseModelValue) => {
   kindofstock.value = val
 }
+// 定义一个URL映射对象
+const stockUrls = {
+  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 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) => {
-
-  // vscode.postMessage({
-  //   command: 'showkline',
-  //   text: item.code,
-  // })
-
-  // 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; // 设置消息内容
+  const stockType = kindofstock.value;
+  const url = stockUrls[stockType];
 
-  if(kindofstock.value == '港股'){
+  if (url) {
-    axios({
+    fetchStockData(url, item.code, '2023-01-01', getDate());
-      url: 'http://127.0.0.1:8012/akshare/ganggudataK',
+  } else {
-      method: 'get',
+    console.error('未找到对应的股票类型');
-      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 = () => {
@@ -581,106 +560,47 @@ const getDate = () => {
   return formattedDate
 }
 
-const sendmessage = (content: any) => {
+// 定义一个URL映射对象
+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({
-    url: 'http://127.0.0.1:8012/akshare/stock',
+    url: url,
     method: 'get',
     params: {
-      symbol: 'sz' + content.code,
+      symbol: content.type === 'ganggu' || content.type === 'meigu' || content.type === 'hushen' ? content.code : 'sz' + content.code,
       start_date: '2023-01-01',
       end_date: getDate()
     },
   }).then((res) => {
-    console.log('数据传输成功')
+    console.log('数据传输成功');
   }).catch(error => {
-    console.error(error);
+    console.error('请求失败，请检查URL是否正确或稍后重试。', error);
   });
-}
+};
+
 
 const showkline = (content: any) => {
-
-
-  // vscode.postMessage({
-  //   command: 'showkline',
-  //   text: content.code,
-  // })
-  // 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);
 
-  console.log(content);
+  const url = urls[content.type] || urls['ganggu']; // 默认使用 'ganggu' URL
-  if(content.type == "hs300"){
+  if (url) {
-    sendmessage(content)
+    sendmessage(content, url);
+  } else {
+    console.error('未找到对应的URL类型');
   }
-  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>
 
 <template>
@@ -1188,28 +1108,10 @@ iframe{
   color: var(--my-common-fc-1);
 }
 :deep(.el-collapse-item__content)::-webkit-scrollbar {
-    width: 0;
+    width: 0 !important;
 }
 
 
-/* :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) {
   padding-left: 12px;

vite.config.ts

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