修改监控摄像头设备表格显示状态

src/api/shell.js

@@ -10,11 +10,10 @@ export const updateConfigShellService = (data) => {
 }
 
 export const deleteConfigShellService = (data) => {
-    const params = new URLSearchParams();
+    let reqData={
-    for (let key in data) {
+        "shells": data.shells,
-        params.append(key, data[key])
     }
-    return request.post('/shell/delete', params, { "headers": { 'token': data.token } });
+    return request.post('/shell/delete', reqData, { "headers": { 'token': data.token } });
 }
 
 export const addConfigShellService = (data) => {

src/api/tool.js

@@ -47,3 +47,23 @@ export const GetFileInfoByMd5Service = (Data) => {
         }
     })
 }
+
+export const GetMonitorDeviceInfoService = (Data) => {
+    return request.get('/tool/get_monitor_list')
+}
+
+export const UpdateMonitorDeviceInfoService = (Data) => {
+    return request.post('/tool/update_monitor', Data,{
+        headers: {
+            'token': Data.token, // 闂佽绻愭蹇涘箯閿燂拷 token 闂備礁鎼ú锔锯偓绗涘啰鏆﹂柛娆忣槺閳绘棃鏌ｉ幋鐏活亝绂嶉崼鏇熺厽闁靛ǹ鍎遍褔鏌熼煬鎻掆偓婵嬪箖瑜忔禒锔炬喆閿濆懍澹曢梺璺ㄥ櫐閹凤拷  
+        }  
+    })
+}
+
+export const DelMonitorDeviceInfoService = (Data) => {
+    return request.post('/tool/del_monitor', Data,{
+        headers: {
+            'token': Data.token, // 闂佽绻愭蹇涘箯閿燂拷 token 闂備礁鎼ú锔锯偓绗涘啰鏆﹂柛娆忣槺閳绘棃鏌ｉ幋鐏活亝绂嶉崼鏇熺厽闁靛ǹ鍎遍褔鏌熼煬鎻掆偓婵嬪箖瑜忔禒锔炬喆閿濆懍澹曢梺璺ㄥ櫐閹凤拷  
+        }  
+    })
+}

src/router/index.js

@@ -17,6 +17,7 @@ import Shell from "@/views/ShellList.vue"
 import callback from "@/views/callback.vue";
 import projectSelect from "@/views/project-select.vue";
 
