FE-V2-PC/src/views/comprehensive/laboratoryManagement/subject/infoPage.vue

<template>
    <div class="infoPage" v-if="newData.id">
      <div :class="versionField() == 'xiBeiNongLinDaXue'?'left-max-box-flex':''" class="left-max-box scrollbar-box">
        <div :class="versionField() == 'xiBeiNongLinDaXue'?'top-max-box-flex':''" class="top-max-box" style="position: relative">
          <div class="all-title-box">
            <p></p>
            <p style="flex:1;">实验室安全信息牌</p>
            <div v-if="versionField() == 'xiBeiNongLinDaXue'" class="reset-button-one" style="margin-top:-5px;width:80px!important;height:30px!important;line-height:30px!important;" @click="backPage">返回</div>
          </div>
          <div class="left-top-title-box">
            <div class="left-box">
              <div class="lv-name-box">
                <p :style="'color:'+newData.fiedColor+';border:1px solid '+newData.fiedColor+';'">{{newData.levelName}}</p>
                <p>{{newData.name}}</p>
              </div>
              <div class="type-address-box">
                <p>{{newData.typeName}}</p>
                <p v-if="newData.subAddrr">{{newData.subAddrr.buildName}}{{newData.subAddrr.floorName}}</p>
              </div>
            </div>
            <div class="right-code-img" @click="clickCode">
              <vue-qr style="display: block;height:60px;width:60px;cursor:pointer;margin:0 10px 0 0;" :text="newData.qrCodeUrl" :size="300" @click="clickCode"></vue-qr>
            </div>
          </div>
          <div class="user-max-box">
            <div class="left-box">
              <p>责任人：<span>{{newData.adminName}}-{{newData.adminPhone}}</span></p>
            </div>
            <div class="right-box">
              <div>
                <p>安全责任人：<span v-for="(item,index) in newData.safeUserName" :key="index">{{newData.safeUserName[index]}}-{{newData.safeUserPhone[index]?newData.safeUserPhone[index]:'未填写'}}</span></p>
              </div>
            </div>
          </div>
          <div class="info-max-box">
            <div class="left-box">
              <div class="for-text-box">
                <p class="info-title">主要危险类别：{{!newData.hazardCategory?'未配置':''}}</p>
                <div class="for-box" v-for="(item,index1) in newData.hazardCategory" :key="index1">
                  <p class="for-info-p" v-for="(minItem,index2) in hazardCategory" :key="index2" v-if="minItem.dictValue == item">● {{minItem.dictLabel}}</p>
                </div>
              </div>
              <div class="for-text-box">
                <p class="info-title">灭火要点：{{!newData.outfire?'未配置':''}}</p>
                <div class="for-box" v-for="(item,index1) in newData.outfire" :key="index1">
                  <p class="for-info-p" v-for="(minItem,index2) in extinguishingKeyPoints" :key="index2" v-if="minItem.dictValue == item">● {{minItem.dictLabel}}</p>
                </div>
              </div>
            </div>
            <div class="right-box">
              <div class="for-text-box">
                <p class="info-title">风险防控措施：{{!newData.riskMeasure?'未配置':''}}</p>
                <div class="for-box" v-for="(item,index1) in newData.riskMeasure" :key="index1">
                  <p class="for-info-p" v-for="(minItem,index2) in riskMeasure" :key="index2" v-if="minItem.dictValue == item">● {{minItem.dictLabel}}</p>
                </div>
              </div>
              <div class="for-img-box">
                <p class="info-title" style="margin-bottom:7px;">安全警示标识：{{!newData.safeSigns?'未配置':''}}</p>
                <img src="@/assets/newImages/icon_aqxxp_jzxy.png" v-if="item == 'xiyan'" v-for="(item,index) in newData.safeSigns" :key="index">
                <img src="@/assets/newImages/icon_aqxxp_jzys.png" v-if="item == 'yinshi'" v-for="(item,index) in newData.safeSigns" :key="index">
                <img src="@/assets/newImages/icon_aqxxp_dxaq.png" v-if="item == 'anquan'" v-for="(item,index) in newData.safeSigns" :key="index">
                <img src="@/assets/newImages/icon_aqxxp_gzf.png" v-if="item == 'gongzuofu'" v-for="(item,index) in newData.safeSigns" :key="index">
                <img src="@/assets/newImages/icon_aqxxp_gbmc.png" v-if="item == 'menchuang'" v-for="(item,index) in newData.safeSigns" :key="index">
                <img src="@/assets/newImages/icon_aqxxp_gbsd.png" v-if="item == 'shuidian'" v-for="(item,index) in newData.safeSigns" :key="index">
              </div>
            </div>
          </div>
        </div>
        <div class="top-max-box">
          <div class="all-title-box" style="margin-top:20px;">
            <p></p>
            <p style="flex:1;">关联预案</p>
          </div>
          <div class="demo-max-box">
            <div class="demo-title-box">
              <p>预案名称</p>
              <p>启动次数</p>
              <p>最近启动时间</p>
            </div>
            <div class="demo-text-box" v-for="(item,index) in demoList" :key='index'>
              <p>{{item.name}}</p>
              <p>{{item.num}}</p>
              <p>{{item.time}}</p>
            </div>
          </div>
        </div>
      </div>
      <div class="right-max-box scrollbar-box" v-if="versionField() != 'xiBeiNongLinDaXue'">
        <div class="all-title-box" style="height:40px;">
          <p></p>
          <p>传感器监测</p>
          <p>{{newData.sensorFunctionStatusList[0]?'数据上报时间：'+newData.sensorFunctionStatusList[0].sendDate:''}}</p>
          <p class="reset-button-one" @click="backPage">返回</p>
        </div>
        <p class="sensor-box" v-for="(item,index) in newData.sensorFunctionStatusList" :key="index">{{item.funcName}}：<span>{{item.formatVal}}</span></p>
        <img class="null-data-img" src="@/assets/ZDimages/null-data.png" v-if="!newData.sensorFunctionStatusList[0]">
        <p class="null-p" v-if="!newData.sensorFunctionStatusList[0]" >暂无环境监测信息，请在更多操作-物联设备配置中进行添加</p>
        <div class="all-title-box" style="height:40px;margin-top:20px;">
          <p></p>
          <p>物联控制</p>
        </div>
        <div class="things-box" v-for="(item,index) in newData.labHardwareVOListTwo" :key="item.id" v-if="item.hardwareTypeEnum.enumName == 'SWITCH'">
          <div class="things-for-box">
            <p class="left-title">{{item.hardwareName}}</p>
            <el-switch
              v-if="item.state.code == 3||item.state.code == 4"
              class="switch"
              @click.native="changeIsNeedCaptcha(item)"
              v-model="item.state.code"
              :active-value="3"
              :inactive-value="4"
              active-text="开"
              inactive-text="关"
              disabled>
            </el-switch>
            <p class="switch-null-p" v-else>{{item.state.name}}</p>
          </div>
        </div>
        <div class="things-box" v-for="(item,index) in newData.labHardwareVOListTwo" :key="item.id" v-if="item.hardwareTypeEnum.enumName == 'AI_VENTILATION'">
          <div class="things-for-box">
            <p class="left-title">{{item.hardwareName}}</p>
            <el-switch
              v-if="item.state.code == 3||item.state.code == 4"
              class="switch"
              @click.native="changeIsNeedCaptcha(item)"
              v-model="item.state.code"
              :active-value="3"
              :inactive-value="4"
              active-text="开"
              inactive-text="关"
              disabled>
            </el-switch>
            <p class="switch-null-p" v-else>{{item.state.name}}</p>
          </div>
        </div>
        <div class="things-box" v-for="(item,index) in newData.labHardwareVOListTwo" :key="item.id" v-if="item.hardwareTypeEnum.enumName == 'ONE_MACHINE'">
          <div class="things-for-box">
            <p class="left-title">广播系统</p>
            <p class="right-button" @click="handleAdd">播放文字</p>
          </div>
        </div>
        <img class="null-data-img" src="@/assets/ZDimages/null-data.png" v-if="!newData.labHardwareVOListTwo[0]">
        <p class="null-p" v-if="!newData.labHardwareVOListTwo[0]" >暂无物联控制信息，请在更多操作-物联设备配置中进行添加</p>
        <div class="all-title-box" style="height:40px;margin-top:10px;">
          <p></p>
          <p>危险源信息</p>
        </div>
        <div class="source-box">
          <span v-for="(item,index) in newData.hazardList" :key="index">{{index==0?item.label:'、'+item.label}}</span>
        </div>
        <img class="null-data-img" src="@/assets/ZDimages/null-data.png" v-if="!newData.hazardList[0]">
        <p class="null-p" v-if="!newData.hazardList[0]" >暂无危险源信息，请在更多操作-关联配置中进行添加</p>
        <div class="all-title-box" style="height:40px;margin-top:20px;">
          <p></p>
          <p>视频监控</p>
        </div>
        <div class="video-max-box">
          <div class="video-min-box" v-for="(item,index) in newData.videoData" :key="item.id">
            <video :id="item.divId" ref="videoRef" autoplay controls  muted width="380"></video>
            <p class="el-icon-full-screen position-p" @click="videoFullScreen(index)"></p>
            <!--画中画-->
            <p class="video-all-button-2 el-icon-data-board" @click="requestPictureInPicture(index)"></p>
            <!--历史记录-->
            <p class="video-all-button-3 el-icon-date" @click="lookDialog"></p>
          </div>
        </div>
        <img class="null-data-img" src="@/assets/ZDimages/null-data.png" v-if="!newData.videoData[0]">
        <p class="null-p" v-if="!newData.videoData[0]" >暂无视频监控信息，请在更多操作-物联设备配置中进行添加</p>
        <div class="all-title-box" style="height:30px;">
          <p></p>
          <p>检查项信息</p>
        </div>
        <div class="inspection-box">
          <div style="display: flex">
            <div>
              <p>穿戴检查项：</p>
              <p>
                <span v-for="(item,index) in newData.safeInfo.checkInData">{{index==0?item:'、'+item}}</span>
                <span v-if="!newData.safeInfo.checkInData">未设置</span>
              </p>
            </div>
            <div style="margin-left:30px;">
              <p>穿戴检查可跳过：</p>
              <p>{{newData.skipped == '1'?'是':(newData.skipped == '0'?'否':'')}}</p>
            </div>
            <div style="margin-left:30px;" v-if="newData.skipped == 1">
              <p>穿戴检查识别上限：</p>
              <p>{{newData.checkCount?newData.checkCount:'未设置'}}</p>
            </div>
          </div>
          <div style="display: flex">
            <div>
              <p>重复签到限制时间：</p>
              <p>
                <span>二十四小时</span>
              </p>
            </div>
            <div style="margin-left:30px;">
              <p>离开检查项：</p>
              <p>
                <span v-for="(item,index) in newData.safeInfo.checkOutData">{{index==0?item:'、'+item}}</span>
                <span v-if="!newData.safeInfo.checkOutData">未设置</span>
              </p>
            </div>
          </div>
        </div>
      </div>
      <!--展示实验室二维码-->
      <el-dialog title="实验室二维码" :visible.sync="codeType" width="500px" append-to-body>
        <vue-qr style="display: block;height:460px;width:460px;cursor:pointer;margin:0 auto;" :text="newData.qrCodeUrl" :size="200"></vue-qr>
      </el-dialog>
      <!--播放文字窗口-->
      <el-dialog title="广播系统" :visible.sync="open" width="500px" append-to-body>
        <el-form ref="form" :model="form" :rules="rules" label-width="80px">
          <el-form-item label="播放文字" prop="txt">
            <el-input v-model="form.txt" placeholder="请输入播放文字" />
          </el-form-item>
          <el-form-item label="播报方式" prop="type">
            <el-radio-group v-model="form.type">
              <el-radio :label="1">文字</el-radio>
              <el-radio :label="2">音频</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="cancel">取 消</el-button>
          <el-button type="primary" @click="submitFormOne">确 定</el-button>
        </div>
      </el-dialog>

      <el-dialog title="历史视频" v-if="dialogType"
                 @close="close"
                 :visible.sync="dialogType" width="1000px"
                 append-to-body class="look-video-dialog-box">
        <div>
          <el-date-picker
            style="margin-right:20px;"
            v-model="datePicker"
            type="date"
            placeholder="选择日期"
            format="yyyy 年 MM 月 dd 日">
          </el-date-picker>
          <el-time-select
            style="margin-right:20px;"
            placeholder="起始时间"
            v-model="startTime"
            :picker-options="{
          start: '00:00',
          step: '01:00',
          end: '23:00',
        }">
          </el-time-select>
          <el-time-select
            style="margin-right:20px;"
            placeholder="结束时间"
            v-model="endTime"
            :picker-options="{
          start: '00:00',
          step: '01:00',
          end: '23:00',
          minTime: startTime
        }">
          </el-time-select>
          <el-button type="primary" style="height:40px;" @click="videoButtonLock(1)">确定</el-button>
          <el-button style="height:40px;" @click="videoButtonLock(2)">重置</el-button>
        </div>
        <div class="dialog-video-max-box">
          <p class="dialog-position-p"></p>
          <div class="dialog-video-max-left-box">
            <video controls width="730"
                   autoplay muted
                   :poster="videoCover" v-if="dialogVideoType">
              <source :src="videoUrl"
                      type="video/webm">
              <source :src="videoUrl"
                      type="video/mp4">
            </video>
            <i v-if="!videoUrl" style="display: inline-block;width:730px;line-height:200px;text-align: center;font-size:16px;color:#999">请选择视频</i>
            <!--<video class="video-box" ref="dialogVideoRef" :poster="videoCover"-->
            <!--v-if="dialogVideoType"-->
            <!--:url="videoUrl"-->
            <!--autoplay controls  muted width="366px" height="210px"></video>-->
          </div>
          <div class="dialog-video-max-right-box scrollbar-box">
            <p :class="videoUrl == item.url?'check-p':''"
               v-if="item.type"
               @click="videoClick(item)"
               v-for="(item,index) in videoDataList" :key="index">{{item.name}}</p>
            <i v-if="nullType">暂无数据</i>
          </div>
        </div>
      </el-dialog>
    </div>
