super-page-runtime 1.0.12 → 1.0.14

package/src/components/runtime/views/assemblys/chart/common/common-style-datazoom.vue

@@ -0,0 +1,45 @@
+<template>
+    <el-collapse-item
+            title="缩略轴(横坐标)"  
+            name="styleDatazoom"
+            class="amb-design-attr-group-header">
+        <div style="padding:8px 0px 0px 0px;">
+            <el-form-item label="是否显示" style="margin-top:0px;margin-bottom:-15px;">
+                <el-switch v-model="configure.style.enableDatazoom"/>
+            </el-form-item>
+            <el-form-item 
+                v-show="configure.style.enableDatazoom"
+                label="类型" style="margin-top:18px;">
+                <el-radio-group v-model="configure.style.dataZoomType">
+                    <el-radio-button value="">默认</el-radio-button>
+                    <el-radio-button value="slider">滑动</el-radio-button>
+                    <el-radio-button value="inside">内置</el-radio-button>
+                </el-radio-group>
+            </el-form-item>
+            <el-form-item 
+                v-show="configure.style.enableDatazoom"
+                label="开始比例" style="margin-top:-10px;">
+                <el-input-number v-model="configure.style.dataZoomStart" :min="0" :max="configure.style.dataZoomEnd">
+                </el-input-number>
+            </el-form-item>
+            <el-form-item 
+                v-show="configure.style.enableDatazoom"
+                label="结束比例" style="margin-top:-10px;margin-bottom:-15px;">
+                <el-input-number v-model="configure.style.dataZoomEnd" :min="configure.style.dataZoomStart" :max="100">
+                </el-input-number>、
+                <el-text style="line-height:15px;margin-top:5px;" type="success" size="small">
+                    数据窗口范围的起始百分比,范围是：0 ~ 100,表示 0% ~ 100%
+                </el-text>
+            </el-form-item>
+        </div>
+    </el-collapse-item>
+</template>
+<script lang='ts' setup>
+    defineProps({
+        configure:{
+            type:Object,
+            required:true
+        }
+    });
+</script>
+

package/src/components/runtime/views/assemblys/chart/common/common-style-font-subtitle.vue

@@ -0,0 +1,78 @@
+<template>
+    <!--统计图-->
+    <el-collapse-item
+            title="副标题"  
+            name="subtitleFont"
+            class="amb-design-attr-group-header">
+        <div style="padding:8px 0px 0px 0px;">
+            <el-form-item label="颜色" style="margin-top:4px;">
+                <el-color-picker v-model="configure.style.subtitleColor" />
+            </el-form-item>
+            <el-form-item
+                label="字号" style="margin-top:-10px;">
+                <el-select
+                v-model="configure.style.subtitleFontSize"
+                placeholder="默认"
+                clearable>
+                <el-option
+                    v-for="item in fontSizes"
+                    :label="item" :value="item"/>
+                </el-select>
+            </el-form-item>
+            <el-form-item 
+                label="文字粗细" style="margin-top:-10px;margin-bottom:-15px;">
+                <el-select
+                    v-model="configure.style.subtitleFontWeight"
+                    placeholder="默认"
+                    clearable>
+                    <el-option label="normal" value="normal"/>
+                    <el-option label="bold" value="bold"/>
+                    <el-option label="bolder" value="bolder"/>
+                    <el-option label="lighter" value="lighter"/>
+                </el-select>
+            </el-form-item>
+            <el-form-item
+                v-show="chartType=='seriesChart'"
+                label="位置" style="margin-top:24px;margin-bottom:-15px;">
+                <el-col :span="12">
+                    <el-form-item
+                        label-width="40"
+                        label="left">
+                        <el-input
+                            style="width:40px;"
+                            v-model="configure.style.subtitleLeft"
+                            placeholder=''
+                            />
+                    </el-form-item>
+                </el-col>
+                <el-col :span="12">
+                    <el-form-item
+                        label-width="40"
+                        label="top">
+                        <el-input
+                            style="width:40px;"
+                            v-model="configure.style.subtitleTop"
+                            placeholder=''
+                            />
+                    </el-form-item>
+                </el-col>
+                <el-text type="success" size="small" style="line-height:15px;margin-top:4px;">值可以是像 20 这样的具体像素值，可以是像 '20%' 这样相对于容器高宽的百分比</el-text>
+            </el-form-item>
+        </div>
+    </el-collapse-item>
+</template>
+<script lang='ts' setup>
+    defineProps({
+        configure:{
+            type:Object,
+            required:true
+        },
+        chartType:{
+            type:String,
+            default:''
+        }
+    });
+    //字号
+    const fontSizes = ["8","10","12","14","16","18","20","24","28"];
+</script>
+