+
 const routes = [
     {
         path: '/login',

src/views/DeviceList.vue

@@ -425,7 +425,15 @@ export default {
               prop="DeviceStatus"
               label="设备状态"
               width="80"
-            ></el-table-column>
+            >
+            <template #default="scope">
+                    <el-tag
+                      :type="scope.row.DeviceStatus === '在线' ? 'success' : 'danger'"
+                      >{{ scope.row.DeviceStatus === "在线" ? '在线' : '离线' }}</el-tag
+                    >
+                  </template>
+            
+          </el-table-column>
             <el-table-column
               prop="DeviceType"
               label="设备类型"

src/views/ShellList.vue

@@ -1,22 +1,24 @@
 <script>
-import axios from "axios";
 import router from "@/router/index.js";
-import Cookies from "js-cookie";
 import { ElMessage } from "element-plus";
-import CryptoJS from "crypto-js";
 import Menu from "@/views/Menu.vue";
 
 import { getConfigShellListService } from "@/api/shell.js";
 import { addConfigShellService } from "@/api/shell.js";
 import { deleteConfigShellService } from "@/api/shell.js";
 import { updateConfigShellService } from "@/api/shell.js";
+import { GetMonitorDeviceInfoService } from "@/api/tool.js";
+import { UpdateMonitorDeviceInfoService } from "@/api/tool.js";
+import { DelMonitorDeviceInfoService } from "@/api/tool.js";
 
 export default {
   data() {
     return {
       ip: "",
       tableData: [],
+      loading: false,
       search_id: 2002,
+      dialogVisible: false,
       ConfigShellUpdateForm: {},
       keyword: "",
       updateDialogVisible: false,
@@ -37,6 +39,10 @@ export default {
         { label: "阿里云服务器", value: "aliyun_vp_server" },
         { label:"azure服务器", value:"azure_vp_server" }
       ],
+      monitor_list: [],
+      monitor_add_update_visible: false,
+      monitor_update_add: {},
+
 
       role: "",
       tokenData: {
@@ -56,6 +62,7 @@ export default {
   methods: {
     async getConfigFileList() {
       let result = {};
+      this.loading = true;
       try {
         //判断search_id是字符串还是数字
         let req = {
@@ -65,6 +72,8 @@ export default {
         result = await getConfigShellListService(req);
       } catch (e) {
         console.log(e);
+      } finally {
+        this.loading = false;
       }
       let data = result.data;
       if (data !== undefined && data !== null) {
@@ -130,18 +139,15 @@ export default {
       if (!isDelete) {
         return;
       }
-      // alert("删除 index: " + index);
-      // return ;
-      let is_delete_file = confirm("是否删除文件?");
 
       let result = {};
       try {
         let req = {
           token: this.tokenData.token,
-          id: this.ConfigFileCurrentPageData[index].ID,
+          shells: [{"id":this.ConfigFileCurrentPageData[index].ID}],
-          del_file: is_delete_file,
         };
-        result = await deleteConfigFileService(req);
+        console.log("req:", req);
+        result = await deleteConfigShellService(req);
         if (result.code == 0) {
           ElMessage.success("删除成功");
           this.getConfigFileList();
@@ -166,6 +172,10 @@ export default {
       this.ConfigShellUpdateForm = cf;
       this.updateDialogVisible = true;
     },
+    showMonitorList() {
+      this.dialogVisible = true;
+      this.getMonitorDeviceList();
+    },
     async createAgain(index) {
       let cf = this.ConfigFileCurrentPageData[index];
       this.addForm.shell_name = cf.ShellName;
@@ -211,6 +221,73 @@ export default {
     toVideoList() {
       router.push("/videoList");
     },
+    async getMonitorDeviceList(){
+      try {
+        let req = {
+          token: this.tokenData.token,
+          type: "all",
+        };
+        let result = await GetMonitorDeviceInfoService(req);
+        if (result.code === 0) {
+          this.monitor_list = result.data;
+          console.log("monitor_list:", this.monitor_list);
+          this.dialogVisible = true; // 打开设备监控对话框
+        } else {
+          ElMessage.error("获取设备列表失败");
+        }
+      } catch (e) {
+        console.log(e);
+      }
+    },
+    updateMonitorShow(index) {
+      this.monitor_add_update_visible = true;
+      this.monitor_update_add = { ...this.monitor_list[index] }; // 深拷贝，避免直接修改原数据
+    },
+    //确定添加或修改设备
+    async addUpdateMonitor(){
+      let req = {
+        "token": this.tokenData.token,
+        "devices": [this.monitor_update_add],
+      };
+      req.devices[0].expire =parseInt(req.devices[0].expire);
+      try{
+        let result = await UpdateMonitorDeviceInfoService(req);
+        if (result.code === 0) {
+          ElMessage.success("设备信息更新成功");
+          this.monitor_add_update_visible = false;
+        } else {
+          ElMessage.error("设备信息更新失败");
+        }
+        
+      }catch (e) {
+        console.log(e);
+      }
+    },
+
+    async DelMonitor(index) {
+      let isDelete = confirm("是否删除?");
+      if (!isDelete) {
+        return;
+      }
+      let req = {
+        token: this.tokenData.token,
+        devices: [this.monitor_list[index]],
+      };
+      try {
+ 
+        let result = await DelMonitorDeviceInfoService(req);
+        if (result.code === 0) {
+          ElMessage.success("设备删除成功");
+          this.getMonitorDeviceList();
+        } else {
+          ElMessage.error("设备删除失败");
+        }
+      } catch (e) {
+        console.log(e);
+      }
+    },
+
+
     // 修改条纹颜色
     tableRowClassName({ row, rowIndex }) {
       switch (row.Status) {
@@ -336,6 +413,14 @@ export default {
                   >创建命令</el-button
                 >
               </el-form-item>
+              <el-form-item>
+                <el-button
+                  class="el-button--danger"
+                  type="primary"
+                  @click="getMonitorDeviceList()"
+                  >设备监控</el-button
+                >
+              </el-form-item>
             </el-form>
           </el-form>
 
@@ -397,8 +482,107 @@ export default {
             </template>
           </el-dialog>
           
+
+          <el-dialog
+            v-model="monitor_add_update_visible"
+            title="编辑监控"
+            width="50%"
+            @close="handleClose">
+
+            <el-form
+              ref="monitorUpdateFormRef"
+              :model="monitor_update_add"
+              :rules="UserUpdateFormRules"
+              label-width="70px"  
+              >
+            
+              <el-row>
+                <el-form-item label="设备" prop="id">
+                  <el-input
+                    v-model="monitor_update_add.id"
+                  ></el-input>
+                  </el-form-item>
+             </el-row>
+             <el-row>
+                <el-form-item label="状态" prop="status">
+                  <el-select v-model="monitor_update_add.status">
+                    <el-option label="在线" value="1"></el-option>
+                    <el-option label="离线" value="0"></el-option>
+                  </el-select>
+                </el-form-item>
+              </el-row>
+              <el-row>
+                <el-form-item label="过期时间" prop="expire">
+                  <el-input 
+                    v-model="monitor_update_add.expire"
+                    oninput="this.value = this.value.replace(/[^0-9]/g, '')"
+                  ></el-input>
+                </el-form-item>
+              </el-row>
+            </el-form>
+            <!-- 底部区域 -->
+             <template #footer>
+ 
+              <span class="dialog-footer">
+                <el-button @click="monitor_add_update_visible = false"
+                  >取消</el-button
+                >
+                <el-button type="primary" @click="addUpdateMonitor()"
+                  >确定</el-button
+                >
+              </span>
+              </template> 
+          </el-dialog>
+
+
+          <el-dialog
+            v-model="dialogVisible"
+            title="设备状态监控"
+            width="50%"
+            @close="handleClose"
+          >
+          <el-button type="primary" @click="monitor_add_update_visible = true">添加</el-button>
+              <el-table
+                :data="monitor_list"
+                stripe
+                width="90%"
+                fit
+              >
+                <el-table-column prop="id" label="设备" width="150"></el-table-column>
+                <el-table-column prop="status" label="状态" width="150">
+                  <template #default="scope">
+                    <el-tag
+                      :type="scope.row.status === '1' ? 'success' : 'danger'"
+                      >{{ scope.row.status === "1" ? '在线' : '离线' }}</el-tag
+                    >
+                  </template>
+                </el-table-column>
+                <el-table-column prop="expire" label="过期时间" width="150">
+                </el-table-column>  
+                            <el-table-column label="操作" width="270">
+              <template #default="scope">
+                <el-button
+                  type="primary"
+                  size="mini"
+                  @click.prevent="updateMonitorShow(scope.$index)"
+                  >编辑</el-button
+                >
+                <el-button
+                  type="primary"
+                  size="mini"
+                  @click.prevent="DelMonitor(scope.$index)"
+                  >删除</el-button
+                >
+              </template>
+            </el-table-column>
+              </el-table>
+            <template #footer>
+              <el-button @click="dialogVisible = false">取消</el-button>
+            </template>
+          </el-dialog>
+
           <!-- 表格  :row-style="this.tableRowClassName"-->
-          <el-table :data="ConfigFileCurrentPageData" width="100%" border>
+          <el-table :data="ConfigFileCurrentPageData" width="100%" v-loading="loading">
             :row-style="tableRowClassName"
             <el-table-column prop="ID" label="id" width="80"></el-table-column>
             <el-table-column
@@ -409,6 +593,7 @@ export default {
             <el-table-column
               prop="ShellContent"
               label="命令内容"
+              show-overflow-tooltip
               width="120"
             ></el-table-column>
             <el-table-column
@@ -436,7 +621,7 @@ export default {
               label="创建用户ID"
               width="40"
             ></el-table-column>
-            <el-table-column label="操作" width="250">
+            <el-table-column label="操作" width="270">
               <template #default="scope">
                 <el-button
                   type="primary"
@@ -444,12 +629,12 @@ export default {
                   @click.prevent="updateConfigShell(scope.$index)"
                   >编辑</el-button
                 >
-                <!-- <el-button
+                <el-button
                   type="primary"
                   size="mini"
                   @click.prevent="deleteConfigFile(scope.$index)"
                   >删除</el-button
-                > -->
+                >
                 <el-button
                   type="primary"
                   size="mini"