@arkxos/arkos-system 0.1.0

package/src/visual/components/row/index.vue

@@ -0,0 +1,175 @@
+<template>
+  <div
+    v-if="!initializing"
+    class="vc-column"
+    :class="currNode.children.length === 0 ? 'empty' : ''"
+    :style="visual.parseStyle(currNode.currStyle)"
+  >
+    <div class="vc-row" v-for="(row, index) in currNode.children" :key="index">
+      <div
+        v-for="(child, index2) in row.children"
+        :key="index2"
+        class="vc-col"
+        :style="'width: ' + child.width + '%'"
+      >
+        <Component
+          v-for="(comp, index3) in child.children"
+          :key="index3"
+          :ref="el => setRefs(el, comp)"
+          :is="comp.compName"
+          :node="comp"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, nextTick, inject, getCurrentInstance } from 'vue';
+import { useVisualCompStore } from '@/visual/js/visual-comp';
+import visual from '@/visual/js/visual';
+import EventHandler from '@/visual/js/event';
+
+const props = defineProps({
+  node: Object
+});
+const initializing = ref(true);
+const refs = ref({});
+const compName = ref('');
+const currNode = ref(props.node);
+const visualComp = useVisualCompStore();
+const eventHandler = new EventHandler(
+  inject('eventHandler', Function, true),
+  getCurrentInstance(),
+  currNode.value
+);
+
+const init = async(styleId) => {
+  initializing.value = true;
+  visual.initStyle(currNode.value, styleId);
+
+  if (currNode.value.type) {
+    const res = await visualComp.getVisualComp(currNode.value.type);
+    compName.value = res.name;
+  }
+
+  const widths = [];
+  const colCnt = parseInt(currNode.value.currCompStyle['col'] || '2');
+  if (!currNode.value.currCompStyle['span'] || currNode.value.currCompStyle['span'].split(',') < colCnt) {
+    const avgSpan = 100 / colCnt;
+    for (let index = 0; index < colCnt; index++) {
+      widths.push(avgSpan);
+    }
+  } else {
+    const spans = [];
+    let total = 0;
+    for (const item of currNode.value.currCompStyle['span'].split(',')) {
+      total += parseInt(item || '1');
+      spans.push(parseInt(item || '1'));
+    }
+    for (let index = 0; index < spans.length; index++) {
+      widths.push(spans[index] * 100 / total);
+    }
+  }
+
+  for (const row of currNode.value.children) {
+    for (let index = 0; index < row.children.length; index++) {
+      const col = row.children[index];
+      col.width = widths[index];
+      for (const comp of col.children) {
+        comp.compName = await getComp(comp.type)
+      }
+    }
+  }
+  await nextTick(() => initializing.value = false);
+};
+
+const getComp = async(type) => {
+  const res = await visualComp.getVisualComp(type);
+  return res.name;
+}
+
+const setRefs = (el, comp) => {
+  if (el) {
+    refs.value[comp.id] = el;
+  }
+};
+
+const validate = (callback) => {
+  const promise = new Promise((resolve, reject) => {
+    const keys = Object.keys(refs.value);
+
+    if (keys.length === 0) {
+      resolve(true);
+      return;
+    }
+
+    const validates = keys.map(key => {
+      const component = refs.value[key];
+      if (!component.validate) {
+        return Promise.resolve(true);
+      }
+
+      return new Promise((innerResolve, innerReject) => {
+        component.validate(valid => {
+          if (!valid) {
+            innerReject();
+          } else {
+            innerResolve();
+          }
+        }).catch(innerReject);
+      });
+    });
+
+    Promise.all(validates)
+      .then(() => {
+        resolve(true);
+      })
+      .catch(reject);
+  });
+
+  promise.then(valid => callback(valid));
+  return promise;
+};
+
+const changeStyle = (styleId) => {
+  init(styleId);
+};
+
+const refresh = async() => {
+  initializing.value = true;
+  await nextTick(() => initializing.value = false);
+};
+
+onMounted(async() => {
+  await init();
+  await eventHandler.trigger('初始化事件');
+});
+
+defineExpose({ validate, changeStyle, refresh });
+</script>
+
+<style scoped lang="scss">
+.vc-column {
+  display: flex;
+  flex-direction: column;
+  justify-content: start;
+  align-items: center;
+  flex-grow: 1;
+  .vc-row {
+    width: 100%;
+    flex-grow: 1;
+    display: flex;
+    flex-direction: row;
+    justify-content: start;
+    align-items: center;
+  }
+  .vc-col {
+    flex-grow: 1;
+    display: flex;
+    flex-direction: row;
+    justify-content: start;
+    align-items: center;
+  }
+}
+</style>

