add: 统计关系

src/ChartsCount.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import ReactEcharts from 'echarts-for-react';
 import apihost from './Var.js';
+import { Row, Col, Button } from 'antd';
 
 function parseData(cw = {}) {
 
@@ -39,10 +40,10 @@ function parseData(cw = {}) {
 }
 
 function getOption(state = {}) {
-    const { platform, data } = state;
+    const { platform, data, title } = state;
     const option = {
         title: {
-            text: `${platform}同名数量统计`,
+            text: `${platform}${title}`,
             subtext: '数据最新仅供参考',
             left: 'center'
         },
@@ -85,7 +86,9 @@ class ChartsCount extends React.Component {
     state = {
         option: {},
         platform: this.props.platform,
-        data: {}
+        data: {},
+        countkey: "count",
+        title: "统计数量关系",
     }
 
     changePlatform = (p) => {
@@ -95,8 +98,8 @@ class ChartsCount extends React.Component {
     };
 
     updateData = () => {
-        const { platform } = this.state;
-        fetch(`${apihost}/tag/count?platform=${platform}`, {
+        const { countkey, platform } = this.state;
+        fetch(`${apihost}/tag/count?platform=${platform}&countkey=${countkey}`, {
             "mode": "cors"
         }).then(
             response => {
@@ -117,16 +120,32 @@ class ChartsCount extends React.Component {
         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' />
+    countMethod(countkey, title) {
+        this.setState({countkey: countkey, title: title}, ()=>{this.updateData()});
+    }
 
-        </div>
+    render() {
+        return (
+            <div style={{ padding: 24, background: '#fff', minHeight: 780 }} >
+                <div style={{ marginBottom: "20px" }}>
+                    <Row justify="start">
+                        <Col span={3}> <Button  type="primary" onClick={(e)=>{ this.countMethod("count", e.target.innerText) }} >统计数量关系</Button> </Col>
+                        <Col span={3}> 
+                        <Button type="primary" onClick={(e)=>{
+                            this.countMethod("followers", e.target.innerText)
+                            }}>统计关注关系</Button> 
+                        </Col>
+                        <Col span={3}> <Button  type="primary" onClick={(e)=>{ this.countMethod("gratuity", e.target.innerText) }} >统计赏币关系</Button> </Col>
+                    </Row>
+                </div>
+                <ReactEcharts
+                    notMerge={true}
+                    ref={(e) => { this.echarts_react = e; }}
+                    option={getOption(this.state)}
+                    style={{ height: '600px', width: '100%' }}
+                    className='react_for_echarts' />
+
+            </div>
         );
     }
 };

src/Table.js

@@ -71,8 +71,8 @@ class DataTable extends React.Component {
   updatePlatform(p) {
 
     const { pagination, sorter, filters } = this.state;
-    console.log("filters", filters); // ${filters?`&filters=${filters}`:""}
-    console.log("sorter", sorter);
+    // console.log("filters", filters); // ${filters?`&filters=${filters}`:""}
+    // console.log("sorter", sorter);
     pagination.current = 1;
     this.setState({ platform: p }, () => {
       this.fetchapi({
@@ -103,8 +103,8 @@ class DataTable extends React.Component {
     const { pagination, sorter, filters } = params;
     const { platform,  } = this.state;
     this.setState({ loading: true });
-    console.log("filters", filters); // ${filters?`&filters=${filters}`:""}
-    console.log("sorter", sorter);
+    // console.log("filters", filters); // ${filters?`&filters=${filters}`:""}
+    // console.log("sorter", sorter);
     fetch(`${apihost}/${platform}/query?page=${pagination.current}&psize=${pagination.pageSize}${sorter?`&orderfield=${sorter.column?sorter.column.dataField:""}&ordertype=${sorter.order}`:""}`, { mode: "cors" }).then((response) => {
       // console.log(response);
       response.json().then(
@@ -128,8 +128,8 @@ class DataTable extends React.Component {
   render() {
 
     let { data, pagination, loading, sorter, filters } = this.state;
-    sorter = sorter || {};
-    filters = filters || {};
+    // sorter = sorter || {};
+    // filters = filters || {};
 
     const columns = [
         {
@@ -156,6 +156,17 @@ class DataTable extends React.Component {
           dataField: 'user_name',
           // width: "7%",
         },
+        {
+            title: '观众数',
+            dataIndex: 'Views',
+            editable: false,
+            key: 'Views',
+            dataField: 'views',
+            sorter: (a, b) => a.Views - b.Views,
+              sortDirections: ['descend', 'ascend'],
+              ellipsis: false,
+            // width: "7%",
+        },
         {
           title: '标签',
           dataIndex: 'Tags',