feat(模拟测试): 设备模拟器：设备调试

设备调试

src/pages/simulator/device/detail/debugger/index.tsx

@@ -0,0 +1,52 @@
+import { Input, Tabs } from "antd";
+import React, { useEffect, useState } from "react";
+import Service from "../../service";
+import Session from "./session";
+
+interface Props {
+    data: any
+}
+const Debugger: React.FC<Props> = props => {
+    const { data } = props;
+    const service = new Service('network/simulator');
+    const [sessions, setSessions] = useState<any[]>([]);
+    const [key, setkey] = useState<string>('');
+
+    useEffect(() => {
+        service.sessions(data.id, 1000, 0)
+            .subscribe(data => {
+                setSessions(data);
+            })
+        setkey(sessions.length > 0 ? sessions[0].id : '');
+    }, []);
+
+    useEffect(() => {
+        if (sessions && sessions[0]) {
+            setkey(sessions[0].id);
+        }
+    }, [sessions[0]])
+
+
+    return (
+        <>
+            <Tabs
+                tabBarExtraContent={(
+                    <div >
+                        <Input.Search />
+                    </div>
+                )}
+                style={{ height: 500 }}
+                tabPosition={"left"}
+                defaultActiveKey={sessions.length > 0 ? sessions[0].id : ''}
+                onChange={(key => setkey(key))}>
+                {
+                    sessions.map((item, index) =>
+                        <Tabs.TabPane key={item.id} tab={item.id}>
+                            {(key === item.id) && <Session item={item} data={data} />}
+                        </Tabs.TabPane>)
+                }
+            </Tabs>
+        </>
+    )
+}
+export default Debugger;

src/pages/simulator/device/detail/debugger/session/index.tsx

@@ -0,0 +1,58 @@
+import { getWebsocket } from "@/layouts/GlobalWebSocket";
+import { Input, Divider, Button, Row, Col, message } from "antd";
+import React, { useEffect, useState } from "react";
+import Service from "../../../service";
+
+interface Props {
+    data: any;
+    item: any
+}
+const Session: React.FC<Props> = props => {
+    const { data, item } = props;
+    const [subMsg, setSubMsg] = useState<any>('');
+    const service = new Service('network/simulator');
+
+    const [msg, setMsg] = useState<string>('');
+    useEffect(() => {
+        console.log(`获取${item.id},${data.id}消息`);
+        let simulator = getWebsocket(
+            `network-simulator-session`,
+            `/network/simulator/${data.id}/${item.id}`,
+            {},
+        ).subscribe(
+            (resp: any) => {
+                setSubMsg(resp);
+            },
+        );
+        return () => {
+            console.log('取消订阅,' + item.id);
+            simulator.unsubscribe();
+        }
+    }, [item]);
+    const sendMsg = (msg: string) => {
+        service.sendMessage(data.id, item.id, msg).subscribe(
+            () => {
+                message.success('发送成功!')
+            },
+            () => message.error('保存失败!'))
+    }
+
+    return (
+        <div>
+            <Input.TextArea rows={17} value={subMsg.payload} />
+            <Divider />
+            <Row gutter={10}>
+                <Col span={20}>
+                    <Input.TextArea rows={3} onChange={e => setMsg(e.target.value)} />
+                </Col>
+                <Col span={3}>
+                    <Button
+                        onClick={() => { sendMsg(msg) }}
+                        style={{ width: 100, height: 75 }}
+                        type="primary">发送</Button>
+                </Col>
+            </Row>
+        </div>
+    )
+}
+export default Session;

src/pages/simulator/device/detail/error/index.tsx

