From ac62778a2fdaea68fb896feaebc7d2eeb42d30bd Mon Sep 17 00:00:00 2001
From: blp <2962632571@qq.com>
Date: Mon, 30 Jan 2023 18:12:42 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=A2=9E=E5=8A=A0=E7=89=A9=E8=81=94?=
 =?UTF-8?q?=E5=8D=A1=E5=88=97=E8=A1=A8=E5=8D=A1=E7=89=87=E3=80=81=E5=AF=BC?=
 =?UTF-8?q?=E5=87=BA=E3=80=81=E5=AF=BC=E5=85=A5=E3=80=81=E7=BB=91=E5=AE=9A?=
 =?UTF-8?q?=E8=AE=BE=E5=A4=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/images/iot-card/iot-card-bg.png        | Bin 0 -> 3944 bytes
 src/api/iot-card/cardManagement.ts            |  35 ++-
 src/components/CardBox/index.vue              |  11 +
 src/utils/utils.ts                            |  11 +
 .../iot-card/CardManagement/BindDevice.vue    | 155 +++++++++++++
 src/views/iot-card/CardManagement/Export.vue  |  65 ++++++
 src/views/iot-card/CardManagement/Import.vue  | 157 +++++++++++++
 src/views/iot-card/CardManagement/index.vue   | 210 +++++++++++++++++-
 src/views/iot-card/CardManagement/typing.d.ts |  20 ++
 9 files changed, 657 insertions(+), 7 deletions(-)
 create mode 100644 public/images/iot-card/iot-card-bg.png
 create mode 100644 src/views/iot-card/CardManagement/BindDevice.vue
 create mode 100644 src/views/iot-card/CardManagement/Export.vue
 create mode 100644 src/views/iot-card/CardManagement/Import.vue
 create mode 100644 src/views/iot-card/CardManagement/typing.d.ts

diff --git a/public/images/iot-card/iot-card-bg.png b/public/images/iot-card/iot-card-bg.png
new file mode 100644
index 0000000000000000000000000000000000000000..7b47b0e0df202175dc94d5e5ff6b474c33695141
GIT binary patch
literal 3944
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
CmVa0P

literal 0
HcmV?d00001

diff --git a/src/api/iot-card/cardManagement.ts b/src/api/iot-card/cardManagement.ts
index 390685e0..51a77294 100644
--- a/src/api/iot-card/cardManagement.ts
+++ b/src/api/iot-card/cardManagement.ts
@@ -64,4 +64,37 @@ export const sync = () => server.get(`/network/card/state/_sync`);
  * 批量删除物联卡
  * @param data
  */
