# local_alert

本地告警页面
=======
## 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