| src/page/kline/components/kLine.vue | ●●●●● patch | view | raw | blame | history | |
| src/page/kline/index.vue | ●●●●● patch | view | raw | blame | history |
src/page/kline/components/kLine.vue
@@ -6,27 +6,60 @@ <div class="periodWrap kline_periodWrap" ref="kline_periodWrap"> <!-- DWM 分 --> <div class="btnGroup" style="position: relative"> <div class="btn2" v-for="(item, index) in KLinePeriodMenu" :class="{ active: KLinePeriodIndex == index }" :key="item.ID" @click="OnClickKLinePeriodMenu(index, item, 'kline')"> <div class="btn2" v-for="(item, index) in KLinePeriodMenu" :class="{ active: KLinePeriodIndex == index }" :key="item.ID" @click="OnClickKLinePeriodMenu(index, item, 'kline')" > <span>{{ item.Name }}</span> </div> <div style="position: absolute; right: 0; top: 25px; z-index: 99" v-if="isShow == true"> <div class="btnGroup" v-show="IsShowRightMenu" style="display: flex; flex-direction: column"> <div class="btn" :class="{ active: KLineRightIndex == index }" v-for="(item, index) in KLineRightMenu" :key="item.ID" style="padding: 10px" @click="OnClickKLineRightMenu(index, item)"> <div style="position: absolute; right: 0; top: 25px; z-index: 99" v-if="isShow == true" > <div class="btnGroup" v-show="IsShowRightMenu" style="display: flex; flex-direction: column" > <div class="btn" :class="{ active: KLineRightIndex == index }" v-for="(item, index) in KLineRightMenu" :key="item.ID" style="padding: 10px" @click="OnClickKLineRightMenu(index, item)" > {{ item.Name }} </div> <div class="btn" v-for="item in KLineIndexMenu" :key="item.ID" style="padding: 10px" @click="ChangeKLineIndex(item)"> <div class="btn" v-for="item in KLineIndexMenu" :key="item.ID" style="padding: 10px" @click="ChangeKLineIndex(item)" > {{ item.Name }} </div> </div> </div> </div> </div> <div class="hqchart" id="hqchart_minute" ref="kline" v-show="chartType == 'minute'"></div> <div class="hqchart" id="hqchart_kline" ref="kline2" v-show="chartType == 'kline'"></div> <div class="hqchart" id="hqchart_minute" ref="kline" v-show="chartType == 'minute'" ></div> <div class="hqchart" id="hqchart_kline" ref="kline2" v-show="chartType == 'kline'" ></div> </div> </div> </div> @@ -58,7 +91,7 @@ // { Index:"KDJ", Modify: false, Change: true, Close: true}, // { Index: "KDJ", Modify: false, Change: false, Close: false } ], SplashTitle: 'loading...', SplashTitle: "loading...", Symbol: "AAPL.usa", IsAutoUpdate: true, // 是自动更新数据 AutoUpdateFrequency: 20000, @@ -919,7 +952,7 @@ } // { Index: 'MACD', Modify: true, Change: true, Close: false } ], SplashTitle: 'loading...', SplashTitle: "loading...", Symbol: "600015.sh", IsAutoUpdate: true, // 是自动更新数据 AutoUpdateFrequency: 15000, @@ -1189,6 +1222,9 @@ clearInterval(this.timerss); // 在组件销毁前清除定时器 this.timerss = null; }, destroyed() { clearInterval(this.timerss); // 在组件销毁前清除定时器 }, methods: { OnSize() { var width = this.$refs.right.clientWidth; @@ -1332,32 +1368,35 @@ clearInterval(this.timerss); this.timerss = null; } this.timerss = setInterval(() => { switch (data.Name) { // 分时图数据对接 case "MinuteChartContainer::RequestMinuteData": EastMoney.HQData.NetworkFilter(data, callback); break; case "MinuteChartContainer::RequestHistoryMinuteData": EastMoney.HQData.NetworkFilter(data, callback); break; case "KLineChartContainer::RequestHistoryData": // 日线全量数据下载 EastMoney.HQData.NetworkFilter(data, callback); break; case "KLineChartContainer::RequestRealtimeData": // 日线实时数据更新 this.timerss = setInterval(() => { EastMoney.HQData.NetworkFilter(data, callback); break; case "KLineChartContainer::RequestFlowCapitalData": // 流通股本 EastMoney.HQData.NetworkFilter(data, callback); break; case "KLineChartContainer::ReqeustHistoryMinuteData": // 分钟全量数据下载 EastMoney.HQData.NetworkFilter(data, callback); break; case "KLineChartContainer::RequestMinuteRealtimeData": // 分钟增量数据更新 EastMoney.HQData.NetworkFilter(data, callback); break; } // switch (data.Name) { // // 分时图数据对接 // case "MinuteChartContainer::RequestMinuteData": // EastMoney.HQData.NetworkFilter(data, callback); // break; // case "MinuteChartContainer::RequestHistoryMinuteData": // EastMoney.HQData.NetworkFilter(data, callback); // break; // case "KLineChartContainer::RequestHistoryData": // 日线全量数据下载 // EastMoney.HQData.NetworkFilter(data, callback); // break; // case "KLineChartContainer::RequestRealtimeData": // 日线实时数据更新 // EastMoney.HQData.NetworkFilter(data, callback); // break; // case "KLineChartContainer::RequestFlowCapitalData": // 流通股本 // EastMoney.HQData.NetworkFilter(data, callback); // break; // case "KLineChartContainer::ReqeustHistoryMinuteData": // 分钟全量数据下载 // EastMoney.HQData.NetworkFilter(data, callback); // break; // case "KLineChartContainer::RequestMinuteRealtimeData": // 分钟增量数据更新 // EastMoney.HQData.NetworkFilter(data, callback); // break; // } }, 5000); },
@@ -81,14 +81,19 @@ <span class="i_icon">{{ bayType }}</span> <span class="i_hint" style="color:#777">{{ singDetails.spell }}</span> </div> <div class="detail_title_a">{{ singDetails.name }}({{ singDetails.gid }})</div> <div class="detail_title_a"> {{ singDetails.name }}({{ singDetails.gid }}) </div> <div class="real_time_detail"> <div class="left_now_price"> <div class="top_now"> <!-- <span :class="singDetails.nowPrice - singDetails.preclose_px > 0 ? 'price green' : 'price red'">{{ singDetails.nowPrice }}</span> --> <span :class="singDetails.hcrate > 0 ? 'price green' : 'price red'">{{ singDetails.nowPrice }}</span> <span :class="singDetails.hcrate > 0 ? 'price green' : 'price red'" >{{ singDetails.nowPrice }}</span > </div> <div class="bottom_now"> <div> @@ -99,14 +104,19 @@ <span v-else> {{ (singDetails.nowPrice - singDetails.preclose_px).toFixed(2) }}</span> }}</span > </div> <div class="tew" :class="singDetails.hcrate > 0 ? 'number green' : 'number red'"> <div class="tew" :class="singDetails.hcrate > 0 ? 'number green' : 'number red'" > <span v-if="singDetails.nowPrice === 0">-</span> <!-- <span v-else>({{ singDetails.nowPrice - singDetails.preclose_px > 0 ? '+' : '' }} {{ singDetails.hcrate ? singDetails.hcrate : '0' }}%)</span> --> <span v-else> ({{ singDetails.hcrate ? singDetails.hcrate : "0" }}%)</span> ({{ singDetails.hcrate ? singDetails.hcrate : "0" }}%)</span > </div> </div> </div> @@ -117,16 +127,24 @@ <!-- <span :class="singDetails.preclose_px < 0 ? 'number green' : 'number red'">{{ singDetails.open_px }}</span> --> <span :class="singDetails.hcrate > 0 ? 'number green' : 'number red' ">{{ singDetails.open_px }}</span> <span :class=" singDetails.hcrate > 0 ? 'number green' : 'number red' " >{{ singDetails.open_px }}</span > </div> <div class="rights topes"> <span class="titles">{{ $t("hj73") }}</span> <!-- <span :class="singDetails.preclose_px < 0 ? 'number green' : 'number red'">{{ singDetails.today_max }}</span> --> <span :class="singDetails.hcrate > 0 ? 'number green' : 'number red' ">{{ singDetails.today_max }}</span> <span :class=" singDetails.hcrate > 0 ? 'number green' : 'number red' " >{{ singDetails.today_max }}</span > </div> </div> <div class="bottoms"> @@ -135,16 +153,24 @@ <!-- <span :class="singDetails.preclose_px < 0 ? 'number green' : 'number red'">{{ singDetails.preclose_px }}</span> --> <span :class="singDetails.hcrate > 0 ? 'number green' : 'number red' ">{{ singDetails.preclose_px }}</span> <span :class=" singDetails.hcrate > 0 ? 'number green' : 'number red' " >{{ singDetails.preclose_px }}</span > </div> <div class="rights bots"> <span class="titles">{{ $t("hj75") }}</span> <!-- <span :class="singDetails.preclose_px < 0 ? 'number green' : 'number red'">{{ singDetails.today_min }}</span> --> <span :class="singDetails.hcrate > 0 ? 'number green' : 'number red' ">{{ singDetails.today_min }}</span> <span :class=" singDetails.hcrate > 0 ? 'number green' : 'number red' " >{{ singDetails.today_min }}</span > </div> </div> </div> @@ -153,12 +179,16 @@ <div class="k_line_detail"> <Kline :key="key" :type="singDetails.type" /> </div> <div class="priect_top_bottom" style="display: none" v-if=" <div class="priect_top_bottom" style="display: none" v-if=" kLineDetails.if_us != 1 && kLineDetails.type != 'hk' && kLineDetails.type != 'hk' && kLineDetails.if_zhishu == 0 "> " > <div class="t_title"> <span>{{ $t("hj76") }}</span> </div> @@ -264,7 +294,11 @@ <div class="t_ma"> <span>{{ $t("hj80") }}</span> </div> <div class="ets" v-for="(item, i) in timedata.data.details" :key="i"> <div class="ets" v-for="(item, i) in timedata.data.details" :key="i" > <div class="left_sell1"> <span>{{ item.split(",")[0] }}</span> </div> @@ -277,7 +311,11 @@ <div class="t_ma"> <span>{{ $t("hj81") }}</span> </div> <div class="ets" v-for="(item, i) in timedata.data.details" :key="i"> <div class="ets" v-for="(item, i) in timedata.data.details" :key="i" > <div class="left_sell1"> <span>{{ item.split(",")[1] }}</span> </div> @@ -290,7 +328,11 @@ <div class="t_ma"> <span>{{ $t("hj82") }}</span> </div> <div class="ets" v-for="(item, i) in timedata.data.details" :key="i"> <div class="ets" v-for="(item, i) in timedata.data.details" :key="i" > <div class="left_sell1"> <span>{{ item.split(",")[2] }}</span> </div> @@ -384,7 +426,11 @@ <div class="btns"> <div class="lefts"> <div class="left_ca" @click="option()"> <img src="../../assets/img/meishoucang.png" alt v-if="isOptionOpt === false" /> <img src="../../assets/img/meishoucang.png" alt v-if="isOptionOpt === false" /> <img src="../../assets/img/shoucangle.png" alt v-else /> </div> <!-- <div class="right_xx" @click="handleJj()"> @@ -443,11 +489,19 @@ }, created() { // 进入页面的时候清除所以得计时器,防止页面切换的时候出现多个定时器 let end = setTimeout(function() {}, 0); for (let i = 0; i <= end; i++) { clearTimeout(i); clearInterval(i); } const { query } = this.$route; this.kLineDetails = query; if (query.if_us === "1") { this.getSingDetailUs(); } else { this.getSingDetails(); this.timer = setInterval(() => { this.getSingDetails(); }, 5000); @@ -457,6 +511,9 @@ this.getNohknews(); }, beforeDestroy() { this.clearInterval(this.timer); // 在组件销毁前清除定时器 }, destroyed() { this.clearInterval(this.timer); // 在组件销毁前清除定时器 }, // beforeDestroy() { @@ -825,10 +882,10 @@ background: #fff; .detail_title_a { font-size: .45rem; font-size: 0.45rem; font-weight: 500; margin-top: .2rem; line-height: .45rem; margin-top: 0.2rem; line-height: 0.45rem; } .i_icon { @@ -1118,7 +1175,7 @@ height: 70%; display: flex; align-items: center; padding-left: .3rem; padding-left: 0.3rem; >div { width: 50%; @@ -1140,7 +1197,7 @@ display: flex; align-items: center; justify-content: center; padding-right: .2rem; padding-right: 0.2rem; >div { border-radius: 0.15rem;
