:预警研判

“dzb”

2022-11-02 12fd8f6b04b26ef02bccdf5fd0bcefb59541c7f6

 src/views/intelligentPatrol/studyJudge/index.vue

@@ -1,13 +1,296 @@
<template>
  <div>预警研判</div>
  <div class="study-judge">
    <div class="study-judge-header">
      <span>您有1111条待审核报警信息,今日立案0条,再学习0条</span>
    </div>
    <div class="study-judge-main">
      <!-- sjm:study-judge-main -->
      <div class="sjm-header">
        <div class="sjm-header-left">
          <span class="moni-name">监控点位名称:中华路XX路口 </span>
          <span class="moni-area">中华街道区域</span>
        </div>
        <div class="sjm-header-right">
          <el-button size="small">实时预览</el-button>
          <el-button size="small">录像回放</el-button>
        </div>
      </div>
      <div class="sjm-content">
        <div class="sjm-content-left">
          <div class="img-item">
            <span>报警图片</span>
            <img
              src="https://axure-file.lanhuapp.com/90466432-c999-4bf0-80b8-ee3f96a2099e__67d4d15bfc501319f8377f2ce37bf441.svg"
              alt="">
            <span>报警时间：2022-09-08 14:23:34</span>
          </div>
          <div class="img-item">
            <img
              src="https://axure-file.lanhuapp.com/90466432-c999-4bf0-80b8-ee3f96a2099e__67d4d15bfc501319f8377f2ce37bf441.svg"
              alt="">
          </div>
          <div class="img-item">
            <img
              src="https://axure-file.lanhuapp.com/90466432-c999-4bf0-80b8-ee3f96a2099e__67d4d15bfc501319f8377f2ce37bf441.svg"
              alt="">
          </div>
        </div>
        <div class="sjm-content-center">
          地图容器
        </div>
        <div class="sjm-content-right">
          <div class="card-box">
            <div class="card-header">
              <span>报警记录</span>
              <span>乱停乱放违法占道</span>
            </div>
            <el-form ref="currentEvent" label-width="120px" :model="currentEvent" :rules="rules">
              <el-form-item label="事件编号:">
                <span>{{ currentEvent.number }}</span>
              </el-form-item>
              <el-form-item label="事件等级:">
                <span>{{ currentEvent.level }}</span>
              </el-form-item>
              <el-form-item label="首次报警时间:">
                <span>{{ currentEvent.firstTime }}</span>
              </el-form-item>
              <el-form-item label="最近报警时间:">
                <span>{{ currentEvent.recentTime }}</span>
              </el-form-item>
              <el-form-item label="持续时间:">
                <span>{{ currentEvent.conntinueTime }}</span>
              </el-form-item>
              <el-form-item label="处理意见:" prop="advice">
                <el-radio-group v-model="currentEvent.advice">
                  <el-radio :label="item.id" v-for="item in adviceList" :key="item.id">{{ item.label }}</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="问题类型:" prop="type">
                <el-input v-model="currentEvent.type" placeholder="请选择问题类型"></el-input>
              </el-form-item>
              <el-form-item label="大类名称:" prop="bigKind">
                <el-input v-model="currentEvent.bigKind" placeholder="请选择大类名称"></el-input>
              </el-form-item>
              <el-form-item label="小类名称:" prop="smallKind">
                <el-input v-model="currentEvent.smallKind" placeholder="请选择小类名称"></el-input>
              </el-form-item>
              <el-form-item label="车牌号:" prop="carNumber">
                <el-input v-model="currentEvent.carNumber" placeholder="请填写车牌号码"></el-input>
              </el-form-item>
              <el-form-item label="备注:">
                <el-input type="textarea" :rows="5" v-model="currentEvent.tip"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button>上一条</el-button>
                <el-button @click.native.prevent="handleConfirm">确认</el-button>
                <el-button>下一条</el-button>
              </el-form-item>
            </el-form>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    const validateAdvice = (rule,value,callback)=>{
      if(value){
        callback()
      }else{
        callback(new Error('处理意见不能为空'))
      }
    }
    const validateType = (rule,value,callback)=>{
      if(value){
        callback()
      }else{
        callback(new Error('问题类型不能为空'))
      }
    }
    const validateBigKind = (rule,value,callback)=>{
      console.log(value)
      if(value){
        callback()
      }else{
        callback(new Error('大类名称不能为空'))
      }
    }
    const validateSmallKind = (rule,value,callback)=>{
      if(value){
        callback()
      }else{
        callback(new Error('小类名称不能为空'))
      }
    }
    const validateCarNumber = (rule,value,callback)=>{
      if(value){
        callback()
      }else{
        callback(new Error('车牌号不能为空'))
      }
    }
    return {
      currentEvent: {
        number: '1233123414141414',
        level: '一般事件',
        firstTime: '2022/09/23 12:00:00',
        recentTime: '2022/09/23/ 12:00:00',
        conntinueTime: '0小时10分钟',
        advice: null,
        type: '',
        bigKind: '',
        smallKind: '',
        carNumber: '',
        tip: ''
      },
      adviceList: [
        {
          id: 1,
          label: '上报',
        },
        {
          id: 2,
          label: '调度',
        },
        {
          id: 3,
          label: '再学习',
        },
        {
          id: 4,
          label: '暂不处理',
        },
      ],
      rules:{
        advice:[
          {
            trigger:'blur',validator:validateAdvice
          },
        ],
        type:[
          {
            trigger:'blur',validator:validateType
          }
        ],
        bigKind:[
          {
            trigger:'blur',validator:validateBigKind
          }
        ],
        smallKind:[
          {
            trigger:'blur',validator:validateSmallKind
          }
        ],
        carNumber:[
          {
            trigger:'blur',validator:validateCarNumber
          }
        ]
      }
    }
  },
  methods:{
    // 确认点击事件
    handleConfirm(){
      console.log(this.$refs.currentEvent)
      this.$refs.currentEvent.validate((flag)=>{
        console.log(flag)
        if(flag){

        }else{
          return false
        }
      })
    }
  }
}
</script>

<style>
<style lang="scss" scoped>
.study-judge {
  text-align: left;
  color: #4b9bb7;
  padding: 20px;
  .study-judge-header {
    line-height: 8vh;
  }

  .study-judge-main {
    .sjm-header {
      line-height: 8vh;
      display: flex;
      justify-content: space-between;

      .sjm-header-left {
        flex: 1;
        display: flex;
        justify-content: flex-start;

        .moni-area {
          margin-left: 4vw;
        }
      }

      .sjm-header-right {
        flex: 1;
        display: flex;
        justify-content: flex-end;

        .el-button {
          padding: 0 1vw;
          height: 4vh;
        }
      }
    }

    .sjm-content {
      display: flex;
      justify-content: space-between;

      .sjm-content-left {
        line-height: 4.8vh;

        .img-item {
          display: flex;
          flex-direction: column;

          img {
            width: 15vw;
            height: 20vh;
          }
        }

        .img-item+.img-item {
          margin-top: 2vh;
        }
      }

      .sjm-content-right {
        .card-box {
          .card-header {
            line-height: 4.8vh;
          }
        }
      }
    }
  }

  .el-form {
    ::v-deep .el-form-item {
      // margin-bottom: 10px;
    }

    ::v-deep .el-form-item__label {
      color: #4b9bb7;
    }
  }

  ::v-deep .el-radio__label {
    color: #4b9bb7;
  }
}
</style>