</template>

<script>
  import flvjs from 'flv.js'
  import { hardWareControl } from "@/api/laboratory/hardware";
  import { subjectInfo,mangerVoice  } from "@/api/laboratory/subject";
  import vueQr from 'vue-qr'
    export default {
      name: "infoPage",
      components: {
        vueQr
      },
      props:{
        newData:{},
      },
      data() {
        return {
          // newData:{},
          //主要危险类别
          hazardCategory:[],
          //风险防控措施
          riskMeasure:[],
          //灭火要点
          extinguishingKeyPoints:[],
          //实验室二维码展示开关
          codeType:false,
          //播放文字的实验室id
          open:false,
          form:{},
          rules:{
            txt:[
              {required: true, message: '请输入播放文字', trigger: 'blur'},
              { required: true, message: "请输入播放文字", validator: this.spaceJudgment, trigger: "blur" }
            ],
            type:[
              {required: true, message: '请选择播报方式', trigger: 'blur'}
            ],
          },
          videoList:[],
          safetyInfoList:[],
          demoList:[
            {
              name:"大气压预案",
              num:"三次",
              time:"2021年6月1日 12:00",
            },
            {
              name:"VOC预案",
              num:"三次",
              time:"2021年6月5日 10:00",
            },
            {
              name:"烟感预案",
              num:"三次",
              time:"2021年6月7日 15:00",
            },
          ],
          dialogType:false,
          datePicker:null,
          startTime:null,
          endTime:null,
          videoDataList:[
            {
              name:"2023-06-21/18:00",
              url:"http://lab-demo.sxitdlc.com/statics/record/app192168164/stream192168164/2023-06-21/18-38-49.mp4",
              type:true,
            },
            {
              name:"2023-06-22/18:00",
              url: "http://lab-demo.sxitdlc.com/statics/record/app192168164/stream192168164/2023-06-21/18-43-08.mp4",
              type:true,
            },
            {
              name:"2023-06-25/10:00",
              url:"http://lab-demo.sxitdlc.com/statics/record/app192168164/stream192168164/2023-06-25/10-36-09.mp4",
              type:true,
            },
            {
              name:"2023-06-26/10:00",
              url:"http://lab-demo.sxitdlc.com/statics/record/app192168164/stream192168164/2023-06-25/10-42-26.mp4",
              type:true,
            },
            {
              name:"2023-06-25/10:00",
              url:"http://lab-demo.sxitdlc.com/statics/record/app192168164/stream192168164/2023-06-25/10-47-58.mp4",
              type:true,
            },
            {
              name:"2023-06-25/11:00",
              url:"http://lab-demo.sxitdlc.com/statics/record/app192168164/stream192168164/2023-06-25/10-49-50.mp4",
              type:true,
            },
            {
              name:"2023-06-25/12:00",
              url:"http://lab-demo.sxitdlc.com/statics/record/app192168164/stream192168164/2023-06-25/10-50-29.mp4",
              type:true,
            },
            {
              name:"2023-06-25/13:00",
              url:"http://lab-demo.sxitdlc.com/statics/record/app192168164/stream192168164/2023-06-25/10-50-58.mp4",
              type:true,
            },
            {
              name:"2023-06-25/14:00",
              url:"http://lab-demo.sxitdlc.com/statics/record/app192168164/stream192168164/2023-06-25/10-51-09.mp4",
              type:true,
            },
            {
              name:"2023-06-25/15:00",
              url:"http://lab-demo.sxitdlc.com/statics/record/app192168164/stream192168164/2023-06-25/10-51-26.mp4",
              type:true,
            },
            {
              name:"2023-06-26/16:00",
              url:"http://lab-demo.sxitdlc.com/statics/record/app192168164/stream192168164/2023-06-26/10-19-55.mp4",
              type:true,
            },
            {
              name:"2023-06-26/17:00",
              url:"http://lab-demo.sxitdlc.com/statics/record/app192168164/stream192168164/2023-06-26/10-20-34.mp4",
              type:true,
            },
            {
              name:"2023-06-26/10:00",
              url:"http://lab-demo.sxitdlc.com/statics/record/app192168164/stream192168164/2023-06-26/10-21-19.mp4",
              type:true,
            },
            {
              name:"2023-06-26/10:00",
              url:"http://lab-demo.sxitdlc.com/statics/record/app192168164/stream192168164/2023-06-26/10-22-04.mp4",
              type:true,
            },
            {
              name:"2023-06-26/14:00",
              url:"http://lab-demo.sxitdlc.com/statics/record/app192168164/stream192168164/2023-06-26/14-59-04.mp4",
              type:true,
            },
            {
              name:"2023-06-26/15:00",
              url:"http://lab-demo.sxitdlc.com/statics/record/app192168164/stream192168164/2023-06-26/15-33-20.mp4",
              type:true,
            },
            {
              name:"2023-07-12/10:00",
              url:"http://lab-demo.sxitdlc.com/statics/record/app192168164/stream192168164/2023-07-12/10-26-33.mp4",
              type:true,
            },
            {
              name:"2023-07-12/10:00",
              url:"http://lab-demo.sxitdlc.com/statics/record/app192168164/stream192168164/2023-07-12/10-32-55.mp4",
              type:true,
            },
            {
              name:"2023-07-12/10:00",
              url:"http://lab-demo.sxitdlc.com/statics/record/app192168164/stream192168164/2023-07-12/10-36-12.mp4",
              type:true,
            },
            {
              name:"2023-07-12/08:00",
              url:"http://lab-demo.sxitdlc.com/statics/record/app192168164/stream192168164/2023-07-12/10-41-21.mp4",
              type:true,
            },
            {
              name:"2023-07-12/14:00",
              url:"http://lab-demo.sxitdlc.com/statics/record/app192168164/stream192168164/2023-07-12/14-19-44.mp4",
              type:true,
            },
          ],
          videoUrl:null,
          dialogVideoType:false,
          nullType:false,
        }
      },
      created() {
        //主要危险类别
        this.getDicts("sys_hazard_category").then(response => {
          this.hazardCategory = response.data;
        });
        //风险防控措施
        this.getDicts("sys_risk_measure").then(response => {
          this.riskMeasure = response.data;
        });
        //灭火要点
        this.getDicts("sys_extinguishing_key_points").then(response => {
          this.extinguishingKeyPoints = response.data;
        });
      },
      mounted(){
        let self = this;
        setTimeout(function(){
          self.videoFunction();
        },500);

      },
      methods:{
        close(){
          this.$set(this,'dialogType',false);
          this.$set(this,'datePicker',null);
          this.$set(this,'startTime',null);
          this.$set(this,'endTime',null);
          this.$set(this,'videoUrl',null);
          this.$set(this,'dialogVideoType',false);
          this.$set(this,'nullType',false);
        },
        videoButtonLock(type){
          let self = this;
          if(type == 2){
            this.$set(this,'datePicker',null);
            this.$set(this,'startTime',null);
            this.$set(this,'endTime',null);
            for(let i=0;i<self.videoDataList.length;i++){
              self.$set(self.videoDataList[i],'type',true);
            }
          }else{
            let time = this.datePicker?this.parseTime(this.datePicker, '{y}-{m}-{d}'):'';
            let time1 = this.startTime;
            let time2 = this.endTime;
            if(time||time1||time2){
              let num = 0;
              for(let i=0;i<self.videoDataList.length;i++){
                if(time&&time1&&time2){
                  let x = parseInt(self.videoDataList[i].name.split('/')[1].split(':')[0])
                  let a = parseInt(time1.split(':')[0])
                  let b = parseInt(time2.split(':')[0])
                  if(self.videoDataList[i].name.indexOf(time) != -1 && x >= a && x <= b){
                    self.videoDataList[i].type = true;
                  }else{
                    num++
                    self.videoDataList[i].type = false;
                  }
                }else if(time&&time1){
                  let x = parseInt(self.videoDataList[i].name.split('/')[1].split(':')[0])
                  let a = parseInt(time1.split(':')[0])
                  if(self.videoDataList[i].name.indexOf(time) != -1 && x >= a){
                    self.videoDataList[i].type = true;
                  }else{
                    num++
                    self.videoDataList[i].type = false;
                  }
                }else if(time&&time2){
                  let x = parseInt(self.videoDataList[i].name.split('/')[1].split(':')[0])
                  let b = parseInt(time2.split(':')[0])
                  if(self.videoDataList[i].name.indexOf(time1) != -1 && x <= b){
                    self.videoDataList[i].type = true;
                  }else{
                    num++
                    self.videoDataList[i].type = false;
                  }
                }else if(time1&&time2){
                  let x = parseInt(self.videoDataList[i].name.split('/')[1].split(':')[0])
                  let a = parseInt(time1.split(':')[0])
                  let b = parseInt(time2.split(':')[0])
                  if(x >= a && x <= b){
                    self.videoDataList[i].type = true;
                  }else{
                    num++
                    self.videoDataList[i].type = false;
                  }
                }else if(time1){
                  let x = parseInt(self.videoDataList[i].name.split('/')[1].split(':')[0])
                  let a = parseInt(time1.split(':')[0])
                  if(x >= a){
                    self.videoDataList[i].type = true;
                  }else{
                    num++
                    self.videoDataList[i].type = false;
                  }
                }else if(time2){
                  let x = parseInt(self.videoDataList[i].name.split('/')[1].split(':')[0])
                  let b = parseInt(time2.split(':')[0])
                  if(x <= b){
                    self.videoDataList[i].type = true;
                  }else{
                    num++
                    self.videoDataList[i].type = false;
                  }
                }else if(time){
                  if(self.videoDataList[i].name.indexOf(time) != -1){
                    self.videoDataList[i].type = true;
                  }else{
                    num++
                    self.videoDataList[i].type = false;
                  }
                }
              }
              if(num == self.videoDataList.length){
                this.$set(this,'nullType',true);
              }else{
                this.$set(this,'nullType',false);
              }
            }
          }
        },
        videoClick(item){
          let self = this;
          this.$set(this,'dialogVideoType',false);
          this.$set(this,'videoUrl',item.url);
          setTimeout(function(){
            self.$set(self,'dialogVideoType',true);
          },300);

        },
        requestPictureInPicture(index){
          this.$refs.videoRef[index].requestPictureInPicture();
        },
        lookDialog(){
          this.$set(this,'dialogType',!this.dialogType);
          this.$set(this,'videoUrl',null);
        },
        //视频方法
        videoFunction(){
          let self = this;
          self.videoList = [];
          for(let i=0;i<self.newData.videoData.length;i++){
            let obj = {
              player :{},
              flvPlayer:{}
            };
            obj.player = document.getElementById(self.newData.videoData[i].divId);
            obj.flvPlayer = flvjs.createPlayer(
              {
                // isLive: true, //=> 是否为直播流
                // hasAudio: false, //=> 是否开启声音
                type: self.newData.videoData[i].videoType, //媒体类型 flv 或 mp4
                url: self.newData.videoData[i].url //视频流地址
              },
              {
                enableStashBuffer: true,//启用 IO 存储缓冲区。 如果您需要实时流播放（最小延迟），请设置为 false，但如果存在网络抖动，则可能会停止。
                stashInitialSize: 128,//IO 存储缓冲区初始大小。 默认值为 384KB。 指示合适的大小可以改善视频加载/搜索时间。
                isLive: true,//是否是直播
                lazyLoadRecoverDuration: 30,//指示以秒为单位的lazyLoad 恢复时间边界。
                autoCleanupSourceBuffer: true,//进行自动清理
                autoCleanupMaxBackwardDuration: 3 * 60,//3 * 60 当向后缓冲持续时间超过这个值（以秒为单位）时，对 SourceBuffer 进行自动清理
                autoCleanupMinBackwardDuration: 2 * 60,//2 * 60 指示在执行自动清理时为后向缓冲区保留的持续时间（以秒为单位）。
              }
            );
            self.videoList.push(obj);
            console.log("i",i)
          }

          for(let i=0;i<self.videoList.length;i++){
            self.videoList[i].flvPlayer.attachMediaElement(self.videoList[i].player);
            self.videoList[i].flvPlayer.load(); //加载
            self.videoList[i].flvPlayer.play(); //加载
          }
        },
        //视屏全屏方法
        videoFullScreen(index){
          this.$refs.videoRef[index].webkitRequestFullScreen();
        },
        //数据中心视频关闭
        videoOff(){
          let self = this;
          if(self.videoList[0]){
            for(let i=0;i<self.videoList.length;i++){
              self.videoList[i].flvPlayer.pause();
              self.videoList[i].flvPlayer.unload();
              self.videoList[i].flvPlayer.detachMediaElement();
              self.videoList[i].flvPlayer.destroy();
              self.videoList[i].flvPlayer = null;
            }
            self.videoList = [];
          }
        },
        //播放文字
        handleAdd() {
          this.open = true;
        },
        // 取消按钮
        cancel() {
          this.form = {};
          this.open = false;
        },
        /*播放文字*/
        submitFormOne(){
          this.$refs["form"].validate(valid => {
            if (valid) {
              let id = this.newData.id;
              mangerVoice(this.form,id).then(response => {
                this.msgSuccess("播放成功");
                this.open = false;
              });
            }
          });
        },
        //展示实验室二维码
        clickCode(){
          this.codeType = true;
        },
        // 开启关闭验证
        async changeIsNeedCaptcha (row) {
          let self = this;
          console.log(row)
          if(row.state.code!=3 && row.state.code!=4){
            return
          }
          let text = row.state.code==3?'关闭':(row.state.code==4?'开启':'')
          this.$confirm(`是否`+text+`此设备`, "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }).then(async () => {
            self.switchChange(row)
          }).catch(() => {

          })
        },
        //开关按钮
        switchChange(row){
          let switchData = {
            id:row.id,
            switchVal:row.state.code==3?'close':(row.state.code==4?'open':'')
          };
          hardWareControl(switchData).then(response => {
            console.log(response);
            if(response.code==200){
              row.state.code = row.state.code==3?4:(row.state.code==4?3:'')
              this.msgSuccess("操作成功")
            }
          });
        },
        //返回上一页
        backPage(){
          this.$parent.clickPage(1);
        },
      },
      beforeDestroy() {
        //清除定时器
        let self = this;
        self.videoOff();
        console.log("beforeDestroy");
      },
    }
