Commit 8dd3ab07 authored by 左玲玲's avatar 左玲玲 😬

左右样式修改

parent 107b7d55
......@@ -448,7 +448,7 @@ function TreeRender({
onChange={onChange}
/>
<div style={{ overflow: 'auto' }}>
<div className='boxcontianbox'>
<Tree
onSelect={(selectedKeys, e) => {
cselectedKeys(selectedKeys);
......
......@@ -12,6 +12,7 @@ import AutoTable from '@/components/AutoTable';
import PremButton from '@/components/PremButton';
import getcolumns from './columns';
import { doFetch } from '@/utils/doFetch';
import styles from "./index.less";
import {
message,
Dropdown,
......@@ -2287,8 +2288,8 @@ function Model(props) {
};
const containderef = useRef();
return (
<div>
return (<div className={styles.ledgerbox}>
<div className={styles.ledgerheader}>
<div className="ant-card-head" style={{ backgroundColor: 'white' }}>
<div className="ant-card-head-wrapper">
<div className="ant-card-head-title">
......@@ -2296,11 +2297,12 @@ function Model(props) {
</div>
</div>
</div>
<Layout style={{ height: '100%' }} ref={containderef}>
<Sider theme="light" width={300}>
<TreeRender url="/auth/sysFactory/getTree" onselected={onselecteTree} noaction={true} />
</Sider>
<Content>
</div>
<div className={styles.ledgercontent}>
<div className={`${styles.ledgerleft} boxcontianbox`}>
<TreeRender url="/auth/sysFactory/getTree" onselected={onselecteTree} noaction={true} maxWidth={215} />
</div>
<div className={`${styles.ledgerright} boxcontianbox`} ref={containderef}>
<AutoTable
pagetitle={<h3 style={{ marginBottom: 0, fontWeight: 400 }}>设备台账</h3>}
columns={columns}
......@@ -2320,25 +2322,7 @@ function Model(props) {
item: null,
title: '新增',
val: 'only',
type: 'add',
// onFinish: async (vals) => {
// //console.log(vals);
// let params = {
// ...vals,
// };
// let res = await doFetch({
// url: urlParams.save,
// params,
// });
// if (res.code === '0000') {
// message.success('新增成功!');
// setDrawer((s) => ({
// ...s,
// visible: false,
// }));
// actionRef.current.reload();
// }
// },
type: 'add'
}));
},
},
......@@ -2346,8 +2330,8 @@ function Model(props) {
x={1500}
extraparams={extraparams}
/>
</Content>
</Layout>
</div>
</div>
<DrawerPro
fields={columns}
formRef={formRef}
......
.ledgerbox {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
.ledgerheader {
width: 100%;
border-bottom: 1px solid #f0f0f0;
flex-shrink: 0;
}
.ledgercontent {
background-color: #fff;
flex: 1;
width: 100%;
overflow: hidden;
display: flex;
justify-content: space-between;
.ledgerleft {
width: 300px;
display: flex;
flex-direction: column;
height: 100%;
overflow-y: auto;
padding: 0 16px;
flex-shrink: 0;
}
.ledgerright {
padding: 0 16px;
flex: 1;
border-left: 1px solid #f0f0f0;
overflow: hidden;
overflow-y: auto;
}
}
}
\ No newline at end of file
......@@ -3,6 +3,12 @@ import { Tooltip, Tabs } from 'antd';
import Filedetail from "@/components/Filedetail";
import DetailPro from '@/components/DetailPro';
import AutoTable from '@/components/AutoTable/mtable';
const statusColors = {
1: '#7ac143',
2: 'orange',
3: '#6a737b',
4: '#fa4659'
};
const columns = [
{
title: '设备编号',
......@@ -58,7 +64,10 @@ const columns = [
{ label: '待机', value: 2 },
{ label: '关机', value: 3 },
{ label: '报警', value: 4 }
]
],
render: (_, row) => {
return <span style={{ color: statusColors[row.collectStatus] }}>{row.collectStatusName}</span>
}
},
];
const Devices = ({ drawer }) => {
......
......@@ -14,12 +14,7 @@ const Basemsg = ({ drawer, activeKey, setdrawer }) => {
return res?.data?.data ?? {};
}, {
refreshDeps: [drawer?.item?.id]
})
});
return <DetailPro
fields={columns}
detailData={detailData?.data ?? {}}
......
......@@ -2,7 +2,7 @@ import { Tooltip, Image, Tag } from 'antd';
import { doFetch } from '@/utils/doFetch';
const statusColors = {
1: '#7ac143',
2: '#00bce4',
2: 'orange',
3: '#6a737b',
4: '#fa4659'
};
......
......@@ -158,10 +158,10 @@ const Devicedata = () => {
</div>
</div>
<div className={styles.ledgercontent}>
<div className={styles.ledgerleft}>
<TreeRender url="/auth/sysFactory/getTree" onselected={onselecteTree} noaction={true} />
<div className={`${styles.ledgerleft} boxcontianbox`}>
<TreeRender url="/auth/sysFactory/getTree" onselected={onselecteTree} noaction={true} maxWidth={215} />
</div>
<div className={`${styles.ledgerright} ledgerf`}>
<div className={`${styles.ledgerright} ledgerf boxcontianbox`}>
<Tabs destroyInactiveTabPane activeKey={activeKey} onChange={(key) => {
catk(key);
}} items={tableItems} />
......
.ledgerbox {
width: 100%;
height: 100%;
overflow: hidden;
background-color: #fff;
display: flex;
flex-direction: column;
position: relative;
.ledgerheader {
width: 100%;
......@@ -14,6 +11,7 @@
}
.ledgercontent {
background-color: #fff;
flex: 1;
width: 100%;
overflow: hidden;
......@@ -25,7 +23,7 @@
display: flex;
flex-direction: column;
height: 100%;
overflow-y: hidden;
overflow-y: auto;
padding: 0 16px;
flex-shrink: 0;
}
......@@ -35,6 +33,7 @@
flex: 1;
border-left: 1px solid #f0f0f0;
overflow: hidden;
overflow-y: auto;
}
}
}
\ No newline at end of file
......@@ -92,7 +92,7 @@ const columnsa = [
key: 'standbyRate',
search: false,
render: (_, row) => {
return <span style={{ color: "#00bce4" }}>{row.standbyRate}%</span>
return <span style={{ color: "orange" }}>{row.standbyRate}%</span>
}
},
{
......
......@@ -221,17 +221,23 @@ const Devicestatus = ({ drawer }) => {
return option;
}, [chartdata?.data]);
const optionbData = useMemo(() => {
let colors = [];
let data = chartdata?.data?.data?.datalist?.length > 0 ? [{
let colors = [], allData = chartdata?.data?.data?.datalist ?? [], tableData = [];
let data = allData?.length > 0 ? [{
name: '',
value: chartdata?.data?.data?.datalist?.map(it => {
value: allData?.map(it => {
return {
name: it.status,
value: [it.start, it.end]
}
}) ?? []
}] : [];
tableData = allData?.sort(compareTimeDesc);
tableData = tableData?.map((it, i) => {
return {
...it,
id: i
}
}) ?? [];
for (let i in statusColors) {
colors.push({
type: i,
......@@ -241,14 +247,21 @@ const Devicestatus = ({ drawer }) => {
};
return {
statusData: data,
statusColorList: colors
statusColorList: colors,
tableData
}
}, [chartdata?.data]);
return <div style={{ display: "flex", justifyContent: "space-between", position: "relative" }}>
<div style={{ width: 300, padding: '0 16px', flexShrink: 0 }}>
<TreeRender dataSource={device?.data} onselected={onselecteTree} noaction={true} isSelectFirst={true} maxWidth={240} />
function compareTimeDesc(a, b) {
const timeA = dayjs(a.start).valueOf();
const timeB = dayjs(b.start).valueOf();
return timeB - timeA;
}
return <div className={styles.ledgerbox}>
<div className={styles.ledgercontent}>
<div className={`${styles.ledgerleft} boxcontianbox`}>
<TreeRender dataSource={device?.data} onselected={onselecteTree} noaction={true} isSelectFirst={true} maxWidth={215} />
</div>
<div style={{ padding: 16, flex: 1, borderLeft: '1px solid #f0f0f0' }}>
<div className={`${styles.ledgerright} boxcontianbox`} style={{ padding: 16, flex: 1, borderLeft: '1px solid #f0f0f0' }}>
<div style={{ marginBottom: 30 }}>
<RangePicker
showTime={{
......@@ -256,7 +269,7 @@ const Devicestatus = ({ drawer }) => {
}}
format={format}
onChange={(val, dateString) => {
cdate(dateString)
}}
value={dateTimeRange?.length > 0 ? [dayjs(dateTimeRange?.[0]), dayjs(dateTimeRange?.[1])] : []}
/>
......@@ -278,15 +291,13 @@ const Devicestatus = ({ drawer }) => {
title: '采集状态',
dataIndex: 'name',
key: 'name',
search: false
search: false,
render: (_, row) => {
return <span style={{ color: statusColors[row.status]?.color }}>{row.name}</span>
}
},
]}
dataSource={chartdata?.data?.data?.datalist?.map((it, i) => {
return {
...it,
id: i
}
}) ?? []}
dataSource={optionbData?.tableData}
resizeable={false}
pageextra="none"
options={false}
......@@ -304,5 +315,7 @@ const Devicestatus = ({ drawer }) => {
</div>
</div>
</div>
</div>
}
export default Devicestatus;
\ No newline at end of file
......@@ -341,10 +341,10 @@ const Ledger = () => {
</div>
</div>
<div className={styles.ledgercontent}>
<div className={styles.ledgerleft}>
<TreeRender url="/auth/sysFactory/getTree" onselected={onselecteTree} noaction={true} maxWidth={240} />
<div className={`${styles.ledgerleft} boxcontianbox`}>
<TreeRender url="/auth/sysFactory/getTree" onselected={onselecteTree} noaction={true} maxWidth={215} />
</div>
<div className={styles.ledgerright}>
<div className={`${styles.ledgerright} boxcontianbox`}>
<AutoTable
pagetitle={'设备列表'}
columns={columns}
......
.ledgerbox {
width: 100%;
height: 100%;
// overflow: hidden;
background-color: #fff;
display: flex;
flex-direction: column;
// position: relative;
.ledgerheader {
width: 100%;
......@@ -14,9 +11,10 @@
}
.ledgercontent {
background-color: #fff;
flex: 1;
width: 100%;
// overflow: hidden;
overflow: hidden;
display: flex;
justify-content: space-between;
......@@ -25,12 +23,13 @@
display: flex;
flex-direction: column;
height: 100%;
overflow-y: hidden;
overflow-y: auto;
padding: 0 16px;
flex-shrink: 0;
}
.ledgerright {
padding: 0 16px;
flex: 1;
border-left: 1px solid #f0f0f0;
overflow: hidden;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment