解决冲突

screen-demo/src/views/templateInstance.vue

@@ -23,45 +23,50 @@
     </component>
 
     <div class="another-container">
-      <el-cascader placeholder="选择省市" :options="trees" filterable  @change="setValue" :show-all-levels="false"></el-cascader>
-      <div></div>
+      <el-cascader
+          v-model="clickTree"
+          placeholder="选择省市"
+          :options="trees"
+          filterable
+          popper-class="mzfs-cascader"
+          @change="setValue"
+          :show-all-levels="false"
+      ></el-cascader>
       <div class="input-container">
-        <el-input placeholder="请输入关键词" v-model="input3" class="input-with-select" @focus="open=true">
-          <el-button slot="append" icon="el-icon-search" @click="keywordPoint(input3)"></el-button>
+        <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>
+          <template #prepend></template>
         </el-input>
-
-
-        <div class="router-wraps" v-if="open" style="top: calc(100% + 2px); margin-top: 4px; left: 117px;">
-          <div style="width: 90%"><!---->
-            <el-input placeholder="请输入起点" v-model="start" @focus="focus1(0)">
-            </el-input>
-            <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>
+      <div  class="router-wraps" v-if="open" >
+        <div style="width: 90%"><!---->
+          <el-input placeholder="请输入起点" v-model="start" @focus="focus1(0)">
+          </el-input>
+          <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>
     </div>
 
-
     <div class="left-con">
       <div class="table-container border-k">
         <div class="jl-tit">今日告警</div>
@@ -301,12 +306,12 @@ export default {
     };
   },
   mounted() {
-    this.echarts1q()
+    this.selfHistory()
     this.selectcounty(0);
     this.oneEchart();
     // this.twochart();
+    this.echarts1q()
     this.btnMethod(0)
-
     this.echarts3q()
     this.echarts4q()
     this.treeCitys()
@@ -385,6 +390,10 @@ export default {
         console.log(res)
       })
     },
+    selfHistory(){
+      //页面初始m, 历史城市数组=接口返回
+      this.history.navigation.currentCity = null;
+    },
     //根据地址去落点
     keywordPoint(points){
       console.log(points)
@@ -2471,4 +2480,104 @@ progress::-webkit-progress-value {
   right: 325px;
   z-index: 99;
 }
+.another-container {
+  display: flex;
+  // background: url('@/assets/images/cityPicker.png') 0 0 no-repeat;
+  background-size: 100% 100%;
+  position: fixed;
+  left: 320px; /* 调整这里的距离来控制第二个 div 与第一个 div 的间距 */
+  top: 50.9842px;
+  transform: translateY(-50%);
+  color: #000; /* 设置第二个 div 的文字颜色 */
+  // background-color: rgb(97, 187, 238); /* 设置第二个 div 的背景颜色 */
+  width: 368px; /* 设置第二个 div 的宽度 */
+  height: 34px; /* 设置第二个 div 的高度 */
+  z-index: 1003;
+  .cascader{
+    background: #123493 !important;
+    .el-cascader-node.in-active-path,
+    .el-cascader-node.is-active,
+    .el-cascader-node.is-selectable.in-checked-path {
+      color: #4e5ef1;
+    }
+  }
+  .el-cascader{
+    // background: url('@/assets/images/input_left.png') 0 0 no-repeat;
+    width:35%;
+    ::v-deep .el-input .el-input__inner{
+      border-radius: 9px;
+      border: 1px solid #B1DEFD;
+      background-image: linear-gradient(to bottom, #132132,#3361A5) !important;
+    }
+    ::v-deep .el-input .el-input__inner::-webkit-input-placeholder{
+      color: #fff;
+    }
+  }
+  .input-container{
+    position: relative;
+    left: -3%;
+    top: 2%;
+    z-index: -1;
+    ::v-deep .el-input .el-input__inner{
+      color: #fff;
+      border-radius: 9px;
+      background-image: linear-gradient(to bottom, #132132,#3361A5) !important;
+      border: 1px solid #B1DEFD;
+    }
+    ::v-deep .el-input-group__append{
+      border: none !important;
+      background-color:none !important;
+      background: none !important;
+    }
+    ::v-deep .el-button{
+      position: relative;
+      right:1102%;
+      .el-icon-search{
+        color: #fff;
+      }
+      .el-icon-search::after{
+        content:'';
+        position: relative;
+        left:75%;
+        border: 1px solid #627D95;
+        width: 1px;
+        height: 2px;
+      }
+    }
+    .nav{
+      position: absolute;
+      background: url('@/assets/images/nav.png') 0px 0px no-repeat;
+      background-size: 100% 100%;
+      width: 15px;
+      height: 15px;
+      right: 135%;
+      color: #fff;
+      z-index: 30;
+    }
+  }
+}
+
+.router-wraps{
+  position: absolute;
+  width: 60%;
+  top: 50px;
+  left: 100px;
+  ::v-deep .el-input .el-input__inner{
+    color: #fff;
+    border-radius: 9px;
+    background-image: linear-gradient(to bottom, #132132,#3361A5) !important;
+    border: 1px solid #B1DEFD;
+  }
+  ::v-deep .el-input-group__append{
+    border: none !important;
+    background-color:none !important;
+    background: none !important;
+  }
+  .el-button{
+    color: #fff;
+    border-radius: 9px;
+    background-image: linear-gradient(to bottom, #132132,#3361A5) !important;
+    border: 1px solid #B1DEFD;
+  }
+}
 </style>