super-page-runtime 1.0.15 → 1.0.16

package/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/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/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/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/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>
+

package/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/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/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>
+