mcfxkh-Web/src/views/Home/InfoDlg/YascDlg/zdscya.js

import React, { useState } from 'react';
import { makeStyles } from '@material-ui/core/styles';
import { Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Paper, Checkbox, TextField } from '@material-ui/core';
import { Empty } from 'antd'

const useStyles = makeStyles((theme) => ({
  root: {
    backgroundColor: 'transparent',
    color: '#c9d1d9',
    padding: theme.spacing(2),
  },
  title: {
    color: '#58a6ff',
    marginBottom: theme.spacing(2),
    fontSize: '1rem',
    display: 'flex',
    alignItems: 'center',
    '&::before': {
      content: '""',
      width: 4,
      height: 16,
      backgroundColor: '#58a6ff',
      marginRight: theme.spacing(1),
    },
  },
  table: {
    backgroundColor: 'transparent',
    '& .MuiTableCell-root': {
      borderColor: '#30363d',
      color: '#c9d1d9',
      padding: theme.spacing(1),
    },
  },
  addButton: {
    backgroundColor: '#1f6feb',
    color: '#ffffff',
    border: 'none',
    padding: '4px 12px',
    borderRadius: 6,
    cursor: 'pointer',
    '&:hover': {
      backgroundColor: '#388bfd',
    },
  },
  checkboxLabel: {
    display: 'flex',
    alignItems: 'center',
    gap: theme.spacing(1),
  },
  weightInput: {
    width: 80,
    '& .MuiInputBase-root': {
      color: '#c9d1d9',
      backgroundColor: '#21262d',
    },
  },
}));

const SchemeOptimization = () => {
  const classes = useStyles();
  const [reservoirs, setReservoirs] = useState([
    { name: '浮标河水库', safeLevel: 64.80, storage: 16110, maxOutflow: 20.00 },
    { name: '明山水库', safeLevel: 93.00, storage: 5116, maxOutflow: 20.00 },
  ]);

  const [schemes, setSchemes] = useState([
    { id: 1, floodArea: 0.15, duration: 1320.0, households: 20, population: 100 },
    { id: 2, floodArea: 0.12, duration: 1235.0, households: 20, population: 100 },
    { id: 3, floodArea: 0.14, duration: 1350.0, households: 20, population: 100 },
  ]);

  const checkData = [
    {
      id:1,
      name: '最小化下游最大流量',
      checked: true,
      
    },
    {
      id:2,
      name: '最小化水库最高水位',
      checked:true
    },
    {
      id:3,
      name: '最大化防洪库容利用率',
      checked:false
    },
    {
      id:4,
      name: '最小化淹没损失',
      checked:false
    },
    {
      id:5,
      name: '最小化调度操作次数',
      checked:false
    }
  ]
  const [data, setData] = useState(checkData)
  const changeSw = (e, id) => {
    const checked = e.target.checked
    const data1 = checkData.map(item => {
      if (item.id == id) {
        item.checked = checked;
      }
      return item
    })
    setData(data1)
  }
  const [inputData, setInputData] = useState('')
  const inputChange = (e, i) =>{
    const val = e.target.value
    setInputData(val)
  }
  const [renderT, setRenderT] = useState(false)
  const fasc = () => {
    if (inputData) {
    setRenderT(true)
  }
}
  return (
    <div className={classes.root}>
      <div style={{ display: 'flex',columnGap:20 }}>
        <div style={{flex:1}}>
          <div className={classes.title}>约束条件配置</div>
          <TableContainer component={Paper} className={classes.table}>
            <Table>
              <TableHead>
                <TableRow>
                  <TableCell>水库名称</TableCell>
                  <TableCell>安全水位(m)</TableCell>
                  <TableCell>防洪库容(万m³)</TableCell>
                  <TableCell>最大泄量(m³/s)</TableCell>
                  <TableCell>操作</TableCell>
                </TableRow>
              </TableHead>
              <TableBody>
                {reservoirs.map((reservoir) => (
                  <TableRow key={reservoir.name}>
                    <TableCell>{reservoir.name}</TableCell>
                    <TableCell>{reservoir.safeLevel}</TableCell>
                    <TableCell>{reservoir.storage}</TableCell>
                    <TableCell>{reservoir.maxOutflow}</TableCell>
                    <TableCell>×</TableCell>
                  </TableRow>
                ))}
              </TableBody>
            </Table>
          </TableContainer>
          <button className={classes.addButton} style={{ margin: '16px 0' }}>添加水库</button>
        </div>
        <div>
          <div className={classes.title}>优化目标设置及权重分配</div>
          <div style={{ display: 'flex', justifyContent: 'space-between' }}>
            <div>
              {
                data.map(item => (
                   <div className={classes.checkboxLabel} key={item.id}>
                <Checkbox checked={item.checked} style={{ color: '#58a6ff' }}  onChange={(e) => changeSw(e,item.id)}/>
                    <span style={{display:'block',width:200}}>{item.name}</span>
                    {
                      item.checked && <TextField className={classes.weightInput} variant="outlined" size="small" onChange={(e)=>inputChange(e,item.id)} />
                    }
               
              </div>
                ))
              }
        
            </div>
          </div>
        </div>

      </div>
      <div style={{ marginTop: 24 }}>
        <div className={classes.title}>方案预览区</div>
        <button className={classes.addButton} onClick={fasc}>生成方案</button>
        <TableContainer component={Paper} className={classes.table} style={{ marginTop: 16 }}>
          <Table>
            <TableHead>
              <TableRow>
                <TableCell>方案</TableCell>
                <TableCell>淹没面积(km²)</TableCell>
                <TableCell>淹没历时(min)</TableCell>
                <TableCell>影响户数</TableCell>
                <TableCell>影响人口</TableCell>
                <TableCell>操作</TableCell>
              </TableRow>
            </TableHead>
            <TableBody>
              {renderT ?schemes.map((scheme) => (
                <TableRow key={scheme.id}>
                  <TableCell>方案{scheme.id}</TableCell>
                  <TableCell>{scheme.floodArea}</TableCell>
                  <TableCell>{scheme.duration}</TableCell>
                  <TableCell>{scheme.households}</TableCell>
                  <TableCell>{scheme.population}</TableCell>
                  <TableCell>
                    <button className={classes.addButton} style={{ marginRight: 8 }}>加载方案</button>
                    <button className={classes.addButton}>导出方案库</button>
                  </TableCell>
                </TableRow>
              )) : null
                // <Empty description={<span style={{ color: "#fff", position: 'absolute' }}>暂无数据</span>} />
              }
            </TableBody>
          </Table>
        </TableContainer>
      </div>
    </div>
  );
};

export default SchemeOptimization;