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

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>