comment

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

@@ -1,8 +1,13 @@
 import React from 'react'
+import Left from './left'
+import Right from './right'
 
 const Operation = () => {
     return (
-        <>运营</>
+        <div style={{ display: 'flex',  width: '100%',height: '100%',justifyContent: 'space-between' }}>
+            <Left />
+            <Right />
+        </div>
     )
 }
 export default Operation

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

@@ -0,0 +1,166 @@
+import React, { useMemo, useState, useEffect } from 'react';
+import { Col, Row, Input, Tree } from 'antd'
+import Module from '../../public/module'
+
+const { Search } = Input;
+const x = 3;
+const y = 2;
+const z = 1;
+const defaultData = [];
+
+const generateData = (_level, _preKey, _tns) => {
+    const preKey = _preKey || '0';
+    const tns = _tns || defaultData;
+    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) => {
+        setExpandedKeys(newExpandedKeys);
+        setAutoExpandParent(false);
+    };
+
+    const onChange = (e) => {
+        const { value } = e.target;
+        const newExpandedKeys = dataList
+            .map((item) => {
+                if (item.title.indexOf(value) > -1) {
+                    return getParentKey(item.key, defaultData);
+                }
+
+                return null;
+            })
+            .filter((item, i, self) => item && self.indexOf(item) === i);
+        setExpandedKeys(newExpandedKeys);
+        setSearchValue(value);
+        setAutoExpandParent(true);
+    };
+
+    const treeData = useMemo(() => {
+        const loop = (data) =>
+            data.map((item) => {
+                const strTitle = item.title;
+                const index = strTitle.indexOf(searchValue);
+                const beforeStr = strTitle.substring(0, index);
+                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),
+                    };
+                }
+
+                return {
+                    title,
+                    key: item.key,
+                };
+            });
+
+        return loop(defaultData);
+    }, [searchValue]);
+    return (
+        <div style={{ display: 'flex', flexDirection: 'column', width: "23%", height: "100%", marginLeft: "1%" }}>
+            <Module style={style} title={"公交车辆信息"}>
+                <div style={{width:'90%', height:'96', margin:'2% 5%',}}>
+                    <Input
+                        style={{
+                            marginBottom: 8,
+                        }}
+                        // placeholder="Search"
+                        onChange={onChange}
+                    />
+                    <Tree
+                        onExpand={onExpand}
+                        expandedKeys={expandedKeys}
+                        autoExpandParent={autoExpandParent}
+                        treeData={treeData}
+                    />
+                </div>
+            </Module>
+        </div>
+    );
+};
+
+export default Left;

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

@@ -0,0 +1,9 @@
+import React from 'react'
+
+const Right = () => {
+    return (
+        <div style={{ display: 'flex', flexDirection: 'column', width: "23%", height: "100%", marginRight: "1%", }}>555555555
+        </div>
+    )
+}
+export default Right