jiangxucong
/
dq-cms
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

更新

Browse Source
main
wangyunfei 2 weeks ago
parent 79352c660d
commit 571efe96cb
2 changed files with 335 additions and 3 deletions
Show Stats Download Patch File Download Diff File

175
src/pages/business_basic/components/second_datamodel_components/BasicAttribute.js
Unescape Escape View File

@ -1,10 +1,181 @@
import React from 'react';
import React, { useState } from 'react';
import { Select, Tree } from 'antd';
import styles from './BasicAttribute.less';
const buildingOptions = [
{ label: '工厂建筑', value: 'plant' },
{ label: '仓储设施', value: 'warehouse' },
];
const factoryOptions = [
{ label: '全部工厂', value: 'all' },
{ label: '上海油库', value: 'shanghai' },
{ label: '南京油库', value: 'nanjing' },
];
const treeData = [
{
title: '上海油库',
key: 'shanghai',
children: [
{
title: '汽油罐区',
key: 'gasoline-area',
children: [
{
title: '汽油调合罐组',
key: 'blend-group',
children: [
{
title: 'T-101 汽油储罐',
key: 't101',
children: [
{ title: 'LT-101 液位变送器', key: 'lt101' },
{ title: 'TT-101 温度变送器', key: 'tt101' },
{ title: 'PT-101 压力变送器', key: 'pt101' },
{ title: 'P-101A 输送泵', key: 'p101a' },
{ title: 'P-101B 输送泵', key: 'p101b' },
{ title: 'SP-101 密度计', key: 'sp101' },
],
},
{ title: 'T-102 汽油储罐', key: 't102' },
{ title: 'T-103 汽油储罐', key: 't103' },
],
},
],
},
{
title: '柴油罐区',
key: 'diesel-area',
},
{
title: '化危品库',
key: 'hazard',
},
],
},
];
const infoCards = [
{
title: '基本信息',
items: [
{ label: '储罐编号', value: 'T-101' },
{ label: '设备名称', value: '汽油储罐' },
{ label: '所属园区', value: '汽油罐区' },
{ label: '所属罐组', value: '汽油调合罐组' },
{ label: '用途类型', value: '常规罐' },
{ label: '投用日期', value: '2020-05-18' },
{ label: '状态', value: '在用' },
],
},
{
title: '结构参数',
items: [
{ label: '几何容量', value: '5000 m³' },
{ label: '安全液位', value: '90%' },
{ label: '紧急高液位', value: '95%' },
{ label: '紧急低液位', value: '5%' },
{ label: '罐底留存量', value: '50 m³' },
{ label: '容积表 ID', value: 'VOL-T-101-2020' },
{ label: '罐顶类型', value: '浮顶' },
],
},
{
title: '设备属性',
items: [
{ label: '材质', value: 'Q235B 碳钢' },
{ label: '设计压力', value: '0.6 MPa' },
{ label: '设计温度', value: '-10 ~ 60 ℃' },
{ label: '直径', value: '22 m' },
{ label: '高度', value: '13.5 m' },
{ label: '防腐等级', value: 'C4' },
],
},
{
title: '关联信息',
items: [
{ label: '进油管线', value: ['P-1010', 'P-1011'], type: 'tags' },
{ label: '出油管线', value: ['P-1020', 'P-1021', 'P-1022'], type: 'tags' },
{ label: '配套泵', value: ['P-101A', 'P-101B'], type: 'tags' },
{ label: '测量点', value: ['SP-101'], type: 'tags' },
{ label: '安全联锁', value: ['高液位联锁关闭进口阀'], type: 'tags' },
],
},
];
const BasicAttribute = () => {
const [buildingType, setBuildingType] = useState('plant');
const [factory, setFactory] = useState('all');
return (
<div className={styles.container}>
<div>待开发</div>
<section className={styles.leftPanel}>
<div className={styles.blockHeader}>
<span className={styles.titleIcon} />
<span className={styles.blockTitle}>工厂层级结构</span>
</div>
<div className={styles.filters}>
<Select
value={buildingType}
onChange={setBuildingType}
options={buildingOptions}
className={styles.filterSelect}
dropdownMatchSelectWidth={false}
size="small"
/>
<Select
value={factory}
onChange={setFactory}
options={factoryOptions}
className={styles.filterSelect}
dropdownMatchSelectWidth={false}
size="small"
/>
</div>
<div className={styles.treeWrapper}>
<Tree
showIcon={false}
defaultExpandAll
treeData={treeData}
className={styles.tree}
/>
</div>
</section>
<section className={styles.rightPanel}>
<div className={styles.blockHeader}>
<span className={styles.titleIcon} />
<span className={styles.blockTitle}>基本属性</span>
</div>
<div className={styles.infoGrid}>
{infoCards.map(card => (
<div className={styles.infoCard} key={card.title}>
<div className={styles.cardTitle}>{card.title}</div>
<div className={styles.cardBody}>
{card.items.map(item => (
<div className={styles.itemRow} key={`${card.title}-${item.label}`}>
<span className={styles.itemLabel}>{item.label}</span>
<span className={styles.itemValue}>
{item.type === 'tags' && Array.isArray(item.value) ? (
<span className={styles.tagList}>
{item.value.map(tag => (
<span className={styles.tag} key={tag}>
{tag}
</span>
))}
</span>
) : (
item.value
)}
</span>
</div>
))}
</div>
</div>
))}
</div>
</section>
</div>
);
};

