hbt-training-ui/src/components/home/right/confirm.component.vue

<template>
  <div>
    <div class="d-flex align-items-center margin-bottom-20">
      <span class="cycle-icon blue"></span>
      <span class="blue-text">确认警情</span>
      <span class="link"></span>
      <span class="line-gray"></span>
      <span class="round-style"></span>
      <span>事故研判</span>
    </div>
    <div class="info-content-text">
      <span class="label">预警类型：</span>
      <span class="text">{{info.typeName}}</span>
    </div>
    <div class="info-content-text">
      <span class="label">告警内容：</span>
      <span class="text">{{info.content}}</span>
    </div>
    <div class="info-content-text">
      <span class="label">告警级别：</span>
      <span class="text" :class="info.levelClass">{{info.levelName}}</span>
      <i class="cycle-icon" :class="info.levelClassIcon"></i>
    </div>
    <div class="info-content-text">
      <span class="label">上报时间：</span>
      <span class="text">{{info.time}}</span>
    </div>
    <div class="info-content-text cursor-pointer">
      <span class="label">上报位置：</span>
      <span class="text">{{info.address}}</span>
      <i @click="changePoint(info)" class="position-icon"></i>
    </div>
    <div class="info-content-text cursor-pointer">
      <span class="label">上报人：</span>
      <span class="text">{{info.reporter}}</span>
      <span class="phone-btn d-flex align-items-center is-justify-space-center"><img src="~@/assets/img/phone-gray.png" alt="">一健联系</span>
    </div>

    <div class="info-content-text cursor-pointer">
      <span class="label">附近摄像头：</span>
    </div>
    <div class="plan-head">
      <span class="span-item">摄像头名称</span>
      <span class="span-item">类型</span>
      <span class="span-item">距离 (m)</span>
    </div>
    <div class="plan-head-tbody">
      <div class="tr" :key="i" v-for="(item,i) in info.tableData">
        <span class="span-item">{{ item.name }}</span>
        <span class="span-item">{{ item.type }}</span>
        <span class="span-item">{{ item.distance }}</span>
      </div>

    </div>
    <div class="d-flex margin-top-30 is-justify-space-center confirm-btn-group">
      <div class="confirm-btn deal-btn" @click="showJudgmentFlag">事故研判</div>
      <div class="confirm-btn" @click="hidePop">消警</div>
    </div>
    <!-- 报警记录弹窗 -->
    <div class="pop-box right-position " v-if="showDealMsg">
      <div class="close" @click="showDealMsg=false">×</div>
      <div class="border l-t"></div>
      <div class="border r-t"></div>
      <div class="border r-b"></div>
      <div class="border l-b"></div>
      <div class="title">处理意见</div>
      <el-form class="margin-top-23" label-width="100px">

        <el-form-item label="处理建议：">
          <el-input  :rows="5"  v-model="popObj.content" class="item-radius-style" type="textarea" placeholder="请输入事件描述"></el-input>
        </el-form-item>
        <el-form-item label="执行人：">
          <el-select v-model="popObj.typeId"  class="item-radius-style">
            <el-option v-for="(item,i) in typeList" :key="i" :label="item.label" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div class="d-flex btn-group align-items-center">
        <div class="btn-style" @click="hideConfirm">确认</div>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import {Component, Emit, Prop, Vue, Watch} from 'vue-property-decorator';

@Component
export default class ConfirmComponent extends Vue {
  //传入的报警信息详情
  @Prop({default: function () {
      return {
        type:'人员聚集',
        content:'人员踩踏事故预警',
        levelName:'二级',
        levelClass:'level-2-text',
        levelClassIcon:'level-2',
        time:'2023年3月12日 13:56:00',
        position:'工厂厂房',
        reporter:'李四',
        tableHeader:[
          {
            prop:'name',
            label:'摄像头名称'
          },{
            prop:'type',
            label:'类型'
          },{
            prop:'distance',
            label:'距离 (m)'
          }
        ],
        tableData : [
          {
            type:'简型摄像头',
            distance:'10',
            name:'1号摄像头',
          },{
            type:'简型摄像头',
            distance:'20',
            name:'2号摄像头',
          },{
            type:'简型摄像头',
            distance:'22',
            name:'3号摄像头',
          },{
            type:'简型摄像头',
            distance:'10',
            name:'4号摄像头',
          },{
            type:'简型摄像头',
            distance:'20',
            name:'5号摄像头',
          },{
            type:'简型摄像头',
            distance:'22',
            name:'6号摄像头',
          },
        ]
      }
    } }) info!: any[];
  showDealMsg = false
  popObj:any = {
    popTitle:'报警记录',
    type:'',
    title: '风险点异常',
    info: '',
    time: '',
    address:'',
    level: '',
    typeName:"",
    reporter:"",
    tel:"",
    position:[],
    content:"",
    typeId:"",
    id:''

  }
  typeList = [
    {
      label:'张三',
      value:'张三',
    },{
      label:'李四',
      value:'李四',
    },{
      label:'王五',
      value:'王五',
    }
  ]
  //表格添加类
  tableRowClassName({row, rowIndex}) {
    if (rowIndex === 1) {
      return 'blue-row';
    }
    if (rowIndex === 2) {
      return 'yellow-row';
    }
    if (rowIndex === 3) {
      return 'orange-row';
    }
    if (rowIndex === 4) {
      return 'red-row';
    }

    return '';
  }

  //处理信息
  @Emit('showJudgmentFlag')
  showJudgmentFlag() {
//
  }
  //点击点位
  @Emit('changePoint')
  changePoint(item) {
    console.log(item)
//
  }
  hidePop(){
    this.showDealMsg = true
  }
  //处理信息
  @Emit('hideConfirm')
  hideConfirm(){
    this.showDealMsg = false
//
  }


}
</script>
<style lang="scss" scoped>

.font-size-12 {
  font-size: 12px;
}

.tb-info-style {
  margin-bottom: 20px;
}
.confirm-btn{
  width: 140px;
  height: 34px;
  background: transparent;
  border-radius: 17px;
  border: 1px solid #FFFFFF;
  text-align: center;
  line-height: 32px;
  cursor: pointer;
}
.deal-btn{
  background: rgba(255,255,255,0.15);
  margin-right: 20px;
}
.confirm-btn-group{
  width: 100%;
  text-align: center;
}
.blue{
  background: #7DAEFF;
}
.blue-text{
  color: #7DAEFF;
}
.overview-container .pop-box {
  left: -170%;
  ::v-deep{
    .el-form-item__label{
      color: #FFFFFF;
    }
    .item-radius-style {
      .el-input__inner {
        background: rgba(0, 0, 0, 0.5);
        border-radius: 20px;
        border: 1px solid rgba(255, 255, 255, 0.6);
        color: #d7d7d7;
      }

      .el-textarea__inner {
        color: #d7d7d7;
        background: rgba(0, 0, 0, 0.5);
        border-radius: 5px;
        border: 1px solid rgba(255, 255, 255, 0.6);
      }

    }
  }
  .btn-group {
    justify-content: space-evenly;

    .btn-style {
      width: 96px;
      height: 34px;
      background: rgba(255, 255, 255, 0.15);
      border-radius: 17px;
      border: 1px solid #FFFFFF;
      text-align: center;
      line-height: 34px;
      cursor: pointer;
    }

    .cancel {
      background: rgba(255, 255, 255, 0);
    }
  }

}
</style>