@shijiu/jsview-vue 2.1.25 → 2.1.200

package/utils/JsViewVueWidget/JsvPieChart.vue

@@ -0,0 +1,124 @@
+<!--
+ * 【模块 export 内容】
+ * JsvPieChart：Vue高阶组件，饼图。
+ *      props说明:
+ *          centerPosition  {Object}   圆心坐标，属性:{x,y}
+ *          radius          {Number}   半径
+ *          animationTime   {Number}   动画变化时间，单位 /秒
+ *          data            {Array}    数组对象，包含百分比和颜色。例如:[{color:'#FFFFFF',percent:20}]
+ * 说明：传入的数组要为响应式，且保证所有项的percent都是大于0并且相加等于100
+-->
+
+<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>
+</template>
+
+<script setup>
+import { watch, reactive, nextTick } from "vue";
+import { JsvSector } from "jsview";
+const props = defineProps({
+  centerPosition: { type: Object, required: true },
+  data: { type: Array, required: true },
+  radius: { type: Number, required: true },
+  animationTime: { type: Number, default: 1 },
+});
+let myData = props.data;
+//比较百分比数组
+let previousPercent = [];
+//额外时间数组
+let extraTimeArray = [];
+myData.forEach((item, index) => {
+  previousPercent.push(item.percent);
+  extraTimeArray.push(0);
+});
+//验证数据
+const CheckData = (data) => {
+  let totalPercent = 0;
+  data.forEach((item) => {
+    if (!item.hasOwnProperty("percent")) {
+      throw new Error("每一项必须包含percent属性");
+    }
+    if (item.percent <= 0 || item.percent > 100) {
+      throw new Error("每一项percent必须大于0或者小于等于100！");
+    }
+    totalPercent += item.percent;
+  });
+  if (totalPercent < 99 || totalPercent > 101) {
+    throw new Error("percent属性值总和必须等于100！");
+  }
+  return true;
+};
+CheckData(props.data);
+//过滤数据
+let finalData = reactive([]);
+const filterData = (data) => {
+  data.forEach((item, index) => {
+    if (item.percent > previousPercent[index]) {
+      extraTimeArray[index] = -0.1;
+    } else if (item.percent < previousPercent[index]) {
+      extraTimeArray[index] = 0.1;
+    } else {
+      extraTimeArray[index] = 0;
+    }
+    item.angle = ((item.percent / 100) * 360).toFixed(2);
+    if (index == 0) {
+      finalData.push({
+        startAngle: Number(0).toFixed(2),
+        sweepAngle: Number((item.percent / 100) * 360).toFixed(2),
+        color: item.color,
+        index: index,
+        extraTime: extraTimeArray[0],
+      });
+    } else {
+      finalData.push({
+        startAngle: (
+          Number(finalData[index - 1].startAngle) +
+          Number(finalData[index - 1].sweepAngle)
+        ).toFixed(2),
+        sweepAngle: Number(item.angle).toFixed(2),
+        color: item.color,
+        index: index,
+        extraTime: extraTimeArray[index],
+      });
+    }
+  });
+};
+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 = [];
+  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/JsvPosterImage.vue

@@ -9,30 +9,50 @@
 
 <script setup>
 import { reactive, watchEffect, computed } from "vue";
+import { JsvPerformance } from "../JsViewVueTools/JsvPerformance.ts";
 
 const props = defineProps({
   colorSpace: {
     type: String,
-    default: "RGBA_8888",
-    imageCompress: {
-      type: Boolean,
-      default: true,
-    },
+    default: "RGBA_8888"
   },
-  style: Object,
+  imageCompress: {
+    type: Boolean,
+    default: true
+  },
+  isPosterImage: {
+    type: Boolean,
+    default: true
+  },
+  fadeIn: {
+    type: Boolean,
+    default: true
+  },
+  src: {
+    type: String,
+    default: null
+  },
+  style: Object
 });
 
 const scaleddown = computed(() => {
   return props.imageCompress ? "true" : "false";
 });
 
+const isPosterImage = computed(() => {
+  return JsvPerformance.getPosterSingleThreadDecode() || props.isPosterImage ? "true" : "false";
+});
+
 let common_style = reactive({});
 let image_style = reactive({});
