@utogether/udp-core 1.0.0

package/src/components/ReFlop/src/Filpper.tsx

@@ -0,0 +1,99 @@
+/*
+ * @Author: wei.li
+ * @Date: 2022-05-26 10:25:57
+ * @LastEditors: levi7754 levi7754@163.com
+ * @LastEditTime: 2025-04-16 14:12:03
+ * @Description: file content
+ */
+import { defineComponent, ref } from 'vue';
+import propTypes from '@/utils/propTypes';
+import './filpper.css';
+
+const props = {
+  // front paper text
+  // 前牌文字
+  frontText: propTypes.number.def(0),
+  // back paper text
+  // 后牌文字
+  backText: propTypes.number.def(1),
+  // flipping duration, please be consistent with the CSS animation-duration value.
+  // 翻牌动画时间，与CSS中设置的animation-duration保持一致
+  duration: propTypes.number.def(600)
+};
+
+export default defineComponent({
+  name: 'SuFlop',
+  props,
+  setup(props) {
+    const { frontText, backText, duration } = props;
+    const isFlipping = ref(false);
+    const flipType = ref('down');
+    const frontTextFromData = ref(frontText);
+    const backTextFromData = ref(backText);
+
+    const textClass = (number: number) => {
+      return 'number' + number;
+    };
+
+    const flip = (type: string, front: number, back: number) => {
+      // 如果处于翻转中，则不执行
+      if (isFlipping.value) return false;
+      frontTextFromData.value = front;
+      backTextFromData.value = back;
+      // 根据传递过来的type设置翻转方向
+      flipType.value = type;
+      // 设置翻转状态为true
+      isFlipping.value = true;
+
+      setTimeout(() => {
+        // 设置翻转状态为false
+        isFlipping.value = false;
+        frontTextFromData.value = back;
+      }, duration);
+    };
+
+    // 下翻牌
+    const flipDown = (front: any, back: any): void => {
+      flip('down', front, back);
+    };
+
+    // 上翻牌
+    const flipUp = (front: any, back: any): void => {
+      flip('up', front, back);
+    };
+
+    // 设置前牌文字
+    function setFront(text: number): void {
+      frontTextFromData.value = text;
+    }
+
+    // 设置后牌文字
+    const setBack = (text: number): void => {
+      backTextFromData.value = text;
+    };
+
+    return {
+      flipType,
+      isFlipping,
+      frontTextFromData,
+      backTextFromData,
+      textClass,
+      flipDown,
+      flipUp,
+      setFront,
+      setBack
+    };
+  },
+
+  render() {
+    const main = `m-flipper ${this.flipType} ${this.isFlipping ? 'go' : ''}`;
+    const front = `digital front ${this.textClass(this.frontTextFromData)}`;
+    const back = `digital back ${this.textClass(this.backTextFromData)}`;
+    return (
+      <div class={main}>
+        <div class={front} />
+        <div class={back} />
+      </div>
+    );
+  }
+});

package/src/components/ReFlop/src/filpper.css

