工業日志AI大模型智能分析系統-前端實現

目錄

主要架構

前端項目結構

1. 核心實現代碼

1.1 API服務封裝 (src/api/log.ts)

1.2 TS類型定義 (src/types/api.ts)

1.3 Pinia狀態管理 (src/stores/logStore.ts)

1.4 日志分析頁面 (src/views/LogAnalysis.vue)

1.5 日志詳情組件 (src/components/LogDetail.vue)

2. 項目配置

2.1 Vite配置 (vite.config.ts)

2.2 Element Plus按需導入 (src/main.ts)

3. 路由配置 (src/router/index.ts)

4. 環境變量配置 (.env.development)

5. 系統功能演示

5.1 主界面及歷史記錄頁面

5.2 主要工作流

6. 關鍵集成點

前后端通信

狀態管理

UI組件

類型安全

備注參考來源


主要架構:

???前端:?Vue 3 + TypeScript + Element Plus(本篇介紹)

? ?其他:LangGraph、LangChain、Django、向量數據庫、Ollama、Mysql/Postgres數據庫等

環境搭建參考另一篇博客:?Vue3 基礎教程-CSDN博客

前端項目結構

frontend/
├── public/                  # 靜態資源
├── src/
│   ├── api/                # API接口
│   ├── assets/             # 靜態資源
│   ├── components/         # 通用組件
│   ├── router/             # 路由配置
│   ├── stores/             # Pinia狀態管理
│   ├── types/              # TS類型定義
│   ├── views/              # 頁面組件
│   ├── App.vue             # 根組件
│   └── main.ts             # 入口文件
├── tsconfig.json           # TypeScript配置
├── vite.config.ts          # Vite配置
└── package.json

1. 核心實現代碼

