commit
631d924798
37 changed files with 5525 additions and 0 deletions
@ -0,0 +1 @@ |
|||
VITE_TITLE=智慧园区 |
|||
@ -0,0 +1,5 @@ |
|||
VITE_API_URL=https://test.tall.wiki/gateway |
|||
VITE_ROOT_URL=https://test.tall.wiki |
|||
VITE_PROXY=[["/gateway", "https://test.tall.wiki/gateway"]] |
|||
VITE_BASE_URL=/gateway/logistics |
|||
VITE_PUBLIC_PATH=/public |
|||
@ -0,0 +1,5 @@ |
|||
VITE_API_URL=https://www.tall.wiki/gateway |
|||
VITE_ROOT_URL=https://www.tall.wiki |
|||
VITE_PROXY=[["/gateway", "https://www.tall.wiki/gateway"]] |
|||
VITE_BASE_URL=/gateway/logistics |
|||
VITE_PUBLIC_PATH=/public |
|||
@ -0,0 +1,21 @@ |
|||
module.exports = { |
|||
env: { |
|||
browser: true, |
|||
es2021: true, |
|||
}, |
|||
extends: [ |
|||
'plugin:vue/essential', |
|||
'airbnb-base', |
|||
], |
|||
parserOptions: { |
|||
ecmaVersion: 12, |
|||
parser: '@typescript-eslint/parser', |
|||
sourceType: 'module', |
|||
}, |
|||
plugins: [ |
|||
'vue', |
|||
'@typescript-eslint', |
|||
], |
|||
rules: { |
|||
}, |
|||
}; |
|||
@ -0,0 +1,5 @@ |
|||
node_modules |
|||
.DS_Store |
|||
dist |
|||
dist-ssr |
|||
*.local |
|||
@ -0,0 +1,27 @@ |
|||
# Vue 3 + Typescript + Vite |
|||
|
|||
This template should help get you started developing with Vue 3 and Typescript in Vite. |
|||
|
|||
## Recommended IDE Setup |
|||
|
|||
[VSCode](https://code.visualstudio.com/) + [Vetur](https://marketplace.visualstudio.com/items?itemName=octref.vetur). Make sure to enable `vetur.experimental.templateInterpolationService` in settings! |
|||
|
|||
### If Using `<script setup>` |
|||
|
|||
[`<script setup>`](https://github.com/vuejs/rfcs/pull/227) is a feature that is currently in RFC stage. To get proper IDE support for the syntax, use [Volar](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar) instead of Vetur (and disable Vetur). |
|||
|
|||
## Type Support For `.vue` Imports in TS |
|||
|
|||
Since TypeScript cannot handle type information for `.vue` imports, they are shimmed to be a generic Vue component type by default. In most cases this is fine if you don't really care about component prop types outside of templates. However, if you wish to get actual prop types in `.vue` imports (for example to get props validation when using manual `h(...)` calls), you can use the following: |
|||
|
|||
### If Using Volar |
|||
|
|||
Run `Volar: Switch TS Plugin on/off` from VSCode command palette. |
|||
|
|||
### If Using Vetur |
|||
|
|||
1. Install and add `@vuedx/typescript-plugin-vue` to the [plugins section](https://www.typescriptlang.org/tsconfig#plugins) in `tsconfig.json` |
|||
2. Delete `src/shims-vue.d.ts` as it is no longer needed to provide module info to Typescript |
|||
3. Open `src/main.ts` in VSCode |
|||
4. Open the VSCode command palette |
|||
5. Search and run "Select TypeScript version" -> "Use workspace version" |
|||
@ -0,0 +1,22 @@ |
|||
import type { ProxyOptions } from 'vite' |
|||
type ProxyItem = [string, string]; |
|||
type ProxyList = ProxyItem[]; |
|||
type ProxyTargetList = Record<string, ProxyOptions & { rewrite: (path: string) => string }>; |
|||
|
|||
const httpsRE = /^https:\/\//; |
|||
|
|||
export const createProxy = (list: ProxyList = []) => { |
|||
const ret: ProxyTargetList = {}; |
|||
for (const [prefix, target] of list) { |
|||
const isHttps = httpsRE.test(target); |
|||
|
|||
ret[prefix] = { |
|||
target, |
|||
changeOrigin: true, |
|||
ws: true, |
|||
rewrite: path => path.replace(new RegExp(`^${prefix}`), ''), |
|||
...(isHttps ? { secure: false } : {}), |
|||
} |
|||
} |
|||
return ret; |
|||
} |
|||
@ -0,0 +1,16 @@ |
|||
<!DOCTYPE html> |
|||
<html lang="en"> |
|||
<head> |
|||
<meta charset="UTF-8" /> |
|||
<link rel="icon" href="/favicon.ico" /> |
|||
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
|||
<title>智慧物流园区-数字孪生</title> |
|||
<script> |
|||
document.documentElement.style.fontSize = document.documentElement.clientWidth / 1920 + 'px'; |
|||
</script> |
|||
</head> |
|||
<body> |
|||
<div id="app"></div> |
|||
<script type="module" src="/src/main.ts"></script> |
|||
</body> |
|||
</html> |
|||
File diff suppressed because it is too large
@ -0,0 +1,35 @@ |
|||
{ |
|||
"name": "park-h", |
|||
"version": "0.0.0", |
|||
"scripts": { |
|||
"dev": "vite --mode development", |
|||
"dev:prod": "vite --mode production", |
|||
"build:test": "vue-tsc --noEmit && vite build --mode development", |
|||
"build:prod": "vue-tsc --noEmit && vite build --mode production", |
|||
"serve": "vite preview" |
|||
}, |
|||
"dependencies": { |
|||
"axios": "^0.21.1", |
|||
"dayjs": "^1.10.4", |
|||
"vue": "^3.0.5", |
|||
"vue-router": "4" |
|||
}, |
|||
"devDependencies": { |
|||
"@types/node": "^15.0.2", |
|||
"@typescript-eslint/eslint-plugin": "^4.22.1", |
|||
"@typescript-eslint/parser": "^4.22.1", |
|||
"@vitejs/plugin-vue": "^1.2.2", |
|||
"@vue/compiler-sfc": "^3.0.5", |
|||
"autoprefixer": "^10.2.5", |
|||
"eslint": "^7.26.0", |
|||
"eslint-config-airbnb-base": "^14.2.1", |
|||
"eslint-plugin-import": "^2.22.1", |
|||
"eslint-plugin-vue": "^7.9.0", |
|||
"postcss": "^8.2.14", |
|||
"prettier": "^2.3.0", |
|||
"tailwindcss": "^2.1.2", |
|||
"typescript": "^4.1.3", |
|||
"vite": "^2.2.3", |
|||
"vue-tsc": "^0.0.24" |
|||
} |
|||
} |
|||
@ -0,0 +1,6 @@ |
|||
module.exports = { |
|||
plugins: { |
|||
tailwindcss: {}, |
|||
autoprefixer: {}, |
|||
}, |
|||
} |
|||
|
After Width: | Height: | Size: 4.2 KiB |
@ -0,0 +1,28 @@ |
|||
<template> |
|||
<router-view></router-view> |
|||
</template> |
|||
|
|||
<script lang="ts"> |
|||
import { defineComponent } from "vue"; |
|||
|
|||
export default defineComponent({ |
|||
name: "App", |
|||
}); |
|||
</script> |
|||
|
|||
<style> |
|||
html, |
|||
body, |
|||
#app { |
|||
display: block; |
|||
width: 100%; |
|||
height: 100%; |
|||
} |
|||
#app { |
|||
font-family: Avenir, Helvetica, Arial, sans-serif; |
|||
-webkit-font-smoothing: antialiased; |
|||
-moz-osx-font-smoothing: grayscale; |
|||
background: url("./assets/img/bg.png") no-repeat left top; |
|||
background-size: cover; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,18 @@ |
|||
import http from 'utils/http'; |
|||
|
|||
export interface GET_WAREHOUSES_PARAM { |
|||
parkId: number; |
|||
warehouseId?: number; |
|||
} |
|||
|
|||
export interface GET_TEAM_AND_HUMIDITY_PARAM { |
|||
endTime: number; |
|||
startTime: number; |
|||
warehouseId?: number; |
|||
} |
|||
|
|||
// 查询仓库列表及仓库下的摄像头
|
|||
export const getWarehouses = (param: GET_WAREHOUSES_PARAM) => http.post('/warehouse/selAllWarehouse', { param }); |
|||
|
|||
// 查询温度与湿度
|
|||
export const getTeamAndHumidity = (param: GET_TEAM_AND_HUMIDITY_PARAM) => http.post('/mbps/selTeamAndHumidity', { param }); |
|||
|
After Width: | Height: | Size: 113 KiB |
|
After Width: | Height: | Size: 38 KiB |
|
After Width: | Height: | Size: 5.6 KiB |
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 1.5 KiB |
|
After Width: | Height: | Size: 686 KiB |
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 6.7 KiB |
@ -0,0 +1,124 @@ |
|||
<template> |
|||
<div class="top-wrap"> |
|||
<div class="left-wrap"> |
|||
<!-- 这个空div有样式作用 --> |
|||
<div> |
|||
<div>40%</div> |
|||
<div>70℃</div> |
|||
</div> |
|||
</div> |
|||
<h3 class="title">现海园区5号仓库</h3> |
|||
<div class="right-wrap"> |
|||
<div class="time">{{ time }}</div> |
|||
<div class="fire"></div> |
|||
<div class="water"></div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script lang="ts"> |
|||
import { |
|||
defineComponent, |
|||
getCurrentInstance, |
|||
onMounted, |
|||
reactive, |
|||
toRefs, |
|||
} from "vue"; |
|||
|
|||
export default defineComponent({ |
|||
setup() { |
|||
const { ctx } = getCurrentInstance(); |
|||
const now = ctx.$dayjs().format("MM月DD日 HH:mm:ss"); |
|||
const data = reactive({ |
|||
time: now, |
|||
}); |
|||
onMounted(() => { |
|||
setInterval(() => { |
|||
data.time = ctx.$dayjs().format("MM月DD日 HH:mm:ss"); |
|||
}, 1000); |
|||
}); |
|||
return { ...toRefs(data) }; |
|||
}, |
|||
}); |
|||
</script> |
|||
|
|||
<style scoped> |
|||
.top-wrap { |
|||
width: 100%; |
|||
height: 100rem; |
|||
display: flex; |
|||
align-items: center; |
|||
background: url("../assets/img/bg-top.png") no-repeat left top; |
|||
background-size: 100%; |
|||
position: relative; |
|||
color: #fff; |
|||
} |
|||
.top-wrap:after { |
|||
content: ""; |
|||
display: block; |
|||
position: absolute; |
|||
left: 0; |
|||
bottom: 0; |
|||
transform: translate3d(0, 100%, 0); |
|||
height: 10rem; |
|||
width: 100%; |
|||
background: url("../assets/img/border-top.png") no-repeat left top; |
|||
background-size: contain; |
|||
} |
|||
.top-wrap .title { |
|||
flex: 1; |
|||
font-family: FZCHSJW, FZCHSJW--GB1-0; |
|||
color: #fff; |
|||
font-size: 36rem; |
|||
font-weight: bold; |
|||
letter-spacing: 4rem; |
|||
text-align: center; |
|||
} |
|||
.top-wrap .left-wrap { |
|||
position: absolute; |
|||
left: 30rem; |
|||
top: 0; |
|||
height: 100rem; |
|||
display: flex; |
|||
align-items: center; |
|||
font-size: 17rem; |
|||
} |
|||
.top-wrap .left-wrap:before { |
|||
content: ""; |
|||
display: block; |
|||
width: 42rem; |
|||
height: 42rem; |
|||
background: url("../assets/img/cloud.png") no-repeat center; |
|||
background-size: contain; |
|||
margin-right: 20rem; |
|||
} |
|||
.top-wrap .right-wrap { |
|||
position: absolute; |
|||
right: 30rem; |
|||
top: 0; |
|||
height: 100rem; |
|||
display: flex; |
|||
align-items: center; |
|||
font-size: 17rem; |
|||
} |
|||
.top-wrap .right-wrap .time { |
|||
font-size: 26rem; |
|||
font-weight: bold; |
|||
} |
|||
.top-wrap .right-wrap .fire, |
|||
.top-wrap .right-wrap .water { |
|||
width: 42rem; |
|||
height: 42rem; |
|||
background-repeat: no-repeat; |
|||
background-position: center; |
|||
background-size: contain; |
|||
margin-left: 40rem; |
|||
} |
|||
.top-wrap .right-wrap .fire { |
|||
background-image: url("../assets/img/fire.png"); |
|||
} |
|||
|
|||
.top-wrap .right-wrap .water { |
|||
background-image: url("../assets/img/water.png"); |
|||
} |
|||
</style> |
|||
@ -0,0 +1,4 @@ |
|||
/* ./src/index.css */ |
|||
@tailwind base; |
|||
@tailwind components; |
|||
@tailwind utilities; |
|||
@ -0,0 +1,26 @@ |
|||
import { createApp } from 'vue' |
|||
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); |
|||
|
|||
// Mount when the route is ready
|
|||
// https://next.router.vuejs.org/api/#isready
|
|||
await router.isReady(); |
|||
|
|||
app.mount('#app', true); |
|||
|
|||
if (import.meta.env.DEV) { |
|||
window.__APP__ = app; |
|||
} |
|||
})(); |
|||
@ -0,0 +1,25 @@ |
|||
import type { RouteRecordRaw } from 'vue-router'; |
|||
import type { App } from 'vue'; |
|||
|
|||
import { createRouter, createWebHashHistory } from 'vue-router'; |
|||
|
|||
|
|||
// app router
|
|||
const router = createRouter({ |
|||
history: createWebHashHistory(import.meta.env.VITE_PUBLIC_PATH), |
|||
routes: [ |
|||
{ path: '/', redirect: '/5' }, |
|||
{ path: '/5', component: () => import('views/repo-5.vue') }, |
|||
{ path: '/jht', component: () => import('views/jht.vue') }, |
|||
{ path: '/xh', component: () => import('views/xh.vue') }, |
|||
{ path: '/yj', component: () => import('views/repo-yj.vue') }, |
|||
], |
|||
strict: true |
|||
}); |
|||
|
|||
// config router
|
|||
export function setupRouter(app: App<Element>) { |
|||
app.use(router); |
|||
} |
|||
|
|||
export default router; |
|||
@ -0,0 +1,5 @@ |
|||
declare module '*.vue' { |
|||
import { DefineComponent } from 'vue' |
|||
const component: DefineComponent<{}, {}, any> |
|||
export default component |
|||
} |
|||
@ -0,0 +1,6 @@ |
|||
import * as dayjs from 'dayjs'; |
|||
import 'dayjs/locale/zh-cn' |
|||
|
|||
dayjs.locale('zh-cn') |
|||
|
|||
export default dayjs; |
|||
@ -0,0 +1,39 @@ |
|||
import axios, { AxiosRequestConfig, AxiosResponse } from 'axios'; |
|||
|
|||
console.log('import.meta.env: ', import.meta.env); |
|||
|
|||
const service = axios.create({ |
|||
baseURL: import.meta.env.VITE_BASE_URL |
|||
}); |
|||
|
|||
service.interceptors.request.use((config: AxiosRequestConfig) => { |
|||
// before request do something
|
|||
|
|||
return config; |
|||
}, error => Promise.reject(error)); |
|||
|
|||
service.interceptors.response.use((response: AxiosResponse) => { |
|||
// 处理响应数据
|
|||
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; |
|||
@ -0,0 +1,13 @@ |
|||
<template> |
|||
<top-bar></top-bar> |
|||
</template> |
|||
|
|||
<script lang="ts"> |
|||
import TopBar from "comp/top-bar.vue"; |
|||
import { defineComponent } from "vue"; |
|||
|
|||
export default defineComponent({ |
|||
components: { TopBar }, |
|||
setup() {}, |
|||
}); |
|||
</script> |
|||
@ -0,0 +1,11 @@ |
|||
module.exports = { |
|||
purge: [], |
|||
darkMode: false, // or 'media' or 'class'
|
|||
theme: { |
|||
extend: {}, |
|||
}, |
|||
variants: { |
|||
extend: {}, |
|||
}, |
|||
plugins: [], |
|||
} |
|||
@ -0,0 +1,26 @@ |
|||
{ |
|||
"compilerOptions": { |
|||
"target": "esnext", |
|||
"module": "esnext", |
|||
"moduleResolution": "node", |
|||
"strict": true, |
|||
"jsx": "preserve", |
|||
"sourceMap": true, |
|||
"resolveJsonModule": true, |
|||
"lib": ["esnext", "dom"], |
|||
"types": ["vite/client"], |
|||
"esModuleInterop": true, |
|||
"allowSyntheticDefaultImports": true, |
|||
"paths": { |
|||
"@/*": ["./src/*"], |
|||
"views/*": ["./src/views"], |
|||
"utils/*": ["./src/utils"], |
|||
"comp/*": ["./src/components"], |
|||
"api/*": ["./src/api"], |
|||
"router/*": ["./src/router"], |
|||
"store/*": ["./src/store"], |
|||
"assets/*": ["./src/assets"], |
|||
} |
|||
}, |
|||
"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"] |
|||
} |
|||
@ -0,0 +1,33 @@ |
|||
import * as path from 'path' |
|||
import { defineConfig, loadEnv } from 'vite' |
|||
import vue from '@vitejs/plugin-vue' |
|||
import pkg from './package.json' |
|||
import { createProxy } from './build/proxy'; |
|||
|
|||
export default ({ mode }) => { |
|||
const { VITE_PROXY } = loadEnv(mode, process.cwd()); |
|||
console.log("🚀 ~ file: vite.config.ts ~ line 8 ~ VITE_PROXY", createProxy(JSON.parse(VITE_PROXY))) |
|||
return defineConfig({ |
|||
plugins: [vue()], |
|||
server: { |
|||
open: true, |
|||
proxy: createProxy(JSON.parse(VITE_PROXY)), |
|||
|
|||
}, |
|||
resolve: { |
|||
alias: { |
|||
'@': path.resolve(__dirname, './src'), |
|||
comp: path.resolve(__dirname, './src/components'), |
|||
views: path.resolve(__dirname, './src/views'), |
|||
api: path.resolve(__dirname, './src/api'), |
|||
utils: path.resolve(__dirname, './src/utils'), |
|||
assets: path.resolve(__dirname, './src/assets'), |
|||
store: path.resolve(__dirname, './src/store'), |
|||
router: path.resolve(__dirname, './src/router'), |
|||
}, |
|||
}, |
|||
define: { |
|||
_APP_VERSION: JSON.stringify(pkg.version), |
|||
}, |
|||
}) |
|||
} |
|||
File diff suppressed because it is too large
Loading…
Reference in new issue