feat:监控回放功能

pages/equipList/index.vue

@@ -8,8 +8,14 @@
     <view class="textbox">
       <view class="inputs">
         <!-- <u-input v-model="imports" type="text" :border="true" /> -->
-        <u-search placeholder="请输入设备ID" v-model="imports" placeholder-color="#909696" :show-action="false"
-          search-icon-color="#909696" @input="searchinput">
+        <u-search
+          placeholder="请输入设备ID"
+          v-model="imports"
+          placeholder-color="#909696"
+          :show-action="false"
+          search-icon-color="#909696"
+          @input="searchinput"
+        >
         </u-search>
         <!-- <input type="text" value="" placeholder="请输入设备ID或设备名称" v-model="imports" @input="searchinput"
 					class="inputbox" :clearable="false" />
@@ -17,42 +23,85 @@
       </view>
       <view class="listbox">
         <view class="listbox_left">
-          <view :class="currents == index
-            ? 'listbox_left_item_act listbox_left_item'
-            : 'listbox_left_item'
-            " v-for="(item, index) in list" :key="index" @click="change(index)">
+          <view
+            :class="
+              currents == index
+                ? 'listbox_left_item_act listbox_left_item'
+                : 'listbox_left_item'
+            "
+            v-for="(item, index) in list"
+            :key="index"
+            @click="change(index)"
+          >
             {{ item.name }}
           </view>
         </view>
         <!-- <view class="list" @scroll='showOut' ref="sollo" id="list"> -->
-        <scroll-view :scroll-top="0" :scroll-y="true" class="list scroll-Y" @scrolltoupper="upper" @scrolltolower="lower"
-          @scroll="scroll">
-          <view class="list_item" v-for="(item, index) in eqlistdata" :key="index" @click="historys(item)">
+        <scroll-view
+          :scroll-top="0"
+          :scroll-y="true"
+          class="list scroll-Y"
+          @scrolltoupper="upper"
+          @scrolltolower="lower"
+          @scroll="scroll"
+        >
+          <view
+            class="list_item"
+            v-for="(item, index) in eqlistdata"
+            :key="index"
+            @click="historys(item)"
+          >
             <view class="list_item_top">
               <p class="p1">
-                <image :src="'http://www.hnyfwlw.com:8006/bigdata_app/image/fourMoodBase/' +
-                  type_id +
-                  '.png'
-                  " mode=""></image>
-                <view>{{ item.device_name == "" ? "--" : item.device_name }}</view>
+                <image
+                  :src="
+                    'http://www.hnyfwlw.com:8006/bigdata_app/image/fourMoodBase/' +
+                    type_id +
+                    '.png'
+                  "
+                  mode=""
+                ></image>
+                <view>{{
+                  item.device_name == '' ? '--' : item.device_name
+                }}</view>
               </p>
-              <p v-if="![11, 19, 20].includes(type_id)" :class="[item.is_online ? 'p2' : 'p_out']">
-                {{ item.is_online ? "在线" : "离线" }}
+              <p
+                v-if="![11, 19, 20].includes(type_id)"
+                :class="[item.is_online ? 'p2' : 'p_out']"
+              >
+                {{ item.is_online ? '在线' : '离线' }}
               </p>
             </view>
             <view class="list_item_text">
               <p>设备ID：{{ item.imei || item.device_id }}</p>
               <p>
-                适配用户：{{ item.real_name == "" ? "无" : item.real_name }}
+                适配用户：{{ item.real_name == '' ? '无' : item.real_name }}
               </p>
               <p>最新上报时间：{{ item.addtime | timeFormat() }}</p>
               <p v-if="item.uptime === 0">添加设备时间：- -</p>
               <p v-else>添加设备时间：{{ item.uptime | timeFormat() }}</p>
               <p>设备已运行：{{ item.days }}天</p>
             </view>
-            <view class="list_item_btn" v-if="$QueryPermission(108) && ![13, 17, 18, 11, 19, 20, 14, 22].includes(type_id)"
-              @click.stop="modification(item)">
-              信息修改
+            <view
+              class="list_item_btn"
+              v-if="
+                $QueryPermission(108) &&
+                ![13, 17, 18, 11, 19, 20, 14, 22].includes(type_id)
+              "
+              @click.stop="modification(item)"
+            >
+              编辑
+            </view>
+            <view
+              class="playback-item"
+              v-if="
+                $QueryPermission(236) &&
+                item.camera_playback == 1 &&
+                type_id == 6
+              "
+              @click.stop="handlePlayback(item)"
+            >
+              回放
             </view>
           </view>
         </scroll-view>
