fix: camera api

src/views/external/camera/components/Detail.vue

@@ -84,7 +84,7 @@
               <span class="o-detail_title">设备名称：</span><span>{{ detailobj.name }}</span>
             </div>
             <div>
-              <span class="o-detail_title">ID：</span><span>{{ detailobj.deviceId }}</span>
+              <span class="o-detail_title">ID：</span><span>{{ detailobj.identifier }}</span>
             </div>
             <div>
               <span class="o-detail_title">用户名：</span><span>{{ detailobj.username }}</span>
@@ -197,7 +197,7 @@ export default {
           type: 'flv',
           isLive: true,
           // hasAudio: false,
-          url: `${CAMERA_URL}/${this.detailobj.deviceId}?authorization=${this.$keycloak.token}`
+          url: `${CAMERA_URL}/${this.detailobj.identifier}?authorization=${this.$keycloak.token}`
         })
 
         this.player.on('error', (e) => {
@@ -219,7 +219,7 @@ export default {
     },
     setCamera () {
       setCamera({
-        deviceId: this.detailobj.deviceId,
+        deviceId: this.detailobj.identifier,
         width: this.infoData.withHight.split('*')[0],
         hight: this.infoData.withHight.split('*')[1],
         bitRate: this.infoData.bitRate.slice(0, -4),
@@ -249,7 +249,7 @@ export default {
       })
     },
     getVideoinfo (param) {
-      getVideoinfo(this.detailobj.deviceId).then(({ data }) => {
+      getVideoinfo(this.detailobj.identifier).then(({ data }) => {
         this.infoData = {
           withHight: data.width + '*' + data.hight,
           frameRate: data.frameRate + 'fps',
@@ -400,7 +400,7 @@ export default {
     },
     getStatistic (endTime, startTime) {
       getStatistic({
-        deviceId: this.detailobj.deviceId,
+        deviceId: this.detailobj.identifier,
         startTime: startTime,
         endTime: endTime,
         pageIndex: 1,

src/views/external/camera/index.vue

@@ -57,7 +57,7 @@
                 @click="toDetail(video)"
               >
                 <video
-                  :ref="video.deviceId"
+                  :ref="video.identifier"
                   style="width: 100%;"
                   class="video"
                   muted
@@ -65,7 +65,7 @@
                   :poster="require('@/assets//video-post.png')"
                 />
                 <div
-                  v-show="!video.online"
+                  v-show="!video.onlineStatus"
                   class="offLine"
                 >
                   设备离线
@@ -89,11 +89,25 @@
             </el-col>
           </el-row>
           <div
-            v-if="!videoOption.list.length"
+            v-if="!videoOption.list.length&&!videoOption.error"
             class="empty"
           >
             无摄像头数据
           </div>
+          <el-result
+            v-if="videoOption.error"
+            icon="warning"
+          >
+            <template #extra>
+              <el-link
+                class="u-pointer"
+                type="warning"
+                @click="getCamera"
+              >
+                出错了，点击重试
+              </el-link>
+            </template>
+          </el-result>
           <pagination
             :total="videoOption.totalCount"
             :page.sync="videoOption.params.pageNum"
@@ -102,6 +116,110 @@
           />
         </div>
       </el-tab-pane>
+      <!-- <el-tab-pane
+        label="LED屏画面监测"
+        name="second"
+      >
+        <div v-loading="screenOption.loading" class="has-top-padding">
+          <div class="l-flex--row c-table__header">
+            <div class="l-flex__auto c-sibling-item">
+              <button
+                v-if="isSuperAdmin"
+                class="o-button"
+                @click="onAdd"
+              >
+                <i class="o-button__icon el-icon-circle-plus-outline" />新增
+              </button>
+            </div>
+            <search-input
+              v-model.trim="searchname"
+              class="l-flex__none c-sibling-item"
+              placeholder="搜索"
+              @search="search"
+            />
+            <button
+              class="l-flex__none c-sibling-item o-button"
+              @click="search"
+            >
+              搜索
+            </button>
+          </div>
+          <el-row
+            v-if="screenOption.list.length"
+            :gutter="16"
+            class="rowheight"
+          >
+            <el-col
+              v-for="(video, index) in screenOption.list"
+              :key="index"
+              :span="8"
+              class="cameraRow"
+            >
+              <div
+                ref="screenB"
+                class="o-video bg-purple"
+                :style="{ height: videoheight }"
+                @click="toDetail(video)"
+              >
+                <video
+                  :ref="video.deviceId"
+                  style="width: 100%;"
+                  class="video"
+                  muted
+                  autoplay
+                  :poster="require('@/assets/video-post.png')"
+                />
+                <div
+                  v-show="!video.online"
+                  class="offLine"
+                >
+                  设备离线
+                </div>
+                <div class="o-video_buttom l-flex--row">
+                  <div class="l-flex__auto">{{ video.name }}</div>
+                  <template v-if="isSuperAdmin">
+                    <img
+                      class="o-video_edit"
+                      :src="imgUrl.edit"
+                      @click.stop="editbtn(video)"
+                    >
+                    <img
+                      class="o-video_delete"
+                      :src="imgUrl.delete"
+                      @click.stop="deletebtn(video)"
+                    >
+                  </template>
+                </div>
+              </div>
+            </el-col>
+          </el-row>
+          <div
+            v-if="!screenOption.list.length&&!screenOption.error"
+            class="empty"
+          >无摄像头数据</div>
+          <el-result
+            v-if="screenOption.error"
+            icon="warning"
+          >
+            <template #extra>
+              <el-link
+                class="u-pointer"
+                type="warning"
+                @click="getCamera"
+              >
+                出错了，点击重试
+              </el-link>
+            </template>
+          </el-result>
+          <pagination
+            :total="screenOption.totalCount"
+            :page-sizes="[6]"
+            :page.sync="screenOption.params.pageNum"
+            :limit.sync="screenOption.params.pageSize"
+            @pagination="getCamera"
+          />
+        </div>
+      </el-tab-pane> -->
     </el-tabs>
     <el-dialog
       :title="dialogTitle"
@@ -129,10 +247,10 @@
         </el-form-item>
         <el-form-item
           label="ID"
-          prop="deviceId"
+          prop="identifier"
         >
           <el-input
-            v-model.trim="camera.deviceId"
+            v-model.trim="camera.identifier"
             class="c-form__item limit"
             maxlength="50"
             :disabled="isEdit"
@@ -241,14 +359,14 @@ export default {
       adding: false,
       camera: {
         name: '',
-        deviceId: '',
+        identifier: '',
         username: '',
         password: '',
         remark: ''
       },
       cameraRules: {
         name: [{ required: true, message: '请填写设备名称', trigger: 'blur' }],
-        deviceId: [{ required: true, message: '请填写ID', trigger: 'blur' }],
+        identifier: [{ required: true, message: '请填写ID', trigger: 'blur' }],
         username: [
           { required: true, message: '请填写用户名', trigger: 'blur' }
         ],
@@ -258,7 +376,17 @@ export default {
       editOption: {},
       detailing: false,
       videoheight: '',
-      playerList: {}
+      playerList: {},
+
+      screenOption: createListOptions({
+        pageSize: 6
+      }),
+      checkList: [],
+      returnList: createListOptions({
+        pageSize: 9
+      }),
+      returnheight: 0,
+      rowNum: 8
     }
   },
   computed: {
@@ -302,8 +430,8 @@ export default {
               this.videoheight = (this.$refs.videoB[0].clientWidth * 9) / 16 + 'px'
               this.destroyPlayer()
               for (let i = 0; i < data.length; i++) {
-                if (options.list[i].online) {
-                  this.getflv(options.list[i].deviceId)
+                if (options.list[i].onlineStatus) {
+                  this.getflv(options.list[i].identifier)
                 }
               }
             })
@@ -320,7 +448,7 @@ export default {
     addCamera () {
       addCamera({
         name: this.camera.name,
-        deviceId: this.camera.deviceId,
+        identifier: this.camera.identifier,
         username: this.camera.username,
         password: this.camera.password,
         remark: this.camera.remark
@@ -332,7 +460,7 @@ export default {
     onAdd () {
       this.camera = {
         name: '',
-        deviceId: '',
+        identifier: '',
         username: '',
         password: '',
         remark: ''
@@ -367,7 +495,7 @@ export default {
       this.editOption = item
       this.camera = {
         name: item.name,
-        deviceId: item.deviceId,
+        identifier: item.identifier,
         username: item.username,
         remark: item.remark
       }
@@ -376,7 +504,7 @@ export default {
       updateCamera({
         id: item.id,
         name: this.camera.name,
-        deviceId: item.deviceId,
+        identifier: item.identifier,
         username: this.camera.username,
         password: this.camera.password,
         remark: this.camera.remark
@@ -394,25 +522,25 @@ export default {
         this.getCamera()
       })
     },
-    getflv (deviceId) {
+    getflv (identifier) {
       if (flvjs.isSupported()) {
         // 创建一个flvjs实例
-        this.playerList[deviceId] = flvjs.createPlayer({
+        this.playerList[identifier] = flvjs.createPlayer({
           type: 'flv',
           isLive: true,
           hasAudio: false,
-          url: `${CAMERA_URL}/${deviceId}?authorization=${this.$keycloak.token}`
+          url: `${CAMERA_URL}/${identifier}?authorization=${this.$keycloak.token}`
         })
-        this.playerList[deviceId].on('error', (e) => {
+        this.playerList[identifier].on('error', (e) => {
           console.log(e)
         })
         // 将实例挂载到video元素上面
-        this.playerList[deviceId].attachMediaElement(this.$refs[deviceId][0])
+        this.playerList[identifier].attachMediaElement(this.$refs[identifier][0])
         // player.currentTime = parseFloat(document.getElementsByName('seekpoint')[0].value);
         try {
           // 开始运行加载 只要流地址正常 就可以在h5页面中播放出画面了
-          this.playerList[deviceId].load()
-          this.playerList[deviceId].play()
+          this.playerList[identifier].load()
+          this.playerList[identifier].play()
         } catch (error) {
           console.log('连接websocker异常：' + error)
           console.log(error)
@@ -420,7 +548,7 @@ export default {
       }
     },
     toDetail (item) {
-      if (item.online) {
+      if (item.onlineStatus) {
         this.detailing = true
         this.editOption = item
         this.destroyPlayer()