package/src/components/runtime/views/assemblys/chart/common/common-style-font-title.vue

@@ -0,0 +1,56 @@
+<template>
+    <el-collapse-item
+            title="主标题"  
+            name="titleFont"
+            class="amb-design-attr-group-header">
+        <div style="padding:8px 0px 0px 0px;">
+            <el-form-item
+                label="颜色" style="margin-top:4px;">
+                <el-color-picker v-model="configure.style.titleColor" />
+            </el-form-item>
+            <el-form-item
+                label="字号" style="margin-top:-10px;">
+                <el-select
+                v-model="configure.style.titleFontSize"
+                placeholder="默认"
+                clearable>
+                <el-option
+                    v-for="item in fontSizes"
+                    :label="item" :value="item"/>
+                </el-select>
+            </el-form-item>
+            <el-form-item
+                label="文字粗细" style="margin-top:-10px;">
+                <el-select
+                    v-model="configure.style.titleFontWeight"
+                    placeholder="默认"
+                    clearable>
+                    <el-option label="normal" value="normal"/>
+                    <el-option label="bold" value="bold"/>
+                    <el-option label="bolder" value="bolder"/>
+                    <el-option label="lighter" value="lighter"/>
+                </el-select>
+            </el-form-item>
+            <el-form-item 
+                    label="左右对齐" style="margin-top:-10px;margin-bottom:-15px;">
+                    <el-radio-group v-model="configure.style.titleTextAlign">
+                    <el-radio-button value="left">左</el-radio-button>
+                    <el-radio-button value="center">中</el-radio-button>
+                    <el-radio-button value="right">右</el-radio-button>
+                    </el-radio-group>
+            </el-form-item>
+        </div>
+    </el-collapse-item>
+</template>
+<script lang='ts' setup>
+    const props = defineProps({
+        configure:{
+            type:Object,
+            required:true
+        },
+        chartType:Object
+    });
+    //字号
+    const fontSizes = ["8","10","12","14","16","18","20","24","28"];
+</script>
+

package/src/components/runtime/views/assemblys/chart/common/common-style-grid.vue

@@ -0,0 +1,70 @@
+<template>
+    <el-collapse-item
+            title="网格"  
+            name="styleGrid"
+            class="amb-design-attr-group-header">
+        <div style="padding:8px 0px 0px 0px;">
+            <el-form-item label="背景颜色" style="margin-top:4px;">
+                <el-color-picker v-model="configure.style.gridBackgroundColor" />
+            </el-form-item>
+            <el-form-item label="上边距" style="margin-top:-10px;">
+                <el-input-number v-model="configure.style.gridPaddingTop" :min="0" :max="100">
+                </el-input-number>
+            </el-form-item>
+            <el-form-item label="右边距" style="margin-top:-10px;">
+                <el-input-number v-model="configure.style.gridPaddingRight" :min="0" :max="100">
+                </el-input-number>
+            </el-form-item>
+            <el-form-item label="下边距" style="margin-top:-10px;">
+                <el-input-number v-model="configure.style.gridPaddingBottom" :min="0" :max="100">
+                </el-input-number>
+            </el-form-item>
+            <el-form-item label="左边距" style="margin-top:-10px;">
+                <el-input-number v-model="configure.style.gridPaddingLeft" :min="0" :max="100">
+                </el-input-number>
+            </el-form-item>
+            <el-form-item label="显示边框" style="margin-top:-10px;">
+                <el-switch v-model="configure.style.enableGridLine"/>
+            </el-form-item>
+            <el-form-item 
+                v-show="configure.style.enableGridLine"
+                label="边框颜色" style="margin-top:-10px;">
+                <el-color-picker v-model="configure.style.gridLineColor" />
+            </el-form-item>
+            <el-form-item 
+                v-show="configure.style.enableGridLine"
+                label="边框线宽" style="margin-top:-10px;">
+                <el-input-number v-model="configure.style.gridLineWidth" :min="0" :max="40">
+                </el-input-number>
+            </el-form-item>
+            <el-form-item 
+                label="阴影" style="margin-top:-10px;margin-bottom:-15px;">
+                <el-color-picker v-model="configure.style.gridShadowColor" />
+            </el-form-item>
+            <el-form-item 
+                v-show="configure.style.gridShadowColor"
+                label="阴影模糊" 
+                style="margin-top:15px;">
+                <el-input-number v-model="configure.style.gridShadowBlur" :min="0" :max="20">
+                </el-input-number>
+            </el-form-item>
+            <el-form-item v-show="configure.style.gridShadowColor" label="水平偏移" style="margin-top:-10px;">
+                <el-input-number v-model="configure.style.gridShadowX" :min="0" :max="40">
+                </el-input-number>
+            </el-form-item>
+            <el-form-item v-show="configure.style.gridShadowColor" label="垂直偏移" style="margin-top:-10px;margin-bottom:-15px;">
+                <el-input-number v-model="configure.style.gridShadowY" :min="0" :max="40">
+                </el-input-number>
+            </el-form-item>
+        </div>
+    </el-collapse-item>
+</template>
+<script lang='ts' setup>
+    defineProps({
+        configure:{
+            type:Object,
+            required:true
+        }
+    });
+</script>
+

