super-page-runtime 1.0.13 → 1.0.14

package/src/components/runtime/views/assemblys/button/dropdown/dropdown-runtime.vue

@@ -0,0 +1,85 @@
+<template>
+	<el-dropdown
+			:class="runtimeClass" 
+			:style="runtimeStyle"
+			:placement="designProperty.placement"
+			:split-button="designProperty.splitButton"
+			:disabled="designProperty.state === 'disabled'"
+			:type="designProperty.buttonType"
+			:size="designProperty.size"
+			:trigger="designProperty.trigger">
+		<template v-if="designProperty.triggerElement === 'button'">
+			<el-button
+				v-if="!designProperty.splitButton"
+				:size="designProperty.size"
+				:type="designProperty.buttonType">
+				{{designProperty.title}}
+			</el-button>
+			<span v-else>{{designProperty.title}}</span>
+		</template>
+		<el-text v-else>
+			{{designProperty.title}}
+			<el-icon>
+				<ArrowDown />
+			</el-icon>
+		</el-text>
+		<template #dropdown>
+			<el-dropdown-menu>
+				<el-dropdown-item v-for="(item,index) in listOptions" :key="item">{{item.label}}</el-dropdown-item>
+			</el-dropdown-menu>
+		</template>
+	</el-dropdown>
+</template>
+<script lang='ts' setup>
+	import { ArrowDown } from '@element-plus/icons-vue'
+	import {ref,computed} from 'vue';
+	import type { Component,PageContext} from '../../../../utils/interfaces/page-design-types';
+	import {formatVariableValue} from '../../../../utils/page-helper-util';
+
+	//定义的属性对象
+    interface MyProps{
+        //页面对象
+        pageContext:PageContext,
+        configure:Component
+    }
+	const props = defineProps<MyProps>();
+	//运行时信息
+	const runtimeInfo:any = props.configure.runtime?props.configure.runtime:{};
+	const runtimeStyle = runtimeInfo.style;
+	const runtimeClass = runtimeInfo.class;
+	const designProperty:any =  runtimeInfo.props?runtimeInfo.props:{};
+	
+	//菜单数据
+	let listOptions:any = null;
+	//检查数据源
+	const dataOrigin = props.configure.props&&props.configure.props.dataOrigin?props.configure.props.dataOrigin:{};
+	const valueType = dataOrigin.optionValueSetType;
+	//绑定变量时，重新设置
+	if(valueType=='variable'){
+		listOptions = computed(()=>{
+			let options:any;
+			const menuValues:any = formatVariableValue(props.pageContext,designProperty.menuField);
+			if(menuValues&&Array.isArray(menuValues)){
+				options = menuValues;
+				for(let i=0;i<options.length;i++){
+					const option = options[i];
+					if(!option.label){
+						option.label = i+1;
+					}
+				}
+			}else{
+				const strs = (menuValues?(menuValues+''):'').trim().split(",");
+				options = [];
+				for(let str of strs){
+					options.push({
+						value:str,
+						label:str
+					});
+				}
+			}
+			return options;
+		});
+	}else{
+		listOptions = ref(designProperty.options?designProperty.options:[]);
+	}
+</script>

package/src/components/runtime/views/assemblys/chart/column-line/column-line-runtime.vue

