|
|
@@ -135,59 +135,61 @@ export default () => {
|
|
|
|
|
|
return (
|
|
|
<div className="wapper">
|
|
|
- {isActivation && <React.Fragment>
|
|
|
-
|
|
|
- {loading &&
|
|
|
- <div className="loadingIndicator">
|
|
|
- <div className="loadingSpinner">
|
|
|
- <div className="loader">等待数据推送...</div>
|
|
|
- </div>
|
|
|
- <div ref={progressRef}> 等待数据推送 0%</div>
|
|
|
- </div>
|
|
|
- }
|
|
|
-
|
|
|
- <StockHeatmap ref={heatmapRef} width={windowDim[0]} height={windowDim[1]} autoScroll={autoScroll}
|
|
|
- toggleAutoScroll={toggleAutoScroll} />
|
|
|
-
|
|
|
- <div className="btnContainer">
|
|
|
- <button onClick={() => {
|
|
|
- if (heatmapRef.current !== null) heatmapRef.current.setZoomLevel(60)
|
|
|
- }}>1分钟视域
|
|
|
- </button>
|
|
|
- <button onClick={() => {
|
|
|
- if (heatmapRef.current !== null) heatmapRef.current.setZoomLevel(60 * 5)
|
|
|
- }}>5分钟视域
|
|
|
- </button>
|
|
|
- <button onClick={() => {
|
|
|
- if (heatmapRef.current !== null) heatmapRef.current.setZoomLevel(60 * 10)
|
|
|
- }}>10分钟视域
|
|
|
- </button>
|
|
|
- <button onClick={() => {
|
|
|
- if (heatmapRef.current !== null) heatmapRef.current.setZoomLevel(60 * 15)
|
|
|
- }}>15分钟视域
|
|
|
- </button>
|
|
|
- <button onClick={() => {
|
|
|
- if (heatmapRef.current !== null) heatmapRef.current.setZoomLevel(60 * 30)
|
|
|
- }}>30分钟视域
|
|
|
- </button>
|
|
|
- <button onClick={() => {
|
|
|
- if (heatmapRef.current !== null) heatmapRef.current.setZoomLevel(60 * 60)
|
|
|
- }}>60分钟视域
|
|
|
- </button>
|
|
|
- {!autoScroll &&
|
|
|
- <div className="playBtn" onClick={() => {
|
|
|
- setAutoScroll(true)
|
|
|
- }}> 继续
|
|
|
+ <div className={isActivation ? "visibilityVisible" : "visibilityHidden"}>
|
|
|
+ <React.Fragment>
|
|
|
+
|
|
|
+ {loading &&
|
|
|
+ <div className="loadingIndicator">
|
|
|
+ <div className="loadingSpinner">
|
|
|
+ <div className="loader">等待数据推送...</div>
|
|
|
+ </div>
|
|
|
+ <div ref={progressRef}> 等待数据推送 0%</div>
|
|
|
</div>
|
|
|
}
|
|
|
- {/* <button onClick={() => { */}
|
|
|
- {/* const HHmmss = window.prompt('Enter HH:mm:ss', '00:00:00'); */}
|
|
|
- {/* let split = HHmmss.split(':'); */}
|
|
|
- {/* let position = (+split[0]-9)*3600 + (+split[1]*60) + (+split[2]); */}
|
|
|
- {/* if (heatmapRef.current !== null) heatmapRef.current.moveDataWindow(position); */}
|
|
|
- {/* }}>Set Position</button> */}
|
|
|
- </div>
|
|
|
- </React.Fragment>}
|
|
|
+
|
|
|
+ <StockHeatmap ref={heatmapRef} width={windowDim[0]} height={windowDim[1]} autoScroll={autoScroll}
|
|
|
+ toggleAutoScroll={toggleAutoScroll} />
|
|
|
+
|
|
|
+ <div className="btnContainer">
|
|
|
+ <button onClick={() => {
|
|
|
+ if (heatmapRef.current !== null) heatmapRef.current.setZoomLevel(60)
|
|
|
+ }}>1分钟视域
|
|
|
+ </button>
|
|
|
+ <button onClick={() => {
|
|
|
+ if (heatmapRef.current !== null) heatmapRef.current.setZoomLevel(60 * 5)
|
|
|
+ }}>5分钟视域
|
|
|
+ </button>
|
|
|
+ <button onClick={() => {
|
|
|
+ if (heatmapRef.current !== null) heatmapRef.current.setZoomLevel(60 * 10)
|
|
|
+ }}>10分钟视域
|
|
|
+ </button>
|
|
|
+ <button onClick={() => {
|
|
|
+ if (heatmapRef.current !== null) heatmapRef.current.setZoomLevel(60 * 15)
|
|
|
+ }}>15分钟视域
|
|
|
+ </button>
|
|
|
+ <button onClick={() => {
|
|
|
+ if (heatmapRef.current !== null) heatmapRef.current.setZoomLevel(60 * 30)
|
|
|
+ }}>30分钟视域
|
|
|
+ </button>
|
|
|
+ <button onClick={() => {
|
|
|
+ if (heatmapRef.current !== null) heatmapRef.current.setZoomLevel(60 * 60)
|
|
|
+ }}>60分钟视域
|
|
|
+ </button>
|
|
|
+ {!autoScroll &&
|
|
|
+ <div className="playBtn" onClick={() => {
|
|
|
+ setAutoScroll(true)
|
|
|
+ }}> 继续
|
|
|
+ </div>
|
|
|
+ }
|
|
|
+ {/* <button onClick={() => { */}
|
|
|
+ {/* const HHmmss = window.prompt('Enter HH:mm:ss', '00:00:00'); */}
|
|
|
+ {/* let split = HHmmss.split(':'); */}
|
|
|
+ {/* let position = (+split[0]-9)*3600 + (+split[1]*60) + (+split[2]); */}
|
|
|
+ {/* if (heatmapRef.current !== null) heatmapRef.current.moveDataWindow(position); */}
|
|
|
+ {/* }}>Set Position</button> */}
|
|
|
+ </div>
|
|
|
+ </React.Fragment>
|
|
|
+ </div>
|
|
|
{!isActivation &&
|
|
|
<div className="layoutContainer">
|
|
|
<div className="activationBox">
|
