添加菜单，但未显示字，修复二维码生成及登录

src/utils/request.js

@@ -19,8 +19,7 @@ request.interceptors.response.use(
             return result.data;
         }else{
             alert(result.data.message ? result.data.message : "请求失败，请稍后重试！");
-            
+            router.push("/login");
-            return Promise.reject(result.data.message);
         }
     },
     error => {

src/views/DeviceList.vue

@@ -104,6 +104,9 @@ export default {
         console.error(error);
       }
     },
+    handleMenuSelect(val) {
+      router.push(val);
+    },
     toVideoList() {
       router.push("/videoList");
     },
@@ -135,6 +138,22 @@ export default {
 
 <template>
   <div>
+      <el-menu
+    default-active="2"
+    class="el-menu-vertical-demo"
+    background-color="#545c64"
+    text-color="#fff"
+    active-text-color="#ffd04b"
+    mode="vertical"
+    @select="handleMenuSelect"
+  >
+    <el-menu-item index="/videoList">
+      <template>视频列表</template>
+    </el-menu-item>
+    <el-menu-item index="/device">
+      <template>设备管理</template>
+    </el-menu-item>
+  </el-menu>
     <el-container style="height: 700px; border: 1px solid #eee">
       <el-header style="font-size: 40px; background-color: rgb(238, 241, 246)"
         >监控设备列表</el-header

src/views/Login.vue

@@ -86,6 +86,7 @@
     </el-form>
   </el-row>
   <div>
+    <div>二维码状态: {{qr_status}} </div>
     <canvas ref="qrCodeCanvas"></canvas>
   </div>
 </template>
@@ -110,6 +111,8 @@ const globalData = inject("globalData");
 // 创建一个响应式引用来存储定时器ID  
 const intervalId = ref(null);
 var uuid = "";
+
+const qr_status = ref("未被扫描");
 //表单数据
 var loginData = ref({
   username: "",
@@ -240,7 +243,6 @@ const getUUID = async () => {
     const response = await getUUIDService({ device: "windows" });
     uuid = response.data.toString();
     let uid = uuid.toString();
-    console.log("uuid=", uuid);
     //await creatQrCode(uid);
     generateQRCode(uuid);
   } catch (error) {
@@ -253,7 +255,7 @@ const getQRStatus = async () => {
   if (result.code === 0) {
     if (result.data === "0") {
     } else if (result.data === "1") {
-      alert("等待确认");
+      qr_status.value="等待确认";
     } else {
       globalData.token = result.data;
       localStorage.setItem("token", result.data.token);

src/views/VideoList.vue

@@ -55,11 +55,14 @@ export default {
       console.log("file_size", this.file_sum_size, "len=", len);
       this.tableData = data;
     },
-    logout(){
+    logout() {
       //退出登录
       localStorage.clear();
       router.push("/login");
     },
+    handleMenuSelect(val) {
+      router.push(val);
+    },
     onSubmit() {
       getVideoList({ token: token });
     },
@@ -128,8 +131,8 @@ export default {
       var days = 15;
       var delay_data = {
         id: id,
-        option:"one",
+        option: "one",
-        ip:this.ip,
+        ip: this.ip,
         delay: days,
         userId: this.tokenData.userId,
         token: this.tokenData.token,
@@ -149,8 +152,8 @@ export default {
       var days = 15;
       var delay_data = {
         id: -1,
-        option:"all",
+        option: "all",
-        ip:this.ip,
+        ip: this.ip,
         delay: days,
         userId: this.tokenData.userId,
         token: this.tokenData.token,
@@ -169,14 +172,14 @@ export default {
     async getIpClient() {
       try {
         const response = await axios.get("https://ipinfo.io/json");
-        this.ip=response.data.ip;
+        this.ip = response.data.ip;
         localStorage.setItem("ip", this.ip);
         //console.log(response);
       } catch (error) {
         console.error(error);
       }
     },
-    toDeviceM(){
+    toDeviceM() {
       router.push("/device");
     },
     // 修改条纹颜色
@@ -194,8 +197,8 @@ export default {
   // 生命周期钩子会在组件生命周期的各个不同阶段被调用
   // 例如这个函数就会在组件挂载完成后被调用
   async mounted() {
-    let now=new Date();
+    let now = new Date();
-    if (localStorage.getItem("token") === null ) {
+    if (localStorage.getItem("token") === null) {
       router.push("/login");
     }
     // console.log("mounted");
@@ -207,6 +210,22 @@ export default {
 
 <template>
   <div>
+      <el-menu
+    default-active="2"
+    class="el-menu-vertical-demo"
+    background-color="#545c64"
+    text-color="#fff"
+    active-text-color="#ffd04b"
+    mode="vertical"
+    @select="handleMenuSelect"
+  >
+    <el-menu-item index="/videoList">
+      <template>视频列表</template>
+    </el-menu-item>
+    <el-menu-item index="/device">
+      <template>设备管理</template>
+    </el-menu-item>
+  </el-menu>
     <el-container style="height: 700px; border: 1px solid #eee">
       <el-header style="font-size: 40px; background-color: rgb(238, 241, 246)"
         >监控视频列表</el-header
@@ -261,10 +280,17 @@ export default {
               <el-button type="primary" @click="logout()">退出登录</el-button>
             </el-form-item>
             <el-form-item>
-              <el-button class="el-button--danger" type="primary" @click="delayAllVideo('all')">全部延迟删除</el-button>
+              <el-button
+                class="el-button--danger"
+                type="primary"
+                @click="delayAllVideo('all')"
+                >全部延迟删除</el-button
+              >
             </el-form-item>
             <el-form-item>
-              <el-button type="primary" @click="toDeviceM()">设备信息</el-button>
+              <el-button type="primary" @click="toDeviceM()"
+                >设备信息</el-button
+              >
             </el-form-item>
             <!-- <el-form-item>
             所有文件大小：  {{ parseFloat(this.file_sum_size/1024/1024).toFixed(2) }} GB
@@ -355,4 +381,9 @@ export default {
 .blueRowbg {
   background: "#488aff";
 }
+.el-menu-vertical-demo {
+  width: 200px; /* 设置菜单宽度 */
+  background-color: #1e2733; /* 设置背景颜色 */
+  /* ... 其他样式属性 ... */
+}
 </style>