xuhuajiao
/
canvasScreen_admin
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

设备管理

dev
xuhuajiao 3 years ago
parent
14bd524eb2
commit
d26c292e8a
1 changed files with 239 additions and 0 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 239
      src/views/device/index.vue

239
src/views/device/index.vue
View File

@ -0,0 +1,239 @@
<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>
Write Preview
Loading…
Cancel
Save