|
|
|
@ -5,7 +5,7 @@ |
|
|
|
<el-row type="flex"> |
|
|
|
<el-col :span="20" class="col_flex"> |
|
|
|
<div class="form_item"> |
|
|
|
<span>状态</span> |
|
|
|
<span>状态：</span> |
|
|
|
<el-select v-model="query.state" size="small" class="filter-item" style="width: 120px"> |
|
|
|
<el-option |
|
|
|
v-for="item in stateData" |
|
|
|
@ -16,7 +16,7 @@ |
|
|
|
</el-select> |
|
|
|
</div> |
|
|
|
<div class="form_item"> |
|
|
|
<span>设备ID</span> |
|
|
|
<span>设备ID：</span> |
|
|
|
<el-input |
|
|
|
v-model="query.blurry" |
|
|
|
clearable |
|
|
|
@ -28,7 +28,7 @@ |
|
|
|
/> |
|
|
|
</div> |
|
|
|
<div class="form_item"> |
|
|
|
<span>设备名称</span> |
|
|
|
<span>设备名称：</span> |
|
|
|
<el-input |
|
|
|
v-model="query.blurry" |
|
|
|
clearable |
|
|
|
@ -42,14 +42,18 @@ |
|
|
|
<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-button class="table_add clear_btn" plain disabled>清空</el-button> |
|
|
|
</el-col> |
|
|
|
</el-row> |
|
|
|
</div> |
|
|
|
<!-- table --> |
|
|
|
<el-row :gutter="15"> |
|
|
|
<el-col> |
|
|
|
<el-card class="box-card" shadow="never"> |
|
|
|
<el-table style="width: 100%;" :data="tableData"> |
|
|
|
<el-table |
|
|
|
style="width: 100%;" |
|
|
|
:data="tableData" |
|
|
|
:header-cell-style="{ background: '#3a8aeb', color: '#fff' }" |
|
|
|
> |
|
|
|
<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" /> |
|
|
|
@ -71,16 +75,15 @@ |
|
|
|
<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" /> |
|
|
|
class="edit_btn" |
|
|
|
@click="editFormData(scope.$index, scope.row)" |
|
|
|
>编辑</el-button> |
|
|
|
<el-button type="danger" class="record_btn">记录</el-button> |
|
|
|
</template> |
|
|
|
</el-table-column> |
|
|
|
</el-table> |
|
|
|
<!--分页组件--> |
|
|
|
<pagination /> |
|
|
|
</el-card> |
|
|
|
</el-col> |
|
|
|
</el-row> |
|
|
|
<!-- 编辑设备 --> |
|
|
|
@ -89,22 +92,17 @@ |
|
|
|
:title="dialogTitle" |
|
|
|
:close-on-click-modal="false" |
|
|
|
:visible.sync="addFromVisible" |
|
|
|
width="400px" |
|
|
|
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 style="width: 200px" /> |
|
|
|
<el-input v-model="form.account" autocomplete="off" disabled /> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item label="设备名称" prop="name"> |
|
|
|
<el-input v-model="form.name" style="width: 200px" /> |
|
|
|
<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" |
|
|
|
style="width: 200px" |
|
|
|
> |
|
|
|
<el-select v-model="form.orientation" size="small" class="filter-item"> |
|
|
|
<el-option |
|
|
|
v-for="item in deviceData" |
|
|
|
:key="item.key" |
|
|
|
@ -115,37 +113,53 @@ |
|
|
|
</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> |
|
|
|
<el-button type="primary" round @click="submitForm('form')">确 定</el-button> |
|
|
|
<el-button round @click="addFromVisible = false">取 消</el-button> |
|
|
|
</div> |
|
|
|
</el-dialog> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="layer"> |
|
|
|
<div class="publish_layer"> |
|
|
|
<el-dialog |
|
|
|
title="发布内容" |
|
|
|
:close-on-click-modal="false" |
|
|
|
:visible.sync="contentVisible" |
|
|
|
width="720px" |
|
|
|
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_info"> |
|
|
|
<img src="@/assets/images/background.jpg" alt /> |
|
|
|
<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> |
|
|
|
<div class="item_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="item_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="item_name">防控疫情小贴士</div> |
|
|
|
</li> |
|
|
|
</ul> |
|
|
|
</div> |
|
|
|
</el-dialog> |
|
|
|
</div> |
|
|
|
@ -201,7 +215,7 @@ export default { |
|
|
|
watch: {}, |
|
|
|
methods: { |
|
|
|
// 编辑 |
|
|
|
edit(index, row) { |
|
|
|
editFormData(index, row) { |
|
|
|
this.dialogTitle = '编辑设备' |
|
|
|
this.addFromVisible = true |
|
|
|
this.form.account = row.account |
|
|
|
@ -226,9 +240,23 @@ export default { |
|
|
|
} |
|
|
|
</script> |
|
|
|
<style lang="scss" scoped> |
|
|
|
.layer { |
|
|
|
.clear_btn { |
|
|
|
color: #3a8aeb; |
|
|
|
border-color: #3a8aeb; |
|
|
|
} |
|
|
|
.publish_layer { |
|
|
|
::v-deep .el-dialog__body { |
|
|
|
padding: 0 0 30px 20px; |
|
|
|
padding: 0 20px 30px 20px; |
|
|
|
height: 590px; |
|
|
|
overflow-y: auto; |
|
|
|
} |
|
|
|
} |
|
|
|
.content_warp { |
|
|
|
padding-top: 16px; |
|
|
|
h4 { |
|
|
|
margin: 0; |
|
|
|
font-size: 16px; |
|
|
|
color: #333; |
|
|
|
} |
|
|
|
} |
|
|
|
.item_list { |
|
|
|
@ -236,40 +264,53 @@ export default { |
|
|
|
flex-wrap: wrap; |
|
|
|
.item_cont { |
|
|
|
position: relative; |
|
|
|
width: 160px; |
|
|
|
height: 100px; |
|
|
|
width: 166px; |
|
|
|
height: 174px; |
|
|
|
overflow: hidden; |
|
|
|
background-color: #f1f1f1; |
|
|
|
background-color: #fff; |
|
|
|
border: 1px solid #f0f0f0; |
|
|
|
border-radius: 6px; |
|
|
|
margin: 0 10px 10px 0; |
|
|
|
img { |
|
|
|
display: block; |
|
|
|
width: 160px; |
|
|
|
height: 100px; |
|
|
|
width: 164px; |
|
|
|
height: 140px; |
|
|
|
} |
|
|
|
.radio_img { |
|
|
|
width: 164px; |
|
|
|
height: 140px; |
|
|
|
background: url(../../assets/images/t-yp.png) no-repeat #b3e8fa center; |
|
|
|
background-size: 98px 98px; |
|
|
|
} |
|
|
|
.item_info { |
|
|
|
position: absolute; |
|
|
|
left: 0; |
|
|
|
right: 0; |
|
|
|
bottom: 0; |
|
|
|
.item_format { |
|
|
|
display: flex; |
|
|
|
position: absolute; |
|
|
|
left: 0; |
|
|
|
bottom: 38px; |
|
|
|
span { |
|
|
|
display: block; |
|
|
|
padding: 2px 5px; |
|
|
|
margin-right: 5px; |
|
|
|
background: rgba(255, 255, 255, 0.5); |
|
|
|
width: 47px; |
|
|
|
height: 18px; |
|
|
|
// padding: 2px 5px; |
|
|
|
margin-left: 6px; |
|
|
|
text-align: center; |
|
|
|
background: #3a8aeb; |
|
|
|
color: #fff; |
|
|
|
font-size: 12px; |
|
|
|
line-height: 12px; |
|
|
|
border-radius: 4px; |
|
|
|
line-height: 18px; |
|
|
|
border-radius: 9px; |
|
|
|
} |
|
|
|
} |
|
|
|
.item_name { |
|
|
|
padding: 2px 0; |
|
|
|
margin: 5px 0 0 0; |
|
|
|
background: rgba(255, 255, 255, 0.5); |
|
|
|
color: #fff; |
|
|
|
} |
|
|
|
height: 32px; |
|
|
|
line-height: 32px; |
|
|
|
padding: 0 11px; |
|
|
|
color: #333; |
|
|
|
display: -webkit-box; |
|
|
|
-webkit-box-orient: vertical; |
|
|
|
-webkit-line-clamp: 1; |
|
|
|
overflow: hidden; |
|
|
|
text-overflow: ellipsis; |
|
|
|
} |
|
|
|
.item_player { |
|
|
|
position: absolute; |
|
|
|
|
