云坤无感登录

.env.development

@@ -5,8 +5,9 @@ VUE_APP_TITLE = 云坤地图
 ENV = 'development'
 
 # 云坤地图/开发环境
-# VUE_APP_BASE_API = 'https://vue.ruoyi.vip/prod-api'
+# VUE_APP_BASE_API = 'http://192.168.0.91/gps-web/api'
 VUE_APP_BASE_API = 'http://39.101.188.84:9066'
+VUE_APP_BASE_API_YUNKUN = 'http://192.168.0.91/gps-web/api'
 
 # 路由懒加载
 VUE_CLI_BABEL_TRANSPILE_MODULES = true

src/api/yunkun/yunkun.js

@@ -0,0 +1,22 @@
+import request from "@/utils/request-yunkun.js";
+const sessionId = localStorage.getItem("SESSION_ID");
+
+// 登录
+export function lgoin(query) {
+  return request({
+    url: "/login.jsp?userId=99999&password=6d0fd76ab81325588d8065ec1036fdd3&loginType=user",
+    method: "get",
+    params: query,
+  });
+}
+
+// 查询车辆明细列表
+
+export function getCarList(query) {
+  query.sessionId = sessionId;
+  return request({
+    url: "/get_car_list.jsp",
+    method: "GET",
+    params: query,
+  });
+}

src/components/grids.vue

@@ -7,7 +7,7 @@
 
       <div class="items-wrapper" ref="itemsWrapper">
         <div v-for="(item, index) in items" :key="index" class="item">
-          <img src="" class="video-src" alt="" />
+          <img src="../assets/images/video.jpg" class="video-src" alt="" />
           <div class="video-data">
             <div class="video-name">视频名称</div>
 

src/utils/refresh.js

@@ -0,0 +1,22 @@
+import { lgoin } from "@/api/yunkun/yunkun.js";
+
+let promise;
+
+export async function refreshToken() {
+  if (promise) {
+    return promise;
+  }
+  promise = new Promise(async (resolve) => {
+    let res = await lgoin({ __isRefreshToken: true });
+    localStorage.setItem("SESSION_ID", res.sessionId); //存token
+    resolve(res.rspCode == 1);
+  });
+  promise.finally(() => {
+    promise = null;
+  });
+  return promise;
+}
+
+export function isRefreshRequest(config) {
+  return !!config.__isRefreshToken; //两个取反，变成boolean
+}

src/utils/request-yunkun.js

