Commit 45adfaa964ee64603240f24d5a7c8389bab3b1c8

Authored by xp.Huang
2 parents a699aedc 5fda7d11

Merge branch 'main_dev' into 'main'

Main dev

See merge request yunteng/thingskit-view!235
1 1 <script setup lang="ts">
2   -import Player, {Events, IError} from 'xgplayer';
3   -import {FlvPlugin} from 'xgplayer-flv';
  2 +import Player, { Events, IError } from 'xgplayer';
  3 +import { FlvPlugin } from 'xgplayer-flv';
4 4 import Mp4Plugin from 'xgplayer-mp4';
5   -import {HlsPlugin} from 'xgplayer-hls';
6   -import {onMounted, shallowRef, computed, unref, toRaw, onUnmounted, ref, watch} from 'vue';
  5 +import { HlsPlugin } from 'xgplayer-hls';
  6 +import { onMounted, shallowRef, computed, unref, toRaw, onUnmounted, ref, watch } from 'vue';
7 7 import PresetPlayer from 'xgplayer';
8   -import {IPlayerOptions} from 'xgplayer/es/player';
  8 +import { IPlayerOptions } from 'xgplayer/es/player';
9 9 import 'xgplayer/dist/index.min.css';
10   -import {StreamType, XGPlayerProps} from './types';
11   -import {isShareMode} from "@/views/share/hook";
12   -import {getJwtToken, getShareJwtToken} from "@/utils/external/auth";
  10 +import { StreamType, XGPlayerProps } from './types';
  11 +import { isShareMode } from "@/views/share/hook";
  12 +import { getJwtToken, getShareJwtToken } from "@/utils/external/auth";
