@shijiu/jsview-vue-samples 2.2.426-test.0 → 2.3.151-test.0

package/DemoForOperator/Focus/SwipeLight/SwipeLightBox.vue

@@ -0,0 +1,62 @@
+<template>
+  <jsv-texture-anim
+    :src="lightImg"
+    :animation="swipAnim"
+    :width="size.width"
+    :height="size.height"
+    :duration="msDuration"
+    :transform="transform"
+    :borderRadius="borderRadius"
+    :repeat="repeat"
+    :autoStart="true"
+    :onAnimationEnd="onAnimationEnd"
+  ></jsv-texture-anim>
+</template>
+<script setup>
+import { JsvTextureAnim } from "jsview";
+
+const props = defineProps({
+  lightImg: {
+    type: String,
+  },
+  size: {
+    type: Object,
+    required: true,
+  },
+  borderRadius: {
+    type: Number,
+    default: 0,
+  },
+  duration: {
+    //秒
+    type: Number,
+    default: 1,
+  },
+  angle: {
+    //度数
+    type: Number,
+    default: 30,
+  },
+  lightWidth: {
+    type: Number,
+    default: 100,
+  },
+  repeat: {
+    // 重复次数, -1 无限循环; >=0 重复次数
+    type: Number,
+    default: 0,
+  },
+  onAnimEnd: {
+    type: Function,
+  },
+});
+
+const msDuration = Math.round(props.duration * 1000);
+const transform = `scale3d(0.5, 1, 1) rotate3d(0,0,1, ${props.angle}deg)`;
+const swipAnim =
+  "{from {transform: translate3d(-100%, 0, 0);} to {transform: translate3d(100%, 0, 0);}}";
+
+function onAnimationEnd() {
+  props.onAnimEnd?.();
+}
+</script>

package/DemoForOperator/Focus/SwipeLight/SwipeLightPage.vue

@@ -0,0 +1,44 @@
+<template>
+  <JsvPreload :preloadList="preload_info"></JsvPreload>
+  <metro-widget
+    name="swipeLight"
+    :left="widgetLayout.left"
+    :top="widgetLayout.top"
+    :width="widgetLayout.width"
+    :height="widgetLayout.height"
+    :provideData="provideData"
+    :direction="HORIZONTAL"
+    :measures="measures"
+    :onEdge="onEdge"
+    :padding="padding"
+  >
+    <template #renderItem="{ data, onAction }">
+      <item :data="data" :onAction="onAction" :lightImg="swipLight" />
+    </template>
+  </metro-widget>
+</template>
+
+<script setup>
+import { MetroWidget, HORIZONTAL, JsvPreload, buildPreloadInfo } from "jsview";
+import Item from "./Item.vue";
+import { widgetLayout, padding, data } from "../CommonPageSetting";
+
+const props = defineProps({
+  onEdge: Function,
+});
+const swipLight = "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/DemoForOperator/Focus/SwipeLight/SwipeLightPage/swipLight.png";
+const preload_info = [buildPreloadInfo(swipLight)];
+
+const provideData = () => {
+  return data;
+};
+
+const measures = (data) => {
+  return {
+    width: data.width,
+    height: data.height,
+    marginRight: data.marginRight,
+    marginBottom: data.marginBottom,
+  };
+};
+</script>

package/DemoForOperator/FrameShadow/App.vue

