super-page-runtime 1.0.12 → 1.0.14

package/src/components/runtime/views/assemblys/chart/common-series/common-attr-dataset.vue

@@ -0,0 +1,67 @@
+<template>
+    <el-collapse-item
+              title="数据设置"  
+              name="dataList"
+              class="amb-design-attr-group-header">
+        <div style="padding:8px 0px 0px 0px;">
+            <el-form-item
+                label="数据源" style="margin-top:4px">
+                <el-input v-model="configure.props.serviceName" readonly>
+                <template #append>
+                    <el-button :icon="Search"/>
+                    <el-button :icon="Plus"/>
+                </template>
+                </el-input>
+            </el-form-item>
+            <el-form-item
+                label="数据集" style="margin-top:-5px">
+                <el-select
+                v-model="configure.props.datasField"
+                placeholder="根目录"
+                clearable>
+                <el-option label="data" value="root"></el-option>
+                </el-select>
+                <el-text type="success" size="small">默认为根目录</el-text>
+            </el-form-item>
+            <el-form-item
+                label="X坐标字段" style="margin-top:-10px">
+                <el-select
+                v-model="configure.props.xaxisField"
+                placeholder="请选择"
+                multiple
+                collapse-tags
+                clearable>
+                <el-option label="field1" value="root"></el-option>
+                </el-select>
+                <el-text v-show="configure.type!='scatter'" type="success" size="small">默认为选择的纬度字段，可多选</el-text>
+                <el-text v-show="configure.type=='scatter'" type="success" size="small">数字类型,默认为选择的纬度字段，单选</el-text>
+            </el-form-item>
+            <el-form-item
+                label="Y坐标字段" style="margin-top:-10px;margin-bottom:-15px;">
+                <el-select
+                    v-model="configure.props.yaxisField"
+                    placeholder="请选择"
+                    multiple
+                    collapse-tags
+                    clearable>
+                <el-option label="field1" value="root"></el-option>
+                </el-select>
+                <el-text type="success" size="small">默认为选择的数值字段,单选</el-text>
+            </el-form-item>
+        </div>
+    </el-collapse-item>
+</template>
+<script lang='ts' setup>
+    import {
+        Search,
+        Plus
+    } from '@element-plus/icons-vue';
+    
+    defineProps({
+        configure:{
+            type:Object,
+            required:true
+        }
+    });
+</script>
+

package/src/components/runtime/views/assemblys/chart/common-series/common-attr-dynamic.vue

@@ -0,0 +1,57 @@
+<template>
+    <el-collapse-item
+            title="动态设置"  
+            name="propsDynamic"
+            class="amb-design-attr-group-header">
+        <div style="padding:8px 0px 0px 0px;">
+        <el-form-item
+            label="动态字段" style="margin-top:4px">
+            <el-select
+                v-model="configure.props.dynamicSeriesField"
+                placeholder="请选择"
+                multiple
+                collapse-tags
+                clearable>
+                <el-option label="field1" value="root"></el-option>
+            </el-select>
+            <el-text type="success" size="small">如按年份展开分析，动态字段为类别时，根据查询出的类别动态生成系列</el-text>
+        </el-form-item>
+        <el-form-item
+            label="动态名称" style="margin-top:-10px;margin-bottom:-15px;">
+            <el-input v-model="configure.props.dynamicSeriesTitle" placeholder="请输入">
+            </el-input>
+            <el-text type="success" size="small">默认为动态字段的值,可按{row.动态字段名}获取变量值</el-text>
+        </el-form-item>
+        <el-form-item
+            v-show="configure.type=='bar'&&configure.type!='scatter'"
+            label="堆叠字段" style="margin-top:15px;margin-bottom:-15px;">
+            <el-select
+                v-model="configure.props.dynamicStackField"
+                placeholder="请选择"
+                multiple
+                collapse-tags
+                clearable>
+                <el-option label="field1" value="root"></el-option>
+            </el-select>
+            <el-text type="success" size="small">如按年份展开分析，动态字段为类别时，根据查询出的类别动态生成系列</el-text>
+        </el-form-item>
+        <el-form-item
+            v-show="configure.type=='bar'&&configure.type!='scatter'"
+            label="堆叠名称" style="margin-top:15px;margin-bottom:-15px;">
+            <el-input v-model="configure.props.dynamicStackTitle" placeholder="请输入">
+            </el-input>
+            <el-text type="success" size="small">默认为堆叠字段的值,可按{row.堆叠字段名}获取变量值</el-text>
+        </el-form-item>
+        </div>
+    </el-collapse-item>
+</template>
+<script lang='ts' setup>
+    defineProps({
+        configure:{
+            type:Object,
+            required:true
+        },
+        chartType:Object
+    });
+</script>
+

