add:车辆管理系统：完成整个运维管理模块

谢忠泽
1 parent 39e29489
Showing 14 changed files with 599 additions and 77 deletions
src/pages/vms/OperationAdministration/api.ts
src/pages/vms/OperationAdministration/components/MapContent/index.tsx
src/pages/vms/OperationAdministration/components/MapContent/style.css
src/pages/vms/OperationAdministration/components/MapContent/style.less
src/pages/vms/OperationAdministration/components/PlayBack/index.tsx
src/pages/vms/OperationAdministration/components/PlayBack/style.css
src/pages/vms/OperationAdministration/components/PlayBack/style.less
src/pages/vms/OperationAdministration/components/PlayBackPicker/index.tsx
src/pages/vms/OperationAdministration/components/PlayBackPicker/style.less
src/pages/vms/OperationAdministration/components/PlayBackTable/index.tsx
src/pages/vms/OperationAdministration/components/PlayBackTable/style.css
src/pages/vms/OperationAdministration/components/PlayBackTable/style.less
src/pages/vms/OperationAdministration/components/useUpdateEffect.tsx
src/pages/vms/OperationAdministration/index.tsx
+import { http } from '@/typing/http';
+import request from '@/utils/request';
+import { HOST_VMS } from '@/utils/host';
+
+type PromiseResp<T> = Promise<http.Response<T>>;
+type PromiseRespArr<T> = Promise<http.Response<T[]>>;
+
+export function getPointsDataMock(params:any):PromiseResp<string> {
+    return request.get(`https://tsapi.amap.com/v1/track/terminal/trsearch`, {params});
+}
+// 查询GPS设备信息分页列表
+export function getGpsTableData(params?:any):PromiseResp<any> {
+    return request.get(`${HOST_VMS}/erp/operation/gps/page`, {params});
+}
+//查询外勤设备信息分页列表
+export function getTripTableData(params?:any):PromiseResp<any> {
+    return request.get(`${HOST_VMS}/erp/operation/trip/page`, {params});
+}
+//运维轨迹查询
+export function getPointsData(params:any):PromiseResp<any> {
+    return request.get(`${HOST_VMS}/erp/operation/track/message/query`, {params});
+}
 \ No newline at end of file
 import React, { useState, useEffect, useRef } from 'react';
+import {message, Input, Button} from 'antd';
 import AMapLoader from "@amap/amap-jsapi-loader";
+import {getPointsData, getPointsDataMock} from '../../api';
+import useUpdateEffect from '../useUpdateEffect';
+import PlayBackPicker from '../PlayBackPicker';
 import './style.less';
  
