人数统计

src/router/index.js

@@ -7,13 +7,22 @@ const routes = [
   { path: "/amap", component: () => import("../components/AMap.vue") },
   // { path: "/", component: () => import("../views/Overview/index.vue") },
   {
-    path: "/", component: () => import("../views/Layout.vue"), children: [
+    path: "/",
+    component: () => import("../views/Layout.vue"),
+    children: [
       {
-        path: '', component: () => import('../views/Overview/index.vue')
+        path: "",
+        component: () => import("../views/Overview/index.vue"),
       },
-      { path: "monitor", component: () => import("../views/Monitor/index.vue") },
+      {
-      { path: "/monitor/detail", component: () => import("../views/Monitor/monitor-detail.vue") },
+        path: "monitor",
-    ]
+        component: () => import("../views/Monitor/index.vue"),
+      },
+      {
+        path: "/monitor/detail",
+        component: () => import("../views/Monitor/monitor-detail.vue"),
+      },
+    ],
   },
 ];
 
@@ -23,7 +32,7 @@ const routes = [
 const router = createRouter({
   // 4. 内部提供了 history 模式的实现。为了简单起见，我们在这里使用 hash 模式。
   history: createWebHashHistory(),
-  routes, // `routes: routes` 的缩写
+  routes,
 });
 
 export default router;

src/views/Overview/ProjectPersonCount.vue

@@ -3,36 +3,46 @@
     <div class="people-count grid grid-cols-2 gap-y-4">
       <div class="expected">
         <div>
-          <span class="num">4936</span>
+          <span class="num">{{ data.NORMALCOUNT }}</span>
           <span class="unit">人</span>
         </div>
-        <div class="desc">人员总数</div>
+        <div class="desc">昨日实际出勤人数</div>
       </div>
       <div class="actual">
         <div>
-          <span class="num">3405</span>
+          <span class="num">{{ data.ABSENTEEISMCOUNT }}</span>
           <span class="unit">人</span>
         </div>
-        <div class="desc">实时人数</div>
+        <div class="desc">昨日矿工人数</div>
       </div>
       <div class="expected">
         <div>
-          <span class="num">4800</span>
+          <span class="num">{{ data.ALLCOUNT }}</span>
           <span class="unit">人</span>
         </div>
-        <div class="desc">今日出勤人数</div>
+        <div class="desc">昨日应出席人数</div>
       </div>
       <div class="actual">
         <div>
-          <span class="num">88%</span>
+          <span class="num">{{ data.LATECOUNT }}</span>
+          <span class="unit">人</span>
         </div>
-        <div class="desc">今日出勤率</div>
+        <div class="desc">昨日迟到人数</div>
       </div>
     </div>
   </ChartContainer>
 </template>
 <script setup>
 import ChartContainer from "@/components/ChartContainer.vue";
+import { toRefs } from "vue";
+const props = defineProps({
+  data: {
+    type: Object,
+    required: true,
+    // default: {},
+  },
+});
+const { data } = toRefs(props);
 </script>
 <style lang="scss" scoped>
 .project-person-count {

src/views/Overview/ProjectTotal.vue

@@ -1,16 +1,27 @@
 <template>
   <div class="container flex items-center justify-start">
     <img class="icon" src="@/assets/polygon40@3x.png" alt="" />
-    <div class="title text-white">项目总数</div>
+    <div class="title text-white">项目总人数</div>
     <div class="counting-board flex justify-between">
-      <div class="num">1</div>
+      <div class="num" v-for="item in countChars" :key="item">{{ item }}</div>
-      <div class="num">0</div>
-      <div class="num">0</div>
-      <div class="num">0</div>
     </div>
   </div>
 </template>
-<script setup></script>
+<script setup>
+import { ref, toRefs } from "vue";
+const props = defineProps({
+  data: {
+    type: Object,
+    required: true,
+  },
+});
+const { data } = toRefs(props);
+const countChars = ref([]);
+countChars.value = `${parseInt(data.value.PROJECTCOUNT)}`.split("");
+for (let i = countChars.value.length; i < 4; i++) {
+  countChars.value.unshift("0");
+}
+</script>
 <style lang="scss" scoped>
 .container {
   width: 465px;

src/views/Overview/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="wrap flex justify-between">
     <div class="col-1 flex flex-col">
-      <ProjectPersonCount />
+      <ProjectPersonCount :data="projectPersonCount" />
       <SecuritySituation class="security-situation" />
       <QualitySituation class="quality-situation" />
     </div>
@@ -10,7 +10,7 @@
       <Gantt />
     </div>
     <div class="col-3">
-      <ProjectTotal class="project-total" />
+      <ProjectTotal class="project-total" :data="projectPersonCount" />
       <ProjectDetail class="project-detail" />
     </div>
     <!-- <div class="row-1 flex justify-between">
@@ -29,7 +29,7 @@
   </div>
 </template>
 <script setup name="Overview">
-import { reactive } from "vue";
+import { reactive, toRefs } from "vue";
 import Map from "./Map.vue";
 import SecuritySituation from "./SecuritySituation.vue";
 import QualitySituation from "./QualitySituation.vue";
@@ -37,11 +37,28 @@ import ProjectTotal from "./ProjectTotal.vue";
 import ProjectDetail from "./ProjectDetail.vue";
 import ProjectPersonCount from "./ProjectPersonCount.vue";
 import Gantt from "./Gantt.vue";
+import axios from "axios";
 
-const config1 = reactive({
+// const config1 = reactive({
-  number: [100],
+//   number: [100],
-  content: "{nt}个",
+//   content: "{nt}个",
+// });
+const data = reactive({
+  projectPersonCount: {},
 });
+const { projectPersonCount } = toRefs(data);
+const loadData = async () => {
+  // const resp = await axios.get("_________url______");
+  const resp = {
+    NORMALCOUNT: 0.0,
+    PROJECTCOUNT: 3,
+    ABSENTEEISMCOUNT: 3.0,
+    ALLCOUNT: 3.0,
+    LATECOUNT: 0.0,
+  };
+  projectPersonCount.value = resp;
+};
+loadData();
 </script>
 
 <style lang="scss" scoped>