@@ -0,0 +1,184 @@
+.m-flipper {
+  display: inline-block;
+  position: relative;
+  width: 60px;
+  height: 100px;
+  line-height: 100px;
+  border: solid 1px #000;
+  border-radius: 10px;
+  background: #fff;
+  font-size: 66px;
+  color: #fff;
+  box-shadow: 0 0 6px rgb(0 0 0 / 50%);
+  text-align: center;
+  font-family: 'Helvetica Neue';
+}
+
+.m-flipper .digital::before,
+.m-flipper .digital::after {
+  content: '';
+  position: absolute;
+  left: 0;
+  right: 0;
+  background: #000;
+  overflow: hidden;
+  box-sizing: border-box;
+}
+
+.m-flipper .digital::before {
+  top: 0;
+  bottom: 50%;
+  border-radius: 10px 10px 0 0;
+  border-bottom: solid 1px #666;
+}
+
+.m-flipper .digital::after {
+  top: 50%;
+  bottom: 0;
+  border-radius: 0 0 10px 10px;
+  line-height: 0;
+}
+
+/* 向下翻 */
+.m-flipper.down .front::before {
+  z-index: 3;
+}
+
+.m-flipper.down .back::after {
+  z-index: 2;
+  transform-origin: 50% 0%;
+  transform: perspective(160px) rotateX(180deg);
+}
+
+.m-flipper.down .front::after,
+.m-flipper.down .back::before {
+  z-index: 1;
+}
+
+.m-flipper.down.go .front::before {
+  transform-origin: 50% 100%;
+  animation: frontFlipDown 0.6s ease-in-out both;
+  box-shadow: 0 -2px 6px rgb(255 255 255 / 30%);
+  backface-visibility: hidden;
+}
+
+.m-flipper.down.go .back::after {
+  animation: backFlipDown 0.6s ease-in-out both;
+}
+
+/* 向上翻 */
+.m-flipper.up .front::after {
+  z-index: 3;
+}
+
+.m-flipper.up .back::before {
+  z-index: 2;
+  transform-origin: 50% 100%;
+  transform: perspective(160px) rotateX(-180deg);
+}
+
+.m-flipper.up .front::before,
+.m-flipper.up .back::after {
+  z-index: 1;
+}
+
+.m-flipper.up.go .front::after {
+  transform-origin: 50% 0;
+  animation: frontFlipUp 0.6s ease-in-out both;
+  box-shadow: 0 2px 6px rgb(255 255 255 / 30%);
+  backface-visibility: hidden;
+}
+
+.m-flipper.up.go .back::before {
+  animation: backFlipUp 0.6s ease-in-out both;
+}
+
+@keyframes frontFlipDown {
+  0% {
+    transform: perspective(160px) rotateX(0deg);
+  }
+
+  100% {
+    transform: perspective(160px) rotateX(-180deg);
+  }
+}
+
+@keyframes backFlipDown {
+  0% {
+    transform: perspective(160px) rotateX(180deg);
+  }
+
+  100% {
+    transform: perspective(160px) rotateX(0deg);
+  }
+}
+
+@keyframes frontFlipUp {
+  0% {
+    transform: perspective(160px) rotateX(0deg);
+  }
+
+  100% {
+    transform: perspective(160px) rotateX(180deg);
+  }
+}
+
+@keyframes backFlipUp {
+  0% {
+    transform: perspective(160px) rotateX(-180deg);
+  }
+
+  100% {
+    transform: perspective(160px) rotateX(0deg);
+  }
+}
+
+.m-flipper .number0::before,
+.m-flipper .number0::after {
+  content: '0';
+}
+
+.m-flipper .number1::before,
+.m-flipper .number1::after {
+  content: '1';
+}
+
+.m-flipper .number2::before,
+.m-flipper .number2::after {
+  content: '2';
+}
+
+.m-flipper .number3::before,
+.m-flipper .number3::after {
+  content: '3';
+}
+
+.m-flipper .number4::before,
+.m-flipper .number4::after {
+  content: '4';
+}
+
+.m-flipper .number5::before,
+.m-flipper .number5::after {
+  content: '5';
+}
+
+.m-flipper .number6::before,
+.m-flipper .number6::after {
+  content: '6';
+}
+
+.m-flipper .number7::before,
+.m-flipper .number7::after {
+  content: '7';
+}
+
+.m-flipper .number8::before,
+.m-flipper .number8::after {
+  content: '8';
+}
+
+.m-flipper .number9::before,
+.m-flipper .number9::after {
+  content: '9';
+}

package/src/components/ReFlop/src/index.vue

