From 8afe793ea5ab39fef471c8538493978c5e98999a Mon Sep 17 00:00:00 2001
From: joylink_zhaoerwei <Bob_Engineer@163.com>
Date: Sun, 29 Sep 2024 18:43:11 +0800
Subject: [PATCH] =?UTF-8?q?=E7=BB=98=E5=88=B6=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/configs/iscsStyleConfig.ts |  88 ++++---
 src/drawApp/iscsApp.ts         |   8 +-
 src/layouts/IscsDrawLayout.vue | 430 ++++++++++++++++++++++++++++++---
 src/stores/draw-store.ts       |   8 +-
 4 files changed, 449 insertions(+), 85 deletions(-)

diff --git a/src/configs/iscsStyleConfig.ts b/src/configs/iscsStyleConfig.ts
index f51f237..a1ed1f2 100644
--- a/src/configs/iscsStyleConfig.ts
+++ b/src/configs/iscsStyleConfig.ts
@@ -3,65 +3,79 @@ import { IscsStyle } from 'src/api/DraftApi';
 //达实智能（福州一号线）
 const DA_SHI_ZHI_NENG = [
   {
-    menuName: '火灾报警',
-    sunMenu: [
-      { sunMenuName: '站台报警' },
-      { sunMenuName: '站厅报警' },
-      { sunMenuName: '系统状态' },
-    ],
-  },
-  {
-    menuName: '机电',
-    sunMenu: [
-      { sunMenuName: '大系统' },
-      { sunMenuName: '小系统' },
-      { sunMenuName: '水系统' },
-      { sunMenuName: '照明' },
-      { sunMenuName: '电、扶梯' },
-      { sunMenuName: '给排水' },
-      { sunMenuName: '模式' },
-      { sunMenuName: '隧道通风' },
-      { sunMenuName: '时间表' },
-      { sunMenuName: '权限交接' },
-      { sunMenuName: '传感器' },
-      { sunMenuName: '车站网络' },
-    ],
-  },
-  {
-    menuName: '广播',
+    menuName: 'Plan',
     sunMenu: [{ sunMenuName: '子目录' }],
   },
   {
-    menuName: '乘客信息',
+    menuName: 'PSCADA',
     sunMenu: [{ sunMenuName: '子目录' }],
   },
   {
-    menuName: '闭路电视',
+    menuName: 'BAS',
+    sunMenu: [{ sunMenuName: '子目录' }],
+  },
+  {
+    menuName: 'FAS',
     sunMenu: [
-      { sunMenuName: '车站控制' },
-      { sunMenuName: '车站时序' },
-      { sunMenuName: '车站时序编辑' },
-      { sunMenuName: '车站设备状态' },
+      { sunMenuName: '设备分区图' },
+      { sunMenuName: '火灾报警平面图' },
+      { sunMenuName: 'FAS气灭系统图' },
     ],
   },
   {
-    menuName: '屏蔽门',
+    menuName: 'TFDS',
+    sunMenu: [{ sunMenuName: '子目录' }],
+  },
+  {
+    menuName: 'AFC',
     sunMenu: [{ sunMenuName: '屏蔽门' }],
   },
   {
-    menuName: '售检票',
+    menuName: 'CCTV',
+    sunMenu: [{ sunMenuName: '监控布局图' }, { sunMenuName: 'CCTV设备布局图' }],
+  },
+  {
+    menuName: 'PIS',
     sunMenu: [{ sunMenuName: '子目录' }],
   },
   {
-    menuName: '门禁',
+    menuName: 'PA',
     sunMenu: [{ sunMenuName: '子目录' }],
   },
   {
-    menuName: '防淹门',
+    menuName: 'SIG/RAD',
     sunMenu: [{ sunMenuName: '子目录' }],
   },
   {
-    menuName: '网络状态',
+    menuName: 'ACS',
+    sunMenu: [{ sunMenuName: '子目录' }],
+  },
+  {
+    menuName: 'PSD',
+    sunMenu: [{ sunMenuName: '子目录' }],
+  },
+  {
+    menuName: 'FG',
+    sunMenu: [{ sunMenuName: '子目录' }],
+  },
+  {
+    menuName: 'ALM',
+    sunMenu: [{ sunMenuName: '子目录' }],
+  },
+  {
+    menuName: 'NMS',
+    sunMenu: [{ sunMenuName: '子目录' }],
+  },
+  {
+    menuName: 'OPS',
+    sunMenu: [{ sunMenuName: '子目录' }],
+  },
+  {
+    menuName: '数据',
+    sunMenu: [{ sunMenuName: '子目录' }],
+  },
+  {
+    menuName: '联动',
     sunMenu: [{ sunMenuName: '子目录' }],
   },
 ];
