0017
/
iot-ui-vue
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

update: moment更换为dayjs

This commit is contained in:
JiangQiming 2023-03-06 20:01:03 +08:00
parent c42ce6a3c1
commit 065c8ca488
2 changed files with 35 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

75
src/views/media/Device/Playback/index.vue
View File

@ -52,8 +52,7 @@
v-model:value="time" v-model:value="time"
:fullscreen="false" :fullscreen="false"
:disabledDate=" :disabledDate="
(currentDate) => (currentDate) => currentDate > dayjs(new Date())
currentDate > moment(new Date())
" "
@change="handlePanelChange" @change="handlePanelChange"
/> />
@ -129,14 +128,14 @@
<div> <div>
{{ {{
moment( dayjs(
item.startTime || item.startTime ||
item.mediaStartTime, item.mediaStartTime,
).format('HH:mm:ss') ).format('HH:mm:ss')
}} }}
~ ~
{{ {{
moment( dayjs(
item.endTime || item.endTime ||
item.mediaEndTime, item.mediaEndTime,
).format('HH:mm:ss') ).format('HH:mm:ss')
@ -155,21 +154,20 @@
<script setup lang="ts"> <script setup lang="ts">
import playBackApi from '@/api/media/playback'; import playBackApi from '@/api/media/playback';
import type { Moment } from 'moment';
import moment from 'moment';
import TimeLine from './timeLine.vue'; import TimeLine from './timeLine.vue';
import IconNode from './iconNode.vue'; import IconNode from './iconNode.vue';
import type { recordsItemType } from './typings'; import type { recordsItemType } from './typings';
import LivePlayer from '@/components/Player/index.vue'; import LivePlayer from '@/components/Player/index.vue';
import { getImage } from '@/utils/comm'; import { getImage } from '@/utils/comm';
import dayjs from 'dayjs'; import dayjs from 'dayjs';
import type { Dayjs } from 'dayjs';
const route = useRoute(); const route = useRoute();
const url = ref(''); const url = ref('');
const type = ref('local'); const type = ref('local');
const historyList = ref<recordsItemType[]>([]); const historyList = ref<recordsItemType[]>([]);
const time = ref<Moment | undefined>(undefined); const time = ref<Dayjs | undefined>(undefined);
const loading = ref(false); const loading = ref(false);
const cloudTime = ref<any>(); const cloudTime = ref<any>();
// const location = ref(); // const location = ref();
@ -185,7 +183,7 @@ const channelId = computed(() => route.query.channelId as string);
const deviceType = ref(''); const deviceType = ref('');
const queryLocalRecords = async (date: Moment) => { const queryLocalRecords = async (date: Dayjs) => {
console.log('date: ', date); console.log('date: ', date);
playStatus.value = 0; playStatus.value = 0;
@ -246,7 +244,7 @@ const queryLocalRecords = async (date: Moment) => {
* 查询云端视频 * 查询云端视频
* @param date * @param date
*/ */
const queryServiceRecords = async (date: Moment) => { const queryServiceRecords = async (date: Dayjs) => {
playStatus.value = 0; playStatus.value = 0;
url.value = ''; url.value = '';
if (deviceId.value && channelId.value && date) { if (deviceId.value && channelId.value && date) {
@ -279,7 +277,7 @@ const downloadClick = async (item: recordsItemType) => {
const downloadUrl = playBackApi.downLoadFile(item.id); const downloadUrl = playBackApi.downLoadFile(item.id);
const downNode = document.createElement('a'); const downNode = document.createElement('a');
downNode.href = downloadUrl; downNode.href = downloadUrl;
downNode.download = `${channelId}-${moment(item.startTime).format( downNode.download = `${channelId}-${dayjs(item.startTime).format(
'YYYY-MM-DD-HH-mm-ss', 'YYYY-MM-DD-HH-mm-ss',
)}.mp4`; )}.mp4`;
downNode.style.display = 'none'; downNode.style.display = 'none';
@ -288,46 +286,21 @@ const downloadClick = async (item: recordsItemType) => {
document.body.removeChild(downNode); document.body.removeChild(downNode);
}; };
watch( onMounted(() => {
() => route.query, const _type = route.query.type as string;
(val: any) => { if (_type) {
const _type = val.type; deviceType.value = _type;
const _timeStr = dayjs(new Date());
if (_type) { time.value = _timeStr;
deviceType.value = _type; if (_type === 'fixed-media') {
const _timeStr = moment(new Date()); type.value = 'cloud';
time.value = _timeStr; queryServiceRecords(_timeStr);
if (_type === 'fixed-media') { } else {
type.value = 'cloud'; queryLocalRecords(_timeStr);
queryServiceRecords(_timeStr); type.value = 'local';
} else {
queryLocalRecords(_timeStr);
type.value = 'local';
}
} }
}, }
); });
// onMounted(() => {
// const _type = route.query.type as string;
// if (_type) {
// //
// const _timeStr = moment(new Date());
// console.log('_timeStr: ', _timeStr);
// const _timeStr1 = dayjs(new Date());
// console.log('_timeStr1: ', _timeStr1);
// //
// // deviceType.value = _type;
// // const _timeStr = moment(new Date());
// // time.value = _timeStr;
// // if (_type === 'fixed-media') {
// // type.value = 'cloud';
// // queryServiceRecords(_timeStr);
// // } else {
// // queryLocalRecords(_timeStr);
// // type.value = 'local';
// // }
// }
// });
const handleTimeLineChange = (times: any) => { const handleTimeLineChange = (times: any) => {
if (times) { if (times) {
@ -339,8 +312,8 @@ const handleTimeLineChange = (times: any) => {
times.deviceId, times.deviceId,
times.channelId, times.channelId,
'mp4', 'mp4',
moment(times.startTime).format('YYYY-MM-DD HH:mm:ss'), dayjs(times.startTime).format('YYYY-MM-DD HH:mm:ss'),
moment(times.endTime).format('YYYY-MM-DD HH:mm:ss'), dayjs(times.endTime).format('YYYY-MM-DD HH:mm:ss'),
) )
: playBackApi.playbackStart(times.deviceId); : playBackApi.playbackStart(times.deviceId);
} else { } else {

22
src/views/media/Device/Playback/timeLine.vue
View File

@ -26,7 +26,7 @@
</div> </div>
<div id="btn" class="time-line-btn"></div> <div id="btn" class="time-line-btn"></div>
<div id="time" class="time-line"> <div id="time" class="time-line">
{{ moment(playTime || 0).format('HH:mm:ss') }} {{ dayjs(playTime || 0).format('HH:mm:ss') }}
</div> </div>
</div> </div>
</div> </div>
@ -34,13 +34,13 @@
<script setup lang="ts"> <script setup lang="ts">
import { message } from 'ant-design-vue'; import { message } from 'ant-design-vue';
import type { Moment } from 'moment';
import moment from 'moment';
import type { recordsItemType } from './typings'; import type { recordsItemType } from './typings';
import type { Dayjs } from 'dayjs';
import dayjs from 'dayjs';
export type TimeChangeType = { export type TimeChangeType = {
endTime: Moment; endTime: Dayjs;
startTime: Moment; startTime: Dayjs;
deviceId: string; deviceId: string;
channelId: string; channelId: string;
}; };
@ -48,7 +48,7 @@ export type TimeChangeType = {
interface Props { interface Props {
onChange: (times: TimeChangeType | undefined) => void; onChange: (times: TimeChangeType | undefined) => void;
data: recordsItemType[]; data: recordsItemType[];
dateTime?: Moment; dateTime?: Dayjs;
type: string; type: string;
playStatus: number; playStatus: number;
playTime: number; playTime: number;
@ -65,13 +65,13 @@ const props = defineProps<Props>();
// 获取选中当天开始时间戳 // 获取选中当天开始时间戳
const startT = ref<number>( const startT = ref<number>(
new Date( new Date(
moment(props.dateTime).startOf('day').format('YYYY-MM-DD HH:mm:ss'), dayjs(props.dateTime).startOf('day').format('YYYY-MM-DD HH:mm:ss'),
).getTime(), ).getTime(),
); );
// 获取选中当天结束时间戳 // 获取选中当天结束时间戳
const endT = ref<number>( const endT = ref<number>(
new Date( new Date(
moment(props.dateTime).endOf('day').format('YYYY-MM-DD HH:mm:ss'), dayjs(props.dateTime).endOf('day').format('YYYY-MM-DD HH:mm:ss'),
).getTime(), ).getTime(),
); );
const list = ref<any[]>([]); const list = ref<any[]>([]);
@ -96,7 +96,7 @@ watch(
() => props.dateTime, () => props.dateTime,
(val: any) => { (val: any) => {
startT.value = new Date( startT.value = new Date(
moment(val).startOf('day').format('YYYY-MM-DD HH:mm:ss'), dayjs(val).startOf('day').format('YYYY-MM-DD HH:mm:ss'),
).getTime(); ).getTime();
}, },
); );
@ -109,8 +109,8 @@ const onChange = (
) => { ) => {
playTime.value = startTime; playTime.value = startTime;
props.onChange({ props.onChange({
startTime: moment(startTime), startTime: dayjs(startTime),
endTime: moment(endTime), endTime: dayjs(endTime),
deviceId, deviceId,
channelId, channelId,
}); });