smsb-web-develop/src/views/device/camera/index.vue

<template>
  <wrapper
    fill
    margin
    background
  >
    <el-tabs
      v-model="activeName"
      v-loading="videoOption.loading"
      class="c-tabs video"
      @tab-click="handleClick"
    >
      <el-tab-pane
        label="人流量监测"
        name="first"
      >
        <div class="has-padding">
          <div class="l-flex--row c-table__header">
            <div class="l-flex__auto c-sibling-item">
              <button
                v-if="hasEditPermission"
                class="o-button"
                @click="addbtn"
              >
                <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="videoOption.list.length"
            :gutter="16"
            class="rowheight"
          >
            <el-col
              v-for="(video, index) in videoOption.list"
              :key="index"
              :span="8"
              class="cameraRow"
            >
              <div
                ref="videoB"
                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="hasEditPermission">
                    <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="!videoOption.list.length"
            class="empty"
          >无摄像头数据</div>
          <pagination
            :total="videoOption.totalCount"
            :page-sizes="[6]"
            :page.sync="videoOption.params.pageNum"
            :limit.sync="videoOption.params.pageSize"
            @pagination="getCamera"
          />
        </div>
      </el-tab-pane>
      <!-- <el-tab-pane label="视频回传" name="second">
        <div class="has-padding">
          <div class="l-flex--row c-table__header">
            <div class="l-flex__auto c-sibling-item">
              <el-checkbox-group v-model="checkList" @change="chechChange">
                <el-checkbox label="视频回采"></el-checkbox>
                <el-checkbox label="模拟终端"></el-checkbox>
              </el-checkbox-group>
            </div>
            <div class="l-flex__none c-sibling-item">
              <img
                class="c-sibling-item"
                @click="rowChange(24)"
                :src="require('@/assets/icon_one_normal.png')"
                alt=""
              />
              <img
                class="c-sibling-item"
                @click="rowChange(12)"
                :src="require('@/assets/icon_four_normal.png')"
                alt=""
              />
              <img
                class="c-sibling-item"
                @click="rowChange(8)"
                :src="require('@/assets/icon_nine_focus.png')"
                alt=""
              />
            </div>
            <button
              class="l-flex__none c-sibling-item o-button"
              @click="search"
            >
              <i class="o-button__icon el-icon-full-screen" />
              全屏
            </button>
          </div>
          <el-row :gutter="16" class="rowheight">
            <el-col
              :span="rowNum"
              v-for="(item, index) in returnList.list"
              :key="index"
              class="cameraRow"
            >
              <div class="return_item bg-purple"
                ref="returnB"
                :style="{ height: returnheight }">
                <div class="o-video_buttom l-flex--row">
                  <div class="l-flex__auto">{{ item.name }}</div>
                  <img
                    :src="require('@/assets/icon_address.png')"
                    class="o-video_edit"
                  />
                  <div class="return_local">{{ item.name }}</div>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-tab-pane> -->
    </el-tabs>
    <!-- 新增和编辑 -->
    <el-dialog
      :title="dialogTitle"
      :visible.sync="adding"
      custom-class="c-dialog"
      :close-on-click-modal="false"
    >
      <el-form
        ref="cameraForm"
        :model="camera"
        :rules="cameraRules"
        label-width="100px"
        class="c-form"
      >
        <el-form-item
          label="设备名称"
          prop="name"
        >
          <el-input
            v-model.number="camera.name"
            class="c-form__item"
          />
        </el-form-item>
        <el-form-item
          v-if="!isEdit"
          label="ID"
          prop="deviceId"
        >
          <el-input
            v-model.number="camera.deviceId"
            class="c-form__item"
          />
        </el-form-item>
        <el-form-item
          label="用户名"
          prop="username"
        >
          <el-input
            v-model.number="camera.username"
            class="c-form__item"
          />
        </el-form-item>
        <el-form-item
          label="密码"
          prop="password"
        >
          <el-input
            v-model.number="camera.password"
            class="c-form__item"
          />
        </el-form-item>
        <el-form-item
          label="备注"
          prop="remark"
        >
          <el-input
            v-model.number="camera.remark"
            type="textarea"
            maxlength="500"
            class="c-form__item"
            show-word-limit
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <button
          class="o-button"
          @click="add('cameraForm')"
        >
          确定
        </button>
        <button
          class="o-button cancel"
          @click="handleCloseAddDialog('cameraForm')"
        >
          取消
        </button>
      </template>
    </el-dialog>
    <el-dialog
      title
      :fullscreen="true"
      :visible="detailing"
      :close-on-click-modal="false"
      class="fulldialog"
    >
      <detail
        v-if="detailing"
        :detailobj="editOption"
        @closeDetail="closeDetail"
      />
    </el-dialog>
  </wrapper>
