videoAlret.html 4.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta name="renderer" content="webkit">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  6. <meta http-equiv="pragma" content="no-cache">
  7. <meta http-equiv="Cache-Control" content="no-cache, must-revalidate">
  8. <meta http-equiv="expires" content="0">
  9. <meta name="viewport"
  10. content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
  11. <title>实时位置</title>
  12. <link rel="stylesheet" href="../../css/vanindex.css">
  13. <link rel="stylesheet" id="linkSource" href="../../css/style.css">
  14. <link rel="stylesheet" href="../../css/iconfont.css">
  15. <script src="../../js/vue.min.js"></script>
  16. <script src="../../js/vant.min.js"></script>
  17. <script src="../../js/jquery.min.js"></script>
  18. <script type="text/javascript">
  19. document.write('<script src="../../assets/init.js?id='+(new Date().getTime())+'" type="text/javascript" charset="utf-8"><\/script>');
  20. document.write('<script src="../../assets/ajax.js?id='+(new Date().getTime())+'" type="text/javascript" charset="utf-8"><\/script>');
  21. </script>
  22. <script>
  23. checkLogin();
  24. </script>
  25. <style type="text/css">
  26. .van-pagination__item{
  27. height: 30px;
  28. margin: 3px;
  29. border-radius: 5px;
  30. }
  31. [class*=van-hairline]::after{
  32. border:none;
  33. }
  34. .search_ .van-cell{
  35. padding: 0;
  36. border-radius: 2px;
  37. }
  38. .search_ input{
  39. height: 30px;
  40. line-height: 30px;
  41. }
  42. .search_ .van-field__left-icon{
  43. margin-left: 4px;
  44. margin-top: 3px;
  45. }
  46. .search_ .van-button--primary{
  47. background-color: #1989fa;
  48. border: 1px solid #1989fa;
  49. }
  50. </style>
  51. </head>
  52. <body>
  53. <div id="app" class="appBox padding-xs" v-cloak>
  54. <div class="heardYz">
  55. <div>
  56. <span>告警预览</span>
  57. <van-icon name="arrow-left" @click="goBack"/>
  58. </div>
  59. </div>
  60. <div>
  61. <div class="search_ flex padding-tb-xs">
  62. <div style="width:40%;">
  63. <van-field clearable v-model="starDay" left-icon="calendar-o" placeholder="开始时间" @focus="starPicker = true"></van-field>
  64. </div>
  65. <div style="width:40%;margin:0 10px;">
  66. <van-field clearable v-model="endDay" left-icon="calendar-o" placeholder="结束时间" @focus="endPicker = true"></van-field>
  67. </div>
  68. <van-button type="primary" size="small" @click="seachLi">查询</van-button>
  69. </div>
  70. <van-popup v-model:show="endPicker" position="bottom">
  71. <van-datetime-picker type="date" @confirm="endConfirm" @cancel="endPicker = false" />
  72. </van-popup>
  73. <van-popup v-model:show="starPicker" position="bottom">
  74. <van-datetime-picker type="date" @confirm="startConfirm" @cancel="starPicker = false" />
  75. </van-popup>
  76. </div>
  77. <div style="height:calc(100% - 80px);overflow:auto;font-size: 14px;">
  78. <div v-if="alretList.length" class="flex flex-wrap justify-between">
  79. <div class="Sense margin-bottom-sm" v-for="(item,index) in alretList" :key="index" style="width:calc(50% - 5px);">
  80. <div class="padding-xs">
  81. <!-- <img :src="item.imageUrl | setImg" alt=""> -->
  82. <van-image :src="item.imageUrl | setImg" height="96" width="100%" @click="previewImg(item.imageUrl)"></van-image>
  83. </div>
  84. <div class="padding-sm" style="font-size: 12px;">
  85. <div class="flex justify-between">
  86. <div>
  87. <div><van-icon name="warn-o" />{{item.msgTypeCn}}</div>
  88. <div class="margin-tb-xs"><van-icon name="location-o"/>{{item.channelAlias}}</div>
  89. </div>
  90. <div>
  91. <div>LV.{{item.msgLevel}}</div>
  92. <div class="margin-tb-xs" @click="seeVid(item.videoUrl);">
  93. <van-icon name="play-circle-o" />视频
  94. </div>
  95. </div>
  96. </div>
  97. <div><van-icon name="clock-o" />{{item.createDate | setTime}}</div>
  98. </div>
  99. </div>
  100. </div>
  101. <van-empty v-else image="../../img/nodata.png" image-size="240"/>
  102. </div>
  103. <div class="flex align-center margin-top-xs" v-if="alretList.length">
  104. <span class="text-sm text-white">共{{allTotal}}条</span>
  105. <van-pagination v-model="curPage" :total-items="allTotal"
  106. :items-per-page="12" :show-page-size="3" force-ellipses
  107. @change="changePage">
  108. <template #prev-text>
  109. <van-icon name="arrow-left" />
  110. </template>
  111. <template #next-text>
  112. <van-icon name="arrow" />
  113. </template>
  114. <template #page="{ text }">{{ text }}</template>
  115. </van-pagination>
  116. </div>
  117. <van-image-preview v-model:show="showPreview" :images="imagePreview"></van-image-preview>
  118. <van-overlay :show="hisVideo" @click="hisVideo = false;hisVideoSrc = ''">
  119. <div class="wrapper" @click.stop style="margin-top: 45%;">
  120. <video style="width: 100%;" :src="hisVideoSrc" autoplay controls></video>
  121. </div>
  122. </van-overlay>
  123. </div>
  124. <script type="text/javascript">
  125. document.write('<script src="../../assets/phone/vAlertManage.js?id='+(new Date().getTime())+'" type="text/javascript" charset="utf-8"><\/script>');
  126. </script>
  127. </body>
  128. </html>