package/src/components/runtime/views/assemblys/chart/common-series/common-attr-testdatas.vue

@@ -0,0 +1,23 @@
+<template>
+    <el-collapse-item
+            title="测试数据"  
+            name="propsTestDatas"
+            class="amb-design-attr-group-header">
+        <div style="padding:8px 0px 0px 0px;">
+            <el-form-item
+                label="数据" style="margin-top:4px;margin-bottom:-15px;">
+                <el-input v-model="configure.props.testdatas" placeholder="请输入">
+                </el-input>
+            </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-series/common-style-label.vue

@@ -0,0 +1,209 @@
+<template>
+    <el-collapse-item
+            title="文本标签"
+            name="styleLabel"
+            class="amb-design-attr-group-header">
+        <div style="padding:8px 0px 0px 0px;">
+            <el-form-item label="是否显示" style="margin-top:4px;margin-bottom:-15px;">
+                <el-switch v-model="configure.style.enableLabel"/>
+            </el-form-item>
+            <el-form-item 
+                v-show="configure.style.enableLabel"
+                label="标签位置" style="margin-top:15px;">
+                <el-select
+                    v-model="configure.style.labelPosition"
+                    placeholder="默认"
+                    clearable>
+                    <el-option v-for="item in labelPositions" 
+                        :label="item" :value="item"/>
+                </el-select>
+            </el-form-item>
+            <el-form-item 
+                v-show="configure.style.enableLabel&&isPieAttr&&configure.style.labelPosition=='outer'" label="对齐方式" style="margin-top:-10px;">
+                <el-select
+                    v-model="configure.style.labelAlignTo"
+                    placeholder="默认"
+                    clearable>
+                    <el-option label="末端对齐" value="labelLine"/>
+                    <el-option label="文字对齐" value="edge"/>
+                </el-select>
+            </el-form-item>
+            <el-form-item 
+                v-show="configure.style.enableLabel" label="数据格式" style="margin-top:-10px;">
+                <el-checkbox-group v-model="configure.style.labelNumFormat">
+                    <el-row style="margin-top:-10px;">
+                        <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.labelNumPrecision"
+                                :disabled="configure.style.labelNumFormat&&configure.style.labelNumFormat.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
+                                style="width:70px;margin-top:8px;"
+                                size="small"
+                                v-model="configure.style.labelNumPrefix"
+                                :disabled="configure.style.labelNumFormat&&configure.style.labelNumFormat.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
+                                style="width:70px;margin-top:8px;"
+                                size="small"    
+                                v-model="configure.style.labelNumAppend"
+                                :disabled="configure.style.labelNumFormat&&configure.style.labelNumFormat.indexOf('append')==-1"
+                                placeholder=""/>
+                        </el-col>
+                    </el-row>
+                </el-checkbox-group>
+            </el-form-item>
+            <el-form-item 
+                v-show="configure.style.enableLabel"
+                label="文字字号" style="margin-top:-10px;">
+                <el-select
+                v-model="configure.style.labelFontSize"
+                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.enableLabel" label="文字颜色" style="margin-top:-10px;">
+                <el-color-picker v-model="configure.style.labelColor" />
+            </el-form-item>
+            <el-form-item 
+                v-show="configure.style.enableLabel" label="文字粗细" style="margin-top:-10px;">
+                <el-select
+                    v-model="configure.style.labelWeight"
+                    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="configure.style.enableLabel&&!isPieAttr" label="左右对齐" style="margin-top:-10px;">
+                <el-radio-group v-model="configure.style.textAlign">
+                    <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-form-item>
+            <el-form-item 
+                v-show="configure.style.enableLabel&&!isPieAttr" label="垂直对齐" style="margin-top:-10px;">
+                <el-radio-group v-model="configure.style.verticalAlign">
+                    <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="configure.style.enableLabel"
+                label="旋转角度" style="margin-top:-10px;">
+                <el-input-number v-model="configure.style.labelAngle" :min="-90" :max="90">
+                </el-input-number>
+            </el-form-item>
+            <el-form-item 
+                v-show="configure.style.enableLabel"
+                label="文字偏移" style="margin-top:-10px;">
+                <el-col :span="12">
+                    <el-form-item 
+                        label="左" label-width="40px;">
+                        <el-input
+                            style="width:50px;"
+                            v-model="configure.style.labelLeft"
+                            placeholder=""/>
+                    </el-form-item>
+                </el-col>
+                <el-col :span="12">
+                    <el-form-item 
+                        label="上" label-width="40px;">
+                        <el-input
+                            style="width:50px;"
+                            v-model="configure.style.labelTop"
+                            placeholder=""/>
+                    </el-form-item>
+                </el-col>
+                <el-text style="line-height:15px;margin-top:5px;" type="success" size="small">
+                    如30,左表示文字在横向上偏移30，上表示纵向上偏移 40
+                </el-text>
+            </el-form-item>
+            <el-form-item 
+                v-show="configure.style.enableLabel"
+                label="内容定义" style="margin-top:-10px;margin-bottom:-15px;">
+                <el-input
+                    v-model="configure.style.labelFormatter"
+                    :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>
+    import {ref} from 'vue';
+    const props = defineProps({
+        configure:{
+            type:Object,
+            required:true
+        },
+        chartType:String
+    });
+    //字号
+    const fontSizes = ["8","10","12","14","16","18","20","24","28"];
+    //标签位置
+    const labelPositions:any = [];
+    const isPieAttr = ref(true);
+    if(props.chartType=='seriesChart'){
+        labelPositions.push('outer');
+        labelPositions.push('inside');
+        labelPositions.push('center');
+    }else{
+        isPieAttr.value = false;
+        labelPositions.push('top');
+        labelPositions.push('left');
+        labelPositions.push('right');
+        labelPositions.push('bottom');
+        labelPositions.push('inside');
+        labelPositions.push('insideLeft');
+        labelPositions.push('insideRight');
+        labelPositions.push('insideTop');
+        labelPositions.push('insideBottom');
+        labelPositions.push('insideTopLeft');
+        labelPositions.push('insideBottomLeft');
+        labelPositions.push('insideTopRight');
+        labelPositions.push('insideBottomRight');
+    }
+    
+</script>
+

