gitY
/
LinYeFangHuo
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

智感-视频组件不能同时存在同一页面的问题修复

main
滕嵩 2025-02-28 11:14:43 +08:00
parent 43b0d5755a
commit d0ab0c1f15
11 changed files with 176 additions and 140 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
src/packages/components/Zhigan/Zhigan/HeadMoreButton/index.vue
View File

@ -1,6 +1,6 @@
<template>
<div class="MoreButton" @click="clickBtn">
<n-button text :color="option.dataStyle.color" size="large">
<div class="MoreButton">
<n-button text :color="option.dataStyle.color" size="large" @click="clickBtn">
<span :style="{ fontSize: option.dataStyle.fontSize + 'px' }">{{ option.dataset }}</span>
<Title v-if="option.dataStyle.iconFlag" class="title" :dataStyle="option.dataStyle" />
</n-button>
@ -43,17 +43,13 @@
);
// 单击交互
const clickElementItem = ref([]);
const list = props.chartConfig.events.interactConfigEvents;
for (let i = 0; i < list.length; i++) {
if (list[i].type == 'click') {
for (let j = 0; j < list[i].movementList.length; j++) {
clickElementItem.value.push(list[i].movementList[j]);
}
}
}
const clickBtn = () => {
eventHandlerHook(chartEditStore.getComponentList, clickElementItem.value);
const clickBtn = (val) => {
eventHandlerHook(
chartEditStore.getComponentList,
props.chartConfig.events.interactConfigEvents,
'click',
val,
);
};
</script>

2
src/packages/components/Zhigan/Zhigan/MeiRiShangBao/svg/xinxi.vue
View File

@ -72,7 +72,7 @@
y="0"
width="25"
height="25"
:href="`/src/assets/images/chart/tables/${props.item.key}.png`"
:href="`/src/assets/images/chart/zhigan/component/MeiRiShangBao${props.item.key}.png`"
/>
<text
v-else

18
src/packages/components/Zhigan/Zhigan/ModalButton/index.vue
View File

@ -31,17 +31,13 @@
});
// 单击交互
const clickElementItem = ref([]);
const list = props.chartConfig.events.interactConfigEvents;
for (let i = 0; i < list.length; i++) {
if (list[i].type == 'click') {
for (let j = 0; j < list[i].movementList.length; j++) {
clickElementItem.value.push(list[i].movementList[j]);
}
}
}
const clickBtn = () => {
eventHandlerHook(chartEditStore.getComponentList, clickElementItem.value);
const clickBtn = (val) => {
eventHandlerHook(
chartEditStore.getComponentList,
props.chartConfig.events.interactConfigEvents,
'click',
val,
);
};
</script>

20
src/packages/components/Zhigan/Zhigan/ModalFrameClose/index.vue
View File

@ -29,19 +29,13 @@
});
// 单击交互
const clickElementItem = ref([]);
const list = props.chartConfig.events.interactConfigEvents;
for (let i = 0; i < list.length; i++) {
if (list[i].type == 'click') {
for (let j = 0; j < list[i].movementList.length; j++) {
clickElementItem.value.push(list[i].movementList[j]);
}
}
}
const clickBtn = () => {
eventHandlerHook(chartEditStore.getComponentList, clickElementItem.value);
const clickBtn = (val) => {
eventHandlerHook(
chartEditStore.getComponentList,
props.chartConfig.events.interactConfigEvents,
'click',
val,
);
};
</script>

10
src/packages/components/Zhigan/Zhigan/ModalTimeLine/config.ts
View File

@ -17,7 +17,7 @@ export const option = {
size: 'medium',
iconSize: 16,
marginTop: 0,
marginLeft: 0,
timelineMarginLeft: 10,
// 最新内容设置
titleColorFirst: '#D27100',
titleFontSizeFirst: 16,
@ -32,11 +32,15 @@ export const option = {
timeFontSize: 16,
contentColor: '#06936A',
contentFontSize: 16,
showTitle: true,
showTime: true,
showContent: true,
showLine: true,
showImage: true,
showVideo: true,
// 图片-适应方式
imageFit: 'contain',
imageBorderRadius: 0,
imageWidth: 150,
imageWidth: 200,
imageHeight: 150,
imageMarginTop: 10,
imageAlign: 'left',

61
src/packages/components/Zhigan/Zhigan/ModalTimeLine/config.vue
View File

@ -66,19 +66,47 @@
size="small"
/>
</SettingItem>
<SettingItem name="左侧边距">
<SettingItem name="时间线左侧边距">
<n-input-number
v-model:value="optionData.dataStyle.marginLeft"
v-model:value="optionData.dataStyle.timelineMarginLeft"
min="0"
type="text"
size="small"
/>
</SettingItem>
</SettingItemBox>
<SettingItemBox name="内容显示设置">
<SettingItem name="是否显示标题">
<n-space>
<n-switch v-model:value="optionData.dataStyle.showTitle" size="small"></n-switch>
</n-space>
</SettingItem>
<SettingItem name="是否显示时间">
<n-space>
<n-switch v-model:value="optionData.dataStyle.showTime" size="small"></n-switch>
</n-space>
</SettingItem>
<SettingItem name="是否显示时间和文本之间的虚线">
<n-space>
<n-switch v-model:value="optionData.dataStyle.showLine" size="small"></n-switch>
</n-space>
</SettingItem>
<SettingItem name="是否显示文本">
<n-space>
<n-switch v-model:value="optionData.dataStyle.showContent" size="small"></n-switch>
</n-space>
</SettingItem>
<SettingItem name="是否显示图片">
<n-space>
<n-switch v-model:value="optionData.dataStyle.showImage" size="small"></n-switch>
</n-space>
</SettingItem>
<SettingItem name="是否显示视频">
<n-space>
<n-switch v-model:value="optionData.dataStyle.showVideo" size="small"></n-switch>
</n-space>
</SettingItem>
</SettingItemBox>
<SettingItemBox name="最新内容设置">
@ -179,11 +207,11 @@
<SettingItem name="图片类型">
<n-select v-model:value="optionData.dataStyle.imageFit" size="small" :options="fitList" />
</SettingItem>
<SettingItem name="图片圆角">
<n-input-number
v-model:value="optionData.dataStyle.imageBorderRadius"
<SettingItem name="水平对齐">
<n-select
v-model:value="optionData.dataStyle.imageAlign"
size="small"
:min="0"
:options="textAlignOptions"
/>
</SettingItem>
<SettingItem name="图片宽度">
@ -210,13 +238,6 @@
size="small"
/>
</SettingItem>
<SettingItem name="水平对齐">
<n-select
v-model:value="optionData.dataStyle.imageAlign"
size="small"
:options="textAlignOptions"
/>
</SettingItem>
<SettingItem name="边框颜色">
<n-color-picker
size="small"
@ -255,6 +276,13 @@
<SettingItem name="视频类型">
<n-select v-model:value="optionData.dataStyle.videoFit" size="small" :options="fitList" />
</SettingItem>
<SettingItem name="水平对齐">
<n-select
v-model:value="optionData.dataStyle.videoAlign"
size="small"
:options="textAlignOptions"
/>
</SettingItem>
<SettingItem name="视频宽度">
<n-input-number
v-model:value="optionData.dataStyle.videoWidth"
@ -279,13 +307,6 @@
size="small"
/>
</SettingItem>
<SettingItem name="水平对齐">
<n-select
v-model:value="optionData.dataStyle.videoAlign"
size="small"
:options="textAlignOptions"
/>
</SettingItem>
<SettingItem name="边框颜色">
<n-color-picker
size="small"

162
src/packages/components/Zhigan/Zhigan/ModalTimeLine/index.vue
View File

@ -10,92 +10,85 @@
<template #icon></template>
<template #header>
<!-- 标题 -->
<div
v-if="index == 0"
:style="{
color: option.dataStyle.titleColorFirst,
fontSize: `${option.dataStyle.titleFontSizeFirst}px`,
}"
>
{{ item.title }}
</div>
<div
v-else
:style="{
color: option.dataStyle.titleColor,
fontSize: `${option.dataStyle.titleFontSize}px`,
}"
>
{{ item.title }}
<div v-if="option.dataStyle.showTitle">
<div
v-if="index == 0"
:style="{
color: option.dataStyle.titleColorFirst,
fontSize: `${option.dataStyle.titleFontSizeFirst}px`,
}"
>
{{ item.title }}
</div>
<div
v-else
:style="{
color: option.dataStyle.titleColor,
fontSize: `${option.dataStyle.titleFontSize}px`,
}"
>
{{ item.title }}
</div>
</div>
</template>
<template #default>
<!-- 时间 -->
<div
v-if="index == 0"
:style="{
color: option.dataStyle.timeColorFirst,
fontSize: `${option.dataStyle.timeFontSizeFirst}px`,
}"
>
{{ item.time }}
</div>
<div
v-else
:style="{
color: option.dataStyle.timeColor,
fontSize: `${option.dataStyle.timeFontSize}px`,
}"
>
{{ item.time }}
<div v-if="option.dataStyle.showTime">
<!-- 时间 -->
<div
v-if="index == 0"
:style="{
color: option.dataStyle.timeColorFirst,
fontSize: `${option.dataStyle.timeFontSizeFirst}px`,
}"
>
{{ item.time }}
</div>
<div
v-else
:style="{
color: option.dataStyle.timeColor,
fontSize: `${option.dataStyle.timeFontSize}px`,
}"
>
{{ item.time }}
</div>
</div>
<!-- 虚线 -->
<span v-if="option.dataStyle.showLine">-------------------------------</span>
<!-- 文本 -->
<div
v-if="index == 0"
:style="{
color: option.dataStyle.contentColorFirst,
fontSize: `${option.dataStyle.contentFontSizeFirst}px`,
}"
>
{{ item.content }}
</div>
<div
v-else
:style="{
color: option.dataStyle.contentColor,
fontSize: `${option.dataStyle.contentFontSize}px`,
}"
>
{{ item.content }}
<div v-if="option.dataStyle.showContent">
<div
v-if="index == 0"
:style="{
color: option.dataStyle.contentColorFirst,
fontSize: `${option.dataStyle.contentFontSizeFirst}px`,
}"
>
{{ item.content }}
</div>
<div
v-else
:style="{
color: option.dataStyle.contentColor,
fontSize: `${option.dataStyle.contentFontSize}px`,
}"
>
{{ item.content }}
</div>
</div>
<!-- 图片 -->
<div
v-if="item.imageurl"
:style="{
display: 'flex',
alignItems: 'center',
justifyContent: `${option.dataStyle.imageAlign}`,
borderRadius: `${option.dataStyle.imageBorderRadius}px`,
overflow: 'hidden',
marginTop: `${option.dataStyle.imageMarginTop}px`,
}"
>
<div v-if="item.imageurl && option.dataStyle.showImage" class="timeLineImageDiv">
<n-image
preview-disabled
:src="item.imageurl"
:style="{
border: `${option.dataStyle.imageBorderWidth}px solid ${option.dataStyle.imageBorderColor}`,
padding: `${option.dataStyle.imagePadding}px`,
}"
:object-fit="option.dataset.imageFit"
:width="`${option.dataStyle.imageWidth}`"
:height="`${option.dataStyle.imageHeight}`"
:width="`${option.dataStyle.imageWidth - 2 * option.dataStyle.imageBorderWidth - 2 * option.dataStyle.imagePadding}`"
:height="`${option.dataStyle.imageHeight - 2 * option.dataStyle.imageBorderWidth - 2 * option.dataStyle.imagePadding}`"
lazy
/>
</div>
<!-- 视频 -->
<div v-if="item.videourl" class="timeLineVideoDiv">
<div v-if="item.videourl && option.dataStyle.showVideo" class="timeLineVideoDiv">
<!-- 编辑状态 -->
<video
v-if="isEdit"
@ -104,6 +97,7 @@
crossOrigin="anonymous"
playsinline
autoplay
lazy
:loop="option.dataStyle.videoLoop"
:muted="option.dataStyle.videoMuted"
:width="`${option.dataStyle.videoWidth - 2 * option.dataStyle.videoBorderWidth - 2 * option.dataStyle.videoPadding}`"
@ -113,12 +107,13 @@
<!-- 其他情况 -->
<video
v-else
:id="item.title + item.index"
:id="item.title + item.index + option.dataStyle.timestamp"
class="TCPlayer-video-contaiiner"
preload="auto"
crossOrigin="anonymous"
playsinline
autoplay
lazy
:loop="option.dataStyle.videoLoop"
:muted="option.dataStyle.videoMuted"
:width="`${option.dataStyle.videoWidth - 2 * option.dataStyle.videoBorderWidth - 2 * option.dataStyle.videoPadding}`"
@ -138,6 +133,7 @@
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore';
import { useChartDataFetch } from '@/hooks';
import Title from './svg/title.vue';
import dayjs from 'dayjs';
const props = defineProps({
chartConfig: {
@ -163,7 +159,7 @@
if (players[index]) {
players[index].src(element.videourl);
} else {
players[index] = TCPlayer(element.title + element.index, {});
players[index] = TCPlayer(element.title + element.index + option.dataStyle.timestamp, {});
players[index].src(element.videourl);
}
});
@ -171,6 +167,10 @@
// 初始化视频控件
onMounted(() => {
// 用于规避视频id重复
if (!option.dataStyle.timestamp) {
option.dataStyle.timestamp = dayjs().unix();
}
option.dataset.forEach((element) => {
let player: any = null;
players.push(player);
@ -206,7 +206,6 @@
width: v-bind('`${w}px`');
height: v-bind('`${h}px`');
margin-top: v-bind('`${option.dataStyle.marginTop}px`');
margin-left: v-bind('`${option.dataStyle.marginLeft}px`');
background: v-bind('`${option.dataStyle.background}`');
border: 1px solid v-bind('`${option.dataStyle.borderColor}`');
display: block;
@ -221,6 +220,19 @@
-ms-overflow-style: none;
}
.timeLineImageDiv {
display: flex;
align-items: center;
justify-content: v-bind('option.dataStyle.imageAlign');
overflow: hidden;
width: v-bind('`${option.dataStyle.imageWidth}px`');
height: v-bind('`${option.dataStyle.imageHeight}px`');
margin-top: v-bind('`${option.dataStyle.imageMarginTop}px`');
border: v-bind('`${option.dataStyle.imageBorderWidth}px`') solid
v-bind('`${option.dataStyle.imageBorderColor}`');
padding: v-bind('`${option.dataStyle.imagePadding}px`');
}
.timeLineVideoDiv {
display: flex;
align-items: center;
@ -241,4 +253,8 @@
::v-deep .n-timeline-item-timeline__line {
background-color: v-bind('option.dataStyle.lineColor') !important;
}
::v-deep .n-timeline-item-timeline {
margin-left: v-bind('`${option.dataStyle.timelineMarginLeft}px`') !important;
}
</style>

1
src/packages/components/Zhigan/Zhigan/ModalVideo/config.ts
View File

@ -4,6 +4,7 @@ import { CreateComponentType } from '@/packages/index.d'
import { chartInitConfig } from '@/settings/designSetting'
import { ModalVideoConfig } from './index'
export const option = {
dataset: 'http://221.2.83.254:7012/live/37130100181328000001.m3u8',
dataStyle: {

8
src/packages/components/Zhigan/Zhigan/ModalVideo/index.vue
View File

@ -18,7 +18,7 @@
<!-- 其他情况 -->
<video
v-else
id="TCPlaeyrContainer"
:id="'TCPlaeyrContainer' + option.dataStyle.timestamp"
class="TCPlayer-video-contaiiner"
preload="auto"
crossOrigin="anonymous"
@ -63,13 +63,17 @@
if (player) {
player.src(option.dataset);
} else {
player = TCPlayer('TCPlaeyrContainer', {});
player = TCPlayer('TCPlaeyrContainer' + option.dataStyle.timestamp, {});
player.src(option.dataset);
}
}
// 初始化视频控件
onMounted(() => {
// 用于规避视频id重复
if (!option.dataStyle.timestamp) {
option.dataStyle.timestamp = dayjs().unix();
}
if (!window.location.href.includes('/chart/home/')) {
setTimeout(function () {
handlerPlayVideo();

4
src/packages/components/Zhigan/Zhigan/WuRenJiImage/config.vue
View File

@ -2,13 +2,13 @@
<CollapseItem name="数据设置" :expanded="true">
<SettingItemBox :alone="true" name="图片路径选择">
<SettingItem>
<n-select v-model:value="optionData.dataset.url" size="small" :options="options"></n-select>
<n-select v-model:value="optionData.dataset" size="small" :options="options"></n-select>
</SettingItem>
</SettingItemBox>
<SettingItemBox :alone="true" name="图片路径手动输入">
<SettingItem>
<n-input
v-model:value="optionData.dataset.url"
v-model:value="optionData.dataset"
placeholder="图片路径"
type="text"
size="small"

8
src/packages/components/Zhigan/Zhigan/WuRenJiShiShiHuaMian/index.vue
View File

@ -22,7 +22,7 @@
<!-- 其他情况 -->
<video
v-else
:id="item.title + item.index"
:id="item.title + item.index + option.dataStyle.timestamp"
class="TCPlayer-video-contaiiner"
preload="auto"
crossOrigin="anonymous"
@ -87,7 +87,7 @@
if (players[index]) {
players[index].src(element.videourl);
} else {
players[index] = TCPlayer(element.title + element.index, {});
players[index] = TCPlayer(element.title + element.index + option.dataStyle.timestamp, {});
players[index].src(element.videourl);
}
});
@ -95,6 +95,10 @@
// 初始化视频控件
onMounted(() => {
// 用于规避视频id重复
if (!option.dataStyle.timestamp) {
option.dataStyle.timestamp = dayjs().unix();
}
option.dataset.forEach((element) => {
let player: any = null;
players.push(player);