添加device查看页面，添加查询及重启设备两个功能，添加device.js进行请求的处理，在request添加本地调试url
This commit is contained in:
junleea
parent
3d45f5259c
commit
86de762a66
|
|
@ -4,7 +4,7 @@
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<link rel="icon" href="/favicon.ico">
|
<link rel="icon" href="/favicon.ico">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>Vite App</title>
|
<title>VP</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="app"></div>
|
<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 LoginVue from "@/views/Login.vue";
|
||||||
import VideoVue from "@/views/Video.vue";
|
import VideoVue from "@/views/Video.vue";
|
||||||
import VideoListVue from "@/views/VideoList.vue";
|
import VideoListVue from "@/views/VideoList.vue";
|
||||||
|
import DeviceListVue from "@/views/DeviceList.vue";
|
||||||
|
|
||||||
const routes = [
|
const routes = [
|
||||||
{
|
{
|
||||||
|
|
@ -20,6 +21,11 @@ const routes = [
|
||||||
name: 'VideoList',
|
name: 'VideoList',
|
||||||
component: VideoListVue
|
component: VideoListVue
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
path: '/device',
|
||||||
|
name: 'Device',
|
||||||
|
component: DeviceListVue
|
||||||
|
},
|
||||||
{
|
{
|
||||||
path: '/',
|
path: '/',
|
||||||
redirect: '/login'
|
redirect: '/login'
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,7 @@
|
||||||
import axios from "axios";
|
import axios from "axios";
|
||||||
import router from "@/router/index.js";
|
import router from "@/router/index.js";
|
||||||
const baseURL = "https://jp.ljsea.top/";
|
const baseURL = "https://jp.ljsea.top/";
|
||||||
|
//const baseURL= "http://localhost:8082";
|
||||||
const request = axios.create({
|
const request = axios.create({
|
||||||
baseURL: baseURL,
|
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 {
|
try {
|
||||||
const response = await axios.get("https://ipinfo.io/json");
|
const response = await axios.get("https://ipinfo.io/json");
|
||||||
loginData.value.ip =response.data.ip;
|
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("ip:",response.data.ip);
|
||||||
// console.log("login ip:",loginData.ip);
|
// console.log("login ip:",loginData.ip);
|
||||||
// console.log(response.data);
|
// console.log(response.data);
|
||||||
|
|
|
||||||
|
|
@ -55,6 +55,11 @@ export default {
|
||||||
console.log("file_size", this.file_sum_size, "len=", len);
|
console.log("file_size", this.file_sum_size, "len=", len);
|
||||||
this.tableData = data;
|
this.tableData = data;
|
||||||
},
|
},
|
||||||
|
logout(){
|
||||||
|
//退出登录
|
||||||
|
localStorage.clear();
|
||||||
|
router.push("/login");
|
||||||
|
},
|
||||||
onSubmit() {
|
onSubmit() {
|
||||||
getVideoList({ token: token });
|
getVideoList({ token: token });
|
||||||
},
|
},
|
||||||
|
|
@ -120,9 +125,31 @@ export default {
|
||||||
},
|
},
|
||||||
async delayVideo(index) {
|
async delayVideo(index) {
|
||||||
var id = this.tableData[index].id;
|
var id = this.tableData[index].id;
|
||||||
var days = 10;
|
var days = 15;
|
||||||
var delay_data = {
|
var delay_data = {
|
||||||
id: id,
|
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,
|
ip:this.ip,
|
||||||
delay: days,
|
delay: days,
|
||||||
userId: this.tokenData.userId,
|
userId: this.tokenData.userId,
|
||||||
|
|
@ -149,7 +176,9 @@ export default {
|
||||||
console.error(error);
|
console.error(error);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
toDeviceM(){
|
||||||
|
router.push("/device");
|
||||||
|
},
|
||||||
// 修改条纹颜色
|
// 修改条纹颜色
|
||||||
tableRowClassName({ row, rowIndex }) {
|
tableRowClassName({ row, rowIndex }) {
|
||||||
if (row.human === 1) {
|
if (row.human === 1) {
|
||||||
|
|
@ -228,6 +257,15 @@ export default {
|
||||||
<el-form-item>
|
<el-form-item>
|
||||||
<el-button type="primary" @click="getVideoList()">查询</el-button>
|
<el-button type="primary" @click="getVideoList()">查询</el-button>
|
||||||
</el-form-item>
|
</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>
|
<!-- <el-form-item>
|
||||||
所有文件大小： {{ parseFloat(this.file_sum_size/1024/1024).toFixed(2) }} GB
|
所有文件大小： {{ parseFloat(this.file_sum_size/1024/1024).toFixed(2) }} GB
|
||||||
</el-form-item> -->
|
</el-form-item> -->
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue