【web】 接口对接

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",

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
   })

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({

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({

ALOps_sys_fe/alops-ui/src/views/QandA/knowledge/index.vue

@@ -14,13 +14,15 @@
 
             <el-table v-loading="loading" :data="userList" @selection-change="handleSelectionChange">
               <el-table-column type="selection" width="50" align="center" />
-              <el-table-column label="序号" align="center" key="id" prop="id"/>
+              <el-table-column
-              <el-table-column label="文件名称" align="center" key="title" prop="title" :show-overflow-tooltip="true" />
+                label="序号"
-              <el-table-column label="描述" align="center" key="description" prop="description" :show-overflow-tooltip="true" />
+                width="60"
-              <el-table-column label="创建人" align="center" key="createBy" prop="createBy" :show-overflow-tooltip="true" />
+                type="index"
-              <el-table-column label="创建时间" align="center" prop="createDate" width="160">
+              ></el-table-column>   
+              <el-table-column label="文件名称" align="center" key="source" prop="source" :show-overflow-tooltip="true" />
+              <el-table-column label="更新时间" align="center" prop="uploadTime" width="160">
                 <template slot-scope="scope">
-                  <span>{{ parseTime(scope.row.createDate) }}</span>
+                  <span>{{ parseTime(scope.row.uploadTime) }}</span>
                 </template>
               </el-table-column>
               <el-table-column label="操作" align="center" width="160" class-name="small-padding fixed-width">
@@ -41,19 +43,13 @@
   <el-form ref="form" :model="form" :rules="rules" label-width="90px">
     <el-row :gutter="20">
       <el-col :span="12">
-        <el-form-item label="文档标题" prop="title">
+        <el-form-item label="文档标题" prop="source">
-          <el-input v-model="form.title" placeholder="请输入文档标题" maxlength="30" />
+          <el-input v-model="form.source" placeholder="请输入文档标题" maxlength="30" />
         </el-form-item>
       </el-col>
       <el-col :span="24">
-        <el-form-item label="文档简介" prop="description">
+        <el-form-item label="上传文件" prop="file">
-          <el-input v-model="form.description" type="textarea" :rows="3" placeholder="请输入文档简介" />
+          <ImageUpload @input="upImage" :value="form.filePath" :fileType="['docx','txt']" listType="txt"/>
-        </el-form-item>
-      </el-col>
-
-      <el-col :span="24">
-        <el-form-item label="上传文件" prop="fileUrl">
-          <ImageUpload @input="upImage" :value="form.fileUrl" :fileType="['docx','txt']" listType="txt"/>
         </el-form-item>
       </el-col>
     </el-row>
@@ -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));
           }
         }
       })

ALOps_sys_fe/alops-ui/src/views/inMonitoring/devicesState/cardItem.vue

@@ -18,7 +18,7 @@
                     
                     <div class="device-box">
                       <div class="device-image">
-                          <img v-if="cardData.image" :src="cardData.image" alt="" class="device-icon">
+                          <img v-if="cardData.image" :src="baseUrl+cardData.equImage" alt="" class="device-icon">
                           <i v-else class="fas fa-server"></i>
                       </div>
                       <div class="device-info">
@@ -101,6 +101,7 @@ export default {
   },
   data() {
     return {
+      baseUrl: process.env.VUE_APP_BASE_API
     }
   },
   mounted() {

ALOps_sys_fe/alops-ui/src/views/inMonitoring/devicesState/detail.vue

@@ -16,7 +16,7 @@
                     </div>
                     <div class="top-section-con">
                       <div class="device-image">
-                          <img v-if="details.image" :src="details.image" alt="" class="device-icon">
+                          <img v-if="details.equImage" :src="baseUrl+details.equImage" alt="" class="device-icon">
                           <i v-else class="fas fa-server"></i>
                       </div>
                       <!-- 设备基本信息 -->
@@ -158,16 +158,17 @@
                             设备运行数据
                         </h2>
                         <el-date-picker
-                          v-model="daterange"
+                            v-model="DateValue"
-                          type="daterange"
+                            type="datetimerange"
+                            value-format="yyyy-MM-dd hh:mm:ss"
                             range-separator="至"
                             start-placeholder="开始日期"
-                          end-placeholder="结束日期">
+                            end-placeholder="结束日期"
+                            @change="handleDateChange">
                         </el-date-picker>
                     </div>
                     
                     <div class="chart-container" id="performanceChart"></div>
-                    <div class="chart-container" id="trafficChart"></div>
                 </div>
                 
                 <!-- 右侧参数 -->
@@ -182,7 +183,7 @@
                     
                     <div class="metrics-grid">
                       <div class="bottom-item" v-if="tabIndex == 0">
-                        <History/>
+                        <History :dsId="dsId"/>
                       </div>
                     </div>
                 </div>
@@ -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:dayjs().format('YYYY-MM-DD HH:mm:ss'),
-        maxTime: '',
+        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();
+    let dsId = routeList.id;
-    this.getInfoFun(routeList.id)
+    console.log("%c ⚓: mounted -> dsId ", "font-size:16px;background-color:#8f8576;color:white;", dsId)
-    this.gethistoryQuery(routeList.id)
+    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,
@@ -432,10 +388,15 @@ mounted() {
       historyQuery(queryForm).then(response => {
         this.details = response.data
         this.loading = false
+        this.initCharts();
         }
       )
     },
-            
+    handleDateChange(date) {
+      this.historyQueryList.minTime = date[0]
+      this.historyQueryList.maxTime = date[1]
+      this.gethistoryQuery(this.$route.params.id)
+    }
   }
 }
 </script>