@@ -0,0 +1,193 @@
+<template>
+  <div>
+    <div :style="{ width: 1280, height: 720, backgroundColor: '#FFF0F0' }" />
+    <div :style="{ left: 100, top: 100 }">
+      <FrameShadow
+        :width="vTargetRectWidth"
+        :height="vTargetRectHeight"
+        :borderRadius="vTargetRectRaidus"
+      />
+      <JsvFlexDiv
+        :style="{
+          width: vTargetRectWidth,
+          height: vTargetRectHeight,
+          alignItems: 'center',
+          backgroundColor: 'rgba(128, 128, 0, 0.5)',
+          borderRadius: vTargetRectRaidus,
+        }"
+      >
+        <div
+          :style="{
+            width: vTargetRectWidth,
+            textAlign: 'center',
+            fontSize: 10,
+            lineHeight: 12,
+          }"
+        >
+          {{ `圆角为${vTargetRectRaidus}的矩形` }}
+        </div>
+      </JsvFlexDiv>
+    </div>
+    <div :style="{ left: 450, top: 100 }">
+      <FrameShadow
+        :width="vTargetRectWidth1"
+        :height="vTargetRectHeight1"
+        :borderRadius="vTargetRectRaidus1"
+      />
+      <JsvFlexDiv
+        :style="{
+          width: vTargetRectWidth1,
+          height: vTargetRectHeight1,
+          alignItems: 'center',
+          backgroundColor: 'rgba(128, 128, 0, 0.5)',
+          borderRadius: vTargetRectRaidus1,
+        }"
+      >
+        <div
+          :style="{
+            width: vTargetRectWidth1,
+            textAlign: 'center',
+            fontSize: 10,
+            lineHeight: 12,
+          }"
+        >
+          {{ `圆角为${vTargetRectRaidus1}的矩形` }}
+        </div>
+      </JsvFlexDiv>
+    </div>
+    <div :style="{ left: 800, top: 100 }">
+      <FrameShadow
+        :width="vTargetRectWidth2"
+        :height="vTargetRectHeight2"
+        :borderRadius="vTargetRectRaidus2"
+      />
+      <JsvFlexDiv
+        :style="{
+          width: vTargetRectWidth2,
+          height: vTargetRectHeight2,
+          alignItems: 'center',
+          backgroundColor: 'rgba(128, 128, 0, 0.5)',
+          borderRadius: vTargetRectRaidus2,
+        }"
+      >
+        <div
+          :style="{
+            width: vTargetRectWidth2,
+            textAlign: 'center',
+            fontSize: 10,
+            lineHeight: 12,
+          }"
+        >
+          {{ `圆角为${vTargetRectRaidus2}的矩形` }}
+        </div>
+      </JsvFlexDiv>
+    </div>
+
+    <div :style="{ left: 100, top: 400 }">
+      <FrameShadow
+        :width="vTargetRectWidth"
+        :height="vTargetRectHeight"
+        :borderRadius="vTargetRectRaidus"
+        type="down"
+      />
+      <JsvFlexDiv
+        :style="{
+          width: vTargetRectWidth,
+          height: vTargetRectHeight,
+          alignItems: 'center',
+          backgroundColor: 'rgba(128, 128, 0, 0.5)',
+          borderRadius: vTargetRectRaidus,
+        }"
+      >
+        <div
+          :style="{
+            width: vTargetRectWidth,
+            textAlign: 'center',
+            fontSize: 10,
+            lineHeight: 12,
+          }"
+        >
+          {{ `圆角为${vTargetRectRaidus}的矩形` }}
+        </div>
+      </JsvFlexDiv>
+    </div>
+
+    <div :style="{ left: 450, top: 400 }">
+      <FrameShadow
+        :width="vTargetRectWidth1"
+        :height="vTargetRectHeight1"
+        :borderRadius="vTargetRectRaidus1"
+        type="down"
+      />
+      <JsvFlexDiv
+        :style="{
+          width: vTargetRectWidth1,
+          height: vTargetRectHeight1,
+          alignItems: 'center',
+          backgroundColor: 'rgba(128, 128, 0, 0.5)',
+          borderRadius: vTargetRectRaidus1,
+        }"
+      >
+        <div
+          :style="{
+            width: vTargetRectWidth1,
+            textAlign: 'center',
+            fontSize: 10,
+            lineHeight: 12,
+          }"
+        >
+          {{ `圆角为${vTargetRectRaidus1}的矩形` }}
+        </div>
+      </JsvFlexDiv>
+    </div>
+
+    <div :style="{ left: 800, top: 400 }">
+      <FrameShadow
+        :width="vTargetRectWidth2"
+        :height="vTargetRectHeight2"
+        :borderRadius="vTargetRectRaidus2"
+        type="down"
+      />
+      <JsvFlexDiv
+        :style="{
+          width: vTargetRectWidth2,
+          height: vTargetRectHeight2,
+          alignItems: 'center',
+          backgroundColor: 'rgba(128, 128, 0, 0.5)',
+          borderRadius: vTargetRectRaidus2,
+        }"
+      >
+        <div
+          :style="{
+            width: vTargetRectWidth2,
+            textAlign: 'center',
+            fontSize: 10,
+            lineHeight: 12,
+          }"
+        >
+          {{ `圆角为${vTargetRectRaidus2}的矩形` }}
+        </div>
+      </JsvFlexDiv>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { JsvFlexDiv } from "jsview";
+import FrameShadow from "./FrameShadow.vue";
+
+// 圆角为45的矩形样例
+const vTargetRectWidth = 250; // 需要对齐区域的矩形宽
+const vTargetRectHeight = 150; // 需要对齐区域的矩形高
+const vTargetRectRaidus = 45; // 需要对齐区域的圆角半径，请和圆环内径对应的半径一致才能套齐
+
+// 圆角为13的矩形样例
+const vTargetRectWidth1 = 250; // 需要对齐区域的矩形宽
+const vTargetRectHeight1 = 150; // 需要对齐区域的矩形高
+const vTargetRectRaidus1 = 13; // 需要对齐区域的圆角半径，请和圆环内径对应的半径一致才能套齐
+
+// 最小圆角尺寸样例，在此框架下不能低于4
+const vTargetRectWidth2 = 250; // 需要对齐区域的矩形宽
+const vTargetRectHeight2 = 150; // 需要对齐区域的矩形高
+const vTargetRectRaidus2 = 4; // 需要对齐区域的圆角半径，请和圆环内径对应的半径一致才能套齐
+</script>