+let show_background_holder = !!window.JsView; // PC浏览器模拟时, 不显示占位图，避免误导
 
 watchEffect(() => {
   if (props.style) {
-    let { left, top, width, height, ...others } = props.style;
+    // 提取left, top, width, height, 并去掉干扰项 backgroundImage backgroundColor(会引起同位置重复图片绘制)
+    let { left, top, width, height, backgroundImage, backgroundColor, ...others } = props.style;
 
+    // 承接x,y偏移和动画设置, 规避默认淡出动画被影响
     common_style.left = left;
     common_style.top = top;
 
@@ -45,13 +65,16 @@ watchEffect(() => {
 
 <template>
   <div :style="common_style">
-    <slot></slot>
+    <slot v-if="show_background_holder"></slot>
     <img
-      data-jsv-vw-enable-fade="true"
+      v-if="!!props.src"
+      :data-jsv-vw-enable-fade="props.fadeIn"
       data-jsv-vw-mask-poster-on-top="true"
       :data-jsv-img-scaledown-tex="scaleddown"
       :data-jsv-img-color-space="colorSpace"
+      :data-jsv-img-poster-image="isPosterImage"
       :style="image_style"
+      :src="props.src"
       v-bind="$attrs"
     />
   </div>

package/utils/JsViewVueWidget/JsvPreload/BrowserPreload.vue

@@ -1,146 +1,147 @@
-<script>
-import { ref, watch } from "vue";
+<script setup>
+import { reactive, watchEffect, onBeforeUnmount } from "vue";
 
-export default {
-  props: {
-    preloadList: Array,
-    downloadList: Array,
-    onPreloadDone: Function, // 预加载完成回调
-    onDownloadDone: Function, // 预下载完成回调
-    onPreloading: Function,
-  },
-  setup() {
-    return {
-      preloadResultMap: {},
-      downloadResultMap: {},
-      downloadUrlList: [],
-      unmountStatus: { unmount: false },
-    };
-  },
-  data() {
-    return {
-      preloadStateList: null,
-      downloadStateList: null,
-    };
-  },
-  created() {
-    if (this.preloadList) {
-      this.getPreloadList();
+const props = defineProps({
+  preloadList: Array,
+  downloadList: Array,
+  onPreloadDone: Function, // 预加载完成回调
+  onDownloadDone: Function, // 预下载完成回调
+  onPreloading: Function,
+})
+
+const loadViewList = reactive({
+  preloadViewList: [],
+  downloadViewList: []
+})
+// 记录传入的preload为null的数量，由于vue不支持在子组件修改props值，所有在删除值为null时，需要++，这样才能保证与传入数据的length相等从而触发回调
+let preloadIsNullNum = 0;
+let downloadIsNullNum = 0;
+
+let preloadResultMap = {}
+let downloadResultMap = {}
+let downloadUrlList = []
+let unmountStatus = { unmount: false }
+let preloadStateList = null;
+let downloadStateList = null;
+
+const getPreloadList = () => {
+  preloadStateList = new Array(props.preloadList.length).fill(false);
+  let preloadListData = props.preloadList;
+  for (let i = 0; i < preloadListData.length; i++) {
+    if (!preloadListData[i] || !preloadListData[i].url) {
+      preloadListData.splice(i, 1);
+      preloadIsNullNum++;
+      i--;
     }
-    if (this.downloadList) {
-      this.getDownloadList();
+  }
+  loadViewList.preloadViewList = preloadListData.map((item, index) => {
+    if (!item || !item.url) {
+      preloadStateList[index] = true;
+      return null;
     }
-
-    watch(
-      () => this.preloadList,
-      () => {
-        this.preloadResultMap = {};
-        this.getPreloadList();
+    const image = new Image();
+    const unmount_track = unmountStatus;
+    image.onload = () => {
+      if (unmount_track.unmount) {
+        // 子组件已经卸载不再回调
+        return;
       }
-    );
-    watch(
-      () => this.downloadList,
-      () => {
-        this.downloadResultMap = {};
-        this.downloadUrlList = [];
-        this.getDownloadList();
-      }
-    );
-  },
-  methods: {
-    getPreloadList() {
-      this.preloadStateList = new Array(this.preloadList.length).fill(false);
-      let preloadListData = this.preloadList;
-      for (let i = 0; i < preloadListData.length; i++) {
-        if (!preloadListData[i]) {
-          this.preloadStateList[i] = true;
-          // this.preloadIsNullNum++;
-        }
+
+      preloadResultMap[item.url] = {
+        width: image.width,
+        height: image.height,
+      };
+      preloadStateList[index] = true;
+      let loadedNum = 0;
+      preloadStateList.map((item) => {
+        loadedNum += item ? 1 : 0;
+      });
+      props.onPreloading?.(loadedNum / preloadStateList.length);
+      if (props.onPreloadDone && loadedNum + preloadIsNullNum == preloadStateList.length) {
+        props.onPreloadDone?.(preloadResultMap);
       }
-      this._PreloadViewList = preloadListData.map((item, index) => {
-        if (!item || !item.url) {
-          this.preloadStateList[index] = true;
-          return null;
-        }
-        const image = new Image();
-        const unmount_track = this.unmountStatus;
-        image.onload = () => {
-          if (unmount_track.unmount) {
-            // 子组件已经卸载不再回调
-            return;
-          }
+    };
+    image.src = item.url;
+  });
+}
 
-          this.preloadResultMap[item.url] = {
-            width: image.width,
-            height: image.height,
-          };
-          this.preloadStateList[index] = true;
-          let loadedNum = 0;
-          this.preloadStateList.map((item) => {
-            loadedNum += item ? 1 : 0;
-          });
-          this.onPreloading?.(loadedNum / this.preloadStateList.length);
+const getDownloadList = () => {
+  downloadStateList = new Array(props.downloadList.length).fill(false);
+  downloadUrlList = new Array(downloadStateList.length);
+  let downloadListData = props.downloadList;
+  for (let i = 0; i < downloadListData.length; i++) {
+    if (!downloadListData[i] || !downloadListData[i].url) {
+      downloadListData.splice(i, 1);
+      downloadUrlList[i] = "invalid";
+      downloadIsNullNum++;
+      i--;
+    }
+  }
+  loadViewList.downloadViewList = downloadListData.map((item, index) => {
+    if (!item || !item.url) {
+      downloadStateList[index] = true;
+      downloadUrlList[index] = "invalid";
+      return null;
+    }
+    const image = new Image();
+    const unmount_track = unmountStatus;
+    image.onload = () => {
+      if (unmount_track.unmount) {
+        // 子组件已经卸载不再回调
+        return;
+      }
 
-          if (this.onPreloadDone && loadedNum == this.preloadStateList.length) {
-            this.onPreloadDone?.(this.preloadResultMap);
-          }
-        };
-        image.src = item.url;
-      });
-    },
-    getDownloadList() {
-      this.downloadStateList = new Array(this.downloadList.length).fill(false);
-      this.downloadUrlList = new Array(this.downloadStateList.length);
-      let downloadListData = this.downloadList;
-      for (let i = 0; i < downloadListData.length; i++) {
-        if (!downloadListData[i].url) {
-          this.downloadStateList[i] = true;
-          this.downloadUrlList[i] = "invalid";
-          // downloadListData.splice(i, 1);
+      downloadStateList[index] = true;
+      downloadUrlList[index] = item.url;
+      downloadResultMap[item.url] = {
+        width: image.width,
+        height: image.height,
+      };
+      console.log(`pre download succeed ${item.url}`);
+      if (props.onDownloadDone) {
+        let downloadNum = 0;
+        downloadStateList.map((item) => {
+          downloadNum += item ? 1 : 0;
+        });
+        if (downloadNum + downloadIsNullNum == downloadStateList.length) {
+          props.onDownloadDone?.(
+            downloadUrlList,
+            downloadResultMap
+          );
         }
       }
-      this._DownloadViewList = downloadListData.map((item, index) => {
-        if (!item.url) {
-          this.downloadStateList[index] = true;
-          this.downloadUrlList[index] = "invalid";
-          return null;
-        }
-        const image = new Image();
-        const unmount_track = this.unmountStatus;
-        image.onload = () => {
-          if (unmount_track.unmount) {
-            // 子组件已经卸载不再回调
-            return;
-          }
+    };
+    image.src = item.url;
+  });
+}
 
-          this.downloadStateList[index] = true;
-          this.downloadUrlList[index] = item.url;
-          this.downloadResultMap[item.url] = {
-            width: image.width,
-            height: image.height,
-          };
-          console.log(`pre download succeed ${item.url}`);
-          if (this.onDownloadDone) {
-            let downloadNum = 0;
-            this.downloadStateList.map((item) => {
-              downloadNum += item ? 1 : 0;
-            });
-            if (downloadNum == this.downloadStateList.length) {
-              this.onDownloadDone?.(
-                this.downloadUrlList,
-                this.downloadResultMap
-              );
-            }
-          }
-        };
-        image.src = item.url;
-      });
-    },
-  },
-  beforeUnmount() {
-    this.unmountStatus.unmount = true;
-  },
-};
+if (props.preloadList) {
+  getPreloadList();
+}
+if (props.downloadList) {
+  getDownloadList();
+}
+watchEffect(() => {
+  if (props.preloadList) {
+    console.log("JsvPreload: update preloadList");
+    preloadIsNullNum = 0
+    preloadResultMap = {};
+    getPreloadList();
+  }
+})
+watchEffect(() => {
+  if (props.downloadList) {
+    console.log("JsvPreload: update downloadList");
+    downloadIsNullNum = 0;
+    downloadResultMap = {};
+    downloadUrlList = [];
+    getDownloadList();
+  }
+})
+
+onBeforeUnmount(() => {
+  unmountStatus.unmount = true;
+})
 </script>
 
 <template>
@@ -148,3 +149,4 @@ export default {
   <div v-if="!preloadList"></div>
 </template>
 
+