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

<template>
    <div class="infoPage" v-if="newData.id">
      <div class="left-max-box scrollbar-box">
        <div class="top-max-box" style="position: relative">
          <div class="all-title-box">
            <p></p>
            <p>实验室安全信息牌</p>
          </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}}</span></p>
              <p>联系方式：<span>{{newData.adminPhone}}</span></p>
            </div>
            <div class="right-box">
              <div v-for="(item,index) in newData.safeUserName" :key="index">
                <p>安全责任人：<span>{{newData.safeUserName[index]}}</span></p>
                <p>联系方式：<span>{{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">主要危险类别：</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">灭火要点：</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">风险防控措施：</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;">安全警示标识：</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="bottom-max-box">
          <div class="all-title-box">
            <p></p>
            <p>关联预案</p>
          </div>
          <div class="for-list-box">
            <div class="title-box">
              <p>预案名称</p>
              <p>启动次数</p>
              <p>最近启动时间</p>
            </div>
            <div class="list-box" v-for="(item,index) in newData.riskPlanList" :key="index">
              <p>{{item.planName}}</p>
              <p>{{item.planCount}}</p>
              <p>{{item.lastTime}}</p>
            </div>
            <img class="null-data-img" src="@/assets/ZDimages/null-data.png" v-if="!newData.riskPlanList[0]">
            <p class="null-p" v-if="!newData.riskPlanList[0]" >暂未关联预案信息，请在应急管理-预案管理中进行配置</p>
          </div>
        </div>
      </div>
      <div class="right-max-box scrollbar-box">
        <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="240" height="130px"></video>
            <p class="el-icon-full-screen position-p" @click="videoFullScreen(index)"></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>
            <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>
            <p>穿戴检查可跳过：</p>
            <p>{{newData.skipped == '1'?'是':(newData.skipped == '0'?'否':'')}}</p>
          </div>
          <div v-if="newData.skipped == 1">
            <p>穿戴检查识别上限：</p>
            <p>{{newData.checkCount?newData.checkCount:'未设置'}}</p>
          </div>
          <div>
            <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>
      <!--展示实验室二维码-->
      <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>
    </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:[],
        }
      },
      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:{
        //视频方法
        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{
      font-weight:500;
      width:1035px;
      display: flex;
      flex-direction: column;
      .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;
          display: flex;
          .left-box{
            width:420px;
            display: flex;
            p{
              line-height: 32px;
              font-size:14px;
              flex:1;
              color:#333;
              span{
                color:#999;
              }
            }
          }
          .right-box{
            flex:1;
            div{
              flex:1;
              display: flex;
              p{
                line-height: 32px;
                font-size:14px;
                flex:1;
                color:#333;
                span{
                  color:#999;
                }
              }
            }
          }
        }
        .info-max-box{
          margin-top:7px;
          display: flex;
          .left-box{
            width:420px;
            .for-text-box{
              .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;
                }
              }
            }
          }
          .right-box{
            flex:1;
            .for-text-box{
              .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{
              .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:545px;
      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:240px;
          margin-bottom:20px;
          height:130px;
          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-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:#333;
          }
          p:nth-child(2){
            flex:1;
            line-height:16px;
            font-size:14px;
            margin:11px 0;
            color:#999;
            span{
              color:#999;
            }
          }
        }
      }
    }
  }
</style>