package/src/components/runtime/views/assemblys/chart/common/common-style-legend.vue

@@ -0,0 +1,70 @@
+<template>
+    <el-collapse-item
+            title="图例"  
+            name="styleLegend"
+            class="amb-design-attr-group-header">
+        <div style="padding:8px 0px 0px 0px;">
+            <el-form-item label="是否显示" style="margin-top:0px;margin-bottom:-15px;">
+                <el-switch v-model="configure.style.enableLegend"/>
+            </el-form-item>
+            <el-form-item 
+                v-show="configure.style.enableLegend"
+                label="布局" style="margin-top:18px;">
+                <el-radio-group v-model="configure.style.legendLayout">
+                    <el-radio-button value="">默认</el-radio-button>
+                    <el-radio-button value="horizontal">水平</el-radio-button>
+                    <el-radio-button value="vertical">垂直</el-radio-button>
+                </el-radio-group>
+            </el-form-item>
+            <el-form-item 
+                v-show="configure.style.enableLegend"
+                label="水平对齐" style="margin-top:-10px;">
+                <el-select
+                    v-model="configure.style.legendAlign"
+                    placeholder="默认"
+                    clearable>
+                    <el-option label="靠左" value="left"/>
+                    <el-option label="居中" value="center"/>
+                    <el-option label="靠右" value="right"/>
+                </el-select>
+            </el-form-item>
+            <el-form-item 
+                v-show="configure.style.enableLegend"
+                label="垂直对齐" style="margin-top:-10px;">
+                <el-select
+                    v-model="configure.style.legendVerticalAlign"
+                    placeholder="默认"
+                    clearable>
+                    <el-option label="顶部" value="top"/>
+                    <el-option label="居中" value="middle"/>
+                    <el-option label="底部" value="bottom"/>
+                </el-select>
+            </el-form-item>
+            <el-form-item 
+                v-show="configure.style.enableLegend"
+                label="内边距" style="margin-top:-10px;">
+                <el-input-number v-model="configure.style.legendPadding" min=0 max="200">
+                </el-input-number>
+            </el-form-item>
+            <el-form-item 
+                v-show="configure.style.enableLegend"
+                label="内容定义" style="margin-top:-8px;margin-bottom:-15px;">
+                <el-input
+                    v-model="configure.style.customLegend"
+                    :rows="3"
+                    type="textarea"
+                    placeholder=""/>
+                <el-text type="success" size="small">模板变量为图例名称{name}</el-text>
+            </el-form-item>
+        </div>
+    </el-collapse-item>
+</template>
+<script lang='ts' setup>
+    defineProps({
+        configure:{
+            type:Object,
+            required:true
+        }
+    });
+</script>
+

package/src/components/runtime/views/assemblys/chart/common/common-style-tooltip.vue

