|
|
@@ -0,0 +1,165 @@
|
|
|
+<template>
|
|
|
+ <div class="page">
|
|
|
+ <HeaderComponent :title="title"></HeaderComponent>
|
|
|
+ <div class="content_page">
|
|
|
+ <PageDrawer :pages="pageItems_Na2SO4" class="page_drawer" />
|
|
|
+ <!-- 阀门 -->
|
|
|
+ <div class="valves">
|
|
|
+ <component v-for="item in deviceConfigGroup.VALVES" :key="item.id" :is="getComponentName(item.modelId)"
|
|
|
+ :title="getEquipmentTitle(item.equipmentName)" :valveStatusArr="getDataArrByCode(item.code)"
|
|
|
+ :rotateAngle="item.rotate || 0" :iconSize="item.size" :style="getComponentStyle(item)" />
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 泵 -->
|
|
|
+ <div class="pumps">
|
|
|
+ <component v-for="item in deviceConfigGroup.PUMPS" :key="item.id" :is="getComponentName(item.modelId)"
|
|
|
+ :title="getEquipmentTitle(item.title)" :pumpDataArr="pumpHelper.getDataArrByCode(item.code)"
|
|
|
+ :isReverse="item.isReverse" :iconSize="item.size" :style="getComponentStyle(item)" />
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 罐体 -->
|
|
|
+ <div class="tanks">
|
|
|
+ <component v-for="item in deviceConfigGroup.TANKS" :key="item.id" :is="getComponentName(item.modelId)"
|
|
|
+ :title="getEquipmentTitle(item.equipmentName)" :iconSize="item.size" :iconWidth="item.width"
|
|
|
+ :iconHeight="item.height" :style="getComponentStyle(item)" />
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 传感器 -->
|
|
|
+ <div class="sensors">
|
|
|
+ <component v-for="item in deviceConfigGroup.SENSORS" :key="item.id" :is="getComponentName(item.modelId)"
|
|
|
+ :title="getEquipmentTitle(item.equipmentName)" :sensorSize="item.size"
|
|
|
+ :sensorValue="sensorHelper.getDataArrByCode(item.code)" :sensorWidth="item.width"
|
|
|
+ :sensorHeight="item.height" :style="getComponentStyle(item)" />
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 其他设备 -->
|
|
|
+ <div class="icon_others">
|
|
|
+ <component v-for="item in deviceConfigGroup.ICONS" :key="item.id" :is="getComponentName(item.modelId)"
|
|
|
+ :iconSize="item.size" :iconClass="getIconClass(item.modelId)" :style="getComponentStyle(item)"
|
|
|
+ :title="getEquipmentTitle(item.equipmentName)" />
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 管道 -->
|
|
|
+ <div class="pipelines">
|
|
|
+ <component v-for="item in pipeConfig" :key="item.id" :is="getComponentName(item.modelId)"
|
|
|
+ :pipeStatus="evaluateCondition(item.flowCondition, true)" :strokeWidth="item.pipeWidth"
|
|
|
+ :style="getPipelineStyle(item, evaluateCondition(item.reverseCondition))"
|
|
|
+ :class="getPipelineClass(item.pipeClass, getPipeType(item.dynamicPipelineCondition))" />
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 大箭头指向 -->
|
|
|
+ <div class="arrows">
|
|
|
+ <component v-for="item in deviceConfigGroup.ARROWS" :key="item.id" :is="getComponentName(item.modelId)"
|
|
|
+ :arrowText="getEquipmentTitle(item.equipmentName)" :iconSize="item.size"
|
|
|
+ :specialCondition="JSON.parse(item.specialCondition)" :style="getComponentStyle(item)" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup>
|
|
|
+import PageDrawer from '@/components/GeneralComponents/PageDrawerComponent.vue';
|
|
|
+import { computed, onMounted, onBeforeUnmount, reactive } from 'vue';
|
|
|
+import { useValveHelper } from '@/hooks/useValveHelper'
|
|
|
+import { stompClient } from '@/utils/ws/stompClient';
|
|
|
+import { useEquipmentLayout } from '@/hooks/useEquipmentLayout'
|
|
|
+import { useComponentHelper } from '@/hooks/useComponentHelper'
|
|
|
+import { updateZTPageConfig } from '@/api/dcs/configurePage';
|
|
|
+import { pageItems_Na2SO4 } from "@/config"
|
|
|
+import { useRoute } from 'vue-router'
|
|
|
+const route = useRoute()
|
|
|
+const pageCode = route.name
|
|
|
+const title = pageItems_Na2SO4.find(item => item.code === pageCode).label
|
|
|
+// 获取设备布局 & 数据订阅
|
|
|
+const {
|
|
|
+ pipeConfig,//管道配置信息
|
|
|
+ deviceConfigGroup,//设备配置分组
|
|
|
+ modelMap,//设备模型映射
|
|
|
+ pageParams,//页面参数
|
|
|
+ fetchPageConfig,//获取页面配置
|
|
|
+} = useEquipmentLayout(pageCode)
|
|
|
+
|
|
|
+// 组件渲染辅助方法
|
|
|
+const {
|
|
|
+ getComponentName,
|
|
|
+ getComponentStyle,
|
|
|
+ getIconClass,
|
|
|
+ getEquipmentTitle,
|
|
|
+ getPipelineClass,
|
|
|
+ getPipelineStyle,
|
|
|
+} = useComponentHelper(modelMap)
|
|
|
+
|
|
|
+
|
|
|
+onMounted(async () => {
|
|
|
+ await fetchPageConfig(pageCode).then(res => {
|
|
|
+ updatePageConfig()
|
|
|
+ })
|
|
|
+})
|
|
|
+
|
|
|
+onBeforeUnmount(() => {
|
|
|
+ // 页面销毁时取消订阅
|
|
|
+ stompClient.unsubscribeFromPage(pageCode);
|
|
|
+});
|
|
|
+
|
|
|
+//阀门数据初始化
|
|
|
+const valveArr = [
|
|
|
+]
|
|
|
+//传感器数据初始化
|
|
|
+const sensorArr = [
|
|
|
+]
|
|
|
+//泵数据初始化
|
|
|
+const pumpArr = [
|
|
|
+]
|
|
|
+
|
|
|
+//设备数据分组
|
|
|
+const deviceDataGroup = reactive({
|
|
|
+ VALVES: valveArr,
|
|
|
+ PUMPS: pumpArr,
|
|
|
+ SENSORS: sensorArr,
|
|
|
+})
|
|
|
+
|
|
|
+//更新页面配置
|
|
|
+function updatePageConfig() {
|
|
|
+ updateZTPageConfig(pageCode, pageParams.value)
|
|
|
+ .then(res => {
|
|
|
+ stompClient.subscribeToPage(pageCode, (data) => {
|
|
|
+ deviceDataGroup.VALVES = Object.values(data?.VALVES || {});
|
|
|
+ deviceDataGroup.PUMPS = Object.values(data?.PUMPS || {});
|
|
|
+ deviceDataGroup.SENSORS = Object.values(data?.SENSORS || {});
|
|
|
+ });
|
|
|
+ })
|
|
|
+ .catch(err => {
|
|
|
+ console.log('页面配置失败：', err);
|
|
|
+ });
|
|
|
+}
|
|
|
+const pumpHelper = useValveHelper(computed(() => deviceDataGroup.PUMPS))
|
|
|
+const { getDataArrByCode } = useValveHelper(computed(() => deviceDataGroup.VALVES))
|
|
|
+const sensorHelper = useValveHelper(computed(() => deviceDataGroup.SENSORS))
|
|
|
+const {
|
|
|
+ evaluateCondition, getPipeType
|
|
|
+} = useValveHelper(computed(() => [...deviceDataGroup.VALVES, ...deviceDataGroup.PUMPS]))
|
|
|
+
|
|
|
+
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.page {
|
|
|
+ // width: 100%;
|
|
|
+ // height: 100%;
|
|
|
+ width: 1920px;
|
|
|
+ height: 1080px;
|
|
|
+ background-color: #0b172c;
|
|
|
+
|
|
|
+ .content_page {
|
|
|
+ position: relative;
|
|
|
+ width: 100%;
|
|
|
+ height: 1000px;
|
|
|
+
|
|
|
+ .page_drawer {
|
|
|
+ position: absolute;
|
|
|
+ right: 2%;
|
|
|
+ top: -1%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
