Merge branch 'jzl'

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

 <!--
  * @Author: your name
  * @Date: 2022-01-26 10:52:10
- * @LastEditTime: 2024-07-26 10:07:16
+ * @LastEditTime: 2024-08-01 10:20:35
  * @LastEditors: 纪泽龙 jizelong@qq.com
  * @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">
-    <!-- 
-      <div style="float: left;margin-right: 5px;">
-        <div class="hasColorBox">
-          <img src="../../assets/image/bigtyx.svg" alt="">
-          调压箱
-        </div>
-        <div class="hasColorBox">
-          <img src="../../assets/image/bigfmj.svg" alt="">
-          阀门井
+    <div v-if="b" class="pipePressure">
+      <div class="dx" :class="{ active: active }" @click.stop="showAnimate">
+        管道动效
+      </div>
+      <div class="">
+        <div class="hasColorBox" :style="{ color: pipeColor[`1`] }">
+          <div :style="{ backgroundColor: pipeColor[`1`] }"></div>
+          低压管线
         </div>
-        <div class="hasColorBox">
-          <img src="../../assets/image/bigcz.svg" alt="">
-          厂站
+        <div class="hasColorBox" :style="{ color: pipeColor[`2`] }">
+          <div :style="{ backgroundColor: pipeColor[`2`] }"></div>
+          中压管线
         </div>
-        <div class="hasColorBox">
-          <img src="../../assets/image/biguser.svg" alt="">
-          用户
+        <div class="hasColorBox" :style="{ color: pipeColor[`3`] }">
+          <div :style="{ backgroundColor: pipeColor[`3`] }"></div>
+          次高压管线
         </div>
-        <div class="hasColorBox">
-          <img src="../../assets/image/bigjk.svg" alt="">
-          监控
+        <div class="hasColorBox" :style="{ color: pipeColor[`4`] }">
+          <div :style="{ backgroundColor: pipeColor[`4`] }"></div>
+          高压管线
         </div>
-      </div> -->
-    <div class="">
-      <div class="hasColorBox" :style="{ color: pipeColor[`1`] }">
-        <div :style="{ backgroundColor: pipeColor[`1`] }"></div>
-        低压管线
-      </div>
-      <div class="hasColorBox" :style="{ color: pipeColor[`2`] }">
-        <div :style="{ backgroundColor: pipeColor[`2`] }"></div>
-        中压管线
-      </div>
-      <div class="hasColorBox" :style="{ color: pipeColor[`3`] }">
-        <div :style="{ backgroundColor: pipeColor[`3`] }"></div>
-        次高压管线
-      </div>
-      <div class="hasColorBox" :style="{ color: pipeColor[`4`] }">
-        <div :style="{ backgroundColor: pipeColor[`4`] }"></div>
-        高压管线
       </div>
     </div>
-    </div> 
 
-    <div class="mapChange">
+    <div v-if="t" class="mapChange">
       <div :class="{ active: mapStyle }" @click="mapChange(2)">全景地图</div>
       <div :class="{ active: !mapStyle }" @click="mapChange(1)">卫星地图</div>
     </div>