+interface searchParams<T>{
+    trid?:number | undefined;
+    date:Array<T>
+}
+interface DateParams {
+    startTime?: number;
+    endTime?:number;
+    trid?:number;
+}
 function MapContent(props:any) {
-    console.log('MapContentprops', props);
+    const { trackParams, id} = props;
+    const trid = useRef<number | undefined>(undefined);
+    const date = useRef<Array<number | null>>([]);
+    const [searchParams, setSearchParams] = useState<searchParams<number | null>>({trid: trid.current, date: date.current});
+    //地图
     const map = useRef<any>(null);
+    const amapCopy = useRef<any>(null);
+    const marker = useRef<Array<any>>([]);
+    const [tracksFilter, setTracksFilter] = useState<Array<any>>([]);
+    const lineArr= [
+        [116.478935, 39.997761],
+        [116.478939, 39.997825],
+        [116.478912, 39.998549],
+        [116.478912, 39.998549], 
+        [116.478998, 39.998555],
+        [116.478998, 39.998555],
+        [116.479282, 39.99856],
+        [116.479658, 39.998528], 
+        [116.480151, 39.998453], 
+        [116.480784, 39.998302],
+        [116.480784, 39.998302], 
+        [116.481149, 39.998184], [116.481573, 39.997997], [116.481863, 39.997846], [116.482072, 39.997718], [116.482362, 39.997718], [116.483633, 39.998935], [116.48367, 39.998968], [116.484648, 39.999861]]; 
     useEffect(() => {
-        initMap();
-      return () => {
-
-      };
+        initMap();    
+        return () => {
+        };
     }, []);
-    
+    useEffect(() => {
+        if (!trackParams) return;
+        let dateParams ={} as DateParams;
+        const {trid, date} = searchParams;
+        if (trid) {
+            dateParams.trid = trid; 
+        }   
+        if (date[0] && date[1]) {
+            dateParams.startTime = date[0];
+            dateParams.endTime = date[1];
+        }
+        getPointsData({...trackParams, ...dateParams}).then(res => {
+            const {data: {data: tracksData}}=res;
+            if (res.data.errcode === 20000) {
+                message.warning('请选择24小时以内的时间段');
+                return;
+            } 
+            const { tracks }= tracksData;
+            let tracksFilterData:Array<any> = [];
+                tracks?.forEach((item:any, index:any) => {
+                let tracksArr:Array<Array<number>> = [];
+                item.startPoint && tracksArr.unshift(item?.startPoint?.location.split(',').map(Number));
+                const points = filterPoint(item?.points);
+                tracksArr.push(...points);
+                item.endPoint && tracksArr.push(item?.endPoint?.location.split(',').map(Number));
+                tracksArr.length && tracksFilterData.push(tracksArr);
+            });
+            tracksFilterData.push(lineArr);
+            setTracksFilter(tracksFilterData);
+            mapPlayBack(tracksFilterData);
+        }).catch((e) => {
+            message.error('此时间段没有你想要的数据！');
+        });
+    }, [searchParams, trackParams]);
+
+    /**
+     * @description: 地图轨迹展示
+     * @param {*}
+     * @return {*}
+     */
+    const mapPlayBack = (tracksData:Array<any>) => {
+        amapCopy.current.plugin('AMap.MoveAnimation', () => {
+            map.current = new amapCopy.current.Map(id, { //设置地图容器id
+                viewMode: "3D", //是否为3D地图模式
+                resizeEnable: true,
+                zoom: 8, //初始化地图级别
+                // center: tracksData[0][0], //初始化地图中心点位置
+            });
+            tracksData.forEach(tracks => {
+                //
+                const markerItem = new amapCopy.current.Marker({
+                    map: map.current,
+                    position: tracks[0], //轨迹起点
+                    icon: "https://a.amap.com/jsapi_demos/static/demo-center-v2/car.png",
+                    offset: new amapCopy.current.Pixel(-13, -26),
+                });
+                const polyline = new amapCopy.current.Polyline({
+                    map: map.current,
+                    path: tracks,
+                    showDir: true,
+                    strokeColor: "#28F", //线颜色
+                    // strokeOpacity: 1,     //线透明度
+                    strokeWeight: 8, //线宽
+                    lineJoin: 'round',
+                    strokeStyle: "solid" //线样式
+                });
+                marker.current.push(markerItem);
+                map.current.add(markerItem);
+                map.current.add(polyline);
+                const passedPolyline = new amapCopy.current.Polyline({
+                    map: map.current,
+                    strokeColor: "#AF5", //线颜色
+                    strokeWeight: 6, //线宽
+                });
+                markerItem.on('moving', (e:any) => {
+                    passedPolyline.setPath(e.passedPath);
+                    map.current.setCenter(e.target.getPosition(), true);
+                });
+            });
+            map.current.setFitView();
+        });                
+     };
+    /**
+     * @description: 过滤坐标点
+     * @param {Array} points
+     * @return {*}
+     */
+    const filterPoint= (points:Array<any>):Array<any> => {
+        if (!points.length) return [];
+        const arr = points.map((item) => {
+            const {location }= item;
+            const locationarr = location.split(',').map(Number);
+            return locationarr;
+        });
+        return arr;
+    };
+
+    /**
+     * @description: 开始回放
+     * @param {*}
+     * @return {*}
+     */
+    const startAnimation = () => {
+        console.log(1);
+        tracksFilter.forEach((item, index) => {
+            marker.current[index].moveAlong(item, {
+                 // 每一段的时长
+                 duration: 200, //可根据实际采集时间间隔设置
+                 // JSAPI2.0 是否延道路自动设置角度在 moveAlong 里设置
+                 autoRotation: true,
+            });
+        });
+    };
+
+    /**
+     * @description: 暂停动画
+     * @param {*}
+     * @return {*}
+     */        
+    const pauseAnimation = () => {
+        const {current} = marker;
+        current.forEach((item, index) => {
+            current[index].pauseMove();
+        });
+    }; 
+    /**
+     * @description: 继续动画
+     * @param {*}
+     * @return {*}
+     */    
+    const resumeAnimation = () => {
+        const {current} = marker;
+        current.length && current.forEach((item, index) => {
+            current[index].resumeMove();
+        });
+    };
+    /**
+     * @description: 停止动画
+     * @param {*}
+     * @return {*}
+     */    
+    const stopAnimation = () => {
+        const {current} = marker;
+        current.forEach((item, index) => {
+            current[index].stopMove();
+        });
+    };
     /**
      * @description: 初始化地图
      */
@@ -21,18 +199,70 @@ function MapContent(props:any) {
             version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
             plugins: ["AMap.Geolocation", "AMap.AutoComplete", "AMap.PlaceSearch"], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
         }).then((AMap) => {
-            map.current = new AMap.Map("container", { //设置地图容器id
+            amapCopy.current = AMap;
+            map.current = new AMap.Map(id, { //设置地图容器id
                 viewMode: "3D", //是否为3D地图模式
-                zoom: 5, //初始化地图级别
-                center: [105.602725, 37.076636], //初始化地图中心点位置
+                resizeEnable: true,
+                zoom: 10, //初始化地图级别
+                center: [104.06, 30.67], //初始化地图中心点位置
             });
         }).catch(e => {
             console.log('e', e);
         });
     };
  
+    /**
+     * @description: 手动获取时间
+     * @param {*}
+     * @return {*}
+     */
+    const handelDate = (val:Array<any>) => {
+        date.current = val;
+    };
     return (
-      <div id="container" className="map_main" />
+      <div className="map_box">
+        <div className="right_top">
+          <div className="top_input">
+            <Input
+              placeholder="轨迹ID"
+              onBlur={(event) => {
+                    trid.current = parseInt(event.target.value, 10);
+                }}
+            />
+          </div>
+          <PlayBackPicker
+            handelDate={handelDate}
+          />
+          <div>
+            <Button
+              className="back_btn" 
+              type="primary"
+              onClick={() => {
+                    setSearchParams({trid: trid.current, date: date.current});
+                    if (!trackParams)message.warning('请在列表中选择终端！');
+                }}
+            >
+              查询
+            </Button>
+          </div>
+        </div>
+        <div id={id} className="map_main" />
+        {
+            tracksFilter.length && (
+            <div className="play_back_btn_box">
+              <div className="btn_item">
+                <Button type="primary" className="play_back_btn" onClick={startAnimation}>开始回放</Button>
+                <Button type="primary" className="play_back_btn" onClick={pauseAnimation}>暂停回放</Button>
+              </div>
+              <div className="btn_item">
+                <Button type="primary" className="play_back_btn" onClick={resumeAnimation}>继续回放</Button>
+                <Button type="primary" className="play_back_btn" onClick={stopAnimation}>停止回放</Button>
+              </div>
+            </div>
+            )
+        }
+        
+      </div>
     );
 }
 export default MapContent;
