407 lines
14 KiB
TypeScript
407 lines
14 KiB
TypeScript
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;
|
||
}
|