<template>
|
<div class="box">
|
<div id="sdkContainer"></div>
|
<header-box @fullScreen="fullScreen"></header-box>
|
<transition name="el-zoom-in-center" v-show="showlogo">
|
<menus @menusData="menusData"></menus>
|
</transition>
|
|
<transition name="el-zoom-in-top" v-show="showlogo">
|
<div class="right_box">
|
<poiList></poiList>
|
<div class="content">
|
<div class="left">
|
<dayzdmax v-if="checkMenuFlag == 'f1'"></dayzdmax>
|
<weekzdmax v-if="checkMenuFlag == 'f1'"></weekzdmax>
|
</div>
|
<div class="right">
|
<BGDC v-show="checkMenuFlag == 'a3'"></BGDC>
|
<report-list
|
:menusId="checkMenuFlag"
|
v-if="
|
checkMenuFlag == 'a4' ||
|
checkMenuFlag == 'a5' ||
|
checkMenuFlag == 'a6'
|
"
|
></report-list>
|
<SYFX
|
:SYPOIname="POIName"
|
@toggleFK="toggleFK"
|
v-if="checkMenuFlag == 'a2'"
|
></SYFX>
|
<SYFK
|
:SYPOIname="POIName"
|
:syfkData="syfkData"
|
v-if="showFk"
|
@FKclose="FKclose"
|
></SYFK>
|
<YCWG v-if="checkMenuFlag == 'b2'"></YCWG>
|
<div class="chart_box" v-if="chart_isshow">
|
<div class="popout_title">曲线统计图</div>
|
<div class="close" @click="popoutClose('QX')"></div>
|
<chart></chart>
|
</div>
|
|
<date-time-picker
|
:tpData="checkMenuFlag"
|
v-if="
|
checkMenuFlag == 'd21' ||
|
checkMenuFlag == 'd22' ||
|
checkMenuFlag == 'd23' ||
|
checkMenuFlag == 'd3'
|
"
|
@changeTime="changeTime"
|
></date-time-picker>
|
<div class="weather_box_c" v-show="checkMenuFlag == 'd6'">
|
<div class="popout_title">天气特效</div>
|
<!-- <div class="close" @click="popoutClose('HJ')"></div> -->
|
<weather></weather>
|
</div>
|
<SZSZ v-show="checkMenuFlag == 'e2'"></SZSZ>
|
|
<BJlist v-if="checkMenuFlag == 'c3'"></BJlist>
|
<YJlist v-if="checkMenuFlag == 'c2'"></YJlist>
|
<gjfx v-if="checkMenuFlag == 'f1'"></gjfx>
|
<zdmax v-if="checkMenuFlag == 'f1'"></zdmax>
|
</div>
|
</div>
|
</div>
|
</transition>
|
<div class="video_box" v-show="checkMenuFlag == 'e3'">
|
<video
|
:src="videoUrl"
|
controls="controls"
|
autoplay
|
muted
|
style="width: 100%"
|
></video>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import { useStore } from "vuex";
|
import { ref, reactive, onBeforeUnmount, onMounted, watch } from "vue";
|
import menuTool from "@/assets/js/menuTool";
|
//头部
|
import headerBox from "@/views/header.vue";
|
//地图方法
|
import InitMap from "@/assets/js/Map/index.js";
|
//左侧菜单
|
import menus from "@/views/menus.vue";
|
//智能报告
|
import BGDC from "@/components/BGDC.vue";
|
import reportList from "@/components/reportList.vue";
|
//溯源分析
|
import SYFX from "@/components/SYFX.vue";
|
import SYFK from "@/components/SYFK.vue";
|
//点位图表
|
import chart from "@/components/chart.vue";
|
//预测网格
|
import YCWG from "@/components/YCWG.vue";
|
//时间选择
|
import dateTimePicker from "@/components/dateTimePicker.vue";
|
|
//天气特效
|
import weather from "@/views/weather.vue";
|
//阈值设置
|
import SZSZ from "@/components/SZSZ.vue";
|
//预警报警
|
import BJlist from "@/components/BJlist.vue";
|
import YJlist from "@/components/YJlist.vue";
|
//点位列表
|
import poiList from "@/components/poiList.vue";
|
//统计图
|
import gjfx from "@/components/xgzs/gjfx.vue";
|
import zdmax from "@/components/xgzs/zdmax.vue";
|
import dayzdmax from "@/components/xgzs/dayzdmax.vue";
|
import weekzdmax from "@/components/xgzs/weekzdmax.vue";
|
import {
|
queryWeatherList,
|
queryLocaltion,
|
twodreliControllerbyt,
|
getRunAlarm,
|
getRunWarning,
|
} from "@/api/api.js";
|
export default {
|
components: {
|
headerBox,
|
menus,
|
BGDC,
|
SYFX,
|
SYFK,
|
chart,
|
YCWG,
|
dateTimePicker,
|
weather,
|
SZSZ,
|
YJlist,
|
BJlist,
|
poiList,
|
gjfx,
|
zdmax,
|
reportList,
|
dayzdmax,
|
weekzdmax,
|
},
|
setup(props, { emit }) {
|
const store = useStore();
|
const checkMenuFlag = ref("f1");
|
let POIName = ref("");
|
let syfkData = reactive({
|
SJvalue: "",
|
JLvalue: "",
|
SYPOIname: "",
|
date: "",
|
});
|
const showFk = ref(false);
|
let chart_isshow = ref(false);
|
let data = reactive({
|
histogram: null,
|
HeatMap: null,
|
});
|
let showlogo = ref(true);
|
let videoUrl = ref("");
|
//服饰按钮
|
const FSbtn = () => {
|
window.sgworld.Core.postMessage({ fu: "shi" });
|
};
|
//获取poi
|
const getPOI = async () => {
|
const dt = await queryLocaltion();
|
// console.log(dt);
|
|
var getjkList = [];
|
var getccList = [];
|
var getyzList = [];
|
var getssList = [];
|
dt.result.forEach((e) => {
|
if (e.type == "监控点") {
|
getjkList.push(e);
|
}
|
if (e.type == "超级站") {
|
getccList.push(e);
|
}
|
if (e.type == "有组织排放") {
|
getyzList.push(e);
|
}
|
if (e.type == "实时排放") {
|
getssList.push(e);
|
}
|
});
|
store.commit("getjkList", getjkList);
|
store.commit("getccList", getccList);
|
store.commit("getyzList", getyzList);
|
store.commit("getssList", getssList);
|
};
|
//俯视键盘快捷键
|
const keydownEvent = () => {
|
document.onkeydown = (e) => {
|
if (e.defaultPrevented) {
|
return;
|
}
|
const body = document.getElementsByTagName("body")[0];
|
// match(xxxx应填写文件在浏览器中的地址，不需要包括https、http或者www)，这里是为了防止其他页面触发
|
if (e.keyCode === 80 && e.target === body) {
|
// console.log("按下了回车键");
|
FSbtn(); //需要调用的方法
|
}
|
};
|
};
|
const menusData = (res) => {
|
chart_isshow.value = false;
|
showFk.value = false;
|
if (res.isActive) {
|
checkMenuFlag.value = res.id;
|
} else {
|
checkMenuFlag.value = null;
|
}
|
if (res.id == "e4") {
|
window.open(
|
`${
|
window.location.href.split("#")[0]
|
}config/燕山石化系统功能操作文档.pdf`
|
);
|
}
|
};
|
|
const toggleFK = (params) => {
|
syfkData.SJvalue = params.SJvalue;
|
syfkData.JLvalue = params.JLvalue;
|
syfkData.SYPOIname = params.SYPOIname;
|
(syfkData.date = params.date), (showFk.value = params.isShow);
|
// console.log(params);
|
};
|
//关闭弹框
|
function popoutClose(row) {
|
switch (row) {
|
case "QX":
|
if (data.histogram != null) {
|
data.histogram.deleteObject();
|
data.histogram = null;
|
}
|
if (data.HeatMap != null) {
|
data.HeatMap.deleteObject();
|
data.HeatMap = null;
|
}
|
chart_isshow.value = false;
|
|
break;
|
|
default:
|
break;
|
}
|
}
|
const FKclose = (res) => {
|
showFk.value = res;
|
};
|
const fullScreen = (res) => {
|
showlogo.value = res;
|
};
|
//风场污染物时间选择
|
const changeTime = (res) => {
|
console.log(res);
|
};
|
getPOI();
|
// menuTool.bjthis();
|
onMounted(() => {
|
keydownEvent();
|
InitMap.init3DMap();
|
videoUrl.value = window.location.href.split("#")[0] + videoJS;
|
});
|
//销毁 // 销毁定时器
|
onBeforeUnmount(() => {
|
let typearr = ["Billboard", "polygon", "polyline", "wall"];
|
typearr.forEach((e) => {
|
sgworld.ProjectTree.removeAll(e);
|
});
|
menuTool.delLine();
|
menuTool.closeSYWG();
|
menuTool.closePoi();
|
menuTool.delFC();
|
menuTool.delWRW();
|
sgworld.endPick();
|
});
|
watch(
|
() => store.state.SYPOI,
|
(nVal, oVal) => {
|
if (nVal) {
|
chart_isshow.value = true;
|
}
|
},
|
{ deep: true, immediate: true }
|
);
|
|
return {
|
menusData,
|
checkMenuFlag,
|
POIName,
|
syfkData,
|
toggleFK,
|
showFk,
|
chart_isshow,
|
popoutClose,
|
FKclose,
|
fullScreen,
|
showlogo,
|
changeTime,
|
videoUrl,
|
};
|
},
|
};
|
</script>
|
|
<style lang="less">
|
.box {
|
width: 100vw;
|
height: 100vh;
|
position: relative;
|
overflow: hidden;
|
.right_box {
|
position: absolute;
|
right: 70px;
|
top: 300px;
|
height: 80%;
|
overflow-y: scroll;
|
|
display: flex;
|
flex-direction: column;
|
align-items: flex-end;
|
.content {
|
display: flex;
|
justify-content: space-between;
|
align-content: center;
|
}
|
}
|
.right_box::-webkit-scrollbar {
|
width: 8px;
|
}
|
.right_box::-webkit-scrollbar-thumb {
|
border-radius: 10px;
|
background: rgba(0, 0, 0, 0.2);
|
}
|
.right_box::-webkit-scrollbar-track {
|
border-radius: 0;
|
background: rgba(0, 0, 0, 0);
|
}
|
|
#sdkContainer {
|
position: absolute;
|
top: 0;
|
left: 0;
|
width: 100%;
|
height: 100%;
|
|
// background: #000;
|
}
|
.chart_box {
|
// position: absolute;
|
// right: 70px;
|
// top: 490px;
|
width: calc(742px * 1.5);
|
// width: 1200px;
|
height: 640px;
|
padding: 40px;
|
box-sizing: border-box;
|
background: url("../assets/img/zbg.png") no-repeat center;
|
background-size: 100% 100%;
|
position: relative;
|
.close {
|
width: 22px;
|
height: 22px;
|
cursor: pointer;
|
background: url("../assets/img/close.png") center no-repeat;
|
background-size: 100% 100%;
|
position: absolute;
|
right: 50px;
|
top: 50px;
|
}
|
.popout_title {
|
font-size: 35px;
|
font-weight: bold;
|
color: #ffffff;
|
padding-bottom: 10px;
|
// position: absolute;
|
// left: 50px;
|
// top: 50px;
|
}
|
}
|
.weather_box_c {
|
// position: absolute;
|
// right: 20px;
|
// top: 490px;
|
position: relative;
|
width: 775px;
|
height: 427px;
|
padding: 50px;
|
box-sizing: border-box;
|
background: url("../assets/img/bgk.png") no-repeat center;
|
background-size: 100% 100%;
|
.popout_title {
|
font-size: 30px;
|
font-weight: bold;
|
color: #ffffff;
|
padding-bottom: 10px;
|
// position: absolute;
|
// left: 50px;
|
// top: 50px;
|
}
|
}
|
.video_box {
|
width: 50%;
|
bottom: 21%;
|
position: absolute;
|
left: 23%;
|
}
|
.video_box_close {
|
width: 100%;
|
background: #333333;
|
cursor: pointer;
|
}
|
}
|
</style>
|
