添加集成部分列表
This commit is contained in:
junleea
parent
6be1272d04
commit
aa7bc99004
|
|
@ -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 替换为您的令牌值
|
||||
}
|
||||
}
|
||||
);
|
||||
}
|
||||
|
|
@ -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'
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
Loading…
Reference in New Issue