修改

src/views/backend/statistics/index.vue

@@ -8,88 +8,29 @@
       <el-button @click="clickFire(2)">九小单位</el-button>
     </div>
     <div v-if="open == 1 || open == 0" style="width: 100%">
-      <el-tabs
-        type="border-card"
-        v-model.trim="selectedTab"
-        @tab-click="clickTab"
-      >
-        <el-tab-pane
-          :label="item.deptName"
-          v-for="(item, index) in brigade"
-          :key="index"
-        >
-        </el-tab-pane>
-      </el-tabs>
-      <div class="nav-data" v-for="(item, index) in navData" :key="index">
-        <img :src="item.imgs" style="width: 60px; height: 60px" alt="" />
-      </div>
+      <statisticsFire></statisticsFire>
     </div>
-    <img
-      src="../../../../static/jiandu.png"
-      alt=""
-      v-if="open == 2"
-      style="width: 100%; height: 100%"
-    />
-    <!-- <img
-      src="../../../../static/jiandu.png"
-      alt=""
-      v-if="open == 1 || open == 0"
-      style="width: 100%; height: 100%"
-    />
-    <img
-      src="../../../../static/jiuxiao.png"
-      alt=""
-      v-if="open == 2"
-      style="width: 100%; height: 100%"
-    /> -->
+    <div v-if="open == 2" >2</div>
   </div>
 </template>
 <script>
 import { getDdlist } from "@/api/backend/statistics";
+import statisticsFire from "@/views/backend/statisticsFire/index";
 export default {
+  components: {
+    statisticsFire
+  },
   data() {
     return {
-      open: 0,
-      brigade: [],
-      navData: [
-        {
-          name: "已初始化单位数",
-          code: 1,
-          imgs: require("@/assets/images/default.jpg"),
-        },
-        {
-          name: "发现隐患数",
-          code: 1,
-          imgs: require("@/assets/images/default.jpg"),
-        },
-        {
-          name: "整改隐患数",
-          code: 1,
-          imgs: require("@/assets/images/default.jpg"),
-        },
-        {
-          name: "隐患整改率",
-          code: 1,
-          imgs: require("@/assets/images/default.jpg"),
-        },
-      ],
+      open: 0
     };
   },
   created() {
-    this.getList();
   },
   methods: {
     clickFire(value) {
       this.open = value;
-    },
-    getList() {
-      // 执行查询
-      getDdlist().then((response) => {
-        console.log("response", response);
-        this.brigade = response.data;
-        this.brigade.unshift({ deptName: "所有大队", id: 0 });
-      });
-    },
+    }
   },
 };
 </script>

src/views/backend/statisticsFire/index.vue

@@ -0,0 +1,85 @@
+<template>
+    <div>
+        <el-tabs
+        type="border-card"
+        v-model.trim="selectedTab"
+        @tab-click="clickTab"
+      >
+        <el-tab-pane
+          :label="item.deptName"
+          v-for="(item, index) in brigade"
+          :key="index"
+        >
+        </el-tab-pane>
+      </el-tabs>
+      <div class="nav-data" v-for="(item, index) in navData" :key="index">
+        <img :src="item.imgs" style="width: 60px; height: 60px" alt="" />
+      </div>
+    </div>
+  </template>
+  <script>
+  import { getDdlist } from "@/api/backend/statistics";
+  export default {
+    data() {
+      return {
+        brigade: [],
+        selectedTab:0,
+        navData: [
+          {
+            name: "已初始化单位数",
+            code: 1,
+            imgs: require("@/assets/images/default.jpg"),
+          },
+          {
+            name: "发现隐患数",
+            code: 1,
+            imgs: require("@/assets/images/default.jpg"),
+          },
+          {
+            name: "整改隐患数",
+            code: 1,
+            imgs: require("@/assets/images/default.jpg"),
+          },
+          {
+            name: "隐患整改率",
+            code: 1,
+            imgs: require("@/assets/images/default.jpg"),
+          },
+        ],
+      };
+    },
+    created() {
+        this.getList()
+    },
+    methods: {
+        getList() {
+        // 执行查询
+        getDdlist().then((response) => {
+          console.log("response", response);
+          this.brigade = response.data;
+          this.brigade.unshift({ deptName: "所有大队", id: 0 });
+        });
+      },
+      clickTab() {
+
+      }
+    },
+  };
+  </script>
+  <style lang="scss" scoped>
+  .tabs {
+    margin-bottom: 12px;
+  }
+  ::v-deep .el-tabs--border-card > .el-tabs__content {
+    padding: 0 !important;
+  }
+  .nav {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    overflow-x: auto;
+    cursor: pointer;
+    .nav-item {
+    }
+  }
+  </style>