实时警情报警和光辉

zengh

2021-01-30 c6a750cf249ca37db6f8e404f742d31cd2505f60

实时警情报警和光辉

 src/page/index/logo.vue

@@ -13,9 +13,10 @@
              key="1">{{website.indexTitle}} </span>
      </template>
    </transition-group>

    <audio ref='realAudio' loop>
    </audio>
    <div>
      <el-dialog title="警情处置" :visible.sync="dialogTableVisible" append-to-body="true">
      <el-dialog  class="real-dialog" title="实时警情" :visible.sync="dialogTableVisible" append-to-body="true" @close='closeDialog'>
        <el-form :model="form" label-position="right" size="mini" label-width="100px">
          <el-row>
            <el-col span="12">
@@ -29,9 +30,88 @@
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col span="12">
              <el-form-item label="行政区" >
                <el-input disabled="true" v-model="form.district" autocomplete="off"></el-input>
              </el-form-item>
            </el-col>
            <el-col span="12">
              <el-form-item label="事发地址" >
                <el-input disabled="true" v-model="form.place" autocomplete="off"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col span="12">
              <el-form-item label="警情类别" >
                <el-input disabled="true" v-model="form.waringType" autocomplete="off"></el-input>
              </el-form-item>
            </el-col>
            <el-col span="12">
              <el-form-item label="设备编号" >
                <el-input disabled="true" v-model="form.deviceNumber" autocomplete="off"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col span="12">
              <el-form-item label="接警人" >
                <el-input disabled="true" v-model="form.galarmPeople" autocomplete="off"></el-input>
              </el-form-item>
            </el-col>
            <el-col span="12">
              <el-form-item label="接警时间" >
                <el-input disabled="true" v-model="form.jjTime" autocomplete="off"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col span="12">
              <el-form-item label="报警时间" >
                <el-input disabled="true" v-model="form.alarmTime" autocomplete="off"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-form-item label="报警内容" >
              <el-input disabled="true" v-model="form.content" autocomplete="off"></el-input>
            </el-form-item>
          </el-row>
          <el-row>
            <el-col span="12">
              <el-form-item label="要求处置时间" >
                <el-date-picker
                  v-model="form.czTime"
                  type="datetime"
                  value-format="yyyy-MM-dd hh:mm:ss"
                  placeholder="选择日期时间">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col span="12">
              <el-form-item label="备注" >
                <el-input v-model="form.bz" autocomplete="off"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :align='center'>
            <el-col :offset="4">
              <el-form-item >
                <el-button type="success">一键呼叫</el-button>
                <el-button type="success">视频对讲</el-button>
                <el-button type="primary" @click.stop="generate(form)">生成警单</el-button>
                <el-button type="warning" @click.stop="revoke(form)">警情撤销</el-button>
                <el-button type="danger">推送110</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-dialog>
    </div>



  </div>
</template>

@@ -75,15 +155,90 @@
          method: 'post',
        }).then(function (response) {
          if (response.data.data.length > 0){
            that.deviceId = response.data.data.records[0].id;
            that.form = response.data.data.records[0];

            that.deviceId = response.data.data[0].id;
            that.form = response.data.data[0];
            that.dialogTableVisible = true;
            that.$refs.realAudio.src = "./realVideo/audio.mp3";
            that.$refs.realAudio.play();
          }
          that.dialogTableVisible = true;
        });

        //that.dialogTableVisible = true;
      }, 5000);

    },
    closeDialog(){
      //关闭窗口回调，关闭警报
      this.$refs.realAudio.pause();
    },
    generate(row){
      var that = this;
      //关闭窗口回调，关闭警报
      that.$refs.realAudio.pause();
      if (row.czTime == "" || row.czTime == null){
        this.$message({
          message: '请选择处置时间',
          type: 'warning'
        });
      }else{
        axios({
          url: 'http://192.168.0.103:1888/api/blade-jfpts/jingdan/jingdan/submit',
          method: 'post',
          data: {
            rName: row.rname,
            galarmPeople: row.galarmPeople,
            phoneNumber: row.phoneNumber,
            place: row.place,
            content: row.content,
            galarmTime: row.alarmTime,
            waringType: row.waringType,
            deviceNumber: row.deviceNumber,
            type: "0",
            handleP: null,
            handleTime: null,
            handName: null,
            level: row.level,
            coordinate: null,
            jd: row.jd,
            wd: row.wd,
            addvcd: row.district,
            czTime: row.czTime,
            jjTime: row.jjTime,
            bz: row.bz,
          }
        })
          .then(function (response) {

            that.$message({
              message: '生成警单成功',
              type: 'success'
            });
            that.updateJtyep(row);
            that.dialogTableVisible = false;
          })
          .catch(function (error) {
            that.dialogTableVisible = false;
          });
      }

    },
    revoke(row){
      var that = this;
      axios({
        url: 'http://192.168.0.103:1888/api/blade-jfpts/alarm/alarm/deletejj?id='+row.id,
        method: 'post',
      }).then(function () {
        that.dialogTableVisible = false;
        //关闭窗口回调，关闭警报
        that.$refs.realAudio.pause();
      });


    },updateJtyep(row){
      var that = this;
      axios({
        url: 'http://192.168.0.103:1888/api/blade-jfpts/alarm/alarm/updateJtype?id='+row.id+"&czTime="+row.czTime+"&bz="+row.bz,
        method: 'post',
      }).then(function () {
      });
    }
  }
};
@@ -128,4 +283,21 @@
    color: #fff;
  }
}

.real-dialog .el-dialog::after {
  content: '';
  position: absolute;
  left: -5px;
  top: 25px;
  right: -5px;
  bottom: 25px;
  background: red;
  border-radius: 10px;
  filter: blur(120px);
  mix-blend-mode: overlay;
  pointer-events: none;
  z-index: -1;
}


</style>