1.1 API服務封裝 (src/api/log.ts)
import axios from 'axios'
import type { LogAnalysisRequest, LogAnalysisResponse } from '@/types/api'const apiClient = axios.create({baseURL: import.meta.env.VITE_API_BASE_URL,timeout: 10000
})export const logService = {async analyzeLog(logData: string): Promise<LogAnalysisResponse> {const response = await apiClient.post<LogAnalysisResponse>('/api/analyze', {log: logData})return response.data},async getRecentLogs(page = 1, pageSize = 10) {return apiClient.get('/api/logs', {params: { page, pageSize }})}
}
1.2 TS類型定義 (src/types/api.ts)
export interface LogAnalysisRequest {log: string
}export interface LogAnalysisResponse {log_id: numbersolution: {description: stringsteps: string[]confidence: number}
}export interface LogRecord {id: numberraw_message: stringcomponent: string | nullsource: string | nulltimestamp: stringsolution?: {description: stringsteps: string[]}
}
1.3 Pinia狀態管理 (src/stores/logStore.ts)
import { defineStore } from 'pinia'
import { logService } from '@/api/log'
import type { LogAnalysisResponse, LogRecord } from '@/types/api'interface LogState {analysisResult: LogAnalysisResponse | nullhistory: LogRecord[]isLoading: boolean
}export const useLogStore = defineStore('log', {state: (): LogState => ({analysisResult: null,history: [],isLoading: false}),actions: {async analyzeLog(logData: string) {this.isLoading = truetry {this.analysisResult = await logService.analyzeLog(logData)await this.loadHistory()} finally {this.isLoading = false}},async loadHistory(page = 1) {const response = await logService.getRecentLogs(page)this.history = response.data.results}}
})
1.4 日志分析頁面 (src/views/LogAnalysis.vue)
<template><div class="log-analysis-container"><el-card shadow="hover"><template #header><div class="card-header"><span>工業設備日志分析</span></div></template><el-form @submit.prevent="handleSubmit"><el-form-item label="日志內容"><el-inputv-model="logInput"type="textarea":rows="5"placeholder="粘貼設備日志內容..."clearable/></el-form-item><el-form-item><el-buttontype="primary":loading="store.isLoading"native-type="submit">分析日志</el-button></el-form-item></el-form><el-divider /><template v-if="store.analysisResult"><h3>分析結果</h3><el-alert:title="store.analysisResult.solution.description"type="success":closable="false"/><el-steps direction="vertical" :active="store.analysisResult.solution.steps.length"class="solution-steps"><el-stepv-for="(step, index) in store.analysisResult.solution.steps":key="index":title="`步驟 ${index + 1}`":description="step"/></el-steps><el-tag type="info">置信度: {{ (store.analysisResult.solution.confidence * 100).toFixed(1) }}%</el-tag></template></el-card><el-card shadow="hover" class="history-card"><template #header><div class="card-header"><span>歷史記錄</span><el-button @click="store.loadHistory()">刷新</el-button></div></template><el-table :data="store.history" stripe><el-table-column prop="timestamp" label="時間" width="180" /><el-table-column prop="component" label="部件" width="120" /><el-table-column prop="source" label="來源" width="150" /><el-table-column prop="raw_message" label="日志內容" show-overflow-tooltip /><el-table-column label="操作" width="120"><template #default="{ row }"><el-button size="small" @click="showDetail(row)">詳情</el-button></template></el-table-column></el-table></el-card><el-dialog v-model="detailVisible" title="日志詳情"><log-detail :log="currentLog" /></el-dialog></div>
</template><script setup lang="ts">
import { ref } from 'vue'
import { useLogStore } from '@/stores/logStore'
import LogDetail from '@/components/LogDetail.vue'const store = useLogStore()
const logInput = ref('')
const detailVisible = ref(false)
const currentLog = ref<any>(null)const handleSubmit = async () => {if (!logInput.value.trim()) returnawait store.analyzeLog(logInput.value)
}const showDetail = (log: any) => {currentLog.value = logdetailVisible.value = true
}// 初始化加載歷史記錄
store.loadHistory()
</script><style scoped>
.log-analysis-container {max-width: 1200px;margin: 0 auto;padding: 20px;
}.history-card {margin-top: 20px;
}.solution-steps {margin: 20px 0;padding-left: 20px;
}
</style>
1.5 日志詳情組件 (src/components/LogDetail.vue)
<template><div v-if="log" class="log-detail"><el-descriptions :column="2" border><el-descriptions-item label="日志ID">{{ log.id }}</el-descriptions-item><el-descriptions-item label="記錄時間">{{ formatDateTime(log.timestamp) }}</el-descriptions-item><el-descriptions-item label="部件"><el-tag :type="getComponentTagType(log.component)">{{ log.component || '未知' }}</el-tag></el-descriptions-item><el-descriptions-item label="來源">{{ log.source || '未知' }}</el-descriptions-item></el-descriptions><el-divider /><h4>原始日志內容</h4><el-inputtype="textarea":model-value="log.raw_message"readonly:rows="5"resize="none"class="log-content"/><template v-if="log.solution"><el-divider /><h4>解決方案</h4><el-alert:title="log.solution.description"type="success":closable="false"class="solution-alert"/><el-steps direction="vertical" :active="log.solution.steps.length" class="solution-steps"><el-stepv-for="(step, index) in log.solution.steps":key="index":title="`步驟 ${index + 1}`":description="step"/></el-steps></template></div>
</template><script setup lang="ts">
import { formatDateTime, getComponentTagType } from '@/utils/common'defineProps<{log: any
}>()
</script><style scoped>
.log-detail {padding: 10px;
}.log-content {margin-top: 10px;
}.solution-alert {margin: 15px 0;
}.solution-steps {margin-top: 20px;padding-left: 20px;
}
</style>

2. 項目配置

2.1 Vite配置 (vite.config.ts)
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'export default defineConfig({plugins: [vue()],resolve: {alias: {'@': path.resolve(__dirname, './src')}},server: {proxy: {'/api': {target: 'http://localhost:8000',  // Django后端地址changeOrigin: true}}}
})
2.2 Element Plus按需導入 (src/main.ts)
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import { createPinia } from 'pinia'import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'const app = createApp(App)app.use(createPinia())
app.use(router)
app.use(ElementPlus)app.mount('#app')
3. 路由配置 (src/router/index.ts)
import { createRouter, createWebHistory } from 'vue-router'
import LogAnalysis from '@/views/LogAnalysis.vue'const router = createRouter({history: createWebHistory(import.meta.env.BASE_URL),routes: [{path: '/',name: 'home',component: LogAnalysis},{path: '/history',name: 'history',component: () => import('@/views/LogHistory.vue')}]
})export default router

4. 環境變量配置 (.env.development)

VITE_API_BASE_URL=/
VITE_APP_TITLE=工業設備智能運維系統

5. 系統功能演示

5.1 主界面及歷史記錄頁面

首頁分析頁面

歷史記錄頁面

5.2 主要工作流
  1. 用戶粘貼錯誤日志:
  1. xxx restoration fail,x.x.x.x not in "0.0.0.0" error.
  2. 點擊"分析日志"按鈕
  3. 系統顯示:
  • 解決方案:"重新...操作..."
  • 詳細步驟:4步操作指南("1. 關閉xxx" "2. 找到xxx" "3. 重新xxx" "4. 重啟xxx")
  • 置信度:92%

