Skip to content

xiaojiu5460/portfolio

BranchesTags

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

125 Commits
dist
dist
 
 
public
public
 
 
src
src
 
 
.gitignore
.gitignore
 
 
README.md
README.md
 
 
babel.config.js
babel.config.js
 
 
package-lock.json
package-lock.json
 
 
package.json
package.json
 
 
vue.config.js
vue.config.js
 
 

Repository files navigation

自选股APP

简介

自选股APP是一款简易的股票行情看盘软件。

基本功能介绍

  • 行情列表展示
    • 个股最新价、涨跌幅展示
    • 可编辑当前展示分组个股：删除、全选、反选、取消
  • Header拓展功能
    • 自选股自定义分组管理：系统分组、个人分组、添加分组
    • 换肤功能：黑白色
  • 热搜榜、股票查询记录
    • 热搜榜
    • 搜索股票增至不同分组
  • 个股交易数据展示
    • 现价、涨跌价、涨跌幅、今开、昨收、成交量、成交额、市值等信息
    • 五档、详情、大单
  • 资讯展示
    • 包括：新闻、公告、资金、简况、研报

Vue app Vue app

体验地址

Vue QRcode

详细说明

一、行情列表展示

  1. 个股最新价、涨跌幅数据和颜色展示、价格和涨跌排序

    (1) 通过GET请求获取股票列表

    数据接口：http://sqt.gtimg.cn/utf8/q=sz000729

    查询参数：q=sz000729 (备:q的查询参数值格式为字符串，代表需要查询的个股)

    响应内容格式：文本格式;

    响应结果： ~000729~6.31~6.35~6.33~37621~20261~17357~6.31~1181~6.30~1228~6.29~99~6.28~137~6.27~151~6.33~588~6.34~341~6.35~454~6.36~787~6.37~207~15:00:04/6.31/161/S/101591/9530|14:56:57/6.31/55/S/34757/9445|14:56:45/6.33/7/B/4428/9437|14:56:42/6.32/4/B/2528/9435|14:56:39/6.32/10/B/6320/9433|14:56:36/6.32/20/S/12640/9431~20180920150045~-0.04~-0.63~6.37~6.30~6.31/37621/23844290~37621~2384~0.15~100.82~~6.37~6.30~1.10~158.35~177.85~1.33~6.99~5.72~0.84~419~6.34~17.55~110.23";

    数据处理：对相应结果的字符串格式，格式化处理成json，便于做渲染；

    渲染数据格式： list=[ {name: "中金岭南", code: "000060", newPrice: "4.50", percent: "1.35%", code2: "sz000060", …}, {...} ]

    (2) 价格、涨跌幅排序

    逻辑：

    • 保存默认排序顺序(Object.assign())
    • 当传进的字段和上一次被点击的字段相同时，走下面正常排序方式，当不等于上次字段，则修改默认值为降序，并保存上次点击字段。

    实现:

 sort: function(field) {
   if (field !== this.sortValue) { //sortValue:''保存上个被点击的字段
    this.sortDir = 0;//sortDir: 0,保存降序默认值为1，点击排降序为1后，调整升序为-1
   this.sortValue = field;
     }
   if (this.sortDir === 1) {
     this.sortDir = -1;
     this.list.sort(function(p1, p2) {
       return parseFloat(p1[field]) < parseFloat(p2[field]) ? 1 : -1;
     });
   } else if (this.sortDir === -1) {
     this.sortDir = 0;
   // 把list的顺序恢复成stockList一样
     this.list = Object.assign([], this.defaultList);
   } else {
     this.sortDir = 1;
     this.list.sort(function(p1, p2) {
       return parseFloat(p1[field]) < parseFloat(p2[field]) ? -1 : 1;
       });
     }
   }

2.可编辑当前展示分组个股：删除(确认,取消)、全选、反选、取消，并弹窗确认删除与否。

(1) 点击title的编辑按钮可展示底部功能按钮，四个按钮分别实现不同功能。

删除：无勾选时disabled；勾选时highlight，并显示勾选数量。勾选与否由渲染数据中clickValue=true/false决定，勾选数量也由此统计。

