改map页UI、退出登录

src/styles/gps-menu.scss

-body,
-html {
-
-    .gps-menu {
-        position: absolute;
-        top: 15px;
-        left: 15px;
-        min-width: 300px;
-
-        .title {
-            margin: 4px 0 2px;
-            height: 40px;
-            //background: #409EFF;
-             border-radius: 3px;
-             background: #ffffff;
-             height:36px;
-             padding: 0px 12px;
-            p {
-                text-align: center;
-                line-height: 40px;
-                color: #fff;
-                height: 40px;
-            }
-            .name {
-                max-width: 260px;
-
-            }
-            .ctrl {
-                float: right;
-                padding-right: 10px;
-                padding-left: 10px;
-                cursor: pointer;
-            }
-            .el-dropdown {
-                float: right;
-            }
-        }
-
-        .menu-tree {
-            position: relative;
-            display: inline-block !important;
-
-        }
-        .el-tree {
-            padding: 20px 10px 10px;
-            min-width: 300px;
-            max-height: 460px;
-            overflow:auto;
-            // .el-tree-node__expand-icon {
-            //     display: none;
-            // }
-        }
-        .tree_icon {
-            margin-right: 5px;
-        }
-        .dev_zx {
-            color: #009cf9;
-        }
-        .dev_lx {
-            color: #009cf9;
-        }
-        .dev_wjh {
-            color: #009cf9;
-        }
-        .el-button-group {
-            vertical-align: baseline;
-        }
-    }
-
-    .el-cascader .el-input.is-disabled .el-input__inner{
-      color: #fff;
-      background-color: #a0cfff;
-      border-color: #a0cfff;
-    }
-}
+body,
+html {
+  .gps-menu {
+    position: absolute;
+    top: 65px;
+    right: 30px;
+    min-width: 300px;
+
+    .title {
+      margin: 4px 0 2px;
+      height: 40px;
+      //background: #409EFF;
+      border-radius: 3px;
+      background: #ffffff;
+      height: 36px;
+      padding: 0px 12px;
+      p {
+        text-align: center;
+        line-height: 40px;
+        color: #fff;
+        height: 40px;
+      }
+      .name {
+        max-width: 260px;
+      }
+      .ctrl {
+        float: right;
+        padding-right: 10px;
+        padding-left: 10px;
+        cursor: pointer;
+      }
+      .el-dropdown {
+        float: right;
+      }
+    }
+
+    .menu-tree {
+      position: relative;
+      display: inline-block !important;
+    }
+    .el-tree {
+      padding: 20px 10px 10px;
+      min-width: 300px;
+      max-height: 460px;
+      overflow: auto;
+      // .el-tree-node__expand-icon {
+      //     display: none;
+      // }
+    }
+    .tree_icon {
+      margin-right: 5px;
+    }
+    .dev_zx {
+      color: #009cf9;
+    }
+    .dev_lx {
+      color: #009cf9;
+    }
+    .dev_wjh {
+      color: #009cf9;
+    }
+    .el-button-group {
+      vertical-align: baseline;
+    }
+  }
+
+  .el-cascader .el-input.is-disabled .el-input__inner {
+    color: #fff;
+    background-color: #a0cfff;
+    border-color: #a0cfff;
+  }
+}

src/styles/gps-tools.scss

-.gps-tools-box {
-        margin-right: 60px;
-        position: absolute;
-        top: 15px;
-        right: 60px;
-        font-size: 16px;
-        z-index: 100;
-    }
-.video-context{
-  max-width: 900px;
-  min-height: 232px;
-}
+.gps-tools-box {
+  position: absolute;
+  top: 15px;
+  right: 30px;
+  font-size: 16px;
+  z-index: 100;
+}
+.video-context {
+  max-width: 900px;
+  min-height: 232px;
+}

src/views/login/index.vue

@@ -81,7 +81,7 @@
                   <!-- <span class="login-icon el-icon-lock"></span>
                   <el-input type="password" v-model="loginForm.password" autocomplete="off" :placeholder="$t('register.password')"></el-input> -->
                 </el-form-item>
-                <div style="height: 30px" />
+                <div style="height: 20px" />
                 <el-form-item>
                   <el-row :gutter="20">
                     <el-col :span="18"

src/views/login/register.vue

@@ -146,7 +146,7 @@
                     {{ $t("register.password2") }}
                   </MDinput>
                 </el-form-item>
-                <div style="height: 30px" />
+                <div style="height: 20px" />
                 <el-form-item>
                   <el-row :gutter="20">
                     <el-col :span="16"

src/views/map/components/menu/Menu.vue