@@ -0,0 +1,140 @@
+<template>
+    <el-collapse-item
+            title="提示消息"  
+            name="styleTooltip"
+            class="amb-design-attr-group-header">
+        <div style="padding:8px 0px 0px 0px;">
+            <el-form-item label="是否显示" style="margin-top:0px;margin-bottom:-15px;">
+                <el-switch v-model="configure.style.enableTooltip"/>
+            </el-form-item>
+            <el-form-item 
+                v-show="configure.style.enableTooltip"
+                label="触发类型" style="margin-top:18px;">
+                <el-radio-group v-model="configure.style.tooltipTrigger">
+                    <el-radio-button value="">默认</el-radio-button>
+                    <el-radio-button value="item">item</el-radio-button>
+                    <el-radio-button
+                    v-show="chartType!='radar'"
+                    value="axis">axis</el-radio-button>
+                </el-radio-group>
+            </el-form-item>
+            <el-form-item 
+                v-show="configure.style.enableTooltip&&configure.style.tooltipTrigger=='item'" 
+                label="触发位置" style="margin-top:-10px;">
+                <el-select
+                    v-model="configure.style.tooltipPosition"
+                    placeholder="默认"
+                    clearable>
+                    <el-option label="inside" value="inside"/>
+                    <el-option label="top" value="top"/>
+                    <el-option label="left" value="left"/>
+                    <el-option label="right" value="right"/>
+                    <el-option label="bottom" value="bottom"/>
+                </el-select>
+            </el-form-item>
+            <el-form-item 
+                v-show="configure.style.enableTooltip" label="数据格式" style="margin-top:-15px;">
+                <el-checkbox-group v-model="configure.style.tooltipNumFormat">
+                    <el-row>
+                        <el-col :span="14">
+                            <el-checkbox value="precision" label="小数位数" size="large" />
+                        </el-col>
+                        <el-col :span="8">
+                            <el-select
+                                style="width:70px;margin-top:8px;"
+                                size="small"
+                                v-model="configure.style.tooltipNumPrecision"
+                                :disabled="configure.style.tooltipNumFormat&&configure.style.tooltipNumFormat.indexOf('precision')==-1"
+                                placeholder="默认"
+                                clearable>
+                                <el-option label="1" value="1"/>
+                                <el-option label="2" value="2"/>
+                                <el-option label="3" value="3"/>
+                                <el-option label="4" value="4"/>
+                                <el-option label="5" value="5"/>
+                                <el-option label="6" value="6"/>
+                            </el-select>
+                        </el-col>
+                    </el-row>
+                    <el-row style="margin-top:-10px;">
+                        <el-col :span="14">
+                            <el-checkbox value="prefix" label="前缀" size="large" />
+                        </el-col>
+                        <el-col :span="8">
+                            <el-input
+                                size="small"
+                                style="width:70px;margin-top:8px;"
+                                v-model="configure.style.tooltipNumPrefix"
+                                :disabled="configure.style.tooltipNumFormat&&configure.style.tooltipNumFormat.indexOf('prefix')==-1"
+                                placeholder=""/>
+                        </el-col>
+                    </el-row>
+                    <el-row style="margin-top:-10px;">
+                        <el-col :span="14">
+                            <el-checkbox value="append" label="后缀" size="large" />
+                        </el-col>
+                        <el-col :span="8">
+                            <el-input
+                                size="small"
+                                style="width:70px;margin-top:8px;"
+                                v-model="configure.style.tooltipNumAppend"
+                                :disabled="configure.style.tooltipNumFormat&&configure.style.tooltipNumFormat.indexOf('append')==-1"
+                                placeholder=""/>
+                        </el-col>
+                    </el-row>
+                </el-checkbox-group>
+            </el-form-item>
+            <el-form-item 
+                v-show="configure.style.enableTooltip" label="文字颜色" style="margin-top:-10px;">
+                <el-color-picker v-model="configure.style.tooltipColor" />
+            </el-form-item>
+            <el-form-item 
+                v-show="configure.style.enableTooltip"
+                label="文字字号" style="margin-top:-10px;">
+                <el-select
+                v-model="configure.style.tooltipFontSize"
+                placeholder="默认"
+                clearable>
+                <el-option
+                    v-for="item in fontSizes"
+                    :label="item" :value="item"/>
+                </el-select>
+            </el-form-item>
+            <el-form-item 
+                v-show="configure.style.enableTooltip" label="文字粗细" style="margin-top:-10px;">
+                <el-select
+                    v-model="configure.style.tooltipWeight"
+                    placeholder="默认"
+                    clearable>
+                    <el-option label="bold" value="bold"/>
+                    <el-option label="bolder" value="bolder"/>
+                    <el-option label="lighter" value="lighter"/>
+                </el-select>
+            </el-form-item>
+            <el-form-item 
+                v-show="configure.style.enableTooltip"
+                label="内容定义" style="margin-top:-10px;margin-bottom:-15px;">
+                <el-input
+                    v-model="configure.style.tooltipFormatter"
+                    :rows="2"
+                    type="textarea"
+                    placeholder=""/>
+                <el-text style="line-height:15px;margin-top:5px;" type="success" size="small">
+                    {a}：系列名；{b}：数据名；{c}：数据值；{@xxx}；{@[n]}
+                </el-text>
+            </el-form-item>
+        </div>
+    </el-collapse-item>
+</template>
+<script lang='ts' setup>
+    defineProps({
+        configure:{
+            type:Object,
+            required:true
+        },
+        chartType:Object
+    });
+    //字号
+    const fontSizes = ["8","10","12","14","16","18","20","24","28"];
+</script>
+

