@arkxos/arkos-system 0.1.0

package/src/visual/components/data-table/index.vue

@@ -0,0 +1,260 @@
+<template>
+  <div
+    v-if="!initializing"
+    class="vc-component"
+    :style="visual.parseStyle(currNode.currStyle)"
+  >
+    <div
+      class="vc-data-table"
+      :style="visual.parseStyle(compStyle)"
+    >
+      <el-table
+        ref="dataTable"
+        v-bind="tableOptions"
+        :data="dataList"
+        class="vc-data-table-table"
+        :style="tableStyle"
+      >
+        <el-table-column
+          v-if="showCheckbox"
+          header-align="center"
+          align="center"
+          type="selection"
+          width="55"
+        />
+        <el-table-column
+          v-for="(column, index) in columnList"
+          :key="index"
+          v-bind="column.options"
+        >
+          <template #default="{ row }">
+            <div
+              v-if="column.fieldType === '日期'"
+              :style="column.style"
+              @click="() => cellClick(column.prop, row)"
+            >
+              {{row[column.prop] ? date.formatLongDate(row[column.prop], column.format) : ''}}
+            </div>
+            <div
+              v-else-if="column.fieldType === '字典'"
+              :style="column.style"
+              @click="() => cellClick(column.prop, row)"
+            >
+              <cc-show-dict :dictCode="column.dictCode" :dictValue="row[column.prop]" />
+            </div>
+            <div
+              v-else-if="column.fieldType === '数字'"
+              :style="column.style"
+              @click="() => cellClick(column.prop, row)"
+            >
+              {{tool.formatNumber(row[column.prop], column.point)}}
+            </div>
+            <div
+              v-else-if="column.fieldType === '图片'"
+              :style="column.style"
+              @click="() => cellClick(column.prop, row)"
+            >
+              <el-image
+                v-if="row[column.prop]"
+                style="display: inline-table"
+                preview-teleported
+                hide-on-click-modal
+                :src="imageUrl + row[column.prop]"
+                :preview-src-list="[imageUrl + row[column.prop]]"
+                fit="scale-down"
+              />
+            </div>
+            <div
+              v-else
+              :style="column.style"
+              @click="() => cellClick(column.prop, row)"
+            >{{row[column.prop]}}</div>
+          </template>
+        </el-table-column>
+      </el-table>
+      <div v-if="pagination" class="cc-pagination">
+        <el-pagination
+          layout="total, prev, pager, next, jumper, sizes"
+          :current-page="queryInfo.pageNumber"
+          :page-sizes="[10, 20, 50, 100, 500]"
+          :page-size="queryInfo.pageSize"
+          :total="dataTotal"
+          @current-change="(pageNumber) => queryTableData(pageNumber)"
+          @size-change="handleSizeChange"
+        />
+      </div>
+    </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, inject, getCurrentInstance, nextTick } from 'vue';
+import visual from '@/visual/js/visual';
+import EventHandler from '@/visual/js/event';
+import date from '@/utils/date';
+import tool from '@/utils/tool';
+
+const props = defineProps({
+  node: Object
+});
+const initializing = ref(true);
+const currNode = ref(props.node);
+const compStyle = ref({});
+const dataList = ref([]);
+const eventHandler = new EventHandler(
+  inject('eventHandler', Function, true),
+  getCurrentInstance(),
+  currNode.value
+);
+const dataTable = ref();
+const showCheckbox = ref(false);
+const tableOptions = ref({});
+const tableStyle = ref('');
+const columnList = ref([]);
+const imageUrl = ref(import.meta.env.VITE_IMAGE_PATH);
+
+const pagination = ref(false);
+const queryInfo = ref({
+  pageNumber: 1,
+  pageSize: 10
+});
+const dataTotal = ref(0);
+
+const init = async(styleId) => {
+  initializing.value = true;
+  visual.initStyle(currNode.value, styleId);
+  compStyle.value = currNode.value.currCompStyle || {};
+  pagination.value = currNode.value.compData.dataPage || false;
+  queryInfo.value.pageNumber = 1;
+  queryInfo.value.pageSize = currNode.value.compData.dataPageSize || 10;
+  showCheckbox.value = compStyle.value['header.checkbox'] || false;
+  initTableStyle();
+  initTableOptions();
+  initColumnList();
+  await nextTick(() => initializing.value = false);
+};
+
+const initTableStyle = () => {
+  tableStyle.value = '';
+  tableStyle.value += '--data-table-header-color: ' + (compStyle.value['header.color'] || 'inherit') + ';';
+  tableStyle.value += '--data-table-header-bg-color: ' + (compStyle.value['header.bgColor'] || 'inherit') + ';';
+  tableStyle.value += '--data-table-header-padding: ' +
+    (compStyle.value['header.padding'] || '10,5,10,5').split(',').join('px ') + 'px';
+};
+
+const initTableOptions = () => {
+  const options = {};
+  options.width = compStyle.value['width'] || '100%';
+  options.height = compStyle.value['height'] || '100%';
+  options.border = compStyle.value['border'] || false;
+  options.stripe = compStyle.value['stripe'] || false;
+  tableOptions.value = options;
+};
+
+const initColumnList = () => {
+  const list = [];
+  (compStyle.value.columnList || []).forEach(item => {
+    const column = {};
+    column.label = item.label;
+    column.prop = item.prop;
+    column.dictCode = item.dictCode;
+    column.fieldType = item.fieldType;
+    column.point = item.point;
+    column.format = item.format;
+
+    const options = {};
+    if (item.autoWidth) {
+      options.minWidth = item.width || 10;
+    } else {
+      options.width = item.width || 10;
+    }
+    options.label = item.label;
+    options.headerAlign = item.headerAlign;
+    options.align = item.align;
+    column.options = options;
+
+    column.style = visual.parseFontStyle(item);
+    list.push(column);
+  });
+  columnList.value = list;
+};
+
+const cellClick = (prop, row) => {
+  eventHandler.trigger('点击条目事件', row);
+};
+
+const handleSizeChange = (pageSize) => {
+  queryInfo.value.pageSize = pageSize;
+  queryTableData(1);
+};
+
+const queryTableData = tool.debounce(async(pageNumber) => {
+  if (typeof pageNumber !== 'undefined') {
+    queryInfo.value.pageNumber = pageNumber;
+  }
+
+  initializing.value = true;
+  const res = (await visual.loadData(currNode.value.compData, eventHandler, getData(), currNode.value));
+  dataList.value = res.data || [];
+  dataTotal.value = res.totalRecord || 0;
+  await nextTick(() => initializing.value = false);
+});
+
+const getData = () => {
+  return {
+    inputParam: currNode.value.inputParam || {},
+    dataList: dataTable.value?.getSelectionRows() || [],
+    ...queryInfo.value
+  };
+};
+
+const changeStyle = (styleId) => {
+  init(styleId);
+};
+
+const refresh = () => {
+  queryTableData(1);
+};
+
+onMounted(async() => {
+  await init();
+  queryTableData(1);
+  await eventHandler.trigger('初始化事件');
+});
+
+defineExpose({ getData, changeStyle, refresh });
+</script>
+
+<style scoped lang="scss">
+:deep(.el-table th.el-table__cell) {
+  background-color: var(--data-table-header-bg-color)!important;
+}
+:deep(.el-table th.el-table__cell .cell) {
+  padding: var(--data-table-header-padding)!important;
+}
+:deep(.el-table th.el-table__cell .cell) {
+  color: var(--data-table-header-color)!important;
+}
+:deep(.el-table th .cell) {
+  font-weight: normal!important;
+}
+:deep(.el-table td .cell) {
+  line-height: 1.5!important;
+  padding: 0 5px!important;
+}
+.cc-pagination {
+  margin-top: 5px;
+  flex-grow: 1;
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+}
+</style>

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