@@ -0,0 +1,61 @@
+<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 {LineChart,BarChart} from 'echarts/charts';
+
+    import {
+      GridComponent,
+      LegendComponent,
+      TitleComponent,
+      TooltipComponent,
+      ToolboxComponent,
+      DataZoomComponent
+    } from 'echarts/components';
+
+    //统计图
+    use([
+      CanvasRenderer,
+      LineChart,
+      GridComponent,
+      LegendComponent,
+      TitleComponent,
+      TooltipComponent,
+      BarChart,
+      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;
+    console.log("chartOption-runtime",chartOption)
+
+    //自定义主题
+    const configureProps = props.configure.props?props.configure.props:{};
+    const customTheme:any = getCustomTheme(configureProps.customTheme);
+</script>

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

@@ -0,0 +1,32 @@
+<template>
+    <el-collapse-item
+            title="辅助功能"  
+            name="propsAssistant"
+            class="amb-design-attr-group-header">
+        <div style="padding:8px 0px 0px 0px;margin-bottom:-35px;">
+        <el-row>
+            <el-col :span=12>
+            <el-form-item
+                    label="下载按钮">
+                    <el-switch v-model="configure.props.enableDownloadBtn"/>
+            </el-form-item>
+            </el-col>
+            <el-col :span=12>
+            <el-form-item
+                label="数据按钮">
+                <el-switch v-model="configure.props.enableDataBtn"/>
+            </el-form-item>
+            </el-col>
+        </el-row>
+        </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-attr-base.vue

@@ -0,0 +1,60 @@
+<template>
+    <el-collapse-item
+              title="基本"  
+              name="propsBase"
+              class="amb-design-attr-group-header">
+        <div style="padding:8px 0px 0px 0px;">
+            <el-form-item label="组件类型" style="margin-top:4px;">
+            <el-text>{{configure.label}}({{configure.name}})</el-text>
+            </el-form-item>
+            <el-form-item
+                label="组件名" style="margin-top:-10px;">
+                <el-text>{{configure.props.refId}}</el-text>
+            </el-form-item>
+            <el-form-item
+                label="主标题" style="margin-top:-10px">
+                <el-input v-model="configure.props.title" placeholder="请输入">
+                </el-input>
+            </el-form-item>
+            <el-form-item
+                label="副标题" style="margin-top:-10px">
+                <el-input v-model="configure.props.subTitle" placeholder="请输入">
+                </el-input>
+            </el-form-item>
+            <el-form-item
+                v-show="chartType=='columnLine'"
+                label="条形图" style="margin-top:-10px">
+                <el-switch v-model="configure.props.isBar"/>
+            </el-form-item>
+            <el-form-item
+                label="主题" style="margin-top:-10px">
+                <el-radio-group v-model="configure.props.theme">
+                <el-radio-button value="default">默认</el-radio-button>
+                <el-radio-button value="dark">暗黑</el-radio-button>
+                </el-radio-group>
+            </el-form-item>
+            <el-form-item
+                label="定时刷新" style="margin-top:-10px">
+                <el-input v-model="configure.props.refreshInterval">
+                    <template #suffix>
+                    秒
+                    </template>
+                </el-input>
+            </el-form-item>
+            <el-form-item
+                label="状态" style="margin-top:-10px;margin-bottom:-10px;">
+                <el-radio-group v-model="configure.props.state">
+                <el-radio-button value="show">显示</el-radio-button>
+                <el-radio-button value="hide">隐藏</el-radio-button>
+                </el-radio-group>
+            </el-form-item>
+        </div>
+    </el-collapse-item>
+</template>
+<script lang='ts' setup>
+    defineProps({
+        configure:Object,
+        chartType:Object
+    });
+</script>
+

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

@@ -0,0 +1,39 @@
+<template>
+    <el-collapse-item
+            title="数据钻取"  
+            name="propsDrill"
+            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.props.enableDrill"/>
+            </el-form-item>
+            <el-form-item
+                v-show="configure.props.enableDrill"
+                label="钻取顺序" style="margin-top:20px;margin-bottom:10px;">
+                <el-input 
+                v-model="configure.props.drillOrders"
+                placeholder="请输入"></el-input>
+                <el-text type="success" size="small">逗号隔开,第一层为统计纬度</el-text>
+            </el-form-item>
+            <el-form-item
+                v-show="configure.props.enableDrill"
+                label="显示位置" style="margin-top:-10px;margin-bottom:-15px;">
+                <el-radio-group v-model="configure.props.drillLabelAlign">
+                    <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>
+    defineProps({
+        configure:{
+            required:true,
+            type:Object
+        }
+    });
+</script>
+

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

@@ -0,0 +1,104 @@
+<template>
+    <el-collapse-item
+              title="统计纬度"  
+              name="propsGroup"
+              class="amb-design-attr-group-header">
+        <div style="padding:8px 0px 0px 0px;">
+        <el-radio-group v-model="configure.props.groupSource">
+            <el-form-item style="margin-top:4px;">
+            <template #label>
+                <el-radio value="fix">固定维度</el-radio>
+            </template>
+            <el-input v-model="configure.props.groupFix"  :disabled="configure.props.groupSource!='fix'"></el-input>
+            <el-text v-show="configure.props.groupSource=='fix'" type="success" size="small">多维度用逗号隔开</el-text>
+            </el-form-item>
+            <el-form-item style="margin-top:-10px;">
+            <template #label>
+                <el-radio value="variable">变量维度</el-radio>
+            </template>
+            <el-cascader 
+                v-model="configure.props.groupVariable"
+                :disabled="configure.props.groupSource!='variable'"
+                :options="variableOptions" 
+                :props="variableProps"
+                placeholder="请选择"
+                clearable />
+            </el-form-item>
+        </el-radio-group>
+        <el-form-item
+            label="显示位置" style="margin-top:-10px;">
+            <el-select
+                v-model="configure.props.groupPosition"
+                placeholder="默认"
+                clearable>
+                <el-option label="居左" value="left"></el-option>
+                <el-option label="居中" value="center"></el-option>
+                <el-option label="居右" value="right"></el-option>
+            </el-select>
+        </el-form-item>
+        <el-form-item
+            v-show="configure.props.groupPosition"
+            label="显示组件" style="margin-top:-10px;">
+                <el-radio-group v-model="configure.props.groupComponent">
+                <el-radio-button value="group">选项组</el-radio-button>
+                <el-radio-button value="radio">单选</el-radio-button>
+                <el-radio-button value="checkbox">多选</el-radio-button>
+            </el-radio-group>
+        </el-form-item>
+        <el-form-item
+            label="多维度显示" style="margin-top:-10px;margin-bottom:-15px;">
+                <el-radio-group v-model="configure.props.mulGroupShow">
+                <el-radio-button value="space">空格</el-radio-button>
+                <el-radio-button value="break">换行</el-radio-button>
+                </el-radio-group>
+        </el-form-item>
+        <!--<el-form-item
+            label="维度参数名" style="margin-top:-10px;margin-bottom:-15px;">
+            <el-input v-model="configure.props.groupName" placeholder="请输入"></el-input>
+            <el-text type="success" size="small">可为空,默认参数名为:groupBy</el-text>  
+        </el-form-item>-->
+        </div>
+    </el-collapse-item>
+</template>
+<script lang='ts' setup>
+    defineProps({
+        configure:{
+          type:Object,
+          required:true
+        }
+    });
+    //可选变量维度
+    const variableOptions = [
+      {
+        value: 'dataModel',
+        label: '数据模型',
+        children: [
+          {
+            value: 'field1',
+            label: '字段1'
+          },
+          {
+            value: 'field2',
+            label: '字段2'
+          }
+        ]
+      },{
+        value: 'customParam',
+        label: '自定义',
+        children: [
+          {
+            value: 'field1',
+            label: '字段1'
+          },
+          {
+            value: 'field2',
+            label: '字段2'
+          }
+        ]
+      }];
+    //可选变量属性
+    const variableProps = {
+      multiple: true
+    };
+</script>
+

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

@@ -0,0 +1,145 @@
+<template>
+    <el-collapse-item
+            title="系列列表"  
+            name="seriesList"
+            class="amb-design-attr-group-header">
+        <div style="padding:8px 0px 0px 0px;">
+            <el-table :data="configure.items" style="width: 100%;margin-bottom:-10px;" class="panelTable">
+                <el-table-column label="" width="32">
+                <template #default="scope">
+                    <div style="text-align:center;margin:0px -8px;padding-top:4px;padding-left:2px;">
+                    <el-icon size="14" style="cursor: pointer;" @click="moveTop(scope.row)"><Top /></el-icon>
+                    <el-icon size="14" style="margin-left:2px;cursor: pointer;" @click="moveToBottom(scope.row)"><Bottom /></el-icon>
+                    </div>
+                </template>
+                </el-table-column>
+                <el-table-column prop="label" label="名称" width="130">
+                <template #default="scope">
+                    <el-input
+                    v-model="scope.row.props.title"
+                    size="small"></el-input>
+                </template>
+                </el-table-column>
+                <el-table-column label="操作" width="90">
+                <template #default="scope">
+                    <el-icon size="14" style="color:#5893EF;cursor: pointer;font-weight:bold;margin-right:8px;"  @click="addSeries(scope.row)">
+                    <Plus />
+                    </el-icon>
+                    <el-icon size="14" style="color:#5893EF;cursor: pointer;"  @click="deleteSeries(scope.row)">
+                    <Delete />
+                    </el-icon>
+                </template>
+                </el-table-column>
+            </el-table>
+        </div>
+    </el-collapse-item>
+</template>
+<script lang='ts' setup>
+    import {
+      Plus,
+      Delete,
+      Top,
+      Bottom
+    } from '@element-plus/icons-vue';
+    const props = defineProps({
+        configure:{
+          type:Object,
+          required:true
+        },
+        defaultType:{
+          type:String,
+          default:''
+        }
+    });
+
+    /**
+     * 向上移动
+     * @param rowItem 
+     */
+     function moveTop(rowItem:any){
+        let sortIndex:any = -1;
+        const itemLen = props.configure.items.length;
+        for(let index=0;index<itemLen;index++){
+          if(props.configure.items[index].index==rowItem.index){
+            sortIndex = index;
+            break;
+          }
+        }
+        if(sortIndex<1){
+          return;
+        }
+        const items = props.configure.items;
+        [items[sortIndex-1],items[sortIndex]] = [items[sortIndex],items[sortIndex-1]];
+    }
+
+    /**
+     * 向下移动
+     * @param rowItem 
+     */
+     function moveToBottom(rowItem:any){
+        let sortIndex:any = -1;
+        const itemLen = props.configure.items.length;
+        for(let index=0;index<itemLen;index++){
+          if(props.configure.items[index].index==rowItem.index){
+            sortIndex = index;
+            break;
+          }
+        }
+        if(sortIndex==-1||props.configure.items.length==sortIndex+1){
+          return;
+        }
+        const items = props.configure.items;
+        [items[sortIndex],items[sortIndex+1]] = [items[sortIndex+1],items[sortIndex]];
+    }
+
+    /**
+     * 添加系列
+     */
+    function addSeries(rowItem:any){
+        //查询最大的index
+        let maxIndex = -1;
+        let currentIndex = -1;
+        props.configure.items.find((item:any,index:any)=>{
+          if(item.index==rowItem.index){
+            currentIndex = index;
+          }
+          if(item.index>maxIndex){
+            maxIndex = item.index;
+          }
+        });
+        if(currentIndex>-1){
+          props.configure.items.splice(currentIndex+1,0,{
+            type:props.defaultType?props.defaultType:'bar',//默认柱状图
+            index:maxIndex+1,
+            props:{
+              title:'系列'+(maxIndex+1)
+            },
+            style:{yaxisLeft:{},yaxisRight:{}}
+          });
+        }
+    }
+
+    /**
+     * 删除系列
+     */
+     function deleteSeries(rowItem:any){
+        if(props.configure.items.length==1){
+          alert("必须保留一个系列!");
+          return;
+        }
+        if(!confirm("确定要删除吗?")){
+          return;
+        }
+        let delIdnex:any = -1;
+        for(let index in props.configure.items){
+          if(props.configure.items[index].index==rowItem.index){
+            delIdnex = index;
+            break;
+          }
+        }
+        if(delIdnex>-1){
+          props.configure.items.splice(delIdnex,1);
+        }
+    }
+</script>
+

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

@@ -0,0 +1,119 @@
+<template>
+    <el-collapse-item
+              title="排序"  
+              name="propsSort"
+              class="amb-design-attr-group-header">
+        <div style="padding:8px 0px 0px 0px;">
+            <el-form-item
+                label="排序对象" style="margin-top:4px;margin-bottom:10px">
+                <el-cascader
+                    v-model="configure.props.orderByTarget"
+                    :options="variableOptions" 
+                    :props="variableProps"
+                    placeholder="请选择"
+                    clearable />
+            </el-form-item>
+            <el-radio-group v-model="configure.props.orderSource">
+            <el-form-item style="margin-top:-10px;">
+                <template #label>
+                <el-radio value="fix">排序方式</el-radio>
+                </template>
+                <el-select
+                style="width:90px;"
+                v-model="configure.props.orderFix"
+                :disabled="configure.props.orderSource!='fix'"
+                placeholder="默认" 
+                clearable>
+                <el-option label="升序" value="asc"></el-option>
+                <el-option label="降序" value="desc"></el-option>
+                </el-select>
+            </el-form-item>
+            <el-form-item style="margin-top:-10px;">
+                <template #label>
+                <el-radio value="variable">排序变量</el-radio>
+                </template>
+                <el-cascader 
+                v-model="configure.props.orderVariable"
+                :disabled="configure.props.orderSource!='variable'"
+                :options="variableOptions" 
+                :props="variableProps"
+                placeholder="请选择"
+                clearable />
+                <el-text v-show="configure.props.orderSource=='variable'" type="success" size="small">将根据此变量排序</el-text>
+            </el-form-item>
+            </el-radio-group>
+            <el-radio-group v-model="configure.props.itemNumSource">
+            <el-form-item style="margin-top:-10px;">
+                <template #label>
+                <el-radio value="fix">显示数量</el-radio>
+                </template>
+                <el-input 
+                v-model="configure.props.itemNumFix" 
+                :disabled="configure.props.itemNumSource!='fix'"
+                placeholder="请输入"></el-input>
+            </el-form-item>
+            <el-form-item style="margin-top:-10px;">
+                <template #label>
+                <el-radio value="variable">数量变量</el-radio>
+                </template>
+                <el-cascader 
+                v-model="configure.props.itemNumVariable"
+                :disabled="configure.props.itemNumSource!='variable'"
+                :options="variableOptions" 
+                :props="variableProps"
+                placeholder="请选择"
+                clearable />
+                <el-text v-show="configure.props.itemNumSource=='variable'" type="success" size="small">将根据此变量控制显示数量</el-text>
+            </el-form-item>
+            </el-radio-group>
+            <el-form-item label="超出时别名" style="margin-top:-10px;margin-bottom:-15px;">
+                <el-input 
+                v-model="configure.props.overItemAlias"
+                placeholder="请输入"></el-input>
+                <el-text type="success" size="small">未设置时不显示超出数量的数据项</el-text>
+            </el-form-item>
+        </div>
+    </el-collapse-item>
+</template>
+<script lang='ts' setup>
+    defineProps({
+        configure:{
+          type:Object,
+          required:true
+        }
+    });
+    //可选变量维度
+    const variableOptions = [
+      {
+        value: 'dataModel',
+        label: '数据模型',
+        children: [
+          {
+            value: 'field1',
+            label: '字段1'
+          },
+          {
+            value: 'field2',
+            label: '字段2'
+          }
+        ]
+      },{
+        value: 'customParam',
+        label: '自定义',
+        children: [
+          {
+            value: 'field1',
+            label: '字段1'
+          },
+          {
+            value: 'field2',
+            label: '字段2'
+          }
+        ]
+      }];
+    //可选变量属性
+    const variableProps = {
+      multiple: true
+    };
+</script>
+

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

@@ -0,0 +1,28 @@
+<template>
+    <el-collapse-item
+              title="自定义配置项"  
+              name="styleCustom"
+              class="amb-design-attr-group-header">
+        <div style="padding:8px 0px 0px 0px;">
+        <el-form label-position="top">
+            <el-form-item style="margin-top:4px;margin-bottom:-15px;">
+                <el-input
+                    v-model="configure.style.customAttr"
+                    :rows="10"
+                    type="textarea"
+                    placeholder='title:{link:""},最外层可不需要大括号'
+                    />
+            </el-form-item>
+        </el-form>
+        </div>
+    </el-collapse-item>
+</template>
+<script lang='ts' setup>
+    defineProps({
+        configure:{
+            type:Object,
+            required:true
+        }
+    });
+</script>
+