时间，无感刷新

.env.development

@@ -1,8 +1,8 @@
 ###
  # @Author: 张涛
  # @Date: 2023-11-09 18:29:41
- # @LastEditors: 张涛
+ # @LastEditors: JC9527
- # @LastEditTime: 2023-11-29 13:55:47
+ # @LastEditTime: 2023-12-15 22:03:06
  # @FilePath: \JiangningUrbanManagePc\.env.development
 ### 
 # 页面标题

package.json

@@ -37,6 +37,7 @@
   },
   "dependencies": {
     "@riophae/vue-treeselect": "0.4.0",
+    "@vuemap/vue-amap": "^0.1.17",
     "axios": "0.24.0",
     "clipboard": "2.0.8",
     "core-js": "3.25.3",

src/main.js

@@ -4,7 +4,7 @@
  * @Author: JC9527
  * @Date: 2023-08-14 13:58:57
  * @LastEditors: JC9527
- * @LastEditTime: 2023-08-17 11:05:58
+ * @LastEditTime: 2023-12-18 10:40:02
  */
 import Vue from 'vue'
 
@@ -25,10 +25,12 @@ import "@/utils/rem.js"; //计算rem基准
 
 import './assets/icons' // icon
 import './permission' // permission control
-import 'leaflet/dist/leaflet.css'
+import 'leaflet/dist/leaflet.css' // leaflet样式
+import '@vuemap/vue-amap/dist/style.css' // 高德vue-amap样式
 
 
 import moment from 'moment'
+moment.locale('zh-cn');
 Vue.prototype.$moment = moment
 import { getDicts } from "@/api/system/dict/data";
 import { getConfigKey } from "@/api/system/config";

src/utils/request.js

@@ -1,7 +1,7 @@
 import axios from 'axios'
 import { Notification, MessageBox, Message, Loading } from 'element-ui'
 import store from '@/store'
-import { getToken } from '@/utils/auth'
+import { getToken, setToken } from '@/utils/auth'
 import errorCode from '@/utils/errorCode'
 import { tansParams, blobValidate } from "@/utils/ruoyi";
 import cache from '@/plugins/cache'
@@ -11,6 +11,11 @@ let downloadLoadingInstance;
 // 是否显示重新登录
 export let isRelogin = { show: false };
 
+// 是否正在刷新的标记
+let isRefreshing = false
+//重试队列
+let requests = []
+
 axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8'
 // 创建axios实例
 const service = axios.create({
@@ -67,6 +72,7 @@ service.interceptors.request.use(config => {
 
 // 响应拦截器
 service.interceptors.response.use(res => {
+    console.log(res,'resres');
     // 未设置状态码则默认成功状态
     const code = res.data.code || 200;
     // 获取错误信息
@@ -78,16 +84,34 @@ service.interceptors.response.use(res => {
     if (code === 401) {
       if (!isRelogin.show) {
         isRelogin.show = true;
-        MessageBox.confirm('登录状态已过期，您可以继续留在该页面，或者重新登录', '系统提示', { confirmButtonText: '重新登录', cancelButtonText: '取消', type: 'warning' }).then(() => {
+        // MessageBox.confirm('登录状态已过期，您可以继续留在该页面，或者重新登录', '系统提示', { confirmButtonText: '重新登录', cancelButtonText: '取消', type: 'warning' }).then(() => {
+        //   isRelogin.show = false;
+        //   store.dispatch('LogOut').then(() => {
+        //     location.href = '/login';
+        //   })
+        // }).catch(() => {
+        //   isRelogin.show = false;
+        // });
+        // TODO:无感刷新token暂缺少不需验证码登录接口
+        store.dispatch("Login", this.loginForm).then(() => {
+          isRelogin.show = false;
+          res.headers.Authorization = getToken();
+          requests.forEach((cb) => cb(getToken()))
+          requests = [] // 重新请求完清空
+          return service(res.config)
+        }).catch(() => {
           isRelogin.show = false;
-          store.dispatch('LogOut').then(() => {
+        });
-            location.href = '/index';
+      } else {
+        return new Promise(resolve => {
+          // 用函数形式将 resolve 存入，等待刷新后再执行
+          requests.push(token => {
+            res.headers.Authorization = `${token}`
+            resolve(service(res.config))
           })
-      }).catch(() => {
+        })
-        isRelogin.show = false;
+      }
-      });
+      // return Promise.reject('无效的会话，或者会话已过期，请重新登录。')
-    }
-      return Promise.reject('无效的会话，或者会话已过期，请重新登录。')
     } else if (code === 500) {
       Message({ message: msg, type: 'error' })
       return Promise.reject(new Error(msg))
@@ -104,6 +128,9 @@ service.interceptors.response.use(res => {
   error => {
     console.log('err' + error)
     let { message } = error;
+    const originalRequest = error.config;
+    console.log(originalRequest,'originalRequest');
+    console.log(error.response.status,'error.response.status');
     if (message == "Network Error") {
       message = "后端接口连接异常";
     } else if (message.includes("timeout")) {

src/views/bigScreen/components/mapLeftContent.vue

@@ -4,7 +4,7 @@
  * @Author: JC9527
  * @Date: 2023-08-15 09:44:13
  * @LastEditors: JC9527
- * @LastEditTime: 2023-12-13 11:10:36
+ * @LastEditTime: 2023-12-18 09:49:15
 -->
 <template>
   <div class="left-box">
@@ -144,7 +144,7 @@ export default {
   watch:{
     personLine:{
       handler(newPerson){
-        console.log(newPerson,'在线人员情况');
+        // console.log(newPerson,'在线人员情况');
         this.peopleArray = newPerson
       },
       immediate:true,

src/views/bigScreen/index.vue

@@ -4,15 +4,15 @@
  * @Author: JC9527
  * @Date: 2023-08-14 14:40:02
  * @LastEditors: JC9527
- * @LastEditTime: 2023-12-11 15:46:02
+ * @LastEditTime: 2023-12-18 09:53:52
 -->
 <template>
   <div class="pc-container">
     <div class="system-header">
       <div class="left-tags">
-        <div class="new-time">{{ newTime }}</div>
+        <div class="new-time">{{ now.date }}</div>
-        <div class="new-time">{{ time }}</div>
+        <div class="new-time">{{ now.hour + ":" + now.minute + ":" + now.second }}</div>
-        <div class="new-work">{{ currentWork }}</div>
+        <div class="new-work" @click="getcodeImg">{{ currentWork }}</div>
       </div>
       <div class="system-title" text="城市精细化管理监测主题">
         城市精细化管理监测主题
@@ -43,32 +43,49 @@
 
 <script>
 // import myRouter from '../../router.js'
+import { getInfo } from "@/api/login";
 import myMap from "./map/index.vue";
 export default {
   data() {
     return {
-      newTime: "",
       currentWork: "",
       input: "",
       leftAnimation: true,
       rightAnimation: true,
-      time: "",
+      now:{
+        date:"",
+        hour: '',
+        minute: '',
+        second: '',
+      },
     };
   },
   created() {
+    // const now = new Date();
+    // const dayOfWeek = now.toLocaleDateString('en-US', { weekday: 'long' });
+    // console.log(dayOfWeek,'dayOfWeek');
+    // this.$moment().locale('zh-cn');
+    
     // 获取当前年月日周
-    let dayList = {
+    setInterval(() => {
-      0: "星期日",
+      this.now.date = this.$moment().format("YYYY-MM-DD");
-      1: "星期一",
+      this.now.hour = this.$moment().format("HH");
-      2: "星期二",
+      this.now.minute = this.$moment().format("mm");
-      3: "星期三",
+      this.now.second = this.$moment().format("ss");
-      4: "星期四",
+      this.currentWork = this.$moment().format('dddd');
-      5: "星期五",
+    }, 1000);
-      6: "星期六",
+    
-    };
+
-    this.newTime =
+    // let dayList = {
-      this.$moment(new Date()).add(0, "year").format("YYYY-MM-DD") + " ";
+    //   0: "星期日",
-    this.currentWork = dayList[this.$moment().weekday()];
+    //   1: "星期一",
+    //   2: "星期二",
+    //   3: "星期三",
+    //   4: "星期四",
+    //   5: "星期五",
+    //   6: "星期六",
+    // };
+    // this.currentWork = dayList[this.$moment().weekday()];
   },
   methods: {
     search() {},
@@ -78,6 +95,11 @@ export default {
     rightAnimationAction() {
       this.rightAnimation = !this.rightAnimation;
     },
+    getcodeImg(){
+      getInfo().then(res => {
+        console.log(res,'codeImgres');
+      })
+    }
   },
   components: { myMap },
   // computed: {
@@ -88,18 +110,22 @@ export default {
   //     return staticRouter
   //   },
   // },
-  mounted() {
+  // mounted() {
-    let time = new Date(Date.now());
+  //   let time = new Date(Date.now());
-    // let time = new Date(Date.now());
+  //   // let time = new Date(Date.now());
 
-    // time.toTimeString();
+  //   // time.toTimeString();
-    this.time =
+  //   this.time =
-      time.toLocaleDateString().replace(/\//g, "-") +
+  //     time.toLocaleDateString().replace(/\//g, "-") +
-      " " +
+  //     " " +
-      time.toTimeString().substr(0, 8);
+  //     time.toTimeString().substr(0, 8);
-    this.time = this.time.split(" ")[1];
+  //   this.time = this.time.split(" ")[1];
-    // console.log(this.time)
+  //   // console.log(this.time)
-  },
+
+  //   setInterval(() => {
+  //     _this.startPreview()
+  //   }, 1000)
+  // },
 };
 </script>
 
@@ -233,6 +259,7 @@ div {
         font-family: "D-DIN";
         font-weight: 400;
         color: #d3eef2;
+        min-width: 80px;
       }
       .new-work {
         padding: 28px 0 0 10px;

src/views/bigScreen/map/index.vue

@@ -137,6 +137,7 @@
 </template>
 <script>
 import L from "leaflet";
+import VueAMap from '@vuemap/vue-amap';
 //引入坐标系转换插件
 // import "proj4";
 // import "proj4leaflet";
@@ -351,10 +352,10 @@ export default {
 
       this.globalMap.on("zoomend", (e) => {
         let zoom = this.globalMap.getZoom();
-        console.log("层级：", zoom);
+        // console.log("层级：", zoom);
       });
       this.globalMap.on("click", (e) => {
-        console.log("click：", e);
+        // console.log("click：", e);
       });
       // this.addLayer2();
       this.addLayer1();
@@ -412,7 +413,7 @@ export default {
             },
           });
         })
-        console.log(res,'网格');
+        // console.log(res,'网格');
       })
       // .addTo(this.mapLayers.mapLayer8);