package/DemoForOperator/FrameShadow/FrameShadow.vue

@@ -0,0 +1,61 @@
+<template>
+  <div>
+    <JsvNinePatch
+      :style="{
+        width: props.width,
+        height: props.height,
+      }"
+      :imageUrl="vImageUrl"
+      :imageWidth="vImageWidth"
+      :centerWidth="cCenterWidth"
+      :imageDspWidth="vImageDspWidth"
+      :borderOutset="vBorderOutset"
+    />
+  </div>
+</template>
+
+<script setup>
+import { JsvNinePatch } from "jsview";
+
+// 接收宽高作为props
+const props = defineProps({
+  width: {
+    type: Number,
+    required: true,
+  },
+  height: {
+    type: Number,
+    required: true,
+  },
+  borderRadius: {
+    type: Number,
+    required: true,
+  },
+  type: {
+    type: String,
+    default: "surround",
+  },
+});
+
+// 图片资源映射
+const cImageMaps = {
+  surround:
+    "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources-2/DemoForOperator/FrameShadow/FrameShadow.png",
+  down: "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources-2/DemoForOperator/FrameShadow/FrameShadow-down.png",
+};
+const vImageUrl = cImageMaps[props.type];
+if (vImageUrl === undefined) {
+  vImageUrl = cImageMaps["surround"];
+}
+
+// 图片固定属性
+const cInnerRadius2 = 92; // 原始图片的内直径(也是右边图矩形的边长值)
+const cCenterWidth = 2; // 图片的中心repeat宽度
+const cInnerRadius = (cInnerRadius2 - cCenterWidth) / 2; // 原始图片圆角半径
+const cSampleImageWidth = 200; // 原始图形的画布尺寸，画布为正方形
+
+// 计算后的对应NinePatch参数
+let vBorderOutset = (cSampleImageWidth - cInnerRadius2) / 2; // 设置值为图片长度减去内直径除以2
+let vImageWidth = cSampleImageWidth; // 原图尺寸设置
+let vImageDspWidth = (props.borderRadius / cInnerRadius) * cSampleImageWidth; // 显示图尺寸，当想复用目标图片，但是半径又不想等时才和原图不一样
+</script>

package/DemoForOperator/FullscreenIn/App.vue

@@ -0,0 +1,105 @@
+<!--
+ * @Author: ChenChanghua
+ * @Date: 2023-03-08 14:52:08
+ * @Description: file content
+-->
+<script setup>
+import { MetroWidget, HORIZONTAL, useFocusHub } from "jsview";
+import Item from "./Item.vue";
+import { onMounted, ref } from "vue";
+import FullscreenPoster from "./FullscreenPoster.vue";
+import { provide } from "vue";
+
+const focusHub = useFocusHub();
+
+const imageUrl =
+  "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/DemoForOperator/FullscreenPoster/App/element_228475_icon2_20230608194600.png";
+
+const fullScreenVisibility = ref(false);
+provide("fullScreenVisibility", fullScreenVisibility)
+
+const data = [
+  {
+    width: 100,
+    height: 190,
+    marginRight: 10,
+    marginBottom: 10,
+    color: "#AABB33",
+    content: 0,
+    showFull: false,
+  },
+  {
+    width: 200,
+    height: 190,
+    marginRight: 10,
+    marginBottom: 10,
+    color: "#0077AA",
+    content: "显示霸屏",
+    showFull: true,
+  },
+  {
+    width: 100,
+    height: 190,
+    marginRight: 10,
+    marginBottom: 10,
+    color: "#BB00AA",
+    showFull: false,
+    content: 2,
+  },
+];
+const provideData = () => {
+  return data;
+};
+
+const measures = (data) => {
+  return {
+    width: data.width,
+    height: data.height,
+    marginRight: data.marginRight,
+    marginBottom: data.marginBottom,
+  };
+};
+
+const widgetLayout = {
+  left: 400,
+  top: 50,
+  width: 500,
+  height: 300,
+};
+
+onMounted(() => {
+  //组件mount后设置焦点
+  focusHub.setFocus("mainMw");
+});
+</script>
+
+<template>
+  <div
+    :style="{
+      width: 1280,
+      height: 720,
+      backgroundColor: '#007788',
+    }"
+  />
+  <metro-widget
+    name="mainMw"
+    :left="widgetLayout.left"
+    :top="widgetLayout.top"
+    :width="widgetLayout.width"
+    :height="widgetLayout.height"
+    :provideData="provideData"
+    :direction="HORIZONTAL"
+    :measures="measures"
+  >
+    <template #renderItem="{ data, onAction }">
+      <item :data="data" :onAction="onAction" />
+    </template>
+  </metro-widget>
+
+  <fullscreen-poster
+    v-if="fullScreenVisibility"
+    :src="imageUrl"
+    :width="1280"
+    :duration="0.8"
+  ></fullscreen-poster>
+</template>

