UI-更改搜索固定样式

src/views/datacenter.vue

@@ -6,31 +6,27 @@
     <!--主体-->
     <div class="visual-body">
       <!-- 左侧 -->
-      <div class="leftbar w-10" ref="left" style="width: 13rem !important">
+      <div class="leftbar w-10" ref="left" style="width:12rem !important;height: 80vh;overflow-y: hidden;">
         <div class="forthis">
           <dv-border-box-13
             backgroundColor="rgba(12, 19, 38, .90)"
-            style="padding-bottom: 1rem"
+            style="padding-bottom: 1rem;height: 80vh;"
           >
             <img
               src="../assets/images/integrated/light.png"
               style="width: 100%; margin-top: 0.4rem"
             />
-
-            <div class="i-list-con h-78">
-              <div class="i-list-con h-65" v-show="showSearch == true">
-                <div class="head-container" v-show="showSearch == true">
-                <el-input
-                  v-model="searchName"
-                  placeholder="请输入名称"
-                  @blur="searchByName()"
-                  clearable
-                  size="small"
-                  prefix-icon="el-icon-search"
-                  style="margin-bottom: 20px"
-                />
-              </div>
-              </div>
+            <div class="sj-search" v-show="showSearch">
+              <el-input
+                v-model="searchName"
+                placeholder="请输入名称"
+                @blur="searchByName()"
+                clearable
+                size="small"
+                prefix-icon="el-icon-search"
+              />
+            </div>
+            <div class="i-list-con" style="height: 71vh;">
               <div class="d-l-con-icon">
                 <div
                   class="icon-con"
@@ -54,7 +50,11 @@
         </div>
       </div>
       <!-- 地图 -->
-      <supermap ref="supermap" style="width: 100%; height: 100vh" @sewageOutletClick="sewageOutletClick"></supermap>
+      <supermap
+        ref="supermap"
+        style="width: 100%; height: 100vh"
+        @sewageOutletClick="sewageOutletClick"
+      ></supermap>
       <!--      <button @click="showEventInfo1" style="position: absolute; right: 50%;top: 45%;z-index: 1000;">弹层事件演示用按钮-->
       <!--      </button>-->
       <!-- 右侧 -->