package/src/visual/components/search/index.vue

@@ -0,0 +1,96 @@
+<template>
+  <div
+    v-if="!initializing"
+    class="vc-component"
+    :style="visual.parseStyle(currNode.currStyle)"
+  >
+    <div
+      class="vc-search"
+      :style="visual.parseStyle(compStyle)"
+    >
+      <div class="vc-search-input">
+        <el-input :placeholder="compStyle['placeholder']" v-model="currValue" />
+      </div>
+      <div class="vc-search-icon">
+        <vc-icon iconId="018dc9c3efe489a7d117" @click="clickIcon" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, inject, getCurrentInstance, nextTick } from 'vue';
+import visual from '@/visual/js/visual';
+import EventHandler from '@/visual/js/event';
+
+const props = defineProps({
+  node: Object
+});
+
+const initializing = ref(true);
+const currNode = ref(props.node);
+const currValue = ref('');
+const compStyle = ref({});
+const eventHandler = new EventHandler(
+  inject('eventHandler', Function, true),
+  getCurrentInstance(),
+  currNode.value
+);
+
+const init = async(styleId) => {
+  initializing.value = true;
+  visual.initStyle(currNode.value, styleId);
+  compStyle.value = currNode.value.currCompStyle || {};
+  await nextTick(() => initializing.value = false);
+};
+
+const loadValue = async() => {
+  const dataList = (await visual.loadData(currNode.value.compData, eventHandler, getData(), currNode.value)).data || [];
+  currValue.value = dataList.length > 0 && dataList[0]['内容'] || '';
+};
+
+const clickIcon = () => {
+  eventHandler.trigger('点击查询事件');
+};
+
+const getData = () => {
+  return {
+    value: currValue.value || '',
+    inputParam: currNode.value.inputParam || {}
+  };
+};
+
+const changeStyle = (styleId) => {
+  init(styleId);
+};
+
+const refresh = async() => {
+  initializing.value = true;
+  await loadValue();
+  await nextTick(() => initializing.value = false);
+};
+
+onMounted(async() => {
+  await init();
+  await loadValue();
+  await eventHandler.trigger('初始化事件');
+});
+
+defineExpose({ getData, changeStyle, refresh });
+</script>
+
+<style scoped lang="scss">
+.vc-search {
+  flex-grow: 1;
+  .vc-search-input {
+    :deep(.el-input__wrapper) {
+      background-color: transparent!important;
+      border: none!important;
+      box-shadow: none!important;
+    }
+  }
+  .vc-search-icon {
+    cursor: pointer;
+  }
+}
+</style>

package/src/visual/components/tabs/index.vue

