|
|
|
|
@ -7,7 +7,7 @@
|
|
|
|
|
:src="mapUrl"
|
|
|
|
|
frameborder="0"
|
|
|
|
|
scrolling="no"
|
|
|
|
|
style="margin-left:-848px;margin-top:-80px"
|
|
|
|
|
style="margin-left: -848px; margin-top: -80px"
|
|
|
|
|
height="1270px"
|
|
|
|
|
width="100%"
|
|
|
|
|
/>
|
|
|
|
|
@ -20,7 +20,12 @@
|
|
|
|
|
@close="multiVideo.show = false"
|
|
|
|
|
></multi-video-monitor>
|
|
|
|
|
|
|
|
|
|
<grid-member-info v-show="gridPeoplePopup" ref="gridPeoplePopup" :flag="'ssiMap'" @routeBtnClick="routeBtnClick" />
|
|
|
|
|
<grid-member-info
|
|
|
|
|
v-show="gridPeoplePopup"
|
|
|
|
|
ref="gridPeoplePopup"
|
|
|
|
|
:flag="'ssiMap'"
|
|
|
|
|
@routeBtnClick="routeBtnClick"
|
|
|
|
|
/>
|
|
|
|
|
<el-button
|
|
|
|
|
type="primary"
|
|
|
|
|
style="
|
|
|
|
|
@ -31,7 +36,8 @@
|
|
|
|
|
z-index: 9999;
|
|
|
|
|
"
|
|
|
|
|
@click="showMultiVideoMonitor"
|
|
|
|
|
>视频监控</el-button>
|
|
|
|
|
>视频监控</el-button
|
|
|
|
|
>
|
|
|
|
|
<el-button
|
|
|
|
|
type="primary"
|
|
|
|
|
style="
|
|
|
|
|
@ -42,185 +48,298 @@
|
|
|
|
|
z-index: 9999;
|
|
|
|
|
"
|
|
|
|
|
@click="openUAVvideoPop"
|
|
|
|
|
>无人机</el-button>
|
|
|
|
|
>无人机</el-button
|
|
|
|
|
>
|
|
|
|
|
<el-button
|
|
|
|
|
type="primary"
|
|
|
|
|
style="
|
|
|
|
|
background-color: rgba(255, 255, 255, 0.2);
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 162px;
|
|
|
|
|
left: 42px;
|
|
|
|
|
z-index: 9999;
|
|
|
|
|
"
|
|
|
|
|
@click="openPatrolPopup = !openPatrolPopup"
|
|
|
|
|
>巡查内容</el-button
|
|
|
|
|
>
|
|
|
|
|
<el-button
|
|
|
|
|
type="primary"
|
|
|
|
|
style="
|
|
|
|
|
background-color: rgba(255, 255, 255, 0.2);
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 218px;
|
|
|
|
|
left: 42px;
|
|
|
|
|
z-index: 9999;
|
|
|
|
|
"
|
|
|
|
|
@click="openWorkPopup = !openWorkPopup"
|
|
|
|
|
>工作流程</el-button
|
|
|
|
|
>
|
|
|
|
|
<div v-if="UAVvideoPop" class="popup-video">
|
|
|
|
|
<div class="closeSurveillance" @click="closeUAVvideoPop" />
|
|
|
|
|
<div class="title">无人机直播</div>
|
|
|
|
|
<div style="width: 100%; margin-top: -30px; padding: 0px 50px">
|
|
|
|
|
<video ref="refWrjVideo" name="videoElement" :src="stgWrjVideo" style="width: 100%; height: 100%;margin-top: 62px;" controls="controls" autoplay />
|
|
|
|
|
<video
|
|
|
|
|
ref="refWrjVideo"
|
|
|
|
|
name="videoElement"
|
|
|
|
|
:src="stgWrjVideo"
|
|
|
|
|
style="width: 100%; height: 100%; margin-top: 62px"
|
|
|
|
|
controls="controls"
|
|
|
|
|
autoplay
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div v-if="openPatrolPopup" class="popup-video">
|
|
|
|
|
<div
|
|
|
|
|
class="closeSurveillance"
|
|
|
|
|
@click="openPatrolPopup = !openPatrolPopup"
|
|
|
|
|
/>
|
|
|
|
|
<div class="title">巡查内容</div>
|
|
|
|
|
<div class="contents">
|
|
|
|
|
<section class="ct-title">
|
|
|
|
|
<div class="left-box">事件类型</div>
|
|
|
|
|
<div class="right-box">上报要点</div>
|
|
|
|
|
</section>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div v-if="openWorkPopup" class="workStyle">
|
|
|
|
|
<div class="closeSurveillance" @click="openWorkPopup = !openWorkPopup" />
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
import MapCookieHandler from '@/layout/mixin/MapCookieHandler'
|
|
|
|
|
import multiVideoMonitor from './multiVideoMonitor.vue'
|
|
|
|
|
import gridMemberInfo from './gridMemberInfo.vue'
|
|
|
|
|
import MapCookieHandler from "@/layout/mixin/MapCookieHandler";
|
|
|
|
|
import multiVideoMonitor from "./multiVideoMonitor.vue";
|
|
|
|
|
import gridMemberInfo from "./gridMemberInfo.vue";
|
|
|
|
|
export default {
|
|
|
|
|
name: 'CommandControl',
|
|
|
|
|
name: "CommandControl",
|
|
|
|
|
components: { multiVideoMonitor, gridMemberInfo },
|
|
|
|
|
mixins: [MapCookieHandler],
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
// mapUrl: 'https://yqms.istarshine.com/v4/login',
|
|
|
|
|
mapUrl:
|
|
|
|
|
'http://2.35.253.24:10633/#/?codes=16C97BF3-63D0-41B8-8F96-1B300932EA3E',
|
|
|
|
|
"http://2.35.253.24:10633/#/?codes=16C97BF3-63D0-41B8-8F96-1B300932EA3E",
|
|
|
|
|
multiVideo: {
|
|
|
|
|
title: '',
|
|
|
|
|
title: "",
|
|
|
|
|
show: false,
|
|
|
|
|
layout: '',
|
|
|
|
|
cameraCodes: []
|
|
|
|
|
layout: "",
|
|
|
|
|
cameraCodes: [],
|
|
|
|
|
},
|
|
|
|
|
stgWrjVideo: window._CONFIG['stgWrjVideo'],
|
|
|
|
|
videoURL: window._CONFIG['wrjURL'], // 无人机测试视频
|
|
|
|
|
stgWrjVideo: window._CONFIG["stgWrjVideo"],
|
|
|
|
|
videoURL: window._CONFIG["wrjURL"], // 无人机测试视频
|
|
|
|
|
gridPeoplePopup: false, // 网格员信息
|
|
|
|
|
UAVvideoPop: false
|
|
|
|
|
}
|
|
|
|
|
UAVvideoPop: false,
|
|
|
|
|
//========
|
|
|
|
|
//打开工作流程
|
|
|
|
|
openWorkPopup: false,
|
|
|
|
|
//打开巡查内容
|
|
|
|
|
openPatrolPopup: false,
|
|
|
|
|
};
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
created() { },
|
|
|
|
|
created() {},
|
|
|
|
|
mounted() {
|
|
|
|
|
const _this = this
|
|
|
|
|
window.addEventListener('message', function(e) {
|
|
|
|
|
const _this = this;
|
|
|
|
|
window.addEventListener("message", function (e) {
|
|
|
|
|
if (e && e.data) {
|
|
|
|
|
if (e.data.status === 'click') {
|
|
|
|
|
const layerId = parseInt(e.data.layerId)
|
|
|
|
|
console.log('layerId', layerId)
|
|
|
|
|
if (e.data.status === "click") {
|
|
|
|
|
const layerId = parseInt(e.data.layerId);
|
|
|
|
|
console.log("layerId", layerId);
|
|
|
|
|
if (
|
|
|
|
|
e.data.dataType === 'point' ||
|
|
|
|
|
e.data.dataType === 'aggregationPoint'
|
|
|
|
|
e.data.dataType === "point" ||
|
|
|
|
|
e.data.dataType === "aggregationPoint"
|
|
|
|
|
) {
|
|
|
|
|
const { ADDRESS: address, NAME: name } = e.data.data[0].properties
|
|
|
|
|
if (address && address === '视频弹窗') {
|
|
|
|
|
const cameraCode = e.data.data[0].properties.BUSINESSID
|
|
|
|
|
_this.multiVideo.show = true
|
|
|
|
|
_this.multiVideo.title = name
|
|
|
|
|
_this.multiVideo.cameraCodes = [cameraCode]
|
|
|
|
|
_this.multiVideo.layout = '1x1'
|
|
|
|
|
const { ADDRESS: address, NAME: name } = e.data.data[0].properties;
|
|
|
|
|
if (address && address === "视频弹窗") {
|
|
|
|
|
const cameraCode = e.data.data[0].properties.BUSINESSID;
|
|
|
|
|
_this.multiVideo.show = true;
|
|
|
|
|
_this.multiVideo.title = name;
|
|
|
|
|
_this.multiVideo.cameraCodes = [cameraCode];
|
|
|
|
|
_this.multiVideo.layout = "1x1";
|
|
|
|
|
} else if (
|
|
|
|
|
layerId === 1000741 ||
|
|
|
|
|
layerId === 1000042 ||
|
|
|
|
|
layerId === 1000682 ||
|
|
|
|
|
layerId === 1001722
|
|
|
|
|
) {
|
|
|
|
|
const cameraCode = e.data.data[0].properties.ADDRESS
|
|
|
|
|
_this.multiVideo.show = true
|
|
|
|
|
_this.multiVideo.title = name
|
|
|
|
|
_this.multiVideo.cameraCodes = [cameraCode]
|
|
|
|
|
_this.multiVideo.layout = '1x1'
|
|
|
|
|
const cameraCode = e.data.data[0].properties.ADDRESS;
|
|
|
|
|
_this.multiVideo.show = true;
|
|
|
|
|
_this.multiVideo.title = name;
|
|
|
|
|
_this.multiVideo.cameraCodes = [cameraCode];
|
|
|
|
|
_this.multiVideo.layout = "1x1";
|
|
|
|
|
} else if (layerId === 1000103 || layerId === 1001995) {
|
|
|
|
|
if (e.data.data.length > 0) {
|
|
|
|
|
if (_this.routeBusinessId) {
|
|
|
|
|
const postData = {
|
|
|
|
|
id: '1',
|
|
|
|
|
id: "1",
|
|
|
|
|
operation: 4, // 移除
|
|
|
|
|
type: 'showRoute',
|
|
|
|
|
type: "showRoute",
|
|
|
|
|
businessId: `${_this.routeBusinessId}`,
|
|
|
|
|
param: `{"id":"${_this.routeBusinessId}"}`
|
|
|
|
|
}
|
|
|
|
|
param: `{"id":"${_this.routeBusinessId}"}`,
|
|
|
|
|
};
|
|
|
|
|
// console.log(postData)
|
|
|
|
|
_this.$refs.mapIframe.contentWindow.postMessage(
|
|
|
|
|
postData,
|
|
|
|
|
'*'
|
|
|
|
|
)
|
|
|
|
|
"*"
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
_this.gridPeoplePopup = true
|
|
|
|
|
console.log('e.data.data[0]', e.data.data[0])
|
|
|
|
|
_this.$refs.gridPeoplePopup.getMember(e.data.data[0])
|
|
|
|
|
_this.gridPeoplePopup = true;
|
|
|
|
|
console.log("e.data.data[0]", e.data.data[0]);
|
|
|
|
|
_this.$refs.gridPeoplePopup.getMember(e.data.data[0]);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
showMultiVideoMonitor() {
|
|
|
|
|
const videoList = [
|
|
|
|
|
{ CODE: '32058553001310210817', ID: '1', REMARK: '32058553001310210817' },
|
|
|
|
|
{ CODE: '32058551001310165214', ID: '2', REMARK: '32058551001310165214' },
|
|
|
|
|
{ CODE: '32058553001310909469', ID: '3', REMARK: '32058553001310909469' },
|
|
|
|
|
{ CODE: '32058553001310670315', ID: '4', REMARK: '32058517001310019274' },
|
|
|
|
|
{ CODE: '32058553001310806219', ID: '5', REMARK: null },
|
|
|
|
|
{ CODE: '32058553001310913850', ID: '6', REMARK: '32058553001310913850' },
|
|
|
|
|
{ CODE: '32058553001310132000', ID: '17', REMARK: '万达广场2号门' },
|
|
|
|
|
{ CODE: '32058559001310035894', ID: '7', REMARK: '32059102011314000469' },
|
|
|
|
|
{ CODE: '32058551001310651352', ID: '9', REMARK: '医院' }]
|
|
|
|
|
{
|
|
|
|
|
CODE: "32058553001310210817",
|
|
|
|
|
ID: "1",
|
|
|
|
|
REMARK: "32058553001310210817",
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
CODE: "32058551001310165214",
|
|
|
|
|
ID: "2",
|
|
|
|
|
REMARK: "32058551001310165214",
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
CODE: "32058553001310909469",
|
|
|
|
|
ID: "3",
|
|
|
|
|
REMARK: "32058553001310909469",
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
CODE: "32058553001310670315",
|
|
|
|
|
ID: "4",
|
|
|
|
|
REMARK: "32058517001310019274",
|
|
|
|
|
},
|
|
|
|
|
{ CODE: "32058553001310806219", ID: "5", REMARK: null },
|
|
|
|
|
{
|
|
|
|
|
CODE: "32058553001310913850",
|
|
|
|
|
ID: "6",
|
|
|
|
|
REMARK: "32058553001310913850",
|
|
|
|
|
},
|
|
|
|
|
{ CODE: "32058553001310132000", ID: "17", REMARK: "万达广场2号门" },
|
|
|
|
|
{
|
|
|
|
|
CODE: "32058559001310035894",
|
|
|
|
|
ID: "7",
|
|
|
|
|
REMARK: "32059102011314000469",
|
|
|
|
|
},
|
|
|
|
|
{ CODE: "32058551001310651352", ID: "9", REMARK: "医院" },
|
|
|
|
|
];
|
|
|
|
|
|
|
|
|
|
this.multiVideo.title = '视频监控'
|
|
|
|
|
this.multiVideo.show = true
|
|
|
|
|
this.multiVideo.layout = '3x3'
|
|
|
|
|
this.multiVideo.cameraCodes = videoList.map((e) => e.CODE)
|
|
|
|
|
this.multiVideo.title = "视频监控";
|
|
|
|
|
this.multiVideo.show = true;
|
|
|
|
|
this.multiVideo.layout = "3x3";
|
|
|
|
|
this.multiVideo.cameraCodes = videoList.map((e) => e.CODE);
|
|
|
|
|
},
|
|
|
|
|
routeBtnClick(businessId) {
|
|
|
|
|
this.routeBusinessId = businessId
|
|
|
|
|
this.routeBusinessId = businessId;
|
|
|
|
|
// const myDate = this.$moment().format('YYYY-MM-DD')
|
|
|
|
|
const routeIdx = 5 // 轨迹相关操作（1：开始轨迹动画，2：暂停，3：重置，4：移除，5：显示）
|
|
|
|
|
const routeIdx = 5; // 轨迹相关操作（1：开始轨迹动画，2：暂停，3：重置，4：移除，5：显示）
|
|
|
|
|
const postData = {
|
|
|
|
|
id: '1',
|
|
|
|
|
id: "1",
|
|
|
|
|
operation: routeIdx,
|
|
|
|
|
type: 'showRoute',
|
|
|
|
|
type: "showRoute",
|
|
|
|
|
businessId: `${businessId}`,
|
|
|
|
|
param: `{"id":"${businessId}"}`
|
|
|
|
|
}
|
|
|
|
|
console.log('showRoute1', postData)
|
|
|
|
|
this.$refs.mapIframe.contentWindow.postMessage(postData, '*')
|
|
|
|
|
param: `{"id":"${businessId}"}`,
|
|
|
|
|
};
|
|
|
|
|
console.log("showRoute1", postData);
|
|
|
|
|
this.$refs.mapIframe.contentWindow.postMessage(postData, "*");
|
|
|
|
|
|
|
|
|
|
const _this = this
|
|
|
|
|
setTimeout(function() {
|
|
|
|
|
const _this = this;
|
|
|
|
|
setTimeout(function () {
|
|
|
|
|
const postData = {
|
|
|
|
|
id: '1',
|
|
|
|
|
id: "1",
|
|
|
|
|
operation: 1,
|
|
|
|
|
type: 'showRoute',
|
|
|
|
|
type: "showRoute",
|
|
|
|
|
businessId: `${businessId}`,
|
|
|
|
|
param: `{"id":"${businessId}"}`
|
|
|
|
|
}
|
|
|
|
|
console.log('showRoute2', postData)
|
|
|
|
|
_this.$refs.mapIframe.contentWindow.postMessage(postData, '*')
|
|
|
|
|
}, 2000)
|
|
|
|
|
param: `{"id":"${businessId}"}`,
|
|
|
|
|
};
|
|
|
|
|
console.log("showRoute2", postData);
|
|
|
|
|
_this.$refs.mapIframe.contentWindow.postMessage(postData, "*");
|
|
|
|
|
}, 2000);
|
|
|
|
|
|
|
|
|
|
this.gridPeoplePopup = false
|
|
|
|
|
this.gridPeoplePopup = false;
|
|
|
|
|
},
|
|
|
|
|
// 打开无人机
|
|
|
|
|
openUAVvideoPop() {
|
|
|
|
|
const _this = this
|
|
|
|
|
this.UAVvideoPop = true
|
|
|
|
|
const _this = this;
|
|
|
|
|
this.UAVvideoPop = true;
|
|
|
|
|
this.$nextTick(() => {
|
|
|
|
|
_this.flv_load_mds(_this.$refs.refWrjVideo, _this.videoURL)
|
|
|
|
|
})
|
|
|
|
|
_this.flv_load_mds(_this.$refs.refWrjVideo, _this.videoURL);
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
flv_load_mds(ref, url) {
|
|
|
|
|
const option = {
|
|
|
|
|
hasAudio: true,
|
|
|
|
|
hasVideo: true,
|
|
|
|
|
isLive: false,
|
|
|
|
|
type: 'flv',
|
|
|
|
|
type: "flv",
|
|
|
|
|
url: url,
|
|
|
|
|
withCredentials: false
|
|
|
|
|
}
|
|
|
|
|
withCredentials: false,
|
|
|
|
|
};
|
|
|
|
|
const player = flvjs.createPlayer(option, {
|
|
|
|
|
enableWorker: false,
|
|
|
|
|
lazyLoadMaxDuration: 3 * 60,
|
|
|
|
|
seekType: 'range'
|
|
|
|
|
})
|
|
|
|
|
console.log(player)
|
|
|
|
|
seekType: "range",
|
|
|
|
|
});
|
|
|
|
|
console.log(player);
|
|
|
|
|
|
|
|
|
|
player.attachMediaElement(ref)
|
|
|
|
|
player.load()
|
|
|
|
|
player.attachMediaElement(ref);
|
|
|
|
|
player.load();
|
|
|
|
|
},
|
|
|
|
|
// 无人机点击事件
|
|
|
|
|
clickBroad() {
|
|
|
|
|
this.UAVvideoPop = true
|
|
|
|
|
this.UAVvideoPop = true;
|
|
|
|
|
},
|
|
|
|
|
closeUAVvideoPop() {
|
|
|
|
|
this.UAVvideoPop = false
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
this.UAVvideoPop = false;
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
};
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
|
.left-box{
|
|
|
|
|
width: 20%;
|
|
|
|
|
}
|
|
|
|
|
.right-box{
|
|
|
|
|
width: 80%;
|
|
|
|
|
}
|
|
|
|
|
.contents {
|
|
|
|
|
height: 800px;
|
|
|
|
|
width: 1500px;
|
|
|
|
|
margin: 10px auto;
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
.ct-title {
|
|
|
|
|
height: 60px;
|
|
|
|
|
width: 100%;
|
|
|
|
|
background: rgb(21, 55, 88);
|
|
|
|
|
color: white;
|
|
|
|
|
font-family: SourceHanSansCN-Bold, sans-serif;
|
|
|
|
|
font-size: 32px;
|
|
|
|
|
font-weight: normal;
|
|
|
|
|
font-stretch: normal;
|
|
|
|
|
display: flex;
|
|
|
|
|
text-align: center;
|
|
|
|
|
line-height: 60px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.workStyle {
|
|
|
|
|
width: 1600px;
|
|
|
|
|
height: 908px;
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: calc(50% - 450px);
|
|
|
|
|
left: calc(50% - 1247px);
|
|
|
|
|
background: url(~@/assets/privateOrder/popup/gzlc.png) no-repeat 100% 100%;
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
z-index: 100;
|
|
|
|
|
}
|
|
|
|
|
.popup-video {
|
|
|
|
|
width: 1600px;
|
|
|
|
|
height: 908px;
|
|
|
|
|
@ -262,5 +381,4 @@ export default {
|
|
|
|
|
height: 800px;
|
|
|
|
|
top: 150px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
</style>
|
|
|
|
|
|
