给echart提供个性化的地方
This commit is contained in:
aixianling
@@ -25,114 +25,86 @@
|
||||
<div class="layout-right__content--wrapper">
|
||||
<div class="layout-config__group">
|
||||
<h2>组件设置</h2>
|
||||
<div class="layout-config__item layout-config__item--input">
|
||||
<label>标题</label>
|
||||
<div class="layout-config__item--right">
|
||||
<el-input v-model="config.title" size="mini"></el-input>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layout-config__item layout-config__item--input" v-if="config.display === 'summary2'">
|
||||
<label>标题</label>
|
||||
<div class="layout-config__item--right">
|
||||
<el-input v-model="config.summaryTitle" size="mini"></el-input>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layout-config__item" v-if="config.type !== 'display'">
|
||||
<label>边框</label>
|
||||
<div class="layout-config__item--right">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layout-config__item layout-config__item--input" v-if="config.type === 'video'">
|
||||
<label>视频地址</label>
|
||||
<div class="layout-config__item--right">
|
||||
<el-input v-model="config.src" size="mini"></el-input>
|
||||
</div>
|
||||
</div>
|
||||
<config-item label="标题">
|
||||
<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>
|
||||
<config-item label="echart选项" v-if="/Chart/.test(config.type)" top-label>
|
||||
<json-editor v-model="config.echartOps"/>
|
||||
</config-item>
|
||||
<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>
|
||||
<div class="layout-config__item" v-if="config.type === 'monitor'">
|
||||
<label>视频类型</label>
|
||||
<div class="layout-config__item--right">
|
||||
<ai-select size="mini" v-model="config.monitorType" :select-list="monitorTypes"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layout-config__item" v-if="config.type === 'AiRanking'">
|
||||
<label>样式</label>
|
||||
<div class="layout-config__item--right">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
<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'">
|
||||
<div class="layout-config__item">
|
||||
<label>显示排名</label>
|
||||
<div class="layout-config__item--right">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layout-config__item" v-if="config.type === 'AiDvTable'">
|
||||
<label>斑马纹</label>
|
||||
<div class="layout-config__item--right">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layout-config__item" v-if="config.type === 'AiDvTable'">
|
||||
<label>简易样式</label>
|
||||
<div class="layout-config__item--right">
|
||||
<el-select size="mini" v-model="config.simple" placeholder="请选择" clearable>
|
||||
<el-option label="是" value="1"/>
|
||||
<el-option label="否" value="0"/>
|
||||
</el-select>
|
||||
</div>
|
||||
</div>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
<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>
|
||||
<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" style="margin: 0 10px;"></el-color-picker>
|
||||
<el-input-number v-model="item.width" label="描述文字" controls-position="right"></el-input-number>
|
||||
</div>
|
||||
</div>
|
||||
<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" :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">
|
||||
@@ -235,10 +207,11 @@ import ConfigItem from "./configItem.vue";
|
||||
import AiDialogBtn from "dui/packages/layout/AiDialogBtn.vue";
|
||||
import {monitorTypes} from "../config";
|
||||
import AiDvSummary from "../../../../components/layout/AiDvSummary/AiDvSummary.vue";
|
||||
import JsonEditor from "./jsonEditor.vue";
|
||||
|
||||
export default {
|
||||
name: 'componentConfig',
|
||||
components: {AiDvSummary, AiDialogBtn, ConfigItem},
|
||||
components: {JsonEditor, AiDvSummary, AiDialogBtn, ConfigItem},
|
||||
props: {
|
||||
config: {default: () => ({})},
|
||||
instance: Function,
|
||||
|
||||
Reference in New Issue
Block a user