joylink/rtsa-client
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

模式控制暂提

Browse Source
This commit is contained in:
joylink_zhaoerwei 2024-11-06 16:54:44 +08:00
parent d353afa5dd
commit f76ec13940
4 changed files with 579 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

138
src/components/Iscs/ModeControl.vue
View File

@ -1,14 +1,110 @@
<template> <template>
<div class="title">{{ props.stationName }}模式总览图</div> <div>
<div class="title">{{ props.stationName }}{{ currentModeSheet }}</div>
<q-markup-table
v-if="currentModeSheet == '模式总览图'"
class="table"
separator="cell"
>
<thead class="table-head">
<tr>
<th class="table-head-tr" style="width: 280px">系统</th>
<th class="table-head-tr" style="width: 500px">模式号说明</th>
<th class="table-head-tr">当前模式号</th>
<th class="table-head-tr">查看当前系统</th>
</tr>
</thead>
<tbody>
<tr>
<td align="center">大系统</td>
<td>{{ rows[0].modeNumberDec }}</td>
<td>{{ rows[0].currentModeNumber }}</td>
<td>
<q-btn
color="grey-9"
label="查看模式对照表"
@click="lookModeSheet('大系统操作控制表')"
/>
</td>
</tr>
<tr>
<td class="tbody-td">
<div class="tbody-td-left">小系统</div>
<div class="tbody-td-up">A端</div>
</td>
<td>{{ rows[1].modeNumberDec }}</td>
<td>{{ rows[1].currentModeNumber }}</td>
<td><q-btn color="grey-9" label="查看模式对照表" /></td>
</tr>
<tr>
<td class="tbody-td">
<div class="tbody-td-up">B端</div>
</td>
<td>{{ rows[2].modeNumberDec }}</td>
<td>{{ rows[2].currentModeNumber }}</td>
<td><q-btn color="grey-9" label="查看模式对照表" /></td>
</tr>
<tr>
<td class="tbody-td">
<div class="tbody-td-left">隧道通风系统</div>
<div class="tbody-td-up">兴~科区间隧道模式</div>
</td>
<td>{{ rows[3].modeNumberDec }}</td>
<td>{{ rows[3].currentModeNumber }}</td>
<td><q-btn color="grey-9" label="查看模式对照表" /></td>
</tr>
<tr>
<td class="tbody-td">
<div class="tbody-td-up">科站后区间隧道模式</div>
</td>
<td>{{ rows[4].modeNumberDec }}</td>
<td>{{ rows[4].currentModeNumber }}</td>
<td><q-btn color="grey-9" label="查看模式对照表" /></td>
</tr>
</tbody>
</q-markup-table>
<mode-control-OfBigSystem
v-else-if="currentModeSheet == '大系统操作控制表'"
:stationName="props.stationName"
@close="goBack"
@selectedSubMenu="selectedSubMenu"
/>
</div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { onMounted, ref } from 'vue'; import { onMounted, reactive, ref } from 'vue';
import ModeControlOfBigSystem from 'src/components/Iscs/ModeControlOfBigSystem.vue';
const props = defineProps<{ const props = defineProps<{
stationName: string; stationName: string;
}>(); }>();
const emit = defineEmits(['selectedSubMenu']);
const chooseStation = ref(''); const chooseStation = ref('');
const currentModeSheet = ref('模式总览图');
const rows = reactive([
{ modeNumberDec: '无', currentModeNumber: '无' },
{ modeNumberDec: '无', currentModeNumber: '无' },
{ modeNumberDec: '无', currentModeNumber: '无' },
{ modeNumberDec: '无', currentModeNumber: '无' },
{ modeNumberDec: '无', currentModeNumber: '无' },
]);
function lookModeSheet(sheetName: string) {
currentModeSheet.value = sheetName;
}
function goBack() {
currentModeSheet.value = '模式总览图';
}
function selectedSubMenu() {
emit('selectedSubMenu', '大系统');
}
onMounted(() => { onMounted(() => {
chooseStation.value = props.stationName; chooseStation.value = props.stationName;
@ -16,8 +112,6 @@ onMounted(() => {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
$first-top: 20vh;
$second-top: 37vh;
.title { .title {
height: 50px; height: 50px;
margin-bottom: 10px; margin-bottom: 10px;
@ -25,4 +119,40 @@ $second-top: 37vh;
text-align: center; text-align: center;
font-size: 28px; font-size: 28px;
} }
.table {
margin-top: 100px;
border: 2px solid black;
.table-head {
height: 50px;
.table-head-tr {
font-size: 20px;
}
}
.tbody-td {
display: flex;
justify-content: flex-end;
align-items: center;
height: 51px;
position: relative;
border: 0;
padding: 0;
.tbody-td-left {
position: absolute;
left: 0px;
top: 0px;
width: 140px;
height: 100px;
border-right: 1px solid rgba(0, 0, 0, 0.12);
line-height: 100px;
padding-left: 10px;
}
.tbody-td-up {
width: 50%;
height: 51px;
padding-left: 10px;
line-height: 51px;
border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}
}
}
</style> </style>

319
src/components/Iscs/ModeControlOfBigSystem.vue Normal file
View File

@ -0,0 +1,319 @@
<template>
<q-btn
class="topButton"
color="grey-9"
label="大系统原理图"
@click="goToSubBigSystem"
/>
<div class="top">
<div>
<span class="spanGutter"
>A端操作场所:<span class="spanGutterLeft">!!!</span></span
>
<span class="spanGutter"
>A端执行状态: <span class="spanGutterLeft">无</span></span
>
<span class="spanGutter"
>A端当前控制方式:<span class="spanGutterLeft">手动控制</span></span
>
<span>灾害提示:<span class="spanGutterLeft">正常</span></span>
<q-btn color="grey-9" label="退出灾害模式" style="margin-left: 30px" />
</div>
<div class="flex-row" style="margin-top: 15px">
<span class="spanGutter"
>B端操作场所:<span class="spanGutterLeft">!!!</span></span
>
<span class="spanGutter"
>B端执行状态:<span class="spanGutterLeft">无</span></span
>
<span class="spanGutter"
>B端当前控制方式:<span class="spanGutterLeft">手动控制</span></span
>
<q-select
dense
outlined
v-model="changeControlMode"
:options="controlModeOptions"
style="width: 190px; margin-right: 30px"
/>
<q-btn color="grey-9" label="执行" style="margin-right: 30px" />
<q-btn color="grey-9" label="PID调节" style="margin-right: 30px" />
<q-btn color="grey-9" label="返回" @click="goBack" />
</div>
<div class="tableContainer flex-row">
<div class="table-left">
<div class="title">工况条件判断</div>
<div
class="flex-row boder-bottom"
style="height: 400px; border-right: 1px solid black"
>
<div style="width: 30px; padding: 5px">正常工况</div>
<div style="flex-grow: 1">
<div class="flex-row text-center boder-bottom">
<div class="middle" style="height: 100px; padding: 5px">
小新风空调<br />iw≥in
</div>
<div style="flex-grow: 1">
<div class="boder-bottom" style="height: 50px">
Δin&lt;0<br />(负偏差)
</div>
<div style="height: 50px">Δin&gt;0<br />(正偏差)</div>
</div>
</div>
<div class="flex-row text-center boder-bottom">
<div class="middle" style="height: 150px; padding: 30px 0">
全新风空调<br />in><br />iw≥io
</div>
<div style="flex-grow: 1">
<div class="boder-bottom" style="height: 75px; padding: 12px">
Δin&lt;0<br />(负偏差)
</div>
<div style="height: 75px; padding: 12px">
Δin&gt;0<br />(正偏差)
</div>
</div>
</div>
<div class="flex-row text-center boder-bottom">
<div class="middle" style="height: 125px; padding: 40px 0">
通风iw&lt;io
</div>
<div>
<div class="boder-bottom height">tn≥25&deg;C</div>
<div class="boder-bottom height">25&deg;C≥tn≥20&deg;C</div>
<div class="flex-row">
<div
style="
width: 68px;
height: 75px;
line-height: 76px;
text-align: center;
border-right: 1px solid black;
"
>
tn&lt;20&deg;C
</div>
<div>
<div class="boder-bottom height">C≥1000ppm</div>
<div class="boder-bottom height">500ppm~1000ppm</div>
<div class="height">C&le;500ppm</div>
</div>
</div>
</div>
</div>
<div
class="text-center height"
style="border-left: 1px solid black"
>
夜间
</div>
</div>
</div>
<div
class="flex-row boder-bottom"
style="height: 100px; border-right: 1px solid black"
>
<div style="width: 26px; height: 100px; padding: 5px">工况火灾</div>
<div style="flex-grow: 1">
<div class="flex-row boder-bottom">
<div class="middle" style="height: 75px"></div>
<div style="flex-grow: 1; padding: 1px">
<div class="boder-bottom height">站厅火灾</div>
<div class="boder-bottom height">站台A端火灾 防烟分区三</div>
<div class="height">站台B端火灾 防烟分区四</div>
</div>
</div>
<div
class="text-center height"
style="border-left: 1px solid black"
>
站内任何其它区域火灾
</div>
</div>
</div>
<div
class="text-center boder-bottom height"
style="border-right: 1px solid black"
>
当前模式-状态
</div>
<div class="text-center height" style="border-right: 1px solid black">
模式对比
</div>
</div>
<div>
<div class="table-top">
<div
style="
width: 46px;
height: 125px;
padding: 28px 5px;
border-right: 1px solid black;
border-bottom: 1px solid black;
"
class="text-center"
>
模<br />式<br />号
</div>
<div>
<div
class="text-center"
style="
height: 25px;
border-bottom: 1px solid black;
border-right: 1px solid black;
"
>
A端设备
</div>
<modeControl-OfBigSystemTable />
</div>
<div>
<div
class="text-center"
style="height: 25px; border-bottom: 1px solid black"
>
B端设备
</div>
<modeControl-OfBigSystemTable isNoRightBorder />
</div>
</div>
<q-markup-table
separator="cell"
ref="tableRef"
class="table"
style="width: 1610px"
>
<tbody style="">
<tr
v-for="row in 22"
:key="row"
:class="{
changeBackground: row % 2 == 1,
}"
>
<td
class="table-body-tr"
:class="{
noBottomBorder: row == 22,
noRightBorder: col == 35,
}"
align="center"
v-for="col in 35"
:key="col"
style="width: 20px"
>
{{ rows[(row, col)] }}
</td>
</tr>
</tbody>
</q-markup-table>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue';
import ModeControlOfBigSystemTable from './ModeControlOfBigSystemTable.vue';
const props = defineProps<{
stationName: string;
}>();
const emit = defineEmits(['close', 'selectedSubMenu']);
function goBack() {
emit('close');
}
function goToSubBigSystem() {
emit('selectedSubMenu');
}
const chooseStation = ref('');
const changeControlMode = ref('设备单控');
const controlModeOptions = ['设备单控', '模式控制', '时间表控制', '焓值控制'];
const rows = reactive([]);
onMounted(() => {
chooseStation.value = props.stationName;
});
</script>
<style lang="scss" scoped>
.topButton {
position: absolute;
left: 80px;
top: 20px;
}
.top {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 25px;
.spanGutter {
margin-right: 100px;
}
.spanGutterLeft {
margin-left: 30px;
color: green;
}
}
.flex-row {
display: flex;
align-items: center;
}
.tableContainer {
margin: 30px 0;
border: 1px solid black;
.table-left {
width: 260px;
background-color: #99a7b9;
.title {
height: 125px;
line-height: 125px;
text-align: center;
border-right: 1px solid black;
border-bottom: 1px solid black;
}
.middle {
width: 45px;
padding: 1px;
border-left: 1px solid black;
border-right: 1px solid black;
}
.boder-bottom {
border-bottom: 1px solid black;
}
.height {
height: 25px;
}
}
.table-top {
display: flex;
align-items: center;
background-color: #99a7b9;
}
.table {
.table-tr {
width: 10px !important;
}
.table-body-tr {
width: 46px !important;
height: 25px !important;
padding: 0;
border-right: 1px solid black;
border-bottom: 1px solid black;
}
.changeBackground {
background-color: #c8d0f1;
}
.noBottomBorder {
border-bottom: 0 solid black;
}
.noRightBorder {
border-right: 0 solid black;
}
}
}
</style>

122
src/components/Iscs/ModeControlOfBigSystemTable.vue Normal file
View File

@ -0,0 +1,122 @@
<template>
<div
class="style father"
style="width: 782px; border-right: 0px; border-bottom: 0px"
>
<div style="width: 92px">组合空调柜<br />及其二通阀</div>
<div style="width: 92px">回/排风机<br />及其连锁阀</div>
<div style="width: 92px">排烟风机<br />及其连锁阀</div>
<div>排风阀</div>
<div>回风阀</div>
<div>小新<br />风阀</div>
<div>空调柜</div>
<div></div>
<div>送风<br />站台</div>
<div class="otherStyle">
<div class="up">排风</div>
<div class="down">
<div class="down-left down-right">站厅</div>
<div class="down-right">站台</div>
</div>
</div>
<div>防烟<br />防火</div>
<div>空气幕</div>
<div
class="style"
:class="{
noRightBorder: props.isNoRightBorder,
}"
>
空气幕
</div>
</div>
<div
class="style"
style="width: 782px; border-right: 0px; border-bottom: 0px"
>
<div
class="style"
v-for="(title, index) in thirdTitle"
:key="title"
:class="{
noRightBorder: index == 16 && props.isNoRightBorder,
}"
>
{{ title }}
</div>
</div>
</template>
<script setup lang="ts">
const props = withDefaults(
defineProps<{
isNoRightBorder?: boolean;
}>(),
{
isNoRightBorder: false,
}
);
const thirdTitle = [
'AHU-A01',
'MOV-A01',
'RAF-A01',
'MDD-A03',
'SEF-A01',
'MDD-A04',
'MDA-A02',
'MDA-A03',
'MDA-A01',
'MDD-A02',
'MDD-A01',
'MDD-A07',
'MDD-A05',
'MDD-A06',
'DFD-A01',
'KQM-A01',
'KQM-A02',
];
</script>
<style lang="scss" scoped>
.style,
.father > div:not(:nth-child(10)):not(:nth-child(13)) {
display: flex;
justify-content: center;
align-items: center;
width: 46px;
height: 50px;
text-align: center;
border-right: 1px solid black;
border-bottom: 1px solid black;
}
.otherStyle {
width: 92px;
height: 50px;
border-right: 1px solid black;
border-bottom: 1px solid black;
.up {
height: 25px;
line-height: 25px;
text-align: center;
border-bottom: 1px solid black;
}
.down {
display: flex;
justify-content: center;
align-items: center;
}
.down-left {
border-right: 1px solid black;
}
.down-right {
width: 46px;
height: 25px;
line-height: 25px;
text-align: center;
}
}
.noRightBorder {
border-right: 0 solid black;
}
</style>

4
src/layouts/IscsDrawLayout.vue
View File

@ -169,6 +169,7 @@
<mode-control <mode-control
v-if="drawStore.selectSubmenuAndStation.submenu == '模式控制'" v-if="drawStore.selectSubmenuAndStation.submenu == '模式控制'"
:stationName="drawStore.selectSubmenuAndStation.station" :stationName="drawStore.selectSubmenuAndStation.station"
@selectedSubMenu="selectedSubMenu"
/> />
</div> </div>
</q-scroll-area> </q-scroll-area>
@ -723,6 +724,9 @@ const subMenuOption = ref<
}[] }[]
>([]); >([]);
function selectedSubMenu(subName: string) { function selectedSubMenu(subName: string) {
if (selectSubMenuName.value !== subName) {
selectSubMenuName.value = subName;
}
drawStore.selectSubmenuAndStation.submenu = subName; drawStore.selectSubmenuAndStation.submenu = subName;
if (drawStore.selectSubmenuAndStation.submenu === '火灾报警平面图') { if (drawStore.selectSubmenuAndStation.submenu === '火灾报警平面图') {
drawStore.selectSubmenuAndStation.partition = '设备分区一'; drawStore.selectSubmenuAndStation.partition = '设备分区一';