@shijiu/jsview-vue 2.0.1021 → 2.0.1073

package/utils/JsViewPlugin/JsvPlayer/JsvPlayerBrowser.vue

@@ -1,53 +1,391 @@
 <script>
-import playerExMethods from "./JsvMediaBrowserInterface.js"
+import { Forge } from "@shijiu/jsview/dom/jsv-forge-define";
+import { shallowRef } from "vue"
+
+let logDebug = console.log;
 
 export default {
-  props: {
-    onRef: { type: Function, default: () => {} },
-    playerKey: { type: String, default: "JsvPlayer"}, // TODO: 尝试通过teleport合并多个video元素
-    playerType: {type: Number, default: 1}, // PC 模拟时，不对接本功能
-    background: {type: Boolean, default: true}, // PC 模拟时，不对接本功能
-  },
-  setup() {
-    return {
-      VideoRef: null
-    };
-  },
-  methods: {
-    onRefProxy(video_ref) {
-      this.VideoRef = video_ref;
-
-      // 不在此直接回调 onRef，因为onRefProxy可能会因为 .src的设置导致重新触发一次调用(vue本身问题)
-      // 参照vue-core处理的 componentUpdateFn处理, onMounted 一次, src设置后会再次 onPatch 一次
-    }  
-  },
-  mounted() {
-    if (this.VideoRef && this.onRef) {
-      let video_ref = this.VideoRef;
-      this.VideoRef = null;
-
-      // 补充插件扩展出来的接口
-      for (let method_name in playerExMethods) {
-          video_ref[method_name] = playerExMethods[method_name].bind(video_ref);
+	props: {
+		/**
+		 * 回调函数，播放器对象通知接口
+		 * @param {Object} video对象，可以通过此video对象调用video相关属性和方法，具体属性和方法定义见JsvMedia.js文件里相关说明。
+		 */
+		onRef: { type: Function, default: () => {} },
+		/**
+		 * 属性，Boolean类型，true表示自动播放，默认false。
+		 */
+		autoplay: { type: Boolean, default: false },
+		/**
+		 * 属性，String类型，播放器实例索引，同样的key使用同一个播放器实例。
+		 */
+		playerKey: { type: String, default: null},
+		/**
+		 *  属性，String类型，播放器窗口模式，默认resizable模式。
+		 *                  full：观影模式，全屏方式，不建议修改w/h/l/t，视频清晰度/流畅度最佳；
+		 *                  resizable：可变窗口模式，可以随意修改w/h/l/t，支持动画效果，视频清晰度/流畅度表现可能不如full模式；
+		 *                  pip：画中画模式，只在支持多路硬解的情况下使用，用户画中画的小窗播放，对清晰度/流畅度要求较差，可能会有反交错问题。
+		 */
+		windowMode: {type: String, default: "resizable"},
+		/**
+		 * 属性，int类型，底层使用的播放器类型。1：系统播放器；2:jsv播放器。默认2。
+		 */
+		playerType: {type: Number, default: 2},
+		/**
+		 * 属性，int类型，播放器解码方式。0：根据硬件能力自动匹配；1:硬解码；2:软解码。默认0（根据芯片能力自动匹配）。
+		 */
+		decodeType: {type: Number, default: 0},
+		/**
+		 * 属性，Boolean类型，层级关系，true表示在界面的下面，false表示在界面上面，默认true。
+		 */
+		background: {type: Boolean, default: true},
+		/**
+		 * 属性，Boolean类型，true表示静音，默认false。
+		 */
+		muted: {type: Boolean, default: false},
+		/**
+		 * 属性，Boolean类型，true表示循环播放，默认false。
+		 */
+		loop:{type: Boolean, default: false},
+		/**
+		 * 属性，String类型，播放地址。
+		 */
+		src: {type: String, default: ""},
+		/**
+		 * 属性，Double类型，起播时间，0-duration。
+		 */
+		currentTime: { type: Number, default: 0},
+		/**
+		 * 属性，Boolean类型，是否保留最后一帧，true保留，false不保留。
+		 */
+		keepLastFrame: {type: Boolean, default: true},
+		/**
+		 * 属性，String类型，视频显示比例，origin原始比例显示，full全屏显示，x:y按照指定比例显示。
+		 */
+		videoAspectRatio: {type: String, default: "origin"},
+		/**
+		 * 属性，JSON Object类型，色度抠像参数，包含color，colorDistance，edgeDistance，greenOffset四个参数，
+		 * 参考格式：{color: 0x30FF30, colorDistance: 0.15, edgeDistance: 0.4, greenOffset: 0.05}
+		 *          color，色值，int类型，为抠图色值范围的中心点，格式为0xRRGGBB。
+     	 *          colorDistance，float类型，色域范围，范围0-1.0。
+     	 *          edgeDistance，float类型，alpha透明度距离，范围colorDistance-1.0，从colorDistance到edgeDistance的alpha值从1.0-0线性递减。
+     	 *          greenOffset，float类型，红蓝差值，范围0-1.0。
+		 * 目前只支持扣绿。
+		 */
+		chromaKey: {type: Object, default: null},
+		/**
+		 * 回调函数，播放结束时通过此回调接口通知。
+		 */
+		onEnded: {type: Function, default: ()=>{return{}}},
+		/**
+		 * 回调函数，播放错误时通过此接口通知。
+		 * @param {int} 错误类型，当前定义了四种错误。1是异常中断；2是网络错误；3是解码错误；4是格式不支持。
+		 */
+		onError: {type: Function, default: ()=>{return{}}},
+		// onAbort: {type: Function, default: ()=>{return{}}},
+		/**
+		 * 回调函数，当正常播放时，每0.5秒上报一次，回调接口里会带上当前时间，也可以使用video对象的currentTime属性去获取当前时间。
+		 * @param {Long} 当前播放时间，单位秒。
+		 */
+		onTimeUpdate: {type: Function, default: ()=>{return{}}},
+		/**
+		 * 回调函数，开始加载，设置完播放地址后，上报此事件。
+		 */
+		onLoadStart: {type: Function, default: ()=>{return{}}},
+		/**
+		 * 回调函数，开始正常播放，同一个播放地址仅触发一次。
+		 */
+		onCanPlayThrough: {type: Function, default: ()=>{return{}}},
+		/**
+		 * 回调函数，正常下载，duration不变的情况下只触发一次。
+		 */
+		onProgress: {type: Function, default: ()=>{return{}}},
+		/**
+		 * 回调函数，视频准备好后触发。
+		 */
+		onLoadedMetaData: {type: Function, default: ()=>{return{}}},
+		/**
+		 * 回调函数，视频准备好后触发，这个时候可以正常seek。
+		 */
+		onLoad: {type: Function, default: ()=>{return{}}},
+		/**
+		 * 回调函数，视频准备好后触发，这个时候可以获取duration。
+		 */
+		onDurationChange: {type: Function, default: ()=>{return{}}},
+		/**
+		 * 回调函数，视频准备好后，seek（修改currentTime）会出发此事件。
+		 */
+		onSeeking: {type: Function, default: ()=>{return{}}},
+		/**
+		 * 回调函数，seek完成后触发此事件。
+		 */
+		onSeeked: {type: Function, default: ()=>{return{}}},
+		/**
+		 * 回调函数，缓冲时触发。
+		 */
+		onStalled: {type: Function, default: ()=>{return{}}},
+		/**
+		 * 回调函数，正常播放后触发。
+		 */
+		onPlaying: {type: Function, default: ()=>{return{}}},
+		/**
+		 * 回调函数，正常显示后触发此事件。
+		 */
+		onCanPlay: {type: Function, default: ()=>{return{}}},
+		/**
+		 * 回调函数，音频失去焦点后触发此事件，可能会导致pause（点播）或者离开频道（直播）。
+		 */
+		onAudioFocusLoss: {type: Function, default: ()=>{return{}}},
+		/**
+		 * 回调函数，音频获取焦点后触发此事件，可能会触发resume（点播）或者加入频道（直播）。
+		 */
+		onAudioFocusGain: {type: Function, default: ()=>{return{}}},
+		/**
+		 * 回调函数，直播进入时移状态时，触发此事件。
+		 */
+		onTimeShift: {type: Function, default: ()=>{return{}}},
+		/**
+		 * 回调函数，直播进入时移状态时，成功播放触发此事件。
+		 */
+		onTimeShifted: {type: Function, default: ()=>{return{}}},
+		/**
+		 * 回调函数，时移回到直播状态，触发此事件。
+		 */
+		onBackLive: {type: Function, default: ()=>{return{}}},
+		/**
+		 * 回调函数，时移回到直播状态时，成功播放触发此事件。
+		 */
+		onBackLived: {type: Function, default: ()=>{return{}}},
+		/**
+		 * 属性，Object类型，设置窗口属性，同其他组件的style设置。
+		 */
+		style: {type: Object, default: ()=>{return{}}},
+		/**
+		 * 属性，Boolean类型，活跃状态，当多个JsvPlayer组件指向一个video对象时，只能有一个处于活跃状态。
+		 * 视频显示在活跃JsvPlayer设置的显示区域内，事件通知也只会送给活跃的JsvPlayer组件注册的回调函数。
+		 */
+		active:{type: Boolean, default: true},
+	},
+	components: {
+		
+	},
+	watch: {
+		active(newValue) {
+			console.log("LudlDebug active newValue: "+newValue);
+			if(this.video){
+				if(newValue){
+					this.registerEvent();
+					this.video.setHoleID(this.holeId);
+					this.holeStyle = {
+						left: 0, top: 0,
+						width: this.style.width, height: this.style.height
+					};
+				}else{
+					this.holeStyle = {
+						left: 0, top: 0,
+						width: 0, height: 0
+					};
+				}
+			}
+		},
+		style(newValue){
+			logDebug("holeStyle newValue: left="+newValue.left+", top="+newValue.top+", width="+newValue.width+", height="+newValue.height);
+			if(this.active){
+				this.holeStyle = {
+					left: 0, top: 0,
+					width:newValue.width, height:newValue.height
+				};
+			}
+		},
+		keepLastFrame(newValue){
+			logDebug("keepLastFrame newValue: "+newValue);
+			if(this.video && this.active){
+				this.video.keepLastFrame = this.keepLastFrame;
+			}
+		}
+	},
+
+	setup(){
+		return {
+			video: null,
+			holeId: "",
+      jsvMainView: shallowRef(null),
+      innerViewId: shallowRef(-1),
+		};
+	},
+
+	data() {
+		return {
+			holeStyle: {},
+		};
+	},
+	created() {
+	},
+	mounted() {
+		logDebug("JsvPlayer:",this.style)
+          
+		let key = "Jsv_" + Math.floor(Math.random() * 10000);
+		if(this.playerKey){
+			key = this.playerKey;
+		}
+		logDebug("player key:"+key)
+
+		let player_type = 1;
+		if(this.playerType)
+			player_type = this.playerType;
+
+		let background = true;
+		if(!this.background)
+			background = this.background;
+
+		logDebug("JsvPlayer background:"+background)
+
+		const designMap = window.Forge.DesignMap();
+		logDebug("JsvPlayer:", this.holeId)
+
+		// this.video = findMediaObjectByKey(key);
+    // TODO: 后续支持共享MediaId ?
+		let first_create = true;
+
+		if(!this.video){
+      // 创建PC版本的video标签
+			this.video = window.originDocument.createElement("video");
+			this._extendsApi(this.video);
+		}else{
+			this.video.setRef();
+			first_create = false;
+		}
+
+		if(this.video != null){
+			if(this.active){
+				this.registerEvent();
+
+				//if(first_create){
+					if(this.src && this.src !== "")
+						this.video.src = this.src;
+					
+					if(this.currentTime !== 0)
+						this.video.currentTime = this.currentTime;
+
+					if(this.autoplay){
+						this.video.autoplay = this.autoplay;
+					}
+
+					if(this.muted){
+						this.video.muted = this.muted;
+					}
+
+					if(this.loop){
+						this.video.loop = this.loop;
+					}
+
+					if(!this.keepLastFrame){
+						this.video.keepLastFrame = this.keepLastFrame;
+					}
+
+					if(this.videoAspectRatio !== "origin"){
+						this.video.videoAspectRatio = this.videoAspectRatio;
+					}
+
+					if(this.chromaKey && this.chromaKey !== ""){
+						this.video.setChromaKey(this.chromaKey)
+					}
+				//}else{
+				if(!first_create){
+					this.video.setHoleID(this.holeId);
+					this.holeStyle = {
+						left: 0, top: 0,
+						width: this.style.width, height: this.style.height
+					};
+				}
+			}
+
+      // 创建挂载的VideoView
+      this.jsvMainView = new Forge.VideoView(this.video, null);
+      this.innerViewId = Forge.sViewStore.add(
+        new Forge.ViewInfo(this.jsvMainView)
+      );
+
+			this.onRef?.(this.video)
+		}
+	},
+
+	unmounted(){
+		if(this.video != null) {
+      // 清理View管理缓存
+      if (this.innerViewId !== -1) {
+        Forge.sViewStore.remove(this.innerViewId);
+        this.innerViewId = -1;
+        this.jsvMainView = null;
       }
+			this.onRef?.(null)
+		}
+	},
 
-      // 将修改好的video回调返回给使用者
-      this.onRef(video_ref);
-    }
-  },
-  beforeUnmount() {
-    if (this.onRef) {
-        // video_ref为null，代表video标签卸载处理
-        this.onRef(null);
-    }
-  }
-};
+	methods: {
+		getHoleId(id){
+			logDebug("getHoleId:", id)
+			this.holeId = id;
+		},
+		registerEvent(){
+			if(this.video && this.active){
+				this.video.addEventListener("end", this.onEnded);
+				this.video.addEventListener("error", this.onError);
+				//this.video.addEventListener("abort", this.onAbort);
+				this.video.addEventListener("timeupdate", this.onTimeUpdate);
+				this.video.addEventListener("loadstart", () => {
+					logDebug("JsvPlayer received loadstart event.");
+					this.holeStyle = {
+						left: 0, top: 0,
+						width:this.style.width, height:this.style.height
+					};
+					this.onLoadStart();
+				});
+				this.video.addEventListener("canplaythrough", this.onCanPlayThrough);
+				this.video.addEventListener("progress", this.onProgress);
+				this.video.addEventListener("loadedmetadata", this.onLoadedMetaData);
+				this.video.addEventListener("load", this.onLoad);
+				this.video.addEventListener("durationchange", this.onDurationChange);
+				this.video.addEventListener("seeking", this.onSeeking);
+				this.video.addEventListener("seeked", this.onSeeked);
+				this.video.addEventListener("stalled", this.onStalled);
+				this.video.addEventListener("playing", this.onPlaying);
+				this.video.addEventListener("canplay", this.onCanPlay);
+				this.video.addEventListener("audiofocusloss", this.onAudioFocusLoss);
+				this.video.addEventListener("audiofocusgain", this.onAudioFocusGain);
+				this.video.addEventListener("timeshift", this.onTimeShift);
+				this.video.addEventListener("timeshifted", this.onTimeShifted);
+				this.video.addEventListener("backlive", this.onBackLive);
+				this.video.addEventListener("backlived", this.onBackLived);
+			}
+		},
+		_extendsApi(videoRef) {
+			videoRef.setSrc = (newVideoUrl) => {
+				videoRef.src = newVideoUrl;
+			};
+			videoRef.setRef = () => {
+				console.log("Simulate setRef");
+			};
+		}
+	},
+}
 
