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 18:04:34 +08:00
parent 03272542b9
commit fa551fe618
5 changed files with 218 additions and 159 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -6,14 +6,11 @@
<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 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)"/>
<el-button type="text" icon="el-icon-delete" @click="removeMapMarker(i)"/>
</div>
</div>
<config-item v-for="(item,i) in markers" :key="i" :label="item.label">
<el-input :value="[item.lat,item.lng].join(',')" readonly size="small"/>
<el-button type="text" icon="el-icon-edit" @click="handleMapMarker(item,i)"/>
<el-button type="text" icon="el-icon-delete" @click="removeMapMarker(i)"/>
</config-item>
</ai-fold>
<ai-fold title="标记点连线">
<ai-dialog-btn :modal="false" dialog-title="设置标记点连线" :customFooter="false" @onConfirm="savePolylines"
@@ -27,120 +24,103 @@
</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>
<div class="layout-config__item--right">
<el-select size="mini" v-model="options.dataType" placeholder="请选择数据类型">
<el-option
v-for="item in dataTypes"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
<template v-else-if="options.type=='plot'">
<ai-fold v-for="(chart,i) in options.charts" :key="i" :title="chart.title">
<config-item label="图表名">
<el-input size="small" v-model="chart.title"/>
</config-item>
<config-item label="图表类型">
<ai-select v-model="chart.chart" :select-list="charts"/>
</config-item>
<config-item label="数据类型">
<ai-select v-model="chart.dataType" placeholder="请选择数据类型" :select-list="dataTypes"/>
</config-item>
<config-item v-if="chart.dataType=='dynamicData'" label="数据源">
<ai-select v-model="chart.sourceDataId" placeholder="请选择数据源" :select-list="sourceData"
:prop="{label:'description'}"/>
</config-item>
<div class="layout-config__code" v-else-if="chart.dataType === 'staticData'">
<ai-dialog-btn :modal="false" dialog-title="编辑器" :customFooter="false"
@confirm="chart.data=JSON.parse(json)"
@open="json=JSON.stringify(chart.data||null)">
<code-editor slot="btn" readonly :value="JSON.stringify(chart.data)" lang="json" theme="github"
width="100%" height="250"/>
<code-editor v-model="json" lang="json" theme="github" width="100%" height="440"/>
</ai-dialog-btn>
</div>
</div>
<config-item label="接口地址" v-else-if="chart.dataType=='apiData'">
<el-input size="mini" v-model="chart.api"/>
</config-item>
</ai-fold>
<el-button type="text" icon="el-icon-plus" @click="options.charts.push({title:'新图表'})">添加图表</el-button>
</template>
<div class="layout-config__group" v-else-if="['hik','dahua'].includes(options.monitorType)">
<h2>基础设置</h2>
<config-item label="视频地址">
<el-input size="mini" v-model="options.src"/>
</config-item>
</div>
<div class="layout-config__group" v-else>
<h2>基础设置</h2>
<config-item label="数据类型">
<ai-select v-model="options.dataType" placeholder="请选择数据类型" :select-list="dataTypes"/>
</config-item>
<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>
<ai-dialog-btn :modal="false" dialog-title="编辑器" :customFooter="false" @onConfirm="onConfirm"
@open="showEditor">
<code-editor slot="btn" readonly :value="JSON.stringify(options.staticData)" lang="json" theme="github"
width="100%" height="250"/>
<code-editor v-model="json" lang="json" theme="github" width="100%" height="440"/>
</ai-dialog-btn>
</div>
<template v-else-if="options.dataType === 'dynamicData'">
<div class="layout-config__item">
<label>数据源</label>
<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">
</el-option>
</el-select>
</div>
</div>
</template>
<template v-else>
<div class="layout-config__item">
<label>接口地址</label>
<div class="layout-config__item--right">
<el-input size="mini" v-model="options.api" @blur="onApiChange"></el-input>
</div>
</div>
</template>
<config-item v-else-if="options.dataType === 'dynamicData'" label="数据源">
<ai-select v-model="options.sourceDataId" placeholder="请选择数据源" :select-list="sourceData"
:prop="{label:'description'}" @change="onDataChange"/>
</config-item>
<config-item label="接口地址" v-else>
<el-input size="mini" v-model="options.api" @change="onApiChange"/>
</config-item>
</div>
<div class="layout-config__group" v-if="options.monitorType === 'hik' || options.monitorType === 'dahua'">
<h2>基础设置</h2>
<div class="layout-config__item">
<label>视频地址</label>
<div class="layout-config__item--right">
<el-input size="mini" v-model="options.src"></el-input>
</div>
</div>
</div>
<div class="layout-config__group"
v-if="options.dataType !== 'staticData' && options.type === 'monitor' &&['cmcc','slw'].includes(options.monitorType)">
<div v-if="options.dataType!='staticData'&&options.type=='monitor'&&['cmcc','slw'].includes(options.monitorType)"
class="layout-config__group">
<h2>字段设置</h2>
<div class="layout-config__item">
<label>监控视频</label>
<div class="layout-config__item--right">
<el-select size="mini" v-model="options.moniterId" placeholder="请选择监控视频" @change="onMoniterId">
<el-option
v-for="(item, index) in monitorList"
:key="index"
:label="item.name"
:value="item.id">
</el-option>
</el-select>
</div>
</div>
<config-item label="监控视频">
<el-select size="mini" v-model="options.moniterId" placeholder="请选择监控视频" @change="onMoniterId">
<el-option
v-for="(item, index) in monitorList"
:key="index"
:label="item.name"
:value="item.id">
</el-option>
</el-select>
</config-item>
</div>
<div class="layout-config__group"
v-if="options.dataType !== 'staticData' && options.type !== 'monitor' && keys.length && options.type !== 'table'">
<div v-if="options.dataType!='staticData'&& keys.length &&!['table','monitor','map','plot'].includes(options.type)"
class="layout-config__group">
<h2>字段设置</h2>
<div class="layout-config__item">
<label>X轴设置</label>
<div class="layout-config__item--right">
<el-select size="mini" v-model="options.dataX" placeholder="请选择X轴" @change="onChooseChange">
<el-option
v-for="(item, index) in keys"
:key="index"
:label="item"
:value="item">
</el-option>
</el-select>
</div>
</div>
<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轴"
@change="onChooseChange">
<el-option
v-for="(item, index) in keys"
:key="index"
:label="item"
:value="item">
</el-option>
</el-select>
</div>
</div>
<config-item label="X轴设置">
<el-select size="mini" v-model="options.dataX" placeholder="请选择X轴" @change="onChooseChange">
<el-option
v-for="(item, index) in keys"
:key="index"
:label="item"
:value="item">
</el-option>
</el-select>
</config-item>
<config-item label="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"
:key="index"
:label="item"
:value="item">
</el-option>
</el-select>
</config-item>
</div>
<ai-dialog
append-to-body
:visible.sync="isShowEditor"
width="1000px"
class="layout-config__edit"
title="编辑器"
@onConfirm="onConfirm">
<div>
<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">
<el-form :model="form" size="small" ref="mapMarker" label-width="120px">
@@ -173,6 +153,8 @@ import 'brace/snippets/json';
import 'brace/theme/github';
import 'brace/theme/monokai';
import AiDialogBtn from "dui/packages/layout/AiDialogBtn.vue";
import AiFold from "dui/packages/layout/AiFold.vue";
import charts from "../../../../../components/AiEchart/echartTpls";
export default {
name: 'dataConfig',
@@ -189,19 +171,18 @@ export default {
return {
dataTypes: [
{
value: 'staticData',
id: 'staticData',
label: '静态数据'
},
{
value: 'dynamicData',
id: 'dynamicData',
label: '动态数据'
},
{
value: 'apiData',
id: 'apiData',
label: '接口'
}
],
isShowEditor: false,
json: "",
sourceDataId: '',
sourceData: [],
@@ -209,15 +190,28 @@ export default {
monitorList: [],
list: [],
showMapEditor: false,
form: {}
form: {},
charts: Object.keys(charts).map((label, id) => ({id, label}))
}
},
computed: {
markers: v => v.options.staticData?.markers || []
markers: v => v.options.staticData?.markers || [],
},
components: {
AiFold,
AiDialogBtn,
CodeEditor,
configItem: {
props: {
label: String
},
render(h) {
return h('div', {class: 'layout-config__item'}, [
h('label', this.label),
h('div', {class: 'layout-config__item--right fill'}, this.$slots.default)
])
}
}
},
created() {
if (this.options.type == "map" && Array.isArray(this.options.staticData)) {//处理历史数据,并更新最新数据结构
@@ -257,7 +251,6 @@ export default {
methods: {
showEditor() {
this.json = JSON.stringify(this.options.staticData, null, 2)
this.isShowEditor = true
},
onMoniterId(e) {
@@ -383,7 +376,6 @@ export default {
onConfirm() {
this.$set(this.options, 'staticData', JSON.parse(this.json))
this.isShowEditor = false
this.$emit('change')
},
handleMapMarker(v = {}, index) {
@@ -448,18 +440,6 @@ export default {
.layout-config__code {
position: relative;
padding-left: 10px;
.layout-config__code--btn {
position: absolute;
right: 0;
top: 0;
color: gray;
z-index: 111;
&:hover {
opacity: 0.8;
}
}
}
& > h2 {
@@ -476,7 +456,7 @@ export default {
}
}
.layout-config__item {
:deep(.layout-config__item) {
display: flex;
align-items: center;
justify-content: space-between;
@@ -494,26 +474,11 @@ export default {
text-align: right;
}
.layout-config__item--right {
display: flex;
align-items: center;
justify-content: flex-end;
width: 200px;
text-align: right;
}
.el-select .el-tag {
color: #fff;
background: transparent;
}
input {
background: #262C33;
font-size: 12px;
color: #fff;
border: 1px solid #030411;
}
.el-input__icon {
color: #fff;
}
@@ -550,8 +515,22 @@ export default {
color: #f46;
}
.el-button + .el-button {
.el-button--text + .el-button--text {
margin-left: 0;
}
input {
background: #262C33;
font-size: 12px;
color: #fff;
border: 1px solid #030411;
}
.layout-config__item--right {
display: flex;
align-items: center;
justify-content: flex-end;
text-align: right;
margin-left: 30px;
}
}
</style>

12
packages/bigscreen/designer/components/form/componentConfig.vue
View File

@@ -106,10 +106,12 @@
<div class="layout-config__item" v-if="config.type !== 'AiDvTable'">
<label>表格行数</label>
<div class="layout-config__item--right">
<el-input-number size="mini" style="width: 232px" :min="0" v-model="config.rowNum" controls-position="right"></el-input-number>
<el-input-number size="mini" style="width: 232px" :min="0" v-model="config.rowNum"
controls-position="right"></el-input-number>
</div>
</div>
<div class="layout-config__item table-config" v-if="config.type === 'AiDvTable'" v-for="(item, index) in config.config" :key="index">
<div class="layout-config__item table-config" v-if="config.type === 'AiDvTable'"
v-for="(item, index) in config.config" :key="index">
<label>第{{ index + 1 }}列</label>
<div class="layout-config__item--right">
<el-select size="mini" style="width: 80px;" v-model="item.align" placeholder="请选择" clearable>
@@ -215,7 +217,7 @@ export default {
data() {
return {
borderList: ['border0', 'border1', 'border2', 'border3', 'border4', 'border5', 'border6', 'border7', 'border8', 'border9', 'border10',
'border11', 'border12', 'border13'],//边框待选项
'border11', 'border12', 'border13'],//边框待选项
summaryList: ['summary0', 'summary1', 'summary2', 'summary3', 'summary4', 'summary6', 'summary5',
'summary7', 'summary8', 'summary9', 'summary10', 'summary11', 'summary12', 'summary13', 'summary14',
'summary15', 'summary16', 'summary17', 'summary18'],//汇总待选项
@@ -239,9 +241,7 @@ export default {
width: 232px;
:deep( .el-select ) {
width: 80px input {
width: 80px;
}
width: 80px;
}
.el-select {

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

@@ -1,3 +1,7 @@
/**
* 大屏设计组件库,模板设置中心
*
*/
const components = [
{
type: 'chart',
@@ -454,6 +458,36 @@ const components = [
dynamicData: []
}
]
},
{
label: "多维图",
type: "plot",
list: [
{
type: 'plot',
label: '多维图表',
title: '多维图表',
border: 'border0',
width: 500,
height: 300,
top: 0,
left: 0,
thumb: 'https://cdn.cunwuyun.cn/dvcp/dv/tpl/pie.png',
charts: [
{
title: "饼状图统计",
chart: "pieChart2", dataType: 'staticData',
data: [
{name: '阿斯达', v1: 23, v2: 33},
{name: '水电费', v1: 12, v2: 34},
{name: '凡哥', v1: 67, v2: 25},
{name: '党费', v1: 98, v2: 85}
]
}
],
}
]
}
]
},