252 lines
9.9 KiB
Vue
252 lines
9.9 KiB
Vue
<template>
|
|
<section class="componentConfig">
|
|
<div class="layout-right__content--wrapper">
|
|
<div class="layout-config__group">
|
|
<h2>基础设置</h2>
|
|
<div class="layout-config__item">
|
|
<label>图表尺寸</label>
|
|
<div class="layout-config__item--right">
|
|
<el-input-number size="mini" :min="0" v-model="config.width" controls-position="right"/>
|
|
<el-input-number size="mini" :min="0" v-model="config.height" controls-position="right"/>
|
|
</div>
|
|
</div>
|
|
<div class="layout-config__item">
|
|
<label>图表位置</label>
|
|
<div class="layout-config__item--right">
|
|
<el-input-number size="mini" :min="0" v-model="config.left" controls-position="right"/>
|
|
<el-input-number size="mini" :min="0" v-model="config.top" controls-position="right"/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<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>
|
|
<div class="layout-config__item" v-if="config.type === 'monitor'">
|
|
<label>视频类型</label>
|
|
<div class="layout-config__item--right">
|
|
<el-select size="mini" v-model="config.monitorType" placeholder="请选择" clearable>
|
|
<el-option label="中国移动" value="cmcc"></el-option>
|
|
<el-option label="海康威视" value="hik"></el-option>
|
|
<el-option label="大华" value="dahua"></el-option>
|
|
<el-option label="视联网" value="slw"></el-option>
|
|
</el-select>
|
|
</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>
|
|
<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-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>
|
|
</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">
|
|
<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>
|
|
</template>
|
|
<div class="layout-config__item" v-if="config.type === 'summary'">
|
|
<label>数据汇总</label>
|
|
<div class="layout-config__item--right">
|
|
<el-select size="mini" v-model="config.display" placeholder="请选择类型" clearable>
|
|
<el-option
|
|
v-for="(item, index) in summaryList"
|
|
:key="index"
|
|
:label="item"
|
|
:value="item">
|
|
</el-option>
|
|
</el-select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'componentConfig',
|
|
|
|
props: {
|
|
config: {default: () => ({})},
|
|
instance: Function,
|
|
dict: Object,
|
|
},
|
|
|
|
data () {
|
|
return {
|
|
borderList: ['border0', 'border1', 'border2', 'border3', 'border4', 'border5', 'border6'],//边框待选项
|
|
summaryList: ['summary0', 'summary1', 'summary2', 'summary3', 'summary4', 'summary6', 'summary5',
|
|
'summary7', 'summary8', 'summary9', 'summary10', 'summary11', 'summary12', 'summary13', 'summary14', 'summary15'],//汇总待选项
|
|
//是否显示排名
|
|
tableStatus: [
|
|
{label: '是', value: '1'},
|
|
{label: '否', value: '0'}
|
|
]
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.componentConfig {
|
|
.table-config {
|
|
& > div {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
width: 232px;
|
|
|
|
:deep( .el-select ) {
|
|
width: 80px
|
|
input {
|
|
width: 80px;
|
|
}
|
|
}
|
|
|
|
.el-select {
|
|
width: 100%;
|
|
|
|
.el-input {
|
|
width: 100%;
|
|
|
|
:deep( input ) {
|
|
width: 80px
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|