6. 關鍵集成點

  • 前后端通信:
  1. 通過Axios封裝API調用
  2. 使用Vite代理解決跨域
  • 狀態管理
  1. Pinia集中管理分析結果和歷史記錄
  2. 類型安全的TypeScript接口
  • UI組件
  1. Element Plus的Form、Table、Steps等組件
  2. 響應式布局適應不同屏幕
  • 類型安全
  1. 所有API接口都有TS類型定義
  2. 組件Props類型檢查

備注參考來源:

萬能的deepseek...

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/913471.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/913471.shtml
英文地址,請注明出處:http://en.pswp.cn/news/913471.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

C++內存泄漏排查

引言 C內存泄漏問題的普遍性與危害內存泄漏排查大賽的背景與目標文章結構和主要內容概述 內存泄漏的基本概念 內存泄漏的定義與類型&#xff08;顯式、隱式、循環引用等&#xff09;C中常見的內存泄漏場景&#xff08;指針管理不當、資源未釋放等&#xff09;內存泄漏對程序性能…

20250706-4-Docker 快速入門(上)-常用容器管理命令_筆記

一、常用管理命令1. 選項&#xfeff;&#xfeff;1&#xff09;ls&#xfeff;功能&#xff1a;列出容器常用參數&#xff1a;-a&#xff1a;查看所有容器包含退出的-q&#xff1a;列出所有容器ID-l&#xff1a;列出最新創建的容器狀態使用技巧&#xff1a;容器很多時使用dock…

基于 Camunda BPM 的工作流引擎示例項目

項目介紹 這是一個基于 Camunda BPM 的工作流引擎示例項目&#xff0c;包含完整的后臺接口和前端頁面&#xff0c;實現了流程的設計、部署、執行等核心功能。 技術棧 后端 Spring Boot 2.7.9Camunda BPM 7.18.0MySQL 8.0JDK 1.8 前端 Vue 3Element PlusBpmn.jsVite 功能…

Day06_刷題niuke20250707

試卷01&#xff1a; 單選題 C 1. 在C中,一個程序無論由多少個源程序文件組成,其中有且僅有一個主函數main().說法是否正確&#xff1f; A 正確 B 錯誤 正確答案&#xff1a;A 官方解析&#xff1a; 在C程序設計中,一個完整的程序確實有且僅有一個main函數作為程序的入口點,這…

洛谷 P5788 【模板】單調棧

題目背景模板題&#xff0c;無背景。2019.12.12 更新數據&#xff0c;放寬時限&#xff0c;現在不再卡常了。題目描述給出項數為 n 的整數數列 a1…n?。定義函數 f(i) 代表數列中第 i 個元素之后第一個大于 ai? 的元素的下標&#xff0c;即 f(i)mini<j≤n,aj?>ai??{…

linux系統運行時_安全的_備份_還原_方法rsync

1.問題與需求 問題: 新部署的機器設備(主控RK3588), 沒有經過燒錄定制鏡像, 研發部署, 直接組裝發送到客戶現場需要通過frpc遠程部署: 安裝ros2 python包 docker鏡像 環境配置 自啟動配置 SN設備信息寫自動部署腳本, 實現一鍵部署升級無奈物聯網卡做了白名單限制, apt 和…

18套精美族譜Excel模板,助力家族文化傳承!

【資源分享】18套精美族譜Excel模板&#xff0c;助力家族文化傳承&#xff01; &#x1f3af; 本文分享一套完整的家族譜系資源&#xff0c;包含18個精心設計的Excel模板&#xff0c;從基礎模板到專業圖表&#xff0c;滿足各類家族的族譜制作需求。 一、為什么要制作族譜&…

MySQL Galera Cluster企業級部署

一、MySQL Galera Cluster簡介 主要特點 同步復制&#xff1a; 所有的寫操作&#xff08;包括插入、更新、刪除&#xff09;在集群中的所有節點上都是同步的。這意味著每個節點上的數據是完全一致的。 多主節點&#xff1a; 集群中的每個節點都是主節點。所有節點都可以處理讀…

HTTP 重定向

什么是 HTTP 重定向&#xff1f; HTTP 重定向&#xff08;HTTP Redirect&#xff09; 是服務器向客戶端&#xff08;通常是瀏覽器&#xff09;發出的指令&#xff0c;告訴客戶端某個請求的資源已被移到新的位置。重定向通常通過發送一個特殊的 HTTP 狀態碼&#xff08;例如 3x…

本地加載非在線jar包設置

