|
|
@@ -53,333 +53,287 @@
|
|
|
</template>
|
|
|
|
|
|
<script setup lang="ts">
|
|
|
-import { onMounted, ref, watch, nextTick, computed, onUnmounted } 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 ModuleCommonDual from './components/ModuleCommonDual.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, getWarnInfo, getDevice, getDataHome, getWarnResult } from './configurable.api';
|
|
|
-import { modalAnimate } from './threejs/belt.threejs';
|
|
|
-import History from './components/detail/history.vue';
|
|
|
-import sys from '/@/locales/lang/en/sys';
|
|
|
-// 初始化配置
|
|
|
-const { configs, fetchConfigs } = useInitConfigs();
|
|
|
-const cfgs = computed(() => configs.value.filter((_, index) => index !== 2 && index !== 3));
|
|
|
-const cfgA = computed<any>(() => configs.value[2]);
|
|
|
-const cfgB = computed<any>(() => configs.value[3]);
|
|
|
-const { updateEnhancedConfigs, updateData, data } = useInitPage('矿井全域皮带巷三级防灭火系统');
|
|
|
-const isInitModal = ref(false);
|
|
|
-const pageCache = ref({
|
|
|
- fire_risk_warn: { configs: testBeltNew },
|
|
|
- emergencyControl: { configs: testYjkf },
|
|
|
- sprayControl: { configs: testSpary },
|
|
|
-});
|
|
|
-let timer = null;
|
|
|
-const pageType = ref('fire_risk_warn');
|
|
|
-const route = useRoute();
|
|
|
-const modalMonitorData = ref({});
|
|
|
-// 下拉框选项
|
|
|
-/** 场景选项 */
|
|
|
-const options = ref([]);
|
|
|
-const optionValue = ref('');
|
|
|
-async function getSysDataSource() {
|
|
|
- const res = await getDataHome({ dataList: 'risk_evaluator' }).catch(() => {});
|
|
|
- options.value = res.risk_evaluator || [];
|
|
|
- await nextTick();
|
|
|
- if (options.value.length > 0 && !optionValue.value) {
|
|
|
- const firstId = options.value[0].sys_id;
|
|
|
- changeSelectRow(firstId);
|
|
|
+ import { onMounted, ref, watch, nextTick, computed, onUnmounted } 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 ModuleCommonDual from './components/ModuleCommonDual.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, getWarnInfo, getDevice, getDataHome, getWarnResult } from './configurable.api';
|
|
|
+ import { modalAnimate } from './threejs/belt.threejs';
|
|
|
+ import History from './components/detail/history.vue';
|
|
|
+ import sys from '/@/locales/lang/en/sys';
|
|
|
+ // 初始化配置
|
|
|
+ const { configs, fetchConfigs } = useInitConfigs();
|
|
|
+ const cfgs = computed(() => configs.value.filter((_, index) => index !== 2 && index !== 3));
|
|
|
+ const cfgA = computed<any>(() => configs.value[2]);
|
|
|
+ const cfgB = computed<any>(() => configs.value[3]);
|
|
|
+ const { updateEnhancedConfigs, updateData, data } = useInitPage('矿井全域皮带巷三级防灭火系统');
|
|
|
+ const isInitModal = ref(false);
|
|
|
+ const pageCache = ref({
|
|
|
+ fire_risk_warn: { configs: testBeltNew },
|
|
|
+ emergencyControl: { configs: testYjkf },
|
|
|
+ sprayControl: { configs: testSpary },
|
|
|
+ });
|
|
|
+ let timer = null;
|
|
|
+ const pageType = ref('fire_risk_warn');
|
|
|
+ const route = useRoute();
|
|
|
+ const modalMonitorData = ref({});
|
|
|
+ // 下拉框选项
|
|
|
+ /** 场景选项 */
|
|
|
+ const options = ref([]);
|
|
|
+ const optionValue = ref('');
|
|
|
+ async function getSysDataSource() {
|
|
|
+ const res = await getDataHome({ dataList: 'risk_evaluator' }).catch(() => {});
|
|
|
+ options.value = res.risk_evaluator || [];
|
|
|
+ await nextTick();
|
|
|
+ if (options.value.length > 0 && !optionValue.value) {
|
|
|
+ const firstId = options.value[0].sys_id;
|
|
|
+ changeSelectRow(firstId);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // 切换检测数据
|
|
|
+ function changeSelectRow(deviceID) {
|
|
|
+ optionValue.value = deviceID;
|
|
|
+ refresh();
|
|
|
+ }
|
|
|
+ function goToHistory() {
|
|
|
+ if (pageType.value === 'history') {
|
|
|
+ // 当前是历史页 → 切回默认页
|
|
|
+ pageType.value = 'fire_risk_warn';
|
|
|
+ } else {
|
|
|
+ // 当前不是 → 打开历史页
|
|
|
+ pageType.value = 'history';
|
|
|
+ }
|
|
|
}
|
|
|
-}
|
|
|
-// 切换检测数据
|
|
|
-function changeSelectRow(deviceID) {
|
|
|
- optionValue.value = deviceID;
|
|
|
- refresh();
|
|
|
-}
|
|
|
-function goToHistory() {
|
|
|
- if (pageType.value === 'history') {
|
|
|
- // 当前是历史页 → 切回默认页
|
|
|
- pageType.value = 'fire_risk_warn';
|
|
|
- } else {
|
|
|
- // 当前不是 → 打开历史页
|
|
|
- pageType.value = 'history';
|
|
|
+ // 预警等级映射
|
|
|
+ const warnTypeMap = {
|
|
|
+ '102': '黄色预警(较大风险)',
|
|
|
+ '103': '橙色预警(重大风险)',
|
|
|
+ '104': '红色预警(特别重大风险)',
|
|
|
+ };
|
|
|
+ // 处理接口返回数据
|
|
|
+ interface WarnResult {
|
|
|
+ warnName: string;
|
|
|
+ coRange?: string;
|
|
|
+ coTrend?: string;
|
|
|
+ tempRange?: string;
|
|
|
+ tempTrend?: string;
|
|
|
+ hclRange?: string;
|
|
|
}
|
|
|
-}
|
|
|
-// 预警等级映射
|
|
|
-const warnTypeMap = {
|
|
|
- '102': '黄色预警(较大风险)',
|
|
|
- '103': '橙色预警(重大风险)',
|
|
|
- '104': '红色预警(特别重大风险)',
|
|
|
-};
|
|
|
-// 处理接口返回数据
|
|
|
-interface WarnResult {
|
|
|
- warnName: string;
|
|
|
- coRange?: string;
|
|
|
- coTrend?: string;
|
|
|
- tempRange?: string;
|
|
|
- tempTrend?: string;
|
|
|
- hclRange?: string;
|
|
|
-}
|
|
|
-function groupWarnByType(data: any) {
|
|
|
- const result: WarnResult[] = [];
|
|
|
+ function groupWarnByType(data: any) {
|
|
|
+ const result: WarnResult[] = [];
|
|
|
|
|
|
- // 遍历 102、103、104...
|
|
|
- Object.keys(data).forEach((warnKey) => {
|
|
|
- const list = data[warnKey] || [];
|
|
|
- const warnName = warnTypeMap[warnKey as keyof typeof warnTypeMap];
|
|
|
+ // 遍历 102、103、104...
|
|
|
+ Object.keys(data).forEach((warnKey) => {
|
|
|
+ const list = data[warnKey] || [];
|
|
|
+ const warnName = warnTypeMap[warnKey as keyof typeof warnTypeMap];
|
|
|
|
|
|
- // 构建当前预警对象
|
|
|
- const warnObj: WarnResult = { warnName };
|
|
|
+ // 构建当前预警对象
|
|
|
+ const warnObj: WarnResult = { warnName };
|
|
|
|
|
|
- list.forEach((item: any) => {
|
|
|
- const { deviceType, fmin, fmax, trendMin, trendMax, trendCxTimeUnit } = item;
|
|
|
- // CO
|
|
|
- if (deviceType === 'modelsensor_co') {
|
|
|
- if (fmin != null && fmax != null) {
|
|
|
- warnObj.coRange = `${fmin} - ${fmax}`;
|
|
|
- } else if (trendMin != null && trendMax != null) {
|
|
|
- warnObj.coTrend = `${trendMin} - ${trendMax}`;
|
|
|
+ list.forEach((item: any) => {
|
|
|
+ const { deviceType, fmin, fmax, trendMin, trendMax, trendCxTimeUnit } = item;
|
|
|
+ // CO
|
|
|
+ if (deviceType === 'modelsensor_co') {
|
|
|
+ if (fmin != null && fmax != null) {
|
|
|
+ warnObj.coRange = `${fmin} - ${fmax}`;
|
|
|
+ } else if (trendMin != null && trendMax != null) {
|
|
|
+ warnObj.coTrend = `${trendMin} - ${trendMax}`;
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
- // 温度（带单位）
|
|
|
- else if (deviceType === 'modelsensor_temperature') {
|
|
|
- if (fmin != null && fmax != null) {
|
|
|
- warnObj.tempRange = `${fmin} - ${fmax}℃`;
|
|
|
- } else if (trendMin != null) {
|
|
|
- let unit = '';
|
|
|
- if (trendCxTimeUnit === 0) unit = '分钟';
|
|
|
- if (trendCxTimeUnit === 1) unit = '小时';
|
|
|
- warnObj.tempTrend = `>${trendMin}℃ +${unit}`;
|
|
|
+ // 温度（带单位）
|
|
|
+ else if (deviceType === 'modelsensor_temperature') {
|
|
|
+ if (fmin != null && fmax != null) {
|
|
|
+ warnObj.tempRange = `${fmin} - ${fmax}℃`;
|
|
|
+ } else if (trendMin != null) {
|
|
|
+ let unit = '';
|
|
|
+ if (trendCxTimeUnit === 0) unit = '分钟';
|
|
|
+ if (trendCxTimeUnit === 1) unit = '小时';
|
|
|
+ warnObj.tempTrend = `>${trendMin}℃ +${unit}`;
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
- // HCL
|
|
|
- else if (deviceType === 'modelsensor_hcl') {
|
|
|
- if (fmin != null && fmax != null) {
|
|
|
- warnObj.hclRange = `${fmin} - ${fmax}`;
|
|
|
+ // HCL
|
|
|
+ else if (deviceType === 'modelsensor_hcl') {
|
|
|
+ if (fmin != null && fmax != null) {
|
|
|
+ warnObj.hclRange = `${fmin} - ${fmax}`;
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
+ });
|
|
|
+ result.push(warnObj);
|
|
|
});
|
|
|
- result.push(warnObj);
|
|
|
- });
|
|
|
|
|
|
- return result;
|
|
|
-}
|
|
|
-// 刷新数据
|
|
|
-async function refresh() {
|
|
|
- // 由于模型中需要用到风门的监测数据，这里进行公共调用（后期精确调用风门）
|
|
|
- const modalRes = {};
|
|
|
- const systemParams = {
|
|
|
- devicetype: 'sys',
|
|
|
- systemID: optionValue.value,
|
|
|
- };
|
|
|
- const resSys = await getSystem(systemParams);
|
|
|
- const params = {
|
|
|
- sysId: optionValue.value,
|
|
|
- monitorType: 2,
|
|
|
- };
|
|
|
- const warnInfo = await getWarnInfo(params);
|
|
|
- Object.assign(modalRes, resSys);
|
|
|
- if (pageType.value == 'fire_risk_warn') {
|
|
|
- configs.value = [...testBeltNew];
|
|
|
- const params = {
|
|
|
- sysId: optionValue.value,
|
|
|
- dataList: 'fire_risk_warn,warn_result,vehicle_co_correlate',
|
|
|
- alarmLevel: '102,103,104',
|
|
|
- };
|
|
|
- const resWarn = await getMonitorAndAlertBelt(params);
|
|
|
- updateData(resWarn);
|
|
|
- Object.assign(modalRes, resWarn);
|
|
|
- } else if (pageType.value == 'emergencyControl') {
|
|
|
- updateData(resSys);
|
|
|
- configs.value = [...testYjkf];
|
|
|
- const alarmParams = {
|
|
|
- sysId: optionValue.value,
|
|
|
- alarmLevel: '104',
|
|
|
+ return result;
|
|
|
+ }
|
|
|
+ // 刷新数据
|
|
|
+ async function refresh() {
|
|
|
+ // 由于模型中需要用到风门的监测数据，这里进行公共调用（后期精确调用风门）
|
|
|
+ const modalRes = {};
|
|
|
+ const systemParams = {
|
|
|
+ devicetype: 'sys',
|
|
|
+ systemID: optionValue.value,
|
|
|
};
|
|
|
- const alarmRes = await getWarnResult(alarmParams);
|
|
|
- if (alarmRes.warn_result) {
|
|
|
- data.value.warn_result = alarmRes.warn_result;
|
|
|
- }
|
|
|
- data.value.warnInfo = groupWarnByType(warnInfo);
|
|
|
- console.log(data.value, '11111111');
|
|
|
- updateData(data.value);
|
|
|
- } else if (pageType.value == 'sprayControl') {
|
|
|
- updateData(resSys);
|
|
|
- const params1 = {
|
|
|
+ const resSys = await getSystem(systemParams);
|
|
|
+ const params = {
|
|
|
sysId: optionValue.value,
|
|
|
- alarmLevel: '103,104',
|
|
|
+ monitorType: 2,
|
|
|
};
|
|
|
- const sprayData = [];
|
|
|
- if (data.value?.deviceInfo) {
|
|
|
- // 遍历对象的所有 value
|
|
|
- Object.values(data.value.deviceInfo).forEach((item) => {
|
|
|
- const hasSprayAuto = item.type && item.type.toLowerCase().includes('spray');
|
|
|
- if (hasSprayAuto) {
|
|
|
- sprayData.push({ ...item, ...item.readData });
|
|
|
- }
|
|
|
- });
|
|
|
- }
|
|
|
- data.value.sprayData = sprayData;
|
|
|
- const alarmRes = await getWarnResult(params1);
|
|
|
- if (alarmRes.warn_result) {
|
|
|
- data.value.warn_result = alarmRes.warn_result;
|
|
|
+ const warnInfo = await getWarnInfo(params);
|
|
|
+ Object.assign(modalRes, resSys);
|
|
|
+ if (pageType.value == 'fire_risk_warn') {
|
|
|
+ configs.value = [...testBeltNew];
|
|
|
+ const params = {
|
|
|
+ sysId: optionValue.value,
|
|
|
+ dataList: 'fire_risk_warn,warn_result,vehicle_co_correlate',
|
|
|
+ alarmLevel: '102,103,104',
|
|
|
+ };
|
|
|
+ const resWarn = await getMonitorAndAlertBelt(params);
|
|
|
+ updateData(resWarn);
|
|
|
+ Object.assign(modalRes, resWarn);
|
|
|
+ } else if (pageType.value == 'emergencyControl') {
|
|
|
+ updateData(resSys);
|
|
|
+ configs.value = [...testYjkf];
|
|
|
+ const alarmParams = {
|
|
|
+ sysId: optionValue.value,
|
|
|
+ alarmLevel: '104',
|
|
|
+ };
|
|
|
+ const alarmRes = await getWarnResult(alarmParams);
|
|
|
+ if (alarmRes.warn_result) {
|
|
|
+ data.value.warn_result = alarmRes.warn_result;
|
|
|
+ }
|
|
|
+ data.value.warnInfo = groupWarnByType(warnInfo);
|
|
|
+ console.log(data.value, '11111111');
|
|
|
+ updateData(data.value);
|
|
|
+ } else if (pageType.value == 'sprayControl') {
|
|
|
+ updateData(resSys);
|
|
|
+ const params1 = {
|
|
|
+ sysId: optionValue.value,
|
|
|
+ alarmLevel: '103,104',
|
|
|
+ };
|
|
|
+ const sprayData = [];
|
|
|
+ if (data.value?.deviceInfo) {
|
|
|
+ // 遍历对象的所有 value
|
|
|
+ Object.values(data.value.deviceInfo).forEach((item) => {
|
|
|
+ const hasSprayAuto = item.type && item.type.toLowerCase().includes('spray');
|
|
|
+ if (hasSprayAuto) {
|
|
|
+ sprayData.push({ ...item, ...item.readData });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ data.value.sprayData = sprayData;
|
|
|
+ const alarmRes = await getWarnResult(params1);
|
|
|
+ if (alarmRes.warn_result) {
|
|
|
+ data.value.warn_result = alarmRes.warn_result;
|
|
|
+ }
|
|
|
+ configs.value = [...testSpary];
|
|
|
+ } else {
|
|
|
+ configs.value = testBeltNew;
|
|
|
}
|
|
|
- configs.value = [...testSpary];
|
|
|
- } else {
|
|
|
- configs.value = testBeltNew;
|
|
|
+ modalMonitorData.value = modalRes;
|
|
|
}
|
|
|
- modalMonitorData.value = modalRes;
|
|
|
-}
|
|
|
|
|
|
-// // 定时刷新
|
|
|
-function initInterval() {
|
|
|
- if (timer) clearInterval(timer);
|
|
|
- timer = setInterval(() => {
|
|
|
- refresh();
|
|
|
- }, 60000);
|
|
|
-}
|
|
|
+ // // 定时刷新
|
|
|
+ function initInterval() {
|
|
|
+ if (timer) clearInterval(timer);
|
|
|
+ timer = setInterval(() => {
|
|
|
+ refresh();
|
|
|
+ }, 60000);
|
|
|
+ }
|
|
|
|
|
|
-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();
|
|
|
-}
|
|
|
+ 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(); // 切换路由自动刷新
|
|
|
-// }
|
|
|
-// }
|
|
|
-// );
|
|
|
+ // watch(
|
|
|
+ // // 监听动态路由参数 :type
|
|
|
+ // () => route.params.type,
|
|
|
+ // (newVal) => {
|
|
|
+ // if (newVal) {
|
|
|
+ // console.log('切换页面类型：', newVal);
|
|
|
+ // refresh(); // 切换路由自动刷新
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // );
|
|
|
|
|
|
-function initModalAnimate(modal) {
|
|
|
- console.log('初始化模型', modal);
|
|
|
- modal.isRender = true;
|
|
|
- modalAnimate(modal, modalMonitorData);
|
|
|
-}
|
|
|
-function clearTimer() {
|
|
|
- if (timer) {
|
|
|
- clearInterval(timer);
|
|
|
- timer = null;
|
|
|
+ function initModalAnimate(modal) {
|
|
|
+ console.log('初始化模型', modal);
|
|
|
+ modal.isRender = true;
|
|
|
+ modalAnimate(modal, modalMonitorData);
|
|
|
}
|
|
|
-}
|
|
|
-watch(
|
|
|
- () => route.query.pageType,
|
|
|
- (newQueryType) => {
|
|
|
- if (newQueryType) {
|
|
|
- changePage(newQueryType as string);
|
|
|
+ function clearTimer() {
|
|
|
+ if (timer) {
|
|
|
+ clearInterval(timer);
|
|
|
+ timer = null;
|
|
|
}
|
|
|
- },
|
|
|
- { immediate: true } // 初始化立刻执行
|
|
|
-);
|
|
|
+ }
|
|
|
+ watch(
|
|
|
+ () => route.query.pageType,
|
|
|
+ (newQueryType) => {
|
|
|
+ if (newQueryType) {
|
|
|
+ changePage(newQueryType as string);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ { immediate: true } // 初始化立刻执行
|
|
|
+ );
|
|
|
|
|
|
-watch(
|
|
|
- () => modalMonitorData.value,
|
|
|
- (newData, oldData) => {
|
|
|
- if (newData && !Object.keys(oldData).length) {
|
|
|
- isInitModal.value = true;
|
|
|
+ watch(
|
|
|
+ () => modalMonitorData.value,
|
|
|
+ (newData, oldData) => {
|
|
|
+ if (newData && !Object.keys(oldData).length) {
|
|
|
+ isInitModal.value = true;
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
-);
|
|
|
+ );
|
|
|
|
|
|
-onMounted(async () => {
|
|
|
- await getSysDataSource();
|
|
|
- await refresh();
|
|
|
- initInterval();
|
|
|
-});
|
|
|
-onUnmounted(() => {
|
|
|
- clearTimer();
|
|
|
-});
|
|
|
+ onMounted(async () => {
|
|
|
+ await getSysDataSource();
|
|
|
+ await refresh();
|
|
|
+ initInterval();
|
|
|
+ });
|
|
|
+ onUnmounted(() => {
|
|
|
+ clearTimer();
|
|
|
+ });
|
|
|
</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;
|
|
|
- }
|
|
|
-
|
|
|
- .border {
|
|
|
- width: 100%;
|
|
|
- height: 94%;
|
|
|
- background: url('/@/assets/images/beltFire/mainbj.png') no-repeat;
|
|
|
- background-size: 100% 100%;
|
|
|
- position: relative;
|
|
|
- width: 100%;
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-.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-list {
|
|
|
+ .company-home {
|
|
|
+ background: url('/@/assets/images/beltFire/baseMap.png') no-repeat center;
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
- 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;
|
|
|
+ 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;
|
|
|
+ }
|
|
|
|
|
|
- .warning-time {
|
|
|
- font-size: 14px;
|
|
|
- color: #ccc;
|
|
|
+ .border {
|
|
|
+ width: 100%;
|
|
|
+ height: 94%;
|
|
|
+ background: url('/@/assets/images/beltFire/mainbj.png') no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ position: relative;
|
|
|
+ width: 100%;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- // 中间预警结果区
|
|
|
.center-warning-container {
|
|
|
position: absolute;
|
|
|
left: 50%;
|
|
|
@@ -423,67 +377,113 @@ onUnmounted(() => {
|
|
|
font-size: 14px;
|
|
|
color: #ccc;
|
|
|
}
|
|
|
+ }
|
|
|
|
|
|
- .warning-level {
|
|
|
- font-size: 14px;
|
|
|
+ // 中间预警结果区
|
|
|
+ .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;
|
|
|
- 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;
|
|
|
- }
|
|
|
+ margin-bottom: 10px;
|
|
|
+ color: #ff6b6b;
|
|
|
+ }
|
|
|
+
|
|
|
+ .warning-list {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ overflow-y: auto;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ gap: 8px;
|
|
|
}
|
|
|
|
|
|
- .warning-action {
|
|
|
- .btn-start-spray {
|
|
|
- background-color: #00e1ff;
|
|
|
- color: #000;
|
|
|
- border: none;
|
|
|
- padding: 4px 10px;
|
|
|
+ .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;
|
|
|
- cursor: pointer;
|
|
|
- font-size: 12px;
|
|
|
- transition: all 0.3s;
|
|
|
- &:hover {
|
|
|
- background-color: #00c3e6;
|
|
|
+ &.level-critical {
|
|
|
+ background-color: #ff6b6b;
|
|
|
+ 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;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- }
|
|
|
|
|
|
- // 巷道示意图
|
|
|
- .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>
|
hongrunxia