Merge remote-tracking branch 'origin/dev/录制计划'
This commit is contained in:
648540858
236
web_src/src/components/RecordPLan.vue
Executable file
236
web_src/src/components/RecordPLan.vue
Executable file
@@ -0,0 +1,236 @@
|
||||
<template>
|
||||
<div id="recordPLan" style="width: 100%">
|
||||
<div class="page-header">
|
||||
<div class="page-title">
|
||||
<div >录像计划</div>
|
||||
</div>
|
||||
<div class="page-header-btn">
|
||||
<div style="display: inline;">
|
||||
搜索:
|
||||
<el-input @input="search" style="margin-right: 1rem; width: auto;" size="mini" placeholder="关键字"
|
||||
prefix-icon="el-icon-search" v-model="searchSrt" clearable></el-input>
|
||||
<el-button size="mini" type="primary" @click="add()">
|
||||
添加
|
||||
</el-button>
|
||||
<el-button icon="el-icon-refresh-right" circle size="mini" @click="getRecordPlanList()"></el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<el-table size="medium" ref="recordPlanListTable" :data="recordPlanList" :height="winHeight" style="width: 100%"
|
||||
header-row-class-name="table-header" >
|
||||
<el-table-column type="selection" width="55" >
|
||||
</el-table-column>
|
||||
<el-table-column prop="name" label="名称" >
|
||||
</el-table-column>
|
||||
<el-table-column prop="channelCount" label="关联通道" >
|
||||
</el-table-column>
|
||||
<el-table-column prop="updateTime" label="更新时间">
|
||||
</el-table-column>
|
||||
<el-table-column prop="createTime" label="创建时间">
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="300" fixed="right">
|
||||
<template v-slot:default="scope">
|
||||
<el-button size="medium" icon="el-icon-link" type="text" @click="link(scope.row)">关联通道</el-button>
|
||||
<el-button size="medium" icon="el-icon-edit" type="text" @click="edit(scope.row)">编辑</el-button>
|
||||
<el-button size="medium" icon="el-icon-delete" style="color: #f56c6c" type="text" @click="deletePlan(scope.row)">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<el-pagination
|
||||
style="text-align: right"
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="currentChange"
|
||||
:current-page="currentPage"
|
||||
:page-size="count"
|
||||
:page-sizes="[15, 25, 35, 50]"
|
||||
layout="total, sizes, prev, pager, next"
|
||||
:total="total">
|
||||
</el-pagination>
|
||||
<editRecordPlan ref="editRecordPlan"></editRecordPlan>
|
||||
<LinkChannelRecord ref="linkChannelRecord"></LinkChannelRecord>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import uiHeader from '../layout/UiHeader.vue'
|
||||
import EditRecordPlan from "./dialog/editRecordPlan.vue";
|
||||
import LinkChannelRecord from "./dialog/linkChannelRecord.vue";
|
||||
|
||||
export default {
|
||||
name: 'recordPLan',
|
||||
components: {
|
||||
EditRecordPlan,
|
||||
LinkChannelRecord,
|
||||
uiHeader,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
recordPlanList: [],
|
||||
searchSrt: "",
|
||||
winHeight: window.innerHeight - 180,
|
||||
currentPage: 1,
|
||||
count: 15,
|
||||
total: 0,
|
||||
loading: false,
|
||||
};
|
||||
},
|
||||
|
||||
created() {
|
||||
this.initData();
|
||||
},
|
||||
destroyed() {
|
||||
},
|
||||
methods: {
|
||||
initData: function () {
|
||||
this.getRecordPlanList();
|
||||
},
|
||||
currentChange: function (val) {
|
||||
this.currentPage = val;
|
||||
this.initData();
|
||||
},
|
||||
handleSizeChange: function (val) {
|
||||
this.count = val;
|
||||
this.getRecordPlanList();
|
||||
},
|
||||
getRecordPlanList: function () {
|
||||
this.$axios({
|
||||
method: 'get',
|
||||
url: `/api/record/plan/query`,
|
||||
params: {
|
||||
page: this.currentPage,
|
||||
count: this.count,
|
||||
query: this.searchSrt,
|
||||
}
|
||||
}).then((res) => {
|
||||
if (res.data.code === 0) {
|
||||
this.total = res.data.data.total;
|
||||
this.recordPlanList = res.data.data.list;
|
||||
// 防止出现表格错位
|
||||
this.$nextTick(() => {
|
||||
this.$refs.recordPlanListTable.doLayout();
|
||||
})
|
||||
}
|
||||
|
||||
}).catch((error) => {
|
||||
console.log(error);
|
||||
});
|
||||
},
|
||||
getSnap: function (row) {
|
||||
let baseUrl = window.baseUrl ? window.baseUrl : "";
|
||||
return ((process.env.NODE_ENV === 'development') ? process.env.BASE_API : baseUrl) + '/api/device/query/snap/' + this.deviceId + '/' + row.deviceId;
|
||||
},
|
||||
search: function () {
|
||||
this.currentPage = 1;
|
||||
this.total = 0;
|
||||
this.initData();
|
||||
},
|
||||
refresh: function () {
|
||||
this.initData();
|
||||
},
|
||||
add: function () {
|
||||
this.$refs.editRecordPlan.openDialog(null, ()=>{
|
||||
this.initData()
|
||||
})
|
||||
},
|
||||
edit: function (plan) {
|
||||
this.$refs.editRecordPlan.openDialog(plan, ()=>{
|
||||
this.initData()
|
||||
})
|
||||
},
|
||||
link: function (plan) {
|
||||
this.$refs.linkChannelRecord.openDialog(plan.id, ()=>{
|
||||
this.initData()
|
||||
})
|
||||
},
|
||||
deletePlan: function (plan) {
|
||||
this.$confirm('确定删除?', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
this.$axios({
|
||||
method: 'delete',
|
||||
url: "/api/record/plan/delete",
|
||||
params: {
|
||||
planId: plan.id,
|
||||
}
|
||||
}).then((res) => {
|
||||
if (res.data.code === 0) {
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: '删除成功',
|
||||
type: 'success',
|
||||
});
|
||||
this.initData();
|
||||
} else {
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: res.data.msg,
|
||||
type: 'error'
|
||||
});
|
||||
}
|
||||
}).catch((error) => {
|
||||
console.error(error)
|
||||
});
|
||||
}).catch(() => {
|
||||
|
||||
});
|
||||
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.videoList {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-content: flex-start;
|
||||
}
|
||||
|
||||
.video-item {
|
||||
position: relative;
|
||||
width: 15rem;
|
||||
height: 10rem;
|
||||
margin-right: 1rem;
|
||||
background-color: #000000;
|
||||
}
|
||||
|
||||
.video-item-img {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: auto;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.video-item-img:after {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: auto;
|
||||
width: 3rem;
|
||||
height: 3rem;
|
||||
background-image: url("../assets/loading.png");
|
||||
background-size: cover;
|
||||
background-color: #000000;
|
||||
}
|
||||
|
||||
.video-item-title {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
color: #000000;
|
||||
background-color: #ffffff;
|
||||
line-height: 1.5rem;
|
||||
padding: 0.3rem;
|
||||
width: 14.4rem;
|
||||
}
|
||||
</style>
|
||||
228
web_src/src/components/dialog/editRecordPlan.vue
Normal file
228
web_src/src/components/dialog/editRecordPlan.vue
Normal file
@@ -0,0 +1,228 @@
|
||||
<template>
|
||||
<div id="editRecordPlan" v-loading="loading" style="text-align: left;">
|
||||
<el-dialog
|
||||
title="录制计划"
|
||||
width="700px"
|
||||
top="2rem"
|
||||
:close-on-click-modal="false"
|
||||
:visible.sync="showDialog"
|
||||
:destroy-on-close="true"
|
||||
@close="close()"
|
||||
>
|
||||
<div id="shared" style="margin-right: 20px;">
|
||||
<el-form >
|
||||
<el-form-item label="名称">
|
||||
<el-input type="text" v-model="planName"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<ByteWeektimePicker v-model="byteTime" name="name"/>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<div style="float: right; margin-top: 20px">
|
||||
<el-button type="primary" @click="onSubmit">保存</el-button>
|
||||
<el-button @click="close">取消</el-button>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ByteWeektimePicker } from 'byte-weektime-picker'
|
||||
|
||||
|
||||
export default {
|
||||
name: "editRecordPlan",
|
||||
props: {},
|
||||
components: {ByteWeektimePicker},
|
||||
created() {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
options: [],
|
||||
loading: false,
|
||||
edit: false,
|
||||
planName: null,
|
||||
id: null,
|
||||
showDialog: false,
|
||||
endCallback: "",
|
||||
byteTime: "",
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
openDialog: function (recordPlan, endCallback) {
|
||||
this.endCallback = endCallback;
|
||||
this.showDialog = true;
|
||||
this.byteTime= "";
|
||||
if (recordPlan) {
|
||||
this.edit = true
|
||||
this.planName = recordPlan.name
|
||||
this.id = recordPlan.id
|
||||
this.$axios({
|
||||
method: 'get',
|
||||
url: "/api/record/plan/get",
|
||||
params: {
|
||||
planId: recordPlan.id,
|
||||
}
|
||||
}).then((res) => {
|
||||
if (res.data.code === 0 && res.data.data.planItemList) {
|
||||
this.byteTime = this.plan2Byte(res.data.data.planItemList)
|
||||
}
|
||||
}).catch((error) => {
|
||||
console.error(error)
|
||||
});
|
||||
|
||||
}
|
||||
},
|
||||
onSubmit: function () {
|
||||
let planList = this.byteTime2PlanList();
|
||||
if (!this.edit) {
|
||||
this.$axios({
|
||||
method: 'post',
|
||||
url: "/api/record/plan/add",
|
||||
data: {
|
||||
name: this.planName,
|
||||
planItemList: planList
|
||||
}
|
||||
}).then((res) => {
|
||||
if (res.data.code === 0) {
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: '添加成功',
|
||||
type: 'success',
|
||||
});
|
||||
this.showDialog = false;
|
||||
this.endCallback()
|
||||
} else {
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: res.data.msg,
|
||||
type: 'error'
|
||||
});
|
||||
}
|
||||
}).catch((error) => {
|
||||
console.error(error)
|
||||
});
|
||||
}else {
|
||||
this.$axios({
|
||||
method: 'post',
|
||||
url: "/api/record/plan/update",
|
||||
data: {
|
||||
id: this.id,
|
||||
name: this.planName,
|
||||
planItemList: planList
|
||||
}
|
||||
}).then((res) => {
|
||||
if (res.data.code === 0) {
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: '更新成功',
|
||||
type: 'success',
|
||||
});
|
||||
this.showDialog = false;
|
||||
this.endCallback()
|
||||
} else {
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: res.data.msg,
|
||||
type: 'error'
|
||||
});
|
||||
}
|
||||
}).catch((error) => {
|
||||
console.error(error)
|
||||
});
|
||||
}
|
||||
|
||||
},
|
||||
close: function () {
|
||||
this.showDialog = false;
|
||||
this.id = null
|
||||
this.planName = null
|
||||
this.byteTime = ""
|
||||
this.endCallback = ""
|
||||
if(this.endCallback) {
|
||||
this.endCallback();
|
||||
}
|
||||
},
|
||||
byteTime2PlanList() {
|
||||
if (this.byteTime.length === 0) {
|
||||
return;
|
||||
}
|
||||
const DayTimes = 24 * 2;
|
||||
let planList = []
|
||||
let week = 1;
|
||||
// 把 336长度的 list 分成 7 组，每组 48 个
|
||||
for (let i = 0; i < this.byteTime.length; i += DayTimes) {
|
||||
let planArray = this.byteTime2Plan(this.byteTime.slice(i, i + DayTimes));
|
||||
if(!planArray || planArray.length === 0) {
|
||||
week ++;
|
||||
continue
|
||||
}
|
||||
for (let j = 0; j < planArray.length; j++) {
|
||||
planList.push({
|
||||
planId: this.id,
|
||||
start: planArray[j].start,
|
||||
stop: planArray[j].stop,
|
||||
weekDay: week
|
||||
})
|
||||
}
|
||||
week ++;
|
||||
}
|
||||
return planList
|
||||
},
|
||||
byteTime2Plan(weekItem){
|
||||
let start = null;
|
||||
let stop = null;
|
||||
let result = []
|
||||
for (let i = 0; i < weekItem.length; i++) {
|
||||
let item = weekItem[i]
|
||||
if (item === '1') { // 表示选中
|
||||
stop = i
|
||||
if (start === null ) {
|
||||
start = i
|
||||
}
|
||||
if (i === weekItem.length - 1 && start != null && stop != null) {
|
||||
result.push({
|
||||
start: start,
|
||||
stop: stop,
|
||||
})
|
||||
}
|
||||
} else {
|
||||
if (stop !== null){
|
||||
result.push({
|
||||
start: start,
|
||||
stop: stop,
|
||||
})
|
||||
start = null
|
||||
stop = null
|
||||
}
|
||||
}
|
||||
}
|
||||
return result;
|
||||
},
|
||||
plan2Byte(planList) {
|
||||
let byte = ""
|
||||
let indexArray = {}
|
||||
for (let i = 0; i < planList.length; i++) {
|
||||
|
||||
let weekDay = planList[i].weekDay
|
||||
let index = planList[i].start
|
||||
let endIndex = planList[i].stop
|
||||
for (let j = index; j <= endIndex; j++) {
|
||||
indexArray["key_" + (j + (weekDay - 1 )*48)] = 1
|
||||
}
|
||||
}
|
||||
for (let i = 0; i < 336; i++) {
|
||||
if (indexArray["key_" + i]){
|
||||
byte += "1"
|
||||
}else {
|
||||
byte += "0"
|
||||
}
|
||||
}
|
||||
return byte
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
355
web_src/src/components/dialog/linkChannelRecord.vue
Executable file
355
web_src/src/components/dialog/linkChannelRecord.vue
Executable file
@@ -0,0 +1,355 @@
|
||||
<template>
|
||||
<div id="linkChannelRecord" style="width: 100%; background-color: #FFFFFF; display: grid; grid-template-columns: 200px auto;">
|
||||
<el-dialog title="通道关联" v-loading="dialogLoading" v-if="showDialog" top="2rem" width="80%" :close-on-click-modal="false" :visible.sync="showDialog" :destroy-on-close="true" @close="close()">
|
||||
<div style="display: grid; grid-template-columns: 100px auto;">
|
||||
<el-tabs tab-position="left" style="" v-model="hasLink" @tab-click="search">
|
||||
<el-tab-pane label="未关联" name="false"></el-tab-pane>
|
||||
<el-tab-pane label="已关联" name="true"></el-tab-pane>
|
||||
</el-tabs>
|
||||
<div>
|
||||
<div class="page-header">
|
||||
<div class="page-header-btn" >
|
||||
<div style="display: inline;">
|
||||
搜索:
|
||||
<el-input @input="search" style="margin-right: 1rem; width: auto;" size="mini" placeholder="关键字"
|
||||
prefix-icon="el-icon-search" v-model="searchSrt" clearable></el-input>
|
||||
|
||||
在线状态:
|
||||
<el-select size="mini" style="width: 8rem; margin-right: 1rem;" @change="search" v-model="online" placeholder="请选择"
|
||||
default-first-option>
|
||||
<el-option label="全部" value=""></el-option>
|
||||
<el-option label="在线" value="true"></el-option>
|
||||
<el-option label="离线" value="false"></el-option>
|
||||
</el-select>
|
||||
类型:
|
||||
<el-select size="mini" style="width: 8rem; margin-right: 1rem;" @change="search" v-model="channelType" placeholder="请选择"
|
||||
default-first-option>
|
||||
<el-option label="全部" value=""></el-option>
|
||||
<el-option label="国标设备" :value="0"></el-option>
|
||||
<el-option label="推流设备" :value="1"></el-option>
|
||||
<el-option label="拉流代理" :value="2"></el-option>
|
||||
</el-select>
|
||||
<el-button v-if="hasLink !=='true'" size="mini" type="primary" @click="add()">
|
||||
添加
|
||||
</el-button>
|
||||
<el-button v-if="hasLink ==='true'" size="mini" type="danger" @click="remove()">
|
||||
移除
|
||||
</el-button>
|
||||
<el-button size="mini" v-if="hasLink !=='true'" @click="addByDevice()">按设备添加</el-button>
|
||||
<el-button size="mini" v-if="hasLink ==='true'" @click="removeByDevice()">按设备移除</el-button>
|
||||
<el-button size="mini" v-if="hasLink !=='true'" @click="addAll()">全部添加</el-button>
|
||||
<el-button size="mini" v-if="hasLink ==='true'" @click="removeAll()">全部移除</el-button>
|
||||
<el-button size="mini" @click="getChannelList()">刷新</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<el-table size="small" ref="channelListTable" :data="channelList" :height="winHeight"
|
||||
header-row-class-name="table-header" @selection-change="handleSelectionChange" >
|
||||
<el-table-column type="selection" width="55" >
|
||||
</el-table-column>
|
||||
<el-table-column prop="gbName" label="名称" min-width="180">
|
||||
</el-table-column>
|
||||
<el-table-column prop="gbDeviceId" label="编号" min-width="180">
|
||||
</el-table-column>
|
||||
<el-table-column prop="gbManufacturer" label="厂家" min-width="100">
|
||||
</el-table-column>
|
||||
<el-table-column label="类型" min-width="100">
|
||||
<template v-slot:default="scope">
|
||||
<div slot="reference" class="name-wrapper">
|
||||
<el-tag size="medium" effect="plain" v-if="scope.row.gbDeviceDbId">国标设备</el-tag>
|
||||
<el-tag size="medium" effect="plain" type="success" v-if="scope.row.streamPushId">推流设备</el-tag>
|
||||
<el-tag size="medium" effect="plain" type="warning" v-if="scope.row.streamProxyId">拉流代理</el-tag>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="状态" min-width="100">
|
||||
<template v-slot:default="scope">
|
||||
<div slot="reference" class="name-wrapper">
|
||||
<el-tag size="medium" v-if="scope.row.gbStatus === 'ON'">在线</el-tag>
|
||||
<el-tag size="medium" type="info" v-if="scope.row.gbStatus !== 'ON'">离线</el-tag>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<el-pagination
|
||||
style="text-align: right"
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="currentChange"
|
||||
:current-page="currentPage"
|
||||
:page-size="count"
|
||||
:page-sizes="[15, 25, 35, 50]"
|
||||
layout="total, sizes, prev, pager, next"
|
||||
:total="total">
|
||||
</el-pagination>
|
||||
<gbDeviceSelect ref="gbDeviceSelect"></gbDeviceSelect>
|
||||
</div>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import gbDeviceSelect from "./GbDeviceSelect.vue";
|
||||
|
||||
export default {
|
||||
name: 'linkChannelRecord',
|
||||
components: {gbDeviceSelect},
|
||||
data() {
|
||||
return {
|
||||
dialogLoading: false,
|
||||
showDialog: false,
|
||||
chooseData: {},
|
||||
channelList: [],
|
||||
searchSrt: "",
|
||||
channelType: "",
|
||||
online: "",
|
||||
hasLink: "false",
|
||||
winHeight: window.innerHeight - 250,
|
||||
currentPage: 1,
|
||||
count: 15,
|
||||
total: 0,
|
||||
loading: false,
|
||||
planId: null,
|
||||
loadSnap: {},
|
||||
multipleSelection: []
|
||||
};
|
||||
},
|
||||
|
||||
created() {},
|
||||
destroyed() {},
|
||||
methods: {
|
||||
openDialog(planId, closeCallback) {
|
||||
this.planId = planId
|
||||
this.showDialog = true
|
||||
this.closeCallback = closeCallback
|
||||
this.initData()
|
||||
},
|
||||
initData: function () {
|
||||
this.currentPage= 1;
|
||||
this.count= 15;
|
||||
this.total= 0;
|
||||
this.getChannelList();
|
||||
},
|
||||
currentChange: function (val) {
|
||||
this.currentPage = val;
|
||||
this.initData();
|
||||
},
|
||||
handleSizeChange: function (val) {
|
||||
this.count = val;
|
||||
this.getChannelList();
|
||||
},
|
||||
getChannelList: function () {
|
||||
this.$axios({
|
||||
method: 'get',
|
||||
url: `/api/record/plan/channel/list`,
|
||||
params: {
|
||||
page: this.currentPage,
|
||||
count: this.count,
|
||||
query: this.searchSrt,
|
||||
online: this.online,
|
||||
channelType: this.channelType,
|
||||
planId: this.planId,
|
||||
hasLink: this.hasLink
|
||||
}
|
||||
}).then((res)=> {
|
||||
if (res.data.code === 0) {
|
||||
this.total = res.data.data.total;
|
||||
this.channelList = res.data.data.list;
|
||||
// 防止出现表格错位
|
||||
this.$nextTick(() => {
|
||||
this.$refs.channelListTable.doLayout();
|
||||
})
|
||||
}
|
||||
|
||||
}).catch((error)=> {
|
||||
|
||||
console.log(error);
|
||||
});
|
||||
},
|
||||
handleSelectionChange: function (val){
|
||||
this.multipleSelection = val;
|
||||
},
|
||||
|
||||
linkPlan: function (data){
|
||||
this.loading = true
|
||||
return this.$axios({
|
||||
method: 'post',
|
||||
url: `/api/record/plan/link`,
|
||||
data: data
|
||||
}).then((res)=> {
|
||||
if (res.data.code === 0) {
|
||||
this.$message.success({
|
||||
showClose: true,
|
||||
message: "保存成功"
|
||||
})
|
||||
this.getChannelList()
|
||||
}else {
|
||||
this.$message.error({
|
||||
showClose: true,
|
||||
message: res.data.msg
|
||||
})
|
||||
}
|
||||
this.loading = false
|
||||
}).catch((error)=> {
|
||||
this.$message.error({
|
||||
showClose: true,
|
||||
message: error
|
||||
})
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
|
||||
add: function (row) {
|
||||
let channels = []
|
||||
for (let i = 0; i < this.multipleSelection.length; i++) {
|
||||
channels.push(this.multipleSelection[i].gbId)
|
||||
}
|
||||
if (channels.length === 0) {
|
||||
this.$message.info({
|
||||
showClose: true,
|
||||
message: "请选择通道"
|
||||
})
|
||||
return;
|
||||
}
|
||||
this.linkPlan({
|
||||
planId: this.planId,
|
||||
channelIds: channels
|
||||
})
|
||||
},
|
||||
addAll: function (row) {
|
||||
this.$confirm("确定全部添加？", '提示', {
|
||||
dangerouslyUseHTMLString: true,
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
this.linkPlan({
|
||||
planId: this.planId,
|
||||
allLink: true
|
||||
})
|
||||
}).catch(() => {
|
||||
});
|
||||
},
|
||||
|
||||
addByDevice: function (row) {
|
||||
this.$refs.gbDeviceSelect.openDialog((rows)=>{
|
||||
let deviceIds = []
|
||||
for (let i = 0; i < rows.length; i++) {
|
||||
deviceIds.push(rows[i].id)
|
||||
}
|
||||
this.linkPlan({
|
||||
planId: this.planId,
|
||||
deviceDbIds: deviceIds
|
||||
})
|
||||
})
|
||||
},
|
||||
|
||||
removeByDevice: function (row) {
|
||||
this.$refs.gbDeviceSelect.openDialog((rows)=>{
|
||||
let deviceIds = []
|
||||
for (let i = 0; i < rows.length; i++) {
|
||||
deviceIds.push(rows[i].id)
|
||||
}
|
||||
this.linkPlan({
|
||||
deviceDbIds: deviceIds
|
||||
})
|
||||
})
|
||||
},
|
||||
remove: function (row) {
|
||||
let channels = []
|
||||
for (let i = 0; i < this.multipleSelection.length; i++) {
|
||||
channels.push(this.multipleSelection[i].gbId)
|
||||
}
|
||||
if (channels.length === 0) {
|
||||
this.$message.info({
|
||||
showClose: true,
|
||||
message: "请选择通道"
|
||||
})
|
||||
return;
|
||||
}
|
||||
|
||||
this.linkPlan({
|
||||
channelIds: channels
|
||||
})
|
||||
},
|
||||
removeAll: function (row) {
|
||||
|
||||
this.$confirm("确定全部移除？", '提示', {
|
||||
dangerouslyUseHTMLString: true,
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
this.linkPlan({
|
||||
planId: this.planId,
|
||||
allLink: false
|
||||
})
|
||||
}).catch(() => {
|
||||
});
|
||||
},
|
||||
search: function () {
|
||||
this.currentPage = 1;
|
||||
this.total = 0;
|
||||
this.initData();
|
||||
},
|
||||
refresh: function () {
|
||||
this.initData();
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.videoList {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-content: flex-start;
|
||||
}
|
||||
|
||||
.video-item {
|
||||
position: relative;
|
||||
width: 15rem;
|
||||
height: 10rem;
|
||||
margin-right: 1rem;
|
||||
background-color: #000000;
|
||||
}
|
||||
|
||||
.video-item-img {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: auto;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.video-item-img:after {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: auto;
|
||||
width: 3rem;
|
||||
height: 3rem;
|
||||
background-image: url("../../assets/loading.png");
|
||||
background-size: cover;
|
||||
background-color: #000000;
|
||||
}
|
||||
|
||||
.video-item-title {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
color: #000000;
|
||||
background-color: #ffffff;
|
||||
line-height: 1.5rem;
|
||||
padding: 0.3rem;
|
||||
width: 14.4rem;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user