up

README.md

@@ -8,7 +8,7 @@
 http://syfv.anquanzhuli.com/
 账号  xysfybjy
 密码 888888
-
+http://113.141.93.143:9528/#/
 
 ### 启动命令
 #### yarn dev

src/views/goaf/liveData/camera.vue

@@ -3,31 +3,31 @@
     <el-row>
       <el-col :span="12" class="left">
         <div class="content-title">
-          摄像头配置
+          摄像头监控
         </div>
       </el-col>
       <el-col :span="12" class="right">
-        <el-input v-model="conditions.goafDevName" class="search-input m-right-15" placeholder="请输入设备名称">
+        <el-input v-model="conditions.goafDevName" class="search-input m-right-15" placeholder="请输入设备名称" style="width: 200px;">
           <el-button slot="append" icon="el-icon-search" @click="getData()" />
         </el-input>
       </el-col>
     </el-row>
     <el-row style="margin-top: 15px;">
       <div class="card-wrap">
-        <div v-for="(item,index) in 10" :key="index" class="item" @click="showVideo(item)">
+        <div v-for="(item,index) in dataList" :key="index" class="item" @click="showVideo(item)">
           <el-card :body-style="{ padding: '0px' }">
             <img src="@/assets/images/video.png">
+            <p style="text-align: center;">{{ item.goafDevName }}</p>
           </el-card>
         </div>
-
       </div>
     </el-row>
     <div v-if="videoDialogVisible" class="video-dialog">
       <div class="header">
-        <div class="name">{{ video.name }}</div>
+        <div class="name">{{ video.goafDevName }}</div>
         <div class="close" @click="videoDialogVisible=false"><i class="el-icon-circle-close" /></div>
       </div>
-      <video id="video" :src="video.src" controls />
+      <iframe id="video" :src="video.src" frameborder="0" />
     </div>
     <div class="pagination-container" style="float:right;margin-right:40px;">
       <pagination v-show="total>0" :total="total" :page.sync="conditions.page" :limit.sync="conditions.limit" @pagination="getData" />
@@ -38,6 +38,7 @@
 import { getSensorByPage } from '@/api/goaf/sensor'
 import { Pagination } from '@/components'
 import { NumConvertLM } from '@/utils'
+import axios from 'axios'
 export default {
   components: { Pagination },
   data() {
@@ -46,10 +47,13 @@ export default {
       total: 0,
       listLoading: false,
       videoDialogVisible: false,
+      video: {
+        src: ''
+      },
       conditions: {
         page: 1,
         limit: 10,
-        goafDevName: ''
+        goafDevTypename: '摄像头'
       }
     }
   },
@@ -75,11 +79,28 @@ export default {
       })
     },
     showVideo(item) {
-      this.video = {
-        src: 'https://www.runoob.com/try/demo_source/movie.mp4',
-        name: '{Ⅲ号-770-32008}：封堵口'
-      }
-      this.videoDialogVisible = true
+      axios({
+        url: 'https://open.ys7.com/api/lapp/token/get',
+        method: 'POST',
+        params: {
+          appKey: item.appKey,
+          appSecret: item.appSecret
+        }
+      }).then((res) => {
+        const accessToken = res.data.data.accessToken
+        if (!accessToken) {
+          this.$message.error('获取监控token失败！')
+          return
+        }
+        this.videoDialogVisible = true
+        this.video = {
+          ...item,
+          src: `https://open.ys7.com/ezopen/h5/iframe?url=ezopen://open.ys7.com/${item.deviceSerial}/1.live&autoplay=1&accessToken=${accessToken}`
+        }
+      }).catch((res) => {
+        console.error(res)
+        this.$message.error('获取监控失败！')
+      })
     }
   }
 }
@@ -130,7 +151,7 @@ export default {
         #video{
             display: block;
             width: 80%;
-            max-height: 80vh;
+            height: 80vh;
             box-shadow: 2px 2px 4px rgba(0,0,0,0.6);
             margin: 10px auto;
         }

src/views/goaf/sensor/CameraModel.vue

@@ -4,7 +4,7 @@
     :modal-append-to-body="false"
     :modal="false"
     :wrapper-closable="false"
-    size="36%"
+    size="42%"
     :visible.sync="dialogVisible"
   >
     <el-form
@@ -21,6 +21,16 @@
           style="width: 260px"
         />
       </el-form-item>
+      <el-form-item label="设备序列号" required>
+        <el-input v-model="formData.deviceSerial" placeholder="请输入设备序列号" style="width:260px" />
+      </el-form-item>
+      <el-form-item label="appKey" required>
+        <el-input v-model="formData.appKey" placeholder="请输入appKey" style="width:260px" />
+      </el-form-item>
+      <el-form-item label="appSecret" required>
+        <el-input v-model="formData.appSecret" placeholder="请输入appSecret" style="width:260px" />
+      </el-form-item>
+
       <el-form-item label="设备IP" required>
         <el-input v-model="formData.goafDevIp" placeholder="请输入设备IP" style="width:260px" />
       </el-form-item>
@@ -195,7 +205,10 @@ export default {
         goafDevSocketAddr: '',
         goafDevPwd: '',
         goafDevAccount: '',
-        goafDevPort: ''
+        goafDevPort: '',
+        deviceSerial: '',
+        appKey: '',
+        appSecret: ''
       },
       rules: {},
       ctrlLevelList: [],
@@ -349,7 +362,10 @@ export default {
         goafDevSocketAddr: '',
         goafDevPwd: '',
         goafDevAccount: '',
-        goafDevPort: ''
+        goafDevPort: '',
+        deviceSerial: '',
+        appKey: '',
+        appSecret: ''
       }
     },
     handleUserSelect(accountId) {

src/views/goaf/sensor/camera.vue

@@ -44,7 +44,7 @@
   </div>
 </template>
 <script>
-import { getSensor, delSensor } from '@/api/goaf/sensor'
+import { getSensorByPage, delSensor } from '@/api/goaf/sensor'
 import { Pagination } from '@/components'
 import { NumConvertLM } from '@/utils'
 import CameraModel from './CameraModel.vue'
@@ -58,7 +58,7 @@ export default {
       conditions: {
         page: 1,
         limit: 10,
-        goafDevName: ''
+        goafDevTypename: '摄像头'
       }
     }
   },
@@ -70,18 +70,11 @@ export default {
     NumConvertLM,
     getData() {
       this.listLoading = true
-      getSensor(this.conditions).then((resp) => {
+      getSensorByPage(this.conditions).then((resp) => {
         this.listLoading = false
-        const { code, msg, data } = resp
-        if (code === 0) {
-          const start = (this.conditions.page - 1) * this.conditions.limit
-          const end = this.conditions.page * this.conditions.limit
-          const dataList = data.filter((item) => item.goafDevTypename.includes('摄像头'))
-          this.dataList = dataList.filter((item, index) => index >= start && index < end)
-          this.total = dataList.length
-        } else {
-          this.$message.error(msg)
-        }
+        const { total, data } = resp
+        this.dataList = data
+        this.total = total
       }).catch((error) => {
         console.log(error)
       })

src/views/goaf/sensor/index.vue

@@ -38,7 +38,7 @@
         </el-table-column>
       </el-table>
       <div class="pagination-container" style="float:right;margin-right:40px;">
-        <pagination v-show="total>0" :total="total" :page.sync="conditions.page" :limit.sync="conditions.limit" @pagination="getData" />
+        <pagination v-show="total>0" :total="total" :page.sync="conditions.page" :limit.sync="conditions.limit" @pagination=" " />
       </div>
     </el-row>
     <sensor-Model ref="sensor" @formSuccess="getData" />