自选股APP

简介

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

基本功能介绍

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

体验地址

详细说明

一、行情列表展示

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

(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拓展功能

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

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

个人分组：配合添加分组功能使用，增加分组后写入locaLstorage。
颜色切换:子组件通过EventBus.$emit/$on通知兄弟组件和父组件同时切色

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

热搜榜

接口地址：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

搜索股票增至不同分组

接口地址：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详情页)

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

数据接口：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", …}, {...} ]
五档、详情、大单

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

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

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

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

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

新闻

接口地址:/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格式，处理成数组，便于做渲染；

公告

接口地址：/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格式，处理成数组，便于做渲染；

简况

接口地址：/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格式，处理成数组，便于做渲染;

研报

接口地址：/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格式，处理成数组，便于做渲染;

Name		Name	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

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

简介

基本功能介绍

体验地址

详细说明

About

Releases

Packages

Languages

xiaojiu5460/portfolio

Folders and files

Latest commit

History

Repository files navigation

自选股APP

简介

基本功能介绍

体验地址

详细说明

About

Resources

Stars

Watchers

Forks

Languages