@@ -0,0 +1,103 @@
+<template>
+  <div
+    v-if="!initializing"
+    class="vc-component"
+    :style="visual.parseStyle(currNode.currStyle)"
+  >
+    <div class="vc-tabs">
+      <div class="vc-tabs-header" :style="{gap: gap}">
+        <div
+          v-for="(tabs, index) in currNode.children"
+          :key="index"
+          class="vc-tabs-header-item"
+          :style="getStyle(tabs)"
+          @click="clickTabs(tabs)"
+        >{{tabs.name || '标签名'}}</div>
+      </div>
+      <div
+        v-for="(tabs, index) in currNode.children"
+        :key="index"
+        class="vc-tabs-body"
+        v-show="tabs.id === currTabs.id"
+      >
+        <Component
+          v-for="child in tabs.children"
+          :key="child.id"
+          :is="'vc-' + child.type"
+          :node="child"
+          :inputParam="visual.getInputParam(child, props.inputParam)"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { getCurrentInstance, inject, nextTick, onMounted, ref } from 'vue';
+import visual from '@/visual/js/visual';
+import EventHandler from '@/visual/js/event';
+
+const props = defineProps({
+  node: Object,
+  inputParam: Object
+});
+const initializing = ref(true);
+const currNode = ref(props.node);
+const currTabs = ref();
+const gap = ref('');
+const eventHandler = new EventHandler(
+  inject('eventHandler', Function, true),
+  getCurrentInstance(),
+  currNode.value
+);
+
+const init = async(styleId) => {
+  initializing.value = true;
+  visual.initStyle(currNode.value, styleId);
+  const compStyle = currNode.value.currCompStyle || {};
+  gap.value = compStyle['gap'];
+  if (!currTabs.value) {
+    currTabs.value = currNode.value.children[0];
+  }
+  await nextTick(() => initializing.value = false);
+};
+
+const getStyle = (data) => {
+  const compStyle = currNode.value.currCompStyle || {};
+  const prefix = currTabs.value.id === data.id ? 'selected.' : '';
+  const styleList = compStyle[prefix + 'styleList'] || [];
+  const style = visual.getConditionStyle(styleList, data);
+  return style ? visual.parseStyle(style) : visual.parseFontStyle(compStyle);
+};
+
+const clickTabs = async(tabs) => {
+  currTabs.value = tabs;
+};
+
+const changeStyle = (styleId) => {
+  init(styleId);
+};
+
+const getData = () => {
+  return {};
+};
+
+const refresh = async() => {
+  initializing.value = true;
+  await nextTick(() => initializing.value = false);
+};
+
+onMounted(async() => {
+  await init();
+  await eventHandler.trigger('初始化事件');
+});
+
+defineExpose({ getData, changeStyle, refresh });
+</script>
+
+<style scoped lang="scss">
+.vc-tabs-header {
+  display: flex;
+  flex-direction: row;
+}
+</style>

package/src/visual/components/text/index.vue