@@ -0,0 +1,216 @@
+import axios from "axios";
+import { Notification, MessageBox, Message, Loading } from "element-ui";
+import store from "@/store";
+import { getToken } from "@/utils/auth";
+import errorCode from "@/utils/errorCode";
+import { tansParams, blobValidate } from "@/utils/ruoyi";
+import cache from "@/plugins/cache";
+import { saveAs } from "file-saver";
+
+import { refreshToken, isRefreshRequest } from "@/utils/refresh.js";
+
+let downloadLoadingInstance;
+// 是否显示重新登录
+export let isRelogin = { show: false };
+
+axios.defaults.headers["Content-Type"] = "application/json;charset=utf-8";
+// 创建axios实例
+const service = axios.create({
+  // axios中请求配置有baseURL选项，表示请求URL公共部分
+  baseURL: process.env.VUE_APP_BASE_API_YUNKUN,
+  // 超时
+  timeout: 10000,
+});
+
+// request拦截器
+service.interceptors.request.use(
+  (config) => {
+    // // 是否需要设置 token
+    // const isToken = (config.headers || {}).isToken === false;
+    // // 是否需要防止数据重复提交
+    const isRepeatSubmit = (config.headers || {}).repeatSubmit === false;
+    // if (getToken() && !isToken) {
+    //   config.headers["Authorization"] = "Bearer " + getToken(); // 让每个请求携带自定义token 请根据实际情况自行修改
+    // }
+    // get请求映射params参数
+    if (config.method === "get" && config.params) {
+      let url = config.url + "?" + tansParams(config.params);
+      url = url.slice(0, -1);
+      config.params = {};
+      config.url = url;
+    }
+    if (
+      !isRepeatSubmit &&
+      (config.method === "post" || config.method === "put")
+    ) {
+      const requestObj = {
+        url: config.url,
+        data:
+          typeof config.data === "object"
+            ? JSON.stringify(config.data)
+            : config.data,
+        time: new Date().getTime(),
+      };
+      const requestSize = Object.keys(JSON.stringify(requestObj)).length; // 请求数据大小
+      const limitSize = 5 * 1024 * 1024; // 限制存放数据5M
+      if (requestSize >= limitSize) {
+        console.warn(
+          `[${config.url}]: ` +
+            "请求数据大小超出允许的5M限制，无法进行防重复提交验证。"
+        );
+        return config;
+      }
+      const sessionObj = cache.session.getJSON("sessionObj");
+      if (
+        sessionObj === undefined ||
+        sessionObj === null ||
+        sessionObj === ""
+      ) {
+        cache.session.setJSON("sessionObj", requestObj);
+      } else {
+        const s_url = sessionObj.url; // 请求地址
+        const s_data = sessionObj.data; // 请求数据
+        const s_time = sessionObj.time; // 请求时间
+        const interval = 1000; // 间隔时间(ms)，小于此时间视为重复提交
+        if (
+          s_data === requestObj.data &&
+          requestObj.time - s_time < interval &&
+          s_url === requestObj.url
+        ) {
+          const message = "数据正在处理，请勿重复提交";
+          console.warn(`[${s_url}]: ` + message);
+          return Promise.reject(new Error(message));
+        } else {
+          cache.session.setJSON("sessionObj", requestObj);
+        }
+      }
+    }
+    return config;
+  },
+  (error) => {
+    console.log(error);
+    Promise.reject(error);
+  }
+);
+
+// 响应拦截器
+service.interceptors.response.use(
+  async (res) => {
+    // 未设置状态码则默认成功状态
+    const code = res.data.code || 200;
+    // 获取错误信息
+    const msg = errorCode[code] || res.data.msg || errorCode["default"];
+    // 二进制数据则直接返回
+    if (
+      res.request.responseType === "blob" ||
+      res.request.responseType === "arraybuffer"
+    ) {
+      return res.data;
+    }
+    //接口调取失败 -- sessionId
+    if (code == 200 && res.data.rspCode == 0 && !isRefreshRequest(res.config)) {
+      const isSucceed = await refreshToken();
+      if (isSucceed) {
+        //重新给接口中的sessionId赋值
+        const sessionId = localStorage.getItem("SESSION_ID");
+        res.config.url = res.config.url.replace(
+          /(sessionId=)[^\&]+/,
+          "$1" + sessionId
+        );
+        let result = await service.request(res.config); //重新请求
+        return result;
+      } else {
+        Message.error("获取sessionId失败!");
+      }
+    }
+    if (code === 401) {
+      if (!isRelogin.show) {
+        isRelogin.show = true;
+        MessageBox.confirm(
+          "登录状态已过期，您可以继续留在该页面，或者重新登录",
+          "系统提示",
+          {
+            confirmButtonText: "重新登录",
+            cancelButtonText: "取消",
+            type: "warning",
+          }
+        )
+          .then(() => {
+            isRelogin.show = false;
+            store.dispatch("LogOut").then(() => {
+              location.href = "/index";
+            });
+          })
+          .catch(() => {
+            isRelogin.show = false;
+          });
+      }
+      return Promise.reject("无效的会话，或者会话已过期，请重新登录。");
+    } else if (code === 500) {
+      Message({ message: msg, type: "error" });
+      return Promise.reject(new Error(msg));
+    } else if (code === 601) {
+      Message({ message: msg, type: "warning" });
+      return Promise.reject("error");
+    } else if (code !== 200) {
+      Notification.error({ title: msg });
+      return Promise.reject("error");
+    } else {
+      return res.data;
+    }
+  },
+  (error) => {
+    console.log("err" + error);
+    let { message } = error;
+    if (message == "Network Error") {
+      message = "后端接口连接异常";
+    } else if (message.includes("timeout")) {
+      message = "系统接口请求超时";
+    } else if (message.includes("Request failed with status code")) {
+      message = "系统接口" + message.substr(message.length - 3) + "异常";
+    }
+    Message({ message: message, type: "error", duration: 5 * 1000 });
+    return Promise.reject(error);
+  }
+);
+
+// 通用下载方法
+export function download(url, params, filename, config) {
+  downloadLoadingInstance = Loading.service({
+    text: "正在下载数据，请稍候",
+    spinner: "el-icon-loading",
+    background: "rgba(0, 0, 0, 0.7)",
+  });
+  return service
+    .post(url, params, {
+      transformRequest: [
+        (params) => {
+          return tansParams(params);
+        },
+      ],
+      headers: { "Content-Type": "application/x-www-form-urlencoded" },
+      responseType: "blob",
+      ...config,
+    })
+    .then(async (data) => {
+      const isBlob = blobValidate(data);
+      if (isBlob) {
+        const blob = new Blob([data]);
+        saveAs(blob, filename);
+      } else {
+        const resText = await data.text();
+        const rspObj = JSON.parse(resText);
+        const errMsg =
+          errorCode[rspObj.code] || rspObj.msg || errorCode["default"];
+        Message.error(errMsg);
+      }
+      downloadLoadingInstance.close();
+    })
+    .catch((r) => {
+      console.error(r);
+      Message.error("下载文件出现错误，请联系管理员！");
+      downloadLoadingInstance.close();
+    });
+}
+
+export default service;

