整合大屏编辑页面

This commit is contained in:
LeonardYoung
2021-10-29 11:42:58 +08:00
parent b2f457f53c
commit a39ec38406
406 changed files with 34412 additions and 57 deletions

View File

@ -0,0 +1,34 @@
<!-- 柱状图配置 -->
<template>
<div>
<el-form-item label="竖展示">
<avue-switch type="textarea"
v-model="main.activeOption.category"></avue-switch>
</el-form-item>
<el-collapse accordion>
<el-collapse-item title="柱体设置">
<el-form-item label="最大宽度">
<avue-slider v-model="main.activeOption.barWidth">
</avue-slider>
</el-form-item>
<el-form-item label="圆角">
<avue-slider v-model="main.activeOption.barRadius">
</avue-slider>
</el-form-item>
<el-form-item label="最小高度">
<avue-slider v-model="main.activeOption.barMinHeight">
</avue-slider>
</el-form-item>
</el-collapse-item>
</el-collapse>
</div>
</template>
<script>
export default {
inject: ["main"]
}
</script>
<style>
</style>

View File

@ -0,0 +1,217 @@
<!-- 通用配置-->
<template>
<div>
<!-- 折叠公共配置 -->
<el-collapse accordion>
<!-- 标题设置 -->
<template v-if="main.vaildProp('titleList')">
<el-collapse-item title="标题设置">
<el-form-item label="标题">
<avue-switch v-model="main.activeOption.titleShow"></avue-switch>
</el-form-item>
<el-form-item label="标题">
<avue-input v-model="main.activeOption.title"></avue-input>
</el-form-item>
<el-form-item label="字体颜色">
<avue-color v-model="main.activeOption.titleColor"></avue-color>
</el-form-item>
<el-form-item label="字体大小">
<avue-input-number v-model="main.activeOption.titleFontSize"></avue-input-number>
</el-form-item>
<el-form-item label="字体位置">
<avue-select v-model="main.activeOption.titlePostion"
:dic="dicOption.textAlign">
</avue-select>
</el-form-item>
<el-form-item label="副标题">
<avue-input v-model="main.activeOption.subtext"></avue-input>
</el-form-item>
<el-form-item label="字体颜色">
<avue-color v-model="main.activeOption.subTitleColor"></avue-color>
</el-form-item>
<el-form-item label="字体大小">
<avue-input-number v-model="main.activeOption.subTitleFontSize">
</avue-input-number>
</el-form-item>
</el-collapse-item>
</template>
<!-- 轴设置 -->
<template v-if="main.vaildProp('barList')">
<el-collapse-item title="X轴设置">
<el-form-item label="名称">
<avue-input v-model="main.activeOption.xAxisName">
</avue-input>
</el-form-item>
<el-form-item label="显示">
<avue-switch v-model="main.activeOption.xAxisShow">
</avue-switch>
</el-form-item>
<el-form-item label="显示网格线">
<avue-switch v-model="main.activeOption.xAxisSplitLineShow">
</avue-switch>
</el-form-item>
<el-form-item label="标签间距">
<avue-switch v-model="main.activeOption.xAxisinterval">
</avue-switch>
</el-form-item>
<el-form-item label="文字角度">
<avue-switch v-model="main.activeOption.xAxisRotate">
</avue-switch>
</el-form-item>
<el-form-item label="轴反转">
<avue-switch v-model="main.activeOption.xAxisInverse">
</avue-switch>
</el-form-item>
<el-form-item label="字号">
<avue-input-number v-model="main.activeOption.xNameFontSize">
</avue-input-number>
</el-form-item>
</el-collapse-item>
<el-collapse-item title="Y轴设置">
<el-form-item label="名称">
<avue-input v-model="main.activeOption.yAxisName">
</avue-input>
</el-form-item>
<el-form-item label="显示">
<avue-switch v-model="main.activeOption.yAxisShow">
</avue-switch>
</el-form-item>
<el-form-item label="轴网格线">
<avue-switch v-model="main.activeOption.yAxisSplitLineShow">
</avue-switch>
</el-form-item>
<el-form-item label="反转">
<avue-switch v-model="main.activeOption.yAxisInverse">
</avue-switch>
</el-form-item>
<el-form-item label="字号">
<avue-input-number v-model="main.activeOption.yNameFontSize">
</avue-input-number>
</el-form-item>
</el-collapse-item>
</template>
<!-- 数值设置 -->
<template v-if="main.vaildProp('labelList')">
<el-collapse-item title="数值设置">
<el-form-item label="显示">
<avue-switch v-model="main.activeOption.labelShow">
</avue-switch>
</el-form-item>
<el-form-item label="字体大小">
<avue-input-number v-model="main.activeOption.labelShowFontSize">
</avue-input-number>
</el-form-item>
<el-form-item label="字体颜色">
<avue-color v-model="main.activeOption.labelShowColor">
</avue-color>
</el-form-item>
<el-form-item label="字体粗细">
<avue-select v-model="main.activeOption.labelShowFontWeight"
:dic="dicOption.fontWeight">
</avue-select>
</el-form-item>
</el-collapse-item>
</template>
<!-- 提示语设置 -->
<template v-if="main.vaildProp('tipList')">
<el-collapse-item title="提示语设置">
<el-form-item label="字体大小">
<avue-input-number v-model="main.activeOption.tipFontSize"></avue-input-number>
</el-form-item>
<el-form-item label="字体颜色">
<avue-color v-model="main.activeOption.tipColor"></avue-color>
</el-form-item>
</el-collapse-item>
</template>
<!-- 轴距离设置 -->
<template v-if="main.vaildProp('postionList')">
<el-collapse-item title="坐标轴边距设置">
<el-form-item label="左边距(像素)">
<avue-slider v-model="main.activeOption.gridX"
:max="400"></avue-slider>
</el-form-item>
<el-form-item label="顶边距(像素)">
<avue-slider v-model="main.activeOption.gridY"
:max="400"></avue-slider>
</el-form-item>
<el-form-item label="右边距(像素)">
<avue-slider v-model="main.activeOption.gridX2"
:max="400"></avue-slider>
</el-form-item>
<el-form-item label="底边距(像素)">
<avue-slider v-model="main.activeOption.gridY2"
:max="400"></avue-slider>
</el-form-item>
</el-collapse-item>
</template>
<!-- 图例设置 -->
<template v-if="main.vaildProp('legendList')">
<el-collapse-item title="图例操作">
<el-form-item label="图例">
<avue-switch v-model="main.activeOption.legend"></avue-switch>
</el-form-item>
<el-form-item label="位置">
<avue-select v-model="main.activeOption.legendPostion"
:dic="dicOption.textAlign">
</avue-select>
</el-form-item>
<el-form-item label="布局朝向">
<avue-select v-model="main.activeOption.legendOrient"
:dic="dicOption.orientList">
</avue-select>
</el-form-item>
<el-form-item label="字体大小">
<avue-input-number v-model="main.activeOption.legendFontSize">
</avue-input-number>
</el-form-item>
</el-collapse-item>
</template>
<!-- 颜色设置 -->
<template v-if="main.vaildProp('colorList')">
<el-collapse-item title="自定义配色">
<el-form-item label="文字颜色">
<avue-color v-model="main.activeOption.nameColor">
</avue-color>
</el-form-item>
<el-form-item label="轴线颜色">
<avue-color v-model="main.activeOption.lineColor"></avue-color>
</el-form-item>
<avue-crud :option="colorOption"
:data="main.activeOption.barColor"
@row-save="rowSave"
@row-del="rowDel"
@row-update="rowUpdate"></avue-crud>
</el-collapse-item>
</template>
</el-collapse>
</div>
</template>
<script>
import { dicOption, colorOption } from '@/option/config'
export default {
inject: ["main"],
data () {
return {
dicOption: dicOption,
colorOption: colorOption
}
},
methods: {
rowSave (row, done) {
this.main.activeOption.barColor.push(row);
done()
},
rowDel (row, index) {
this.main.activeOption.barColor.splice(index, 1);
},
rowUpdate (row, index, done) {
this.main.activeOption.barColor.splice(index, 1, row);
done()
},
}
}
</script>
<style>
</style>

