整合大屏编辑页面
This commit is contained in:
34
ruoyi-ui/src/option/components/bar.vue
Normal file
34
ruoyi-ui/src/option/components/bar.vue
Normal 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>
|
217
ruoyi-ui/src/option/components/common.vue
Normal file
217
ruoyi-ui/src/option/components/common.vue
Normal 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>
|
53
ruoyi-ui/src/option/components/datetime.vue
Normal file
53
ruoyi-ui/src/option/components/datetime.vue
Normal 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>
|
169
ruoyi-ui/src/option/components/flop.vue
Normal file
169
ruoyi-ui/src/option/components/flop.vue
Normal 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>
|
15
ruoyi-ui/src/option/components/funnel.vue
Normal file
15
ruoyi-ui/src/option/components/funnel.vue
Normal file
@ -0,0 +1,15 @@
|
||||
<!-- 漏斗图配置 -->
|
||||
<template>
|
||||
<div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
inject: ["main"]
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
29
ruoyi-ui/src/option/components/gauge.vue
Normal file
29
ruoyi-ui/src/option/components/gauge.vue
Normal 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>
|
17
ruoyi-ui/src/option/components/iframe.vue
Normal file
17
ruoyi-ui/src/option/components/iframe.vue
Normal 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>
|
64
ruoyi-ui/src/option/components/img.vue
Normal file
64
ruoyi-ui/src/option/components/img.vue
Normal 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>
|
32
ruoyi-ui/src/option/components/imgborder.vue
Normal file
32
ruoyi-ui/src/option/components/imgborder.vue
Normal 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>
|
33
ruoyi-ui/src/option/components/line.vue
Normal file
33
ruoyi-ui/src/option/components/line.vue
Normal 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>
|
65
ruoyi-ui/src/option/components/map.vue
Normal file
65
ruoyi-ui/src/option/components/map.vue
Normal 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>
|
60
ruoyi-ui/src/option/components/pictorialbar.vue
Normal file
60
ruoyi-ui/src/option/components/pictorialbar.vue
Normal 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>
|
33
ruoyi-ui/src/option/components/pie.vue
Normal file
33
ruoyi-ui/src/option/components/pie.vue
Normal 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>
|
60
ruoyi-ui/src/option/components/progress.vue
Normal file
60
ruoyi-ui/src/option/components/progress.vue
Normal 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>
|
30
ruoyi-ui/src/option/components/radar.vue
Normal file
30
ruoyi-ui/src/option/components/radar.vue
Normal 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>
|
17
ruoyi-ui/src/option/components/scatter.vue
Normal file
17
ruoyi-ui/src/option/components/scatter.vue
Normal 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>
|
35
ruoyi-ui/src/option/components/swiper.vue
Normal file
35
ruoyi-ui/src/option/components/swiper.vue
Normal 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>
|
110
ruoyi-ui/src/option/components/table.vue
Normal file
110
ruoyi-ui/src/option/components/table.vue
Normal 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>
|
94
ruoyi-ui/src/option/components/tabs.vue
Normal file
94
ruoyi-ui/src/option/components/tabs.vue
Normal 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>
|
76
ruoyi-ui/src/option/components/text.vue
Normal file
76
ruoyi-ui/src/option/components/text.vue
Normal 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>
|
17
ruoyi-ui/src/option/components/video.vue
Normal file
17
ruoyi-ui/src/option/components/video.vue
Normal 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>
|
26
ruoyi-ui/src/option/components/wordcloud.vue
Normal file
26
ruoyi-ui/src/option/components/wordcloud.vue
Normal 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>
|
Reference in New Issue
Block a user