285 lines
8.1 KiB
Vue
285 lines
8.1 KiB
Vue
<template>
|
|
<div
|
|
class="big-v1-wrap"
|
|
id="big-v1-wrap-id"
|
|
:style="{
|
|
'transformOrigin':'center top',
|
|
'transform':`scale(${scalseNum},${scalseNum})`,
|
|
'-webkit-transform':`scale(${scalseNum},${scalseNum})`,
|
|
'-moz-transform':`scale(${scalseNum},${scalseNum})`,
|
|
'-o-transform':`scale(${scalseNum},${scalseNum})`,
|
|
'-ms-transform':`scale(${scalseNum},${scalseNum})`
|
|
}"
|
|
>
|
|
<div class="main-block">
|
|
<head-wrap
|
|
ref="mainHead"
|
|
:handelTile="title"
|
|
:projectList="projectList"
|
|
@eventFullscreen="eventFullscreen"
|
|
@eventProjectId="eventProjectId"
|
|
@eventRegionalismId="eventRegionalismId"
|
|
></head-wrap>
|
|
<div class="count-wrap">
|
|
<div class="count-left">
|
|
<div class="left-block-1">
|
|
<device-proportion-wrap :projectId="projectId"></device-proportion-wrap>
|
|
<wraring-info-wrap :result="alarmInfoResult"></wraring-info-wrap>
|
|
</div>
|
|
<div class="map-block-1" :style="userLoginType !=='PERSONAL'?'border: 1px solid #0790b9;':''">
|
|
<map-wrap
|
|
v-if="userLoginType !=='PERSONAL'"
|
|
tempUserType="userLoginType"
|
|
:fullscreen="fullscreen"
|
|
:countResult="alarmInfoResult"
|
|
@eventFullscreen="eventFullscreenMap"
|
|
:projectList="projectList"
|
|
></map-wrap>
|
|
<map-wrap-personal
|
|
v-else
|
|
:fullscreen="fullscreen"
|
|
tempUserType="userLoginType"
|
|
:countResult="alarmInfoResult"
|
|
@eventFullscreen="eventFullscreenMap"
|
|
:projectList="projectList"
|
|
></map-wrap-personal>
|
|
</div>
|
|
<div class="bottom-block-1">
|
|
<alarm-table-list-wrap :projectId="projectId"></alarm-table-list-wrap>
|
|
</div>
|
|
</div>
|
|
<div class="right-block-1">
|
|
<today-ratio-wrap :result="resultInfo.warningAnalysisStatisticsVo || []"></today-ratio-wrap>
|
|
<type-distribution-wrap :result="resultInfo.alarmCategoriesList || []"></type-distribution-wrap>
|
|
<trend-wrap :result="resultInfo.alarmChartDataVo || []"></trend-wrap>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import HeadWrap from "./profile/head";
|
|
import DeviceProportionWrap from "./profile/deviceProportion";
|
|
import WraringInfoWrap from "./profile/wraringInfo";
|
|
import AlarmTableListWrap from "./profile/alarmTableList";
|
|
import TodayRatioWrap from "./profile/todayRatio";
|
|
import TypeDistributionWrap from "./profile/typeDistribution";
|
|
import trendWrap from "./profile/trend";
|
|
import MapWrap from "./profile/mapWrap";
|
|
import MapWrapPersonal from "./profile/personalCenter";
|
|
import { iotWebSocketAlarmBaseUrl } from "/public/js/config";
|
|
|
|
import { getWarningAnalysis, homeCount, appProjectList } from "@/api/app";
|
|
export default {
|
|
name: "Device_oneself",
|
|
components: {
|
|
HeadWrap,
|
|
DeviceProportionWrap,
|
|
WraringInfoWrap,
|
|
AlarmTableListWrap,
|
|
TodayRatioWrap,
|
|
TypeDistributionWrap,
|
|
trendWrap,
|
|
MapWrap,
|
|
MapWrapPersonal
|
|
},
|
|
data() {
|
|
return {
|
|
title: "智慧能源综合管理系统",
|
|
scalseNum: 1,
|
|
resultInfo: {},
|
|
alarmInfoResult: {},
|
|
projectList: [],
|
|
projectId: null,
|
|
regionalismId: null,
|
|
fullscreen: false,
|
|
thisScrollTopY: 0,
|
|
userLoginType: "",
|
|
stompClient: null,
|
|
socket_flag: true
|
|
};
|
|
},
|
|
mounted() {
|
|
// 计算缩放比例
|
|
this.resize_window();
|
|
this.userLoginType = this.$store.getters.userType;
|
|
this.thisScrollTopY = document.getElementById("con_lf_top_div").scrollTop;
|
|
document.getElementById("con_lf_top_div").style.background = "#021c80";
|
|
document.getElementById("con_lf_top_div").style.height =
|
|
"calc(100vh - 84px)";
|
|
document.getElementById("con_lf_top_div").style.overflow = "hidden";
|
|
document.getElementById("con_lf_top_div").scrollTop = 0;
|
|
window.addEventListener("resize", () => {
|
|
this.resize_window();
|
|
});
|
|
},
|
|
watch: {
|
|
$route(to, from) {
|
|
if (from.fullPath === '/index'){
|
|
document.getElementById("con_lf_top_div").style.background = "#fff";
|
|
} else if (to.fullPath === '/index') {
|
|
document.getElementById("con_lf_top_div").style.background = "#021c80";
|
|
}
|
|
}
|
|
},
|
|
created() {
|
|
document.getElementById("app").style.background = "#021c80";
|
|
this.getProjectList();
|
|
this.warningAnalysisList();
|
|
this.homeCount();
|
|
this.connection();
|
|
},
|
|
|
|
methods: {
|
|
// 创建一个ws 监听获取报警实时数据
|
|
connection() {
|
|
if (this.stompClient) {
|
|
return;
|
|
}
|
|
if (!iotWebSocketAlarmBaseUrl) {
|
|
return;
|
|
}
|
|
this.stompClient = new WebSocket(`${iotWebSocketAlarmBaseUrl}`);
|
|
this.stompClient.onmessage = this.socket_onmsg;
|
|
this.stompClient.onclose = this.socket_onclose;
|
|
},
|
|
socket_onmsg(evt) {
|
|
console.log("wsljcg:=", evt);
|
|
},
|
|
socket_onclose(e) {
|
|
this.stompClient = null;
|
|
if (this.socket_flag) {
|
|
this.socket_flag = false;
|
|
let _this = this;
|
|
setTimeout(function() {
|
|
_this.socket_flag = true;
|
|
_this.connection();
|
|
}, 10000);
|
|
}
|
|
},
|
|
// 跳转路由是关闭全屏状态
|
|
eventFullscreenMap(data) {
|
|
this.fullscreen = data.value;
|
|
this.$refs.mainHead["fullscreen"] = data.value;
|
|
},
|
|
// 全屏或者关闭 返回状态
|
|
eventFullscreen(data) {
|
|
this.fullscreen = data.value;
|
|
},
|
|
eventProjectId(data) {
|
|
this.projectId = data;
|
|
this.homeCount();
|
|
this.warningAnalysisList();
|
|
},
|
|
eventRegionalismId(data) {
|
|
this.regionalismId = data;
|
|
this.getProjectList();
|
|
},
|
|
resize_window() {
|
|
var w_height = 0;
|
|
if (this.fullscreen) {
|
|
w_height = Number(document.documentElement.clientHeight / 1080);
|
|
} else {
|
|
w_height = Number(document.documentElement.clientHeight / 1186);
|
|
}
|
|
this.scalseNum = w_height;
|
|
},
|
|
// 查询项目列表
|
|
getProjectList() {
|
|
if (this.$store.getters.userType !== 'PERSONAL') {
|
|
appProjectList({
|
|
regionalismId: this.regionalismId
|
|
}).then(response => {
|
|
this.projectList = response.data;
|
|
});
|
|
}
|
|
},
|
|
// 查询警情信息
|
|
homeCount() {
|
|
homeCount({
|
|
alarmDivide: "ALARM",
|
|
projectId: this.projectId
|
|
}).then(res => {
|
|
this.alarmInfoResult = res.data;
|
|
});
|
|
},
|
|
// 查询获取告警分析等数据
|
|
warningAnalysisList() {
|
|
getWarningAnalysis({
|
|
projectId: this.projectId
|
|
}).then(res => {
|
|
this.resultInfo = res.data;
|
|
});
|
|
}
|
|
},
|
|
destroyed() {
|
|
document.getElementById("app").style.background = "#fff";
|
|
document.getElementById("con_lf_top_div").style.background = "#fff";
|
|
document.getElementById("con_lf_top_div").style.overflow = "auto";
|
|
document.getElementById("con_lf_top_div").scrollTop = this.thisScrollTopY;
|
|
}
|
|
};
|
|
</script>
|
|
<style lang="scss">
|
|
.big-v1-wrap {
|
|
width: 100%;
|
|
height: calc(100vh - 85px);
|
|
display: flex;
|
|
justify-content: center;
|
|
background-image: url("../../../assets/images/big/bigpg_v1.jpg");
|
|
cursor: default;
|
|
.main-block {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
.count-wrap {
|
|
width: 100%;
|
|
height: calc(100% - 65px);
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
color: #fff;
|
|
background: #1531f508;
|
|
.count-left {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
width: calc(100% - 400px);
|
|
height: calc(100%);
|
|
.left-block-1 {
|
|
width: 400px;
|
|
height: calc(100% - 270px);
|
|
}
|
|
.map-block-1 {
|
|
width: calc(100% - 400px);
|
|
height: calc(100% - 270px);
|
|
}
|
|
|
|
.bottom-block-1 {
|
|
width: 100%;
|
|
height: 270px;
|
|
}
|
|
}
|
|
.right-block-1 {
|
|
width: 400px;
|
|
height: calc(100%);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.app-main {
|
|
width: 100%;
|
|
height: calc(100vh - 100px);
|
|
// background: #021c80;
|
|
}
|
|
.big-v1-wrap {
|
|
width: 1920px;
|
|
height: 1080px;
|
|
transform-origin: center top 0px;
|
|
position: relative;
|
|
left: 50%;
|
|
margin-left: -960px;
|
|
}
|
|
</style>
|
|
|