From b971bda7acfd3529afc56839ecde92b3ab7d4c6d Mon Sep 17 00:00:00 2001
From: blp <2962632571@qq.com>
Date: Thu, 12 Jan 2023 18:28:43 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=E7=89=A9=E8=81=94?=
 =?UTF-8?q?=E5=8D=A1=E9=A6=96=E9=A1=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/iot-card/home.ts                |   6 +
 src/router/menu.ts                      |   5 +
 src/views/iot-card/Home/index.vue       | 541 ++++++++++++++++++++++++
 src/views/iot-card/components/Guide.vue |  55 +++
 4 files changed, 607 insertions(+)
 create mode 100644 src/api/iot-card/home.ts
 create mode 100644 src/views/iot-card/Home/index.vue
 create mode 100644 src/views/iot-card/components/Guide.vue

diff --git a/src/api/iot-card/home.ts b/src/api/iot-card/home.ts
new file mode 100644
index 00000000..d8b5e291
--- /dev/null
+++ b/src/api/iot-card/home.ts
@@ -0,0 +1,6 @@
+import server from '@/utils/request'
+
+// 查询特定天数流量数据
+export const queryFlow = (beginTime: any, endTime: any, data: any) => server.post(`/network/flow/_query/${beginTime}/${endTime}`, data)
+
+export const list = (data: any) => server.post(`/network/card/_query`, data)
\ No newline at end of file
diff --git a/src/router/menu.ts b/src/router/menu.ts
index 8bb794ae..c165bdd3 100644
--- a/src/router/menu.ts
+++ b/src/router/menu.ts
@@ -76,4 +76,9 @@ export default [
       path: '/init-home',
       component: () => import('@/views/init-home/index.vue')
   },
+    // 物联卡 iot-card
+    {
+      path: '/iot-card/home',
+      component: () => import('@/views/iot-card/Home/index.vue')
+    }
 ]
