videoDetail.vue 2.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115
  1. <template>
  2. <view>
  3. <view class="timeBox flex justify-between align-center padding-lr-sm">
  4. <view class="time">火点侦测摄像机</view>
  5. </view>
  6. <view class="basic-info">
  7. <view class="info-tit margin-left-xs">
  8. <text class="cuIcon-titles margin-right-xs"></text>
  9. 基本信息
  10. </view>
  11. <view class="info-content">
  12. <view class="info-one-info ">
  13. <text>设备名称:</text>
  14. <text>{{videoDetail.deviceName}}</text>
  15. </view>
  16. <view>
  17. <text>设备编号:</text>
  18. <text>{{videoDetail.deviceCode}}</text>
  19. </view>
  20. <view>
  21. <text style="width:auto!important">物联网卡号:</text>
  22. <text>{{videoDetail.sim}}</text>
  23. </view>
  24. <view>
  25. <text>安装位置:</text>
  26. <text>{{videoDetail.deviceInstallationPosition}}</text>
  27. </view>
  28. <view>
  29. <text>添加时间:</text>
  30. <text>{{videoDetail.addTime}}</text>
  31. </view>
  32. <view>
  33. <text>设备地址:</text>
  34. <text>{{videoDetail.address}}</text>
  35. </view>
  36. </view>
  37. </view>
  38. <!-- 处理状态start -->
  39. <view class="processStatus">
  40. <view class="info-tit margin-left-xs">
  41. <text class="cuIcon-titles margin-right-xs"></text>
  42. 视频
  43. </view>
  44. <view class="padding-lr padding-bottom-lg ">
  45. <video id="myVideo" :src="videoUrl" style="width:100%" loop="loop" autoplay="autoplay"></video>
  46. <!-- <view class="video-js" ref="video" style="text-align:center;width:100%;height:400rpx">
  47. </view> -->
  48. </view>
  49. </view>
  50. <!-- 处理状态end -->
  51. </view>
  52. </template>
  53. <script>
  54. export default {
  55. data() {
  56. return {
  57. videoDetail: '',
  58. videoUrl:""
  59. }
  60. },
  61. onReady() {
  62. },
  63. onLoad: function(option) {
  64. console.log(111)
  65. console.log(option.deviceCode)
  66. this.companyCode = option.companyCode
  67. this.deviceType = option.deviceType
  68. this.videoUrl = 'http://47.103.74.123/hls/'+option.deviceCode+'.m3u8';
  69. this.getDeviceDetail({
  70. "companyCode": option.companyCode,
  71. "deviceType": option.deviceType,
  72. "deviceCode": option.deviceCode
  73. })
  74. },
  75. methods: {
  76. async getDeviceDetail(ming = {}) {
  77. const res = await this.$myRequest({
  78. url: 'OperationMonitoring/getMonitoringScreen',
  79. data: ming
  80. })
  81. console.log(res.data.data[0])
  82. this.videoDetail = res.data.data[0]
  83. },
  84. }
  85. }
  86. </script>
  87. <style lang="scss">
  88. </style>