feat(): 水库水情点位修改

qzc-dev
李神峰 2025-09-30 14:22:27 +08:00
parent 2a25421efc
commit f391494d10
11 changed files with 151 additions and 120 deletions

View File

@ -96,7 +96,7 @@ export default class ShuiKuLayer extends BaseLayer {
// } // }
const list = data.filter(o=>o.stnm==='檀树岗' || o.stnm==='檀树岗(新)') const list = data.filter(o=>o.stcd==="61610700" || o.stcd==="10818")
.map((i) => { .map((i) => {
return { return {
id : i.stcd, id : i.stcd,
@ -104,7 +104,6 @@ export default class ShuiKuLayer extends BaseLayer {
...i ...i
} }
}) })
this._dispatch.runtime.setMarkers({ this._dispatch.runtime.setMarkers({
[this.getLayerName()]: list || [] [this.getLayerName()]: list || []
}); });

View File

@ -677,7 +677,7 @@ const HomePage = ({ showPanels }) => {
> >
{ {
item.children.map((item) => item.children.map((item) =>
<dit className='homePage_Panel_item' style={(checkedObj.key === item.key && showTable) ? { color: '#409eff' } : {}} onClick={() => { <div className='homePage_Panel_item' style={(checkedObj.key === item.key && showTable) ? { color: '#409eff' } : {}} onClick={() => {
// 清空搜索输入框 // 清空搜索输入框
setSearchVal('') setSearchVal('')
setCheckedObj(item) setCheckedObj(item)
@ -699,7 +699,7 @@ const HomePage = ({ showPanels }) => {
</div> </div>
: null : null
} }
</dit> </div>
) )
} }
</Panel> </Panel>

View File

@ -40,50 +40,50 @@ const Page = () => {
return ( return (
<> <>
<div className="home_shuizhi"> <div className="home_shuizhi">
<dit className='home_shuizhi_item2'> <div className='home_shuizhi_item2'>
<div>建筑物型式:</div> <div>建筑物型式:</div>
<div>{tableData.buildType}</div> <div>{tableData.buildType}</div>
</dit> </div>
<dit className='home_shuizhi_item2'> <div className='home_shuizhi_item2'>
<div>地基特性:</div> <div>地基特性:</div>
<div>{tableData.foundCharacter}</div> <div>{tableData.foundCharacter}</div>
</dit> </div>
<dit className='home_shuizhi_item2'> <div className='home_shuizhi_item2'>
<div>坝顶高程(m):</div> <div>坝顶高程(m):</div>
<div>{tableData.damTopElev}</div> <div>{tableData.damTopElev}</div>
</dit> </div>
<dit className='home_shuizhi_item2'> <div className='home_shuizhi_item2'>
<div>最大坝高(m):</div> <div>最大坝高(m):</div>
<div>{tableData.damMaxHeig}</div> <div>{tableData.damMaxHeig}</div>
</dit> </div>
<dit className='home_shuizhi_item2'> <div className='home_shuizhi_item2'>
<div>坝顶长度(m):</div> <div>坝顶长度(m):</div>
<div>{tableData.damTopLen}</div> <div>{tableData.damTopLen}</div>
</dit> </div>
<dit className='home_shuizhi_item2'> <div className='home_shuizhi_item2'>
<div>坝顶宽度(m):</div> <div>坝顶宽度(m):</div>
<div>{tableData.damTopWid}</div> <div>{tableData.damTopWid}</div>
</dit> </div>
{/* <dit className='home_shuizhi_item2'> {/* <div className='home_shuizhi_item2'>
<div>防浪墙顶高程(m):</div> <div>防浪墙顶高程(m):</div>
<div>{tableData.damWaveWall}</div> <div>{tableData.damWaveWall}</div>
</dit> </div>
<dit className='home_shuizhi_item2'> <div className='home_shuizhi_item2'>
<div>开工日期:</div> <div>开工日期:</div>
<div>{tableData?.startDate?.slice(0,10)}</div> <div>{tableData?.startDate?.slice(0,10)}</div>
</dit> </div>
<dit className='home_shuizhi_item2'> <div className='home_shuizhi_item2'>
<div>竣工日期:</div> <div>竣工日期:</div>
<div>{tableData?.endDate?.slice(0,10)}</div> <div>{tableData?.endDate?.slice(0,10)}</div>
</dit> </div>
<dit className='home_shuizhi_item2'> <div className='home_shuizhi_item2'>
<div>蓄水日期:</div> <div>蓄水日期:</div>
<div>{tableData?.storageDate?.slice(0,10)}</div> <div>{tableData?.storageDate?.slice(0,10)}</div>
</dit> */} </div> */}
{/* <dit className='home_shuizhi_item2'> {/* <div className='home_shuizhi_item2'>
<div>图片资料</div> <div>图片资料</div>
<div></div> <div></div>
</dit> </div>
<div style={{margin:'10px 35px',height:'70ox',overflow:'hidden' }}> <div style={{margin:'10px 35px',height:'70ox',overflow:'hidden' }}>
<div style={{width:100*(imgList.length||0),position:'relative',left:left+'px'}}> <div style={{width:100*(imgList.length||0),position:'relative',left:left+'px'}}>
{ {
@ -120,10 +120,10 @@ const Page = () => {
/> />
</div> */} </div> */}
{/* */} {/* */}
{/* <dit className='home_shuizhi_item2'> {/* <div className='home_shuizhi_item2'>
<div>视频资料:</div> <div>视频资料:</div>
<div></div> <div></div>
</dit> */} </div> */}
</div> </div>
</> </>
) )

View File

@ -37,11 +37,11 @@ const Page = () => {
return ( return (
<> <>
<div className="home_shuizhi"> <div className="home_shuizhi">
<dit className='home_shuizhi_item2'> <div className='home_shuizhi_item2'>
<div>工程位置:</div> <div>工程位置:</div>
<div>{tableData.resLoc}</div> <div>{tableData.resLoc}</div>
</dit> </div>
<dit className='home_shuizhi_item2'> <div className='home_shuizhi_item2'>
<div>水库规模:</div> <div>水库规模:</div>
<div>{ <div>{
{ {
@ -53,51 +53,51 @@ const Page = () => {
9:'其他', 9:'其他',
}[tableData.engScal] }[tableData.engScal]
}</div> }</div>
</dit> </div>
<dit className='home_shuizhi_item2'> <div className='home_shuizhi_item2'>
<div>主要功能:</div> <div>主要功能:</div>
<div>{tableData.rsvFunction}</div> <div>{tableData.rsvFunction}</div>
</dit> </div>
<dit className='home_shuizhi_item2'> <div className='home_shuizhi_item2'>
<div>坝址以上流域面积(km²):</div> <div>坝址以上流域面积(km²):</div>
<div>{getNum(tableData.watShedArea)}</div> <div>{getNum(tableData.watShedArea)}</div>
</dit> </div>
<dit className='home_shuizhi_item2'> <div className='home_shuizhi_item2'>
<div>总库容(万m³):</div> <div>总库容(万m³):</div>
<div>{getNum(tableData.totCap)}</div> <div>{getNum(tableData.totCap)}</div>
</dit> </div>
<dit className='home_shuizhi_item2'> <div className='home_shuizhi_item2'>
<div>校核洪水位(m):</div> <div>校核洪水位(m):</div>
<div>{getNum(tableData.calFloodLev)}</div> <div>{getNum(tableData.calFloodLev)}</div>
</dit> </div>
<dit className='home_shuizhi_item2'> <div className='home_shuizhi_item2'>
<div>设计洪水位(m):</div> <div>设计洪水位(m):</div>
<div>{getNum(tableData.desFloodLev)}</div> <div>{getNum(tableData.desFloodLev)}</div>
</dit> </div>
<dit className='home_shuizhi_item2'> <div className='home_shuizhi_item2'>
<div>正常蓄水位(m):</div> <div>正常蓄水位(m):</div>
<div>{getNum(tableData.normWatLev)}</div> <div>{getNum(tableData.normWatLev)}</div>
</dit> </div>
<dit className='home_shuizhi_item2'> <div className='home_shuizhi_item2'>
<div>汛限水位(m):</div> <div>汛限水位(m):</div>
<div>{getNum(tableData.flLowLimLev)}</div> <div>{getNum(tableData.flLowLimLev)}</div>
</dit> </div>
<dit className='home_shuizhi_item2'> <div className='home_shuizhi_item2'>
<div>死水位(m):</div> <div>死水位(m):</div>
<div>{getNum(tableData.deadLev)}</div> <div>{getNum(tableData.deadLev)}</div>
</dit> </div>
<dit className='home_shuizhi_item2'> <div className='home_shuizhi_item2'>
<div>兴利库容(万m³):</div> <div>兴利库容(万m³):</div>
<div>{getNum(tableData.benResCap)}</div> <div>{getNum(tableData.benResCap)}</div>
</dit> </div>
<dit className='home_shuizhi_item2'> <div className='home_shuizhi_item2'>
<div>死库容(万m³):</div> <div>死库容(万m³):</div>
<div>{getNum(tableData.deadCap)}</div> <div>{getNum(tableData.deadCap)}</div>
</dit> </div>
<dit className='home_shuizhi_item2'> <div className='home_shuizhi_item2'>
<div>工程特性表:</div> <div>工程特性表:</div>
<div style={{color:'#007AFDB3',cursor:'pointer'}} onClick={()=>setOpen(true)}>工程特性表详情</div> <div style={{color:'#007AFDB3',cursor:'pointer'}} onClick={()=>setOpen(true)}>工程特性表详情</div>
</dit> </div>
{/* <div style={{width:'100%',color:'#007AFDB3',fontWeight:500,cursor:'pointer',marginTop:'10px',textAlign:'center'}}>更多详情</div> */} {/* <div style={{width:'100%',color:'#007AFDB3',fontWeight:500,cursor:'pointer',marginTop:'10px',textAlign:'center'}}>更多详情</div> */}
</div> </div>

View File

@ -11,12 +11,12 @@ import Ykqk from './item_shuiku/yhqk'
const Page = () => { const Page = () => {
const dispatch = useDispatch(); const dispatch = useDispatch();
const [ checked, setChecked ] = useState(0) const [ checked, setChecked ] = useState(1)
const [data,setData] = useState([]) const [data,setData] = useState([])
console.log('data',data); console.log('data',data);
useEffect(()=>{ useEffect(()=>{
dispatch.map.setLayerVisible({ ShuiKuLayer: true }) dispatch.map.setLayerVisible({ ShuiKuLayer: true })
dispatch.map.setLayerVisible({ HdswLayer: true }) dispatch.map.setLayerVisible({ HdswLayer: false })
getData() getData()
return ()=>{ return ()=>{
dispatch.map.setLayerVisible({ ShuiKuLayer: false }) dispatch.map.setLayerVisible({ ShuiKuLayer: false })
@ -27,7 +27,7 @@ const Page = () => {
const getData = async (params) => { const getData = async (params) => {
const data = await reservoirlist(params) || [] const data = await reservoirlist(params) || []
// const list = [...data.filter(o=>o.stnm==='檀树岗(新)'),...data.filter(o=>o.stnm!=='檀树岗(新)')] // const list = [...data.filter(o=>o.stnm==='檀树岗(新)'),...data.filter(o=>o.stnm!=='檀树岗(新)')]
const list = [...data.filter(o=>o.stnm==='檀树岗'),...data.filter(o=>o.stnm==='檀树岗(新)')] const list = [...data.filter(o=>o.stcd==="61610700"),...data.filter(o=>o.stcd==="10818")]
setData(list) setData(list)
} }
@ -41,7 +41,7 @@ const Page = () => {
} }
}) })
// const list2 = [...list.filter(o=>o.stnm==='檀树岗(新)'),...list.filter(o=>o.stnm!=='檀树岗(新)')] // const list2 = [...list.filter(o=>o.stnm==='檀树岗(新)'),...list.filter(o=>o.stnm!=='檀树岗(新)')]
const list2 = [...list.filter(o=>o.stnm==='檀树岗'),...list.filter(o=>o.stnm==='檀树岗(新)')] const list2 = [...list.filter(o=>o.stcd==="61610700"),...list.filter(o=>o.stcd==="10818")]
console.log('res',list2); console.log('res',list2);
const data = list2[checked] const data = list2[checked]
dispatch.runtime.setFeaturePop({ dispatch.runtime.setFeaturePop({
@ -64,7 +64,7 @@ const Page = () => {
<div className="home_yuqing_header" style={{marginBottom:'10px'}}> <div className="home_yuqing_header" style={{marginBottom:'10px'}}>
{ {
data.map((item,index)=> data.map((item,index)=>
<div style={{width:'50%'}}><div style={{width:'90%'}} className={checked===index?'home_yuqing_header_item avtive':'home_yuqing_header_item'} onClick={()=>setChecked(index)}>{item.stnm}</div></div> <div style={{width:'50%'}}><div style={{width:'100%'}} className={checked===index?'home_yuqing_header_item avtive':'home_yuqing_header_item'} onClick={()=>setChecked(index)}>{item.stnm}</div></div>
) )
} }
</div> </div>

View File

@ -30,38 +30,38 @@ const Page = () => {
return ( return (
<> <>
<div className="home_shuizhi"> <div className="home_shuizhi">
<dit className='home_shuizhi_item2'> <div className='home_shuizhi_item2'>
<div>型式:</div> <div>型式:</div>
<div>{tableData.buildType}</div> <div>{tableData.buildType}</div>
</dit> </div>
<dit className='home_shuizhi_item2'> <div className='home_shuizhi_item2'>
<div>堰顶高程(m):</div> <div>堰顶高程(m):</div>
<div>{tableData.crestEle}</div> <div>{tableData.crestEle}</div>
</dit> </div>
<dit className='home_shuizhi_item2'> <div className='home_shuizhi_item2'>
<div>总净宽(m):</div> <div>总净宽(m):</div>
<div>{tableData.netWidth}</div> <div>{tableData.netWidth}</div>
</dit> </div>
<dit className='home_shuizhi_item2'> <div className='home_shuizhi_item2'>
<div>最大单宽流量m³/(s·m):</div> <div>最大单宽流量m³/(s·m):</div>
<div>{tableData.bwidQ}</div> <div>{tableData.bwidQ}</div>
</dit> </div>
<dit className='home_shuizhi_item2'> <div className='home_shuizhi_item2'>
<div>消能方式:</div> <div>消能方式:</div>
<div>{tableData.elimMethod}</div> <div>{tableData.elimMethod}</div>
</dit> </div>
<dit className='home_shuizhi_item2'> <div className='home_shuizhi_item2'>
<div>消能防冲流量(/s):</div> <div>消能防冲流量(/s):</div>
<div>{tableData.elimQ}</div> <div>{tableData.elimQ}</div>
</dit> </div>
<dit className='home_shuizhi_item2'> <div className='home_shuizhi_item2'>
<div>设计泄洪流量(/s):</div> <div>设计泄洪流量(/s):</div>
<div>{tableData.desQ}</div> <div>{tableData.desQ}</div>
</dit> </div>
<dit className='home_shuizhi_item2'> <div className='home_shuizhi_item2'>
<div>校核泄洪流量(/s):</div> <div>校核泄洪流量(/s):</div>
<div>{tableData.caliQ}</div> <div>{tableData.caliQ}</div>
</dit> </div>
</div> </div>
</> </>
) )

View File

@ -6,6 +6,7 @@ import apiurl from "../../../../service/apiurl";
import moment from "moment"; import moment from "moment";
import Table_qx from './table_qx' import Table_qx from './table_qx'
import Table_wy from './table_wy' import Table_wy from './table_wy'
import Table_by from './table_by'
import Table_sl from './table_sl' import Table_sl from './table_sl'
import Table_sy from './table_sy' import Table_sy from './table_sy'
import Table_AI from './table_AI' import Table_AI from './table_AI'
@ -14,35 +15,18 @@ import { useNavigate } from "react-router";
const Page = ({ mySetTms }) => { const Page = ({ mySetTms }) => {
const navigator = useNavigate();
const [dataObj, setDataObj] = useState({}) const [dataObj, setDataObj] = useState({})
const [count, setCount] = useState({})
console.log(dataObj) console.log(dataObj)
const [ open, setOpen ] = useState(false) const [ open, setOpen ] = useState(false)
const [ key , setkey ] = useState('') const [ key , setkey ] = useState('')
const [ tms , setTms ] = useState([ const [ tms , setTms ] = useState([
moment().add(-1,'days').format('YYYY-MM-DD HH:mm:ss'), // moment().add(-1,'days').format('YYYY-MM-DD HH:mm:ss'),
moment().format('YYYY-MM-DD HH:mm:ss'), // moment().format('YYYY-MM-DD HH:mm:ss'),
moment('2025-09-16').format('YYYY-MM-DD HH:mm:ss'),
moment('2025-09-17').format('YYYY-MM-DD HH:mm:ss')
]) ])
// 获取白蚁统计数量
const getCount = async () => {
const params = {
pageSo: {
pageNumber: 1,
pageSize: 99999,
},
obDate:moment().format('YYYY-MM-DD')
}
try {
const res = await httppost2(apiurl.rcgl.byfz.bypc.count, params);
setCount(res.data);
} catch (error) {
console.log(error);
}
}
useEffect(()=>{ useEffect(()=>{
(async()=>{ (async()=>{
@ -61,7 +45,7 @@ const Page = ({ mySetTms }) => {
]) ])
setDataObj(data) setDataObj(data)
})() })()
getCount()
},[]) },[])
@ -108,8 +92,8 @@ const Page = ({ mySetTms }) => {
<div className="content">AI告警</div> <div className="content">AI告警</div>
<div></div> <div></div>
</div> </div>
<div className="bodyBoxItem" onClick={() =>{navigator('/mgr/sg/byfz/bypc')}}> <div className="bodyBoxItem" onClick={()=>{setOpen(true);setkey('白蚁告警')}}>
<div className="num">{count.hasAnt}</div> <div className="num">{dataObj.byWarn?.length || 0}<span style={{fontSize:14,color:"#000",marginLeft:2}}></span></div>
<div className="content">白蚁告警</div> <div className="content">白蚁告警</div>
<div></div> <div></div>
</div> </div>
@ -130,7 +114,7 @@ const Page = ({ mySetTms }) => {
<div className="normalModalStyle"> <div className="normalModalStyle">
<div className="normalModalStyle_title"> <div className="normalModalStyle_title">
<div className="normalModalStyle_title_icon"></div> <div className="normalModalStyle_title_icon"></div>
{key} {key == '白蚁告警' ? key + "(" + tms[0]?.slice(0,16) + "至" + tms[1]?.slice(0,16) + ')':key }
<div className="normalModalStyle_title_cancel"> <div className="normalModalStyle_title_cancel">
<CloseOutlined onClick={()=>setOpen(false)} style={{color:"#333"}}/> <CloseOutlined onClick={()=>setOpen(false)} style={{color:"#333"}}/>
</div> </div>
@ -139,7 +123,8 @@ const Page = ({ mySetTms }) => {
{ key==='位移告警'?<Table_wy data={dataObj.shiftWarn} onCancel={()=>setOpen(false)}/>:null } { key==='位移告警'?<Table_wy data={dataObj.shiftWarn} onCancel={()=>setOpen(false)}/>:null }
{ key==='渗压告警'?<Table_sy data={dataObj.pressWarn} onCancel={()=>setOpen(false)}/>:null } { key==='渗压告警'?<Table_sy data={dataObj.pressWarn} onCancel={()=>setOpen(false)}/>:null }
{ key==='渗流告警'?<Table_sl data={dataObj.flowWarn} onCancel={()=>setOpen(false)}/>:null } { key==='渗流告警'?<Table_sl data={dataObj.flowWarn} onCancel={()=>setOpen(false)}/>:null }
{ key==='AI告警'?<Table_AI/>:null } {key === 'AI告警' ? <Table_AI /> : null}
{ key==='白蚁告警'?<Table_by data={dataObj.byWarn} onCancel={()=>setOpen(false)}/>:null }
</div> </div>
</Modal> </Modal>
</div> </div>

View File

@ -0,0 +1,56 @@
import React, { Fragment, useRef, useMemo, useEffect, useState } from 'react';
import { Table, Modal, message,Tag } from 'antd';
import { CloseOutlined } from "@ant-design/icons";
import usePageTable from '../../../../components/crud/usePageTable2'
import { createCrudService } from '../../../../components/crud/_';
import { httppost2 } from "../../../../utils/request";
import apiurl from "../../../../service/apiurl";
const Page = ({ data }) => {
const columns = [
{ title: '序号', key: 'inx', dataIndex: 'inx', align: "center", render: (text, rec, index) => index + 1 },
{ title: '最近报警时间', key: 'obDate', dataIndex: 'obDate', ellipsis: true },
{ title: '测点编号', key: 'order', dataIndex: 'order' },
{
title: '有无白蚁',
dataIndex: 'status',
align: 'center',
key: 'status',
width: 100,
render: (text, record) => {
// 如果 isHarm 为 null 或 undefined显示无
if (text == null) {
return <Tag color="#04d919" style={{ borderRadius: '50%', padding: '4px 8px' }}></Tag>;
}
// 如果 isHandle 为 null 或 undefined当作 false 处理
const isHandle = record.isHandle ?? false;
return (
<Tag
color={!text ? '#04d919' : '#d9001b'}
style={{ borderRadius: '50%', padding: '4px 8px' }}
>
{!text ? '无' : '有'}
</Tag>
);
}
},
];
return (
<div className="ant-card-body" style={{ padding: "10px" }}>
<Table rowKey="id"
sticky
columns={columns}
pagination={false}
dataSource={data}
scroll={{ y: "450px" }}
/>
</div>
)
}
export default Page

View File

@ -48,7 +48,6 @@ const ModalForm = ({ mode, record, refresh, setPrecessVisible }) => {
setHandleDetails(row) setHandleDetails(row)
} }
const reviewPic = (arrPic) => { const reviewPic = (arrPic) => {
debugger
if (arrPic.length > 0) { if (arrPic.length > 0) {
setImgVisible(true) setImgVisible(true)
setImgList(arrPic) setImgList(arrPic)
@ -329,12 +328,8 @@ const ModalForm = ({ mode, record, refresh, setPrecessVisible }) => {
const handleFile = (arr = []) => { const handleFile = (arr = []) => {
const newArr = arr?.map(item => ({ const newArr = arr?.map(item => ({
name: item.fileName, name: item.fileName,
response: {
data: {
filePath: item.filePath, filePath: item.filePath,
fileId: item.fileId fileId: item.fileId
}
},
})) }))
return newArr return newArr
} }
@ -652,7 +647,7 @@ const ModalForm = ({ mode, record, refresh, setPrecessVisible }) => {
<Col span={12}> <Col span={12}>
<div className={mode == "view" ? 'file-item view-file' : 'file-item'} > <div className={mode == "view" ? 'file-item view-file' : 'file-item'} >
<div className='file-description'> <div className='file-description'>
<Image width={60} src={url + file.response?.data?.filePath} alt='' /> <Image width={60} src={url + file.filePath} alt='' />
<span>{file.name}</span> <span>{file.name}</span>
</div> </div>
</div> </div>
@ -680,7 +675,7 @@ const ModalForm = ({ mode, record, refresh, setPrecessVisible }) => {
<div className={mode == "view" ? 'file-item view-file' : 'file-item'} > <div className={mode == "view" ? 'file-item view-file' : 'file-item'} >
<div className='file-description'> <div className='file-description'>
<div <div
onClick={() => { setVideoOpen(true); setVideoParams(file) }} onClick={() => {setVideoOpen(true); setVideoParams(file) }}
style={{ cursor: 'pointer' }} style={{ cursor: 'pointer' }}
> >
<VideoCameraOutlined <VideoCameraOutlined

View File

@ -152,12 +152,8 @@ const ModalForm = ({ mode, record, onEdit, onSave, onSimilarSave,submit }) => {
const handleFile = (arr=[]) => { const handleFile = (arr=[]) => {
const newArr = arr?.map(item => ({ const newArr = arr?.map(item => ({
name: item.fileName, name: item.fileName,
response: {
data: {
filePath: item.filePath, filePath: item.filePath,
fileId:item.fileId fileId:item.fileId
}
},
})) }))
return newArr return newArr
} }

View File

@ -17,7 +17,7 @@ export default function Sksq() {
const getData = async (params) => { const getData = async (params) => {
const data = await reservoirlist(params) const data = await reservoirlist(params)
setTableData(data.filter(o=>o.stnm==='檀树岗' || o.stnm==='檀树岗(新)')); setTableData(data);
} }
useEffect(() => { useEffect(() => {
let option = { let option = {
@ -38,8 +38,8 @@ export default function Sksq() {
<span>站点 <span>站点
<NormalSelect <NormalSelect
allowClear={false} allowClear={false}
style={{ width: '150px' }} style={{ width: '250px' }}
options={tableData.map((item,index)=>({ label: item.stnm, value: index }))} options={tableData.map((item,index)=>({ label: item.stnm, value:index }))}
value={selected} value={selected}
onChange={(e) => setSelected(e)} onChange={(e) => setSelected(e)}
/> />