From ccb58153685402848b1556e08910d8737052e6b8 Mon Sep 17 00:00:00 2001 From: wangyunfei <1224056307@qq,com> Date: Thu, 27 Nov 2025 14:35:54 +0800 Subject: [PATCH] =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E5=BE=AE=E8=B0=83?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/business_basic/icon1.svg | 3 + src/assets/business_basic/icon2.svg | 3 + .../BasicAttribute.js | 15 +- .../BasicAttribute.less | 141 +++++++----------- 4 files changed, 75 insertions(+), 87 deletions(-) create mode 100644 src/assets/business_basic/icon1.svg create mode 100644 src/assets/business_basic/icon2.svg diff --git a/src/assets/business_basic/icon1.svg b/src/assets/business_basic/icon1.svg new file mode 100644 index 0000000..e971b4b --- /dev/null +++ b/src/assets/business_basic/icon1.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/business_basic/icon2.svg b/src/assets/business_basic/icon2.svg new file mode 100644 index 0000000..dd58026 --- /dev/null +++ b/src/assets/business_basic/icon2.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/pages/business_basic/components/second_datamodel_components/BasicAttribute.js b/src/pages/business_basic/components/second_datamodel_components/BasicAttribute.js index 4010c02..270e622 100644 --- a/src/pages/business_basic/components/second_datamodel_components/BasicAttribute.js +++ b/src/pages/business_basic/components/second_datamodel_components/BasicAttribute.js @@ -1,6 +1,8 @@ import React, { useMemo, useState } from 'react'; import { Select, Tree } from 'antd'; import styles from './BasicAttribute.less'; +import { ReactComponent as Icon1 } from '@/assets/business_basic/icon1.svg'; +import { ReactComponent as Icon2 } from '@/assets/business_basic/icon2.svg'; const buildingOptions = [ { label: '工厂建筑', value: 'plant' }, @@ -17,7 +19,7 @@ const rawTreeData = [ { title: '上海油库', key: 'shanghai', - tag: { label: '油库', type: 'depot' }, + tag: { label: '工厂', type: 'depot' }, children: [ { title: '汽油罐区', @@ -207,6 +209,17 @@ const BasicAttribute = () => { onSelect={keys => setSelectedKeys(keys)} className={styles.tree} virtual={false} + // switcherIcon={icon1} + switcherIcon={nodeProps =>{ + // if (!nodeProps.children || nodeProps.children.length ===0){ + // return null; + // } + return nodeProps.expanded ? ( + + ) : ( + + ); + }} /> diff --git a/src/pages/business_basic/components/second_datamodel_components/BasicAttribute.less b/src/pages/business_basic/components/second_datamodel_components/BasicAttribute.less index 10814b4..a5f08b5 100644 --- a/src/pages/business_basic/components/second_datamodel_components/BasicAttribute.less +++ b/src/pages/business_basic/components/second_datamodel_components/BasicAttribute.less @@ -2,14 +2,13 @@ display: flex; gap: 16px; padding: 16px; - background-color: #f6f8fb; - border-radius: 12px; + background-color: #fff; min-height: 520px; .leftPanel { flex: 0 0 320px; - background: #fff; - border-radius: 12px; + background: #e9f3ef; + border-radius: 2px; padding: 20px; display: flex; flex-direction: column; @@ -36,7 +35,7 @@ width: 3px; height: 16px; border-radius: 2px; - background: linear-gradient(180deg, #21c6b7 0%, #0c8dff 100%); + background: rgba(0, 102, 101, 1); display: inline-block; } @@ -54,80 +53,55 @@ .filterSelect { width: 100%; + + :global(.ant-select-selector) { + border: 1px solid rgba(45, 158, 157, 1); + border-radius: 2px; + } + + :global(.ant-select-focused .ant-select-selector) { + border-color: rgba(45, 158, 157, 1) !important; + box-shadow: 0 0 0 2px rgba(45, 158, 157, 0.2) !important; + } + + :global(.ant-select:hover .ant-select-selector) { + border-color: rgba(45, 158, 157, 1) !important; + } } } .treeWrapper { flex: 1; overflow: auto; - background: #f8fafc; - border-radius: 12px; - padding: 12px; - border: 1px solid #e4e9f2; .tree { - height: 100%; - - :global(.ant-tree) { - color: #1f2f3d; - } - - :global(.ant-tree-treenode) { - display: flex; - align-items: center; - gap: 8px; - position: relative; - padding-right: 86px; - } + background-color: transparent; :global(.ant-tree-switcher) { - width: 18px; - color: #41c1c7; - position: absolute; - right: 60px; - top: 50%; - transform: translateY(-50%); - margin-left: 0; - } - - :global(.ant-tree-switcher-line-icon) { - stroke: #a6c6d3; + display: flex; + align-items: center !important; } - :global(.ant-tree-node-content-wrapper) { - flex: 1; - width: 100%; - font-size: 13px; - padding: 4px 8px; - border-radius: 8px; - transition: background 0.2s ease; + :global(.ant-tree) { + background-color: transparent; } - :global(.ant-tree-node-content-wrapper:hover), - :global(.ant-tree-node-content-wrapper.ant-tree-node-selected) { - background: rgba(12, 141, 255, 0.12); + :global(.ant-tree-treenode) { + padding: 2px 0; } - :global(.ant-tree-checkbox-inner) { - width: 14px; - height: 14px; + :global(.ant-tree-node-content-wrapper) { + padding: 2px 4px; border-radius: 4px; - border-color: #6db8ff; - } - - :global(.ant-tree-checkbox-checked .ant-tree-checkbox-inner), - :global(.ant-tree-checkbox-indeterminate .ant-tree-checkbox-inner) { - background: #0c8dff; - border-color: #0c8dff; - box-shadow: 0 2px 6px rgba(12, 141, 255, 0.35); - } + transition: background 0.2s ease; - :global(.ant-tree-checkbox-checked .ant-tree-checkbox-inner::after) { - border-color: #fff; + &:hover { + background: rgba(196, 225, 214, 0.3); + } } - :global(.ant-tree-line .ant-tree-switcher) { - background-color: transparent; + :global(.ant-tree-node-selected) { + background: rgba(196, 225, 214, 0.5) !important; } } } @@ -148,7 +122,7 @@ .cardTitle { font-size: 15px; font-weight: 600; - color: #1f2f3d; + color: rgba(0, 0, 0, 1); margin-bottom: 12px; } @@ -171,7 +145,7 @@ .itemValue { flex: 1; - color: #1f2f3d; + color: rgba(0, 0, 0, 1); font-weight: 500; .tagList { @@ -208,51 +182,46 @@ .nodeText { flex: 1; - color: #1f2f3d; + color: rgba(0, 0, 0, 1); font-weight: 500; } .nodeTag { - min-width: 48px; + // min-width: 48px; text-align: center; - padding: 2px 8px; - border-radius: 999px; + padding: 0px 6px; + border-radius: 2px; font-size: 12px; - font-weight: 600; - background: rgba(12, 141, 255, 0.08); - color: #0c8dff; + font-weight: 500; position: absolute; right: 0; margin-right: 0; + // 工厂、罐区、测点、储罐使用指定背景色 &.tag-depot { - background: rgba(30, 199, 188, 0.14); - color: #13a79c; + background: rgba(196, 225, 214, 1); + color: rgba(0, 0, 0, 1); } &.tag-area { - background: rgba(126, 196, 255, 0.22); - color: #0c8dff; + background: rgba(196, 225, 214, 1); + color: rgba(0, 0, 0, 1); } - &.tag-group { - background: rgba(255, 193, 111, 0.2); - color: #d97a00; + &.tag-sensor { + background: rgba(196, 225, 214, 1); + color: rgba(0, 0, 0, 1); } &.tag-tank { - background: rgba(55, 172, 255, 0.2); - color: #0970c3; + background: rgba(196, 225, 214, 1); + color: rgba(0, 0, 0, 1); } - &.tag-device { - background: rgba(161, 134, 255, 0.22); - color: #6b4de6; - } - - &.tag-sensor { - background: rgba(75, 226, 183, 0.18); - color: #0d9b7d; + // 其他类型保持原有样式 + &.tag-group { + background: rgba(196, 225, 214, 1); + color: rgba(0, 0, 0, 1); } } @@ -269,4 +238,4 @@ // grid-template-columns: 1fr; // } // } -// } +// } \ No newline at end of file