@@ -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;

ALOps_sys_fe/alops-ui/src/views/inMonitoring/devicesState/history.vue

@@ -1,9 +1,8 @@
 <template>
   <div class="">
     <el-row :gutter="20">
-       
       <el-col>
-            <el-table v-loading="loading" :data="userList" @selection-change="handleSelectionChange">
+        <el-table v-loading="loading" :data="userList">
           <el-table-column
             label="序号"
             width="60"
@@ -13,27 +12,26 @@
           <el-table-column label="预警等级" align="center" key="name" prop="name" :show-overflow-tooltip="true" />
           <el-table-column label="预警信息" align="center" key="description" prop="description" :show-overflow-tooltip="true" />
           <el-table-column label="预警状态" align="center" key="createBy" prop="createBy" :show-overflow-tooltip="true" />
-              <el-table-column label="处理人" align="center" key="createBy" prop="createBy" :show-overflow-tooltip="true" />
+          <el-table-column label="处理人" align="center" key="handler" prop="handler" :show-overflow-tooltip="true" />
         </el-table>
-
-            <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
       </el-col>
     </el-row>
   </div>
 </template>
 
 <script>
-import { list,  del, add, update } from "@/api/device/deviceType"
+import { history } from "@/api/device/deviceType"
-import { getToken } from "@/utils/auth"
-import Treeselect from "@riophae/vue-treeselect"
 import "@riophae/vue-treeselect/dist/vue-treeselect.css"
-import { Splitpanes, Pane } from "splitpanes"
 import "splitpanes/dist/splitpanes.css"
 
 export default {
   name: "User",
-  dicts: ['sys_normal_disable', 'sys_user_sex'],
+  props: {
-  components: { Treeselect, Splitpanes, Pane },
+    dsId: {
+      type: String,
+      default: 'chart'
+    }
+  },
   data() {
     return {
       // 遮罩层
@@ -51,15 +49,25 @@ export default {
     }
   },
   created() {
+  },
+  watch: {
+    dsId: {
+      handler(val) {
+        console.log("%c ☄️: handler -> val ", "font-size:16px;background-color:#b2181b;color:white;", val)
         this.getList()
       },
+      deep: true,
+      immediate: true
+    }
+  },
   methods: {
     /** 查询类型列表 */
     getList() {
+      let dsId = this.dsId || 0
       this.loading = true
-      list(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
+      history({equId:11}).then(response => {
+      console.log("%c ⛓️: getList -> response ", "font-size:16px;background-color:#7f0cdd;color:white;", response)
           this.userList = response.rows
-          this.total = response.total
           this.loading = false
         }
       )

ALOps_sys_fe/alops-ui/src/views/inMonitoring/devicesState/index.vue

@@ -146,7 +146,7 @@
 </template>
 
 <script>
-import { list, getUser, delUser, addUser, updateUser, resetUserPwd, changeUserStatus } from "@/api/inMonitoring/devicesState"
+import { monitorpageList, getUser, delUser, addUser, updateUser, resetUserPwd, changeUserStatus } from "@/api/inMonitoring/devicesState"
 import { getToken } from "@/utils/auth"
 import Treeselect from "@riophae/vue-treeselect"
 import cardItem from "./cardItem.vue"
@@ -277,7 +277,7 @@ export default {
     /** 查询设备列表 */
     getList() {
       this.loading = true
-      list(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
+      monitorpageList(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
           this.userList = response.rows
           this.total = response.total
           this.loading = false