Skip to content

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

up

parent 4c4bf958
Hide whitespace changes
Inline Side-by-side
Showing with 168 additions and 89 deletions
src/App.js
View file @ 3485911c
...@@ -17,9 +17,10 @@ class App extends Component { ...@@ -17,9 +17,10 @@ class App extends Component {
endText:'', endText:'',
value:'', value:'',
getValue:0, getValue:0,
time:-100, // time:-100,
getTime:-100, // getTime:-100,
inputvalue:0, inputvalue:0,
inputtime:-100,
// blockOld:0, // blockOld:0,
// endblockOld:0, // endblockOld:0,
// count:0, // count:0,
...@@ -32,57 +33,96 @@ class App extends Component { ...@@ -32,57 +33,96 @@ class App extends Component {
}) })
} }
inputChangeTime=(e)=>{ inputChangeTime=(e)=>{
this.setState({ let times=this.refs.inputtime.value;
time:e.target.value, this.setState({
}) inputtime:times
})
} }
getInputHeight=()=>{ // getInputHeight=()=>{
// console.log(this.state.inputvalue,'点击获取的value')
console.log(this.state.inputvalue,'点击获取的value')
var chartDom = document.getElementById('main'); // var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom); // var myChart = echarts.init(chartDom);
myChart.showLoading() // myChart.showLoading()
fetch(`/api/graph_by_height_and_duration?height=${this.state.inputvalue}&duration=${this.state.requestDuration}`,{ // fetch(`/api/graph_by_height_and_duration?height=${this.state.inputvalue}&duration=${this.state.requestDuration}`,{
method:'GET', // method:'GET',
headers:{ // headers:{
'Content-Type':'application/json;charset=UTF-8' // 'Content-Type':'application/json;charset=UTF-8'
}, // },
}) // })
.then(res =>res.json()) // .then(res =>res.json())
.then((newData) => { // .then((newData) => {
myChart.hideLoading() // myChart.hideLoading()
let allRows0Arr = [] // let allRows0Arr = []
let allRows1Arr = [] // let allRows1Arr = []
let allRows2Arr = [] // let allRows2Arr = []
let allTopAxisXArr = [] // let allTopAxisXArr = []
let allBottomAxisXArr = [] // let allBottomAxisXArr = []
let allLinksArr = [] // let allLinksArr = []
let {Rows, AxisX, Links } = newData.result // let {Rows, AxisX, Links } = newData.result
let {TopAxisX, BottomAxisX} = AxisX // let {TopAxisX, BottomAxisX} = AxisX
allRows0Arr = Rows[0] // allRows0Arr = Rows[0]
allRows1Arr = Rows[1] // allRows1Arr = Rows[1]
allRows2Arr = Rows[2] // allRows2Arr = Rows[2]
allTopAxisXArr = TopAxisX // allTopAxisXArr = TopAxisX
allBottomAxisXArr = BottomAxisX // allBottomAxisXArr = BottomAxisX
allLinksArr = Links // allLinksArr = Links
newData.result.Rows[0] = allRows0Arr // newData.result.Rows[0] = allRows0Arr
newData.result.Rows[1] = allRows1Arr // newData.result.Rows[1] = allRows1Arr
newData.result.Rows[2] = allRows2Arr // newData.result.Rows[2] = allRows2Arr
newData.result.AxisX.TopAxisX = allTopAxisXArr // newData.result.AxisX.TopAxisX = allTopAxisXArr
newData.result.AxisX.BottomAxisX = allBottomAxisXArr // newData.result.AxisX.BottomAxisX = allBottomAxisXArr
newData.result.Links = allLinksArr // newData.result.Links = allLinksArr
this.initChart(newData) // this.initChart(newData)
}) // })
// }
getInput=()=>{
console.log(this.state.inputtime,'点击获取的time','切换的高度:',this.state.inputvalue)
console.log(typeof(this.state.inputvalue),typeof(this.state.inputtime),'类型')
if(this.state.inputtime == 0 || this.state.inputtime > 0 ){
alert("不可以为0且时间只能为负")
}
else{
var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
myChart.showLoading()
fetch(`/api/graph_by_height_and_duration?height=${this.state.inputvalue}&duration=${this.state.inputtime }`,{
method:'GET',
headers:{
'Content-Type':'application/json;charset=UTF-8'
},
})
.then(res =>res.json())
.then((newData) => {
myChart.hideLoading()
let allRows0Arr = []
let allRows1Arr = []
let allRows2Arr = []
let allTopAxisXArr = []
let allBottomAxisXArr = []
let allLinksArr = []
let {Rows, AxisX, Links } = newData.result
let {TopAxisX, BottomAxisX} = AxisX
allRows0Arr = Rows[0]
allRows1Arr = Rows[1]
allRows2Arr = Rows[2]
allTopAxisXArr = TopAxisX
allBottomAxisXArr = BottomAxisX
allLinksArr = Links
newData.result.Rows[0] = allRows0Arr
newData.result.Rows[1] = allRows1Arr
newData.result.Rows[2] = allRows2Arr
newData.result.AxisX.TopAxisX = allTopAxisXArr
newData.result.AxisX.BottomAxisX = allBottomAxisXArr
newData.result.Links = allLinksArr
this.initChart(newData)
})
}
} }
getInputTime=()=>{
this.setState({
getTime:this.state.time
})
console.log(this.state.getTime,'点击获取的time')
}
componentDidMount(){ componentDidMount(){
let that = this let that = this
var chartDom = document.getElementById('main'); var chartDom = document.getElementById('main');
...@@ -121,8 +161,6 @@ class App extends Component { ...@@ -121,8 +161,6 @@ class App extends Component {
allBottomAxisXArr = BottomAxisX allBottomAxisXArr = BottomAxisX
allLinksArr = Links allLinksArr = Links
that.initChart(resData) that.initChart(resData)
console.log(that.state.getValue,'高')
console.log(that.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}`,{
...@@ -154,9 +192,6 @@ class App extends Component { ...@@ -154,9 +192,6 @@ class App extends Component {
// } // }
var chartDom = document.getElementById('main'); var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom); var myChart = echarts.init(chartDom);
console.log(that.state.getTime,'时间2')
myChart.on('datazoom', function(params){ myChart.on('datazoom', function(params){
clearInterval(that.interval) clearInterval(that.interval)
var options = myChart.getOption(); var options = myChart.getOption();
...@@ -245,7 +280,7 @@ class App extends Component { ...@@ -245,7 +280,7 @@ class App extends Component {
// }) // })
// } // }
that.setState({ that.setState({
requestDuration:-100, // requestDuration:-100,
duration:-10, duration:-10,
},()=>{ },()=>{
if(startBlock !=0 ){ if(startBlock !=0 ){
...@@ -260,34 +295,70 @@ class App extends Component { ...@@ -260,34 +295,70 @@ class App extends Component {
requestDuration:that.state.requestDuration*(that.state.count+1) requestDuration:that.state.requestDuration*(that.state.count+1)
}) })
} }
if(that.state.inpttime != -100){
console.log("不为-100")
that.setState({
requestDuration:that.state.inputtime
},()=>{
console.log(that.state.requestDuration,'时间')
fetch(`/api/graph_by_height_and_duration?height=${startBlock}&duration=${that.state.requestDuration}`,{
method:'GET',
headers:{
'Content-Type':'application/json;charset=UTF-8'
},
})
.then(res =>res.json())
.then((newData) => {
myChart.hideLoading()
let {Rows, AxisX, Links } = newData.result
let {TopAxisX, BottomAxisX} = AxisX
allRows0Arr = Rows[0]
allRows1Arr = Rows[1]
allRows2Arr = Rows[2]
allTopAxisXArr = TopAxisX
allBottomAxisXArr = BottomAxisX
allLinksArr = Links
newData.result.Rows[0] = allRows0Arr
newData.result.Rows[1] = allRows1Arr
newData.result.Rows[2] = allRows2Arr
newData.result.AxisX.TopAxisX = allTopAxisXArr
newData.result.AxisX.BottomAxisX = allBottomAxisXArr
newData.result.Links = allLinksArr
that.initChart(newData)
})
})
}
// console.log(that.state.requestDuration,'startrequestDuration') // console.log(that.state.requestDuration,'startrequestDuration')
// console.log(startBlock,'startBlock') // console.log(startBlock,'startBlock')
// console.log(that.state.count,'count') // console.log(that.state.count,'count')
fetch(`/api/graph_by_height_and_duration?height=${startBlock}&duration=${that.state.requestDuration}`,{
method:'GET',
headers:{ // console.log(that.state.requestDuration,'时间')
'Content-Type':'application/json;charset=UTF-8' // fetch(`/api/graph_by_height_and_duration?height=${startBlock}&duration=${that.state.requestDuration}`,{
}, // method:'GET',
}) // headers:{
.then(res =>res.json()) // 'Content-Type':'application/json;charset=UTF-8'
.then((newData) => { // },
myChart.hideLoading() // })
let {Rows, AxisX, Links } = newData.result // .then(res =>res.json())
let {TopAxisX, BottomAxisX} = AxisX // .then((newData) => {
allRows0Arr = Rows[0] // myChart.hideLoading()
allRows1Arr = Rows[1] // let {Rows, AxisX, Links } = newData.result
allRows2Arr = Rows[2] // let {TopAxisX, BottomAxisX} = AxisX
allTopAxisXArr = TopAxisX // allRows0Arr = Rows[0]
allBottomAxisXArr = BottomAxisX // allRows1Arr = Rows[1]
allLinksArr = Links // allRows2Arr = Rows[2]
newData.result.Rows[0] = allRows0Arr // allTopAxisXArr = TopAxisX
newData.result.Rows[1] = allRows1Arr // allBottomAxisXArr = BottomAxisX
newData.result.Rows[2] = allRows2Arr // allLinksArr = Links
newData.result.AxisX.TopAxisX = allTopAxisXArr // newData.result.Rows[0] = allRows0Arr
newData.result.AxisX.BottomAxisX = allBottomAxisXArr // newData.result.Rows[1] = allRows1Arr
newData.result.Links = allLinksArr // newData.result.Rows[2] = allRows2Arr
that.initChart(newData) // newData.result.AxisX.TopAxisX = allTopAxisXArr
}) // newData.result.AxisX.BottomAxisX = allBottomAxisXArr
// newData.result.Links = allLinksArr
// that.initChart(newData)
// })
}) })
} }
...@@ -689,6 +760,7 @@ class App extends Component { ...@@ -689,6 +760,7 @@ class App extends Component {
<p>${moment(parseInt(params.data.value[0]/1000000)).format('YYYY-MM-DD HH:mm:ss.SSS')}</p> <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>round：${params.data.value[4]}</p>
<p>TxCount： ${params.data.value[8]}</p> <p>TxCount： ${params.data.value[8]}</p>
<p>Y：${(params.data.value[1]).slice(0,4)}</p>
` `
document.querySelector('html').onmousemove = function (event) { document.querySelector('html').onmousemove = function (event) {
var elementDiv = document.querySelector('#extension') var elementDiv = document.querySelector('#extension')
...@@ -732,17 +804,24 @@ class App extends Component { ...@@ -732,17 +804,24 @@ class App extends Component {
const {startText,endText}=this.state const {startText,endText}=this.state
return ( return (
<div> <div>
<div style={{width:'50%',display:'flex',justifyContent:'space-around'}}> <div style={{width:'60%',display:'flex',justifyContent:'center'}}>
<div> <div>
<input ref="inputvalue" onChange={()=>this.inputChangeValue()} style={{width:'30%',textAlign:'center'}}/> <span>高度：</span>
<button onClick={()=>this.getInputHeight()} style={{cursor:'pointer'}}>点击切换高度</button> <input ref="inputvalue" defaultValue='0' onChange={()=>this.inputChangeValue()} style={{width:'20%',textAlign:'center'}}/>
<span>时间：</span>
<input ref="inputtime" defaultValue='-100' onChange={()=>this.inputChangeTime()} style={{width:'20%',textAlign:'center'}}/>
<button onClick={()=>this.getInput()} style={{cursor:'pointer'}}>点击切换</button>
</div> </div>
{/* <div> {/* <div>
<input value={this.state.time} onChange={this.inputChangeTime} style={{width:'30%',textAlign:'center'}}/> <input ref="inputvalue" defaultValue='0' onChange={()=>this.inputChangeValue()} style={{width:'30%',textAlign:'center'}}/>
<button onClick={this.getInputTime} style={{cursor:'pointer'}}>切换时间</button> <button onClick={()=>this.getInputHeight()} style={{cursor:'pointer'}}>切换高度</button>
</div>
<div>
<input ref="inputtime" defaultValue='-100' onChange={()=>this.inputChangeTime()} style={{width:'30%',textAlign:'center'}}/>
<button onClick={()=>this.getInputTime()} style={{cursor:'pointer'}}>切换时间</button>
</div> */} </div> */}
<div>当前高度：{this.state.getValue}</div> <div>当前高度：{this.state.inputvalue}</div>
<div>当前时间：{this.state.requestDuration}</div> <div>当前时间：{this.state.inputtime == -100 ? `${-100}` : this.state.inputtime}</div>
</div> </div>
<div style={{position:'relative'}}> <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>
......
src/setupProxy.js
View file @ 3485911c
...@@ -2,12 +2,12 @@ const { createProxyMiddleware } = require('http-proxy-middleware'); ...@@ -2,12 +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://15.161.127.241:30001', // "target":'http://15.161.127.241:30001',
// "target": "http://54.168.125.67:26657", // "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', "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