\ No newline at end of file
diff --git a/src/views/iot-card/Home/index.vue b/src/views/iot-card/Home/index.vue
new file mode 100644
index 00000000..be552656
--- /dev/null
+++ b/src/views/iot-card/Home/index.vue
@@ -0,0 +1,541 @@
+<!-- 物联卡-首页 -->
+<template>
+  <div class="page-container">
+    <a-row :gutter="24">
+      <a-col :span="14">
+        <div class="home-guide">
+          <Guide title="物联卡引导"></Guide>
+          <div
+            class="home-guide-items"
+            :style="`grid-template-columns: repeat(${
+              guideList ? guideList.length : 1
+            }, 1fr);`"
+          >
+            <div
+              v-for="(item, index) in guideList"
+              :key="index"
+              class="home-guide-item step-bar arrow-2 pointer"
+              @click="jumpPage(item)"
+            >
+              <div class="item-english">{{ item.english }}</div>
+              <div class="item-title">{{ item.name }}</div>
+              <div class="item-index">
+                <img :src="Image[index + 1]" />
+              </div>
+            </div>
+          </div>
+        </div>
+      </a-col>
+      <a-col :span="10">
+        <div class="home-statistics">
+          <Guide title="基础统计">
+            <template #extra>
+              <span class="extra-text">详情</span>
+            </template>
+          </Guide>
+          <div class="home-statistics-body">
+            <div class="home-guide-item">
+              <div class="item-english">昨日流量统计</div>
+              <div class="item-title">{{ currentSource }} M</div>
+              <div
+                class="item-index-echarts"
+                style="height: 75px; width: 110px"
+              >
+                <div class="chart" ref="todayFlowChart"></div>
+              </div>
+            </div>
+            <div class="home-guide-item">
+              <div class="item-english">物联卡</div>
+              <div class="item-content">
+                <div
+                  v-for="iten in pieChartData"
+                  :key="iten.key"
+                  class="item-node"
+                >
+                  <div class="item-node-text">
+                    {{ iten.value }}
+                  </div>
+                  <div :class="`state ${iten.className}`">
+                    {{ iten.name }}
+                  </div>
+                </div>
+              </div>
+              <div
+                class="item-index-echarts"
+                style="height: 75px; width: 110px"
+              >
+                <div class="chart" ref="iotCardChart"></div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </a-col>
+      <a-col :span="24" style="min-height: 580px">
+        <div class="home-body">
+          <Guide title="平台架构图" english="PLATFORM ARCHITECTURE DIAGRAM" />
+          <div class="home-body-img">
+            <img :src="getImage('/iot-card/iotcard-home.png')" />
+          </div>
+        </div>
+      </a-col>
+    </a-row>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { getImage } from '@/utils/comm';
+import Guide from '../components/Guide.vue';
+import { message } from 'ant-design-vue';
+import moment from 'moment';
+import { queryFlow, list } from '@/api/iot-card/home';
+import * as echarts from 'echarts';
+
+const router = useRouter();
+const { proxy } = <any>getCurrentInstance();
+
+interface GuideItemProps {
+  key: string;
+  name: string;
+  english: string;
+  url: string;
+  param?: Record<string, any>;
+  index?: number;
+  auth: boolean;
+}
+
+const Image = {
+  1: getImage('/home/1.png'),
+  2: getImage('/home/2.png'),
+  3: getImage('/home/3.png'),
+};
+const guideList = [
+  {
+    key: 'EQUIPMENT',
+    name: '平台对接',
+    english: 'STEP1',
+    auth: '',
+    url: '',
+  },
+  {
+    key: 'SCREEN',
+    name: '物联卡管理',
+    english: 'STEP2',
+    auth: '',
+    url: '',
+    param: { save: true },
+  },
+  {
+    key: 'CASCADE',
+    name: '操作记录',
+    english: 'STEP3',
+    auth: '',
+    url: '',
+  },
+];
+
+const currentSource = ref<number>(0);
+const barChartData = ref<any[]>([]);
+const pieChartData = ref<any[]>([
+  {
+    key: 'using',
+    name: '正常',
+    value: 0,
+    className: 'normal',
+  },
+  {
+    key: 'toBeActivated',
+    name: '未激活',
+    value: 0,
+    className: 'notActive',
+  },
+  {
+    key: 'deactivate',
+    name: '停用',
+    value: 0,
+    className: 'stopped',
+  },
+]);
+
+const jumpPage = (data: GuideItemProps) => {
+  if (data.url && data.auth) {
+    router.push(`${data.url}`, data.param);
+  } else {
+    message.warning('暂无权限，请联系管理员');
+  }
+};
+
+/**
+ * 获取昨日流量消耗
+ */
+const getTodayFlow = async () => {
+  const beginTime = moment().subtract(1, 'days').startOf('day').valueOf();
+  const endTime = moment().subtract(1, 'days').endOf('day').valueOf();
+  const resp: any = await queryFlow(beginTime, endTime, { orderBy: 'date' });
+  resp.result.map((item: any) => {
+    currentSource.value += parseFloat(item.value.toFixed(2));
+  });
+};
+
+/**
+ * 获取最近15天流量消耗统计图数据
+ */
+const get15DaysTrafficConsumption = async () => {
+  const beginTime = moment().subtract(15, 'days').startOf('day').valueOf();
+  const endTime = moment().subtract(1, 'days').endOf('day').valueOf();
+  const resp: any = await queryFlow(beginTime, endTime, { orderBy: 'date' });
+  barChartData.value = resp.result
+    .map((item: any) => ({
+      ...item,
+    }))
+    .reverse();
+  createBarChart();
+};
+
+/**
+ * 获取物联卡状态数据
+ */
+const getStateCard = async () => {
+  Promise.all(
+    pieChartData.value.map((item) => {
+      const params = {
+        terms: [
+          {
+            terms: [
+              {
+                column: 'cardStateType',
+                termType: 'eq',
+                value: item.key,
+              },
+            ],
+          },
+        ],
+      };
+      return list(params);
+    }),
+  )
+    .then((resp) => {
+      resp.forEach((i: any, index) => {
+        if (i.success) {
+          pieChartData.value[index].value = i.result.total;
+        }
+      });
+      createPieChart();
+    })
+    .catch((err) => {
+      console.log(err);
+    });
+};
+
+/**
+ * 最近15天流量消耗统计图
+ */
+const createBarChart = () => {
+  const myChart = echarts.init(proxy.$refs.todayFlowChart);
+
+  const options = {
+    tooltip: {},
+    xAxis: {
+      show: false,
+      data: barChartData.value.map((m) => m.date),
+    },
+    yAxis: {
+      show: false,
+    },
+    series: [
+      {
+        name: '流量消耗',
+        type: 'bar',
+        color: '#FACD89',
+        // barWidth: '5%', // 设单柱状置宽度
+        showBackground: true, //设置柱状的背景虚拟
+        data: barChartData.value.map((m) => parseFloat(m.value.toFixed(2))),
+      },
+    ],
+  };
+  myChart.setOption(options);
+  window.addEventListener('resize', function () {
+    myChart.resize();
+  });
+};
+/**
+ * 物联卡饼图
+ */
+const createPieChart = () => {
+  nextTick(() => {
+    const myChart = echarts.init(proxy.$refs.iotCardChart);
+
+    const options = {
+      tooltip: {
+        trigger: 'item',
+        formatter: '{b}: {c} ({d}%)',
+      },
+      color: ['#85a5ff', '#f29b55', '#c4c4c4'],
+      series: [
+        {
+          name: '',
+          type: 'pie',
+          avoidLabelOverlap: true, //是否启用防止标签重叠策略
+          radius: ['50%', '90%'],
+          center: ['50%', '50%'],
+          itemStyle: {
+            borderColor: 'rgba(255,255,255,1)',
+            borderWidth: 2,
+          },
+          label: {
+            normal: {
+              show: false,
+            },
+          },
+          data: pieChartData.value,
+        },
+      ],
+    };
+    myChart.setOption(options);
+    window.addEventListener('resize', function () {
+      myChart.resize();
+    });
+  });
+};
+
+watch(
+  barChartData.value,
+  () => {
+    createBarChart();
+  },
+  { deep: true },
+);
+
+getTodayFlow();
+get15DaysTrafficConsumption();
+getStateCard();
+</script>
+
+<style scoped lang="less">
+.home-base {
+  position: relative;
+  padding: 24px 16px;
+  background-color: #fff;
+}
+
+.home-guide {
+  margin-bottom: 24px;
+  padding: 24px 16px;
+  background-color: #fff;
+
+  .home-guide-items {
+    display: grid;
+    grid-column-gap: 56px;
+  }
+}
+
+.home-guide-item {
+  position: relative;
+  padding: 16px;
+  background: linear-gradient(
+    135.62deg,
+    #f6f7fd 22.27%,
+    rgba(255, 255, 255, 0.86) 91.82%
+  );
+  border-radius: 2px;
+  box-shadow: 0 4px 18px #efefef;
+  .state {
+    position: relative;
+    padding-left: 8px;
+    &::before {
+      position: absolute;
+      top: 7px;
+      left: 0;
+      display: inline-block;
+      width: 6px;
+      height: 6px;
+      margin-right: 2px;
+      content: '';
+    }
+    &.normal::before {
+      background: #85a5ff;
+    }
+    &.notActive::before {
+      background: #f29b55;
+    }
+    &.stopped::before {
+      background: #c4c4c4;
+    }
+  }
+
+  &.pointer {
+    cursor: pointer;
+  }
+
+  .item-english {
+    color: #4f4f4f;
+  }
+
+  .item-content {
+    display: flex;
+    margin-top: 15px;
+    width: 80%;
+  }
+
+  .item-node {
+    min-width: 58px;
+    margin-right: 8px;
+    z-index: 1;
+
+    .item-node-text {
+      font-size: 14px;
+      font-weight: bold;
+    }
+  }
+
+  .item-title {
+    margin: 20px 0;
+    color: @text-color;
+    font-weight: 700;
+    font-size: 20px;
+  }
+
+  .item-index {
+    position: absolute;
+    right: 10%;
+    bottom: 0;
+  }
+
+  .item-index-echarts {
+    .item-index;
+
+    right: 12px;
+    bottom: 5%;
+    z-index: 0;
+    width: 50%;
+
+    .chart {
+      width: 100%;
+      height: 100%;
+    }
+  }
+}
+
+.home-body {
+  .home-base;
+
+  min-height: 444px;
+  margin-bottom: 24px;
+  // padding-bottom: 26.5%;
+  padding-bottom: 30%;
+  overflow: hidden;
+  border-bottom: 1px solid #2f54eb;
+
+  .home-body-img {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 1;
+    width: 100%;
+    height: 100%;
+
+    > img {
+      width: 100%;
+      height: 100%;
+    }
+  }
+}
+
+.home-statistics {
+  .home-base;
+
+  .extra-text {
+    cursor: pointer;
+    color: @primary-color;
+  }
+
+  .home-statistics-body {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 24px;
+  }
+}
+
+.step-item-after {
+  position: absolute;
+  top: 50%;
+  right: -60px;
+  width: 60px;
+  height: 40px;
+  transform: translateY(-50%);
+  content: ' ';
+}
+
+.home-step {
+  .home-base;
+
+  .home-step-items {
+    display: grid;
+    grid-column-gap: 66px;
+
+    .step-item {
+      display: flex;
+      flex-direction: column;
+
+      .step-item-title {
+        position: relative;
+        padding: 16px 24px;
+        color: #333;
+        font-weight: bold;
+        font-size: 14px;
+        background-color: #f8f9fd;
+        cursor: pointer;
+
+        .step-item-img {
+          position: absolute;
+          top: 0;
+          right: 0;
+          z-index: 1;
+          height: 100%;
+
+          img {
+            height: 100%;
+          }
+        }
+
+        > span {
+          position: relative;
+          z-index: 2;
+        }
+      }
+
+      .step-item-content {
+        flex-grow: 1;
+        height: auto;
+        padding: 24px;
+        border-right: 1px solid #e5edf4;
+        border-bottom: 1px solid #e5edf4;
+        border-left: 1px solid #e5edf4;
+      }
+    }
+  }
+}
+
+.step-bar {
+  position: relative;
+
+  &.arrow-1 {
+    &:not(:last-child) {
+      &::after {
+        .step-item-after;
+
+        background: url('/images/home/arrow-1.png') no-repeat center;
+      }
+    }
+  }
+
+  &.arrow-2 {
+    &:not(:last-child) {
+      &::after {
+        .step-item-after;
+
+        background: url('/images/home/arrow-2.png') no-repeat center;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/iot-card/components/Guide.vue b/src/views/iot-card/components/Guide.vue
new file mode 100644
index 00000000..52b86134
--- /dev/null
+++ b/src/views/iot-card/components/Guide.vue
@@ -0,0 +1,55 @@
+<template>
+    <div class="home-title">
+        <div>{{ title }}</div>
+        <div class="extra-text">
+            <slot name="extra"></slot>
+        </div>
+        <div class="home-title-english">{{ english }}</div>
+    </div>
+</template>
+
+<script setup lang="ts" name="Guide">
+interface guideProps {
+    title: string;
+    english?: string;
+}
+
+const props = defineProps<guideProps>();
+</script>
+
+<style scoped lang="less">
+.home-title {
+    position: relative;
+    z-index: 2;
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 12px;
+    padding-left: 18px;
+    font-weight: 700;
+    font-size: 18px;
+
+    &::after {
+        position: absolute;
+        top: 50%;
+        left: 0;
+        width: 8px;
+        height: 8px;
+        background-color: @primary-color;
+        border: 1px solid #b4c0da;
+        transform: translateY(-50%);
+        content: ' ';
+    }
+
+    .extra-text {
+        font-size: 14px;
+        font-weight: 400;
+    }
+
+    .home-title-english {
+        position: absolute;
+        top: 30px;
+        color: rgba(0, 0, 0, 0.3);
+        font-size: 12px;
+    }
+}
+</style>