找图找数前端

web_ui/src/views/znzt-land/AiZtzsDetail.vue

@@ -1,5 +1,8 @@
 <template>
   <div class="industria-land-detail">
+    <div class="left-content">
+      <Tree :data="data4" show-checkbox multiple></Tree>
+    </div>
     <div class="map-content">
       <div class="content">
         <div :id="id" class="map">
@@ -7,11 +10,9 @@
             class="radar-scan-an"
             v-show="radarShow"
             :style="`width: ${radarScanStyle.width}; heigth: ${radarScanStyle.height}; top: ${radarScanStyle.top};left: ${radarScanStyle.left};`"
-          >
-          </div>
+          ></div>
         </div>
         <div class="right-tool">
-   
           <div class="layer-container">
             <div
               class="layer-panel"
@@ -103,7 +104,7 @@
               </div>
             </div>
             <template v-if="showResult">
-          <div class="xg-title">
+              <div class="xg-title">
                 <img src="~@/assets/image/cyyd/fk.png" />
                 <div class="name">回答</div>
               </div>
@@ -128,10 +129,16 @@
                       </h3>
                       <p>
                         <span class="content-item"
-                          >行政区名称:{{ citem.xzqmc ? citem.xzqmc : "-" }}</span
+                          >行政区名称:{{
+                            citem.xzqmc ? citem.xzqmc : "-"
+                          }}</span
                         >
                         <span class="content-item"
-                          >面积:{{ citem.yjjbnttbmj?(citem.yjjbnttbmj*0.0015).toFixed(2):0 }}亩</span
+                          >面积:{{
+                            citem.yjjbnttbmj
+                              ? (citem.yjjbnttbmj * 0.0015).toFixed(2)
+                              : 0
+                          }}亩</span
                         >
                       </p>
                     </div>
@@ -232,7 +239,7 @@ import wkt from "wellknown";
 import VueMarkdownIt from "vue-markdown-it";
 import landMethods from "@/api/land";
 import AIBtn from "@/components/AIBtn.vue";