package/DemoForOperator/FullscreenIn/FullscreenPoster.vue

@@ -0,0 +1,56 @@
+<template>
+  <img
+    :src="src"
+    :style="{
+      width: width,
+      animation: animStr,
+    }"
+  />
+</template>
+
+<script setup>
+const props = defineProps({
+  /**
+   * 图片资源地址
+   * @type {String}
+   * @required
+   */
+  src: {
+    type: String,
+    required: true,
+  },
+  /**
+   * 动画持续时间（单位：秒）
+   * @type {Number}
+   * @default 0.8
+   */
+  duration: {
+    type: Number,
+    default: 0.8,
+  },
+  /**
+   * 图片显示宽度（单位：像素）
+   * @type {Number}
+   * @required
+   */
+  width: {
+    type: Number,
+    required: true,
+  },
+});
+
+const animStr = `fade-in ${props.duration}s`;
+</script>
+
+<style scoped>
+@keyframes fade-in {
+  from {
+    opacity: 0;
+    top: -150;
+  }
+  to {
+    opacity: 1;
+    top: 0
+  }
+}
+</style>

package/DemoForOperator/FullscreenIn/Item.vue

@@ -0,0 +1,50 @@
+<!--
+ * @Author: ChenChanghua
+ * @Date: 2023-03-08 14:52:17
+ * @Description: file content
+-->
+<script setup>
+import { inject, ref } from "vue";
+
+const props = defineProps({
+  data: Object,
+  onAction: Object,
+});
+
+const focused = ref(false);
+const fullScreenVisibility = inject("fullScreenVisibility");
+
+// 注册回调
+const onFocus = () => {
+  focused.value = true;
+  if (props.data.showFull) {
+    fullScreenVisibility.value = true;
+  }
+};
+const onBlur = () => {
+  focused.value = false;
+  if (props.data.showFull) {
+    fullScreenVisibility.value = false;
+  }
+};
+const onClick = () => {
+  console.log("item onclick ", props.data);
+};
+props.onAction.register("onFocus", onFocus);
+props.onAction.register("onBlur", onBlur);
+props.onAction.register("onClick", onClick);
+</script>
+
+<template>
+  <div
+    :style="{
+      width: data.width,
+      height: data.height,
+      fontSize: 30,
+      color: focused ? '#FF0000' : '#FFFFFF',
+      backgroundColor: data.color,
+    }"
+  >
+    {{ data.content }}
+  </div>
+</template>

package/DemoForOperator/Genie/App.vue

@@ -0,0 +1,78 @@
+<template>
+  <div :style="{ width: 1280, height: 720, backgroundColor: '#f5f57d' }"></div>
+  <jsv-focus-block
+    autoFocus
+    :onAction="{
+      onKeyDown,
+    }"
+  >
+    <Genie
+      ref="cGenieRef"
+      :width="width"
+      :height="height"
+      :left="128"
+      :top="72"
+      direction="horizontal"
+      :position="position"
+      :time="1"
+      :onAnimEnd="onAnimEnd"
+      :initShow="true"
+    >
+      <img
+        :src="`url(${imageUrl})`"
+        :style="{
+          width: width,
+          height: height,
+        }"
+        @load="onImgLoaded"
+      />
+      <div
+        :style="{
+          width: 1024,
+          height: 100,
+          backgroundColor: '#ffffff44',
+        }"
+      ></div>
+      <div
+        :style="{
+          width: width,
+          height: height,
+          fontSize: 50,
+          color: '#fff',
+          textAlign: 'center',
+        }"
+      >
+        按OK键进场/出场
+      </div>
+    </Genie>
+  </jsv-focus-block>
+</template>
+<script setup>
+import Genie from "./geniePakcer/Genie.vue";
+import { shallowRef } from "vue";
+
+const cGenieRef = shallowRef();
+const position = { x: -80, y: 600 };
+const width = 1024;
+const height = 576;
+const imageUrl =
+  "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/DemoForOperator/Genie/App/element_228542_icon_20230610184253.jpg";
+
+let imgLoaded = false;
+function onImgLoaded() {
+  imgLoaded = true;
+}
+const onAnimEnd = () => {
+  console.log("anim end");
+};
+
+function onKeyDown(ev) {
+  if (ev.keyCode == 13) {
+    if (imgLoaded) {
+      cGenieRef.value.switcher();
+    }
+    return true;
+  }
+  return false;
+}
+</script>