From 4fc5d5315f83ec1f4a315f36045a24b69beb25e3 Mon Sep 17 00:00:00 2001
From: blp <2962632571@qq.com>
Date: Tue, 31 Jan 2023 16:12:49 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E7=89=A9=E8=81=94=E5=8D=A1=E7=AE=A1?=
 =?UTF-8?q?=E7=90=86=E6=9F=A5=E7=9C=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/iot-card/cardManagement.ts            |   8 +-
 src/router/menu.ts                            |   4 +
 .../iot-card/CardManagement/Detail/index.vue  | 167 ++++++++++++++++++
 src/views/iot-card/CardManagement/index.vue   |  10 ++
 4 files changed, 188 insertions(+), 1 deletion(-)
 create mode 100644 src/views/iot-card/CardManagement/Detail/index.vue

diff --git a/src/api/iot-card/cardManagement.ts b/src/api/iot-card/cardManagement.ts
index 34aee292..768aba60 100644
--- a/src/api/iot-card/cardManagement.ts
+++ b/src/api/iot-card/cardManagement.ts
@@ -115,4 +115,10 @@ export const add = (data: any) => server.patch(`/network/card`, data);
  * 编辑物联卡
  * @param data
  */
-export const edit = (data: any) => server.put(`/network/card/${data.id}`, data);
\ No newline at end of file
+export const edit = (data: any) => server.put(`/network/card/${data.id}`, data);
+
+/**
+ * 根据id查看详情
+ * @param id
+ */
+export const queryDetail = (id: any) => server.get(`/network/card/${id}`);
\ No newline at end of file
diff --git a/src/router/menu.ts b/src/router/menu.ts
index 234bcabf..f7cddb58 100644
--- a/src/router/menu.ts
+++ b/src/router/menu.ts
@@ -145,6 +145,10 @@ export default [
       path: '/iot-card/CardManagement',
       component: () => import('@/views/iot-card/CardManagement/index.vue')
     },