package/src/components/runtime/views/assemblys/chart/gauge/gauge-runtime.vue

@@ -0,0 +1,54 @@
+<template>
+  <div
+      :style="runtimeStyle"
+      :class="runtimeClass"
+      class="amb-widget-chart"
+      ref="thisRef">
+      <v-chart ref="chartRef" :theme="customTheme" :option="chartOption" autoresize />
+  </div>
+</template>
+<script lang='ts' setup>
+  import {ref} from 'vue';
+  import {getCustomTheme} from '../../../../utils/charts/chart-util';
+  import type { Component,PageContext} from '../../../../utils/interfaces/page-design-types';
+
+  import { use } from 'echarts/core';
+  import { CanvasRenderer } from 'echarts/renderers';
+  import {GaugeChart} from 'echarts/charts';
+
+  import {
+    GridComponent,
+    TitleComponent,
+    TooltipComponent,
+    ToolboxComponent
+  } from 'echarts/components';
+
+  //统计图
+  use([
+    CanvasRenderer,
+    GaugeChart,
+    GridComponent,
+    TitleComponent,
+    TooltipComponent,
+    ToolboxComponent
+  ]);
+
+  import VChart from 'vue-echarts';
+
+  interface MyProps{
+    pageContext:PageContext,
+    configure:Component
+  }
+  const props = defineProps<MyProps>();
+  //自身引用
+  const thisRef = ref(null);
+  const runtimeInfo = props.configure.runtime?props.configure.runtime:{};
+  //运行时的自身详细参数
+  const runtimeStyle = runtimeInfo.style;
+  const runtimeClass = runtimeInfo.class;
+  
+  const chartOption:any = runtimeInfo.chartOption;
+  //自定义主题
+  const configureProps = props.configure.props?props.configure.props:{};
+  const customTheme:any = getCustomTheme(configureProps.customTheme);
+</script>

