From b8ee36ca182e8cbaf093361adcf0c1da599752e8 Mon Sep 17 00:00:00 2001
From: zengh <123456>
Date: Sat, 13 Mar 2021 16:50:15 +0800
Subject: [PATCH] 解决实时警情弹窗问题
---
src/page/index/logo.vue | 153 +++++++++++++++++++++++++++++---------------------
1 files changed, 88 insertions(+), 65 deletions(-)
diff --git a/src/page/index/logo.vue b/src/page/index/logo.vue
index a4178ac..535443f 100644
--- a/src/page/index/logo.vue
+++ b/src/page/index/logo.vue
@@ -16,59 +16,60 @@
<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>
@@ -76,19 +77,20 @@
<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"
@@ -98,14 +100,14 @@
</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>
@@ -138,21 +140,21 @@
</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: {},
};
},
@@ -176,15 +178,15 @@
});
- },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;
@@ -195,20 +197,20 @@
}, 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',
@@ -217,9 +219,9 @@
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",
@@ -230,10 +232,12 @@
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) {
@@ -244,6 +248,19 @@
});
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;
@@ -251,10 +268,10 @@
}
},
- 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;
@@ -263,10 +280,10 @@
});
- },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 () {
});
@@ -288,7 +305,7 @@
{},
{
params: {
- param: JSON.stringify({ PktType: "GetAccessToken" })
+ param: JSON.stringify({PktType: "GetAccessToken"})
}
}
)
@@ -389,36 +406,36 @@
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>
@@ -427,13 +444,16 @@
.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;
@@ -448,12 +468,14 @@
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;
@@ -479,20 +501,21 @@
}
- .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;
}
--
Gitblit v1.9.3