@@ -0,0 +1,173 @@
+<template>
+  <div
+    v-if="!initializing"
+    class="vc-component"
+    :style="visual.parseStyle(currNode.currStyle)"
+  >
+    <div ref="chartDiv" class="vc-echarts-annular" :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 JSON5 from 'json5';
+import tool from '@/utils/tool';
+
+const props = defineProps({
+  node: Object,
+  inputParam: 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 defaultOption = JSON5.parse(compStyle['jsonOption'] || '{}');
+  const dataList = (await visual.loadData(
+    currNode.value.compData,
+    eventHandler,
+    getData(),
+    currNode.value)).data || []
+  const data = dataList.length > 0 ? dataList[0] : {};
+  const gaugeData = [{
+    value: data['百分比'] || 0,
+    name: `{a|${data['显示值']}}` +
+      (data['标题'] ? `{b|${('\n' + data['标题'])}}` : '')
+  }];
+
+  const option = {
+    color: [compStyle['progressColor'] || '#5470c6'],
+    series: [
+      {
+        type: 'gauge',
+        startAngle: 90,
+        endAngle: -270,
+        pointer: {
+          show: false
+        },
+        progress: {
+          show: true,
+          overlap: false,
+          roundCap: true,
+          clip: false,
+        },
+        axisLine: {
+          lineStyle: {
+            width: compStyle['borderWidth'] || 8,
+            color: [
+              [1, compStyle['borderColor'] || 'rgba(0, 0, 0, 0.1)'],
+            ]
+          }
+        },
+        splitLine: {
+          show: false,
+          distance: 0,
+          length: 10
+        },
+        axisTick: {
+          show: false
+        },
+        axisLabel: {
+          show: false,
+          distance: 10
+        },
+        data: gaugeData,
+        title: {
+          show: true,
+          offsetCenter: ['0%', '5%'],
+          rich: {
+            a: {
+              color: compStyle['series.value.color'] || 'inherit',
+              fontSize: compStyle['series.value.fontSize'] || 14,
+              fontFamily: compStyle['series.value.fontFamily'],
+              fontWeight: compStyle['series.value.fontWeight'],
+              lineHeight: compStyle['series.value.fontSize'] || 14
+            },
+            b: {
+              color: compStyle['series.title.color'] || 'inherit',
+              fontSize: compStyle['series.title.fontSize'] || 14,
+              fontFamily: compStyle['series.title.fontFamily'],
+              fontWeight: compStyle['series.title.fontWeight'],
+              lineHeight: compStyle['series.value.fontSize'] || 14
+            }
+          }
+        },
+        detail: {
+          show: false,
+        }
+      }
+    ]
+  };
+
+  await nextTick(() => initializing.value = false);
+  await nextTick(() => {
+    currChart.value = markRaw(echarts.init(chartDiv.value));
+    currChart.value.setOption(Object.assign({}, option, defaultOption));
+  });
+  resize();
+});
+
+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: props.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/bar.vue