@@ -1,94 +1,37 @@
-import DataSet from "@antv/data-set";
-import { Axis, Chart, Coord, Geom, Guide, Label, Legend, Tooltip } from "bizcharts";
-import React from "react";
+import { Chart, Coord, Geom, Label, Tooltip } from "bizcharts";
+import React, { useEffect, useState } from "react";
+
+interface Props {
+    failed: number,
+    failedTypeCounts: any
+}
+const Error: React.FC<Props> = props => {
+    const { failedTypeCounts } = props;
+    const [data, setData] = useState<any[]>([]);
+    useEffect(() => {
+        let t: any[] = [];
+        Object.keys(failedTypeCounts || {}).forEach(i => t.push({ name: i, value: failedTypeCounts[i] }));
+        setData(t);
+    }, [failedTypeCounts])
+
 
-const Error: React.FC = props => {
-    const { DataView } = DataSet;
-    const { Html } = Guide;
-    const data = [
-        {
-            item: "事例一",
-            count: 40
-        },
-        {
-            item: "事例二",
-            count: 21
-        },
-        {
-            item: "事例三",
-            count: 17
-        },
-    ];
-    const dv = new DataView();
-    dv.source(data).transform({
-        type: "percent",
-        field: "count",
-        dimension: "item",
-        as: "percent"
-    });
-    const cols = {
-        percent: {
-            formatter: val => {
-                val = val * 100 + "%";
-                return val;
-            }
-        }
-    };
     return (
         <Chart
             height={200}
-            data={dv}
-            scale={cols}
-            padding={[80, 100, 80, 80]}
+            data={data}
             forceFit
         >
             <span className='sub-title' style={{ marginLeft: 40, fontWeight: 700 }}>
-                失败类型 <span className='sub-title' style={{ marginLeft: 40, fontWeight: 700 }}>
-                    消息统计
-             </span>统计
+                失败类型统计
              </span>
-            <Coord type={"theta"} radius={0.75} innerRadius={0.6} />
-            <Axis name="percent" />
-            <Legend
-                position="bottom"
-            />
-            <Tooltip
-                showTitle={false}
-                itemTpl="<li><span style=&quot;background-color:{color};&quot; class=&quot;g2-tooltip-marker&quot;></span>{name}: {value}</li>"
-            />
-            <Guide>
-                <Html
-                    position={["50%", "50%"]}
-                    html="<div style=&quot;color:#8c8c8c;font-size:1.16em;text-align: center;width: 10em;&quot;>主机<br><span style=&quot;color:#262626;font-size:2.5em&quot;>200</span>台</div>"
-                    alignX="middle"
-                    alignY="middle"
-                />
-            </Guide>
+            <Coord type="theta" />
+            <Tooltip showTitle={false} />
             <Geom
                 type="intervalStack"
-                position="percent"
-                color="item"
-                tooltip={[
-                    "item*percent",
-                    (item, percent) => {
-                        percent = percent * 100 + "%";
-                        return {
-                            name: item,
-                            value: percent
-                        };
-                    }
-                ]}
-                style={{
-                    lineWidth: 1,
-                    stroke: "#fff"
-                }}
+                position="value"
+                color="name"
             >
-                <Label
-                    content="percent"
-                    formatter={(val, item) => {
-                        return item.point.item + ": " + val;
-                    }}
-                />
+                <Label content="name" />
             </Geom>
         </Chart>
     )

src/pages/simulator/device/detail/index.tsx

@@ -1,20 +1,24 @@
 import { Card, Col, Modal, Row, Tabs } from "antd"
-import React, { useEffect } from "react"
+import React, { useEffect, useState } from "react"
 import Service from "../service";
 import Message from "./message";
 import Time from "./time";
 import Error from "./error";
+import Debugger from "./debugger";
 interface Props {
     close: Function
     data: any
 }
 const Detail: React.FC<Props> = props => {
     const service = new Service('network/simulator');
 
+    const [data, setData] = useState<any>({});
     useEffect(() => {
-        service.state(props.data.id).subscribe(data => {
+        service.state(props.data.id).pipe(
+        ).subscribe(data => {
             console.log(data, 'dddd');
-        })
+            setData(data);
+        });
     }, []);
     return (
         <Modal
@@ -23,49 +27,50 @@ const Detail: React.FC<Props> = props => {
             width={1000}
             onCancel={() => props.close()}
             onOk={() => props.close()}
+            footer={null}
         >
             <Tabs>
                 <Tabs.TabPane key="basic" tab="基础信息">
                     <Row gutter={16}>
                         <Col span={6}>
                             <Card>
                                 <div>成功连接数</div>
-                                <div>1233</div>
+                                <div>{data?.total}</div>
                             </Card>
                         </Col>
                         <Col span={6}>
                             <Card>
-                                <div>成功连接数</div>
-                                <div>1233</div>
+                                <div>失败连接数</div>
+                                <div>{data?.failed}</div>
                             </Card>
                         </Col>
                         <Col span={6}>
                             <Card>
-                                <div>成功连接数</div>
-                                <div>1233</div>
+                                <div>并发数量</div>
+                                <div>{data?.current}</div>
                             </Card>
                         </Col>
                         <Col span={6}>
                             <Card>
-                                <div>成功连接数</div>
-                                <div>1233</div>
+                                <div>时间统计</div>
+                                <div>平均{data?.aggTime?.avg}s</div>
                             </Card>
                         </Col>
                     </Row>
                     <Row style={{ marginTop: 20 }} gutter={16}>
                         <Col span={12}>
-                            <Time />
+                            <Time time={data?.distTime} />
                         </Col>
                         <Col span={12}>
-                            <Error />
+                            <Error failed={data?.failed} failedTypeCounts={data?.failedTypeCounts} />
                         </Col>
                     </Row>
                     <Row style={{ marginTop: 20 }}>
-                        <Message />
+                        <Message runtimeHistory={data?.runtimeHistory} />
                     </Row>
                 </Tabs.TabPane>
                 <Tabs.TabPane key="debug" tab="设备调试">
-
+                    <Debugger data={props.data} />
                 </Tabs.TabPane>
             </Tabs>
         </Modal>