163
src/pages/business_basic/components/second_datamodel_components/BasicAttribute.less
Unescape Escape View File

@ -1,4 +1,165 @@
.container {
padding: 20px;
display: flex;
gap: 16px;
padding: 16px;
background-color: #f6f8fb;
border-radius: 12px;
min-height: 520px;
.leftPanel {
flex: 0 0 320px;
background: #fff;
border-radius: 12px;
padding: 20px;
display: flex;
flex-direction: column;
box-shadow: 0 4px 20px rgba(21, 32, 66, 0.04);
}
.rightPanel {
flex: 1;
background: #fff;
border-radius: 12px;
padding: 20px;
box-shadow: 0 4px 20px rgba(21, 32, 66, 0.04);
display: flex;
flex-direction: column;
}
.blockHeader {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 16px;
.titleIcon {
width: 3px;
height: 16px;
border-radius: 2px;
background: linear-gradient(180deg, #21c6b7 0%, #0c8dff 100%);
display: inline-block;
}
.blockTitle {
font-size: 16px;
font-weight: 600;
color: #1f2f3d;
}
}
.filters {
display: flex;
gap: 12px;
margin-bottom: 16px;
.filterSelect {
width: 100%;
}
}
.treeWrapper {
flex: 1;
overflow: auto;
background: #f8fafc;
border-radius: 12px;
padding: 12px;
border: 1px solid #e4e9f2;
.tree :global(.ant-tree-node-content-wrapper) {
font-size: 13px;
padding: 4px 8px;
}
.tree :global(.ant-tree-switcher) {
width: 18px;
}
}
.infoGrid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px;
margin-top: 8px;
.infoCard {
background: #f8fafc;
border-radius: 12px;
padding: 16px;
border: 1px solid #e4e9f2;
min-height: 220px;
.cardTitle {
font-size: 15px;
font-weight: 600;
color: #1f2f3d;
margin-bottom: 12px;
}
.cardBody {
display: flex;
flex-direction: column;
gap: 8px;
.itemRow {
display: flex;
gap: 12px;
align-items: flex-start;
font-size: 13px;
color: #4f5e6f;
.itemLabel {
width: 90px;
color: #7d8a99;
}
.itemValue {
flex: 1;
color: #1f2f3d;
font-weight: 500;
.tagList {
display: flex;
flex-wrap: wrap;
gap: 8px;
.tag {
display: inline-flex;
align-items: center;
padding: 2px 10px;
border-radius: 999px;
background: rgba(12, 141, 255, 0.08);
color: #0c8dff;
font-size: 12px;
font-weight: 500;
}
}
}
}
}
}
}
}
.tree :global(.ant-tree-node-content-wrapper) {
font-size: 13px;
padding: 4px 8px;
}
.tree :global(.ant-tree-switcher) {
width: 18px;
}
// @media (max-width: 1400px) {
// .container {
// flex-direction: column;
// .leftPanel {
// flex: none;
// width: 100%;
// }
// .infoGrid {
// grid-template-columns: 1fr;
// }
// }
// }

Write Preview
Loading…
Cancel
Save