13 13
14 14 const props = withDefaults(defineProps<{
15 15 streamType?: StreamType;
... ... @@ -28,7 +28,16 @@ const emits = defineEmits<{
28 28 (eventName: 'onUnmounted', player: PresetPlayer): void;
29 29 }>();
30 30
  31 +function parsePlayUrl(url: string) {
  32 + try {
  33 + return new URL(url).pathname;
  34 + } catch {
  35 + return url;
  36 + }
  37 +}
  38 +
31 39 function getStreamTypeByUrl(url = ''): StreamType | undefined {
  40 + url = parsePlayUrl(url) || ''
32 41 if (url.endsWith('.m3u8')) return 'hls';
33 42 else if (url.endsWith('.mp4')) return 'mp4';
34 43 else if (url.endsWith('.flv')) {
... ... @@ -37,8 +46,8 @@ function getStreamTypeByUrl(url = ''): StreamType | undefined {
37 46 }
38 47
39 48 const getPluginByStreamType = (): IPlayerOptions => {
40   - let {url, withToken} = props;
41   - let {streamType} = props;
  49 + let { url, withToken } = props;
  50 + let { streamType } = props;
42 51 streamType = streamType === 'auto' ? getStreamTypeByUrl(url)! : streamType;
43 52
44 53 const liveConfig = {
... ... @@ -46,12 +55,12 @@ const getPluginByStreamType = (): IPlayerOptions => {
46 55 maxLatency: 20,
47 56 disconnectTime: 0,
48 57 fetchOptions: withToken
49   - ? {
50   - headers: {
51   - 'X-Authorization': `Bearer ${isShareMode() ? getShareJwtToken() : getJwtToken()}`,
52   - },
53   - }
54   - : {},
  58 + ? {
  59 + headers: {
  60 + 'X-Authorization': `Bearer ${isShareMode() ? getShareJwtToken() : getJwtToken()}`,
  61 + },
  62 + }
  63 + : {},
55 64 };
56 65 const config: IPlayerOptions = {
57 66 flv: liveConfig,
... ... @@ -78,7 +87,7 @@ const playerRef = shallowRef<Nullable<PresetPlayer>>();
78 87 const propsRef = ref<XGPlayerProps>({});
79 88
80 89 const getPlayerConfig = computed<IPlayerOptions>(() => {
81   - const {url, autoPlay, config} = props;
  90 + const { url, autoPlay, config } = props;
82 91
83 92 const basicConfig: IPlayerOptions = {
84 93 ...config,
... ... @@ -108,7 +117,7 @@ function initializePlayer() {
108 117
109 118 if (!unref(videoElRef)) return;
110 119
111   - const player = (playerRef.value = new Player(Object.assign(config, {el: unref(videoElRef)})));
  120 + const player = (playerRef.value = new Player(Object.assign(config, { el: unref(videoElRef) })));
112 121
113 122 player.on(Events.READY, () => {
114 123 emits('ready', player);
... ... @@ -117,9 +126,9 @@ function initializePlayer() {
117 126 player.setEventsMiddleware({
118 127 error: (event, callback) => {
119 128 const code = (
120   - event as unknown as {
121   - error: MediaError;
122   - }
  129 + event as unknown as {
  130 + error: MediaError;
  131 + }
123 132 ).error.code;
124 133 if (code === MediaError.MEDIA_ERR_SRC_NOT_SUPPORTED) {
125 134 if (!props.url) {
... ... @@ -152,10 +161,10 @@ onUnmounted(() => {
152 161 });
153 162
154 163 watch(
155   - () => props.url,
156   - () => {
157   - initializePlayer();
158   - }
  164 + () => props.url,
  165 + () => {
  166 + initializePlayer();
  167 + }
159 168 );
160 169
161 170 defineExpose({
... ...
... ... @@ -75,13 +75,21 @@ export const useChartDataFetch = (
75 75 const {Params} = requestParams
76 76 const {entityType, startTs, endTs} = Params
77 77 let days = Math.ceil(((endTs as unknown as number) - (startTs as unknown as number)) / (1 * 60 * 60 * 24 * 1000))
  78 + const ShortcutsDays = [1, 7, 30]
78 79 if (entityType === 'DEVICE') {
79   - days = days <= 2 ? 1 : days<= 8 ? 7 : 30
80   - startTsValue = dayjs().subtract(days - 1, 'day').startOf('day').valueOf()
81   - startTsValue = dayjs(startTsValue).startOf('day').valueOf()
82   - endTsValue = dayjs().endOf('day').valueOf()
83   - ;(toRaw(targetComponent.request).requestParams.Params.startTs as unknown as number) = startTsValue as number
84   - ;(toRaw(targetComponent.request).requestParams.Params.endTs as unknown as number) = endTsValue
  80 + //等于这三个,说明是从快捷选项里面选的
  81 + if(ShortcutsDays.includes(days)) {
  82 + days = days <= 2 ? 1 : days<= 8 ? 7 : 30
  83 + startTsValue = dayjs().subtract(days - 1, 'day').startOf('day').valueOf()
  84 + startTsValue = dayjs(startTsValue).startOf('day').valueOf()
  85 + endTsValue = dayjs().endOf('day').valueOf()
  86 + ;(toRaw(targetComponent.request).requestParams.Params.startTs as unknown as number) = startTsValue as number
  87 + ;(toRaw(targetComponent.request).requestParams.Params.endTs as unknown as number) = endTsValue
  88 + } else {
  89 + //否则,选择的是什么日期区间就是什么
  90 + (toRaw(targetComponent.request).requestParams.Params.startTs as unknown as number) = startTs as unknown as number
  91 + (toRaw(targetComponent.request).requestParams.Params.endTs as unknown as number) = endTs as unknown as number
  92 + }
85 93 }
86 94 const res = await customRequest(toRaw(targetComponent.request))
87 95 if (res) {
... ...
... ... @@ -14,6 +14,7 @@ import {Dataset, getPlayUrl, option as configOption} from './config'
14 14 import {XGPlayer} from '@/components/Video'
15 15 import {StreamType} from "@/components/Video/src/types";
16 16 import {CameraRecord} from "@/api/external/common/model";
  17 +import { isNullOrUnDef } from '@/utils/external/is';
17 18
18 19 const props = defineProps({
19 20 chartConfig: {
... ... @@ -40,7 +41,7 @@ const playType = ref<StreamType>()
40 41
41 42 async function getPlaySource(params: Dataset) {
42 43 const {id, channelId, deviceId, accessMode, customUrl, playProtocol} = params
43   - if (!accessMode) return
  44 + if (isNullOrUnDef(accessMode)) return
44 45 const {type, url} = await getPlayUrl({
45 46 id: id,
46 47 accessMode: accessMode,
... ...