@arkxos/arkos-system 0.1.0

package/src/visual/js/echarts.js

@@ -0,0 +1,220 @@
+export const parseTitle = (compStyle) => {
+  const result = {};
+  result['show'] = !!compStyle['title.show'];
+  addValue(result, 'text', compStyle['title.text']);
+  addValue(result, 'left', compStyle['title.left']);
+
+  const textStyle = {};
+  addValue(textStyle, 'color', compStyle['title.textStyle.color']);
+  addValue(textStyle, 'fontStyle', compStyle['title.textStyle.fontStyle']);
+  addValue(textStyle, 'fontWeight', compStyle['title.textStyle.fontWeight']);
+  addValue(textStyle, 'fontFamily', compStyle['title.textStyle.fontFamily']);
+  addValue(textStyle, 'fontSize', compStyle['title.textStyle.fontSize']);
+  result.textStyle = textStyle;
+
+  return result;
+};
+
+export const parseTooltip = (compStyle) => {
+  const result = {};
+  result['show'] = !!compStyle['tooltip.show'];
+
+  if (compStyle['tooltip.formatter']) {
+    result['formatter'] = function(params) {
+      return formatterTpl(params, compStyle['tooltip.formatter']);
+    };
+  }
+
+  addValue(result, 'trigger', compStyle['tooltip.trigger']);
+  addValue(result, 'backgroundColor', compStyle['tooltip.backgroundColor']);
+  addValue(result, 'borderColor', compStyle['tooltip.borderColor']);
+  addValue(result, 'confine', true);
+  return result;
+};
+
+/**
+ * 折线图、柱状图、K线图 : {a}（系列名称），{b}（类目值），{c}（数值）, {d}（无）
+ * 散点图 : {a}（系列名称），{b}（数据名称），{c}（数值数组）, {d}（无）
+ * 地图 : {a}（系列名称），{b}（区域名称），{c}（合并数值）, {d}（无）
+ * 饼图、仪表盘、漏斗图: {a}（系列名称），{b}（数据项名称），{c}（数值）, {d}（百分比）
+ * 示例：{b0}: {c0}<br />{b1}: {c1}
+ */
+const formatterTpl = (params, template) => {
+  if (!template) return '';
+
+  const paramList = Array.isArray(params) ? params : [params];
+  const valueMap = {
+    a: 'seriesName',
+    b: 'name',
+    c: 'value',
+    d: 'percent'
+  };
+  return template.replace(/\{([a-z])(\d*)}/g, function(match, key1, key2) {
+    const dataIndex = parseInt(key2 || '0');
+    if ((key2 || 0) >= paramList.length) return '--';
+
+    if (key1 === 'c' && !key2) {
+      if (paramList.length === 0) {
+        const value = paramList[0][valueMap[key1]];
+        return value || value === 0 ? value : '--';
+      } else {
+        const valueList = [];
+        paramList.forEach(param => {
+          const value = param[valueMap[key1]];
+          if (value || value === 0) {
+            valueList.push(value);
+          }
+        });
+        return valueList;
+      }
+    } else {
+      const value = paramList[dataIndex || 0][valueMap[key1 || 'a']];
+      return value || value === 0 ? value : '--';
+    }
+  });
+}
+
+export const parseToolbox = (compStyle) => {
+  return {
+    show: !!compStyle['toolbox.show'],
+    orient: compStyle['toolbox.orient'] || 'horizontal',
+    itemSize: compStyle['toolbox.itemSize'] || 15,
+    itemGap: compStyle['toolbox.itemGap'] || 8,
+    feature: {
+      dataView: { show: compStyle['toolbox.feature.dataView.show'], readOnly: false },
+      magicType: {
+        show: true,
+        type: [
+          compStyle['toolbox.feature.magicType.line'] ? 'line' : '',
+          compStyle['toolbox.feature.magicType.bar'] ? 'bar' : '',
+          compStyle['toolbox.feature.magicType.stack'] ? 'stack' : '',
+        ]
+      },
+      restore: { show: compStyle['toolbox.feature.restore.show'] },
+      saveAsImage: { show: compStyle['toolbox.feature.saveAsImage.show'] }
+    }
+  };
+};
+
+export const parseLegend = (compStyle, data) => {
+  const result = {};
+
+  result['show'] = !!compStyle['legend.show'];
+  addValue(result, 'type', compStyle['legend.type']);
+  addValue(result, 'orient', compStyle['legend.orient']);
+  addValue(result, 'align', compStyle['legend.align']);
+  addValue(result, 'top', compStyle['legend.top']);
+  addValue(result, 'left', compStyle['legend.left']);
+  addValue(result, 'width', compStyle['legend.width']);
+  addValue(result, 'height', compStyle['legend.height']);
+  addValue(result, 'itemSize', compStyle['legend.itemSize']);
+  addValue(result, 'itemGap', compStyle['legend.itemGap']);
+  addValue(result, 'icon', compStyle['legend.icon']);
+
+  const textStyle = {};
+  addValue(textStyle, 'color', compStyle['legend.textStyle.color']);
+  addValue(textStyle, 'fontStyle', compStyle['legend.textStyle.fontStyle']);
+  addValue(textStyle, 'fontWeight', compStyle['legend.textStyle.fontWeight']);
+  addValue(textStyle, 'fontFamily', compStyle['legend.textStyle.fontFamily']);
+  addValue(textStyle, 'fontSize', compStyle['legend.textStyle.fontSize']);
+  result.textStyle = textStyle;
+  result.data = data;
+
+  return result;
+};
+
+export const parseAxis = (type, compStyle, dataList) => {
+  const resultList = [];
+  dataList.forEach(data => {
+    const result = { type: compStyle[`${type}.type`] };
+    if (compStyle[`${type}.type`] === 'category') {
+      result['data'] = data;
+      result['boundaryGap'] = !!compStyle[`${type}.boundaryGap`];
+    }
+
+    result['show'] = !!compStyle[`${type}.show`];
+    result['axisLine'] = { show: !!compStyle[`${type}.axisLine`] };
+    result['axisTick'] = {
+      show: !!compStyle[`${type}.axisTick`],
+      alignWithLabel: !!compStyle[`${type}.axisTick.alignWithLabel`]
+    };
+    result['splitLine'] = { show: !!compStyle[`${type}.splitLine`] };
+    result['axisLabel'] = {
+      show: !!compStyle[`${type}.axisLabel`],
+      width: compStyle[`${type}.axisLabel.width`] || 500,
+      rotate: compStyle[`${type}.axisLabel.rotate`] || 0,
+      overflow: 'truncate',
+    };
+
+    if (compStyle[`${type}.type`] === 'value') {
+      if (compStyle[`${type}.scale`]) {
+        result['scale'] = true;
+        result['min'] = null;
+        result['max'] = null;
+      } else {
+        result['min'] = compStyle[`${type}.min`] || 0;
+        if (compStyle[`${type}.max`]) {
+          result['max'] = compStyle[`${type}.max`];
+        }
+      }
+      if (compStyle[`${type}.splitNumber`]) {
+        result['splitNumber'] = compStyle[`${type}.splitNumber`];
+      }
+    }
+
+    resultList.push(result);
+  });
+
+  return resultList;
+};
+
+export const parseSeries = (option) => {
+  if (option.type === 'line') {
+    return parseSeriesLine(option);
+  } else if (option.type === 'bar') {
+    return parseSeriesBar(option);
+  } else {
+    return {};
+  }
+};
+
+const parseSeriesLine = (option) => {
+  const result = {};
+  result['smooth'] = !!option['smooth'];
+  result['showSymbol'] = !!option['showSymbol'];
+  result['symbolSize'] = option['symbolSize'] || 4;
+  result['symbol'] = option['symbol'] || 'none';
+  result['lineStyle'] = { width: option['showLine'] ? (option['lineWidth'] || 2) : 0 };
+
+  if (option['showArea']) {
+    result['areaStyle'] = {
+      origin: 'start',
+      opacity: option['opacity'] || 0.7
+    };
+  }
+  return result;
+};
+
+const parseSeriesBar = (option) => {
+  const result = {};
+  if (option['transparent']) {
+    result['itemStyle'] = { color: 'transparent' };
+  }
+  if (option['label']) {
+    result['label'] = { show: true };
+  }
+  return result;
+};
+
+const addValue = (data, field, value) => {
+  if (typeof value !== 'undefined' && value !== null && value !== '') {
+    data[field] = value;
+  }
+};
+
+export default {
+  parseToolbox,
+  parseLegend,
+  parseAxis,
+  parseSeries
+};

