local_alert

本地告警页面

Project Setup

npm install

Compile and Hot-Reload for Development

npm run dev

Type-Check, Compile and Minify for Production

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;

本地告警首页ViewList布局