|
|
@@ -0,0 +1,588 @@
|
|
|
+<template>
|
|
|
+ <div class="page">
|
|
|
+ <!-- 固定头部 -->
|
|
|
+ <div class="fixed-header" ref="fixedHeader">
|
|
|
+ <HeaderComponent title="硫酸钠-反应控制台" backTo="/controlPage/flowSelect" />
|
|
|
+ <!-- <PageNav :items="navItems" :currentCode="flowCode" /> -->
|
|
|
+ </div>
|
|
|
+ <!-- 主内容区 -->
|
|
|
+ <div class="content_page">
|
|
|
+ <div class="device_status_container">
|
|
|
+ <!-- 1#反应釜 状态卡片 -->
|
|
|
+ <!-- <div class="status_card" shadow="hover">
|
|
|
+ <div class="card_header">
|
|
|
+ <span class="card_title">1#反应釜</span>
|
|
|
+ <span class="card_subtitle">C3001</span>
|
|
|
+ </div>
|
|
|
+ <div class="device_grid">
|
|
|
+ <DeviceConfigItem :deviceName="workModeConfig.deviceName"
|
|
|
+ :settingList="workModeConfig.settingList" @change="handleDeviceConfigChange" />
|
|
|
+ <DeviceConfigItem :deviceName="feedConfig.deviceName" :settingList="feedConfig.settingList"
|
|
|
+ @change="handleDeviceConfigChange" />
|
|
|
+ </div>
|
|
|
+ </div> -->
|
|
|
+ <StatusCard title="1#反应釜" subtitle="C3001" :deviceList="deviceList"
|
|
|
+ @deviceChange="handleDeviceConfigChange">
|
|
|
+ </StatusCard>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup>
|
|
|
+const pageCode = 'MGM';
|
|
|
+const flowId = 9;//当前页面流程Id
|
|
|
+import { onMounted, computed, reactive, ref } from 'vue';
|
|
|
+import { useRoute } from 'vue-router';
|
|
|
+const route = useRoute();
|
|
|
+import { useEquipmentLayout } from '@/hooks/useEquipmentLayout'
|
|
|
+import { useValveHelper } from '@/hooks/useValveHelper'
|
|
|
+import { updateZTPageConfig } from '@/api/dcs/configurePage';
|
|
|
+import { getMainSetParam } from '@/api/hnyz/param'
|
|
|
+import { setValues } from '@/api/dcs/flowControl'
|
|
|
+import { stompClient } from '@/utils/ws/stompClient';
|
|
|
+
|
|
|
+import DeviceConfigItem from '../components/DeviceConfigItem.vue';
|
|
|
+import StatusCard from '../components/StatusCard.vue';
|
|
|
+
|
|
|
+import HeaderComponent from '@/components/DCS/HeaderComponent.vue';
|
|
|
+import PageNav from '@/components/GeneralComponents/control/PageNavComponent.vue';
|
|
|
+import { getFlowNav } from '@/api/hnyz/flow';
|
|
|
+const flowCode = computed(() => route.params.flowCode);
|
|
|
+const navItems = ref();
|
|
|
+const fixedHeader = ref(null);
|
|
|
+const headerHeight = ref(0);
|
|
|
+// 计算固定头部高度
|
|
|
+const calculateHeaderHeight = () => { headerHeight.value = fixedHeader.value?.offsetHeight || 0; }
|
|
|
+onMounted(async () => {
|
|
|
+ const res = await getFlowNav('Na2SO4', 'flowSelect');
|
|
|
+ navItems.value = res.data;
|
|
|
+ calculateHeaderHeight();
|
|
|
+ window.addEventListener('resize', calculateHeaderHeight);
|
|
|
+});
|
|
|
+
|
|
|
+onMounted(async () => {
|
|
|
+ // loadInitialData();
|
|
|
+});
|
|
|
+
|
|
|
+const num = ref(1)
|
|
|
+const speedValue = ref(500)
|
|
|
+const weightValue = ref(500)
|
|
|
+const flowValue = ref(100)
|
|
|
+const temperatureValue = ref(25)
|
|
|
+// 工作模式配置
|
|
|
+const workModeConfig = computed(() => ({
|
|
|
+ deviceName: '工作模式',
|
|
|
+ settingList: [
|
|
|
+ {
|
|
|
+ title: '当前模式',
|
|
|
+ item: {
|
|
|
+ component: 'statusSet',
|
|
|
+ props: {
|
|
|
+ buttonInfo: [
|
|
|
+ { value: 0, type: 'success', label: '正吹', active: 1 },
|
|
|
+ { value: 1, type: 'danger', label: '反吹', active: 0 }
|
|
|
+ ],
|
|
|
+ disable: true
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '模式设置',
|
|
|
+ item: {
|
|
|
+ component: 'statusSet',
|
|
|
+ props: {
|
|
|
+ buttonInfo: [
|
|
|
+ { value: 0, type: 'success', label: '开', active: 1 },
|
|
|
+ { value: 1, type: 'danger', label: '关', active: 0 },
|
|
|
+ { value: 2, type: 'success', label: '正吹', active: 0 },
|
|
|
+ { value: 3, type: 'success', label: '反吹', active: 0 }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ]
|
|
|
+}))
|
|
|
+
|
|
|
+// 原矿进料配置
|
|
|
+const feedConfig = computed(() => ({
|
|
|
+ deviceName: '原矿进料',
|
|
|
+ settingList: [
|
|
|
+ {
|
|
|
+ title: '状态',
|
|
|
+ item: {
|
|
|
+ component: 'statusView',
|
|
|
+ props: {
|
|
|
+ active: 2
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '速度',
|
|
|
+ item: {
|
|
|
+ component: 'numberInput',
|
|
|
+ props: {
|
|
|
+ value: speedValue.value,
|
|
|
+ unit: '转',
|
|
|
+ max: 5000
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '进料量',
|
|
|
+ item: {
|
|
|
+ component: 'numberInput',
|
|
|
+ props: {
|
|
|
+ value: weightValue.value,
|
|
|
+ unit: 'T'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ]
|
|
|
+}))
|
|
|
+
|
|
|
+const deviceList = computed(() => [
|
|
|
+ {
|
|
|
+ deviceName: '原矿进料',
|
|
|
+ settingList: [
|
|
|
+ {
|
|
|
+ title: '状态',
|
|
|
+ item: {
|
|
|
+ component: 'statusView',
|
|
|
+ props: {
|
|
|
+ active: 2
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '操作',
|
|
|
+ item: {
|
|
|
+ component: 'statusSet',
|
|
|
+ props: {
|
|
|
+ buttonInfo: [
|
|
|
+ { value: 0, type: 'success', label: '启动', active: 1 },
|
|
|
+ { value: 1, type: 'danger', label: '停止', active: 0 },
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '实时转速',
|
|
|
+ code: 'yljksjzs',
|
|
|
+ item: {
|
|
|
+ component: 'numberInput',
|
|
|
+ props: {
|
|
|
+ value: speedValue.value,
|
|
|
+ unit: '%',
|
|
|
+ disable: true
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '设定转速',
|
|
|
+ code: 'yljksdzs',
|
|
|
+ item: {
|
|
|
+ component: 'numberInput',
|
|
|
+ props: {
|
|
|
+ value: speedValue.value,
|
|
|
+ unit: '%',
|
|
|
+ min: 0,
|
|
|
+ max: 5000
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '进料量',
|
|
|
+ code: 'yljkjll',
|
|
|
+ item: {
|
|
|
+ component: 'numberInput',
|
|
|
+ props: {
|
|
|
+ value: weightValue.value,
|
|
|
+ unit: 'kg',
|
|
|
+ min: 0,
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ deviceName: '1#硫酸||进料泵',
|
|
|
+ deviceCode: 'P5003',
|
|
|
+ settingList: [
|
|
|
+ {
|
|
|
+ title: '状态',
|
|
|
+ item: {
|
|
|
+ component: 'statusView',
|
|
|
+ props: {
|
|
|
+ active: 2
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '操作',
|
|
|
+ item: {
|
|
|
+ component: 'statusSet',
|
|
|
+ props: {
|
|
|
+ buttonInfo: [
|
|
|
+ { value: 0, type: 'success', label: '启动', active: 1 },
|
|
|
+ { value: 1, type: 'danger', label: '停止', active: 0 },
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ deviceName: '2#硫酸||进料泵',
|
|
|
+ deviceCode: 'P5004',
|
|
|
+ settingList: [
|
|
|
+ {
|
|
|
+ title: '状态',
|
|
|
+ item: {
|
|
|
+ component: 'statusView',
|
|
|
+ props: {
|
|
|
+ active: 2
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '操作',
|
|
|
+ item: {
|
|
|
+ component: 'statusSet',
|
|
|
+ props: {
|
|
|
+ buttonInfo: [
|
|
|
+ { value: 0, type: 'success', label: '启动', active: 1 },
|
|
|
+ { value: 1, type: 'danger', label: '停止', active: 0 },
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ deviceName: '硫酸流量计',
|
|
|
+ deviceCode: 'FIT3001',
|
|
|
+ settingList: [
|
|
|
+ {
|
|
|
+ title: '实时值',
|
|
|
+ code: 'lslljssz',
|
|
|
+ item: {
|
|
|
+ component: 'numberInput',
|
|
|
+ props: {
|
|
|
+ value: 100,
|
|
|
+ unit: 'm³/h',
|
|
|
+ disable: true
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '设定值',
|
|
|
+ code: 'lslljsdz',
|
|
|
+ item: {
|
|
|
+ component: 'numberInput',
|
|
|
+ props: {
|
|
|
+ value: 100,
|
|
|
+ unit: 'm³/h',
|
|
|
+ min: 0,
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ deviceName: '1#反应釜||温度计',
|
|
|
+ deviceCode: 'TT3001',
|
|
|
+ settingList: [
|
|
|
+ {
|
|
|
+ title: '实时值',
|
|
|
+ code: 'fyfwdjssz',
|
|
|
+ item: {
|
|
|
+ component: 'numberInput',
|
|
|
+ props: {
|
|
|
+ value: 0,
|
|
|
+ unit: '°C',
|
|
|
+ disable: true
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '设定值',
|
|
|
+ code: 'fyfwdjsdz',
|
|
|
+ item: {
|
|
|
+ component: 'numberInput',
|
|
|
+ props: {
|
|
|
+ value: 0,
|
|
|
+ unit: '°C',
|
|
|
+ min: 0,
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ deviceName: '1#反应釜||搅拌电机',
|
|
|
+ deviceCode: 'M3001',
|
|
|
+ settingList: [
|
|
|
+ {
|
|
|
+ title: '状态',
|
|
|
+ item: {
|
|
|
+ component: 'statusView',
|
|
|
+ props: {
|
|
|
+ active: 2
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '操作',
|
|
|
+ item: {
|
|
|
+ component: 'statusSet',
|
|
|
+ props: {
|
|
|
+ buttonInfo: [
|
|
|
+ { value: 0, type: 'success', label: '启动', active: 1 },
|
|
|
+ { value: 1, type: 'danger', label: '停止', active: 0 },
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ deviceName: '1#反应釜||PH计',
|
|
|
+ deviceCode: 'PH3001',
|
|
|
+ settingList: [
|
|
|
+ {
|
|
|
+ title: '实时值',
|
|
|
+ code: 'fyfphjssz',
|
|
|
+ item: {
|
|
|
+ component: 'numberInput',
|
|
|
+ props: {
|
|
|
+ value: 0,
|
|
|
+ disable: true
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '设定值',
|
|
|
+ code: 'fyfphjsdz',
|
|
|
+ item: {
|
|
|
+ component: 'numberInput',
|
|
|
+ props: {
|
|
|
+ value: 0,
|
|
|
+ min: 0,
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ deviceName: '硫酸进料阀',
|
|
|
+ deviceCode: 'QQF5004',
|
|
|
+ settingList: [
|
|
|
+ {
|
|
|
+ title: '状态',
|
|
|
+ item: {
|
|
|
+ component: 'statusView',
|
|
|
+ props: {
|
|
|
+ active: 2
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '操作',
|
|
|
+ item: {
|
|
|
+ component: 'statusSet',
|
|
|
+ props: {
|
|
|
+ buttonInfo: [
|
|
|
+ { value: 0, type: 'success', label: '开', active: 1 },
|
|
|
+ { value: 1, type: 'danger', label: '关', active: 0 },
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ deviceName: '硫酸进料阀',
|
|
|
+ deviceCode: 'QQF5003',
|
|
|
+ settingList: [
|
|
|
+ {
|
|
|
+ title: '状态',
|
|
|
+ item: {
|
|
|
+ component: 'statusView',
|
|
|
+ props: {
|
|
|
+ active: 2
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '操作',
|
|
|
+ item: {
|
|
|
+ component: 'statusSet',
|
|
|
+ props: {
|
|
|
+ buttonInfo: [
|
|
|
+ { value: 0, type: 'success', label: '开', active: 1 },
|
|
|
+ { value: 1, type: 'danger', label: '关', active: 0 },
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ deviceName: '1#反应釜||液位计',
|
|
|
+ deviceCode: 'LT3101',
|
|
|
+ settingList: [
|
|
|
+ {
|
|
|
+ title: '实时值',
|
|
|
+ code: 'fyfywjssz',
|
|
|
+ item: {
|
|
|
+ component: 'numberInput',
|
|
|
+ props: {
|
|
|
+ value: 0,
|
|
|
+ disable: true
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '设定值',
|
|
|
+ code: 'fyfywjsdz',
|
|
|
+ item: {
|
|
|
+ component: 'numberInput',
|
|
|
+ props: {
|
|
|
+ value: 0,
|
|
|
+ min: 0,
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+])
|
|
|
+
|
|
|
+// const {
|
|
|
+// generatePageParams,
|
|
|
+// } = useEquipmentLayout(pageCode)
|
|
|
+
|
|
|
+// 根据设备类型返回组件
|
|
|
+function getComponentByType(equipmentType) {
|
|
|
+ const type = Number(equipmentType);
|
|
|
+ if ([1, 5].includes(type)) return ValveControlComponent;
|
|
|
+ if (type === 2) return PumpControlComponent;
|
|
|
+ if (type === 4) return SensorControl;
|
|
|
+ return 'div';
|
|
|
+}
|
|
|
+
|
|
|
+// const { getDataArrByCode, getValveStatusArr } = useValveHelper(computed(() => [
|
|
|
+// ...deviceDataGroup.VALVES,
|
|
|
+// ...deviceDataGroup.SENSORS
|
|
|
+// ]))
|
|
|
+const handleChange = (value) => {
|
|
|
+ console.log("handleChange", value)
|
|
|
+}
|
|
|
+
|
|
|
+// 处理速度变化
|
|
|
+const handleSpeedChange = (newValue) => {
|
|
|
+ console.log("速度变化:", newValue)
|
|
|
+ // TODO
|
|
|
+}
|
|
|
+
|
|
|
+// 处理进料量变化
|
|
|
+const handleWeightChange = (newValue) => {
|
|
|
+ console.log("进料量变化:", newValue)
|
|
|
+ // TODO
|
|
|
+}
|
|
|
+
|
|
|
+// 处理设备配置变化
|
|
|
+const handleDeviceConfigChange = (data) => {
|
|
|
+ console.log('主页面接收到设备配置变化:', data)
|
|
|
+ const { title, value, setting, cardTitle, cardSubtitle } = data
|
|
|
+
|
|
|
+ // console.log('卡片信息:', { cardTitle, cardSubtitle })
|
|
|
+ // console.log('设置项信息:', { title, value, setting })
|
|
|
+
|
|
|
+ if (title === '设定转速') {
|
|
|
+ console.log('处理速度变化:', value)
|
|
|
+ handleSpeedChange(value)
|
|
|
+ speedValue.value = value
|
|
|
+ // 同步更新配置中的值
|
|
|
+ const speedSetting = feedConfig.value.settingList.find(item => item.title === '速度')
|
|
|
+ if (speedSetting) {
|
|
|
+ speedSetting.item.props.value = value
|
|
|
+ }
|
|
|
+ } else if (title === '进料量') {
|
|
|
+ console.log('处理进料量变化:', value)
|
|
|
+ handleWeightChange(value)
|
|
|
+ weightValue.value = value
|
|
|
+ // 同步更新配置中的值
|
|
|
+ const weightSetting = feedConfig.value.settingList.find(item => item.title === '进料量')
|
|
|
+ if (weightSetting) {
|
|
|
+ weightSetting.item.props.value = value
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ console.log('处理其他设置项变化:', { title, value })
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss">
|
|
|
+@import '@/assets/styles/dcs/hnyzConfiguratePage.scss';
|
|
|
+
|
|
|
+.page {
|
|
|
+ // width: 1920px;
|
|
|
+ // height: 1080px;
|
|
|
+ // background-color: #030709;
|
|
|
+
|
|
|
+ .content_page {
|
|
|
+ position: relative;
|
|
|
+ width: 100%;
|
|
|
+ // min-height: 100vh;
|
|
|
+ padding: 20px;
|
|
|
+ margin-top: 30px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-start;
|
|
|
+ align-items: flex-start;
|
|
|
+
|
|
|
+ .device_status_container {
|
|
|
+ display: inline-flex;
|
|
|
+ padding: 10px;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: flex-start;
|
|
|
+ gap: 20px;
|
|
|
+ margin: 0 97px 0;
|
|
|
+
|
|
|
+ .light-control-card {
|
|
|
+ background: rgba(255, 255, 255, 0.95);
|
|
|
+ border-radius: 8px;
|
|
|
+
|
|
|
+ .card_header {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .card_title {
|
|
|
+ font-size: 18px;
|
|
|
+ font-weight: 600;
|
|
|
+ color: #303133;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .light-button-grid {
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
|
|
|
+ gap: 12px;
|
|
|
+
|
|
|
+ .el-button+.el-button {
|
|
|
+ margin-left: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .light-button {
|
|
|
+ width: 100%;
|
|
|
+ font-size: 12px;
|
|
|
+ padding: 8px 4px;
|
|
|
+ line-height: 1.2;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
wangpx