</template>

<script>
import flvjs from 'flv.js'
import {
  getCamera,
  addCamera,
  updateCamera,
  deleteCamera,
  getOnline
} from '@/api/camera'
import { createListOptions } from '@/utils'
import Detail from './components/Detail'

const CAMERA_URL = `${location.protocol === 'https:' ? 'wss' : 'ws'}://${process.env.VUE_APP_GATEWAY || location.host}${process.env.VUE_APP_CAMERA_PROXY}`

export default {
  name: 'Camera',
  components: {
    Detail
  },
  data () {
    return {
      activeName: 'first',
      searchname: '',
      imgUrl: {
        edit: require('@/assets/icon_edit.png'),
        delete: require('@/assets/icon_delete.png')
      },
      videoOption: createListOptions({
        pageSize: 6
      }),
      dialogTitle: '新增',
      adding: false,
      camera: {
        name: '',
        deviceId: '',
        username: '',
        password: '',
        remark: ''
      },
      cameraRules: {
        name: [{ required: true, message: '请填写设备名称', trigger: 'blur' }],
        deviceId: [{ required: true, message: '请填写ID', trigger: 'blur' }],
        username: [
          { required: true, message: '请填写用户名', trigger: 'blur' }
        ],
        password: [{ required: true, message: '请填写密码', trigger: 'blur' }]
      },
      isEdit: true,
      editOption: {},
      detailing: false,
      videoheight: '',
      playerList: {},

      checkList: [],
      returnList: createListOptions({
        pageSize: 9
      }),
      returnheight: 0,
      rowNum: 8
    }
  },
  created () {
    this.getCamera()
  },
  beforeDestroy () {
    this.destroyPlayer()
  },
  methods: {
    rowChange (num) {
      this.rowNum = num
      this.$nextTick(() => {
        this.returnheight = (this.$refs.returnB[0].clientWidth * 9) / 16 + 'px'
      })
    },
    chechChange (val) {
      console.log(val)
    },
    destroyPlayer () {
      for (const key in this.playerList) {
        if (Object.hasOwnProperty.call(this.playerList, key)) {
          // const element = object[key];
          if (this.playerList[key]) {
            this.playerList[key].pause()
            this.playerList[key].unload()
            this.playerList[key].detachMediaElement()
            this.playerList[key].destroy()
            this.playerList[key] = null
          }
        }
      }
    },
    handleClick () {},
    search () {
      this.getCamera()
    },
    getCamera () {
      const options = this.videoOption
      options.error = false
      options.loading = true
      options.params.name = this.searchname
      getCamera(options.params)
        .then(
          ({ data, totalCount }) => {
            options.totalCount = totalCount
            options.list = data
            // for (let i = 0; i < 34; i++) {
            //   data.push({
            //     deviceId: Math.random(),
            //   })
            // }
            this.$nextTick(() => {
              this.videoheight =
                (this.$refs.videoB[0].clientWidth * 9) / 16 + 'px'
              this.destroyPlayer()
              for (let i = 0; i < data.length; i++) {
                getOnline(options.list[i].deviceId).then(({ data }) => {
                  options.list[i].online = data
                  if (data) {
                    this.getflv(options.list[i].deviceId)
                  }
                })
              }
            })
          },
          () => {
            options.error = true
            options.list = []
          }
        )
        .finally(() => {
          options.loading = false
        })
    },
    addCamera () {
      addCamera({
        name: this.camera.name,
        deviceId: this.camera.deviceId,
        username: this.camera.username,
        password: this.camera.password,
        remark: this.camera.remark
      }).then(() => {
        this.handleCloseAddDialog('cameraForm')
        this.getCamera()
      })
    },
    addbtn () {
      this.camera = {
        name: '',
        deviceId: '',
        username: '',
        password: '',
        remark: ''
      }
      this.dialogTitle = '新增'
      this.isEdit = false
      this.adding = true
    },
    add (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.isEdit) {
            this.edit(this.editOption)
          } else {
            this.addCamera()
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    handleCloseAddDialog (formName) {
      this.adding = false
      this.$refs[formName].resetFields()
    },
    editbtn (item) {
      this.adding = true
      this.isEdit = true
      this.dialogTitle = '编辑'

      this.editOption = item
      this.camera = {
        name: item.name,
        username: item.username,
        remark: item.remark
      }
    },
    edit (item) {
      updateCamera({
        id: item.id,
        name: this.camera.name,
        deviceId: item.deviceId,
        username: this.camera.username,
        password: this.camera.password,
        remark: this.camera.remark
      }).then(() => {
        this.handleCloseAddDialog('cameraForm')
        this.getCamera()
      })
    },
    deletebtn (item) {
      const videoOption = this.videoOption
      deleteCamera({ id: item.id, name: item.name }).then(() => {
        if (videoOption.list.length === 1 && videoOption.params.pageNum > 1) {
          videoOption.params.pageNum -= 1
        }
        this.getCamera()
      })
    },
    getflv (deviceId) {
      if (flvjs.isSupported()) {
        // 创建一个flvjs实例
        this.playerList[deviceId] = flvjs.createPlayer({
          type: 'flv',
          isLive: true,
          hasAudio: false,
          url: `${CAMERA_URL}/${deviceId}?authorization=${this.$keycloak.token}`
        })
        this.playerList[deviceId].on('error', (e) => {
          console.log(e)
        })
        // 将实例挂载到video元素上面
        this.playerList[deviceId].attachMediaElement(this.$refs[deviceId][0])
        // player.currentTime = parseFloat(document.getElementsByName('seekpoint')[0].value);
        try {
          // 开始运行加载 只要流地址正常 就可以在h5页面中播放出画面了
          this.playerList[deviceId].load()
          this.playerList[deviceId].play()
        } catch (error) {
          console.log('连接websocker异常：' + error)
          console.log(error)
        }
      }
    },
    toDetail (item) {
      if (item.online) {
        this.detailing = true
        this.editOption = item
        this.destroyPlayer()
      }
    },
    closeDetail () {
      this.detailing = false
      this.getCamera()
    }
  }
}
</script>

<style lang="scss" scoped>
//所有控件
video::-webkit-media-controls-enclosure {
  display: none;
}
.has-padding {
  height: 100%;
}
.rowheight {
  height: calc(100% - 40px);
  overflow: auto;
}
.c-tabs {
  height: 100%;
}
.cameraRow {
  margin-bottom: 16px;
}
.o-video {
  // height: 190px;
  background-color: #edf0f6;
  position: relative;
  overflow: hidden;
  &_buttom {
    position: absolute;
    bottom: 0px;
    width: 100%;
    height: 58px;
    background-image: linear-gradient(0deg, rgba(6, 11, 18, 0.9), transparent);
    border-radius: 0px 0px 4px 4px;
    color: #fff;
    padding: 0 16px;
  }
  img {
    cursor: pointer;
  }
  &_edit {
    margin-right: 16px;
  }
  .offLine {
    position: absolute;
    left: 50%;
    top: 50%;
    color: #ff0000;
    text-align: center;
    transform: translate(-50%, -50%);
  }
}
.return {
  &_item {
    background-color: #aaa;
    width: 100%;
    height: 150px;
    position: relative;
  }
  &_local {
    font-size: 12px;
  }
}
.empty {
  color: #aaa;
  text-align: center;
}
</style>
<style lang="scss">
.fulldialog {
  .el-dialog__header {
    display: none;
  }
  .el-dialog__body {
    padding: 0;
    height: 100%;
  }
}
.video {
  .el-tabs__content {
    height: calc(100% - 40px);
  }
  .el-tab-pane {
    height: 100%;
  }
}
</style>