From 743d6afeb390bb5fa4b8092060014a417a954b27 Mon Sep 17 00:00:00 2001
From: junleea <354425203@qq.com>
Date: Fri, 5 Jul 2024 17:40:12 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E8=BF=90=E8=A1=8C=E6=97=A5?=
 =?UTF-8?q?=E5=BF=97=E6=9F=A5=E7=9C=8B=EF=BC=8C=E4=BF=AE=E5=A4=8D=E9=9B=86?=
 =?UTF-8?q?=E6=88=90=E9=A1=B9=E7=9B=AE=E4=BF=AE=E6=94=B9=E7=AD=89=E9=97=AE?=
 =?UTF-8?q?=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/cid.js        |  21 ++-
 src/router/index.js   |   9 +-
 src/views/CIDList.vue | 125 ++++++---------
 src/views/CIDLog.vue  | 360 ++++++++++++++++++++++++++++++++++++++++++
 4 files changed, 431 insertions(+), 84 deletions(-)

diff --git a/src/api/cid.js b/src/api/cid.js
index af0b8ed..35ff5b1 100644
--- a/src/api/cid.js
+++ b/src/api/cid.js
@@ -1,16 +1,18 @@
 import request from '@/utils/request.js'
 
-export const restartCIDService = (data) => {
+export const runCIDService = (data) => {
     const params = new URLSearchParams();
     for (let key in data) {
+        if(key == 'token') continue;
         params.append(key, data[key])
     }
-    return request.post('/cid/restart', params, { "headers": { 'token': data.token } });
+    return request.post('/cid/run', params, { "headers": { 'token': data.token } });
 }
 
 export const updateCIDService = (data) => {
     const params = new URLSearchParams();
     for (let key in data) {
+        if (key == 'token') continue;
         params.append(key, data[key])
     }
     return request.post('/cid/update', params, { "headers": { 'token': data.token } });
@@ -45,4 +47,19 @@ export const getCIDListService = (data) => {
         }
     }
     );
+}
+
+export const getCIDLogListService = (data) => {
+    const params = new URLSearchParams();
+    for (let d in data) {
+        params.append(d, data[d]);
+    }
+    // request.headers["Content-Type"] = "application/json";
+    request.defaults.headers["token"] = data.token.value;
+    return request.post('/cid/log', params, {
+        headers: {
+            'token': data.token, // 将 token 替换为您的令牌值  
+        }
+    }
+    );
 }
\ No newline at end of file
diff --git a/src/router/index.js b/src/router/index.js
index bb83e2a..f07e0a4 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -6,8 +6,8 @@ import VideoListVue from "@/views/VideoList.vue";
 import DeviceListVue from "@/views/DeviceList.vue";
 import UserListVue from "@/views/UserList.vue";
 import ImVue from "@/views/Im.vue";