@@ -5,9 +5,9 @@
         <template slot="title"> &nbsp;&nbsp;&nbsp;&nbsp; 用户列表 </template>
         <UserTree mode="mapUserTree" @onClickUser="onClickUser"></UserTree>
       </el-collapse-item>
-      <el-collapse-item title="设备列表" name="1">
+      <el-collapse-item title="有害植物列表" name="1">
         <template slot="title">
-          &nbsp;&nbsp;&nbsp;&nbsp; {{ $t("map.menuDeviceList") }}
+          &nbsp;&nbsp;&nbsp;&nbsp; 有害植物列表
           <div class="online-state">
             <el-tooltip
               class="item"

src/views/map/components/tools/Index.vue

@@ -104,7 +104,7 @@
     </el-popover>
 
     <el-button-group>
-      <el-button
+      <!-- <el-button
         class="steps-bubble"
         type="primary"
         size="medium"
@@ -134,6 +134,7 @@
         ><font-awesome-icon icon="ruler" />
         {{ $t("map.toolMeasure") }}</el-button
       >
+
       <el-button
         class="steps-measure"
         type="primary"
@@ -142,10 +143,10 @@
         @click="handleAreaSearch"
         ><font-awesome-icon icon="search" />
         {{ $t("map.toolMapSearch") }}</el-button
-      >
+      > -->
       <!-- <el-button type="primary" size="medium" @click="$parent.downLoad"><font-awesome-icon icon="download"/> 下载</el-button> -->
 
-      <el-button
+      <!-- <el-button
         class="steps-bubble"
         type="primary"
         size="medium"
@@ -160,7 +161,7 @@
           />
           视频</el-badge
         ></el-button
-      >
+      > -->
 
       <el-button class="steps-maptype" type="primary" size="medium">
         <font-awesome-icon icon="map" />
@@ -182,7 +183,7 @@
         </el-dropdown>
       </el-button>
 
-      <el-button
+      <!-- <el-button
         class="steps-customLayers"
         v-if="hasPermission('user:layer:view')"
         type="primary"
@@ -200,7 +201,8 @@
         @click="handlePois"
         ><font-awesome-icon icon="paint-brush" />
         {{ $t("map.toolPoi") }}</el-button
-      >
+      > -->
+      <!-- 围栏 -->
       <el-button
         class="steps-geofence"
         v-if="hasPermission('user:geofence:view')"
@@ -212,6 +214,7 @@
         ><font-awesome-icon icon="street-view" />
         {{ $t("map.toolFence") }}</el-button
       >
+      <!-- 消息 -->
       <el-button
         class="steps-message"
         type="primary"
@@ -226,6 +229,7 @@
           {{ $t("map.toolMessage") }}</el-badge
         ></el-button
       >
+      <!-- 全屏 -->
       <el-button
         class="steps-fullScreen"
         type="primary"
@@ -236,6 +240,10 @@
           flag ? $t("map.toolExitFullScreen") : $t("map.toolFullScreen")
         }}</el-button
       >
+      <el-button type="danger" size="medium" @click.native="exitSystem"
+        ><font-awesome-icon icon="undo" />
+        {{ $t("map.userExitSystem") }}</el-button
+      >
     </el-button-group>
     <audio id="audio" controls="controls" style="display: none" ref="audio">
       <source src="'../../../static/sound/zs.mp3" type="audio/mpeg" />
