before_login

package.json

@@ -16,6 +16,7 @@
     "@testing-library/react": "12.0.0",
     "@testing-library/user-event": "13.5.0",
     "react": "17.0.2",
+    "react-arborist": "^3.4.3",
     "react-dom": "17.0.2",
     "react-google-charts": "^5.2.1",
     "react-router": "6.30.1",

src/AI.js

@@ -3,6 +3,11 @@ import * as React from 'react';
 import AIService from './AIService';
 import Service from './Service';
 import {useNavigate, useLocation} from "react-router";
+import ArrowRightIcon from '@rsuite/icons/ArrowRight';
+import ArrowDownIcon from '@rsuite/icons/ArrowDown';
+import TextField from '@mui/material/TextField';
+import SearchIcon from '@rsuite/icons/Search';
+
 //registerAllModules();
 import { DataGrid, GridActionsCellItem, zhCN as zh_CN} from '@mui/x-data-grid';
 import Box from '@mui/material/Box';
@@ -37,12 +42,16 @@ import HomeIcon from '@mui/icons-material/Home';
 import TipsAndUpdatesIcon from '@mui/icons-material/TipsAndUpdates';
 import Stack from '@mui/material/Stack';
 import Title from './Title';
-import {Tree as Tree_2} from 'rsuite';
+import {Tree as Tree_2} from 'react-arborist';
 import { CustomProvider } from 'rsuite';
 import './Tree.css';
 import zhCN from 'rsuite/locales/zh_CN';
 import FormControl from '@mui/material/FormControl';
 import InputLabel from '@mui/material/InputLabel';
+import Input from 'rsuite/Input';
+import 'rsuite/Input/styles/index.css';
+import InputGroup from 'rsuite/InputGroup';
+import 'rsuite/InputGroup/styles/index.css';
 
 import Grid from '@mui/material/Grid';
 import Container from '@mui/material/Container';
@@ -50,6 +59,7 @@ import Paper from '@mui/material/Paper';
 import LinearProgress from '@mui/material/LinearProgress';
 import Chart from './Chart';
 import Chart2 from './Chart2';
+import Chart3 from './Chart3';
 import Select from '@mui/material/Select';
 import MenuItem from '@mui/material/MenuItem';
 
@@ -89,6 +99,7 @@ export default function AI() {
           onClick={(event) => {
             console.log(value);
             event.stopPropagation();
+            setSelected();
             handleZujia();
             AIService.qingdan(value).then(x=>{
               setQddetail(x);
@@ -97,6 +108,11 @@ export default function AI() {
                 setZjdetail(y);
                 setZjloading(false);
                });
+               setTjloading(true);
+               AIService.tuijian(x[0]['清单编码']).then(y=>{
+                setTjdetail(y);
+                setTjloading(false);
+               });
              });
             
           }}
