123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421 |
- <template>
- <view class="content">
- <view class="link"></view>
- <view class="itemTime">{{ itemTime }}</view>
- <scroll-view :scroll-top="scrollTop" @touchstart="closeintervalID" scroll-y="true" class="scroll-Y"
- @scrolltoupper="upper"
- @scrolltolower="lower" @scroll="scroll">
- <view class="interval"></view>
- <view class="scroll-view-item">
- <view class="andChannel" v-for="(item, index) in andChannel"
- :style="{ top: item.startTop + 'px', height: item.endTop - item.startTop + 'px' }"
- :key="'andChannel' + index">
- </view>
- <template v-for="(item, key) in timetwoMinuteScaleAll">
- <view class="twoMinute" v-if="item.twoMinute" :key="key">
- <view class="showMinuteScale" v-if="item.showMinuteScale">{{ toYYMM(item.itemTime) }}</view>
- </view>
- </template>
- </view>
- <view class="interval-but"></view>
- </scroll-view>
- </view>
- </template>
- <script>
- export default {
- props: {
- timeSection: {
- type: Array,
- default: () => [
-
- // {
- // "id": "845947455808901120",
- // "key": "vrkey__13306138126_1_1690795730000_1",
- // "deviceId": "13306138126",
- // "vehicleId": "748032610971848704",
- // "fileDate": "2023-07-31 00:00:00",
- // "channel": 1,
- // "startTime": "2023-07-31 17:28:50",
- // "endTime": "2023-07-31 19:24:31",
- // "alarmType": "0000000000000000",
- // "dataType": 0,
- // "dataRate": 1,
- // "storageType": 1,
- // "fileSize": 1657579203,
- // "uploadStatus": "noupload",
- // "uploadingTime": null,
- // "uploadedTime": null,
- // "orderNumber": null,
- // "sourceFile": null,
- // "targetFile": null
- // },
- // {
- // "id": "845949971443388416",
- // "key": "vrkey__13306138126_1_1690802671000_1",
- // "deviceId": "13306138126",
- // "vehicleId": "748032610971848704",
- // "fileDate": "2023-07-31 00:00:00",
- // "channel": 1,
- // "startTime": "2023-07-31 19:24:31",
- // "endTime": "2023-07-31 19:29:03",
- // "alarmType": "0000000000000000",
- // "dataType": 0,
- // "dataRate": 1,
- // "storageType": 1,
- // "fileSize": 64791937,
- // "uploadStatus": "noupload",
- // "uploadingTime": null,
- // "uploadedTime": null,
- // "orderNumber": null,
- // "sourceFile": null,
- // "targetFile": null
- // },
- // {
- // "id": "845980170583183360",
- // "key": "vrkey__13306138126_1_1690802942000_1",
- // "deviceId": "13306138126",
- // "vehicleId": "748032610971848704",
- // "fileDate": "2023-07-31 00:00:00",
- // "channel": 1,
- // "startTime": "2023-07-31 19:29:02",
- // "endTime": "2023-07-31 21:29:17",
- // "alarmType": "0000000000000000",
- // "dataType": 0,
- // "dataRate": 1,
- // "storageType": 1,
- // "fileSize": 1722336210,
- // "uploadStatus": "noupload",
- // "uploadingTime": null,
- // "uploadedTime": null,
- // "orderNumber": null,
- // "sourceFile": null,
- // "targetFile": null
- // },
- // {
- // "id": "846010369483902976",
- // "key": "vrkey__13306138126_1_1690810157000_1",
- // "deviceId": "13306138126",
- // "vehicleId": "748032610971848704",
- // "fileDate": "2023-07-31 00:00:00",
- // "channel": 1,
- // "startTime": "2023-07-31 21:29:17",
- // "endTime": "2023-07-31 23:29:29",
- // "alarmType": "0000000000000000",
- // "dataType": 0,
- // "dataRate": 1,
- // "storageType": 1,
- // "fileSize": 1722228045,
- // "uploadStatus": "noupload",
- // "uploadingTime": null,
- // "uploadedTime": null,
- // "orderNumber": null,
- // "sourceFile": null,
- // "targetFile": null
- // },
- // {
- // "id": "846017919084302336",
- // "key": "vrkey__13306138126_1_1690817368000_1",
- // "deviceId": "13306138126",
- // "vehicleId": "748032610971848704",
- // "fileDate": "2023-07-31 00:00:00",
- // "channel": 1,
- // "startTime": "2023-07-31 23:29:28",
- // "endTime": "2023-07-31 23:59:59",
- // "alarmType": "0000000000000000",
- // "dataType": 0,
- // "dataRate": 1,
- // "storageType": 1,
- // "fileSize": 437114784,
- // "uploadStatus": "noupload",
- // "uploadingTime": null,
- // "uploadedTime": null,
- // "orderNumber": null,
- // "sourceFile": null,
- // "targetFile": null
- // }
- ]
- }
- },
- data() {
- return {
- andChannel: [],
- timeScaleAll: {},//obj
- timetwoMinuteScaleAll: {},
- scrollTop: 0,
- old: {
- scrollTop: 0
- },
- itemTime: '00:00',
- timerId: '',
- intervalID: '',
- scrollList: []
- }
- },
- watch: {
- timeSection: {
- deep: true,
- immediate: false,
- handler(newVal) {
- console.log('更新', newVal)
- this.getfindResByDateAndChannel()
- }
- }
- },
- created() {
- this.initTimeScale()
- this.getfindResByDateAndChannel()
- },
- methods: {
- /**return obj */
- initTimeScale() {
- for (let hour = 0; hour < 24; hour++) {
- for (let minute = 0; minute < 60; minute++) {
- for (let second = 0; second < 60; second++) {
- let timestamp = hour * 3600 + minute * 60 + second;
- let paddedHour = hour.toString().padStart(2, '0');
- let paddedMinute = minute.toString().padStart(2, '0');
- let paddedSecond = second.toString().padStart(2, '0');
- let itemTime = `${paddedHour}:${paddedMinute}:${paddedSecond}`;
- let oneMinute = timestamp % 60 === 0;
- let twoMinute = timestamp % 120 === 0;
- let showMinuteScale = minute % 10 === 0 && second === 0;
- this.timeScaleAll[timestamp] = { timestamp, itemTime, oneMinute, twoMinute, showMinuteScale, isvideo: false }
- if (twoMinute) {
- this.timetwoMinuteScaleAll[timestamp] = { itemTime, oneMinute, twoMinute, showMinuteScale, isvideo: false }
- }
- }
- }
- }
- console.log(this.timeScaleAll)
- },
- toYYMM(e) {
- let timeArr = e.split(':')
- return `${timeArr[0]}:${timeArr[1]}`
- },
- upper: function (e) {
- console.log(e)
- },
- lower: function (e) {
- console.log(e)
- },
- scroll: function (e) {
- console.log('scroll', e)
- this.scrollList.push(e)
- this.old.scrollTop = e.detail.scrollTop
- this.getScrollTiem(e.detail.scrollTop)
- },
- closeintervalID: function () {
- clearInterval(this.intervalID)
- console.log('关闭定时器')
- },
- //设置竖向滚动条位置
- goTop: function (e) {
- this.$nextTick(function () {
- this.scrollTop = e
- this.getScrollTiem(e)
- });
- },
- /**
- * 计算滚动到多少分钟
- * @param {Number} scrollTop 4 === 1分钟
- *
- */
- getScrollTiem(scrollTop) {
- let minute = Math.round(scrollTop / 4 * 60)
- if (this.timeScaleAll[minute]) {
- this.itemTime = this.timeScaleAll[minute].itemTime
- } else {
- this.itemTime = '23:59:59'
- }
- //手动拖动
- if (this.timerId) clearTimeout(this.timerId);
- this.timerId = setTimeout(() => {
- if (this.scrollList.length > 2) {
- clearInterval(this.intervalID)
- this.isPlayable(minute)
- }
- this.scrollList = []
- }, 1000);
- },
- //重置
- resetComponents() {
- this.andChannel = []
- this.scrollTop = 0
- this.old = {
- scrollTop: 0
- }
- this.itemTime = '00:00'
- this.scrollList = []
- if (this.timerId) clearTimeout(this.timerId);
- clearInterval(this.intervalID)
- console.log('进度条重置完成',this.itemTime)
- },
- // 显示可回放区域
- getfindResByDateAndChannel() {
- this.resetComponents();
- let data = this.timeSection
- for (let key in data) {
- console.log(data[key].startTime, '-', data[key].endTime)
- let startTimeNum = this.getSeconds(data[key].startTime)
- let endTimeNum = this.getSeconds(data[key].endTime)
- let startTop = Math.round(startTimeNum * 4 / 60)
- let endTop = Math.round(endTimeNum * 4 / 60)
- this.andChannel.push({ startTop, endTop, startTimeNum, endTimeNum, ...data[key] })
- }
- console.log('可视时间段', this.andChannel[0]);
- // this.$emit('scrollEnd', this.andChannel[0].startTime)
- this.isPlayable(this.andChannel[0].startTimeNum)
- },
- //计时器滚动
- setScrollTop(seconds) {
- console.log('重置计时器')
- this.intervalID = setInterval(() => {
- let scrollTop = seconds * 4 / 60
- this.goTop(scrollTop)
- seconds++
- // console.log('计时')
- }, 1000);
- },
- // 获取秒
- getSeconds(time) {
- let dayjsInstance = this.dayjs
- let startTime = dayjsInstance(time).format("HH:mm:ss");
- const datetimeString = dayjsInstance().format("YYYY-MM-DD") + " " + startTime;
- const momentObj = dayjsInstance(datetimeString, "YYYY-MM-DD HH:mm:ss");
- const secondsOfDay = momentObj.diff(dayjsInstance().startOf('day'), 'second'); // 注意这里使用 'second' 而非 'seconds'
- return secondsOfDay;
- // let startTime = moment(time).format("HH:mm:ss");
- // const datetimeString = moment().format("YYYY-MM-DD") + " " + startTime;
- // const momentObj = moment(datetimeString, "YYYY-MM-DD HH:mm:ss");
- // const secondsOfDay = momentObj.diff(moment().startOf('day'), 'seconds');
- // return secondsOfDay
- },
- /**
- * 判断是否在有效视频段内
- * @param {Number} seconds 秒
- */
- isPlayable(seconds, isemit) {
- console.log('拖动',seconds)
- // 设置初始进度时间
- const andChannel = this.andChannel
- let allSection = []
- for (const element of andChannel) {
- if (element.startTimeNum <= seconds && seconds <= element.endTimeNum) {
-
- let startTimeHHmmss = this.dayjs(element.startTime).format("HH:mm:ss");
- allSection.push({ ...element, itemTime: this.itemTime==='00:00' ? startTimeHHmmss : this.itemTime })
- }
- }
- if (allSection.length <= 0) return;
- // 重叠的情况下取最后一段
- if (!isemit) {
- this.$emit('scrollEnd', allSection[allSection.length - 1])
- }
- this.setScrollTop(seconds)
- }
- }
- }
- </script>
- <style scoped lang="scss">
- .content {
- position: relative;
- .link {
- position: absolute;
- width: 100%;
- height: 4rpx;
- background: #FF7F00;
- top: 60rpx;
- z-index: 4;
- }
- .itemTime {
- position: absolute;
- top: 40rpx;
- left: 180rpx;
- z-index: 8;
- font-size: 20rpx;
- }
- .scroll-Y {
- height: 528rpx;
- // border: 2px solid #000000;
- }
- .scroll-view_H {
- white-space: nowrap;
- width: 100%;
- }
- .interval {
- width: 20rpx;
- height: 56rpx;
- background: #CFE7FF;
- margin-left: 144rpx;
- }
- .interval-but {
- width: 20rpx;
- height: 486rpx;
- background: #CFE7FF;
- margin-left: 144rpx;
- position: relative;
- top: -10px;
- }
- .placeholder {
- height: 400rpx;
- width: 20rpx;
- }
- .scroll-view-item {
- width: 20rpx;
- margin-left: 144rpx;
- background: #CFE7FF;
- position: relative;
- .andChannel {
- position: absolute;
- width: 100%;
- // height: 52px;
- // top: 10px;
- background: #3C9CFF;
- }
- .twoMinute {
- width: 20rpx;
- height: 2px;
- box-sizing: border-box;
- position: relative;
- left: -20rpx;
- background: #CFE7FF;
- margin-bottom: 6px;
- border: 0;
- .showMinuteScale {
- position: absolute;
- left: -90rpx;
- width: 66rpx;
- font-size: 24rpx;
- zoom: 0.8;
- }
- }
- }
- .scroll-view-item_H {
- display: inline-block;
- width: 100%;
- height: 300rpx;
- line-height: 300rpx;
- text-align: center;
- font-size: 36rpx;
- }
- }
- </style>
|