@@ -276,6 +284,25 @@ export default {
     };
   },
   methods: {
+    exitSystem() {
+      this.$confirm(this.$t("tips.signOut"), this.$t("tips.tips"), {
+        type: "warning",
+        lockScroll: false,
+      })
+        .then(() => {
+          this.$store.dispatch("cleanToken").then(() => {
+            this.$store.dispatch("Exit").then(() => {
+              location.reload(); // 为了重新实例化vue-router对象 避免bug
+            });
+          });
+        })
+        .catch(() => {
+          this.$message({
+            type: "info",
+            message: "取消系统退出",
+          });
+        });
+    },
     handleGeofence() {
       this.geoVisible = this.geoVisible ? false : true;
       if (this.geoVisible) {

src/views/map/index.vue

@@ -119,7 +119,7 @@
     </el-alert>
     <tools-box ref="tools"></tools-box>
     <menu-box :selectDeviceId="selectDeviceId"></menu-box>
-    <user-box></user-box>
+    <!-- <user-box></user-box> -->
     <control-box v-show="this.$store.state.user.map.mode == 2"></control-box>
     <Feedback></Feedback>
     <VideoPlayBack></VideoPlayBack>
@@ -129,7 +129,7 @@
         size="small"
         @click.native="
           $store.dispatch('setVisblesFlag', [
-            { key: 'feedbackDialog', value: true }
+            { key: 'feedbackDialog', value: true },
           ])
         "
       >
@@ -171,8 +171,8 @@ export default {
       heatData: [
         [119.678552, 29.14023, 80],
         [119.677768, 29.13957, 80],
-        [119.678447, 29.139684, 80]
-      ]
+        [119.678447, 29.139684, 80],
+      ],
     };
   },
   methods: {
@@ -182,11 +182,11 @@ export default {
     playstate(val) {
       this.$store.dispatch("setControlValue", {
         key: "index",
-        value: val.index
+        value: val.index,
       });
       this.$store.dispatch("setControlValue", {
         key: "total",
-        value: val.total
+        value: val.total,
       });
     },
     onClickMarker(feature) {
@@ -212,7 +212,7 @@ export default {
           case "poi": //点击兴趣点
             this.$store.dispatch("setPoiValue", {
               key: "selectId",
-              value: feature.getId()
+              value: feature.getId(),
             });
             break;
           default:
@@ -225,12 +225,12 @@ export default {
         if (this.$store.state.user.driving.params.start == "") {
           this.$store.dispatch("setDrivingParam", {
             key: "start",
-            value: p.join(",")
+            value: p.join(","),
           });
         } else if (this.$store.state.user.driving.params.end == "") {
           this.$store.dispatch("setDrivingParam", {
             key: "end",
-            value: p.join(",")
+            value: p.join(","),
           });
           this.$store.dispatch(
             "setDriving",
@@ -250,7 +250,7 @@ export default {
         inputValue: geofence.label,
         inputPattern: /^\S{2,6}$/,
         inputErrorMessage: "请输入2-6位的名称",
-        lockScroll: false
+        lockScroll: false,
       })
         .then(({ value }) => {
           geofence.label = value;
@@ -261,13 +261,13 @@ export default {
           this.$store.dispatch("updateGeofence", geofence);
           this.$message({
             type: "success",
-            message: "保存成功!"
+            message: "保存成功!",
           });
         })
         .catch(() => {
           this.$message({
             type: "info",
-            message: "继续编辑"
+            message: "继续编辑",
           });
         });
     },
@@ -283,7 +283,7 @@ export default {
         } else if (geofence.type.toLowerCase() === "polygon") {
           var points = geofence.area.split(", ");
           var coords = [];
-          points.forEach(point => {
+          points.forEach((point) => {
             coords.push(
               Number(point.split(" ")[1]).toFixed(6) +
                 " " +
@@ -294,7 +294,7 @@ export default {
         } else if (geofence.type.toLowerCase() === "linestring") {
           var points = geofence.area.split(", ");
           var coords = [];
-          points.forEach(point => {
+          points.forEach((point) => {
             coords.push(
               Number(point.split(" ")[1]).toFixed(6) +
                 " " +
@@ -310,7 +310,7 @@ export default {
           label: "新建围栏",
           type: geofence.type.toLowerCase(),
           visible: true,
-          color: "red"
+          color: "red",
         };
 
         this.$store.dispatch("setDrawGeofence", geo);
@@ -320,7 +320,7 @@ export default {
           cancelButtonText: "取消",
           inputPattern: /^\S{2,6}$/,
           inputErrorMessage: "请输入2-6位的名称",
-          lockScroll: false
+          lockScroll: false,
         })
           .then(({ value }) => {
             geofence.name = value;
@@ -331,7 +331,7 @@ export default {
           .catch(() => {
             this.$message({
               type: "info",
-              message: "继续编辑"
+              message: "继续编辑",
             });
           });
       } else if (this.$refs.tools.poisVisible) {
@@ -341,32 +341,32 @@ export default {
           case "point":
             styles = {
               fillColor: "#409EFF",
-              radius: 10
+              radius: 10,
             };
             break;
           case "linestring":
             styles = {
               strokeColor: "#409EFF",
-              strokeWidth: 5
+              strokeWidth: 5,
             };
             break;
           case "polygon":
             styles = {
               strokeColor: "#409EFF",
               strokeWidth: 5,
-              fillColor: "rgba(64,158,255, 0.4)"
+              fillColor: "rgba(64,158,255, 0.4)",
             };
             break;
           case "circle":
             styles = {
               strokeColor: "#409EFF",
               strokeWidth: 5,
-              fillColor: "rgba(64,158,255, 0.4)"
+              fillColor: "rgba(64,158,255, 0.4)",
             };
             break;
           case "marker":
             styles = {
-              fillColor: "#aaff56"
+              fillColor: "#aaff56",
             };
             break;
           default:
@@ -378,14 +378,14 @@ export default {
           type: this.$store.state.user.draw.build.toLowerCase(),
           area: geofence.area,
           visible: true,
-          styles: JSON.stringify(styles)
+          styles: JSON.stringify(styles),
         };
 
         this.$store.dispatch("addPoi", poi);
         var draw = {
           type: "",
           build: "",
-          enable: false
+          enable: false,
         };
         this.$store.dispatch("setDrawEnable", draw);
       } else {
@@ -396,9 +396,9 @@ export default {
         let param = {
           longitude: point[1],
           latitude: point[0],
-          distance: radius
+          distance: radius,
         };
-        getAreaDevices(param).then(data => {
+        getAreaDevices(param).then((data) => {
           this.$store.dispatch("setAreaDevices", data);
         });
       }
@@ -417,14 +417,14 @@ export default {
       let params = {
         id: this.$store.state.user.customLayers.list[idx].id,
         coord: v[0] + "," + v[1],
-        visible: this.$store.state.user.customLayers.list[idx].visible
+        visible: this.$store.state.user.customLayers.list[idx].visible,
       };
       this.$store.dispatch("updateImageLayer", params);
     },
     editArea(val) {
       let params = {
         id: val.id,
-        area: val.area
+        area: val.area,
       };
       this.$store.dispatch("updatePoi", params);
     },
@@ -433,7 +433,7 @@ export default {
       this.driver.start();
       localStorage.guide = true;
     },
-    wsTest() {}
+    wsTest() {},
   },
   components: {
     "tools-box": ToolsBox,
@@ -441,7 +441,7 @@ export default {
     "user-box": UserCenterBox,
     "control-box": ControlBox,
     Feedback,
-    VideoPlayBack
+    VideoPlayBack,
   },
   mounted() {
     //iframe 提示
@@ -450,7 +450,7 @@ export default {
         title: "GPSBD",
         dangerouslyUseHTMLString: true,
         message:
-          "GPSBD卫星定位监控系统<br>技术支持QQ:508620006 <br>电话:13355514723 <br>公司电话:400-800-5448"
+          "GPSBD卫星定位监控系统<br>技术支持QQ:508620006 <br>电话:13355514723 <br>公司电话:400-800-5448",
       });
     }
 
@@ -458,7 +458,7 @@ export default {
       nextBtnText: "下一步", // Next button text for this step
       prevBtnText: "上一步",
       closeBtnText: "关闭",
-      doneBtnText: "结束"
+      doneBtnText: "结束",
     });
     if (!localStorage.guide) {
       this.guide();
@@ -472,7 +472,7 @@ export default {
     } else {
       this.$store.dispatch("initData"); //初始化设备数据
       this.$store.dispatch("setVisblesFlag", [
-        { key: "deviceMenu", value: true }
+        { key: "deviceMenu", value: true },
       ]);
       this.$store.dispatch("initStaticData"); //初始化静态数据
       this.initConnect();
@@ -485,7 +485,7 @@ export default {
   },
   watch: {
     //模式切换
-    "$store.state.user.map.mode": function(nv, ov) {
+    "$store.state.user.map.mode": function (nv, ov) {
       //console.log('切换模式为：'+ov+'--> '+nv);
       if (nv == 2) {
         // -->轨迹回放
@@ -500,7 +500,7 @@ export default {
         }
         this.$store.dispatch("setDeviceMarkersVisible", {
           select: [],
-          visible: true
+          visible: true,
         });
       } else if (nv == 1 && ov == 2) {
         //轨迹回放-->跟踪设备
@@ -508,17 +508,17 @@ export default {
         this.$store.dispatch("removeHistoryPositions");
         this.$store.dispatch("setDeviceMarkersVisible", {
           select: [],
-          visible: false
+          visible: false,
         });
         //开启画面跟随
         if (!this.$store.state.user.map.isTrackCenter) {
           this.$store.dispatch("isTrackCenter");
         }
       }
-    }
+    },
   },
   computed: {
-    selectDevice: function() {
+    selectDevice: function () {
       if (this.$store.state.user.devices.selectId != 0) {
         var index = this.$store.state.user.devices.index[
           this.$store.state.user.devices.selectId
@@ -528,13 +528,13 @@ export default {
         return {};
       }
     },
-    devices: function() {
-      var arr = this.$store.state.user.devices.list.filter(function(device) {
+    devices: function () {
+      var arr = this.$store.state.user.devices.list.filter(function (device) {
         return device.marker && device.marker.coord.length != 0;
       });
       return arr;
-    }
-  }
+    },
+  },
 };
 </script>