@arkxos/arkos-system 0.1.0

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

@@ -0,0 +1,203 @@
+<template>
+  <div
+    v-if="!loading"
+    ref="newsListRef"
+    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">
+            {{row[column.prop] ? date.formatLongDate(row[column.prop], column.format) : ''}}
+          </div>
+          <div v-else-if="column.fieldType === '字典'" :style="column.style">
+            <cc-show-dict :dictCode="column.dictCode" :dictValue="row[column.prop]" />
+          </div>
+          <div v-else-if="column.fieldType === '数字'" :style="column.style">
+            {{tool.formatNumber(row[column.prop], column.point)}}
+          </div>
+          <div v-else-if="column.fieldType === '图片'" :style="column.style">
+            <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">{{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="() => {}"
+        @size-change="() => {}"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, watch, nextTick, onMounted } from 'vue';
+import visual from '@/visual/js/visual';
+import date from '@/utils/date';
+import tool from '@/utils/tool';
+
+const props = defineProps({
+  node: Object,
+  compStyle: Object,
+  compData: Object
+});
+const currNode = ref(props.node);
+const dataList = ref([{}]);
+const loading = ref(true);
+const showCheckbox = ref(false);
+const tableStyle = ref('');
+const tableOptions = 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(100);
+
+const init = async() => {
+  loading.value = true;
+  if (currNode.value.compData.dataSourceType === '') {
+    currNode.value.compData.dataSourceType = '静态数据';
+  }
+  pagination.value = currNode.value.compData.dataPage || false;
+  queryInfo.value.pageNumber = 1;
+  queryInfo.value.pageSize = currNode.value.compData.dataPageSize || 10;
+
+  showCheckbox.value = (props.compStyle || {})['header.checkbox'] || false;
+  initTableStyle();
+  initTableOptions();
+  initColumnList();
+  await nextTick(() => loading.value = false);
+};
+
+const initTableStyle = () => {
+  const compStyle = props.compStyle || {};
+  tableStyle.value = '';
+  tableStyle.value += '--data-table-header-color: ' + (compStyle['header.color'] || 'inherit') + ';';
+  tableStyle.value += '--data-table-header-bg-color: ' + (compStyle['header.bgColor'] || 'inherit') + ';';
+  tableStyle.value += '--data-table-header-padding: ' +
+    (compStyle['header.padding'] || '10,5,10,5').split(',').join('px ') + 'px';
+};
+
+const initTableOptions = () => {
+  const compStyle = props.compStyle || {};
+  const options = {};
+  options.width = compStyle['width'] || '100%';
+  options.height = compStyle['height'] || '100%';
+  options.border = compStyle['border'] || false;
+  options.stripe = compStyle['stripe'] || false;
+  tableOptions.value = options;
+};
+
+const initColumnList = () => {
+  const compStyle = props.compStyle || {};
+  const list = [];
+  (compStyle.columnList || []).forEach(item => {
+    const column = {};
+
+    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 loadDataList = async() => {
+  loading.value = true;
+  const page = await visual.loadData(props.compData, {}, {}, currNode.value) || {};
+  dataTotal.value = page.totalRecord || 0;
+  dataList.value = page.data || [];
+  currNode.value.compData.dataList = JSON.stringify(dataList.value);
+  await nextTick(() => loading.value = false);
+};
+
+watch(() => props.compStyle, () => {
+  init();
+}, { deep: true });
+
+watch(() => props.compData?.refresh, () => {
+  loadDataList();
+});
+
+onMounted(async() => {
+  await init();
+  await loadDataList();
+});
+</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/admin/visual/components/echarts/annular.vue

@@ -0,0 +1,140 @@
+<template>
+  <div ref="chartDiv" :style="currStyle"></div>
+</template>
+
+<script setup>
+import { ref, watch, onMounted, nextTick, markRaw } from 'vue';
+import * as echarts from 'echarts';
+import visual from '@/visual/js/visual';
+import JSON5 from 'json5';
+
+const props = defineProps({
+  node: Object,
+  compStyle: Object,
+  compData: Object,
+  inputParam: Object
+});
+
+const currNode = ref(props.node);
+const chartDiv = ref();
+const currChart = ref(null);
+const currStyle = ref();
+
+const init = async() => {
+  if (currNode.value.compData.dataSourceType === '') {
+    currNode.value.compData.dataSourceType = '静态数据';
+  }
+  const compStyle = props.compStyle || {};
+  let style = '';
+  style += visual.parseTpl('width: {value};', compStyle['width']);
+  style += visual.parseTpl('height: {value};', compStyle['height']);
+  currStyle.value = style;
+  let defaultOption = {};
+  try {
+    defaultOption = JSON5.parse(compStyle['jsonOption'] || '{}');
+  } catch (e) {
+    console.log('jsonOption解释出错', e)
+  }
+  const dataList = (await visual.loadData(
+    props.compData,
+    {},
+    { inputParam: props.inputParam },
+    currNode.value)).data || [];
+  currNode.value.compData.dataList = JSON.stringify(dataList);
+  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(() => {
+    try {
+      if (currChart.value) {
+        echarts.dispose(chartDiv.value);
+      }
+      currChart.value = markRaw(echarts.init(chartDiv.value));
+      currChart.value.setOption(Object.assign({}, option, defaultOption));
+    } catch (e) {
+      console.log(e);
+    }
+  });
+  await nextTick(() => currChart.value.resize());
+};
+
+watch(() => props.compStyle, () => {
+  init();
+}, { deep: true });
+
+watch(() => props.compData?.refresh, () => {
+  init();
+});
+
+onMounted(() => {
+  init();
+});
+</script>

package/src/admin/visual/components/echarts/bar.vue

@@ -0,0 +1,115 @@
+<template>
+  <div ref="chartDiv" :style="currStyle"></div>
+</template>
+
+<script setup>
+import { ref, watch, onMounted, nextTick, markRaw } from 'vue';
+import * as echarts from 'echarts';
+import visual from '@/visual/js/visual';
+import * as chart from '@/visual/js/echarts';
+import JSON5 from 'json5';
+import { parseColors } from '@/utils/color';
+
+const props = defineProps({
+  node: Object,
+  compStyle: Object,
+  compData: Object
+});
+const currNode = ref(props.node);
+const chartDiv = ref();
+const currChart = ref(null);
+const currStyle = ref();
+
+const init = async() => {
+  if (currNode.value.compData.dataSourceType === '') {
+    currNode.value.compData.dataSourceType = '静态数据';
+  }
+  const compStyle = props.compStyle || {};
+  let style = '';
+  style += visual.parseTpl('width: {value};', compStyle['width']);
+  style += visual.parseTpl('height: {value};', compStyle['height']);
+  currStyle.value = style;
+
+  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(props.compData, {}, {}, currNode.value)).data || [];
+  currNode.value.compData.dataList = JSON.stringify(dataList);
+
+  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: {
+      trigger: 'axis',
+      axisPointer: {
+        type: 'shadow'
+      }
+    },
+    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(() => {
+    try {
+      if (currChart.value) {
+        echarts.dispose(chartDiv.value);
+      }
+      currChart.value = markRaw(echarts.init(chartDiv.value));
+      currChart.value.setOption(Object.assign({}, option, defaultOption));
+    } catch (e) {
+      console.log(e);
+    }
+  });
+  await nextTick(() => currChart.value.resize());
+};
+
+watch(() => props.compStyle, () => {
+  init();
+}, { deep: true });
+
+watch(() => props.compData?.refresh, () => {
+  init();
+});
+
+onMounted(() => {
+  init();
+});
+</script>

package/src/admin/visual/components/echarts/funnel.vue

@@ -0,0 +1,115 @@
+<template>
+  <div ref="chartDiv" :style="currStyle"></div>
+</template>
+
+<script setup>
+import { ref, watch, onMounted, nextTick, markRaw } from 'vue';
+import * as echarts from 'echarts';
+import visual from '@/visual/js/visual';
+import * as chart from '@/visual/js/echarts';
+import JSON5 from 'json5';
+import { parseColors } from '@/utils/color';
+
+const props = defineProps({
+  node: Object,
+  compStyle: Object,
+  compData: Object
+});
+const currNode = ref(props.node);
+const chartDiv = ref();
+const currChart = ref(null);
+const currStyle = ref();
+
+const init = async() => {
+  if (currNode.value.compData.dataSourceType === '') {
+    currNode.value.compData.dataSourceType = '静态数据';
+  }
+  const compStyle = props.compStyle || {};
+  let style = '';
+  style += visual.parseTpl('width: {value};', compStyle['width']);
+  style += visual.parseTpl('height: {value};', compStyle['height']);
+  currStyle.value = style;
+
+  let defaultOption = {};
+  try {
+    defaultOption = JSON5.parse(compStyle['jsonOption'] || '{}');
+  } catch (e) {
+    console.log('jsonOption解释出错', e)
+  }
+  const dataList = (await visual.loadData(props.compData, {}, {}, currNode.value)).data || [];
+  currNode.value.compData.dataList = JSON.stringify(dataList);
+
+  const seriesData = [];
+  dataList.forEach(data => {
+    seriesData.push({
+      name: data['标签'],
+      value: data['系列'],
+    });
+  });
+
+  const option = {
+    animation: compStyle['animation'] || false,
+    color: parseColors(compStyle['colorScheme']),
+    title: chart.parseTitle(compStyle),
+    tooltip: chart.parseTooltip(compStyle),
+    legend: chart.parseLegend(compStyle),
+    series: [
+      {
+        ...parseFunnel(compStyle),
+        data: seriesData
+      }
+    ],
+    toolbox: chart.parseToolbox(compStyle)
+  };
+
+  await nextTick(() => {
+    try {
+      if (currChart.value) {
+        echarts.dispose(chartDiv.value);
+      }
+      currChart.value = markRaw(echarts.init(chartDiv.value));
+      currChart.value.setOption(Object.assign({}, option, defaultOption));
+    } catch (e) {
+      console.log(e);
+    }
+  });
+  await nextTick(() => currChart.value.resize());
+};
+
+const parseFunnel = (compStyle) => {
+  const result = { type: 'funnel' };
+
+  result['min'] = compStyle['series.min'] || 0;
+  result['max'] = compStyle['series.max'] || 100;
+  result['minSize'] = compStyle['series.minSize'] || '0%';
+  result['maxSize'] = compStyle['series.maxSize'] || '100%';
+  result['sort'] = compStyle['series.sort'] || 'descending';
+  result['orient'] = compStyle['series.orient'] || 'vertical';
+  result['funnelAlign'] = compStyle['series.funnelAlign'] || 'center';
+  result['gap'] = compStyle['series.gap'] || 0;
+  result['label'] = {
+    show: !!compStyle['series.label'],
+    position: compStyle['series.position'] || 'inside',
+  }
+  const margin = (compStyle['margin'] || '10,0,30,0').split(',');
+  if (margin.length >= 4) {
+    result['top'] = parseInt(margin[0]);
+    result['right'] = parseInt(margin[1]);
+    result['bottom'] = parseInt(margin[2]);
+    result['left'] = parseInt(margin[3]);
+  }
+  return result;
+};
+
+watch(() => props.compStyle, () => {
+  init();
+}, { deep: true });
+
+watch(() => props.compData?.refresh, () => {
+  init();
+});
+
+onMounted(() => {
+  init();
+});
+</script>