@shijiu/jsview-vue 2.1.366-test.0 → 2.1.428

package/utils/JsViewVueWidget/JsvPieChart.vue

@@ -10,24 +10,29 @@
 -->
 
 <template>
-  <div v-for="(item, index) in finalData.slice().reverse()">
-    <JsvSector
-      :radius="props.radius"
-      :config="{
-        startAngle: Number(item.startAngle),
-        sweepAngle: Number(item.sweepAngle) + 1,
-        color: item.color,
-      }"
-      :id="`indexZ${index}`"
-      :animationTime="props.animationTime"
-      :centerPosition="props.centerPosition"
-      :extraTime="item.extraTime"
-    ></JsvSector>
+  <div :key="'pie-' + finalData.length">
+    <div v-for="(item, index) in finalData.slice().reverse()">
+      <JsvSector
+        :radius="props.radius"
+        :config="{
+          startAngle: Number(item.startAngle),
+          sweepAngle:
+            finalData.length == 1 || item.sweepAngle == 360
+              ? Number(item.sweepAngle)
+              : Number(item.sweepAngle) + 1,
+          color: item.color,
+        }"
+        :key="`indexZ${index}`"
+        :animationTime="props.animationTime"
+        :centerPosition="props.centerPosition"
+        :extraTime="item.extraTime"
+      ></JsvSector>
+    </div>
   </div>
 </template>
 
 <script setup>
