|
|
@@ -54,14 +54,24 @@
|
|
|
<div class="action-legend">
|
|
|
<el-tree
|
|
|
class="yes-events"
|
|
|
- style="max-width: 200px;"
|
|
|
+ style="max-width: 250px;"
|
|
|
:data="treeActionData"
|
|
|
show-checkbox
|
|
|
node-key="id"
|
|
|
- :default-expanded-keys="[2, 3]"
|
|
|
+ :default-expanded-keys="[2]"
|
|
|
:default-checked-keys="[5]"
|
|
|
:props="defaultProps"
|
|
|
- />
|
|
|
+ >
|
|
|
+ <template #default="{ node, data }">
|
|
|
+ <div class="custom-tree-node">
|
|
|
+ <span>{{ node.label }}</span>
|
|
|
+ <div v-if="node.level === 1" class="level-legend">
|
|
|
+ <span class="legend-dot" :style="{ backgroundColor: data.color }"></span>
|
|
|
+ <span class="legend-text" :style="{ color: data.color }">图例</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-tree>
|
|
|
</div>
|
|
|
<div v-if="!showDetail" class="warning-r right chart-wrap yes-events">
|
|
|
<chart-list></chart-list>
|
|
|
@@ -169,6 +179,7 @@ const treeActionData = ref([
|
|
|
{
|
|
|
id: 1,
|
|
|
label: '果类',
|
|
|
+ color: '#51B2FF',
|
|
|
children: [
|
|
|
{
|
|
|
id: 4,
|
|
|
@@ -183,10 +194,25 @@ const treeActionData = ref([
|
|
|
{
|
|
|
id: 2,
|
|
|
label: '粮食',
|
|
|
+ color: '#FF8E1C',
|
|
|
children: [
|
|
|
{
|
|
|
id: 5,
|
|
|
label: '水稻',
|
|
|
+ children: [
|
|
|
+ {
|
|
|
+ id: 10,
|
|
|
+ label: '拔节期',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 11,
|
|
|
+ label: '孕穗期',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 12,
|
|
|
+ label: '抽穗期',
|
|
|
+ },
|
|
|
+ ],
|
|
|
},
|
|
|
{
|
|
|
id: 6,
|
|
|
@@ -197,6 +223,7 @@ const treeActionData = ref([
|
|
|
{
|
|
|
id: 3,
|
|
|
label: '蔬菜',
|
|
|
+ color: '#25BC07',
|
|
|
children: [
|
|
|
{
|
|
|
id: 7,
|
|
|
@@ -421,9 +448,40 @@ const remoteMethod = async (keyword) => {
|
|
|
--el-tree-node-hover-bg-color: rgba(255, 212, 137, 0.05);
|
|
|
--el-tree-text-color: #FFD489;
|
|
|
--el-tree-expand-icon-color: #FFD489;
|
|
|
+
|
|
|
+ .el-checkbox {
|
|
|
+ --el-checkbox-bg-color: transparent;
|
|
|
+ --el-checkbox-input-border: 1px solid #FFD489;
|
|
|
+ --el-checkbox-checked-input-border-color: #FFD489;
|
|
|
+ --el-checkbox-checked-bg-color: #FFD489;
|
|
|
+ --el-checkbox-checked-icon-color: #000;
|
|
|
+ --el-checkbox-input-border-color-hover: #FFD489;
|
|
|
+ }
|
|
|
}
|
|
|
.el-tree-node__content {
|
|
|
- padding-right: 5px;
|
|
|
+ padding-right: 30px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .custom-tree-node {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ gap: 8px;
|
|
|
+ }
|
|
|
+ .level-legend {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 4px;
|
|
|
+ padding: 0 5px;
|
|
|
+ height: 17px;
|
|
|
+ background: rgba(255, 255, 255, 0.1);
|
|
|
+ border-radius: 2px;
|
|
|
+ font-size: 10px;
|
|
|
+ .legend-dot {
|
|
|
+ width: 4px;
|
|
|
+ height: 4px;
|
|
|
+ border-radius: 50%;
|
|
|
}
|
|
|
}
|
|
|
}
|
