添加device查看页面，添加查询及重启设备两个功能，添加device.js进行请求的处理，在request添加本地调试url
This commit is contained in:
junleea
parent
3d45f5259c
commit
86de762a66
|
|
@ -4,7 +4,7 @@
|
|||
<meta charset="UTF-8">
|
||||
<link rel="icon" href="/favicon.ico">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Vite App</title>
|
||||
<title>VP</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 4.2 KiB After Width: | Height: | Size: 15 KiB |
|
|
@ -0,0 +1,40 @@
|
|||
import request from '@/utils/request.js'
|
||||
|
||||
export const restartDeviceService = (data) => {
|
||||
const params = new URLSearchParams();
|
||||
for (let key in data) {
|
||||
params.append(key, data[key])
|
||||
}
|
||||
return request.post('/camera/restart', params, Headers = {Authorization: data.Authorization });
|
||||
}
|
||||
|
||||
export const updateDeviceService = (data) => {
|
||||
const params = new URLSearchParams();
|
||||
for (let key in data) {
|
||||
params.append(key, data[key])
|
||||
}
|
||||
return request.post('/device/update', params, Headers = {Authorization: data.Authorization });
|
||||
}
|
||||
|
||||
export const addDeviceService = (data) => {
|
||||
const params = new URLSearchParams();
|
||||
for (let key in data) {
|
||||
params.append(key, data[key])
|
||||
}
|
||||
return request.post('/device/add', params, Headers = {Authorization: data.Authorization });
|
||||
}
|
||||
|
||||
export const getDeviceListService = (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('/camera/list', params, {
|
||||
headers: {
|
||||
'token': data.token, // 将 token 替换为您的令牌值
|
||||
}
|
||||
}
|
||||
);
|
||||
}
|
||||
|
|
@ -3,6 +3,7 @@ import {createWebHistory, createRouter} from "vue-router";
|
|||
import LoginVue from "@/views/Login.vue";
|
||||
import VideoVue from "@/views/Video.vue";
|
||||
import VideoListVue from "@/views/VideoList.vue";
|
||||
import DeviceListVue from "@/views/DeviceList.vue";
|
||||
|
||||
const routes = [
|
||||
{
|
||||
|
|
@ -20,6 +21,11 @@ const routes = [
|
|||
name: 'VideoList',
|
||||
component: VideoListVue
|
||||
},
|
||||
{
|
||||
path: '/device',
|
||||
name: 'Device',
|
||||
component: DeviceListVue
|
||||
},
|
||||
{
|
||||
path: '/',
|
||||
redirect: '/login'
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
import axios from "axios";
|
||||
import router from "@/router/index.js";
|
||||
const baseURL = "https://jp.ljsea.top/";
|
||||
//const baseURL= "http://localhost:8082";
|
||||
const request = axios.create({
|
||||
baseURL: baseURL,
|
||||
});
|
||||
|
|
|
|||
|
|
@ -0,0 +1,228 @@
|
|||
<script>
|
||||
import axios from "axios";
|
||||
import { inject } from "vue";
|
||||
import { getDeviceListService } from "@/api/device.js";
|
||||
import { restartDeviceService } 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"),
|
||||
},
|
||||
searchForm: {
|
||||
hour: 0,
|
||||
entrydate: [],
|
||||
},
|
||||
};
|
||||
},
|
||||
|
||||
// methods 是一些用来更改状态与触发更新的函数
|
||||
// 它们可以在模板中作为事件处理器绑定
|
||||
methods: {
|
||||
async getDeviceList() {
|
||||
let result = {};
|
||||
try {
|
||||
result = await getDeviceListService(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 restartDevice(index) {
|
||||
var id = this.tableData[index].device_id;
|
||||
var restart_data = {
|
||||
id: id,
|
||||
option: "one",
|
||||
ip: this.ip,
|
||||
userId: this.tokenData.userId,
|
||||
token: this.tokenData.token,
|
||||
};
|
||||
try {
|
||||
var d_re = await restartDeviceService(restart_data);
|
||||
if (d_re.code == 0) {
|
||||
alert("重启成功");
|
||||
} 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 restartDeviceService(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);
|
||||
}
|
||||
},
|
||||
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-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 type="primary" @click="getDeviceList()">查询</el-button>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="logout()">退出登录</el-button>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="toVideoList()">返回监控视频</el-button>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="restartAllDevice('all')"
|
||||
>重启全部设备</el-button
|
||||
>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<!-- 表格 :row-style="this.tableRowClassName"-->
|
||||
<el-table :data="tableData" width="100%" border>
|
||||
:row-style="this.tableRowClassName"
|
||||
<el-table-column prop="device_id" label="id" width="80"></el-table-column>
|
||||
<el-table-column
|
||||
prop="device_name"
|
||||
label="设备名称"
|
||||
width="100"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
prop="device_location"
|
||||
label="设备位置"
|
||||
width="180"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
prop="device_ip"
|
||||
label="设备ip"
|
||||
width="120"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
prop="device_status"
|
||||
label="设备状态"
|
||||
width="80"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
prop="device_type"
|
||||
label="设备类型"
|
||||
width="120"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
prop="device_info"
|
||||
label="设备信息"
|
||||
width="150"
|
||||
></el-table-column>
|
||||
<el-table-column label="操作" width="300">
|
||||
<template #default="scope">
|
||||
<el-button
|
||||
type="primary"
|
||||
size="mini"
|
||||
@click.prevent="restartDevice(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>
|
||||
|
|
@ -169,6 +169,8 @@ const getIpClient= async() => {
|
|||
try {
|
||||
const response = await axios.get("https://ipinfo.io/json");
|
||||
loginData.value.ip =response.data.ip;
|
||||
localStorage.setItem("ip", response.data.ip);
|
||||
localStorage.setItem("city", response.data.city);
|
||||
// console.log("ip:",response.data.ip);
|
||||
// console.log("login ip:",loginData.ip);
|
||||
// console.log(response.data);
|
||||
|
|
|
|||
|
|
@ -55,6 +55,11 @@ export default {
|
|||
console.log("file_size", this.file_sum_size, "len=", len);
|
||||
this.tableData = data;
|
||||
},
|
||||
logout(){
|
||||
//退出登录
|
||||
localStorage.clear();
|
||||
router.push("/login");
|
||||
},
|
||||
onSubmit() {
|
||||
getVideoList({ token: token });
|
||||
},
|
||||
|
|
@ -120,9 +125,31 @@ export default {
|
|||
},
|
||||
async delayVideo(index) {
|
||||
var id = this.tableData[index].id;
|
||||
var days = 10;
|
||||
var days = 15;
|
||||
var delay_data = {
|
||||
id: id,
|
||||
option:"one",
|
||||
ip:this.ip,
|
||||
delay: days,
|
||||
userId: this.tokenData.userId,
|
||||
token: this.tokenData.token,
|
||||
};
|
||||
try {
|
||||
var d_re = await delayVideoService(delay_data);
|
||||
if (d_re.code == 0) {
|
||||
alert("延迟成功");
|
||||
} else {
|
||||
alert("操作失败");
|
||||
}
|
||||
} catch (e) {
|
||||
console.log(e);
|
||||
}
|
||||
},
|
||||
async delayAllVideo() {
|
||||
var days = 15;
|
||||
var delay_data = {
|
||||
id: -1,
|
||||
option:"all",
|
||||
ip:this.ip,
|
||||
delay: days,
|
||||
userId: this.tokenData.userId,
|
||||
|
|
@ -149,7 +176,9 @@ export default {
|
|||
console.error(error);
|
||||
}
|
||||
},
|
||||
|
||||
toDeviceM(){
|
||||
router.push("/device");
|
||||
},
|
||||
// 修改条纹颜色
|
||||
tableRowClassName({ row, rowIndex }) {
|
||||
if (row.human === 1) {
|
||||
|
|
@ -228,6 +257,15 @@ export default {
|
|||
<el-form-item>
|
||||
<el-button type="primary" @click="getVideoList()">查询</el-button>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="logout()">退出登录</el-button>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="delayAllVideo('all')">全部延迟删除</el-button>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="toDeviceM()">设备信息</el-button>
|
||||
</el-form-item>
|
||||
<!-- <el-form-item>
|
||||
所有文件大小： {{ parseFloat(this.file_sum_size/1024/1024).toFixed(2) }} GB
|
||||
</el-form-item> -->
|
||||
|
|
|
|||
Loading…
Reference in New Issue