初始版本提交
This commit is contained in:
yaoyn
406
src/utils/helper/appDataDesignHelper.ts
Normal file
406
src/utils/helper/appDataDesignHelper.ts
Normal file
@ -0,0 +1,406 @@
|
||||
import { LocationType } from '/@/enums/desktop';
|
||||
import { DesktopInfoItem } from '/@/model/mobileDesign/designer';
|
||||
|
||||
/**
|
||||
* 构建app数据设计页代码
|
||||
* @param model
|
||||
* @param _tableInfo
|
||||
* @returns
|
||||
*/
|
||||
export function buildAppDataCode(model: Array<DesktopInfoItem>): string {
|
||||
const compMap: any[] = [];
|
||||
let importCode = '';
|
||||
let configCode = '';
|
||||
let code = `<template>
|
||||
<view class="data-display">
|
||||
`;
|
||||
if (model.length) {
|
||||
model.forEach((o, i) => {
|
||||
const key = o.type;
|
||||
if (!compMap.includes(key)) compMap.push(key);
|
||||
const config: any = o.config;
|
||||
const apiConfig = config.apiConfig
|
||||
? `apiConfig: {
|
||||
name: "${config.apiConfig.name}",
|
||||
method: "${config.apiConfig.method}",
|
||||
path: "${config.apiConfig.path}",
|
||||
requestParamsConfigs: ${JSON.stringify(config.apiConfig.requestParamsConfigs) || []},
|
||||
requestHeaderConfigs: ${JSON.stringify(config.apiConfig.requestHeaderConfigs) || []},
|
||||
requestBodyConfigs:${JSON.stringify(config.apiConfig.requestBodyConfigs) || []}
|
||||
},`
|
||||
: '';
|
||||
const idx = i > 0 ? `_${i}` : '';
|
||||
switch (key) {
|
||||
case 'Dashboard':
|
||||
code += `<Dashboard :config="dashboardConfig${idx}"></Dashboard>
|
||||
`;
|
||||
configCode += `const dashboardConfig${idx} = ref({
|
||||
${apiConfig}
|
||||
numColor: "${config.numColor}",
|
||||
labelColor: "${config.labelColor}",
|
||||
dashboard: ${JSON.stringify(config.dashboard) || []}
|
||||
});
|
||||
`;
|
||||
break;
|
||||
case 'Banner':
|
||||
code += `<view style="margin: 0 -10px 10px;">
|
||||
<Banner :config="bannerConfig${idx}"></Banner>
|
||||
</view>
|
||||
`;
|
||||
|
||||
const imgs: string[] = config.imgs.map((k) => {
|
||||
return k.url;
|
||||
});
|
||||
configCode += `const bannerConfig${idx} = ref({
|
||||
height: ${o.h},
|
||||
imgs: ${JSON.stringify(imgs)},
|
||||
});
|
||||
`;
|
||||
break;
|
||||
case 'ChartLine':
|
||||
code += `<LineChart :config="lineConfig${idx}"></LineChart>
|
||||
`;
|
||||
const Llegend = getLegend(config.legend);
|
||||
const dataList: any[] = [];
|
||||
config.dataList.forEach((k) => {
|
||||
const yAxis: any[] = [];
|
||||
config.yAxis.forEach((j, i) => {
|
||||
yAxis.push({
|
||||
type: 'value', //value数值,categories类别
|
||||
position: j.position,
|
||||
title: j.name,
|
||||
titleFontColor: j.nameTextStyle.color,
|
||||
titleFontSize: j.nameTextStyle.fontSize,
|
||||
// min: j.min,
|
||||
// max: j.max,
|
||||
format: i === 0 ? 'lineYAxis' : 'lineYAxisTwo',
|
||||
axisFormat: j.axisLabel.formatter,
|
||||
fontColor: j.axisLabel.color,
|
||||
axisLine: j.axisLine.show,
|
||||
axisLineColor: j.axisLine.lineStyle.color,
|
||||
});
|
||||
});
|
||||
|
||||
dataList.push({
|
||||
title: k.title,
|
||||
valueKey: k.valueKey,
|
||||
apiConfig: k.apiConfig,
|
||||
indicator: k.indicator,
|
||||
options: {
|
||||
extra: {
|
||||
mix: {
|
||||
column: {
|
||||
seriesGap: 120,
|
||||
},
|
||||
area: {
|
||||
gradient: true,
|
||||
opacity: 6,
|
||||
},
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
data: yAxis,
|
||||
},
|
||||
xAxis: {
|
||||
title: config.xAxis[0].name,
|
||||
titleFontColor: config.xAxis[0].nameTextStyle.color,
|
||||
titleFontSize: config.xAxis[0].nameTextStyle.fontSize,
|
||||
fontColor: config.xAxis[0].axisLabel.color,
|
||||
axisLine: config.xAxis[0].axisLine.show,
|
||||
axisLineColor: config.xAxis[0].axisLine.lineStyle.color,
|
||||
format: 'lineXAxis',
|
||||
axisFormat: config.xAxis[0].axisLabel.formatter,
|
||||
},
|
||||
dataLabel: config.label.show,
|
||||
legend: Llegend,
|
||||
},
|
||||
});
|
||||
});
|
||||
configCode += `const lineConfig${idx} = ref({
|
||||
height: ${o.h},
|
||||
title: "${config.title}",
|
||||
condition: ${JSON.stringify(config.condition)},
|
||||
count: ${JSON.stringify(config.count)},
|
||||
dataList:${JSON.stringify(dataList)},
|
||||
line: ${JSON.stringify(config.line)},
|
||||
fontSize:${config.label.fontSize},
|
||||
fontColor:"${config.label.color}",
|
||||
});
|
||||
`;
|
||||
break;
|
||||
case 'Pie':
|
||||
code += `<PieChart :config="pieConfig${idx}"></PieChart>
|
||||
`;
|
||||
const Plegend = getLegend(config.echarts.legend);
|
||||
const type =
|
||||
config.echarts.series[0].radius[0] &&
|
||||
config.echarts.series[0].radius[0].split('%')[0] > 0
|
||||
? 'ring'
|
||||
: config.echarts.series[0].roseType
|
||||
? 'rose'
|
||||
: 'pie';
|
||||
let opts = '';
|
||||
if (type == 'pie') {
|
||||
opts = `pie: {
|
||||
"customRadius": ${config.echarts.series[0].radius[1].split('%')[0]},
|
||||
"labelWidth": 10,
|
||||
"border": false
|
||||
}`;
|
||||
} else if (type == 'ring') {
|
||||
opts = `ring: {
|
||||
ringWidth: ${config.echarts.series[0].radius[0].split('%')[0]}, //内圈大小
|
||||
labelWidth: 10,
|
||||
border: false,
|
||||
customRadius:${config.echarts.series[0].radius[1].split('%')[0]} //外圈大小
|
||||
}`;
|
||||
} else {
|
||||
opts = `rose: {
|
||||
type: "${config.echarts.series[0].roseType}",
|
||||
minRadius: ${config.echarts.series[0].radius[0].split('%')[0]},
|
||||
labelWidth: 10,
|
||||
border: false,
|
||||
}`;
|
||||
}
|
||||
configCode += `const pieConfig${idx} = ref({
|
||||
${apiConfig}
|
||||
labelKey: "${config.labelKey}",
|
||||
valueKey: "${config.valueKey}",
|
||||
title: "${config.title}",
|
||||
height: ${o.h},
|
||||
fontSize:${config.echarts.series[0].label.fontSize},
|
||||
fontColor:"${config.echarts.series[0].label.color}",
|
||||
pieType:"${type}", //rose玫瑰图，pie饼图，ring环形图
|
||||
options:{
|
||||
dataLabel: ${config.echarts.series[0].label.show},
|
||||
labelFormat:"${config.echarts.series[0].label.formatter}",
|
||||
legend: ${JSON.stringify(Plegend)},
|
||||
color: ${JSON.stringify(config.colors)},
|
||||
extra: {${opts}}
|
||||
}
|
||||
});
|
||||
`;
|
||||
break;
|
||||
case 'Radar':
|
||||
code += `<RadarChart :config="radarConfig${idx}"></RadarChart>
|
||||
`;
|
||||
const Rlegend = getLegend(config.echarts.legend);
|
||||
configCode += `const radarConfig${idx} = ref({
|
||||
${apiConfig}
|
||||
labelKey: "${config.labelKey}",
|
||||
title: "${config.title}",
|
||||
height: ${o.h},
|
||||
indicator:${JSON.stringify(config.echarts.radar.indicator) || []},
|
||||
pointShape:"${config.echarts.series[0].symbol}",
|
||||
options:{
|
||||
dataLabel: ${config.echarts.series[0].label.show},
|
||||
legend: ${JSON.stringify(Rlegend)},
|
||||
color: ${JSON.stringify(config.colors)},
|
||||
extra: {
|
||||
"radar": {
|
||||
radius:${config.echarts.radar.radius},
|
||||
"gridType": "circle",
|
||||
"gridColor": "#CCCCCC",
|
||||
border:true,
|
||||
"opacity": ${config.echarts.showAreaStyle},
|
||||
},
|
||||
}
|
||||
}
|
||||
});
|
||||
`;
|
||||
break;
|
||||
case 'Gauge':
|
||||
code += `<GaugeChart :config="gaugeConfig${idx}"></GaugeChart>
|
||||
`;
|
||||
configCode += `const gaugeConfig${idx} = ref({
|
||||
${apiConfig}
|
||||
labelKey: "${config.labelKey}",
|
||||
title: "${config.title}",
|
||||
height: ${o.h},
|
||||
valueKey: "${config.valueKey}",
|
||||
});
|
||||
`;
|
||||
break;
|
||||
case 'Funnel':
|
||||
code += `<FunnelChart :config="funnelConfig${idx}"></FunnelChart>
|
||||
`;
|
||||
const Flegend = getLegend(config.echarts.legend);
|
||||
configCode += `const funnelConfig${idx} = ref({
|
||||
${apiConfig}
|
||||
fontSize:${config.echarts.series[0].label.fontSize},
|
||||
fontColor:"${config.echarts.series[0].label.color}",
|
||||
options:{
|
||||
labelFormat:"${config.echarts.series[0].label.formatter}",
|
||||
dataLabel:${config.echarts.series[0].label.show},
|
||||
color: ${JSON.stringify(config.colors)},
|
||||
padding: [${config.echarts.series[0].top || 0},${
|
||||
config.echarts.series[0].right || 0
|
||||
},${config.echarts.series[0].bottom || 0},${config.echarts.series[0].left || 0}],
|
||||
legend:${JSON.stringify(Flegend)},
|
||||
extra: {
|
||||
funnel: {
|
||||
activeOpacity: 0.3,
|
||||
activeWidth: 10,
|
||||
border: true,
|
||||
borderWidth: ${config.echarts.series[0].gap},
|
||||
borderColor: "#FFFFFF",
|
||||
fillOpacity: 1,
|
||||
labelAlign: "${
|
||||
config.echarts.series[0].label.show
|
||||
? config.echarts.series[0].label.position
|
||||
: 'left'
|
||||
}",
|
||||
type: "${
|
||||
config.echarts.series[0].sort == 'descending' ? 'triangle' : 'pyramid'
|
||||
}" //triangle倒三角，pyramid金字塔
|
||||
}
|
||||
}
|
||||
},
|
||||
labelKey: "${config.labelKey}",
|
||||
title: "${config.title}",
|
||||
height: ${o.h},
|
||||
valueKey: "${config.valueKey}",
|
||||
});
|
||||
`;
|
||||
break;
|
||||
case 'ChartBar':
|
||||
code += `<BarChart :config="barConfig${idx}"></BarChart>
|
||||
`;
|
||||
configCode += `const barConfig${idx} = ref({
|
||||
${apiConfig}
|
||||
labelKey: "${config.labelKey}",
|
||||
targetKey:"${config.targetKey}",
|
||||
title: "${config.title}",
|
||||
height: ${o.h},
|
||||
unit: "${config.unit}",
|
||||
valueKey: "${config.valueKey}"
|
||||
});
|
||||
`;
|
||||
break;
|
||||
case 'MyTask':
|
||||
code += `<MyTask :config="taskConfig${idx}"></MyTask>
|
||||
`;
|
||||
configCode += `const taskConfig${idx} = ref({
|
||||
title: "${config.title}",
|
||||
});
|
||||
`;
|
||||
break;
|
||||
case 'TodoList':
|
||||
code += `<TodoList :config="todoConfig${idx}"></TodoList>
|
||||
`;
|
||||
configCode += `const todoConfig${idx} = ref({
|
||||
title: "${config.title}",
|
||||
maxRows: ${config.maxRows},
|
||||
});
|
||||
`;
|
||||
break;
|
||||
case 'Modules':
|
||||
code += `<Modules :config="modulesConfig${idx}"></Modules>
|
||||
`;
|
||||
configCode += `const modulesConfig${idx} = ref({
|
||||
title: "${config.title}",
|
||||
functions: ${JSON.stringify(config.functions)},
|
||||
});
|
||||
`;
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
});
|
||||
compMap.forEach((o) => {
|
||||
switch (o) {
|
||||
case 'Dashboard':
|
||||
importCode += `import Dashboard from '@/components/dataDisplay/Dashboard.vue';
|
||||
`;
|
||||
break;
|
||||
case 'Banner':
|
||||
importCode += `import Banner from '@/components/dataDisplay/Banner.vue';
|
||||
`;
|
||||
break;
|
||||
case 'ChartLine':
|
||||
importCode += `import LineChart from '@/components/dataDisplay/LineChart.vue';
|
||||
`;
|
||||
break;
|
||||
case 'Pie':
|
||||
importCode += `import PieChart from '@/components/dataDisplay/PieChart.vue';
|
||||
`;
|
||||
break;
|
||||
case 'Radar':
|
||||
importCode += `import RadarChart from '@/components/dataDisplay/RadarChart.vue';
|
||||
`;
|
||||
break;
|
||||
case 'Gauge':
|
||||
importCode += `import GaugeChart from '@/components/dataDisplay/GaugeChart.vue';
|
||||
`;
|
||||
break;
|
||||
case 'Funnel':
|
||||
importCode += `import FunnelChart from '@/components/dataDisplay/FunnelChart.vue';
|
||||
`;
|
||||
break;
|
||||
case 'ChartBar':
|
||||
importCode += `import BarChart from '@/components/dataDisplay/BarChart.vue';
|
||||
`;
|
||||
break;
|
||||
case 'MyTask':
|
||||
importCode += `import MyTask from '@/components/dataDisplay/MyTask.vue';
|
||||
`;
|
||||
break;
|
||||
case 'TodoList':
|
||||
importCode += `import TodoList from '@/components/dataDisplay/TodoList.vue';
|
||||
`;
|
||||
break;
|
||||
case 'Modules':
|
||||
importCode += `import Modules from '@/components/dataDisplay/Modules.vue';
|
||||
`;
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
code += `</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
${importCode}
|
||||
${configCode}
|
||||
</script>
|
||||
|
||||
<style></style>`;
|
||||
|
||||
return code;
|
||||
}
|
||||
|
||||
function getLegend(config) {
|
||||
let left = 'left';
|
||||
let top = 'bottom';
|
||||
if (config.position == LocationType.LEFT_TOP) {
|
||||
left = config.orient == 'horizontal' ? 'left' : 'top';
|
||||
top = config.orient == 'horizontal' ? 'top' : 'left';
|
||||
} else if (config.position == LocationType.RIGHT_TOP) {
|
||||
left = config.orient == 'horizontal' ? 'right' : 'top';
|
||||
top = config.orient == 'horizontal' ? 'top' : 'right';
|
||||
} else if (config.position == LocationType.LEFT_BOTTOM) {
|
||||
left = config.orient == 'horizontal' ? 'left' : 'bottom';
|
||||
top = config.orient == 'horizontal' ? 'bottom' : 'left';
|
||||
} else if (config.position == LocationType.RIGHT_BOTTOM) {
|
||||
left = config.orient == 'horizontal' ? 'right' : 'bottom';
|
||||
top = config.orient == 'horizontal' ? 'bottom' : 'right';
|
||||
} else if (config.position == LocationType.TOP_CENTER) {
|
||||
left = 'center';
|
||||
top = config.orient == 'horizontal' ? 'top' : 'left';
|
||||
} else if (config.position == LocationType.BOTTOM_CENTER) {
|
||||
left = 'center';
|
||||
top = config.orient == 'horizontal' ? 'bottom' : 'left';
|
||||
}
|
||||
const legend = {
|
||||
show: config.show,
|
||||
position: top,
|
||||
float: left,
|
||||
margin: config.padding,
|
||||
legendShape: config.icon,
|
||||
fontColor: config.textStyle.color,
|
||||
};
|
||||
return legend;
|
||||
}
|
||||
Reference in New Issue
Block a user