|
|
@@ -7,9 +7,8 @@
|
|
|
<span>{{ nowTimeWeek }}</span>
|
|
|
<span>{{ nowTime }}</span>
|
|
|
</div>
|
|
|
- <div class="main-title"
|
|
|
- ><img v-if="hasPermission('home:logo')" class="logo" :src="`${baseUrl}/sys/common/static/${logoUrl}`" />{{ title }}</div
|
|
|
- >
|
|
|
+ <div class="main-title"><img v-if="hasPermission('home:logo')" class="logo"
|
|
|
+ :src="`${baseUrl}/sys/common/static/${logoUrl}`" />{{ title }}</div>
|
|
|
</div>
|
|
|
<div class="home-contents">
|
|
|
<div class="left-content">
|
|
|
@@ -49,10 +48,8 @@
|
|
|
<!-- <div class="btn-icon" @click="goModalDetail"></div> -->
|
|
|
<!-- 展会不显示按钮 -->
|
|
|
<div v-if="sysOrgCode !== 'mkyzhpt'" class="btn-icon" @click="goModalDetail"></div>
|
|
|
- <VentModal
|
|
|
- ref="centerModalRef"
|
|
|
- style="width: calc(100% - 30px); height: calc(100% - 30px); position: absolute; background-color: #fff"
|
|
|
- />
|
|
|
+ <VentModal ref="centerModalRef"
|
|
|
+ style="width: calc(100% - 30px); height: calc(100% - 30px); position: absolute; background-color: #fff" />
|
|
|
</div>
|
|
|
</div>
|
|
|
<!-- 风量监测 -->
|
|
|
@@ -77,482 +74,482 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <Network ref="NetworkRef" v-if="pageType == 'timesolution'" :pageResult="pageResult" @changePageType="changePageType" style="position: absolute" />
|
|
|
- <VentModal
|
|
|
- v-if="pageType == 'model3D' || pageType == 'timesolution'"
|
|
|
- ref="fullModalRef"
|
|
|
- style="width: calc(100% - 30px); height: calc(100% - 30px); position: absolute"
|
|
|
- />
|
|
|
+ <Network ref="NetworkRef" v-if="pageType == 'timesolution'" :pageResult="pageResult" @changePageType="changePageType"
|
|
|
+ style="position: absolute" />
|
|
|
+ <VentModal v-if="pageType == 'model3D' || pageType == 'timesolution'" ref="fullModalRef"
|
|
|
+ style="width: calc(100% - 30px); height: calc(100% - 30px); position: absolute" />
|
|
|
</template>
|
|
|
<script lang="ts" setup>
|
|
|
- import { reactive, onMounted, ref, nextTick, computed, unref, inject, onBeforeUnmount, onUnmounted } 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 Network from '../../monitorManager/deviceMonitor/components/network/index.vue';
|
|
|
- import { useRouter } from 'vue-router';
|
|
|
- import { router } from '/@/router';
|
|
|
- // import { Modal } from 'ant-design-vue';
|
|
|
- // import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
|
|
|
- import dayjs from 'dayjs';
|
|
|
- import { getActions } from '/@/qiankun/state';
|
|
|
- import { unmountMicroApps, mountMicroApp } from '/@/qiankun';
|
|
|
- import { getDate } from './clique.data';
|
|
|
- import VentModal from '/@/components/vent/micro/ventModal.vue';
|
|
|
- import { usePermission } from '/@/hooks/web/usePermission';
|
|
|
-
|
|
|
- const { currentRoute } = useRouter();
|
|
|
- const { hasPermission } = usePermission();
|
|
|
-
|
|
|
- const { title, logoUrl, sysOrgCode } = useGlobSetting();
|
|
|
- const baseUrl = VUE_APP_URL.baseUrl;
|
|
|
- const actions = getActions();
|
|
|
- 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³/min)', isShow: true, valList: [] },
|
|
|
- // { name: '有效风量(m³/min)', isShow: true, valList: [] },
|
|
|
- // { name: '等积孔(m²)', isShow: true, valList: [] },
|
|
|
- { name: '有效风量率', isShow: false, val: '0%' },
|
|
|
- { name: '外部漏风率', isShow: false, val: 0 },
|
|
|
- ]);
|
|
|
- let nowTimeYear = ref('');
|
|
|
- let nowTimeWeek = ref('');
|
|
|
- let nowTime = ref('');
|
|
|
-
|
|
|
- const centerModalRef = ref();
|
|
|
- const fullModalRef = ref();
|
|
|
-
|
|
|
- const pageType = ref('');
|
|
|
- let router = useRouter();
|
|
|
- const pageResult = ref({});
|
|
|
-
|
|
|
- function goDetail(deviceType) {
|
|
|
- //lxh
|
|
|
- // pageType.value = deviceType;
|
|
|
- if (deviceType == 'fanMain') {
|
|
|
- router.push('/monitorChannel/monitor-fanmain');
|
|
|
- } else if (deviceType == 'fanLocal') {
|
|
|
- if (sysOrgCode !== 'ymdnymdn') {
|
|
|
- router.push('/monitorChannel/monitor-fanlocal');
|
|
|
- } else {
|
|
|
- router.push('/fanlocal-page/home');
|
|
|
- }
|
|
|
- } else if (deviceType == 'windrect') {
|
|
|
- router.push('/monitorChannel/monitor-windrect');
|
|
|
- } else if (deviceType == 'warning') {
|
|
|
- router.push('/monitorChannel/monitor-alarm-home');
|
|
|
+import { reactive, onMounted, ref, nextTick, computed, unref, inject, onBeforeUnmount, onUnmounted } 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 Network from '../../monitorManager/deviceMonitor/components/network/index.vue';
|
|
|
+import { useRouter } from 'vue-router';
|
|
|
+import { router } from '/@/router';
|
|
|
+// import { Modal } from 'ant-design-vue';
|
|
|
+// import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
|
|
|
+import dayjs from 'dayjs';
|
|
|
+import { getActions } from '/@/qiankun/state';
|
|
|
+import { unmountMicroApps, mountMicroApp } from '/@/qiankun';
|
|
|
+import { getDate } from './clique.data';
|
|
|
+import VentModal from '/@/components/vent/micro/ventModal.vue';
|
|
|
+import { usePermission } from '/@/hooks/web/usePermission';
|
|
|
+
|
|
|
+const { currentRoute } = useRouter();
|
|
|
+const { hasPermission } = usePermission();
|
|
|
+
|
|
|
+const { title, logoUrl, sysOrgCode } = useGlobSetting();
|
|
|
+const baseUrl = VUE_APP_URL.baseUrl;
|
|
|
+const actions = getActions();
|
|
|
+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³/min)', isShow: true, valList: [] },
|
|
|
+ // { name: '有效风量(m³/min)', isShow: true, valList: [] },
|
|
|
+ // { name: '等积孔(m²)', isShow: true, valList: [] },
|
|
|
+ { name: '有效风量率', isShow: false, val: '0%' },
|
|
|
+ { name: '外部漏风率', isShow: false, val: 0 },
|
|
|
+]);
|
|
|
+let nowTimeYear = ref('');
|
|
|
+let nowTimeWeek = ref('');
|
|
|
+let nowTime = ref('');
|
|
|
+
|
|
|
+const centerModalRef = ref();
|
|
|
+const fullModalRef = ref();
|
|
|
+
|
|
|
+const pageType = ref('');
|
|
|
+let router = useRouter();
|
|
|
+const pageResult = ref({});
|
|
|
+
|
|
|
+function goDetail(deviceType) {
|
|
|
+ //lxh
|
|
|
+ // pageType.value = deviceType;
|
|
|
+ if (deviceType == 'fanMain') {
|
|
|
+ router.push('/monitorChannel/monitor-fanmain');
|
|
|
+ } else if (deviceType == 'fanLocal') {
|
|
|
+ if (sysOrgCode !== 'ymdnymdn') {
|
|
|
+ router.push('/monitorChannel/monitor-fanlocal');
|
|
|
+ } else {
|
|
|
+ router.push('/fanlocal-page/home');
|
|
|
}
|
|
|
+ } else if (deviceType == 'windrect') {
|
|
|
+ router.push('/monitorChannel/monitor-windrect');
|
|
|
+ } else if (deviceType == 'warning') {
|
|
|
+ router.push('/monitorChannel/monitor-alarm-home');
|
|
|
+ } else if (deviceType.deviceType == 'majorpath') {
|
|
|
+ router.push(`/micro-vent-3dModal/dashboard/analysis?type=tunMonitor&deviceType=sys_majorpath&deviceid=${deviceType.id}`);
|
|
|
}
|
|
|
- function goHome() {
|
|
|
- pageType.value = 'home';
|
|
|
- }
|
|
|
-
|
|
|
- function getList() {
|
|
|
- list({}).then((res) => {
|
|
|
- fanLocalList.length = 0;
|
|
|
- fanLocalList.push(res.fanlocal);
|
|
|
- mainList.value = res.fanmain || [];
|
|
|
- if (res.midinfo[0].sysdata) {
|
|
|
- centerList = res.midinfo[0].sysdata;
|
|
|
- // 总回
|
|
|
- navList[0].valList =
|
|
|
- centerList && centerList.zonghuifeng
|
|
|
- ? centerList.zonghuifeng.split('').map((el) => {
|
|
|
- return { val: el };
|
|
|
- })
|
|
|
- : [];
|
|
|
- // 总进
|
|
|
- navList[1].valList =
|
|
|
- centerList && centerList.zongjinfeng
|
|
|
- ? centerList.zongjinfeng
|
|
|
- .toString()
|
|
|
- .split('')
|
|
|
- .map((el) => {
|
|
|
- return { val: el };
|
|
|
- })
|
|
|
- : [];
|
|
|
- // 计划风量
|
|
|
- navList[2].valList =
|
|
|
- centerList && centerList.xufengliang
|
|
|
- ? centerList.xufengliang
|
|
|
- .toString()
|
|
|
- .split('')
|
|
|
- .map((el) => {
|
|
|
- return { val: el };
|
|
|
- })
|
|
|
- : [];
|
|
|
- // 有效风量率
|
|
|
- navList[3].val = `${res.midinfo[0].sysinfo.useM3Perent}%` || '--';
|
|
|
-
|
|
|
- // 外部漏风率
|
|
|
- navList[4].val =
|
|
|
- (
|
|
|
- ((Number(res.midinfo[0].sysdata.zongfengliang) - Number(res.midinfo[0].sysdata.zongjinfeng)) /
|
|
|
- Number(res.midinfo[0].sysdata.zongfengliang)) *
|
|
|
- 100
|
|
|
- ).toFixed(1) + '%';
|
|
|
- }
|
|
|
- flList.value = res.windrect || res.sys_wind;
|
|
|
-
|
|
|
- if (res.sys_majorpath.length != 0) {
|
|
|
- lineList.value = res.sys_majorpath;
|
|
|
- } else {
|
|
|
- let paramArr: any = [];
|
|
|
- lineList.value = paramArr;
|
|
|
- }
|
|
|
-
|
|
|
- if (res.sys_surface_caimei.length != 0) {
|
|
|
- workList.value = res.sys_surface_caimei;
|
|
|
- } else {
|
|
|
- let paramArr: any = [];
|
|
|
- workList.value = getDate(paramArr);
|
|
|
- }
|
|
|
-
|
|
|
- warnData.value = res.warn || [];
|
|
|
- deviceData.value = res.device || {};
|
|
|
-
|
|
|
- // 大海则、红柳林不需要漏风率
|
|
|
- if (sysOrgCode === 'sdtljtdhzmk' || sysOrgCode === 'smjthllmk') {
|
|
|
- navList[4].val = 0;
|
|
|
- }
|
|
|
- });
|
|
|
- }
|
|
|
+}
|
|
|
+function goHome() {
|
|
|
+ pageType.value = 'home';
|
|
|
+}
|
|
|
+
|
|
|
+function getList() {
|
|
|
+ list({}).then((res) => {
|
|
|
+ fanLocalList.length = 0;
|
|
|
+ fanLocalList.push(res.fanlocal);
|
|
|
+ mainList.value = res.fanmain || [];
|
|
|
+ if (res.midinfo[0].sysdata) {
|
|
|
+ centerList = res.midinfo[0].sysdata;
|
|
|
+ // 总回
|
|
|
+ navList[0].valList =
|
|
|
+ centerList && centerList.zonghuifeng
|
|
|
+ ? centerList.zonghuifeng.split('').map((el) => {
|
|
|
+ return { val: el };
|
|
|
+ })
|
|
|
+ : [];
|
|
|
+ // 总进
|
|
|
+ navList[1].valList =
|
|
|
+ centerList && centerList.zongjinfeng
|
|
|
+ ? centerList.zongjinfeng
|
|
|
+ .toString()
|
|
|
+ .split('')
|
|
|
+ .map((el) => {
|
|
|
+ return { val: el };
|
|
|
+ })
|
|
|
+ : [];
|
|
|
+ // 计划风量
|
|
|
+ navList[2].valList =
|
|
|
+ centerList && centerList.xufengliang
|
|
|
+ ? centerList.xufengliang
|
|
|
+ .toString()
|
|
|
+ .split('')
|
|
|
+ .map((el) => {
|
|
|
+ return { val: el };
|
|
|
+ })
|
|
|
+ : [];
|
|
|
+ // 有效风量率
|
|
|
+ navList[3].val = `${res.midinfo[0].sysinfo.useM3Perent}%` || '--';
|
|
|
+
|
|
|
+ // 外部漏风率
|
|
|
+ navList[4].val =
|
|
|
+ res.midinfo[0].sysinfo.externalRate ||
|
|
|
+ (
|
|
|
+ ((Number(res.midinfo[0].sysdata.zongfengliang) - Number(res.midinfo[0].sysdata.zongjinfeng)) /
|
|
|
+ Number(res.midinfo[0].sysdata.zongfengliang)) *
|
|
|
+ 100
|
|
|
+ ).toFixed(1) + '%';
|
|
|
+ }
|
|
|
+ flList.value = res.windrect || res.sys_wind;
|
|
|
|
|
|
- //获取当前时间年月日时分秒
|
|
|
- function getNowTime() {
|
|
|
- setInterval(() => {
|
|
|
- nowTimeYear.value = dayjs().format('YYYY/MM/DD');
|
|
|
- let week = dayjs(new Date().getTime()).day();
|
|
|
- switch (week) {
|
|
|
- case 0:
|
|
|
- nowTimeWeek.value = '星期日';
|
|
|
- break;
|
|
|
- case 1:
|
|
|
- nowTimeWeek.value = '星期一';
|
|
|
- break;
|
|
|
- case 2:
|
|
|
- nowTimeWeek.value = '星期二';
|
|
|
- break;
|
|
|
- case 3:
|
|
|
- nowTimeWeek.value = '星期三';
|
|
|
- break;
|
|
|
- case 4:
|
|
|
- nowTimeWeek.value = '星期四';
|
|
|
- break;
|
|
|
- case 5:
|
|
|
- nowTimeWeek.value = '星期五';
|
|
|
- break;
|
|
|
- case 6:
|
|
|
- nowTimeWeek.value = '星期六';
|
|
|
- break;
|
|
|
- }
|
|
|
- let date = new Date();
|
|
|
- let hours = date.getHours();
|
|
|
- let minutes = date.getMinutes();
|
|
|
- let seconds = date.getSeconds();
|
|
|
- if (minutes >= 0 && minutes <= 9) {
|
|
|
- minutes = `0${minutes}`;
|
|
|
- }
|
|
|
- if (seconds >= 0 && seconds <= 9) {
|
|
|
- seconds = `0${seconds}`;
|
|
|
- }
|
|
|
- nowTime.value = `${hours}:${minutes}:${seconds}`;
|
|
|
- }, 1000);
|
|
|
- }
|
|
|
+ if (res.sys_majorpath.length != 0) {
|
|
|
+ lineList.value = res.sys_majorpath;
|
|
|
+ } else {
|
|
|
+ let paramArr: any = [];
|
|
|
+ lineList.value = paramArr;
|
|
|
+ }
|
|
|
|
|
|
- function goModalDetail() {
|
|
|
- router.push('/micro-vent-3dModal/dashboard/analysis?type=model3D');
|
|
|
- }
|
|
|
+ if (res.sys_surface_caimei.length != 0) {
|
|
|
+ workList.value = res.sys_surface_caimei;
|
|
|
+ } else {
|
|
|
+ let paramArr: any = [];
|
|
|
+ workList.value = getDate(paramArr);
|
|
|
+ }
|
|
|
|
|
|
- const changePageType = (pageType) => {
|
|
|
- actions.setGlobalState({ pageObj: { pageType: pageType } });
|
|
|
- };
|
|
|
+ warnData.value = res.warn || [];
|
|
|
+ deviceData.value = res.device || {};
|
|
|
|
|
|
- onMounted(() => {
|
|
|
- const currentRouteObj = unref(currentRoute);
|
|
|
- if (currentRouteObj && currentRouteObj['query'] && currentRouteObj['query']['deviceType']) {
|
|
|
- pageType.value = 'model3D';
|
|
|
- } else {
|
|
|
- pageType.value = 'home';
|
|
|
+ // 大海则、红柳林不需要漏风率
|
|
|
+ if (sysOrgCode === 'sdtljtdhzmk' || sysOrgCode === 'smjthllmk') {
|
|
|
+ navList[4].val = 0;
|
|
|
}
|
|
|
- actions.onGlobalStateChange((newState) => {
|
|
|
- for (const key in newState) {
|
|
|
- if (key === 'pageObj') {
|
|
|
- const pageObj = newState[key];
|
|
|
- if (pageObj && pageObj.pageType) {
|
|
|
- pageType.value = pageObj.pageType;
|
|
|
- if (pageObj.timesolution) {
|
|
|
- pageResult.value = pageObj.timesolution;
|
|
|
- }
|
|
|
+ });
|
|
|
+}
|
|
|
+
|
|
|
+//获取当前时间年月日时分秒
|
|
|
+function getNowTime() {
|
|
|
+ setInterval(() => {
|
|
|
+ nowTimeYear.value = dayjs().format('YYYY/MM/DD');
|
|
|
+ let week = dayjs(new Date().getTime()).day();
|
|
|
+ switch (week) {
|
|
|
+ case 0:
|
|
|
+ nowTimeWeek.value = '星期日';
|
|
|
+ break;
|
|
|
+ case 1:
|
|
|
+ nowTimeWeek.value = '星期一';
|
|
|
+ break;
|
|
|
+ case 2:
|
|
|
+ nowTimeWeek.value = '星期二';
|
|
|
+ break;
|
|
|
+ case 3:
|
|
|
+ nowTimeWeek.value = '星期三';
|
|
|
+ break;
|
|
|
+ case 4:
|
|
|
+ nowTimeWeek.value = '星期四';
|
|
|
+ break;
|
|
|
+ case 5:
|
|
|
+ nowTimeWeek.value = '星期五';
|
|
|
+ break;
|
|
|
+ case 6:
|
|
|
+ nowTimeWeek.value = '星期六';
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ let date = new Date();
|
|
|
+ let hours = date.getHours();
|
|
|
+ let minutes = date.getMinutes();
|
|
|
+ let seconds = date.getSeconds();
|
|
|
+ if (minutes >= 0 && minutes <= 9) {
|
|
|
+ minutes = `0${minutes}`;
|
|
|
+ }
|
|
|
+ if (seconds >= 0 && seconds <= 9) {
|
|
|
+ seconds = `0${seconds}`;
|
|
|
+ }
|
|
|
+ nowTime.value = `${hours}:${minutes}:${seconds}`;
|
|
|
+ }, 1000);
|
|
|
+}
|
|
|
+
|
|
|
+function goModalDetail() {
|
|
|
+ router.push('/micro-vent-3dModal/dashboard/analysis?type=model3D');
|
|
|
+}
|
|
|
+
|
|
|
+const changePageType = (pageType) => {
|
|
|
+ actions.setGlobalState({ pageObj: { pageType: pageType } });
|
|
|
+};
|
|
|
+
|
|
|
+onMounted(() => {
|
|
|
+ const currentRouteObj = unref(currentRoute);
|
|
|
+ if (currentRouteObj && currentRouteObj['query'] && currentRouteObj['query']['deviceType']) {
|
|
|
+ pageType.value = 'model3D';
|
|
|
+ } else {
|
|
|
+ pageType.value = 'home';
|
|
|
+ }
|
|
|
+ actions.onGlobalStateChange((newState) => {
|
|
|
+ for (const key in newState) {
|
|
|
+ if (key === 'pageObj') {
|
|
|
+ const pageObj = newState[key];
|
|
|
+ if (pageObj && pageObj.pageType) {
|
|
|
+ pageType.value = pageObj.pageType;
|
|
|
+ if (pageObj.timesolution) {
|
|
|
+ pageResult.value = pageObj.timesolution;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- });
|
|
|
- getNowTime();
|
|
|
- getList();
|
|
|
- timer = Number(
|
|
|
- setInterval(() => {
|
|
|
- getList();
|
|
|
- }, 10000)
|
|
|
- );
|
|
|
- });
|
|
|
- onBeforeUnmount(() => {
|
|
|
- clearInterval(timer);
|
|
|
- timer = null;
|
|
|
- });
|
|
|
- onUnmounted(() => {
|
|
|
- pageType.value = '';
|
|
|
+ }
|
|
|
});
|
|
|
+ getNowTime();
|
|
|
+ getList();
|
|
|
+ timer = Number(
|
|
|
+ setInterval(() => {
|
|
|
+ getList();
|
|
|
+ }, 10000)
|
|
|
+ );
|
|
|
+});
|
|
|
+onBeforeUnmount(() => {
|
|
|
+ clearInterval(timer);
|
|
|
+ timer = null;
|
|
|
+});
|
|
|
+onUnmounted(() => {
|
|
|
+ pageType.value = '';
|
|
|
+});
|
|
|
</script>
|
|
|
|
|
|
<style lang="less" scoped>
|
|
|
- @font-face {
|
|
|
- font-family: 'douyuFont';
|
|
|
- src: url('../../../../assets/font/douyuFont.otf');
|
|
|
- }
|
|
|
-
|
|
|
- @font-face {
|
|
|
- font-family: 'yjsz';
|
|
|
- src: url('../../../../assets/font/yjsz.TTF');
|
|
|
- }
|
|
|
-
|
|
|
- .home-container {
|
|
|
+@font-face {
|
|
|
+ font-family: 'douyuFont';
|
|
|
+ src: url('../../../../assets/font/douyuFont.otf');
|
|
|
+}
|
|
|
+
|
|
|
+@font-face {
|
|
|
+ font-family: 'yjsz';
|
|
|
+ src: url('../../../../assets/font/yjsz.TTF');
|
|
|
+}
|
|
|
+
|
|
|
+.home-container {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ .header {
|
|
|
width: 100%;
|
|
|
- height: 100%;
|
|
|
+ height: 76px;
|
|
|
position: relative;
|
|
|
-
|
|
|
- .header {
|
|
|
- width: 100%;
|
|
|
- height: 76px;
|
|
|
- position: relative;
|
|
|
- background: url('../../../../assets//images//home-container/header-nav.png') no-repeat;
|
|
|
-
|
|
|
- .head-time {
|
|
|
- position: absolute;
|
|
|
- top: 14px;
|
|
|
- left: 15px;
|
|
|
- color: #b5c9e9;
|
|
|
- font-size: 14px;
|
|
|
-
|
|
|
- span {
|
|
|
- margin-right: 20px;
|
|
|
- letter-spacing: 2px;
|
|
|
- }
|
|
|
+ background: url('../../../../assets//images//home-container/header-nav.png') no-repeat;
|
|
|
+
|
|
|
+ .head-time {
|
|
|
+ position: absolute;
|
|
|
+ top: 14px;
|
|
|
+ left: 15px;
|
|
|
+ color: #b5c9e9;
|
|
|
+ font-size: 14px;
|
|
|
+
|
|
|
+ span {
|
|
|
+ margin-right: 20px;
|
|
|
+ letter-spacing: 2px;
|
|
|
}
|
|
|
+ }
|
|
|
|
|
|
- .main-title {
|
|
|
- position: absolute;
|
|
|
- left: 50%;
|
|
|
- top: 50%;
|
|
|
- transform: translate(-50%, -50%);
|
|
|
- color: #fff;
|
|
|
- font-size: 28px;
|
|
|
- font-weight: 600;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
+ .main-title {
|
|
|
+ position: absolute;
|
|
|
+ left: 50%;
|
|
|
+ top: 50%;
|
|
|
+ transform: translate(-50%, -50%);
|
|
|
+ color: #fff;
|
|
|
+ font-size: 28px;
|
|
|
+ font-weight: 600;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
|
|
|
- .logo {
|
|
|
- width: 32px;
|
|
|
- height: 32px;
|
|
|
- margin-right: 5px;
|
|
|
- }
|
|
|
+ .logo {
|
|
|
+ width: 32px;
|
|
|
+ height: 32px;
|
|
|
+ margin-right: 5px;
|
|
|
}
|
|
|
}
|
|
|
+ }
|
|
|
+
|
|
|
+ .home-contents {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ height: calc(100% - 76px);
|
|
|
+ padding: 10px;
|
|
|
+ box-sizing: border-box;
|
|
|
|
|
|
- .home-contents {
|
|
|
+ .left-content {
|
|
|
display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ flex: 1;
|
|
|
justify-content: space-between;
|
|
|
- height: calc(100% - 76px);
|
|
|
- padding: 10px;
|
|
|
- box-sizing: border-box;
|
|
|
+ height: 100%;
|
|
|
|
|
|
- .left-content {
|
|
|
+ .monitor-box {
|
|
|
display: flex;
|
|
|
- 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%;
|
|
|
- }
|
|
|
+ width: 100%;
|
|
|
+ background: url('../../../../assets/images/home-container/dialog.png') no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ }
|
|
|
|
|
|
- .monitor-box1 {
|
|
|
- margin: 10px 0px;
|
|
|
- }
|
|
|
+ .monitor-box1 {
|
|
|
+ margin: 10px 0px;
|
|
|
}
|
|
|
+ }
|
|
|
|
|
|
- .center-content {
|
|
|
+ .center-content {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: space-between;
|
|
|
+ flex: 2;
|
|
|
+ height: 100%;
|
|
|
+ margin: 0px 10px;
|
|
|
+
|
|
|
+ .three-box {
|
|
|
+ position: relative;
|
|
|
display: flex;
|
|
|
- flex-direction: column;
|
|
|
- justify-content: space-between;
|
|
|
+ background-color: #fff;
|
|
|
flex: 2;
|
|
|
- height: 100%;
|
|
|
- margin: 0px 10px;
|
|
|
-
|
|
|
- .three-box {
|
|
|
- position: relative;
|
|
|
+ width: 100%;
|
|
|
+ margin-bottom: 15px;
|
|
|
+ background: url('../../../../assets/images/home-container/three-dialog.png') no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+
|
|
|
+ .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;
|
|
|
- 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%;
|
|
|
+ justify-content: space-around;
|
|
|
+ align-items: center;
|
|
|
+ background: url('../../../../assets/images/home-container/three-nav.png') no-repeat;
|
|
|
|
|
|
- .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;
|
|
|
+ .nav-item {
|
|
|
display: flex;
|
|
|
+ flex: 1;
|
|
|
+ flex-direction: column;
|
|
|
justify-content: space-around;
|
|
|
align-items: center;
|
|
|
- background: url('../../../../assets/images/home-container/three-nav.png') no-repeat;
|
|
|
+ height: 80%;
|
|
|
|
|
|
- .nav-item {
|
|
|
+ .item-label {
|
|
|
+ color: #98f5ff;
|
|
|
+ }
|
|
|
+
|
|
|
+ .item-value {
|
|
|
+ position: relative;
|
|
|
+ width: 125px;
|
|
|
+ height: 37px;
|
|
|
+ padding: 0px 5px;
|
|
|
+ box-sizing: border-box;
|
|
|
display: flex;
|
|
|
- flex: 1;
|
|
|
- flex-direction: column;
|
|
|
- justify-content: space-around;
|
|
|
+ justify-content: space-between;
|
|
|
align-items: center;
|
|
|
- height: 80%;
|
|
|
-
|
|
|
- .item-label {
|
|
|
- color: #98f5ff;
|
|
|
- }
|
|
|
+ background: url('../../../../assets/images/home-container/item-value.png') no-repeat;
|
|
|
|
|
|
- .item-value {
|
|
|
+ .bg-box {
|
|
|
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;
|
|
|
- }
|
|
|
+ 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-text1 {
|
|
|
- width: 100%;
|
|
|
- text-align: center;
|
|
|
+ .value-text {
|
|
|
+ position: absolute;
|
|
|
+ left: 50%;
|
|
|
+ top: 50%;
|
|
|
+ transform: translate(-50%, -50%);
|
|
|
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: absolute;
|
|
|
- // background-color: var(--vent-base-color);
|
|
|
-
|
|
|
- .btn-icon {
|
|
|
- width: 40px;
|
|
|
- height: 40px;
|
|
|
- background: url('/@/assets/images/vent/home/tosmall.png') no-repeat center;
|
|
|
- background-size: 100% 100%;
|
|
|
- position: absolute;
|
|
|
- z-index: 99999;
|
|
|
- bottom: 30px;
|
|
|
- right: 30px;
|
|
|
+ .value-text1 {
|
|
|
+ width: 100%;
|
|
|
+ text-align: center;
|
|
|
+ color: #fff;
|
|
|
+ font-size: 22px;
|
|
|
+ font-family: 'yjsz';
|
|
|
+ font-weight: 500;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- .wind-box {
|
|
|
- display: flex;
|
|
|
- flex: 1;
|
|
|
+ .three-modal {
|
|
|
width: 100%;
|
|
|
- background: url('../../../../assets/images/home-container/dialog1.png') no-repeat;
|
|
|
- background-size: 100% 100%;
|
|
|
+ height: 100%;
|
|
|
+ padding: 20px 17px 20px 15px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ // position: absolute;
|
|
|
+ // background-color: var(--vent-base-color);
|
|
|
+
|
|
|
+ .btn-icon {
|
|
|
+ width: 40px;
|
|
|
+ height: 40px;
|
|
|
+ background: url('/@/assets/images/vent/home/tosmall.png') no-repeat center;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ position: absolute;
|
|
|
+ z-index: 99999;
|
|
|
+ bottom: 30px;
|
|
|
+ right: 30px;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- .right-content {
|
|
|
+ .wind-box {
|
|
|
display: flex;
|
|
|
- flex-direction: column;
|
|
|
- justify-content: space-between;
|
|
|
flex: 1;
|
|
|
- height: 100%;
|
|
|
+ width: 100%;
|
|
|
+ background: url('../../../../assets/images/home-container/dialog1.png') no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- .monitor-box {
|
|
|
- display: flex;
|
|
|
- flex: 1;
|
|
|
- width: 100%;
|
|
|
- background: url('../../../../assets/images/home-container/dialog.png') no-repeat;
|
|
|
- background-size: 100% 100%;
|
|
|
- }
|
|
|
+ .right-content {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: space-between;
|
|
|
+ flex: 1;
|
|
|
+ height: 100%;
|
|
|
|
|
|
- .monitor-box1 {
|
|
|
- margin: 10px 0px;
|
|
|
- }
|
|
|
+ .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;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+}
|
|
|
|
|
|
- // #__qiankun_microapp_wrapper_for_micro_vent_3_d_modal__{
|
|
|
- // width: 100% !important;
|
|
|
- // height: 100% !important;
|
|
|
- // }
|
|
|
-</style>
|
|
|
+// #__qiankun_microapp_wrapper_for_micro_vent_3_d_modal__{
|
|
|
+// width: 100% !important;
|
|
|
+// height: 100% !important;
|
|
|
+// }</style>
|
