saber-community/src/views/device/videodevice/videocloud/videoclouddevice.vue

<template>
  <basic-container>
    <avue-crud :option="option" :table-loading="loading" :data="data" :page="page" :permission="permissionList"
               :before-open="beforeOpen" v-model="form" ref="crud" @row-update="rowUpdate" @row-save="rowSave" @row-del="rowDel"
               @search-change="searchChange" @search-reset="searchReset" @selection-change="selectionChange" @current-change="currentChange"
               @size-change="sizeChange" @refresh-change="refreshChange" @on-load="onLoad">
      <template slot="menuLeft">
        <el-button type="danger" size="small" icon="el-icon-delete" plain v-if="permission.videoclouddevice_delete"
                   @click="handleDelete">删 除
        </el-button>
        <el-button type="success" icon="el-icon-paperclip" size="small" @click="showDeviceBindBatch()">批量绑定</el-button>
      </template>

      <template slot="menu" slot-scope="{row}">
          <el-button-group>
            <el-button size="mini" icon="el-icon-refresh" plain v-if="permission.vcdevice_sync" @click="rowSync(row, row.$index)">刷新</el-button>
            <el-button size="mini" icon="el-icon-video-play" type="success" v-if="permission.vcdevice_play && row.enable == 1" @click="play(row)">播放</el-button>
            <el-button size="mini" icon="el-icon-close" type="danger" v-if="permission.vcdevice_stop && row.enable == 1" @click="stop(row)">停用</el-button>
            <el-button size="mini" icon="el-icon-check" type="primary" :loading="startBtnLoading" v-if="permission.vcdevice_start && row.enable != 1 && row.isOnline == 1" @click="start(row)">获取视频</el-button>
            <el-button size="mini">
              <el-dropdown>
            <span>
              更多<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item icon="el-icon-view" type="text" @click.native="view(row)">查看</el-dropdown-item>
                  <el-dropdown-item icon="el-icon-delete" type="text" @click.native="rowDel(row)">删除</el-dropdown-item>
                  <el-dropdown-item icon="el-icon-paperclip" type="text" @click.native="showDeviceBind(row)">{{!row.residentialId ? '设备绑定' : '设备改绑'}}</el-dropdown-item>
                </el-dropdown-menu>

              </el-dropdown>
            </el-button>
          </el-button-group>

        <!--<el-button icon="el-icon-paperclip" type="text" @click="showDeviceBind(scope.row)">{{!scope.row.residentialId ? '设备绑定' : '设备改绑'}}</el-button>-->
        <!--<el-button icon="el-icon-video-camera" type="text" @click="showVideo(scope.row)">查看监控</el-button>-->
      </template>
      <template slot="isOnline" slot-scope="{row}">
        <el-tag v-if="row.isOnline == 1" type="success">在线</el-tag>
        <el-tag v-else type="info">离线</el-tag>
      </template>

    </avue-crud>

    <!-- 播放器-->
    <devicePlayer ref="devicePlayer"></devicePlayer>
    <!--    小区列表-->
    <el-dialog :modal-append-to-body="false" append-to-body :visible.sync="bindVisible" title="设备绑定" center width="20%">
      <div style="text-align: center;">
        <!-- <el-select v-model="selectValue" filterable placeholder="请选择">
          <el-option v-for="item in residentialList" :key="item.id" :label="item.name" :value="item.id">
          </el-option>
        </el-select>
        <p style="margin-top: 20px;">
          <el-button type="primary" icon="el-icon-paperclip" @click="bindDevice">绑定</el-button>
        </p> -->
        <avue-form v-model="bindForm" :option="bindOption" @submit="bindDevice">

        </avue-form>
      </div>
    </el-dialog>

    <el-dialog :modal-append-to-body="false" append-to-body :visible.sync="bindBatchVisible" title="设备批量绑定" center
               width="50%">
      <div style="text-align: center;">
        <avue-form v-model="bindBatchForm" :option="bindOption" @submit="bindBatchDevice">

        </avue-form>
        <!-- <el-select v-model="selectValue" filterable placeholder="请选择">
          <el-option v-for="item in residentialList" :key="item.id" :label="item.name" :value="item.id">
          </el-option>
        </el-select>
        <p style="margin-top: 20px;">
          <el-button type="primary" icon="el-icon-paperclip" @click="bindBatchDevice">绑定</el-button>
        </p> -->
      </div>
    </el-dialog>

    <el-dialog :modal-append-to-body="false" append-to-body :visible.sync="videoVisible" title="视频监控" center width="50%">
      <div>
        <div align="center">{{video.name}}</div>
        <video :id="videoId" controls="true" width="100%" height="100%">
        </video>
      </div>
    </el-dialog>
    <el-dialog :modal-append-tobody="false" append-to-body :visible.sync="editVisiable" title="编辑" width="60%">
      <avue-form :option="option" v-model="editForm" @submit="submitVideoclouddevice"></avue-form>
    </el-dialog>
    <el-dialog :modal-append-tobody="false" append-to-body :visible.sync="detailVisible" title="查看" width="60%">
      <avue-form :option="option1" v-model="detailForm" ></avue-form>
    </el-dialog>

  </basic-container>
