6 changed files with 622 additions and 436 deletions
@ -1,48 +1,200 @@ |
|||
<template> |
|||
<div class="app-container"> |
|||
<!-- 标题按钮部分开始 --> |
|||
<div class="tab-header webtop"> |
|||
<!-- 标题 --> |
|||
<div>环境监控-视频中心</div> |
|||
<!-- start 添加修改按钮 --> |
|||
<div /> |
|||
<!-- end 添加修改按钮 --> |
|||
<!-- end 详情按钮 --> |
|||
<div> |
|||
<div v-show="viewState == 1"> |
|||
<button-bar ref="btnbar" view-title="环境监控-视频中心" :btndisabled="btndisabled" @btnhandle="btnHandle" /> |
|||
<el-row style="margin-top: 20px;padding-left: 10px;padding-right: 10px;padding-bottom: 10px;"> |
|||
<el-col style="margin-left: 20px;margin-right: 20px;" :span="5"> |
|||
<div > |
|||
<el-card class="box-card"> |
|||
<div slot="header" class="clearfix"> |
|||
<span>卡片名称</span> |
|||
<el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button> |
|||
</div> |
|||
<img src="../../../assets/home/bIcon8.png"/> |
|||
</el-card> |
|||
</div> |
|||
|
|||
</el-col> |
|||
|
|||
<el-col style="margin-left: 20px;margin-right: 20px;" :span="5"> |
|||
<div > |
|||
<el-card class="box-card"> |
|||
<div slot="header" class="clearfix"> |
|||
<span>卡片名称</span> |
|||
<el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button> |
|||
</div> |
|||
<img src="../../../assets/home/bIcon8.png"/> |
|||
</el-card> |
|||
</div> |
|||
|
|||
</el-col> |
|||
|
|||
<el-col style="margin-left: 20px;margin-right: 20px;" :span="5"> |
|||
<div > |
|||
<el-card class="box-card"> |
|||
<div slot="header" class="clearfix"> |
|||
<span>卡片名称</span> |
|||
<el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button> |
|||
</div> |
|||
<img src="../../../assets/home/bIcon8.png"/> |
|||
</el-card> |
|||
</div> |
|||
|
|||
</el-col> |
|||
|
|||
<el-col style="margin-left: 20px;margin-right: 20px;" :span="5"> |
|||
<div > |
|||
<el-card class="box-card"> |
|||
<div slot="header" class="clearfix"> |
|||
<span>卡片名称</span> |
|||
<el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button> |
|||
</div> |
|||
<img src="../../../assets/home/bIcon8.png"/> |
|||
</el-card> |
|||
</div> |
|||
|
|||
</el-col> |
|||
|
|||
</el-row> |
|||
|
|||
<el-row style="margin-top: 20px;padding-left: 10px;padding-right: 10px;padding-bottom: 10px;"> |
|||
<el-col style="margin-left: 20px;margin-right: 20px;" :span="5"> |
|||
<div > |
|||
<el-card class="box-card"> |
|||
<div slot="header" class="clearfix"> |
|||
<span>卡片名称</span> |
|||
<el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button> |
|||
</div> |
|||
<img src="../../../assets/home/bIcon8.png"/> |
|||
</el-card> |
|||
</div> |
|||
|
|||
</el-col> |
|||
|
|||
<el-col style="margin-left: 20px;margin-right: 20px;" :span="5"> |
|||
<div > |
|||
<el-card class="box-card"> |
|||
<div slot="header" class="clearfix"> |
|||
<span>卡片名称</span> |
|||
<el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button> |
|||
</div> |
|||
<img src="../../../assets/home/bIcon8.png"/> |
|||
</el-card> |
|||
</div> |
|||
|
|||
</el-col> |
|||
|
|||
<el-col style="margin-left: 20px;margin-right: 20px;" :span="5"> |
|||
<div > |
|||
<el-card class="box-card"> |
|||
<div slot="header" class="clearfix"> |
|||
<span>卡片名称</span> |
|||
<el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button> |
|||
</div> |
|||
<img src="../../../assets/home/bIcon8.png"/> |
|||
</el-card> |
|||
</div> |
|||
|
|||
</el-col> |
|||
|
|||
<el-col style="margin-left: 20px;margin-right: 20px;" :span="5"> |
|||
<div > |
|||
<el-card class="box-card"> |
|||
<div slot="header" class="clearfix"> |
|||
<span>卡片名称</span> |
|||
<el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button> |
|||
</div> |
|||
<img src="../../../assets/home/bIcon8.png"/> |
|||
</el-card> |
|||
</div> |
|||
|
|||
</el-col> |
|||
|
|||
</el-row> |
|||
|
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: 'MonitorVideos', |
|||
import ButtonBar from '@/components/ButtonBar' |
|||
export default { |
|||
components: { |
|||
ButtonBar, |
|||
}, |
|||
data() { |
|||
return { |
|||
btndisabled: false, |
|||
viewState: 1, // 1、列表 2、添加 3、修改 4、查看 |
|||
submitdisabled: false, |
|||
viewTitle: '视频中心', |
|||
tableKey: 0, |
|||
index: 0, |
|||
totalQuantity: '', // 合计数量 |
|||
amountInTotal: '', // 合计金额 |
|||
formobj: {}, |
|||
rules: {} |
|||
btnList: [ |
|||
// { |
|||
// type: 'primary', |
|||
// size: 'small', |
|||
// icon: 'plus', |
|||
// btnKey: 'toAdd', |
|||
// btnLabel: '新增' |
|||
// }, |
|||
// { |
|||
// type: 'danger', |
|||
// size: 'small', |
|||
// icon: 'del', |
|||
// btnKey: 'doDel', |
|||
// btnLabel: '删除' |
|||
// }, |
|||
{ |
|||
type: 'info', |
|||
size: 'small', |
|||
icon: 'cross', |
|||
btnKey: 'doClose', |
|||
btnLabel: '关闭' |
|||
} |
|||
], |
|||
} |
|||
}, |
|||
mounted() { |
|||
this.$refs['btnbar'].setButtonList(this.btnList) |
|||
}, |
|||
created() {}, |
|||
methods: { |
|||
handleReturn() { |
|||
this.formobj = {} |
|||
this.$refs['form_obj'].resetFields() |
|||
this.$emit('doback') |
|||
btnHandle(btnKey) { |
|||
switch (btnKey) { |
|||
case 'doClose': |
|||
this.doClose() |
|||
break |
|||
default: |
|||
break |
|||
} |
|||
}, |
|||
doClose() { |
|||
this.$store.dispatch('tagsView/delView', this.$route) |
|||
this.$router.go(-1) |
|||
}, |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style scoped> |
|||
.title { |
|||
display: flex; |
|||
flex-direction: row; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
} |
|||
<style lang="scss"> |
|||
.wrap { |
|||
padding: 12px; |
|||
} |
|||
|
|||
.demo-layout { |
|||
height: 25px; |
|||
border-radius: 4px; |
|||
} |
|||
|
|||
.bg-purple { |
|||
background: #CED7E1; |
|||
} |
|||
|
|||
.bg-purple-light { |
|||
background: #e5e9f2; |
|||
} |
|||
|
|||
.bg-purple-dark { |
|||
background: #99a9bf; |
|||
} |
|||
</style> |
|||
|
|||
Loading…
Reference in new issue