From 456855000a54ce89bace2af99808ba6f5dd91733 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=B2=81=E6=B4=AA=E9=9C=9E?= <luhongxia@zcloudchina.com>
Date: Mon, 1 Apr 2024 17:25:09 +0800
Subject: [PATCH] =?UTF-8?q?=E9=B2=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/index/components/annualTraining.vue | 132 +++++++++++++
 src/views/index/components/count.vue          | 177 ++++++------------
 .../index/components/doublePrevention.vue     |  54 ++++++
 .../components/doublePreventionCheck.vue      | 135 +++++++++++++
 src/views/index/components/info.vue           |  94 ++++++++++
 .../rectificationOfHiddenDangers.vue          |  86 +++++++++
 src/views/index/components/statistics.vue     |  86 +++++++++
 .../index/components/trainingStatistics.vue   |  52 +++++
 src/views/index/components/waybill.vue        |  53 ++++++
 src/views/index/index.vue                     |  48 +++--
 10 files changed, 779 insertions(+), 138 deletions(-)
 create mode 100644 src/views/index/components/annualTraining.vue
 create mode 100644 src/views/index/components/doublePrevention.vue
 create mode 100644 src/views/index/components/doublePreventionCheck.vue
 create mode 100644 src/views/index/components/info.vue
 create mode 100644 src/views/index/components/rectificationOfHiddenDangers.vue
 create mode 100644 src/views/index/components/statistics.vue
 create mode 100644 src/views/index/components/trainingStatistics.vue
 create mode 100644 src/views/index/components/waybill.vue

diff --git a/src/views/index/components/annualTraining.vue b/src/views/index/components/annualTraining.vue
new file mode 100644
index 0000000..1df6b04
--- /dev/null
+++ b/src/views/index/components/annualTraining.vue
@@ -0,0 +1,132 @@
+<template>
+  <el-card>
+    <div class="main">
+      <div class="title">年度培训情况统计</div>
+      <div class="num">
+        培训班级数: <span>8965 </span> 参与培训人员数: <span>8965 </span>
+      </div>
+    </div>
+
+    <div id="main1" />
+  </el-card>
+</template>
+
+<script setup>
+import { onMounted } from "vue";
+import * as echarts from "echarts";
+let myChart1;
+
+const annualTraining = () => {
+  myChart1 = echarts.init(document.querySelector("#main1"));
+  const option = {
+    title: {
+      text: "",
+      textStyle: {
+        fontSize: "14",
+        fontWeight: "700",
+        color: "#fff",
+      },
+    },
+    legend: {
+      data: ["培训班级数", "参与培训人员数"],
+      top: "5%",
+      textStyle: {
+        color: "#fff",
+      },
+    },
+    grid: {
+      left: "0%",
+      right: "8%",
+      bottom: "0%",
+      top: "20%",
+      containLabel: true,
+    },
+    tooltip: {
+      trigger: "axis",
+    },
+    xAxis: {
+      type: "category",
+      boundaryGap: false,
+      data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
+      axisLabel: {
+        color: "#fff",
+      },
+      axisLine: {
+        lineStyle: {
+          color: "#102b60",
+        },
+      },
+    },
+    yAxis: {
+      type: "value",
+      axisLabel: {
+        color: "#fff",
+      },
+      axisLine: {
+        lineStyle: {
+          color: "#102b60",
+        },
+      },
+      splitLine: {
+        lineStyle: {
+          color: "#102b60",
+        },
+      },
+    },
+    series: [
+      {
+        name: "培训班级数",
+        type: "line",
+        data: [100, 560, 324, 21, 244, 566, 234, 456, 345, 55, 133, 122],
+        itemStyle: {
+          color: "#3ca272",
+          lineStyle: {
+            color: "#3ca272",
+          },
+        },
+      },
+      {
+        name: "参与培训人员数",
+        type: "line",
+        data: [243, 43, 54, 433, 44, 546, 234, 345, 46, 145, 222, 676],
+        itemStyle: {
+          color: "#5470c6",
+          lineStyle: {
+            color: "#5470c6",
+          },
+        },
+      },
+    ],
+  };
+  myChart1.setOption(option);
+};
+onMounted(() => {
+  annualTraining();
+});
+</script>
+
+<style scoped lang="scss">
+.main {
+  display: flex;
+  justify-content: space-between;
+  font-size: 12px;
+
+  .title {
+    font-size: 14px;
+    font-weight: bold;
+  }
+  .num {
+    color: #ffffff;
+    span {
+      color: #087cca;
+      font-weight: bold;
+      font-size: 15px;
+    }
+  }
+}
+
+#main1 {
+  width: 500px;
+  height: 350px;
+}
+</style>
diff --git a/src/views/index/components/count.vue b/src/views/index/components/count.vue
index 3163d35..95113d5 100644
--- a/src/views/index/components/count.vue
+++ b/src/views/index/components/count.vue
@@ -1,140 +1,77 @@
 <template>
   <el-row :gutter="10">
