1 管道信息-新增修改时 坐标 数据增加格式校验。

2 调整管道信息，新增行业主管，单位燃气等信息，并在地图上根据中压，高压按照不同颜色展示 功能完成。
3 在首页实现管道检索功能，并能实现点击检索列表某一项 实现地图管道定位，高亮，并打开 管道信息界面。

zh-baseversion-web/src/components/bigWindow/MediumPressureLine.vue

+<!--
+ * @Author: your name
+ * @Date: 2022-01-27 14:25:45
+ * @LastEditTime: 2022-02-28 11:35:31
+ * @LastEditors: Please set LastEditors
+ * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ * @FilePath: /hello-world/src/views/components/User.vue
+-->
+<template>
+  <div class="user-wrapper">
+    <div class="title">{{ companyType[deviceData.companyType] }}</div>
+    <div class="close" @click="close">
+      <!-- <img src="@/assets/mapImages/closeBtn.png" alt="" /> -->
+      <i class="el-icon-close" style="font-size:20px;color:#5dfefe;"></i>
+    </div>
+
+    <div class="group flex first">
+      <div class="first once left">管道名称：</div>
+      <div class="right pipeAddr right zzz">{{ deviceData.pipeName }}</div>
+    </div>
+
+    <div class="group flex">
+      <div class="left first">管道长度：</div>
+      <div class="right zzz">{{ deviceData.pipeLength }}米</div>
+      <div class="left">管径：</div>
+      <div class="right last">{{ deviceData.pipeDiameter }}</div>
+    </div>
+
+    <!-- <div class="group flex">
+
+    </div> -->
+
+    <div class="group flex">
+      <div class="left first">管道压力：</div>
+      <div :title="deviceData.pipePressure" class="right zzz">
+        {{ deviceData.pipePressure }}
+      </div>
+      <div class="left">所属公司：</div>
+      <div class="right last zzz">{{ companyType[deviceData.companyType] }}</div>
+    </div>
+
+    <div class="group flex">
+      <div class="first left">管道材质：</div>
+      <div class="right">{{ deviceData.pipeMaterial }}</div>
+      <div class="left">管道埋深：</div>
+      <div class="right last">{{ deviceData.pipeDepth }}米</div>
+    </div>
+
+    <div class="group flex">
+      <div class="left first">管道走向：</div>
+      <div class="right zzz" :title="deviceData.pipeTrend">{{ deviceData.pipeTrend }}</div>
+      <div class="left">权属单位：</div>
+      <div :title="deviceData.powerCompany" class="right last zzz">
+        {{ deviceData.powerCompany }}
+      </div>
+    </div>
+    <div class="group flex">
+      <div class="first left">建设年代：</div>
+      <div class="right">{{ deviceData.buildyear }}</div>
+      <div class="left">建设单位：</div>
+      <div class="last right zzz" :title="deviceData.buildCompany">{{ deviceData.buildCompany }}</div>
+    </div>
+
+    <div class="group flex">
+      <div class="first once left">管道位置：</div>
+      <div
+        v-unValue
+        :title="deviceData.pipeAddr"
+        class="last pipeAddr right zzz"
+      >
+        {{ deviceData.pipeAddr }}
+      </div>
+    </div>
+    
+    <div class="group flex" v-show="isVisibleMethod">
+      <div class="left">详细地址：</div>
+      <div class="right pipeAddr last zzz">{{ deviceData.detaildAddress }}</div>
+    </div>
+
+    <div class="group flex" v-show="isVisibleMethod">
+      <div class="first left">主管部门：</div>
+      <div class="right zzz">{{ deviceData.indRegAuth }}</div>
+      <div class="left">主管负责人：</div>
+      <div class="right last zzz">{{ deviceData.indRegAuthPer }}</div>
+    </div>
+
+
+    <div class="group flex" v-show="isVisibleMethod">
+      <div class="first left">主管负责电话：</div>
+      <div class="right zzz">{{ deviceData.indRegAuthPerCon }}</div>
+      <div class="left">重点燃气使用：</div>
+      <div class="right last zzz">{{ deviceData.keyAreasGasUsage }}</div>
+    </div>
+
+
+    <div class="group flex" v-show="isVisibleMethod">
+      <div class="first left">燃气公司：</div>
+      <div class="right zzz">{{ deviceData.affGasCom }}</div>
+      <div class="left">燃气安检人：</div>
+      <div class="right last zzz">{{ deviceData.affGasComSecPer }}</div>
+    </div>
+
+    <div class="group flex" v-show="isVisibleMethod">
+      <div class="first left">安检人电话：</div>
+      <div class="right zzz">{{ deviceData.affGasComSecPerCon }}</div>
+      <div class="left">安检时间：</div>
+      <div class="right last zzz">{{ deviceData.secCheckTime }}</div>
+    </div>
+
+    <div class="group flex" v-show="isVisibleMethod">
+      <div class="first left">燃气负责人：</div>
+      <div class="right zzz">{{ deviceData.unitGasUserRes }}</div>
+      <div class="left">负责人电话：</div>
+      <div class="right last zzz">{{ deviceData.unitGasUserResCon }}</div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { companyType, pipePressure } from "@/utils/mapClass/config.js";
+export default {
+  data() {
+    return {
+      companyType,
+      pipePressure,
+      isClose: false
+    };
+  },
+  computed:{
+    prodTest(){
+      return this.vueRoot.$store.state.user.systemSetting.prod_test
+    },
+    company(){
+       return this.vueRoot.$store.state.bigWindowCompany.company;
+    }
+
+  },
+  mounted(){
+    // 如果不是测试，而是真数据，就要用帧数据的东西
+    if(this.prodTest !="test"){
+      this.companyType={};
+      this.company.forEach(item=>{
+        this.companyType[item.conpanyId] = item.companyName;
+      })
+    }
+  },
+  methods: {
+    close() {
+      // 关闭前先把颜色改回来 
+      this.mapClass.infowindowClose();
+    },
+    isVisibleMethod(){
+      return deviceData.pipePressure == "中压"
+    }
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.user-wrapper {
+  box-shadow: 0px 0px 10px #54e0ef inset;
+  background-color: #071738;
+  padding: 10px;
+  position: relative;
+  width: 500px;
+  border-radius: 7px;
+  .title {
+    font-size: 14px;
+    line-height: 14px;
+    color: #ffffff;
+  }
+  .close {
+    position: absolute;
+    right: 10px;
+    top: 5px;
+    cursor: pointer;
+  }
+  .group {
+    border-top: none;
+    height: 28px;
+    font-size: 14px;
+    line-height: 28px;
+    color: #ffffff;
+    &.first {
+      margin-top: 10px;
+    }
+    div {
+      flex: 1;
+    }
+    .left {
+      text-align: right;
+    }
+    .right {
+      box-sizing: border-box;
+      text-align: left;
+      padding: 0 1em;
+    }
+    .last {
+      border: none;
+    }
+    .once {
+      flex: 1;
+    }
+    .pipeAddr {
+      flex: 3;
+      padding: 0 3em 0 1em;
+    }
+  }
+  .flex {
+    display: flex;
+    justify-content: space-between;
+  }
+}
+</style>

zh-baseversion-web/src/components/bigWindow/PipeSelect.vue

+<!--
+ * @Author: your name
+ * @Date: 2022-01-26 10:52:10
+ * @LastEditTime: 2022-02-17 10:11:35
+ * @LastEditors: Please set LastEditors
+ * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ * @FilePath: /test/hello-world/src/components/PipeColor.vue
+-->
+<template>
+  <div>
+    <div class="pipePressure"  :style="{ pointerEvents: dynamicPointerEvents }">
+      <div class="container" id="div1">
+          <div class="searchbar1">
+              <form> 
+                <table>
+                <li v-for="data in newDatalist" :key="data.id" @click="goPage(data)">
+                    {{data.pipeName}}
+                </li>
+                </table> 
+              </form>
+          </div>
+      </div>
+      <div class="input-group">
+        <input class="input-field" type="text" v-model="inputText" placeholder="请输入管道名称...">
+        <button class="close"  @click="handleClick">&times;</button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script> 
+import {
+  getPipeForSelect
+} from "@/api/bigWindow/getDevice";
+export default {
+  data(){
+    return{
+      downIcon: true,
+      inputText:"",
+      datalist:[],	//原始数据
+      newDatalist:[],
+      rowsToShow: 3, // 默认显示的行数
+      maxRows: 6, // 最多显示的行数
+      dynamicPointerEvents: 'none',
+      }
+    },
+    created(){
+      this.fetchData();
+    },
+    methods: {
+      fetchData(){
+        getPipeForSelect().then((res) => {
+          if (res.data){
+            this.datalist = res.data
+          }
+        })
+      },
+       goPage:function(data){
+        var path = data.path.replaceAll("[[","").replaceAll("]]","").replaceAll("],["," ");
+        var id = data.pipeId;
+        let arrArea = path.split(" ")
+        let centerLength = null;
+        if (arrArea.length % 2 == 0) {
+          centerLength = arrArea.length / 2;
+        } else {
+          centerLength = (arrArea.length + 1) /2;
+        }
+        if (centerLength != null) {
+        this.$emit('transmit', arrArea[centerLength],id)
+        } else {
+          alert("数据异常")
+        }
+      },
+      handleClick(){
+        this.newDatalist=[];
+        this.inputText = "";
+        this.$emit('closeMediumPressureLine');
+      }
+    },
+    watch:{//监听输入框的变化
+          inputText:function(newText){
+              this.dynamicPointerEvents = newText ? 'auto' : 'none';
+
+              if(newText.length>0){
+                  this.newDatalist.splice(0,this.newDatalist.length);//清空之前数组
+                  for(let value of this.datalist){
+                      if(value.pipeName.indexOf(newText)>-1){// 可以直接用indexOf(属性)
+                          this.newDatalist.push(value);//一定要加this
+                      }
+                  }
+              }else{
+                  this.newDatalist=[];//输入框为空，等于原始数据
+              }
+          }
+      },
+};
+</script>
+
+<style lang="scss" scoped>
+
+.pipePressure {
+  width: 210px;
+  height: auto;
+  position: fixed;
+  color: rgb(205, 219, 228);
+  left: 660px;
+  bottom: 50px;
+  padding: 5px;
+} 
+form {
+    position: relative;
+    width: 300px;
+    margin: 0 auto;
+}
+input {
+    width: 100%;
+    height: 42px;
+    padding-left: 13px;
+} 
+.pipePressure input {
+    border: 2px solid #7BA7AB;
+    border-radius: 5px;
+    background: #f9f0da1f;
+    color: #9E9C9C;
+}
+li{
+    text-align: left;
+    width:100%;
+    background: #f9f0da0c;
+    list-style: none;
+}
+        
+.container {
+    height: 150px;
+    overflow-y: auto;
+    overflow-x: hidden;
+    display:flex;
+    flex-direction: column-reverse;
+}
+
+.input-group {
+  position: relative;
+  display: inline-block;
+  pointer-events: auto;
+}
+
+.input-field {
+  padding-right: 40px; /* Make space for the button */
+  width: 200px; /* Adjust width as needed */
+}
+
+.close {
+  font-size: 18px;
+  font-weight: bold;
+  color: #000;
+  text-shadow: 0 1px 0 #fff;
+  opacity: 0.5;
+  float: right;
+  margin-left: 10px;
+  cursor: pointer;
+
+  position: absolute;
+  top: 0;
+  right: 0;
+  height: 100%; /* Match height with input */
+  width: 40px; /* Adjust width as needed */
+}
+ 
+.close:hover {
+  opacity: 1;
+}
+
+</style>