From aa7bc99004ef30df5e597f5f79fdc63af9c80c50 Mon Sep 17 00:00:00 2001
From: junleea <354425203@qq.com>
Date: Fri, 5 Jul 2024 15:47:33 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E9=9B=86=E6=88=90=E9=83=A8?=
 =?UTF-8?q?=E5=88=86=E5=88=97=E8=A1=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/cid.js           |  48 +++++
 src/router/index.js      |   7 +
 src/views/CIDList.vue    | 441 +++++++++++++++++++++++++++++++++++++++
 src/views/CIDLog.vue     |   0
 src/views/DeviceList.vue |   6 +
 src/views/VideoList.vue  |   6 +
 6 files changed, 508 insertions(+)
 create mode 100644 src/api/cid.js
 create mode 100644 src/views/CIDList.vue
 create mode 100644 src/views/CIDLog.vue

diff --git a/src/api/cid.js b/src/api/cid.js
new file mode 100644
index 0000000..af0b8ed
--- /dev/null
+++ b/src/api/cid.js
@@ -0,0 +1,48 @@
+import request from '@/utils/request.js'
+
+export const restartCIDService = (data) => {
+    const params = new URLSearchParams();
+    for (let key in data) {
+        params.append(key, data[key])
+    }
+    return request.post('/cid/restart', params, { "headers": { 'token': data.token } });
+}
+
+export const updateCIDService = (data) => {
+    const params = new URLSearchParams();
+    for (let key in data) {
+        params.append(key, data[key])
+    }
+    return request.post('/cid/update', params, { "headers": { 'token': data.token } });
+}
+
+export const deleteCIDService = (data) => {
+    const params = new URLSearchParams();
+    for (let key in data) {
+        params.append(key, data[key])
+    }
+    return request.post('/cid/delete', params, { "headers": { 'token': data.token } });
+}
+
+export const addCIDService = (data) => {
+    const params = new URLSearchParams();
+    for (let key in data) {
+        params.append(key, data[key])
+    }
+    return request.post('/cid/create', params, { "headers": { 'token': data.token },'Content-Type': 'application/json' });
+}
+
+export const getCIDListService = (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/list', 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 fc44c0b..bb83e2a 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -6,6 +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";
 
 const routes = [
     {
@@ -38,6 +40,11 @@ const routes = [
         name: 'User',
         component: UserListVue
     },
+    {
+        path: '/cid',
+        name: 'CID',
+        component: CIDListVue
+    },
     {
         path: '/',
         redirect: '/login'
diff --git a/src/views/CIDList.vue b/src/views/CIDList.vue
new file mode 100644
index 0000000..cbce244
--- /dev/null
+++ b/src/views/CIDList.vue
@@ -0,0 +1,441 @@
+<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 router from "@/router/index.js";
+
+export default {
+  data() {
+    return {
+      ip: "",
+      tableData: [],
+      tokenData: {
+        token: localStorage.getItem("token"),
+        ip: localStorage.getItem("ip"),
+        userId: localStorage.getItem("userId"),
+        username: localStorage.getItem("username"),
+      },
+      addDialogVisible: false,
+      updateDialogVisible: false,
+      searchForm: {
+        hour: 0,
+        entrydate: [],
+      },
+      addForm: {
+        name: "",
+        url: "",
+        script: "",
+        token: localStorage.getItem("token"),
+      },
+      updateForm: {
+        id:0,
+        device_name: "",
+        device_ip: "",
+        device_status: "",
+        device_info: "",
+        device_location: "",
+        device_type: "",
+        auth_id: -1,
+        token: localStorage.getItem("token"),
+      },
+    };
+  },
+
+  // methods 是一些用来更改状态与触发更新的函数
+  // 它们可以在模板中作为事件处理器绑定
+  methods: {
+    async getDeviceList() {
+      let result = {};
+      try {
+        result = await getCIDListService(this.tokenData);
+      } catch (e) {
+        console.log(e);
+      }
+      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;
+    },
+    onSubmit() {
+      getDeviceList({ token: token });
+    },
+    handleSizeChange() {
+      alert("每页记录数变化" + val);
+    },
+    handleCurrentChange() {
+      alert("页码发生变化" + val);
+    },
+
+    //设置项目执行构建部署
+    async runCID(index) {
+      var id = this.tableData[index].ID;
+      var restart_data = {
+        id: id,
+        option: "one",
+        ip: this.ip,
+        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 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.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.id = id;
+      this.updateDialogVisible= true;
+    },
+    async addDevice() {
+      this.addDialogVisible = false;
+      let result = {};
+      try {
+        result = await addDeviceService(this.addForm);
+        if (result.code == 0) {
+          alert("添加成功");
+        } else {
+          alert("添加失败");
+        }
+      } catch (e) {
+        console.log(e);
+      }
+    },
+    async updateDevice() {
+      this.updateDialogVisible = false;
+      let result = {};
+      try {
+        result = await updateDeviceService(this.updateForm);
+        if (result.code == 0) {
+          alert("修改成功");
+          this.getDeviceList()
+        } else {
+          alert("修改失败");
+        }
+      } catch (e) {
+        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");
+        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.getDeviceList();
+  },
+};
+</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="70%"
+                :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"
+                    ></el-input>
+                  </el-form-item>
+                  <el-form-item label="仓库地址" prop="device_ip">
+                    <el-input v-model="addForm.url"></el-input>
+                  </el-form-item>
+                  <el-form-item label="脚本内容" prop="device_status">
+                    <el-textarea
+                      v-model="addForm.script"
+                      placeholder="请输入内容"
+                    ></el-textarea>
+                  </el-form-item>
+                </el-form>
+                <!-- 底部区域 -->
+                <template #footer>
+                  <span class="dialog-footer">
+                    <el-button @click="addDialogVisible = false"
+                      >取消</el-button
+                    >
+                    <el-button type="primary" @click="addDevice()"
+                      >确定</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="updateFormRef"
+                  :model="updateForm"
+                  :rules="updateFormRules"
+                  label-width="70px"
+                >
+                  <el-form-item label="设备名称" prop="device_name">
+                    <el-input
+                      v-model="updateForm.device_name"
+                      autocomplete="on"
+                    ></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>
+                  <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>
+                  <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>
+                </el-form>
+                <!-- 底部区域 -->
+                <template #footer>
+                  <span class="dialog-footer">
+                    <el-button @click="updateDialogVisible = false"
+                      >取消</el-button
+                    >
+                    <el-button type="primary" @click="updateDevice()"
+                      >确定</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="Name"
+              label="名称"
+              width="100"
+            ></el-table-column>
+            <el-table-column
+              prop="Url"
+              label="仓库地址"
+              width="180"
+            ></el-table-column>
+            <el-table-column
+              prop="Script"
+              label="脚本消息"
+              width="250"
+            ></el-table-column>
+            <el-table-column
+              prop="token"
+              label="回调Token"
+              width="100"
+            ></el-table-column>
+            <el-table-column label="操作" width="300">
+              <template #default="scope">
+                <el-button
+                  type="primary"
+                  size="mini"
+                  @click.prevent="runCID(scope.$index)"
+                  >运行</el-button
+                >
+                <el-button
+                  type="primary"
+                  size="mini"
+                  @click.prevent="updateButtonCID(scope.$index)"
+                  >修改</el-button
+                >
+                <el-button
+                  type="primary"
+                  size="mini"
+                  @click.prevent="deleteCID(scope.$index)"
+                  >删除</el-button
+                >
+                <el-button
+                  type="primary"
+                  size="mini"
+                  @click.prevent="toRunCIDLog(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
diff --git a/src/views/CIDLog.vue b/src/views/CIDLog.vue
new file mode 100644
index 0000000..e69de29
diff --git a/src/views/DeviceList.vue b/src/views/DeviceList.vue
index 580f17b..dc602be 100644
--- a/src/views/DeviceList.vue
+++ b/src/views/DeviceList.vue
@@ -243,6 +243,12 @@ export default {
       @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
diff --git a/src/views/VideoList.vue b/src/views/VideoList.vue
index 31cc530..3fee494 100644
--- a/src/views/VideoList.vue
+++ b/src/views/VideoList.vue
@@ -233,6 +233,12 @@ export default {
     <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