You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1112 lines
32 KiB
1112 lines
32 KiB
<template>
|
|
<div class="infoList">
|
|
<div class="info_bottom">
|
|
<div class="bottom_1">
|
|
<div class="t_line_box">
|
|
<i class="t_l_line"></i>
|
|
<i class="l_t_line"></i>
|
|
</div>
|
|
<div class="t_line_box">
|
|
<i class="t_r_line"></i>
|
|
<i class="r_t_line"></i>
|
|
</div>
|
|
<div class="t_line_box">
|
|
<i class="l_b_line"></i>
|
|
<!-- <i class="b_l_line"></i> -->
|
|
</div>
|
|
<div class="t_line_box">
|
|
<i class="r_b_line"></i>
|
|
<!-- <i class="b_r_line"></i> -->
|
|
</div>
|
|
<div class="main_table">
|
|
<div class="table_title">
|
|
<hr class="hr-style-left" />
|
|
警示信息
|
|
<hr class="hr-style-right" />
|
|
</div>
|
|
<!-- <table class="table_left">
|
|
<dv-scroll-board :config="bottom1Config"
|
|
style="height:220px" />
|
|
</table> -->
|
|
|
|
<table class="table_left table_bottom2Config">
|
|
<div>
|
|
<dv-scroll-board :config="bottom2Config" style="height: 250px" />
|
|
<!-- <Scroll-board-table v-if="boardLeftShow" :config="bottom2Config"></Scroll-board-table> -->
|
|
</div>
|
|
</table>
|
|
</div>
|
|
<div class="info_left_arrow" title="上一页" @click="preClick">
|
|
<a-icon type="left" />
|
|
</div>
|
|
<div class="info_right_arrow" title="下一页" @click="nextClick">
|
|
<a-icon type="right" />
|
|
</div>
|
|
</div>
|
|
<div class="bottom_2">
|
|
<div class="t_line_box">
|
|
<i class="t_l_line"></i>
|
|
<i class="l_t_line"></i>
|
|
</div>
|
|
<div class="t_line_box">
|
|
<i class="t_r_line"></i>
|
|
<i class="r_t_line"></i>
|
|
</div>
|
|
<div class="t_line_box">
|
|
<i class="l_b_line"></i>
|
|
<!-- <i class="b_l_line"></i> -->
|
|
</div>
|
|
<div class="t_line_box">
|
|
<i class="r_b_line"></i>
|
|
<!-- <i class="b_r_line"></i> -->
|
|
</div>
|
|
<div class="main_table">
|
|
<div class="table_title">
|
|
<hr class="hr-style-left" />
|
|
处置信息
|
|
<hr class="hr-style-right" />
|
|
</div>
|
|
<table class="table_left">
|
|
<dv-scroll-board :config="bottom3Config" style="height: 250px" />
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 图片展示框 -->
|
|
<div id="div_images" style="display: none">
|
|
<img v-for="(item, index) in images" :src="item" @error="errorImg(index)" :preview="images.length" :alt="images.length" />
|
|
</div>
|
|
<!-- 处置详情框 -->
|
|
<a-drawer title="警示处置" placement="right" width="640" :closable="false" :visible="dealModal" @close="onClose">
|
|
<a-row>
|
|
<a-col :span="12">
|
|
<span>发生时间：</span><span>{{ warnDataModal.createTime }}</span>
|
|
</a-col>
|
|
<a-col :span="12">
|
|
<span>发生地点：</span><span>{{ warnDataModal.cameraLoc }}</span>
|
|
</a-col>
|
|
<a-col :span="12">
|
|
<span>级别：</span><span>{{ warnDataModal.warnLevel }}</span>
|
|
</a-col>
|
|
<a-col :span="12">
|
|
<span>类型：</span><span>{{ warnDataModal.warnType }}</span>
|
|
</a-col>
|
|
<a-col :span="12">
|
|
<span>内容：</span><span>{{ warnDataModal.warnContent }}</span>
|
|
</a-col>
|
|
<a-col :span="12">
|
|
<a @click="showPhotos(warnDataModal.imgUrl)">现场照片</a>
|
|
<a-divider type="vertical" />
|
|
<a @click="showVideo(warnDataModal.warnContent, warnDataModal.cameraId, warnDataModal.createTime)">录像回放</a>
|
|
</a-col>
|
|
</a-row>
|
|
<a-divider>相关信息</a-divider>
|
|
<a-table :columns="bottom4Config" :data-source="bottom4Data" :scroll="{ x: 500 }" :pagination="{ pageSize: 2 }">
|
|
<a slot="action" slot-scope="record" @click="showVideo(record.warnContent, record.cameraId, record.createTime)">录像回放</a>
|
|
</a-table>
|
|
<a-divider>轨迹回放</a-divider>
|
|
<iframe :src="earthSrc" width="100%" height="500" frameborder="0" scrolling="auto" ref="iframe"></iframe>
|
|
<!-- 按钮 -->
|
|
<div
|
|
:style="{
|
|
position: 'absolute',
|
|
right: 0,
|
|
bottom: 0,
|
|
width: '100%',
|
|
borderTop: '1px solid #e9e9e9',
|
|
padding: '10px 16px',
|
|
background: '#fff',
|
|
textAlign: 'right',
|
|
zIndex: 1,
|
|
}"
|
|
>
|
|
<a-button :style="{ marginRight: '8px' }" @click="onClose"> 返回</a-button>
|
|
<a-button type="primary" @click="handleWarnInfo"> 处置</a-button>
|
|
</div>
|
|
</a-drawer>
|
|
<ms-warn-modal @ok="getAgain" ref="modalForm"></ms-warn-modal>
|
|
<a-modal title="详情" :visible="detailVisible" :footer="null" @cancel="detailCancel" :zIndex="999" dialogClass="detail-model">
|
|
<!-- 警示详情 -->
|
|
<ms-warn-detail :againGetDetail="againGetDetail" :detailEventSerialNum="detailEventSerialNum"></ms-warn-detail>
|
|
</a-modal>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { onBeforeUnmount, watchEffect, onMounted, nextTick, defineComponent, ref, getCurrentInstance, computed, watch } from 'vue';
|
|
import $mitt from '@/utils/earthMap/mitt';
|
|
import { defHttp } from '/@/utils/http/axios';
|
|
import { useMonitorStore } from '/@/store/modules/monitor';
|
|
import _ from 'lodash';
|
|
import ScrollBoardTable from '@/components/earthMap/components/Scroll-board-table.vue';
|
|
import MsWarnModal from '@/views/military/modules/alarmManage/cautionManage/components/MsPreWarnModal.vue';
|
|
export default defineComponent({
|
|
name: 'infoList',
|
|
props: {},
|
|
components: {
|
|
ScrollBoardTable,
|
|
MsWarnModal,
|
|
},
|
|
setup(props, ctx) {
|
|
const { proxy }: any = getCurrentInstance();
|
|
let store = useMonitorStore();
|
|
//ref
|
|
let modalForm = ref();
|
|
let boardLeftShow = ref(false);
|
|
const title = computed(() => {
|
|
return '';
|
|
});
|
|
|
|
let url: any = ref({
|
|
getTypeDataStatistics: '/military/msPrewarnDaystatistics/getTypeDataStatistics',
|
|
getWarnDatalist: '/military/msWarnEvent/list', //'/mapInfo/warnInfoList',
|
|
getWarnDealLogList: '/military/warn/warnDealLogList',
|
|
changeDealStatus: '/military/prewarn/edit',
|
|
});
|
|
let videoWindowProps: any = ref({
|
|
visible: false,
|
|
isAlarm: true,
|
|
title: '',
|
|
videoUrl: '',
|
|
warnTime: null,
|
|
playRecord: true,
|
|
});
|
|
let timer: any = ref(null);
|
|
|
|
let bottom1Config: any = ref({});
|
|
let bottom2Config: any = ref({});
|
|
let bottom3Config: any = ref({
|
|
/*data: [
|
|
['【警示编号：201701160809001】 2017/03/16 09:31 101号杆体 <span style="color:#9fe6b8;">视频预警</span> 船只越界'],
|
|
],*/
|
|
});
|
|
let bottom4Config: any = ref([
|
|
{ title: '发生时间', width: 150, dataIndex: 'date', key: 'date' },
|
|
{ title: '发生地点', width: 150, dataIndex: 'location', key: 'location' },
|
|
{ title: '级别', width: 60, dataIndex: 'level', key: 'level' },
|
|
{ title: '类型', width: 60, dataIndex: 'type', key: 'type' },
|
|
{ title: '内容', width: 150, dataIndex: 'content', key: 'content' },
|
|
{ title: '操作', width: 100, key: 'operation', scopedSlots: { customRender: 'action' }, fixed: 'right' },
|
|
]);
|
|
let bottom4Data: any = ref([
|
|
{
|
|
key: '1',
|
|
date: '2021-10-22 15:02:01',
|
|
location: '琴海西南侧',
|
|
level: '一级',
|
|
type: '视频预警',
|
|
content: '船只周界入侵',
|
|
},
|
|
{
|
|
key: '2',
|
|
date: '2021-10-22 15:02:01',
|
|
location: '琴海西南侧',
|
|
level: '一级',
|
|
type: '视频预警',
|
|
content: '船只周界入侵',
|
|
},
|
|
{
|
|
key: '3',
|
|
date: '2021-10-22 15:02:01',
|
|
location: '琴海西南侧',
|
|
level: '一级',
|
|
type: '视频预警',
|
|
content: '船只周界入侵',
|
|
},
|
|
]);
|
|
|
|
let dealModal = ref(false);
|
|
let warnDataModal: any = ref({
|
|
id: '',
|
|
eventSerialNum: '',
|
|
createTime: '',
|
|
cameraLoc: '',
|
|
warnLevel: '',
|
|
warnType: '',
|
|
warnContent: '',
|
|
imgUrl: '',
|
|
videoUrl: '',
|
|
dealStatus: '',
|
|
});
|
|
|
|
let earthSrc = ref(window._CONFIG['earthMapURL'] + '/playback');
|
|
let iframeWin: any = ref(null);
|
|
let handleIframe: any = ref(null);
|
|
let images: any = ref([]);
|
|
|
|
let bottom2ConfigParam: any = ref({
|
|
column: 'createTime',
|
|
order: 'desc',
|
|
pageNo: 1,
|
|
pageSize: 10,
|
|
});
|
|
|
|
let detailVisible = ref(false);
|
|
let detailEventSerialNum: any = ref([]);
|
|
let againGetDetail: any = ref(null);
|
|
|
|
onMounted(() => {
|
|
//其他页面调用本页面的methods方法
|
|
$mitt.on('getWarnData', function () {
|
|
getWarnData();
|
|
});
|
|
$mitt.on('getDealData', function (status: any) {
|
|
getDealData(status);
|
|
});
|
|
});
|
|
|
|
function objectIsNull(str) {
|
|
if (!str) {
|
|
return true;
|
|
} else if (String(str).length <= 0 || String(str).toUpperCase() === 'NULL') {
|
|
return true;
|
|
}
|
|
return false;
|
|
}
|
|
|
|
function getTypeData() {
|
|
defHttp
|
|
.get(
|
|
{
|
|
url: url.value.getTypeDataStatistics,
|
|
},
|
|
{ isTransformResponse: false }
|
|
)
|
|
// getAction(url.value.getTypeDataStatistics)
|
|
.then((res) => {
|
|
if (res.success) {
|
|
let configData: any = [];
|
|
res.result.forEach((data, index) => {
|
|
configData.push([data.item, data.count]);
|
|
});
|
|
bottom1Config.value = {
|
|
header: ['类型', '起数'],
|
|
data: configData,
|
|
headerHeight: 25,
|
|
columnWidth: [150, 50],
|
|
headerBGC: '#00000000',
|
|
carousel: 'page',
|
|
};
|
|
}
|
|
});
|
|
}
|
|
|
|
function getWarnData() {
|
|
defHttp
|
|
.get(
|
|
{
|
|
url: url.value.getWarnDatalist,
|
|
params: bottom2ConfigParam.value,
|
|
},
|
|
{ isTransformResponse: false }
|
|
)
|
|
// getAction(this.url.getWarnDatalist, this.bottom2ConfigParam)
|
|
.then((res) => {
|
|
if (res.success) {
|
|
let configData: any = [];
|
|
let records = res.result.records;
|
|
let result = res.result;
|
|
if (records.length == 0) {
|
|
if (result.current > result.pages) {
|
|
bottom2ConfigParam.value.pageNo = result.pages;
|
|
}
|
|
return;
|
|
}
|
|
console.log('records', records);
|
|
records.forEach((data, index) => {
|
|
configData.push([
|
|
`<span title=\"${(result.current - 1) * result.size + index + 1}\">${(result.current - 1) * result.size + index + 1}</span>`,
|
|
`<span title=\"${data.createTime}\">${data.createTime == null ? '' : data.createTime}</span>`,
|
|
`<span title=\"${data.happenLoc}\">${data.happenLoc == null ? '' : data.happenLoc}</span>`,
|
|
`<span title=\"${data.warnLevel_dictText}\" class=\"warnLevelSpan ${
|
|
data.warnLevel == 1
|
|
? 'hong'
|
|
: data.warnLevel == 2
|
|
? 'cheng'
|
|
: data.warnLevel == 3
|
|
? 'huang'
|
|
: data.warnLevel == 4
|
|
? 'lv'
|
|
: data.warnLevel == 5
|
|
? 'lan'
|
|
: ''
|
|
}\"></span>`,
|
|
`<span title=\"${data.warnType_dictText}\">${data.warnType_dictText == null ? '' : data.warnType_dictText}</span>`,
|
|
`<span title=\"${data.warnContent}\">${data.warnContent == null ? '' : data.warnContent}</span>`,
|
|
`<span title=\"${data.dealStatus_dictText}\">${data.dealStatus_dictText == null ? '' : data.dealStatus_dictText}</span>`,
|
|
`<span title=\"${data.dealWay_dictText}\">${data.dealWay_dictText == null ? '' : data.dealWay_dictText}</span>`,
|
|
// `<a onclick=\"window.that.showPhotos(${data.imgUrl})\">现场照片</a> | ` +
|
|
// `<a onclick=\"window.that.showVideo(${data.videoUrl})\">录像</a> | ` +
|
|
`<a onclick=\"window.that.showWarnDetail('${data.eventSerialNum}')\">详情</a> | ` +
|
|
`<a onclick=\"window.that.showWarnInfo(${JSON.stringify(data).replace(/\"/g, "'")},${true})\">处置</a>`,
|
|
]);
|
|
});
|
|
// bottom2Config.value = {
|
|
// //需再添加header请再手动添加样式穿透（用于设置宽度）
|
|
// header: ['#', '发生时间', '发生地点', '级别', '类型', '内容', '处置状态', '处置方式', '操作'],
|
|
// data: configData,
|
|
// headerHeight: 25,
|
|
// // columnWidth: [60, 200, 200, 80, 200, , 100, 120,],
|
|
// index: false,
|
|
// align: ['center'],
|
|
// rowNum: 10,
|
|
// headerBGC: '#00000000',
|
|
// oddRowBGC: '#00000000',
|
|
// evenRowBGC: '#09274C55',
|
|
// }
|
|
bottom2Config.value = {
|
|
//需再添加header请再手动添加样式穿透（用于设置宽度）
|
|
header: [
|
|
{
|
|
title: '#',
|
|
dataIndex: 'name',
|
|
key: 'name',
|
|
},
|
|
{
|
|
title: '发生时间',
|
|
dataIndex: 'createTime',
|
|
key: 'createTime',
|
|
},
|
|
{
|
|
title: '发生地点',
|
|
dataIndex: 'name',
|
|
key: 'name',
|
|
},
|
|
{
|
|
title: '级别',
|
|
dataIndex: 'name',
|
|
key: 'name',
|
|
},
|
|
{
|
|
title: '类型',
|
|
dataIndex: 'name',
|
|
key: 'name',
|
|
},
|
|
{
|
|
title: '内容',
|
|
dataIndex: 'warnContent',
|
|
key: 'warnContent',
|
|
},
|
|
{
|
|
title: '处置状态',
|
|
dataIndex: 'dealStatus',
|
|
key: 'dealStatus',
|
|
},
|
|
{
|
|
title: '处置方式',
|
|
dataIndex: 'name',
|
|
key: 'name',
|
|
},
|
|
{
|
|
title: '操作',
|
|
dataIndex: 'name',
|
|
key: 'name',
|
|
},
|
|
],
|
|
data: configData,
|
|
headerHeight: 25,
|
|
// columnWidth: [60, 200, 200, 80, 200, , 100, 120,],
|
|
index: false,
|
|
align: ['center'],
|
|
rowNum: 10,
|
|
headerBGC: '#00000000',
|
|
oddRowBGC: '#00000000',
|
|
evenRowBGC: '#09274C55',
|
|
};
|
|
nextTick(() => {
|
|
boardLeftShow.value = true;
|
|
});
|
|
}
|
|
});
|
|
}
|
|
|
|
function preClick() {
|
|
bottom2ConfigParam.value.pageNo = bottom2ConfigParam.value.pageNo == 1 ? 1 : --bottom2ConfigParam.value.pageNo;
|
|
getWarnData();
|
|
}
|
|
|
|
function nextClick() {
|
|
bottom2ConfigParam.value.pageNo++;
|
|
getWarnData();
|
|
}
|
|
|
|
function getDealData(status = null) {
|
|
// 判断警示窗口是否打开着，打开就轮询获取最新信息，关闭了就移除定时器
|
|
if (status == 'hidden') {
|
|
//清除定时器
|
|
clearInterval(timer.value);
|
|
timer.value = null;
|
|
return;
|
|
}
|
|
// 定时器-定时获取最新预警信息
|
|
if (timer.value == null) {
|
|
timer.value = setInterval(() => {
|
|
getDealData();
|
|
}, 30 * 1000);
|
|
}
|
|
// 请求处置信息
|
|
let param = {
|
|
column: 'createTime',
|
|
order: 'desc',
|
|
pageNo: 1,
|
|
pageSize: 10,
|
|
};
|
|
defHttp
|
|
.get(
|
|
{
|
|
url: url.value.getWarnDealLogList,
|
|
params: param,
|
|
},
|
|
{ isTransformResponse: false }
|
|
)
|
|
// getAction(this.url.getWarnDealLogList, param)
|
|
.then((res) => {
|
|
if (res.success) {
|
|
let configData: any = [];
|
|
|
|
if (res.result.records.length > 0) {
|
|
res.result.records.forEach((data, index) => {
|
|
configData.push(
|
|
[
|
|
'<span style="color:#efde06;display:block;text-align:center;" title="警示编号">【警示编号：' +
|
|
data.eventSerialNum +
|
|
'】</span>',
|
|
],
|
|
[
|
|
`<span style="color:#9fe6b8;">警示来源：</span>${data.warnType_dictText == null ? '未知' : data.warnType_dictText}` +
|
|
`   <span style="color:#9fe6b8;">发生地点：</span>${data.cameraLoc == null ? '未知' : data.cameraLoc}` +
|
|
`   <span style="color:#9fe6b8;">处置时间：</span>${data.createTime == null ? '未知' : data.createTime}` +
|
|
`   <span style="color:#9fe6b8;">级别：</span>${
|
|
data.warnLevel_dictText == null ? '未知' : data.warnLevel_dictText
|
|
}`,
|
|
],
|
|
[
|
|
'<span style="color:#9fe6b8;">处置类型：</span>' +
|
|
data.dealType_dictText +
|
|
'      <span style="color:#9fe6b8;">处置方式：</span>' +
|
|
data.dealWay_dictText +
|
|
'      <span style="color:#9fe6b8;">处置结果：</span>' +
|
|
data.dealResult_dictText,
|
|
]
|
|
);
|
|
});
|
|
} else {
|
|
configData.push(['暂无相关的处置信息']);
|
|
}
|
|
bottom3Config.value = {
|
|
data: configData,
|
|
rowNum: 6,
|
|
oddRowBGC: '#00000000',
|
|
evenRowBGC: '#00000000',
|
|
align: ['center'],
|
|
carousel: 'page',
|
|
};
|
|
}
|
|
});
|
|
}
|
|
|
|
function getAgain(bol, eventSerialNum) {
|
|
$mitt.emit('clearAlarmModel', { isWarnEvent: bol, eventSerialNum: eventSerialNum });
|
|
// 判断是更新事件还是更新详情页数据
|
|
if (bol) {
|
|
getWarnData();
|
|
} else {
|
|
againGetDetail.value = new Date().getTime();
|
|
}
|
|
}
|
|
|
|
function showPhotos(url) {
|
|
if (objectIsNull(url)) {
|
|
// $mitt.emit('openNotification', '暂无数据', 2, 'warning')
|
|
// $mitt.emit('openNotification', { msg: '暂无数据', dt: 2, type: 'warning' })
|
|
proxy.$message.warning('暂无数据');
|
|
return;
|
|
}
|
|
images.value = handleImageList(url);
|
|
proxy.$previewRefresh();
|
|
nextTick(function () {
|
|
let imagesElement: any = document.getElementById('div_images');
|
|
// 初始化图片查看器 使点击事件生效
|
|
_.delay(() => {
|
|
if (imagesElement.children[0] && imagesElement.children[0].click) {
|
|
imagesElement.children[0].click();
|
|
}
|
|
}, 200);
|
|
});
|
|
}
|
|
|
|
function errorImg(index) {
|
|
images.value.splice(index, 1);
|
|
// 这里要延时处理
|
|
setTimeout(() => {
|
|
proxy.$previewRefresh();
|
|
}, 1000);
|
|
}
|
|
|
|
function handleImageList(urls) {
|
|
let images: any = [];
|
|
urls.split(',').forEach((item) => {
|
|
let url: any = handleImageUrl(item);
|
|
images.push(url);
|
|
});
|
|
return images;
|
|
}
|
|
|
|
function handleImageUrl(url) {
|
|
// 正则匹配 http:// 和 https://
|
|
const regex = /^(http|https):\/\//;
|
|
const uriList = url.split(',');
|
|
// 去除空字符串
|
|
const uriListNotSpace = uriList.filter((uri) => uri !== '' && uri !== 'null');
|
|
let urlTemp = uriListNotSpace[0];
|
|
// 去除空格
|
|
urlTemp = urlTemp.trim();
|
|
if (regex.test(urlTemp)) {
|
|
return urlTemp;
|
|
} else {
|
|
return `${window._CONFIG['staticDomainURL']}/${urlTemp}`;
|
|
}
|
|
}
|
|
|
|
function showVideo(arr) {
|
|
arr = arr.split(',');
|
|
videoWindowProps.value.videoUrl = arr[0];
|
|
videoWindowProps.value.title = '录像回放';
|
|
videoWindowProps.value.warnTime = new Date(arr[1]).getTime();
|
|
videoWindowProps.value.visible = true;
|
|
videoWindowProps.value.time = new Date().getTime();
|
|
// this.$store.commit('SET_VIDEOPROPS', this.videoWindowProps)
|
|
store.videoProps = videoWindowProps.value;
|
|
}
|
|
|
|
function showWarnDetail(eventSerialNum) {
|
|
detailEventSerialNum = eventSerialNum;
|
|
detailVisible.value = true;
|
|
}
|
|
|
|
function detailCancel() {
|
|
detailEventSerialNum.value = '';
|
|
detailVisible.value = false;
|
|
}
|
|
|
|
function showWarnInfo(data, bol) {
|
|
data.isEvent = bol;
|
|
// 报警处置
|
|
modalForm.value.dealWarn(data);
|
|
modalForm.value.title = '警示处置';
|
|
modalForm.value.disableSubmit = false;
|
|
|
|
/* this.warnDataModal.id = data.id;
|
|
this.warnDataModal.eventSerialNum = data.eventSerialNum;
|
|
this.warnDataModal.createTime = data.createTime;
|
|
this.warnDataModal.cameraLoc = data.cameraLoc;
|
|
this.warnDataModal.warnLevel = data.warnLevel_dictText;
|
|
this.warnDataModal.warnType = data.warnType_dictText;
|
|
this.warnDataModal.warnContent = data.warnContent;
|
|
this.warnDataModal.imgUrl = data.imgUrl;
|
|
this.warnDataModal.videoUrl = data.videoUrl;
|
|
this.warnDataModal.dealStatus = data.dealStatus;
|
|
this.dealModal = true; */
|
|
/* //轨迹回放
|
|
setTimeout(() => {
|
|
window.that.$refs.iframe.contentWindow.location.reload();
|
|
}, 100);
|
|
this.handleIframe = function (e) {
|
|
console.log('handleIframe', e.data)
|
|
if (e.data == 'ready') {
|
|
window.that.iframeWin = window.that.$refs.iframe.contentWindow;
|
|
let shipModel = JSON.stringify(window.$earth.sceneTree.$refs[data.eventSerialNum].czmObject);
|
|
let shipPath = JSON.stringify(window.$earth.sceneTree.$refs["path_" + data.eventSerialNum].czmObject);
|
|
window.that.iframeWin.postMessage({
|
|
shipModel: shipModel,
|
|
shipPath: shipPath
|
|
}, '*');
|
|
}
|
|
};
|
|
window.addEventListener('message', this.handleIframe, false); */
|
|
}
|
|
|
|
function onClose() {
|
|
dealModal.value = false;
|
|
//关闭模态框时销毁监听
|
|
window.removeEventListener('message', handleIframe.value, false);
|
|
}
|
|
|
|
function handleWarnInfo() {
|
|
/* this.$refs.modalForm.dealWarn(this.warnDataModal);
|
|
this.$refs.modalForm.title = "警示处置";
|
|
this.$refs.modalForm.disableSubmit = false; */
|
|
/* if (this.warnDataModal.dealStatus == 2) {
|
|
window.that.$message.warning("请勿重复处理！");
|
|
return;
|
|
}
|
|
this.$confirm({
|
|
title: '提示',
|
|
content: '确认处置当前报警信息？',
|
|
okText: '确认',
|
|
cancelText: '取消',
|
|
onOk () {
|
|
putAction(window.that.url.changeDealStatus, { id: id, dealStatus: 2 }).then((res) => {
|
|
if (res.success) {
|
|
window.that.$message.success("更新成功");
|
|
window.that.getWarnData();
|
|
}
|
|
});
|
|
},
|
|
}); */
|
|
}
|
|
|
|
onBeforeUnmount(() => {
|
|
// vue程序销毁时，需要清理相关资源
|
|
// this.websocketclose()
|
|
clearInterval(timer.value); //清除定时器
|
|
$mitt.off('getWarnData');
|
|
$mitt.off('getDealData');
|
|
});
|
|
|
|
return {
|
|
title,
|
|
url,
|
|
videoWindowProps,
|
|
timer,
|
|
bottom1Config,
|
|
bottom2Config,
|
|
bottom3Config,
|
|
bottom4Config,
|
|
bottom4Data,
|
|
dealModal,
|
|
warnDataModal,
|
|
earthSrc,
|
|
iframeWin,
|
|
handleIframe,
|
|
images,
|
|
bottom2ConfigParam,
|
|
detailVisible,
|
|
detailEventSerialNum,
|
|
againGetDetail,
|
|
objectIsNull,
|
|
getTypeData,
|
|
getWarnData,
|
|
preClick,
|
|
nextClick,
|
|
getDealData,
|
|
getAgain,
|
|
showPhotos,
|
|
errorImg,
|
|
handleImageList,
|
|
handleImageUrl,
|
|
showVideo,
|
|
showWarnDetail,
|
|
detailCancel,
|
|
showWarnInfo,
|
|
onClose,
|
|
handleWarnInfo,
|
|
boardLeftShow,
|
|
};
|
|
},
|
|
});
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.infoList {
|
|
/* display: none; //用这个会获取不到组件初始宽高*/
|
|
visibility: hidden;
|
|
|
|
.info_bottom {
|
|
position: absolute;
|
|
bottom: 4px;
|
|
width: calc(100% - 10px);
|
|
height: 300px;
|
|
margin-left: 5px;
|
|
background: -webkit-linear-gradient(360deg, RGBA(9, 39, 76, 0.9), RGBA(9, 39, 76, 0.6)) !important;
|
|
background: -o-linear-gradient(360deg, RGBA(9, 39, 76, 0.9), RGBA(9, 39, 76, 0.6)) !important;
|
|
background: -moz-linear-gradient(360deg, RGBA(9, 39, 76, 0.9), RGBA(9, 39, 76, 0.6)) !important;
|
|
background: linear-gradient(360deg, RGBA(9, 39, 76, 0.9), RGBA(9, 39, 76, 0.6)) !important;
|
|
|
|
.bottom_1,
|
|
.bottom_2 {
|
|
height: 300px;
|
|
position: relative;
|
|
float: left;
|
|
box-sizing: border-box;
|
|
border: 1px solid #2c58a6;
|
|
box-shadow: 0 0 10px #2c58a6;
|
|
}
|
|
|
|
.bottom_1 {
|
|
width: 60%;
|
|
}
|
|
|
|
.bottom_2 {
|
|
width: 40%;
|
|
}
|
|
|
|
.table_title {
|
|
text-align: center;
|
|
width: 100%;
|
|
height: 35px;
|
|
line-height: 33px;
|
|
border-radius: 18px;
|
|
position: absolute;
|
|
top: -40px;
|
|
color: #03f5f5;
|
|
font-size: 16px;
|
|
font-weight: 500;
|
|
font-style: italic;
|
|
box-sizing: border-box;
|
|
padding-left: 5px;
|
|
z-index: 1;
|
|
}
|
|
|
|
.main_table {
|
|
width: 100%;
|
|
margin-top: 45px;
|
|
position: relative;
|
|
|
|
.table_left {
|
|
width: 100%;
|
|
float: left;
|
|
/*flex 布局*/
|
|
display: flex;
|
|
/*实现水平居中*/
|
|
justify-content: center;
|
|
}
|
|
|
|
.table_left > div {
|
|
width: 100%;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
}
|
|
|
|
.info_left_arrow,
|
|
.info_right_arrow {
|
|
position: absolute;
|
|
top: 5px;
|
|
color: #1aa391;
|
|
font-size: 24px;
|
|
cursor: pointer;
|
|
z-index: 1;
|
|
|
|
&:hover {
|
|
color: #03f5f5;
|
|
}
|
|
}
|
|
|
|
.info_left_arrow {
|
|
left: 10px;
|
|
}
|
|
|
|
.info_right_arrow {
|
|
right: 10px;
|
|
}
|
|
|
|
.hr-style-left {
|
|
width: 20%;
|
|
margin: 0 20px;
|
|
border: 0;
|
|
height: 2px;
|
|
display: inline-block;
|
|
background-image: linear-gradient(to left, #efde06, #efde06b8, #efde0669);
|
|
}
|
|
|
|
.hr-style-right {
|
|
width: 20%;
|
|
margin: 0 20px;
|
|
border: 0;
|
|
height: 2px;
|
|
display: inline-block;
|
|
background-image: linear-gradient(to right, #efde06, #efde06b8, #efde0669);
|
|
}
|
|
|
|
.t_line_box {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.t_line_box i {
|
|
background-color: #03f5f5;
|
|
box-shadow: 0px 0px 10px #03f5f5;
|
|
position: absolute;
|
|
}
|
|
|
|
.l_t_line {
|
|
width: 2px;
|
|
height: 24px;
|
|
left: -3px;
|
|
top: -3px;
|
|
}
|
|
|
|
.t_l_line {
|
|
height: 2px;
|
|
width: 26px;
|
|
left: -3px;
|
|
top: -3px;
|
|
}
|
|
|
|
.t_r_line {
|
|
height: 2px;
|
|
width: 26px;
|
|
right: -3px;
|
|
top: -3px;
|
|
}
|
|
|
|
.r_t_line {
|
|
width: 2px;
|
|
height: 24px;
|
|
right: -3px;
|
|
top: -3px;
|
|
}
|
|
|
|
.l_b_line {
|
|
width: 2px;
|
|
height: 24px;
|
|
left: -3px;
|
|
bottom: -3px;
|
|
}
|
|
|
|
.b_l_line {
|
|
height: 2px;
|
|
width: 26px;
|
|
left: -3px;
|
|
bottom: -3px;
|
|
}
|
|
|
|
.r_b_line {
|
|
width: 2px;
|
|
height: 24px;
|
|
right: -3px;
|
|
bottom: -3px;
|
|
}
|
|
|
|
.b_r_line {
|
|
height: 2px;
|
|
width: 26px;
|
|
right: -3px;
|
|
bottom: -3px;
|
|
}
|
|
|
|
.header-item {
|
|
color: #efde06;
|
|
}
|
|
|
|
::-webkit-scrollbar {
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
.table_bottom2Config {
|
|
.warnLevelSpan {
|
|
border-radius: 10px;
|
|
display: block;
|
|
width: 16px;
|
|
height: 16px;
|
|
line-height: 16px;
|
|
}
|
|
|
|
.hong {
|
|
background: red;
|
|
}
|
|
|
|
.lan {
|
|
background: deepskyblue;
|
|
}
|
|
|
|
.huang {
|
|
background: #fff42b;
|
|
}
|
|
|
|
.cheng {
|
|
background: orange;
|
|
}
|
|
|
|
.lv {
|
|
background: green;
|
|
}
|
|
|
|
.dv-scroll-board .header,
|
|
.row-item {
|
|
justify-content: space-between;
|
|
}
|
|
|
|
// 样式穿透
|
|
.dv-scroll-board .header-item:nth-child(1),
|
|
.row-item .ceil:nth-child(1) {
|
|
min-width: 48px !important;
|
|
max-width: 48px !important;
|
|
}
|
|
|
|
.dv-scroll-board .header-item:nth-child(2),
|
|
.row-item .ceil:nth-child(2) {
|
|
min-width: 150px !important;
|
|
max-width: 150px !important;
|
|
}
|
|
|
|
.dv-scroll-board .header-item:nth-child(3),
|
|
.row-item .ceil:nth-child(3) {
|
|
flex: auto;
|
|
max-width: 280px !important;
|
|
}
|
|
|
|
.dv-scroll-board .header-item:nth-child(4),
|
|
.row-item .ceil:nth-child(4) {
|
|
min-width: 52px !important;
|
|
max-width: 52px !important;
|
|
}
|
|
|
|
.dv-scroll-board .header-item:nth-child(5),
|
|
.row-item .ceil:nth-child(5) {
|
|
min-width: 130px !important;
|
|
max-width: 130px !important;
|
|
}
|
|
|
|
.dv-scroll-board .header-item:nth-child(6),
|
|
.row-item .ceil:nth-child(6) {
|
|
flex: auto;
|
|
max-width: 600px !important;
|
|
}
|
|
|
|
.dv-scroll-board .header-item:nth-child(7),
|
|
.row-item .ceil:nth-child(7) {
|
|
min-width: 90px !important;
|
|
max-width: 90px !important;
|
|
}
|
|
|
|
.dv-scroll-board .header-item:nth-child(8),
|
|
.row-item .ceil:nth-child(8) {
|
|
min-width: 120px !important;
|
|
max-width: 120px !important;
|
|
}
|
|
|
|
.dv-scroll-board .header-item:nth-child(9),
|
|
.row-item .ceil:nth-child(9) {
|
|
min-width: 200px !important;
|
|
}
|
|
}
|
|
|
|
.detail-model {
|
|
width: 60vw !important;
|
|
padding-bottom: 0 !important;
|
|
|
|
.ant-modal-content,
|
|
.ant-modal-header {
|
|
background: transparent !important;
|
|
}
|
|
|
|
.ant-modal-header .ant-modal-title,
|
|
.ant-modal-close-x {
|
|
color: #fff !important;
|
|
}
|
|
|
|
.ant-modal-header {
|
|
border-bottom: 4px solid rgba(0, 0, 0, 0.4) !important;
|
|
}
|
|
|
|
.ant-modal-close-x {
|
|
font-size: 20px !important;
|
|
|
|
&:hover i {
|
|
color: @primary-color !important;
|
|
}
|
|
}
|
|
|
|
.row-item {
|
|
align-items: center !important;
|
|
}
|
|
|
|
.row-item:nth-child(2n-1) {
|
|
background-color: #f0eded29 !important;
|
|
}
|
|
}
|
|
</style>
|
|
<style lang="less" scoped>
|
|
/* 图片弹窗 */
|
|
.modal {
|
|
display: none;
|
|
/* Hidden by default */
|
|
position: fixed;
|
|
/* Stay in place */
|
|
z-index: 9999;
|
|
/* Sit on top */
|
|
padding-top: 100px;
|
|
/* Location of the box */
|
|
left: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
/* Full width */
|
|
height: 100%;
|
|
/* Full height */
|
|
overflow: auto;
|
|
/* Enable scroll if needed */
|
|
background-color: rgb(0, 0, 0);
|
|
/* Fallback color */
|
|
background-color: rgba(0, 0, 0, 0.9);
|
|
/* Black w/ opacity */
|
|
}
|
|
|
|
/* 图片 */
|
|
.modal-content {
|
|
margin: auto;
|
|
display: block;
|
|
width: 100%;
|
|
max-width: 70%;
|
|
}
|
|
|
|
/* 添加动画 */
|
|
.modal-content {
|
|
-webkit-animation-name: zoom;
|
|
-webkit-animation-duration: 0.6s;
|
|
animation-name: zoom;
|
|
animation-duration: 0.6s;
|
|
}
|
|
|
|
@-webkit-keyframes zoom {
|
|
from {
|
|
-webkit-transform: scale(0);
|
|
}
|
|
|
|
to {
|
|
-webkit-transform: scale(1);
|
|
}
|
|
}
|
|
|
|
@keyframes zoom {
|
|
from {
|
|
-webkit-transform: scale(0);
|
|
}
|
|
|
|
to {
|
|
-webkit-transform: scale(1);
|
|
}
|
|
}
|
|
|
|
/* 关闭按钮 */
|
|
.close {
|
|
position: absolute;
|
|
top: 15px;
|
|
right: 50%;
|
|
color: #f1f1f1;
|
|
font-size: 40px;
|
|
font-weight: bold;
|
|
transition: 0.3s;
|
|
}
|
|
|
|
.close:hover,
|
|
.close:focus {
|
|
color: rgb(158, 158, 158);
|
|
text-decoration: none;
|
|
cursor: pointer;
|
|
}
|
|
|
|
//:deep(.dv-scroll-board .rows .ceil) {
|
|
// padding: 0 6px !important;
|
|
//}
|
|
|
|
/* 小屏幕中图片宽度为 100% */
|
|
@media only screen and (max-width: 800px) {
|
|
.modal-content {
|
|
width: 100%;
|
|
}
|
|
}
|
|
</style>
|
|
|