新增标准节租金等功能

src/views/tower/machine/index.vue

@@ -1,5 +1,54 @@
 <template>
   <div class="page">
+    <a-card title="设备数据">
+      <div class="count">
+        <div class="btn">
+          <a-divider type="vertical" class="divider" />
+          <div
+            @click="onTab(undefined)"
+            :class="active == undefined ? 'active' : ''"
+          >
+            {{ `全部设备(${equipmentData.totalNum})` }}
+          </div>
+        </div>
+        <div class="btn">
+          <a-divider type="vertical" class="divider" />
+          <div @click="onTab(0)" :class="active == 0 ? 'active' : ''">
+            {{ `闲置(${equipmentData.idleNum})` }}
+          </div>
+        </div>
+        <div class="btn">
+          <a-divider type="vertical" class="divider" />
+          <div @click="onTab(1)" :class="active == 1 ? 'active' : ''">
+            {{ `已达报废年限(${equipmentData.scrapNum})` }}
+          </div>
+        </div>
+        <div class="btn">
+          <a-divider type="vertical" class="divider" />
+          <div @click="onTab(2)" :class="active == 2 ? 'active' : ''">
+            {{ `已注销(${equipmentData.totalNum2})` }}
+          </div>
+        </div>
+        <div class="btn">
+          <a-divider type="vertical" class="divider" />
+          <div @click="onTab(3)" :class="active == 3 ? 'active' : ''">
+            {{ `已转卖(${equipmentData.totalNum3})` }}
+          </div>
+        </div>
+        <div class="btn">
+          <a-divider type="vertical" class="divider" />
+          <div @click="onTab(4)" :class="active == 4 ? 'active' : ''">
+            {{ `在用(${equipmentData.totalNum4})` }}
+          </div>
+        </div>
+        <div class="btn">
+          <a-divider type="vertical" class="divider" />
+          <div @click="onTab(5)" :class="active == 5 ? 'active' : ''">
+            {{ `已停工(${equipmentData.totalNum5})` }}
+          </div>
+        </div>
+      </div>
+    </a-card>
     <div class="ele-body">
       <a-card :bordered="false">
         <!-- 表格 -->
@@ -52,7 +101,7 @@
 </template>
 
 <script lang="ts" setup>
-  import { createVNode, ref } from 'vue';
+  import { createVNode, reactive, ref } from 'vue';
   import { message, Modal } from 'ant-design-vue';
   import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
   import type { EleProTable } from 'ele-admin-pro';
@@ -66,9 +115,11 @@
   import {
     pageTowerEquipment,
     removeBatchTowerEquipment,
-    statusBatchTowerEquipment, updateBatchTowerEquipment,
+    towerEquipmentData,
+    // statusBatchTowerEquipment,
+    updateBatchTowerEquipment,
     updateTowerEquipment
-  } from "@/api/tower/equipment";
+  } from '@/api/tower/equipment';
   import {
     TowerEquipment,
     TowerEquipmentParam
@@ -96,7 +147,8 @@
       title: '设备状态',
       dataIndex: 'status',
       key: 'status',
-      customRender: ({ text }) => ['闲置', '报废', '注销', '转卖', '在用', '场地'][text]
+      customRender: ({ text }) =>
+        ['闲置', '报废', '注销', '转卖', '在用', '场地'][text]
     },
     {
       title: '设备名称',
@@ -147,6 +199,28 @@
   // 是否显示编辑弹窗
   const showEdit = ref(false);
 
+  const active = ref<any>(undefined);
+
+  let equipmentData = reactive({
+    totalNum: 0,
+    idleNum: 0,
+    scrapNum: 0,
+    totalNum2: 0,
+    totalNum3: 0,
+    totalNum4: 0,
+    totalNum5: 0
+  });
+
+  const getData = async () => {
+    const res = await towerEquipmentData();
+    for (let key in equipmentData) equipmentData[key] = res[key];
+  };
+
+  const onTab = (type: any) => {
+    active.value = type;
+    reload({ status: active.value });
+  };
+
   // 表格数据源
   const datasource: DatasourceFunction = ({
     page,
@@ -249,7 +323,7 @@
       }
     };
   };
-
+  getData();
   reload();
 </script>
 
@@ -278,4 +352,27 @@
   .comments {
     max-width: 200px;
   }
+  .count {
+    display: flex;
+    .btn {
+      margin: 0 12px;
+      padding: 6px 18px;
+      background-color: #f3f3f3;
+      border-radius: 4px;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      font-size: 16px;
+      .divider {
+        width: 4px;
+        height: 15px;
+        border-radius: 8px;
+        margin-right: 8px;
+        background-color: #16a90b;
+      }
+      .active {
+        color: #16a90b;
+      }
+    }
+  }
 </style>