实时警情弹窗功能

zengh

2021-01-29 f24c29546802a3372a9a50eb2420e3b1323710a4

实时警情弹窗功能

 src/page/index/logo.vue

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

    <div>
      <el-dialog title="警情处置" :visible.sync="dialogTableVisible" append-to-body="true">
        <el-form :model="form" label-position="right" size="mini" label-width="100px">
          <el-row>
            <el-col span="12">
              <el-form-item label="报警人" >
                <el-input disabled="true" v-model="form.alarmPeople" autocomplete="off"></el-input>
              </el-form-item>
            </el-col>
            <el-col span="12">
              <el-form-item label="联系电话" >
                <el-input disabled="true" v-model="form.phoneNumber" autocomplete="off"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-dialog>
    </div>
  </div>
</template>

@@ -21,13 +40,49 @@
export default {
  name: "logo",
  data() {
    return {};
    return {
      dialogTableVisible:false,
      deviceId:null,
      form: {},
    };
  },
  created() {},
  created() {
    this.getData();
  },
  computed: {
    ...mapGetters(["website", "keyCollapse"])
  },
  methods: {}
  methods: {
    getData() {
      var that = this;

      axios({
        url: 'http://192.168.0.103:1888/api/blade-jfpts/alarm/alarm/page?current=1&size=1',
        method: 'get',
      }).then(function (response) {
        that.deviceId = response.data.data.records[0].id;
        //获得最新ID，开启实时报警循环
        that.layerRealtime();
      });


    },layerRealtime(){
      var that = this;
      window.clearTimeout(window.realTimeQuery);
      window.realTimeQuery = setInterval(function () {
        axios({
          url: 'http://192.168.0.103:1888/api/blade-jfpts/alarm/alarm/selecttx?id='+that.deviceId,
          method: 'post',
        }).then(function (response) {
          if (response.data.data.length > 0){
            that.deviceId = response.data.data.records[0].id;
          }
        });

        //that.dialogTableVisible = true;
      }, 5000);
    }
  }
};
</script>

@@ -70,4 +125,4 @@
    color: #fff;
  }
}
</style>
</style>

 src/views/home/home.vue

@@ -11,17 +11,20 @@
    },
    data() {
      return {
        dialogTableVisible:false,
        form: {},
      }
    },
    methods: {
      getData() {

        window.clearTimeout(window.realTimeQuery);

        window.realTimeQuery = setInterval(function () {
          console.log("222222222222");
        }, 3000);
      }
      // getData() {
      //   var that = this;
      //
      //   window.clearTimeout(window.realTimeQuery);
      //
      //   window.realTimeQuery = setInterval(function () {
      //     //that.dialogTableVisible = true;
      //   }, 3000);
      // }
    }
  }
</script>
@@ -38,4 +41,5 @@
    height: 100%;
    padding: 0px 5px !important;
  }

</style>

 src/views/realTimePolice/real.vue

@@ -29,7 +29,7 @@
        </el-button>
      </template>

      <template slot="menuRight">
      <template slot="menuLeft">
        <el-button size="small"
                   type="primary"
                   icon="el-icon-search"
@@ -133,6 +133,7 @@
              <el-date-picker
                v-model="form.czTime"
                type="datetime"
                value-format="yyyy-MM-dd hh:mm:ss"
                placeholder="选择日期时间">
              </el-date-picker>
            </el-form-item>
@@ -148,8 +149,8 @@
            <el-form-item >
              <el-button type="success">一件呼叫</el-button>
              <el-button type="success">视频对讲</el-button>
              <el-button type="primary">生成警单</el-button>
              <el-button type="warning">警情撤销</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>
@@ -577,6 +578,75 @@
      handleManage(row){
        this.form = row;
        this.dialogTableVisible = true;
      },
      generate(row){
        var that = this;
        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.onLoad(that.page, that.query);
        });


      },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 () {
          that.onLoad(that.page, that.query);
        });
      }
    }
  };