@arkxos/arkos-system 0.1.0

package/src/visual/components/echarts/map.vue

@@ -0,0 +1,206 @@
+<template>
+  <div
+    v-if="!initializing"
+    v-resize="resize"
+    class="vc-component"
+    :style="visual.parseStyle(currNode.currStyle)"
+  >
+    <div ref="chartDiv" class="vc-echarts-map" :style="style"></div>
+  </div>
+  <div
+    v-else
+    v-loading="true"
+    element-loading-text=""
+    style="min-height: 30px;"
+    class="vc-component"
+    :style="visual.parseStyle(currNode.currStyle)"
+  ></div>
+</template>
+
+<script setup>
+import { ref, onMounted, computed, inject, getCurrentInstance, markRaw, nextTick } from 'vue';
+import * as echarts from 'echarts';
+import visual from '@/visual/js/visual';
+import EventHandler from '@/visual/js/event';
+import * as chart from '@/visual/js/echarts';
+import JSON5 from 'json5';
+import { parseColors } from '@/utils/color';
+import tool from '@/utils/tool';
+import api from '@/http/api';
+
+const props = defineProps({
+  node: Object
+});
+
+const chartDiv = ref();
+const currChart = ref(null);
+const initializing = ref(true);
+const currNode = ref(props.node);
+const eventHandler = new EventHandler(
+  inject('eventHandler', Function, true),
+  getCurrentInstance(),
+  currNode.value
+);
+
+const init = async(styleId) => {
+  initializing.value = true;
+  visual.initStyle(currNode.value, styleId);
+  await nextTick(() => initializing.value = false);
+};
+
+const loadData = tool.debounce(async() => {
+  const compStyle = currNode.value.currCompStyle || {};
+  const compData = currNode.value.compData || {};
+  const defaultOption = JSON5.parse(compStyle['jsonOption'] || '{}');
+  const dataList = (await visual.loadData(
+    compData,
+    eventHandler,
+    getData(),
+    currNode.value)).data || [];
+
+  const mapIds = (compStyle['geo.mapId'] || '156').split(',');
+  const mapId = mapIds[mapIds.length - 1];
+
+  const seriesData = [];
+  (compStyle.seriesList || []).forEach(item => {
+    seriesData.push({
+      type: item.type,
+      name: item.name,
+      geoIndex: 0,
+      coordinateSystem: item.type !== 'map' ? 'geo' : null,
+      data: dataList[0]?.[item.prop]
+    });
+  });
+
+  const option = {
+    geo: parseGeo(compStyle, mapId),
+    visualMap: parseVisualMap(compStyle),
+    animation: compStyle['animation'] || false,
+    color: parseColors(compStyle['colorScheme']),
+    title: chart.parseTitle(compStyle),
+    tooltip: chart.parseTooltip(compStyle),
+    series: seriesData,
+    toolbox: chart.parseToolbox(compStyle)
+  };
+
+  await nextTick(async() => {
+    const json = await api.get(`/assets/map/${mapId}.json`, false);
+    echarts.registerMap(mapId, json.data);
+    currChart.value = markRaw(echarts.init(chartDiv.value));
+    currChart.value.setOption(Object.assign({}, option, defaultOption));
+    currChart.value.on('click', 'series', function (params) {
+      const data = {
+        标签: params.name,
+        系列: params.value,
+        系列值: params.value
+      };
+      eventHandler.trigger('点击数据项事件', data);
+    });
+  });
+  resize();
+});
+
+const parseGeo = (compStyle, mapId) => {
+  const result = { map: mapId, roam: true };
+
+  result['label'] = {
+    show: !!compStyle['geo.label'],
+    position: compStyle['geo.label.position'] || 'inside',
+    distance: compStyle['geo.label.distance'] || 5,
+    formatter: compStyle['geo.label.formatter'] || '',
+    color: compStyle['geo.label.color'] || '#fff',
+    fontSize: compStyle['geo.label.fontSize'] || 12,
+  };
+
+  result['itemStyle'] = {
+    areaColor: compStyle['geo.itemStyle.areaColor'] || '#eee',
+    color: compStyle['geo.itemStyle.color'] || null,
+    borderColor: compStyle['geo.itemStyle.borderColor'] || '#000',
+    borderWidth: compStyle['geo.itemStyle.borderWidth'] || 0,
+    borderType: compStyle['geo.itemStyle.borderType'] || 'solid',
+  }
+
+  result['emphasis'] = {
+    itemStyle: {
+      areaColor: compStyle['geo.itemStyle.activeColor']
+    }
+  }
+
+  result['select'] = {
+    itemStyle: {
+      areaColor: compStyle['geo.itemStyle.activeColor']
+    }
+  }
+
+  return result;
+};
+
+const parseVisualMap = (compStyle) => {
+  const resultList = [];
+
+  (compStyle['visualMapList'] || []).forEach(item => {
+    const result = {};
+    result['show'] = !!item['show'];
+    result['seriesIndex'] = item['seriesIndex'] || 0;
+    result['calculable'] = true;
+    result['type'] = item['type'] || 'continuous';
+    result['min'] = item['min'] || null;
+    result['max'] = item['max'] || null;
+    result['orient'] = item['orient'] || 'horizontal';
+    result['text'] = item['text'] ? item['text'].split(',') : null;
+    result['dimension'] = item['dimension'] || null;
+
+    result['inRange'] = {};
+    if (item['inRange.symbol']) {
+      result['inRange'].symbol = item['inRange.symbol'] || 'pin';
+    }
+    if (item['inRange.symbolSize']) {
+      result['inRange'].symbolSize = item['inRange.symbolSize'].split(',');
+    }
+    if (item['inRange.color']) {
+      result['inRange'].color = item['inRange.color'].split(',');
+    }
+
+    resultList.push(result);
+  });
+
+  return resultList;
+};
+
+const style = computed(() => {
+  const compStyle = currNode.value.currCompStyle || {};
+
+  let result = '';
+  result += visual.parseTpl('width: {value};', compStyle['width']);
+  result += visual.parseTpl('height: {value};', compStyle['height']);
+  return result;
+});
+
+const getData = () => {
+  return { inputParam: currNode.value.inputParam || {} };
+};
+
+const changeStyle = (styleId) => {
+  init(styleId);
+};
+
+const refresh = async() => {
+  await init();
+  loadData();
+};
+
+const resize = () => {
+  try {
+    currChart.value.resize();
+  } catch (e) {
+    console.log(e);
+  }
+};
+
+onMounted(async() => {
+  await init();
+  loadData();
+});
+
+defineExpose({ getData, changeStyle, refresh, loadData });
+</script>

