723第一次提交
This commit is contained in:
龚皓
commit
283eedbcaa
|
|
@ -0,0 +1,14 @@
|
|||
/* eslint-env node */
|
||||
require('@rushstack/eslint-patch/modern-module-resolution')
|
||||
|
||||
module.exports = {
|
||||
root: true,
|
||||
'extends': [
|
||||
'plugin:vue/vue3-essential',
|
||||
'eslint:recommended',
|
||||
'@vue/eslint-config-typescript'
|
||||
],
|
||||
parserOptions: {
|
||||
ecmaVersion: 'latest'
|
||||
}
|
||||
}
|
||||
|
|
@ -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,6 @@
|
|||
{
|
||||
"recommendations": [
|
||||
"Vue.volar",
|
||||
"dbaeumer.vscode-eslint"
|
||||
]
|
||||
}
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
# vue_one
|
||||
|
||||
This template should help get you started developing with Vue 3 in Vite.
|
||||
|
||||
## Recommended IDE Setup
|
||||
|
||||
[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur).
|
||||
|
||||
## Type Support for `.vue` Imports in TS
|
||||
|
||||
TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) to make the TypeScript language service aware of `.vue` types.
|
||||
|
||||
## Customize configuration
|
||||
|
||||
See [Vite Configuration Reference](https://vitejs.dev/config/).
|
||||
|
||||
## 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
|
||||
```
|
||||
|
||||
### Lint with [ESLint](https://eslint.org/)
|
||||
|
||||
```sh
|
||||
npm run lint
|
||||
```
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
// vue3 报错提示 找不到模块“./XXX.vue”或其相应的类型声明
|
||||
// 报错原因：typescript 只能理解 .ts 文件，无法理解 .vue文件
|
||||
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="/favicon.ico">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Vite App</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,37 @@
|
|||
{
|
||||
"name": "vue_one",
|
||||
"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",
|
||||
"lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore"
|
||||
},
|
||||
"dependencies": {
|
||||
"axios": "^1.7.2",
|
||||
"echarts": "^5.5.1",
|
||||
"element-plus": "^2.7.6",
|
||||
"http-proxy-middleware": "^3.0.0",
|
||||
"vue": "^3.4.29",
|
||||
"vue-router": "^4.4.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@rushstack/eslint-patch": "^1.8.0",
|
||||
"@tsconfig/node20": "^20.1.4",
|
||||
"@types/node": "^20.14.10",
|
||||
"@vitejs/plugin-vue": "^5.0.5",
|
||||
"@vue/eslint-config-typescript": "^13.0.0",
|
||||
"@vue/tsconfig": "^0.5.1",
|
||||
"eslint": "^8.57.0",
|
||||
"eslint-plugin-vue": "^9.23.0",
|
||||
"npm-run-all2": "^6.2.0",
|
||||
"typescript": "~5.4.0",
|
||||
"vite": "^5.3.1",
|
||||
"vite-plugin-vue-setup-extend": "^0.4.0",
|
||||
"vue-tsc": "^2.0.21"
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
|
|
@ -0,0 +1,105 @@
|
|||
<template>
|
||||
<div id="app">
|
||||
<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="/">首页</el-menu-item>
|
||||
<el-menu-item index="/alert-management">告警管理</el-menu-item>
|
||||
<el-menu-item index="/real-time-monitoring">实时监测</el-menu-item>
|
||||
<el-menu-item index="/statistics-analysis">统计分析</el-menu-item>
|
||||
<!-- <el-menu-item index="/system-settings">系统设置</el-menu-item> -->
|
||||
<el-menu-item index="/test">系统设置</el-menu-item>
|
||||
</el-menu>
|
||||
</div>
|
||||
<div class="user-info">
|
||||
<span>线上轮巡</span>
|
||||
<span>|</span>
|
||||
<span>English</span>
|
||||
<span>|</span>
|
||||
<span>多云 35°C</span>
|
||||
<span>|</span>
|
||||
<el-dropdown>
|
||||
<span class="el-dropdown-link">
|
||||
test@qqqq.cn<i class="el-icon-arrow-down el-icon--right"></i>
|
||||
</span>
|
||||
<el-dropdown-menu>
|
||||
<el-dropdown-item>Profile</el-dropdown-item>
|
||||
<el-dropdown-item>Logout</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
</div>
|
||||
</el-header>
|
||||
<router-view />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
activeIndex: '/'
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
$route(to) {
|
||||
this.activeIndex = to.path
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.el-header {
|
||||
background-color: #1f2d3d;
|
||||
color: #fff;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0 20px;
|
||||
}
|
||||
.logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-right: 10px; /* 添加适当的右边距 */
|
||||
}
|
||||
.logo img {
|
||||
height: 40px;
|
||||
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; /* 菜单项之间均匀分布 */
|
||||
flex-grow: 1;
|
||||
}
|
||||
.el-menu-demo .el-menu-item {
|
||||
padding: 0 20px; /* 减少 padding 以增加菜单项之间的间隔 */
|
||||
text-align: center;
|
||||
font-size: 16px;
|
||||
}
|
||||
.user-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
margin-left: 10px; /* 添加适当的左边距 */
|
||||
}
|
||||
.user-info span {
|
||||
color: #fff;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
<template>
|
||||
<div class="about">
|
||||
<h1>关于</h1>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<scrip setup lang="ts" name="about">
|
||||
|
||||
</scrip>
|
||||
|
||||
|
||||
<style scoped>
|
||||
.about{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -0,0 +1,95 @@
|
|||
<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="24小时" name="first">24小时数据展示</el-tab-pane>
|
||||
<el-tab-pane label="30天" name="second">30天数据展示</el-tab-pane>
|
||||
<el-tab-pane label="12月" name="third">12月数据展示</el-tab-pane>
|
||||
</el-tabs>
|
||||
<div id="alert-chart" class="chart-container"></div>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from 'echarts';
|
||||
|
||||
export default {
|
||||
name: 'AlertChart',
|
||||
data() {
|
||||
return {
|
||||
activeName: 'first'
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.initChart();
|
||||
},
|
||||
methods: {
|
||||
handleClick(tab, event) {
|
||||
console.log(tab, event);
|
||||
// 根据选中的标签刷新图表数据
|
||||
this.initChart();
|
||||
},
|
||||
initChart() {
|
||||
var chartDom = document.getElementById('alert-chart');
|
||||
var myChart = echarts.init(chartDom);
|
||||
var option;
|
||||
|
||||
option = {
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: ['2024-07-08 00:00', '2024-07-08 08:00', '2024-07-08 16:00', '2024-07-09 00:00', '2024-07-09 08:00', '2024-07-09 16:00']
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value'
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data: [10, 22, 28, 43, 49, 62],
|
||||
type: 'line',
|
||||
areaStyle: {}
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
option && myChart.setOption(option);
|
||||
}
|
||||
}
|
||||
};
|
||||
</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,252 @@
|
|||
<template>
|
||||
<div class="alert-management">
|
||||
<div class="breadcrumb">
|
||||
<el-breadcrumb separator=">">
|
||||
<el-breadcrumb-item>告警管理</el-breadcrumb-item>
|
||||
<el-breadcrumb-item>实时告警</el-breadcrumb-item>
|
||||
</el-breadcrumb>
|
||||
</div>
|
||||
<div class="alert-summary">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="8">
|
||||
<div class="alert-card alert-pending">
|
||||
<div class="alert-card-header">告警数（待处理）</div>
|
||||
<div class="alert-card-content">{{ alerts.pending }}</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<div class="alert-card alert-processing">
|
||||
<div class="alert-card-header">告警数（处理中）</div>
|
||||
<div class="alert-card-content">{{ alerts.processing }}</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<div class="alert-card alert-completed">
|
||||
<div class="alert-card-header">告警数（已完成）</div>
|
||||
<div class="alert-card-content">{{ alerts.completed }}</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
<div class="region-overview">
|
||||
<el-card>
|
||||
<div slot="header" class="card-header">
|
||||
<span>区域概况</span>
|
||||
</div>
|
||||
<el-table
|
||||
:data="tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)"
|
||||
style="width: 100%;"
|
||||
row-key="id"
|
||||
:tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
|
||||
>
|
||||
<el-table-column prop="id" label="序号" width="50"></el-table-column>
|
||||
<el-table-column prop="region" label="区域名称" width="200"></el-table-column>
|
||||
<el-table-column prop="siteCount" label="站点数量" width="100"></el-table-column>
|
||||
<el-table-column prop="siteName" label="站点名称">
|
||||
<template v-slot="scope">
|
||||
<span v-if="scope.row.children"></span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="status" label="状态" width="100">
|
||||
<template v-slot="scope">
|
||||
<el-tag v-if="scope.row.status === '在线'" type="success">在线</el-tag>
|
||||
<el-tag v-else type="info">离线</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="cameraCount" label="摄像头数量" width="120"></el-table-column>
|
||||
<el-table-column prop="alertCount" label="告警数量" width="120"></el-table-column>
|
||||
<el-table-column label="操作" width="100">
|
||||
<template v-slot="scope">
|
||||
<el-button v-if="!scope.row.children" type="text" size="small">查看告警</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div class="pagination">
|
||||
<el-pagination
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
:current-page="currentPage"
|
||||
:page-sizes="[5, 10, 20, 30]"
|
||||
:page-size="pageSize"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="total"
|
||||
></el-pagination>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'AlertManagement',
|
||||
data() {
|
||||
return {
|
||||
alerts: {
|
||||
pending: 1460,
|
||||
processing: 1,
|
||||
completed: 123830
|
||||
},
|
||||
tableData: [
|
||||
{
|
||||
id: 1,
|
||||
region: '安徽区域',
|
||||
siteCount: 2,
|
||||
children: [
|
||||
{
|
||||
id: 11,
|
||||
siteName: '天长吾悦广场',
|
||||
status: '在线',
|
||||
cameraCount: 20,
|
||||
alertCount: 6059
|
||||
},
|
||||
{
|
||||
id: 12,
|
||||
siteName: '颖上吾悦广场',
|
||||
status: '在线',
|
||||
cameraCount: 20,
|
||||
alertCount: 617
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
region: '东北区域',
|
||||
siteCount: 2,
|
||||
children: [
|
||||
{
|
||||
id: 21,
|
||||
siteName: '东北站点1',
|
||||
status: '在线',
|
||||
cameraCount: 15,
|
||||
alertCount: 200
|
||||
},
|
||||
{
|
||||
id: 22,
|
||||
siteName: '东北站点2',
|
||||
status: '离线',
|
||||
cameraCount: 18,
|
||||
alertCount: 150
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
region: '沪苏区域',
|
||||
siteCount: 1,
|
||||
children: [
|
||||
{
|
||||
id: 31,
|
||||
siteName: '沪苏站点',
|
||||
status: '在线',
|
||||
cameraCount: 10,
|
||||
alertCount: 300
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
region: '华北区域',
|
||||
siteCount: 5
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
region: '华南区域',
|
||||
siteCount: 2
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
region: '华中区域',
|
||||
siteCount: 10
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
region: '闽浙区域',
|
||||
siteCount: 2
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
region: '南京区域',
|
||||
siteCount: 1
|
||||
},
|
||||
{
|
||||
id: 9,
|
||||
region: '山东区域',
|
||||
siteCount: 7
|
||||
},
|
||||
{
|
||||
id: 10,
|
||||
region: '苏北区域',
|
||||
siteCount: 3
|
||||
}
|
||||
],
|
||||
currentPage: 1,
|
||||
pageSize: 5,
|
||||
total: 10
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
handleSizeChange(val) {
|
||||
this.pageSize = val;
|
||||
},
|
||||
handleCurrentChange(val) {
|
||||
this.currentPage = val;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.alert-management {
|
||||
padding: 40px;
|
||||
background-color: #f5f7fa;
|
||||
}
|
||||
.breadcrumb {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.alert-summary {
|
||||
background-color: #fff;
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.alert-card {
|
||||
background-color: #fff;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
padding: 20px;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
.alert-card-header {
|
||||
font-size: 16px;
|
||||
margin-bottom: 10px;
|
||||
color: #333;
|
||||
}
|
||||
.alert-card-content {
|
||||
font-size: 28px;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
}
|
||||
.alert-pending {
|
||||
background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%);
|
||||
}
|
||||
.alert-processing {
|
||||
background: linear-gradient(135deg, #a1c4fd 0%, #c2e9fb 100%);
|
||||
}
|
||||
.alert-completed {
|
||||
background: linear-gradient(135deg, #a18cd1 0%, #fbc2eb 100%);
|
||||
}
|
||||
.region-overview {
|
||||
background-color: #fff;
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
.card-header {
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.pagination {
|
||||
margin-top: 20px;
|
||||
text-align: right;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
<template>
|
||||
<div>
|
||||
<h2>摄像头管理</h2>
|
||||
<!-- 模拟静态数据内容 -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "CameraManagement",
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* 添加需要的样式 */
|
||||
</style>
|
||||
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
<template>
|
||||
<div>
|
||||
<h2>设备管理</h2>
|
||||
<!-- 模拟静态数据内容 -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "DeviceManagement",
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* 添加需要的样式 */
|
||||
</style>
|
||||
|
||||
|
|
@ -0,0 +1,288 @@
|
|||
<template>
|
||||
<div class="home">
|
||||
<div class="breadcrumb">
|
||||
<el-breadcrumb separator=">">
|
||||
<el-breadcrumb-item>主页</el-breadcrumb-item>
|
||||
</el-breadcrumb>
|
||||
</div>
|
||||
<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 === '已处理' ? 'success' : 'warning'">{{ 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-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 === '已处理' ? 'success' : 'warning'">{{ 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 } from '../../superbox.js';
|
||||
|
||||
export default {
|
||||
name: 'Home',
|
||||
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: {
|
||||
'': '待处理',
|
||||
'': '处理中',
|
||||
'': '已处理'
|
||||
},
|
||||
currentPage: 1,
|
||||
pageSize: 20,
|
||||
}
|
||||
},
|
||||
async created() {
|
||||
try {
|
||||
const token = await login('turingvideo', '1234qwer!');
|
||||
// await initCodeNameMap(token);
|
||||
this.tableData = await getEvents(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: {
|
||||
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%;
|
||||
}
|
||||
|
||||
/* 弹窗> 显示左右等分*/
|
||||
.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,17 @@
|
|||
<template>
|
||||
<div>
|
||||
<h2>层级列表</h2>
|
||||
<!-- 模拟静态数据内容 -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "LevelList",
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* 添加需要的样式 */
|
||||
</style>
|
||||
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
<template>
|
||||
<div>
|
||||
<h2>层级树</h2>
|
||||
<!-- 模拟静态数据内容 -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "LevelTree",
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* 添加需要的样式 */
|
||||
</style>
|
||||
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
<template>
|
||||
<div>
|
||||
<el-card>
|
||||
<h2>当前位置：中国</h2>
|
||||
<!-- Add map implementation here -->
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'LocationMap'
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* Add your styles here */
|
||||
</style>
|
||||
|
|
@ -0,0 +1,83 @@
|
|||
<!-- 测试 -->
|
||||
<template>
|
||||
<div>
|
||||
<button @click="loginAndGetToken">Login and Get Token</button>
|
||||
<button @click="withTokenGetCameras">Get Cameras with Token</button>
|
||||
<pre>Token: {{ token }}</pre>
|
||||
<pre>Cameras: {{ cameras }}</pre>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import axios from 'axios';
|
||||
import { ref } from 'vue';
|
||||
|
||||
export default {
|
||||
name: 'App',
|
||||
setup() {
|
||||
const token = ref('');
|
||||
const cameras = ref([]);
|
||||
|
||||
const api_base = "/api/v1";
|
||||
const api_login = api_base + "/auth/login";
|
||||
const api_cameras = api_base + "/camera/cameras";
|
||||
const username = "turingvideo";
|
||||
const password = "1234qwer!";
|
||||
|
||||
const loginAndGetToken = async () => {
|
||||
try {
|
||||
const res = await axios.post(api_login,
|
||||
{
|
||||
'username': username,
|
||||
'password': password,
|
||||
'cookieless': 'True'
|
||||
},
|
||||
{
|
||||
headers: {
|
||||
'Content-type': 'application/json'
|
||||
}
|
||||
}
|
||||
);
|
||||
console.log(res.data)
|
||||
token.value = res.data.ret.token;
|
||||
console.log('Token:', token.value);
|
||||
} catch (e) {
|
||||
console.log(e);
|
||||
}
|
||||
};
|
||||
|
||||
const withTokenGetCameras = async () => {
|
||||
try {
|
||||
if (!token.value) {
|
||||
console.error('No token available. Please login first.');
|
||||
return;
|
||||
}
|
||||
|
||||
const res = await axios.get(api_cameras, {
|
||||
headers: {
|
||||
'Content-type': 'application/json',
|
||||
'Authorization': `Bearer ${token.value}`,
|
||||
'Cookie': `jwt=${token.value}; sessionid=27iy45x18cq2uio2k2gnsl4a8s4si935`
|
||||
}
|
||||
});
|
||||
cameras.value = res.data;
|
||||
console.log('Cameras:', cameras.value);
|
||||
} catch (e) {
|
||||
console.log(e);
|
||||
}
|
||||
};
|
||||
|
||||
return {
|
||||
loginAndGetToken,
|
||||
withTokenGetCameras,
|
||||
token,
|
||||
cameras
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
</script>
|
||||
|
||||
<style>
|
||||
/* Add your styles here */
|
||||
</style>
|
||||
|
|
@ -0,0 +1,313 @@
|
|||
<template>
|
||||
<div class="real-time-monitoring">
|
||||
<div class="breadcrumb">
|
||||
<el-breadcrumb separator=">">
|
||||
<el-breadcrumb-item>实时监测</el-breadcrumb-item>
|
||||
<el-breadcrumb-item>实时监测数据</el-breadcrumb-item>
|
||||
</el-breadcrumb>
|
||||
</div>
|
||||
<div class="alert-summary">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<div class="chart-container">
|
||||
<div class="chart-header">告警情况汇总</div>
|
||||
<div ref="cameraChart" class="chart"></div>
|
||||
<div class="chart-info">
|
||||
<div>摄像头数量</div>
|
||||
<div>
|
||||
<span class="status online">• 在线</span> 1885
|
||||
<span class="status offline">• 离线</span> 115
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<div class="chart-container">
|
||||
<div class="chart-header">站点数量</div>
|
||||
<div ref="siteChart" class="chart"></div>
|
||||
<div class="chart-info">
|
||||
<div>编制总数</div>
|
||||
<div>
|
||||
<span class="status online">• 在线</span> 47
|
||||
<span class="status offline">• 离线</span> 7
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
<div class="device-status">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="8">
|
||||
<div class="status-card pending">
|
||||
<div class="status-header">待处理告警摄像头</div>
|
||||
<div class="status-content">{{ deviceStatus.pending }}</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<div class="status-card total">
|
||||
<div class="status-header">累计产生告警摄像头</div>
|
||||
<div class="status-content">{{ deviceStatus.total }}</div>
|
||||
<div class="status-footer">
|
||||
<div>近7天产生告警摄像头 {{ deviceStatus.last7Days }}</div>
|
||||
<div>近30天产生告警摄像头 {{ deviceStatus.last30Days }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<div class="status-card inactive">
|
||||
<div class="status-header">非活跃摄像头（累计90天未产生告警）</div>
|
||||
<div class="status-content">{{ deviceStatus.inactive }}</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
<div class="region-overview">
|
||||
<el-card>
|
||||
<div slot="header" class="card-header">
|
||||
<span>区域概况</span>
|
||||
</div>
|
||||
<el-table
|
||||
:data="pagedData"
|
||||
style="width: 100%;"
|
||||
row-key="id"
|
||||
height="400"
|
||||
>
|
||||
<el-table-column prop="id" label="序号" width="50"></el-table-column>
|
||||
<el-table-column prop="region" label="区域名称" width="200"></el-table-column>
|
||||
<el-table-column prop="siteCount" label="站点数量" width="100"></el-table-column>
|
||||
<el-table-column prop="cameraCount" label="摄像头数量" width="120"></el-table-column>
|
||||
<el-table-column label="操作" width="100">
|
||||
<template slot-scope="scope">
|
||||
<el-button type="text" size="small">查看站点</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div class="pagination">
|
||||
<el-pagination
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
:current-page="currentPage"
|
||||
:page-sizes="[5, 10, 20, 30]"
|
||||
:page-size="pageSize"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="tableData.length"
|
||||
></el-pagination>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from 'echarts';
|
||||
|
||||
export default {
|
||||
name: 'RealTimeMonitoring',
|
||||
data() {
|
||||
return {
|
||||
deviceStatus: {
|
||||
pending: 100,
|
||||
total: 1104,
|
||||
last7Days: 125,
|
||||
last30Days: 185,
|
||||
inactive: 1738
|
||||
},
|
||||
tableData: [
|
||||
{ id: 1, region: '安徽区域', siteCount: 2, cameraCount: 40 },
|
||||
{ id: 2, region: '东北区域', siteCount: 2, cameraCount: 40 },
|
||||
{ id: 3, region: '沪苏区域', siteCount: 1, cameraCount: 311 },
|
||||
{ id: 4, region: '华北区域', siteCount: 5, cameraCount: 120 },
|
||||
{ id: 5, region: '华南区域', siteCount: 2, cameraCount: 60 },
|
||||
{ id: 6, region: '华中区域', siteCount: 10, cameraCount: 279 },
|
||||
{ id: 7, region: '闽浙区域', siteCount: 2, cameraCount: 20 },
|
||||
{ id: 8, region: '南京区域', siteCount: 1, cameraCount: 377 },
|
||||
{ id: 9, region: '山东区域', siteCount: 7, cameraCount: 193 },
|
||||
{ id: 10, region: '苏北区域', siteCount: 3, cameraCount: 100 }
|
||||
],
|
||||
currentPage: 1,
|
||||
pageSize: 5
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
pagedData() {
|
||||
const start = (this.currentPage - 1) * this.pageSize;
|
||||
const end = this.currentPage * this.pageSize;
|
||||
return this.tableData.slice(start, end);
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.initCameraChart();
|
||||
this.initSiteChart();
|
||||
},
|
||||
methods: {
|
||||
initCameraChart() {
|
||||
const cameraChart = echarts.init(this.$refs.cameraChart);
|
||||
const cameraOptions = {
|
||||
series: [
|
||||
{
|
||||
name: '摄像头数量',
|
||||
type: 'pie',
|
||||
radius: ['50%', '70%'],
|
||||
avoidLabelOverlap: false,
|
||||
label: {
|
||||
show: false,
|
||||
position: 'center'
|
||||
},
|
||||
emphasis: {
|
||||
label: {
|
||||
show: true,
|
||||
fontSize: '30',
|
||||
fontWeight: 'bold'
|
||||
}
|
||||
},
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
data: [
|
||||
{ value: 1885, name: '在线' },
|
||||
{ value: 115, name: '离线' }
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
cameraChart.setOption(cameraOptions);
|
||||
},
|
||||
initSiteChart() {
|
||||
const siteChart = echarts.init(this.$refs.siteChart);
|
||||
const siteOptions = {
|
||||
series: [
|
||||
{
|
||||
name: '站点数量',
|
||||
type: 'pie',
|
||||
radius: ['50%', '70%'],
|
||||
avoidLabelOverlap: false,
|
||||
label: {
|
||||
show: false,
|
||||
position: 'center'
|
||||
},
|
||||
emphasis: {
|
||||
label: {
|
||||
show: true,
|
||||
fontSize: '30',
|
||||
fontWeight: 'bold'
|
||||
}
|
||||
},
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
data: [
|
||||
{ value: 47, name: '在线' },
|
||||
{ value: 7, name: '离线' }
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
siteChart.setOption(siteOptions);
|
||||
},
|
||||
handleSizeChange(val) {
|
||||
this.pageSize = val;
|
||||
},
|
||||
handleCurrentChange(val) {
|
||||
this.currentPage = val;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.real-time-monitoring {
|
||||
padding: 20px;
|
||||
background-color: #f5f7fa;
|
||||
}
|
||||
.breadcrumb {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.alert-summary {
|
||||
background-color: #fff;
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.chart-container {
|
||||
background-color: #fff;
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
||||
text-align: center;
|
||||
}
|
||||
.chart-header {
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.chart {
|
||||
width: 100%;
|
||||
height: 300px;
|
||||
}
|
||||
.chart-info {
|
||||
margin-top: 10px;
|
||||
}
|
||||
.status {
|
||||
margin-right: 10px;
|
||||
}
|
||||
.status.online {
|
||||
color: #67c23a;
|
||||
}
|
||||
.status.offline {
|
||||
color: #f56c6c;
|
||||
}
|
||||
.device-status {
|
||||
background-color: #fff;
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.status-card {
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
height: 200px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
.status-card.pending {
|
||||
background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%);
|
||||
}
|
||||
.status-card.total {
|
||||
background: linear-gradient(135deg, #a1c4fd 0%, #c2e9fb 100%);
|
||||
}
|
||||
.status-card.inactive {
|
||||
background: linear-gradient(135deg, #a18cd1 0%, #fbc2eb 100%);
|
||||
}
|
||||
.status-header {
|
||||
font-size: 16px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.status-content {
|
||||
font-size: 28px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.status-footer {
|
||||
margin-top: 10px;
|
||||
font-size: 14px;
|
||||
}
|
||||
.region-overview {
|
||||
background-color: #fff;
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.card-header {
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.pagination {
|
||||
margin-top: 20px;
|
||||
text-align: right;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
<template>
|
||||
<div>
|
||||
<h2>区域1</h2>
|
||||
<!-- 模拟静态数据内容 -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "Region1",
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* 添加需要的样式 */
|
||||
</style>
|
||||
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
<template>
|
||||
<div>
|
||||
<h2>区域2</h2>
|
||||
<!-- 模拟静态数据内容 -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "Region2",
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* 添加需要的样式 */
|
||||
</style>
|
||||
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
<template>
|
||||
<div>
|
||||
<h2>服务器管理</h2>
|
||||
<!-- 模拟静态数据内容 -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "ServerManagement",
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* 添加需要的样式 */
|
||||
</style>
|
||||
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
<template>
|
||||
<div>
|
||||
<h2>站点管理</h2>
|
||||
<!-- 模拟静态数据内容 -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "SiteManagement",
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* 添加需要的样式 */
|
||||
</style>
|
||||
|
||||
|
|
@ -0,0 +1,101 @@
|
|||
<template>
|
||||
<div>
|
||||
<el-card class="stats-card">
|
||||
<div class="stats-header">布控情况</div>
|
||||
<el-row :gutter="20" class="stats-row">
|
||||
<el-col :span="8">
|
||||
<div class="stats-item">
|
||||
<div class="stats-title">布控区域数</div>
|
||||
<div class="stats-value">15</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<div class="stats-item">
|
||||
<div class="stats-title">布控站点数</div>
|
||||
<div class="stats-value">54</div>
|
||||
<div class="stats-subvalue">7 异常站点</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<div class="stats-item">
|
||||
<div class="stats-title">布控摄像头数</div>
|
||||
<div class="stats-value">2000</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div class="stats-divider"></div>
|
||||
<div class="stats-header">告警情况</div>
|
||||
<el-row :gutter="20" class="stats-row">
|
||||
<el-col :span="8">
|
||||
<div class="stats-item">
|
||||
<div class="stats-title">告警站点</div>
|
||||
<div class="stats-value">25</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<div class="stats-item">
|
||||
<div class="stats-title">未完成告警</div>
|
||||
<div class="stats-value">1511</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<div class="stats-item">
|
||||
<div class="stats-title">已完成告警</div>
|
||||
<div class="stats-value">123916</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Statistics'
|
||||
}
|
||||
</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-bottom: 20px;
|
||||
}
|
||||
|
||||
.stats-item {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.stats-title {
|
||||
font-size: 16px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.stats-value {
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.stats-subvalue {
|
||||
font-size: 14px;
|
||||
color: #f39c12;
|
||||
}
|
||||
|
||||
.stats-divider {
|
||||
border-top: 1px solid #3a4b5c;
|
||||
margin: 20px 0;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,376 @@
|
|||
<template>
|
||||
<div class="statistics-analysis">
|
||||
<div class="breadcrumb">
|
||||
<el-breadcrumb separator=">">
|
||||
<el-breadcrumb-item>统计分析</el-breadcrumb-item>
|
||||
</el-breadcrumb>
|
||||
</div>
|
||||
<div class="filter-form">
|
||||
<el-card>
|
||||
<div slot="header" class="card-header">
|
||||
<span>筛选条件</span>
|
||||
</div>
|
||||
<el-form :inline="true" :model="filterForm" class="demo-form-inline">
|
||||
<el-form-item label="所属站点:">
|
||||
<el-select v-model="filterForm.site" placeholder="全部">
|
||||
<el-option label="全部" value="all"></el-option>
|
||||
<el-option label="站点一" value="site1"></el-option>
|
||||
<el-option label="站点二" value="site2"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="开始时间:">
|
||||
<el-date-picker v-model="filterForm.startDate" type="date" placeholder="选择日期"></el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item label="结束时间:">
|
||||
<el-date-picker v-model="filterForm.endDate" type="date" placeholder="选择日期"></el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="onSearch">查询</el-button>
|
||||
<el-button @click="onReset">清空</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-card>
|
||||
</div>
|
||||
<div class="device-management">
|
||||
<el-card>
|
||||
<div slot="header" class="card-header">
|
||||
<span>设备管理</span>
|
||||
</div>
|
||||
<el-row :gutter="10">
|
||||
<el-col :span="8">
|
||||
<div class="status-info">
|
||||
<div class="status-title">摄像头总数</div>
|
||||
<div class="status-value">{{ deviceData.totalCameras }}</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<div class="status-info">
|
||||
<div class="status-title">在线</div>
|
||||
<div class="status-value">{{ deviceData.online }}</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<div class="status-info">
|
||||
<div class="status-title">异常</div>
|
||||
<div class="status-value">{{ deviceData.abnormal }}</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="10" class="chart-row">
|
||||
<el-col :span="12">
|
||||
<div ref="statusPieChart" class="chart"></div>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<div class="status-percentage">
|
||||
<div><span class="dot online"></span> 在线 {{ deviceData.onlinePercentage }}%</div>
|
||||
<div><span class="dot abnormal"></span> 异常 {{ deviceData.abnormalPercentage }}%</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div class="chart-container">
|
||||
<div ref="distributionBarChart" class="chart"></div>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
<div class="alert-management">
|
||||
<el-card>
|
||||
<div slot="header" class="card-header">
|
||||
<span>告警管理</span>
|
||||
</div>
|
||||
<el-row :gutter="10">
|
||||
<el-col :span="8">
|
||||
<div class="alert-info">
|
||||
<div class="alert-title">总告警数</div>
|
||||
<div class="alert-value">{{ alertData.totalAlerts }}</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="4">
|
||||
<div class="alert-info pending">
|
||||
<div class="alert-title">待处理</div>
|
||||
<div class="alert-value">{{ alertData.pending }}</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="4">
|
||||
<div class="alert-info processing">
|
||||
<div class="alert-title">处理中</div>
|
||||
<div class="alert-value">{{ alertData.processing }}</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="4">
|
||||
<div class="alert-info completed">
|
||||
<div class="alert-title">已完成</div>
|
||||
<div class="alert-value">{{ alertData.completed }}</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="10" class="chart-row">
|
||||
<el-col :span="12">
|
||||
<div ref="alertPieChart" class="chart"></div>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<div ref="alertTrendChart" class="chart"></div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-card>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from 'echarts';
|
||||
|
||||
export default {
|
||||
name: 'StatisticsAnalysis',
|
||||
data() {
|
||||
return {
|
||||
filterForm: {
|
||||
site: 'all',
|
||||
startDate: '',
|
||||
endDate: ''
|
||||
},
|
||||
deviceData: {
|
||||
totalCameras: 2000,
|
||||
online: 1885,
|
||||
abnormal: 115,
|
||||
onlinePercentage: 94,
|
||||
abnormalPercentage: 6,
|
||||
distribution: [
|
||||
{ name: '杂物堆积', value: 600 },
|
||||
{ name: '车辆拥堵', value: 500 },
|
||||
{ name: '违规停车', value: 400 },
|
||||
{ name: '饮料垃圾检测', value: 300 },
|
||||
{ name: '垃圾桶满溢', value: 200 },
|
||||
{ name: '入侵检测', value: 150 },
|
||||
{ name: '扶梯运行状态', value: 100 },
|
||||
{ name: '违规放置', value: 80 },
|
||||
{ name: '长期门状态检测', value: 70 },
|
||||
{ name: '人员密集', value: 60 },
|
||||
{ name: '保洁点名', value: 50 }
|
||||
]
|
||||
},
|
||||
alertData: {
|
||||
totalAlerts: 0,
|
||||
pending: 0,
|
||||
processing: 0,
|
||||
completed: 0
|
||||
}
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.initStatusPieChart();
|
||||
this.initDistributionBarChart();
|
||||
this.initAlertPieChart();
|
||||
this.initAlertTrendChart();
|
||||
},
|
||||
methods: {
|
||||
onSearch() {
|
||||
// 查询逻辑
|
||||
console.log('查询参数:', this.filterForm);
|
||||
},
|
||||
onReset() {
|
||||
this.filterForm = {
|
||||
site: 'all',
|
||||
startDate: '',
|
||||
endDate: ''
|
||||
};
|
||||
},
|
||||
initStatusPieChart() {
|
||||
const statusPieChart = echarts.init(this.$refs.statusPieChart);
|
||||
const options = {
|
||||
series: [
|
||||
{
|
||||
name: '设备状态分布',
|
||||
type: 'pie',
|
||||
radius: '50%',
|
||||
data: [
|
||||
{ value: this.deviceData.online, name: '在线' },
|
||||
{ value: this.deviceData.abnormal, name: '异常' }
|
||||
],
|
||||
label: {
|
||||
formatter: '{b}: {d}%'
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
statusPieChart.setOption(options);
|
||||
},
|
||||
initDistributionBarChart() {
|
||||
const distributionBarChart = echarts.init(this.$refs.distributionBarChart);
|
||||
const options = {
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: this.deviceData.distribution.map(item => item.name)
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value'
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data: this.deviceData.distribution.map(item => item.value),
|
||||
type: 'bar'
|
||||
}
|
||||
]
|
||||
};
|
||||
distributionBarChart.setOption(options);
|
||||
},
|
||||
initAlertPieChart() {
|
||||
const alertPieChart = echarts.init(this.$refs.alertPieChart);
|
||||
const options = {
|
||||
series: [
|
||||
{
|
||||
name: '告警事件分布',
|
||||
type: 'pie',
|
||||
radius: '50%',
|
||||
data: [
|
||||
{ value: this.alertData.pending, name: '待处理' },
|
||||
{ value: this.alertData.processing, name: '处理中' },
|
||||
{ value: this.alertData.completed, name: '已完成' }
|
||||
],
|
||||
label: {
|
||||
formatter: '{b}: {d}%'
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
alertPieChart.setOption(options);
|
||||
},
|
||||
initAlertTrendChart() {
|
||||
const alertTrendChart = echarts.init(this.$refs.alertTrendChart);
|
||||
const options = {
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: ['2024-07-16', '2024-07-17', '2024-07-18', '2024-07-19', '2024-07-20', '2024-07-21', '2024-07-22']
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value'
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '待处理',
|
||||
data: [0, 0, 0, 0, 0, 0, 0],
|
||||
type: 'line',
|
||||
smooth: true
|
||||
},
|
||||
{
|
||||
name: '处理中',
|
||||
data: [0, 0, 0, 0, 0, 0, 0],
|
||||
type: 'line',
|
||||
smooth: true
|
||||
},
|
||||
{
|
||||
name: '已完成',
|
||||
data: [0, 0, 0, 0, 0, 0, 0],
|
||||
type: 'line',
|
||||
smooth: true
|
||||
}
|
||||
]
|
||||
};
|
||||
alertTrendChart.setOption(options);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.statistics-analysis {
|
||||
padding: 20px;
|
||||
background-color: #f5f7fa;
|
||||
}
|
||||
.breadcrumb {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.filter-form {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.card-header {
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.demo-form-inline .el-form-item {
|
||||
margin-right: 20px;
|
||||
}
|
||||
.el-form-item .el-select,
|
||||
.el-form-item .el-date-picker {
|
||||
width: 200px;
|
||||
}
|
||||
.el-button {
|
||||
margin-right: 10px;
|
||||
}
|
||||
.device-management {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.status-info {
|
||||
background-color: #fff;
|
||||
padding: 10px;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
||||
height: 100px;
|
||||
}
|
||||
.status-title {
|
||||
font-size: 14px;
|
||||
color: #999;
|
||||
}
|
||||
.status-value {
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
margin-top: 5px;
|
||||
}
|
||||
.chart-row {
|
||||
margin-top: 20px;
|
||||
}
|
||||
.chart {
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
}
|
||||
.status-percentage {
|
||||
margin-top: 20px;
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
}
|
||||
.status-percentage .dot {
|
||||
display: inline-block;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 50%;
|
||||
margin-right: 5px;
|
||||
}
|
||||
.status-percentage .online {
|
||||
background-color: #67c23a;
|
||||
}
|
||||
.status-percentage .abnormal {
|
||||
background-color: #f56c6c;
|
||||
}
|
||||
.chart-container {
|
||||
margin-top: 20px;
|
||||
}
|
||||
.alert-management {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.alert-info {
|
||||
background-color: #fff;
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
.alert-info.pending {
|
||||
background: linear-gradient(135deg, #64b5f6 0%, #bbdefb 100%);
|
||||
}
|
||||
.alert-info.processing {
|
||||
background: linear-gradient(135deg, #9575cd 0%, #d1c4e9 100%);
|
||||
}
|
||||
.alert-info.completed {
|
||||
background: linear-gradient(135deg, #81c784 0%, #c8e6c9 100%);
|
||||
}
|
||||
.alert-title {
|
||||
font-size: 14px;
|
||||
color: #999;
|
||||
}
|
||||
.alert-value {
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
margin-top: 5px;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
@ -0,0 +1,71 @@
|
|||
<template>
|
||||
<div class="system-setting">
|
||||
<el-row>
|
||||
<el-col :span="3">
|
||||
<el-menu
|
||||
:default-openeds="['1', '2', '3', '4']"
|
||||
router
|
||||
class="el-menu-vertical-demo"
|
||||
background-color="#1f2d3d"
|
||||
text-color="#fff"
|
||||
active-text-color="#ffd04b"
|
||||
>
|
||||
<el-submenu index="1">
|
||||
<template slot="title">
|
||||
<i class="el-icon-menu"></i>
|
||||
<span>层级管理</span>
|
||||
</template>
|
||||
<el-menu-item index="/levelList">层级列表</el-menu-item>
|
||||
<el-menu-item index="/levelTree">层级树</el-menu-item>
|
||||
</el-submenu>
|
||||
<el-menu-item index="/siteManagement">
|
||||
<i class="el-icon-s-platform"></i>
|
||||
<span slot="title">站点管理</span>
|
||||
</el-menu-item>
|
||||
<el-submenu index="3">
|
||||
<template slot="title">
|
||||
<i class="el-icon-setting"></i>
|
||||
<span>设备管理</span>
|
||||
</template>
|
||||
<el-menu-item index="/serverManagement">服务器管理</el-menu-item>
|
||||
<el-menu-item index="/cameraManagement">摄像头管理</el-menu-item>
|
||||
</el-submenu>
|
||||
<el-menu-item index="/userManagement">
|
||||
<i class="el-icon-user"></i>
|
||||
<span slot="title">用户管理</span>
|
||||
</el-menu-item>
|
||||
</el-menu>
|
||||
</el-col>
|
||||
<el-col :span="21">
|
||||
<div class="router-view-container">
|
||||
<router-view></router-view>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "SystemSetting",
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.system-setting {
|
||||
height: 100%;
|
||||
}
|
||||
.el-menu-vertical-demo {
|
||||
height: 100%;
|
||||
border-right: none;
|
||||
}
|
||||
.router-view-container {
|
||||
margin: 20px 30px 20px 10px;
|
||||
padding: 20px;
|
||||
background-color: #fff;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
border-radius: 8px;
|
||||
height: calc(100vh - 100px); /* 调整高度以适应页面 */
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
<template>
|
||||
<div>
|
||||
<h2>用户管理</h2>
|
||||
<!-- 模拟静态数据内容 -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "UserManagement",
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* 添加需要的样式 */
|
||||
</style>
|
||||
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
|
||||
import {reactive} from "vue"
|
||||
import axios from "axios"
|
||||
|
||||
export default function (){
|
||||
|
||||
let dogList = reactive([
|
||||
'https://images.dog.ceo/breeds/pembroke/n02113023_1774.jpg'
|
||||
])
|
||||
async function addDog(){
|
||||
try {
|
||||
let result = await axios.get('https://dog.ceo/api/breeds/image/random')
|
||||
console.log(result.data.message)
|
||||
dogList.push(result.data.message)
|
||||
} catch (error) {
|
||||
console.log(error)
|
||||
}
|
||||
|
||||
}
|
||||
return {dogList,addDog}
|
||||
}
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
import {ref,onMounted} from "vue"
|
||||
import axios from "axios"
|
||||
|
||||
export default function (){
|
||||
|
||||
let sum = ref(0)
|
||||
|
||||
function changeSum(){
|
||||
sum.value++
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
changeSum()
|
||||
})
|
||||
|
||||
return {sum,changeSum}
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
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 * as echarts from 'echarts'
|
||||
import axios from 'axios';
|
||||
|
||||
|
||||
|
||||
|
||||
const app = createApp(App)
|
||||
|
||||
app.use(ElementPlus)
|
||||
app.use(router)
|
||||
app.config.globalProperties.$echarts = echarts
|
||||
app.mount("#app");
|
||||
|
|
@ -0,0 +1,75 @@
|
|||
// 第一步，引入createRouter
|
||||
import { createRouter, createWebHistory,createWebHashHistory} from 'vue-router'
|
||||
|
||||
// 引入路由组件
|
||||
import Home from '@/components/Home.vue'
|
||||
import About from '@/components/About.vue'
|
||||
import News from '@/components/News.vue'
|
||||
import AlertManagement from '@/components/AlertManagement.vue'
|
||||
import RealTimeMonitoring from '@/components/RealTimeMonitoring.vue'
|
||||
import StatisticsAnalysis from '@/components/StatisticsAnalysis.vue'
|
||||
import SystemSettings from '@/components/SystemSettings.vue'
|
||||
import LevelList from '@/components/LevelList.vue'
|
||||
import LevelTree from '@/components/LevelTree.vue'
|
||||
import Region1 from '@/components/Region1.vue'
|
||||
import Region2 from '@/components/Region2.vue'
|
||||
import SiteManagement from '@/components/SiteManagement.vue'
|
||||
import DeviceManagement from '@/components/DeviceManagement.vue'
|
||||
import ServerManagement from '@/components/ServerManagement.vue'
|
||||
import CameraManagement from '@/components/CameraManagement.vue'
|
||||
import UserManagement from '@/components/UserManagement.vue'
|
||||
|
||||
|
||||
// 第二步，创建路由求
|
||||
const router = createRouter({
|
||||
history: createWebHashHistory(),
|
||||
routes: [
|
||||
{ path: '/', component: Home },
|
||||
{ path: '/news', component: News },
|
||||
{ path: '/about', component: About },
|
||||
{ path: '/alert-management', name: 'AlertManagement', component: AlertManagement },
|
||||
{ path: '/real-time-monitoring', name: 'RealTimeMonitoring', component: RealTimeMonitoring },
|
||||
{ path: '/statistics-analysis', name: 'StatisticsAnalysis', component: StatisticsAnalysis },
|
||||
{ path: '/system-settings', name: 'SystemSettings', component: SystemSettings },
|
||||
{ path: '/levelList', name: 'LevelList', component: LevelList },
|
||||
{ path: '/region1', name: 'Region1', component: Region1 },
|
||||
{ path: '/region2', name: 'Region2', component: Region2 },
|
||||
{ path: '/siteManagement', name: 'SiteManagement', component: SiteManagement },
|
||||
{ path: '/deviceManagement', name: 'DeviceManagement', component: DeviceManagement },
|
||||
{ path: '/serverManagement', name: 'ServerManagement', component: ServerManagement },
|
||||
{ path: '/cameraManagement', name: 'CameraManagement', component: CameraManagement },
|
||||
{ path: '/userManagement', name: 'UserManagement', component: UserManagement },
|
||||
]
|
||||
})
|
||||
|
||||
// const routes = [
|
||||
// { path: '/', component: Home },
|
||||
// { path: '/news', component: News },
|
||||
// { path: '/about', component: About },
|
||||
// { path: '/alert-management', name: 'AlertManagement', component: AlertManagement },
|
||||
// { path: '/real-time-monitoring', name: 'RealTimeMonitoring', component: RealTimeMonitoring },
|
||||
// { path: '/statistics-analysis', name: 'StatisticsAnalysis', component: StatisticsAnalysis },
|
||||
// { path: '/system-settings', name: 'SystemSettings', component: SystemSettings },
|
||||
// { path: '/levelList', name: 'LevelList', component: LevelList },
|
||||
// { path: '/region1', name: 'Region1', component: Region1 },
|
||||
// { path: '/region2', name: 'Region2', component: Region2 },
|
||||
// { path: '/siteManagement', name: 'SiteManagement', component: SiteManagement },
|
||||
// { path: '/deviceManagement', name: 'DeviceManagement', component: DeviceManagement },
|
||||
// { path: '/serverManagement', name: 'ServerManagement', component: ServerManagement },
|
||||
// { path: '/cameraManagement', name: 'CameraManagement', component: CameraManagement },
|
||||
// { path: '/userManagement', name: 'UserManagement', component: UserManagement },
|
||||
|
||||
// ]
|
||||
|
||||
// const router = createRouter({
|
||||
// history: createWebHistory(),
|
||||
// routes
|
||||
// })
|
||||
|
||||
|
||||
// const routes = createRouter({
|
||||
// history: createWebHistory(process.env.BASE_URL),
|
||||
// router
|
||||
// })
|
||||
// 暴漏出去router
|
||||
export default router
|
||||
|
|
@ -0,0 +1,158 @@
|
|||
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";
|
||||
const ALGORITHM_ROUTE = BASE_ROUTE + "/algorithms";
|
||||
|
||||
let addr = address;
|
||||
if (!addr) {
|
||||
addr = window.location.host.replace(/:\d+/, "");
|
||||
}
|
||||
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,
|
||||
};
|
||||
|
|
@ -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,16 @@
|
|||
{
|
||||
"files": [],
|
||||
"references": [
|
||||
{
|
||||
"path": "./tsconfig.node.json"
|
||||
},
|
||||
{
|
||||
"path": "./tsconfig.app.json"
|
||||
}
|
||||
],
|
||||
"compilerOptions": {
|
||||
"types": ["element-plus/global"]
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -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,37 @@
|
|||
import { defineConfig } from 'vite'
|
||||
import vue from '@vitejs/plugin-vue'
|
||||
import vueSetupExtend from 'vite-plugin-vue-setup-extend'
|
||||
import { fileURLToPath, URL } from 'node:url'
|
||||
import { createProxyMiddleware } from 'http-proxy-middleware'
|
||||
|
||||
|
||||
// https://vitejs.dev/config/
|
||||
export default defineConfig({
|
||||
plugins: [
|
||||
vue(),
|
||||
vueSetupExtend(),
|
||||
],
|
||||
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: 8090,
|
||||
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/', '')
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
// vite.config.ts
|
||||
import { fileURLToPath, URL } from "node:url";
|
||||
import { defineConfig } from "file:///D:/java/demo/turing/vue_one/node_modules/vite/dist/node/index.js";
|
||||
import vue from "file:///D:/java/demo/turing/vue_one/node_modules/@vitejs/plugin-vue/dist/index.mjs";
|
||||
import vueSetupExtend from "file:///D:/java/demo/turing/vue_one/node_modules/vite-plugin-vue-setup-extend/dist/index.mjs";
|
||||
var __vite_injected_original_import_meta_url = "file:///D:/java/demo/turing/vue_one/vite.config.ts";
|
||||
var vite_config_default = defineConfig({
|
||||
plugins: [
|
||||
vue(),
|
||||
vueSetupExtend()
|
||||
],
|
||||
resolve: {
|
||||
alias: {
|
||||
"@": fileURLToPath(new URL("./src", __vite_injected_original_import_meta_url))
|
||||
}
|
||||
}
|
||||
});
|
||||
export {
|
||||
vite_config_default as default
|
||||
};
|
||||
//# sourceMappingURL=data:application/json;base64,ewogICJ2ZXJzaW9uIjogMywKICAic291cmNlcyI6IFsidml0ZS5jb25maWcudHMiXSwKICAic291cmNlc0NvbnRlbnQiOiBbImNvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9kaXJuYW1lID0gXCJEOlxcXFxqYXZhXFxcXGRlbW9cXFxcdHVyaW5nXFxcXHZ1ZV9vbmVcIjtjb25zdCBfX3ZpdGVfaW5qZWN0ZWRfb3JpZ2luYWxfZmlsZW5hbWUgPSBcIkQ6XFxcXGphdmFcXFxcZGVtb1xcXFx0dXJpbmdcXFxcdnVlX29uZVxcXFx2aXRlLmNvbmZpZy50c1wiO2NvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9pbXBvcnRfbWV0YV91cmwgPSBcImZpbGU6Ly8vRDovamF2YS9kZW1vL3R1cmluZy92dWVfb25lL3ZpdGUuY29uZmlnLnRzXCI7aW1wb3J0IHsgZmlsZVVSTFRvUGF0aCwgVVJMIH0gZnJvbSAnbm9kZTp1cmwnXG5cbmltcG9ydCB7IGRlZmluZUNvbmZpZyB9IGZyb20gJ3ZpdGUnXG5pbXBvcnQgdnVlIGZyb20gJ0B2aXRlanMvcGx1Z2luLXZ1ZSdcbmltcG9ydCB2dWVTZXR1cEV4dGVuZCBmcm9tICd2aXRlLXBsdWdpbi12dWUtc2V0dXAtZXh0ZW5kJ1xuXG4vLyBodHRwczovL3ZpdGVqcy5kZXYvY29uZmlnL1xuZXhwb3J0IGRlZmF1bHQgZGVmaW5lQ29uZmlnKHtcbiAgcGx1Z2luczogW1xuICAgIHZ1ZSgpLFxuICAgIHZ1ZVNldHVwRXh0ZW5kKCksXG4gIF0sXG4gIHJlc29sdmU6IHtcbiAgICBhbGlhczoge1xuICAgICAgJ0AnOiBmaWxlVVJMVG9QYXRoKG5ldyBVUkwoJy4vc3JjJywgaW1wb3J0Lm1ldGEudXJsKSlcbiAgICB9XG4gIH1cbn0pXG4iXSwKICAibWFwcGluZ3MiOiAiO0FBQTZRLFNBQVMsZUFBZSxXQUFXO0FBRWhULFNBQVMsb0JBQW9CO0FBQzdCLE9BQU8sU0FBUztBQUNoQixPQUFPLG9CQUFvQjtBQUo0SSxJQUFNLDJDQUEyQztBQU94TixJQUFPLHNCQUFRLGFBQWE7QUFBQSxFQUMxQixTQUFTO0FBQUEsSUFDUCxJQUFJO0FBQUEsSUFDSixlQUFlO0FBQUEsRUFDakI7QUFBQSxFQUNBLFNBQVM7QUFBQSxJQUNQLE9BQU87QUFBQSxNQUNMLEtBQUssY0FBYyxJQUFJLElBQUksU0FBUyx3Q0FBZSxDQUFDO0FBQUEsSUFDdEQ7QUFBQSxFQUNGO0FBQ0YsQ0FBQzsiLAogICJuYW1lcyI6IFtdCn0K
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
// vite.config.ts
|
||||
import { fileURLToPath, URL } from "node:url";
|
||||
import { defineConfig } from "file:///D:/java/demo/turing/vue_one/node_modules/vite/dist/node/index.js";
|
||||
import vue from "file:///D:/java/demo/turing/vue_one/node_modules/@vitejs/plugin-vue/dist/index.mjs";
|
||||
import vueSetupExtend from "file:///D:/java/demo/turing/vue_one/node_modules/vite-plugin-vue-setup-extend/dist/index.mjs";
|
||||
var __vite_injected_original_import_meta_url = "file:///D:/java/demo/turing/vue_one/vite.config.ts";
|
||||
var vite_config_default = defineConfig({
|
||||
plugins: [
|
||||
vue(),
|
||||
vueSetupExtend()
|
||||
],
|
||||
resolve: {
|
||||
alias: {
|
||||
"@": fileURLToPath(new URL("./src", __vite_injected_original_import_meta_url))
|
||||
}
|
||||
}
|
||||
});
|
||||
export {
|
||||
vite_config_default as default
|
||||
};
|
||||
//# sourceMappingURL=data:application/json;base64,ewogICJ2ZXJzaW9uIjogMywKICAic291cmNlcyI6IFsidml0ZS5jb25maWcudHMiXSwKICAic291cmNlc0NvbnRlbnQiOiBbImNvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9kaXJuYW1lID0gXCJEOlxcXFxqYXZhXFxcXGRlbW9cXFxcdHVyaW5nXFxcXHZ1ZV9vbmVcIjtjb25zdCBfX3ZpdGVfaW5qZWN0ZWRfb3JpZ2luYWxfZmlsZW5hbWUgPSBcIkQ6XFxcXGphdmFcXFxcZGVtb1xcXFx0dXJpbmdcXFxcdnVlX29uZVxcXFx2aXRlLmNvbmZpZy50c1wiO2NvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9pbXBvcnRfbWV0YV91cmwgPSBcImZpbGU6Ly8vRDovamF2YS9kZW1vL3R1cmluZy92dWVfb25lL3ZpdGUuY29uZmlnLnRzXCI7aW1wb3J0IHsgZmlsZVVSTFRvUGF0aCwgVVJMIH0gZnJvbSAnbm9kZTp1cmwnXG5cbmltcG9ydCB7IGRlZmluZUNvbmZpZyB9IGZyb20gJ3ZpdGUnXG5pbXBvcnQgdnVlIGZyb20gJ0B2aXRlanMvcGx1Z2luLXZ1ZSdcbmltcG9ydCB2dWVTZXR1cEV4dGVuZCBmcm9tICd2aXRlLXBsdWdpbi12dWUtc2V0dXAtZXh0ZW5kJ1xuXG4vLyBodHRwczovL3ZpdGVqcy5kZXYvY29uZmlnL1xuZXhwb3J0IGRlZmF1bHQgZGVmaW5lQ29uZmlnKHtcbiAgcGx1Z2luczogW1xuICAgIHZ1ZSgpLFxuICAgIHZ1ZVNldHVwRXh0ZW5kKCksXG4gIF0sXG4gIHJlc29sdmU6IHtcbiAgICBhbGlhczoge1xuICAgICAgJ0AnOiBmaWxlVVJMVG9QYXRoKG5ldyBVUkwoJy4vc3JjJywgaW1wb3J0Lm1ldGEudXJsKSlcbiAgICB9XG4gIH1cbn0pXG4iXSwKICAibWFwcGluZ3MiOiAiO0FBQTZRLFNBQVMsZUFBZSxXQUFXO0FBRWhULFNBQVMsb0JBQW9CO0FBQzdCLE9BQU8sU0FBUztBQUNoQixPQUFPLG9CQUFvQjtBQUo0SSxJQUFNLDJDQUEyQztBQU94TixJQUFPLHNCQUFRLGFBQWE7QUFBQSxFQUMxQixTQUFTO0FBQUEsSUFDUCxJQUFJO0FBQUEsSUFDSixlQUFlO0FBQUEsRUFDakI7QUFBQSxFQUNBLFNBQVM7QUFBQSxJQUNQLE9BQU87QUFBQSxNQUNMLEtBQUssY0FBYyxJQUFJLElBQUksU0FBUyx3Q0FBZSxDQUFDO0FBQUEsSUFDdEQ7QUFBQSxFQUNGO0FBQ0YsQ0FBQzsiLAogICJuYW1lcyI6IFtdCn0K
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
// vite.config.ts
|
||||
import { fileURLToPath, URL } from "node:url";
|
||||
import { defineConfig } from "file:///D:/java/demo/turing/vue_one/node_modules/vite/dist/node/index.js";
|
||||
import vue from "file:///D:/java/demo/turing/vue_one/node_modules/@vitejs/plugin-vue/dist/index.mjs";
|
||||
import vueSetupExtend from "file:///D:/java/demo/turing/vue_one/node_modules/vite-plugin-vue-setup-extend/dist/index.mjs";
|
||||
var __vite_injected_original_import_meta_url = "file:///D:/java/demo/turing/vue_one/vite.config.ts";
|
||||
var vite_config_default = defineConfig({
|
||||
plugins: [
|
||||
vue(),
|
||||
vueSetupExtend()
|
||||
],
|
||||
resolve: {
|
||||
alias: {
|
||||
"@": fileURLToPath(new URL("./src", __vite_injected_original_import_meta_url))
|
||||
}
|
||||
},
|
||||
server: {
|
||||
host: "127.0.0.1",
|
||||
port: 5137,
|
||||
open: true
|
||||
}
|
||||
});
|
||||
export {
|
||||
vite_config_default as default
|
||||
};
|
||||
//# sourceMappingURL=data:application/json;base64,ewogICJ2ZXJzaW9uIjogMywKICAic291cmNlcyI6IFsidml0ZS5jb25maWcudHMiXSwKICAic291cmNlc0NvbnRlbnQiOiBbImNvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9kaXJuYW1lID0gXCJEOlxcXFxqYXZhXFxcXGRlbW9cXFxcdHVyaW5nXFxcXHZ1ZV9vbmVcIjtjb25zdCBfX3ZpdGVfaW5qZWN0ZWRfb3JpZ2luYWxfZmlsZW5hbWUgPSBcIkQ6XFxcXGphdmFcXFxcZGVtb1xcXFx0dXJpbmdcXFxcdnVlX29uZVxcXFx2aXRlLmNvbmZpZy50c1wiO2NvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9pbXBvcnRfbWV0YV91cmwgPSBcImZpbGU6Ly8vRDovamF2YS9kZW1vL3R1cmluZy92dWVfb25lL3ZpdGUuY29uZmlnLnRzXCI7aW1wb3J0IHsgZmlsZVVSTFRvUGF0aCwgVVJMIH0gZnJvbSAnbm9kZTp1cmwnXG5cbmltcG9ydCB7IGRlZmluZUNvbmZpZyB9IGZyb20gJ3ZpdGUnXG5pbXBvcnQgdnVlIGZyb20gJ0B2aXRlanMvcGx1Z2luLXZ1ZSdcbmltcG9ydCB2dWVTZXR1cEV4dGVuZCBmcm9tICd2aXRlLXBsdWdpbi12dWUtc2V0dXAtZXh0ZW5kJ1xuXG4vLyBodHRwczovL3ZpdGVqcy5kZXYvY29uZmlnL1xuZXhwb3J0IGRlZmF1bHQgZGVmaW5lQ29uZmlnKHtcbiAgcGx1Z2luczogW1xuICAgIHZ1ZSgpLFxuICAgIHZ1ZVNldHVwRXh0ZW5kKCksXG4gIF0sXG4gIHJlc29sdmU6IHtcbiAgICBhbGlhczoge1xuICAgICAgJ0AnOiBmaWxlVVJMVG9QYXRoKG5ldyBVUkwoJy4vc3JjJywgaW1wb3J0Lm1ldGEudXJsKSlcbiAgICB9XG4gIH0sXG4gIHNlcnZlcjp7XG4gICAgaG9zdDonMTI3LjAuMC4xJyxcbiAgICBwb3J0OjUxMzcsXG4gICAgb3Blbjp0cnVlXG4gIH1cbn0pXG4iXSwKICAibWFwcGluZ3MiOiAiO0FBQTZRLFNBQVMsZUFBZSxXQUFXO0FBRWhULFNBQVMsb0JBQW9CO0FBQzdCLE9BQU8sU0FBUztBQUNoQixPQUFPLG9CQUFvQjtBQUo0SSxJQUFNLDJDQUEyQztBQU94TixJQUFPLHNCQUFRLGFBQWE7QUFBQSxFQUMxQixTQUFTO0FBQUEsSUFDUCxJQUFJO0FBQUEsSUFDSixlQUFlO0FBQUEsRUFDakI7QUFBQSxFQUNBLFNBQVM7QUFBQSxJQUNQLE9BQU87QUFBQSxNQUNMLEtBQUssY0FBYyxJQUFJLElBQUksU0FBUyx3Q0FBZSxDQUFDO0FBQUEsSUFDdEQ7QUFBQSxFQUNGO0FBQUEsRUFDQSxRQUFPO0FBQUEsSUFDTCxNQUFLO0FBQUEsSUFDTCxNQUFLO0FBQUEsSUFDTCxNQUFLO0FBQUEsRUFDUDtBQUNGLENBQUM7IiwKICAibmFtZXMiOiBbXQp9Cg==
|
||||
Loading…
Reference in New Issue