<template>
|
<el-row>
|
<el-col :span="12">
|
<div style="background: #fff; height: 100%">
|
<el-card class="trackClass" style="overflow-y: auto">
|
<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-card>
|
<el-form
|
:model="form"
|
label-position="right"
|
size="mini"
|
class="policeForm"
|
label-width="100px"
|
style="
|
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.alarmType"
|
autocomplete="off"
|
></el-input>
|
</el-form-item>
|
</el-col>
|
<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-col span="24">
|
<el-form-item label="备注">
|
<el-input v-model="form.bz" autocomplete="off"></el-input>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row>
|
<el-col span="12">
|
<el-form-item label="地址">
|
<el-input
|
v-model="form.place"
|
autocomplete="off"
|
></el-input>
|
</el-form-item>
|
</el-col>
|
<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-row>
|
<el-row>
|
<el-col span="12">
|
<avue-form
|
:option="securityArritem"
|
v-model="form"
|
></avue-form>
|
</el-col>
|
<!-- <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-row>
|
</el-form>
|
|
<!-- <div
|
class="grid-content bg-purple-light"
|
style="text-align: center"
|
>
|
<el-button @click="onSubmit()" type="primary">派发</el-button>
|
</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-card>
|
<el-form
|
:model="form"
|
label-position="right"
|
size="mini"
|
label-width="100px"
|
style="
|
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.baid"
|
autocomplete="off"
|
></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col span="12">
|
<el-form-item label="人员名称">
|
<el-input
|
disabled="true"
|
v-model="form.baname"
|
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.baphone"
|
autocomplete="off"
|
></el-input>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
</el-form>
|
</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-order avue-group__icon"></i>
|
<h1 class="avue-group__title">任务反馈</h1>
|
</div>
|
</div>
|
</div>
|
|
<el-card>
|
<el-input
|
disabled="true"
|
type="textarea"
|
v-model="security.result"
|
autocomplete="off"
|
></el-input>
|
</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-camera-solid avue-group__icon"></i>
|
<h1 class="avue-group__title">现场图片</h1>
|
</div>
|
</div>
|
</div>
|
|
<el-card class="scene-image-box">
|
<el-image
|
v-for="(item, index) in imgSrc"
|
:key="index"
|
:src="item"
|
:preview-src-list="srcList"
|
v-show="imgSrc.length > 0"
|
></el-image>
|
<span v-show="imgSrc.length == 0">暂无现场图片</span>
|
</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-video-camera-solid avue-group__icon"></i>
|
<h1 class="avue-group__title">现场视频</h1>
|
</div>
|
</div>
|
</div>
|
|
<el-card>
|
<video
|
:src="feedbackVideo"
|
style="width: 200px; height: 200px; object-fit: fill"
|
controls
|
v-show="feedbackVideo != ''"
|
></video>
|
<span v-show="feedbackVideo == ''">暂无现场视频</span>
|
</el-card>
|
</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"
|
loop
|
autoplay="autoplay"
|
id="old_video"
|
style="width: 100%; height: 100%; object-fit: fill"
|
controls
|
v-show="vaddress != ''"
|
></video>
|
<span v-show="vaddress == ''">暂无历史视频</span>
|
</el-dialog>
|
</el-col>
|
</el-row>
|
</template>
|
|
<script>
|
import axios from "axios";
|
import { getList, getclient } from "@/api/real/real";
|
import { update } from "@/api/real/real";
|
|
export default {
|
inject: ["reload"],
|
data() {
|
return {
|
flag: true,
|
selectOptions: [],
|
receivingList: [],
|
security: {},
|
imgSrc: [],
|
srcList: [],
|
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",
|
},
|
],
|
},
|
securityArritem: {
|
menuBtn: false,
|
column: [
|
{
|
label: "接收人",
|
prop: "securityArr",
|
type: "tree",
|
multiple: true,
|
leafOnly: "",
|
span: 24,
|
dicUrl: "/api/catalogs/catalogs/getBigTree",
|
props: {
|
label: "title",
|
},
|
rules: [
|
{
|
required: true,
|
message: "请选择接收人",
|
trigger: "blur",
|
},
|
],
|
},
|
],
|
},
|
tableData: [],
|
multipleSelection: [],
|
ensureNames: "",
|
ensureId: "",
|
baseUrl: "",
|
oldVideoSatart: false,
|
vaddress: null,
|
audios: [],
|
feedbackVideo: "",
|
};
|
},
|
created() {
|
|
this.form = this.$route.query;
|
if (
|
!(
|
this.form.securityArr &&
|
this.form.securityArr != null &&
|
this.form.securityArr != undefined &&
|
this.form.securityArr.length > 0
|
)
|
) {
|
this.form.securityArr = [];
|
}
|
this.updatedPageData();
|
this.vaddress = this.form.vaddress;
|
|
this.getReceivingAlarm();
|
if (this.form.alarmType == "巡逻任务"){
|
this.baseUrl = `/map/index.html?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}&baid=${this.form.xllx}`;
|
}else{
|
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.getAudios();
|
this.getImgAndVideo();
|
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);
|
}
|
});
|
|
if (this.form.jtype != 2) {
|
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() {
|
var that = this;
|
|
var userId = JSON.parse(
|
window.localStorage.getItem("洪城义警后台管理系统-userInfo")
|
).content.nick_name;
|
|
if (that.form.securityArr != null && that.form.securityArr != "") {
|
that.form.jtype = "1";
|
if (typeof that.form.securityArr != "string") {
|
var security = "";
|
that.form.securityArr.forEach((item) => {
|
security = security + item + ",";
|
});
|
that.form.securityArr = security.substring(0, security.length - 1);
|
}
|
|
if (that.form.securityArr == "" || that.form.securityArr == null) {
|
that.form.jtype = "0";
|
that.form.alarmPeople = "";
|
} else {
|
that.form.jtype = "1";
|
//已派发保安
|
that.form.alarmPeople = userId;
|
}
|
|
axios({
|
url: "/api/alarm/alarm/submit",
|
method: "post",
|
data: that.form,
|
}).then((resdata) => {
|
that.$message({
|
message: "派遣完成",
|
type: "success",
|
});
|
});
|
} else {
|
that.$message({
|
message: "未选择保安，请重试",
|
type: "warning",
|
});
|
}
|
},
|
|
getReceivingAlarm() {
|
axios.get(`/api/operation/list?jid=${this.form.id}`).then((res) => {
|
this.receivingList = res.data.data.records;
|
});
|
},
|
|
getList() {
|
var that = this;
|
},
|
|
handleSelectionChange(val) {
|
this.ensureNames = "";
|
this.ensureId = "";
|
val.forEach((item, index) => {
|
this.ensureId += item.id;
|
this.ensureId += ",";
|
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();
|
}
|
},
|
|
getAudios() {
|
axios({
|
method: "get",
|
url: "/api/avideo/list",
|
params: {
|
jid: this.form.id,
|
},
|
}).then((resdata) => {
|
if (resdata.data.data.records.length > 0)
|
this.audios = resdata.data.data.records;
|
});
|
},
|
getImgAndVideo() {
|
axios({
|
method: "post",
|
url: "/api/feedback/feedback/selectFeedEdit",
|
params: {
|
jid: this.form.id,
|
},
|
}).then((resdata) => {
|
if (resdata.data.data.length > 0) {
|
if (resdata.data.data[0].List.length > 0)
|
this.security = resdata.data.data[0].List[0];
|
if (resdata.data.data[0].tp.length > 0) {
|
this.imgSrc = resdata.data.data[0].tp;
|
this.srcList = resdata.data.data[0].tp;
|
}
|
if (resdata.data.data[0].sp.length > 0) {
|
this.feedbackVideo = resdata.data.data[0].sp[0];
|
}
|
}
|
});
|
},
|
|
oldOpenVideo() {
|
getclient(this.form.id).then((res) => {
|
if (res.data.data.vaddress != "") {
|
this.vaddress = res.data.data.vaddress;
|
}
|
this.oldVideoSatart = true;
|
});
|
},
|
|
updatedPageData() {
|
var that = this;
|
axios({
|
method: "get",
|
url: "/api/alarm/alarm/page",
|
params: {
|
id: that.form.id,
|
},
|
}).then(function (res) {
|
that.form = res.data.data.records[0];
|
if (
|
!(
|
that.form.securityArr &&
|
that.form.securityArr != null &&
|
that.form.securityArr != undefined &&
|
that.form.securityArr.length > 0
|
)
|
) {
|
that.form.securityArr = [];
|
}
|
that.getList(); //报错deptId格式不对liu.2021.5.7
|
});
|
},
|
},
|
};
|
</script>
|
|
<style scoped lang="scss">
|
.el-col {
|
height: calc(100% - 5px);
|
}
|
|
.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;
|
}
|
}
|
|
.audios-box,
|
.scene-image-box {
|
line-height: 32px !important;
|
height: auto;
|
max-height: 200px;
|
overflow-y: auto;
|
|
.el-card__body {
|
display: flex;
|
padding: 0 10px !important;
|
flex-wrap: wrap;
|
justify-content: center;
|
align-items: center;
|
|
.x-audio-wrap.inline {
|
margin: 10px;
|
}
|
|
.el-image {
|
margin: 10px;
|
width: 160px;
|
height: 80px;
|
}
|
}
|
}
|
|
#old_video::-webkit-media-controls-timeline {
|
display: block;
|
}
|
</style>
|
