/*
|
* @Author: Morpheus
|
* @Date: 2021-03-17 15:21:33
|
* @Last Modified by: Morpheus
|
* @Last Modified time: 2021-04-07 17:36:33
|
*/
|
<template>
|
<basic-container>
|
<avue-crud
|
:option="option"
|
:table-loading="loading"
|
:data="data"
|
:page.sync="page"
|
ref="crud"
|
@row-del="rowDel"
|
v-model="form"
|
:permission="permissionList"
|
@row-update="rowUpdate"
|
@row-save="rowSave"
|
:before-open="beforeOpen"
|
:row-style="rowStyle"
|
row-class-name="tabFontSize"
|
@search-change="searchChange"
|
@search-reset="searchReset"
|
@selection-change="selectionChange"
|
@current-change="currentChange"
|
@size-change="sizeChange"
|
@refresh-change="refreshChange"
|
@on-load="onLoad"
|
>
|
<template slot="menuLeft">
|
<el-button
|
type="danger"
|
v-show="true"
|
size="mini"
|
icon="el-icon-delete"
|
plain
|
v-if="permission.real_delete"
|
@click="handleDelete"
|
>删 除
|
</el-button>
|
</template>
|
|
<template slot="menuLeft">
|
<el-button
|
v-bind:class="activeClass == 0 ? 'btn-color' : ''"
|
size="mini"
|
@click="getBRdata(0)"
|
>本日
|
</el-button>
|
<el-button
|
v-bind:class="activeClass == 1 ? 'btn-color' : ''"
|
size="mini"
|
@click="getBZdata(1)"
|
>本周
|
</el-button>
|
<el-button
|
v-bind:class="activeClass == 2 ? 'btn-color' : ''"
|
size="mini"
|
@click="getBYdata(2)"
|
>本月
|
</el-button>
|
<el-button
|
v-bind:class="activeClass == 3 ? 'btn-color' : ''"
|
size="mini"
|
@click="getQBdata(3)"
|
>全部
|
</el-button>
|
</template>
|
|
<template slot-scope="{ row }" slot="jtype">
|
<el-tag
|
>{{
|
row.jtype == "0" ? "未处理" : row.jtype == "1" ? "处理中" : "已处理"
|
}}
|
</el-tag>
|
</template>
|
<template slot-scope="{ row }" slot="cid">
|
<el-tag
|
>{{
|
row.cid == "1" ? "事件发生" : row.cid == "3" ? "是" : "事件恢复"
|
}}
|
</el-tag>
|
</template>
|
|
<template slot-scope="{ type, size, row }" slot="menu">
|
<el-button
|
icon="el-icon-s-order"
|
:size="size"
|
:type="type"
|
@click.stop="handleHistory(row)"
|
>历史
|
</el-button>
|
<el-button
|
icon="el-icon-video-camera-solid"
|
:size="size"
|
:type="type"
|
@click.stop="handleStart(row)"
|
>视频
|
</el-button>
|
<el-button
|
v-if="row.jtype == 0 || row.jtype == ''"
|
icon="el-icon-edit"
|
:size="size"
|
:type="type"
|
@click.stop="handleManage(row)"
|
>核实
|
</el-button>
|
<el-button
|
v-if="row.jtype != 0 && row.jtype != ''"
|
icon="el-icon-s-order"
|
:size="size"
|
:type="type"
|
@click.stop="PoliceTracking(row)"
|
>追踪
|
</el-button>
|
<el-button
|
icon="el-icon-location-outline"
|
:size="size"
|
:type="type"
|
@click.stop="handleMap(row)"
|
>定位
|
</el-button>
|
</template>
|
</avue-crud>
|
|
<el-dialog
|
class="real-dialog"
|
title="警情核实"
|
:visible.sync="dialogTableVisible"
|
:append-to-body="true"
|
:close-on-click-modal="false"
|
@opened="realOpenVideoDialog"
|
@close="(videoConversationReal = false), (oldVideoSatart = false)"
|
>
|
<el-dialog
|
class="ss-video-dialog"
|
:modal="false"
|
width="100%"
|
title="视频通话"
|
:visible.sync="videoConversationReal"
|
:close-on-press-escape="false"
|
append-to-body
|
@opened="openRealVideoBox"
|
@close="closeRealVideoBox"
|
>
|
<video
|
src=""
|
id="real_video_conversation"
|
style="width: 100%; height: 100%; object-fit: fill"
|
controls
|
></video>
|
</el-dialog>
|
|
<el-dialog
|
class="ss-video-dialog"
|
:modal="false"
|
width="100%"
|
title="历史回放"
|
:visible.sync="oldVideoSatart"
|
:close-on-press-escape="false"
|
append-to-body
|
@opened="openOldVideoBox"
|
@close="closeOldVideoBox"
|
>
|
<video
|
src="/oldVideo/ft.mp4"
|
muted="muted"
|
autoplay="autoplay"
|
loop
|
id="real_old_video"
|
style="width: 100%; height: 100%; object-fit: fill"
|
controls
|
></video>
|
</el-dialog>
|
|
<el-form
|
:model="form"
|
label-position="right"
|
size="mini"
|
label-width="100px"
|
>
|
<el-row>
|
<el-col span="12">
|
<audio src="" id="real_audio"></audio>
|
<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-select
|
v-model="peopleName"
|
placeholder="请选择"
|
@change="peopleOrPhone"
|
style="width: 100%"
|
>
|
<el-option
|
v-for="item in peopleList"
|
:key="item.value"
|
:label="item.label"
|
:value="item.label"
|
>
|
</el-option>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
<el-col span="12">
|
<el-form-item label="负责人电话">
|
<el-input
|
disabled="true"
|
v-model="peoplePhone"
|
autocomplete="off"
|
style="width: calc(100% - 110px)"
|
></el-input>
|
<el-button
|
type="success"
|
style="
|
margin-left: 10px;
|
padding: 0px 8px;
|
width: 100px;
|
height: 28px;
|
vertical-align: top;
|
"
|
>
|
<i class="el-icon-phone-outline"></i>
|
联系负责人
|
</el-button>
|
</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.jjTime"
|
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
|
:class="{ active: isActive }"
|
type="success"
|
@click.stop="
|
(videoConversationReal = true), (oldVideoSatart = false)
|
"
|
@mousedown.native="aKeyToCall"
|
@mouseup.native="aKeyStopCall"
|
>视频通话
|
</el-button>
|
<el-button
|
v-show="false"
|
type="primary"
|
@click.stop="
|
(oldVideoSatart = true), (videoConversationReal = false)
|
"
|
>查看历史
|
</el-button>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
|
<el-row>
|
<el-col span="12">
|
<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 class="opt-btn">
|
<el-form-item>
|
<!-- <el-button
|
:class="{ active: isActive }"
|
type="success"
|
@click.stop="aKeyToCall($event, form)"
|
>查看视频
|
</el-button> -->
|
<el-button
|
type="success"
|
@click.stop="updateJtyep(form, 1, '办结')"
|
>办结
|
</el-button>
|
|
<img
|
src="/img/police-num.png"
|
style="margin-top: -20px; height: 80px; vertical-align: middle"
|
alt=""
|
@click.stop="updateJtyep(form, 1, '推送110')"
|
/>
|
|
<el-button
|
type="primary"
|
@click.stop="updateJtyep(form, 1, '派送保安')"
|
>派送保安
|
</el-button>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
</el-form>
|
</el-dialog>
|
|
<el-drawer title="电子地图" append-to-body="true" :visible.sync="showMap">
|
<iframe
|
id="mapDiv"
|
ref="mapDiv"
|
src="/map/index.html?openid=ClientManagement&ISinit=1"
|
frameborder="0"
|
width="100%"
|
height="100%"
|
></iframe>
|
</el-drawer>
|
</basic-container>
|
</template>
|
|
<script>
|
import { getList, remove, update, add, getclient } from "@/api/real/real";
|
import { mapGetters } from "vuex";
|
|
import Hls from "hls.js";
|
|
import axios from "axios";
|
|
import Recorder from "js-audio-recorder";
|
|
export default {
|
data() {
|
return {
|
showMap: false,
|
hls: "",
|
videoSource: "",
|
dialogTableVisible: false,
|
videoConversationReal: false,
|
oldVideoSatart: false,
|
activeClass: 3,
|
form: {},
|
query: {},
|
dateTime: [],
|
loading: true,
|
page: {
|
pageSize: 10,
|
currentPage: 1,
|
total: 0,
|
},
|
selectionList: [],
|
option: {
|
height: "auto",
|
indexLabel: "序号",
|
calcHeight: 30,
|
labelWidth: "100",
|
size: "mini",
|
border: false,
|
stripe: true,
|
menuWidth: 240,
|
dialogWidth: 950,
|
tip: false,
|
searchShow: true,
|
searchMenuSpan: 3,
|
align: "center",
|
index: true,
|
viewBtn: true,
|
selection: true,
|
dialogClickModal: false,
|
column: [
|
{
|
label: "警情类型",
|
prop: "waringType",
|
search: false,
|
searchSpan: 3,
|
width: 85,
|
className: "waringTypeClass",
|
searchPlaceholder: "请选择",
|
type: "select",
|
props: {
|
label: "dictValue",
|
value: "dictValue",
|
},
|
//cascaderItem: ["city", "district"],
|
dicUrl:
|
"/api/blade-system/dict-biz/child-list?parentId=1356523651644043266",
|
},
|
{
|
label: "报警时间",
|
type: "datetime",
|
width: 160,
|
format: "yyyy-MM-dd HH:mm:ss",
|
valueFormat: "yyyy-MM-dd HH:mm:ss",
|
prop: "alarmTime",
|
},
|
{
|
label: "报警时间",
|
prop: "releaseTimeRange",
|
type: "datetime",
|
format: "yyyy-MM-dd",
|
valueFormat: "yyyy-MM-dd",
|
searchRange: true,
|
searchSpan: 5,
|
hide: true,
|
addDisplay: false,
|
editDisplay: false,
|
viewDisplay: false,
|
search: true,
|
rules: [
|
{
|
required: true,
|
message: "请输入时间",
|
trigger: "blur",
|
},
|
],
|
},
|
{
|
label: "主要负责人",
|
prop: "oneContacts",
|
width: 90,
|
},
|
{
|
label: "负责人电话",
|
prop: "onePhone",
|
width: 110,
|
},
|
{
|
label: "报警人",
|
prop: "galarmPeople",
|
width: 90,
|
},
|
{
|
label: "报警人电话",
|
prop: "phoneNumber",
|
width: 130,
|
},
|
{
|
label: "事发地址",
|
prop: "place",
|
},
|
{
|
label: "设备编号",
|
search: true,
|
searchSpan: 3,
|
width: 130,
|
prop: "deviceNumber",
|
},
|
{
|
label: "警情状态",
|
searchSpan: 3,
|
width: 96,
|
search: true,
|
slot: true,
|
searchPlaceholder: "请选择",
|
prop: "jtype",
|
type: "select",
|
dicData: [
|
{
|
label: "未处理",
|
value: "0",
|
},
|
{
|
label: "处理中",
|
value: "1",
|
},
|
{
|
label: "已处理",
|
value: "2",
|
},
|
],
|
},
|
{
|
label: "省份",
|
prop: "province",
|
search: true,
|
searchSpan: 2,
|
searchLabelWidth: 45,
|
placeholder: "省份",
|
type: "select",
|
props: {
|
label: "name",
|
value: "code",
|
},
|
cascaderItem: ["city", "district"],
|
dicUrl: "/api/blade-system/region/select",
|
span: 6,
|
className: "cityClass1",
|
hide: true,
|
addDisplay: true,
|
editDisplay: true,
|
viewDisplay: true,
|
},
|
{
|
label: "地市",
|
prop: "city",
|
type: "select",
|
searchPlaceholder: "地市",
|
placeholder: "地市",
|
searchLabelWidth: 1,
|
searchSpan: 2,
|
search: true,
|
props: {
|
label: "name",
|
value: "code",
|
},
|
dicUrl: "/api/blade-system/region/select?code={{key}}",
|
span: 3,
|
labelWidth: "0",
|
className: "cityClass2",
|
hide: true,
|
addDisplay: true,
|
editDisplay: true,
|
viewDisplay: true,
|
},
|
{
|
label: "区县",
|
searchSpan: 2,
|
searchLabelWidth: 1,
|
searchPlaceholder: "区县",
|
placeholder: "区县",
|
search: true,
|
prop: "district",
|
type: "select",
|
props: {
|
label: "name",
|
value: "code",
|
},
|
dicUrl: "/api/blade-system/region/select?code={{key}}",
|
span: 3,
|
labelWidth: "0",
|
className: "cityClass3",
|
hide: true,
|
addDisplay: true,
|
editDisplay: true,
|
viewDisplay: true,
|
},
|
{
|
label: "接警人",
|
prop: "alarmPeople",
|
width: 90,
|
},
|
{
|
label: "接警时间",
|
type: "datetime",
|
format: "yyyy-MM-dd HH:mm:ss",
|
valueFormat: "yyyy-MM-dd HH:mm:ss",
|
width: 130,
|
prop: "jjTime",
|
hide: true,
|
addDisplay: true,
|
editDisplay: true,
|
viewDisplay: true,
|
},
|
],
|
},
|
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",
|
},
|
],
|
},
|
data: [],
|
isActive: false,
|
recorder: null,
|
peopleList: [],
|
peopleName: "",
|
peoplePhone: "",
|
};
|
},
|
computed: {
|
...mapGetters(["permission", "flowRoutes"]),
|
permissionList() {
|
return {
|
addBtn: this.vaildData(this.permission.real_add, false),
|
viewBtn: this.vaildData(null, false),
|
delBtn: this.vaildData(null, false),
|
editBtn: this.vaildData(null, false),
|
};
|
},
|
ids() {
|
let ids = [];
|
this.selectionList.forEach((ele) => {
|
ids.push(ele.id);
|
});
|
return ids.join(",");
|
},
|
},
|
created() {
|
this.dateTime = this.getDate();
|
},
|
methods: {
|
rowSave(row, done, loading) {
|
add(row).then(
|
() => {
|
this.onLoad(this.page);
|
this.$message({
|
type: "success",
|
message: "操作成功!",
|
});
|
done();
|
},
|
(error) => {
|
loading();
|
}
|
);
|
},
|
rowUpdate(row, index, done, loading) {
|
row.coordinate = "";
|
update(row).then(
|
() => {
|
this.onLoad(this.page);
|
this.$message({
|
type: "success",
|
message: "操作成功!",
|
});
|
done();
|
},
|
(error) => {
|
loading();
|
}
|
);
|
},
|
rowDel(row) {
|
this.$confirm("确定将选择数据删除?", {
|
confirmButtonText: "确定",
|
cancelButtonText: "取消",
|
type: "warning",
|
})
|
.then(() => {
|
return remove(row.id);
|
})
|
.then(() => {
|
this.onLoad(this.page);
|
this.$message({
|
type: "success",
|
message: "操作成功!",
|
});
|
});
|
},
|
searchReset() {
|
this.activeClass = 3;
|
this.query = {};
|
this.onLoad(this.page);
|
},
|
searchChange(params, done) {
|
this.query = params;
|
this.page.currentPage = 1;
|
this.onLoad(this.page, params);
|
done();
|
},
|
selectionChange(list) {
|
this.selectionList = list;
|
},
|
selectionClear() {
|
this.selectionList = [];
|
this.$refs.crud.toggleSelection();
|
},
|
handleDelete() {
|
if (this.selectionList.length === 0) {
|
this.$message.warning("请选择至少一条数据");
|
return;
|
}
|
this.$confirm("确定将选择数据删除?", {
|
confirmButtonText: "确定",
|
cancelButtonText: "取消",
|
type: "warning",
|
})
|
.then(() => {
|
return remove(this.ids);
|
})
|
.then(() => {
|
this.onLoad(this.page);
|
this.$message({
|
type: "success",
|
message: "操作成功!",
|
});
|
this.$refs.crud.toggleSelection();
|
});
|
},
|
beforeOpen(done, type) {
|
if (["edit", "view"].includes(type)) {
|
getclient(this.form.id).then((res) => {
|
this.form = res.data.data;
|
});
|
}
|
done();
|
},
|
currentChange(currentPage) {
|
this.page.currentPage = currentPage;
|
},
|
sizeChange(pageSize) {
|
this.page.pageSize = pageSize;
|
},
|
refreshChange() {
|
this.onLoad(this.page, this.query);
|
},
|
onLoad(page, params = {}) {
|
const { releaseTimeRange } = this.query;
|
let values = {
|
...params,
|
};
|
|
if (
|
this.$route.query.waringType &&
|
this.$route.query != undefined &&
|
this.$route.query != null &&
|
this.$route.query != ""
|
) {
|
if (
|
this.$route.query.status != undefined &&
|
this.$route.query.status != null &&
|
this.$route.query.status == ""
|
) {
|
this.activeClass = this.$route.query.status;
|
this.page.currentPage = 1;
|
if (this.$route.query.status == 0) {
|
params = {
|
waringType: this.$route.query.waringType,
|
beginTime: this.dateTime.day.beginTime,
|
endTime: this.dateTime.day.endTime,
|
};
|
} else if (this.$route.query.status == 1) {
|
params = {
|
waringType: this.$route.query.waringType,
|
beginTime: this.dateTime.week.beginTime,
|
endTime: this.dateTime.week.endTime,
|
};
|
} else if (this.$route.query.status == 2) {
|
params = {
|
waringType: this.$route.query.waringType,
|
beginTime: this.dateTime.month.beginTime,
|
endTime: this.dateTime.month.endTime,
|
};
|
}
|
} else {
|
this.activeClass = 0;
|
this.page.currentPage = 1;
|
params = {
|
waringType: this.$route.query.waringType,
|
beginTime: this.dateTime.day.beginTime,
|
endTime: this.dateTime.day.endTime,
|
};
|
}
|
|
if (
|
this.$route.query.startTime != undefined &&
|
this.$route.query.startTime != null &&
|
this.$route.query.startTime != ""
|
) {
|
params = {
|
waringType: this.$route.query.waringType,
|
beginTime: this.$route.query.startTime,
|
endTime: this.$route.query.endTime,
|
};
|
}
|
}
|
|
if (releaseTimeRange) {
|
values = {
|
...params,
|
beginTime: releaseTimeRange[0],
|
endTime: releaseTimeRange[1],
|
...this.query,
|
};
|
values.releaseTimeRange = null;
|
} else {
|
values = {
|
...params,
|
...this.query,
|
};
|
}
|
|
this.loading = true;
|
getList(page.currentPage, page.pageSize, values).then((res) => {
|
const data = res.data.data;
|
data.records.forEach((item) => {
|
item.waringType == "紧急求救" ? (item.waringType = "一键求助") : "";
|
});
|
this.page.total = data.total;
|
|
data.records.sort((a, b) => {
|
return a.jtype - b.jtype;
|
});
|
|
this.data = data.records;
|
|
this.loading = false;
|
this.selectionClear();
|
});
|
},
|
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,
|
};
|
},
|
getBRdata(e) {
|
this.activeClass = e;
|
var params = {
|
beginTime: this.dateTime.day.beginTime,
|
endTime: this.dateTime.day.endTime,
|
};
|
this.query = params;
|
this.page.currentPage = 1;
|
this.onLoad(this.page, params);
|
},
|
getBZdata(e) {
|
this.activeClass = e;
|
var params = {
|
beginTime: this.dateTime.week.beginTime,
|
endTime: this.dateTime.week.endTime,
|
};
|
this.query = params;
|
this.page.currentPage = 1;
|
this.onLoad(this.page, params);
|
},
|
getBYdata(e) {
|
this.activeClass = e;
|
var params = {
|
beginTime: this.dateTime.month.beginTime,
|
endTime: this.dateTime.month.endTime,
|
};
|
this.query = params;
|
this.page.currentPage = 1;
|
this.onLoad(this.page, params);
|
},
|
getQBdata(e) {
|
this.activeClass = e;
|
var params = {};
|
this.query = params;
|
this.page.currentPage = 1;
|
this.onLoad(this.page, params);
|
},
|
rowStyle({ row, column, rowIndex }) {
|
if (row.jtype == "0") {
|
return {
|
color: "#ff2727",
|
};
|
} else if (row.jtype == "1") {
|
return {
|
color: "#15a2fe",
|
};
|
} else {
|
return {
|
color: "#000000",
|
};
|
}
|
},
|
handleStart(row) {
|
var arr = [];
|
this.$store.state.tags.tagList.forEach((item) => {
|
if (item.label != "视频") {
|
arr.push(item);
|
}
|
});
|
this.$store.state.tags.tagList = arr;
|
this.$router.push({
|
path: `/real/video/`,
|
query: row,
|
});
|
},
|
handleHistory(row) {
|
var arr = [];
|
this.$store.state.tags.tagList.forEach((item) => {
|
if (item.label != "设备历史") {
|
arr.push(item);
|
}
|
});
|
this.$store.state.tags.tagList = arr;
|
this.$router.push({ path: `/real/history/${row.deviceNumber}` });
|
},
|
handleMap(row) {
|
this.showMap = true;
|
this.$nextTick(() => {
|
this.$refs.mapDiv.onload = () => {
|
window.frames[0].init("ClientManagement", { x: row.jd, y: row.wd });
|
};
|
});
|
},
|
handleManage(row) {
|
this.form = row;
|
this.peopleList = [
|
{ label: row.oneContacts, value: row.onePhone },
|
{ label: row.twoContacts, value: row.twoPhone },
|
{ label: row.threeContacts, value: row.threePhone },
|
];
|
this.peopleName = row.oneContacts;
|
this.peoplePhone = row.onePhone;
|
this.dialogTableVisible = true;
|
},
|
updateJtyep(row, jtype, t) {
|
var that = this;
|
|
axios
|
.post(
|
"/api/blade-jfpts/alarm/alarm/updateJtype",
|
{},
|
{
|
params: {
|
jid: row.id,
|
jtype: jtype,
|
rid: row.alarmId,
|
bz: row.bz,
|
snumber: row.alarmId,
|
sname: row.alarmPeople,
|
zc: t,
|
zctime: that.getDate().current,
|
},
|
}
|
)
|
.then(function () {
|
that.dialogTableVisible = false;
|
|
axios({
|
method: "post",
|
url: `/api/blade-jfpts/rvideo/stop`,
|
params: {
|
jid: row.id,
|
},
|
}).then((resdata) => {});
|
|
that.onLoad(that.page, that.query);
|
that.$router.push({
|
path: "/policeTracking/track",
|
query: that.form,
|
});
|
});
|
},
|
beginTimeOrEndTime(time) {
|
var beginTime = new Date(time);
|
|
var endTime = new Date(new Date(time).valueOf() - 1000 * 60 * 60 * 3);
|
|
var beginY = beginTime.getFullYear();
|
|
var beginM =
|
beginTime.getMonth() + 1 < 10
|
? "0" + (beginTime.getMonth() + 1)
|
: beginTime.getMonth() + 1;
|
|
var beginD =
|
beginTime.getDate() < 10
|
? "0" + beginTime.getDate()
|
: beginTime.getDate();
|
|
var beginH =
|
beginTime.getHours() < 10
|
? "0" + beginTime.getHours()
|
: beginTime.getHours();
|
|
var beginm =
|
beginTime.getMinutes() < 10
|
? "0" + beginTime.getMinutes()
|
: beginTime.getMinutes();
|
|
var begins =
|
beginTime.getSeconds() < 10
|
? "0" + beginTime.getSeconds()
|
: beginTime.getSeconds();
|
|
var endY = endTime.getFullYear();
|
|
var endM =
|
endTime.getMonth() + 1 < 10
|
? "0" + (endTime.getMonth() + 1)
|
: endTime.getMonth() + 1;
|
|
var endD =
|
endTime.getDate() < 10 ? "0" + endTime.getDate() : endTime.getDate();
|
|
var endH =
|
endTime.getHours() < 10 ? "0" + endTime.getHours() : endTime.getHours();
|
|
var endm =
|
endTime.getMinutes() < 10
|
? "0" + endTime.getMinutes()
|
: endTime.getMinutes();
|
|
var ends =
|
endTime.getSeconds() < 10
|
? "0" + endTime.getSeconds()
|
: endTime.getSeconds();
|
return {
|
begin: beginY + beginM + beginD + beginH + beginm + begins,
|
end: endY + endM + endD + endH + endm + ends,
|
};
|
},
|
// 视频通话打开关闭事件
|
openRealVideoBox() {
|
var that = this;
|
var newAxios = axios.create({
|
baseURL: "https://web.byisf.com:18000",
|
withCredentials: false,
|
headers: {
|
"Content-type": "application/x-www-form-urlencoded",
|
},
|
});
|
|
//this.form.serialNumber
|
newAxios
|
.post(
|
"/api_control",
|
{},
|
{
|
params: {
|
param: JSON.stringify({ PktType: "GetAccessToken" }),
|
},
|
}
|
)
|
.then((res) => {
|
newAxios
|
.get(
|
`https://web.byisf.com:18000/GetPlayUrl?deviceCode=${that.form.serialNumber}&chl=${this.form.channelNumber}`
|
)
|
.then((result) => {
|
that.videoSource = result.data.data.m3u8;
|
|
if (Hls.isSupported()) {
|
var dom = document.getElementById("real_video_conversation");
|
|
that.hls = new Hls();
|
|
var m3u8Url = decodeURIComponent(that.videoSource);
|
|
that.hls.loadSource(m3u8Url);
|
|
that.hls.attachMedia(dom);
|
|
that.hls.on(Hls.Events.MANIFEST_PARSED, function () {
|
dom.play();
|
});
|
|
that.hls.on(Hls.Events.ERROR, function (event, data) {
|
console.log(data, 4566824159, "视频播放有问题！！！");
|
if (data.fatal) {
|
switch (data.type) {
|
case Hls.ErrorTypes.NETWORK_ERROR:
|
// try to recover network error
|
console.log(
|
"fatal network error encountered, try to recover"
|
);
|
that.hls.startLoad();
|
break;
|
case Hls.ErrorTypes.MEDIA_ERROR:
|
console.log(
|
"fatal media error encountered, try to recover"
|
);
|
that.hls.recoverMediaError();
|
break;
|
default:
|
// cannot recover
|
that.hls.destroy();
|
break;
|
}
|
}
|
});
|
}
|
});
|
});
|
},
|
closeRealVideoBox() {
|
var dom = document.getElementById("real_video_conversation");
|
|
if (dom.getAttribute("src") != "") {
|
dom.pause();
|
|
dom.setAttribute("src", "");
|
|
this.hls.destroy();
|
}
|
},
|
// 历史视频打开关闭事件
|
openOldVideoBox() {
|
var dom = document.getElementById("real_old_video");
|
dom.currentTime = 0;
|
dom.play();
|
},
|
closeOldVideoBox() {
|
var dom = document.getElementById("real_old_video");
|
dom.pause();
|
},
|
|
aKeyToCall() {
|
this.isActive = true;
|
var that = this;
|
if (this.recorder == null) {
|
this.recorder = new Recorder({
|
sampleBits: 16, // 采样位数，支持 8 或 16，默认是16
|
sampleRate: 8000, // 采样率，支持 11025、16000、22050、24000、44100、48000，根据浏览器默认值，我的chrome是48000
|
numChannels: 1, // 声道，支持 1 或 2， 默认是1
|
// compiling: false,(0.x版本中生效,1.x增加中) // 是否边录边转换，默认是false
|
});
|
}
|
|
// 一键呼叫相关函数
|
that.recorder.start().then(
|
() => {
|
// 开始录音
|
},
|
(error) => {
|
// 出错了
|
console.log(`${error.name} : ${error.message}`);
|
}
|
);
|
},
|
|
// 序列号后期待修改
|
aKeyStopCall() {
|
this.isActive = false;
|
var newCallAxios = axios.create({
|
baseURL: "https://web.byisf.com:18000",
|
withCredentials: false,
|
headers: {
|
"Content-Type": "application/json;",
|
},
|
});
|
var that = this;
|
|
newCallAxios
|
.post(
|
`/api_control`,
|
{},
|
{
|
params: {
|
param: { PktType: "GetAccessToken" },
|
},
|
}
|
)
|
.then((result) => {
|
var formData = new FormData();
|
// that.recorder.downloadWAV("新文件");
|
|
var blob = that.recorder.getPCMBlob(); //获取pcm格式音频数据
|
//此处获取到blob对象后需要设置fileName满足当前项目上传需求，其它项目可直接传把blob作为file塞入formData
|
var newbolb = new Blob([blob], { type: "audio/pcm" });
|
var fileOfBlob = new File([newbolb], new Date().getTime() + ".pcm");
|
formData.append("file", fileOfBlob);
|
newCallAxios
|
.post(`/api_control`, blob, {
|
params: {
|
param: {
|
PktType: "Talk",
|
accessToken: result.data.data.accessToken,
|
deviceCode: this.form.serialNumber,
|
},
|
},
|
})
|
.then(() => {
|
that.recorder.destroy().then(function () {
|
that.recorder = null;
|
});
|
});
|
});
|
},
|
|
peopleOrPhone(e) {
|
this.peopleList.forEach((item) => {
|
if (item.label == e) {
|
this.peoplePhone = item.value;
|
}
|
});
|
},
|
PoliceTracking(row) {
|
//警情追踪
|
this.$router.push({ path: "/policeTracking/track", query: row });
|
},
|
realOpenVideoDialog() {
|
Recorder.getPermission().then(() => {});
|
this.videoConversationReal = true;
|
},
|
},
|
};
|
</script>
|
|
<style>
|
.el-card__body .waringTypeClass {
|
width: 12%;
|
}
|
|
/*页面样式*/
|
.el-card__body .cityClass1 {
|
width: 155px;
|
padding-right: 0px !important;
|
}
|
|
.el-card__body .cityClass2 {
|
width: 100px;
|
padding-left: 0px !important;
|
padding-right: 0px !important;
|
}
|
|
.el-card__body .cityClass3 {
|
width: 100px;
|
padding-left: 0px !important;
|
padding-right: 0px !important;
|
}
|
|
/*新增窗体样式*/
|
.el-dialog .cityClass1 {
|
width: 220px;
|
padding-right: 0px !important;
|
}
|
|
.el-dialog .cityClass2 {
|
width: 110px;
|
padding-left: 5px !important;
|
padding-right: 5px !important;
|
}
|
|
.el-dialog .cityClass3 {
|
width: 110px;
|
padding-left: 0px !important;
|
padding-right: 0px !important;
|
}
|
|
.cityClassParams .avue-form__group.avue-form__group--flex {
|
display: flex;
|
justify-content: space-between;
|
}
|
|
.cityClassParams .cityClassSelect {
|
flex: 1;
|
margin: 0 !important;
|
padding-left: 0px !important;
|
padding-right: 0px !important;
|
}
|
|
.cityClassParams .cityClassSelect:nth-child(2) {
|
margin: 0 10px !important;
|
}
|
|
.cityClassParams .cityClassSelect .el-form-item {
|
margin-bottom: 0px !important;
|
}
|
|
.cityClassParams .cityClassSelect .el-form-item .el-input__inner {
|
height: 28px !important;
|
line-height: 28px !important;
|
}
|
|
.cityClass2 div label {
|
display: none;
|
}
|
|
.cityClass3 div label {
|
display: none;
|
}
|
|
.old-video-dialog {
|
position: absolute !important;
|
top: 0 !important;
|
left: auto !important;
|
right: 0px !important;
|
bottom: 0 !important;
|
margin: auto !important;
|
height: 100% !important;
|
width: 476px !important;
|
}
|
|
.old-video-dialog .el-dialog {
|
position: absolute !important;
|
top: 0 !important;
|
left: 0 !important;
|
right: 0 !important;
|
bottom: 0 !important;
|
margin: auto !important;
|
margin-top: 15vh !important;
|
height: 538px;
|
}
|
|
.old-video-dialog .el-dialog .el-dialog__body {
|
height: calc(100% - 54px);
|
box-sizing: border-box;
|
}
|
|
.el-button.active {
|
background: #ff0000 !important;
|
}
|
|
.el-button.btn-color {
|
color: rgb(255, 255, 255);
|
background-color: rgb(64, 158, 255);
|
border-color: rgb(64, 158, 255);
|
}
|
|
.tabFontSize {
|
font-size: 15px;
|
}
|
</style>
|
