You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
239 lines
8.0 KiB
239 lines
8.0 KiB
<template>
|
|
<div class="app-container">
|
|
<!-- 搜索栏 -->
|
|
<div class="head-container">
|
|
<el-row type="flex">
|
|
<el-col :span="20" class="col_flex">
|
|
<div class="form_item">
|
|
<span>状态</span>
|
|
<el-select v-model="query.state" size="small" class="filter-item" style="width: 120px">
|
|
<el-option v-for="item in stateData" :key="item.key" :label="item.name" :value="item.key" />
|
|
</el-select>
|
|
</div>
|
|
<div class="form_item">
|
|
<span>设备ID</span>
|
|
<el-input v-model="query.blurry" clearable size="small" placeholder="请输入设备ID" style="width: 200px" class="filter-item" @keyup.enter.native="crud.toQuery" />
|
|
</div>
|
|
<div class="form_item">
|
|
<span>设备名称</span>
|
|
<el-input v-model="query.blurry" clearable size="small" placeholder="请输入设备名称" style="width: 200px" class="filter-item" @keyup.enter.native="crud.toQuery" />
|
|
</div>
|
|
<rrOperation />
|
|
</el-col>
|
|
<el-col class="page_add" :span="4"><el-button class="table_add" type="primary" icon="el-icon-delete" disabled>清空</el-button></el-col>
|
|
</el-row>
|
|
</div>
|
|
<el-row :gutter="15">
|
|
<el-col>
|
|
<el-card class="box-card" shadow="never">
|
|
<el-table style="width: 100%;" :data="tableData">
|
|
<el-table-column :selectable="checkboxT" type="selection" width="55" />
|
|
<el-table-column prop="id" label="设备ID" align="center" />
|
|
<el-table-column prop="account" label="设备账号" align="center" />
|
|
<el-table-column prop="name" label="设备名称" align="center" />
|
|
<el-table-column prop="orientation" label="设备方向" align="center" />
|
|
<el-table-column prop="organization" label="所属机构" align="center" />
|
|
<el-table-column prop="isDel" label="设备状态" align="center">
|
|
<template slot-scope="scope">
|
|
<div>{{ scope.row.isDel ? '在线' : '离线' }}</div>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="content" label="发布内容" align="center">
|
|
<template slot-scope="scope">
|
|
<el-button type="text" size="small" @click="handleClick(scope.row)">查看</el-button>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="date" label="创建时间" align="center" width="200" />
|
|
<el-table-column fixed="right" label="操作" align="center">
|
|
<template slot-scope="scope">
|
|
<el-button type="primary" icon="el-icon-edit" @click="edit(scope.$index, scope.row)" />
|
|
<el-button type="info" icon="el-icon-info" />
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
<!--分页组件-->
|
|
<pagination />
|
|
</el-card>
|
|
</el-col>
|
|
</el-row>
|
|
<!-- 编辑设备 -->
|
|
<div class="layer">
|
|
<el-dialog :title="dialogTitle" :close-on-click-modal="false" :visible.sync="addFromVisible" width="400px">
|
|
<el-form ref="form" :model="form" :rules="rules" label-width="100px">
|
|
<el-form-item label="设备账号" prop="account"><el-input v-model="form.account" autocomplete="off" disabled style="width: 200px" /></el-form-item>
|
|
<el-form-item label="设备名称" prop="name"><el-input v-model="form.name" style="width: 200px" /></el-form-item>
|
|
<el-form-item label="设备方向" prop="orientation">
|
|
<el-select v-model="form.orientation" size="small" class="filter-item" style="width: 200px">
|
|
<el-option v-for="item in deviceData" :key="item.key" :label="item.name" :value="item.key" />
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-form>
|
|
<div slot="footer" class="dialog-footer">
|
|
<el-button @click="addFromVisible = false">取 消</el-button>
|
|
<el-button type="primary" @click="submitForm('form')">确 定</el-button>
|
|
</div>
|
|
</el-dialog>
|
|
</div>
|
|
|
|
<div class="layer">
|
|
<el-dialog title="发布内容" :close-on-click-modal="false" :visible.sync="contentVisible" width="720px">
|
|
<div class="content_warp">
|
|
<h4>图片</h4>
|
|
<ul class="item_list">
|
|
<li class="item_cont">
|
|
<img src="../../assets/images/background.jpg" alt="">
|
|
<div class="item_info">
|
|
<div class="item_format">
|
|
<span class="item_type">JPG</span>
|
|
<span class="item_time">30S</span>
|
|
</div>
|
|
<p class="item_name">1.3X2DD244</p>
|
|
</div>
|
|
<!-- 视频 -->
|
|
<div class="item_player">1</div>
|
|
</li>
|
|
</ul>
|
|
<h4>视频</h4>
|
|
<h4>音频</h4>
|
|
</div>
|
|
</el-dialog>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import crudUser from '@/api/system/user'
|
|
import CRUD, { presenter, header, form, crud } from '@crud/crud'
|
|
import rrOperation from '@crud/RR.operation'
|
|
import pagination from '@crud/Pagination'
|
|
const defaultForm = {
|
|
account: null,
|
|
name: null,
|
|
orientation: null
|
|
}
|
|
export default {
|
|
name: 'Device',
|
|
components: { rrOperation, pagination },
|
|
cruds() {
|
|
return CRUD({
|
|
title: '用户',
|
|
url: 'api/users',
|
|
crudMethod: { ...crudUser }
|
|
})
|
|
},
|
|
mixins: [presenter(), header(), form(defaultForm), crud()],
|
|
data() {
|
|
return {
|
|
dialogTitle: '',
|
|
addFromVisible: false,
|
|
contentVisible: false,
|
|
tableData: [
|
|
{
|
|
id: 'XXXXXXXXX',
|
|
account: '13476289682',
|
|
name: 'GCXR2',
|
|
orientation: '竖屏',
|
|
organization: 'xx图书馆',
|
|
content: '',
|
|
date: '2021-09-14 16:35'
|
|
}
|
|
],
|
|
stateData: [{ key: '0', name: '全部' }, { key: '1', name: '在线' }, { key: '2', name: '离线' }],
|
|
deviceData: [{ key: '0', name: '竖屏' }, { key: '1', name: '横屏' }],
|
|
rules: {
|
|
name: [{ required: true, message: '请输入设备名称', trigger: 'blur' }, { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }],
|
|
orientation: [{ required: true, message: '请选择设备方向', trigger: 'change' }]
|
|
}
|
|
}
|
|
},
|
|
computed: {},
|
|
watch: {},
|
|
methods: {
|
|
// 编辑
|
|
edit(index, row) {
|
|
this.dialogTitle = '编辑设备'
|
|
this.addFromVisible = true
|
|
this.form.account = row.account
|
|
this.form.name = row.name
|
|
},
|
|
// 查看
|
|
handleClick(row) {
|
|
console.log(row)
|
|
this.contentVisible = true
|
|
},
|
|
submitForm(formName) {
|
|
this.$refs[formName].validate(valid => {
|
|
if (valid) {
|
|
alert('submit!')
|
|
} else {
|
|
console.log('error submit!!')
|
|
return false
|
|
}
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.col_flex {
|
|
display: flex;
|
|
}
|
|
.layer {
|
|
::v-deep .el-dialog__body {
|
|
padding: 0 0 30px 20px;
|
|
}
|
|
}
|
|
.item_list {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
.item_cont {
|
|
position: relative;
|
|
width: 160px;
|
|
height: 100px;
|
|
overflow: hidden;
|
|
background-color: #f1f1f1;
|
|
margin: 0 10px 10px 0;
|
|
img {
|
|
display: block;
|
|
width: 160px;
|
|
height: 100px;
|
|
}
|
|
.item_info {
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
.item_format {
|
|
display: flex;
|
|
span {
|
|
display: block;
|
|
padding: 2px 5px;
|
|
margin-right: 5px;
|
|
background: rgba(255, 255, 255, 0.5);
|
|
color: #fff;
|
|
font-size: 12px;
|
|
line-height: 12px;
|
|
border-radius: 4px;
|
|
}
|
|
}
|
|
.item_name {
|
|
padding: 2px 0;
|
|
margin: 5px 0 0 0;
|
|
background: rgba(255, 255, 255, 0.5);
|
|
color: #fff;
|
|
}
|
|
}
|
|
.item_player {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
width: 50px;
|
|
height: 50px;
|
|
background: rgba(255, 255, 255, 0.5);
|
|
border-radius: 50%;
|
|
margin: -25px 0 0 -25px;
|
|
z-index: 999;
|
|
}
|
|
}
|
|
}
|
|
</style>
|