<template>
|
<div class="study-judge">
|
<!-- <div class="study-judge-header">-->
|
<!-- <span-->
|
<!-- >您有{{ countData.review }}条待审核报警信息,今日立案{{-->
|
<!-- countData.register-->
|
<!-- }}条,再学习{{ countData.study }}条</span-->
|
<!-- >-->
|
<!-- </div>-->
|
<div class="study-judge-main">
|
<!-- <div class="sjm-header">-->
|
<!-- <div class="sjm-header-left">-->
|
<!-- <span class="moni-name">监控点位名称: {{ currentEvent.name }} </span>-->
|
<!-- <span class="moni-area">{{ currentEvent.street }}</span>-->
|
<!-- <span>{{ currentEvent.address }}</span>-->
|
<!-- </div>-->
|
<!-- <div class="sjm-header-right">-->
|
<!-- <el-button size="small" @click="createVideo(currentEvent, 'live')"-->
|
<!-- >实时预览</el-button-->
|
<!-- >-->
|
<!-- <el-button size="small" @click="createVideo(currentEvent, 'playback')"-->
|
<!-- >录像回放</el-button-->
|
<!-- >-->
|
<!-- </div>-->
|
<!-- </div>-->
|
<div class="sjm-content">
|
<div class="sjm-content-left">
|
<!-- <div class="sjm-header-left">-->
|
<!-- <span class="moni-name">监控点位名称: {{ currentEvent.name }} </span>-->
|
<!-- <span class="moni-area">{{ currentEvent.street }}</span>-->
|
<!-- <span>{{ currentEvent.address }}</span>-->
|
<!-- </div>-->
|
<span
|
>您有{{ countData.review }}条待审核报警信息,今日立案{{
|
countData.register
|
}}条,再学习{{ countData.study }}条</span
|
>
|
<div class="sjm-header-left">
|
<span class="moni-name">监控点位名称: {{ currentEvent.name }} </span>
|
<span class="moni-area">{{ currentEvent.street }}</span>
|
<span>{{ currentEvent.address }}</span>
|
</div>
|
<div
|
class="img-item"
|
v-for="(item, index) in imageList"
|
:key="item.id"
|
>
|
<span>报警图片</span>
|
<img :src="item" />
|
<span v-if="index === 0"
|
>报警时间：{{ currentEvent.alarmTime }}</span
|
>
|
</div>
|
<div class="img-item" v-for="item in imageList" :key="item.id">
|
<img :src="item" />
|
</div>
|
<el-form
|
ref="currentEvent"
|
label-width="120px"
|
:model="eventInfoData"
|
:rules="rules"
|
label-position="left"
|
class="left-form">
|
<el-form-item label="事件编号:">
|
<span>{{ currentEvent.code }}</span>
|
</el-form-item>
|
<el-form-item label="事件等级:">
|
<span>{{ currentEvent.grade }}</span>
|
</el-form-item>
|
<el-form-item label="首次报警时间:">
|
<span>{{ currentEvent.alarmTime }}</span>
|
</el-form-item>
|
<el-form-item label="最近报警时间:">
|
<span>{{ currentEvent.currentAlarmTime }}</span>
|
</el-form-item>
|
<el-form-item label="持续时间:">
|
<span>{{ currentEvent.conntinueTime }}</span>
|
</el-form-item>
|
</el-form>
|
</div>
|
<div class="sjm-content-center">
|
<div class="map">
|
<MyMap></MyMap>
|
</div>
|
<!-- <iframe src="https://183.245.159.161:8282/OneMap/index.html#/OneMap?code=2&clientVersion=&skin=white&locale=zh&otherAuthor=allowable"></iframe> -->
|
</div>
|
<div class="sjm-content-right">
|
<div class="card-box">
|
<div class="but-live">
|
<el-button size="small" @click="createVideo(currentEvent, 'live')"
|
>实时预览</el-button
|
>
|
<el-button size="small" @click="createVideo(currentEvent, 'playback')"
|
>录像回放</el-button
|
>
|
</div>
|
<div class="card-header">
|
<span>报警记录--{{ currentEvent.algoName }}</span>
|
</div>
|
<el-form
|
ref="currentEvent"
|
label-width="120px"
|
:model="eventInfoData"
|
:rules="rules"
|
>
|
<!-- <el-form-item label="事件编号:">-->
|
<!-- <span>{{ currentEvent.code }}</span>-->
|
<!-- </el-form-item>-->
|
<!-- <el-form-item label="事件等级:">-->
|
<!-- <span>{{ currentEvent.grade }}</span>-->
|
<!-- </el-form-item>-->
|
<!-- <el-form-item label="首次报警时间:">-->
|
<!-- <span>{{ currentEvent.alarmTime }}</span>-->
|
<!-- </el-form-item>-->
|
<!-- <el-form-item label="最近报警时间:">-->
|
<!-- <span>{{ currentEvent.currentAlarmTime }}</span>-->
|
<!-- </el-form-item>-->
|
<!-- <el-form-item label="持续时间:">-->
|
<!-- <span>{{ currentEvent.conntinueTime }}</span>-->
|
<!-- </el-form-item>-->
|
<el-form-item label="关联店铺" prop="store">
|
<el-select
|
v-model="eventInfoData.store"
|
clearable
|
@change="selectStoreChange"
|
placeholder="请选择关联店铺"
|
>
|
<el-option
|
v-for="store in storeList"
|
:value="store.id"
|
:label="store.storeName"
|
:key="store.id"
|
/>
|
</el-select>
|
</el-form-item>
|
<el-form-item v-if="eventInfoData.store" label="店铺得分:">
|
<span>{{
|
selectStoreChange(eventInfoData.store).storeScore
|
}}</span>
|
</el-form-item>
|
<el-form-item label="处理意见:" prop="state">
|
<el-radio-group v-model="eventInfoData.state">
|
<el-radio
|
:label="item.id"
|
v-for="item in stateList"
|
:key="item.id"
|
>{{ item.label }}</el-radio
|
>
|
</el-radio-group>
|
</el-form-item>
|
<el-form-item label="大类名称:" prop="categoryId">
|
<el-select
|
v-model="eventInfoData.categoryId"
|
placeholder="请选择大类名称"
|
@change="categoryChange"
|
>
|
<el-option
|
v-for="category in categoryOptions"
|
:key="category.id"
|
:value="category.id"
|
:label="category.name"
|
/>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="小类名称:" prop="typeId">
|
<el-select
|
v-model="eventInfoData.typeId"
|
placeholder="请选择小类名称"
|
>
|
<el-option
|
v-for="type in typeOptions"
|
:key="type.id"
|
:value="type.id"
|
:label="type.name"
|
/>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="车牌号:" prop="carNumber">
|
<el-input
|
v-model="eventInfoData.carNumber"
|
placeholder="请填写车牌号码"
|
></el-input>
|
</el-form-item>
|
<el-form-item label="备注:" prop="description">
|
<el-input
|
type="textarea"
|
:rows="5"
|
v-model="eventInfoData.description"
|
></el-input>
|
</el-form-item>
|
<el-form-item>
|
<el-button
|
:disabled="currentPage === 1"
|
@click="pageChange('prev')"
|
>上一条</el-button
|
>
|
<el-button @click.native.prevent="handleConfirm"
|
>确认</el-button
|
>
|
<el-button @click="pageChange('next')">下一条</el-button>
|
</el-form-item>
|
</el-form>
|
</div>
|
</div>
|
</div>
|
</div>
|
<el-dialog :visible="isShowDialog" title="调度信息">
|
<MyDispatch
|
v-if="isShowDialog"
|
:mytype="1"
|
@getDispatchData="confirmInspection"
|
:isGetData="true"
|
@changeDialog="closeDialog"
|
></MyDispatch>
|
</el-dialog>
|
<el-dialog
|
:visible.sync="dialogCreate"
|
title="查看视频"
|
v-show="dialogCreate"
|
:before-close="handleClose2"
|
>
|
<div class="dom" style="width: 100%; height: 600px; position: relative">
|
<div id="dom1" class="dom1"></div>
|
</div>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
import basecase from "@/api/operate/basecase";
|
import baseInfo from "@/api/baseInfo";
|
import { getStoreInfoList } from "@/api/operate/storeManagement";
|
import { FILE_ORIGINAL_URL } from "@/utils";
|
import { validateCarNum } from "@/utils/validate";
|
import MyDispatch from "@/components/dispatch";
|
|
import MyMap from "@/components/map";
|
|
export default {
|
components: { MyDispatch, MyMap },
|
created() {
|
this.getInspectionData();
|
this.initEventParams();
|
basecase
|
.getInspectionCountData()
|
.then((res) => {
|
this.countData = res;
|
})
|
.catch((err) => this.$message.error(err));
|
|
getStoreInfoList({ current: 1, size: 100 })
|
.then(({ list }) => {
|
this.storeList = list;
|
})
|
.catch((err) => {
|
this.$message.error(err);
|
});
|
|
baseInfo
|
.getCategoryList()
|
.then((res) => {
|
this.categoryOptions = res;
|
})
|
.catch((err) => this.$message.error(err));
|
|
baseInfo
|
.getTypeList()
|
.then((res) => {
|
this.typeList = res;
|
})
|
.catch((err) => this.$message.error(err));
|
},
|
mounted() {
|
this.timer = setInterval(() => {
|
setTimeout(this.getInspectionData, 0);
|
}, 1000 * 10);
|
},
|
data() {
|
const validateCarNumber = (rule, value, callback) => {
|
if (value) {
|
if (validateCarNum(value)) {
|
callback();
|
} else {
|
callback(new Error("请输入正确的车牌号"));
|
}
|
} else {
|
callback();
|
}
|
};
|
return {
|
timer: null,
|
countData: {
|
study: 0,
|
review: 0,
|
register: 0,
|
},
|
currentEvent: {},
|
stateList: [
|
{
|
id: 2,
|
label: "上报",
|
},
|
{
|
id: 6,
|
label: "调度",
|
},
|
{
|
id: 3,
|
label: "再学习",
|
},
|
{
|
id: 4,
|
label: "暂不处理",
|
},
|
],
|
eventInfoData: null,
|
rules: {
|
state: [
|
{
|
required: true,
|
trigger: ["blur"],
|
message: "处理意见不能为空",
|
},
|
],
|
categoryId: [
|
{
|
required: true,
|
trigger: ["blur"],
|
message: "大类名称不能为空",
|
},
|
],
|
typeId: [
|
{
|
required: true,
|
trigger: ["blur"],
|
message: "小类名称不能为空",
|
},
|
],
|
carNumber: [
|
{ trigger: ["blur", "change"], validator: validateCarNumber },
|
],
|
},
|
imageList: [],
|
currentPage: 1,
|
categoryOptions: [],
|
typeOptions: [],
|
storeList: [],
|
typeList: [],
|
isShowDialog: false,
|
dialogCreate: false,
|
cutPosX: 10,
|
cutPosY: 10,
|
cutWidth: 100,
|
cutHeight: 100,
|
crtPosX: 0,
|
crtPosY: 0,
|
crtWidth: 1000,
|
crtHeight: 600,
|
domId: "dom1",
|
ctrl: "ctrl1",
|
playType: "live",
|
};
|
},
|
methods: {
|
pageChange(type) {
|
if (type === "next") {
|
this.currentPage += 1;
|
} else {
|
this.currentPage -= 1;
|
}
|
this.getInspectionData();
|
},
|
|
getInspectionData() {
|
basecase
|
.getInspectionData({ current: this.currentPage })
|
.then(({ records }) => {
|
this.currentEvent = records[0];
|
if (this.currentEvent?.picData) {
|
this.imageList = this.currentEvent.picData
|
.split(",")
|
.map((item) => `${FILE_ORIGINAL_URL}${item}`);
|
}
|
if (
|
this.currentEvent?.alarmTime ||
|
this.currentEvent?.currentAlarmTime
|
) {
|
const { alarmTime, currentAlarmTime } = this.currentEvent;
|
const continueAlarmTime =
|
new Date().getTime() -
|
(currentAlarmTime
|
? new Date(currentAlarmTime).getTime()
|
: new Date(alarmTime).getTime());
|
const CONTINUE_DAY = continueAlarmTime / 1000 / 60 / 60 / 24;
|
const CONTINUE_HOURS = (CONTINUE_DAY - parseInt(CONTINUE_DAY)) * 24;
|
this.currentEvent.conntinueTime = `${parseInt(
|
CONTINUE_DAY
|
)}天${parseInt(CONTINUE_HOURS)}小时`;
|
}
|
})
|
.catch((err) => this.$message.error(err));
|
},
|
|
// 确认点击事件
|
handleConfirm() {
|
this.$refs.currentEvent.validate((flag) => {
|
if (flag) {
|
this.eventInfoData.baseId = this.currentEvent.baseId;
|
|
// 调度
|
if (this.eventInfoData.state === 6) {
|
this.isShowDialog = true;
|
} else {
|
this.confirmInspection();
|
}
|
} else {
|
this.$message.warning("请检查必填项");
|
}
|
});
|
},
|
|
initEventParams() {
|
this.eventInfoData = {
|
baseId: null,
|
store: null,
|
state: null,
|
categoryId: null,
|
typeId: null,
|
carNumber: null,
|
description: null,
|
linkShop: 0,
|
shopName: null,
|
};
|
},
|
|
categoryChange(id) {
|
this.typeOptions = this.typeList.filter((type) => type.parentId === id);
|
},
|
|
confirmInspection(data) {
|
const eventParams = Object.assign({}, this.eventInfoData);
|
delete eventParams.store;
|
basecase
|
.confirmInspection({ ...eventParams, ...data })
|
.then(() => {
|
this.$message.success("操作成功");
|
this.getInspectionData();
|
this.initEventParams();
|
})
|
.catch((err) => this.$message.error(err));
|
},
|
|
closeDialog() {
|
this.isShowDialog = false;
|
},
|
|
selectStoreChange(id) {
|
if (id === "") {
|
this.eventInfoData.shopName = null;
|
this.eventInfoData.linkShop = 0;
|
this.eventInfoData.store = null;
|
return;
|
}
|
const selectedStore = this.storeList.find((store) => store.id === id);
|
this.eventInfoData.shopName = selectedStore.id;
|
this.eventInfoData.linkShop = 1;
|
return selectedStore;
|
},
|
handleClose2() {
|
this.dialogCreate = false;
|
this.destroy();
|
},
|
login() {
|
// 调用登录接口
|
this.ws.detectConnectQt().then((res) => {
|
if (res) {
|
// 连接客户端成功
|
this.ws.login({
|
loginIp: "183.245.159.161",
|
loginPort: "8282",
|
userName: "suichang",
|
userPwd: "a12345677",
|
https: 1,
|
});
|
this.$message.info("登录中...");
|
this.ws.on("loginState", (res) => {
|
this.isLogin = res;
|
if (res) {
|
this.$message.success("登录成功");
|
this.activePanel = "key2";
|
} else {
|
this.$message.info("登录失败");
|
}
|
});
|
} else {
|
// 连接客户端失败
|
this.$message.info("请重新安装客户端");
|
}
|
});
|
},
|
logout() {
|
// 调用登出接口
|
this.ws.logout({
|
loginIp: this.loginIp,
|
});
|
},
|
createVideo(item, ctrlType) {
|
this.playType = ctrlType;
|
const DHWsInstance = DHWs.getInstance();
|
this.ws = DHWsInstance;
|
console.log(this.ws);
|
this.login();
|
// 调用创建控件接口
|
// if (!this.isLogin) {
|
// this.$message.info('正在登陆客户端，请稍等......');
|
// return false;
|
// }
|
this.dialogCreate = true;
|
setTimeout(() => {
|
let _this = this;
|
const params = [
|
{
|
// ctrlType: "realMonitorUI",
|
ctrlType: "playerWin",
|
ctrlCode: this.ctrl,
|
ctrlProperty: {
|
displayMode: ctrlType == "playback" ? 2 : 1,
|
splitNum: 1,
|
channelList: [{ channelId: item.videoCode }],
|
},
|
visible: true,
|
domId: this.domId,
|
},
|
];
|
this.setPos();
|
|
// _this.ws.on("createCtrlResult", (res) => {
|
// console.warn(res);
|
// });
|
|
_this.ws
|
.createCtrl(params)
|
.then((res) => {
|
this.$message.success("创建成功");
|
console.log("res", res);
|
})
|
.catch((e) => {
|
console.log("error;", e);
|
});
|
|
if (ctrlType == "playback") {
|
const end = new Date();
|
const start = new Date();
|
start.setTime(start.getTime() - 3600 * 1000 * 24 * 1);
|
|
let beginTime = _this.formatDate(start);
|
let endTime = _this.formatDate(end);
|
const params = [
|
{
|
ctrlCode: this.ctrl,
|
array: [
|
{
|
beginTime: beginTime,
|
endTime: endTime,
|
channelId: item.videoCode,
|
},
|
],
|
},
|
];
|
_this.ws.openCtrlRecord(params);
|
}
|
}, 1000);
|
},
|
destroy() {
|
// 调用销毁控件接口
|
if (!this.isLogin) {
|
this.$Message.info("正在登陆客户端，请稍等......");
|
return false;
|
}
|
const ctrls = this.ws.ctrls.map((i) => {
|
if (i.ctrlCode === this.ctrl) {
|
return i.ctrlCode;
|
}
|
});
|
this.ws.destroyCtrl(ctrls);
|
},
|
setPos() {
|
let target = document.getElementById(this.domId);
|
console.log(target, "target");
|
target.style.right = `${this.crtPosX}px`;
|
target.style.top = `${this.crtPosY}px`;
|
target.style.width = `${this.crtWidth}px`;
|
target.style.height = `${this.crtHeight}px`;
|
if (document.createEvent) {
|
var event = document.createEvent("HTMLEvents");
|
event.initEvent("resize", true, true);
|
window.dispatchEvent(event);
|
} else if (document.createEventObject) {
|
window.fireEvent("onresize");
|
}
|
},
|
|
// 时间戳转 yyyy-MM-dd HH:mm:ss
|
formatDate(inputTime) {
|
var date = new Date(inputTime);
|
var y = date.getFullYear();
|
var m = date.getMonth() + 1;
|
m = m < 10 ? "0" + m : m;
|
var d = date.getDate();
|
d = d < 10 ? "0" + d : d;
|
var h = date.getHours();
|
h = h < 10 ? "0" + h : h;
|
var minute = date.getMinutes();
|
var second = date.getSeconds();
|
minute = minute < 10 ? "0" + minute : minute;
|
second = second < 10 ? "0" + second : second;
|
return y + "-" + m + "-" + d + " " + h + ":" + minute + ":" + second;
|
},
|
},
|
beforeDestroy() {
|
clearInterval(this.timer);
|
this.timer = null;
|
},
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
.study-judge {
|
text-align: left;
|
color: #4b9bb7;
|
padding: 10px 20px;
|
|
.study-judge-header {
|
line-height: 3vh;
|
}
|
|
.study-judge-main {
|
.sjm-header {
|
line-height: 8vh;
|
display: flex;
|
justify-content: space-between;
|
|
.sjm-header-left {
|
flex: 1;
|
display: flex;
|
justify-content: flex-start;
|
|
.moni-area {
|
margin-left: 4vw;
|
}
|
}
|
|
.sjm-header-right {
|
flex: 1;
|
display: flex;
|
justify-content: flex-end;
|
|
.el-button {
|
padding: 0 1vw;
|
height: 4vh;
|
}
|
}
|
}
|
|
.sjm-content {
|
display: flex;
|
justify-content: space-between;
|
|
.sjm-content-left {
|
line-height: 4.8vh;
|
.left-form> ::v-deep.el-form-item__label{
|
font-size: 16px!important;
|
}
|
.img-item {
|
display: flex;
|
flex-direction: column;
|
img {
|
width: 15vw;
|
height: 20vh;
|
}
|
}
|
|
.img-item + .img-item {
|
margin-top: 2vh;
|
}
|
}
|
|
.sjm-content-right {
|
.card-box {
|
.but-live{
|
padding-left: 48px;
|
line-height: 4.8vh;
|
}
|
.card-header {
|
padding-left: 48px;
|
line-height: 4.8vh;
|
}
|
}
|
}
|
}
|
}
|
|
.el-form {
|
::v-deep .el-form-item {
|
margin-bottom: 5px;
|
}
|
|
::v-deep .el-form-item__label {
|
color: #4b9bb7;
|
}
|
}
|
|
::v-deep .el-radio__label {
|
color: #4b9bb7;
|
}
|
}
|
|
.map {
|
height: 488px;
|
min-width: 460px;
|
}
|
</style>
|