@@ -0,0 +1,111 @@
+<template>
+  <div
+    v-if="!initializing"
+    class="vc-component"
+    :style="visual.parseStyle(currNode.currStyle)"
+    @click="() => eventHandler.trigger('点击事件')"
+  >
+    <span
+      v-if="richText"
+      class="vc-text vc-rich-text"
+      :style="style"
+      v-html="currValue"
+    ></span>
+    <span
+      v-else
+      class="vc-text"
+      :style="style"
+    >{{ currValue }}</span>
+  </div>
+  <div
+    v-else
+    v-loading="true"
+    element-loading-text=""
+    style="min-height: 30px;min-width: 30px; --el-mask-color: transparent;"
+    class="vc-component"
+    :style="visual.parseStyle(currNode.currStyle)"
+  ></div>
+</template>
+
+<script setup>
+import { ref, onMounted, inject, getCurrentInstance, nextTick, computed } from 'vue';
+import visual from '@/visual/js/visual';
+import EventHandler from '@/visual/js/event';
+import tool from '@/utils/tool';
+
+const props = defineProps({
+  node: Object,
+  inputParam: Object
+});
+const initializing = ref(true);
+const currNode = ref(props.node);
+const currValue = ref('');
+const richText = ref(false);
+const eventHandler = new EventHandler(
+  inject('eventHandler', Function, true),
+  getCurrentInstance(),
+  currNode.value
+);
+
+const init = async(styleId) => {
+  initializing.value = true;
+  visual.initStyle(currNode.value, styleId);
+  richText.value = currNode.value.currCompStyle['rich'] || false;
+  await nextTick(() => initializing.value = false);
+};
+
+const loadValue = tool.debounce(async() => {
+  initializing.value = true;
+  const dataList = (await visual.loadData(currNode.value.compData, eventHandler, getData(), currNode.value)).data || [];
+  const value = dataList.length > 0 && dataList[0]['内容'] || '';
+  const compStyle = currNode.value.currCompStyle || {};
+  if (compStyle['formatter'] === 'template') {
+    currValue.value = (compStyle['formatterTemplate'] || '')
+      .replace('{value}', value || value === 0 ? value : '');
+  } else if (compStyle['formatter'] === 'script') {
+    try {
+      currValue.value = new Function('value', 'return ' + compStyle['formatterScript'])(value);
+    } catch (e) {
+      console.log('格式化函数解释出错：', e);
+    }
+  } else {
+    currValue.value = value;
+  }
+  await nextTick(() => initializing.value = false);
+});
+
+const getData = () => {
+  return {
+    inputParam: Object.assign({}, currNode.value.inputParam, props.inputParam),
+    value: currValue.value
+  };
+};
+
+const changeStyle = (styleId) => {
+  init(styleId);
+};
+
+const style = computed(() => {
+  const compStyle = currNode.value.currCompStyle || {};
+  let style = visual.parseFontStyle(compStyle);
+  if (compStyle['limitLine']) {
+    style += 'display: -webkit-box;' +
+      '-webkit-box-orient: vertical;' +
+      `-webkit-line-clamp: ${compStyle['limitLine']};` +
+      'overflow: hidden;';
+  }
+  return style;
+});
+
+const refresh = () => {
+  loadValue();
+};
+
+onMounted(async() => {
+  await init();
+  loadValue();
+  await eventHandler.trigger('初始化事件');
+});
+
+defineExpose({ getData, changeStyle, refresh });
+</script>

package/src/visual/components/video/index.vue

@@ -0,0 +1,93 @@
+<template>
+  <div
+    v-if="!initializing"
+    class="vc-component"
+    :style="visual.parseStyle(currNode.currStyle)"
+    @click="() => eventHandler.trigger('点击事件')"
+  >
+    <div class="vc-video">
+      <video
+        v-if="videoUrl !== ''"
+        :src="videoUrl"
+        style="width:100%;height:100%"
+        controls
+      />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, nextTick, inject, getCurrentInstance } from 'vue'
+import visual from '@/visual/js/visual';
+import EventHandler from '@/visual/js/event';
+
+const props = defineProps({
+  node: Object
+});
+const initializing = ref(true);
+const currNode = ref(props.node);
+const eventHandler = new EventHandler(
+  inject('eventHandler', Function, true),
+  getCurrentInstance(),
+  currNode.value
+);
+
+const videoUrl = ref('');
+
+const init = async(styleId) => {
+  initializing.value = true;
+  visual.initStyle(currNode.value, styleId);
+  await nextTick(() => initializing.value = false);
+};
+
+const loadValue = async() => {
+  const dataList = (await visual.loadData(currNode.value.compData, eventHandler, getData(), currNode.value)).data || [];
+  videoUrl.value = dataList.length > 0 && dataList[0]['内容'] || '';
+};
+
+const getData = () => {
+  return { inputParam: currNode.value.inputParam || {} };
+};
+
+const changeStyle = (styleId) => {
+  init(styleId);
+};
+
+const refresh = async() => {
+  initializing.value = true;
+  await loadValue();
+  await nextTick(() => initializing.value = false);
+};
+
+onMounted(async() => {
+  await init();
+  await loadValue();
+  await eventHandler.trigger('初始化事件');
+});
+
+defineExpose({ getData, changeStyle, refresh });
+</script>
+
+<style scoped>
+.vc-component {
+  width: inherit;
+  height: inherit;
+}
+.vc-video {
+  height: 100%;
+  width: 100%;
+  flex: 1;
+  justify-content: center;
+  align-items: center;
+  display: flex;
+}
+.video-box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  position: relative;
+}
+</style>