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

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

@ -72,7 +72,7 @@
y="0" y="0"
width="25" width="25"
height="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 <text
v-else v-else

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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