diff --git a/ALOps_sys_fe/alops-ui/src/api/device/files.js b/ALOps_sys_fe/alops-ui/src/api/device/files.js index 55f3a8c2..34594a22 100644 --- a/ALOps_sys_fe/alops-ui/src/api/device/files.js +++ b/ALOps_sys_fe/alops-ui/src/api/device/files.js @@ -19,6 +19,32 @@ export function list(query) { }) } + +// 查询设备类型列表 +export function deviceTypeList(query) { + return request({ + url: 'device/deviceType/query', + method: 'get', + params: query + }) +} +// 查询设备厂商列表 +export function deviceManuList(query) { + return request({ + url: 'device/deviceManu/query', + method: 'get', + params: query + }) +} +// 查询设备供应商列表 +export function supplierList(query) { + return request({ + url: 'device/supplier/query', + method: 'get', + params: query + }) +} + // 查询详细 export function getInfo(id) { 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 5ead40a8..ffac4566 100644 --- a/ALOps_sys_fe/alops-ui/src/api/inMonitoring/devicesState.js +++ b/ALOps_sys_fe/alops-ui/src/api/inMonitoring/devicesState.js @@ -5,7 +5,7 @@ const api = '/device/files/' // 查询多台设备列表 export function list(query) { return request({ - url: api + 'list', + url: api + 'monitorById', method: 'get', params: query }) diff --git a/ALOps_sys_fe/alops-ui/src/router/index.js b/ALOps_sys_fe/alops-ui/src/router/index.js index 904eb925..f5dba92c 100644 --- a/ALOps_sys_fe/alops-ui/src/router/index.js +++ b/ALOps_sys_fe/alops-ui/src/router/index.js @@ -99,7 +99,7 @@ export const dynamicRoutes = [ permissions: ['inMonitoring:devicesState:edit'], children: [ { - path: 'detail/:userId', + path: 'detail/:id', component: () => import('@/views/inMonitoring/devicesState/detail'), name: 'DevicesStateDetail', meta: { title: '设备详情', activeMenu: '/inMonitoring/devicesState-detail' } diff --git a/ALOps_sys_fe/alops-ui/src/views/dashboard/PieChart.vue b/ALOps_sys_fe/alops-ui/src/views/dashboard/PieChart.vue index 63f0d849..2ed455d2 100644 --- a/ALOps_sys_fe/alops-ui/src/views/dashboard/PieChart.vue +++ b/ALOps_sys_fe/alops-ui/src/views/dashboard/PieChart.vue @@ -21,6 +21,8 @@ export default { height: { type: String, default: '300px' + }, + chartData: { } }, data() { @@ -29,9 +31,9 @@ export default { } }, mounted() { - this.$nextTick(() => { - this.initChart() - }) + // this.$nextTick(() => { + // this.initChart() + // }) }, beforeDestroy() { if (!this.chart) { @@ -40,39 +42,141 @@ export default { this.chart.dispose() this.chart = null }, + watch: { + chartData(val) { + this.initChart() + } + }, methods: { initChart() { this.chart = echarts.init(this.$el, 'macarons') - - this.chart.setOption({ - tooltip: { - trigger: 'item', - formatter: '{a}
{b} : {c} ({d}%)' + var img = + 'data:image/png;base64,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'; +let chartDatas = this.chartData; +var trafficWay = chartDatas.list +var data = []; +var color = [ '#6da7ff', '#63e1f2', '#ff3000']; +for (var i = 0; i < trafficWay.length; i++) { + data.push( + { + value: trafficWay[i].count, + name: trafficWay[i].equTypeName || '暂无', + itemStyle: { + normal: { + borderWidth: 5, + shadowBlur: 20, + borderColor: color[i], + shadowColor: color[i], + }, + }, }, - legend: { - left: 'center', - bottom: '10', - data: ['Industries', 'Technology', 'Forex', 'Gold', 'Forecasts'] + { + value: 2, + name: '', + itemStyle: { + normal: { + label: { + show: false, + }, + labelLine: { + show: false, + }, + color: 'rgba(0, 0, 0, 0)', + borderColor: 'rgba(0, 0, 0, 0)', + borderWidth: 0, + }, + }, + } + ); +} +var seriesOption = [ + { + name: '', + type: 'pie', + clockWise: false, + radius: [65, 69], + hoverAnimation: false, + itemStyle: { + normal: { + label: { + show: true, + position: 'outside', + + formatter: function (params) { + var percent = 0; + var total = chartDatas.totalCount || 0; + percent = ((params.value / total) * 100).toFixed(0); + if (params.name !== '') { + return params.name + '\t' + percent + '%'; + } else { + return ''; + } + }, + }, + labelLine: { + length: 10, + length2: 10, + show: true, + color: '#00ffff', + }, + }, }, - series: [ - { - name: 'WEEKLY WRITE ARTICLES', - type: 'pie', - roseType: 'radius', - radius: [15, 95], - center: ['50%', '38%'], - data: [ - { value: 320, name: 'Industries' }, - { value: 240, name: 'Technology' }, - { value: 149, name: 'Forex' }, - { value: 100, name: 'Gold' }, - { value: 59, name: 'Forecasts' } - ], - animationEasing: 'cubicInOut', - animationDuration: 2600 - } - ] - }) + data: data, + }, +]; +var option = { + color: color, + title: [{ + text: '设备检测总数', + top: '44%', + textAlign: 'center', + left: '49.50%', + borderRadius:100, + textStyle: { + color: '#000', + fontSize: 16, + fontWeight: '400', + }, + },{ + text: chartDatas.totalCount || 0 + '个', + top: '53%', + textAlign: 'center', + left: '48%', + textStyle: { + color: '#f6ea2f', + fontSize: 18, + fontWeight: '800', + fontStyle: 'italic' + }, + }], + graphic: { + elements: [ + { + type: 'image', + z: 3, + style: { + image: img, + width: 98, + height: 98, + }, + left: 'center', + top: 'center', + position: [100, 100], + }, + ], + }, + tooltip: { + show: false, + }, + + toolbox: { + show: false, + }, + series: seriesOption, +}; + + + this.chart.setOption(option) } } } diff --git a/ALOps_sys_fe/alops-ui/src/views/device/deviceInformation/index.vue b/ALOps_sys_fe/alops-ui/src/views/device/deviceInformation/index.vue index 29c03bbf..aa357cdd 100644 --- a/ALOps_sys_fe/alops-ui/src/views/device/deviceInformation/index.vue +++ b/ALOps_sys_fe/alops-ui/src/views/device/deviceInformation/index.vue @@ -17,7 +17,7 @@ - + @@ -39,7 +39,7 @@ - + value ", "font-size:16px;background-color:#dbe986;color:black;", value) this.queryParams.startTime = value[0] this.queryParams.endTime = value[1] }, diff --git a/ALOps_sys_fe/alops-ui/src/views/device/files/index.vue b/ALOps_sys_fe/alops-ui/src/views/device/files/index.vue index 7b1d03db..658cd89e 100644 --- a/ALOps_sys_fe/alops-ui/src/views/device/files/index.vue +++ b/ALOps_sys_fe/alops-ui/src/views/device/files/index.vue @@ -45,7 +45,7 @@ width="60" type="index" > - + @@ -56,7 +56,7 @@ - + \ No newline at end of file diff --git a/ALOps_sys_fe/alops-ui/src/views/index.vue b/ALOps_sys_fe/alops-ui/src/views/index.vue index bbb81b8b..92c70cec 100644 --- a/ALOps_sys_fe/alops-ui/src/views/index.vue +++ b/ALOps_sys_fe/alops-ui/src/views/index.vue @@ -19,12 +19,12 @@
{{ alertMessageData.monthCount }}
-
+
{{ `等级${i.level}预警` }}
{{ i.count }}
-
+
{{ `${i.name}预警` }}
{{ i.count }}
@@ -39,18 +39,7 @@