@@ -62,14 +42,30 @@
 <script>
 import { pipeColor } from "@/utils/mapClass/config.js";
 export default {
+  props: {
+    b: {
+      type: Boolean,
+      default: false,
+    },
+    t: {
+      type: Boolean,
+      default: false,
+    },
+  },
   data() {
-    downIcon: true;
+    // downIcon: true;
+
     return {
       pipeColor,
       mapStyle: true,
+      active: true,
     };
   },
   methods: {
+    showAnimate() {
+      this.active = !this.active;
+      this.$emit("showAnimate", this.active);
+    },
     // 更改卫星图
     mapChange(num) {
       if (num == 1) {
@@ -88,14 +84,46 @@ export default {
   width: 130px;
   height: auto;
   // border: 1px solid #a5a5a5;
-  background-color: #112238b3;
+  // background-color: #112238b3;
   position: fixed;
   color: rgb(205, 219, 228);
-  right: 400px;
+  right: 435px;
   bottom: 50px;
   padding: 5px;
   font-size: 14px;
   pointer-events: none;
+
+  .dx {
+    position: absolute;
+    z-index: 9999;
+    margin-left: 15px;
+    height: 32px;
+    top: -27px;
+    left: -4px;
+    // margin-bottom:10px;
+    color: #fff;
+    line-height: 32px;
+    text-align: center;
+    /* background: linear-gradient(86deg, #112238 0%, #086187 62%, #112238 100%);
+  box-shadow: inset 0px 1px 2px 1px #125c9b; */
+    font-size: 14px;
+    padding: 0px 10px;
+    cursor: pointer;
+    background: rgba(31, 106, 215, 0.32);
+    box-sizing: border-box;
+    border: 1px solid #2d64b4;
+    border-radius: 2px;
+    &:hover {
+      // opacity: 0.7;
+    }
+    &.active {
+      background: linear-gradient(180deg, #19d6fe 0%, #1684e5 100%);
+      border-radius: 2px;
+      box-sizing: border-box;
+      border: 1px solid #72c1ff;
+    }
+    pointer-events: auto;
+  }
   // background: rgba(6, 29, 51, 0.8);
   .hasColorBox {
     // border: 1px solid #053b6a;
@@ -114,12 +142,14 @@ export default {
 }
 .mapChange {
   left: 10px;
-  top: 50px;
+  top: -32px;
   color: #fff;
   padding: 5px;
   position: absolute;
   display: flex;
   z-index: 9999;
+  pointer-events: auto;
+
   div {
     width: 128px;
     height: 32px;

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

 <!--
  * @Author: your name
  * @Date: 2022-01-26 20:07:52
- * @LastEditTime: 2024-07-25 17:13:33
+ * @LastEditTime: 2024-08-01 09:48:18
  * @LastEditors: 纪泽龙 jizelong@qq.com
  * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 
@@ -47,7 +47,7 @@
       </div>
     </div> -->
 
-      <template v-if="deviceData.detectorCountList">
+      <template v-if="deviceData.detectorCountList.length>0">
         <div class="foot">
           <div class="thead flex">
             <div class="first">设备类型</div>

zh-baseversion-web/src/utils/mapClass/map.js

 /*
  * @Author: your name
  * @Date: 2022-01-11 13:45:12
- * @LastEditTime: 2024-07-30 17:11:11
+ * @LastEditTime: 2024-08-01 10:21:14
  * @LastEditors: 纪泽龙 jizelong@qq.com
  * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  * @FilePath: /test/hello-world/src/utils/mapClass.js
@@ -1224,7 +1224,7 @@ export class EditorMap {
       path: eval(path),
       strokeWeight: objData.strokeWeight || 3,
       strokeColor: color,
-      strokeOpacity: .1,
+      strokeOpacity: 0.1,
       extData: objData,
       cursor: "pointer",
     });
@@ -1750,7 +1750,7 @@ export class EditorMap {
   // 搜索的管道被点击
   pipeClicked(lnglat) {
     this.searchDevice.lnglat = lnglat;
-    this.map.panTo([lnglat.lng, lnglat.lat]);
+    this.map.panTo([lnglat.lng, lnglat.lat], 0);
     this.searchDevice.iconType == 1;
     this.pipeClick(this.searchDevice, this.searchDevice.com);
     const options = this.searchDevice.getOptions();
@@ -1761,7 +1761,7 @@ export class EditorMap {
   markerClicked(lnglat, com) {
     console.log(this.searchDevice.getExtData());
     this.markerClick(this.searchDevice, com);
-    this.map.panTo(lnglat);
+    this.map.panTo(lnglat, 0);
   }
   clearSearchDevice() {
     if (this.searchDevice) {
@@ -1769,6 +1769,15 @@ export class EditorMap {
       this.searchDevice = null;
     }
   }
+  piprOpacityChange(num) {
+    for (let item in this.pipeArr) {
+      this.pipeArr[item].forEach((pipe) => {
+        const options = pipe.getOptions();
+        pipe.setOptions({ ...options, strokeOpacity: num });
+      }); 
+    }
+    console.log(123)
+  }
   // searchPipeClear() {
   //   const { pipePressure } = this.searchDevice.getExtData();
   //   const color = pipeColor[pipePressure];

zh-baseversion-web/src/utils/mapClass/mapLoca.js

@@ -2,7 +2,7 @@
  * @Author: 纪泽龙 jizelong@qq.com
  * @Date: 2024-07-30 15:09:53
  * @LastEditors: 纪泽龙 jizelong@qq.com
- * @LastEditTime: 2024-07-30 17:41:05
+ * @LastEditTime: 2024-07-31 17:28:44
  * @FilePath: /zh-baseversion-web/src/utils/mapClass/mapLoca.js
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
@@ -31,7 +31,7 @@ export class LocalLine {
     });
     // return this.loca;
   }
-  init(geoJsonArr){
+  init(geoJsonArr) {
     geoJsonArr.forEach((item) => {
       let layer = new Loca.PulseLineLayer({
         // loca,
@@ -40,7 +40,7 @@ export class LocalLine {
         visible: true,
         zooms: [2, 22],
       });
-      layer.d = item.d
+      layer.d = item.d;
       if (!this.layerCompanyArr[item.d.iconType]) {
         this.layerCompanyArr[item.d.iconType] = [];
       }
@@ -69,7 +69,7 @@ export class LocalLine {
       // console.log('this.loca.add', this.layer)
 
       this.loca.add(layer);
-      this.loca.animate.start();
+      this.star();
     });
   }
   show() {
@@ -94,4 +94,11 @@ export class LocalLine {
       });
     }
   }
+  stop() {
+    this.loca.animate.stop();
+
+  }
+  star() {
+    this.loca.animate.start();
+  }
 }

zh-baseversion-web/src/views/bigWindow/components/Bottom.vue

@@ -2,7 +2,7 @@
  * @Author: 纪泽龙 jizelong@qq.com
  * @Date: 2024-07-15 10:26:41
  * @LastEditors: 纪泽龙 jizelong@qq.com
- * @LastEditTime: 2024-07-26 09:37:20
+ * @LastEditTime: 2024-07-31 16:25:42
  * @FilePath: /zh-baseversion-web/src/views/bigWindow/components/Bottom.vue
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 -->
@@ -265,7 +265,9 @@ export default {
             background: url("~@/assets/firstimage/btm-item.png") no-repeat
               bottom center;
             &.active {
-              color: #1ec9e3;
+              // color: #1ec9e3;
+              background: url("~@/assets/firstimage/btm-item-two.png") no-repeat
+                bottom center !important;
             }
             // 最少选中一个
             &.minOne {
@@ -331,7 +333,7 @@ export default {
         // overflow: hidden;
       }
       .child {
-      transition: all 0.5s linear;
+        transition: all 0.5s linear;
         width: 275px;
         height: 32px;
         margin-bottom: 16px;
@@ -339,14 +341,15 @@ export default {
         box-sizing: border-box;
         padding-left: 21px;
         line-height: 32px;
-        color: #fff;
+        color: #5ac8fb;
         border: 1px solid rgba(54, 136, 255, 0.2392);
         cursor: pointer;
 
         &.active {
-          background: rgba(255, 141, 70, 0.29);
+          background: rgba(23, 149, 234, 0.5);
           box-sizing: border-box;
-          border: 1px solid rgba(255, 178, 130, 0.4);
+          border: 1px solid #408AD7;
+          color: #fff;
         }
         &:hover {
           opacity: 0.7;

zh-baseversion-web/src/views/bigWindow/components/Top.vue

@@ -30,9 +30,10 @@
       </div>
       <div class="search flex">
         <div class="input-wrapper flex">
-          <input v-model="searchVal" type="text" />
+          <input v-model="searchVal" type="text" @keyup.enter="searchClick" />
         </div>
         <div @click.stop="searchClick" class="btn-wrapper">搜索</div>
+
       </div>
       <img src="@/assets/firstimage/index-top-line.png" class="bottom-line" />
     </div>
@@ -247,6 +248,7 @@ export default {
     }
 
     .list {
+
       z-index: 9999;
       float: left;
       margin-left: 15px;
@@ -265,9 +267,13 @@ export default {
       box-sizing: border-box;
       border: 1px solid #2d64b4;
       border-radius: 2px;
+      &:hover {
+        // opacity: 0.7;
+      }
     }
 
     .list.active {
+
       /* background: linear-gradient(86deg, #112238 0%, #32a3d3 62%, #112238 100%);
   box-shadow: inset 0px 1px 2px 1px #125c9b; */
       // font-size: 12px;
@@ -276,11 +282,12 @@ export default {
       // box-shadow: inset 0px 0px 10px 1px #0f6ca1;
       // background-size: 100% 100%;
       // background-repeat: no-repeat;
-      background: linear-gradient(180deg, #ffb464 0%, #e96310 100%);
+      background: linear-gradient(180deg, #19d6fe 0%, #1684e5 100%);
       border-radius: 2px;
       box-sizing: border-box;
-      border: 1px solid #ffa065;
+      border: 1px solid #72c1ff;
     }
+
     .list img {
       width: 20px;
       height: 20px;
@@ -364,7 +371,7 @@ export default {
     }
   }
   .device-container {
-    width: 755px;
+    width: 838px;
     max-height: 400px;
     position: absolute;
     background: rgba(2, 41, 81, 0.7);
@@ -385,10 +392,12 @@ export default {
       padding: 0 2px;
       display: flex;
       .a {
-        width: 150px;
+        // width: 150px;
       }
       &:hover {
-        background: linear-gradient(180deg, #ffb464 0%, #e96310 100%);
+        // background: linear-gradient(180deg, #ffb464 0%, #e96310 100%);
+      background: linear-gradient(180deg, #19d6fe 0%, #1684e5 100%);
+
       }
     }
   }

zh-baseversion-web/src/views/bigWindow/index.vue

 <!--
  * @Author: your name
  * @Date: 2022-01-11 13:44:17
- * @LastEditTime: 2024-07-30 17:40:21
+ * @LastEditTime: 2024-08-01 10:15:59
  * @LastEditors: 纪泽龙 jizelong@qq.com
  * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  * @FilePath: /test/hello-world/src/views/Home.vue
 -->
 <template>
   <div class="home bigwindow" @click="windowClick">
-    <div class="goSystem" @click="$router.push('/index')">进入管理系统</div>
     <div id="map"></div>
     <!-- <Center :show="show" :centerData="centerData" /> -->
     <UserCenter
@@ -29,7 +28,6 @@
       :total="centerTotal"
       :pageSize="20"
     />
-    <PipeColor />
     <!-- <PipeSelect
       @transmit="getPipeSelectMessage"
       @closeMediumPressureLine="clearBigWindowsSelectPipe"
@@ -60,11 +58,15 @@
 
     <!-- 左边 -->
     <div class="leftbar" :style="changeLeftBarStyle">
+      <PipeColor :t="true" />
       <leftBar ref="mychild2"></leftBar>
     </div>
 
     <!-- 右边 -->
     <div class="rightbar" :style="changeRightBarStyle">
+      <div class="goSystem" @click="$router.push('/index')">进入管理系统</div>
+      <PipeColor :b="true" @showAnimate="showAnimate" />
+
       <rightBar ref="mychild"></rightBar>
     </div>
     <!-- <img src="../../assets/images/leftbk.svg" alt=""> -->
@@ -525,7 +527,7 @@ export default {
       });
 
       // this.LocalLine = new LocalLine(this.map.map, );
-      this.LocalLine.init(this.geoJsonArr)
+      this.LocalLine.init(this.geoJsonArr);
 
       for (let comp in data) {
         data[comp].forEach((pipe) => {
@@ -535,6 +537,18 @@ export default {
         });
       }
     },
+    // 管道;动效
+
+    showAnimate(bool) {
+      console.log(bool)
+      let num = 1;
+      if (!bool) {
+        num = 1;
+      } else {
+        num = 0.1;
+      }
+      this.map.piprOpacityChange(num)
+    },
     // 设备上图
     addDevice(data, component, show) {
       for (let comp in data) {
@@ -849,7 +863,7 @@ export default {
 .goSystem {
   position: fixed;
   z-index: 9999;
-  top: 50px;
+  top: -32px;
   right: 20px;
   font-size: 14px;
   color: #ffffff;
@@ -861,6 +875,7 @@ export default {
   line-height: 28px;
   text-align: center;
   transition: all 0.2s linear;
+  pointer-events: auto;
 
   &:hover {
     background: url("~@/assets/firstimage/btm-item-active.png") no-repeat bottom