View File

@ -0,0 +1,53 @@
<!-- 实时时间配置 -->
<template>
<div>
<el-form-item label="时间格式">
<avue-select v-model="main.activeOption.format"
:dic="dicOption.format">
</avue-select>
</el-form-item>
<el-form-item label="自定义格式">
<avue-input v-model="main.activeOption.format">
</avue-input>
</el-form-item>
<el-form-item label="字体间距">
<avue-input-number v-model="main.activeOption.split"
:max="200"></avue-input-number>
</el-form-item>
<el-form-item label="字体大小">
<avue-input-number v-model="main.activeOption.fontSize"
:max="200"></avue-input-number>
</el-form-item>
<el-form-item label="字体背景">
<avue-color v-model="main.activeOption.backgroundColor"></avue-color>
</el-form-item>
<el-form-item label="对其方式">
<avue-select v-model="main.activeOption.textAlign"
:dic="dicOption.textAlign">
</avue-select>
</el-form-item>
<el-form-item label="文字粗细">
<avue-select v-model="main.activeOption.fontWeight"
:dic="dicOption.fontWeight">
</avue-select>
</el-form-item>
<el-form-item label="字体颜色">
<avue-color v-model="main.activeOption.color"></avue-color>
</el-form-item>
</div>
</template>
<script>
import { dicOption } from '@/option/config'
export default {
data () {
return {
dicOption: dicOption
}
},
inject: ["main"]
}
</script>
<style>
</style>

