新增视频页面

.gitignore

@@ -138,4 +138,7 @@ dist
 *yarn.lock
 *package-lock.json
 *log/
-*downloadFiles/
+*downloadFiles/
+web/client/assets/color.less
+package-lock.json
+development.text

web/client/src/sections/fillion/components/videoTable.js

@@ -0,0 +1,215 @@
+
+import { connect } from 'react-redux';
+import './protable.less'
+import { Card, Button, Popconfirm, Badge,Col, Row } from 'antd';
+import ProTable from '@ant-design/pro-table';
+// import { Badge, Button } from 'antd';
+import React, { useEffect, useState } from 'react';
+// @ts-ignore
+import styles from './protable.less';
+const DetailList = (props) => {
+    const { ip } = props;
+    const [tableListDataSource, setTableListDataSource] = useState([]);
+  
+    const columns= [
+      {
+        title: '视频',
+        key: 'createdAt',
+        dataIndex: 'createdAt',
+        valueType: 'dateTime',
+        render: (dom, record) => {
+            return  <Row>
+            <Col span={8}></Col>
+            <Col span={8}>col-8</Col>
+            <Col span={8}>col-8</Col>
+          </Row>
+        },
+      },
+    ];
+    useEffect(() => {
+      const source = [];
+      for (let i = 0; i < 15; i += 1) {
+        source.push({
+          createdAt: Date.now() - Math.floor(Math.random() * 10000),
+          code: `const getData = async params => {
+            const data = await getData(params);
+            return { list: data.data, ...data };
+          };`,
+          key: i,
+        });
+      }
+      setTableListDataSource(source);
+    }, [ip]);
+    return (
+        <ProTable
+        columns={columns}
+        dataSource={tableListDataSource}
+        pagination={{
+          pageSize: 3,
+          showSizeChanger: false,
+        }}
+        rowKey="key"
+        toolBarRender={false}
+        search={false}
+      />
+    );
+  };
+  
+
+  
+ 
+  
+
+  
+  const ipListDataSource= [];
+  
+  for (let i = 0; i < 10; i += 1) {
+    ipListDataSource.push({
+      ip: `106.14.98.1${i}4`,
+      cpu: 10,
+      mem: 20,
+      status: [Math.floor(Math.random() * 10) % 4],
+      disk: 30,
+    });
+  }
+  
+ 
+  
+  const IPList = (props) => {
+    const { onChange, ip } = props;
+  
+    const columns= [
+      {
+        title: '路段名称',
+        key: 'ip',
+        dataIndex: 'ip',
+        render: (_, item) => {
+            console.log(item.ip)
+          return <Badge status={item.status} text={item.ip} />;
+        },
+      },
+      
+    ];
+    return (
+        <div className='spilce'>
+            <ProTable
+        columns={columns}
+        request={(params, sorter, filter) => {
+          // 表单搜索项会从 params 传入，传递给后端接口。
+          console.log(params, sorter, filter);
+          return Promise.resolve({
+            data: ipListDataSource,
+            success: true,
+          });
+        }}
+        rowKey="ip"
+        rowClassName={(record) => {
+          return record.ip === ip ? styles['split-row-select-active'] : '';
+        }}
+        toolbar={{
+          search: {
+            onSearch: (value) => {
+              alert(value);
+            },
+          },
+        }}
+        options={false}
+        pagination={false}
+        search={false}
+        onRow={(record) => {
+          return {
+            onClick: () => {
+              if (record.ip) {
+                onChange(record.ip);
+              }
+            },
+          };
+        }}
+      /></div>
+      
+    );
+  };
+  
+  
+  
+  const videoTable = () => {
+    const [ip, setIp] = useState('0.0.0.0');
+    const tabList = [
+        {
+          key: 'tab1',
+          tab: '公交',
+        },
+        {
+          key: 'tab2',
+          tab: '路段',
+        },
+      ];
+      const contentList= {
+        tab1: [<div  className='card-protable'>
+        <Card >
+          <IPList onChange={(cIp) => setIp(cIp)} ip={ip} />
+        </Card>
+        <Card style={{flex:1}}>
+          <DetailList ip={ip} />
+        </Card>
+      </div>],
+        tab2: [<div  className='card-protable'>
+        <Card >
+          <IPList onChange={(cIp) => setIp(cIp)} ip={ip} />
+        </Card>
+        <Card  style={{flex:1}}>
+            
+          <DetailList ip={ip} />
+        </Card>
+      </div>]
+      };
+      const [activeTabKey1, setActiveTabKey1] = useState('tab1');
+  const [activeTabKey2, setActiveTabKey2] = useState('app');
+  const onTab1Change = (key) => {
+    setActiveTabKey1(key);
+  };
+
+  const onTab2Change = (key) => {
+    setActiveTabKey2(key);
+  };
+    return (
+        <>
+      <Card
+        style={{
+          width: '100%',
+        }}
+        tabList={tabList}
+        activeTabKey={activeTabKey1}
+        onTabChange={(key) => {
+          onTab1Change(key);
+        }}
+      >
+        {contentList[activeTabKey1]}
+      </Card>
+     
+    </>
+      
+    );
+  };
+  
+function mapStateToProps(state) {
+    const { auth, depMessage } = state;
+    const pakData = (dep) => {
+        return dep.map((d) => {
+            return {
+                title: d.name,
+                value: d.id,
+                // children: d.type >= 2 ? [] : pakData(d.subordinate)
+                children: pakData(d.subordinate)
+            }
+        })
+    }
+    let depData = pakData(depMessage.data || [])
+    return {
+        user: auth.user,
+        depMessage: depMessage.data || [],
+        depLoading: depMessage.isRequesting,
+        depData,
+    };
+}
+export default connect(mapStateToProps)(videoTable);

web/client/src/sections/fillion/containers/videois.js

@@ -0,0 +1,42 @@
+import React, { useEffect, useState } from 'react';
+import { connect } from 'react-redux';
+import '../style.less';
+import { getDepMessage, getReportStatistic } from "../actions/infor"
+import VideoTable from '../components/videoTable';
+const superagent = require('superagent');
+const Videois = (props) => {
+  const { dispatch, user } = props
+  const [data, setData] = useState()
+  useEffect(() => {
+    // dispatch(getDepMessage())
+    dispatch(getReportStatistic())
+    setData(props)
+  }, []);
+  //批量导出
+  const exports = (ids, counts) => {
+    // console.log(user);
+    let reportIds = [];
+    if (ids.length)
+      reportIds = ids
+    else
+      reportIds = (counts || {}).ids || [];
+    superagent.post('/_report/http')
+      .send({ id: reportIds.map(i => Number(i)) }).end((err, res) => {
+        const resTextIs = res.text.split('/').pop()
+        window.open(
+          '/_api/' +
+          `attachments?src=files/${resTextIs}&filename=${encodeURIComponent(resTextIs)}&token=${user.token}`)
+      })
+  }
+  return (
+    <> <VideoTable data={data} exports={exports} />
+    </>
+  )
+}
+function mapStateToProps(state) {
+  const { auth } = state
+  return {
+    user: auth.user,
+  }
+}
+export default connect(mapStateToProps)(Videois);