@@ -0,0 +1,172 @@
+<template>
+  <div
+    v-if="!initializing"
+    v-resize="resize"
+    class="vc-component"
+    :style="visual.parseStyle(currNode.currStyle)"
+  >
+    <div ref="chartDiv" class="vc-echarts-bar" :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 || [];
+
+  let labelData = [];
+  const legendData = [];
+  const seriesData = [];
+  (compStyle.seriesList || []).forEach(item => {
+    const fieldData = [];
+    for (let i = 0; i < dataList.length; i++) {
+      fieldData[i] = dataList[i][item.prop];
+    }
+
+    if (item.dataType === 'label') {
+      labelData = fieldData;
+    } else {
+      legendData.push(item.name);
+      seriesData.push({
+        type: item.type,
+        name: item.name,
+        data: fieldData,
+        stack: item.stack ? (item.stackName || 'Total') : null,
+        ...chart.parseSeries(item)
+      });
+    }
+  });
+
+  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) {
+      const data = {};
+
+      const label = compStyle.seriesList.find(item => item.dataType === 'label');
+      if (label) {
+        data[label.prop] = params.name;
+      }
+
+      data['系列名'] = params.seriesName;
+      data['系列值'] = params.value;
+      const series = compStyle.seriesList
+        .find(item => item.dataType === 'series' && item.name === params.seriesName);
+      if (series) {
+        data[series.prop] = params.value;
+      }
+
+      eventHandler.trigger('点击数据项事件', data);
+    });
+  });
+  resize();
+});
+
+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>