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
2023-10-07 11:30:13 +08:00
parent 39a344b054
commit 50541832cc
12 changed files with 451 additions and 153 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
packages/bigscreen/designer/components/Layout.vue
View File

@@ -109,13 +109,7 @@
<component-config v-show="configIndex === 0" :config="currLayout" v-bind="$props"/>
<div class="layout-right__content--wrapper" v-show="configIndex === 1"
v-if="currLayout.type !== 'title' && currLayout.type !== 'video'">
<data-config
ref="dataConfig"
:instance="instance"
:dict="dict"
:options="currLayout"
@change="onChange('barChart')">
</data-config>
<data-config v-model="currLayout" :instance="instance" :dict="dict" @change="onChange('barChart')"/>
</div>
</div>
</template>
@@ -214,7 +208,8 @@
</el-table-column>
</ai-table>
</ai-dialog>
<ai-dialog :visible.sync="isShowAddImg" width="580px" append-to-body title="添加素材" @closed="form.images = []" @onConfirm="onImageConfirm">
<ai-dialog :visible.sync="isShowAddImg" width="580px" append-to-body title="添加素材" @closed="form.images = []"
@onConfirm="onImageConfirm">
<ai-uploader
:instance="instance"
v-model="form.images"
@@ -297,12 +292,14 @@ export default {
workbenchTransform() {
return `scale(${this.heightScale})`
},
currLayout() {
if (this.activeIndex === -1) return {}
return this.componentList[this.activeIndex]
currLayout: {
set(v) {
this.componentList.splice(this.activeIndex, 1, v)
},
get() {
return this.activeIndex > -1 ? this.componentList[this.activeIndex] : {}
}
},
widget() {
if (this.components.length && this.components[this.parentIndex].list.length) {
return this.components[this.parentIndex].list[this.subIndex].list
@@ -410,13 +407,9 @@ export default {
clone(e) {
this.componentList.push(this.deepClone(e))
},
onChange(e) {
if (e.indexOf('Chart') > -1) {
this.$refs[`chart${this.activeIndex}`]?.[0]?.refresh()
}
onChange() {
this.$refs[`chart${this.activeIndex}`]?.[0]?.refresh()
},
deepClone(obj) {
if (obj instanceof Object) {
let newObj = {}
@@ -993,8 +986,8 @@ export default {
}
:deep(.layout-right__content ) {
height: calc(100% - 40px);
overflow-y: overlay;
height: calc(100% - 50px);
overflow-y: auto;
overflow-x: hidden;
.layout-config__group {

117
packages/bigscreen/designer/components/form/DataConfig.vue
View File

@@ -1,19 +1,32 @@
<template>
<div class="layout-config__group--wrapper">
<div class="layout-config__group" v-if="options.type=='map'">
<div flex>
<span class="layoutTitle fill">标记点设置</span>
<el-button type="text" icon="iconfont iconAdd" @click="handleMapMarker()">添加</el-button>
</div>
<div class="layout-config__item" v-for="(item,i) in options.staticData" :key="i">
<label v-text="item.label"/>
<div class="layout-config__item--right">
<el-input :value="[item.lat,item.lng].join(',')" readonly size="small"/>
<el-button type="text" icon="el-icon-edit" @click="handleMapMarker(item,i)"/>
<template v-if="options.type=='map'">
<ai-fold>
<div slot="title" class="flex w100">
<span class="layoutTitle fill">标记点设置</span>
<el-button type="text" icon="iconfont iconAdd" @click="handleMapMarker()">添加</el-button>
</div>
</div>
</div>
<div class="layout-config__group" v-else-if="options.monitorType !== 'hik' && options.monitorType !== 'dahua'">
<div class="layout-config__item" v-for="(item,i) in markers" :key="i">
<label v-text="item.label"/>
<div class="layout-config__item--right">
<el-input :value="[item.lat,item.lng].join(',')" readonly size="small"/>
<el-button type="text" icon="el-icon-edit" @click="handleMapMarker(item,i)"/>
</div>
</div>
</ai-fold>
<ai-fold title="标记点连线">
<ai-dialog-btn :modal="false" dialog-title="设置标记点连线" :customFooter="false" @onConfirm="savePolylines"
@open="handleMapPolylines">
<code-editor slot="btn" readonly :value="JSON.stringify(options.staticData.polylines, null, 2)" lang="json"
theme="github" width="100%" height="250" placeholder="测试默认值"/>
<el-button class="m-center" type="text" @click="handleMapPolylineDoc" :closable="false">
点击查看连线设置参考文档
</el-button>
<code-editor v-model="json" lang="json" theme="github" width="100%" height="440"/>
</ai-dialog-btn>
</ai-fold>
</template>
<div class="layout-config__group" v-else-if="!['hik','dahua'].includes(options.monitorType)">
<h2>基础设置</h2>
<div class="layout-config__item">
<label>数据类型</label>
@@ -29,8 +42,10 @@
</div>
</div>
<div class="layout-config__code" v-if="options.dataType === 'staticData'">
<el-button @click="showEditor" class="layout-config__code--btn" title="编辑" type="text" icon="iconfont iconjdq_led_edit"></el-button>
<code-editor readonly :value="JSON.stringify(options.staticData, null, 2)" lang="json" theme="github" width="100%" height="250"></code-editor>
<el-button @click="showEditor" class="layout-config__code--btn" title="编辑" type="text"
icon="iconfont iconjdq_led_edit"></el-button>
<code-editor readonly :value="JSON.stringify(options.staticData, null, 2)" lang="json" theme="github"
width="100%" height="250"></code-editor>
</div>
<template v-else-if="options.dataType === 'dynamicData'">
<div class="layout-config__item">
@@ -38,10 +53,10 @@
<div class="layout-config__item--right">
<el-select size="mini" v-model="options.sourceDataId" placeholder="请选择数据源" @change="onDataChange">
<el-option
v-for="item in sourceData"
:key="item.id"
:label="item.description"
:value="item.id">
v-for="item in sourceData"
:key="item.id"
:label="item.description"
:value="item.id">
</el-option>
</el-select>
</div>
@@ -65,7 +80,8 @@
</div>
</div>
</div>
<div class="layout-config__group" v-if="options.dataType !== 'staticData' && options.type === 'monitor' &&['cmcc','slw'].includes(options.monitorType)">
<div class="layout-config__group"
v-if="options.dataType !== 'staticData' && options.type === 'monitor' &&['cmcc','slw'].includes(options.monitorType)">
<h2>字段设置</h2>
<div class="layout-config__item">
<label>监控视频</label>
@@ -81,7 +97,8 @@
</div>
</div>
</div>
<div class="layout-config__group" v-if="options.dataType !== 'staticData' && options.type !== 'monitor' && keys.length && options.type !== 'table'">
<div class="layout-config__group"
v-if="options.dataType !== 'staticData' && options.type !== 'monitor' && keys.length && options.type !== 'table'">
<h2>字段设置</h2>
<div class="layout-config__item">
<label>X轴设置</label>
@@ -99,7 +116,8 @@
<div class="layout-config__item">
<label>Y轴设置</label>
<div class="layout-config__item--right">
<el-select size="mini" multiple :multiple-limit="options.type.indexOf('pie') > -1 ? 1 : 100" v-model="options.dataY" collapse-tags placeholder="请选择Y轴"
<el-select size="mini" multiple :multiple-limit="options.type.indexOf('pie') > -1 ? 1 : 100"
v-model="options.dataY" collapse-tags placeholder="请选择Y轴"
@change="onChooseChange">
<el-option
v-for="(item, index) in keys"
@@ -122,7 +140,8 @@
<code-editor v-model="json" lang="json" theme="github" width="100%" height="440"></code-editor>
</div>
</ai-dialog>
<ai-dialog class="layout-config__edit" v-model="showMapEditor" title="设置地图标记点" append-to-body @close="form={}" @confirm="saveMarker">
<ai-dialog class="layout-config__edit" v-model="showMapEditor" title="设置地图标记点" append-to-body
@close="form={}" @confirm="saveMarker">
<el-form :model="form" size="small" ref="mapMarker" label-width="120px">
<el-form-item label="标记点名称" :rules="{required:true,message:'请填写标记点名称'}">
<el-input placeholder="用于地图上展示对标记点的文字标签" v-model="form.label" clearable/>
@@ -149,17 +168,19 @@ import 'brace/mode/json'
import 'brace/snippets/json';
import 'brace/theme/github';
import 'brace/theme/monokai';
import AiDialogBtn from "dui/packages/layout/AiDialogBtn.vue";
export default {
name: 'dataConfig',
model: {
prop: "options",
event: "change"
},
props: {
options: Object,
instance: Function,
dict: Object,
params: Object,
},
data() {
return {
dataTypes: [
@@ -177,25 +198,32 @@ export default {
}
],
isShowEditor: false,
json: {},
json: "",
sourceDataId: '',
sourceData: [],
keys: [],
monitorList: [],
list: [],
jsonData: `{"title":"测试json数据","children":[{"name":"子项名称", "desc":"子项说明" },{"name":"子项名称1", "desc":"子项说明1" }]}`,
showMapEditor: false,
form: {}
}
},
components: {
CodeEditor
computed: {
markers: v => v.options.staticData?.markers || []
},
components: {
AiDialogBtn,
CodeEditor,
},
created() {
if (this.options.type == "map" && Array.isArray(this.options.staticData)) {//处理历史数据,并更新最新数据结构
const values = this.$copy(this.options)
values.staticData = {markers: this.$copy(this.options.staticData)}
this.$emit("change", values)
}
},
mounted() {
this.getDataList()
if ((this.options.dataY && this.options.dataY.length && this.options.dataX) || this.options.type === 'monitor') {
const api = this.options.dataType === 'apiData' ? this.options.api : `/app/appdiylargescreen/statisticsByLsid?id=${this.options.sourceDataId}`
this.instance.post(api).then(res => {
@@ -364,10 +392,19 @@ export default {
const i = this.$copy(this.form.index)
delete this.form.index
if (i > -1) {
this.options.staticData.splice(i, 1, this.form)
} else this.options.staticData.push(this.form)
this.options.staticData.markers.splice(i, 1, this.form)
} else this.options.staticData.markers.push(this.form)
this.showMapEditor = false
})
},
savePolylines() {
this.$set(this.options.staticData, 'polylines', JSON.parse(this.json))
},
handleMapPolylines() {
this.json = JSON.stringify(this.options.staticData.polylines || [{path: [[31.547706, 107.224325], [31.552456, 107.201185]]}])
},
handleMapPolylineDoc() {
window.open('https://lbs.amap.com/api/javascript-api-v2/documentation#polyline')
}
}
}
@@ -384,11 +421,15 @@ export default {
}
}
.ai-dialog__wrapper {
color: #333;
}
.layout-config__group--wrapper {
.layout-config__code .bin-ace-editor {
}
.layout-config__group {
:deep(.layout-config__group) {
padding: 10px 10px 20px;
border-bottom: 1px solid #000000;
@@ -491,6 +532,10 @@ export default {
color: #fff;
}
}
:deep(.el-collapse) {
height: 18px;
}
}
}
</style>

31
packages/bigscreen/designer/config.js
View File

@@ -552,9 +552,9 @@ const components = [
dataType: 'staticData',
dynamicData: [],
staticData: [
{ name: '列1', value: 23 },
{ name: '列2', value: 12 },
{ name: '列2', value: 12 }
{name: '列1', value: 23},
{name: '列2', value: 12},
{name: '列2', value: 12}
]
}
]
@@ -610,7 +610,7 @@ const components = [
thumb: 'https://cdn.cunwuyun.cn/dvcp/dv/tpl/map.png',
is3dAround: '0',
limitArea: '0',
layers:'vector'
layers: 'vector'
},
{
type: 'AiDvMap',
@@ -743,6 +743,29 @@ const components = [
}
],
thumb: 'https://cdn.cunwuyun.cn/dvcp/dv/tpl/swiper.png'
},
{
type: 'swiper',
label: '轮播图(点指示器)',
width: 800,
height: 358,
zIndex: 1,
border: 'border14',
dataType: 'staticData',
staticData: [
{
content: `歙县众城湖羊养殖专业合作社
徐晓红 - 18273645627
歙县郑村镇唐跃村碉墅`
},
{
content: `歙县众城湖羊养殖专业合作社
徐晓红 - 18273645627
歙县郑村镇唐跃村碉墅`
},
],
thumb: 'https://cdn.cunwuyun.cn/dvcp/dv/tpl/swiper.png',
dotIndicator: true
}
]
},