-import { watch, reactive, nextTick } from "vue";
+import { reactive,watchEffect } from "vue";
 import JsvSector from "./JsvSector.vue";
 const props = defineProps({
   centerPosition: { type: Object, required: true },
@@ -49,21 +54,22 @@ const CheckData = (data) => {
   let totalPercent = 0;
   data.forEach((item) => {
     if (!item.hasOwnProperty("percent")) {
-      throw new Error("每一项必须包含percent属性");
+      console.error("每一项必须包含percent属性");
     }
-    if (item.percent <= 0 || item.percent > 100) {
-      throw new Error("每一项percent必须大于0或者小于等于100！");
+    if (item.percent < 0 || item.percent > 100) {
+      console.error("每一项percent必须大于0或者小于等于100！");
     }
     totalPercent += item.percent;
   });
   if (totalPercent < 99 || totalPercent > 101) {
-    throw new Error("percent属性值总和必须等于100！");
+    console.error("percent属性值总和必须等于100！");
   }
   return true;
 };
 CheckData(props.data);
 //过滤数据
 let finalData = reactive([]);
+let TempAngleArray = [];
 const filterData = (data) => {
   data.forEach((item, index) => {
     if (item.percent > previousPercent[index]) {
@@ -73,7 +79,7 @@ const filterData = (data) => {
     } else {
       extraTimeArray[index] = 0;
     }
-    item.angle = ((item.percent / 100) * 360).toFixed(2);
+    TempAngleArray.push(((item.percent / 100) * 360).toFixed(2));
     if (index == 0) {
       finalData.push({
         startAngle: Number(0).toFixed(2),
@@ -88,37 +94,31 @@ const filterData = (data) => {
           Number(finalData[index - 1].startAngle) +
           Number(finalData[index - 1].sweepAngle)
         ).toFixed(2),
-        sweepAngle: Number(item.angle).toFixed(2),
+        sweepAngle: Number(TempAngleArray[index]).toFixed(2),
         color: item.color,
         index: index,
         extraTime: extraTimeArray[index],
       });
     }
   });
+  //处理结束清理临时角度数组
+  TempAngleArray=[]
 };
 filterData(myData);
-watch(
-  props.data,
-  (n, o) => {
-    if (CheckData(n)) {
-      finalData.splice(0, finalData.length);
-      filterData(n);
-      myData = n;
-    }
-  },
-  { deep: true }
-);
-watch(myData, (n, o) => {
-  previousPercent = [];
+
+watchEffect(()=>{
+  if(CheckData(props.data)){
+    finalData.splice(0, finalData.length);
+      filterData(props.data);
+      myData = props.data;
+      previousPercent = [];
   extraTimeArray = [];
   myData.forEach((item, index) => {
     previousPercent.push(item.percent);
     extraTimeArray.push(0);
   });
-  n.forEach((item, index) => {
-    previousPercent.push(item.percent);
-  });
-});
+  }
+})
 </script>
 
 <style lang="scss" scoped></style>

package/utils/JsViewVueWidget/JsvQrcode/JsvQrcode.vue

@@ -7,6 +7,8 @@
  *            fgColor {string}          二维码前景色，默认值"#000000"，黑色
  *            bgColor {string}          二维码背景色，默认值"#ffffff"，白色
  *            level {string}            二维码的容错能力，可选值{'L':低, 'M':中, 'H':高, 'Q':最精细}，默认值'L'
+ *            instant {string}      是否立即加载(auto, sync, async), auto = async
+ *                                      是否当前帧限制(默认为非当前帧显示，不影响按键响应，但是会闪)
  *            imageSettings {Object}    设置中心logo图片，默认值为null，设置格式为：
  *                       {
  *                              src {string}        logo的url地址
@@ -14,25 +16,31 @@
  *                              height {int}     logo的高度
  *                       }
  -->
- <script>
+<script>
 import { Forge } from "@shijiu/jsview/dom/jsv-forge-define";
 import ForgeHandles from "../../JsViewVueTools/ForgeHandles";
+import { TextureInstantType } from "../../JsViewVueTools/JsvTextureDefines.ts";
 
 export default {
   props: {
     value: String,
     size: Number,
     fgColor: {
-        type: String,
-        default: "#000000"
+      type: String,
+      default: "#000000",
     },
     bgColor: {
-        type: String,
-        default: "#ffffff"
+      type: String,
+      default: "#ffffff",
     },
     level: {
-        type: String, // ，容错级别，分别是L(7%)、M(15%)、Q(25%)、H(30%),
-        default: "L"
+      type: String, // ，容错级别，分别是L(7%)、M(15%)、Q(25%)、H(30%),
+      default: "L",
+    },
+    sync: {
+      // 是否当前帧限制(默认为非当前帧显示，不影响按键响应，但是会闪)
+      type: String,
+      default: "auto", // QrCode的 auto = async
     },
     imageSettings: Object,
   },
@@ -58,10 +66,23 @@ export default {
       let view = null;
       let lp_params = null;
       const texture_manager = ForgeHandles.TextureManager;
+      let instantLoad;
+      switch (this.sync) {
+        case "sync":
+          instantLoad = TextureInstantType.Sync;
+          break;
+        case "async":
+          instantLoad = TextureInstantType.Async;
+          break;
+        case "auto":
+        default:
+          instantLoad = TextureInstantType.Auto;
+      }
       const qrcode_texture = texture_manager.GetQRCodeTexture(
         this.value,
         this.size,
         this.size,
+        instantLoad,
         Forge.QRCodeLevel[this.level],
         this.bgColor,
         this.fgColor
@@ -143,7 +164,6 @@ export default {
 };
 </script>
 
- <template>
+<template>
   <div :data-jsv-vw-innerview="innerViewId"></div>
 </template>
-

package/utils/JsViewVueWidget/JsvSceneTransition.vue

@@ -0,0 +1,174 @@
+<!--
+ * 【模块 export 内容】
+ * JsvSceneTransition:场景过渡组件。
+ *      props说明:
+ *          imageUrl     {String}    (必填) 显示图片的加载地址
+ *          displayWidth {Number}    (必填) 想要展示的宽度
+ *          ArraySet     {Array}     (必填) 模板配置项，包括：每个模块的width,height,left,top,url
+ *          style        {Object}    (必填) 横纵模板总长度和总宽度。(width,height)
+ *          onOff       {Boolean}   (必填) 组件挂载好后是否立即动画的开关，后续可通过改值为true开启。
+-->
+
+<template>
+  <div
+    :style="{
+      width: 1280,
+      height: 720,
+      transform: `scale3d(${props.displayWidth / 1280},${
+        props.displayWidth / 1280
+      },1)`,
+      transformOrigin: 'left top',
+    }"
+  >
+    <jsv-free-move-actor
+      v-for="(item, index) in props.ArraySet"
+      :ref="(el) => (refArray[index] = el)"
+      :top="item.top"
+      :left="item.left"
+      :width="item.width"
+      :height="item.height"
+    >
+      <jsv-mask-clip-div
+        :style="{
+          top: 0,
+          left: 0,
+          width: item.width,
+          height: item.height,
+        }"
+        :viewSrc="props.imageUrl"
+        :maskSrc="item.url"
+        :maskLeft="item.left / props.style.width"
+        :maskTop="item.top / props.style.height"
+        :maskWidth="item.width / props.style.width"
+        :maskHeight="item.height / props.style.height"
+      />
+    </jsv-free-move-actor>
+  </div>
+</template>
+
+<script setup>
+import JsvMaskClipDiv from "./JsvMaskClipDiv.vue";
+import { JsvFreeMoveActor } from "./JsvFreeMoveActor";
+import { onMounted, onBeforeUnmount, watch, shallowRef } from "vue";
+
+const props = defineProps({
+  imageUrl: { type: String, require: true },
+  displayWidth: { type: Number, require: true },
+  ArraySet: { type: Array, require: true },
+  style: { type: Object, require: true },
+  onOff: { type: Boolean, require: true },
+});
+
+//12个FreeMove引用
+const refArray = [];
+const controlArray = new Array(props.ArraySet.length).fill(null);
+
+//监听控制开关的值
+watch(
+  () => props.onOff,
+  (n, o) => {
+    if (n == true) {
+      MoveFunc();
+    }
+  }
+);
+
+//运动函数
+const MoveFunc = () => {
+  controlArray[0].run([
+    controlArray[0].action().setSpdAndAccel(-6, -9, 0, 1, null, null),
+    controlArray[0]
+      .condition()
+      .reachPosition(undefined, props.style.height + 100)
+      .then([controlArray[0].action().stopMoving()]),
+  ]);
+
+  controlArray[1].run([
+    controlArray[1].action().setSpdAndAccel(0, -5, 0, 1, null, null),
+    controlArray[1]
+      .condition()
+      .reachPosition(undefined, props.style.height + 100)
+      .then([controlArray[1].action().stopMoving()]),
+  ]);
+  controlArray[2].run([
+    controlArray[2].action().setSpdAndAccel(6, -9, 0, 1, null, null),
+    controlArray[2]
+      .condition()
+      .reachPosition(undefined, props.style.height + 100)
+      .then([controlArray[2].action().stopMoving()]),
+  ]);
+  controlArray[3].run([
+    controlArray[3].action().setSpdAndAccel(-6, -7, 0, 1, null, null),
+    controlArray[3]
+      .condition()
+      .reachPosition(undefined, props.style.height + 100)
+      .then([controlArray[3].action().stopMoving()]),
+  ]);
+  controlArray[4].run([
+    controlArray[4].action().setSpdAndAccel(0, -8, 0, 1, null, null),
+    controlArray[4]
+      .condition()
+      .reachPosition(undefined, props.style.height + 100)
+      .then([controlArray[4].action().stopMoving()]),
+  ]);
+  controlArray[5].run([
+    controlArray[5].action().setSpdAndAccel(6, -7, 0, 1, null, null),
+    controlArray[5]
+      .condition()
+      .reachPosition(undefined, props.style.height + 100)
+      .then([controlArray[5].action().stopMoving()]),
+  ]);
+  controlArray[6].run([
+    controlArray[6].action().setSpdAndAccel(-6, -4, 0, 1, null, null),
+    controlArray[6]
+      .condition()
+      .reachPosition(undefined, props.style.height + 100)
+      .then([controlArray[6].action().stopMoving()]),
+  ]);
+  controlArray[7].run([
+    controlArray[7].action().setSpdAndAccel(0, -8, 0, 1, null, null),
+    controlArray[7]
+      .condition()
+      .reachPosition(undefined, props.style.height + 100)
+      .then([controlArray[7].action().stopMoving()]),
+  ]);
+  controlArray[8].run([
+    controlArray[8].action().setSpdAndAccel(2, -7, 0, 1, null, null),
+    controlArray[8]
+      .condition()
+      .reachPosition(undefined, props.style.height + 100)
+      .then([controlArray[8].action().stopMoving()]),
+  ]);
+  controlArray[9].run([
+    controlArray[9].action().setSpdAndAccel(6, -7, 0, 1, null, null),
+    controlArray[9]
+      .condition()
+      .reachPosition(undefined, props.style.height + 100)
+      .then([controlArray[9].action().stopMoving()]),
+  ]);
+  controlArray[10].run([
+    controlArray[10].action().setSpdAndAccel(4, -4, 0, 1, null, null),
+    controlArray[10]
+      .condition()
+      .reachPosition(undefined, props.style.height + 100)
+      .then([controlArray[10].action().stopMoving()]),
+  ]);
+  controlArray[11].run([
+    controlArray[11].action().setSpdAndAccel(6, -4, 0, 1, null, null),
+    controlArray[11]
+      .condition()
+      .reachPosition(undefined, props.style.height + 100)
+      .then([controlArray[11].action().stopMoving()]),
+  ]);
+};
+onMounted(() => {
+  for (let i = 0; i < refArray.length; i++) {
+    controlArray[i] = refArray[i].control;
+  }
+  if (props.onOff == true) {
+    MoveFunc();
+  }
+});
+</script>
+
+<style scoped></style>

package/utils/JsViewVueWidget/JsvSwiper3D/JsvSwiper.vue

@@ -38,7 +38,7 @@
         <!-- 平移 -->
         <div
           v-for="(item, index) in items"
-          :key="item.image + `${index}`"
+          :key="item + `${index}`"
           :style="getItemStyle(index)"
         >
           <!-- 缩放 -->
@@ -46,7 +46,8 @@
             <slot
               name="itemView"
               :dataIndex="item.dataIndex"
-              :item="item"
+              :propsItem="item.propsItem"
+              :defineSize="item.defineSize"
             ></slot>
           </div>
         </div>
@@ -56,7 +57,7 @@
 </template>
 
 <script setup>
-import { reactive, shallowRef,onBeforeUnmount } from "vue";
+import { shallowReactive, shallowRef, onBeforeUnmount,reactive } from "vue";
 import { getKeyFramesGroup } from "../../JsViewVueTools/JsvDynamicKeyFrames.js";
 
 const props = defineProps({
@@ -73,16 +74,23 @@ const props = defineProps({
   onClick: { type: Function },
   onChange: { type: Function },
 });
+
+//展示数量低于3个时
+let showNumber = props.dispNumber < 3 ? 3 : props.dispNumber;
+if (showNumber % 2 == 0) {
+  showNumber = showNumber + 1;
+}
+//处理原数组
+let items = shallowReactive(new Array(showNumber + 2));
+
 let currentId;
 let preFocusedIdx;
 if (props.initIndex == undefined) {
-  currentId = Math.floor(props.dispNumber / 2);
+  currentId = Math.floor(showNumber / 2);
 } else {
   currentId = props.initIndex;
 }
 
-//处理原数组
-let items = reactive(new Array(props.dispNumber + 2));
 let allItems = [];
 
 let length = props.ItemArray.length;
@@ -92,8 +100,13 @@ if (length < props.dispNumber) {
 } else {
   for (let i = 0; i < props.ItemArray.length; i++) {
     allItems.push({
-      ...props.ItemArray[i],
+      propsItem:props.ItemArray[i],
       dataIndex: i,
+      defineSize:{
+        top:null,
+        width:null,
+        height:null
+      }
     });
   }
 }
@@ -105,9 +118,9 @@ let space = shallowRef(0);
 //如果item数量等于总数量
 let direction = "left";
 let focusedIdx = currentId;
-let prevNumber = Math.floor(props.dispNumber / 2) + 1;
+let prevNumber = Math.floor(showNumber / 2) + 1;
 const move1 = () => {
-  for (let i = 0; i < props.dispNumber + 2; i++) {
+  for (let i = 0; i < showNumber + 2; i++) {
     let itemIdx = focusedIdx - prevNumber + i;
     if (itemIdx < 0) {
       itemIdx += props.ItemArray.length;
@@ -142,7 +155,7 @@ for (let index = 0; index < items.length; index++) {
   if (index == items.length - 2) {
     let startPosX = props.layoutInfo.width / 2;
     let endPosX = props.layoutInfo.width - width / 2;
-    space.value = (endPosX - startPosX) / ((props.dispNumber - 1) / 2);
+    space.value = (endPosX - startPosX) / ((showNumber - 1) / 2);
   }
   leftArray[index] = { index, width };
 }
@@ -185,12 +198,12 @@ const getItemStyle = (index) => {
   if (index == items.length - 2) {
     let startPosX = props.layoutInfo.width / 2;
     let endPosX = props.layoutInfo.width - width / 2;
-    space.value = (endPosX - startPosX) / ((props.dispNumber - 1) / 2);
+    space.value = (endPosX - startPosX) / ((showNumber - 1) / 2);
   }
   left = leftArray[index].left;
-  items[index].top = top;
-  items[index].width = width;
-  items[index].height = height;
+  items[index].defineSize.top = top;
+  items[index].defineSize.width = width;
+  items[index].defineSize.height = height;
   return {
     zIndex,
     left,
@@ -204,11 +217,9 @@ const getItemStyle = (index) => {
 const scaleItemStyle = (index) => {
   const currentIndex = Math.abs(index - Math.floor(items.length / 2));
   const scale = 1 - currentIndex * props.sideScale; // 根据需要调整缩放比例
-  const backgroundImage = items[index].image;
   const width = props.initItemStyle.width * scale;
   const height = props.initItemStyle.height * scale;
 
-  items[index].backgroundImage = backgroundImage;
   if (direction == "left") {
     return {
       width,
@@ -458,20 +469,20 @@ const onActionObj = {
   onFocus: props.onFocus,
   onBlur: props.onBlur,
 };
-onBeforeUnmount(()=>{
-  styleShell.removeRule('slideToLeftA');
-  styleShell.removeRule('slideToLeftB');
-  styleShell.removeRule('slideToRightA')
-  styleShell.removeRule('slideToRightB')
-  styleShell.removeRule('slideToLeft0A')
-  styleShell.removeRule('slideToLeft0B')
-  styleShell.removeRule('slideToRight0A')
-  styleShell.removeRule('slideToRight0B')
-  styleShell.removeRule('lowerA')
-  styleShell.removeRule('lowerB')
-  styleShell.removeRule('biggerA')
-  styleShell.removeRule('biggerB')
-})
+onBeforeUnmount(() => {
+  styleShell.removeRule("slideToLeftA");
+  styleShell.removeRule("slideToLeftB");
+  styleShell.removeRule("slideToRightA");
+  styleShell.removeRule("slideToRightB");
+  styleShell.removeRule("slideToLeft0A");
+  styleShell.removeRule("slideToLeft0B");
+  styleShell.removeRule("slideToRight0A");
+  styleShell.removeRule("slideToRight0B");
+  styleShell.removeRule("lowerA");
+  styleShell.removeRule("lowerB");
+  styleShell.removeRule("biggerA");
+  styleShell.removeRule("biggerB");
+});
 </script>
 
 <style scoped></style>

package/utils/JsViewVueWidget/JsvTextBox.vue

@@ -20,6 +20,7 @@
 
 <script setup>
 import { computed } from "vue";
+import { JsvFlexDiv } from "./JsvFlexCell";
 
 const props = defineProps({
   style: Object,
@@ -39,51 +40,36 @@ const props = defineProps({
   },
 });
 
-const innerStyle = computed(() => {
-  let result = { ...props.style };
-  if (!result.verticalAlign) {
-    result.verticalAlign = props.verticalAlign;
+const computeAlignItems = computed(() => {
+  switch (props.verticalAlign) {
+    case "top":
+      return "flex-start";
+    case "bottom":
+      return "flex-end";
+    default:
+    case "center":
+      return "center";
   }
-  if (!result.lineAlign) {
-    result.lineAlign = props.lineAlign;
-  }
-  return result;
 });
-const disable = window.JsvDisableReactWrapper;
 </script>
 
 <template>
-  <div>
-    <div v-if="disable" :style="style">
-      <div :style="{ position: 'static', display: 'table' }">
-        <div
-          :className="className"
-          :style="{
-            position: 'static',
-            display: 'table-cell',
-            width: style.width,
-            height: style.height,
-            verticalAlign: verticalAlign,
-          }"
-          jsv-inherit-class="2"
-        >
-          <slot></slot>
-        </div>
-      </div>
-    </div>
+  <jsv-flex-div
+    :style="{
+      ...props.style,
+      flexDirection: 'row',
+      alignItems: computeAlignItems,
+    }"
+  >
     <div
-      v-else
-      :className="className"
       :style="{
-        ...style,
+        width: props.style.width,
         JsvTextLatex: enableLatex ? 1 : 0,
-        JsvTextVerticalAlign: verticalAlign,
         JsvTextLineAlign: lineAlign,
         JsvTextInnerDirection: textDirection,
       }"
-      jsv-inherit-class="1"
     >
-      <slot></slot>
+      <slot />
     </div>
-  </div>
+  </jsv-flex-div>
 </template>

package/utils/JsViewVueWidget/index.js

@@ -7,6 +7,7 @@
  */
 export { default as JsvActorMove, JsvActorMoveControl } from "./JsvActorMove";
 export * from "./JsvFreeMoveActor";
+export * from "./JsvFlexCell";
 export { default as JsvApic } from "./JsvApic/JsvApic";
 export { default as JsvApic2 } from "./JsvApic/JsvApic2";
 export { LoopType, ApicEndState } from "./JsvApic/JsvCommonLoopToolBase.js";
@@ -48,6 +49,7 @@ export { default as JsvPieChart } from "./JsvPieChart.vue";
 export { default as JsvSector } from "./JsvSector.vue";
 export { default as JsvConnectLine } from "./JsvConnectLine";
 export { default as JsvProgressBar } from "./JsvProgressBar.vue"
+export { default as JsvSceneTransition } from "./JsvSceneTransition.vue"
 //! 合并透过层样例, 更便于有声音无画面问题的调试
 import JsvNativeSharedDiv from "./JsvNativeSharedDiv.vue";
 export {