本地告警页面V0
This commit is contained in:
龚皓
commit
c9ba2ad556
|
|
@ -0,0 +1,30 @@
|
|||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
lerna-debug.log*
|
||||
|
||||
node_modules
|
||||
.DS_Store
|
||||
dist
|
||||
dist-ssr
|
||||
coverage
|
||||
*.local
|
||||
|
||||
/cypress/videos/
|
||||
/cypress/screenshots/
|
||||
|
||||
# Editor directories and files
|
||||
.vscode/*
|
||||
!.vscode/extensions.json
|
||||
.idea
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
|
||||
*.tsbuildinfo
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
{
|
||||
"recommendations": ["Vue.volar"]
|
||||
}
|
||||
|
|
@ -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
|
||||
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
/// <reference types="vite/client" />
|
||||
|
||||
declare module '*.vue' {
|
||||
import type { DefineComponent } from 'vue'
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types
|
||||
const component: DefineComponent<{}, {}, any>
|
||||
export default component
|
||||
}
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<link rel="icon" href="/icon.ico">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>告警管理</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<script type="module" src="/src/main.ts"></script>
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,30 @@
|
|||
{
|
||||
"name": "local_alert",
|
||||
"version": "0.0.0",
|
||||
"private": true,
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "run-p type-check \"build-only {@}\" --",
|
||||
"preview": "vite preview",
|
||||
"build-only": "vite build",
|
||||
"type-check": "vue-tsc --build --force"
|
||||
},
|
||||
"dependencies": {
|
||||
"axios": "^1.7.3",
|
||||
"echarts": "^5.5.1",
|
||||
"element-plus": "^2.7.8",
|
||||
"vue": "^3.4.29",
|
||||
"vue-router": "^4.4.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@tsconfig/node20": "^20.1.4",
|
||||
"@types/node": "^20.14.5",
|
||||
"@vitejs/plugin-vue": "^5.0.5",
|
||||
"@vue/tsconfig": "^0.5.1",
|
||||
"npm-run-all2": "^6.2.0",
|
||||
"typescript": "~5.4.0",
|
||||
"vite": "^5.3.1",
|
||||
"vue-tsc": "^2.0.21"
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 335 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.1 KiB |
|
|
@ -0,0 +1,17 @@
|
|||
<template>
|
||||
<div id="app">
|
||||
<router-view></router-view>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { provide } from 'vue';
|
||||
|
||||
export default {
|
||||
name: 'App',
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* 添加你的样式 */
|
||||
</style>
|
||||
|
|
@ -0,0 +1,225 @@
|
|||
<template>
|
||||
<div>
|
||||
<el-card class="alert-card">
|
||||
<div class="alert-header">告警趋势</div>
|
||||
<el-tabs v-model="activeName" @tab-click="handleClick" class="alert-tabs">
|
||||
<el-tab-pane label="前一天" name="first">前一天数据</el-tab-pane>
|
||||
<el-tab-pane label="3天" name="second">近3天数据展示</el-tab-pane>
|
||||
</el-tabs>
|
||||
<div id="alertChart" class="chart-container"></div>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from 'echarts';
|
||||
import { login, getEvents } from '@/utils/superbox.js';
|
||||
|
||||
const username = 'turingvideo';
|
||||
const password = '1234qwer!';
|
||||
|
||||
export default {
|
||||
name: 'AlertChart',
|
||||
data() {
|
||||
return {
|
||||
activeName: 'first',
|
||||
eventsData: []
|
||||
};
|
||||
},
|
||||
async created() {
|
||||
try {
|
||||
const token = await login(username, password);
|
||||
this.eventsData = await getEvents(token);
|
||||
this.initChart();
|
||||
} catch (error) {
|
||||
console.error("Error fetching events:", error);
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleClick(tab, event) {
|
||||
this.initChart();
|
||||
},
|
||||
initChart() {
|
||||
var chartDom = document.getElementById('alertChart');
|
||||
var myChart = echarts.init(chartDom);
|
||||
var option;
|
||||
|
||||
if (this.activeName === 'first') {
|
||||
option = this.get24HourChartOption();
|
||||
} else if (this.activeName === 'second') {
|
||||
option = this.get3DayChartOption();
|
||||
}
|
||||
|
||||
option && myChart.setOption(option);
|
||||
},
|
||||
get24HourChartOption() {
|
||||
const now = new Date();
|
||||
const todayMidnight = new Date(now);
|
||||
todayMidnight.setHours(0, 0, 0, 0);
|
||||
|
||||
const yesterdayMidnight = new Date(todayMidnight);
|
||||
yesterdayMidnight.setDate(todayMidnight.getDate() - 1);
|
||||
|
||||
const timePoints = ['00:00', '04:00', '08:00', '12:00', '16:00', '20:00', '24:00'];
|
||||
const alertCounts = Array(timePoints.length).fill(0);
|
||||
|
||||
this.eventsData.forEach(event => {
|
||||
const eventTime = new Date(event.started_at);
|
||||
if (eventTime >= yesterdayMidnight && eventTime < todayMidnight) {
|
||||
const hours = eventTime.getHours();
|
||||
if (hours < 4) alertCounts[1]++;
|
||||
else if (hours < 8) alertCounts[2]++;
|
||||
else if (hours < 12) alertCounts[3]++;
|
||||
else if (hours < 16) alertCounts[4]++;
|
||||
else if (hours < 20) alertCounts[5]++;
|
||||
else if (hours < 24) alertCounts[6]++;
|
||||
}
|
||||
});
|
||||
|
||||
// Accumulate the alert counts
|
||||
for (let i = 1; i < alertCounts.length; i++) {
|
||||
alertCounts[i] += alertCounts[i - 1];
|
||||
}
|
||||
|
||||
return {
|
||||
title: {
|
||||
text: '24小时内客流数量变化',
|
||||
left: 'center',
|
||||
textStyle: {
|
||||
color: '#fff'
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'cross'
|
||||
},
|
||||
formatter: '{b0}: {c0}'
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: timePoints
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value'
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data: alertCounts,
|
||||
type: 'line',
|
||||
areaStyle: {}
|
||||
}
|
||||
]
|
||||
};
|
||||
},
|
||||
|
||||
get3DayChartOption() {
|
||||
const now = new Date();
|
||||
const day1Midnight = new Date(now);
|
||||
day1Midnight.setHours(0, 0, 0, 0);
|
||||
|
||||
const day2Midnight = new Date(day1Midnight);
|
||||
day2Midnight.setDate(day1Midnight.getDate() - 1);
|
||||
|
||||
const day3Midnight = new Date(day2Midnight);
|
||||
day3Midnight.setDate(day2Midnight.getDate() - 1);
|
||||
|
||||
// 在生成字符串之前增加一天
|
||||
const adjustedDay1 = new Date(day1Midnight);
|
||||
adjustedDay1.setDate(day1Midnight.getDate() + 1);
|
||||
|
||||
const adjustedDay2 = new Date(day2Midnight);
|
||||
adjustedDay2.setDate(day2Midnight.getDate() + 1);
|
||||
|
||||
const adjustedDay3 = new Date(day3Midnight);
|
||||
adjustedDay3.setDate(day3Midnight.getDate() + 1);
|
||||
|
||||
// 使用调整后的日期作为时间点
|
||||
const timePoints = [
|
||||
adjustedDay3.toISOString().slice(0, 10),
|
||||
adjustedDay2.toISOString().slice(0, 10),
|
||||
adjustedDay1.toISOString().slice(0, 10),
|
||||
];
|
||||
const alertCounts = Array(timePoints.length).fill(0);
|
||||
|
||||
this.eventsData.forEach(event => {
|
||||
const eventTime = new Date(event.started_at);
|
||||
if (eventTime >= day3Midnight && eventTime < day2Midnight) {
|
||||
alertCounts[0]++;
|
||||
} else if (eventTime >= day2Midnight && eventTime < day1Midnight) {
|
||||
alertCounts[1]++;
|
||||
} else if (eventTime >= day1Midnight && eventTime <= now) {
|
||||
alertCounts[2]++;
|
||||
}
|
||||
});
|
||||
|
||||
return {
|
||||
title: {
|
||||
text: '近3天内告警数量变化',
|
||||
left: 'center',
|
||||
textStyle: {
|
||||
color: '#fff'
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'cross'
|
||||
},
|
||||
formatter: '{b0}: {c0}'
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: timePoints
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value'
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data: alertCounts,
|
||||
type: 'line',
|
||||
areaStyle: {}
|
||||
}
|
||||
]
|
||||
};
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.alert-card {
|
||||
background-color: #2a3f54;
|
||||
color: #fff;
|
||||
padding: 20px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.alert-header {
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 20px;
|
||||
border-bottom: 1px solid #3a4b5c;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
.alert-tabs {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.chart-container {
|
||||
width: 100%;
|
||||
height: 400px;
|
||||
}
|
||||
|
||||
.el-tabs__item {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.el-tabs__active-bar {
|
||||
background-color: #409EFF;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,167 @@
|
|||
<template>
|
||||
<div id="layout">
|
||||
<el-header >
|
||||
<div class="logo">
|
||||
<span>管理平台</span>
|
||||
</div>
|
||||
<div class="nav-menu">
|
||||
<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" router>
|
||||
<el-menu-item index="/" style="margin-left:230px">告警管理</el-menu-item>
|
||||
</el-menu>
|
||||
</div>
|
||||
<div class="user-info">
|
||||
<span>客流分析</span>
|
||||
<span>|</span>
|
||||
<span @click="showDialog = true" style="cursor: pointer;">选择摊位</span>
|
||||
<span v-if="selectedStoreName">| 已选择: {{ selectedStoreName }}</span>
|
||||
<span>|</span>
|
||||
<span>区域管理</span>
|
||||
<el-dropdown @command="handleCommand" placement="bottom-end">
|
||||
<span class="el-dropdown-link">
|
||||
{{ username }} <i class="el-icon-arrow-down el-icon--right"></i>
|
||||
</span>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<el-dropdown-item command="logout">登出</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
</div>
|
||||
</el-header>
|
||||
<router-view />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, ref, computed, watch, onMounted } from 'vue';
|
||||
import { useRouter, useRoute } from 'vue-router';
|
||||
// import type { Store } from '@/utils/type'
|
||||
|
||||
export default defineComponent({
|
||||
name: 'Layout',
|
||||
components: {
|
||||
},
|
||||
setup() {
|
||||
const router = useRouter();
|
||||
const route = useRoute();
|
||||
const token = ref(localStorage.getItem('token') || '');
|
||||
const isUserLoggedIn = computed(() => !!token.value);
|
||||
const username = ref(localStorage.getItem('username') || '');
|
||||
// const isUserLoggedIn = computed(() => !!username.value);
|
||||
const activeIndex = ref(route.path);
|
||||
const showDialog = ref(false);
|
||||
// const selectedStore = ref<Store | null>(null);
|
||||
const selectedStoreName = ref(localStorage.getItem('store_name') || '');
|
||||
|
||||
|
||||
const handleCommand = (command: string) => {
|
||||
if (command === 'logout') {
|
||||
localStorage.removeItem('username');
|
||||
localStorage.removeItem('token');
|
||||
localStorage.removeItem('store_id');
|
||||
localStorage.removeItem('store_name');
|
||||
token.value = '';
|
||||
username.value = '';
|
||||
selectedStoreName.value = '';
|
||||
router.push('/login');
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
|
||||
watch(
|
||||
() => route.path,
|
||||
(newPath) => {
|
||||
activeIndex.value = newPath;
|
||||
// if (!token.value && newPath !== '/login') {
|
||||
// router.push('/login');
|
||||
// }
|
||||
}
|
||||
);
|
||||
|
||||
onMounted(() => {
|
||||
// if (!token.value) {
|
||||
// router.push('/login');
|
||||
// } else {
|
||||
// selectedStoreName.value = localStorage.getItem('store_name') || '';
|
||||
// }
|
||||
});
|
||||
|
||||
return {
|
||||
username,
|
||||
token,
|
||||
isUserLoggedIn,
|
||||
activeIndex,
|
||||
handleCommand,
|
||||
showDialog,
|
||||
selectedStoreName,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.el-header {
|
||||
background-color: #1f2d3d;
|
||||
color: #fff;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0 20px;
|
||||
margin: 10px 20x;
|
||||
}
|
||||
|
||||
.logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.nav-menu {
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-left: 110px;
|
||||
margin-right: 100px;
|
||||
}
|
||||
|
||||
.el-menu-demo {
|
||||
background-color: transparent;
|
||||
color: #fff;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
/* justify-content: flex-start; */
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.el-menu-demo .el-menu-item {
|
||||
padding: 0 20px;
|
||||
text-align: center;
|
||||
font-size: 16px;
|
||||
color: #fff;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.el-menu-demo .el-menu-item:hover {
|
||||
color: #00aaff;
|
||||
}
|
||||
|
||||
|
||||
.user-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.user-info span {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.el-dropdown-link {
|
||||
cursor: pointer;
|
||||
color: #fff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,136 @@
|
|||
<template>
|
||||
<div>
|
||||
<el-card class="stats-card">
|
||||
<div class="stats-header">告警数量和类型分布</div>
|
||||
<el-row :gutter="20" class="stats-row">
|
||||
<el-col :span="24">
|
||||
<div ref="chart" class="chart"></div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from 'echarts';
|
||||
import { login, getAlgorithms,getEvents} from '@/utils/superbox.js';
|
||||
|
||||
const username = 'turingvideo';
|
||||
const password = '1234qwer!';
|
||||
|
||||
|
||||
export default {
|
||||
name: 'Statistics',
|
||||
data() {
|
||||
return {
|
||||
chart: null,
|
||||
seriesData: [
|
||||
|
||||
],
|
||||
};
|
||||
},
|
||||
// mounted() {
|
||||
// this.initChart();
|
||||
// },
|
||||
async created(){
|
||||
try{
|
||||
const token = await login(username, password);
|
||||
await this.fetchTypeMapping(token);
|
||||
await this.updateSeriesData(token);
|
||||
this.initChart();
|
||||
}catch(error){
|
||||
console.error("Error fetching algorithms:", error);
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async fetchTypeMapping(token) {
|
||||
const algorithms = await getAlgorithms(token);
|
||||
let mapping = algorithms.map(algorithm => ({
|
||||
value: 0, // 初始化为10，可以根据实际数据进行调整
|
||||
code_name: algorithm.code_name,
|
||||
name: algorithm.name
|
||||
}));
|
||||
const newMapping = [
|
||||
{code_name: "minizawu:532",name: "杂物堆积",value: 0},
|
||||
]
|
||||
|
||||
mapping = mapping.concat(newMapping);
|
||||
this.seriesData = mapping;
|
||||
},
|
||||
async updateSeriesData(token){
|
||||
const events = await getEvents(token);
|
||||
events.forEach(event => {
|
||||
const matchAlgorithm = this.seriesData.find(item => item.code_name === event.types);
|
||||
if (matchAlgorithm){
|
||||
matchAlgorithm.value += 1;
|
||||
}
|
||||
})
|
||||
},
|
||||
initChart() {
|
||||
this.chart = echarts.init(this.$refs.chart);
|
||||
const option = {
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
},
|
||||
legend: {
|
||||
orient: 'horizontal',
|
||||
bottom: 10,
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
},
|
||||
itemGap: 20,
|
||||
data: this.seriesData.map(item => item.name),
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '告警类型',
|
||||
type: 'pie',
|
||||
radius: '50%',
|
||||
center: ['50%', '150px'],
|
||||
data: this.seriesData,
|
||||
emphasis: {
|
||||
itemStyle: {
|
||||
shadowBlur: 10,
|
||||
shadowOffsetX: 0,
|
||||
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
||||
}
|
||||
},
|
||||
label: {
|
||||
show: true
|
||||
},
|
||||
stillShowZeroSum: false,
|
||||
}
|
||||
]
|
||||
};
|
||||
this.chart.setOption(option);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.stats-card {
|
||||
background-color: #2a3f54;
|
||||
color: #fff;
|
||||
padding: 20px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.stats-header {
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 20px;
|
||||
border-bottom: 1px solid #3a4b5c;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
.stats-row {
|
||||
/* margin-top: 20px; */
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.chart {
|
||||
width: 100%;
|
||||
height: 500px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,334 @@
|
|||
<template>
|
||||
<div class="home">
|
||||
<el-row>
|
||||
<el-col :span="16">
|
||||
<div class="table-container">
|
||||
<el-table :data="paginatedData">
|
||||
<el-table-column prop="id" label="告警编号" width="140"></el-table-column>
|
||||
<el-table-column label="告警类型" width="140">
|
||||
<template v-slot="scope">
|
||||
<!-- {{ typeMapping[scope.row.types] || codenameTranslate(scope.row.types) }} -->
|
||||
{{ typeMapping[scope.row.types] }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="camera.name" label="告警位置" width="180"></el-table-column>
|
||||
<el-table-column label="告警时间" width="180">
|
||||
<template v-slot="scope">
|
||||
{{ formatDateTime(scope.row.started_at) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="status" label="告警状态" width="140">
|
||||
<template v-slot="scope">
|
||||
<el-tag :type="scope.row.status === 'pending' ? 'warning' : 'success'">{{ statusMapping[scope.row.status] }}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="140">
|
||||
<template v-slot="scope">
|
||||
<el-button type="text" @click="handleView(scope.row)">查看</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
<div class="pagination-container">
|
||||
<el-pagination background layout="total, sizes, prev, pager, next, jumper" :total="tableData.length"
|
||||
:page-size="pageSize" :current-page.sync="currentPage" @current-change="handlePageChange"
|
||||
@size-change="handleSizeChange">
|
||||
</el-pagination>
|
||||
</div>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="8">
|
||||
<div class="right-panel">
|
||||
<div class="panel-section">
|
||||
<statistics />
|
||||
</div>
|
||||
<div class="panel-section">
|
||||
<alertChart />
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-dialog v-model="dialogVisible" title="告警详情" width="80%">
|
||||
<div>
|
||||
<el-row>
|
||||
<el-col :span="6">
|
||||
<p>告警编号: {{ selectedRow.id }}</p>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<!-- <p>告警类型: {{ typeMapping[selectedRow.types] || codenameTranslate(selectedRow.types) }}</p> -->
|
||||
<p>告警类型: {{ typeMapping[selectedRow.types] }}</p>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<p>告警位置: {{ selectedRow.camera.name }}</p>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<p>告警时间: {{ selectedRow.formatted_started_at }}</p>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="6">
|
||||
<p>告警状态: <el-tag :type="selectedRow.status === 'pending' ? 'warning' : 'success'">{{ statusMapping[selectedRow.status]
|
||||
}}</el-tag></p>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<p>摄像头编号: {{ selectedRow.camera_id }}</p>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<p>持续时间: {{ duration }}</p>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<p>备注: {{ selectedRow.note }}</p>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div class="event-media">
|
||||
<div v-for="medium in selectedRow.mediums" :key="medium.id" class="media-container">
|
||||
<div v-if="medium.name === 'video'" class="media-item video-item">
|
||||
<p>告警关联视频</p>
|
||||
<video :src="medium.file" controls></video>
|
||||
</div>
|
||||
<div v-if="medium.name === 'snapshot'" class="media-item image-item">
|
||||
<p>告警关联图片</p>
|
||||
<el-image :src="medium.file" fit="contain"></el-image>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<div class=""></div>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from 'echarts';
|
||||
import Statistics from '@/components/Statistics.vue';
|
||||
import AlertChart from '@/components/AlertChart.vue';
|
||||
import { login, getEvents, initCodeNameMap, codenameTranslate, getAlgorithms } from '@/utils/superbox.js';
|
||||
|
||||
const username = 'turingvideo';
|
||||
const password = '1234qwer!';
|
||||
|
||||
export default {
|
||||
name: 'AlertManagement',
|
||||
components: {
|
||||
Statistics,
|
||||
AlertChart,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
tableData: [],
|
||||
dialogVisible: false,
|
||||
selectedRow: {},
|
||||
mediums: {},
|
||||
duration: '',
|
||||
typeMapping: {
|
||||
// 'abnormal:525': '黑屏检测',
|
||||
// 'car_blocking:512': '车辆拥塞',
|
||||
// 'car_blocking:514': '违规停车',
|
||||
// 'escalator_status:518': '扶梯运行状态',
|
||||
// 'gathering:520': '人员密集',
|
||||
// 'gathering:521': '保洁点名',
|
||||
// 'intrude:513': '入侵检测',
|
||||
// 'long_term_door_status:526': '长期门状态检测',
|
||||
// 'lying_down:527': '人员倒地',
|
||||
// 'minizawu:531': '杂物堆积',
|
||||
// 'minizawu:532': '杂物堆积',
|
||||
// 'personnel_stay:535': '人员逗留',
|
||||
// 'vacant:524': '人员离岗',
|
||||
// 'zawu:516': '饮料垃圾检测',
|
||||
// 'zawu:517': '垃圾桶满溢',
|
||||
// 'zawu:519': '违规放置',
|
||||
// 'zawu:523': '绿化带垃圾检测',
|
||||
},
|
||||
statusMapping: {
|
||||
'pending': '待处理',
|
||||
'closed': '已处理'
|
||||
},
|
||||
currentPage: 1,
|
||||
pageSize: 20,
|
||||
|
||||
}
|
||||
},
|
||||
async created() {
|
||||
try {
|
||||
const token = await login(username, password);
|
||||
// await initCodeNameMap(token);
|
||||
this.tableData = await getEvents(token);
|
||||
this.typeMapping = await this.fetchTypeMapping(token);
|
||||
console.log(this.tableData);
|
||||
} catch (error) {
|
||||
console.error("Error fetching events:", error);
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
paginatedData() {
|
||||
const start = (this.currentPage - 1) * this.pageSize;
|
||||
const end = start + this.pageSize;
|
||||
return this.tableData.slice(start, end);
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async fetchTypeMapping(token) {
|
||||
let algorithms = await getAlgorithms(token);
|
||||
const additionalMappings = [
|
||||
{ code_name: 'minizawu:532', name: '杂物堆积' },
|
||||
|
||||
];
|
||||
algorithms = algorithms.concat(additionalMappings);
|
||||
let mapping = {};
|
||||
algorithms.forEach((algorithm) => {
|
||||
mapping[algorithm.code_name] = algorithm.name;
|
||||
});
|
||||
|
||||
// console.log("mapping: ", mapping);
|
||||
return mapping;
|
||||
},
|
||||
|
||||
|
||||
handleView(row) {
|
||||
this.selectedRow = row;
|
||||
this.duration = this.calculateDuration(row.started_at, row.ended_at);
|
||||
row.formatted_started_at = this.formatDateTime(row.started_at);
|
||||
|
||||
// console.log("duration: ", row.started_at);
|
||||
// console.log("duration: ", row.ended_at);
|
||||
// console.log("duration: ", this.duration);
|
||||
this.dialogVisible = true;
|
||||
this.mediums = row.mediums || {};
|
||||
if (Array.isArray(row.mediums)) {
|
||||
row.mediums.forEach(medium => {
|
||||
// console.log("medium: ", medium.file);
|
||||
// console.log("medium: ", medium.id);
|
||||
});
|
||||
} else {
|
||||
// console.log("No mediums available");
|
||||
}
|
||||
},
|
||||
handlePageChange(page) {
|
||||
this.currentPage = page;
|
||||
},
|
||||
handleSizeChange(size) {
|
||||
this.pageSize = size;
|
||||
},
|
||||
calculateDuration(started_at, ended_at) {
|
||||
const start = new Date(started_at);
|
||||
const end = new Date(ended_at);
|
||||
const duration = end - start;
|
||||
const minutes = Math.floor(duration / 60000);
|
||||
const seconds = ((duration % 60000) / 1000).toFixed(0);
|
||||
return `${minutes}分${(seconds < 10 ? '0' : '')}${seconds}秒`;
|
||||
},
|
||||
formatDateTime(datetime) {
|
||||
const date = new Date(datetime);
|
||||
const year = date.getFullYear();
|
||||
const month = (date.getMonth() + 1).toString().padStart(2, '0');
|
||||
const day = date.getDate().toString().padStart(2, '0');
|
||||
const hours = date.getHours().toString().padStart(2, '0');
|
||||
const minutes = date.getMinutes().toString().padStart(2, '0');
|
||||
const seconds = date.getSeconds().toString().padStart(2, '0');
|
||||
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.home {
|
||||
padding: 40px;
|
||||
background-color: #f5f7fa;
|
||||
}
|
||||
|
||||
.breadcrumb {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.top-scroll {
|
||||
width: 100%;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.top-scroll-content {
|
||||
/* 高度滚动条显示出来默认值 */
|
||||
height: 1px;
|
||||
}
|
||||
|
||||
.table-container {
|
||||
width: 80%;
|
||||
max-height: 1000px;
|
||||
overflow-x: auto;
|
||||
padding-left: 7%;
|
||||
}
|
||||
|
||||
.right-panel {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
padding: 10px 10px 400px 10px;
|
||||
background-color: #f5f5f5;
|
||||
height: 600px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.panel-section {
|
||||
flex: 1;
|
||||
background-color: #fff;
|
||||
padding: 20px;
|
||||
box-shadow: 0 20px 8px rgba(0, 0, 0, 0.1);
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
/* 弹窗> 显示左右等分*/
|
||||
.event-media {
|
||||
/* display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
margin-top: 20px; */
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
/* 添加这个属性来左右等分 */
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.media-container {
|
||||
flex: 0 0 48%;
|
||||
/* 确保每块区域占据一行的48% */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
/* 使内容在区域内居中 */
|
||||
margin-bottom: 20px;
|
||||
/* 添加底部间距，使多个元素之间有间隔 */
|
||||
box-sizing: border-box;
|
||||
/* 确保padding和border不会影响大小 */
|
||||
padding: 10px;
|
||||
/* 添加内边距，使内容不靠近边框 */
|
||||
}
|
||||
|
||||
.video-item video,
|
||||
.image-item img {
|
||||
width: 100%;
|
||||
/* 保证视频和图片在容器内等宽 */
|
||||
height: auto;
|
||||
/* 保证视频和图片比例正常 */
|
||||
border-radius: 8px;
|
||||
/* 圆润效果 */
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
/* 阴影效果 */
|
||||
}
|
||||
|
||||
.video-item p,
|
||||
.image-item p {
|
||||
margin-bottom: 8px;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.pagination-container {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
margin-top: 20px;
|
||||
margin-right: 150px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,148 @@
|
|||
<script lang="ts" setup>
|
||||
import { reactive } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import {ElMessage} from 'element-plus'
|
||||
import { Lock, User } from '@element-plus/icons-vue';
|
||||
|
||||
import { useSuperbox } from '@/utils/Superbox'
|
||||
|
||||
import { useSetToken } from '@/utils/misc';
|
||||
|
||||
const router = useRouter();
|
||||
const superbox = useSuperbox();
|
||||
const loginForm = reactive({
|
||||
username: '',
|
||||
password: ''
|
||||
});
|
||||
|
||||
const setToken = useSetToken();
|
||||
|
||||
const onSubmit = async () => {
|
||||
try {
|
||||
const token = await superbox.login(loginForm.username, loginForm.password, false);
|
||||
if (token) {
|
||||
setToken(token);
|
||||
router.push('/');
|
||||
}
|
||||
} catch (error) {
|
||||
ElMessage(
|
||||
{
|
||||
message: '用户名或密码错误，登录失败',
|
||||
type: 'error',
|
||||
duration: 5000
|
||||
}
|
||||
);
|
||||
console.log(error);
|
||||
}
|
||||
};
|
||||
|
||||
const onReset = () => {
|
||||
loginForm.username = '';
|
||||
loginForm.password = '';
|
||||
};
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="main-layout">
|
||||
|
||||
<div class="login-form">
|
||||
<div class="login-header">
|
||||
<el-row justify="center">
|
||||
<el-image src="./logo.png" fit="contain" />
|
||||
</el-row>
|
||||
</div>
|
||||
<div class="login-body">
|
||||
<el-form :model="loginForm" style="max-width: 600px;">
|
||||
|
||||
<el-form-item>
|
||||
<el-input v-model="loginForm.username" placeholder="用户名" clearable>
|
||||
<template #prefix>
|
||||
<el-icon class="el-input__icon">
|
||||
<User />
|
||||
</el-icon>
|
||||
</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item>
|
||||
<el-input v-model="loginForm.password" placeholder="密码" type="password" show-password clearable>
|
||||
<template #prefix>
|
||||
<el-icon class="el-input__icon">
|
||||
<Lock />
|
||||
</el-icon>
|
||||
</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-row justify="end">
|
||||
<el-form-item size="small" :gutter="30">
|
||||
<el-button type="primary" @click="onReset" plain>重置</el-button>
|
||||
<el-button type="primary" @click="onSubmit">登录</el-button>
|
||||
</el-form-item>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</div>
|
||||
|
||||
<div class="login-footer">
|
||||
<el-row justify="end">
|
||||
<el-text class="plain-text">Powered by TuringAI</el-text>
|
||||
</el-row>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.main-layout {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-image: url('./login-bg.jpg');
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.login-form {
|
||||
min-width: 350px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
border-radius: 10px;
|
||||
background-color: #01111863;
|
||||
}
|
||||
|
||||
.login-body {
|
||||
padding-top: 30px;
|
||||
padding-bottom: 5px;
|
||||
padding-left: 30px;
|
||||
padding-right: 30px;
|
||||
}
|
||||
|
||||
.login-header {
|
||||
padding-top: 15px;
|
||||
padding-bottom: 15px;
|
||||
background-color: #01111863;
|
||||
border-radius: 10px 10px 0px 0px;
|
||||
}
|
||||
|
||||
.login-footer {
|
||||
padding-top: 15px;
|
||||
padding-bottom: 20px;
|
||||
padding-right: 30px;
|
||||
padding-left: 30px;
|
||||
background-color: #01111863;
|
||||
border-radius: 0px 0px 10px 10px;
|
||||
}
|
||||
|
||||
.main-title {
|
||||
color: #c2c8fd;
|
||||
}
|
||||
|
||||
.plain-text {
|
||||
color: #9a9db3;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
<template>
|
||||
<div>
|
||||
nihao
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
|
||||
|
||||
</script>
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
import {createApp} from 'vue'
|
||||
import App from './App.vue'
|
||||
import router from './router';
|
||||
import ElementPlus from 'element-plus';
|
||||
import 'element-plus/dist/index.css';
|
||||
import zhCn from 'element-plus/es/locale/lang/zh-cn';
|
||||
import axios from 'axios';
|
||||
|
||||
|
||||
|
||||
const app = createApp(App)
|
||||
|
||||
app.provide('axios', axios);
|
||||
app.use(ElementPlus, { locale: zhCn });
|
||||
app.use (router)
|
||||
app.mount('#app')
|
||||
|
|
@ -0,0 +1,58 @@
|
|||
// 第一步，引入createRouter
|
||||
import { createRouter, createWebHistory, createWebHashHistory } from 'vue-router'
|
||||
|
||||
import Layout from '@/components/Layout.vue';
|
||||
import AlertChart from '@/components/AlertChart.vue';
|
||||
import Statistics from '@/components/Statistics.vue';
|
||||
import AlertManagement from '@/html/AlertManagement.vue';
|
||||
import Test from '@/html/Test.vue';
|
||||
// import Login from '@/html/LoginView.vue';
|
||||
|
||||
|
||||
const routes = [
|
||||
{
|
||||
path: '/',
|
||||
name: 'Layout',
|
||||
component: Layout,
|
||||
children: [
|
||||
{
|
||||
path: '',
|
||||
name: 'AlertManagement',
|
||||
component: AlertManagement,
|
||||
},
|
||||
{
|
||||
path: '/test',
|
||||
name: 'Test',
|
||||
component: Test,
|
||||
},
|
||||
{
|
||||
path: '/alertChart',
|
||||
name: 'AlertChart',
|
||||
component: AlertChart,
|
||||
},
|
||||
{
|
||||
path: '/statistics',
|
||||
name: 'Statistics',
|
||||
component: Statistics,
|
||||
}
|
||||
]
|
||||
|
||||
}
|
||||
// ,
|
||||
// {
|
||||
// path: '/login',
|
||||
// name: 'Login',
|
||||
// component: Login,
|
||||
// meta: { requiresAuth: false }
|
||||
// },
|
||||
|
||||
]
|
||||
|
||||
|
||||
const router = createRouter({
|
||||
history: createWebHashHistory(),
|
||||
routes
|
||||
})
|
||||
|
||||
|
||||
export default router;
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
import { SuperboxApi } from "@/utils/superboxApi";
|
||||
|
||||
const superbox = new SuperboxApi();
|
||||
|
||||
const useSuperbox = (address: string = "", port: number = 0) => {
|
||||
superbox.setAddress(address);
|
||||
superbox.setPort(port);
|
||||
return superbox;
|
||||
}
|
||||
|
||||
export {
|
||||
useSuperbox,
|
||||
}
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
// axios-config.ts
|
||||
import axios from 'axios';
|
||||
|
||||
const axiosInstance = axios.create({
|
||||
// baseURL: 'https://test1.turingvideo.cn/api/v1',
|
||||
baseURL: 'http://127.0.0.1:8000/api/v1',
|
||||
timeout: 10000,
|
||||
});
|
||||
|
||||
axiosInstance.interceptors.request.use(
|
||||
config => {
|
||||
const token = localStorage.getItem('token');
|
||||
if (token) {
|
||||
config.headers.Authorization = `Bearer ${token}`;
|
||||
}
|
||||
return config;
|
||||
},
|
||||
error => {
|
||||
return Promise.reject(error);
|
||||
}
|
||||
);
|
||||
|
||||
axiosInstance.interceptors.response.use(
|
||||
response => {
|
||||
return response;
|
||||
},
|
||||
error => {
|
||||
if (error.response && error.response.status === 401) {
|
||||
localStorage.removeItem('token');
|
||||
window.location.href = '/#/login'; // 重定向到登录页面
|
||||
}
|
||||
return Promise.reject(error);
|
||||
}
|
||||
);
|
||||
|
||||
export default axiosInstance;
|
||||
|
|
@ -0,0 +1,127 @@
|
|||
import { ref } from 'vue'
|
||||
|
||||
const access_token = ref(null)
|
||||
const consumerId = ref(null)
|
||||
const data = ref(null)
|
||||
|
||||
// 计数器
|
||||
let consumeMessageCount = 0
|
||||
|
||||
const getAccessToken = async () => {
|
||||
try {
|
||||
const response = await fetch('/api/oauth/token', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/x-www-form-urlencoded',
|
||||
},
|
||||
body: new URLSearchParams({
|
||||
grant_type: 'client_credentials',
|
||||
client_id: '88651e249e734a5290b00345961a7458',
|
||||
client_secret: 'fbd457384ba0423cb5d6b86e4c7d3afc'
|
||||
})
|
||||
})
|
||||
if (!response.ok) throw new Error('Network response was not ok')
|
||||
const result = await response.json()
|
||||
console.log("access_token:>>>>>>>>>", result)
|
||||
access_token.value = result.access_token
|
||||
} catch (error) {
|
||||
console.error('Error fetching access token:', error)
|
||||
}
|
||||
}
|
||||
|
||||
const createConsumer = async () => {
|
||||
try {
|
||||
const token = access_token.value
|
||||
if (!token) throw new Error('Access token not found')
|
||||
|
||||
const response = await fetch('/api/api/v1/mq/consumer/group1', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/x-www-form-urlencoded',
|
||||
'Authorization': `Bearer ${token}`
|
||||
}
|
||||
})
|
||||
if (!response.ok) throw new Error('Network response was not ok')
|
||||
const result = await response.json()
|
||||
console.log("createConsumer:>>>>>>>>>", result.data)
|
||||
consumerId.value = result.data.consumerId
|
||||
} catch (error) {
|
||||
console.error('Error creating consumer:', error)
|
||||
}
|
||||
}
|
||||
|
||||
const consumeMessage = async () => {
|
||||
try {
|
||||
const token = access_token.value
|
||||
const cid = consumerId.value
|
||||
|
||||
if (!token || !cid) throw new Error('Token or Consumer ID not found')
|
||||
|
||||
const response = await fetch('/api/api/v1/mq/consumer/messages', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/x-www-form-urlencoded',
|
||||
'Authorization': `Bearer ${token}`
|
||||
},
|
||||
body: new URLSearchParams({
|
||||
autoCommit: 'true',
|
||||
consumerId: cid
|
||||
})
|
||||
})
|
||||
if (!response.ok) throw new Error('Network response was not ok')
|
||||
const result = await response.json()
|
||||
|
||||
// 解析 content 数据
|
||||
const parsedData = result.data.map(item => {
|
||||
const content = JSON.parse(item.content.replace(/\\/g, '')) // 去除反斜杠
|
||||
return {
|
||||
...item,
|
||||
content
|
||||
}
|
||||
})
|
||||
|
||||
data.value = parsedData
|
||||
console.log("consumeMessage:>>>>>>>>>", parsedData)
|
||||
|
||||
consumeMessageCount++
|
||||
console.log(`consumeMessage request count: ${consumeMessageCount}`)
|
||||
|
||||
return parsedData
|
||||
} catch (error) {
|
||||
console.error('Error consuming message:', error)
|
||||
return []
|
||||
}
|
||||
}
|
||||
|
||||
// 定时器管理
|
||||
let refreshTokenIntervalId = null
|
||||
let consumeMessageIntervalId = null
|
||||
|
||||
const startAutoRefresh = () => {
|
||||
// 1小时刷新一次 getAccessToken 和 createConsumer
|
||||
refreshTokenIntervalId = setInterval(async () => {
|
||||
await getAccessToken()
|
||||
await createConsumer()
|
||||
}, 3600000) // 3600000ms = 1小时
|
||||
|
||||
// 每25秒触发一次 consumeMessage
|
||||
consumeMessageIntervalId = setInterval(async () => {
|
||||
await consumeMessage()
|
||||
}, 25000) // 25000ms = 25秒
|
||||
}
|
||||
|
||||
const stopAutoRefresh = () => {
|
||||
if (refreshTokenIntervalId) clearInterval(refreshTokenIntervalId)
|
||||
if (consumeMessageIntervalId) clearInterval(consumeMessageIntervalId)
|
||||
}
|
||||
|
||||
export {
|
||||
access_token,
|
||||
consumerId,
|
||||
data,
|
||||
getAccessToken,
|
||||
createConsumer,
|
||||
consumeMessage,
|
||||
startAutoRefresh,
|
||||
stopAutoRefresh
|
||||
}
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
const JWT_TOKEN = 'token';
|
||||
|
||||
const useGetToken = (failedProc: () => void) => {
|
||||
const getToken = (): string => {
|
||||
const token = sessionStorage.getItem(JWT_TOKEN);
|
||||
if (!token) {
|
||||
failedProc();
|
||||
return ""
|
||||
}
|
||||
return token
|
||||
}
|
||||
|
||||
return getToken
|
||||
}
|
||||
|
||||
const useSetToken = () => {
|
||||
const setToken = (token: string) => {
|
||||
sessionStorage.setItem(JWT_TOKEN, token);
|
||||
}
|
||||
return setToken
|
||||
}
|
||||
|
||||
const useClearToken = () => {
|
||||
const clearToken = () => {
|
||||
sessionStorage.removeItem(JWT_TOKEN);
|
||||
}
|
||||
return clearToken
|
||||
}
|
||||
|
||||
export { useGetToken, useSetToken, useClearToken }
|
||||
|
|
@ -0,0 +1,160 @@
|
|||
import axios from "axios";
|
||||
|
||||
export const getSuperboxApiConfig = (address) => {
|
||||
const PORT = 8000;
|
||||
const BASE_ROUTE = "/api/v1";
|
||||
const LOGIN_ROUTE = BASE_ROUTE + "/auth/login";
|
||||
const LOGOUT_ROUTE = BASE_ROUTE + "/auth/logout";
|
||||
const CAMERA_ROUTE = BASE_ROUTE + "/camera/cameras";
|
||||
const EVENTS_ROUTE = BASE_ROUTE + "/event/events?limit=300";
|
||||
const ALGORITHM_ROUTE = BASE_ROUTE + "/algorithms";
|
||||
|
||||
let addr = address;
|
||||
if (!addr) {
|
||||
addr = window.location.host.replace(/:\d+/, "");
|
||||
console.log("No address provided, using " + addr);
|
||||
}
|
||||
const superboxAddress = "http://" + addr + ":" + PORT.toString();
|
||||
|
||||
return {
|
||||
base: superboxAddress + BASE_ROUTE,
|
||||
login: superboxAddress + LOGIN_ROUTE,
|
||||
logout: superboxAddress + LOGOUT_ROUTE,
|
||||
cameras: superboxAddress + CAMERA_ROUTE,
|
||||
events: superboxAddress + EVENTS_ROUTE,
|
||||
algorithms: superboxAddress + ALGORITHM_ROUTE,
|
||||
};
|
||||
/*return {
|
||||
base: "/api/v1",
|
||||
login: "/api/v1/auth/login",
|
||||
logout: "/api/v1/auth/logout",
|
||||
cameras: "/api/v1/camera/cameras",
|
||||
events: "/api/v1/event/events",
|
||||
};*/
|
||||
};
|
||||
|
||||
axios.defaults.withCredentials = true;
|
||||
export const login = (username, password, address = null) => {
|
||||
return new Promise((resolve, reject) => {
|
||||
const api = getSuperboxApiConfig(address);
|
||||
axios
|
||||
.post(
|
||||
api.login,
|
||||
{
|
||||
username: username,
|
||||
password: password,
|
||||
cookieless: false,
|
||||
},
|
||||
{
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
}
|
||||
)
|
||||
.then((res) => {
|
||||
if (res.data.err.ec === 0) {
|
||||
resolve(res.data.ret.token);
|
||||
}
|
||||
reject(res.data.err);
|
||||
})
|
||||
.catch((err) => {
|
||||
reject(err);
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
export const getCameras = (token, address = null) => {
|
||||
return new Promise((resolve, reject) => {
|
||||
const api = getSuperboxApiConfig(address);
|
||||
axios
|
||||
.get(api.cameras, {
|
||||
withCredentials: true,
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
})
|
||||
.then((res) => {
|
||||
if (res.data.err.ec === 0) {
|
||||
resolve(res.data.ret.results);
|
||||
}
|
||||
reject(res.data.err);
|
||||
})
|
||||
.catch((err) => {
|
||||
reject(err);
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
export const getEvents = (token, address = null) => {
|
||||
return new Promise((resolve, reject) => {
|
||||
const api = getSuperboxApiConfig(address);
|
||||
axios
|
||||
.get(api.events, {
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
})
|
||||
.then((res) => {
|
||||
if (res.data.err.ec === 0) {
|
||||
resolve(res.data.ret.results);
|
||||
}
|
||||
reject(res.data.err);
|
||||
})
|
||||
.catch((err) => {
|
||||
reject(err);
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
export const getAlgorithms = (token, address = null) => {
|
||||
return new Promise((resolve, reject) => {
|
||||
const api = getSuperboxApiConfig(address);
|
||||
axios
|
||||
.get(api.algorithms, {
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
})
|
||||
.then((res) => {
|
||||
if (res.data.err.ec === 0) {
|
||||
resolve(res.data.ret);
|
||||
}
|
||||
reject(res.data.err);
|
||||
})
|
||||
.catch((err) => {
|
||||
reject(err);
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
var codeNameMap = {};
|
||||
|
||||
export const initCodeNameMap = async (token, address = null) => {
|
||||
try {
|
||||
const algorithms = await getAlgorithms(token, address);
|
||||
algorithms.forEach((algorithm) => {
|
||||
codeNameMap[algorithm.code_name] = algorithm.name;
|
||||
});
|
||||
return true;
|
||||
} catch (err) {
|
||||
console.log(err);
|
||||
return false;
|
||||
}
|
||||
};
|
||||
|
||||
export const codenameTranslate = (codeName) => {
|
||||
return codeNameMap[codeName];
|
||||
};
|
||||
|
||||
export default {
|
||||
login,
|
||||
getCameras,
|
||||
getEvents,
|
||||
getSuperboxApiConfig,
|
||||
initCodeNameMap,
|
||||
codenameTranslate,
|
||||
getAlgorithms,
|
||||
};
|
||||
|
|
@ -0,0 +1,200 @@
|
|||
/* eslint-disable no-useless-catch */
|
||||
import axios from 'axios';
|
||||
|
||||
class SuperboxApi {
|
||||
|
||||
private readonly defaultPort: number = 8000;
|
||||
|
||||
private readonly apiLogin: string = "/auth/login";
|
||||
private readonly apiLogout: string = "/auth/logout";
|
||||
private readonly apiCameras: string = "/cameras";
|
||||
private readonly apiEvents: string = "/events";
|
||||
private readonly apiAlgorithms: string = "/algorithms";
|
||||
|
||||
private readonly loginConfig: object = {
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Accept': 'application/json',
|
||||
}
|
||||
}
|
||||
|
||||
private address: string = "";
|
||||
private port: number = this.defaultPort;
|
||||
private token: string = "";
|
||||
|
||||
private codemap: Map<string, string> = new Map<string, string>();
|
||||
private axios: any = null;
|
||||
|
||||
public constructor(
|
||||
address: string = "",
|
||||
port: number = 0
|
||||
) {
|
||||
this.setAddress(address);
|
||||
this.setPort(port);
|
||||
this.axios = axios.create({
|
||||
baseURL: `http://${this.address}:${this.port}/api/v1`,
|
||||
withCredentials: true
|
||||
})
|
||||
}
|
||||
|
||||
public setAddress(address: string) {
|
||||
this.address = address === "" ? this._boxAddr() : address;
|
||||
}
|
||||
|
||||
public setPort(port: number) {
|
||||
this.port = port === 0 ? this.defaultPort : port;
|
||||
}
|
||||
|
||||
public setToken(token: string) {
|
||||
this.token = token;
|
||||
}
|
||||
|
||||
public async login(username: string, password: string, cookieLess: boolean = false): Promise<any> {
|
||||
const loginData = {
|
||||
username: username,
|
||||
password: password,
|
||||
cookieless: cookieLess ? "True" : "False"
|
||||
};
|
||||
|
||||
try {
|
||||
const res = await this.axios.post(this.apiLogin, loginData, this.loginConfig)
|
||||
console.log(res)
|
||||
if (res.data.err.ec === 0) {
|
||||
this.token = res.data.ret.token;
|
||||
await this.updateCodemap(this.token);
|
||||
return res.data.ret.token;
|
||||
} else {
|
||||
throw new Error(res.data.err.msg);
|
||||
}
|
||||
} catch (error) {
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
|
||||
public async logout(token: string | null = null): Promise<any> {
|
||||
try {
|
||||
const res = await this.axios.post(this.apiLogout, this._authHeader(token));
|
||||
if (res.data.err.ec === 0) {
|
||||
return res.data;
|
||||
} else {
|
||||
throw new Error(res.data.err.msg);
|
||||
}
|
||||
} catch (error) {
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
|
||||
public async getCamerasByUrl(url: string, token: string | null = null): Promise<any> {
|
||||
try {
|
||||
const res = await this.axios.get(url, this._authHeader(token));
|
||||
if (res.data.err.ec === 0) {
|
||||
return res.data.ret;
|
||||
} else {
|
||||
throw new Error(res.data.err.msg);
|
||||
}
|
||||
} catch (error) {
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
|
||||
public async getCameras(limit: number, offset: number, token: string | null = null): Promise<any> {
|
||||
const url = `${this.apiCameras}?limit=${limit}&offset=${offset}`;
|
||||
return await this.getCamerasByUrl(url, token);
|
||||
}
|
||||
|
||||
public async getEventsByUrl(url: string, token: string | null = null): Promise<any> {
|
||||
try {
|
||||
const res = await this.axios.get(url, this._authHeader(token));
|
||||
if (res.data.err.ec === 0) {
|
||||
return res.data.ret;
|
||||
} else {
|
||||
throw new Error(res.data.err.msg);
|
||||
}
|
||||
} catch (error) {
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
|
||||
public async getEvents(limit: number, offset: number, token: string | null = null): Promise<any> {
|
||||
const url = `${this.apiEvents}?limit=${limit}&offset=${offset}`;
|
||||
return await this.getEventsByUrl(url, token);
|
||||
}
|
||||
|
||||
public async getOneEvent(token: string | null = null): Promise<any> {
|
||||
try {
|
||||
return await this.getEvents(1, 0, token);
|
||||
} catch (error) {
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
public async setEventStatus(eventId: number, status: string, remark: string | null = null, token: string | null = null): Promise<any> {
|
||||
const url = `${this.apiEvents}/${eventId}`;
|
||||
const newRemark = remark ? remark : "";
|
||||
|
||||
const data = {
|
||||
status: status,
|
||||
remark: newRemark
|
||||
};
|
||||
|
||||
try {
|
||||
const res = await this.axios.patch(url, data, this._authHeader(token))
|
||||
if (res.data.err.ec === 0) {
|
||||
return res.data.ret;
|
||||
} else {
|
||||
throw new Error(res.data.err.msg);
|
||||
}
|
||||
} catch (error) {
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
|
||||
public async getAlgorithms(token: string | null = null): Promise<any> {
|
||||
try {
|
||||
const res = await this.axios.get(this.apiAlgorithms, this._authHeader(token))
|
||||
if (res.data.err.ec === 0) {
|
||||
return res.data.ret;
|
||||
} else {
|
||||
throw new Error(res.data.err.msg);
|
||||
}
|
||||
} catch (error) {
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
|
||||
public async updateCodemap(token: string | null = null): Promise<boolean> {
|
||||
try {
|
||||
this.codemap.clear()
|
||||
const algorithms = await this.getAlgorithms(token);
|
||||
algorithms.forEach((algorithm: { code_name: string, name: string }) => {
|
||||
this.codemap.set(algorithm.code_name, algorithm.name)
|
||||
});
|
||||
return true;
|
||||
} catch (error) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
public getAlgorithmName(code_name: string): string {
|
||||
return this.codemap.get(code_name) || code_name;
|
||||
}
|
||||
|
||||
private _authHeader(token: string | null = null): object {
|
||||
const access_token = token === "" ? this.token : token;
|
||||
return {
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Accept': 'application/json',
|
||||
'Authorization': `Bearer ${access_token}`,
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
private _boxAddr() {
|
||||
return window.location.host.replace(/:\d+/, "");
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
export { SuperboxApi };
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
{
|
||||
"extends": "@vue/tsconfig/tsconfig.dom.json",
|
||||
"include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
|
||||
"exclude": ["src/**/__tests__/*"],
|
||||
"compilerOptions": {
|
||||
"composite": true,
|
||||
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
|
||||
|
||||
"baseUrl": ".",
|
||||
"paths": {
|
||||
"@/*": ["./src/*"]
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
{
|
||||
"files": [],
|
||||
"references": [
|
||||
{
|
||||
"path": "./tsconfig.node.json"
|
||||
},
|
||||
{
|
||||
"path": "./tsconfig.app.json"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
{
|
||||
"extends": "@tsconfig/node20/tsconfig.json",
|
||||
"include": [
|
||||
"vite.config.*",
|
||||
"vitest.config.*",
|
||||
"cypress.config.*",
|
||||
"nightwatch.conf.*",
|
||||
"playwright.config.*"
|
||||
],
|
||||
"compilerOptions": {
|
||||
"composite": true,
|
||||
"noEmit": true,
|
||||
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
|
||||
|
||||
"module": "ESNext",
|
||||
"moduleResolution": "Bundler",
|
||||
"types": ["node"]
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
import { fileURLToPath, URL } from 'node:url'
|
||||
|
||||
import { defineConfig } from 'vite'
|
||||
import vue from '@vitejs/plugin-vue'
|
||||
|
||||
// https://vitejs.dev/config/
|
||||
export default defineConfig({
|
||||
plugins: [
|
||||
vue(),
|
||||
],
|
||||
resolve: {
|
||||
alias: {
|
||||
'@': fileURLToPath(new URL('./src', import.meta.url))
|
||||
}
|
||||
},
|
||||
server:{
|
||||
// host:'192.168.28.44',
|
||||
host:'127.0.0.1',
|
||||
// host: '192.168.28.32',
|
||||
port: 5173,
|
||||
open:true,
|
||||
cors: true,
|
||||
// proxy: {
|
||||
// '/api': "192.168.28.44:8000"
|
||||
// }
|
||||
proxy: {
|
||||
'/api': {
|
||||
target: 'http://127.0.0.1:8000', // 目标 API 地址
|
||||
changeOrigin: true, // 开启跨域
|
||||
rewrite: path => path.replace('^/api/', '')
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
Loading…
Reference in New Issue