src/views/car.vue

@@ -43,6 +43,7 @@
 import carJSON from "@/api/carrRealtimeLocation.json";
 import MarsMap from "@/components/mars-map";
 // import grids from "@/components/grids.vue";
+import { lgoin, getCarList } from "@/api/yunkun/yunkun.js";
 export default {
   data() {
     const basePathUrl = window.basePathUrl || "";
@@ -63,6 +64,10 @@ export default {
             pitch: -31.5,
           },
         },
+
+        control: {
+          contextmenu: { preventDefault: false, hasDefault: false },
+        },
         basemaps: [
           {
             name: "mapbox影像图",
@@ -91,8 +96,25 @@ export default {
   mounted() {
     // 在mounted钩子中添加全局点击事件监听
     document.addEventListener("click", this.handleClickOutside);
+
+    this.getCarList();
   },
   methods: {
+    async getCarList() {
+      let res = await getCarList();
+      // console.log(res, "ss");
+    },
+
+    async getlogin() {
+      const data = {
+        userId: "99999",
+        password: "6d0fd76ab81325588d8065ec1036fdd3",
+        loginType: "user",
+      };
+      let res = await lgoin();
+      console.log(res, "登录数据");
+    },
+
     // 获取车辆信息
     getCarLocation() {
       this.createCar(carJSON.list);
@@ -109,7 +131,8 @@ export default {
           position: [parseFloat(item.lng), parseFloat(item.lat)],
           style: {
             heading: parseInt(item.drct),
-            url: _this.carUrl,
+            //url: _this.carUrl,
+            url: "//data.mars3d.cn/gltf/imap/ce2fddca7bac436d8d318bcd4fdf2d69/gltf/gltf2.gltf",
             scale: 1,
             minimumPixelSize: 40,
             silhouette: true,

src/views/carInfo.vue

@@ -38,6 +38,9 @@ export default {
             pitch: -31.5,
           },
         },
+        control: {
+          contextmenu: { preventDefault: false, hasDefault: false },
+        },
         basemaps: [
           {
             name: "mapbox影像图",
@@ -121,9 +124,9 @@ export default {
         },
         model: {
           show: true,
-          url: _this.carUrl,
+          url: "//data.mars3d.cn/gltf/imap/ce2fddca7bac436d8d318bcd4fdf2d69/gltf/gltf2.gltf",
           scale: 0.3,
-          heading: -120,
+
           minimumPixelSize: 55,
           silhouette: true,
           silhouetteColor: "#fff",

src/views/index.vue

@@ -22,6 +22,7 @@
 <script>
 import MarsMap from "@/components/mars-map";
 import { getAreaData } from "@/api/yunkun/index.js";
+
 export default {
   data() {
     const basePathUrl = window.basePathUrl || "";

src/views/nationwide.vue

@@ -93,7 +93,7 @@ export default {
               lastMaterialType: "Image",
               materialOptions: {
                 materialType: "Image",
-                image: require("../assets/images/姑苏区.png"),
+                image: require("../assets/images/map-bg.jpg"),
                 opacity: 1,
                 repeat_x: 1,
                 repeat_y: 1,
@@ -109,21 +109,21 @@ export default {
               setHeight: 900009,
             },
           });
-          // const wall = new mars3d.graphic.WallPrimitive({
-          //   positions: item.positions,
-          //   style: {
-          //     setHeight: -20000,
-          //     diffHeight: 900000, // 墙高
-          //     width: 10,
-          //     materialType: mars3d.MaterialType.Image2,
-          //     materialOptions: {
-          //       image: require("../assets/images/fence-top.png"),
-          //       color: "#0071F8",
-          //     },
-          //   },
-          // });
+          const wall = new mars3d.graphic.WallPrimitive({
+            positions: item.positions,
+            style: {
+              setHeight: -20000,
+              diffHeight: 900000, // 墙高
+              width: 10,
+              materialType: mars3d.MaterialType.Image2,
+              materialOptions: {
+                image: require("../assets/images/fence-top.png"),
+                color: "#0071F8",
+              },
+            },
+          });
           this.mapLayer.china.addGraphic(polygonEntity);
-          // this.mapLayer.china.addGraphic(wall);
+          this.mapLayer.china.addGraphic(wall);
         });
 
         this.createEchartsLayer();