securityHtml/src/views/device/camera2/index.vue

<template>
  <div class="app-container">
    <!-- 搜索 增加 -->
    <el-form :model="query" ref="query" :inline="true"  >
      <el-form-item label="设备id:" >
          <el-input
            v-model="query.code"
            placeholder="请输入设备id"
            clearable
          ></el-input>
      </el-form-item>
      <el-form-item label="设备名称:" >
          <el-input
            v-model="query.name"
            placeholder="请输入设备名称"
            clearable
          ></el-input>
      </el-form-item>
      <el-form-item label="单位名称" >
          <el-input
            v-model="query.unit"
            placeholder="请输入单位名称"
            clearable
          ></el-input>
      </el-form-item>
      <el-form-item class="right" >
        <el-button plain size="mini" @click="resetQuery">重置</el-button>
        <el-button
          type="primary"
          size="mini"
          @click="getData()"
          >搜索</el-button>
      </el-form-item>
      <br>
      <el-button type="primary" size="mini" @click="AddoOrEdit()">新增</el-button>
   </el-form>
    <!-- <el-divider></el-divider> -->
    <!-- 初始化数据 -->
    <el-table
      :data="tableData"
      style="width: 100%;margin-top:20px"
      row-key="id"
      :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
      v-loading="loading"
      border
    >
      <el-table-column prop="id" label="id" show-overflow-tooltip></el-table-column>
      <el-table-column prop="code" label="设备id" show-overflow-tooltip></el-table-column>
      <el-table-column prop="{name}" label="设备名称" show-overflow-tooltip>
        <template  slot-scope="scope">
            {{scope.row.name}}
        </template>
      </el-table-column>
      <el-table-column  prop="brand" label="品牌" show-overflow-tooltip></el-table-column>
      <el-table-column  prop="unit" label="单位名称" show-overflow-tooltip></el-table-column>
      <el-table-column  prop="address" label="安装位置" show-overflow-tooltip></el-table-column>
      <el-table-column label="操作" width="250" fixed="right">
        <template slot-scope="scope">
          <el-button
            class="lans"
            @click="playListOperation(scope.row)"
            >画面列表</el-button
          >
          <el-button
            class="lans"
            @click="AddoOrEdit(scope.row)"
            >编辑</el-button
          >
          <el-button
            class="hongs"
            @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 初始化分页 -->
    <el-pagination
      background
      @current-change="handleCurrentChange"
      :page-sizes="[10, 15, 20, 30]"
      @size-change="handleSizeChange"
      :current-page="query.current"
      :page-size="query.size"
      layout="sizes,prev, pager, next"
      :total="totalCount"
    >
    </el-pagination>

    <!-- 编辑 -->
    <el-dialog :title="title" class="roleDialog" :visible.sync="dialogAddOrEdit"  width="680px" append-to-body style="word-break:break-all; word-wrap:break-all;" @close='closeDialog'>
      <el-form ref="AddOrEditForm" :rules="rules" :model="AddOrEditForm"  label-width="100px" >
        <el-row>
          <el-col :span="12">
            <el-form-item label="设备名称" prop="name">
              <el-input v-model="AddOrEditForm.name" placeholder="请输入设备名称"  width="30%" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="设备品牌" prop="brand">
              <el-input v-model="AddOrEditForm.brand" placeholder="请输入设备品牌"  width="30%" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="安装位置" prop="address">
              <el-input v-model="AddOrEditForm.address" placeholder="请输入安装位置"  width="30%" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="所属单位" prop="unit">
              <el-input v-model="AddOrEditForm.unit" placeholder="请输入所属单位"  width="30%" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-row class="sblb">设备列表</el-row>
      <el-form>
      <el-form-item label="关联设备">
        <el-col :span="12">
          <el-select v-model="AddOrEditForm.GLcode" placeholder="请选择关联设备" @change="deviceUrl(AddOrEditForm.GLcode)" style="width:150%">
            <el-option
              v-for="dict in idOptions"
              :key="dict.dictValue"
              :label="dict.dictLabel"
              :value="dict.dictValue"
            ></el-option>
          </el-select>
          </el-col>
        </el-form-item>
      </el-form>
      <el-table
        class="dh"
        v-if = "dhUrlStatus"
        :data="dhUrl"
        height="200"
        stripe
        border
        :header-cell-style="{ background: '#EBF1FF', color: '#606266' }"
        style="width: 100%;cursor:pointer">
        <el-table-column property="id" label="通道编号" width="80"></el-table-column>
        <el-table-column property="name" label="通道名称" width="80">
           <template slot-scope="scope">
            <span>{{scope.row.name}}</span>
          </template>
        </el-table-column>
        <el-table-column property="url" label="视频地址" class="url">
          <template slot-scope="scope">
            <span>{{scope.row.url}}</span>
          </template>
        </el-table-column>
      </el-table>
      <el-table
        class="otherBrand"
        v-if = "otherBrandStatus"
        :data="otherBrand"
        height="200"
        stripe
        border
        :header-cell-style="{ background: '#EBF1FF', color: '#606266' }"
        style="width: 100%;cursor:pointer">
        <el-table-column prop="id" label="通道编号" width="80">
          <template slot-scope="scope">
            <span>{{scope.row.id}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="通道名称" width="90">
          <template slot-scope="scope">
            <el-input type="text" v-model="scope.row.name"   placeholder="通道名称"  @input="inputChange(scope.$index,scope.row)"  />
          </template>
        </el-table-column>
        <el-table-column prop="url" label="视频地址" class="url">
          <template slot-scope="scope">
            <el-input type="text" v-model="scope.row.url"   placeholder="请输入视频地址"  @input="inputChange(scope.$index,scope.row)"/>
          </template>
        </el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm" v-if="!loading">确 定</el-button>
        <el-button :loading="loading" type="primary"  v-else>提交中...</el-button>
        <el-button @click="cancel" plain>取 消</el-button>
      </div>
    </el-dialog>
    <!-- 播放列表 -->
    <el-dialog :title="playListTitle" class="roleDialog" :visible.sync="playList"  width="680px" append-to-body style="word-break:break-all; word-wrap:break-all;" @close='closeDialog'>
      <el-table class="bflb"
        :data="dhUrl"
        height="200"
        stripe
        border
        :header-cell-style="{ background: '#EBF1FF', color: '#606266' }"
        style="width: 100%;cursor:pointer">
        <el-table-column property="id" label="通道编号" width="100"></el-table-column>
        <el-table-column property="name" label="通道名称" width="100"></el-table-column>
        <el-table-column property="url" label="视频地址" class="url"></el-table-column>
        <el-table-column label="操作" width="190" fixed="right">
        <template slot-scope="scope">
          <el-button
            class="lans"
            @click="play(scope.row)"
            >播放</el-button
          >
          <el-button
            v-if="NoHplay"
            class="lans"
            @click="Hplay(scope.row)"
            >回放</el-button
          >
        </template>
      </el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer">
        <!-- <el-button type="primary" @click="submitForm" v-if="!loading">确 定</el-button>
        <el-button :loading="loading" type="primary"  v-else>提交中...</el-button> -->
        <el-button type="primary" @click="cancel">关 闭</el-button>
      </div>
    </el-dialog>
    <el-dialog title="回放时间选择" :visible.sync="dialogFormVisible3" width="600" @close='closeDialog'>
      <div class="block">
        <el-date-picker
          @change="dateData"
          value-format="yyyy-MM-dd HH:mm:ss"
          v-model="value"
          range-separator
          type="datetimerange"
          align="center"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          class="picker"
          :default-time="['00:00:00', '23:59:59']">
        </el-date-picker>
        <el-button
          v-if="dateDataJlStatus"
          size="small"
          type="primary"
          class="search-button pickerBut"
          @click="dateDataJl" >确定</el-button>

      </div>
    </el-dialog>
    <el-dialog :visible.sync="dialogTable2" @close='closeDialog2'>
      <template slot="title">
        <div
          class="titleZise"
          style="font-size: 15px; color: #484848; font-weight: 700"
        >
          {{ this.cameraNo }}
        </div>
      </template>
      <video
        class="hlsVideo monitor-height"
        ref="hlsVideo"
        style="width: 100%"
        controls
        preload="true"
        muted
      ></video>
    </el-dialog>
  </div>
</template>
<script>
// 引入导出Excel表格依赖
import FileSaver from "file-saver";
import Hls from "hls.js";
import { deviceList, getLocalDeviceList, deviceAdd, deviceEdit, deviceRemove, getLocalUnitNodes,  getLocalChannel } from "@/api/device/camera2";
import qs from 'qs'
import { set } from 'js-cookie';
export default {
  name: "javascriptthree",
  data() {
    return {
      // 状态数据字典
      statusOptions: [
        {
          dictLabel:"未知",
          dictValue:0
        },{
          dictLabel:"在线",
          dictValue:1
        },{
          dictLabel:"离线",
          dictValue:2
        }
      ],
      cameraTypeOptions:[
        {
          dictLabel:"枪机",
          dictValue:1
        },{
          dictLabel:"球机",
          dictValue:2
        },{
          dictLabel:"半球",
          dictValue:3
        },{
          dictLabel:"证据通道",
          dictValue:4
        }
      ],
      listQuery:{
        deviceCode:undefined,
        deviceName:undefined,
        dwtype:undefined,
        current:1,
        pageSize:15,
        sort:undefined,
      },
      dialogWidth: "680px",
      dialogWidth1: "70%",
      formLabelWidth: "130px",
      //input输入框--设备id
      device_id: "",
      //input输入框--设备名称
      device_name: "",

      dialogTable: false,
      gridData: [],
      gridData1: [],
      dialogTable1: false,
      cameraNo: "",
      dialogTable2: false,
      hls: "",
      //动态列表信息存储
      tableData:[],
      cols: [],
      //列表总数存储
      totalCount: 0,
      // //列表起始页
      // pageNo: 1,
      // //列表每页长度
      // pageSize: 15,
      //本地注册弹窗
      dialogFormVisible: false,
      //公共title （本地注册）
      //from表单提交
      from_data: [],
      //本地注册列表单条信息存储
      row: "",
      status2:false,

      value: '',
      dialogFormVisible3:false,
      starTime:undefined,
      endTime:undefined,
      hrow:undefined,
      loading:true,
      query:{
        code:undefined,
        name:undefined,
        unit:undefined,
        current:1,
        size:15,
        id:undefined,
      },
      dateDataJlStatus:false,//回放记录时间button状态
      //表格自适应高度
      tableHeight:undefined,






// 新增修改删除
      title:undefined,//弹框标题
      dialogAddOrEdit:false, //弹框
      AddOrEditForm:{//修改增加表单
        "address": undefined,
        "brand": undefined,
        "code": undefined,
        "delFlag": 0,
        "deviceInfo": undefined,
        "deviceType": undefined,
        "dhCode": undefined,
        "id": undefined,
        "name": undefined,
        "unit": undefined,
        "GLcode":undefined
      },
      // 表单校验
      rules: {
        address: [
          { required: true, message: "设备地址不能为空", trigger: "blur" }
        ],
        brand: [
          { required: true, message: "设备品牌不能为空", trigger: "blur" }
        ],
        id: [
          { required: true, message: "设备编号不能为空", trigger: "blur" }
        ],
        name: [
          { required: true, message: "设备名称不能为空", trigger: "blur" }
        ],
        unit: [
          { required: true, message: "所属单位不能为空", trigger: "blur" }
        ],

      },
      //大华关联设备
      idOptions:[

      ],
      //大华关联设备通道信息
      dhUrl:[],
      //大华或其它设备table 或form状态
      dhUrlStatus:false,
      //播放列表弹框
      playList:false,
      //画面列表标题
      playListTitle:undefined,
      //其它品牌添加
      otherBrand:{
        id:1,
        name:undefined,
        url:undefined
      },
      //其它品牌视频url
      otherBrandStatus:false,
      otherBrand:[

      ],
      tabClickLabel:"视频地址",
      //其它品牌禁止回放
      NoHplay:true
    };
  },
  watch: {

  },
  mounted(){
    // table高度
    if(window.innerWidth <1920){
      this.tableHeight = window.innerHeight - 300
    }else{
      this.tableHeight = window.innerHeight - 295
    }
    // 监听窗口大小变化
    let self = this;
    window.onresize = function() {
      self.tableHeight = window.innerHeight - 300
    }
    this.getData();
  },
  created() {
    this.$once("hook:beforeDestroy", () => {
      this.destroyHls();
    });

  },
  methods: {
      /** 重置按钮操作 */
      resetQuery() {
        this.query = {
          code:undefined,
          name:undefined,
          unit:undefined,
          current:1,
          size:15,
          id:undefined
        },
        this.handleQuery();
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.getData();
      },
    //获取大华 => 关联摄像头设备信息 (新增修改)
    GLSB(){
      getLocalDeviceList({"pageSize":1000,"size":"1","joinDevice":0}).then(Response =>{
          if(Response.data.pageList){
            this.idOptions = Response.data.pageList.map((val, ind) => {
              return {
                dictLabel: `${val.name}（${val.id}）`,
                dictValue: val.id
              };
            })
            this.idOptions.push({dictLabel:"其它品牌（1）",dictValue:1})
          }
      })
    },

    //回放时间选项
    dateData(val){
      this.starTime = new Date(val[0]).getTime()
      this.endTime = new Date(val[1]).getTime()
      this.dialogFormVisible3 = false
      this.playH(this.starTime/1000,this.endTime/1000)
    },
    //记录回放时间选项
    dateDataJl(){
      this.dialogFormVisible3 = false
      this.playH(this.starTime/1000,this.endTime/1000)
    },
    //数据初始化
    getData(){
      let arr = []
      deviceList(this.query).then(Response =>{
        for(let i = 0; i<Response.data.pageList.length; i++){
          arr[i] = {}
          arr[i] = Response.data.pageList[i]
        }
        this.tableData = arr
        this.totalCount = Response.data.totalCount
        this.loading = false
        this.status2 = true
      })
    },
    Select() {
      this.Select_DeviceList();
    },
    Select_DeviceList(data) {
      var that = this;
      that.cols = [
        {
          property: "id",
          label: "设备id",
          width: "",
        },
        // {
        //   property:"uuid",
        //   label:"设备唯一编码",
        //   width:""
        // },
        {
          property: "name",
          label: "设备名称",
          width: "",
        },
        {
          property: "deviceIp",
          label: "设备IP",
          width: "",
        },
        {
          property: "manufacturer",
          label: "厂商类型",
          width: "",
        },
        {
          property: "unitnum",
          label: "单元数目",
          width: "",
        },
        {
          property: "devicePort",
          label: "设备端口",
          width: "",
        },
        {
          property: "registerStatus",
          label: "本地注册",
          width: "",
        },
        {
          property: "status",
          label: "设备状态",
          width: "",
        },
      ];
      //获取视频设备列表
      api.getLocalDeviceList(data).then((request) => {
        that.tableData = [];
        that.totalCount = request.totalCount;
        for (let i = 0; i < request.pageList.length; i++) {
          var pageList = request.pageList[i];
          that.tableData.push(pageList);

          pageList.manufacturer == 1
            ? (pageList.manufacturer = "大华")
            : pageList.manufacturer == 2
            ? (pageList.manufacturer = "海康")
            : (pageList.manufacturer = "未知");

          pageList.status == 1
            ? (pageList.status = "在线")
            : pageList.status == 2
            ? (pageList.status = "离线")
            : "";
        }
      });
    },
    //分页查询
    handleCurrentChange(val) {
      this.query.current = val;
      this.getData();
    },
    //分页查询
    handleSizeChange(val) {
      this.query.size = val;
      this.getData();
    },
    //画面列表
    playListOperation(row){
      this.playListTitle = `"${row.name}"摄像头    画面列表`
      getLocalChannel({"pageSize":1000,"size":"1","deviceId":row.code,"unitType":1}).then(Response =>{
        if(Response.data.pageList.length>0){
          this.dhUrl = Response.data.pageList.map((val, index) =>{
            return {
              id: index + 1,
              name: val.name,
              url: "http://" + val.nvr_ip + ":" + val.hls_port + "/live/cameraid/" + val.deviceId + "%24" + val.id.split("$")[(val.id.split("$")).length-1] + "/substream/1.m3u8",
              data:val
            };
          })
          this.NoHplay = true
          this.dhUrlStatus = true
          this.playList = true
        }else{
          this.query.code = row.code
          deviceList(this.query).then(Response =>{
            if(Response.data.pageList.length>0){
              if(Response.data.pageList[0].deviceInfo){
                let json = JSON.parse(Response.data.pageList[0].deviceInfo)
                for(let i =0;i<json.length;i++){
                  if(!json[i] || json[i] && !json[i].name){
                    json.splice(i,1)
                    i--
                  }
                }
                this.dhUrl = json.map((val, index) =>{
                  return {
                    id: index + 1,
                    name: val.name,
                    url:val.url,
                    data:val
                  }
                })
                this.NoHplay = false
                this.dhUrlStatus = true
                this.playList = true
              }else{
                this.dhUrl = []
                this.NoHplay = false
                this.dhUrlStatus = true
                this.playList = true
              }


            }
          })
        }
      })
    },

    //播放按钮
    play(row) {
      this.destroyHls()
      //let url = "http://" + row.nvr_ip + ":" + row.hls_port + "/live/cameraid/" + row.deviceId + "%24" +  row.id.split("$")[(row.id.split("$")).length-1] + "/substream/1.m3u8"
      this.loadVideoFn(row.url)
    },
    //回放url
    playH(start,end){
      this.destroyHls()
      let row = this.hrow
      let url = "http://" + row.data.nvr_ip + ":" + row.data.hls_port + "/vod/device/cameraid/" + row.data.deviceId + "%24" + row.data.id.split("$")[(row.data.id.split("$")).length-1] + "/substream/1/recordtype/1/totallength/" + Number(end-start) + "/begintime/" + start + "/endtime/" + end + ".m3u8"
      this.loadVideoFn(url)
    },

    destroyHls: function () {
      if (this.hls) {
        this.$refs.hlsVideo.pause();
        this.hls.destroy();
        this.hls = null;
      }
    },
    loadVideoFn(url) {
      this.dialogTable2 = true
      setTimeout(() =>{
        if (Hls.isSupported()) {
          this.hls = new Hls();
          this.hls.loadSource(url);
          this.hls.attachMedia(this.$refs.hlsVideo);
          this.hls.on(Hls.Events.MANIFEST_PARSED, () => {
            console.log("加载成功");
            this.$refs.hlsVideo.play();
          });

          this.hls.on(Hls.Events.ERROR, (event, data) => {
            // console.log(event, data);
            // 监听出错事件
            console.log("加载失败");
          });
        }
      },1000)
    },

    //设备列表序号
    indexMethod(index) {
      return index + 1;
    },

    //回放视频
    Hplay(row){
      this.dialogFormVisible3 = true
      if(this.endTime){
        this.dateDataJlStatus = true
      }else{
        this.dateDataJlStatus = false
      }
      this.hrow = row
    },

    //新增修改
    AddoOrEdit(row){
      this.GLSB()
      if(row){
        this.AddOrEditForm = row
        if(row.code != "1"){
          getLocalChannel({"pageSize":1000,"size":"1","deviceId":row.code,"unitType":1}).then(Response =>{
            if(Response.data.pageList){
              this.dhUrl = Response.data.pageList.map((val, index) =>{
                return {
                  id: index + 1,
                  name: val.name,
                  url: "http://" + val.nvr_ip + ":" + val.hls_port + "/live/cameraid/" + val.deviceId + "%24" + val.id.split("$")[(val.id.split("$")).length-1] + "/substream/1.m3u8"
                };
              })
              this.otherBrandStatus = false
              this.otherBrand = []
              this.title = `"${row.name}" 摄像头信息修改`
              this.dhUrlStatus = true
              this.dialogAddOrEdit = true
              this.AddOrEditForm.GLcode = this.AddOrEditForm.code
            }
          })
        }else{
          if(row.deviceInfo){
            deviceList({current:this.query.current,size:this.query.size,code:row.code}).then(Response =>{
              if(Response.data.pageList.length>0){
                let json = JSON.parse(Response.data.pageList[0].deviceInfo)
                for(let i =0;i<json.length;i++){
                  if(!json[i] || json[i] && !json[i].name){
                    json.splice(i,1)
                    i--
                  }
                }
                let arr = []
                arr= json.map((val, index) =>{
                  return {
                    id: index + 1,
                    name: val.name,
                    url:val.url,
                  }
                })
                if(arr.length<50){
                  for(let i = arr.length;i<50; i++){
                    arr[i] = {}
                    arr[i].id= i+1
                    arr.name = undefined
                    arr.url = undefined
                  }
                  this.otherBrand = arr
                }
                this.dhUrlStatus = false
                this.dhUrl = []
                this.title = `"${row.name}" 摄像头信息修改`
                this.otherBrandStatus = true
                this.AddOrEditForm.GLcode = Number(row.code)
                this.dialogAddOrEdit = true
              }
            })
          }else{
            let arr = []
            for(let i = arr.length;i<50; i++){
              arr[i] = {}
              arr[i].id= i+1
              arr.name = undefined
              arr.url = undefined
            }
            this.otherBrand = arr
            this.dhUrlStatus = false
            this.dhUrl = []
            this.title = `"${row.name}" 摄像头信息修改`
            this.otherBrandStatus = true
            this.AddOrEditForm.GLcode = Number(row.code)
            this.dialogAddOrEdit = true
          }
        }
      }else{
        this.title = "新增摄像头信息"
        this.dialogAddOrEdit = true
      }
    },
    //编辑框
    inputChange(index,row){
      this.$set(this.otherBrand,index,row)
    },
    //删除
    handleDelete(index, row) {
      this.$confirm("确定删除该数据吗?", "删除", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          deviceRemove(row.id).then((response) => {
            this.$message.success("删除成功")
            this.reset()
            this.getData()
          })
        })
        .catch(() => {
          this.$message.info("已取消删除")
        });
    },
    //关联设备选项
    deviceUrl(val){
      if(val != "1"){
        this.AddOrEditForm.GLcode = val
        getLocalChannel({"pageSize":1000,"size":"1","deviceId":val,"unitType":1}).then(Response =>{
          if(Response.data.pageList){
            this.dhUrl = Response.data.pageList.map((val, index) =>{
               return {
                id: index + 1,
                name: val.name,
                url: "http://" + val.nvr_ip + ":" + val.hls_port + "/live/cameraid/" + val.deviceId + "%24" + val.id.split("$")[(val.id.split("$")).length-1] + "/substream/1.m3u8"
              };
            })
            this.otherBrandStatus = false
            this.otherBrand = []
            this.dhUrlStatus = true
          }
        })
      }else{
        setTimeout(()=>{
          let arr =[]
          for(let i=0;i<50;i++){
            arr[i] = {}
            arr[i].id = i+1
            arr[i].name = undefined
            arr[i].url = undefined
          }
          this.otherBrand = arr
          this.dhUrl = []
          this.dhUrlStatus = false
          this.otherBrandStatus = true
        },1)
      }
    },
    //表单提交
    submitForm(){
      if(this.AddOrEditForm.code){//修改
        this.AddOrEditForm.code = this.AddOrEditForm.GLcode
        if(this.dhUrlStatus){
          deviceEdit(this.AddOrEditForm).then(Response =>{
            if(Response.status == "SUCCESS"){
              this.$message.success("修改成功")
              this.reset()
              this.getData()
            }
          })
        }else if(this.otherBrandStatus){
          this.$refs["AddOrEditForm"].validate(valid => {
            if (valid) {
              let arr = []
              for(let i =0; i<this.otherBrand.length;i++){
                if(this.otherBrand[i].name && !this.otherBrand[i].url){
                  this.$message.warning(`请添加通道'${i+1}' 的视频播放地址`)
                  return
                }
                if(this.otherBrand[i].url && !this.otherBrand[i].name){
                  this.$message.warning(`请添加通道'${i+1}' 的通道名称`)
                  return
                }
                arr[i] = {id:undefined,name:undefined,url:undefined}
                arr[i].id = i + 1
                arr[i].name = this.otherBrand[i].name
                arr[i].url = this.otherBrand[i].url
              }
              if(arr.length>0){
                this.AddOrEditForm.deviceInfo = JSON.stringify(arr)
              }
              deviceEdit(this.AddOrEditForm).then(Response =>{
                if(Response.status == "SUCCESS"){
                  this.$message.success("修改成功")
                  this.reset()
                  this.getData()
                }
              })
            }
          })
        }else{
          this.$message.warning("请选择关联设备")
        }
      }else{//新增
        this.AddOrEditForm.code = this.AddOrEditForm.GLcode
        if(this.dhUrlStatus){ //大华设备
          this.AddOrEditForm.dhCode = this.AddOrEditForm.code
          this.$refs["AddOrEditForm"].validate(valid => {
            if (valid) {
              deviceAdd(this.AddOrEditForm).then(Response =>{
                if(Response.status == "SUCCESS"){
                  this.$message.success("添加成功")
                  this.reset()
                  this.getData()
                }
              })
            }
          })
        }else if(this.otherBrandStatus){//非大华设备
          this.AddOrEditForm.dhCode = 0
          this.$refs["AddOrEditForm"].validate(valid => {
            if (valid) {
              let arr = []
              for(let i =0; i<this.otherBrand.length;i++){
                if(this.otherBrand[i].name && !this.otherBrand[i].url){
                  this.$message.warning(`请添加通道'${i+1}' 的视频播放地址`)
                  return
                }
                if(this.otherBrand[i].url && !this.otherBrand[i].name){
                  this.$message.warning(`请添加通道'${i+1}' 的通道名称`)
                  return
                }
                if(this.otherBrand[i].name){
                  arr[i] = {id:undefined,name:undefined,url:undefined}
                  arr[i].id = i + 1
                  arr[i].name = this.otherBrand[i].name
                  arr[i].url = this.otherBrand[i].url
                }
              }
              if(arr.length>0){
                this.AddOrEditForm.deviceInfo = JSON.stringify(arr)
              }
              deviceAdd(this.AddOrEditForm).then(Response =>{
                if(Response.status == "SUCCESS"){
                  this.$message.success("添加成功")
                  this.reset()
                  this.getData()
                }
              })
            }
          })
        }else{
          this.$message.warning("请选择关联设备")
        }
      }
    },
    //表单取消
    cancel(){
      this.reset()
      // this.destroyHls()
    },
    //关闭弹框
    closeDialog(){
      this.destroyHls()
      this.reset()
    },
    //关闭弹框
    closeDialog2(){
      this.destroyHls()
    },
    //重置条件
    reset(){
      this.dialogAddOrEdit = false
      this.playList = false
      this.query.code = undefined
      this.query.name = undefined
      this.query.unit = undefined
      this.query.id = undefined

      setTimeout(()=>{
        this.dhUrl = []
        this.dhUrlStatus = false
        this.title=undefined
        this.playListTitle=undefined
        this.otherBrand = []
        this.otherBrandStatus = false
        this.NoHplay = true
        this.AddOrEditForm = {
          "address": undefined,
          "brand": undefined,
          "code": undefined,
          "delFlag": undefined,
          "deviceInfo": undefined,
          "deviceType": undefined,
          "dhCode": undefined,
          "id": undefined,
          "name": undefined,
          "unit": undefined,
          "GLcode":undefined,
        }

      },500)
    }
  }
};
</script>
<style>
.el-dialog__headerbtn{
  top:3px;
}
.el-range-editor.el-input__inner{
  width:80%;
  margin:0 10% !important;
}
.pickerBut{
  width:10%;display: inline-block;
  margin:20px 45% 0;
}
.sblb{
  vertical-align: middle;
  width:100%;
  font-size: 16px;
  font-weight: 700;
  color: #606266;
  padding-bottom:10px;
  border-bottom:1px solid #ccc;
  margin:20px 0;
}

.roleDialog .el-dialog .el-form-item {
  margin: 20px 20px 0;
}
.roleDialog .el-dialog .el-form-item:first-child,
.roleDialog .el-dialog .el-form-item:nth-child(2) {
  display: inline-block;
}
.el-dialog .el-form-item.table-item {
  width: 96%;
}
.el-dialog .el-form-item{
  width:100%;
}
.el-input__inner{
  height:40px;
  line-height: 40px;
}

.roleDialog .el-dialog .el-form-item{
  margin:10px 0
}

.el-input__inner{
  height:32px;
  line-height: 32px;
}
.bflb .el-table__row td:nth-child(3) div{
  white-space: pre-line;
  white-space: pre-wrap;
  height:50px;
  line-height: 25px;
}

.otherBrand .el-table__body .el-input__inner{
  height:32px;
  line-height: 32px;
  margin-top:-6px;
}
/* table{table-layout: fixed;}
td{word-break: break-all; word-wrap:break-word;} */
</style>
<style>

</style>