@@ -68,18 +117,26 @@
 			</view>
 		</view> -->
     <view class="loading" v-if="loadingtf">
-      <image src="../../static/images/ajax-loader.gif" mode="" class="img"></image>
+      <image
+        src="../../static/images/ajax-loader.gif"
+        mode=""
+        class="img"
+      ></image>
     </view>
     <view class="top" v-if="isTop" @click="top">
-      <image :src="'http://www.hnyfwlw.com:8006/bigdata_app' +
-        '/image/6209a98f0cb3b5086f2ca36152c9269.png'
-        " mode=""></image>
+      <image
+        :src="
+          'http://www.hnyfwlw.com:8006/bigdata_app' +
+          '/image/6209a98f0cb3b5086f2ca36152c9269.png'
+        "
+        mode=""
+      ></image>
     </view>
   </view>
 </template>
 
 <script>
-import { Debounce, Throttle } from "../../util/anitthro.js";
+import { Debounce, Throttle } from '../../util/anitthro.js';
 export default {
   data() {
     return {
@@ -95,7 +152,7 @@ export default {
       imgpath: [],
       loadingtf: false,
       width: 0, //顶部搜索栏宽度
-      imports: "", //搜索设备ID
+      imports: '', //搜索设备ID
     };
   },
   methods: {
@@ -103,7 +160,7 @@ export default {
       //设备列表
       this.loadingtf = true;
       const res = await this.$myRequest({
-        url: "/api/api_gateway?method=forecast.worm_lamp.lamp_list",
+        url: '/api/api_gateway?method=forecast.worm_lamp.lamp_list',
         data: {
           device_type_id: this.type_id,
           page: this.page,
@@ -132,7 +189,7 @@ export default {
       //设备列表
       this.loadingtf = true;
       const res = await this.$myRequest({
-        url: "/api/api_gateway?method=sex_lure_nl.sex_lure.nl_device_list",
+        url: '/api/api_gateway?method=sex_lure_nl.sex_lure.nl_device_list',
         data: {
           device_type_id: this.type_id,
           page: this.page,
@@ -157,7 +214,7 @@ export default {
     async camera() {
       //监控
       const res = await this.$myRequest({
-        url: "/api/api_gateway?method=camera.camera_manage.list_camera",
+        url: '/api/api_gateway?method=camera.camera_manage.list_camera',
         data: {
           page_size: 1,
         },
@@ -168,13 +225,11 @@ export default {
     async usertype() {
       //设备列表
       const res = await this.$myRequest({
-        url: "/api/api_gateway?method=home.homes.user_device_type",
+        url: '/api/api_gateway?method=home.homes.user_device_type',
       });
       console.log(res);
       for (var i = 0; i < res.length; i++) {
-        if (
-          res[i].type_name == "温室大棚"
-        ) {
+        if (res[i].type_name == '温室大棚') {
           continue;
         }
         var obj = {
@@ -183,7 +238,7 @@ export default {
         };
         this.list.push(obj);
       }
-      console.log("设备列表11111111111111", this.list);
+      console.log('设备列表11111111111111', this.list);
       if (res.length) {
         this.type_id = this.list[0].id;
         if (this.list[0].id == 10) {
@@ -196,7 +251,7 @@ export default {
     change(index) {
       console.log(index);
       //头部导航栏的点击
-      this.imports = "";
+      this.imports = '';
       this.current = index;
       this.currents = index;
       this.page = 1;
@@ -209,14 +264,26 @@ export default {
         this.eqlist();
       }
     },
+    handlePlayback(item) {
+      uni.navigateTo({
+        url:
+          '/pages/webviewPlayback?device_id=' +
+          item.imei +
+          '&accessToken=' +
+          this.accessToken,
+        fail(err) {
+          console.log(err, '------------------------- playback');
+        },
+      });
+    },
     clickRight() {
       //搜索
-      this.width = "90%";
+      this.width = '90%';
     },
     modification(item) {
       uni.navigateTo({
         url:
-          "./modification?data=" + JSON.stringify(item) + "&id=" + this.type_id,
+          './modification?data=' + JSON.stringify(item) + '&id=' + this.type_id,
       });
     },
     top() {
@@ -226,32 +293,32 @@ export default {
       });
     },
     historys(item) {
-      console.log("item", item);
+      console.log('item', item);
       switch (this.type_id) {
-		// 水肥新设备
-		case 22:
-		var obj = {};
-		obj.d_id = item.d_id;
-		obj.device_id = item.imei;
-		obj.is_online = item.is_online;
-		obj.lat = item.lat;
-		obj.lng = item.lng;
-		obj.equip_name = item.device_name;
-		obj.uptime = item.addtime;
-		uni.navigateTo({
-		  url: "../waterandfernew/details?shebei=" + JSON.stringify(obj),
-		});
-		break
+        // 水肥新设备
+        case 22:
+          var obj = {};
+          obj.d_id = item.d_id;
+          obj.device_id = item.imei;
+          obj.is_online = item.is_online;
+          obj.lat = item.lat;
+          obj.lng = item.lng;
+          obj.equip_name = item.device_name;
+          obj.uptime = item.addtime;
+          uni.navigateTo({
+            url: '../waterandfernew/details?shebei=' + JSON.stringify(obj),
+          });
+          break;
         // 病虫害可视监测
         case 14:
           uni.navigateTo({
-            url: "../cb/sy/detail?detail=" + JSON.stringify(item),
+            url: '../cb/sy/detail?detail=' + JSON.stringify(item),
           });
-          break
+          break;
         case 2:
           uni.navigateTo({
             url:
-              "../prevention/equipmentdetails?shebei=" + JSON.stringify(item),
+              '../prevention/equipmentdetails?shebei=' + JSON.stringify(item),
           });
           break;
         case 5:
@@ -265,46 +332,46 @@ export default {
           obj.equip_name = item.device_name;
           obj.uptime = item.addtime;
           uni.navigateTo({
-            url: "../environment/equipment?shebei=" + JSON.stringify(obj),
+            url: '../environment/equipment?shebei=' + JSON.stringify(obj),
           });
           break;
         case 6:
           uni.navigateTo({
             url:
-              "/pages/webview?device_id=" +
+              '/pages/webview?device_id=' +
               item.imei +
-              "&accessToken=" +
+              '&accessToken=' +
               this.accessToken,
           });
           break;
         case 3:
           item.type = this.type_id;
           uni.navigateTo({
-            url: "../cb/equip-detail/equip-detail?info=" + JSON.stringify(item),
+            url: '../cb/equip-detail/equip-detail?info=' + JSON.stringify(item),
           });
           break;
         case 4:
           item.type = this.type_id;
           uni.navigateTo({
-            url: "../cb/equip-detail/equip-detail?info=" + JSON.stringify(item),
+            url: '../cb/equip-detail/equip-detail?info=' + JSON.stringify(item),
           });
           break;
         case 7:
           item.type = this.type_id;
           uni.navigateTo({
-            url: "../cb/equip-detail/equip-detail?info=" + JSON.stringify(item),
+            url: '../cb/equip-detail/equip-detail?info=' + JSON.stringify(item),
           });
           break;
         case 8:
           // item.type = this.type_id;
           uni.navigateTo({
-            url: "../cb/thxydetail/thxydetail?imei=" + item.imei
+            url: '../cb/thxydetail/thxydetail?imei=' + item.imei,
           });
           break;
         case 12:
           console.log(item);
           uni.navigateTo({
-            url: "../cb/xctdetail/xctdetail?info=" + JSON.stringify(item),
+            url: '../cb/xctdetail/xctdetail?info=' + JSON.stringify(item),
           });
           break;
         case 13:
@@ -318,7 +385,7 @@ export default {
           obj.equip_name = item.device_name;
           obj.uptime = item.addtime;
           uni.navigateTo({
-            url: "../waterandfer/datails?shebei=" + JSON.stringify(obj),
+            url: '../waterandfer/datails?shebei=' + JSON.stringify(obj),
           });
           break;
         case 15:
@@ -332,7 +399,7 @@ export default {
           obj.equip_name = item.device_name;
           obj.uptime = item.addtime;
           uni.navigateTo({
-            url: "../environment/gsequipment?shebei=" + JSON.stringify(obj),
+            url: '../environment/gsequipment?shebei=' + JSON.stringify(obj),
           });
           break;
         case 17:
@@ -342,7 +409,7 @@ export default {
           obj.device_id = item.imei;
           obj.is_online = item.is_online;
           uni.navigateTo({
-            url: "../cb/shuifeiL/shuifeiL?detail=" + JSON.stringify(obj),
+            url: '../cb/shuifeiL/shuifeiL?detail=' + JSON.stringify(obj),
           });
           break;
         case 11:
@@ -357,7 +424,7 @@ export default {
           obj.location = item.address;
           obj.type = 11;
           uni.navigateTo({
-            url: "../disease/cmb?shebei=" + JSON.stringify(obj),
+            url: '../disease/cmb?shebei=' + JSON.stringify(obj),
           });
           break;
         case 19:
@@ -372,7 +439,7 @@ export default {
           obj.location = item.address;
           obj.type = 19;
           uni.navigateTo({
-            url: "../disease/cmb?shebei=" + JSON.stringify(obj),
+            url: '../disease/cmb?shebei=' + JSON.stringify(obj),
           });
           break;
         case 20:
@@ -387,7 +454,7 @@ export default {
           obj.location = item.address;
           obj.type = 20;
           uni.navigateTo({
-            url: "../disease/cmb?shebei=" + JSON.stringify(obj),
+            url: '../disease/cmb?shebei=' + JSON.stringify(obj),
           });
           break;
         case 21:
@@ -402,13 +469,13 @@ export default {
           obj.location = item.address;
           obj.type = 20;
           uni.navigateTo({
-            url: "../disease/cmb?shebei=" + JSON.stringify(obj),
+            url: '../disease/cmb?shebei=' + JSON.stringify(obj),
           });
           break;
         default:
           item.type = this.type_id;
           uni.navigateTo({
-            url: "../cb/xy2.0/particulars?info=" + JSON.stringify(item),
+            url: '../cb/xy2.0/particulars?info=' + JSON.stringify(item),
           });
           break;
       }
@@ -437,7 +504,7 @@ export default {
     scrollTop(e) {
       console.log(e);
     },
-    upper() { },
+    upper() {},
     lower() {
       console.log(11);
       this.page++;
@@ -447,7 +514,7 @@ export default {
         this.eqlist(true);
       }
     },
-    scroll() { },
+    scroll() {},
   },
   onLoad() {
     this.list = [];
@@ -640,18 +707,32 @@ page {
     }
 
     .list_item_btn {
-      width: 126rpx;
+      width: 88rpx;
       color: #42b983;
-      height: 40rpx;
+      // height: 40rpx;
       text-align: center;
       border: 1rpx solid #42b983;
       border-radius: 25rpx;
-      font-size: 24rpx;
-      line-height: 35rpx;
+      font-size: 32rpx;
+      line-height: 46rpx;
       position: absolute;
       bottom: 15rpx;
       right: 20rpx;
     }
+
+    .playback-item {
+      width: 88rpx;
+      color: #42b983;
+      // height: 40rpx;
+      text-align: center;
+      border: 1rpx solid #42b983;
+      border-radius: 25rpx;
+      font-size: 32rpx;
+      line-height: 46rpx;
+      position: absolute;
+      bottom: 15rpx;
+      right: 120rpx;
+    }
   }
 }
 

pages/webviewPlayback.vue

@@ -0,0 +1,67 @@
+<template>
+  <view class="webview">
+    <web-view
+      :src="url"
+      id="webcon"
+      @message="handleMessage"
+      :update-title="false"
+    >
+    </web-view>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      url: '',
+      device_id: '',
+      accessToken: '',
+    };
+  },
+  onLoad(options) {
+    this.device_id = options.device_id;
+    this.accessToken = options.accessToken;
+    // this.url = "http://8.136.98.49/#/recognition"
+    // this.url =
+    //   '/iotPages/static/h52.html?device_id=' +
+    //   this.device_id +
+    //   '&accessToken=' +
+    //   this.accessToken;
+
+    //设置 webview 界面的状态栏的 title
+    // uni.setNavigationBarTitle({
+    // 	title: '监控详情'
+    // });
+
+    this.getWebviewPage();
+  },
+  methods: {
+    getWebviewPage() {
+      this.$myRequest({
+        url: '/api/api_gateway?method=camera.camera_manage.get_camera_playback_addr',
+        data: {
+          device_id: this.device_id,
+        },
+      }).then((res) => {
+        this.url = `https://open.ys7.com/console/jssdk/mobile.html?accessToken=${res.token}&url=${res.ezopen}&themeId=mobileRec&env=`;
+      });
+
+      //设置 webview 界面的状态栏的 title
+      uni.setNavigationBarTitle({
+        title: '监控回放',
+      });
+    },
+    handleMessage(evt) {
+      console.log('接收到的消息：' + JSON.stringify(evt.detail.data));
+    },
+  },
+};
+</script>
+
+<style>
+.webview {
+  width: 100vw;
+  height: 100vh;
+}
+</style>