|
|
@@ -4,20 +4,42 @@
|
|
|
<div class="content_page">
|
|
|
<!-- 左侧操作栏 -->
|
|
|
<div class="left_operation">
|
|
|
- <el-switch v-model="isControl" class="mb-2" active-text="控制" inactive-text="展示" />
|
|
|
- <!-- <el-button type="primary" @click="closeAllValves">关闭所有阀门</el-button>
|
|
|
- <el-button type="primary" @click="filterProcess">过滤流程</el-button>
|
|
|
- <el-button type="primary" @click="blowProcess">吹扫流程</el-button>
|
|
|
- <el-button type="primary" @click="blockingOutProcess">反吹排堵流程</el-button>
|
|
|
- <el-button type="primary" @click="slagDiachargeProcess">排渣流程</el-button> -->
|
|
|
+ <el-switch v-model="isControl" active-text="控制" inactive-text="展示" size="large" />
|
|
|
+ </div>
|
|
|
+ <!-- 左下 -->
|
|
|
+ <div class="left_bottom">
|
|
|
+ <el-card class="button_card" shadow="hover">
|
|
|
+ <template #header>
|
|
|
+ 操作按钮
|
|
|
+ </template>
|
|
|
+ <div class="button_grid">
|
|
|
+ <el-button v-for="n in 6" :key="n" type="primary" class="grid_button" @click="lightControl">
|
|
|
+ 灯控{{ n }}
|
|
|
+ </el-button>
|
|
|
+ </div>
|
|
|
+ </el-card>
|
|
|
+ </div>
|
|
|
+
|
|
|
+
|
|
|
+ <!-- 右下 -->
|
|
|
+ <div class="right_bottom">
|
|
|
+ <el-card class="button_card" shadow="hover">
|
|
|
+ <template #header>
|
|
|
+ 操作按钮
|
|
|
+ </template>
|
|
|
+ <div class="button_grid">
|
|
|
+ <el-button v-for="n in 6" :key="n" type="primary" class="grid_button" @click="lightControl">
|
|
|
+ 灯控{{ n + 6 }}
|
|
|
+ </el-button>
|
|
|
+ </div>
|
|
|
+ </el-card>
|
|
|
</div>
|
|
|
<!-- 阀门 -->
|
|
|
<div class="valves">
|
|
|
<component v-for="item in deviceConfigGroup.VALVES" :key="item.id" :is="getComponentName(item.modelId)"
|
|
|
:title="getEquipmentTitle(item.equipmentName)"
|
|
|
:valveStatusArr="getValveStatusArr(item.equipmentName)" :rotateAngle="item.rotate || 0"
|
|
|
- :iconSize="item.size" :style="getComponentStyle(item)"
|
|
|
- @click="clickValves(item.equipmentId, item.code)" />
|
|
|
+ :iconSize="item.size" :style="getComponentStyle(item)" @click="clickValves(item.code)" />
|
|
|
</div>
|
|
|
|
|
|
<!-- 罐体 -->
|
|
|
@@ -62,7 +84,7 @@ import { useValveHelper } from '@/hooks/useValveHelper'
|
|
|
import { computed, onMounted, onBeforeUnmount, reactive } from 'vue';
|
|
|
import { stompClient } from '@/utils/ws/stompClient';
|
|
|
import { updateZTPageConfig } from '@/api/dcs/configurePage';
|
|
|
-import { setCoil } from '@/api/dcs/flowControl';
|
|
|
+import { setValues } from '@/api/dcs/flowControl';
|
|
|
import { getMainSetParam } from '@/api/hnyz/param'
|
|
|
import { openInfoElNotification } from '@/utils/message'
|
|
|
import { useEquipmentLayout } from '@/hooks/useEquipmentLayout'
|
|
|
@@ -192,186 +214,33 @@ const { getValveStatusArr, getValveAndStatus, getValveOrStatus, evaluateConditio
|
|
|
const sensorHelper = useValveHelper(computed(() => deviceDataGroup.SENSORS))
|
|
|
|
|
|
const isControl = ref(false)
|
|
|
-
|
|
|
-function clickValves(equipmentId, code) {
|
|
|
+// 灯控
|
|
|
+function lightControl() {
|
|
|
+ console.log('灯控')
|
|
|
+}
|
|
|
+function clickValves(code) {
|
|
|
if (isControl.value) {
|
|
|
- getMainSetParam(equipmentId).then(res => {
|
|
|
+ getMainSetParam(code).then(res => {
|
|
|
const registerData = res.data
|
|
|
- console.log('获取设备参数成功:', registerData)
|
|
|
- setCoil({
|
|
|
- dataArr: [!getValveStatusArr(code)[0]],
|
|
|
- startAddress: registerData.address,
|
|
|
- unitId: registerData.unitId,
|
|
|
- ipAddress: '127.0.0.1',
|
|
|
- port: '22502',
|
|
|
- })
|
|
|
+ // console.log('获取设备参数成功:', registerData)
|
|
|
+ const data = {
|
|
|
+ protocol: registerData.protocolId, // MODBUS_TCP 协议
|
|
|
+ unitId: registerData.unitId, // 从站 ID
|
|
|
+ dataType: registerData.dataType, // 1 表示布尔型
|
|
|
+ resource: '05', // 功能码,05 是写单个线圈
|
|
|
+ offsetOrIndex: registerData.address, // 起始地址
|
|
|
+ lengthOrQos: 1, // 数量
|
|
|
+ data: [!getValveStatusArr(code)[0]], // 写入的值,例如 [true]
|
|
|
+ ipAddress: registerData.ipAddress, // 你的 Modbus TCP 服务地址
|
|
|
+ port: registerData.port // 默认端口
|
|
|
+ }
|
|
|
+ setValues(data)
|
|
|
}).catch(err => {
|
|
|
console.log('获取设备参数失败:', err);
|
|
|
});
|
|
|
|
|
|
}
|
|
|
}
|
|
|
-// 工具函数:sleep
|
|
|
-function sleep(ms) {
|
|
|
- return new Promise(resolve => setTimeout(resolve, ms));
|
|
|
-}
|
|
|
-
|
|
|
-async function openValves(...code) {
|
|
|
- // openInfoElNotification('正在模拟开阀门'+ code.join(','))
|
|
|
- valveArr.forEach(item => {
|
|
|
- if (code.includes(item.code)) {
|
|
|
- item.value = [false, false, true]
|
|
|
- }
|
|
|
- })
|
|
|
- updateData()
|
|
|
-
|
|
|
- await sleep(10000)
|
|
|
- valveArr.forEach(item => {
|
|
|
- if (code.includes(item.code)) {
|
|
|
- item.value = [true, false, false]
|
|
|
- }
|
|
|
- })
|
|
|
- updateData()
|
|
|
-}
|
|
|
-
|
|
|
-//关阀门
|
|
|
-async function closeValves(...code) {
|
|
|
- // openInfoElNotification('正在模拟关阀门'+ code.join(','))
|
|
|
- valveArr.forEach(item => {
|
|
|
- if (code.includes(item.code)) {
|
|
|
- item.value = [false, false, false]
|
|
|
- }
|
|
|
- })
|
|
|
- updateData()
|
|
|
- await sleep(10000)
|
|
|
- valveArr.forEach(item => {
|
|
|
- if (code.includes(item.code)) {
|
|
|
- item.value = [false, true, false]
|
|
|
- }
|
|
|
- })
|
|
|
- updateData()
|
|
|
-}
|
|
|
-
|
|
|
-// 数据更新
|
|
|
-function updateData() {
|
|
|
- deviceDataGroup.VALVES = [...valveArr]
|
|
|
- deviceDataGroup.SENSORS = [...sensorArr]
|
|
|
-}
|
|
|
-// 重置数据
|
|
|
-function resetData() {
|
|
|
- valveArr.forEach(item => {
|
|
|
- item.value = [false, true, false]
|
|
|
- })
|
|
|
- updateData()
|
|
|
-}
|
|
|
-
|
|
|
-// 关闭所有阀门
|
|
|
-function closeAllValves() {
|
|
|
- resetData()
|
|
|
- updateData()
|
|
|
-}
|
|
|
-
|
|
|
-//过滤流程
|
|
|
-async function filterProcess() {
|
|
|
- resetData()
|
|
|
- openInfoElNotification('执行过滤流程...')
|
|
|
- await sleep(1000)
|
|
|
- openInfoElNotification('开阀门2/10,母液从下部注入')
|
|
|
- await openValves('FM2', 'FM10')
|
|
|
-
|
|
|
- await sleep(5000)
|
|
|
- openInfoElNotification('顶部排气口检测到有液体,关闭排气阀门10')
|
|
|
- await closeValves('FM10')
|
|
|
- // await sleep(1000)
|
|
|
- openInfoElNotification('持续进母液,此固体颗粒被截留在滤芯外表面,逐渐累积形成滤饼')
|
|
|
- await sleep(5000)
|
|
|
- openInfoElNotification('打开出液口2阀门4/5/6/8到清液罐')
|
|
|
- await openValves('FM4', 'FM5', 'FM6', 'FM8')
|
|
|
- await sleep(5000)
|
|
|
- openInfoElNotification('检测入口压力值 与出口压力值差(暂定0.3Mpa)')
|
|
|
- await sleep(1000)
|
|
|
- openInfoElNotification('停止母液入口阀门2')
|
|
|
- await closeValves('FM2')
|
|
|
- openInfoElNotification('过滤完成')
|
|
|
-}
|
|
|
-
|
|
|
-//吹扫流程
|
|
|
-async function blowProcess() {
|
|
|
- resetData()
|
|
|
- openInfoElNotification('执行吹扫流程...')
|
|
|
- await sleep(1000)
|
|
|
- openInfoElNotification('打开进气口阀门1,将留在罐体的母液进行挤压。使内部的滤饼变干')
|
|
|
- await openValves('FM1')
|
|
|
- await sleep(5000)
|
|
|
- openInfoElNotification('初期')
|
|
|
- await openValves('FM4', 'FM5', 'FM6', 'FM8')
|
|
|
- openInfoElNotification('较干净的经出液口2流向下一道工序')
|
|
|
- await sleep(5000)
|
|
|
- openInfoElNotification('后期')
|
|
|
- closeValves('FM8')
|
|
|
- await openValves('FM3', 'FM7')
|
|
|
- openInfoElNotification('较混浊的经出液口1或底部出液口流回原液罐')
|
|
|
- await sleep(5000)
|
|
|
- openInfoElNotification('吹扫流程完成')
|
|
|
-}
|
|
|
-
|
|
|
-//反吹排堵流程
|
|
|
-async function blockingOutProcess() {
|
|
|
- resetData()
|
|
|
- openInfoElNotification('执行反吹排堵流程...')
|
|
|
- await sleep(1000)
|
|
|
- openInfoElNotification('打开气路上的阀门')
|
|
|
- await openValves('FM9', 'FM4', 'FM5', 'FM6', 'FM7')
|
|
|
- openInfoElNotification('将压缩气体从排液口1,反向吹入出液口')
|
|
|
- await sleep(5000)
|
|
|
- openInfoElNotification('关断')
|
|
|
- await closeValves('FM9', 'FM4', 'FM5', 'FM6', 'FM7')
|
|
|
- await sleep(5000)
|
|
|
- openInfoElNotification('再进气')
|
|
|
- await openValves('FM9', 'FM4', 'FM5', 'FM6', 'FM7')
|
|
|
- await sleep(5000)
|
|
|
- openInfoElNotification('检测反吹后的固体掉落在底部,关断')
|
|
|
- await closeValves('FM9', 'FM4', 'FM5', 'FM6', 'FM7')
|
|
|
- await sleep(1000)
|
|
|
- openInfoElNotification('反吹排堵流程完成')
|
|
|
-}
|
|
|
-
|
|
|
-//排渣流程
|
|
|
-async function slagDiachargeProcess() {
|
|
|
- resetData()
|
|
|
- openInfoElNotification('执行排渣流程...')
|
|
|
- await sleep(1000)
|
|
|
- openInfoElNotification('打开固体出口阀门')
|
|
|
- await openValves('FM11')
|
|
|
- await sleep(5000)
|
|
|
- openInfoElNotification('已将固体排到罐体,关闭出口阀门')
|
|
|
- await closeValves('FM11')
|
|
|
- openInfoElNotification('排渣流程完成')
|
|
|
-}
|
|
|
-
|
|
|
-
|
|
|
-function getPipeRotateStyle(defaultDeg) {
|
|
|
- const shouldFlip = (getValveAndStatus('FM7', 'FM9') || getValveAndStatus('FM8'));
|
|
|
- const actualDeg = shouldFlip ? defaultDeg : (defaultDeg + 180) % 360;
|
|
|
- // 判断是否竖直方向
|
|
|
- const isVertical = defaultDeg % 180 === 90;
|
|
|
- const transform = isVertical
|
|
|
- ? `translate(-50%, -50%) rotate(${actualDeg}deg)`
|
|
|
- : `rotate(${actualDeg}deg)`;
|
|
|
- return { transform }
|
|
|
-}
|
|
|
-
|
|
|
-function getPipeRotateStyle2(defaultDeg) {
|
|
|
- const shouldFlip = getValveAndStatus('FM7', 'FM9');
|
|
|
- const actualDeg = shouldFlip ? defaultDeg : (defaultDeg + 180) % 360;
|
|
|
- // 判断是否竖直方向
|
|
|
- const isVertical = defaultDeg % 180 === 90;
|
|
|
- const transform = isVertical
|
|
|
- ? `translate(-50%, -50%) rotate(${actualDeg}deg)`
|
|
|
- : `rotate(${actualDeg}deg)`;
|
|
|
- return { transform }
|
|
|
-}
|
|
|
-
|
|
|
|
|
|
</script>
|
|
|
|
|
|
@@ -397,6 +266,44 @@ function getPipeRotateStyle2(defaultDeg) {
|
|
|
|
|
|
}
|
|
|
|
|
|
+ .left_bottom,
|
|
|
+ .right_bottom {
|
|
|
+ position: absolute;
|
|
|
+ bottom: 5%;
|
|
|
+ left: 10%;
|
|
|
+
|
|
|
+ .button_card {
|
|
|
+ width: 360px;
|
|
|
+
|
|
|
+ .el-card__header {
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 16px;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .button_grid {
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: repeat(3, 1fr); // 每行3个
|
|
|
+ gap: 12px; // 按钮间距
|
|
|
+
|
|
|
+ .el-button+.el-button {
|
|
|
+ margin-left: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .grid_button {
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .right_bottom{
|
|
|
+ left: unset;
|
|
|
+ right: 10%;
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
.arrows {
|
|
|
.arrow_pos1 {
|
|
|
position: absolute;
|