-    <el-col :span="9">
-      <el-card>
-        <div class="flex">
-          <div class="img">
-            <img src="/src/assets/images/index/icon1.png" alt="" />
-          </div>
-          <div
-            @click="
-              router.push({
-                path: '/hidden_danger_government/ledger',
-                query: { STATE: '4' },
-              })
-            "
-          >
-            <span>已验收</span>
-            <count-to :end-val="data.hidCount.yys" />
-          </div>
-          <div
-            @click="
-              router.push({
-                path: '/hidden_danger_government/ledger',
-                query: { STATE: '-1' },
-              })
-            "
-          >
-            <span>已超期</span>
-            <count-to :end-val="data.hidCount.ycq" />
-          </div>
-          <div
-            @click="
-              router.push({ path: '/hidden_danger_government/rectification' })
-            "
-          >
-            <span>待整改</span>
-            <count-to :end-val="data.hidCount.dzg" />
-          </div>
-        </div>
-      </el-card>
-    </el-col>
-    <el-col :span="9">
-      <el-card>
-        <div class="flex">
-          <div class="img">
-            <img src="/src/assets/images/index/icon2.png" alt="" />
-          </div>
-          <div @click="router.push({ path: '/risk_control/ledger' })">
-            <span>存在风险</span>
-            <count-to :end-val="data.riskCount.cnzfx" />
-          </div>
-          <div
-            @click="router.push({ path: '/risk_control/identifying_parts' })"
-          >
-            <span>辨识部位</span>
-            <count-to :end-val="data.riskCount.idcount" />
-          </div>
-          <div @click="router.push({ path: '/risk_control/risk_point' })">
-            <span>风险点(单元)</span>
-            <count-to :end-val="data.riskCount.unitcount" />
-          </div>
-        </div>
-      </el-card>
-    </el-col>
-    <el-col :span="6">
-      <el-card>
-        <div class="flex">
-          <div class="img">
-            <img src="/src/assets/images/index/icon3.png" alt="" />
-          </div>
-          <div>
-            <span>已使用存储</span>
-            <count-to
-              :end-val="(data.memoryUsage.total_usage / 1000 / 1000).toFixed(2)"
-              :options="{ suffix: 'MB' }"
-            />
-          </div>
-        </div>
-      </el-card>
+    <el-col v-for="(item, index) in data.countlist" :key="index" :span="4">
+      <div class="wrap">
+        <div class="num">{{ item.num }}</div>
+        <div class="title">{{ item.title }}</div>
+      </div>
     </el-col>
   </el-row>
 </template>
 
 <script setup>
-import { getHiddenCount, getMemoryUsage } from "@/request/index.js";
 import { reactive } from "vue";
-import CountTo from "vue-countup-v3";
-import { useRouter } from "vue-router";
-import { getRiskManagement } from "@/request/large_screen_data_display.js";
-
-const router = useRouter();
 const data = reactive({
-  hidCount: {
-    dzg: 0,
-    yys: 0,
-    ycq: 0,
-  },
-  riskCount: {
-    cnzfx: 0,
-    idcount: 0,
-    unitcount: 0,
-  },
-  memoryUsage: {
-    total_usage: 0,
-  },
+  countlist: [
+    {
+      num: 456321,
+      title: "风险单元",
+    },
+    {
+      num: 456321,
+      title: "辨识部位",
+    },
+    {
+      num: 456321,
+      title: "风险因素",
+    },
+    {
+      num: 456321,
+      title: "排查清单数",
+    },
+    {
+      num: 456321,
+      title: "自查次数",
+    },
+    {
+      num: 456321,
+      title: "隐患数",
+    },
+  ],
 });
-const fnGetData = async () => {
-  const { hidCount } = await getHiddenCount();
-  const { riskCount } = await getRiskManagement();
-  const { pd: memoryUsage } = await getMemoryUsage();
-  data.hidCount = hidCount;
-  data.riskCount = riskCount;
-  data.memoryUsage = memoryUsage;
-};
-fnGetData();
 </script>
 
 <style scoped lang="scss">
