gis地图样式修改的差不多了，要把功能完善一下

gassafety-web/src/assets/styles/gassafety.scss

@@ -387,3 +387,9 @@
     height: 140px !important;
   }
 }
+
+.ddd {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}

gassafety-web/src/components/PopWindowGis/lineInfoWindow.vue

 <template>
   <div class="wrapper">
     <div class="top display-default">
-      <div class="left text">{{ obj.pipeName }}</div>
+      <div class="left text ddd" :title="obj.pipeName">{{ obj.pipeName }}</div>
       <div class="right text">
         <img @click="close" src="../../assets/images/closeBtn.png" alt="" />
       </div>
@@ -34,7 +34,6 @@
             }}</span>
           </div>
         </div>
-
         <div class="pic">
           <img @mousedown.stop="mousedown" :src="obj.iconUrl" alt="" />
           <el-image
@@ -151,27 +150,32 @@ export default {
 .wrapper {
   width: 406px;
   max-height: 430px;
-  background: #fff;
+  background: rgba(7, 29, 51, 0.9);
   border-radius: 4px;
   box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
+  color: #fff;
+
   // overflow: hidden;
   .top {
     width: 100%;
     height: 51px;
-    background-color: #053b6a;
+    // background-color: #053b6a;
+    background-image: url(../../assets/images/blueTopBg.png);
+    background-size: 100% 100%;
+    background-position: center;
+    // border-radius: 4px 4px 0px 0px;
+    // border: 1px solid #fff;
+    box-sizing: border-box;
     position: relative;
     &:before {
       content: "";
       position: absolute;
       left: -20px;
       top: 5px;
-      width: 0px;
-      height: 0px;
-      /* border: 20px solid red; */
-      border-top: 15px solid transparent;
-      border-bottom: 15px solid transparent;
-      /* border-left: 50px solid greenyellow; */
-      border-right: 30px solid #053b6a;
+      z-index: -1;
+      width: 33px;
+      height: 33px;
+      background-image: url(../../assets/images/blueLeftTriangle.png);
     }
     .text {
       font-weight: 600;
@@ -209,7 +213,8 @@ export default {
         .eq-text {
           font-size: 14px;
           font-weight: 400;
-          color: #1d1d1d;
+          // color: #1d1d1d;
+          color: #fff;
           opacity: 1;
           & > span {
             vertical-align: top;

gassafety-web/src/components/PopWindowGis/lineInfoWindowWarn.vue

 <template>
   <div class="wrapper">
     <div class="top display-default">
-      <div class="left text">{{ obj.pipeName }}</div>
+      <div class="left text ddd" :title="obj.pipeName">{{ obj.pipeName }}</div>
       <div class="right text">
         <img @click="close" src="../../assets/images/closeBtn.png" alt="" />
       </div>
@@ -210,26 +210,29 @@ export default {
 .wrapper {
   width: 406px;
   max-height: 500px;
-  background: #fff;
+  // background: #fff;
+  background: rgba(7, 29, 51, 0.9);
+
+  color: #fff;
   border-radius: 4px;
   box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
   // overflow: hidden;
   .top {
     width: 100%;
     height: 51px;
-    background-color: #ff5a67;
+    // background-color: #ff5a67;
+    background-image: url(../../assets/images/redTopBg.png);
+    background-size: 100% 100%;
+    background-position: center;
     &:before {
       content: "";
       position: absolute;
       left: -20px;
       top: 5px;
-      width: 0px;
-      height: 0px;
-      /* border: 20px solid red; */
-      border-top: 15px solid transparent;
-      border-bottom: 15px solid transparent;
-      /* border-left: 50px solid greenyellow; */
-      border-right: 30px solid #ff5a67;
+      z-index: -1;
+      width: 33px;
+      height: 33px;
+      background-image: url(../../assets/images/redLeftTriangle.png);
     }
     .text {
       font-weight: 600;
@@ -239,6 +242,8 @@ export default {
     }
     .left {
       padding-left: 22px;
+      width:100%;
+      overflow: hidden;
     }
     .right {
       padding-right: 22px;
@@ -267,7 +272,7 @@ export default {
         .eq-text {
           font-size: 14px;
           font-weight: 400;
-          color: #1d1d1d;
+          color: #fff;
           opacity: 1;
           & > span {
             vertical-align: top;
@@ -300,6 +305,7 @@ export default {
     // padding-right: 22px;
     // padding-bottom: 10px;
     // padding-top: 16px;
+
     box-sizing: border-box;
     // border-bottom: 1px solid #e2e2e2;
     & > div {
@@ -337,7 +343,7 @@ export default {
           box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
           width: 95px;
           height: 33px;
-          border: none;
+          // border: none;
         }
       }
     }

gassafety-web/src/components/PopWindowGis/markerInfoWindow.vue

@@ -2,7 +2,7 @@
   <div class="wrapper">
     <span class="dot-left"></span>
     <div class="top display-default">
-      <div class="left text">{{ data.deviceName }}</div>
+      <div class="left text ddd" :title="data.deviceName">{{ data.deviceName }}</div>
       <div class="right text">
         <img src="../../assets/images/closeBtn.png" alt="" @click="close" />
       </div>
@@ -107,26 +107,38 @@ export default {
 .wrapper {
   width: 406px;
   max-height: 430px;
-  background: #fff;
+  // background: #fff;
   border-radius: 4px;
+  background: rgba(7, 29, 51, 0.9);
   box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
+  color: #fff;
   // overflow: hidden;
   .top {
     width: 100%;
     height: 51px;
-    background-color: #053b6a;
+    // background-color: #053b6a;
+    background-image: url(../../assets/images/blueTopBg.png);
+    background-size: 100% 100%;
+    background-position: center;
     &:before {
+      // content: "";
+      // position: absolute;
+      // left: -20px;
+      // top: 5px;
+      // width: 0px;
+      // height: 0px;
+      // z-index:-1;
+      // border-top: 15px solid transparent;
+      // border-bottom: 15px solid transparent;
+      // border-right: 30px solid #053b6a;
       content: "";
       position: absolute;
       left: -20px;
       top: 5px;
-      width: 0px;
-      height: 0px;
-      /* border: 20px solid red; */
-      border-top: 15px solid transparent;
-      border-bottom: 15px solid transparent;
-      /* border-left: 50px solid greenyellow; */
-      border-right: 30px solid #053b6a;
+      z-index: -1;
+      width: 33px;
+      height: 33px;
+      background-image: url(../../assets/images/blueLeftTriangle.png);
     }
     .text {
       font-weight: 600;
@@ -164,7 +176,8 @@ export default {
         .eq-text {
           font-size: 14px;
           font-weight: 400;
-          color: #1d1d1d;
+          // color: #1d1d1d;
+          color: #fff;
           opacity: 1;
           & > span {
             vertical-align: top;

gassafety-web/src/components/PopWindowGis/markerInfoWindowWarn.vue

@@ -2,13 +2,9 @@
   <div class="wrapper">
     <span class="dot-left"></span>
     <div class="top display-default">
-      <div class="left text">{{ data.deviceName }}</div>
+      <div class="left text ddd" :title="data.deviceName">{{ data.deviceName }}</div>
       <div class="right text">
-        <img
-          src="../../assets/images/closeBtn.png"
-          alt=""
-          @click="close"
-        />
+        <img src="../../assets/images/closeBtn.png" alt="" @click="close" />
       </div>
     </div>
     <!-- 设备信息 -->
@@ -137,7 +133,7 @@ export default {
         type: "device",
       });
     },
-    close(){
+    close() {
       this.map.clearInfoWindow();
       this.data.class.view.bottomDataShow = true;
     },
@@ -177,31 +173,32 @@ export default {
   },
 };
 </script>
-
 <style lang="scss" scoped>
 .wrapper {
   width: 406px;
   max-height: 500px;
-  background: #fff;
+  // background: #fff;
+  background: rgba(7, 29, 51, 0.9);
+  color: #fff;
   border-radius: 4px;
   box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
   // overflow: hidden;
   .top {
     width: 100%;
     height: 51px;
-    background-color: #ff5a67;
-     &:before {
+    // background-color: #ff5a67;
+    background-image: url(../../assets/images/redTopBg.png);
+    background-size: 100% 100%;
+    background-position: center;
+    &:before {
       content: "";
       position: absolute;
       left: -20px;
       top: 5px;
-      width: 0px;
-      height: 0px;
-      /* border: 20px solid red; */
-      border-top: 15px solid transparent;
-      border-bottom: 15px solid transparent;
-      /* border-left: 50px solid greenyellow; */
-      border-right: 30px solid #ff5a67;
+      z-index: -1;
+      width: 33px;
+      height: 33px;
+      background-image: url(../../assets/images/redLeftTriangle.png);
     }
     .text {
       font-weight: 600;
@@ -239,7 +236,7 @@ export default {
         .eq-text {
           font-size: 14px;
           font-weight: 400;
-          color: #1d1d1d;
+          color: #fff;
           opacity: 1;
           & > span {
             vertical-align: top;
@@ -309,7 +306,7 @@ export default {
           box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
           width: 95px;
           height: 33px;
-          border: none;
+          // border: none;
         }
       }
     }

gassafety-web/src/components/PopWindowGis/troubleInfoWindowWarn.vue

@@ -2,7 +2,9 @@
   <div class="wrapper">
     <span class="dot-left"></span>
     <div class="top display-default">
-      <div class="left text">{{ data.troubleName }}</div>
+      <div class="left text ddd" :title="data.troubleName">
+        {{ data.troubleName }}
+      </div>
       <div class="right text">
         <img src="../../assets/images/closeBtn.png" alt="" @click="close" />
       </div>
@@ -185,26 +187,29 @@ export default {
 .wrapper {
   width: 406px;
   max-height: 500px;
-  background: #fff;
+  // background: #fff;
+  background: rgba(7, 29, 51, 0.9);
+
   border-radius: 4px;
   box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
   // overflow: hidden;
   .top {
     width: 100%;
     height: 51px;
-    background-color: #e6a23c;
+    // background-color: #e6a23c;
+    background-image: url(../../assets/images/yellowTopBg.png);
+    background-size: 100% 100%;
+    background-position: center;
+    color: #fff;
     &:before {
       content: "";
       position: absolute;
       left: -20px;
       top: 5px;
-      width: 0px;
-      height: 0px;
-      /* border: 20px solid red; */
-      border-top: 15px solid transparent;
-      border-bottom: 15px solid transparent;
-      /* border-left: 50px solid greenyellow; */
-      border-right: 30px solid #e6a23c;
+      z-index: -1;
+      width: 33px;
+      height: 33px;
+      background-image: url(../../assets/images/yellowLeftTriangle.png);
     }
     .text {
       font-weight: 600;
@@ -242,7 +247,7 @@ export default {
         .eq-text {
           font-size: 14px;
           font-weight: 400;
-          color: #1d1d1d;
+          color: #fff;
           opacity: 1;
           & > span {
             vertical-align: top;
@@ -272,6 +277,7 @@ export default {
     width: 100%;
     max-height: 119px;
     padding-left: 22px;
+    color: #fff;
     // padding-right: 22px;
     // padding-bottom: 10px;
     // padding-top: 16px;
@@ -312,7 +318,7 @@ export default {
           box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
           width: 95px;
           height: 33px;
-          border: none;
+          // border: none;
         }
       }
     }

gassafety-web/src/components/PopWindowGis/workerManInfowindow.vue

 <template>
   <div class="wrapper">
     <div class="content">
-      <span class="left">姓名: {{ data.userName }}</span>
+      <span class="left">姓名: {{ data.nickName }}</span>
       <span class="right">时间: {{ data.createTime }}</span>
     </div>
 
@@ -26,7 +26,9 @@ export default {
 .wrapper {
   // width: 166px;
   height: 54px;
-  background: #0d4f88;
+  // background: #0d4f88;
+  background: rgba(7, 29, 51, 0.9);
+
   font-size: 14px;
   color: #fff;
   box-sizing: border-box;
@@ -45,7 +47,9 @@ export default {
     border-top: 15px solid transparent;
     border-bottom: 15px solid transparent;
     /* border-left: 50px solid greenyellow; */
-    border-right: 30px solid #0d4f88;
+    border-right: 30px solid rgba(7, 29, 51, 0.9);
+    box-shadow: 0 0 20px -5px #0d4f88;
+
     z-index: -1;
   }
   .content {

gassafety-web/src/components/PopWindowGis/workerManView.vue

@@ -117,7 +117,7 @@ export default {
   created() {
     this.formData.userId = this.userId;
     this.workerManArr = this.gaodeMap.workerManArr.map((item) => ({
-      label: item.userName,
+      label: item.nickName,
       value: item.userId,
     }));
   },

gassafety-web/src/utils/gaodeMapView.js

@@ -719,7 +719,7 @@ class gaodeMap {
         map: map,
         path: lineArr,
         showDir: true,
-        strokeColor: "#28F", //线颜色
+        strokeColor: "#2EE7E7", //线颜色
         // strokeOpacity: 1,     //线透明度
         strokeWeight: 6 //线宽
         // strokeStyle: "solid"  //线样式

gassafety-web/src/views/enterprise/mapView/index.vue

@@ -1147,7 +1147,7 @@ export default {
           path: [item.longitude, item.latitude],
           no: index,
           userId: item.userId,
-          userName: item.userName,
+          userName: item.nickName,
           userPhone: item.phonenumber,
         };
       });

gassafety-web/yarn.lock

@@ -903,6 +903,11 @@
     "@babel/helper-validator-identifier" "^7.14.5"
     to-fast-properties "^2.0.0"
 
+"@easydarwin/easywasmplayer@^4.0.13":
+  version "4.0.13"
+  resolved "https://registry.nlark.com/@easydarwin/easywasmplayer/download/@easydarwin/easywasmplayer-4.0.13.tgz#83dc92d880e9b0528e5d4cfc9c669a1a1e420c08"
+  integrity sha1-g9yS2IDpsFKOXUz8nGaaGh5CDAg=
+
 "@eslint/eslintrc@^0.2.2":
   version "0.2.2"
   resolved "https://registry.nlark.com/@eslint/eslintrc/download/@eslint/eslintrc-0.2.2.tgz#d01fc791e2fc33e88a29d6f3dc7e93d0cd784b76"
@@ -3378,9 +3383,9 @@ ecc-jsbn@~0.1.1:
     jsbn "~0.1.0"
     safer-buffer "^2.1.0"
 
-echarts@4.9.0:
+echarts@^4.9.0:
   version "4.9.0"
-  resolved "https://registry.nlark.com/echarts/download/echarts-4.9.0.tgz#a9b9baa03f03a2a731e6340c55befb57a9e1347d"
+  resolved "https://registry.nlark.com/echarts/download/echarts-4.9.0.tgz?cache=0&sync_timestamp=1630472362764&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fecharts%2Fdownload%2Fecharts-4.9.0.tgz#a9b9baa03f03a2a731e6340c55befb57a9e1347d"
   integrity sha1-qbm6oD8Doqcx5jQMVb77V6nhNH0=
   dependencies:
     zrender "4.3.2"