| | |
| | | <audio ref='realAudio' loop> |
| | | </audio> |
| | | <div> |
| | | <el-dialog class="real-dialog" title="实时警情" center="true" :visible.sync="dialogTableVisible" top="190px" append-to-body="true" @close='closeDialog'> |
| | | <el-dialog class="real-dialog" title="实时警情" center="true" :visible.sync="dialogTableVisible" top="190px" |
| | | append-to-body="true" @close='closeDialog'> |
| | | <el-form :model="form" label-position="right" size="mini" label-width="100px"> |
| | | <el-row> |
| | | <el-col span="12"> |
| | | <el-form-item label="报警人" > |
| | | <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-form-item label="联系电话"> |
| | | <el-input disabled="true" v-model="form.phoneNumber" autocomplete="off"></el-input> |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | | <el-row> |
| | | <el-col span="12"> |
| | | <el-form-item label="行政区" > |
| | | <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-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-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-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-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-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-form-item label="报警时间"> |
| | | <el-input disabled="true" v-model="form.alarmTime" autocomplete="off"></el-input> |
| | | </el-form-item> |
| | | </el-col> |
| | |
| | | <el-col span="12"> |
| | | <el-form-item label="实时视频"> |
| | | <el-button type="primary" @click.stop="queryOldVideo(form)" |
| | | >查看视频</el-button> |
| | | >查看视频 |
| | | </el-button> |
| | | </el-form-item> |
| | | </el-col> |
| | | |
| | | </el-row> |
| | | <el-row> |
| | | <el-form-item label="报警内容" > |
| | | <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-form-item label="要求处置时间"> |
| | | <el-date-picker |
| | | v-model="form.czTime" |
| | | type="datetime" |
| | |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col span="12"> |
| | | <el-form-item label="备注" > |
| | | <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-form-item> |
| | | <el-button type="success">一键呼叫</el-button> |
| | | <el-button type="success">视频对讲</el-button> |
| | | <el-button type="primary" @click.stop="generate(form)">生成警单</el-button> |
| | |
| | | </div> |
| | | |
| | | |
| | | |
| | | </div> |
| | | </template> |
| | | |
| | | <script> |
| | | import { mapGetters } from "vuex"; |
| | | import {mapGetters} from "vuex"; |
| | | import axios from 'axios' |
| | | import Hls from "hls.js"; |
| | | |
| | | export default { |
| | | name: "logo", |
| | | data() { |
| | | return { |
| | | dialogTableVisible:false, |
| | | dialogTableVisible: false, |
| | | innerVisibleVideo: false, |
| | | deviceId:null, |
| | | deviceId: null, |
| | | form: {}, |
| | | }; |
| | | }, |
| | |
| | | }); |
| | | |
| | | |
| | | },layerRealtime(){ |
| | | }, layerRealtime() { |
| | | var that = this; |
| | | window.clearTimeout(window.realTimeQuery); |
| | | window.realTimeQuery = setInterval(function () { |
| | | axios({ |
| | | url: '/api/blade-jfpts/alarm/alarm/selecttx?id='+that.deviceId, |
| | | url: '/api/blade-jfpts/alarm/alarm/selecttx?id=' + that.deviceId, |
| | | method: 'post', |
| | | }).then(function (response) { |
| | | if (response.data.data.length > 0){ |
| | | if (response.data.data.length > 0) { |
| | | that.deviceId = response.data.data[0].id; |
| | | that.form = response.data.data[0]; |
| | | that.dialogTableVisible = true; |
| | |
| | | }, 5000); |
| | | |
| | | }, |
| | | closeDialog(){ |
| | | closeDialog() { |
| | | //关闭窗口回调,关闭警报 |
| | | this.$refs.realAudio.pause(); |
| | | }, |
| | | generate(row){ |
| | | generate(row) { |
| | | var that = this; |
| | | //关闭窗口回调,关闭警报 |
| | | that.$refs.realAudio.pause(); |
| | | if (row.czTime == "" || row.czTime == null){ |
| | | if (row.czTime == "" || row.czTime == null) { |
| | | this.$message({ |
| | | message: '请选择处置时间', |
| | | type: 'warning' |
| | | }); |
| | | }else{ |
| | | } else { |
| | | axios({ |
| | | url: '/api/blade-jfpts/jingdan/jingdan/submit', |
| | | method: 'post', |
| | |
| | | galarmPeople: row.galarmPeople, |
| | | phoneNumber: row.phoneNumber, |
| | | place: row.place, |
| | | alarmPeople: row.alarmPeople, |
| | | content: row.content, |
| | | alarmTime: row.alarmTime, |
| | | alarmPeople:row.alarmPeople, |
| | | galarmTime: row.alarmTime, |
| | | waringType: row.waringType, |
| | | deviceNumber: row.deviceNumber, |
| | | type: "0", |
| | |
| | | coordinate: null, |
| | | jd: row.jd, |
| | | wd: row.wd, |
| | | addvcd: row.district, |
| | | district: row.district, |
| | | city: row.city, |
| | | province: row.province, |
| | | czTime: row.czTime, |
| | | jjTime: row.jjTime, |
| | | bz: row.bz, |
| | | bz: row.bz |
| | | } |
| | | }) |
| | | .then(function (response) { |
| | |
| | | }); |
| | | that.updateJtyep(row); |
| | | that.dialogTableVisible = false; |
| | | |
| | | var arr = []; |
| | | that.$store.state.tags.tagList.forEach(item => { |
| | | if (item.label != "警情分发处置") { |
| | | arr.push(item); |
| | | } |
| | | }); |
| | | that.$store.state.tags.tagList = arr; |
| | | |
| | | row.type = 0; |
| | | row.id = response.data.data; |
| | | that.$router.push({path: "/distribution/index", query: row}); |
| | | |
| | | }) |
| | | .catch(function (error) { |
| | | that.dialogTableVisible = false; |
| | |
| | | } |
| | | |
| | | }, |
| | | revoke(row){ |
| | | revoke(row) { |
| | | var that = this; |
| | | axios({ |
| | | url: '/api/blade-jfpts/alarm/alarm/deletejj?id='+row.id, |
| | | url: '/api/blade-jfpts/alarm/alarm/deletejj?id=' + row.id, |
| | | method: 'post', |
| | | }).then(function () { |
| | | that.dialogTableVisible = false; |
| | |
| | | }); |
| | | |
| | | |
| | | },updateJtyep(row){ |
| | | }, updateJtyep(row) { |
| | | var that = this; |
| | | axios({ |
| | | url: '/api/blade-jfpts/alarm/alarm/updateJtype?id='+row.id+"&czTime="+row.czTime+"&bz="+row.bz, |
| | | url: '/api/blade-jfpts/alarm/alarm/updateJtype?id=' + row.id + "&czTime=" + row.czTime + "&bz=" + row.bz, |
| | | method: 'post', |
| | | }).then(function () { |
| | | }); |
| | |
| | | {}, |
| | | { |
| | | params: { |
| | | param: JSON.stringify({ PktType: "GetAccessToken" }) |
| | | param: JSON.stringify({PktType: "GetAccessToken"}) |
| | | } |
| | | } |
| | | ) |
| | |
| | | end: endY + endM + endD + endH + endm + ends |
| | | }; |
| | | }, |
| | | openOldVideoBox() { |
| | | if (Hls.isSupported()) { |
| | | openOldVideoBox() { |
| | | if (Hls.isSupported()) { |
| | | var dom = document.getElementById("old_video"); |
| | | |
| | | // if (dom.volume) dom.volume = 1.0; |
| | | |
| | | this.hls = new Hls(); |
| | | |
| | | var m3u8Url = decodeURIComponent(this.videoSource); |
| | | |
| | | this.hls.loadSource(m3u8Url); |
| | | |
| | | this.hls.attachMedia(dom); |
| | | |
| | | this.hls.on(Hls.Events.MANIFEST_PARSED, function () { |
| | | dom.play(); |
| | | }); |
| | | } |
| | | }, |
| | | closeOldVideoBox() { |
| | | var dom = document.getElementById("old_video"); |
| | | |
| | | // if (dom.volume) dom.volume = 1.0; |
| | | if (dom.getAttribute("src") != "") { |
| | | dom.pause(); |
| | | |
| | | this.hls = new Hls(); |
| | | dom.setAttribute("src", ""); |
| | | |
| | | var m3u8Url = decodeURIComponent(this.videoSource); |
| | | |
| | | this.hls.loadSource(m3u8Url); |
| | | |
| | | this.hls.attachMedia(dom); |
| | | |
| | | this.hls.on(Hls.Events.MANIFEST_PARSED, function() { |
| | | dom.play(); |
| | | }); |
| | | } |
| | | }, |
| | | closeOldVideoBox() { |
| | | var dom = document.getElementById("old_video"); |
| | | |
| | | if (dom.getAttribute("src") != "") { |
| | | dom.pause(); |
| | | |
| | | dom.setAttribute("src", ""); |
| | | |
| | | this.hls.destroy(); |
| | | } |
| | | }, |
| | | this.hls.destroy(); |
| | | } |
| | | }, |
| | | } |
| | | }; |
| | | </script> |
| | |
| | | .fade-leave-active { |
| | | transition: opacity 0.2s; |
| | | } |
| | | |
| | | .fade-enter-active { |
| | | transition: opacity 2.5s; |
| | | } |
| | | |
| | | .fade-enter, |
| | | .fade-leave-to { |
| | | opacity: 0; |
| | | } |
| | | |
| | | .avue-logo { |
| | | position: fixed; |
| | | top: 0; |
| | |
| | | box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.15); |
| | | color: rgba(255, 255, 255, 0.8); |
| | | z-index: 1024; |
| | | |
| | | &_title { |
| | | display: block; |
| | | text-align: center; |
| | | font-weight: 300; |
| | | font-size: 20px; |
| | | } |
| | | |
| | | &_subtitle { |
| | | display: block; |
| | | text-align: center; |
| | |
| | | } |
| | | |
| | | |
| | | .real-dialog .el-dialog__header{ |
| | | .real-dialog .el-dialog__header { |
| | | padding-top: 10px; |
| | | background: linear-gradient(45deg, #ff0000, #ff3c3c); |
| | | border-radius: 10px 10px 0 0; |
| | | } |
| | | |
| | | .real-dialog .el-dialog__header .el-dialog__title{ |
| | | .real-dialog .el-dialog__header .el-dialog__title { |
| | | color: white; |
| | | } |
| | | .real-dialog .el-dialog__header .el-dialog__headerbtn{ |
| | | |
| | | .real-dialog .el-dialog__header .el-dialog__headerbtn { |
| | | top: 15px; |
| | | } |
| | | |
| | | .real-dialog .el-dialog{ |
| | | .real-dialog .el-dialog { |
| | | border-radius: 10px 10px 10px 10px; |
| | | } |
| | | |