修改了登录卡片

src/components/map.vue

@@ -4,12 +4,12 @@
     <div id="mapview" class="map" @click="basemapShow = false">
     </div>
 
-    <template>
-      <layer-selector
-        @getCheckedMap = 'getCheckedMap'
-        @getCheckedTag = 'getCheckedTag'
-      ></layer-selector>
-    </template>
+    <!-- 图层 和 消息选择 -->
+    <layer-selector
+      @getCheckedMap = 'getCheckedMap'
+      @getCheckedTag = 'getCheckedTag'
+    ></layer-selector>
+
     <!-- 绘图 控件 -->
     <div
       id='div-draw'
@@ -526,7 +526,9 @@ export default {
     Feature_to_GeoJSon: function (feature) {
       let baseType = feature[0].type
       // 多点取第一个点，多线取多线
+      // eslint-disable-next-line no-unneeded-ternary
       let isMulti = feature.length > 1 ? true : false
+      // eslint-disable-next-line no-unneeded-ternary
       isMulti = baseType === 'LineString' ? true : false
 
       if (isMulti) {
@@ -646,7 +648,7 @@ export default {
           res.data.forEach(e => {
             that.printFeature('otherLayer', e, 'other')
           })
-      })
+        })
     },
 
     /**
@@ -903,7 +905,7 @@ export default {
       }
     },
 
-     // LayerSelector related
+    // LayerSelector related
     // 底图选择 和 消息选择 的图层切换
     getCheckedMap: function (checkMapList) {
       this.checkMapList = checkMapList

src/components/pcBar.vue

@@ -217,43 +217,7 @@
     </b-modal>
 
     <!-- loginModal -->
-    <b-modal id="loginModal" title="登 陆">
-      <template v-slot:modal-title>
-        <div class="align-center"><i class="fa fa-id-card" aria-hidden="true"></i> Login</div>
-      </template>
-      <b-form @submit.prevent="submit_loginModal()">
-         <b-form-group label="账号：" label-for="input-2"  label-cols-sm="2">
-          <b-form-input
-            id="input-user"
-            v-model="login.account"
-            required
-            placeholder="Enter account"
-          >
-          </b-form-input>
-        </b-form-group>
-
-        <b-form-group label="密码：" label-for="input-password" label-cols-sm="2" >
-          <b-form-input
-            id="input-password"
-            v-model="login.password"
-            type="password"
-            required
-            placeholder="Enter password"
-          ></b-form-input>
-          <b-form-invalid-feedback :state="login.isRight">
-            <b-icon icon="x-octagon-fill"></b-icon>&nbsp;{{login.errorMessage}}
-          </b-form-invalid-feedback>
-        </b-form-group>
-        <div class="text-center">
-          <b-button type="reset" variant="danger" >重置</b-button>
-          <b-button type="submit" variant="primary">提交</b-button>
-        </div>
-      </b-form>
-         <template v-slot:modal-footer>
-        <b-button type="reset" variant="secondary" @click="$bvModal.hide('loginModal')">关闭</b-button>
-      </template>
-    </b-modal>
-
+    <login-card />
     <!-- Alert -->
     <div id="alert"
      v-show="alert.dismissCountDown > 0"
@@ -267,8 +231,10 @@
 // eventBus公共实例
 import bus from '../../static/js/eventBus'
 import cookie from '../../static/js/cookieJS'
+import LoginCard from '../layouts/widgets/LoginCard'
 
 export default {
+  components: { LoginCard },
   name: 'PC',
   data () {
     return {
@@ -682,51 +648,51 @@ export default {
       return isSuccess
     },
 
-    /**
-    * @description: loginModel提交(submit)事件
-    * @returns {void}
-     */
-    submit_loginModal: function (e) {
-      var that = this
-      this.postLoginForm()
-        .then(res => {
-          if (res) {
-            // 登陆成功，设置登陆状态
-            that.$store.commit('userLogin', {
-              name: res.name,
-              uid: res.uid
-            })
-
-            // 设置token到cookie
-            cookie.setCookie(res.token, 0.5, 'token')
-
-            // 隐藏modal
-            that.$bvModal.hide('loginModal')
-          } else {
-            that.login.isRight = false
-          }
-        })
-    },
-
-    /**
-     * @description:向后端提交登陆表单
-     * @returns {void}
-     */
-    postLoginForm: async function () {
-      var response
-
-      await this.$axios
-        .post('admin/login', {
-          form: {
-            account: this.login.account,
-            password: this.login.password
-          }
-        })
-        .then(res => {
-          response = res.data
-        })
-      return response
-    },
+    // /**
+    // * @description: loginModel提交(submit)事件
+    // * @returns {void}
+    //  */
+    // submit_loginModal: function (e) {
+    //   var that = this
+    //   this.postLoginForm()
+    //     .then(res => {
+    //       if (res) {
+    //         // 登陆成功，设置登陆状态
+    //         that.$store.commit('userLogin', {
+    //           name: res.name,
+    //           uid: res.uid
+    //         })
+
+    //         // 设置token到cookie
+    //         cookie.setCookie(res.token, 0.5, 'token')
+
+    //         // 隐藏modal
+    //         that.$bvModal.hide('loginModal')
+    //       } else {
+    //         that.login.isRight = false
+    //       }
+    //     })
+    // },
+
+    // /**
+    //  * @description:向后端提交登陆表单
+    //  * @returns {void}
+    //  */
+    // postLoginForm: async function () {
+    //   var response
+
+    //   await this.$axios
+    //     .post('admin/login', {
+    //       form: {
+    //         account: this.login.account,
+    //         password: this.login.password
+    //       }
+    //     })
+    //     .then(res => {
+    //       response = res.data
+    //     })
+    //   return response
+    // },
 
     /**
      * @description:刷新列表，地图
@@ -929,8 +895,8 @@ export default {
   }
   #btn{
     position:absolute;
-    right:10px;
-    top:10px;
+    right:5px;
+    bottom: 10px;
     z-index: 10;
     float:right;
   }

src/layouts/widgets/LoginCard.vue

@@ -0,0 +1,111 @@
+ <!-- loginModal -->
+<template>
+<b-modal id="loginModal" title="登 陆">
+    <template v-slot:modal-title>
+    <div class="align-center"><i class="fa fa-id-card" aria-hidden="true"></i> Login</div>
+    </template>
+    <b-form @submit.prevent="submitLogin()">
+        <b-form-group label="账号：" label-for="input-2"  label-cols-sm="2">
+        <b-form-input
+        id="input-user"
+        v-model="login.account"
+        required
+        placeholder="Enter account"
+        >
+        </b-form-input>
+    </b-form-group>
+
+    <b-form-group label="密码：" label-for="input-password" label-cols-sm="2" >
+        <b-form-input
+        id="input-password"
+        v-model="login.password"
+        type="password"
+        required
+        placeholder="Enter password"
+        ></b-form-input>
+        <b-form-invalid-feedback :state="login.isRight">
+        <b-icon icon="x-octagon-fill"></b-icon>&nbsp;{{login.errorMessage}}
+        </b-form-invalid-feedback>
+    </b-form-group>
+    <div class="text-center">
+        <b-button type="reset" variant="danger" >重置</b-button>
+        <b-button type="submit" variant="primary">提交</b-button>
+    </div>
+    </b-form>
+        <template v-slot:modal-footer>
+    <b-button type="reset" variant="secondary" @click="$bvModal.hide('loginModal')">关闭</b-button>
+    </template>
+</b-modal>
+</template>
+
+<script>
+import cookie from '../../../static/js/cookieJS'
+
+export default {
+  name: 'LoginCard',
+
+  data: () => ({
+    // 登陆表单
+    login: {
+      account: '',
+      password: '',
+      isRight: true,
+      errorMessage: '账号或密码输入错误'
+    }
+  }),
+
+  methods: {
+    /**
+    * @description: loginModel提交(submit)事件
+    * @returns {void}
+     */
+    submitLogin: function (e) {
+      var that = this
+      this.postLoginForm()
+        .then(res => {
+          if (res) {
+            // 登陆成功，设置登陆状态
+            that.$store.commit('userLogin', {
+              name: res.name,
+              uid: res.uid
+            })
+
+            // 设置token到cookie
+            cookie.setCookie(res.token, 0.5, 'token')
+
+            // 隐藏modal
+            that.$bvModal.hide('loginModal')
+          } else {
+            that.login.isRight = false
+          }
+        })
+    },
+    /**
+     * @description:向后端提交登陆表单
+     * @returns {void}
+     */
+    postLoginForm: async function () {
+      var response
+
+      await this.$axios
+        .post('admin/login', {
+          form: {
+            account: this.login.account,
+            password: this.login.password
+          }
+        })
+        .then(res => {
+          response = res.data
+        })
+      return response
+    }
+  }
+}
+</script>
+
+<style scoped>
+.loginModal{
+  position: absolute;
+  left: 50%;
+}
+</style>