+//export default JsvPlayer;
 </script>
 
 <template>
-  <video :ref="onRefProxy" v-bind="$attrs"/>
+  <div :style="holeStyle" backgroundColor="rgba(0,0,0,1)">
+    <div
+      :style="{
+        left: holeStyle.left,
+        top: holeStyle.top,
+        width: holeStyle.width,
+        height: holeStyle.height,
+      }"
+      :data-jsv-vw-innerview="innerViewId"
+    />
+  </div>
 </template>
 
 <style scoped>
-</style>
+
+</style>

package/utils/JsViewPlugin/JsvPlayer/version.mjs

@@ -1,17 +1,17 @@
 let PluginInfo={
-    // downloadUrl:"http://192.168.0.85:8080/plugin/JsvPlayer-199.zip", //插件下载地址
+    // downloadUrl:"http://192.168.0.85:8080/plugin/JsvPlayer-203.zip", //插件下载地址
     packageName:"com.qcode.jsvplayer",
     name:"播放器插件",
-    version:"2.0.2",  //插件需要的版本号
-    versionCodeMin:202,
-    versionCodeMax:202,
+    version:"2.0.4",  //插件需要的版本号
+    versionCodeMin:204,
+    versionCodeMax:204,
     bridgeName:"jsvPlayerBridge", //插件bridge注册到jsview的名称
     className:"com.qcode.jsvplayer.JsvPlayer",  //插件初始化类名称
     initMethod:"createInstance",   //插件初始化方法
     listener:"top.JsvPlayerPluginLoadResult",  //插件加载结果回调
     listener2: "top.JsvPlayerPluginStatus",
     // debug:true,
-    md5:"6de8d620492bf0143bbccc62636a6271"
+    md5:"7aa897a8ff6f6a09d2522cf93c3a083e"
 };
 
 // 导出字段要含有 pluginVersionInfo 信息，作为npm时版本参考

