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;
|
|||
|
|
}
|