FE-V2-PC/src/views/gasManage3_0/manage/infoRecord/detailsPage.vue

<template>
  <div class="infoPage">
    <div class="title-box">
      <p>详情</p>
      <p class="inquire-button-one">处理</p>
      <p class="reset-button-one" @click="backPage">返回</p>
    </div>
    <div class="bottom-max-bug-box scrollbar-box">
      <div class="left-max-big-box scrollbar-box">
        <div class="text-box">
          <p>报警时间：</p>
          <p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>
        </div>
        <div class="text-box">
          <p>报警内容：</p>
          <p></p>
        </div>
        <div class="text-box">
          <p>学院：</p>
          <p></p>
        </div>
        <div class="text-box">
          <p>位置：</p>
          <p></p>
        </div>
        <div class="text-box">
          <p>气瓶规格：</p>
          <p></p>
        </div>
        <div class="text-box">
          <p>气体余量：</p>
          <p></p>
        </div>
        <div class="text-box">
          <p>当前使用人：</p>
          <p></p>
        </div>
        <div class="text-box">
          <p>气瓶所有人：</p>
          <p></p>
        </div>
        <div class="img-max-box">
          <img v-for="(url,index) in imgList" :key="index"
               :src="url" @click="lockImg(url)">
        </div>
      </div>
      <div class="right-max-big-box">
        <div class="right-top-max-big-box">
          <p class="right-title-p">查看监控</p>
          <div class="right-top-button-box scrollbar-x-box">
            <p :class="topButtonIndex == index?'buttonColorA':'buttonColorB'"
               @click="topButtonClick(index)"
               v-for="(item,index) in topButton" :key="index">{{item.name}}</p>
          </div>
          <video class="video-box" id="alarmRecordDetailsPageVideo" ref="videoRef" autoplay controls  muted width="454px" height="252px" :poster="videoCover"></video>
        </div>
        <div class="right-bottom-max-big-box">
          <p class="right-title-p">语音广播</p>
          <div class="right-bottom-button-max-box">
            <p class="right-bottom-button-title-p">选择播放喇叭</p>
            <div class="right-bottom-button-box scrollbar-x-box">
              <p :class="item.type?'buttonColorA':'buttonColorB'"
                 @click="bottomButtonClick(item)"
                 v-for="(item,index) in bottomButton" :key="index">{{item.name}}</p>
            </div>
          </div>
          <div class="right-bottom-input-box">
            <p>播报内容</p>
            <el-input
              type="textarea"
              resize="none"
              :rows="4"
              style="width:668px;height:100px;"
              v-model="text"
              placeholder="请输入播报内容"
              maxLength="50"
              clearable/>
          </div>
          <p class="inquire-button-one right-bottom-button" @click="releaseButton">发布</p>
        </div>
      </div>
    </div>
    <!--查看图片-->
    <el-dialog title="抓拍照片" :visible.sync="imgOpen" width="1200px" append-to-body>
      <div class="scrollbar-box" style="width:1160px;margin:0 auto;max-height:700px;overflow-y: scroll">
        <img :src="imgUrl" style="display:block;max-width:1156px;margin:0 auto;">
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import { handle } from "@/api/medicUniversity-3_1/index";
  export default {
    name: "infoPage",
    props:{
      propsInfoData:{},
    },
    data() {
      return {
        imgList:[
          'https://img2.baidu.com/it/u=3596352791,3086982929&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800',
          'https://img2.baidu.com/it/u=3596352791,3086982929&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800',
          'https://img2.baidu.com/it/u=3596352791,3086982929&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800',
          'https://img2.baidu.com/it/u=3596352791,3086982929&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800',
        ],
        videoCover:window.location.href.split('://')[0]+'://' + this.judgmentNetworkReturnAddress() + "/admin/" + localStorage.getItem('videoCover'),
        topButtonIndex:0,
        topButton:[
          {id:'1',name:'走廊摄像头1'},{id:'2',name:'走廊摄像头2'},{id:'3',name:'走廊摄像头3'},
          {id:'1',name:'走廊摄像头1'},{id:'2',name:'走廊摄像头2'},{id:'3',name:'走廊摄像头3'},
          {id:'1',name:'走廊摄像头1'},{id:'2',name:'走廊摄像头2'},{id:'3',name:'走廊摄像头3'},
        ],
        bottomButtonIndex:0,
        bottomButton:[
          {id:'1',name:'喇叭1',type:false},{id:'2',name:'喇叭1',type:false},
          {id:'3',name:'喇叭1',type:false},{id:'4',name:'喇叭1',type:false},
          {id:'5',name:'喇叭1',type:false},{id:'6',name:'喇叭1',type:false},
          {id:'7',name:'喇叭1',type:false},{id:'8',name:'喇叭1',type:false},
          {id:'9',name:'喇叭1',type:false},{id:'10',name:'喇叭1',type:false},
        ],
        text:"",
        //查看图片
        imgOpen:false,
        imgUrl:"",
      }
    },
    created() {

    },
    mounted(){

    },
    methods:{
      //发布按钮
      releaseButton(){
        let self = this;
        let num = 0;
        for(let i=0;i<self.bottomButton.length;i++){
          if(self.bottomButton[i].type){
            num++
          }
        }
        if(num == 0){
          this.msgError('请选择喇叭')
          return
        }
        if(!this.text){
          this.msgError('请输入播报内容')
          return
        }
      },
      //查看图片
      lockImg(url){
        console.log("url",url);
        this.imgUrl = url;
        this.imgOpen = true;
      },
      // 监控选择
      topButtonClick(type){
        if(this.topButtonIndex != type){
          this.topButtonIndex = type;
        }
      },
      //喇叭选择
      bottomButtonClick(item){
        item.type = !item.type
      },
      //处理报警记录
      handle(){
        let self = this;
        if(self.propsInfoData.buttonType != 1){
          self.msgError('只有该实验室负责人可以处理')
          return
        }
        this.$confirm('确定要处理吗?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function() {
          handle({id:self.propsInfoData.id}).then(response => {
            self.msgSuccess(response.msg);
            self.$set(self.propsInfoData,'handlingStatus',2);
            self.$set(self.propsInfoData,'operate','已处理');
          })
        }).then(() => {
        }).catch(() => {});
      },
      backPage(){
        this.$parent.pageToggle(1);
      },
    }
  }
