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:
aixianling
2022-06-24 17:03:35 +08:00
parent 8e04ec040a
commit e55e0fc2cc
5 changed files with 509 additions and 494 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
packages/bigscreen/designer/AppDesigner.vue
View File

@@ -1,34 +1,19 @@
<template> <template>
<ai-list v-if="!isShowDetail"> <section class="AppDesigner">
<template slot="title"> <component :is="currentPage" v-bind="$props"/>
<ai-title title="大屏列表" :isShowBottomBorder="false" :instance="instance"></ai-title> </section>
</template>
<template slot="tabs">
<el-tabs v-model="currIndex">
<el-tab-pane v-for="(tab,i) in tabs" :key="i" :label="tab.label">
<component :urlPrefix="urlPrefix" :areaId="areaId" :ref="tab.name" v-if="currIndex == i" :is="tab.comp" @change="onChange" lazy :instance="instance"
:dict="dict" :permissions="permissions"/>
</el-tab-pane>
</el-tabs>
</template>
</ai-list>
<Add v-else-if="componentName === 'Add'" :urlPrefix="urlPrefix" :areaId="areaId" :params="params" :instance="instance" :dict="dict" :permissions="permissions"
@change="onChange"></Add>
<SourceData v-else-if="componentName === 'SourceData'" :urlPrefix="urlPrefix" :params="params" :instance="instance" :dict="dict" :permissions="permissions"
@change="onChange"></SourceData>
</template> </template>
<script> <script>
import List from './components/List.vue' import List from './components/List.vue'
import Add from './components/Add' import Add from './components/Add'
import SourceData from './components/SourceData' import SourceData from './components/SourceData'
import Preview from "./components/preview";
export default { export default {
name: 'AppDesigner', name: 'AppDesigner',
label: '大屏设计', label: '大屏设计',
components: {Preview, List, Add, SourceData},
components: {List, Add, SourceData},
props: { props: {
instance: Function, instance: Function,
dict: Object, dict: Object,
@@ -40,6 +25,12 @@ export default {
}, },
computed: { computed: {
currentPage() {
const {hash} = this.$route
return hash == "#sourceData" ? SourceData :
hash == "#add" ? Add :
hash == "#preview" ? Preview : List
},
tabs() { tabs() {
return [ return [
{label: '大屏列表', name: 'FormList', comp: List, permission: ''} {label: '大屏列表', name: 'FormList', comp: List, permission: ''}

43
packages/bigscreen/designer/components/Add.vue
View File

@@ -1,8 +1,7 @@
<template> <template>
<ai-detail> <ai-detail>
<template slot="title"> <template slot="title">
<ai-title :title="id ? '编辑项目' : '添加项目'" isShowBack isShowBottomBorder @onBackClick="cancel(false)"> <ai-title :title="id ? '编辑项目' : '添加项目'" isShowBack isShowBottomBorder @onBackClick="cancel"/>
</ai-title>
</template> </template>
<template slot="content"> <template slot="content">
<el-form ref="form" :model="form" label-width="110px" label-position="right"> <el-form ref="form" :model="form" label-width="110px" label-position="right">
@@ -64,14 +63,6 @@
:theme="config.theme" :theme="config.theme"
@close="isShowLayout = false"> @close="isShowLayout = false">
</Layout> </Layout>
<ai-dv-wrapper :views="[{label: '返回'}]" :theme="config.theme" @change="screenId = false" v-if="screenId" :title="form.name">
<ai-dv-background
:theme="config.theme"
v-if="config.length || config.theme === '1'"
:src="config.theme === '1' ? 'https://cdn.cunwuyun.cn/dvcp/dv/img/dj-bg.png' : config.backgroundImage[0].url">
</ai-dv-background>
<app-gigscreen-viewer :urlPrefix="urlPrefix" :instance="instance" :dict="dict" :id="screenId"/>
</ai-dv-wrapper>
<ai-dialog :visible.sync="dialog" title="定制大屏" @closed="custom={}" @onConfirm="handleCustomizedDV"> <ai-dialog :visible.sync="dialog" title="定制大屏" @closed="custom={}" @onConfirm="handleCustomizedDV">
<el-form ref="CustomDVFrom" size="small" :model="custom" :rules="rules" label-width="80px"> <el-form ref="CustomDVFrom" size="small" :model="custom" :rules="rules" label-width="80px">
<el-form-item label="大屏标题" prop="title"> <el-form-item label="大屏标题" prop="title">
@@ -103,7 +94,6 @@ export default {
props: { props: {
instance: Function, instance: Function,
dict: Object, dict: Object,
params: Object,
urlPrefix: String urlPrefix: String
}, },
inject: { inject: {
@@ -145,24 +135,18 @@ export default {
created() { created() {
this.dict.load('customizedDVs') this.dict.load('customizedDVs')
if (this.params && this.params.id) { this.getInfo()
this.id = this.params.id
this.getInfo(this.params.id)
}
}, },
mounted() {
},
methods: { methods: {
getInfo(id) { getInfo() {
let {id} = this.$route.query
this.instance.post(`${this.urlPrefix}/appdiylargescreen/queryLargeScreenProjectDetailById?id=${id}`).then(res => { this.instance.post(`${this.urlPrefix}/appdiylargescreen/queryLargeScreenProjectDetailById?id=${id}`).then(res => {
if (res.code === 0) { if (res?.data) {
this.form = { this.form = {
...res.data ...res.data
} }
if (res.data.relationLsIds) { if (res.data.relationLsIds) {
this.tableData = res.data.lsList.map(v => { this.tableData = res.data.lsList.map(v => {
let conf = JSON.parse(v.config || '') || {} let conf = JSON.parse(v.config || '') || {}
@@ -195,14 +179,8 @@ export default {
}, },
toViewer(id) { toViewer(id) {
this.instance.post(`${this.urlPrefix}/appdiylargescreen/queryLargeScreenDetailById?id=${id}`).then(res => { this.$router.push({query: {id}, hash: "#preview"})
if (res.data) {
this.config = JSON.parse(res.data.config).dashboard
}
})
this.screenId = id
}, },
onChange(e) { onChange(e) {
const ids = this.tableData.map(v => v.id) const ids = this.tableData.map(v => v.id)
if (ids.indexOf(e.id) < 0) { if (ids.indexOf(e.id) < 0) {
@@ -260,7 +238,7 @@ export default {
this.home && this.home.refreshDvOptions && this.home.refreshDvOptions() this.home && this.home.refreshDvOptions && this.home.refreshDvOptions()
setTimeout(() => { setTimeout(() => {
this.cancel(true) this.cancel()
}, 600) }, 600)
} }
}) })
@@ -268,11 +246,8 @@ export default {
}) })
}, },
cancel(isRefresh) { cancel() {
this.$emit('change', { this.$router.push({})
type: 'list',
isRefresh: !!isRefresh
})
}, },
handleCustomizedDV() { handleCustomizedDV() {

51
packages/bigscreen/designer/components/List.vue
View File

@@ -1,5 +1,6 @@
<template> <template>
<ai-list class="form-list" isTabs style="width: 100%"> <ai-list>
<ai-title slot="title" title="大屏列表" isShowBottomBorder/>
<template slot="content"> <template slot="content">
<ai-search-bar> <ai-search-bar>
<template #left> <template #left>
@@ -61,7 +62,7 @@
</template> </template>
<script> <script>
export default { export default {
name: 'FormList', name: 'FormList',
props: { props: {
instance: Function, instance: Function,
@@ -70,7 +71,7 @@
urlPrefix: String urlPrefix: String
}, },
data () { data() {
return { return {
search: { search: {
current: 1, current: 1,
@@ -84,11 +85,11 @@
id: '', id: '',
isShowAdd: false, isShowAdd: false,
colConfigs: [ colConfigs: [
{ prop: 'name', label: '模板名称' }, {prop: 'name', label: '模板名称'},
{ prop: 'createUserName', align: 'center', label: '创建人' }, {prop: 'createUserName', align: 'center', label: '创建人'},
{ prop: 'description', align: 'center', label: '描述' }, {prop: 'description', align: 'center', label: '描述'},
{ prop: 'status', align: 'center', label: '状态', formart: v => this.dict.getLabel('cwpStatus', v) }, {prop: 'status', align: 'center', label: '状态', formart: v => this.dict.getLabel('cwpStatus', v)},
{ prop: 'createTime', align: 'center', label: '创建时间' } {prop: 'createTime', align: 'center', label: '创建时间'}
], ],
tableData: [], tableData: [],
total: 0, total: 0,
@@ -96,29 +97,29 @@
} }
}, },
created () { created() {
this.dict.load('cwpStatus').then(() => { this.dict.load('cwpStatus').then(() => {
this.getList() this.getList()
}) })
}, },
mounted () { mounted() {
this.loading = true this.loading = true
}, },
methods: { methods: {
copy (id) { copy(id) {
this.id = id this.id = id
this.isShowAdd = true this.isShowAdd = true
}, },
onClose () { onClose() {
this.id = '' this.id = ''
this.form.name = '' this.form.name = ''
}, },
onConfirm () { onConfirm() {
this.$refs.form.validate((valid) => { this.$refs.form.validate((valid) => {
if (valid) { if (valid) {
this.instance.post(`${this.urlPrefix}/appdiylargescreen/copyLargeScreenProject`, null, { this.instance.post(`${this.urlPrefix}/appdiylargescreen/copyLargeScreenProject`, null, {
@@ -138,7 +139,7 @@
}) })
}, },
getList () { getList() {
this.instance.post(`${this.urlPrefix}/appdiylargescreen/allLargeScreenProjectByPage`, null, { this.instance.post(`${this.urlPrefix}/appdiylargescreen/allLargeScreenProjectByPage`, null, {
params: { params: {
...this.search ...this.search
@@ -155,24 +156,12 @@
this.loading = false this.loading = false
}) })
}, },
toEdit(id) {
toEdit (id) { this.$router.push({hash: "#add", query: {id}})
this.$emit('change', {
type: 'add',
params: {
id: id || ''
}
})
}, },
toAddData() {
toAddData () { this.$router.push({hash: "#sourceData"})
this.$emit('change', {
type: 'SourceData'
})
}
} }
} }
}
</script> </script>
<style scoped lang="scss">
</style>

70
packages/bigscreen/designer/components/SourceData.vue
View File

@@ -1,7 +1,7 @@
<template> <template>
<ai-detail> <ai-detail>
<template slot="title"> <template slot="title">
<ai-title title="数据源" isShowBack isShowBottomBorder @onBackClick="cancel(false)"> <ai-title title="数据源" isShowBack isShowBottomBorder @onBackClick="cancel">
</ai-title> </ai-title>
</template> </template>
<template slot="content"> <template slot="content">
@@ -64,7 +64,8 @@
<el-radio label="1">SQL</el-radio> <el-radio label="1">SQL</el-radio>
</el-radio-group> </el-radio-group>
</el-form-item> </el-form-item>
<el-form-item v-if="form.type === '1'" label="sql语句" style="width: 100%;" prop="description" :rules="[{ required: true, message: '请输入sql语句', trigger: 'blur' }]"> <el-form-item v-if="form.type === '1'" label="sql语句" style="width: 100%;" prop="description"
:rules="[{ required: true, message: '请输入sql语句', trigger: 'blur' }]">
<el-input <el-input
:rows="8" :rows="8"
size="small" size="small"
@@ -73,7 +74,8 @@
v-model="form.sqlContent"> v-model="form.sqlContent">
</el-input> </el-input>
</el-form-item> </el-form-item>
<el-form-item v-if="form.type === '0'" label="村微应用" style="width: 100%;" prop="appId" :rules="[{ required: true, message: '请选择村微应用', trigger: 'change' }]"> <el-form-item v-if="form.type === '0'" label="村微应用" style="width: 100%;" prop="appId"
:rules="[{ required: true, message: '请选择村微应用', trigger: 'change' }]">
<el-select size="small" style="width: 100%;" v-model="form.appId" placeholder="请选择村微应用" @change="onAppChange"> <el-select size="small" style="width: 100%;" v-model="form.appId" placeholder="请选择村微应用" @change="onAppChange">
<el-option <el-option
v-for="item in appList" v-for="item in appList"
@@ -83,13 +85,15 @@
</el-option> </el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item v-if="form.type === '0'" label="数据范围" style="width: 100%;" prop="dataRange" :rules="[{ required: true, message: '请选择数据范围', trigger: 'change' }]"> <el-form-item v-if="form.type === '0'" label="数据范围" style="width: 100%;" prop="dataRange"
:rules="[{ required: true, message: '请选择数据范围', trigger: 'change' }]">
<el-radio-group v-model="form.dataRange"> <el-radio-group v-model="form.dataRange">
<el-radio label="0">全部</el-radio> <el-radio label="0">全部</el-radio>
<el-radio label="1">自定义条数</el-radio> <el-radio label="1">自定义条数</el-radio>
</el-radio-group> </el-radio-group>
</el-form-item> </el-form-item>
<el-form-item label="数据条数" style="width: 100%;" v-if="form.dataRange === '1' && form.type === '0'" prop="count" :rules="[{ required: true, message: '请输入数据条数', trigger: 'blur' }]"> <el-form-item label="数据条数" style="width: 100%;" v-if="form.dataRange === '1' && form.type === '0'" prop="count"
:rules="[{ required: true, message: '请输入数据条数', trigger: 'blur' }]">
<el-input <el-input
size="small" size="small"
placeholder="请输入数据条数" placeholder="请输入数据条数"
@@ -100,7 +104,8 @@
<el-form-item :label="'统计项' + index" style="width: 100%;" v-for="(item, index) in form.statisticsConfigs" :key="'statisticsConfigs' + index"> <el-form-item :label="'统计项' + index" style="width: 100%;" v-for="(item, index) in form.statisticsConfigs" :key="'statisticsConfigs' + index">
<div class="form-flex"> <div class="form-flex">
<div> <div>
<el-select size="small" style="width: 160px;" v-model="item.fieldName" @change="e => onChooseField('statisticsConfigs', e, index)" placeholder="请选择" clearable> <el-select size="small" style="width: 160px;" v-model="item.fieldName" @change="e => onChooseField('statisticsConfigs', e, index)"
placeholder="请选择" clearable>
<el-option <el-option
v-for="(item, index) in filedList" v-for="(item, index) in filedList"
:key="index" :key="index"
@@ -181,7 +186,7 @@
</template> </template>
<script> <script>
export default { export default {
name: 'SourceData', name: 'SourceData',
props: { props: {
@@ -191,7 +196,7 @@
urlPrefix: String urlPrefix: String
}, },
data () { data() {
return { return {
isShow: false, isShow: false,
search: { search: {
@@ -201,12 +206,12 @@
}, },
total: 0, total: 0,
colConfigs: [ colConfigs: [
{ prop: 'appName', label: '应用名' }, {prop: 'appName', label: '应用名'},
{ prop: 'appTableName', align: 'center', label: '表名' }, {prop: 'appTableName', align: 'center', label: '表名'},
{ prop: 'description', align: 'center', label: '描述' }, {prop: 'description', align: 'center', label: '描述'},
{ prop: 'type', align: 'center', label: '类型', formart: v => v === '0' ? '村微应用' : 'sql语句' }, {prop: 'type', align: 'center', label: '类型', formart: v => v === '0' ? '村微应用' : 'sql语句'},
{ prop: 'createUserName', align: 'center', label: '创建人' }, {prop: 'createUserName', align: 'center', label: '创建人'},
{ prop: 'createTime', align: 'center', label: '创建时间' } {prop: 'createTime', align: 'center', label: '创建时间'}
], ],
tableData: [], tableData: [],
filedList: [], filedList: [],
@@ -257,7 +262,7 @@
} }
}, },
created () { created() {
this.dict.load(['diyLargeScreenDatasourceCalcType2']).then(() => { this.dict.load(['diyLargeScreenDatasourceCalcType2']).then(() => {
this.getList() this.getList()
this.getAppList() this.getAppList()
@@ -265,7 +270,7 @@
}, },
methods: { methods: {
getInfo (id) { getInfo(id) {
this.instance.post(`${this.urlPrefix}/wxcp/wxuser/queryDetailById?id=${id}`).then(res => { this.instance.post(`${this.urlPrefix}/wxcp/wxuser/queryDetailById?id=${id}`).then(res => {
if (res.code === 0) { if (res.code === 0) {
this.form = { this.form = {
@@ -275,12 +280,12 @@
}) })
}, },
onChooseField (type, fieldName, index) { onChooseField(type, fieldName, index) {
const dictCode = this.filedList.filter(v => v.fieldName === fieldName)[0].dictCode const dictCode = this.filedList.filter(v => v.fieldName === fieldName)[0].dictCode
this.$set(this.form[type][index], 'dictCode', dictCode) this.$set(this.form[type][index], 'dictCode', dictCode)
}, },
add (type) { add(type) {
this.form[type].push({ this.form[type].push({
alias: '', alias: '',
calcType: '', calcType: '',
@@ -290,11 +295,11 @@
}) })
}, },
removeConfig (type, index) { removeConfig(type, index) {
this.form[type].splice(index, 1) this.form[type].splice(index, 1)
}, },
toEdit (e) { toEdit(e) {
this.id = e.id this.id = e.id
this.instance.post(`${this.urlPrefix}/appdiylargescreen/queryDatasourceDetailById?id=${e.id}`).then(res => { this.instance.post(`${this.urlPrefix}/appdiylargescreen/queryDatasourceDetailById?id=${e.id}`).then(res => {
if (res.code === 0) { if (res.code === 0) {
@@ -322,7 +327,7 @@
}) })
}, },
remove (id) { remove(id) {
this.$confirm('确定删除该数据？').then(() => { this.$confirm('确定删除该数据？').then(() => {
this.instance.post(`${this.urlPrefix}/appquestionnairetemplate/delete?id=${id}`).then(res => { this.instance.post(`${this.urlPrefix}/appquestionnairetemplate/delete?id=${id}`).then(res => {
if (res.code == 0) { if (res.code == 0) {
@@ -333,7 +338,7 @@
}) })
}, },
getList () { getList() {
this.instance.post(`${this.urlPrefix}/appdiylargescreen/allDatasourceByPage`, null, { this.instance.post(`${this.urlPrefix}/appdiylargescreen/allDatasourceByPage`, null, {
params: { params: {
...this.search ...this.search
@@ -346,7 +351,7 @@
}) })
}, },
getAppList () { getAppList() {
this.instance.post(`${this.urlPrefix}/appdiylargescreen/allDatasourceApp`).then(res => { this.instance.post(`${this.urlPrefix}/appdiylargescreen/allDatasourceApp`).then(res => {
if (res.code === 0) { if (res.code === 0) {
this.appList = res.data this.appList = res.data
@@ -354,7 +359,7 @@
}) })
}, },
onClose () { onClose() {
this.id = '' this.id = ''
this.form.orderType = 'asc' this.form.orderType = 'asc'
this.form.dataRange = 0 this.form.dataRange = 0
@@ -365,7 +370,7 @@
this.form.count = 100 this.form.count = 100
}, },
onAppChange (e) { onAppChange(e) {
const value = this.appList.filter(v => v.id === e)[0] const value = this.appList.filter(v => v.id === e)[0]
this.form.appTableName = value.appTableName this.form.appTableName = value.appTableName
this.form.appName = value.appName this.form.appName = value.appName
@@ -398,7 +403,7 @@
}) })
}, },
onConfirm () { onConfirm() {
this.$refs.form.validate((valid) => { this.$refs.form.validate((valid) => {
if (valid) { if (valid) {
let configs = [] let configs = []
@@ -438,20 +443,17 @@
}) })
}, },
cancel (isRefresh) { cancel() {
this.$emit('change', { this.$router.push({})
type: 'list',
isRefresh: !!isRefresh
})
}
} }
} }
}
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.form-flex { .form-flex {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
} }
</style> </style>

58
packages/bigscreen/designer/components/preview.vue Normal file
View File

@@ -0,0 +1,58 @@
<template>
<section class="preview">
<ai-dv-wrapper :views="[{label: '返回'}]" :theme="config.theme" @change="$router.back()" v-if="screenId" :title="info.name">
<ai-dv-background
:theme="config.theme"
v-if="config.length || config.theme === '1'"
:src="config.theme === '1' ? 'https://cdn.cunwuyun.cn/dvcp/dv/img/dj-bg.png' : config.backgroundImage[0].url">
</ai-dv-background>
<app-gigscreen-viewer :urlPrefix="urlPrefix" :instance="instance" :dict="dict" :id="screenId"/>
</ai-dv-wrapper>
</section>
</template>
<script>
import AppGigscreenViewer from "../../viewer/AppGigscreenViewer";
export default {
name: "preview",
components: {AppGigscreenViewer},
props: {
instance: Function,
dict: Object,
permissions: Function,
urlPrefix: {
type: String,
default: '/app'
}
},
computed: {
screenId: v => v.$route.query.id
},
data() {
return {
info: {},
config: {}
}
},
methods: {
getDvData() {
let {id} = this.$route.query
this.instance.post(`${this.urlPrefix}/appdiylargescreen/queryLargeScreenDetailById?id=${id}`).then(res => {
if (res?.data) {
this.info = res.data
this.config = JSON.parse(res.data.config).dashboard
}
})
}
},
created() {
this.getDvData()
}
}
</script>
<style lang="scss" scoped>
.preview {
}
</style>