-import LC from  "@/assets/layerConfig.js"
+import LC from "@/assets/layerConfig.js";
 export default {
   components: {
     industrialTop,
@@ -241,6 +248,41 @@ export default {
   },
   data() {
     return {
+      data4: [
+        {
+          title: "parent 1",
+          expand: true,
+          selected: true,
+          children: [
+            {
+              title: "parent 1-1",
+              expand: true,
+              children: [
+                {
+                  title: "leaf 1-1-1",
+                  disabled: true,
+                },
+                {
+                  title: "leaf 1-1-2",
+                },
+              ],
+            },
+            {
+              title: "parent 1-2",
+              expand: true,
+              children: [
+                {
+                  title: "leaf 1-2-1",
+                  checked: true,
+                },
+                {
+                  title: "leaf 1-2-1",
+                },
+              ],
+            },
+          ],
+        },
+      ],
       geoLayer: null,
       nearMarkerList: [],
       radarScanStyle: {
@@ -425,7 +467,6 @@ export default {
       //   center_wkt: "POINT(120.912063 29.486802)",
       // };
       // this.showDetail = true;
-
     });
   },
   created() {
@@ -437,15 +478,15 @@ export default {
   },
 
   methods: {
-    toggleContentVisabledAll () {
+    toggleContentVisabledAll() {
       this.mContentVisabled = !this.mContentVisabled;
       this.xgdk.forEach((item) => {
-        item['show'] = this.mContentVisabled
-      })
+        item["show"] = this.mContentVisabled;
+      });
     },
-    toggleContentVisabled (item) {
-      item['show'] = item['show'] ? false : true
-      this.mContentVisabled = item['show']
+    toggleContentVisabled(item) {
+      item["show"] = item["show"] ? false : true;
+      this.mContentVisabled = item["show"];
     },
     mapExtend() {
       // 18级的地图
@@ -597,7 +638,7 @@ export default {
       this.toggleInfoTab();
       this.toggleTab(0);
     },
-    zwsend () {
+    zwsend() {
       if (!this.zwinputText) {
         this.zwinputText = "请帮我查一下萧山区永久基本农田面积大于100亩的地块";
       }
@@ -669,7 +710,7 @@ export default {
         if (item.layer === undefined || item.layer == null) {
           if (item.type == "dynamic") {
             item.layer = dynamicMapLayer({
-              layers:[0],
+              layers: [0],
               url: item.url,
               f: "image",
             });
@@ -733,7 +774,6 @@ export default {
         attributionControl: false, //去掉右下角的logo
       });
 
-
       //默认加载所有选中图层
       this.layers.forEach((layerGroup) => {
         layerGroup.layers.forEach((oneLayer) => {
@@ -819,8 +859,8 @@ export default {
     },
     //显示地块详情，先获取地块图斑，定位、路线、和地类分析需要叠加获取相交地块
     showDetailModal(item, index) {
-      console.log("item:"+item);
-      console.log(item)
+      console.log("item:" + item);
+      console.log(item);
       this.clearMark();
       this.activeItem = item;
       //高亮marker
@@ -1036,7 +1076,7 @@ export default {
       }
     },
     //详情页tab切换地图绘制相关清空
-    toggleInfoTab(type,index) {
+    toggleInfoTab(type, index) {
       console.log(type, index);
       if (this.markerLayer) {
         this.map.removeLayer(this.markerLayer);
@@ -1063,22 +1103,22 @@ export default {
       }
       if (type == "jbxx") {
         //现状分析
-          if(index==1) {
-            this.checkedJbxxLayers(3,4,5)
-          } else if(index==2) {
-            this.checkedJbxxLayers(4,3,5)
-          }else if(index==3) {
-            this.checkedJbxxLayers(5,3,4)
+        if (index == 1) {
+          this.checkedJbxxLayers(3, 4, 5);
+        } else if (index == 2) {
+          this.checkedJbxxLayers(4, 3, 5);
+        } else if (index == 3) {
+          this.checkedJbxxLayers(5, 3, 4);
         }
-       } else if(type=='qyts'){
+      } else if (type == "qyts") {
         this.checkedQysLayers(index);
-       } else if(type == 'zhjt'){
+      } else if (type == "zhjt") {
         this.checkedOtherLayers();
-       } else if(type == 'ggss'){
+      } else if (type == "ggss") {
         this.checkedOtherLayers();
-       }
-      },
-    checkedOtherLayers(){
+      }
+    },
+    checkedOtherLayers() {
       this.layers[2].layers.forEach((item) => {
         if (item.checked) {
           item.checked = false;
@@ -1105,8 +1145,8 @@ export default {
       });
     },
     checkedQysLayers(selectIndex) {
-      this.layers[2].layers.forEach((item,index) => {
-        if(index==selectIndex && !item.checked) {
+      this.layers[2].layers.forEach((item, index) => {
+        if (index == selectIndex && !item.checked) {
           item.checked = true;
           this.switchMapLayer(item);
         } else {
@@ -1133,7 +1173,7 @@ export default {
         }
       });
     },
-    checkedJbxxLayers(index1,index2,index3) {
+    checkedJbxxLayers(index1, index2, index3) {
       this.layers[index1].layers.forEach((item) => {
         if (!item.checked) {
           item.checked = true;
@@ -1202,7 +1242,6 @@ export default {
         });
         this.map.flyTo([centerList[1], centerList[0]], 17);
       }
-     
     },
     //所有地块仿百度地图绘制
     showXgdkCenterPoint() {
@@ -1518,13 +1557,18 @@ export default {
   width: 100%;
   position: relative;
   height: 100%;
-
+  .left-content {
+    width: 20%;
+    top: 0px;
+    left: 0px;
+    height: calc(100% - 0px);
+    float: left;
+  }
   .map-content {
-    position: absolute;
-    width: 100%;
+    width: 80%;
     top: 0px;
     height: calc(100% - 0px);
-
+    float: right;
     .content {
       width: 100%;
       height: 100%;
@@ -1534,15 +1578,6 @@ export default {
         width: 100%;
         z-index: 10;
         height: 100%;
-
-        .radar-scan-an {
-          position: absolute;
-          left: 488px;
-          z-index: 1001;
-          height: 904px;
-          width: 904px;
-          //top: 100px;
-        }
       }
 
       .right-tool {