package/src/components/runtime/views/assemblys/chart/common/common-style-xaxis.vue

@@ -0,0 +1,58 @@
+<template>
+    <el-collapse-item
+            title="横坐标"  
+            name="styleXaxis"
+            class="amb-design-attr-group-header">
+        <div style="padding:8px 0px 0px 0px;">
+            <el-form-item label="是否显示" style="margin-top:0px;margin-bottom:-15px;">
+                <el-switch v-model="configure.style.enableXaxis"/>
+            </el-form-item>
+            <el-form-item 
+                v-show="configure.style.enableXaxis"
+                label="旋转角度" style="margin-top:18px;">
+                <el-input-number v-model="configure.style.xaxisAngle" :min="-90" :max="90">
+                </el-input-number>
+            </el-form-item>
+            <el-form-item 
+                v-show="configure.style.enableXaxis"
+                label="偏移量" style="margin-top:-10px;">
+                <el-input-number v-model="configure.style.xaxisOffset" :min="0" max="180">
+                </el-input-number>
+            </el-form-item>
+            <el-form-item 
+                v-show="configure.style.enableXaxis"
+                label="文本宽度" style="margin-top:-10px;">
+                <el-input-number v-model="configure.style.xaxisWidth" :min="10" :max="180">
+                </el-input-number>
+            </el-form-item>
+            <el-form-item 
+                v-show="configure.style.enableXaxis"
+                label="截断显示" style="margin-top:-10px;">
+                <el-input
+                    v-model="configure.style.xaxisEllipsis"
+                    placeholder="..."/>
+            </el-form-item>
+            <el-form-item 
+                v-show="configure.style.enableXaxis"
+                label="内容定义" style="margin-top:-10px;margin-bottom:-15px;">
+                <el-input
+                    v-model="configure.style.xaxisFormatter"
+                    type="textarea"
+                    row="2"
+                    placeholder=""/>
+                <el-text style="line-height:15px;margin-top:5px;" type="success" size="small">
+                    模板变量为刻度默认标签 {value}，如{value} kg
+                </el-text>
+            </el-form-item>
+        </div>
+    </el-collapse-item>
+</template>
+<script lang='ts' setup>
+    defineProps({
+        configure:{
+            type:Object,
+            required:true
+        }
+    });
+</script>
+

package/src/components/runtime/views/assemblys/chart/common/common-style-yaxis.vue

