index.vue 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421
  1. <template>
  2. <view class="content">
  3. <view class="link"></view>
  4. <view class="itemTime">{{ itemTime }}</view>
  5. <scroll-view :scroll-top="scrollTop" @touchstart="closeintervalID" scroll-y="true" class="scroll-Y"
  6. @scrolltoupper="upper"
  7. @scrolltolower="lower" @scroll="scroll">
  8. <view class="interval"></view>
  9. <view class="scroll-view-item">
  10. <view class="andChannel" v-for="(item, index) in andChannel"
  11. :style="{ top: item.startTop + 'px', height: item.endTop - item.startTop + 'px' }"
  12. :key="'andChannel' + index">
  13. </view>
  14. <template v-for="(item, key) in timetwoMinuteScaleAll">
  15. <view class="twoMinute" v-if="item.twoMinute" :key="key">
  16. <view class="showMinuteScale" v-if="item.showMinuteScale">{{ toYYMM(item.itemTime) }}</view>
  17. </view>
  18. </template>
  19. </view>
  20. <view class="interval-but"></view>
  21. </scroll-view>
  22. </view>
  23. </template>
  24. <script>
  25. export default {
  26. props: {
  27. timeSection: {
  28. type: Array,
  29. default: () => [
  30. // {
  31. // "id": "845947455808901120",
  32. // "key": "vrkey__13306138126_1_1690795730000_1",
  33. // "deviceId": "13306138126",
  34. // "vehicleId": "748032610971848704",
  35. // "fileDate": "2023-07-31 00:00:00",
  36. // "channel": 1,
  37. // "startTime": "2023-07-31 17:28:50",
  38. // "endTime": "2023-07-31 19:24:31",
  39. // "alarmType": "0000000000000000",
  40. // "dataType": 0,
  41. // "dataRate": 1,
  42. // "storageType": 1,
  43. // "fileSize": 1657579203,
  44. // "uploadStatus": "noupload",
  45. // "uploadingTime": null,
  46. // "uploadedTime": null,
  47. // "orderNumber": null,
  48. // "sourceFile": null,
  49. // "targetFile": null
  50. // },
  51. // {
  52. // "id": "845949971443388416",
  53. // "key": "vrkey__13306138126_1_1690802671000_1",
  54. // "deviceId": "13306138126",
  55. // "vehicleId": "748032610971848704",
  56. // "fileDate": "2023-07-31 00:00:00",
  57. // "channel": 1,
  58. // "startTime": "2023-07-31 19:24:31",
  59. // "endTime": "2023-07-31 19:29:03",
  60. // "alarmType": "0000000000000000",
  61. // "dataType": 0,
  62. // "dataRate": 1,
  63. // "storageType": 1,
  64. // "fileSize": 64791937,
  65. // "uploadStatus": "noupload",
  66. // "uploadingTime": null,
  67. // "uploadedTime": null,
  68. // "orderNumber": null,
  69. // "sourceFile": null,
  70. // "targetFile": null
  71. // },
  72. // {
  73. // "id": "845980170583183360",
  74. // "key": "vrkey__13306138126_1_1690802942000_1",
  75. // "deviceId": "13306138126",
  76. // "vehicleId": "748032610971848704",
  77. // "fileDate": "2023-07-31 00:00:00",
  78. // "channel": 1,
  79. // "startTime": "2023-07-31 19:29:02",
  80. // "endTime": "2023-07-31 21:29:17",
  81. // "alarmType": "0000000000000000",
  82. // "dataType": 0,
  83. // "dataRate": 1,
  84. // "storageType": 1,
  85. // "fileSize": 1722336210,
  86. // "uploadStatus": "noupload",
  87. // "uploadingTime": null,
  88. // "uploadedTime": null,
  89. // "orderNumber": null,
  90. // "sourceFile": null,
  91. // "targetFile": null
  92. // },
  93. // {
  94. // "id": "846010369483902976",
  95. // "key": "vrkey__13306138126_1_1690810157000_1",
  96. // "deviceId": "13306138126",
  97. // "vehicleId": "748032610971848704",
  98. // "fileDate": "2023-07-31 00:00:00",
  99. // "channel": 1,
  100. // "startTime": "2023-07-31 21:29:17",
  101. // "endTime": "2023-07-31 23:29:29",
  102. // "alarmType": "0000000000000000",
  103. // "dataType": 0,
  104. // "dataRate": 1,
  105. // "storageType": 1,
  106. // "fileSize": 1722228045,
  107. // "uploadStatus": "noupload",
  108. // "uploadingTime": null,
  109. // "uploadedTime": null,
  110. // "orderNumber": null,
  111. // "sourceFile": null,
  112. // "targetFile": null
  113. // },
  114. // {
  115. // "id": "846017919084302336",
  116. // "key": "vrkey__13306138126_1_1690817368000_1",
  117. // "deviceId": "13306138126",
  118. // "vehicleId": "748032610971848704",
  119. // "fileDate": "2023-07-31 00:00:00",
  120. // "channel": 1,
  121. // "startTime": "2023-07-31 23:29:28",
  122. // "endTime": "2023-07-31 23:59:59",
  123. // "alarmType": "0000000000000000",
  124. // "dataType": 0,
  125. // "dataRate": 1,
  126. // "storageType": 1,
  127. // "fileSize": 437114784,
  128. // "uploadStatus": "noupload",
  129. // "uploadingTime": null,
  130. // "uploadedTime": null,
  131. // "orderNumber": null,
  132. // "sourceFile": null,
  133. // "targetFile": null
  134. // }
  135. ]
  136. }
  137. },
  138. data() {
  139. return {
  140. andChannel: [],
  141. timeScaleAll: {},//obj
  142. timetwoMinuteScaleAll: {},
  143. scrollTop: 0,
  144. old: {
  145. scrollTop: 0
  146. },
  147. itemTime: '00:00',
  148. timerId: '',
  149. intervalID: '',
  150. scrollList: []
  151. }
  152. },
  153. watch: {
  154. timeSection: {
  155. deep: true,
  156. immediate: false,
  157. handler(newVal) {
  158. console.log('更新', newVal)
  159. this.getfindResByDateAndChannel()
  160. }
  161. }
  162. },
  163. created() {
  164. this.initTimeScale()
  165. this.getfindResByDateAndChannel()
  166. },
  167. methods: {
  168. /**return obj */
  169. initTimeScale() {
  170. for (let hour = 0; hour < 24; hour++) {
  171. for (let minute = 0; minute < 60; minute++) {
  172. for (let second = 0; second < 60; second++) {
  173. let timestamp = hour * 3600 + minute * 60 + second;
  174. let paddedHour = hour.toString().padStart(2, '0');
  175. let paddedMinute = minute.toString().padStart(2, '0');
  176. let paddedSecond = second.toString().padStart(2, '0');
  177. let itemTime = `${paddedHour}:${paddedMinute}:${paddedSecond}`;
  178. let oneMinute = timestamp % 60 === 0;
  179. let twoMinute = timestamp % 120 === 0;
  180. let showMinuteScale = minute % 10 === 0 && second === 0;
  181. this.timeScaleAll[timestamp] = { timestamp, itemTime, oneMinute, twoMinute, showMinuteScale, isvideo: false }
  182. if (twoMinute) {
  183. this.timetwoMinuteScaleAll[timestamp] = { itemTime, oneMinute, twoMinute, showMinuteScale, isvideo: false }
  184. }
  185. }
  186. }
  187. }
  188. console.log(this.timeScaleAll)
  189. },
  190. toYYMM(e) {
  191. let timeArr = e.split(':')
  192. return `${timeArr[0]}:${timeArr[1]}`
  193. },
  194. upper: function (e) {
  195. console.log(e)
  196. },
  197. lower: function (e) {
  198. console.log(e)
  199. },
  200. scroll: function (e) {
  201. console.log('scroll', e)
  202. this.scrollList.push(e)
  203. this.old.scrollTop = e.detail.scrollTop
  204. this.getScrollTiem(e.detail.scrollTop)
  205. },
  206. closeintervalID: function () {
  207. clearInterval(this.intervalID)
  208. console.log('关闭定时器')
  209. },
  210. //设置竖向滚动条位置
  211. goTop: function (e) {
  212. this.$nextTick(function () {
  213. this.scrollTop = e
  214. this.getScrollTiem(e)
  215. });
  216. },
  217. /**
  218. * 计算滚动到多少分钟
  219. * @param {Number} scrollTop 4 === 1分钟
  220. *
  221. */
  222. getScrollTiem(scrollTop) {
  223. let minute = Math.round(scrollTop / 4 * 60)
  224. if (this.timeScaleAll[minute]) {
  225. this.itemTime = this.timeScaleAll[minute].itemTime
  226. } else {
  227. this.itemTime = '23:59:59'
  228. }
  229. //手动拖动
  230. if (this.timerId) clearTimeout(this.timerId);
  231. this.timerId = setTimeout(() => {
  232. if (this.scrollList.length > 2) {
  233. clearInterval(this.intervalID)
  234. this.isPlayable(minute)
  235. }
  236. this.scrollList = []
  237. }, 1000);
  238. },
  239. //重置
  240. resetComponents() {
  241. this.andChannel = []
  242. this.scrollTop = 0
  243. this.old = {
  244. scrollTop: 0
  245. }
  246. this.itemTime = '00:00'
  247. this.scrollList = []
  248. if (this.timerId) clearTimeout(this.timerId);
  249. clearInterval(this.intervalID)
  250. console.log('进度条重置完成',this.itemTime)
  251. },
  252. // 显示可回放区域
  253. getfindResByDateAndChannel() {
  254. this.resetComponents();
  255. let data = this.timeSection
  256. for (let key in data) {
  257. console.log(data[key].startTime, '-', data[key].endTime)
  258. let startTimeNum = this.getSeconds(data[key].startTime)
  259. let endTimeNum = this.getSeconds(data[key].endTime)
  260. let startTop = Math.round(startTimeNum * 4 / 60)
  261. let endTop = Math.round(endTimeNum * 4 / 60)
  262. this.andChannel.push({ startTop, endTop, startTimeNum, endTimeNum, ...data[key] })
  263. }
  264. console.log('可视时间段', this.andChannel[0]);
  265. // this.$emit('scrollEnd', this.andChannel[0].startTime)
  266. this.isPlayable(this.andChannel[0].startTimeNum)
  267. },
  268. //计时器滚动
  269. setScrollTop(seconds) {
  270. console.log('重置计时器')
  271. this.intervalID = setInterval(() => {
  272. let scrollTop = seconds * 4 / 60
  273. this.goTop(scrollTop)
  274. seconds++
  275. // console.log('计时')
  276. }, 1000);
  277. },
  278. // 获取秒
  279. getSeconds(time) {
  280. let dayjsInstance = this.dayjs
  281. let startTime = dayjsInstance(time).format("HH:mm:ss");
  282. const datetimeString = dayjsInstance().format("YYYY-MM-DD") + " " + startTime;
  283. const momentObj = dayjsInstance(datetimeString, "YYYY-MM-DD HH:mm:ss");
  284. const secondsOfDay = momentObj.diff(dayjsInstance().startOf('day'), 'second'); // 注意这里使用 'second' 而非 'seconds'
  285. return secondsOfDay;
  286. // let startTime = moment(time).format("HH:mm:ss");
  287. // const datetimeString = moment().format("YYYY-MM-DD") + " " + startTime;
  288. // const momentObj = moment(datetimeString, "YYYY-MM-DD HH:mm:ss");
  289. // const secondsOfDay = momentObj.diff(moment().startOf('day'), 'seconds');
  290. // return secondsOfDay
  291. },
  292. /**
  293. * 判断是否在有效视频段内
  294. * @param {Number} seconds 秒
  295. */
  296. isPlayable(seconds, isemit) {
  297. console.log('拖动',seconds)
  298. // 设置初始进度时间
  299. const andChannel = this.andChannel
  300. let allSection = []
  301. for (const element of andChannel) {
  302. if (element.startTimeNum <= seconds && seconds <= element.endTimeNum) {
  303. let startTimeHHmmss = this.dayjs(element.startTime).format("HH:mm:ss");
  304. allSection.push({ ...element, itemTime: this.itemTime==='00:00' ? startTimeHHmmss : this.itemTime })
  305. }
  306. }
  307. if (allSection.length <= 0) return;
  308. // 重叠的情况下取最后一段
  309. if (!isemit) {
  310. this.$emit('scrollEnd', allSection[allSection.length - 1])
  311. }
  312. this.setScrollTop(seconds)
  313. }
  314. }
  315. }
  316. </script>
  317. <style scoped lang="scss">
  318. .content {
  319. position: relative;
  320. .link {
  321. position: absolute;
  322. width: 100%;
  323. height: 4rpx;
  324. background: #FF7F00;
  325. top: 60rpx;
  326. z-index: 4;
  327. }
  328. .itemTime {
  329. position: absolute;
  330. top: 40rpx;
  331. left: 180rpx;
  332. z-index: 8;
  333. font-size: 20rpx;
  334. }
  335. .scroll-Y {
  336. height: 528rpx;
  337. // border: 2px solid #000000;
  338. }
  339. .scroll-view_H {
  340. white-space: nowrap;
  341. width: 100%;
  342. }
  343. .interval {
  344. width: 20rpx;
  345. height: 56rpx;
  346. background: #CFE7FF;
  347. margin-left: 144rpx;
  348. }
  349. .interval-but {
  350. width: 20rpx;
  351. height: 486rpx;
  352. background: #CFE7FF;
  353. margin-left: 144rpx;
  354. position: relative;
  355. top: -10px;
  356. }
  357. .placeholder {
  358. height: 400rpx;
  359. width: 20rpx;
  360. }
  361. .scroll-view-item {
  362. width: 20rpx;
  363. margin-left: 144rpx;
  364. background: #CFE7FF;
  365. position: relative;
  366. .andChannel {
  367. position: absolute;
  368. width: 100%;
  369. // height: 52px;
  370. // top: 10px;
  371. background: #3C9CFF;
  372. }
  373. .twoMinute {
  374. width: 20rpx;
  375. height: 2px;
  376. box-sizing: border-box;
  377. position: relative;
  378. left: -20rpx;
  379. background: #CFE7FF;
  380. margin-bottom: 6px;
  381. border: 0;
  382. .showMinuteScale {
  383. position: absolute;
  384. left: -90rpx;
  385. width: 66rpx;
  386. font-size: 24rpx;
  387. zoom: 0.8;
  388. }
  389. }
  390. }
  391. .scroll-view-item_H {
  392. display: inline-block;
  393. width: 100%;
  394. height: 300rpx;
  395. line-height: 300rpx;
  396. text-align: center;
  397. font-size: 36rpx;
  398. }
  399. }
  400. </style>