refactor: player

src/components/dialog/CameraDialog/index.vue

@@ -0,0 +1,47 @@
+<template>
+  <el-dialog
+    :visible.sync="dialogVisible"
+    class="c-dialog--full"
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+    append-to-body
+    fullscreen
+    v-bind="$attrs"
+    @closed="onClosed"
+  >
+    <camera-detail
+      v-if="camera"
+      :camera="camera"
+    />
+    <i
+      class="l-flex__none c-dialog--full__close el-icon-close has-active u-bold u-pointer"
+      @click="onCloseDialog"
+    />
+  </el-dialog>
+</template>
+
+<script>
+export default {
+  name: 'CameraDialog',
+  inheritAttrs: false,
+  data () {
+    return {
+      dialogVisible: false,
+      camera: null
+    }
+  },
+  methods: {
+    show (camera) {
+      this.camera = camera
+      this.dialogVisible = true
+    },
+    onCloseDialog () {
+      this.dialogVisible = false
+    },
+    onClosed () {
+      this.camera = false
+      this.$emit('closed')
+    }
+  }
+}
+</script>

src/components/dialog/PreviewDialog/index.vue

@@ -1,12 +1,12 @@
 <template>
   <el-dialog
-    :visible.sync="showDetail"
+    :visible.sync="isPreviewing"
     custom-class="c-dialog--transparent"
     :close-on-click-modal="false"
     v-bind="$attrs"
     v-on="$listeners"
   >
-    <template v-if="showDetail">
+    <template v-if="isPreviewing">
       <auto-image
         v-if="isImage"
         class="o-image--preview"
@@ -28,7 +28,7 @@
       />
       <i
         class="o-close o-icon el-icon-close has-active u-bold u-pointer"
-        @click="onClose"
+        @click="onCloseDialog"
       />
       <template v-if="isMultipleFiles">
         <i
