级联与搜索地址

screen-demo/src/views/templateInstance.vue

@@ -27,18 +27,26 @@
           v-model="clickTree"
           placeholder="选择省市"
           :options="trees"
+          :props="{lazy:true,lazyLoad:loadOptions,value:'areaCode',label:'areaName'}"
           filterable
-          popper-class="mzfs-cascader"
           @change="setValue"
+          popper-class="mzfs-cascader"
           :show-all-levels="false"
       ></el-cascader>
+
       <div class="input-container">
         <el-input placeholder="请输入关键词" v-model="input3" class="input-with-select">
-          <el-button slot="append" icon="el-icon-search" @click="keywordPoint(input3)" ></el-button>
-          <span slot="append" class="nav" @click="open=true" ></span>
+          <el-button slot="append" icon="el-icon-search"  @click="dropdownSelect" ></el-button>
+          <span slot="append" class="nav" @click="open=true"></span>
           <template #prepend></template>
         </el-input>
       </div>
+      <div class="router-wraps" v-if="dropdownOpen">
+        <div v-for="(item) in dropdownList" :key="item.alias" class="router-item">
+          <div class="alias" @click="setDropDownItem(item)">{{item.alias}}</div>
+          <div>{{item.region.province}}-{{item.region.city}}-{{item.region.county}}</div>
+        </div>
+      </div>
       <div  class="router-wraps" v-if="open" >
         <div style="width: 90%"><!---->
           <el-input placeholder="请输入起点" v-model="start" @focus="focus1(0)">
@@ -46,22 +54,6 @@
           <el-input placeholder="请输入终点" @focus="focus1(1)" v-model="end">
           </el-input>
         </div>
-        <el-dropdown trigger="click">
-          <span class="el-dropdown-link" style="color: white">
-            方式<i class="el-icon-caret-bottom el-icon--right"></i>
-          </span>
-          <el-dropdown-menu slot="dropdown">
-            <el-dropdown-item class="clearfix">
-              驾车
-            </el-dropdown-item>
-            <el-dropdown-item class="clearfix">
-              步行
-            </el-dropdown-item>
-            <el-dropdown-item class="clearfix">
-              公交
-            </el-dropdown-item>
-          </el-dropdown-menu>
-        </el-dropdown>
         <el-button  icon="el-icon-search" @click="loadFind"></el-button>
         <el-button  icon="el-icon-close" @click="close"></el-button>
       </div>