-img {
-  width: 40px;
-  height: 40px;
-}
+.el-col-4 {
+  .wrap {
+    width: 100%;
+    padding: 20px;
+    text-align: center;
+    border-radius: 8px;
+    border: 1px solid transparent;
+    border-image: linear-gradient(to bottom, #214e74, #25417a) 1 stretch;
 
-.flex {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  text-align: center;
+    .num {
+      font-size: 30px;
+      font-weight: bold;
+      margin-bottom: 10px;
+      color: #087cca;
+    }
 
-  div:not(:first-child) {
-    cursor: pointer;
+    .title {
+      color: #ffffff;
+    }
+  }
+  &:nth-child(1) .wrap .num {
+    color: #087cca;
   }
 
-  .countup-wrap {
-    padding-top: 10px;
-    font-weight: bold;
-    font-size: 20px;
+  &:nth-child(3) .wrap .num {
+    color: #d19312;
+  }
+
+  &:nth-child(6) .wrap .num {
+    color: #aa0608;
   }
 }
 </style>
diff --git a/src/views/index/components/doublePrevention.vue b/src/views/index/components/doublePrevention.vue
new file mode 100644
index 0000000..ab58944
--- /dev/null
+++ b/src/views/index/components/doublePrevention.vue
@@ -0,0 +1,54 @@
+<template>
+  <el-card>
+    <div class="title">双重预防运行情况统计</div>
+    <el-table :data="data.tableData" style="width: 100%" size="small">
+      <el-table-column prop="date" label="序号" />
+      <el-table-column prop="date" label="清单名称" />
+      <el-table-column prop="date" label="检查时间" />
+      <el-table-column prop="date" label="检查人" />
+      <el-table-column prop="date" label="隐患数" />
+
+      ></el-table
+    ></el-card
+  >
+</template>
+<script setup>
+import { reactive } from "vue";
+
+const data = reactive({
+  tableData: [
+    {
+      date: "2016-05-03",
+      name: "Tom",
+    },
+    {
+      date: "2016-05-03",
+      name: "Tom",
+    },
+    {
+      date: "2016-05-03",
+      name: "Tom",
+    },
+    {
+      date: "2016-05-03",
+      name: "Tom",
+    },
+    {
+      date: "2016-05-03",
+      name: "Tom",
+    },
+    {
+      date: "2016-05-03",
+      name: "Tom",
+    },
+  ],
+});
+</script>
+
+<style scoped lang="scss">
+.title {
+  font-size: 14px;
+  font-weight: bold;
+  margin-bottom: 10px;
+}
+</style>
diff --git a/src/views/index/components/doublePreventionCheck.vue b/src/views/index/components/doublePreventionCheck.vue
new file mode 100644
index 0000000..d3b534d
--- /dev/null
+++ b/src/views/index/components/doublePreventionCheck.vue
@@ -0,0 +1,135 @@
+<template>
+  <div class="wrap">
+    <div class="title">双重预防检查情况统计</div>
+    <div id="main2"></div>
+  </div>
+</template>
+<script setup>
+import { onMounted } from "vue";
+import * as echarts from "echarts";
+let myChart1;
+
+const annualTraining = () => {
+  myChart1 = echarts.init(document.querySelector("#main2"));
+  const option = {
+    tooltip: {
+      trigger: "axis",
+      axisPointer: {
+        type: "cross",
+        crossStyle: {
+          color: "#999",
+        },
+      },
+    },
+    toolbox: {
+      feature: {
+        dataView: { show: false, readOnly: false },
+        magicType: { show: false, type: ["line", "bar"] },
+        restore: { show: false },
+        saveAsImage: { show: false },
+      },
+    },
+    legend: {
+      data: ["清单检查数", "发现隐患数"],
+      top: "10%",
+      left: "center",
+      textStyle: {
+        color: "#FFFFFF",
+      },
+    },
+
+    grid: {
+      left: "0%",
+      right: "8%",
+      bottom: "0%",
+      top: "30%",
+      containLabel: true,
+    },
+    xAxis: [
+      {
+        type: "category",
+        data: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"],
+        axisPointer: {
+          type: "shadow",
+        },
+        axisLabel: {
+          color: "#fff",
+        },
+        axisLine: {
+          lineStyle: {
+            color: "#102b60",
+          },
+        },
+      },
+    ],
+    yAxis: [
+      {
+        type: "value",
+        name: "",
+        min: 0,
+        max: 250,
+        interval: 50,
+        axisLabel: {
+          formatter: "{value}",
+          color: "#fff",
+        },
+
+        axisLine: {
+          lineStyle: {
+            color: "#102b60",
+          },
+        },
+        splitLine: {
+          lineStyle: {
+            color: "#102b60",
+          },
+        },
+      },
+    ],
+    series: [
+      {
+        name: "清单检查数",
+        type: "bar",
+        tooltip: {
+          valueFormatter: function (value) {
+            return value;
+          },
+        },
+        data: [
+          2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3,
+        ],
+      },
+      {
+        name: "发现隐患数",
+        type: "bar",
+        tooltip: {
+          valueFormatter: function (value) {
+            return value;
+          },
+        },
+        data: [
+          2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3,
+        ],
+      },
+    ],
+  };
+  myChart1.setOption(option);
+};
+onMounted(() => {
+  annualTraining();
+});
+</script>
+
+<style scoped lang="scss">
+.wrap {
+  width: 50%;
+  .title {
+    font-size: 14px;
+    font-weight: bold;
+  }
+  #main2 {
+    width: 330px;
+    height: 350px;
+  }
+}
+</style>
diff --git a/src/views/index/components/info.vue b/src/views/index/components/info.vue
new file mode 100644
index 0000000..f7f7878
--- /dev/null
+++ b/src/views/index/components/info.vue
@@ -0,0 +1,94 @@
+<template>
+  <el-card>
+    <div class="wrap">
+      <div class="flex top">
+        <div class="img">
+          <img src="@/assets/images/public/loginbg.jpg" alt="" />
+        </div>
+        <div class="info">
+          <div>
+            <span>公司名称：</span><br />
+            秦皇岛卓云科技有限公司
+          </div>
+          <div>
+            <span>组织机构代码证：</span>
+            <br />455555
+          </div>
+        </div>
+      </div>
+      <div class="flex f14 mt20 number">
+        <div>驾驶员数:<span>234</span></div>
+        <div>押运员数:<span>234</span></div>
+        <div>装卸员数:<span>234</span></div>
+      </div>
+      <div class="wrap_text">
+        <div class="wrap_main">
+          <div class="flex space-between">
+            <div>主要负责人: 张三岁</div>
+            <div>主要负责人电话: 13833550548</div>
+          </div>
+          <div class="flex space-between">
+            <div>法定代表人: 李四折</div>
+            <div>法人手机号: 13833550547</div>
+          </div>
+          <div class="flex space-between">
+            <div>占地面积（㎡）: 10000</div>
+            <div>职工人数（人）: 22</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </el-card>
+</template>
+<script setup></script>
+
+<style scoped lang="scss">
+.wrap {
+  width: 100%;
+  font-size: 14px;
+  .flex {
+    display: flex;
+  }
+  .mt20 {
+    margin-top: 20px;
+  }
+  .top {
+    .img {
+      width: 150px;
+      height: 90px;
+      img {
+        width: 100%;
+        height: 100%;
+        border: 1px solid #234e6c;
+      }
+    }
+    .info {
+      font-size: 14px;
+      margin-left: 10px;
+      line-height: 1.6;
+      span {
+        color: #76afed;
+      }
+    }
+  }
+  .number {
+    justify-content: space-between;
+    span {
+      font-weight: bold;
+    }
+  }
+  .wrap_text {
+    margin-top: 20px;
+    line-height: 2;
+    .wrap_main {
+      background: #1b346c;
+      padding: 10px;
+      border-radius: 4px;
+    }
+    .space-between {
+      justify-content: space-between;
+      width: 100%;
+    }
+  }
+}
+</style>
diff --git a/src/views/index/components/rectificationOfHiddenDangers.vue b/src/views/index/components/rectificationOfHiddenDangers.vue
new file mode 100644
index 0000000..747a8d9
--- /dev/null
+++ b/src/views/index/components/rectificationOfHiddenDangers.vue
@@ -0,0 +1,86 @@
+<template>
+  <div class="wrap">
+    <div class="title">隐患整改情况统计</div>
+    <div id="main3"></div>
+  </div>
+</template>
+<script setup>
+import { onMounted } from "vue";
+import * as echarts from "echarts";
+let myChart1;
+
+const annualTraining = () => {
+  myChart1 = echarts.init(document.querySelector("#main3"));
+  const option = {
+    tooltip: {
+      trigger: "item",
+    },
+    legend: {
+      bottom: "0%",
+      left: "center",
+      textStyle: {
+        color: "#FFFFFF",
+      },
+    },
+    grid: {
+      left: "0%",
+      right: "8%",
+      bottom: "0%",
+      top: "35%",
+      containLabel: true,
+    },
+    series: [
+      {
+        name: "Access From",
+        type: "pie",
+        radius: ["40%", "70%"],
+        avoidLabelOverlap: false,
+        itemStyle: {
+          borderRadius: 2,
+        },
+        label: {
+          show: false,
+          position: "center",
+          textStyle: {
+            color: "#FFFFFF",
+          },
+        },
+        emphasis: {
+          label: {
+            show: false,
+            fontSize: 16,
+          },
+        },
+        labelLine: {
+          show: false,
+        },
+
+        data: [
+          { value: 1048, name: "未整改" },
+          { value: 735, name: "已整改" },
+          { value: 484, name: "已验收" },
+          { value: 300, name: "已过期" },
+        ],
+      },
+    ],
+  };
+  myChart1.setOption(option);
+};
+onMounted(() => {
+  annualTraining();
+});
+</script>
+
+<style scoped lang="scss">
+.wrap {
+  width: 50%;
+  .title {
+    font-size: 14px;
+    font-weight: bold;
+  }
+  #main3 {
+    width: 330px;
+    height: 350px;
+  }
+}
+</style>
diff --git a/src/views/index/components/statistics.vue b/src/views/index/components/statistics.vue
new file mode 100644
index 0000000..fa3cd9c
--- /dev/null
+++ b/src/views/index/components/statistics.vue
@@ -0,0 +1,86 @@
+<template>
+  <div class="wrap">
+    <el-card>
+      <div class="title">人员统计</div>
+      <div id="main4"></div>
+    </el-card>
+  </div>
+</template>
+<script setup>
+import { onMounted } from "vue";
+import * as echarts from "echarts";
+let myChart1;
+
+const annualTraining = () => {
+  myChart1 = echarts.init(document.querySelector("#main4"));
+  const option = {
+    tooltip: {
+      trigger: "item",
+    },
+    legend: {
+      bottom: "0%",
+      left: "center",
+      textStyle: {
+        color: "#FFFFFF",
+      },
+    },
+    grid: {
+      left: "0%",
+      right: "8%",
+      bottom: "0%",
+      top: "0%",
+      containLabel: true,
+    },
+    series: [
+      {
+        name: "Access From",
+        type: "pie",
+        radius: ["40%", "70%"],
+        avoidLabelOverlap: false,
+        itemStyle: {
+          borderRadius: 10,
+        },
+        label: {
+          show: false,
+          position: "center",
+          textStyle: {
+            color: "#FFFFFF",
+          },
+        },
+        emphasis: {
+          label: {
+            show: false,
+            fontSize: 16,
+          },
+        },
+        labelLine: {
+          show: false,
+        },
+
+        data: [
+          { value: 1048, name: "驾驶员" },
+          { value: 735, name: "押运员" },
+          { value: 484, name: "装卸员" },
+        ],
+      },
+    ],
+  };
+  myChart1.setOption(option);
+};
+onMounted(() => {
+  annualTraining();
+});
+</script>
+
+<style scoped lang="scss">
+.wrap {
+  .title {
+    font-size: 14px;
+    font-weight: bold;
+  }
+  #main4 {
+    width: 330px;
+    height: 165px;
+  }
+}
+</style>
diff --git a/src/views/index/components/trainingStatistics.vue b/src/views/index/components/trainingStatistics.vue
new file mode 100644
index 0000000..1693945
--- /dev/null
+++ b/src/views/index/components/trainingStatistics.vue
@@ -0,0 +1,52 @@
+<template>
+  <el-card>
+    <div class="title">培训情况统计</div>
+    <el-table :data="data.tableData" style="width: 100%" size="small">
+      <el-table-column prop="date" label="序号" />
+      <el-table-column prop="date" label="班级名称" />
+      <el-table-column prop="date" label="班级状态" />
+      <el-table-column prop="date" label="涉及工种数" />
+      <el-table-column prop="date" label="培训人数" />
+      <el-table-column prop="date" label="培训进度" /> </el-table
+  ></el-card>
+</template>
+<script setup>
+import { reactive } from "vue";
+
+const data = reactive({
+  tableData: [
+    {
+      date: "2016-05-03",
+      name: "Tom",
+    },
+    {
+      date: "2016-05-03",
+      name: "Tom",
+    },
+    {
+      date: "2016-05-03",
+      name: "Tom",
+    },
+    {
+      date: "2016-05-03",
+      name: "Tom",
+    },
+    {
+      date: "2016-05-03",
+      name: "Tom",
+    },
+    {
+      date: "2016-05-03",
+      name: "Tom",
+    },
+  ],
+});
+</script>
+
+<style scoped lang="scss">
+.title {
+  font-size: 14px;
+  font-weight: bold;
+  margin-bottom: 10px;
+}
+</style>
diff --git a/src/views/index/components/waybill.vue b/src/views/index/components/waybill.vue
new file mode 100644
index 0000000..04e5a48
--- /dev/null
+++ b/src/views/index/components/waybill.vue
@@ -0,0 +1,53 @@
+<template>
+  <el-card style="margin-top: 10px">
+    <div class="title">双重预防运行情况统计</div>
+    <el-table :data="data.tableData" style="width: 100%" size="small">
+      <el-table-column prop="date" label="序号" />
+      <el-table-column prop="date" label="运单编号" />
+      <el-table-column prop="date" label="运输车辆" />
+      <el-table-column prop="date" label="三检状态" />
+
+      ></el-table
+    ></el-card
+  >
+</template>
+<script setup>
+import { reactive } from "vue";
+
+const data = reactive({
+  tableData: [
+    {
+      date: "34",
+      name: "Tom",
+    },
+    {
+      date: "34",
+      name: "Tom",
+    },
+    {
+      date: "34",
+      name: "Tom",
+    },
+    {
+      date: "34",
+      name: "Tom",
+    },
+    {
+      date: "34",
+      name: "Tom",
+    },
+    {
+      date: "34",
+      name: "Tom",
+    },
+  ],
+});
+</script>
+
+<style scoped lang="scss">
+.title {
+  font-size: 14px;
+  font-weight: bold;
+  margin-bottom: 10px;
+}
+</style>
diff --git a/src/views/index/index.vue b/src/views/index/index.vue
index 7e93c5f..6a913dd 100644
--- a/src/views/index/index.vue
+++ b/src/views/index/index.vue
@@ -3,25 +3,29 @@
     <el-row :gutter="10">
       <el-col :span="18">
         <count />
-        <el-row class="mt-10">
-          <el-col :span="24">
-            <list-check-type />
-          </el-col>
-        </el-row>
-        <el-row class="mt-10" :gutter="10">
+        <el-row :gutter="10" class="mt-10">
           <el-col :span="10">
-            <risk-classification />
+            <annualTraining />
           </el-col>
           <el-col :span="14">
-            <checklist-check />
-          </el-col>
+            <el-card>
+              <el-row :gutter="10">
+                <el-col :span="12"><doublePreventionCheck /> </el-col>
+                <el-col :span="12">
+                  <rectificationOfHiddenDangers />
+                </el-col>
+              </el-row> </el-card
+          ></el-col>
+        </el-row>
+        <el-row class="mt-10" :gutter="10">
+          <el-col :span="12"> <trainingStatistics /> </el-col>
+          <el-col :span="12"><doublePrevention /></el-col>
         </el-row>
       </el-col>
       <el-col :span="6">
-        <el-card>
-          <announcement />
-          <calendar />
-        </el-card>
+        <info />
+        <statistics class="mt-10" />
+        <waybill />
       </el-col>
     </el-row>
   </div>
@@ -29,11 +33,19 @@
 
 <script setup>
 import Count from "./components/count.vue";
-import ListCheckType from "./components/list_check_type.vue";
-import RiskClassification from "./components/risk_classification.vue";
-import ChecklistCheck from "./components/checklist_check.vue";
-import Announcement from "./components/announcement.vue";
-import Calendar from "./components/calendar.vue";
+import annualTraining from "./components/annualTraining.vue";
+import doublePreventionCheck from "./components/doublePreventionCheck.vue";
+import rectificationOfHiddenDangers from "./components/rectificationOfHiddenDangers.vue";
+import trainingStatistics from "./components/trainingStatistics.vue";
+import doublePrevention from "./components/doublePrevention.vue";
+import info from "./components/info.vue";
+import statistics from "./components/statistics.vue";
+import waybill from "./components/waybill.vue";
+
+// import RiskClassification from "./components/risk_classification.vue";
+// import ChecklistCheck from "./components/checklist_check.vue";
+// import Announcement from "./components/announcement.vue";
+// import Calendar from "./components/calendar.vue";
 </script>
 
 <style lang="scss" scoped>