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.
316 lines
9.8 KiB
316 lines
9.8 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>
|
|
<!-- @keyup.enter.native="crud.toQuery" -->
|
|
<div class="form_item">
|
|
<span>设备ID：</span>
|
|
<el-input
|
|
v-model="query.device_id"
|
|
clearable
|
|
size="small"
|
|
placeholder="请输入设备ID"
|
|
style="width: 200px"
|
|
class="filter-item"
|
|
@keyup.enter.native='queryDevice(query.device_id)'
|
|
/>
|
|
</div>
|
|
<div class="form_item">
|
|
<span>设备名称：</span>
|
|
<el-input
|
|
v-model="query.name"
|
|
clearable
|
|
size="small"
|
|
placeholder="请输入设备名称"
|
|
style="width: 200px"
|
|
class="filter-item"
|
|
/>
|
|
</div>
|
|
</el-col>
|
|
<el-col class="page_add" :span="4">
|
|
<el-button class="table_add clear_btn" plain disabled>清空</el-button>
|
|
</el-col>
|
|
</el-row>
|
|
</div>
|
|
<!-- table -->
|
|
<el-row :gutter="15">
|
|
<el-col>
|
|
<el-table
|
|
style="width: 100%;"
|
|
:data="deviceList"
|
|
:header-cell-style="{ background: '#3a8aeb', color: '#fff' }"
|
|
>
|
|
<el-table-column type="selection" width="55" />
|
|
<el-table-column prop="device_id" label="设备ID" align="center" />
|
|
<el-table-column prop="device_account" label="设备账号" align="center" />
|
|
<el-table-column prop="device_name" label="设备名称" align="center" />
|
|
<el-table-column label="设备方向" align="center" >
|
|
<template slot-scope="{row}">
|
|
<div>{{row.device_direction ? '竖屏' : '横屏' }}</div>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="organ_name" 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="create_time" label="创建时间" align="center" width="160" />
|
|
<el-table-column fixed="right" label="操作" align="center" width="120">
|
|
<template slot-scope="scope">
|
|
<el-button
|
|
type="primary"
|
|
class="edit_btn"
|
|
@click="editFormData(scope.row)"
|
|
>编辑</el-button>
|
|
<el-button type="danger" class="record_btn" @click="recordData(scope.$index, scope.row)">记录</el-button>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
</el-col>
|
|
</el-row>
|
|
<!-- 编辑设备 -->
|
|
<div class="layer">
|
|
<el-dialog
|
|
:title="dialogTitle"
|
|
:close-on-click-modal="false"
|
|
:show-close="false"
|
|
:visible.sync="addFromVisible"
|
|
width="576px"
|
|
>
|
|
<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 />
|
|
</el-form-item>
|
|
<el-form-item label="设备名称" prop="name">
|
|
<el-input v-model="form.name" />
|
|
</el-form-item>
|
|
<el-form-item label="设备方向" prop="orientation">
|
|
<el-select v-model="form.orientation" size="small" class="filter-item">
|
|
<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 type="primary" round @click="submitForm('form')">确 定</el-button>
|
|
<el-button round @click="addFromVisible = false">取 消</el-button>
|
|
</div>
|
|
</el-dialog>
|
|
</div>
|
|
|
|
<div class="publish_layer">
|
|
<el-dialog
|
|
title="发布内容"
|
|
:close-on-click-modal="false"
|
|
:visible.sync="contentVisible"
|
|
width="970px"
|
|
height="590px"
|
|
>
|
|
<div class="content_warp">
|
|
<h4>图片</h4>
|
|
<ul class="item_list">
|
|
<li class="item_cont">
|
|
<img src="@/assets/images/background.jpg" alt />
|
|
<div class="item_format">
|
|
<span class="item_type">JPG</span>
|
|
</div>
|
|
<div class="file_name">人工智能</div>
|
|
</li>
|
|
</ul>
|
|
<h4>视频</h4>
|
|
<ul class="item_list">
|
|
<li class="item_cont">
|
|
<img src="@/assets/images/background.jpg" alt />
|
|
<div class="item_format">
|
|
<span class="item_type">Video</span>
|
|
<span class="item_time">03:00</span>
|
|
</div>
|
|
<div class="file_name">防控疫情小贴士</div>
|
|
</li>
|
|
</ul>
|
|
<h4>音频</h4>
|
|
<ul class="item_list">
|
|
<li class="item_cont">
|
|
<div class="radio_img"></div>
|
|
<div class="item_format">
|
|
<span class="item_type">Video</span>
|
|
<span class="item_time">03:00</span>
|
|
</div>
|
|
<div class="file_name">防控疫情小贴士</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</el-dialog>
|
|
</div>
|
|
|
|
<!-- 记录 -->
|
|
<el-dialog
|
|
append-to-body
|
|
:close-on-click-modal="false"
|
|
:visible.sync="recordVisible"
|
|
title="记录"
|
|
class="record_layer"
|
|
width="750px"
|
|
>
|
|
<el-table :data="recordData">
|
|
<el-table-column property="name" label="操作人" />
|
|
<el-table-column property="permissionType" label="角色权限" />
|
|
<el-table-column property="account" label="登录账号" />
|
|
<el-table-column property="type" label="操作类型" />
|
|
<el-table-column property="date" label="操作时间" />
|
|
</el-table>
|
|
</el-dialog>
|
|
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { ReqDeviceEdit } from '@/api/device/deviceList.js'
|
|
import {mapState} from 'vuex'
|
|
import {parseTime} from '@/utils/index.js'
|
|
export default {
|
|
name: 'Device',
|
|
data() {
|
|
return {
|
|
page:'1',
|
|
size:'3',
|
|
// device_id:'',
|
|
dialogTitle: '',
|
|
// 编辑的对话框
|
|
addFromVisible: false,
|
|
contentVisible: false,
|
|
recordVisible: false,
|
|
|
|
stateData: [{ key: '0', name: '全部' }, { key: '1', name: '在线' }, { key: '2', name: '离线' }],
|
|
deviceData: [{ key: '0', name: '竖屏' }, { key: '1', name: '横屏' }],
|
|
query:{
|
|
state:null,
|
|
name:null,
|
|
device_id:'',
|
|
},
|
|
form: {
|
|
account: null,
|
|
name: null,
|
|
orientation: null,
|
|
device_id:'',
|
|
orga_id:''
|
|
},
|
|
rules: {
|
|
name: [{ required: true, message: '请输入设备名称', trigger: 'blur' }, { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }],
|
|
orientation: [{ required: true, message: '请选择设备方向', trigger: 'change' }]
|
|
}
|
|
}
|
|
},
|
|
watch: {},
|
|
mounted(){
|
|
this.getDevice()
|
|
},
|
|
computed:{
|
|
...mapState({
|
|
deviceList:(state)=>state.device.deviceList
|
|
})
|
|
},
|
|
methods: {
|
|
// 获取设备列表的数据
|
|
getDevice(){
|
|
const{page,size}=this
|
|
this.$store.dispatch('getDeviceList',{page,size})
|
|
},
|
|
// 编辑
|
|
editFormData(row) {
|
|
this.addFromVisible = true
|
|
this.form.account = row.device_account
|
|
this.form.name=row.device_name
|
|
this.form.orientation=row.device_direction ? '竖屏' : '横屏'
|
|
this.form.device_id=row.device_id
|
|
// console.log(id)
|
|
// ReqDeviceEdit(params).then(res => {
|
|
// console.log(res)
|
|
// })
|
|
},
|
|
recordData(index, row) {
|
|
this.recordVisible = true
|
|
},
|
|
// 查看
|
|
handleClick(row) {
|
|
console.log(row)
|
|
this.contentVisible = true
|
|
},
|
|
// 修改设备信息并提交
|
|
submitForm(formName) {
|
|
this.$refs[formName].validate(valid => {
|
|
if (valid) {
|
|
const params = {
|
|
account:this.form.account,
|
|
device_name:this.form.name,
|
|
device_direction:this.form.orientation,
|
|
device_id:this.form.device_id
|
|
}
|
|
// console.log(account,device_name,device_direction)
|
|
console.log(params)
|
|
ReqDeviceEdit(params).then(res => {
|
|
console.log(res)
|
|
})
|
|
} else {
|
|
console.log('error submit!!')
|
|
return false
|
|
}
|
|
})
|
|
},
|
|
// 查询设备
|
|
queryDevice(id){
|
|
const params={
|
|
device_id:id
|
|
}
|
|
ReqQueryDevice(params).then(res=>{
|
|
console.log(res)
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.clear_btn {
|
|
color: #3a8aeb;
|
|
border-color: #3a8aeb;
|
|
}
|
|
.publish_layer {
|
|
::v-deep .el-dialog__body {
|
|
padding: 0 20px 30px 20px;
|
|
height: 590px;
|
|
overflow-y: auto;
|
|
}
|
|
}
|
|
.content_warp {
|
|
padding-top: 16px;
|
|
h4 {
|
|
margin: 6px 0 16px 0;
|
|
font-size: 16px;
|
|
color: #333;
|
|
}
|
|
}
|
|
</style>
|