package/src/components/runtime/views/assemblys/chart/pie/pie-runtime.vue

@@ -0,0 +1,57 @@
+<template>
+  <div
+      :style="runtimeStyle"
+      :class="runtimeClass"
+      class="amb-widget-chart"
+      ref="thisRef">
+      <v-chart ref="chartRef" :theme="customTheme" :option="chartOption" autoresize />
+  </div>
+</template>
+<script lang='ts' setup>
+  import {ref} from 'vue';
+  import {getCustomTheme} from '../../../../utils/charts/chart-util';
+  import type { Component,PageContext} from '../../../../utils/interfaces/page-design-types';
+
+  import { use } from 'echarts/core';
+  import { CanvasRenderer } from 'echarts/renderers';
+  import {PieChart} from 'echarts/charts';
+
+  import {
+    GridComponent,
+    LegendComponent,
+    TitleComponent,
+    TooltipComponent,
+    ToolboxComponent
+  } from 'echarts/components';
+
+  //统计图
+  use([
+    CanvasRenderer,
+    PieChart,
+    GridComponent,
+    LegendComponent,
+    TitleComponent,
+    TooltipComponent,
+    ToolboxComponent
+  ]);
+
+  import VChart from 'vue-echarts';
+
+  interface MyProps{
+    pageContext:PageContext,
+    configure:Component
+  }
+  const props = defineProps<MyProps>();
+  //自身引用
+  const thisRef = ref(null);
+  const runtimeInfo = props.configure.runtime?props.configure.runtime:{};
+  //运行时的自身详细参数
+  const runtimeStyle = runtimeInfo.style;
+  const runtimeClass = runtimeInfo.class;
+  
+  const chartOption:any = runtimeInfo.chartOption;
+
+  //自定义主题
+  const configureProps = props.configure.props?props.configure.props:{};
+  const customTheme:any = getCustomTheme(configureProps.customTheme);
+</script>

package/src/components/runtime/views/assemblys/chart/radar/radar-runtime.vue

@@ -0,0 +1,56 @@
+<template>
+  <div
+      :style="runtimeStyle"
+      :class="runtimeClass"
+      class="amb-widget-chart"
+      ref="thisRef">
+      <v-chart ref="chartRef" :theme="customTheme" :option="chartOption" autoresize />
+  </div>
+</template>
+<script lang='ts' setup>
+  import {ref} from 'vue';
+  import {getCustomTheme} from '../../../../utils/charts/chart-util';
+  import type { Component,PageContext} from '../../../../utils/interfaces/page-design-types';
+
+  import { use } from 'echarts/core';
+  import { CanvasRenderer } from 'echarts/renderers';
+  import {RadarChart} from 'echarts/charts';
+
+  import {
+    LegendComponent,
+    GridComponent,
+    TitleComponent,
+    TooltipComponent,
+    ToolboxComponent
+  } from 'echarts/components';
+
+  //统计图
+  use([
+    CanvasRenderer,
+    RadarChart,
+    GridComponent,
+    TitleComponent,
+    TooltipComponent,
+    ToolboxComponent,
+    LegendComponent
+  ]);
+
+  import VChart from 'vue-echarts';
+
+  interface MyProps{
+    pageContext:PageContext,
+    configure:Component
+  }
+  const props = defineProps<MyProps>();
+  //自身引用
+  const thisRef = ref(null);
+  const runtimeInfo = props.configure.runtime?props.configure.runtime:{};
+  //运行时的自身详细参数
+  const runtimeStyle = runtimeInfo.style;
+  const runtimeClass = runtimeInfo.class;
+
+  const chartOption:any = runtimeInfo.chartOption;
+  //自定义主题
+  const configureProps = props.configure.props?props.configure.props:{};
+  const customTheme:any = getCustomTheme(configureProps.customTheme);
+</script>

package/src/components/runtime/views/assemblys/chart/scatter/scatter-runtime.vue