+    {
+      path: '/iot-card/CardManagement/Detail',
+      component: () => import('@/views/iot-card/CardManagement/Detail/index.vue')
+    },
     // 北向输出
     {
         path: '/northbound/DuerOS',
diff --git a/src/views/iot-card/CardManagement/Detail/index.vue b/src/views/iot-card/CardManagement/Detail/index.vue
new file mode 100644
index 00000000..3e1a330d
--- /dev/null
+++ b/src/views/iot-card/CardManagement/Detail/index.vue
@@ -0,0 +1,167 @@
+<!-- 物联卡查看 -->
+<template>
+    <div class="page-container">
+        <!-- 新增、编辑 -->
+        <Save
+            v-if="visible"
+            :type="saveType"
+            :data="current"
+            @change="saveChange"
+        />
+        <a-row :gutter="[24, 24]">
+            <a-col :span="24">
+                <a-card>
+                    <a-descriptions size="small" :column="3" bordered>
+                        <template #title>
+                            <span key="1">基本信息</span>
+                            <a-button
+                                key="2"
+                                type="link"
+                                @click="
+                                    () => {
+                                        visible = true;
+                                        current = detail;
+                                        saveType = 'edit';
+                                    }
+                                "
+                            >
+                                <AIcon type="EditOutlined"></AIcon>
+                                编辑
+                            </a-button>
+                        </template>
+
+                        <a-descriptions-item label="卡号">{{
+                            detail.id
+                        }}</a-descriptions-item>
+                        <a-descriptions-item label="ICCID">{{
+                            detail.iccId
+                        }}</a-descriptions-item>
+                        <a-descriptions-item label="绑定设备">{{
+                            detail.deviceName
+                        }}</a-descriptions-item>
+                        <a-descriptions-item label="平台类型">{{
+                            detail.operatorPlatformType?.text
+                        }}</a-descriptions-item>
+                        <a-descriptions-item label="平台名称">{{
+                            detail.platformConfigName
+                        }}</a-descriptions-item>
+                        <a-descriptions-item label="运营商">{{
+                            detail.operatorName
+                        }}</a-descriptions-item>
+                        <a-descriptions-item label="类型">{{
+                            detail.cardType?.text
+                        }}</a-descriptions-item>
+                        <a-descriptions-item label="激活日期">{{
+                            detail.activationDate
+                                ? moment(detail.activationDate).format(
+                                      'YYYY-MM-DD HH:mm:ss',
+                                  )
+                                : ''
+                        }}</a-descriptions-item>
+                        <a-descriptions-item label="更新时间">{{
+                            detail.updateTime
+                                ? moment(detail.updateTime).format(
+                                      'YYYY-MM-DD HH:mm:ss',
+                                  )
+                                : ''
+                        }}</a-descriptions-item>
+                        <a-descriptions-item label="总流量">{{
+                            detail.totalFlow
+                                ? detail.totalFlow.toFixed(2) + ' M'
+                                : ''
+                        }}</a-descriptions-item>
+                        <a-descriptions-item label="使用流量">{{
+                            detail.usedFlow
+                                ? detail.usedFlow.toFixed(2) + ' M'
+                                : ''
+                        }}</a-descriptions-item>
+                        <a-descriptions-item label="剩余流量">{{
+                            detail.residualFlow
+                                ? detail.residualFlow.toFixed(2) + ' M'
+                                : ''
+                        }}</a-descriptions-item>
+                        <a-descriptions-item label="状态">{{
+                            detail?.cardState?.text
+                        }}</a-descriptions-item>
+                        <a-descriptions-item label="说明">{{
+                            detail?.describe
+                        }}</a-descriptions-item>
+                    </a-descriptions>
+                </a-card>
+            </a-col>
+            <a-col :span="24">
+                <!-- 流量统计 -->
+                <a-row :gutter="40">
+                    <a-col :span="16">
+                        <div class="card">
+                            <Guide title="流量统计">
+                                <template #extra></template>
+                            </Guide>
+                            <LineChart
+                                :showX="true"
+                                :showY="true"
+                                style="min-height: 450px"
+                                :chartData="flowData"
+                            />
+                        </div>
+                    </a-col>
+                    <a-col :span="8">
+                        <div class="card">
+                            <a-row :gutter="20">
+                                <a-col :span="24">
+                                    <Guide title="数据统计" />
+                                </a-col>
+                            </a-row>
+                        </div>
+                    </a-col>
+                </a-row>
+            </a-col>
+        </a-row>
+    </div>
+</template>
+
+<script setup lang="ts">
+import moment from 'moment';
+import type { CardManagement } from '../typing';
+import { queryDetail } from '@/api/iot-card/cardManagement';
+import Save from '../Save.vue';
+import Guide from '@/views/iot-card/components/Guide.vue';
+import LineChart from '@/views/iot-card/components/LineChart.vue';
+
+const route = useRoute();
+
+const visible = ref<boolean>(false);
+const current = ref<Partial<CardManagement>>({});
+const saveType = ref<string>('');
+const detail = ref<any>({});
+
+const flowData = ref<any[]>([]);
+
+const getDetail = () => {
+    queryDetail(route.query.id).then((resp: any) => {
+        if (resp.status === 200) {
+            detail.value = resp.result;
+        }
+    });
+};
+
+/**
+ * 新增、编辑关闭弹窗
+ * @param val 加载表格
+ */
+const saveChange = (val: any) => {
+    visible.value = false;
+    current.value = {};
+    if (val) {
+        getDetail();
+    }
+};
+
+getDetail();
+</script>
+<style scoped lang="less">
+.card {
+    padding: 24px;
+    background-color: #fff;
+}
+</style>
diff --git a/src/views/iot-card/CardManagement/index.vue b/src/views/iot-card/CardManagement/index.vue
index 3b5a1809..1ac18f80 100644
--- a/src/views/iot-card/CardManagement/index.vue
+++ b/src/views/iot-card/CardManagement/index.vue
@@ -351,6 +351,8 @@ import Import from './Import.vue';
 import Export from './Export.vue';
 import Save from './Save.vue';
 
+const router = useRouter();
+
 const cardManageRef = ref<Record<string, any>>({});
 const params = ref<Record<string, any>>({});
 const _selectedRowKeys = ref<string[]>([]);
@@ -535,6 +537,14 @@ const getActions = (
                 title: '查看',
             },
             icon: 'EyeOutlined',
+            onClick: () => {
+                router.push({
+                    path: '/iot-card/CardManagement/Detail',
+                    query: {
+                        id: data.id,
+                    },
+                });
+            },
         },
         {
             key: 'bindDevice',