确认&取消：点击确认后watch stocklist列表变化并重新渲染；取消返回主界面(列表页面)

全选：修改list的chickValue=true，并显示勾选数量

反选：根据全选中chickValue状态做相反处理，并显示勾选数量

取消：返回主界面(列表页面)，编辑功能按钮隐藏

二、Header拓展功能

  1. 自选股自定义分组管理:系统分组/个人分组/添加分组(locaLstorage读写)

    系统分组：主页面created时来读取locaLstorage做全部分组渲染,读取过程中判断系统分组内stock是否为空，若为空，渲染默认给的stockList去渲染;

    个人分组：配合添加分组功能使用，增加分组后写入locaLstorage。

  2. 颜色切换:子组件通过EventBus.$emit/$on通知兄弟组件和父组件同时切色

三、热搜榜、股票查询记录

  1. 热搜榜

    接口地址：http://proxy.finance.qq.com/ifzqgtimg/appstock/app/HotStock/getHotStock;

    响应内容格式：json

    响应结果：

"code": 0,
"msg": "",
"data": [
    ["hk03690",     //market+code
    "美团点评-Ｗ",  //name
    "GP"],
    ["sz300104",
    "乐视网",
    "GP-A"],
    ...
]

数据处理：res.data

  1. 搜索股票增至不同分组

    接口地址：http://proxy.finance.qq.com/ifzqgtimg/appstock/smartbox/search/get?q=600001;

    查询参数: q=600001 (备:q的查询参数值格式为字符串，代表搜索时输入的内容)

    响应内容格式：json

    响应结果：res=

{
  "code": 0,
  "msg": "",
  "data": {
  "stock": [
    ["sh",            //market
     "600001",       //code
     "邯郸钢铁",    //name
     "hdgt",        //简称
     "GP-A"         //所属A股
    ]
  ],
  "sector": []
  }
}

数据处理：对返回结果的json格式，处理成数组，便于做渲染；

四、个股交易数据展示(点击个股展示detail详情页)

  1. 现价、涨跌价、涨跌幅、今开、昨收、成交量、成交额、市值等信息

    数据接口：http://sqt.gtimg.cn/utf8/q=sz000729

    查询参数：q=sz000729 (备:q的查询参数值格式为字符串，代表需要查询的个股)

    响应内容格式：文本格式;

    响应结果： ~000729~6.31~6.35~6.33~37621~20261~17357~6.31~1181~6.30~1228~6.29~99~6.28~137~6.27~151~6.33~588~6.34~341~6.35~454~6.36~787~6.37~207~15:00:04/6.31/161/S/101591/9530|14:56:57/6.31/55/S/34757/9445|14:56:45/6.33/7/B/4428/9437|14:56:42/6.32/4/B/2528/9435|14:56:39/6.32/10/B/6320/9433|14:56:36/6.32/20/S/12640/9431~20180920150045~-0.04~-0.63~6.37~6.30~6.31/37621/23844290~37621~2384~0.15~100.82~~6.37~6.30~1.10~158.35~177.85~1.33~6.99~5.72~0.84~419~6.34~17.55~110.23";

    数据处理：对相应结果的字符串格式，格式化处理成json，便于做渲染；

    渲染数据格式： list=[ {name: "中金岭南", code: "000060", newPrice: "4.50", percent: "1.35%", code2: "sz000060", …}, {...} ]

  2. 五档、详情、大单

    五档：买卖各五档价格&成交量

    详情：买卖各五档每秒实时价格&每秒实时成交量

    大单：大单买卖盘Echart占比饼图

    备注：上述三项数据，均通过http://web.sqt.gtimg.cn/q=sz000729 获取的res筛选需要的数据做格式化处理后渲染。

五、资讯展示 (新闻、公告、简况、研报...)

  1. 新闻

    接口地址:/proxy/220.249.243.51/ifzqgtimg/appstock/news/info/search?symbol=sh603080&page=1&n=5&type=3;

    请求参数:symbol=sh603080&page=1&n=5&type=3(symbol查询值格式为字符串，代表需要查询的个股;page=查第几页;n=每页新闻个数;type=固定值)

    响应内容格式：json

    响应结果：

