|
@@ -1,116 +1,486 @@
|
|
|
<template>
|
|
|
- <div class="header">1111</div>
|
|
|
- <div class="container-box">
|
|
|
- <div class="left-box lr-box">
|
|
|
- <div class="lr-top air-monitor">
|
|
|
-
|
|
|
+ <div style="position: relative; width: 100%; height: 100%">
|
|
|
+ <div class="home-container" v-if="pageType == 'home'">
|
|
|
+ <div class="header">
|
|
|
+ <div class="head-time">
|
|
|
+ <span>{{ nowTime }}</span>
|
|
|
+ <span>{{ weeks }}</span>
|
|
|
+ <span>{{ timeDate }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="main-title">通防智能管控系统</div>
|
|
|
</div>
|
|
|
- <div class="lr-bottom warning-monitor"></div>
|
|
|
- </div>
|
|
|
- <div class="center-box ">
|
|
|
- <div class="center-container file-list"></div>
|
|
|
- </div>
|
|
|
- <div class="right-box lr-box">
|
|
|
- <div class="lr-top scene-monitor"></div>
|
|
|
- <div class="lr-bottom tunnel-statistic">
|
|
|
-
|
|
|
+ <div class="home-contents">
|
|
|
+ <div class="left-content">
|
|
|
+ <!-- 主通风机 -->
|
|
|
+ <div class="monitor-box">
|
|
|
+ <mainMonitor :maindata="mainList" @goDetail="goDetail" />
|
|
|
+ </div>
|
|
|
+ <!-- 局部通风机 -->
|
|
|
+ <div class="monitor-box monitor-box1">
|
|
|
+ <fanMonitor @goDetail="goDetail" :fandata="fanLocalList" />
|
|
|
+ </div>
|
|
|
+ <!-- 通风设备远程控制 -->
|
|
|
+ <div class="monitor-box">
|
|
|
+ <windDevice :devicedata="deviceData" @goDetail="goDetail" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="center-content">
|
|
|
+ <!-- 三维模型 -->
|
|
|
+ <div class="three-box">
|
|
|
+ <div class="three-nav">
|
|
|
+ <div class="nav-item" v-for="(item, index) in navList" :key="index">
|
|
|
+ <div class="item-label">{{ item.name }}</div>
|
|
|
+ <div class="item-value">
|
|
|
+ <div v-if="item.isShow" class="bg-box" v-for="(ite, ind) in item.valList" :key="ind">
|
|
|
+ <div class="box-line"></div>
|
|
|
+ <div class="value-text">{{ ite.val }}</div>
|
|
|
+ </div>
|
|
|
+ <div v-else class="value-text1">{{ item.val }}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="three-modal" id="modalBox">
|
|
|
+ <div class="btn-icon"></div>
|
|
|
+ <!-- <iframe
|
|
|
+ id="iframe"
|
|
|
+ ref="iframe"
|
|
|
+ src="http://182.92.126.35:8091/user/autologin"
|
|
|
+ scrolling="auto"
|
|
|
+ frameborder="0"
|
|
|
+ width="100%"
|
|
|
+ height="100%"
|
|
|
+ ></iframe> -->
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 风量监测 -->
|
|
|
+ <div class="wind-box">
|
|
|
+ <windMonitor :flList="flList" @goDetail="goDetail" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="right-content">
|
|
|
+ <!-- 关键通风路线 -->
|
|
|
+ <div class="monitor-box">
|
|
|
+ <windLine :lineList="lineList" @goDetail="goDetail" />
|
|
|
+ </div>
|
|
|
+ <!-- 工作面智能管控 -->
|
|
|
+ <div class="monitor-box monitor-box1">
|
|
|
+ <workMonitor :workList="workList" @goDetail="goDetail" />
|
|
|
+ </div>
|
|
|
+ <!-- 设备预警 -->
|
|
|
+ <div class="monitor-box">
|
|
|
+ <deviceWarn :warnData="warnData" @goDetail="goDetail" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
+ <DeviceMonitor v-else-if="pageType" :pageType="pageType" @goHome="goHome" />
|
|
|
+ <div id="content" style="width: 100%; height: 100%; position: fixed"></div>
|
|
|
</div>
|
|
|
</template>
|
|
|
<script lang="ts" setup>
|
|
|
+import { reactive, onMounted, ref, nextTick, computed } from 'vue';
|
|
|
+import fanMonitor from './components/fan-monitor.vue';
|
|
|
+import mainMonitor from './components/main-monitor.vue';
|
|
|
+import windDevice from './components/wind-device.vue';
|
|
|
+import windMonitor from './components/wind-monitor.vue';
|
|
|
+import windLine from './components/wind-line.vue';
|
|
|
+import workMonitor from './components/work-monitor.vue';
|
|
|
+import deviceWarn from './components/device-warn.vue';
|
|
|
+import { useGlobSetting } from '/@/hooks/setting';
|
|
|
+import { list } from './clique.api';
|
|
|
+import DeviceMonitor from '../../monitorManager/deviceMonitor/index.vue';
|
|
|
+import { useRouter } from 'vue-router';
|
|
|
+// import { Modal } from 'ant-design-vue';
|
|
|
+// import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
|
|
|
+import moment from 'moment';
|
|
|
+
|
|
|
+let timer: NodeJS.Timeout | null = null;
|
|
|
+let fanLocalList = reactive<any[]>([]); //局部风机数据
|
|
|
+let mainList = ref<any[]>([]); //主通风机数据
|
|
|
+let centerList = reactive<any[]>([]); //中间区域数据
|
|
|
+let flList = ref<any[]>([]); //风量监测数据
|
|
|
+let lineList = ref<any>([]); //关键路线数据
|
|
|
+let workList = ref<any>([]); //工作面数据
|
|
|
+let warnData = ref<any>([]); //预警数据
|
|
|
+let deviceData = ref<any>({}); //设备监测数据
|
|
|
+let navList = reactive([
|
|
|
+ { name: '总风量(m³/min)', isShow: true, valList: [] },
|
|
|
+ { name: '需风量(m³/min)', isShow: true, valList: [] },
|
|
|
+ { name: '等积孔(m²)', isShow: true, valList: [{ val: '1' }, { val: '0' }, { val: '.' }, { val: '5' }, { val: '4' }] },
|
|
|
+ { name: '外部漏风率', isShow: false, val: 0 },
|
|
|
+ { name: '有效风量率', isShow: false, val: 0 },
|
|
|
+]);
|
|
|
+
|
|
|
+const globSetting = useGlobSetting();
|
|
|
+const pageType = ref('home');
|
|
|
+let router = useRouter();
|
|
|
+
|
|
|
+function goDetail(deviceType) {
|
|
|
+ // Modal.confirm({
|
|
|
+ // content: () => '暂未连接井下设备!',
|
|
|
+ // icon: () => createVNode(ExclamationCircleOutlined),
|
|
|
+ // title: '消息提示',
|
|
|
+ // onOk() {
|
|
|
+ // return new Promise((resolve, reject) => {
|
|
|
+ // setTimeout(Math.random() > 0.5 ? resolve : reject, 1000);
|
|
|
+ // }).catch(() => console.log('Oops errors!'));
|
|
|
+ // },
|
|
|
+ // cancelText: () => '取消',
|
|
|
+ // onCancel() {
|
|
|
+ // Modal.destroyAll();
|
|
|
+ // },
|
|
|
+ // });
|
|
|
+
|
|
|
+ //lxh
|
|
|
+ // pageType.value = deviceType;
|
|
|
+ // changeModalBox();
|
|
|
+ if (deviceType == 'zhu') {
|
|
|
+ router.push('/monitorChannel/monitor-fan-main');
|
|
|
+ } else if (deviceType == 'ju') {
|
|
|
+ router.push('/monitorChannel/monitor-fan-local');
|
|
|
+ } else {
|
|
|
+ router.push('/monitorChannel/monitor-gate');
|
|
|
+ }
|
|
|
+}
|
|
|
+function goHome() {
|
|
|
+ pageType.value = 'home';
|
|
|
+ nextTick(() => {
|
|
|
+ changeModalBox();
|
|
|
+ });
|
|
|
+}
|
|
|
+function changeModalBox() {
|
|
|
+ if (pageType.value === 'home') {
|
|
|
+ const dom = document.getElementById('modalBox') as HTMLElement;
|
|
|
+ if (dom && dom.parentElement) {
|
|
|
+ const contentDom = document.getElementById('content') as HTMLElement;
|
|
|
+ contentDom?.setAttribute(
|
|
|
+ 'style',
|
|
|
+ `top: ${dom.parentElement.offsetTop + 20}px; left: ${dom.parentElement.offsetLeft + 20}px; width: ${dom.offsetWidth - 40}px; height: ${dom.offsetHeight - 40
|
|
|
+ }px; position: fixed;`
|
|
|
+ );
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ const dom = document.getElementById('modalBox') as HTMLElement;
|
|
|
+ if (dom && dom.parentElement) {
|
|
|
+ const contentDom = document.getElementById('content') as HTMLElement;
|
|
|
+ contentDom?.setAttribute('style', `top:0px; left: 0px; width: 100%; height: 100%; position: fixed;`);
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+function getList() {
|
|
|
+ list({}).then((res) => {
|
|
|
+ console.log(res, 'res-----------');
|
|
|
+ fanLocalList.length = 0;
|
|
|
+ fanLocalList.push(res.fanlocal);
|
|
|
+ mainList.value = res.fanmain;
|
|
|
+ centerList = res.midinfo[0].sysdata;
|
|
|
+ navList[0].valList = centerList.zongfengliang
|
|
|
+ ? centerList.zongfengliang.split('').map((el) => {
|
|
|
+ return { val: el };
|
|
|
+ })
|
|
|
+ : [];
|
|
|
+ navList[1].valList = centerList.xufengliang
|
|
|
+ ? centerList.xufengliang
|
|
|
+ .toString()
|
|
|
+ .split('')
|
|
|
+ .map((el) => {
|
|
|
+ return { val: el };
|
|
|
+ })
|
|
|
+ : [];
|
|
|
+
|
|
|
+ if (centerList.zongfengliang && centerList.zonghuifeng) {
|
|
|
+ navList[3].val =
|
|
|
+ (((parseFloat(centerList.zongfengliang) - parseFloat(centerList.zonghuifeng)) / parseFloat(centerList.zonghuifeng)) * 100).toFixed(2) + '%';
|
|
|
+ navList[4].val = ((centerList.xufengliang / parseFloat(centerList.zongfengliang)) * 100).toFixed(2) + '%';
|
|
|
+ } else {
|
|
|
+ navList[3].val = '0%';
|
|
|
+ navList[4].val = '0%';
|
|
|
+ }
|
|
|
|
|
|
+ flList.value = res.windrect;
|
|
|
+ lineList.value = res.sys_majorpath;
|
|
|
+ workList.value = res.sys_surface_caimei;
|
|
|
+ warnData.value = res.warn;
|
|
|
+ deviceData.value = res.device;
|
|
|
+ });
|
|
|
+}
|
|
|
+let weeks = computed(() => {
|
|
|
+ let week = moment(new Date().getTime()).day();
|
|
|
+ switch (week) {
|
|
|
+ case 0:
|
|
|
+ return '星期日';
|
|
|
+ break;
|
|
|
+ case 1:
|
|
|
+ return '星期一';
|
|
|
+ break;
|
|
|
+ case 2:
|
|
|
+ return '星期二';
|
|
|
+ break;
|
|
|
+ case 3:
|
|
|
+ return '星期三';
|
|
|
+ break;
|
|
|
+ case 4:
|
|
|
+ return '星期四';
|
|
|
+ break;
|
|
|
+ case 5:
|
|
|
+ return '星期五';
|
|
|
+ break;
|
|
|
+ case 6:
|
|
|
+ return '星期六';
|
|
|
+ break;
|
|
|
+ }
|
|
|
+});
|
|
|
+let nowTime = computed(() => {
|
|
|
+ return moment().format('YYYY/MM/DD');
|
|
|
+});
|
|
|
+let timeDate = computed(() => {
|
|
|
+ return moment().format('HH:MM:SS');
|
|
|
+});
|
|
|
+onMounted(() => {
|
|
|
+ getList();
|
|
|
+ changeModalBox();
|
|
|
+ const renderModal = () => {
|
|
|
+ const element = document.getElementById('__qiankun_microapp_wrapper_for_micro_vent_3_d_modal__');
|
|
|
+ if (element) {
|
|
|
+ element?.setAttribute('style', 'width: 100%; height: 100%');
|
|
|
+ } else {
|
|
|
+ setTimeout(() => {
|
|
|
+ renderModal();
|
|
|
+ }, 2000);
|
|
|
+ }
|
|
|
+ };
|
|
|
+ renderModal();
|
|
|
+ timer = Number(
|
|
|
+ setInterval(() => {
|
|
|
+ getList();
|
|
|
+ }, 10000)
|
|
|
+ );
|
|
|
+});
|
|
|
</script>
|
|
|
+
|
|
|
<style lang="less" scoped>
|
|
|
-.header {
|
|
|
- width: 100%;
|
|
|
- height: 100px;
|
|
|
- background-color: #ffffff11;
|
|
|
+@font-face {
|
|
|
+ font-family: 'douyuFont';
|
|
|
+ src: url('../../../../assets/font/douyuFont.otf');
|
|
|
}
|
|
|
|
|
|
-.container-box {
|
|
|
- height: calc(100% - 32px);
|
|
|
- display: flex;
|
|
|
- margin: 16px 10px;
|
|
|
+@font-face {
|
|
|
+ font-family: 'yjsz';
|
|
|
+ src: url('../../../../assets/font/yjsz.TTF');
|
|
|
+}
|
|
|
|
|
|
- .lr-box {
|
|
|
- width: 400px;
|
|
|
- height: calc(100% - 50px);
|
|
|
+.home-container {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ .header {
|
|
|
+ width: 100%;
|
|
|
+ height: 76px;
|
|
|
position: relative;
|
|
|
- top: -50px;
|
|
|
- background-color: #ffffff11;
|
|
|
- }
|
|
|
+ background: url('../../../../assets//images//home-container/header-nav.png') no-repeat;
|
|
|
|
|
|
- .center-box {
|
|
|
- flex: 1;
|
|
|
- margin: 0 16px;
|
|
|
+ .head-time {
|
|
|
+ position: absolute;
|
|
|
+ top: 14px;
|
|
|
+ left: 15px;
|
|
|
+ color: #b5c9e9;
|
|
|
+ font-size: 14px;
|
|
|
|
|
|
- .center-container {
|
|
|
- height: 500px;
|
|
|
- position: fixed;
|
|
|
- bottom: 0;
|
|
|
- background-color: #ffffff11;
|
|
|
+ span {
|
|
|
+ margin-right: 20px;
|
|
|
+ letter-spacing: 2px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .main-title {
|
|
|
+ position: absolute;
|
|
|
+ left: 50%;
|
|
|
+ top: 50%;
|
|
|
+ transform: translate(-50%, -50%);
|
|
|
+ color: #fff;
|
|
|
+ font-size: 24px;
|
|
|
+ font-family: 'douyuFont';
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- .air-monitor {
|
|
|
- .column-header {
|
|
|
- width: 100%;
|
|
|
+ .home-contents {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ height: calc(100% - 76px);
|
|
|
+ padding: 10px;
|
|
|
+ box-sizing: border-box;
|
|
|
+
|
|
|
+ .left-content {
|
|
|
display: flex;
|
|
|
- justify-content: center;
|
|
|
- color: aqua;
|
|
|
- height: 80px;
|
|
|
- line-height: 80px;
|
|
|
-
|
|
|
- .header-item {
|
|
|
- width: 25%;
|
|
|
- text-align: center;
|
|
|
+ flex-direction: column;
|
|
|
+ flex: 1;
|
|
|
+ justify-content: space-between;
|
|
|
+ height: 100%;
|
|
|
+
|
|
|
+ .monitor-box {
|
|
|
+ display: flex;
|
|
|
+ flex: 1;
|
|
|
+ width: 100%;
|
|
|
+ background: url('../../../../assets/images/home-container/dialog.png') no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .monitor-box1 {
|
|
|
+ margin: 10px 0px;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- .column-container {
|
|
|
- height: 400px;
|
|
|
- overflow-y: auto;
|
|
|
+ .center-content {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: space-between;
|
|
|
+ flex: 2;
|
|
|
+ height: 100%;
|
|
|
+ margin: 0px 10px;
|
|
|
+
|
|
|
+ .three-box {
|
|
|
+ position: relative;
|
|
|
+ display: flex;
|
|
|
+ background-color: #fff;
|
|
|
+ flex: 2;
|
|
|
+ width: 100%;
|
|
|
+ margin-bottom: 15px;
|
|
|
+ background: url('../../../../assets/images/home-container/three-dialog.png') no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
|
|
|
- &:hover {
|
|
|
- overflow-y: auto;
|
|
|
+ .three-nav {
|
|
|
+ position: absolute;
|
|
|
+ z-index: 9999;
|
|
|
+ left: 50%;
|
|
|
+ top: 38px;
|
|
|
+ transform: translate(-50%, 0);
|
|
|
+ width: 812px;
|
|
|
+ height: 89px;
|
|
|
+ padding: 0px 20px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-around;
|
|
|
+ align-items: center;
|
|
|
+ background: url('../../../../assets/images/home-container/three-nav.png') no-repeat;
|
|
|
|
|
|
- &>.column-item {
|
|
|
- animation-play-state: paused;
|
|
|
- // animation: move1 2s linear;
|
|
|
+ .nav-item {
|
|
|
+ display: flex;
|
|
|
+ flex: 1;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: space-around;
|
|
|
+ align-items: center;
|
|
|
+ height: 80%;
|
|
|
+
|
|
|
+ .item-label {
|
|
|
+ color: #98f5ff;
|
|
|
+ }
|
|
|
+
|
|
|
+ .item-value {
|
|
|
+ position: relative;
|
|
|
+ width: 125px;
|
|
|
+ height: 37px;
|
|
|
+ padding: 0px 5px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ background: url('../../../../assets/images/home-container/item-value.png') no-repeat;
|
|
|
+
|
|
|
+ .bg-box {
|
|
|
+ position: relative;
|
|
|
+ width: 20px;
|
|
|
+ height: 26px;
|
|
|
+ border-bottom: 2px solid #063493;
|
|
|
+ background: linear-gradient(to right, rgba(1, 194, 249), rgba(0, 125, 252));
|
|
|
+
|
|
|
+ .box-line {
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ top: 50%;
|
|
|
+ transform: translate(0, -50%);
|
|
|
+ height: 1px;
|
|
|
+ width: 100%;
|
|
|
+ background-color: rgba(6, 52, 147, 0.6);
|
|
|
+ }
|
|
|
+
|
|
|
+ .value-text {
|
|
|
+ position: absolute;
|
|
|
+ left: 50%;
|
|
|
+ top: 50%;
|
|
|
+ transform: translate(-50%, -50%);
|
|
|
+ color: #fff;
|
|
|
+ font-size: 22px;
|
|
|
+ font-family: 'yjsz';
|
|
|
+ font-weight: 500;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .value-text1 {
|
|
|
+ width: 100%;
|
|
|
+ text-align: center;
|
|
|
+ color: #fff;
|
|
|
+ font-size: 22px;
|
|
|
+ font-family: 'yjsz';
|
|
|
+ font-weight: 500;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .three-modal {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ padding: 20px 17px 20px 15px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ .btn-icon {
|
|
|
+ width: 34px;
|
|
|
+ height: 34px;
|
|
|
+ background: url('../../../../assets/assets/image/home/tobig.png') center no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ position: absolute;
|
|
|
+ z-index: 99999;
|
|
|
+ bottom: 0;
|
|
|
+ right: 0;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- .column-item {
|
|
|
- width: 100%;
|
|
|
+ .wind-box {
|
|
|
display: flex;
|
|
|
- justify-content: center;
|
|
|
- color: #fff;
|
|
|
- height: 60px;
|
|
|
- animation: move 10s linear infinite;
|
|
|
-
|
|
|
- .item-column {
|
|
|
- width: 25%;
|
|
|
- text-align: center;
|
|
|
- }
|
|
|
+ flex: 1;
|
|
|
+ width: 100%;
|
|
|
+ background: url('../../../../assets/images/home-container/dialog1.png') no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- @keyframes move {
|
|
|
- 0% {
|
|
|
- transform: translateY(0px);
|
|
|
- }
|
|
|
+ .right-content {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: space-between;
|
|
|
+ flex: 1;
|
|
|
+ height: 100%;
|
|
|
|
|
|
- 100% {
|
|
|
- transform: translateY(-269px);
|
|
|
+ .monitor-box {
|
|
|
+ display: flex;
|
|
|
+ flex: 1;
|
|
|
+ width: 100%;
|
|
|
+ background: url('../../../../assets/images/home-container/dialog.png') no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
}
|
|
|
- }
|
|
|
|
|
|
- @keyframes move1 {
|
|
|
- 0% {
|
|
|
- transform: translateY(0px);
|
|
|
+ .monitor-box1 {
|
|
|
+ margin: 10px 0px;
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
}
|
|
|
-}</style>
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+// #__qiankun_microapp_wrapper_for_micro_vent_3_d_modal__{
|
|
|
+// width: 100% !important;
|
|
|
+// height: 100% !important;
|
|
|
+// }</style>
|