|
|
|
|
@ -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;
|
|
|
|
|
// }
|
|
|
|
|
// }
|
|
|
|
|
// }
|
|
|
|
|
// }
|
wangyunfei
2 weeks ago
