lishenfeng
/
ykzz-web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(): 系统管理模块开发

test
李神峰 2024-12-19 18:00:13 +08:00
parent 7a17832dbe
commit dc4c2b8d1b
10 changed files with 197 additions and 186 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

145
src/components/DashboardLayout/HeaderUser.tsx
View File

@ -1,14 +1,15 @@
import { RollbackOutlined, LogoutOutlined } from '@ant-design/icons';
import { Avatar, Menu, Typography, Modal, Form, Input, Button, message } from 'antd';
import {useDispatch, useSelector} from "react-redux";
import { useDispatch, useSelector } from "react-redux";
import { useNavigate } from "react-router";
import { LoginUser, removeLoginInfo } from "../../models/auth/_";
import { RootState } from "../../models/store";
import React, { useState } from "react";
import {divIcon} from "leaflet";
import { divIcon } from "leaflet";
import { httppost2 } from '../../utils/request';
import apiurl from '../../service/apiurl';
import CryptoJS from 'crypto-js';
import { createCrudService } from '../../components/crud/_';
const { SubMenu } = Menu;
@ -19,7 +20,7 @@ const HeaderUser: React.FC<{
const navigate = useNavigate();
const dispatch = useDispatch();
const [open,setOpen] = useState(false)
const [open, setOpen] = useState(false)
const logout = () => {
removeLoginInfo();
@ -31,93 +32,111 @@ const HeaderUser: React.FC<{
window.location.reload();
};
//AES加密
const encryptData = (data:any) => {
const encryptedData = CryptoJS.MD5(data).toString();
return encryptedData;
}
const onFinish = async(val:any)=>{
if(val.newSecretKey!==val.secondSecretKey){
message.error('确认密码错误')
return
}
const params = {
oldSecretKey:encryptData(val.oldSecretKey),
newSecretKey:encryptData(val.newSecretKey),
secondSecretKey:encryptData(val.secondSecretKey),
userId: localStorage.getItem('userId')
}
const res = await httppost2(apiurl.setPassword,params)
if(res.code===200){
message.success('修改成功')
setTimeout(() => {
logout()
}, 1500);
}else{
message.error(res.description)
}
//AES加密
const encryptData = (data: any) => {
const encryptedData = CryptoJS.MD5(data).toString();
return encryptedData;
}
const onFinish = async (val: any) => {
const path = `${apiurl.systemM.userM.updatePassword}?oldPassword=${val.oldPassword}&newPassword=${val.newPassword}`;
createCrudService(path).userEdit().then((result) => {
if (result?.code === 200) {
message.success('修改成功，即将重新登录')
setOpen(false)
setTimeout(() => {
logout()
}, 1500);
}
})
// if(val.newSecretKey!==val.secondSecretKey){
// message.error('确认密码错误')
// return
// }
// const params = {
// oldSecretKey:encryptData(val.oldSecretKey),
// newSecretKey:encryptData(val.newSecretKey),
// secondSecretKey:encryptData(val.secondSecretKey),
// userId: localStorage.getItem('userId')
// }
// const res = await httppost2(apiurl.setPassword,params)
// if(res.code===200){
// message.success('修改成功')
// setTimeout(() => {
// logout()
// }, 1500);
// }else{
// message.error(res.description)
// }
}
return (
<div className="clearFloat">
<div className="lf">
<Menu
mode="horizontal"
theme="dark"
style={{width:"130px", color:"#fff"}}
>
{/*icon={<Avatar><UserOutlined /></Avatar>}*/}
<SubMenu key="pm" icon={<div className="user topMenuIcon1"></div>} title={
<span style={{fontSize:"12px"}}>
{localStorage.getItem('userName')??'-'}
{/* 咸丰测试 */}
</span>} >
<Menu.Item key="logout2" onClick={()=>setOpen(true)} className="userBox">修改密码</Menu.Item>
<Menu.Item icon={<LogoutOutlined />} key="logout" onClick={logout} className="userBox2">登出</Menu.Item>
</SubMenu>
</Menu>
</div>
<div className="lf">
<Menu
mode="horizontal"
theme="dark"
style={{ width: "130px", color: "#fff" }}
>
{/*icon={<Avatar><UserOutlined /></Avatar>}*/}
<SubMenu key="pm" icon={<div className="user topMenuIcon1"></div>} title={
<span style={{ fontSize: "12px" }}>
{localStorage.getItem('userName') ?? '-'}
{/* 咸丰测试 */}
</span>} >
<Menu.Item key="logout2" onClick={() => setOpen(true)} className="userBox">修改密码</Menu.Item>
<Menu.Item icon={<LogoutOutlined />} key="logout" onClick={logout} className="userBox2">登出</Menu.Item>
</SubMenu>
</Menu>
</div>
{
localStorage.getItem('getInfoAdcd') === "420000000000000"?
<div className="lf" style={{width:"30px", height:"30px", lineHeight:"32px", background:"#fff", borderRadius:"50%", textAlign:"center", marginTop:"17px"}}>
<a href="http://223.75.53.141:8000/home" target="_self" style={{color:"#4677FF"}}>
<RollbackOutlined style={{fontSize:"18px"}}/>
localStorage.getItem('getInfoAdcd') === "420000000000000" ?
<div className="lf" style={{ width: "30px", height: "30px", lineHeight: "32px", background: "#fff", borderRadius: "50%", textAlign: "center", marginTop: "17px" }}>
<a href="http://223.75.53.141:8000/home" target="_self" style={{ color: "#4677FF" }}>
<RollbackOutlined style={{ fontSize: "18px" }} />
</a>
</div>:null
</div> : null
}
<Modal title="修改密码" open={open} onOk={()=>setOpen(false)} onCancel={()=>setOpen(false)} footer={null}>
<Modal
title="修改密码"
open={open}
onOk={() => setOpen(false)}
onCancel={() => setOpen(false)}
footer={null}
destroyOnClose
>
<Form
name="basic"
labelCol={{span: 5}}
wrapperCol={{span: 18}}
initialValues={{remember: true}}
labelCol={{ span: 5 }}
wrapperCol={{ span: 18 }}
initialValues={{ remember: true }}
onFinish={onFinish}
autoComplete="off"
>
<Form.Item
label="原密码"
name="oldSecretKey"
rules={[{required: true}]}>
name="oldPassword"
rules={[{ required: true }]}>
<Input.Password />
</Form.Item>
<Form.Item
label="新密码"
name="newSecretKey"
rules={[{required: true}]}>
name="newPassword"
rules={[{ required: true }]}>
<Input.Password />
</Form.Item>
<Form.Item
{/* <Form.Item
label="确认密码"
name="secondSecretKey"
rules={[{required: true}]}>
<Input.Password />
</Form.Item>
</Form.Item> */}
<Form.Item
wrapperCol={{

17
src/service/apiurl.js
View File

@ -96,6 +96,10 @@ const apiurl = {
list: service_ykz + '/projectBasicInfo/list',
edit: service_ykz + '/projectBasicInfo/update',
export:service_ykz + '/projectBasicInfo/export'
},
czrz: {
page: service_ykz + '/gatePoreOpLog/page',
export:service_ykz + '/gatePoreOpLog/export'
}
},
systemM: {
@ -105,20 +109,13 @@ const apiurl = {
list: service_ykz + "/system/role/list",
update: service_ykz + "/system/user/profile/updatePwd",
profile: service_ykz + "/system/user/profile",
avatar:service_ykz + "/common/download/resource"
avatar: service_ykz + "/common/download/resource",
change: service_ykz + '/system/user/changeStatus',
updatePassword:service_ykz + '/system/user/profile/updatePwd'
},
menuM: {
page: service_ykz + "/system/menu/list",
menu:service_ykz + "/system/menu"
},
log: {
page: service_ykz + "/monitor/operlog/list"
},
action: {
todayData: service_fxdd + "/userLoginLog/todayCount",
activeCount: service_fxdd + "/userLoginLog/userCount",
userCount: service_fxdd + "/userLoginLog/visitCount",
hotData:service_fxdd + "/visitMenuLog/count"
}
},
//系统管理

25
src/views/Gcyx/InformationSearch/OperateLog/index.js
View File

@ -8,37 +8,32 @@ import { httppost5 } from '../../../../utils/request';
import { exportFile } from '../../../../utils/tools.js';
const url = "http://223.75.53.141:9102/test.by-lyf.tmp"
const Page = () => {
const types = {
0: "设备维修",
1: '设备更换',
2:"结构加固"
}
const [searchVal, setSearchVal] = useState(false)
const columns = [
{ title: '序号', key: 'inx', dataIndex: 'inx', width: 60, align:"center" },
{ title: '闸孔编号', key: 'name', dataIndex: 'name', width: 150, ellipsis: true },
{ title: '操作人员', key: 'adress', dataIndex: 'adress', width: 200, ellipsis: true },
{ title: '闸孔编号', key: 'gatePoreCode', dataIndex: 'gatePoreCode', width: 150, ellipsis: true },
{ title: '操作人员', key: 'createUserName', dataIndex: 'createUserName', width: 200, ellipsis: true },
{
title: '操作时间', key: 'eventsDate', dataIndex: 'eventsDate', width: 140,
title: '操作时间', key: 'createTime', dataIndex: 'createTime', width: 140,
},
{
title: '操作内容', key: 'eventsDate', dataIndex: 'eventsDate', width: 140,
title: '操作内容', key: 'opContent', dataIndex: 'opContent', width: 140,
},
{ title: '设定开度(m)', key: 'type', dataIndex: 'type', width: 140},
{ title: '操作前开度(m)', key: 'type', dataIndex: 'type', width: 140},
{ title: 'ip', key: 'type', dataIndex: 'type', width: 140},
{ title: '设定开度(m)', key: 'setValue', dataIndex: 'setValue', width: 140},
{ title: '操作前开度(m)', key: 'beforeValue', dataIndex: 'beforeValue', width: 140},
{ title: 'ip', key: 'ipAddr', dataIndex: 'ipAddr', width: 140},
];
const width = useMemo(() => columns.reduce((total, cur) => total + (cur.width), 0), [columns]);
const { tableProps, search, refresh } = usePageTable(createCrudService(apiurl.sbwh.whfabz.page).find_noCode);
const { tableProps, search, refresh } = usePageTable(createCrudService(apiurl.gcyx.czrz.page).find_noCode);
const exportExcel = () => {
let params = {
...searchVal,
}
httppost5(apiurl.pxjh.export, params).then(res => {
exportFile(`统计报表.xlsx`,res.data)
httppost5(apiurl.gcyx.czrz.export, params).then(res => {
exportFile(`操作日志.xlsx`,res.data)
})
}
useEffect(() => {

22
src/views/Gcyx/InformationSearch/OperateLog/toolbar.js
View File

@ -6,23 +6,23 @@ import moment from 'moment';
const { RangePicker } = DatePicker;
const ToolBar = ({ setSearchVal, onSave, storeData, exportFile1 }) => {
const types = Array(10).fill(0).map((item,i) => ({
label: `${i + 1}#闸孔`,
value: i + 1
}))
// const types = Array(10).fill(0).map((item,i) => ({
// label: `${i + 1}#闸孔`,
// value: i + 1
// }))
const [form] = Form.useForm();
const onFinish = (values) => {
let dateSo;
let dateTimeRangeSo;
if (values.tm) {
dateSo = {
dateTimeRangeSo = {
start: moment(values.tm[0]).format('YYYY-MM-DD HH:mm:ss'),
end: moment(values.tm[1]).format('YYYY-MM-DD HH:mm:ss')
}
}
delete values.tm
setSearchVal({...values, dateSo});
setSearchVal({...values, dateTimeRangeSo});
}
@ -30,10 +30,12 @@ const ToolBar = ({ setSearchVal, onSave, storeData, exportFile1 }) => {
<>
<div style={{display:'flex',justifyContent:'space-between'}}>
<Form form={form} className='toolbarBox' layout="inline" onFinish={onFinish}>
<Form.Item label="闸孔编号" name="type">
<NormalSelect allowClear style={{ width: '150px' }} options={types} />
<Form.Item label="闸孔编号" name="gatePoreCode">
{/* <NormalSelect allowClear style={{ width: '150px' }} options={types} /> */}
<Input allowClear style={{width:'150px'}}/>
</Form.Item>
<Form.Item label="操作人员" name="name">
<Form.Item label="操作人员" name="createUserName">
<Input allowClear style={{width:'150px'}}/>
</Form.Item>
<Form.Item label="操作时间" name="tm">

2
src/views/Sbwh/Spbjgl/AdcdTreeSelector/index.tsx
View File

@ -217,7 +217,7 @@ const AdcdTreeSelector: React.FC<IProps> = ({ onSelectFun, setAdcd, showCheckbox
textAlign: 'center',
fontWeight:700
}}
// onClick={saveJd}
onClick={saveJd}
>备品备件分类</div>
{
loading ?

3
src/views/Sbwh/Ssgcjl/index.js
View File

@ -13,7 +13,8 @@ const Page = () => {
const refModal = useRef();
const [searchVal, setSearchVal] = useState(false)
const columns = [
{ title: '序号', key: 'inx', dataIndex: 'inx', width: 60, align:"center" },
{ title: '序号', key: 'inx', dataIndex: 'inx', width: 60, align: "center" },
{ title: '项目名称', key: 'projectName', dataIndex: 'projectName', width: 150, ellipsis: true },
{ title: '方案名称', key: 'planName', dataIndex: 'planName', width: 150, ellipsis: true },
{ title: '过程名称', key: 'processName', dataIndex: 'processName', width: 200, ellipsis: true },
{ title: '记录人', key: 'createUserName', dataIndex: 'createUserName', width: 140,},

97
src/views/SystemMangant/UserInfo1/form.js
View File

@ -11,7 +11,7 @@ import NormalSelect from '../../../components/Form/NormalSelect';
const { Dragger } = Upload;
const url = "http://223.75.53.141:9102/test.by-lyf.tmp"
const ModalForm = ({ mode, record, onEdit, onSave }) => {
const ModalForm = ({ mode, record, onUerEdit, onSave }) => {
if (record.prodDate) {
record.myTm = moment(record.prodDate)
}
@ -19,7 +19,6 @@ const ModalForm = ({ mode, record, onEdit, onSave }) => {
const [form] = Form.useForm();
const [fileList, setFileList] = useState([]) //上传文件列表
const [fileIds, setFileIds] = useState('')
const [flag, setFlag] = useState(true)
const [loading, setLoading] = useState(false)
const [userParams, setUserParams] = useState({})
const [roleOptions, setRoleOptions] = useState([])
@ -43,7 +42,6 @@ const ModalForm = ({ mode, record, onEdit, onSave }) => {
setFileIds(info.file?.response?.imgUrl)
setFileList(info.fileList)
setFlag(false)
getImgFlow(info.file?.response?.imgUrl)
}
@ -70,34 +68,13 @@ const ModalForm = ({ mode, record, onEdit, onSave }) => {
let values = form.getFieldsValue()
values.avatar = fileIds;
if (mode === 'edit') {
onEdit(apiurl.systemM.userM.save, { ...userParams, ...values })
onUerEdit(apiurl.systemM.userM.save, { ...userParams, ...values,password:'' })
}
if (mode === 'save') {
onSave(apiurl.systemM.userM.save, values)
}
}
/**
* @description 获取查看时文件
* @param {*} type
* @returns
*/
const getFileInfo = async (params) => {
try {
const res = xyt_httpget2(apiurl.systemM.userM.profile)
setImageSrc(res.data?.avatar)
// return {
// name: item.data.fileName,
// response: {
// data: {
// filePath: item.data.filePath,
// fileId:item.data.fileId
// }
// },
// }
} catch (error) {
console.log(error);
}
}
// 获取用户头像
@ -118,7 +95,6 @@ const ModalForm = ({ mode, record, onEdit, onSave }) => {
useEffect(() => {
console.log(record);
if (mode != "save") {
// getFileInfo()
getImgFlow(record.avatar)
}
}, [record, mode])
@ -130,10 +106,9 @@ const ModalForm = ({ mode, record, onEdit, onSave }) => {
}, [record])
useEffect(() => {
if (mode != 'save') {
form.setFieldValue("password", localStorage.getItem("password") || "")
} else {
form.setFieldValue('sex','0')
if (mode == 'save') {
form.setFieldValue('sex', '0')
form.setFieldValue('status', '0')
}
getroleList()
}, [])
@ -147,8 +122,9 @@ const ModalForm = ({ mode, record, onEdit, onSave }) => {
<Form.Item
label="用户账号"
name="userName"
rules={[{ required: true }]}
>
<Input disabled={mode === 'view'} style={{ width: '100%' }} allowClear />
<Input disabled={mode != 'save'} style={{ width: '100%' }} allowClear />
</Form.Item>
</Col>
<Col span={12}>
@ -160,9 +136,10 @@ const ModalForm = ({ mode, record, onEdit, onSave }) => {
<Input disabled={mode === 'view'} style={{ width: '100%' }} allowClear />
</Form.Item>
</Col>
</Row>
<Row>
<Col span={12}>
{
mode == 'save' &&
<Col span={12}>
<Form.Item
label="登录密码"
name="password"
@ -171,6 +148,8 @@ const ModalForm = ({ mode, record, onEdit, onSave }) => {
<Input.Password disabled={mode === 'view'} style={{ width: '100%' }} allowClear />
</Form.Item>
</Col>
}
<Col span={12}>
<Form.Item
label="手机号码"
@ -180,8 +159,7 @@ const ModalForm = ({ mode, record, onEdit, onSave }) => {
<Input disabled={mode === 'view'} style={{ width: '100%' }} allowClear />
</Form.Item>
</Col>
</Row>
<Row>
<Col span={12}>
<Form.Item
label="性别"
@ -201,26 +179,12 @@ const ModalForm = ({ mode, record, onEdit, onSave }) => {
<Input disabled={mode === 'view'} style={{ width: '100%' }} allowClear />
</Form.Item>
</Col>
</Row>
<Row>
<Col span={24}>
<Form.Item
label="部门分配"
name="deptId"
labelCol={{ span: 3 }}
wrapperCol={{ span: 19 }}
>
<DeptTreeSelect disabled={mode === 'view'}/>
</Form.Item>
</Col>
</Row>
<Row>
<Col span={24}>
<Col span={12}>
<Form.Item
label="角色分配"
name="roleIds"
labelCol={{ span: 3 }}
wrapperCol={{ span: 19 }}
rules={[{ required: true }]}
>
<NormalSelect
disabled={mode === 'view'}
@ -232,7 +196,32 @@ const ModalForm = ({ mode, record, onEdit, onSave }) => {
/>
</Form.Item>
</Col>
<Col span={12}>
<Form.Item
label="状态"
name="status"
rules={[{ required: true }]}
>
<Radio.Group>
<Radio value={"0"}>启用</Radio>
<Radio value={"1"}>禁用</Radio>
</Radio.Group>
</Form.Item>
</Col>
<Col span={24}>
<Form.Item
label="部门分配"
name="deptId"
labelCol={{ span: 3 }}
wrapperCol={{ span: 19 }}
rules={[{ required: true }]}
>
<DeptTreeSelect disabled={mode === 'view'} />
</Form.Item>
</Col>
</Row>
</Form>
</div>
<div style={{

46
src/views/SystemMangant/UserInfo1/index.js
View File

@ -1,24 +1,19 @@
import React, { Fragment, useRef, useMemo, useEffect, useState } from 'react';
import BasicCrudModal from '../../../components/crud/BasicCrudModal';
import { Table, Card, Dropdown, Space, Divider, Form, Row, Col, Input, Button, Modal, Popconfirm, message } from 'antd';
import { DownOutlined } from "@ant-design/icons"
import { Table, Card, Modal, Space, Divider, Form, Row, Col, Input, Button, Switch, Popconfirm, message } from 'antd';
import { ExclamationCircleOutlined } from "@ant-design/icons"
import ToolBar from './toolbar';
import ModalForm from './form';
import apiurl from '../../../service/apiurl';
import usePageTable from '../../../components/crud/usePageTable2';
import { createCrudService } from '../../../components/crud/_';
import { formItemLayout, btnItemLayout } from '../../../components/crud/FormLayoutProps';
import moment from 'moment';
import { xyt_httpput1 } from '../../../utils/request';
const { confirm } = Modal;
const Page = () => {
const [form] = Form.useForm();
const refModal = useRef();
const [searchVal, setSearchVal] = useState({})
const [selectedRowKeys, setselectedRowKeys] = useState([])
const [dropItem, setDropItem] = useState({})
const [passwordOpen, setPasswordOpen] = useState(false)
const [dashOpen, setDashOpen] = useState(false)
const columns = [
{ title: '用户帐号', key: 'userName', dataIndex: 'userName', width: 150, align: "center" },
@ -30,7 +25,15 @@ const Page = () => {
title: '部门', key: 'departmentName', dataIndex: 'departmentName', width: 150, align: "center",
render: (v, r) => <span>{r?.dept?.deptName}</span>
},
{ title: '状态', key: 'status', dataIndex: 'status', width: 100, align: "center", render: (v) => <span>{!v ? "正常" : "异常"}</span> },
{
title: '状态', key: 'status', dataIndex: 'status', width: 100, align: "center",
render: (v, r) => <Switch
checkedChildren="启用"
unCheckedChildren="禁用"
checked={v == 0 ? true : false} onChange={(e) => {
onEdit(apiurl.systemM.userM.change, {userId:r.userId,status: e ? "0" : "1",userName:r.userName })
}} />
},
{
title: '创建日期', key: 'createTime', dataIndex: 'createTime', width: 150, align: "center",
},
@ -48,6 +51,31 @@ const Page = () => {
},
];
const width = useMemo(() => columns.reduce((total, cur) => total + (cur.width), 0), [columns]);
const onEdit = (path, values) => {
const statusText = values.status == "0" ? "启用" : '停用';
const userName = values.userName;
confirm({
title: '系统提示',
icon: <ExclamationCircleOutlined />,
content: `确认要${statusText}${userName}用户吗？`,
okText: '确定',
okType: 'primary',
cancelText: '取消',
onOk: () => {
createCrudService(path).userEdit(values).then((result) => {
if (result?.code === 200) {
message.success('操作成功')
refresh()
}
})
},
onCancel() {
console.log('Cancel');
},
});
}
const command = (type) => (params) => {
if (type === 'save') {
refModal.current.showSave();

19
src/views/SystemMangant/menuM/index.js
View File

@ -19,19 +19,9 @@ const Page = () => {
const [allOpen, setAllOpen] = useState(false)
const columns = [
{ title: '序号', key: 'inx', dataIndex: 'inx', width: 60, align: "center", render: (v, r, i) => <span>{i + 1}</span>},
// { title: '类型', key: 'type', dataIndex: 'type', width: 100, align:"center" },
{ title: '名称', key: 'menuName', dataIndex: 'menuName', width: 150, align:"center" },
{ title: '地址', key: 'path', dataIndex: 'path', width: 230,align:"center" },
{ title: '排序号', key: 'orderNum', dataIndex: 'orderNum', width: 80,align:"center" },
{
title: '状态', key: 'status', dataIndex: 'status', width: 100, align: "center",
render: (v, r) => <Switch
checkedChildren="启用"
unCheckedChildren="禁用"
checked={v == 0 ? true : false} onChange={(e) => {
onEdit(apiurl.systemM.menuM.menu,{...r, status:e ? 0 : 1})
}} />
},
{
title: '数据更新时间', key: 'createTime', dataIndex: 'createTime', width: 150,align:"center",
},
@ -52,15 +42,6 @@ const Page = () => {
refModal.current.onUerDeleteGet(`${apiurl.systemM.menuM.menu}/${params.menuId}`);
}
}
const onEdit = (path,values) => {
createCrudService(path).edit(values).then((result) => {
if (result?.code === 200) {
getData()
}
})
}
const convertToTree = (flatData, parentId = null) => {
const result = [];
const map = {};

7
src/views/WatchData/Jcsj/index.js
View File

@ -88,7 +88,6 @@ const Page = () => {
search(params)
}, [searchVal])
return (
<>
<div className='content-root clearFloat xybm' style={{ paddingBottom: "0" }}>
@ -116,11 +115,11 @@ const Page = () => {
exportFile1={exportExcel}
/>
</Card>
<div className="ant-card-body" style={{ padding: "20px 0 0 0", display: 'flex', columnGap: 10,overflow:'hidden' }}>
<div style={{ width: 800 }}>
<div className="ant-card-body" style={{ width:"100%", padding: "20px 0 0 0", display: 'flex', columnGap: 10,overflow:'hidden' }}>
<div style={{ width: '45%' }}>
<Table columns={columns} rowKey="inx" {...tableProps} scroll={{ x: width, y: "calc( 100vh - 400px )" }} />
</div>
<div style={{ width: 750,height:570 }} >
<div style={{ width: '55%',height:570}} >
<ReactEcharts
option={pxOptions || {}}
style={{ width: "100%", height: '100%' }}