搜索框修改，左右列表可以隐藏展示

src/views/bigScreen/SearchComponent/index.vue

@@ -1,22 +1,80 @@
 <template>
-  <div class="search-div">
+  <div :class="`search-div ${hiddenDiv? 'hidden-search-div': ''}`">
     <div class="search-input-div">
-      <el-input v-model="searchValue" placeholder="请输入地名或经纬度（经纬度以逗号隔开)"></el-input>
+      <el-input 
+        v-model="searchValue"
+        placeholder="请输入地名或经纬度（经纬度以逗号隔开)"
+        @focus="handleFocus"
+      ></el-input>
     </div>
-    <div class="search-button">
+    <div class="search-button" @click="search">
       <div class="search-icon"></div>
     </div>
+    <div class="result-div" v-if="showSearchResult">
+      <div class="result-item" v-for="(item, index) in searchResult" @click="toPosition(item)">
+        <div class="level-0">{{ item.id }}</div>
+        <div class="level-1">{{ item.county }}</div>
+        <div class="level-2">{{ item.street }}</div>
+      </div>
+      <el-empty :image-size="50" v-if="searchResult.length == 0"></el-empty>
+    </div>
   </div>
 </template>
 <script>
+import axios from 'axios';
+import { transformGCJ2WGS } from '@/views/bigScreen/util.ts'
 export default {
    name:'',
+   props: ['hiddenDiv'],
    data() {
       return {
-        searchValue: ''
+        searchValue: '',
+        searchResult: [],
+        showSearchResult: false,
       }
    },
    methods:{
+    search(){
+      if (this.searchValue.match(/^([-+]?(?:[1-8]?\d(\.\d+)?|90(\.0+)?)),\s*([-+]?(?:1[0-7]\d(\.\d+)?|180(\.0+)?))$/)) {
+        if(this.searchValue.indexOf(', ') !== -1){
+          let [latitude, longitude] = this.searchValue.split(', ');
+          this.$emit('cameraFly',longitude,latitude)
+        }else{
+          let [latitude, longitude] = this.searchValue.split(',');
+          this.$emit('cameraFly',longitude,latitude)
+        }
+      }else{
+        axios.get(
+          'https://restapi.amap.com/v5/place/text?&key=ee7f561fae9249aeb971bcc661083438&keywords=' +
+            this.searchValue +
+            '&region=371300&citylimit=true&page_num=1&page_size=10',
+        )
+        .then((res) => {
+          if (res.data.info == 'OK') {
+            this.searchResult = [];
+            res.data?.pois?.forEach((item, index) => {
+              let obj = {
+                id: item.name,
+                county: item.cityname,
+                street: item.adname,
+                location: item.location?.split(','),
+              };
+              this.searchResult.push(obj);
+            });
+            this.showSearchResult = true;
+          }
+        });
+      }
+    },
+    handleFocus(){
+      this.showSearchResult = false
+    },
+    toPosition(item){
+      let newCoord = transformGCJ2WGS(item.location[1], item.location[0]);
+      if (newCoord) {
+        this.$emit('cameraFly', newCoord.lon, newCoord.lat);
+      }
+    }
    },
 }
 </script>
