<template>
|
<el-row>
|
<el-col :span="12">
|
<div style="background: #fff; height: 100%">
|
<el-card class="trackClass">
|
<div
|
style="margin-top: 20px"
|
role="tab"
|
aria-expanded="true"
|
aria-controls="el-collapse-content-823"
|
aria-describedby="el-collapse-content-823"
|
>
|
<div
|
role="button"
|
tabindex="0"
|
class="el-collapse-item__header focusing is-active"
|
>
|
<div class="avue-group__header avue-group">
|
<i class="el-icon-message-solid avue-group__icon"></i>
|
<h1 class="avue-group__title">警情信息</h1>
|
</div>
|
</div>
|
</div>
|
|
<el-form
|
:model="form"
|
label-position="right"
|
size="mini"
|
class="policeForm"
|
label-width="100px"
|
style="
|
background: #fff;
|
margin-top: 20px;
|
margin-left: 10px;
|
margin-right: 10px;
|
height: calc(100% - 40px);
|
width: calc(100% - 20px);
|
"
|
>
|
<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.phoneNumber"
|
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.oneContacts"
|
autocomplete="off"
|
></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col span="12">
|
<el-form-item label="负责人电话">
|
<el-input
|
disabled="true"
|
v-model="form.onePhone"
|
autocomplete="off"
|
></el-input>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row>
|
<el-col span="12">
|
<el-form-item label="省份" class="cityClassParams">
|
<avue-form :option="itemOption" v-model="form"></avue-form>
|
</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.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.content"
|
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-col span="12">
|
<el-form-item label="历史视频">
|
<el-button type="primary" @click.stop="oldVideoSatart = true"
|
>视频播放
|
</el-button>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
|
<el-row>
|
<el-col span="12">
|
<el-form-item label="备注">
|
<el-input
|
disabled="true"
|
v-model="form.bz"
|
autocomplete="off"
|
></el-input>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
</el-form>
|
|
<div
|
v-if="form.jtype != 2"
|
style="margin-top: 20px"
|
role="tab"
|
aria-expanded="true"
|
aria-controls="el-collapse-content-823"
|
aria-describedby="el-collapse-content-823"
|
>
|
<div
|
role="button"
|
tabindex="0"
|
class="el-collapse-item__header focusing is-active"
|
>
|
<div
|
class="avue-group__header avue-group"
|
style="position: relative"
|
>
|
<i class="el-icon-document avue-group__icon"></i>
|
<h1 class="avue-group__title">人员信息</h1>
|
<el-button
|
@click="onSubmit('通知' + ensureNames, 1), (flag = false)"
|
size="small"
|
style="position: absolute; right: 0"
|
:disabled="!flag"
|
:type="!flag ? 'info' : 'danger'"
|
>通 知</el-button
|
>
|
</div>
|
</div>
|
</div>
|
|
<el-card v-if="form.jtype != 2">
|
<el-table
|
ref="multipleTable"
|
:data="tableData"
|
tooltip-effect="dark"
|
style="width: 100%"
|
@selection-change="handleSelectionChange"
|
max-height="240"
|
>
|
<el-table-column
|
v-if="flag"
|
type="selection"
|
width="55"
|
align="center"
|
>
|
</el-table-column>
|
|
<el-table-column
|
prop="ind"
|
label="序号"
|
width="60"
|
align="center"
|
>
|
</el-table-column>
|
<el-table-column
|
prop="name"
|
label="姓名"
|
width="100"
|
align="center"
|
>
|
</el-table-column>
|
<el-table-column
|
prop="phone"
|
label="联系电话"
|
width="120"
|
align="center"
|
>
|
</el-table-column>
|
<el-table-column
|
prop="online_status"
|
label="在线状态"
|
width="80"
|
align="center"
|
>
|
</el-table-column>
|
<el-table-column
|
prop="tenantName"
|
label="所属部门"
|
align="center"
|
>
|
</el-table-column>
|
<el-table-column
|
prop="roleName"
|
label="所属角色"
|
width="100"
|
align="center"
|
>
|
</el-table-column>
|
</el-table>
|
</el-card>
|
|
<div
|
style="margin-top: 20px"
|
role="tab"
|
aria-expanded="true"
|
aria-controls="el-collapse-content-823"
|
aria-describedby="el-collapse-content-823"
|
>
|
<div
|
role="button"
|
tabindex="0"
|
class="el-collapse-item__header focusing is-active"
|
>
|
<div class="avue-group__header avue-group">
|
<i class="el-icon-document avue-group__icon"></i>
|
<h1 class="avue-group__title">接警信息</h1>
|
</div>
|
</div>
|
</div>
|
|
<el-card class="receiving-alarm-box">
|
<div v-for="(item, index) in receivingList" :key="index">
|
{{ item.zctime + " " + item.sname + " " + item.zc }}
|
</div>
|
</el-card>
|
|
<div
|
style="margin-top: 20px"
|
role="tab"
|
aria-expanded="true"
|
aria-controls="el-collapse-content-823"
|
aria-describedby="el-collapse-content-823"
|
>
|
<div
|
role="button"
|
tabindex="0"
|
class="el-collapse-item__header focusing is-active"
|
>
|
<div class="avue-group__header avue-group">
|
<i class="el-icon-s-custom avue-group__icon"></i>
|
<h1 class="avue-group__title">保安信息</h1>
|
</div>
|
</div>
|
</div>
|
|
<el-form
|
:model="security"
|
label-position="right"
|
size="mini"
|
label-width="100px"
|
style="
|
background: #fff;
|
margin-top: 20px;
|
margin-left: 10px;
|
margin-right: 10px;
|
height: calc(100% - 40px);
|
width: calc(100% - 20px);
|
"
|
>
|
<el-row>
|
<el-col span="12">
|
<el-form-item label="人员编号">
|
<el-input
|
disabled="true"
|
v-model="security.snumber"
|
autocomplete="off"
|
></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col span="12">
|
<el-form-item label="人员名称">
|
<el-input
|
disabled="true"
|
v-model="security.sname"
|
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="security.sex"
|
autocomplete="off"
|
></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col span="12">
|
<el-form-item label="年龄">
|
<el-input
|
disabled="true"
|
v-model="security.age"
|
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="security.phone"
|
autocomplete="off"
|
></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col span="12">
|
<el-form-item label="家庭住址">
|
<el-input
|
disabled="true"
|
v-model="security.address"
|
autocomplete="off"
|
></el-input>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
</el-form>
|
|
<el-row :gutter="20">
|
<el-col :span="16">
|
<div class="grid-content bg-purple"></div>
|
</el-col>
|
<el-col :span="8">
|
<div class="grid-content bg-purple"></div>
|
</el-col>
|
</el-row>
|
|
<div class="demo-image__placeholder">
|
<div
|
role="tab"
|
aria-expanded="true"
|
aria-controls="el-collapse-content-823"
|
aria-describedby="el-collapse-content-823"
|
>
|
<div
|
role="button"
|
tabindex="0"
|
class="el-collapse-item__header focusing is-active"
|
>
|
<div class="avue-group__header avue-group">
|
<i class="el-icon-s-order avue-group__icon"></i>
|
<h1 class="avue-group__title">警情反馈</h1>
|
</div>
|
</div>
|
</div>
|
<el-input
|
disabled="true"
|
type="textarea"
|
v-model="security.snumber"
|
autocomplete="off"
|
></el-input>
|
|
<div class="block">
|
<div
|
style="margin-top: 20px"
|
role="tab"
|
aria-expanded="true"
|
aria-controls="el-collapse-content-823"
|
aria-describedby="el-collapse-content-823"
|
>
|
<div
|
role="button"
|
tabindex="0"
|
class="el-collapse-item__header focusing is-active"
|
>
|
<div class="avue-group__header avue-group">
|
<i class="el-icon-camera-solid avue-group__icon"></i>
|
<h1 class="avue-group__title">现场图片</h1>
|
</div>
|
</div>
|
</div>
|
<div>
|
<el-image
|
:src="src"
|
:preview-src-list="srcList"
|
style="width: 150px; margin-left: 5px"
|
></el-image>
|
<el-image
|
:src="src"
|
:preview-src-list="srcList"
|
style="width: 150px; margin-left: 5px"
|
></el-image>
|
<el-image
|
:src="src"
|
:preview-src-list="srcList"
|
style="width: 150px; margin-left: 5px"
|
></el-image>
|
</div>
|
</div>
|
<div class="block">
|
<div
|
style="margin-top: 20px"
|
role="tab"
|
aria-expanded="true"
|
aria-controls="el-collapse-content-823"
|
aria-describedby="el-collapse-content-823"
|
>
|
<div
|
role="button"
|
tabindex="0"
|
class="el-collapse-item__header focusing is-active"
|
>
|
<div class="avue-group__header avue-group">
|
<i class="el-icon-video-camera-solid avue-group__icon"></i>
|
<h1 class="avue-group__title">现场视频</h1>
|
</div>
|
</div>
|
</div>
|
<div>
|
<el-image :src="src" style="width: 150px; margin-left: 5px">
|
<div slot="placeholder" class="image-slot">
|
加载中<span class="dot">...</span>
|
</div>
|
</el-image>
|
</div>
|
</div>
|
</div>
|
|
<el-row :align="center" style="margin-top: 40px">
|
<el-col :offset="10">
|
<el-button
|
@click="onSubmit('处理完成', 2)"
|
:disabled="form.jtype == 2 ? true : false"
|
:type="form.jtype == 2 ? 'info' : 'danger'"
|
>处理完成</el-button
|
>
|
</el-col>
|
</el-row>
|
</el-card>
|
</div>
|
</el-col>
|
|
<el-col :span="12">
|
<iframe
|
id="mapDiv"
|
ref="mapDiv"
|
:src="baseUrl"
|
frameborder="0"
|
width="100%"
|
height="100%"
|
></iframe>
|
|
<el-dialog
|
class="old-video-dialog-box"
|
width="100%"
|
title="历史回放"
|
:visible.sync="oldVideoSatart"
|
:close-on-press-escape="false"
|
:close-on-click-modal="false"
|
@close="vaddress = ''"
|
append-to-body
|
>
|
<video
|
:src="vaddress"
|
muted="muted"
|
autoplay="autoplay"
|
loop
|
id="old_video"
|
style="width: 100%; height: 100%; object-fit: fill"
|
controls
|
></video>
|
</el-dialog>
|
</el-col>
|
</el-row>
|
</template>
|
|
<script>
|
import axios from "axios";
|
|
export default {
|
inject: ["reload"],
|
data() {
|
return {
|
flag: true,
|
selectOptions: [],
|
receivingList: [],
|
security: {
|
snumber: 20018,
|
sname: "金同涛",
|
sex: "男",
|
age: 23,
|
phone: 1387975426,
|
address: "江西省南昌市西湖区",
|
},
|
src:
|
"https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg",
|
srcList: [
|
"https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg",
|
"https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg",
|
"https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg",
|
],
|
form: {},
|
itemOption: {
|
menuBtn: false,
|
column: [
|
{
|
disabled: true,
|
row: false,
|
prop: "province",
|
type: "select",
|
placeholder: "省份",
|
props: {
|
label: "name",
|
value: "code",
|
},
|
cascaderItem: ["city", "district"],
|
dicUrl: "/api/blade-system/region/select",
|
span: 1,
|
labelWidth: "0",
|
className: "cityClassSelect",
|
},
|
{
|
disabled: true,
|
row: false,
|
prop: "city",
|
type: "select",
|
placeholder: "地市",
|
props: {
|
label: "name",
|
value: "code",
|
},
|
dicUrl: "/api/blade-system/region/select?code={{key}}",
|
span: 1,
|
labelWidth: "0",
|
className: "cityClassSelect",
|
},
|
{
|
disabled: true,
|
row: false,
|
prop: "district",
|
type: "select",
|
placeholder: "区县",
|
props: {
|
label: "name",
|
value: "code",
|
},
|
dicUrl: "/api/blade-system/region/select?code={{key}}",
|
span: 1,
|
labelWidth: "0",
|
className: "cityClassSelect",
|
},
|
],
|
},
|
tableData: [],
|
multipleSelection: [],
|
ensureNames: "",
|
baseUrl: "",
|
oldVideoSatart: false,
|
vaddress: null,
|
};
|
},
|
created() {
|
this.form = this.$route.query;
|
this.vaddress = this.form.vaddress;
|
this.getReceivingAlarm();
|
this.baseUrl = `/map/index.html?ISinit=1&openid=AlertSecurity&id=${this.form.id}&jd=${this.form.jd}&wd=${this.form.wd}&pid=${this.form.deptId}&deptId=${this.form.deptId}&oneId=${this.form.oneId}`;
|
},
|
mounted() {
|
this.getList();
|
|
this.$refs.mapDiv.onload = () => {
|
window.frames[0].init("AlertSecurity", {
|
x: this.form.jd,
|
y: this.form.wd,
|
});
|
};
|
},
|
updated() {
|
var arr = [];
|
this.tableData.forEach((item) => {
|
if (item.id == this.form.oneId) {
|
arr.push(item);
|
}
|
});
|
this.toggleSelection(arr);
|
},
|
methods: {
|
getDate() {
|
// 当前时间
|
var timestamp = Date.parse(new Date());
|
var serverDate = new Date(timestamp);
|
|
// 本周周一的时间
|
var mondayTime =
|
timestamp - (serverDate.getDay() - 1) * 24 * 60 * 60 * 1000;
|
var mondayData = new Date(mondayTime);
|
//年
|
var mondayY = mondayData.getFullYear();
|
//月
|
var mondayM =
|
mondayData.getMonth() + 1 < 10
|
? "0" + (mondayData.getMonth() + 1)
|
: mondayData.getMonth() + 1;
|
//日
|
var mondayD =
|
mondayData.getDate() < 10
|
? "0" + mondayData.getDate()
|
: mondayData.getDate();
|
// 当前时间
|
var currentData = new Date(timestamp);
|
//年
|
var currentY = currentData.getFullYear();
|
//月
|
var currentM =
|
currentData.getMonth() + 1 < 10
|
? "0" + (currentData.getMonth() + 1)
|
: currentData.getMonth() + 1;
|
//日
|
var currentD =
|
currentData.getDate() < 10
|
? "0" + currentData.getDate()
|
: currentData.getDate();
|
//时
|
var currenH =
|
currentData.getHours() < 10
|
? "0" + currentData.getHours()
|
: currentData.getHours();
|
//分
|
var currenM =
|
currentData.getMinutes() < 10
|
? "0" + currentData.getMinutes()
|
: currentData.getMinutes();
|
//秒
|
var currenS =
|
currentData.getSeconds() < 10
|
? "0" + currentData.getSeconds()
|
: currentData.getSeconds();
|
|
return {
|
day: {
|
beginTime: currentY + "-" + currentM + "-" + currentD + " 00:00:00",
|
endTime:
|
currentY +
|
"-" +
|
currentM +
|
"-" +
|
currentD +
|
" " +
|
currenH +
|
":" +
|
currenM +
|
":00",
|
},
|
week: {
|
beginTime: mondayY + "-" + mondayM + "-" + mondayD + " 00:00:00",
|
endTime:
|
currentY +
|
"-" +
|
currentM +
|
"-" +
|
currentD +
|
" " +
|
currenH +
|
":" +
|
currenM +
|
":00",
|
},
|
month: {
|
beginTime: mondayY + "-" + mondayM + "-01 00:00:00",
|
endTime:
|
currentY +
|
"-" +
|
currentM +
|
"-" +
|
currentD +
|
" " +
|
currenH +
|
":" +
|
currenM +
|
":00",
|
},
|
current:
|
currentY +
|
"-" +
|
currentM +
|
"-" +
|
currentD +
|
" " +
|
currenH +
|
":" +
|
currenM +
|
":" +
|
currenS,
|
};
|
},
|
onSubmit(zc, jtype) {
|
var that = this;
|
axios
|
.post(
|
"/api/blade-jfpts/alarm/alarm/updateJtype",
|
{},
|
{
|
params: {
|
jid: this.form.id,
|
jtype: jtype,
|
rid: this.form.alarmId,
|
bz: this.form.bz,
|
snumber: this.form.alarmId,
|
sname: this.form.alarmPeople,
|
zc: zc,
|
zctime: this.getDate().current,
|
},
|
}
|
)
|
.then(function (res) {
|
that.getReceivingAlarm();
|
|
if (jtype == 2) {
|
var arr = [];
|
that.$store.state.tags.tagList.forEach((item) => {
|
if (item.value != that.$store.state.tags.tag.value) {
|
arr.push(item);
|
}
|
});
|
that.$store.state.tags.tagList = arr;
|
that.$router.go(-1);
|
}
|
});
|
},
|
|
getReceivingAlarm() {
|
axios
|
.get(`/api/blade-jfpts/operation/list?jid=${this.form.id}`)
|
.then((res) => {
|
this.receivingList = res.data.data.records;
|
});
|
},
|
|
getList() {
|
var that = this;
|
axios
|
.get(`/api/blade-user/pages?current=1&size=9999&work_status=&deptId=${that.form.deptId}`)
|
.then(function (res) {
|
that.tableData = [];
|
var i = 0;
|
|
res.data.data.records.forEach((item) => {
|
if (item.id == that.form.oneId) {
|
that.tableData.push({
|
id: item.id,
|
ind: (i += 1),
|
name: item.name,
|
phone: item.phone,
|
online_status: item.online_status == 1 ? "在线" : "掉线",
|
roleName: item.roleName + "(负责人)",
|
tenantName: item.tenantName,
|
});
|
}
|
});
|
|
res.data.data.records.forEach((item) => {
|
if (item.roleName == "处警员" && item.id != that.form.oneId) {
|
that.tableData.push({
|
id: item.id,
|
ind: (i += 1),
|
name: item.name,
|
phone: item.phone,
|
online_status: item.online_status == 1 ? "在线" : "掉线",
|
roleName: item.roleName,
|
tenantName: item.tenantName,
|
});
|
}
|
});
|
});
|
},
|
|
handleSelectionChange(val) {
|
this.ensureNames = "";
|
val.forEach((item, index) => {
|
if (index == val.length - 1) {
|
this.ensureNames += item.name;
|
this.ensureNames += "。";
|
} else {
|
this.ensureNames += item.name;
|
this.ensureNames += "、";
|
}
|
});
|
|
this.multipleSelection = val;
|
},
|
|
toggleSelection(rows) {
|
if (rows) {
|
rows.forEach((row) => {
|
this.$refs.multipleTable.toggleRowSelection(row);
|
});
|
} else {
|
this.$refs.multipleTable.clearSelection();
|
}
|
},
|
},
|
};
|
</script>
|
|
<style lang="scss">
|
.el-col {
|
height: 95%;
|
}
|
|
.trackClass {
|
height: 100%;
|
overflow: auto;
|
overflow-x: hidden;
|
}
|
|
.receiving-alarm-box {
|
line-height: 32px !important;
|
height: 200px;
|
overflow-y: auto;
|
.el-card__body {
|
padding: 0 10px !important;
|
}
|
}
|
</style>
|
