You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
301 lines
27 KiB
Vue
301 lines
27 KiB
Vue
<template>
|
|
<div>
|
|
<input id="importFileInput" accept=".json" style="display: none;" type="file">
|
|
<el-button type="primary" @click="constructBoard">构造图表</el-button>
|
|
<el-button type="primary" @click="constructionData">构造数据源</el-button>
|
|
<el-button type="primary" @click="resetData">重置数据</el-button>
|
|
<el-dialog v-model="constructBoardFormVisible" title="构造图表" width="500">
|
|
<el-form :model="constructBoardForm">
|
|
<el-form-item label="图表名称" prop="name">
|
|
<el-input v-model="constructBoardForm.name" />
|
|
</el-form-item>
|
|
<el-form-item label="图表配置">
|
|
<el-button plain type="primary" @click="importJson">导入json</el-button>
|
|
<el-input v-model="constructBoardForm.option" type="textarea" />
|
|
</el-form-item>
|
|
</el-form>
|
|
<template #footer>
|
|
<div class="dialog-footer">
|
|
<el-button @click="constructBoardFormVisible = false">关闭</el-button>
|
|
<el-button type="primary" @click="createBoard ">
|
|
创建
|
|
</el-button>
|
|
</div>
|
|
</template>
|
|
</el-dialog>
|
|
|
|
<el-dialog v-model="constructionDataFormVisible" draggable width="800">
|
|
<template #header>
|
|
<div style="width: 100%">
|
|
<span>构造数据源</span>
|
|
<div style="text-align:right;display: inline-block;width: calc(100% - 100px)">
|
|
<span>简易模式</span>
|
|
<el-switch v-model="isEasy" />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<el-form :model="constructionDataForm">
|
|
<el-form-item label="数据名称" prop="name">
|
|
<el-input v-model="constructionDataForm.name" />
|
|
</el-form-item>
|
|
<el-form-item label="请求地址" prop="url">
|
|
<el-input v-model="constructionDataForm.url">
|
|
<template #prepend>
|
|
<el-select v-model="constructionDataForm.method" style="width: 100px">
|
|
<el-option label="get" value="get" />
|
|
<el-option label="post" value="post" />
|
|
<el-option label="socket" value="socket" />
|
|
</el-select>
|
|
</template>
|
|
</el-input>
|
|
</el-form-item>
|
|
<el-form-item label="请求数据">
|
|
<el-table :data="constructionDataForm.inputData" style="width: 100%">
|
|
<el-table-column label="字段名称" min-width="120">
|
|
<template #default="scope">
|
|
<el-input v-model="scope.row.name" style="width: 100%" />
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="备注" min-width="120">
|
|
<template #default="scope">
|
|
<el-input v-model="scope.row.remark" style="width: 100%" />
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column v-if="isEasy" label="测试数据" min-width="120">
|
|
<template #default="scope">
|
|
<el-input v-model="scope.row.test" style="width: 100%" />
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="操作" min-width="120">
|
|
<template #default="scope">
|
|
<el-button link size="small" type="primary"
|
|
@click="constructionDataForm.inputData.splice(scope.$index, 1)">
|
|
删除
|
|
</el-button>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
<el-button style="width: 100%" @click="constructionDataForm.inputData.push({})">
|
|
添加字段
|
|
</el-button>
|
|
</el-form-item>
|
|
<el-form-item label="输出数据">
|
|
<el-table :data="constructionDataForm.outputData" style="width: 100%">
|
|
<el-table-column label="字段名称" min-width="120">
|
|
<template #default="scope">
|
|
<el-input v-model="scope.row.name" style="width: 100%" />
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column v-if="!isEasy" label="字段层级" min-width="120">
|
|
<template #default="scope">
|
|
<el-input v-model="scope.row.tier" style="width: 100%" />
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="备注" min-width="120">
|
|
<template #default="scope">
|
|
<el-input v-model="scope.row.remark" style="width: 100%" />
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="操作" min-width="120">
|
|
<template #default="scope">
|
|
<el-button link size="small" type="primary"
|
|
@click="constructionDataForm.outputData.splice(scope.$index, 1)">
|
|
删除
|
|
</el-button>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
<el-button style="width: 100%" @click="constructionDataForm.outputData.push({})">
|
|
添加字段
|
|
</el-button>
|
|
<el-button v-if="isEasy" style="width: 100%;margin: 12px 0 0 0"
|
|
@click="findTier">
|
|
查找
|
|
</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
<template #footer>
|
|
<div class="dialog-footer">
|
|
<el-button @click="constructionDataFormVisible = false">关闭</el-button>
|
|
<el-button type="primary" @click="createData ">
|
|
创建
|
|
</el-button>
|
|
</div>
|
|
</template>
|
|
</el-dialog>
|
|
</div>
|
|
</template>
|
|
<script lang="ts" setup>
|
|
import axios from 'axios';
|
|
import request from '@/utils/request';
|
|
import { options } from './tool.js';
|
|
import * as echarts from 'echarts';
|
|
import temporaryJson from './temporaryJson.json';
|
|
|
|
const comparisonTable = {
|
|
starttime: '开始时间',
|
|
time: '时间',
|
|
value: '值'
|
|
};
|
|
|
|
const { isJSON } = options;
|
|
|
|
const isEasy = ref(false);
|
|
const constructBoardForm = ref({});
|
|
const constructionDataForm = ref({ inputData: [], outputData: [] });
|
|
const constructBoardFormVisible = ref(false);
|
|
const constructionDataFormVisible = ref(false);
|
|
const constructBoard = () => {
|
|
constructBoardForm.value = {};
|
|
constructBoardFormVisible.value = true;
|
|
};
|
|
const createBoard = () => {
|
|
let fun = new Function('echarts', `return ${constructBoardForm.value.option}`);
|
|
let option = constructBoardForm.value.option;
|
|
console.log(option);
|
|
try {
|
|
option = fun(echarts) || null;
|
|
console.log(option);
|
|
if (option.xAxis) {
|
|
if (Array.isArray(option.xAxis)) {
|
|
option.xAxis.forEach(e => {
|
|
delete e.data;
|
|
});
|
|
}
|
|
if (!Array.isArray(option.xAxis) && (typeof option.xAxis === 'object')) {
|
|
delete option.xAxis.data;
|
|
}
|
|
}
|
|
if (option.yAxis) {
|
|
if (Array.isArray(option.yAxis)) {
|
|
option.yAxis.forEach(e => {
|
|
delete e.data;
|
|
});
|
|
}
|
|
if (!Array.isArray(option.yAxis) && (typeof option.yAxis === 'object')) {
|
|
delete option.yAxis.data;
|
|
}
|
|
}
|
|
if (option.series) {
|
|
if (Array.isArray(option.series)) {
|
|
option.series.forEach(e => {
|
|
delete e.data;
|
|
delete e.name;
|
|
});
|
|
}
|
|
if (!Array.isArray(option.series) && (typeof option.series === 'object')) {
|
|
delete option.series.data;
|
|
delete option.series.name;
|
|
}
|
|
}
|
|
} catch (e) {
|
|
|
|
}
|
|
|
|
if (isJSON(constructBoardForm.value.option)) {
|
|
constructBoardFormVisible.value = false;
|
|
let nowData = JSON.parse(localStorage.getItem('BOARDNODE') || '[]');
|
|
nowData.push(constructBoardForm.value);
|
|
localStorage.setItem('BOARDNODE', JSON.stringify(nowData));
|
|
} else if (option) {
|
|
constructBoardFormVisible.value = false;
|
|
let nowData = JSON.parse(localStorage.getItem('BOARDNODE') || '[]');
|
|
nowData.push({ ...constructBoardForm.value, option: JSON.stringify(option) });
|
|
localStorage.setItem('BOARDNODE', JSON.stringify(nowData));
|
|
} else {
|
|
ElMessage({
|
|
message: '格式错误',
|
|
type: 'warning'
|
|
});
|
|
}
|
|
};
|
|
const constructionData = () => {
|
|
constructionDataForm.value = { inputData: [], outputData: [] };
|
|
constructionDataFormVisible.value = true;
|
|
};
|
|
const createData = () => {
|
|
constructionDataFormVisible.value = false;
|
|
let nowData = JSON.parse(localStorage.getItem('DATANODE') || '[]');
|
|
nowData.push(constructionDataForm.value);
|
|
localStorage.setItem('DATANODE', JSON.stringify(nowData));
|
|
};
|
|
const importJson = () => {
|
|
const fileInput = document.getElementById('importFileInput');
|
|
let listenFun = (e) => {
|
|
getFileText(e.target.files[0]);
|
|
};
|
|
fileInput.addEventListener('change', listenFun, true);
|
|
fileInput.click();
|
|
const getFileText = (file) => {
|
|
const reader = new FileReader();
|
|
reader.onload = function(e) {
|
|
const fileContent = e.target.result;
|
|
fileInput.removeEventListener('change', listenFun, true);
|
|
fileInput.value = '';
|
|
if (isJSON(fileContent)) {
|
|
constructBoardForm.value.option = fileContent;
|
|
}
|
|
};
|
|
reader.readAsText(file);
|
|
};
|
|
|
|
};
|
|
const findTier = () => {
|
|
let params = {};
|
|
(constructionDataForm.value.inputData || []).forEach((item) => {
|
|
params[item.name] = item.test;
|
|
});
|
|
|
|
(options.isD ? request : axios.request)({
|
|
method: constructionDataForm.value.method,
|
|
url: constructionDataForm.value.url,
|
|
params: constructionDataForm.value.method === 'get' ? params : '',
|
|
data: constructionDataForm.value.method === 'post' ? params : ''
|
|
}).then(res => {
|
|
let data = (options.isD ? res : res.data);
|
|
console.log(data);
|
|
if (data?.data) {
|
|
Object.keys(data.data?.[0]).forEach(key => {
|
|
constructionDataForm.value.outputData.push({
|
|
name: key,
|
|
remark: comparisonTable[key],
|
|
tier: `data,map%${key}`
|
|
});
|
|
});
|
|
} else if (data?.rows) {
|
|
console.log(data?.rows);
|
|
Object.keys(data.rows?.[0]).forEach(key => {
|
|
constructionDataForm.value.outputData.push({
|
|
name: key,
|
|
remark: comparisonTable[key],
|
|
tier: `rows,map%${key}`
|
|
});
|
|
});
|
|
} else {
|
|
let exclude = ['code'];
|
|
Object.keys(data).forEach(key => {
|
|
if (!exclude.includes(key.toLowerCase())) {
|
|
if (typeof data[key] === 'string' || typeof data[key] === 'string') {
|
|
constructionDataForm.value.outputData.push({
|
|
name: key,
|
|
remark: comparisonTable[key],
|
|
tier: `${key}`
|
|
});
|
|
}
|
|
}
|
|
});
|
|
}
|
|
});
|
|
|
|
};
|
|
const resetData = () => {
|
|
localStorage.setItem('BOARDNODE', '[{"name":"自定义1","option":"{\\"backgroundColor\\":\\"#000\\",\\"tooltip\\":{\\"trigger\\":\\"axis\\"},\\"legend\\":{\\"top\\":\\"5%\\",\\"right\\":\\"2%\\",\\"itemGap\\":20,\\"icon\\":\\"circle\\",\\"itemWidth\\":10,\\"itemHeight\\":10,\\"textStyle\\":{\\"color\\":\\"#C5D6E6\\"}},\\"grid\\":{\\"left\\":\\"1%\\",\\"right\\":\\"2%\\",\\"bottom\\":\\"5%\\",\\"containLabel\\":true},\\"xAxis\\":[{\\"type\\":\\"category\\",\\"axisLabel\\":{\\"textStyle\\":{\\"color\\":\\"#C5D6E6\\"}},\\"axisLine\\":{\\"lineStyle\\":{\\"color\\":\\"#D9E7FF\\"}}}],\\"yAxis\\":[{\\"type\\":\\"value\\",\\"splitNumber\\":4,\\"splitLine\\":{\\"lineStyle\\":{\\"color\\":\\"rgba(217, 231, 255, 0.3)\\"}},\\"axisLabel\\":{\\"textStyle\\":{\\"color\\":\\"#C5D6E6\\"}},\\"axisLine\\":{\\"show\\":false,\\"lineStyle\\":{\\"color\\":\\"#333\\"}},\\"nameTextStyle\\":{\\"color\\":\\"#999\\"},\\"splitArea\\":{\\"show\\":false}}],\\"series\\":[{\\"type\\":\\"line\\",\\"lineStyle\\":{\\"normal\\":{\\"width\\":2,\\"color\\":\\"rgba(15, 222, 255, 1)\\",\\"shadowColor\\":\\"rgba(72,216,191, 0.3)\\",\\"shadowBlur\\":10,\\"shadowOffsetY\\":20}},\\"areaStyle\\":{\\"normal\\":{\\"color\\":{\\"colorStops\\":[{\\"offset\\":0,\\"color\\":\\"#0FDEFF\\"},{\\"offset\\":1,\\"color\\":\\"rgba(15, 222, 255, 0)\\"}],\\"x\\":0,\\"y\\":0,\\"x2\\":0,\\"y2\\":1,\\"type\\":\\"linear\\",\\"global\\":false}}},\\"itemStyle\\":{\\"color\\":\\"rgba(15, 222, 255, 1)\\"},\\"smooth\\":true,\\"symbol\\":\\"none\\"},{\\"type\\":\\"line\\",\\"lineStyle\\":{\\"normal\\":{\\"width\\":2,\\"color\\":\\"rgba(0, 144, 255, 1)\\"}},\\"areaStyle\\":{\\"normal\\":{\\"color\\":{\\"colorStops\\":[{\\"offset\\":0,\\"color\\":\\"rgba(0, 144, 255, 1)\\"},{\\"offset\\":1,\\"color\\":\\"rgba(0, 144, 255, 0)\\"}],\\"x\\":0,\\"y\\":0,\\"x2\\":0,\\"y2\\":1,\\"type\\":\\"linear\\",\\"global\\":false}}},\\"itemStyle\\":{\\"color\\":\\"rgba(0, 144, 255, 1)\\"},\\"smooth\\":true,\\"symbol\\":\\"none\\"},{\\"type\\":\\"line\\",\\"lineStyle\\":{\\"normal\\":{\\"width\\":2,\\"color\\":\\"rgba(255, 208, 59, 1)\\"}},\\"areaStyle\\":{\\"normal\\":{\\"color\\":{\\"colorStops\\":[{\\"offset\\":0,\\"color\\":\\"rgba(255, 208, 59, 1)\\"},{\\"offset\\":1,\\"color\\":\\"rgba(255, 208, 59, 0)\\"}],\\"x\\":0,\\"y\\":0,\\"x2\\":0,\\"y2\\":1,\\"type\\":\\"linear\\",\\"global\\":false}}},\\"itemStyle\\":{\\"color\\":\\"rgba(255, 208, 59, 1)\\"},\\"smooth\\":true,\\"symbol\\":\\"none\\"}]}"}]');
|
|
localStorage.setItem('DATANODE', '[{"inputData":[],"name":"测试","outputData":[{"name":"time","remark":"时间","tier":"data,map%time"},{"name":"value","remark":"值","tier":"data,map%value"}],"url":"http://localhost:3000/test/getDevice","method":"post"},{"inputData":[{"name":"startTime"},{"name":"endTime"}],"outputData":[{"name":"time","remark":"时间","tier":"data,map%time"},{"name":"value","remark":"值","tier":"data,map%value"}],"name":"测试2","url":"http://localhost:3000/test/getDevice","method":"post"},{"inputData":[],"outputData":[{"name":"imgSrc","tier":"data,imgSrc"}],"name":"获取图片","url":"http://localhost:3000/test/getImg","method":"post"},{"inputData":[],"outputData":[{"name":"imgSrc","tier":"imgSrc"}],"url":"http://localhost:3000/test/getImg","method":"post","name":"获取图片1"},{"inputData":[],"outputData":[{"name":"time","remark":"时间","tier":"data,map%time"},{"name":"value","remark":"值","tier":"data,map%value"},{"name":"value1","remark":"值1","tier":"data,map%value1"}],"url":"http://localhost:3000/test/getDevices","method":"post","name":"多条数据"},{"inputData":[],"outputData":[{"name":"time","remark":"时间","tier":"data,map%time"},{"name":"value","remark":"值","tier":"data,map%value"},{"name":"value1","tier":"data,map%value1"},{"name":"value2","tier":"data,map%value2"}],"url":"http://localhost:3000/test/getDevices","method":"post","name":"多跳线3"}]');
|
|
localStorage.setItem('EDGES', '[{"id":"inputNode_ca57a9a4_ab69_424e_a2d3_f0190eeedac0---img_00faaa60_7116_44c1_bff3_6353750f8552","source":"inputNode_ca57a9a4_ab69_424e_a2d3_f0190eeedac0","target":"img_00faaa60_7116_44c1_bff3_6353750f8552","type":"bezier","animated":true,"sourceHandle":"inputNode_ca57a9a4_ab69_424e_a2d3_f0190eeedac0.-s","style":{"stroke":"#409EFF"}},{"id":"customData_70d9d145_c10b_49cf_81a0_a287a67dcbb3---map_7743acef_837a_4443_9747_c32aff5222d7","source":"customData_70d9d145_c10b_49cf_81a0_a287a67dcbb3","target":"map_7743acef_837a_4443_9747_c32aff5222d7","type":"bezier","animated":true,"sourceHandle":"customData_70d9d145_c10b_49cf_81a0_a287a67dcbb3.-s","style":{"stroke":"#409EFF"}},{"id":"customData_40ac6650_0aef_45cd_9b32_59f48e33a49b---img_ece09ea2_72b0_4dce_b0b6_cd8f05b9e9dd","source":"customData_40ac6650_0aef_45cd_9b32_59f48e33a49b","target":"img_ece09ea2_72b0_4dce_b0b6_cd8f05b9e9dd","type":"bezier","animated":true,"sourceHandle":"customData_40ac6650_0aef_45cd_9b32_59f48e33a49b.-s","style":{"stroke":"#409EFF"}},{"id":"map_7743acef_837a_4443_9747_c32aff5222d7---line_291fc7f2_f431_46a6_890d_8a1910a147ce","source":"map_7743acef_837a_4443_9747_c32aff5222d7","target":"line_291fc7f2_f431_46a6_890d_8a1910a147ce","type":"bezier","animated":true,"sourceHandle":"map_7743acef_837a_4443_9747_c32aff5222d7.-s","style":{"stroke":"#409EFF"}},{"id":"map_9fedf88f_c291_435b_9ead_43ca5c6224bf---multiLines_9704dddc_6a93_41d0_9823_87b781af1f6f","source":"map_9fedf88f_c291_435b_9ead_43ca5c6224bf","target":"multiLines_9704dddc_6a93_41d0_9823_87b781af1f6f","type":"bezier","animated":true,"sourceHandle":"map_9fedf88f_c291_435b_9ead_43ca5c6224bf.-s","style":{"stroke":"#409EFF"}},{"id":"time_2987f306_75b3_49b9_a6fc_3e047016dcef---customData_38872a69_686b_4efd_ae4a_88f48c3b02f9","source":"time_2987f306_75b3_49b9_a6fc_3e047016dcef","target":"customData_38872a69_686b_4efd_ae4a_88f48c3b02f9","type":"bezier","animated":true,"sourceHandle":"time_2987f306_75b3_49b9_a6fc_3e047016dcef.-s","style":{"stroke":"#409EFF"}},{"id":"customData_38872a69_686b_4efd_ae4a_88f48c3b02f9---map_9fedf88f_c291_435b_9ead_43ca5c6224bf","source":"customData_38872a69_686b_4efd_ae4a_88f48c3b02f9","target":"map_9fedf88f_c291_435b_9ead_43ca5c6224bf","type":"bezier","animated":true,"sourceHandle":"customData_38872a69_686b_4efd_ae4a_88f48c3b02f9.-s","style":{"stroke":"#409EFF"}},{"id":"map_7743acef_837a_4443_9747_c32aff5222d7---bar_e71bdb24_6b34_48dd_a269_def1a2140448","source":"map_7743acef_837a_4443_9747_c32aff5222d7","target":"bar_e71bdb24_6b34_48dd_a269_def1a2140448","type":"bezier","animated":true,"sourceHandle":"map_7743acef_837a_4443_9747_c32aff5222d7.-s","style":{"stroke":"#409EFF"}},{"id":"map_9fedf88f_c291_435b_9ead_43ca5c6224bf---multiBars_bc4e2862_4a9d_4dac_a1bb_2a7cec78d5f5","source":"map_9fedf88f_c291_435b_9ead_43ca5c6224bf","target":"multiBars_bc4e2862_4a9d_4dac_a1bb_2a7cec78d5f5","type":"bezier","animated":true,"sourceHandle":"map_9fedf88f_c291_435b_9ead_43ca5c6224bf.-s","style":{"stroke":"#409EFF"}},{"id":"map_7743acef_837a_4443_9747_c32aff5222d7---curve_5807517e_2048_4759_bd90_a92c8b9153b9","source":"map_7743acef_837a_4443_9747_c32aff5222d7","target":"curve_5807517e_2048_4759_bd90_a92c8b9153b9","type":"bezier","animated":true,"sourceHandle":"map_7743acef_837a_4443_9747_c32aff5222d7.-s","style":{"stroke":"#409EFF"}},{"id":"map_9fedf88f_c291_435b_9ead_43ca5c6224bf---multiCurves_081e3628_3e66_47a6_9c4f_6cb570f922be","source":"map_9fedf88f_c291_435b_9ead_43ca5c6224bf","target":"multiCurves_081e3628_3e66_47a6_9c4f_6cb570f922be","type":"bezier","animated":true,"sourceHandle":"map_9fedf88f_c291_435b_9ead_43ca5c6224bf.-s","style":{"stroke":"#409EFF"}},{"id":"map_9fedf88f_c291_435b_9ead_43ca5c6224bf---customBoard_98dbed89_0a82_4215_a005_ea2a537e7244","source":"map_9fedf88f_c291_435b_9ead_43ca5c6224bf","target":"customBoard_98dbed89_0a82_4215_a005_ea2a537e7244","type":"bezier","animated":true,"sourceHandle":"map_9fedf88f_c291_435b_9ead_43ca5c6224bf.-s","style":{"stroke":"#409EFF"}},{"id":"inputNode_d82ca34d_c866_4b09_b8c7_4d1a154b4dba---text_3ae1bec4_f0ff_4ccc_98b9_d715a10901f8","source":"inputNode_d82ca34d_c866_4b09_b8c7_4d1a154b4dba","target":"text_3ae1bec4_f0ff_4ccc_98b9_d715a10901f8","type":"bezier","animated":true,"markerEnd":"arrowclosed","sourceHandle":"inputNode_d82ca34d_c866_4b09_b8c7_4d1a154b4dba.-s","style":{"stroke":"#409EFF"}},{"id":"time_55167f16_69a5_44d9_af23_33098f6b6f6d---customData_70d9d145_c10b_49cf_81a0_a287a67dcbb3","source":"time_55167f16_69a5_44d9_af23_33098f6b6f6d","target":"customData_70d9d145_c10b_49cf_81a0_a287a67dcbb3","type":"bezier","animated":true,"markerEnd":"arrowclosed","sourceHandle":"time_55167f16_69a5_44d9_af23_33098f6b6f6d.-s","style":{"stroke":"#409EFF"}}]');
|
|
localStorage.setItem('NODES', '[{"id":"area_d87658b5_c289_4484_a638_0483f2b3b050","name":"area","dimensions":{"width":1920,"height":1080},"position":{"x":0,"y":0},"type":"area","data":{"label":null}},{"id":"map_7743acef_837a_4443_9747_c32aff5222d7","name":"map","dimensions":{"width":100,"height":30},"position":{"x":-247.93412276043736,"y":567.8799606917167},"type":"map","data":{"options":{"dataMap":[{"source":"time","target":"x1"},{"target":"y1","source":"value"}]},"outputData":{}}},{"id":"text_3ae1bec4_f0ff_4ccc_98b9_d715a10901f8","name":"text","dimensions":{"width":199,"height":27},"position":{"x":851.0697675496624,"y":19.614116059410506},"type":"text","data":{"options":{"text":"文字","align":"center","color":"rgba(255, 255, 255, 1)"},"outputData":{}}},{"id":"img_00faaa60_7116_44c1_bff3_6353750f8552","name":"img","dimensions":{"width":394,"height":263},"position":{"x":982.2526344140581,"y":118.93330166233437},"type":"img","data":{"options":{"imgSrc":"https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"},"outputData":{}}},{"id":"inputNode_ca57a9a4_ab69_424e_a2d3_f0190eeedac0","name":"inputNode","dimensions":{"width":100,"height":30},"position":{"x":850.3838406080206,"y":-109.83774208014115},"type":"inputNode","data":{"options":{"field":"imgSrc"},"outputData":{}}},{"id":"img_ece09ea2_72b0_4dce_b0b6_cd8f05b9e9dd","name":"img","dimensions":{"width":387,"height":262},"position":{"x":563.589293904064,"y":128.05345550738483},"type":"img","data":{"options":{"imgSrc":""},"outputData":{}}},{"id":"customData_70d9d145_c10b_49cf_81a0_a287a67dcbb3","name":"customData","dimensions":{"width":100,"height":100},"position":{"x":-419.8212481525095,"y":532.4558455054224},"type":"customData","data":{"options":{},"outputData":{},"customData":{"inputData":[{"name":"startTime"},{"name":"endTime"}],"outputData":[{"name":"time","remark":"时间","tier":"data,map%time"},{"name":"value","remark":"值","tier":"data,map%value"}],"name":"测试2","url":"http://localhost:3000/test/getDevice","method":"post"}}},{"id":"customData_40ac6650_0aef_45cd_9b32_59f48e33a49b","name":"customData","dimensions":{"width":100,"height":100},"position":{"x":390.9551094964859,"y":-129.52067085713486},"type":"customData","data":{"options":{},"outputData":{},"customData":{"inputData":[],"outputData":[{"name":"imgSrc","tier":"imgSrc"}],"url":"http://localhost:3000/test/getImg","method":"post","name":"获取图片1"}}},{"id":"line_291fc7f2_f431_46a6_890d_8a1910a147ce","name":"line","dimensions":{"width":444,"height":259},"position":{"x":70.12301518665174,"y":159.97527465739014},"type":"line","data":{"options":{"title":"bt","yNames":["shu"]},"outputData":{}}},{"id":"time_2987f306_75b3_49b9_a6fc_3e047016dcef","name":"time","dimensions":{"width":100,"height":100},"position":{"x":1998.9517328438428,"y":486.7184087064016},"type":"time","data":{"options":{"startTimeId":"startTime","endTimeId":"endTime"},"outputData":{}}},{"id":"map_9fedf88f_c291_435b_9ead_43ca5c6224bf","name":"map","dimensions":{"width":100,"height":30},"position":{"x":2443.484696167194,"y":536.576615637777},"type":"map","data":{"options":{"dataMap":[{"source":"time","target":"x1"},{"source":"value","target":"y2"},{"source":"value1","target":"y1"},{"source":"value2","target":"y3"}]},"outputData":{}}},{"id":"multiLines_9704dddc_6a93_41d0_9823_87b781af1f6f","name":"multiLines","dimensions":{"width":441,"height":273},"position":{"x":1404.3447297443327,"y":158.28184418751746},"type":"multiLines","data":{"options":{"title":"","yNames":["线1","线2","线3"]},"outputData":{}}},{"id":"customData_38872a69_686b_4efd_ae4a_88f48c3b02f9","name":"customData","dimensions":{"width":100,"height":100},"position":{"x":2198.170051305289,"y":507.52223047447274},"type":"customData","data":{"options":{},"outputData":{},"customData":{"inputData":[],"outputData":[{"name":"time","remark":"时间","tier":"data,map%time"},{"name":"value","remark":"值","tier":"data,map%value"},{"name":"value1","tier":"data,map%value1"},{"name":"value2","tier":"data,map%value2"}],"url":"http://localhost:3000/test/getDevices","method":"post","name":"多跳线3"}}},{"id":"bar_e71bdb24_6b34_48dd_a269_def1a2140448","name":"bar","dimensions":{"width":452,"height":236},"position":{"x":62.236209968162655,"y":430.7198432293809},"type":"bar","data":{"options":{},"outputData":{}}},{"id":"multiBars_bc4e2862_4a9d_4dac_a1bb_2a7cec78d5f5","name":"multiBars","dimensions":{"width":443,"height":256},"position":{"x":1407.5917566557023,"y":446.19349717801117},"type":"multiBars","data":{"options":{"title":"柱状图","yNames":["柱1","柱2","柱3"]},"outputData":{}}},{"id":"curve_5807517e_2048_4759_bd90_a92c8b9153b9","name":"curve","dimensions":{"width":826,"height":242},"position":{"x":69.66091411506324,"y":794.0644159452098},"type":"curve","data":{"options":{"title":"","yNames":[]},"outputData":{}}},{"id":"multiCurves_081e3628_3e66_47a6_9c4f_6cb570f922be","name":"multiCurves","dimensions":{"width":906,"height":242},"position":{"x":944.0759087733752,"y":791.7363838679972},"type":"multiCurves","data":{"options":{"title":"曲线","yNames":["线1","线2","线3"]},"outputData":{}}},{"id":"customBoard_98dbed89_0a82_4215_a005_ea2a537e7244","name":"customBoard","dimensions":{"width":465,"height":273},"position":{"x":746.8216617149185,"y":443.0499050783344},"type":"customBoard","data":{"options":{"title":"","yNames":["线1","线2","线3"]},"outputData":{},"customData":{"name":"自定义1","option":"{\\"backgroundColor\\":\\"#000\\",\\"tooltip\\":{\\"trigger\\":\\"axis\\"},\\"legend\\":{\\"top\\":\\"5%\\",\\"right\\":\\"2%\\",\\"itemGap\\":20,\\"icon\\":\\"circle\\",\\"itemWidth\\":10,\\"itemHeight\\":10,\\"textStyle\\":{\\"color\\":\\"#C5D6E6\\"}},\\"grid\\":{\\"left\\":\\"1%\\",\\"right\\":\\"2%\\",\\"bottom\\":\\"5%\\",\\"containLabel\\":true},\\"xAxis\\":[{\\"type\\":\\"category\\",\\"axisLabel\\":{\\"textStyle\\":{\\"color\\":\\"#C5D6E6\\"}},\\"axisLine\\":{\\"lineStyle\\":{\\"color\\":\\"#D9E7FF\\"}}}],\\"yAxis\\":[{\\"type\\":\\"value\\",\\"splitNumber\\":4,\\"splitLine\\":{\\"lineStyle\\":{\\"color\\":\\"rgba(217, 231, 255, 0.3)\\"}},\\"axisLabel\\":{\\"textStyle\\":{\\"color\\":\\"#C5D6E6\\"}},\\"axisLine\\":{\\"show\\":false,\\"lineStyle\\":{\\"color\\":\\"#333\\"}},\\"nameTextStyle\\":{\\"color\\":\\"#999\\"},\\"splitArea\\":{\\"show\\":false}}],\\"series\\":[{\\"type\\":\\"line\\",\\"lineStyle\\":{\\"normal\\":{\\"width\\":2,\\"color\\":\\"rgba(15, 222, 255, 1)\\",\\"shadowColor\\":\\"rgba(72,216,191, 0.3)\\",\\"shadowBlur\\":10,\\"shadowOffsetY\\":20}},\\"areaStyle\\":{\\"normal\\":{\\"color\\":{\\"colorStops\\":[{\\"offset\\":0,\\"color\\":\\"#0FDEFF\\"},{\\"offset\\":1,\\"color\\":\\"rgba(15, 222, 255, 0)\\"}],\\"x\\":0,\\"y\\":0,\\"x2\\":0,\\"y2\\":1,\\"type\\":\\"linear\\",\\"global\\":false}}},\\"itemStyle\\":{\\"color\\":\\"rgba(15, 222, 255, 1)\\"},\\"smooth\\":true,\\"symbol\\":\\"none\\"},{\\"type\\":\\"line\\",\\"lineStyle\\":{\\"normal\\":{\\"width\\":2,\\"color\\":\\"rgba(0, 144, 255, 1)\\"}},\\"areaStyle\\":{\\"normal\\":{\\"color\\":{\\"colorStops\\":[{\\"offset\\":0,\\"color\\":\\"rgba(0, 144, 255, 1)\\"},{\\"offset\\":1,\\"color\\":\\"rgba(0, 144, 255, 0)\\"}],\\"x\\":0,\\"y\\":0,\\"x2\\":0,\\"y2\\":1,\\"type\\":\\"linear\\",\\"global\\":false}}},\\"itemStyle\\":{\\"color\\":\\"rgba(0, 144, 255, 1)\\"},\\"smooth\\":true,\\"symbol\\":\\"none\\"},{\\"type\\":\\"line\\",\\"lineStyle\\":{\\"normal\\":{\\"width\\":2,\\"color\\":\\"rgba(255, 208, 59, 1)\\"}},\\"areaStyle\\":{\\"normal\\":{\\"color\\":{\\"colorStops\\":[{\\"offset\\":0,\\"color\\":\\"rgba(255, 208, 59, 1)\\"},{\\"offset\\":1,\\"color\\":\\"rgba(255, 208, 59, 0)\\"}],\\"x\\":0,\\"y\\":0,\\"x2\\":0,\\"y2\\":1,\\"type\\":\\"linear\\",\\"global\\":false}}},\\"itemStyle\\":{\\"color\\":\\"rgba(255, 208, 59, 1)\\"},\\"smooth\\":true,\\"symbol\\":\\"none\\"}]}"}}},{"id":"inputNode_d82ca34d_c866_4b09_b8c7_4d1a154b4dba","name":"inputNode","dimensions":{"width":100,"height":30},"position":{"x":670.5789771796191,"y":-112.96395698577662},"type":"inputNode","data":{"options":{"field":"text","defaultInput":""},"outputData":{}}},{"id":"time_55167f16_69a5_44d9_af23_33098f6b6f6d","name":"time","dimensions":{"width":200,"height":30},"position":{"x":-748.3401762860611,"y":545.6150001093956},"type":"time","data":{"options":{"startTimeId":"startTime","endTimeId":"endTime","defaultTime":["2024-12-31T16:00:00.000Z","2025-01-02T16:00:00.000Z"],"format":""},"outputData":{}}}]');
|
|
localStorage.setItem('PAGEDATA', JSON.stringify(temporaryJson));
|
|
};
|
|
</script>
|
|
<style lang="less" scoped>
|
|
</style>
|