View File

@ -0,0 +1,169 @@
<!-- 翻牌器配置 -->
<template>
<div>
<el-form-item label="整体">
<avue-switch v-model="main.activeOption.whole">
</avue-switch>
</el-form-item>
<el-form-item label="精度">
<avue-input-number v-model="main.activeOption.decimals">
</avue-input-number>
</el-form-item>
<el-form-item label="行数">
<avue-input-number v-model="main.activeOption.span">
</avue-input-number>
</el-form-item>
<el-collapse accordion>
<el-collapse-item title="边框设置">
<el-form-item label="X间距">
<avue-slider v-model="main.activeOption.splitx"></avue-slider>
</el-form-item>
<el-form-item label="Y间距">
<avue-slider v-model="main.activeOption.splity"></avue-slider>
</el-form-item>
<el-form-item label="边框宽度">
<avue-input-number v-model="main.activeOption.width"
:max="1000"></avue-input-number>
</el-form-item>
<el-form-item label="边框高度">
<avue-input-number v-model="main.activeOption.height"
:max="1000"></avue-input-number>
</el-form-item>
<el-form-item label="边框">
<avue-radio v-model="main.activeOption.type"
:dic="dicOption.border">
</avue-radio>
</el-form-item>
<template v-if="main.activeOption.type==='border'">
<el-form-item label="边框颜色">
<avue-color v-model="main.activeOption.borderColor"></avue-color>
</el-form-item>
<el-form-item label="边框宽度">
<avue-input-number v-model="main.activeOption.borderWidth"
:max="10">
</avue-input-number>
</el-form-item>
</template>
<template v-if="main.activeOption.type==='img'">
<el-form-item label="图片地址">
<img v-if="main.activeOption.backgroundBorder"
:src="main.activeOption.backgroundBorder"
alt=""
width="100%" />
<el-input v-model="main.activeOption.backgroundBorder">
<div @click="main.handleOpenImg('activeOption.backgroundBorder','border')"
slot="append">
<i class="iconfont icon-img"></i>
</div>
</el-input>
</el-form-item>
</template>
<el-form-item label="背景颜色">
<avue-color v-model="main.activeOption.backgroundColor"></avue-color>
</el-form-item>
<el-form-item label="背景图片">
<img v-if="main.activeOption.backgroundImage"
:src="main.activeOption.backgroundImage"
alt=""
width="100%" />
<el-input v-model="main.activeOption.backgroundImage">
<div @click="main.handleOpenImg('activeOption.backgroundImage','')"
slot="append">
<i class="iconfont icon-img"></i>
</div>
</el-input>
</el-form-item>
</el-collapse-item>
<el-collapse-item title="内部设置">
<el-form-item label="字体大小">
<avue-input-number v-model="main.activeOption.fontSize"
:max="200"></avue-input-number>
</el-form-item>
<el-form-item label="字体颜色">
<avue-color v-model="main.activeOption.color"></avue-color>
</el-form-item>
<el-form-item label="文字粗细">
<avue-select v-model="main.activeOption.fontWeight"
:dic="dicOption.fontWeight">
</avue-select>
</el-form-item>
<el-form-item label="对其方式">
<avue-select v-model="main.activeOption.textAlign"
:dic="dicOption.textAlign">
</avue-select>
</el-form-item>
</el-collapse-item>
<el-collapse-item title="前缀设置">
<template v-if="!main.activeOption.whole">
<el-form-item label="前缀内容">
<avue-input v-model="main.activeOption.prefixText"></avue-input>
</el-form-item>
</template>
<template v-if="!main.activeOption.row">
<el-form-item label="对其方式">
<avue-select v-model="main.activeOption.prefixTextAlign"
:dic="dicOption.textAlign">
</avue-select>
</el-form-item>
</template>
<el-form-item label="X间距">
<avue-slider v-model="main.activeOption.prefixSplitx"></avue-slider>
</el-form-item>
<el-form-item label="Y间距">
<avue-slider v-model="main.activeOption.prefixSplity"></avue-slider>
</el-form-item>
<el-form-item label="颜色">
<avue-color v-model="main.activeOption.prefixColor"></avue-color>
</el-form-item>
<el-form-item label="字体大小">
<avue-input-number v-model="main.activeOption.prefixFontSize"
:max="200">
</avue-input-number>
</el-form-item>
</el-collapse-item>
<el-collapse-item title="后缀设置">
<template v-if="!main.activeOption.whole">
<el-form-item label="后缀内容">
<avue-input v-model="main.activeOption.suffixText"></avue-input>
</el-form-item>
</template>
<template v-if="!main.activeOption.row">
<el-form-item label="对其方式">
<avue-select v-model="main.activeOption.suffixTextAlign"
:dic="dicOption.textAlign">
</avue-select>
</el-form-item>
</template>
<el-form-item label="X间距">
<avue-slider v-model="main.activeOption.suffixSplitx"></avue-slider>
</el-form-item>
<el-form-item label="Y间距">
<avue-slider v-model="main.activeOption.suffixSplity"></avue-slider>
</el-form-item>
<el-form-item label="颜色">
<avue-color v-model="main.activeOption.suffixColor"></avue-color>
</el-form-item>
<el-form-item label="字体大小">
<avue-input-number v-model="main.activeOption.suffixFontSize"
:max="200">
</avue-input-number>
</el-form-item>
</el-collapse-item>
</el-collapse>
</div>
</template>
<script>
import { dicOption } from '@/option/config'
export default {
data () {
return {
dicOption: dicOption
}
},
inject: ["main"]
}
</script>
<style>
</style>