@@ -29,6 +87,7 @@ export default {
   height: 36px;
   display: flex;
   z-index: 1;
+  transition: 0.5s;
   .search-input-div{
     width: 309px;
     height: 36px;
@@ -41,7 +100,7 @@ export default {
       background: none;
       border: 0px;
       height: 36px;
-      line-height: 36px;
+      line-height: 13px;
       font-family: Microsoft YaHei;
       font-weight: 400;
       font-size: 13px;
@@ -65,5 +124,52 @@ export default {
       transform: translate(-3px);
     }
   }
+  .result-div{
+    position: absolute;
+    top: 40px;
+    width: 283px;
+    // height: 200px;
+    background-color: #014B4D;
+    border: 1px solid #038E90;
+    border-bottom-right-radius: 6px;
+    border-bottom-left-radius: 6px;
+    .result-item {
+      width: 100%;
+      height: 38px;
+      color: #e1ecf8;
+      display: flex;
+      line-height: 38px;
+      padding: 0px 12px;
+      font-size: 14px;
+      .search-icon {
+        width: 28px;
+        height: 36px;
+      }
+      .level-0 {
+        max-width: 160px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+      .level-1 {
+        margin: 0px 6px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+      .level-2 {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+      &:hover {
+        cursor: pointer;
+        background: #038E90;
+      }
+    }
+  }
+}
+.hidden-search-div{
+  left: 136px;
 }
 </style>

src/views/bigScreen/index.vue

@@ -11,18 +11,24 @@
     <div class="left-border"></div>
     <div class="right-border"></div>
     <div class="footer"></div>
-    <div class="left-content">
+    <div :class="`left-content ${leftHidden? 'hidden-left': ''}`">
+      <div :class="`show-hidden-div ${leftHidden? 'hidden-div': 'show-div'}`">
+        <div :class="`show-hidden-button ${leftHidden? 'hidden-button': 'show-button'}`" @click="leftHidden = !leftHidden"></div>
+      </div>
       <Forewarning @openForewarningModal="openForewarningModal"/>
       <Person />
     </div>
-    <div class="right-content">
+    <div :class="`right-content ${rightHidden? 'hidden-right': ''}`">
+      <div :class="`show-hidden-div ${rightHidden? 'hidden-div': 'show-div'}`">
+        <div :class="`show-hidden-button ${rightHidden? 'hidden-button': 'show-button'}`" @click="rightHidden = !rightHidden"></div>
+      </div>
       <Monitor />
       <ResponseResource />
     </div>
 
     <InfoModal  v-if="showForewarningModal" :info="forewarningInfo" @closeForewarningModal="closeForewarningModal"/>
 
-    <SearchComponent />
+    <SearchComponent :hiddenDiv="leftHidden" @cameraFly="cameraFly"/>
   </div>
 </template>
 
@@ -58,7 +64,9 @@ export default {
         picture:'',
         detailed_address: '',
         start_time: '',
-      }
+      },
+      leftHidden: false,
+      rightHidden: false,
     };
   },
   methods: {
@@ -75,7 +83,16 @@ export default {
       this.forewarningInfo.detailed_address = item.detailed_address
       this.forewarningInfo.start_time = item.start_time
       this.showForewarningModal = true
+      this.cameraFly(item.longitude,item.latitude)
     },
+    cameraFly(lng,lat){
+      window.globalmap.flyToPoint({
+        lat: lat,
+        lng: lng,
+        alt: 1000,
+        duration: 3, 
+      })
+    }
   },
   mounted() {
     
@@ -176,6 +193,42 @@ export default {
     left: 30px;
     width: 425px;
     z-index: 1;
+    opacity: 1;
+    transition: 0.5s;
+    .show-hidden-div{
+      position: absolute;
+      height: 822px;
+      width: 25px;
+      background-size: 100% 100%;
+      right: -25px;
+      .show-hidden-button{
+        width: 35px;
+        height: 54px;
+        background-size: 100% 100%;
+        position: absolute;
+        top: 405px;
+        cursor: pointer;
+      }
+      .show-button{
+        background-image: url('/bigScreen/go_left_button.png');
+        left: 9px;
+      }
+      .hidden-button{
+        background-image: url('/bigScreen/go_right_button.png');
+        right: 9px;
+      }
+    }
+    .show-div{
+      background-image: url('/bigScreen/go_left.png');
+    }
+    .hidden-div{
+      background-image: url('/bigScreen/go_right.png');
+      right: -65px;
+    }
+  }
+  .hidden-left{
+    left: -428px;
+    opacity: 1;
   }
   .right-content{
     width: 425px;
@@ -186,6 +239,42 @@ export default {
     background-image: url('/bigScreen/right_backgorund.png');
     background-size: 100% 100%;
     z-index: 1;
+    opacity: 1;
+    transition: 0.5s;
+    .show-hidden-div{
+      position: absolute;
+      height: 853px;
+      width: 25px;
+      background-size: 100% 100%;
+      left: -25px;
+      .show-hidden-button{
+        width: 35px;
+        height: 54px;
+        background-size: 100% 100%;
+        position: absolute;
+        top: 421px;
+        cursor: pointer;
+      }
+      .show-button{
+        background-image: url('/bigScreen/go_right_button.png');
+        right: 9px;
+      }
+      .hidden-button{
+        background-image: url('/bigScreen/go_left_button.png');
+        left: 9px;
+      }
+    }
+    .show-div{
+      background-image: url('/bigScreen/go_right.png');
+    }
+    .hidden-div{
+      background-image: url('/bigScreen/go_left.png');
+      left: -65px;
+    }
+  }
+  .hidden-right{
+    right: -429px;
+    opacity: 1;
   }
 }
 </style>

src/views/bigScreen/util.ts

@@ -0,0 +1,40 @@
+//  火星坐标系GCJ02转地球坐标系WGS84
+var PI = 3.14159265358979324;
+export function transformGCJ2WGS(gcjLat, gcjLon) {
+  let d = delta(gcjLat, gcjLon)
+  return {
+    'lat': gcjLat - d.lat,
+    'lon': gcjLon - d.lon
+  }
+}
+
+function delta(lat, lon) {
+  let a = 6378245.0 //  a: 卫星椭球坐标投影到平面地图坐标系的投影因子。
+  let ee = 0.00669342162296594323 //  ee: 椭球的偏心率。
+  let dLat = transformLat(lon - 105.0, lat - 35.0)
+  let dLon = transformLon(lon - 105.0, lat - 35.0)
+  let radLat = lat / 180.0 * PI
+  let magic = Math.sin(radLat)
+  magic = 1 - ee * magic * magic
+  let sqrtMagic = Math.sqrt(magic)
+  dLat = (dLat * 180.0) / ((a * (1 - ee)) / (magic * sqrtMagic) * PI)
+  dLon = (dLon * 180.0) / (a / sqrtMagic * Math.cos(radLat) * PI)
+  return {
+    'lat': dLat,
+    'lon': dLon
+  }
+}
+function transformLat(x, y) {
+  let ret = -100.0 + 2.0 * x + 3.0 * y + 0.2 * y * y + 0.1 * x * y + 0.2 * Math.sqrt(Math.abs(x))
+  ret += (20.0 * Math.sin(6.0 * x * PI) + 20.0 * Math.sin(2.0 * x * PI)) * 2.0 / 3.0
+  ret += (20.0 * Math.sin(y * PI) + 40.0 * Math.sin(y / 3.0 * PI)) * 2.0 / 3.0
+  ret += (160.0 * Math.sin(y / 12.0 * PI) + 320 * Math.sin(y * PI / 30.0)) * 2.0 / 3.0
+  return ret
+}
+function transformLon(x, y) {
+  let ret = 300.0 + x + 2.0 * y + 0.1 * x * x + 0.1 * x * y + 0.1 * Math.sqrt(Math.abs(x))
+  ret += (20.0 * Math.sin(6.0 * x * PI) + 20.0 * Math.sin(2.0 * x * PI)) * 2.0 / 3.0
+  ret += (20.0 * Math.sin(x * PI) + 40.0 * Math.sin(x / 3.0 * PI)) * 2.0 / 3.0
+  ret += (150.0 * Math.sin(x / 12.0 * PI) + 300.0 * Math.sin(x / 30.0 * PI)) * 2.0 / 3.0
+  return ret
+}