133 lines
4.1 KiB
Vue
133 lines
4.1 KiB
Vue
|
<script>
|
||
|
|
import axios from "axios";
|
||
|
|
import { getVideoListService } from "@/api/video.js";
|
||
|
|
import { onMounted, ref } from "vue";
|
||
|
|
import token from "@/utils//global.js";
|
||
|
|
import router from "@/router/index.js";
|
||
|
|
|
||
|
|
export default {
|
||
|
|
// data() 返回的属性将会成为响应式的状态
|
||
|
|
// 并且暴露在 `this` 上
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
tableData: {},
|
||
|
|
tokenData: { token: "" },
|
||
|
|
};
|
||
|
|
},
|
||
|
|
|
||
|
|
// methods 是一些用来更改状态与触发更新的函数
|
||
|
|
// 它们可以在模板中作为事件处理器绑定
|
||
|
|
methods: {
|
||
|
|
async getVideoList() {
|
||
|
|
this.tokenData.token = token.value;
|
||
|
|
console.log(this.tokenData.token);
|
||
|
|
let result = {};
|
||
|
|
try {
|
||
|
|
result = await getVideoListService(this.tokenData);
|
||
|
|
} catch (e) {
|
||
|
|
console.log(e);
|
||
|
|
}
|
||
|
|
this.tableData = JSON.parse(result.data);
|
||
|
|
console.log(this.tableData[0]);
|
||
|
|
},
|
||
|
|
onSubmit() {
|
||
|
|
getVideoList({ token: token });
|
||
|
|
},
|
||
|
|
handleSizeChange() {
|
||
|
|
alert("每页记录数变化" + val);
|
||
|
|
},
|
||
|
|
handleCurrentChange() {
|
||
|
|
alert("页码发生变化" + val);
|
||
|
|
},
|
||
|
|
},
|
||
|
|
|
||
|
|
// 生命周期钩子会在组件生命周期的各个不同阶段被调用
|
||
|
|
// 例如这个函数就会在组件挂载完成后被调用
|
||
|
|
mounted() {
|
||
|
|
getVideoList();
|
||
|
|
},
|
||
|
|
};
|
||
|
|
</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="searchForm" class="demo-form-inline">
|
||
|
|
<el-form-item label="姓名">
|
||
|
|
<el-input v-model="searchForm.name" placeholder="姓名"></el-input>
|
||
|
|
</el-form-item>
|
||
|
|
|
||
|
|
<el-form-item label="性别">
|
||
|
|
<el-select v-model="searchForm.gender" placeholder="性别">
|
||
|
|
<el-option label="男" value="1"></el-option>
|
||
|
|
<el-option label="女" value="2"></el-option>
|
||
|
|
</el-select>
|
||
|
|
</el-form-item>
|
||
|
|
|
||
|
|
<el-form-item label="视频日期">
|
||
|
|
|
||
|
|
<el-date-picker
|
||
|
|
v-model="searchForm.entrydate"
|
||
|
|
type="daterange"
|
||
|
|
range-separator="至"
|
||
|
|
start-placeholder="开始日期"
|
||
|
|
end-placeholder="结束日期"
|
||
|
|
>
|
||
|
|
</el-date-picker>
|
||
|
|
</el-form-item>
|
||
|
|
|
||
|
|
<el-form-item>
|
||
|
|
<el-button type="primary" @click="onSubmit">查询</el-button>
|
||
|
|
</el-form-item>
|
||
|
|
</el-form> -->
|
||
|
|
|
||
|
|
<!-- 表格 -->
|
||
|
|
<el-table :data="tableData" border>
|
||
|
|
<el-table-column prop="id" label="id" width="250"></el-table-column>
|
||
|
|
<el-table-column
|
||
|
|
prop="video_name"
|
||
|
|
label="视频名称"
|
||
|
|
width="250"
|
||
|
|
></el-table-column>
|
||
|
|
<el-table-column label="是否有人" width="250">
|
||
|
|
<template human="human">
|
||
|
|
{{ human.row.human == 1 ? "有" : "无" }}
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column
|
||
|
|
prop="create_time"
|
||
|
|
label="创建时间"
|
||
|
|
width="250"
|
||
|
|
></el-table-column>
|
||
|
|
<el-table-column
|
||
|
|
prop="delete_time"
|
||
|
|
label="预期删除时间"
|
||
|
|
width="250"
|
||
|
|
></el-table-column>
|
||
|
|
<el-table-column label="操作">
|
||
|
|
<el-button type="primary" size="mini">播放</el-button>
|
||
|
|
<el-button type="danger" size="mini">删除</el-button>
|
||
|
|
</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>
|