Merge remote-tracking branch 'origin/master'

main
liu.shiyi 2 years ago
commit b630a8208b

@ -6,7 +6,7 @@
<parent>
<groupId>com.gccloud</groupId>
<artifactId>dataroom</artifactId>
<version>1.0.1.2023083001.Alpha</version>
<version>1.0.1.2023090501.Alpha</version>
</parent>
<artifactId>dataroom-core</artifactId>

@ -151,6 +151,11 @@ public interface PageDesignConstant {
* 线
*/
String FLY_MAP = "flyMap";
/**
* Tab
*/
String TAB_CHART = "chartTab";
}
}

@ -0,0 +1,43 @@
package com.gccloud.dataroom.core.module.chart.components;
import com.gccloud.dataroom.core.constant.PageDesignConstant;
import com.gccloud.dataroom.core.module.chart.bean.Chart;
import io.swagger.annotations.ApiModelProperty;
import lombok.Data;
import java.util.List;
/**
* tab
* @author hongyang
* @version 1.0
* @date 2023/8/24 17:03
*/
@Data
public class ChartTabChart extends Chart{
@ApiModelProperty(notes = "类型")
private String type = PageDesignConstant.BigScreen.Type.TAB_CHART;
@ApiModelProperty(notes = "个性化")
private Customize customize = new Customize();
@Data
public static class Customize {
@ApiModelProperty(notes = "组件tab列表")
private List tabList;
@ApiModelProperty(notes = "字体大小")
private Integer fontSize;
@ApiModelProperty(notes = "字体粗细")
private Integer fontWeight;
@ApiModelProperty(notes = "字体颜色")
private String color;
}
}

