Merge branch 'master' of http://www.sysuimars.cn:3000/feiniao/agriculture-one-map

src/views/warningHome/index.vue

@@ -51,8 +51,19 @@
                     <time-line></time-line>
                 </div>
             </div>
-            <!-- <div class="action-legend">1</div> -->
-            <div v-if="showDetail" class="warning-r right chart-wrap yes-events">
+            <div class="action-legend">
+                <el-tree
+                    class="yes-events"
+                    style="max-width: 200px;"
+                    :data="treeActionData"
+                    show-checkbox
+                    node-key="id"
+                    :default-expanded-keys="[2, 3]"
+                    :default-checked-keys="[5]"
+                    :props="defaultProps"
+                />
+            </div>
+            <div v-if="!showDetail" class="warning-r right chart-wrap yes-events">
                 <chart-list></chart-list>
                 <!-- <farmInfoGroup></farmInfoGroup> -->
             </div>
@@ -147,6 +158,55 @@ let staticMapPointLayers = null;
 const areaVal = ref(["3"]);
 const mapRef = ref(null);
 const showDetail = ref(false);
+const defaultProps = {
+  children: 'children',
+  label: 'label',
+}
+
+const treeActionData = ref([
+  {
+    id: 1,
+    label: '果类',
+    children: [
+      {
+        id: 4,
+        label: '荔枝',
+      },
+      {
+        id: 55,
+        label: '龙眼',
+      },
+    ],
+  },
+  {
+    id: 2,
+    label: '粮食',
+    children: [
+      {
+        id: 5,
+        label: '水稻',
+      },
+      {
+        id: 6,
+        label: '小麦',
+      },
+    ],
+  },
+  {
+    id: 3,
+    label: '蔬菜',
+    children: [
+      {
+        id: 7,
+        label: '白菜',
+      },
+      {
+        id: 8,
+        label: '萝卜',
+      },
+    ],
+  },
+])
 
 // 顶部基础 tabs
 const baseTabs = ["作物分布", "物候期分布", "预警分布", "农场分布", "农服管理"];
@@ -346,6 +406,28 @@ const remoteMethod = async (keyword) => {
             background: #101010;
             border: 1px solid #444444;
         }
+        .action-legend {
+            flex: 1;
+            padding: 0 13px;
+            display: flex;
+            justify-content: flex-end;
+            align-items: baseline;
+            ::v-deep {
+                .el-tree {
+                    background: #232323;
+                    border: 1px solid #444444;
+                    border-radius: 5px;
+                    padding: 10px 0;
+                    --el-tree-node-content-height: 34px;
+                    --el-tree-node-hover-bg-color: rgba(255, 212, 137, 0.05);
+                    --el-tree-text-color: #FFD489;
+                    --el-tree-expand-icon-color: #FFD489;
+                }
+                .el-tree-node__content {
+                    padding-right: 5px;
+                }
+            }
+        }
         .warning-r {
             .map-legend {
                 position: absolute;

src/views/warningHome/warningMap.js

@@ -28,7 +28,7 @@ class HomeMap {
     let level = 9;
     let coordinate = util.wktCastGeom(location).getFirstCoordinate();
     this.kmap = new KMap.Map(target, level, coordinate[0], coordinate[1], null, 9, 22);
-    this.addMapListen();
+    // this.addMapListen()
     // 添加比例尺控件
     const scaleLine = new ScaleLine({
       units: 'metric' // 可以选择 'imperial' 或 'metric'