</script>

<style lang="scss" scoped>
  .infoPage{
    flex:1;
    display: flex;
    overflow: hidden;
    /*padding:5px 20px 20px 10px!important;*/
    *{
      margin:0;
    }
    .null-data-img{
      width:137px;
      height:137px;
      display: block;
      margin:10px auto;
    }
    .all-title-box{
      display: flex;
      height:18px;
      p{
        line-height:18px;
      }
      p:nth-child(1){
        width:4px;
        height:18px;
        margin-right:12px;
        background: #0045af;
      }
      p:nth-child(2){
        font-size:18px;
        color:#0045af;
        margin-right:28px;
        font-weight:700;
      }
      p:nth-child(3){
        font-size:14px;
        color:#999;
        flex:1;
      }
      p:nth-child(4){
        line-height:40px!important;
      }
    }
    .null-p{
      line-height:50px;
      text-align: center;
      font-size:14px;
      color:#999;
    }
    .left-max-box-flex{
      flex:1;
    }
    .left-max-box{
      font-weight:500;
      width:735px;
      display: flex;
      flex-direction: column;
      .top-max-box-flex{
        flex:1;
      }
      .top-max-box{
        border-radius:10px!important;
        box-shadow: 0 0 8px 1px rgba(0, 0, 0, 0.1) !important;
        padding:20px;
        margin:5px 10px 20px 10px;
        .left-top-title-box{
          margin-top:13px;
          height:74px;
          display: flex;
          border-bottom:1px dashed #999999;
          .left-box{
            flex:1;
            .lv-name-box{
              height:34px;
              display: flex;
              p:nth-child(1){
                height:22px;
                line-height:20px;
                margin:6px 15px 0 0;
                font-size:12px;
                text-align: center;
                padding:0 8px;
                border-radius:4px;
              }
              p:nth-child(2){
                font-size:16px;
                height:34px;
                line-height:34px;
                color:#333;
              }
            }
            .type-address-box{
              display: flex;
              p{
                font-size:14px;
                height:40px;
                line-height:40px;
                color:#999;
              }
              p:nth-child(1){
                margin-right:40px;
              }
            }
          }
          .right-code-img{
            width:60px;
            height:60px;
            margin:0 10px 0 0;
            cursor: pointer;
          }
        }
        .user-max-box{
          margin-top:10px;
          .left-box{
            flex:1;
            display: flex;
            p{
              line-height: 32px;
              font-size:14px;
              flex:1;
              color:#333;
              span{
                color:#999;
              }
            }
          }
          .right-box{
            flex:1;
            display: inline-block;
            div{
              display: flex;
              p{
                margin-right:20px;
                line-height: 32px;
                font-size:14px;
                color:#333;
                span{
                  color:#999;
                  margin-right:20px;
                }
              }
            }
          }
        }
        .info-max-title-p{
          line-height:20px;
          font-size:16px;
          color:#333;
          font-weight:700;
          border-top:1px dashed #999999;
          padding-top:20px;
          margin-top:10px;
        }
        .info-max-box{
          margin-top:7px;
          display: flex;
          flex-wrap: wrap;
          .for-text-box{
            width:320px;
            .info-title{
              font-size:14px;
              color:#333;
              line-height:40px;
              font-weight:700;
            }
            .for-box{
              overflow: hidden;
              .for-info-p{
                line-height:16px;
                font-size:14px;
                color:#999;
                margin:7px 0;
                overflow: hidden;
              }
            }
          }
          .for-img-box{
            width:320px;
            .info-title{
              font-size:14px;
              color:#333;
              line-height:40px;
              font-weight:700;
            }
            img{
              width:37px;
              height:50px;
              margin:0 14px 14px 0;
            }
          }
        }
      }
      .bottom-max-box{
        border-radius:10px!important;
        box-shadow: 0 0 8px 1px rgba(0, 0, 0, 0.1) !important;
        padding:20px;
        margin:0 10px 20px 10px;
        .for-list-box{
          margin-top:22px;
          .title-box{
            background: #F5F5F5;
            height:50px;
            line-height:50px;
            display: flex;
            p{
              flex:1;
              font-size:16px;
              color:#333;
              font-weight:700;
            }
            p:nth-child(1){
              margin-left:50px;
            }
          }
          .list-box:nth-child(2){
            border:none;
          }
          .list-box{
            border-top:1px solid #E0E0E0;
            height:40px;
            line-height:40px;
            display: flex;
            p{
              flex:1;
              font-size:14px;
              color:#999;
            }
            p:nth-child(1){
              margin-left:50px;
            }
          }
        }
      }
    }
    .right-max-box{
      font-weight:500;
      width:845px;
      border-radius:10px!important;
      box-shadow: 0 0 8px 1px rgba(0, 0, 0, 0.1) !important;
      margin:5px 20px 20px 10px;
      padding:20px;
      .sensor-box{
        display: inline-block;
        font-size:14px;
        color:#333;
        line-height:34px;
        width:220px;
        span{
          color:#999;
        }
      }
      .things-box{
        width:210px;
        height:30px;
        display: inline-block;
        margin-bottom:10px;
        .things-for-box{
          display: flex;
          .left-title{
            width: 110px;
            font-size:14px;
            color:#333;
            line-height:30px;
            margin-right:10px;
            display:block;
            overflow:hidden;
            text-overflow:ellipsis;
            white-space:nowrap;
          }
          .switch{

          }
          .switch-null-p{
            font-size:14px;
            color:#999;
            line-height:30px;
          }
          .right-button{
            cursor: pointer;
            line-height:30px;
            border-radius:6px;
            border:1px solid #0045af;
            color:#0045af;
            font-size:14px;
            text-align: center;
            width:100px;
          }
        }
      }
      .source-box{
        span{
          font-size:14px;
          line-height:18px;
          color:#333;
        }
      }
      .video-max-box{
        .video-min-box{
          display: inline-block;
          overflow: hidden;
          width:380px;
          margin-bottom:20px;
          margin-right:20px;
          position: relative;
          .position-p{
            width:30px;
            height:30px;
            text-align: center;
            line-height:30px;
            font-size:18px;
            position: absolute;
            top:0;
            right:0;
            color:#fff;
            cursor: pointer;
          }
          .video-all-button-2{
            width:30px;
            height:30px;
            text-align: center;
            line-height:30px;
            position: absolute;
            top:0;
            right:30px;
            color:#fff;
            cursor: pointer;
          }
          .video-all-button-3{
            width:30px;
            height:30px;
            text-align: center;
            line-height:30px;
            position: absolute;
            top:0;
            right:60px;
            color:#fff;
            cursor: pointer;
          }
        }
        /*.video-min-box:nth-child(2n+0){*/
          /*margin-left:20px;*/
        /*}*/
      }
      .inspection-box{
        div{
          display: flex;
          p:nth-child(1){
            line-height:16px;
            font-size:14px;
            margin:11px 0;
            color:#999;
          }
          p:nth-child(2){
            flex:1;
            line-height:16px;
            font-size:14px;
            margin:11px 0;
            color:#333;
            span{
              color:#333;
            }
          }
        }
      }
    }
    .demo-max-box{
      padding:20px;
      .demo-title-box{
        display: flex;
        p{
          flex:1;
          color:#666;
          font-size:16px;
          line-height:30px;
        }
      }
      .demo-text-box{
        display: flex;
        p{
          flex:1;
          color:#333;
          font-size:14px;
          line-height:30px;
        }
      }
    }
  }