View File

@ -0,0 +1,15 @@
<!-- 漏斗图配置 -->
<template>
<div>
</div>
</template>
<script>
export default {
inject: ["main"]
}
</script>
<style>
</style>

View File

@ -0,0 +1,29 @@
<!-- 刻度盘配置 -->
<template>
<div>
<el-form-item label="刻度线粗度(像素)">
<avue-input-number v-model="main.activeOption.lineSize"></avue-input-number>
</el-form-item>
<el-form-item label="显示刻度值">
<avue-switch v-model="main.activeOption.axisLabelShow"></avue-switch>
</el-form-item>
<el-form-item label="刻度字号">
<avue-input-number v-model="main.activeOption.axisLabelFontSize"></avue-input-number>
</el-form-item>
<el-form-item label="指标名称字号">
<avue-input-number v-model="main.activeOption.nameFontSize"></avue-input-number>
</el-form-item>
<el-form-item label="指标字号">
<avue-input-number v-model="main.activeOption.valueFontSize"></avue-input-number>
</el-form-item>
</div>
</template>
<script>
export default {
inject: ["main"]
}
</script>
<style>
</style>

View File

@ -0,0 +1,17 @@
<!-- iframe配置 -->
<template>
<div>
<el-form-item label="地址">
<avue-input v-model="main.activeObj.data.value"></avue-input>
</el-form-item>
</div>
</template>
<script>
export default {
inject: ["main"]
}
</script>
<style>
</style>

View File

@ -0,0 +1,64 @@
<!-- 图片配置 -->
<template>
<div>
<el-form-item label="开启旋转">
<avue-switch v-model="main.activeOption.rotate"></avue-switch>
</el-form-item>
<el-form-item label="透明度">
<el-slider v-model="main.activeOption.opacity"
:max="1"
:step="0.1"></el-slider>
</el-form-item>
<template v-if="main.activeOption.rotate">
<el-form-item label="旋转时间">
<avue-input-number v-model="main.activeOption.duration"></avue-input-number>
</el-form-item>
</template>
<el-form-item label="图片地址">
<img v-if="main.activeObj.data.value"
:src="main.activeObj.data.value"
alt=""
width="100%" />
<el-input v-model="main.activeObj.data.value">
<div @click="main.handleOpenImg('activeObj.data.value')"
slot="append">
<i class="iconfont icon-img"></i>
</div>
</el-input>
</el-form-item>
<el-form-item label="开启旋转">
<avue-switch v-model="main.activeOption.rotate"></avue-switch>
</el-form-item>
<el-form-item label="透明度">
<el-slider v-model="main.activeOption.opacity"
:max="1"
:step="0.1"></el-slider>
</el-form-item>
<template v-if="main.activeOption.rotate">
<el-form-item label="旋转时间">
<avue-input-number v-model="main.activeOption.duration"></avue-input-number>
</el-form-item>
</template>
<el-form-item label="图片地址">
<img v-if="main.activeObj.data.value"
:src="main.activeObj.data.value"
alt=""
width="100%" />
<el-input v-model="main.activeObj.data.value">
<div @click="main.handleOpenImg('activeObj.data.value')"
slot="append">
<i class="iconfont icon-img"></i>
</div>
</el-input>
</el-form-item>
</div>
</template>
<script>
export default {
inject: ["main"]
}
</script>
<style>
</style>

View File

@ -0,0 +1,32 @@
<!-- 图片框配置 -->
<template>
<div>
<el-form-item label="背景色">
<avue-color v-model="main.activeOption.backgroundColor"></avue-color>
</el-form-item>
<el-form-item label="图片透明度">
<avue-slider v-model="main.activeOption.opacity"></avue-slider>
</el-form-item>
<el-form-item label="图片地址">
<img v-if="main.activeObj.data"
:src="main.activeObj.data"
alt=""
width="100%" />
<el-input v-model="main.activeObj.data">
<div @click="main.handleOpenImg('activeObj.data','border')"
slot="append">
<i class="iconfont icon-img"></i>
</div>
</el-input>
</el-form-item>
</div>
</template>
<script>
export default {
inject: ["main"]
}
</script>
<style>
</style>

