Merge remote-tracking branch 'origin/master'

src/router/routes.ts

@@ -215,14 +215,6 @@ export const constantRoutes: Array<RouteRecordRaw> = [
       title: "信息发布"
     }
   },
-  {
-    path: "/riskManagement/index",
-    name: "riskManagement",
-    component: () => import("@/views/worker/riskManagement/index.vue"),
-    meta: {
-      title: "风险防控"
-    }
-  },
   {
     path: "/patorlTaskResultAdd",
     name: "patorlTaskResultAdd",
@@ -350,6 +342,14 @@ export const workerRoute = [
           noCache: true
         }
       },
+      {
+        path: "riskManagement",
+        name: "riskManagement",
+        component: () => import("@/views/worker/riskManagement/index.vue"),
+        meta: {
+          title: "风险防控"
+        }
+      },
       {
         path: "duty",
         name: "Duty",

src/views/worker/riskManagement/InvestigationRecords.vue

@@ -1,5 +1,9 @@
 <!--排查记录-->
-<template></template>
+<template>
+
+</template>
 
 <script lang="ts"></script>
 
+<style lang="scss" scoped>
+</style>

src/views/worker/riskManagement/index.vue

@@ -1,16 +1,80 @@
 <template>
-  <van-tabs v-model:active="active">
-    <van-tab label="风险源排查" name="0"><riskSource /></van-tab>
-    <van-tab label="隐患源排查" name="1"><HiddenSource /></van-tab>
-    <van-tab label="危险源排查" name="2"><dangerousSource /></van-tab>
-    <van-tab label="排查记录"><investigationRecords /></van-tab>
-  </van-tabs>
+  <div class="container">
+    <div class="tabs">
+      <div v-for="item in tabs" :key="item.id" class="tab" @click="handleClickTab(item.id)">
+        <i :class="item.icon" />
+        <div :class="activeIndex === item.id ? 'tab-text text-active' : 'tab-text'">{{ item.name }}</div>
+      </div>
+    </div>
+    <div class="content">
+      <riskSource v-if="activeIndex === 'riskSource'" @changIndex="handleClickTab" />
+      <HiddenSource v-else-if="activeIndex === 'HiddenSource'" />
+      <investigationRecords v-else-if="activeIndex === 'investigationRecords'" />
+    </div>
+  </div>
 </template>
 <script setup lang="ts">
+import { ref } from "vue";
 import riskSource from "./riskSource.vue";
 import HiddenSource from "./HiddenSource.vue";
 import dangerousSource from "./dangerousSource.vue";
-import investigationRecords from "./investigationRecords.vue";
-import { ref } from "vue";
-const active = ref(0);
+import investigationRecords from "./InvestigationRecords.vue";
+
+let activeIndex = ref('riskSource');
+let tabs = ref([
+  { id: 'riskSource', name: '风险源排查', icon: 'icon1' },
+  { id: 'HiddenSource', name: '隐患源排查', icon: 'icon2' },
+  { id: 'dangerousSource', name: '危险源排查', icon: 'icon3' },
+  { id: 'investigationRecords', name: '排查记录', icon: 'icon4' },
+]);
+
+// 点击tab
+const handleClickTab = (id) => {
+  activeIndex.value = id;
+};
+
 </script>
+
+
+<style lang="scss" scoped>
+.container {
+  height: calc(100vh - 55px);
+  padding-top: 12px;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  .tabs {
+    height: 90px;
+    flex-shrink: 0;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 16px;
+    .tab {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      .icon1, .icon2, .icon3, .icon4 {
+        display: inline-block;
+        width: 48px;
+        height: 48px;
+        background-color: #9d9d9d;
+      }
+      .tab-text {
+        color: #414F64;
+        font-size: 14px;
+        margin-top: 8px;
+      }
+      .text-active {
+        color: #2C81FF;
+      }
+    }
+  }
+  .content {
+    margin-top: 10px;
+    height: calc(100vh - 180px);
+    overflow-y: auto;
+  }
+}
+</style>