project init
This commit is contained in:
limqhz
130
oms/oms-h5/src/views/device/edit.vue
Normal file
130
oms/oms-h5/src/views/device/edit.vue
Normal file
@@ -0,0 +1,130 @@
|
||||
<template>
|
||||
<div>
|
||||
<sticky className="sub-navbar">
|
||||
<div style="text-align:right;">
|
||||
<el-button type="success" :loading="onSubmit" @click="handleSave">保存</el-button>
|
||||
<el-button @click="handleCancel">取消</el-button>
|
||||
</div>
|
||||
</sticky>
|
||||
<div class="app-container app-edit">
|
||||
<el-form class="small-space" :model="form" :rules="rules" ref="form" label-position="right" label-width="120px" style="width: 700px;">
|
||||
|
||||
<!-- 设备名称 -->
|
||||
<el-form-item label="设备名称" prop="name">
|
||||
<el-input v-model="form.name" placeholder="请输入设备名称"></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<!-- 视频流地址 -->
|
||||
<el-form-item label="视频流地址" prop="stream">
|
||||
<el-input v-model="form.stream" placeholder="请输入视频流地址"></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="篮球馆" prop="venueId">
|
||||
<el-select v-model="form.venueId" filterable placeholder="请选择篮球馆">
|
||||
<el-option
|
||||
v-for="item in venues"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Sticky from '@/components/Sticky'
|
||||
import { find, save } from '@/api//device'
|
||||
import { findVenueByType } from '@/api//venue'
|
||||
|
||||
export default {
|
||||
components: { Sticky },
|
||||
data() {
|
||||
return {
|
||||
form: {
|
||||
id: undefined,
|
||||
name: '',
|
||||
stream: '',
|
||||
venueId: '',
|
||||
venueType: 2
|
||||
},
|
||||
venues: [],
|
||||
onSubmit: false,
|
||||
|
||||
// 表单验证规则
|
||||
rules: {
|
||||
name: [
|
||||
{ required: true, message: '请输入设备名称', trigger: 'blur' }
|
||||
],
|
||||
stream: [
|
||||
{ required: true, message: '请输入视频流地址', trigger: 'blur' }
|
||||
],
|
||||
venueId: [
|
||||
{ required: true, message: '请选择篮球馆', trigger: 'blur' }
|
||||
]
|
||||
// username: [
|
||||
// { required: true, message: '请输入姓名', trigger: 'blur' },
|
||||
// { max: 15, message: '姓名长度不能超过15个字符', trigger: 'blur' }
|
||||
// ],
|
||||
// email: [
|
||||
// { required: true, message: '请输入邮箱', trigger: 'blur' },
|
||||
// { type: 'email', message: '您输入的邮箱格式不正确', trigger: 'blur' }
|
||||
// ],
|
||||
// password: [
|
||||
// { required: true, message: '请输入密码', trigger: 'blur' },
|
||||
// { min: 6, message: '密码长度不能少于6个字符', trigger: 'blur' }
|
||||
// ]
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
findVenueByType(1).then(response => {
|
||||
this.venues = response.venues
|
||||
})
|
||||
if (this.$route.query.id) {
|
||||
this.form.id = this.$route.query.id
|
||||
this.findById(this.form.id)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* 查询门禁设备
|
||||
*/
|
||||
findById(id) {
|
||||
find(id).then(response => {
|
||||
this.form.name = response.device.name
|
||||
this.form.stream = response.device.stream
|
||||
this.form.venueId = response.device.venueId
|
||||
this.form.venueType = response.device.venueType
|
||||
})
|
||||
},
|
||||
|
||||
/**
|
||||
* 保存门禁设备
|
||||
*/
|
||||
handleSave() {
|
||||
this.$refs.form.validate(valid => {
|
||||
if (!valid) {
|
||||
return false
|
||||
}
|
||||
|
||||
this.onSubmit = true
|
||||
save(this.form).then(response => {
|
||||
this.$router.go(-1)
|
||||
}).finally(() => {
|
||||
this.onSubmit = false
|
||||
})
|
||||
})
|
||||
},
|
||||
|
||||
/**
|
||||
* 取消
|
||||
*/
|
||||
handleCancel() {
|
||||
this.$router.go(-1)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
139
oms/oms-h5/src/views/device/index.vue
Normal file
139
oms/oms-h5/src/views/device/index.vue
Normal file
@@ -0,0 +1,139 @@
|
||||
<template>
|
||||
<div class="app-container calendar-list-container">
|
||||
<!-- 筛选条件 -->
|
||||
<div class="filter-container">
|
||||
<el-select class="filter-item" clearable v-model="params.search_eq_d$venueId" filterable placeholder="请选择篮球馆">
|
||||
<el-option
|
||||
v-for="item in venues"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id">
|
||||
</el-option>
|
||||
</el-select>
|
||||
<el-button class="filter-item" type="primary" v-waves icon="search" @click="handleSearch">搜索</el-button>
|
||||
<el-button class="filter-item pull-right" type="success" icon="edit" @click="handleCreate">添加</el-button>
|
||||
</div>
|
||||
|
||||
<!-- 列表数据 -->
|
||||
<Pagination uri="/devices" :request-params="params" ref="pagination">
|
||||
|
||||
<!-- 设备名称 -->
|
||||
<el-table-column align="center" label="名称">
|
||||
<template scope="scope">
|
||||
<span>{{scope.row.name}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<!-- 视频流地址 -->
|
||||
<el-table-column align="center" label="视频流地址">
|
||||
<template scope="scope">
|
||||
<span>{{scope.row.stream}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column align="center" label=状态>
|
||||
<template scope="scope">
|
||||
<DeviceStatus :status="scope.row.status"></DeviceStatus>
|
||||
<!-- <span v-text="getStatus(scope.row.status)"></span> -->
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column align="center" label=篮球馆>
|
||||
<template scope="scope">
|
||||
<span v-text="scope.row.venueName"></span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="操作" align="center" width="150">
|
||||
<template scope="scope">
|
||||
<el-button size="small" type="text" @click="handleEdit(scope.row.id)">编辑</el-button>
|
||||
<el-button size="small" type="text" class="danger" @click="handleDelete(scope.row)">删除</el-button>
|
||||
<el-button size="small" v-if="scope.row.status == 0" type="text" @click="handleReconnect(scope.row.id)">重新连接</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</Pagination>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { remove, reconnect } from '@/api//device'
|
||||
import waves from '@/directive/waves.js'// 水波纹指令
|
||||
import Pagination from '@/components/Pagination'
|
||||
import { findVenueByType } from '@/api//venue'
|
||||
import DeviceStatus from '@/components/DeviceStatus'
|
||||
export default {
|
||||
name: 'device_list',
|
||||
components: { Pagination, DeviceStatus },
|
||||
directives: {
|
||||
waves
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
params: {
|
||||
search_eq_d$venueId: undefined
|
||||
},
|
||||
venues: [],
|
||||
intervalid1: undefined
|
||||
}
|
||||
},
|
||||
created() {
|
||||
findVenueByType(1).then(response => {
|
||||
this.venues = response.venues
|
||||
})
|
||||
this.intervalid1 = setInterval(() => {
|
||||
this.handleSearch(false)
|
||||
}, 3000)
|
||||
},
|
||||
beforeDestroy () {
|
||||
clearInterval(this.intervalid1)
|
||||
},
|
||||
methods: {
|
||||
// getStatus(status) {
|
||||
// if (status === 0) {
|
||||
// return '未连接'
|
||||
// } else if (status === 1) {
|
||||
// return '正在重连'
|
||||
// } else if (status === 2) {
|
||||
// return '已连接'
|
||||
// }
|
||||
// },
|
||||
handleReconnect(id) {
|
||||
reconnect(id).then(response => {
|
||||
this.handleSearch()
|
||||
})
|
||||
},
|
||||
/**
|
||||
* 搜索门禁设备
|
||||
*/
|
||||
handleSearch(flag) {
|
||||
this.$refs.pagination.handleSearch(flag)
|
||||
},
|
||||
|
||||
/**
|
||||
* 编辑门禁设备
|
||||
*/
|
||||
handleEdit(id) {
|
||||
this.$router.push({ path: '/device/edit', query: { id: id }})
|
||||
},
|
||||
|
||||
/**
|
||||
* 创建门禁设备
|
||||
*/
|
||||
handleCreate() {
|
||||
this.$router.push({ path: '/device/edit' })
|
||||
},
|
||||
|
||||
/**
|
||||
* 删除门禁设备
|
||||
*/
|
||||
handleDelete(row) {
|
||||
this.$confirm('确认删除该门禁设备？').then(_ => {
|
||||
remove(row.id).then(response => {
|
||||
this.$refs.pagination.removeItem(row)
|
||||
})
|
||||
}).catch(_ => {})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user