diff --git a/src/assets/ISCS/PSD/duanmenAlarm.png b/src/assets/ISCS/PSD/duanmenAlarm.png
new file mode 100644
index 0000000..f3427aa
Binary files /dev/null and b/src/assets/ISCS/PSD/duanmenAlarm.png differ
diff --git a/src/assets/ISCS/PSD/duanmenClose.png b/src/assets/ISCS/PSD/duanmenClose.png
new file mode 100644
index 0000000..99b504e
Binary files /dev/null and b/src/assets/ISCS/PSD/duanmenClose.png differ
diff --git a/src/assets/ISCS/PSD/duanmenConnectBreak.png b/src/assets/ISCS/PSD/duanmenConnectBreak.png
new file mode 100644
index 0000000..3e60f6d
Binary files /dev/null and b/src/assets/ISCS/PSD/duanmenConnectBreak.png differ
diff --git a/src/assets/ISCS/PSD/train.png b/src/assets/ISCS/PSD/train.png
new file mode 100644
index 0000000..cacd3e4
Binary files /dev/null and b/src/assets/ISCS/PSD/train.png differ
diff --git a/src/components/Iscs/ModeControl.vue b/src/components/Iscs/ModeControl.vue
new file mode 100644
index 0000000..bc086a0
--- /dev/null
+++ b/src/components/Iscs/ModeControl.vue
@@ -0,0 +1,28 @@
+<template>
+  <div class="title">{{ props.stationName }}模式总览图</div>
+</template>
+
+<script setup lang="ts">
+import { onMounted, ref } from 'vue';
+
+const props = defineProps<{
+  stationName: string;
+}>();
+const chooseStation = ref('');
+
+onMounted(() => {
+  chooseStation.value = props.stationName;
+});
+</script>
+
+<style lang="scss" scoped>
+$first-top: 20vh;
+$second-top: 37vh;
+.title {
+  height: 50px;
+  margin-bottom: 10px;
+  line-height: 50px;
+  text-align: center;
+  font-size: 28px;
+}
+</style>
diff --git a/src/components/Iscs/PSD.vue b/src/components/Iscs/PSD.vue
new file mode 100644
index 0000000..9e4d08a
--- /dev/null
+++ b/src/components/Iscs/PSD.vue
@@ -0,0 +1,382 @@
+<template>
+  <div class="psd-title">{{ props.stationName }}屏蔽门系统图</div>
+  <div class="up-train">
+    <q-img :src="train" />
+  </div>
+  <div class="down-train">
+    <q-img :src="train" />
+  </div>
+  <div class="duanmen up-first-duanmen">
+    <q-img :src="allDuanmenImg.upFirst" class="img" />
+    <div>上行首端门</div>
+  </div>
+  <div class="duanmen up-end-duanmen">
+    <q-img :src="allDuanmenImg.upEnd" class="img" />
+    <div>上行尾端门</div>
+  </div>
+  <div class="duanmen down-first-duanmen">
+    <q-img :src="allDuanmenImg.downFirst" class="img" />
+    <div>下行首端门</div>
+  </div>
+  <div class="duanmen down-end-duanmen">
+    <q-img :src="allDuanmenImg.downEnd" class="img" />
+    <div>下行尾端门</div>
+  </div>
+  <div
+    v-for="(tableData, index) in allTableDatas"
+    :key="index"
+    :class="`tableItem-${index}`"
+  >
+    <q-markup-table separator="cell" ref="tableRef" class="table">
+      <thead class="table-head">
+        <tr class="table-head-tr">
+          <th v-for="header in tableData.columnDefs" :key="header.name">
+            {{ header.label }}
+          </th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-for="row in tableData.rows" :key="row.name">
+          <td
+            class="table-body-tr"
+            align="center"
+            v-for="header in tableData.columnDefs"
+            :key="header.name"
+          >
+            {{ row[header.name] }}
+          </td>
+        </tr>
+      </tbody>
+    </q-markup-table>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onMounted, reactive, ref } from 'vue';
+import train from 'src/assets/ISCS/PSD/train.png';
+import duanmenClose from 'src/assets/ISCS/PSD/duanmenClose.png';
+import duanmenAlarm from 'src/assets/ISCS/PSD/duanmenAlarm.png';
+import duanmenConnectBreak from 'src/assets/ISCS/PSD/duanmenConnectBreak.png';
+
+const props = defineProps<{
+  stationName: string;
+}>();
+const chooseStation = ref('');
+const allDuanmenImg = reactive({
+  upFirst: duanmenClose,
+  upEnd: duanmenClose,
+  downFirst: duanmenAlarm,
+  downEnd: duanmenConnectBreak,
+});
+const allTableDatas = reactive([
+  {
+    columnDefs: [
+      { name: 'name', label: '上行首PSL', align: 'center' },
+      {
+        name: 'state',
+        label: '状态',
+        align: 'center',
+      },
+    ],
+    rows: [
+      { name: '操作允许状态', state: '不允许' },
+      { name: '开门命令触发', state: '无效' },
+      { name: '关门命令触发', state: '无效' },
+      { name: '互锁解除命令', state: '无效' },
+    ],
+  },
+  {
+    columnDefs: [
+      { name: 'name', label: '下行尾PSL', align: 'center' },
+      {
+        name: 'state',
+        label: '状态',
+        align: 'center',
+      },
+    ],
+    rows: [
+      { name: '操作允许状态', state: '不允许' },
+      { name: '开门命令触发', state: '无效' },
+      { name: '关门命令触发', state: '无效' },
+      { name: '互锁解除命令', state: '无效' },
+    ],
+  },
+  {
+    columnDefs: [
+      { name: 'name', label: '名称', align: 'center' },
+      {
+        name: 'state',
+        label: '状态',
+        align: 'center',
+      },
+    ],
+    rows: [
+      { name: '驱动电源故障报警', state: '正常' },
+      { name: '控制电源故障报警', state: '正常' },
+      { name: '驱动电源输入故障报警', state: '正常' },
+      { name: '控制电源输入故障报警', state: '正常' },
+      { name: '驱动电源低电压故障报警', state: '正常' },
+      { name: '控制电源电压故障报警', state: '正常' },
+    ],
+  },
+  {
+    columnDefs: [
+      { name: 'name', label: '名称', align: 'center' },
+      {
+        name: 'state',
+        label: '状态',
+        align: 'center',
+      },
+    ],
+    rows: [
+      { name: '上行控制系统故障报警', state: '正常' },
+      { name: '上行SIG使用', state: '正常' },
+      { name: '上行SIG开门命令', state: '正常' },
+    ],
+  },
+  {
+    columnDefs: [
+      { name: 'name', label: '名称', align: 'center' },
+      {
+        name: 'state',
+        label: '状态',
+        align: 'center',
+      },
+    ],
+    rows: [
+      { name: '下行控制系统故障报警', state: '正常' },
+      { name: '下行SIG使用', state: '正常' },
+      { name: '下行SIG开门命令', state: '正常' },
+    ],
+  },
+  {
+    columnDefs: [
+      { name: 'name', label: '名称', align: 'center' },
+      {
+        name: 'state',
+        label: '状态',
+        align: 'center',
+      },
+    ],
+    rows: [
+      { name: '上行所有门关闭且锁紧', state: '正常' },
+      { name: '上行滑动门和应急门开门故障', state: '正常' },
+      { name: '上行滑动门和应急门关门故障', state: '正常' },
+    ],
+  },
+  {
+    columnDefs: [
+      { name: 'name', label: '名称', align: 'center' },
+      {
+        name: 'state',
+        label: '状态',
+        align: 'center',
+      },
+    ],
+    rows: [
+      { name: '下行所有门关闭且锁紧', state: '正常' },
+      { name: '下行滑动门和应急门开门故障', state: '正常' },
+      { name: '下行滑动门和应急门关门故障', state: '正常' },
+    ],
+  },
+  {
+    columnDefs: [
+      { name: 'name', label: '名称', align: 'center' },
+      {
+        name: 'state',
+        label: '状态',
+        align: 'center',
+      },
+    ],
+    rows: [
+      { name: '上行IBP盘使能', state: '正常' },
+      { name: '上行IBP盘开门命令', state: '正常' },
+      { name: '上行IBP盘关门命令', state: '正常' },
+    ],
+  },
+  {
+    columnDefs: [
+      { name: 'name', label: '名称', align: 'center' },
+      {
+        name: 'state',
+        label: '状态',
+        align: 'center',
+      },
+    ],
+    rows: [
+      { name: '下行IBP盘使能', state: '正常' },
+      { name: '下行IBP盘开门命令', state: '正常' },
+      { name: '下行IBP盘关门命令', state: '正常' },
+    ],
+  },
+  {
+    columnDefs: [
+      { name: 'name', label: '上行尾PSL', align: 'center' },
+      {
+        name: 'state',
+        label: '状态',
+        align: 'center',
+      },
+    ],
+    rows: [
+      { name: '操作允许状态', state: '不允许' },
+      { name: '开门命令触发', state: '无效' },
+      { name: '关门命令触发', state: '无效' },
+      { name: '互锁解除命令', state: '无效' },
+    ],
+  },
+  {
+    columnDefs: [
+      { name: 'name', label: '下行首PSL', align: 'center' },
+      {
+        name: 'state',
+        label: '状态',
+        align: 'center',
+      },
+    ],
+    rows: [
+      { name: '操作允许状态', state: '不允许' },
+      { name: '开门命令触发', state: '无效' },
+      { name: '关门命令触发', state: '无效' },
+      { name: '互锁解除命令', state: '无效' },
+    ],
+  },
+]);
+
+onMounted(() => {
+  chooseStation.value = props.stationName;
+});
+</script>
+
+<style lang="scss" scoped>
+$first-top: 20vh;
+$second-top: 37vh;
+.psd-title {
+  height: 50px;
+  margin-bottom: 10px;
+  line-height: 50px;
+  text-align: center;
+  font-size: 28px;
+}
+.up-train {
+  position: absolute;
+  top: 10vh;
+  width: 55vw;
+}
+.down-train {
+  position: absolute;
+  top: 55vh;
+  width: 55vw;
+}
+.img {
+  width: 15px;
+}
+.duanmen {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  position: absolute;
+  width: 100px;
+}
+.up-first-duanmen {
+  left: 22vw;
+  top: 8vh;
+  transform: translateX(-100%);
+}
+.up-end-duanmen {
+  right: 22vw;
+  top: 8vh;
+  transform: translateX(100%);
+}
+.down-first-duanmen {
+  left: 22vw;
+  top: 58vh;
+  transform: translateX(-100%);
+}
+.down-end-duanmen {
+  right: 22vw;
+  top: 58vh;
+  transform: translateX(100%);
+}
+
+.table {
+  .table-head {
+    background-image: linear-gradient(to bottom, #c1c9ea, #8e97ba);
+    .table-head-tr {
+      height: 33px !important;
+      padding: 0;
+    }
+  }
+  .table-body-tr {
+    height: 33px !important;
+    padding: 0 5px;
+  }
+}
+.tableItem-0 {
+  position: absolute;
+  top: 15vh;
+  right: calc(50vw + 380px);
+  transform: translateX(-100%);
+}
+.tableItem-1 {
+  position: absolute;
+  top: $second-top;
+  right: calc(50vw + 380px);
+  transform: translateX(-100%);
+}
+.tableItem-2 {
+  position: absolute;
+  top: $first-top;
+  right: calc(50vw + 50px);
+  transform: translateX(-100%);
+}
+.tableItem-3 {
+  position: absolute;
+  top: $first-top;
+  left: 49vw;
+  transform: translateX(-100%);
+}
+.tableItem-4 {
+  position: absolute;
+  top: $second-top;
+  left: 49vw;
+  transform: translateX(-100%);
+}
+.tableItem-5 {
+  position: absolute;
+  top: $first-top;
+  right: 49vw;
+  transform: translateX(100%);
+}
+.tableItem-6 {
+  position: absolute;
+  top: $second-top;
+  right: 49vw;
+  transform: translateX(100%);
+}
+.tableItem-7 {
+  position: absolute;
+  top: $first-top;
+  left: calc(50vw + 110px);
+  transform: translateX(100%);
+}
+.tableItem-8 {
+  position: absolute;
+  top: $second-top;
+  left: calc(50vw + 110px);
+  transform: translateX(100%);
+}
+.tableItem-9 {
+  position: absolute;
+  top: 15vh;
+  left: calc(50vw + 380px);
+  transform: translateX(100%);
+}
+.tableItem-10 {
+  position: absolute;
+  top: $second-top;
+  left: calc(50vw + 380px);
+  transform: translateX(100%);
+}
+</style>
diff --git a/src/components/draw-app/properties/ButtonProperty.vue b/src/components/draw-app/properties/ButtonProperty.vue
index 26effbf..6836a33 100644
--- a/src/components/draw-app/properties/ButtonProperty.vue
+++ b/src/components/draw-app/properties/ButtonProperty.vue
@@ -130,7 +130,7 @@ const { data: buttonModel, onUpdate } = useFormData(
 const optionsButtonType = [
   { label: '无Icon', value: iscsGraphicData.Button.ButtonType.noIcon },
   { label: '方形', value: iscsGraphicData.Button.ButtonType.cctvRect },
-  { label: '监视器', value: iscsGraphicData.Button.ButtonType.cctvMonitor },
-  { label: '半圆', value: iscsGraphicData.Button.ButtonType.cctvSemicircle },
+  { label: '枪机', value: iscsGraphicData.Button.ButtonType.cctvMonitor },
+  { label: '球机', value: iscsGraphicData.Button.ButtonType.cctvSemicircle },
 ];
 </script>
diff --git a/src/configs/iscsStyleConfig.ts b/src/configs/iscsStyleConfig.ts
index 31d291c..ea876fe 100644
--- a/src/configs/iscsStyleConfig.ts
+++ b/src/configs/iscsStyleConfig.ts
@@ -60,7 +60,7 @@ const DA_SHI_ZHI_NENG: I_DA_SHI_ZHI_NENG[] = [
       { sunMenuName: '导向标识/广告', displayForm: DisplayForm.draw },
       { sunMenuName: '人防门', displayForm: DisplayForm.draw },
       { sunMenuName: 'BAS系统', displayForm: DisplayForm.draw },
-      { sunMenuName: '模式控制', displayForm: DisplayForm.draw },
+      { sunMenuName: '模式控制', displayForm: DisplayForm.component },
       { sunMenuName: '时间表', displayForm: DisplayForm.draw },
       { sunMenuName: '操作场所切换', displayForm: DisplayForm.draw },
     ],
@@ -132,7 +132,9 @@ const DA_SHI_ZHI_NENG: I_DA_SHI_ZHI_NENG[] = [
     menuName: 'PSD',
     icon: 'svguse:../iscsMenuIcon.svg#icon-PSD',
     activeIcon: 'svguse:../iscsMenuIcon.svg#icon-PSD-active',
-    sunMenu: [{ sunMenuName: '屏蔽门系统图', displayForm: DisplayForm.draw }],
+    sunMenu: [
+      { sunMenuName: '屏蔽门系统图', displayForm: DisplayForm.component },
+    ],
   },
   {
     menuName: 'FG',
diff --git a/src/graphics/BAS/escalator/EscalatorDrawAssistant.ts b/src/graphics/BAS/escalator/EscalatorDrawAssistant.ts
index 2115d75..c70efbb 100644
--- a/src/graphics/BAS/escalator/EscalatorDrawAssistant.ts
+++ b/src/graphics/BAS/escalator/EscalatorDrawAssistant.ts
@@ -82,7 +82,7 @@ function buildAbsorbablePositions(escalator: Escalator): AbsorbablePosition[] {
 }
 
 export class EscalatorInteraction extends GraphicInteractionPlugin<Escalator> {
-  static Name = 'tcc_light_transform';
+  static Name = 'escalator_transform';
   constructor(app: IDrawApp) {
     super(EscalatorInteraction.Name, app);
   }
diff --git a/src/graphics/BAS/verticalElevator/VerticalElevatorDrawAssistant.ts b/src/graphics/BAS/verticalElevator/VerticalElevatorDrawAssistant.ts
index da4969d..47cedfc 100644
--- a/src/graphics/BAS/verticalElevator/VerticalElevatorDrawAssistant.ts
+++ b/src/graphics/BAS/verticalElevator/VerticalElevatorDrawAssistant.ts
@@ -89,7 +89,7 @@ function buildAbsorbablePositions(
 }
 
 export class VerticalElevatorInteraction extends GraphicInteractionPlugin<VerticalElevator> {
-  static Name = 'tcc_light_transform';
+  static Name = 'vertical_elevator_transform';
   constructor(app: IDrawApp) {
     super(VerticalElevatorInteraction.Name, app);
   }
diff --git a/src/graphics/button/cctv-button-data.json b/src/graphics/button/cctv-button-data.json
index e3c17dd..c80c13b 100644
--- a/src/graphics/button/cctv-button-data.json
+++ b/src/graphics/button/cctv-button-data.json
@@ -17,19 +17,19 @@
       "anchor": { "x": 0.5, "y": 0.5 }
     },
     "monitor-btn.png": {
-      "frame": { "x": 148, "y": 0, "w": 74, "h": 66 },
+      "frame": { "x": 352, "y": 0, "w": 85, "h": 66 },
       "rotated": false,
       "trimmed": false,
-      "spriteSourceSize": { "x": 0, "y": 0, "w": 74, "h": 66 },
-      "sourceSize": { "w": 74, "h": 66 },
+      "spriteSourceSize": { "x": 0, "y": 0, "w": 85, "h": 66 },
+      "sourceSize": { "w": 85, "h": 66 },
       "anchor": { "x": 0.5, "y": 0.5 }
     },
     "semicircle-btn.png": {
-      "frame": { "x": 230, "y": 0, "w": 66, "h": 66 },
+      "frame": { "x": 292, "y": 0, "w": 60, "h": 66 },
       "rotated": false,
       "trimmed": false,
-      "spriteSourceSize": { "x": 0, "y": 0, "w": 66, "h": 66 },
-      "sourceSize": { "w": 66, "h": 66 },
+      "spriteSourceSize": { "x": 0, "y": 0, "w": 60, "h": 66 },
+      "sourceSize": { "w": 60, "h": 66 },
       "anchor": { "x": 0.5, "y": 0.5 }
     }
   },
diff --git a/src/graphics/button/cctv-button-spritesheet.png b/src/graphics/button/cctv-button-spritesheet.png
index b1c9720..56fcd75 100644
Binary files a/src/graphics/button/cctv-button-spritesheet.png and b/src/graphics/button/cctv-button-spritesheet.png differ
diff --git a/src/layouts/IscsDrawLayout.vue b/src/layouts/IscsDrawLayout.vue
index 4db8bb8..9f38406 100644
--- a/src/layouts/IscsDrawLayout.vue
+++ b/src/layouts/IscsDrawLayout.vue
@@ -162,6 +162,14 @@
               v-if="drawStore.selectSubmenuAndStation.submenu == '监控布局图'"
               :stationName="drawStore.selectSubmenuAndStation.station"
             />
+            <pSD
+              v-if="drawStore.selectSubmenuAndStation.submenu == '屏蔽门系统图'"
+              :stationName="drawStore.selectSubmenuAndStation.station"
+            />
+            <mode-control
+              v-if="drawStore.selectSubmenuAndStation.submenu == '模式控制'"
+              :stationName="drawStore.selectSubmenuAndStation.station"
+            />
           </div>
         </q-scroll-area>
       </div>
@@ -306,6 +314,8 @@ import { toStorageTransform } from 'src/drawApp/graphics/GraphicDataBase';
 import { Circle } from 'src/graphics/circle/Circle';
 import IscsBottomAlarm from 'src/components/Iscs/IscsBottomAlarm.vue';
 import CCTVMonitoring from 'src/components/Iscs/CCTVMonitoring.vue';
+import PSD from 'src/components/Iscs/PSD.vue';
+import ModeControl from 'src/components/Iscs/ModeControl.vue';
 import FASPlaneGraph from 'src/components/Iscs/FASPlaneGraph.vue';
 import { FasFailureControlHost } from 'src/graphics/FAS/fireFailureControlHost/FasFailureControlHost';
 import { FasAlarm } from 'src/graphics/FAS/fasAlarm/FasAlarm';
@@ -718,10 +728,12 @@ function selectedSubMenu(subName: string) {
   ).displayForm;
   if (subMenuDisplayForm.value !== DisplayForm.component) {
     showDrawTool.value = true;
+    rightDrawerOpen.value = true;
     forceReloadDate();
     handleUtilsOption();
   } else {
     showDrawTool.value = false;
+    rightDrawerOpen.value = false;
   }
   onResize();
 }