@@ -0,0 +1,58 @@
+<template>
+    <div
+        :style="runtimeStyle"
+        :class="runtimeClass"
+        class="amb-widget-chart"
+        ref="thisRef">
+        <v-chart ref="chartRef" :theme="customTheme" :option="chartOption" autoresize />
+    </div>
+</template>
+<script lang='ts' setup>
+    import {ref} from 'vue';
+    import {getCustomTheme} from '../../../../utils/charts/chart-util';
+    import type { Component,PageContext} from '../../../../utils/interfaces/page-design-types';
+
+    import { use } from 'echarts/core';
+    import { CanvasRenderer } from 'echarts/renderers';
+    import {ScatterChart} from 'echarts/charts';
+
+    import {
+      GridComponent,
+      LegendComponent,
+      TitleComponent,
+      TooltipComponent,
+      ToolboxComponent,
+      DataZoomComponent
+    } from 'echarts/components';
+
+    //统计图
+    use([
+      CanvasRenderer,
+      ScatterChart,
+      GridComponent,
+      LegendComponent,
+      TitleComponent,
+      TooltipComponent,
+      ToolboxComponent,
+      DataZoomComponent
+    ]);
+
+    import VChart from 'vue-echarts';
+
+    interface MyProps{
+      pageContext:PageContext,
+      configure:Component
+    }
+    const props = defineProps<MyProps>();
+    //自身引用
+    const thisRef = ref(null);
+    const runtimeInfo = props.configure.runtime?props.configure.runtime:{};
+    //运行时的自身详细参数
+    const runtimeStyle = runtimeInfo.style;
+    const runtimeClass = runtimeInfo.class;
+
+    const chartOption:any = runtimeInfo.chartOption;
+    //自定义主题
+    const configureProps = props.configure.props?props.configure.props:{};
+    const customTheme:any = getCustomTheme(configureProps.customTheme);
+</script>

package/src/components/runtime/views/assemblys/common/common-attr-cursor.vue

@@ -0,0 +1,23 @@
+<template>
+	<el-collapse-item
+			title="鼠标手势"
+			name="cursor"
+			class="amb-design-attr-group-header">
+		<div style="padding:8px 0px 0px 0px;">
+			<el-radio-group v-model="configure.style.cursor" class="ml-4">
+				<el-radio value="default">Default</el-radio>
+				<el-radio value="pointer">Pointer</el-radio>
+			</el-radio-group>
+		</div>
+	</el-collapse-item>
+</template>
+<script lang='ts' setup>
+import {} from 'vue';
+defineProps({
+	configure:{
+		type:Object,
+		required:true
+	}
+});
+</script>
+

package/src/components/runtime/views/assemblys/common/common-attr-size.vue

@@ -0,0 +1,54 @@
+<template>
+  <el-collapse-item
+        title="尺寸"
+        name="attrSize"
+        class="amb-design-attr-group-header">
+    <div style="padding:8px 0px 0px 0px;">
+        <el-form-item label="宽度" style="margin-top:4px;">
+            <el-radio-group v-model="size.widthType">
+              <el-radio-button value="flex">24格</el-radio-button>
+              <el-radio-button value="fix">自定义</el-radio-button>
+            </el-radio-group>
+        </el-form-item>
+        <el-form-item
+            style="margin-top:-10px;"
+            v-if="size.widthType!='fix'"
+            label="栏数">
+            <el-select
+              v-model="size.flexSpan"
+              placeholder="默认"
+              clearable>
+              <el-option
+								:key="item"
+                v-for="item in gutters"
+                :label="item" :value="item"/>
+            </el-select>
+        </el-form-item>
+        <el-form-item
+            style="margin-top:-10px;"
+            v-if="size.widthType=='fix'"
+            label="宽度"
+            title="未设置时自动宽度,可设置百分比">
+            <el-input v-model="size.fixWidth" placeholder="请输入">
+            </el-input>
+        </el-form-item>
+        <el-form-item
+            label="高度" style="margin-top:-10px;margin-bottom:-15px;" title="未设置时自动高度,可设置百分比">
+            <el-input v-model="size.fixHeight" placeholder="请输入">
+            </el-input>
+        </el-form-item>
+    </div>
+  </el-collapse-item>
+</template>
+<script lang='ts' setup>
+    import {} from 'vue';
+    const props = defineProps({
+        size:{
+            type:Object,
+            required:true
+        }
+    });
+    //分栏可选项
+    const gutters = [2,4,6,8,10,12,14,16,18,20,24];
+</script>
+