</style>

<style lang="scss">
  .look-video-dialog-box{
    //  画中画
    video::-webkit-media-controls-enclosure {
      display: none;
    }
    // 音频开关
    video::-webkit-media-controls-mute-button {
      display: none;
    }
    // 音频大小
    video::-webkit-media-controls-volume-slider {
      display: none;
    }
    //全屏按钮
    video::-webkit-media-controls-fullscreen-button {
      display: none;
    }
    //开始暂停按钮
    video::-webkit-media-controls-play-button {
      display: none;
    }
    // 时间显示
    video::-webkit-media-controls-current-time-display {
      display: none;
    }
    // 未知时间
    video::-webkit-media-controls-toggle-closed-captions-button {
      display: none;
    }
    //进度条
    video::-webkit-media-controls-timeline {
      display: none;
    }
    //未知进度条
    video::-webkit-media-controls-time-remaining-display {
      display: none;
    }
    video {
      object-fit: fill; //视频全铺
      pointer-events: none; //点击禁用
    }
    .dialog-video-max-box{
      display: flex;
      height:410px;
      margin:20px 0;
      position: relative;
      .dialog-position-p{
        position: absolute;
        top: 0;
        left:0;
        width: 730px;
        height:30px;
        background-color: #ffffff;
        z-index:999;
      }
      .dialog-video-max-left-box{
        flex:1;
      }
      .dialog-video-max-right-box{
        width:200px;
        p{
          line-height:30px;
        }
        p:hover{
          background-color: #0183fa;
          color:#fff;
          cursor: pointer;
        }
        .check-p{
          color:#0183fa;
        }
      }
    }
  }
</style>