-export const removeCards = (data: any) => server.post(`/network/card/batch/_delete`, data);
\ No newline at end of file
+export const removeCards = (data: any) => server.post(`/network/card/batch/_delete`, data);
+
+/**
+ * 解绑设备
+ * @param cardId
+ */
+export const unbind = (cardId: string) => server.get(`/network/card/${cardId}/_unbind`);
+
+/**
+ * 分页查询未绑定设备列表
+ * @param data
+*/
+export const queryUnbounded = (data: any) => server.post(`/network/card/unbounded/device/_query`, data);
+
+/**
+ * 绑定设备
+ * @param cardId
+ * @param deviceId 选择的设备id
+ */
+export const bind = (cardId: string | any, deviceId: string) => server.get(`/network/card/${cardId}/${deviceId}/_bind`);
+
+/**
+ * 导入物联卡实例
+ * @param configId 对接平台id
+ * @param params
+ */
+export const _import = (configId: any, params: any) => server.get(`/network/card/${configId}/_import`, params);
+
+/**
+ * 根据id批量导出
+ * @param format 类型 xlsx、csv
+ * @param params
+ */
+export const _export = (format: string, data: any) => server.post(`/network/card/download.${format}/_query`, data, 'blob');
\ No newline at end of file
diff --git a/src/components/CardBox/index.vue b/src/components/CardBox/index.vue
index b3449223..cb958ce7 100644
--- a/src/components/CardBox/index.vue
+++ b/src/components/CardBox/index.vue
@@ -232,6 +232,17 @@ const handleClick = () => {
             :deep(.card-item-content-title) {
                 cursor: pointer;
             }
+
+            :deep(.card-item-heard-name) {
+                font-weight: 700;
+                font-size: 16px;
+                margin-bottom: 12px;
+            }
+
+            :deep(.card-item-content-text) {
+                color: rgba(0, 0, 0, 0.75);
+                font-size: 12px;
+            }
         }
 
         .card-mask {
diff --git a/src/utils/utils.ts b/src/utils/utils.ts
index 239ee90f..d9d3e290 100644
--- a/src/utils/utils.ts
+++ b/src/utils/utils.ts
@@ -54,6 +54,17 @@ export const downloadObject = (record: Record<string, any>, fileName: string, fo
   formElement.submit();
   document.body.removeChild(formElement);
 };
+
+export const downloadFileByUrl = (url: string, name: string, type: string) => {
+  const downNode = document.createElement('a');
+  downNode.style.display = 'none';
+  downNode.download = `${name}.${type}`;
+  downNode.href = url;
+  document.body.appendChild(downNode);
+  downNode.click();
+  document.body.removeChild(downNode);
+};
+
 // 是否不是community版本
 export const isNoCommunity = !(localStorage.getItem(SystemConst.VERSION_CODE) === 'community');
 
diff --git a/src/views/iot-card/CardManagement/BindDevice.vue b/src/views/iot-card/CardManagement/BindDevice.vue
new file mode 100644
index 00000000..cdf48031
--- /dev/null
+++ b/src/views/iot-card/CardManagement/BindDevice.vue
@@ -0,0 +1,155 @@
+<!-- 绑定设备 -->
+<template>
+    <a-modal
+        :maskClosable="false"
+        width="1100px"
+        :visible="true"
+        title="选择设备"
+        @ok="handleOk"
+        @cancel="handleCancel"
+        :confirmLoading="btnLoading"
+    >
+        <div style="margin-top: 10px">
+            <Search
+                :columns="columns"
+                target="iot-card-management-search"
+                @search="handleSearch"
+            />
+            <JTable
+                ref="bindDeviceRef"
+                :columns="columns"
+                :request="queryUnbounded"
+                :defaultParams="{
+                    sorts: [{ name: 'createTime', order: 'desc' }],
+                }"
+                :rowSelection="{
+                    type: 'radio',
+                    selectedRowKeys: _selectedRowKeys,
+                    onSelect: onSelectChange,
+                }"
+                @cancelSelect="cancelSelect"
+                :params="params"
+            >
+                <template #registryTime="slotProps">
+                    {{
+                        slotProps.registryTime
+                            ? moment(slotProps.registryTime).format(
+                                  'YYYY-MM-DD HH:mm:ss',
+                              )
+                            : ''
+                    }}
+                </template>
+                <template #state="slotProps">
+                    <a-badge
+                        :text="slotProps.state.text"
+                        :status="statusMap.get(slotProps.state.value)"
+                    />
+                </template>
+            </JTable>
+        </div>
+    </a-modal>
+</template>
+
+<script setup lang="ts">
+import { queryUnbounded, bind } from '@/api/iot-card/cardManagement';
+import moment from 'moment';
+import { message } from 'ant-design-vue';
+
+const emit = defineEmits(['change']);
+
+const props = defineProps({
+    cardId: {
+        type: String,
+    },
+});
+
+const bindDeviceRef = ref<Record<string, any>>({});
+const params = ref<Record<string, any>>({});
+const _selectedRowKeys = ref<string[]>([]);
+const btnLoading = ref<boolean>(false);
+
+const statusMap = new Map();
+statusMap.set('online', 'processing');
+statusMap.set('offline', 'error');
+statusMap.set('notActive', 'warning');
+
+const columns = [
+    {
+        title: 'ID',
+        dataIndex: 'id',
+        key: 'id',
+        ellipsis: true,
+        fixed: 'left',
+        search: {
+            type: 'string',
+        },
+    },
+    {
+        title: '设备名称',
+        dataIndex: 'name',
+        key: 'name',
+        ellipsis: true,
+        search: {
+            type: 'string',
+        },
+    },
+    {
+        title: '注册时间',
+        dataIndex: 'registryTime',
+        key: 'registryTime',
+        scopedSlots: true,
+        search: {
+            type: 'date',
+        },
+        // sorter: true,
+    },
+    {
+        title: '状态',
+        dataIndex: 'state',
+        key: 'state',
+        scopedSlots: true,
+        search: {
+            type: 'select',
+            options: [
+                { label: '禁用', value: 'notActive' },
+                { label: '离线', value: 'offline' },
+                { label: '在线', value: 'online' },
+            ],
+        },
+        // filterMultiple: false,
+    },
+];
+
+const handleSearch = (params: any) => {
+    console.log(params);
+    params.value = params;
+};
+
+const onSelectChange = (record: any) => {
+    _selectedRowKeys.value = [record.id];
+};
+
+const cancelSelect = () => {
+    _selectedRowKeys.value = [];
+};
+
+const handleOk = () => {
+    btnLoading.value = true;
+    bind(props.cardId, _selectedRowKeys.value[0])
+        .then((resp: any) => {
+            if (resp.status === 200) {
+                message.success('操作成功');
+                emit('change', true);
+            }
+        })
+        .finally(() => {
+            btnLoading.value = false;
+        });
+};
+
+const handleCancel = () => {
+    emit('change', false);
+};
+</script>
+
+<style scoped lang="less"></style>
diff --git a/src/views/iot-card/CardManagement/Export.vue b/src/views/iot-card/CardManagement/Export.vue
new file mode 100644
index 00000000..5f20c55f
--- /dev/null
+++ b/src/views/iot-card/CardManagement/Export.vue
@@ -0,0 +1,65 @@
+<template>
+    <!-- 导入 -->
+    <a-modal
+        :maskClosable="false"
+        :visible="true"
+        title="导出"
+        @ok="handleOk"
+        @cancel="handleCancel"
+    >
+        <div style="margin-top: 10px">
+            <a-space>
+                <span>文件格式：</span>
+                <a-radio-group
+                    v-model:value="type"
+                    placeholder="请选择文件格式"
+                    button-style="solid"
+                >
+                    <a-radio-button value="xlsx">xlsx</a-radio-button>
+                    <a-radio-button value="csv">csv</a-radio-button>
+                </a-radio-group>
+            </a-space>
+        </div>
+    </a-modal>
+</template>
+
+<script setup lang="ts">
+import moment from 'moment';
+import { _export } from '@/api/iot-card/cardManagement';
+import { downloadFileByUrl } from '@/utils/utils';
+
+const emit = defineEmits(['close']);
+
+const props = defineProps({
+    data: {
+        type: Object,
+        default: undefined,
+    },
+});
+
+const type = ref<string>('xlsx');
+
+const handleOk = () => {
+    console.log(props.data);
+    _export(type.value, props.data).then((res: any) => {
+        if (res) {
+            const blob = new Blob([res.data], { type: type.value });
+            const url = URL.createObjectURL(blob);
+            downloadFileByUrl(
+                url,
+                `物联卡管理-${moment(new Date()).format(
+                    'YYYY/MM/DD HH:mm:ss',
+                )}`,
+                type.value,
+            );
+            emit('close');
+        }
+    });
+};
+
+const handleCancel = () => {
+    emit('close');
+};
+</script>
+
+<style scoped lang="less"></style>
diff --git a/src/views/iot-card/CardManagement/Import.vue b/src/views/iot-card/CardManagement/Import.vue
new file mode 100644
index 00000000..0ca75bca
--- /dev/null
+++ b/src/views/iot-card/CardManagement/Import.vue
@@ -0,0 +1,157 @@
+<template>
+    <!-- 导入 -->
+    <a-modal
+        :maskClosable="false"
+        :visible="true"
+        title="导入"
+        @ok="handleCancel"
+        @cancel="handleCancel"
+    >
+        <div style="margin-top: 10px">
+            <a-form :layout="'vertical'">
+                <a-form-item label="平台对接" required>
+                    <a-select
+                        showSearch
+                        v-model:value="modelRef.configId"
+                        :options="configList"
+                        placeholder="请选择平台对接"
+                    >
+                    </a-select>
+                </a-form-item>
+
+                <a-form-item v-if="modelRef.configId" label="文件格式">
+                    <a-radio-group
+                        button-style="solid"
+                        v-model:value="modelRef.fileType"
+                        placeholder="请选择文件格式"
+                    >
+                        <a-radio-button value="xlsx">xlsx</a-radio-button>
+                        <a-radio-button value="csv">csv</a-radio-button>
+                    </a-radio-group>
+                </a-form-item>
+
+                <a-form-item label="文件上传" v-if="modelRef.configId">
+                    <a-upload
+                        v-model:fileList="modelRef.upload"
+                        name="file"
+                        :action="FILE_UPLOAD"
+                        :headers="{
+                            'X-Access-Token': LocalStore.get(TOKEN_KEY),
+                        }"
+                        :accept="`.${modelRef.fileType || 'xlsx'}`"
+                        :showUploadList="false"
+                        @change="fileChange"
+                    >
+                        <a-button :loading="loading">
+                            <template #icon>
+                                <AIcon type="UploadOutlined" />
+                            </template>
+                            文件上传
+                        </a-button>
+                    </a-upload>
+                </a-form-item>
+                <a-form-item v-if="modelRef.configId" label="下载模板">
+                    <a-space>
+                        <a-button icon="file" @click="downFileFn('xlsx')">
+                            .xlsx
+                        </a-button>
+                        <a-button icon="file" @click="downFileFn('csv')">
+                            .csv
+                        </a-button>
+                    </a-space>
+                </a-form-item>
+                <div v-if="totalCount">
+                    <a-icon class="check-num" type="check" /> 已完成 总数量
+                    <span class="check-num">{{ totalCount }}</span>
+                </div>
+                <div v-if="errCount">
+                    <a-icon class="check-num" style="color: red" type="close" />
+                    失败 总数量
+                    <span class="check-num">{{ errCount }}</span>
+                </div>
+            </a-form>
+        </div>
+    </a-modal>
+</template>
+
+<script setup lang="ts">
+import { FILE_UPLOAD } from '@/api/comm';
+import { BASE_API_PATH, TOKEN_KEY } from '@/utils/variable';
+import { LocalStore } from '@/utils/comm';
+import { downloadFile } from '@/utils/utils';
+import { queryPlatformNoPage, _import } from '@/api/iot-card/cardManagement';
+import { message } from 'ant-design-vue';
+
+const emit = defineEmits(['close']);
+
+const configList = ref<Record<string, any>[]>([]);
+const loading = ref<boolean>(false);
+const totalCount = ref<number>(0);
+const errCount = ref<number>(0);
+
+const modelRef = reactive({
+    configId: undefined,
+    upload: [],
+    fileType: 'xlsx',
+});
+
+const getConfig = async () => {
+    const resp: any = await queryPlatformNoPage({
+        paging: false,
+        terms: [
+            {
+                terms: [
+                    {
+                        column: 'state',
+                        termType: 'eq',
+                        value: 'enabled',
+                        type: 'and',
+                    },
+                ],
+            },
+        ],
+    });
+    configList.value = resp.result.map((item: any) => {
+        return { key: item.id, label: item.name, value: item.id };
+    });
+};
+
+const fileChange = (info: any) => {
+    loading.value = true;
+    if (info.file.status === 'done') {
+        const r = info.file.response || { result: '' };
+        _import(modelRef.configId, { fileUrl: r.result })
+            .then((resp: any) => {
+                totalCount.value = resp.result.total;
+                message.success('导入成功');
+            })
+            .catch((err) => {
+                message.error(err.response.data.message || '导入失败');
+            })
+            .finally(() => {
+                loading.value = false;
+            });
+    }
+};
+
+const downFileFn = (type: string) => {
+    const url = `${BASE_API_PATH}/network/card/template.${type}`;
+    downloadFile(url);
+};
+
+const handleCancel = () => {
+    totalCount.value = 0;
+    errCount.value = 0;
+    modelRef.configId = undefined;
+    emit('close', true);
+};
+
+getConfig();
+</script>
+
+<style scoped lang="less">
+.check-num {
+    margin: 6px;
+    color: @primary-color;
+}
+</style>
diff --git a/src/views/iot-card/CardManagement/index.vue b/src/views/iot-card/CardManagement/index.vue
index 6ab563d4..3cf85c36 100644
--- a/src/views/iot-card/CardManagement/index.vue
+++ b/src/views/iot-card/CardManagement/index.vue
@@ -103,6 +103,113 @@
                     </a-dropdown>
                 </a-space>
             </template>