</template>

<script>
import {
  getList,
  getDetail,
  add,
  update,
  remove,
  start,
  stop,
  play,
  sync
} from "../../../../api/device/videoclouddevice.js";
import {
  mapGetters
} from "vuex";
import {
  getAllList
} from "../../../../api/community/residential.js";
import devicePlayer from "../../videodevice/devicePlayer";

export default {
  components: {devicePlayer},
  data() {
    return {
      getListLoading: false,
      startBtnLoading: false,
      bindBatchForm:{},
      bindForm: {},
      videoVisible: false,
      video: {},
      editVisiable: false,
      editForm: {},
      detailVisible: false,
      detailForm: {},
      selectValue: "",
      form: {},
      query: {},
      loading: true,
      bindVisible: false,
      bindBatchVisible: false,
      residentialList: [],
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 0
      },
      selectionList: [],

      option: {
        menu: true,
        menuWidth:320,
        height: 'auto',
        calcHeight: 30,
        tip: false,
        searchShow: true,
        searchMenuSpan: 6,
        labelWidth: 150,
        border: true,
        index: true,
        viewBtn: false,
        editBtn: false,
        delBtn: false,
        selection: true,
        dialogClickModal: false,
        addBtn:false,
        column: [{
          label: "设备编号",
          prop: "deviceId",
          hide: true,
          addDisplay:false,
          editDisplay:false,
          span: 12,
          rules: [{
            required: true,
            message: "请输入设备编号",
            trigger: "blur"
          }]
        },
          {
            label: "设备名称",
            prop: "deviceName",
            search: true,
            span: 12,
            rules: [{
              required: true,
              message: "请输入设备名称",
              trigger: "blur"
            }]
          },
          {
            label: "设备号",
            prop: "deviceNum",
            span: 12,
            search: true,
            rules: [{
              required: true,
              message: "请输入设备号",
              trigger: "blur"
            }]
          },
          {
            label: "设备密码",
            prop: "devicePassword",
            span: 12,
            hide: true,
            rules: [{
              required: true,
              message: "请输入设备密码",
              trigger: "blur"
            }]
          },
          {
            label: "型号",
            prop: "modelSequence",
            span: 12,
            hide: true,
            rules: [{
              required: true,
              message: "请输入型号",
              trigger: "blur"
            }]
          },
          {
            // label: "协议类型(1:GB28181，2:ONVIF)",
            label: "协议类型",
            prop: "protocolType",
            span: 12,
            hide: true,
            rules: [{
              required: true,
              message: "请输入协议类型(1:GB28181，2:ONVIF)",
              trigger: "blur"
            }]
          },
          {
            label: "是否在线",
            prop: "isOnline",
            slot: true,
            width: 100,
            align: "center",
            dataType: "number",
            type: "select",
            search: true,
            dicData:[
              {
                label:'在线',
                value:1
              },
              {
                label:'离线',
                value:0
              }
            ],
            // dicUrl: "/api/blade-system/dict-biz/dictionary?code=online_or_offline",
            // props: {
            //   label: 'dictValue',
            //   value: 'dictKey'
            // },
            rules: [{
              required: true,
              message: "请输入是否在线(0:不在线，1:在线)",
              trigger: "blur"
            }]
          },
          {
            // label: "是否支持云存储(0:不支持，1:支持)",
            label: "是否支持云存储",
            prop: "isSupportCloudStorage",
            span: 12,
            hide: true,
            type:'select',
            dicData:[
              {
                label:'支持',
                value:1
              },
              {
                label:'不支持',
                value:0
              }
            ],
            rules: [{
              required: true,
              message: "请输入是否支持云存储(0:不支持，1:支持)",
              trigger: "blur"
            }]
          },
          {
            // label: "是否支持本地存储(0:不支持，1:支持)",
            label: "是否支持本地存储",
            prop: "isSupportLocalStorage",
            type:'select',
            span: 12,
            hide: true,
            dicData:[
              {
                label:'支持',
                value:1
              },
              {
                label:'不支持',
                value:0
              }
            ],
            rules: [{
              required: true,
              message: "请输入是否支持本地存储(0:不支持，1:支持)",
              trigger: "blur"
            }]
          },
          /*{
            label: "是否支持云台",
            prop: "isSupportPtz",
            span: 12,
            dataType: "number",
            type: "select",
            dicData:[
              {
                label:'支持',
                value:1
              },
              {
                label:'不支持',
                value:0
              }
            ],
            // dicUrl: "/api/blade-system/dict-biz/dictionary?code=is_support",
            // props: {
            //   label: 'dictValue',
            //   value: 'dictKey'
            // },
            rules: [{
              required: true,
              message: "请输入是否支持云台(0:不支持，1:支持)",
              trigger: "blur"
            }]
          },*/
          {
            // label: "是否支持移动侦测(0:不支持，1:支持)",
            label: "是否支持移动侦测",
            prop: "isSupportMotionDetection",
            span: 12,
            hide: true,
            type:'select',
            dicData:[
              {
                label:'支持',
                value:1
              },
              {
                label:'不支持',
                value:0
              }
            ],
            rules: [{
              required: true,
              message: "请输入是否支持移动侦测(0:不支持，1:支持)",
              trigger: "blur"
            }]
          },
          {
            // label: "是否支持手动报警(0:不支持，1:支持)",
            label: "是否支持手动报警",
            prop: "isSupportManualAlarm",
            span: 12,
            hide: true,
            type:'select',
            dicData:[
              {
                label:'支持',
                value:1
              },
              {
                label:'不支持',
                value:0
              }
            ],
            rules: [{
              required: true,
              message: "请输入是否支持手动报警(0:不支持，1:支持)",
              trigger: "blur"
            }]
          },
          {
            // label: "是否支持外部开关报警(0:不支持，1:支持)",
            label: "是否支持外部开关报警",
            prop: "isSupportExternalAlarmSwitch",
            span: 12,
            hide: true,
            type:"select",
            dicData:[
              {
                label:'支持',
                value:1
              },
              {
                label:'不支持',
                value:0
              }
            ],
            rules: [{
              required: true,
              message: "请输入是否支持外部开关报警(0:不支持，1:支持)",
              trigger: "blur"
            }]
          },
          {
            // label: "设备是否有反转倒置能力(0:否，1:是)",
            label: "设备是否有反转倒置能力",
            prop: "isHaveInversion",
            span: 12,
            hide: true,
            type:'select',
            dicData:[
              {
                label:'支持',
                value:1
              },
              {
                label:'不支持',
                value:0
              }
            ],
            rules: [{
              required: true,
              message: "请输入设备是否有反转倒置能力(0:否，1:是)",
              trigger: "blur"
            }]
          },
          // {
          //   label: "云存储类别",
          //   prop: "cloudStorageType",
          //   span: 12,
          //   type: "select",
          //   dataType: "number",
          //   dicUrl: "/api/blade-system/dict-biz/dictionary?code=cloud_storage_type",
          //   props: {
          //     label: 'dictValue',
          //     value: 'dictKey'
          //   },
          //   rules: [{
          //     required: true,
          //     message: "请输入云存储类别(0:无云存储，1:电信分布式存储，2:21cn存储)",
          //     trigger: "blur"
          //   }]
          // },
          {
            label: "云存储配置id",
            prop: "cloudStorageConfId",
            span: 12,
            hide: true,
            rules: [{
              required: true,
              message: "请输入云存储配置id",
              trigger: "blur"
            }]
          },
          {
            // label: "视频流获取方式(0:主动推流，1:主动拉取流)",
            label: "视频流获取方式",
            prop: "streamType",
            span: 12,
            hide: true,
            type:'select',
            dicData:[
              {
                label:'主动推流',
                value:0
              },
              {
                label:'主动拉取流',
                value:1
              }
            ],
            rules: [{
              required: true,
              message: "请输入视频流获取方式(0:主动推流，1:主动拉取流)",
              trigger: "blur"
            }]
          },
          {
            label: "设备地址",
            prop: "address",
            span: 12,
            hide: true,
            rules: [{
              required: true,
              message: "请输入设备地址",
              trigger: "blur"
            }]
          },
          {
            // label: "是否拥有者(0:否，1:是)",
            label: "是否拥有者",
            prop: "isOwner",
            span: 12,
            hide: true,
            type:'select',
            dicData:[
              {
                label:'否',
                value:0
              },
              {
                label:'是',
                value:1
              }
            ],
            rules: [{
              required: true,
              message: "请输入是否拥有者(0:否，1:是)",
              trigger: "blur"
            }]
          },
          {
            label: "所属NVR的编号",
            prop: "parentNvrNum",
            span: 12,
            hide: true,
            rules: [{
              required: true,
              message: "请输入所属NVR的编号",
              trigger: "blur"
            }]
          },
          {
            // label: "告警状态（0：正常；1：告警）",
            label: "告警状态",
            prop: "alarmStatus",
            span: 12,
            hide: true,
            type:'select',
            dicData:[
              {
                label:'正常',
                value:0
              },
              {
                label:'告警',
                value:1
              }
            ],
            rules: [{
              required: true,
              message: "请输入告警状态（0：正常；1：告警）",
              trigger: "blur"
            }]
          },
          {
            label: "经度",
            prop: "longitude",
            hide:true,
            span: 12,
            rules: [{
              required: true,
              message: "请输入经度",
              trigger: "blur"
            }]
          },
          {
            label: "纬度",
            prop: "latitude",
            hide:true,
            span: 12,
            rules: [{
              required: true,
              message: "请输入纬度",
              trigger: "blur"
            }]
          },
          {
            label: "维护人员信息",
            prop: "maintainer",
            span: 12,
            hide: true,
            rules: [{
              required: true,
              message: "请输入维护人员信息",
              trigger: "blur"
            }]
          },
          {
            label: "是否封存",
            prop: "block",
            span: 12,
            hide: true,
            type:'select',
            dicData:[
              {
                label:'封存',
                value:true
              },
              {
                label:'不封存',
                value:false
              }
            ],
            rules: [{
              required: true,
              message: "请输入是否封存，true封存",
              trigger: "blur"
            }]
          },
          {
            label: "封存时间",
            prop: "blockTime",
            span: 12,
            hide: true,
            rules: [{
              required: true,
              message: "请输入封存时间",
              trigger: "blur"
            }]
          },
          {
            label: "路由器id",
            prop: "routeId",
            span: 12,
            hide: true,
            rules: [{
              required: true,
              message: "请输入路由器id",
              trigger: "blur"
            }]
          },
          {
            // label: "摄像头类型 G：枪机 D：球机",
            label: "摄像头类型",
            prop: "equipType",
            span: 12,
            hide: true,
            type:'select',
            dicData:[
              {
                label:'枪机',
                value:'G'
              },
              {
                label:'球机',
                value:'D'
              }
            ],
            rules: [{
              required: true,
              message: "请输入摄像头类型 G：枪机 D：球机",
              trigger: "blur"
            }]
          },
          {
            label: "设备最后状态更新时间",
            prop: "updateStateTimeString",
            span: 12,
            hide: true,
            rules: [{
              required: true,
              message: "请输入设备最后状态更新时间",
              trigger: "blur"
            }]
          },
          {
            label: "设备监控位id",
            prop: "districtId",
            span: 12,
            hide: true,
            display:false,
            rules: [{
              required: true,
              message: "请输入设备监控位id",
              trigger: "blur"
            }]
          },
          {
            // label: "存储位置（通过该字段快速查询，所有的子节点）机构树位置",
            label: "存储位置",
            prop: "orgPosition",
            span: 12,
            hide: true,
            display:false,
            rules: [{
              required: true,
              message: "请输入存储位置（通过该字段快速查询，所有的子节点）机构树位置",
              trigger: "blur"
            }]
          },
          {
            label: "rtsp视频播放地址",
            prop: "rtspUrl",
            span: 12,
            hide: true,
            rules: [{
              required: true,
              message: "请输入rtsp视频播放地址",
              trigger: "blur"
            }]
          },
          {
            label: "http-flv视频播放地址",
            prop: "httpFlvUrl",
            span: 12,
            hide: true,
            rules: [{
              required: true,
              message: "请输入http-flv视频播放地址",
              trigger: "blur"
            }]
          },
          {
            label: "视频云账号",
            prop: "accountName",
            search: true,
            searchLabelWidth: 100,
            span: 12,
            rules: [{
              required: true,
              message: "请输入所属账户",
              trigger: "blur"
            }]
          },
        ]
      },
      option1:{
        menu: true,
        height: 'auto',
        calcHeight: 30,
        tip: false,
        searchShow: true,
        searchMenuSpan: 6,
        labelWidth: 150,
        border: true,
        index: true,
        viewBtn: false,
        editBtn: false,
        delBtn: true,
        selection: true,
        dialogClickModal: false,
        disabled:true,
        submitBtn:false,
        emptyBtn:false,
        column: [{
          label: "设备编号",
          prop: "deviceId",
          hide: true,
          span: 12,
          rules: [{
            required: true,
            message: "请输入设备编号",
            trigger: "blur"
          }]
        },
          {
            label: "设备名称",
            prop: "deviceName",
            search: true,
            span: 12,
            rules: [{
              required: true,
              message: "请输入设备名称",
              trigger: "blur"
            }]
          },
          {
            label: "设备号",
            prop: "deviceNum",
            span: 12,
            rules: [{
              required: true,
              message: "请输入设备号",
              trigger: "blur"
            }]
          },
          {
            label: "设备密码",
            prop: "devicePassword",
            span: 12,
            hide: true,
            rules: [{
              required: true,
              message: "请输入设备密码",
              trigger: "blur"
            }]
          },
          {
            label: "设备类型",
            prop: "deviceType",
            span: 12,
            search: true,
            dataType: "number",
            type: "select",
            dicUrl: "/api/blade-system/dict-biz/dictionary?code=video_device_type",
            props: {
              label: 'dictValue',
              value: 'dictKey'
            },
            rules: [{
              required: true,
              message: "请输入设备类型(132:IPC;111:DVR;118:NVR,114:解码器)",
              trigger: "blur"
            }]
          },
          {
            label: "型号",
            prop: "modelSequence",
            span: 12,
            hide: true,
            rules: [{
              required: true,
              message: "请输入型号",
              trigger: "blur"
            }]
          },
          {
            // label: "协议类型(1:GB28181，2:ONVIF)",
            label: "协议类型",
            prop: "protocolType",
            span: 12,
            hide: true,
            rules: [{
              required: true,
              message: "请输入协议类型(1:GB28181，2:ONVIF)",
              trigger: "blur"
            }]
          },
          {
            label: "是否在线",
            prop: "isOnline",
            span: 12,
            dataType: "number",
            type: "select",
            search: true,
            slot: true,
            dicData:[
              {
                label:'在线',
                value:1
              },
              {
                label:'离线',
                value:0
              }
            ],
            // dicUrl: "/api/blade-system/dict-biz/dictionary?code=online_or_offline",
            // props: {
            //   label: 'dictValue',
            //   value: 'dictKey'
            // },
            rules: [{
              required: true,
              message: "请输入是否在线(0:不在线，1:在线)",
              trigger: "blur"
            }]
          },
          {
            // label: "是否支持云存储(0:不支持，1:支持)",
            label: "是否支持云存储",
            prop: "isSupportCloudStorage",
            span: 12,
            hide: true,
            type:'select',
            dicData:[
              {
                label:'支持',
                value:1
              },
              {
                label:'不支持',
                value:0
              }
            ],
            rules: [{
              required: true,
              message: "请输入是否支持云存储(0:不支持，1:支持)",
              trigger: "blur"
            }]
          },
          {
            // label: "是否支持本地存储(0:不支持，1:支持)",
            label: "是否支持本地存储",
            prop: "isSupportLocalStorage",
            type:'select',
            span: 12,
            hide: true,
            dicData:[
              {
                label:'支持',
                value:1
              },
              {
                label:'不支持',
                value:0
              }
            ],
            rules: [{
              required: true,
              message: "请输入是否支持本地存储(0:不支持，1:支持)",
              trigger: "blur"
            }]
          },
          // {
          //   label: "是否支持云台",
          //   prop: "isSupportPtz",
          //   span: 12,
          //   dataType: "number",
          //   type: "select",
          //   dicData:[
          //     {
          //       label:'支持',
          //       value:1
          //     },
          //     {
          //       label:'不支持',
          //       value:0
          //     }
          //   ],
          //   // dicUrl: "/api/blade-system/dict-biz/dictionary?code=is_support",
          //   // props: {
          //   //   label: 'dictValue',
          //   //   value: 'dictKey'
          //   // },
          //   rules: [{
          //     required: true,
          //     message: "请输入是否支持云台(0:不支持，1:支持)",
          //     trigger: "blur"
          //   }]
          // },
          {
            // label: "是否支持移动侦测(0:不支持，1:支持)",
            label: "是否支持移动侦测",
            prop: "isSupportMotionDetection",
            span: 12,
            hide: true,
            type:'select',
            dicData:[
              {
                label:'支持',
                value:1
              },
              {
                label:'不支持',
                value:0
              }
            ],
            rules: [{
              required: true,
              message: "请输入是否支持移动侦测(0:不支持，1:支持)",
              trigger: "blur"
            }]
          },
          {
            // label: "是否支持手动报警(0:不支持，1:支持)",
            label: "是否支持手动报警",
            prop: "isSupportManualAlarm",
            span: 12,
            hide: true,
            type:'select',
            dicData:[
              {
                label:'支持',
                value:1
              },
              {
                label:'不支持',
                value:0
              }
            ],
            rules: [{
              required: true,
              message: "请输入是否支持手动报警(0:不支持，1:支持)",
              trigger: "blur"
            }]
          },
          {
            // label: "是否支持外部开关报警(0:不支持，1:支持)",
            label: "是否支持外部开关报警",
            prop: "isSupportExternalAlarmSwitch",
            span: 12,
            hide: true,
            type:"select",
            dicData:[
              {
                label:'支持',
                value:1
              },
              {
                label:'不支持',
                value:0
              }
            ],
            rules: [{
              required: true,
              message: "请输入是否支持外部开关报警(0:不支持，1:支持)",
              trigger: "blur"
            }]
          },
          {
            // label: "设备是否有反转倒置能力(0:否，1:是)",
            label: "设备是否有反转倒置能力",
            prop: "isHaveInversion",
            span: 12,
            hide: true,
            type:'select',
            dicData:[
              {
                label:'支持',
                value:1
              },
              {
                label:'不支持',
                value:0
              }
            ],
            rules: [{
              required: true,
              message: "请输入设备是否有反转倒置能力(0:否，1:是)",
              trigger: "blur"
            }]
          },
          {
            label: "云存储类别",
            prop: "cloudStorageType",
            span: 12,
            type: "select",
            dataType: "number",
            dicUrl: "/api/blade-system/dict-biz/dictionary?code=cloud_storage_type",
            props: {
              label: 'dictValue',
              value: 'dictKey'
            },
            rules: [{
              required: true,
              message: "请输入云存储类别(0:无云存储，1:电信分布式存储，2:21cn存储)",
              trigger: "blur"
            }]
          },
          {
            label: "云存储配置id",
            prop: "cloudStorageConfId",
            span: 12,
            hide: true,
            rules: [{
              required: true,
              message: "请输入云存储配置id",
              trigger: "blur"
            }]
          },
          {
            // label: "视频流获取方式(0:主动推流，1:主动拉取流)",
            label: "视频流获取方式",
            prop: "streamType",
            span: 12,
            hide: true,
            type:'select',
            dicData:[
              {
                label:'主动推流',
                value:0
              },
              {
                label:'主动拉取流',
                value:1
              }
            ],
            rules: [{
              required: true,
              message: "请输入视频流获取方式(0:主动推流，1:主动拉取流)",
              trigger: "blur"
            }]
          },
          {
            label: "设备地址",
            prop: "address",
            span: 12,
            hide: true,
            rules: [{
              required: true,
              message: "请输入设备地址",
              trigger: "blur"
            }]
          },
          {
            // label: "是否拥有者(0:否，1:是)",
            label: "是否拥有者",
            prop: "isOwner",
            span: 12,
            hide: true,
            type:'select',
            dicData:[
              {
                label:'否',
                value:0
              },
              {
                label:'是',
                value:1
              }
            ],
            rules: [{
              required: true,
              message: "请输入是否拥有者(0:否，1:是)",
              trigger: "blur"
            }]
          },
          {
            label: "所属NVR的编号",
            prop: "parentNvrNum",
            span: 12,
            hide: true,
            rules: [{
              required: true,
              message: "请输入所属NVR的编号",
              trigger: "blur"
            }]
          },
          {
            // label: "告警状态（0：正常；1：告警）",
            label: "告警状态",
            prop: "alarmStatus",
            span: 12,
            hide: true,
            type:'select',
            dicData:[
              {
                label:'正常',
                value:0
              },
              {
                label:'告警',
                value:1
              }
            ],
            rules: [{
              required: true,
              message: "请输入告警状态（0：正常；1：告警）",
              trigger: "blur"
            }]
          },
          {
            label: "经度",
            prop: "longitude",
            hide:true,
            span: 12,
            rules: [{
              required: true,
              message: "请输入经度",
              trigger: "blur"
            }]
          },
          {
            label: "纬度",
            prop: "latitude",
            hide:true,
            span: 12,
            rules: [{
              required: true,
              message: "请输入纬度",
              trigger: "blur"
            }]
          },
          {
            label: "维护人员信息",
            prop: "maintainer",
            span: 12,
            hide: true,
            rules: [{
              required: true,
              message: "请输入维护人员信息",
              trigger: "blur"
            }]
          },
          {
            label: "是否封存",
            prop: "block",
            span: 12,
            hide: true,
            type:'select',
            dicData:[
              {
                label:'封存',
                value:true
              },
              {
                label:'不封存',
                value:false
              }
            ],
            rules: [{
              required: true,
              message: "请输入是否封存，true封存",
              trigger: "blur"
            }]
          },
          {
            label: "封存时间",
            prop: "blockTime",
            span: 12,
            hide: true,
            rules: [{
              required: true,
              message: "请输入封存时间",
              trigger: "blur"
            }]
          },
          {
            label: "路由器id",
            prop: "routeId",
            span: 12,
            hide: true,
            rules: [{
              required: true,
              message: "请输入路由器id",
              trigger: "blur"
            }]
          },
          {
            // label: "摄像头类型 G：枪机 D：球机",
            label: "摄像头类型",
            prop: "equipType",
            span: 12,
            hide: true,
            type:'select',
            dicData:[
              {
                label:'枪机',
                value:'G'
              },
              {
                label:'球机',
                value:'D'
              }
            ],
            rules: [{
              required: true,
              message: "请输入摄像头类型 G：枪机 D：球机",
              trigger: "blur"
            }]
          },
          {
            label: "设备最后状态更新时间",
            prop: "updateStateTimeString",
            span: 12,
            hide: true,
            rules: [{
              required: true,
              message: "请输入设备最后状态更新时间",
              trigger: "blur"
            }]
          },
          {
            label: "设备监控位id",
            prop: "districtId",
            span: 12,
            hide: true,
            rules: [{
              required: true,
              message: "请输入设备监控位id",
              trigger: "blur"
            }]
          },
          {
            // label: "存储位置（通过该字段快速查询，所有的子节点）机构树位置",
            label: "存储位置",
            prop: "orgPosition",
            span: 12,
            hide: true,
            display:false,
            rules: [{
              required: true,
              message: "请输入存储位置（通过该字段快速查询，所有的子节点）机构树位置",
              trigger: "blur"
            }]
          },
          {
            label: "rtsp视频播放地址",
            prop: "rtspUrl",
            span: 12,
            hide: true,
            rules: [{
              required: true,
              message: "请输入rtsp视频播放地址",
              trigger: "blur"
            }]
          },
          {
            label: "http-flv视频播放地址",
            prop: "httpFlvUrl",
            span: 12,
            hide: true,
            rules: [{
              required: true,
              message: "请输入http-flv视频播放地址",
              trigger: "blur"
            }]
          },
          {
            label: "所属账户",
            prop: "accountName",
            span: 12,
            hide: true,
            rules: [{
              required: true,
              message: "请输入所属账户",
              trigger: "blur"
            }]
          },
        ]
      },
      bindOption: {
        column: [
          {
            label: "所属小区",
            prop: "residentialId",
            type: "select",
            search: true,
            filterable: true,
            span:24,
            cascaderItem: ['buildingId'],
            dicUrl: "/api/cyzh-community/residential/list?size=9999",
            dicFormatter:(res)=>{
              return res.data.records;//返回字典的层级结构
            },
            props: {
              label: "name",
              value: "id"
            },
            rules: [{
              required: true,
              message: "请选择所属小区",
              trigger: "blur"
            }]
          },
          {
            label: "所属楼栋",
            prop: "buildingId",
            search: true,
            type: "select",
            span:24,
            cascaderIndex: 0,
            // dicFlag: true,
            dicUrl: "/api/cyzh-community/building/list?residentialId={{key}}",
            dicFormatter:(res) => {
              return res.data.records;//返回字典层级结构
            },
            filterable: true,
            props: {
              label: "name",
              value: "id"
            },
          }]
      },
      data: []
    };
  },
  computed: {
    ...mapGetters(["permission"]),
    permissionList() {
      return {
        addBtn: this.vaildData(this.permission.vcdevice_add, false),
        viewBtn: this.vaildData(this.permission.vcdevice_view, false),
        delBtn: this.vaildData(this.permission.vcdevice_delete, false),
        editBtn: this.vaildData(this.permission.vcdevice_edit, false),
        startBtn: this.vaildData(this.permission.vcdevice_start, false),
        stopBtn: this.vaildData(this.permission.vcdevice_stop, false),
        playBtn: this.vaildData(this.permission.vcdevice_play, false)
      };
    },
    ids() {
      let ids = [];
      this.selectionList.forEach(ele => {
        ids.push(ele.id);
      });
      return ids.join(",");
    }
  },
  methods: {
    //同步设备
    rowSync(row, index){
      let that = this;
      sync(row).then(res => {
        if(res.data.success){
          let result = res.data.data;
          that.$set(that.data, index, result)
          that.$message({
            type: "success",
            message: res.data.msg
          });
        }else{
          that.$message({
            type: "fail",
            message: res.data.msg
          });
        }
      })
    },
    //获取视频并开启
    start(row){
      let that = this;
      this.getListLoading = true;
      this.startBtnLoading = true;
      let params = {"deviceNum" : row.deviceNum }
      start(params).then(res => {
        that.startBtnLoading = false;
        if(res.data.success){
          that.onLoad(this.page);
          this.$message({
            type: "success",
            message: "获取视频地址成功，请点击播放"
          });
        }else{
          this.$message({
            type: "fail",
            message: "保存失败，请检查地址是否可用！"
          });
        }
      }).catch(error => {
        that.startBtnLoading = false;
      });
    },
    stop(row){
      let that = this;
      this.getListLoading = true;
      let params = { "app": "live", "streamId" : row.deviceNum }
      stop(params).then(res => {
        that.onLoad(this.page);
        this.$message({
          type: "success",
          message: "视频停用成功"
        });
      }).catch(error => {
        that.getListLoading = false
      });
    },
    play(row){
      let that = this;
      this.getListLoading = true;
      let params = { "app": "live", "streamId" : row.deviceNum }
      play(params).then(res => {
        that.getListLoading = false;
        that.$refs.devicePlayer.openDialog("streamPlay", null, null, {
          streamInfo: res.data.data,
          hasAudio: true
        });
      }).catch(error => {
        that.getListLoading = false;
      })
    },
    showVideo(row) {
      // this.video.url = "http://139.9.103.171/live?port=1935&app=myapp&stream=" + row.id;
      this.video.url = "ws://36.103.228.148:8888/live/" + row.id + ".flv";
      this.video.name = row.deviceName;
      this.videoVisible = true;
      this.$nextTick(() => {
        try {
          let videoElement = document.getElementById('videoId');
          let flvPlayer = flvjs.createPlayer({
            type: 'flv',
            url: this.video.url
          });
          flvPlayer.on(flvjs.Events.ERROR, (errType, errDetail) => {
            // errType是 NetworkError时，对应errDetail有：Exception、HttpStatusCodeInvalid、ConnectingTimeout、EarlyEof、UnrecoverableEarlyEof
            // errType是 MediaError时，对应errDetail是MediaMSEError
          });
          flvPlayer.on(flvjs.Events.MEDIA_SOURCE_CLOSE || flvjs.Events.MEDIA_SOURCE_ENDED, () => {})
          flvPlayer.attachMediaElement(videoElement);
          flvPlayer.load();
          flvPlayer.play();
        } catch (e) {
          console.log(e);
        }
      })
    },
    showDeviceBindBatch() {
      if (this.selectionList.length === 0) {
        this.$message.warning("请选择至少一条数据");
        return;
      }
      if (this.residentialList.length == 0) {
        //  请求获取小区列表
        getAllList().then(res => {
          console.log(res.data.data);
          this.residentialList = res.data.data;
          this.selectValue = "";
          this.bindBatchVisible = true;
        })
      } else {
        this.selectValue = ""
        this.bindBatchVisible = true;
      }
      // this.form = row;
    },
    showDeviceBind(row) {

      if (this.residentialList.length == 0) {
        //  请求获取小区列表
        getAllList().then(res => {
          this.residentialList = res.data.data;
          this.selectValue = ""
          this.bindVisible = true;
        })
      } else {
        this.selectValue = ""
        this.bindVisible = true;
      }
      this.bindForm = row;
    },
    bindBatchDevice(loading,done) {
      // if (this.selectValue == "") {
      //   this.$message.warning("请选择所属小区");
      //   return;
      // }
      //保存
      // debugger
      bindResidentialBatch(this.ids, this.bindBatchForm.residentialId,this.bindBatchForm.buildingId).then(() => {
        // debugger
        this.bindBatchVisible = false;
        this.bindBatchForm = {};
        this.onLoad(this.page);
        this.$message({
          type: "success",
          message: "操作成功!"
        });
        done();
      }, error => {
        loading();
        console.log(error);
      });
    },
    bindDevice(loading,done) {
      // this.form.residentialId = this.selectValue;
      //保存
      updateVideoDevice(this.bindForm).then(() => {
        this.onLoad(this.page);
        this.bindVisible = false;
        this.$message({
          type: "success",
          message: "操作成功!"
        });
        done();
      }, error => {
        loading();
        console.log(error);
      });
    },
    rowSave(row, done, loading) {
      add(row).then(() => {
        this.onLoad(this.page);
        this.$message({
          type: "success",
          message: "操作成功!"
        });
        done();
      }, error => {
        loading();
        window.console.log(error);
      });
    },
    rowUpdate(row, index, done, loading) {
      update(row).then(() => {
        this.onLoad(this.page);
        this.$message({
          type: "success",
          message: "操作成功!"
        });
        done();
      }, error => {
        loading();
        console.log(error);
      });
    },
    rowDel(row) {
      this.$confirm("确定将选择数据删除?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          return remove(row.id);
        })
        .then(() => {
          this.onLoad(this.page);
          this.$message({
            type: "success",
            message: "操作成功!"
          });
        });
    },
    handleDelete() {
      if (this.selectionList.length === 0) {
        this.$message.warning("请选择至少一条数据");
        return;
      }
      this.$confirm("确定将选择数据删除?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          return remove(this.ids);
        })
        .then(() => {
          this.onLoad(this.page);
          this.$message({
            type: "success",
            message: "操作成功!"
          });
          this.$refs.crud.toggleSelection();
        });
    },
    beforeOpen(done, type) {
      if (["edit", "view"].includes(type)) {
        getDetail(this.form.id).then(res => {
          this.form = res.data.data;
        });
      }
      done();
    },
    searchReset() {
      this.query = {};
      this.onLoad(this.page);
    },
    searchChange(params, done) {
      this.query = params;
      this.page.currentPage = 1;
      this.onLoad(this.page, params);
      done();
    },
    selectionChange(list) {
      this.selectionList = list;
    },
    selectionClear() {
      this.selectionList = [];
      this.$refs.crud.toggleSelection();
    },
    currentChange(currentPage) {
      this.page.currentPage = currentPage;
    },
    sizeChange(pageSize) {
      this.page.pageSize = pageSize;
    },
    refreshChange() {
      this.onLoad(this.page, this.query);
    },
    edit(row) {
      console.log(row,"编辑数据")
      this.editForm = row;
      this.editVisiable = true;
    },
    view(row) {
      console.log(row,"详情数据")
      this.detailForm = row;
      this.detailVisible = true;
    },
    submitVideoclouddevice(row,done,loading) {
      update(row).then(() => {
        this.onLoad(this.page);
        this.$message({
          type: "success",
          message: "操作成功!"
        });
        done();
      }, error => {
        loading();
        console.log(error);
      });
    },
    onLoad(page, params = {}) {
      this.loading = true;
      getList(page.currentPage, page.pageSize, Object.assign(params, this.query)).then(res => {
        const data = res.data.data;
        this.page.total = data.total;
        this.data = data.records;
        this.loading = false;
        this.selectionClear();
      });
    }
  }
};
</script>

<style>
.el-dropdown-link {
  cursor: pointer;
  color: #409eff;
  font-size: small;
  margin-left: 10px;
}
</style>