模糊查询

src/components/Query/clickQuery/CockpitVector.vue

@@ -1,7 +1,8 @@
 <template>
   <div>
-    <el-autocomplete class="search" v-model="state" :fetch-suggestions="querySearchAsync" placeholder="请输入内容"
-      @select="handleSelect" popper-class="select-option" :popper-append-to-body="false"></el-autocomplete>
+    <el-autocomplete class="search" @input="change_witch" v-model="state" :fetch-suggestions="querySearchAsync"
+      placeholder="请输入内容" @select="handleSelect" popper-class="select-option"
+      :popper-append-to-body="false"></el-autocomplete>
     <div class="cockpit_vector">
 
 
@@ -16,7 +17,9 @@
 
 <script>
 //这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
-
+import { QueryList } from '@/api/cockpitNew'
+import * as wellknown from "wellknown";
+import * as turf from "@turf/turf";
 export default {
   components: {},
   data() {
@@ -24,19 +27,8 @@ export default {
       restaurants: [],
       state: '',
       timeout: null,
-      tableData: [{
-        "name": "BSM",
-        "value": "460203251000000700"
-      }, {
-        "name": "BSM",
-        "value": "460203251000000700"
-      }, {
-        "name": "BSM",
-        "value": "460203251000000700"
-      }, {
-        "name": "BSM",
-        "value": "460203251000000700"
-      }]
+      pick_entity: null,
+
     };
   },
   //监听属性 类似于data概念
@@ -45,58 +37,50 @@ export default {
   watch: {},
   //方法集合
   methods: {
-    loadAll() {
-      return [
-        { "value": "三全鲜食（北新泾店）", "address": "长宁区新渔路144号" },
-        { "value": "Hot honey 首尔炸鸡（仙霞路）", "address": "上海市长宁区淞虹路661号" },
-        { "value": "新旺角茶餐厅", "address": "上海市普陀区真北路988号创邑金沙谷6号楼113" },
-        { "value": "泷千家(天山西路店)", "address": "天山西路438号" },
-        { "value": "胖仙女纸杯蛋糕（上海凌空店）", "address": "上海市长宁区金钟路968号1幢18号楼一层商铺18-101" },
-        { "value": "贡茶", "address": "上海市长宁区金钟路633号" },
-        { "value": "豪大大香鸡排超级奶爸", "address": "上海市嘉定区曹安公路曹安路1685号" },
-        { "value": "茶芝兰（奶茶，手抓饼）", "address": "上海市普陀区同普路1435号" },
-        { "value": "十二泷町", "address": "上海市北翟路1444弄81号B幢-107" },
-        { "value": "星移浓缩咖啡", "address": "上海市嘉定区新郁路817号" },
-        { "value": "阿姨奶茶/豪大大", "address": "嘉定区曹安路1611号" },
-        { "value": "新麦甜四季甜品炸鸡", "address": "嘉定区曹安公路2383弄55号" },
-        { "value": "Monica摩托主题咖啡店", "address": "嘉定区江桥镇曹安公路2409号1F，2383弄62号1F" },
-        { "value": "浮生若茶（凌空soho店）", "address": "上海长宁区金钟路968号9号楼地下一层" },
-        { "value": "NONO JUICE  鲜榨果汁", "address": "上海市长宁区天山西路119号" },
-        { "value": "CoCo都可(北新泾店）", "address": "上海市长宁区仙霞西路" },
-        { "value": "快乐柠檬（神州智慧店）", "address": "上海市长宁区天山西路567号1层R117号店铺" },
-        { "value": "Merci Paul cafe", "address": "上海市普陀区光复西路丹巴路28弄6号楼819" },
-        { "value": "猫山王（西郊百联店）", "address": "上海市长宁区仙霞西路88号第一层G05-F01-1-306" },
-        { "value": "枪会山", "address": "上海市普陀区棕榈路" },
-        { "value": "纵食", "address": "元丰天山花园(东门) 双流路267号" },
-        { "value": "钱记", "address": "上海市长宁区天山西路" },
-        { "value": "壹杯加", "address": "上海市长宁区通协路" },
-        { "value": "唦哇嘀咖", "address": "上海市长宁区新泾镇金钟路999号2幢（B幢）第01层第1-02A单元" },
-        { "value": "爱茜茜里(西郊百联)", "address": "长宁区仙霞西路88号1305室" },
-        { "value": "爱茜茜里(近铁广场)", "address": "上海市普陀区真北路818号近铁城市广场北区地下二楼N-B2-O2-C商铺" },
-        { "value": "鲜果榨汁（金沙江路和美广店）", "address": "普陀区金沙江路2239号金沙和美广场B1-10-6" },
-        { "value": "开心丽果（缤谷店）", "address": "上海市长宁区威宁路天山路341号" },
-        { "value": "超级鸡车（丰庄路店）", "address": "上海市嘉定区丰庄路240号" },
-        { "value": "妙生活果园（北新泾店）", "address": "长宁区新渔路144号" },
-        { "value": "香宜度麻辣香锅", "address": "长宁区淞虹路148号" },
-        { "value": "凡仔汉堡（老真北路店）", "address": "上海市普陀区老真北路160号" },
-        { "value": "港式小铺", "address": "上海市长宁区金钟路968号15楼15-105室" },
-        { "value": "蜀香源麻辣香锅（剑河路店）", "address": "剑河路443-1" },
-        { "value": "北京饺子馆", "address": "长宁区北新泾街道天山西路490-1号" },
-        { "value": "饭典*新简餐（凌空SOHO店）", "address": "上海市长宁区金钟路968号9号楼地下一层9-83室" },
-        { "value": "焦耳·川式快餐（金钟路店）", "address": "上海市金钟路633号地下一层甲部" },
-        { "value": "动力鸡车", "address": "长宁区仙霞西路299弄3号101B" },
-        { "value": "浏阳蒸菜", "address": "天山西路430号" },
-        { "value": "四海游龙（天山西路店）", "address": "上海市长宁区天山西路" },
-        { "value": "樱花食堂（凌空店）", "address": "上海市长宁区金钟路968号15楼15-105室" },
-        { "value": "壹分米客家传统调制米粉(天山店)", "address": "天山西路428号" },
-        { "value": "福荣祥烧腊（平溪路店）", "address": "上海市长宁区协和路福泉路255弄57-73号" },
-        { "value": "速记黄焖鸡米饭", "address": "上海市长宁区北新泾街道金钟路180号1层01号摊位" },
-        { "value": "红辣椒麻辣烫", "address": "上海市长宁区天山西路492号" },
-        { "value": "(小杨生煎)西郊百联餐厅", "address": "长宁区仙霞西路88号百联2楼" },
-        { "value": "阳阳麻辣烫", "address": "天山西路389号" },
-        { "value": "南拳妈妈龙虾盖浇饭", "address": "普陀区金沙江路1699号鑫乐惠美食广场A13" }
-      ];
+    change_witch() {
+      this.get_search(this.state);
+    },
+    get_search(word) {
+      if (word.length == 0) {
+        return false;
+      }
+      let gy_ju = {
+        jscType: 'jsc_tdgy_gy_zbmx_cx',
+        id: '4602',
+        val0: word,
+
+      }
+
+      let bj_sl = {
+        beginTime: store.state.cockpit_date[0],
+        endTime: store.state.cockpit_date[1],
+        jscType: 'jsc_bjxm_csbj_zbmx_cx',
+        id: '4602',
+        val0: word,
+
+      }
+
+      Promise.all([QueryList(gy_ju), QueryList(bj_sl)]).then((values) => {
+        this.restaurants = [];
+        values.forEach((item, index) => {
+          item.data.forEach((item, index) => {
+            if (item.xmmc != undefined && item.xmmc.length > 0) {
+              item.value = item.xmmc
+            }
+            if (item.sxnr != undefined && item.sxnr.length > 0) {
+              item.value = item.sxnr
+            }
+            this.restaurants.push(item);
+          });
+        });
+
+
+        // 当所有 promise 都成功完成时，values 是包含所有结果的数组  
+      }).catch((error) => {
+        console.error(error); // 如果有任何一个 promise 失败，则捕获这个错误  
+      });
     },
+
     querySearchAsync(queryString, cb) {
       var restaurants = this.restaurants;
       var results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants;
@@ -107,20 +91,119 @@ export default {
       }, 3000 * Math.random());
     },
     createStateFilter(queryString) {
+
       return (state) => {
-        return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
+
+        return (state.value.indexOf(queryString) != -1);
       };
     },
     handleSelect(item) {
-      console.log(item);
-    }
+      let arr = [];
+      const that = this;
+      Object.keys(item).forEach(key => {
+
+        arr.push({
+          "name": key,
+          "value": item[key],
+        });
+
+        if (key == 'geom') {
+          console.log(item[key]);
+
+
+          let geojson = wellknown.parse(item[key]);
+          console.log('geojson: ', geojson);
+
+          const twoDArray = geojson.coordinates[0];
+          const oneDArray = twoDArray.reduce((accumulator, currentValue) => accumulator.concat(currentValue), []);
+          console.log('oneDArray: ', oneDArray);
+          that.pick_entity.entities.add({
+            polygon: {
+              // 获取指定属性（positions，holes（图形内需要挖空的区域））
+              hierarchy: {
+                positions: Cesium.Cartesian3.fromDegreesArrayHeights(oneDArray),
+              },
+              // 边框
+              outline: true,
+              // 边框颜色
+              outlineColor: Cesium.Color.RED,
+              // 边框尺寸
+              outlineWidth: 2,
+              // 填充的颜色，withAlpha透明度
+              material: Cesium.Color.GREEN.withAlpha(0),
+              // 是否被提供的材质填充
+              fill: true,
+              // 恒定高度
+              height: 1.1,
+              // 显示在距相机的距离处的属性，多少区间内是可以显示的
+              // distanceDisplayCondition: new Cesium.DistanceDisplayCondition(1000, 10000000),
+              // 是否显示
+              show: true,
+              // 顺序,仅当`clampToGround`为true并且支持地形上的折线时才有效。
+              zIndex: 10
+            }
+          });
+
+          let flag = true;
+          let time = setInterval(() => {
+            flag = !flag
+            that.switch_show(flag);
+          }, 500);
+          setTimeout(() => {
+            clearInterval(time);
+            this.pick_entity.entities.values.forEach((res) => {
+
+              this.pick_entity.entities.remove(res);
+
+            })
+          }, 6000)
+
+
+          // 注意：polygon首尾坐标要一致
+          var polygon = turf.polygon([geojson.coordinates[0]]);
+
+          var centroid = turf.centroid(polygon).geometry.coordinates;
+
+          viewer.camera.flyTo({
+            duration: 1,
+
+            destination: Cesium.Cartesian3.fromDegrees(centroid[0], centroid[1], 3000),
+            // destination: {
+            //     x: -6283267.004204832,
+            //     y: 28123682.896774407,
+            //     z: 23709669.98539126
+            // },
+            orientation: {
+              heading: 6.149339593573709,
+              pitch: -1.539825618847483,
+              roll: 0
+            },
+          });
+
+        }
+      });
+
+
+      store.state.vectorData = arr
+
+
+    },
+    switch_show(flag) {
+      this.pick_entity.entities.values.forEach((res) => {
+        res.show = flag;
+      })
+    },
   },
   beforeCreate() { }, //生命周期 - 创建之前
   created() { }, //生命周期 - 创建完成（可以访问当前this实例）
   beforeMount() { }, //生命周期 - 挂载之前
   mounted() {
+    const that = this;
+    this.$nextTick(() => {
 
-    this.restaurants = this.loadAll();
+      that.pick_entity = new Cesium.CustomDataSource("pick_entity");
+      viewer.dataSources.add(that.pick_entity);
+    }); //生命周期 - 挂在完成
   }, //生命周期 - 挂在完成
   beforeUpdate() { }, //生命周期 - 更新之前
   updated() { }, //生命周期 - 更新之后