package/src/visual/components/echarts/pie.vue

@@ -0,0 +1,158 @@
+<template>
+  <div
+    v-if="!initializing"
+    v-resize="resize"
+    class="vc-component"
+    :style="visual.parseStyle(currNode.currStyle)"
+  >
+    <div ref="chartDiv" class="vc-echarts-pie" :style="style"></div>
+  </div>
+  <div
+    v-else
+    v-loading="true"
+    element-loading-text=""
+    style="min-height: 30px;"
+    class="vc-component"
+    :style="visual.parseStyle(currNode.currStyle)"
+  ></div>
+</template>
+
+<script setup>
+import { ref, onMounted, computed, inject, getCurrentInstance, markRaw, nextTick } from 'vue';
+import * as echarts from 'echarts';
+import visual from '@/visual/js/visual';
+import EventHandler from '@/visual/js/event';
+import * as chart from '@/visual/js/echarts';
+import JSON5 from 'json5';
+import { parseColors } from '@/utils/color';
+import tool from '@/utils/tool';
+
+const props = defineProps({
+  node: Object
+});
+
+const chartDiv = ref();
+const currChart = ref(null);
+const initializing = ref(true);
+const currNode = ref(props.node);
+const eventHandler = new EventHandler(
+  inject('eventHandler', Function, true),
+  getCurrentInstance(),
+  currNode.value
+);
+
+const init = async(styleId) => {
+  initializing.value = true;
+  visual.initStyle(currNode.value, styleId);
+  await nextTick(() => initializing.value = false);
+};
+
+const loadData = tool.debounce(async() => {
+  const compStyle = currNode.value.currCompStyle || {};
+  const compData = currNode.value.compData || {};
+  const defaultOption = JSON5.parse(compStyle['jsonOption'] || '{}');
+  const dataList = (await visual.loadData(
+    compData,
+    eventHandler,
+    getData(),
+    currNode.value)).data || [];
+
+  const seriesData = [];
+  dataList.forEach(data => {
+    seriesData.push({
+      name: data['标签'] || data['标题'],
+      value: data['系列'] || data['数值'],
+    });
+  });
+
+  const option = {
+    animation: compStyle['animation'] || false,
+    color: parseColors(compStyle['colorScheme']),
+    title: chart.parseTitle(compStyle),
+    tooltip: chart.parseTooltip(compStyle),
+    legend: chart.parseLegend(compStyle),
+    series: [
+      {
+        ...parsePie(compStyle),
+        data: seriesData
+      }
+    ],
+    toolbox: chart.parseToolbox(compStyle)
+  };
+
+  await nextTick(() => {
+    currChart.value = markRaw(echarts.init(chartDiv.value));
+    currChart.value.setOption(Object.assign({}, option, defaultOption));
+    currChart.value.on('click', 'series', function (params) {
+      const data = {
+        标签: params.name,
+        系列: params.value,
+        系列值: params.value
+      };
+      eventHandler.trigger('点击数据项事件', data);
+    });
+  });
+  resize();
+});
+
+const parsePie = (compStyle) => {
+  const result = { type: 'pie' };
+
+  if (compStyle['series.padAngle']) {
+    result['padAngle'] = compStyle['series.padAngle'];
+  }
+
+  if (compStyle['series.radius']) {
+    result['radius'] = compStyle['series.radius'].split(',');
+  }
+
+  if (compStyle['series.borderRadius']) {
+    result['itemStyle'] = {
+      borderRadius: compStyle['series.borderRadius'].split(',')
+    };
+  }
+
+  if (compStyle['series.rose']) {
+    result['roseType'] = compStyle['series.roseType'];
+  }
+
+  return result;
+};
+
+const style = computed(() => {
+  const compStyle = currNode.value.currCompStyle || {};
+
+  let result = '';
+  result += visual.parseTpl('width: {value};', compStyle['width']);
+  result += visual.parseTpl('height: {value};', compStyle['height']);
+  return result;
+});
+
+const getData = () => {
+  return { inputParam: currNode.value.inputParam || {} };
+};
+
+const changeStyle = (styleId) => {
+  init(styleId);
+};
+
+const refresh = async() => {
+  await init();
+  loadData();
+};
+
+const resize = () => {
+  try {
+    currChart.value.resize();
+  } catch (e) {
+    console.log(e);
+  }
+};
+
+onMounted(async() => {
+  await init();
+  loadData();
+});
+
+defineExpose({ getData, changeStyle, refresh, loadData });
+</script>