View File

@ -0,0 +1,33 @@
<!--折线图配置 -->
<template>
<div>
<el-form-item label="竖展示">
<avue-switch type="textarea"
v-model="main.activeOption.category"></avue-switch>
</el-form-item>
<el-collapse accordion>
<el-collapse-item title="折线设置">
<el-form-item label="面积堆积">
<avue-switch v-model="main.activeOption.areaStyle"></avue-switch>
</el-form-item>
<el-form-item label="线条宽度">
<avue-slider v-model="main.activeOption.lineWidth">
</avue-slider>
</el-form-item>
<el-form-item label="点的大小">
<avue-slider v-model="main.activeOption.symbolSize">
</avue-slider>
</el-form-item>
</el-collapse-item>
</el-collapse>
</div>
</template>
<script>
export default {
inject: ["main"]
}
</script>
<style>
</style>

View File

@ -0,0 +1,65 @@
<!-- 地图配置 -->
<template>
<div>
<el-form-item label="开启轮播">
<avue-switch v-model="main.activeOption.banner"></avue-switch>
</el-form-item>
<template v-if="main.activeOption.banner">
<el-form-item label="轮播时间">
<avue-input v-model="main.activeOption.bannerTime"></avue-input>
</el-form-item>
</template>
<template v-if="main.activeOption.type===0">
<el-form-item label="地图选择">
<avue-select :dic="main.DIC.MAP"
v-model="main.activeOption.mapData"
placeholder="请选择地图"></avue-select>
</el-form-item>
<el-form-item label="地图比例">
<avue-slider v-model="main.activeOption.zoom"
:max="5"
:step="0.1"></avue-slider>
</el-form-item>
<el-form-item label="字体大小">
<avue-input-number v-model="main.activeOption.fontSize"></avue-input-number>
</el-form-item>
<el-form-item label="字体高亮颜色">
<avue-color v-model="main.activeOption.empColor"></avue-color>
</el-form-item>
<el-form-item label="字体颜色">
<avue-color v-model="main.activeOption.color"></avue-color>
</el-form-item>
<el-form-item label="区域线">
<avue-input-number v-model="main.activeOption.borderWidth"></avue-input-number>
</el-form-item>
<el-form-item label="区域颜色">
<avue-color v-model="main.activeOption.areaColor"></avue-color>
</el-form-item>
<el-form-item label="区域高亮颜色">
<avue-color v-model="main.activeOption.empAreaColor"></avue-color>
</el-form-item>
<el-form-item label="边框颜色">
<avue-color v-model="main.activeOption.borderColor"></avue-color>
</el-form-item>
</template>
<template v-if="main.activeOption.type===1">
<el-form-item label="图片地址">
<avue-input v-model="main.activeOption.img"></avue-input>
</el-form-item>
<el-form-item label="地图比例">
<avue-slider v-model="main.activeOption.scale"
:max="300"></avue-slider>
</el-form-item>
</template>
</div>
</template>
<script>
export default {
inject: ["main"]
}
</script>
<style>
</style>

View File

@ -0,0 +1,60 @@
<!-- 象形图配置 -->
<template>
<div>
<el-form-item label="图标">
<img v-if="main.activeOption.symbol"
:src="main.activeOption.symbol"
alt=""
width="100%" />
<el-input v-model="main.activeOption.symbol">
<div @click="main.handleOpenImg('activeOption.symbol')"
slot="append">
<i class="iconfont icon-img"></i>
</div>
</el-input>
</el-form-item>
<el-form-item label="图标字号">
<avue-input-number v-model="main.activeOption.symbolSize"></avue-input-number>
</el-form-item>
<el-form-item label="字体颜色">
<avue-color v-model="main.activeOption.color"></avue-color>
</el-form-item>
<el-form-item label="轴字体颜色">
<avue-color v-model="main.activeOption.nameColor"></avue-color>
</el-form-item>
<el-form-item label="间距">
<avue-slider v-model="main.activeOption.split"></avue-slider>
</el-form-item>
<el-collapse accordion>
<el-collapse-item title="X轴设置">
<el-form-item label="显示">
<avue-switch v-model="main.activeOption.xAxisShow">
</avue-switch>
</el-form-item>
<el-form-item label="字号">
<avue-input-number v-model="main.activeOption.xNameFontSize">
</avue-input-number>
</el-form-item>
</el-collapse-item>
<el-collapse-item title="Y轴设置">
<el-form-item label="显示">
<avue-switch v-model="main.activeOption.yAxisShow">
</avue-switch>
</el-form-item>
<el-form-item label="字号">
<avue-input-number v-model="main.activeOption.yNameFontSize">
</avue-input-number>
</el-form-item>
</el-collapse-item>
</el-collapse>
</div>
</template>
<script>
export default {
inject: ["main"]
}
</script>
<style>
</style>