检测设备信息

    -
  • -
    - -
    -
    -
    {{ device.name }}
    -
    {{ device.description }}
    -
    - - {{ device.status === 'UNHANDLED' ? '预警中' : '正常' }} - -
    • +
@@ -61,6 +50,7 @@

设备预警信息

+
  • @@ -93,7 +83,9 @@
    最后更新: {{ lastUpdate }}
    - + + +
    @@ -104,22 +96,22 @@ - + - - + +
    {{ header }}{{ device.name }} {{ device.location }} - - {{ device.cpuUsage }}% + + {{ device.cpuUtilization || 0 }}% - - {{ device.memoryUsage }}% + + {{ device.memoryUtilization || 0 }}% {{ device.temperature }}°C{{ device.temperature || 0 }}°C
    -
    +
    - {{ device.health }}% + {{ device.health || 0 }}%     		{{ device.uptime }}{{ device.collectionTime }}{{ formatDuration(device.contWorkPeriod) }}{{ parseTime(device.gatherTime) || '--' }}
    @@ -173,56 +165,21 @@ export default { alerts: [], // 统计预警信息次数 alertMessageData: [], + + byEquTypeData: [], + tableHeaders: ['设备名称', '设备位置', 'CPU使用率', '内存使用率', '温度', '健康度', '设备运行时长', '采集时间'], - deviceStatus: [ - { - id: 1, - name: 'PLC控制系统', - location: '主控室A区', - cpuUsage: 45, - memoryUsage: 62, - temperature: 42, - health: 85, - uptime: '125天8小时', - collectionTime: '2021-10-16 15:20:00' - }, - { - id: 2, - name: '数据采集器', - location: '污水处理区', - cpuUsage: 78, - memoryUsage: 85, - temperature: 58, - health: 65, - uptime: '89天12小时', - collectionTime: '2021-10-16 15:22:00' - }, - { - id: 3, - name: '监控服务器', - location: '数据中心', - cpuUsage: 32, - memoryUsage: 45, - temperature: 38, - health: 92, - uptime: '210天3小时', - collectionTime: '2021-10-16 15:25:00' - }, - { - id: 4, - name: '网络交换机', - location: '通信机房', - cpuUsage: 15, - memoryUsage: 28, - temperature: 35, - health: 95, - uptime: '156天7小时', - collectionTime: '2021-10-16 15:18:00' - } - ] + deviceStatus: [] } }, methods: { + formatDuration(input) {// 类型安全校验 + if (typeof input !== 'string') return "0天0小时"; + + const match = input.match(/(\d+)\s*days?,\s*(\d+):/i); + return match ? `${match[1]}天${match[2]}小时` : "0天0小时"; +}, + getCpuStatus(usage) { if (usage < 50) return 'status-indicator status-good'; if (usage < 80) return 'status-indicator status-warning'; @@ -238,25 +195,19 @@ export default { if (health >= 60) return 'health-warning'; return 'health-critical'; }, - getstatistic() { - this.loading = true - statistic().then(response => { - this.alerts = response.rows - this.loading = false - } - ) - }, getbyEquType() { this.loading = true byEquType().then(response => { this.loading = false + this.byEquTypeData = response.data } ) }, getlistMonitor() { this.loading = true - listMonitor().then(response => { + listMonitor({pageSize: 100}).then(response => { this.loading = false + this.deviceStatus = response.rows } ) }, @@ -269,12 +220,10 @@ export default { ) }, async loadMore() { - console.log("%c 🎧: loadMore -> this.isLoading || this.noMore ", "font-size:16px;background-color:#64b738;color:white;", this.isLoading , this.noMore) - if (this.isLoading || this.noMore) return; this.isLoading = true; try { - const res = await statistic({page:this.page}); // 模拟API请求 + const res = await statistic({page:this.page,status:'UNHANDLED'}); // 模拟API请求 if (res.rows.length < 10) { // 假设每页10条 this.noMore = true; } else { @@ -286,10 +235,9 @@ export default { } finally { this.isLoading = false; } - }, + } }, created() { - // this.getstatistic() this.getbyEquType() this.getlistMonitor() this.getalertMessageTimes() @@ -430,6 +378,7 @@ export default { overflow-y: auto; overflow-x: hidden; max-height: 255px; + padding-left: 0; } .device-item {