|
|
@@ -1,7 +1,6 @@
|
|
|
<!-- belt-new.vue -->
|
|
|
<template>
|
|
|
<div class="company-home">
|
|
|
- <!-- 顶部标题栏 + 下拉选择 -->
|
|
|
<customHeader> 皮带巷智能管控 </customHeader>
|
|
|
<div class="modal-box" id="modalBox" v-if="pageType !== 'history' && isInitModal">
|
|
|
<Three3D ref="three3D" :modalName="'pidai'" class="modal-3d" @success="initModalAnimate" />
|
|
|
@@ -10,36 +9,12 @@
|
|
|
<div class="top-bg">
|
|
|
<BeltNav @change-page="changePage" :pageType="pageType" />
|
|
|
</div>
|
|
|
- <!-- 主体区域 -->
|
|
|
+
|
|
|
<div class="border">
|
|
|
- <!-- 配置模块区 -->
|
|
|
- <template v-if="pageType == 'fire_risk_warn'">
|
|
|
- <ModuleCommon
|
|
|
- v-for="cfg in configs"
|
|
|
- :key="cfg.deviceType"
|
|
|
- :show-style="cfg.showStyle"
|
|
|
- :module-data="cfg.moduleData"
|
|
|
- :module-name="cfg.moduleName"
|
|
|
- :device-type="cfg.deviceType"
|
|
|
- :page-type="cfg.pageType"
|
|
|
- :data="data"
|
|
|
- :visible="true"
|
|
|
- />
|
|
|
- </template>
|
|
|
- <template v-if="pageType == 'emergencyControl'">
|
|
|
- <ModuleCommon
|
|
|
- v-for="cfg in configs"
|
|
|
- :key="cfg.deviceType"
|
|
|
- :show-style="cfg.showStyle"
|
|
|
- :module-data="cfg.moduleData"
|
|
|
- :module-name="cfg.moduleName"
|
|
|
- :device-type="cfg.deviceType"
|
|
|
- :page-type="cfg.pageType"
|
|
|
- :data="data"
|
|
|
- :visible="true"
|
|
|
- />
|
|
|
+ <template v-if="pageType === 'history'">
|
|
|
+ <History />
|
|
|
</template>
|
|
|
- <template v-if="pageType == 'sprayControl'">
|
|
|
+ <template v-else>
|
|
|
<ModuleCommon
|
|
|
v-for="cfg in configs"
|
|
|
:key="cfg.deviceType"
|
|
|
@@ -52,483 +27,399 @@
|
|
|
:visible="true"
|
|
|
/>
|
|
|
</template>
|
|
|
- <template v-if="pageType == 'history'">
|
|
|
- <History />
|
|
|
- </template>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script setup lang="ts">
|
|
|
- import { onMounted, ref, watch, nextTick } from 'vue';
|
|
|
- import customHeader from './components/customHeader-belt.vue';
|
|
|
- import { useInitConfigs, useInitPage } from '../hooks/useInit';
|
|
|
- import { testBeltNew, testYjkf, testSpary } from './configurable.data';
|
|
|
- import ModuleCommon from './components/ModuleCommon.vue';
|
|
|
- import Three3D from '/@/views/vent/home/configurable/components/three3D.vue';
|
|
|
- import BeltNav from './components/BeltNav.vue';
|
|
|
- import { useRouter, useRoute } from 'vue-router';
|
|
|
- import { getSystem, getMonitorAndAlertBelt, getDevice } from './configurable.api';
|
|
|
- import { modalAnimate } from './threejs/belt.threejs';
|
|
|
- import History from './components/detail/history.vue';
|
|
|
- // 初始化配置
|
|
|
- const { configs, fetchConfigs } = useInitConfigs();
|
|
|
- const { updateEnhancedConfigs, updateData, data } = useInitPage('皮带巷三级防灭火系统');
|
|
|
- const isInitModal = ref(false);
|
|
|
- // const pageType = computed(() => {
|
|
|
- // const currentType = route.params.type as string;
|
|
|
- // return currentType;
|
|
|
- // });
|
|
|
- const pageType = ref('fire_risk_warn');
|
|
|
- const route = useRoute();
|
|
|
- const modalMonitorData = ref({});
|
|
|
- // 下拉框选项
|
|
|
- const beltOptions = [
|
|
|
- { id: '1', beltName: '主运巷皮带 1' },
|
|
|
- { id: '2', beltName: '主运巷皮带 2' },
|
|
|
- ];
|
|
|
+import { onMounted, ref, watch, nextTick } from 'vue';
|
|
|
+import customHeader from './components/customHeader-belt.vue';
|
|
|
+import { useInitConfigs, useInitPage } from '../hooks/useInit';
|
|
|
+import { testBeltNew, testYjkf, testSpary } from './configurable.data';
|
|
|
+import ModuleCommon from './components/ModuleCommon.vue';
|
|
|
+import Three3D from '/@/views/vent/home/configurable/components/three3D.vue';
|
|
|
+import BeltNav from './components/BeltNav.vue';
|
|
|
+import { useRouter, useRoute } from 'vue-router';
|
|
|
+import { getSystem, getMonitorAndAlertBelt, getDevice } from './configurable.api';
|
|
|
+import { modalAnimate } from './threejs/belt.threejs';
|
|
|
+import History from './components/detail/history.vue';
|
|
|
+// 初始化配置
|
|
|
+const { configs, fetchConfigs } = useInitConfigs();
|
|
|
+const { updateEnhancedConfigs, updateData, data } = useInitPage('皮带巷三级防灭火系统');
|
|
|
+const isInitModal = ref(false);
|
|
|
+const pageCache = ref({
|
|
|
+ fire_risk_warn: { configs: testBeltNew },
|
|
|
+ emergencyControl: { configs: testYjkf },
|
|
|
+ sprayControl: { configs: testSpary },
|
|
|
+});
|
|
|
|
|
|
- const selectedBeltId = ref('1');
|
|
|
+const pageType = ref('fire_risk_warn');
|
|
|
+const route = useRoute();
|
|
|
+const modalMonitorData = ref({});
|
|
|
+// 下拉框选项
|
|
|
+const beltOptions = [
|
|
|
+ { id: '1', beltName: '主运巷皮带 1' },
|
|
|
+ { id: '2', beltName: '主运巷皮带 2' },
|
|
|
+];
|
|
|
|
|
|
- // 模拟数据
|
|
|
- const readData = {
|
|
|
- fmhjcInfo: [
|
|
|
- {
|
|
|
- beltName: '主运巷皮带1',
|
|
|
- wz: { strtype: 'wz', avg: '111', max: '222', min: '333', alarm: false, pos: 'AAAA', maxTime: '2013-05-24 15:52:42' },
|
|
|
- hcl: { strtype: 'HCl', avg: 'XXX', max: 'XXX', min: 'XXX', alarm: false, pos: 'AAAA', maxTime: '2013-05-24 15:52:42' },
|
|
|
- gx: { strtype: 'gx', avg: 'XXX', max: 'XXX', min: 'XXX', alarm: false, pos: 'AAAA', maxTime: '2013-05-24 15:52:42' },
|
|
|
- co: { strtype: 'CO', avg: 'XXX', max: 'XXX', min: 'XXX', alarm: true, pos: 'AAAA', maxTime: '2013-05-24 15:52:42' },
|
|
|
- wd: { strtype: 'wd', avg: 'XXX', max: 'XXX', min: 'XXX', alarm: false, pos: 'AAAA', maxTime: '2013-05-24 15:52:42' },
|
|
|
- },
|
|
|
- ],
|
|
|
- pdhzfxInfo: [
|
|
|
- {
|
|
|
- beltName: '主运巷皮带1',
|
|
|
- warningLevel: '一般风险',
|
|
|
- sysList: [
|
|
|
- {
|
|
|
- time: '2026-03-21 13:23:34',
|
|
|
- area: '3#皮带区域',
|
|
|
- type: 'CO浓度异常',
|
|
|
- status: '三级预警',
|
|
|
- advice: '立即检查该区域设备，启动应急预案',
|
|
|
- action: '启动喷淋',
|
|
|
- },
|
|
|
- {
|
|
|
- time: '2026-03-21 13:23:34',
|
|
|
- area: '3#皮带区域',
|
|
|
- type: 'CO浓度异常',
|
|
|
- status: '三级预警',
|
|
|
- advice: '立即检查该区域设备，启动应急预案',
|
|
|
- action: '启动喷淋',
|
|
|
- },
|
|
|
- {
|
|
|
- time: '2026-03-21 13:23:34',
|
|
|
- area: '3#皮带区域',
|
|
|
- type: 'CO浓度异常',
|
|
|
- status: '三级预警',
|
|
|
- advice: '立即检查该区域设备，启动应急预案',
|
|
|
- action: '启动喷淋',
|
|
|
- },
|
|
|
- {
|
|
|
- time: '2026-03-21 13:23:34',
|
|
|
- area: '3#皮带区域',
|
|
|
- type: 'CO浓度异常',
|
|
|
- status: '三级预警',
|
|
|
- advice: '立即检查该区域设备，启动应急预案',
|
|
|
- action: '启动喷淋',
|
|
|
- },
|
|
|
- ],
|
|
|
- },
|
|
|
- ],
|
|
|
- sensorAnalysis: {
|
|
|
- hy: { name: '火焰传感器', alarm: false, maxTime: '2013-05-24 15:52:42', pos: '' },
|
|
|
- wd: { name: '温度传感器', alarm: false, maxTime: '2013-05-24 15:52:42', pos: '' },
|
|
|
- yw: { name: '烟雾传感器', alarm: false, maxTime: '2013-05-24 15:52:42', pos: '' },
|
|
|
- },
|
|
|
- vehicleCOAnalysis: {
|
|
|
- isRisk: true,
|
|
|
- activityList: [
|
|
|
- {
|
|
|
- pos: '1#皮带区域',
|
|
|
- vehicle: '车辆23425',
|
|
|
- status: '0',
|
|
|
- // vehicle2: '车辆53456',
|
|
|
- // vehicle3: '未通过车辆',
|
|
|
- // coReason1: 'CO浓度异常升高，已确认为车辆干扰',
|
|
|
- // coReason3: 'CO浓度异常升高，已确认非车辆干扰',
|
|
|
- // possibleCause: '皮带摩擦过热或电器设备故障',
|
|
|
- // recommendation: '立即检查3#皮带区域设备',
|
|
|
- },
|
|
|
- {
|
|
|
- pos: '2#皮带区域',
|
|
|
- vehicle: '车辆53456',
|
|
|
- status: '1',
|
|
|
- },
|
|
|
- {
|
|
|
- pos: '3#皮带区域',
|
|
|
- vehicle: '未通过车辆',
|
|
|
- status: '0',
|
|
|
- },
|
|
|
- ],
|
|
|
- analysisList: [
|
|
|
- {
|
|
|
- pos: '1#皮带区域',
|
|
|
- analysisText: 'CO浓度异常升高，已确认为车辆干扰',
|
|
|
- },
|
|
|
- {
|
|
|
- pos: '1#皮带区域',
|
|
|
- analysisText: 'CO浓度异常升高，已确认为车辆干扰',
|
|
|
- },
|
|
|
- ],
|
|
|
- possibleCause: '皮带摩擦过热或电器设备故障',
|
|
|
- recommendation: '立即检查3#皮带区域设备',
|
|
|
- },
|
|
|
- sprayData: [
|
|
|
- {
|
|
|
- beltArea: '1#皮带区域',
|
|
|
- devicePosition: '1#皮带-50m处',
|
|
|
- netStatus: '0', // 网络状态：0=断开，1=连接
|
|
|
- runStatus: '1', // 运行状态：0=异常，1=正常
|
|
|
- waterVolume: 86,
|
|
|
- waterPressure: 1.4,
|
|
|
- },
|
|
|
- {
|
|
|
- beltArea: '2#皮带区域',
|
|
|
- devicePosition: '2#皮带-120m处',
|
|
|
- netStatus: '1',
|
|
|
- runStatus: '1',
|
|
|
- waterVolume: 72,
|
|
|
- waterPressure: 0.8,
|
|
|
- },
|
|
|
- {
|
|
|
- beltArea: '3#皮带区域',
|
|
|
- devicePosition: '3#皮带-200m处',
|
|
|
- netStatus: '1',
|
|
|
- runStatus: '0',
|
|
|
- waterVolume: 45,
|
|
|
- waterPressure: 1.6,
|
|
|
- },
|
|
|
- ],
|
|
|
- };
|
|
|
+const selectedBeltId = ref('1');
|
|
|
|
|
|
- // 下拉框切换处理
|
|
|
- function handleBeltChange(id: string) {
|
|
|
- selectedBeltId.value = id;
|
|
|
- refresh();
|
|
|
- }
|
|
|
+// 下拉框切换处理
|
|
|
+function handleBeltChange(id: string) {
|
|
|
+ selectedBeltId.value = id;
|
|
|
+ refresh();
|
|
|
+}
|
|
|
|
|
|
- // 风险等级样式映射
|
|
|
- function getLevelClass(level: string) {
|
|
|
- switch (level) {
|
|
|
- case '重大风险':
|
|
|
- return 'level-critical';
|
|
|
- case '高风险':
|
|
|
- return 'level-high';
|
|
|
- case '一般风险':
|
|
|
- return 'level-normal';
|
|
|
- default:
|
|
|
- return '';
|
|
|
- }
|
|
|
+// 风险等级样式映射
|
|
|
+function getLevelClass(level: string) {
|
|
|
+ switch (level) {
|
|
|
+ case '重大风险':
|
|
|
+ return 'level-critical';
|
|
|
+ case '高风险':
|
|
|
+ return 'level-high';
|
|
|
+ case '一般风险':
|
|
|
+ return 'level-normal';
|
|
|
+ default:
|
|
|
+ return '';
|
|
|
}
|
|
|
- // 刷新数据
|
|
|
- async function refresh() {
|
|
|
- // fetchConfigs('sys_Leather').then(() => {
|
|
|
- // console.log(pageType.value, '========');
|
|
|
- // if (pageType.value == 'fire_risk_warn') {
|
|
|
- // configs.value = testBeltNew;
|
|
|
- // const params = {
|
|
|
- // sysId: '1637983899775242242',
|
|
|
- // dataList: 'fire_risk_warn,warn_result,vehicle_co_correlate',
|
|
|
- // };
|
|
|
- // Promise.resolve(getMonitorAndAlertBelt(params)).then(updateData);
|
|
|
- // } else if (pageType.value == 'emergencyControl') {
|
|
|
- // const params = {
|
|
|
- // devicetype: 'sys',
|
|
|
- // systemID: '1637983899775242242',
|
|
|
- // type: 'ventS',
|
|
|
- // };
|
|
|
- // Promise.resolve(getSystem(params)).then(updateData);
|
|
|
- // configs.value = testYjkf;
|
|
|
- // } else if (pageType.value == 'sprayControl') {
|
|
|
- // const params = {
|
|
|
- // devicetype: 'sys',
|
|
|
- // systemID: '2028657172566073346',
|
|
|
- // };
|
|
|
- // Promise.resolve(getDevice(params)).then((originalData) => {
|
|
|
- // updateData(originalData);
|
|
|
- // const sprayData: any[] = [];
|
|
|
- // if (data.value?.msgTxt) {
|
|
|
- // data.value.msgTxt.forEach((item) => {
|
|
|
- // const hasSprayAuto = item.type && item.type.toLowerCase().includes('spray_auto');
|
|
|
- // if (hasSprayAuto) {
|
|
|
- // sprayData.push({
|
|
|
- // ...item,
|
|
|
- // ...item.readData,
|
|
|
- // });
|
|
|
- // }
|
|
|
- // });
|
|
|
- // }
|
|
|
- // data.value.sprayData = sprayData;
|
|
|
- // updateData(data.value);
|
|
|
- // });
|
|
|
- // configs.value = testSpary;
|
|
|
- // } else {
|
|
|
- // configs.value = testBeltNew;
|
|
|
- // }
|
|
|
- // });
|
|
|
+}
|
|
|
+// 刷新数据
|
|
|
+async function refresh() {
|
|
|
+ // await fetchConfigs('sys_Leather');
|
|
|
+
|
|
|
+ // if (pageType.value === 'fire_risk_warn') {
|
|
|
+ // configs.value = testBeltNew;
|
|
|
+ // const res = await getMonitorAndAlertBelt({
|
|
|
+ // sysId: '1637983899775242242',
|
|
|
+ // dataList: 'fire_risk_warn,warn_result,vehicle_co_correlate',
|
|
|
+ // });
|
|
|
+ // updateData(res);
|
|
|
+ // } else if (pageType.value === 'emergencyControl') {
|
|
|
+ // configs.value = testYjkf;
|
|
|
+ // const res = await getSystem({
|
|
|
+ // devicetype: 'sys',
|
|
|
+ // systemID: '1637983899775242242',
|
|
|
+ // type: 'ventS',
|
|
|
+ // });
|
|
|
+ // updateData(res);
|
|
|
+ // } else if (pageType.value === 'sprayControl') {
|
|
|
+ // const params = {
|
|
|
+ // devicetype: 'sys',
|
|
|
+ // systemID: '2028657172566073346',
|
|
|
+ // };
|
|
|
+ // Promise.resolve(getDevice(params)).then((originalData) => {
|
|
|
+ // updateData(originalData);
|
|
|
+ // const sprayData: any[] = [];
|
|
|
+ // if (data.value?.msgTxt) {
|
|
|
+ // data.value.msgTxt.forEach((item) => {
|
|
|
+ // const hasSprayAuto = item.type && item.type.toLowerCase().includes('spray_auto');
|
|
|
+ // if (hasSprayAuto) {
|
|
|
+ // sprayData.push({
|
|
|
+ // ...item,
|
|
|
+ // ...item.readData,
|
|
|
+ // });
|
|
|
+ // }
|
|
|
+ // });
|
|
|
+ // }
|
|
|
+ // data.value.sprayData = sprayData;
|
|
|
+ // updateData(data.value);
|
|
|
+ // });
|
|
|
+ // configs.value = testSpary;
|
|
|
+ // }
|
|
|
+ // if (isFirst) initialized.value = true;
|
|
|
|
|
|
- // 由于模型中需要用到风门的监测数据，这里进行公共调用（后期精确调用风门）
|
|
|
- const modalRes = {};
|
|
|
- const systemParams = {
|
|
|
+ // 由于模型中需要用到风门的监测数据，这里进行公共调用（后期精确调用风门）
|
|
|
+ const modalRes = {};
|
|
|
+ const systemParams = {
|
|
|
+ devicetype: 'sys',
|
|
|
+ systemID: '1637983899775242242',
|
|
|
+ type: 'ventS',
|
|
|
+ };
|
|
|
+ const resSys = await getSystem(systemParams);
|
|
|
+ Object.assign(modalRes, resSys);
|
|
|
+ if (pageType.value == 'fire_risk_warn') {
|
|
|
+ configs.value = [...testBeltNew];
|
|
|
+ const params = {
|
|
|
+ sysId: '1637983899775242242',
|
|
|
+ dataList: 'fire_risk_warn,warn_result,vehicle_co_correlate',
|
|
|
+ };
|
|
|
+ const resWarn = await getMonitorAndAlertBelt(params);
|
|
|
+ updateData(resWarn);
|
|
|
+ Object.assign(modalRes, resWarn);
|
|
|
+ } else if (pageType.value == 'emergencyControl') {
|
|
|
+ //
|
|
|
+ updateData(resSys);
|
|
|
+ configs.value = [...testYjkf];
|
|
|
+ } else if (pageType.value == 'sprayControl') {
|
|
|
+ const params = {
|
|
|
devicetype: 'sys',
|
|
|
- systemID: '1637983899775242242',
|
|
|
- type: 'ventS',
|
|
|
+ systemID: '2028657172566073346',
|
|
|
};
|
|
|
- const resSys = await getSystem(systemParams);
|
|
|
- Object.assign(modalRes, resSys);
|
|
|
- if (pageType.value == 'fire_risk_warn') {
|
|
|
- configs.value = testBeltNew;
|
|
|
- const params = {
|
|
|
- sysId: '1637983899775242242',
|
|
|
- dataList: 'fire_risk_warn,warn_result,vehicle_co_correlate',
|
|
|
- };
|
|
|
- const resWarn = await getMonitorAndAlertBelt(params);
|
|
|
- updateData(resWarn);
|
|
|
- Object.assign(modalRes, resWarn);
|
|
|
- } else if (pageType.value == 'emergencyControl') {
|
|
|
- //
|
|
|
- updateData(resSys);
|
|
|
- configs.value = testYjkf;
|
|
|
- } else if (pageType.value == 'sprayControl') {
|
|
|
- const params = {
|
|
|
- devicetype: 'sys',
|
|
|
- systemID: '2028657172566073346',
|
|
|
- };
|
|
|
- Promise.resolve(getDevice(params)).then((originalData) => {
|
|
|
- updateData(originalData);
|
|
|
- const sprayData: any[] = [];
|
|
|
- if (data.value?.msgTxt) {
|
|
|
- data.value.msgTxt.forEach((item) => {
|
|
|
- const hasSprayAuto = item.type && item.type.toLowerCase().includes('spray_auto');
|
|
|
- if (hasSprayAuto) {
|
|
|
- sprayData.push({
|
|
|
- ...item,
|
|
|
- ...item.readData,
|
|
|
- });
|
|
|
- }
|
|
|
- });
|
|
|
- }
|
|
|
- data.value.sprayData = sprayData;
|
|
|
- updateData(data.value);
|
|
|
- });
|
|
|
- configs.value = testSpary;
|
|
|
- } else {
|
|
|
- configs.value = testBeltNew;
|
|
|
- }
|
|
|
- modalMonitorData.value = modalRes;
|
|
|
+ Promise.resolve(getDevice(params)).then((originalData) => {
|
|
|
+ updateData(originalData);
|
|
|
+ const sprayData: any[] = [];
|
|
|
+ if (data.value?.msgTxt) {
|
|
|
+ data.value.msgTxt.forEach((item) => {
|
|
|
+ const hasSprayAuto = item.type && item.type.toLowerCase().includes('spray_auto');
|
|
|
+ if (hasSprayAuto) {
|
|
|
+ sprayData.push({
|
|
|
+ ...item,
|
|
|
+ ...item.readData,
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ data.value.sprayData = sprayData;
|
|
|
+ updateData(data.value);
|
|
|
+ });
|
|
|
+ configs.value = [...testSpary];
|
|
|
+ console.log(configs.value);
|
|
|
+ } else {
|
|
|
+ configs.value = testBeltNew;
|
|
|
}
|
|
|
+ modalMonitorData.value = modalRes;
|
|
|
+}
|
|
|
|
|
|
- // // 定时刷新
|
|
|
- function initInterval() {
|
|
|
- setInterval(() => {
|
|
|
- refresh();
|
|
|
- }, 60000);
|
|
|
- }
|
|
|
+// // 定时刷新
|
|
|
+function initInterval() {
|
|
|
+ setInterval(() => {
|
|
|
+ refresh();
|
|
|
+ }, 60000);
|
|
|
+}
|
|
|
|
|
|
- async function changePage(pageTypeStr: string) {
|
|
|
- const finalPageType = pageTypeStr || (route.query.pageType as string) || '';
|
|
|
- pageType.value = finalPageType;
|
|
|
+async function changePage(pageTypeStr) {
|
|
|
+ const target = pageTypeStr || route.query.pageType || 'fire_risk_warn';
|
|
|
+ if (pageType.value === target) return;
|
|
|
+ pageType.value = target;
|
|
|
+ configs.value = pageCache.value[target]?.configs || testBeltNew;
|
|
|
+ await nextTick();
|
|
|
+ await refresh();
|
|
|
+}
|
|
|
|
|
|
- // 这里进行配置数据的查询，不实时查询，只在页面切换或默认时进行查询
|
|
|
+// watch(
|
|
|
+// // 监听动态路由参数 :type
|
|
|
+// () => route.params.type,
|
|
|
+// (newVal) => {
|
|
|
+// if (newVal) {
|
|
|
+// console.log('切换页面类型：', newVal);
|
|
|
+// refresh(); // 切换路由自动刷新
|
|
|
+// }
|
|
|
+// }
|
|
|
+// );
|
|
|
|
|
|
- await refresh();
|
|
|
- }
|
|
|
+function initModalAnimate(modal) {
|
|
|
+ console.log('初始化模型', modal);
|
|
|
+ modal.isRender = true;
|
|
|
+ modalAnimate(modal, modalMonitorData);
|
|
|
+}
|
|
|
|
|
|
- // watch(
|
|
|
- // // 监听动态路由参数 :type
|
|
|
- // () => route.params.type,
|
|
|
- // (newVal) => {
|
|
|
- // if (newVal) {
|
|
|
- // console.log('切换页面类型：', newVal);
|
|
|
- // refresh(); // 切换路由自动刷新
|
|
|
- // }
|
|
|
- // }
|
|
|
- // );
|
|
|
+watch(
|
|
|
+ () => route.query.pageType,
|
|
|
+ (newQueryType) => {
|
|
|
+ if (newQueryType) {
|
|
|
+ changePage(newQueryType as string);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ { immediate: true } // 初始化立刻执行
|
|
|
+);
|
|
|
|
|
|
- function initModalAnimate(modal) {
|
|
|
- console.log('初始化模型', modal);
|
|
|
- modal.isRender = true;
|
|
|
- modalAnimate(modal, modalMonitorData);
|
|
|
+watch(
|
|
|
+ () => modalMonitorData.value,
|
|
|
+ (newData, oldData) => {
|
|
|
+ if (newData && !Object.keys(oldData).length) {
|
|
|
+ isInitModal.value = true;
|
|
|
+ }
|
|
|
}
|
|
|
+);
|
|
|
|
|
|
- watch(
|
|
|
- () => route.query.pageType,
|
|
|
- (newQueryType) => {
|
|
|
- if (newQueryType) {
|
|
|
- changePage(newQueryType as string);
|
|
|
- }
|
|
|
- },
|
|
|
- { immediate: true } // 初始化立刻执行
|
|
|
- );
|
|
|
+onMounted(async () => {
|
|
|
+ await refresh();
|
|
|
+ initInterval();
|
|
|
+});
|
|
|
+</script>
|
|
|
+<style lang="less" scoped>
|
|
|
+.company-home {
|
|
|
+ background: url('/@/assets/images/beltFire/baseMap.png') no-repeat center;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ color: @white;
|
|
|
+ position: relative;
|
|
|
+ font-family: 'Microsoft YaHei', sans-serif;
|
|
|
+ .top-bg {
|
|
|
+ width: 100%;
|
|
|
+ height: 56px;
|
|
|
+ position: absolute;
|
|
|
+ margin-top: 10px;
|
|
|
+ z-index: 1;
|
|
|
+ }
|
|
|
+ .header-container {
|
|
|
+ position: absolute;
|
|
|
+ top: 20px;
|
|
|
+ left: 20px;
|
|
|
+ z-index: 10;
|
|
|
+ }
|
|
|
|
|
|
- watch(
|
|
|
- () => modalMonitorData.value,
|
|
|
- (newData, oldData) => {
|
|
|
- if (newData && !Object.keys(oldData).length) {
|
|
|
- isInitModal.value = true;
|
|
|
- }
|
|
|
- }
|
|
|
- );
|
|
|
+ .border {
|
|
|
+ width: 100%;
|
|
|
+ height: 94%;
|
|
|
+ background: url('/@/assets/images/beltFire/mainbj.png') no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ position: relative;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+}
|
|
|
|
|
|
- onMounted(async () => {
|
|
|
- await refresh();
|
|
|
- initInterval();
|
|
|
- });
|
|
|
-</script>
|
|
|
+.center-warning-container {
|
|
|
+ position: absolute;
|
|
|
+ left: 50%;
|
|
|
+ transform: translateX(-50%);
|
|
|
+ top: 50%;
|
|
|
+ width: 600px;
|
|
|
+ height: 200px;
|
|
|
+ background-color: rgba(0, 0, 0, 0.7);
|
|
|
+ border-radius: 10px;
|
|
|
+ padding: 15px;
|
|
|
+ box-shadow: 0 0 20px rgba(0, 255, 255, 0.3);
|
|
|
+ z-index: 5;
|
|
|
+ color: #fff;
|
|
|
|
|
|
-<style lang="less" scoped>
|
|
|
- .company-home {
|
|
|
- background: url('/@/assets/images/beltFire/baseMap.png') no-repeat center;
|
|
|
+ .warning-header {
|
|
|
+ font-size: 18px;
|
|
|
+ font-weight: bold;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ color: #ff6b6b;
|
|
|
+ }
|
|
|
+
|
|
|
+ .warning-list {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
- color: @white;
|
|
|
- position: relative;
|
|
|
- font-family: 'Microsoft YaHei', sans-serif;
|
|
|
- .top-bg {
|
|
|
- width: 100%;
|
|
|
- height: 56px;
|
|
|
- position: absolute;
|
|
|
- margin-top: 10px;
|
|
|
- z-index: 1;
|
|
|
+ overflow-y: auto;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ gap: 8px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .warning-item {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ padding: 8px;
|
|
|
+ background-color: rgba(0, 0, 0, 0.5);
|
|
|
+ border-radius: 5px;
|
|
|
+ border-left: 4px solid #ff6b6b;
|
|
|
+
|
|
|
+ .warning-time {
|
|
|
+ font-size: 14px;
|
|
|
+ color: #ccc;
|
|
|
}
|
|
|
- .header-container {
|
|
|
- position: absolute;
|
|
|
- top: 20px;
|
|
|
- left: 20px;
|
|
|
- z-index: 10;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 中间预警结果区
|
|
|
+ .center-warning-container {
|
|
|
+ position: absolute;
|
|
|
+ left: 50%;
|
|
|
+ transform: translateX(-50%);
|
|
|
+ top: 50%;
|
|
|
+ width: 600px;
|
|
|
+ height: 200px;
|
|
|
+ background-color: rgba(0, 0, 0, 0.7);
|
|
|
+ border-radius: 10px;
|
|
|
+ padding: 15px;
|
|
|
+ box-shadow: 0 0 20px rgba(0, 255, 255, 0.3);
|
|
|
+ z-index: 5;
|
|
|
+ color: #fff;
|
|
|
+
|
|
|
+ .warning-header {
|
|
|
+ font-size: 18px;
|
|
|
+ font-weight: bold;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ color: #ff6b6b;
|
|
|
}
|
|
|
|
|
|
- .border {
|
|
|
+ .warning-list {
|
|
|
width: 100%;
|
|
|
- height: 94%;
|
|
|
- background: url('/@/assets/images/beltFire/mainbj.png') no-repeat;
|
|
|
- background-size: 100% 100%;
|
|
|
- position: relative;
|
|
|
- overflow: hidden;
|
|
|
- .box-container {
|
|
|
- position: relative;
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- }
|
|
|
+ height: 100%;
|
|
|
+ overflow-y: auto;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ gap: 8px;
|
|
|
}
|
|
|
|
|
|
- // 中间预警结果区
|
|
|
- .center-warning-container {
|
|
|
- position: absolute;
|
|
|
- left: 50%;
|
|
|
- transform: translateX(-50%);
|
|
|
- top: 50%;
|
|
|
- width: 600px;
|
|
|
- height: 200px;
|
|
|
- background-color: rgba(0, 0, 0, 0.7);
|
|
|
- border-radius: 10px;
|
|
|
- padding: 15px;
|
|
|
- box-shadow: 0 0 20px rgba(0, 255, 255, 0.3);
|
|
|
- z-index: 5;
|
|
|
- color: #fff;
|
|
|
-
|
|
|
- .warning-header {
|
|
|
- font-size: 18px;
|
|
|
- font-weight: bold;
|
|
|
- margin-bottom: 10px;
|
|
|
- color: #ff6b6b;
|
|
|
- }
|
|
|
+ .warning-item {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ padding: 8px;
|
|
|
+ background-color: rgba(0, 0, 0, 0.5);
|
|
|
+ border-radius: 5px;
|
|
|
+ border-left: 4px solid #ff6b6b;
|
|
|
|
|
|
- .warning-list {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- overflow-y: auto;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- gap: 8px;
|
|
|
+ .warning-time {
|
|
|
+ font-size: 14px;
|
|
|
+ color: #ccc;
|
|
|
}
|
|
|
|
|
|
- .warning-item {
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
- padding: 8px;
|
|
|
- background-color: rgba(0, 0, 0, 0.5);
|
|
|
- border-radius: 5px;
|
|
|
- border-left: 4px solid #ff6b6b;
|
|
|
-
|
|
|
- .warning-time {
|
|
|
- font-size: 14px;
|
|
|
- color: #ccc;
|
|
|
+ .warning-level {
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: bold;
|
|
|
+ padding: 4px 8px;
|
|
|
+ border-radius: 4px;
|
|
|
+ &.level-critical {
|
|
|
+ background-color: #ff6b6b;
|
|
|
+ color: white;
|
|
|
}
|
|
|
-
|
|
|
- .warning-level {
|
|
|
- font-size: 14px;
|
|
|
- font-weight: bold;
|
|
|
- padding: 4px 8px;
|
|
|
- border-radius: 4px;
|
|
|
- &.level-critical {
|
|
|
- background-color: #ff6b6b;
|
|
|
- color: white;
|
|
|
- }
|
|
|
- &.level-high {
|
|
|
- background-color: #ffcc00;
|
|
|
- color: black;
|
|
|
- }
|
|
|
- &.level-normal {
|
|
|
- background-color: #66cc66;
|
|
|
- color: white;
|
|
|
- }
|
|
|
+ &.level-high {
|
|
|
+ background-color: #ffcc00;
|
|
|
+ color: black;
|
|
|
+ }
|
|
|
+ &.level-normal {
|
|
|
+ background-color: #66cc66;
|
|
|
+ color: white;
|
|
|
}
|
|
|
+ }
|
|
|
|
|
|
- .warning-action {
|
|
|
- .btn-start-spray {
|
|
|
- background-color: #00e1ff;
|
|
|
- color: #000;
|
|
|
- border: none;
|
|
|
- padding: 4px 10px;
|
|
|
- border-radius: 4px;
|
|
|
- cursor: pointer;
|
|
|
- font-size: 12px;
|
|
|
- transition: all 0.3s;
|
|
|
- &:hover {
|
|
|
- background-color: #00c3e6;
|
|
|
- }
|
|
|
+ .warning-action {
|
|
|
+ .btn-start-spray {
|
|
|
+ background-color: #00e1ff;
|
|
|
+ color: #000;
|
|
|
+ border: none;
|
|
|
+ padding: 4px 10px;
|
|
|
+ border-radius: 4px;
|
|
|
+ cursor: pointer;
|
|
|
+ font-size: 12px;
|
|
|
+ transition: all 0.3s;
|
|
|
+ &:hover {
|
|
|
+ background-color: #00c3e6;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+ }
|
|
|
|
|
|
- // 巷道示意图
|
|
|
- .belt-diagram {
|
|
|
- position: absolute;
|
|
|
- left: 50%;
|
|
|
- transform: translateX(-50%);
|
|
|
- bottom: 50px;
|
|
|
- width: 800px;
|
|
|
- height: 100px;
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
+ // 巷道示意图
|
|
|
+ .belt-diagram {
|
|
|
+ position: absolute;
|
|
|
+ left: 50%;
|
|
|
+ transform: translateX(-50%);
|
|
|
+ bottom: 50px;
|
|
|
+ width: 800px;
|
|
|
+ height: 100px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
|
|
|
- img {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- object-fit: contain;
|
|
|
- }
|
|
|
+ img {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ object-fit: contain;
|
|
|
}
|
|
|
}
|
|
|
- .modal-box {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- position: absolute;
|
|
|
- z-index: 1;
|
|
|
- }
|
|
|
+}
|
|
|
+.modal-box {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ position: absolute;
|
|
|
+ z-index: 1;
|
|
|
+}
|
|
|
</style>
|
bobo04052021@163.com