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 <script setup lang="ts"> 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 import Mp4Plugin from 'xgplayer-mp4'; 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 import PresetPlayer from 'xgplayer'; 7 import PresetPlayer from 'xgplayer';
8 -import {IPlayerOptions} from 'xgplayer/es/player'; 8 +import { IPlayerOptions } from 'xgplayer/es/player';
9 import 'xgplayer/dist/index.min.css'; 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 const props = withDefaults(defineProps<{ 14 const props = withDefaults(defineProps<{
15 streamType?: StreamType; 15 streamType?: StreamType;
@@ -28,7 +28,16 @@ const emits = defineEmits<{ @@ -28,7 +28,16 @@ const emits = defineEmits<{
28 (eventName: 'onUnmounted', player: PresetPlayer): void; 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 function getStreamTypeByUrl(url = ''): StreamType | undefined { 39 function getStreamTypeByUrl(url = ''): StreamType | undefined {
  40 + url = parsePlayUrl(url) || ''
32 if (url.endsWith('.m3u8')) return 'hls'; 41 if (url.endsWith('.m3u8')) return 'hls';
33 else if (url.endsWith('.mp4')) return 'mp4'; 42 else if (url.endsWith('.mp4')) return 'mp4';
34 else if (url.endsWith('.flv')) { 43 else if (url.endsWith('.flv')) {
@@ -37,8 +46,8 @@ function getStreamTypeByUrl(url = ''): StreamType | undefined { @@ -37,8 +46,8 @@ function getStreamTypeByUrl(url = ''): StreamType | undefined {
37 } 46 }
38 47
39 const getPluginByStreamType = (): IPlayerOptions => { 48 const getPluginByStreamType = (): IPlayerOptions => {
40 - let {url, withToken} = props;  
41 - let {streamType} = props; 49 + let { url, withToken } = props;
  50 + let { streamType } = props;
42 streamType = streamType === 'auto' ? getStreamTypeByUrl(url)! : streamType; 51 streamType = streamType === 'auto' ? getStreamTypeByUrl(url)! : streamType;
43 52
44 const liveConfig = { 53 const liveConfig = {
@@ -46,12 +55,12 @@ const getPluginByStreamType = (): IPlayerOptions => { @@ -46,12 +55,12 @@ const getPluginByStreamType = (): IPlayerOptions => {
46 maxLatency: 20, 55 maxLatency: 20,
47 disconnectTime: 0, 56 disconnectTime: 0,
48 fetchOptions: withToken 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 const config: IPlayerOptions = { 65 const config: IPlayerOptions = {
57 flv: liveConfig, 66 flv: liveConfig,
@@ -78,7 +87,7 @@ const playerRef = shallowRef<Nullable<PresetPlayer>>(); @@ -78,7 +87,7 @@ const playerRef = shallowRef<Nullable<PresetPlayer>>();
78 const propsRef = ref<XGPlayerProps>({}); 87 const propsRef = ref<XGPlayerProps>({});
79 88
80 const getPlayerConfig = computed<IPlayerOptions>(() => { 89 const getPlayerConfig = computed<IPlayerOptions>(() => {
81 - const {url, autoPlay, config} = props; 90 + const { url, autoPlay, config } = props;
82 91
83 const basicConfig: IPlayerOptions = { 92 const basicConfig: IPlayerOptions = {
84 ...config, 93 ...config,
@@ -108,7 +117,7 @@ function initializePlayer() { @@ -108,7 +117,7 @@ function initializePlayer() {
108 117
109 if (!unref(videoElRef)) return; 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 player.on(Events.READY, () => { 122 player.on(Events.READY, () => {
114 emits('ready', player); 123 emits('ready', player);
@@ -117,9 +126,9 @@ function initializePlayer() { @@ -117,9 +126,9 @@ function initializePlayer() {
117 player.setEventsMiddleware({ 126 player.setEventsMiddleware({
118 error: (event, callback) => { 127 error: (event, callback) => {
119 const code = ( 128 const code = (
120 - event as unknown as {  
121 - error: MediaError;  
122 - } 129 + event as unknown as {
  130 + error: MediaError;
  131 + }
123 ).error.code; 132 ).error.code;
124 if (code === MediaError.MEDIA_ERR_SRC_NOT_SUPPORTED) { 133 if (code === MediaError.MEDIA_ERR_SRC_NOT_SUPPORTED) {
125 if (!props.url) { 134 if (!props.url) {
@@ -152,10 +161,10 @@ onUnmounted(() => { @@ -152,10 +161,10 @@ onUnmounted(() => {
152 }); 161 });
153 162
154 watch( 163 watch(
155 - () => props.url,  
156 - () => {  
157 - initializePlayer();  
158 - } 164 + () => props.url,
  165 + () => {
  166 + initializePlayer();
  167 + }
159 ); 168 );
160 169
161 defineExpose({ 170 defineExpose({
@@ -75,13 +75,21 @@ export const useChartDataFetch = ( @@ -75,13 +75,21 @@ export const useChartDataFetch = (
75 const {Params} = requestParams 75 const {Params} = requestParams
76 const {entityType, startTs, endTs} = Params 76 const {entityType, startTs, endTs} = Params
77 let days = Math.ceil(((endTs as unknown as number) - (startTs as unknown as number)) / (1 * 60 * 60 * 24 * 1000)) 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 if (entityType === 'DEVICE') { 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 const res = await customRequest(toRaw(targetComponent.request)) 94 const res = await customRequest(toRaw(targetComponent.request))
87 if (res) { 95 if (res) {
@@ -14,6 +14,7 @@ import {Dataset, getPlayUrl, option as configOption} from './config' @@ -14,6 +14,7 @@ import {Dataset, getPlayUrl, option as configOption} from './config'
14 import {XGPlayer} from '@/components/Video' 14 import {XGPlayer} from '@/components/Video'
15 import {StreamType} from "@/components/Video/src/types"; 15 import {StreamType} from "@/components/Video/src/types";
16 import {CameraRecord} from "@/api/external/common/model"; 16 import {CameraRecord} from "@/api/external/common/model";
  17 +import { isNullOrUnDef } from '@/utils/external/is';
17 18
18 const props = defineProps({ 19 const props = defineProps({
19 chartConfig: { 20 chartConfig: {
@@ -40,7 +41,7 @@ const playType = ref<StreamType>() @@ -40,7 +41,7 @@ const playType = ref<StreamType>()
40 41
41 async function getPlaySource(params: Dataset) { 42 async function getPlaySource(params: Dataset) {
42 const {id, channelId, deviceId, accessMode, customUrl, playProtocol} = params 43 const {id, channelId, deviceId, accessMode, customUrl, playProtocol} = params
43 - if (!accessMode) return 44 + if (isNullOrUnDef(accessMode)) return
44 const {type, url} = await getPlayUrl({ 45 const {type, url} = await getPlayUrl({
45 id: id, 46 id: id,
46 accessMode: accessMode, 47 accessMode: accessMode,