package/src/visual/components/echarts/radar.vue

@@ -0,0 +1,196 @@
+<template>
+  <div
+    v-if="!initializing"
+    v-resize="resize"
+    class="vc-component"
+    :style="visual.parseStyle(currNode.currStyle)"
+  >
+    <div ref="chartDiv" class="vc-echarts-radar" :style="style"></div>
+  </div>
+  <div
+    v-else
+    v-loading="true"
+    element-loading-text=""
+    style="min-height: 30px;"
+    class="vc-component"
+    :style="visual.parseStyle(currNode.currStyle)"
+  ></div>
+</template>
+
+<script setup>
+import { ref, onMounted, computed, inject, getCurrentInstance, markRaw, nextTick } from 'vue';
+import * as echarts from 'echarts';
+import visual from '@/visual/js/visual';
+import EventHandler from '@/visual/js/event';
+import * as chart from '@/visual/js/echarts';
+import JSON5 from 'json5';
+import { parseColors } from '@/utils/color';
+import tool from '@/utils/tool';
+
+const props = defineProps({
+  node: Object
+});
+
+const chartDiv = ref();
+const currChart = ref(null);
+const initializing = ref(true);
+const currNode = ref(props.node);
+const eventHandler = new EventHandler(
+  inject('eventHandler', Function, true),
+  getCurrentInstance(),
+  currNode.value
+);
+
+const init = async(styleId) => {
+  initializing.value = true;
+  visual.initStyle(currNode.value, styleId);
+  await nextTick(() => initializing.value = false);
+};
+
+const loadData = tool.debounce(async() => {
+  const compStyle = currNode.value.currCompStyle || {};
+  const compData = currNode.value.compData || {};
+  let defaultOption = {};
+  try {
+    defaultOption = JSON5.parse(compStyle['jsonOption'] || '{}');
+  } catch (e) {
+    console.log('jsonOption解释出错', e)
+  }
+
+  const dataList = (await visual.loadData(
+    compData,
+    eventHandler,
+    getData(),
+    currNode.value)).data || [];
+
+  const indicatorData = [];
+  const legendData = [];
+  const seriesData = [];
+  const maxField = (compStyle.seriesList || []).find(item => item.dataType === 'maxValue');
+  (compStyle.seriesList || []).forEach(item => {
+    if (item.dataType === 'label') {
+      for (let i = 0; i < dataList.length; i++) {
+        indicatorData.push({
+          name: dataList[i][item.prop],
+          max: maxField && maxField.prop && dataList[i][maxField.prop] || 100
+        });
+      }
+    } else if (item.dataType === 'series') {
+      const fieldData = [];
+
+      for (let i = 0; i < dataList.length; i++) {
+        fieldData[i] = dataList[i][item.prop];
+      }
+
+      legendData.push(item.name);
+      seriesData.push({
+        name: item.name,
+        data: [{
+          name: item.name,
+          value: fieldData
+        }],
+        ...parseRadar(compStyle)
+      });
+    }
+  });
+
+  const option = {
+    animation: compStyle['animation'] || false,
+    color: parseColors(compStyle['colorScheme']),
+    title: chart.parseTitle(compStyle),
+    toolbox: chart.parseToolbox(compStyle),
+    tooltip: chart.parseTooltip(compStyle),
+    legend: chart.parseLegend(compStyle, legendData),
+    radar: {
+      ...parseRadar(compStyle),
+      indicator: indicatorData,
+    },
+    series: seriesData
+  };
+
+  await nextTick(() => {
+    currChart.value = markRaw(echarts.init(chartDiv.value));
+    currChart.value.setOption(Object.assign({}, option, defaultOption));
+    currChart.value.on('click', 'series', function(params) {
+      const data = {};
+      data['系列名'] = params.name;
+      data['系列值'] = params.value;
+      eventHandler.trigger('点击数据项事件', data);
+    });
+  });
+  resize();
+});
+
+const parseRadar = (compStyle) => {
+  const result = { type: 'radar' };
+
+  result['radius'] = compStyle['series.radius'] || '75%';
+  result['symbol'] = compStyle['series.symbol'] || 'none';
+  result['symbolSize'] = compStyle['series.symbolSize'] || 4;
+  if (compStyle['series.area']) {
+    result['areaStyle'] = {
+      opacity: compStyle['series.area.opacity']
+    };
+  }
+
+  result['axisName'] = {
+    show: !!compStyle['series.axisName'],
+    color: compStyle['series.axisName.color'] || '#333'
+  };
+
+  result['axisLine'] = {
+    show: !!compStyle['series.axisLine'],
+    lineStyle: {
+      color: compStyle['series.axisLine.color'] || '#ccc'
+    }
+  };
+
+  result['splitLine'] = {
+    show: !!compStyle['series.splitLine'],
+    lineStyle: {
+      color: compStyle['series.splitLine.color'] || '#ccc'
+    }
+  };
+
+  return result;
+};
+
+const style = computed(() => {
+  const compStyle = currNode.value.currCompStyle || {};
+
+  let result = '';
+  result += visual.parseTpl('width: {value};', compStyle['width']);
+  result += visual.parseTpl('height: {value};', compStyle['height']);
+  return result;
+});
+
+const getData = () => {
+  return {
+    inputParam: currNode.value.inputParam || {}
+  };
+};
+
+const changeStyle = (styleId) => {
+  init(styleId);
+};
+
+const refresh = async() => {
+  await init();
+  loadData();
+};
+
+const resize = () => {
+  try {
+    currChart.value.resize();
+  } catch (e) {
+    console.log(e);
+  }
+};
+
+onMounted(async() => {
+  await init();
+  loadData();
+});
+
+defineExpose({ getData, changeStyle, refresh, loadData });
+</script>