項目中存在私有jar包&#xff0c;提示在線獲取不到&#xff0c;需要先獲取到完整的jar包在打進maven中再在項目中進行maven依賴引入 mvn install:install-file -DfileD:\tools\maven\apache-maven-3.5.2\local_repository2\org\ahjk\SixCloudCommon\1.0\SixCloudCommon-1.0-SN…

Codeforces Round 979 (Div. 2)

A c[1]-b[1]0&#xff0c;之后每個c[1]-b[1]最大都是maxa-mina&#xff0c;最大和最小放前兩個 B ans2^(a1)-2^s-1&#xff0c;1一個最小 C 我們可以把式子化為(....)||(....)||(....)括號里沒有||&#xff0c;如果括號全是1那么A贏&#xff0c;A盡量選擇把1選在一起 D …

UI前端大數據處理性能瓶頸突破:分布式計算框架的應用

hello寶子們...我們是艾斯視覺擅長ui設計、前端開發、數字孿生、大數據、三維建模、三維動畫10年經驗!希望我的分享能幫助到您!如需幫助可以評論關注私信我們一起探討!致敬感謝感恩!一、引言&#xff1a;前端大數據處理的性能困境與破局之路在數據爆炸增長的時代&#xff0c;UI…

病蟲害數據集

數據是泰迪杯主辦方提供的已經標記好的數據&#xff0c;4k畫質的圖片&#xff0c;總大小8個G 鏈接&#xff1a;https://pan.baidu.com/s/1fvmNHGrLvflEovjfCjDLOw?pwd6666 提取碼&#xff1a;6666 蟲害包括&#xff1a; 八點灰燈蛾 褐飛虱屬 白背飛虱 二化螟 蟋蟀 黃足…

JAVA基礎:關于JDK環境變量設置的若干相關細節及注意事項

一、JDK下載安裝 網址&#xff1a;https://www.oracle.com/java/technologies/downloads/ 以 win11 為例&#xff0c;根據網址下載安裝包后&#xff0c;點擊安裝&#xff0c;注意設置安裝路徑 二、基礎常識 1.Java三大使用平臺 Java SE(Java Standard Edition): 標準版&…

C++高頻知識點(四)

文章目錄 16. 虛基類要解決什么問題&#xff1f;17. C中如何進行類型轉換操作&#xff1f;列舉并解釋四種類型轉換方式。18. 什么是函數重載&#xff1f;如何進行函數重載&#xff1f;19. 解釋C中的友元函數和友元類&#xff0c;并解釋其使用場景。友元函數友元類 20. 請解釋C中…

【Servlet資源轉發介紹】

文章目錄 前言一、Servlet 資源轉發是什么&#xff1f;1. 為什么要資源轉發&#xff1f; 二、資源轉發 vs 重定向三、如何使用 RequestDispatcher 進行資源轉發1. 引入依賴2. 獲取 RequestDispatcher3. forward 示例4. include 示例JSP 中 include 指令或動作Servlet 中 includ…

牛客周賽 Round 99題解

Round 99 思路&#xff1a;我們之間去用字符串去統計即可&#xff0c;輸入一個字符串&#xff0c;看相鄰有沒有99即可 #include<bits/stdc.h> using namespace std; #define int long long string s; signed main() {cin>>s;int ns.size();for(int i1;i<n;i){i…

AR 如何改變我們構建網站的方式

想坐在沙發上試鞋子&#xff1f;歡迎來到 Web AR 的世界。還記得你在網頁上逛商城時&#xff0c;點擊一副墨鏡&#xff0c;然后鏡頭打開&#xff0c;它就自動出現在你臉上的那一瞬間嗎&#xff1f;不需要下載 App&#xff0c;不需要跳轉&#xff0c;只需一個瀏覽器。這不是科幻…

華為OD機試 2025B卷 - 貨幣單位轉換(C++PythonJAVAJSC語言)

2025B卷目錄點擊查看: 華為OD機試2025B卷真題題庫目錄|機考題庫 + 算法考點詳解 2025B卷 100分題型 題目描述 記賬本上記錄了若干條多國貨幣金額,需要轉換成人民幣分(fen),匯總后輸出。 每行記錄一條金額,金額帶有貨幣單位,格式為數字+單位,可能是單獨元,或者單獨分…

php協程

開發需求:在一套老項目中&#xff08;fastadmin&#xff09;實現一個定時任務&#xff0c;每分鐘訪問幾十個接口&#xff0c;拿到數據。 使用的swoole&#xff0c;在thinkphp5中實現協程。啟動命令php swoole.php <?php //chdir(__DIR__); define(APP_PATH, __DIR__ . /app…