本地告警页面V0
This commit is contained in:
龚皓
260
README.md
Normal file
260
README.md
Normal file
@@ -0,0 +1,260 @@
|
||||
# alarm_managerment
|
||||
|
||||
## Project Setup
|
||||
|
||||
```sh
|
||||
npm install
|
||||
```
|
||||
|
||||
### Compile and Hot-Reload for Development
|
||||
|
||||
```sh
|
||||
npm run dev
|
||||
```
|
||||
|
||||
### Type-Check, Compile and Minify for Production
|
||||
|
||||
```sh
|
||||
npm run build
|
||||
```
|
||||
|
||||
|
||||
|
||||
## 依赖包
|
||||
|
||||
```
|
||||
"axios": "^1.7.3",
|
||||
"echarts": "^5.5.1",
|
||||
"element-plus": "^2.7.8",
|
||||
"file-saver": "^2.0.5",
|
||||
"http-proxy-middleware": "^3.0.0",
|
||||
"jszip": "^3.10.1",
|
||||
"qs": "^6.12.3",
|
||||
"vue": "^3.4.29",
|
||||
"vue-router": "^4.4.0"
|
||||
```
|
||||
|
||||
> - axios:异步
|
||||
> - echarts:图标盘
|
||||
> - element-plus: 组件
|
||||
> - file-saver: 文件加载
|
||||
> - http-proxy-middleware: 请求跨域
|
||||
> - jszip:下载打包
|
||||
> - qs:静态资源请求
|
||||
> - vue:框架
|
||||
> - vue-router:路由
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## 目录结构
|
||||
|
||||
```
|
||||
卷 文档 的文件夹 PATH 列表
|
||||
卷序列号为 8BA4-D80A
|
||||
D:\JAVA\DEMO\TURING\ALARM\ALARM_DEV\ALARM_MANAGERMENT
|
||||
│ .gitignore
|
||||
│ dist.zip
|
||||
│ env.d.ts
|
||||
│ index.html
|
||||
│ package-lock.json
|
||||
│ package.json
|
||||
│ README.md
|
||||
│ tree.txt
|
||||
│ tsconfig.app.json
|
||||
│ tsconfig.json
|
||||
│ tsconfig.node.json
|
||||
│ vite.config.ts
|
||||
│ vite.config.ts.timestamp-1722563872625-dafa6df9d3ee1.mjs
|
||||
│
|
||||
├─.vscode
|
||||
│ extensions.json
|
||||
│
|
||||
├─dist
|
||||
│ │ icon.ico
|
||||
│ │ index.html
|
||||
│ │ login-bg.jpg
|
||||
│ │ logo.png
|
||||
│ │
|
||||
│ └─assets
|
||||
│ index-ChTHFsuW.css
|
||||
│ index-DvIh3OSh.js
|
||||
│
|
||||
├─node_modules
|
||||
│
|
||||
├─public
|
||||
│ icon.ico
|
||||
│ login-bg.jpg
|
||||
│ logo.png
|
||||
│
|
||||
└─src
|
||||
│ App.vue
|
||||
│ main.ts
|
||||
│
|
||||
├─components
|
||||
│ DemoPart.vue
|
||||
│ Layout.vue
|
||||
│
|
||||
├─html
|
||||
│ DeepFlow.vue
|
||||
│ DemoToHK.vue
|
||||
│ Flow.vue
|
||||
│ Login.vue
|
||||
│ PassFlow.vue
|
||||
│ Point.vue
|
||||
│
|
||||
├─router
|
||||
│ index.ts
|
||||
│
|
||||
├─static
|
||||
│ login-bg.jpg
|
||||
│ logo.png
|
||||
│
|
||||
└─utils
|
||||
axios-config.ts
|
||||
misc.ts
|
||||
store.ts
|
||||
Superbox.ts
|
||||
type.ts
|
||||
```
|
||||
|
||||
|
||||
|
||||
## Src文件说明
|
||||
|
||||
### 目录分解
|
||||
|
||||
```
|
||||
└─src
|
||||
│ App.vue
|
||||
│ main.ts
|
||||
│
|
||||
├─components
|
||||
│ DemoPart.vue
|
||||
│ Layout.vue
|
||||
│
|
||||
├─html
|
||||
│ DeepFlow.vue
|
||||
│ DemoToHK.vue
|
||||
│ Flow.vue
|
||||
│ Login.vue
|
||||
│ PassFlow.vue
|
||||
│ Point.vue
|
||||
│
|
||||
├─router
|
||||
│ index.ts
|
||||
│
|
||||
├─static
|
||||
│ login-bg.jpg
|
||||
│ logo.png
|
||||
│
|
||||
└─utils
|
||||
axios-config.ts
|
||||
misc.ts
|
||||
store.ts
|
||||
Superbox.ts
|
||||
type.ts
|
||||
```
|
||||
|
||||
|
||||
|
||||
### 根目录
|
||||
|
||||
```
|
||||
└─src
|
||||
│ App.vue
|
||||
│ main.ts
|
||||
├─components
|
||||
├─html
|
||||
├─router
|
||||
├─static
|
||||
└─utils
|
||||
```
|
||||
|
||||
#### App.vue(关键)
|
||||
|
||||
- 在index.html中可见
|
||||
|
||||
```
|
||||
<div id="app"></div>
|
||||
```
|
||||
|
||||
> 页面的app为页面主体框架结构，所有组件仿照类似嵌套方式申明和使用，其下囊括页面布局的其他页面和子页面组件
|
||||
> 相当于整体布局的一个载体（根父组件）
|
||||
|
||||
```
|
||||
<template>
|
||||
<div id="app">
|
||||
<router-view></router-view>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { provide } from 'vue';
|
||||
|
||||
export default {
|
||||
name: 'App',
|
||||
// setup() {
|
||||
//定义响应式数据
|
||||
// }
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* 添加你的样式 */
|
||||
</style>
|
||||
|
||||
```
|
||||
|
||||
> 作为父页面，不可避免需要向其下子组件传递参数，可通过导入vue中的provide方法直接传递多层次的子组件信息，子组件inject获取信息，当然在vue3中数据的变化需要用reactive包裹数据，创建响应式变化。
|
||||
|
||||
|
||||
|
||||
#### main.ts(关键)
|
||||
|
||||
> 对于app组件的挂载和改改父组件的依赖使用和申明需要在这里定义使用，当一些新的外部组件引用逻辑正确但是显示异常，可检查是否在根文件中引用
|
||||
|
||||
|
||||
|
||||
### 路由（Route）
|
||||
|
||||
```
|
||||
└─src
|
||||
├─router
|
||||
│ index.ts
|
||||
```
|
||||
|
||||
- 看门狗(to,form,next)
|
||||
|
||||
```
|
||||
import { createRouter, createWebHistory, createWebHashHistory } from 'vue-router'
|
||||
const routes = [
|
||||
{
|
||||
path: '/',
|
||||
name: '',
|
||||
component: ,
|
||||
children: []
|
||||
|
||||
}
|
||||
const router = createRouter({
|
||||
history: createWebHashHistory(),
|
||||
routes
|
||||
});
|
||||
router.beforeEach((to, from, next) => {
|
||||
const token = localStorage.getItem('token');
|
||||
if (to.matched.some(record => record.meta.requiresAuth) && !token) {
|
||||
next({ name: 'Login' });
|
||||
} else {
|
||||
next();
|
||||
}
|
||||
});
|
||||
export default router;
|
||||
```
|
||||
|
||||
|
||||
|
||||
### 组件页面
|
||||
|
||||
#### Layout.vue
|
||||
|
||||
Reference in New Issue
Block a user