| | |
| | | <div class="home_ltr"> |
| | | <div class="meta_box"> |
| | | <div> |
| | | <div |
| | | class="code" |
| | | :class="{ lc_c: obj.hcrate > 0, r_c: obj.hcrate < 0 }" |
| | | > |
| | | <div class="code" :class="{ lc_c: obj.hcrate > 0, r_c: obj.hcrate < 0 }"> |
| | | {{ obj.spell }} |
| | | </div> |
| | | <div class="name">{{ obj.name }}</div> |
| | |
| | | |
| | | <div class="tabs_box"> |
| | | <el-tabs @tab-click="handleClick"> |
| | | <el-tab-pane |
| | | :label="item.Name" |
| | | :Id="item.ID" |
| | | v-for="item in KLinePeriodMenu" |
| | | :key="item.ID" |
| | | ></el-tab-pane> |
| | | <el-tab-pane :label="item.Name" :Id="item.ID" v-for="item in KLinePeriodMenu" :key="item.ID"></el-tab-pane> |
| | | </el-tabs> |
| | | </div> |
| | | |
| | | <div ref="rightContent" class="map_box"> |
| | | <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> |
| | | </template> |
| | | |
| | | <script> |
| | | let timerss1 = [] |
| | | let timerss2 = [] |
| | | import HQChart from "hqchart"; |
| | | import "hqchart/src/jscommon/umychart.resource/css/tools.css"; |
| | | import "hqchart/src/jscommon/umychart.resource/font/iconfont.css"; |
| | |
| | | HQChart.Chart.MARKET_SUFFIX_NAME.GetMarketStatus = function (symbol) { |
| | | return 2; |
| | | }; // 一直交易 |
| | | function DefaultData() {} |
| | | function DefaultData() { } |
| | | |
| | | DefaultData.GetMinuteOption = function () { |
| | | var option = { |
| | |
| | | props: { |
| | | obj: { |
| | | type: Object, |
| | | default: () => {}, |
| | | default: () => { }, |
| | | }, |
| | | }, |
| | | data() { |
| | |
| | | chartType: "kline", |
| | | KLineChart: null, // 图形控件 K线图 |
| | | Chart: null, // 图形控件 分时图 |
| | | timerss1: null, |
| | | timerss2: null, |
| | | isShow: false, |
| | | MinuteDayMenu: DefaultData.GetMinuteDayMenu(), |
| | | KLineRightMenu: DefaultData.GetKLineRightMenu(), |
| | |
| | | this.init(); |
| | | }, |
| | | beforeDestroy() { |
| | | this.KLineChart.ChartDestory(); |
| | | this.Chart.ChartDestory(); |
| | | if (this.timerss1) { |
| | | clearInterval(this.timerss1); |
| | | } |
| | | if (this.timerss2) { |
| | | clearInterval(this.timerss2); |
| | | } |
| | | this.clearTime(); |
| | | }, |
| | | methods: { |
| | |
| | | }, |
| | | // 清除所有定时器 |
| | | clearTime() { |
| | | // 创建一个额外的定时器以获取当前最大定时器 ID |
| | | let lastIntervalId = setInterval(() => {}, 1000); |
| | | // 遍历并清除所有定时器 |
| | | for (let i = 1; i <= lastIntervalId; i++) { |
| | | clearInterval(i); |
| | | clearTimeout(i); |
| | | } |
| | | timerss1.forEach(id => clearInterval(id)); |
| | | timerss1 = []; |
| | | timerss2.forEach(id => clearInterval(id)); |
| | | timerss2 = []; |
| | | }, |
| | | init() { |
| | | this.OnSize(); |
| | |
| | | EastMoney.HQData.Log("[HQChartDemo::NetworkFilter] data", data); |
| | | |
| | | EastMoney.HQData.NetworkFilter(data, callback); |
| | | this.timerss1 = setInterval(() => { |
| | | |
| | | let timeId = setInterval(() => { |
| | | EastMoney.HQData.NetworkFilter(data, callback); |
| | | }, 2000); |
| | | timerss1.push(timeId); |
| | | }, |
| | | |
| | | NetworkFilter2( |
| | |
| | | ) { |
| | | EastMoney.HQData.Log("[HQChartDemo::NetworkFilter] data", data); |
| | | |
| | | if (this.timerss2) { |
| | | clearInterval(this.timerss2); |
| | | this.timerss2 = null; |
| | | } |
| | | this.timerss2 = setInterval(() => { |
| | | let timeId = setInterval(() => { |
| | | EastMoney.HQData.NetworkFilter(data, callback); |
| | | console.log("另一个的数据", data); |
| | | }, 2000); |
| | | timerss2.push(timeId); |
| | | }, |
| | | }, |
| | | }; |
| | |
| | | gap: 16px; |
| | | align-items: center; |
| | | padding: 10px 16px 6px; |
| | | |
| | | .attr_item { |
| | | font-size: 14px; |
| | | display: flex; |
| | | flex-direction: column; |
| | | text-align: right; |
| | | margin-left: 10px; |
| | | |
| | | .label { |
| | | color: #999; |
| | | } |
| | | |
| | | .value { |
| | | color: #333; |
| | | } |
| | | } |
| | | |
| | | .price { |
| | | display: flex; |
| | | align-items: center; |
| | |
| | | margin-left: 10px; |
| | | } |
| | | } |
| | | |
| | | .name { |
| | | font-size: 12px; |
| | | color: #999; |
| | | } |
| | | |
| | | .code { |
| | | font-size: 20px; |
| | | } |