feat(): 测站到报率表格与树形联动
parent
f4e9d6bf65
commit
f4efacf553
|
|
@ -1,4 +1,12 @@
|
|||
export default function dblOption(sellist,selday) {
|
||||
export default function dblOption(sellist, selday) {
|
||||
const copySellist = JSON.parse(JSON.stringify(sellist));
|
||||
copySellist.sort(function (o1, o2) {
|
||||
if (o1[selday]?.rate > o2[selday]?.rate) {
|
||||
return 1;
|
||||
} else {
|
||||
return -1;
|
||||
}
|
||||
});
|
||||
let itemStyle = {
|
||||
normal: {
|
||||
label: {
|
||||
|
|
@ -18,8 +26,8 @@ export default function dblOption(sellist,selday) {
|
|||
};
|
||||
|
||||
const yAxisData = [];
|
||||
for (let si = 0; si < sellist.length; si++) {
|
||||
let obj = sellist[si];
|
||||
for (let si = 0; si < copySellist.length; si++) {
|
||||
let obj = copySellist[si];
|
||||
yAxisData.push(obj.adnm);
|
||||
serdata.data.push(parseFloat((obj[selday]?.rate * 100).toFixed(2)));
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10,6 +10,7 @@ import ReactEcharts from 'echarts-for-react';
|
|||
import qsOption from './qsOption.js'
|
||||
import dblOption from './dblOption.js'
|
||||
import moment from 'moment';
|
||||
import './index.less'
|
||||
export default function Czrz() {
|
||||
const [newColumns, setNewColumns] = useState([])
|
||||
const [tableList, setTableList] = useState([])
|
||||
|
|
@ -339,6 +340,7 @@ export default function Czrz() {
|
|||
}))
|
||||
setNewColumns([...columns, ...dayarrColumns])
|
||||
console.log("hbobj", newhbobj);
|
||||
console.log("adlist", adlist);
|
||||
setHbobj(newhbobj);
|
||||
setAdcdList(adlist);
|
||||
filterdata(adlist, newhbobj)
|
||||
|
|
@ -442,7 +444,27 @@ export default function Czrz() {
|
|||
}
|
||||
}
|
||||
const onSelect = (keys, arr) => {
|
||||
console.log(keys, arr);
|
||||
console.log('adcdList', adcdList, keys);
|
||||
if (keys.length > 0) {
|
||||
const adcd = keys[0];
|
||||
if (adcd.slice(2) == '0000000000000') {
|
||||
filterdata(adcdList,hbobj)
|
||||
} else if (adcd.slice(4) == '00000000000') {
|
||||
const filterData = adcdList.filter(item => {
|
||||
return item.adcd.substring(0,4) == adcd.substring(0,4);
|
||||
});
|
||||
setTableList(filterData)
|
||||
}else if (adcd.slice(6) == '000000000'|| adcd =="420381450000000") {
|
||||
const filterData = adcdList.find(item => {
|
||||
if (adcd == "420381450000000") {
|
||||
return item.adcd.substring(0,7) == adcd.substring(0,7)
|
||||
} else {
|
||||
return item.adcd.substring(0,6) == adcd.substring(0,6)
|
||||
}
|
||||
});
|
||||
setTableList([filterData])
|
||||
}
|
||||
}
|
||||
setSelectedKeys(keys)
|
||||
setAdcd(keys[0])
|
||||
}
|
||||
|
|
@ -476,19 +498,31 @@ export default function Czrz() {
|
|||
}
|
||||
}
|
||||
sellist.sort(function (o1, o2) {
|
||||
if (o1[selday]?.rate > o2[selday]?.rate) {
|
||||
if (o1[selday]?.rate < o2[selday]?.rate) {
|
||||
return 1;
|
||||
} else {
|
||||
return -1;
|
||||
}
|
||||
});
|
||||
|
||||
console.log("sellist", sellist);
|
||||
|
||||
setSubTableData(sellist)
|
||||
}
|
||||
// 下载测站离线表
|
||||
const download = () => {
|
||||
httpGetFile(apiurl.ptjs.export + '?' + `tm=${SearchBottom.operTime}`).then((res) => {
|
||||
let substrData = '42'
|
||||
const substrAdcd2 = adcd.substring(0, 2);
|
||||
const substrAdcd4 = adcd.substring(0, 4);
|
||||
const substrAdcd6 = adcd.substring(0, 6);
|
||||
if (adcd.slice(2) == '0000000000000') {
|
||||
substrData = substrAdcd2;
|
||||
} else if (adcd.slice(4) == '00000000000') {
|
||||
substrData = substrAdcd4;
|
||||
} else if (adcd.slice(6) == '000000000') {
|
||||
substrData = substrAdcd6;
|
||||
}
|
||||
httpGetFile(apiurl.ptjs.export + '?' + `tm=${SearchBottom.operTime}` + `&adcd=${substrData}`).then((res) => {
|
||||
if (res) {
|
||||
exportFile('测站离线表.xlsx', res.data)
|
||||
}
|
||||
|
|
@ -573,7 +607,8 @@ export default function Czrz() {
|
|||
columns={newColumns}
|
||||
dataSource={tableList}
|
||||
pagination={false}
|
||||
scroll={{ x: width, y: "calc( 100vh - 500px )" }}
|
||||
rowClassName={(r,i) => tableList.length == 1 ? 'onlyOne':''}
|
||||
scroll={{ x: width, y: "calc( 100vh - 450px )" }}
|
||||
rowKey="inx"
|
||||
/>
|
||||
</>
|
||||
|
|
@ -609,7 +644,7 @@ export default function Czrz() {
|
|||
columns={detailsColumns}
|
||||
dataSource={subTableData}
|
||||
pagination={false}
|
||||
scroll={{ x: 1200, y: "calc( 100vh - 600px )" }}
|
||||
scroll={{ x: 1200, y: "calc( 100vh - 500px )" }}
|
||||
rowKey="inx"
|
||||
/>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,3 @@
|
|||
.onlyOne{
|
||||
height: 110px;
|
||||
}
|
||||
|
|
@ -19,8 +19,8 @@ const ToolBar = ({ setToolVal }) => {
|
|||
|
||||
useEffect(() => {
|
||||
const defaultValue = [
|
||||
dayjs().subtract(10, 'days'),
|
||||
dayjs().subtract(1,'days')
|
||||
dayjs().subtract(7, 'days'),
|
||||
dayjs()
|
||||
]
|
||||
form.setFieldsValue({ operTime: defaultValue })
|
||||
setToolVal({stm:defaultValue[0].format('YYYY-MM-DD'), etm:defaultValue[1].format('YYYY-MM-DD')})
|
||||
|
|
|
|||
|
|
@ -67,21 +67,21 @@ export default function Lssj() {
|
|||
align: "center",
|
||||
},
|
||||
{
|
||||
title: '总内存(MB)',
|
||||
title: '总内存',
|
||||
dataIndex: 'totalSpace',
|
||||
key: 'totalSpace',
|
||||
width: 120,
|
||||
align: "center",
|
||||
},
|
||||
{
|
||||
title: '已用内存(MB)',
|
||||
title: '已用内存',
|
||||
dataIndex: 'usedSpace',
|
||||
key: 'usedSpace',
|
||||
width: 120,
|
||||
align: "center",
|
||||
},
|
||||
{
|
||||
title: '可用内存(MB)',
|
||||
title: '可用内存',
|
||||
dataIndex: 'freeSpace',
|
||||
key: 'freeSpace',
|
||||
width: 120,
|
||||
|
|
@ -118,21 +118,21 @@ export default function Lssj() {
|
|||
align: "center",
|
||||
},
|
||||
{
|
||||
title: '总磁盘量(GB)',
|
||||
title: '总磁盘量',
|
||||
dataIndex: 'totalSpace',
|
||||
key: 'totalSpace',
|
||||
width: 120,
|
||||
align: "center",
|
||||
},
|
||||
{
|
||||
title: '已用磁盘量(GB)',
|
||||
title: '已用磁盘量',
|
||||
dataIndex: 'usedSpace',
|
||||
key: 'usedSpace',
|
||||
width: 120,
|
||||
align: "center",
|
||||
},
|
||||
{
|
||||
title: '可用磁盘量(GB)',
|
||||
title: '可用磁盘量',
|
||||
dataIndex: 'freeSpace',
|
||||
key: 'freeSpace',
|
||||
width: 120,
|
||||
|
|
@ -205,7 +205,7 @@ export default function Lssj() {
|
|||
const res = await httppost(url,params)
|
||||
if (res.code == 200) {
|
||||
const result = res.data.map(item => ({...item,tm:moment(item.tm).format('HH:mm:ss')}))
|
||||
setOptionsData(result)
|
||||
setOptionsData(res.data)
|
||||
}
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
|
|
@ -243,7 +243,7 @@ export default function Lssj() {
|
|||
/>
|
||||
{optionsData.length > 0 && tableProps.dataSource.length > 0 ?
|
||||
<>
|
||||
<div style={{ width: '100%', height: 440, border: '1px solid #dfdfdf', marginTop: 15,position:'relative' }}>
|
||||
<div style={{ width: '100%', height: 440, border: '1px solid #dfdfdf', marginTop: 15,position:'relative',marginBottom:15 }}>
|
||||
<ReactEcharts option={options} style={{ width: "100%", height: '100%' }} notMerge={true} />
|
||||
{searchVal.type == 2 && <div style={{ position: 'absolute', top: 10, right: 10 }}>
|
||||
<NormalSelect
|
||||
|
|
@ -257,7 +257,7 @@ export default function Lssj() {
|
|||
<Table
|
||||
columns={newColumns}
|
||||
{...tableProps}
|
||||
scroll={{ x: 1000, y: "calc( 100vh - 500px )" }}
|
||||
scroll={{ x: 1000, y: "calc( 100vh - 770px )" }}
|
||||
rowKey="inx"
|
||||
/>
|
||||
</> :
|
||||
|
|
|
|||
|
|
@ -2,8 +2,8 @@
|
|||
import { color } from "echarts";
|
||||
import moment from "moment"
|
||||
export default function qsOption(data=[],type=0) {
|
||||
const minY = Math.ceil(Math.min(...data?.map(item => item.rate)));
|
||||
const maxY = Math.floor(Math.max(...data?.map(item => item.rate)));
|
||||
const minY = Math.floor(Math.min(...data?.map(item => item.rate)));
|
||||
const maxY = Math.ceil(Math.max(...data?.map(item => item.rate)));
|
||||
const name = type == 0 ? 'CPU使用率' :
|
||||
type == 1 ? '内存使用率' :
|
||||
type == 2 ? '存储使用率' : 'CPU使用率'
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@ const ToolBar = ({ setToolVal }) => {
|
|||
const Stypes = [
|
||||
{ label: 'CPU', value: 0 },
|
||||
{ label: '内存', value: 1 },
|
||||
{ label: '存储', value: 2 },
|
||||
// { label: '存储', value: 2 },
|
||||
];
|
||||
const [form] = Form.useForm();
|
||||
|
||||
|
|
@ -70,7 +70,8 @@ const ToolBar = ({ setToolVal }) => {
|
|||
return (
|
||||
<div className='pageToolBar' style={{position:'relative'}}>
|
||||
<Form form={form} onFinish={onFinish} size='Default' layout="inline" style={{columnGap:25}} onValuesChange={onValuesChange}>
|
||||
<Form.Item label="监测时间" name="tm">
|
||||
<Form.Item label="监测时间" name="tm" style={{position:'relative'}}>
|
||||
|
||||
<RangePicker
|
||||
placeholder={['开始日期', '结束日期']}
|
||||
format='YYYY-MM-DD HH:mm:ss'
|
||||
|
|
@ -88,8 +89,8 @@ const ToolBar = ({ setToolVal }) => {
|
|||
<Button size='Default' onClick={() => form.resetFields()}>重置</Button>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
<div style={{display:'flex',justifyContent:'end',position:'absolute',left:"25.5%",
|
||||
top:"7%"}}
|
||||
<div style={{display:'flex',justifyContent:'end',position:'absolute',left:"26.5rem",
|
||||
top:"0.3rem"}}
|
||||
onClick={()=>{
|
||||
setShowIcon(!showIcon)
|
||||
}}
|
||||
|
|
|
|||
|
|
@ -26,22 +26,22 @@ export default function Cpu({data}) {
|
|||
<Descriptions.Item label="CPU是否支持64位架构" span={1}>
|
||||
{data?.cpu64bit ? '是':'否'}
|
||||
</Descriptions.Item>
|
||||
<Descriptions.Item label="CPU的标称频率" span={1}>
|
||||
{/* <Descriptions.Item label="CPU的标称频率" span={1}>
|
||||
{data?.cpuVendorFreq}
|
||||
</Descriptions.Item>
|
||||
<Descriptions.Item label="逻辑处理器（线程）的数量" span={1}>
|
||||
</Descriptions.Item> */}
|
||||
<Descriptions.Item label="逻辑处理器（线程）的数量（个）" span={1}>
|
||||
{data?.logicalProcessorCount}
|
||||
</Descriptions.Item>
|
||||
<Descriptions.Item label="物理处理器的数量" span={1}>
|
||||
<Descriptions.Item label="物理处理器的数量（个）" span={1}>
|
||||
{data?.physicalProcessorCount}
|
||||
</Descriptions.Item>
|
||||
<Descriptions.Item label="CPU使用率（%）" span={1}>
|
||||
{(data?.systemCpuLoad * 100).toFixed(2)}
|
||||
</Descriptions.Item>
|
||||
<Descriptions.Item label="CPU的最大频率" span={1}>
|
||||
<Descriptions.Item label="CPU的最大频率（HZ）" span={1}>
|
||||
{data?.maxFreq}
|
||||
</Descriptions.Item>
|
||||
<Descriptions.Item label="CPU缓存的总大小" span={1}>
|
||||
<Descriptions.Item label="CPU缓存的总大小（byte）" span={1}>
|
||||
{data?.cacheSize}
|
||||
</Descriptions.Item>
|
||||
</Descriptions>
|
||||
|
|
|
|||
|
|
@ -2,29 +2,45 @@ import React from 'react'
|
|||
import { Descriptions } from 'antd'
|
||||
import './index.less'
|
||||
export default function Memory({ data }) {
|
||||
|
||||
// 工具函数：格式化字节大小
|
||||
const formatBytes = (bytes, decimals = 2) => {
|
||||
if (bytes === 0) return '0 Bytes';
|
||||
|
||||
const k = 1024; // 1 KB = 1024 Bytes
|
||||
const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
|
||||
const i = Math.floor(Math.log(bytes) / Math.log(k)); // 计算单位索引
|
||||
|
||||
// 格式化数值并保留指定小数位数
|
||||
return `${parseFloat((bytes / Math.pow(k, i)).toFixed(decimals))} ${sizes[i]}`;
|
||||
};
|
||||
return (
|
||||
<div>
|
||||
<Descriptions title='内存信息' layout='horizontal' bordered column={2}>
|
||||
<Descriptions.Item label="总交换空间大小（byte）" span={1}>
|
||||
{data?.virtualMemory?.swapTotal}
|
||||
<Descriptions.Item label="总内存" span={1}>
|
||||
{formatBytes(data?.total)}
|
||||
</Descriptions.Item>
|
||||
<Descriptions.Item label="已使用的交换空间大小（byte）" span={1}>
|
||||
{data?.virtualMemory?.swapUsed}
|
||||
<Descriptions.Item label="空闲内存" span={1}>
|
||||
{formatBytes(data?.available)}
|
||||
</Descriptions.Item>
|
||||
<Descriptions.Item label="总交换空间大小" span={1}>
|
||||
{formatBytes(data?.virtualMemory?.swapTotal)}
|
||||
</Descriptions.Item>
|
||||
<Descriptions.Item label="已使用的交换空间大小" span={1}>
|
||||
{formatBytes(data?.virtualMemory?.swapUsed)}
|
||||
</Descriptions.Item>
|
||||
<Descriptions.Item label="从交换空间换入的页数" span={1}>
|
||||
{data?.virtualMemory?.swapPagesIn}
|
||||
{data?.virtualMemory?.swapPagesIn}
|
||||
</Descriptions.Item>
|
||||
<Descriptions.Item label="换出到交换空间的页数" span={1}>
|
||||
{data?.virtualMemory?.swapPagesOut}
|
||||
{data?.virtualMemory?.swapPagesOut}
|
||||
</Descriptions.Item>
|
||||
<Descriptions.Item label="虚拟内存的最大容量（byte）" span={1}>
|
||||
{data?.virtualMemory?.virtualMax}
|
||||
<Descriptions.Item label="虚拟内存的最大容量" span={1}>
|
||||
{formatBytes(data?.virtualMemory?.virtualMax)}
|
||||
</Descriptions.Item>
|
||||
<Descriptions.Item label="当前使用的虚拟内存大小（byte）" span={1}>
|
||||
{data?.virtualMemory?.virtualInUse}
|
||||
<Descriptions.Item label="当前使用的虚拟内存大小" span={1}>
|
||||
{formatBytes(data?.virtualMemory?.virtualInUse)}
|
||||
</Descriptions.Item>
|
||||
|
||||
|
||||
</Descriptions>
|
||||
{/* <div className='resourceTitle'>
|
||||
<div style={{ fontSize: 24, fontWeight: 'bold' }}>CPU</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue