aunix/wvp-GB28181-pro
1
0
Fork 0
mirror of https://gitee.com/pan648540858/wvp-GB28181-pro.git synced 2026-05-25 06:27:50 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

[1078] 合并新UI

Browse Source
This commit is contained in:
lin 2025-05-12 18:01:10 +08:00
parent c4ab55a456
commit e4a0a37f0b
6 changed files with 266 additions and 273 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
web/src/api/jtDevice.js
View File

@ -24,6 +24,22 @@ export function queryDeviceById(deviceId) {
}) })
} }
export function update(form) {
return request({
method: 'post',
url: `/api/jt1078/terminal/update`,
params: form
})
}
export function add(form) {
return request({
method: 'post',
url: `/api/jt1078/terminal/add`,
params: form
})
}
export function deleteDeviceById(deviceId) { export function deleteDeviceById(deviceId) {
return request({ return request({
method: 'delete', method: 'delete',

4
web/src/store/index.js
View File

@ -22,6 +22,7 @@ import userApiKeys from './modules/userApiKeys'
import gbRecord from './modules/gbRecord' import gbRecord from './modules/gbRecord'
import log from './modules/log' import log from './modules/log'
import frontEnd from './modules/frontEnd' import frontEnd from './modules/frontEnd'
import jtDevice from './modules/jtDevice'
Vue.use(Vuex) Vue.use(Vuex)
@ -47,7 +48,8 @@ const store = new Vuex.Store({
userApiKeys, userApiKeys,
gbRecord, gbRecord,
log, log,
frontEnd frontEnd,
jtDevice
}, },
getters getters
}) })

22
web/src/store/modules/jtDevice.js
View File

@ -1,4 +1,6 @@
import { deleteDeviceById, queryChannels, queryDeviceById, queryDevices } from '@/api/jtDevice' import { deleteDeviceById, queryChannels, queryDeviceById, queryDevices } from '@/api/jtDevice'
import { add } from '@/api/user'
import { update } from '@/api/group'
const actions = { const actions = {
queryDevices({ commit }, params) { queryDevices({ commit }, params) {
@ -11,6 +13,26 @@ const actions = {
}) })
}) })
}, },
add({ commit }, params) {
return new Promise((resolve, reject) => {
add(params).then(response => {
const { data } = response
resolve(data)
}).catch(error => {
reject(error)
})
})
},
update({ commit }, params) {
return new Promise((resolve, reject) => {
update(params).then(response => {
const { data } = response
resolve(data)
}).catch(error => {
reject(error)
})
})
},
queryDeviceById({ commit }, deviceId) { queryDeviceById({ commit }, deviceId) {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
queryDeviceById(deviceId).then(response => { queryDeviceById(deviceId).then(response => {

323
web/src/views/jtDevice/channel/index.vue
View File

@ -1,61 +1,81 @@
<template> <template>
<div id="channelList" style="width: 100%"> <div id="channelList" style="height: calc(100vh - 124px);">
<div v-if="!jtChannel"> <div v-if="!jtChannel">
<div class="page-header" > <div class="page-header">
<div class="page-title"> <div class="page-title">
<el-button icon="el-icon-back" size="mini" style="font-size: 20px; color: #000;" type="text" @click="showDevice" ></el-button> <el-button icon="el-icon-back" size="mini" style="font-size: 20px; color: #000;" type="text" @click="showDevice" />
<el-divider direction="vertical"></el-divider> <el-divider direction="vertical" />
通道列表 通道列表
</div> </div>
<div class="page-header-btn"> <div class="page-header-btn">
<div style="display: inline;"> <div style="display: inline;">
搜索: 搜索:
<el-input @input="search" style="margin-right: 1rem; width: auto;" size="mini" placeholder="关键字" <el-input
prefix-icon="el-icon-search" v-model="searchSrt" clearable></el-input> v-model="searchSrt"
style="margin-right: 1rem; width: auto;"
size="mini"
placeholder="关键字"
prefix-icon="el-icon-search"
clearable
@input="search"
/>
<el-button icon="el-icon-plus" size="mini" style="margin-right: 1rem;" type="primary" @click="add">添加通道</el-button> <el-button icon="el-icon-plus" size="mini" style="margin-right: 1rem;" type="primary" @click="add">添加通道</el-button>
<el-button icon="el-icon-refresh-right" circle size="mini" @click="refresh()"></el-button> <el-button icon="el-icon-refresh-right" circle size="mini" @click="refresh()" />
</div> </div>
</div> </div>
</div> </div>
<el-container v-loading="isLoging" style="height: 82vh;"> <el-container v-loading="isLoging" style="height: 82vh;">
<el-main style="padding: 5px;"> <el-main style="padding: 5px;">
<el-table ref="channelListTable" :data="deviceChannelList" :height="winHeight" style="width: 100%" <el-table
header-row-class-name="table-header"> ref="channelListTable"
<el-table-column prop="channelId" label="通道编号" min-width="180"> :data="deviceChannelList"
</el-table-column> :height="winHeight"
<el-table-column prop="name" label="名称" min-width="180"> style="width: 100%"
</el-table-column> header-row-class-name="table-header"
>
<el-table-column prop="channelId" label="通道编号" min-width="180" />
<el-table-column prop="name" label="名称" min-width="180" />
<el-table-column label="快照" min-width="100"> <el-table-column label="快照" min-width="100">
<template v-slot:default="scope"> <template v-slot:default="scope">
<el-image <el-image
:src="getSnap(scope.row)" :src="getSnap(scope.row)"
:preview-src-list="getBigSnap(scope.row)" :preview-src-list="getBigSnap(scope.row)"
@error="getSnapErrorEvent(scope.row.deviceId, scope.row.channelId)"
:fit="'contain'" :fit="'contain'"
style="width: 60px"> style="width: 60px"
@error="getSnapErrorEvent(scope.row.deviceId, scope.row.channelId)"
>
<div slot="error" class="image-slot"> <div slot="error" class="image-slot">
<i class="el-icon-picture-outline"></i> <i class="el-icon-picture-outline" />
</div> </div>
</el-image> </el-image>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="开启音频" min-width="100"> <el-table-column label="开启音频" min-width="100">
<template slot-scope="scope"> <template slot-scope="scope">
<el-switch @change="updateChannel(scope.row)" v-model="scope.row.hasAudio" active-color="#409EFF"> <el-switch v-model="scope.row.hasAudio" active-color="#409EFF" @change="updateChannel(scope.row)" />
</el-switch>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="操作" min-width="340" fixed="right"> <el-table-column label="操作" min-width="340" fixed="right">
<template slot-scope="scope"> <template slot-scope="scope">
<el-button size="medium" v-bind:disabled="device == null || device.online === 0" icon="el-icon-video-play" <el-button
type="text" @click="sendDevicePush(scope.row)">播放 size="medium"
:disabled="device == null || device.online === 0"
icon="el-icon-video-play"
type="text"
@click="sendDevicePush(scope.row)"
>播放
</el-button> </el-button>
<el-button size="medium" v-bind:disabled="device == null || device.online === 0" <el-button
icon="el-icon-switch-button" v-if="!!scope.row.stream"
type="text" style="color: #f56c6c" v-if="!!scope.row.stream" size="medium"
@click="stopDevicePush(scope.row)">停止 :disabled="device == null || device.online === 0"
icon="el-icon-switch-button"
type="text"
style="color: #f56c6c"
@click="stopDevicePush(scope.row)"
>停止
</el-button> </el-button>
<el-divider direction="vertical"></el-divider> <el-divider direction="vertical" />
<el-button <el-button
size="medium" size="medium"
type="text" type="text"
@ -64,15 +84,15 @@
> >
编辑 编辑
</el-button> </el-button>
<el-divider direction="vertical"></el-divider> <el-divider direction="vertical" />
<el-dropdown @command="(command)=>{moreClick(command, scope.row)}"> <el-dropdown @command="(command)=>{moreClick(command, scope.row)}">
<el-button size="medium" type="text" > <el-button size="medium" type="text">
更多功能<i class="el-icon-arrow-down el-icon--right"></i> 更多功能<i class="el-icon-arrow-down el-icon--right" />
</el-button> </el-button>
<el-dropdown-menu slot="dropdown"> <el-dropdown-menu slot="dropdown">
<el-dropdown-item command="records" v-bind:disabled="device == null || device.online === 0"> <el-dropdown-item command="records" :disabled="device == null || device.online === 0">
设备录像</el-dropdown-item> 设备录像</el-dropdown-item>
<el-dropdown-item command="cloudRecords" v-bind:disabled="device == null || device.online === 0" > <el-dropdown-item command="cloudRecords" :disabled="device == null || device.online === 0">
云端录像</el-dropdown-item> 云端录像</el-dropdown-item>
<!-- <el-dropdown-item command="shooting" v-bind:disabled="device == null || device.online === 0" >--> <!-- <el-dropdown-item command="shooting" v-bind:disabled="device == null || device.online === 0" >-->
<!-- 立即拍摄</el-dropdown-item>--> <!-- 立即拍摄</el-dropdown-item>-->
@ -83,38 +103,33 @@
</el-table> </el-table>
<el-pagination <el-pagination
style="float: right" style="float: right"
@size-change="handleSizeChange"
@current-change="currentChange"
:current-page="currentPage" :current-page="currentPage"
:page-size="count" :page-size="count"
:page-sizes="[15, 25, 35, 50]" :page-sizes="[15, 25, 35, 50]"
layout="total, sizes, prev, pager, next" layout="total, sizes, prev, pager, next"
:total="total"> :total="total"
</el-pagination> @size-change="handleSizeChange"
@current-change="currentChange"
/>
</el-main> </el-main>
</el-container> </el-container>
</div> </div>
<devicePlayer ref="devicePlayer"></devicePlayer> <devicePlayer ref="devicePlayer" />
<channelEdit v-if="jtChannel" ref="channelEdit" :jtChannel="jtChannel" :closeEdit="closeEdit"></channelEdit> <channelEdit v-if="jtChannel" ref="channelEdit" :jt-channel="jtChannel" :close-edit="closeEdit" />
<!--设备列表--> <!--设备列表-->
</div> </div>
</template> </template>
<script> <script>
import devicePlayer from './dialog/jtDevicePlayer.vue' import devicePlayer from '../jtDevicePlayer.vue'
import uiHeader from '../layout/UiHeader.vue' import channelEdit from './edit.vue'
import DeviceTree from "./common/DeviceTree";
import channelEdit from "./JTChannelEdit.vue";
import JTDeviceService from "./service/JTDeviceService";
export default { export default {
name: 'channelList', name: 'ChannelList',
components: { components: {
channelEdit, channelEdit,
devicePlayer, devicePlayer
uiHeader,
DeviceTree
}, },
data() { data() {
return { return {
@ -122,205 +137,201 @@ export default {
device: null, device: null,
deviceId: this.$route.params.deviceId, deviceId: this.$route.params.deviceId,
deviceChannelList: [], deviceChannelList: [],
updateLooper: 0, //数据刷新轮训标志 updateLooper: 0, // 数据刷新轮训标志
searchSrt: "", searchSrt: '',
channelType: "", channelType: '',
online: "", online: '',
winHeight: window.innerHeight - 200, winHeight: window.innerHeight - 200,
currentPage: 1, currentPage: 1,
count: 15, count: 15,
total: 0, total: 0,
beforeUrl: "/jtDeviceList", beforeUrl: '/jtDeviceList',
isLoging: false, isLoging: false,
loadSnap: {}, loadSnap: {},
jtChannel: null, jtChannel: null
}; }
}, },
mounted() { mounted() {
this.initParam(); this.initParam()
this.initData(); this.initData()
}, },
destroyed() { destroyed() {
this.$destroy('videojs'); this.$destroy('videojs')
clearTimeout(this.updateLooper); clearTimeout(this.updateLooper)
}, },
methods: { methods: {
initData: function () { initData: function() {
this.getDeviceChannelList(); this.getDeviceChannelList()
}, },
initParam: function () { initParam: function() {
this.deviceId = this.$route.params.deviceId; this.deviceId = this.$route.params.deviceId
this.currentPage = 1; this.currentPage = 1
this.count = 15; this.count = 15
this.deviceService.getDevice(this.deviceId, (result) => { this.deviceService.getDevice(this.deviceId, (result) => {
if (result.code === 0) { if (result.code === 0) {
this.device = result.data; this.device = result.data
} }
}, (error) => { }, (error) => {
console.log("获取设备信息失败") console.log('获取设备信息失败')
console.error(error) console.error(error)
}) })
}, },
currentChange: function (val) { currentChange: function(val) {
this.currentPage = val; this.currentPage = val
this.initData(); this.initData()
}, },
handleSizeChange: function (val) { handleSizeChange: function(val) {
this.count = val; this.count = val
this.getDeviceChannelList(); this.getDeviceChannelList()
}, },
getDeviceChannelList: function () { getDeviceChannelList: function() {
if (typeof (this.deviceId) == "undefined") return; if (typeof (this.deviceId) === 'undefined') return
this.deviceService.getAllChannel(this.currentPage, this.count, this.searchSrt, this.deviceId, (data)=>{ this.deviceService.getAllChannel(this.currentPage, this.count, this.searchSrt, this.deviceId, (data) => {
console.log(data) console.log(data)
if (data.code === 0) { if (data.code === 0) {
this.total = data.data.total; this.total = data.data.total
this.deviceChannelList = data.data.list; this.deviceChannelList = data.data.list
// 防止出现表格错位 // 防止出现表格错位
this.$nextTick(() => { this.$nextTick(() => {
this.$refs.channelListTable.doLayout(); this.$refs.channelListTable.doLayout()
}) })
} }
}) })
}, },
//通知设备上传媒体流 // 通知设备上传媒体流
sendDevicePush: function (itemData) { sendDevicePush: function(itemData) {
this.isLoging = true; this.isLoging = true
let channelId = itemData.channelId; const channelId = itemData.channelId
console.log("通知设备推流1：" + this.device.phoneNumber + " : " + channelId); console.log('通知设备推流1：' + this.device.phoneNumber + ' : ' + channelId)
this.$axios({ this.$axios({
method: 'get', method: 'get',
url: '/api/jt1078/live/start', url: '/api/jt1078/live/start',
params: { params: {
phoneNumber: this.device.phoneNumber, phoneNumber: this.device.phoneNumber,
channelId: channelId, channelId: channelId,
type: 0, type: 0
} }
}).then((res)=> { }).then((res) => {
this.isLoging = false; this.isLoging = false
if (res.data.code === 0) { if (res.data.code === 0) {
setTimeout(() => { setTimeout(() => {
let snapId = this.device.phoneNumber + "_" + channelId; const snapId = this.device.phoneNumber + '_' + channelId
this.loadSnap[this.device.phoneNumber + channelId] = 0; this.loadSnap[this.device.phoneNumber + channelId] = 0
this.getSnapErrorEvent(snapId) this.getSnapErrorEvent(snapId)
}, 5000) }, 5000)
itemData.streamId = res.data.data.stream; itemData.streamId = res.data.data.stream
this.$refs.devicePlayer.openDialog("media", this.device.phoneNumber, channelId, { this.$refs.devicePlayer.openDialog('media', this.device.phoneNumber, channelId, {
streamInfo: res.data.data, streamInfo: res.data.data,
hasAudio: itemData.hasAudio hasAudio: itemData.hasAudio
}); })
setTimeout(() => { setTimeout(() => {
this.initData(); this.initData()
}, 1000) }, 1000)
} else { } else {
this.$message.error(res.data.msg); this.$message.error(res.data.msg)
} }
}).catch((e)=> { }).catch((e) => {
console.error(e) console.error(e)
this.isLoging = false; this.isLoging = false
// that.$message.error("请求超时"); // that.$message.error("请求超时");
}); })
}, },
moreClick: function (command, itemData) { moreClick: function(command, itemData) {
if (command === "records") { if (command === 'records') {
this.queryRecords(itemData) this.queryRecords(itemData)
}else if (command === "cloudRecords") { } else if (command === 'cloudRecords') {
this.queryCloudRecords(itemData) this.queryCloudRecords(itemData)
}else { } else {
this.$message.info("尚不支持"); this.$message.info('尚不支持')
} }
}, },
queryRecords: function (itemData) { queryRecords: function(itemData) {
this.$router.push(`/jtRecordDetail/${this.device.phoneNumber}/${itemData.channelId}`) this.$router.push(`/jtRecordDetail/${this.device.phoneNumber}/${itemData.channelId}`)
}, },
queryCloudRecords: function (itemData) { queryCloudRecords: function(itemData) {
let deviceId = this.deviceId; const deviceId = this.deviceId
let channelId = itemData.channelId; const channelId = itemData.channelId
this.$router.push(`/cloudRecordDetail/rtp/${deviceId}_${channelId}`) this.$router.push(`/cloudRecordDetail/rtp/${deviceId}_${channelId}`)
}, },
stopDevicePush: function (itemData) { stopDevicePush: function(itemData) {
this.$axios({ this.$axios({
method: 'get', method: 'get',
url: '/api/jt1078/live/stop', url: '/api/jt1078/live/stop',
params: { params: {
phoneNumber: this.device.phoneNumber, phoneNumber: this.device.phoneNumber,
channelId: itemData.channelId, channelId: itemData.channelId
} }
}).then((res)=> { }).then((res) => {
console.log(res) console.log(res)
if (res.data.code === 0) { if (res.data.code === 0) {
this.initData(); this.initData()
}else { } else {
this.$message.error(res.data.msg); this.$message.error(res.data.msg)
} }
}).catch(function (error) { }).catch(function(error) {
console.error(error) console.error(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.device.phoneNumber + '/' + row.channelId;
},
getBigSnap: function (row) {
return [this.getSnap(row)]
},
getSnapErrorEvent: function (deviceId, channelId) {
if (typeof (this.loadSnap[deviceId + channelId]) != "undefined") {
console.log("下载截图" + this.loadSnap[deviceId + channelId])
if (this.loadSnap[deviceId + channelId] > 5) {
delete this.loadSnap[deviceId + channelId];
return;
}
setTimeout(() => {
let url = (process.env.NODE_ENV === 'development' ? "debug" : "") + '/api/device/query/snap/' + deviceId + '/' + channelId
this.loadSnap[deviceId + channelId]++
document.getElementById(deviceId + channelId).setAttribute("src", url + '?' + new Date().getTime())
}, 1000)
}
},
showDevice: function () {
this.$router.push(this.beforeUrl).then(() => {
this.initParam();
this.initData();
}) })
}, },
search: function () { getSnap: function(row) {
this.currentPage = 1; const baseUrl = window.baseUrl ? window.baseUrl : ''
this.total = 0; return ((process.env.NODE_ENV === 'development') ? process.env.BASE_API : baseUrl) + '/api/device/query/snap/' + this.device.phoneNumber + '/' + row.channelId
this.initData();
}, },
updateChannel: function (row) { getBigSnap: function(row) {
return [this.getSnap(row)]
},
getSnapErrorEvent: function(deviceId, channelId) {
if (typeof (this.loadSnap[deviceId + channelId]) !== 'undefined') {
console.log('下载截图' + this.loadSnap[deviceId + channelId])
if (this.loadSnap[deviceId + channelId] > 5) {
delete this.loadSnap[deviceId + channelId]
return
}
setTimeout(() => {
const url = (process.env.NODE_ENV === 'development' ? 'debug' : '') + '/api/device/query/snap/' + deviceId + '/' + channelId
this.loadSnap[deviceId + channelId]++
document.getElementById(deviceId + channelId).setAttribute('src', url + '?' + new Date().getTime())
}, 1000)
}
},
showDevice: function() {
this.$router.push(this.beforeUrl).then(() => {
this.initParam()
this.initData()
})
},
search: function() {
this.currentPage = 1
this.total = 0
this.initData()
},
updateChannel: function(row) {
this.$axios({ this.$axios({
method: 'post', method: 'post',
url: `/api/jt1078/terminal/channel/update`, url: `/api/jt1078/terminal/channel/update`,
params: row params: row
}).then(function (res) { }).then(function(res) {
console.log(JSON.stringify(res)); console.log(JSON.stringify(res))
}); })
}, },
refresh: function () { refresh: function() {
this.initData(); this.initData()
}, },
add: function () { add: function() {
this.jtChannel = { this.jtChannel = {
terminalDbId: this.deviceId terminalDbId: this.deviceId
}; }
}, },
// 编辑 // 编辑
handleEdit(row) { handleEdit(row) {
this.jtChannel = row; this.jtChannel = row
}, },
// 编辑 // 编辑
closeEdit(row) { closeEdit(row) {
this.jtChannel = null; this.jtChannel = null
} }
} }
}; }
</script> </script>

83
web/src/views/jtDevice/edit.vue
View File

@ -10,13 +10,13 @@
@close="close()" @close="close()"
> >
<div id="shared" style="margin-top: 1rem;margin-right: 100px;"> <div id="shared" style="margin-top: 1rem;margin-right: 100px;">
<el-form ref="form" :rules="rules" :model="form" label-width="200px" > <el-form ref="form" :rules="rules" :model="form" label-width="200px">
<el-form-item label="终端手机号" prop="phoneNumber"> <el-form-item label="终端手机号" prop="phoneNumber">
<el-input v-model="form.phoneNumber" clearable></el-input> <el-input v-model="form.phoneNumber" clearable />
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
<div style="float: right;"> <div style="float: right;">
<el-button type="primary" @click="onSubmit" >确认</el-button> <el-button type="primary" @click="onSubmit">确认</el-button>
<el-button @click="close">取消</el-button> <el-button @click="close">取消</el-button>
</div> </div>
</el-form-item> </el-form-item>
@ -28,10 +28,8 @@
<script> <script>
export default { export default {
name: "deviceEdit", name: 'DeviceEdit',
props: {}, props: {},
computed: {},
created() {},
data() { data() {
return { return {
listChangeCallback: null, listChangeCallback: null,
@ -40,49 +38,50 @@ export default {
form: {}, form: {},
isEdit: false, isEdit: false,
rules: { rules: {
deviceId: [{ required: true, message: "请输入设备编号", trigger: "blur" }] deviceId: [{ required: true, message: '请输入设备编号', trigger: 'blur' }]
}, }
}; }
}, },
computed: {},
created() {},
methods: { methods: {
openDialog: function (row, callback) { openDialog: function(row, callback) {
console.log(row) console.log(row)
this.showDialog = true; this.showDialog = true
this.isEdit = false; this.isEdit = false
if (row) { if (row) {
this.isEdit = true; this.isEdit = true
} }
this.form = {}; this.form = {}
this.listChangeCallback = callback; this.listChangeCallback = callback
if (row != null) { if (row != null) {
this.form = row; this.form = row
} }
}, },
onSubmit: function () { onSubmit: function() {
console.log("onSubmit"); console.log('onSubmit')
this.$axios({ if (this.isEdit) {
method: 'post', this.$store.dispatch('jtDevice/update', this.form)
url:`/api/jt1078/terminal/${this.isEdit?'update':'add'}/`, .then(data => {
params: this.form this.listChangeCallback()
}).then((res) => { })
console.log(res.data) .catch(function(error) {
if (res.data.code === 0) { console.log(error)
this.listChangeCallback() })
}else { } else {
this.$message({ this.$store.dispatch('jtDevice/add', this.form)
showClose: true, .then(data => {
message: res.data.msg, this.listChangeCallback()
type: "error", })
}); .catch(function(error) {
} console.log(error)
}).catch(function (error) { })
console.log(error); }
});
}, },
close: function () { close: function() {
this.showDialog = false; this.showDialog = false
this.$refs.form.resetFields(); this.$refs.form.resetFields()
}, }
}, }
}; }
</script> </script>

91
web/src/views/jtDevice/list.vue
View File

@ -124,19 +124,16 @@
@current-change="currentChange" @current-change="currentChange"
/> />
<deviceEdit ref="deviceEdit" /> <deviceEdit ref="deviceEdit" />
<syncChannelProgress ref="syncChannelProgress" />
</div> </div>
</template> </template>
<script> <script>
import deviceEdit from './edit.vue' import deviceEdit from './edit.vue'
import syncChannelProgress from '../dialog/SyncChannelProgress.vue'
export default { export default {
name: 'App', name: 'App',
components: { components: {
deviceEdit, deviceEdit
syncChannelProgress
}, },
data() { data() {
return { return {
@ -171,17 +168,17 @@ export default {
}, },
getList: function() { getList: function() {
this.getListLoading = true this.getListLoading = true
this.$store.dispatch('jtDevice/getList', {}) this.$store.dispatch('jtDevice/queryDevices', {
this.deviceService.getDeviceList(this.currentPage, this.count, (data) => { page: this.currentPage,
if (data.code === 0) { count: this.count
this.total = data.data.total })
this.deviceList = data.data.list .then(data => {
} this.total = data.total
this.getListLoading = false this.deviceList = data.list
}, () => { })
this.getListLoading = false .finally(() => {
} this.getListLoading = false
) })
}, },
deleteDevice: function(row) { deleteDevice: function(row) {
this.$confirm('确定删除此设备？', '提示', { this.$confirm('确定删除此设备？', '提示', {
@ -191,9 +188,10 @@ export default {
center: true, center: true,
type: 'warning' type: 'warning'
}).then(() => { }).then(() => {
this.deviceService.deleteDevice(row.id, (data) => { this.$store.dispatch('jtDevice/deleteDeviceById', row.id)
this.getList() .then(data => {
}) this.getList()
})
}).catch(() => { }).catch(() => {
}) })
@ -210,7 +208,7 @@ export default {
}) })
}, },
showChannelList: function(row) { showChannelList: function(row) {
this.$router.push(`/jtChannelList/${row.id}`) this.$emit('show-channel', row.id)
}, },
add: function() { add: function() {
this.$refs.deviceEdit.openDialog(null, () => { this.$refs.deviceEdit.openDialog(null, () => {
@ -236,58 +234,3 @@ export default {
} }
} }
</script> </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>