package/utils/JsViewVueTools/JsvHashHistory.js

@@ -50,7 +50,8 @@ class JsvHashHistory {
 
   #createMockHashHistory(base) {
     // 抄 createWebHashHistory 作业
-    base = location.host ? base || location.pathname + location.search : '';
+    // base = location.host ? base || location.pathname + location.search : '';
+    base = (location.host || location.protocol === 'file:') ? base || location.pathname + location.search : '';
     if (!base.includes('#'))
         base += '#';
     if (!base.endsWith('#/') && !base.endsWith('#')) {

package/utils/JsViewVueWidget/JsvRadarChart.vue

@@ -0,0 +1,220 @@
+<!--
+ * 【模块 export 内容】
+ * JsvRadarChart：Vue高阶组件，多维属性图展示控件，又称雷达图，该控件的原图要求为正方形，按对角线划分，一边为透明，一边为带边框的正三角形，
+ *                    带上等分线。
+ *      props说明:
+ *          style            {Object}    (必填) 同div的Style，通过top/left控制圆心坐标
+ *          backgroundUrl    {String}    (必填) 背景图片的加载地址
+ *          foregroundUrl    {String}    (必填) 展示图片的加载地址
+ *          data             {Array}     (必填) 响应式数组对象，有title和value两个属性 例: const data=ref([{title:'智力',value:80}])
+ *                                       注：value为0-100的整数
+ *          fontSize         {Number}    (必填) 要展示的字体大小
+ *          fontColor        {String}    字体颜色，默认黑色。
+ *          radius           {Number}    (必填) 半径宽度 
+ *          extendOffset     {Number}    (必填) 延展半径宽度(width)，用于展示title
+ *      补充说明:
+ *          该控件以左上角为顶点旋转渲染，所以图片中带边框的正三角形的三个顶点应该为：左上，右上，左下；请调整图的朝向。
+-->
+<script setup>
+import { shallowRef, onMounted, onBeforeUnmount, watch, ref, onBeforeUpdate } from "vue"
+import { getTextWidth } from "jsview"
+const props = defineProps({
+    style: {
+        type: Object,
+        default: () => {
+            return {};
+        },
+    },
+    backgroundUrl: { type: String, required: true },
+    foregroundUrl: { type: String, required: true },
+    data: { type: Array, required: true, default: () => ref([{ title: '', value: 10 }]) },
+    fontSize: { type: Number, required: true, default: 16 },
+    fontColor: { type: String, default: '#000000' },
+    radius: { type: Number, required: true },
+    extendOffset: { type: Number, required: true }
+});
+//检测数组里面的值是否都在0-100
+const check=props.data.every((item,index)=>{
+    if(item.value>0&&item.value<=100){
+        return true
+    }else{
+        return false
+    }
+})
+
+//让props传过来值具有响应式
+const data = shallowRef(props.data)
+//监听
+watch(props.data, (n, o) => {
+    props.data.value = n
+})
+//定时器
+const timer = { id: -1 }
+//数组为空数组的时不展示
+const isReady = () => {
+    if (!props.data.value) {
+        return true;
+    }else if(!check){
+        console.warn('请检查数组内每一项value的值，范围0-100')
+        return false
+    }
+    return props.style && props.radius !== 0;
+};
+//初始化数组
+let showData = shallowRef(null)
+showData.value = data.value.map(item => {
+    return {
+        ...item,
+        height: 10,
+        value: 10
+    }
+})
+//动画
+const changeTransition = () => {
+    let transition = 'width 1s ,height 1s linear'
+    return transition
+}
+
+//找出title最多的一项算长度
+const longestTitleObj = data.value.reduce((accumulator, currentObj) => {
+    return accumulator.title.length > currentObj.title.length ? accumulator : currentObj;
+}, data.value[0]);
+//算长度
+let textWidth = shallowRef(null)
+textWidth.value = getTextWidth(longestTitleObj.title, { fontSize: props.fontSize })
+
+//确定各个顶点坐标位置
+const coordinate = props.data.map((item, index) => {
+    item.top = (0 + (props.radius + props.extendOffset) * Math.cos(index * (360 / props.data.length / 180 * Math.PI)))
+    item.left = (0 + (props.radius + props.extendOffset) * Math.sin(index * (360 / props.data.length / 180 * Math.PI)))
+    return {
+        ...item
+    }
+})
+//反转定点坐标
+const cos = Math.cos(Math.PI);
+const sin = Math.sin(Math.PI);
+const reverse = coordinate.map((item, index) => {
+    const cx = 0;
+    const cy = 0;
+    const x = item.left;
+    const y = item.top
+    const newX = cos * (x - cx) - sin * (y - cy) + cx; // 计算 x 坐标的新值
+    const newY = sin * (x - cx) + cos * (y - cy) + cy; // 计算 y 坐标的新值
+    return {
+        ...item,
+        top: newY,
+        left: newX,
+    }
+})
+
+//每一项往下赋值
+const temp = reverse[reverse.length - 1].title;
+for (let i = reverse.length - 1; i >= 1; i--) {
+    reverse[i].title = reverse[i - 1].title;
+}
+reverse[0].title = temp;
+
+//最后处理 定义文字方向和修改
+const final = reverse.map((item, index) => {
+    const temp = reverse[reverse.length - 1].value
+    index == 0 ? item.value = temp : item.value = reverse[reverse.length - 1].value
+    if (index == 0 || index == props.data.length / 2) {
+        item.textAlign = 'center',
+            item.left -= textWidth.value / 2
+        if (index == props.data.length / 2) {
+            item.top -= props.fontSize
+        }
+    } else if (item.left > 0 && item.top > 0) {
+        item.textAlign = 'start'
+    } else if (item.left < 0) {
+        item.textAlign = 'end'
+        item.left -= textWidth.value
+    }
+    return {
+        ...item,
+        textAlign: item.textAlign
+    }
+})
+
+onMounted(() => {
+    if (props.data.value.length == 0) {
+        console.error("data长度不要为空")
+    } else {
+        //这里赋值是为了让其有变化。
+        data.value = showData.value
+        timer.id = setTimeout(() => {
+            if (props.data.value) {
+                //赋值height
+                data.value = props.data.value.map((item, index) => {
+                    const prevIndex = index === 0 ? props.data.length - 1 : index - 1
+                    const prevValue = props.data.value[prevIndex].value
+                    return {
+                        ...item,
+                        height: prevValue
+                    }
+                })
+            }
+        }, 500)
+    }
+
+})
+
+onBeforeUpdate(() => {
+    timer.id = setTimeout(() => {
+        if (props.data.value) {
+            //赋值height
+            data.value = props.data.value.map((item, index) => {
+                const prevIndex = index === 0 ? props.data.length - 1 : index - 1
+                const prevValue = props.data.value[prevIndex].value
+                return {
+                    ...item,
+                    height: prevValue
+                }
+            })
+        }
+    }, 500)
+})
+
+onBeforeUnmount(() => {
+    if (timer.id > 0) {
+        clearTimeout(timer.id)
+        timer.id = -1;
+    }
+
+})
+</script>
+<template>
+    <div :style="{ top: props.style.top, left: props.style.left }" v-if="isReady()">
+        <!-- 偏转为了对上文字 -->
+        <div :style="{ transform: `rotate3d(0,0,1,180deg)` }">
+            <!-- 背景图 -->
+            <div v-for="item, index in data" :key="`${item}square`" :style="{
+                    width: props.radius,
+                    height: props.radius / Math.cos(Math.PI * (90 - (360 / props.data.length)) / 180),
+                    transform: `rotate3d(0,0,1,${-index * (360 / props.data.length)}deg) skew(0,${(90 - (360 / props.data.length))}deg)`,
+                    transformOrigin: `left top`,
+                    backgroundImage: props.backgroundUrl
+                }">
+                <!-- 展示图 -->
+                <div :style="{
+                        width: Math.ceil(props.radius * item.value / 100), height: Math.ceil((props.radius / Math.cos(Math.PI * (90 - (360 / props.data.length)) / 180)) * item.height / 100), backgroundImage: props.foregroundUrl,
+                        transition: changeTransition()
+                    }" />
+            </div>
+        </div>
+        <!-- 展示title -->
+        <div v-for="(item, index) in final" :key="`${item}text`" :style="{
+                left: item.left,
+                top: item.top,
+                width: textWidth,
+                height: props.fontSize + 10,
+                color: props.fontColor,
+                fontSize: props.fontSize,
+                textAlign: item.textAlign,
+            }">
+            {{ item.title }}
+
+        </div>
+    </div>
+</template>