axios 代理 配置及dayjs添加

package.json

@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "axios": "^0.21.1",
+    "dayjs": "^1.10.4",
     "echarts": "^5.1.1",
     "vue": "~3.0",
     "vue-router": "4",

src/App.vue

@@ -1,10 +1,10 @@
 <template>
-  <div class="justify-center flex flex-1 bg">
+  <div class="flex justify-center flex-1 bg">
     <RouterView class="flex-1" />
   </div>
 </template>
 
-<script setup lang="ts">
+<script lang="ts">
 </script>
 
 <style scoped>

src/api/api.ts

@@ -1,6 +1,9 @@
 import http from 'utils/http';
-import axios from 'axios'
 
-//
-export const getWarehouses = (param: any) => axios.post('/gateway/logistics/mbps/selAllMbps', { param });
-// export const getWarehouses = (param: any) => axios.get('/api/todos/1', );
+export interface GET_WAREHOUSES_PARAM {
+  parkId: number;
+  warehouseId?: number;
+}
+
+// 查询仓库列表及仓库下的摄像头
+export const getWarehouses = (param: GET_WAREHOUSES_PARAM) => http.post('/warehouse/selAllWarehouse', { param });

src/components/toolbar.vue

@@ -17,17 +17,20 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, reactive, toRefs, onMounted } from 'vue'
+import { defineComponent, reactive, toRefs, onMounted, getCurrentInstance } from 'vue'
 
 export default defineComponent({
   setup() {
+    const { ctx } = getCurrentInstance()
+    console.log(ctx.$dayjs)
+    const dateFormat = 'MM月DD日 HH:mm:ss'
     const data = reactive({
-      time: new Date().toLocaleString(),
+      time: ctx.$dayjs().format(dateFormat),
     })
 
     const interval = () => {
       setInterval(() => {
-        data.time = new Date().toLocaleString()
+        data.time = ctx.$dayjs().format(dateFormat)
       }, 1000)
     }
     onMounted(interval)

src/main.ts

@@ -3,12 +3,13 @@ import router, { setupRouter } from './router/index';
 import App from './App.vue'
 import './index.css'
 import http from 'utils/http';
-
+import dayjs from 'utils/dayjs';
 
 (async () => {
   const app = createApp(App);
 
   app.config.globalProperties.$http = http;
+  app.config.globalProperties.$dayjs = dayjs;
 
   // Configure routing
   setupRouter(app);

src/utils/dayjs.ts

@@ -0,0 +1,6 @@
+import * as dayjs from 'dayjs';
+import 'dayjs/locale/zh-cn'
+
+dayjs.locale('zh-cn')
+
+export default dayjs;

src/utils/http.ts

@@ -1,17 +1,37 @@
 import axios, { AxiosRequestConfig, AxiosResponse } from 'axios';
 
 const service = axios.create({
-  // baseURL: '/gateway/logistics'
+  baseURL: '/gateway/logistics'
 });
 
 service.interceptors.request.use((config: AxiosRequestConfig) => {
+  // before request do something
 
   return config;
-});
+}, error => Promise.reject(error));
 
 service.interceptors.response.use((response: AxiosResponse) => {
-
-  return response;
+  // 处理响应数据
+  console.log('responseL: ', response);
+  if (response.status !== 200) {
+    alert('请检查服务器连接')
+    return Promise.reject('请检查服务器连接');
+  } else {
+    if (!response.data) {
+      console.warn('返回参数缺少data');
+      return Promise.reject('返回参数缺少data');
+    } else {
+      const { code, data, msg } = response.data
+      if ( code === 200) {
+        return data;
+      } else {
+        return Promise.reject(msg || 'error')
+      }
+    }
+  }
+}, error => {
+  console.warn(error);
+  return Promise.reject(error);
 })
 
 export default service;

src/views/repo-five.vue

@@ -1,3 +1,4 @@
+<!-- 5号仓库 -->
 <template>
   <div class="flex flex-col">
     <!-- 标题 -->
@@ -28,6 +29,8 @@
     </div>
     <!-- 悬浮监控 -->
     <img @click="show = true" class="monitor" src="../assets/monitor.png" style />
+
+    <!-- FIXME: 不是显示一个图片 背景 + iframe显示摄像头内容 + 关闭 + 全屏 + 退出全屏 -->
     <img @click="show = false" class="vedio" src="../assets/vedio.png" v-show="show" />
   </div>
 </template>
@@ -51,18 +54,20 @@ export default defineComponent({
     Heat,
     Curve,
   },
+
   data() {
     return { show: false }
   },
+
   created() {
-    this.getData()
+    this.getWarehouses()
   },
   methods: {
-    async getData() {
-      const param = { parkId: 0 }
+    // 获取仓库信息
+    async getWarehouses() {
       try {
-        const res = await getWarehouses(param)
-        console.log('res: ', res)
+        const data = await getWarehouses({ parkId: 0 })
+        console.log('data: ', data)
       } catch (error) {
         console.log('error: ', error)
       }

tsconfig.json

@@ -9,6 +9,8 @@
     "lib": ["esnext", "dom"],
     "types": ["vite/client"],
     "plugins": [{ "name": "@vuedx/typescript-plugin-vue" }],
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
     "paths": {
       "@/*": ["./src/*"],
       "views/*": ["./src/views"],

vite.config.js

@@ -19,12 +19,12 @@ export default ({ mode }) => {
           changeOrigin: true,
           rewrite: (path) => path.replace(/^\/api/, ''),
         },
-        '/getaway': {
-          target: 'https://test.tall.wiki/gateway',
+        '/gateway': {
+          target: 'http://test.tall.wiki/gateway',
           changeOrigin: true,
           rewrite: (path) => {
             console.log('path: ', path)
-            path.replace(/^\/getaway/, '')
+            return path.replace(/^\/gateway/, '')
           },
         },
       },

yarn.lock

@@ -1180,6 +1180,11 @@ csstype@^2.6.8:
   resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.16.tgz#544d69f547013b85a40d15bff75db38f34fe9c39"
   integrity sha512-61FBWoDHp/gRtsoDkq/B1nWrCUG/ok1E3tUrcNbZjsE9Cxd9yzUirjS3+nAATB8U4cTtaQmAHbNndoFz5L6C9Q==
 
+dayjs@^1.10.4:
+  version "1.10.4"
+  resolved "https://registry.yarnpkg.com/dayjs/-/dayjs-1.10.4.tgz#8e544a9b8683f61783f570980a8a80eaf54ab1e2"
+  integrity sha512-RI/Hh4kqRc1UKLOAf/T5zdMMX5DQIlDxwUe3wSyMMnEbGunnpENCdbUgM+dW7kXidZqCttBrmw7BhN4TMddkCw==
+
 de-indent@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/de-indent/-/de-indent-1.0.2.tgz#b2038e846dc33baa5796128d0804b455b8c1e21d"