<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.rname"
|
autocomplete="off"
|
></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col span="12">
|
<el-form-item label="开始时间">
|
<el-input
|
disabled="true"
|
v-model="form.time"
|
autocomplete="off"
|
></el-input>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row>
|
<el-col span="24">
|
<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.gathername" autocomplete="off"></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col span="12">
|
<el-form-item label="任务状态">
|
<el-input
|
disabled="true"
|
v-model="form.rtype"
|
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.integral"
|
autocomplete="off"
|
></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col span="12">
|
<el-form-item label="接收人数">
|
<el-input
|
disabled="true"
|
v-model="form.jnum"
|
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-table
|
ref="multipleTable"
|
:data="tableData"
|
tooltip-effect="dark"
|
style="width: 100%"
|
max-height="240"
|
@row-click="rowclick"
|
>
|
<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="tenantName"
|
label="所属队伍"
|
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-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.content"
|
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-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.yj"
|
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-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",
|
},
|
],
|
},
|
tableData: [],
|
multipleSelection: [],
|
ensureNames: "",
|
ensureId: "",
|
baseUrl: "",
|
oldVideoSatart: false,
|
vaddress: null,
|
audios: [],
|
feedbackVideo: "",
|
};
|
},
|
created() {
|
|
this.form = this.$route.query;
|
this.baseUrl = `/map/index.html?openid=task&baid=${this.form.line}`;
|
|
},
|
mounted() {
|
// this.getAudios();
|
this.getImgAndVideo();
|
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);
|
}
|
});
|
|
// if (this.form.jtype != 2) {
|
// this.toggleSelection(arr);
|
// }
|
},
|
methods: {
|
rowclick(row, column, event) {
|
var iframe = window.document.getElementById("mapDiv");
|
row.rwid = this.form.id;
|
iframe.contentWindow.locations(row);
|
},
|
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",
|
});
|
}
|
},
|
|
getList() {
|
var that = this;
|
if (this.form.serid == "" || this.form.serid == null){
|
return;
|
}
|
axios({
|
method: "get",
|
url: "/api/taskqd/queryReceiver",
|
params: {
|
serid: this.form.serid,
|
},
|
}).then((res) => {
|
var i = 0;
|
res.data.data.forEach((item) => {
|
that.tableData.push({
|
id: item.id,
|
ind: (i += 1),
|
name: item.real_name,
|
phone: item.phone,
|
online_status: item.online_status == 1 ? "在线" : "在线",
|
status: "已抵达",
|
tenantName: item.role_name,
|
});
|
});
|
});
|
},
|
toggleSelection(rows) {
|
if (rows) {
|
rows.forEach((row) => {
|
this.$refs.multipleTable.toggleRowSelection(row);
|
});
|
} else {
|
this.$refs.multipleTable.clearSelection();
|
}
|
},
|
getImgAndVideo() {
|
axios({
|
method: "get",
|
url: "/api/taskfk/list",
|
params: {
|
hdid: this.form.id,
|
},
|
}).then((resdata) => {
|
var res = resdata.data.data.records
|
if (res.length > 0) {
|
this.security = res[0];
|
if (res[0].tpurl != "" && res[0].tpurl!=null){
|
this.imgSrc = res[0].tpurl.split(",");
|
this.srcList = res[0].tpurl.split(",");
|
}
|
if (res[0].spurl!= "" && res[0].spurl!=null){
|
this.feedbackVideo = res[0].spurl;
|
}
|
}
|
});
|
},
|
|
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">
|
|
/deep/ .el-table tbody tr:hover > td {
|
background-color: #1d5ce4 !important
|
}
|
|
.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>
|