{
"code": 0,
"msg": "",
"data": {
"total_num": 9999,
"total_page": 2000,
"data": [{
    "time": "2018-09-11 13:51:26",    //新闻发布时间
    "id": "nesstock-20180911075214",  //每条新闻的识别id
    "type": "2",
    "symbol": "sh603080",
    "title": "天然气概念股再度拉升 河北4市拟上调天然气价格", //title
    "url": "http://stock.qq.com/a/20180911/075214.htm",  //url
    "newstype": "1",
    "src": "腾讯证券",
    "summary": "",
    "typeStr": "",
    "symbols": ["sh603080"]
  }],
"symbolsName": [{
    "symbol": "sh603080",
    "name": "新疆火炬",
    "logo": ""
  }]
 }
}

数据处理：对返回结果的json格式，处理成数组，便于做渲染；

  1. 公告

    接口地址：/proxy/220.249.243.51/ifzqgtimg/appstock/news/noticeList/searchByType?symbol=sz300001&page=1&n=20&noticeType=0;

    请求参数： 参数同新闻模块参数一致

    响应内容格式：json

    响应结果：

"code": 0,
"msg": "",
"data": {
  "total_num": 997,
  "total_page": 50,
  "data": [{
    "time": "2018-09-20 00:00:00",
    "id": "nos1205455743",
    "type": "0",
    "newstype": "01010503,010112,010115,01239999",
    "symbol": "sz300001",
    "title": "特锐德：关于参加青岛辖区上市公司投资者网上集体接待日活动的公告",
    "url": ""
  },{...},{...},...
}

数据处理：对返回结果的json格式，处理成数组，便于做渲染；

  1. 简况

    接口地址：/proxy/220.249.243.51/ifzqgtimg/appstock/app/stockinfo/jiankuang?code=sz300001;

    请求参数：code=sz300001 (备：code查询值格式为字符串，代表需要查询的个股;)

    响应内容格式：json

    响应结果：因简况界面数据较多，响应结果内容过多，下面展示一部分

{
    "code": 0,
    "msg": "",
    "data": {
    "zyzb": {
        "date": "2018中报",
        "detail": {
          "date": "2018中报",  
          "mgsy": "0.1200元",  //每股收益
          "yysr": "26.37亿元", //营业收入
          "srzzl": "0.70%",    //营收同比
          "jlr": "1.23亿元",   //净利润
          "jlrzzl": "20.10%",  //净利润同比
          "mgjzc": "3.06元",   //每股净资产
          "syl": "45.66",      //收益率
          "sjl": "4.48"        //市净率
         }
    },
"gsjj": {},
"zysr": {},...

数据处理：对返回结果的json格式，处理成数组，便于做渲染;

  1. 研报

    接口地址：/proxy/220.249.243.51/ifzqgtimg/appstock/app/investRate/getReport?symbol=sz300519&page=0&n=20

    请求参数： symbol=sz300519&page=0&n=20 (备：symbol查询值格式为字符串，代表需要查询的个股;page=查第几页;n=每页新闻个数;type=固定值)

    响应内容格式：json

    响应结果：

{
   "code": 0,
   "msg": "OK",
   "data": {
     "total_num": 9999,
     "total_page": 500,
     "data": [{
       "id": "res3514293",
       "title": "【华金证券】新光药业:区域性中成药企业,主导品种全国首创",
       "time": "2016-10-28 00:00:00",
       "typeStr": "",
       "type": "1",
       "symbol": "sz300519",
       "url": "",
       "src": "",
      "summary": "",
      "symbols": ["sz300519"],
    "tzpj": ""
    },{...},{...},...
  }
 }

数据处理：对返回结果的json格式，处理成数组，便于做渲染;

About

一款简易的股票行情看盘软件。

Resources

Readme
Activity

Stars

11 stars

Watchers

1 watching

Forks

3 forks
Report repository

Releases

No releases published

Packages

No packages published

Languages