|
|
@@ -28,142 +28,143 @@
|
|
|
</div>
|
|
|
</template>
|
|
|
<script setup lang="ts">
|
|
|
- import { onMounted, onUnmounted, ref } from 'vue';
|
|
|
- import customHeader from './components/customHeader-belt.vue';
|
|
|
- import { useInitConfigs, useInitPage } from '../hooks/useInit';
|
|
|
- import { testBeltLaneFire } from './configurable.data';
|
|
|
- import ModuleCommon from './components/ModuleCommon.vue';
|
|
|
- import SubApp from '/@/components/vent/micro/createSubApp.vue';
|
|
|
- import History from './components/detail/history.vue';
|
|
|
- import { getDataHome } from './configurable.api';
|
|
|
+import { onMounted, onUnmounted, ref } from 'vue';
|
|
|
+import customHeader from './components/customHeader-belt.vue';
|
|
|
+import { useInitConfigs, useInitPage } from '../hooks/useInit';
|
|
|
+import { testBeltLaneFire } from './configurable.data';
|
|
|
+import ModuleCommon from './components/ModuleCommon.vue';
|
|
|
+import SubApp from '/@/components/vent/micro/createSubApp.vue';
|
|
|
+import History from './components/detail/history.vue';
|
|
|
+import { getDataHome } from './configurable.api';
|
|
|
|
|
|
- const { configs, devicesTypes, fetchConfigs } = useInitConfigs();
|
|
|
- const { updateEnhancedConfigs, updateData, data } = useInitPage('矿井全域皮带巷三级防灭火系统');
|
|
|
+const { configs, devicesTypes, fetchConfigs } = useInitConfigs();
|
|
|
+const { updateEnhancedConfigs, updateData, data } = useInitPage('矿井全域皮带巷三级防灭火系统');
|
|
|
|
|
|
- const currentSelectedId = ref<string | number>('');
|
|
|
+const currentSelectedId = ref<string | number>('');
|
|
|
|
|
|
- let timer = null;
|
|
|
- const showHistory = ref(false);
|
|
|
- // 接收子组件上报的点击事件,更新全局选中状态
|
|
|
- const handleItemClick = (item) => {
|
|
|
- const clickId = item.id;
|
|
|
- if (!clickId) return;
|
|
|
- currentSelectedId.value = clickId;
|
|
|
- };
|
|
|
- function goToHistory() {
|
|
|
- showHistory.value = !showHistory.value;
|
|
|
- }
|
|
|
+let timer = null;
|
|
|
+const showHistory = ref(false);
|
|
|
+// 接收子组件上报的点击事件,更新全局选中状态
|
|
|
+const handleItemClick = (item) => {
|
|
|
+ const clickId = item.id;
|
|
|
+ if (!clickId) return;
|
|
|
+ currentSelectedId.value = clickId;
|
|
|
+ refreshData();
|
|
|
+};
|
|
|
+function goToHistory() {
|
|
|
+ showHistory.value = !showHistory.value;
|
|
|
+}
|
|
|
|
|
|
- // 数据筛选
|
|
|
- const filterDataById = (sourceData, clickId: string | number) => {
|
|
|
- if (!sourceData || !clickId) return sourceData;
|
|
|
- const id = String(clickId);
|
|
|
- const monitor = sourceData.monitor_alert?.find((item) => String(item.sysId) === id);
|
|
|
- const spray = sourceData.spray_control?.find((item) => String(item.sysId) === id);
|
|
|
- const gate = sourceData.gate_control?.find((item) => String(item.sysId) === id);
|
|
|
- return {
|
|
|
- ...sourceData,
|
|
|
- monitor_alert: monitor ? [monitor] : [],
|
|
|
- spray_control: spray ? [spray] : [],
|
|
|
- gate_control: gate ? [gate] : [],
|
|
|
- };
|
|
|
+// 数据筛选
|
|
|
+const filterDataById = (sourceData, clickId: string | number) => {
|
|
|
+ if (!sourceData || !clickId) return sourceData;
|
|
|
+ const id = String(clickId);
|
|
|
+ const monitor = sourceData.monitor_alert?.find((item) => String(item.sysId) === id);
|
|
|
+ const spray = sourceData.spray_control?.find((item) => String(item.sysId) === id);
|
|
|
+ const gate = sourceData.gate_control?.find((item) => String(item.sysId) === id);
|
|
|
+ return {
|
|
|
+ ...sourceData,
|
|
|
+ monitor_alert: monitor ? [monitor] : [],
|
|
|
+ spray_control: spray ? [spray] : [],
|
|
|
+ gate_control: gate ? [gate] : [],
|
|
|
};
|
|
|
+};
|
|
|
|
|
|
- function refresh() {
|
|
|
- fetchConfigs('belt').then(() => {
|
|
|
- if (!configs.value || configs.value.length === 0) {
|
|
|
- configs.value = testBeltLaneFire;
|
|
|
- }
|
|
|
-
|
|
|
- const dataListStr = configs.value
|
|
|
- .filter((e) => e.deviceType)
|
|
|
- .map((e) => e.deviceType)
|
|
|
- .join(',');
|
|
|
-
|
|
|
- getDataHome({ dataList: dataListStr }).then((res: any) => {
|
|
|
- res.spray_control = [
|
|
|
- {
|
|
|
- systemName: '东翼胶带运输大巷',
|
|
|
- sysId: '2028657172566073346',
|
|
|
- sysList: [{ netstatus: '1', deviceStatus: '1', plsy: '1#区域 1.4MPa', kzms: '手动' }],
|
|
|
- },
|
|
|
- {
|
|
|
- sysId: '2046500718274756609',
|
|
|
- systemName: '1101胶带运输顺槽',
|
|
|
- sysList: [{ netstatus: '1', deviceStatus: '1', plqy: '2#区域', plsy: '1.6MPa', kzms: '自动' }],
|
|
|
- },
|
|
|
- ];
|
|
|
- let showData = res;
|
|
|
+function refresh() {
|
|
|
+ fetchConfigs('belt').then(() => {
|
|
|
+ if (!configs.value || configs.value.length === 0) {
|
|
|
+ configs.value = testBeltLaneFire;
|
|
|
+ }
|
|
|
+ refreshData();
|
|
|
+ });
|
|
|
+}
|
|
|
+function refreshData() {
|
|
|
+ const dataListStr = configs.value
|
|
|
+ .filter((e) => e.deviceType)
|
|
|
+ .map((e) => e.deviceType)
|
|
|
+ .join(',');
|
|
|
|
|
|
- if (currentSelectedId.value) {
|
|
|
- showData = filterDataById(res, currentSelectedId.value);
|
|
|
- } else {
|
|
|
- const firstId = res.monitor_alert?.[0]?.sysId;
|
|
|
- const warnVal = res.monitor_alert?.[0]?.value;
|
|
|
- if (firstId) {
|
|
|
- currentSelectedId.value = firstId;
|
|
|
- showData = filterDataById(res, firstId);
|
|
|
- }
|
|
|
- }
|
|
|
+ getDataHome({ dataList: dataListStr }).then((res: any) => {
|
|
|
+ res.spray_control = [
|
|
|
+ {
|
|
|
+ systemName: '东翼胶带运输大巷',
|
|
|
+ sysId: '2028657172566073346',
|
|
|
+ sysList: [{ netstatus: '1', deviceStatus: '1', plsy: '1#区域 1.4MPa', kzms: '手动' }],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ sysId: '2046500718274756609',
|
|
|
+ systemName: '1101胶带运输顺槽',
|
|
|
+ sysList: [{ netstatus: '1', deviceStatus: '1', plqy: '2#区域', plsy: '1.6MPa', kzms: '自动' }],
|
|
|
+ },
|
|
|
+ ];
|
|
|
|
|
|
- updateData(showData);
|
|
|
- });
|
|
|
- });
|
|
|
- }
|
|
|
- // 轮询
|
|
|
- function initInterval() {
|
|
|
- if (timer) clearInterval(timer);
|
|
|
- timer = setInterval(() => {
|
|
|
- refresh();
|
|
|
- }, 5000);
|
|
|
- }
|
|
|
- onMounted(() => {
|
|
|
- refresh();
|
|
|
- initInterval();
|
|
|
+ let showData = res;
|
|
|
+ if (currentSelectedId.value) {
|
|
|
+ showData = filterDataById(res, currentSelectedId.value);
|
|
|
+ } else {
|
|
|
+ const firstId = res.monitor_alert?.[0]?.sysId;
|
|
|
+ if (firstId) {
|
|
|
+ currentSelectedId.value = firstId;
|
|
|
+ showData = filterDataById(res, firstId);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ updateData(showData);
|
|
|
});
|
|
|
+}
|
|
|
+// 轮询
|
|
|
+function initInterval() {
|
|
|
+ if (timer) clearInterval(timer);
|
|
|
+ timer = setInterval(() => {
|
|
|
+ refresh();
|
|
|
+ }, 5000);
|
|
|
+}
|
|
|
+onMounted(() => {
|
|
|
+ refresh();
|
|
|
+ initInterval();
|
|
|
+});
|
|
|
|
|
|
- onUnmounted(() => {
|
|
|
- clearInterval(timer);
|
|
|
- timer = null;
|
|
|
- });
|
|
|
+onUnmounted(() => {
|
|
|
+ clearInterval(timer);
|
|
|
+ timer = null;
|
|
|
+});
|
|
|
</script>
|
|
|
<style lang="less" scoped>
|
|
|
- .spray-wrapper {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- background-image: url('/@/assets/images/beltFire/baseMap.png');
|
|
|
- background-size: cover;
|
|
|
- }
|
|
|
+.spray-wrapper {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ background-image: url('/@/assets/images/beltFire/baseMap.png');
|
|
|
+ background-size: cover;
|
|
|
+}
|
|
|
|
|
|
- #spray3D {
|
|
|
- pointer-events: all;
|
|
|
- }
|
|
|
+#spray3D {
|
|
|
+ pointer-events: all;
|
|
|
+}
|
|
|
|
|
|
- .spray-wrapper :deep(.list-item_L .list-item__icon_L) {
|
|
|
- background-image: url('/@/assets/images/home-container/configurable/minehome/list-icon-file.png');
|
|
|
- }
|
|
|
- .spray-wrapper :deep(.list-item_N:nth-child(1)) {
|
|
|
- background-image: url('/@/assets/images/home-container/configurable/minehome/list-bg-n5.png');
|
|
|
- }
|
|
|
- .spray-wrapper :deep(.list-item_N:nth-child(2)) {
|
|
|
- background-image: url('/@/assets/images/home-container/configurable/minehome/list-bg-n6.png');
|
|
|
- }
|
|
|
- .company-home {
|
|
|
- background: url('/@/assets/images/beltFire/baseMap.png') no-repeat center;
|
|
|
+.spray-wrapper :deep(.list-item_L .list-item__icon_L) {
|
|
|
+ background-image: url('/@/assets/images/home-container/configurable/minehome/list-icon-file.png');
|
|
|
+}
|
|
|
+.spray-wrapper :deep(.list-item_N:nth-child(1)) {
|
|
|
+ background-image: url('/@/assets/images/home-container/configurable/minehome/list-bg-n5.png');
|
|
|
+}
|
|
|
+.spray-wrapper :deep(.list-item_N:nth-child(2)) {
|
|
|
+ background-image: url('/@/assets/images/home-container/configurable/minehome/list-bg-n6.png');
|
|
|
+}
|
|
|
+.company-home {
|
|
|
+ background: url('/@/assets/images/beltFire/baseMap.png') no-repeat center;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ color: @white;
|
|
|
+ position: relative;
|
|
|
+ .border {
|
|
|
width: 100%;
|
|
|
- height: 100%;
|
|
|
- color: @white;
|
|
|
- position: relative;
|
|
|
- .border {
|
|
|
- width: 100%;
|
|
|
- height: 94%;
|
|
|
- background: url('/@/assets/images/beltFire/mainbj.png') no-repeat;
|
|
|
+ height: 94%;
|
|
|
+ background: url('/@/assets/images/beltFire/mainbj.png') no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ margin-top: 50px;
|
|
|
+ .test {
|
|
|
+ background: url('./test.png') no-repeat;
|
|
|
background-size: 100% 100%;
|
|
|
- margin-top: 50px;
|
|
|
- .test {
|
|
|
- background: url('./test.png') no-repeat;
|
|
|
- background-size: 100% 100%;
|
|
|
- }
|
|
|
}
|
|
|
}
|
|
|
+}
|
|
|
</style>
|