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