-import {CIDListVue} from "@/views/CIDList.vue";
-import { pa } from "element-plus/es/locale";
+import CIDListVue from "@/views/CIDList.vue";
+import CIDLog from "@/views/CIDLog.vue";
 
 const routes = [
     {
@@ -45,6 +45,11 @@ const routes = [
         name: 'CID',
         component: CIDListVue
     },
+    {
+        path: '/cidlog',
+        name: 'CIDLog',
+        component: CIDLog
+    },
     {
         path: '/',
         redirect: '/login'
diff --git a/src/views/CIDList.vue b/src/views/CIDList.vue
index cbce244..b6f6fe5 100644
--- a/src/views/CIDList.vue
+++ b/src/views/CIDList.vue
@@ -1,11 +1,11 @@
 <script>
 import axios from "axios";
 import { inject } from "vue";
-import { getDeviceListService } from "@/api/device.js";
-import { runCIDService } from "@/api/device.js";
-import { addCIDService } from "@/api/device.js";
-import { deleteCIDService } from "@/api/device.js";
-import { updateCIDService } from "@/api/device.js";
+import { getCIDListService } from "@/api/cid.js";
+import { runCIDService } from "@/api/cid.js";
+import { addCIDService } from "@/api/cid.js";
+import { deleteCIDService } from "@/api/cid.js";
+import { updateCIDService } from "@/api/cid.js";
 import router from "@/router/index.js";
 
 export default {
@@ -33,12 +33,10 @@ export default {
       },
       updateForm: {
         id:0,
-        device_name: "",
-        device_ip: "",
-        device_status: "",
-        device_info: "",
-        device_location: "",
-        device_type: "",
+        cidtoken:"",
+        name: "",
+        url: "",
+        script: "",
         auth_id: -1,
         token: localStorage.getItem("token"),
       },
@@ -57,12 +55,6 @@ export default {
       }
       let data = result.data;
 
-      //   for(let d in data){
-      //     let res = JSON.parse(d);
-      //     console.log("res=",res);
-      //     this.tableData.push(res);
-      //   }
-      //   console.log(this.tableData);
 
       this.tableData = data;
     },
@@ -79,15 +71,14 @@ export default {
     //设置项目执行构建部署
     async runCID(index) {
       var id = this.tableData[index].ID;
-      var restart_data = {
+      var run_data = {
         id: id,
-        option: "one",
         ip: this.ip,
         userId: this.tokenData.userId,
         token: this.tokenData.token,
       };
       try {
-        var d_re = await runCIDService(restart_data);
+        var d_re = await runCIDService(run_data);
         if (d_re.code == 0) {
           alert("操作成功");
         } else {
@@ -97,6 +88,11 @@ export default {
         console.log(e);
       }
     },
+    toRunCIDLog(index) {
+      var id = this.tableData[index].ID;
+      localStorage.setItem("cid_id", id);
+      router.push("/cidlog");
+    },
     async deleteCID(index) {
       var id = this.tableData[index].ID;
       var delete_data = {
@@ -119,21 +115,18 @@ export default {
     },
     async updateButtonCID(index) {
       var id = this.tableData[index].ID;
-      this.updateForm.device_name = this.tableData[index].DeviceName;
-      this.updateForm.device_ip = this.tableData[index].DeviceIP;
-      this.updateForm.device_status = this.tableData[index].DeviceStatus;
-      this.updateForm.device_info = this.tableData[index].DeviceInfo;
-      this.updateForm.device_location = this.tableData[index].DeviceLocation;
-      this.updateForm.device_type = this.tableData[index].DeviceType;
-      this.updateForm.auth_id = this.tableData[index].AuthID;
+      this.updateForm.name = this.tableData[index].Name;
+      this.updateForm.url = this.tableData[index].Url;
+      this.updateForm.script = this.tableData[index].Script;
+        this.updateForm.cidtoken = this.tableData[index].Token;
       this.updateForm.id = id;
       this.updateDialogVisible= true;
     },
-    async addDevice() {
+    async addCID() {
       this.addDialogVisible = false;
       let result = {};
       try {
-        result = await addDeviceService(this.addForm);
+        result = await addCIDService(this.addForm);
         if (result.code == 0) {
           alert("添加成功");
         } else {
@@ -143,11 +136,11 @@ export default {
         console.log(e);
       }
     },
-    async updateDevice() {
+    async updateCID() {
       this.updateDialogVisible = false;
       let result = {};
       try {
-        result = await updateDeviceService(this.updateForm);
+        result = await updateCIDService(this.updateForm);
         if (result.code == 0) {
           alert("修改成功");
           this.getDeviceList()
@@ -158,25 +151,6 @@ export default {
         console.log(e);
       }
     },
-    async restartAllDevice() {
-      var restart_data = {
-        id: id,
-        ip: this.ip,
-        option: "all",
-        userId: this.tokenData.userId,
-        token: this.tokenData.token,
-      };
-      try {
-        var d_re = await runCIDService(restart_data);
-        if (d_re.code == 0) {
-          alert("重启成功");
-        } else {
-          alert("操作失败");
-        }
-      } catch (e) {
-        console.log(e);
-      }
-    },
     async getIpClient() {
       try {
         const response = await axios.get("https://ipinfo.io/json");
@@ -247,7 +221,7 @@ export default {
     >
     <el-container style="height: 700px; border: 1px solid #eee">
       <el-header style="font-size: 40px; background-color: rgb(238, 241, 246)"
-        >监控设备列表</el-header
+        >集成部署项目</el-header
       >
       <el-container>
         <el-main>
@@ -270,7 +244,7 @@ export default {
               <el-dialog
                 v-model="addDialogVisible"
                 title="添加集成项目"
-                width="70%"
+                width="50%"
                 :before-close="handleClose"
               >
                 <!-- 内容主体区域 -->
@@ -284,16 +258,14 @@ export default {
                     <el-input
                       v-model="addForm.name"
                       autocomplete="on"
+                      style="width: 400px" 
                     ></el-input>
                   </el-form-item>
                   <el-form-item label="仓库地址" prop="device_ip">
-                    <el-input v-model="addForm.url"></el-input>
+                    <el-input v-model="addForm.url"  style="width: 400px" autocomplete="on"></el-input>
                   </el-form-item>
                   <el-form-item label="脚本内容" prop="device_status">
-                    <el-textarea
-                      v-model="addForm.script"
-                      placeholder="请输入内容"
-                    ></el-textarea>
+                    <el-input type="textarea" v-model="addForm.script" style="width: 400px" :autosize="{ minRows: 4, maxRows: 8 }" />
                   </el-form-item>
                 </el-form>
                 <!-- 底部区域 -->
@@ -302,7 +274,7 @@ export default {
                     <el-button @click="addDialogVisible = false"
                       >取消</el-button
                     >
-                    <el-button type="primary" @click="addDevice()"
+                    <el-button type="primary" @click="addCID()"
                       >确定</el-button
                     >
                   </span>
@@ -313,40 +285,33 @@ export default {
             <el-form-item>
               <el-dialog
                 v-model="updateDialogVisible"
-                title="修改设备"
+                title="修改集成项目"
                 width="50%"
                 :before-close="handleClose"
               >
                 <!-- 内容主体区域 -->
                 <el-form
-                  ref="updateFormRef"
+                  ref="addFormRef"
                   :model="updateForm"
                   :rules="updateFormRules"
                   label-width="70px"
                 >
-                  <el-form-item label="设备名称" prop="device_name">
+                  <el-form-item label="项目名称" prop="device_name">
                     <el-input
-                      v-model="updateForm.device_name"
+                      v-model="updateForm.name"
                       autocomplete="on"
+                      style="width: 400px" 
                     ></el-input>
                   </el-form-item>
-                  <el-form-item label="设备IP" prop="device_ip">
-                    <el-input v-model="updateForm.device_ip"></el-input>
+                  <el-form-item label="仓库地址" prop="device_ip">
+                    <el-input v-model="updateForm.url"  style="width: 400px" autocomplete="on"></el-input>
                   </el-form-item>
-                  <el-form-item label="设备状态" prop="device_status">
-                    <el-select v-model="updateForm.device_status">
-                      <el-option label="在线" value="在线"></el-option>
-                      <el-option label="离线" value="离线"></el-option>
-                    </el-select>
+                  <el-form-item label="脚本内容" prop="device_status">
+                    <el-input type="textarea" v-model="updateForm.script" style="width: 400px" :autosize="{ minRows: 4, maxRows: 8 }" />
                   </el-form-item>
-                  <el-form-item label="设备类型" prop="device_type">
-                    <el-input v-model="updateForm.device_type"></el-input>
-                  </el-form-item>
-                  <el-form-item label="设备位置" prop="device_location">
-                    <el-input v-model="updateForm.device_location"></el-input>
-                  </el-form-item>
-                  <el-form-item label="设备信息" prop="device_info">
-                    <el-input v-model="updateForm.device_info"></el-input>
+                  <el-form-item label="外部回调Token" prop="device_status">
+                    <el-input v-model="updateForm.cidtoken" style="width: 400px" />
+                    回调地址：https://gep.ljsea.xyz/cid/callback?token={{updateForm.cidtoken}}&id={{updateForm.id}}
                   </el-form-item>
                 </el-form>
                 <!-- 底部区域 -->
@@ -355,7 +320,7 @@ export default {
                     <el-button @click="updateDialogVisible = false"
                       >取消</el-button
                     >
-                    <el-button type="primary" @click="updateDevice()"
+                    <el-button type="primary" @click="updateCID()"
                       >确定</el-button
                     >
                   </span>
@@ -384,11 +349,11 @@ export default {
               width="250"
             ></el-table-column>
             <el-table-column
-              prop="token"
+              prop="Token"
               label="回调Token"
               width="100"
             ></el-table-column>
-            <el-table-column label="操作" width="300">
+            <el-table-column label="操作" width="350">
               <template #default="scope">
                 <el-button
                   type="primary"
diff --git a/src/views/CIDLog.vue b/src/views/CIDLog.vue
index e69de29..f6b3ebf 100644
--- a/src/views/CIDLog.vue
+++ b/src/views/CIDLog.vue
@@ -0,0 +1,360 @@
+<script>
+import axios from "axios";
+import { inject } from "vue";
+import { getCIDLogListService } from "@/api/cid.js";
+import { runCIDService } from "@/api/cid.js";
+import { addCIDService } from "@/api/cid.js";
+import { deleteCIDService } from "@/api/cid.js";
+import { updateCIDService } from "@/api/cid.js";
+import router from "@/router/index.js";
+
+export default {
+  data() {
+    return {
+      ip: "",
+      tableData: [],
+      tokenData: {
+        token: localStorage.getItem("token"),
+        ip: localStorage.getItem("ip"),
+        id:localStorage.getItem("cid_id"),
+        userId: localStorage.getItem("userId"),
+        username: localStorage.getItem("username"),
+      },
+      addDialogVisible: false,
+      updateDialogVisible: false,
+    };
+  },
+
+  // methods 是一些用来更改状态与触发更新的函数
+  // 它们可以在模板中作为事件处理器绑定
+  methods: {
+    async getCIDLogList() {
+      let result = {};
+      try {
+        result = await getCIDLogListService(this.tokenData);
+      } catch (e) {
+        console.log(e);
+      }
+      let data = result.data;
+
+
+      this.tableData = data;
+    },
+    onSubmit() {
+      getDeviceList({ token: token });
+    },
+    handleSizeChange() {
+      alert("每页记录数变化" + val);
+    },
+    handleCurrentChange() {
+      alert("页码发生变化" + val);
+    },
+
+    //设置项目执行构建部署
+    async runCID(index) {
+      var id = this.tableData[index].ID;
+      var run_data = {
+        id: id,
+        ip: this.ip,
+        userId: this.tokenData.userId,
+        token: this.tokenData.token,
+      };
+      try {
+        var d_re = await runCIDService(run_data);
+        if (d_re.code == 0) {
+          alert("操作成功");
+        } else {
+          alert("操作失败");
+        }
+      } catch (e) {
+        console.log(e);
+      }
+    },
+    async deleteCID(index) {
+      var id = this.tableData[index].ID;
+      var delete_data = {
+        id: id,
+        userId: this.tokenData.userId,
+        token: this.tokenData.token,
+      };
+      try {
+        var d_re = await deleteCIDService(delete_data);
+        if (d_re.code == 0) {
+          alert("删除成功");
+          //刷新页面
+          this.getDeviceList();
+        } else {
+          alert("操作失败");
+        }
+      } catch (e) {
+        console.log(e);
+      }
+    },
+    async updateButtonCID(index) {
+      var id = this.tableData[index].ID;
+      this.updateForm.name = this.tableData[index].Name;
+      this.updateForm.url = this.tableData[index].Url;
+      this.updateForm.script = this.tableData[index].Script;
+        this.updateForm.cidtoken = this.tableData[index].Token;
+      this.updateForm.id = id;
+      this.updateDialogVisible= true;
+    },
+    async addCID() {
+      this.addDialogVisible = false;
+      let result = {};
+      try {
+        result = await addCIDService(this.addForm);
+        if (result.code == 0) {
+          alert("添加成功");
+        } else {
+          alert("添加失败");
+        }
+      } catch (e) {
+        console.log(e);
+      }
+    },
+    async updateCID() {
+      this.updateDialogVisible = false;
+      let result = {};
+      try {
+        result = await updateCIDService(this.updateForm);
+        if (result.code == 0) {
+          alert("修改成功");
+          this.getDeviceList()
+        } else {
+          alert("修改失败");
+        }
+      } catch (e) {
+        console.log(e);
+      }
+    },
+    async getIpClient() {
+      try {
+        const response = await axios.get("https://ipinfo.io/json");
+        this.ip = response.data.ip;
+        localStorage.setItem("ip", this.ip);
+        //console.log(response);
+      } catch (error) {
+        console.error(error);
+      }
+    },
+    handleMenuSelect(val) {
+      router.push(val);
+    },
+    toVideoList() {
+      router.push("/videoList");
+    },
+    // 修改条纹颜色
+    tableRowClassName({ row, rowIndex }) {
+      if (row.human === 1) {
+        return {
+          background: "#488aff",
+        };
+      } else {
+        return "";
+      }
+    },
+  },
+
+  // 生命周期钩子会在组件生命周期的各个不同阶段被调用
+  // 例如这个函数就会在组件挂载完成后被调用
+  async mounted() {
+    let now = new Date();
+    if (localStorage.getItem("token") === null) {
+      router.push("/login");
+    }
+    // console.log("mounted");
+    await this.getIpClient();
+    this.getCIDLogList();
+  },
+};
+</script>
+
+<template>
+  <div>
+    <el-button
+      type="primary"
+      size="mini"
+      @click.prevent="handleMenuSelect('/videoList')"
+      >视频列表</el-button
+    >
+    <el-button
+      type="primary"
+      size="mini"
+      @click.prevent="handleMenuSelect('/device')"
+      >设备管理</el-button
+    >
+    <el-button
+      type="primary"
+      size="mini"
+      @click.prevent="handleMenuSelect('/User')"
+      >用户</el-button
+    >
+    <el-button
+      type="primary"
+      size="mini"
+      @click.prevent="handleMenuSelect('/cid')"
+      >集成部署</el-button
+    >
+    <el-container style="height: 700px; border: 1px solid #eee">
+      <el-header style="font-size: 40px; background-color: rgb(238, 241, 246)"
+        >集成部署项目</el-header
+      >
+      <el-container>
+        <el-main>
+          <!-- 表单 -->
+          <el-form :inline="true" :model="tokenData" class="demo-form-inline">
+            <el-form-item>
+              <el-button
+                class="el-button--danger"
+                type="primary"
+                @click="getDeviceList()"
+                >查询</el-button
+              >
+            </el-form-item>
+            <el-form-item>
+              <el-button type="primary" @click="addDialogVisible = true"
+                >添加集成项目</el-button
+              >
+            </el-form-item>
+            <el-form-item>
+              <el-dialog
+                v-model="addDialogVisible"
+                title="添加集成项目"
+                width="50%"
+                :before-close="handleClose"
+              >
+                <!-- 内容主体区域 -->
+                <el-form
+                  ref="addFormRef"
+                  :model="addForm"
+                  :rules="addFormRules"
+                  label-width="70px"
+                >
+                  <el-form-item label="项目名称" prop="device_name">
+                    <el-input
+                      v-model="addForm.name"
+                      autocomplete="on"
+                      style="width: 400px" 
+                    ></el-input>
+                  </el-form-item>
+                  <el-form-item label="仓库地址" prop="device_ip">
+                    <el-input v-model="addForm.url"  style="width: 400px" autocomplete="on"></el-input>
+                  </el-form-item>
+                  <el-form-item label="脚本内容" prop="device_status">
+                    <el-input type="textarea" v-model="addForm.script" style="width: 400px" :autosize="{ minRows: 4, maxRows: 8 }" />
+                  </el-form-item>
+                </el-form>
+                <!-- 底部区域 -->
+                <template #footer>
+                  <span class="dialog-footer">
+                    <el-button @click="addDialogVisible = false"
+                      >取消</el-button
+                    >
+                    <el-button type="primary" @click="addCID()"
+                      >确定</el-button
+                    >
+                  </span>
+                </template>
+              </el-dialog>
+            </el-form-item>
+
+            <el-form-item>
+              <el-dialog
+                v-model="updateDialogVisible"
+                title="修改集成项目"
+                width="50%"
+                :before-close="handleClose"
+              >
+                <!-- 内容主体区域 -->
+                <el-form
+                  ref="addFormRef"
+                  :model="updateForm"
+                  :rules="updateFormRules"
+                  label-width="70px"
+                >
+                  <el-form-item label="项目名称" prop="device_name">
+                    <el-input
+                      v-model="updateForm.name"
+                      autocomplete="on"
+                      style="width: 400px" 
+                    ></el-input>
+                  </el-form-item>
+                  <el-form-item label="仓库地址" prop="device_ip">
+                    <el-input v-model="updateForm.url"  style="width: 400px" autocomplete="on"></el-input>
+                  </el-form-item>
+                  <el-form-item label="脚本内容" prop="device_status">
+                    <el-input type="textarea" v-model="updateForm.script" style="width: 400px" :autosize="{ minRows: 4, maxRows: 8 }" />
+                  </el-form-item>
+                  <el-form-item label="外部回调Token" prop="device_status">
+                    <el-input v-model="updateForm.cidtoken" style="width: 400px" />
+                    回调地址：https://gep.ljsea.xyz/cid/callback?token={{updateForm.cidtoken}}&id={{updateForm.id}}
+                  </el-form-item>
+                </el-form>
+                <!-- 底部区域 -->
+                <template #footer>
+                  <span class="dialog-footer">
+                    <el-button @click="updateDialogVisible = false"
+                      >取消</el-button
+                    >
+                    <el-button type="primary" @click="updateCID()"
+                      >确定</el-button
+                    >
+                  </span>
+                </template>
+              </el-dialog>
+            </el-form-item>
+          </el-form>
+
+          <!-- 表格  :row-style="this.tableRowClassName"-->
+          <el-table :data="tableData" width="100%" border>
+            :row-style="this.tableRowClassName"
+            <el-table-column prop="ID" label="id" width="80"></el-table-column>
+            <el-table-column
+              prop="CreatedAt"
+              label="创建时间"
+              width="100"
+            ></el-table-column>
+            <el-table-column
+              prop="Log"
+              label="运行日志"
+              width="180"
+            ></el-table-column>
+            <el-table-column
+              prop="Error"
+              label="错误信息"
+              width="250"
+            ></el-table-column>
+            <el-table-column label="操作" width="350">
+              <template #default="scope">
+                <el-button
+                  type="primary"
+                  size="mini"
+                  @click.prevent="updateButtonCID(scope.$index)"
+                  >详情</el-button
+                >
+                <!-- <el-button type="danger" size="mini">删除</el-button> -->
+              </template>
+            </el-table-column>
+          </el-table>
+          <br />
+
+          <!-- 分页条 -->
+          <!-- Pagination 分页 -->
+          <!-- <el-pagination
+            background
+            layout="total,sizes, prev, pager, next, jumper"
+            @size-change="handleSizeChange"
+            @current-change="handleCurrentChange"
+            :total="1000"
+          ></el-pagination> -->
+        </el-main>
+      </el-container>
+    </el-container>
+  </div>
+</template>
+<style>
+.blueRowbg {
+  background: "#488aff";
+}
+</style>
\ No newline at end of file