@@ -0,0 +1,126 @@
+<script setup lang="ts">
+import { ref, unref, nextTick, onUnmounted } from 'vue';
+import { templateRef } from '@vueuse/core';
+import flippers from './filpper';
+
+const timer = ref(null);
+const flipObjs = ref([]);
+
+const flipperHour1 = templateRef<HTMLElement | null>('flipperHour1', null);
+const flipperHour2 = templateRef<HTMLElement | null>('flipperHour2', null);
+const flipperMinute1 = templateRef<HTMLElement | null>('flipperMinute1', null);
+const flipperMinute2 = templateRef<HTMLElement | null>('flipperMinute2', null);
+const flipperSecond1 = templateRef<HTMLElement | null>('flipperSecond1', null);
+const flipperSecond2 = templateRef<HTMLElement | null>('flipperSecond2', null);
+
+// 初始化数字
+const init = () => {
+  const now = new Date();
+  const nowTimeStr = formatDate(new Date(now.getTime()), 'hhiiss');
+  for (let i = 0; i < flipObjs.value.length; i++) {
+    flipObjs?.value[i]?.setFront(nowTimeStr[i]);
+  }
+};
+
+// 开始计时
+const run = () => {
+  timer.value = setInterval(() => {
+    // 获取当前时间
+    const now = new Date();
+    const nowTimeStr = formatDate(new Date(now.getTime() - 1000), 'hhiiss');
+    const nextTimeStr = formatDate(now, 'hhiiss');
+    for (let i = 0; i < flipObjs.value.length; i++) {
+      if (nowTimeStr[i] === nextTimeStr[i]) {
+        continue;
+      }
+      flipObjs?.value[i]?.flipDown(nowTimeStr[i], nextTimeStr[i]);
+    }
+  }, 1000);
+};
+
+// 正则格式化日期
+const formatDate = (date: Date, dateFormat: string) => {
+  /* 单独格式化年份，根据y的字符数量输出年份
+     * 例如：yyyy => 2019
+            yy => 19
+            y => 9
+     */
+  if (/(y+)/.test(dateFormat)) {
+    dateFormat = dateFormat.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));
+  }
+  // 格式化月、日、时、分、秒
+  const o = {
+    'm+': date.getMonth() + 1,
+    'd+': date.getDate(),
+    'h+': date.getHours(),
+    'i+': date.getMinutes(),
+    's+': date.getSeconds()
+  };
+  for (const k in o) {
+    if (new RegExp(`(${k})`).test(dateFormat)) {
+      // 取出对应的值
+      const str = o[k] + '';
+      /* 根据设置的格式，输出对应的字符
+       * 例如: 早上8时，hh => 08，h => 8
+       * 但是，当数字>=10时，无论格式为一位还是多位，不做截取，这是与年份格式化不一致的地方
+       * 例如: 下午15时，hh => 15, h => 15
+       */
+      dateFormat = dateFormat.replace(RegExp.$1, RegExp.$1.length === 1 ? str : padLeftZero(str));
+    }
+  }
+  return dateFormat;
+};
+
+// 日期时间补零
+const padLeftZero = (str: string | any[]) => {
+  return ('00' + str).substr(str.length);
+};
+
+nextTick(() => {
+  flipObjs.value = [
+    unref(flipperHour1),
+    unref(flipperHour2),
+    unref(flipperMinute1),
+    unref(flipperMinute2),
+    unref(flipperSecond1),
+    unref(flipperSecond2)
+  ];
+
+  init();
+  run();
+});
+
+onUnmounted(() => {
+  if (timer.value) {
+    clearInterval(timer.value);
+    timer.value = null;
+  }
+});
+</script>
+
+<template>
+  <div class="flip-clock">
+    <flippers ref="flipperHour1" />
+    <flippers ref="flipperHour2" />
+    <em>:</em>
+    <flippers ref="flipperMinute1" />
+    <flippers ref="flipperMinute2" />
+    <em>:</em>
+    <flippers ref="flipperSecond1" />
+    <flippers ref="flipperSecond2" />
+  </div>
+</template>
+
+<style>
+.flip-clock .m-flipper {
+  margin: 0 3px;
+}
+
+.flip-clock em {
+  display: inline-block;
+  font-size: 66px;
+  font-style: normal;
+  line-height: 102px;
+  vertical-align: top;
+}
+</style>

package/src/components/ReFlowChart/index.ts

@@ -0,0 +1,24 @@
+/*
+ * @Author: wei.li
+ * @Date: 2022-05-26 10:25:57
+ * @LastEditors: wei.li
+ * @LastEditTime: 2022-08-24 13:38:17
+ * @Description: file content
+ */
+import { withInstall } from '@utogether/utils';
+import control from './src/Control.vue';
+import nodePanel from './src/NodePanel.vue';
+import dataDialog from './src/DataDialog.vue';
+
+/** LogicFlow流程图-控制面板 */
+const Control = withInstall(control);
+
+/** LogicFlow流程图-拖拽面板 */
+const NodePanel = withInstall(nodePanel);
+
+/** LogicFlow流程图-查看数据 */
+const DataDialog = withInstall(dataDialog);
+
+export { Control, NodePanel, DataDialog };
+
+// LogicFlow流程图文档：http://logic-flow.org/