package/src/visual/js/event.js

@@ -0,0 +1,476 @@
+import { ElMessage, ElMessageBox } from 'element-plus';
+import { useRouter } from 'vue-router';
+import api from '@/http/api';
+import tool from '@/utils/tool';
+import { store } from '@/pinia';
+import { useUserStore } from '@/pinia/modules/user';
+
+export default class EventHandler {
+  constructor(parent, comp, node) {
+    this.parent = parent;
+    this.comp = comp;
+    this.node = node;
+    this.globalParam = {};
+    this.childrenMap = {};
+    this.router = useRouter();
+    this.dialogQueue = [];
+    this.initInputParam();
+    this.intervalMap = {};
+
+    if (this.parent) {
+      this.parent.register(node.id, this);
+    }
+  }
+
+  setNode(node) {
+    this.node = node;
+    this.register(this.node.id, this);
+  }
+
+  getNode() {
+    return this.node;
+  }
+
+  setNodeId(id) {
+    this.node.id = id;
+  }
+
+  initInputParam() {
+    const inputParamList = this.node?.compData?.inputParamList;
+    if (!inputParamList || inputParamList.length === 0) return;
+
+    const data = {};
+    const param = this.getGlobalParam();
+    inputParamList.forEach(item => {
+      if (item.input) {
+        data[item.id] = item.value || '';
+      } else if (param) {
+        data[item.id] = param[item.value] || '';
+      }
+    });
+    this.setInputData(data);
+  }
+
+  register(childrenId, eventHandler) {
+    if (this.childrenMap[childrenId]) {
+      childrenId = tool.uuids();
+      eventHandler.setNodeId(childrenId);
+    }
+
+    this.childrenMap[childrenId] = eventHandler;
+    this.startInterval(childrenId, eventHandler);
+  }
+
+  startInterval(childrenId, eventHandler) {
+    const node = eventHandler.getNode();
+    if (node && node.compData && node.compData.autoload && node.compData.autoInterval > 0) {
+      const compFun = eventHandler.getCompFun();
+      if (compFun && compFun.loadData) {
+        this.intervalMap[node.id] = setInterval(() => {
+          compFun.loadData();
+        }, node.compData.autoInterval * 1000);
+      }
+    }
+  }
+
+  async trigger(eventName, data) {
+    if (!this.node.compEventList) return;
+    for (const event of this.node.compEventList) {
+      if (event.name === eventName) {
+        await this.parent.publish(event, data || this.getCompFun().getData());
+      }
+    }
+  }
+
+  async publish(event, data) {
+    if (this.parent) {
+      await this.parent.publish(event, data);
+    } else {
+      await this.triggerEvent(event, data);
+    }
+  }
+
+  async triggerEvent(event, data) {
+    if (!event || !event.actionList || event.actionList.length === 0) return;
+    for (const action of event.actionList) {
+      await this.triggerAction(action, data);
+    }
+  }
+
+  async triggerAction(action, actionData) {
+    if (action.condition && !this.checkCondition(action.conditionList, actionData)) return;
+
+    switch (action.name) {
+      case '切换状态':
+        this.changeStatus(action, actionData);
+        break;
+      case '表单校验':
+        await this.formValidate(action, actionData);
+        break;
+      case '传递参数':
+        this.sendParam(action, actionData);
+        break;
+      case '刷新组件':
+        this.refreshComp(action, actionData);
+        break;
+      case '调用脚本':
+        await this.runScript(action, actionData);
+        break;
+      case '操作数据':
+        this.operateData(action, actionData);
+        break;
+      case '链接页面':
+        this.showLinkPage(action, actionData);
+        break;
+      case '跳转菜单':
+        this.gotoMenu(action, actionData);
+        break;
+      case '关闭页面':
+        this.closePage(action, actionData);
+        break;
+      case '跳转页面':
+        this.gotoPage(action, actionData);
+        break;
+      case '系统登录':
+        await this.login(action, actionData);
+        break;
+      case '退出登录':
+        await this.logout();
+        break;
+    }
+  }
+
+  checkCondition(conditionList, actionData) {
+    let result = false;
+    (tool.groupBy(conditionList, (item) => [item.group || 999]) || []).forEach(conditionList => {
+      result = result || this.checkConditionList(conditionList, actionData);
+    });
+    return result;
+  }
+
+  checkConditionList(conditionList, actionData) {
+    let result = true;
+    (conditionList || []).forEach(condition => {
+      let testValue = '';
+      const conditions = condition.condition.split('.');
+
+      if (conditions.length >= 1 && conditions[1] === 'col') {
+        testValue = (actionData || {}).col || '';
+      } else if (conditions.length >= 1 && conditions[1] === 'row') {
+        if (conditions.length >= 3) {
+          testValue = ((actionData || {}).row || {})[conditions[3]];
+        }
+      }
+
+      switch (condition.type) {
+        case '包含':
+          result = result && (testValue || '').indexOf(condition.value || '') >= 0;
+          break;
+        case '不包含':
+          result = result && (testValue || '').indexOf(condition.value || '') === -1;
+          break;
+        case '等于':
+          result = result && (testValue || '') === (condition.value || '');
+          break;
+        case '不等于':
+          result = result && (testValue || '') !== (condition.value || '');
+          break;
+        case '大于':
+          result = result && parseFloat(testValue || '0') > parseFloat(condition.value || '0');
+          break;
+        case '大于等于':
+          result = result && parseFloat(testValue || '0') >= parseFloat(condition.value || '0');
+          break;
+        case '小于':
+          result = result && parseFloat(testValue || '0') < parseFloat(condition.value || '0');
+          break;
+        case '小于等于':
+          result = result && parseFloat(testValue || '0') <= parseFloat(condition.value || '0');
+          break;
+      }
+    });
+    return result;
+  }
+
+  changeStatus(action/*, actionData */) {
+    for (const key in (action.styleList || {})) {
+      const nodeId = key;
+      const styleId = action.styleList[key];
+      this.childrenMap[nodeId]?.getCompFun()?.changeStyle(styleId);
+    }
+  }
+
+  async formValidate(action/*, actionData */) {
+    const validates = (action.formList || []).map(nodeId => {
+      const component = this.childrenMap[nodeId]?.getCompFun();
+      if (!component || !component.validate) {
+        return Promise.resolve(true);
+      }
+
+      return new Promise((innerResolve, innerReject) => {
+        component.validate(valid => {
+          if (!valid) {
+            innerReject();
+          } else {
+            innerResolve();
+          }
+        }).catch(() => innerReject());
+      });
+    });
+
+    await Promise.all(validates);
+  }
+
+  sendParam(action, actionData) {
+    for (const key in (action.paramList || {})) {
+      const nodeId = key;
+      const paramList = action.paramList[key];
+      const data = {};
+      for (const param of paramList) {
+        if (param.empty) {
+          data[param.id] = '';
+          continue;
+        }
+
+        if (param.input) {
+          data[param.id] = param.fieldName || '';
+        } else {
+          if (!param.fieldName || param.fieldName.indexOf('.') < 0) continue;
+
+          const params = param.fieldName.split('.');
+          if (params.length >= 2 && params[1] === 'col') {
+            data[param.id] = (actionData || {}).col || '';
+          } else if (params.length >= 4 && params[1] === 'row') {
+            data[param.id] = ((actionData || {}).row || {})[params[3]] || '';
+          } else if (params.length === 3 && params[0] === 'event' && params[1] === 'data') {
+            data[param.id] = actionData[params[2]] || '';
+            if (!data[param.id] && params[2] === '内容') {
+              data[param.id] = actionData['value'] || '';
+            }
+          } else if (params.length > 2) {
+            const nodeData = this.childrenMap[params[0]].getCompData();
+            data[param.id] = (nodeData[params[1]] ? nodeData[params[1]][params[2]] : '') || '';
+          } else {
+            const nodeData = this.childrenMap[params[0]].getCompData();
+            data[param.id] = nodeData[params[1]] || '';
+          }
+        }
+      }
+
+      this.checkAndSetInputData(nodeId, data, 0);
+    }
+  }
+
+  refreshComp(action/*, actionData */) {
+    (action.refreshList || []).forEach(nodeId => {
+      this.childrenMap[nodeId]?.getCompFun()?.refresh();
+    });
+  }
+
+  async runScript(action, actionData) {
+    if (!action.scriptId) {
+      ElMessage.error('未配置执行脚本！');
+      return;
+    }
+
+    if (action.confirm) {
+      const result = await ElMessageBox.confirm(
+        action.confirmContent || '',
+        action.confirmTitle || '提示',
+        { type: 'warning' }).catch(() => {}
+      );
+      if (result !== 'confirm') {
+        return;
+      }
+    }
+
+    const res = await api.runScript(action.scriptId, this.getParams(action.paramList, actionData));
+    if (res.code === '1') {
+      ElMessage.success(res.message || '执行成功！');
+    }
+  }
+
+  operateData(/* prop, actionData */) {
+
+  }
+
+  gotoMenu(action, actionData) {
+    if (!action.gotoMenuId) return;
+    const query = this.getParams(action.paramList, actionData) || {};
+    if (action.gotoType === '本页跳转') {
+      this.router.push({ name: action.gotoMenuId, query: query })
+        .catch(e => console.log('页面跳转失败：', e));
+    } else if (action.gotoType === '新页面') {
+      const route = this.router.resolve({ name: action.gotoMenuId, query: query });
+      window.open(route.href, '_blank');
+    }
+  }
+
+  showLinkPage(action, actionData) {
+    const options = {
+      pageId: action.linkPageId,
+      showTitle: action.showTitle,
+      title: action.title,
+      fullscreen: action.fullscreen,
+      showWidth: action.showWidth && /^\d+$/.test(action.showWidth) ? (action.showWidth + 'px') : action.showWidth,
+      closeOnClickModal: action.closeOnClickModal,
+      showFooter: action.showFooter,
+      disabled: !action.canEdit,
+      dialogEdit: action.canEdit,
+      operate: action.canEdit ? '编辑' : '明细',
+      options: {
+        inputParam: this.getParams(action.paramList, actionData)
+      }
+    }
+    if (action.linkType === '弹窗') {
+      this.getCompFun().showDialog(options);
+    } else if (action.linkType === '抽屉') {
+      this.getCompFun().showDrawer(options);
+    }
+  }
+
+  closePage(action/*, actionData */) {
+    if (action.closeType === '当前窗口') {
+      this.closeDialog();
+    } else {
+      window.close();
+    }
+  }
+
+  gotoPage(action, actionData) {
+    if (!action.gotoPageId) return;
+    const params = this.getParams(action.paramList, actionData);
+    this.router.push({ path: '/page/' + action.gotoPageId, query: params })
+      .catch(e => console.log('跳转出错：' + e));
+  }
+
+  async login(action, actionData) {
+    const res = await api.login(this.getParams(action.paramList, actionData));
+    if (res.code === '1') {
+      const userStore = useUserStore(store);
+      userStore.setUser(res.data);
+      ElMessage.success(res.message || '登录成功！');
+    }
+  }
+
+  async logout() {
+    const res = await api.logout();
+    if (res.code === '1') {
+      const userStore = useUserStore(store);
+      userStore.clearStorage();
+      ElMessage.success(res.message || '退出登录成功！');
+    }
+  }
+
+  addDialog(option) {
+    this.dialogQueue.unshift(option);
+  }
+
+  closeDialog(option) {
+    if (this.parent) {
+      this.parent.closeDialog(option);
+    } else {
+      const head = this.dialogQueue.shift();
+      if (!option) {
+        head && (head.visible = false);
+      } else if (head && head !== option) {
+        head.visible = false;
+        this.closeDialog(option);
+      }
+    }
+  }
+
+  getParams(paramList, actionData) {
+    const inputParam = {};
+    (paramList || []).forEach(param => {
+      if (param.input) {
+        inputParam[param.name] = param.fieldName || '';
+      } else {
+        const params = (param.fieldName || '').split('.');
+        if (params.length >= 2 && params[1] === 'col') {
+          const value = (actionData || {}).col || '';
+          if (value) {
+            inputParam[param.name ? param.name : param.pageParamId || ''] = value;
+          }
+        } else if (params.length >= 4 && params[1] === 'row') {
+          const value = ((actionData || {}).row || {})[params[3]];
+          if (value) {
+            inputParam[param.name ? param.name : param.pageParamId || ''] = value;
+          }
+        } else if (params.length >= 3 && params[1] === 'row') {
+          const value = (actionData || {}).row || {};
+          if (value) {
+            inputParam[param.name ? param.name : param.pageParamId || ''] = value;
+          }
+        } else if (params.length === 3 && params[0] === 'event' && params[1] === 'data') {
+          inputParam[param.name ? param.name : param.pageParamId || ''] = actionData[params[2]] || '';
+        } else if (params[0] === 'inputParam') {
+          inputParam[param.name] = actionData[params[0]][params[1]];
+        } else if (this.childrenMap[params[0]]) {
+          const data = this.childrenMap[params[0]]?.getCompData();
+          if (params.length > 2) {
+            if (data[params[1]] && data[params[1]][params[2]]) {
+              inputParam[param.name] = data[params[1]][params[2]];
+            }
+          } else if (data && data[params[1]]) {
+            inputParam[param.name] = data[params[1]];
+          }
+        }
+      }
+    });
+    return inputParam;
+  }
+
+  getCompFun() {
+    return this.comp.exposed;
+  }
+
+  checkAndSetInputData(nodeId, data, times) {
+    if (times >= 10) return;
+
+    if (this.childrenMap[nodeId]) {
+      this.childrenMap[nodeId].setInputData(data);
+    } else {
+      setTimeout(() => this.checkAndSetInputData(nodeId, data, ++times), 100);
+    }
+  }
+
+  setInputData(data) {
+    if (!this.node.inputParam) {
+      this.node.inputParam = {};
+    }
+    Object.assign(this.node.inputParam, data);
+  }
+
+  getNodeData(nodeId) {
+    if (this.childrenMap && this.childrenMap[nodeId]) {
+      return this.childrenMap[nodeId].getCompData();
+    } else {
+      return this.parent?.getNodeData(nodeId) || {};
+    }
+  }
+
+  setGlobalParam(globalParam) {
+    this.globalParam = globalParam;
+  }
+
+  getGlobalParam() {
+    if (this.parent) {
+      return this.parent.getGlobalParam();
+    } else {
+      return this.globalParam;
+    }
+  }
+
+  getCompData() {
+    return this.getCompFun().getData ? this.getCompFun().getData() : {};
+  }
+
+  destroy() {
+    for (const interval in this.intervalMap) {
+      if (this.intervalMap[interval]) {
+        clearInterval(this.intervalMap[interval]);
+      }
+    }
+  }
+}