-#container {
+.map_box {
+  position: relative;
+}
+.map_box .right_top {
+  margin-bottom: 10px;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+}
+.map_box .right_top .top_input {
+  margin-right: 25px;
+}
+.map_box .right_top .back_btn {
+  margin-left: 30px;
+}
+.map_box .map_main {
   padding: 0px;
   margin: 0px;
   width: 100%;
+  height: 750px;
+}
+.map_box .play_back_btn_box {
+  position: absolute;
+  display: flex;
+  flex-direction: column;
+  z-index: 9999;
+  background-color: #fff;
+  padding: 20px;
+  border-radius: 8px;
+  right: 20px;
+  bottom: 20px;
+  box-shadow: 0 2px 6px 0 #FAAD14;
+}
+.map_box .play_back_btn_box .btn_item {
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+  width: 100%;
+}
+.map_box .play_back_btn_box .btn_item:first-child {
+  margin-bottom: 20px;
 }
-.map_main {
-  height: 700px;
+.map_box .play_back_btn_box .btn_item .play_back_btn:first-child {
+  margin-right: 25px;
 }
-#container{
-    padding: 0px;
-    margin: 0px;
-    width: 100%;
-}
-.map_main{
-    height: 700px;
+.map_box{
+    position: relative;
+    .right_top{
+        margin-bottom: 10px;
+        display:flex;
+        justify-content: flex-start;
+        align-items: center;
+        .top_input{
+            margin-right: 25px;
+        }
+        .back_btn{
+            margin-left: 30px;
+        }
+    }
+    #container{
+    }
+    .map_main{
+        padding: 0px;
+        margin: 0px;
+        width: 100%;
+        height: 750px;
+    }
+    .play_back_btn_box{
+        position: absolute;
+        display: flex;
+        flex-direction: column;
+        z-index: 9999;
+        background-color: #fff;
+        padding: 20px;
+        border-radius: 8px;
+        right: 20px;
+        bottom: 20px;
+        box-shadow: 0 2px 6px 0 #FAAD14;
+        .btn_item{
+            display: flex;
+            align-items: center;
+            justify-content: space-around;
+            width: 100%;
+            &:first-child{
+                margin-bottom: 20px;
+            }
+            .play_back_btn{
+                &:first-child{
+                    margin-right: 25px;
+                }
+            }
+        }
+    }
 }
 \ No newline at end of file