package/src/components/ReFlowChart/src/Control.vue

@@ -0,0 +1,139 @@
+<script setup lang="ts">
+import { ref, unref, onMounted } from 'vue';
+import { LogicFlow } from '@logicflow/core';
+
+interface Props {
+  lf: LogicFlow;
+  catTurboData?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  lf: null
+});
+
+const emit = defineEmits<{
+  (e: 'catData'): void;
+}>();
+
+const controlButton3 = ref();
+const controlButton4 = ref();
+
+const focusIndex = ref<Number>(-1);
+const titleLists = ref([
+  {
+    icon: 'icon-zoom-out-hs',
+    text: '缩小',
+    size: '18',
+    disabled: false
+  },
+  {
+    icon: 'icon-enlarge-hs',
+    text: '放大',
+    size: '18',
+    disabled: false
+  },
+  {
+    icon: 'icon-full-screen-hs',
+    text: '适应',
+    size: '15',
+    disabled: false
+  },
+  {
+    icon: 'icon-previous-hs',
+    text: '上一步',
+    size: '15',
+    disabled: true
+  },
+  {
+    icon: 'icon-next-step-hs',
+    text: '下一步',
+    size: '17',
+    disabled: true
+  },
+  {
+    icon: 'icon-download-hs',
+    text: '下载图片',
+    size: '17',
+    disabled: false
+  },
+  {
+    icon: 'icon-watch-hs',
+    text: '查看数据',
+    size: '17',
+    disabled: false
+  }
+]);
+
+const onControl = (item, key) => {
+  ['zoom', 'zoom', 'resetZoom', 'undo', 'redo', 'getSnapshot'].forEach((v, i) => {
+    const domControl = props.lf;
+    if (key === 1) {
+      domControl.zoom(true);
+    }
+    if (key === 6) {
+      emit('catData');
+    }
+    if (key === i) {
+      domControl[v]();
+    }
+  });
+};
+
+const onEnter = key => {
+  focusIndex.value = key;
+};
+
+onMounted(() => {
+  props.lf.on('history:change', ({ data: { undoAble, redoAble } }) => {
+    unref(titleLists)[3].disabled = unref(controlButton3).disabled = !undoAble;
+    unref(titleLists)[4].disabled = unref(controlButton4).disabled = !redoAble;
+  });
+});
+</script>
+
+<template>
+  <div class="control-container">
+    <!-- 功能按钮 -->
+    <ul>
+      <li
+        v-for="(item, key) in titleLists"
+        :key="key"
+        :title="item.text"
+        class="dark:text-bg_color"
+        @mouseenter.prevent="onEnter(key)"
+        @mouseleave.prevent="focusIndex = -1"
+      >
+        <el-tooltip :content="item.text" :visible="focusIndex === key" placement="right">
+          <button
+            :ref="'controlButton' + key"
+            :disabled="item.disabled"
+            :style="{
+              cursor: item.disabled === false ? 'pointer' : 'not-allowed',
+              color: item.disabled === false ? '' : '#00000040',
+              background: 'transparent'
+            }"
+            @click="onControl(item, key)"
+          >
+            <span :class="'iconfont ' + item.icon" :style="{ fontSize: `${item.size}px` }" />
+          </button>
+        </el-tooltip>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<style scoped>
+.control-container {
+  background: hsl(0deg 0% 100% / 80%);
+  box-shadow: 0 1px 4px rgb(0 0 0 / 20%);
+}
+
+.control-container ul li {
+  margin: 10px;
+  text-align: center;
+}
+
+.control-container ul li span:hover {
+  color: var(--el-color-primary);
+}
+</style>

package/src/components/ReFlowChart/src/DataDialog.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import VueJsonPretty from 'vue-json-pretty';
+import 'vue-json-pretty/lib/styles.css';
+
+const props = defineProps({
+  graphData: Object
+});
+</script>
+
+<template>
+  <vue-json-pretty :path="'res'" :deep="3" :show-length="true" :data="props.graphData" />
+</template>