eson/intimate_view
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

change some

Browse Source
This commit is contained in:
eson
2020-08-24 00:23:43 +08:00
parent 7d54a42da9
commit 3a987464e6
11 changed files with 344 additions and 233 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/App.js
View File

@@ -92,7 +92,7 @@ class App extends React.Component {
break
default:
break;
}
}
}} >

84
src/ChartsCount.js
View File

@@ -1,38 +1,44 @@
import React from 'react';
import ReactEcharts from 'echarts-for-react';
import apihost from './Var.js';
function parseData(cw = {}) {
function parseData(cw={}) {
var legendData = [];
var seriesData = [];
var selected = {};
for(var i =0; i < cw.length ; i++){
if (cw == null) {
seriesData.push({ name: "没有数据", value: 1 })
legendData.push(seriesData[0].name)
selected[seriesData[0].name] = true;
return { legendData: legendData, seriesData: seriesData, selected: selected }
}
for (var i = 0; i < cw.length; i++) {
// legendData.push(name);
var taginfo = cw[i];
var taginfo = cw[i];
seriesData.push({
name: taginfo.Name,
value: taginfo.Value
})
selected[taginfo.Name] = false;
}
}
seriesData.sort((a, b) => {
seriesData.sort((a, b) => {
return b.value - a.value
})
})
for(var i = 0; i < seriesData.length ; i ++) {
for (var i = 0; i < seriesData.length; i++) {
var o = seriesData[i];
legendData.push(o.name);
selected[o.name] = i <= 20;
}
}
return { legendData: legendData, seriesData: seriesData, selected:selected }
return { legendData: legendData, seriesData: seriesData, selected: selected }
}
function getOption(state={}) {
function getOption(state = {}) {
const { platform, data } = state;
const option = {
title: {
@@ -48,7 +54,7 @@ function getOption(state={}) {
legend: {
type: 'scroll',
orient: 'vertical',
right: 10,
right: 10,
top: 10,
bottom: 10,
data: data.legendData,
@@ -74,7 +80,7 @@ function getOption(state={}) {
return option;
}
class ChartsCount extends React.Component {
class ChartsCount extends React.Component {
state = {
option: {},
@@ -83,57 +89,51 @@ class ChartsCount extends React.Component {
}
changePlatform = (p) => {
this.setState({platform: p}, ()=>{
this.setState({ platform: p }, () => {
this.updateData();
} );
});
};
updateData = () => {
const { platform } = this.state;
fetch(`http://192.168.16.130:5500/tag/count?platform=${platform}`, {
fetch(`${apihost}/tag/count?platform=${platform}`, {
"mode": "cors"
}).then(
response => {
response.json().then( value => {
response.json().then(value => {
this.setState({
data: parseData(value)
}, ()=> {
}, () => {
var ins = this.echarts_react.getEchartsInstance();
ins.setOption( getOption(this.state) );
ins.setOption(getOption(this.state));
});
});
} );
});
}
)
};
};
componentDidMount() {
componentDidMount() {
this.updateData();
}
}
render() {
return ( <div style={{ padding: 24, background: '#fff', minHeight: 780 }} >
<ReactEcharts
notMerge={true}
ref={(e) => { this.echarts_react = e; }}
option={ getOption(this.state)}
style={{height: '600px', width: '100%'}}
className='react_for_echarts' />
</div>
return (<div style={{ padding: 24, background: '#fff', minHeight: 780 }} >
<ReactEcharts
notMerge={true}
ref={(e) => { this.echarts_react = e; }}
option={getOption(this.state)}
style={{ height: '600px', width: '100%' }}
className='react_for_echarts' />
</div>
);
}
};
export default ChartsCount;

3
src/ContentTable.js
View File

@@ -4,9 +4,6 @@ import DataTable from './Table.js';
class ContentTable extends React.Component {
changePlatform = (p) => {
// this.refs.table.firstPage();
// this.setState({platform: p});
// this.refs.table.setState({platform: p})
this.refs.table.updatePlatform(p);
}

384
src/Table.js
View File

@@ -1,212 +1,236 @@
import React, { useState } from 'react';
import { Table, Input, InputNumber, Popconfirm, Form, Tag } from 'antd';
import reqwest from 'reqwest';
import './Table.less';
import { useForm } from 'antd/lib/form/Form';
import { Table, Input, Select, Tag, Row, Col } from 'antd';
import './Table.less';
import apihost from './Var';
const { Option } = Select;
const columns = [
{
title: '平台',
dataIndex: 'Platform',
editable: false,
key: 'Platform',
{
title: '平台',
dataIndex: 'Platform',
editable: false,
key: 'Platform',
// width: "8%",
},
{
title: 'userid',
dataIndex: 'UserId',
editable: false,
key: 'UserId',
},
{
title: 'userid',
dataIndex: 'UserId',
editable: false,
key: 'UserId',
// width: "7%",
},
{
title: '名称',
dataIndex: 'UserName',
editable: false,
key: 'UserName',
// width: "7%",
},
{
title: '标签',
dataIndex: 'Tags',
editable: false,
render: tags => (
<>
{
tags != null ?
tags.map( tag => {
let color = "purple";
if (tag.length < 3) {
color = 'green';
} else if (tag.length < 6) {
color = 'geekblue';
} else if (tag.length < 9) {
color = 'volcano';
}
return (
<Tag color={color} key={tag}>
{tag}
</Tag>
);
}
) : null}
</> )
},
{
title: '粉丝数(关注)',
dataIndex: 'Followers',
key: 'Followers',
width: "8%",
},
{
title: '礼物数(币|钱)',
dataIndex: 'Gratuity',
key: 'Gratuity',
width: "8%",
},
{
title: '数据更新时间',
dataIndex: 'UpdateTime',
key: 'UpdateTime',
// width: "7%",
},
];
},
{
title: '名称',
dataIndex: 'UserName',
editable: false,
key: 'UserName',
// width: "7%",
},
{
title: '标签',
dataIndex: 'Tags',
editable: false,
render: tags => (
<>
{
tags != null ?
tags.map(tag => {
let color = "purple";
if (tag.length < 3) {
color = 'green';
} else if (tag.length < 6) {
color = 'geekblue';
} else if (tag.length < 9) {
color = 'volcano';
}
return (
<Tag color={color} key={tag}>
{tag}
</Tag>
);
}
) : null}
</>)
},
{
title: '粉丝数(关注)',
dataIndex: 'Followers',
key: 'Followers',
width: "8%",
},
{
title: '礼物数(币|钱)',
dataIndex: 'Gratuity',
key: 'Gratuity',
width: "8%",
},
{
title: '数据更新时间',
dataIndex: 'UpdateTime',
key: 'UpdateTime',
// width: "7%",
},
];
const getRandomuserParams = params => {
return {
psize: params.pagination.pageSize,
page: params.pagination.current,
// ...params,
};
const getRandomuserParams = params => {
return {
psize: params.pagination.pageSize,
page: params.pagination.current,
// ...params,
};
};
class DataTable extends React.Component {
state = {
data: [],
platform: "openrec",
pagination: {
current: 1,
pageSize: 20,
position: ["topLeft"],
},
loading: false,
};
state = {
data: [],
platform: "openrec",
pagination: {
current: 1,
pageSize: 20,
position: ["topLeft"],
},
loading: false,
};
expandedRow = (record) => {
expandedRow = (record) => {
const ecolumns = [
{
title: 'uid',
dataIndex: 'Uid',
key: 'Uid',
},
{
title: '直播地址',
dataIndex: 'LiveUrl',
key: 'LiveUrl',
},
{
title: '直播标题',
dataIndex: 'LiveTitle',
key: 'LiveTitle',
},
{
title: '近直播开始时间',
dataIndex: 'LiveStartTime',
key: 'LiveStartTime',
},
{
title: '近直播结束时间',
dataIndex: 'LiveEndTime',
key: 'LiveEndTime',
},
];
const ecolumns = [
{
title: 'uid',
dataIndex: 'Uid',
key: 'Uid',
},
{
title: '直播地址',
dataIndex: 'LiveUrl',
key: 'LiveUrl',
},
{
title: '直播标题',
dataIndex: 'LiveTitle',
key: 'LiveTitle',
},
{
title: '近直播开始时间',
dataIndex: 'LiveStartTime',
key: 'LiveStartTime',
},
{
title: '近直播结束时间',
dataIndex: 'LiveEndTime',
key: 'LiveEndTime',
},
];
var data = [record];
return <Table rowClassName="subtable" size="small" bordered={true} columns={ecolumns} dataSource={data} pagination={false} />;
};
updatePlatform(p) {
var data = [record];
return <Table rowClassName="subtable" size="small" bordered={true} columns={ecolumns} dataSource={data} pagination={false} />;
};
const { pagination } = this.state;
pagination.current = 1;
this.setState({platform:p}, ()=>{
this.fetch({
pagination
});
});
}
componentDidMount() {
const {platform} = this.state;
this.updatePlatform(platform);
}
handleTableChange = (pagination, filters, sorter) => {
// console.log(filters, sorter);
this.fetch({
sortField: sorter.field,
sortOrder: sorter.order,
pagination,
...filters,
});
};
fetch = (params = {}) => {
this.setState({ loading: true });
const {platform} = this.state;
reqwest({
url: 'http://192.168.16.130:5500/' + platform + '/query',
method: 'get',
type: 'json',
data: getRandomuserParams(params),
}).then(data => {
updatePlatform(p) {
const { pagination } = this.state;
pagination.current = 1;
this.setState({ platform: p }, () => {
this.fetch({
pagination
});
});
}
componentDidMount() {
const { platform } = this.state;
this.updatePlatform(platform);
}
handleTableChange = (pagination, filters, sorter) => {
// console.log(filters, sorter);
this.fetch({
sortField: sorter.field,
sortOrder: sorter.order,
pagination,
...filters,
});
};
fetch = (params = {}) => {
this.setState({ loading: true });
const { platform, pagination } = this.state;
fetch(`${apihost}/${platform}/query?page=${pagination.current}&psize=${pagination.pageSize}`, { mode: "cors" }).then((response) => {
console.log(response);
response.json().then(
(data) => {
var result = JSON.parse(data)
this.setState({
loading: false,
data: result.Data?result.Data:[],
data: result.Data ? result.Data : [],
pagination: {
...params.pagination,
total: 100000,
},
});
});
};
render() {
const { data, pagination, loading } = this.state;
return (
<Table
bordered={true}
size={"middle"}
// scroll={{ x: "150vh", y:"800" }}
columns={columns}
dataSource={data}
pagination={pagination}
loading={loading}
onChange={this.handleTableChange}
expandable={{
expandedRowRender: this.expandedRow
}}
/>
);
}
};
}
)
})
};
render() {
const { data, pagination, loading } = this.state;
return (
<div>
<Row justify="start">
<Col span={6}>
<Input.Group compact size="small">
<Select size="small" defaultValue="operator">
<Option value="operator">operator</Option>
<Option value="uid">uid</Option>
</Select>
<Input size="small" style={{ width: '50%' }} defaultValue="123" />
</Input.Group>
</Col>
<Col span={6}>
<Input.Group compact size="small">
<Select size="small" defaultValue="Zhejiang">
<Option value="Zhejiang">Zhejiang</Option>
<Option value="Jiangsu">Jiangsu</Option>
</Select>
<Input size="small" style={{ width: '50%' }} defaultValue="Xihu District, Hangzhou" />
</Input.Group>
</Col>
</Row>
<Table
bordered={true}
size={"middle"}
columns={columns}
dataSource={data}
pagination={pagination}
loading={loading}
onChange={this.handleTableChange}
expandable={{
expandedRowRender: this.expandedRow
}} />
</div>
);
}
};
export default DataTable;
//

5
src/Var.js Normal file
View File

@@ -0,0 +1,5 @@
var apihost = "http://192.168.31.208:5500"
export default apihost;