*大屏运营数据接入及条件过滤及部分样式

web/client/src/sections/quanju/actions/example.js

@@ -51,3 +51,15 @@ export function getjiandetail() {
         // reducer: { name: 'members' }
     });
 }
+
+//获取公交车辆层级信息
+export function getBusTierList() {
+    return dispatch => basicAction({
+        type: 'get',
+        dispatch: dispatch,
+        actionType: 'GET_BUSTIER',
+        url: ApiTable.getBusTier,
+        msg: { error: '获取公交车辆层级信息失败' },
+        reducer: { name: 'busTier' }
+    });
+}

web/client/src/sections/quanju/containers/footer/operation/index.js

@@ -1,13 +1,32 @@
-import React from 'react'
+import React, { useEffect, useState } from 'react'
 import Left from './left'
 import Right from './right'
+import { connect } from 'react-redux'
+import { getBusTierList } from '../../../actions/example'
+
+const Operation = (props) => {
+
+    const [roadData, setRoadData] = useState()
+    const [loading, setLoading] = useState(true)
+    const { dispatch } = props
+    useEffect(() => {
+        dispatch(getBusTierList()).then(res => {
+            setLoading(false)
+            setRoadData(res.payload.data || {})
+        })
+    }, [])
 
-const Operation = () => {
     return (
         <div style={{ display: 'flex',  width: '100%',height: '100%',justifyContent: 'space-between' }}>
-            <Left />
+            <Left roadData={roadData} loading={loading} />
-            <Right />
+            <Right roadData={roadData} loading={loading} />
         </div>
     )
 }
-export default Operation
+function mapStateToProps(state) {
+
+    return {
+
+    }
+}
+export default connect(mapStateToProps)(Operation)

web/client/src/sections/quanju/containers/footer/operation/left.js

@@ -1,89 +1,15 @@
-import React, { useMemo, useState, useEffect } from 'react';
+import React, { useState, useEffect } from 'react';
-import { SearchOutlined } from '@ant-design/icons';
+import { connect } from 'react-redux';
-import { Col, Row, Input, Tree } from 'antd'
+import { Input, Tree } from 'antd'
 import Module from '../../public/module'
+import { getBusTierList } from '../../../actions/example'
+import './style.less'
 
-const { Search } = Input;
-const x = 3;
-const y = 2;
-const z = 1;
-const defaultData = [];
 
-const generateData = (_level, _preKey, _tns) => {
+const Left = (props) => {
-    const preKey = _preKey || '0';
+    const [treeData, setTreeData] = useState([])
-    const tns = _tns || defaultData;
+    const [treeDataList, setTreeDataList] = useState([])
-    const children = [];
-
-    for (let i = 0; i < x; i++) {
-        const key = `${preKey}-${i}`;
-        tns.push({
-            title: key,
-            key,
-        });
-
-        if (i < y) {
-            children.push(key);
-        }
-    }
-
-    if (_level < 0) {
-        return tns;
-    }
-
-    const level = _level - 1;
-    children.forEach((key, index) => {
-        tns[index].children = [];
-        return generateData(level, key, tns[index].children);
-    });
-};
-
-generateData(z);
-const dataList = [];
-
-const generateList = (data) => {
-    for (let i = 0; i < data.length; i++) {
-        const node = data[i];
-        const { key } = node;
-        dataList.push({
-            key,
-            title: key,
-        });
-
-        if (node.children) {
-            generateList(node.children);
-        }
-    }
-};
-
-generateList(defaultData);
-
-const getParentKey = (key, tree) => {
-    let parentKey;
-
-    for (let i = 0; i < tree.length; i++) {
-        const node = tree[i];
-
-        if (node.children) {
-            if (node.children.some((item) => item.key === key)) {
-                parentKey = node.key;
-            } else if (getParentKey(key, node.children)) {
-                parentKey = getParentKey(key, node.children);
-            }
-        }
-    }
-
-    return parentKey;
-};
-
-const Left = () => {
-
-    useEffect(() => {
-
-    }, [])
-
-    const style = { height: "97%", marginTop: "3%" }
     const [expandedKeys, setExpandedKeys] = useState([]);
-    const [searchValue, setSearchValue] = useState('');
     const [autoExpandParent, setAutoExpandParent] = useState(true);
 
     const onExpand = (newExpandedKeys) => {
@@ -91,60 +17,76 @@ const Left = () => {
         setAutoExpandParent(false);
     };
 
+    useEffect(() => {
+        const { dispatch } = props
+        dispatch(getBusTierList())
+    }, [])
+    const { busTier } = props
+    const style = { height: "97%", marginTop: "3%" }
+
     const onChange = (e) => {
         const { value } = e.target;
-        const newExpandedKeys = dataList
+        let keys = []
-            .map((item) => {
+        const newExpandedKeys = treeDataList.filter(e=> e.key.match(value))
-                if (item.title.indexOf(value) > -1) {
+        newExpandedKeys.forEach(e=>{
-                    return getParentKey(item.key, defaultData);
+            keys.push(e.key)
-                }
-
-                return null;
         })
-            .filter((item, i, self) => item && self.indexOf(item) === i);
+        setExpandedKeys(keys);
-        setExpandedKeys(newExpandedKeys);
         setSearchValue(value);
         setAutoExpandParent(true);
     };
-
+    useEffect(() => {
-    const treeData = useMemo(() => {
+        let busTierList = []
-        const loop = (data) =>
+        let busTierOpen = []
-            data.map((item) => {
+        let dataList = []
-                const strTitle = item.title;
+        busTier && busTier.data && busTier.data.forEach((e, index) => {
-                const index = strTitle.indexOf(searchValue);
+            if (index == 0) {
-                const beforeStr = strTitle.substring(0, index);
+                busTierOpen.push(e.name)
-                const afterStr = strTitle.slice(index + searchValue.length);
-                const title =
-                    index > -1 ? (
-                        <span>
-                            {beforeStr}
-                            <span className="site-tree-search-value">{searchValue}</span>
-                            {afterStr}
-                        </span>
-                    ) : (
-                        <span>{strTitle}</span>
-                    );
-
-                if (item.children) {
-                    return {
-                        title,
-                        key: item.key,
-                        children: loop(item.children),
-                    };
             }
-
+            busTierList.push({
+                key: e.name,
+                title: e.name,
+                children: e.child.map(s => {
                     return {
-                    title,
+                        key: s.name,
-                    key: item.key,
+                        title: s.name,
-                };
+                        children: s.child.map(i => {
-            });
+                            return {
+                                key: i.vehicleLicensePlateNumber,
+                                title: i.vehicleLicensePlateNumber,
+                            }
+                        })
+                    }
 
-        return loop(defaultData);
+                })
-    }, [searchValue]);
+            })
+        })
+        busTier && busTier.data && busTier.data.forEach(e => {
+            dataList.push({
+                key: e.name,
+                title: e.name,
+            })
+            e.child.forEach(i=>{
+                dataList.push({
+                    key: i.name,
+                    title: i.name,
+                })
+                i.child.forEach(s=>{
+                    dataList.push({
+                        key: s.vehicleLicensePlateNumber,
+                        title: s.vehicleLicensePlateNumber,
+                    })
+                })
+            })
+        })
+        setTreeData(busTierList)
+        setExpandedKeys(busTierOpen)
+        setTreeDataList(dataList)
+    }, [busTier])
     return (
         <div style={{ display: 'flex', flexDirection: 'column', width: "23%", height: "100%", marginLeft: "1%" }}>
-            <Module style={style} title={"公交车辆信息"}>
+            <Module style={style} customize={true} title={"公交车辆信息"}>
-                <div style={{ width: '90%', height: '96', margin: '2% 5%', }}>
+                <div style={{ width: '90%', height: '96%', margin: '2% 5%', overflow: 'hidden' }}>
                     <div style={{ border: '1px solid rgba(10, 114, 255, 1)', backgroundColor: 'rgba(10, 114, 255, 0.1)' }}>
                         <img src='assets/images/quanju/search.png' style={{ width: '5%', margin: '0 1.5% 1% 3.5%' }} />
                         <Input
@@ -160,8 +102,10 @@ const Left = () => {
                             onChange={onChange}
                         />
                     </div>
+                    <div className='busList'>
                         <Tree
                             rootStyle={{
+                                marginTop: '1%',
                                 background: 'none',
                                 borderColor: 'none',
                                 color: 'rgba(255, 255, 255, 1)'
@@ -172,9 +116,16 @@ const Left = () => {
                             treeData={treeData}
                         />
                     </div>
+                </div>
             </Module>
         </div>
     );
 };
+function mapStateToProps(state) {
+    const { busTier } = state
+    return {
+        busTier: busTier
+    }
+}
 
-export default Left;
+export default connect(mapStateToProps)(Left);

web/client/src/sections/quanju/containers/footer/operation/style.less

@@ -0,0 +1,29 @@
+.busList {
+	width: 100%;
+	height: 96%;
+	overflow-x: hidden;
+    overflow-y: auto;
+	.ant-tree .ant-tree-node-content-wrapper.ant-tree-node-selected{
+		background: none;
+		background-color: none !important; 
+		border: 1px solid rgba(10, 114, 255, 1);
+	}
+	.ant-tree .ant-tree-node-content-wrapper &:hover {
+		background-color: none;
+		background: none;
+	}
+}
+
+.busList::-webkit-scrollbar-track {
+	background-color: rgba(3, 60, 158, 0.3);
+	border-radius: 1px
+}
+
+.busList::-webkit-scrollbar {
+	width: 5px;
+}
+
+.busList::-webkit-scrollbar-thumb {
+	background-color: rgba(28, 96, 254, 1);
+	border-radius: 1px
+}

web/client/src/utils/webapi.js

@@ -57,7 +57,10 @@ export const ApiTable = {
     getzhichaomanager: 'manage/overspeed/processed',
 
     //获取治超详情数据
-    getzhichaodetail: '/manage/overspeed'
+    getzhichaodetail: '/manage/overspeed',
+
+    //大屏运营 —— 公交车辆层级信息
+    getBusTier:'/operation/car_level'
 };