</script>

<style scoped lang="scss">
  .infoPage{
    flex:1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border:1px solid #dedede;
    p{
      margin:0;
      padding:0;
    }
    .title-box{
      display: flex;
      height:90px;
      border-bottom: 1px solid #D8D8D8;
      p:nth-child(1){
        flex:1;
        font-size:16px;
        line-height:90px;
        margin-left:18px;
        color:#0045AF;
      }
      p:nth-child(2),p:nth-child(3){
        margin:25px 25px 0 0;
      }
    }
    .bottom-max-bug-box{
      font-weight: 500;
      flex:1;
      padding:20px 79px;
      .left-max-big-box{
        width:559px;
        height:750px;
        display: inline-block;
        margin-right:22px;
        border-radius:10px;
        box-shadow: 0 0 8px 1px rgba(0, 0, 0, 0.1) !important;
        padding:28px 28px 0 28px;
        .text-box{
          display: flex;
          font-size:14px;
          line-height:20px;
          margin-bottom:28px;
          p:nth-child(1){
            width:100px;
            text-align: right;
            color:#333;
          }
          p:nth-child(2){
            flex: 1;
            color:#666;
            margin-left:6px;
          }
        }
        .img-max-box{
          img{
            cursor: pointer;
            display: inline-block;
            width:240px;
            height:160px;
            margin-bottom:14px;
          }
          img:nth-child(odd){
            margin-right:18px;
          }
        }
      }
      .right-max-big-box{
        width:839px;
        display: inline-block;
        .right-top-max-big-box{
          height:414px;
          overflow: hidden;
          border-radius:10px;
          box-shadow: 0 0 8px 1px rgba(0, 0, 0, 0.1) !important;
          .right-title-p{
            font-size:16px;
            color:#333;
            line-height:24px;
            margin:18px 0 12px 24px;
          }
          .right-top-button-box{
            margin:0 25px;
            width:788px;
            height: 42px;
            p:nth-child(1){
              margin:0;
            }
            p{
              display: inline-block;
              margin:0 0 0 18px;
              padding:0 18px;
              line-height:30px;
              border-radius:6px;
              font-size:14px;
              cursor: pointer;
            }
            .buttonColorA{
              border:1px solid #0183FA;
              background:#0183FA;
              color:#fff;
            }
            .buttonColorB{
              border:1px solid #E0E0E0;
              color:#333;
            }
          }
          .video-box{
            height:252px;
            width:454px;
            margin:34px 192px;
          }
        }
        .right-bottom-max-big-box{
          margin-top:20px;
          height:316px;
          overflow: hidden;
          border-radius:10px;
          box-shadow: 0 0 8px 1px rgba(0, 0, 0, 0.1) !important;
          .right-title-p{
            font-size:16px;
            color:#333;
            line-height:24px;
            margin:18px 0 12px 24px;
          }
          .right-bottom-button-max-box{
            margin-top:25px;
            display: flex;
            .right-bottom-button-title-p{
              line-height:32px;
              margin-left:25px;
              font-size:16px;
              margin-right:25px;
            }
            .right-bottom-button-box{
              width:668px;
              height: 42px;
              p:nth-child(1){
                margin:0;
              }
              p{
                display: inline-block;
                margin-left:18px;
                padding:0 30px;
                line-height:30px;
                border-radius:6px;
                font-size:14px;
                cursor: pointer;
              }
              .buttonColorA{
                border:1px solid #0183FA;
                background:#0183FA;
                color:#fff;
              }
              .buttonColorB{
                border:1px solid #E0E0E0;
                color:#333;
              }
            }
          }
          .right-bottom-input-box{
            margin-top:30px;
            display: flex;
            p{
              line-height:32px;
              margin-left:25px;
              font-size:16px;
              text-align: right;
              width:98px;
              margin-right:24px;
            }
          }
          .right-bottom-button{
            width:100px;
            line-height:40px;
            text-align: center;
            margin:15px 370px;
          }
        }
      }
    }
  }
</style>