Skip to content

G
graph
Commit 647846e7 authored by wenli.huang@wuban.net.cn's avatar wenli.huang@wuban.net.cn
Browse files
Options

up

parent 857718e5
Show whitespace changes
Inline Side-by-side
Showing with 69 additions and 19 deletions
src/App.js
View file @ 647846e7
...@@ -17,16 +17,32 @@ class App extends Component { ...@@ -17,16 +17,32 @@ class App extends Component {
endText:'', endText:'',
value:0, value:0,
getValue:0, getValue:0,
time:-100,
getTime:-100,
blockOld:0,
count:0,
} }
inputChange=(e)=>{ inputChangeValue=(e)=>{
this.setState({ this.setState({
value:e.target.value value:e.target.value,
}) })
} }
getInput=()=>{ inputChangeTime=(e)=>{
this.setState({
time:e.target.value,
})
}
getInputHeight=()=>{
this.setState({ this.setState({
getValue:this.state.value getValue:this.state.value
}) })
console.log(this.state.getValue,'点击获取的value')
}
getInputTime=()=>{
this.setState({
getTime:this.state.time
})
console.log(this.state.getTime,'点击获取的time')
} }
componentDidMount(){ componentDidMount(){
let that = this let that = this
...@@ -66,6 +82,8 @@ class App extends Component { ...@@ -66,6 +82,8 @@ class App extends Component {
allBottomAxisXArr = BottomAxisX allBottomAxisXArr = BottomAxisX
allLinksArr = Links allLinksArr = Links
that.initChart(resData) that.initChart(resData)
console.log(this.state.getValue,'高')
console.log(this.state.getTime,'时间')
if(!that.interval){ if(!that.interval){
that.interval = setInterval(() => { that.interval = setInterval(() => {
// fetch(`/api/graph_by_height_and_duration?height=0&duration=${that.state.requestDuration}`,{ // fetch(`/api/graph_by_height_and_duration?height=0&duration=${that.state.requestDuration}`,{
...@@ -171,11 +189,26 @@ class App extends Component { ...@@ -171,11 +189,26 @@ class App extends Component {
}) })
if(params.start === 0){ if(params.start === 0){
myChart.showLoading() myChart.showLoading()
console.log(startBlock,'startBlock')
if(startBlock !=0 ){
that.setState({
blockOld:startBlock,
count:0,
})
} else if(startBlock == 0 || startBlock == "" || startBlock == undefined){
that.setState({
startBlock:blockOld,
count:count+1,
requestDuration:requestDuration*(count+1)
})
}
that.setState({ that.setState({
requestDuration:-100, requestDuration:-100,
duration:-10, duration:-10,
},()=>{ },()=>{
fetch(`/api/graph_by_height_and_duration?height=${startBlock}&duration=${that.state.requestDuration}`,{ fetch(`/api/graph_by_height_and_duration?height=${startBlock}&duration=${that.state.requestDuration}`,{
// fetch(`/api/graph_by_height_and_duration?height=${startBlock}&duration=${requestDuration}`,{
method:'GET', method:'GET',
headers:{ headers:{
'Content-Type':'application/json;charset=UTF-8' 'Content-Type':'application/json;charset=UTF-8'
...@@ -205,6 +238,7 @@ class App extends Component { ...@@ -205,6 +238,7 @@ class App extends Component {
if(params.end === 100){ if(params.end === 100){
myChart.showLoading() myChart.showLoading()
console.log(endBlock,'endBlock')
that.setState({ that.setState({
requestDuration:100, requestDuration:100,
duration:10, duration:10,
...@@ -241,6 +275,9 @@ class App extends Component { ...@@ -241,6 +275,9 @@ class App extends Component {
let flag=false let flag=false
options.series.map(item=>{ options.series.map(item=>{
item.data.map(item1=>{ item.data.map(item1=>{
console.log(item1.value[0],'item.value')
console.log(endValue,'endValue')
console.log(startValue,'startValue')
if(startValue <= item1.value[0] && endValue >= item1.value[0]){ if(startValue <= item1.value[0] && endValue >= item1.value[0]){
if(item1.value[7] === 'Witness'){ if(item1.value[7] === 'Witness'){
flag = true flag = true
...@@ -360,7 +397,8 @@ class App extends Component { ...@@ -360,7 +397,8 @@ class App extends Component {
lineList[j].Round, lineList[j].Round,
lineList[j].Index, lineList[j].Index,
lineList[j].ID, lineList[j].ID,
lineList[j].Role lineList[j].Role,
lineList[j].TxCount
]); ]);
} }
target.push(list); target.push(list);
...@@ -557,6 +595,7 @@ class App extends Component { ...@@ -557,6 +595,7 @@ class App extends Component {
div.style.display = 'block' div.style.display = 'block'
document.querySelector('html').appendChild(div) document.querySelector('html').appendChild(div)
} }
var styleCss=`position: absolute;margin-left:35px;z-index: 99999;color: #fff;font-size: 12px;padding: 5px;display: inline;border-radius: 4px;background-color: #303133;box-shadow: rgba(0, 0, 0, 0.3) 2px 2px 8px` var styleCss=`position: absolute;margin-left:35px;z-index: 99999;color: #fff;font-size: 12px;padding: 5px;display: inline;border-radius: 4px;background-color: #303133;box-shadow: rgba(0, 0, 0, 0.3) 2px 2px 8px`
myChart.on('mouseover',function(params){ myChart.on('mouseover',function(params){
if (params.componentType === 'yAxis') { if (params.componentType === 'yAxis') {
...@@ -576,7 +615,11 @@ class App extends Component { ...@@ -576,7 +615,11 @@ class App extends Component {
elementDiv = document.querySelector('#extension') elementDiv = document.querySelector('#extension')
elementStyle = styleCss elementStyle = styleCss
elementDiv.style.cssText = elementStyle elementDiv.style.cssText = elementStyle
elementDiv.innerHTML=`<p>${moment(parseInt(params.data.value[0]/1000000)).format('YYYY-MM-DD HH:mm:ss.SSS')}</p><p>round：${params.data.value[4]}</p>` elementDiv.innerHTML=`
<p>${moment(parseInt(params.data.value[0]/1000000)).format('YYYY-MM-DD HH:mm:ss.SSS')}</p>
<p>round：${params.data.value[4]}</p>
<p>TxCount： ${params.data.value[8]}</p>
`
document.querySelector('html').onmousemove = function (event) { document.querySelector('html').onmousemove = function (event) {
var elementDiv = document.querySelector('#extension') var elementDiv = document.querySelector('#extension')
var xx = event.pageX - 10 var xx = event.pageX - 10
...@@ -618,21 +661,25 @@ class App extends Component { ...@@ -618,21 +661,25 @@ class App extends Component {
render() { render() {
const {startText,endText}=this.state const {startText,endText}=this.state
return ( return (
// <div>
// <div id="main" className="container" style={{position:'relative', padding: '50px', boxSizing:'border-box', width: '100%', height: 900 }}>
// </div>
// <div style={{position:'absolute',left:'1%',top:'70%',fontSize:'12px',color:'#80828a'}}>{startText}</div>
// <div style={{position:'absolute',right:'5%',top:'70%',fontSize:'12px',color:'#80828a'}}>{endText}</div>
// </div>
<div> <div>
<div style={{width:'50%',display:'flex',justifyContent:'space-around'}}>
<div> <div>
<input value={this.state.value} onChange={this.inputChangeValue} style={{width:'30%',textAlign:'center'}}/>
<button onClick={this.getInputHeight} style={{cursor:'pointer'}}>切换高度</button>
</div>
{/* <div>
<input value={this.state.time} onChange={this.inputChangeTime} style={{width:'30%',textAlign:'center'}}/>
<button onClick={this.getInputTime} style={{cursor:'pointer'}}>切换时间</button>
</div> */}
<div>当前高度：{this.state.value}</div>
<div>当前时间：{this.state.requestDuration}</div>
</div>
<div style={{position:'relative'}}>
<div id="main" className="container" style={{position:'relative', padding: '50px', boxSizing:'border-box', width: '100%', height: 900 }}> </div> <div id="main" className="container" style={{position:'relative', padding: '50px', boxSizing:'border-box', width: '100%', height: 900 }}> </div>
<div style={{position:'absolute',left:'1%',top:'70%',fontSize:'12px',color:'#80828a'}}>{startText}</div> <div style={{position:'absolute',left:'1%',top:'91%',fontSize:'12px',color:'#80828a'}}>{startText}</div>
<div style={{position:'absolute',right:'5%',top:'70%',fontSize:'12px',color:'#80828a'}}>{endText}</div> <div style={{position:'absolute',right:'5%',top:'91%',fontSize:'12px',color:'#80828a'}}>{endText}</div>
</div> </div>
<input value={this.state.value} onChange={this.inputChange} style={{width:'10%',marginLeft:'5%'}}/>
<button onClick={this.getInput}>Click</button>
</div> </div>
); );
} }
......
src/setupProxy.js
View file @ 647846e7
...@@ -2,9 +2,12 @@ const { createProxyMiddleware } = require('http-proxy-middleware'); ...@@ -2,9 +2,12 @@ const { createProxyMiddleware } = require('http-proxy-middleware');
module.exports = function (app) { module.exports = function (app) {
app.use(createProxyMiddleware('/api', app.use(createProxyMiddleware('/api',
{ {
// "target": "http://54.168.125.67:26657",
"target":'http://15.161.127.241:30001', "target":'http://15.161.127.241:30001',
// "target": "http://54.168.125.67:26657",
// "target": "http://3.9.177.160:50080", // "target": "http://3.9.177.160:50080",
// "target":'http://52.221.177.10:30181',
"changeOrigin": true, "changeOrigin": true,
"pathRewrite": { "pathRewrite": {
"^/api": "/" "^/api": "/"
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment