大概可以看的一版
This commit is contained in:
aixianling
@@ -29,177 +29,7 @@
|
||||
<el-input v-model="config.summaryTitle" size="mini" v-if="config.display === 'summary2'"/>
|
||||
<el-input v-else v-model="config.title" size="mini"/>
|
||||
</config-item>
|
||||
<config-item label="边框" v-if="config.type !== 'display'">
|
||||
<el-select size="mini" v-model="config.border" placeholder="请选择边框" clearable>
|
||||
<el-option
|
||||
v-for="(item, index) in borderList"
|
||||
:key="index"
|
||||
:label="item"
|
||||
:value="item">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</config-item>
|
||||
<template v-if="/(AiDvMap|linkageMap)/.test(config.type)">
|
||||
<config-item label="地图数据(geoJSON)">
|
||||
<el-input v-model="config.geoJson" size="mini" clearable placeholder="请输入geoJson的URL地址"/>
|
||||
</config-item>
|
||||
</template>
|
||||
<template v-if="/linkageMap/.test(config.type)">
|
||||
<config-item v-for="(item,i) in config.summaryConfigs" :key="i" :label="`统计${i+1}`">
|
||||
<ai-select placeholder="请选择位置" v-model="item.pos" :select-list="positionList" size="mini"/>
|
||||
<ai-select placeholder="请选择类型" v-model="item.display" :select-list="summaryOps" size="mini"/>
|
||||
</config-item>
|
||||
</template>
|
||||
<template v-if="/tabs/.test(config.type)">
|
||||
<group-item v-for="(tab,i) in config.tabs" :key="i" :label="tab.label">
|
||||
<config-item :label="comp.label" v-for="(comp,j) in tab.comps" :key="i+'_'+j">
|
||||
<chart-picker v-model="comp.type" :tpls="layers"/>
|
||||
</config-item>
|
||||
</group-item>
|
||||
</template>
|
||||
<template v-if="/Chart/.test(config.type)">
|
||||
<config-item label="图表模板">
|
||||
<chart-picker v-model="config.config" @input="v=>config.echartOps=$echartTpls[v]"/>
|
||||
</config-item>
|
||||
<config-item label="图表配置项" top-label>
|
||||
<json-editor v-model="config.echartOps"/>
|
||||
</config-item>
|
||||
</template>
|
||||
<config-item label="视频地址" v-if="config.type === 'video'">
|
||||
<el-input v-model="config.src" size="mini"/>
|
||||
</config-item>
|
||||
<config-item label="图片URL" v-if="config.type=='img'">
|
||||
<el-input v-model="config.src" size="mini" clearable placeholder="请输入图片URL"/>
|
||||
</config-item>
|
||||
<config-item label="视频类型" v-if="config.type === 'monitor'">
|
||||
<ai-select size="mini" v-model="config.monitorType" :select-list="monitorTypes"/>
|
||||
</config-item>
|
||||
<config-item label="样式" v-if="config.type === 'AiRanking'">
|
||||
<el-select size="mini" v-model="config.subType" placeholder="请选择样式" clearable>
|
||||
<el-option label="样式1" value="Ranking1"></el-option>
|
||||
<el-option label="样式2" value="Ranking2"></el-option>
|
||||
<el-option label="样式3" value="Ranking3"></el-option>
|
||||
</el-select>
|
||||
</config-item>
|
||||
<template v-if="config.type === 'table' || config.type === 'AiDvTable'">
|
||||
<config-item label="显示排名">
|
||||
<el-select size="mini" v-model="config.isShowIndex" placeholder="请选择" clearable>
|
||||
<el-option
|
||||
v-for="(item, index) in tableStatus"
|
||||
:key="index"
|
||||
:label="item.label"
|
||||
:value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</config-item>
|
||||
<config-item label="斑马纹" v-if="config.type === 'AiDvTable'">
|
||||
<el-select size="mini" v-model="config.stripe" placeholder="请选择" clearable>
|
||||
<el-option
|
||||
label="是"
|
||||
value="1">
|
||||
</el-option>
|
||||
<el-option
|
||||
label="否"
|
||||
value="0">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</config-item>
|
||||
<config-item label="简易样式" v-if="config.type === 'AiDvTable'">
|
||||
<el-select size="mini" v-model="config.simple" placeholder="请选择" clearable>
|
||||
<el-option
|
||||
label="是"
|
||||
value="1">
|
||||
</el-option>
|
||||
<el-option
|
||||
label="否"
|
||||
value="0">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</config-item>
|
||||
<config-item label="表格行数" v-if="config.type !== 'AiDvTable'">
|
||||
<el-input-number size="mini" style="width: 232px" :min="0" v-model="config.rowNum" controls-position="right"/>
|
||||
</config-item>
|
||||
<config-item v-if="config.type === 'AiDvTable'" v-for="(item, i) in config.config" :key="i" :label="`第${i+1}列`">
|
||||
<el-select size="mini" style="width: 80px;" v-model="item.align" placeholder="请选择" clearable>
|
||||
<el-option label="居中" value="center"></el-option>
|
||||
<el-option label="居左" value="left"></el-option>
|
||||
<el-option label="居右" value="right"></el-option>
|
||||
</el-select>
|
||||
<el-color-picker v-model="item.color" class="mar-h10" size="mini"/>
|
||||
<el-input-number v-model="item.width" label="描述文字" controls-position="right" size="mini"/>
|
||||
</config-item>
|
||||
</template>
|
||||
<template v-if="config.type === 'map'">
|
||||
<div class="layout-config__item">
|
||||
<label>遮罩层</label>
|
||||
<div class="layout-config__item--right">
|
||||
<el-select size="mini" v-model="config.mask" placeholder="请选择" clearable>
|
||||
<el-option label="是" value="1"></el-option>
|
||||
<el-option label="否" value="2"></el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layout-config__item">
|
||||
<label>地图图层</label>
|
||||
<div class="layout-config__item--right">
|
||||
<el-select size="mini" v-model="config.layers" placeholder="请选择" clearable>
|
||||
<el-option label="地图" value="vector"/>
|
||||
<el-option label="卫星" value="satellite"/>
|
||||
</el-select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layout-config__item">
|
||||
<label>选择地区</label>
|
||||
<div class="layout-config__item--right">
|
||||
<AiAreaGet :instance="instance" :valueLevel="3" v-model="config.areaId" placeholder="地图展示的中心"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layout-config__item">
|
||||
<label>限制地区</label>
|
||||
<div class="layout-config__item--right">
|
||||
<ai-select v-model="config.limitArea" :selectList="dict.getDict('yesOrNo')"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layout-config__item">
|
||||
<label>显示标签</label>
|
||||
<div class="layout-config__item--right">
|
||||
<ai-select v-model="config.alwaysShow" :selectList="dict.getDict('yesOrNo')"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layout-config__item">
|
||||
<label>展示光轨</label>
|
||||
<div class="layout-config__item--right">
|
||||
<ai-select v-model="config.pulseLines" :selectList="dict.getDict('yesOrNo')"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layout-config__item layout-config__item--input">
|
||||
<label>地图样式</label>
|
||||
<div class="layout-config__item--right">
|
||||
<el-input size="mini" v-model="config.mapStyle" clearable placeholder="请输入地图样式ID,从UI处获取.."/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layout-config__item layout-config__item--input">
|
||||
<label>3D地图</label>
|
||||
<div class="layout-config__item--right">
|
||||
<ai-select v-model="config.is3d" :selectList="dict.getDict('yesOrNo')"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layout-config__item layout-config__item--input" v-if="config.is3d==1">
|
||||
<label>3D环绕</label>
|
||||
<div class="layout-config__item--right">
|
||||
<ai-select v-model="config.is3dAround" :selectList="dict.getDict('yesOrNo')"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layout-config__item layout-config__item--input">
|
||||
<label>显示图例</label>
|
||||
<div class="layout-config__item--right">
|
||||
<ai-select v-model="config.showPingchangMapLegend" :selectList="dict.getDict('yesOrNo')"/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<config-item label="数据汇总" v-if="config.type === 'summary'">
|
||||
<ai-select size="mini" v-model="config.display" placeholder="请选择类型" :select-list="summaryOps"/>
|
||||
</config-item>
|
||||
<config-extra v-model="config"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layout-right__content--wrapper">
|
||||
@@ -220,44 +50,16 @@
|
||||
|
||||
<script>
|
||||
import ConfigItem from "./configItem";
|
||||
import AiDialogBtn from "dui/packages/layout/AiDialogBtn";
|
||||
import {layers, monitorTypes} from "../config";
|
||||
import JsonEditor from "./jsonEditor.vue";
|
||||
import ChartPicker from "./chartPicker.vue";
|
||||
import AiDvSummary from "@dui/dv/layout/AiDvSummary/AiDvSummary";
|
||||
import GroupItem from "./groupItem";
|
||||
import ConfigExtra from "./configExtra.vue";
|
||||
|
||||
export default {
|
||||
name: 'componentConfig',
|
||||
components: {GroupItem, ChartPicker, JsonEditor, AiDialogBtn, ConfigItem},
|
||||
components: {ConfigExtra, ConfigItem},
|
||||
props: {
|
||||
config: {default: () => ({})},
|
||||
instance: Function,
|
||||
dict: Object,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
borderList: ['border0', 'border1', 'border2', 'border3', 'border4', 'border5', 'border6', 'border7', 'border8', 'border9', 'border10',
|
||||
'border11', 'border12', 'border13', 'border14', 'border15'],//边框待选项
|
||||
//是否显示排名
|
||||
tableStatus: [
|
||||
{label: '是', value: '1'},
|
||||
{label: '否', value: '0'}
|
||||
],
|
||||
dialog: {},
|
||||
monitorTypes,
|
||||
positionList: [
|
||||
{label: "左上", id: "lt"},
|
||||
{label: "右上", id: "rt"},
|
||||
{label: "左下", id: "lb"},
|
||||
{label: "右下", id: "rb"}
|
||||
],
|
||||
layers
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
summaryOps: () => Object.keys(AiDvSummary.components).map(e => ({label: e, id: e})),
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
221
packages/bigscreen/designer/components/configExtra.vue
Normal file
221
packages/bigscreen/designer/components/configExtra.vue
Normal file
@@ -0,0 +1,221 @@
|
||||
<script>
|
||||
import GroupItem from "./groupItem";
|
||||
import ConfigItem from "./configItem";
|
||||
import ChartPicker from "./chartPicker";
|
||||
import JsonEditor from "./jsonEditor";
|
||||
import {layers, monitorTypes} from "../config";
|
||||
import AiDvSummary from "@dui/dv/layout/AiDvSummary/AiDvSummary";
|
||||
|
||||
export default {
|
||||
name: "configExtra",
|
||||
components: {JsonEditor, ChartPicker, ConfigItem, GroupItem},
|
||||
props: ['config'],
|
||||
model: {
|
||||
prop: 'config',
|
||||
event: 'input'
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
borderList: ['border0', 'border1', 'border2', 'border3', 'border4', 'border5', 'border6', 'border7', 'border8', 'border9', 'border10',
|
||||
'border11', 'border12', 'border13', 'border14', 'border15'],//边框待选项
|
||||
layers, monitorTypes,
|
||||
tableStatus: [
|
||||
{label: '是', value: '1'},
|
||||
{label: '否', value: '0'}
|
||||
],
|
||||
positionList: [
|
||||
{label: "左上", id: "lt"},
|
||||
{label: "右上", id: "rt"},
|
||||
{label: "左下", id: "lb"},
|
||||
{label: "右下", id: "rb"}
|
||||
],
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
summaryOps: () => Object.keys(AiDvSummary.components).map(e => ({label: e, id: e})),
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="configExtra">
|
||||
<config-item label="边框" v-if="config.type !== 'display'">
|
||||
<el-select size="mini" v-model="config.border" placeholder="请选择边框" clearable>
|
||||
<el-option
|
||||
v-for="(item, index) in borderList"
|
||||
:key="index"
|
||||
:label="item"
|
||||
:value="item">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</config-item>
|
||||
<template v-if="/(AiDvMap|linkageMap)/.test(config.type)">
|
||||
<config-item label="地图数据(geoJSON)">
|
||||
<el-input v-model="config.geoJson" size="mini" clearable placeholder="请输入geoJson的URL地址"/>
|
||||
</config-item>
|
||||
</template>
|
||||
<template v-if="/linkageMap/.test(config.type)">
|
||||
<config-item v-for="(item,i) in config.summaryConfigs" :key="i" :label="`统计${i+1}`">
|
||||
<ai-select placeholder="请选择位置" v-model="item.pos" :select-list="positionList" size="mini"/>
|
||||
<ai-select placeholder="请选择类型" v-model="item.display" :select-list="summaryOps" size="mini"/>
|
||||
</config-item>
|
||||
</template>
|
||||
<template v-if="/tabs/.test(config.type)">
|
||||
<group-item v-for="(tab,i) in config.tabs" :key="i" :label="tab.label">
|
||||
<template v-for="(comp,j) in tab.comps">
|
||||
<config-item :label="comp.label">
|
||||
<chart-picker v-model="comp.type" :tpls="layers"/>
|
||||
</config-item>
|
||||
<config-extra v-model="tab.comps[j]"/>
|
||||
</template>
|
||||
</group-item>
|
||||
</template>
|
||||
<template v-if="/Chart/.test(config.type)">
|
||||
<config-item label="图表模板">
|
||||
<chart-picker v-model="config.config" @input="v=>config.echartOps=$echartTpls[v]"/>
|
||||
</config-item>
|
||||
<config-item label="图表配置项" top-label>
|
||||
<json-editor v-model="config.echartOps"/>
|
||||
</config-item>
|
||||
</template>
|
||||
<config-item label="视频地址" v-if="config.type === 'video'">
|
||||
<el-input v-model="config.src" size="mini"/>
|
||||
</config-item>
|
||||
<config-item label="图片URL" v-if="config.type=='img'">
|
||||
<el-input v-model="config.src" size="mini" clearable placeholder="请输入图片URL"/>
|
||||
</config-item>
|
||||
<config-item label="视频类型" v-if="config.type === 'monitor'">
|
||||
<ai-select size="mini" v-model="config.monitorType" :select-list="monitorTypes"/>
|
||||
</config-item>
|
||||
<config-item label="样式" v-if="config.type === 'AiRanking'">
|
||||
<el-select size="mini" v-model="config.subType" placeholder="请选择样式" clearable>
|
||||
<el-option label="样式1" value="Ranking1"></el-option>
|
||||
<el-option label="样式2" value="Ranking2"></el-option>
|
||||
<el-option label="样式3" value="Ranking3"></el-option>
|
||||
</el-select>
|
||||
</config-item>
|
||||
<template v-if="config.type === 'table' || config.type === 'AiDvTable'">
|
||||
<config-item label="显示排名">
|
||||
<el-select size="mini" v-model="config.isShowIndex" placeholder="请选择" clearable>
|
||||
<el-option
|
||||
v-for="(item, index) in tableStatus"
|
||||
:key="index"
|
||||
:label="item.label"
|
||||
:value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</config-item>
|
||||
<config-item label="斑马纹" v-if="config.type === 'AiDvTable'">
|
||||
<el-select size="mini" v-model="config.stripe" placeholder="请选择" clearable>
|
||||
<el-option
|
||||
label="是"
|
||||
value="1">
|
||||
</el-option>
|
||||
<el-option
|
||||
label="否"
|
||||
value="0">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</config-item>
|
||||
<config-item label="简易样式" v-if="config.type === 'AiDvTable'">
|
||||
<el-select size="mini" v-model="config.simple" placeholder="请选择" clearable>
|
||||
<el-option
|
||||
label="是"
|
||||
value="1">
|
||||
</el-option>
|
||||
<el-option
|
||||
label="否"
|
||||
value="0">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</config-item>
|
||||
<config-item label="表格行数" v-if="config.type !== 'AiDvTable'">
|
||||
<el-input-number size="mini" style="width: 232px" :min="0" v-model="config.rowNum" controls-position="right"/>
|
||||
</config-item>
|
||||
<config-item v-if="config.type === 'AiDvTable'" v-for="(item, i) in config.config" :key="i" :label="`第${i+1}列`">
|
||||
<el-select size="mini" style="width: 80px;" v-model="item.align" placeholder="请选择" clearable>
|
||||
<el-option label="居中" value="center"></el-option>
|
||||
<el-option label="居左" value="left"></el-option>
|
||||
<el-option label="居右" value="right"></el-option>
|
||||
</el-select>
|
||||
<el-color-picker v-model="item.color" class="mar-h10" size="mini"/>
|
||||
<el-input-number v-model="item.width" label="描述文字" controls-position="right" size="mini"/>
|
||||
</config-item>
|
||||
</template>
|
||||
<template v-if="config.type === 'map'">
|
||||
<div class="layout-config__item">
|
||||
<label>遮罩层</label>
|
||||
<div class="layout-config__item--right">
|
||||
<el-select size="mini" v-model="config.mask" placeholder="请选择" clearable>
|
||||
<el-option label="是" value="1"></el-option>
|
||||
<el-option label="否" value="2"></el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layout-config__item">
|
||||
<label>地图图层</label>
|
||||
<div class="layout-config__item--right">
|
||||
<el-select size="mini" v-model="config.layers" placeholder="请选择" clearable>
|
||||
<el-option label="地图" value="vector"/>
|
||||
<el-option label="卫星" value="satellite"/>
|
||||
</el-select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layout-config__item">
|
||||
<label>选择地区</label>
|
||||
<div class="layout-config__item--right">
|
||||
<AiAreaGet :instance="instance" :valueLevel="3" v-model="config.areaId" placeholder="地图展示的中心"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layout-config__item">
|
||||
<label>限制地区</label>
|
||||
<div class="layout-config__item--right">
|
||||
<ai-select v-model="config.limitArea" :selectList="dict.getDict('yesOrNo')"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layout-config__item">
|
||||
<label>显示标签</label>
|
||||
<div class="layout-config__item--right">
|
||||
<ai-select v-model="config.alwaysShow" :selectList="dict.getDict('yesOrNo')"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layout-config__item">
|
||||
<label>展示光轨</label>
|
||||
<div class="layout-config__item--right">
|
||||
<ai-select v-model="config.pulseLines" :selectList="dict.getDict('yesOrNo')"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layout-config__item layout-config__item--input">
|
||||
<label>地图样式</label>
|
||||
<div class="layout-config__item--right">
|
||||
<el-input size="mini" v-model="config.mapStyle" clearable placeholder="请输入地图样式ID,从UI处获取.."/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layout-config__item layout-config__item--input">
|
||||
<label>3D地图</label>
|
||||
<div class="layout-config__item--right">
|
||||
<ai-select v-model="config.is3d" :selectList="dict.getDict('yesOrNo')"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layout-config__item layout-config__item--input" v-if="config.is3d==1">
|
||||
<label>3D环绕</label>
|
||||
<div class="layout-config__item--right">
|
||||
<ai-select v-model="config.is3dAround" :selectList="dict.getDict('yesOrNo')"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layout-config__item layout-config__item--input">
|
||||
<label>显示图例</label>
|
||||
<div class="layout-config__item--right">
|
||||
<ai-select v-model="config.showPingchangMapLegend" :selectList="dict.getDict('yesOrNo')"/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<config-item label="数据汇总" v-if="config.type === 'summary'">
|
||||
<ai-select size="mini" v-model="config.display" placeholder="请选择类型" :select-list="summaryOps"/>
|
||||
</config-item>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user