-import React, { useState } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import PlayBackTable from '../PlayBackTable';
 import MapContent from '../MapContent';
-import moment from 'moment';
-import { Input, DatePicker as Picker, Space } from 'antd';
 import './style.less';
  
-const DatePicker:any = Picker;
-const {RangePicker} = DatePicker;
-function PlayBack() {
-    const [tid, setTid] = useState<number | undefined>();
+interface TrackParams {
+    tid: number;
+    entityName:string;
+}
+
+function PlayBack(props:any) {
+    const {name, type} = props;
+    const [trackParams, setTrackParams] = useState<TrackParams | undefined>(undefined);
+    useEffect(() => {
+    }, []);
      /**
      * @description: 点击行
      * @param {*}
      * @return {*}
      */    
-    const handelRow = (tid:number | undefined) => {
-        console.log('tid==>', tid);
-        setTid(tid);
+    const handelRow = (params:TrackParams) => {
+        setTrackParams(params);
     };
     return (
       <div className="play_back">
         <div className="left">
           <PlayBackTable
             handelRow={handelRow}
+            type={type}
           />
         </div>
-        <div className="right">
-          <div className="right_top">
-            <div className="top_input">
-              <Input
-                placeholder="轨迹ID"
-              />
-            </div>
-            <div>
-              <RangePicker
-                showTime
-              />
-            </div>
-          </div>
-          
-          <MapContent />
+        <div className="right">  
+          <MapContent
+            trackParams={trackParams}
+            id={name}
+          />
         </div>
       </div>
     );
@@ -8,7 +8,7 @@
   padding: 0 10px;
 }
 .play_back .right {
-  flex: 1 ;
+  flex: 1 1 ;
   height: 100%;
 }
 .play_back .right .right_top {
@@ -20,3 +20,6 @@
 .play_back .right .right_top .top_input {
   margin-right: 25px;
 }
+.play_back .right .right_top .back_btn {
+  margin-left: 30px;
+}
@@ -7,7 +7,7 @@
         padding: 0 10px;
     }
     .right {
-        flex: 1 ;
+        flex: 1 1 ;
         height:100%;
         .right_top{
             margin-bottom: 10px;
@@ -17,6 +17,9 @@
             .top_input{
                 margin-right: 25px;
             }
+            .back_btn{
+                margin-left: 30px;
+            }
         }
     }
 }
 \ No newline at end of file
+import React, { useState, useEffect, useRef } from 'react';
+import { DatePicker as Picker } from 'antd';
+import moment from 'moment';
+import type { Moment } from 'moment';
+import './style.less';
+
+interface searchParams<T>{
+    trid?:number | undefined;
+    date?:Array<T>
+}
+const DatePicker:any = Picker;
+const {RangePicker} = DatePicker;
+type RangeValue = [Moment | undefined, Moment | undefined];
+
+function PlayBackPicker(props:any) {
+    const {handelDate} = props;
+
+    const startTime = moment(new Date()).subtract(1, "days").startOf('days').valueOf();
+    const endTime = moment(new Date()).startOf('days').valueOf();
+    const date = useRef<Array<number | null>>([startTime, endTime]);
+    const [dateFlag, setDateFlag] = useState<RangeValue>([moment(new Date()).subtract(1, "days").startOf('days'), moment(new Date(), 'YYYY-MM-DD HH:mm:ss').startOf('days')]);
+    const [flag, setFlag] = useState<boolean>(true);
+
+    useEffect(() => {
+        handelDate(date.current);
+    }, []);
+    
+    /**
+     * @description: 年月日时间选择
+     * @param {*}
+     * @return {*}
+     */    
+    const disabledDate = (current: Moment) => {
+        if (flag) {
+            //禁用当天之后的时间    
+            return current > moment().endOf('day');
+        }
+        //限制选择开始时间后的取值范围
+        const startHour = dateFlag[0] && dateFlag[0].hour();
+        const startMinute = dateFlag[0] && dateFlag[0].minute();
+        const startSecond = dateFlag[0] && dateFlag[0].second();
+        const beforeDate = dateFlag[0] && (current > moment().endOf('day') || moment(current).set({'hour': startHour, 'minute': startMinute, "second": startSecond}).diff(dateFlag[0], 'days') > 1);
+        //限制选择结束时间后的取值范围
+        const afterHour = dateFlag[1] && dateFlag[1].hour();
+        const afterMinute = dateFlag[1] && dateFlag[1].minute();
+        const afterSecond = dateFlag[1] && dateFlag[1].second();
+        const afterDate = dateFlag[1] && dateFlag[1].diff(moment(current).set({'hour': afterHour, 'minute': afterMinute, "second": afterSecond}), 'days')>1;
+        return !!beforeDate || !!afterDate; 
+    };
+
+    /**
+     * @description: 日期时分秒时间范围
+     * @param {any} date
+     * @param {any} type
+     * @return {*}
+     */    
+     const disabledTracksTime = (date:any, type:any) => {
+        if (!date) return;
+        const {_d: checkDate, _i: nowDate} = date;
+        const checkYear = moment(checkDate).format('YYYY-MM-DD');
+        const nowYear = moment(nowDate).format('YYYY-MM-DD');
+        if (checkYear === nowYear) {
+            const nowHour = moment(nowDate).hour();
+            const nowMinute = moment(nowDate).minute();
+            const nowSecond = moment(nowDate).second();
+            return {
+                disabledHours: () => {
+                    const disabledArr = timeArr(24).splice(nowHour, timeArr(24).length - nowHour);
+                    return disabledArr;
+                },
+                disabledMinutes: () => {
+                    const disabledArr = timeArr(60).splice(nowMinute, timeArr(60).length - nowMinute);
+                    return disabledArr;
+                },
+                disabledSeconds: () => {
+                    const disabledArr = timeArr(60).splice(nowSecond, timeArr(60).length - nowSecond);
+                    return disabledArr;
+                },
+            };
+        }
+    };
+    /**
+     * @description: 时分秒时间数组
+     * @param {number} length
+     * @return {*}
+     */
+     const timeArr = (length:number):Array<number> => {
+        const arr = Array.from(Array(length), (value, index) => index);
+        return arr;
+    };
+    const onOpenChange = (type:boolean) => {
+        if (type) {
+            setDateFlag([undefined, undefined]);
+            if (date.current[0]!==null && date.current[1]!==null) { 
+                date.current =[null, null];
+                handelDate([null, null]);
+             }
+        } else {
+            setFlag(true);
+        }
+    };
+    return (
+      <div>
+
+        <RangePicker
+          format="YYYY-MM-DD HH:mm:ss"
+          allowClear={false}
+          value={dateFlag}    
+          showTime={{
+                    hideDisabledOptions: true,
+                }}
+          disabledDate={disabledDate}
+          disabledTime={disabledTracksTime}
+          onCalendarChange={
+                    (value:any) => {
+                        setDateFlag(value);
+                        setFlag(false);
+                    }
+                }
+          onOpenChange={onOpenChange}
+          onChange={(dateVal:Object, dateString:Array<string>) => {
+                    const dateTimestamp = dateString.map(item => {
+                        return moment(item).valueOf();
+                    });
+                    date.current = dateTimestamp;
+                    handelDate(dateTimestamp);
+                }}
+        />
+      </div>
+    );
+}
+export default PlayBackPicker;
-import React, { useState } from 'react';
-import { Table } from 'antd';
+import React, { useState, useEffect } from 'react';
+import { Table, message} from 'antd';
+import type { ColumnsType } from 'antd/es/table';
+import {getGpsTableData, getTripTableData} from '../../api';
  
 import './style.less';
  
-const data:Array<any> = [];
-for (let i=0; i<100; i++) {
-    const item = {
-        key: i,
-        name: '胡彦斌',
-        tid: i,
-        address: '西湖区湖底公园1号',
-      };
-    data.push(item);
+interface DataType {
+  tid: number;
+  trid: number;
+  entityName:string;
+  enable:boolean;
 }
-
-const dataSource = data;
  
-  const columns = [
-    {
-      title: '姓名',
-      dataIndex: 'name',
-      key: 'name',
-    },
+  const columns:ColumnsType<DataType> = [
     {
-      title: '设备id',
+      title: '终端id',
       dataIndex: 'tid',
       key: 'tid',
+      width: 100
+    },
+    {
+      title: '终端名称',
+      dataIndex: 'entityName',
+      key: 'entityName',
+      width: 100
+
     },
     {
-      title: '住址',
-      dataIndex: 'address',
-      key: 'address',
+      title: '轨迹id',
+      dataIndex: 'trid',
+      key: 'trid',
+      width: 100
+
     },
+    {
+      title: '设备状态',
+      dataIndex: 'enable',
+      key: 'enable',
+      width: 100
+
+    }
   ];
+
 function PlayBackTable(props:any) {
-    console.log('props', props);
-    const {handelRow} = props;
+    const {handelRow, type} = props;
+    const [tableData, setTableData] = useState<any>([]);
+    useEffect(() => {
+      //获取table数据
+      if (type === 1) {
+        getGpsTableData().then(res => {
+          const data = res?.data?.data.map((item:any) => {
+            if (item?.enable) item.enable = '启用'; else item.enable = '禁用';
+            return item;
+          });
+            setTableData(data);
+          }).catch((e) => {
+            message.error('查询数据失败！');
+          });
+      } else if (type === 2) {
+        getTripTableData().then(res => {
+          const data = res?.data?.data.map((item:any) => {
+            if (item?.enable) item.enable = '启用'; else item.enable = '禁用';
+            return item;
+          });
+            setTableData(data);
+        }).catch((e) => {
+          message.error('查询数据失败！');
+        });
+      }
+    }, []);
+    
     return (
       <div className="play_back_table">
         <Table
-          dataSource={dataSource}
+          dataSource={tableData}
           columns={columns}
+          className="table_back"
+          rowKey={row => row.tid}
           pagination={{
             showQuickJumper: false,
             showSizeChanger: true,
@@ -50,7 +86,7 @@ function PlayBackTable(props:any) {
                 return {
                     //行点击
                     onClick: () => {
-                        handelRow(record.tid);
+                        handelRow({tid: record?.tid, entityName: record?.entityName});
                     }, 
             };
           }
@@ -2,3 +2,6 @@
   width: 100%;
   height: 100%;
 }
+.play_back_table .ant-table-cell {
+  max-width: 100px !important;
+}
 .play_back_table{
     width: 100%;
     height: 100%;
+    .ant-table-cell{
+      max-width: 100px !important;
+    }
 }
 \ No newline at end of file
+import { useEffect, useRef } from "react";
+
+//模拟didupdate
+const useUpdateEffect =(effect:Function, deps?:[any | null]) => {
+      const updateFlag = useRef(true);
+      useEffect(() => {
+        if (updateFlag.current) {
+            updateFlag.current =false;
+        } else {
+            effect();
+        }
+      }, deps);
+};
+export default useUpdateEffect;
 \ No newline at end of file
@@ -5,18 +5,22 @@ import PlayBack from &#39;./components/PlayBack&#39;;
  
 const TabPane = Tabs.TabPane;
  
+const gpsName = 'container1';
+const tripName = 'container2';
+const type=[1, 2];
 function OperationAdministration() {
-    // const [first, setfirst] = useState(1);
     const items = [
         {label: 'GPS轨迹回放', key: '1', children: PlayBack}
     ];
     return (
       <PageHeaderWrapper title="轨迹回放">
         <Card>
-          {/* <Tabs items={items} /> */}
           <Tabs>
             <TabPane tab="GPS轨迹回放" key="1" className="tabsPanelScroll">
-              <PlayBack />
+              <PlayBack name={gpsName} type={type[0]} />
+            </TabPane>
+            <TabPane tab="霏微出行" key="2" className="tabsPanelScroll">
+              <PlayBack name={tripName} type={type[1]} />
             </TabPane>
           </Tabs>
         </Card>