View File

@ -0,0 +1,33 @@
<!-- 饼图的配置 -->
<template>
<div>
<el-form-item label="字体大小">
<avue-input-number v-model="main.activeOption.fontSize"></avue-input-number>
</el-form-item>
<el-collapse accordion>
<el-collapse-item title="饼图设置">
<el-form-item label="设置为环形">
<avue-switch v-model="main.activeOption.radius"></avue-switch>
</el-form-item>
<el-form-item label="南丁格尔玫瑰">
<avue-switch v-model="main.activeOption.roseType"></avue-switch>
</el-form-item>
<el-form-item label="自动排序">
<avue-switch v-model="main.activeOption.sort"></avue-switch>
</el-form-item>
<el-form-item label="不展示零">
<avue-switch v-model="main.activeOption.notCount"></avue-switch>
</el-form-item>
</el-collapse-item>
</el-collapse>
</div>
</template>
<script>
export default {
inject: ["main"]
}
</script>
<style>
</style>

View File

@ -0,0 +1,60 @@
<!-- 进度条配置 -->
<template>
<div>
<el-form-item label="类型">
<avue-radio v-model="main.activeOption.type"
:dic="dicOption.line">
</avue-radio>
</el-form-item>
<el-form-item label="间距">
<avue-input-number v-model="main.activeOption.split"
:max="200"></avue-input-number>
</el-form-item>
<el-form-item label="边框颜色">
<avue-color v-model="main.activeOption.borderColor"></avue-color>
</el-form-item>
<el-form-item label="边框大小">
<avue-input-number v-model="main.activeOption.strokeWidth"
:max="50"></avue-input-number>
</el-form-item>
<el-form-item label="字体大小">
<avue-input-number v-model="main.activeOption.fontSize"
:max="200"></avue-input-number>
</el-form-item>
<el-form-item label="字体颜色">
<avue-color v-model="main.activeOption.color"></avue-color>
</el-form-item>
<el-form-item label="文字粗细">
<avue-select v-model="main.activeOption.FontWeight"
:dic="dicOption.fontWeight">
</avue-select>
</el-form-item>
<el-form-item label="前缀字体大小">
<avue-input-number v-model="main.activeOption.suffixFontSize"
:max="200"></avue-input-number>
</el-form-item>
<el-form-item label="前缀字体颜色">
<avue-color v-model="main.activeOption.suffixColor"></avue-color>
</el-form-item>
<el-form-item label="前缀文字粗细">
<avue-select v-model="main.activeOption.suffixFontWeight"
:dic="dicOption.fontWeight">
</avue-select>
</el-form-item>
</div>
</template>
<script>
import { dicOption } from '@/option/config'
export default {
data () {
return {
dicOption: dicOption
}
},
inject: ["main"]
}
</script>
<style>
</style>

View File

@ -0,0 +1,30 @@
<!-- 雷达图配置 -->
<template>
<div>
<el-form-item label="字体大小">
<avue-input-number v-model="main.activeOption.radarNameSize"
:max="200">
</avue-input-number>
</el-form-item>
<el-form-item label="字体颜色">
<avue-color v-model="main.activeOption.radarNameColor"
:max="200">
</avue-color>
</el-form-item>
<el-form-item label="区域透明度">
<avue-slider v-model="main.activeOption.areaOpacity"
:max="1"
:step="0.1">
</avue-slider>
</el-form-item>
</div>
</template>
<script>
export default {
inject: ["main"]
}
</script>
<style>
</style>

View File

@ -0,0 +1,17 @@
<!-- 散点图配置 -->
<template>
<div>
<el-form-item label="字体大小">
<avue-input-number v-model="main.activeOption.fontSize"></avue-input-number>
</el-form-item>
</div>
</template>
<script>
export default {
inject: ["main"]
}
</script>
<style>
</style>

View File

@ -0,0 +1,35 @@
<!-- 轮播配置 -->
<template>
<div>
<el-form-item label="类型">
<avue-radio v-model="main.activeOption.type"
:dic="dicOption.swiperType"></avue-radio>
</el-form-item>
<el-form-item label="轮播时间">
<avue-input v-model="main.activeOption.interval"></avue-input>
</el-form-item>
<el-form-item label="选择器">
<avue-radio v-model="main.activeOption.indicator"
:dic="dicOption.swiperIndicator">
</avue-radio>
</el-form-item>
<el-form-item label="图片透明度">
<avue-slider v-model="main.activeOption.opacity"></avue-slider>
</el-form-item>
</div>
</template>
<script>
import { dicOption } from '@/option/config'
export default {
data () {
return {
dicOption: dicOption
}
},
inject: ["main"]
}
</script>
<style>
</style>

View File