@@ -53,7 +53,7 @@ export default {
   name: 'PreviewDialog',
   data () {
     return {
-      showDetail: false,
+      isPreviewing: false,
       isMultipleFiles: false,
       total: 0,
       active: 0,
@@ -84,10 +84,10 @@ export default {
       this.total = this.$sources.length
       this.active = 0
       this.source = this.$sources[this.active]
-      this.showDetail = true
+      this.isPreviewing = true
     },
-    onClose () {
-      this.showDetail = false
+    onCloseDialog () {
+      this.isPreviewing = false
     },
     onPresent () {
       this.active = (this.active - 1 + this.total) % this.total

src/components/dialog/ProgramDialog/index.vue

@@ -2,7 +2,7 @@
   <el-dialog
     :visible.sync="isPreviewing"
     custom-class="c-dialog--preview program"
-    :before-close="onCloseScheduleDialog"
+    :before-close="onCloseDialog"
     :close-on-click-modal="false"
     append-to-body
     v-on="$attrs"
@@ -14,7 +14,7 @@
     />
     <i
       class="l-flex__none c-dialog--preview__close has-active el-icon-close u-bold u-pointer"
-      @click="onCloseScheduleDialog"
+      @click="onCloseDialog"
     />
   </el-dialog>
 </template>
@@ -63,7 +63,7 @@ export default {
         this.$closeLoading(loading)
       })
     },
-    onCloseScheduleDialog () {
+    onCloseDialog () {
       this.isPreviewing = false
     },
     showMessage (type, message) {

src/components/dialog/ScheduleDialog/index.vue

@@ -2,7 +2,7 @@
   <el-dialog
     :visible.sync="isPreviewing"
     custom-class="c-dialog--preview"
-    :before-close="onCloseScheduleDialog"
+    :before-close="onCloseDialog"
     :close-on-click-modal="false"
     append-to-body
     v-on="$attrs"
@@ -15,7 +15,7 @@
     />
     <i
       class="l-flex__none c-dialog--preview__close el-icon-close has-active u-bold u-pointer"
-      @click="onCloseScheduleDialog"
+      @click="onCloseDialog"
     />
   </el-dialog>
 </template>
@@ -35,7 +35,7 @@ export default {
       this.scheduleId = id
       this.isPreviewing = true
     },
-    onCloseScheduleDialog () {
+    onCloseDialog () {
       this.isPreviewing = false
     },
     onClosed () {

src/components/external/DevicePlayer/index.vue

@@ -35,37 +35,43 @@
       class="l-flex--row c-footer"
     >
       <div class="l-flex__fill c-sibling-item u-ellipsis">{{ device.name }}</div>
-      <template v-if="recordConfig">
-        <i
-          v-if="loadingQuality"
-          class="c-sibling-item el-icon-loading"
-        />
-        <div
-          v-else
-          class="l-flex__none c-sibling-item o-quality-menu u-pointer"
-          @click.stop="toggleQualityMenu"
-        >
+      <slot
+        name="controls"
+        :can-play="canPlay"
+        :on-full-screen="onFullScreen"
+      >
+        <template v-if="canPlay">
+          <i
+            v-if="loadingQuality"
+            class="c-sibling-item el-icon-loading"
+          />
           <div
-            v-if="showQualityMenu"
-            class="o-quality-menu__list"
+            v-else
+            class="l-flex__none c-sibling-item o-quality-menu u-pointer"
+            @click.stop="toggleQualityMenu"
           >
             <div
-              v-for="item in qualities"
-              :key="item.value"
-              class="o-quality-menu__item u-pointer"
-              :class="{ active: quality.value === item.value }"
-              @click="changeQuality(item)"
+              v-if="showQualityMenu"
+              class="o-quality-menu__list"
             >
-              {{ item.label }}
+              <div
+                v-for="item in qualities"
+                :key="item.value"
+                class="o-quality-menu__item u-pointer"
+                :class="{ active: quality.value === item.value }"
+                @click="changeQuality(item)"
+              >
+                {{ item.label }}
+              </div>
             </div>
+            <span class="has-active">{{ quality.label }}</span>
           </div>
-          <span class="has-active">{{ quality.label }}</span>
-        </div>
-        <i
-          class="c-sibling-item el-icon-full-screen has-active u-pointer"
-          @click="onFullScreen"
-        />
-      </template>
+          <i
+            class="c-sibling-item el-icon-full-screen has-active u-pointer"
+            @click="onFullScreen"
+          />
+        </template>
+      </slot>
     </div>
   </div>
 </template>
@@ -126,6 +132,9 @@ export default {
   computed: {
     online () {
       return this.device.activate === 2 && this.device.onlineStatus === 1
+    },
+    canPlay () {
+      return !this.loading && !this.needReset
     }
   },
   watch: {
@@ -134,9 +143,8 @@ export default {
         this.$nextTick(this.createPlayer)
       } else {
         this.hideQualityMenu()
+        this.onVideoReset()
         this.destroyPlayer()
-        this.recordConfig = null
-        this.$playerInfo = null
       }
     }
   },
@@ -150,10 +158,9 @@ export default {
     this.hideQualityMenu()
   },
   methods: {
-    onVideoEnded () {
+    onVideoReset () {
       this.recordConfig = null
       this.$playerInfo = null
-      this.onVideoError('Device Playback Ended')
     },
     getRecordConfig () {
       this.loadingQuality = true
@@ -172,7 +179,7 @@ export default {
           }
         },
         () => {
-          this.destroyPlayer()
+          this.onVideoDestroyByError()
         }
       )
     },
@@ -188,7 +195,7 @@ export default {
           this.createPlayer()
         },
         () => {
-          this.destroyPlayer()
+          this.onVideoDestroyByError()
         }
       ).finally(() => {
         this.loadingQuality = false
@@ -226,7 +233,7 @@ export default {
           }
         },
         () => {
-          this.destroyPlayer()
+          this.onVideoDestroyByError()
         }
       )
     },

src/components/external/camera/CameraDetail/index.vue

@@ -2,10 +2,10 @@
   <div class="c-camera-detail">
     <div class="l-flex--row center c-camera-detail__header">
       <div class="c-camera-detail__name u-ellipsis"> {{ camera.name }}</div>
-      <i
+      <!-- <i
         class="c-camera-detail__close el-icon-close u-pointer"
         @click="close"
-      />
+      /> -->
     </div>
     <video
       ref="video"
@@ -200,11 +200,10 @@ export default {
     }
   },
   methods: {
-    onVideoEnded () {
+    onVideoReset () {
       this.videoSettings = null
       this.infoData = null
       this.getAvailableParam()
-      this.onVideoError('Camera Detail Ended')
     },
     close () {
       this.destroyPlayer()
@@ -221,8 +220,7 @@ export default {
       }).then(
         () => {
           this.dataInit()
-          this.destroyPlayer()
-          this.createPlayer()
+          this.onRefresh()
         },
         () => {
           this.infoData = { ...this.$infoData }
@@ -560,7 +558,7 @@ $theme-blue: #003e90;
     top: 0;
     left: 0;
     width: 100%;
-    height: 42px;
+    height: 40px;
     color: #fff;
     font-size: 24px;
     text-align: center;
@@ -587,16 +585,6 @@ $theme-blue: #003e90;
     width: 600px;
   }
 
-  &__close {
-    position: absolute;
-    top: 50%;
-    right: 0;
-    padding: $spacing;
-    color: #fff;
-    font-size: 32px;
-    transform: translateY(-50%);
-  }
-
   &__footer {
     position: absolute;
     left: 0;

src/components/external/camera/CameraPlayer/index.vue

@@ -78,9 +78,6 @@ export default {
     this.online && this.createPlayer()
   },
   methods: {
-    onVideoEnded () {
-      this.onVideoError('Camera Playback Ended')
-    },
     createPlayer () {
       this.playUrl(`${GATEWAY_CAMERA}/${this.camera.identifier}?authorization=${this.token}`)
     }

src/components/external/player.js

@@ -10,6 +10,10 @@ export default {
     controls: {
       type: [Boolean, String],
       default: false
+    },
+    retry: {
+      type: [Boolean, String],
+      default: false
     }
   },
   data () {
@@ -52,6 +56,9 @@ export default {
     createPlayer () {
       // todo
     },
+    onVideoReset () {
+      // todo
+    },
     playUrl (url) {
       if (mpegtsjs.isSupported()) {
         this.loading = true
@@ -86,10 +93,14 @@ export default {
           player.load()
         } catch (error) {
           console.log('连接异常', error)
-          this.destroyPlayer()
+          this.onVideoDestroyByError('连接异常')
         }
       } else {
         this.destroyPlayer()
+        this.$message({
+          type: 'warning',
+          message: '暂不支持'
+        })
       }
     },
     destroyPlayer () {
@@ -188,15 +199,7 @@ export default {
       clearTimeout(this.$timer)
       this.$timer = setTimeout(() => {
         if (this.loading || this.waiting) {
-          if (this.controls) {
-            this.destroyPlayer()
-            this.$message({
-              type: 'warning',
-              message: '暂未获取到视频流'
-            })
-          } else {
-            this.onVideoError('No Streaming')
-          }
+          this.onVideoDestroyByError('暂未获取到视频流')
         }
       }, 10000)
     },
@@ -209,11 +212,29 @@ export default {
     },
     onVideoError (e) {
       console.log('onVideoError', e)
-      this.destroyPlayer()
-      this.createPlayer()
+      this.onVideoReset()
+      this.onVideoDestroyByError('播放异常')
     },
     onVideoEnded () {
       console.log('onVideoEnd')
+      this.onVideoReset()
+      this.onVideoDestroyByError('播放结束')
+    },
+    onVideoRefresh () {
+      this.destroyPlayer()
+      this.onVideoReset()
+      this.createPlayer()
+    },
+    onVideoDestroyByError (message) {
+      this.destroyPlayer()
+      if (this.retry) {
+        this.createPlayer()
+      } else if (message) {
+        this.$message({
+          type: 'warning',
+          message
+        })
+      }
     }
   }
 }

src/components/service/FullLink/index.vue

@@ -29,6 +29,7 @@
             v-if="item.key === 'led'"
             :device="device"
             autoplay
+            retry
           />
           <svg-icon
             v-else

src/scss/bem/_component.scss

@@ -67,6 +67,16 @@
     padding: 0;
     height: 100%;
   }
+
+  &__close {
+    position: absolute;
+    top: 0;
+    right: 0;
+    padding: 8px $spacing;
+    color: #fff;
+    font-size: 24px;
+    z-index: 9;
+  }
 }
 
 .c-dialog--preview {
@@ -97,9 +107,10 @@
     position: absolute;
     top: 0;
     right: 0;
-    padding: 16px;
+    padding: $spacing;
     color: $black;
     font-size: 24px;
+    z-index: 8;
   }
 
   .el-dialog__header {

src/views/device/detail/components/DeviceExternal/external/Camera/led.vue

@@ -16,22 +16,10 @@
         />
       </grid-table-item>
     </grid-table>
-    <el-dialog
-      class="c-dialog--full"
-      :visible="detailing"
-      :close-on-click-modal="false"
-      :close-on-press-escape="false"
-      append-to-body
-      fullscreen
-    >
-      <camera-detail
-        v-if="detailing"
-        :camera="targetCamera"
-        autoplay
-        controls
-        @close="onClose"
-      />
-    </el-dialog>
+    <camera-dialog
+      ref="cameraDialog"
+      @closed="onClosed"
+    />
   </div>
 </template>
 
@@ -53,13 +41,7 @@ export default {
         pageSize: 999,
         list: this.getCameras
       },
-      detailing: false,
-      targetCamera: null
-    }
-  },
-  computed: {
-    isActivated () {
-      return !this.detailing
+      isActivated: true
     }
   },
   methods: {
@@ -78,13 +60,11 @@ export default {
       })
     },
     onFullScreen (camera) {
-      if (camera.onlineStatus) {
-        this.targetCamera = camera
-        this.detailing = true
-      }
+      this.isActivated = false
+      this.$refs.cameraDialog.show(camera)
     },
-    onClose () {
-      this.detailing = false
+    onClosed () {
+      this.isActivated = true
     }
   }
 }

src/views/device/detail/components/DeviceExternal/external/Camera/traffic.vue

@@ -16,22 +16,10 @@
         />
       </grid-table-item>
     </grid-table>
-    <el-dialog
-      class="c-dialog--full"
-      :visible="detailing"
-      :close-on-click-modal="false"
-      :close-on-press-escape="false"
-      append-to-body
-      fullscreen
-    >
-      <camera-detail
-        v-if="detailing"
-        :camera="targetCamera"
-        autoplay
-        controls
-        @close="onClose"
-      />
-    </el-dialog>
+    <camera-dialog
+      ref="cameraDialog"
+      @closed="onClosed"
+    />
   </div>
 </template>
 
@@ -53,13 +41,7 @@ export default {
         pageSize: 999,
         list: this.getCameras
       },
-      detailing: false,
-      targetCamera: null
-    }
-  },
-  computed: {
-    isActivated () {
-      return !this.detailing
+      isActivated: true
     }
   },
   methods: {
@@ -78,13 +60,11 @@ export default {
       })
     },
     onFullScreen (camera) {
-      if (camera.onlineStatus) {
-        this.targetCamera = camera
-        this.detailing = true
-      }
+      this.isActivated = false
+      this.$refs.cameraDialog.show(camera)
     },
-    onClose () {
-      this.detailing = false
+    onClosed () {
+      this.isActivated = true
     }
   }
 }

src/views/external/camera/bak.vue

@@ -1,317 +0,0 @@
-<template>
-  <wrapper
-    fill
-    margin
-    padding
-    background
-  >
-    <el-tabs
-      :value="active"
-      class="c-tabs has-bottom-padding"
-      @tab-click="onTabClick"
-    >
-      <el-tab-pane
-        label="人流量监测"
-        name="2"
-      />
-      <el-tab-pane
-        label="LED屏监测"
-        name="1"
-      />
-    </el-tabs>
-    <grid-table
-      ref="table"
-      :schema="schema"
-      size="large"
-    >
-      <grid-table-item v-slot="item">
-        <camera-player
-          v-if="isActivated"
-          :key="item.identifier"
-          :camera="item"
-          controls
-          @fullscreen="onFullScreen(item)"
-        >
-          <i
-            class="c-sibling-item el-icon-edit has-active u-pointer"
-            @click.stop="onEdit(item)"
-          />
-          <i
-            class="c-sibling-item el-icon-delete has-active u-pointer"
-            @click.stop="onDel(item)"
-          />
-        </camera-player>
-      </grid-table-item>
-    </grid-table>
-    <confirm-dialog
-      ref="editDialog"
-      :title="dialogTitle"
-      @confirm="onConfirm"
-    >
-      <div class="c-grid-form u-align-self--center">
-        <span class="c-grid-form__label required">设备名称</span>
-        <el-input
-          v-model.trim="camera.name"
-          placeholder="最多50个字符"
-          maxlength="50"
-          clearable
-        />
-        <span class="c-grid-form__label required">设备标识</span>
-        <el-input
-          v-model.trim="camera.identifier"
-          placeholder="最多50个字符"
-          maxlength="50"
-          :disabled="isEdit"
-          clearable
-        />
-        <span class="c-grid-form__label required">账号</span>
-        <el-input
-          v-model.trim="camera.username"
-          placeholder="最多50个字符"
-          maxlength="50"
-          :disabled="isEdit"
-        />
-        <template v-if="!isEdit">
-          <span class="c-grid-form__label required">密码</span>
-          <el-input
-            v-model.trim="camera.password"
-            class="o-password"
-            placeholder="最多50个字符"
-            maxlength="50"
-          />
-        </template>
-        <span class="c-grid-form__label">备注</span>
-        <el-input
-          v-model.trim="camera.remark"
-          type="textarea"
-          maxlength="100"
-          :rows="3"
-          show-word-limit
-        />
-      </div>
-    </confirm-dialog>
-    <el-dialog
-      class="c-dialog--full"
-      :visible="detailing"
-      :close-on-click-modal="false"
-      :close-on-press-escape="false"
-      fullscreen
-    >
-      <camera-detail
-        v-if="detailing"
-        :camera="targetCamera"
-        autoplay
-        @close="onClose"
-      />
-    </el-dialog>
-    <!-- <el-dialog
-      class="c-dialog--full"
-      :visible="fullscreen"
-      :close-on-click-modal="false"
-      :close-on-press-escape="false"
-      fullscreen
-    >
-      <fullscreen
-        v-if="fullscreen"
-        :info="fullscreenOptions"
-        @close="onClose"
-      />
-    </el-dialog> -->
-  </wrapper>
-</template>
-
-<script>
-import { mapGetters } from 'vuex'
-import {
-  getCameras,
-  addCamera,
-  updateCamera,
-  deleteCamera
-} from '@/api/camera'
-import { Camera } from '@/constant'
-// import Fullscreen from './components/Fullscreen'
-
-export default {
-  name: 'Cameras',
-  // components: {
-  //   Fullscreen
-  // },
-  data () {
-    return {
-      active: `${Camera.TRAFFIC}`,
-      schema: {
-        pageSize: 6,
-        condition: { name: '' },
-        list: this.getCameras,
-        buttons: [
-          { type: 'add', on: this.onAdd }/* ,
-          { label: '全部', icon: 'el-icon-menu', on: this.onAll } */
-        ],
-        filters: [
-          { key: 'searchname', type: 'search', placeholder: '设备名称' }
-        ]
-      },
-      camera: {},
-      detailing: false,
-      fullscreen: false,
-      targetCamera: null,
-      fullscreenOptions: null
-    }
-  },
-  computed: {
-    ...mapGetters(['isSuperAdmin']),
-    cameraType () {
-      return Number(this.active)
-    },
-    isTraffic () {
-      return this.cameraType === Camera.TRAFFIC
-    },
-    isEdit () {
-      return !!this.camera.id
-    },
-    dialogTitle () {
-      const type = this.isTraffic ? '人流量监测摄像头' : 'LED屏监测摄像头'
-      if (this.isEdit) {
-        return `编辑${type}`
-      }
-      return `新增${type}`
-    },
-    isActivated () {
-      return !this.detailing && !this.fullscreen
-    }
-  },
-  methods: {
-    onTabClick ({ name: active }) {
-      if (this.active !== active) {
-        this.active = active
-        this.$refs.table.pageTo(1)
-      }
-    },
-    getCameras (params) {
-      return getCameras({
-        ...params,
-        cameraType: this.cameraType
-      })
-    },
-    onAdd () {
-      this.camera = {
-        name: '',
-        identifier: '',
-        username: '',
-        password: '',
-        remark: ''
-      }
-      this.$refs.editDialog.show()
-    },
-    onEdit (camera) {
-      this.camera = {
-        id: camera.id,
-        name: camera.name,
-        identifier: camera.identifier,
-        username: camera.username,
-        remark: camera.remark
-      }
-      this.$refs.editDialog.show()
-    },
-    onConfirm (done) {
-      if (!this.camera.name) {
-        this.$message({
-          type: 'warning',
-          message: '请填写设备名称'
-        })
-        return
-      }
-      if (!this.camera.name) {
-        this.$message({
-          type: 'identifier',
-          message: '请填写设备标识'
-        })
-        return
-      }
-      if (this.isEdit) {
-        this.editCamera(done)
-      } else {
-        this.addCamera(done)
-      }
-    },
-    addCamera (done) {
-      if (!this.camera.username) {
-        this.$message({
-          type: 'identifier',
-          message: '请填写账号'
-        })
-        return
-      }
-      if (!this.camera.password) {
-        this.$message({
-          type: 'identifier',
-          message: '请填写密码'
-        })
-        return
-      }
-      addCamera({
-        cameraType: this.cameraType,
-        ...this.camera
-      }).then(() => {
-        this.$refs.table.resetCondition({ name: this.camera.name })
-        done()
-      })
-    },
-    editCamera (done) {
-      updateCamera({
-        cameraType: this.cameraType,
-        ...this.camera
-      }).then(() => {
-        this.$refs.table.pageTo()
-        done()
-      })
-    },
-    onDel (camera) {
-      deleteCamera({ id: camera.id, name: camera.name }).then(() => {
-        this.$refs.table.decrease(1)
-      })
-    },
-    onFullScreen (camera) {
-      if (camera.onlineStatus) {
-        this.targetCamera = camera
-        this.detailing = true
-      }
-    },
-    onAll () {
-      const { totalCount, ...params } = this.$refs.table.info()
-      if (totalCount > params.pageSize) {
-        this.fullscreenOptions = {
-          params: {
-            ...params,
-            cameraType: this.cameraType,
-            pageNum: 1,
-            pageSize: totalCount
-          }
-        }
-      } else {
-        this.fullscreenOptions = {
-          list: this.$refs.table.getData()
-        }
-      }
-      this.fullscreen = true
-    },
-    onClose () {
-      this.detailing = false
-      this.fullscreen = false
-      this.fullscreenOptions = null
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.o-botton--white {
-  color: #8e929c;
-  border: 1px solid #d5d9e4;
-  background-color: #fff;
-}
-
-.o-password {
-  -webkit-text-security: disc;
-}
-</style>

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

@@ -1,116 +0,0 @@
-<template>
-  <div
-    v-loading="options.loading"
-    class="has-padding"
-  >
-    <div class="l-grid large">
-      <camera-player
-        v-for="camera in options.list"
-        :key="camera.identifier"
-        :camera="camera"
-        autoplay
-      />
-    </div>
-    <status-wrapper
-      v-if="isAbnormal"
-      :error="options.error"
-      @click="getCameras"
-    />
-  </div>
-</template>
-
-<script>
-import { getCameras } from '@/api/camera'
-
-export default {
-  name: 'CameraWall',
-  props: {
-    info: {
-      type: Object,
-      required: true
-    }
-  },
-  data () {
-    return {
-      options: {
-        loading: false,
-        error: false,
-        list: []
-      },
-      fullscreen: false
-    }
-  },
-  computed: {
-    isAbnormal () {
-      const options = this.options
-      return options.error || !options.loading && options.list.length === 0
-    }
-  },
-  created () {
-    this.initScreen()
-    if (this.info.list) {
-      this.options.list = this.info.list
-    } else {
-      this.getCameras(this.info.params)
-    }
-  },
-  methods: {
-    getCameras (params) {
-      const options = this.options
-      options.loading = true
-      options.error = false
-      getCameras(params).then(
-        ({ data }) => {
-          options.list = data
-        },
-        () => {
-          options.error = true
-          options.list = []
-        }
-      ).finally(() => {
-        options.loading = false
-      })
-    },
-    initScreen () {
-      this.handleFullScreen()
-      window.addEventListener('fullscreenchange', () => {
-        if (this.fullscreen === true) {
-          this.fullscreen = false
-        } else {
-          this.fullscreen = true
-          this.$emit('close')
-        }
-      })
-    },
-    handleFullScreen () {
-      const element = document.documentElement
-      if (this.fullscreen) {
-        if (document.exitFullscreen) {
-          document.exitFullscreen()
-        } else if (document.webkitCancelFullScreen) {
-          document.webkitCancelFullScreen()
-        } else if (document.mozCancelFullScreen) {
-          document.mozCancelFullScreen()
-        } else if (document.msExitFullscreen) {
-          document.msExitFullscreen()
-        }
-        console.log('退出全屏')
-      } else {
-        if (element.requestFullscreen) {
-          element.requestFullscreen()
-        } else if (element.webkitRequestFullScreen) {
-          element.webkitRequestFullScreen()
-        } else if (element.mozRequestFullScreen) {
-          element.mozRequestFullScreen()
-        } else if (element.msRequestFullscreen) {
-          // IE11
-          element.msRequestFullscreen()
-        }
-        console.log('全屏')
-      }
-      // 改变当前全屏状态
-      this.fullscreen = !this.fullscreen
-    }
-  }
-}
-</script>

src/views/external/camera/index.vue

@@ -63,20 +63,7 @@
         />
       </div>
     </confirm-dialog>
-    <el-dialog
-      class="c-dialog--full"
-      :visible="detailing"
-      :close-on-click-modal="false"
-      :close-on-press-escape="false"
-      fullscreen
-    >
-      <camera-detail
-        v-if="detailing"
-        :camera="targetCamera"
-        autoplay
-        @close="onClose"
-      />
-    </el-dialog>
+    <camera-dialog ref="cameraDialog" />
   </wrapper>
 </template>
 
@@ -131,9 +118,7 @@ export default {
           ] }
         ]
       },
-      camera: {},
-      detailing: false,
-      targetCamera: null
+      camera: {}
     }
   },
   computed: {
@@ -145,9 +130,6 @@ export default {
         return `编辑${this.camera.type === Camera.TRAFFIC ? '人流量监测摄像头' : 'LED屏监测摄像头'}`
       }
       return '新增摄像头'
-    },
-    isActivated () {
-      return !this.detailing && !this.fullscreen
     }
   },
   methods: {
@@ -225,13 +207,7 @@ export default {
       })
     },
     onFullScreen (camera) {
-      if (camera.onlineStatus) {
-        this.targetCamera = camera
-        this.detailing = true
-      }
-    },
-    onClose () {
-      this.detailing = false
+      this.$refs.cameraDialog.show(camera)
     }
   }
 }

