<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"
|
@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"
|
size="small"
|
icon="el-icon-delete"
|
plain
|
v-if="permission.real_delete"
|
@click="handleDelete"
|
>删 除
|
</el-button>
|
</template>
|
|
<template slot="menuLeft">
|
<el-button
|
v-bind:class=" activeClass==1 ? 'btn-color' : '' "
|
size="small"
|
@click="getBZdata(1)"
|
>本周
|
</el-button>
|
<el-button
|
v-bind:class=" activeClass==2 ? 'btn-color' : '' "
|
size="small"
|
@click="getBYdata(2)"
|
>本月
|
</el-button>
|
<el-button
|
v-bind:class=" activeClass==3 ? 'btn-color' : '' "
|
size="small"
|
@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
|
icon="el-icon-edit"
|
:size="size"
|
:type="type"
|
@click.stop="handleManage(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
|
title="警情核实"
|
:visible.sync="dialogTableVisible"
|
append-to-body="true"
|
@close="innerVisibleVideo = false"
|
>
|
<el-dialog
|
class="old-video-dialog"
|
:modal="false"
|
width="100%"
|
title="历史视频"
|
:visible.sync="innerVisibleVideo"
|
:close-on-press-escape="false"
|
append-to-body
|
@opened="openOldVideoBox"
|
@close="closeOldVideoBox"
|
>
|
<video
|
src=""
|
id="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">
|
<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.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.district"
|
autocomplete="off"
|
></el-input>
|
</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.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.jjTime"
|
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="queryOldVideo(form)"
|
>查看视频
|
</el-button
|
>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row>
|
<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-date-picker
|
v-model="form.czTime"
|
type="datetime"
|
value-format="yyyy-MM-dd hh:mm:ss"
|
placeholder="选择日期时间"
|
>
|
</el-date-picker>
|
</el-form-item>
|
</el-col>
|
<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 :offset="4">
|
<el-form-item>
|
<el-button
|
:class="{ active: isActive }"
|
type="success"
|
@click.stop="aKeyToCall($event, form)"
|
>一键呼叫
|
</el-button
|
>
|
<el-button type="success">视频对讲</el-button>
|
<el-button type="primary" @click.stop="generate(form)"
|
>生成警单
|
</el-button
|
>
|
<el-button type="warning" @click.stop="revoke(form)"
|
>警情撤销
|
</el-button
|
>
|
<el-button type="danger">推送110</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,
|
innerVisibleVideo: false,
|
activeClass: -1,
|
form: {},
|
query: {},
|
dateTime: [],
|
loading: true,
|
page: {
|
pageSize: 10,
|
currentPage: 1,
|
total: 0
|
},
|
selectionList: [],
|
option: {
|
height: "auto",
|
indexLabel: "序号",
|
calcHeight: 30,
|
labelWidth: "100",
|
size: "mini",
|
menuWidth: 240,
|
dialogWidth: 950,
|
tip: false,
|
searchShow: true,
|
searchMenuSpan: 3,
|
border: true,
|
index: true,
|
viewBtn: true,
|
selection: false,
|
dialogClickModal: false,
|
column: [
|
{
|
label: "警情类型",
|
prop: "waringType",
|
search: true,
|
searchSpan: 3,
|
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: 130,
|
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: "content"
|
},
|
{
|
label: "报警人",
|
prop: "galarmPeople"
|
},
|
{
|
label: "联系电话",
|
prop: "phoneNumber",
|
width: 130
|
},
|
{
|
label: "接警人",
|
prop: "alarmPeople"
|
},
|
{
|
label: "接警时间",
|
type: "datetime",
|
format: "yyyy-MM-dd HH:mm:ss",
|
valueFormat: "yyyy-MM-dd HH:mm:ss",
|
width: 130,
|
prop: "jjTime"
|
},
|
{
|
label: "事发地址",
|
width: 200,
|
prop: "place"
|
},
|
{
|
label: "设备编号",
|
search: true,
|
searchSpan: 3,
|
width: 130,
|
prop: "deviceNumber"
|
},
|
{
|
label: "生成警单",
|
search: true,
|
searchSpan: 2,
|
slot: true,
|
searchPlaceholder: " ",
|
prop: "jtype",
|
type: "select",
|
className: "jtypeClass",
|
dicData: [
|
{
|
label: "否",
|
value: "0"
|
},
|
{
|
label: "是",
|
value: "1"
|
}
|
]
|
},
|
{
|
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"
|
},
|
{
|
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"
|
},
|
{
|
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"
|
},
|
{
|
label: "警情状态",
|
searchSpan: 3,
|
prop: "cid",
|
slot: true,
|
type: "select",
|
dicData: [
|
{
|
label: "事件发生",
|
value: '1'
|
},
|
{
|
label: "事件恢复",
|
value: '3'
|
}
|
],
|
},
|
]
|
},
|
data: [],
|
isActive: false,
|
recorder: null
|
};
|
|
},
|
computed: {
|
...mapGetters(["permission", "flowRoutes"]),
|
permissionList() {
|
return {
|
addBtn: this.vaildData(this.permission.real_add, false),
|
viewBtn: this.vaildData(null, false),
|
delBtn: this.vaildData(this.permission.real_delete, false),
|
editBtn: this.vaildData(this.permission.real_edit, false)
|
};
|
},
|
ids() {
|
let ids = [];
|
this.selectionList.forEach(ele => {
|
ids.push(ele.id);
|
});
|
return ids.join(",");
|
}
|
},
|
created() {
|
this.dateTime = this.getDate();
|
|
this.recorder = new Recorder({
|
sampleBits: 16, // 采样位数，支持 8 或 16，默认是16
|
sampleRate: 16000, // 采样率，支持 11025、16000、22050、24000、44100、48000，根据浏览器默认值，我的chrome是48000
|
numChannels: 1 // 声道，支持 1 或 2， 默认是1
|
// compiling: false,(0.x版本中生效,1.x增加中) // 是否边录边转换，默认是false
|
});
|
},
|
methods: {
|
rowSave(row, done, loading) {
|
add(row).then(
|
() => {
|
this.onLoad(this.page);
|
this.$message({
|
type: "success",
|
message: "操作成功!"
|
});
|
done();
|
},
|
error => {
|
window.console.log(error);
|
loading();
|
}
|
);
|
},
|
rowUpdate(row, index, done, loading) {
|
row.coordinate = "";
|
update(row).then(
|
() => {
|
this.onLoad(this.page);
|
this.$message({
|
type: "success",
|
message: "操作成功!"
|
});
|
done();
|
},
|
error => {
|
window.console.log(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 = -1;
|
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 (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;
|
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();
|
|
return {
|
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"
|
}
|
};
|
},
|
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 == "1") {
|
return {
|
color: "#15a2fe"
|
};
|
} else {
|
return {
|
color: "#ff2727"
|
};
|
}
|
},
|
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.dialogTableVisible = true;
|
},
|
generate(row) {
|
var that = this;
|
if (row.czTime == "" || row.czTime == null) {
|
this.$message({
|
message: "请选择处置时间",
|
type: "warning"
|
});
|
} else {
|
axios({
|
url:
|
"/api/blade-jfpts/jingdan/jingdan/submit",
|
method: "post",
|
data: {
|
rName: row.rname,
|
galarmPeople: row.galarmPeople,
|
phoneNumber: row.phoneNumber,
|
place: row.place,
|
content: row.content,
|
galarmTime: row.alarmTime,
|
waringType: row.waringType,
|
deviceNumber: row.deviceNumber,
|
type: "0",
|
handleP: null,
|
handleTime: null,
|
handName: null,
|
level: row.level,
|
coordinate: null,
|
jd: row.jd,
|
wd: row.wd,
|
addvcd: row.district,
|
czTime: row.czTime,
|
jjTime: row.jjTime,
|
bz: row.bz
|
}
|
})
|
.then(function (response) {
|
that.$message({
|
message: "生成警单成功",
|
type: "success"
|
});
|
|
that.updateJtyep(row);
|
that.dialogTableVisible = false;
|
that.$router.push({ path: "/distribution/index", query: row });
|
|
})
|
.catch(function (error) {
|
that.dialogTableVisible = false;
|
});
|
}
|
},
|
revoke(row) {
|
var that = this;
|
axios({
|
url:
|
"/api/blade-jfpts/alarm/alarm/deletejj?id=" +
|
row.id,
|
method: "post"
|
}).then(function () {
|
that.dialogTableVisible = false;
|
that.onLoad(that.page, that.query);
|
});
|
},
|
updateJtyep(row) {
|
var that = this;
|
axios({
|
url:
|
"/api/blade-jfpts/alarm/alarm/updateJtype?id=" +
|
row.id +
|
"&czTime=" +
|
row.czTime +
|
"&bz=" +
|
row.bz,
|
method: "post"
|
}).then(function () {
|
that.onLoad(that.page, that.query);
|
});
|
},
|
|
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
|
};
|
},
|
queryOldVideo(data) {
|
var newAxios = axios.create({
|
baseURL: "http://36.134.81.48:18000",
|
withCredentials: false,
|
headers: {
|
"Content-type": "application/x-www-form-urlencoded"
|
}
|
});
|
|
var time = this.beginTimeOrEndTime(data.alarmTime);
|
|
newAxios
|
.post(
|
"/api_control",
|
{},
|
{
|
params: {
|
param: JSON.stringify({PktType: "GetAccessToken"})
|
}
|
}
|
)
|
.then(res => {
|
newAxios
|
.get(
|
`/GetPlayUrl?deviceCode=${data.channelNumber}&chl=${data.serialNumber}`
|
)
|
.then(result => {
|
this.innerVisibleVideo = true;
|
|
this.videoSource = result.data.data.m3u8;
|
});
|
|
// newAxios
|
// .post(
|
// "/api_control",
|
// {},
|
// {
|
// params: {
|
// param: JSON.stringify({
|
// PktType: "RemotePlayback",
|
// accessToken: res.data.data.accessToken,
|
// deviceCode: "001231409472",
|
// startTime: "20210130150000",
|
// endTime: "20210130160000",
|
// chl: data.serialNumber
|
// })
|
// }
|
// }
|
// )
|
// .then(result => {
|
|
// this.innerVisibleVideo = true;
|
|
// this.videoSource = result.data.data.m3u8;
|
|
// });
|
});
|
},
|
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.getAttribute("src") != "") {
|
dom.pause();
|
|
dom.setAttribute("src", "");
|
|
this.hls.destroy();
|
}
|
},
|
aKeyToCall(e, form) {
|
var newCallAxios = axios.create({
|
baseURL: "http://36.134.81.48:18000",
|
withCredentials: false,
|
headers: {
|
"Content-Type": "application/json;"
|
}
|
});
|
|
// 一键呼叫相关函数
|
if (this.isActive == true) {
|
this.isActive = false;
|
|
newCallAxios
|
.post(
|
`/api_control`,
|
{},
|
{
|
params: {
|
param: {PktType: "GetAccessToken"}
|
}
|
}
|
)
|
.then(result => {
|
var formData = new FormData();
|
var blob = this.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);
|
|
document
|
.getElementById("real_audio")
|
.setAttribute("src", URL.createObjectURL(blob));
|
|
this.recorder.play();
|
|
newCallAxios
|
.post(`/api_control`, blob, {
|
params: {
|
param: {
|
PktType: "Talk",
|
accessToken: result.data.data.accessToken,
|
deviceCode: form.channelNumber
|
}
|
}
|
})
|
.then(result => {
|
});
|
});
|
} else {
|
this.isActive = true;
|
|
Recorder.getPermission().then(() => {
|
this.recorder.start().then(() => {
|
// 开始录音
|
});
|
});
|
}
|
}
|
}
|
};
|
</script>
|
|
<style>
|
|
.el-card__body .jtypeClass{
|
width: 10%;
|
}
|
|
.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: 0px !important;
|
padding-right: 0px !important;
|
}
|
.el-dialog .cityClass3 {
|
width: 110px;
|
padding-left: 0px !important;
|
padding-right: 0px !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;
|
}
|
|
.el-button.btn-color {
|
color: rgb(255, 255, 255);
|
background-color: rgb(64, 158, 255);
|
border-color: rgb(64, 158, 255);
|
}
|
|
</style>
|
