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

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="800"
+  ></fullscreen-poster>
+</template>

package/DemoForOperator/FullscreenIn/FullscreenPoster.vue

@@ -0,0 +1,41 @@
+<template>
+  <img
+    :src="src"
+    :style="{
+      width: width,
+      animation: animStr,
+    }"
+  />
+</template>
+
+<script setup>
+const props = defineProps({
+  src: {
+    type: String,
+    required: true,
+  },
+  duration: {
+    type: Number,
+    default: 800,
+  },
+  width: {
+    type: Number,
+    required: true,
+  },
+});
+
+const animStr = `fade-in ${props.duration / 1000}s`;
+</script>
+
+<style scopped>
+@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>