src/views/realm/device/settings/components/external/Camera/index.vue

@@ -40,6 +40,7 @@
           :camera="item"
           controls
           @fullscreen="onFullScreen(item)"
+          @click.native="onFullScreen(item)"
         >
           <i
             class="c-sibling-item el-icon-delete has-active u-pointer"
@@ -48,27 +49,16 @@
         </camera-player>
       </grid-table-item>
     </grid-table>
-    <el-dialog
-      class="c-dialog--full"
-      :visible="detailing"
-      :close-on-click-modal="false"
-      :close-on-press-escape="false"
-      fullscreen
-    >
-      <camera-detail
-        v-if="detailing"
-        :camera="targetCamera"
-        autoplay
-        controls
-        @close="onClose"
-      />
-    </el-dialog>
     <table-dialog
-      ref="cameraDialog"
+      ref="tableDialog"
       :title="title"
       :schema="cameraSchema"
       @choosen="onCameraChoosen"
     />
+    <camera-dialog
+      ref="cameraDialog"
+      @closed="onClosed"
+    />
   </div>
 </template>
 
@@ -100,8 +90,7 @@ export default {
         pageSize: 999,
         list: this.getCameras
       },
-      detailing: false,
-      targetCamera: null
+      isActivated: true
     }
   },
   computed: {
@@ -111,9 +100,6 @@ export default {
     cameraType () {
       return this.isTraffic ? Camera.TRAFFIC : Camera.LED
     },
-    isActivated () {
-      return !this.detailing
-    },
     title () {
       return this.deviceType === ThirdPartyDevice.TRAFFIC_CAMERA ? '绑定人流量监测摄像头' : '绑定LED屏监测摄像头'
     },
@@ -150,17 +136,15 @@ export default {
       })
     },
     onFullScreen (camera) {
-      if (camera.onlineStatus) {
-        this.targetCamera = camera
-        this.detailing = true
-      }
+      this.isActivated = false
+      this.$refs.cameraDialog.show(camera)
     },
-    onClose () {
-      this.detailing = false
+    onClosed () {
+      this.isActivated = true
     },
     onAdd (deviceType) {
       this.deviceType = ThirdPartyDevice[deviceType]
-      this.$refs.cameraDialog.show()
+      this.$refs.tableDialog.show()
     },
     onCameraChoosen ({ value, done }) {
       this.$confirm(