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>
<ai-list v-if="!isShowDetail">
<template slot="title">
<ai-title title="大屏列表" :isShowBottomBorder="false" :instance="instance"></ai-title>
</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>
<section class="AppDesigner">
<component :is="currentPage" v-bind="$props"/>
</section>
</template>
<script>
import List from './components/List.vue'
import Add from './components/Add'
import SourceData from './components/SourceData'
import Preview from "./components/preview";
export default {
name: 'AppDesigner',
label: '大屏设计',
components: {List, Add, SourceData},
components: {Preview, List, Add, SourceData},
props: {
instance: Function,
dict: Object,
@@ -40,6 +25,12 @@ export default {
},
computed: {
currentPage() {
const {hash} = this.$route
return hash == "#sourceData" ? SourceData :
hash == "#add" ? Add :
hash == "#preview" ? Preview : List
},
tabs() {
return [
{label: '大屏列表', name: 'FormList', comp: List, permission: ''}

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

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

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

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

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

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