diff --git a/src/drawApp/iscsApp.ts b/src/drawApp/iscsApp.ts
index e08731b..869a90b 100644
--- a/src/drawApp/iscsApp.ts
+++ b/src/drawApp/iscsApp.ts
@@ -85,7 +85,7 @@ export async function loadDrawDatas(): Promise<IGraphicStorage> {
     let canvasProperty;
 
     switch (drawStore.selectSubmenuAndStation.submenu) {
-      case '站台报警':
+      case '火灾报警平面图':
         for (let i = 0; i < storage.fasPlatformAlarmStorages.length; i++) {
           const fasPlatformAlarm = storage.fasPlatformAlarmStorages[i];
           if (
@@ -98,7 +98,7 @@ export async function loadDrawDatas(): Promise<IGraphicStorage> {
           }
         }
         break;
-      case '车站控制':
+      case '监控布局图':
         for (let i = 0; i < storage.cctvOfStationControlStorages.length; i++) {
           const ctvOfStationControl = storage.cctvOfStationControlStorages[i];
           if (
@@ -155,7 +155,7 @@ export function saveDrawDatas(app: IDrawApp) {
     );
   }
   switch (drawStore.selectSubmenuAndStation.submenu) {
-    case '站台报警':
+    case '火灾报警平面图':
       for (let i = 0; i < storage.fasPlatformAlarmStorages.length; i++) {
         const asPlatformAlarm = storage.fasPlatformAlarmStorages[i];
         if (
@@ -171,7 +171,7 @@ export function saveDrawDatas(app: IDrawApp) {
         }
       }
       break;
-    case '车站控制':
+    case '监控布局图':
       for (let i = 0; i < storage.cctvOfStationControlStorages.length; i++) {
         const cctvOfStationControl = storage.cctvOfStationControlStorages[i];
         if (
diff --git a/src/layouts/IscsDrawLayout.vue b/src/layouts/IscsDrawLayout.vue
index 644ec0a..77ccb88 100644
--- a/src/layouts/IscsDrawLayout.vue
+++ b/src/layouts/IscsDrawLayout.vue
@@ -1,34 +1,13 @@
 <template>
   <q-layout view="hHh LpR fFf">
-    <q-header reveal class="bg-primary text-white">
-      <q-toolbar class="q-pa-sm">
-        <q-toolbar-title class="q-gutter-sm">
-          <div>
-            <span class="q-pa-sm">地铁站</span>
-            <q-btn-toggle
-              v-model="selectMenuName"
-              toggle-color="orange"
-              :options="menuOption"
-              @update:model-value="selectedMenu"
-            />
-          </div>
-          <div>
-            <span class="q-pa-sm">子菜单</span>
-            <q-btn-toggle
-              v-model="selectSubMenuName"
-              toggle-color="orange"
-              :options="subMenuOption"
-              @update:model-value="selectedSubMenu"
-            />
-          </div>
-          <q-btn-toggle
-            v-model="selectStationName"
-            toggle-color="orange"
-            :options="stationOption"
-            @update:model-value="selectedStation"
-          />
-        </q-toolbar-title>
-        <div class="q-gutter-sm">
+    <q-header class="bg-primary text-white">
+      <div class="top-menu">
+        <div class="top-menu-left">成都地铁</div>
+        <div class="top-menu-middle">
+          <span class="data-margin">{{ currentData }}</span>
+          <span class="data-margin">{{ currentTime }}</span>
+        </div>
+        <div class="top-menu-right">
           <q-btn color="accent" label="功能菜单">
             <q-menu>
               <q-list style="min-width: 100px">
@@ -69,7 +48,111 @@
           <q-btn color="info" label="返回" @click="backConfirm" />
           <q-btn dense flat round icon="menu" @click="toggleRightDrawer" />
         </div>
-      </q-toolbar>
+      </div>
+      <div class="menu-nav">
+        <span class="menu-nav-leftTxet">{{
+          drawStore.selectSubmenuAndStation.station
+        }}</span>
+        <div class="menu-nav-right">
+          <div
+            class="menu-nav-contain"
+            v-for="(item, index) in menuOption"
+            :key="index"
+            @click="selectedMenu(item.value)"
+          >
+            <q-icon class="menu-nav-img" name="warning" />
+            <div
+              class="menu-nav-text"
+              :class="{
+                active: selectMenuName == item.value,
+              }"
+            >
+              {{ item.value }}
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="subMenu-nav">
+        <span class="menu-nav-leftTxet" />
+        <q-btn-toggle
+          v-model="selectSubMenuName"
+          no-caps
+          toggle-color="grey-10"
+          toggle-text-color="blue-8"
+          :options="subMenuOption"
+          @update:model-value="selectedSubMenu"
+        />
+      </div>
+      <div class="station-nav">
+        <div class="station-list-left">
+          <div
+            class="station-list-left-box"
+            :class="{
+              active: clickOCC,
+            }"
+            @click="clickOCCFn()"
+          />
+          <div class="station-list-left-text">OCC</div>
+        </div>
+        <div class="station-list">
+          <div class="station-list-contain">
+            <div class="station-line" />
+            <div
+              v-for="(item, index) in stationOption"
+              :key="index"
+              class="station-box-contain"
+            >
+              <div class="station-box">
+                <div
+                  class="station-list-box"
+                  :class="{
+                    active: selectStationName == item.value,
+                    left: index == 0,
+                    right: index == stationOption.length - 1,
+                  }"
+                  @click="selectedStation(item.value)"
+                />
+              </div>
+              <div
+                class="station-name"
+                :class="
+                  index == 0
+                    ? 'station-name-first'
+                    : index % 2 == 1
+                    ? 'station-name-down'
+                    : 'station-name-up'
+                "
+              >
+                {{ item.value }}
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="station-list-right">
+          <div
+            class="station-list-right-contain"
+            v-for="(item, index) in stationListRightOption"
+            :key="index"
+          >
+            <div
+              v-if="index < stationListRightOption.length - 1"
+              class="station-list-right-line"
+            />
+            <div
+              class="station-list-right-box"
+              :class="{
+                active: clickStationListRightName == item,
+              }"
+              @click="clickStationListRighrOrOcc(item)"
+            />
+            <div class="station-list-right-box-text">
+              {{ item }}
+            </div>
+          </div>
+        </div>
+      </div>
+
       <q-resize-observer @resize="onHeaderResize" />
     </q-header>
 
@@ -157,7 +240,7 @@
 import DrawProperties from 'src/components/draw-app/IscsDrawProperties.vue';
 import { onMounted, onUnmounted, reactive, ref, watch } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
-import { useQuasar } from 'quasar';
+import { date, useQuasar } from 'quasar';
 import { useDrawStore } from 'src/stores/draw-store';
 import { CCTVButton } from 'src/graphics/CCTV/cctvButton/CCTVButton';
 import { Arrow } from 'src/graphics/arrow/Arrow';
@@ -247,6 +330,7 @@ onMounted(() => {
   console.log('绘制应用layout mounted');
   const dom = document.getElementById('draw-app-container');
   initMunuOption();
+  intervalId = setInterval(updateTime, 1000);
   if (dom) {
     drawStore.setDraftId(+route.params.id as number);
     const drawApp = drawStore.initDrawApp();
@@ -339,18 +423,21 @@ async function saveAs(name: string) {
   }
 }
 
-function forceReloadDate() {
-  const drawApp = drawStore.getDrawApp();
-  const graphics = drawApp.queryStore.getAllGraphics();
-  graphics.forEach((graphic) => (graphic.visible = false));
-  drawApp.updateSelected();
-  drawApp.forceReload();
-}
+//日期
+let intervalId = null;
+const currentData = ref(date.formatDate(new Date(), 'YYYY-MM-DD'));
+const currentTime = ref(date.formatDate(new Date(), 'HH:mm:ss'));
+
+const updateTime = () => {
+  currentData.value = date.formatDate(new Date(), 'YYYY-MM-DD');
+  currentTime.value = date.formatDate(new Date(), 'HH:mm:ss');
+};
 
 //目录车站切换
 const selectMenuName = ref('');
 let menuOption = [];
 function selectedMenu(menuName: string) {
+  selectMenuName.value = menuName;
   for (let i = 0; i < iscsTypeConfig.length; i++) {
     if (iscsTypeConfig[i].menuName == menuName) {
       subMenuOption.value = iscsTypeConfig[i].sunMenu.map((sunMenu) => {
@@ -382,6 +469,8 @@ function initMunuOption() {
     return { label: sunMenu.sunMenuName, value: sunMenu.sunMenuName };
   });
   selectSubMenuName.value = subMenuOption.value[0].value;
+  drawStore.selectSubmenuAndStation.submenu = selectSubMenuName.value;
+  drawStore.selectSubmenuAndStation.station = stationOption[0].value;
 }
 
 const selectStationName = ref('会展中心');
@@ -389,13 +478,278 @@ const stationOption = [
   { label: '会展中心', value: '会展中心' },
   { label: '火车站', value: '火车站' },
   { label: '丈八一路', value: '丈八一路' },
+  { label: '会展中心', value: '会展中心' },
+  { label: '火车站', value: '火车站' },
+  { label: '丈八一路', value: '丈八一路' },
+  { label: '会展中心', value: '会展中心' },
+  { label: '火车站', value: '火车站' },
+  { label: '丈八一路', value: '丈八一路' },
+  { label: '会展中心', value: '会展中心' },
+  { label: '火车站', value: '火车站' },
+  { label: '丈八一路', value: '丈八一路' },
+  { label: '会展中心', value: '会展中心' },
+  { label: '火车站', value: '火车站' },
+  { label: '丈八一路', value: '丈八一路' },
 ];
 function selectedStation(name: string) {
+  selectStationName.value = name;
   drawStore.selectSubmenuAndStation.station = name;
   forceReloadDate();
 }
 
+function forceReloadDate() {
+  const drawApp = drawStore.getDrawApp();
+  const graphics = drawApp.queryStore.getAllGraphics();
+  graphics.forEach((graphic) => (graphic.visible = false));
+  drawApp.updateSelected();
+  drawApp.forceReload();
+}
+
+const clickOCC = ref(false);
+function clickOCCFn() {
+  clickOCC.value = !clickOCC.value;
+}
+
+const clickStationListRightName = ref('');
+const stationListRightOption = [
+  '车辆段',
+  '火车南主所',
+  '皂角树主所',
+  '红星停车场',
+  '香山主所',
+];
+
+function clickStationListRighrOrOcc(buttonLabel: string) {
+  clickStationListRightName.value = buttonLabel;
+}
+
 onUnmounted(() => {
   drawStore.destroy();
+  clearInterval(intervalId);
 });
 </script>
+<style lang="scss"  scoped>
+.top-menu {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 40px;
+  background-color: #1473a3;
+  .top-menu-left {
+    width: 80px;
+    font-size: 20px;
+    margin-left: 30px;
+  }
+  .top-menu-middle {
+    flex: 1;
+    text-align: center;
+    padding-left: 150px;
+    .data-margin {
+      margin-right: 80px;
+      font-size: 20px;
+    }
+  }
+  .top-menu-right {
+    min-width: 80px;
+    display: flex;
+    gap: 10px;
+  }
+}
+.menu-nav {
+  display: flex;
+  width: 100%;
+  height: 60px;
+  background-image: linear-gradient(to bottom, #616567, #424548);
+  .menu-nav-leftTxet {
+    display: inline-block;
+    min-width: 140px;
+    font-size: 18px;
+    text-align: center;
+    line-height: 60px;
+  }
+  .menu-nav-right {
+    display: flex;
+    .menu-nav-contain {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      position: relative;
+      height: 100%;
+      cursor: pointer;
+      .menu-nav-img {
+        position: absolute;
+        top: 10px;
+      }
+      .menu-nav-text {
+        width: 90px;
+        margin-top: 28px;
+        text-align: center;
+        color: white;
+        font-size: 18px;
+      }
+      .menu-nav-text.active {
+        color: #4fb6ec;
+      }
+    }
+  }
+}
+.subMenu-nav {
+  background-color: #5c6163;
+  .menu-nav-leftTxet {
+    display: inline-block;
+    min-width: 140px;
+    font-size: 16px;
+  }
+}
+.station-nav {
+  display: flex;
+  width: 100%;
+  height: 65px;
+  background-color: #b7e7fe;
+  .station-list-left {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: relative;
+    width: 4vw;
+    background-color: #61cbff;
+    .station-list-left-box {
+      cursor: pointer;
+      width: 1vw;
+      height: 1vw;
+      border-radius: 1vw;
+      background: radial-gradient(circle, #aaabae, #717171);
+      border-left: 1px #fdfdfd solid;
+      border-right: 1px #262626 solid;
+    }
+    .station-list-left-box.active {
+      background: radial-gradient(circle, #43f5fa, #1f88be);
+    }
+    .station-list-left-text {
+      position: absolute;
+      bottom: 4px;
+      color: black;
+    }
+  }
+  .station-list {
+    width: 82%;
+    height: 100%;
+    .station-list-contain {
+      display: flex;
+      position: relative;
+      justify-content: space-between;
+      width: 96%;
+      height: 100%;
+      margin-left: 2%;
+      .station-line {
+        position: absolute;
+        width: 100%;
+        height: 12px;
+        background-image: linear-gradient(to bottom, #9c9c9c, #f0f0f0, #9c9c9c);
+        top: 25px;
+        border: 1px #505050 solid;
+      }
+      .station-box-contain {
+        display: inline-block;
+        position: relative;
+        height: 100%;
+        .station-box {
+          display: inline-block;
+          position: relative;
+          width: 1vw;
+          margin-top: 20px;
+          cursor: pointer;
+          .station-list-box {
+            position: absolute;
+            width: 1vw;
+            height: 1vw;
+            border-radius: 1vw;
+            top: 10px;
+            background: radial-gradient(circle, #aaabae, #717171);
+            border-left: 1px #fdfdfd solid;
+            border-right: 1px #262626 solid;
+            transform: translateY(-50%);
+          }
+          .station-list-box.active {
+            background: radial-gradient(circle, #43f5fa, #1f88be);
+          }
+          .station-list-box.left {
+            left: -2px;
+          }
+          .station-list-box.right {
+            left: 2px;
+          }
+        }
+        .station-name {
+          color: black;
+          font-size: 12px;
+          position: absolute;
+        }
+        .station-name-first {
+          transform: translateX(-50%);
+          top: 5px;
+          white-space: nowrap;
+          left: 0%;
+        }
+        .station-name-up {
+          top: 5px;
+          transform: translateX(-50%);
+          left: 25%;
+          white-space: nowrap;
+        }
+        .station-name-down {
+          top: 45px;
+          transform: translateX(-25%);
+          white-space: nowrap;
+          left: 0%;
+        }
+      }
+    }
+  }
+
+  .station-list-right {
+    display: flex;
+    align-items: center;
+    width: 14vw;
+    background-color: #61cbff;
+    .station-list-right-contain {
+      flex: 1;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      position: relative;
+      height: 100%;
+      .station-list-right-line {
+        position: absolute;
+        left: 90%;
+        width: 1px;
+        height: 100%;
+        background-color: #aaabae;
+      }
+      .station-list-right-box {
+        position: absolute;
+        top: 10px;
+        cursor: pointer;
+        width: 1vw;
+        height: 1vw;
+        border-radius: 1vw;
+        background: radial-gradient(circle, #aaabae, #717171);
+        border-left: 1px #fdfdfd solid;
+        border-right: 1px #262626 solid;
+      }
+      .station-list-right-box-text {
+        position: relative;
+        width: 3em;
+        margin-top: 28px;
+        word-break: break-all;
+        white-space: normal;
+        color: black;
+        font-size: 12px;
+      }
+      .station-list-right-box.active {
+        background: radial-gradient(circle, #43f5fa, #1f88be);
+      }
+    }
+  }
+}
+</style>
diff --git a/src/stores/draw-store.ts b/src/stores/draw-store.ts
index a976659..adf467e 100644
--- a/src/stores/draw-store.ts
+++ b/src/stores/draw-store.ts
@@ -20,7 +20,7 @@ export const useDrawStore = defineStore('draw', {
     selectedGraphics: null as JlGraphic[] | null,
     draftId: null as number | null,
     drawPictureType: null as PictureType | null,
-    selectSubmenuAndStation: { submenu: '站台报警', station: '会展中心' },
+    selectSubmenuAndStation: { submenu: '', station: '' },
   }),
   getters: {
     drawMode: (state) => state.drawAssistant != null,
@@ -100,11 +100,7 @@ export const useDrawStore = defineStore('draw', {
       // console.log('绘制状态清空，绘制应用销毁');
       this.drawAssistant = null;
       this.selectedGraphics = null;
-      (this.selectSubmenuAndStation = {
-        submenu: '站台报警',
-        station: '会展中心',
-      }),
-        destroyIscsDrawApp();
+      destroyIscsDrawApp();
     },
     setDraftId(id: number | null) {
       this.draftId = id;