@@ -338,22 +338,22 @@ export default {
     fireControlViewList() {
       let that = this;
       fireControlViewList().then(function (res) {
-        for (let i=1;i<res.data.length;i++){
+        for (let i = 1; i < res.data.length; i++) {
           that.resourcesList.push(res.data[i]);
         }
         //截取data.resourceTable字段中“_”分隔符最后一个作为关键字,重新拼接成前端需要的图标:class,格式sj-icon-xxxx,将其set回原数组
         that.resourcesList.forEach(function (data, index) {
-            let icon =
-              "sj" +
-              "-" +
-              "icon" +
-              "-" +
-              data.type.replaceAll("_", "-").replaceAll("@", "-");
-            console.log("icon_" + (index + 1) + "=", icon);
-            that.$set(that.resourcesList[index], "icon", icon);
+          let icon =
+            "sj" +
+            "-" +
+            "icon" +
+            "-" +
+            data.type.replaceAll("_", "-").replaceAll("@", "-");
+          console.log("icon_" + (index + 1) + "=", icon);
+          that.$set(that.resourcesList[index], "icon", icon);
 
-            //每个图标对应固定颜色
-            that.$set(that.resourcesList[index], "bg", getIconBg(icon));
+          //每个图标对应固定颜色
+          that.$set(that.resourcesList[index], "bg", getIconBg(icon));
           // if(index < 5){
           //   // that.fireControlViewPoint(data.type, 'undefined');
           //   that.fireControlViewPoint(data.type, '所有');
@@ -480,8 +480,8 @@ export default {
           "sj-icon-map-centerdata-t-firecontrol-basic-linkage-force";
         markersMap.lng = item.longitude;
         markersMap.lat = item.latitude;
-        markersMap.click="sewageOutletClick"
-        markersMap.parameter=item
+        markersMap.click = "sewageOutletClick";
+        markersMap.parameter = item;
         markersMap.bindPopupHtml =
           '<div class="map-tip">' +
           "<span>" +
@@ -510,8 +510,8 @@ export default {
         markersMap.icon = "sj-icon-map-centerdata-t-firecontrol-fire-force";
         markersMap.lng = item.longitude;
         markersMap.lat = item.latitude;
-        markersMap.click="sewageOutletClick"
-        markersMap.parameter=item
+        markersMap.click = "sewageOutletClick";
+        markersMap.parameter = item;
         markersMap.bindPopupHtml =
           '<div class="map-tip">' +
           "<span>" +
@@ -557,8 +557,8 @@ export default {
         markersMap.icon = "sj-icon-map-centerdata-t-forest-waterintake";
         markersMap.lng = item.longitude;
         markersMap.lat = item.latitude;
-        markersMap.click="sewageOutletClick"
-        markersMap.parameter=item
+        markersMap.click = "sewageOutletClick";
+        markersMap.parameter = item;
         markersMap.bindPopupHtml =
           '<div class="map-tip">' +
           "<span>" +
@@ -606,8 +606,8 @@ export default {
         markersMap.icon = "sj-icon-map-centerdata-t-forest-watercrane";
         markersMap.lng = item.longitude;
         markersMap.lat = item.latitude;
-        markersMap.click="sewageOutletClick"
-        markersMap.parameter=item
+        markersMap.click = "sewageOutletClick";
+        markersMap.parameter = item;
         markersMap.bindPopupHtml =
           '<div class="map-tip">' +
           "<span>" +
@@ -663,8 +663,8 @@ export default {
         markersMap.icon = icon;
         markersMap.lng = item.longitude;
         markersMap.lat = item.latitude;
-        markersMap.click="sewageOutletClick"
-        markersMap.parameter=item
+        markersMap.click = "sewageOutletClick";
+        markersMap.parameter = item;
         markersMap.bindPopupHtml =
           '<div class="map-tip">' +
           "<span>" +
@@ -711,8 +711,8 @@ export default {
           "sj-icon-map-centerdata-t-firecontrol-fire-key-places";
         markersMap.lng = item.longitude;
         markersMap.lat = item.latitude;
-        markersMap.click="sewageOutletClick"
-        markersMap.parameter=item
+        markersMap.click = "sewageOutletClick";
+        markersMap.parameter = item;
         markersMap.bindPopupHtml =
           '<div class="map-tip">' +
           "<span>" +
@@ -761,8 +761,8 @@ export default {
           "sj-icon-map-centerdata-t-firecontrol-fire-pressure-sensor";
         markersMap.lng = item.longitude;
         markersMap.lat = item.latitude;
-        markersMap.click="sewageOutletClick"
-        markersMap.parameter=item
+        markersMap.click = "sewageOutletClick";
+        markersMap.parameter = item;
         markersMap.bindPopupHtml =
           '<div class="map-tip">' +
           "<span>" +
@@ -808,8 +808,8 @@ export default {
         markersMap.icon = "sj-icon-map-centerdata-t-firecontrol-foam-liquid";
         markersMap.lng = item.longitude;
         markersMap.lat = item.latitude;
-        markersMap.click="sewageOutletClick"
-        markersMap.parameter=item
+        markersMap.click = "sewageOutletClick";
+        markersMap.parameter = item;
         markersMap.bindPopupHtml =
           '<div class="map-tip">' +
           "<span>" +
@@ -856,8 +856,8 @@ export default {
           "sj-icon-map-centerdata-t-firecontrol-fulltime-station";
         markersMap.lng = item.longitude;
         markersMap.lat = item.latitude;
-        markersMap.click="sewageOutletClick"
-        markersMap.parameter=item
+        markersMap.click = "sewageOutletClick";
+        markersMap.parameter = item;
         markersMap.bindPopupHtml =
           '<div class="map-tip">' +
           "<span>" +
@@ -907,8 +907,8 @@ export default {
           "sj-icon-map-centerdata-t-firecontrol-other-linkage-force";
         markersMap.lng = item.longitude;
         markersMap.lat = item.latitude;
-        markersMap.click="sewageOutletClick"
-        markersMap.parameter=item
+        markersMap.click = "sewageOutletClick";
+        markersMap.parameter = item;
         markersMap.bindPopupHtml =
           '<div class="map-tip">' +
           "<span>" +
@@ -962,7 +962,7 @@ export default {
       return markersMap;
     },
     sewageOutletClick(data) {
-      console.log(data)
+      console.log(data);
       const params = Object.assign({});
       params.longitude = data.longitude;
       params.latitude = data.latitude;