From 11e4540997767869b2e350eed297504c624dce0d Mon Sep 17 00:00:00 2001 From: wanyiwei Date: Mon, 25 Jul 2022 21:55:14 +0800 Subject: [PATCH] =?UTF-8?q?*=E5=A4=A7=E5=B1=8F=E8=BF=90=E8=90=A5=E6=95=B0?= =?UTF-8?q?=E6=8D=AE=E6=8E=A5=E5=85=A5=E5=8F=8A=E6=9D=A1=E4=BB=B6=E8=BF=87?= =?UTF-8?q?=E6=BB=A4=E5=8F=8A=E9=83=A8=E5=88=86=E6=A0=B7=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/sections/quanju/actions/example.js | 12 + .../containers/footer/operation/index.js | 29 ++- .../containers/footer/operation/left.js | 231 +++++++----------- .../containers/footer/operation/style.less | 29 +++ web/client/src/utils/webapi.js | 5 +- 5 files changed, 160 insertions(+), 146 deletions(-) create mode 100644 web/client/src/sections/quanju/containers/footer/operation/style.less diff --git a/web/client/src/sections/quanju/actions/example.js b/web/client/src/sections/quanju/actions/example.js index 5818df8d..e7336031 100644 --- a/web/client/src/sections/quanju/actions/example.js +++ b/web/client/src/sections/quanju/actions/example.js @@ -50,4 +50,16 @@ export function getjiandetail() { msg: { error: '获取治超监测点处理数据信息' }, // reducer: { name: 'members' } }); +} + +//获取公交车辆层级信息 +export function getBusTierList() { + return dispatch => basicAction({ + type: 'get', + dispatch: dispatch, + actionType: 'GET_BUSTIER', + url: ApiTable.getBusTier, + msg: { error: '获取公交车辆层级信息失败' }, + reducer: { name: 'busTier' } + }); } \ No newline at end of file diff --git a/web/client/src/sections/quanju/containers/footer/operation/index.js b/web/client/src/sections/quanju/containers/footer/operation/index.js index 4ebd1ab2..86dc21df 100644 --- a/web/client/src/sections/quanju/containers/footer/operation/index.js +++ b/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 (
- - + +
) } -export default Operation \ No newline at end of file +function mapStateToProps(state) { + + return { + + } +} +export default connect(mapStateToProps)(Operation) \ No newline at end of file diff --git a/web/client/src/sections/quanju/containers/footer/operation/left.js b/web/client/src/sections/quanju/containers/footer/operation/left.js index eb5681e7..e4c5be32 100644 --- a/web/client/src/sections/quanju/containers/footer/operation/left.js +++ b/web/client/src/sections/quanju/containers/footer/operation/left.js @@ -1,89 +1,15 @@ -import React, { useMemo, useState, useEffect } from 'react'; -import { SearchOutlined } from '@ant-design/icons'; -import { Col, Row, Input, Tree } from 'antd' +import React, { useState, useEffect } from 'react'; +import { connect } from 'react-redux'; +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 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 Left = (props) => { + const [treeData, setTreeData] = useState([]) + const [treeDataList, setTreeDataList] = useState([]) 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 - .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); + let keys = [] + const newExpandedKeys = treeDataList.filter(e=> e.key.match(value)) + newExpandedKeys.forEach(e=>{ + keys.push(e.key) + }) + setExpandedKeys(keys); 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 ? ( - - {beforeStr} - {searchValue} - {afterStr} - - ) : ( - {strTitle} - ); - - if (item.children) { + useEffect(() => { + let busTierList = [] + let busTierOpen = [] + let dataList = [] + busTier && busTier.data && busTier.data.forEach((e, index) => { + if (index == 0) { + busTierOpen.push(e.name) + } + busTierList.push({ + key: e.name, + title: e.name, + children: e.child.map(s => { return { - title, - key: item.key, - children: loop(item.children), - }; - } - - return { - title, - key: item.key, - }; - }); - - return loop(defaultData); - }, [searchValue]); + key: s.name, + title: s.name, + children: s.child.map(i => { + return { + key: i.vehicleLicensePlateNumber, + title: i.vehicleLicensePlateNumber, + } + }) + } + + }) + }) + }) + 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 (
- -
+ +
{ onChange={onChange} />
- +
+ +
); }; +function mapStateToProps(state) { + const { busTier } = state + return { + busTier: busTier + } +} -export default Left; \ No newline at end of file +export default connect(mapStateToProps)(Left); \ No newline at end of file diff --git a/web/client/src/sections/quanju/containers/footer/operation/style.less b/web/client/src/sections/quanju/containers/footer/operation/style.less new file mode 100644 index 00000000..2733443c --- /dev/null +++ b/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 +} \ No newline at end of file diff --git a/web/client/src/utils/webapi.js b/web/client/src/utils/webapi.js index 1b2307b0..a1772ef0 100644 --- a/web/client/src/utils/webapi.js +++ b/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' };