diff --git a/ALOps_sys_fe/alops-ui/package.json b/ALOps_sys_fe/alops-ui/package.json index 77b1102f..aa33ef61 100644 --- a/ALOps_sys_fe/alops-ui/package.json +++ b/ALOps_sys_fe/alops-ui/package.json @@ -29,6 +29,7 @@ "axios": "0.28.1", "clipboard": "2.0.8", "core-js": "3.37.1", + "dayjs": "^1.11.18", "echarts": "5.4.0", "element-ui": "2.15.14", "file-saver": "2.0.5", @@ -37,6 +38,7 @@ "js-beautify": "1.13.0", "js-cookie": "3.0.1", "jsencrypt": "3.0.0-rc.1", + "lodash": "^4.17.21", "nprogress": "0.2.0", "quill": "2.0.2", "screenfull": "5.0.2", diff --git a/ALOps_sys_fe/alops-ui/src/api/QandA/knowledge.js b/ALOps_sys_fe/alops-ui/src/api/QandA/knowledge.js index 91a87d42..e3551bfd 100644 --- a/ALOps_sys_fe/alops-ui/src/api/QandA/knowledge.js +++ b/ALOps_sys_fe/alops-ui/src/api/QandA/knowledge.js @@ -30,16 +30,19 @@ export function uploadedFilesList(query) { // 新增 export function add(data) { return request({ - url: api + 'upload', + url: api + '/upload', method: 'post', - data: data + data: data, + headers: { + 'Content-Type': 'multipart/form-data' + } }) } // 修改 export function update(data) { return request({ - url: api + 'upload', + url: api + '/update-knowledge', method: 'put', data: data }) diff --git a/ALOps_sys_fe/alops-ui/src/api/device/deviceType.js b/ALOps_sys_fe/alops-ui/src/api/device/deviceType.js index 3bcafb5d..80f2042b 100644 --- a/ALOps_sys_fe/alops-ui/src/api/device/deviceType.js +++ b/ALOps_sys_fe/alops-ui/src/api/device/deviceType.js @@ -1,4 +1,5 @@ import request from '@/utils/request' +import { parseStrEmpty } from "@/utils/ruoyi"; const api = '/device/deviceType/' // 查询详细 @@ -18,6 +19,15 @@ export function list(query) { }) } +// 历史预警 +export function history(query) { + return request({ + url: '/inMonitoring/alertmessage/', + method: 'get', + params: query + }) +} + // 新增 export function add(data) { return request({ diff --git a/ALOps_sys_fe/alops-ui/src/api/inMonitoring/devicesState.js b/ALOps_sys_fe/alops-ui/src/api/inMonitoring/devicesState.js index ffac4566..c2558038 100644 --- a/ALOps_sys_fe/alops-ui/src/api/inMonitoring/devicesState.js +++ b/ALOps_sys_fe/alops-ui/src/api/inMonitoring/devicesState.js @@ -2,7 +2,7 @@ import request from '@/utils/request' import { parseStrEmpty } from "@/utils/ruoyi"; const api = '/device/files/' -// 查询多台设备列表 +// 查询多台设备列表-s首页 export function list(query) { return request({ url: api + 'monitorById', @@ -11,6 +11,15 @@ export function list(query) { }) } +// 查询多台设备列表-s首页 +export function monitorpageList(query) { + return request({ + url: api + 'monitorpage', + method: 'get', + params: query + }) +} + // 查询单台设备 export function getInfo(id) { return request({ diff --git a/ALOps_sys_fe/alops-ui/src/views/QandA/knowledge/index.vue b/ALOps_sys_fe/alops-ui/src/views/QandA/knowledge/index.vue index b424e211..8d9d07eb 100644 --- a/ALOps_sys_fe/alops-ui/src/views/QandA/knowledge/index.vue +++ b/ALOps_sys_fe/alops-ui/src/views/QandA/knowledge/index.vue @@ -14,13 +14,15 @@ - - - - - + + + @@ -41,19 +43,13 @@ - - + + - - - - - - - - + + @@ -178,7 +174,7 @@ export default { }, upImage(fileList){ console.log(fileList) - this.form.fileUrl = fileList + this.form.file = fileList }, @@ -235,18 +231,25 @@ export default { submitForm: function() { this.$refs["form"].validate(valid => { if (valid) { + const formData = new FormData(); + formData.append("source", this.form.source) + formData.append("description", this.form.description) + formData.append("file", this.form.file) + + + if (this.form.id != undefined) { - update(this.form).then(response => { + update(formData).then(response => { this.$modal.msgSuccess("修改成功") this.open = false this.getList() }) } else { - add(this.form).then(response => { + add(formData).then(response => { this.$modal.msgSuccess("新增成功") this.open = false this.getList() - }) + }).catch(error => console.error('上传失败', error)); } } }) diff --git a/ALOps_sys_fe/alops-ui/src/views/inMonitoring/devicesState/cardItem.vue b/ALOps_sys_fe/alops-ui/src/views/inMonitoring/devicesState/cardItem.vue index fa4311d4..2185599c 100644 --- a/ALOps_sys_fe/alops-ui/src/views/inMonitoring/devicesState/cardItem.vue +++ b/ALOps_sys_fe/alops-ui/src/views/inMonitoring/devicesState/cardItem.vue @@ -18,7 +18,7 @@
- +
@@ -101,6 +101,7 @@ export default { }, data() { return { + baseUrl: process.env.VUE_APP_BASE_API } }, mounted() { diff --git a/ALOps_sys_fe/alops-ui/src/views/inMonitoring/devicesState/detail.vue b/ALOps_sys_fe/alops-ui/src/views/inMonitoring/devicesState/detail.vue index 4204f890..d99dfd45 100644 --- a/ALOps_sys_fe/alops-ui/src/views/inMonitoring/devicesState/detail.vue +++ b/ALOps_sys_fe/alops-ui/src/views/inMonitoring/devicesState/detail.vue @@ -16,7 +16,7 @@
- +
@@ -158,16 +158,17 @@ 设备运行数据 + v-model="DateValue" + type="datetimerange" + value-format="yyyy-MM-dd hh:mm:ss" + range-separator="至" + start-placeholder="开始日期" + end-placeholder="结束日期" + @change="handleDateChange">
-
@@ -182,7 +183,7 @@
- +
@@ -195,6 +196,7 @@ import { getInfo, historyQuery } from "@/api/inMonitoring/devicesState" import * as echarts from 'echarts' +import dayjs from 'dayjs'; require('echarts/theme/macarons') // echarts theme import History from './history.vue' export default { @@ -202,7 +204,7 @@ export default { components: { History }, data() { return { - dateRange: [], + DateValue: [dayjs().subtract(1, 'month').format('YYYY-MM-DD HH:mm:ss'),dayjs().format('YYYY-MM-DD HH:mm:ss')], selectedTab: 1, tabs: [ { name: '历史预警' }, @@ -211,35 +213,35 @@ export default { { name: '路由表信息' }, ], tabIndex: 0, + dsId:'', details: {}, historyQueryList: { - minTime: '', - maxTime: '', + maxTime:dayjs().format('YYYY-MM-DD HH:mm:ss'), + minTime:dayjs().subtract(1, 'month').format('YYYY-MM-DD HH:mm:ss'), pageNum: 1, pageSize: 1000, }, - - - - + baseUrl: process.env.VUE_APP_BASE_API } }, mounted() { let routeList = this.$route.params; - this.initCharts(); - this.getInfoFun(routeList.id) - this.gethistoryQuery(routeList.id) + let dsId = routeList.id; + console.log("%c ⚓: mounted -> dsId ", "font-size:16px;background-color:#8f8576;color:white;", dsId) + this.getInfoFun(dsId) + this.gethistoryQuery(dsId) }, methods: { initCharts() { // 性能图表 + let details = this.details; const performanceChart = echarts.init(document.getElementById('performanceChart')); performanceChart.setOption({ tooltip: { trigger: 'axis' }, legend: { - data: ['CPU使用率', '内存使用率'], + data: ['CPU使用率', '内存使用率', '健康度', '设备温度'], textStyle: { color: '#718096' } @@ -253,7 +255,7 @@ mounted() { xAxis: { type: 'category', boundaryGap: false, - data: ['00:00', '04:00', '08:00', '12:00', '16:00', '20:00', '24:00'], + data: [...details.timeList], axisLine: { lineStyle: { color: '#cbd5e0' @@ -280,12 +282,20 @@ mounted() { } } }, + dataZoom: [ + { + type: 'inside', // 内部滚轮控制 + xAxisIndex: 0, + start: 0, + end: 50 + } + ], series: [ { name: 'CPU使用率', type: 'line', smooth: true, - data: [45, 52, 38, 66, 58, 62, 48], + data: [...details.cpuList], lineStyle: { color: '#ed8936' }, @@ -311,7 +321,7 @@ mounted() { name: '内存使用率', type: 'line', smooth: true, - data: [30, 45, 35, 50, 42, 38, 32], + data: [...details.memoryList], lineStyle: { color: '#4299e1' }, @@ -332,81 +342,26 @@ mounted() { }] } } - } - ] - }); - - - // 流量图表 - const trafficChart = echarts.init(document.getElementById('trafficChart')); - trafficChart.setOption({ - tooltip: { - trigger: 'axis', - axisPointer: { - type: 'shadow' - } - }, - legend: { - data: ['入站流量', '出站流量'], - textStyle: { - color: '#718096' - } - }, - grid: { - left: '3%', - right: '4%', - bottom: '3%', - containLabel: true - }, - xAxis: { - type: 'category', - data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'], - axisLine: { - lineStyle: { - color: '#cbd5e0' - } - }, - axisLabel: { - color: '#718096' - } - }, - yAxis: { - type: 'value', - name: 'MB/s', - axisLine: { - lineStyle: { - color: '#cbd5e0' - } - }, - axisLabel: { - color: '#718096' }, - splitLine: { - lineStyle: { - color: 'rgba(203, 213, 224, 0.6)' - } - } - }, - series: [ + { - name: '入站流量', + name: '健康度', type: 'bar', - data: [320, 332, 301, 334, 390, 330, 320], + data: [...details.healthList], itemStyle: { color: '#4299e1' } }, { - name: '出站流量', + name: '设备温度', type: 'bar', - data: [220, 182, 191, 234, 290, 330, 310], + data: [...details.temperatureList], itemStyle: { color: '#ed8936' } } ] }); - // 响应窗口大小变化 window.addEventListener('resize', function() { performanceChart.resize(); @@ -424,6 +379,7 @@ mounted() { }, /** 设备管理基本信息（获取设备指定时间段内的历史监控信息） */ gethistoryQuery(id) { + console.log("%c 🖼️: gethistoryQuery -> id ", "font-size:16px;background-color:#c07203;color:white;", id) this.loading = true let queryForm = { id: id, @@ -431,11 +387,16 @@ mounted() { } historyQuery(queryForm).then(response => { this.details = response.data - this.loading = false + this.loading = false + this.initCharts(); } ) }, - + handleDateChange(date) { + this.historyQueryList.minTime = date[0] + this.historyQueryList.maxTime = date[1] + this.gethistoryQuery(this.$route.params.id) + } } } @@ -585,11 +546,23 @@ mounted() { color: #4299e1; opacity: 0.8; } + .device-icon{ + width: 100%; + } .device-info { display: flex; flex-direction:column; - gap: 15px; + background: linear-gradient(135deg, #edf2f7, #e2e8f0); + border-radius: 12px; + border: 1px solid rgba(226, 232, 240, 0.8); + transition: all 0.3s ease; + } + .device-info:hover { + background: rgba(255, 255, 255, 0.9); + border-color: rgba(66, 153, 225, 0.3); + transform: translateY(-2px); + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); } .info-title { @@ -597,24 +570,16 @@ mounted() { font-size: 16px; font-weight: 600; text-align: center; + padding-top: 10px; } .info-item { display: flex; flex-direction: column; padding: 8px 12px; - background: rgba(255, 255, 255, 0.7); - border-radius: 12px; - border: 1px solid rgba(226, 232, 240, 0.8); - transition: all 0.3s ease; } - .info-item:hover { - background: rgba(255, 255, 255, 0.9); - border-color: rgba(66, 153, 225, 0.3); - transform: translateY(-2px); - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); - } + .info-label { font-size: 13px; diff --git a/ALOps_sys_fe/alops-ui/src/views/inMonitoring/devicesState/history.vue b/ALOps_sys_fe/alops-ui/src/views/inMonitoring/devicesState/history.vue index f9828db3..89c35673 100644 --- a/ALOps_sys_fe/alops-ui/src/views/inMonitoring/devicesState/history.vue +++ b/ALOps_sys_fe/alops-ui/src/views/inMonitoring/devicesState/history.vue @@ -1,39 +1,37 @@