模式控制暂提

src/components/Iscs/ModeControl.vue

@@ -1,14 +1,110 @@
 <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>
 
 <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<{
   stationName: string;
 }>();
+const emit = defineEmits(['selectedSubMenu']);
+
 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(() => {
   chooseStation.value = props.stationName;
@@ -16,8 +112,6 @@ onMounted(() => {
 </script>
 
 <style lang="scss" scoped>
-$first-top: 20vh;
-$second-top: 37vh;
 .title {
   height: 50px;
   margin-bottom: 10px;
@@ -25,4 +119,40 @@ $second-top: 37vh;
   text-align: center;
   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>

src/components/Iscs/ModeControlOfBigSystem.vue

@@ -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>

src/components/Iscs/ModeControlOfBigSystemTable.vue

@@ -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>

src/layouts/IscsDrawLayout.vue

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