diff --git a/frontend/matrix-middle-service-web/src/api/auth/index.ts b/frontend/matrix-middle-service-web/src/api/auth/index.ts
new file mode 100644
index 0000000..95e5c6b
--- /dev/null
+++ b/frontend/matrix-middle-service-web/src/api/auth/index.ts
@@ -0,0 +1,11 @@
+import http from "matrix-middle-service-web/src/api";
+
+export interface LoginDTO {
+    account: string,
+    password: string
+}
+export const auth = {
+    login: (dto:LoginDTO)=>{
+        return http.post("/auth/login", dto)
+    }
+}
diff --git a/frontend/matrix-middle-service-web/src/api/location/record/index.ts b/frontend/matrix-middle-service-web/src/api/location/record/index.ts
new file mode 100644
index 0000000..695187f
--- /dev/null
+++ b/frontend/matrix-middle-service-web/src/api/location/record/index.ts
@@ -0,0 +1,17 @@
+import http from "matrix-middle-service-web/src/api";
+import {LoginDTO} from "matrix-middle-service-web/src/api/auth";
+
+export interface locationRecordListDTO {
+    startTime?:string,
+    endTime?:string
+}
+
+export const locationRecord = {
+    list: (dto:locationRecordListDTO)=>{
+        return http.post("/location/record/list", dto,{
+            headers: {
+                token: localStorage.getItem("token")
+            }
+        })
+    }
+}
diff --git a/frontend/matrix-middle-service-web/src/main.ts b/frontend/matrix-middle-service-web/src/main.ts
index 75d1aa2..f91644d 100644
--- a/frontend/matrix-middle-service-web/src/main.ts
+++ b/frontend/matrix-middle-service-web/src/main.ts
@@ -2,7 +2,7 @@ import { createApp } from 'vue'
 import App from './App.vue'
 import "./style.css"
 
-import { Quasar } from 'quasar'
+import {Dialog, Notify, Quasar} from 'quasar'
 import quasarLang from 'quasar/lang/zh-CN'
 import './index.css'
 
@@ -24,7 +24,10 @@ let app = createApp(App);
 app.use(Store())
 app.use(Router())
 app.use(Quasar, {
-    plugins: {}, // import Quasar plugins and add here
+    plugins: {
+        Dialog,
+        Notify
+    }, // import Quasar plugins and add here
     lang: quasarLang,
     /*
     config: {
diff --git a/frontend/matrix-middle-service-web/src/views/record/AMapLocation.vue b/frontend/matrix-middle-service-web/src/views/record/AMapLocation.vue
index 49b375f..63a1af4 100644
--- a/frontend/matrix-middle-service-web/src/views/record/AMapLocation.vue
+++ b/frontend/matrix-middle-service-web/src/views/record/AMapLocation.vue
@@ -1,5 +1,9 @@
 <template>
     <div class="flex justify-start flex-wrap items-center">
+        <q-input v-model="authModel.account"  class="mx-1" placeholder="账号" outlined dense></q-input>
+        <q-input v-model="authModel.password" class="mx-1" placeholder="密码" type="password" outlined dense></q-input>
+        <q-btn @click="login">登录</q-btn>
+
         <DateTimeSelector v-model="date" range></DateTimeSelector>
         <q-btn @click="search">查询</q-btn>
     </div>
@@ -44,6 +48,8 @@ import {reactive, ref} from "vue";
 import DateTimeSelector from "matrix-middle-service-web/src/components/DateTimeSelector.vue";
 import {useQuasar} from "quasar";
 import moment from "moment";
+import {auth} from "matrix-middle-service-web/src/api/auth/index";
+import {locationRecord} from "matrix-middle-service-web/src/api/location/record/index";
 const $q = useQuasar();
 const COLOR = [
     '#6090e0', '#30c030', '#d070d0', '#80c0f0', '#f07050', '#ffb900',
@@ -95,6 +101,36 @@ const layers = reactive({
         show: false,
     }
 })
+
+const authModel = reactive({
+    account: "",
+    password: "",
+})
+
+function login(){
+    console.log("$q", $q)
+    auth.login(authModel).then((resp)=>{
+        let res = resp.data
+        console.log("login", res)
+        if(res.code !== 200){
+            $q.notify({
+                position: "top",
+                color:"warning",
+                message: res.data || res.msg,
+                timeout: 500,
+            })
+        } else {
+            $q.notify({
+                position: "top",
+                color:"positive",
+                message: "登录成功",
+                timeout: 500,
+            })
+            localStorage.setItem("token",res.data.token)
+        }
+    })
+}
+
 function toggleSatellite(){
     if (layers.satellite.show) {
         layers.satellite.inst.show()
@@ -214,13 +250,20 @@ function search() {
     });
     data.labelsLayer = labelsLayer
 
-    fetch("http://10.10.10.200:6573/record/location/get", {
-        method: "POST",
-        headers: {
-            'Content-Type': 'application/json'
-        },
-        body: JSON.stringify(params)
-    }).then(resp => resp.json()).then(res => {
+    locationRecord.list(params).then(resp => {
+        if(resp.status !== 200){
+            console.log(resp)
+            let res = resp.data || {}
+            $q.notify({
+                position: "top",
+                color: 'negative',
+                message: res.data || res.msg || "请求失败",
+                icon: 'report_problem'
+            })
+            throw new Error("请求失败")
+        }
+        return resp.data;
+    }).then(res => {
         let _data = res.data || []
         _data = _data.map(item=>{
             return {
diff --git a/frontend/matrix-middle-service-web/vite.config.ts b/frontend/matrix-middle-service-web/vite.config.ts
index fd7ad07..2fcdc64 100644
--- a/frontend/matrix-middle-service-web/vite.config.ts
+++ b/frontend/matrix-middle-service-web/vite.config.ts
@@ -11,7 +11,7 @@ export default defineConfig({
         port: 7868,
         proxy:{
             "^/api/.*":{
-                target: "http://10.10.10.100:6573/",
+                target: "http://10.10.10.20:45680/",
                 rewrite: (path) => path.replace(/^\/api\//, ''),
             },
         }