@@ -216,6 +208,8 @@ export default {
   },
   data() {
     return {
+      dropdownList:[],
+      dropdownOpen:false,
       /* 全页面历史记录 开始 */
       /**
        * 后端还需要两个接口，一个是存数据接口，一个是取数据接口，存和取我们都是根据用户信息作为赛选条件，我们这边把用户信息和要存的东西用自己的格式转换成JSON串，我们做包括但不限于地图、导航、搜索等各种历史记录用，所以字段长度要设得比默认的255大点，关于字段至少要有三个（主键id, 用户筛选条件user_info, 存储的历史数据json_data）
@@ -240,39 +234,7 @@ export default {
       input3:'',
       start:'',
       end:'',
-      trees: [{
-        value: 'province1',
-        label: '省份1',
-        children: [{
-          value: 'city1',
-          label: '城市1',
-          children: [{
-            value: 'district1',
-            label: '区/县1'
-          }, {
-            value: 'district2',
-            label: '区/县2'
-          }]
-        }, {
-          value: 'city2',
-          label: '城市2',
-          children: [{
-            value: 'district3',
-            label: '区/县3'
-          }]
-        }]
-      }, {
-        value: 'province2',
-        label: '省份2',
-        children: [{
-          value: 'city3',
-          label: '城市3',
-          children: [{
-            value: 'district4',
-            label: '区/县4'
-          }]
-        }]
-      }],
+      trees: [],
       currentPage1: 1,
       total: 0,
       timeX: [],
@@ -309,49 +271,10 @@ export default {
     this.selfHistory()
     this.selectcounty(0);
     this.oneEchart();
-    // this.twochart();
     this.echarts1q()
     this.btnMethod(0)
     this.echarts3q()
-    this.echarts4q()
     this.treeCitys()
-    // 测试新发接口数据
-    /*
-    /jilin/queryAllAreaCode   查询行政区域列表，编号10.5.13.查询行政区域列表
-     */
-    this.$requestSDK(
-      "/jilin-devloper/jilin/queryAllAreaCode",
-      {},
-      {},
-      "get"
-    ).then((res) => {
-      console.log("查询行政区域列表，编号10.5.13.查询行政区域列表=", res)
-    });
-    // // 获取摄像头点位列表信息
-    // this.$requestSDK(
-    //   "/jilin-devloper/jilin/querySiteCodeAndDevices",
-    //   {},
-    //   {},
-    //   "post"
-    // ).then((res) => {
-    //   this.markPoints = res.data;
-    //   // 添加打点
-    //   if (this.map) {
-    //     if (this.mapType === "3D" || this.mapType === "2D") {
-    //       this.addPoint3D(this.map);
-    //     } else {
-    //       this.addPoint(this.map.map);
-    //     }
-    //   }
-    // });
-    // 最新视频弹窗监听方式
-    // this.$postMsgUtil.listen('videoListen', (data) => {
-    //   // 对应业务逻辑处理
-    //   if(data?.callBackMethod === "closeFunction") {
-    //     this.active = false
-    //     document.querySelector(".bottomBtnEvent").classList.remove("active-tool")
-    //   }
-    // })
     let _this = this;
     // 使用postMessage方式调用
     window.addEventListener("message", function (event) {
@@ -376,18 +299,84 @@ export default {
     });
   },
   methods: {
+    loadOptions(node, resolve) {
+      if (node.level > 2) return resolve([]); // Adjust the maximum level allowed for selection
+      if (!this.isLoading && node.data.id) {
+        this.setValue(node)
+        this.isLoading = true;
+        setTimeout(() => {
+          let param = {
+            areaCode: node.data.areaCode || ''
+          };
+          this.$requestSDK(
+              "/jilin-devloper/cityCode/getInfoByAreaCode",
+              param,
+              {},
+              "get"
+          ).then((data) => {
+            if (data.code === 200) {
+              const items = data.data.map(obj => ({
+                areaName: obj.areaName,
+                id: obj.id,
+                areaCode: obj.areaCode
+              }));
+              resolve(items);
+              this.isLoading = false;
+            } else {
+              this.$message({
+                type: 'warning',
+                message: 'Failed to fetch information'
+              });
+              this.isLoading = false;
+              resolve([]); // Resolve with empty array in case of error
+            }
+          }).catch(() => {
+            this.$message.error('An error occurred while fetching data.');
+            this.isLoading = false;
+            resolve([]); // Resolve with empty array in case of error
+          });
+        }, 500);
+      } else {
+        resolve([]);
+      }
+    },
+    setDropDownItem(item){
+      const point = item.region.location.split(',');
+      console.log(point)
+      this.keywordPoint(point)
+    },
+    dropdownSelect(){
+      if (this.input3==''||this.input3==null)return;
+      this.dropdownOpen = !this.dropdownOpen;
+      if (this.dropdownOpen==false){
+        this.dropdownList=[]
+        return;
+      }
+      let params = {
+        keyWord: this.input3,
+        pageSize: 10,
+        pageNum: 1
+      }
+      let poiByKeyWord = new CTMapOl.netApi.poiByKeyWord(params);
+      poiByKeyWord.then(res=>{
+        console.log('地点列表',res)
+        if (res.code===200){
+          this.dropdownList = res.data.list
+        }
+      })
+    },
     treeCitys(){
-      //行政区测试
+      //行政区
       let param = {
-        adCode : "120000"
+        areaCode : ""
       }
       this.$requestSDK(
-          "/jilin-devloper/jilin/queryAllAreaCode",
+          "/jilin-devloper/cityCode/getInfoByAreaCode",
           param,
           {},
-          "post"
+          "get"
       ).then(res=>{
-        console.log(res)
+        this.trees = res.data
       })
     },
     selfHistory(){
@@ -396,7 +385,6 @@ export default {
     },
     //根据地址去落点
     keywordPoint(points){
-      console.log(points)
       function monitorIcon() {
         return new CTMapOl.style.Style({
           image: new CTMapOl.style.Icon({
@@ -405,16 +393,15 @@ export default {
         });
       }
       let fixPositionObj = new CTMapOl.extend.FixPosition(this.mapType === "3D" ? this.map : this.map.map,monitorIcon())
-      fixPositionObj.position([124.56485712008785, 41.228574591618738],true)
+      fixPositionObj.position(points,true)
       console.log(fixPositionObj)
     },
     setValue(val){
-      this.clickTree = val
-      console.log(val)
+      this.clickTree = val.data.areaCode
       const fit = new CTMapOl.extend.FitToRegion(this.mapType === "3D" ? this.map : this.map.map, { duration: 300 },errorMsg => {
         console.log(errorMsg)
       })
-      fit.fitView({ adCode: '110000' })
+      fit.fitView({ adCode: this.clickTree})
     },
     focus1(num){
       this.flag = num
@@ -422,13 +409,11 @@ export default {
       this.setpoint()
     },
     close(){
-      this.location.destroy()
       this.open=false
       this.start=[]
       this.end=[]
       this.flag = null
-      // console.log("this.location=", this.location);
-      // alert(this.location.destroy())
+      this.location.destroy()
     },
     //投影转坐标
     MercatorToWGS84(coords) {
@@ -481,49 +466,6 @@ export default {
         this.location = toolRoute;
       }
     },
-    handleSizeChange(val) {
-      console.log(`每页 ${val} 条`);
-    },
-    handleCurrentChange(val) {
-      console.log(`当前页: ${val}`);
-      const result = {
-        "rows": [
-          {
-            "falseNum": 30,
-            "acceptanceNum": 150,
-            "realNum": 120,
-            "avgTimeDay": "8时30分",
-            "dispatchNum": 160,
-            "completionRates": 85,
-            "regionName": "吉林铁塔",
-            "repeatCompleteNum": 20,
-            "accuracy": "95%",
-            "cityId": "C002",
-            "townId": "T002",
-            "completionRate": "70%",
-            "handleNum": 200,
-            "provinceId": "P002",
-            "allNum": 400,
-            "duration": "1.5 hours",
-            "avgTimes": 90,
-            "avgTime": "1.5 minutes",
-            "orderCompleteNum": 80,
-            "countyId": "C003",
-            "judgeNum": 40,
-            "accuracys": "80%",
-            "processNum": 250,
-            "approveNum": 70
-          },
-        ],total:3
-      }
-      let names = result.rows.map(o=>o.regionName)
-      let names1 = result.rows.map(o=>o.regionName)
-      let values = result.rows.map(o=>o.allNum);
-      let values1 = result.rows.map(o=>o.completionRates);
-      this.total = result.total
-      if (this.num===0){this.echarts2q(names,values)}
-      if (this.num===1){this.echarts2q(names1,values1)}
-    },
     echarts1q(){
       let result ={}
       let param = {
@@ -1082,8 +1024,6 @@ export default {
         _doc.setOption(option)
       })
     },
-
-
     oneEchart(){
       let result = {}
       // 参数时间有要求，需要传入 2024-03-01 23:59:59 - 2024-04-29 00:00:00 数据 月份两位的 带时分秒
@@ -1299,7 +1239,6 @@ export default {
       };
       _doc.setOption(option)
     },
-
     /**
      * 3D地图打点
      * @param mapDom 地图实例
@@ -2579,5 +2518,17 @@ progress::-webkit-progress-value {
     background-image: linear-gradient(to bottom, #132132,#3361A5) !important;
     border: 1px solid #B1DEFD;
   }
+  .router-item {
+    background-image: linear-gradient(to bottom, #132132, #496fa6) !important;
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 0px;
+    font-size: 14px;
+  }
+}
+
+
+.alias {
+  font-weight: bold;
 }
 </style>