@@ -0,0 +1,125 @@
+<template>
+    <el-collapse-item
+            :title="title"  
+            :name="name"
+            class="amb-design-attr-group-header">
+        <div style="padding:8px 0px 0px 0px;">
+            <el-form-item label="名称" style="margin-top:0px;">
+                <el-input
+                    v-model="yaxis.name"
+                    placeholder="请输入"/>
+            </el-form-item>
+            <el-form-item label="最小值" style="margin-top:-10px;">
+                <el-input-number v-model="yaxis.min" :max="yaxis.max">
+                </el-input-number>
+            </el-form-item>
+            <el-form-item label="最大值" style="margin-top:-10px;">
+                <el-input-number v-model="yaxis.max" :min="yaxis.min">
+                </el-input-number>
+            </el-form-item>
+            <el-form-item 
+                label="坐标偏移" style="margin-top:-10px;">
+                <el-input-number v-model="yaxis.offset" :min="0" max="180">
+                </el-input-number>
+            </el-form-item>
+            <el-divider v-show="yaxis.name">
+                名称
+            </el-divider>
+            <el-form-item v-show="yaxis.name" 
+                label="名称位置" style="margin-top:-10px;">
+                <el-select
+                    v-model="yaxis.nameLocation"
+                    placeholder="默认"
+                    clearable>
+                    <el-option
+                        v-for="item in nameLocations"
+                        :label="item" :value="item"/>
+                    </el-select>
+            </el-form-item>
+            <el-form-item v-show="yaxis.name" 
+                 label="名称对齐" style="margin-top:-10px;">
+                <el-radio-group v-model="yaxis.nameAlign">
+                    <el-radio-button value="right">左</el-radio-button>
+                    <el-radio-button value="center">中</el-radio-button>
+                    <el-radio-button value="left">右</el-radio-button>
+                </el-radio-group>
+                <el-radio-group style="margin-top:10px;" v-model="yaxis.nameVerticalAlign">
+                    <el-radio-button value="bottom">上</el-radio-button>
+                    <el-radio-button value="middle">中</el-radio-button>
+                    <el-radio-button value="top">底</el-radio-button>
+                </el-radio-group>
+            </el-form-item>
+            <el-form-item v-show="yaxis.name" 
+                label="内边距" style="margin-top:-10px;">
+                <el-input-number v-model="yaxis.namePadding" min=0 max="200">
+                </el-input-number>
+            </el-form-item>
+            <el-form-item  v-show="yaxis.name" 
+                label="名称颜色" style="margin-top:4px;">
+                <el-color-picker v-model="yaxis.nameColor" />
+            </el-form-item>
+            <el-form-item v-show="yaxis.name" 
+                label="名称字号" style="margin-top:-10px;">
+                <el-select
+                v-model="yaxis.nameFontSize"
+                placeholder="默认"
+                clearable>
+                <el-option
+                    v-for="item in fontSizes"
+                    :label="item" :value="item"/>
+                </el-select>
+            </el-form-item>
+            <el-divider>
+                刻度标签
+            </el-divider>
+            <el-form-item
+                label="内容定义" style="margin-top:-10px;">
+                <el-input
+                    v-model="yaxis.formatter"
+                    :rows="2"
+                    type="textarea"
+                    placeholder=""/>
+                <el-text type="success" size="small">标签取值{value},如{value} kg</el-text>
+            </el-form-item>
+            <el-form-item 
+                label="标签颜色" style="margin-top:4px;">
+                <el-color-picker v-model="yaxis.labelColor" />
+            </el-form-item>
+            <el-form-item
+                label="标签字号" style="margin-top:-10px;">
+                <el-select
+                v-model="yaxis.labelFontSize"
+                placeholder="默认"
+                clearable>
+                <el-option
+                    v-for="item in fontSizes"
+                    :label="item" :value="item"/>
+                </el-select>
+            </el-form-item>
+            <el-form-item label="分隔线" style="margin-top:-10px;margin-bottom:-15px;">
+                <el-switch v-model="yaxis.enableAxisLine"/>
+            </el-form-item>
+            <el-form-item 
+                v-show="yaxis.enableAxisLine"
+                label="分割段数" style="margin-top:18px;margin-bottom:-15px;">
+                <el-input-number v-model="yaxis.splitNumber" min=0 max="100">
+                </el-input-number>
+            </el-form-item>
+            
+        </div>
+    </el-collapse-item>
+</template>
+<script lang='ts' setup>
+    defineProps({
+        yaxis:{
+            type:Object,
+            required:true
+        },
+        title:Object,
+        name:Object
+    });
+    //字号
+    const fontSizes = ["8","10","12","14","16","18","20","24","28"];
+    const nameLocations = ['start','middle','center','end'];
+</script>
+