package/src/visual/components/echarts/scatter.vue

@@ -0,0 +1,153 @@
+<template>
+  <div
+    v-if="!initializing"
+    v-resize="resize"
+    class="vc-component"
+    :style="visual.parseStyle(currNode.currStyle)"
+  >
+    <div ref="chartDiv" class="vc-echarts-scatter" :style="style"></div>
+  </div>
+  <div
+    v-else
+    v-loading="true"
+    element-loading-text=""
+    style="min-height: 30px;"
+    class="vc-component"
+    :style="visual.parseStyle(currNode.currStyle)"
+  ></div>
+</template>
+
+<script setup>
+import { ref, onMounted, computed, inject, getCurrentInstance, markRaw, nextTick } from 'vue';
+import * as echarts from 'echarts';
+import visual from '@/visual/js/visual';
+import EventHandler from '@/visual/js/event';
+import * as chart from '@/visual/js/echarts';
+import JSON5 from 'json5';
+import { parseColors } from '@/utils/color';
+import tool from '@/utils/tool';
+
+const props = defineProps({
+  node: Object
+});
+
+const chartDiv = ref();
+const currChart = ref(null);
+const initializing = ref(true);
+const currNode = ref(props.node);
+const eventHandler = new EventHandler(
+  inject('eventHandler', Function, true),
+  getCurrentInstance(),
+  currNode.value
+);
+
+const init = async(styleId) => {
+  initializing.value = true;
+  visual.initStyle(currNode.value, styleId);
+  await nextTick(() => initializing.value = false);
+};
+
+const loadData = tool.debounce(async() => {
+  const compStyle = currNode.value.currCompStyle || {};
+  const compData = currNode.value.compData || {};
+  const padding = (compStyle['padding'] || '50px,20px,30px,20px').split(',');
+  let defaultOption = {};
+  try {
+    defaultOption = JSON5.parse(compStyle['jsonOption'] || '{}');
+  } catch (e) {
+    console.log('jsonOption解释出错', e)
+  }
+
+  const dataList = (await visual.loadData(
+    compData,
+    eventHandler,
+    getData(),
+    currNode.value)).data || [];
+
+  const legendData = [];
+  const labelData = [];
+  const seriesData = [];
+  (compStyle.seriesList || []).forEach(item => {
+    legendData.push(item.name);
+    labelData.push([]);
+    seriesData.push({
+      ...parseScatter(item.name, compStyle),
+      data: dataList.length > 0 ? dataList[0][item.prop] : [],
+    });
+  });
+
+  const option = {
+    animation: compStyle['animation'] || false,
+    color: parseColors(compStyle['colorScheme']),
+    title: chart.parseTitle(compStyle),
+    tooltip: chart.parseTooltip(compStyle),
+    legend: chart.parseLegend(compStyle, legendData),
+    grid: {
+      top: padding[0],
+      right: padding[1],
+      bottom: padding[2],
+      left: padding[3],
+      containLabel: true
+    },
+    xAxis: chart.parseAxis('xAxis', compStyle, [labelData]),
+    yAxis: chart.parseAxis('yAxis', compStyle, [labelData]),
+    series: seriesData,
+    toolbox: chart.parseToolbox(compStyle)
+  };
+
+  await nextTick(() => {
+    currChart.value = markRaw(echarts.init(chartDiv.value));
+    currChart.value.setOption(Object.assign({}, option, defaultOption));
+    currChart.value.on('click', 'series', function (params) {
+      eventHandler.trigger('点击数据项事件', { 系列值: params.data });
+    });
+  });
+  resize();
+});
+
+const parseScatter = (name, compStyle) => {
+  const result = { type: 'scatter', name: name };
+  result['symbol'] = compStyle['series.symbol'] || 'circle';
+  result['symbolSize'] = compStyle['series.symbolSize'] || 10;
+  return result;
+};
+
+const style = computed(() => {
+  const compStyle = currNode.value.currCompStyle || {};
+
+  let result = '';
+  result += visual.parseTpl('width: {value};', compStyle['width']);
+  result += visual.parseTpl('height: {value};', compStyle['height']);
+  return result;
+});
+
+const getData = () => {
+  return {
+    inputParam: currNode.value.inputParam || {}
+  };
+};
+
+const changeStyle = (styleId) => {
+  init(styleId);
+};
+
+const refresh = async() => {
+  await init();
+  loadData();
+};
+
+const resize = () => {
+  try {
+    currChart.value.resize();
+  } catch (e) {
+    console.log(e);
+  }
+};
+
+onMounted(async() => {
+  await init();
+  loadData();
+});
+
+defineExpose({ getData, changeStyle, refresh, loadData });
+</script>