+            <template #card="slotProps">
+                <CardBox
+                    :value="slotProps"
+                    @click="handleClick"
+                    :actions="getActions(slotProps, 'card')"
+                    v-bind="slotProps"
+                    :active="_selectedRowKeys.includes(slotProps.id)"
+                    :status="slotProps.cardStateType.value"
+                    :statusText="slotProps.cardStateType.text"
+                    :statusNames="{
+                        using: 'success',
+                        toBeActivated: 'default',
+                        deactivate: 'error',
+                    }"
+                >
+                    <template #img>
+                        <slot name="img">
+                            <img :src="getImage('/iot-card/iot-card-bg.png')" />
+                        </slot>
+                    </template>
+                    <template #content>
+                        <h3
+                            class="card-item-content-title"
+                            @click.stop="handleView(slotProps.id)"
+                        >
+                            {{ slotProps.id }}
+                        </h3>
+                        <a-row>
+                            <a-col :span="8">
+                                <div class="card-item-content-text">
+                                    平台对接
+                                </div>
+                                <div>{{ slotProps.platformConfigName }}</div>
+                            </a-col>
+                            <a-col :span="6">
+                                <div class="card-item-content-text">类型</div>
+                                <div>{{ slotProps.cardType.text }}</div>
+                            </a-col>
+                            <a-col :span="6">
+                                <div class="card-item-content-text">提醒</div>
+                                <!-- <div>{{ slotProps.cardType.text }}</div> -->
+                            </a-col>
+                        </a-row>
+                        <a-divider style="margin: 12px 0" />
+                        <div v-if="slotProps.usedFlow === 0">
+                            <span class="flow-text">
+                                {{ slotProps.totalFlow }}
+                            </span>
+                            <span class="card-item-content-text"> M 使用流量</span>
+                        </div>
+                        <div v-else>
+                            <div class="progress-text">
+                                <div>{{ slotProps.totalFlow - slotProps.usedFlow }} %</div>
+                                <div class="card-item-content-text">
+                                    总共 {{ slotProps.totalFlow }} M
+                                </div>
+                            </div>
+                            <a-progress
+                                :strokeColor="'#ADC6FF'"
+                                :showInfo="false"
+                                :percent="slotProps.totalFlow - slotProps.usedFlow"
+                            />
+                        </div>
+                    </template>
+                    <template #actions="item">
+                        <a-tooltip
+                            v-bind="item.tooltip"
+                            :title="item.disabled && item.tooltip.title"
+                        >
+                            <a-popconfirm
+                                v-if="item.popConfirm"
+                                v-bind="item.popConfirm"
+                                :disabled="item.disabled"
+                            >
+                                <a-button :disabled="item.disabled">
+                                    <AIcon
+                                        type="DeleteOutlined"
+                                        v-if="item.key === 'delete'"
+                                    />
+                                    <template v-else>
+                                        <AIcon :type="item.icon" />
+                                        <span>{{ item.text }}</span>
+                                    </template>
+                                </a-button>
+                            </a-popconfirm>
+                            <template v-else>
+                                <a-button
+                                    :disabled="item.disabled"
+                                    @click="item.onClick"
+                                >
+                                    <AIcon
+                                        type="DeleteOutlined"
+                                        v-if="item.key === 'delete'"
+                                    />
+                                    <template v-else>
+                                        <AIcon :type="item.icon" />
+                                        <span>{{ item.text }}</span>
+                                    </template>
+                                </a-button>
+                            </template>
+                        </a-tooltip>
+                    </template>
+                </CardBox>
+            </template>
+            <template #deviceId="slotProps">
+                {{ slotProps.deviceName }}
+            </template>
             <template #totalFlow="slotProps">
                 <div>
                     {{
@@ -157,7 +264,7 @@
             <template #action="slotProps">
                 <a-space :size="16">
                     <a-tooltip
-                        v-for="i in getActions(slotProps)"
+                        v-for="i in getActions(slotProps, 'table')"
                         :key="i.key"
                         v-bind="i.tooltip"
                     >
@@ -186,6 +293,20 @@
                 </a-space>
             </template>
         </JTable>
+        <!-- 批量导入 -->
+        <Import v-if="importVisible" @close="importVisible = false" />
+        <!-- 批量导出 -->
+        <Export
+            v-if="exportVisible"
+            @close="exportVisible = false"
+            :data="_selectedRowKeys"
+        />
+        <!-- 绑定设备 -->
+        <BindDevice
+            v-if="bindDeviceVisible"
+            :cardId="cardId"
+            @change="bindDevice"
+        />
     </div>
 </template>
 
@@ -204,16 +325,25 @@ import {
     resumptionBatch,
     sync,
     removeCards,
+    unbind,
 } from '@/api/iot-card/cardManagement';
 import { message } from 'ant-design-vue';
+import type { CardManagement } from './typing';
+import { getImage } from '@/utils/comm';
+import BindDevice from './BindDevice.vue';
+import Import from './Import.vue';
+import Export from './Export.vue';
 
 const cardManageRef = ref<Record<string, any>>({});
 const params = ref<Record<string, any>>({});
 const _selectedRowKeys = ref<string[]>([]);
 const _selectedRow = ref<any[]>([]);
+const bindDeviceVisible = ref<boolean>(false);
 const visible = ref<boolean>(false);
 const exportVisible = ref<boolean>(false);
 const importVisible = ref<boolean>(false);
+const cardId = ref<any>();
+const current = ref<Partial<CardManagement>>({});
 
 const columns = [
     {
@@ -239,9 +369,10 @@ const columns = [
     },
     {
         title: '绑定设备',
-        dataIndex: 'deviceName',
-        key: 'deviceName',
+        dataIndex: 'deviceId',
+        key: 'deviceId',
         ellipsis: true,
+        scopedSlots: true,
         width: 200,
     },
     {
@@ -360,7 +491,10 @@ const columns = [
     },
 ];
 
-const getActions = (data: Partial<Record<string, any>>): ActionsType[] => {
+const getActions = (
+    data: Partial<Record<string, any>>,
+    type: 'card' | 'table',
+): ActionsType[] => {
     if (!data) return [];
     return [
         {
@@ -386,6 +520,25 @@ const getActions = (data: Partial<Record<string, any>>): ActionsType[] => {
                 title: data.deviceId ? '解绑设备' : '绑定设备',
             },
             icon: data.deviceId ? 'DisconnectOutlined' : 'LinkOutlined',
+            popConfirm: data.deviceId
+                ? {
+                      title: '确认解绑设备？',
+                      onConfirm: async () => {
+                          unbind(data.id).then((resp: any) => {
+                              if (resp.status === 200) {
+                                  message.success('操作成功');
+                                  cardManageRef.value?.reload();
+                              }
+                          });
+                      },
+                  }
+                : undefined,
+            onClick: () => {
+                if (!data.deviceId) {
+                    bindDeviceVisible.value = true;
+                    cardId.value = data.id;
+                }
+            },
         },
         {
             key: 'activation',
@@ -479,11 +632,38 @@ const cancelSelect = () => {
     _selectedRowKeys.value = [];
 };
 
+const handleClick = (dt: any) => {
+    if (_selectedRowKeys.value.includes(dt.id)) {
+        const _index = _selectedRowKeys.value.findIndex((i) => i === dt.id);
+        _selectedRowKeys.value.splice(_index, 1);
+    } else {
+        _selectedRowKeys.value = [..._selectedRowKeys.value, dt.id];
+    }
+};
+
+/**
+ * 查看
+ */
+const handleView = (id: string) => {
+    message.warn(id + '暂未开发');
+};
+
 /**
  * 新增
  */
 const handleAdd = () => {};
 
+/**
+ * 绑定设备关闭窗口
+ */
+const bindDevice = (val: boolean) => {
+    bindDeviceVisible.value = false;
+    cardId.value = '';
+    if (val) {
+        cardManageRef.value?.reload();
+    }
+};
+
 /**
  * 批量激活
  */
@@ -565,7 +745,25 @@ const handelRemove = async () => {
 </script>
 
 <style scoped lang="less">
-.search {
-    width: calc(100% - 330px);
+.page-container {
+    .search {
+        width: calc(100% - 330px);
+    }
+    .flow-text {
+        font-size: 20px;
+        font-weight: 600;
+    }
+
+    .progress-text {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+    }
+    :deep(.ant-progress-inner) {
+        border-radius: 0px;
+    }
+    :deep(.ant-progress-bg) {
+        border-radius: 0px;
+    }
 }
 </style>
diff --git a/src/views/iot-card/CardManagement/typing.d.ts b/src/views/iot-card/CardManagement/typing.d.ts
new file mode 100644
index 00000000..b661a226
--- /dev/null
+++ b/src/views/iot-card/CardManagement/typing.d.ts
@@ -0,0 +1,20 @@
+export type CardManagement = {
+  id: string;
+  name: string;
+  iccId: string;
+  deviceId: string;
+  deviceName: string;
+  platformConfigId: string;
+  operatorName: string;
+  cardType: any;
+  totalFlow: number;
+  usedFlow: number;
+  residualFlow: number;
+  activationDate: string;
+  updateTime: string;
+  cardStateType: any;
+  cardState: any;
+  describe: string;
+  platformConfigName: string;
+  operatorPlatformType: any;
+};