|
|
|
|
@ -190,7 +190,7 @@
|
|
|
|
|
<!-- </template>-->
|
|
|
|
|
<!-- <div class="moduleText">设备数据</div>-->
|
|
|
|
|
<!-- </el-card>-->
|
|
|
|
|
<template v-for="i in customData.slice(17,customData.length)">
|
|
|
|
|
<template v-for="i in customData">
|
|
|
|
|
<el-card class="moduleCard" shadow="never" :draggable="true"
|
|
|
|
|
@dragstart="onDragStart($event, 'customData',i)"
|
|
|
|
|
:style="{display:'inline-block',margin:'0 4px 4px 0'}"
|
|
|
|
|
@ -714,6 +714,10 @@
|
|
|
|
|
@click="selectTabs(1)">
|
|
|
|
|
样式设置
|
|
|
|
|
</div>
|
|
|
|
|
<div v-if="Object.keys(nodeDataForm).length>0" class="tab" :class="{active : tabs === 2}"
|
|
|
|
|
@click="selectTabs(2)">
|
|
|
|
|
数据
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="tabItems">
|
|
|
|
|
<div class="tabItem" v-if=" tabs === 0">
|
|
|
|
|
@ -1224,6 +1228,9 @@
|
|
|
|
|
<el-form-item label="提示框" v-if="Object.keys(nodeAttrForm).includes('tooltip')">
|
|
|
|
|
<el-switch v-model="nodeAttrForm.tooltip" active-text="显示" inactive-text="隐藏" />
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item label="图表方向" v-if="Object.keys(nodeAttrForm).includes('isHorizontal')">
|
|
|
|
|
<el-switch v-model="nodeAttrForm.isHorizontal" active-text="竖向" inactive-text="横向" />
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item label="图例" v-if="Object.keys(nodeAttrForm).includes('legend')">
|
|
|
|
|
<el-switch v-model="nodeAttrForm.legend" active-text="显示" inactive-text="隐藏" />
|
|
|
|
|
</el-form-item>
|
|
|
|
|
@ -1391,6 +1398,42 @@
|
|
|
|
|
</el-collapse>
|
|
|
|
|
</el-form>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="tabItem" v-if="Object.keys(nodeDataForm).length>0 && tabs === 2">
|
|
|
|
|
<div v-for=" (i,k) in nodeAttrForm.request" style="margin-bottom: 12px;">
|
|
|
|
|
<el-form :model="i.data" label-width="auto" style="max-width: 600px" labelWidth="120px">
|
|
|
|
|
<el-form-item label="使用数据源">
|
|
|
|
|
<el-select
|
|
|
|
|
v-model="i.dataSource"
|
|
|
|
|
placeholder="请选择"
|
|
|
|
|
style="width: 200px"
|
|
|
|
|
@change="(e)=>nodeAttrForm.request[k].mapList = customData.find(v=>v.id === e).outputData.map(v=>{return{originalField:v.fieldOne}})"
|
|
|
|
|
>
|
|
|
|
|
<el-option
|
|
|
|
|
:label="option.name"
|
|
|
|
|
v-for="option in customData"
|
|
|
|
|
:value="option.id"
|
|
|
|
|
>
|
|
|
|
|
</el-option>
|
|
|
|
|
</el-select>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<div style="width: 100%;text-align: center;font-size: 14px;color: #fff;font-weight: 600;margin: 12px 0">
|
|
|
|
|
字段映射
|
|
|
|
|
</div>
|
|
|
|
|
<el-table :data="i.mapList" style="width: 100%" max-height="500">
|
|
|
|
|
<el-table-column label="原字段" prop="originalField">
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<el-table-column label="映射字段">
|
|
|
|
|
<template #default="scope">
|
|
|
|
|
<el-input v-model="scope.row.field" style="width: 100%" />
|
|
|
|
|
</template>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
</el-table>
|
|
|
|
|
</el-form>
|
|
|
|
|
</div>
|
|
|
|
|
<div style="width: 100%;text-align: center;margin-top: 12px">
|
|
|
|
|
<el-button type="primary" plain style="text-align: center" @click="addRequest">添加数据源</el-button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<el-dialog v-model="pageSettingVisible" title="页面设置" width="500">
|
|
|
|
|
@ -1685,8 +1728,9 @@
|
|
|
|
|
</el-dialog>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<el-dialog v-model="treeOptionsVisible" title="树设置" fullscreen>
|
|
|
|
|
<TreeOption :data="nodeAttrForm.treeOptions" :level="nodeAttrForm.level" key="1"/>
|
|
|
|
|
<el-dialog v-model="treeOptionsVisible" title="树设置" fullscreen :before-close="closeTreeOption">
|
|
|
|
|
<TreeOption v-if="treeOptionsVisible" ref="treeOptionRef" :data="nodeAttrForm.treeOptions"
|
|
|
|
|
:level="nodeAttrForm.level" />
|
|
|
|
|
</el-dialog>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
@ -1788,6 +1832,7 @@ const headers = ref(globalHeaders());
|
|
|
|
|
const { onDragStart, onDrop, onDragOver } = tool();
|
|
|
|
|
const router = useRouter();
|
|
|
|
|
const key = ref(0);
|
|
|
|
|
const treeOptionRef = ref();
|
|
|
|
|
|
|
|
|
|
const isSnapToGrid = ref(false);
|
|
|
|
|
const toggleSnapToGrid = (e) => {
|
|
|
|
|
@ -1833,6 +1878,7 @@ onMounted(async () => {
|
|
|
|
|
.then((res) => {
|
|
|
|
|
customData.value = res.rows.map(e => {
|
|
|
|
|
return {
|
|
|
|
|
id: e.dataSourceId,
|
|
|
|
|
name: e.dataSourceName,
|
|
|
|
|
url: e.requestUrl,
|
|
|
|
|
method: e.requestMethod,
|
|
|
|
|
@ -1971,6 +2017,7 @@ const nodes = ref([{
|
|
|
|
|
data: {}
|
|
|
|
|
}]);
|
|
|
|
|
const edges = ref([]);
|
|
|
|
|
const requestDatas = ref([]);
|
|
|
|
|
const customData = ref([]);
|
|
|
|
|
// const customBoard = ref([]);
|
|
|
|
|
const cellOption = ref({});
|
|
|
|
|
@ -2012,23 +2059,13 @@ const logEvent = async (eventname, event) => {
|
|
|
|
|
key.value += 1;
|
|
|
|
|
} else {
|
|
|
|
|
nodeAttrForm.value = {};
|
|
|
|
|
tabs, value = 0;
|
|
|
|
|
tabs.value = 0;
|
|
|
|
|
nodeDataForm.value = {};
|
|
|
|
|
}
|
|
|
|
|
break;
|
|
|
|
|
case 'contextmenu':
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
const resize = (e, id) => {
|
|
|
|
|
nodes.value.forEach((item) => {
|
|
|
|
|
if (item.selected && item.id !== id) {
|
|
|
|
|
item.dimensions = {
|
|
|
|
|
width: e.params.width,
|
|
|
|
|
height: e.params.height
|
|
|
|
|
};
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
};
|
|
|
|
|
const getInputData = (e) => {
|
|
|
|
|
let outputData = {};
|
|
|
|
|
let nodeIds = edges.value.map(v => {
|
|
|
|
|
@ -2172,20 +2209,6 @@ const save = () => {
|
|
|
|
|
// };
|
|
|
|
|
// })));
|
|
|
|
|
};
|
|
|
|
|
const clear = () => {
|
|
|
|
|
nodes.value = [{
|
|
|
|
|
id: `area_${uuidv4().replaceAll('-', '_')}`,
|
|
|
|
|
name: 'area',
|
|
|
|
|
type: 'area',
|
|
|
|
|
position: {
|
|
|
|
|
x: 0,
|
|
|
|
|
y: 0
|
|
|
|
|
},
|
|
|
|
|
data: {}
|
|
|
|
|
}];
|
|
|
|
|
edges.value = [];
|
|
|
|
|
|
|
|
|
|
};
|
|
|
|
|
const pageBgUploadSuccess = (res) => {
|
|
|
|
|
if (res.code === 200) {
|
|
|
|
|
pageSettingForm.value.bg = res.data.url;
|
|
|
|
|
@ -2316,7 +2339,35 @@ const setText = (value, row, formula) => {
|
|
|
|
|
return formulaFun(row, formula);
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const closeTreeOption = (done) => {
|
|
|
|
|
console.log(treeOptionRef.value.getNodes());
|
|
|
|
|
nodeAttrForm.value.treeOptions = (treeOptionRef.value.getNodes() || []).map(e => {
|
|
|
|
|
return {
|
|
|
|
|
id: e.id,
|
|
|
|
|
parentNode: e.parentNode || '',
|
|
|
|
|
position: e.position,
|
|
|
|
|
type: e.type,
|
|
|
|
|
data: e.data,
|
|
|
|
|
dimensions: e.dimensions,
|
|
|
|
|
extent: e.extent || '',
|
|
|
|
|
draggable: e.draggable
|
|
|
|
|
};
|
|
|
|
|
});
|
|
|
|
|
done();
|
|
|
|
|
};
|
|
|
|
|
const addRequest = (e) => {
|
|
|
|
|
if (nodeAttrForm.value.request) {
|
|
|
|
|
nodeAttrForm.value.request.push({
|
|
|
|
|
dataSource: '',
|
|
|
|
|
mapList: []
|
|
|
|
|
});
|
|
|
|
|
} else {
|
|
|
|
|
nodeAttrForm.value.request = [{
|
|
|
|
|
dataSource: '',
|
|
|
|
|
mapList: []
|
|
|
|
|
}];
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
</script>
|
|
|
|
|
<style scoped lang="less">
|
|
|
|
|
|
|
|
|
|
|
suixy
2 days ago