@ -16,6 +16,9 @@ import java.util.List;
@Data
public class CustomComponentChart extends Chart {
@ApiModelProperty(notes = "父编码")
private String parentCode;
@ApiModelProperty(notes = "版本")
private String version;

@ -6,7 +6,7 @@
<parent>
<groupId>com.gccloud</groupId>
<artifactId>dataroom</artifactId>
<version>1.0.1.2023083001.Alpha</version>
<version>1.0.1.2023090501.Alpha</version>
</parent>
<artifactId>dataroom-server</artifactId>
@ -29,7 +29,7 @@
<dependency>
<groupId>com.gccloud</groupId>
<artifactId>dataroom-core</artifactId>
<version>1.0.1.2023083001.Alpha</version>
<version>1.0.1.2023090501.Alpha</version>
</dependency>
<dependency>

@ -12,7 +12,7 @@
<groupId>com.gccloud</groupId>
<artifactId>dataroom</artifactId>
<version>1.0.1.2023083001.Alpha</version>
<version>1.0.1.2023090501.Alpha</version>
<packaging>pom</packaging>
<description>基于G2Plot、Echarts的大屏设计服务端具备设计、预览能力支持MySQL、Oracle、PostgreSQL、Groovy等数据集接入

@ -40,7 +40,6 @@ export default {
// eslint-disable-next-line prefer-const, no-unused-vars
let title = ''
let chartType = ''
// eslint-disable-next-line prefer-const, no-unused-vars
let data = []
let g2Plots=g2Plot
@ -56,7 +55,6 @@ export default {
setting,
echarts,
g2Plots,
chartType
}
},
set (val) {}
@ -194,17 +192,17 @@ export default {
<style lang="scss" scoped>
.bs-remote-preview {
// position: absolute;
height: 88%;
position: absolute;
min-height: 100%;
min-width: 100%;
overflow: hidden;
box-sizing: border-box;
.remote-preview-inner-wrap {
// position: absolute;
height: 100%;
position: absolute;
height: calc(100% - 40px);
width: 100%;
// overflow: auto;
overflow: auto;
padding: 20px;
background-color: var(--bs-background-1);
}

@ -0,0 +1,186 @@
/*
* @description: 此处是业务组件的代码案例
* @Date: 2023-06-06 15:45:07
*/
// vue 组件片段
export const defaultEchartsVueContent = `
<!-- 这是一个代码案例 -->
<template>
<div
:id="chatId"
style="width: 100%;height: 100%"
/>
</template>
<script>
export default {
name: 'TestA',
components: {
},
// 业务组件提供的props
props: {
config: {
type: Object,
default: () => ({})
}
},
data () {
return {
chart: null,
}
},
// 计算属性
computed: {
chatId(){
return 'echarts' + this.config.code
}
},
methods: {
//响应式变化组件大小方法,无需改动
onResize () {
this.chart.resize({
animation: {
duration: 300,
easing: 'linear'
// delay: 500,
}
})
},
// 初始化图表
newChart (config) {
let option = config.option
const xList=config.option.data.map(item=> item[config.option.xField])
const yList=config.option.data.map(item=> item[config.option.yField])
option.xAxis.data=xList
option.series[0].data=yList
const dom = document.getElementById(this.chatId)
this.chart = config.echarts.init(dom)
this.chart.setOption(option,true)
},
},
mounted(){
this.newChart(this.config)
//响应式变化组件大小,无需改动
const dragSelect = document.querySelector("#"+this.chatId)
let pre = Date.now()
const wait = 300
const resizeObserver = new ResizeObserver(entries => {
const now = Date.now()
if (now - pre >= wait) {
setTimeout(() => {
this.onResize()
}, wait)
pre = Date.now()
}
})
resizeObserver.observe(dragSelect)
},
}
</script>
<style lang="scss" scoped>
// 此处书写样式支持scss
</style>
`
// 配置 片段
export const defaultEchartsSettingContent = `
// 这是一个配置案例
// 组件备注名称
const title = 'echarts案例'
// 右侧配置项
const setting = [
{
label: '维度',
// 设置组件类型, select / input / colorPicker
type: 'select',
// 字段
field: 'xField',
optionField: 'xField', // 对应options中的字段
// 是否多选
multiple: false,
// 绑定的值
value: '',
// tab页。 data: 数据, custom: 自定义
tabName: 'data'
},
{
label: '指标',
// 设置组件类型
type: 'select',
// 字段
field: 'yField',
// 对应options中的字段
optionField: 'yField',
// 是否多选
multiple: false,
value: '',
tabName: 'data'
},
{
label: 'x轴类型',
type: 'input',
field: 'xAxis_type',
optionField: 'xAxis.type',
value: 'category',
tabName: 'custom',
groupName: 'xAxis'
},
{
label: 'y轴类型',
type: 'input',
field: 'yAxis_type',
optionField: 'yAxis.type',
value: 'value',
tabName: 'custom',
groupName: 'yAxis'
}
]
// 模拟数据
const data = [
{ Date: '2010-01', scales: 1998 },
{ Date: '2010-02', scales: 1850 },
{ Date: '2010-03', scales: 1720 },
{ Date: '2010-04', scales: 1818 },
{ Date: '2010-05', scales: 1920 },
{ Date: '2010-06', scales: 1802 },
{ Date: '2010-07', scales: 1945 },
{ Date: '2010-08', scales: 1856 },
{ Date: '2010-09', scales: 2107 },
{ Date: '2010-10', scales: 2140 }
]
const option = {
// 数据将要放入到哪个字段中
dataKey: 'data',
data,
color: '',
appendPadding: [16, 16, 16, 16], // 设置图标的边距
xField: 'Date',
yField: 'scales',
smooth: true,
xAxis: {
type:'category',
data: []
},
yAxis: {
type: 'value'
},
series:[
{
data: [],
type:'line'
}
]
}
export default {
title,
option,
setting
}
`

@ -9,7 +9,7 @@ export const defaultG2VueContent = `
<template>
<div
:id="chatId"
style="width: 100%;height: 300px"
style="width: 100%;height: 100%"
/>
</template>
<script>
@ -264,7 +264,7 @@ const setting = [
type: 'switch',
field: 'xAxis_label_autoRotate',
optionField: 'xAxis.label.autoRotate',
value: false,
value: true,
active: true,
inactive: false,
tabName: 'custom',
@ -275,7 +275,7 @@ const setting = [
type: 'switch',
field: 'xAxis_label_autoHide',
optionField: 'xAxis.label.autoHide',
value: false,
value: true,
active: true,
inactive: false,
tabName: 'custom',

@ -28,7 +28,7 @@
<div class="code-tab-header">
<div class="code-tab-left">
<div class="code-tab">组件模板</div>
<div class="code-tab-btn">
<div class="code-tab-btn" @click="change('echarts')">
echarts组件
</div>
<div class="code-tab-btn" @click="change('g2')">
@ -130,6 +130,7 @@ import CusBtn from 'data-room-ui/BigScreenDesign/BtnLoading'
import BizComponentPreview from './Preview'
import { getBizComponentInfo, updateBizComponent } from 'data-room-ui/js/api/bigScreenApi'
import { defaultSettingContent, defaultVueContent } from './config/defaultBizConfig'
import { defaultEchartsSettingContent, defaultEchartsVueContent } from './config/defaultEchartsConfig'
import { defaultG2SettingContent, defaultG2VueContent } from './config/defaultG2Config'
import { codemirror } from 'vue-codemirror'
import 'codemirror/lib/codemirror.css'
@ -238,6 +239,9 @@ export default {
}else if(val=='base'){
this.form.settingContent=defaultSettingContent
this.form.vueContent=defaultVueContent
}else if(val=='echarts'){
this.form.settingContent= defaultEchartsSettingContent
this.form.vueContent=defaultEchartsVueContent
}
},
change(val) {

@ -321,7 +321,7 @@ const setting = [
type: 'switch',
field: 'xAxis_label_autoRotate',
optionField: 'xAxis.label.autoRotate',
value: false,
value: true,
active: true,
inactive: false,
tabName: 'custom',
@ -332,7 +332,7 @@ const setting = [
type: 'switch',
field: 'xAxis_label_autoHide',
optionField: 'xAxis.label.autoHide',
value: false,
value: true,
active: true,
inactive: false,
tabName: 'custom',

@ -312,7 +312,7 @@ const setting = [
type: 'switch',
field: 'xAxis_label_autoRotate',
optionField: 'xAxis.label.autoRotate',
value: false,
value: true,
active: true,
inactive: false,
tabName: 'custom',
@ -323,7 +323,7 @@ const setting = [
type: 'switch',
field: 'xAxis_label_autoHide',
optionField: 'xAxis.label.autoHide',
value: false,
value: true,
active: true,
inactive: false,
tabName: 'custom',

@ -212,7 +212,7 @@ const setting = [
type: 'switch',
field: 'xAxis_label_autoRotate',
optionField: 'xAxis.label.autoRotate',
value: false,
value: true,
active: true,
inactive: false,
tabName: 'custom',
@ -223,7 +223,7 @@ const setting = [
type: 'switch',
field: 'xAxis_label_autoHide',
optionField: 'xAxis.label.autoHide',
value: false,
value: true,
active: true,
inactive: false,
tabName: 'custom',

@ -338,7 +338,7 @@ const setting = [
type: 'switch',
field: 'xAxis_label_autoHide',
optionField: 'xAxis.label.autoHide',
value: false,
value: true,
active: true,
inactive: false,
tabName: 'custom',

@ -293,7 +293,7 @@ const setting = [
type: 'switch',
field: 'xAxis_label_autoRotate',
optionField: 'xAxis.label.autoRotate',
value: false,
value: true,
active: true,
inactive: false,
tabName: 'custom',

@ -289,7 +289,7 @@ const setting = [
type: 'switch',
field: 'xAxis_label_autoRotate',
optionField: 'xAxis.label.autoRotate',
value: false,
value: true,
active: true,
inactive: false,
tabName: 'custom',

@ -345,7 +345,7 @@ const setting = [
type: 'switch',
field: 'xAxis_label_autoRotate',
optionField: 'xAxis.label.autoRotate',
value: false,
value: true,
active: true,
inactive: false,
tabName: 'custom',

@ -459,7 +459,7 @@ const setting = [
type: 'switch',
field: 'yAxis_label_autoRotate',
optionField: 'yAxis.label.autoRotate',
value: false,
value: true,
active: true,
inactive: false,
tabName: 'custom',

@ -331,7 +331,7 @@ const setting = [
type: 'switch',
field: 'xAxis_label_autoRotate',
optionField: 'xAxis.label.autoRotate',
value: false,
value: true,
active: true,
inactive: false,
tabName: 'custom',

@ -331,7 +331,7 @@ const setting = [
type: 'switch',
field: 'xAxis_label_autoRotate',
optionField: 'xAxis.label.autoRotate',
value: false,
value: true,
active: true,
inactive: false,
tabName: 'custom',

@ -252,7 +252,7 @@ const setting = [
type: 'switch',
field: 'xAxis_label_autoRotate',
optionField: 'xAxis.label.autoRotate',
value: false,
value: true,
active: true,
inactive: false,
tabName: 'custom',

@ -331,7 +331,7 @@ const setting = [
type: 'switch',
field: 'xAxis_label_autoRotate',
optionField: 'xAxis.label.autoRotate',
value: false,
value: true,
active: true,
inactive: false,
tabName: 'custom',

@ -338,7 +338,7 @@ const setting = [
type: 'switch',
field: 'xAxis_label_autoRotate',
optionField: 'xAxis.label.autoRotate',
value: false,
value: true,
active: true,
inactive: false,
tabName: 'custom',

@ -296,7 +296,7 @@ const setting = [
type: 'switch',
field: 'xAxis_label_autoRotate',
optionField: 'xAxis.label.autoRotate',
value: false,
value: true,
active: true,
inactive: false,
tabName: 'custom',

@ -242,7 +242,7 @@ const setting = [
type: 'switch',
field: 'xAxis_label_autoRotate',
optionField: 'xAxis.label.autoRotate',
value: false,
value: true,
active: true,
inactive: false,
tabName: 'custom',

Loading…
Cancel
Save