@ -0,0 +1,110 @@
<!-- 表格配置 -->
<template>
<div>
<el-form-item label="表头颜色">
<avue-color type="textarea"
v-model="main.activeOption.headerColor"></avue-color>
</el-form-item>
<el-form-item label="表头背景">
<avue-color type="textarea"
v-model="main.activeOption.headerBackgroud"></avue-color>
</el-form-item>
<el-form-item label="字体位置">
<avue-select v-model="main.activeOption.headerTextAlign"
:dic="dicOption.textAlign">
</avue-select>
</el-form-item>
<el-form-item label="字体大小">
<avue-input-number v-model="main.activeOption.fontSize">
</avue-input-number>
</el-form-item>
<el-form-item label="显示行数">
<avue-input-number v-model="main.activeOption.count">
</avue-input-number>
</el-form-item>
<el-form-item label="开启滚动">
<avue-switch v-model="main.activeOption.scroll">
</avue-switch>
</el-form-item>
<el-form-item label="开启显隐">
<avue-switch v-model="main.activeOption.columnShow">
</avue-switch>
</el-form-item>
<template v-if="main.activeOption.scroll">
<el-form-item label="滚动时间">
<avue-input-number v-model="main.activeOption.scrollTime">
</avue-input-number>
</el-form-item>
<el-form-item label="滚动行数">
<avue-input-number v-model="main.activeOption.scrollCount">
</avue-input-number>
</el-form-item>
</template>
<el-form-item label="线条">
<avue-switch v-model="main.activeOption.line"></avue-switch>
</el-form-item>
<el-form-item label="开启排名">
<avue-switch v-model="main.activeOption.index"></avue-switch>
</el-form-item>
<el-form-item label="文字颜色">
<avue-color type="textarea"
v-model="main.activeOption.bodyColor"></avue-color>
</el-form-item>
<el-form-item label="表格背景">
<avue-color type="textarea"
v-model="main.activeOption.bodyBackgroud"></avue-color>
</el-form-item>
<el-form-item label="字体位置">
<avue-select v-model="main.activeOption.bodyTextAlign"
:dic="dicOption.textAlign">
</avue-select>
</el-form-item>
<el-form-item label="分割线">
<avue-color type="textarea"
v-model="main.activeOption.borderColor"></avue-color>
</el-form-item>
<el-form-item label="奇行颜色">
<avue-color type="textarea"
v-model="main.activeOption.nthColor"></avue-color>
</el-form-item>
<el-form-item label="偶行颜色">
<avue-color type="textarea"
v-model="main.activeOption.othColor"></avue-color>
</el-form-item>
<avue-crud :option="tableOption"
:data="main.activeOption.column"
@row-save="rowSave"
@row-del="rowDel"
@row-update="rowUpdate"></avue-crud>
</div>
</template>
<script>
import { tableOption, dicOption } from '@/option/config'
export default {
data () {
return {
dicOption: dicOption,
tableOption: tableOption
}
},
inject: ["main"],
methods: {
rowSave (row, done) {
this.main.activeOption.column.push(row);
done()
},
rowDel (row, index) {
this.main.activeOption.column.splice(index, 1);
},
rowUpdate (row, index, done) {
this.main.activeOption.column.splice(index, 1, row);
done()
},
}
}
</script>
<style>
</style>

View File

@ -0,0 +1,94 @@
<!-- 选项卡配置 -->
<template>
<div>
<el-form-item label="字体大小">
<avue-input-number v-model="main.activeOption.fontSize"
:max="200"></avue-input-number>
</el-form-item>
<el-form-item label="字体颜色">
<avue-color v-model="main.activeOption.color"></avue-color>
</el-form-item>
<el-form-item label="类型">
<avue-radio v-model="main.activeOption.type"
:dic="dicOption.tabsTypeList"></avue-radio>
</el-form-item>
<template v-if="main.activeOption.type==='tabs'">
<el-form-item label="字体间距">
<avue-input-number v-model="main.activeOption.split"></avue-input-number>
</el-form-item>
<el-collapse accordion>
<el-collapse-item title="边框设置">
<el-form-item label="背景颜色">
<avue-color v-model="main.activeOption.backgroundColor"></avue-color>
</el-form-item>
<el-form-item label="图标间距">
<avue-input-number v-model="main.activeOption.iconSplit"></avue-input-number>
</el-form-item>
<el-form-item label="图标大小">
<avue-input-number v-model="main.activeOption.iconSize"></avue-input-number>
</el-form-item>
<el-form-item label="图片地址">
<img v-if="main.activeOption.backgroundImage"
:src="main.activeOption.backgroundImage"
alt=""
width="100%" />
<el-input v-model="main.activeOption.backgroundImage">
<div @click="main.handleOpenImg('activeOption.backgroundImage','border')"
slot="append">
<i class="iconfont icon-img"></i>
</div>
</el-input>
</el-form-item>
<el-form-item label="边框颜色">
<avue-color v-model="main.activeOption.borderColor"></avue-color>
</el-form-item>
<el-form-item label="边框宽度">
<avue-input-number v-model="main.activeOption.borderWidth"
:max="10">
</avue-input-number>
</el-form-item>
</el-collapse-item>
<el-collapse-item title="高亮设置">
<el-form-item label="字体高亮颜色">
<avue-color v-model="main.activeOption.empColor"></avue-color>
</el-form-item>
<el-form-item label="背景图片">
<img v-if="main.activeOption.empBackgroundImage"
:src="main.activeOption.empBackgroundImage"
alt=""
width="100%" />
<el-input v-model="main.activeOption.empBackgroundImage">
<div @click="main.handleOpenImg('activeOption.empBackgroundImage','border')"
slot="append">
<i class="iconfont icon-img"></i>
</div>
</el-input>
</el-form-item>
<el-form-item label="边框颜色">
<avue-color v-model="main.activeOption.empBorderColor"></avue-color>
</el-form-item>
<el-form-item label="边框宽度">
<avue-input-number v-model="main.activeOption.empBorderWidth"
:max="10">
</avue-input-number>
</el-form-item>
</el-collapse-item>
</el-collapse>
</template>
</div>
</template>
<script>
import { dicOption } from '@/option/config'
export default {
data () {
return {
dicOption: dicOption
}
},
inject: ["main"]
}
</script>
<style>
</style>