@@ -197,8 +213,7 @@ export default function AI() {
   const tjcolumns = React.useMemo(
     () => [
       { field: '组价定额', headerName: '组价定额', width : 250 , sortable: false, renderCell: RenderDe},
-      { field: '定额名称', headerName: '定额名称', width : 250, sortable: false, renderCell: RenderDemc },
-      { field: '综合单价', headerName: '综合单价',  },    
+      { field: '定额名称', headerName: '定额名称', width : 350, sortable: false, renderCell: RenderDemc },
     ],
     
   );
@@ -241,6 +256,8 @@ export default function AI() {
 
     const [tab, setTab] = React.useState(false);
     const [qingdanshu, setQingdanshu] = React.useState([]);
+    const [selected, setSelected] = React.useState();
+    const [keyword, setKeyword] = React.useState();
 
 
     React.useEffect(
@@ -351,21 +368,26 @@ export default function AI() {
     setDopen(false);
   };
 
-  const onSelect = (selectedKeys, info) => {
+  const onSelect = (selectedKeys) => {
     
-    if (!selectedKeys.hasOwnProperty("children") || selectedKeys['children'].length == 0) {
+      setSelected(selectedKeys['id']);
       setZjloading(true);
-         console.log(selectedKeys['id']);
+         console.log(selectedKeys);
          AIService.qingdan(selectedKeys['title']).then(x=>{
           setQddetail(x);
           AIService.zujia(x[0]['清单编码']).then(y=>{
             setZjdetail(y);
             setZjloading(false);
            });
+           setTjloading(true);
+           AIService.tuijian(x[0]['清单编码']).then(y=>{
+            setTjdetail(y);
+            setTjloading(false);
+           });
          });
          
     
-      }
+      
   };
 
   const onExpand = (expandItemValues, node) => {
@@ -464,6 +486,68 @@ export default function AI() {
 const minHeight = 100;
 const maxHeight = 400;
 
+const CustomInputGroup = ({ placeholder, ...props }) => (
+  <InputGroup {...props} style={{"marginTop": 5}}>
+    <Input placeholder={placeholder} 
+    value={keyword}
+    onChange={(value)=>{setKeyword(value);}}
+    />
+    <InputGroup.Addon>
+      <SearchIcon />
+    </InputGroup.Addon>
+  </InputGroup>
+);
+
+
+
+function Node({ node, style }) {
+  
+  let style_ = {'paddingLeft': style['paddingLeft']};
+  style_['fontSize'] = "0.875rem";
+  if (node.state.isSelected) {
+    style_['backgroundColor'] = "#f2faff";
+    style_['color'] = "#1675e0";
+    style_['fontWeight'] = "bold";
+    console.log(node);
+  }
+  return (
+    <div
+      
+      style={style_}
+      
+      onClick={() => {
+        if (node.children.length > 0)  {node.toggle();}
+        else {
+          setSelected(node['id']);
+          setZjloading(true);
+        }
+      }
+    }
+    >
+     
+      <FolderArrow node={node} />
+      
+      <span >
+        {node.data.name}
+      </span>
+    </div>
+  );
+}
+
+function FolderArrow({ node }) {
+  return (
+    <span >
+      {node.isInternal ? (
+        node.isOpen ? (
+          <ArrowDownIcon />
+        ) : (
+          <ArrowRightIcon />
+        )
+      ) : null}
+    </span>
+  );
+}
+
 
     return (
       <Box sx={{ display: 'flex' }}>
@@ -641,13 +725,16 @@ const maxHeight = 400;
                      
                      </Select>
                    </FormControl> 
-                  <CustomProvider locale={zhCN}>
-               <Tree_2 searchable height={460}
-                     onSelect={onSelect}
-                     onExpand={onExpand}
-                     expandItemValues={expanded}
-                     data={qingdanshu}/>
-                     </CustomProvider>
+                  
+                 
+                  <Chart3 qingdanshu={qingdanshu}
+                  selected={selected}
+                  callback={(value)=>{
+                    onSelect(value);
+                    
+                  }}
+                  ></Chart3>
+                    
                 </Paper>
               </Grid>
               {/* Recent Deposits */}
@@ -672,7 +759,7 @@ const maxHeight = 400;
                  minHeight,
                  maxHeight,
 
-                 "overflow-y": "scroll"
+                 "overflowY": "scroll"
                  }}
                 >
                 <DataGrid autoHeight hideFooter={true}
@@ -687,7 +774,7 @@ const maxHeight = 400;
                 <div
                  style={{
                  
-                 "overflow-y": "scroll",
+                 "overflowY": "scroll",
                  
                  minHeight,
                  maxHeight 

src/AIService.js

@@ -141,6 +141,29 @@ class AIService{
         }
     }
 
+    async tuijian(query) {
+        const response = await fetch(this.ip().concat( "/tuijian/"), {
+            method : "POST",
+            headers: {
+                "Content-type": "application/json"
+            },
+            body: JSON.stringify(
+                {
+                    "name": query,
+                    
+                    
+                }
+            )
+        });
+        if (!response.ok) {
+            //const error = await response.json();
+            console.error('error');
+        } else {
+            const data = await response.json();
+            return data;
+        }
+    }
+
     
 
 

src/Chart3.js

@@ -0,0 +1,123 @@
+import * as React from 'react';
+import { useTheme } from '@mui/material/styles';
+import { ResponsiveContainer } from 'recharts';
+import Title from './Title';
+import { Chart as GChart } from "react-google-charts";
+import Box from '@mui/material/Box';
+import Skeleton from '@mui/material/Skeleton';
+import Paper from '@mui/material/Paper';
+import { DataGrid, GridActionsCellItem, zhCN as zh_CN} from '@mui/x-data-grid';
+import Button from '@mui/material/Button';
+import {Tree as Tree_2} from 'react-arborist';
+import ArrowRightIcon from '@rsuite/icons/ArrowRight';
+import ArrowDownIcon from '@rsuite/icons/ArrowDown';
+import CircularProgress from '@mui/material/CircularProgress';
+import TextField from '@mui/material/TextField';
+
+import { ResponsiveChartContainer } from '@mui/x-charts/ResponsiveChartContainer';
+import { createTheme, ThemeProvider } from '@mui/material/styles';
+
+import Input from 'rsuite/Input';
+import 'rsuite/Input/styles/index.css';
+import InputGroup from 'rsuite/InputGroup';
+import 'rsuite/InputGroup/styles/index.css';
+import { PiePlot } from '@mui/x-charts/PieChart';
+
+import { ChartsTooltip } from '@mui/x-charts/ChartsTooltip';
+
+import { ChartsLegend } from '@mui/x-charts/ChartsLegend';
+
+
+import SearchIcon from '@rsuite/icons/Search';
+
+
+
+
+
+
+export default function Chart3({qingdanshu, callback, selected}) {
+
+
+  const [keyword, setKeyword] = React.useState();
+  const CustomInputGroup = ({ placeholder, ...props }) => (
+    <InputGroup {...props} style={{"marginTop": 5}}>
+      <Input placeholder={placeholder} 
+      value={keyword}
+      onChange={(value)=>{setKeyword(value);}}
+      />
+      <InputGroup.Addon>
+        <SearchIcon />
+      </InputGroup.Addon>
+    </InputGroup>
+  );
+  function Node({ node, style }) {
+  
+    let style_ = {'paddingLeft': style['paddingLeft']};
+    style_['fontSize'] = "0.875rem";
+    if (node.state.isSelected) {
+      style_['backgroundColor'] = "#f2faff";
+      style_['color'] = "#1675e0";
+      style_['fontWeight'] = "bold";
+      console.log(node);
+    }
+    return (
+      <div
+        
+        style={style_}
+        
+        onClick={() => {
+          if (node.children.length > 0)  {node.toggle();}
+          else {
+            //setSelected(node['id']);
+            callback(node['data']);
+          }
+        }
+      }
+      >
+       
+        <FolderArrow node={node} />
+        
+        <span >
+          {node.data.name}
+        </span>
+      </div>
+    );
+  }
+  function FolderArrow({ node }) {
+    return (
+      <span >
+        {node.isInternal ? (
+          node.isOpen ? (
+            <ArrowDownIcon />
+          ) : (
+            <ArrowRightIcon />
+          )
+        ) : null}
+      </span>
+    );
+  }
+  
+  return (
+    
+    
+    <Box>
+      <TextField
+       label="搜索"
+       id="outlined-size-small"
+       margin="dense"
+       autoFocus
+       size="small"
+       value={keyword}
+        onChange={(event) => {
+          setKeyword(event.target.value);
+        }}
+      />
+         <Tree_2  height={460} width={"100%"}
+                          openByDefault={false}
+                          rowHeight={38}
+                          searchTerm={keyword}
+                          selection={selected}
+                     data={qingdanshu}>{Node}</Tree_2>
+    </Box>  
+  );
+}