fix(设备模拟器): 设备模拟器详情界面

详情界面优化：1、增加搜索；2、调整图表 re #203 #212
jetlinks · Sep 29, 2020 · fac5b6d · fac5b6d
1 parent 0b73773
commit fac5b6d
Show file tree

Hide file tree

Showing 5 changed files with 55 additions and 30 deletions.
diff --git a/src/pages/simulator/device/detail/debugger/index.tsx b/src/pages/simulator/device/detail/debugger/index.tsx
@@ -1,5 +1,5 @@
-import { Input, Tabs } from "antd";
-import React, { useEffect, useState } from "react";
+import { Button, Input, Tabs, Tree } from "antd";
+import React, { useEffect, useRef, useState } from "react";
 import Service from "../../service";
 import Session from "./session";
 
@@ -12,9 +12,11 @@ const Debugger: React.FC<Props> = props => {
     const [sessions, setSessions] = useState<any[]>([]);
     const [key, setkey] = useState<string>('');
 
+    const cache = useRef<any[]>([]);
     useEffect(() => {
-        service.sessions(data.id, 1000, 0)
+        service.sessions(data.id, 10000, 0)
             .subscribe(data => {
+                cache.current = data;
                 setSessions(data);
             })
         setkey(sessions.length > 0 ? sessions[0].id : '');
@@ -29,13 +31,15 @@ const Debugger: React.FC<Props> = props => {
 
     return (
         <>
+            <Input.Search
+                onSearch={(value) => {
+                    const temp = cache.current.filter(i => i.id.indexOf(value) != -1);
+                    setSessions(temp);
+                }}
+                style={{ width: 100, marginBottom: 10 }} />
+
             <Tabs
-                tabBarExtraContent={(
-                    <div >
-                        <Input.Search />
-                    </div>
-                )}
-                style={{ height: 500 }}
+                style={{ height: 600 }}
                 tabPosition={"left"}
                 defaultActiveKey={sessions.length > 0 ? sessions[0].id : ''}
                 onChange={(key => setkey(key))}>

diff --git a/src/pages/simulator/device/detail/debugger/session/index.tsx b/src/pages/simulator/device/detail/debugger/session/index.tsx
@@ -64,7 +64,7 @@ const Session: React.FC<Props> = props => {
                 wrapEnabled
                 highlightActiveLine  //突出活动线
                 enableSnippets  //启用代码段
-                style={{ width: '100%', height: 220 }}
+                style={{ width: '100%', height: 230 }}
                 setOptions={{
                     enableBasicAutocompletion: true,   //启用基本自动完成功能
                     enableLiveAutocompletion: true,   //启用实时自动完成功能 （比如：智能代码提示）
@@ -89,7 +89,7 @@ const Session: React.FC<Props> = props => {
                 wrapEnabled
                 highlightActiveLine  //突出活动线
                 enableSnippets  //启用代码段
-                style={{ width: '100%', height: 180 }}
+                style={{ width: '100%', height: 220 }}
                 setOptions={{
                     enableBasicAutocompletion: true,   //启用基本自动完成功能
                     enableLiveAutocompletion: true,   //启用实时自动完成功能 （比如：智能代码提示）
@@ -98,7 +98,7 @@ const Session: React.FC<Props> = props => {
                     tabSize: 2,
                 }}
             />
-            <Row gutter={10} style={{ height: 80, marginTop: 10 }}>
+            <Row gutter={10} style={{ height: 80, marginTop: 40 }}>
                 <Col push={19}>
                     <Button
                         onClick={() => { setSubMsg({ payload: '' }) }}

diff --git a/src/pages/simulator/device/detail/index.tsx b/src/pages/simulator/device/detail/index.tsx
@@ -30,7 +30,7 @@ const Detail: React.FC<Props> = props => {
         <Modal
             title="详情"
             visible
-            width={1000}
+            width='80VW'
             onCancel={() => props.close()}
             onOk={() => props.close()}
             footer={null}
@@ -40,26 +40,22 @@ const Detail: React.FC<Props> = props => {
                     <Row gutter={16}>
                         <Col span={6}>
                             <Card>
-                                <div>总连接数</div>
-                                <div>{data?.total}</div>
+                                <div>总连接数{data?.total}</div>
                             </Card>
                         </Col>
                         <Col span={6}>
                             <Card>
-                                <div>失败连接数</div>
-                                <div>{data?.failed}</div>
+                                <div>失败连接数{data?.failed}</div>
                             </Card>
                         </Col>
                         <Col span={6}>
                             <Card>
-                                <div>当前并发数量</div>
-                                <div>{data?.current}</div>
+                                <div>当前并发数量{data?.current}</div>
                             </Card>
                         </Col>
                         <Col span={6}>
                             <Card>
-                                <div>连接时间统计</div>
-                                <div>平均{data?.aggTime?.avg}ms</div>
+                                <div>平均连接时间{data?.aggTime?.avg}ms</div>
                             </Card>
                         </Col>
                     </Row>
@@ -71,7 +67,7 @@ const Detail: React.FC<Props> = props => {
                             <Error failed={data?.failed} failedTypeCounts={data?.failedTypeCounts} />
                         </Col>
                     </Row>
-                    <Row style={{ marginTop: 20 }}>
+                    <Row style={{ marginTop: 10 }}>
                         <Message runtimeHistory={data?.runtimeHistory} />
                     </Row>
                 </Tabs.TabPane>

diff --git a/src/pages/simulator/device/detail/message/index.tsx b/src/pages/simulator/device/detail/message/index.tsx
@@ -40,7 +40,7 @@ const Message: React.FC<Props> = props => {
         }
     };
     return (
-        <Chart height={250} data={dv} scale={cols} forceFit>
+        <Chart height={220} data={dv} scale={cols} forceFit>
             <span className='sub-title' style={{ marginLeft: 40, fontWeight: 700 }}>
                 消息统计
              </span>

diff --git a/src/pages/simulator/device/detail/time/index.tsx b/src/pages/simulator/device/detail/time/index.tsx
@@ -30,19 +30,44 @@ const Time: React.FC<Props> = props => {
     }, [time]);
 
     const cols = {
-        sales: {
-            tickInterval: 20
+        label: {
+            alias: 'ms'
+        },
+        value: {
+            alias: '次'
         }
     };
+    // x :ms 
+    // y :个
     return (
-        <Chart height={200} data={data} scale={cols} forceFit>
-            // x :ms 
-            // y :个
+        <Chart height={350} data={data} scale={cols} forceFit>
+
             <span className='sub-title' style={{ marginLeft: 40, fontWeight: 700 }}>
                 连接时间分布
              </span>
-            <Axis name="label" />
-            <Axis name="value" />
+            <Axis name="label" title={{
+                position: 'end',
+                offset: 15,
+                textStyle: {
+                    fontSize: '12',
+                    textAlign: 'center',
+                    fill: '#999',
+                    fontWeight: 'bold',
+                    rotate: 0,
+                    autoRotate: true
+                }
+            }} />
+            <Axis name="value" title={{
+                position: 'end',
+                offset: 5.5,
+                textStyle: {
+                    fontSize: '12',
+                    textAlign: 'right',
+                    fill: '#999',
+                    fontWeight: 'bold',
+                    rotate: 0
+                }
+            }} />
             <Tooltip
                 crosshairs={{
                     type: "y"