添加 HazardInspectUI 完整文件夹
This commit is contained in:
commit
aadf4cb438
|
|
@ -0,0 +1,13 @@
|
||||||
|
.vite-ssg-temp
|
||||||
|
|
||||||
|
node_modules
|
||||||
|
.DS_Store
|
||||||
|
dist
|
||||||
|
dist-ssr
|
||||||
|
*.local
|
||||||
|
|
||||||
|
# lock
|
||||||
|
yarn.lock
|
||||||
|
package-lock.json
|
||||||
|
|
||||||
|
*.log
|
||||||
|
|
@ -0,0 +1,10 @@
|
||||||
|
# 默认忽略的文件
|
||||||
|
/shelf/
|
||||||
|
/workspace.xml
|
||||||
|
# 已忽略包含查询文件的默认文件夹
|
||||||
|
/queries/
|
||||||
|
# Datasource local storage ignored files
|
||||||
|
/dataSources/
|
||||||
|
/dataSources.local.xml
|
||||||
|
# 基于编辑器的 HTTP 客户端请求
|
||||||
|
/httpRequests/
|
||||||
|
|
@ -0,0 +1,10 @@
|
||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<module type="PYTHON_MODULE" version="4">
|
||||||
|
<component name="NewModuleRootManager">
|
||||||
|
<content url="file://$MODULE_DIR$">
|
||||||
|
<sourceFolder url="file://$MODULE_DIR$/src" isTestSource="false" />
|
||||||
|
</content>
|
||||||
|
<orderEntry type="jdk" jdkName="audio" jdkType="Python SDK" />
|
||||||
|
<orderEntry type="sourceFolder" forTests="false" />
|
||||||
|
</component>
|
||||||
|
</module>
|
||||||
|
|
@ -0,0 +1,12 @@
|
||||||
|
<component name="InspectionProjectProfileManager">
|
||||||
|
<profile version="1.0">
|
||||||
|
<option name="myName" value="Project Default" />
|
||||||
|
<inspection_tool class="PyStubPackagesAdvertiser" enabled="true" level="WARNING" enabled_by_default="true">
|
||||||
|
<option name="ignoredPackages">
|
||||||
|
<list>
|
||||||
|
<option value="pandas" />
|
||||||
|
</list>
|
||||||
|
</option>
|
||||||
|
</inspection_tool>
|
||||||
|
</profile>
|
||||||
|
</component>
|
||||||
|
|
@ -0,0 +1,6 @@
|
||||||
|
<component name="InspectionProjectProfileManager">
|
||||||
|
<settings>
|
||||||
|
<option name="USE_PROJECT_PROFILE" value="false" />
|
||||||
|
<version value="1.0" />
|
||||||
|
</settings>
|
||||||
|
</component>
|
||||||
|
|
@ -0,0 +1,7 @@
|
||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<project version="4">
|
||||||
|
<component name="Black">
|
||||||
|
<option name="sdkName" value="YOLO" />
|
||||||
|
</component>
|
||||||
|
<component name="ProjectRootManager" version="2" project-jdk-name="audio" project-jdk-type="Python SDK" />
|
||||||
|
</project>
|
||||||
|
|
@ -0,0 +1,8 @@
|
||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<project version="4">
|
||||||
|
<component name="ProjectModuleManager">
|
||||||
|
<modules>
|
||||||
|
<module fileurl="file://$PROJECT_DIR$/.idea/HazardInspectUI.iml" filepath="$PROJECT_DIR$/.idea/HazardInspectUI.iml" />
|
||||||
|
</modules>
|
||||||
|
</component>
|
||||||
|
</project>
|
||||||
|
|
@ -0,0 +1,6 @@
|
||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<project version="4">
|
||||||
|
<component name="VcsDirectoryMappings">
|
||||||
|
<mapping directory="" vcs="Git" />
|
||||||
|
</component>
|
||||||
|
</project>
|
||||||
|
|
@ -0,0 +1,2 @@
|
||||||
|
shamefully-hoist=true
|
||||||
|
strict-peer-dependencies=false
|
||||||
|
|
@ -0,0 +1,3 @@
|
||||||
|
{
|
||||||
|
"recommendations": ["Vue.volar"]
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,36 @@
|
||||||
|
{
|
||||||
|
// Disable the default formatter, use eslint instead
|
||||||
|
"prettier.enable": false,
|
||||||
|
"editor.formatOnSave": false,
|
||||||
|
|
||||||
|
// Auto fix
|
||||||
|
"editor.codeActionsOnSave": {
|
||||||
|
"source.fixAll.eslint": "explicit",
|
||||||
|
"source.organizeImports": "never"
|
||||||
|
},
|
||||||
|
|
||||||
|
// Enable eslint for all supported languages
|
||||||
|
"eslint.validate": [
|
||||||
|
"javascript",
|
||||||
|
"javascriptreact",
|
||||||
|
"typescript",
|
||||||
|
"typescriptreact",
|
||||||
|
"vue",
|
||||||
|
"html",
|
||||||
|
"markdown",
|
||||||
|
"json",
|
||||||
|
"json5",
|
||||||
|
"jsonc",
|
||||||
|
"yaml",
|
||||||
|
"toml",
|
||||||
|
"xml",
|
||||||
|
"gql",
|
||||||
|
"graphql",
|
||||||
|
"astro",
|
||||||
|
"css",
|
||||||
|
"less",
|
||||||
|
"scss",
|
||||||
|
"pcss",
|
||||||
|
"postcss"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,47 @@
|
||||||
|
# element-plus-vite-starter
|
||||||
|
|
||||||
|
> A starter kit for Element Plus with Vite
|
||||||
|
|
||||||
|
- Preview: <https://vite-starter.element-plus.org>
|
||||||
|
|
||||||
|
This is an example of on-demand element-plus with [unplugin-vue-components](https://github.com/antfu/unplugin-vue-components).
|
||||||
|
|
||||||
|
> If you want to import all, it may be so simple that no examples are needed. Just follow [quickstart | Docs](https://element-plus.org/zh-CN/guide/quickstart.html) and import them.
|
||||||
|
|
||||||
|
If you just want an on-demand import example `manually`, you can check [unplugin-element-plus/examples/vite](https://github.com/element-plus/unplugin-element-plus/tree/main/examples/vite).
|
||||||
|
|
||||||
|
If you want to a nuxt starter, see [element-plus-nuxt-starter](https://github.com/element-plus/element-plus-nuxt-starter/).
|
||||||
|
|
||||||
|
## Project setup
|
||||||
|
|
||||||
|
```bash
|
||||||
|
pnpm install
|
||||||
|
|
||||||
|
# npm install
|
||||||
|
# yarn install
|
||||||
|
```
|
||||||
|
|
||||||
|
### Compiles and hot-reloads for development
|
||||||
|
|
||||||
|
```bash
|
||||||
|
npm run dev
|
||||||
|
```
|
||||||
|
|
||||||
|
### Compiles and minifies for production
|
||||||
|
|
||||||
|
```bash
|
||||||
|
npm run build
|
||||||
|
```
|
||||||
|
|
||||||
|
## Usage
|
||||||
|
|
||||||
|
```bash
|
||||||
|
git clone https://github.com/element-plus/element-plus-vite-starter
|
||||||
|
cd element-plus-vite-starter
|
||||||
|
npm i
|
||||||
|
npm run dev
|
||||||
|
```
|
||||||
|
|
||||||
|
### Custom theme
|
||||||
|
|
||||||
|
See `src/styles/element/index.scss`.
|
||||||
|
|
@ -0,0 +1,7 @@
|
||||||
|
import antfu from '@antfu/eslint-config'
|
||||||
|
|
||||||
|
export default antfu({
|
||||||
|
formatters: true,
|
||||||
|
unocss: true,
|
||||||
|
vue: true,
|
||||||
|
})
|
||||||
|
|
@ -0,0 +1,18 @@
|
||||||
|
<!doctype html>
|
||||||
|
<html lang="zh-CN">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<link rel="icon" href="/favicon.svg" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>Element Plus Vite Starter</title>
|
||||||
|
<!-- element css cdn, if you use custom theme, remove it. -->
|
||||||
|
<!-- <link
|
||||||
|
rel="stylesheet"
|
||||||
|
href="https://cdn.jsdelivr.net/npm/element-plus/dist/index.css"
|
||||||
|
/> -->
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="app"></div>
|
||||||
|
<script type="module" src="/src/main.ts"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,46 @@
|
||||||
|
{
|
||||||
|
"name": "element-plus-vite-starter",
|
||||||
|
"type": "module",
|
||||||
|
"version": "0.1.0",
|
||||||
|
"private": true,
|
||||||
|
"packageManager": "pnpm@10.14.0",
|
||||||
|
"license": "MIT",
|
||||||
|
"homepage": "https://vite-starter.element-plus.org",
|
||||||
|
"repository": {
|
||||||
|
"url": "https://github.com/element-plus/element-plus-vite-starter"
|
||||||
|
},
|
||||||
|
"scripts": {
|
||||||
|
"dev": "vite",
|
||||||
|
"build": "vite build",
|
||||||
|
"generate": "vite-ssg build",
|
||||||
|
"lint": "eslint .",
|
||||||
|
"preview": "vite preview",
|
||||||
|
"typecheck": "vue-tsc --noEmit"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"@element-plus/icons-vue": "^2.3.1",
|
||||||
|
"@gradio/client": "^2.2.0",
|
||||||
|
"@vueuse/core": "^13.6.0",
|
||||||
|
"element-plus": "^2.10.5",
|
||||||
|
"vue": "^3.5.18",
|
||||||
|
"vue-router": "^4.5.1"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@antfu/eslint-config": "^5.1.0",
|
||||||
|
"@iconify-json/ep": "^1.2.2",
|
||||||
|
"@iconify-json/ri": "^1.2.5",
|
||||||
|
"@types/node": "^24.1.0",
|
||||||
|
"@unocss/eslint-plugin": "^66.4.0",
|
||||||
|
"@vitejs/plugin-vue": "^6.0.1",
|
||||||
|
"eslint": "^9.32.0",
|
||||||
|
"eslint-plugin-format": "^1.0.1",
|
||||||
|
"sass": "^1.89.2",
|
||||||
|
"typescript": "^5.9.2",
|
||||||
|
"unocss": "^66.4.0",
|
||||||
|
"unplugin-vue-components": "^28.8.0",
|
||||||
|
"unplugin-vue-router": "^0.14.0",
|
||||||
|
"vite": "^7.0.6",
|
||||||
|
"vite-ssg": "^28.0.0",
|
||||||
|
"vue-tsc": "^3.0.5"
|
||||||
|
}
|
||||||
|
}
|
||||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1 @@
|
||||||
|
vite-starter.element-plus.org
|
||||||
|
|
@ -0,0 +1,2 @@
|
||||||
|
拍一下,
|
||||||
|
现场整改,
|
||||||
|
|
|
@ -0,0 +1 @@
|
||||||
|
<svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 44 44"><defs><style>.cls-1{fill:#409eff;fill-rule:evenodd;}</style></defs><title>element plus-logo-small 副本</title><path id="element_plus-logo-small" data-name="element plus-logo-small" class="cls-1" d="M37.41,32.37c0,1.57-.83,1.93-.83,1.93L21.51,43A1.69,1.69,0,0,1,20,43S5.2,34.4,4.66,34a1.29,1.29,0,0,1-.55-1V15.24c0-.78,1-1.33,1-1.33L19.86,5.36a2,2,0,0,1,1.79,0l14.46,8.41a2.06,2.06,0,0,1,1.25,2.06V32.37Zm-5.9-17L21.35,9.5a1.59,1.59,0,0,0-1.41,0L8.33,16.15s-.77.46-.76,1.08,0,13.92,0,13.92A1,1,0,0,0,8,31.9c.43.3,12,7,12,7a1.31,1.31,0,0,0,1.19,0C21.91,38.5,33,32.11,33,32.11s.65-.28.65-1.51V27.13l-13,7.9V32a3.05,3.05,0,0,1,1-2.07L33.2,23a2.44,2.44,0,0,0,.55-1.46V18.43L20.64,26.35v-3.2a2.22,2.22,0,0,1,.83-1.79ZM41.07,4.22a.39.39,0,0,0-.37-.42H38V1.06c0-.16-.26-.22-.53-.22L36,1.08c-.18,0-.31.12-.31.23V3.8H33a.4.4,0,0,0-.36.37v2h3V9c0,.16.26.27.54.23l1.51-.25c.18,0,.29-.13.29-.23V6.14h3Z"/></svg>
|
||||||
|
After Width: | Height: | Size: 995 B |
|
|
@ -0,0 +1 @@
|
||||||
|
<svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 44 44"><defs><style>.cls-1{fill:#409eff;fill-rule:evenodd;}</style></defs><title>element plus-logo-small 副本</title><path id="element_plus-logo-small" data-name="element plus-logo-small" class="cls-1" d="M37.41,32.37c0,1.57-.83,1.93-.83,1.93L21.51,43A1.69,1.69,0,0,1,20,43S5.2,34.4,4.66,34a1.29,1.29,0,0,1-.55-1V15.24c0-.78,1-1.33,1-1.33L19.86,5.36a2,2,0,0,1,1.79,0l14.46,8.41a2.06,2.06,0,0,1,1.25,2.06V32.37Zm-5.9-17L21.35,9.5a1.59,1.59,0,0,0-1.41,0L8.33,16.15s-.77.46-.76,1.08,0,13.92,0,13.92A1,1,0,0,0,8,31.9c.43.3,12,7,12,7a1.31,1.31,0,0,0,1.19,0C21.91,38.5,33,32.11,33,32.11s.65-.28.65-1.51V27.13l-13,7.9V32a3.05,3.05,0,0,1,1-2.07L33.2,23a2.44,2.44,0,0,0,.55-1.46V18.43L20.64,26.35v-3.2a2.22,2.22,0,0,1,.83-1.79ZM41.07,4.22a.39.39,0,0,0-.37-.42H38V1.06c0-.16-.26-.22-.53-.22L36,1.08c-.18,0-.31.12-.31.23V3.8H33a.4.4,0,0,0-.36.37v2h3V9c0,.16.26.27.54.23l1.51-.25c.18,0,.29-.13.29-.23V6.14h3Z"/></svg>
|
||||||
|
After Width: | Height: | Size: 995 B |
|
|
@ -0,0 +1 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
|
||||||
|
After Width: | Height: | Size: 1.5 KiB |
|
|
@ -0,0 +1,25 @@
|
||||||
|
<script setup lang="ts">
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<el-config-provider namespace="ep">
|
||||||
|
<BaseHeader />
|
||||||
|
<div class="main-container flex">
|
||||||
|
<!-- <BaseSide /> -->
|
||||||
|
<div w="full" py="0">
|
||||||
|
<RouterView />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</el-config-provider>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
#app {
|
||||||
|
text-align: center;
|
||||||
|
color: var(--ep-text-color-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.main-container {
|
||||||
|
height: calc(100vh - var(--ep-menu-item-height) - 4px);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>
|
||||||
|
After Width: | Height: | Size: 497 B |
|
|
@ -0,0 +1,50 @@
|
||||||
|
/* eslint-disable */
|
||||||
|
// @ts-nocheck
|
||||||
|
// Generated by unplugin-vue-components
|
||||||
|
// Read more: https://github.com/vuejs/core/pull/3399
|
||||||
|
// biome-ignore lint: disable
|
||||||
|
export {}
|
||||||
|
|
||||||
|
/* prettier-ignore */
|
||||||
|
declare module 'vue' {
|
||||||
|
export interface GlobalComponents {
|
||||||
|
BaseHeader: typeof import('./components/layouts/BaseHeader.vue')['default']
|
||||||
|
BaseSide: typeof import('./components/layouts/BaseSide.vue')['default']
|
||||||
|
BaseSide_bak: typeof import('./components/layouts/BaseSide_bak.vue')['default']
|
||||||
|
ElAside: typeof import('element-plus/es')['ElAside']
|
||||||
|
ElBreadcrumb: typeof import('element-plus/es')['ElBreadcrumb']
|
||||||
|
ElBreadcrumbItem: typeof import('element-plus/es')['ElBreadcrumbItem']
|
||||||
|
ElButton: typeof import('element-plus/es')['ElButton']
|
||||||
|
ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
|
||||||
|
ElCheckboxGroup: typeof import('element-plus/es')['ElCheckboxGroup']
|
||||||
|
ElCol: typeof import('element-plus/es')['ElCol']
|
||||||
|
ElConfigProvider: typeof import('element-plus/es')['ElConfigProvider']
|
||||||
|
ElContainer: typeof import('element-plus/es')['ElContainer']
|
||||||
|
ElEmpty: typeof import('element-plus/es')['ElEmpty']
|
||||||
|
ElFooter: typeof import('element-plus/es')['ElFooter']
|
||||||
|
ElForm: typeof import('element-plus/es')['ElForm']
|
||||||
|
ElFormItem: typeof import('element-plus/es')['ElFormItem']
|
||||||
|
ElHeader: typeof import('element-plus/es')['ElHeader']
|
||||||
|
ElIcon: typeof import('element-plus/es')['ElIcon']
|
||||||
|
ElMain: typeof import('element-plus/es')['ElMain']
|
||||||
|
ElMenu: typeof import('element-plus/es')['ElMenu']
|
||||||
|
ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
|
||||||
|
ElOption: typeof import('element-plus/es')['ElOption']
|
||||||
|
ElProgress: typeof import('element-plus/es')['ElProgress']
|
||||||
|
ElRow: typeof import('element-plus/es')['ElRow']
|
||||||
|
ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
|
||||||
|
ElSelect: typeof import('element-plus/es')['ElSelect']
|
||||||
|
ElSkeleton: typeof import('element-plus/es')['ElSkeleton']
|
||||||
|
ElTag: typeof import('element-plus/es')['ElTag']
|
||||||
|
ElText: typeof import('element-plus/es')['ElText']
|
||||||
|
ElTooltip: typeof import('element-plus/es')['ElTooltip']
|
||||||
|
HelloWorld: typeof import('./components/HelloWorld.vue')['default']
|
||||||
|
ItemList: typeof import('./components/hazard_inspect/ItemList.vue')['default']
|
||||||
|
Logos: typeof import('./components/Logos.vue')['default']
|
||||||
|
MessageBoxDemo: typeof import('./components/MessageBoxDemo.vue')['default']
|
||||||
|
RouterLink: typeof import('vue-router')['RouterLink']
|
||||||
|
RouterView: typeof import('vue-router')['RouterView']
|
||||||
|
SubtitleList: typeof import('./components/hazard_inspect/SubtitleList.vue')['default']
|
||||||
|
Timeline: typeof import('./components/hazard_inspect/timeline/timeline.vue')['default']
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,127 @@
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ElMessage } from 'element-plus'
|
||||||
|
import { ref } from 'vue'
|
||||||
|
|
||||||
|
defineProps<{ msg: string }>()
|
||||||
|
|
||||||
|
const count = ref(0)
|
||||||
|
const input = ref('element-plus')
|
||||||
|
|
||||||
|
const curDate = ref('')
|
||||||
|
|
||||||
|
function toast() {
|
||||||
|
ElMessage.success('Hello')
|
||||||
|
}
|
||||||
|
|
||||||
|
const value1 = ref(true)
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<h1 color="$ep-color-primary">
|
||||||
|
{{ msg }}
|
||||||
|
</h1>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
See
|
||||||
|
<a href="https://element-plus.org" target="_blank">element-plus</a> for more
|
||||||
|
information.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<!-- example components -->
|
||||||
|
<div class="mb-4">
|
||||||
|
<el-button size="large" @click="toast">
|
||||||
|
El Message
|
||||||
|
</el-button>
|
||||||
|
|
||||||
|
<MessageBoxDemo />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="my-2 flex flex-wrap items-center justify-center text-center">
|
||||||
|
<el-button @click="count++">
|
||||||
|
count is: {{ count }}
|
||||||
|
</el-button>
|
||||||
|
<el-button type="primary" @click="count++">
|
||||||
|
count is: {{ count }}
|
||||||
|
</el-button>
|
||||||
|
<el-button type="success" @click="count++">
|
||||||
|
count is: {{ count }}
|
||||||
|
</el-button>
|
||||||
|
<el-button type="warning" @click="count++">
|
||||||
|
count is: {{ count }}
|
||||||
|
</el-button>
|
||||||
|
<el-button type="danger" @click="count++">
|
||||||
|
count is: {{ count }}
|
||||||
|
</el-button>
|
||||||
|
<el-button type="info" @click="count++">
|
||||||
|
count is: {{ count }}
|
||||||
|
</el-button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<el-tag type="success" class="m-1">
|
||||||
|
Tag 1
|
||||||
|
</el-tag>
|
||||||
|
<el-tag type="warning" class="m-1">
|
||||||
|
Tag 1
|
||||||
|
</el-tag>
|
||||||
|
<el-tag type="danger" class="m-1">
|
||||||
|
Tag 1
|
||||||
|
</el-tag>
|
||||||
|
<el-tag type="info" class="m-1">
|
||||||
|
Tag 1
|
||||||
|
</el-tag>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<el-switch v-model="value1" />
|
||||||
|
<el-switch
|
||||||
|
v-model="value1"
|
||||||
|
class="m-2"
|
||||||
|
style="--ep-switch-on-color: black; --ep-switch-off-color: gray;"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="my-2">
|
||||||
|
<el-input v-model="input" class="m-2" style="width: 200px" />
|
||||||
|
<el-date-picker
|
||||||
|
v-model="curDate"
|
||||||
|
class="m-2"
|
||||||
|
type="date"
|
||||||
|
placeholder="Pick a day"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p>For example, we can custom primary color to 'green'.</p>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
Edit
|
||||||
|
<code>components/HelloWorld.vue</code> to test components.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Edit
|
||||||
|
<code>styles/element/var.scss</code> to test scss variables.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
Full Example:
|
||||||
|
<a
|
||||||
|
href="https://github.com/element-plus/element-plus-vite-starter"
|
||||||
|
target="_blank"
|
||||||
|
>element-plus-vite-starter</a>
|
||||||
|
| On demand Example:
|
||||||
|
<a
|
||||||
|
href="https://github.com/element-plus/unplugin-element-plus"
|
||||||
|
target="_blank"
|
||||||
|
>unplugin-element-plus/examples/vite</a>
|
||||||
|
</p>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.ep-button {
|
||||||
|
margin: 4px;
|
||||||
|
}
|
||||||
|
.ep-button + .ep-button {
|
||||||
|
margin-left: 0;
|
||||||
|
margin: 4px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,31 @@
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<a href="https://vitejs.dev" target="_blank">
|
||||||
|
<img src="/vite.svg" class="logo" alt="Vite logo">
|
||||||
|
</a>
|
||||||
|
<a href="https://vuejs.org/" target="_blank">
|
||||||
|
<img src="../assets/vue.svg" class="logo vue" alt="Vue logo">
|
||||||
|
</a>
|
||||||
|
<a href="https://element-plus.org/" target="_blank">
|
||||||
|
<img src="/element-plus-logo-small.svg" class="logo element-plus" alt="Element Plus logo">
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.logo {
|
||||||
|
height: 6em;
|
||||||
|
padding: 1.5em;
|
||||||
|
will-change: filter;
|
||||||
|
transition: filter 300ms;
|
||||||
|
}
|
||||||
|
.logo:hover {
|
||||||
|
filter: drop-shadow(0 0 2em #646cffaa);
|
||||||
|
}
|
||||||
|
.logo.vue:hover {
|
||||||
|
filter: drop-shadow(0 0 2em #42b883aa);
|
||||||
|
}
|
||||||
|
.logo.element-plus:hover {
|
||||||
|
filter: drop-shadow(0 0 2em #409effaa);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,24 @@
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import type { Action } from 'element-plus'
|
||||||
|
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||||
|
|
||||||
|
function open() {
|
||||||
|
ElMessageBox.alert('This is a message', 'Title', {
|
||||||
|
// if you want to disable its autofocus
|
||||||
|
// autofocus: false,
|
||||||
|
confirmButtonText: 'OK',
|
||||||
|
callback: (action: Action) => {
|
||||||
|
ElMessage({
|
||||||
|
type: 'info',
|
||||||
|
message: `action: ${action}`,
|
||||||
|
})
|
||||||
|
},
|
||||||
|
})
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<el-button plain @click="open">
|
||||||
|
Click to open the Message Box
|
||||||
|
</el-button>
|
||||||
|
</template>
|
||||||
|
|
@ -0,0 +1,100 @@
|
||||||
|
<script setup lang="ts">
|
||||||
|
/**
|
||||||
|
* 项目列表展示组件
|
||||||
|
* 接收两个参数：title（字符串）和data（字符串数组）
|
||||||
|
*/
|
||||||
|
const props = defineProps({
|
||||||
|
title: {
|
||||||
|
type: String,
|
||||||
|
default: '项目列表',
|
||||||
|
},
|
||||||
|
data: {
|
||||||
|
type: Array,
|
||||||
|
default: () => [],
|
||||||
|
},
|
||||||
|
})
|
||||||
|
|
||||||
|
// 定义输出事件
|
||||||
|
const emit = defineEmits(['click'])
|
||||||
|
|
||||||
|
// 点击项，向外抛出数据
|
||||||
|
function handleItemClick(index: number) {
|
||||||
|
emit('click', index)
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="hazard-list-container">
|
||||||
|
<!-- 标题栏 -->
|
||||||
|
<el-row class="px-3 pb-1 pt-3">
|
||||||
|
<el-text type="info" size="small">
|
||||||
|
{{ props.title }} (共 {{ props.data.length }} 项)
|
||||||
|
</el-text>
|
||||||
|
</el-row>
|
||||||
|
|
||||||
|
<!-- 滚动列表区域 -->
|
||||||
|
<el-row style="flex: 1; overflow-y: auto;">
|
||||||
|
<el-col>
|
||||||
|
<el-row v-for="(item, index) in props.data" :key="index">
|
||||||
|
<!-- 无物体类型标签 隐患等级体颜色显示在编号标签上 -->
|
||||||
|
<!-- 0为隐患等级 1为隐患描述 -->
|
||||||
|
<el-button class="item-btn" text @click="handleItemClick(index)">
|
||||||
|
<el-tag v-if="(item as number[])[0] === 0" type="primary" size="small">
|
||||||
|
{{ index + 1 }}
|
||||||
|
</el-tag>
|
||||||
|
<el-tag v-else-if="(item as number[])[0] === 1" type="danger" size="small">
|
||||||
|
{{ index + 1 }}
|
||||||
|
</el-tag>
|
||||||
|
<div class="w-2" />
|
||||||
|
<el-text class="item-text">
|
||||||
|
{{ (item as number[])[1] }}
|
||||||
|
</el-text>
|
||||||
|
</el-button>
|
||||||
|
|
||||||
|
<!-- 有物体类型标签 隐患等级体颜色显示在物体类型标签上 -->
|
||||||
|
<!-- 0为隐患等级 1为物体类型 2为隐患描述 -->
|
||||||
|
<!-- <el-button class="item-btn" text @click="handleItemClick(item as string, index)">
|
||||||
|
<el-text type="info" size="small">
|
||||||
|
{{ index + 1 }}
|
||||||
|
</el-text>
|
||||||
|
<div class="w-2" />
|
||||||
|
<el-tag v-if="(item as number[])[0] === 0" type="primary" size="small">
|
||||||
|
{{ (item as number[])[1] }}
|
||||||
|
</el-tag>
|
||||||
|
<el-tag v-else-if="(item as number[])[0] === 1" type="danger" size="small">
|
||||||
|
{{ (item as number[])[1] }}
|
||||||
|
</el-tag>
|
||||||
|
<div class="w-2" />
|
||||||
|
<el-text class="item-text">
|
||||||
|
{{ (item as number[])[2] }}
|
||||||
|
</el-text>
|
||||||
|
</el-button> -->
|
||||||
|
</el-row>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.hazard-list-container {
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item-btn {
|
||||||
|
width: 100%;
|
||||||
|
padding: 4px 0.75rem;
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-start;
|
||||||
|
align-items: flex-start;
|
||||||
|
height: auto;
|
||||||
|
min-height: 28px;
|
||||||
|
line-height: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item-text {
|
||||||
|
word-break: break-word;
|
||||||
|
white-space: normal;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,239 @@
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { CaretRight, Location } from '@element-plus/icons-vue'
|
||||||
|
import { computed, ref, shallowRef, watch } from 'vue'
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
title: {
|
||||||
|
type: String,
|
||||||
|
default: '对话列表',
|
||||||
|
},
|
||||||
|
data: {
|
||||||
|
type: Array,
|
||||||
|
default: () => [],
|
||||||
|
},
|
||||||
|
currentTime: {
|
||||||
|
type: Number,
|
||||||
|
default: 0,
|
||||||
|
},
|
||||||
|
keywords: {
|
||||||
|
type: Array,
|
||||||
|
default: () => [],
|
||||||
|
},
|
||||||
|
})
|
||||||
|
|
||||||
|
const emit = defineEmits(['click', 'play'])
|
||||||
|
|
||||||
|
function handleItemClick(item: any[], index: number) {
|
||||||
|
emit('click', item, index)
|
||||||
|
}
|
||||||
|
|
||||||
|
function handlePlayClick(e: Event, item: any[], index: number) {
|
||||||
|
e.stopPropagation()
|
||||||
|
emit('play', item, index)
|
||||||
|
}
|
||||||
|
|
||||||
|
const keywordList = computed(() => props.keywords as string[])
|
||||||
|
|
||||||
|
function highlightText(text: string): string {
|
||||||
|
const kws = keywordList.value
|
||||||
|
if (!kws.length || !text)
|
||||||
|
return text
|
||||||
|
let result = text
|
||||||
|
for (const kw of kws) {
|
||||||
|
if (!kw)
|
||||||
|
continue
|
||||||
|
const regex = new RegExp(`(${kw})`, 'gi')
|
||||||
|
result = result.replace(regex, '<span class="keyword-highlight">$1</span>')
|
||||||
|
}
|
||||||
|
return result
|
||||||
|
}
|
||||||
|
|
||||||
|
const dataCache = shallowRef<[number, string, string, string][]>([])
|
||||||
|
const indexMap = ref(new Map<number, number[]>())
|
||||||
|
const sortedTimes = ref<number[]>([])
|
||||||
|
|
||||||
|
watch(() => props.data, (newData) => {
|
||||||
|
const arr = newData as [number, string, string, string][]
|
||||||
|
dataCache.value = arr
|
||||||
|
const map = new Map<number, number[]>()
|
||||||
|
const times: number[] = []
|
||||||
|
|
||||||
|
for (let i = 0; i < arr.length; i++) {
|
||||||
|
const t = (arr[i][0] * 10) | 0
|
||||||
|
if (!map.has(t)) {
|
||||||
|
map.set(t, [])
|
||||||
|
times.push(t)
|
||||||
|
}
|
||||||
|
map.get(t)!.push(i)
|
||||||
|
}
|
||||||
|
times.sort((a, b) => a - b)
|
||||||
|
indexMap.value = map
|
||||||
|
sortedTimes.value = times
|
||||||
|
}, { immediate: true })
|
||||||
|
|
||||||
|
const currentHighlight = ref(-1)
|
||||||
|
const keywordItemSet = ref(new Set<number>())
|
||||||
|
|
||||||
|
watch(keywordList, () => {
|
||||||
|
const arr = dataCache.value
|
||||||
|
const kws = keywordList.value
|
||||||
|
keywordItemSet.value = new Set<number>()
|
||||||
|
|
||||||
|
if (!kws.length || !arr.length)
|
||||||
|
return
|
||||||
|
|
||||||
|
for (let i = 0; i < arr.length; i++) {
|
||||||
|
if (arr[i][3]) {
|
||||||
|
for (const kw of kws) {
|
||||||
|
if (!kw)
|
||||||
|
continue
|
||||||
|
const regex = new RegExp(kw, 'i')
|
||||||
|
if (regex.test(arr[i][3])) {
|
||||||
|
keywordItemSet.value.add(i)
|
||||||
|
break
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}, { immediate: true })
|
||||||
|
|
||||||
|
watch(() => props.currentTime, (t) => {
|
||||||
|
const time = (t * 10) | 0
|
||||||
|
const indices = indexMap.value.get(time)
|
||||||
|
if (indices && indices.length > 0) {
|
||||||
|
currentHighlight.value = indices[0]
|
||||||
|
return
|
||||||
|
}
|
||||||
|
const times = sortedTimes.value
|
||||||
|
let prev = times[times.length - 1] || 0
|
||||||
|
for (let i = 0; i < times.length; i++) {
|
||||||
|
if (times[i] > time) {
|
||||||
|
prev = times[i - 1] ?? prev
|
||||||
|
break
|
||||||
|
}
|
||||||
|
}
|
||||||
|
const prevIndices = indexMap.value.get(prev)
|
||||||
|
currentHighlight.value = prevIndices?.[0] ?? 0
|
||||||
|
}, { immediate: true })
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="hazard-list-container">
|
||||||
|
<!-- 标题栏 -->
|
||||||
|
<el-row class="p-3">
|
||||||
|
<!-- <el-text tag="b"> -->
|
||||||
|
<el-text type="info" size="small">
|
||||||
|
{{ props.title }} (共 {{ props.data.length }} 条)
|
||||||
|
</el-text>
|
||||||
|
</el-row>
|
||||||
|
|
||||||
|
<!-- 滚动列表区域 -->
|
||||||
|
<el-row style="flex: 1; overflow-y: auto;">
|
||||||
|
<el-col>
|
||||||
|
<el-row v-for="(item, index) in props.data" :key="index" class="message-item" :class="{ 'highlighted': currentHighlight === index, 'keyword-highlighted': keywordItemSet.has(index) }">
|
||||||
|
<div class="message-content" @click="handleItemClick(item as any[], index)">
|
||||||
|
<div class="flex flex-col items-start">
|
||||||
|
<div class="flex flex-row gap-2">
|
||||||
|
<el-text class="item-text info-text" type="info" size="small">
|
||||||
|
{{ (item as any[])[1] }}
|
||||||
|
</el-text>
|
||||||
|
<el-text class="item-text info-text" type="info" size="small">
|
||||||
|
{{ (item as any[])[2] }}
|
||||||
|
</el-text>
|
||||||
|
</div>
|
||||||
|
<div class="item-text">
|
||||||
|
<el-text>
|
||||||
|
<template #default>
|
||||||
|
<span v-html="highlightText((item as any[])[3])" />
|
||||||
|
</template>
|
||||||
|
</el-text>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="hover-actions">
|
||||||
|
<el-tooltip content="定位" placement="top" effect="light">
|
||||||
|
<el-button
|
||||||
|
type="default"
|
||||||
|
size="small"
|
||||||
|
circle
|
||||||
|
@click="handleItemClick(item as any[], index)"
|
||||||
|
>
|
||||||
|
<el-icon><Location /></el-icon>
|
||||||
|
</el-button>
|
||||||
|
</el-tooltip>
|
||||||
|
<el-tooltip content="播放" placement="top" effect="light">
|
||||||
|
<el-button
|
||||||
|
type="default"
|
||||||
|
size="small"
|
||||||
|
circle
|
||||||
|
@click="handlePlayClick($event, item as any[], index)"
|
||||||
|
>
|
||||||
|
<el-icon><CaretRight /></el-icon>
|
||||||
|
</el-button>
|
||||||
|
</el-tooltip>
|
||||||
|
</div>
|
||||||
|
</el-row>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.hazard-list-container {
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.message-item {
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-start;
|
||||||
|
padding: 4px 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.message-item:hover {
|
||||||
|
background-color: var(--ep-bg-color-page);
|
||||||
|
}
|
||||||
|
|
||||||
|
.message-item.highlighted {
|
||||||
|
background-color: var(--ep-color-primary-light-8) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.message-item.keyword-highlighted {
|
||||||
|
background-color: var(--ep-color-danger-light-9);
|
||||||
|
}
|
||||||
|
|
||||||
|
.message-content {
|
||||||
|
flex: 1;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hover-actions {
|
||||||
|
position: absolute;
|
||||||
|
right: 8px;
|
||||||
|
top: 50%;
|
||||||
|
height: 100%;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
display: none;
|
||||||
|
padding: 4px 8px;
|
||||||
|
/* background: linear-gradient(to right, rgba(144, 147, 153, 0), var(--ep-color-info)); */
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.message-item:hover .hover-actions {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.keyword-highlight) {
|
||||||
|
color: #f56c6c;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item-text {
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-text {
|
||||||
|
color: var(--ep-color-info-light-3) !important;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,229 @@
|
||||||
|
.timeline-wrapper {
|
||||||
|
height: 33.333%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
font-family: 'Inter', sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
.timeline-toolbar {
|
||||||
|
height: 32px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
border-bottom: 1px solid var(--ep-border-color-light);
|
||||||
|
padding: 0 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.timeline-title-container {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 4px;
|
||||||
|
color: var(--ep-text-color-secondary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.timeline-title {
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.timeline-zoom-controls {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
width: 170px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.timeline-zoom-label {
|
||||||
|
font-size: 12px;
|
||||||
|
color: var(--ep-text-color-secondary);
|
||||||
|
margin-right: 8px;
|
||||||
|
width: 28px;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.zoom-slider {
|
||||||
|
flex: 1;
|
||||||
|
height: 24px;
|
||||||
|
width: 100px;
|
||||||
|
padding: 0 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.timeline-container {
|
||||||
|
flex: 1;
|
||||||
|
overflow-x: auto;
|
||||||
|
overflow-y: hidden;
|
||||||
|
position: relative;
|
||||||
|
background-color: var(--ep-bg-color);
|
||||||
|
cursor: grab;
|
||||||
|
}
|
||||||
|
|
||||||
|
.timeline-container:active {
|
||||||
|
cursor: grabbing;
|
||||||
|
}
|
||||||
|
|
||||||
|
.time-tick {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-start;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tick-mark {
|
||||||
|
width: 1px;
|
||||||
|
height: 8px;
|
||||||
|
background-color: var(--ep-color-info);
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tick-mark.major {
|
||||||
|
height: 12px;
|
||||||
|
background-color: var(--ep-color-info);
|
||||||
|
}
|
||||||
|
|
||||||
|
.tick-mark.minor {
|
||||||
|
height: 6px;
|
||||||
|
background-color: var(--ep-border-color-light);
|
||||||
|
}
|
||||||
|
|
||||||
|
.tick-label {
|
||||||
|
font-size: 10px;
|
||||||
|
color: var(--ep-text-color-secondary);
|
||||||
|
margin-left: 4px;
|
||||||
|
margin-top: 0;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.playhead {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
bottom: 0;
|
||||||
|
width: 2px;
|
||||||
|
z-index: 25;
|
||||||
|
cursor: ew-resize;
|
||||||
|
transform: translateZ(0);
|
||||||
|
}
|
||||||
|
|
||||||
|
.playhead::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 2px;
|
||||||
|
height: 100%;
|
||||||
|
background-color: #ef4444;
|
||||||
|
}
|
||||||
|
|
||||||
|
.playhead-indicator {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: -4px;
|
||||||
|
width: 10px;
|
||||||
|
height: 10px;
|
||||||
|
background-color: #ef4444;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.timeline-content {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.timeline-ruler {
|
||||||
|
background-color: var(--ep-fill-color-light);
|
||||||
|
border-bottom: 1px solid var(--ep-border-color);
|
||||||
|
height: 24px;
|
||||||
|
cursor: pointer;
|
||||||
|
z-index: 5;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.timeline-ruler-click-area {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.time-tick-inner {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tick-line {
|
||||||
|
width: 1px;
|
||||||
|
height: 100%;
|
||||||
|
background-color: var(--ep-border-color-lighter);
|
||||||
|
opacity: 0.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.time-tick-inner.is-major .tick-line {
|
||||||
|
background-color: var(--ep-color-info);
|
||||||
|
opacity: 0.8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.track-row {
|
||||||
|
position: relative;
|
||||||
|
height: 32px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
border-bottom: 1px solid var(--ep-border-color-lighter);
|
||||||
|
transition: background-color 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.track-row:hover {
|
||||||
|
background-color: var(--ep-fill-color-light);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hazard-block {
|
||||||
|
position: absolute;
|
||||||
|
height: 24px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
border-radius: 4px;
|
||||||
|
/* background-color: var(--ep-color-primary); */
|
||||||
|
color: #fff;
|
||||||
|
font-size: 12px;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: background-color 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hazard-block.primary {
|
||||||
|
background-color: var(--ep-color-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hazard-block.primary:hover {
|
||||||
|
background-color: color-mix(in srgb, var(--ep-color-primary) 80%, transparent);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hazard-block.danger {
|
||||||
|
background-color: var(--ep-color-danger);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hazard-block.danger:hover {
|
||||||
|
background-color: color-mix(in srgb, var(--ep-color-danger) 80%, transparent);
|
||||||
|
}
|
||||||
|
|
||||||
|
.timeline-container::-webkit-scrollbar {
|
||||||
|
width: 6px;
|
||||||
|
height: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.timeline-container::-webkit-scrollbar-thumb {
|
||||||
|
background: var(--ep-color-info);
|
||||||
|
border-radius: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.timeline-container::-webkit-scrollbar-thumb:hover {
|
||||||
|
background: color-mix(in srgb, var(--ep-color-info) 60%, transparent);
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.el-scrollbar) {
|
||||||
|
height: 100% !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.el-scrollbar__wrap) {
|
||||||
|
height: 100% !important;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,439 @@
|
||||||
|
import type { ComputedRef, Ref } from 'vue'
|
||||||
|
import { ElMessageBox } from 'element-plus'
|
||||||
|
import { computed, nextTick, ref, watch } from 'vue'
|
||||||
|
|
||||||
|
function debounce<T extends (...args: any[]) => void>(fn: T, delay: number): T {
|
||||||
|
let timeoutId: ReturnType<typeof setTimeout> | null = null
|
||||||
|
return ((...args: any[]) => {
|
||||||
|
if (timeoutId)
|
||||||
|
clearTimeout(timeoutId)
|
||||||
|
timeoutId = setTimeout(() => fn(...args), delay)
|
||||||
|
}) as T
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface HazardData {
|
||||||
|
ranges: number[]
|
||||||
|
level: number
|
||||||
|
tip: string
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface TimelineProps {
|
||||||
|
currentFrame: number
|
||||||
|
totalFrames: number
|
||||||
|
hazardRanges: Record<string, HazardData>
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface TimelineEmits {
|
||||||
|
(e: 'hazardClick', id: number): void
|
||||||
|
(e: 'frameChange', frame: number): void
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface TimeTick {
|
||||||
|
second: number
|
||||||
|
position: number
|
||||||
|
label: string
|
||||||
|
type?: 'major' | 'minor'
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface HazardItem {
|
||||||
|
id: string
|
||||||
|
start: number
|
||||||
|
end: number
|
||||||
|
ranges: number[]
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface HazardRow {
|
||||||
|
id: string
|
||||||
|
start: number
|
||||||
|
end: number
|
||||||
|
ranges: number[]
|
||||||
|
level: number
|
||||||
|
tip: string
|
||||||
|
}
|
||||||
|
|
||||||
|
export function useTimeline(
|
||||||
|
props: TimelineProps,
|
||||||
|
emit: TimelineEmits,
|
||||||
|
) {
|
||||||
|
const FPS = 30
|
||||||
|
const pxPerFrame = ref(1)
|
||||||
|
const minPxPerFrame = ref(0.5)
|
||||||
|
const maxPxPerFrame = ref(3)
|
||||||
|
const timelineContainer: Ref<HTMLElement | null> = ref(null)
|
||||||
|
const isDragging = ref(false)
|
||||||
|
const isPlayheadDragging = ref(false)
|
||||||
|
const isRulerDragging = ref(false)
|
||||||
|
const isMounted = ref(false)
|
||||||
|
const displayFrame = ref(0)
|
||||||
|
const dragStartX = ref(0)
|
||||||
|
const scrollStartLeft = ref(0)
|
||||||
|
const localCurrentFrame = ref(0)
|
||||||
|
|
||||||
|
const trackWidth: ComputedRef<string> = computed(() => {
|
||||||
|
return `${props.totalFrames * pxPerFrame.value + 50}px`
|
||||||
|
})
|
||||||
|
|
||||||
|
const totalSeconds: ComputedRef<number> = computed(() => {
|
||||||
|
return Math.ceil(props.totalFrames / FPS)
|
||||||
|
})
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 更新每帧像素值，根据容器宽度自动计算合适的缩放比例
|
||||||
|
* 确保时间线能够完整显示所有帧，同时设置合理的缩放范围
|
||||||
|
*/
|
||||||
|
function updatePxPerFrame(): void {
|
||||||
|
if (!timelineContainer.value || props.totalFrames === 0)
|
||||||
|
return
|
||||||
|
|
||||||
|
const container = timelineContainer.value
|
||||||
|
if (!container.isConnected)
|
||||||
|
return
|
||||||
|
|
||||||
|
const containerWidth = container.clientWidth - 20
|
||||||
|
if (containerWidth <= 0)
|
||||||
|
return
|
||||||
|
|
||||||
|
const newMinPxPerFrame = Math.max(0.1, containerWidth / props.totalFrames)
|
||||||
|
|
||||||
|
if (Math.abs(newMinPxPerFrame - minPxPerFrame.value) > 0.01) {
|
||||||
|
minPxPerFrame.value = newMinPxPerFrame
|
||||||
|
// 将当前缩放比例设置为最小缩放比例，确保时间线能够完整显示所有帧
|
||||||
|
setZoom(minPxPerFrame.value)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function setZoom(value: number): void {
|
||||||
|
const oldPxPerFrame = pxPerFrame.value
|
||||||
|
const newPxPerFrame = Math.max(minPxPerFrame.value, Math.min(maxPxPerFrame.value, value))
|
||||||
|
|
||||||
|
if (oldPxPerFrame === newPxPerFrame || !timelineContainer.value) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
const container = timelineContainer.value
|
||||||
|
const containerWidth = container.clientWidth
|
||||||
|
const containerScrollLeft = container.scrollLeft
|
||||||
|
const playheadPosition = props.currentFrame * oldPxPerFrame
|
||||||
|
|
||||||
|
// 检查播放头是否在可见范围内
|
||||||
|
const playheadVisible = playheadPosition >= containerScrollLeft
|
||||||
|
&& playheadPosition <= containerScrollLeft + containerWidth
|
||||||
|
|
||||||
|
// 计算缩放前后的位置偏移
|
||||||
|
// console.log('container.scrollLeft', container.scrollLeft)
|
||||||
|
if (playheadVisible) {
|
||||||
|
const playheadX = playheadPosition - containerScrollLeft
|
||||||
|
const newPlayheadPosition = props.currentFrame * newPxPerFrame
|
||||||
|
const newScrollLeft = Math.round(newPlayheadPosition - playheadX)
|
||||||
|
container.scrollLeft = newScrollLeft
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
const centerX = containerWidth / 2
|
||||||
|
const centerPosition = containerScrollLeft + centerX
|
||||||
|
const newCenterPosition = centerPosition * (newPxPerFrame / oldPxPerFrame)
|
||||||
|
container.scrollLeft = Math.round(newCenterPosition - centerX)
|
||||||
|
}
|
||||||
|
|
||||||
|
// 最后更新缩放值
|
||||||
|
pxPerFrame.value = newPxPerFrame
|
||||||
|
}
|
||||||
|
|
||||||
|
const timeTicks: ComputedRef<TimeTick[]> = computed(() => {
|
||||||
|
const ticks: TimeTick[] = []
|
||||||
|
for (let s = 0; s <= totalSeconds.value; s += 10) {
|
||||||
|
ticks.push({
|
||||||
|
second: s,
|
||||||
|
position: s * FPS * pxPerFrame.value,
|
||||||
|
label: formatTime(s),
|
||||||
|
type: 'major',
|
||||||
|
})
|
||||||
|
}
|
||||||
|
return ticks
|
||||||
|
})
|
||||||
|
|
||||||
|
const secondTicks: ComputedRef<TimeTick[]> = computed(() => {
|
||||||
|
const ticks: TimeTick[] = []
|
||||||
|
for (let s = 0; s <= totalSeconds.value; s += 1) {
|
||||||
|
ticks.push({
|
||||||
|
second: s,
|
||||||
|
position: s * FPS * pxPerFrame.value,
|
||||||
|
label: '',
|
||||||
|
type: 'minor',
|
||||||
|
})
|
||||||
|
}
|
||||||
|
return ticks
|
||||||
|
})
|
||||||
|
|
||||||
|
function formatTime(seconds: number): string {
|
||||||
|
const mins = Math.floor(seconds / 60)
|
||||||
|
const secs = seconds % 60
|
||||||
|
if (mins > 0) {
|
||||||
|
return `${mins}:${secs.toString().padStart(2, '0')}`
|
||||||
|
}
|
||||||
|
return `${secs}s`
|
||||||
|
}
|
||||||
|
|
||||||
|
const playheadPos: ComputedRef<number> = computed(() => {
|
||||||
|
return Math.round(displayFrame.value * pxPerFrame.value)
|
||||||
|
})
|
||||||
|
|
||||||
|
const trackRows: ComputedRef<HazardRow[][]> = computed(() => {
|
||||||
|
const ranges = props.hazardRanges
|
||||||
|
const sortedHazards = Object.entries(ranges)
|
||||||
|
.map(([id, frames]) => {
|
||||||
|
// 处理旧数据结构：[start, end, level]
|
||||||
|
if (Array.isArray(frames)) {
|
||||||
|
return {
|
||||||
|
id,
|
||||||
|
level: frames[2] || 0, // 从第三个元素获取level
|
||||||
|
ranges: [[frames[0], frames[1]]], // 前两个元素是范围
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// 处理新数据结构：{ ranges: number[][], level: number }
|
||||||
|
return {
|
||||||
|
id,
|
||||||
|
level: frames.level || 0,
|
||||||
|
ranges: frames.ranges,
|
||||||
|
tip: frames.tip || '',
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.sort((a, b) => {
|
||||||
|
const aStart = a.ranges[0] || 0
|
||||||
|
const bStart = b.ranges[0] || 0
|
||||||
|
return (aStart as number) - (bStart as number)
|
||||||
|
})
|
||||||
|
|
||||||
|
const rows: HazardRow[][] = []
|
||||||
|
sortedHazards.forEach((hazard) => {
|
||||||
|
let assigned = false
|
||||||
|
for (let i = 0; i < rows.length; i++) {
|
||||||
|
const canPlace = hazard.ranges.every((start) => {
|
||||||
|
return rows[i].every((existing) => {
|
||||||
|
return (start as number) <= (existing.start as number) || (start as number) >= (existing.end as number)
|
||||||
|
})
|
||||||
|
})
|
||||||
|
if (canPlace) {
|
||||||
|
rows[i].push({
|
||||||
|
id: hazard.id,
|
||||||
|
start: hazard.ranges[0] as number,
|
||||||
|
end: hazard.ranges[1] as number,
|
||||||
|
ranges: hazard.ranges.map(range => range as number),
|
||||||
|
level: hazard.level || 0,
|
||||||
|
tip: hazard.tip || '',
|
||||||
|
})
|
||||||
|
assigned = true
|
||||||
|
break
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (!assigned) {
|
||||||
|
rows.push([{
|
||||||
|
id: hazard.id,
|
||||||
|
start: hazard.ranges[0] as number,
|
||||||
|
end: hazard.ranges[1] as number,
|
||||||
|
ranges: hazard.ranges.map(range => range as number),
|
||||||
|
level: hazard.level || 0,
|
||||||
|
tip: hazard.tip || '',
|
||||||
|
}])
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
return rows
|
||||||
|
})
|
||||||
|
|
||||||
|
function getHazardStyle(start: number, end: number): Record<string, string> {
|
||||||
|
const left = start * pxPerFrame.value
|
||||||
|
const width = (end - start) * pxPerFrame.value
|
||||||
|
return {
|
||||||
|
left: `${left}px`,
|
||||||
|
width: `${width}px`,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleHazardClick(hazardId: string): void {
|
||||||
|
emit('hazardClick', Number(hazardId))
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleWheel(e: WheelEvent): void {
|
||||||
|
if (!timelineContainer.value)
|
||||||
|
return
|
||||||
|
e.preventDefault()
|
||||||
|
|
||||||
|
if (e.shiftKey) {
|
||||||
|
const delta = e.deltaY || e.deltaX
|
||||||
|
const zoomDelta = delta > 0 ? -0.1 : 0.1
|
||||||
|
const newZoom = pxPerFrame.value + zoomDelta
|
||||||
|
setZoom(newZoom)
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
const container = timelineContainer.value
|
||||||
|
const delta = e.deltaY || e.deltaX
|
||||||
|
container.scrollLeft += delta
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleMouseDown(e: MouseEvent): void {
|
||||||
|
if (e.button !== 0)
|
||||||
|
return
|
||||||
|
const target = e.target as HTMLElement
|
||||||
|
const playhead = document.getElementById('playhead')
|
||||||
|
if (playhead && (playhead.contains(target) || target === playhead))
|
||||||
|
return
|
||||||
|
const ruler = timelineContainer.value?.querySelector('.timeline-ruler')
|
||||||
|
if (ruler && (ruler.contains(target) || target === ruler)) {
|
||||||
|
isRulerDragging.value = true
|
||||||
|
}
|
||||||
|
isDragging.value = true
|
||||||
|
dragStartX.value = e.clientX
|
||||||
|
if (timelineContainer.value)
|
||||||
|
scrollStartLeft.value = timelineContainer.value.scrollLeft
|
||||||
|
document.body.style.cursor = 'grabbing'
|
||||||
|
document.body.style.userSelect = 'none'
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleMouseMove(e: MouseEvent): void {
|
||||||
|
if (!isDragging.value || !timelineContainer.value)
|
||||||
|
return
|
||||||
|
const delta = dragStartX.value - e.clientX
|
||||||
|
timelineContainer.value.scrollLeft = scrollStartLeft.value + delta
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleMouseUp(): void {
|
||||||
|
isDragging.value = false
|
||||||
|
isPlayheadDragging.value = false
|
||||||
|
isRulerDragging.value = false
|
||||||
|
document.body.style.cursor = ''
|
||||||
|
document.body.style.userSelect = ''
|
||||||
|
}
|
||||||
|
|
||||||
|
function handlePlayheadMouseDown(e: MouseEvent): void {
|
||||||
|
e.stopPropagation()
|
||||||
|
isPlayheadDragging.value = true
|
||||||
|
dragStartX.value = e.clientX
|
||||||
|
document.body.style.cursor = 'ew-resize'
|
||||||
|
document.body.style.userSelect = 'none'
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleRulerClick(e: MouseEvent): void {
|
||||||
|
if (isRulerDragging.value)
|
||||||
|
return
|
||||||
|
if (!timelineContainer.value)
|
||||||
|
return
|
||||||
|
const rect = timelineContainer.value.getBoundingClientRect()
|
||||||
|
const scrollLeft = timelineContainer.value.scrollLeft
|
||||||
|
const x = e.clientX - rect.left + scrollLeft
|
||||||
|
const frame = Math.floor(x / pxPerFrame.value)
|
||||||
|
const clampedFrame = Math.max(0, Math.min(frame, props.totalFrames - 1))
|
||||||
|
localCurrentFrame.value = clampedFrame
|
||||||
|
displayFrame.value = clampedFrame
|
||||||
|
emit('frameChange', clampedFrame)
|
||||||
|
}
|
||||||
|
|
||||||
|
function handlePlayheadDrag(e: MouseEvent): void {
|
||||||
|
if (!isPlayheadDragging.value || !timelineContainer.value)
|
||||||
|
return
|
||||||
|
const rect = timelineContainer.value.getBoundingClientRect()
|
||||||
|
const scrollLeft = timelineContainer.value.scrollLeft
|
||||||
|
const x = e.clientX - rect.left + scrollLeft
|
||||||
|
const frame = Math.floor(x / pxPerFrame.value)
|
||||||
|
const clampedFrame = Math.max(0, Math.min(frame, props.totalFrames - 1))
|
||||||
|
localCurrentFrame.value = clampedFrame
|
||||||
|
displayFrame.value = clampedFrame
|
||||||
|
emit('frameChange', clampedFrame)
|
||||||
|
}
|
||||||
|
|
||||||
|
watch(() => props.currentFrame, () => {
|
||||||
|
if (isPlayheadDragging.value)
|
||||||
|
return
|
||||||
|
|
||||||
|
displayFrame.value = props.currentFrame
|
||||||
|
|
||||||
|
nextTick(() => {
|
||||||
|
if (!timelineContainer.value)
|
||||||
|
return
|
||||||
|
const container = timelineContainer.value
|
||||||
|
const playhead = document.getElementById('playhead')
|
||||||
|
if (!playhead)
|
||||||
|
return
|
||||||
|
|
||||||
|
const playheadLeft = playhead.offsetLeft
|
||||||
|
const containerWidth = container.clientWidth
|
||||||
|
const containerScrollLeft = container.scrollLeft
|
||||||
|
|
||||||
|
const playheadVisible = playheadLeft >= containerScrollLeft && playheadLeft <= containerScrollLeft + containerWidth - 50
|
||||||
|
|
||||||
|
if (!playheadVisible) {
|
||||||
|
container.scrollLeft = playheadLeft - containerWidth / 2
|
||||||
|
}
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 组件挂载时的初始化函数
|
||||||
|
* 设置时间线容器的初始状态并绑定事件监听器
|
||||||
|
*/
|
||||||
|
function initMounted(): void {
|
||||||
|
isMounted.value = true
|
||||||
|
|
||||||
|
const progressContainer = timelineContainer.value
|
||||||
|
if (!progressContainer)
|
||||||
|
return
|
||||||
|
|
||||||
|
progressContainer.addEventListener('wheel', handleWheel, { passive: false })
|
||||||
|
progressContainer.addEventListener('mousedown', handleMouseDown)
|
||||||
|
window.addEventListener('mousemove', handleMouseMove)
|
||||||
|
window.addEventListener('mousemove', handlePlayheadDrag)
|
||||||
|
window.addEventListener('mouseup', handleMouseUp)
|
||||||
|
}
|
||||||
|
|
||||||
|
const debouncedUpdatePxPerFrame = debounce(() => {
|
||||||
|
updatePxPerFrame()
|
||||||
|
}, 150)
|
||||||
|
|
||||||
|
watch(() => props.totalFrames, () => {
|
||||||
|
if (!isMounted.value)
|
||||||
|
return
|
||||||
|
debouncedUpdatePxPerFrame()
|
||||||
|
})
|
||||||
|
|
||||||
|
function initUnmounted(): void {
|
||||||
|
isMounted.value = false
|
||||||
|
window.removeEventListener('mousemove', handleMouseMove)
|
||||||
|
window.removeEventListener('mousemove', handlePlayheadDrag)
|
||||||
|
window.removeEventListener('mouseup', handleMouseUp)
|
||||||
|
}
|
||||||
|
|
||||||
|
const openMessageBox = (message: string, title: string) => {
|
||||||
|
ElMessageBox.alert(message, title, {
|
||||||
|
// if you want to disable its autofocus
|
||||||
|
// autofocus: false,
|
||||||
|
confirmButtonText: '确认',
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
pxPerFrame,
|
||||||
|
minPxPerFrame,
|
||||||
|
maxPxPerFrame,
|
||||||
|
timelineContainer,
|
||||||
|
isDragging,
|
||||||
|
isPlayheadDragging,
|
||||||
|
isRulerDragging,
|
||||||
|
displayFrame,
|
||||||
|
trackWidth,
|
||||||
|
timeTicks,
|
||||||
|
secondTicks,
|
||||||
|
playheadPos,
|
||||||
|
trackRows,
|
||||||
|
setZoom,
|
||||||
|
getHazardStyle,
|
||||||
|
handleHazardClick,
|
||||||
|
handleMouseMove,
|
||||||
|
handleMouseUp,
|
||||||
|
handlePlayheadMouseDown,
|
||||||
|
handleRulerClick,
|
||||||
|
handlePlayheadDrag,
|
||||||
|
initMounted,
|
||||||
|
initUnmounted,
|
||||||
|
openMessageBox,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,147 @@
|
||||||
|
<script setup lang="ts">
|
||||||
|
import type { Arrayable } from '@vueuse/core'
|
||||||
|
import type { TimelineEmits, TimelineProps } from './timeline'
|
||||||
|
import { InfoFilled } from '@element-plus/icons-vue'
|
||||||
|
import { ElScrollbar, ElSlider } from 'element-plus'
|
||||||
|
import { onMounted, onUnmounted } from 'vue'
|
||||||
|
import { useTimeline } from './timeline'
|
||||||
|
import './timeline.css'
|
||||||
|
|
||||||
|
const props = defineProps<TimelineProps>()
|
||||||
|
|
||||||
|
const emit = defineEmits<TimelineEmits>()
|
||||||
|
|
||||||
|
const {
|
||||||
|
timelineContainer,
|
||||||
|
trackWidth,
|
||||||
|
timeTicks,
|
||||||
|
secondTicks,
|
||||||
|
playheadPos,
|
||||||
|
trackRows,
|
||||||
|
pxPerFrame,
|
||||||
|
minPxPerFrame,
|
||||||
|
maxPxPerFrame,
|
||||||
|
setZoom,
|
||||||
|
getHazardStyle,
|
||||||
|
handleHazardClick,
|
||||||
|
handleMouseMove,
|
||||||
|
handleMouseUp,
|
||||||
|
handlePlayheadMouseDown,
|
||||||
|
handleRulerClick,
|
||||||
|
initMounted,
|
||||||
|
openMessageBox,
|
||||||
|
initUnmounted,
|
||||||
|
} = useTimeline(props, emit)
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
initMounted()
|
||||||
|
})
|
||||||
|
|
||||||
|
onUnmounted(() => {
|
||||||
|
initUnmounted()
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="timeline-wrapper">
|
||||||
|
<div class="timeline-toolbar">
|
||||||
|
<div class="timeline-title-container">
|
||||||
|
<span class="timeline-title">隐患时间线 (共 {{ Object.keys(hazardRanges).length }} 个隐患)</span>
|
||||||
|
<el-button
|
||||||
|
type="info" dashed :icon="InfoFilled" size="small"
|
||||||
|
@click="openMessageBox(
|
||||||
|
'拖动播放头 控制播放进度。滚轮/拖动 时间轴前后移动。点击隐患编号跳转对应隐患。shift键+鼠标滚轮 缩放时间轴。缩放默认以播放头位置为中心，如果播放头不在可视范围内，会以时间轴中心缩放。',
|
||||||
|
'操作说明',
|
||||||
|
)"
|
||||||
|
>
|
||||||
|
操作说明
|
||||||
|
</el-button>
|
||||||
|
</div>
|
||||||
|
<div class="timeline-zoom-controls">
|
||||||
|
<div class="timeline-zoom-label">
|
||||||
|
<el-text type="info" size="small">
|
||||||
|
缩放
|
||||||
|
</el-text>
|
||||||
|
</div>
|
||||||
|
<ElSlider
|
||||||
|
:model-value="pxPerFrame"
|
||||||
|
:min="minPxPerFrame"
|
||||||
|
:max="maxPxPerFrame"
|
||||||
|
:step="0.1"
|
||||||
|
:show-tooltip="true"
|
||||||
|
:format-tooltip="(val: number) => `缩放: ${val.toFixed(2)}`"
|
||||||
|
class="zoom-slider"
|
||||||
|
@update:model-value="(val: Arrayable<number>) => setZoom(Array.isArray(val) ? val[0] : val)"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
ref="timelineContainer"
|
||||||
|
class="timeline-container"
|
||||||
|
@mousemove="handleMouseMove"
|
||||||
|
@mouseup="handleMouseUp"
|
||||||
|
@mouseleave="handleMouseUp"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
id="playhead"
|
||||||
|
class="playhead"
|
||||||
|
:style="{ left: `${playheadPos}px` }"
|
||||||
|
@mousedown="handlePlayheadMouseDown"
|
||||||
|
>
|
||||||
|
<div class="playhead-indicator" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="timeline-content" :style="{ width: trackWidth }">
|
||||||
|
<div class="timeline-ruler">
|
||||||
|
<div
|
||||||
|
v-for="tick in secondTicks"
|
||||||
|
:key="tick.second"
|
||||||
|
class="time-tick"
|
||||||
|
:style="{ left: `${tick.position}px` }"
|
||||||
|
>
|
||||||
|
<div class="tick-mark minor" />
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
v-for="tick in timeTicks"
|
||||||
|
:key="tick.second"
|
||||||
|
class="time-tick"
|
||||||
|
:style="{ left: `${tick.position}px` }"
|
||||||
|
>
|
||||||
|
<div class="tick-mark major" />
|
||||||
|
<span class="tick-label">{{ tick.label }}</span>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="timeline-ruler-click-area"
|
||||||
|
@click="handleRulerClick"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<ElScrollbar :style="{ height: '100%' }">
|
||||||
|
<div id="tracks-list" class="tracks-list">
|
||||||
|
<div
|
||||||
|
v-for="(row, rowIndex) in trackRows"
|
||||||
|
:key="rowIndex"
|
||||||
|
class="track-row"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
v-for="hazard in row"
|
||||||
|
:key="hazard.id"
|
||||||
|
class="hazard-block"
|
||||||
|
:class="{ primary: hazard.level === 0, danger: hazard.level === 1 }"
|
||||||
|
:style="getHazardStyle(hazard.start, hazard.end)"
|
||||||
|
@click="handleHazardClick(hazard.id)"
|
||||||
|
>
|
||||||
|
<el-tooltip :content="hazard.tip" placement="top">
|
||||||
|
<div style="width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;">
|
||||||
|
{{ parseInt(hazard.id) + 1 }}
|
||||||
|
</div>
|
||||||
|
</el-tooltip>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</ElScrollbar>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
@ -0,0 +1,73 @@
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { repository } from '~/../package.json'
|
||||||
|
|
||||||
|
import { toggleDark } from '~/composables'
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<el-menu class="el-menu-demo" mode="horizontal" :ellipsis="false" router>
|
||||||
|
<el-menu-item index="/">
|
||||||
|
<div class="flex items-center justify-center gap-2">
|
||||||
|
<div class="text-xl" i-ep-element-plus />
|
||||||
|
<span>安责险隐患检查</span>
|
||||||
|
</div>
|
||||||
|
</el-menu-item>
|
||||||
|
<!-- <el-sub-menu index="2">
|
||||||
|
<template #title>
|
||||||
|
Workspace
|
||||||
|
</template>
|
||||||
|
<el-menu-item index="2-1">
|
||||||
|
item one
|
||||||
|
</el-menu-item>
|
||||||
|
<el-menu-item index="2-2">
|
||||||
|
item two
|
||||||
|
</el-menu-item>
|
||||||
|
<el-menu-item index="2-3">
|
||||||
|
item three
|
||||||
|
</el-menu-item>
|
||||||
|
<el-sub-menu index="2-4">
|
||||||
|
<template #title>
|
||||||
|
item four
|
||||||
|
</template>
|
||||||
|
<el-menu-item index="2-4-1">
|
||||||
|
item one
|
||||||
|
</el-menu-item>
|
||||||
|
<el-menu-item index="2-4-2">
|
||||||
|
item two
|
||||||
|
</el-menu-item>
|
||||||
|
<el-menu-item index="2-4-3">
|
||||||
|
item three
|
||||||
|
</el-menu-item>
|
||||||
|
</el-sub-menu>
|
||||||
|
</el-sub-menu>
|
||||||
|
<el-menu-item index="3" disabled>
|
||||||
|
Info
|
||||||
|
</el-menu-item>
|
||||||
|
<el-menu-item index="4">
|
||||||
|
Orders
|
||||||
|
</el-menu-item> -->
|
||||||
|
|
||||||
|
<el-menu-item h="full" @click="toggleDark()">
|
||||||
|
<button
|
||||||
|
class="w-full cursor-pointer border-none bg-transparent"
|
||||||
|
style="height: var(--ep-menu-item-height)"
|
||||||
|
>
|
||||||
|
<i inline-flex i="dark:ep-moon ep-sunny" />
|
||||||
|
</button>
|
||||||
|
</el-menu-item>
|
||||||
|
|
||||||
|
<!-- <el-menu-item h="full">
|
||||||
|
<a class="size-full flex items-center justify-center" :href="repository.url" target="_blank">
|
||||||
|
<div i-ri-github-fill />
|
||||||
|
</a>
|
||||||
|
</el-menu-item> -->
|
||||||
|
</el-menu>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
.el-menu-demo {
|
||||||
|
&.ep-menu--horizontal > .ep-menu-item:nth-child(1) {
|
||||||
|
margin-right: auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,37 @@
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import {
|
||||||
|
Document,
|
||||||
|
Menu as IconMenu,
|
||||||
|
Location,
|
||||||
|
Setting,
|
||||||
|
} from '@element-plus/icons-vue'
|
||||||
|
|
||||||
|
// const isCollapse = ref(true)
|
||||||
|
function handleOpen(key: string, keyPath: string[]) {
|
||||||
|
// eslint-disable-next-line no-console
|
||||||
|
console.log(key, keyPath)
|
||||||
|
}
|
||||||
|
function handleClose(key: string, keyPath: string[]) {
|
||||||
|
// eslint-disable-next-line no-console
|
||||||
|
console.log(key, keyPath)
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<el-menu
|
||||||
|
router
|
||||||
|
default-active="1"
|
||||||
|
class="el-menu-vertical-demo"
|
||||||
|
@open="handleOpen"
|
||||||
|
@close="handleClose"
|
||||||
|
>
|
||||||
|
<el-menu-item index="/nav/1_隐患检查">
|
||||||
|
<el-icon>
|
||||||
|
<IconMenu />
|
||||||
|
</el-icon>
|
||||||
|
<template #title>
|
||||||
|
隐患检查
|
||||||
|
</template>
|
||||||
|
</el-menu-item>
|
||||||
|
</el-menu>
|
||||||
|
</template>
|
||||||
|
|
@ -0,0 +1,85 @@
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import {
|
||||||
|
Document,
|
||||||
|
Menu as IconMenu,
|
||||||
|
Location,
|
||||||
|
Setting,
|
||||||
|
} from '@element-plus/icons-vue'
|
||||||
|
|
||||||
|
// const isCollapse = ref(true)
|
||||||
|
function handleOpen(key: string, keyPath: string[]) {
|
||||||
|
// eslint-disable-next-line no-console
|
||||||
|
console.log(key, keyPath)
|
||||||
|
}
|
||||||
|
function handleClose(key: string, keyPath: string[]) {
|
||||||
|
// eslint-disable-next-line no-console
|
||||||
|
console.log(key, keyPath)
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<el-menu
|
||||||
|
router
|
||||||
|
default-active="1"
|
||||||
|
class="el-menu-vertical-demo"
|
||||||
|
@open="handleOpen"
|
||||||
|
@close="handleClose"
|
||||||
|
>
|
||||||
|
<el-sub-menu index="1">
|
||||||
|
<template #title>
|
||||||
|
<el-icon>
|
||||||
|
<Location />
|
||||||
|
</el-icon>
|
||||||
|
<span>Navigator One</span>
|
||||||
|
</template>
|
||||||
|
<el-menu-item-group>
|
||||||
|
<template #title>
|
||||||
|
<span>Group One</span>
|
||||||
|
</template>
|
||||||
|
<el-menu-item index="/nav/1/item-1">
|
||||||
|
item one
|
||||||
|
</el-menu-item>
|
||||||
|
<el-menu-item index="1-2">
|
||||||
|
item two
|
||||||
|
</el-menu-item>
|
||||||
|
</el-menu-item-group>
|
||||||
|
<el-menu-item-group title="Group Two">
|
||||||
|
<el-menu-item index="1-3">
|
||||||
|
item three
|
||||||
|
</el-menu-item>
|
||||||
|
</el-menu-item-group>
|
||||||
|
<el-sub-menu index="1-4">
|
||||||
|
<template #title>
|
||||||
|
<span>item four</span>
|
||||||
|
</template>
|
||||||
|
<el-menu-item index="1-4-1">
|
||||||
|
item one
|
||||||
|
</el-menu-item>
|
||||||
|
</el-sub-menu>
|
||||||
|
</el-sub-menu>
|
||||||
|
<el-menu-item index="/nav/2">
|
||||||
|
<el-icon>
|
||||||
|
<IconMenu />
|
||||||
|
</el-icon>
|
||||||
|
<template #title>
|
||||||
|
Navigator Two
|
||||||
|
</template>
|
||||||
|
</el-menu-item>
|
||||||
|
<el-menu-item index="3" disabled>
|
||||||
|
<el-icon>
|
||||||
|
<Document />
|
||||||
|
</el-icon>
|
||||||
|
<template #title>
|
||||||
|
Navigator Three
|
||||||
|
</template>
|
||||||
|
</el-menu-item>
|
||||||
|
<el-menu-item index="/nav/4">
|
||||||
|
<el-icon>
|
||||||
|
<Setting />
|
||||||
|
</el-icon>
|
||||||
|
<template #title>
|
||||||
|
Navigator Four
|
||||||
|
</template>
|
||||||
|
</el-menu-item>
|
||||||
|
</el-menu>
|
||||||
|
</template>
|
||||||
|
|
@ -0,0 +1,66 @@
|
||||||
|
import { Client } from '@gradio/client'
|
||||||
|
|
||||||
|
export async function runApi(funcName: string, params: Record<string, any>) {
|
||||||
|
// 声明 client 变量，用于后续释放连接
|
||||||
|
try {
|
||||||
|
// 1. 连接客户端（修复：function 是关键字，不能做变量名）
|
||||||
|
const client = await Client.connect('http://127.0.0.1:7890')
|
||||||
|
|
||||||
|
// 2. 调用预测接口，传入方法名和参数
|
||||||
|
const result = await client.predict(funcName, params)
|
||||||
|
|
||||||
|
// 3. 打印返回结果
|
||||||
|
// console.log('接口调用成功，返回数据：', result.data)
|
||||||
|
|
||||||
|
return result.data
|
||||||
|
}
|
||||||
|
catch (error) {
|
||||||
|
// 捕获异常，打印错误信息
|
||||||
|
console.error('接口调用失败：', error)
|
||||||
|
return 'error'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function runApiAudio(funcName: string, method: string = 'GET', params: Record<string, any>) {
|
||||||
|
const baseUrl = 'http://127.0.0.1:5000'
|
||||||
|
|
||||||
|
try {
|
||||||
|
if (method === 'GET') {
|
||||||
|
const url = new URL(`${baseUrl}/api/${funcName}`)
|
||||||
|
Object.entries(params).forEach(([key, value]) => {
|
||||||
|
url.searchParams.append(key, String(value))
|
||||||
|
})
|
||||||
|
|
||||||
|
const response = await fetch(url.toString(), {
|
||||||
|
method: 'GET',
|
||||||
|
})
|
||||||
|
|
||||||
|
if (!response.ok) {
|
||||||
|
throw new Error(`HTTP error! status: ${response.status}`)
|
||||||
|
}
|
||||||
|
|
||||||
|
const result = await response.json()
|
||||||
|
return result.data
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
const response = await fetch(`${baseUrl}/api/${funcName}`, {
|
||||||
|
method: 'POST',
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
},
|
||||||
|
body: JSON.stringify(params),
|
||||||
|
})
|
||||||
|
|
||||||
|
if (!response.ok) {
|
||||||
|
throw new Error(`HTTP error! status: ${response.status}`)
|
||||||
|
}
|
||||||
|
|
||||||
|
const result = await response.json()
|
||||||
|
return result.data
|
||||||
|
}
|
||||||
|
}
|
||||||
|
catch (error) {
|
||||||
|
console.error('接口调用失败：', error)
|
||||||
|
return 'error'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,4 @@
|
||||||
|
import { useDark, useToggle } from '@vueuse/core'
|
||||||
|
|
||||||
|
export const isDark = useDark()
|
||||||
|
export const toggleDark = useToggle(isDark)
|
||||||
|
|
@ -0,0 +1 @@
|
||||||
|
export * from './dark'
|
||||||
|
|
@ -0,0 +1,8 @@
|
||||||
|
/// <reference types="vite/client" />
|
||||||
|
|
||||||
|
declare module '*.vue' {
|
||||||
|
import type { DefineComponent } from 'vue'
|
||||||
|
|
||||||
|
const component: DefineComponent<object, object, any>
|
||||||
|
export default component
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,50 @@
|
||||||
|
import type { UserModule } from './types'
|
||||||
|
|
||||||
|
// import "~/styles/element/index.scss";
|
||||||
|
|
||||||
|
import { ViteSSG } from 'vite-ssg'
|
||||||
|
|
||||||
|
// or use cdn, uncomment cdn link in `index.html`
|
||||||
|
|
||||||
|
import { routes } from 'vue-router/auto-routes'
|
||||||
|
// import ElementPlus from "element-plus";
|
||||||
|
// import all element css, uncommented next line
|
||||||
|
// import "element-plus/dist/index.css";
|
||||||
|
|
||||||
|
import App from './App.vue'
|
||||||
|
|
||||||
|
import '~/styles/index.scss'
|
||||||
|
import 'uno.css'
|
||||||
|
// If you want to use ElMessage, import it.
|
||||||
|
import 'element-plus/theme-chalk/src/message.scss'
|
||||||
|
import 'element-plus/theme-chalk/src/message-box.scss'
|
||||||
|
import 'element-plus/theme-chalk/src/overlay.scss'
|
||||||
|
import 'element-plus/theme-chalk/src/slider.scss'
|
||||||
|
import 'element-plus/theme-chalk/src/input-number.scss'
|
||||||
|
import 'element-plus/theme-chalk/src/input.scss'
|
||||||
|
|
||||||
|
// if you do not need ssg:
|
||||||
|
// import { createApp } from "vue";
|
||||||
|
|
||||||
|
// const app = createApp(App);
|
||||||
|
// app.use(createRouter({
|
||||||
|
// history: createWebHistory(),
|
||||||
|
// routes,
|
||||||
|
// }))
|
||||||
|
// // app.use(ElementPlus);
|
||||||
|
// app.mount("#app");
|
||||||
|
|
||||||
|
// https://github.com/antfu/vite-ssg
|
||||||
|
export const createApp = ViteSSG(
|
||||||
|
App,
|
||||||
|
{
|
||||||
|
routes,
|
||||||
|
base: import.meta.env.BASE_URL,
|
||||||
|
},
|
||||||
|
(ctx) => {
|
||||||
|
// install all modules under `modules/`
|
||||||
|
Object.values(import.meta.glob<{ install: UserModule }>('./modules/*.ts', { eager: true }))
|
||||||
|
.forEach(i => i.install?.(ctx))
|
||||||
|
// ctx.app.use(Previewer)
|
||||||
|
},
|
||||||
|
)
|
||||||
|
|
@ -0,0 +1,285 @@
|
||||||
|
<script setup lang="ts">
|
||||||
|
import type { FormInstance, FormRules } from 'element-plus'
|
||||||
|
import { onMounted, reactive, ref } from 'vue'
|
||||||
|
|
||||||
|
import { useRouter } from 'vue-router'
|
||||||
|
import { runApi, runApiAudio } from '~/composables/api'
|
||||||
|
|
||||||
|
const router = useRouter()
|
||||||
|
|
||||||
|
const runCheckBtnRef = ref()
|
||||||
|
const isRunningCheck = ref(false)
|
||||||
|
const vidPaths = ref<string[]>([])
|
||||||
|
|
||||||
|
const processLog = ref<string[]>([])
|
||||||
|
|
||||||
|
interface RuleForm {
|
||||||
|
vidPath: string
|
||||||
|
function: string[]
|
||||||
|
}
|
||||||
|
const ruleFormRef = ref<FormInstance>()
|
||||||
|
const ruleForm = reactive<RuleForm>({
|
||||||
|
vidPath: '',
|
||||||
|
function: [
|
||||||
|
'runAudioRecognition',
|
||||||
|
'runSam3',
|
||||||
|
'runHazardCheck',
|
||||||
|
'runGenerateReport',
|
||||||
|
'convertToMp4',
|
||||||
|
],
|
||||||
|
})
|
||||||
|
|
||||||
|
const timerDisplay = ref('00:00:00')
|
||||||
|
let timerInterval: ReturnType<typeof setInterval> | null = null
|
||||||
|
let startTime: number = 0
|
||||||
|
|
||||||
|
function startTimer() {
|
||||||
|
startTime = Date.now()
|
||||||
|
timerInterval = setInterval(() => {
|
||||||
|
const elapsed = Date.now() - startTime
|
||||||
|
const hours = Math.floor(elapsed / 3600000)
|
||||||
|
const minutes = Math.floor((elapsed % 3600000) / 60000)
|
||||||
|
const seconds = Math.floor((elapsed % 60000) / 1000)
|
||||||
|
timerDisplay.value = `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`
|
||||||
|
}, 1000)
|
||||||
|
}
|
||||||
|
|
||||||
|
function stopTimer() {
|
||||||
|
if (timerInterval) {
|
||||||
|
clearInterval(timerInterval)
|
||||||
|
timerInterval = null
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const rules = reactive<FormRules<RuleForm>>({
|
||||||
|
vidPath: [
|
||||||
|
{
|
||||||
|
type: 'string',
|
||||||
|
required: true,
|
||||||
|
message: '请选择视频',
|
||||||
|
trigger: 'change',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
})
|
||||||
|
|
||||||
|
async function runCheck(formEl: FormInstance | undefined) {
|
||||||
|
if (!formEl)
|
||||||
|
return
|
||||||
|
const valid = await formEl.validate((valid, fields) => {
|
||||||
|
if (valid) {
|
||||||
|
// console.log('submit!', ruleForm)
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
console.error('error submit!', fields)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
if (valid) {
|
||||||
|
runProcess()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function formatTime(date: Date) {
|
||||||
|
return `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')} ${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}:${date.getSeconds().toString().padStart(2, '0')}`
|
||||||
|
}
|
||||||
|
|
||||||
|
async function runProcess() {
|
||||||
|
isRunningCheck.value = true
|
||||||
|
startTimer()
|
||||||
|
const tasks: Promise<any>[] = []
|
||||||
|
processLog.value = []
|
||||||
|
processLog.value.push(`[${formatTime(new Date())}] 💬开始运行...`)
|
||||||
|
|
||||||
|
if (ruleForm.function.includes('runAudioRecognition')) {
|
||||||
|
tasks.push(runApiAudio('recognize', 'GET', {
|
||||||
|
path: vidPaths.value[vidPaths.value.indexOf(ruleForm.vidPath)],
|
||||||
|
}).then((res) => {
|
||||||
|
if (res === 'error')
|
||||||
|
processLog.value.push(`[${formatTime(new Date())}] ❌️音频识别失败`)
|
||||||
|
else
|
||||||
|
processLog.value.push(`[${formatTime(new Date())}] ✅️音频识别完成`)
|
||||||
|
return res
|
||||||
|
}))
|
||||||
|
}
|
||||||
|
|
||||||
|
if (ruleForm.function.includes('convertToMp4')) {
|
||||||
|
tasks.push(runApiAudio('convert', 'GET', {
|
||||||
|
path: vidPaths.value[vidPaths.value.indexOf(ruleForm.vidPath)],
|
||||||
|
}).then((res) => {
|
||||||
|
if (res === 'error')
|
||||||
|
processLog.value.push(`[${formatTime(new Date())}] ❌️转码失败`)
|
||||||
|
else
|
||||||
|
processLog.value.push(`[${formatTime(new Date())}] ✅️转码完成`)
|
||||||
|
return res
|
||||||
|
}))
|
||||||
|
}
|
||||||
|
|
||||||
|
tasks.push(runApi('/run', {
|
||||||
|
vid_file: vidPaths.value[vidPaths.value.indexOf(ruleForm.vidPath)],
|
||||||
|
run_sam3: ruleForm.function.includes('runSam3'),
|
||||||
|
run_inspection: ruleForm.function.includes('runHazardCheck'),
|
||||||
|
gen_report: ruleForm.function.includes('runGenerateReport'),
|
||||||
|
}).then((res) => {
|
||||||
|
if (res === 'error')
|
||||||
|
processLog.value.push(`[${formatTime(new Date())}] ❌️隐患检测结果不存在或运行失败`)
|
||||||
|
else
|
||||||
|
processLog.value.push(`[${formatTime(new Date())}] ✅️隐患检测完成`)
|
||||||
|
return res
|
||||||
|
}))
|
||||||
|
|
||||||
|
await Promise.all(tasks).then((results) => {
|
||||||
|
isRunningCheck.value = false
|
||||||
|
stopTimer()
|
||||||
|
processLog.value.push(`[${formatTime(new Date())}] 💬运行结束，耗时${timerDisplay.value}`)
|
||||||
|
// 判定是否成功运行
|
||||||
|
for (const res of results) {
|
||||||
|
// console.log('判定', String(res))
|
||||||
|
if (res === 'error') {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
router.push({
|
||||||
|
path: '/nav/hazardCheckResult',
|
||||||
|
query: { vid_file: vidPaths.value[vidPaths.value.indexOf(ruleForm.vidPath)] },
|
||||||
|
})
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
async function reloadFiles() {
|
||||||
|
await runApi('/reload_files', {}).then((res) => {
|
||||||
|
for (const item of (res as any)[0].choices) {
|
||||||
|
vidPaths.value.push(item[0])
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
function resetForm(formEl: FormInstance | undefined) {
|
||||||
|
if (!formEl)
|
||||||
|
return
|
||||||
|
formEl.resetFields()
|
||||||
|
}
|
||||||
|
|
||||||
|
async function goToResult(formEl: FormInstance | undefined) {
|
||||||
|
if (!formEl)
|
||||||
|
return
|
||||||
|
await formEl.validate((valid, fields) => {
|
||||||
|
if (valid) {
|
||||||
|
// console.log('跳转结果页')
|
||||||
|
router.push({
|
||||||
|
path: '/nav/hazardCheckResult',
|
||||||
|
query: { vid_file: ruleForm.vidPath },
|
||||||
|
})
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
console.error('error submit!', fields)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
reloadFiles()
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<!-- 最外层容器：占满整个视口 -->
|
||||||
|
<el-container style="margin: 0; height: 100%; flex-direction: column;">
|
||||||
|
<!-- 内层容器：自动填充剩余高度 -->
|
||||||
|
<el-main class="main" style="flex: 1; min-height: 0;">
|
||||||
|
<div class="flex flex-col items-center justify-center pt-30">
|
||||||
|
<el-form
|
||||||
|
ref="ruleFormRef"
|
||||||
|
style="max-width: 600px"
|
||||||
|
:model="ruleForm"
|
||||||
|
:rules="rules"
|
||||||
|
label-width="auto"
|
||||||
|
>
|
||||||
|
<el-form-item label="视频" prop="vidPath">
|
||||||
|
<el-select v-model="ruleForm.vidPath" placeholder="视频">
|
||||||
|
<el-option v-for="item in vidPaths" :key="item" :label="item" :value="item" />
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="功能选择" prop="function">
|
||||||
|
<el-checkbox-group v-model="ruleForm.function" class="checkbox-group">
|
||||||
|
<el-checkbox value="convertToMp4" name="function">
|
||||||
|
视频转码
|
||||||
|
</el-checkbox>
|
||||||
|
<el-checkbox value="runAudioRecognition" name="function">
|
||||||
|
音频识别
|
||||||
|
</el-checkbox>
|
||||||
|
<el-checkbox value="runSam3" name="function">
|
||||||
|
物体识别
|
||||||
|
</el-checkbox>
|
||||||
|
<el-checkbox value="runHazardCheck" name="function">
|
||||||
|
隐患检查
|
||||||
|
</el-checkbox>
|
||||||
|
<el-checkbox value="runGenerateReport" name="function">
|
||||||
|
生成报告
|
||||||
|
</el-checkbox>
|
||||||
|
</el-checkbox-group>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item v-if="!isRunningCheck">
|
||||||
|
<el-button @click="resetForm(ruleFormRef)">
|
||||||
|
重置表单
|
||||||
|
</el-button>
|
||||||
|
<el-button @click="goToResult(ruleFormRef)">
|
||||||
|
查看结果
|
||||||
|
</el-button>
|
||||||
|
<el-button
|
||||||
|
ref="runCheckBtnRef"
|
||||||
|
type="primary"
|
||||||
|
:loading="isRunningCheck"
|
||||||
|
@click="runCheck(ruleFormRef)"
|
||||||
|
>
|
||||||
|
运行检查
|
||||||
|
</el-button>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
<el-progress
|
||||||
|
v-if="isRunningCheck"
|
||||||
|
:percentage="50"
|
||||||
|
:indeterminate="true"
|
||||||
|
style="width: 100%;"
|
||||||
|
>
|
||||||
|
<el-text>{{ timerDisplay }}</el-text>
|
||||||
|
</el-progress>
|
||||||
|
<div v-if="processLog.length > 0" class="log-container">
|
||||||
|
<div class="log-header">
|
||||||
|
<el-text size="large">
|
||||||
|
运行日志
|
||||||
|
</el-text>
|
||||||
|
</div>
|
||||||
|
<div v-for="(item, index) in processLog" :key="index" class="log-item">
|
||||||
|
<el-text :key="item" type="info">
|
||||||
|
{{ item }}
|
||||||
|
</el-text>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</el-main>
|
||||||
|
</el-container>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.main {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.checkbox-group {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 16px;
|
||||||
|
justify-content: flex-start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.log-container {
|
||||||
|
// text-align: left;
|
||||||
|
margin-top: 20px;
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: flex-start;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,512 @@
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { computed, onMounted, ref } from 'vue'
|
||||||
|
|
||||||
|
import { useRouter } from 'vue-router'
|
||||||
|
import { runApi, runApiAudio } from '~/composables/api'
|
||||||
|
|
||||||
|
interface Sentence {
|
||||||
|
begin_time: number
|
||||||
|
duration: number
|
||||||
|
end_time: number
|
||||||
|
speaker: string
|
||||||
|
text: string
|
||||||
|
}
|
||||||
|
|
||||||
|
interface AudioResult {
|
||||||
|
sentences: Sentence[]
|
||||||
|
total_sentences: number
|
||||||
|
}
|
||||||
|
|
||||||
|
const 隐患等级字典: Record<number, string> = {
|
||||||
|
0: '一般隐患',
|
||||||
|
1: '重大隐患',
|
||||||
|
}
|
||||||
|
|
||||||
|
const 置信度字典: Record<number, string> = {
|
||||||
|
0: '疑似',
|
||||||
|
1: '确信',
|
||||||
|
}
|
||||||
|
|
||||||
|
interface HazardItem {
|
||||||
|
隐患编号: string
|
||||||
|
物体编号: string
|
||||||
|
物体类型: string
|
||||||
|
隐患名称: string
|
||||||
|
隐患等级: string
|
||||||
|
置信度: string
|
||||||
|
时间点: string
|
||||||
|
跳转时间点: number
|
||||||
|
隐患描述: string
|
||||||
|
依据: string
|
||||||
|
整改建议: string
|
||||||
|
}
|
||||||
|
|
||||||
|
interface DataFormat {
|
||||||
|
隐患列表: [number, string][]
|
||||||
|
对话列表: [number, string, string, string][]
|
||||||
|
隐患范围字典: Record<string, { ranges: number[], level: number, tip: string }>
|
||||||
|
隐患数据: HazardItem[]
|
||||||
|
}
|
||||||
|
|
||||||
|
interface ResultObject {
|
||||||
|
tag_id: number // 隐患类型id
|
||||||
|
base_id: number // 依据id
|
||||||
|
track_id: string // 物体追踪id
|
||||||
|
hazard_track_id: number // 隐患追踪id
|
||||||
|
class_id: number // 物体类型id
|
||||||
|
conf: number // 置信度 0: 疑似 1: 确信
|
||||||
|
level: number // 隐患等级 0: 一般隐患 1: 重大隐患
|
||||||
|
start_frame: number // 开始帧
|
||||||
|
end_frame: number // 结束帧
|
||||||
|
start_sec: number // 开始时间点
|
||||||
|
location: string // 位置
|
||||||
|
recommend: string // 整改建议
|
||||||
|
}
|
||||||
|
|
||||||
|
interface ResultData {
|
||||||
|
class_list: string[]
|
||||||
|
tag: string[]
|
||||||
|
base: string[]
|
||||||
|
objects: ResultObject[]
|
||||||
|
}
|
||||||
|
// =============== 2. 响应式数据 ===============
|
||||||
|
|
||||||
|
const router = useRouter()
|
||||||
|
|
||||||
|
const hazardLoading = ref(true)
|
||||||
|
const dialogLoading = ref(true)
|
||||||
|
|
||||||
|
const vidUrl = ref('')
|
||||||
|
const resultData = ref<ResultData>({
|
||||||
|
class_list: [],
|
||||||
|
tag: [],
|
||||||
|
base: [],
|
||||||
|
objects: [],
|
||||||
|
})
|
||||||
|
|
||||||
|
const videoRef = ref<HTMLVideoElement>()
|
||||||
|
const keywords = ref<string[]>([])
|
||||||
|
const data = ref<DataFormat>({
|
||||||
|
隐患列表: [],
|
||||||
|
隐患范围字典: {},
|
||||||
|
隐患数据: [],
|
||||||
|
对话列表: [],
|
||||||
|
})
|
||||||
|
// const data = ref({
|
||||||
|
// 隐患列表: ['隐患1', '隐患2'],
|
||||||
|
// 物体列表: ['物体1', '物体2', '物体3', '物体4', '物体5'],
|
||||||
|
// 隐患数据: [
|
||||||
|
// {
|
||||||
|
// 隐患名称: '隐患1',
|
||||||
|
// 时间点: '00:00:00',
|
||||||
|
// 跳转时间点: 0,
|
||||||
|
// 隐患描述: '隐患1的描述',
|
||||||
|
// 依据: '依据1',
|
||||||
|
// 整改建议: '整改建议1',
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// 隐患名称: '隐患2',
|
||||||
|
// 时间点: '00:00:03',
|
||||||
|
// 跳转时间点: 3,
|
||||||
|
// 隐患描述: '隐患2的描述',
|
||||||
|
// 依据: '依据2',
|
||||||
|
// 整改建议: '整改建议2',
|
||||||
|
// },
|
||||||
|
// ],
|
||||||
|
// })
|
||||||
|
|
||||||
|
const selectedHazard = ref(-1)
|
||||||
|
const currentFrame = ref(0)
|
||||||
|
|
||||||
|
const videoCurrentTime = computed(() => {
|
||||||
|
return currentFrame.value / 30
|
||||||
|
})
|
||||||
|
const videoDuration = ref(0)
|
||||||
|
const FPS = 30
|
||||||
|
const totalFrames = computed(() => {
|
||||||
|
if (videoDuration.value > 0) {
|
||||||
|
return Math.floor(videoDuration.value * FPS)
|
||||||
|
}
|
||||||
|
const objects = resultData.value.objects
|
||||||
|
if (!objects || objects.length === 0)
|
||||||
|
return 300
|
||||||
|
const maxEndFrame = Math.max(...objects.map(obj => obj.end_frame || obj.start_frame))
|
||||||
|
return maxEndFrame + 100
|
||||||
|
})
|
||||||
|
|
||||||
|
function handleTimelineHazardClick(hazardId: number) {
|
||||||
|
selectedHazard.value = hazardId
|
||||||
|
handleJumpToHazard(hazardId)
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleFrameChange(frame: number) {
|
||||||
|
const videoEl = videoRef.value
|
||||||
|
if (!videoEl)
|
||||||
|
return
|
||||||
|
const seconds = frame / FPS
|
||||||
|
videoEl.currentTime = Math.min(seconds, videoEl.duration)
|
||||||
|
}
|
||||||
|
|
||||||
|
function updateCurrentFrame() {
|
||||||
|
const videoEl = videoRef.value
|
||||||
|
if (!videoEl)
|
||||||
|
return
|
||||||
|
const newFrame = Math.floor(videoEl.currentTime * 30)
|
||||||
|
currentFrame.value = newFrame
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleVideoLoadedMetadata() {
|
||||||
|
const videoEl = videoRef.value
|
||||||
|
if (!videoEl)
|
||||||
|
return
|
||||||
|
videoDuration.value = videoEl.duration
|
||||||
|
}
|
||||||
|
|
||||||
|
function getData() {
|
||||||
|
const { class_list, tag, base, objects } = resultData.value
|
||||||
|
|
||||||
|
// console.log('检查数据', resultData.value)
|
||||||
|
|
||||||
|
data.value.隐患列表 = (objects || []).map((obj: any) => {
|
||||||
|
return [
|
||||||
|
obj.level,
|
||||||
|
// resultData.value?.class_list?.[obj.class_id] || '',
|
||||||
|
tag?.[obj.tag_id] || '',
|
||||||
|
]
|
||||||
|
})
|
||||||
|
|
||||||
|
data.value.隐患范围字典 = {}
|
||||||
|
;(objects || []).forEach((obj: any) => {
|
||||||
|
const 编号 = String(obj.hazard_track_id)
|
||||||
|
if (!data.value.隐患范围字典[编号]) {
|
||||||
|
data.value.隐患范围字典[编号] = {
|
||||||
|
ranges: [obj.start_frame, obj.end_frame],
|
||||||
|
level: obj.level,
|
||||||
|
tip: `${tag?.[obj.tag_id] || ''}`, // 隐患名称
|
||||||
|
// tip: `(${resultData.value.class_list?.[obj.class_id] || ''}) ${tag?.[obj.tag_id] || ''}`,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
// data.value.物体列表 = (objects || []).map((_: any, i: number) => `物体${i + 1}`)
|
||||||
|
data.value.隐患数据 = (objects || []).map((obj: any) => {
|
||||||
|
const jumpPoint = obj.start_sec || 0
|
||||||
|
const hh = String(Math.floor(jumpPoint / 3600)).padStart(2, '0')
|
||||||
|
const mm = String(Math.floor((jumpPoint % 3600) / 60)).padStart(2, '0')
|
||||||
|
const ss = String(Math.floor(jumpPoint % 60)).padStart(2, '0')
|
||||||
|
|
||||||
|
return {
|
||||||
|
隐患编号: obj.hazard_track_id || '',
|
||||||
|
物体编号: obj.track_id || '',
|
||||||
|
物体类型: class_list?.[obj.class_id] || '',
|
||||||
|
隐患名称: tag?.[obj.tag_id] || '',
|
||||||
|
隐患等级: 隐患等级字典[obj.level],
|
||||||
|
置信度: 置信度字典[obj.conf],
|
||||||
|
时间点: `${hh}:${mm}:${ss}`,
|
||||||
|
跳转时间点: jumpPoint,
|
||||||
|
隐患描述: obj.location || '',
|
||||||
|
依据: base?.[obj.base_id] || '',
|
||||||
|
整改建议: obj.recommend || '',
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 点击隐患列表项，更新选中隐患
|
||||||
|
function handleHazardClick(index: number) {
|
||||||
|
selectedHazard.value = index
|
||||||
|
|
||||||
|
handleJumpToHazard(selectedHazard.value)
|
||||||
|
}
|
||||||
|
|
||||||
|
// 点击跳转到隐患时间点，更新视频播放
|
||||||
|
function handleJumpToHazard(index: number) {
|
||||||
|
const seconds = data.value.隐患数据[index].跳转时间点
|
||||||
|
// 实现跳转到指定时间点的逻辑
|
||||||
|
// console.log(`跳转到时间点: ${seconds}`)
|
||||||
|
|
||||||
|
handleJumpToTimePoint(seconds, 'pause')
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleJumpToTimePoint(seconds: number, action: string = 'play') {
|
||||||
|
// 校验：必须是数字且大于等于0
|
||||||
|
if (Number.isNaN(seconds) || seconds < 0)
|
||||||
|
return
|
||||||
|
|
||||||
|
const videoEl = videoRef.value
|
||||||
|
if (!videoEl)
|
||||||
|
return // 确保 DOM 已加载
|
||||||
|
|
||||||
|
// 直接设置 currentTime 实现跳转
|
||||||
|
videoEl.currentTime = seconds
|
||||||
|
currentFrame.value = Math.floor(seconds * 30)
|
||||||
|
if (action === 'play')
|
||||||
|
videoEl.play()
|
||||||
|
else if (action === 'pause')
|
||||||
|
videoEl.pause()
|
||||||
|
}
|
||||||
|
|
||||||
|
function getAudioRecData(res: any) {
|
||||||
|
if (!res) {
|
||||||
|
console.error('音频识别结果为空')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
let sentences = res.sentences
|
||||||
|
if (!sentences && res.data) {
|
||||||
|
sentences = res.data.sentences
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!sentences) {
|
||||||
|
console.error('未找到 sentences 字段，完整响应：', res)
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
const conversationList: [number, string, string, string][] = []
|
||||||
|
|
||||||
|
sentences.forEach((sentence: Sentence) => {
|
||||||
|
const mins = Math.floor(sentence.begin_time / 60)
|
||||||
|
const secs = Math.floor(sentence.begin_time % 60)
|
||||||
|
const timeStr = `${mins}:${secs.toString().padStart(2, '0')}`
|
||||||
|
|
||||||
|
conversationList.push([
|
||||||
|
sentence.begin_time,
|
||||||
|
timeStr,
|
||||||
|
sentence.speaker,
|
||||||
|
sentence.text,
|
||||||
|
])
|
||||||
|
})
|
||||||
|
|
||||||
|
data.value.对话列表 = conversationList
|
||||||
|
}
|
||||||
|
|
||||||
|
// 隐患列表项字段配置
|
||||||
|
// label: 显示名称
|
||||||
|
// key: 数据字段名
|
||||||
|
// group: 所属分组(行)
|
||||||
|
// transform: 数据转换函数
|
||||||
|
const hazardFields = [
|
||||||
|
{ label: '隐患编号', key: '隐患编号', group: 1, transform: (val: any) => val !== undefined ? val + 1 : '无' },
|
||||||
|
{ label: '物体编号', key: '物体编号', group: 1 },
|
||||||
|
{ label: '物体类型', key: '物体类型', group: 1 },
|
||||||
|
{ label: '隐患等级', key: '隐患等级', group: 2 },
|
||||||
|
{ label: '置信度', key: '置信度', group: 2 },
|
||||||
|
{ label: '时间点', key: '时间点', group: 2 },
|
||||||
|
{ label: '隐患名称', key: '隐患名称', group: 3 },
|
||||||
|
{ label: '隐患描述', key: '隐患描述', group: 4 },
|
||||||
|
{ label: '依据', key: '依据', group: 5 },
|
||||||
|
{ label: '整改建议', key: '整改建议', group: 6 },
|
||||||
|
]
|
||||||
|
|
||||||
|
const groupedFields = computed(() => {
|
||||||
|
const groups: Record<number, typeof hazardFields> = {}
|
||||||
|
hazardFields.forEach((field) => {
|
||||||
|
const group = field.group || 0
|
||||||
|
if (!groups[group])
|
||||||
|
groups[group] = []
|
||||||
|
groups[group].push(field)
|
||||||
|
})
|
||||||
|
return Object.values(groups).filter(g => g.length > 0)
|
||||||
|
})
|
||||||
|
|
||||||
|
function getFieldValue(field: typeof hazardFields[0]) {
|
||||||
|
const value = data.value.隐患数据[selectedHazard.value]?.[field.key as keyof HazardItem]
|
||||||
|
return field.transform ? field.transform(value) : (value || '无')
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(async () => {
|
||||||
|
try {
|
||||||
|
const res = await fetch('/data/keyword.csv')
|
||||||
|
const text = await res.text()
|
||||||
|
keywords.value = text.split('\n').map(k => k.trim().replace(/,$/, '')).filter(k => k)
|
||||||
|
}
|
||||||
|
catch (e) {
|
||||||
|
console.error('Failed to load keywords:', e)
|
||||||
|
}
|
||||||
|
|
||||||
|
// 从路由参数中获取数据
|
||||||
|
const vidFile = router.currentRoute.value.query.vid_file as string
|
||||||
|
if (vidFile) {
|
||||||
|
// 调用接口获取完整视频路径
|
||||||
|
runApi('/get_full_vid_path', {
|
||||||
|
vid_file: vidFile,
|
||||||
|
}).then((res) => {
|
||||||
|
// console.log('接口调用成功，返回数据：', res)
|
||||||
|
vidUrl.value = (res as string[])[0]
|
||||||
|
|
||||||
|
// 截取文件名
|
||||||
|
const fileName = vidUrl.value.split('\\').pop() || ''
|
||||||
|
// 去掉文件扩展名
|
||||||
|
const fileNameNoExt = fileName.split('.')[0]
|
||||||
|
// 文件扩展名
|
||||||
|
// const fileExt = fileName.split('.')[1]
|
||||||
|
// 临时拼接视频路径
|
||||||
|
vidUrl.value = `http://localhost:8086/${fileNameNoExt}_h264.mp4`
|
||||||
|
})
|
||||||
|
|
||||||
|
// 临时拼接视频路径
|
||||||
|
// 去掉文件扩展名
|
||||||
|
// const fileNameNoExt = vidFile.split('.')[0]
|
||||||
|
// // 文件扩展名
|
||||||
|
// const fileExt = vidFile.split('.')[1]
|
||||||
|
// vidUrl.value = `http://localhost:8086/${fileNameNoExt}_h264.${fileExt}`
|
||||||
|
|
||||||
|
// 调用接口获取隐患数据
|
||||||
|
runApi('/run', {
|
||||||
|
vid_file: vidFile,
|
||||||
|
run_sam3: false,
|
||||||
|
run_inspection: false,
|
||||||
|
gen_report: false,
|
||||||
|
}).then((res) => {
|
||||||
|
console.log('接口调用成功，返回数据：', res[3])
|
||||||
|
resultData.value = (res as any[])[3] as ResultData
|
||||||
|
|
||||||
|
getData()
|
||||||
|
|
||||||
|
if (data.value.隐患列表.length > 0) {
|
||||||
|
handleHazardClick(0)
|
||||||
|
}
|
||||||
|
hazardLoading.value = false
|
||||||
|
})
|
||||||
|
|
||||||
|
runApiAudio('result', 'GET', {
|
||||||
|
path: vidFile,
|
||||||
|
// path: 'VID_20251104_085655_024.AVI',
|
||||||
|
}).then((res) => {
|
||||||
|
getAudioRecData(res as AudioResult)
|
||||||
|
dialogLoading.value = false
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<!-- 最外层容器：占满整个视口 -->
|
||||||
|
<el-container style="margin: 0; height: 100%; flex-direction: column;">
|
||||||
|
<el-header style="height: 30px; display: flex; align-items: center; border-bottom: 1px solid var(--ep-border-color);">
|
||||||
|
<el-breadcrumb separator="/">
|
||||||
|
<el-breadcrumb-item :to="{ path: '/' }">
|
||||||
|
主页
|
||||||
|
</el-breadcrumb-item>
|
||||||
|
<el-breadcrumb-item>隐患检查结果</el-breadcrumb-item>
|
||||||
|
</el-breadcrumb>
|
||||||
|
</el-header>
|
||||||
|
|
||||||
|
<!-- 内层容器：自动填充剩余高度 -->
|
||||||
|
<el-container style="flex: 1; min-height: 0;">
|
||||||
|
<el-aside width="200px" style="border-right: 1px solid var(--ep-border-color);">
|
||||||
|
<el-skeleton v-if="hazardLoading" :rows="5" animated style="padding: 0.75rem; width: calc(100% - 1.5rem);" />
|
||||||
|
<el-scrollbar v-else-if="data.隐患列表.length > 0">
|
||||||
|
<el-row class="flex flex-col">
|
||||||
|
<ItemList title="隐患" :data="data.隐患列表" @click="handleHazardClick" />
|
||||||
|
</el-row>
|
||||||
|
</el-scrollbar>
|
||||||
|
<el-empty v-else description="无隐患数据" style="height: 100%; width: 100%;" />
|
||||||
|
</el-aside>
|
||||||
|
<el-container style="border-right: 1px solid var(--ep-border-color)">
|
||||||
|
<el-main style="border-bottom: 1px solid var(--ep-border-color); padding: 0;">
|
||||||
|
<div class="vid_box">
|
||||||
|
<video
|
||||||
|
ref="videoRef"
|
||||||
|
:src="vidUrl"
|
||||||
|
controls
|
||||||
|
class="video"
|
||||||
|
@timeupdate="updateCurrentFrame"
|
||||||
|
@loadedmetadata="handleVideoLoadedMetadata"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</el-main>
|
||||||
|
<el-footer style="height: 200px; padding: 0px;">
|
||||||
|
<Timeline
|
||||||
|
style="height: 100%;"
|
||||||
|
:current-frame="currentFrame"
|
||||||
|
:total-frames="totalFrames"
|
||||||
|
:hazard-ranges="data.隐患范围字典 as Record<string, { ranges: number[]; level: number; tip: string }>"
|
||||||
|
@hazard-click="(id: number) => handleTimelineHazardClick(id)"
|
||||||
|
@frame-change="handleFrameChange"
|
||||||
|
/>
|
||||||
|
</el-footer>
|
||||||
|
</el-container>
|
||||||
|
<el-aside style="width: 300px;">
|
||||||
|
<el-skeleton v-if="hazardLoading || dialogLoading" :rows="5" animated style="padding: 0.75rem; width: calc(100% - 1.5rem);" />
|
||||||
|
<el-scrollbar v-else-if="selectedHazard >= 0 || data.对话列表.length > 0">
|
||||||
|
<el-row v-if="selectedHazard >= 0" class="px-3 py-2">
|
||||||
|
<el-col>
|
||||||
|
<template v-for="group in groupedFields" :key="group[0].group">
|
||||||
|
<el-row :gutter="12">
|
||||||
|
<el-col v-for="field in group" :key="field.key" :span="24 / group.length">
|
||||||
|
<el-row class="result-title">
|
||||||
|
<el-text type="info" size="small">
|
||||||
|
{{ field.label }}
|
||||||
|
</el-text>
|
||||||
|
</el-row>
|
||||||
|
<el-row class="result-content">
|
||||||
|
<el-text v-if="field.key === '隐患等级' && getFieldValue(field) === '重大隐患'" type="danger">
|
||||||
|
{{ getFieldValue(field) }}
|
||||||
|
</el-text>
|
||||||
|
<el-text v-else-if="field.key === '置信度' && getFieldValue(field) === '疑似'" type="warning">
|
||||||
|
{{ getFieldValue(field) }}
|
||||||
|
</el-text>
|
||||||
|
<el-text v-else>
|
||||||
|
{{ getFieldValue(field) }}
|
||||||
|
</el-text>
|
||||||
|
</el-row>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
<div class="py-1" />
|
||||||
|
</template>
|
||||||
|
<el-row>
|
||||||
|
<el-button style="width: 100%;" @click="handleJumpToHazard(selectedHazard)">
|
||||||
|
跳转到隐患时间点
|
||||||
|
</el-button>
|
||||||
|
</el-row>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
<div v-if="selectedHazard >= 0 && data.对话列表.length > 0" style="width: 100%; border-bottom: 1px solid var(--ep-border-color);" />
|
||||||
|
<el-row v-if="data.对话列表.length > 0" style="height: calc(100% - 400px); flex: auto;">
|
||||||
|
<SubtitleList
|
||||||
|
title="对话"
|
||||||
|
:data="data.对话列表"
|
||||||
|
:current-time="videoCurrentTime"
|
||||||
|
:keywords="keywords"
|
||||||
|
@click="(item: any[]) => handleJumpToTimePoint(Number(item[0]), 'pause')"
|
||||||
|
@play="(item: any[]) => handleJumpToTimePoint(Number(item[0]), 'play')"
|
||||||
|
/>
|
||||||
|
</el-row>
|
||||||
|
<!-- <el-row class="px-1 py-1">
|
||||||
|
<el-button>
|
||||||
|
查看报告
|
||||||
|
</el-button>
|
||||||
|
</el-row> -->
|
||||||
|
</el-scrollbar>
|
||||||
|
<el-empty v-else description="无隐患与对话数据" style="height: 100%; width: 100%;" />
|
||||||
|
</el-aside>
|
||||||
|
</el-container>
|
||||||
|
</el-container>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.vid_box {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
background-color: var(--ep-color-black);
|
||||||
|
}
|
||||||
|
.vid_box video {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: contain; /* 关键：保持比例 + 完整显示 + 自适应父盒子 */
|
||||||
|
}
|
||||||
|
|
||||||
|
.item-btn {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.result-title {
|
||||||
|
padding: 0.25rem 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.result-content {
|
||||||
|
text-align: left;
|
||||||
|
// line-height: 1.5rem;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,11 @@
|
||||||
|
// only scss variables
|
||||||
|
|
||||||
|
$--colors: (
|
||||||
|
'primary': (
|
||||||
|
'base': #589ef8,
|
||||||
|
),
|
||||||
|
);
|
||||||
|
|
||||||
|
@forward 'element-plus/theme-chalk/src/dark/var.scss' with (
|
||||||
|
$colors: $--colors
|
||||||
|
);
|
||||||
|
|
@ -0,0 +1,42 @@
|
||||||
|
$--colors: (
|
||||||
|
'primary': (
|
||||||
|
'base': #409eff,
|
||||||
|
),
|
||||||
|
'success': (
|
||||||
|
'base': #67c23a,
|
||||||
|
),
|
||||||
|
'warning': (
|
||||||
|
'base': #e6a23c,
|
||||||
|
),
|
||||||
|
'danger': (
|
||||||
|
'base': #f56c6c,
|
||||||
|
),
|
||||||
|
'error': (
|
||||||
|
'base': #db2828,
|
||||||
|
),
|
||||||
|
'info': (
|
||||||
|
'base': #909399,
|
||||||
|
),
|
||||||
|
);
|
||||||
|
|
||||||
|
// we can add this to custom namespace, default is 'el'
|
||||||
|
@forward 'element-plus/theme-chalk/src/mixins/config.scss' with (
|
||||||
|
$namespace: 'ep'
|
||||||
|
);
|
||||||
|
|
||||||
|
// You should use them in scss, because we calculate it by sass.
|
||||||
|
// comment next lines to use default color
|
||||||
|
@forward 'element-plus/theme-chalk/src/common/var.scss' with (
|
||||||
|
// do not use same name, it will override.
|
||||||
|
$colors: $--colors,
|
||||||
|
$button-padding-horizontal: ('default': 50px)
|
||||||
|
);
|
||||||
|
|
||||||
|
// if you want to import all
|
||||||
|
// @use "element-plus/theme-chalk/src/index.scss" as *;
|
||||||
|
|
||||||
|
// You can comment it to hide debug info.
|
||||||
|
// @debug $--colors;
|
||||||
|
|
||||||
|
// custom dark variables
|
||||||
|
@use './dark.scss';
|
||||||
|
|
@ -0,0 +1,41 @@
|
||||||
|
// import dark theme
|
||||||
|
@use 'element-plus/theme-chalk/src/dark/css-vars.scss' as *;
|
||||||
|
|
||||||
|
// :root {
|
||||||
|
// --ep-color-primary: red;
|
||||||
|
// }
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family:
|
||||||
|
Inter, system-ui, Avenir, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei',
|
||||||
|
'微软雅黑', Arial, sans-serif;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: var(--ep-color-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
code {
|
||||||
|
border-radius: 2px;
|
||||||
|
padding: 2px 4px;
|
||||||
|
background-color: var(--ep-color-primary-light-9);
|
||||||
|
color: var(--ep-color-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
#nprogress {
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#nprogress .bar {
|
||||||
|
background: rgb(13, 148, 136);
|
||||||
|
opacity: 0.75;
|
||||||
|
position: fixed;
|
||||||
|
z-index: 1031;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 2px;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,24 @@
|
||||||
|
/* eslint-disable */
|
||||||
|
/* prettier-ignore */
|
||||||
|
// @ts-nocheck
|
||||||
|
// Generated by unplugin-vue-router. ‼️ DO NOT MODIFY THIS FILE ‼️
|
||||||
|
// It's recommended to commit this file.
|
||||||
|
// Make sure to add this file to your tsconfig.json file as an "includes" or "files" entry.
|
||||||
|
|
||||||
|
declare module 'vue-router/auto-routes' {
|
||||||
|
import type {
|
||||||
|
RouteRecordInfo,
|
||||||
|
ParamValue,
|
||||||
|
ParamValueOneOrMore,
|
||||||
|
ParamValueZeroOrMore,
|
||||||
|
ParamValueZeroOrOne,
|
||||||
|
} from 'vue-router'
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Route name map generated by unplugin-vue-router
|
||||||
|
*/
|
||||||
|
export interface RouteNamedMap {
|
||||||
|
'/': RouteRecordInfo<'/', '/', Record<never, never>, Record<never, never>>,
|
||||||
|
'/nav/HazardCheckResult/': RouteRecordInfo<'/nav/HazardCheckResult/', '/nav/HazardCheckResult', Record<never, never>, Record<never, never>>,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,3 @@
|
||||||
|
import type { ViteSSGContext } from 'vite-ssg'
|
||||||
|
|
||||||
|
export type UserModule = (ctx: ViteSSGContext) => void
|
||||||
|
|
@ -0,0 +1,27 @@
|
||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"target": "esnext",
|
||||||
|
"jsx": "preserve",
|
||||||
|
"lib": ["esnext", "dom"],
|
||||||
|
"useDefineForClassFields": true,
|
||||||
|
"baseUrl": ".",
|
||||||
|
"module": "esnext",
|
||||||
|
"moduleResolution": "bundler",
|
||||||
|
"paths": {
|
||||||
|
"~/*": ["src/*"]
|
||||||
|
},
|
||||||
|
"resolveJsonModule": true,
|
||||||
|
"types": [
|
||||||
|
"vite/client",
|
||||||
|
"unplugin-vue-router/client"
|
||||||
|
],
|
||||||
|
"strict": true,
|
||||||
|
"sourceMap": true,
|
||||||
|
"esModuleInterop": true,
|
||||||
|
"skipLibCheck": true
|
||||||
|
},
|
||||||
|
"vueCompilerOptions": {
|
||||||
|
"target": 3
|
||||||
|
},
|
||||||
|
"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue", "src/components/hazard_inspect/timeline/timeline.js"]
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,37 @@
|
||||||
|
import {
|
||||||
|
defineConfig,
|
||||||
|
presetAttributify,
|
||||||
|
presetIcons,
|
||||||
|
presetTypography,
|
||||||
|
presetUno,
|
||||||
|
presetWebFonts,
|
||||||
|
transformerDirectives,
|
||||||
|
transformerVariantGroup,
|
||||||
|
} from 'unocss'
|
||||||
|
|
||||||
|
export default defineConfig({
|
||||||
|
shortcuts: [
|
||||||
|
['btn', 'px-4 py-1 rounded inline-block bg-teal-700 text-white cursor-pointer !outline-none hover:bg-teal-800 disabled:cursor-default disabled:bg-gray-600 disabled:opacity-50'],
|
||||||
|
['icon-btn', 'inline-block cursor-pointer select-none opacity-75 transition duration-200 ease-in-out hover:opacity-100 hover:text-teal-600'],
|
||||||
|
],
|
||||||
|
presets: [
|
||||||
|
presetUno(),
|
||||||
|
presetAttributify(),
|
||||||
|
presetIcons({
|
||||||
|
scale: 1.2,
|
||||||
|
}),
|
||||||
|
presetTypography(),
|
||||||
|
presetWebFonts({
|
||||||
|
fonts: {
|
||||||
|
sans: 'DM Sans',
|
||||||
|
serif: 'DM Serif Display',
|
||||||
|
mono: 'DM Mono',
|
||||||
|
},
|
||||||
|
}),
|
||||||
|
],
|
||||||
|
transformers: [
|
||||||
|
transformerDirectives(),
|
||||||
|
transformerVariantGroup(),
|
||||||
|
],
|
||||||
|
safelist: 'prose prose-sm m-auto text-left'.split(' '),
|
||||||
|
})
|
||||||
|
|
@ -0,0 +1,59 @@
|
||||||
|
import path from 'node:path'
|
||||||
|
import Vue from '@vitejs/plugin-vue'
|
||||||
|
|
||||||
|
import Unocss from 'unocss/vite'
|
||||||
|
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
|
||||||
|
import Components from 'unplugin-vue-components/vite'
|
||||||
|
import VueRouter from 'unplugin-vue-router/vite'
|
||||||
|
|
||||||
|
import { defineConfig } from 'vite'
|
||||||
|
|
||||||
|
// https://vitejs.dev/config/
|
||||||
|
export default defineConfig({
|
||||||
|
resolve: {
|
||||||
|
alias: {
|
||||||
|
'~/': `${path.resolve(__dirname, 'src')}/`,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
css: {
|
||||||
|
preprocessorOptions: {
|
||||||
|
scss: {
|
||||||
|
additionalData: `@use "~/styles/element/index.scss" as *;`,
|
||||||
|
api: 'modern-compiler',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
plugins: [
|
||||||
|
Vue(),
|
||||||
|
|
||||||
|
// https://github.com/posva/unplugin-vue-router
|
||||||
|
VueRouter({
|
||||||
|
extensions: ['.vue', '.md'],
|
||||||
|
dts: 'src/typed-router.d.ts',
|
||||||
|
}),
|
||||||
|
|
||||||
|
Components({
|
||||||
|
// allow auto load markdown components under `./src/components/`
|
||||||
|
extensions: ['vue', 'md'],
|
||||||
|
// allow auto import and register components used in markdown
|
||||||
|
include: [/\.vue$/, /\.vue\?vue/, /\.md$/],
|
||||||
|
resolvers: [
|
||||||
|
ElementPlusResolver({
|
||||||
|
importStyle: 'sass',
|
||||||
|
}),
|
||||||
|
],
|
||||||
|
dts: 'src/components.d.ts',
|
||||||
|
}),
|
||||||
|
|
||||||
|
// https://github.com/antfu/unocss
|
||||||
|
// see uno.config.ts for config
|
||||||
|
Unocss(),
|
||||||
|
],
|
||||||
|
|
||||||
|
ssr: {
|
||||||
|
// TODO: workaround until they support native ESM
|
||||||
|
noExternal: ['element-plus'],
|
||||||
|
},
|
||||||
|
})
|
||||||
Loading…
Reference in New Issue