Jelajahi Sumber

Merge branch 'dev-bxy' into 'dev'

refactor: 保卫保密(总览+保密重点部位)文件结构及路由更新

See merge request product-group-fe/sfy-safety-group/sfy-safety!210
毕欣怡 7 bulan lalu
induk
melakukan
1512290f30

+ 28 - 1
src/router/routers/security-confidentiality.ts

@@ -191,7 +191,6 @@ const securityConfidentialityRoutes = {
       parentId: 5000,
       name: 'security-confidentiality-confidentiality-position',
       path: 'confidentiality-position',
-      component: '/security-confidentiality/confidentiality-position/ConfidentialityPosition',
       redirect: '',
       meta: {
         title: '保密要害部位',
@@ -200,6 +199,34 @@ const securityConfidentialityRoutes = {
         hidden: false,
         noCache: false,
       },
+      children: [
+        {
+          id: 501101,
+          parentId: 5011,
+          name: 'security-confidentiality-confidentiality-position-management',
+          path: 'position-management',
+          component: '/security-confidentiality/confidentiality-position/position-management/PositionManagement',
+          meta: {
+            title: '部位管理',
+            isRoot: false,
+            hidden: false,
+            noCache: false,
+          },
+        },
+        {
+          id: 501102,
+          parentId: 5011,
+          name: 'security-confidentiality-confidentiality-position-item',
+          path: 'monitor-records',
+          component: '/security-confidentiality/confidentiality-position/monitor-records/MonitorRecords',
+          meta: {
+            title: '监测记录',
+            isRoot: false,
+            hidden: false,
+            noCache: false,
+          },
+        },
+      ],
     },
     {
       id: 5012,

src/views/security-confidentiality/confidentiality-position/ConfidentialityPosition.vue → src/views/security-confidentiality/confidentiality-position/monitor-records/MonitorRecords.vue


+ 7 - 0
src/views/security-confidentiality/confidentiality-position/position-management/PositionManagement.vue

@@ -0,0 +1,7 @@
+<template>
+  <div> overview </div>
+</template>
+
+<script setup lang="ts"></script>
+
+<style scoped></style>

+ 82 - 3
src/views/security-confidentiality/overview/Overview.vue

@@ -1,7 +1,86 @@
 <template>
-  <div> overview </div>
+  <div class="security-confidentiality-overview">
+    <div class="left-container">
+      <div class="left-top">
+        <OuterPerson class="outer-person" />
+        <VehicleManagement class="vehicle-management" />
+      </div>
+      <ConfidentialityPosition class="confidentiality-position" />
+    </div>
+    <div class="right-container">
+      <RegulationAndNotice class="regulation-and-notice" />
+      <SecurityPosition class="security-position" />
+    </div>
+  </div>
 </template>
 
-<script setup lang="ts"></script>
+<script setup lang="ts">
+  import OuterPerson from './components/OuterPerson.vue';
+  import VehicleManagement from './components/VehicleManagement.vue';
+  import RegulationAndNotice from './components/RegulationAndNotice.vue';
+  import ConfidentialityPosition from './components/ConfidentialityPosition.vue';
+  import SecurityPosition from './components/SecurityPosition.vue';
+</script>
 
-<style scoped></style>
+<style scoped lang="scss">
+  .security-confidentiality-overview {
+    width: 100%;
+    height: 100%;
+    display: flex;
+  }
+
+  .left-container {
+    width: 70%;
+    height: 100%;
+    margin-right: 10px;
+
+    .left-top {
+      width: 100%;
+      height: 254px;
+      margin-bottom: 10px;
+      display: flex;
+
+      .outer-person {
+        width: 50%;
+        height: 100%;
+        background-color: #fff;
+        border-radius: 4px;
+        margin-right: 10px;
+      }
+
+      .vehicle-management {
+        width: 50%;
+        height: 100%;
+        background-color: #fff;
+        border-radius: 4px;
+      }
+    }
+
+    .confidentiality-position {
+      width: 100%;
+      height: calc(100% - 254px - 10px);
+      background-color: #fff;
+      border-radius: 4px;
+    }
+  }
+
+  .right-container {
+    width: calc(100% - 70% - 10px);
+    height: 100%;
+
+    .regulation-and-notice {
+      width: 100%;
+      height: 254px;
+      background-color: #fff;
+      border-radius: 4px;
+      margin-bottom: 10px;
+    }
+
+    .security-position {
+      width: 100%;
+      height: calc(100% - 254px - 10px);
+      background-color: #fff;
+      border-radius: 4px;
+    }
+  }
+</style>

+ 38 - 0
src/views/security-confidentiality/overview/components/ConfidentialityPosition.vue

@@ -0,0 +1,38 @@
+<template>
+  <div class="outer-person-container">
+    <div class="container-title">
+      <span class="line"></span>
+      <span class="title">保密要害部位监控</span>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts"></script>
+
+<style scoped lang="scss">
+  .container-title {
+    height: 24px;
+    display: flex;
+    align-items: center;
+    font-weight: 500;
+    font-size: 16px;
+    color: #000000;
+
+    .line {
+      width: 3px;
+      height: 16px;
+      background: #1777ff;
+      margin-right: 10px;
+    }
+
+    .title {
+      margin-right: 12px;
+    }
+  }
+
+  .outer-person-container {
+    width: 100%;
+    height: 100%;
+    padding-top: 14px;
+  }
+</style>

+ 44 - 0
src/views/security-confidentiality/overview/components/OuterPerson.vue

@@ -0,0 +1,44 @@
+<template>
+  <div class="outer-person-container">
+    <div class="container-title">
+      <span class="line"></span>
+      <span class="title">外部人员管理</span>
+    </div>
+    <div class="chart-container"></div>
+  </div>
+</template>
+
+<script setup lang="ts"></script>
+
+<style scoped lang="scss">
+  .container-title {
+    height: 24px;
+    display: flex;
+    align-items: center;
+    font-weight: 500;
+    font-size: 16px;
+    color: #000000;
+
+    .line {
+      width: 3px;
+      height: 16px;
+      background: #1777ff;
+      margin-right: 10px;
+    }
+
+    .title {
+      margin-right: 12px;
+    }
+  }
+
+  .outer-person-container {
+    width: 100%;
+    height: 100%;
+    padding-top: 14px;
+  }
+
+  .chart-container {
+    width: 100%;
+    height: calc(100% - 24px);
+  }
+</style>

+ 38 - 0
src/views/security-confidentiality/overview/components/RegulationAndNotice.vue

@@ -0,0 +1,38 @@
+<template>
+  <div class="outer-person-container">
+    <div class="container-title">
+      <span class="line"></span>
+      <span class="title">管理规定与通知</span>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts"></script>
+
+<style scoped lang="scss">
+  .container-title {
+    height: 24px;
+    display: flex;
+    align-items: center;
+    font-weight: 500;
+    font-size: 16px;
+    color: #000000;
+
+    .line {
+      width: 3px;
+      height: 16px;
+      background: #1777ff;
+      margin-right: 10px;
+    }
+
+    .title {
+      margin-right: 12px;
+    }
+  }
+
+  .outer-person-container {
+    width: 100%;
+    height: 100%;
+    padding-top: 14px;
+  }
+</style>

+ 38 - 0
src/views/security-confidentiality/overview/components/SecurityPosition.vue

@@ -0,0 +1,38 @@
+<template>
+  <div class="outer-person-container">
+    <div class="container-title">
+      <span class="line"></span>
+      <span class="title">治安重点部位监控</span>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts"></script>
+
+<style scoped lang="scss">
+  .container-title {
+    height: 24px;
+    display: flex;
+    align-items: center;
+    font-weight: 500;
+    font-size: 16px;
+    color: #000000;
+
+    .line {
+      width: 3px;
+      height: 16px;
+      background: #1777ff;
+      margin-right: 10px;
+    }
+
+    .title {
+      margin-right: 12px;
+    }
+  }
+
+  .outer-person-container {
+    width: 100%;
+    height: 100%;
+    padding-top: 14px;
+  }
+</style>

+ 38 - 0
src/views/security-confidentiality/overview/components/VehicleManagement.vue

@@ -0,0 +1,38 @@
+<template>
+  <div class="outer-person-container">
+    <div class="container-title">
+      <span class="line"></span>
+      <span class="title">车辆进入管理</span>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts"></script>
+
+<style scoped lang="scss">
+  .container-title {
+    height: 24px;
+    display: flex;
+    align-items: center;
+    font-weight: 500;
+    font-size: 16px;
+    color: #000000;
+
+    .line {
+      width: 3px;
+      height: 16px;
+      background: #1777ff;
+      margin-right: 10px;
+    }
+
+    .title {
+      margin-right: 12px;
+    }
+  }
+
+  .outer-person-container {
+    width: 100%;
+    height: 100%;
+    padding-top: 14px;
+  }
+</style>