View File

@ -0,0 +1,76 @@
<!-- 文字配置 -->
<template>
<div>
<el-form-item label="文本内容">
<avue-input v-model="main.activeObj.data.value"></avue-input>
</el-form-item>
<el-form-item label="字体大小">
<avue-input-number v-model="main.activeOption.fontSize"
:max="200"></avue-input-number>
</el-form-item>
<el-form-item label="字体颜色">
<avue-color v-model="main.activeOption.color"></avue-color>
</el-form-item>
<el-form-item label="字体间距">
<avue-slider v-model="main.activeOption.split"></avue-slider>
</el-form-item>
<el-form-item label="字体行高">
<avue-slider v-model="main.activeOption.lineHeight"></avue-slider>
</el-form-item>
<el-form-item label="字体背景">
<avue-color v-model="main.activeOption.backgroundColor"></avue-color>
</el-form-item>
<el-form-item label="文字粗细">
<avue-select v-model="main.activeOption.fontWeight"
:dic="dicOption.fontWeight">
</avue-select>
</el-form-item>
<el-form-item label="对齐方式">
<avue-select v-model="main.activeOption.textAlign"
:dic="dicOption.textAlign">
</avue-select>
</el-form-item>
<el-collapse accordion>
<el-collapse-item title="跑马灯设置">
<el-form-item label="开启">
<avue-switch v-model="main.activeOption.scroll"></avue-switch>
</el-form-item>
<template v-if="main.activeOption.scroll">
<el-form-item label="滚动速度">
<avue-input v-model="main.activeOption.speed"></avue-input>
</el-form-item>
</template>
</el-collapse-item>
<el-collapse-item title="超链设置">
<el-form-item label="开启">
<avue-switch v-model="main.activeOption.link"></avue-switch>
</el-form-item>
<template v-if="main.activeOption.link">
<el-form-item label="打开方式">
<avue-radio v-model="main.activeOption.linkTarget"
:dic="dicOption.target">
</avue-radio>
</el-form-item>
<el-form-item label="超链地址">
<avue-input v-model="main.activeOption.linkHref"></avue-input>
</el-form-item>
</template>
</el-collapse-item>
</el-collapse>
</div>
</template>
<script>
import { dicOption } from '@/option/config'
export default {
data () {
return {
dicOption: dicOption
}
},
inject: ["main"]
}
</script>
<style>
</style>

View File

@ -0,0 +1,17 @@
<!-- video配置 -->
<template>
<div>
<el-form-item label="地址">
<avue-input v-model="main.activeObj.data.value"></avue-input>
</el-form-item>
</div>
</template>
<script>
export default {
inject: ["main"]
}
</script>
<style>
</style>

View File

@ -0,0 +1,26 @@
<!-- 字符云配置 -->
<template>
<div>
<el-form-item label="最小字体">
<avue-input-number v-model="main.activeOption.minFontSize"></avue-input-number>
</el-form-item>
<el-form-item label="最大字体">
<avue-input-number v-model="main.activeOption.maxFontSize"></avue-input-number>
</el-form-item>
<el-form-item label="间距">
<avue-input-number v-model="main.activeOption.split"></avue-input-number>
</el-form-item>
<el-form-item label="旋转">
<avue-switch v-model="main.activeOption.rotate"></avue-switch>
</el-form-item>
</div>
</template>
<script>
export default {
inject: ["main"]
}
</script>
<style>
</style>