kubbo/dvcp_v2_webapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

选择设备

Browse Source
This commit is contained in:
shijingjing
2022-06-09 08:39:26 +08:00
parent b2600d0de5
commit 55a7cd8624
3 changed files with 152 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
packages/device/AppMediaManage/components/List.vue
View File

@@ -68,7 +68,7 @@
<div class="dialog-footer" slot="footer">
<el-button @click="detailDialog=false" size="medium">关闭</el-button>
<el-button @click="play(info.id)" size="medium">新建广播</el-button>
<el-button @click="play(info.id)" type="primary" size="medium">新建广播</el-button>
</div>
</ai-dialog>
@@ -242,7 +242,6 @@ export default {
width: 100%;
height: 200px;
overflow-y: auto;
overflow-y: scroll;
}
}
</style>

154
packages/device/AppMediaManage/components/Play.vue
View File

@@ -1,5 +1,5 @@
<template>
<ai-detail>
<ai-detail class="Play">
<template #title>
<ai-title title="添加广播" isShowBack isShowBottomBorder @onBackClick="cancel(false)"></ai-title>
</template>
@@ -11,8 +11,13 @@
<ai-select v-model="formData.mediaId" placeholder="播发内容" clearable :selectList="mediaList"></ai-select>
</el-form-item>
<el-form-item label="播放设备" prop="serialNo">
<ai-select v-model="formData.serialNo" placeholder="播放设备" clearable
:selectList="equipmentList"></ai-select>
<!-- <el-input size="small" placeholder="请选择..." class="equipment" disabled v-model="formData.serialNo">
<el-button slot="append" @click="detailDialog = true">选择</el-button>
</el-input> -->
<div class="equipments">
<div>已选择<span>{{ formData.serialNo.length }}</span>个设备</div>
<el-button slot="append" @click="detailDialog = true">选择</el-button>
</div>
</el-form-item>
<el-form-item label="播发级别" prop="messageLevel">
<ai-select v-model="formData.messageLevel" placeholder="播发级别" clearable
@@ -61,6 +66,58 @@
</el-form>
</template>
</ai-card>
<ai-dialog
title="选择设备"
:visible.sync="detailDialog"
:customFooter="true"
:destroyOnClose="true"
width="1080px">
<ai-detail style="background: #FFF;">
<template #content>
<el-alert title="温馨提示：请先在设备管理中绑定行政区划" type="warning" show-icon :closable="false" style="margin-bottom: 12px;"></el-alert>
<div class="container">
<div class="item">
<div class="title">
<div>行政区划</div>
<div>
<el-input placeholder="请输入" v-model="input3" class="input-with-select" size="small">
<el-button slot="append" icon="el-icon-search"></el-button>
</el-input>
</div>
</div>
<div class="content">
<el-tree :data="data" :props="defaultProps" :accordion="true" @node-click="handleNodeClick"></el-tree>
</div>
</div>
<div class="item">
<div class="title">
<div class="checkBox">
<el-checkbox v-model="checked">全选</el-checkbox>
</div>
<div>
<el-input placeholder="请输入" v-model="input3" class="input-with-select" size="small">
<el-button slot="append" icon="el-icon-search"></el-button>
</el-input>
</div>
</div>
<div class="content"></div>
</div>
<div class="item">
<div class="title">
<div>已选择</div>
<el-button type="info" size="small">清空</el-button>
</div>
<div class="content"></div>
</div>
</div>
</template>
</ai-detail>
<div class="dialog-footer" slot="footer">
<el-button @click="detailDialog=false" size="medium">关闭</el-button>
<el-button @click="play(info.id)" type="primary" size="medium">确认</el-button>
</div>
</ai-dialog>
</template>
<template #footer>
<el-button @click="cancel">取消</el-button>
@@ -152,7 +209,49 @@ export default {
],
},
mediaList: [],
equipmentList: []
equipmentList: [],
detailDialog: false,
checked: false,
defaultProps: {
children: 'children',
label: 'label'
},
data: [{
label: '一级 1',
children: [{
label: '二级 1-1',
children: [{
label: '三级 1-1-1'
}]
}]
}, {
label: '一级 2',
children: [{
label: '二级 2-1',
children: [{
label: '三级 2-1-1'
}]
}, {
label: '二级 2-2',
children: [{
label: '三级 2-2-1'
}]
}]
}, {
label: '一级 3',
children: [{
label: '二级 3-1',
children: [{
label: '三级 3-1-1'
}]
}, {
label: '二级 3-2',
children: [{
label: '三级 3-2-1'
}]
}]
}],
}
},
computed: {
@@ -193,6 +292,9 @@ export default {
}
})
},
handleNodeClick(data) {
console.log(data);
},
confirm() {
this.$refs['ruleForm'].validate((valid) => {
if (valid) {
@@ -250,5 +352,49 @@ export default {
</script>
<style lang="scss" scoped>
.Play {
.equipment {
position: relative;
.select {
position: absolute;
right: 0;
top: 0;
}
}
.equipments {
display: flex;
width: 100%;
height: 32px;
align-items: center;
border-radius: 4px;
border: 1px solid #DDD;
justify-content: space-between;
}
.container {
display: flex;
width: 100%;
height: 100%;
.item {
flex: 1;
display: inline-block;
width: 100%;
height: auto;
border: 1px solid #DDD;
.title {
display: flex;
justify-content: space-between;
padding: 10px;
box-sizing: border-box;
height: 50px;
align-items: center;
border-bottom: 1px solid #DDD;
.checkBox {
align-self: center;
}
}
}
}
}
</style>