<template>
|
<div
|
:class="`hqWrap ${$state.theme === 'red' ? 'red-theme' : 'black-theme'}`"
|
>
|
<!--页面头部-->
|
<div class="headTitle" v-if="false">
|
<div class="name-box">
|
<div class="nameWrap">
|
<span class="stockName">{{ StockData.Name.Text }}</span
|
><span class="flagBox rFlag" v-show="StockData.IsMargin">融</span
|
><span class="flagBox tFlag" v-show="StockData.IsSHHK">通</span>
|
</div>
|
<div class="exchangeInfo">
|
<span class="date">{{ StockData.Date }}</span
|
><span class="time">{{ StockData.Time }}</span>
|
</div>
|
</div>
|
</div>
|
<!--价格部分-->
|
<div class="exchangeData" id="main">
|
<div class="overall-box">
|
<div class="left">
|
<div class="overall-item">
|
<strong :class="StockData.Price.Color">{{
|
StockData.Price.Text
|
}}</strong>
|
<span
|
style="margin-left: 0.1rem; margin-right: 0.1rem"
|
:class="StockData.RiseFallPrice.Color"
|
>{{ StockData.RiseFallPrice.Text }}</span
|
>
|
<span :class="StockData.RiseFallPrice.Color">{{
|
StockData.Increase.Text
|
}}</span>
|
</div>
|
<div class="overall-item">
|
<ul>
|
<li>
|
<h4>成交量</h4>
|
<span>{{ StockData.Vol.Text }}</span>
|
</li>
|
<li>
|
<h4>成交额</h4>
|
<span>{{ StockData.Amount.Text }}</span>
|
</li>
|
</ul>
|
</div>
|
</div>
|
<div class="right">
|
<div class="overall-item">
|
<ul>
|
<li>
|
<h4>昨收</h4>
|
<span>{{ StockData.YClose.Text }}</span>
|
</li>
|
<li>
|
<h4>今开</h4>
|
<span>{{ StockData.Open.Text }}</span>
|
</li>
|
</ul>
|
</div>
|
<div class="overall-item">
|
<ul>
|
<li>
|
<h4>最高</h4>
|
<span>{{ StockData.High.Text }}</span>
|
</li>
|
<li>
|
<h4>最低</h4>
|
<span>{{ StockData.Low.Text }}</span>
|
</li>
|
</ul>
|
</div>
|
</div>
|
</div>
|
<div class="clear" v-if="false">
|
<div class="priceCurrent">
|
<p class="priceCurrentNum" :class="StockData.Price.Color">
|
{{ StockData.Price.Text }}
|
</p>
|
<p class="riseInfo" :class="StockData.RiseFallPrice.Color">
|
<span class="riseNum">{{ StockData.RiseFallPrice.Text }}</span>
|
<span class="risePrecent">{{ StockData.Increase.Text }}</span>
|
</p>
|
</div>
|
<div class="priceHL">
|
<p class="high">
|
高<span :class="StockData.High.Color">{{
|
StockData.High.Text
|
}}</span>
|
</p>
|
<p class="low">
|
低<span :class="StockData.Low.Color">{{ StockData.Low.Text }}</span>
|
</p>
|
</div>
|
<div class="priceOpen">
|
<p class="open">
|
开<span :class="StockData.Open.Color">{{
|
StockData.Open.Text
|
}}</span>
|
</p>
|
<p class="change" v-if="!IsIndex">
|
换<span :class="StockData.Excahngerate.Color">{{
|
StockData.Excahngerate.Text
|
}}</span>
|
</p>
|
<p class="change" v-if="IsIndex">
|
昨收<span>{{ StockData.YClose.Text }}</span>
|
</p>
|
</div>
|
<div class="priceAmount">
|
<p class="num">
|
额<span>{{ StockData.Amount.Text }}</span>
|
</p>
|
<p class="totalValue">
|
量<span>{{ StockData.Vol.Text }}</span>
|
</p>
|
</div>
|
</div>
|
<table
|
:class="[IsIndex ? 'indexExchangeInfoT' : 'exchangeInfoT']"
|
v-if="!IsIndex && ExchangeInfoTShow"
|
>
|
<tbody>
|
<tr>
|
<td>PE</td>
|
<td>
|
<div class="pe">{{ StockData.Pe.Text }}</div>
|
</td>
|
<td class="clear">
|
<span class="name">总市值</span
|
><span class="marketV">{{ StockData.MarketV.Text }}</span>
|
</td>
|
<td>流通市值</td>
|
<td>
|
<div class="flowMarketV">{{ StockData.FlowMarketV.Text }}</div>
|
</td>
|
</tr>
|
<tr>
|
<td>EPS</td>
|
<td>
|
<div class="eps">{{ StockData.Eps.Text }}</div>
|
</td>
|
<td class="clear">
|
<span class="name">滚动EPS</span
|
><span class="scrollEPS">{{ StockData.ScrollEPS.Text }}</span>
|
</td>
|
<td>ROE</td>
|
<td>
|
<div class="roe">{{ StockData.Roe.Text }}</div>
|
</td>
|
</tr>
|
<tr>
|
<td>PB</td>
|
<td>
|
<span class="pb">{{ StockData.Pb.Text }}</span>
|
</td>
|
<td class="clear">
|
<span class="name">振幅</span
|
><span class="amplitude">{{ StockData.Amplitude.Text }}</span>
|
</td>
|
<td></td>
|
<td></td>
|
</tr>
|
</tbody>
|
</table>
|
<table
|
:class="[IsIndex ? 'indexExchangeInfoT' : 'exchangeInfoT']"
|
v-if="IsIndex && ExchangeInfoTShow"
|
>
|
<tbody>
|
<tr>
|
<td>上涨家数</td>
|
<td>
|
<span class="pe">{{ StockData.Up.Text }}</span>
|
</td>
|
<td>上涨家数</td>
|
<td>
|
<span class="flowMarketV">{{ StockData.Down.Text }}</span>
|
</td>
|
</tr>
|
<tr>
|
<td>平盘</td>
|
<td>
|
<span class="eps">{{ StockData.Unchanged.Text }}</span>
|
</td>
|
<td></td>
|
<td></td>
|
</tr>
|
</tbody>
|
</table>
|
<p class="shrinkWrap" @click="ShowOrHideExchangeInfoT">
|
<img
|
class="shrinkBtn"
|
:class="CollapseImgClass"
|
src="./images/shrink_icon.png"
|
alt=""
|
/>
|
</p>
|
</div>
|
<!--k线部分-->
|
<div class="k-main-content minuteWrap" v-if="true">
|
<div class="k-main-content-box">
|
<div class="k-left-content kLineTabs">
|
<p
|
class="tabsTitle"
|
:style="{ marginRight: FiveMinute.IsShow ? '0.2rem' : '0' }"
|
>
|
<span
|
v-for="(item, index) in PeriodObj.TabTextAry"
|
:key="index"
|
:class="`${PeriodObj.TabTextIndex == index ? 'active' : ''} ${
|
PeriodObj.preTextIndex == index ? 'active-pre' : ''
|
}`"
|
@click="ChangeChartTab(index)"
|
>{{ item }}</span
|
>
|
<select
|
v-if="false"
|
v-model="MinutePeriod.minutePeriod"
|
@click="ChangeMinuteIndex"
|
:class="{ selectActive: PeriodObj.TabTextIndex == 6 }"
|
>
|
<option
|
v-for="(minuteItem, ind) in MinutePeriod.SelectOptionList"
|
:value="minuteItem.Value"
|
:key="ind"
|
>
|
{{ minuteItem.Text }}
|
</option>
|
</select>
|
</p>
|
<div class="k-echarts" id="minuteChart" v-show="Minute.IsShow"></div>
|
<div
|
class="k-echarts"
|
id="minuteFiveDaychart"
|
v-show="FiveMinute.IsShow"
|
></div>
|
<div class="k-echarts" id="kline" v-show="Kline.IsShow"></div>
|
<!-- k线图指标 -->
|
<div class="indexWrap" v-show="Kline.IsShow">
|
<span
|
v-for="item in IndexMenu"
|
:key="item.ID"
|
@click="ChangeKlinIndex(item)"
|
class="indexItem"
|
:class="{ active: item.Selected == true }"
|
>{{ item.Name }}</span
|
>
|
</div>
|
</div>
|
<div class="k-right-content">
|
<!-- 分时图右侧内容 -->
|
<div class="rightMinute" v-show="!IsIndex && Minute.IsShow">
|
<div class="right-minute-content">
|
<ul class="minute-tab clear tabsTitle">
|
<li
|
class="tableSell active-minute"
|
@click="ChangeMinuteTab(0)"
|
:class="{ active: MinuteMenuIndex == 0 }"
|
>
|
五档
|
</li>
|
<li
|
class="tableBuy"
|
@click="ChangeMinuteTab(1)"
|
:class="{ active: MinuteMenuIndex == 1 }"
|
>
|
明细
|
</li>
|
</ul>
|
<div class="tabsContent">
|
<div
|
id="minuteFive"
|
class="tableMinuteContent"
|
v-show="MinuteMenuIndex == 0"
|
>
|
<table class="tableOne">
|
<!-- 卖五 -->
|
<tbody>
|
<tr v-for="item in StockData.SellerFive">
|
<td>{{ item.name }}</td>
|
<td class="color-change" v-bind:class="item.color">
|
{{ item.dataPrice }}
|
</td>
|
<td v-bind:class="item.color">{{ item.dataVol }}</td>
|
</tr>
|
</tbody>
|
</table>
|
<table class="tableTwo">
|
<!-- 买五 -->
|
<tbody>
|
<tr v-for="item in StockData.BuyerFive">
|
<td>{{ item.name }}</td>
|
<td class="color-change" v-bind:class="item.color">
|
{{ item.dataPrice }}
|
</td>
|
<td v-bind:class="item.color">{{ item.dataVol }}</td>
|
</tr>
|
</tbody>
|
</table>
|
</div>
|
<div
|
id="minute"
|
class="tableMinuteContent"
|
v-show="MinuteMenuIndex == 1"
|
>
|
<table class="tableInfo">
|
<tbody>
|
<tr v-for="item in StockData.Dealer">
|
<td>{{ item.timer }}</td>
|
<td
|
class="color-change symbolAve"
|
v-bind:class="item.color"
|
>
|
{{ item.dataPrice }}
|
</td>
|
<td>{{ item.dataVol }}</td>
|
</tr>
|
</tbody>
|
</table>
|
</div>
|
</div>
|
</div>
|
</div>
|
|
<!-- k线图右侧内容 -->
|
<div class="phoneRight" v-show="!IsIndex && RightMenu.IsShow">
|
<ul class="ulOne">
|
<li
|
v-for="item in RightMenu.List"
|
:key="item.ID"
|
@click="ChangeKlinRight(item)"
|
class="noRight"
|
:class="{ active: item == RightMenu.Selected }"
|
>
|
{{ item.Name }}
|
</li>
|
</ul>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="tab-content tabs kLineTabs blockBg" v-if="false">
|
<p class="tabsTitle">
|
<span
|
v-for="(item, index) in PeriodObj.TabTextAry"
|
:key="index"
|
:class="{ active: PeriodObj.TabTextIndex == index }"
|
@click="ChangeChartTab(index)"
|
>{{ item }}</span
|
>
|
<select
|
v-if="false"
|
v-model="MinutePeriod.minutePeriod"
|
@click="ChangeMinuteIndex"
|
:class="{ selectActive: PeriodObj.TabTextIndex == 6 }"
|
>
|
<option
|
v-for="(minuteItem, ind) in MinutePeriod.SelectOptionList"
|
:value="minuteItem.Value"
|
:key="ind"
|
>
|
{{ minuteItem.Text }}
|
</option>
|
</select>
|
</p>
|
<!-- 分时图部分 -->
|
<div class="clear minuteWrap">
|
<div id="minuteChart" v-show="Minute.IsShow"></div>
|
<div id="minuteFiveDaychart" v-show="FiveMinute.IsShow"></div>
|
<div id="kline" v-show="Kline.IsShow"></div>
|
|
<!-- 分时图右侧内容 -->
|
<div class="rightMinute" v-show="!IsIndex && Minute.IsShow">
|
<ul class="minute-tab clear tabsTitle">
|
<li
|
class="tableSell active-minute"
|
@click="ChangeMinuteTab(0)"
|
:class="{ active: MinuteMenuIndex == 0 }"
|
>
|
五档
|
</li>
|
<li
|
class="tableBuy"
|
@click="ChangeMinuteTab(1)"
|
:class="{ active: MinuteMenuIndex == 1 }"
|
>
|
明细
|
</li>
|
</ul>
|
<div class="tabsContent">
|
<div
|
id="minuteFive"
|
class="tableMinuteContent"
|
v-show="MinuteMenuIndex == 0"
|
>
|
<table class="tableOne">
|
<!-- 卖五 -->
|
<tbody>
|
<tr v-for="item in StockData.SellerFive">
|
<td>{{ item.name }}</td>
|
<td class="color-change" v-bind:class="item.color">
|
{{ item.dataPrice }}
|
</td>
|
<td>{{ item.dataVol }}</td>
|
</tr>
|
</tbody>
|
</table>
|
<table class="tableTwo">
|
<!-- 买五 -->
|
<tbody>
|
<tr v-for="item in StockData.BuyerFive">
|
<td>{{ item.name }}</td>
|
<td class="color-change" v-bind:class="item.color">
|
{{ item.dataPrice }}
|
</td>
|
<td>{{ item.dataVol }}</td>
|
</tr>
|
</tbody>
|
</table>
|
</div>
|
<div
|
id="minute"
|
class="tableMinuteContent"
|
v-show="MinuteMenuIndex == 1"
|
>
|
<table class="tableInfo">
|
<tbody>
|
<tr v-for="item in StockData.Dealer">
|
<td>{{ item.timer }}</td>
|
<td
|
class="color-change symbolAve"
|
v-bind:class="item.color"
|
>
|
{{ item.dataPrice }}
|
</td>
|
<td>{{ item.dataVol }}</td>
|
</tr>
|
</tbody>
|
</table>
|
</div>
|
</div>
|
</div>
|
|
<!-- k线图右侧内容 -->
|
<div class="phoneRight" v-show="!IsIndex && RightMenu.IsShow">
|
<ul class="ulOne">
|
<li
|
v-for="item in RightMenu.List"
|
:key="item.ID"
|
@click="ChangeKlinRight(item)"
|
class="noRight"
|
:class="{ active: item == RightMenu.Selected }"
|
>
|
{{ item.Name }}
|
</li>
|
</ul>
|
</div>
|
|
<!-- k线图指标 -->
|
<div class="indexWrap" v-show="Kline.IsShow">
|
<span
|
v-for="item in IndexMenu"
|
:key="item.ID"
|
@click="ChangeKlinIndex(item)"
|
class="indexItem"
|
:class="{ active: item.Selected == true }"
|
>{{ item.Name }}</span
|
>
|
</div>
|
</div>
|
</div>
|
<!-- 下单部分 -->
|
<div class="agree-footer text-center" v-if="false">
|
<div v-if="$store.state.userInfo.phone" class="btn-box clearfix">
|
<a
|
v-if="!isOptionOpt"
|
class="pull-left bottom-btn"
|
style="color: #ee1515"
|
href="javascript:;"
|
@click="addOptions"
|
>添加自选</a
|
>
|
<a
|
v-if="isOptionOpt"
|
class="pull-left bottom-btn"
|
href="javascript:;"
|
@click="deteleOptions"
|
>删除自选</a
|
>
|
<a class="pull-left bottom-btn on" href="javascript:;" @click="toBuy"
|
>马上下单</a
|
>
|
<!-- <mt-button :class="agree?'btn btn-red':'btn btn-default'" size="small" @click="toBuy()">确定</mt-button> -->
|
<!-- <mt-button class="btn btn-cancel" size="small" @click="toBuy">取消</mt-button> -->
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import "hqchart/src/jscommon/umychart.resource/css/tools.css";
|
import "hqchart/src/jscommon/umychart.resource/font/iconfont.css";
|
import HQChart from "hqchart";
|
//import JSCommon from 'hqchart/src/jscommon/umychart.vue/umychart.vue.js'
|
//import JSCommonStock from 'hqchart/src/jscommon/umychart.vue/umychart.stock.vue.js'
|
import Tools from "./utils/tools";
|
import urlObj from "./utils/urlObj";
|
import { Toast } from "mint-ui";
|
import * as api from "@/axios/api";
|
|
import $ from "jquery";
|
|
var JSCommon = HQChart.Chart;
|
var JSCommonStock = HQChart.Stock;
|
JSCommonStock.JSStock.SetDomain(
|
"https://7213afce8ef9.zealink.com.cn",
|
"https://72fd1d77cce6cache.zealink.com"
|
);
|
JSCommon.JSChart.SetDomain(
|
"https://7213afce8ef9.zealink.com.cn",
|
"https://72fd1d77cce6cache.zealink.com"
|
);
|
var blackStyle = JSCommon.HQChartStyle.GetStyleConfig(
|
JSCommon.STYLE_TYPE_ID.BLACK_ID
|
);
|
|
JSCommon.JSChart.SetStyle(blackStyle);
|
|
function DefaultData() {}
|
|
DefaultData.GetStockData = function () //数据默认显示值
|
{
|
const data = {
|
Name: { Text: "" },
|
Price: { Text: "", Color: "PriceNull" },
|
RiseFallPrice: { Text: "", Color: "PriceNull" },
|
Increase: { Text: "", Color: "PriceNull" },
|
High: { Text: "", Color: "PriceNull" },
|
Low: { Text: "", Color: "PriceNull" },
|
Open: { Text: "", Color: "PriceNull" },
|
YClose: { Text: "" },
|
|
Excahngerate: { Text: "", Color: "PriceNull" },
|
Amount: { Text: "" },
|
Vol: { Text: "" },
|
Pe: { Text: "" },
|
Roe: { Text: "" },
|
MarketV: { Text: "" },
|
FlowMarketV: { Text: "" },
|
Eps: { Text: "" },
|
ScrollEPS: { Text: "" },
|
Pb: { Text: "" },
|
Amplitude: { Text: "" },
|
|
//指数才有
|
Down: { Text: "" }, //上涨
|
Up: { Text: "" }, //下跌
|
Unchanged: { Text: "" }, //平盘
|
Stop: { Text: "" }, //停牌
|
|
HK: { Symbol: "", Name: "" },
|
IsMargin: false, //融资融券
|
IsSHHK: false, //沪港通
|
IsHK: false, //港股
|
|
SellerFive: [],
|
BuyerFive: [],
|
Dealer: [],
|
};
|
|
return data;
|
};
|
|
DefaultData.GetMinuteOption = function (symbol) {
|
let data = {
|
Type: "分钟走势图", //走势图
|
Symbol: symbol,
|
IsAutoUpate: true, //是自动更新数据
|
|
IsShowRightMenu: false, //禁用右键菜单
|
CorssCursorTouchEnd: true, //手势离开屏幕 十字光标自动消失
|
EnableScrollUpDown: true, //允许上下拖动图形
|
DayCount: 1,
|
|
//边框
|
Border: {
|
Left: 1, //左边间距
|
Right: 1, //右边间距
|
Top: 20,
|
Bottom: 1,
|
},
|
|
//标题设置
|
KLineTitle: {
|
IsShowName: false, //不显示股票名称
|
IsShowSettingInfo: false, //不显示周期/复权
|
},
|
|
//子框架设置,刻度小数位数设置
|
Frame: [
|
{ SplitCount: 5, StringFormat: 0 },
|
{ SplitCount: 3, StringFormat: 0 },
|
],
|
|
//扩展图形
|
ExtendChart: [
|
{ Name: "MinuteTooltip" }, //手机端tooltip
|
],
|
};
|
return data;
|
};
|
|
DefaultData.GetFiveDayMinuteOption = function (symbol) {
|
let data = {
|
Type: "分钟走势图",
|
Symbol: symbol,
|
IsAutoUpate: true, //是自动更新数据
|
|
IsShowRightMenu: false, //右键菜单
|
DayCount: 5, //5日
|
CorssCursorTouchEnd: true, //手势离开屏幕 十字光标自动消失
|
EnableScrollUpDown: true, //允许上下拖动图形
|
|
//边框
|
Border: {
|
Left: 1, //左边间距
|
Right: 1, //右边间距
|
Top: 20,
|
Bottom: 20,
|
},
|
|
//标题设置
|
KLineTitle: {
|
IsShowName: false, //不显示股票名称
|
IsShowSettingInfo: false, //不显示周期/复权
|
},
|
|
//子框架设置,刻度小数位数设置
|
Frame: [
|
{ SplitCount: 5, StringFormat: 1 },
|
{ SplitCount: 3, StringFormat: 1 },
|
],
|
|
//扩展图形
|
ExtendChart: [
|
{ Name: "MinuteTooltip" }, //手机端tooltip
|
],
|
};
|
return data;
|
};
|
|
DefaultData.GetKlineOption = function (symbol) {
|
let data = {
|
Type: "历史K线图",
|
Windows: [
|
{ Index: "均线", Modify: false, Change: false },
|
{ Index: "VOL", Modify: false, Change: false },
|
], //窗口指标
|
|
Symbol: symbol,
|
IsAutoUpate: true, //是自动更新数据
|
|
CorssCursorTouchEnd: true, //手势离开屏幕 十字光标自动消失
|
EnableScrollUpDown: true, //允许上下拖动图形
|
IsShowRightMenu: false, //右键菜单
|
|
KLine: {
|
DragMode: 1, //拖拽模式 0 禁止拖拽 1 数据拖拽 2 区间选择
|
Right: 1, //复权 0 不复权 1 前复权 2 后复权
|
Period: 0, //周期 0 日线 1 周线 2 月线 3 年线
|
MaxReqeustDataCount: 1000, //日线数据最近1000天
|
MaxRequestMinuteDayCount: 15, //分钟数据最近15天
|
PageSize: 50, //一屏显示多少数据
|
IsShowTooltip: false, //是否显示K线提示信息
|
},
|
|
//标题设置
|
KLineTitle: {
|
IsShowName: false, //不显示股票名称
|
IsShowSettingInfo: false, //不显示周期/复权
|
},
|
|
//边框
|
Border: {
|
Left: 0, //左边间距
|
Right: 1, //右边间距
|
Top: 20,
|
},
|
|
//子框架设置
|
Frame: [
|
{ SplitCount: 3, StringFormat: 0 },
|
{ SplitCount: 3, StringFormat: 0 },
|
{ SplitCount: 3, StringFormat: 0 },
|
{ SplitCount: 3, StringFormat: 0 },
|
],
|
|
//扩展图形
|
ExtendChart: [
|
{ Name: "KLineTooltip" }, //手机端tooltip
|
],
|
};
|
return data;
|
};
|
|
export default {
|
name: "HQChartDemo",
|
data() {
|
let data = {
|
styleName: "black-bg",
|
ExchangeInfoTShow: false,
|
CollapseImgClass: "",
|
MinuteMenuIndex: 0,
|
IsIndex: false,
|
Symbol: "600000.sh", //399006.sz
|
JSStock: null,
|
ID: JSCommon.JSChart.CreateGuid(),
|
StockData: DefaultData.GetStockData(),
|
timer: null,
|
loading: false,
|
|
//分时
|
Minute: {
|
JSChart: null,
|
IsShow: true,
|
Option: null,
|
},
|
detail: {
|
name: "青海华鼎",
|
code: "600243",
|
spell: "qhhd",
|
gid: "sh600243",
|
nowPrice: "4.290",
|
hcrate: 1.18,
|
today_max: "4.300",
|
today_min: "4.240",
|
business_balance: "4151985.000",
|
business_amount: "973005",
|
preclose_px: "4.240",
|
open_px: "4.240",
|
buy1: "4.290",
|
buy2: "4.280",
|
buy3: "4.270",
|
buy4: "4.260",
|
buy5: "4.250",
|
sell1: "4.300",
|
sell2: "4.310",
|
sell3: "4.320",
|
sell4: "4.330",
|
sell5: "4.340",
|
buy1_num: "34700",
|
buy2_num: "38900",
|
buy3_num: "35900",
|
buy4_num: "26200",
|
buy5_num: "50100",
|
sell1_num: "76005",
|
sell2_num: "5100",
|
sell3_num: "2500",
|
sell4_num: "40200",
|
sell5_num: "11500",
|
}, // 详情
|
//多日分时
|
FiveMinute: {
|
JSChart: null,
|
IsShow: false,
|
Option: null,
|
},
|
|
//K线图
|
Kline: {
|
JSChart: null,
|
IsShow: false,
|
Option: null,
|
},
|
|
//指标Tab
|
IndexMenu: [
|
{ Name: "KDJ", ID: "KDJ", WindowsID: 1, Selected: false },
|
{ Name: "MACD", ID: "MACD", WindowsID: 1, Selected: false },
|
{ Name: "RSI", ID: "RSI", WindowsID: 1, Selected: false },
|
{ Name: "BOLL", ID: "BOLL", WindowsID: 0, Selected: false },
|
{ Name: "VOL", ID: "VOL", WindowsID: 1, Selected: false },
|
{ Name: "均线", ID: "均线", WindowsID: 0, Selected: false },
|
],
|
|
//复权
|
RightMenu: {
|
List: [
|
{ Name: "不复权", ID: 0 },
|
{ Name: "前复权", ID: 1 },
|
{ Name: "后复权", ID: 2 },
|
],
|
IsShow: false,
|
Selected: null,
|
},
|
|
PeriodObj: {
|
//周期数据
|
TabTextAry: ["分时", "五日", "日线", "周线", "月线"],
|
TabTextIndex: 0,
|
preTextIndex: 0,
|
},
|
MinutePeriod: {
|
//分钟周期
|
SelectOptionList: [
|
{
|
Text: "1分钟",
|
Value: 4,
|
},
|
{
|
Text: "5分钟",
|
Value: 5,
|
},
|
{
|
Text: "15分钟",
|
Value: 6,
|
},
|
{
|
Text: "30分钟",
|
Value: 7,
|
},
|
{
|
Text: "60分钟",
|
Value: 8,
|
},
|
],
|
minutePeriod: 4, //分钟周期
|
},
|
isOptionOpt: false, // 是否已经添加自选
|
// KLineOption:null
|
};
|
|
return data;
|
},
|
|
components: {},
|
|
created() {
|
// this.timer = setInterval(this.refreshList, 5000)
|
this.Symbol =
|
this.$parent.detail.code + "." + this.$parent.detail.stockType;
|
|
console.log("Symbol:", this.Symbol);
|
|
// this.Symbol = '600000.sh'
|
var symbol = Tools.getURLParams("symbol");
|
if (symbol) {
|
console.log(`[HQChartDemo::created] symbol=${symbol}`);
|
console.info(this.props.symbol);
|
this.Symbol = this.props.symbol;
|
}
|
|
this.IsIndex = this.IsSHSZIndex(); //初始判断是否是指数
|
|
this.JSStock = JSCommonStock.JSStockInit();
|
this.InitalStock();
|
this.JSStock.RequestData();
|
|
this.Minute.Option = DefaultData.GetMinuteOption(this.Symbol);
|
this.FiveMinute.Option = DefaultData.GetFiveDayMinuteOption(this.Symbol);
|
this.Kline.Option = DefaultData.GetKlineOption(this.Symbol);
|
},
|
beforeDestroy() {
|
// clearInterval(this.timer)
|
},
|
mounted() {
|
this.getDetail();
|
if (this.$store.state.userInfo.phone) {
|
// 判断是否登录
|
this.getOpation();
|
} else {
|
// 获取用户信息
|
this.getUserInfo();
|
}
|
this.OnSize();
|
window.onresize = () => {
|
this.$refs.stockHqNews.OnSize();
|
this.OnSize();
|
};
|
this.Minute.JSChart = JSCommon.JSChart.Init(
|
document.getElementById("minuteChart")
|
);
|
this.Minute.JSChart.SetOption(this.Minute.Option);
|
},
|
computed: {
|
minutePeriod() {
|
return this.MinutePeriod.minutePeriod;
|
},
|
},
|
watch: {
|
minutePeriod: function (value, oldValue) {
|
if (value == oldValue) return;
|
this.Minute.IsShow = false;
|
this.FiveMinute.IsShow = false;
|
this.Kline.IsShow = true;
|
this.RightMenu.IsShow = false; //分钟K线没有复权
|
this.OnSize();
|
if (this.Kline.JSChart == null) {
|
this.Kline.JSChart = JSCommon.JSChart.Init(
|
document.getElementById("kline")
|
);
|
|
this.Kline.Option.KLine.Period = value;
|
this.Kline.JSChart.SetOption(this.Kline.Option);
|
} else {
|
this.Kline.JSChart.ChangePeriod(value);
|
}
|
},
|
},
|
|
methods: {
|
//下单部分
|
async getUserInfo() {
|
// 获取用户信息
|
let data = await api.getUserInfo();
|
if (data.status === 0) {
|
this.$store.state.userInfo = data.data;
|
this.getOpation();
|
} else {
|
Toast(data.msg);
|
}
|
this.$store.state.user = this.user;
|
},
|
async refreshList() {
|
if (this.loading) {
|
return;
|
}
|
this.getDetail();
|
},
|
async getOpation() {
|
let opts = {
|
code: this.$route.query.code,
|
};
|
let data = await api.isOption(opts);
|
if (data.status === 0) {
|
// 0 --> 未添加
|
this.isOptionOpt = false;
|
} else {
|
this.isOptionOpt = true;
|
}
|
},
|
async getDetail() {
|
let opts = {
|
code: this.$route.query.code,
|
};
|
this.loading = true;
|
let data = await api.getSingleStock(opts);
|
this.loading = false;
|
if (data.status === 0) {
|
this.detail = data.data;
|
} else {
|
Toast(data.msg);
|
}
|
},
|
async addOptions() {
|
// if(!this.$store.state.userInfo.phone){
|
// MessageBox.confirm('您还未登录，是否去登录?').then(action => {
|
// this.$router.push('/login')
|
// });
|
// return
|
// }
|
let data = await api.addOption({ code: this.$route.query.code });
|
if (data.status === 0) {
|
Toast("添加自选成功");
|
this.isOptionOpt = true;
|
} else {
|
Toast(data.msg);
|
}
|
},
|
async deteleOptions() {
|
let data = await api.delOption({ code: this.$route.query.code });
|
if (data.status === 0) {
|
Toast("删除自选股成功");
|
this.isOptionOpt = false;
|
} else {
|
Toast(data.msg);
|
}
|
},
|
toBuy() {
|
this.$router.push({
|
name: "buy",
|
params: {
|
gid: this.detail.id,
|
name: this.detail.name,
|
code: this.detail.code,
|
hcrate: this.detail.hcrate,
|
nowPrice: this.detail.nowPrice,
|
stockType: this.$route.query.stock_type,
|
},
|
});
|
},
|
ChangeMinuteIndex() {
|
this.PeriodObj.TabTextIndex = 6;
|
},
|
|
OnSize() {
|
var width = window.innerWidth;
|
|
var unitRem = (width * 2) / 15;
|
|
var chartHeight = 200;
|
if (this.Minute.IsShow) {
|
// var chartWidth = this.IsIndex ? width : width - $('.rightMinute').outerWidth(true) - 20
|
var chartWidth = this.IsIndex ? width : width - 3.4 * unitRem;
|
$("#minuteChart").width(chartWidth);
|
// $('#minuteChart').height(chartHeight)
|
$("#minuteChart").height(290);
|
} else if (this.FiveMinute.IsShow) {
|
var chartWidth = width - 0.5 * unitRem;
|
$("#minuteFiveDaychart").width(chartWidth);
|
$("#minuteFiveDaychart").height(chartHeight);
|
} else if (this.Kline.IsShow) {
|
console.log("kline");
|
var chartWidth = width;
|
if (this.RightMenu.IsShow) {
|
// chartWidth = this.IsIndex ? width : width - $('.phoneRight').outerWidth(true) + 10
|
chartWidth = this.IsIndex ? width : width - 1.8 * unitRem;
|
}
|
$("#kline").width(chartWidth);
|
$("#kline").height(chartHeight);
|
if (this.Kline.JSChart) this.Kline.JSChart.OnSize();
|
}
|
},
|
|
//修改k线指标
|
ChangeKlinIndex(item) {
|
if (!this.Kline.JSChart) return;
|
|
this.Kline.JSChart.ChangeIndex(item.WindowsID, item.ID);
|
this.UpdateIndexTab();
|
},
|
|
UpdateIndexTab() {
|
if (!this.Kline.JSChart) return;
|
|
this.IndexMenu.forEach((item) => {
|
item.Selected = false;
|
});
|
|
var indexList = this.Kline.JSChart.GetIndexInfo();
|
for (var i in indexList) {
|
var item = indexList[i];
|
for (var j in this.IndexMenu) {
|
var menuItem = this.IndexMenu[j];
|
if (menuItem.ID == item.ID) {
|
menuItem.Selected = true;
|
break;
|
}
|
}
|
}
|
},
|
|
UpdateRightTab() {
|
if (!this.Kline.JSChart) return;
|
|
var right = this.Kline.JSChart.JSChartContainer.Right;
|
for (var i in this.RightMenu.List) {
|
var item = this.RightMenu.List[i];
|
if (item.ID == right) {
|
this.RightMenu.Selected = item;
|
break;
|
}
|
}
|
},
|
|
//修改复权
|
ChangeKlinRight(item) {
|
if (!this.Kline.JSChart) return;
|
|
this.Kline.JSChart.ChangeRight(item.ID);
|
this.UpdateRightTab();
|
},
|
|
ChangeChartTab(index) {
|
if (index !== 0) {
|
this.PeriodObj.preTextIndex = index - 1;
|
} else {
|
this.PeriodObj.preTextIndex = -1;
|
}
|
this.PeriodObj.TabTextIndex = index;
|
|
switch (index) {
|
case 0: //分时图
|
this.Minute.IsShow = true;
|
this.FiveMinute.IsShow = false;
|
this.Kline.IsShow = false;
|
this.RightMenu.IsShow = false;
|
this.OnSize();
|
break;
|
case 1: //5日分时图
|
this.Minute.IsShow = false;
|
this.FiveMinute.IsShow = true;
|
this.Kline.IsShow = false;
|
this.RightMenu.IsShow = false;
|
this.OnSize();
|
if (this.FiveMinute.JSChart == null) {
|
this.FiveMinute.JSChart = JSCommon.JSChart.Init(
|
document.getElementById("minuteFiveDaychart")
|
);
|
this.FiveMinute.JSChart.SetOption(this.FiveMinute.Option);
|
}
|
break;
|
case 2: //历史K线图
|
case 3:
|
case 4:
|
this.Minute.IsShow = false;
|
this.FiveMinute.IsShow = false;
|
this.Kline.IsShow = true;
|
this.RightMenu.IsShow = true;
|
this.OnSize();
|
if (this.Kline.JSChart == null) {
|
this.Kline.JSChart = JSCommon.JSChart.Init(
|
document.getElementById("kline")
|
);
|
this.Kline.JSChart.SetOption(this.Kline.Option);
|
} else {
|
this.Kline.JSChart.ChangePeriod(index - 2);
|
}
|
|
this.UpdateIndexTab();
|
this.UpdateRightTab();
|
break;
|
}
|
},
|
|
IsSHSZIndex() {
|
return JSCommon.MARKET_SUFFIX_NAME.IsSHSZIndex(this.Symbol);
|
},
|
|
ShowOrHideExchangeInfoT() {
|
this.ExchangeInfoTShow = !this.ExchangeInfoTShow;
|
this.CollapseImgClass = this.ExchangeInfoTShow ? "open" : "";
|
},
|
|
ChangeMinuteTab(index) {
|
this.MinuteMenuIndex = index;
|
},
|
|
UpdateData(id, arySymbol, dataType, jsStock) {
|
console.log(
|
"[StockInfo::UpdateData] ",
|
id,
|
arySymbol,
|
dataType,
|
jsStock,
|
this.ID
|
);
|
if (id != this.ID) return;
|
|
let isIndex = this.IsSHSZIndex();
|
let read = jsStock.GetStockRead(this.ID, this.UpdateData); //获取一个读取数据类,并绑定id和更新数据方法
|
if (arySymbol.indexOf(this.Symbol) < 0) return;
|
|
let data = {}; //数据取到的数据 数据名称：{ Value:数值(可以没有), Color:颜色, Text:显示的文本字段(先给默认显示)}
|
data.Name = {
|
Text: read.Get(this.Symbol, JSCommonStock.STOCK_FIELD_NAME.NAME),
|
};
|
let date = read.Get(this.Symbol, JSCommonStock.STOCK_FIELD_NAME.DATE);
|
let time = read.Get(this.Symbol, JSCommonStock.STOCK_FIELD_NAME.TIME);
|
if (date != null && time != null) {
|
data.Date =
|
date.toString().substring(4, 6) +
|
"-" +
|
date.toString().substring(6, 8);
|
if (time.toString().length == 5) {
|
data.Time =
|
0 +
|
time.toString().substring(0, 1) +
|
":" +
|
time.toString().substring(1, 3) +
|
":" +
|
time.toString().substring(3, 5);
|
} else {
|
data.Time =
|
time.toString().substring(0, 2) +
|
":" +
|
time.toString().substring(2, 4) +
|
":" +
|
time.toString().substring(4, 6);
|
}
|
}
|
|
data.Price = {
|
Value: read.Get(this.Symbol, JSCommonStock.STOCK_FIELD_NAME.PRICE),
|
Color: "",
|
Text: "--",
|
};
|
data.RiseFallPrice = {
|
Value: read.Get(
|
this.Symbol,
|
JSCommonStock.STOCK_FIELD_NAME.RISE_FALL_PRICE
|
),
|
};
|
data.Increase = {
|
Value: read.Get(this.Symbol, JSCommonStock.STOCK_FIELD_NAME.INCREASE),
|
Color: "",
|
Text: "--",
|
};
|
data.High = {
|
Value: read.Get(this.Symbol, JSCommonStock.STOCK_FIELD_NAME.HIGH),
|
Color: "",
|
Text: "--",
|
};
|
data.Low = {
|
Value: read.Get(this.Symbol, JSCommonStock.STOCK_FIELD_NAME.LOW),
|
Color: "",
|
Text: "--",
|
};
|
data.Open = {
|
Value: read.Get(this.Symbol, JSCommonStock.STOCK_FIELD_NAME.OPEN),
|
Color: "",
|
Text: "--",
|
};
|
data.Amount = {
|
Value: read.Get(this.Symbol, JSCommonStock.STOCK_FIELD_NAME.AMOUNT),
|
Text: "--",
|
};
|
data.Vol = {
|
Value: read.Get(this.Symbol, JSCommonStock.STOCK_FIELD_NAME.VOL),
|
Text: "--",
|
};
|
let yClose = read.Get(this.Symbol, JSCommonStock.STOCK_FIELD_NAME.YCLOSE);
|
data.YClose = { Value: yClose, Text: "--" };
|
|
let SellFive = read.Get(
|
this.Symbol,
|
JSCommonStock.STOCK_FIELD_NAME.SELL5
|
);
|
let BuyFive = read.Get(this.Symbol, JSCommonStock.STOCK_FIELD_NAME.BUY5);
|
let Deal = read.Get(this.Symbol, JSCommonStock.STOCK_FIELD_NAME.DEAL);
|
//卖五
|
if (SellFive && SellFive.length == 5) {
|
var str1 = [];
|
for (var i in SellFive) {
|
var dataN = SellFive[i];
|
var arr = ["卖五", "卖四", "卖三", "卖二", "卖一"];
|
str1.push({
|
name: arr[4 - i],
|
dataPrice:
|
dataN.Price != null
|
? dataN.Price != 0
|
? dataN.Price.toFixed(2)
|
: ""
|
: "--",
|
dataVol: dataN.Vol != 0 ? dataN.Vol : "",
|
color: JSCommon.IFrameSplitOperator.FormatValueColor(
|
dataN.Price,
|
yClose
|
),
|
});
|
}
|
data.SellerFive = str1.reverse();
|
}
|
//买五
|
if (BuyFive && BuyFive.length == 5) {
|
var str2 = [];
|
for (var i in BuyFive) {
|
var dataM = BuyFive[i];
|
var arr = ["买一", "买二", "买三", "买四", "买五"];
|
str2.push({
|
name: arr[i],
|
dataPrice:
|
dataM.Price != null
|
? dataM.Price != 0
|
? dataM.Price.toFixed(2)
|
: ""
|
: "--",
|
dataVol: dataM.Vol != 0 ? dataM.Vol : "",
|
color: JSCommon.IFrameSplitOperator.FormatValueColor(
|
dataM.Price,
|
yClose
|
),
|
});
|
}
|
data.BuyerFive = str2;
|
}
|
//分笔
|
if (Deal != undefined) {
|
var str3 = [];
|
for (var i in Deal) {
|
var item = Deal[i];
|
var timer = item.Time;
|
timer = timer.toString();
|
var timeStr, newTime;
|
if (timer.length == 5) {
|
timeStr = "0" + timer;
|
} else if (timer.length == 6) {
|
timeStr = timer;
|
}
|
newTime = timeStr.substring(0, 2) + ":" + timeStr.substring(2, 4);
|
|
str3.push({
|
timer: newTime,
|
dataPrice:
|
item.Price != null
|
? item.Price != 0
|
? item.Price.toFixed(2)
|
: ""
|
: "--",
|
dataVol: item.Vol != 0 ? item.Vol : "",
|
color: JSCommon.IFrameSplitOperator.FormatValueColor(
|
item.Price,
|
yClose
|
),
|
});
|
}
|
data.Dealer = str3;
|
}
|
|
data.Price.Text = JSCommon.IFrameSplitOperator.FormatValueString(
|
data.Price.Value,
|
2
|
); //保留2位小数
|
data.Price.Color = JSCommon.IFrameSplitOperator.FormatValueColor(
|
data.Price.Value,
|
yClose
|
); //价格颜色判断
|
|
if (data.RiseFallPrice.Value == 0) {
|
data.RiseFallPrice.Text = "0.00";
|
} else {
|
data.RiseFallPrice.Text =
|
JSCommon.IFrameSplitOperator.FormatValueString(
|
data.RiseFallPrice.Value,
|
2
|
);
|
}
|
data.RiseFallPrice.Color = JSCommon.IFrameSplitOperator.FormatValueColor(
|
data.RiseFallPrice.Value,
|
0
|
);
|
|
if (data.Increase.Value == 0) {
|
data.Increase.Text = "0.00%";
|
} else {
|
data.Increase.Text =
|
JSCommon.IFrameSplitOperator.FormatValueString(
|
data.Increase.Value,
|
2
|
) + "%";
|
}
|
data.Increase.Color = JSCommon.IFrameSplitOperator.FormatValueColor(
|
data.Increase.Value,
|
0
|
);
|
|
data.High.Text = JSCommon.IFrameSplitOperator.FormatValueString(
|
data.High.Value,
|
2
|
);
|
data.High.Color = JSCommon.IFrameSplitOperator.FormatValueColor(
|
data.High.Value,
|
yClose
|
);
|
|
data.Low.Text = JSCommon.IFrameSplitOperator.FormatValueString(
|
data.Low.Value,
|
2
|
);
|
data.Low.Color = JSCommon.IFrameSplitOperator.FormatValueColor(
|
data.Low.Value,
|
yClose
|
);
|
|
data.Open.Text = JSCommon.IFrameSplitOperator.FormatValueString(
|
data.Open.Value,
|
2
|
);
|
data.Open.Color = JSCommon.IFrameSplitOperator.FormatValueColor(
|
data.Open.Value,
|
yClose
|
);
|
|
data.YClose.Text = JSCommon.IFrameSplitOperator.FormatValueString(
|
data.YClose.Value,
|
2
|
);
|
|
data.Amount.Text = JSCommon.IFrameSplitOperator.FormatValueString(
|
data.Amount.Value,
|
2
|
);
|
data.Vol.Text = JSCommon.IFrameSplitOperator.FormatValueString(
|
data.Vol.Value,
|
2
|
);
|
|
if (isIndex) {
|
//指数才有
|
data.Down = { Text: "" }; //上涨
|
data.Up = { Text: "" }; //下跌
|
data.Unchanged = { Text: "" }; //平盘
|
data.Stop = { Text: "" };
|
let indexTop = read.Get(
|
this.Symbol,
|
JSCommonStock.STOCK_FIELD_NAME.INDEXTOP
|
);
|
if (indexTop) {
|
data.Down.Text = JSCommon.IFrameSplitOperator.FormatValueString(
|
indexTop.Down,
|
0
|
);
|
data.Up.Text = JSCommon.IFrameSplitOperator.FormatValueString(
|
indexTop.Up,
|
0
|
);
|
data.Unchanged.Text = JSCommon.IFrameSplitOperator.FormatValueString(
|
indexTop.Unchanged,
|
0
|
);
|
data.Stop.Text = JSCommon.IFrameSplitOperator.FormatValueString(
|
indexTop.Stop,
|
0
|
);
|
}
|
} else {
|
data.Excahngerate = {
|
Value: read.Get(
|
this.Symbol,
|
JSCommonStock.STOCK_FIELD_NAME.EXCHANGE_RATE
|
),
|
Color: "",
|
Text: "--",
|
};
|
data.Pe = {
|
Value: read.Get(this.Symbol, JSCommonStock.STOCK_FIELD_NAME.PE),
|
Text: "--",
|
};
|
data.MarketV = {
|
Value: read.Get(
|
this.Symbol,
|
JSCommonStock.STOCK_FIELD_NAME.MARKET_VALUE
|
),
|
Text: "--",
|
};
|
data.FlowMarketV = {
|
Value: read.Get(
|
this.Symbol,
|
JSCommonStock.STOCK_FIELD_NAME.FLOW_MARKET_VALUE
|
),
|
Text: "--",
|
};
|
data.Eps = {
|
Value: read.Get(
|
this.Symbol,
|
JSCommonStock.STOCK_FIELD_NAME.FINANCE_PERSEARNING
|
),
|
Text: "--",
|
};
|
data.ScrollEPS = {
|
Value: read.Get(
|
this.Symbol,
|
JSCommonStock.STOCK_FIELD_NAME.FINANCE_EPS
|
),
|
Text: "--",
|
};
|
data.Roe = {
|
Value: read.Get(this.Symbol, JSCommonStock.STOCK_FIELD_NAME.ROE),
|
Color: "",
|
Text: "--",
|
};
|
data.Pb = {
|
Value: read.Get(this.Symbol, JSCommonStock.STOCK_FIELD_NAME.PB),
|
Text: "--",
|
};
|
data.Amplitude = {
|
Value: read.Get(
|
this.Symbol,
|
JSCommonStock.STOCK_FIELD_NAME.AMPLITUDE
|
),
|
Text: "--",
|
};
|
|
data.Roe.Text = JSCommon.IFrameSplitOperator.FormatValueString(
|
data.Roe.Value,
|
2
|
);
|
data.Roe.Color = JSCommon.IFrameSplitOperator.FormatValueColor(
|
data.Roe.Value,
|
yClose
|
);
|
data.Excahngerate.Text = JSCommon.IFrameSplitOperator.FormatValueString(
|
data.Excahngerate.Value,
|
2
|
);
|
data.Excahngerate.Color = JSCommon.IFrameSplitOperator.FormatValueColor(
|
data.Excahngerate.Value,
|
yClose
|
);
|
data.MarketV.Text = JSCommon.IFrameSplitOperator.FormatValueString(
|
data.MarketV.Value,
|
0
|
);
|
data.FlowMarketV.Text = JSCommon.IFrameSplitOperator.FormatValueString(
|
data.FlowMarketV.Value,
|
0
|
);
|
data.Pe.Text = JSCommon.IFrameSplitOperator.FormatValueString(
|
data.Pe.Value,
|
2
|
);
|
data.Eps.Text = JSCommon.IFrameSplitOperator.FormatValueString(
|
data.Eps.Value,
|
2
|
);
|
data.ScrollEPS.Text = JSCommon.IFrameSplitOperator.FormatValueString(
|
data.ScrollEPS.Value,
|
2
|
);
|
data.Pb.Text = JSCommon.IFrameSplitOperator.FormatValueString(
|
data.Pb.Value,
|
2
|
);
|
data.Amplitude.Text = JSCommon.IFrameSplitOperator.FormatValueString(
|
data.Amplitude.Value,
|
2
|
);
|
|
let events = read.Get(
|
this.Symbol,
|
JSCommonStock.STOCK_FIELD_NAME.EVENTS
|
);
|
if (events) {
|
console.log(
|
"[StockInfo::UpdateData] events data ",
|
this.Symbol,
|
events
|
);
|
data.HK = events.HK;
|
data.IsMargin = events.IsMargin; ////是否是融资融券标题
|
data.IsHK = events.IsHK; //是否有港股
|
data.IsSHHK = events.IsSHHK; //沪港通
|
}
|
}
|
|
this.StockData = data;
|
},
|
|
InitalStock() {
|
let read = this.JSStock.GetStockRead(this.ID, this.UpdateData); //获取一个读取数据类,并绑定id和更新数据方法
|
|
const stockField =
|
//需要获取的数据字段
|
[
|
JSCommonStock.STOCK_FIELD_NAME.NAME,
|
JSCommonStock.STOCK_FIELD_NAME.DATE,
|
JSCommonStock.STOCK_FIELD_NAME.TIME,
|
JSCommonStock.STOCK_FIELD_NAME.PRICE,
|
JSCommonStock.STOCK_FIELD_NAME.RISE_FALL_PRICE,
|
JSCommonStock.STOCK_FIELD_NAME.INCREASE,
|
JSCommonStock.STOCK_FIELD_NAME.HIGH,
|
JSCommonStock.STOCK_FIELD_NAME.LOW,
|
JSCommonStock.STOCK_FIELD_NAME.OPEN,
|
JSCommonStock.STOCK_FIELD_NAME.YCLOSE,
|
JSCommonStock.STOCK_FIELD_NAME.EXCHANGE_RATE,
|
JSCommonStock.STOCK_FIELD_NAME.AMOUNT,
|
JSCommonStock.STOCK_FIELD_NAME.VOL,
|
JSCommonStock.STOCK_FIELD_NAME.PE,
|
JSCommonStock.STOCK_FIELD_NAME.MARKET_VALUE,
|
JSCommonStock.STOCK_FIELD_NAME.FLOW_MARKET_VALUE,
|
JSCommonStock.STOCK_FIELD_NAME.FINANCE_PERSEARNING,
|
JSCommonStock.STOCK_FIELD_NAME.FINANCE_EPS,
|
JSCommonStock.STOCK_FIELD_NAME.ROE,
|
JSCommonStock.STOCK_FIELD_NAME.PB,
|
JSCommonStock.STOCK_FIELD_NAME.AMPLITUDE,
|
JSCommonStock.STOCK_FIELD_NAME.EVENTS,
|
JSCommonStock.STOCK_FIELD_NAME.SELL5,
|
JSCommonStock.STOCK_FIELD_NAME.BUY5,
|
JSCommonStock.STOCK_FIELD_NAME.DEAL,
|
];
|
|
const indexField = [
|
JSCommonStock.STOCK_FIELD_NAME.NAME,
|
JSCommonStock.STOCK_FIELD_NAME.DATE,
|
JSCommonStock.STOCK_FIELD_NAME.TIME,
|
JSCommonStock.STOCK_FIELD_NAME.PRICE,
|
JSCommonStock.STOCK_FIELD_NAME.RISE_FALL_PRICE,
|
JSCommonStock.STOCK_FIELD_NAME.INCREASE,
|
JSCommonStock.STOCK_FIELD_NAME.HIGH,
|
JSCommonStock.STOCK_FIELD_NAME.LOW,
|
JSCommonStock.STOCK_FIELD_NAME.OPEN,
|
JSCommonStock.STOCK_FIELD_NAME.YCLOSE,
|
JSCommonStock.STOCK_FIELD_NAME.AMOUNT,
|
JSCommonStock.STOCK_FIELD_NAME.VOL,
|
JSCommonStock.STOCK_FIELD_NAME.INDEXTOP,
|
];
|
|
if (this.IsSHSZIndex()) {
|
read.SetQueryField(this.Symbol, indexField);
|
} else {
|
read.SetQueryField(this.Symbol, stockField);
|
}
|
},
|
|
BackLastPage() {
|
history.go(-1);
|
},
|
|
goToBusiness() {
|
window.open(
|
urlObj.htmlSimulateTrade +
|
"?oprTypeIndex=0" +
|
"&symbol=" +
|
this.Symbol +
|
"&symbolName=" +
|
this.StockData.Name.Text,
|
"_self"
|
);
|
},
|
},
|
};
|
</script>
|
|
<style lang="less" scoped>
|
.agree-footer {
|
.pull-left {
|
height: 1rem;
|
line-height: 1rem;
|
}
|
}
|
.k-main-content {
|
box-sizing: border-box;
|
.k-main-content-box {
|
display: flex;
|
box-sizing: border-box;
|
padding-left: 0.2rem;
|
overflow: hidden;
|
.k-left-content {
|
flex: 1;
|
box-sizing: border-box;
|
// padding-right: 0.2rem;
|
.k-echarts {
|
width: 100% !important;
|
}
|
canvas {
|
width: 100% !important;
|
}
|
}
|
.k-right-content {
|
.rightMinute {
|
width: 3rem;
|
box-sizing: border-box;
|
padding-left: 0.2rem;
|
padding-right: 0.2rem;
|
.tabsContent {
|
.tableMinuteContent {
|
margin-top: 13px;
|
}
|
tr {
|
td {
|
text-align: right;
|
}
|
}
|
}
|
}
|
.phoneRight {
|
width: 1.5rem;
|
box-sizing: border-box;
|
padding-left: 0.2rem;
|
padding-right: 0.2rem;
|
}
|
}
|
}
|
}
|
.overall-box {
|
width: 100%;
|
height: 1.7rem;
|
display: flex;
|
box-sizing: border-box;
|
padding: 0.1rem;
|
.overall-item {
|
strong {
|
font-size: 0.45rem;
|
font-family: Arial;
|
font-weight: bold;
|
color: rgba(224, 2, 2, 1);
|
line-height: 0.8rem;
|
}
|
span {
|
font-size: 0.24rem;
|
font-family: Arial;
|
font-weight: 400;
|
color: rgba(255, 255, 255, 1);
|
line-height: 0.36rem;
|
}
|
ul {
|
display: flex;
|
li {
|
flex: 1;
|
text-align: right;
|
h4 {
|
font-size: 0.24rem;
|
font-family: Microsoft YaHei;
|
font-weight: 400;
|
color: rgba(255, 255, 255, 0.5);
|
line-height: 0.36rem;
|
}
|
}
|
}
|
}
|
.left {
|
width: 55%;
|
border-right: 1px solid #242427;
|
ul {
|
li {
|
text-align: left;
|
}
|
}
|
}
|
.right {
|
width: 45%;
|
}
|
}
|
.clear:after {
|
content: " ";
|
height: 0;
|
display: block;
|
overflow: hidden;
|
clear: both;
|
}
|
|
.upColor {
|
color: #ee1515;
|
}
|
|
.lowColor {
|
color: #199e00;
|
}
|
|
.PriceUp,
|
.PriceUp > span {
|
color: #ee1515 !important;
|
}
|
|
.PriceDown,
|
.PriceDown > span {
|
color: #199e00 !important;
|
}
|
|
.PriceNull {
|
color: inherit;
|
}
|
|
//返回
|
.backWrap {
|
padding: 0 4%;
|
font-size: 1.5rem;
|
.backIconWrap {
|
display: inline-block;
|
/*padding-right: 22px;*/
|
height: 40px;
|
width: 50px;
|
line-height: 40px;
|
}
|
}
|
|
.tabsTitle .selectActive option {
|
color: #333333;
|
}
|
|
/*页面头部*/
|
.name-box {
|
flex: 1;
|
text-align: center;
|
position: relative;
|
right: 0;
|
background: #151515;
|
}
|
|
.headTitle {
|
display: flex;
|
height: 60px;
|
box-sizing: border-box;
|
padding-top: 4px;
|
padding-bottom: 4px;
|
}
|
|
.nameWrap {
|
text-align: center;
|
line-height: 21px;
|
font-family: "PingFangSC-Light";
|
margin-bottom: 0.05rem;
|
}
|
|
.stockName {
|
/*font-family: "PingFang-SC-Heavy";*/
|
margin-right: 1.2%;
|
}
|
|
.flagBox {
|
width: 1.6%;
|
height: 12px;
|
border-radius: 2px;
|
line-height: 12px;
|
color: #fff;
|
font-size: 0.786/5rem;
|
text-align: center;
|
margin-right: 1px;
|
}
|
|
.rFlag {
|
background-color: #f39800;
|
}
|
|
.tFlag {
|
background-color: #125fd9;
|
}
|
|
.exchangeInfo {
|
font-size: 0.814/5rem;
|
color: #666;
|
height: 15px;
|
line-height: 15px;
|
font-weight: bold;
|
text-align: center;
|
}
|
|
.exchangeInfo > span {
|
margin-right: 1.3%;
|
font-family: "PingFangSC-Light";
|
}
|
|
.bodyBg {
|
background-color: #2e3237;
|
}
|
|
.blockBg {
|
background: #151515;
|
margin-top: 5px;
|
}
|
|
/*价格部分*/
|
.exchangeData {
|
padding: 0 2%;
|
// border-bottom: 1px solid #2e3237;
|
// background-color: #fff;
|
font-size: 1.3/5rem;
|
padding-top: 0px;
|
background: #151515;
|
}
|
|
.exchangeData .priceCurrent,
|
.exchangeData .priceHL,
|
.exchangeData .priceOpen,
|
.exchangeData .priceAmount {
|
float: left;
|
}
|
|
.exchangeData .priceCurrent {
|
width: 30%;
|
}
|
|
.exchangeData .priceHL {
|
width: 22%;
|
box-sizing: border-box;
|
padding-right: 2.3%;
|
}
|
|
.exchangeData .priceOpen {
|
width: 24.1%;
|
box-sizing: border-box;
|
padding-right: 2%;
|
}
|
|
.exchangeData .priceAmount {
|
width: 23.9%;
|
}
|
|
.exchangeData .priceHL .low,
|
.exchangeData .priceOpen .change,
|
.exchangeData .priceAmount .totalValue {
|
height: 27px;
|
line-height: 27px;
|
}
|
|
.exchangeData .priceHL span,
|
.exchangeData .priceOpen span,
|
.exchangeData .priceAmount span {
|
float: right;
|
}
|
|
.priceCurrent .priceCurrentNum {
|
font-size: 2/5rem;
|
padding-left: 1.4%;
|
height: 29px;
|
line-height: 29px;
|
}
|
|
.priceCurrent .riseNum,
|
.priceCurrent .risePrecent {
|
font-size: 0.926/5rem;
|
font-weight: bold;
|
height: 18px;
|
line-height: 18px;
|
}
|
|
.priceCurrent .riseNum {
|
margin-right: 11.4%;
|
}
|
|
.priceHL .high,
|
.priceOpen .open,
|
.priceAmount .num {
|
padding-top: 7px;
|
height: 27px;
|
line-height: 20px;
|
}
|
|
.exchangeInfoT,
|
.indexExchangeInfoT {
|
width: 100%;
|
border-collapse: collapse;
|
border: none;
|
}
|
|
.exchangeInfoT tr,
|
.indexExchangeInfoT tr {
|
height: 1.6/5rem;
|
line-height: 1.6/5rem;
|
}
|
|
.exchangeInfoT tr > td {
|
font-size: 1.3/5rem;
|
}
|
|
/* .exchangeInfoT .pe {box-sizing: border-box;width: 10%; text-align: right;} */
|
.exchangeInfoT tr > td:nth-of-type(2) {
|
width: 22%;
|
padding-right: 3%;
|
text-align: right;
|
}
|
|
.exchangeInfoT tr > td:nth-of-type(3) {
|
width: 35.5%;
|
padding-right: 6%;
|
text-align: right;
|
}
|
|
.exchangeInfoT .name {
|
float: left;
|
}
|
|
.exchangeInfoT tr > td:last-child {
|
text-align: right;
|
}
|
|
.indexExchangeInfoT tr > td:first-child {
|
width: 30%;
|
}
|
|
.indexExchangeInfoT tr > td:nth-of-type(2) {
|
width: 22%;
|
}
|
|
.indexExchangeInfoT tr > td:nth-of-type(3) {
|
width: 24.1%;
|
}
|
|
.shrinkWrap {
|
text-align: center;
|
height: 15px;
|
}
|
|
.shrinkWrap img {
|
display: inline-block;
|
height: 12px;
|
vertical-align: top;
|
transform: rotate(180deg);
|
-webkit-transform: rotate(180deg);
|
}
|
|
.shrinkWrap img.open {
|
transform: rotate(0deg);
|
-webkit-transform: rotate(0deg);
|
}
|
|
/*k线部分*/
|
.tabsContent .item {
|
display: none;
|
overflow: hidden;
|
}
|
|
.tabsContent .item.active {
|
display: block;
|
}
|
|
.tabsTitle {
|
height: 28px;
|
line-height: 28px;
|
font-size: 1.3rem;
|
display: flex;
|
flex-direction: row;
|
background-color: #1d1d24;
|
box-sizing: border-box;
|
border: 1px solid #292a32;
|
span {
|
width: auto;
|
flex: 1;
|
}
|
}
|
|
.tabsTitle span,
|
.tabsTitle li {
|
width: 15%;
|
height: 27px;
|
line-height: 27px;
|
// border-bottom: 2px solid transparent;
|
display: inline-block;
|
text-align: center;
|
vertical-align: top;
|
font-size: 0.21rem;
|
font-family: MicrosoftYaHeiLight;
|
font-weight: 400;
|
color: rgba(255, 255, 255, 1);
|
box-sizing: border-box;
|
border-right: 1px solid #292a32;
|
&:last-child {
|
border: 0;
|
}
|
}
|
|
.tabsTitle span.active,
|
.tabsTitle li.active {
|
// border-bottom-color: #217cd9;
|
// color: #217cd9;
|
background-color: #282a32;
|
}
|
|
.tabsTitle select {
|
border: 1px solid #21252a;
|
color: #666;
|
font: 12px "PingFang-SC-Regular", "Microsoft Yahei";
|
outline: none;
|
background: #151515;
|
margin-right: 10px;
|
}
|
|
.tabsTitle .selectActive {
|
border-bottom: 2px solid #217cd9;
|
color: #217cd9;
|
}
|
|
/* .tabsTitle select::after { content: ""; width: 0; height: 0; position: absolute; right: 8px; top: 8px; border-style: solid; border-width: 6px 5px 0; border-color: #666 transparent transparent;} */
|
#minuteKline,
|
#kline {
|
float: left;
|
position: relative;
|
overflow: hidden;
|
}
|
|
/*#kline,#minuteKline { margin-left: 4%;}*/
|
.rightMinute {
|
// float: right;
|
// width: 33.3%;
|
}
|
|
.minute-tab {
|
// border-top: none;
|
}
|
|
.minute-tab li {
|
float: left;
|
width: 50%;
|
font-size: 1.2/5rem;
|
}
|
|
.kLineTabs .tabsTitle {
|
// padding-left: 2%;
|
}
|
|
.kLineTabs .tabsTitle span {
|
font-size: 1.3/5rem;
|
width: 16%;
|
}
|
|
.kLineTabs .tabsTitle span:last-child {
|
width: 18%;
|
}
|
|
.minuteWrap #minuteChart,
|
.minuteWrap #minuteFiveDaychart,
|
.minuteWrap #kline {
|
float: left;
|
overflow: hidden;
|
}
|
|
.minuteWrap .indexWrap {
|
width: 100%;
|
height: 30px;
|
background-color: #151515;
|
font-size: 12px;
|
overflow: hidden;
|
display: flex;
|
flex-direction: row;
|
}
|
|
.indexWrap .indexItem {
|
display: block;
|
line-height: 30px;
|
flex-grow: 1;
|
text-align: center;
|
}
|
|
.indexWrap .indexItem.active {
|
color: #ee1515;
|
background-color: #151515;
|
}
|
|
#minuteFive .tableOne {
|
margin-bottom: 12px;
|
padding-top: 13px;
|
}
|
|
#minuteFive .tableTwo {
|
padding-top: 10px;
|
border-top: 1px solid #21252a;
|
}
|
|
#minuteFive td,
|
#minute td {
|
font: 1.2/5rem "Microsoft YaHei";
|
line-height: 27px;
|
}
|
|
#minute td {
|
line-height: 29px;
|
}
|
|
.phoneRight {
|
border: 1px solid #151515;
|
float: right;
|
margin-right: 0.7%;
|
width: 12.5%;
|
height: 335px;
|
margin-top: 20px;
|
background-color: #151515;
|
height: auto;
|
}
|
|
.phoneRight li {
|
line-height: 37px;
|
font-size: 1.2/5rem;
|
text-align: center;
|
}
|
|
.phoneRight li.active {
|
color: #217cd9;
|
}
|
|
#showMinute {
|
position: relative;
|
}
|
|
#showMinute:after {
|
content: "";
|
border-width: 6px;
|
border-style: solid;
|
border-color: #217cd9 transparent transparent transparent;
|
position: absolute;
|
bottom: 6px;
|
right: -6px;
|
}
|
|
.tableOne,
|
.tableTwo {
|
width: 98%;
|
margin-left: 1%;
|
margin-right: 1%;
|
}
|
|
.tableInfo {
|
width: 100%;
|
margin-top: 13px;
|
}
|
|
.tableOne tr > td:nth-of-type(1),
|
.tableTwo tr > td:nth-of-type(1),
|
.tableInfo tr > td:nth-of-type(1) {
|
width: 26%;
|
text-align: left;
|
}
|
|
.tableOne tr > td:nth-of-type(2),
|
.tableTwo tr > td:nth-of-type(2),
|
.tableInfo tr > td:nth-of-type(2) {
|
width: 37%;
|
text-align: right;
|
}
|
|
.tableOne tr > td:nth-of-type(3),
|
.tableTwo tr > td:nth-of-type(3),
|
.tableInfo tr > td:nth-of-type(3) {
|
width: 25%;
|
text-align: right;
|
}
|
|
.fiveDayMinuteWrap {
|
display: none;
|
}
|
|
/*问答部分*/
|
.qAList {
|
padding: 0 4%;
|
}
|
|
.qAList > li {
|
padding: 13px 0 7px 0;
|
border-bottom: 1px solid #21252a;
|
}
|
|
.qAList > li:last-child {
|
border-bottom: none;
|
}
|
|
.qATtabs .tabsTitle span {
|
width: 16%;
|
}
|
|
.qATtabs .tabsTitle span:nth-of-type(2) {
|
width: 20%;
|
}
|
|
.qAList .qText {
|
color: #f39800;
|
font: 1.071/5rem "PingFang-SC-Regular";
|
}
|
|
.qAList .aText {
|
margin-top: 9px;
|
color: #217cd9;
|
font: 1.071/5rem "PingFang-SC-Regular";
|
}
|
|
.qAList .time,
|
.qAList .time > span {
|
font: 0.857/5rem "PingFang-SC-Regular";
|
color: #8b8b8b;
|
}
|
|
.qAList .time > .author {
|
margin-right: 9.6%;
|
}
|
|
.qAList > li > .qText,
|
.qAList > li > .aText,
|
.qAList > li > .time {
|
line-height: 25px;
|
}
|
|
.bgQA {
|
display: inline-block;
|
width: 21px;
|
height: 21px;
|
box-sizing: border-box;
|
padding-top: 2px;
|
font-size: 1.071/5rem;
|
line-height: 21px;
|
text-align: center;
|
border-radius: 4px;
|
color: #fff;
|
font-weight: 500;
|
position: relative;
|
background-color: #ccc;
|
margin-right: 2.5%;
|
}
|
|
.bgQA:after {
|
content: "";
|
border-width: 4px;
|
border-style: solid;
|
border-color: #ccc transparent transparent transparent;
|
position: absolute;
|
bottom: -8px;
|
left: 50%;
|
margin-left: -4px;
|
}
|
|
.qAList .qText .bgQA {
|
background-color: #f39800;
|
}
|
|
.qAList .qText .bgQA:after {
|
border-color: #f39800 transparent transparent transparent;
|
}
|
|
.qAList .aText .bgQA {
|
background-color: #217cd9;
|
}
|
|
.qAList .aText .bgQA:after {
|
border-color: #217cd9 transparent transparent transparent;
|
}
|
|
.likeNewsList {
|
padding: 0 4%;
|
}
|
|
.likeNewsList li {
|
border-bottom: 1px solid #21252a;
|
padding: 10px 0 3px 0;
|
}
|
|
.likeNewsList li:last-child {
|
border-bottom: none;
|
}
|
|
.likeNewsList li:nth-of-type(even) {
|
background-color: #fff;
|
}
|
|
.likeNewsList .title,
|
.likeNewsList .sourceInfo {
|
line-height: 23px;
|
}
|
|
.likeNewsList .title {
|
font: 1.071/5rem "PingFang-SC-Regular";
|
white-space: nowrap;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
color: #333;
|
}
|
|
.likeNewsList .source {
|
font: 0.857/5rem "PingFang-SC-Regular";
|
color: #8b8b8b;
|
}
|
|
.likeNewsList .time {
|
font: 0.857/5rem "ArialMT";
|
color: #656870;
|
float: right;
|
line-height: 23px;
|
}
|
|
.noticeList .title {
|
color: #217cd9;
|
white-space: pre-wrap;
|
}
|
|
.noData {
|
font-size: 1.786/5rem;
|
font-weight: bold;
|
line-height: 100px;
|
height: 100px;
|
text-align: center;
|
}
|
|
.qATtabs .tabsContent {
|
min-height: 100px;
|
}
|
|
/* .exchangeInfoT {display: none;} */
|
|
@media screen and (max-width: 320px) {
|
.exchangeData {
|
padding: 0 2%;
|
}
|
|
.exchangeData .priceAmount {
|
width: 27.9%;
|
}
|
}
|
|
.link-newslist {
|
margin-bottom: 40px;
|
}
|
|
.bottom-link {
|
position: fixed;
|
left: 0;
|
bottom: 0;
|
width: 100%;
|
height: 40px;
|
line-height: 40px;
|
text-align: center;
|
background-color: #ffffff;
|
border: solid 1px #e8e8e8;
|
font-size: 15px;
|
color: #666666;
|
}
|
|
.business-img {
|
position: relative;
|
top: 7px;
|
display: inline-block;
|
width: 26px;
|
height: 26px;
|
}
|
.red-theme {
|
.exchangeData {
|
background-color: white;
|
margin-bottom: 0.2rem;
|
.overall-item {
|
h4 {
|
color: #656565;
|
}
|
span {
|
color: #212121;
|
}
|
}
|
}
|
.k-left-content {
|
.tabsTitle {
|
background: none;
|
border-color: #989898;
|
border: 0;
|
span {
|
color: #212121;
|
border-top: 1px solid #989898;
|
border-bottom: 1px solid #989898;
|
border-right: 1px solid #989898;
|
&:first-child {
|
border-left: 1px solid #989898;
|
}
|
&.active {
|
border-color: #bb1715;
|
background: none;
|
}
|
&.active-pre {
|
border-right: 1px solid #bb1715;
|
}
|
}
|
}
|
.indexWrap {
|
background: white;
|
.indexItem {
|
color: #212121;
|
}
|
.active {
|
background: white;
|
color: #bb1815;
|
}
|
}
|
}
|
.k-right-content {
|
.phoneRight {
|
background: none;
|
border: 0;
|
.ulOne {
|
background-color: white;
|
}
|
}
|
.right-minute-content {
|
background-color: white;
|
.tableMinuteContent {
|
table {
|
tr {
|
td {
|
color: #212121;
|
}
|
}
|
}
|
}
|
.tableTwo {
|
border: 0 !important;
|
}
|
}
|
.minute-tab {
|
background-color: #bb1815;
|
border-color: #bb1815;
|
.active {
|
background-color: #bb1815;
|
border-color: #dcdbdb;
|
}
|
.active-minute {
|
background-color: #bb1815;
|
border-color: #dcdbdb;
|
}
|
}
|
}
|
}
|
</style>
|
